mypgs 2.0.0 → 3.0.0

package/docs/helper-javascript.md

@@ -1,4 +1,4 @@
-# Helper JavaScript
+# JavaScript helper
 
 `pgs(root)` permette di cercare e modificare token PGS senza scrivere selettori manuali:
 
@@ -18,7 +18,7 @@ Ricerca disponibile su `Document` ed `Element`:
 - `pgs(root).querySelector(token)`: restituisce il primo discendente che contiene il token `pgs` richiesto.
 - `pgs(root).querySelectorAll(token)`: restituisce tutti i discendenti corrispondenti; accetta anche un array o token separati da virgola.
 
-Manipolazione disponibile quando `root` è un `Element`:
+Manipulation available when `root` è un `Element`:
 
 - `pgs(element).add(...tokens)`: aggiunge token evitando duplicati e restituisce l'helper.
 - `pgs(element).remove(...tokens)`: rimuove i token indicati e restituisce l'helper.
@@ -55,14 +55,14 @@ pgs(modal).option.getValueBrackets("containerID");
 - `option.setValueBrackets(key, value)`: imposta o sostituisce una singola opzione parametrizzata.
 - `option.value`: legge o sostituisce l'intero attributo `pgs-option`.
 
-Esempio markup con opzioni:
+Example markup with options:
 
 ```html
 <div pgs="modal" pgs-option="containerID[modal-container]"></div>
 <div pgs="slides" pgs-option="singleScroll shadowDesktop"></div>
 ```
 
-## JavaScript inizializzato automaticamente
+## Automatically initialized JavaScript
 
 Importando `mypgs`, l'entrypoint inizializza:
 
@@ -118,7 +118,7 @@ pgs.dropdown.api(dropdownEl)?.close();
 pgs.slides.api(slidesEl)?.next();
 ```
 
-Shortcut disponibili dopo `import "mypgs"`:
+Shortcuts available after `import "mypgs"`:
 
 - `pgs.svg`
 - `pgs.accordion`
@@ -134,9 +134,9 @@ Shortcut disponibili dopo `import "mypgs"`:
 - `pgs.formValidate`
 - `pgs.scrollHorizontal`
 
-## Riferimento API per componente
+## Component API reference
 
-Le firme, i parametri e la funzione di ogni metodo sono generati dai commenti nei template:
+Le firme, i parametri e la funzione di ogni metodo sono generati dai commenti nei riferimenti HTML:
 
 - [Accordion](components/accordion.md#api-javascript)
 - [Dropdown](components/dropdown.md#api-javascript)
@@ -160,7 +160,7 @@ I componenti non elencati non espongono attualmente un'API JavaScript specifica.
 - `pgs.svg.applyColorsLottie(isDarkMode)`: aggiorna i colori degli SVG interni ai player Lottie marcati con `lottieChangeColor`.
 - `pgs.svg.eventChangeColor`: contiene il nome dell'evento `pgs:svg:changeColor` ascoltato dal modulo SVG.
 
-## Struttura dei moduli componente
+## Component module structure
 
 I componenti con istanze seguono questo schema:
 

package/docs/layout/body.md

@@ -1,27 +1,27 @@
-<!-- File generato automaticamente da templates/html/layout/body.html. Modificare templates/html/layout/body.html e rieseguire npm run docs:generate. -->
+<!-- Automatically generated from reference/html/layout/body.html. Edit reference/html/layout/body.html and run npm run docs:generate again. -->
 
 # Body
 
-Documento HTML di base che abilita MyPGS, configura i metadati essenziali e applica al body le varianti condivise di sfondo, testo e titoli.
+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 States
 
-- `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.
 
 ## Output
 
-Scheletro HTML completo necessario per inizializzare la libreria MyPGS.
+Complete HTML skeleton required to initialize the MyPGS library.
 
-## Esempio
+## Example
 
 ```html
 <!DOCTYPE html>

package/docs/layout/footer.md

@@ -1,44 +1,48 @@
-<!-- File generato automaticamente da templates/html/layout/footer.html. Modificare templates/html/layout/footer.html e rieseguire npm run docs:generate. -->
+<!-- Automatically generated from reference/html/layout/footer.html. Edit reference/html/layout/footer.html and run npm run docs:generate again. -->
 
 # Footer
 
-Piè di pagina completo con controllo tema, area di brand, navigazione, contenuti informativi e collegamento alle preferenze cookie.
+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.
 
-## Elementi correlati
+## PGS Options
 
-- `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.
+- `column-3`: configures the footer flex layout with three columns.
+
+## Related elements
+
+- `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.
+- `flexRow`: 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.
 
 ## Output
 
-Struttura HTML completa del footer con brand, menu e area legale.
+Complete footer HTML structure with brand, menu, and legal area.
 
-## Esempio
+## Example
 
 ```html
 <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>
 
     <section pgs="footer-top section">
-        <div pgs="footer-top-content flex-3">
+        <div pgs="footer-top-content flexRow" pgs-option="column-3">
             <div pgs="footer-brand">
                 <a aria-label="Logo" pgs="logo" href="/">
                     <span pgs="logo-text">MyPGS</span>
@@ -60,11 +64,11 @@ Struttura HTML completa del footer con brand, menu e area legale.
 
     <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/docs/layout/header.md

@@ -1,50 +1,51 @@
-<!-- File generato automaticamente da templates/html/layout/header.html. Modificare templates/html/layout/header.html e rieseguire npm run docs:generate. -->
+<!-- Automatically generated from reference/html/layout/header.html. Edit reference/html/layout/header.html and run npm run docs:generate again. -->
 
 # Header
 
-Intestazione responsive che misura lo spazio disponibile, alterna contenuti desktop e mobile e integra menu, tema scuro e navigazione modale.
+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 Options
 
-- `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.
+- `buttonIcon`: presents theme and hamburger controls as icon buttons.
 
 ## PGS States
 
-- `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.
 
-## Elementi correlati
+## Related elements
 
-- `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.
+- `button`: provides the base styling for header controls.
+- `logo`: inserts the brand into the initial area.
+- `logo-text`: uses the text variant of the logo.
+- `menu`: provides desktop and mobile navigation.
+- `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.
 
 ## Output
 
-Header HTML completo con navigazione desktop e pannello mobile laterale.
+Complete header HTML with desktop navigation and a side mobile panel.
 
-## Esempio
+## Example
 
 ```html
 <header pgs="header">
@@ -56,10 +57,10 @@ Header HTML completo con navigazione desktop e pannello mobile laterale.
 		</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>
@@ -69,21 +70,21 @@ Header HTML completo con navigazione desktop e pannello mobile laterale.
 		</div>
 
 		<div pgs="header-element-alwaysOnLast">
-			<button pgs="buttonIcon toggleDarkmode" type="button" aria-label="Cambia tema">
+			<button pgs="button toggleDarkmode" pgs-option="buttonIcon" type="button" aria-label="Change theme">
 				<i class="fa-solid fa-moon"></i>
 			</button>
 		</div>
 
 		<div pgs="header-element-hamburger modal" pgs-option="containerPGS[header] ">
 
-			<button pgs="buttonIcon modal-button modal-close header-element-hamburger-button" type="button"></button>
+			<button pgs="button modal-button modal-close header-element-hamburger-button" pgs-option="buttonIcon" type="button"></button>
 
 			<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>

package/docs/layout/pageShell.md

@@ -1,39 +1,39 @@
-<!-- File generato automaticamente da templates/html/layout/pageShell.html. Modificare templates/html/layout/pageShell.html e rieseguire npm run docs:generate. -->
+<!-- Automatically generated from reference/html/layout/pageShell.html. Edit reference/html/layout/pageShell.html and run npm run docs:generate again. -->
 
 # Page Shell
 
-Layout di pagina responsive che combina un contenuto principale con zero, una o due barre laterali scorrevoli, adattandone larghezza e posizione.
+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.
 
-## Elementi correlati
+## Related elements
 
-- `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.
 
 ## Output
 
-Quattro configurazioni HTML di page shell con due, una o nessuna barra laterale.
+Four page-shell HTML configurations with two, one, or no sidebars.
 
-## Esempio
+## Example
 
 ```html
 <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>
@@ -41,7 +41,7 @@ Quattro configurazioni HTML di page shell con due, una o nessuna barra laterale.
 
     <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>
@@ -50,14 +50,14 @@ Quattro configurazioni HTML di page shell con due, una o nessuna barra laterale.
 <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>
@@ -67,7 +67,7 @@ Quattro configurazioni HTML di page shell con due, una o nessuna barra laterale.
 <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>
@@ -75,7 +75,7 @@ Quattro configurazioni HTML di page shell con due, una o nessuna barra laterale.
 
     <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>
@@ -85,7 +85,7 @@ Quattro configurazioni HTML di page shell con due, una o nessuna barra laterale.
 <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/docs/layout/responsive.md

@@ -0,0 +1,90 @@
+<!-- Automatically generated from reference/html/layout/responsive.html. Edit reference/html/layout/responsive.html and run npm run docs:generate again. -->
+
+# Responsive
+
+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 Options
+
+- `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.
+
+## Output
+
+Flex, grid, and gap examples in that order, using the current responsive layout API.
+
+## Example
+
+```html
+<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>
+```