mypgs 2.0.0 → 2.1.0

package/templates/react/components/button.jsx

@@ -7,7 +7,7 @@ export default function Button() {
             </a>
 
             <button pgs="button" type="button" pgs-option="buttonReverse">
-                Avanti
+                Next
                 <i className="fa-solid fa-arrow-right" aria-hidden="true"></i>
             </button>
 
@@ -16,17 +16,17 @@ export default function Button() {
                 Submit
             </button>
 
-            <button pgs="buttonIcon" type="button" aria-label="Impostazioni">
+            <button pgs="buttonIcon" type="button" aria-label="Settings">
                 <i className="fa-solid fa-gear" aria-hidden="true"></i>
             </button>
 
-            <button pgs="buttonMini" type="button" aria-label="Informazioni">
+            <button pgs="buttonMini" type="button" aria-label="Information">
                 <i className="fa-solid fa-info" aria-hidden="true"></i>
             </button>
 
-            <button pgs="buttonBig" type="button" aria-label="Bottone grande">
+            <button pgs="buttonBig" type="button" aria-label="Large button">
                 <i className="fa-solid fa-rocket" aria-hidden="true"></i>
-                Bottone grande
+                Large button
             </button>
         </div>
     );

package/templates/react/components/card.jsx

@@ -1,11 +1,11 @@
 export default function Card() {
     return (
         <article pgs="card flexColumn">
-            <img pgs="card-img imgCover" src="https://placehold.co/800x500" alt="Immagine segnaposto" />
+            <img pgs="card-img imgCover" src="https://placehold.co/800x500" alt="Placeholder image" />
 
             <div pgs="flexColumnTexts">
                 <h3>Card riutilizzabile</h3>
-                <p>Contenuto descrittivo della card, adatto a liste, anteprime e griglie.</p>
+                <p>Descriptive card content suitable for lists, previews, and grids.</p>
                 <a pgs="button" href="#">Leggi di piu</a>
             </div>
         </article>
@@ -15,11 +15,11 @@ export default function CardLink() {
     return (
         <article pgs="card">
             <a pgs="flexColumn" href="">
-                <img pgs="card-img imgCover" src="https://placehold.co/800x500" alt="Immagine segnaposto" />
+                <img pgs="card-img imgCover" src="https://placehold.co/800x500" alt="Placeholder image" />
 
                 <div pgs="flexColumnTexts">
                     <h3>Card riutilizzabile</h3>
-                    <p>Contenuto descrittivo della card, adatto a liste, anteprime e griglie.</p>
+                    <p>Descriptive card content suitable for lists, previews, and grids.</p>
                 </div>
             </a>
         </article>

package/templates/react/components/dropdown.jsx

@@ -1,12 +1,12 @@
 const dropdowns = [
-    ["Bottom center", "Contenuto bottom center"],
-    ["Top left", "Contenuto top left", "position[top left]"],
-    ["Top center", "Contenuto top center", "position[top center]"],
-    ["Top right", "Contenuto top right", "position[top right]"],
-    ["Bottom left", "Contenuto bottom left", "position[bottom left]"],
-    ["Bottom right", "Contenuto bottom right", "position[bottom right]"],
-    ["Left center", "Contenuto left center", "position[left center]"],
-    ["Right center", "Contenuto right center", "position[right center]"],
+    ["Bottom center", "bottom center content"],
+    ["Top left", "top left content", "position[top left]"],
+    ["Top center", "top center content", "position[top center]"],
+    ["Top right", "top right content", "position[top right]"],
+    ["Bottom left", "bottom left content", "position[bottom left]"],
+    ["Bottom right", "bottom right content", "position[bottom right]"],
+    ["Left center", "left center content", "position[left center]"],
+    ["Right center", "right center content", "position[right center]"],
 ];
 
 export default function Dropdown() {

package/templates/react/components/form.jsx

@@ -12,9 +12,9 @@ export default function Form() {
             <input id="form-email" pgs="input" pgs-option="message[Inserisci una email valida]" type="email" name="email" placeholder="nome@example.com" required />
 
             <label pgs="label" htmlFor="form-message">
-                Messaggio
+                Message
             </label>
-            <textarea id="form-message" pgs="textarea" name="message" rows="5" placeholder="Scrivi il messaggio"></textarea>
+            <textarea id="form-message" pgs="textarea" name="message" rows="5" placeholder="Write your message"></textarea>
 
             <label pgs="toggle">
                 <span>Accetto la privacy policy</span>

package/templates/react/components/modal.jsx

@@ -3,17 +3,17 @@ export default function Modal() {
         <>
             <div pgs="modal" pgs-option="containerID[modal-container]">
                 <button pgs="modal-button button" type="button">
-                    <i className="fa-solid fa-window-maximize"></i> Apri modale
+                    <i className="fa-solid fa-window-maximize"></i> Open modal
                 </button>
 
                 <dialog>
                     <div pgs="modal-dialog-content">
                         <div pgs="modal-dialog-content-header">
-                            <h3>Modale di esempio</h3>
+                            <h3>Example modal</h3>
                         </div>
 
                         <div pgs="modal-dialog-content-scroll">
-                            <p>Contenuto della modale. Il bottone di chiusura viene aggiunto automaticamente se non presente.</p>
+                            <p>Modal content. The close button is added automatically when missing.</p>
                         </div>
                     </div>
                 </dialog>
@@ -21,17 +21,17 @@ export default function Modal() {
 
             <div pgs="modal" pgs-option="containerID[modal-container]">
                 <button pgs="modal-button button" type="button">
-                    <i className="fa-solid fa-window-maximize"></i> Apri modale right
+                    <i className="fa-solid fa-window-maximize"></i> Open modal right
                 </button>
 
                 <dialog pgs-option="right">
                     <div pgs="modal-dialog-content">
                         <div pgs="modal-dialog-content-header">
-                            <h3>Modale laterale</h3>
+                            <h3>Side modal</h3>
                         </div>
 
                         <div pgs="modal-dialog-content-scroll">
-                            <p>Contenuto della modale con <code>pgs-option=&quot;right&quot;</code>.</p>
+                            <p>Modal content with <code>pgs-option=&quot;right&quot;</code>.</p>
                         </div>
                     </div>
                 </dialog>
@@ -39,17 +39,17 @@ export default function Modal() {
 
             <div pgs="modal" pgs-option="containerID[modal-container]">
                 <button pgs="modal-button button" type="button">
-                    <i className="fa-solid fa-window-maximize"></i> Apri modale left
+                    <i className="fa-solid fa-window-maximize"></i> Open modal left
                 </button>
 
                 <dialog pgs-option="left">
                     <div pgs="modal-dialog-content">
                         <div pgs="modal-dialog-content-header">
-                            <h3>Modale laterale sinistra</h3>
+                            <h3>Left-side modal</h3>
                         </div>
 
                         <div pgs="modal-dialog-content-scroll">
-                            <p>Contenuto della modale con <code>pgs-option=&quot;left&quot;</code>.</p>
+                            <p>Modal content with <code>pgs-option=&quot;left&quot;</code>.</p>
                         </div>
                     </div>
                 </dialog>
@@ -57,21 +57,21 @@ export default function Modal() {
 
             <div pgs="modal">
                 <button pgs="modal-button button" type="button">
-                    <i className="fa-solid fa-floppy-disk"></i> Conferma salvataggio
+                    <i className="fa-solid fa-floppy-disk"></i> Confirmation salvataggio
                 </button>
 
                 <dialog pgs-option="topLevel">
                     <div pgs="modal-dialog-content">
                         <div pgs="modal-dialog-content-header">
-                            <h3>Salvare le modifiche?</h3>
+                            <h3>Save changes?</h3>
                         </div>
 
                         <div pgs="modal-dialog-content-scroll flexColumnElements">
-                            <p>Hai modifiche non salvate. Conferma per applicarle oppure annulla per tornare alla pagina.</p>
+                            <p>You have unsaved changes. Confirm to apply them or cancel to return to the page.</p>
 
                             <div pgs="flexRow">
-                                <button pgs="button modal-close" type="button">Annulla</button>
-                                <button pgs="buttonStrong" type="button">Salva modifiche</button>
+                                <button pgs="button modal-close" type="button">Cancel</button>
+                                <button pgs="buttonStrong" type="button">Save changes</button>
                             </div>
                         </div>
                     </div>

package/templates/react/components/notification.jsx

@@ -1,6 +1,6 @@
 const notificationData = {
-    title: "Titolo",
-    message: "Messaggio",
+    title: "Title",
+    message: "Message",
     element: "notification",
     type: "info",
     icon: null,
@@ -10,7 +10,7 @@ const notificationData = {
 
 const toastData = {
     title: "Benvenuto",
-    message: "Messaggio",
+    message: "Message",
     element: "toast",
     type: "info",
     icon: null,

package/templates/react/components/search.jsx

@@ -1,8 +1,8 @@
 export default function Search() {
     return (
         <form pgs="buttonNohover search" autoComplete="off" action="" method="get">
-            <button type="submit" title="Cerca"><i className="fa-solid fa-search"></i></button>
-            <input type="search" name="s" placeholder="Cerca" defaultValue="" />
+            <button type="submit" title="Search"><i className="fa-solid fa-search"></i></button>
+            <input type="search" name="s" placeholder="Search" defaultValue="" />
             <ul pgs="search-suggestions"></ul>
         </form>
     );
@@ -11,18 +11,18 @@ export default function Search() {
 export function SearchModal() {
     return (
         <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 className="fa-solid fa-search"></i>
             </button>
 
             <dialog>
                 <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 className="fa-solid fa-search"></i>
                         </button>
 
-                        <input type="search" name="s" placeholder="Cerca" defaultValue="" />
+                        <input type="search" name="s" placeholder="Search" defaultValue="" />
                         <ul pgs="search-suggestions"></ul>
                     </form>
 

package/templates/react/components/slides.jsx

@@ -1,7 +1,7 @@
 const slides = [
-    ["Slide uno", "Contenuto della prima slide.", "https://placehold.co/800x500?text=Slide+1", "Slide 1"],
-    ["Slide due", "Contenuto della seconda slide.", "https://placehold.co/800x500?text=Slide+2", "Slide 2"],
-    ["Slide tre", "Contenuto della terza slide.", "https://placehold.co/800x500?text=Slide+3", "Slide 3"],
+    ["Slide uno", "First slide content.", "https://placehold.co/800x500?text=Slide+1", "Slide 1"],
+    ["Slide due", "Second slide content.", "https://placehold.co/800x500?text=Slide+2", "Slide 2"],
+    ["Slide tre", "Third slide content.", "https://placehold.co/800x500?text=Slide+3", "Slide 3"],
 ];
 
 export default function Slides() {

package/templates/react/components/stepTabs.jsx

@@ -5,25 +5,25 @@ export default function StepTabs() {
 
             <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 className="fa-solid fa-arrow-left" aria-hidden="true"></i>
-                    Indietro
+                    Back
                 </button>
 
                 <button pgs="stepTabs-restart button" type="button">
@@ -31,7 +31,7 @@ export default function StepTabs() {
                 </button>
 
                 <button pgs="stepTabs-next button" pgs-option="buttonReverse" type="button">
-                    Avanti
+                    Next
                     <i className="fa-solid fa-arrow-right" aria-hidden="true"></i>
                 </button>
             </div>

package/templates/react/components/summary.jsx

@@ -3,15 +3,15 @@ export default function 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/react/components/table.jsx

@@ -4,7 +4,7 @@ export default function Table() {
             <table>
                 <thead>
                     <tr>
-                        <th>Nome</th>
+                        <th>Name</th>
                         <th>Stato</th>
                         <th>Data</th>
                     </tr>
@@ -13,7 +13,7 @@ export default function Table() {
                 <tbody>
                     <tr>
                         <td>Elemento uno</td>
-                        <td>Attivo</td>
+                        <td>Active</td>
                         <td>2026-01-01</td>
                     </tr>
                     <tr>

package/templates/react/layout/flex.jsx

@@ -1,10 +1,10 @@
 const columns = [
-    ["Colonna uno", "Contenuto della prima colonna."],
-    ["Colonna due", "Contenuto della seconda colonna."],
-    ["Colonna tre", "Contenuto della terza colonna."],
-    ["Colonna quattro", "Contenuto della quarta colonna."],
-    ["Colonna cinque", "Contenuto della quinta colonna."],
-    ["Colonna sei", "Contenuto della sesta colonna."],
+    ["Column one", "First column content."],
+    ["Column two", "Second column content."],
+    ["Column three", "Third column content."],
+    ["Column four", "Fourth column content."],
+    ["Column five", "Fifth column content."],
+    ["Column six", "Sixth column content."],
 ];
 
 function ColumnCard({ title, text }) {
@@ -20,8 +20,8 @@ export default function Flex() {
     return (
         <>
             <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>
 
             {[2, 3, 4, 6].map((count) => (

package/templates/react/layout/grid.jsx

@@ -1,10 +1,10 @@
 const columns = [
-    ["Colonna uno", "Contenuto della prima colonna."],
-    ["Colonna due", "Contenuto della seconda colonna."],
-    ["Colonna tre", "Contenuto della terza colonna."],
-    ["Colonna quattro", "Contenuto della quarta colonna."],
-    ["Colonna cinque", "Contenuto della quinta colonna."],
-    ["Colonna sei", "Contenuto della sesta colonna."],
+    ["Column one", "First column content."],
+    ["Column two", "Second column content."],
+    ["Column three", "Third column content."],
+    ["Column four", "Fourth column content."],
+    ["Column five", "Fifth column content."],
+    ["Column six", "Sixth column content."],
 ];
 
 function ColumnCard({ title, text }) {
@@ -20,8 +20,8 @@ export default function Grid() {
     return (
         <>
             <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>
 
             {[2, 3, 4, 6].map((count) => (

package/templates/react/layout/section.jsx

@@ -3,40 +3,40 @@ export default function Section() {
         <div pgs="flexColumnSections">
             <section pgs="section flexColumnElements">
                 <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>
             </section>
 
             <section pgs="sectionFull flexColumnElements">
                 <div pgs="container 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="container flexColumnTexts">
-                    <strong>Sezione specificità</strong>
-                    <p>Contenuto centrato dentro una sezione MyPGS.</p>
+                    <strong>Specificity section</strong>
+                    <p>Centered content inside a MyPGS section.</p>
                 </div>
                 <div pgs="sectionSpecificity-child container 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={{ backgroundColor: "var(--color-primary-soft)" }}>
                 <div pgs="container 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="container flexColumnTexts">
-                    <strong>Sezione no-padding</strong>
-                    <p>Contenuto centrato dentro una sezione MyPGS.</p>
+                    <strong>No-padding section</strong>
+                    <p>Centered content inside a MyPGS section.</p>
                 </div>
             </section>
         </div>

package/templates/react/patterns/cookieConsent.jsx

@@ -8,11 +8,11 @@ export default function CookieConsent({
 
     return (
         <div id="cookieConsent" pgs="cookieConsent" role="dialog" aria-modal="true" data-ga-id={gaMeasurementId} hidden tabIndex="-1">
-            <p><i className="fa-duotone fa-solid fa-cookie-bite"></i> Cookie e privacy <br /></p>
+            <p><i className="fa-duotone fa-solid fa-cookie-bite"></i> Cookies and privacy <br /></p>
             <h2>La tua privacy prima di tutto</h2>
 
             <p>
-                Utilizziamo cookie tecnici per offrire il servizio e, previo consenso, cookie analitici di
+                We use essential cookies to provide the service and, with your consent, analytics cookies from
                 <strong>Google Analytics</strong> per misurare in modo anonimo il traffico e migliorare i contenuti.
                 Puoi modificare la scelta in qualsiasi momento.
             </p>
@@ -22,17 +22,17 @@ export default function CookieConsent({
                 <a href={cookiePolicyUrl} target="_blank" rel="noopener noreferrer">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>
                             <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">
@@ -40,7 +40,7 @@ export default function CookieConsent({
                         <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" />
@@ -50,11 +50,11 @@ export default function CookieConsent({
 
             <div pgs="flexRow">
                 <button type="button" pgs="button cookieConsent-actionReject">
-                    <i className="fa-solid fa-duotone fa-sliders"></i>Solo selezionati
+                    <i className="fa-solid fa-duotone fa-sliders"></i>Selected only
                 </button>
 
                 <button type="button" pgs="buttonStrong cookieConsent-actionAccept">
-                    <i className="fa-solid fa-check"></i> Accetta tutto
+                    <i className="fa-solid fa-check"></i> Accept all
                 </button>
             </div>
         </div>

package/templates/react/patterns/footer.jsx

@@ -1,7 +1,7 @@
 export default function Footer() {
     return (
         <footer pgs="footer">
-            <button pgs="button toggleDarkmode" type="button" aria-label="Cambia tema">
+            <button pgs="button toggleDarkmode" type="button" aria-label="Change theme">
                 <i className="fa-solid fa-moon"></i>
             </button>
 
@@ -28,11 +28,11 @@ export default function Footer() {
 
             <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/react/patterns/header.jsx

@@ -30,7 +30,7 @@ export default function Header() {
                 </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>
@@ -42,7 +42,7 @@ export default function Header() {
                 <div pgs="header-element-onlyMobile"></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 className="fa-solid fa-moon"></i>
                     </button>
                 </div>
@@ -52,7 +52,7 @@ export default function Header() {
 
                     <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>