mypgs 2.0.0 → 2.1.0

package/templates/html/layout/footer.html

@@ -1,33 +1,33 @@
 <!--
 /**
  * @title Footer
- * @description Piè di pagina completo con controllo tema, area di brand, navigazione, contenuti informativi e collegamento alle preferenze cookie.
+ * @description 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.
  *
  * @related
- * - 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.
  *
- * @return Struttura HTML completa del footer con brand, menu e area legale.
+ * @return Complete footer HTML structure with brand, menu, and legal area.
  */
 -->
 
 <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>
 
@@ -54,11 +54,11 @@
 
     <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>

package/templates/html/layout/grid.html

@@ -1,109 +1,109 @@
 <!--
 /**
  * @title Grid
- * @description Esempi di griglie responsive che distribuiscono da due a sei colonne mantenendo gap e ridimensionamento coerenti con il design system.
+ * @description Responsive grid examples that distribute two to six columns while preserving design-system gaps and sizing.
  *
  * @pgs
- * - grid-2: crea una griglia responsive fino a due colonne.
- * - grid-3: crea una griglia responsive fino a tre colonne.
- * - grid-4: crea una griglia responsive fino a quattro colonne.
- * - grid-6: crea una griglia responsive fino a sei colonne.
+ * - grid-2: creates a responsive grid with up to two columns.
+ * - grid-3: creates a responsive grid with up to three columns.
+ * - grid-4: creates a responsive grid with up to four columns.
+ * - grid-6: creates a responsive grid with up to six columns.
  *
  * @related
- * - container: definisce il contesto contenitore dell'introduzione.
- * - flexColumnTexts: organizza e distanzia i testi introduttivi e delle card.
- * - card: rende visibili le celle dimostrative delle griglie.
+ * - container: defines the container context for the introduction.
+ * - flexColumnTexts: organizes and spaces introductory and card text.
+ * - card: makes the demonstration grid cells visible.
  *
- * @return Raccolta HTML delle griglie responsive a due, tre, quattro e sei colonne.
+ * @return HTML collection of responsive grids with two, three, four, and six columns.
  */
 -->
 
 <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="grid-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="grid-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="grid-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="grid-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

package/templates/html/layout/header.html

@@ -1,41 +1,41 @@
 <!--
 /**
  * @title Header
- * @description Intestazione responsive che misura lo spazio disponibile, alterna contenuti desktop e mobile e integra menu, tema scuro e navigazione modale.
+ * @description Responsive header that measures available space, switches between desktop and mobile content, and integrates menus, dark mode, and modal navigation.
  *
  * @pgs
- * - header: identifica l'intestazione principale osservata dal modulo JavaScript.
- * - header-element: identifica il gruppo interno misurato per determinare il passaggio alla modalità mobile.
- * - header-element-alwaysOn: identifica l'area iniziale sempre visibile.
- * - header-element-onlyDesktop: identifica i contenuti mostrati soltanto quando il menu desktop è attivo.
- * - header-element-onlyMobile: identifica i contenuti mostrati soltanto in modalità mobile.
- * - header-element-alwaysOnLast: identifica l'area finale sempre visibile.
- * - header-element-hamburger: identifica il gruppo della navigazione mobile.
- * - header-element-hamburger-button: identifica il controllo hamburger specifico dell'header.
+ * - header: identifies the main header observed by the JavaScript module.
+ * - header-element: identifies the inner group measured to determine the switch to mobile mode.
+ * - header-element-alwaysOn: identifies the initial area that is always visible.
+ * - header-element-onlyDesktop: identifies content shown only while the desktop menu is active.
+ * - header-element-onlyMobile: identifies content shown only in mobile mode.
+ * - header-element-alwaysOnLast: identifies the final area that is always visible.
+ * - header-element-hamburger: identifies the mobile navigation group.
+ * - header-element-hamburger-button: identifies the header-specific hamburger control.
  *
  * @pgs-option
- * - horizontal: dispone orizzontalmente il menu desktop correlato.
- * - vertical: dispone verticalmente il menu mobile correlato.
- * - menuHeader: adatta entrambi i menu al contesto dell'header.
- * - containerPGS: sul wrapper modal usa containerPGS[header] per spostare il dialog nell'intestazione.
- * - right: sul dialog della navigazione mobile presenta il contenuto dal lato destro.
+ * - horizontal: arranges the related desktop menu horizontally.
+ * - vertical: arranges the related mobile menu vertically.
+ * - menuHeader: adapts both menus to the header context.
+ * - containerPGS: uses containerPGS[header] on the modal wrapper to move the dialog into the header.
+ * - right: presents the mobile navigation dialog content from the right side.
  *
  * @pgs-state
- * - mobileActive: viene applicato a header e header-element quando larghezza o viewport richiedono la navigazione mobile.
+ * - mobileActive: is applied to header and header-element when their width or the viewport requires mobile navigation.
  *
  * @related
- * - logo: inserisce il marchio nell'area iniziale.
- * - logo-text: usa la variante testuale del logo.
- * - menu: fornisce la navigazione desktop e mobile.
- * - buttonIcon: presenta i controlli tema e hamburger come pulsanti a icona.
- * - toggleDarkmode: collega il controllo al gestore globale del tema.
- * - modal: fornisce apertura e chiusura della navigazione mobile.
- * - modal-button: apre il pannello mobile.
- * - modal-close: chiude il pannello mobile e condivide il controllo hamburger.
- * - modal-dialog: identifica il dialog della navigazione mobile.
- * - modal-dialog-content: identifica il pannello interno della navigazione mobile.
+ * - logo: inserts the brand into the initial area.
+ * - logo-text: uses the text variant of the logo.
+ * - menu: provides desktop and mobile navigation.
+ * - buttonIcon: presents theme and hamburger controls as icon buttons.
+ * - toggleDarkmode: connects the control to the global theme handler.
+ * - modal: provides opening and closing behavior for mobile navigation.
+ * - modal-button: opens the mobile panel.
+ * - modal-close: closes the mobile panel and shares the hamburger control.
+ * - modal-dialog: identifies the mobile navigation dialog.
+ * - modal-dialog-content: identifies the inner mobile navigation panel.
  *
- * @return Header HTML completo con navigazione desktop e pannello mobile laterale.
+ * @return Complete header HTML with desktop navigation and a side mobile panel.
  */
 -->
 
@@ -48,10 +48,10 @@
 		</div>
 
 		<div pgs="header-element-onlyDesktop">
-			<nav pgs="menu" pgs-option="horizontal menuHeader" aria-label="Menu principale">
+			<nav pgs="menu" pgs-option="horizontal menuHeader" aria-label="Main menu">
 				<ul>
 					<li><a href="/">Home</a></li>
-					<li><a href="#componenti">Componenti</a></li>
+					<li><a href="#components">Components</a></li>
 					<li><a href="#layout">Layout</a></li>
 				</ul>
 			</nav>
@@ -61,7 +61,7 @@
 		</div>
 
 		<div pgs="header-element-alwaysOnLast">
-			<button pgs="buttonIcon toggleDarkmode" type="button" aria-label="Cambia tema">
+			<button pgs="buttonIcon toggleDarkmode" type="button" aria-label="Change theme">
 				<i class="fa-solid fa-moon"></i>
 			</button>
 		</div>
@@ -72,10 +72,10 @@
 
 			<dialog pgs="modal-dialog" pgs-option="right">
 				<div pgs="modal-dialog-content">
-					<nav pgs="menu" pgs-option="vertical menuHeader" aria-label="Menu mobile">
+					<nav pgs="menu" pgs-option="vertical menuHeader" aria-label="Mobile menu">
 						<ul>
 							<li><a href="/">Home</a></li>
-							<li><a href="#componenti">Componenti</a></li>
+							<li><a href="#components">Components</a></li>
 							<li><a href="#layout">Layout</a></li>
 						</ul>
 					</nav>
@@ -104,4 +104,4 @@
 			addPgsState(document.querySelector("[pgs~=header-element]"), "mobileActive");
 		}
 	</script>
-</header>
+</header>

package/templates/html/layout/pageShell.html

@@ -1,19 +1,19 @@
 <!--
 /**
  * @title Page Shell
- * @description Layout di pagina responsive che combina un contenuto principale con zero, una o due barre laterali scorrevoli, adattandone larghezza e posizione.
+ * @description Responsive page layout that combines main content with zero, one, or two scrollable sidebars and adapts their width and position.
  *
  * @pgs
- * - pageShell: identifica il contenitore che calcola la composizione di main e aside.
- * - pageShell-aside: identifica una barra laterale posizionabile prima o dopo il contenuto.
- * - pageShell-aside-scroll: identifica l'area interna che può restare visibile durante lo scorrimento.
- * - pageShell-content: identifica il contenuto principale della pagina.
+ * - pageShell: identifies the container that calculates the main and aside composition.
+ * - pageShell-aside: identifies a sidebar that can be placed before or after the content.
+ * - pageShell-aside-scroll: identifies the inner area that can remain visible while scrolling.
+ * - pageShell-content: identifies the main page content.
  *
  * @related
- * - flexColumnTexts: organizza i testi contenuti nelle barre laterali.
- * - flexColumnElements: organizza verticalmente gli elementi delle sezioni principali.
+ * - flexColumnTexts: organizes text contained in the sidebars.
+ * - flexColumnElements: vertically organizes elements in the main sections.
  *
- * @return Quattro configurazioni HTML di page shell con due, una o nessuna barra laterale.
+ * @return Four page-shell HTML configurations with two, one, or no sidebars.
  */
 -->
 

package/templates/html/layout/section.html

@@ -1,62 +1,62 @@
 <!--
 /**
  * @title Section
- * @description Varianti di sezione che controllano larghezza, padding e trattamento di contenuti specifici mantenendo la spaziatura verticale condivisa.
+ * @description Section variants that control width, padding, and specific content treatment while preserving shared vertical spacing.
  *
  * @pgs
- * - section: identifica la sezione standard con contenuto centrato.
- * - sectionFull: identifica una sezione estesa a tutta la larghezza disponibile.
- * - sectionSpecificity: identifica una sezione che applica una struttura specifica al relativo figlio.
- * - sectionSpecificity-child: identifica il contenuto figlio gestito dalla variante sectionSpecificity.
- * - sectionMax: identifica una sezione con larghezza massima estesa.
- * - sectionNoPadding: identifica una sezione priva del padding standard.
+ * - section: identifies the standard section with centered content.
+ * - sectionFull: identifies a section that spans the full available width.
+ * - sectionSpecificity: identifies a section that applies a specific structure to its child.
+ * - sectionSpecificity-child: identifies child content managed by the sectionSpecificity variant.
+ * - sectionMax: identifies a section with an extended maximum width.
+ * - sectionNoPadding: identifies a section without standard padding.
  *
  * @related
- * - flexColumnSections: distanzia verticalmente tutte le sezioni dell'esempio.
- * - flexColumnElements: organizza verticalmente gli elementi principali di ogni sezione.
- * - flexColumnTexts: organizza e distanzia i contenuti interni.
- * - card-img: riutilizza il trattamento delle immagini card nelle sezioni dimostrative.
- * - imgCover: adatta le immagini alla larghezza della sezione.
+ * - flexColumnSections: vertically spaces all sections in the example.
+ * - flexColumnElements: vertically organizes the main elements of each section.
+ * - flexColumnTexts: organizes and spaces inner content.
+ * - card-img: reuses card image treatment in the demonstration sections.
+ * - imgCover: scales images to the section width.
  *
- * @return Raccolta HTML delle varianti di section disponibili.
+ * @return HTML collection of the available section variants.
  */
 -->
 
 <div pgs="flexColumnSections">
     <section pgs="section flexColumnElements">
         <div pgs="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>
     </section>
 
     <section pgs="sectionFull flexColumnElements">
         <div pgs="flexColumnTexts">
-            <strong>Sezione full-width</strong>
-            <p>Contenuto centrato dentro una sezione MyPGS.</p>
+            <strong>Full-width section</strong>
+            <p>Centered content inside a MyPGS section.</p>
         </div>
     </section>
 
     <section pgs="sectionSpecificity flexColumnElements">
         <div pgs="flexColumnTexts">
-            <img pgs="card-img imgCover" src="https://placehold.co/800x200?text=Hero" alt="Immagine segnaposto">
+            <img pgs="card-img imgCover" src="https://placehold.co/800x200?text=Hero" alt="Placeholder image">
         </div>
         <div pgs="sectionSpecificity-child flexColumnTexts">
-            <strong>Sezione specificità-child</strong>
-            <p>Contenuto centrato dentro una sezione MyPGS.</p>
+            <strong>Specificity-child section</strong>
+            <p>Centered content inside a MyPGS section.</p>
         </div>
     </section>
 
     <section pgs="sectionMax flexColumnElements" style="background-color: var(--color-primary-soft)">
         <div pgs="flexColumnTexts">
-            <strong>Sezione max-width</strong>
-            <p>Contenuto centrato dentro una sezione MyPGS.</p>
+            <strong>Max-width section</strong>
+            <p>Centered content inside a MyPGS section.</p>
         </div>
     </section>
 
     <section pgs="sectionNoPadding flexColumnElements">
         <div pgs="flexColumnTexts">
-            <img pgs="card-img imgCover" src="https://placehold.co/800x500?text=HI!" alt="Immagine segnaposto">
+            <img pgs="card-img imgCover" src="https://placehold.co/800x500?text=HI!" alt="Placeholder image">
         </div>
     </section>
-</div>
+</div>

package/templates/html/patterns/cookieConsent.html

@@ -1,42 +1,42 @@
 <!--
 /**
  * @title Cookie Consent
- * @description Pattern accessibile per raccogliere e memorizzare il consenso ai cookie analitici, applicare le preferenze e caricare Google Analytics solo quando autorizzato.
+ * @description Accessible pattern for collecting and storing analytics cookie consent, applying preferences, and loading Google Analytics only when authorized.
  *
  * @pgs
- * - cookieConsent: identifica il pannello principale inizializzato dal pattern JavaScript.
- * - cookieConsent-panel: identifica il gruppo delle preferenze configurabili.
- * - cookieConsent-featureEssential: identifica la riga dei cookie tecnici sempre attivi.
- * - cookieConsent-panel-badge: identifica l'indicatore dello stato dei cookie tecnici.
- * - cookieConsent-featureAnalytics: identifica la riga dei cookie analitici opzionali.
- * - cookieConsent-toggleAnalytics: identifica il controllo che abilita il consenso analytics.
- * - cookieConsent-actionReject: applica le preferenze selezionate senza accettare automaticamente analytics.
- * - cookieConsent-actionAccept: accetta tutti i cookie disponibili.
- * - cookieConsent-actionOpen: identifica controlli esterni che riaprono il pannello delle preferenze.
- * - cookieConsent-gaUnavailable: token runtime applicato al root quando manca un measurement ID utilizzabile.
- * - cookieConsent-accepted: token runtime applicato al root quando analytics è consentito.
- * - cookieConsent-declined: token runtime applicato al root quando analytics non è consentito.
+ * - cookieConsent: identifies the main panel initialized by the JavaScript pattern.
+ * - cookieConsent-panel: identifies the configurable preference group.
+ * - cookieConsent-featureEssential: identifies the row of always-active essential cookies.
+ * - cookieConsent-panel-badge: identifies the essential-cookie status indicator.
+ * - cookieConsent-featureAnalytics: identifies the optional analytics-cookie row.
+ * - cookieConsent-toggleAnalytics: identifies the control that enables analytics consent.
+ * - cookieConsent-actionReject: applies selected preferences without automatically accepting analytics.
+ * - cookieConsent-actionAccept: accepts all available cookies.
+ * - cookieConsent-actionOpen: identifies external controls that reopen the preference panel.
+ * - cookieConsent-gaUnavailable: runtime token applied to the root when no usable measurement ID is available.
+ * - cookieConsent-accepted: runtime token applied to the root when analytics is allowed.
+ * - cookieConsent-declined: runtime token applied to the root when analytics is not allowed.
  *
  * @related
- * - flexColumn: organizza verticalmente il pannello delle preferenze.
- * - flexRow: dispone righe e azioni del pannello.
- * - nowrap: impedisce il ritorno a capo nella riga dei cookie essenziali.
- * - toggle: presenta il consenso analytics come interruttore.
- * - button: presenta l'azione di selezione con lo stile standard.
- * - buttonStrong: presenta l'accettazione completa come azione primaria.
+ * - flexColumn: vertically organizes the preference panel.
+ * - flexRow: arranges panel rows and actions.
+ * - nowrap: prevents wrapping in the essential-cookie row.
+ * - toggle: presents analytics consent as a switch.
+ * - button: presents the selection action with standard styling.
+ * - buttonStrong: presents full acceptance as the primary action.
  *
- * @return Pannello HTML di consenso con preferenze tecniche e analytics, azioni e attributi accessibili.
+ * @return Consent panel HTML with essential and analytics preferences, actions, and accessible attributes.
  */
 -->
 
 <section id="pgs-cookieConsent" pgs="cookieConsent" role="dialog" aria-modal="true" data-ga-id="G-XXXXXXXXXX" hidden tabindex="-1">
-    <p><i class="fa-duotone fa-solid fa-cookie-bite"></i> Cookie e privacy <br></p>
-    <h2>La tua privacy prima di tutto</h2>
+    <p><i class="fa-duotone fa-solid fa-cookie-bite"></i> Cookies and privacy <br></p>
+    <h2>Your privacy comes first</h2>
 
     <p>
-        Utilizziamo cookie tecnici per offrire il servizio e, previo consenso, cookie analitici di
-        <strong>Google Analytics</strong> per misurare in modo anonimo il traffico e migliorare i contenuti.
-        Puoi modificare la scelta in qualsiasi momento.
+        We use essential cookies to provide the service and, with your consent, analytics cookies from
+        <strong>Google Analytics</strong> to measure traffic anonymously and improve our content.
+        You can change your choice at any time.
     </p>
 
     <p>
@@ -44,17 +44,17 @@
         <a href="/cookie-policy/" target="_blank" rel="noopener">Cookie Policy</a>
     </p>
 
-    <div pgs="cookieConsent-panel flexColumn" role="group" aria-label="Preferenze cookie">
+    <div pgs="cookieConsent-panel flexColumn" role="group" aria-label="Cookie preferences">
         <div pgs="flexRow nowrap cookieConsent-featureEssential">
             <div>
                 <p>
-                    <strong>Cookie tecnici</strong>
+                    <strong>Essential cookies</strong>
                     <br>
-                    <small>Sempre attivi per garantire il corretto funzionamento del sito.</small>
+                    <small>Always active to ensure the website works correctly.</small>
                 </p>
             </div>
 
-            <span pgs="cookieConsent-panel-badge">Attivi</span>
+            <span pgs="cookieConsent-panel-badge">Active</span>
         </div>
 
         <div pgs="flexRow cookieConsent-featureAnalytics">
@@ -62,21 +62,21 @@
                 <p>
                     <strong>Analytics</strong>
                     <br>
-                    <small>Dati di navigazione raccolti in forma aggregata per statistiche anonime.</small>
+                    <small>Browsing data collected in aggregate form for anonymous statistics.</small>
                 </p>
 
-                <input type="checkbox" pgs="cookieConsent-toggleAnalytics" aria-label="Abilita Google Analytics">
+                <input type="checkbox" pgs="cookieConsent-toggleAnalytics" aria-label="Enable Google Analytics">
             </label>
         </div>
     </div>
 
     <div pgs="flexRow">
         <button type="button" pgs="button cookieConsent-actionReject">
-            <i class="fa-solid fa-duotone fa-sliders"></i>Solo selezionati
+            <i class="fa-solid fa-duotone fa-sliders"></i>Selected only
         </button>
 
         <button type="button" pgs="buttonStrong cookieConsent-actionAccept">
-            <i class="fa-solid fa-check"></i> Accetta tutto
+            <i class="fa-solid fa-check"></i> Accept all
         </button>
     </div>
 </section>

package/templates/react/components/accordion.jsx

@@ -4,22 +4,22 @@ export default function Accordion() {
             <li pgs="accordion">
                 <button pgs="accordion-button" type="button">
                     <i className="fa-solid fa-circle-question" aria-hidden="true"></i>
-                    <span>Domanda frequente</span>
+                    <span>Frequently asked question</span>
                 </button>
 
                 <div pgs="accordion-content" hidden>
-                    <p>Risposta di esempio con contenuto testuale riutilizzabile.</p>
+                    <p>Example answer with reusable text content.</p>
                 </div>
             </li>
 
             <li pgs="accordion">
                 <button pgs="accordion-button" type="button">
                     <i className="fa-solid fa-circle-info" aria-hidden="true"></i>
-                    <span>Seconda sezione</span>
+                    <span>Second section</span>
                 </button>
 
                 <div pgs="accordion-content" hidden>
-                    <p>Altro contenuto del pannello accordion.</p>
+                    <p>Additional accordion panel content.</p>
                 </div>
             </li>
         </ul>

package/templates/react/components/breadcumbs.jsx

@@ -18,7 +18,7 @@ export default function Breadcumbs() {
 
                 <li pgs="breadcrumb-item">
                     <span aria-current="page">
-                        Articolo di prova
+                        Sample article
                     </span>
                 </li>
             </ul>