@massimo-cassandro/minimo 1.41.4 → 1.41.5

package/src/components/slide-up-down-toggle/slide-up-down-toggle.js

@@ -6,27 +6,27 @@ import * as styles from './slide-up-down-toggle.module.css';
 /**
  * @module slide-up-down-toggle
  *
- * Collapse/expand animation driven by CSS — JS only toggles a data attribute
- * and manages a lightweight wrapper element. No pixel measurement anywhere.
+ * Animazione di chiusura/apertura gestita via CSS — il JS si limita a commutare un attributo data
+ * e a gestire un leggero elemento wrapper. Nessuna misurazione in pixel.
  *
- * ─── How it works ─────────────────────────────────────────────────────────────
+ * ─── Come funziona ────────────────────────────────────────────────────────────
  *
- * The CSS module uses `interpolate-size: allow-keywords` (height: auto
- * transitions), `allow-discrete` (display: none transition), and
- * `@starting-style` (entry animation from display: none). See the CSS file
- * for a full explanation of each feature.
+ * Il CSS module usa `interpolate-size: allow-keywords` (transizioni verso height: auto),
+ * `allow-discrete` (transizione di display: none) e
+ * `@starting-style` (animazione di ingresso da display: none). Vedi il file CSS
+ * per una spiegazione completa di ciascuna funzionalità.
  *
  * ─── wrap: true (default) ─────────────────────────────────────────────────────
  *
- * JS wraps the target in a generated <div class="slide"> and animates that
- * wrapper. The target element is completely untouched and can have any
- * display value, padding, margin, or flex/grid layout.
+ * Il JS racchiude il target in un <div class="slide"> generato e anima quel
+ * wrapper. L'elemento target resta del tutto intatto e può avere qualsiasi
+ * valore di display, padding, margin o layout flex/grid.
  *
- *   // target is free to be flex, have padding, etc.
+ *   // il target può essere flex, avere padding, ecc.
  *   slideToggle(document.querySelector('#panel'));
  *
- * Initial collapsed state — add data-slide="closed" to the TARGET in HTML
- * before any JS call. The first call transfers it to the generated wrapper:
+ * Stato iniziale chiuso — aggiungere data-slide="closed" al TARGET nell'HTML
+ * prima di qualsiasi chiamata JS. La prima chiamata lo trasferisce al wrapper generato:
  *
  *   <div id="panel" data-slide="closed">
  *     <div class="d-flex p-3">…content…</div>
@@ -34,39 +34,39 @@ import * as styles from './slide-up-down-toggle.module.css';
  *
  * ─── wrap: false ──────────────────────────────────────────────────────────────
  *
- * JS adds the .slide class directly to the target. The target must be a plain
- * block container with no padding, flex or grid of its own. All layout must
- * live on an inner child element.
+ * Il JS aggiunge la classe .slide direttamente al target. Il target deve essere un semplice
+ * contenitore block, senza padding, flex o grid propri. Tutto il layout deve
+ * stare su un elemento figlio interno.
  *
- *   <!-- target: plain wrapper, no padding -->
+ *   <!-- target: semplice wrapper, senza padding -->
  *   <div id="panel" data-slide="closed">
- *     <!-- inner: all layout here -->
+ *     <!-- interno: tutto il layout va qui -->
  *     <div class="d-flex p-3">…content…</div>
  *   </div>
  *
  *   slideToggle(document.querySelector('#panel'), { wrap: false });
  *
- * ─── Options ──────────────────────────────────────────────────────────────────
+ * ─── Opzioni ──────────────────────────────────────────────────────────────────
  *
  * @typedef {{ wrap?: boolean, duration?: number, callback?: (() => void) | null }} SlideOptions
  *
- *   wrap     {boolean}          default true  — auto-generate wrapper (see above)
- *   duration {number}           ms            — overrides --slide-duration CSS var;
- *                                               if omitted the CSS value is used
- *   callback {() => void|null}  default null  — invoked after the transition ends
+ *   wrap     {boolean}          default true  — genera automaticamente il wrapper (vedi sopra)
+ *   duration {number}           ms            — sovrascrive la variabile CSS --slide-duration;
+ *                                               se omesso viene usato il valore CSS
+ *   callback {() => void|null}  default null  — invocata al termine della transizione
  *
- * Kept here for reference: the three exported functions below re-declare these same properties
- * as dotted `@param` entries with base type `object` instead of `SlideOptions`, since TypeScript
- * only expands dotted `@param` properties (needed for editor IntelliSense to list each property)
- * when the base type is the literal `object`; a named typedef there would error (TS8032).
+ * Mantenuto qui come riferimento: le tre funzioni esportate qui sotto ridichiarano queste stesse proprietà
+ * come voci `@param` con notazione puntata e tipo base `object` invece di `SlideOptions`, dato che TypeScript
+ * espande le proprietà `@param` con notazione puntata (necessarie perché IntelliSense dell'editor elenchi
+ * ogni proprietà) solo quando il tipo base è il letterale `object`; un typedef con nome darebbe errore (TS8032).
  *
- * ─── Return value ─────────────────────────────────────────────────────────────
+ * ─── Valore restituito ────────────────────────────────────────────────────────
  *
- * All three functions return a Promise<void> that resolves when the transition ends.
+ * Tutte e tre le funzioni restituiscono una Promise<void> che si risolve al termine della transizione.
  */
 
 /**
- * Default option values — single source of truth used in every slide function.
+ * Valori di default delle opzioni — unica fonte di verità usata in ogni funzione slide.
  * @type {Required<SlideOptions>}
  */
 const DEFAULT_OPTIONS = {
@@ -76,27 +76,27 @@ const DEFAULT_OPTIONS = {
 };
 
 /**
- * Maps each target element to its slide element (generated wrapper or the
- * target itself). Checked on every call so the setup runs only once per target.
+ * Associa ogni elemento target al proprio elemento slide (wrapper generato o il
+ * target stesso). Controllato a ogni chiamata così che il setup venga eseguito una sola volta per target.
  * @type {WeakMap<HTMLElement, HTMLElement>}
  */
 const registry = new WeakMap();
 
 /**
- * Returns the slide element for `target`, creating it on the first call.
+ * Restituisce l'elemento slide per `target`, creandolo alla prima chiamata.
  *
- * wrap: true  — inserts a <div class="slide"> before the target, moves the
- *               target inside it, and transfers any existing data-slide value.
- *               Resolves after a requestAnimationFrame so the browser paints
- *               the wrapper's initial state before any transition-triggering
- *               attribute change. (offsetHeight forces layout but not a paint —
- *               only rAF guarantees a rendered frame as the transition origin.)
- * wrap: false — adds the .slide class directly to the target. Resolves immediately
- *               since the element was already in the DOM.
+ * wrap: true  — inserisce un <div class="slide"> prima del target, sposta il
+ *               target al suo interno e trasferisce l'eventuale valore data-slide esistente.
+ *               Si risolve dopo un requestAnimationFrame così che il browser disegni
+ *               lo stato iniziale del wrapper prima di qualsiasi cambio di
+ *               attributo che attivi la transizione. (offsetHeight forza il layout ma non il paint —
+ *               solo rAF garantisce un frame renderizzato come origine della transizione.)
+ * wrap: false — aggiunge la classe .slide direttamente al target. Si risolve subito
+ *               dato che l'elemento era già nel DOM.
  *
  * @param {HTMLElement} target
  * @param {boolean} wrap
- * @returns {Promise<HTMLElement>} the element that carries .slide and data-slide
+ * @returns {Promise<HTMLElement>} l'elemento che porta .slide e data-slide
  */
 async function getSlideEl(target, wrap) {
   if (registry.has(target)) return /** @type {HTMLElement} */ (registry.get(target));
@@ -105,30 +105,34 @@ async function getSlideEl(target, wrap) {
   if (wrap) {
     el = document.createElement('div');
     el.classList.add(styles.slide);
-    // transfer only 'closed' state to the wrapper; 'open' is the default for
-    // visible elements and must NOT be set — it would trigger @starting-style
-    // on insertion, causing an unwanted height:0 entry animation
+    /*
+      trasferisce al wrapper solo lo stato 'closed'; 'open' è il default per gli
+      elementi visibili e NON va impostato — attiverebbe @starting-style
+      all'inserimento, causando un'animazione di ingresso indesiderata da height:0
+    */
     if ('slide' in target.dataset) {
       if (target.dataset.slide === 'closed') el.dataset.slide = 'closed';
       delete target.dataset.slide;
     }
     target.replaceWith(el);
     el.appendChild(target);
-    // two nested rAFs are required: the outer one fires before the first paint
-    // (wrapper inserted but not yet rendered), the inner one fires after that
-    // paint — only then does the browser have a committed "previous style" to
-    // use as the transition origin. A single rAF or offsetHeight is not enough
-    // because both still execute before the first paint completes.
+    /*
+      servono due rAF annidati: quello esterno scatta prima del primo paint
+      (wrapper inserito ma non ancora renderizzato), quello interno scatta dopo quel
+      paint — solo allora il browser ha uno "stile precedente" consolidato da
+      usare come origine della transizione. Un solo rAF o offsetHeight non basta
+      perché entrambi vengono comunque eseguiti prima del completamento del primo paint.
+    */
     await new Promise(r => requestAnimationFrame(() => requestAnimationFrame(r)));
   } else {
-    // read computed display BEFORE adding .slide, which would alter it
+    // legge il display calcolato PRIMA di aggiungere .slide, che lo altererebbe
     const startsHidden = window.getComputedStyle(target).display === 'none';
     target.classList.add(styles.slide);
     el = target;
 
     if (startsHidden && !('slide' in target.dataset)) {
-      // remove inline display: none so .slide and its [data-slide] rules own visibility;
-      // CSS-based display: none from other rules may still conflict — wrap: true avoids this
+      // rimuove il display: none inline così che .slide e le sue regole [data-slide] gestiscano la visibilità;
+      // un display: none basato su CSS da altre regole potrebbe comunque confliggere — wrap: true lo evita
       if (target.style.display === 'none') {
         target.style.removeProperty('display');
       }
@@ -141,10 +145,10 @@ async function getSlideEl(target, wrap) {
 }
 
 /**
- * Waits for the `height` transition on `el` to complete.
- * Called AFTER the state attribute has been set so the transition is already
- * running; transitionend fires at the end of the animation duration.
- * Optionally sets --slide-duration to override the CSS default.
+ * Attende il completamento della transizione di `height` su `el`.
+ * Chiamata DOPO l'impostazione dell'attributo di stato, così che la transizione sia già
+ * in corso; transitionend scatta alla fine della durata dell'animazione.
+ * Facoltativamente imposta --slide-duration per sovrascrivere il default CSS.
  *
  * @param {HTMLElement} el
  * @param {number | undefined} duration
@@ -167,14 +171,14 @@ async function awaitHeight(el, duration) {
 }
 
 /**
- * Tears down the slide setup for `target`.
+ * Smonta il setup slide per `target`.
  *
- * wrap was true  — removes the generated wrapper and restores the target
- *                  to its original position in the DOM.
- * wrap was false — removes the .slide class and the data-slide attribute
- *                  from the target.
+ * wrap era true  — rimuove il wrapper generato e riporta il target
+ *                  nella sua posizione originale nel DOM.
+ * wrap era false — rimuove la classe .slide e l'attributo data-slide
+ *                  dal target.
  *
- * In both cases --slide-duration is removed from the slide element.
+ * In entrambi i casi --slide-duration viene rimosso dall'elemento slide.
  *
  * @param {HTMLElement} target
  */
@@ -185,7 +189,7 @@ export function disposeSliding(target) {
   el.style.removeProperty('--slide-duration');
 
   if (el !== target) {
-    el.replaceWith(target); // remove wrapper, put target back
+    el.replaceWith(target); // rimuove il wrapper, rimette il target al suo posto
   } else {
     target.classList.remove(styles.slide);
     delete target.dataset.slide;
@@ -195,14 +199,14 @@ export function disposeSliding(target) {
 }
 
 /**
- * Collapses `target`.
- * CSS animates height to 0, then snaps display to none.
+ * Chiude `target`.
+ * Il CSS anima height fino a 0, poi imposta di scatto display su none.
  *
  * @param {HTMLElement} target
  * @param {object} [options] (default: {})
- * @param {boolean} [options.wrap=true] - auto-generates a wrapper `<div class="slide">` around `target` (see module docs above); when `false`, the `.slide` class is added directly to `target`. (default: true)
- * @param {number} [options.duration] - overrides the `--slide-duration` CSS var (ms); if omitted, the CSS value is used.
- * @param {(() => void) | null} [options.callback] - invoked after the transition ends. (default: null)
+ * @param {boolean} [options.wrap=true] - genera automaticamente un wrapper `<div class="slide">` attorno a `target` (vedi la documentazione del modulo sopra); se `false`, la classe `.slide` viene aggiunta direttamente a `target` (default: true)
+ * @param {number} [options.duration] - sovrascrive la variabile CSS `--slide-duration` (ms); se omesso viene usato il valore CSS.
+ * @param {(() => void) | null} [options.callback] - invocata al termine della transizione (default: null)
  * @returns {Promise<void>}
  */
 export async function slideUp(target, options = {}) {
@@ -214,14 +218,14 @@ export async function slideUp(target, options = {}) {
 }
 
 /**
- * Expands `target`.
- * display snaps to block, then CSS animates height from 0 (via @starting-style) to auto.
+ * Apre `target`.
+ * display passa di scatto a block, poi il CSS anima height da 0 (tramite @starting-style) ad auto.
  *
  * @param {HTMLElement} target
  * @param {object} [options] (default: {})
- * @param {boolean} [options.wrap=true] - auto-generates a wrapper `<div class="slide">` around `target` (see module docs above); when `false`, the `.slide` class is added directly to `target`. (default: true)
- * @param {number} [options.duration] - overrides the `--slide-duration` CSS var (ms); if omitted, the CSS value is used.
- * @param {(() => void) | null} [options.callback] - invoked after the transition ends. (default: null)
+ * @param {boolean} [options.wrap=true] - genera automaticamente un wrapper `<div class="slide">` attorno a `target` (vedi la documentazione del modulo sopra); se `false`, la classe `.slide` viene aggiunta direttamente a `target` (default: true)
+ * @param {number} [options.duration] - sovrascrive la variabile CSS `--slide-duration` (ms); se omesso viene usato il valore CSS.
+ * @param {(() => void) | null} [options.callback] - invocata al termine della transizione (default: null)
  * @returns {Promise<void>}
  */
 export async function slideDown(target, options = {}) {
@@ -233,14 +237,14 @@ export async function slideDown(target, options = {}) {
 }
 
 /**
- * Toggles the collapsed/expanded state of `target`.
- * Reads the current data-slide value on the slide element to decide direction.
+ * Commuta lo stato chiuso/aperto di `target`.
+ * Legge il valore data-slide corrente sull'elemento slide per decidere la direzione.
  *
  * @param {HTMLElement} target
  * @param {object} [options] (default: {})
- * @param {boolean} [options.wrap=true] - auto-generates a wrapper `<div class="slide">` around `target` (see module docs above); when `false`, the `.slide` class is added directly to `target`. (default: true)
- * @param {number} [options.duration] - overrides the `--slide-duration` CSS var (ms); if omitted, the CSS value is used.
- * @param {(() => void) | null} [options.callback] - invoked after the transition ends. (default: null)
+ * @param {boolean} [options.wrap=true] - genera automaticamente un wrapper `<div class="slide">` attorno a `target` (vedi la documentazione del modulo sopra); se `false`, la classe `.slide` viene aggiunta direttamente a `target` (default: true)
+ * @param {number} [options.duration] - sovrascrive la variabile CSS `--slide-duration` (ms); se omesso viene usato il valore CSS.
+ * @param {(() => void) | null} [options.callback] - invocata al termine della transizione (default: null)
  * @returns {Promise<void>}
  */
 export async function slideToggle(target, options = {}) {

package/src/components/slide-up-down-toggle/slide-up-down-toggle.module.css

@@ -1,56 +1,56 @@
 /*! minimo - Slide Up/Down Toggle */
 /*
-* CSS Module for slide-up-down-toggle.js
+* CSS Module per slide-up-down-toggle.js
 *
-* Three modern CSS features work together to animate height without JS measurement:
+* Tre funzionalità CSS moderne lavorano insieme per animare l'altezza senza misurazioni JS:
 *
 *   interpolate-size: allow-keywords
-*     Enables transitioning to/from `height: auto` — the browser resolves the
-*     intrinsic size, so JS never reads offsetHeight or scrollHeight.
+*     Consente le transizioni verso/da `height: auto` — il browser risolve la
+*     dimensione intrinseca, quindi il JS non legge mai offsetHeight o scrollHeight.
 *
-*   transition-behavior: allow-discrete  (via `allow-discrete` in shorthand)
-*     Allows `display` to participate in a transition. On collapse: height
-*     animates to 0, then `display: none` snaps at the very end. On expand:
-*     `display: block` snaps at the very start, then height animates to auto.
+*   transition-behavior: allow-discrete  (tramite `allow-discrete` nella shorthand)
+*     Permette a `display` di partecipare a una transizione. In chiusura: height
+*     si anima fino a 0, poi `display: none` scatta proprio alla fine. In apertura:
+*     `display: block` scatta proprio all'inizio, poi height si anima fino ad auto.
 *
 *   @starting-style
-*     Defines the initial state for elements entering from `display: none`.
-*     Without it, the browser has no "before" value to transition from and
-*     the expand animation would not play.
+*     Definisce lo stato iniziale per gli elementi che entrano da `display: none`.
+*     Senza di esso il browser non ha un valore "precedente" da cui far partire la transizione e
+*     l'animazione di apertura non verrebbe eseguita.
 *
-* ─── Usage ────────────────────────────────────────────────────────────────────
+* ─── Utilizzo ─────────────────────────────────────────────────────────────────
 *
 *   wrap: true (default)
-*     JS generates a wrapper <div class="slide"> around the target.
-*     The target element is completely free — any display, padding, margin.
-*     No changes to HTML required; initial open state is the default.
-*     For an element that should start collapsed, add data-slide="closed" to
-*     the target BEFORE calling any slide function — JS transfers it to the wrapper.
+*     Il JS genera un wrapper <div class="slide"> attorno al target.
+*     L'elemento target è completamente libero — qualsiasi display, padding, margin.
+*     Non servono modifiche all'HTML; lo stato iniziale aperto è il default.
+*     Per un elemento che deve partire chiuso, aggiungere data-slide="closed" al
+*     target PRIMA di chiamare qualsiasi funzione slide — il JS lo trasferisce al wrapper.
 *
 *   wrap: false
-*     JS adds .slide directly to the target element.
-*     The target must be a plain block wrapper (no padding, no flex/grid).
-*     All layout, padding and margin must live on an inner child element.
-*     Initial collapsed state: add data-slide="closed" directly to the target in HTML.
+*     Il JS aggiunge .slide direttamente all'elemento target.
+*     Il target deve essere un semplice wrapper block (senza padding, senza flex/grid).
+*     Tutto il layout, il padding e il margin devono stare su un elemento figlio interno.
+*     Stato iniziale chiuso: aggiungere data-slide="closed" direttamente al target nell'HTML.
 *
-* ─── FOUC prevention ──────────────────────────────────────────────────────────
+* ─── Prevenzione del FOUC ─────────────────────────────────────────────────────
 *
-*   Elements with data-slide="closed" are hidden via a :global rule below,
-*   so they start invisible even before JS adds the .slide class.
+*   Gli elementi con data-slide="closed" vengono nascosti da una regola :global qui sotto,
+*   quindi partono invisibili anche prima che il JS aggiunga la classe .slide.
 *
-* ─── Duration override ────────────────────────────────────────────────────────
+* ─── Override della durata ────────────────────────────────────────────────────
 *
-*   Set --slide-duration on the element or pass `duration` in JS options:
+*   Impostare --slide-duration sull'elemento oppure passare `duration` nelle opzioni JS:
 *     style="--slide-duration: 300ms"
 */
 
-/* applied to the animation wrapper (generated or the target itself) */
+/* applicato al wrapper dell'animazione (generato o il target stesso) */
 .slide {
   interpolate-size: allow-keywords;
   /*
-  * !important overrides any external display: none (inline or CSS rule without !important).
-  * .slide[data-slide='closed'] below has higher specificity (0,2,0 vs 0,1,0) so its
-  * display: none !important still wins when the element is collapsed.
+  * !important sovrascrive qualsiasi display: none esterno (inline o regola CSS senza !important).
+  * .slide[data-slide='closed'] qui sotto ha una specificità maggiore (0,2,0 contro 0,1,0), quindi il suo
+  * display: none !important vince comunque quando l'elemento è chiuso.
   */
   /* stylelint-disable-next-line declaration-no-important */
   display: block !important;
@@ -64,7 +64,7 @@
   }
 }
 
-/* collapsed state: height animates to 0, then display snaps to none */
+/* stato chiuso: height si anima fino a 0, poi display passa di scatto a none */
 .slide[data-slide='closed'] {
   /* stylelint-disable-next-line declaration-no-important */
   display: none !important;
@@ -72,18 +72,18 @@
 }
 
 /*
-* Entry state for the expand transition.
-* When .slide transitions from display:none → display:block, the browser needs
-* a starting value for height. @starting-style provides height:0 so the
-* animation plays from zero to auto instead of snapping instantly.
+* Stato di ingresso per la transizione di apertura.
+* Quando .slide passa da display:none → display:block, il browser ha bisogno
+* di un valore iniziale per height. @starting-style fornisce height:0 così che
+* l'animazione parta da zero fino ad auto invece di scattare istantaneamente.
 */
 /*
-* @starting-style targets only [data-slide='open'] — not :not([data-slide='closed']).
-* The broader selector would also match newly inserted wrappers (which have no
-* data-slide attribute), causing an unwanted entry animation from height:0 that
-* conflicts with the first collapse call and makes the transition invisible.
-* Using [data-slide='open'] restricts this to the expand animation triggered by
-* slideDown(), which always sets data-slide="open" on a previously hidden element.
+* @starting-style ha come bersaglio solo [data-slide='open'] — non :not([data-slide='closed']).
+* Il selettore più ampio corrisponderebbe anche ai wrapper appena inseriti (che non hanno
+* l'attributo data-slide), causando un'animazione di ingresso indesiderata da height:0 che
+* confligge con la prima chiamata di chiusura e rende invisibile la transizione.
+* Usare [data-slide='open'] la limita all'animazione di apertura attivata da
+* slideDown(), che imposta sempre data-slide="open" su un elemento in precedenza nascosto.
 */
 @starting-style {
   .slide[data-slide='open'] {
@@ -92,9 +92,9 @@
 }
 
 /*
-* FOUC prevention — global, no class required.
-* Hides elements with data-slide="closed" before JS has run and added .slide.
-* Uses :global so CSS Modules does not hash this selector.
+* Prevenzione del FOUC — globale, non richiede alcuna classe.
+* Nasconde gli elementi con data-slide="closed" prima che il JS sia eseguito e abbia aggiunto .slide.
+* Usa :global così che CSS Modules non applichi l'hash a questo selettore.
 */
 :global([data-slide='closed']) {
   display: none;

package/src/components/snackbar/snackbar.js

@@ -4,7 +4,7 @@ import { classnames } from '../../utilities/classnames.js';
 import * as styles from './snackbar.module.css';
 
 /*
-References
+Riferimenti
 * https://web.dev/learn/css/popover-and-dialog
 * https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/popover
 * https://developer.mozilla.org/en-US/docs/Web/API/Popover_API
@@ -14,19 +14,19 @@ References
 
 */
 
-// TODO snackbar action
-// TODO handle multiple simultaneous snackbars (no stacking)
+// TODO azione della snackbar
+// TODO gestire più snackbar simultanee (senza stacking)
 // TODO test con prefers-reduced-motion
 
 /**
- * Displays a snackbar / toast notification using the Popover API.
- * @param {string} message - The message to display.
+ * Mostra una notifica snackbar / toast usando la Popover API.
+ * @param {string} message - Il messaggio da mostrare.
  * @param {Object} [options={}] (default: {})
- * @param {string | null} [options.status=null] - Status variant: `danger`, `warning`, `info`, or `success`. (default: null)
- * @param {number | false | null} [options.duration=4000] - Auto-close delay in ms; `false` or `null` disables auto-close. (default: 4000)
- * @param {boolean} [options.close_btn=true] - Whether to show the close button. (default: true)
- * @param {Function | null} [options.action=null] - Action callback. (default: null)
- * @param {string | null} [options.action_text=null] - Label for the action button. (default: null)
+ * @param {string | null} [options.status=null] - Variante di stato: `danger`, `warning`, `info` o `success` (default: null)
+ * @param {number | false | null} [options.duration=4000] - Ritardo di chiusura automatica in ms; `false` o `null` disattiva la chiusura automatica (default: 4000)
+ * @param {boolean} [options.close_btn=true] - Se mostrare il pulsante di chiusura (default: true)
+ * @param {Function | null} [options.action=null] - Callback dell'azione (default: null)
+ * @param {string | null} [options.action_text=null] - Etichetta del pulsante di azione (default: null)
  * @returns {{ close: function(): void }}
  */
 export function snackbar(message, options = {}){
@@ -34,11 +34,11 @@ export function snackbar(message, options = {}){
   options = {
 
     status       : null, // danger, warning, info, success
-    duration     : 4000, // ms or false/null to avoid autoclose
+    duration     : 4000, // ms oppure false/null per evitare la chiusura automatica
     close_btn    : true, // true | false
 
-    action       : null, // null or function
-    action_text  : null, // null or string
+    action       : null, // null o funzione
+    action_text  : null, // null o stringa
 
     ...options
   };
@@ -51,7 +51,7 @@ export function snackbar(message, options = {}){
 
   const removePopover = () => {
     if (_isRemoving || !_popover?.matches(':popover-open')) return;
-    _isRemoving = true; // prevents double-removal if called multiple times during the close animation
+    _isRemoving = true; // evita la doppia rimozione se chiamata più volte durante l'animazione di chiusura
 
     if (_timeoutID) clearTimeout(_timeoutID);
 
@@ -62,10 +62,10 @@ export function snackbar(message, options = {}){
 
     _popover?.classList.add(styles.isHiding);
 
-    // with `prefers-reduced-motion` (or any override disabling animations) no animation
-    // runs and `animationend` would never fire: in that case remove immediately
+    // con `prefers-reduced-motion` (o qualsiasi override che disattivi le animazioni) non parte
+    // alcuna animazione e `animationend` non scatterebbe mai: in tal caso rimuove subito
     if (_popover?.getAnimations().length) {
-      // 'once' prevents duplicate listeners; the flag guards against calls before animation ends
+      // 'once' evita listener duplicati; il flag protegge dalle chiamate prima della fine dell'animazione
       _popover.addEventListener('animationend', remove, { once: true });
     }
     else {
@@ -115,10 +115,10 @@ export function snackbar(message, options = {}){
 
 
   if(options.duration) {
-    const duration = options.duration; // const preserves narrowing inside closures
+    const duration = options.duration; // const mantiene il narrowing dentro le closure
     _timeoutID = setTimeout(removePopover, duration);
 
-    // pause the auto-close timeout on hover
+    // mette in pausa il timeout di chiusura automatica al passaggio del mouse
     _popover?.addEventListener('mouseenter', () => clearTimeout(_timeoutID));
     _popover?.addEventListener('mouseleave', () => {
       _timeoutID = setTimeout(removePopover, duration);

package/src/components/spinner/spinner.js

@@ -1,10 +1,10 @@
 import * as styles from './spinner.module.css';
 
-// The spinner class depends on the spinner type in use; the corresponding CSS file must be included.
-// TODO: system for configuring the spinner type to allow multiple spinner types in the same project
+// La classe dello spinner dipende dal tipo di spinner in uso; deve essere incluso il file CSS corrispondente.
+// TODO: sistema per configurare il tipo di spinner, così da consentire più tipi di spinner nello stesso progetto
 
 /**
- * Returns the HTML markup for a loading spinner.
+ * Restituisce il markup HTML di uno spinner di caricamento.
  * @returns {string}
  */
 export function spinner() {

package/src/components/unsplash-page/README.md

@@ -1,15 +1,15 @@
 # Unsplash page
-Single page with random photo from [Unsplash](https://unsplash.com/) to display some messages (useful for error pages).
+Pagina singola con una foto casuale da [Unsplash](https://unsplash.com/) per mostrare alcuni messaggi (utile per le pagine di errore).
 
-This component comes from some experiments I did with the Unsplash API. The initial purpose was to display more appealing error pages, but you can use it for any use.
+Questo componente nasce da alcuni esperimenti fatti con le API di Unsplash. Lo scopo iniziale era mostrare pagine di errore più accattivanti, ma si può usare per qualsiasi altro scopo.
 
-For best results, it is advisable to display images from a photo collection prepared on Unsplash. The demos in this repository use my collection ["World"](https://unsplash.com/collections/3660951/world).
+Per ottenere i risultati migliori è consigliabile mostrare immagini da una collezione di foto preparata su Unsplash. Le demo di questo repository usano la mia collezione ["World"](https://unsplash.com/collections/3660951/world).
 
-You need to create a server script to retrieve the JSON data of a random image from Unsplash (see [Get a Random Photo](https://unsplash.com/documentation#get-a-random-photo) on Unsplash API docs).
+Serve uno script lato server per recuperare i dati JSON di un'immagine casuale da Unsplash (vedi [Get a Random Photo](https://unsplash.com/documentation#get-a-random-photo) nella documentazione delle API di Unsplash).
 
-The script also implements [BlurHash](https://blurha.sh/), to show a placeholder of the image until it loads.
+Lo script implementa anche [BlurHash](https://blurha.sh/), per mostrare un placeholder dell'immagine fino al suo caricamento.
 
-For more details and examples take a look at:
+Per maggiori dettagli ed esempi vedi:
 
 * <https://unsplash.com/developers>
 * [A Random Image Slideshow With Unsplash and React](https://betterprogramming.pub/a-random-image-slideshow-with-unsplash-and-react-1b6aee698652)
@@ -18,6 +18,6 @@ For more details and examples take a look at:
 * [A Split Image Effect in React](https://medium.com/better-programming/a-split-image-effect-in-react-beb2baa3fe5f) and [split image](https://github.com/massimo-cassandro/area-test/tree/main/2023-07-split-image)
 
 
-The SVG icons used in the script are from [Phosphor Icon](https://phosphoricons.com/). At the moment it is not possible to use different ones without modifying the source code.
+Le icone SVG usate nello script provengono da [Phosphor Icon](https://phosphoricons.com/). Al momento non è possibile usarne di diverse senza modificare il codice sorgente.
 
-The `snippets` directory contains an example of implementing Unsplash Page for an error page system in twig/Symfony
+La directory `snippets` contiene un esempio di implementazione di Unsplash Page per un sistema di pagine di errore in twig/Symfony