mypgs 1.5.1 → 2.0.0

package/dist/javascript/index.js

@@ -10,17 +10,21 @@
 "use strict";
 __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _pgs_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./_pgs.js */ "./assets/javascript/_pgs.js");
-/* harmony import */ var _components_accordion_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./components/_accordion.js */ "./assets/javascript/components/_accordion.js");
-/* harmony import */ var _components_dropdown_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./components/_dropdown.js */ "./assets/javascript/components/_dropdown.js");
-/* harmony import */ var _components_menu_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./components/_menu.js */ "./assets/javascript/components/_menu.js");
-/* harmony import */ var _components_modals_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./components/_modals.js */ "./assets/javascript/components/_modals.js");
-/* harmony import */ var _components_notifications_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./components/_notifications.js */ "./assets/javascript/components/_notifications.js");
-/* harmony import */ var _components_slides_js__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./components/_slides.js */ "./assets/javascript/components/_slides.js");
-/* harmony import */ var _components_stepTabs_js__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./components/_stepTabs.js */ "./assets/javascript/components/_stepTabs.js");
-/* harmony import */ var _components_steps_js__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./components/_steps.js */ "./assets/javascript/components/_steps.js");
-/* harmony import */ var _components_summary_js__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./components/_summary.js */ "./assets/javascript/components/_summary.js");
-/* harmony import */ var _functions_formValidate_js__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ./functions/_formValidate.js */ "./assets/javascript/functions/_formValidate.js");
-/* harmony import */ var _functions_scrollY_js__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ./functions/_scrollY.js */ "./assets/javascript/functions/_scrollY.js");
+/* harmony import */ var _base_svg_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./base/_svg.js */ "./assets/javascript/base/_svg.js");
+/* harmony import */ var _components_accordion_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./components/_accordion.js */ "./assets/javascript/components/_accordion.js");
+/* harmony import */ var _components_dropdown_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./components/_dropdown.js */ "./assets/javascript/components/_dropdown.js");
+/* harmony import */ var _components_menu_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./components/_menu.js */ "./assets/javascript/components/_menu.js");
+/* harmony import */ var _components_modals_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./components/_modals.js */ "./assets/javascript/components/_modals.js");
+/* harmony import */ var _components_notifications_js__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./components/_notifications.js */ "./assets/javascript/components/_notifications.js");
+/* harmony import */ var _components_search_js__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./components/_search.js */ "./assets/javascript/components/_search.js");
+/* harmony import */ var _components_slides_js__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./components/_slides.js */ "./assets/javascript/components/_slides.js");
+/* harmony import */ var _components_stepTabs_js__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./components/_stepTabs.js */ "./assets/javascript/components/_stepTabs.js");
+/* harmony import */ var _components_steps_js__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ./components/_steps.js */ "./assets/javascript/components/_steps.js");
+/* harmony import */ var _components_summary_js__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ./components/_summary.js */ "./assets/javascript/components/_summary.js");
+/* harmony import */ var _functions_formValidate_js__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ./functions/_formValidate.js */ "./assets/javascript/functions/_formValidate.js");
+/* harmony import */ var _functions_scrollY_js__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ./functions/_scrollY.js */ "./assets/javascript/functions/_scrollY.js");
+
+
 
 
 
@@ -36,17 +40,19 @@ __webpack_require__.r(__webpack_exports__);
 
 
 _pgs_js__WEBPACK_IMPORTED_MODULE_0__.pgs.registerModules({
-    accordion: _components_accordion_js__WEBPACK_IMPORTED_MODULE_1__.PGS_accordion,
-    dropdown: _components_dropdown_js__WEBPACK_IMPORTED_MODULE_2__.PGS_dropdown,
-    menu: _components_menu_js__WEBPACK_IMPORTED_MODULE_3__.PGS_menu,
-    modal: _components_modals_js__WEBPACK_IMPORTED_MODULE_4__.PGS_modal,
-    notification: _components_notifications_js__WEBPACK_IMPORTED_MODULE_5__.PGS_notification,
-    slides: _components_slides_js__WEBPACK_IMPORTED_MODULE_6__.PGS_slides,
-    stepTabs: _components_stepTabs_js__WEBPACK_IMPORTED_MODULE_7__.PGS_stepTabs,
-    steps: _components_steps_js__WEBPACK_IMPORTED_MODULE_8__.PGS_steps,
-    summary: _components_summary_js__WEBPACK_IMPORTED_MODULE_9__.PGS_summary,
-    formValidate: _functions_formValidate_js__WEBPACK_IMPORTED_MODULE_10__.PGS_formValidate,
-    scrollHorizontal: _functions_scrollY_js__WEBPACK_IMPORTED_MODULE_11__.PGS_scrollHorizontal,
+    svg: _base_svg_js__WEBPACK_IMPORTED_MODULE_1__.PGS_svg,
+    accordion: _components_accordion_js__WEBPACK_IMPORTED_MODULE_2__.PGS_accordion,
+    dropdown: _components_dropdown_js__WEBPACK_IMPORTED_MODULE_3__.PGS_dropdown,
+    menu: _components_menu_js__WEBPACK_IMPORTED_MODULE_4__.PGS_menu,
+    modal: _components_modals_js__WEBPACK_IMPORTED_MODULE_5__.PGS_modal,
+    notification: _components_notifications_js__WEBPACK_IMPORTED_MODULE_6__.PGS_notification,
+    search: _components_search_js__WEBPACK_IMPORTED_MODULE_7__.PGS_search,
+    slides: _components_slides_js__WEBPACK_IMPORTED_MODULE_8__.PGS_slides,
+    stepTabs: _components_stepTabs_js__WEBPACK_IMPORTED_MODULE_9__.PGS_stepTabs,
+    steps: _components_steps_js__WEBPACK_IMPORTED_MODULE_10__.PGS_steps,
+    summary: _components_summary_js__WEBPACK_IMPORTED_MODULE_11__.PGS_summary,
+    formValidate: _functions_formValidate_js__WEBPACK_IMPORTED_MODULE_12__.PGS_formValidate,
+    scrollHorizontal: _functions_scrollY_js__WEBPACK_IMPORTED_MODULE_13__.PGS_scrollHorizontal,
 });
 
 
@@ -250,10 +256,56 @@ function pgs(root) {
     function createOption(attribute) {
         if (!canAttr) return undefined;
 
+        const read = () => (root.getAttribute(attribute) || "").match(/[^\s[\]]+(?:\[[^\]]*\])?/g) || [];
+        const write = values => root.setAttribute(attribute, values.join(" "));
+        const getKey = value => String(value).trim().match(/^[^\s[\]]+/)?.[0] || "";
+        const getValues = values => values
+            .flat()
+            .flatMap(value => String(value).match(/[^\s[\]]+(?:\[[^\]]*\])?/g) || [])
+            .filter(Boolean);
+
         function api() {
             return api;
         }
 
+        api.add = function (...values) {
+            const current = read();
+
+            getValues(values).forEach(value => {
+                if (!current.includes(value)) current.push(value);
+            });
+
+            write(current);
+            return api;
+        };
+
+        api.remove = function (...values) {
+            const keys = getValues(values).map(getKey).filter(Boolean);
+            write(read().filter(value => !keys.includes(getKey(value))));
+            return api;
+        };
+
+        api.toggle = function (value, force) {
+            const key = getKey(value);
+            if (!key) return false;
+
+            const exists = api.contains(key);
+
+            if (force !== undefined) {
+                if (force && !exists) api.add(value);
+                if (!force && exists) api.remove(key);
+                return !!force;
+            }
+
+            if (exists) {
+                api.remove(key);
+                return false;
+            }
+
+            api.add(value);
+            return true;
+        };
+
         api.contains = function (key) {
             const source = root.getAttribute(attribute) || "";
             const safeKey = String(key).replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
@@ -273,6 +325,18 @@ function pgs(root) {
             return match ? match[1] : undefined;
         };
 
+        api.setValueBrackets = function (key, value = "") {
+            const optionKey = getKey(key);
+            if (!optionKey) return api;
+
+            const option = `${optionKey}[${String(value).trim()}]`;
+            const options = read().filter(item => getKey(item) !== optionKey);
+
+            options.push(option);
+            write(options);
+            return api;
+        };
+
         Object.defineProperty(api, "value", {
             get() { return root.getAttribute(attribute); },
             set(v) { root.setAttribute(attribute, v); }
@@ -355,124 +419,46 @@ globalThis.pgs ??= pgs;
 
 //# DARKMODE
 
+const EVENT_SVG_CHANGE_COLOR = "pgs:svg:changeColor";
 
-//= CHANGE COLOR SVG & LOTTIE
-//+ SEARCH COLOR 
-function searchColor(type = "svg") {
-    const ROOT = getComputedStyle(document.documentElement);
-    const colors = []
-    for (let I = 0; I < 20; I++) {
-        const color = ROOT.getPropertyValue('--' + type + '-color-' + I).toLocaleLowerCase().split("&");
-        if (!color[0] == "" && !color[1] == "") {
-            let lightDark = [color[0], color[1]]
-            colors.push(lightDark)
-        }
-    }
-    return colors;
-}
-const colors_svg_lottie = [searchColor("svg"), searchColor("lottie")];
-
-
-//+ change COLORS
-function darkmodeColorSVG() {
-    function changecolor(svgDoc, type = "svg") {
-        let isDarkMode = (document.documentElement.getAttribute("data-darkmode") === "true") ? false : true;
-
-        svgDoc.querySelectorAll('[fill], [stroke]').forEach(fillStroke => {
-
-            for (const colors of colors_svg_lottie) {
-                for (const color of colors) {
-                    let OLD = (color[0] || '').replace(/\s/g, '');
-                    let NEW = (color[1] || '').replace(/\s/g, '');
-
-                    ["fill", "stroke"].forEach(attr => {
-                        const current = fillStroke.getAttribute(attr);
-
-                        fillStroke.style.transition = "fill 0.5s ease, stroke 0.5s ease";
-
-                        if (!isDarkMode) {
-                            if (current == OLD) fillStroke.setAttribute(attr, NEW)
-                        } else {
-                            if (current == NEW) fillStroke.setAttribute(attr, OLD)
-                        }
-                    });
-                }
-            }
-        });
-    }
-
-    //== OBJECTS
-    const objects = document.querySelectorAll('object[type="image/svg+xml"]');
-    objects.forEach(obj => {
-
-        //=== ALL FILL / STROKE
-        obj.addEventListener("load", () => {
-            const svgDoc = obj.contentDocument;
-            if (svgDoc) changecolor(svgDoc, "svg")
-        });
-
-        //=== In caso l'object sia già caricato
-        if (obj.contentDocument) {
-            const event = new Event("load");
-            obj.dispatchEvent(event);
-        }
-    });
-
-    //== LOTTIE
-    const lottiePlayers = document.querySelectorAll('lottie-player');
-    lottiePlayers.forEach(lottiePlayer => {
-
-        //=== ALL FILL / STROKE
-        lottiePlayer.addEventListener("load", () => {
-            const svg = lottiePlayer.shadowRoot.querySelector('svg');
-            if (svg) changecolor(svg, "lottie")
-        });
+//+ CHANGE ICON
+function changeIcon(selector, isDarkMode) {
+    selector.forEach(button => {
+        const ICON = button.querySelector("i");
+        if (!ICON) return;
 
-        //=== In caso lottie sia già caricato
-        if (lottiePlayer.shadowRoot) {
-            const event = new Event("load");
-            lottiePlayer.dispatchEvent(event);
-        }
+        ICON.classList.toggle("fa-moon", !isDarkMode);
+        ICON.classList.toggle("fa-sun", isDarkMode);
     });
 }
 
+//+ SET STATUS
+function setDarkmodeStatus(toggle = false, button) {
+    let isDarkMode = localStorage.getItem("screenIsDarkMode") === "true";
 
+    if (toggle) {
+        isDarkMode = !isDarkMode;
+        localStorage.setItem("screenIsDarkMode", isDarkMode);
+    }
 
-//= BUTTON DARKMODE 
-//+ CHANGE ICON AND SVG 
-let toggleDarkmode = pgs(document).querySelectorAll("toggleDarkmode");
-if (localStorage.getItem("screenIsDarkMode") === "true") {
-    document.body.classList.add("darkmode");
-    document.querySelector(":root").setAttribute("data-darkmode", "true");
-    document.body.setAttribute("data-darkmode", "true");
-}
+    // SET
+    pgs(document.documentElement).state.toggle("darkmode", isDarkMode);
+    pgs(document.body).state.toggle("darkmode", isDarkMode);
+    // END SET
 
-function change(selector, isDarkMode) {
-    selector.forEach(button => {
-        const ICON = button.querySelector("i");
-        if (!ICON) return;
-        ICON.classList.toggle("fa-moon", !isDarkMode);
-        ICON.classList.toggle("fa-sun", isDarkMode);
-    });
-    darkmodeColorSVG();
+    changeIcon(button, isDarkMode);
+    document.dispatchEvent(new CustomEvent(EVENT_SVG_CHANGE_COLOR, { detail: { isDarkMode } }));
 }
 
-toggleDarkmode.forEach(button => {
 
-    //== EXECUTE IMMEDIATELY
-    let isDarkMode = document.documentElement.getAttribute("data-darkmode") === "true";
-    change(toggleDarkmode, isDarkMode);
 
-    //== CLICK BUTTON 
-    button.addEventListener("click", () => {
-        let isDarkMode = (document.documentElement.getAttribute("data-darkmode") === "true") ? false : true;
-        localStorage.setItem("screenIsDarkMode", isDarkMode);
+//= INIT
+const toggleDarkmode = pgs(document).querySelectorAll("toggleDarkmode");
+setDarkmodeStatus(false, toggleDarkmode);
 
-        document.body.classList.toggle("darkmode", isDarkMode);
-        document.body.setAttribute("data-darkmode", isDarkMode);
-        document.querySelector(":root").setAttribute("data-darkmode", isDarkMode);
-        change(toggleDarkmode, isDarkMode);
-    });
+//= BUTTON DARKMODE
+toggleDarkmode.forEach(button => {
+    button.addEventListener("click", () => setDarkmodeStatus(true, toggleDarkmode));
 });
 
 
@@ -528,6 +514,124 @@ document.addEventListener('DOMContentLoaded', () => {
 });
 
 
+/***/ },
+
+/***/ "./assets/javascript/base/_svg.js"
+/*!****************************************!*\
+  !*** ./assets/javascript/base/_svg.js ***!
+  \****************************************/
+(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   PGS_svg: () => (/* binding */ PGS_svg)
+/* harmony export */ });
+//# SVG & LOTTIE COLORS
+
+const svgColors = {
+    eventChangeColor: "pgs:svg:changeColor",
+    watchedObjects: new WeakSet(),
+    watchedLotties: new WeakSet(),
+
+    _normalizeColor: (color = "") => {
+        return color.replace(/\s/g, "").toLocaleLowerCase();
+    },
+
+    _getCurrentDarkmode: () => {
+        return pgs(document.documentElement).state.contains("darkmode");
+    },
+
+    searchColor(type = "svg") {
+        const ROOT = getComputedStyle(document.documentElement);
+        const colors = [];
+
+        for (let I = 0; I < 20; I++) {
+            const color = ROOT.getPropertyValue("--" + type + "-color-" + I).toLocaleLowerCase().split("&").map(value => value.trim());
+            if (color[0] && color[1]) colors.push([color[0], color[1]]);
+        }
+
+        return colors;
+    },
+
+    _changeColor(svgDoc, isDarkMode, colors) {
+        if (!svgDoc) return;
+
+        svgDoc.querySelectorAll("[fill], [stroke]").forEach(fillStroke => {
+            for (const color of colors) {
+                const OLD = svgColors._normalizeColor(color[0]);
+                const NEW = svgColors._normalizeColor(color[1]);
+
+                ["fill", "stroke"].forEach(attr => {
+                    const current = svgColors._normalizeColor(fillStroke.getAttribute(attr) || "");
+                    if (!current) return;
+
+                    fillStroke.style.transition = "fill 0.5s ease, stroke 0.5s ease";
+
+                    if (isDarkMode && current === OLD) fillStroke.setAttribute(attr, NEW);
+                    if (!isDarkMode && current === NEW) fillStroke.setAttribute(attr, OLD);
+                });
+            }
+        });
+    },
+
+    _getLottieSvg(lottiePlayer) {
+        return lottiePlayer.shadowRoot?.querySelector("svg") || null;
+    },
+
+    init() {
+        document.addEventListener(svgColors.eventChangeColor, event => {
+            svgColors.applyColorsSVG(event.detail?.isDarkMode ?? svgColors._getCurrentDarkmode());
+            svgColors.applyColorsLottie(event.detail?.isDarkMode ?? svgColors._getCurrentDarkmode());
+        });
+
+        document.addEventListener("DOMContentLoaded", () => {
+            svgColors.applyColorsSVG();
+            svgColors.applyColorsLottie();
+        });
+    },
+
+    applyColorsSVG(isDarkMode = svgColors._getCurrentDarkmode()) {
+        const colorsSvg = svgColors.searchColor("svg");
+
+        if (!pgs(document).querySelector("svgChangeColor")) return;
+
+        document.querySelectorAll('object[type="image/svg+xml"]').forEach(obj => {
+            if (!svgColors.watchedObjects.has(obj)) {
+                obj.addEventListener("load", () => svgColors._changeColor(obj.contentDocument, svgColors._getCurrentDarkmode(), svgColors.searchColor("svg")));
+                svgColors.watchedObjects.add(obj);
+            }
+
+            if (obj.contentDocument) svgColors._changeColor(obj.contentDocument, isDarkMode, colorsSvg);
+        });
+
+    },
+
+    applyColorsLottie(isDarkMode = svgColors._getCurrentDarkmode()) {
+        const colorsLottie = svgColors.searchColor("svg");
+
+        if (!pgs(document).querySelector("lottieChangeColor")) return;
+
+        document.querySelectorAll("lottie-player").forEach(lottiePlayer => {
+            if (!svgColors.watchedLotties.has(lottiePlayer)) {
+                lottiePlayer.addEventListener("load", () => svgColors._changeColor(svgColors._getLottieSvg(lottiePlayer), svgColors._getCurrentDarkmode(), svgColors.searchColor("svg")));
+                svgColors.watchedLotties.add(lottiePlayer);
+            }
+
+            if (lottiePlayer.shadowRoot) svgColors._changeColor(svgColors._getLottieSvg(lottiePlayer), isDarkMode, colorsLottie);
+        });
+    },
+};
+
+svgColors.init();
+
+const PGS_svg = {
+    eventChangeColor: svgColors.eventChangeColor,
+    applyColorsSVG: isDarkMode => svgColors.applyColorsSVG(isDarkMode),
+    applyColorsLottie: isDarkMode => svgColors.applyColorsLottie(isDarkMode),
+};
+
+
 /***/ },
 
 /***/ "./assets/javascript/components/_accordion.js"
@@ -539,9 +643,7 @@ document.addEventListener('DOMContentLoaded', () => {
 "use strict";
 __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   PGS_accordion: () => (/* binding */ PGS_accordion),
-/* harmony export */   PGS_accordion_api: () => (/* binding */ PGS_accordion_api),
-/* harmony export */   PGS_accordion_init: () => (/* binding */ PGS_accordion_init)
+/* harmony export */   PGS_accordion: () => (/* binding */ PGS_accordion)
 /* harmony export */ });
 //= ACCORDION
 const API = new WeakMap();
@@ -930,6 +1032,7 @@ function PGS_menu_init(root = document) {
                 li.querySelector("a").insertAdjacentElement("afterend", button);
 
                 pgs(li).add("dropdown")
+                pgs(li).option.setValueBrackets("position", "bottom right")
                 pgs(button).add("dropdown-button")
                 pgs(button).add("buttonNohover")
                 pgs(ul).add("dropdown-content")
@@ -940,9 +1043,6 @@ function PGS_menu_init(root = document) {
         API.set(MENU, {
             element: MENU,
             type: "horizontal",
-            // items: () => Array.from(MENU.querySelectorAll('nav > ul > li')),
-            // submenus: () => Array.from(MENU.querySelectorAll('.menu-item-has-children > ul')),
-            // dropdowns: () => Array.from(MENU.querySelectorAll('.menu-item-has-children')).map(PGS_dropdown_api).filter(Boolean),
             refresh: () => {
                 PGS_menu_init(MENU.parentNode || document);
                 return API.get(MENU);
@@ -977,168 +1077,189 @@ const PGS_menu = {
 "use strict";
 __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   PGS_modal: () => (/* binding */ PGS_modal),
-/* harmony export */   PGS_modal_api: () => (/* binding */ PGS_modal_api),
-/* harmony export */   PGS_modal_init: () => (/* binding */ PGS_modal_init)
+/* harmony export */   PGS_modal: () => (/* binding */ PGS_modal)
 /* harmony export */ });
 //# MODAL
 const API = new WeakMap();
 
-function PGS_modal_init(selector = "modal") {
-    pgs(document).querySelectorAll(selector).forEach(MODAL => {
-        if (API.has(MODAL)) return;
+function getModals(root) {
+    const modals = root instanceof Element && pgs(root).contains("modal") ? [root] : [];
+    modals.push(...pgs(root).querySelectorAll("modal"));
+    return modals;
+}
 
-        const BUTTON_OPEN = pgs(MODAL).querySelector("modal-button");        
-        const DIALOG = MODAL.querySelector("dialog");
-        if (!BUTTON_OPEN || !DIALOG) return;
+function initializeModal(MODAL, existingDialog = null) {
+    if (API.has(MODAL)) return;
 
-        //== SELECTOR
-        const DOMButtonClose = '<button pgs="buttonClose modal-close" type="button" tabindex="0" aria-label="Chiudi"><i class="fa-solid fa-close"></i></button>';
-        const modalContentHeader = pgs(MODAL)?.querySelector("modal-dialog-content-header")
-        
-        
-        //== OPTION ATTRIBUTES MODAL
-        const disableBackdropClose = pgs(MODAL).option.contains("disableBackdropClose")
-        const data_history = pgs(MODAL).option.contains("history");
-        const data_container = pgs(MODAL).option.getValueBrackets("containerID");
-        const data_containerPGS = pgs(MODAL).option.getValueBrackets("containerPGS");
-        
-        //== OPTION ATTRIBUTES DIALOG
-        const topLevel = pgs(DIALOG).option.contains("topLevel")
+    const BUTTON_OPEN = pgs(MODAL).querySelector("modal-button");
+    const DIALOG = existingDialog || MODAL.querySelector("dialog");
+    if (!BUTTON_OPEN || !DIALOG) return;
+    const eventController = new AbortController();
+    const { signal } = eventController;
+    let historyObserver = null;
+    let historyTimeout = null;
 
-        
-        //== BUTTON CLOSE
-        if (pgs(MODAL).querySelector("modal-close")) null
-        else if (modalContentHeader) modalContentHeader.insertAdjacentHTML("beforeend", DOMButtonClose)
-        else DIALOG.insertAdjacentHTML("beforeend", DOMButtonClose)
-        const BUTTON_CLOSE = pgs(MODAL).querySelector("modal-close")
+    //== SELECTOR
+    const DOMButtonClose = '<button pgs="buttonClose modal-close" type="button" tabindex="0" aria-label="Chiudi"><i class="fa-solid fa-close"></i></button>';
+    const modalContentHeader = pgs(DIALOG).querySelector("modal-dialog-content-header");
 
 
-        //== SET
-        pgs(DIALOG).add("dialog modal-dialog");
+    //== OPTION ATTRIBUTES MODAL
+    const disableBackdropClose = pgs(MODAL).option.contains("disableBackdropClose");
+    const data_history = pgs(MODAL).option.contains("history");
+    const data_container = pgs(MODAL).option.getValueBrackets("containerID");
+    const data_containerPGS = pgs(MODAL).option.getValueBrackets("containerPGS");
 
-        //== BUTTON OPEN
-        BUTTON_OPEN.setAttribute("role", "button");
-        BUTTON_OPEN.setAttribute("aria-label", "apri modale");
+    //== OPTION ATTRIBUTES DIALOG
+    const topLevel = pgs(DIALOG).option.contains("topLevel");
 
 
-        //== POSITION
-        if(!topLevel){           
-            if (data_container) document.querySelector("#" + data_container)?.append(DIALOG);
-            else if (data_containerPGS) pgs(document).querySelector(data_containerPGS)?.append(DIALOG);
-            else document.body.append(DIALOG);
-        }
+    //== BUTTON CLOSE
+    if (!pgs(DIALOG).querySelector("modal-close") && !pgs(MODAL).querySelector("modal-close")) {
+        if (modalContentHeader) modalContentHeader.insertAdjacentHTML("beforeend", DOMButtonClose);
+        else DIALOG.insertAdjacentHTML("beforeend", DOMButtonClose);
+    }
+    const BUTTON_CLOSE = pgs(DIALOG).querySelector("modal-close") || pgs(MODAL).querySelector("modal-close");
 
 
-        //+ FN STATUS 
-        function statusModal(status = true) {
-            BUTTON_OPEN?.setAttribute("aria-expanded", status);
-            DIALOG?.setAttribute("aria-expanded", status);
-        }
+    //== SET
+    pgs(DIALOG).add("dialog modal-dialog");
 
-        //+ FN OPEN 
-        function openModal(e) {
-            e?.stopImmediatePropagation();
-            if (DIALOG.open) {
-                closeModal(e);
-                return;
-            }
+    //== BUTTON OPEN
+    BUTTON_OPEN.setAttribute("role", "button");
+    BUTTON_OPEN.setAttribute("aria-label", "apri modale");
 
-            if (!DIALOG.open) document.querySelectorAll("dialog[open]").forEach((dlg) => dlg.close());
-            statusModal(true);
-            topLevel ? DIALOG.showModal() : DIALOG.show();
-            // modalCustomEvents('modal:open', { event: e });
-            MODAL.dispatchEvent(new CustomEvent('modal:open'));
-            DIALOG.dispatchEvent(new CustomEvent('modal:open'));
-        }
 
-        //+ FN CLOSE 
-        function closeModal(e) {
-            e?.stopImmediatePropagation()
-            statusModal(false);
-            DIALOG.close();
-            // modalCustomEvents('modal:close', { event: e });
-            MODAL.dispatchEvent(new CustomEvent('modal:close'));
-            DIALOG.dispatchEvent(new CustomEvent('modal:close'));
-        }
+    //== POSITION
+    if (topLevel && !MODAL.contains(DIALOG)) MODAL.append(DIALOG);
+    else if (!topLevel) {
+        if (data_container) document.querySelector("#" + data_container)?.append(DIALOG);
+        else if (data_containerPGS) pgs(document).querySelector(data_containerPGS)?.append(DIALOG);
+        else document.body.append(DIALOG);
+    }
 
-        function forceOpen(e) {
-            if (!DIALOG.open) openModal(e);
-        }
 
-        function forceClose(e) {
-            if (DIALOG.open) closeModal(e);
-        }
+    //+ FN STATUS
+    function statusModal(status = true) {
+        BUTTON_OPEN?.setAttribute("aria-expanded", status);
+        DIALOG?.setAttribute("aria-expanded", status);
+    }
 
-        //+ fn OPEN ON HISTORY
-        function openModalOnHistory() {
-            const params = new URLSearchParams(window.location.search);
-            if (params.get('modal') !== BUTTON_OPEN.id) return;
-            document.getElementById(BUTTON_OPEN.id)?.scrollIntoView({ behavior: 'smooth' });
-            openModal();
+    //+ FN OPEN
+    function openModal(e) {
+        e?.stopImmediatePropagation();
+        if (DIALOG.open) {
+            closeModal(e);
+            return;
         }
 
+        if (!DIALOG.open) document.querySelectorAll("dialog[open]").forEach((dlg) => dlg.close());
+        statusModal(true);
+        topLevel ? DIALOG.showModal() : DIALOG.show();
+        // modalCustomEvents('modal:open', { event: e });
+        MODAL.dispatchEvent(new CustomEvent('modal:open'));
+        DIALOG.dispatchEvent(new CustomEvent('modal:open'));
+    }
 
-        //= OPEN 
-        BUTTON_OPEN.addEventListener("click", (e) => openModal(e));
-        BUTTON_OPEN.addEventListener("keypress", (e) => !DIALOG.open && (e.key === "Enter" || e.key === " ") && openModal(e));
-        
-        //= CLOSE 
-        DIALOG.addEventListener("close", () => statusModal(false));
-        DIALOG.addEventListener("click", e => { if (e.target == DIALOG && !disableBackdropClose) closeModal(e) });
-        BUTTON_CLOSE?.addEventListener("click", e => closeModal(e));
-        
-        //= UPDATE HISTORY
-        if (data_history && BUTTON_OPEN.id) {
-            setTimeout(openModalOnHistory, 1);
-
-            //== Aggiorna URL quando cambia l'attributo "open" del dialog
-            const obs = new MutationObserver(() => {
-                let isOpen = DIALOG.hasAttribute("open");
-                try {
-                    const url = new URL(window.location.href);
-                    const params = new URLSearchParams(url.search);
-                    isOpen ? params.set('modal', BUTTON_OPEN.id) : params.delete('modal');
-                    url.search = params.toString() ? `?${params.toString()}` : "";
-                    window.history.pushState({ modal: BUTTON_OPEN.id, open: isOpen }, "", url);
-                } catch (_) { }
-            });
-            obs.observe(DIALOG, { attributes: true, attributeFilter: ["open"] });
-
-            //== Gestisce back/forward del browser per aprire/chiudere il dialog coerentemente
-            window.addEventListener("popstate", () => {
-                try {
-                    const params = new URLSearchParams(window.location.search);
-                    const shouldOpen = params.get('modal') === BUTTON_OPEN.id;
-                    if (shouldOpen && !DIALOG.open) DIALOG.showModal();
-                    if (!shouldOpen && DIALOG.open) closeModal()
-                } catch (_) { }
-            });
-        }
+    //+ FN CLOSE
+    function closeModal(e) {
+        e?.stopImmediatePropagation()
+        statusModal(false);
+        DIALOG.close();
+        // modalCustomEvents('modal:close', { event: e });
+        MODAL.dispatchEvent(new CustomEvent('modal:close'));
+        DIALOG.dispatchEvent(new CustomEvent('modal:close'));
+    }
 
-        API.set(MODAL, {
-            element: MODAL,
-            button: BUTTON_OPEN,
-            dialog: DIALOG,
-            closeButton: BUTTON_CLOSE,
-            open: forceOpen,
-            close: forceClose,
-            toggle: openModal,
-            refresh: () => {
-                PGS_modal_init(selector);
-                return API.get(MODAL);
-            },
-            isOpen: () => DIALOG.open,
+    function forceOpen(e) {
+        if (!DIALOG.open) openModal(e);
+    }
+
+    function forceClose(e) {
+        if (DIALOG.open) closeModal(e);
+    }
+
+    //+ fn OPEN ON HISTORY
+    function openModalOnHistory() {
+        const params = new URLSearchParams(window.location.search);
+        if (params.get('modal') !== BUTTON_OPEN.id) return;
+        document.getElementById(BUTTON_OPEN.id)?.scrollIntoView({ behavior: 'smooth' });
+        openModal();
+    }
+
+
+    //= OPEN
+    BUTTON_OPEN.addEventListener("click", (e) => openModal(e), { signal });
+    BUTTON_OPEN.addEventListener("keypress", (e) => !DIALOG.open && (e.key === "Enter" || e.key === " ") && openModal(e), { signal });
+
+    //= CLOSE
+    DIALOG.addEventListener("close", () => statusModal(false), { signal });
+    DIALOG.addEventListener("click", e => { if (e.target == DIALOG && !disableBackdropClose) closeModal(e) }, { signal });
+    BUTTON_CLOSE?.addEventListener("click", e => closeModal(e), { signal });
+
+    //= UPDATE HISTORY
+    if (data_history && BUTTON_OPEN.id) {
+        historyTimeout = window.setTimeout(openModalOnHistory, 1);
+
+        //== Aggiorna URL quando cambia l'attributo "open" del dialog
+        historyObserver = new MutationObserver(() => {
+            let isOpen = DIALOG.hasAttribute("open");
+            try {
+                const url = new URL(window.location.href);
+                const params = new URLSearchParams(url.search);
+                isOpen ? params.set('modal', BUTTON_OPEN.id) : params.delete('modal');
+                url.search = params.toString() ? `?${params.toString()}` : "";
+                window.history.pushState({ modal: BUTTON_OPEN.id, open: isOpen }, "", url);
+            } catch (_) { }
         });
+        historyObserver.observe(DIALOG, { attributes: true, attributeFilter: ["open"] });
+
+        //== Gestisce back/forward del browser per aprire/chiudere il dialog coerentemente
+        window.addEventListener("popstate", () => {
+            try {
+                const params = new URLSearchParams(window.location.search);
+                const shouldOpen = params.get('modal') === BUTTON_OPEN.id;
+                if (shouldOpen && !DIALOG.open) DIALOG.showModal();
+                if (!shouldOpen && DIALOG.open) closeModal()
+            } catch (_) { }
+        }, { signal });
+    }
+
+    function destroy() {
+        eventController.abort();
+        historyObserver?.disconnect();
+        if (historyTimeout !== null) window.clearTimeout(historyTimeout);
+        API.delete(MODAL);
+    }
+
+    API.set(MODAL, {
+        element: MODAL,
+        button: BUTTON_OPEN,
+        dialog: DIALOG,
+        closeButton: BUTTON_CLOSE,
+        open: forceOpen,
+        close: forceClose,
+        toggle: openModal,
+        refresh: () => {
+            const nextDialog = MODAL.querySelector("dialog") || DIALOG;
+            destroy();
+            initializeModal(MODAL, nextDialog);
+            return API.get(MODAL);
+        },
+        isOpen: () => DIALOG.open,
     });
 }
 
+function PGS_modal_init(root = document) {
+    getModals(root).forEach(MODAL => initializeModal(MODAL));
+}
+
 //# INIT PGS_modal
 PGS_modal_init()
 
 //# API
-function PGS_modal_api(selector) {
-    return API.get(selector);
+function PGS_modal_api(element) {
+    return API.get(element);
 }
 
 const PGS_modal = {
@@ -1158,8 +1279,7 @@ const PGS_modal = {
 "use strict";
 __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   PGS_notification: () => (/* binding */ PGS_notification),
-/* harmony export */   PGS_notificationTrigger_init: () => (/* binding */ PGS_notificationTrigger_init)
+/* harmony export */   PGS_notification: () => (/* binding */ PGS_notification)
 /* harmony export */ });
 //= PGS_notification
 const fn_notification = {
@@ -1187,10 +1307,12 @@ const fn_notification = {
     },
 
     _getData(root) {
+        const rawNotification = pgs(root).option.getValueBrackets("notification") || "{}";
+
         try {
-            return JSON.parse(root.dataset.notification || "{}");
+            return JSON.parse(rawNotification);
         } catch (error) {
-            console.warn("PGS notification: dati non validi", error);
+            console.warn("PGS notification: configurazione JSON non valida", error);
             return {};
         }
     },
@@ -1209,13 +1331,21 @@ const fn_notification = {
         `;
     },
 
-    initNotification(type, containerToken, icon, text, timeout, methodDelete = "replace", link = null) {
-        let containerNotification = pgs(document).querySelector(containerToken);
+    _getContainer(containerType) {
+        return Array.from(pgs(document).querySelectorAll("notification")).find(container => {
+            const isToast = pgs(container).option.contains("toast");
+            return containerType === "toast" ? isToast : !isToast;
+        });
+    },
+
+    initNotification(type, containerType, icon, text, timeout, methodDelete = "replace", link = null) {
+        let containerNotification = this._getContainer(containerType);
 
         //== Create Container
         if (!containerNotification) {
             const newContainer = document.createElement("div");
-            pgs(newContainer).add(containerToken);
+            pgs(newContainer).add("notification");
+            if (containerType === "toast") pgs(newContainer).option.add("toast");
             newContainer.setAttribute("aria-live", "polite");
             newContainer.setAttribute("aria-relevant", "additions");
             document.body.appendChild(newContainer);
@@ -1261,8 +1391,8 @@ const fn_notification = {
         });
     },
 
-    deleteAll(containerToken) {
-        let containerNotification = pgs(document).querySelector(containerToken);
+    deleteAll(containerType) {
+        let containerNotification = this._getContainer(containerType);
         if (containerNotification) containerNotification.innerHTML = "";
     },
 
@@ -1296,7 +1426,7 @@ const fn_notification = {
     }
 };
 
-//# EXPORT 
+//# TRIGGER
 function PGS_notificationTrigger_init(root = document) {
     return fn_notification.trigger(root);
 }
@@ -1325,6 +1455,412 @@ if (document.readyState === "loading") document.addEventListener("DOMContentLoad
 else PGS_notificationTrigger_init();
 
 
+/***/ },
+
+/***/ "./assets/javascript/components/_search.js"
+/*!*************************************************!*\
+  !*** ./assets/javascript/components/_search.js ***!
+  \*************************************************/
+(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   PGS_search: () => (/* binding */ PGS_search)
+/* harmony export */ });
+const API = new WeakMap();
+const OPEN_SEARCHES = new Set();
+let searchId = 0;
+
+const DEFAULT_OPTIONS = {
+    minLength: 2,
+    debounce: 200,
+    limit: 6,
+    submitOnSelect: false,
+    searchOnFocus: true,
+    source: null,
+    onSelect: null,
+};
+
+function nextSearchId() {
+    searchId += 1;
+    return searchId;
+}
+
+function getSearches(root) {
+    const searches = root instanceof Element && pgs(root).contains("search") ? [root] : [];
+    searches.push(...pgs(root).querySelectorAll("search"));
+    return searches;
+}
+
+function directPgsChild(element, token) {
+    return Array.from(element.children).find(child => pgs(child).contains(token));
+}
+
+function normalizeItem(item) {
+    if (typeof item === "string" || typeof item === "number") {
+        const value = String(item).trim();
+        return value ? { label: value, value, disabled: false, data: item } : null;
+    }
+
+    if (!item || typeof item !== "object") return null;
+
+    const label = String(item.label ?? item.value ?? "").trim();
+    if (!label) return null;
+
+    return {
+        label,
+        value: String(item.value ?? label),
+        disabled: Boolean(item.disabled),
+        data: Object.prototype.hasOwnProperty.call(item, "data") ? item.data : item,
+    };
+}
+
+function normalizeOptions(current, options = {}) {
+    const next = { ...current, ...options };
+    next.minLength = Math.max(0, Number.parseInt(next.minLength, 10) || 0);
+    next.debounce = Math.max(0, Number.parseInt(next.debounce, 10) || 0);
+    next.limit = Math.max(1, Number.parseInt(next.limit, 10) || DEFAULT_OPTIONS.limit);
+    next.submitOnSelect = Boolean(next.submitOnSelect);
+    next.searchOnFocus = Boolean(next.searchOnFocus);
+    next.source = typeof next.source === "function" || Array.isArray(next.source) ? next.source : null;
+    next.onSelect = typeof next.onSelect === "function" ? next.onSelect : null;
+    return next;
+}
+
+function closeSearch(search) {
+    const data = API.get(search);
+    if (!data) return;
+
+    pgs(search).state.remove("open");
+    data.input.setAttribute("aria-expanded", "false");
+    data.input.removeAttribute("aria-activedescendant");
+    data.list.setAttribute("aria-hidden", "true");
+    data.setActiveIndex(-1);
+    OPEN_SEARCHES.delete(search);
+}
+
+function openSearch(search) {
+    const data = API.get(search);
+    if (!data || data.items().length === 0) return;
+
+    pgs(search).state.add("open");
+    data.input.setAttribute("aria-expanded", "true");
+    data.list.setAttribute("aria-hidden", "false");
+    OPEN_SEARCHES.add(search);
+}
+
+function PGS_search_init(root = document) {
+    getSearches(root).forEach(search => {
+        if (API.has(search)) return;
+
+        const input = search.querySelector('input[type="search"]');
+        const list = directPgsChild(search, "search-suggestions");
+        if (!input || !list) return;
+
+        const id = nextSearchId();
+        if (!input.id) input.id = `search-input-${id}`;
+        if (!list.id) list.id = `search-suggestions-${id}`;
+
+        input.setAttribute("role", "combobox");
+        input.setAttribute("aria-autocomplete", "list");
+        input.setAttribute("aria-haspopup", "listbox");
+        input.setAttribute("aria-controls", list.id);
+        input.setAttribute("aria-expanded", "false");
+        input.setAttribute("autocomplete", "off");
+        list.setAttribute("role", "listbox");
+        list.setAttribute("aria-labelledby", input.id);
+        list.setAttribute("aria-hidden", "true");
+
+
+        let options = { ...DEFAULT_OPTIONS };
+        let items = [];
+        let activeIndex = -1;
+        let timer = null;
+        let controller = null;
+        let requestNumber = 0;
+
+        function setLoading(loading) {
+            pgs(search).state.toggle("loading", loading);
+            input.setAttribute("aria-busy", String(loading));
+        }
+
+        function setActiveIndex(index) {
+            activeIndex = index;
+            const elements = Array.from(list.querySelectorAll('[pgs~="search-suggestions-item"]'));
+
+            elements.forEach((element, itemIndex) => {
+                const selected = itemIndex === activeIndex;
+                element.setAttribute("aria-selected", String(selected));
+                pgs(element).state.toggle("selected", selected);
+            });
+
+            const active = elements[activeIndex];
+            if (active) {
+                input.setAttribute("aria-activedescendant", active.id);
+                active.scrollIntoView({ block: "nearest" });
+            } else {
+                input.removeAttribute("aria-activedescendant");
+            }
+        }
+
+        function moveActive(step) {
+            if (!items.length) return;
+
+            let next = activeIndex;
+            for (let checked = 0; checked < items.length; checked += 1) {
+                next = (next + step + items.length) % items.length;
+                if (!items[next].disabled) {
+                    setActiveIndex(next);
+                    return;
+                }
+            }
+        }
+
+        function clear() {
+            items = [];
+            activeIndex = -1;
+            list.replaceChildren();
+            closeSearch(search);
+        }
+
+        function cancel() {
+            if (timer !== null) window.clearTimeout(timer);
+            timer = null;
+            if (controller) controller.abort();
+            controller = null;
+            requestNumber += 1;
+            setLoading(false);
+        }
+
+        function render(nextItems) {
+            items = Array.from(nextItems || [])
+                .map(normalizeItem)
+                .filter(Boolean)
+                .slice(0, options.limit);
+
+            const fragment = document.createDocumentFragment();
+            items.forEach((item, index) => {
+                const option = document.createElement("li");
+                pgs(option).add("search-suggestions-item");
+                pgs(option).add("flexRow");
+                option.id = `${list.id}-option-${index}`;
+                option.dataset.index = String(index);
+                option.setAttribute("role", "option");
+                option.setAttribute("aria-selected", "false");
+                option.setAttribute("aria-disabled", String(item.disabled));
+                option.innerHTML = '<i class="fa-solid fa-magnifying-glass"></i>' +  item.label;
+                fragment.append(option);
+
+            });
+
+            activeIndex = -1;
+            list.replaceChildren(fragment);
+            pgs(search).state.remove("error");
+
+            if (items.length) openSearch(search);
+            else closeSearch(search);
+
+            return items;
+        }
+
+        async function resolveSource(query, signal) {
+            if (Array.isArray(options.source)) {
+                const normalizedQuery = query.toLocaleLowerCase();
+                return options.source.filter(item => {
+                    const normalized = normalizeItem(item);
+                    return normalized && normalized.label.toLocaleLowerCase().includes(normalizedQuery);
+                });
+            }
+
+            if (typeof options.source !== "function") return [];
+            return await options.source({
+                query,
+                signal,
+                limit: options.limit,
+                element: search,
+                input,
+            });
+        }
+
+        async function runSearch(query = input.value) {
+            cancel();
+            clear();
+
+            const normalizedQuery = String(query ?? "").trim();
+            if (normalizedQuery.length < options.minLength || !options.source) return [];
+
+            const currentRequest = requestNumber;
+            controller = new AbortController();
+            const currentController = controller;
+            setLoading(true);
+
+            try {
+                const result = await resolveSource(normalizedQuery, currentController.signal);
+                if (currentRequest !== requestNumber || currentController.signal.aborted) return [];
+                return render(result);
+            } catch (error) {
+                if (error?.name === "AbortError") return [];
+                if (currentRequest !== requestNumber) return [];
+
+                clear();
+                pgs(search).state.add("error");
+                search.dispatchEvent(new CustomEvent("pgs:search:error", {
+                    bubbles: true,
+                    detail: { error, query: normalizedQuery },
+                }));
+                return [];
+            } finally {
+                if (controller === currentController) controller = null;
+                if (currentRequest === requestNumber) setLoading(false);
+            }
+        }
+
+        function schedule() {
+            cancel();
+            clear();
+            pgs(search).state.remove("error");
+
+            if (input.value.trim().length < options.minLength || !options.source) return;
+            timer = window.setTimeout(() => {
+                timer = null;
+                runSearch(input.value);
+            }, options.debounce);
+        }
+
+        function select(index = activeIndex, submit = options.submitOnSelect) {
+            const item = items[index];
+            if (!item || item.disabled) return null;
+
+            input.value = item.value;
+            cancel();
+            clear();
+
+            const detail = { item, index, value: item.value, input, element: search };
+            search.dispatchEvent(new CustomEvent("pgs:search:select", { bubbles: true, detail }));
+            options.onSelect?.(detail);
+
+            input.focus();
+            if (submit && typeof search.requestSubmit === "function") search.requestSubmit();
+            return item;
+        }
+
+        function configure(nextOptions = {}) {
+            options = normalizeOptions(options, nextOptions);
+            return api;
+        }
+
+        function onInput() {
+            schedule();
+        }
+
+        function onFocus() {
+            if (items.length) openSearch(search);
+            else if (options.searchOnFocus) schedule();
+        }
+
+        function onKeydown(event) {
+            if (event.key === "ArrowDown") {
+                if (!pgs(search).state.contains("open")) schedule();
+                if (items.length) {
+                    event.preventDefault();
+                    moveActive(1);
+                }
+                return;
+            }
+
+            if (event.key === "ArrowUp" && items.length) {
+                event.preventDefault();
+                moveActive(-1);
+                return;
+            }
+
+            if (event.key === "Enter" && activeIndex >= 0) {
+                event.preventDefault();
+                select(activeIndex);
+                return;
+            }
+
+            if (event.key === "Escape") {
+                event.preventDefault();
+                cancel();
+                closeSearch(search);
+                return;
+            }
+
+            if (event.key === "Tab") closeSearch(search);
+        }
+
+        function onListPointerDown(event) {
+            const option = event.target.closest('[pgs~="search-suggestions-item"]');
+            if (!option || !list.contains(option)) return;
+            event.preventDefault();
+            select(Number.parseInt(option.dataset.index, 10));
+        }
+
+        function onSubmit() {
+            cancel();
+            closeSearch(search);
+        }
+
+        function destroy() {
+            cancel();
+            clear();
+            input.removeEventListener("input", onInput);
+            input.removeEventListener("focus", onFocus);
+            input.removeEventListener("keydown", onKeydown);
+            list.removeEventListener("pointerdown", onListPointerDown);
+            search.removeEventListener("submit", onSubmit);
+            API.delete(search);
+        }
+
+        const api = {
+            element: search,
+            input,
+            list,
+            configure,
+            setSource: source => configure({ source }),
+            search: runSearch,
+            open: () => openSearch(search),
+            close: () => closeSearch(search),
+            clear,
+            cancel,
+            select,
+            refresh: () => runSearch(input.value),
+            destroy,
+            items: () => [...items],
+            isOpen: () => pgs(search).state.contains("open"),
+            isLoading: () => pgs(search).state.contains("loading"),
+            setActiveIndex,
+        };
+
+        input.addEventListener("input", onInput);
+        input.addEventListener("focus", onFocus);
+        input.addEventListener("keydown", onKeydown);
+        list.addEventListener("pointerdown", onListPointerDown);
+        search.addEventListener("submit", onSubmit);
+        API.set(search, api);
+    });
+}
+
+document.addEventListener("pointerdown", event => {
+    OPEN_SEARCHES.forEach(search => {
+        if (!search.contains(event.target)) closeSearch(search);
+    });
+});
+
+PGS_search_init();
+
+function PGS_search_api(selector) {
+    return API.get(selector);
+}
+
+const PGS_search = {
+    init: PGS_search_init,
+    api: PGS_search_api,
+};
+
+
 /***/ },
 
 /***/ "./assets/javascript/components/_slides.js"
@@ -1336,18 +1872,22 @@ else PGS_notificationTrigger_init();
 "use strict";
 __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   PGS_slides: () => (/* binding */ PGS_slides),
-/* harmony export */   PGS_slides_api: () => (/* binding */ PGS_slides_api),
-/* harmony export */   PGS_slides_init: () => (/* binding */ PGS_slides_init)
+/* harmony export */   PGS_slides: () => (/* binding */ PGS_slides)
 /* harmony export */ });
-/* harmony import */ var _functions_scrollY__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../functions/_scrollY */ "./assets/javascript/functions/_scrollY.js");
+/* harmony import */ var _functions_scrollY_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../functions/_scrollY.js */ "./assets/javascript/functions/_scrollY.js");
 
 const API = new WeakMap();
 
+function getSlides(root) {
+    const slides = root instanceof Element && pgs(root).contains("slides") ? [root] : [];
+    slides.push(...pgs(root).querySelectorAll("slides"));
+    return slides;
+}
+
 class PGS_Slides {
     //- CONSTRUCTOR
-    constructor({ selector, viewRatio = 0.97, optionIntersectionObserver = {}, scrollOptions = {} } = {}) {
-        this.selector = selector;
+    constructor({ element, viewRatio = 0.97, optionIntersectionObserver = {}, scrollOptions = {} } = {}) {
+        this.element = element;
         this.viewRatio = viewRatio;
 
         this.optionIntersectionObserver = {
@@ -1364,28 +1904,36 @@ class PGS_Slides {
             ...scrollOptions,
         };
 
-        this.container = this.selector ? pgs(this.selector).querySelector("slides-container") : null;
+        this.container = this.element ? pgs(this.element).querySelector("slides-container") : null;
     }
     
     //+ CREATE BUTTON 
     #createButtonsAndDots() {
-        const EL = this.selector
+        const EL = this.element;
 
         //== PULSANTI
-        if (!pgs(EL).querySelector('slides-prec') && !pgs(EL).querySelector('slides-next')) {
+        if (!pgs(EL).querySelector('slides-prec')) {
             EL.insertAdjacentHTML("afterbegin", `<button pgs="slides-prec buttonIcon" type="button" class="precButton" aria-label="slide precedente"> <span> <i class="fa-solid fa-arrow-left"></i></span></button>`);
+        }
+        if (!pgs(EL).querySelector('slides-next')) {
             EL.insertAdjacentHTML("beforeend", `<button pgs="slides-next buttonIcon" type="button" class="nextButton" aria-label="prossima slide"> <span> <i class="fa-solid fa-arrow-right"></i></span></button>`);
         }
 
         //== DOTS
         if (!pgs(EL).querySelector('slides-dots')) {
             EL.insertAdjacentHTML("beforeend", `<div pgs="slides-dots" class="slides-dots"></div>`);
+        }
 
-            Array.from(this.container.children).forEach(() => {
-                pgs(EL).querySelector('slides-dots')
-                    .insertAdjacentHTML("beforeend", `<button type="button" class="slide-dot" aria-label="vai alla prossima slide"></button>`);
-            });
+        const dotsContainer = pgs(EL).querySelector('slides-dots');
+        while (dotsContainer.children.length < this.container.children.length) {
+            dotsContainer.insertAdjacentHTML("beforeend", `<button type="button" class="slide-dot"></button>`);
+        }
+        while (dotsContainer.children.length > this.container.children.length) {
+            dotsContainer.lastElementChild.remove();
         }
+        Array.from(dotsContainer.children).forEach((dot, index) => {
+            dot.setAttribute("aria-label", `vai alla slide ${index + 1}`);
+        });
     }
 
     //+ PREV 
@@ -1394,7 +1942,7 @@ class PGS_Slides {
         let current;
         
 
-        if (pgs(this.selector).option.contains('singleScroll')) current = currents[currents.length - 1];
+        if (pgs(this.element).option.contains('singleScroll')) current = currents[currents.length - 1];
         else current = currents[0];
 
         const prev = current?.previousElementSibling;
@@ -1410,19 +1958,17 @@ class PGS_Slides {
 
         
         
-        if (pgs(this.selector).option.contains('singleScroll')) current = currents[0];
+        if (pgs(this.element).option.contains('singleScroll')) current = currents[0];
         else current = currents[currents.length - 1];
         
         const next = current?.nextElementSibling;
-        console.log(current, next);
-
         next?.scrollIntoView(this.scrollOptions);
         next?.focus({ preventScroll: true });
     }
 
     //+ GO TO NUMBER SLIDE 
     #goToNumberSlide(index) {
-        this.container.children[index].scrollIntoView(this.scrollOptions)
+        this.container.children[index]?.scrollIntoView(this.scrollOptions);
     }
 
     //+ CALLBACK
@@ -1461,8 +2007,10 @@ class PGS_Slides {
 
     //= EXECUTE
     execute() {
-        const slides = this.selector;
-        if (!this.container) return
+        const slides = this.element;
+        if (!this.container) return;
+        const eventController = new AbortController();
+        const { signal } = eventController;
 
         //== elements
         this.#createButtonsAndDots();
@@ -1474,12 +2022,14 @@ class PGS_Slides {
         const notScrollWithMouse = pgs(slides).option.contains('notScrollWithMouse');
 
         //== scroll
-        if (!notScrollWithMouse) (0,_functions_scrollY__WEBPACK_IMPORTED_MODULE_0__.PGS_scrollHorizontal)(this.container, 5);
+        const removeHorizontalScroll = notScrollWithMouse
+            ? null
+            : (0,_functions_scrollY_js__WEBPACK_IMPORTED_MODULE_0__.PGS_scrollHorizontal)(this.container, 5);
 
         //==Listener: DOT, PREC, NEXT
-        dots.forEach((dot, index) => dot.addEventListener("click", e => this.#goToNumberSlide(index)));
-        precButton.addEventListener("click", e => this.#previousSlide(), { passive: true });
-        nextButton.addEventListener("click", e => this.#nextSlide(), { passive: true });
+        dots.forEach((dot, index) => dot.addEventListener("click", () => this.#goToNumberSlide(index), { signal }));
+        precButton.addEventListener("click", () => this.#previousSlide(), { passive: true, signal });
+        nextButton.addEventListener("click", () => this.#nextSlide(), { passive: true, signal });
 
         //== observer
         const observer = new IntersectionObserver(
@@ -1489,9 +2039,18 @@ class PGS_Slides {
         Array.from(this.container.children).forEach(allLi => observer.observe(allLi));
 
 
+        let api;
+        const destroy = () => {
+            if (API.get(this.element) !== api) return;
+            eventController.abort();
+            observer.disconnect();
+            removeHorizontalScroll?.();
+            API.delete(this.element);
+        };
+
         //- API
-        API.set(this.selector, {
-            element: this.selector,
+        api = {
+            element: this.element,
             container: this.container,
             previous: () => this.#previousSlide(),
             next: () => this.#nextSlide(),
@@ -1506,19 +2065,28 @@ class PGS_Slides {
                 return last?.classList.contains("view") || false;
             },
             refresh: () => {
-                PGS_slides_init(this.selector.parentNode || document);
-                return API.get(this.selector);
+                if (API.get(this.element) !== api) return API.get(this.element);
+                destroy();
+                const instance = new PGS_Slides({
+                    element: this.element,
+                    viewRatio: this.viewRatio,
+                    optionIntersectionObserver: this.optionIntersectionObserver,
+                    scrollOptions: this.scrollOptions,
+                });
+                instance.execute();
+                return API.get(this.element);
             },
-        });
+        };
+        API.set(this.element, api);
     }
 }
 
 //# INIT 
 function PGS_slides_init(root = document) {
-    pgs(root).querySelectorAll("slides").forEach(el => {
-        if (API.has(el)) return;
+    getSlides(root).forEach(element => {
+        if (API.has(element)) return;
 
-        const instance = new PGS_Slides({ selector: el });
+        const instance = new PGS_Slides({ element });
         instance.execute();
     });
 }
@@ -1526,8 +2094,8 @@ function PGS_slides_init(root = document) {
 PGS_slides_init();
 
 //# API 
-function PGS_slides_api(selector) {
-    return API.get(selector);
+function PGS_slides_api(element) {
+    return API.get(element);
 }
 
 const PGS_slides = {
@@ -1547,9 +2115,7 @@ const PGS_slides = {
 "use strict";
 __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   PGS_stepTabs: () => (/* binding */ PGS_stepTabs),
-/* harmony export */   PGS_stepTabs_api: () => (/* binding */ PGS_stepTabs_api),
-/* harmony export */   PGS_stepTabs_init: () => (/* binding */ PGS_stepTabs_init)
+/* harmony export */   PGS_stepTabs: () => (/* binding */ PGS_stepTabs)
 /* harmony export */ });
 const API = new WeakMap();
 
@@ -1585,7 +2151,7 @@ function PGS_stepTabs_init(root = document) {
                 const dot = document.createElement("button");
                 dot.type = "button";
                 pgs(dot).add("stepTabs-dots-dot");
-                dot.setAttribute("data-step", index);
+                pgs(dot).option.setValueBrackets("step", index);
                 dot.innerHTML = `<i class="fa-solid ${iconClass}"></i>`;
 
                 dot.addEventListener("click", () => {
@@ -1650,7 +2216,7 @@ function PGS_stepTabs_init(root = document) {
         //= INIT
         goTo(0, false);
 
-        //= data-tab-locked
+        //= tab-locked
         const observer = new MutationObserver(() => {
             if (isRendering) return;
             updateControls();
@@ -1733,9 +2299,7 @@ const PGS_stepTabs = {
 "use strict";
 __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   PGS_steps: () => (/* binding */ PGS_steps),
-/* harmony export */   PGS_steps_api: () => (/* binding */ PGS_steps_api),
-/* harmony export */   PGS_steps_init: () => (/* binding */ PGS_steps_init)
+/* harmony export */   PGS_steps: () => (/* binding */ PGS_steps)
 /* harmony export */ });
 const API = new WeakMap();
 
@@ -1803,9 +2367,7 @@ const PGS_steps = {
 "use strict";
 __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   PGS_summary: () => (/* binding */ PGS_summary),
-/* harmony export */   PGS_summary_api: () => (/* binding */ PGS_summary_api),
-/* harmony export */   PGS_summary_init: () => (/* binding */ PGS_summary_init)
+/* harmony export */   PGS_summary: () => (/* binding */ PGS_summary)
 /* harmony export */ });
 //= SUMMARY
 const API = new WeakMap();
@@ -1927,44 +2489,48 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
 /* harmony export */   PGS_formValidate: () => (/* binding */ PGS_formValidate)
 /* harmony export */ });
-/* harmony import */ var _components_notifications_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../components/_notifications.js */ "./assets/javascript/components/_notifications.js");
+/* harmony import */ var _pgs_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../_pgs.js */ "./assets/javascript/_pgs.js");
+/* harmony import */ var _components_notifications_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../components/_notifications.js */ "./assets/javascript/components/_notifications.js");
+
 
 
 
 class PGS_formValidate {
-    constructor({ form } = {}) {
-        this.container = form;
-        this._rules = [];
-        // pgs(this.container).add("formError"); 
-    }
+    #message = {};
+    #insideValidatedCallback = false;
 
-    //+ ADD
-    addError(field, i) {
-        field.setAttribute("data-form-field-status", "error");
-        if (i == 0) field.scrollIntoView();
+    constructor(form, options = {}) {
+        if (!options || typeof options !== "object" || Array.isArray(options)) {
+            throw new TypeError("options must be an object");
+        }
 
-        let message = field.getAttribute("data-form-field-message");
+        this.container = form;
+        this._rules = [];
+        this.message = {
+            fieldError: "Please complete this field.",
+            fieldsError: "Please complete all required fields.",
+            success: "Submitted successfully."
+        };
 
-        if (i == 0 && message) _components_notifications_js__WEBPACK_IMPORTED_MODULE_0__.PGS_notification.toast.error(message);
-        else if (i == 0) _components_notifications_js__WEBPACK_IMPORTED_MODULE_0__.PGS_notification.toast.error("Compila tutti i campi!");
+        if (options.message !== undefined) this.message = options.message;
+        this.container?.setAttribute("novalidate", "");
     }
 
-    //+ REMOVE
-    removeError(field) {
-        field.setAttribute("data-form-field-status", "");
+    get message() {
+        return { ...this.#message };
     }
 
-    #removeErrorOnClick(allFields) {
-        allFields.forEach(element => {
-            element.addEventListener("click", e => this.removeError(element))
-        });
+    set message(value) {
+        if (!value || typeof value !== "object" || Array.isArray(value)) {
+            throw new TypeError("message must be an object");
+        }
+
+        this.#message = { ...this.#message, ...value };
     }
 
-    // + --------------------------
-    // + Helpers                   
-    // + --------------------------
-    help = {
-        // supporta sia required nativo, sia data-required="true"
+    // - Helpers
+    #help = {
+        // supporta sia required nativo
         isRequired(field) {
             if (!field) return false;
 
@@ -2007,26 +2573,26 @@ class PGS_formValidate {
             if (input.type === "hidden") return false;
             if (input.type === "checkbox" || input.type === "radio" || input.type === "file") return false;
 
-            // valida solo se required (o data-required="true")
-            if (!this.help.isRequired(input)) return false;
+            // valida solo se required
+            if (!this.#help.isRequired(input)) return false;
 
-            return this.help.isEmptyTextLike(input);
+            return this.#help.isEmptyTextLike(input);
         });
 
         //== TEXTAREA 
         // required vuote
         const textareas = Array.from(container.querySelectorAll("textarea")).filter((ta) => {
             if (ta.disabled) return false;
-            if (!this.help.isRequired(ta)) return false;
-            return this.help.isEmptyTextLike(ta);
+            if (!this.#help.isRequired(ta)) return false;
+            return this.#help.isEmptyTextLike(ta);
         });
 
         //== SELECT 
         // required vuoti
         const selects = Array.from(container.querySelectorAll("select")).filter((sel) => {
             if (sel.disabled) return false;
-            if (!this.help.isRequired(sel)) return false;
-            return this.help.isEmptySelect(sel);
+            if (!this.#help.isRequired(sel)) return false;
+            return this.#help.isEmptySelect(sel);
         });
 
         //== RADIO 
@@ -2034,8 +2600,8 @@ class PGS_formValidate {
         const radios = Array.from(container.querySelectorAll('input[type="radio"]')).filter((r) => !r.disabled);
         const requiredRadioGroups = new Map(); // name -> [elements]
         for (const r of radios) {
-            if (!this.help.isRequired(r)) continue;
-            const name = this.help.getGroupName(r);
+            if (!this.#help.isRequired(r)) continue;
+            const name = this.#help.getGroupName(r);
             if (!name) continue;
             if (!requiredRadioGroups.has(name)) requiredRadioGroups.set(name, []);
             requiredRadioGroups.get(name).push(r);
@@ -2056,9 +2622,9 @@ class PGS_formValidate {
         const requiredCheckboxSingles = [];
         const requiredCheckboxGroups = new Map(); // name -> [elements]
         for (const c of checkboxes) {
-            if (!this.help.isRequired(c)) continue;
+            if (!this.#help.isRequired(c)) continue;
 
-            const name = this.help.getGroupName(c);
+            const name = this.#help.getGroupName(c);
             if (!name) {
                 // checkbox senza name: trattala come singola required
                 if (!c.checked) requiredCheckboxSingles.push(c);
@@ -2081,7 +2647,7 @@ class PGS_formValidate {
         // required: se vuoi includerlo
         const fileInputs = Array.from(container.querySelectorAll('input[type="file"]')).filter((f) => {
             if (f.disabled) return false;
-            if (!this.help.isRequired(f)) return false;
+            if (!this.#help.isRequired(f)) return false;
             return !(f.files && f.files.length > 0);
         });
 
@@ -2097,12 +2663,37 @@ class PGS_formValidate {
             ruleInvalidFields
         ];
 
-        return invalidFields.flat();
+        return [...new Set(invalidFields.flat())];
+    }
+
+    //+ ADD
+    addFieldError(field, i = 0, total = 1) {
+        (0,_pgs_js__WEBPACK_IMPORTED_MODULE_0__.pgs)(field).option.add("error");
+        if (i === 0) field.scrollIntoView();
+
+        if (i !== 0) return;
+
+        if (total > 1) {
+            _components_notifications_js__WEBPACK_IMPORTED_MODULE_1__.PGS_notification.toast.error(this.message.fieldsError);
+            return;
+        }
+
+        const message = (0,_pgs_js__WEBPACK_IMPORTED_MODULE_0__.pgs)(field).option.getValueBrackets("message");
+        _components_notifications_js__WEBPACK_IMPORTED_MODULE_1__.PGS_notification.toast.error(message || this.message.fieldError);
+    }
+
+    //+ REMOVE
+    removeFieldError(field) {
+        (0,_pgs_js__WEBPACK_IMPORTED_MODULE_0__.pgs)(field).option.remove("error");
+    }
+
+    // + SUCCESS
+    success(text = this.message.success) {
+        if (this.#insideValidatedCallback || this.validate() === true) _components_notifications_js__WEBPACK_IMPORTED_MODULE_1__.PGS_notification.toast.success(text)
     }
 
-    // + -------------------------
-    // + VALIDATE                 
-    // + -------------------------
+
+    // + VALIDATE
     validate() {
         const invalid = this.#inputValue(this.container);
         const allFields = this.container.querySelectorAll("input, textarea, select")
@@ -2113,34 +2704,50 @@ class PGS_formValidate {
 
         //== per radio/checkbox in gruppo: 
         // rimuovi l'errore solo sull'elemento che lo ospita (qui: se presente)
-        for (const el of allFields) { if (!invalid.includes(el)) this.removeError(el); }
+        for (const el of allFields) { if (!invalid.includes(el)) this.removeFieldError(el); }
 
         //== aggiungo errori dove serve
-        invalid.forEach((el, i) => this.addError(el, i))
+        invalid.forEach((el, i) => this.addFieldError(el, i, invalid.length))
 
         //== rimuove l'errore al click
-        this.#removeErrorOnClick(allFields)
+        allFields.forEach(element => element.addEventListener("click", e => this.removeFieldError(element)));
 
         //== status form
         if (invalid.length) {
-            this.container.setAttribute("data-form-status", "error");
+            (0,_pgs_js__WEBPACK_IMPORTED_MODULE_0__.pgs)(this.container).option.remove("success").add("error");
             return false;
         } else {
-            this.container.setAttribute("data-form-status", "success");
+            (0,_pgs_js__WEBPACK_IMPORTED_MODULE_0__.pgs)(this.container).option.remove("error").add("success");
             return true;
         }
     }
 
-    ifSuccess(text = "Inviato con successo") {
-        if (this.validate() == true) _components_notifications_js__WEBPACK_IMPORTED_MODULE_0__.PGS_notification.toast.success(text)
+    // + EVENT VALIDATOR
+    validator(callback, eventName = "submit") {
+        if (typeof callback !== "function") throw new TypeError("callback must be a function");
+        if (typeof eventName !== "string" || !eventName.trim()) throw new TypeError("eventName must be a non-empty string");
+
+        this.container.addEventListener(eventName, event => {
+            event.preventDefault();
+            if (!this.validate()) return;
+
+            this.#insideValidatedCallback = true;
+
+            try {
+                this.success();
+                callback(event);
+            } finally {
+                this.#insideValidatedCallback = false;
+            }
+        });
+
+        return this;
     }
 
-    // + -------------------------
-    // + ADD RULE                 
-    // + -------------------------
-    addNewRule(container) {
-        if (typeof container !== "function") throw new Error("Rule must be a function");
-        this._rules.push(container);
+    // + ADD RULE
+    addNewRule(rule) {
+        if (typeof rule !== "function") throw new Error("Rule must be a function");
+        this._rules.push(rule);
         return this;
     }
 }
@@ -2159,7 +2766,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
 /* harmony export */   PGS_scrollHorizontal: () => (/* binding */ PGS_scrollHorizontal)
 /* harmony export */ });
-function PGS_scrollHorizontal(querySelector, dataSpeed) {
+function PGS_scrollHorizontal(element, speed) {
     // Se hai più contenitori, selezionali tutti:
     // Semplice "singleton" per stimare se la sorgente è trackpad
     const TrackpadDetector = (() => {
@@ -2201,10 +2808,7 @@ function PGS_scrollHorizontal(querySelector, dataSpeed) {
 
     //= Scorrimento orizzontale con rotella (evita il trackpad)
     
-    let el = querySelector
-    el.addEventListener('wheel', (e) => {
-        const speed = dataSpeed;
-
+    const onWheel = (e) => {
         //== lascia lo scroll naturale del trackpad
         if (TrackpadDetector.update(e)) return;
 
@@ -2215,11 +2819,11 @@ function PGS_scrollHorizontal(querySelector, dataSpeed) {
         //== Converti delta in px per lo shift orizzontale
         let delta = e.deltaY;
         if (e.deltaMode === 1) delta *= 16;
-        else if (e.deltaMode === 2) delta *= el.clientHeight;
+        else if (e.deltaMode === 2) delta *= element.clientHeight;
 
         //== Verifica se il contenitore può ancora scrollare orizzontalmente
-        const atStart = el.scrollLeft <= 0;
-        const atEnd = el.scrollLeft + el.clientWidth >= el.scrollWidth - 1;
+        const atStart = element.scrollLeft <= 0;
+        const atEnd = element.scrollLeft + element.clientWidth >= element.scrollWidth - 1;
         const scrollingRight = delta > 0;
         const scrollingLeft = delta < 0;
         const canScrollHoriz =
@@ -2233,8 +2837,11 @@ function PGS_scrollHorizontal(querySelector, dataSpeed) {
         e.preventDefault();
 
         //== rotella giù => destra
-        el.scrollLeft += delta * speed;
-    }, { passive: false });
+        element.scrollLeft += delta * speed;
+    };
+
+    element.addEventListener('wheel', onWheel, { passive: false });
+    return () => element.removeEventListener('wheel', onWheel);
 }
 
 
@@ -2256,7 +2863,10 @@ function PGS_header(selectHeader = document) {
 
     const headerElements = pgs(header).querySelectorAll("header-element");
 
+    if (!headerElements.length) console.log('For the header to work correctly, insert "header-element" under "header"');
     if (!headerElements.length) return;
+    
+    
 
     headerElements.forEach(selectHeader => {
 
@@ -2341,9 +2951,32 @@ function headerHeight() {
     document.documentElement.style.setProperty("--heightOfHeader", `${height}px`);
     document.documentElement.style.setProperty("--heightOfHeaderScroll", `${scrollHeight}px`);
 }
-headerHeight()
-window.addEventListener("resize", headerHeight);
-window.addEventListener("scroll", headerHeight);
+
+// Il modulo può essere caricato nel footer: rimanda il primo calcolo al frame
+// successivo, quando il browser ha già composto l'header, senza aspettare il
+// caricamento completo della pagina.
+let headerHeightRafId = 0;
+function scheduleHeaderHeight() {
+    if (headerHeightRafId) return;
+
+    headerHeightRafId = requestAnimationFrame(() => {
+        headerHeightRafId = 0;
+        headerHeight();
+    });
+}
+
+if (header) {
+    const headerHeightObserver = new ResizeObserver(scheduleHeaderHeight);
+    headerHeightObserver.observe(header);
+
+    // Un font web può modificare la larghezza del menu e quindi l'altezza
+    // dell'header, anche dopo il primo frame.
+    document.fonts?.ready?.then(scheduleHeaderHeight);
+}
+
+scheduleHeaderHeight();
+window.addEventListener("resize", scheduleHeaderHeight);
+window.addEventListener("scroll", scheduleHeaderHeight, { passive: true });
 
 
 
@@ -2375,10 +3008,6 @@ window.addEventListener("scroll", () => {
 
 
 
-
-
-
-
 /***/ },
 
 /***/ "./assets/javascript/patterns/_cookieConsent.js"
@@ -2709,22 +3338,24 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _pgs_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./_pgs.js */ "./assets/javascript/_pgs.js");
 /* harmony import */ var _base_darkmode_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./base/_darkmode.js */ "./assets/javascript/base/_darkmode.js");
 /* harmony import */ var _base_darkmode_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_base_darkmode_js__WEBPACK_IMPORTED_MODULE_1__);
-/* harmony import */ var _base_object_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./base/_object.js */ "./assets/javascript/base/_object.js");
-/* harmony import */ var _base_object_js__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_base_object_js__WEBPACK_IMPORTED_MODULE_2__);
-/* harmony import */ var _components_accordion_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./components/_accordion.js */ "./assets/javascript/components/_accordion.js");
-/* harmony import */ var _components_dropdown_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./components/_dropdown.js */ "./assets/javascript/components/_dropdown.js");
-/* harmony import */ var _components_menu_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./components/_menu.js */ "./assets/javascript/components/_menu.js");
-/* harmony import */ var _components_modals_js__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./components/_modals.js */ "./assets/javascript/components/_modals.js");
-/* harmony import */ var _components_slides_js__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./components/_slides.js */ "./assets/javascript/components/_slides.js");
-/* harmony import */ var _components_steps_js__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./components/_steps.js */ "./assets/javascript/components/_steps.js");
-/* harmony import */ var _components_stepTabs_js__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./components/_stepTabs.js */ "./assets/javascript/components/_stepTabs.js");
-/* harmony import */ var _components_summary_js__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ./components/_summary.js */ "./assets/javascript/components/_summary.js");
-/* harmony import */ var _components_notifications_js__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ./components/_notifications.js */ "./assets/javascript/components/_notifications.js");
-/* harmony import */ var _imports_js__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ./_imports.js */ "./assets/javascript/_imports.js");
-/* harmony import */ var _layout_header_js__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ./layout/_header.js */ "./assets/javascript/layout/_header.js");
-/* harmony import */ var _layout_header_js__WEBPACK_IMPORTED_MODULE_13___default = /*#__PURE__*/__webpack_require__.n(_layout_header_js__WEBPACK_IMPORTED_MODULE_13__);
-/* harmony import */ var _patterns_cookieConsent_js__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! ./patterns/_cookieConsent.js */ "./assets/javascript/patterns/_cookieConsent.js");
-/* harmony import */ var _patterns_cookieConsent_js__WEBPACK_IMPORTED_MODULE_14___default = /*#__PURE__*/__webpack_require__.n(_patterns_cookieConsent_js__WEBPACK_IMPORTED_MODULE_14__);
+/* harmony import */ var _base_svg_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./base/_svg.js */ "./assets/javascript/base/_svg.js");
+/* harmony import */ var _base_object_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./base/_object.js */ "./assets/javascript/base/_object.js");
+/* harmony import */ var _base_object_js__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_base_object_js__WEBPACK_IMPORTED_MODULE_3__);
+/* harmony import */ var _components_accordion_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./components/_accordion.js */ "./assets/javascript/components/_accordion.js");
+/* harmony import */ var _components_dropdown_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./components/_dropdown.js */ "./assets/javascript/components/_dropdown.js");
+/* harmony import */ var _components_menu_js__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./components/_menu.js */ "./assets/javascript/components/_menu.js");
+/* harmony import */ var _components_modals_js__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./components/_modals.js */ "./assets/javascript/components/_modals.js");
+/* harmony import */ var _components_search_js__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./components/_search.js */ "./assets/javascript/components/_search.js");
+/* harmony import */ var _components_slides_js__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./components/_slides.js */ "./assets/javascript/components/_slides.js");
+/* harmony import */ var _components_steps_js__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ./components/_steps.js */ "./assets/javascript/components/_steps.js");
+/* harmony import */ var _components_stepTabs_js__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ./components/_stepTabs.js */ "./assets/javascript/components/_stepTabs.js");
+/* harmony import */ var _components_summary_js__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ./components/_summary.js */ "./assets/javascript/components/_summary.js");
+/* harmony import */ var _components_notifications_js__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ./components/_notifications.js */ "./assets/javascript/components/_notifications.js");
+/* harmony import */ var _imports_js__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! ./_imports.js */ "./assets/javascript/_imports.js");
+/* harmony import */ var _layout_header_js__WEBPACK_IMPORTED_MODULE_15__ = __webpack_require__(/*! ./layout/_header.js */ "./assets/javascript/layout/_header.js");
+/* harmony import */ var _layout_header_js__WEBPACK_IMPORTED_MODULE_15___default = /*#__PURE__*/__webpack_require__.n(_layout_header_js__WEBPACK_IMPORTED_MODULE_15__);
+/* harmony import */ var _patterns_cookieConsent_js__WEBPACK_IMPORTED_MODULE_16__ = __webpack_require__(/*! ./patterns/_cookieConsent.js */ "./assets/javascript/patterns/_cookieConsent.js");
+/* harmony import */ var _patterns_cookieConsent_js__WEBPACK_IMPORTED_MODULE_16___default = /*#__PURE__*/__webpack_require__.n(_patterns_cookieConsent_js__WEBPACK_IMPORTED_MODULE_16__);
 //= PGS
 
 
@@ -2733,6 +3364,7 @@ __webpack_require__.r(__webpack_exports__);
 
 
 
+
 //= CN 
 
 
@@ -2744,6 +3376,7 @@ __webpack_require__.r(__webpack_exports__);
 
 
 
+
 //= IMPORT REGISTRY