mypgs 2.0.0 → 3.0.0

package/docs/components/button.md

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

package/docs/components/card.md

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

package/docs/components/dropdown.md

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

package/docs/components/form.md

@@ -1,79 +1,103 @@
-<!-- File generato automaticamente da templates/html/components/form.html. Modificare templates/html/components/form.html e rieseguire npm run docs:generate. -->
+<!-- Automatically generated from reference/html/components/form.html. Edit reference/html/components/form.html and run npm run docs:generate again. -->
 
 # Form
 
-Struttura di modulo con etichette, campi testuali, textarea e controllo toggle compatibile con i vincoli HTML e con regole personalizzate di PGS_formValidate.
+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 Options
 
-- `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.
+- `buttonStrong`: presents form submission as the primary action.
 
-## API JavaScript
+## JavaScript 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.
 
-## Elementi correlati
+## Related elements
 
-- `buttonStrong`: presenta l'invio del modulo come azione primaria.
+- `button`: provides the base styling for the primary submit action.
+- `flexColumn`: spaces text elements in the radio group.
 
 ## Output
 
-Modulo HTML completo con campi required e script di esempio per una regola personalizzata, la validazione e il messaggio di successo.
+Complete HTML form with required fields and an example script for a custom rule, validation, and a success message.
 
-## Esempio
+## Example
 
 ```html
 <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>
-
-    <label pgs="toggle">
-        <span>Accetto la privacy policy</span>
+    <textarea id="form-message" pgs="textarea" name="message" rows="5" placeholder="Write your message" required></textarea>
+
+    <br>
+    <fieldset pgs="radio flexColumn">
+        <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">
+    <button pgs="button" pgs-option="buttonStrong" type="submit">
         <i class="fa-solid fa-paper-plane" aria-hidden="true"></i>
-        Invia
+        Submit
     </button>
 </form>
 
@@ -88,16 +112,16 @@ Modulo HTML completo con campi required e script di esempio per una regola perso
 
     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];
         }
     });
@@ -106,7 +130,7 @@ Modulo HTML completo con campi required e script di esempio per una regola perso
     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>

package/docs/components/formAddon.md

@@ -0,0 +1,116 @@
+<!-- Automatically generated from reference/html/components/formAddon.html. Edit reference/html/components/formAddon.html and run npm run docs:generate again. -->
+
+# Form Add-ons
+
+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.
+- `chip`: presents an individual checkbox or radio option as a compact selectable button.
+- `chips`: groups twoState controls into a compact segmented selector.
+
+## Related elements
+
+- `form`: applies the base form styles to the complete add-on example.
+- `flexColumn`: vertically arranges each example with its heading and control.
+- `flexRow`: horizontally arranges standalone chip controls.
+- `gapElements`: applies element spacing between the form add-on examples.
+
+## Output
+
+HTML examples of the checkboxBackground, twoState, toggle, and chips form controls using native checkbox and radio inputs.
+
+## Example
+
+```html
+<form pgs="form flexColumn gapElements">
+    <section pgs="flexColumn">
+        <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="flexColumn">
+        <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="flexColumn">
+        <strong>Toggle</strong>
+
+        <label pgs="toggle">
+            <span>Enable Wi-Fi</span>
+            <input type="checkbox" name="darkMode" value="enabled">
+        </label>
+    </section>
+
+    <section pgs="flexColumn">
+        <strong>Chips checkbox</strong>
+        <div pgs="flexRow" role="group" aria-label="Chip actions">
+            <label pgs="chip">
+                <input type="checkbox" name="like" value="basic">
+                <i class="fa-solid fa-heart"></i>
+                Like
+            </label>
+            <label pgs="chip">
+                <input type="checkbox" name="share" value="basic">
+                <i class="fa-solid fa-share"></i>
+                Share
+            </label>
+        </div>
+    </section>
+
+    <section pgs="flexColumn gapElements">
+        <fieldset pgs="chips">
+            <legend>Chip checkbox</legend>
+            <label>
+                <input type="checkbox" name="plan" value="basic" checked>
+                Basic
+            </label>
+
+            <label>
+                <input type="checkbox" name="plan" value="pro">
+                Pro
+            </label>
+
+            <label>
+                <input type="checkbox" name="plan" value="enterprise">
+                Enterprise
+            </label>
+        </fieldset>
+
+        <fieldset pgs="chips">
+            <legend>Chips radio</legend>
+            <label>
+                <input type="radio" name="characters" value="basic" checked>
+                <i class="fa-solid fa-crow"></i>
+                Crow
+            </label>
+
+            <label>
+                <i class="fa-solid fa-dove"></i> <input type="radio" name="characters" value="pro">
+                Dove
+            </label>
+
+            <label>
+                <i class="fa-solid fa-dragon"></i> <input type="radio" name="characters" value="enterprise">
+                dragon
+            </label>
+        </fieldset>
+    </section>
+</form>
+```

package/docs/components/logo.md

@@ -1,36 +1,36 @@
-<!-- File generato automaticamente da templates/html/components/logo.html. Modificare templates/html/components/logo.html e rieseguire npm run docs:generate. -->
+<!-- Automatically generated from reference/html/components/logo.html. Edit reference/html/components/logo.html and run npm run docs:generate again. -->
 
 # Logo
 
-Componente per mostrare un logo grafico o testuale, con supporto alle varianti dell'immagine legate al tema scuro.
+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 Options
 
-- `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 States
 
-- `darkmode`: stato globale applicato al documento che attiva la variante logoDarkmode.
+- `darkmode`: global document state that activates the logoDarkmode variant.
 
 ## Output
 
-Esempi HTML del logo grafico sensibile al tema e del logo testuale.
+HTML examples of the theme-aware graphical logo and the text logo.
 
-## Esempio
+## Example
 
 ```html
 <a aria-label="Logo" pgs="logo" pgs-option="logoDarkmode" href="/">
     <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>
 ```