mypgs 2.0.0 → 3.0.0

package/docs/layout/flex.md

@@ -1,116 +0,0 @@
-<!-- File generato automaticamente da templates/html/layout/flex.html. Modificare templates/html/layout/flex.html e rieseguire npm run docs:generate. -->
-
-# Flex
-
-Esempi di layout flex responsive che distribuiscono da due a sei elementi per riga adattando automaticamente la disposizione allo spazio disponibile.
-
-## PGS
-
-- `flex-2`: crea una distribuzione responsive fino a due elementi per riga.
-- `flex-3`: crea una distribuzione responsive fino a tre elementi per riga.
-- `flex-4`: crea una distribuzione responsive fino a quattro elementi per riga.
-- `flex-6`: crea una distribuzione responsive fino a sei elementi per riga.
-
-## Elementi correlati
-
-- `container`: definisce il contesto contenitore dell'introduzione.
-- `flexColumnTexts`: organizza verticalmente e distanzia testi e contenuti delle card.
-- `card`: rende visibili le celle dimostrative del layout flex.
-
-## Output
-
-Raccolta HTML dei layout flex responsive a due, tre, quattro e sei elementi.
-
-## Esempio
-
-```html
-<div pgs="container flexColumnTexts">
-    <strong>Sezione standard</strong>
-    <p>Contenuto centrato dentro una sezione MyPGS.</p>
-</div>
-
-
-<div pgs="flex-2">
-    <article pgs="card flexColumnTexts">
-        <strong>Colonna uno</strong>
-        <p>Contenuto della prima colonna.</p>
-    </article>
-
-    <article pgs="card flexColumnTexts">
-        <strong>Colonna due</strong>
-        <p>Contenuto della seconda colonna.</p>
-    </article>
-</div>
-
-
-<div pgs="flex-3">
-    <article pgs="card flexColumnTexts">
-        <strong>Colonna uno</strong>
-        <p>Contenuto della prima colonna.</p>
-    </article>
-
-    <article pgs="card flexColumnTexts">
-        <strong>Colonna due</strong>
-        <p>Contenuto della seconda colonna.</p>
-    </article>
-
-    <article pgs="card flexColumnTexts">
-        <strong>Colonna tre</strong>
-        <p>Contenuto della terza colonna.</p>
-    </article>
-</div>
-
-
-<div pgs="flex-4">
-    <article pgs="card flexColumnTexts">
-        <strong>Colonna uno</strong>
-        <p>Contenuto della prima colonna.</p>
-    </article>
-
-    <article pgs="card flexColumnTexts">
-        <strong>Colonna due</strong>
-        <p>Contenuto della seconda colonna.</p>
-    </article>
-
-    <article pgs="card flexColumnTexts">
-        <strong>Colonna tre</strong>
-        <p>Contenuto della terza colonna.</p>
-    </article>
-    <article pgs="card flexColumnTexts">
-        <strong>Colonna quattro</strong>
-        <p>Contenuto della quarta colonna.</p>
-    </article>
-</div>
-
-<div pgs="flex-6">
-    <article pgs="card flexColumnTexts">
-        <strong>Colonna uno</strong>
-        <p>Contenuto della prima colonna.</p>
-    </article>
-
-    <article pgs="card flexColumnTexts">
-        <strong>Colonna due</strong>
-        <p>Contenuto della seconda colonna.</p>
-    </article>
-
-    <article pgs="card flexColumnTexts">
-        <strong>Colonna tre</strong>
-        <p>Contenuto della terza colonna.</p>
-    </article>
-
-    <article pgs="card flexColumnTexts">
-        <strong>Colonna quattro</strong>
-        <p>Contenuto della quarta colonna.</p>
-    </article>
-
-    <article pgs="card flexColumnTexts">
-        <strong>Colonna cinque</strong>
-        <p>Contenuto della quinta colonna.</p>
-    </article>
-
-    <article pgs="card flexColumnTexts">
-        <strong>Colonna sei</strong>
-        <p>Contenuto della sesta colonna.</p>
-    </article>
-</div
-```

package/docs/layout/grid.md

@@ -1,116 +0,0 @@
-<!-- File generato automaticamente da templates/html/layout/grid.html. Modificare templates/html/layout/grid.html e rieseguire npm run docs:generate. -->
-
-# Grid
-
-Esempi di griglie responsive che distribuiscono da due a sei colonne mantenendo gap e ridimensionamento coerenti con il design system.
-
-## PGS
-
-- `grid-2`: crea una griglia responsive fino a due colonne.
-- `grid-3`: crea una griglia responsive fino a tre colonne.
-- `grid-4`: crea una griglia responsive fino a quattro colonne.
-- `grid-6`: crea una griglia responsive fino a sei colonne.
-
-## Elementi correlati
-
-- `container`: definisce il contesto contenitore dell'introduzione.
-- `flexColumnTexts`: organizza e distanzia i testi introduttivi e delle card.
-- `card`: rende visibili le celle dimostrative delle griglie.
-
-## Output
-
-Raccolta HTML delle griglie responsive a due, tre, quattro e sei colonne.
-
-## Esempio
-
-```html
-<div pgs="container flexColumnTexts">
-    <strong>Sezione standard</strong>
-    <p>Contenuto centrato dentro una sezione MyPGS.</p>
-</div>
-
-
-<div pgs="grid-2">
-    <article pgs="card flexColumnTexts">
-        <strong>Colonna uno</strong>
-        <p>Contenuto della prima colonna.</p>
-    </article>
-
-    <article pgs="card flexColumnTexts">
-        <strong>Colonna due</strong>
-        <p>Contenuto della seconda colonna.</p>
-    </article>
-</div>
-
-
-<div pgs="grid-3">
-    <article pgs="card flexColumnTexts">
-        <strong>Colonna uno</strong>
-        <p>Contenuto della prima colonna.</p>
-    </article>
-
-    <article pgs="card flexColumnTexts">
-        <strong>Colonna due</strong>
-        <p>Contenuto della seconda colonna.</p>
-    </article>
-
-    <article pgs="card flexColumnTexts">
-        <strong>Colonna tre</strong>
-        <p>Contenuto della terza colonna.</p>
-    </article>
-</div>
-
-
-<div pgs="grid-4">
-    <article pgs="card flexColumnTexts">
-        <strong>Colonna uno</strong>
-        <p>Contenuto della prima colonna.</p>
-    </article>
-
-    <article pgs="card flexColumnTexts">
-        <strong>Colonna due</strong>
-        <p>Contenuto della seconda colonna.</p>
-    </article>
-
-    <article pgs="card flexColumnTexts">
-        <strong>Colonna tre</strong>
-        <p>Contenuto della terza colonna.</p>
-    </article>
-    <article pgs="card flexColumnTexts">
-        <strong>Colonna quattro</strong>
-        <p>Contenuto della quarta colonna.</p>
-    </article>
-</div>
-
-<div pgs="grid-6">
-    <article pgs="card flexColumnTexts">
-        <strong>Colonna uno</strong>
-        <p>Contenuto della prima colonna.</p>
-    </article>
-
-    <article pgs="card flexColumnTexts">
-        <strong>Colonna due</strong>
-        <p>Contenuto della seconda colonna.</p>
-    </article>
-
-    <article pgs="card flexColumnTexts">
-        <strong>Colonna tre</strong>
-        <p>Contenuto della terza colonna.</p>
-    </article>
-
-    <article pgs="card flexColumnTexts">
-        <strong>Colonna quattro</strong>
-        <p>Contenuto della quarta colonna.</p>
-    </article>
-
-    <article pgs="card flexColumnTexts">
-        <strong>Colonna cinque</strong>
-        <p>Contenuto della quinta colonna.</p>
-    </article>
-
-    <article pgs="card flexColumnTexts">
-        <strong>Colonna sei</strong>
-        <p>Contenuto della sesta colonna.</p>
-    </article>
-</div
-```

package/templates/html/components/accordion.html

@@ -1,52 +0,0 @@
-<!--
-/**
-* @title Accordion
-* @description Componente interattivo che espande un pannello alla volta, sincronizzando visibilità, attributi ARIA e navigazione da tastiera.
-*
-* @pgs
-* - accordion: identifica ogni elemento espandibile inizializzato dal modulo JavaScript.
-* - accordion-button: identifica il controllo che apre o chiude il pannello associato.
-* - accordion-content: identifica il pannello di contenuto gestito tramite l'attributo hidden.
-*
-* @pgs-state
-* - open: indica l'elemento accordion attualmente aperto e visibile.
-*
-* @api
-* - pgs.accordion.init(root): inizializza gli accordion non ancora registrati dentro Document o Element indicato.
-* - pgs.accordion.api(element): restituisce l'istanza associata a un root accordion inizializzato.
-* - instance.open(): apre il pannello e chiude gli altri accordion presenti nella pagina.
-* - instance.close(): chiude il pannello corrente.
-* - instance.toggle(): inverte lo stato aperto o chiuso del pannello.
-* - instance.refresh(): riesegue l'inizializzazione nel contenitore dell'accordion e restituisce l'istanza.
-* - instance.isOpen(): restituisce true quando lo stato open è attivo.
-*
-* @related
-* - flexColumnTexts: applica la spaziatura testuale tra gli elementi della lista.
-*
-* @return Lista HTML di elementi accordion accessibili con pulsante e pannello associato.
-*/
--->
-
-<ul pgs="flexColumnTexts">
-    <li pgs="accordion">
-        <button pgs="accordion-button" type="button">
-            <i class="fa-solid fa-circle-question" aria-hidden="true"></i>
-            <span>Domanda frequente</span>
-        </button>
-
-        <div pgs="accordion-content" hidden>
-            <p>Risposta di esempio con contenuto testuale riutilizzabile.</p>
-        </div>
-    </li>
-
-    <li pgs="accordion">
-        <button pgs="accordion-button" type="button">
-            <i class="fa-solid fa-circle-info" aria-hidden="true"></i>
-            <span>Seconda sezione</span>
-        </button>
-
-        <div pgs="accordion-content" hidden>
-            <p>Altro contenuto del pannello accordion.</p>
-        </div>
-    </li>
-</ul>

package/templates/html/components/badges.html

@@ -1,60 +0,0 @@
-<!--
-/**
- * @title Badge
- * @description Raccolta di indicatori compatti per mostrare categorie, priorità e stati visivi con varianti cromatiche coerenti.
- *
- * @pgs
- * - badge: identifica la variante base del badge.
- * - badgePrimary: applica la variante con colore primario.
- * - badgeStrong: applica la variante ad alto contrasto.
- * - badgeSuccess: rappresenta un esito positivo.
- * - badgeDot: aggiunge un indicatore puntiforme al badge.
- * - badgeWarning: rappresenta un avviso.
- * - badgeError: rappresenta un errore.
- * - badgeInfo: rappresenta un'informazione.
- * - badgeNeutral: applica la variante neutra.
- *
- * @related
- * - flexRow: dispone i badge orizzontalmente consentendo il ritorno a capo.
- *
- * @return Esempi HTML delle varianti badge disponibili.
- */
--->
-
-<div pgs="flexRow">
-    <span pgs="badge">
-        Base
-    </span>
-
-    <span pgs="badgePrimary">
-        Primary
-    </span>
-
-    <span pgs="badgeStrong">
-        Strong
-    </span>
-
-    <span pgs="badgeSuccess badgeDot">
-        Attivo
-    </span>
-
-    <span pgs="badgeWarning">
-        <i class="fa-solid fa-triangle-exclamation" aria-hidden="true"></i>
-        Attenzione
-    </span>
-
-    <span pgs="badgeError">
-        <i class="fa-solid fa-xmark" aria-hidden="true"></i>
-        Errore
-    </span>
-
-    <span pgs="badgeInfo">
-        <i class="fa-solid fa-circle-info" aria-hidden="true"></i>
-        Info
-    </span>
-
-    <span pgs="badgeNeutral" href="#">
-        Neutrale
-    </span>
-
-</div>

package/templates/html/components/button.html

@@ -1,51 +0,0 @@
-<!--
-/**
- * @title Button
- * @description Varianti di pulsante e collegamento d'azione con dimensioni, enfasi e composizione icona-testo definite dal design system.
- *
- * @pgs
- * - button: identifica il pulsante standard utilizzabile anche su elementi a.
- * - buttonStrong: applica la variante con maggiore enfasi visiva.
- * - buttonIcon: identifica un pulsante compatto composto principalmente da un'icona.
- * - buttonMini: applica la variante di dimensione minima.
- * - buttonBig: applica la variante di dimensione ampia.
- *
- * @pgs-option
- * - buttonReverse: inverte l'ordine visivo di testo e icona sul pulsante a cui è applicata.
- *
- * @related
- * - flexRow: dispone gli esempi di pulsante su una riga flessibile.
- *
- * @return Raccolta HTML delle principali varianti di button.
- */
--->
-
-<div pgs="flexRow">
-    <a pgs="button" href="#">
-        <i class="fa-duotone fa-solid fa-store"></i>
-        About
-    </a>
-
-    <button pgs="button" type="button" pgs-option="buttonReverse">
-        Avanti
-        <i class="fa-solid fa-arrow-right" aria-hidden="true"></i>
-    </button>
-
-    <button pgs="buttonStrong" type="button">
-        <i class="fa-solid fa-check" aria-hidden="true"></i>
-        Submit
-    </button>
-
-    <button pgs="buttonIcon" type="button" aria-label="Impostazioni">
-        <i class="fa-solid fa-gear" aria-hidden="true"></i>
-    </button>
-
-    <button pgs="buttonMini" type="button" aria-label="Informazioni">
-        <i class="fa-solid fa-info" aria-hidden="true"></i>
-    </button>
-
-    <button pgs="buttonBig" type="button" aria-label="Bottone grande">
-        <i class="fa-solid fa-rocket" aria-hidden="true"></i>
-        Bottone grande
-    </button>
-</div>

package/templates/html/components/card.html

@@ -1,43 +0,0 @@
-<!--
-/**
- * @title Card
- * @description Contenitore riutilizzabile per raggruppare immagine, titolo, testo e azioni in anteprime o raccolte responsive.
- *
- * @pgs
- * - card: identifica il contenitore principale della scheda.
- * - card-img: identifica l'immagine principale della card.
- *
- * @related
- * - flex-2: dispone le card in un layout responsive a due elementi.
- * - flexColumn: organizza verticalmente il contenuto della card o del relativo link.
- * - imgCover: adatta l'immagine riempiendo l'area disponibile.
- * - flexColumnTexts: applica la spaziatura verticale ai contenuti testuali.
- * - button: presenta il collegamento finale come pulsante standard.
- *
- * @return Due strutture HTML di card, una con azione separata e una interamente cliccabile.
- */
--->
-
-<div pgs="flex-2">
-
-    <article pgs="card flexColumn">
-        <img pgs="card-img imgCover" src="https://placehold.co/800x500" alt="Immagine segnaposto">
-        
-        <div pgs="flexColumnTexts">
-            <h3>Card riutilizzabile</h3>
-            <p>Contenuto descrittivo della card, adatto a liste, anteprime e griglie.</p>
-            <a pgs="button" href="#">Leggi di piu</a>
-        </div>
-    </article>
-    
-    <article pgs="card">
-        <a pgs="flexColumn" href="">
-            <img pgs="card-img imgCover" src="https://placehold.co/800x500" alt="Immagine segnaposto">
-            
-            <div pgs="flexColumnTexts">
-                <h3>Card riutilizzabile</h3>
-                <p>Contenuto descrittivo della card, adatto a liste, anteprime e griglie.</p>
-            </div>
-        </a>
-    </article>
-</div>

package/templates/html/components/form.html

@@ -1,104 +0,0 @@
-<!--
-/**
- * @title Form
- * @description Struttura di modulo con etichette, campi testuali, textarea e controllo toggle compatibile con i vincoli HTML e con regole personalizzate di PGS_formValidate.
- *
- * @pgs
- * - form: identifica il contenitore del modulo e applica il layout dei campi.
- * - formValidate: abilita gli stili associati agli stati di validazione gestiti dalla utility JavaScript.
- * - label: identifica le etichette associate ai controlli.
- * - input: applica lo stile condiviso agli input testuali.
- * - textarea: applica lo stile condiviso all'area di testo.
- * - toggle: presenta una checkbox come controllo a due stati.
- *
- * @pgs-option
- * - message: definisce il messaggio specifico del campo con la sintassi message[Testo del messaggio].
- * - error: viene applicata a runtime al form e ai campi che non superano la validazione.
- * - success: viene applicata a runtime al form quando la validazione ha esito positivo.
- *
- * @api
- * - new pgs.formValidate(form, options): crea una utility associata direttamente al form, aggiunge automaticamente novalidate e accetta fieldError, fieldsError e success in options.message; i messaggi restano modificabili tramite instance.message.
- * - instance.validator(callback, eventName): intercetta l'evento indicato, previene il comportamento predefinito, valida il form, mostra il messaggio di successo e richiama callback solo quando è valido; eventName usa submit come valore predefinito.
- * - instance.validate(): valida i campi required, aggiorna gli attributi di stato e restituisce true o false.
- * - instance.success(text): valida il form e mostra un toast positivo quando non sono presenti errori.
- * - instance.addNewRule(rule): aggiunge una funzione che restituisce uno o più campi non validi; validate applica automaticamente addFieldError a ciascun campo.
- * - instance.addFieldError(field, index, total): marca un campo come non valido; mostra il messaggio specifico per un solo errore o un messaggio riepilogativo per più errori.
- * - instance.removeFieldError(field): rimuove lo stato di errore dal campo indicato.
- *
- * @related
- * - buttonStrong: presenta l'invio del modulo come azione primaria.
- *
- * @return Modulo HTML completo con campi required e script di esempio per una regola personalizzata, la validazione e il messaggio di successo.
- */
--->
-
-<form pgs="form formValidate" action="#" method="post">
-    <label pgs="label" for="form-name">
-        Nome
-    </label>
-    <input id="form-name" pgs="input" pgs-option="message[Inserisci il nome]" type="text" name="name" placeholder="Mario Rossi" required>
-
-    <label pgs="label" for="form-email">
-        Email
-    </label>
-    <input id="form-email" pgs="input" pgs-option="message[Inserisci una email valida]" type="email" name="email" placeholder="nome@example.com" required>
-
-    <label pgs="label" for="form-password">
-        Password
-    </label>
-    <input id="form-password" pgs="input" pgs-option="message[Inserisci una password]" type="password" name="password" autocomplete="new-password" required>
-
-    <label pgs="label" for="form-confirm-password">
-        Conferma password
-    </label>
-    <input id="form-confirm-password" pgs="input" pgs-option="message[Conferma la password]" type="password" name="confirmPassword" autocomplete="new-password" required>
-
-    <label pgs="label" for="form-message">
-        Messaggio
-    </label>
-    <textarea id="form-message" pgs="textarea" name="message" rows="5" placeholder="Scrivi il messaggio" required></textarea>
-
-    <label pgs="toggle">
-        <span>Accetto la privacy policy</span>
-        <input type="checkbox" name="privacy" required>
-    </label>
-
-    <button pgs="buttonStrong" type="submit">
-        <i class="fa-solid fa-paper-plane" aria-hidden="true"></i>
-        Invia
-    </button>
-</form>
-
-<script type="module">
-    import { pgs } from "mypgs";
-
-    const form = pgs(document).querySelector("form");
-
-    const password = form.querySelector('input[name="password"]');
-    const confirmPassword = form.querySelector('input[name="confirmPassword"]');
-    if (!password || !confirmPassword) return;
-
-    const formValidate = new pgs.formValidate(form, {
-        message: {
-            fieldError: "Completa questo campo",
-            fieldsError: "Completa tutti i campi obbligatori",
-            success: "Inviato con successo"
-        }
-    });
-
-    //== new roules
-    formValidate.addNewRule(() => {
-        if (password.value && confirmPassword.value && password.value !== confirmPassword.value) {
-            pgs(confirmPassword).option.setValueBrackets("message", "Le password non coincidono");
-            return [confirmPassword, password];
-        }
-    });
-
-    //== validate
-    formValidate.validator(event => {
-        const values = Object.fromEntries(new FormData(form));
-
-        // Sostituisci questo log con l'invio dei dati al tuo backend.
-        console.log(values);
-    }, "submit");
-</script>

package/templates/html/components/logo.html

@@ -1,28 +0,0 @@
-<!--
-/**
- * @title Logo
- * @description Componente per mostrare un logo grafico o testuale, con supporto alle varianti dell'immagine legate al tema scuro.
- *
- * @pgs
- * - logo: identifica il collegamento contenitore del marchio.
- * - logo-image: identifica l'immagine grafica del logo.
- * - logo-text: identifica la variante testuale del marchio.
- *
- * @pgs-option
- * - logoDarkmode: inverte l'immagine del logo quando lo stato globale darkmode è attivo.
- * - logoDarkmodeFixed: mantiene applicata l'inversione dell'immagine indipendentemente dal tema corrente.
- *
- * @pgs-state
- * - darkmode: stato globale applicato al documento che attiva la variante logoDarkmode.
- *
- * @return Esempi HTML del logo grafico sensibile al tema e del logo testuale.
- */
--->
-
-<a aria-label="Logo" pgs="logo" pgs-option="logoDarkmode" href="/">
-    <img pgs="logo-image" src="https://placehold.co/240x80?text=MyPGS" alt="MyPGS">
-</a>
-
-<a aria-label="Logo testuale" pgs="logo" href="/">
-    <span pgs="logo-text">MyPGS</span>
-</a>