@maggioli-design-system/magma-react 2.8.0 → 2.10.0

package/agents/patterns/previews/error-recovery/sign-in-again.html

@@ -0,0 +1,44 @@
+<!--
+try: Look at the error above the row: the session ended and nothing was saved, so Salva is hidden and Accedi, in the banner, is the only way on. Press Accedi: the sign-in opens in a new tab; back here the banner goes and Salva comes back, with what was written.
+-->
+<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="expired" variant="error" tone="strong" headline="Sessione scaduta">
+        <mds-text>
+          Non è stato salvato nulla. Accedi di nuovo in un'altra scheda, poi torna qui e salva: quello
+          che hai scritto resta in questa pagina.
+        </mds-text>
+        <mds-button id="sign-in" slot="action" href="#" target="blank" icon="mi/baseline/open-in-new" icon-position="right" variant="error" tone="strong">Accedi</mds-button>
+      </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" type="submit" class="hidden">Salva</mds-button>
+    </div>
+  </form>
+</div>
+<script>
+  const expired = document.getElementById('expired');
+  const save = document.getElementById('save');
+  document.getElementById('form').addEventListener('submit', (event) => event.preventDefault());
+  // the session is back: the banner goes, Salva comes back and takes the focus
+  const signedIn = () => {
+    expired.classList.add('hidden');
+    save.classList.remove('hidden');
+    save.focus();
+  };
+  // the preview simulates the sign-in in the other tab; in the product the page checks the
+  // session when it is shown again (visibilitychange) and calls signedIn
+  document.getElementById('sign-in').addEventListener('click', (event) => {
+    event.preventDefault();
+    setTimeout(signedIn, 300);
+  });
+</script>

package/agents/patterns/previews/item-list/documents-of-a-request.html

@@ -0,0 +1,12 @@
+<!--
+try: Look at the documents of the request: a few files, so no search, no summary and no pages; one card for each file right under the title of the section, two to a row when the section is wide.
+-->
+<section class="@container grid gap-title-content">
+  <mds-text typography="section" tag="h2">Documenti</mds-text>
+  <div class="grid gap-between-containers @2xl:grid-cols-2">
+    <mds-file filename="domanda-cambio-residenza.pdf"></mds-file>
+    <mds-file filename="documento-identita.jpg"></mds-file>
+    <mds-file filename="contratto-affitto.pdf"></mds-file>
+    <mds-file filename="dichiarazione-ospitalita.pdf"></mds-file>
+  </div>
+</section>

package/agents/patterns/previews/item-list/queue-of-a-desk.html

@@ -0,0 +1,109 @@
+<!--
+try: Look at the end of the line of the summary: 2 practices arrived while the queue was open, and the table did not move. Wait a few seconds: a third arrives, the count in the dot grows and the dot pulses three times. Press Mostra: the new practices join the end of the queue, the summary counts them, and the line empties without giving up its place.
+-->
+<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">
+        <mds-input type="search" name="q" placeholder="Numero o oggetto"></mds-input>
+      </mds-input-field>
+      <mds-input-field label="Canale" short>
+        <mds-input-select name="canale">
+          <option value="">Tutti i canali</option>
+          <option value="online">Online</option>
+          <option value="pec">PEC</option>
+          <option value="sportello">Sportello</option>
+        </mds-input-select>
+      </mds-input-field>
+    </div>
+    <mds-filter label="Stato" class="justify-self-start">
+      <mds-filter-item id="tutte" label="Tutte" value="" count="130"></mds-filter-item>
+      <mds-filter-item id="stato-nuove" label="Nuove" value="nuova" count="24" selected></mds-filter-item>
+      <mds-filter-item label="In lavorazione" value="in-lavorazione" count="41"></mds-filter-item>
+      <mds-filter-item label="In attesa" value="in-attesa" count="12"></mds-filter-item>
+      <mds-filter-item label="Chiuse" value="chiusa" count="53"></mds-filter-item>
+    </mds-filter>
+  </form>
+  <div class="grid gap-between-fields">
+    <div class="@container grid gap-title-content">
+      <div class="flex flex-wrap items-center gap-inline @2xl:justify-between">
+        <div class="flex flex-wrap items-center gap-inline">
+          <mds-text id="summary" typography="detail" tag="p" role="status">21-24 di 24 pratiche</mds-text>
+          <mds-button variant="dark" tone="text" size="sm">Rimuovi i filtri</mds-button>
+        </div>
+        <div id="nuove" class="flex basis-full items-center gap-inline @2xl:basis-auto">
+          <p role="status" class="flex items-center gap-inline">
+            <mds-notification id="punto" variant="info" value="2" pulse></mds-notification>
+            <mds-text id="quante" typography="detail" class="text-info-fg">nuove pratiche</mds-text>
+          </p>
+          <mds-button id="mostra" variant="info" tone="outline" size="sm">Mostra</mds-button>
+        </div>
+      </div>
+      <mds-table sorting="external" class="w-full [&_mds-table-cell]:text-nowrap [&_mds-text]:text-nowrap">
+        <mds-table-header>
+          <mds-table-header-cell label="Numero" sortable sort-key="numero"></mds-table-header-cell>
+          <mds-table-header-cell label="Oggetto"></mds-table-header-cell>
+          <mds-table-header-cell label="Richiedente"></mds-table-header-cell>
+          <mds-table-header-cell label="Ricevuta il" sortable sort-key="ricevuta" direction="ascending"></mds-table-header-cell>
+        </mds-table-header>
+        <mds-table-body id="righe">
+          <mds-table-row>
+            <mds-table-cell><mds-text typography="detail"><mds-link href="#">2026/0151</mds-link></mds-text></mds-table-cell>
+            <mds-table-cell><mds-text typography="detail">Carta di identità</mds-text></mds-table-cell>
+            <mds-table-cell><mds-text typography="detail">Giulia Bianchi</mds-text></mds-table-cell>
+            <mds-table-cell><mds-text typography="detail">3 marzo 2026, 9:05</mds-text></mds-table-cell>
+          </mds-table-row>
+          <mds-table-row>
+            <mds-table-cell><mds-text typography="detail"><mds-link href="#">2026/0152</mds-link></mds-text></mds-table-cell>
+            <mds-table-cell><mds-text typography="detail">Certificato di residenza</mds-text></mds-table-cell>
+            <mds-table-cell><mds-text typography="detail">Luca Ferri</mds-text></mds-table-cell>
+            <mds-table-cell><mds-text typography="detail">3 marzo 2026, 9:18</mds-text></mds-table-cell>
+          </mds-table-row>
+          <mds-table-row>
+            <mds-table-cell><mds-text typography="detail"><mds-link href="#">2026/0154</mds-link></mds-text></mds-table-cell>
+            <mds-table-cell><mds-text typography="detail">Cambio di indirizzo</mds-text></mds-table-cell>
+            <mds-table-cell><mds-text typography="detail">Marco Rossi</mds-text></mds-table-cell>
+            <mds-table-cell><mds-text typography="detail">3 marzo 2026, 9:31</mds-text></mds-table-cell>
+          </mds-table-row>
+          <mds-table-row>
+            <mds-table-cell><mds-text typography="detail"><mds-link href="#">2026/0155</mds-link></mds-text></mds-table-cell>
+            <mds-table-cell><mds-text typography="detail">Iscrizione anagrafica</mds-text></mds-table-cell>
+            <mds-table-cell><mds-text typography="detail">Anna Conti</mds-text></mds-table-cell>
+            <mds-table-cell><mds-text typography="detail">3 marzo 2026, 9:47</mds-text></mds-table-cell>
+          </mds-table-row>
+        </mds-table-body>
+      </mds-table>
+    </div>
+    <mds-paginator pages="3" current-page="3" class="justify-self-start"></mds-paginator>
+  </div>
+</div>
+<script>
+  const arrived = [
+    ['2026/0157', 'Cambio di residenza', 'Paolo Neri', '3 marzo 2026, 10:02'],
+    ['2026/0158', 'Stato di famiglia', 'Sara Galli', '3 marzo 2026, 10:10'],
+  ];
+  const cell = (text) => `<mds-table-cell><mds-text typography="detail">${text}</mds-text></mds-table-cell>`;
+  // a third practice arrives while the queue is open: the count in the dot grows and the dot pulses
+  const arriving = setTimeout(() => {
+    arrived.push(['2026/0159', 'Carta di identità', 'Elena Fontana', '3 marzo 2026, 10:16']);
+    document.getElementById('punto').value = arrived.length;
+  }, 4000);
+  document.getElementById('mostra').addEventListener('click', () => {
+    clearTimeout(arriving);
+    // the list loads again with the same search: oldest first, so the new ones join the end of this last page
+    const rows = arrived.map(
+      ([number, subject, person, received]) =>
+        `<mds-table-row><mds-table-cell><mds-text typography="detail"><mds-link href="#">${number}</mds-link></mds-text></mds-table-cell>${cell(subject)}${cell(person)}${cell(received)}</mds-table-row>`,
+    );
+    document.getElementById('righe').insertAdjacentHTML('beforeend', rows.join(''));
+    const total = 24 + arrived.length;
+    document.getElementById('summary').textContent = `21-${total} di ${total} pratiche`;
+    document.getElementById('stato-nuove').setAttribute('count', `${total}`);
+    document.getElementById('tutte').setAttribute('count', `${130 + arrived.length}`);
+    // the line empties but keeps its place (Mostra hidden, not removed): the items never move
+    document.getElementById('quante').textContent = '';
+    document.getElementById('punto').dismissed = true;
+    document.getElementById('mostra').style.visibility = 'hidden';
+    // Mostra is gone: the focus goes to the heading of the list, in page-header, outside this block
+  });
+</script>

package/agents/patterns/previews/item-list/requests-of-an-office.html

@@ -0,0 +1,74 @@
+<!--
+try: Look at the order of the list: the search form at the width of a form, then the summary that says which practices out of how many with Rimuovi i filtri, the table whose numbers are the links to each practice, and the pages under it.
+-->
+<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">
+        <mds-input type="search" name="q" placeholder="Numero o oggetto"></mds-input>
+      </mds-input-field>
+      <mds-input-field label="Ufficio" short>
+        <mds-input-select name="ufficio" value="anagrafe">
+          <option value="">Tutti gli uffici</option>
+          <option value="anagrafe">Anagrafe</option>
+          <option value="stato-civile">Stato civile</option>
+        </mds-input-select>
+      </mds-input-field>
+    </div>
+    <mds-filter label="Stato" class="justify-self-start">
+      <mds-filter-item label="Tutte" value="" count="44" selected></mds-filter-item>
+      <mds-filter-item label="Nuove" value="nuova" count="8"></mds-filter-item>
+      <mds-filter-item label="In lavorazione" value="in-lavorazione" count="14"></mds-filter-item>
+      <mds-filter-item label="In attesa" value="in-attesa" count="6"></mds-filter-item>
+      <mds-filter-item label="Chiuse" value="chiusa" count="16"></mds-filter-item>
+    </mds-filter>
+  </form>
+  <div class="grid gap-between-fields">
+    <div class="grid gap-title-content">
+      <div class="flex flex-wrap items-center gap-inline">
+        <mds-text typography="detail" tag="p" role="status">41-44 di 44 pratiche</mds-text>
+        <mds-button variant="dark" tone="text" size="sm">Rimuovi i filtri</mds-button>
+      </div>
+      <mds-table sorting="external" class="w-full [&_mds-table-cell]:text-nowrap [&_mds-text]:text-nowrap">
+        <mds-table-header>
+          <mds-table-header-cell label="Numero" sortable sort-key="numero"></mds-table-header-cell>
+          <mds-table-header-cell label="Oggetto"></mds-table-header-cell>
+          <mds-table-header-cell label="Richiedente"></mds-table-header-cell>
+          <mds-table-header-cell label="Stato"></mds-table-header-cell>
+          <mds-table-header-cell label="Ricevuta il" sortable sort-key="ricevuta" direction="descending"></mds-table-header-cell>
+        </mds-table-header>
+        <mds-table-body>
+          <mds-table-row>
+            <mds-table-cell><mds-text typography="detail"><mds-link href="#">2026/0118</mds-link></mds-text></mds-table-cell>
+            <mds-table-cell><mds-text typography="detail">Cambio di residenza</mds-text></mds-table-cell>
+            <mds-table-cell><mds-text typography="detail">Giulia Bianchi</mds-text></mds-table-cell>
+            <mds-table-cell><mds-badge variant="warning" label="In lavorazione"></mds-badge></mds-table-cell>
+            <mds-table-cell><mds-text typography="detail">24 febbraio 2026</mds-text></mds-table-cell>
+          </mds-table-row>
+          <mds-table-row>
+            <mds-table-cell><mds-text typography="detail"><mds-link href="#">2026/0115</mds-link></mds-text></mds-table-cell>
+            <mds-table-cell><mds-text typography="detail">Iscrizione anagrafica</mds-text></mds-table-cell>
+            <mds-table-cell><mds-text typography="detail">Luca Ferri</mds-text></mds-table-cell>
+            <mds-table-cell><mds-badge variant="success" label="Chiusa"></mds-badge></mds-table-cell>
+            <mds-table-cell><mds-text typography="detail">23 febbraio 2026</mds-text></mds-table-cell>
+          </mds-table-row>
+          <mds-table-row>
+            <mds-table-cell><mds-text typography="detail"><mds-link href="#">2026/0112</mds-link></mds-text></mds-table-cell>
+            <mds-table-cell><mds-text typography="detail">Certificato di residenza</mds-text></mds-table-cell>
+            <mds-table-cell><mds-text typography="detail">Marco Rossi</mds-text></mds-table-cell>
+            <mds-table-cell><mds-badge variant="success" label="Chiusa"></mds-badge></mds-table-cell>
+            <mds-table-cell><mds-text typography="detail">20 febbraio 2026</mds-text></mds-table-cell>
+          </mds-table-row>
+          <mds-table-row>
+            <mds-table-cell><mds-text typography="detail"><mds-link href="#">2026/0109</mds-link></mds-text></mds-table-cell>
+            <mds-table-cell><mds-text typography="detail">Cambio di indirizzo</mds-text></mds-table-cell>
+            <mds-table-cell><mds-text typography="detail">Anna Conti</mds-text></mds-table-cell>
+            <mds-table-cell><mds-badge variant="info" label="In attesa"></mds-badge></mds-table-cell>
+            <mds-table-cell><mds-text typography="detail">19 febbraio 2026</mds-text></mds-table-cell>
+          </mds-table-row>
+        </mds-table-body>
+      </mds-table>
+    </div>
+    <mds-paginator pages="5" current-page="5" class="justify-self-start"></mds-paginator>
+  </div>
+</div>

package/agents/patterns/previews/item-list/requests-to-assign.html

@@ -0,0 +1,80 @@
+<!--
+try: Look at the two rows selected: the bar of the table says how many and offers Archivia and Assegna, the main one last; the search, the summary and the pages stay where they are in every list.
+-->
+<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">
+        <mds-input type="search" name="q" placeholder="Numero o oggetto"></mds-input>
+      </mds-input-field>
+      <mds-input-field label="Ufficio" short>
+        <mds-input-select name="ufficio">
+          <option value="">Tutti gli uffici</option>
+          <option value="anagrafe">Anagrafe</option>
+          <option value="stato-civile">Stato civile</option>
+        </mds-input-select>
+      </mds-input-field>
+    </div>
+    <mds-filter label="Stato" class="justify-self-start">
+      <mds-filter-item label="Tutte" value="" count="128"></mds-filter-item>
+      <mds-filter-item label="Da assegnare" value="da-assegnare" count="14" selected></mds-filter-item>
+      <mds-filter-item label="In lavorazione" value="in-lavorazione" count="31"></mds-filter-item>
+      <mds-filter-item label="In attesa" value="in-attesa" count="12"></mds-filter-item>
+      <mds-filter-item label="Chiuse" value="chiusa" count="71"></mds-filter-item>
+    </mds-filter>
+  </form>
+  <div class="grid gap-between-fields">
+    <div class="grid gap-title-content">
+      <div class="flex flex-wrap items-center gap-inline">
+        <mds-text typography="detail" tag="p" role="status">11-14 di 14 pratiche</mds-text>
+        <mds-button variant="dark" tone="text" size="sm">Rimuovi i filtri</mds-button>
+      </div>
+      <mds-table id="pratiche" selectable sorting="external" class="w-full [&_mds-table-cell]:text-nowrap [&_mds-text]:text-nowrap">
+        <mds-table-header>
+          <mds-table-header-cell label="Numero" sortable sort-key="numero"></mds-table-header-cell>
+          <mds-table-header-cell label="Oggetto"></mds-table-header-cell>
+          <mds-table-header-cell label="Richiedente"></mds-table-header-cell>
+          <mds-table-header-cell label="Ricevuta il" sortable sort-key="ricevuta" direction="descending"></mds-table-header-cell>
+        </mds-table-header>
+        <mds-table-body>
+          <mds-table-row value="2026/0101">
+            <mds-table-cell><mds-text typography="detail"><mds-link href="#">2026/0101</mds-link></mds-text></mds-table-cell>
+            <mds-table-cell><mds-text typography="detail">Cambio di residenza</mds-text></mds-table-cell>
+            <mds-table-cell><mds-text typography="detail">Giulia Bianchi</mds-text></mds-table-cell>
+            <mds-table-cell><mds-text typography="detail">16 febbraio 2026</mds-text></mds-table-cell>
+          </mds-table-row>
+          <mds-table-row value="2026/0097">
+            <mds-table-cell><mds-text typography="detail"><mds-link href="#">2026/0097</mds-link></mds-text></mds-table-cell>
+            <mds-table-cell><mds-text typography="detail">Iscrizione anagrafica</mds-text></mds-table-cell>
+            <mds-table-cell><mds-text typography="detail">Luca Ferri</mds-text></mds-table-cell>
+            <mds-table-cell><mds-text typography="detail">13 febbraio 2026</mds-text></mds-table-cell>
+          </mds-table-row>
+          <mds-table-row value="2026/0094">
+            <mds-table-cell><mds-text typography="detail"><mds-link href="#">2026/0094</mds-link></mds-text></mds-table-cell>
+            <mds-table-cell><mds-text typography="detail">Certificato di residenza</mds-text></mds-table-cell>
+            <mds-table-cell><mds-text typography="detail">Marco Rossi</mds-text></mds-table-cell>
+            <mds-table-cell><mds-text typography="detail">12 febbraio 2026</mds-text></mds-table-cell>
+          </mds-table-row>
+          <mds-table-row value="2026/0090">
+            <mds-table-cell><mds-text typography="detail"><mds-link href="#">2026/0090</mds-link></mds-text></mds-table-cell>
+            <mds-table-cell><mds-text typography="detail">Cambio di indirizzo</mds-text></mds-table-cell>
+            <mds-table-cell><mds-text typography="detail">Anna Conti</mds-text></mds-table-cell>
+            <mds-table-cell><mds-text typography="detail">10 febbraio 2026</mds-text></mds-table-cell>
+          </mds-table-row>
+        </mds-table-body>
+        <mds-button slot="batch-action" variant="dark" tone="outline" size="sm">Archivia</mds-button>
+        <mds-button slot="batch-action" variant="primary" tone="outline" size="sm">Assegna</mds-button>
+      </mds-table>
+    </div>
+    <mds-paginator pages="2" current-page="2" class="justify-self-start"></mds-paginator>
+  </div>
+</div>
+<script>
+  // two rows the person has ticked; a row selected in the markup is not counted by the table
+  const table = document.getElementById('pratiche');
+  customElements.whenDefined('mds-table-row').then(async () => {
+    const rows = ['2026/0097', '2026/0094'].map((value) => table.querySelector(`mds-table-row[value="${value}"]`));
+    await Promise.all(rows.map((row) => row.componentOnReady()));
+    rows.forEach((row) => (row.selected = true));
+  });
+</script>

package/agents/patterns/previews/labels-and-values/data-of-a-contact.html

@@ -0,0 +1,31 @@
+<!--
+try: Look at Dati anagrafici: four short data in two columns as wide as the column of a form, one under the other on a phone; the address takes the whole row, and Stato civile says Non indicato in the muted foreground.
+-->
+<div class="grid gap-between-sections">
+  <mds-text typography="page" tag="h1">Mario Rossi</mds-text>
+  <section class="grid gap-title-content">
+    <mds-text typography="section" tag="h2">Dati anagrafici</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">Codice fiscale</mds-text>
+        <mds-text tag="dd" class="m-0">RSSMRA80A01H294X</mds-text>
+      </div>
+      <div class="grid gap-label-control">
+        <mds-text typography="label" tag="dt" class="text-fg-muted">Nato il</mds-text>
+        <mds-text tag="dd" class="m-0">1 gennaio 1980</mds-text>
+      </div>
+      <div class="grid gap-label-control">
+        <mds-text typography="label" tag="dt" class="text-fg-muted">Luogo di nascita</mds-text>
+        <mds-text tag="dd" class="m-0">Rimini</mds-text>
+      </div>
+      <div class="grid gap-label-control">
+        <mds-text typography="label" tag="dt" class="text-fg-muted">Stato civile</mds-text>
+        <mds-text tag="dd" class="m-0 text-fg-muted">Non indicato</mds-text>
+      </div>
+      <div class="col-span-full grid gap-label-control">
+        <mds-text typography="label" tag="dt" class="text-fg-muted">Residenza</mds-text>
+        <mds-text tag="dd" class="m-0">Via Roma 21<br>47921 Rimini (RN)</mds-text>
+      </div>
+    </dl>
+  </section>
+</div>

package/agents/patterns/previews/labels-and-values/payment-before-paying.html

@@ -0,0 +1,21 @@
+<!--
+try: Look at the data of the payment above Paga: Richiesta and Importo side by side in the column of the form, one under the other on a phone, with no title of their own.
+-->
+<div class="grid gap-between-sections">
+  <mds-text typography="page" tag="h1">Pagamento del bollo</mds-text>
+  <form class="@container grid max-w-form gap-content-actions">
+    <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">Richiesta</mds-text>
+        <mds-text tag="dd" class="m-0">2026/0412</mds-text>
+      </div>
+      <div class="grid gap-label-control">
+        <mds-text typography="label" tag="dt" class="text-fg-muted">Importo</mds-text>
+        <mds-text tag="dd" class="m-0">16,00 euro con pagoPA</mds-text>
+      </div>
+    </dl>
+    <div class="flex justify-end gap-inline">
+      <mds-button>Paga</mds-button>
+    </div>
+  </form>
+</div>

package/agents/patterns/previews/labels-and-values/what-is-sent.html

@@ -0,0 +1,25 @@
+<!--
+try: Look at the dialog that asks before sending the reminder: Destinatario and Testo as labels and values in the window, with no title of their own; the text takes the whole row.
+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/list-with-filters/act-on-many.html

@@ -0,0 +1,121 @@
+<!--
+try: Look at the two rows selected on the page: the bar of the table says how many and offers Assegna and Archivia. Press Archivia: the list loads again on the same page without them, and a toast says how many went.
+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">Pratiche</mds-button>
+    <mds-button slot="nav" href="#" variant="dark" tone="text">Contatti</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">Pratiche</mds-button>
+    <mds-button href="#" variant="dark" tone="text" class="w-full justify-start">Contatti</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 grid gap-between-sections py-between-sections">
+  <header class="@container flex flex-wrap items-start justify-between gap-inline">
+    <div class="grid min-w-0 grow basis-actions gap-title-content">
+      <mds-text typography="page" tag="h1">Pratiche</mds-text>
+      <mds-text typography="detail" tag="p" class="text-fg-muted">Le pratiche che i cittadini inviano agli uffici.</mds-text>
+    </div>
+    <div class="flex gap-inline @max-actions:basis-full @max-actions:flex-col @max-actions:*:self-stretch">
+      <mds-button variant="dark" tone="outline">Esporta</mds-button>
+      <mds-button>Nuova pratica</mds-button>
+    </div>
+  </header>
+  <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">
+          <mds-input type="search" name="q" placeholder="Numero o oggetto"></mds-input>
+        </mds-input-field>
+      </div>
+      <mds-filter label="Stato" class="justify-self-start">
+        <mds-filter-item id="tutte" label="Tutte" value="" count="128"></mds-filter-item>
+        <mds-filter-item label="Nuove" value="nuova" count="31"></mds-filter-item>
+        <mds-filter-item id="in-lavorazione" label="In lavorazione" value="in-lavorazione" count="14" selected></mds-filter-item>
+        <mds-filter-item label="In attesa" value="in-attesa" count="12"></mds-filter-item>
+        <mds-filter-item label="Chiuse" value="chiusa" count="71"></mds-filter-item>
+      </mds-filter>
+    </form>
+    <div class="grid gap-between-fields">
+      <div class="grid gap-title-content">
+        <div class="flex flex-wrap items-center gap-inline">
+          <mds-text id="summary" typography="detail" tag="p" role="status">11-14 di 14 pratiche</mds-text>
+          <mds-button variant="dark" tone="text" size="sm">Rimuovi i filtri</mds-button>
+        </div>
+        <mds-table id="pratiche" selectable sorting="external" class="w-full [&_mds-table-cell]:text-nowrap [&_mds-text]:text-nowrap">
+          <mds-table-header>
+            <mds-table-header-cell label="Numero" sortable sort-key="numero"></mds-table-header-cell>
+            <mds-table-header-cell label="Oggetto"></mds-table-header-cell>
+            <mds-table-header-cell label="Richiedente"></mds-table-header-cell>
+            <mds-table-header-cell label="Ricevuta il" sortable sort-key="ricevuta" direction="descending"></mds-table-header-cell>
+          </mds-table-header>
+          <mds-table-body>
+            <mds-table-row value="2026/0101">
+              <mds-table-cell><mds-text typography="detail"><mds-link href="#">2026/0101</mds-link></mds-text></mds-table-cell>
+              <mds-table-cell><mds-text typography="detail">Cambio di residenza</mds-text></mds-table-cell>
+              <mds-table-cell><mds-text typography="detail">Giulia Bianchi</mds-text></mds-table-cell>
+              <mds-table-cell><mds-text typography="detail">16 febbraio 2026</mds-text></mds-table-cell>
+            </mds-table-row>
+            <mds-table-row value="2026/0097">
+              <mds-table-cell><mds-text typography="detail"><mds-link href="#">2026/0097</mds-link></mds-text></mds-table-cell>
+              <mds-table-cell><mds-text typography="detail">Iscrizione anagrafica</mds-text></mds-table-cell>
+              <mds-table-cell><mds-text typography="detail">Luca Ferri</mds-text></mds-table-cell>
+              <mds-table-cell><mds-text typography="detail">13 febbraio 2026</mds-text></mds-table-cell>
+            </mds-table-row>
+            <mds-table-row value="2026/0094">
+              <mds-table-cell><mds-text typography="detail"><mds-link href="#">2026/0094</mds-link></mds-text></mds-table-cell>
+              <mds-table-cell><mds-text typography="detail">Certificato di residenza</mds-text></mds-table-cell>
+              <mds-table-cell><mds-text typography="detail">Marco Rossi</mds-text></mds-table-cell>
+              <mds-table-cell><mds-text typography="detail">12 febbraio 2026</mds-text></mds-table-cell>
+            </mds-table-row>
+            <mds-table-row value="2026/0090">
+              <mds-table-cell><mds-text typography="detail"><mds-link href="#">2026/0090</mds-link></mds-text></mds-table-cell>
+              <mds-table-cell><mds-text typography="detail">Cambio di indirizzo</mds-text></mds-table-cell>
+              <mds-table-cell><mds-text typography="detail">Anna Conti</mds-text></mds-table-cell>
+              <mds-table-cell><mds-text typography="detail">10 febbraio 2026</mds-text></mds-table-cell>
+            </mds-table-row>
+          </mds-table-body>
+          <mds-button slot="batch-action" variant="dark" tone="outline" size="sm">Assegna</mds-button>
+          <mds-button id="archivia" slot="batch-action" variant="primary" tone="outline" size="sm">Archivia</mds-button>
+        </mds-table>
+      </div>
+      <mds-paginator pages="2" current-page="2" class="justify-self-start"></mds-paginator>
+    </div>
+  </div>
+</main>
+<mds-toast-region>
+  <mds-toast id="esito">2 pratiche archiviate</mds-toast>
+</mds-toast-region>
+<script>
+  const table = document.getElementById('pratiche');
+  // two rows the person has ticked; a row selected in the markup is not counted by the table
+  customElements.whenDefined('mds-table-row').then(async () => {
+    const rows = ['2026/0097', '2026/0094'].map((value) => table.querySelector(`mds-table-row[value="${value}"]`));
+    await Promise.all(rows.map((row) => row.componentOnReady()));
+    rows.forEach((row) => (row.selected = true));
+  });
+  document.getElementById('archivia').addEventListener('click', () => {
+    const gone = [...table.querySelectorAll('mds-table-row[selected]')];
+    table.selectAll(false);
+    gone.forEach((row) => row.remove());
+    const left = 14 - gone.length;
+    document.getElementById('summary').textContent = `11-${left} di ${left} pratiche`;
+    document.getElementById('in-lavorazione').setAttribute('count', String(left));
+    document.getElementById('tutte').setAttribute('count', String(128 - gone.length));
+    document.getElementById('esito').visible = true;
+  });
+</script>