mypgs 2.0.0 → 3.0.0

package/templates/html/components/modal.html

@@ -1,122 +0,0 @@
-<!--
-/**
- * @title Modal
- * @description Componente che collega un pulsante a un dialog nativo, ne gestisce apertura e chiusura e può spostarlo in un contenitore configurato.
- *
- * @pgs
- * - modal: identifica il contenitore logico inizializzato dal modulo modal.
- * - modal-button: identifica il controllo di apertura della finestra.
- * - dialog: token aggiunto dinamicamente all'elemento dialog inizializzato.
- * - modal-dialog: identifica il dialog nativo dopo l'inizializzazione JavaScript.
- * - modal-dialog-content: identifica il contenitore visivo della finestra.
- * - modal-dialog-content-header: identifica l'intestazione che può ricevere il pulsante di chiusura automatico.
- * - modal-dialog-content-scroll: identifica l'area interna scorrevole.
- * - modal-close: identifica un controllo che chiude la finestra.
- *
- * @pgs-option
- * - containerID: sul root usa containerID[id] per spostare il dialog nell'elemento con l'id indicato.
- * - containerPGS: sul root usa containerPGS[token] per spostare il dialog nel primo elemento con quel token pgs.
- * - disableBackdropClose: sul root impedisce la chiusura tramite click sul backdrop.
- * - history: sul root sincronizza l'apertura con il parametro modal nella cronologia del browser e richiede un id sul pulsante.
- * - topLevel: sul dialog mantiene la finestra nel componente e usa showModal per una modale top-level.
- * - left: sul dialog posiziona e anima il contenuto dal lato sinistro.
- * - right: sul dialog posiziona e anima il contenuto dal lato destro.
- *
- * @api
- * - pgs.modal.init(root): inizializza le modali presenti nel Document o Element indicato; il valore predefinito è document.
- * - pgs.modal.api(element): restituisce l'istanza associata a un root modal inizializzato.
- * - instance.open(): apre la finestra se non è già aperta.
- * - instance.close(): chiude la finestra se è aperta.
- * - instance.toggle(): apre la finestra oppure la chiude quando è già aperta.
- * - instance.refresh(): rilegge opzioni e collegamenti della modale, sostituisce listener e observer precedenti e restituisce la nuova API.
- * - instance.isOpen(): restituisce true quando l'elemento dialog possiede lo stato nativo open.
- *
- * @related
- * - button: presenta i controlli di apertura, chiusura e annullamento come pulsanti standard.
- * - buttonStrong: presenta l'azione di conferma con maggiore enfasi.
- * - buttonClose: viene aggiunto automaticamente al controllo di chiusura quando manca nel markup.
- * - flexColumnElements: organizza verticalmente il contenuto della modale di conferma.
- * - flexRow: dispone affiancate le azioni della modale di conferma.
- *
- * @return Quattro esempi basati su dialog nativo e un contenitore opzionale usato da containerID.
- */
--->
-
-<div pgs="modal" pgs-option="containerID[modal-container]">
-    <button pgs="modal-button button" type="button">
-        <i class="fa-solid fa-window-maximize"></i> Apri modale
-    </button>
-
-    <dialog>
-        <div pgs="modal-dialog-content">
-            <div pgs="modal-dialog-content-header">
-                <h3>Modale di esempio</h3>
-            </div>
-
-            <div pgs="modal-dialog-content-scroll">
-                <p>Contenuto della modale. Il bottone di chiusura viene aggiunto automaticamente se non presente.</p>
-            </div>
-        </div>
-    </dialog>
-</div>
-
-<div pgs="modal" pgs-option="containerID[modal-container]">
-    <button pgs="modal-button button" type="button">
-        <i class="fa-solid fa-window-maximize"></i> Apri modale right
-    </button>
-
-    <dialog pgs-option="right">
-        <div pgs="modal-dialog-content">
-            <div pgs="modal-dialog-content-header">
-                <h3>Modale laterale</h3>
-            </div>
-
-            <div pgs="modal-dialog-content-scroll">
-                <p>Contenuto della modale con <code>pgs-option="right"</code>.</p>
-            </div>
-        </div>
-    </dialog>
-</div>
-
-<div pgs="modal" pgs-option="containerID[modal-container]">
-    <button pgs="modal-button button" type="button">
-        <i class="fa-solid fa-window-maximize"></i> Apri modale left
-    </button>
-
-    <dialog pgs-option="left">
-        <div pgs="modal-dialog-content">
-            <div pgs="modal-dialog-content-header">
-                <h3>Modale laterale sinistra</h3>
-            </div>
-
-            <div pgs="modal-dialog-content-scroll">
-                <p>Contenuto della modale con <code>pgs-option="left"</code>.</p>
-            </div>
-        </div>
-    </dialog>
-</div>
-
-<div pgs="modal">
-    <button pgs="modal-button button" type="button">
-        <i class="fa-solid fa-floppy-disk"></i> Conferma salvataggio
-    </button>
-
-    <dialog pgs-option="topLevel">
-        <div pgs="modal-dialog-content">
-            <div pgs="modal-dialog-content-header">
-                <h3>Salvare le modifiche?</h3>
-            </div>
-
-            <div pgs="modal-dialog-content-scroll flexColumnElements">
-                <p>Hai modifiche non salvate. Conferma per applicarle oppure annulla per tornare alla pagina.</p>
-
-                <div pgs="flexRow">
-                    <button pgs="button modal-close" type="button">Annulla</button>
-                    <button pgs="buttonStrong" type="button">Salva modifiche</button>
-                </div>
-            </div>
-        </div>
-    </dialog>
-</div>
-
-<div id="modal-container"></div>

package/templates/html/components/notification.html

@@ -1,71 +0,0 @@
-<!--
-/**
- * @title Notification
- * @description Sistema di notifiche persistenti o toast temporanei, generati dall'API oppure da una configurazione JSON dichiarativa contenuta nell'opzione notification.
- *
- * @pgs
- * - notification: identifica il contenitore delle notifiche, sia persistenti sia temporanee.
- * - notificationTrigger: identifica una configurazione dichiarativa elaborata e rimossa all'inizializzazione.
- * - notification-element: identifica ogni messaggio creato dinamicamente.
- * - notification-element-title: identifica il titolo generato del messaggio.
- * - notification-element-content: identifica il contenuto generato del messaggio.
- *
- * @pgs-option
- * - toast: sul contenitore notification abilita il posizionamento centrale e la sostituzione del messaggio temporaneo corrente.
- * - notification: contiene un oggetto JSON con title, message, element, type, icon, duration e link usando la sintassi notification[{...}].
- *
- * @pgs-state
- * - success: applica la variante positiva al messaggio generato.
- * - error: applica la variante di errore e il ruolo alert.
- * - warning: applica la variante di avviso.
- * - info: applica la variante informativa predefinita.
- *
- * @api
- * - pgs.notification.trigger(root): elabora e rimuove i notificationTrigger dichiarativi presenti nel contesto indicato.
- * - pgs.notification.alert.error(text, link, timeout, icon): crea una notifica persistente di errore, opzionalmente cliccabile e temporizzata.
- * - pgs.notification.alert.success(text, link, timeout, icon): crea una notifica persistente di successo.
- * - pgs.notification.alert.info(text, link, timeout, icon): crea una notifica persistente informativa.
- * - pgs.notification.alert.warning(text, link, timeout, icon): crea una notifica persistente di avviso.
- * - pgs.notification.alert.deleteAll(): rimuove tutte le notifiche persistenti.
- * - pgs.notification.toast.error(text, timeout, icon): crea un toast di errore sostituendo quello eventualmente presente.
- * - pgs.notification.toast.success(text, timeout, icon): crea un toast di successo.
- * - pgs.notification.toast.info(text, timeout, icon): crea un toast informativo.
- * - pgs.notification.toast.warning(text, timeout, icon): crea un toast di avviso.
- * - pgs.notification.toast.deleteAll(): rimuove il toast corrente.
- *
- * @related
- * - hidden: nasconde i trigger dichiarativi prima che vengano elaborati.
- * - buttonClose: identifica il pulsante di rimozione aggiunto a ogni messaggio.
- *
- * @return Due contenitori notification, uno persistente e uno configurato con l'opzione toast, con trigger dichiarativi configurati tramite pgs-option.
- */
--->
-
-<div pgs="notification" aria-live="polite"></div>
-<div pgs="notification" pgs-option="toast" aria-live="polite"></div>
-
-<div pgs="hidden notificationTrigger" pgs-option='notification[{
-            "title": "Titolo",
-            "message": "Messaggio",
-            "element": "notification",
-            "type": "info",
-            "icon": null,
-            "duration": "-1",
-            "link": null
-        }]'></div>
-
-<div pgs="hidden notificationTrigger" pgs-option='notification[{
-            "title": "Benvenuto",
-            "message": "Messaggio",
-            "element": "toast",
-            "type": "info",
-            "icon": null,
-            "duration": "3000",
-            "link": null
-        }]'></div>
-<!-- 
-    <div
-        pgs="hidden notificationTrigger"
-        pgs-option='notification[{"title":"Titolo","message":"Messaggio","element":"notification","type":"info","icon":"<i class=\"fa-solid fa-rocket\"></i>","duration":"4000","link":"/pagina/"}]'>
-    </div>
--->

package/templates/html/components/search.html

@@ -1,107 +0,0 @@
-<!--
-/**
- * @title Search
- * @description Ricerca componibile con suggerimenti asincroni o locali, navigazione da tastiera, selezione, annullamento richieste e attributi ARIA gestiti dal modulo search.
- *
- * @pgs
- * - search: identifica il form inizializzato come ricerca con suggerimenti.
- * - search-suggestions: identifica la lista opzionale che riceve i risultati.
- * - search-suggestions-item: identifica ogni risultato creato dinamicamente nella lista.
- * - search-modal: identifica la variante di ricerca inserita in una modale per dispositivi mobili.
- * - search-mobile: identifica il contenitore interno della ricerca mobile.
- *
- * @pgs-option
- * - containerPGS: sul wrapper modal usa containerPGS[header] per spostare il dialog nell'header.
- *
- * @pgs-state
- * - open: sul root search indica che la lista dei suggerimenti è aperta.
- * - loading: sul root search indica una sorgente dati in caricamento.
- * - error: sul root search indica che il recupero dei suggerimenti è fallito.
- * - selected: sul risultato generato indica l'elemento attivo durante la navigazione.
- *
- * @api
- * - pgs.search.init(root): inizializza le ricerche non ancora registrate dentro Document o Element indicato.
- * - pgs.search.api(element): restituisce l'istanza associata a un form search inizializzato.
- * - instance.configure(options): aggiorna minLength, debounce, limit, submitOnSelect, searchOnFocus, source e onSelect e restituisce l'istanza.
- * - instance.setSource(source): configura una sorgente array o funzione asincrona per i suggerimenti.
- * - instance.search(query): esegue subito la ricerca e restituisce una Promise con i suggerimenti normalizzati.
- * - instance.open(): apre la lista quando sono disponibili risultati.
- * - instance.close(): chiude la lista e azzera la selezione attiva.
- * - instance.clear(): rimuove risultati e selezione e chiude la lista.
- * - instance.cancel(): annulla debounce e richiesta attiva.
- * - instance.select(index, submit): seleziona un risultato, emette pgs:search:select e può inviare il form.
- * - instance.refresh(): ripete la ricerca usando il valore corrente dell'input.
- * - instance.destroy(): rimuove listener, annulla le operazioni e scollega l'istanza.
- * - instance.items(): restituisce una copia dei suggerimenti correnti.
- * - instance.isOpen(): restituisce true quando la lista dei suggerimenti è aperta.
- * - instance.isLoading(): restituisce true durante il caricamento della sorgente.
- * - instance.setActiveIndex(index): imposta il suggerimento attivo e aggiorna selezione e attributi ARIA.
- *
- * @related
- * - buttonNohover: applica al form l'aspetto compatto condiviso con i controlli button.
- * - modal: fornisce il contenitore e il comportamento della variante mobile.
- * - modal-button: apre la ricerca mobile.
- * - modal-close: chiude la ricerca mobile.
- * - buttonIcon: presenta apertura e chiusura come pulsanti a icona.
- * - flexRow: organizza il contenuto della variante mobile e gli elementi dei suggerimenti generati.
- * - section: applica la spaziatura di sezione alla ricerca mobile.
- *
- * @return Form di ricerca autonomo, variante mobile integrata in una modal e script di esempio con sorgente locale.
- */
--->
-
-<form pgs="buttonNohover search" autocomplete="off" action="" method="get">
-    <button type="submit" title="Cerca"><i class="fa-solid fa-search"></i></button>
-    <input type="search" name="s" placeholder="Cerca" value="">
-    <ul pgs="search-suggestions"></ul>
-</form>
-
-<div pgs="modal search-modal" pgs-option="containerPGS[header]">
-
-    <button type="button" pgs="modal-button buttonIcon" title="Cerca">
-        <i class="fa-solid fa-search"></i>
-    </button>
-
-    <dialog>
-        <div pgs="flexRow section search-mobile">
-
-            <form pgs="buttonNohover search" autocomplete="off" action="/" method="get">
-                <button type="submit" title="Cerca">
-                    <i class="fa-solid fa-search"></i>
-                </button>
-
-                <input type="search" name="s" placeholder="Cerca" value="">
-                <ul pgs="search-suggestions"></ul>
-            </form>
-
-            <button type="button" pgs="modal-close buttonIcon">
-                <i class="fa-solid fa-close"></i>
-            </button>
-
-        </div>
-    </dialog>
-</div>
-
-<script type="module">
-    import { pgs } from "mypgs";
-
-    const components = [
-        { label: "Accordion", value: "/componenti/accordion", data: { category: "component" } },
-        { label: "Dropdown", value: "/componenti/dropdown", data: { category: "component" } },
-        { label: "Modal", value: "/componenti/modal", data: { category: "component" } },
-        { label: "Search", value: "/componenti/search", data: { category: "component" } },
-        { label: "Page Shell", value: "/layout/page-shell", data: { category: "layout" } },
-    ];
-
-    pgs(document).querySelectorAll("search").forEach(search => {
-        pgs.search.api(search)?.configure({
-            minLength: 1,
-            debounce: 150,
-            limit: 5,
-            source: components,
-            onSelect: ({ item, value }) => {
-                console.log(`Selezionato ${item.label}: ${value}`);
-            },
-        });
-    });
-</script>

package/templates/html/components/slides.html

@@ -1,76 +0,0 @@
-<!--
-/**
- * @title Slides
- * @description Carosello orizzontale che osserva gli elementi visibili e crea automaticamente controlli precedente, successivo e indicatori di posizione.
- *
- * @pgs
- * - slides: identifica il root inizializzato dal modulo slides.
- * - slides-container: identifica la lista orizzontale degli elementi scorrevoli.
- * - slides-prec: identifica il pulsante precedente creato dinamicamente.
- * - slides-next: identifica il pulsante successivo creato dinamicamente.
- * - slides-dots: identifica il contenitore degli indicatori creato dinamicamente.
- *
- * @pgs-option
- * - singleScroll: usa un solo elemento visibile come riferimento per la navigazione precedente e successiva.
- * - shadowDesktop: abilita l'ombreggiatura laterale del carosello sui layout desktop.
- * - notScrollAnimation: applicata a un elemento li disabilita l'animazione visiva basata sulla percentuale di visibilità.
- * - notScrollWithMouse: sul root disabilita la gestione dello scorrimento orizzontale tramite mouse.
- *
- * @api
- * - pgs.slides.init(root): inizializza il root stesso quando è un carosello e tutti i caroselli discendenti non ancora registrati; il valore predefinito è document.
- * - pgs.slides.api(element): restituisce l'istanza associata a un root slides inizializzato.
- * - instance.previous(): porta in vista la slide precedente.
- * - instance.next(): porta in vista la slide successiva.
- * - instance.goTo(index): porta in vista la slide con l'indice indicato.
- * - instance.getCurrentIndexes(): restituisce gli indici delle slide attualmente visibili.
- * - instance.getCurrentElements(): restituisce gli elementi slide attualmente visibili.
- * - instance.getTotal(): restituisce il numero totale di slide.
- * - instance.isAtStart(): restituisce true quando la prima slide è visibile.
- * - instance.isAtEnd(): restituisce true quando l'ultima slide è visibile.
- * - instance.refresh(): sincronizza controlli e dots, sostituisce listener e observer precedenti e restituisce la nuova API.
- *
- * @related
- * - card: usa card come contenuto dimostrativo di ogni slide.
- * - card-img: identifica l'immagine delle card dimostrative.
- * - imgCover: adatta le immagini allo spazio disponibile.
- * - flexColumn: organizza verticalmente ogni card.
- * - flexColumnTexts: applica la spaziatura ai testi delle card.
- * - buttonIcon: viene applicato ai controlli precedente e successivo generati.
- *
- * @return Lista di slide basate su card, completata a runtime con pulsanti e indicatori.
- */
--->
-
-<div pgs="slides" pgs-option="singleScroll shadowDesktop">
-    <ul pgs="slides-container">
-        <li>
-            <article pgs="card flexColumn">
-                <img pgs="card-img imgCover" src="https://placehold.co/800x500?text=Slide+1" alt="Slide 1">
-                <div pgs="flexColumnTexts">
-                    <h3>Slide uno</h3>
-                    <p>Contenuto della prima slide.</p>
-                </div>
-            </article>
-        </li>
-
-        <li>
-            <article pgs="card flexColumn">
-                <img pgs="card-img imgCover" src="https://placehold.co/800x500?text=Slide+2" alt="Slide 2">
-                <div pgs="flexColumnTexts">
-                    <h3>Slide due</h3>
-                    <p>Contenuto della seconda slide.</p>
-                </div>
-            </article>
-        </li>
-
-        <li>
-            <article pgs="card flexColumn">
-                <img pgs="card-img imgCover" src="https://placehold.co/800x500?text=Slide+3" alt="Slide 3">
-                <div pgs="flexColumnTexts">
-                    <h3>Slide tre</h3>
-                    <p>Contenuto della terza slide.</p>
-                </div>
-            </article>
-        </li>
-    </ul>
-</div>

package/templates/html/components/stepTabs.html

@@ -1,83 +0,0 @@
-<!--
-/**
- * @title Step Tabs
- * @description Procedura guidata a schede con avanzamento sequenziale, indicatori generati, controlli di navigazione e possibilità di bloccare uno step.
- *
- * @pgs
- * - stepTabs: identifica il root della procedura guidata.
- * - stepTabs-dots: identifica il contenitore degli indicatori di avanzamento.
- * - stepTabs-dots-dot: identifica ogni indicatore creato dinamicamente.
- * - stepTabs-container: contiene nell'ordine tutte le schede della procedura.
- * - tab: identifica una singola scheda navigabile.
- * - stepTabs-prev: identifica il controllo per tornare allo step precedente.
- * - stepTabs-restart: identifica il controllo che riavvia la procedura dal primo step.
- * - stepTabs-next: identifica il controllo per avanzare allo step successivo.
- *
- * @pgs-option
- * - tabIcon: su ogni tab usa tabIcon[classe] con una singola classe Font Awesome per l'indicatore corrispondente; il fallback è fa-circle.
- * - step: viene applicata a ogni indicatore generato con la sintassi step[indice] per conservarne l'indice zero-based.
- * - buttonReverse: inverte testo e icona sul pulsante successivo e appartiene al componente button.
- *
- * @pgs-state
- * - is-active: identifica la scheda corrente e il relativo indicatore.
- * - is-completed: identifica gli indicatori degli step già completati e nuovamente selezionabili.
- * - is-locked: applicato a un tab impedisce di avanzare finché lo step resta bloccato.
- *
- * @api
- * - pgs.stepTabs.init(root): inizializza le procedure non ancora registrate dentro Document o Element indicato.
- * - pgs.stepTabs.api(element): restituisce l'istanza associata a un root stepTabs inizializzato.
- * - instance.restart(): torna al primo tab e ripristina i blocchi dichiarati inizialmente.
- * - instance.goTo(index, scroll): attiva il tab indicato, aggiorna controlli e indicatori e opzionalmente scorre al componente.
- * - instance.next(): attiva il tab successivo entro i limiti disponibili.
- * - instance.prev(): attiva il tab precedente entro i limiti disponibili.
- * - instance.toggleLock(index, lock): aggiunge o rimuove is-locked dal tab indicato e aggiorna i controlli.
- * - instance.refresh(): riesegue l'inizializzazione nel contenitore della procedura e restituisce l'istanza.
- * - instance.getCurrent(): restituisce l'indice del tab corrente.
- * - instance.getState(): restituisce un oggetto con indice corrente e numero totale di tab.
- *
- * @related
- * - flexColumnElements: organizza verticalmente le aree principali del componente.
- * - flexColumnTexts: organizza il contenuto testuale di ogni tab.
- * - flexRow: dispone sulla stessa riga i controlli di navigazione.
- * - button: applica lo stile standard ai controlli precedente, riavvio e successivo.
- *
- * @return Procedura HTML a tre schede con indicatori e controlli di navigazione.
- */
--->
-
-<div pgs="stepTabs flexColumnElements">
-    <div pgs="stepTabs-dots" aria-label="Avanzamento"></div>
-
-    <div pgs="stepTabs-container">
-        <section pgs="tab flexColumnTexts" tabindex="-1" pgs-option="tabIcon[fa-user]">
-            <h3>Dati personali</h3>
-            <p>Contenuto del primo tab.</p>
-        </section>
-
-        <section pgs="tab flexColumnTexts" tabindex="-1" pgs-option="tabIcon[fa-list-check]">
-            <h3>Preferenze</h3>
-            <p>Contenuto del secondo tab.</p>
-        </section>
-
-        <section pgs="tab flexColumnTexts" tabindex="-1" pgs-option="tabIcon[fa-check]">
-            <h3>Conferma</h3>
-            <p>Contenuto del terzo tab.</p>
-        </section>
-    </div>
-
-    <div pgs="flexRow">
-        <button pgs="stepTabs-prev button" type="button">
-            <i class="fa-solid fa-arrow-left" aria-hidden="true"></i>
-            Indietro
-        </button>
-
-        <button pgs="stepTabs-restart button" type="button">
-            Ricomincia
-        </button>
-
-        <button pgs="stepTabs-next button" pgs-option="buttonReverse" type="button">
-            Avanti
-            <i class="fa-solid fa-arrow-right" aria-hidden="true"></i>
-        </button>
-    </div>
-</div>

package/templates/html/components/steps.html

@@ -1,49 +0,0 @@
-<!--
-/**
- * @title Steps
- * @description Elenco ordinato di passaggi che presenta numero, contenuto e linea di collegamento, aggiungendo a runtime gli elementi strutturali mancanti.
- *
- * @pgs
- * - steps: identifica la lista ordinata inizializzata dal modulo steps.
- * - steps-step: identifica ogni passaggio della sequenza.
- * - steps-step-circle: identifica l'indicatore numerico, creato automaticamente se assente.
- * - steps-step-content: identifica il contenuto testuale del passaggio.
- * - steps-step-line: identifica la linea di collegamento aggiunta dinamicamente a ogni passaggio.
- *
- * @api
- * - pgs.steps.init(root): inizializza le liste steps non ancora registrate dentro Document o Element indicato.
- * - pgs.steps.api(element): restituisce l'istanza associata a un root steps inizializzato.
- * - instance.steps(): restituisce un array con tutti gli elementi steps-step.
- * - instance.getStep(index): restituisce lo step corrispondente all'indice indicato.
- * - instance.getTotal(): restituisce il numero totale di step.
- * - instance.refresh(): reinizializza la lista, ricrea gli elementi mancanti e restituisce la nuova istanza.
- *
- * @return Lista ordinata HTML di passaggi numerati completata dal modulo JavaScript.
- */
--->
-
-<ol pgs="steps">
-    <li pgs="steps-step">
-        <span pgs="steps-step-circle">1</span>
-        <div pgs="steps-step-content">
-            <h3>Primo step</h3>
-            <p>Descrizione del primo passaggio.</p>
-        </div>
-    </li>
-
-    <li pgs="steps-step">
-        <span pgs="steps-step-circle">2</span>
-        <div pgs="steps-step-content">
-            <h3>Secondo step</h3>
-            <p>Descrizione del secondo passaggio.</p>
-        </div>
-    </li>
-
-    <li pgs="steps-step">
-        <span pgs="steps-step-circle">3</span>
-        <div pgs="steps-step-content">
-            <h3>Terzo step</h3>
-            <p>Descrizione del terzo passaggio.</p>
-        </div>
-    </li>
-</ol>

package/templates/html/components/summary.html

@@ -1,41 +0,0 @@
-<!--
-/**
- * @title Summary
- * @description Componente che limita inizialmente un testo lungo a tre righe e mostra il controllo di espansione solo quando il contenuto eccede tale altezza.
- *
- * @pgs
- * - summary: identifica il root inizializzato dal modulo summary.
- * - summary-content: identifica il contenuto misurato e ridimensionato.
- * - summary-button: identifica il controllo per mostrare più o meno contenuto.
- *
- * @pgs-state
- * - overflow: indica che il contenuto supera l'altezza contratta e richiede il controllo.
- * - open: indica che tutto il contenuto è espanso e visibile.
- *
- * @api
- * - pgs.summary.init(root): inizializza i summary non ancora registrati dentro Document o Element indicato.
- * - pgs.summary.api(element): restituisce l'istanza associata a un root summary inizializzato.
- * - instance.open(): espande il contenuto quando supera l'altezza contratta.
- * - instance.close(): richiude il contenuto alla dimensione prevista.
- * - instance.toggle(): inverte lo stato espanso o contratto.
- * - instance.refresh(): ricalcola overflow e altezza conservando lo stato corrente.
- * - instance.isOpen(): restituisce true quando il contenuto è espanso.
- *
- * @return Struttura HTML con contenuto espandibile e pulsante sincronizzato tramite ARIA.
- */
--->
-
-<div pgs="summary">
-    <div pgs="summary-content">
-        <p>
-            Questo testo dimostrativo e' abbastanza lungo da occupare piu righe e mostrare il comportamento del componente summary. Il contenuto puo includere testo, link e altri elementi inline senza richiedere markup aggiuntivo.
-        </p>
-        <p>
-            Quando il contenuto supera tre righe viene mostrato un pulsante per espandere o richiudere l'area visibile.
-        </p>
-    </div>
-
-    <button pgs="summary-button" type="button">
-        Mostra di più
-    </button>
-</div>

package/templates/html/components/tooltip.html

@@ -1,43 +0,0 @@
-<!--
-/**
- * @title Tooltip
- * @description Variante compatta del dropdown che mostra un breve pannello informativo controllato da un pulsante a icona.
- *
- * @pgs
- * - tooltip: identifica il root della variante tooltip.
- * - tooltip-button: identifica il controllo specifico del tooltip.
- * - tooltip-content: identifica il contenuto informativo del tooltip.
- *
- * @pgs-option
- * - position: può essere applicata al root condiviso con sintassi position[lato allineamento] per modificare la posizione ereditata dal dropdown.
- *
- * @pgs-state
- * - open: viene gestito dal modulo dropdown sul root per mostrare o nascondere il tooltip.
- *
- * @api
- * - pgs.dropdown.init(root): inizializza il tooltip perché il suo root condivide il token dropdown.
- * - pgs.dropdown.api(element): restituisce l'istanza dropdown associata al root del tooltip.
- * - instance.open(): apre il contenuto informativo.
- * - instance.close(): chiude il contenuto informativo.
- * - instance.toggle(): inverte la visibilità del tooltip.
- * - instance.refresh(): reinizializza il contesto e ricalcola il posizionamento.
- * - instance.isOpen(): restituisce true quando il tooltip è aperto.
- *
- * @related
- * - dropdown: fornisce apertura, chiusura e posizionamento del tooltip.
- * - dropdown-button: collega il pulsante al comportamento dropdown.
- * - dropdown-content: collega il pannello al comportamento dropdown.
- * - buttonMini: presenta il controllo come pulsante a icona di dimensione minima.
- *
- * @return Tooltip HTML composto tramite i token condivisi del dropdown.
- */
--->
-
-<span pgs="dropdown tooltip">
-    <button pgs="dropdown-button buttonMini tooltip-button" title="open-tooltip" type="button">
-        <i class="fa-solid fa-info"></i>
-    </button>
-    <div pgs="dropdown-content tooltip-content">
-        Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto hic, id consectetur facilis et, iste animi minima quidem praesentium omnis quod. Quidem provident ad cum aut reprehenderit laboriosam eum placeat.
-    </div>
-</span>

package/templates/html/layout/body.html

@@ -1,35 +0,0 @@
-<!--
-/**
- * @title Body
- * @description Documento HTML di base che abilita MyPGS, configura i metadati essenziali e applica al body le varianti condivise di sfondo, testo e titoli.
- *
- * @pgs
- * - htmlBase: applica le regole fondamentali all'elemento html.
- * - initP: abilita gli stili di layout, componenti e pattern racchiusi nel namespace MyPGS.
- * - bodyBase: applica struttura e spaziatura di base al body.
- * - bodyImg: abilita le regole condivise per le immagini contenute nella pagina.
- * - bodyText: abilita tipografia e spaziatura del testo.
- * - bodyHeading: abilita la gerarchia tipografica dei titoli.
- *
- * @pgs-state
- * - darkmode: viene applicato dinamicamente a html e body per attivare il tema scuro.
- *
- * @return Scheletro HTML completo necessario per inizializzare la libreria MyPGS.
- */
--->
-
-<!DOCTYPE html>
-<html lang="it-IT" pgs="htmlBase initP">
-
-<head>
-	<meta charset="UTF-8">
-	<meta name="viewport" content="width=device-width, initial-scale=1.0">
-
-	<!-- Colori Browsers -->
-	<meta name="theme-color" content="">
-	<meta name="apple-mobile-web-app-status-bar-color" content="">
-
-</head>
-
-<body pgs="bodyBase bodyImg bodyText bodyHeading" >
-