mypgs 1.6.0 → 2.0.0

package/AGENTS.md

@@ -71,7 +71,7 @@ Patterns found:
 
 - `pgs` is the main attribute: tokens are separated by spaces, for example `pgs="button modal-button"`.
 - `assets/scss/index.scss` imports base, layout, components, and patterns; layouts/components/patterns are almost all scoped under `[pgs~=initP]`.
-- The main markup must enable the library with `htmlBase initP`, and the body with base body tokens. Use `templates/demo.html` and `templates/html/layout/body.html` as the canonical references.
+- The main markup must enable the library with `htmlBase initP`, and the body with base body tokens. Use `demo/demo.html` and `templates/html/layout/body.html` as the canonical references.
 - Components use a root token and child tokens with a consistent prefix. Use `templates/html/components/` as the canonical markup source.
 
 - Runtime states use `pgs-state`, for example `open`, `is-active`, `is-completed`, `is-locked`, `success`, `error`, `warning`, and `info`.
@@ -229,7 +229,7 @@ Canonical template references:
 - Layouts: `templates/html/layout/body.html`, `templates/html/layout/flex.html`, `templates/html/layout/grid.html`, `templates/html/layout/pageShell.html`, `templates/html/layout/section.html`
 - Components: `templates/html/components/accordion.html`, `templates/html/components/breadcumbs.html`, `templates/html/components/button.html`, `templates/html/components/card.html`, `templates/html/components/dropdown.html`, `templates/html/components/form.html`, `templates/html/components/logo.html`, `templates/html/components/menu.html`, `templates/html/components/modal.html`, `templates/html/components/notification.html`, `templates/html/components/search.html`, `templates/html/components/slides.html`, `templates/html/components/stepTabs.html`, `templates/html/components/steps.html`, `templates/html/components/table.html`, `templates/html/components/tooltip.html`
 - Patterns: `templates/html/patterns/cookieConsent.html`, `templates/html/patterns/footer.html`, `templates/html/patterns/header.html`
-- Complete demo assembly. DO NOT use this for inspiration. It is only used to show all the modules: `templates/demo.html`
+- Complete demo assembly. DO NOT use this for inspiration. It is only used to show all the modules: `demo/demo.html`
 
 Before creating markup, open the relevant template and reuse its current structure, tokens, ARIA attributes, and `pgs-option` syntax.
 

package/assets/javascript/components/_accordion.js

@@ -11,7 +11,7 @@ function directPgsChild(element, token) {
     return Array.from(element.children).find(child => pgs(child).contains(token));
 }
 
-export function PGS_accordion_init(root = document) {
+function PGS_accordion_init(root = document) {
     pgs(root).querySelectorAll("accordion").forEach((accordion) => {
         if (API.has(accordion)) return;
 
@@ -115,7 +115,7 @@ export function PGS_accordion_init(root = document) {
 PGS_accordion_init();
 
 //# API
-export function PGS_accordion_api(selector) {
+function PGS_accordion_api(selector) {
     return API.get(selector);
 }
 

package/assets/javascript/components/_modals.js

@@ -1,161 +1,184 @@
 //# MODAL
 const API = new WeakMap();
 
-export function PGS_modal_init(selector = "modal") {
-    pgs(document).querySelectorAll(selector).forEach(MODAL => {
-        if (API.has(MODAL)) return;
-
-        const BUTTON_OPEN = pgs(MODAL).querySelector("modal-button");        
-        const DIALOG = MODAL.querySelector("dialog");
-        if (!BUTTON_OPEN || !DIALOG) 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")
-
-        
-        //== 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")
-
-
-        //== SET
-        pgs(DIALOG).add("dialog modal-dialog");
-
-        //== BUTTON OPEN
-        BUTTON_OPEN.setAttribute("role", "button");
-        BUTTON_OPEN.setAttribute("aria-label", "apri modale");
-
-
-        //== 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);
-        }
+function getModals(root) {
+    const modals = root instanceof Element && pgs(root).contains("modal") ? [root] : [];
+    modals.push(...pgs(root).querySelectorAll("modal"));
+    return modals;
+}
 
+function initializeModal(MODAL, existingDialog = null) {
+    if (API.has(MODAL)) return;
 
-        //+ FN STATUS 
-        function statusModal(status = true) {
-            BUTTON_OPEN?.setAttribute("aria-expanded", status);
-            DIALOG?.setAttribute("aria-expanded", status);
-        }
+    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;
 
-        //+ 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'));
-        }
+    //== 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");
 
-        //+ 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'));
-        }
 
-        function forceOpen(e) {
-            if (!DIALOG.open) openModal(e);
-        }
+    //== 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");
 
-        function forceClose(e) {
-            if (DIALOG.open) closeModal(e);
-        }
+    //== OPTION ATTRIBUTES DIALOG
+    const topLevel = pgs(DIALOG).option.contains("topLevel");
 
-        //+ 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();
-        }
+
+    //== 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");
 
 
-        //= 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 (_) { }
-            });
+    //== SET
+    pgs(DIALOG).add("dialog modal-dialog");
+
+    //== BUTTON OPEN
+    BUTTON_OPEN.setAttribute("role", "button");
+    BUTTON_OPEN.setAttribute("aria-label", "apri modale");
+
+
+    //== 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);
+    }
+
+
+    //+ FN STATUS
+    function statusModal(status = true) {
+        BUTTON_OPEN?.setAttribute("aria-expanded", status);
+        DIALOG?.setAttribute("aria-expanded", status);
+    }
+
+    //+ FN OPEN
+    function openModal(e) {
+        e?.stopImmediatePropagation();
+        if (DIALOG.open) {
+            closeModal(e);
+            return;
         }
 
-        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,
+        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'));
+    }
+
+    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
-export function PGS_modal_api(selector) {
-    return API.get(selector);
+function PGS_modal_api(element) {
+    return API.get(element);
 }
 
 export const PGS_modal = {

package/assets/javascript/components/_notifications.js

@@ -24,10 +24,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 {};
         }
     },
@@ -46,13 +48,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);
@@ -98,8 +108,8 @@ const fn_notification = {
         });
     },
 
-    deleteAll(containerToken) {
-        let containerNotification = pgs(document).querySelector(containerToken);
+    deleteAll(containerType) {
+        let containerNotification = this._getContainer(containerType);
         if (containerNotification) containerNotification.innerHTML = "";
     },
 
@@ -133,8 +143,8 @@ const fn_notification = {
     }
 };
 
-//# EXPORT 
-export function PGS_notificationTrigger_init(root = document) {
+//# TRIGGER
+function PGS_notificationTrigger_init(root = document) {
     return fn_notification.trigger(root);
 }
 

package/assets/javascript/components/_search.js

@@ -5,7 +5,7 @@ let searchId = 0;
 const DEFAULT_OPTIONS = {
     minLength: 2,
     debounce: 200,
-    limit: 8,
+    limit: 6,
     submitOnSelect: false,
     searchOnFocus: true,
     source: null,
@@ -381,7 +381,7 @@ document.addEventListener("pointerdown", event => {
 
 PGS_search_init();
 
-export function PGS_search_api(selector) {
+function PGS_search_api(selector) {
     return API.get(selector);
 }
 

package/assets/javascript/components/_slides.js

@@ -1,10 +1,16 @@
-import { PGS_scrollHorizontal } from "../functions/_scrollY"
+import { PGS_scrollHorizontal } from "../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 = {
@@ -21,28 +27,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 
@@ -51,7 +65,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;
@@ -67,19 +81,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
@@ -118,8 +130,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();
@@ -131,12 +145,14 @@ class PGS_Slides {
         const notScrollWithMouse = pgs(slides).option.contains('notScrollWithMouse');
 
         //== scroll
-        if (!notScrollWithMouse) PGS_scrollHorizontal(this.container, 5);
+        const removeHorizontalScroll = notScrollWithMouse
+            ? null
+            : 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(
@@ -146,9 +162,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(),
@@ -163,19 +188,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 
-export function PGS_slides_init(root = document) {
-    pgs(root).querySelectorAll("slides").forEach(el => {
-        if (API.has(el)) return;
+function PGS_slides_init(root = document) {
+    getSlides(root).forEach(element => {
+        if (API.has(element)) return;
 
-        const instance = new PGS_Slides({ selector: el });
+        const instance = new PGS_Slides({ element });
         instance.execute();
     });
 }
@@ -183,8 +217,8 @@ export function PGS_slides_init(root = document) {
 PGS_slides_init();
 
 //# API 
-export function PGS_slides_api(selector) {
-    return API.get(selector);
+function PGS_slides_api(element) {
+    return API.get(element);
 }
 
 export const PGS_slides = {