mypgs 2.0.0 → 3.0.0

package/docs/components/slides.md

@@ -1,52 +1,51 @@
-<!-- File generato automaticamente da templates/html/components/slides.html. Modificare templates/html/components/slides.html e rieseguire npm run docs:generate. -->
+<!-- Automatically generated from reference/html/components/slides.html. Edit reference/html/components/slides.html and run npm run docs:generate again. -->
 
 # Slides
 
-Carosello orizzontale che osserva gli elementi visibili e crea automaticamente controlli precedente, successivo e indicatori di posizione.
+Slides markup, configuration, behavior, and usage example.
 
 ## 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.
+- `slides`: identifies the slides element used by Slides.
+- `slides-container`: identifies the slides-container element used by Slides.
+- `slides-prec`: identifies the slides-prec element used by Slides.
+- `slides-next`: identifies the slides-next element used by Slides.
+- `slides-dots`: identifies the slides-dots element used by Slides.
 
 ## 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.
+- `singleScroll`: identifies the singleScroll element used by Slides.
+- `shadowDesktop`: identifies the shadowDesktop element used by Slides.
+- `notScrollAnimation`: identifies the notScrollAnimation element used by Slides.
+- `notScrollWithMouse`: identifies the notScrollWithMouse element used by Slides.
+- `buttonIcon`: styles the previous and next actions generated at runtime.
+
+## JavaScript API
+
+- `pgs.slides.init(root)`: initializes matching elements within the specified root.
+- `pgs.slides.api(element)`: returns the instance associated with the specified initialized element.
+- `instance.previous()`: moves to the previous item.
+- `instance.next()`: moves to the next item.
+- `instance.goTo(index)`: provides the documented operation through the component public API.
+- `instance.getCurrentIndexes()`: provides the documented operation through the component public API.
+- `instance.getCurrentElements()`: provides the documented operation through the component public API.
+- `instance.getTotal()`: returns the total number of items.
+- `instance.isAtStart()`: provides the documented operation through the component public API.
+- `instance.isAtEnd()`: provides the documented operation through the component public API.
+- `instance.refresh()`: refreshes the component and returns its updated instance.
+
+## Related elements
+
+- `card`: uses the related card component or utility in this example.
+- `card-img`: uses the related card-img component or utility in this example.
+- `imgCover`: uses the related imgCover component or utility in this example.
+- `flexColumn`: uses the related flexColumn component or utility in this example.
 
 ## Output
 
-Lista di slide basate su card, completata a runtime con pulsanti e indicatori.
+Complete HTML markup and usage example for Slides.
 
-## Esempio
+## Example
 
 ```html
 <div pgs="slides" pgs-option="singleScroll shadowDesktop">
@@ -54,9 +53,9 @@ Lista di slide basate su card, completata a runtime con pulsanti e indicatori.
         <li>
             <article pgs="card flexColumn">
                 <img pgs="card-img imgCover" src="https://placehold.co/800x500?text=Slide+1" alt="Slide 1">
-                <div pgs="flexColumnTexts">
+                <div pgs="flexColumn">
                     <h3>Slide uno</h3>
-                    <p>Contenuto della prima slide.</p>
+                    <p>First slide content.</p>
                 </div>
             </article>
         </li>
@@ -64,9 +63,9 @@ Lista di slide basate su card, completata a runtime con pulsanti e indicatori.
         <li>
             <article pgs="card flexColumn">
                 <img pgs="card-img imgCover" src="https://placehold.co/800x500?text=Slide+2" alt="Slide 2">
-                <div pgs="flexColumnTexts">
+                <div pgs="flexColumn">
                     <h3>Slide due</h3>
-                    <p>Contenuto della seconda slide.</p>
+                    <p>Second slide content.</p>
                 </div>
             </article>
         </li>
@@ -74,9 +73,9 @@ Lista di slide basate su card, completata a runtime con pulsanti e indicatori.
         <li>
             <article pgs="card flexColumn">
                 <img pgs="card-img imgCover" src="https://placehold.co/800x500?text=Slide+3" alt="Slide 3">
-                <div pgs="flexColumnTexts">
+                <div pgs="flexColumn">
                     <h3>Slide tre</h3>
-                    <p>Contenuto della terza slide.</p>
+                    <p>Third slide content.</p>
                 </div>
             </article>
         </li>

package/docs/components/stepTabs.md

@@ -1,83 +1,83 @@
-<!-- File generato automaticamente da templates/html/components/stepTabs.html. Modificare templates/html/components/stepTabs.html e rieseguire npm run docs:generate. -->
+<!-- Automatically generated from reference/html/components/stepTabs.html. Edit reference/html/components/stepTabs.html and run npm run docs:generate again. -->
 
 # Step Tabs
 
-Procedura guidata a schede con avanzamento sequenziale, indicatori generati, controlli di navigazione e possibilità di bloccare uno step.
+Step Tabs markup, configuration, behavior, and usage example.
 
 ## 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.
+- `stepTabs`: identifies the stepTabs element used by Step Tabs.
+- `stepTabs-dots`: identifies the stepTabs-dots element used by Step Tabs.
+- `stepTabs-dots-dot`: identifies the stepTabs-dots-dot element used by Step Tabs.
+- `stepTabs-container`: identifies the stepTabs-container element used by Step Tabs.
+- `tab`: identifies the tab element used by Step Tabs.
+- `stepTabs-prev`: identifies the stepTabs-prev element used by Step Tabs.
+- `stepTabs-restart`: identifies the stepTabs-restart element used by Step Tabs.
+- `stepTabs-next`: identifies the stepTabs-next element used by Step Tabs.
 
 ## 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.
+- `tabIcon`: identifies the tabIcon element used by Step Tabs.
+- `step`: identifies the step element used by Step Tabs.
+- `buttonReverse`: identifies the buttonReverse element used by Step Tabs.
 
 ## 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.
+- `is-active`: identifies the is-active element used by Step Tabs.
+- `is-completed`: identifies the is-completed element used by Step Tabs.
+- `is-locked`: identifies the is-locked element used by Step Tabs.
 
-## API JavaScript
+## JavaScript 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.
+- `pgs.stepTabs.init(root)`: initializes matching elements within the specified root.
+- `pgs.stepTabs.api(element)`: returns the instance associated with the specified initialized element.
 - `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.
+- `instance.goTo(index, scroll)`: provides the documented operation through the component public API.
+- `instance.next()`: moves to the next item.
+- `instance.prev()`: moves to the previous item.
+- `instance.toggleLock(index, lock)`: provides the documented operation through the component public API.
+- `instance.refresh()`: refreshes the component and returns its updated instance.
+- `instance.getCurrent()`: provides the documented operation through the component public API.
+- `instance.getState()`: provides the documented operation through the component public API.
 
-## Elementi correlati
+## Related elements
 
-- `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.
+- `flexColumn`: uses the related flexColumn component or utility in this example.
+- `gapElements`: applies element spacing to the step tab container.
+- `flexRow`: uses the related flexRow component or utility in this example.
+- `button`: uses the related button component or utility in this example.
 
 ## Output
 
-Procedura HTML a tre schede con indicatori e controlli di navigazione.
+Complete HTML markup and usage example for Step Tabs.
 
-## Esempio
+## Example
 
 ```html
-<div pgs="stepTabs flexColumnElements">
+<div pgs="stepTabs flexColumn gapElements">
     <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 pgs="tab flexColumn" tabindex="-1" pgs-option="tabIcon[fa-user]">
+            <h3>Personal details</h3>
+            <p>First tab content.</p>
         </section>
 
-        <section pgs="tab flexColumnTexts" tabindex="-1" pgs-option="tabIcon[fa-list-check]">
-            <h3>Preferenze</h3>
-            <p>Contenuto del secondo tab.</p>
+        <section pgs="tab flexColumn" tabindex="-1" pgs-option="tabIcon[fa-list-check]">
+            <h3>Preferences</h3>
+            <p>Second tab content.</p>
         </section>
 
-        <section pgs="tab flexColumnTexts" tabindex="-1" pgs-option="tabIcon[fa-check]">
-            <h3>Conferma</h3>
-            <p>Contenuto del terzo tab.</p>
+        <section pgs="tab flexColumn" tabindex="-1" pgs-option="tabIcon[fa-check]">
+            <h3>Confirmation</h3>
+            <p>Third tab content.</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
+            Back
         </button>
 
         <button pgs="stepTabs-restart button" type="button">
@@ -85,7 +85,7 @@ Procedura HTML a tre schede con indicatori e controlli di navigazione.
         </button>
 
         <button pgs="stepTabs-next button" pgs-option="buttonReverse" type="button">
-            Avanti
+            Next
             <i class="fa-solid fa-arrow-right" aria-hidden="true"></i>
         </button>
     </div>

package/docs/components/steps.md

@@ -1,31 +1,31 @@
-<!-- File generato automaticamente da templates/html/components/steps.html. Modificare templates/html/components/steps.html e rieseguire npm run docs:generate. -->
+<!-- Automatically generated from reference/html/components/steps.html. Edit reference/html/components/steps.html and run npm run docs:generate again. -->
 
 # Steps
 
-Elenco ordinato di passaggi che presenta numero, contenuto e linea di collegamento, aggiungendo a runtime gli elementi strutturali mancanti.
+Ordered list of steps showing a number, content, and connecting line, with missing structural elements added at runtime.
 
 ## 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.
+- `steps`: identifies the ordered list initialized by the steps module.
+- `steps-step`: identifies each step in the sequence.
+- `steps-step-circle`: identifies the numeric indicator, which is created automatically when missing.
+- `steps-step-content`: identifies the text content of the step.
+- `steps-step-line`: identifies the connecting line dynamically added to each step.
 
-## API JavaScript
+## JavaScript 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.
+- `pgs.steps.init(root)`: initializes unregistered step lists within the specified Document or Element.
+- `pgs.steps.api(element)`: returns the instance associated with an initialized steps root.
+- `instance.steps()`: returns an array containing every steps-step element.
+- `instance.getStep(index)`: returns the step at the specified index.
+- `instance.getTotal()`: returns the total number of steps.
+- `instance.refresh()`: reinitializes the list, recreates missing elements, and returns the new instance.
 
 ## Output
 
-Lista ordinata HTML di passaggi numerati completata dal modulo JavaScript.
+Ordered HTML list of numbered steps completed by the JavaScript module.
 
-## Esempio
+## Example
 
 ```html
 <ol pgs="steps">

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 reference/html/components/summary.html. Edit reference/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 reference/html/components/table.html. Edit reference/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,49 +1,50 @@
-<!-- File generato automaticamente da templates/html/components/tooltip.html. Modificare templates/html/components/tooltip.html e rieseguire npm run docs:generate. -->
+<!-- Automatically generated from reference/html/components/tooltip.html. Edit reference/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.
+- `buttonMini`: applies the smallest button variant to the tooltip trigger.
 
 ## 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.
+- `button`: provides the base styling for the tooltip trigger.
+- `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.
 
 ## 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">
-    <button pgs="dropdown-button buttonMini tooltip-button" title="open-tooltip" type="button">
+    <button pgs="dropdown-button button tooltip-button" pgs-option="buttonMini" title="open-tooltip" type="button">
         <i class="fa-solid fa-info"></i>
     </button>
     <div pgs="dropdown-content tooltip-content">

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 references, 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,10 +54,10 @@ 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;
+2. aggiorna i riferimenti o la documentazione se cambia il modo d'uso;
 3. ricompila con `npm run start`;
 4. verifica `dist/`;
 5. crea il pacchetto con `npm pack`;
@@ -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) {