mypgs 2.0.0 → 2.1.0

package/docs/components/summary.md

@@ -1,49 +1,49 @@
-<!-- File generato automaticamente da templates/html/components/summary.html. Modificare templates/html/components/summary.html e rieseguire npm run docs:generate. -->
+<!-- Automatically generated from templates/html/components/summary.html. Edit templates/html/components/summary.html and run npm run docs:generate again. -->
 
 # Summary
 
-Componente che limita inizialmente un testo lungo a tre righe e mostra il controllo di espansione solo quando il contenuto eccede tale altezza.
+Summary markup, configuration, behavior, and usage example.
 
 ## 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.
+- `summary`: identifies the summary element used by Summary.
+- `summary-content`: identifies the summary-content element used by Summary.
+- `summary-button`: identifies the summary-button element used by Summary.
 
 ## PGS States
 
-- `overflow`: indica che il contenuto supera l'altezza contratta e richiede il controllo.
-- `open`: indica che tutto il contenuto è espanso e visibile.
+- `overflow`: identifies the overflow element used by Summary.
+- `open`: identifies the open element used by Summary.
 
-## API JavaScript
+## JavaScript 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.
+- `pgs.summary.init(root)`: initializes matching elements within the specified root.
+- `pgs.summary.api(element)`: returns the instance associated with the specified initialized element.
+- `instance.open()`: opens the component.
+- `instance.close()`: closes the component.
+- `instance.toggle()`: toggles the component state.
+- `instance.refresh()`: refreshes the component and returns its updated instance.
+- `instance.isOpen()`: returns true when the component is open.
 
 ## Output
 
-Struttura HTML con contenuto espandibile e pulsante sincronizzato tramite ARIA.
+Complete HTML markup and usage example for Summary.
 
-## Esempio
+## Example
 
 ```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.
+            This demonstration text is long enough to span multiple lines and show the summary component behavior. Content can include text, links, and other inline elements without requiring additional markup.
         </p>
         <p>
-            Quando il contenuto supera tre righe viene mostrato un pulsante per espandere o richiudere l'area visibile.
+            When content exceeds three lines, a button is shown to expand or collapse the visible area.
         </p>
     </div>
 
     <button pgs="summary-button" type="button">
-        Mostra di più
+        Show more
     </button>
 </div>
 ```

package/docs/components/table.md

@@ -1,25 +1,25 @@
-<!-- File generato automaticamente da templates/html/components/table.html. Modificare templates/html/components/table.html e rieseguire npm run docs:generate. -->
+<!-- Automatically generated from templates/html/components/table.html. Edit templates/html/components/table.html and run npm run docs:generate again. -->
 
 # Table
 
-Contenitore responsive per una tabella semantica con intestazioni e righe di dati coerenti con gli stili del design system.
+Responsive container for a semantic table with headers and data rows consistent with the design system styles.
 
 ## PGS
 
-- `table`: identifica il wrapper che gestisce presentazione e scorrimento della tabella nativa.
+- `table`: identifies the wrapper that manages presentation and scrolling for the native table.
 
 ## Output
 
-Tabella HTML completa racchiusa nel contenitore PGS dedicato.
+Complete HTML table wrapped in the dedicated PGS container.
 
-## Esempio
+## Example
 
 ```html
 <div pgs="table">
     <table>
         <thead>
             <tr>
-                <th>Nome</th>
+                <th>Name</th>
                 <th>Stato</th>
                 <th>Data</th>
             </tr>
@@ -28,7 +28,7 @@ Tabella HTML completa racchiusa nel contenitore PGS dedicato.
         <tbody>
             <tr>
                 <td>Elemento uno</td>
-                <td>Attivo</td>
+                <td>Active</td>
                 <td>2026-01-01</td>
             </tr>
             <tr>

package/docs/components/tooltip.md

@@ -1,45 +1,45 @@
-<!-- File generato automaticamente da templates/html/components/tooltip.html. Modificare templates/html/components/tooltip.html e rieseguire npm run docs:generate. -->
+<!-- Automatically generated from templates/html/components/tooltip.html. Edit templates/html/components/tooltip.html and run npm run docs:generate again. -->
 
 # Tooltip
 
-Variante compatta del dropdown che mostra un breve pannello informativo controllato da un pulsante a icona.
+Tooltip markup, configuration, behavior, and usage example.
 
 ## PGS
 
-- `tooltip`: identifica il root della variante tooltip.
-- `tooltip-button`: identifica il controllo specifico del tooltip.
-- `tooltip-content`: identifica il contenuto informativo del tooltip.
+- `tooltip`: identifies the tooltip element used by Tooltip.
+- `tooltip-button`: identifies the tooltip-button element used by Tooltip.
+- `tooltip-content`: identifies the tooltip-content element used by Tooltip.
 
 ## PGS Options
 
-- `position`: può essere applicata al root condiviso con sintassi position[lato allineamento] per modificare la posizione ereditata dal dropdown.
+- `position`: identifies the position element used by Tooltip.
 
 ## PGS States
 
-- `open`: viene gestito dal modulo dropdown sul root per mostrare o nascondere il tooltip.
+- `open`: identifies the open element used by Tooltip.
 
-## API JavaScript
+## JavaScript 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.
+- `pgs.dropdown.init(root)`: initializes matching elements within the specified root.
+- `pgs.dropdown.api(element)`: returns the instance associated with the specified initialized element.
+- `instance.open()`: opens the component.
+- `instance.close()`: closes the component.
+- `instance.toggle()`: toggles the component state.
+- `instance.refresh()`: refreshes the component and returns its updated instance.
+- `instance.isOpen()`: returns true when the component is open.
 
-## Elementi correlati
+## Related elements
 
-- `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.
+- `dropdown`: uses the related dropdown component or utility in this example.
+- `dropdown-button`: uses the related dropdown-button component or utility in this example.
+- `dropdown-content`: uses the related dropdown-content component or utility in this example.
+- `buttonMini`: uses the related buttonMini component or utility in this example.
 
 ## Output
 
-Tooltip HTML composto tramite i token condivisi del dropdown.
+Complete HTML markup and usage example for Tooltip.
 
-## Esempio
+## Example
 
 ```html
 <span pgs="dropdown tooltip">

package/docs/convenzioni.md

@@ -1,12 +1,12 @@
-# Convenzioni
+# Conventions
 
-- Usa `pgs` come prima scelta per markup, layout, componenti e comportamenti.
-- Mantieni coerenti i token tra template, SCSS e JS.
-- Usa `pgs-state` per stati runtime.
-- Usa `pgs-option` per opzioni dichiarative.
-- Preferisci custom properties e mixin a CSS hardcoded.
-- Non duplicare componenti gia' presenti nella libreria.
-- Non inventare API: verifica i sorgenti in `assets/javascript/`.
-- Mantieni in `mypgs` solo stili e comportamenti riutilizzabili.
-- Mantieni nel progetto finale le personalizzazioni specifiche del progetto.
-- Aggiorna `AGENTS.md` quando introduci pattern importanti.
+- Use `pgs` as the first choice for markup, layouts, components, and behaviors.
+- Keep tokens consistent across templates, SCSS, and JavaScript.
+- Use `pgs-state` for runtime states.
+- Use `pgs-option` for declarative options.
+- Prefer custom properties and mixins to hardcoded CSS.
+- Do not duplicate components that already exist in the library.
+- Do not invent APIs: verify the sources in `assets/javascript/`.
+- Keep only reusable styles and behaviors in `mypgs`.
+- Keep project-specific customizations in the consuming project.
+- Update `AGENTS.md` when introducing important patterns.

package/docs/export-e-sviluppo.md

@@ -36,7 +36,7 @@ Uso sorgente SCSS:
 
 ## Sviluppo
 
-Build una tantum:
+One-time build:
 
 ```bash
 npm run start
@@ -54,7 +54,7 @@ Creare un pacchetto locale:
 npm pack
 ```
 
-Flusso consigliato quando modifichi la libreria:
+Recommended workflow when modifying the library:
 
 1. modifica i sorgenti in `assets/`;
 2. aggiorna template o documentazione se cambia il modo d'uso;
@@ -67,7 +67,7 @@ Nota: se la build Webpack fallisce, non modificare manualmente `dist/javascript`
 
 ## Aggiungere un nuovo modulo
 
-Esempio componente:
+Component example:
 
 ```js
 export function PGS_myComponent_init(root = document) {

package/docs/helper-javascript.md

@@ -1,4 +1,4 @@
-# Helper JavaScript
+# JavaScript helper
 
 `pgs(root)` permette di cercare e modificare token PGS senza scrivere selettori manuali:
 
@@ -18,7 +18,7 @@ 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`:
+Manipulation available when `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.
@@ -55,14 +55,14 @@ pgs(modal).option.getValueBrackets("containerID");
 - `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:
+Example markup with options:
 
 ```html
 <div pgs="modal" pgs-option="containerID[modal-container]"></div>
 <div pgs="slides" pgs-option="singleScroll shadowDesktop"></div>
 ```
 
-## JavaScript inizializzato automaticamente
+## Automatically initialized JavaScript
 
 Importando `mypgs`, l'entrypoint inizializza:
 
@@ -118,7 +118,7 @@ pgs.dropdown.api(dropdownEl)?.close();
 pgs.slides.api(slidesEl)?.next();
 ```
 
-Shortcut disponibili dopo `import "mypgs"`:
+Shortcuts available after `import "mypgs"`:
 
 - `pgs.svg`
 - `pgs.accordion`
@@ -134,7 +134,7 @@ Shortcut disponibili dopo `import "mypgs"`:
 - `pgs.formValidate`
 - `pgs.scrollHorizontal`
 
-## Riferimento API per componente
+## Component API reference
 
 Le firme, i parametri e la funzione di ogni metodo sono generati dai commenti nei template:
 
@@ -160,7 +160,7 @@ I componenti non elencati non espongono attualmente un'API JavaScript specifica.
 - `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
+## Component module structure
 
 I componenti con istanze seguono questo schema:
 

package/docs/layout/body.md

@@ -1,27 +1,27 @@
-<!-- File generato automaticamente da templates/html/layout/body.html. Modificare templates/html/layout/body.html e rieseguire npm run docs:generate. -->
+<!-- Automatically generated from templates/html/layout/body.html. Edit templates/html/layout/body.html and run npm run docs:generate again. -->
 
 # Body
 
-Documento HTML di base che abilita MyPGS, configura i metadati essenziali e applica al body le varianti condivise di sfondo, testo e titoli.
+Base HTML document that enables MyPGS, configures essential metadata, and applies shared background, text, and heading variants to the body.
 
 ## 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.
+- `htmlBase`: applies the fundamental rules to the html element.
+- `initP`: enables layout, component, and pattern styles scoped to the MyPGS namespace.
+- `bodyBase`: applies the base structure and spacing to the body.
+- `bodyImg`: enables shared rules for images contained in the page.
+- `bodyText`: enables text typography and spacing.
+- `bodyHeading`: enables the typographic heading hierarchy.
 
 ## PGS States
 
-- `darkmode`: viene applicato dinamicamente a html e body per attivare il tema scuro.
+- `darkmode`: is applied dynamically to html and body to activate the dark theme.
 
 ## Output
 
-Scheletro HTML completo necessario per inizializzare la libreria MyPGS.
+Complete HTML skeleton required to initialize the MyPGS library.
 
-## Esempio
+## Example
 
 ```html
 <!DOCTYPE html>

package/docs/layout/flex.md

@@ -1,116 +1,116 @@
-<!-- File generato automaticamente da templates/html/layout/flex.html. Modificare templates/html/layout/flex.html e rieseguire npm run docs:generate. -->
+<!-- Automatically generated from templates/html/layout/flex.html. Edit templates/html/layout/flex.html and run npm run docs:generate again. -->
 
 # Flex
 
-Esempi di layout flex responsive che distribuiscono da due a sei elementi per riga adattando automaticamente la disposizione allo spazio disponibile.
+Flex markup, configuration, behavior, and usage example.
 
 ## PGS
 
-- `flex-2`: crea una distribuzione responsive fino a due elementi per riga.
-- `flex-3`: crea una distribuzione responsive fino a tre elementi per riga.
-- `flex-4`: crea una distribuzione responsive fino a quattro elementi per riga.
-- `flex-6`: crea una distribuzione responsive fino a sei elementi per riga.
+- `flex-2`: identifies the flex-2 element used by Flex.
+- `flex-3`: identifies the flex-3 element used by Flex.
+- `flex-4`: identifies the flex-4 element used by Flex.
+- `flex-6`: identifies the flex-6 element used by Flex.
 
-## Elementi correlati
+## Related elements
 
-- `container`: definisce il contesto contenitore dell'introduzione.
-- `flexColumnTexts`: organizza verticalmente e distanzia testi e contenuti delle card.
-- `card`: rende visibili le celle dimostrative del layout flex.
+- `container`: defines the container context for the introduction.
+- `flexColumnTexts`: vertically organizes and spaces card text and content.
+- `card`: makes the demonstration cells of the flex layout visible.
 
 ## Output
 
-Raccolta HTML dei layout flex responsive a due, tre, quattro e sei elementi.
+HTML collection of responsive flex layouts with two, three, four, and six items.
 
-## Esempio
+## Example
 
 ```html
 <div pgs="container flexColumnTexts">
-    <strong>Sezione standard</strong>
-    <p>Contenuto centrato dentro una sezione MyPGS.</p>
+    <strong>Standard section</strong>
+    <p>Centered content inside a MyPGS section.</p>
 </div>
 
 
 <div pgs="flex-2">
     <article pgs="card flexColumnTexts">
-        <strong>Colonna uno</strong>
-        <p>Contenuto della prima colonna.</p>
+        <strong>Column one</strong>
+        <p>First column content.</p>
     </article>
 
     <article pgs="card flexColumnTexts">
-        <strong>Colonna due</strong>
-        <p>Contenuto della seconda colonna.</p>
+        <strong>Column two</strong>
+        <p>Second column content.</p>
     </article>
 </div>
 
 
 <div pgs="flex-3">
     <article pgs="card flexColumnTexts">
-        <strong>Colonna uno</strong>
-        <p>Contenuto della prima colonna.</p>
+        <strong>Column one</strong>
+        <p>First column content.</p>
     </article>
 
     <article pgs="card flexColumnTexts">
-        <strong>Colonna due</strong>
-        <p>Contenuto della seconda colonna.</p>
+        <strong>Column two</strong>
+        <p>Second column content.</p>
     </article>
 
     <article pgs="card flexColumnTexts">
-        <strong>Colonna tre</strong>
-        <p>Contenuto della terza colonna.</p>
+        <strong>Column three</strong>
+        <p>Third column content.</p>
     </article>
 </div>
 
 
 <div pgs="flex-4">
     <article pgs="card flexColumnTexts">
-        <strong>Colonna uno</strong>
-        <p>Contenuto della prima colonna.</p>
+        <strong>Column one</strong>
+        <p>First column content.</p>
     </article>
 
     <article pgs="card flexColumnTexts">
-        <strong>Colonna due</strong>
-        <p>Contenuto della seconda colonna.</p>
+        <strong>Column two</strong>
+        <p>Second column content.</p>
     </article>
 
     <article pgs="card flexColumnTexts">
-        <strong>Colonna tre</strong>
-        <p>Contenuto della terza colonna.</p>
+        <strong>Column three</strong>
+        <p>Third column content.</p>
     </article>
     <article pgs="card flexColumnTexts">
-        <strong>Colonna quattro</strong>
-        <p>Contenuto della quarta colonna.</p>
+        <strong>Column four</strong>
+        <p>Fourth column content.</p>
     </article>
 </div>
 
 <div pgs="flex-6">
     <article pgs="card flexColumnTexts">
-        <strong>Colonna uno</strong>
-        <p>Contenuto della prima colonna.</p>
+        <strong>Column one</strong>
+        <p>First column content.</p>
     </article>
 
     <article pgs="card flexColumnTexts">
-        <strong>Colonna due</strong>
-        <p>Contenuto della seconda colonna.</p>
+        <strong>Column two</strong>
+        <p>Second column content.</p>
     </article>
 
     <article pgs="card flexColumnTexts">
-        <strong>Colonna tre</strong>
-        <p>Contenuto della terza colonna.</p>
+        <strong>Column three</strong>
+        <p>Third column content.</p>
     </article>
 
     <article pgs="card flexColumnTexts">
-        <strong>Colonna quattro</strong>
-        <p>Contenuto della quarta colonna.</p>
+        <strong>Column four</strong>
+        <p>Fourth column content.</p>
     </article>
 
     <article pgs="card flexColumnTexts">
-        <strong>Colonna cinque</strong>
-        <p>Contenuto della quinta colonna.</p>
+        <strong>Column five</strong>
+        <p>Fifth column content.</p>
     </article>
 
     <article pgs="card flexColumnTexts">
-        <strong>Colonna sei</strong>
-        <p>Contenuto della sesta colonna.</p>
+        <strong>Column six</strong>
+        <p>Sixth column content.</p>
     </article>
 </div
 ```

package/docs/layout/footer.md

@@ -1,39 +1,39 @@
-<!-- File generato automaticamente da templates/html/layout/footer.html. Modificare templates/html/layout/footer.html e rieseguire npm run docs:generate. -->
+<!-- Automatically generated from templates/html/layout/footer.html. Edit templates/html/layout/footer.html and run npm run docs:generate again. -->
 
 # Footer
 
-Piè di pagina completo con controllo tema, area di brand, navigazione, contenuti informativi e collegamento alle preferenze cookie.
+Complete footer with theme control, brand area, navigation, informational content, and a link to cookie preferences.
 
 ## PGS
 
-- `footer`: identifica il contenitore principale del piè di pagina.
-- `footer-top`: identifica la sezione superiore con brand e contenuti.
-- `footer-top-content`: identifica il layout interno responsive della sezione superiore.
-- `footer-brand`: identifica il gruppo dedicato al marchio.
-- `footer-brand-motto`: identifica il testo descrittivo associato al marchio.
-- `footer-content`: identifica una colonna informativa del footer.
-- `footer-legal`: identifica la sezione inferiore dedicata alle informazioni legali.
-- `footer-legal-content`: identifica il contenuto della sezione legale.
+- `footer`: identifies the main footer container.
+- `footer-top`: identifies the upper section containing the brand and content.
+- `footer-top-content`: identifies the responsive inner layout of the upper section.
+- `footer-brand`: identifies the group dedicated to the brand.
+- `footer-brand-motto`: identifies the descriptive text associated with the brand.
+- `footer-content`: identifies an informational footer column.
+- `footer-legal`: identifies the lower section dedicated to legal information.
+- `footer-legal-content`: identifies the content of the legal section.
 
-## Elementi correlati
+## Related elements
 
-- `button`: presenta i controlli del tema e delle preferenze cookie come pulsanti.
-- `toggleDarkmode`: collega il controllo al gestore globale del tema chiaro o scuro.
-- `section`: applica alle aree superiore e legale la struttura condivisa delle sezioni.
-- `flex-3`: distribuisce in modo responsive le colonne della parte superiore.
-- `logo`: inserisce il marchio nel footer.
-- `logo-text`: usa la variante testuale del logo.
-- `cookieConsent-actionOpen`: apre il pannello delle preferenze del pattern Cookie Consent.
+- `button`: presents theme and cookie preference controls as buttons.
+- `toggleDarkmode`: connects the control to the global light or dark theme handler.
+- `section`: applies the shared section structure to the upper and legal areas.
+- `flex-3`: distributes the upper columns responsively.
+- `logo`: inserts the brand into the footer.
+- `logo-text`: uses the text variant of the logo.
+- `cookieConsent-actionOpen`: opens the Cookie Consent preference panel.
 
 ## Output
 
-Struttura HTML completa del footer con brand, menu e area legale.
+Complete footer HTML structure with brand, menu, and legal area.
 
-## Esempio
+## Example
 
 ```html
 <footer pgs="footer">
-    <button pgs="button toggleDarkmode" type="button" aria-label="Cambia tema">
+    <button pgs="button toggleDarkmode" type="button" aria-label="Change theme">
         <i class="fa-solid fa-moon"></i>
     </button>
 
@@ -60,11 +60,11 @@ Struttura HTML completa del footer con brand, menu e area legale.
 
     <section pgs="footer-legal section">
         <div pgs="footer-legal-content">
-            <button type="button" pgs="button cookieConsent-actionOpen">Preferenze cookie</button>
+            <button type="button" pgs="button cookieConsent-actionOpen">Cookie preferences</button>
             <p><a href="">Privacy Policy</a></p>
             <p><a href="">Cookie Policy</a></p>
             <p><a href="">Termini e Condizioni</a></p>
-            <p>© 2026 MyPgs. Nessun diritto riservato.</p>
+            <p>© 2026 MyPgs. No rights reserved.</p>
         </div>
     </section>
 </footer>