mypgs 2.1.0 → 3.0.0

package/{templates → reference}/html/components/notification.html

@@ -13,6 +13,7 @@
  * @pgs-option
  * - toast: identifies the toast element used by Notification.
  * - notification: identifies the notification element used by Notification.
+ * - buttonClose: styles the dismiss action generated at runtime.
  *
  * @pgs-state
  * - success: identifies the success element used by Notification.
@@ -35,7 +36,6 @@
  *
  * @related
  * - hidden: uses the related hidden component or utility in this example.
- * - buttonClose: uses the related buttonClose component or utility in this example.
  *
  * @return Complete HTML markup and usage example for Notification.
  */
@@ -68,4 +68,4 @@
         pgs="hidden notificationTrigger"
         pgs-option='notification[{"title":"Title","message":"Message","element":"notification","type":"info","icon":"<i class=\"fa-solid fa-rocket\"></i>","duration":"4000","link":"/page/"}]'>
     </div>
--->
+-->

package/{templates → reference}/html/components/search.html

@@ -12,6 +12,8 @@
  *
  * @pgs-option
  * - containerPGS: identifies the containerPGS element used by Search.
+ * - buttonNohover: disables hover behavior on the search container.
+ * - buttonIcon: presents search and close actions as icon buttons.
  *
  * @pgs-state
  * - open: identifies the open element used by Search.
@@ -38,11 +40,10 @@
  * - instance.setActiveIndex(index): provides the documented operation through the component public API.
  *
  * @related
- * - buttonNohover: uses the related buttonNohover component or utility in this example.
+ * - button: provides the base styling for search controls.
  * - modal: uses the related modal component or utility in this example.
  * - modal-button: uses the related modal-button component or utility in this example.
  * - modal-close: uses the related modal-close component or utility in this example.
- * - buttonIcon: uses the related buttonIcon component or utility in this example.
  * - flexRow: uses the related flexRow component or utility in this example.
  * - section: uses the related section component or utility in this example.
  *
@@ -50,7 +51,7 @@
  */
 -->
 
-<form pgs="buttonNohover search" autocomplete="off" action="" method="get">
+<form pgs="button search" pgs-option="buttonNohover" autocomplete="off" action="" method="get">
     <button type="submit" title="Search"><i class="fa-solid fa-search"></i></button>
     <input type="search" name="s" placeholder="Search" value="">
     <ul pgs="search-suggestions"></ul>
@@ -58,14 +59,14 @@
 
 <div pgs="modal search-modal" pgs-option="containerPGS[header]">
 
-    <button type="button" pgs="modal-button buttonIcon" title="Search">
+    <button type="button" pgs="modal-button button" pgs-option="buttonIcon" title="Search">
         <i class="fa-solid fa-search"></i>
     </button>
 
     <dialog>
         <div pgs="flexRow section search-mobile">
 
-            <form pgs="buttonNohover search" autocomplete="off" action="/" method="get">
+            <form pgs="button search" pgs-option="buttonNohover" autocomplete="off" action="/" method="get">
                 <button type="submit" title="Search">
                     <i class="fa-solid fa-search"></i>
                 </button>
@@ -73,7 +74,7 @@
                 <input type="search" name="s" placeholder="Search" value="">
                 <ul pgs="search-suggestions"></ul>
 
-                <button type="button" pgs="modal-close buttonIcon">
+                <button type="button" pgs="modal-close button" pgs-option="buttonIcon">
                     <i class="fa-solid fa-close"></i>
                 </button>
             </form>

package/{templates → reference}/html/components/slides.html

@@ -15,6 +15,7 @@
  * - shadowDesktop: identifies the shadowDesktop element used by Slides.
  * - notScrollAnimation: identifies the notScrollAnimation element used by Slides.
  * - notScrollWithMouse: identifies the notScrollWithMouse element used by Slides.
+ * - buttonIcon: styles the previous and next actions generated at runtime.
  *
  * @api
  * - pgs.slides.init(root): initializes matching elements within the specified root.
@@ -34,8 +35,6 @@
  * - card-img: uses the related card-img component or utility in this example.
  * - imgCover: uses the related imgCover component or utility in this example.
  * - flexColumn: uses the related flexColumn component or utility in this example.
- * - flexColumnTexts: uses the related flexColumnTexts component or utility in this example.
- * - buttonIcon: uses the related buttonIcon component or utility in this example.
  *
  * @return Complete HTML markup and usage example for Slides.
  */
@@ -46,7 +45,7 @@
         <li>
             <article pgs="card flexColumn">
                 <img pgs="card-img imgCover" src="https://placehold.co/800x500?text=Slide+1" alt="Slide 1">
-                <div pgs="flexColumnTexts">
+                <div pgs="flexColumn">
                     <h3>Slide uno</h3>
                     <p>First slide content.</p>
                 </div>
@@ -56,7 +55,7 @@
         <li>
             <article pgs="card flexColumn">
                 <img pgs="card-img imgCover" src="https://placehold.co/800x500?text=Slide+2" alt="Slide 2">
-                <div pgs="flexColumnTexts">
+                <div pgs="flexColumn">
                     <h3>Slide due</h3>
                     <p>Second slide content.</p>
                 </div>
@@ -66,7 +65,7 @@
         <li>
             <article pgs="card flexColumn">
                 <img pgs="card-img imgCover" src="https://placehold.co/800x500?text=Slide+3" alt="Slide 3">
-                <div pgs="flexColumnTexts">
+                <div pgs="flexColumn">
                     <h3>Slide tre</h3>
                     <p>Third slide content.</p>
                 </div>

package/{templates → reference}/html/components/stepTabs.html

@@ -36,8 +36,8 @@
  * - instance.getState(): provides the documented operation through the component public API.
  *
  * @related
- * - flexColumnElements: uses the related flexColumnElements component or utility in this example.
- * - flexColumnTexts: uses the related flexColumnTexts component or utility in this example.
+ * - flexColumn: uses the related flexColumn component or utility in this example.
+ * - gapElements: applies element spacing to the step tab container.
  * - flexRow: uses the related flexRow component or utility in this example.
  * - button: uses the related button component or utility in this example.
  *
@@ -45,21 +45,21 @@
  */
 -->
 
-<div pgs="stepTabs flexColumnElements">
+<div pgs="stepTabs flexColumn gapElements">
     <div pgs="stepTabs-dots" aria-label="Avanzamento"></div>
 
     <div pgs="stepTabs-container">
-        <section pgs="tab flexColumnTexts" tabindex="-1" pgs-option="tabIcon[fa-user]">
+        <section pgs="tab flexColumn" tabindex="-1" pgs-option="tabIcon[fa-user]">
             <h3>Personal details</h3>
             <p>First tab content.</p>
         </section>
 
-        <section pgs="tab flexColumnTexts" tabindex="-1" pgs-option="tabIcon[fa-list-check]">
+        <section pgs="tab flexColumn" tabindex="-1" pgs-option="tabIcon[fa-list-check]">
             <h3>Preferences</h3>
             <p>Second tab content.</p>
         </section>
 
-        <section pgs="tab flexColumnTexts" tabindex="-1" pgs-option="tabIcon[fa-check]">
+        <section pgs="tab flexColumn" tabindex="-1" pgs-option="tabIcon[fa-check]">
             <h3>Confirmation</h3>
             <p>Third tab content.</p>
         </section>

package/{templates → reference}/html/components/tooltip.html

@@ -10,6 +10,7 @@
  *
  * @pgs-option
  * - position: identifies the position element used by Tooltip.
+ * - buttonMini: applies the smallest button variant to the tooltip trigger.
  *
  * @pgs-state
  * - open: identifies the open element used by Tooltip.
@@ -24,17 +25,17 @@
  * - instance.isOpen(): returns true when the component is open.
  *
  * @related
+ * - button: provides the base styling for the tooltip trigger.
  * - dropdown: uses the related dropdown component or utility in this example.
  * - dropdown-button: uses the related dropdown-button component or utility in this example.
  * - dropdown-content: uses the related dropdown-content component or utility in this example.
- * - buttonMini: uses the related buttonMini component or utility in this example.
  *
  * @return Complete HTML markup and usage example for Tooltip.
  */
 -->
 
 <span pgs="dropdown tooltip">
-    <button pgs="dropdown-button buttonMini tooltip-button" title="open-tooltip" type="button">
+    <button pgs="dropdown-button button tooltip-button" pgs-option="buttonMini" title="open-tooltip" type="button">
         <i class="fa-solid fa-info"></i>
     </button>
     <div pgs="dropdown-content tooltip-content">

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

@@ -13,11 +13,14 @@
  * - footer-legal: identifies the lower section dedicated to legal information.
  * - footer-legal-content: identifies the content of the legal section.
  *
+ * @pgs-option
+ * - column-3: configures the footer flex layout with three columns.
+ *
  * @related
  * - button: presents theme and cookie preference controls as buttons.
  * - toggleDarkmode: connects the control to the global light or dark theme handler.
  * - section: applies the shared section structure to the upper and legal areas.
- * - flex-3: distributes the upper columns responsively.
+ * - 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.
@@ -32,7 +35,7 @@
     </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>

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

@@ -19,15 +19,16 @@
  * - 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-state
  * - mobileActive: is applied to header and header-element when their width or the viewport requires mobile navigation.
  *
  * @related
+ * - 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.
- * - buttonIcon: presents theme and hamburger controls as icon buttons.
  * - toggleDarkmode: connects the control to the global theme handler.
  * - modal: provides opening and closing behavior for mobile navigation.
  * - modal-button: opens the mobile panel.
@@ -61,14 +62,14 @@
 		</div>
 
 		<div pgs="header-element-alwaysOnLast">
-			<button pgs="buttonIcon toggleDarkmode" type="button" aria-label="Change theme">
+			<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">

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

@@ -10,8 +10,8 @@
  * - pageShell-content: identifies the main page content.
  *
  * @related
- * - flexColumnTexts: organizes text contained in the sidebars.
- * - flexColumnElements: vertically organizes elements in the main sections.
+ * - flexColumn: organizes text contained in the sidebars.
+ * - gapElements: applies element spacing in the main sections.
  *
  * @return Four page-shell HTML configurations with two, one, or no sidebars.
  */
@@ -20,14 +20,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>
@@ -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/{templates → reference}/html/layout/section.html

@@ -12,9 +12,9 @@
  * - sectionNoPadding: identifies a section without standard padding.
  *
  * @related
- * - flexColumnSections: vertically spaces all sections in the example.
- * - flexColumnElements: vertically organizes the main elements of each section.
- * - flexColumnTexts: organizes and spaces inner content.
+ * - 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.
  *
@@ -22,40 +22,40 @@
  */
 -->
 
-<div pgs="flexColumnSections">
-    <section pgs="section flexColumnElements">
-        <div pgs="flexColumnTexts">
+<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 flexColumnElements">
-        <div pgs="flexColumnTexts">
+    <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 flexColumnElements">
-        <div pgs="flexColumnTexts">
+    <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 flexColumnTexts">
+        <div pgs="sectionSpecificity-child flexColumn">
             <strong>Specificity-child section</strong>
             <p>Centered content inside a MyPGS section.</p>
         </div>
     </section>
 
-    <section pgs="sectionMax flexColumnElements" style="background-color: var(--color-primary-soft)">
-        <div pgs="flexColumnTexts">
+    <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 flexColumnElements">
-        <div pgs="flexColumnTexts">
+    <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>

package/{templates → reference}/html/patterns/cookieConsent.html

@@ -17,13 +17,15 @@
  * - 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.
- * - buttonStrong: presents full acceptance as the primary action.
  *
  * @return Consent panel HTML with essential and analytics preferences, actions, and accessible attributes.
  */
@@ -75,7 +77,7 @@
             <i class="fa-solid fa-duotone fa-sliders"></i>Selected only
         </button>
 
-        <button type="button" pgs="buttonStrong cookieConsent-actionAccept">
+        <button type="button" pgs="button cookieConsent-actionAccept" pgs-option="buttonStrong">
             <i class="fa-solid fa-check"></i> Accept all
         </button>
     </div>

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

@@ -1,6 +1,6 @@
 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>

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/button.jsx

@@ -11,20 +11,20 @@ export default function Button() {
                 <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="Settings">
+            <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="Information">
+            <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="Large button">
+            <button pgs="button" pgs-option="buttonBig" type="button" aria-label="Large button">
                 <i className="fa-solid fa-rocket" aria-hidden="true"></i>
                 Large button
             </button>

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

@@ -3,7 +3,7 @@ export default function Card() {
         <article pgs="card flexColumn">
             <img pgs="card-img imgCover" src="https://placehold.co/800x500" alt="Placeholder image" />
 
-            <div pgs="flexColumnTexts">
+            <div pgs="flexColumn">
                 <h3>Card riutilizzabile</h3>
                 <p>Descriptive card content suitable for lists, previews, and grids.</p>
                 <a pgs="button" href="#">Leggi di piu</a>
@@ -17,7 +17,7 @@ export default function CardLink() {
             <a pgs="flexColumn" href="">
                 <img pgs="card-img imgCover" src="https://placehold.co/800x500" alt="Placeholder image" />
 
-                <div pgs="flexColumnTexts">
+                <div pgs="flexColumn">
                     <h3>Card riutilizzabile</h3>
                     <p>Descriptive card content suitable for lists, previews, and grids.</p>
                 </div>

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

@@ -21,7 +21,7 @@ export default function Form() {
                 <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

@@ -66,12 +66,12 @@ export default function Modal() {
                             <h3>Save changes?</h3>
                         </div>
 
-                        <div pgs="modal-dialog-content-scroll flexColumnElements">
+                        <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">Cancel</button>
-                                <button pgs="buttonStrong" type="button">Save changes</button>
+                                <button pgs="button" pgs-option="buttonStrong" type="button">Save changes</button>
                             </div>
                         </div>
                     </div>