mypgs 1.3.2 → 1.3.3

package/assets/javascript/components/_accordion.js

@@ -1,16 +1,26 @@
 //= ACCORDION
 const API = new WeakMap();
+let accordionId = 0;
+
+function nextAccordionId() {
+    accordionId += 1;
+    return accordionId;
+}
+
+function directPgsChild(element, token) {
+    return Array.from(element.children).find(child => pgs(child).contains(token));
+}
 
 export function PGS_accordion_init(root = document) {
-    pgs(root).querySelectorAll("accordion").forEach((accordion, index) => {
+    pgs(root).querySelectorAll("accordion").forEach((accordion) => {
         if (API.has(accordion)) return;
 
-        const BUTTON = pgs(accordion).querySelector("accordion-button");
-        const CONTENT = pgs(accordion).querySelector("accordion-content");
+        const BUTTON = directPgsChild(accordion, "accordion-button");
+        const CONTENT = directPgsChild(accordion, "accordion-content");
         if (!BUTTON || !CONTENT) return;
 
         //== ID univoci per aria-controls / aria-labelledby
-        const ID = index + 1;
+        const ID = nextAccordionId();
         const btnId = `acc-btn-${ID}`;
         const panelId = `acc-panel-${ID}`;
 
@@ -20,12 +30,12 @@ export function PGS_accordion_init(root = document) {
         //== Accessibilità (setup una volta)
         BUTTON.setAttribute("role", "button");
         BUTTON.setAttribute("tabindex", "0");
-        BUTTON.setAttribute("id", btnId);
-        BUTTON.setAttribute("aria-controls", panelId);
+        if (!BUTTON.id) BUTTON.setAttribute("id", btnId);
 
-        CONTENT.setAttribute("id", panelId);
+        if (!CONTENT.id) CONTENT.setAttribute("id", panelId);
+        BUTTON.setAttribute("aria-controls", CONTENT.id);
         CONTENT.setAttribute("role", "region");
-        CONTENT.setAttribute("aria-labelledby", btnId);
+        CONTENT.setAttribute("aria-labelledby", BUTTON.id);
 
         //+ Accessibility (applica stato aperto/chiuso)
         function accordionAccessibility(isOpen, button, content) {
@@ -110,7 +120,6 @@ export function PGS_accordion_api(selector) {
 }
 
 export const PGS_accordion = {
-    PGS_name: "PGS_accordion",
     init: PGS_accordion_init,
     api: PGS_accordion_api
 };

package/assets/javascript/components/_dropdown.js

@@ -1,153 +1,209 @@
-// + dropdown (Popover API)
+// + dropdown
 const API = new WeakMap();
+const OPEN_DROPDOWNS = new Set();
+const VIEWPORT_GAP = 8;
+let dropdownId = 0;
 
-export function PGS_dropdown_init(root = document) {
-    pgs(root).querySelectorAll("dropdown").forEach((DROPDOWN, index) => {
-        if (API.has(DROPDOWN)) return;
+function nextDropdownId() {
+    dropdownId += 1;
+    return dropdownId;
+}
 
-        const BUTTON = pgs(DROPDOWN).querySelector("dropdown-button");
-        const CONTENT = pgs(DROPDOWN).querySelector("dropdown-content");
-
-        if (!BUTTON || !CONTENT) return;
-
-        // = INIT
-        if (DROPDOWN.getAttribute("data-initialize") === "true") return;
-        DROPDOWN.setAttribute("data-initialize", "true");
-
-        // == CSS dropdown-anchor
-        const ANCHOR_NAME = `--dropdown-anchor-${index}`;
-        DROPDOWN.style.setProperty("--dropdown-anchor", ANCHOR_NAME);
-
-        // == IDs + ACCESSIBILITY
-        if (!BUTTON.id) BUTTON.id = `dropdown-btn-${index}`;
-        if (!CONTENT.id) CONTENT.id = `dropdown-panel-${index}`;
-        BUTTON.setAttribute("type", "button");
-        BUTTON.setAttribute("aria-haspopup", "true");
-        BUTTON.setAttribute("aria-controls", CONTENT.id);
-        BUTTON.setAttribute("aria-expanded", "false");
-        CONTENT.setAttribute("aria-labelledby", BUTTON.id);
-
-        // == POPVER SETUP 
-        if (!CONTENT.hasAttribute("popover")) CONTENT.setAttribute("popover", "auto");
-        BUTTON.setAttribute("popovertarget", CONTENT.id);
-        BUTTON.setAttribute("popovertargetaction", "toggle");
-
-        //-( Safari / legacy fallback: popover is in the top layer, so fixed coords are viewport-based.
-        const HAS_ANCHOR_POSITIONING =
-            CSS.supports("anchor-name: --dropdown-anchor") &&
-            CSS.supports("position-anchor: --dropdown-anchor") &&
-            CSS.supports("position-area: bottom") &&
-            CSS.supports("top: anchor(bottom)");
-        const USE_FALLBACK_POSITIONING = pgs(DROPDOWN).contains("tooltip") || !HAS_ANCHOR_POSITIONING;
-
-        const updatePopoverPosition = () => {
-            if (!USE_FALLBACK_POSITIONING) return;
-
-            const buttonRect = BUTTON.getBoundingClientRect();
-            const style = getComputedStyle(DROPDOWN);
-            const offset = parseFloat(style.getPropertyValue("--dropdown-offset")) || 10;
-            const padding = parseFloat(style.getPropertyValue("--dropdown-padding")) || 0;
-            const arrowSize = parseFloat(style.getPropertyValue("--dropdown-arrow-size")) || 12;
-            const viewportGap = 8;
-            const viewportWidth = window.innerWidth;
-            const maxWidth = viewportWidth - viewportGap * 2;
-            const contentStyle = getComputedStyle(CONTENT);
-            const cssMaxWidth = parseFloat(contentStyle.maxWidth);
-            const dropdownMaxWidth = Number.isFinite(cssMaxWidth) ? Math.min(cssMaxWidth, maxWidth) : maxWidth;
-            const contentWidth = Math.min(
-                Math.max(CONTENT.scrollWidth + padding * 2, buttonRect.width),
-                dropdownMaxWidth
-            );
-            const top = buttonRect.bottom + offset;
-            const centeredLeft = buttonRect.left + buttonRect.width / 2 - contentWidth / 2;
-            const left = Math.min(
-                Math.max(centeredLeft, viewportGap),
-                viewportWidth - contentWidth - viewportGap
-            );
-            const buttonCenter = buttonRect.left + buttonRect.width / 2;
-            const arrowLeft = Math.min(
-                Math.max(buttonCenter - left, padding + arrowSize),
-                contentWidth - padding - arrowSize
-            );
-
-            DROPDOWN.style.setProperty("--dropdown-fallback-top", `${top}px`);
-            DROPDOWN.style.setProperty("--dropdown-fallback-left", `${left}px`);
-            DROPDOWN.style.setProperty("--dropdown-arrow-left", `${arrowLeft}px`);
-        };
+function isDropdownContent(element) {
+    return element instanceof Element && pgs(element).contains("dropdown-content");
+}
 
-        BUTTON.addEventListener("click", e => {
-            if (!USE_FALLBACK_POSITIONING) return;
+function getDropdownTrigger(dropdown, content) {
+    const children = Array.from(dropdown.children).filter(child => child !== content);
+    const dropdownButton = children.find(child => pgs(child).contains("dropdown-button"));
 
-            e.preventDefault();
-            if (CONTENT.matches(":popover-open")) {
-                CONTENT.hidePopover();
-                return;
-            }
+    return dropdownButton || children.find(child => !isDropdownContent(child)) || dropdown;
+}
 
-            updatePopoverPosition();
-            CONTENT.showPopover();
-        });
+function getDropdownContent(dropdown) {
+    return Array.from(dropdown.children).find(isDropdownContent) || pgs(dropdown).querySelector("dropdown-content");
+}
 
-        // == sync ARIA + data-open quando apre/chiude
-        CONTENT.addEventListener("toggle", e => {
-            const open = CONTENT.matches(":popover-open");
-            BUTTON.setAttribute("aria-expanded", open ? "true" : "false");
-            pgs(DROPDOWN).state.toggle("open", open);
-            if (open) {
-                updatePopoverPosition();
-                CONTENT.querySelector('a, button, input, select, textarea, [tabindex]:not([tabindex="-1"])')?.focus();
-            }
-        });
+function getDropdowns(root) {
+    const dropdowns = root instanceof Element && pgs(root).contains("dropdown") ? [root] : [];
+    dropdowns.push(...pgs(root).querySelectorAll("dropdown"));
+    return dropdowns;
+}
 
-        window.addEventListener("resize", () => {
-            if (CONTENT.matches(":popover-open")) updatePopoverPosition();
-        });
-        window.addEventListener("scroll", () => {
-            if (CONTENT.matches(":popover-open")) updatePopoverPosition();
-        }, true);
-
-        function open() {
-            if (CONTENT.matches(":popover-open")) return;
-            updatePopoverPosition();
-            CONTENT.showPopover();
-        }
+function getposition(dropdown) {
+    const option = pgs(dropdown).option;
+    const optionValue = option.getValueBrackets("position");
+    const raw = (optionValue || "bottom center").trim().toLowerCase();
+    const parts = raw.split(/\s+/).filter(Boolean);
+    const side = parts.find(part => ["top", "right", "bottom", "left"].includes(part)) || "bottom";
+    const align = parts.find(part => ["top", "right", "bottom", "left", "center"].includes(part) && part !== side) || "center";
 
-        function close() {
-            if (!CONTENT.matches(":popover-open")) return;
-            CONTENT.hidePopover();
-        }
+    return { side, align };
+}
+
+function clamp(value, min, max) {
+    return Math.min(Math.max(value, min), max);
+}
+
+function updateposition(dropdown) {
+    const data = API.get(dropdown);
+    if (!data || !data.isOpen()) return;
+
+    const { trigger, content } = data;
+    const { side, align } = getposition(dropdown);
+    const triggerRect = trigger.getBoundingClientRect();
+    const contentRect = content.getBoundingClientRect();
+    const viewportWidth = document.documentElement.clientWidth;
+    const maxLeft = Math.max(VIEWPORT_GAP, viewportWidth - contentRect.width - VIEWPORT_GAP);
+    let left = triggerRect.left + (triggerRect.width - contentRect.width) / 2;
+    let top = triggerRect.bottom + VIEWPORT_GAP;
+
+    if (side === "top" || side === "bottom") {
+        top = side === "top"
+            ? triggerRect.top - contentRect.height - VIEWPORT_GAP
+            : triggerRect.bottom + VIEWPORT_GAP;
+
+        if (align === "left") left = triggerRect.left;
+        if (align === "right") left = triggerRect.right - contentRect.width;
+    }
+
+    if (side === "left" || side === "right") {
+        left = side === "left"
+            ? triggerRect.left - contentRect.width - VIEWPORT_GAP
+            : triggerRect.right + VIEWPORT_GAP;
+        top = triggerRect.top + (triggerRect.height - contentRect.height) / 2;
+
+        if (align === "top") top = triggerRect.top;
+        if (align === "bottom") top = triggerRect.bottom - contentRect.height;
+    }
+
+    if (side === "left" && left < VIEWPORT_GAP) {
+        left = triggerRect.right + VIEWPORT_GAP;
+    }
+
+    if (side === "right" && left + contentRect.width > viewportWidth - VIEWPORT_GAP) {
+        left = triggerRect.left - contentRect.width - VIEWPORT_GAP;
+    }
+
+    left = clamp(left, VIEWPORT_GAP, maxLeft);
+
+    content.style.setProperty("--dropdown-left", `${Math.round(left)}px`);
+    content.style.setProperty("--dropdown-top", `${Math.round(top)}px`);
+}
+
+function updateOpenDropdowns() {
+    OPEN_DROPDOWNS.forEach(updateposition);
+}
+
+function closeDropdown(dropdown) {
+    const data = API.get(dropdown);
+    if (!data || !data.isOpen()) return;
+
+    pgs(dropdown).state.remove("open");
+    data.trigger.setAttribute("aria-expanded", "false");
+    OPEN_DROPDOWNS.delete(dropdown);
+}
+
+function openDropdown(dropdown) {
+    const data = API.get(dropdown);
+    if (!data || data.isOpen()) return;
 
-        function toggle() {
-            CONTENT.matches(":popover-open") ? close() : open();
+    OPEN_DROPDOWNS.forEach(item => {
+        if (item !== dropdown) closeDropdown(item);
+    });
+
+    pgs(dropdown).state.add("open");
+    data.trigger.setAttribute("aria-expanded", "true");
+    OPEN_DROPDOWNS.add(dropdown);
+    updateposition(dropdown);
+}
+
+function toggleDropdown(dropdown) {
+    const data = API.get(dropdown);
+    if (!data) return;
+
+    if (data.isOpen()) closeDropdown(dropdown);
+    else openDropdown(dropdown);
+}
+
+function isInsideAnyDropdown(target) {
+    return Array.from(OPEN_DROPDOWNS).some(dropdown => dropdown.contains(target));
+}
+
+function PGS_dropdown_init(root = document) {
+    getDropdowns(root).forEach((DROPDOWN) => {
+        if (API.has(DROPDOWN)) return;
+
+        const CONTENT = getDropdownContent(DROPDOWN);
+        if (!CONTENT) return;
+
+        const TRIGGER = getDropdownTrigger(DROPDOWN, CONTENT);
+        const id = nextDropdownId();
+
+        if (!TRIGGER.id) TRIGGER.id = `dropdown-btn-${id}`;
+        if (!CONTENT.id) CONTENT.id = `dropdown-panel-${id}`;
+
+        if (TRIGGER.matches("button") && !TRIGGER.hasAttribute("type")) {
+            TRIGGER.setAttribute("type", "button");
         }
 
-        API.set(DROPDOWN, {
+        TRIGGER.setAttribute("aria-haspopup", "true");
+        TRIGGER.setAttribute("aria-controls", CONTENT.id);
+        TRIGGER.setAttribute("aria-expanded", String(pgs(DROPDOWN).state.contains("open")));
+        CONTENT.setAttribute("aria-labelledby", TRIGGER.id);
+
+        const data = {
             element: DROPDOWN,
-            button: BUTTON,
+            trigger: TRIGGER,
             content: CONTENT,
-            open,
-            close,
-            toggle,
-            updatePosition: updatePopoverPosition,
+            open: () => openDropdown(DROPDOWN),
+            close: () => closeDropdown(DROPDOWN),
+            toggle: () => toggleDropdown(DROPDOWN),
             refresh: () => {
                 PGS_dropdown_init(DROPDOWN.parentNode || document);
+                updateposition(DROPDOWN);
                 return API.get(DROPDOWN);
             },
-            isOpen: () => CONTENT.matches(":popover-open"),
+            isOpen: () => pgs(DROPDOWN).state.contains("open")
+        };
+
+        TRIGGER.addEventListener("click", (event) => {
+            if (isDropdownContent(event.target)) return;
+            event.preventDefault();
+            event.stopPropagation();
+            toggleDropdown(DROPDOWN);
         });
+
+        CONTENT.addEventListener("click", event => event.stopPropagation());
+        API.set(DROPDOWN, data);
+
+        if (data.isOpen()) OPEN_DROPDOWNS.add(DROPDOWN);
+        updateposition(DROPDOWN);
     });
 }
 
+document.addEventListener("click", (event) => {
+    if (isInsideAnyDropdown(event.target)) return;
+    OPEN_DROPDOWNS.forEach(closeDropdown);
+});
+
+document.addEventListener("keydown", (event) => {
+    if (event.key !== "Escape") return;
+    OPEN_DROPDOWNS.forEach(closeDropdown);
+});
+
+window.addEventListener("resize", updateOpenDropdowns);
+window.addEventListener("scroll", updateOpenDropdowns, true);
+
 // # INIT
 PGS_dropdown_init();
 
 // # API
-export function PGS_dropdown_api(selector) {
+function PGS_dropdown_api(selector) {
     return API.get(selector);
 }
 
 export const PGS_dropdown = {
-    PGS_name: "PGS_dropdown",
     init: PGS_dropdown_init,
     api: PGS_dropdown_api
 };

package/assets/javascript/components/_menu.js

@@ -1,157 +1,56 @@
-import { PGS_dropdown_init, PGS_dropdown_api } from "./_dropdown";
+import { PGS_dropdown } from "./_dropdown";
 
 const API = new WeakMap();
 
 //= DROP DOWN MENU
-export function PGS_menu_init(root = document) {
+function PGS_menu_init(root = document) {
 
-    pgs(root).querySelectorAll('menu-horizontal').forEach(MENU => {
+    pgs(root).querySelectorAll('menu').forEach(MENU => {
         if (API.has(MENU)) return;
 
-        MENU.querySelectorAll('nav > ul > li.menu-item-has-children').forEach(li => {
-            if (li.querySelector("ul")) {
-                const ul = li.querySelector("ul");
-                if (pgs(li).querySelector("dropdown-button")) return;
+        MENU.querySelectorAll('li').forEach(li => {
+            const ul = li.querySelector("ul");
+
+            if (ul) {
 
                 const button = document.createElement("button");
-                button.className = "icon-down";
                 button.type = "button";
                 button.innerHTML = "<span>&#9207;</span>";
+                pgs(button).add("menu-buttonIcon");
                 li.querySelector("a").insertAdjacentElement("afterend", button);
 
                 pgs(li).add("dropdown")
                 pgs(button).add("dropdown-button")
                 pgs(button).add("buttonNohover")
                 pgs(ul).add("dropdown-content")
-                pgs(ul).add("menu-vertical")
+
             }
         });
 
         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),
+            // 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);
             },
         });
+        PGS_dropdown.init(MENU);
     });
 
-    pgs(root).querySelectorAll('menu-vertical').forEach(MENU => {
-        if (API.has(MENU)) return;
-
-        MENU.querySelectorAll('.menu-item-has-children').forEach((li, index) => {
-            const ul = li.querySelector("ul");
-
-            if (!ul) return
-            if (li.querySelector(":scope > button")) return;
-
-            const button = document.createElement("button");
-            button.className = "icon-down buttonIcon";
-            button.type = "button";
-
-            // ID unico per aria-controls
-            const submenuId = `vertical-submenu-${index}`;
-            ul.id = submenuId;
-
-            // Stato iniziale
-            pgs(button).add("buttonIcon")
-            button.setAttribute("aria-expanded", "false");
-            button.setAttribute("aria-controls", submenuId);
-            button.setAttribute("aria-label", "Apri sottomenu");
-            button.innerHTML = "<span aria-hidden='true'>&#9207;</span>";
-            li.querySelector("a").insertAdjacentElement("afterend", button);
-
-            function toggleMenu() {
-                // const isOpena = ul.classList.toggle("open");
-                const isOpen = pgs(ul).state.toggle("open");
-                button.setAttribute("aria-expanded", isOpen);
-                button.setAttribute("aria-label", isOpen ? "Chiudi sottomenu" : "Apri sottomenu");
-            };
-
-            // Click
-            button.addEventListener("click", toggleMenu);
-            button.addEventListener("keydown", (e) => {
-                if (e.key === "Enter" || e.key === " ") {
-                    e.preventDefault();
-                    toggleMenu();
-                }
-            });
-        });
-
-        function submenu(index) {
-            return MENU.querySelectorAll('.menu-item-has-children > ul')[index];
-        }
-
-        function setSubmenu(index, open) {
-            const ul = submenu(index);
-            const button = ul?.parentElement?.querySelector(":scope > button");
-            if (!ul || !button) return;
-
-            pgs(ul).state.toggle("open", open);
-            button.setAttribute("aria-expanded", String(open));
-            button.setAttribute("aria-label", open ? "Chiudi sottomenu" : "Apri sottomenu");
-        }
-
-        API.set(MENU, {
-            element: MENU,
-            type: "vertical",
-            items: () => Array.from(MENU.querySelectorAll(':scope > li')),
-            submenus: () => Array.from(MENU.querySelectorAll('.menu-item-has-children > ul')),
-            openSubmenu: (index) => setSubmenu(index, true),
-            closeSubmenu: (index) => setSubmenu(index, false),
-            toggleSubmenu: (index) => {
-                const ul = submenu(index);
-                if (!ul) return;
-                setSubmenu(index, !pgs(ul).state.contains("open"));
-            },
-            isSubmenuOpen: (index) => {
-                const ul = submenu(index);
-                return ul ? pgs(ul).state.contains("open") : false;
-            },
-            refresh: () => {
-                PGS_menu_init(MENU.parentNode || document);
-                return API.get(MENU);
-            },
-        });
-
-        // pgs(document).querySelectorAll('menu-vertical').forEach(MENU => {
-
-        //     MENU.querySelectorAll('.menu-item-has-children').forEach(li => {
-        //         if (li.querySelector("ul")) {
-        //             const ul = li.querySelector("ul");
-
-        //             const button = document.createElement("button");
-        //             button.className = "icon-down";
-        //             button.type = "button";
-        //             button.innerHTML = "<span>&#9207;</span>";
-        //             li.querySelector("a").insertAdjacentElement("afterend", button);
-
-
-        //             pgs(button).add("buttonIcon")
-        //             button.addEventListener("click", () => {
-        //                 ul.classList.toggle("open")
-        //             })
-        //         }
-        //     });
-        // });
-    });
-    PGS_dropdown_init()
 }
 
-//# INIT PGS_menu
 PGS_menu_init()
 
-//# API
-export function PGS_menu_api(selector) {
+function PGS_menu_api(selector) {
     return API.get(selector);
 }
 
+//# EXPORT
 export const PGS_menu = {
-    PGS_name: "PGS_menu",
     init: PGS_menu_init,
     api: PGS_menu_api
 };

package/assets/javascript/components/_modals.js

@@ -159,7 +159,6 @@ export function PGS_modal_api(selector) {
 }
 
 export const PGS_modal = {
-    PGS_name: "PGS_modal",
     init: PGS_modal_init,
     api: PGS_modal_api
 };

package/assets/javascript/components/_notifications.js

@@ -139,17 +139,16 @@ export function PGS_notificationTrigger_init(root = document) {
 }
 
 export const PGS_notification = {
-    PGS_name: "PGS_notification",
     trigger: PGS_notificationTrigger_init,
     alert: {
-        error: (text = "Errore", link = null, timeout = 0, icon = '<i class="fa-solid fa-octagon-xmark"></i>') => fn_notification.initNotification("error", "notification", icon, text, timeout, "stack", link),
+        error: (text = "Errore", link = null, timeout = 0, icon = '<i class="fa-solid fa-circle-xmark"></i>') => fn_notification.initNotification("error", "notification", icon, text, timeout, "stack", link),
         success: (text = "Aggiornato", link = null, timeout = 0, icon = '<i class="fa-solid fa-check"></i>') => fn_notification.initNotification("success", "notification", icon, text, timeout, "stack", link),
         info: (text = "Aggiornamento", link = null, timeout = 0, icon = '<i class="fa-solid fa-circle-info"></i>',) => fn_notification.initNotification("info", "notification", icon, text, timeout, "stack", link),
         warning: (text = "Attenzione", link = null, timeout = 0, icon = '<i class="fa-solid fa-triangle-exclamation"></i>') => fn_notification.initNotification("warning", "notification", icon, text, timeout, "stack", link),
         deleteAll: () => fn_notification.deleteAll("notification")
     },
     toast: {
-        error: (text = "Errore", timeout = 4000, icon = '<i class="fa-solid fa-octagon-xmark"></i>',) => fn_notification.initNotification("error", "toast", icon, text, timeout),
+        error: (text = "Errore", timeout = 4000, icon = '<i class="fa-solid fa-circle-xmark"></i>',) => fn_notification.initNotification("error", "toast", icon, text, timeout),
         success: (text = "Aggiornato", timeout = 4000, icon = '<i class="fa-solid fa-check"></i>',) => fn_notification.initNotification("success", "toast", icon, text, timeout),
         info: (text = "Aggiornamento", timeout = 0, icon = '<i class="fa-solid fa-circle-info"></i>',) => fn_notification.initNotification("info", "toast", icon, text, timeout),
         warning: (text = "Attenzione", timeout = 4000, icon = '<i class="fa-solid fa-triangle-exclamation"></i>',) => fn_notification.initNotification("warning", "toast", icon, text, timeout),

package/assets/javascript/components/_slides.js

@@ -188,7 +188,6 @@ export function PGS_slides_api(selector) {
 }
 
 export const PGS_slides = {
-    PGS_name: "PGS_slides",
     init: PGS_slides_init,
     api: PGS_slides_api
 };

package/assets/javascript/components/_stepTabs.js

@@ -140,7 +140,6 @@ export function PGS_stepTabs_api(selector) {
 }
 
 export const PGS_stepTabs = {
-    PGS_name: "PGS_stepTabs",
     init: PGS_stepTabs_init,
     api: PGS_stepTabs_api
 };

package/assets/javascript/components/_steps.js

@@ -48,7 +48,6 @@ export function PGS_steps_api(selector) {
 }
 
 export const PGS_steps = {
-    PGS_name: "PGS_steps",
     init: PGS_steps_init,
     api: PGS_steps_api
 };

package/assets/javascript/patterns/_cookieConsent.js

@@ -96,7 +96,7 @@ function assignCookieRuntimeAttributes({ root, analyticsToggle, acceptAllButton,
 }
 
 //= CookieConsent
-document.addEventListener('DOMContentLoaded', function () {
+function initCookieConsent() {
     const root = pgs(document).querySelector('cookieConsent');
     if (!root) return;
 
@@ -206,4 +206,10 @@ document.addEventListener('DOMContentLoaded', function () {
     } else {
         setBannerVisibility(true);
     }
-});
+}
+
+if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', initCookieConsent);
+} else {
+    initCookieConsent();
+}

package/assets/javascript/pgs.d.ts

@@ -31,7 +31,6 @@ declare global {
     value: string | null;
     state: PgsStateApi;
     option: PgsOptionApi;
-    modules: PgsOptionApi;
   }
 
   interface PgsDocumentApi extends PgsQueryableApi {
@@ -45,7 +44,19 @@ declare global {
     (root: Element): PgsElementApi;
     (root: Document | Element): PgsApi;
     registerImport(...modules: unknown[]): PgsFunction;
+    registerModules(modules: Record<string, any>): PgsFunction;
     import(...names: string[]): Record<string, any>;
+    accordion?: any;
+    dropdown?: any;
+    menu?: any;
+    modal?: any;
+    notification?: any;
+    slides?: any;
+    stepTabs?: any;
+    steps?: any;
+    formValidate?: any;
+    scrollHorizontal?: any;
+    [moduleName: string]: any;
   }
 
   interface PgsBag extends PgsElementApi {}