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

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

@@ -0,0 +1,42 @@
+<!--
+try: Press Salva in Notifiche: the confirmation shows inside that card, right above its row, and stays until the next change in it; Profilo does not move.
+-->
+<div class="grid gap-between-containers">
+  <form id="form">
+    <mds-card>
+      <mds-card-header>
+        <mds-text typography="part" tag="h2">Notifiche</mds-text>
+      </mds-card-header>
+      <mds-card-content>
+        <div class="grid gap-between-fields">
+          <mds-input-switch name="email" value="1" checked>Avvisi via email</mds-input-switch>
+          <mds-input-switch id="sms" name="sms" value="1">Avvisi via SMS</mds-input-switch>
+          <mds-banner id="done" variant="success" tone="strong" headline="Notifiche salvate" class="hidden">
+            <mds-text>Valgono da subito per i prossimi avvisi.</mds-text>
+          </mds-banner>
+        </div>
+      </mds-card-content>
+      <mds-card-footer>
+        <mds-button id="save" type="submit" variant="primary" tone="outline">Salva</mds-button>
+      </mds-card-footer>
+    </mds-card>
+  </form>
+  <mds-card>
+    <mds-card-header>
+      <mds-text typography="part" tag="h2">Profilo</mds-text>
+    </mds-card-header>
+    <mds-card-content>
+      <mds-text>Anna Rossi, ufficio tributi.</mds-text>
+    </mds-card-content>
+  </mds-card>
+</div>
+<script>
+  const form = document.getElementById('form');
+  const done = document.getElementById('done');
+  // Magma gap: no light confirmation that goes away; the banner stays until the next change
+  form.addEventListener('mdsInputSwitchChange', () => done.classList.add('hidden'));
+  form.addEventListener('submit', (event) => {
+    event.preventDefault();
+    done.classList.remove('hidden');
+  });
+</script>

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

@@ -0,0 +1,40 @@
+<!--
+try: Press Invia promemoria in the open menu of Bianchi Anna: the menu closes, the sending fails, and a toast that stays says so, with Riprova.
+height: 400
+-->
+<div class="grid gap-title-content">
+  <mds-text typography="page" tag="h1">Iscritti al corso</mds-text>
+  <div class="grid">
+    <div class="flex items-center justify-between gap-inline">
+      <mds-text>Rossi Mario</mds-text>
+      <mds-button icon="mi/baseline/more-vert" variant="dark" tone="text" aria-label="Azioni di Rossi Mario"></mds-button>
+    </div>
+    <div class="flex items-center justify-between gap-inline">
+      <mds-text>Bianchi Anna</mds-text>
+      <mds-button id="actions" icon="mi/baseline/more-vert" variant="dark" tone="text" aria-label="Azioni di Bianchi Anna"></mds-button>
+    </div>
+  </div>
+</div>
+<mds-dropdown id="menu" target="#actions" placement="bottom-end" visible>
+  <mds-button id="remind" icon="mi/baseline/send" variant="dark" tone="text" label="Invia promemoria"></mds-button>
+</mds-dropdown>
+<mds-toast-region>
+  <mds-toast id="failed" variant="error" duration="0" dismissible>
+    Promemoria a Bianchi Anna non inviato
+    <mds-button id="retry" slot="action" size="sm" variant="error" tone="outline">Riprova</mds-button>
+  </mds-toast>
+  <mds-toast id="sent" variant="success">Promemoria inviato a Bianchi Anna</mds-toast>
+</mds-toast-region>
+<script>
+  const menu = document.getElementById('menu');
+  const failed = document.getElementById('failed');
+  // the first sending fails, the second works
+  document.getElementById('remind').addEventListener('click', () => {
+    menu.visible = false;
+    failed.visible = true;
+  });
+  document.getElementById('retry').addEventListener('click', () => {
+    failed.visible = undefined;
+    document.getElementById('sent').visible = true;
+  });
+</script>

package/agents/patterns/previews/message-placement/action-failed-in-place.html

@@ -0,0 +1,31 @@
+<!--
+try: Press Salva: the error shows right above the row of the dialog, what was written stays, and the focus stays on Salva, the way to try again.
+height: 480
+-->
+<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 value="Maggioli SpA"></mds-input>
+      </mds-input-field>
+      <mds-banner id="message" variant="error" tone="strong" headline="Salvataggio non riuscito" class="hidden">
+        <mds-text>Il server non risponde. I dati sono ancora qui: riprova.</mds-text>
+      </mds-banner>
+    </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>
+<script>
+  const dialog = document.getElementById('dialog');
+  const message = document.getElementById('message');
+  document.getElementById('open').addEventListener('click', () => {
+    message.classList.add('hidden');
+    dialog.opened = true;
+  });
+  dialog.addEventListener('mdsModalClose', () => (dialog.opened = undefined));
+  document.getElementById('cancel').addEventListener('click', () => dialog.close());
+  // the save fails: the error goes right above the row, and the focus stays on Salva
+  document.getElementById('save').addEventListener('click', () => message.classList.remove('hidden'));
+</script>

package/agents/patterns/previews/message-placement/action-later.html

@@ -0,0 +1,24 @@
+<!--
+try: Look at the toast: the export started minutes ago is ready, with Scarica, and stays until the person acts or sends it away; Esporta starts another.
+height: 360
+-->
+<header class="flex flex-wrap items-start justify-between gap-inline">
+  <mds-text typography="page" tag="h1">Pratiche di ottobre</mds-text>
+  <mds-button id="export">Esporta</mds-button>
+</header>
+<mds-toast-region>
+  <mds-toast id="ready" variant="success" duration="0" dismissible visible>
+    Esportazione delle pratiche di ottobre pronta
+    <mds-button id="download" slot="action" size="sm" variant="success" tone="outline">Scarica</mds-button>
+  </mds-toast>
+  <mds-toast id="started" variant="info">Esportazione avviata: ti avvisiamo quando è pronta</mds-toast>
+</mds-toast-region>
+<script>
+  const ready = document.getElementById('ready');
+  // the export takes minutes: the preview shows its outcome already there, and Esporta starts it again
+  document.getElementById('download').addEventListener('click', () => (ready.visible = undefined));
+  document.getElementById('export').addEventListener('click', () => {
+    ready.visible = undefined;
+    document.getElementById('started').visible = true;
+  });
+</script>

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

@@ -0,0 +1,33 @@
+<!--
+try: Press Invia promemoria a tutti in the open menu of the course: the menu closes, and a toast that stays says how many were sent and offers to send the 2 that failed again.
+height: 400
+-->
+<header class="flex flex-wrap items-start justify-between gap-inline">
+  <div class="grid gap-title-content">
+    <mds-text typography="page" tag="h1">Iscritti al corso</mds-text>
+    <mds-text typography="detail" tag="p" class="text-fg-muted">6 iscritti, 2 senza conferma di presenza.</mds-text>
+  </div>
+  <mds-button id="actions" icon="mi/baseline/more-vert" variant="dark" tone="text" aria-label="Azioni del corso"></mds-button>
+</header>
+<mds-dropdown id="menu" target="#actions" placement="bottom-end" visible>
+  <mds-button id="remind" icon="mi/baseline/send" variant="dark" tone="text" label="Invia promemoria a tutti"></mds-button>
+</mds-dropdown>
+<mds-toast-region>
+  <mds-toast id="partial" variant="error" duration="0" dismissible>
+    Promemoria inviati a 4 iscritti su 6, non a 2
+    <mds-button id="retry" slot="action" size="sm" variant="error" tone="outline">Riprova per 2</mds-button>
+  </mds-toast>
+  <mds-toast id="sent" variant="success">Promemoria inviati anche a Bianchi Anna e Neri Paola</mds-toast>
+</mds-toast-region>
+<script>
+  const menu = document.getElementById('menu');
+  const partial = document.getElementById('partial');
+  document.getElementById('remind').addEventListener('click', () => {
+    menu.visible = false;
+    partial.visible = true;
+  });
+  document.getElementById('retry').addEventListener('click', () => {
+    partial.visible = undefined;
+    document.getElementById('sent').visible = true;
+  });
+</script>

package/agents/patterns/previews/message-placement/action-partial-in-place.html

@@ -0,0 +1,51 @@
+<!--
+try: Press Archivia tutte: 4 requests leave the list, 2 do not; the message above the list says how many, and the 2 stay marked in the list.
+-->
+<div class="grid gap-between-sections">
+  <header class="flex flex-wrap items-start justify-between gap-inline">
+    <mds-text typography="page" tag="h1">Pratiche concluse</mds-text>
+    <mds-button id="archive">Archivia tutte</mds-button>
+  </header>
+  <div class="grid gap-between-fields">
+    <mds-banner id="message" variant="error" tone="strong" headline="4 pratiche archiviate, 2 no" class="hidden">
+      <mds-text>Le 2 non archiviate sono segnate qui sotto. Il server non ha risposto: riprova.</mds-text>
+      <mds-button id="retry" slot="action" variant="error" tone="strong">Riprova per 2</mds-button>
+    </mds-banner>
+    <mds-list id="list">
+      <mds-list-item data-file="2026/114">2026/114, Rossi Mario: conclusa</mds-list-item>
+      <mds-list-item data-file="2026/118">2026/118, Bianchi Anna: conclusa</mds-list-item>
+      <mds-list-item data-file="2026/121">2026/121, Verdi Luca: conclusa</mds-list-item>
+      <mds-list-item data-file="2026/125">2026/125, Neri Paola: conclusa</mds-list-item>
+      <mds-list-item data-file="2026/130">2026/130, Gallo Marco: conclusa</mds-list-item>
+      <mds-list-item data-file="2026/133">2026/133, Costa Elena: conclusa</mds-list-item>
+    </mds-list>
+  </div>
+</div>
+<script>
+  const archive = document.getElementById('archive');
+  const retry = document.getElementById('retry');
+  const message = document.getElementById('message');
+  const failing = ['2026/118', '2026/125'];
+  const items = () => [...document.querySelectorAll('#list mds-list-item')];
+  archive.addEventListener('click', () => {
+    archive.await = true;
+    setTimeout(() => {
+      archive.await = undefined;
+      items().forEach((item) => {
+        if (!failing.includes(item.dataset.file)) return item.remove();
+        const badge = document.createElement('mds-badge');
+        badge.variant = 'error';
+        badge.label = 'Non archiviata';
+        item.append(' ', badge);
+      });
+      message.classList.remove('hidden');
+    }, 300);
+  });
+  retry.addEventListener('click', () => {
+    retry.await = true;
+    setTimeout(() => {
+      items().forEach((item) => item.remove());
+      message.classList.add('hidden');
+    }, 300);
+  });
+</script>

package/agents/patterns/previews/message-placement/action-taken.html

@@ -0,0 +1,25 @@
+<!--
+try: Press Invia richiesta: a toast says the request is taken in charge and how the answer will come, then leaves.
+height: 480
+-->
+<div class="grid gap-between-sections">
+  <mds-text typography="page" tag="h1">Richiesta di assistenza</mds-text>
+  <form id="form" class="@container grid max-w-form gap-content-actions">
+    <mds-input-field label="Descrivi il problema">
+      <mds-input id="text" type="textarea" value="Non riesco a scaricare la ricevuta di settembre."></mds-input>
+    </mds-input-field>
+    <div class="flex justify-end gap-inline @max-actions:flex-col @max-actions:*:self-stretch">
+      <mds-button id="send" type="submit">Invia richiesta</mds-button>
+    </div>
+  </form>
+</div>
+<mds-toast-region>
+  <mds-toast id="toast" variant="info">Richiesta presa in carico: la risposta arriva per email entro 2 giorni lavorativi.</mds-toast>
+</mds-toast-region>
+<script>
+  document.getElementById('form').addEventListener('submit', (event) => {
+    event.preventDefault();
+    document.getElementById('text').value = '';
+    document.getElementById('toast').visible = true;
+  });
+</script>

package/agents/patterns/previews/message-placement/app-deadline.html

@@ -0,0 +1,20 @@
+<!--
+try: Close the dialog with its X, Esc or the backdrop: it means Resta collegato, as the button does; only Esci ends the session. Simula la scadenza opens it again.
+height: 400
+-->
+<mds-button id="open" variant="dark" tone="outline">Simula la scadenza</mds-button>
+<mds-modal id="dialog" opened aria-label="La sessione sta per scadere">
+  <mds-banner slot="window" variant="warning" tone="box" dismissible headline="La sessione sta per scadere">
+    <mds-text>Tra 2 minuti la sessione scade per inattività, e le modifiche non salvate alla pratica vanno perse.</mds-text>
+    <mds-button id="leave" slot="action" variant="warning" tone="outline">Esci</mds-button>
+    <mds-button id="stay" slot="action" variant="warning" tone="strong" autofocus>Resta collegato</mds-button>
+  </mds-banner>
+</mds-modal>
+<script>
+  const dialog = document.getElementById('dialog');
+  document.getElementById('open').addEventListener('click', () => (dialog.opened = true));
+  document.getElementById('stay').addEventListener('click', () => (dialog.opened = false));
+  document.getElementById('leave').addEventListener('click', () => (dialog.opened = false));
+  // closing the dialog, with its X, Esc or the backdrop, means Resta collegato: the application extends the session here
+  dialog.addEventListener('mdsModalClose', () => (dialog.opened = undefined));
+</script>

package/agents/patterns/previews/message-placement/app-failed.html

@@ -0,0 +1,48 @@
+<!--
+try: The server answers nothing: the bar of the application and the title of the page stay, the message takes the place of the content. Press Riprova: the page loads.
+height: 460
+whole-page: true
+-->
+<mds-header>
+  <mds-header-bar>
+    <mds-text typography="h6" tag="p">Gestione pratiche</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">Scadenze</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">Scadenze</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">
+  <mds-text typography="page" tag="h1">Pratiche</mds-text>
+  <mds-banner id="message" variant="error" tone="strong" headline="Il servizio non risponde">
+    <mds-text>Non è stato possibile caricare la pagina. Riprova tra qualche istante.</mds-text>
+    <mds-button id="retry" slot="action" variant="error" tone="strong">Riprova</mds-button>
+  </mds-banner>
+  <mds-list id="content" class="hidden">
+    <mds-list-item>2026/114, Rossi Mario: in istruttoria</mds-list-item>
+    <mds-list-item>2026/118, Bianchi Anna: da integrare</mds-list-item>
+  </mds-list>
+</main>
+<script>
+  const retry = document.getElementById('retry');
+  retry.addEventListener('click', () => {
+    retry.await = true;
+    setTimeout(() => {
+      document.getElementById('message').remove();
+      document.getElementById('content').classList.remove('hidden');
+    }, 400);
+  });
+</script>

package/agents/patterns/previews/message-placement/app-info.html

@@ -0,0 +1,39 @@
+<!--
+try: Look at the toast: the connection dropped, a trouble that does not stop the work, so a warning; it leaves after its time like any toast without an action, while what was written stays. Press Simula il ritorno: another toast says the connection is back.
+height: 400
+-->
+<div class="grid gap-between-sections">
+  <mds-text typography="page" tag="h1">Nuova pratica</mds-text>
+  <form class="grid max-w-form gap-between-fields">
+    <mds-input-field label="Oggetto">
+      <mds-input value="Richiesta di accesso agli atti"></mds-input>
+    </mds-input-field>
+  </form>
+  <div>
+    <mds-button id="simulate" variant="dark" tone="outline" label="Simula il ritorno"></mds-button>
+  </div>
+</div>
+<mds-toast-region>
+  <mds-toast id="lost" variant="warning" visible>Connessione persa: quello che scrivi resta qui finché non torna</mds-toast>
+  <mds-toast id="back" variant="info">Connessione tornata</mds-toast>
+</mds-toast-region>
+<script>
+  const lost = document.getElementById('lost');
+  const back = document.getElementById('back');
+  const simulate = document.getElementById('simulate');
+  let online = false;
+  window.addEventListener('offline', () => {
+    back.visible = undefined;
+    lost.visible = true;
+  });
+  window.addEventListener('online', () => {
+    lost.visible = undefined;
+    back.visible = true;
+  });
+  // the preview simulates the network; in the product the browser fires offline and online
+  simulate.addEventListener('click', () => {
+    online = !online;
+    window.dispatchEvent(new Event(online ? 'online' : 'offline'));
+    simulate.label = online ? 'Simula la caduta' : 'Simula il ritorno';
+  });
+</script>

package/agents/patterns/previews/message-placement/decision.html

@@ -0,0 +1,49 @@
+<!--
+try: Look at the question: the note goes for good, so a dialog stops the person before anything happens, with the focus on Annulla. Press Elimina nota: the dialog closes, the note leaves the list, the practice keeps the rest, and a toast says so.
+height: 440
+-->
+<div class="grid gap-title-content">
+  <mds-text id="title" typography="page" tag="h1" tabindex="-1">Note della pratica 2026/0142</mds-text>
+  <div class="grid">
+    <div class="flex items-center justify-between gap-inline">
+      <mds-text>Telefonata del 5 marzo</mds-text>
+      <mds-button id="more-telefonata" icon="mi/baseline/more-vert" variant="dark" tone="text" aria-label="Azioni della nota Telefonata del 5 marzo"></mds-button>
+    </div>
+    <div id="row-sopralluogo" class="flex items-center justify-between gap-inline">
+      <mds-text>Sopralluogo del 12 marzo</mds-text>
+      <mds-button id="more-sopralluogo" icon="mi/baseline/more-vert" variant="dark" tone="text" aria-label="Azioni della nota Sopralluogo del 12 marzo"></mds-button>
+    </div>
+  </div>
+</div>
+<mds-dropdown target="#more-sopralluogo" placement="bottom-end">
+  <mds-button id="delete" icon="mi/baseline/delete" variant="error" tone="text" label="Elimina nota"></mds-button>
+</mds-dropdown>
+<mds-modal id="dialog" opened aria-label="Eliminare la nota Sopralluogo del 12 marzo?">
+  <mds-banner slot="window" variant="light" tone="box" dismissible headline="Eliminare la nota Sopralluogo del 12 marzo?">
+    <mds-text>La nota viene cancellata e non si può recuperare; la pratica e i suoi allegati restano come sono.</mds-text>
+    <mds-button id="cancel" slot="action" variant="dark" tone="outline" autofocus>Annulla</mds-button>
+    <mds-button id="confirm" slot="action" variant="error" tone="strong">Elimina nota</mds-button>
+  </mds-banner>
+</mds-modal>
+<mds-toast-region>
+  <mds-toast id="toast">Nota Sopralluogo del 12 marzo eliminata</mds-toast>
+</mds-toast-region>
+<script>
+  const dialog = document.getElementById('dialog');
+  let deleted = false;
+  document.getElementById('delete').addEventListener('click', () => (dialog.opened = true));
+  document.getElementById('cancel').addEventListener('click', () => dialog.close());
+  dialog.addEventListener('mdsModalClose', () => (dialog.opened = undefined));
+  document.getElementById('confirm').addEventListener('click', () => {
+    deleted = true;
+    dialog.close();
+  });
+  // the button that opened the dialog is gone with its row: the focus goes to the title of the page
+  dialog.addEventListener('mdsModalHide', () => {
+    if (!deleted) return;
+    deleted = false;
+    document.getElementById('row-sopralluogo').remove();
+    document.getElementById('title').focus();
+    document.getElementById('toast').visible = true;
+  });
+</script>

package/agents/patterns/previews/message-placement/field-error.html

@@ -0,0 +1,28 @@
+<!--
+try: Press Salva with the fields empty: under each one shows what to write, and the focus goes to the first.
+-->
+<form id="form" class="@container grid max-w-form gap-content-actions" novalidate>
+  <div class="grid gap-between-fields">
+    <mds-input-field label="Nome">
+      <mds-input id="name" name="name" required></mds-input>
+    </mds-input-field>
+    <mds-input-field label="Email">
+      <mds-input id="email" name="email" type="email" required></mds-input>
+    </mds-input-field>
+  </div>
+  <div class="flex justify-end gap-inline @max-actions:flex-col @max-actions:*:self-stretch">
+    <mds-button id="save" type="submit">Salva</mds-button>
+  </div>
+</form>
+<script>
+  const form = document.getElementById('form');
+  const messages = { name: 'Scrivi il nome', email: "Scrivi l'indirizzo email" };
+  customElements.whenDefined('mds-input').then(() => {
+    for (const [id, text] of Object.entries(messages))
+      document.getElementById(id).addValidator((value) => (value ? null : { required: text }));
+  });
+  form.addEventListener('submit', (event) => {
+    event.preventDefault();
+    if (!form.checkValidity()) form.querySelector('mds-input:invalid')?.setFocus();
+  });
+</script>

package/agents/patterns/previews/message-placement/field-hint.html

@@ -0,0 +1,30 @@
+<!--
+try: Read the hint under Codice fiscale and the example in each empty field, write a wrong code and leave the field: the error takes the place of the hint; correct it and the hint comes back.
+-->
+<form class="grid max-w-form gap-between-fields">
+  <mds-input-field label="Nome e cognome">
+    <mds-input name="name" placeholder="Es: Mario Rossi"></mds-input>
+  </mds-input-field>
+  <div class="field-group">
+    <mds-input-field id="field" label="Codice fiscale" short message="16 caratteri, lettere e numeri: lo trovi sulla tessera sanitaria">
+      <mds-input id="code" type="cf" name="cf" placeholder="Es: ABCDEF99G99H999I"></mds-input>
+    </mds-input-field>
+  </div>
+</form>
+<script>
+  // Magma gap: the validation of the field overwrites its message; put the hint back when there is no error
+  const field = document.getElementById('field');
+  const code = document.getElementById('code');
+  const hint = field.getAttribute('message');
+  // after the field has loaded, so that this runs after its own listener
+  customElements
+    .whenDefined('mds-input-field')
+    .then(() => field.componentOnReady())
+    .then(() =>
+      code.addEventListener('mdsInputValidation', () =>
+        code.getErrors().then((errors) => {
+          if (errors == null) field.message = hint;
+        }),
+      ),
+    );
+</script>

package/agents/patterns/previews/message-placement/field-valid.html

@@ -0,0 +1,11 @@
+<!--
+try: Write a valid address in Email and leave the field: it shows its valid state, with no message.
+-->
+<form class="grid max-w-form gap-between-fields">
+  <mds-input-field label="Email">
+    <mds-input name="email" type="email" required autofocus value="anna.rossi@comune.esempio.it"></mds-input>
+  </mds-input-field>
+  <mds-input-field label="Telefono">
+    <mds-input id="phone" name="phone" type="tel"></mds-input>
+  </mds-input-field>
+</form>

package/agents/patterns/previews/message-placement/region-failed.html

@@ -0,0 +1,31 @@
+<!--
+try: Press Riprova: the button waits, then the list takes the place of the message; Scadenze, which loaded, never changes.
+-->
+<div class="grid gap-between-sections">
+  <section class="grid gap-title-content">
+    <mds-text typography="section" tag="h2">Scadenze</mds-text>
+    <mds-text tag="p">3 pratiche scadono questa settimana.</mds-text>
+  </section>
+  <section class="grid gap-title-content">
+    <mds-text typography="section" tag="h2">Pratiche</mds-text>
+    <mds-banner id="message" variant="error" tone="strong" headline="Pratiche non caricate">
+      <mds-text>L'elenco non si è caricato. Riprova tra qualche istante.</mds-text>
+      <mds-button id="retry" slot="action" variant="error" tone="strong">Riprova</mds-button>
+    </mds-banner>
+    <mds-list id="list" class="hidden">
+      <mds-list-item>2026/114, Rossi Mario: in istruttoria</mds-list-item>
+      <mds-list-item>2026/118, Bianchi Anna: da integrare</mds-list-item>
+      <mds-list-item>2026/121, Verdi Luca: conclusa</mds-list-item>
+    </mds-list>
+  </section>
+</div>
+<script>
+  const retry = document.getElementById('retry');
+  retry.addEventListener('click', () => {
+    retry.await = true;
+    setTimeout(() => {
+      document.getElementById('message').remove();
+      document.getElementById('list').classList.remove('hidden');
+    }, 400);
+  });
+</script>

package/agents/patterns/previews/message-placement/region-info.html

@@ -0,0 +1,16 @@
+<!--
+try: Look at Pagamenti: the note on how fresh the data are sits at the top of the list it is about, and stays.
+-->
+<section class="grid gap-title-content">
+  <mds-text typography="section" tag="h2">Pagamenti</mds-text>
+  <div class="grid gap-between-fields">
+    <mds-banner variant="info">
+      <mds-text>Dati aggiornati ogni notte: l'ultimo aggiornamento è di oggi alle 02:00.</mds-text>
+    </mds-banner>
+    <mds-list>
+      <mds-list-item>12 ottobre, Rossi Mario: 120,00 euro</mds-list-item>
+      <mds-list-item>14 ottobre, Bianchi Anna: 45,50 euro</mds-list-item>
+      <mds-list-item>15 ottobre, Verdi Luca: 300,00 euro</mds-list-item>
+    </mds-list>
+  </div>
+</section>

package/agents/patterns/previews/page-header/contact-being-edited.html

@@ -0,0 +1,25 @@
+<!--
+try: Look at the head of the edit: Mario Rossi to go back to the contact and the title that says the action, with no actions of its own, since Annulla and Salva stay docked at the bottom for the whole edit.
+height: 620
+-->
+<main class="grid gap-between-sections">
+  <header class="grid gap-title-content">
+    <mds-button href="#" icon="mi/baseline/arrow-back" variant="dark" tone="text" size="sm" class="justify-self-start">Mario Rossi</mds-button>
+    <mds-text typography="page" tag="h1">Modifica Mario Rossi</mds-text>
+  </header>
+  <form class="max-w-form">
+    <fieldset class="field-group">
+      <legend>Residenza</legend>
+      <mds-input-field label="Via">
+        <mds-input name="via" value="Via Roma"></mds-input>
+      </mds-input-field>
+      <mds-input-field label="Civico" short>
+        <mds-input name="civico" value="21"></mds-input>
+      </mds-input-field>
+    </fieldset>
+    <mds-status-bar visible description="Modifiche non salvate">
+      <mds-button type="reset" variant="dark" tone="outline">Annulla</mds-button>
+      <mds-button type="submit">Salva</mds-button>
+    </mds-status-bar>
+  </form>
+</main>

package/agents/patterns/previews/page-header/members-of-a-group.html

@@ -0,0 +1,18 @@
+<!--
+try: Look at the head of the members: Operatori anagrafe to go back to the group, Membri in the plural, the line that says who they are and Aggiungi membri at the end; the list starts 1600 under it.
+-->
+<main class="grid gap-between-sections">
+  <header class="@container grid gap-title-content">
+    <mds-button href="#" icon="mi/baseline/arrow-back" variant="dark" tone="text" size="sm" class="justify-self-start">Operatori anagrafe</mds-button>
+    <div class="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">Membri</mds-text>
+        <mds-text typography="detail" tag="p" class="text-fg-muted">Le persone che lavorano le richieste del gruppo.</mds-text>
+      </div>
+      <div class="flex gap-inline @max-actions:basis-full @max-actions:flex-col @max-actions:*:self-stretch">
+        <mds-button>Aggiungi membri</mds-button>
+      </div>
+    </div>
+  </header>
+  <mds-text typography="detail" tag="p" role="status">12 membri</mds-text>
+</main>

package/agents/patterns/previews/page-header/own-profile.html

@@ -0,0 +1,17 @@
+<!--
+try: Look at the head of the profile: no way back, the number above the name, no status, the line of where the person works, and Modifica last; the first section starts 1600 under it.
+-->
+<main class="grid gap-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="caption" tag="p" class="text-fg-muted">Matricola 04512</mds-text>
+      <mds-text typography="page" tag="h1">Giulia Bianchi</mds-text>
+      <mds-text typography="detail" tag="p" class="text-fg-muted">Ufficio anagrafe, in servizio dal 2 settembre 2019</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">Cambia password</mds-button>
+      <mds-button>Modifica</mds-button>
+    </div>
+  </header>
+  <mds-text typography="section" tag="h2">Dati personali</mds-text>
+</main>