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

package/agents/patterns/previews/list-with-filters/find-and-open.html

@@ -0,0 +1,109 @@
+<!--
+try: Look at the order of the list: the search form, 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.
+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>
+        <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>
+</main>

package/agents/patterns/previews/list-with-filters/show-new-items.html

@@ -0,0 +1,132 @@
+<!--
+try: Look at the end of the line of the summary: 2 practices arrived while the list was open, and nothing above or below moved. Wait a few seconds: a third arrives, the count in the dot grows and the dot pulses three times. Press Mostra: the list loads again with the same search, and the line empties without giving up its place.
+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 id="titolo" typography="page" tag="h1" tabindex="-1">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 id="stato-nuove" label="Nuove" value="nuova" count="4" 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="71"></mds-filter-item>
+      </mds-filter>
+    </form>
+    <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">4 pratiche</mds-text>
+          <mds-button variant="dark" tone="text" size="sm">Rimuovi i filtri</mds-button>
+        </div>
+        <div 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="nuove" 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="descending"></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/0139</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">2 marzo 2026</mds-text></mds-table-cell>
+          </mds-table-row>
+          <mds-table-row>
+            <mds-table-cell><mds-text typography="detail"><mds-link href="#">2026/0137</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">2 marzo 2026</mds-text></mds-table-cell>
+          </mds-table-row>
+          <mds-table-row>
+            <mds-table-cell><mds-text typography="detail"><mds-link href="#">2026/0136</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">1 marzo 2026</mds-text></mds-table-cell>
+          </mds-table-row>
+          <mds-table-row>
+            <mds-table-cell><mds-text typography="detail"><mds-link href="#">2026/0131</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">27 febbraio 2026</mds-text></mds-table-cell>
+          </mds-table-row>
+        </mds-table-body>
+      </mds-table>
+    </div>
+  </div>
+</main>
+<script>
+  const arrived = [
+    ['2026/0143', 'Cambio di residenza', 'Paolo Neri'],
+    ['2026/0142', 'Stato di famiglia', 'Sara Galli'],
+  ];
+  const cell = (text) => `<mds-table-cell><mds-text typography="detail">${text}</mds-text></mds-table-cell>`;
+  // a third practice arrives while the list is open: the count in the dot grows and the dot pulses
+  const arriving = setTimeout(() => {
+    arrived.unshift(['2026/0144', 'Carta di identità', 'Elena Fontana']);
+    document.getElementById('punto').value = arrived.length;
+  }, 4000);
+  document.getElementById('mostra').addEventListener('click', (event) => {
+    clearTimeout(arriving);
+    const rows = arrived.map(
+      ([number, subject, person]) =>
+        `<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('3 marzo 2026')}</mds-table-row>`,
+    );
+    document.getElementById('righe').insertAdjacentHTML('afterbegin', rows.join(''));
+    document.getElementById('summary').textContent = `${4 + arrived.length} pratiche`;
+    document.getElementById('stato-nuove').setAttribute('count', `${4 + arrived.length}`);
+    document.getElementById('tutte').setAttribute('count', `${128 + arrived.length}`);
+    // the line empties but keeps its place (Mostra hidden, not removed): the results never move
+    document.getElementById('nuove').textContent = '';
+    document.getElementById('punto').dismissed = true;
+    event.currentTarget.style.visibility = 'hidden';
+    // Mostra is gone: the focus goes to the heading of the page
+    document.getElementById('titolo').focus();
+  });
+</script>

package/agents/patterns/previews/loading/await-and-say.html

@@ -0,0 +1,41 @@
+<!--
+try: Press Paga: the button waits and a sentence beside it says the payment is under way and may be slow; there is no Annulla, since a payment sent cannot be called back.
+-->
+<div class="grid gap-between-sections">
+  <mds-text typography="page" tag="h1">Pagamento del bollo</mds-text>
+  <form id="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 items-center justify-end gap-inline">
+      <div role="status" class="min-w-0 flex-1">
+        <div id="waiting" class="invisible">
+          <mds-text id="say" typography="detail" tag="p">Pagamento in corso: può richiedere fino a un minuto.</mds-text>
+        </div>
+      </div>
+      <mds-button id="pay">Paga</mds-button>
+    </div>
+  </form>
+</div>
+<script>
+  const pay = document.getElementById('pay');
+  const waiting = document.getElementById('waiting');
+  const say = document.getElementById('say');
+  document.getElementById('form').addEventListener('submit', (event) => {
+    event.preventDefault();
+    pay.await = true;
+    // the line keeps its place while hidden, so its arrival moves nothing
+    waiting.classList.remove('invisible');
+    setTimeout(() => {
+      pay.await = undefined;
+      say.textContent = 'Pagamento eseguito.';
+    }, 6000);
+  });
+</script>

package/agents/patterns/previews/loading/await-the-control.html

@@ -0,0 +1,28 @@
+<!--
+try: Press Salva: the button waits with its spinner and keeps the focus, a second press does nothing, and after three seconds it is ready again.
+-->
+<div class="grid gap-between-sections">
+  <mds-text typography="page" tag="h1">Recapiti</mds-text>
+  <form id="form" class="@container grid max-w-form gap-content-actions">
+    <div class="grid gap-between-fields">
+      <mds-input-field label="PEC">
+        <mds-input type="email" value="giulia.bianchi@pec.it"></mds-input>
+      </mds-input-field>
+      <mds-input-field label="Telefono">
+        <mds-input type="tel" value="0541 620 112"></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.await = true;
+    setTimeout(() => (save.await = undefined), 3000);
+  });
+</script>

package/agents/patterns/previews/loading/first-load.html

@@ -0,0 +1,10 @@
+<!--
+try: Look at the list of Richieste opening for the first time: its place is a well as tall as the rows to come, with the spinner in the middle, aria-busy until the rows come.
+-->
+<div class="grid gap-between-sections">
+  <mds-text typography="page" tag="h1">Richieste</mds-text>
+  <!-- Magma gap: no skeleton; the well keeps the place of the rows, so the page does not jump when they come -->
+  <div aria-busy="true" class="grid min-h-6000 place-items-center rounded-md bg-surface-muted">
+    <mds-spinner running></mds-spinner>
+  </div>
+</div>

package/agents/patterns/previews/loading/keep-while-reloading.html

@@ -0,0 +1,80 @@
+<!--
+try: Type Ferr in Cerca: the field waits with its spinner while the three requests stay on screen, then the list narrows to the two that match, with what was searched marked in each.
+-->
+<div class="grid gap-between-sections">
+  <mds-text typography="page" tag="h1">Richieste</mds-text>
+  <div class="grid gap-between-groups">
+    <form id="find" 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 id="search" type="search" name="q"></mds-input>
+        </mds-input-field>
+      </div>
+    </form>
+    <div class="grid gap-title-content">
+      <mds-text id="summary" typography="detail" tag="p" role="status">3 richieste</mds-text>
+      <mds-table id="results" class="w-full [&_mds-table-cell]:text-nowrap [&_mds-text]:text-nowrap">
+        <mds-table-header>
+          <mds-table-header-cell label="Protocollo"></mds-table-header-cell>
+          <mds-table-header-cell label="Richiedente"></mds-table-header-cell>
+        </mds-table-header>
+        <mds-table-body>
+          <mds-table-row>
+            <mds-table-cell><mds-text typography="detail"><mds-link href="#">2026/0412</mds-link></mds-text></mds-table-cell>
+            <mds-table-cell><mds-text typography="detail">Giulia Bianchi</mds-text></mds-table-cell>
+          </mds-table-row>
+          <mds-table-row>
+            <mds-table-cell><mds-text typography="detail"><mds-link href="#">2026/0398</mds-link></mds-text></mds-table-cell>
+            <mds-table-cell><mds-text typography="detail">Luca Ferri</mds-text></mds-table-cell>
+          </mds-table-row>
+          <mds-table-row>
+            <mds-table-cell><mds-text typography="detail"><mds-link href="#">2026/0371</mds-link></mds-text></mds-table-cell>
+            <mds-table-cell><mds-text typography="detail">Anna Ferrari</mds-text></mds-table-cell>
+          </mds-table-row>
+        </mds-table-body>
+      </mds-table>
+    </div>
+  </div>
+</div>
+<script>
+  const search = document.getElementById('search');
+  const results = document.getElementById('results');
+  const summary = document.getElementById('summary');
+  let pause;
+  let latest = 0;
+  // what was searched, marked in the text of a cell: built from text nodes, never from markup;
+  // the number is a link, and mds-link takes text only in its slot, so it is left unmarked
+  const mark = (text, query) => {
+    const whole = text.dataset.text ?? (text.dataset.text = text.textContent);
+    const at = query ? whole.toLowerCase().indexOf(query) : -1;
+    if (at < 0) return void (text.textContent = whole);
+    const marked = document.createElement('mark');
+    marked.className = 'bg-warning-surface text-inherit';
+    marked.textContent = whole.slice(at, at + query.length);
+    text.replaceChildren(whole.slice(0, at), marked, whole.slice(at + query.length));
+  };
+  document.getElementById('find').addEventListener('submit', (event) => event.preventDefault());
+  search.addEventListener('mdsInputChange', () => {
+    clearTimeout(pause);
+    pause = setTimeout(() => {
+      const query = String(search.value ?? '').trim().toLowerCase();
+      const asked = ++latest;
+      search.await = true;
+      results.setAttribute('aria-busy', 'true');
+      setTimeout(() => {
+        // a newer search has started: this answer is dropped
+        if (asked !== latest) return;
+        let shown = 0;
+        for (const row of results.querySelectorAll('mds-table-row')) {
+          const match = row.textContent.toLowerCase().includes(query);
+          row.hidden = !match;
+          if (match) shown++;
+          for (const text of row.querySelectorAll('mds-text:not(:has(mds-link))')) mark(text, query);
+        }
+        summary.textContent = shown === 1 ? '1 richiesta' : `${shown} richieste`;
+        search.await = undefined;
+        results.removeAttribute('aria-busy');
+      }, 1500);
+    }, 300);
+  });
+</script>

package/agents/patterns/previews/loading/long-load-measured.html

@@ -0,0 +1,16 @@
+<!--
+try: Look at the dashboard while its panels load: in the well of a load, the spinner, a sentence that says what is happening and how far it is, and a bar that fills as the panels arrive.
+-->
+<div class="grid gap-between-sections">
+  <mds-text typography="page" tag="h1">Cruscotto</mds-text>
+  <div aria-busy="true" class="grid min-h-6000 content-center justify-items-center gap-label-control rounded-md bg-surface-muted p-inset text-center">
+    <mds-spinner running></mds-spinner>
+    <mds-text typography="detail" tag="p">Caricamento dei riquadri del cruscotto: 7 di 12.</mds-text>
+    <mds-progress
+      class="w-full max-w-form"
+      progress="0.58"
+      steps="Inizio,Un quarto,Metà,Tre quarti,Fine"
+      aria-label="Caricamento dei riquadri"
+    ></mds-progress>
+  </div>
+</div>

package/agents/patterns/previews/loading/long-load.html

@@ -0,0 +1,12 @@
+<!--
+try: Look at the yearly report being computed: the well and the spinner of a short load, with a sentence under it that says what is happening and how long it takes.
+-->
+<div class="grid gap-between-sections">
+  <mds-text typography="page" tag="h1">Riepilogo 2026</mds-text>
+  <div aria-busy="true" class="grid min-h-6000 content-center justify-items-center gap-label-control rounded-md bg-surface-muted p-inset text-center">
+    <mds-spinner running></mds-spinner>
+    <mds-text typography="detail" tag="p">
+      Calcolo del riepilogo delle richieste dell'anno: può richiedere un minuto.
+    </mds-text>
+  </div>
+</div>

package/agents/patterns/previews/loading/progress-in-place.html

@@ -0,0 +1,52 @@
+<!--
+try: Press Allega file: the button waits, a bar beside it fills as the file is sent and a sentence under it says how much; Interrompi stops the upload, and the sentence says the file is not attached.
+-->
+<form class="grid max-w-form gap-between-fields">
+  <mds-input-field label="Oggetto">
+    <mds-input value="Agibilità dell'immobile in via Emilia 12"></mds-input>
+  </mds-input-field>
+  <div class="grid gap-label-control">
+    <mds-text typography="label" tag="p">Planimetria</mds-text>
+    <div class="flex items-center gap-inline">
+      <mds-button id="upload" type="button" variant="dark" tone="outline" icon="mi/baseline/upload">Allega file</mds-button>
+      <mds-progress
+        id="bar"
+        class="hidden flex-1"
+        steps="Inizio,Un quarto,Metà,Tre quarti,Fine"
+        aria-label="Invio di planimetria.pdf"
+      ></mds-progress>
+      <mds-button id="stop" type="button" variant="dark" tone="outline" class="hidden">Interrompi</mds-button>
+    </div>
+    <mds-text id="say" typography="detail" tag="p" class="text-fg-muted">PDF, al massimo 10 MB.</mds-text>
+  </div>
+</form>
+<script>
+  const upload = document.getElementById('upload');
+  const bar = document.getElementById('bar');
+  const stop = document.getElementById('stop');
+  const say = document.getElementById('say');
+  let timer;
+  const show = (sending) => {
+    upload.await = sending || undefined;
+    bar.classList.toggle('hidden', !sending);
+    stop.classList.toggle('hidden', !sending);
+  };
+  const send = (mb) => {
+    bar.progress = mb / 8;
+    say.textContent = `Invio di planimetria.pdf: ${mb} MB di 8.`;
+    if (mb < 8) timer = setTimeout(() => send(mb + 2), 1500);
+    else {
+      show(false);
+      say.textContent = 'Allegato: planimetria.pdf, 8 MB.';
+    }
+  };
+  upload.addEventListener('click', () => {
+    show(true);
+    send(2);
+  });
+  stop.addEventListener('click', () => {
+    clearTimeout(timer);
+    show(false);
+    say.textContent = 'Invio interrotto: il file non è allegato.';
+  });
+</script>

package/agents/patterns/previews/loading/run-in-background.html

@@ -0,0 +1,24 @@
+<!--
+try: Press Esporta: the button does not wait, and a toast says the export has started and that a message will say when the file is ready.
+height: 300
+-->
+<div class="flex flex-wrap items-start justify-between gap-inline">
+  <div class="grid min-w-0 gap-title-content">
+    <mds-text typography="page" tag="h1">Richieste</mds-text>
+    <mds-text typography="detail" tag="p" class="text-fg-muted">10.482 richieste dal 2020.</mds-text>
+  </div>
+  <div class="flex gap-inline">
+    <mds-button id="export" variant="dark" tone="outline" icon="mi/baseline/download">Esporta</mds-button>
+    <mds-button>Nuova richiesta</mds-button>
+  </div>
+</div>
+<mds-toast-region>
+  <mds-toast id="toast" variant="info">Esportazione avviata: ti avvisiamo quando il file è pronto.</mds-toast>
+</mds-toast-region>
+<script>
+  const toast = document.getElementById('toast');
+  document.getElementById('export').addEventListener('click', () => {
+    toast.visible = undefined;
+    toast.visible = true;
+  });
+</script>

package/agents/patterns/previews/message-placement/action-done-elsewhere.html

@@ -0,0 +1,38 @@
+<!--
+try: Press Salva: the dialog closes and a toast says what was saved; Modifica azienda opens it again.
+height: 400
+-->
+<mds-button id="open">Modifica azienda</mds-button>
+<mds-modal id="dialog" opened aria-label="Modifica azienda">
+  <mds-banner slot="window" variant="light" tone="box" dismissible headline="Modifica azienda">
+    <form class="grid gap-between-fields">
+      <mds-input-field label="Ragione sociale">
+        <mds-input id="name" value="Maggioli SpA"></mds-input>
+      </mds-input-field>
+    </form>
+    <mds-button id="cancel" slot="action" variant="dark" tone="outline">Annulla</mds-button>
+    <mds-button id="save" slot="action">Salva</mds-button>
+  </mds-banner>
+</mds-modal>
+<mds-toast-region>
+  <mds-toast id="toast" variant="success">Maggioli SpA salvata</mds-toast>
+</mds-toast-region>
+<script>
+  const dialog = document.getElementById('dialog');
+  const toast = document.getElementById('toast');
+  let saved = false;
+  document.getElementById('open').addEventListener('click', () => (dialog.opened = true));
+  document.getElementById('cancel').addEventListener('click', () => dialog.close());
+  dialog.addEventListener('mdsModalClose', () => (dialog.opened = undefined));
+  // the toast waits for the dialog to be gone: never a toast over an open dialog
+  dialog.addEventListener('mdsModalHide', () => {
+    if (!saved) return;
+    saved = false;
+    toast.firstChild.data = `${document.getElementById('name').value} salvata`;
+    toast.visible = true;
+  });
+  document.getElementById('save').addEventListener('click', () => {
+    saved = true;
+    dialog.close();
+  });
+</script>

package/agents/patterns/previews/message-placement/action-done-in-page.html

@@ -0,0 +1,53 @@
+<!--
+try: Press Salva in the bar: the edit closes, the page shows the record again with the new name in its title, and a toast says it was saved; Modifica opens the edit again.
+height: 400
+-->
+<div id="view" hidden>
+  <header class="flex flex-wrap items-start justify-between gap-inline">
+    <div class="grid gap-title-content">
+      <mds-text id="title" typography="page" tag="h1" tabindex="-1">Maggioli SpA</mds-text>
+      <mds-text typography="detail" tag="p" class="text-fg-muted">Cliente dal 2019, sede a Santarcangelo di Romagna.</mds-text>
+    </div>
+    <mds-button id="edit">Modifica</mds-button>
+  </header>
+</div>
+<form id="form">
+  <div class="grid gap-between-sections">
+    <mds-text typography="page" tag="h1">Modifica azienda</mds-text>
+    <div class="grid max-w-form gap-between-fields">
+      <mds-input-field label="Ragione sociale">
+        <mds-input id="name" value="Maggioli Editore SpA"></mds-input>
+      </mds-input-field>
+    </div>
+  </div>
+  <mds-status-bar id="bar" visible description="Modifiche non salvate">
+    <mds-button id="cancel" type="button" variant="dark" tone="outline">Annulla</mds-button>
+    <mds-button id="save" type="submit">Salva</mds-button>
+  </mds-status-bar>
+</form>
+<mds-toast-region>
+  <mds-toast id="toast" variant="success">Dati di Maggioli SpA salvati</mds-toast>
+</mds-toast-region>
+<script>
+  const view = document.getElementById('view');
+  const form = document.getElementById('form');
+  const bar = document.getElementById('bar');
+  const title = document.getElementById('title');
+  const toast = document.getElementById('toast');
+  const show = (editing) => {
+    view.hidden = editing;
+    form.hidden = !editing;
+    bar.visible = editing || undefined;
+  };
+  document.getElementById('edit').addEventListener('click', () => show(true));
+  document.getElementById('cancel').addEventListener('click', () => show(false));
+  form.addEventListener('submit', (event) => {
+    event.preventDefault();
+    title.textContent = document.getElementById('name').value;
+    show(false);
+    title.focus();
+    // the new name shows in the title and in every part of the page: the outcome goes in a toast
+    toast.firstChild.data = `Dati di ${title.textContent} salvati`;
+    toast.visible = true;
+  });
+</script>