mypgs 2.1.0 → 3.0.0

package/docs/layout/responsive.md

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

package/docs/layout/section.md

@@ -1,4 +1,4 @@
-<!-- Automatically generated from templates/html/layout/section.html. Edit templates/html/layout/section.html and run npm run docs:generate again. -->
+<!-- Automatically generated from reference/html/layout/section.html. Edit reference/html/layout/section.html and run npm run docs:generate again. -->
 
 # Section
 
@@ -15,9 +15,9 @@ Section variants that control width, padding, and specific content treatment whi
 
 ## Related elements
 
-- `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.
 
@@ -28,40 +28,40 @@ HTML collection of the available section variants.
 ## Example
 
 ```html
-<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/docs/patterns/cookieConsent.md

@@ -1,4 +1,4 @@
-<!-- Automatically generated from templates/html/patterns/cookieConsent.html. Edit templates/html/patterns/cookieConsent.html and run npm run docs:generate again. -->
+<!-- Automatically generated from reference/html/patterns/cookieConsent.html. Edit reference/html/patterns/cookieConsent.html and run npm run docs:generate again. -->
 
 # Cookie Consent
 
@@ -19,6 +19,10 @@ Accessible pattern for collecting and storing analytics cookie consent, applying
 - `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 Options
+
+- `buttonStrong`: presents full acceptance as the primary action.
+
 ## Related elements
 
 - `flexColumn`: vertically organizes the preference panel.
@@ -26,7 +30,6 @@ Accessible pattern for collecting and storing analytics cookie consent, applying
 - `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.
 
 ## Output
 
@@ -81,7 +84,7 @@ Consent panel HTML with essential and analytics preferences, actions, and access
             <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/docs/utilizzo-css-scss.md

@@ -24,13 +24,37 @@ Recommended override:
 
 Avoid rewriting padding, gaps, border radii, or colors from scratch when a suitable variable or PGS token already exists.
 
+## Button mixins
+
+Button styling is split into small mixins so each consumer can include only the behavior it needs. A standard button is composed explicitly:
+
+```scss
+.action {
+  @include buttonBase();
+  @include buttonContent();
+  @include buttonHover();
+}
+```
+
+Use `buttonIcon` instead of `buttonContent` for icon-only controls, and `buttonNohover` instead of `buttonHover` when pointer interaction must remain neutral:
+
+```scss
+.icon-action {
+  @include buttonBase();
+  @include buttonIcon();
+  @include buttonNohover();
+}
+```
+
+`buttonStrong`, `buttonMini`, `buttonBig`, and `buttonClose` contain only their variant declarations and must be added after the required base, content/icon, and interaction mixins. This explicit composition is also the preferred pattern for components such as menus, accordions, forms, and step tabs.
+
 ## The `pgs` system
 
 Markup uses space-separated tokens inside the `pgs` attribute:
 
 ```html
-<button pgs="button buttonStrong" type="button">Save</button>
-<section pgs="section flexColumnElements"></section>
+<button pgs="button" pgs-option="buttonStrong" type="button">Save</button>
+<section pgs="section flexColumn gapElements"></section>
 ```
 
 The same tokens connect HTML, SCSS, and JavaScript.

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "mypgs",
-    "version": "2.1.0",
+    "version": "3.0.0",
     "description": "MyPGS frontend theme and UI behaviors, with bundled JavaScript and CSS assets.",
     "main": "./dist/javascript/index.js",
     "module": "./assets/javascript/index.js",

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

@@ -21,13 +21,13 @@
 * - instance.isOpen(): returns true when the open state is active.
 *
 * @related
-* - flexColumnTexts: applies text spacing between the list items.
+* - flexColumn: applies text spacing between the list items.
 *
 * @return HTML list of accessible accordion items with an associated button and panel.
 */
 -->
 
-<ul pgs="flexColumnTexts">
+<ul pgs="flexColumn">
     <li pgs="accordion">
         <button pgs="accordion-button" type="button">
             <i class="fa-solid fa-circle-question" aria-hidden="true"></i>

package/reference/html/components/alerts.html

@@ -0,0 +1,59 @@
+<!--
+/**
+ * @title Alerts
+ * @description Static inline feedback messages for contextual information, successful operations, warnings, and errors. Use the notification API for dynamic floating alerts and toasts.
+ *
+ * @pgs
+ * - alert: identifies the inline alert container.
+ * - alert-icon: identifies the decorative status icon.
+ * - alert-content: groups the title and descriptive message.
+ * - alert-title: identifies the alert heading.
+ *
+ * @pgs-state
+ * - info: presents neutral informational feedback.
+ * - success: presents confirmation of a successful operation.
+ * - warning: presents a condition that requires attention.
+ * - error: presents a failure or blocking problem.
+ *
+ * @related
+ * - flexColumn: vertically arranges the alert examples.
+ * - gapElements: applies element spacing between the examples.
+ * - notification: provides dynamic floating alerts and toast messages.
+ *
+ * @return Accessible HTML examples of the four inline alert states.
+ */
+-->
+
+<div pgs="flexColumn gapElements">
+    <div pgs="alert" pgs-state="info" role="status">
+        <i pgs="alert-icon" class="fa-solid fa-circle-info" aria-hidden="true"></i>
+        <div pgs="alert-content">
+            <strong pgs="alert-title">Information</strong>
+            <p>Your profile information can be updated at any time.</p>
+        </div>
+    </div>
+
+    <div pgs="alert" pgs-state="success" role="status">
+        <i pgs="alert-icon" class="fa-solid fa-circle-check" aria-hidden="true"></i>
+        <div pgs="alert-content">
+            <strong pgs="alert-title">Changes saved</strong>
+            <p>Your preferences were updated successfully.</p>
+        </div>
+    </div>
+
+    <div pgs="alert" pgs-state="warning" role="alert">
+        <i pgs="alert-icon" class="fa-solid fa-triangle-exclamation" aria-hidden="true"></i>
+        <div pgs="alert-content">
+            <strong pgs="alert-title">Check your information</strong>
+            <p>Some fields may require your attention before continuing.</p>
+        </div>
+    </div>
+
+    <div pgs="alert" pgs-state="error" role="alert">
+        <i pgs="alert-icon" class="fa-solid fa-circle-xmark" aria-hidden="true"></i>
+        <div pgs="alert-content">
+            <strong pgs="alert-title">Unable to save</strong>
+            <p>Correct the reported errors and try again.</p>
+        </div>
+    </div>
+</div>

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

@@ -5,6 +5,8 @@
  *
  * @pgs
  * - badge: identifies the base badge variant.
+ *
+ * @pgs-option
  * - badgePrimary: applies the primary color variant.
  * - badgeStrong: applies the high-contrast variant.
  * - badgeSuccess: represents a successful result.
@@ -26,34 +28,34 @@
         Base
     </span>
 
-    <span pgs="badgePrimary">
+    <span pgs="badge" pgs-option="badgePrimary">
         Primary
     </span>
 
-    <span pgs="badgeStrong">
+    <span pgs="badge" pgs-option="badgeStrong">
         Strong
     </span>
 
-    <span pgs="badgeSuccess badgeDot">
+    <span pgs="badge" pgs-option="badgeSuccess badgeDot">
         Active
     </span>
 
-    <span pgs="badgeWarning">
+    <span pgs="badge" pgs-option="badgeWarning">
         <i class="fa-solid fa-triangle-exclamation" aria-hidden="true"></i>
         Warning
     </span>
 
-    <span pgs="badgeError">
+    <span pgs="badge" pgs-option="badgeError">
         <i class="fa-solid fa-xmark" aria-hidden="true"></i>
         Error
     </span>
 
-    <span pgs="badgeInfo">
+    <span pgs="badge" pgs-option="badgeInfo">
         <i class="fa-solid fa-circle-info" aria-hidden="true"></i>
         Info
     </span>
 
-    <span pgs="badgeNeutral" href="#">
+    <span pgs="badge" pgs-option="badgeNeutral">
         Neutral
     </span>
 

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

@@ -5,14 +5,14 @@
  *
  * @pgs
  * - button: identifies the standard button, which can also be used on anchor elements.
+ *
+ * @pgs-option
+ * - buttonReverse: reverses the visual order of the text and icon on the button.
  * - buttonStrong: applies the variant with stronger visual emphasis.
  * - buttonIcon: identifies a compact button composed primarily of an icon.
  * - buttonMini: applies the smallest size variant.
  * - buttonBig: applies the large size variant.
  *
- * @pgs-option
- * - buttonReverse: reverses the visual order of the text and icon on the button.
- *
  * @related
  * - flexRow: arranges the button examples in a flexible row.
  *
@@ -31,20 +31,20 @@
         <i class="fa-solid fa-arrow-right" aria-hidden="true"></i>
     </button>
 
-    <button pgs="buttonStrong" type="button">
+    <button pgs="button" pgs-option="buttonStrong" type="button">
         <i class="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 class="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 class="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 class="fa-solid fa-rocket" aria-hidden="true"></i>
         Large button
     </button>

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

@@ -7,23 +7,25 @@
  * - card: identifies the main card container.
  * - card-img: identifies the main card image.
  *
+ * @pgs-option
+ * - column-2: configures the related flex layout with two columns.
+ *
  * @related
- * - flex-2: arranges the cards in a responsive two-item layout.
+ * - flexRow: arranges the cards in a responsive layout.
  * - flexColumn: organizes the card or link content vertically.
  * - imgCover: scales the image to fill the available area.
- * - flexColumnTexts: applies vertical spacing to text content.
  * - button: presents the final link as a standard button.
  *
  * @return Two card HTML structures, one with a separate action and one that is fully clickable.
  */
 -->
 
-<div pgs="flex-2">
+<div pgs="flexRow" pgs-option="column-2">
 
     <article pgs="card flexColumn">
         <img pgs="card-img imgCover" src="https://placehold.co/800x500" alt="Placeholder image">
         
-        <div pgs="flexColumnTexts">
+        <div pgs="flexColumn">
             <h3>Reusable card</h3>
             <p>Descriptive card content suitable for lists, previews, and grids.</p>
             <a pgs="button" href="#">Read more</a>
@@ -34,7 +36,7 @@
         <a pgs="flexColumn" href="">
             <img pgs="card-img imgCover" src="https://placehold.co/800x500" alt="Placeholder image">
             
-            <div pgs="flexColumnTexts">
+            <div pgs="flexColumn">
                 <h3>Reusable card</h3>
                 <p>Descriptive card content suitable for lists, previews, and grids.</p>
             </div>

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

@@ -15,6 +15,7 @@
  * - message: defines a field-specific message with the syntax message[Message text].
  * - error: is applied at runtime to the form and fields that fail validation.
  * - success: is applied at runtime to the form after successful validation.
+ * - buttonStrong: presents form submission as the primary action.
  *
  * @api
  * - new pgs.formValidate(form, options): creates a utility associated directly with the form, automatically adds novalidate, and accepts fieldError, fieldsError, and success in options.message; messages remain editable through instance.message.
@@ -26,8 +27,8 @@
  * - instance.removeFieldError(field): removes the error state from the specified field.
  *
  * @related
- * - buttonStrong: presents form submission as the primary action.
- * - flexColumnTexts: spaces text elements in the radio group.
+ * - button: provides the base styling for the primary submit action.
+ * - flexColumn: spaces text elements in the radio group.
  *
  * @return Complete HTML form with required fields and an example script for a custom rule, validation, and a success message.
  */
@@ -60,7 +61,7 @@
     <textarea id="form-message" pgs="textarea" name="message" rows="5" placeholder="Write your message" required></textarea>
 
     <br>
-    <fieldset pgs="radio flexColumnTexts">
+    <fieldset pgs="radio flexColumn">
         <legend>Preferred contact method</legend>
 
         <label>
@@ -86,7 +87,7 @@
     </label>
     <br>
 
-    <button pgs="buttonStrong" type="submit">
+    <button pgs="button" pgs-option="buttonStrong" type="submit">
         <i class="fa-solid fa-paper-plane" aria-hidden="true"></i>
         Submit
     </button>

package/reference/html/components/formAddon.html

@@ -0,0 +1,109 @@
+<!--
+/**
+ * @title Form Add-ons
+ * @description Additional form controls for selectable cards, two-state buttons, switches, and compact chip groups.
+ *
+ * @pgs
+ * - 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
+ * - 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.
+ *
+ * @return HTML examples of the checkboxBackground, twoState, toggle, and chips form controls using native checkbox and radio inputs.
+ */
+-->
+
+<form pgs="form flexColumn gapElements">
+    <section pgs="flexColumn">
+        <strong>Checkbox with background</strong>
+
+        <label pgs="checkboxBackground">
+            <input type="checkbox" name="notifications" value="enabled">
+            <span>
+                <strong>Enable notifications</strong><br>
+                Receive important account updates.
+            </span>
+        </label>
+    </section>
+
+    <section pgs="flexColumn">
+        <strong>Two-state controls</strong>
+
+        <label pgs="twoState">
+            <input type="checkbox" name="favorite" value="yes">
+            <i class="fa-solid fa-star" aria-hidden="true"></i>
+            Add to favorites
+        </label>
+    </section>
+
+    <section pgs="flexColumn">
+        <strong>Toggle</strong>
+
+        <label pgs="toggle">
+            <span>Enable Wi-Fi</span>
+            <input type="checkbox" name="darkMode" value="enabled">
+        </label>
+    </section>
+
+    <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>
+
+    <section pgs="flexColumn gapElements">
+        <fieldset pgs="chips">
+            <legend>Chip checkbox</legend>
+            <label>
+                <input type="checkbox" name="plan" value="basic" checked>
+                Basic
+            </label>
+
+            <label>
+                <input type="checkbox" name="plan" value="pro">
+                Pro
+            </label>
+
+            <label>
+                <input type="checkbox" name="plan" value="enterprise">
+                Enterprise
+            </label>
+        </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>
+</form>

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

@@ -12,6 +12,7 @@
  * - 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-state
  * - open: identifies the open element used by Menu.
@@ -24,7 +25,6 @@
  * @related
  * - 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.
  *
  * @return Complete HTML markup and usage example for Menu.
@@ -77,4 +77,4 @@
             </a>
         </li>
     </ul>
-</nav>
+</nav>

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

@@ -21,6 +21,8 @@
  * - 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.
  *
  * @api
  * - pgs.modal.init(root): initializes matching elements within the specified root.
@@ -33,9 +35,8 @@
  *
  * @related
  * - 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.
  *
  * @return Complete HTML markup and usage example for Modal.
@@ -107,12 +108,12 @@
                 <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>