mypgs 2.0.0 → 3.0.0

package/{templates → reference}/html/layout/pageShell.html

@@ -1,33 +1,33 @@
 <!--
 /**
  * @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.
+ * - flexColumn: organizes text contained in the sidebars.
+ * - gapElements: applies element spacing 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.
  */
 -->
 
 <div pgs="pageShell">
     <aside pgs="pageShell-aside">
         <div pgs="pageShell-aside-scroll">
-            <div pgs="flexColumnTexts">
+            <div pgs="flexColumn">
                 <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab modi ut sunt est illum accusantium dolores eum aut cum itaque.</p>
             </div>
         </div>
     </aside>
 
     <main pgs="pageShell-content">
-        <section pgs="flexColumnElements" id="sezione-uno">
+        <section pgs="flexColumn gapElements" id="sezione-uno">
             <strong>Lorem ipsum</strong>
             <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem dolore veniam nulla hic voluptatum harum illo voluptatem quos. Id quibusdam nemo, mollitia iusto quisquam tenetur doloremque corrupti natus nisi est sed consectetur deserunt? Fugiat consectetur iure aut id voluptate unde autem eius facilis dolorum? Eveniet, sit, excepturi iusto porro eos temporibus illum non ut sunt ex aut earum neque. Iure harum similique autem commodi ratione enim quisquam soluta rem, eius dolor officiis necessitatibus voluptatibus obcaecati vel sint iusto. Eligendi reiciendis aut error rem? Hic aliquid tenetur porro itaque quaerat excepturi consequatur veniam, et alias molestiae, eius odio quae maiores suscipit iure voluptatibus sed dolor facere ipsa quod libero necessitatibus, placeat natus. Doloribus esse nobis culpa ab ut dolorem id expedita nesciunt necessitatibus ipsam natus accusantium eius eveniet eum, distinctio quos modi perspiciatis earum sequi nostrum consequatur quibusdam? Blanditiis iusto possimus officia odio animi repudiandae? Repellendus autem ut soluta facere accusamus magni aut architecto cumque cupiditate. Nostrum officiis, tenetur consequuntur quaerat alias animi debitis? Quae quas placeat iure alias totam quaerat fugit recusandae sed, earum ipsa nihil molestiae quam odit itaque, odio asperiores, mollitia porro ratione tempora laboriosam. Incidunt aliquam nobis sunt ut molestiae nam animi placeat neque vero ratione? Eaque?</p>
         </section>
@@ -35,7 +35,7 @@
 
     <aside pgs="pageShell-aside">
         <div pgs="pageShell-aside-scroll">
-            <div pgs="flexColumnTexts">
+            <div pgs="flexColumn">
                 <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab modi ut sunt est illum accusantium dolores eum aut cum itaque.</p>
             </div>
         </div>
@@ -44,14 +44,14 @@
 <div pgs="pageShell">
     <aside pgs="pageShell-aside">
         <div pgs="pageShell-aside-scroll">
-            <div pgs="flexColumnTexts">
+            <div pgs="flexColumn">
                 <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab modi ut sunt est illum accusantium dolores eum aut cum itaque.</p>
             </div>
         </div>
     </aside>
 
     <main pgs="pageShell-content">
-        <section pgs="flexColumnElements" id="sezione-uno">
+        <section pgs="flexColumn gapElements" id="sezione-uno">
             <strong>Lorem ipsum</strong>
             <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem dolore veniam nulla hic voluptatum harum illo voluptatem quos. Id quibusdam nemo, mollitia iusto quisquam tenetur doloremque corrupti natus nisi est sed consectetur deserunt? Fugiat consectetur iure aut id voluptate unde autem eius facilis dolorum? Eveniet, sit, excepturi iusto porro eos temporibus illum non ut sunt ex aut earum neque. Iure harum similique autem commodi ratione enim quisquam soluta rem, eius dolor officiis necessitatibus voluptatibus obcaecati vel sint iusto. Eligendi reiciendis aut error rem? Hic aliquid tenetur porro itaque quaerat excepturi consequatur veniam, et alias molestiae, eius odio quae maiores suscipit iure voluptatibus sed dolor facere ipsa quod libero necessitatibus, placeat natus. Doloribus esse nobis culpa ab ut dolorem id expedita nesciunt necessitatibus ipsam natus accusantium eius eveniet eum, distinctio quos modi perspiciatis earum sequi nostrum consequatur quibusdam? Blanditiis iusto possimus officia odio animi repudiandae? Repellendus autem ut soluta facere accusamus magni aut architecto cumque cupiditate. Nostrum officiis, tenetur consequuntur quaerat alias animi debitis? Quae quas placeat iure alias totam quaerat fugit recusandae sed, earum ipsa nihil molestiae quam odit itaque, odio asperiores, mollitia porro ratione tempora laboriosam. Incidunt aliquam nobis sunt ut molestiae nam animi placeat neque vero ratione? Eaque?</p>
         </section>
@@ -61,7 +61,7 @@
 <div pgs="pageShell">
 
     <main pgs="pageShell-content">
-        <section pgs="flexColumnElements" id="sezione-uno">
+        <section pgs="flexColumn gapElements" id="sezione-uno">
             <strong>Lorem ipsum</strong>
             <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem dolore veniam nulla hic voluptatum harum illo voluptatem quos. Id quibusdam nemo, mollitia iusto quisquam tenetur doloremque corrupti natus nisi est sed consectetur deserunt? Fugiat consectetur iure aut id voluptate unde autem eius facilis dolorum? Eveniet, sit, excepturi iusto porro eos temporibus illum non ut sunt ex aut earum neque. Iure harum similique autem commodi ratione enim quisquam soluta rem, eius dolor officiis necessitatibus voluptatibus obcaecati vel sint iusto. Eligendi reiciendis aut error rem? Hic aliquid tenetur porro itaque quaerat excepturi consequatur veniam, et alias molestiae, eius odio quae maiores suscipit iure voluptatibus sed dolor facere ipsa quod libero necessitatibus, placeat natus. Doloribus esse nobis culpa ab ut dolorem id expedita nesciunt necessitatibus ipsam natus accusantium eius eveniet eum, distinctio quos modi perspiciatis earum sequi nostrum consequatur quibusdam? Blanditiis iusto possimus officia odio animi repudiandae? Repellendus autem ut soluta facere accusamus magni aut architecto cumque cupiditate. Nostrum officiis, tenetur consequuntur quaerat alias animi debitis? Quae quas placeat iure alias totam quaerat fugit recusandae sed, earum ipsa nihil molestiae quam odit itaque, odio asperiores, mollitia porro ratione tempora laboriosam. Incidunt aliquam nobis sunt ut molestiae nam animi placeat neque vero ratione? Eaque?</p>
         </section>
@@ -69,7 +69,7 @@
 
     <aside pgs="pageShell-aside">
         <div pgs="pageShell-aside-scroll">
-            <div pgs="flexColumnTexts">
+            <div pgs="flexColumn">
                 <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab modi ut sunt est illum accusantium dolores eum aut cum itaque.</p>
             </div>
         </div>
@@ -79,7 +79,7 @@
 <div pgs="pageShell">
 
     <main pgs="pageShell-content">
-        <section pgs="flexColumnElements" id="sezione-uno">
+        <section pgs="flexColumn gapElements" id="sezione-uno">
             <strong>Lorem ipsum</strong>
             <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem dolore veniam nulla hic voluptatum harum illo voluptatem quos. Id quibusdam nemo, mollitia iusto quisquam tenetur doloremque corrupti natus nisi est sed consectetur deserunt? Fugiat consectetur iure aut id voluptate unde autem eius facilis dolorum? Eveniet, sit, excepturi iusto porro eos temporibus illum non ut sunt ex aut earum neque. Iure harum similique autem commodi ratione enim quisquam soluta rem, eius dolor officiis necessitatibus voluptatibus obcaecati vel sint iusto. Eligendi reiciendis aut error rem? Hic aliquid tenetur porro itaque quaerat excepturi consequatur veniam, et alias molestiae, eius odio quae maiores suscipit iure voluptatibus sed dolor facere ipsa quod libero necessitatibus, placeat natus. Doloribus esse nobis culpa ab ut dolorem id expedita nesciunt necessitatibus ipsam natus accusantium eius eveniet eum, distinctio quos modi perspiciatis earum sequi nostrum consequatur quibusdam? Blanditiis iusto possimus officia odio animi repudiandae? Repellendus autem ut soluta facere accusamus magni aut architecto cumque cupiditate. Nostrum officiis, tenetur consequuntur quaerat alias animi debitis? Quae quas placeat iure alias totam quaerat fugit recusandae sed, earum ipsa nihil molestiae quam odit itaque, odio asperiores, mollitia porro ratione tempora laboriosam. Incidunt aliquam nobis sunt ut molestiae nam animi placeat neque vero ratione? Eaque?</p>
         </section>

package/reference/html/layout/responsive.html

@@ -0,0 +1,83 @@
+<!--
+/**
+ * @title Responsive
+ * @description Responsive flex and grid layouts with configurable columns, spacing utilities, and wrapping controls.
+ *
+ * @pgs
+ * - flex: creates a responsive flex layout.
+ * - grid: creates a responsive grid layout.
+ * - flexColumn: stacks text inside each demonstration cell.
+ * - flexRow: arranges the gap demonstration items horizontally.
+ * - gapTexts: applies the text spacing token.
+ * - gapElements: applies the element spacing token.
+ * - gapSections: applies the section spacing token.
+ * - wrap: allows flex items to wrap.
+ * - nowrap: prevents flex items from wrapping.
+ * - box: makes the demonstration cells visible.
+ *
+ * @pgs-option
+ * - column-2: configures the flex example with two columns; column values from 1 through 8 are supported.
+ * - column-4: configures the grid example with four columns; column values from 1 through 8 are supported.
+ * - m2e: keeps two elements per row at the mobile breakpoint, returning to one column on watch-sized containers.
+ *
+ * @return Flex, grid, and gap examples in that order, using the current responsive layout API.
+ */
+-->
+
+<div pgs="flexColumn gapSections">
+    <section>
+        <strong>Flex</strong>
+        <div pgs="flexRow" pgs-option="column-2 m2e">
+            <article pgs="box flexColumn">
+                <strong>Column one</strong>
+                <p>First flex column.</p>
+            </article>
+            <article pgs="box flexColumn">
+                <strong>Column two</strong>
+                <p>Second flex column.</p>
+            </article>
+            <article pgs="box flexColumn">
+                <strong>Column three</strong>
+                <p>Third flex column.</p>
+            </article>
+        </div>
+    </section>
+
+    <section>
+        <strong>Grid</strong>
+        <div pgs="grid" pgs-option="column-4 m2e">
+            <article pgs="box flexColumn">
+                <strong>Column one</strong>
+                <p>First grid column.</p>
+            </article>
+            <article pgs="box flexColumn">
+                <strong>Column two</strong>
+                <p>Second grid column.</p>
+            </article>
+            <article pgs="box flexColumn">
+                <strong>Column three</strong>
+                <p>Third grid column.</p>
+            </article>
+            <article pgs="box flexColumn">
+                <strong>Column four</strong>
+                <p>Third grid column.</p>
+            </article>
+        </div>
+    </section>
+
+    <section pgs="flexRow">
+        <strong>Gap</strong>
+        <div pgs="flexRow gapTexts wrap">
+            <span pgs="box">Text gap</span>
+            <span pgs="box">Text gap</span>
+        </div>
+        <div pgs="flexRow gapElements wrap">
+            <span pgs="box">Element gap</span>
+            <span pgs="box">Element gap</span>
+        </div>
+        <div pgs="flexRow gapSections nowrap">
+            <span pgs="box">Section gap</span>
+            <span pgs="box">Section gap</span>
+        </div>
+    </section>
+</div>

package/reference/html/layout/section.html

@@ -0,0 +1,62 @@
+<!--
+/**
+ * @title Section
+ * @description Section variants that control width, padding, and specific content treatment while preserving shared vertical spacing.
+ *
+ * @pgs
+ * - 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
+ * - flexColumn: vertically organizes sections and inner content.
+ * - gapSections: applies section spacing to the outer collection.
+ * - gapElements: applies element spacing inside each section.
+ * - card-img: reuses card image treatment in the demonstration sections.
+ * - imgCover: scales images to the section width.
+ *
+ * @return HTML collection of the available section variants.
+ */
+-->
+
+<div pgs="flexColumn gapSections">
+    <section pgs="section flexColumn gapElements">
+        <div pgs="flexColumn">
+            <strong>Standard section</strong>
+            <p>Centered content inside a MyPGS section.</p>
+        </div>
+    </section>
+
+    <section pgs="sectionFull flexColumn gapElements">
+        <div pgs="flexColumn">
+            <strong>Full-width section</strong>
+            <p>Centered content inside a MyPGS section.</p>
+        </div>
+    </section>
+
+    <section pgs="sectionSpecificity flexColumn gapElements">
+        <div pgs="flexColumn">
+            <img pgs="card-img imgCover" src="https://placehold.co/800x200?text=Hero" alt="Placeholder image">
+        </div>
+        <div pgs="sectionSpecificity-child flexColumn">
+            <strong>Specificity-child section</strong>
+            <p>Centered content inside a MyPGS section.</p>
+        </div>
+    </section>
+
+    <section pgs="sectionMax flexColumn gapElements" style="background-color: var(--color-primary-soft)">
+        <div pgs="flexColumn">
+            <strong>Max-width section</strong>
+            <p>Centered content inside a MyPGS section.</p>
+        </div>
+    </section>
+
+    <section pgs="sectionNoPadding flexColumn gapElements">
+        <div pgs="flexColumn">
+            <img pgs="card-img imgCover" src="https://placehold.co/800x500?text=HI!" alt="Placeholder image">
+        </div>
+    </section>
+</div>

package/reference/html/patterns/cookieConsent.html

@@ -0,0 +1,84 @@
+<!--
+/**
+ * @title Cookie Consent
+ * @description Accessible pattern for collecting and storing analytics cookie consent, applying preferences, and loading Google Analytics only when authorized.
+ *
+ * @pgs
+ * - 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.
+ *
+ * @pgs-option
+ * - buttonStrong: presents full acceptance as the primary action.
+ *
+ * @related
+ * - 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.
+ *
+ * @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> Cookies and privacy <br></p>
+    <h2>Your privacy comes first</h2>
+
+    <p>
+        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>
+        <a href="/privacy-policy/" target="_blank" rel="noopener">Privacy Policy</a> -
+        <a href="/cookie-policy/" target="_blank" rel="noopener">Cookie Policy</a>
+    </p>
+
+    <div pgs="cookieConsent-panel flexColumn" role="group" aria-label="Cookie preferences">
+        <div pgs="flexRow nowrap cookieConsent-featureEssential">
+            <div>
+                <p>
+                    <strong>Essential cookies</strong>
+                    <br>
+                    <small>Always active to ensure the website works correctly.</small>
+                </p>
+            </div>
+
+            <span pgs="cookieConsent-panel-badge">Active</span>
+        </div>
+
+        <div pgs="flexRow cookieConsent-featureAnalytics">
+            <label pgs="toggle">
+                <p>
+                    <strong>Analytics</strong>
+                    <br>
+                    <small>Browsing data collected in aggregate form for anonymous statistics.</small>
+                </p>
+
+                <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>Selected only
+        </button>
+
+        <button type="button" pgs="button cookieConsent-actionAccept" pgs-option="buttonStrong">
+            <i class="fa-solid fa-check"></i> Accept all
+        </button>
+    </div>
+</section>

package/{templates → reference}/react/components/accordion.jsx

@@ -1,25 +1,25 @@
 export default function Accordion() {
     return (
-        <ul pgs="grid-1 gapTexts">
+        <ul pgs="grid gapTexts" pgs-option="column-1">
             <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/reference/react/components/alerts.jsx

@@ -0,0 +1,46 @@
+const alerts = [
+    {
+        state: "info",
+        role: "status",
+        icon: "fa-circle-info",
+        title: "Information",
+        message: "Your profile information can be updated at any time.",
+    },
+    {
+        state: "success",
+        role: "status",
+        icon: "fa-circle-check",
+        title: "Changes saved",
+        message: "Your preferences were updated successfully.",
+    },
+    {
+        state: "warning",
+        role: "alert",
+        icon: "fa-triangle-exclamation",
+        title: "Check your information",
+        message: "Some fields may require your attention before continuing.",
+    },
+    {
+        state: "error",
+        role: "alert",
+        icon: "fa-circle-xmark",
+        title: "Unable to save",
+        message: "Correct the reported errors and try again.",
+    },
+];
+
+export default function Alerts() {
+    return (
+        <div pgs="flexColumn gapElements">
+            {alerts.map(({ state, role, icon, title, message }) => (
+                <div key={state} pgs="alert" pgs-state={state} role={role}>
+                    <i pgs="alert-icon" className={`fa-solid ${icon}`} aria-hidden="true"></i>
+                    <div pgs="alert-content">
+                        <strong pgs="alert-title">{title}</strong>
+                        <p>{message}</p>
+                    </div>
+                </div>
+            ))}
+        </div>
+    );
+}

package/{templates → reference}/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>

package/{templates → reference}/react/components/button.jsx

@@ -7,26 +7,26 @@ 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>
 
-            <button pgs="buttonStrong" type="button">
+            <button pgs="button" pgs-option="buttonStrong" type="button">
                 <i className="fa-solid fa-check" aria-hidden="true"></i>
                 Submit
             </button>
 
-            <button pgs="buttonIcon" type="button" aria-label="Impostazioni">
+            <button pgs="button" pgs-option="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="button" pgs-option="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="button" pgs-option="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 → reference}/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">
+            <div pgs="flexColumn">
                 <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">
+                <div pgs="flexColumn">
                     <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 → reference}/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 → reference}/react/components/form.jsx

@@ -12,16 +12,16 @@ 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>
                 <input type="checkbox" name="privacy" required />
             </label>
 
-            <button pgs="buttonStrong" type="submit">
+            <button pgs="button" pgs-option="buttonStrong" type="submit">
                 <i className="fa-solid fa-paper-plane" aria-hidden="true"></i>
                 Invia
             </button>

package/{templates → reference}/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>
+                        <div pgs="modal-dialog-content-scroll flexColumn gapElements">
+                            <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="button" pgs-option="buttonStrong" type="button">Save changes</button>
                             </div>
                         </div>
                     </div>