mypgs 1.6.0 → 2.0.0

package/templates/html/components/stepTabs.html

@@ -1,3 +1,50 @@
+<!--
+/**
+ * @title Step Tabs
+ * @description Procedura guidata a schede con avanzamento sequenziale, indicatori generati, controlli di navigazione e possibilità di bloccare uno step.
+ *
+ * @pgs
+ * - stepTabs: identifica il root della procedura guidata.
+ * - stepTabs-dots: identifica il contenitore degli indicatori di avanzamento.
+ * - stepTabs-dots-dot: identifica ogni indicatore creato dinamicamente.
+ * - stepTabs-container: contiene nell'ordine tutte le schede della procedura.
+ * - tab: identifica una singola scheda navigabile.
+ * - stepTabs-prev: identifica il controllo per tornare allo step precedente.
+ * - stepTabs-restart: identifica il controllo che riavvia la procedura dal primo step.
+ * - stepTabs-next: identifica il controllo per avanzare allo step successivo.
+ *
+ * @pgs-option
+ * - tabIcon: su ogni tab usa tabIcon[classe] con una singola classe Font Awesome per l'indicatore corrispondente; il fallback è fa-circle.
+ * - step: viene applicata a ogni indicatore generato con la sintassi step[indice] per conservarne l'indice zero-based.
+ * - buttonReverse: inverte testo e icona sul pulsante successivo e appartiene al componente button.
+ *
+ * @pgs-state
+ * - is-active: identifica la scheda corrente e il relativo indicatore.
+ * - is-completed: identifica gli indicatori degli step già completati e nuovamente selezionabili.
+ * - is-locked: applicato a un tab impedisce di avanzare finché lo step resta bloccato.
+ *
+ * @api
+ * - pgs.stepTabs.init(root): inizializza le procedure non ancora registrate dentro Document o Element indicato.
+ * - pgs.stepTabs.api(element): restituisce l'istanza associata a un root stepTabs inizializzato.
+ * - instance.restart(): torna al primo tab e ripristina i blocchi dichiarati inizialmente.
+ * - instance.goTo(index, scroll): attiva il tab indicato, aggiorna controlli e indicatori e opzionalmente scorre al componente.
+ * - instance.next(): attiva il tab successivo entro i limiti disponibili.
+ * - instance.prev(): attiva il tab precedente entro i limiti disponibili.
+ * - instance.toggleLock(index, lock): aggiunge o rimuove is-locked dal tab indicato e aggiorna i controlli.
+ * - instance.refresh(): riesegue l'inizializzazione nel contenitore della procedura e restituisce l'istanza.
+ * - instance.getCurrent(): restituisce l'indice del tab corrente.
+ * - instance.getState(): restituisce un oggetto con indice corrente e numero totale di tab.
+ *
+ * @related
+ * - flexColumnElements: organizza verticalmente le aree principali del componente.
+ * - flexColumnTexts: organizza il contenuto testuale di ogni tab.
+ * - flexRow: dispone sulla stessa riga i controlli di navigazione.
+ * - button: applica lo stile standard ai controlli precedente, riavvio e successivo.
+ *
+ * @return Procedura HTML a tre schede con indicatori e controlli di navigazione.
+ */
+-->
+
 <div pgs="stepTabs flexColumnElements">
     <div pgs="stepTabs-dots" aria-label="Avanzamento"></div>
 

package/templates/html/components/steps.html

@@ -1,3 +1,27 @@
+<!--
+/**
+ * @title Steps
+ * @description Elenco ordinato di passaggi che presenta numero, contenuto e linea di collegamento, aggiungendo a runtime gli elementi strutturali mancanti.
+ *
+ * @pgs
+ * - steps: identifica la lista ordinata inizializzata dal modulo steps.
+ * - steps-step: identifica ogni passaggio della sequenza.
+ * - steps-step-circle: identifica l'indicatore numerico, creato automaticamente se assente.
+ * - steps-step-content: identifica il contenuto testuale del passaggio.
+ * - steps-step-line: identifica la linea di collegamento aggiunta dinamicamente a ogni passaggio.
+ *
+ * @api
+ * - pgs.steps.init(root): inizializza le liste steps non ancora registrate dentro Document o Element indicato.
+ * - pgs.steps.api(element): restituisce l'istanza associata a un root steps inizializzato.
+ * - instance.steps(): restituisce un array con tutti gli elementi steps-step.
+ * - instance.getStep(index): restituisce lo step corrispondente all'indice indicato.
+ * - instance.getTotal(): restituisce il numero totale di step.
+ * - instance.refresh(): reinizializza la lista, ricrea gli elementi mancanti e restituisce la nuova istanza.
+ *
+ * @return Lista ordinata HTML di passaggi numerati completata dal modulo JavaScript.
+ */
+-->
+
 <ol pgs="steps">
     <li pgs="steps-step">
         <span pgs="steps-step-circle">1</span>

package/templates/html/components/summary.html

@@ -1,3 +1,30 @@
+<!--
+/**
+ * @title Summary
+ * @description Componente che limita inizialmente un testo lungo a tre righe e mostra il controllo di espansione solo quando il contenuto eccede tale altezza.
+ *
+ * @pgs
+ * - summary: identifica il root inizializzato dal modulo summary.
+ * - summary-content: identifica il contenuto misurato e ridimensionato.
+ * - summary-button: identifica il controllo per mostrare più o meno contenuto.
+ *
+ * @pgs-state
+ * - overflow: indica che il contenuto supera l'altezza contratta e richiede il controllo.
+ * - open: indica che tutto il contenuto è espanso e visibile.
+ *
+ * @api
+ * - pgs.summary.init(root): inizializza i summary non ancora registrati dentro Document o Element indicato.
+ * - pgs.summary.api(element): restituisce l'istanza associata a un root summary inizializzato.
+ * - instance.open(): espande il contenuto quando supera l'altezza contratta.
+ * - instance.close(): richiude il contenuto alla dimensione prevista.
+ * - instance.toggle(): inverte lo stato espanso o contratto.
+ * - instance.refresh(): ricalcola overflow e altezza conservando lo stato corrente.
+ * - instance.isOpen(): restituisce true quando il contenuto è espanso.
+ *
+ * @return Struttura HTML con contenuto espandibile e pulsante sincronizzato tramite ARIA.
+ */
+-->
+
 <div pgs="summary">
     <div pgs="summary-content">
         <p>

package/templates/html/components/table.html

@@ -1,3 +1,15 @@
+<!--
+/**
+ * @title Table
+ * @description Contenitore responsive per una tabella semantica con intestazioni e righe di dati coerenti con gli stili del design system.
+ *
+ * @pgs
+ * - table: identifica il wrapper che gestisce presentazione e scorrimento della tabella nativa.
+ *
+ * @return Tabella HTML completa racchiusa nel contenitore PGS dedicato.
+ */
+-->
+
 <div pgs="table">
     <table>
         <thead>

package/templates/html/components/tooltip.html

@@ -1,3 +1,38 @@
+<!--
+/**
+ * @title Tooltip
+ * @description Variante compatta del dropdown che mostra un breve pannello informativo controllato da un pulsante a icona.
+ *
+ * @pgs
+ * - tooltip: identifica il root della variante tooltip.
+ * - tooltip-button: identifica il controllo specifico del tooltip.
+ * - tooltip-content: identifica il contenuto informativo del tooltip.
+ *
+ * @pgs-option
+ * - position: può essere applicata al root condiviso con sintassi position[lato allineamento] per modificare la posizione ereditata dal dropdown.
+ *
+ * @pgs-state
+ * - open: viene gestito dal modulo dropdown sul root per mostrare o nascondere il tooltip.
+ *
+ * @api
+ * - pgs.dropdown.init(root): inizializza il tooltip perché il suo root condivide il token dropdown.
+ * - pgs.dropdown.api(element): restituisce l'istanza dropdown associata al root del tooltip.
+ * - instance.open(): apre il contenuto informativo.
+ * - instance.close(): chiude il contenuto informativo.
+ * - instance.toggle(): inverte la visibilità del tooltip.
+ * - instance.refresh(): reinizializza il contesto e ricalcola il posizionamento.
+ * - instance.isOpen(): restituisce true quando il tooltip è aperto.
+ *
+ * @related
+ * - dropdown: fornisce apertura, chiusura e posizionamento del tooltip.
+ * - dropdown-button: collega il pulsante al comportamento dropdown.
+ * - dropdown-content: collega il pannello al comportamento dropdown.
+ * - buttonMini: presenta il controllo come pulsante a icona di dimensione minima.
+ *
+ * @return Tooltip HTML composto tramite i token condivisi del dropdown.
+ */
+-->
+
 <span pgs="dropdown tooltip">
     <button pgs="dropdown-button buttonMini tooltip-button" title="open-tooltip" type="button">
         <i class="fa-solid fa-info"></i>

package/templates/html/layout/body.html

@@ -1,3 +1,23 @@
+<!--
+/**
+ * @title Body
+ * @description Documento HTML di base che abilita MyPGS, configura i metadati essenziali e applica al body le varianti condivise di sfondo, testo e titoli.
+ *
+ * @pgs
+ * - htmlBase: applica le regole fondamentali all'elemento html.
+ * - initP: abilita gli stili di layout, componenti e pattern racchiusi nel namespace MyPGS.
+ * - bodyBase: applica struttura e spaziatura di base al body.
+ * - bodyImg: abilita le regole condivise per le immagini contenute nella pagina.
+ * - bodyText: abilita tipografia e spaziatura del testo.
+ * - bodyHeading: abilita la gerarchia tipografica dei titoli.
+ *
+ * @pgs-state
+ * - darkmode: viene applicato dinamicamente a html e body per attivare il tema scuro.
+ *
+ * @return Scheletro HTML completo necessario per inizializzare la libreria MyPGS.
+ */
+-->
+
 <!DOCTYPE html>
 <html lang="it-IT" pgs="htmlBase initP">
 
@@ -9,11 +29,6 @@
 	<meta name="theme-color" content="">
 	<meta name="apple-mobile-web-app-status-bar-color" content="">
 
-    <!-- Fonts -->
-	<link rel="preconnect" href="https://fonts.googleapis.com">
-	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-	<link href="https://fonts.googleapis.com/css2?family=Urbanist:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
-
 </head>
 
 <body pgs="bodyBase bodyImg bodyText bodyHeading" >

package/templates/html/layout/flex.html

@@ -1,3 +1,23 @@
+<!--
+/**
+ * @title Flex
+ * @description 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.
+ *
+ * @related
+ * - 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.
+ *
+ * @return Raccolta HTML dei layout flex responsive a due, tre, quattro e sei elementi.
+ */
+-->
+
 <div pgs="container flexColumnTexts">
     <strong>Sezione standard</strong>
     <p>Contenuto centrato dentro una sezione MyPGS.</p>

package/templates/html/layout/footer.html

@@ -1,3 +1,31 @@
+<!--
+/**
+ * @title Footer
+ * @description Piè di pagina completo con controllo tema, area di brand, navigazione, contenuti informativi e collegamento alle preferenze cookie.
+ *
+ * @pgs
+ * - footer: identifica il contenitore principale del piè di pagina.
+ * - footer-top: identifica la sezione superiore con brand e contenuti.
+ * - footer-top-content: identifica il layout interno responsive della sezione superiore.
+ * - footer-brand: identifica il gruppo dedicato al marchio.
+ * - footer-brand-motto: identifica il testo descrittivo associato al marchio.
+ * - footer-content: identifica una colonna informativa del footer.
+ * - footer-legal: identifica la sezione inferiore dedicata alle informazioni legali.
+ * - footer-legal-content: identifica il contenuto della sezione legale.
+ *
+ * @related
+ * - button: presenta i controlli del tema e delle preferenze cookie come pulsanti.
+ * - toggleDarkmode: collega il controllo al gestore globale del tema chiaro o scuro.
+ * - section: applica alle aree superiore e legale la struttura condivisa delle sezioni.
+ * - flex-3: distribuisce in modo responsive le colonne della parte superiore.
+ * - logo: inserisce il marchio nel footer.
+ * - logo-text: usa la variante testuale del logo.
+ * - cookieConsent-actionOpen: apre il pannello delle preferenze del pattern Cookie Consent.
+ *
+ * @return Struttura HTML completa del footer con brand, menu e area legale.
+ */
+-->
+
 <footer pgs="footer">
     <button pgs="button toggleDarkmode" type="button" aria-label="Cambia tema">
         <i class="fa-solid fa-moon"></i>
@@ -14,7 +42,7 @@
 
             <div pgs="footer-content">
                 <h2>Menu</h2>
-                <nav pgs="menuFooter" aria-label="Menu footer">
+                <nav aria-label="Menu footer">
                     <ul>
                         <li><a href="/">Home</a></li>
                         <li><a href="/contatti">Contatti</a></li>

package/templates/html/layout/grid.html

@@ -1,3 +1,23 @@
+<!--
+/**
+ * @title Grid
+ * @description 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.
+ *
+ * @related
+ * - 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.
+ *
+ * @return Raccolta HTML delle griglie responsive a due, tre, quattro e sei colonne.
+ */
+-->
+
 <div pgs="container flexColumnTexts">
     <strong>Sezione standard</strong>
     <p>Contenuto centrato dentro una sezione MyPGS.</p>

package/templates/html/layout/header.html

@@ -1,3 +1,44 @@
+<!--
+/**
+ * @title Header
+ * @description Intestazione responsive che misura lo spazio disponibile, alterna contenuti desktop e mobile e integra menu, tema scuro e navigazione modale.
+ *
+ * @pgs
+ * - header: identifica l'intestazione principale osservata dal modulo JavaScript.
+ * - header-element: identifica il gruppo interno misurato per determinare il passaggio alla modalità mobile.
+ * - header-element-alwaysOn: identifica l'area iniziale sempre visibile.
+ * - header-element-onlyDesktop: identifica i contenuti mostrati soltanto quando il menu desktop è attivo.
+ * - header-element-onlyMobile: identifica i contenuti mostrati soltanto in modalità mobile.
+ * - header-element-alwaysOnLast: identifica l'area finale sempre visibile.
+ * - header-element-hamburger: identifica il gruppo della navigazione mobile.
+ * - header-element-hamburger-button: identifica il controllo hamburger specifico dell'header.
+ *
+ * @pgs-option
+ * - horizontal: dispone orizzontalmente il menu desktop correlato.
+ * - vertical: dispone verticalmente il menu mobile correlato.
+ * - menuHeader: adatta entrambi i menu al contesto dell'header.
+ * - containerPGS: sul wrapper modal usa containerPGS[header] per spostare il dialog nell'intestazione.
+ * - right: sul dialog della navigazione mobile presenta il contenuto dal lato destro.
+ *
+ * @pgs-state
+ * - mobileActive: viene applicato a header e header-element quando larghezza o viewport richiedono la navigazione mobile.
+ *
+ * @related
+ * - logo: inserisce il marchio nell'area iniziale.
+ * - logo-text: usa la variante testuale del logo.
+ * - menu: fornisce la navigazione desktop e mobile.
+ * - buttonIcon: presenta i controlli tema e hamburger come pulsanti a icona.
+ * - toggleDarkmode: collega il controllo al gestore globale del tema.
+ * - modal: fornisce apertura e chiusura della navigazione mobile.
+ * - modal-button: apre il pannello mobile.
+ * - modal-close: chiude il pannello mobile e condivide il controllo hamburger.
+ * - modal-dialog: identifica il dialog della navigazione mobile.
+ * - modal-dialog-content: identifica il pannello interno della navigazione mobile.
+ *
+ * @return Header HTML completo con navigazione desktop e pannello mobile laterale.
+ */
+-->
+
 <header pgs="header">
 	<div pgs="header-element">
 		<div pgs="header-element-alwaysOn">

package/templates/html/layout/pageShell.html

@@ -1,3 +1,22 @@
+<!--
+/**
+ * @title Page Shell
+ * @description Layout di pagina responsive che combina un contenuto principale con zero, una o due barre laterali scorrevoli, adattandone larghezza e posizione.
+ *
+ * @pgs
+ * - pageShell: identifica il contenitore che calcola la composizione di main e aside.
+ * - pageShell-aside: identifica una barra laterale posizionabile prima o dopo il contenuto.
+ * - pageShell-aside-scroll: identifica l'area interna che può restare visibile durante lo scorrimento.
+ * - pageShell-content: identifica il contenuto principale della pagina.
+ *
+ * @related
+ * - flexColumnTexts: organizza i testi contenuti nelle barre laterali.
+ * - flexColumnElements: organizza verticalmente gli elementi delle sezioni principali.
+ *
+ * @return Quattro configurazioni HTML di page shell con due, una o nessuna barra laterale.
+ */
+-->
+
 <div pgs="pageShell">
     <aside pgs="pageShell-aside">
         <div pgs="pageShell-aside-scroll">

package/templates/html/layout/section.html

@@ -1,40 +1,62 @@
+<!--
+/**
+ * @title Section
+ * @description Varianti di sezione che controllano larghezza, padding e trattamento di contenuti specifici mantenendo la spaziatura verticale condivisa.
+ *
+ * @pgs
+ * - section: identifica la sezione standard con contenuto centrato.
+ * - sectionFull: identifica una sezione estesa a tutta la larghezza disponibile.
+ * - sectionSpecificity: identifica una sezione che applica una struttura specifica al relativo figlio.
+ * - sectionSpecificity-child: identifica il contenuto figlio gestito dalla variante sectionSpecificity.
+ * - sectionMax: identifica una sezione con larghezza massima estesa.
+ * - sectionNoPadding: identifica una sezione priva del padding standard.
+ *
+ * @related
+ * - flexColumnSections: distanzia verticalmente tutte le sezioni dell'esempio.
+ * - flexColumnElements: organizza verticalmente gli elementi principali di ogni sezione.
+ * - flexColumnTexts: organizza e distanzia i contenuti interni.
+ * - card-img: riutilizza il trattamento delle immagini card nelle sezioni dimostrative.
+ * - imgCover: adatta le immagini alla larghezza della sezione.
+ *
+ * @return Raccolta HTML delle varianti di section disponibili.
+ */
+-->
+
 <div pgs="flexColumnSections">
     <section pgs="section flexColumnElements">
-        <div pgs="container flexColumnTexts">
+        <div pgs="flexColumnTexts">
             <strong>Sezione standard</strong>
             <p>Contenuto centrato dentro una sezione MyPGS.</p>
         </div>
     </section>
 
     <section pgs="sectionFull flexColumnElements">
-        <div pgs="container flexColumnTexts">
+        <div pgs="flexColumnTexts">
             <strong>Sezione full-width</strong>
             <p>Contenuto centrato dentro una sezione MyPGS.</p>
         </div>
     </section>
 
     <section pgs="sectionSpecificity flexColumnElements">
-        <div pgs="container flexColumnTexts">
-            <strong>Sezione specificità</strong>
-            <p>Contenuto centrato dentro una sezione MyPGS.</p>
+        <div pgs="flexColumnTexts">
+            <img pgs="card-img imgCover" src="https://placehold.co/800x200?text=Hero" alt="Immagine segnaposto">
         </div>
-        <div pgs="sectionSpecificity-child container flexColumnTexts">
+        <div pgs="sectionSpecificity-child flexColumnTexts">
             <strong>Sezione specificità-child</strong>
             <p>Contenuto centrato dentro una sezione MyPGS.</p>
         </div>
     </section>
 
     <section pgs="sectionMax flexColumnElements" style="background-color: var(--color-primary-soft)">
-        <div pgs="container flexColumnTexts">
+        <div pgs="flexColumnTexts">
             <strong>Sezione max-width</strong>
             <p>Contenuto centrato dentro una sezione MyPGS.</p>
         </div>
     </section>
 
     <section pgs="sectionNoPadding flexColumnElements">
-        <div pgs="container flexColumnTexts">
-            <strong>Sezione no-padding</strong>
-            <p>Contenuto centrato dentro una sezione MyPGS.</p>
+        <div pgs="flexColumnTexts">
+            <img pgs="card-img imgCover" src="https://placehold.co/800x500?text=HI!" alt="Immagine segnaposto">
         </div>
     </section>
 </div>

package/templates/html/patterns/cookieConsent.html

@@ -1,3 +1,34 @@
+<!--
+/**
+ * @title Cookie Consent
+ * @description Pattern accessibile per raccogliere e memorizzare il consenso ai cookie analitici, applicare le preferenze e caricare Google Analytics solo quando autorizzato.
+ *
+ * @pgs
+ * - cookieConsent: identifica il pannello principale inizializzato dal pattern JavaScript.
+ * - cookieConsent-panel: identifica il gruppo delle preferenze configurabili.
+ * - cookieConsent-featureEssential: identifica la riga dei cookie tecnici sempre attivi.
+ * - cookieConsent-panel-badge: identifica l'indicatore dello stato dei cookie tecnici.
+ * - cookieConsent-featureAnalytics: identifica la riga dei cookie analitici opzionali.
+ * - cookieConsent-toggleAnalytics: identifica il controllo che abilita il consenso analytics.
+ * - cookieConsent-actionReject: applica le preferenze selezionate senza accettare automaticamente analytics.
+ * - cookieConsent-actionAccept: accetta tutti i cookie disponibili.
+ * - cookieConsent-actionOpen: identifica controlli esterni che riaprono il pannello delle preferenze.
+ * - cookieConsent-gaUnavailable: token runtime applicato al root quando manca un measurement ID utilizzabile.
+ * - cookieConsent-accepted: token runtime applicato al root quando analytics è consentito.
+ * - cookieConsent-declined: token runtime applicato al root quando analytics non è consentito.
+ *
+ * @related
+ * - flexColumn: organizza verticalmente il pannello delle preferenze.
+ * - flexRow: dispone righe e azioni del pannello.
+ * - nowrap: impedisce il ritorno a capo nella riga dei cookie essenziali.
+ * - toggle: presenta il consenso analytics come interruttore.
+ * - button: presenta l'azione di selezione con lo stile standard.
+ * - buttonStrong: presenta l'accettazione completa come azione primaria.
+ *
+ * @return Pannello HTML di consenso con preferenze tecniche e analytics, azioni e attributi accessibili.
+ */
+-->
+
 <section id="pgs-cookieConsent" pgs="cookieConsent" role="dialog" aria-modal="true" data-ga-id="G-XXXXXXXXXX" hidden tabindex="-1">
     <p><i class="fa-duotone fa-solid fa-cookie-bite"></i> Cookie e privacy <br></p>
     <h2>La tua privacy prima di tutto</h2>

package/templates/react/components/form.jsx

@@ -1,15 +1,15 @@
 export default function Form() {
     return (
-        <form pgs="form" action="#" method="post">
+        <form pgs="form formValidate" action="#" method="post">
             <label pgs="label" htmlFor="form-name">
                 Nome
             </label>
-            <input id="form-name" pgs="input" type="text" name="name" placeholder="Mario Rossi" required data-form-field-message="Inserisci il nome" />
+            <input id="form-name" pgs="input" pgs-option="message[Inserisci il nome]" type="text" name="name" placeholder="Mario Rossi" required />
 
             <label pgs="label" htmlFor="form-email">
                 Email
             </label>
-            <input id="form-email" pgs="input" type="email" name="email" placeholder="nome@example.com" required data-form-field-message="Inserisci una email valida" />
+            <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" htmlFor="form-message">
                 Messaggio

package/templates/react/components/notification.jsx

@@ -9,7 +9,7 @@ const notificationData = {
 };
 
 const toastData = {
-    title: "Benvetuto",
+    title: "Benvenuto",
     message: "Messaggio",
     element: "toast",
     type: "info",
@@ -22,10 +22,10 @@ export default function Notification() {
     return (
         <>
             <div pgs="notification" aria-live="polite"></div>
-            <div pgs="toast" aria-live="polite"></div>
+            <div pgs="notification" pgs-option="toast" aria-live="polite"></div>
 
-            <div pgs="hidden notificationTrigger" data-notification={JSON.stringify(notificationData)}></div>
-            <div pgs="hidden notificationTrigger" data-notification={JSON.stringify(toastData)}></div>
+            <div pgs="hidden notificationTrigger" pgs-option={`notification[${JSON.stringify(notificationData)}]`}></div>
+            <div pgs="hidden notificationTrigger" pgs-option={`notification[${JSON.stringify(toastData)}]`}></div>
         </>
     );
 }

package/templates/react/patterns/footer.jsx

@@ -16,7 +16,7 @@ export default function Footer() {
 
                     <div pgs="footer-content">
                         <h2>Menu</h2>
-                        <nav pgs="menuFooter" aria-label="Menu footer">
+                        <nav aria-label="Menu footer">
                             <ul>
                                 <li><a href="/">Home</a></li>
                                 <li><a href="/contatti">Contatti</a></li>

package/templates/html/demo.js

@@ -1,130 +0,0 @@
-
-const templateFiles = [
-    "components/summary.html",
-    "components/menu.html",
-    "components/tooltip.html",
-    "components/modal.html",
-    "components/stepTabs.html",
-    "components/accordion.html",
-    "components/badges.html",
-    "components/breadcumbs.html",
-    "components/button.html",
-    "components/card.html",
-    "components/dropdown.html",
-    "components/tooltip.html",
-    "components/form.html",
-    "components/logo.html",
-    "components/search.html",
-    "components/slides.html",
-    "components/steps.html",
-    "components/table.html",
-    "components/notification.html",
-    "layout/body.html",
-    "layout/section.html",
-    "layout/flex.html",
-    "layout/grid.html",
-    "layout/pageShell.html",
-    "layout/footer.html",
-    "layout/header.html",
-    "patterns/cookieConsent.html",
-];
-
-function getTemplateTitle(path) {
-    return path.replace(".html", "").replace("/", " / ")
-}
-
-function renderSourceTemplate(section, html) {
-    const pre = document.createElement("pre");
-    const code = document.createElement("code");
-    code.textContent = html.trim();
-    pre.append(code);
-    section.append(pre);
-}
-
-function renderTemplate(section, path, html) {
-    const content = document.createElement("div");
-    content.setAttribute("pgs", "container flexColumnElements");
-    content.innerHTML = html;
-    section.append(content);
-}
-
-function renderLayout(root, path, html) {
-    const template = document.createElement("template");
-    template.innerHTML = html.trim();
-    root.append(template.content.cloneNode(true));
-}
-
-function renderTitle(section, path) {
-    const title = document.createElement("p");
-    title.classList.add("template-title");
-    title.innerHTML = "<strong>" + getTemplateTitle(path) + "</strong>";
-    section.append(title);
-}
-
-async function loadTemplate(path) {
-    const response = await fetch(path);
-    if (!response.ok) throw new Error(`${path}: ${response.status}`);
-    return response.text();
-}
-
-function loadPgsJavascript() {
-    const script = document.createElement("script");
-    script.src = "../../dist/javascript/index.js";
-    document.body.append(script);
-}
-
-async function bootDemo() {
-    const BEEFORE = document.getElementById("templates-demo-before");
-    const MAIN = document.getElementById("templates-demo-main");
-    const AFTER = document.getElementById("templates-demo-after");
-
-    for (const path of templateFiles) {
-        const isHeader = path === "layout/header.html";
-        const isfooter = path === "layout/footer.html";
-        const isBody = path === "layout/body.html";
-
-        if (isHeader || isfooter) {
-            try {
-                const html = await loadTemplate(path);
-                renderLayout(isHeader ? BEEFORE : AFTER, path, html);
-            } catch (error) {
-                const message = document.createElement("p");
-                message.textContent = `Template non caricato: ${error.message}`;
-                layoutRoot.append(message);
-            }
-            continue;
-        }
-
-        const section = document.createElement("section");
-        section.setAttribute("pgs", "section flexColumnElements");
-        section.dataset.template = path;
-        renderTitle(section, path);
-
-        if (isBody) {
-            const html = await loadTemplate(path);
-            renderSourceTemplate(section, html);
-            MAIN.append(section);
-            continue
-        }
-
-        try {
-            const html = await loadTemplate(path);
-            renderTemplate(section, path, html);
-        } catch (error) {
-            const message = document.createElement("p");
-            message.textContent = `Template non caricato: ${error.message}`;
-            section.append(message);
-        }
-
-        MAIN.append(section);
-
-        if (path == "layout/section.html" || path == "layout/pageShell.html") {
-            section.style.display = "contents";
-            Array.from(section.children).forEach(c => c.style.width = "100%");
-        }
-    }
-
-    loadPgsJavascript();
-}
-
-bootDemo();