mypgs 2.0.0 → 2.1.0

package/scripts/generate-component-docs.js

@@ -18,7 +18,7 @@ const SOURCE_ROOTS = [
 const TAG_ORDER = ["title", "description", "pgs", "pgs-option", "pgs-state", "api", "related", "return"];
 const LIST_TAGS = new Set(["pgs", "pgs-option", "pgs-state", "api", "related"]);
 const REQUIRED_TAGS = ["title", "description", "pgs"];
-const GENERATED_MARKER = /^<!-- File generato automaticamente da (templates\/html\/.+\.html)\. Modificare \1 e rieseguire npm run docs:generate\. -->$/;
+const GENERATED_MARKER = /^<!-- (?:Automatically generated from (templates\/html\/.+\.html)\. Edit \1 and run npm run docs:generate again\.|File generato automaticamente da (templates\/html\/.+\.html)\. Modificare \2 e rieseguire npm run docs:generate\.) -->$/;
 
 function toPosix(value) {
     return value.split(path.sep).join("/");
@@ -441,14 +441,14 @@ function renderList(items) {
 
 function renderMarkdown(template, documentation, markup) {
     const relativeTemplate = relativeToProject(template);
-    const marker = `<!-- File generato automaticamente da ${relativeTemplate}. Modificare ${relativeTemplate} e rieseguire npm run docs:generate. -->`;
+    const marker = `<!-- Automatically generated from ${relativeTemplate}. Edit ${relativeTemplate} and run npm run docs:generate again. -->`;
     const sections = [marker, "", `# ${documentation.title}`, "", documentation.description];
     const sectionMap = [
         ["PGS", documentation.pgs],
         ["PGS Options", documentation["pgs-option"]],
         ["PGS States", documentation["pgs-state"]],
-        ["API JavaScript", documentation.api],
-        ["Elementi correlati", documentation.related],
+        ["JavaScript API", documentation.api],
+        ["Related elements", documentation.related],
     ];
 
     sectionMap.forEach(([title, items]) => {
@@ -460,7 +460,7 @@ function renderMarkdown(template, documentation, markup) {
 
     const runs = [...markup.matchAll(/`+/g)].map(match => match[0].length);
     const fence = "`".repeat(Math.max(3, (runs.length ? Math.max(...runs) : 0) + 1));
-    sections.push("", "## Esempio", "", `${fence}html`, markup, fence, "");
+    sections.push("", "## Example", "", `${fence}html`, markup, fence, "");
     return sections.join("\n");
 }
 

package/templates/html/components/accordion.html

@@ -1,29 +1,29 @@
 <!--
 /**
 * @title Accordion
-* @description Componente interattivo che espande un pannello alla volta, sincronizzando visibilità, attributi ARIA e navigazione da tastiera.
+* @description 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-state
-* - open: indica l'elemento accordion attualmente aperto e visibile.
+* - open: indicates the accordion element that is currently open and visible.
 *
 * @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.
 *
 * @related
-* - flexColumnTexts: applica la spaziatura testuale tra gli elementi della lista.
+* - flexColumnTexts: applies text spacing between the list items.
 *
-* @return Lista HTML di elementi accordion accessibili con pulsante e pannello associato.
+* @return HTML list of accessible accordion items with an associated button and panel.
 */
 -->
 
@@ -31,22 +31,22 @@
     <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>
+</ul>

package/templates/html/components/badges.html

@@ -1,23 +1,23 @@
 <!--
 /**
  * @title Badge
- * @description Raccolta di indicatori compatti per mostrare categorie, priorità e stati visivi con varianti cromatiche coerenti.
+ * @description 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.
  *
  * @related
- * - flexRow: dispone i badge orizzontalmente consentendo il ritorno a capo.
+ * - flexRow: arranges badges horizontally and allows them to wrap.
  *
- * @return Esempi HTML delle varianti badge disponibili.
+ * @return HTML examples of the available badge variants.
  */
 -->
 
@@ -35,17 +35,17 @@
     </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">
@@ -54,7 +54,7 @@
     </span>
 
     <span pgs="badgeNeutral" href="#">
-        Neutrale
+        Neutral
     </span>
 
-</div>
+</div>

package/templates/html/components/breadcumbs.html

@@ -1,14 +1,14 @@
 <!--
 /**
  * @title Breadcrumb
- * @description Navigazione gerarchica che mostra il percorso della pagina corrente con collegamenti, separatori e indicazione semantica dell'elemento attivo.
+ * @description 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.
  *
- * @return Struttura HTML semantica di una breadcrumb racchiusa in un elemento nav.
+ * @return Semantic breadcrumb HTML structure wrapped in a nav element.
  */
 -->
 
@@ -30,7 +30,7 @@
 
         <li pgs="breadcrumb-item">
             <span aria-current="page">
-                Articolo di prova
+                Sample article
             </span>
         </li>
     </ul>

package/templates/html/components/button.html

@@ -1,22 +1,22 @@
 <!--
 /**
  * @title Button
- * @description Varianti di pulsante e collegamento d'azione con dimensioni, enfasi e composizione icona-testo definite dal design system.
+ * @description 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-option
- * - 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.
  *
  * @related
- * - flexRow: dispone gli esempi di pulsante su una riga flessibile.
+ * - flexRow: arranges the button examples in a flexible row.
  *
- * @return Raccolta HTML delle principali varianti di button.
+ * @return HTML collection of the main button variants.
  */
 -->
 
@@ -27,7 +27,7 @@
     </a>
 
     <button pgs="button" type="button" pgs-option="buttonReverse">
-        Avanti
+        Next
         <i class="fa-solid fa-arrow-right" aria-hidden="true"></i>
     </button>
 
@@ -36,16 +36,16 @@
         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>
+</div>

package/templates/html/components/card.html

@@ -1,43 +1,43 @@
 <!--
 /**
  * @title Card
- * @description Contenitore riutilizzabile per raggruppare immagine, titolo, testo e azioni in anteprime o raccolte responsive.
+ * @description 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.
  *
  * @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.
+ * - 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.
  *
- * @return Due strutture HTML di card, una con azione separata e una interamente cliccabile.
+ * @return Two card HTML structures, one with a separate action and one that is fully clickable.
  */
 -->
 
 <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>
-</div>
+</div>

package/templates/html/components/dropdown.html

@@ -1,34 +1,34 @@
 <!--
 /**
  * @title Dropdown
- * @description Componente a comparsa che associa un controllo a un contenuto posizionato rispetto al trigger e gestisce apertura, chiusura, click esterno ed Escape.
+ * @description 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-option
- * - 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-state
- * - open: indica che il dropdown è aperto e che il contenuto è visibile.
+ * - open: indicates that the dropdown is open and its content is visible.
  *
  * @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.
  *
  * @related
- * - 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.
  *
- * @return Serie di dropdown HTML che dimostra le direzioni di posizionamento supportate.
+ * @return Series of HTML dropdowns demonstrating the supported placement directions.
  */
 -->
 
@@ -41,7 +41,7 @@
         </button>
 
         <div pgs="dropdown-content">
-            Contenuto bottom center
+            bottom center content
         </div>
     </span>
 
@@ -52,7 +52,7 @@
         </button>
 
         <div pgs="dropdown-content">
-            Contenuto top left
+            top left content
         </div>
     </span>
 
@@ -63,7 +63,7 @@
         </button>
 
         <div pgs="dropdown-content">
-            Contenuto top center
+            top center content
         </div>
     </span>
 
@@ -74,7 +74,7 @@
         </button>
 
         <div pgs="dropdown-content">
-            Contenuto top right
+            top right content
         </div>
     </span>
 
@@ -85,7 +85,7 @@
         </button>
 
         <div pgs="dropdown-content">
-            Contenuto bottom left
+            bottom left content
         </div>
     </span>
 
@@ -96,7 +96,7 @@
         </button>
 
         <div pgs="dropdown-content">
-            Contenuto bottom right
+            bottom right content
         </div>
     </span>
 
@@ -107,7 +107,7 @@
         </button>
 
         <div pgs="dropdown-content">
-            Contenuto left center
+            left center content
         </div>
     </span>
 
@@ -118,7 +118,7 @@
         </button>
 
         <div pgs="dropdown-content">
-            Contenuto right center
+            right center content
         </div>
     </span>
 

package/templates/html/components/form.html

@@ -1,71 +1,94 @@
 <!--
 /**
  * @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.
+ * @description Form structure with labels, text fields, a textarea, a checkbox, and a radio group compatible with HTML constraints and custom PGS_formValidate rules.
  *
  * @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.
+ * - form: identifies the form container and applies the field layout.
+ * - formValidate: enables styles associated with validation states managed by the JavaScript utility.
+ * - label: identifies labels associated with controls.
+ * - input: applies shared styling to text inputs.
+ * - textarea: applies shared styling to the text area.
+ * - radio: styles a group of native radio inputs while preserving their shared name and selection behavior.
  *
  * @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.
+ * - message: defines a field-specific message with the syntax message[Message text].
+ * - error: is applied at runtime to the form and fields that fail validation.
+ * - success: is applied at runtime to the form after successful validation.
  *
  * @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.
+ * - new pgs.formValidate(form, options): creates a utility associated directly with the form, automatically adds novalidate, and accepts fieldError, fieldsError, and success in options.message; messages remain editable through instance.message.
+ * - instance.validator(callback, eventName): intercepts the specified event, prevents its default behavior, validates the form, shows the success message, and invokes callback only when valid; eventName defaults to submit.
+ * - instance.validate(): validates required fields, updates state attributes, and returns true or false.
+ * - instance.success(text): validates the form and shows a success toast when there are no errors.
+ * - instance.addNewRule(rule): adds a function that returns one or more invalid fields; validate automatically applies addFieldError to each field.
+ * - instance.addFieldError(field, index, total): marks a field as invalid; shows the specific message for one error or a summary message for multiple errors.
+ * - instance.removeFieldError(field): removes the error state from the specified field.
  *
  * @related
- * - buttonStrong: presenta l'invio del modulo come azione primaria.
+ * - buttonStrong: presents form submission as the primary action.
+ * - flexColumnTexts: spaces text elements in the radio group.
  *
- * @return Modulo HTML completo con campi required e script di esempio per una regola personalizzata, la validazione e il messaggio di successo.
+ * @return Complete HTML form with required fields and an example script for a custom rule, validation, and a success message.
  */
 -->
 
 <form pgs="form formValidate" action="#" method="post">
     <label pgs="label" for="form-name">
-        Nome
+        Name
     </label>
-    <input id="form-name" pgs="input" pgs-option="message[Inserisci il nome]" type="text" name="name" placeholder="Mario Rossi" required>
+    <input id="form-name" pgs="input" pgs-option="message[Enter your name]" type="text" name="name" placeholder="John Smith" 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>
+    <input id="form-email" pgs="input" pgs-option="message[Enter a valid email address]" type="email" name="email" placeholder="name@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>
+    <input id="form-password" pgs="input" pgs-option="message[Enter a password]" type="password" name="password" autocomplete="new-password" required>
 
     <label pgs="label" for="form-confirm-password">
-        Conferma password
+        Confirm password
     </label>
-    <input id="form-confirm-password" pgs="input" pgs-option="message[Conferma la password]" type="password" name="confirmPassword" autocomplete="new-password" required>
+    <input id="form-confirm-password" pgs="input" pgs-option="message[Confirm your password]" type="password" name="confirmPassword" autocomplete="new-password" required>
 
     <label pgs="label" for="form-message">
-        Messaggio
+        Message
     </label>
-    <textarea id="form-message" pgs="textarea" name="message" rows="5" placeholder="Scrivi il messaggio" required></textarea>
+    <textarea id="form-message" pgs="textarea" name="message" rows="5" placeholder="Write your message" required></textarea>
 
-    <label pgs="toggle">
-        <span>Accetto la privacy policy</span>
+    <br>
+    <fieldset pgs="radio flexColumnTexts">
+        <legend>Preferred contact method</legend>
+
+        <label>
+            <input type="radio" name="contactMethod" value="email" pgs-option="message[Choose a contact method]" required>
+            <span>Email</span>
+        </label>
+
+        <label>
+            <input type="radio" name="contactMethod" value="phone">
+            <span>Phone</span>
+        </label>
+
+        <label>
+            <input type="radio" name="contactMethod" value="message">
+            <span>Direct message</span>
+        </label>
+    </fieldset>
+    <br>
+
+    <label>
         <input type="checkbox" name="privacy" required>
+        <span>I accept the privacy policy</span>
     </label>
+    <br>
 
     <button pgs="buttonStrong" type="submit">
         <i class="fa-solid fa-paper-plane" aria-hidden="true"></i>
-        Invia
+        Submit
     </button>
 </form>
 
@@ -80,16 +103,16 @@
 
     const formValidate = new pgs.formValidate(form, {
         message: {
-            fieldError: "Completa questo campo",
-            fieldsError: "Completa tutti i campi obbligatori",
-            success: "Inviato con successo"
+            fieldError: "Please complete this field",
+            fieldsError: "Please complete all required fields",
+            success: "Submitted successfully"
         }
     });
 
     //== new roules
     formValidate.addNewRule(() => {
         if (password.value && confirmPassword.value && password.value !== confirmPassword.value) {
-            pgs(confirmPassword).option.setValueBrackets("message", "Le password non coincidono");
+            pgs(confirmPassword).option.setValueBrackets("message", "Passwords do not match");
             return [confirmPassword, password];
         }
     });
@@ -98,7 +121,7 @@
     formValidate.validator(event => {
         const values = Object.fromEntries(new FormData(form));
 
-        // Sostituisci questo log con l'invio dei dati al tuo backend.
+        // Replace this log with a request to your backend.
         console.log(values);
     }, "submit");
 </script>