mypgs 2.0.0 → 2.1.0

package/docs/layout/grid.md

@@ -1,116 +1,116 @@
-<!-- File generato automaticamente da templates/html/layout/grid.html. Modificare templates/html/layout/grid.html e rieseguire npm run docs:generate. -->
+<!-- Automatically generated from templates/html/layout/grid.html. Edit templates/html/layout/grid.html and run npm run docs:generate again. -->
 
 # Grid
 
-Esempi di griglie responsive che distribuiscono da due a sei colonne mantenendo gap e ridimensionamento coerenti con il design system.
+Responsive grid examples that distribute two to six columns while preserving design-system gaps and sizing.
 
 ## 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.
+- `grid-2`: creates a responsive grid with up to two columns.
+- `grid-3`: creates a responsive grid with up to three columns.
+- `grid-4`: creates a responsive grid with up to four columns.
+- `grid-6`: creates a responsive grid with up to six columns.
 
-## Elementi correlati
+## Related elements
 
-- `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.
+- `container`: defines the container context for the introduction.
+- `flexColumnTexts`: organizes and spaces introductory and card text.
+- `card`: makes the demonstration grid cells visible.
 
 ## Output
 
-Raccolta HTML delle griglie responsive a due, tre, quattro e sei colonne.
+HTML collection of responsive grids with two, three, four, and six columns.
 
-## Esempio
+## Example
 
 ```html
 <div pgs="container flexColumnTexts">
-    <strong>Sezione standard</strong>
-    <p>Contenuto centrato dentro una sezione MyPGS.</p>
+    <strong>Standard section</strong>
+    <p>Centered content inside a MyPGS section.</p>
 </div>
 
 
 <div pgs="grid-2">
     <article pgs="card flexColumnTexts">
-        <strong>Colonna uno</strong>
-        <p>Contenuto della prima colonna.</p>
+        <strong>Column one</strong>
+        <p>First column content.</p>
     </article>
 
     <article pgs="card flexColumnTexts">
-        <strong>Colonna due</strong>
-        <p>Contenuto della seconda colonna.</p>
+        <strong>Column two</strong>
+        <p>Second column content.</p>
     </article>
 </div>
 
 
 <div pgs="grid-3">
     <article pgs="card flexColumnTexts">
-        <strong>Colonna uno</strong>
-        <p>Contenuto della prima colonna.</p>
+        <strong>Column one</strong>
+        <p>First column content.</p>
     </article>
 
     <article pgs="card flexColumnTexts">
-        <strong>Colonna due</strong>
-        <p>Contenuto della seconda colonna.</p>
+        <strong>Column two</strong>
+        <p>Second column content.</p>
     </article>
 
     <article pgs="card flexColumnTexts">
-        <strong>Colonna tre</strong>
-        <p>Contenuto della terza colonna.</p>
+        <strong>Column three</strong>
+        <p>Third column content.</p>
     </article>
 </div>
 
 
 <div pgs="grid-4">
     <article pgs="card flexColumnTexts">
-        <strong>Colonna uno</strong>
-        <p>Contenuto della prima colonna.</p>
+        <strong>Column one</strong>
+        <p>First column content.</p>
     </article>
 
     <article pgs="card flexColumnTexts">
-        <strong>Colonna due</strong>
-        <p>Contenuto della seconda colonna.</p>
+        <strong>Column two</strong>
+        <p>Second column content.</p>
     </article>
 
     <article pgs="card flexColumnTexts">
-        <strong>Colonna tre</strong>
-        <p>Contenuto della terza colonna.</p>
+        <strong>Column three</strong>
+        <p>Third column content.</p>
     </article>
     <article pgs="card flexColumnTexts">
-        <strong>Colonna quattro</strong>
-        <p>Contenuto della quarta colonna.</p>
+        <strong>Column four</strong>
+        <p>Fourth column content.</p>
     </article>
 </div>
 
 <div pgs="grid-6">
     <article pgs="card flexColumnTexts">
-        <strong>Colonna uno</strong>
-        <p>Contenuto della prima colonna.</p>
+        <strong>Column one</strong>
+        <p>First column content.</p>
     </article>
 
     <article pgs="card flexColumnTexts">
-        <strong>Colonna due</strong>
-        <p>Contenuto della seconda colonna.</p>
+        <strong>Column two</strong>
+        <p>Second column content.</p>
     </article>
 
     <article pgs="card flexColumnTexts">
-        <strong>Colonna tre</strong>
-        <p>Contenuto della terza colonna.</p>
+        <strong>Column three</strong>
+        <p>Third column content.</p>
     </article>
 
     <article pgs="card flexColumnTexts">
-        <strong>Colonna quattro</strong>
-        <p>Contenuto della quarta colonna.</p>
+        <strong>Column four</strong>
+        <p>Fourth column content.</p>
     </article>
 
     <article pgs="card flexColumnTexts">
-        <strong>Colonna cinque</strong>
-        <p>Contenuto della quinta colonna.</p>
+        <strong>Column five</strong>
+        <p>Fifth column content.</p>
     </article>
 
     <article pgs="card flexColumnTexts">
-        <strong>Colonna sei</strong>
-        <p>Contenuto della sesta colonna.</p>
+        <strong>Column six</strong>
+        <p>Sixth column content.</p>
     </article>
 </div
 ```

package/docs/layout/header.md

@@ -1,50 +1,50 @@
-<!-- File generato automaticamente da templates/html/layout/header.html. Modificare templates/html/layout/header.html e rieseguire npm run docs:generate. -->
+<!-- Automatically generated from templates/html/layout/header.html. Edit templates/html/layout/header.html and run npm run docs:generate again. -->
 
 # Header
 
-Intestazione responsive che misura lo spazio disponibile, alterna contenuti desktop e mobile e integra menu, tema scuro e navigazione modale.
+Responsive header that measures available space, switches between desktop and mobile content, and integrates menus, dark mode, and modal navigation.
 
 ## 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.
+- `header`: identifies the main header observed by the JavaScript module.
+- `header-element`: identifies the inner group measured to determine the switch to mobile mode.
+- `header-element-alwaysOn`: identifies the initial area that is always visible.
+- `header-element-onlyDesktop`: identifies content shown only while the desktop menu is active.
+- `header-element-onlyMobile`: identifies content shown only in mobile mode.
+- `header-element-alwaysOnLast`: identifies the final area that is always visible.
+- `header-element-hamburger`: identifies the mobile navigation group.
+- `header-element-hamburger-button`: identifies the header-specific hamburger control.
 
 ## PGS Options
 
-- `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.
+- `horizontal`: arranges the related desktop menu horizontally.
+- `vertical`: arranges the related mobile menu vertically.
+- `menuHeader`: adapts both menus to the header context.
+- `containerPGS`: uses containerPGS[header] on the modal wrapper to move the dialog into the header.
+- `right`: presents the mobile navigation dialog content from the right side.
 
 ## PGS States
 
-- `mobileActive`: viene applicato a header e header-element quando larghezza o viewport richiedono la navigazione mobile.
+- `mobileActive`: is applied to header and header-element when their width or the viewport requires mobile navigation.
 
-## Elementi correlati
+## Related elements
 
-- `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.
+- `logo`: inserts the brand into the initial area.
+- `logo-text`: uses the text variant of the logo.
+- `menu`: provides desktop and mobile navigation.
+- `buttonIcon`: presents theme and hamburger controls as icon buttons.
+- `toggleDarkmode`: connects the control to the global theme handler.
+- `modal`: provides opening and closing behavior for mobile navigation.
+- `modal-button`: opens the mobile panel.
+- `modal-close`: closes the mobile panel and shares the hamburger control.
+- `modal-dialog`: identifies the mobile navigation dialog.
+- `modal-dialog-content`: identifies the inner mobile navigation panel.
 
 ## Output
 
-Header HTML completo con navigazione desktop e pannello mobile laterale.
+Complete header HTML with desktop navigation and a side mobile panel.
 
-## Esempio
+## Example
 
 ```html
 <header pgs="header">
@@ -56,10 +56,10 @@ Header HTML completo con navigazione desktop e pannello mobile laterale.
 		</div>
 
 		<div pgs="header-element-onlyDesktop">
-			<nav pgs="menu" pgs-option="horizontal menuHeader" aria-label="Menu principale">
+			<nav pgs="menu" pgs-option="horizontal menuHeader" aria-label="Main menu">
 				<ul>
 					<li><a href="/">Home</a></li>
-					<li><a href="#componenti">Componenti</a></li>
+					<li><a href="#components">Components</a></li>
 					<li><a href="#layout">Layout</a></li>
 				</ul>
 			</nav>
@@ -69,7 +69,7 @@ Header HTML completo con navigazione desktop e pannello mobile laterale.
 		</div>
 
 		<div pgs="header-element-alwaysOnLast">
-			<button pgs="buttonIcon toggleDarkmode" type="button" aria-label="Cambia tema">
+			<button pgs="buttonIcon toggleDarkmode" type="button" aria-label="Change theme">
 				<i class="fa-solid fa-moon"></i>
 			</button>
 		</div>
@@ -80,10 +80,10 @@ Header HTML completo con navigazione desktop e pannello mobile laterale.
 
 			<dialog pgs="modal-dialog" pgs-option="right">
 				<div pgs="modal-dialog-content">
-					<nav pgs="menu" pgs-option="vertical menuHeader" aria-label="Menu mobile">
+					<nav pgs="menu" pgs-option="vertical menuHeader" aria-label="Mobile menu">
 						<ul>
 							<li><a href="/">Home</a></li>
-							<li><a href="#componenti">Componenti</a></li>
+							<li><a href="#components">Components</a></li>
 							<li><a href="#layout">Layout</a></li>
 						</ul>
 					</nav>

package/docs/layout/pageShell.md

@@ -1,26 +1,26 @@
-<!-- File generato automaticamente da templates/html/layout/pageShell.html. Modificare templates/html/layout/pageShell.html e rieseguire npm run docs:generate. -->
+<!-- Automatically generated from templates/html/layout/pageShell.html. Edit templates/html/layout/pageShell.html and run npm run docs:generate again. -->
 
 # Page Shell
 
-Layout di pagina responsive che combina un contenuto principale con zero, una o due barre laterali scorrevoli, adattandone larghezza e posizione.
+Responsive page layout that combines main content with zero, one, or two scrollable sidebars and adapts their width and position.
 
 ## 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.
+- `pageShell`: identifies the container that calculates the main and aside composition.
+- `pageShell-aside`: identifies a sidebar that can be placed before or after the content.
+- `pageShell-aside-scroll`: identifies the inner area that can remain visible while scrolling.
+- `pageShell-content`: identifies the main page content.
 
-## Elementi correlati
+## Related elements
 
-- `flexColumnTexts`: organizza i testi contenuti nelle barre laterali.
-- `flexColumnElements`: organizza verticalmente gli elementi delle sezioni principali.
+- `flexColumnTexts`: organizes text contained in the sidebars.
+- `flexColumnElements`: vertically organizes elements in the main sections.
 
 ## Output
 
-Quattro configurazioni HTML di page shell con due, una o nessuna barra laterale.
+Four page-shell HTML configurations with two, one, or no sidebars.
 
-## Esempio
+## Example
 
 ```html
 <div pgs="pageShell">

package/docs/layout/section.md

@@ -1,68 +1,68 @@
-<!-- File generato automaticamente da templates/html/layout/section.html. Modificare templates/html/layout/section.html e rieseguire npm run docs:generate. -->
+<!-- Automatically generated from templates/html/layout/section.html. Edit templates/html/layout/section.html and run npm run docs:generate again. -->
 
 # Section
 
-Varianti di sezione che controllano larghezza, padding e trattamento di contenuti specifici mantenendo la spaziatura verticale condivisa.
+Section variants that control width, padding, and specific content treatment while preserving shared vertical spacing.
 
 ## 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.
+- `section`: identifies the standard section with centered content.
+- `sectionFull`: identifies a section that spans the full available width.
+- `sectionSpecificity`: identifies a section that applies a specific structure to its child.
+- `sectionSpecificity-child`: identifies child content managed by the sectionSpecificity variant.
+- `sectionMax`: identifies a section with an extended maximum width.
+- `sectionNoPadding`: identifies a section without standard padding.
 
-## Elementi correlati
+## Related elements
 
-- `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.
+- `flexColumnSections`: vertically spaces all sections in the example.
+- `flexColumnElements`: vertically organizes the main elements of each section.
+- `flexColumnTexts`: organizes and spaces inner content.
+- `card-img`: reuses card image treatment in the demonstration sections.
+- `imgCover`: scales images to the section width.
 
 ## Output
 
-Raccolta HTML delle varianti di section disponibili.
+HTML collection of the available section variants.
 
-## Esempio
+## Example
 
 ```html
 <div pgs="flexColumnSections">
     <section pgs="section flexColumnElements">
         <div pgs="flexColumnTexts">
-            <strong>Sezione standard</strong>
-            <p>Contenuto centrato dentro una sezione MyPGS.</p>
+            <strong>Standard section</strong>
+            <p>Centered content inside a MyPGS section.</p>
         </div>
     </section>
 
     <section pgs="sectionFull flexColumnElements">
         <div pgs="flexColumnTexts">
-            <strong>Sezione full-width</strong>
-            <p>Contenuto centrato dentro una sezione MyPGS.</p>
+            <strong>Full-width section</strong>
+            <p>Centered content inside a MyPGS section.</p>
         </div>
     </section>
 
     <section pgs="sectionSpecificity flexColumnElements">
         <div pgs="flexColumnTexts">
-            <img pgs="card-img imgCover" src="https://placehold.co/800x200?text=Hero" alt="Immagine segnaposto">
+            <img pgs="card-img imgCover" src="https://placehold.co/800x200?text=Hero" alt="Placeholder image">
         </div>
         <div pgs="sectionSpecificity-child flexColumnTexts">
-            <strong>Sezione specificità-child</strong>
-            <p>Contenuto centrato dentro una sezione MyPGS.</p>
+            <strong>Specificity-child section</strong>
+            <p>Centered content inside a MyPGS section.</p>
         </div>
     </section>
 
     <section pgs="sectionMax flexColumnElements" style="background-color: var(--color-primary-soft)">
         <div pgs="flexColumnTexts">
-            <strong>Sezione max-width</strong>
-            <p>Contenuto centrato dentro una sezione MyPGS.</p>
+            <strong>Max-width section</strong>
+            <p>Centered content inside a MyPGS section.</p>
         </div>
     </section>
 
     <section pgs="sectionNoPadding flexColumnElements">
         <div pgs="flexColumnTexts">
-            <img pgs="card-img imgCover" src="https://placehold.co/800x500?text=HI!" alt="Immagine segnaposto">
+            <img pgs="card-img imgCover" src="https://placehold.co/800x500?text=HI!" alt="Placeholder image">
         </div>
     </section>
 </div>

package/docs/patterns/cookieConsent.md

@@ -1,48 +1,48 @@
-<!-- File generato automaticamente da templates/html/patterns/cookieConsent.html. Modificare templates/html/patterns/cookieConsent.html e rieseguire npm run docs:generate. -->
+<!-- Automatically generated from templates/html/patterns/cookieConsent.html. Edit templates/html/patterns/cookieConsent.html and run npm run docs:generate again. -->
 
 # Cookie Consent
 
-Pattern accessibile per raccogliere e memorizzare il consenso ai cookie analitici, applicare le preferenze e caricare Google Analytics solo quando autorizzato.
+Accessible pattern for collecting and storing analytics cookie consent, applying preferences, and loading Google Analytics only when authorized.
 
 ## 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.
-
-## Elementi correlati
-
-- `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.
+- `cookieConsent`: identifies the main panel initialized by the JavaScript pattern.
+- `cookieConsent-panel`: identifies the configurable preference group.
+- `cookieConsent-featureEssential`: identifies the row of always-active essential cookies.
+- `cookieConsent-panel-badge`: identifies the essential-cookie status indicator.
+- `cookieConsent-featureAnalytics`: identifies the optional analytics-cookie row.
+- `cookieConsent-toggleAnalytics`: identifies the control that enables analytics consent.
+- `cookieConsent-actionReject`: applies selected preferences without automatically accepting analytics.
+- `cookieConsent-actionAccept`: accepts all available cookies.
+- `cookieConsent-actionOpen`: identifies external controls that reopen the preference panel.
+- `cookieConsent-gaUnavailable`: runtime token applied to the root when no usable measurement ID is available.
+- `cookieConsent-accepted`: runtime token applied to the root when analytics is allowed.
+- `cookieConsent-declined`: runtime token applied to the root when analytics is not allowed.
+
+## Related elements
+
+- `flexColumn`: vertically organizes the preference panel.
+- `flexRow`: arranges panel rows and actions.
+- `nowrap`: prevents wrapping in the essential-cookie row.
+- `toggle`: presents analytics consent as a switch.
+- `button`: presents the selection action with standard styling.
+- `buttonStrong`: presents full acceptance as the primary action.
 
 ## Output
 
-Pannello HTML di consenso con preferenze tecniche e analytics, azioni e attributi accessibili.
+Consent panel HTML with essential and analytics preferences, actions, and accessible attributes.
 
-## Esempio
+## Example
 
 ```html
 <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>
+    <p><i class="fa-duotone fa-solid fa-cookie-bite"></i> Cookies and privacy <br></p>
+    <h2>Your privacy comes first</h2>
 
     <p>
-        Utilizziamo cookie tecnici per offrire il servizio e, previo consenso, cookie analitici di
-        <strong>Google Analytics</strong> per misurare in modo anonimo il traffico e migliorare i contenuti.
-        Puoi modificare la scelta in qualsiasi momento.
+        We use essential cookies to provide the service and, with your consent, analytics cookies from
+        <strong>Google Analytics</strong> to measure traffic anonymously and improve our content.
+        You can change your choice at any time.
     </p>
 
     <p>
@@ -50,17 +50,17 @@ Pannello HTML di consenso con preferenze tecniche e analytics, azioni e attribut
         <a href="/cookie-policy/" target="_blank" rel="noopener">Cookie Policy</a>
     </p>
 
-    <div pgs="cookieConsent-panel flexColumn" role="group" aria-label="Preferenze cookie">
+    <div pgs="cookieConsent-panel flexColumn" role="group" aria-label="Cookie preferences">
         <div pgs="flexRow nowrap cookieConsent-featureEssential">
             <div>
                 <p>
-                    <strong>Cookie tecnici</strong>
+                    <strong>Essential cookies</strong>
                     <br>
-                    <small>Sempre attivi per garantire il corretto funzionamento del sito.</small>
+                    <small>Always active to ensure the website works correctly.</small>
                 </p>
             </div>
 
-            <span pgs="cookieConsent-panel-badge">Attivi</span>
+            <span pgs="cookieConsent-panel-badge">Active</span>
         </div>
 
         <div pgs="flexRow cookieConsent-featureAnalytics">
@@ -68,21 +68,21 @@ Pannello HTML di consenso con preferenze tecniche e analytics, azioni e attribut
                 <p>
                     <strong>Analytics</strong>
                     <br>
-                    <small>Dati di navigazione raccolti in forma aggregata per statistiche anonime.</small>
+                    <small>Browsing data collected in aggregate form for anonymous statistics.</small>
                 </p>
 
-                <input type="checkbox" pgs="cookieConsent-toggleAnalytics" aria-label="Abilita Google Analytics">
+                <input type="checkbox" pgs="cookieConsent-toggleAnalytics" aria-label="Enable Google Analytics">
             </label>
         </div>
     </div>
 
     <div pgs="flexRow">
         <button type="button" pgs="button cookieConsent-actionReject">
-            <i class="fa-solid fa-duotone fa-sliders"></i>Solo selezionati
+            <i class="fa-solid fa-duotone fa-sliders"></i>Selected only
         </button>
 
         <button type="button" pgs="buttonStrong cookieConsent-actionAccept">
-            <i class="fa-solid fa-check"></i> Accetta tutto
+            <i class="fa-solid fa-check"></i> Accept all
         </button>
     </div>
 </section>

package/docs/utilizzo-css-scss.md

@@ -1,6 +1,6 @@
-# Utilizzo CSS/SCSS
+# CSS/SCSS usage
 
-La libreria espone molte custom properties da preferire agli hardcode, per esempio:
+The library exposes many custom properties that should be preferred to hardcoded values, for example:
 
 ```scss
 :root {
@@ -13,7 +13,7 @@ La libreria espone molte custom properties da preferire agli hardcode, per esemp
 }
 ```
 
-Override consigliato:
+Recommended override:
 
 ```scss
 #danger-action {
@@ -22,15 +22,15 @@ Override consigliato:
 }
 ```
 
-Evita di riscrivere da zero padding, gap, border-radius o colori se esiste gia' una variabile o un token PGS adatto.
+Avoid rewriting padding, gaps, border radii, or colors from scratch when a suitable variable or PGS token already exists.
 
-## Il sistema `pgs`
+## The `pgs` system
 
-Il markup usa token separati da spazio dentro l'attributo `pgs`:
+Markup uses space-separated tokens inside the `pgs` attribute:
 
 ```html
-<button pgs="button buttonStrong" type="button">Salva</button>
+<button pgs="button buttonStrong" type="button">Save</button>
 <section pgs="section flexColumnElements"></section>
 ```
 
-Gli stessi token collegano HTML, SCSS e JavaScript.
+The same tokens connect HTML, SCSS, and JavaScript.

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "mypgs",
-    "version": "2.0.0",
+    "version": "2.1.0",
     "description": "MyPGS frontend theme and UI behaviors, with bundled JavaScript and CSS assets.",
     "main": "./dist/javascript/index.js",
     "module": "./assets/javascript/index.js",