mypgs 1.3.6 → 1.4.0

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.
 
@@ -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/_imports.js

@@ -8,6 +8,7 @@ import { PGS_notification } from "./components/_notifications.js";
 import { PGS_slides } from "./components/_slides.js";
 import { PGS_stepTabs } from "./components/_stepTabs.js";
 import { PGS_steps } from "./components/_steps.js";
+import { PGS_summary } from "./components/_summary.js";
 import { PGS_formValidate } from "./functions/_formValidate.js";
 import { PGS_scrollHorizontal } from "./functions/_scrollY.js";
 
@@ -20,7 +21,7 @@ pgs.registerModules({
     slides: PGS_slides,
     stepTabs: PGS_stepTabs,
     steps: PGS_steps,
+    summary: PGS_summary,
     formValidate: PGS_formValidate,
     scrollHorizontal: PGS_scrollHorizontal,
 });
-

package/assets/javascript/components/_summary.js

@@ -0,0 +1,105 @@
+//= SUMMARY
+const API = new WeakMap();
+let summaryId = 0;
+
+function nextSummaryId() {
+    summaryId += 1;
+    return summaryId;
+}
+
+function getLineHeight(element) {
+    const style = window.getComputedStyle(element);
+    const lineHeight = parseFloat(style.lineHeight);
+    if (Number.isFinite(lineHeight)) return lineHeight;
+
+    const fontSize = parseFloat(style.fontSize);
+    return Number.isFinite(fontSize) ? fontSize * 1.2 : 0;
+}
+
+function directPgsChild(element, token) {
+    return Array.from(element.children).find(child => pgs(child).contains(token));
+}
+
+export function PGS_summary_init(root = document) {
+    pgs(root).querySelectorAll("summary").forEach((summary) => {
+        if (API.has(summary)) return;
+
+        const content = directPgsChild(summary, "summary-content");
+        const button = directPgsChild(summary, "summary-button");
+        if (!content || !button) return;
+
+        const id = nextSummaryId();
+        const contentId = content.id || `summary-content-${id}`;
+        content.id = contentId;
+
+        button.type ||= "button";
+        button.setAttribute("aria-controls", content.id);
+
+        function isOpen() {
+            return pgs(summary).state.contains("open");
+        }
+
+        function getCollapsedHeight() {
+            return getLineHeight(content) * 3;
+        }
+
+        function isOverflowing() {
+            return content.scrollHeight > Math.ceil(getCollapsedHeight()) + 1;
+        }
+
+        function setExpanded(expanded) {
+            const overflow = isOverflowing();
+
+            pgs(summary).state.toggle("overflow", overflow);
+            pgs(summary).state.toggle("open", expanded && overflow);
+
+            button.hidden = !overflow;
+            button.setAttribute("aria-hidden", String(!overflow));
+            button.setAttribute("aria-expanded", String(expanded && overflow));
+            button.textContent = expanded && overflow ? "Mostra meno" : "Mostra di più";
+
+            const nextHeight = expanded && overflow ? content.scrollHeight : getCollapsedHeight();
+            content.style.setProperty("--summary-content-max-height", `${nextHeight}px`);
+        }
+
+        function refresh() {
+            const wasOpen = isOpen();
+            content.style.setProperty("--summary-content-max-height", "none");
+            setExpanded(wasOpen);
+        }
+
+        function toggle() {
+            setExpanded(!isOpen());
+        }
+
+        button.addEventListener("click", toggle);
+        window.addEventListener("resize", refresh, { passive: true });
+
+        refresh();
+        requestAnimationFrame(refresh);
+
+        API.set(summary, {
+            element: summary,
+            content,
+            button,
+            open: () => setExpanded(true),
+            close: () => setExpanded(false),
+            toggle,
+            refresh,
+            isOpen,
+        });
+    });
+}
+
+//# INIT
+PGS_summary_init();
+
+//# API
+export function PGS_summary_api(selector) {
+    return API.get(selector);
+}
+
+export const PGS_summary = {
+    init: PGS_summary_init,
+    api: PGS_summary_api
+};

package/assets/javascript/index.js

@@ -14,6 +14,7 @@ import "./components/_modals.js";
 import "./components/_slides.js"
 import "./components/_steps.js";
 import "./components/_stepTabs.js";
+import "./components/_summary.js";
 import "./components/_notifications.js";
 
 //= IMPORT REGISTRY
@@ -21,4 +22,4 @@ import "./_imports.js";
 
 //= PATTERNS 
 import "./patterns/_header.js";
-import "./patterns/_cookieConsent.js";
+import "./patterns/_cookieConsent.js";

package/assets/javascript/patterns/_header.js

@@ -3,11 +3,11 @@ const header = pgs(document).querySelector("header");
 
 //= HEADER
 function PGS_header(selectHeader = document) {
-    
+
     if (!header) return;
 
     const headerElements = pgs(header).querySelectorAll("header-element");
-    
+
     if (!headerElements.length) return;
 
     headerElements.forEach(selectHeader => {
@@ -87,12 +87,11 @@ function headerHeight() {
     if (!header) return;
     const wordPressBar = window.getComputedStyle(document.documentElement).marginTop ?? 0;
     const headerHeight = header.offsetHeight
-
-    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`);
+
+    document.documentElement.style.setProperty("--heightOfHeader", `${height}px`);
+    document.documentElement.style.setProperty("--heightOfHeaderScroll", `${scrollHeight}px`);
 }
 headerHeight()
 window.addEventListener("resize", headerHeight);

package/assets/javascript/pgs.d.ts

@@ -54,6 +54,7 @@ declare global {
     slides?: any;
     stepTabs?: any;
     steps?: any;
+    summary?: any;
     formValidate?: any;
     scrollHorizontal?: any;
     [moduleName: string]: any;

package/assets/scss/base/_variables.scss

@@ -19,7 +19,7 @@
     --text-shadow: 0px 0px 50px #000000;
     --backdrop: #0000003e;
     --blur: blur(20px);
-    --page-top: 20svh;
+    --page-top: calc(var(--heightOfHeaderScroll) + (var(--gap-elements)*2));
     --page-width: 1280px;
     --page-space: clamp(var(--padding-page), calc((100% - var(--section-width)) / 2 + var(--padding-page)), 100%);
     --gap-texts: 1.0rem;

package/assets/scss/components/_badges.scss

@@ -0,0 +1,93 @@
+@use "../mixin/mixin" as *;
+
+@mixin _badge() {
+    --badge-background: var(--color-box);
+    --badge-color: var(--color-black);
+    --badge-size: 1.25rem;
+    --badge-icon-size: 1.4rem;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: calc(var(--badge-size) / 2);
+    width: max-content;
+    max-width: 100%;
+    min-height: calc(var(--badge-size) * 2.2);
+    padding: calc(var(--badge-size) / 2) var(--badge-size);
+    border-radius: var(--border-radius-input);
+    background: var(--badge-background);
+    color: var(--badge-color);
+    font-size: var(--badge-size);
+    font-weight: 700;
+    line-height: 1;
+    text-decoration: none;
+    white-space: nowrap;
+    overflow-wrap: normal;
+
+    i {
+        color: var(--badge-color);
+        font-size: var(--badge-icon-size);
+        --fa-size: var(--badge-icon-size);
+        --fa-primary-color: var(--badge-color);
+        --fa-secondary-color: var(--badge-color);
+        --fa-secondary-opacity: 0.5;
+    }
+}
+
+[pgs~="badge"],
+[pgs~="badgePrimary"],
+[pgs~="badgeStrong"],
+[pgs~="badgeSuccess"],
+[pgs~="badgeWarning"],
+[pgs~="badgeError"],
+[pgs~="badgeInfo"],
+[pgs~="badgeNeutral"],
+[pgs~="badgeDot"] {
+    @include _badge();
+}
+
+[pgs~="badgePrimary"] {
+    --badge-background: var(--color-primary-soft);
+    --badge-color: var(--color-primary-strong);
+}
+
+[pgs~="badgeStrong"] {
+    --badge-background: var(--color-primary);
+    --badge-color: var(--color-whiteFixed);
+}
+
+[pgs~="badgeSuccess"] {
+    --badge-background: var(--color-success-background);
+    --badge-color: var(--color-success);
+}
+
+[pgs~="badgeWarning"] {
+    --badge-background: var(--color-warning-background);
+    --badge-color: var(--color-warning);
+}
+
+[pgs~="badgeError"] {
+    --badge-background: var(--color-error-background);
+    --badge-color: var(--color-error);
+}
+
+[pgs~="badgeInfo"] {
+    --badge-background: var(--color-linkBackgorud);
+    --badge-color: var(--color-link);
+}
+
+[pgs~="badgeNeutral"] {
+    --badge-background: var(--color-box-transparent);
+    --badge-color: var(--color-text);
+}
+
+[pgs~="badgeDot"] {
+    &::before {
+        content: "";
+        display: block;
+        inline-size: 0.65em;
+        block-size: 0.65em;
+        flex: 0 0 auto;
+        border-radius: 50%;
+        background: currentColor;
+    }
+}

package/assets/scss/components/_summary.scss

@@ -0,0 +1,56 @@
+@use "../mixin/mixin" as *;
+
+[pgs~="summary"] {
+    --summary-fade-size: 4rem;
+    --summary-fade-background: var(--color-background);
+    --summary-content-max-height: 5.7rem;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    gap: var(--gap-texts);
+    isolation: isolate;
+
+    [pgs~="summary-content"] {
+        max-height: var(--summary-content-max-height, none);
+        overflow: hidden;
+        transition: max-height 300ms ease;
+    }
+
+    &[pgs-state~="overflow"]:not([pgs-state~="open"]) {
+        [pgs~="summary-content"] {
+            position: relative;
+
+            &::after {
+                content: "";
+                position: absolute;
+                inset: auto 0 0;
+                height: var(--summary-fade-size);
+                pointer-events: none;
+                background: linear-gradient(to bottom, transparent, var(--summary-fade-background));
+            }
+        }
+    }
+
+    &:has([pgs~="summary-button"][hidden]) {
+        [pgs~="summary-content"]{
+            max-height: unset;
+        }
+    }
+
+    [pgs~="summary-button"] {
+        padding: 5px;
+        cursor: pointer;
+        background-color: transparent;
+        border: unset;
+        margin-top: calc(var(--gap-texts) * -1);
+        z-index: 1;
+        color: var(--color-primary-strong);
+        font-family: var(--font);
+        font-weight: 600;
+        font-size: 1.6rem;
+
+        &[hidden] {
+            display: none !important;
+        }
+    }
+}

package/assets/scss/index.scss

@@ -42,6 +42,8 @@
     @include meta.load-css("components/steps");
     @include meta.load-css("components/table");
     @include meta.load-css("components/stepTabs");
+    @include meta.load-css("components/summary");
+    @include meta.load-css("components/badges");
     @include meta.load-css("components/notification");
     @include meta.load-css("components/tooltip");
     @include meta.load-css("components/searchbar");