mypgs 1.6.0 → 2.0.0

package/docs/components/search.md

@@ -0,0 +1,117 @@
+<!-- File generato automaticamente da templates/html/components/search.html. Modificare templates/html/components/search.html e rieseguire npm run docs:generate. -->
+
+# Search
+
+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 Options
+
+- `containerPGS`: sul wrapper modal usa containerPGS[header] per spostare il dialog nell'header.
+
+## PGS States
+
+- `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 JavaScript
+
+- `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.
+
+## Elementi correlati
+
+- `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.
+
+## Output
+
+Form di ricerca autonomo, variante mobile integrata in una modal e script di esempio con sorgente locale.
+
+## Esempio
+
+```html
+<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/docs/components/slides.md

@@ -0,0 +1,85 @@
+<!-- File generato automaticamente da templates/html/components/slides.html. Modificare templates/html/components/slides.html e rieseguire npm run docs:generate. -->
+
+# Slides
+
+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 Options
+
+- `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 JavaScript
+
+- `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.
+
+## Elementi correlati
+
+- `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.
+
+## Output
+
+Lista di slide basate su card, completata a runtime con pulsanti e indicatori.
+
+## Esempio
+
+```html
+<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/docs/components/stepTabs.md

@@ -0,0 +1,93 @@
+<!-- File generato automaticamente da templates/html/components/stepTabs.html. Modificare templates/html/components/stepTabs.html e rieseguire npm run docs:generate. -->
+
+# Step Tabs
+
+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 Options
+
+- `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 States
+
+- `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 JavaScript
+
+- `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.
+
+## Elementi correlati
+
+- `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.
+
+## Output
+
+Procedura HTML a tre schede con indicatori e controlli di navigazione.
+
+## Esempio
+
+```html
+<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/docs/components/steps.md

@@ -0,0 +1,56 @@
+<!-- File generato automaticamente da templates/html/components/steps.html. Modificare templates/html/components/steps.html e rieseguire npm run docs:generate. -->
+
+# Steps
+
+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 JavaScript
+
+- `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.
+
+## Output
+
+Lista ordinata HTML di passaggi numerati completata dal modulo JavaScript.
+
+## Esempio
+
+```html
+<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/docs/components/summary.md

@@ -0,0 +1,49 @@
+<!-- File generato automaticamente da templates/html/components/summary.html. Modificare templates/html/components/summary.html e rieseguire npm run docs:generate. -->
+
+# Summary
+
+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 States
+
+- `overflow`: indica che il contenuto supera l'altezza contratta e richiede il controllo.
+- `open`: indica che tutto il contenuto è espanso e visibile.
+
+## API JavaScript
+
+- `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.
+
+## Output
+
+Struttura HTML con contenuto espandibile e pulsante sincronizzato tramite ARIA.
+
+## Esempio
+
+```html
+<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/docs/components/table.md

@@ -0,0 +1,42 @@
+<!-- File generato automaticamente da templates/html/components/table.html. Modificare templates/html/components/table.html e rieseguire npm run docs:generate. -->
+
+# Table
+
+Contenitore responsive per una tabella semantica con intestazioni e righe di dati coerenti con gli stili del design system.
+
+## PGS
+
+- `table`: identifica il wrapper che gestisce presentazione e scorrimento della tabella nativa.
+
+## Output
+
+Tabella HTML completa racchiusa nel contenitore PGS dedicato.
+
+## Esempio
+
+```html
+<div pgs="table">
+    <table>
+        <thead>
+            <tr>
+                <th>Nome</th>
+                <th>Stato</th>
+                <th>Data</th>
+            </tr>
+        </thead>
+
+        <tbody>
+            <tr>
+                <td>Elemento uno</td>
+                <td>Attivo</td>
+                <td>2026-01-01</td>
+            </tr>
+            <tr>
+                <td>Elemento due</td>
+                <td>Bozza</td>
+                <td>2026-02-01</td>
+            </tr>
+        </tbody>
+    </table>
+</div>
+```

package/docs/components/tooltip.md

@@ -0,0 +1,53 @@
+<!-- File generato automaticamente da templates/html/components/tooltip.html. Modificare templates/html/components/tooltip.html e rieseguire npm run docs:generate. -->
+
+# Tooltip
+
+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 Options
+
+- `position`: può essere applicata al root condiviso con sintassi position[lato allineamento] per modificare la posizione ereditata dal dropdown.
+
+## PGS States
+
+- `open`: viene gestito dal modulo dropdown sul root per mostrare o nascondere il tooltip.
+
+## API JavaScript
+
+- `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.
+
+## Elementi correlati
+
+- `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.
+
+## Output
+
+Tooltip HTML composto tramite i token condivisi del dropdown.
+
+## Esempio
+
+```html
+<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/docs/helper-javascript.md

@@ -11,6 +11,21 @@ pgs(modal).remove("custom-token");
 pgs(modal).toggle("custom-token", true);
 ```
 
+## API dell'helper `pgs`
+
+Ricerca disponibile su `Document` ed `Element`:
+
+- `pgs(root).querySelector(token)`: restituisce il primo discendente che contiene il token `pgs` richiesto.
+- `pgs(root).querySelectorAll(token)`: restituisce tutti i discendenti corrispondenti; accetta anche un array o token separati da virgola.
+
+Manipolazione disponibile quando `root` è un `Element`:
+
+- `pgs(element).add(...tokens)`: aggiunge token evitando duplicati e restituisce l'helper.
+- `pgs(element).remove(...tokens)`: rimuove i token indicati e restituisce l'helper.
+- `pgs(element).toggle(token, force)`: inverte o forza la presenza del token e restituisce lo stato risultante.
+- `pgs(element).contains(token)`: verifica la presenza esatta del token.
+- `pgs(element).value`: legge o sostituisce il valore completo dell'attributo `pgs`.
+
 Stati runtime:
 
 ```js
@@ -19,6 +34,12 @@ pgs(modal).state.toggle("open", false);
 pgs(modal).state.contains("open");
 ```
 
+- `state.add(...states)` oppure `state(...states)`: aggiunge uno o più stati.
+- `state.remove(...states)`: rimuove gli stati indicati.
+- `state.toggle(state, force)`: inverte o forza uno stato e restituisce il risultato.
+- `state.contains(state)`: verifica se lo stato è presente.
+- `state.value`: legge o sostituisce l'intero attributo `pgs-state`.
+
 Opzioni:
 
 ```js
@@ -26,6 +47,14 @@ pgs(modal).option.contains("history");
 pgs(modal).option.getValueBrackets("containerID");
 ```
 
+- `option.add(...options)`: aggiunge opzioni semplici o parametrizzate.
+- `option.remove(...keys)`: rimuove le opzioni usando la relativa chiave.
+- `option.toggle(option, force)`: inverte o forza un'opzione.
+- `option.contains(key)`: verifica la presenza di una chiave anche quando possiede un payload.
+- `option.getValueBrackets(key)`: restituisce il contenuto tra parentesi quadre oppure `undefined`.
+- `option.setValueBrackets(key, value)`: imposta o sostituisce una singola opzione parametrizzata.
+- `option.value`: legge o sostituisce l'intero attributo `pgs-option`.
+
 Esempio markup con opzioni:
 
 ```html
@@ -64,6 +93,7 @@ Serve per usare i moduli direttamente da `pgs`:
 
 ```js
 pgs.registerModules({
+  svg: PGS_svg,
   accordion: PGS_accordion,
   dropdown: PGS_dropdown,
   menu: PGS_menu,
@@ -73,6 +103,7 @@ pgs.registerModules({
   slides: PGS_slides,
   stepTabs: PGS_stepTabs,
   steps: PGS_steps,
+  summary: PGS_summary,
   formValidate: PGS_formValidate,
   scrollHorizontal: PGS_scrollHorizontal,
 });
@@ -89,6 +120,7 @@ pgs.slides.api(slidesEl)?.next();
 
 Shortcut disponibili dopo `import "mypgs"`:
 
+- `pgs.svg`
 - `pgs.accordion`
 - `pgs.dropdown`
 - `pgs.menu`
@@ -98,9 +130,36 @@ Shortcut disponibili dopo `import "mypgs"`:
 - `pgs.slides`
 - `pgs.stepTabs`
 - `pgs.steps`
+- `pgs.summary`
 - `pgs.formValidate`
 - `pgs.scrollHorizontal`
 
+## Riferimento API per componente
+
+Le firme, i parametri e la funzione di ogni metodo sono generati dai commenti nei template:
+
+- [Accordion](components/accordion.md#api-javascript)
+- [Dropdown](components/dropdown.md#api-javascript)
+- [Form validation](components/form.md#api-javascript)
+- [Menu](components/menu.md#api-javascript)
+- [Modal](components/modal.md#api-javascript)
+- [Notification](components/notification.md#api-javascript)
+- [Search](components/search.md#api-javascript)
+- [Slides](components/slides.md#api-javascript)
+- [Step Tabs](components/stepTabs.md#api-javascript)
+- [Steps](components/steps.md#api-javascript)
+- [Summary](components/summary.md#api-javascript)
+- [Tooltip tramite Dropdown](components/tooltip.md#api-javascript)
+
+I componenti non elencati non espongono attualmente un'API JavaScript specifica.
+
+## Utility JavaScript pubbliche
+
+- `pgs.scrollHorizontal(element, speed)`: converte lo scroll verticale della rotella in scorrimento orizzontale quando il contenitore può ancora muoversi nella direzione richiesta e restituisce una funzione che rimuove il listener.
+- `pgs.svg.applyColorsSVG(isDarkMode)`: aggiorna i colori degli SVG caricati tramite `object` e marcati con `svgChangeColor`.
+- `pgs.svg.applyColorsLottie(isDarkMode)`: aggiorna i colori degli SVG interni ai player Lottie marcati con `lottieChangeColor`.
+- `pgs.svg.eventChangeColor`: contiene il nome dell'evento `pgs:svg:changeColor` ascoltato dal modulo SVG.
+
 ## Struttura dei moduli componente
 
 I componenti con istanze seguono questo schema:
@@ -112,16 +171,22 @@ export const PGS_modal = {
 };
 ```
 
-- `PGS_name`: nome ufficiale del modulo per il registro legacy.
-- `init`: inizializza o reinizializza markup, utile dopo contenuti dinamici.
+Le funzioni `PGS_modal_init` e `PGS_modal_api` restano interne al modulo: l'unico export del file è `PGS_modal`. Lo stesso criterio vale per gli altri componenti.
+
+- `init`: inizializza o reinizializza il markup nel `Document` o `Element` ricevuto; senza argomenti usa `document`.
 - `api`: recupera l'API di una singola istanza gia' inizializzata.
 
 Esempio:
 
 ```js
 pgs.modal.init();
-pgs.modal.init(container);
 pgs.modal.api(modalEl)?.open();
 ```
 
 `PGS_notification` e' un caso diverso: funziona piu' come service/helper e espone `alert`, `toast` e `trigger`.
+
+## Registro ed estensione
+
+- `pgs.registerModules(modules)`: espone un oggetto di moduli direttamente come proprietà di `pgs` e impedisce sovrascritture incompatibili.
+- `pgs.registerImport(...modules)`: registra moduli nel registro nominato usato dalle integrazioni avanzate.
+- `pgs.import(...names)`: recupera dal registro i moduli richiesti e genera un errore per i nomi non registrati.

package/docs/layout/body.md

@@ -0,0 +1,41 @@
+<!-- File generato automaticamente da templates/html/layout/body.html. Modificare templates/html/layout/body.html e rieseguire npm run docs:generate. -->
+
+# Body
+
+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 States
+
+- `darkmode`: viene applicato dinamicamente a html e body per attivare il tema scuro.
+
+## Output
+
+Scheletro HTML completo necessario per inizializzare la libreria MyPGS.
+
+## Esempio
+
+```html
+<!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" >
+```