mypgs 2.1.0 → 3.0.0

package/docs/components/formAddon.md

@@ -1,4 +1,4 @@
-<!-- Automatically generated from templates/html/components/formAddon.html. Edit templates/html/components/formAddon.html and run npm run docs:generate again. -->
+<!-- Automatically generated from reference/html/components/formAddon.html. Edit reference/html/components/formAddon.html and run npm run docs:generate again. -->
 
 # Form Add-ons
 
@@ -9,12 +9,15 @@ Additional form controls for selectable cards, two-state buttons, switches, and
 - `checkboxBackground`: presents a checkbox as a selectable container with a highlighted checked state.
 - `twoState`: presents checkbox or radio labels as buttons whose appearance changes when selected.
 - `toggle`: presents a checkbox as a switch with a rail and movable thumb.
+- `chip`: presents an individual checkbox or radio option as a compact selectable button.
 - `chips`: groups twoState controls into a compact segmented selector.
 
 ## Related elements
 
-- `flexColumnElements`: vertically arranges the form add-on examples.
-- `flexColumnTexts`: groups each example with its heading and control.
+- `form`: applies the base form styles to the complete add-on example.
+- `flexColumn`: vertically arranges each example with its heading and control.
+- `flexRow`: horizontally arranges standalone chip controls.
+- `gapElements`: applies element spacing between the form add-on examples.
 
 ## Output
 
@@ -23,8 +26,8 @@ HTML examples of the checkboxBackground, twoState, toggle, and chips form contro
 ## Example
 
 ```html
-<div pgs="flexColumnElements">
-    <section pgs="flexColumnTexts">
+<form pgs="form flexColumn gapElements">
+    <section pgs="flexColumn">
         <strong>Checkbox with background</strong>
 
         <label pgs="checkboxBackground">
@@ -36,7 +39,7 @@ HTML examples of the checkboxBackground, twoState, toggle, and chips form contro
         </label>
     </section>
 
-    <section pgs="flexColumnTexts">
+    <section pgs="flexColumn">
         <strong>Two-state controls</strong>
 
         <label pgs="twoState">
@@ -46,34 +49,68 @@ HTML examples of the checkboxBackground, twoState, toggle, and chips form contro
         </label>
     </section>
 
-    <section pgs="flexColumnTexts">
+    <section pgs="flexColumn">
         <strong>Toggle</strong>
 
         <label pgs="toggle">
-            <span>Enable dark mode</span>
+            <span>Enable Wi-Fi</span>
             <input type="checkbox" name="darkMode" value="enabled">
         </label>
     </section>
 
-    <section pgs="flexColumnTexts">
-        <strong>Chips</strong>
+    <section pgs="flexColumn">
+        <strong>Chips checkbox</strong>
+        <div pgs="flexRow" role="group" aria-label="Chip actions">
+            <label pgs="chip">
+                <input type="checkbox" name="like" value="basic">
+                <i class="fa-solid fa-heart"></i>
+                Like
+            </label>
+            <label pgs="chip">
+                <input type="checkbox" name="share" value="basic">
+                <i class="fa-solid fa-share"></i>
+                Share
+            </label>
+        </div>
+    </section>
 
-        <div pgs="chips" role="group" aria-label="Select a plan">
-            <label pgs="twoState">
-                <input type="radio" name="plan" value="basic" checked>
+    <section pgs="flexColumn gapElements">
+        <fieldset pgs="chips">
+            <legend>Chip checkbox</legend>
+            <label>
+                <input type="checkbox" name="plan" value="basic" checked>
                 Basic
             </label>
 
-            <label pgs="twoState">
-                <input type="radio" name="plan" value="pro">
+            <label>
+                <input type="checkbox" name="plan" value="pro">
                 Pro
             </label>
 
-            <label pgs="twoState">
-                <input type="radio" name="plan" value="enterprise">
+            <label>
+                <input type="checkbox" name="plan" value="enterprise">
                 Enterprise
             </label>
-        </div>
+        </fieldset>
+
+        <fieldset pgs="chips">
+            <legend>Chips radio</legend>
+            <label>
+                <input type="radio" name="characters" value="basic" checked>
+                <i class="fa-solid fa-crow"></i>
+                Crow
+            </label>
+
+            <label>
+                <i class="fa-solid fa-dove"></i> <input type="radio" name="characters" value="pro">
+                Dove
+            </label>
+
+            <label>
+                <i class="fa-solid fa-dragon"></i> <input type="radio" name="characters" value="enterprise">
+                dragon
+            </label>
+        </fieldset>
     </section>
-</div>
+</form>
 ```

package/docs/components/logo.md

@@ -1,4 +1,4 @@
-<!-- Automatically generated from templates/html/components/logo.html. Edit templates/html/components/logo.html and run npm run docs:generate again. -->
+<!-- Automatically generated from reference/html/components/logo.html. Edit reference/html/components/logo.html and run npm run docs:generate again. -->
 
 # Logo
 

package/docs/components/menu.md

@@ -1,4 +1,4 @@
-<!-- Automatically generated from templates/html/components/menu.html. Edit templates/html/components/menu.html and run npm run docs:generate again. -->
+<!-- Automatically generated from reference/html/components/menu.html. Edit reference/html/components/menu.html and run npm run docs:generate again. -->
 
 # Menu
 
@@ -15,6 +15,7 @@ Menu markup, configuration, behavior, and usage example.
 - `vertical`: identifies the vertical element used by Menu.
 - `menuHeader`: identifies the menuHeader element used by Menu.
 - `position`: identifies the position element used by Menu.
+- `buttonNohover`: disables hover behavior on menu buttons generated at runtime.
 
 ## PGS States
 
@@ -30,7 +31,6 @@ Menu markup, configuration, behavior, and usage example.
 
 - `dropdown`: uses the related dropdown component or utility in this example.
 - `dropdown-button`: uses the related dropdown-button component or utility in this example.
-- `buttonNohover`: uses the related buttonNohover component or utility in this example.
 - `dropdown-content`: uses the related dropdown-content component or utility in this example.
 
 ## Output

package/docs/components/modal.md

@@ -1,4 +1,4 @@
-<!-- Automatically generated from templates/html/components/modal.html. Edit templates/html/components/modal.html and run npm run docs:generate again. -->
+<!-- Automatically generated from reference/html/components/modal.html. Edit reference/html/components/modal.html and run npm run docs:generate again. -->
 
 # Modal
 
@@ -24,6 +24,8 @@ Modal markup, configuration, behavior, and usage example.
 - `topLevel`: identifies the topLevel element used by Modal.
 - `left`: identifies the left element used by Modal.
 - `right`: identifies the right element used by Modal.
+- `buttonStrong`: applies stronger emphasis to the save action.
+- `buttonClose`: styles the close action generated at runtime.
 
 ## JavaScript API
 
@@ -38,9 +40,8 @@ Modal markup, configuration, behavior, and usage example.
 ## Related elements
 
 - `button`: uses the related button component or utility in this example.
-- `buttonStrong`: uses the related buttonStrong component or utility in this example.
-- `buttonClose`: uses the related buttonClose component or utility in this example.
-- `flexColumnElements`: uses the related flexColumnElements component or utility in this example.
+- `flexColumn`: vertically organizes modal content.
+- `gapElements`: applies element spacing to modal content.
 - `flexRow`: uses the related flexRow component or utility in this example.
 
 ## Output
@@ -115,12 +116,12 @@ Complete HTML markup and usage example for 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>

package/docs/components/notification.md

@@ -1,4 +1,4 @@
-<!-- Automatically generated from templates/html/components/notification.html. Edit templates/html/components/notification.html and run npm run docs:generate again. -->
+<!-- Automatically generated from reference/html/components/notification.html. Edit reference/html/components/notification.html and run npm run docs:generate again. -->
 
 # Notification
 
@@ -16,6 +16,7 @@ Notification markup, configuration, behavior, and usage example.
 
 - `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 States
 
@@ -41,7 +42,6 @@ Notification markup, configuration, behavior, and usage example.
 ## Related elements
 
 - `hidden`: uses the related hidden component or utility in this example.
-- `buttonClose`: uses the related buttonClose component or utility in this example.
 
 ## Output
 

package/docs/components/search.md

@@ -1,4 +1,4 @@
-<!-- Automatically generated from templates/html/components/search.html. Edit templates/html/components/search.html and run npm run docs:generate again. -->
+<!-- Automatically generated from reference/html/components/search.html. Edit reference/html/components/search.html and run npm run docs:generate again. -->
 
 # Search
 
@@ -15,6 +15,8 @@ Search markup, configuration, behavior, and usage example.
 ## PGS Options
 
 - `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 States
 
@@ -44,11 +46,10 @@ Search markup, configuration, behavior, and usage example.
 
 ## Related elements
 
-- `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.
 
@@ -59,7 +60,7 @@ Complete HTML markup and usage example for Search.
 ## Example
 
 ```html
-<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>
@@ -67,14 +68,14 @@ Complete HTML markup and usage example for Search.
 
 <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>
@@ -82,7 +83,7 @@ Complete HTML markup and usage example for Search.
                 <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/docs/components/slides.md

@@ -1,4 +1,4 @@
-<!-- Automatically generated from templates/html/components/slides.html. Edit templates/html/components/slides.html and run npm run docs:generate again. -->
+<!-- Automatically generated from reference/html/components/slides.html. Edit reference/html/components/slides.html and run npm run docs:generate again. -->
 
 # Slides
 
@@ -18,6 +18,7 @@ Slides markup, configuration, behavior, and usage example.
 - `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.
 
 ## JavaScript API
 
@@ -39,8 +40,6 @@ Slides markup, configuration, behavior, and usage example.
 - `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.
 
 ## Output
 
@@ -54,7 +53,7 @@ Complete HTML markup and usage example for Slides.
         <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>
@@ -64,7 +63,7 @@ Complete HTML markup and usage example for Slides.
         <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>
@@ -74,7 +73,7 @@ Complete HTML markup and usage example for Slides.
         <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/docs/components/stepTabs.md

@@ -1,4 +1,4 @@
-<!-- Automatically generated from templates/html/components/stepTabs.html. Edit templates/html/components/stepTabs.html and run npm run docs:generate again. -->
+<!-- Automatically generated from reference/html/components/stepTabs.html. Edit reference/html/components/stepTabs.html and run npm run docs:generate again. -->
 
 # Step Tabs
 
@@ -42,8 +42,8 @@ Step Tabs markup, configuration, behavior, and usage example.
 
 ## Related elements
 
-- `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.
 
@@ -54,21 +54,21 @@ Complete HTML markup and usage example for Step Tabs.
 ## Example
 
 ```html
-<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/docs/components/steps.md

@@ -1,4 +1,4 @@
-<!-- Automatically generated from templates/html/components/steps.html. Edit templates/html/components/steps.html and run npm run docs:generate again. -->
+<!-- Automatically generated from reference/html/components/steps.html. Edit reference/html/components/steps.html and run npm run docs:generate again. -->
 
 # Steps
 

package/docs/components/summary.md

@@ -1,4 +1,4 @@
-<!-- Automatically generated from templates/html/components/summary.html. Edit templates/html/components/summary.html and run npm run docs:generate again. -->
+<!-- Automatically generated from reference/html/components/summary.html. Edit reference/html/components/summary.html and run npm run docs:generate again. -->
 
 # Summary
 

package/docs/components/table.md

@@ -1,4 +1,4 @@
-<!-- Automatically generated from templates/html/components/table.html. Edit templates/html/components/table.html and run npm run docs:generate again. -->
+<!-- Automatically generated from reference/html/components/table.html. Edit reference/html/components/table.html and run npm run docs:generate again. -->
 
 # Table
 

package/docs/components/tooltip.md

@@ -1,4 +1,4 @@
-<!-- Automatically generated from templates/html/components/tooltip.html. Edit templates/html/components/tooltip.html and run npm run docs:generate again. -->
+<!-- Automatically generated from reference/html/components/tooltip.html. Edit reference/html/components/tooltip.html and run npm run docs:generate again. -->
 
 # Tooltip
 
@@ -13,6 +13,7 @@ Tooltip markup, configuration, behavior, and usage example.
 ## PGS Options
 
 - `position`: identifies the position element used by Tooltip.
+- `buttonMini`: applies the smallest button variant to the tooltip trigger.
 
 ## PGS States
 
@@ -30,10 +31,10 @@ Tooltip markup, configuration, behavior, and usage example.
 
 ## Related elements
 
+- `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.
 
 ## Output
 
@@ -43,7 +44,7 @@ Complete HTML markup and usage example for Tooltip.
 
 ```html
 <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/docs/convenzioni.md

@@ -1,7 +1,7 @@
 # Conventions
 
 - Use `pgs` as the first choice for markup, layouts, components, and behaviors.
-- Keep tokens consistent across templates, SCSS, and JavaScript.
+- Keep tokens consistent across references, SCSS, and JavaScript.
 - Use `pgs-state` for runtime states.
 - Use `pgs-option` for declarative options.
 - Prefer custom properties and mixins to hardcoded CSS.

package/docs/export-e-sviluppo.md

@@ -57,7 +57,7 @@ npm pack
 Recommended workflow when modifying the library:
 
 1. modifica i sorgenti in `assets/`;
-2. aggiorna template o documentazione se cambia il modo d'uso;
+2. aggiorna i riferimenti o la documentazione se cambia il modo d'uso;
 3. ricompila con `npm run start`;
 4. verifica `dist/`;
 5. crea il pacchetto con `npm pack`;

package/docs/helper-javascript.md

@@ -136,7 +136,7 @@ Shortcuts available after `import "mypgs"`:
 
 ## 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)

package/docs/layout/body.md

@@ -1,4 +1,4 @@
-<!-- Automatically generated from templates/html/layout/body.html. Edit templates/html/layout/body.html and run npm run docs:generate again. -->
+<!-- Automatically generated from reference/html/layout/body.html. Edit reference/html/layout/body.html and run npm run docs:generate again. -->
 
 # Body
 

package/docs/layout/footer.md

@@ -1,4 +1,4 @@
-<!-- Automatically generated from templates/html/layout/footer.html. Edit templates/html/layout/footer.html and run npm run docs:generate again. -->
+<!-- Automatically generated from reference/html/layout/footer.html. Edit reference/html/layout/footer.html and run npm run docs:generate again. -->
 
 # Footer
 
@@ -15,12 +15,16 @@ Complete footer with theme control, brand area, navigation, informational conten
 - `footer-legal`: identifies the lower section dedicated to legal information.
 - `footer-legal-content`: identifies the content of the legal section.
 
+## PGS Options
+
+- `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.
-- `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.
@@ -38,7 +42,7 @@ Complete footer HTML structure with brand, menu, and legal area.
     </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/docs/layout/header.md

@@ -1,4 +1,4 @@
-<!-- Automatically generated from templates/html/layout/header.html. Edit templates/html/layout/header.html and run npm run docs:generate again. -->
+<!-- Automatically generated from reference/html/layout/header.html. Edit reference/html/layout/header.html and run npm run docs:generate again. -->
 
 # Header
 
@@ -22,6 +22,7 @@ Responsive header that measures available space, switches between desktop and mo
 - `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
 
@@ -29,10 +30,10 @@ Responsive header that measures available space, switches between desktop and mo
 
 ## Related elements
 
+- `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.
@@ -69,14 +70,14 @@ Complete header HTML with desktop navigation and a side mobile panel.
 		</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/docs/layout/pageShell.md

@@ -1,4 +1,4 @@
-<!-- Automatically generated from templates/html/layout/pageShell.html. Edit templates/html/layout/pageShell.html and run npm run docs:generate again. -->
+<!-- Automatically generated from reference/html/layout/pageShell.html. Edit reference/html/layout/pageShell.html and run npm run docs:generate again. -->
 
 # Page Shell
 
@@ -13,8 +13,8 @@ Responsive page layout that combines main content with zero, one, or two scrolla
 
 ## Related elements
 
-- `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.
 
 ## Output
 
@@ -26,14 +26,14 @@ 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>
@@ -41,7 +41,7 @@ Four page-shell HTML configurations with two, one, or no sidebars.
 
     <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 @@ 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>
@@ -67,7 +67,7 @@ Four page-shell HTML configurations with two, one, or no sidebars.
 <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 @@ Four page-shell HTML configurations with two, one, or no sidebars.
 
     <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 @@ Four page-shell HTML configurations with two, one, or no sidebars.
 <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>