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

package/agents/patterns/previews/page-header/request-from-the-list.html

@@ -0,0 +1,33 @@
+<!--
+try: Look at the head of the request: Richieste to go back, the number above Cambio di residenza with its status, then the row with the menu at its start and Chiudi richiesta last. Open the menu: Assegna and Stampa; a request is deleted from the danger zone of its page, never from a menu.
+height: 420
+-->
+<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">Richieste</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="caption" tag="p" class="text-fg-muted">Richiesta 2026/0142</mds-text>
+        <div class="flex flex-wrap items-center gap-inline">
+          <mds-text typography="page" tag="h1" class="min-w-0">Cambio di residenza</mds-text>
+          <mds-badge variant="warning" label="In lavorazione"></mds-badge>
+        </div>
+        <mds-text typography="detail" tag="p" class="text-fg-muted">Ufficio anagrafe, ricevuta il 3 marzo 2026</mds-text>
+      </div>
+      <div class="flex gap-inline @max-actions:basis-full @max-actions:flex-col @max-actions:*:self-stretch">
+        <mds-button id="azioni-richiesta" class="@max-actions:w-fit" icon="mi/baseline/more-vert" variant="dark" tone="text" aria-label="Azioni della richiesta 2026/0142"></mds-button>
+        <mds-button variant="dark" tone="outline">Richiedi documenti</mds-button>
+        <mds-button>Chiudi richiesta</mds-button>
+      </div>
+    </div>
+  </header>
+  <mds-tab>
+    <mds-tab-item label="Dati" href="#dati" selected></mds-tab-item>
+    <mds-tab-item label="Documenti" href="#documenti"></mds-tab-item>
+    <mds-tab-item label="Storico" href="#storico"></mds-tab-item>
+  </mds-tab>
+</main>
+<mds-dropdown target="#azioni-richiesta" placement="bottom-start">
+  <mds-button icon="mi/baseline/assignment-ind" variant="dark" tone="text" label="Assegna"></mds-button>
+  <mds-button icon="mi/baseline/print" variant="dark" tone="text" label="Stampa"></mds-button>
+</mds-dropdown>

package/agents/patterns/previews/page-header/requests-of-an-office.html

@@ -0,0 +1,16 @@
+<!--
+try: Look at the head of the list: Richieste in the plural, the line that says what it holds, Esporta outlined and Nuova richiesta last at the end; the list 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="page" tag="h1">Richieste</mds-text>
+      <mds-text typography="detail" tag="p" class="text-fg-muted">Le richieste che i cittadini inviano all'ufficio anagrafe.</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 richiesta</mds-button>
+    </div>
+  </header>
+  <mds-text typography="detail" tag="p" role="status">1-10 di 44 richieste</mds-text>
+</main>

package/agents/patterns/previews/record-detail/ask-for-words.html

@@ -0,0 +1,72 @@
+<!--
+try: Press Richiedi documenti with the note empty: the field says what is missing and takes the focus, and the dialog stays open.
+height: 640
+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 grid gap-title-content">
+    <mds-button href="#" icon="mi/baseline/arrow-back" variant="dark" tone="text" size="sm" class="justify-self-start">Pratiche</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="caption" tag="p" class="text-fg-muted">Pratica 2026/0142</mds-text>
+        <div class="flex flex-wrap items-center gap-inline">
+          <mds-text typography="page" tag="h1" class="min-w-0" tabindex="-1">Cambio di residenza</mds-text>
+          <mds-badge variant="warning" label="In lavorazione"></mds-badge>
+        </div>
+        <mds-text typography="detail" tag="p" class="text-fg-muted">Ufficio anagrafe, ricevuta il 3 marzo 2026</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">Richiedi documenti</mds-button>
+        <mds-button>Chiudi pratica</mds-button>
+      </div>
+    </div>
+  </header>
+</main>
+<mds-modal id="dialogo" opened aria-label="Richiedi documenti">
+  <mds-banner slot="window" variant="light" tone="box" dismissible headline="Richiedi documenti">
+    <form id="richiesta" class="grid gap-between-fields" novalidate>
+      <mds-text typography="detail" tag="p">Giulia Bianchi riceve la nota via PEC, e la pratica resta in attesa dei documenti.</mds-text>
+      <mds-input-field label="Nota per la richiedente">
+        <mds-input id="nota" type="textarea" name="nota" required></mds-input>
+      </mds-input-field>
+    </form>
+    <mds-button id="annulla" slot="action" variant="dark" tone="outline">Annulla</mds-button>
+    <mds-button slot="action" type="submit" form="richiesta">Richiedi documenti</mds-button>
+  </mds-banner>
+</mds-modal>
+<script>
+  const dialog = document.getElementById('dialogo');
+  const form = document.getElementById('richiesta');
+  const note = document.getElementById('nota');
+  customElements.whenDefined('mds-input').then(() =>
+    note.addValidator((value) => (value ? null : { required: 'Scrivi quali documenti mancano' })),
+  );
+  dialog.addEventListener('mdsModalClose', () => (dialog.opened = undefined));
+  document.getElementById('annulla').addEventListener('click', () => dialog.close());
+  form.addEventListener('submit', (event) => {
+    event.preventDefault();
+    if (!form.checkValidity()) note.setFocus();
+  });
+</script>

package/agents/patterns/previews/record-detail/edit-data.html

@@ -0,0 +1,104 @@
+<!--
+try: Look at the page turned into the form, with Annulla and Salva docked at the bottom for the whole edit. Press Salva: the page goes back to the contact, a toast says it was saved, and the focus goes to the heading.
+whole-page: true
+-->
+<mds-header>
+  <mds-header-bar>
+    <mds-text typography="h6" tag="p">Servizi demografici</mds-text>
+    <mds-button slot="nav" href="#" variant="dark" tone="text">Pratiche</mds-button>
+    <mds-button slot="nav" href="#" aria-current="page" variant="dark" tone="weak">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="#" variant="dark" tone="text" class="w-full justify-start">Pratiche</mds-button>
+    <mds-button href="#" aria-current="page" variant="dark" tone="weak" 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>
+<div id="modifica">
+  <main class="page-frame grid gap-between-sections py-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 id="contatto" 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>
+        <mds-input-field label="CAP" short>
+          <mds-input name="cap" value="47921"></mds-input>
+        </mds-input-field>
+        <mds-input-field label="Comune">
+          <mds-input name="comune" value="Rimini"></mds-input>
+        </mds-input-field>
+      </fieldset>
+      <mds-status-bar id="barra" visible description="Modifiche non salvate">
+        <mds-button type="reset" variant="dark" tone="outline">Annulla</mds-button>
+        <mds-button id="salva" type="submit">Salva</mds-button>
+      </mds-status-bar>
+    </form>
+  </main>
+</div>
+<div id="scheda" hidden>
+  <main class="page-frame grid gap-between-sections py-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">Contatti</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 id="titolo" typography="page" tag="h1" tabindex="-1">Mario Rossi</mds-text>
+          <mds-text typography="detail" tag="p" class="text-fg-muted">Ufficio anagrafe, aggiunto il 12 gennaio 2024</mds-text>
+        </div>
+        <div class="flex gap-inline @max-actions:basis-full @max-actions:flex-col @max-actions:*:self-stretch">
+          <mds-button id="azioni-contatto" class="@max-actions:w-fit" icon="mi/baseline/more-vert" variant="dark" tone="text" aria-label="Azioni di Mario Rossi"></mds-button>
+          <mds-button>Modifica</mds-button>
+        </div>
+      </div>
+    </header>
+    <section class="grid gap-title-content">
+      <mds-text typography="section" tag="h2">Residenza</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">Indirizzo</mds-text>
+          <mds-text tag="dd" class="m-0">Via Roma 21</mds-text>
+        </div>
+        <div class="grid gap-label-control">
+          <mds-text typography="label" tag="dt" class="text-fg-muted">Comune</mds-text>
+          <mds-text tag="dd" class="m-0">47921 Rimini</mds-text>
+        </div>
+      </dl>
+    </section>
+  </main>
+  <mds-dropdown target="#azioni-contatto" placement="bottom-start">
+    <mds-button icon="mi/baseline/print" variant="dark" tone="text" label="Stampa"></mds-button>
+    <mds-separator></mds-separator>
+    <mds-button icon="mi/baseline/delete" variant="error" tone="text" label="Elimina contatto"></mds-button>
+  </mds-dropdown>
+</div>
+<mds-toast-region>
+  <mds-toast id="esito" variant="success">I dati di Mario Rossi sono stati salvati.</mds-toast>
+</mds-toast-region>
+<script>
+  // Salva sends the form; the back end answers, and the page returns to the record it saved
+  document.getElementById('contatto').addEventListener('submit', (event) => {
+    event.preventDefault();
+    document.getElementById('barra').visible = undefined;
+    document.getElementById('modifica').hidden = true;
+    document.getElementById('scheda').hidden = false;
+    document.getElementById('titolo').focus();
+    document.getElementById('esito').visible = true;
+  });
+</script>

package/agents/patterns/previews/record-detail/read-the-data.html

@@ -0,0 +1,80 @@
+<!--
+try: Look at the contact: its name as the heading, Modifica as the main action and its data as labels and values. Open the menu at the start of the row: Stampa, then a separator, and Elimina contatto last, in red with its icon.
+whole-page: true
+-->
+<mds-header>
+  <mds-header-bar>
+    <mds-text typography="h6" tag="p">Servizi demografici</mds-text>
+    <mds-button slot="nav" href="#" variant="dark" tone="text">Pratiche</mds-button>
+    <mds-button slot="nav" href="#" aria-current="page" variant="dark" tone="weak">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="#" variant="dark" tone="text" class="w-full justify-start">Pratiche</mds-button>
+    <mds-button href="#" aria-current="page" variant="dark" tone="weak" 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 grid gap-title-content">
+    <mds-button href="#" icon="mi/baseline/arrow-back" variant="dark" tone="text" size="sm" class="justify-self-start">Contatti</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" tabindex="-1">Mario Rossi</mds-text>
+        <mds-text typography="detail" tag="p" class="text-fg-muted">Ufficio anagrafe, aggiunto il 12 gennaio 2024</mds-text>
+      </div>
+      <div class="flex gap-inline @max-actions:basis-full @max-actions:flex-col @max-actions:*:self-stretch">
+        <mds-button id="azioni-contatto" class="@max-actions:w-fit" icon="mi/baseline/more-vert" variant="dark" tone="text" aria-label="Azioni di Mario Rossi"></mds-button>
+        <mds-button>Modifica</mds-button>
+      </div>
+    </div>
+  </header>
+  <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">Cittadinanza</mds-text>
+        <mds-text tag="dd" class="m-0">Italiana</mds-text>
+      </div>
+    </dl>
+  </section>
+  <section class="grid gap-title-content">
+    <mds-text typography="section" tag="h2">Recapiti</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">Email</mds-text>
+        <mds-text tag="dd" class="m-0">m.rossi@esempio.it</mds-text>
+      </div>
+      <div class="grid gap-label-control">
+        <mds-text typography="label" tag="dt" class="text-fg-muted">Telefono</mds-text>
+        <mds-text tag="dd" class="m-0">0541 123456</mds-text>
+      </div>
+    </dl>
+  </section>
+</main>
+<mds-dropdown target="#azioni-contatto" placement="bottom-start">
+  <mds-button icon="mi/baseline/print" variant="dark" tone="text" label="Stampa"></mds-button>
+  <mds-separator></mds-separator>
+  <mds-button icon="mi/baseline/delete" variant="error" tone="text" label="Elimina contatto"></mds-button>
+</mds-dropdown>

package/agents/patterns/previews/record-detail/record-changed.html

@@ -0,0 +1,87 @@
+<!--
+try: Look under the identity: an info banner says Anna Bianchi took the practice in charge while it was open, and that the actions may no longer hold. Press Mostra: the practice loads again with its new status and actions, the banner goes, and the tabs move up.
+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 grid gap-title-content">
+    <mds-button href="#" icon="mi/baseline/arrow-back" variant="dark" tone="text" size="sm" class="justify-self-start">Pratiche</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="caption" tag="p" class="text-fg-muted">Pratica 2026/0142</mds-text>
+        <div class="flex flex-wrap items-center gap-inline">
+          <mds-text id="titolo" typography="page" tag="h1" class="min-w-0" tabindex="-1">Cambio di residenza</mds-text>
+          <mds-badge id="stato" variant="info" label="Nuova"></mds-badge>
+        </div>
+        <mds-text typography="detail" tag="p" class="text-fg-muted">Ufficio anagrafe, ricevuta il 3 marzo 2026</mds-text>
+      </div>
+      <div id="azioni" class="flex gap-inline @max-actions:basis-full @max-actions:flex-col @max-actions:*:self-stretch">
+        <mds-button>Prendi in carico</mds-button>
+      </div>
+    </div>
+    <mds-banner id="cambio" variant="info" headline="Presa in carico da Anna Bianchi alle 10:42">
+      <mds-text>Le azioni di questa pagina potrebbero non valere più: mostra la pratica aggiornata.</mds-text>
+      <mds-button id="mostra" slot="action" variant="info" tone="strong">Mostra</mds-button>
+    </mds-banner>
+  </header>
+  <div class="@container grid gap-between-fields">
+    <mds-tab>
+      <mds-tab-item label="Dati" href="#dati" selected></mds-tab-item>
+      <mds-tab-item label="Documenti" href="#documenti"></mds-tab-item>
+      <mds-tab-item label="Storico" href="#storico"></mds-tab-item>
+    </mds-tab>
+    <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">Richiedente</mds-text>
+        <mds-text tag="dd" class="m-0">Giulia Bianchi</mds-text>
+      </div>
+      <div class="grid gap-label-control">
+        <mds-text typography="label" tag="dt" class="text-fg-muted">Codice fiscale</mds-text>
+        <mds-text tag="dd" class="m-0">BNCGLI85C43H294K</mds-text>
+      </div>
+      <div class="grid gap-label-control">
+        <mds-text typography="label" tag="dt" class="text-fg-muted">Nuovo indirizzo</mds-text>
+        <mds-text tag="dd" class="m-0">Via Emilia 12, Rimini</mds-text>
+      </div>
+      <div class="grid gap-label-control">
+        <mds-text typography="label" tag="dt" class="text-fg-muted">Dal</mds-text>
+        <mds-text tag="dd" class="m-0">1 marzo 2026</mds-text>
+      </div>
+    </dl>
+  </div>
+</main>
+<script>
+  document.getElementById('mostra').addEventListener('click', () => {
+    // the record as the back end returns it now: its status and the actions the status allows
+    const status = document.getElementById('stato');
+    status.label = 'In lavorazione';
+    status.variant = 'warning';
+    document.getElementById('azioni').innerHTML =
+      '<mds-button variant="dark" tone="outline">Richiedi documenti</mds-button><mds-button>Chiudi pratica</mds-button>';
+    // the banner goes, and what was under it moves up
+    document.getElementById('cambio').remove();
+    // Mostra is gone: the focus goes to the heading
+    document.getElementById('titolo').focus();
+  });
+</script>

package/agents/patterns/previews/record-detail/run-at-once.html

@@ -0,0 +1,88 @@
+<!--
+try: Press Prendi in carico: the button waits for the answer, then the page shows the practice as the back end returns it, with its new status and actions, a toast says it was done, and the focus goes to the heading.
+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 grid gap-title-content">
+    <mds-button href="#" icon="mi/baseline/arrow-back" variant="dark" tone="text" size="sm" class="justify-self-start">Pratiche</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="caption" tag="p" class="text-fg-muted">Pratica 2026/0142</mds-text>
+        <div class="flex flex-wrap items-center gap-inline">
+          <mds-text id="titolo" typography="page" tag="h1" class="min-w-0" tabindex="-1">Cambio di residenza</mds-text>
+          <mds-badge id="stato" variant="info" label="Nuova"></mds-badge>
+        </div>
+        <mds-text typography="detail" tag="p" class="text-fg-muted">Ufficio anagrafe, ricevuta il 3 marzo 2026</mds-text>
+      </div>
+      <div id="azioni" class="flex gap-inline @max-actions:basis-full @max-actions:flex-col @max-actions:*:self-stretch">
+        <mds-button id="prendi">Prendi in carico</mds-button>
+      </div>
+    </div>
+  </header>
+  <div class="@container grid gap-between-fields">
+    <mds-tab>
+      <mds-tab-item label="Dati" href="#dati" selected></mds-tab-item>
+      <mds-tab-item label="Documenti" href="#documenti"></mds-tab-item>
+      <mds-tab-item label="Storico" href="#storico"></mds-tab-item>
+    </mds-tab>
+    <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">Richiedente</mds-text>
+        <mds-text tag="dd" class="m-0">Giulia Bianchi</mds-text>
+      </div>
+      <div class="grid gap-label-control">
+        <mds-text typography="label" tag="dt" class="text-fg-muted">Codice fiscale</mds-text>
+        <mds-text tag="dd" class="m-0">BNCGLI85C43H294K</mds-text>
+      </div>
+      <div class="grid gap-label-control">
+        <mds-text typography="label" tag="dt" class="text-fg-muted">Nuovo indirizzo</mds-text>
+        <mds-text tag="dd" class="m-0">Via Emilia 12, Rimini</mds-text>
+      </div>
+      <div class="grid gap-label-control">
+        <mds-text typography="label" tag="dt" class="text-fg-muted">Dal</mds-text>
+        <mds-text tag="dd" class="m-0">1 marzo 2026</mds-text>
+      </div>
+    </dl>
+  </div>
+</main>
+<mds-toast-region>
+  <mds-toast id="esito" variant="success">La pratica è stata presa in carico.</mds-toast>
+</mds-toast-region>
+<script>
+  const take = document.getElementById('prendi');
+  take.addEventListener('click', async () => {
+    take.await = true;
+    // the back end answers with the record: its status and the actions the status allows
+    await new Promise((resolve) => setTimeout(resolve, 400));
+    const status = document.getElementById('stato');
+    status.label = 'In lavorazione';
+    status.variant = 'warning';
+    document.getElementById('azioni').innerHTML =
+      '<mds-button variant="dark" tone="outline">Richiedi documenti</mds-button><mds-button>Chiudi pratica</mds-button>';
+    // the button that ran it is gone: the focus goes to the heading
+    document.getElementById('titolo').focus();
+    document.getElementById('esito').visible = true;
+  });
+</script>

package/agents/patterns/previews/record-detail/work-on-it.html

@@ -0,0 +1,106 @@
+<!--
+try: Look at the head of the practice: the way back, the number above the subject with its status, the actions the status allows with the main one last. Press Storico: the tab is a link, so the address holds it, and the history shows the newest first.
+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 grid gap-title-content">
+    <mds-button href="#" icon="mi/baseline/arrow-back" variant="dark" tone="text" size="sm" class="justify-self-start">Pratiche</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="caption" tag="p" class="text-fg-muted">Pratica 2026/0142</mds-text>
+        <div class="flex flex-wrap items-center gap-inline">
+          <mds-text typography="page" tag="h1" class="min-w-0" tabindex="-1">Cambio di residenza</mds-text>
+          <mds-badge variant="warning" label="In lavorazione"></mds-badge>
+        </div>
+        <mds-text typography="detail" tag="p" class="text-fg-muted">Ufficio anagrafe, ricevuta il 3 marzo 2026</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">Richiedi documenti</mds-button>
+        <mds-button>Chiudi pratica</mds-button>
+      </div>
+    </div>
+  </header>
+  <div class="@container grid gap-between-fields">
+    <mds-tab>
+      <mds-tab-item label="Dati" href="#dati"></mds-tab-item>
+      <mds-tab-item label="Documenti" href="#documenti" selected></mds-tab-item>
+      <mds-tab-item label="Storico" href="#storico"></mds-tab-item>
+    </mds-tab>
+    <div id="dati" hidden>
+      <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">Richiedente</mds-text>
+          <mds-text tag="dd" class="m-0">Giulia Bianchi</mds-text>
+        </div>
+        <div class="grid gap-label-control">
+          <mds-text typography="label" tag="dt" class="text-fg-muted">Nuovo indirizzo</mds-text>
+          <mds-text tag="dd" class="m-0">Via Emilia 12, Rimini</mds-text>
+        </div>
+      </dl>
+    </div>
+    <div id="documenti" class="@container">
+      <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>
+      </div>
+    </div>
+    <div id="storico" hidden>
+      <ol class="m-0 grid list-none gap-between-fields p-0">
+        <li>
+          <mds-author>
+            <mds-avatar slot="avatar" initials="AB"></mds-avatar>
+            <mds-text typography="detail" tag="p">Anna Bianchi ha richiesto documenti</mds-text>
+            <mds-text typography="caption" tag="p" class="text-fg-muted">5 marzo 2026, 9:15</mds-text>
+            <mds-text typography="detail" tag="p">Manca il contratto di affitto firmato dal proprietario.</mds-text>
+          </mds-author>
+        </li>
+        <li>
+          <mds-author>
+            <mds-avatar slot="avatar" initials="AB"></mds-avatar>
+            <mds-text typography="detail" tag="p">Anna Bianchi ha preso in carico la pratica</mds-text>
+            <mds-text typography="caption" tag="p" class="text-fg-muted">4 marzo 2026, 10:42</mds-text>
+          </mds-author>
+        </li>
+        <li>
+          <mds-author>
+            <mds-avatar slot="avatar" initials="GB"></mds-avatar>
+            <mds-text typography="detail" tag="p">Giulia Bianchi ha inviato la pratica</mds-text>
+            <mds-text typography="caption" tag="p" class="text-fg-muted">3 marzo 2026, 18:05</mds-text>
+          </mds-author>
+        </li>
+      </ol>
+    </div>
+  </div>
+</main>
+<script>
+  // the tabs are links: the address holds the tab, and the page shows its part
+  const show = () => {
+    const tab = location.hash.slice(1) || 'documenti';
+    for (const part of ['dati', 'documenti', 'storico'].map((id) => document.getElementById(id))) part.hidden = part.id !== tab;
+  };
+  addEventListener('hashchange', show);
+  show();
+</script>

package/agents/patterns/previews/rhythm/between-containers.html

@@ -0,0 +1,29 @@
+<!--
+try: Look at the three cards of the results: 400 apart, nearer than the 600 inside each, since their boundary already sets them apart.
+-->
+<div class="grid gap-between-containers">
+  <mds-card>
+    <mds-card-header>
+      <mds-text typography="part" tag="h2">Pratica 2026/0412</mds-text>
+    </mds-card-header>
+    <mds-card-content>
+      <mds-text typography="detail">Cambio di residenza di Giulia Bianchi.</mds-text>
+    </mds-card-content>
+  </mds-card>
+  <mds-card>
+    <mds-card-header>
+      <mds-text typography="part" tag="h2">Pratica 2026/0398</mds-text>
+    </mds-card-header>
+    <mds-card-content>
+      <mds-text typography="detail">Cambio di residenza di Luca Ferri.</mds-text>
+    </mds-card-content>
+  </mds-card>
+  <mds-card>
+    <mds-card-header>
+      <mds-text typography="part" tag="h2">Pratica 2026/0371</mds-text>
+    </mds-card-header>
+    <mds-card-content>
+      <mds-text typography="detail">Iscrizione anagrafica di Sara Conti.</mds-text>
+    </mds-card-content>
+  </mds-card>
+</div>