mypgs 2.0.0 → 2.1.0

package/templates/html/components/formAddon.html

@@ -0,0 +1,72 @@
+<!--
+/**
+ * @title Form Add-ons
+ * @description Additional form controls for selectable cards, two-state buttons, switches, and compact chip groups.
+ *
+ * @pgs
+ * - checkboxBackground: presents a checkbox as a selectable container with a highlighted checked state.
+ * - twoState: presents checkbox or radio labels as buttons whose appearance changes when selected.
+ * - toggle: presents a checkbox as a switch with a rail and movable thumb.
+ * - chips: groups twoState controls into a compact segmented selector.
+ *
+ * @related
+ * - flexColumnElements: vertically arranges the form add-on examples.
+ * - flexColumnTexts: groups each example with its heading and control.
+ *
+ * @return HTML examples of the checkboxBackground, twoState, toggle, and chips form controls using native checkbox and radio inputs.
+ */
+-->
+
+<div pgs="flexColumnElements">
+    <section pgs="flexColumnTexts">
+        <strong>Checkbox with background</strong>
+
+        <label pgs="checkboxBackground">
+            <input type="checkbox" name="notifications" value="enabled">
+            <span>
+                <strong>Enable notifications</strong><br>
+                Receive important account updates.
+            </span>
+        </label>
+    </section>
+
+    <section pgs="flexColumnTexts">
+        <strong>Two-state controls</strong>
+
+        <label pgs="twoState">
+            <input type="checkbox" name="favorite" value="yes">
+            <i class="fa-solid fa-star" aria-hidden="true"></i>
+            Add to favorites
+        </label>
+    </section>
+
+    <section pgs="flexColumnTexts">
+        <strong>Toggle</strong>
+
+        <label pgs="toggle">
+            <span>Enable dark mode</span>
+            <input type="checkbox" name="darkMode" value="enabled">
+        </label>
+    </section>
+
+    <section pgs="flexColumnTexts">
+        <strong>Chips</strong>
+
+        <div pgs="chips" role="group" aria-label="Select a plan">
+            <label pgs="twoState">
+                <input type="radio" name="plan" value="basic" checked>
+                Basic
+            </label>
+
+            <label pgs="twoState">
+                <input type="radio" name="plan" value="pro">
+                Pro
+            </label>
+
+            <label pgs="twoState">
+                <input type="radio" name="plan" value="enterprise">
+                Enterprise
+            </label>
+        </div>
+    </section>
+</div>

package/templates/html/components/logo.html

@@ -1,21 +1,21 @@
 <!--
 /**
  * @title Logo
- * @description Componente per mostrare un logo grafico o testuale, con supporto alle varianti dell'immagine legate al tema scuro.
+ * @description Component for displaying a graphical or text logo, with image variants that support dark mode.
  *
  * @pgs
- * - logo: identifica il collegamento contenitore del marchio.
- * - logo-image: identifica l'immagine grafica del logo.
- * - logo-text: identifica la variante testuale del marchio.
+ * - logo: identifies the brand link container.
+ * - logo-image: identifies the graphical logo image.
+ * - logo-text: identifies the text-based brand variant.
  *
  * @pgs-option
- * - logoDarkmode: inverte l'immagine del logo quando lo stato globale darkmode è attivo.
- * - logoDarkmodeFixed: mantiene applicata l'inversione dell'immagine indipendentemente dal tema corrente.
+ * - logoDarkmode: inverts the logo image when the global darkmode state is active.
+ * - logoDarkmodeFixed: keeps the image inversion enabled regardless of the current theme.
  *
  * @pgs-state
- * - darkmode: stato globale applicato al documento che attiva la variante logoDarkmode.
+ * - darkmode: global document state that activates the logoDarkmode variant.
  *
- * @return Esempi HTML del logo grafico sensibile al tema e del logo testuale.
+ * @return HTML examples of the theme-aware graphical logo and the text logo.
  */
 -->
 
@@ -23,6 +23,6 @@
     <img pgs="logo-image" src="https://placehold.co/240x80?text=MyPGS" alt="MyPGS">
 </a>
 
-<a aria-label="Logo testuale" pgs="logo" href="/">
+<a aria-label="Text logo" pgs="logo" href="/">
     <span pgs="logo-text">MyPGS</span>
 </a>

package/templates/html/components/menu.html

@@ -1,33 +1,33 @@
 <!--
 /**
  * @title Menu
- * @description Navigazione orizzontale o verticale che trasforma le voci con sottomenu in dropdown accessibili e inizializzati automaticamente.
+ * @description Menu markup, configuration, behavior, and usage example.
  *
  * @pgs
- * - menu: identifica il contenitore di navigazione elaborato dal modulo menu.
- * - menu-buttonIcon: identifica il controllo creato dinamicamente accanto alle voci con sottomenu.
+ * - menu: identifies the menu element used by Menu.
+ * - menu-buttonIcon: identifies the menu-buttonIcon element used by Menu.
  *
  * @pgs-option
- * - horizontal: dispone il menu e i suoi elementi in orizzontale.
- * - vertical: dispone il menu e i suoi elementi in verticale.
- * - menuHeader: adatta spaziature e comportamento del menu quando è inserito nell'header.
- * - position: viene impostata come position[bottom right] sui dropdown creati per i sottomenu.
+ * - horizontal: identifies the horizontal element used by Menu.
+ * - vertical: identifies the vertical element used by Menu.
+ * - menuHeader: identifies the menuHeader element used by Menu.
+ * - position: identifies the position element used by Menu.
  *
  * @pgs-state
- * - open: indica il sottomenu trasformato in dropdown attualmente aperto.
+ * - open: identifies the open element used by Menu.
  *
  * @api
- * - pgs.menu.init(root): inizializza i menu non ancora registrati dentro Document o Element indicato e prepara i sottomenu.
- * - pgs.menu.api(element): restituisce l'istanza associata a un root menu inizializzato.
- * - instance.refresh(): riesegue l'inizializzazione nel contenitore del menu e restituisce l'istanza.
+ * - pgs.menu.init(root): initializes matching elements within the specified root.
+ * - pgs.menu.api(element): returns the instance associated with the specified initialized element.
+ * - instance.refresh(): refreshes the component and returns its updated instance.
  *
  * @related
- * - dropdown: viene aggiunto dinamicamente alle voci che contengono una lista annidata.
- * - dropdown-button: identifica il controllo dinamico del sottomenu.
- * - buttonNohover: neutralizza lo stile hover del controllo dinamico.
- * - dropdown-content: identifica la lista annidata mostrata come pannello dropdown.
+ * - dropdown: uses the related dropdown component or utility in this example.
+ * - dropdown-button: uses the related dropdown-button component or utility in this example.
+ * - buttonNohover: uses the related buttonNohover component or utility in this example.
+ * - dropdown-content: uses the related dropdown-content component or utility in this example.
  *
- * @return Due strutture nav complete per le varianti orizzontale e verticale del menu.
+ * @return Complete HTML markup and usage example for Menu.
  */
 -->
 

package/templates/html/components/modal.html

@@ -1,60 +1,60 @@
 <!--
 /**
  * @title Modal
- * @description Componente che collega un pulsante a un dialog nativo, ne gestisce apertura e chiusura e può spostarlo in un contenitore configurato.
+ * @description Modal markup, configuration, behavior, and usage example.
  *
  * @pgs
- * - modal: identifica il contenitore logico inizializzato dal modulo modal.
- * - modal-button: identifica il controllo di apertura della finestra.
+ * - modal: identifies the modal element used by Modal.
+ * - modal-button: identifies the modal-button element used by Modal.
  * - dialog: token aggiunto dinamicamente all'elemento dialog inizializzato.
- * - modal-dialog: identifica il dialog nativo dopo l'inizializzazione JavaScript.
- * - modal-dialog-content: identifica il contenitore visivo della finestra.
- * - modal-dialog-content-header: identifica l'intestazione che può ricevere il pulsante di chiusura automatico.
- * - modal-dialog-content-scroll: identifica l'area interna scorrevole.
- * - modal-close: identifica un controllo che chiude la finestra.
+ * - modal-dialog: identifies the modal-dialog element used by Modal.
+ * - modal-dialog-content: identifies the modal-dialog-content element used by Modal.
+ * - modal-dialog-content-header: identifies the modal-dialog-content-header element used by Modal.
+ * - modal-dialog-content-scroll: identifies the modal-dialog-content-scroll element used by Modal.
+ * - modal-close: identifies the modal-close element used by Modal.
  *
  * @pgs-option
- * - containerID: sul root usa containerID[id] per spostare il dialog nell'elemento con l'id indicato.
- * - containerPGS: sul root usa containerPGS[token] per spostare il dialog nel primo elemento con quel token pgs.
- * - disableBackdropClose: sul root impedisce la chiusura tramite click sul backdrop.
- * - history: sul root sincronizza l'apertura con il parametro modal nella cronologia del browser e richiede un id sul pulsante.
- * - topLevel: sul dialog mantiene la finestra nel componente e usa showModal per una modale top-level.
- * - left: sul dialog posiziona e anima il contenuto dal lato sinistro.
- * - right: sul dialog posiziona e anima il contenuto dal lato destro.
+ * - containerID: identifies the containerID element used by Modal.
+ * - containerPGS: identifies the containerPGS element used by Modal.
+ * - disableBackdropClose: identifies the disableBackdropClose element used by Modal.
+ * - history: identifies the history element used by Modal.
+ * - topLevel: identifies the topLevel element used by Modal.
+ * - left: identifies the left element used by Modal.
+ * - right: identifies the right element used by Modal.
  *
  * @api
- * - pgs.modal.init(root): inizializza le modali presenti nel Document o Element indicato; il valore predefinito è document.
- * - pgs.modal.api(element): restituisce l'istanza associata a un root modal inizializzato.
- * - instance.open(): apre la finestra se non è già aperta.
- * - instance.close(): chiude la finestra se è aperta.
- * - instance.toggle(): apre la finestra oppure la chiude quando è già aperta.
- * - instance.refresh(): rilegge opzioni e collegamenti della modale, sostituisce listener e observer precedenti e restituisce la nuova API.
- * - instance.isOpen(): restituisce true quando l'elemento dialog possiede lo stato nativo open.
+ * - pgs.modal.init(root): initializes matching elements within the specified root.
+ * - pgs.modal.api(element): returns the instance associated with the specified initialized element.
+ * - instance.open(): opens the component.
+ * - instance.close(): closes the component.
+ * - instance.toggle(): toggles the component state.
+ * - instance.refresh(): refreshes the component and returns its updated instance.
+ * - instance.isOpen(): returns true when the component is open.
  *
  * @related
- * - button: presenta i controlli di apertura, chiusura e annullamento come pulsanti standard.
- * - buttonStrong: presenta l'azione di conferma con maggiore enfasi.
- * - buttonClose: viene aggiunto automaticamente al controllo di chiusura quando manca nel markup.
- * - flexColumnElements: organizza verticalmente il contenuto della modale di conferma.
- * - flexRow: dispone affiancate le azioni della modale di conferma.
+ * - button: uses the related button component or utility in this example.
+ * - buttonStrong: uses the related buttonStrong component or utility in this example.
+ * - buttonClose: uses the related buttonClose component or utility in this example.
+ * - flexColumnElements: uses the related flexColumnElements component or utility in this example.
+ * - flexRow: uses the related flexRow component or utility in this example.
  *
- * @return Quattro esempi basati su dialog nativo e un contenitore opzionale usato da containerID.
+ * @return Complete HTML markup and usage example for Modal.
  */
 -->
 
 <div pgs="modal" pgs-option="containerID[modal-container]">
     <button pgs="modal-button button" type="button">
-        <i class="fa-solid fa-window-maximize"></i> Apri modale
+        <i class="fa-solid fa-window-maximize"></i> Open modal
     </button>
 
     <dialog>
         <div pgs="modal-dialog-content">
             <div pgs="modal-dialog-content-header">
-                <h3>Modale di esempio</h3>
+                <h3>Example modal</h3>
             </div>
 
             <div pgs="modal-dialog-content-scroll">
-                <p>Contenuto della modale. Il bottone di chiusura viene aggiunto automaticamente se non presente.</p>
+                <p>Modal content. The close button is added automatically when missing.</p>
             </div>
         </div>
     </dialog>
@@ -62,17 +62,17 @@
 
 <div pgs="modal" pgs-option="containerID[modal-container]">
     <button pgs="modal-button button" type="button">
-        <i class="fa-solid fa-window-maximize"></i> Apri modale right
+        <i class="fa-solid fa-window-maximize"></i> Open modal right
     </button>
 
     <dialog pgs-option="right">
         <div pgs="modal-dialog-content">
             <div pgs="modal-dialog-content-header">
-                <h3>Modale laterale</h3>
+                <h3>Side modal</h3>
             </div>
 
             <div pgs="modal-dialog-content-scroll">
-                <p>Contenuto della modale con <code>pgs-option="right"</code>.</p>
+                <p>Modal content with <code>pgs-option="right"</code>.</p>
             </div>
         </div>
     </dialog>
@@ -80,17 +80,17 @@
 
 <div pgs="modal" pgs-option="containerID[modal-container]">
     <button pgs="modal-button button" type="button">
-        <i class="fa-solid fa-window-maximize"></i> Apri modale left
+        <i class="fa-solid fa-window-maximize"></i> Open modal left
     </button>
 
     <dialog pgs-option="left">
         <div pgs="modal-dialog-content">
             <div pgs="modal-dialog-content-header">
-                <h3>Modale laterale sinistra</h3>
+                <h3>Left-side modal</h3>
             </div>
 
             <div pgs="modal-dialog-content-scroll">
-                <p>Contenuto della modale con <code>pgs-option="left"</code>.</p>
+                <p>Modal content with <code>pgs-option="left"</code>.</p>
             </div>
         </div>
     </dialog>
@@ -98,21 +98,21 @@
 
 <div pgs="modal">
     <button pgs="modal-button button" type="button">
-        <i class="fa-solid fa-floppy-disk"></i> Conferma salvataggio
+        <i class="fa-solid fa-floppy-disk"></i> Confirmation salvataggio
     </button>
 
     <dialog pgs-option="topLevel">
         <div pgs="modal-dialog-content">
             <div pgs="modal-dialog-content-header">
-                <h3>Salvare le modifiche?</h3>
+                <h3>Save changes?</h3>
             </div>
 
             <div pgs="modal-dialog-content-scroll flexColumnElements">
-                <p>Hai modifiche non salvate. Conferma per applicarle oppure annulla per tornare alla pagina.</p>
+                <p>You have unsaved changes. Confirm to apply them or cancel to return to the page.</p>
 
                 <div pgs="flexRow">
-                    <button pgs="button modal-close" type="button">Annulla</button>
-                    <button pgs="buttonStrong" type="button">Salva modifiche</button>
+                    <button pgs="button modal-close" type="button">Cancel</button>
+                    <button pgs="buttonStrong" type="button">Save changes</button>
                 </div>
             </div>
         </div>

package/templates/html/components/notification.html

@@ -1,43 +1,43 @@
 <!--
 /**
  * @title Notification
- * @description Sistema di notifiche persistenti o toast temporanei, generati dall'API oppure da una configurazione JSON dichiarativa contenuta nell'opzione notification.
+ * @description Notification markup, configuration, behavior, and usage example.
  *
  * @pgs
- * - notification: identifica il contenitore delle notifiche, sia persistenti sia temporanee.
- * - notificationTrigger: identifica una configurazione dichiarativa elaborata e rimossa all'inizializzazione.
- * - notification-element: identifica ogni messaggio creato dinamicamente.
- * - notification-element-title: identifica il titolo generato del messaggio.
- * - notification-element-content: identifica il contenuto generato del messaggio.
+ * - notification: identifies the notification element used by Notification.
+ * - notificationTrigger: identifies the notificationTrigger element used by Notification.
+ * - notification-element: identifies the notification-element element used by Notification.
+ * - notification-element-title: identifies the notification-element-title element used by Notification.
+ * - notification-element-content: identifies the notification-element-content element used by Notification.
  *
  * @pgs-option
- * - toast: sul contenitore notification abilita il posizionamento centrale e la sostituzione del messaggio temporaneo corrente.
- * - notification: contiene un oggetto JSON con title, message, element, type, icon, duration e link usando la sintassi notification[{...}].
+ * - toast: identifies the toast element used by Notification.
+ * - notification: identifies the notification element used by Notification.
  *
  * @pgs-state
- * - success: applica la variante positiva al messaggio generato.
- * - error: applica la variante di errore e il ruolo alert.
- * - warning: applica la variante di avviso.
- * - info: applica la variante informativa predefinita.
+ * - success: identifies the success element used by Notification.
+ * - error: identifies the error element used by Notification.
+ * - warning: identifies the warning element used by Notification.
+ * - info: identifies the info element used by Notification.
  *
  * @api
- * - pgs.notification.trigger(root): elabora e rimuove i notificationTrigger dichiarativi presenti nel contesto indicato.
- * - pgs.notification.alert.error(text, link, timeout, icon): crea una notifica persistente di errore, opzionalmente cliccabile e temporizzata.
- * - pgs.notification.alert.success(text, link, timeout, icon): crea una notifica persistente di successo.
- * - pgs.notification.alert.info(text, link, timeout, icon): crea una notifica persistente informativa.
- * - pgs.notification.alert.warning(text, link, timeout, icon): crea una notifica persistente di avviso.
- * - pgs.notification.alert.deleteAll(): rimuove tutte le notifiche persistenti.
- * - pgs.notification.toast.error(text, timeout, icon): crea un toast di errore sostituendo quello eventualmente presente.
- * - pgs.notification.toast.success(text, timeout, icon): crea un toast di successo.
- * - pgs.notification.toast.info(text, timeout, icon): crea un toast informativo.
- * - pgs.notification.toast.warning(text, timeout, icon): crea un toast di avviso.
- * - pgs.notification.toast.deleteAll(): rimuove il toast corrente.
+ * - pgs.notification.trigger(root): provides the documented operation through the component public API.
+ * - pgs.notification.alert.error(text, link, timeout, icon): provides the documented operation through the component public API.
+ * - pgs.notification.alert.success(text, link, timeout, icon): provides the documented operation through the component public API.
+ * - pgs.notification.alert.info(text, link, timeout, icon): provides the documented operation through the component public API.
+ * - pgs.notification.alert.warning(text, link, timeout, icon): provides the documented operation through the component public API.
+ * - pgs.notification.alert.deleteAll(): provides the documented operation through the component public API.
+ * - pgs.notification.toast.error(text, timeout, icon): provides the documented operation through the component public API.
+ * - pgs.notification.toast.success(text, timeout, icon): provides the documented operation through the component public API.
+ * - pgs.notification.toast.info(text, timeout, icon): provides the documented operation through the component public API.
+ * - pgs.notification.toast.warning(text, timeout, icon): provides the documented operation through the component public API.
+ * - pgs.notification.toast.deleteAll(): provides the documented operation through the component public API.
  *
  * @related
- * - hidden: nasconde i trigger dichiarativi prima che vengano elaborati.
- * - buttonClose: identifica il pulsante di rimozione aggiunto a ogni messaggio.
+ * - hidden: uses the related hidden component or utility in this example.
+ * - buttonClose: uses the related buttonClose component or utility in this example.
  *
- * @return Due contenitori notification, uno persistente e uno configurato con l'opzione toast, con trigger dichiarativi configurati tramite pgs-option.
+ * @return Complete HTML markup and usage example for Notification.
  */
 -->
 
@@ -45,8 +45,8 @@
 <div pgs="notification" pgs-option="toast" aria-live="polite"></div>
 
 <div pgs="hidden notificationTrigger" pgs-option='notification[{
-            "title": "Titolo",
-            "message": "Messaggio",
+            "title": "Title",
+            "message": "Message",
             "element": "notification",
             "type": "info",
             "icon": null,
@@ -56,7 +56,7 @@
 
 <div pgs="hidden notificationTrigger" pgs-option='notification[{
             "title": "Benvenuto",
-            "message": "Messaggio",
+            "message": "Message",
             "element": "toast",
             "type": "info",
             "icon": null,
@@ -66,6 +66,6 @@
 <!-- 
     <div
         pgs="hidden notificationTrigger"
-        pgs-option='notification[{"title":"Titolo","message":"Messaggio","element":"notification","type":"info","icon":"<i class=\"fa-solid fa-rocket\"></i>","duration":"4000","link":"/pagina/"}]'>
+        pgs-option='notification[{"title":"Title","message":"Message","element":"notification","type":"info","icon":"<i class=\"fa-solid fa-rocket\"></i>","duration":"4000","link":"/page/"}]'>
     </div>
 -->

package/templates/html/components/search.html

@@ -1,64 +1,64 @@
 <!--
 /**
  * @title Search
- * @description Ricerca componibile con suggerimenti asincroni o locali, navigazione da tastiera, selezione, annullamento richieste e attributi ARIA gestiti dal modulo search.
+ * @description Search markup, configuration, behavior, and usage example.
  *
  * @pgs
- * - search: identifica il form inizializzato come ricerca con suggerimenti.
- * - search-suggestions: identifica la lista opzionale che riceve i risultati.
- * - search-suggestions-item: identifica ogni risultato creato dinamicamente nella lista.
- * - search-modal: identifica la variante di ricerca inserita in una modale per dispositivi mobili.
- * - search-mobile: identifica il contenitore interno della ricerca mobile.
+ * - search: identifies the search element used by Search.
+ * - search-suggestions: identifies the search-suggestions element used by Search.
+ * - search-suggestions-item: identifies the search-suggestions-item element used by Search.
+ * - search-modal: identifies the search-modal element used by Search.
+ * - search-mobile: identifies the search-mobile element used by Search.
  *
  * @pgs-option
- * - containerPGS: sul wrapper modal usa containerPGS[header] per spostare il dialog nell'header.
+ * - containerPGS: identifies the containerPGS element used by Search.
  *
  * @pgs-state
- * - open: sul root search indica che la lista dei suggerimenti è aperta.
- * - loading: sul root search indica una sorgente dati in caricamento.
- * - error: sul root search indica che il recupero dei suggerimenti è fallito.
- * - selected: sul risultato generato indica l'elemento attivo durante la navigazione.
+ * - open: identifies the open element used by Search.
+ * - loading: identifies the loading element used by Search.
+ * - error: identifies the error element used by Search.
+ * - selected: identifies the selected element used by Search.
  *
  * @api
- * - pgs.search.init(root): inizializza le ricerche non ancora registrate dentro Document o Element indicato.
- * - pgs.search.api(element): restituisce l'istanza associata a un form search inizializzato.
- * - instance.configure(options): aggiorna minLength, debounce, limit, submitOnSelect, searchOnFocus, source e onSelect e restituisce l'istanza.
- * - instance.setSource(source): configura una sorgente array o funzione asincrona per i suggerimenti.
- * - instance.search(query): esegue subito la ricerca e restituisce una Promise con i suggerimenti normalizzati.
- * - instance.open(): apre la lista quando sono disponibili risultati.
- * - instance.close(): chiude la lista e azzera la selezione attiva.
- * - instance.clear(): rimuove risultati e selezione e chiude la lista.
+ * - pgs.search.init(root): initializes matching elements within the specified root.
+ * - pgs.search.api(element): returns the instance associated with the specified initialized element.
+ * - instance.configure(options): provides the documented operation through the component public API.
+ * - instance.setSource(source): provides the documented operation through the component public API.
+ * - instance.search(query): provides the documented operation through the component public API.
+ * - instance.open(): opens the component.
+ * - instance.close(): closes the component.
+ * - instance.clear(): provides the documented operation through the component public API.
  * - instance.cancel(): annulla debounce e richiesta attiva.
- * - instance.select(index, submit): seleziona un risultato, emette pgs:search:select e può inviare il form.
- * - instance.refresh(): ripete la ricerca usando il valore corrente dell'input.
- * - instance.destroy(): rimuove listener, annulla le operazioni e scollega l'istanza.
- * - instance.items(): restituisce una copia dei suggerimenti correnti.
- * - instance.isOpen(): restituisce true quando la lista dei suggerimenti è aperta.
- * - instance.isLoading(): restituisce true durante il caricamento della sorgente.
- * - instance.setActiveIndex(index): imposta il suggerimento attivo e aggiorna selezione e attributi ARIA.
+ * - instance.select(index, submit): provides the documented operation through the component public API.
+ * - instance.refresh(): refreshes the component and returns its updated instance.
+ * - instance.destroy(): removes listeners and releases the component instance.
+ * - instance.items(): provides the documented operation through the component public API.
+ * - instance.isOpen(): returns true when the component is open.
+ * - instance.isLoading(): returns true while the component is loading.
+ * - instance.setActiveIndex(index): provides the documented operation through the component public API.
  *
  * @related
- * - buttonNohover: applica al form l'aspetto compatto condiviso con i controlli button.
- * - modal: fornisce il contenitore e il comportamento della variante mobile.
- * - modal-button: apre la ricerca mobile.
- * - modal-close: chiude la ricerca mobile.
- * - buttonIcon: presenta apertura e chiusura come pulsanti a icona.
- * - flexRow: organizza il contenuto della variante mobile e gli elementi dei suggerimenti generati.
- * - section: applica la spaziatura di sezione alla ricerca mobile.
+ * - buttonNohover: uses the related buttonNohover component or utility in this example.
+ * - modal: uses the related modal component or utility in this example.
+ * - modal-button: uses the related modal-button component or utility in this example.
+ * - modal-close: uses the related modal-close component or utility in this example.
+ * - buttonIcon: uses the related buttonIcon component or utility in this example.
+ * - flexRow: uses the related flexRow component or utility in this example.
+ * - section: uses the related section component or utility in this example.
  *
- * @return Form di ricerca autonomo, variante mobile integrata in una modal e script di esempio con sorgente locale.
+ * @return Complete HTML markup and usage example for Search.
  */
 -->
 
 <form pgs="buttonNohover search" autocomplete="off" action="" method="get">
-    <button type="submit" title="Cerca"><i class="fa-solid fa-search"></i></button>
-    <input type="search" name="s" placeholder="Cerca" value="">
+    <button type="submit" title="Search"><i class="fa-solid fa-search"></i></button>
+    <input type="search" name="s" placeholder="Search" value="">
     <ul pgs="search-suggestions"></ul>
 </form>
 
 <div pgs="modal search-modal" pgs-option="containerPGS[header]">
 
-    <button type="button" pgs="modal-button buttonIcon" title="Cerca">
+    <button type="button" pgs="modal-button buttonIcon" title="Search">
         <i class="fa-solid fa-search"></i>
     </button>
 
@@ -66,17 +66,18 @@
         <div pgs="flexRow section search-mobile">
 
             <form pgs="buttonNohover search" autocomplete="off" action="/" method="get">
-                <button type="submit" title="Cerca">
+                <button type="submit" title="Search">
                     <i class="fa-solid fa-search"></i>
                 </button>
 
-                <input type="search" name="s" placeholder="Cerca" value="">
+                <input type="search" name="s" placeholder="Search" value="">
                 <ul pgs="search-suggestions"></ul>
+
+                <button type="button" pgs="modal-close buttonIcon">
+                    <i class="fa-solid fa-close"></i>
+                </button>
             </form>
 
-            <button type="button" pgs="modal-close buttonIcon">
-                <i class="fa-solid fa-close"></i>
-            </button>
 
         </div>
     </dialog>