mypgs 2.0.0 → 3.0.0

package/docs/components/menu.md

@@ -1,43 +1,43 @@
-<!-- File generato automaticamente da templates/html/components/menu.html. Modificare templates/html/components/menu.html e rieseguire npm run docs:generate. -->
+<!-- Automatically generated from reference/html/components/menu.html. Edit reference/html/components/menu.html and run npm run docs:generate again. -->
 
 # Menu
 
-Navigazione orizzontale o verticale che trasforma le voci con sottomenu in dropdown accessibili e inizializzati automaticamente.
+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 Options
 
-- `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.
+- `buttonNohover`: disables hover behavior on menu buttons generated at runtime.
 
 ## PGS States
 
-- `open`: indica il sottomenu trasformato in dropdown attualmente aperto.
+- `open`: identifies the open element used by Menu.
 
-## API JavaScript
+## JavaScript 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.
 
-## Elementi correlati
+## Related elements
 
-- `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.
+- `dropdown-content`: uses the related dropdown-content component or utility in this example.
 
 ## Output
 
-Due strutture nav complete per le varianti orizzontale e verticale del menu.
+Complete HTML markup and usage example for Menu.
 
-## Esempio
+## Example
 
 ```html
 <nav pgs="menu" pgs-option="horizontal" aria-label="Menu orizzontale">

package/docs/components/modal.md

@@ -1,68 +1,69 @@
-<!-- File generato automaticamente da templates/html/components/modal.html. Modificare templates/html/components/modal.html e rieseguire npm run docs:generate. -->
+<!-- Automatically generated from reference/html/components/modal.html. Edit reference/html/components/modal.html and run npm run docs:generate again. -->
 
 # Modal
 
-Componente che collega un pulsante a un dialog nativo, ne gestisce apertura e chiusura e può spostarlo in un contenitore configurato.
+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 Options
 
-- `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.
-
-## API JavaScript
-
-- `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.
-
-## Elementi correlati
-
-- `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.
+- `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.
+- `buttonStrong`: applies stronger emphasis to the save action.
+- `buttonClose`: styles the close action generated at runtime.
+
+## JavaScript API
+
+- `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 elements
+
+- `button`: uses the related button component or utility in this example.
+- `flexColumn`: vertically organizes modal content.
+- `gapElements`: applies element spacing to modal content.
+- `flexRow`: uses the related flexRow component or utility in this example.
 
 ## Output
 
-Quattro esempi basati su dialog nativo e un contenitore opzionale usato da containerID.
+Complete HTML markup and usage example for Modal.
 
-## Esempio
+## Example
 
 ```html
 <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>
@@ -70,17 +71,17 @@ Quattro esempi basati su dialog nativo e un contenitore opzionale usato da conta
 
 <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>
@@ -88,17 +89,17 @@ Quattro esempi basati su dialog nativo e un contenitore opzionale usato da conta
 
 <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>
@@ -106,21 +107,21 @@ Quattro esempi basati su dialog nativo e un contenitore opzionale usato da conta
 
 <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>
+            <div pgs="modal-dialog-content-scroll flexColumn gapElements">
+                <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="button" pgs-option="buttonStrong" type="button">Save changes</button>
                 </div>
             </div>
         </div>

package/docs/components/notification.md

@@ -1,61 +1,61 @@
-<!-- File generato automaticamente da templates/html/components/notification.html. Modificare templates/html/components/notification.html e rieseguire npm run docs:generate. -->
+<!-- Automatically generated from reference/html/components/notification.html. Edit reference/html/components/notification.html and run npm run docs:generate again. -->
 
 # Notification
 
-Sistema di notifiche persistenti o toast temporanei, generati dall'API oppure da una configurazione JSON dichiarativa contenuta nell'opzione notification.
+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 Options
 
-- `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.
+- `buttonClose`: styles the dismiss action generated at runtime.
 
 ## PGS States
 
-- `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 JavaScript
+## JavaScript 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.
 
-## Elementi correlati
+## Related elements
 
-- `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.
 
 ## Output
 
-Due contenitori notification, uno persistente e uno configurato con l'opzione toast, con trigger dichiarativi configurati tramite pgs-option.
+Complete HTML markup and usage example for Notification.
 
-## Esempio
+## Example
 
 ```html
 <div pgs="notification" aria-live="polite"></div>
 <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,
@@ -65,7 +65,7 @@ Due contenitori notification, uno persistente e uno configurato con l'opzione to
 
 <div pgs="hidden notificationTrigger" pgs-option='notification[{
             "title": "Benvenuto",
-            "message": "Messaggio",
+            "message": "Message",
             "element": "toast",
             "type": "info",
             "icon": null,
@@ -75,7 +75,7 @@ Due contenitori notification, uno persistente e uno configurato con l'opzione to
 <!-- 
     <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/docs/components/search.md

@@ -1,91 +1,93 @@
-<!-- File generato automaticamente da templates/html/components/search.html. Modificare templates/html/components/search.html e rieseguire npm run docs:generate. -->
+<!-- Automatically generated from reference/html/components/search.html. Edit reference/html/components/search.html and run npm run docs:generate again. -->
 
 # Search
 
-Ricerca componibile con suggerimenti asincroni o locali, navigazione da tastiera, selezione, annullamento richieste e attributi ARIA gestiti dal modulo search.
+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 Options
 
-- `containerPGS`: sul wrapper modal usa containerPGS[header] per spostare il dialog nell'header.
+- `containerPGS`: identifies the containerPGS element used by Search.
+- `buttonNohover`: disables hover behavior on the search container.
+- `buttonIcon`: presents search and close actions as icon buttons.
 
 ## PGS States
 
-- `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.
-
-## API JavaScript
-
-- `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.
+- `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.
+
+## JavaScript API
+
+- `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.
-
-## Elementi correlati
-
-- `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.
+- `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 elements
+
+- `button`: provides the base styling for search controls.
+- `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.
+- `flexRow`: uses the related flexRow component or utility in this example.
+- `section`: uses the related section component or utility in this example.
 
 ## Output
 
-Form di ricerca autonomo, variante mobile integrata in una modal e script di esempio con sorgente locale.
+Complete HTML markup and usage example for Search.
 
-## Esempio
+## Example
 
 ```html
-<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="">
+<form pgs="button search" pgs-option="buttonNohover" autocomplete="off" action="" method="get">
+    <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 button" pgs-option="buttonIcon" title="Search">
         <i class="fa-solid fa-search"></i>
     </button>
 
     <dialog>
         <div pgs="flexRow section search-mobile">
 
-            <form pgs="buttonNohover search" autocomplete="off" action="/" method="get">
-                <button type="submit" title="Cerca">
+            <form pgs="button search" pgs-option="buttonNohover" autocomplete="off" action="/" method="get">
+                <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 button" pgs-option="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>