mypgs 2.0.0 → 2.1.0

package/docs/componenti-e-markup.md

@@ -1,6 +1,6 @@
-# Componenti e markup
+# Components and markup
 
-I template completi sono in `templates/`. Usa quei file come sorgente di riferimento prima di creare markup nuovo.
+Complete templates are available in `templates/`. Use those files as the reference source before creating new markup.
 
 ## Componenti disponibili
 
@@ -13,6 +13,7 @@ Componenti:
 - [`card`](components/card.md)
 - [`dropdown`](components/dropdown.md)
 - [`form`](components/form.md)
+- [`formAddon`](components/formAddon.md)
 - [`logo`](components/logo.md)
 - [`menu`](components/menu.md)
 - [`modal`](components/modal.md)
@@ -39,7 +40,7 @@ Pattern:
 
 - [`cookieConsent`](patterns/cookieConsent.md)
 
-## Search con suggerimenti
+## Search with suggestions
 
 `search` include sia lo stile sia il comportamento di ricerca e usa `search-suggestions` come lista opzionale:
 
@@ -51,7 +52,7 @@ Pattern:
 </form>
 ```
 
-Il progetto fornisce la sorgente dati; `mypgs` non dipende da endpoint o formati backend specifici:
+The project provides the data source; `mypgs` does not depend on specific backend endpoints or formats:
 
 ```js
 const form = pgs(document).querySelector("search");
@@ -75,7 +76,7 @@ pgs.search.api(form)?.configure({
 
 La sorgente puo' essere anche un array locale di stringhe o oggetti. Il componente gestisce debounce, annullamento richieste, risposte fuori ordine, tastiera, selezione, click esterno, stati `open`, `loading` ed `error` e attributi ARIA. Gli eventi `pgs:search:select` e `pgs:search:error` sono emessi sul root `search`.
 
-## Altri elementi senza template
+## Other elements without templates
 
 Base:
 

package/docs/components/accordion.md

@@ -1,60 +1,60 @@
-<!-- File generato automaticamente da templates/html/components/accordion.html. Modificare templates/html/components/accordion.html e rieseguire npm run docs:generate. -->
+<!-- Automatically generated from templates/html/components/accordion.html. Edit templates/html/components/accordion.html and run npm run docs:generate again. -->
 
 # Accordion
 
-Componente interattivo che espande un pannello alla volta, sincronizzando visibilità, attributi ARIA e navigazione da tastiera.
+Interactive component that expands one panel at a time while synchronizing visibility, ARIA attributes, and keyboard navigation.
 
 ## 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.
+- `accordion`: identifies each expandable element initialized by the JavaScript module.
+- `accordion-button`: identifies the control that opens or closes the associated panel.
+- `accordion-content`: identifies the content panel managed through the hidden attribute.
 
 ## PGS States
 
-- `open`: indica l'elemento accordion attualmente aperto e visibile.
+- `open`: indicates the accordion element that is currently open and visible.
 
-## API JavaScript
+## JavaScript 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.
+- `pgs.accordion.init(root)`: initializes unregistered accordions within the specified Document or Element.
+- `pgs.accordion.api(element)`: returns the instance associated with an initialized accordion root.
+- `instance.open()`: opens the panel and closes any other accordions on the page.
+- `instance.close()`: closes the current panel.
+- `instance.toggle()`: toggles the panel between its open and closed states.
+- `instance.refresh()`: reruns initialization within the accordion container and returns the instance.
+- `instance.isOpen()`: returns true when the open state is active.
 
-## Elementi correlati
+## Related elements
 
-- `flexColumnTexts`: applica la spaziatura testuale tra gli elementi della lista.
+- `flexColumnTexts`: applies text spacing between the list items.
 
 ## Output
 
-Lista HTML di elementi accordion accessibili con pulsante e pannello associato.
+HTML list of accessible accordion items with an associated button and panel.
 
-## Esempio
+## Example
 
 ```html
 <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>
+            <span>Frequently asked question</span>
         </button>
 
         <div pgs="accordion-content" hidden>
-            <p>Risposta di esempio con contenuto testuale riutilizzabile.</p>
+            <p>Example answer with reusable text content.</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>
+            <span>Second section</span>
         </button>
 
         <div pgs="accordion-content" hidden>
-            <p>Altro contenuto del pannello accordion.</p>
+            <p>Additional accordion panel content.</p>
         </div>
     </li>
 </ul>

package/docs/components/badges.md

@@ -1,30 +1,30 @@
-<!-- File generato automaticamente da templates/html/components/badges.html. Modificare templates/html/components/badges.html e rieseguire npm run docs:generate. -->
+<!-- Automatically generated from templates/html/components/badges.html. Edit templates/html/components/badges.html and run npm run docs:generate again. -->
 
 # Badge
 
-Raccolta di indicatori compatti per mostrare categorie, priorità e stati visivi con varianti cromatiche coerenti.
+Collection of compact indicators for displaying categories, priorities, and visual states with consistent color variants.
 
 ## 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.
+- `badge`: identifies the base badge variant.
+- `badgePrimary`: applies the primary color variant.
+- `badgeStrong`: applies the high-contrast variant.
+- `badgeSuccess`: represents a successful result.
+- `badgeDot`: adds a dot indicator to the badge.
+- `badgeWarning`: represents a warning.
+- `badgeError`: represents an error.
+- `badgeInfo`: represents informational content.
+- `badgeNeutral`: applies the neutral variant.
 
-## Elementi correlati
+## Related elements
 
-- `flexRow`: dispone i badge orizzontalmente consentendo il ritorno a capo.
+- `flexRow`: arranges badges horizontally and allows them to wrap.
 
 ## Output
 
-Esempi HTML delle varianti badge disponibili.
+HTML examples of the available badge variants.
 
-## Esempio
+## Example
 
 ```html
 <div pgs="flexRow">
@@ -41,17 +41,17 @@ Esempi HTML delle varianti badge disponibili.
     </span>
 
     <span pgs="badgeSuccess badgeDot">
-        Attivo
+        Active
     </span>
 
     <span pgs="badgeWarning">
         <i class="fa-solid fa-triangle-exclamation" aria-hidden="true"></i>
-        Attenzione
+        Warning
     </span>
 
     <span pgs="badgeError">
         <i class="fa-solid fa-xmark" aria-hidden="true"></i>
-        Errore
+        Error
     </span>
 
     <span pgs="badgeInfo">
@@ -60,7 +60,7 @@ Esempi HTML delle varianti badge disponibili.
     </span>
 
     <span pgs="badgeNeutral" href="#">
-        Neutrale
+        Neutral
     </span>
 
 </div>

package/docs/components/breadcumbs.md

@@ -1,20 +1,20 @@
-<!-- File generato automaticamente da templates/html/components/breadcumbs.html. Modificare templates/html/components/breadcumbs.html e rieseguire npm run docs:generate. -->
+<!-- Automatically generated from templates/html/components/breadcumbs.html. Edit templates/html/components/breadcumbs.html and run npm run docs:generate again. -->
 
 # Breadcrumb
 
-Navigazione gerarchica che mostra il percorso della pagina corrente con collegamenti, separatori e indicazione semantica dell'elemento attivo.
+Hierarchical navigation that shows the current page path with links, separators, and a semantic indication of the active item.
 
 ## PGS
 
-- `breadcrumb`: identifica la lista principale del percorso di navigazione.
-- `breadcrumb-item`: identifica ogni livello del percorso.
-- `breadcrumb-item-separator`: identifica il separatore decorativo nascosto alle tecnologie assistive.
+- `breadcrumb`: identifies the main navigation path list.
+- `breadcrumb-item`: identifies each level in the path.
+- `breadcrumb-item-separator`: identifies the decorative separator hidden from assistive technologies.
 
 ## Output
 
-Struttura HTML semantica di una breadcrumb racchiusa in un elemento nav.
+Semantic breadcrumb HTML structure wrapped in a nav element.
 
-## Esempio
+## Example
 
 ```html
 <nav aria-label="Breadcrumb">
@@ -35,7 +35,7 @@ Struttura HTML semantica di una breadcrumb racchiusa in un elemento nav.
 
         <li pgs="breadcrumb-item">
             <span aria-current="page">
-                Articolo di prova
+                Sample article
             </span>
         </li>
     </ul>

package/docs/components/button.md

@@ -1,30 +1,30 @@
-<!-- File generato automaticamente da templates/html/components/button.html. Modificare templates/html/components/button.html e rieseguire npm run docs:generate. -->
+<!-- Automatically generated from templates/html/components/button.html. Edit templates/html/components/button.html and run npm run docs:generate again. -->
 
 # Button
 
-Varianti di pulsante e collegamento d'azione con dimensioni, enfasi e composizione icona-testo definite dal design system.
+Button and action-link variants with sizes, emphasis, and icon-text composition defined by the 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.
+- `button`: identifies the standard button, which can also be used on anchor elements.
+- `buttonStrong`: applies the variant with stronger visual emphasis.
+- `buttonIcon`: identifies a compact button composed primarily of an icon.
+- `buttonMini`: applies the smallest size variant.
+- `buttonBig`: applies the large size variant.
 
 ## PGS Options
 
-- `buttonReverse`: inverte l'ordine visivo di testo e icona sul pulsante a cui è applicata.
+- `buttonReverse`: reverses the visual order of the text and icon on the button.
 
-## Elementi correlati
+## Related elements
 
-- `flexRow`: dispone gli esempi di pulsante su una riga flessibile.
+- `flexRow`: arranges the button examples in a flexible row.
 
 ## Output
 
-Raccolta HTML delle principali varianti di button.
+HTML collection of the main button variants.
 
-## Esempio
+## Example
 
 ```html
 <div pgs="flexRow">
@@ -34,7 +34,7 @@ Raccolta HTML delle principali varianti di button.
     </a>
 
     <button pgs="button" type="button" pgs-option="buttonReverse">
-        Avanti
+        Next
         <i class="fa-solid fa-arrow-right" aria-hidden="true"></i>
     </button>
 
@@ -43,17 +43,17 @@ Raccolta HTML delle principali varianti di button.
         Submit
     </button>
 
-    <button pgs="buttonIcon" type="button" aria-label="Impostazioni">
+    <button pgs="buttonIcon" type="button" aria-label="Settings">
         <i class="fa-solid fa-gear" aria-hidden="true"></i>
     </button>
 
-    <button pgs="buttonMini" type="button" aria-label="Informazioni">
+    <button pgs="buttonMini" type="button" aria-label="Information">
         <i class="fa-solid fa-info" aria-hidden="true"></i>
     </button>
 
-    <button pgs="buttonBig" type="button" aria-label="Bottone grande">
+    <button pgs="buttonBig" type="button" aria-label="Large button">
         <i class="fa-solid fa-rocket" aria-hidden="true"></i>
-        Bottone grande
+        Large button
     </button>
 </div>
 ```

package/docs/components/card.md

@@ -1,48 +1,48 @@
-<!-- File generato automaticamente da templates/html/components/card.html. Modificare templates/html/components/card.html e rieseguire npm run docs:generate. -->
+<!-- Automatically generated from templates/html/components/card.html. Edit templates/html/components/card.html and run npm run docs:generate again. -->
 
 # Card
 
-Contenitore riutilizzabile per raggruppare immagine, titolo, testo e azioni in anteprime o raccolte responsive.
+Reusable container for grouping an image, title, text, and actions in responsive previews or collections.
 
 ## PGS
 
-- `card`: identifica il contenitore principale della scheda.
-- `card-img`: identifica l'immagine principale della card.
+- `card`: identifies the main card container.
+- `card-img`: identifies the main card image.
 
-## Elementi correlati
+## Related elements
 
-- `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.
+- `flex-2`: arranges the cards in a responsive two-item layout.
+- `flexColumn`: organizes the card or link content vertically.
+- `imgCover`: scales the image to fill the available area.
+- `flexColumnTexts`: applies vertical spacing to text content.
+- `button`: presents the final link as a standard button.
 
 ## Output
 
-Due strutture HTML di card, una con azione separata e una interamente cliccabile.
+Two card HTML structures, one with a separate action and one that is fully clickable.
 
-## Esempio
+## Example
 
 ```html
 <div pgs="flex-2">
 
     <article pgs="card flexColumn">
-        <img pgs="card-img imgCover" src="https://placehold.co/800x500" alt="Immagine segnaposto">
+        <img pgs="card-img imgCover" src="https://placehold.co/800x500" alt="Placeholder image">
         
         <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>
+            <h3>Reusable card</h3>
+            <p>Descriptive card content suitable for lists, previews, and grids.</p>
+            <a pgs="button" href="#">Read more</a>
         </div>
     </article>
     
     <article pgs="card">
         <a pgs="flexColumn" href="">
-            <img pgs="card-img imgCover" src="https://placehold.co/800x500" alt="Immagine segnaposto">
+            <img pgs="card-img imgCover" src="https://placehold.co/800x500" alt="Placeholder image">
             
             <div pgs="flexColumnTexts">
-                <h3>Card riutilizzabile</h3>
-                <p>Contenuto descrittivo della card, adatto a liste, anteprime e griglie.</p>
+                <h3>Reusable card</h3>
+                <p>Descriptive card content suitable for lists, previews, and grids.</p>
             </div>
         </a>
     </article>

package/docs/components/dropdown.md

@@ -1,44 +1,44 @@
-<!-- File generato automaticamente da templates/html/components/dropdown.html. Modificare templates/html/components/dropdown.html e rieseguire npm run docs:generate. -->
+<!-- Automatically generated from templates/html/components/dropdown.html. Edit templates/html/components/dropdown.html and run npm run docs:generate again. -->
 
 # Dropdown
 
-Componente a comparsa che associa un controllo a un contenuto posizionato rispetto al trigger e gestisce apertura, chiusura, click esterno ed Escape.
+Popup component that connects a control to content positioned relative to its trigger and handles opening, closing, outside clicks, and Escape.
 
 ## PGS
 
-- `dropdown`: identifica il contenitore inizializzato dal modulo dropdown.
-- `dropdown-button`: identifica il controllo che apre o chiude il contenuto.
-- `dropdown-content`: identifica il pannello posizionato rispetto al controllo.
+- `dropdown`: identifies the container initialized by the dropdown module.
+- `dropdown-button`: identifies the control that opens or closes the content.
+- `dropdown-content`: identifies the panel positioned relative to the control.
 
 ## PGS Options
 
-- `position`: configura il root come position[lato allineamento]; lato accetta top, right, bottom o left e l'allineamento compatibile accetta top, right, bottom, left o center. Il valore predefinito è bottom center.
-- `buttonReverse`: inverte testo e icona sui pulsanti di esempio e appartiene al componente button.
+- `position`: configures the root as position[side alignment]; side accepts top, right, bottom, or left, while compatible alignment values are top, right, bottom, left, or center. The default is bottom center.
+- `buttonReverse`: reverses text and icon on the example buttons and belongs to the button component.
 
 ## PGS States
 
-- `open`: indica che il dropdown è aperto e che il contenuto è visibile.
+- `open`: indicates that the dropdown is open and its content is visible.
 
-## API JavaScript
+## JavaScript API
 
-- `pgs.dropdown.init(root)`: inizializza i dropdown non ancora registrati dentro Document o Element indicato.
-- `pgs.dropdown.api(element)`: restituisce l'istanza associata a un root dropdown inizializzato.
-- `instance.open()`: apre il dropdown, chiudendo eventuali altri dropdown aperti.
-- `instance.close()`: chiude il dropdown corrente.
-- `instance.toggle()`: inverte lo stato aperto o chiuso.
-- `instance.refresh()`: reinizializza il contesto e ricalcola il posizionamento del contenuto.
-- `instance.isOpen()`: restituisce true quando il dropdown è aperto.
+- `pgs.dropdown.init(root)`: initializes unregistered dropdowns within the specified Document or Element.
+- `pgs.dropdown.api(element)`: returns the instance associated with an initialized dropdown root.
+- `instance.open()`: opens the dropdown and closes any other open dropdowns.
+- `instance.close()`: closes the current dropdown.
+- `instance.toggle()`: toggles between the open and closed states.
+- `instance.refresh()`: reinitializes the context and recalculates content positioning.
+- `instance.isOpen()`: returns true when the dropdown is open.
 
-## Elementi correlati
+## Related elements
 
-- `flexRow`: dispone i diversi esempi di posizionamento sulla stessa riga flessibile.
-- `button`: applica lo stile standard ai controlli del dropdown.
+- `flexRow`: arranges the placement examples on the same flexible row.
+- `button`: applies standard styling to dropdown controls.
 
 ## Output
 
-Serie di dropdown HTML che dimostra le direzioni di posizionamento supportate.
+Series of HTML dropdowns demonstrating the supported placement directions.
 
-## Esempio
+## Example
 
 ```html
 <div pgs="flexRow">
@@ -50,7 +50,7 @@ Serie di dropdown HTML che dimostra le direzioni di posizionamento supportate.
         </button>
 
         <div pgs="dropdown-content">
-            Contenuto bottom center
+            bottom center content
         </div>
     </span>
 
@@ -61,7 +61,7 @@ Serie di dropdown HTML che dimostra le direzioni di posizionamento supportate.
         </button>
 
         <div pgs="dropdown-content">
-            Contenuto top left
+            top left content
         </div>
     </span>
 
@@ -72,7 +72,7 @@ Serie di dropdown HTML che dimostra le direzioni di posizionamento supportate.
         </button>
 
         <div pgs="dropdown-content">
-            Contenuto top center
+            top center content
         </div>
     </span>
 
@@ -83,7 +83,7 @@ Serie di dropdown HTML che dimostra le direzioni di posizionamento supportate.
         </button>
 
         <div pgs="dropdown-content">
-            Contenuto top right
+            top right content
         </div>
     </span>
 
@@ -94,7 +94,7 @@ Serie di dropdown HTML che dimostra le direzioni di posizionamento supportate.
         </button>
 
         <div pgs="dropdown-content">
-            Contenuto bottom left
+            bottom left content
         </div>
     </span>
 
@@ -105,7 +105,7 @@ Serie di dropdown HTML che dimostra le direzioni di posizionamento supportate.
         </button>
 
         <div pgs="dropdown-content">
-            Contenuto bottom right
+            bottom right content
         </div>
     </span>
 
@@ -116,7 +116,7 @@ Serie di dropdown HTML che dimostra le direzioni di posizionamento supportate.
         </button>
 
         <div pgs="dropdown-content">
-            Contenuto left center
+            left center content
         </div>
     </span>
 
@@ -127,7 +127,7 @@ Serie di dropdown HTML che dimostra le direzioni di posizionamento supportate.
         </button>
 
         <div pgs="dropdown-content">
-            Contenuto right center
+            right center content
         </div>
     </span>