mypgs 2.1.0 → 3.0.0

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

@@ -1,6 +1,6 @@
 export default function Search() {
     return (
-        <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 className="fa-solid fa-search"></i></button>
             <input type="search" name="s" placeholder="Search" defaultValue="" />
             <ul pgs="search-suggestions"></ul>
@@ -11,13 +11,13 @@ export default function Search() {
 export function SearchModal() {
     return (
         <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 className="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 className="fa-solid fa-search"></i>
                         </button>
@@ -26,7 +26,7 @@ export function SearchModal() {
                         <ul pgs="search-suggestions"></ul>
                     </form>
 
-                    <button type="button" pgs="modal-close buttonIcon">
+                    <button type="button" pgs="modal-close button" pgs-option="buttonIcon">
                         <i className="fa-solid fa-close"></i>
                     </button>
                 </div>

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

@@ -12,7 +12,7 @@ export default function Slides() {
                     <li key={title}>
                         <article pgs="card flexColumn">
                             <img pgs="card-img imgCover" src={src} alt={alt} />
-                            <div pgs="flexColumnTexts">
+                            <div pgs="flexColumn">
                                 <h3>{title}</h3>
                                 <p>{text}</p>
                             </div>

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

@@ -1,20 +1,20 @@
 export default function StepTabs() {
     return (
-        <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}/react/components/tooltip.jsx

@@ -1,7 +1,7 @@
 export default function Tooltip() {
     return (
         <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 className="fa-solid fa-info"></i>
             </button>
             <div pgs="dropdown-content tooltip-content">

package/{templates → reference}/react/layout/pageShell.jsx

@@ -4,7 +4,7 @@ function Aside() {
     return (
         <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>
@@ -15,7 +15,7 @@ function Aside() {
 function MainContent() {
     return (
         <main pgs="pageShell-content">
-            <section pgs="flexColumnElements" id="sezione-uno">
+            <section pgs="flexColumn gapElements" id="sezione-uno">
                 <strong>Lorem ipsum</strong>
                 <p>{contentText}</p>
             </section>

package/reference/react/layout/responsive.jsx

@@ -0,0 +1,61 @@
+const flexColumns = [
+    ["Column one", "First flex column."],
+    ["Column two", "Second flex column."],
+    ["Column three", "Third flex column."],
+];
+
+const gridColumns = [
+    ["Column one", "First grid column."],
+    ["Column two", "Second grid column."],
+    ["Column three", "Third grid column."],
+    ["Column four", "Fourth grid column."],
+];
+
+function Column({ title, text }) {
+    return (
+        <article pgs="box flexColumn">
+            <strong>{title}</strong>
+            <p>{text}</p>
+        </article>
+    );
+}
+
+export default function Responsive() {
+    return (
+        <div pgs="flexColumn gapSections">
+            <section>
+                <strong>Flex</strong>
+                <div pgs="flexRow" pgs-option="column-2 m2e">
+                    {flexColumns.map(([title, text]) => (
+                        <Column key={title} title={title} text={text} />
+                    ))}
+                </div>
+            </section>
+
+            <section>
+                <strong>Grid</strong>
+                <div pgs="grid" pgs-option="column-4 m2e">
+                    {gridColumns.map(([title, text]) => (
+                        <Column key={title} title={title} text={text} />
+                    ))}
+                </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}/react/layout/section.jsx

@@ -1,40 +1,40 @@
 export default function Section() {
     return (
-        <div pgs="flexColumnSections">
-            <section pgs="section flexColumnElements">
-                <div pgs="container flexColumnTexts">
+        <div pgs="flexColumn gapSections">
+            <section pgs="section flexColumn gapElements">
+                <div pgs="container flexColumn">
                     <strong>Standard section</strong>
                     <p>Centered content inside a MyPGS section.</p>
                 </div>
             </section>
 
-            <section pgs="sectionFull flexColumnElements">
-                <div pgs="container flexColumnTexts">
+            <section pgs="sectionFull flexColumn gapElements">
+                <div pgs="container flexColumn">
                     <strong>Full-width section</strong>
                     <p>Centered content inside a MyPGS section.</p>
                 </div>
             </section>
 
-            <section pgs="sectionSpecificity flexColumnElements">
-                <div pgs="container flexColumnTexts">
+            <section pgs="sectionSpecificity flexColumn gapElements">
+                <div pgs="container flexColumn">
                     <strong>Specificity section</strong>
                     <p>Centered content inside a MyPGS section.</p>
                 </div>
-                <div pgs="sectionSpecificity-child container flexColumnTexts">
+                <div pgs="sectionSpecificity-child container flexColumn">
                     <strong>Specificity-child section</strong>
                     <p>Centered content inside a MyPGS section.</p>
                 </div>
             </section>
 
-            <section pgs="sectionMax flexColumnElements" style={{ backgroundColor: "var(--color-primary-soft)" }}>
-                <div pgs="container flexColumnTexts">
+            <section pgs="sectionMax flexColumn gapElements" style={{ backgroundColor: "var(--color-primary-soft)" }}>
+                <div pgs="container flexColumn">
                     <strong>Max-width section</strong>
                     <p>Centered content inside a MyPGS section.</p>
                 </div>
             </section>
 
-            <section pgs="sectionNoPadding flexColumnElements">
-                <div pgs="container flexColumnTexts">
+            <section pgs="sectionNoPadding flexColumn gapElements">
+                <div pgs="container flexColumn">
                     <strong>No-padding section</strong>
                     <p>Centered content inside a MyPGS section.</p>
                 </div>

package/{templates → reference}/react/patterns/cookieConsent.jsx

@@ -53,7 +53,7 @@ export default function CookieConsent({
                     <i className="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 className="fa-solid fa-check"></i> Accept all
                 </button>
             </div>

package/{templates → reference}/react/patterns/footer.jsx

@@ -6,7 +6,7 @@ export default function Footer() {
             </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}/react/patterns/header.jsx

@@ -42,13 +42,13 @@ export default function Header() {
                 <div pgs="header-element-onlyMobile"></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 className="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/scripts/generate-component-docs.js

@@ -6,7 +6,7 @@ const fs = require("fs");
 const path = require("path");
 
 const PROJECT_ROOT = path.resolve(__dirname, "..");
-const TEMPLATE_ROOT = path.join(PROJECT_ROOT, "templates", "html");
+const REFERENCE_ROOT = path.join(PROJECT_ROOT, "reference", "html");
 const DOCS_ROOT = path.join(PROJECT_ROOT, "docs");
 const MANAGED_DOC_DIRECTORIES = ["components", "layout", "patterns"]
     .map(directory => path.join(DOCS_ROOT, directory));
@@ -18,7 +18,7 @@ const SOURCE_ROOTS = [
 const TAG_ORDER = ["title", "description", "pgs", "pgs-option", "pgs-state", "api", "related", "return"];
 const LIST_TAGS = new Set(["pgs", "pgs-option", "pgs-state", "api", "related"]);
 const REQUIRED_TAGS = ["title", "description", "pgs"];
-const GENERATED_MARKER = /^<!-- (?:Automatically generated from (templates\/html\/.+\.html)\. Edit \1 and run npm run docs:generate again\.|File generato automaticamente da (templates\/html\/.+\.html)\. Modificare \2 e rieseguire npm run docs:generate\.) -->$/;
+const GENERATED_MARKER = /^<!-- (?:Automatically generated from ((?:reference|templates)\/html\/.+\.html)\. Edit \1 and run npm run docs:generate again\.|File generato automaticamente da ((?:reference|templates)\/html\/.+\.html)\. Modificare \2 e rieseguire npm run docs:generate\.) -->$/;
 
 function toPosix(value) {
     return value.split(path.sep).join("/");
@@ -29,7 +29,7 @@ function relativeToProject(value) {
 }
 
 function getOutputPath(template) {
-    const relativeTemplate = path.relative(TEMPLATE_ROOT, template);
+    const relativeTemplate = path.relative(REFERENCE_ROOT, template);
     return path.join(DOCS_ROOT, relativeTemplate.replace(/\.html$/i, ".md"));
 }
 
@@ -477,11 +477,11 @@ function printErrors(errors) {
 }
 
 function main() {
-    const templates = walkFiles(TEMPLATE_ROOT, file => path.extname(file).toLowerCase() === ".html");
+    const references = walkFiles(REFERENCE_ROOT, file => path.extname(file).toLowerCase() === ".html");
     const errors = [];
     const outputPaths = new Map();
 
-    templates.forEach(template => {
+    references.forEach(template => {
         const output = toPosix(path.relative(DOCS_ROOT, getOutputPath(template))).toLowerCase();
         if (!outputPaths.has(output)) outputPaths.set(output, []);
         outputPaths.get(output).push(template);
@@ -493,7 +493,7 @@ function main() {
 
     const sources = loadSources();
     const allSourceContent = sources.map(source => source.content).join("\n");
-    const parsedTemplates = templates.map(template => {
+    const parsedReferences = references.map(template => {
         const source = fs.readFileSync(template, "utf8");
         const parsed = parseDocumentationBlock(template, source);
         errors.push(...validateTemplate(template, parsed, sources, allSourceContent));
@@ -509,7 +509,7 @@ function main() {
     const expected = new Set();
     const counts = { created: 0, updated: 0, unchanged: 0, removed: 0 };
 
-    parsedTemplates.forEach(({ template, parsed }) => {
+    parsedReferences.forEach(({ template, parsed }) => {
         const output = getOutputPath(template);
         const content = renderMarkdown(template, parsed.data, parsed.markup);
         expected.add(path.resolve(output));
@@ -546,7 +546,7 @@ function main() {
         });
 
     console.log("");
-    console.log(`Riepilogo: ${templates.length} template validati; ${counts.created} creati; ${counts.updated} aggiornati; ${counts.unchanged} invariati; ${counts.removed} obsoleti rimossi.`);
+    console.log(`Riepilogo: ${references.length} riferimenti HTML validati; ${counts.created} creati; ${counts.updated} aggiornati; ${counts.unchanged} invariati; ${counts.removed} obsoleti rimossi.`);
 }
 
 try {

package/assets/scss/layout/_flex.scss

@@ -1,49 +0,0 @@
-@use "../mixin/mixin" as *;
-
-
-//= FLEX 
-
-//== FLEX COLUMN
-[pgs~=flexColumn] {
-    @include flexColumn();
-}
-
-[pgs~=flexColumnTexts] {
-    @include flexColumn();
-}
-
-[pgs~=flexColumnElements] {
-    @include flexColumnElements();
-}
-
-[pgs~=flexColumnSections] {
-    @include flexColumnSections();
-}
-
-//== FLEX ROW
-[pgs~=flexRow] {
-    @include flexRow();
-}
-
-[pgs~=flexRowTexts] {
-    @include flexRow();
-}
-
-[pgs~=flexRowElements] {
-    @include flexRowElements();
-}
-
-[pgs~=flexRowSection] {
-    @include flexRowSection();
-}
-
-//== responsive flex
-@for $i from 1 through 10 {
-    [pgs~=flex-#{$i}] {
-        @include rFlex($i);
-    }
-
-    [pgs~=flex-#{$i}-m2e] {
-        @include rFlex($i, true);
-    }
-}

package/assets/scss/layout/_gap.scss

@@ -1,21 +0,0 @@
-//# GAP
-[pgs~=gapTexts] {
-    gap: var(--gap-texts);
-}
-
-[pgs~=gapElements] {
-    gap: var(--gap-elements);
-}
-
-[pgs~=gapSections] {
-    gap: var(--gap-sections);
-}
-
-//# wrap
-[pgs~=nowrap] {
-    flex-wrap: nowrap;
-}
-
-[pgs~=wrap] {
-    flex-wrap: wrap;
-}

package/assets/scss/layout/_grid.scss

@@ -1,13 +0,0 @@
-@use "../mixin/mixin" as *;
-
-//== GRID
-@for $i from 1 through 10 {
-    [pgs~=grid-#{$i}] {
-        @include rGrid($i);
-    }
-
-    [pgs~=grid-#{$i}-m2e] {
-        @include rGrid($i, true);
-    }
-}
-

package/docs/layout/flex.md

@@ -1,116 +0,0 @@
-<!-- Automatically generated from templates/html/layout/flex.html. Edit templates/html/layout/flex.html and run npm run docs:generate again. -->
-
-# Flex
-
-Flex markup, configuration, behavior, and usage example.
-
-## PGS
-
-- `flex-2`: identifies the flex-2 element used by Flex.
-- `flex-3`: identifies the flex-3 element used by Flex.
-- `flex-4`: identifies the flex-4 element used by Flex.
-- `flex-6`: identifies the flex-6 element used by Flex.
-
-## Related elements
-
-- `container`: defines the container context for the introduction.
-- `flexColumnTexts`: vertically organizes and spaces card text and content.
-- `card`: makes the demonstration cells of the flex layout visible.
-
-## Output
-
-HTML collection of responsive flex layouts with two, three, four, and six items.
-
-## Example
-
-```html
-<div pgs="container flexColumnTexts">
-    <strong>Standard section</strong>
-    <p>Centered content inside a MyPGS section.</p>
-</div>
-
-
-<div pgs="flex-2">
-    <article pgs="card flexColumnTexts">
-        <strong>Column one</strong>
-        <p>First column content.</p>
-    </article>
-
-    <article pgs="card flexColumnTexts">
-        <strong>Column two</strong>
-        <p>Second column content.</p>
-    </article>
-</div>
-
-
-<div pgs="flex-3">
-    <article pgs="card flexColumnTexts">
-        <strong>Column one</strong>
-        <p>First column content.</p>
-    </article>
-
-    <article pgs="card flexColumnTexts">
-        <strong>Column two</strong>
-        <p>Second column content.</p>
-    </article>
-
-    <article pgs="card flexColumnTexts">
-        <strong>Column three</strong>
-        <p>Third column content.</p>
-    </article>
-</div>
-
-
-<div pgs="flex-4">
-    <article pgs="card flexColumnTexts">
-        <strong>Column one</strong>
-        <p>First column content.</p>
-    </article>
-
-    <article pgs="card flexColumnTexts">
-        <strong>Column two</strong>
-        <p>Second column content.</p>
-    </article>
-
-    <article pgs="card flexColumnTexts">
-        <strong>Column three</strong>
-        <p>Third column content.</p>
-    </article>
-    <article pgs="card flexColumnTexts">
-        <strong>Column four</strong>
-        <p>Fourth column content.</p>
-    </article>
-</div>
-
-<div pgs="flex-6">
-    <article pgs="card flexColumnTexts">
-        <strong>Column one</strong>
-        <p>First column content.</p>
-    </article>
-
-    <article pgs="card flexColumnTexts">
-        <strong>Column two</strong>
-        <p>Second column content.</p>
-    </article>
-
-    <article pgs="card flexColumnTexts">
-        <strong>Column three</strong>
-        <p>Third column content.</p>
-    </article>
-
-    <article pgs="card flexColumnTexts">
-        <strong>Column four</strong>
-        <p>Fourth column content.</p>
-    </article>
-
-    <article pgs="card flexColumnTexts">
-        <strong>Column five</strong>
-        <p>Fifth column content.</p>
-    </article>
-
-    <article pgs="card flexColumnTexts">
-        <strong>Column six</strong>
-        <p>Sixth column content.</p>
-    </article>
-</div
-```

package/docs/layout/grid.md

@@ -1,116 +0,0 @@
-<!-- Automatically generated from templates/html/layout/grid.html. Edit templates/html/layout/grid.html and run npm run docs:generate again. -->
-
-# Grid
-
-Responsive grid examples that distribute two to six columns while preserving design-system gaps and sizing.
-
-## PGS
-
-- `grid-2`: creates a responsive grid with up to two columns.
-- `grid-3`: creates a responsive grid with up to three columns.
-- `grid-4`: creates a responsive grid with up to four columns.
-- `grid-6`: creates a responsive grid with up to six columns.
-
-## Related elements
-
-- `container`: defines the container context for the introduction.
-- `flexColumnTexts`: organizes and spaces introductory and card text.
-- `card`: makes the demonstration grid cells visible.
-
-## Output
-
-HTML collection of responsive grids with two, three, four, and six columns.
-
-## Example
-
-```html
-<div pgs="container flexColumnTexts">
-    <strong>Standard section</strong>
-    <p>Centered content inside a MyPGS section.</p>
-</div>
-
-
-<div pgs="grid-2">
-    <article pgs="card flexColumnTexts">
-        <strong>Column one</strong>
-        <p>First column content.</p>
-    </article>
-
-    <article pgs="card flexColumnTexts">
-        <strong>Column two</strong>
-        <p>Second column content.</p>
-    </article>
-</div>
-
-
-<div pgs="grid-3">
-    <article pgs="card flexColumnTexts">
-        <strong>Column one</strong>
-        <p>First column content.</p>
-    </article>
-
-    <article pgs="card flexColumnTexts">
-        <strong>Column two</strong>
-        <p>Second column content.</p>
-    </article>
-
-    <article pgs="card flexColumnTexts">
-        <strong>Column three</strong>
-        <p>Third column content.</p>
-    </article>
-</div>
-
-
-<div pgs="grid-4">
-    <article pgs="card flexColumnTexts">
-        <strong>Column one</strong>
-        <p>First column content.</p>
-    </article>
-
-    <article pgs="card flexColumnTexts">
-        <strong>Column two</strong>
-        <p>Second column content.</p>
-    </article>
-
-    <article pgs="card flexColumnTexts">
-        <strong>Column three</strong>
-        <p>Third column content.</p>
-    </article>
-    <article pgs="card flexColumnTexts">
-        <strong>Column four</strong>
-        <p>Fourth column content.</p>
-    </article>
-</div>
-
-<div pgs="grid-6">
-    <article pgs="card flexColumnTexts">
-        <strong>Column one</strong>
-        <p>First column content.</p>
-    </article>
-
-    <article pgs="card flexColumnTexts">
-        <strong>Column two</strong>
-        <p>Second column content.</p>
-    </article>
-
-    <article pgs="card flexColumnTexts">
-        <strong>Column three</strong>
-        <p>Third column content.</p>
-    </article>
-
-    <article pgs="card flexColumnTexts">
-        <strong>Column four</strong>
-        <p>Fourth column content.</p>
-    </article>
-
-    <article pgs="card flexColumnTexts">
-        <strong>Column five</strong>
-        <p>Fifth column content.</p>
-    </article>
-
-    <article pgs="card flexColumnTexts">
-        <strong>Column six</strong>
-        <p>Sixth column content.</p>
-    </article>
-</div
-```