mypgs 1.3.4 → 1.3.7

package/{AI_GUIDELINES.md → AGENTS.md}

@@ -62,16 +62,16 @@ Files analyzed:
 - `assets/scss/components/*`
 - `assets/scss/patterns/*`
 - `assets/scss/mixin/*`
-- `templates/components/*`
-- `templates/layout/*`
-- `templates/patterns/*`
+- `templates/html/components/*`
+- `templates/html/layout/*`
+- `templates/html/patterns/*`
 
 Patterns found:
 
 - `pgs` is the main attribute: tokens are separated by spaces, for example `pgs="button modal-button"`.
 - `assets/scss/index.scss` imports base, layout, components, and patterns; layouts/components/patterns are almost all scoped under `[pgs~=initP]`.
-- The main markup must enable the library with `htmlBase initP`, and the body with base body tokens. Use `templates/demo.html` and `templates/layout/body.html` as the canonical references.
-- Components use a root token and child tokens with a consistent prefix. Use `templates/components/` as the canonical markup source.
+- The main markup must enable the library with `htmlBase initP`, and the body with base body tokens. Use `templates/demo.html` and `templates/html/layout/body.html` as the canonical references.
+- Components use a root token and child tokens with a consistent prefix. Use `templates/html/components/` as the canonical markup source.
 
 - Runtime states use `pgs-state`, for example `open`, `is-active`, `is-completed`, `is-locked`, `success`, `error`, `warning`, and `info`.
 - Configurable options use `pgs-option`, with simple tokens or values inside square brackets. Prefer copying the current option syntax from the relevant template rather than duplicating examples in this guide.
@@ -84,14 +84,15 @@ Patterns found:
 Recommended imports in a project that consumes the library:
 
 ```scss
-@import "../../node_modules/mypgs/assets/scss/mixin/mixin.scss";
-@import "../../node_modules/mypgs/assets/scss/index.scss";
+@use "sass:meta";
+@use "../../node_modules/mypgs/assets/scss/mixin/mixin.scss" as * ;
+@include meta.load-css("../../node_modules/mypgs/assets/scss/index.scss");
 ```
 
 If you only need the mixins:
 
 ```scss
-@import "../../node_modules/mypgs/assets/scss/mixin/mixin.scss";
+@use "../../node_modules/mypgs/assets/scss/mixin/mixin.scss" as * ;
 ```
 
 Direct usage of the compiled CSS:
@@ -222,9 +223,9 @@ Use the templates as the single source of truth for component and layout markup.
 
 Canonical template references:
 
-- Layouts: `templates/layout/body.html`, `templates/layout/flex.html`, `templates/layout/grid.html`, `templates/layout/pageShell.html`, `templates/layout/section.html`
-- Components: `templates/components/accordion.html`, `templates/components/breadcumbs.html`, `templates/components/button.html`, `templates/components/card.html`, `templates/components/dropdown.html`, `templates/components/form.html`, `templates/components/logo.html`, `templates/components/menu.html`, `templates/components/modal.html`, `templates/components/notification.html`, `templates/components/searchbar.html`, `templates/components/slides.html`, `templates/components/stepTabs.html`, `templates/components/steps.html`, `templates/components/table.html`, `templates/components/tooltip.html`
-- Patterns: `templates/patterns/cookieConsent.html`, `templates/patterns/footer.html`, `templates/patterns/header.html`
+- Layouts: `templates/html/layout/body.html`, `templates/html/layout/flex.html`, `templates/html/layout/grid.html`, `templates/html/layout/pageShell.html`, `templates/html/layout/section.html`
+- Components: `templates/html/components/accordion.html`, `templates/html/components/breadcumbs.html`, `templates/html/components/button.html`, `templates/html/components/card.html`, `templates/html/components/dropdown.html`, `templates/html/components/form.html`, `templates/html/components/logo.html`, `templates/html/components/menu.html`, `templates/html/components/modal.html`, `templates/html/components/notification.html`, `templates/html/components/searchbar.html`, `templates/html/components/slides.html`, `templates/html/components/stepTabs.html`, `templates/html/components/steps.html`, `templates/html/components/table.html`, `templates/html/components/tooltip.html`
+- Patterns: `templates/html/patterns/cookieConsent.html`, `templates/html/patterns/footer.html`, `templates/html/patterns/header.html`
 - Complete demo assembly. DO NOT use this for inspiration. It is only used to show all the modules: `templates/demo.html`
 
 Before creating markup, open the relevant template and reuse its current structure, tokens, ARIA attributes, and `pgs-option` syntax.
@@ -257,11 +258,12 @@ import "mypgs/style.css";
 Source SCSS import:
 
 ```scss
-@import "../../node_modules/mypgs/assets/scss/mixin/mixin.scss";
-@import "../../node_modules/mypgs/assets/scss/index.scss";
+@use "sass:meta";
+@use "../../node_modules/mypgs/assets/scss/mixin/mixin.scss" as * ;
+@include meta.load-css("../../node_modules/mypgs/assets/scss/index.scss");
 ```
 
-Recommended: use PGS layout tokens from `templates/layout/`.
+Recommended: use PGS layout tokens from `templates/html/layout/`.
 
 Avoid: equivalent custom layout with ad hoc classes when a PGS layout token already exists.
 
@@ -281,7 +283,7 @@ Avoid: rewriting the whole button.
   display: inline-flex;
   gap: 12px;
   padding: 14px 22px;
-  border-radius: 999px;
+  border-radius: 99px;
   background: #ff6161;
 }
 ```
@@ -326,7 +328,7 @@ For a new reusable component:
 - create JS in `assets/javascript/components/` or `assets/javascript/patterns/` only if behavior is needed;
 - export an object with `init` and/or `api` when the module needs a public API;
 - register it in `assets/javascript/_imports.js` with `pgs.registerModules` if it must be available as `pgs.moduleName`;
-- add a template in `templates/components/` or `templates/layout/`;
+- add a template in `templates/html/components/` or `templates/html/layout/`;
 - update `README.md` and this guide if the usage changes.
 
 Example for a new module:

package/README.md

@@ -56,14 +56,15 @@ Markup minimo consigliato:
 Se il progetto vuole compilare un CSS unico, importa gli SCSS sorgenti:
 
 ```scss
-@import "../../node_modules/mypgs/assets/scss/mixin/mixin.scss";
-@import "../../node_modules/mypgs/assets/scss/index.scss";
+@use "sass:meta";
+@use "../../node_modules/mypgs/assets/scss/mixin/mixin.scss" as * ;
+@include meta.load-css("../../node_modules/mypgs/assets/scss/index.scss");
 ```
 
 Se servono solo i mixin:
 
 ```scss
-@import "../../node_modules/mypgs/assets/scss/mixin/mixin.scss";
+@use "../../node_modules/mypgs/assets/scss/mixin/mixin.scss" as * ;
 ```
 
 La libreria espone molte custom properties da preferire agli hardcode, per esempio:
@@ -228,173 +229,7 @@ pgs.modal.api(modalEl)?.open();
 
 ## Componenti e markup
 
-I template completi sono in `templates/components/` e `templates/layout/`. Usa quei file come sorgente di riferimento prima di creare markup nuovo.
-
-### Layout
-
-```html
-<main pgs="main">
-  <section pgs="section flexColumnElements">
-    <div pgs="flexColumnTexts">
-      <h2>Titolo</h2>
-      <p>Contenuto.</p>
-    </div>
-  </section>
-</main>
-```
-
-```html
-<section pgs="sectionFull flexColumnElements">
-  <div pgs="grid-3">
-    <article pgs="card flexColumnTexts">
-      <h3>Colonna uno</h3>
-      <p>Contenuto.</p>
-    </article>
-  </div>
-</section>
-```
-
-### Bottoni
-
-```html
-<button pgs="button" type="button">Base</button>
-<button pgs="buttonStrong" type="button">Primario</button>
-<button pgs="buttonIcon" type="button" aria-label="Impostazioni">
-  <i class="fa-solid fa-gear" aria-hidden="true"></i>
-</button>
-```
-
-### Accordion
-
-```html
-<div pgs="accordion">
-  <button pgs="accordion-button" type="button">Domanda</button>
-  <div pgs="accordion-content">Risposta</div>
-</div>
-```
-
-### Dropdown
-
-```html
-<span pgs="dropdown">
-  <button pgs="dropdown-button button" type="button">Apri menu</button>
-  <div pgs="dropdown-content">
-    <nav aria-label="Menu dropdown"></nav>
-  </div>
-</span>
-```
-
-### Modal
-
-```html
-<div pgs="modal" pgs-option="containerID[modal-container]">
-  <button pgs="modal-button button" type="button">Apri modale</button>
-  <dialog>
-    <div pgs="modal-dialog-content">
-      <div pgs="modal-dialog-content-header">
-        <h3>Modale</h3>
-      </div>
-      <div pgs="modal-dialog-content-scroll">
-        <p>Contenuto della modale.</p>
-      </div>
-    </div>
-  </dialog>
-</div>
-<div id="modal-container"></div>
-```
-
-### Slides
-
-```html
-<div pgs="slides" pgs-option="singleScroll shadowDesktop">
-  <ul pgs="slides-container">
-    <li>
-      <article pgs="card flexColumn">
-        <img pgs="card-img imgCover" src="image.jpg" alt="">
-        <div pgs="flexColumnTexts">
-          <h3>Slide uno</h3>
-        </div>
-      </article>
-    </li>
-  </ul>
-</div>
-```
-
-### Step tabs
-
-```html
-<div pgs="stepTabs flexColumnElements">
-  <div pgs="stepTabs-dots" aria-label="Avanzamento"></div>
-  <div pgs="stepTabs-container">
-    <section pgs="tab flexColumnTexts" tabindex="-1" pgs-option="tabIcon[fa-user]"></section>
-  </div>
-  <div pgs="flexRow">
-    <button pgs="stepTabs-prev button" type="button">Indietro</button>
-    <button pgs="stepTabs-next button" pgs-option="buttonReverse" type="button">Avanti</button>
-  </div>
-</div>
-```
-
-### Form
-
-```html
-<form pgs="form" action="#" method="post">
-  <label pgs="label" for="form-email">Email</label>
-  <input id="form-email" pgs="input" type="email" name="email" required data-form-field-message="Inserisci una email valida">
-  <button pgs="buttonStrong" type="submit">Invia</button>
-</form>
-```
-
-Validazione programmatica:
-
-```js
-const form = document.querySelector("form");
-const validator = new pgs.formValidate({ form });
-
-if (validator.validate()) {
-  pgs.notification.toast.success("Inviato con successo");
-}
-```
-
-### Notifiche
-
-```html
-<div pgs="notification" aria-live="polite"></div>
-<div pgs="toast" aria-live="polite"></div>
-```
-
-```js
-pgs.notification.toast.success("Salvato");
-pgs.notification.alert.error("Errore", null, 0);
-```
-
-Trigger da markup:
-
-```html
-<div pgs="hidden notificationTrigger" data-notification='{
-  "title":"Titolo",
-  "message":"Messaggio",
-  "element":"notification",
-  "type":"info",
-  "duration":"-1"
-}'></div>
-```
-
-### Menu
-
-```html
-<nav pgs="menuHorizontal" aria-label="Menu principale">
-  <ul>
-    <li class="menu-item"><a href="/">Home</a></li>
-    <li class="menu-item menu-item-has-children">
-      <a href="/servizi">Servizi</a>
-      <ul class="sub-menu">
-        <li class="menu-item"><a href="/servizi/uno">Servizio uno</a></li>
-      </ul>
-    </li>
-  </ul>
-</nav>
-```
+I template completi sono in `templates/html/components/`, `templates/html/patterns/` e `templates/html/layout/`. Usa quei file come sorgente di riferimento prima di creare markup nuovo.
 
 ## Componenti disponibili
 
@@ -484,8 +319,9 @@ import "mypgs/style.css";
 Uso sorgente SCSS:
 
 ```scss
-@import "../../node_modules/mypgs/assets/scss/mixin/mixin.scss";
-@import "../../node_modules/mypgs/assets/scss/index.scss";
+@use "sass:meta";
+@use "../../node_modules/mypgs/assets/scss/mixin/mixin.scss" as * ;
+@include meta.load-css("../../node_modules/mypgs/assets/scss/index.scss");
 ```
 
 ## Sviluppo

package/assets/javascript/patterns/_header.js

@@ -1,107 +1,111 @@
 //# HEADER
 const header = pgs(document).querySelector("header");
-const headerElements = pgs(header).querySelectorAll("header-element");
-headerElements.forEach(element => PGS_header(element));
 
 //= HEADER
-function PGS_header(selectHeader) {
+function PGS_header(selectHeader = document) {
+    
+    if (!header) return;
 
-    //= INIT
-    if (selectHeader.getAttribute("data-initialize") == "true") return;
-    selectHeader.setAttribute("data-initialize", "true");
+    const headerElements = pgs(header).querySelectorAll("header-element");
+    
+    if (!headerElements.length) return;
 
-    //= ACTIVE MOBILE 
-    let menuAttivate = false;
-    let childsWidthSAVE;
+    headerElements.forEach(selectHeader => {
 
-    function mobileActive(headerElement) {
+        //== ACTIVE MOBILE 
+        let menuAttivate = false;
+        let childsWidthSAVE;
 
-        //=== header
-        let style = window.getComputedStyle(headerElement);
-        let padding = parseFloat(style.paddingLeft) + parseFloat(style.paddingRight);
-        let gap = parseFloat(style.gap);
-        let headerElementWidth = parseInt(headerElement.offsetWidth - padding);
-        let childsWidth;
+        function mobileActive(headerElement) {
 
-        if (menuAttivate) {
-            childsWidth = childsWidthSAVE;
-        } else {
-            let childs = [];
-
-            // Esclude l'area mobile dedicata e l'hamburger, poi misura i figli sempre visibili su desktop.
-            Array.from(headerElement.children)
-                .filter(el => !pgs(el).contains("header-element-onlyMobile"))
-                .forEach(child => {
-                    if (pgs(child).contains("header-element-hamburger")) return;
-                    childs.push(...child.children);
-                });
+            //=== header
+            let style = window.getComputedStyle(headerElement);
+            let padding = parseFloat(style.paddingLeft) + parseFloat(style.paddingRight);
+            let gap = parseFloat(style.gap);
+            let headerElementWidth = parseInt(headerElement.offsetWidth - padding);
+            let childsWidth;
 
-            gap = Math.round(gap * (childs.length - 1));
-            let childsReduce = childs.reduce((totalWidth, child) => totalWidth + child.offsetWidth, 0) - 2;
+            if (menuAttivate) {
+                childsWidth = childsWidthSAVE;
+            } else {
+                let childs = [];
 
-            childsWidth = childsReduce + gap;
-        }
+                // Esclude l'area mobile dedicata e l'hamburger, poi misura i figli sempre visibili su desktop.
+                Array.from(headerElement.children)
+                    .filter(el => !pgs(el).contains("header-element-onlyMobile"))
+                    .forEach(child => {
+                        if (pgs(child).contains("header-element-hamburger")) return;
+                        childs.push(...child.children);
+                    });
 
-        //===set data
-        if (window.innerWidth < 600) {
-            header.setAttribute("data-header-mobileActive", "true");
-            selectHeader.setAttribute("data-header-mobileActive", "true");
-        } else if (headerElementWidth < childsWidth) {
-            header.setAttribute("data-header-mobileActive", "true");
-            headerElement.setAttribute("data-header-mobileActive", "true");
-            menuAttivate = true;
-            childsWidthSAVE = childsWidth;
-        } else {
-            header.setAttribute("data-header-mobileActive", "false");
-            headerElement.setAttribute("data-header-mobileActive", "false");
-        }
-    }
+                gap = Math.round(gap * (childs.length - 1));
+                let childsReduce = childs.reduce((totalWidth, child) => totalWidth + child.offsetWidth, 0) - 2;
 
-    //== observer (throttled to avoid ResizeObserver loop warnings)
-    let resizeRafId = 0;
-    const scheduleMobileActive = () => {
-        if (resizeRafId) return;
-        resizeRafId = requestAnimationFrame(() => {
-            resizeRafId = 0;
-            mobileActive(selectHeader);
-        });
-    };
+                childsWidth = childsReduce + gap;
+            }
 
-    let observer = new ResizeObserver(scheduleMobileActive);
-    observer.observe(selectHeader);
-    scheduleMobileActive();
+            //===set data
+            if (window.innerWidth < 600) {
+                pgs(header).state.add("mobileActive");
+                pgs(selectHeader).state.add("mobileActive");
+            } else if (headerElementWidth < childsWidth) {
+                pgs(header).state.add("mobileActive");
+                pgs(headerElement).state.add("mobileActive");
+                menuAttivate = true;
+                childsWidthSAVE = childsWidth;
+            } else {
+                pgs(header).state.remove("mobileActive");
+                pgs(headerElement).state.remove("mobileActive");
+            }
+        }
 
+        //== observer (throttled to avoid ResizeObserver loop warnings)
+        let resizeRafId = 0;
+        const scheduleMobileActive = () => {
+            if (resizeRafId) return;
+            resizeRafId = requestAnimationFrame(() => {
+                resizeRafId = 0;
+                mobileActive(selectHeader);
+            });
+        };
+
+        let observer = new ResizeObserver(scheduleMobileActive);
+        observer.observe(selectHeader);
+        scheduleMobileActive();
+    });
+
+    // Ripristina la posizione dell'header quando si esce dalla modalità mobile
+    window.addEventListener("resize", () => {
+        if (window.innerWidth > 768) header.style.transform = "translateY(0)";
+    });
 }
-
-
+PGS_header();
 
 
 //= HEADER HEIGHT
-const body = document.querySelector("body");
 function headerHeight() {
-    const headerElements = document.querySelectorAll("header > [data-initialize=true]");
+    if (!header) return;
     const wordPressBar = window.getComputedStyle(document.documentElement).marginTop ?? 0;
+    const headerHeight = header.offsetHeight
 
-    const totalHeight = Array.from(headerElements)
-        .map(el => el.offsetHeight)
-        .reduce((sum, h) => sum + h);
-
-    const height = totalHeight + parseInt(wordPressBar);
-
-    body.style.setProperty('--heightOfHeader', `${height}px`);
+    const body = document.querySelector("body");
+    const height = headerHeight + parseInt(wordPressBar);
     const scrollHeight = document.querySelector("header").getAttribute("data-header-scroll") === "true" ? 0 : height;
+    body.style.setProperty('--heightOfHeader', `${height}px`);
     body.style.setProperty('--heightOfHeaderScroll', `${scrollHeight}px`);
-
 }
 headerHeight()
 window.addEventListener("resize", headerHeight);
 window.addEventListener("scroll", headerHeight);
 
 
+
+
 //= SCROLL
 // Nasconde l'header quando si scorre verso il basso e lo mostra quando si scorre verso l'alto su dispositivi con larghezza fino a 900px.
 let lastScrollY = window.scrollY;
 window.addEventListener("scroll", () => {
+    if (!header) return;
     let currentScrollY = window.scrollY;
 
     if (window.innerHeight <= 900) {
@@ -122,13 +126,7 @@ window.addEventListener("scroll", () => {
 
 });
 
-// Ripristina la posizione dell'header quando si esce dalla modalità mobile
-window.addEventListener("resize", () => {
-    if (window.innerWidth > 768) header.style.transform = "translateY(0)";
-});
 
-// MOBILE ACTIVE
-if (window.innerWidth < 600) {
-    document.querySelector("header").setAttribute("data-header-mobileActive", "true");
-    document.querySelector("[pgs~=header-element]").setAttribute("data-header-mobileActive", "true");
-}
+
+
+

package/assets/scss/base/_body.scss

@@ -1,3 +1,5 @@
+@use "../mixin/mixin" as *;
+
 //== BASE
 [pgs~="bodyBase"] {
     background-color: var(--color-background);

package/assets/scss/base/_color.scss

@@ -1,3 +1,5 @@
+@use "../mixin/mixin" as *;
+
 //= COLOR
 //== LIGHTMODE & DARKMODE
 :root {

package/assets/scss/base/_general.scss

@@ -1,3 +1,5 @@
+@use "../mixin/mixin" as *;
+
 //# GENERAL
 [pgs~=initP] {
 

package/assets/scss/base/_heading.scss

@@ -1,3 +1,5 @@
+@use "../mixin/mixin" as *;
+
 //# HEADING
 [pgs~=initP] {
     [pgs~=h1] {

package/assets/scss/base/_variables.scss

@@ -1,3 +1,5 @@
+@use "../mixin/mixin" as *;
+
 //+ MIXIN
 // = SETTINGS 
 :root {

package/assets/scss/components/_accordion.scss

@@ -1,3 +1,5 @@
+@use "../mixin/mixin" as *;
+
 //# ACCORDION
 [pgs~=accordion] {
     padding: 0 !important;

package/assets/scss/components/_button.scss

@@ -1,3 +1,5 @@
+@use "../mixin/mixin" as *;
+
 //# BUTTON
 [pgs~=button] {
     @include button()

package/assets/scss/components/_form.scss

@@ -1,3 +1,5 @@
+@use "../mixin/mixin" as *;
+
 //# FORM
 [pgs~=textarea] {
     @include textarea();

package/assets/scss/components/_logo.scss

@@ -1,3 +1,5 @@
+@use "../mixin/mixin" as *;
+
 //# LOGO 
 [pgs~="logo"] {
     display: flex;

package/assets/scss/components/_menu.scss

@@ -1,3 +1,5 @@
+@use "../mixin/mixin" as *;
+
 //# MENU
 [pgs~=menu] {
     ul {

package/assets/scss/components/_modals.scss

@@ -1,3 +1,5 @@
+@use "../mixin/mixin" as *;
+
 html:has(dialog[open]) {
     overflow: hidden;
     position: relative;

package/assets/scss/components/_notification.scss

@@ -1,3 +1,5 @@
+@use "../mixin/mixin" as *;
+
 //= NOTIFICATION GROUP / TRIGGER
 [pgs~="notificationTrigger"] {}
 

package/assets/scss/components/_searchbar.scss

@@ -1,3 +1,5 @@
+@use "../mixin/mixin" as *;
+
 //= SEARCH BAR
 [pgs~="searchbar"] {
     position: relative;

package/assets/scss/components/_slides.scss

@@ -1,3 +1,5 @@
+@use "../mixin/mixin" as *;
+
 [pgs~="slides"] {
     display: flex;
     flex-direction: column;

package/assets/scss/components/_stepTabs.scss

@@ -1,3 +1,5 @@
+@use "../mixin/mixin" as *;
+
 [pgs~=stepTabs] {
     [pgs~=stepTabs-container] {
         [pgs~=tab] {

package/assets/scss/components/_steps.scss

@@ -1,3 +1,5 @@
+@use "../mixin/mixin" as *;
+
 ol[pgs~="steps"] {
     color: var(--color-black);