@maggioli-design-system/magma-react 2.9.0 → 2.11.0

package/agents/patterns/previews/app-shell/public-service.html

@@ -0,0 +1,31 @@
+<!--
+try: Look at the bar of a citizen not signed in yet: the name of the service, its sections with Servizi marked as the current one, and Accedi last. Narrow the stage to a phone: the sections and Accedi move into the menu of the bar.
+height: 520
+whole-page: true
+-->
+<mds-header>
+  <mds-header-bar>
+    <mds-text typography="h6" tag="p">Sportello del cittadino</mds-text>
+    <mds-button slot="nav" href="#" aria-current="page" variant="dark" tone="weak">Servizi</mds-button>
+    <mds-button slot="nav" href="#" variant="dark" tone="text">Pagamenti</mds-button>
+    <mds-button slot="nav" href="#" variant="dark" tone="text">Appuntamenti</mds-button>
+    <mds-button slot="nav" href="#" variant="dark" tone="outline">Accedi</mds-button>
+  </mds-header-bar>
+  <nav slot="menu" class="grid gap-inline p-inset">
+    <mds-button href="#" aria-current="page" variant="dark" tone="weak" class="w-full justify-start">Servizi</mds-button>
+    <mds-button href="#" variant="dark" tone="text" class="w-full justify-start">Pagamenti</mds-button>
+    <mds-button href="#" variant="dark" tone="text" class="w-full justify-start">Appuntamenti</mds-button>
+    <mds-separator></mds-separator>
+    <mds-button href="#" variant="dark" tone="outline" class="w-full">Accedi</mds-button>
+  </nav>
+</mds-header>
+<main class="page-frame grid gap-between-sections py-between-sections">
+  <header class="grid gap-title-content">
+    <mds-text typography="page" tag="h1">Servizi</mds-text>
+    <mds-text typography="detail" tag="p" class="text-fg-muted">Le richieste che puoi fare al Comune senza andare allo sportello.</mds-text>
+  </header>
+  <section class="grid gap-title-content">
+    <mds-text typography="section" tag="h2">I più richiesti</mds-text>
+    <mds-text tag="p">Certificato di residenza, cambio di indirizzo, carta d'identità.</mds-text>
+  </section>
+</main>

package/agents/patterns/previews/confirm-action/act-then-undo.html

@@ -0,0 +1,44 @@
+<!--
+try: Press the archive button of 2026/0412: the request leaves the list at once, with no question, and a toast says what went and offers Ripristina.
+height: 340
+-->
+<section class="grid gap-title-content">
+  <mds-text typography="section" tag="h2">Pratiche concluse</mds-text>
+  <div id="pratiche" class="grid">
+    <div class="flex items-center justify-between gap-inline">
+      <mds-text>2026/0412, Giulia Bianchi</mds-text>
+      <mds-button icon="mi/baseline/archive" variant="dark" tone="text" aria-label="Archivia la pratica 2026/0412"></mds-button>
+    </div>
+    <div class="flex items-center justify-between gap-inline">
+      <mds-text>2026/0398, Luca Ferri</mds-text>
+      <mds-button icon="mi/baseline/archive" variant="dark" tone="text" aria-label="Archivia la pratica 2026/0398"></mds-button>
+    </div>
+    <div class="flex items-center justify-between gap-inline">
+      <mds-text>2026/0377, Anna Rossi</mds-text>
+      <mds-button icon="mi/baseline/archive" variant="dark" tone="text" aria-label="Archivia la pratica 2026/0377"></mds-button>
+    </div>
+  </div>
+</section>
+<mds-toast-region>
+  <mds-toast id="toast" duration="0" dismissible>
+    Pratica archiviata: 2026/0412
+    <mds-button id="restore" slot="action" size="sm" variant="dark" tone="outline">Ripristina</mds-button>
+  </mds-toast>
+</mds-toast-region>
+<script>
+  const list = document.getElementById('pratiche');
+  const toast = document.getElementById('toast');
+  let archived;
+  list.addEventListener('click', (event) => {
+    const item = event.target.closest('mds-button')?.parentElement;
+    if (!item) return;
+    archived = { item, next: item.nextElementSibling };
+    toast.firstChild.data = `Pratica archiviata: ${item.querySelector('mds-text').textContent.split(',')[0]}`;
+    item.remove();
+    toast.visible = true;
+  });
+  document.getElementById('restore').addEventListener('click', () => {
+    list.insertBefore(archived.item, archived.next);
+    toast.visible = undefined;
+  });
+</script>

package/agents/patterns/previews/confirm-action/ask-before-sending.html

@@ -0,0 +1,25 @@
+<!--
+try: Look at the dialog of the reminder, opened from the menu of a row: it shows who receives it and the text that goes before Invia sollecito; Annulla holds the focus.
+height: 480
+-->
+<mds-modal opened aria-label="Inviare il sollecito a Marco Bianchi?">
+  <mds-banner slot="window" variant="light" tone="box" dismissible headline="Inviare il sollecito a Marco Bianchi?">
+    <div class="@container">
+      <dl class="m-0 grid items-start gap-between-fields @md:grid-cols-2">
+        <div class="grid gap-label-control">
+          <mds-text typography="label" tag="dt" class="text-fg-muted">Destinatario</mds-text>
+          <mds-text tag="dd" class="m-0">m.bianchi@pec.esempio.it</mds-text>
+        </div>
+        <div class="col-span-full grid gap-label-control">
+          <mds-text typography="label" tag="dt" class="text-fg-muted">Testo</mds-text>
+          <mds-text tag="dd" class="m-0">
+            Per la pratica 2026/0412 manca ancora la planimetria dell'immobile. La carichi entro il 30
+            marzo, o la pratica viene archiviata.
+          </mds-text>
+        </div>
+      </dl>
+    </div>
+    <mds-button slot="action" variant="dark" tone="outline" autofocus>Annulla</mds-button>
+    <mds-button slot="action">Invia sollecito</mds-button>
+  </mds-banner>
+</mds-modal>

package/agents/patterns/previews/confirm-action/ask-first-many.html

@@ -0,0 +1,11 @@
+<!--
+try: Look at the question: it says how many notes go, and the button repeats it; Annulla holds the focus, so Invio cancels.
+height: 320
+-->
+<mds-modal opened aria-label="Eliminare 12 note?">
+  <mds-banner slot="window" variant="light" tone="box" dismissible headline="Eliminare 12 note?">
+    <mds-text>Le 12 note selezionate vengono cancellate e non si possono recuperare.</mds-text>
+    <mds-button slot="action" variant="dark" tone="outline" autofocus>Annulla</mds-button>
+    <mds-button slot="action" variant="error" tone="strong">Elimina 12 note</mds-button>
+  </mds-banner>
+</mds-modal>

package/agents/patterns/previews/confirm-action/ask-first.html

@@ -0,0 +1,14 @@
+<!--
+try: Look at the question: it names the user, and the text says what follows; Annulla holds the focus, so Invio cancels, and Elimina utente stands last in red.
+height: 340
+-->
+<mds-modal opened aria-label="Eliminare l'utente Mario Rossi?">
+  <mds-banner slot="window" variant="light" tone="box" dismissible headline="Eliminare l'utente Mario Rossi?">
+    <mds-text>
+      Non potrà più accedere, e l'utente non si può recuperare. Le pratiche che ha seguito restano,
+      a suo nome.
+    </mds-text>
+    <mds-button slot="action" variant="dark" tone="outline" autofocus>Annulla</mds-button>
+    <mds-button slot="action" variant="error" tone="strong">Elimina utente</mds-button>
+  </mds-banner>
+</mds-modal>

package/agents/patterns/previews/confirm-action/make-reversible.html

@@ -0,0 +1,54 @@
+<!--
+try: Press Chiudi segnalazione on the first card: it closes at once, with no question, and a toast offers Riapri while the application still keeps it.
+height: 520
+-->
+<section class="grid gap-title-content">
+  <mds-text typography="section" tag="h2">Segnalazioni risolte</mds-text>
+  <div id="segnalazioni" class="grid gap-between-containers">
+    <mds-card>
+      <mds-card-header>
+        <mds-text typography="part" tag="h3">Lampione spento in via Roma</mds-text>
+      </mds-card-header>
+      <mds-card-content>
+        <mds-text typography="detail" tag="p">Segnalazione 2026/0412, riparato dalla squadra esterna.</mds-text>
+      </mds-card-content>
+      <mds-card-footer>
+        <mds-button variant="primary" tone="outline">Chiudi segnalazione</mds-button>
+      </mds-card-footer>
+    </mds-card>
+    <mds-card>
+      <mds-card-header>
+        <mds-text typography="part" tag="h3">Buca in via Emilia</mds-text>
+      </mds-card-header>
+      <mds-card-content>
+        <mds-text typography="detail" tag="p">Segnalazione 2026/0398, asfalto rifatto il 3 marzo.</mds-text>
+      </mds-card-content>
+      <mds-card-footer>
+        <mds-button variant="primary" tone="outline">Chiudi segnalazione</mds-button>
+      </mds-card-footer>
+    </mds-card>
+  </div>
+</section>
+<mds-toast-region>
+  <mds-toast id="toast" duration="0" dismissible>
+    Segnalazione chiusa: Lampione spento in via Roma
+    <mds-button id="reopen" slot="action" size="sm" variant="dark" tone="outline">Riapri</mds-button>
+  </mds-toast>
+</mds-toast-region>
+<script>
+  const list = document.getElementById('segnalazioni');
+  const toast = document.getElementById('toast');
+  let closed;
+  list.addEventListener('click', (event) => {
+    const card = event.target.closest('mds-button')?.closest('mds-card');
+    if (!card) return;
+    closed = { card, next: card.nextElementSibling };
+    toast.firstChild.data = `Segnalazione chiusa: ${card.querySelector('mds-text').textContent}`;
+    card.remove();
+    toast.visible = true;
+  });
+  document.getElementById('reopen').addEventListener('click', () => {
+    list.insertBefore(closed.card, closed.next);
+    toast.visible = undefined;
+  });
+</script>

package/agents/patterns/previews/confirm-action/send-as-shown.html

@@ -0,0 +1,57 @@
+<!--
+try: Press Invia: the message leaves with no question, since the recipient and the text are on screen as they go; a banner takes the place of the form, so nothing can be sent twice, and Scrivi un'altra comunicazione brings back an empty form.
+height: 640
+-->
+<div class="grid gap-between-sections">
+  <mds-text id="title" typography="page" tag="h1" tabindex="-1">Nuova comunicazione</mds-text>
+  <form id="form" class="@container grid max-w-form gap-content-actions">
+    <div class="grid gap-between-fields">
+      <mds-input-field label="Destinatario">
+        <mds-input type="email" name="to" value="m.bianchi@pec.esempio.it"></mds-input>
+      </mds-input-field>
+      <mds-input-field label="Oggetto">
+        <mds-input name="subject" value="Documenti mancanti, pratica 2026/0412"></mds-input>
+      </mds-input-field>
+      <mds-input-field label="Testo">
+        <mds-input
+          type="textarea"
+          name="text"
+          value="Buongiorno, per chiudere la pratica manca la planimetria dell'immobile. Può caricarla entro il 30 marzo."
+        ></mds-input>
+      </mds-input-field>
+    </div>
+    <div class="flex justify-end gap-inline @max-actions:flex-col @max-actions:*:self-stretch">
+      <mds-button type="button" variant="dark" tone="outline">Annulla</mds-button>
+      <mds-button id="send" type="submit">Invia</mds-button>
+    </div>
+  </form>
+  <mds-banner id="sent" variant="success" tone="strong" headline="Comunicazione inviata" class="hidden max-w-form">
+    <mds-text>A m.bianchi@pec.esempio.it, con oggetto Documenti mancanti, pratica 2026/0412.</mds-text>
+    <mds-button id="again" slot="action" variant="success" tone="strong">Scrivi un'altra comunicazione</mds-button>
+  </mds-banner>
+</div>
+<script>
+  const form = document.getElementById('form');
+  const send = document.getElementById('send');
+  const sent = document.getElementById('sent');
+  form.addEventListener('submit', (event) => {
+    event.preventDefault();
+    send.await = true;
+    // the preview answers at once; in the product the back end does
+    setTimeout(() => {
+      send.await = undefined;
+      // the form goes: what was sent cannot be sent again by a second press
+      form.classList.add('hidden');
+      sent.classList.remove('hidden');
+      // Invia is gone: the focus goes to the heading, the banner is read out
+      document.getElementById('title').focus();
+    }, 400);
+  });
+  document.getElementById('again').addEventListener('click', () => {
+    for (const input of form.querySelectorAll('mds-input')) input.value = '';
+    sent.classList.add('hidden');
+    form.classList.remove('hidden');
+    // Scrivi un'altra comunicazione is gone: the focus goes back to the heading, over the empty form
+    document.getElementById('title').focus();
+  });
+</script>

package/agents/patterns/previews/empty-state/add-the-first.html

@@ -0,0 +1,19 @@
+<!--
+try: Look at the empty list of Deleghe: the panel says what a delegation is for and offers the first one; Nuova delega stays in the header too, the one filled action of the page.
+-->
+<div class="grid gap-between-sections">
+  <div class="flex flex-wrap items-start justify-between gap-inline">
+    <mds-text typography="page" tag="h1" class="min-w-0">Deleghe</mds-text>
+    <mds-button>Nuova delega</mds-button>
+  </div>
+  <mds-zero>
+    <div slot="content" class="grid gap-title-content">
+      <mds-text typography="part" tag="h2">Nessuna delega</mds-text>
+      <mds-text typography="detail" tag="p">
+        Con una delega un familiare o un professionista presenta le richieste a tuo nome.
+        Aggiungi la prima per iniziare.
+      </mds-text>
+    </div>
+    <mds-button slot="action" variant="primary" tone="outline">Nuova delega</mds-button>
+  </mds-zero>
+</div>

package/agents/patterns/previews/empty-state/all-done.html

@@ -0,0 +1,15 @@
+<!--
+try: Look at Da gestire, emptied by the work done: the panel says all is handled and what will come here, with no button and no illustration.
+-->
+<div class="grid gap-between-sections">
+  <mds-text typography="page" tag="h1">Da gestire</mds-text>
+  <mds-zero>
+    <div slot="content" class="grid gap-title-content">
+      <mds-text typography="part" tag="h2">Nessuna richiesta da gestire</mds-text>
+      <mds-text typography="detail" tag="p">
+        Hai gestito tutte le richieste del tuo ufficio. Le nuove arrivano qui appena un cittadino
+        le invia.
+      </mds-text>
+    </div>
+  </mds-zero>
+</div>

package/agents/patterns/previews/empty-state/clear-filters.html

@@ -0,0 +1,35 @@
+<!--
+try: Look at the search for Rossini among the open requests: the summary and the panel say nothing matches, and the panel offers Rimuovi i filtri only; Nuova richiesta stays in the header.
+-->
+<div class="grid gap-between-sections">
+  <div class="flex flex-wrap items-start justify-between gap-inline">
+    <mds-text typography="page" tag="h1" class="min-w-0">Richieste</mds-text>
+    <mds-button>Nuova richiesta</mds-button>
+  </div>
+  <div class="grid gap-between-groups">
+    <form role="search" class="grid gap-between-fields">
+      <div class="field-group max-w-form">
+        <mds-input-field label="Cerca per nome o numero">
+          <mds-input type="search" name="q" value="Rossini"></mds-input>
+        </mds-input-field>
+      </div>
+      <mds-filter label="Stato" class="justify-self-start">
+        <mds-filter-item label="Tutte" value="all"></mds-filter-item>
+        <mds-filter-item label="Aperte" value="open" selected></mds-filter-item>
+        <mds-filter-item label="Chiuse" value="closed"></mds-filter-item>
+      </mds-filter>
+    </form>
+    <div class="grid gap-title-content">
+      <mds-text typography="detail" tag="p" role="status">Nessuna richiesta corrisponde</mds-text>
+      <mds-zero>
+        <div slot="content" class="grid gap-title-content">
+          <mds-text typography="part" tag="h2">Nessuna richiesta trovata</mds-text>
+          <mds-text typography="detail" tag="p">
+            Prova con altre parole, o rimuovi i filtri per vedere tutte le richieste.
+          </mds-text>
+        </div>
+        <mds-button slot="action" variant="primary" tone="outline">Rimuovi i filtri</mds-button>
+      </mds-zero>
+    </div>
+  </div>
+</div>

package/agents/patterns/previews/empty-state/filled-by-others.html

@@ -0,0 +1,15 @@
+<!--
+try: Look at Documenti, still empty: the panel says who adds the documents and when, and offers no button, since the person has nothing to do here.
+-->
+<section class="grid gap-title-content">
+  <mds-text typography="section" tag="h2">Documenti</mds-text>
+  <mds-zero>
+    <div slot="content" class="grid gap-title-content">
+      <mds-text typography="part" tag="h3">Nessun documento</mds-text>
+      <mds-text typography="detail" tag="p">
+        L'ufficio anagrafe aggiunge qui i documenti della pratica quando la prende in carico, di
+        solito entro cinque giorni lavorativi.
+      </mds-text>
+    </div>
+  </mds-zero>
+</section>

package/agents/patterns/previews/empty-state/not-found.html

@@ -0,0 +1,38 @@
+<!--
+try: Look at the page of a deleted request: under the bar of the application the panel takes the place of the page, its title is the h1, and Vai alle richieste leads back to the list.
+whole-page: true
+-->
+<mds-header>
+  <mds-header-bar>
+    <mds-text typography="h6" tag="p">Servizi demografici</mds-text>
+    <mds-button slot="nav" href="#" aria-current="page" variant="dark" tone="weak">Richieste</mds-button>
+    <mds-button slot="nav" href="#" variant="dark" tone="text">Archivio</mds-button>
+    <mds-button id="persona" slot="nav" icon="mi/baseline/account-circle" variant="dark" tone="text" aria-label="Account di Mario Rossi"></mds-button>
+  </mds-header-bar>
+  <nav slot="menu" class="grid gap-inline p-inset">
+    <mds-button href="#" aria-current="page" variant="dark" tone="weak" class="w-full justify-start">Richieste</mds-button>
+    <mds-button href="#" variant="dark" tone="text" class="w-full justify-start">Archivio</mds-button>
+    <mds-separator></mds-separator>
+    <mds-text typography="detail" tag="p" class="text-fg-muted">Mario Rossi</mds-text>
+    <mds-button href="#" variant="dark" tone="text" class="w-full justify-start">Profilo</mds-button>
+    <mds-button href="#" variant="dark" tone="text" class="w-full justify-start">Esci</mds-button>
+  </nav>
+</mds-header>
+<mds-dropdown target="#persona" placement="bottom-end" strategy="fixed">
+  <mds-text typography="detail" tag="p" class="text-fg-muted">Mario Rossi</mds-text>
+  <mds-button href="#" icon="mi/baseline/person" variant="dark" tone="text" label="Profilo"></mds-button>
+  <mds-separator></mds-separator>
+  <mds-button href="#" icon="mi/baseline/logout" variant="dark" tone="text" label="Esci"></mds-button>
+</mds-dropdown>
+<main class="page-frame py-between-sections">
+  <mds-zero>
+    <div slot="content" class="grid gap-title-content">
+      <mds-text typography="page" tag="h1">Richiesta non trovata</mds-text>
+      <mds-text typography="detail" tag="p">
+        La richiesta 2026/0412 non esiste più: è stata eliminata, o l'indirizzo è sbagliato.
+        Cercala nell'elenco delle richieste.
+      </mds-text>
+    </div>
+    <mds-button slot="action" href="#">Vai alle richieste</mds-button>
+  </mds-zero>
+</main>

package/agents/patterns/previews/empty-state/one-line.html

@@ -0,0 +1,12 @@
+<!--
+try: Look under Comune di residenza: no town matches the text typed, so one line says so where the options would be; the field above it is the way out.
+height: 220
+-->
+<div class="grid max-w-form">
+  <mds-input-field label="Comune di residenza">
+    <mds-input id="comune" value="Santarcangiolo"></mds-input>
+  </mds-input-field>
+</div>
+<mds-dropdown target="#comune" interaction="none" placement="bottom-start" role="status" visible>
+  <mds-text typography="detail" class="text-fg-muted">Nessun comune corrisponde a "Santarcangiolo"</mds-text>
+</mds-dropdown>

package/agents/patterns/previews/error-recovery/action-another-way.html

@@ -0,0 +1,35 @@
+<!--
+try: Press Salva: the server refuses the code, already in use, so there is no Riprova; the error goes on the field Codice, which takes the focus, and says what to write instead.
+height: 440
+-->
+<div class="grid gap-between-sections">
+  <mds-text typography="page" tag="h1">Nuovo ufficio</mds-text>
+  <form id="form" class="@container grid max-w-form gap-content-actions">
+    <div class="grid gap-between-fields">
+      <mds-input-field label="Nome">
+        <mds-input value="Ufficio tributi, sede di Viserba"></mds-input>
+      </mds-input-field>
+      <mds-input-field id="code-field" label="Codice">
+        <mds-input id="code" value="TR01"></mds-input>
+      </mds-input-field>
+    </div>
+    <div class="flex justify-end gap-inline @max-actions:flex-col @max-actions:*:self-stretch">
+      <mds-button type="button" variant="dark" tone="outline">Annulla</mds-button>
+      <mds-button id="save">Salva</mds-button>
+    </div>
+  </form>
+</div>
+<script>
+  const save = document.getElementById('save');
+  document.getElementById('form').addEventListener('submit', (event) => event.preventDefault());
+  save.addEventListener('click', () => {
+    save.await = true;
+    setTimeout(() => {
+      save.await = undefined;
+      const field = document.getElementById('code-field');
+      field.variant = 'error';
+      field.message = "TR01 è già il codice dell'ufficio tributi di Rimini: scegline un altro, come TR02.";
+      document.getElementById('code').setFocus();
+    }, 400);
+  });
+</script>

package/agents/patterns/previews/error-recovery/changed-meanwhile.html

@@ -0,0 +1,26 @@
+<!--
+try: Look at the error above the row: it says who changed the request and when, and that nothing was saved; the changes written here stay in their fields.
+-->
+<div class="grid gap-between-sections">
+  <mds-text typography="page" tag="h1">Modifica pratica</mds-text>
+  <form class="@container grid max-w-form gap-content-actions">
+    <div class="grid gap-between-fields">
+      <mds-input-field label="Oggetto">
+        <mds-input value="Rinnovo concessione suolo pubblico"></mds-input>
+      </mds-input-field>
+      <mds-input-field label="Durata in giorni">
+        <mds-input value="120"></mds-input>
+      </mds-input-field>
+      <mds-banner variant="error" tone="strong" headline="Modifiche non salvate">
+        <mds-text>
+          Anna Rossi ha modificato la pratica alle 10:42, dopo che l'hai aperta. Non è stato salvato
+          nulla e le tue modifiche sono ancora qui: guarda le sue prima di salvare.
+        </mds-text>
+      </mds-banner>
+    </div>
+    <div class="flex justify-end gap-inline @max-actions:flex-col @max-actions:*:self-stretch">
+      <mds-button type="button" variant="dark" tone="outline">Annulla</mds-button>
+      <mds-button>Salva</mds-button>
+    </div>
+  </form>
+</div>

package/agents/patterns/previews/error-recovery/check-or-repeat.html

@@ -0,0 +1,38 @@
+<!--
+try: Press Invia: the connection drops, Invia waits while the application asks the server what happened, then the error above the row says nothing left, so Invia can send it once.
+height: 560
+-->
+<div class="grid gap-between-sections">
+  <mds-text typography="page" tag="h1">Nuova comunicazione</mds-text>
+  <form id="form" class="@container grid max-w-form gap-content-actions">
+    <div class="grid gap-between-fields">
+      <mds-input-field label="Destinatario">
+        <mds-input type="email" value="m.bianchi@pec.esempio.it"></mds-input>
+      </mds-input-field>
+      <mds-input-field label="Oggetto">
+        <mds-input value="Documenti mancanti, pratica 2026/0412"></mds-input>
+      </mds-input-field>
+      <mds-banner id="error" variant="error" tone="strong" headline="Comunicazione non inviata" class="hidden">
+        <mds-text>
+          La connessione si è interrotta durante l'invio, e dal controllo risulta che non è partita.
+          Quello che hai scritto è qui: inviala di nuovo, arriverà una volta sola.
+        </mds-text>
+      </mds-banner>
+    </div>
+    <div class="flex justify-end gap-inline @max-actions:flex-col @max-actions:*:self-stretch">
+      <mds-button type="button" variant="dark" tone="outline">Annulla</mds-button>
+      <mds-button id="send">Invia</mds-button>
+    </div>
+  </form>
+</div>
+<script>
+  const send = document.getElementById('send');
+  document.getElementById('form').addEventListener('submit', (event) => event.preventDefault());
+  send.addEventListener('click', () => {
+    send.await = true;
+    setTimeout(() => {
+      send.await = undefined;
+      document.getElementById('error').classList.remove('hidden');
+    }, 600);
+  });
+</script>

package/agents/patterns/previews/error-recovery/content-another-way.html

@@ -0,0 +1,12 @@
+<!--
+try: Look at the request that cannot be opened: no Riprova, since trying again fails the same way; the error says why and who can give access.
+-->
+<div class="grid gap-between-sections">
+  <mds-text typography="page" tag="h1">Pratica 2026/0412</mds-text>
+  <mds-banner variant="error" tone="strong" headline="Non puoi vedere questa pratica">
+    <mds-text>
+      La segue l'ufficio tributi, e il tuo profilo non ne fa parte. Per l'accesso scrivi ad Anna
+      Rossi, responsabile dell'ufficio.
+    </mds-text>
+  </mds-banner>
+</div>

package/agents/patterns/previews/error-recovery/partial.html

@@ -0,0 +1,29 @@
+<!--
+try: Look at the error above the list: 9 archived, 3 not, each with its reason; Riprova acts only on the two the server did not receive.
+-->
+<section class="grid gap-title-content">
+  <mds-text typography="section" tag="h2">Pratiche concluse</mds-text>
+  <div class="grid gap-between-fields">
+    <mds-banner variant="error" tone="strong" headline="9 pratiche archiviate, 3 no">
+      <mds-text>
+        La 2026/0412 è aperta da Anna Rossi: si archivia quando la chiude. La 2026/0398 e la
+        2026/0377 non sono arrivate al server: Riprova archivia solo queste due.
+      </mds-text>
+      <mds-button slot="action" variant="error" tone="strong">Riprova</mds-button>
+    </mds-banner>
+    <div class="grid">
+      <div class="flex items-center justify-between gap-inline">
+        <mds-text>2026/0412, Giulia Bianchi</mds-text>
+        <mds-button icon="mi/baseline/archive" variant="dark" tone="text" aria-label="Archivia la pratica 2026/0412"></mds-button>
+      </div>
+      <div class="flex items-center justify-between gap-inline">
+        <mds-text>2026/0398, Luca Ferri</mds-text>
+        <mds-button icon="mi/baseline/archive" variant="dark" tone="text" aria-label="Archivia la pratica 2026/0398"></mds-button>
+      </div>
+      <div class="flex items-center justify-between gap-inline">
+        <mds-text>2026/0377, Paolo Neri</mds-text>
+        <mds-button icon="mi/baseline/archive" variant="dark" tone="text" aria-label="Archivia la pratica 2026/0377"></mds-button>
+      </div>
+    </div>
+  </div>
+</section>

package/agents/patterns/previews/error-recovery/retry-action.html

@@ -0,0 +1,35 @@
+<!--
+try: Press Salva: the save fails, the error stands right above the row, what was written stays, and Salva, which keeps the focus, is the way to try again.
+height: 520
+-->
+<div class="grid gap-between-sections">
+  <mds-text typography="page" tag="h1">Modifica referente</mds-text>
+  <form id="form" class="@container grid max-w-form gap-content-actions">
+    <div class="grid gap-between-fields">
+      <mds-input-field label="Nome e cognome">
+        <mds-input value="Marco Bianchi"></mds-input>
+      </mds-input-field>
+      <mds-input-field label="PEC">
+        <mds-input type="email" value="m.bianchi@pec.esempio.it"></mds-input>
+      </mds-input-field>
+      <mds-banner id="error" variant="error" tone="strong" headline="Modifiche non salvate" class="hidden">
+        <mds-text>Il server non ha risposto e non è cambiato nulla. Quello che hai scritto è qui: salva di nuovo tra poco.</mds-text>
+      </mds-banner>
+    </div>
+    <div class="flex justify-end gap-inline @max-actions:flex-col @max-actions:*:self-stretch">
+      <mds-button type="button" variant="dark" tone="outline">Annulla</mds-button>
+      <mds-button id="save">Salva</mds-button>
+    </div>
+  </form>
+</div>
+<script>
+  const save = document.getElementById('save');
+  document.getElementById('form').addEventListener('submit', (event) => event.preventDefault());
+  save.addEventListener('click', () => {
+    save.await = true;
+    setTimeout(() => {
+      save.await = undefined;
+      document.getElementById('error').classList.remove('hidden');
+    }, 400);
+  });
+</script>

package/agents/patterns/previews/error-recovery/retry-content.html

@@ -0,0 +1,40 @@
+<!--
+try: Press Riprova in Allegati: it waits, then the attachments come in and the error goes; Richiedente, which had loaded, never moved.
+-->
+<div class="grid gap-between-sections">
+  <section class="grid gap-title-content">
+    <mds-text typography="section" tag="h2">Richiedente</mds-text>
+    <dl class="m-0 grid max-w-form items-start gap-between-fields @md:grid-cols-2">
+      <div class="grid gap-label-control">
+        <mds-text typography="label" tag="dt" class="text-fg-muted">Nome e cognome</mds-text>
+        <mds-text tag="dd" class="m-0">Giulia Bianchi</mds-text>
+      </div>
+      <div class="grid gap-label-control">
+        <mds-text typography="label" tag="dt" class="text-fg-muted">Pratica</mds-text>
+        <mds-text tag="dd" class="m-0">2026/0412</mds-text>
+      </div>
+    </dl>
+  </section>
+  <section class="grid gap-title-content">
+    <mds-text id="title" typography="section" tag="h2" tabindex="-1">Allegati</mds-text>
+    <mds-banner id="error" variant="error" tone="strong" headline="Allegati non caricati">
+      <mds-text>Controlla la connessione, poi riprova.</mds-text>
+      <mds-button id="retry" slot="action" variant="error" tone="strong">Riprova</mds-button>
+    </mds-banner>
+    <div id="list" class="grid gap-between-containers hidden">
+      <mds-file filename="planimetria.pdf"></mds-file>
+      <mds-file filename="delega-firmata.pdf"></mds-file>
+    </div>
+  </section>
+</div>
+<script>
+  const retry = document.getElementById('retry');
+  retry.addEventListener('click', () => {
+    retry.await = true;
+    setTimeout(() => {
+      document.getElementById('error').remove();
+      document.getElementById('list').classList.remove('hidden');
+      document.getElementById('title').focus();
+    }, 500);
+  });
+</script>