mypgs 2.0.0 → 2.1.0

package/docs/components/notification.md

@@ -1,61 +1,61 @@
-<!-- File generato automaticamente da templates/html/components/notification.html. Modificare templates/html/components/notification.html e rieseguire npm run docs:generate. -->
+<!-- Automatically generated from templates/html/components/notification.html. Edit templates/html/components/notification.html and run npm run docs:generate again. -->
 
 # Notification
 
-Sistema di notifiche persistenti o toast temporanei, generati dall'API oppure da una configurazione JSON dichiarativa contenuta nell'opzione notification.
+Notification markup, configuration, behavior, and usage example.
 
 ## 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.
+- `notification`: identifies the notification element used by Notification.
+- `notificationTrigger`: identifies the notificationTrigger element used by Notification.
+- `notification-element`: identifies the notification-element element used by Notification.
+- `notification-element-title`: identifies the notification-element-title element used by Notification.
+- `notification-element-content`: identifies the notification-element-content element used by Notification.
 
 ## PGS Options
 
-- `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[{...}].
+- `toast`: identifies the toast element used by Notification.
+- `notification`: identifies the notification element used by Notification.
 
 ## PGS States
 
-- `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.
+- `success`: identifies the success element used by Notification.
+- `error`: identifies the error element used by Notification.
+- `warning`: identifies the warning element used by Notification.
+- `info`: identifies the info element used by Notification.
 
-## API JavaScript
+## JavaScript 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.
+- `pgs.notification.trigger(root)`: provides the documented operation through the component public API.
+- `pgs.notification.alert.error(text, link, timeout, icon)`: provides the documented operation through the component public API.
+- `pgs.notification.alert.success(text, link, timeout, icon)`: provides the documented operation through the component public API.
+- `pgs.notification.alert.info(text, link, timeout, icon)`: provides the documented operation through the component public API.
+- `pgs.notification.alert.warning(text, link, timeout, icon)`: provides the documented operation through the component public API.
+- `pgs.notification.alert.deleteAll()`: provides the documented operation through the component public API.
+- `pgs.notification.toast.error(text, timeout, icon)`: provides the documented operation through the component public API.
+- `pgs.notification.toast.success(text, timeout, icon)`: provides the documented operation through the component public API.
+- `pgs.notification.toast.info(text, timeout, icon)`: provides the documented operation through the component public API.
+- `pgs.notification.toast.warning(text, timeout, icon)`: provides the documented operation through the component public API.
+- `pgs.notification.toast.deleteAll()`: provides the documented operation through the component public API.
 
-## Elementi correlati
+## Related elements
 
-- `hidden`: nasconde i trigger dichiarativi prima che vengano elaborati.
-- `buttonClose`: identifica il pulsante di rimozione aggiunto a ogni messaggio.
+- `hidden`: uses the related hidden component or utility in this example.
+- `buttonClose`: uses the related buttonClose component or utility in this example.
 
 ## Output
 
-Due contenitori notification, uno persistente e uno configurato con l'opzione toast, con trigger dichiarativi configurati tramite pgs-option.
+Complete HTML markup and usage example for Notification.
 
-## Esempio
+## Example
 
 ```html
 <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",
+            "title": "Title",
+            "message": "Message",
             "element": "notification",
             "type": "info",
             "icon": null,
@@ -65,7 +65,7 @@ Due contenitori notification, uno persistente e uno configurato con l'opzione to
 
 <div pgs="hidden notificationTrigger" pgs-option='notification[{
             "title": "Benvenuto",
-            "message": "Messaggio",
+            "message": "Message",
             "element": "toast",
             "type": "info",
             "icon": null,
@@ -75,7 +75,7 @@ Due contenitori notification, uno persistente e uno configurato con l'opzione to
 <!-- 
     <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/"}]'>
+        pgs-option='notification[{"title":"Title","message":"Message","element":"notification","type":"info","icon":"<i class=\"fa-solid fa-rocket\"></i>","duration":"4000","link":"/page/"}]'>
     </div>
 -->
 ```

package/docs/components/search.md

@@ -1,73 +1,73 @@
-<!-- File generato automaticamente da templates/html/components/search.html. Modificare templates/html/components/search.html e rieseguire npm run docs:generate. -->
+<!-- Automatically generated from templates/html/components/search.html. Edit templates/html/components/search.html and run npm run docs:generate again. -->
 
 # Search
 
-Ricerca componibile con suggerimenti asincroni o locali, navigazione da tastiera, selezione, annullamento richieste e attributi ARIA gestiti dal modulo search.
+Search markup, configuration, behavior, and usage example.
 
 ## 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.
+- `search`: identifies the search element used by Search.
+- `search-suggestions`: identifies the search-suggestions element used by Search.
+- `search-suggestions-item`: identifies the search-suggestions-item element used by Search.
+- `search-modal`: identifies the search-modal element used by Search.
+- `search-mobile`: identifies the search-mobile element used by Search.
 
 ## PGS Options
 
-- `containerPGS`: sul wrapper modal usa containerPGS[header] per spostare il dialog nell'header.
+- `containerPGS`: identifies the containerPGS element used by Search.
 
 ## 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.
+- `open`: identifies the open element used by Search.
+- `loading`: identifies the loading element used by Search.
+- `error`: identifies the error element used by Search.
+- `selected`: identifies the selected element used by Search.
+
+## JavaScript API
+
+- `pgs.search.init(root)`: initializes matching elements within the specified root.
+- `pgs.search.api(element)`: returns the instance associated with the specified initialized element.
+- `instance.configure(options)`: provides the documented operation through the component public API.
+- `instance.setSource(source)`: provides the documented operation through the component public API.
+- `instance.search(query)`: provides the documented operation through the component public API.
+- `instance.open()`: opens the component.
+- `instance.close()`: closes the component.
+- `instance.clear()`: provides the documented operation through the component public API.
 - `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.
+- `instance.select(index, submit)`: provides the documented operation through the component public API.
+- `instance.refresh()`: refreshes the component and returns its updated instance.
+- `instance.destroy()`: removes listeners and releases the component instance.
+- `instance.items()`: provides the documented operation through the component public API.
+- `instance.isOpen()`: returns true when the component is open.
+- `instance.isLoading()`: returns true while the component is loading.
+- `instance.setActiveIndex(index)`: provides the documented operation through the component public API.
+
+## Related elements
+
+- `buttonNohover`: uses the related buttonNohover component or utility in this example.
+- `modal`: uses the related modal component or utility in this example.
+- `modal-button`: uses the related modal-button component or utility in this example.
+- `modal-close`: uses the related modal-close component or utility in this example.
+- `buttonIcon`: uses the related buttonIcon component or utility in this example.
+- `flexRow`: uses the related flexRow component or utility in this example.
+- `section`: uses the related section component or utility in this example.
 
 ## Output
 
-Form di ricerca autonomo, variante mobile integrata in una modal e script di esempio con sorgente locale.
+Complete HTML markup and usage example for Search.
 
-## Esempio
+## Example
 
 ```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="">
+    <button type="submit" title="Search"><i class="fa-solid fa-search"></i></button>
+    <input type="search" name="s" placeholder="Search" 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">
+    <button type="button" pgs="modal-button buttonIcon" title="Search">
         <i class="fa-solid fa-search"></i>
     </button>
 
@@ -75,17 +75,18 @@ Form di ricerca autonomo, variante mobile integrata in una modal e script di ese
         <div pgs="flexRow section search-mobile">
 
             <form pgs="buttonNohover search" autocomplete="off" action="/" method="get">
-                <button type="submit" title="Cerca">
+                <button type="submit" title="Search">
                     <i class="fa-solid fa-search"></i>
                 </button>
 
-                <input type="search" name="s" placeholder="Cerca" value="">
+                <input type="search" name="s" placeholder="Search" value="">
                 <ul pgs="search-suggestions"></ul>
+
+                <button type="button" pgs="modal-close buttonIcon">
+                    <i class="fa-solid fa-close"></i>
+                </button>
             </form>
 
-            <button type="button" pgs="modal-close buttonIcon">
-                <i class="fa-solid fa-close"></i>
-            </button>
 
         </div>
     </dialog>

package/docs/components/slides.md

@@ -1,52 +1,52 @@
-<!-- File generato automaticamente da templates/html/components/slides.html. Modificare templates/html/components/slides.html e rieseguire npm run docs:generate. -->
+<!-- Automatically generated from templates/html/components/slides.html. Edit templates/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.
+
+## 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.
+- `flexColumnTexts`: uses the related flexColumnTexts component or utility in this example.
+- `buttonIcon`: uses the related buttonIcon 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">
@@ -56,7 +56,7 @@ Lista di slide basate su card, completata a runtime con pulsanti e indicatori.
                 <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>
+                    <p>First slide content.</p>
                 </div>
             </article>
         </li>
@@ -66,7 +66,7 @@ Lista di slide basate su card, completata a runtime con pulsanti e indicatori.
                 <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>
+                    <p>Second slide content.</p>
                 </div>
             </article>
         </li>
@@ -76,7 +76,7 @@ Lista di slide basate su card, completata a runtime con pulsanti e indicatori.
                 <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>
+                    <p>Third slide content.</p>
                 </div>
             </article>
         </li>

package/docs/components/stepTabs.md

@@ -1,57 +1,57 @@
-<!-- File generato automaticamente da templates/html/components/stepTabs.html. Modificare templates/html/components/stepTabs.html e rieseguire npm run docs:generate. -->
+<!-- Automatically generated from templates/html/components/stepTabs.html. Edit templates/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.
+- `flexColumnElements`: uses the related flexColumnElements component or utility in this example.
+- `flexColumnTexts`: uses the related flexColumnTexts component or utility in this example.
+- `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">
@@ -59,25 +59,25 @@ Procedura HTML a tre schede con indicatori e controlli di navigazione.
 
     <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>
+            <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>
+            <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>
+            <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 templates/html/components/steps.html. Edit templates/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">