mypgs 2.0.0 → 2.1.0

package/templates/html/components/slides.html

@@ -1,43 +1,43 @@
 <!--
 /**
  * @title Slides
- * @description Carosello orizzontale che osserva gli elementi visibili e crea automaticamente controlli precedente, successivo e indicatori di posizione.
+ * @description 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-option
- * - singleScroll: usa un solo elemento visibile come riferimento per la navigazione precedente e successiva.
- * - shadowDesktop: abilita l'ombreggiatura laterale del carosello sui layout desktop.
- * - notScrollAnimation: applicata a un elemento li disabilita l'animazione visiva basata sulla percentuale di visibilità.
- * - notScrollWithMouse: sul root disabilita la gestione dello scorrimento orizzontale tramite mouse.
+ * - 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.
  *
  * @api
- * - pgs.slides.init(root): inizializza il root stesso quando è un carosello e tutti i caroselli discendenti non ancora registrati; il valore predefinito è document.
- * - pgs.slides.api(element): restituisce l'istanza associata a un root slides inizializzato.
- * - instance.previous(): porta in vista la slide precedente.
- * - instance.next(): porta in vista la slide successiva.
- * - instance.goTo(index): porta in vista la slide con l'indice indicato.
- * - instance.getCurrentIndexes(): restituisce gli indici delle slide attualmente visibili.
- * - instance.getCurrentElements(): restituisce gli elementi slide attualmente visibili.
- * - instance.getTotal(): restituisce il numero totale di slide.
- * - instance.isAtStart(): restituisce true quando la prima slide è visibile.
- * - instance.isAtEnd(): restituisce true quando l'ultima slide è visibile.
- * - instance.refresh(): sincronizza controlli e dots, sostituisce listener e observer precedenti e restituisce la nuova API.
+ * - 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
- * - 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.
+ * - 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.
  *
- * @return Lista di slide basate su card, completata a runtime con pulsanti e indicatori.
+ * @return Complete HTML markup and usage example for Slides.
  */
 -->
 
@@ -48,7 +48,7 @@
                 <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>
@@ -58,7 +58,7 @@
                 <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>
@@ -68,7 +68,7 @@
                 <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/templates/html/components/stepTabs.html

@@ -1,47 +1,47 @@
 <!--
 /**
  * @title Step Tabs
- * @description Procedura guidata a schede con avanzamento sequenziale, indicatori generati, controlli di navigazione e possibilità di bloccare uno step.
+ * @description 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-option
- * - tabIcon: su ogni tab usa tabIcon[classe] con una singola classe Font Awesome per l'indicatore corrispondente; il fallback è fa-circle.
- * - step: viene applicata a ogni indicatore generato con la sintassi step[indice] per conservarne l'indice zero-based.
- * - buttonReverse: inverte testo e icona sul pulsante successivo e appartiene al componente button.
+ * - 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-state
- * - is-active: identifica la scheda corrente e il relativo indicatore.
- * - is-completed: identifica gli indicatori degli step già completati e nuovamente selezionabili.
- * - is-locked: applicato a un tab impedisce di avanzare finché lo step resta bloccato.
+ * - 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
- * - 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.
  *
  * @related
- * - flexColumnElements: organizza verticalmente le aree principali del componente.
- * - flexColumnTexts: organizza il contenuto testuale di ogni tab.
- * - flexRow: dispone sulla stessa riga i controlli di navigazione.
- * - button: applica lo stile standard ai controlli precedente, riavvio e successivo.
+ * - 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.
  *
- * @return Procedura HTML a tre schede con indicatori e controlli di navigazione.
+ * @return Complete HTML markup and usage example for Step Tabs.
  */
 -->
 
@@ -50,25 +50,25 @@
 
     <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">
@@ -76,7 +76,7 @@
         </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/templates/html/components/steps.html

@@ -1,24 +1,24 @@
 <!--
 /**
  * @title Steps
- * @description Elenco ordinato di passaggi che presenta numero, contenuto e linea di collegamento, aggiungendo a runtime gli elementi strutturali mancanti.
+ * @description 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
- * - 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.
  *
- * @return Lista ordinata HTML di passaggi numerati completata dal modulo JavaScript.
+ * @return Ordered HTML list of numbered steps completed by the JavaScript module.
  */
 -->
 

package/templates/html/components/summary.html

@@ -1,41 +1,41 @@
 <!--
 /**
  * @title Summary
- * @description Componente che limita inizialmente un testo lungo a tre righe e mostra il controllo di espansione solo quando il contenuto eccede tale altezza.
+ * @description 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-state
- * - 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
- * - 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.
  *
- * @return Struttura HTML con contenuto espandibile e pulsante sincronizzato tramite ARIA.
+ * @return Complete HTML markup and usage example for Summary.
  */
 -->
 
 <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/templates/html/components/table.html

@@ -1,12 +1,12 @@
 <!--
 /**
  * @title Table
- * @description Contenitore responsive per una tabella semantica con intestazioni e righe di dati coerenti con gli stili del design system.
+ * @description 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.
  *
- * @return Tabella HTML completa racchiusa nel contenitore PGS dedicato.
+ * @return Complete HTML table wrapped in the dedicated PGS container.
  */
 -->
 
@@ -14,7 +14,7 @@
     <table>
         <thead>
             <tr>
-                <th>Nome</th>
+                <th>Name</th>
                 <th>Stato</th>
                 <th>Data</th>
             </tr>
@@ -23,7 +23,7 @@
         <tbody>
             <tr>
                 <td>Elemento uno</td>
-                <td>Attivo</td>
+                <td>Active</td>
                 <td>2026-01-01</td>
             </tr>
             <tr>

package/templates/html/components/tooltip.html

@@ -1,35 +1,35 @@
 <!--
 /**
  * @title Tooltip
- * @description Variante compatta del dropdown che mostra un breve pannello informativo controllato da un pulsante a icona.
+ * @description 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-option
- * - 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-state
- * - open: viene gestito dal modulo dropdown sul root per mostrare o nascondere il tooltip.
+ * - open: identifies the open element used by Tooltip.
  *
  * @api
- * - pgs.dropdown.init(root): inizializza il tooltip perché il suo root condivide il token dropdown.
- * - pgs.dropdown.api(element): restituisce l'istanza dropdown associata al root del tooltip.
- * - instance.open(): apre il contenuto informativo.
- * - instance.close(): chiude il contenuto informativo.
- * - instance.toggle(): inverte la visibilità del tooltip.
- * - instance.refresh(): reinizializza il contesto e ricalcola il posizionamento.
- * - instance.isOpen(): restituisce true quando il tooltip è aperto.
+ * - 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.
  *
  * @related
- * - dropdown: fornisce apertura, chiusura e posizionamento del tooltip.
- * - dropdown-button: collega il pulsante al comportamento dropdown.
- * - dropdown-content: collega il pannello al comportamento dropdown.
- * - buttonMini: presenta il controllo come pulsante a icona di dimensione minima.
+ * - 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.
  *
- * @return Tooltip HTML composto tramite i token condivisi del dropdown.
+ * @return Complete HTML markup and usage example for Tooltip.
  */
 -->
 

package/templates/html/layout/body.html

@@ -1,20 +1,20 @@
 <!--
 /**
  * @title Body
- * @description Documento HTML di base che abilita MyPGS, configura i metadati essenziali e applica al body le varianti condivise di sfondo, testo e titoli.
+ * @description 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-state
- * - 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.
  *
- * @return Scheletro HTML completo necessario per inizializzare la libreria MyPGS.
+ * @return Complete HTML skeleton required to initialize the MyPGS library.
  */
 -->
 
@@ -32,4 +32,3 @@
 </head>
 
 <body pgs="bodyBase bodyImg bodyText bodyHeading" >
-

package/templates/html/layout/flex.html

@@ -1,109 +1,109 @@
 <!--
 /**
  * @title Flex
- * @description Esempi di layout flex responsive che distribuiscono da due a sei elementi per riga adattando automaticamente la disposizione allo spazio disponibile.
+ * @description 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.
  *
  * @related
- * - 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.
  *
- * @return Raccolta HTML dei layout flex responsive a due, tre, quattro e sei elementi.
+ * @return HTML collection of responsive flex layouts with two, three, four, and six items.
  */
 -->
 
 <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
+</div