mypgs 1.6.0 → 2.0.0

package/docs/layout/flex.md

@@ -0,0 +1,116 @@
+<!-- File generato automaticamente da templates/html/layout/flex.html. Modificare templates/html/layout/flex.html e rieseguire npm run docs:generate. -->
+
+# Flex
+
+Esempi di layout flex responsive che distribuiscono da due a sei elementi per riga adattando automaticamente la disposizione allo spazio disponibile.
+
+## PGS
+
+- `flex-2`: crea una distribuzione responsive fino a due elementi per riga.
+- `flex-3`: crea una distribuzione responsive fino a tre elementi per riga.
+- `flex-4`: crea una distribuzione responsive fino a quattro elementi per riga.
+- `flex-6`: crea una distribuzione responsive fino a sei elementi per riga.
+
+## Elementi correlati
+
+- `container`: definisce il contesto contenitore dell'introduzione.
+- `flexColumnTexts`: organizza verticalmente e distanzia testi e contenuti delle card.
+- `card`: rende visibili le celle dimostrative del layout flex.
+
+## Output
+
+Raccolta HTML dei layout flex responsive a due, tre, quattro e sei elementi.
+
+## Esempio
+
+```html
+<div pgs="container flexColumnTexts">
+    <strong>Sezione standard</strong>
+    <p>Contenuto centrato dentro una sezione MyPGS.</p>
+</div>
+
+
+<div pgs="flex-2">
+    <article pgs="card flexColumnTexts">
+        <strong>Colonna uno</strong>
+        <p>Contenuto della prima colonna.</p>
+    </article>
+
+    <article pgs="card flexColumnTexts">
+        <strong>Colonna due</strong>
+        <p>Contenuto della seconda colonna.</p>
+    </article>
+</div>
+
+
+<div pgs="flex-3">
+    <article pgs="card flexColumnTexts">
+        <strong>Colonna uno</strong>
+        <p>Contenuto della prima colonna.</p>
+    </article>
+
+    <article pgs="card flexColumnTexts">
+        <strong>Colonna due</strong>
+        <p>Contenuto della seconda colonna.</p>
+    </article>
+
+    <article pgs="card flexColumnTexts">
+        <strong>Colonna tre</strong>
+        <p>Contenuto della terza colonna.</p>
+    </article>
+</div>
+
+
+<div pgs="flex-4">
+    <article pgs="card flexColumnTexts">
+        <strong>Colonna uno</strong>
+        <p>Contenuto della prima colonna.</p>
+    </article>
+
+    <article pgs="card flexColumnTexts">
+        <strong>Colonna due</strong>
+        <p>Contenuto della seconda colonna.</p>
+    </article>
+
+    <article pgs="card flexColumnTexts">
+        <strong>Colonna tre</strong>
+        <p>Contenuto della terza colonna.</p>
+    </article>
+    <article pgs="card flexColumnTexts">
+        <strong>Colonna quattro</strong>
+        <p>Contenuto della quarta colonna.</p>
+    </article>
+</div>
+
+<div pgs="flex-6">
+    <article pgs="card flexColumnTexts">
+        <strong>Colonna uno</strong>
+        <p>Contenuto della prima colonna.</p>
+    </article>
+
+    <article pgs="card flexColumnTexts">
+        <strong>Colonna due</strong>
+        <p>Contenuto della seconda colonna.</p>
+    </article>
+
+    <article pgs="card flexColumnTexts">
+        <strong>Colonna tre</strong>
+        <p>Contenuto della terza colonna.</p>
+    </article>
+
+    <article pgs="card flexColumnTexts">
+        <strong>Colonna quattro</strong>
+        <p>Contenuto della quarta colonna.</p>
+    </article>
+
+    <article pgs="card flexColumnTexts">
+        <strong>Colonna cinque</strong>
+        <p>Contenuto della quinta colonna.</p>
+    </article>
+
+    <article pgs="card flexColumnTexts">
+        <strong>Colonna sei</strong>
+        <p>Contenuto della sesta colonna.</p>
+    </article>
+</div
+```

package/docs/layout/footer.md

@@ -0,0 +1,71 @@
+<!-- File generato automaticamente da templates/html/layout/footer.html. Modificare templates/html/layout/footer.html e rieseguire npm run docs:generate. -->
+
+# Footer
+
+Piè di pagina completo con controllo tema, area di brand, navigazione, contenuti informativi e collegamento alle preferenze cookie.
+
+## 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.
+
+## Elementi correlati
+
+- `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.
+
+## Output
+
+Struttura HTML completa del footer con brand, menu e area legale.
+
+## Esempio
+
+```html
+<footer pgs="footer">
+    <button pgs="button toggleDarkmode" type="button" aria-label="Cambia tema">
+        <i class="fa-solid fa-moon"></i>
+    </button>
+
+    <section pgs="footer-top section">
+        <div pgs="footer-top-content flex-3">
+            <div pgs="footer-brand">
+                <a aria-label="Logo" pgs="logo" href="/">
+                    <span pgs="logo-text">MyPGS</span>
+                </a>
+                <p pgs="footer-brand-motto">Componenti frontend riutilizzabili.</p>
+            </div>
+
+            <div pgs="footer-content">
+                <h2>Menu</h2>
+                <nav aria-label="Menu footer">
+                    <ul>
+                        <li><a href="/">Home</a></li>
+                        <li><a href="/contatti">Contatti</a></li>
+                    </ul>
+                </nav>
+            </div>
+        </div>
+    </section>
+
+    <section pgs="footer-legal section">
+        <div pgs="footer-legal-content">
+            <button type="button" pgs="button cookieConsent-actionOpen">Preferenze cookie</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>
+        </div>
+    </section>
+</footer>
+```

package/docs/layout/grid.md

@@ -0,0 +1,116 @@
+<!-- File generato automaticamente da templates/html/layout/grid.html. Modificare templates/html/layout/grid.html e rieseguire npm run docs:generate. -->
+
+# Grid
+
+Esempi di griglie responsive che distribuiscono da due a sei colonne mantenendo gap e ridimensionamento coerenti con il design system.
+
+## 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.
+
+## Elementi correlati
+
+- `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.
+
+## Output
+
+Raccolta HTML delle griglie responsive a due, tre, quattro e sei colonne.
+
+## Esempio
+
+```html
+<div pgs="container flexColumnTexts">
+    <strong>Sezione standard</strong>
+    <p>Contenuto centrato dentro una sezione MyPGS.</p>
+</div>
+
+
+<div pgs="grid-2">
+    <article pgs="card flexColumnTexts">
+        <strong>Colonna uno</strong>
+        <p>Contenuto della prima colonna.</p>
+    </article>
+
+    <article pgs="card flexColumnTexts">
+        <strong>Colonna due</strong>
+        <p>Contenuto della seconda colonna.</p>
+    </article>
+</div>
+
+
+<div pgs="grid-3">
+    <article pgs="card flexColumnTexts">
+        <strong>Colonna uno</strong>
+        <p>Contenuto della prima colonna.</p>
+    </article>
+
+    <article pgs="card flexColumnTexts">
+        <strong>Colonna due</strong>
+        <p>Contenuto della seconda colonna.</p>
+    </article>
+
+    <article pgs="card flexColumnTexts">
+        <strong>Colonna tre</strong>
+        <p>Contenuto della terza colonna.</p>
+    </article>
+</div>
+
+
+<div pgs="grid-4">
+    <article pgs="card flexColumnTexts">
+        <strong>Colonna uno</strong>
+        <p>Contenuto della prima colonna.</p>
+    </article>
+
+    <article pgs="card flexColumnTexts">
+        <strong>Colonna due</strong>
+        <p>Contenuto della seconda colonna.</p>
+    </article>
+
+    <article pgs="card flexColumnTexts">
+        <strong>Colonna tre</strong>
+        <p>Contenuto della terza colonna.</p>
+    </article>
+    <article pgs="card flexColumnTexts">
+        <strong>Colonna quattro</strong>
+        <p>Contenuto della quarta colonna.</p>
+    </article>
+</div>
+
+<div pgs="grid-6">
+    <article pgs="card flexColumnTexts">
+        <strong>Colonna uno</strong>
+        <p>Contenuto della prima colonna.</p>
+    </article>
+
+    <article pgs="card flexColumnTexts">
+        <strong>Colonna due</strong>
+        <p>Contenuto della seconda colonna.</p>
+    </article>
+
+    <article pgs="card flexColumnTexts">
+        <strong>Colonna tre</strong>
+        <p>Contenuto della terza colonna.</p>
+    </article>
+
+    <article pgs="card flexColumnTexts">
+        <strong>Colonna quattro</strong>
+        <p>Contenuto della quarta colonna.</p>
+    </article>
+
+    <article pgs="card flexColumnTexts">
+        <strong>Colonna cinque</strong>
+        <p>Contenuto della quinta colonna.</p>
+    </article>
+
+    <article pgs="card flexColumnTexts">
+        <strong>Colonna sei</strong>
+        <p>Contenuto della sesta colonna.</p>
+    </article>
+</div
+```

package/docs/layout/header.md

@@ -0,0 +1,116 @@
+<!-- File generato automaticamente da templates/html/layout/header.html. Modificare templates/html/layout/header.html e rieseguire npm run docs:generate. -->
+
+# Header
+
+Intestazione responsive che misura lo spazio disponibile, alterna contenuti desktop e mobile e integra menu, tema scuro e navigazione modale.
+
+## 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.
+
+## 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.
+
+## PGS States
+
+- `mobileActive`: viene applicato a header e header-element quando larghezza o viewport richiedono la navigazione mobile.
+
+## Elementi correlati
+
+- `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.
+
+## Output
+
+Header HTML completo con navigazione desktop e pannello mobile laterale.
+
+## Esempio
+
+```html
+<header pgs="header">
+	<div pgs="header-element">
+		<div pgs="header-element-alwaysOn">
+			<a aria-label="Logo" pgs="logo" href="/">
+				<span pgs="logo-text">MyPGS</span>
+			</a>
+		</div>
+
+		<div pgs="header-element-onlyDesktop">
+			<nav pgs="menu" pgs-option="horizontal menuHeader" aria-label="Menu principale">
+				<ul>
+					<li><a href="/">Home</a></li>
+					<li><a href="#componenti">Componenti</a></li>
+					<li><a href="#layout">Layout</a></li>
+				</ul>
+			</nav>
+		</div>
+
+		<div pgs="header-element-onlyMobile">
+		</div>
+
+		<div pgs="header-element-alwaysOnLast">
+			<button pgs="buttonIcon toggleDarkmode" type="button" aria-label="Cambia tema">
+				<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>
+
+			<dialog pgs="modal-dialog" pgs-option="right">
+				<div pgs="modal-dialog-content">
+					<nav pgs="menu" pgs-option="vertical menuHeader" aria-label="Menu mobile">
+						<ul>
+							<li><a href="/">Home</a></li>
+							<li><a href="#componenti">Componenti</a></li>
+							<li><a href="#layout">Layout</a></li>
+						</ul>
+					</nav>
+				</div>
+			</dialog>
+		</div>
+	</div>
+
+	<!-- //# HEADER BOTTOM -->
+
+	<script>
+		const addPgsState = (element, state) => {
+			if (!element) return;
+
+			const states = element.getAttribute("pgs-state")?.split(/\s+/) ?? [];
+			element.setAttribute("pgs-state", [...new Set([...states, state])].join(" "));
+		};
+
+		if (localStorage.getItem("screenIsDarkMode") === "true") {
+			addPgsState(document.documentElement, "darkmode");
+			addPgsState(document.body, "darkmode");
+		}
+
+		if (window.innerWidth < 600) {
+			addPgsState(document.querySelector("header"), "mobileActive");
+			addPgsState(document.querySelector("[pgs~=header-element]"), "mobileActive");
+		}
+	</script>
+</header>
+```

package/docs/layout/pageShell.md

@@ -0,0 +1,94 @@
+<!-- File generato automaticamente da templates/html/layout/pageShell.html. Modificare templates/html/layout/pageShell.html e rieseguire npm run docs:generate. -->
+
+# Page Shell
+
+Layout di pagina responsive che combina un contenuto principale con zero, una o due barre laterali scorrevoli, adattandone larghezza e posizione.
+
+## 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.
+
+## Elementi correlati
+
+- `flexColumnTexts`: organizza i testi contenuti nelle barre laterali.
+- `flexColumnElements`: organizza verticalmente gli elementi delle sezioni principali.
+
+## Output
+
+Quattro configurazioni HTML di page shell con due, una o nessuna barra laterale.
+
+## Esempio
+
+```html
+<div pgs="pageShell">
+    <aside pgs="pageShell-aside">
+        <div pgs="pageShell-aside-scroll">
+            <div pgs="flexColumnTexts">
+                <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">
+            <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>
+    </main>
+
+    <aside pgs="pageShell-aside">
+        <div pgs="pageShell-aside-scroll">
+            <div pgs="flexColumnTexts">
+                <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>
+</div>
+<div pgs="pageShell">
+    <aside pgs="pageShell-aside">
+        <div pgs="pageShell-aside-scroll">
+            <div pgs="flexColumnTexts">
+                <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">
+            <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>
+    </main>
+</div>
+
+<div pgs="pageShell">
+
+    <main pgs="pageShell-content">
+        <section pgs="flexColumnElements" 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>
+    </main>
+
+    <aside pgs="pageShell-aside">
+        <div pgs="pageShell-aside-scroll">
+            <div pgs="flexColumnTexts">
+                <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>
+</div>
+
+<div pgs="pageShell">
+
+    <main pgs="pageShell-content">
+        <section pgs="flexColumnElements" 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>
+    </main>
+</div>
+```

package/docs/layout/section.md

@@ -0,0 +1,69 @@
+<!-- File generato automaticamente da templates/html/layout/section.html. Modificare templates/html/layout/section.html e rieseguire npm run docs:generate. -->
+
+# Section
+
+Varianti di sezione che controllano larghezza, padding e trattamento di contenuti specifici mantenendo la spaziatura verticale condivisa.
+
+## 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.
+
+## Elementi correlati
+
+- `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.
+
+## Output
+
+Raccolta HTML delle varianti di section disponibili.
+
+## Esempio
+
+```html
+<div pgs="flexColumnSections">
+    <section pgs="section flexColumnElements">
+        <div pgs="flexColumnTexts">
+            <strong>Sezione standard</strong>
+            <p>Contenuto centrato dentro una sezione MyPGS.</p>
+        </div>
+    </section>
+
+    <section pgs="sectionFull flexColumnElements">
+        <div pgs="flexColumnTexts">
+            <strong>Sezione full-width</strong>
+            <p>Contenuto centrato dentro una sezione MyPGS.</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">
+        </div>
+        <div pgs="sectionSpecificity-child flexColumnTexts">
+            <strong>Sezione specificità-child</strong>
+            <p>Contenuto centrato dentro una sezione MyPGS.</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>
+        </div>
+    </section>
+
+    <section pgs="sectionNoPadding flexColumnElements">
+        <div pgs="flexColumnTexts">
+            <img pgs="card-img imgCover" src="https://placehold.co/800x500?text=HI!" alt="Immagine segnaposto">
+        </div>
+    </section>
+</div>
+```