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

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

@@ -0,0 +1,14 @@
+<!--
+try: Look at the three fields: 600 apart, twice the 300 between each label and its input, so every label stays with its own field.
+-->
+<form class="grid max-w-form gap-between-fields">
+  <mds-input-field label="Nome e cognome">
+    <mds-input value="Giulia Bianchi"></mds-input>
+  </mds-input-field>
+  <mds-input-field label="Codice fiscale">
+    <mds-input value="BNCGLI85C43H294K"></mds-input>
+  </mds-input-field>
+  <mds-input-field label="PEC">
+    <mds-input type="email" value="g.bianchi@pec.esempio.it"></mds-input>
+  </mds-input-field>
+</form>

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

@@ -0,0 +1,23 @@
+<!--
+try: Look at Dati personali and Residenza: the two groups stand 1000 apart, farther than the 600 between their fields, so each field reads with its own group.
+-->
+<form class="grid max-w-form gap-between-groups">
+  <fieldset class="field-group">
+    <legend>Dati personali</legend>
+    <mds-input-field label="Nome">
+      <mds-input value="Giulia"></mds-input>
+    </mds-input-field>
+    <mds-input-field label="Cognome">
+      <mds-input value="Bianchi"></mds-input>
+    </mds-input-field>
+  </fieldset>
+  <fieldset class="field-group">
+    <legend>Residenza</legend>
+    <mds-input-field label="Indirizzo">
+      <mds-input value="Via Emilia 12"></mds-input>
+    </mds-input-field>
+    <mds-input-field label="Comune">
+      <mds-input value="Santarcangelo di Romagna"></mds-input>
+    </mds-input-field>
+  </fieldset>
+</form>

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

@@ -0,0 +1,17 @@
+<!--
+try: Look at the page of the request: its header and its two sections stand 1600 apart, each title 300 from what it names.
+-->
+<div class="grid gap-between-sections">
+  <header class="grid gap-title-content">
+    <mds-text typography="page" tag="h1">Pratica 2026/0412</mds-text>
+    <mds-text typography="detail" tag="p">Cambio di residenza, presentata il 12 ottobre 2026.</mds-text>
+  </header>
+  <section class="grid gap-title-content">
+    <mds-text typography="section" tag="h2">Richiedente</mds-text>
+    <mds-text typography="detail" tag="p">Giulia Bianchi, nata a Rimini il 3 marzo 1985.</mds-text>
+  </section>
+  <section class="grid gap-title-content">
+    <mds-text typography="section" tag="h2">Nuovo indirizzo</mds-text>
+    <mds-text typography="detail" tag="p">Via Emilia 12, Santarcangelo di Romagna.</mds-text>
+  </section>
+</div>

package/agents/patterns/previews/rhythm/content-actions.html

@@ -0,0 +1,14 @@
+<!--
+try: Look at Apri at the foot of the card: 600 under the data, twice the 300 between the title and the data, since it acts on the whole request.
+-->
+<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-footer>
+    <mds-button variant="primary" tone="outline">Apri</mds-button>
+  </mds-card-footer>
+</mds-card>

package/agents/patterns/previews/rhythm/inline.html

@@ -0,0 +1,12 @@
+<!--
+try: Look at Annulla and Salva at the end of the form: 300 apart, the step of a row. Narrow the stage under 380 px: they stack, still 300 apart, Salva at the bottom.
+-->
+<form class="@container grid max-w-form gap-content-actions">
+  <mds-input-field label="Motivo della richiesta">
+    <mds-input value="Trasferimento per lavoro"></mds-input>
+  </mds-input-field>
+  <div class="flex justify-end gap-inline @max-actions:flex-col @max-actions:*:self-stretch">
+    <mds-button variant="dark" tone="outline">Annulla</mds-button>
+    <mds-button>Salva</mds-button>
+  </div>
+</form>

package/agents/patterns/previews/rhythm/inset.html

@@ -0,0 +1,11 @@
+<!--
+try: Look at the edges of the card: its title and its text stand 600 inside them, one inset shared by both, with 300 between the title and the text.
+-->
+<mds-card>
+  <mds-card-header>
+    <mds-text typography="part" tag="h2">Ufficio anagrafe</mds-text>
+  </mds-card-header>
+  <mds-card-content>
+    <mds-text typography="detail">Piazza Ganganelli 1, primo piano. Aperto dal lunedì al venerdì dalle 9 alle 13, il giovedì anche dalle 15 alle 17.</mds-text>
+  </mds-card-content>
+</mds-card>

package/agents/patterns/previews/rhythm/label-control.html

@@ -0,0 +1,8 @@
+<!--
+try: Look at Codice fiscale: the label stands 300 above the box that holds the input and its message, and the message 300 under the input.
+-->
+<form class="max-w-form">
+  <mds-input-field label="Codice fiscale" message="Sedici caratteri, come sulla tessera sanitaria.">
+    <mds-input value="BNCGLI85C43H294K"></mds-input>
+  </mds-input-field>
+</form>

package/agents/patterns/previews/rhythm/title-content.html

@@ -0,0 +1,10 @@
+<!--
+try: Look at the title and the text under it: 300 apart, the step between a title and what it names.
+-->
+<div class="grid gap-title-content">
+  <mds-text typography="page" tag="h1">Cambio di residenza</mds-text>
+  <mds-text typography="detail" tag="p">
+    Comunica il nuovo indirizzo entro venti giorni dal trasloco: l'ufficio anagrafe verifica la
+    dimora abituale e registra la nuova residenza dalla data della richiesta.
+  </mds-text>
+</div>

package/agents/patterns/previews/surfaces/band.html

@@ -0,0 +1,73 @@
+<!--
+try: Scroll the page: the bar of the application stays put above the list, while the title of the page scrolls away under it with the content.
+height: 520
+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">Archivio</mds-button>
+    <mds-button id="persona" slot="nav" icon="mi/baseline/account-circle" variant="dark" tone="text" aria-label="Account di Mario Rossi"></mds-button>
+  </mds-header-bar>
+  <nav slot="menu" class="grid gap-inline p-inset">
+    <mds-button href="#" aria-current="page" variant="dark" tone="weak" class="w-full justify-start">Pratiche</mds-button>
+    <mds-button href="#" variant="dark" tone="text" class="w-full justify-start">Archivio</mds-button>
+    <mds-separator></mds-separator>
+    <mds-text typography="detail" tag="p" class="text-fg-muted">Mario Rossi</mds-text>
+    <mds-button href="#" variant="dark" tone="text" class="w-full justify-start">Profilo</mds-button>
+    <mds-button href="#" variant="dark" tone="text" class="w-full justify-start">Esci</mds-button>
+  </nav>
+</mds-header>
+<mds-dropdown target="#persona" placement="bottom-end" strategy="fixed">
+  <mds-text typography="detail" tag="p" class="text-fg-muted">Mario Rossi</mds-text>
+  <mds-button href="#" icon="mi/baseline/person" variant="dark" tone="text" label="Profilo"></mds-button>
+  <mds-separator></mds-separator>
+  <mds-button href="#" icon="mi/baseline/logout" variant="dark" tone="text" label="Esci"></mds-button>
+</mds-dropdown>
+<main class="page-frame grid gap-between-sections py-between-sections">
+  <header class="grid gap-title-content">
+    <mds-text typography="page" tag="h1">Pratiche</mds-text>
+    <mds-text typography="detail" tag="p" class="text-fg-muted">Le richieste degli ultimi trenta giorni, dalla più recente.</mds-text>
+  </header>
+  <mds-table class="w-full">
+    <mds-table-header>
+      <mds-table-header-cell label="Protocollo"></mds-table-header-cell>
+      <mds-table-header-cell label="Oggetto"></mds-table-header-cell>
+    </mds-table-header>
+    <mds-table-body>
+      <mds-table-row>
+        <mds-table-cell><mds-text typography="detail">2026/0142</mds-text></mds-table-cell>
+        <mds-table-cell><mds-text typography="detail">Cambio di residenza</mds-text></mds-table-cell>
+      </mds-table-row>
+      <mds-table-row>
+        <mds-table-cell><mds-text typography="detail">2026/0141</mds-text></mds-table-cell>
+        <mds-table-cell><mds-text typography="detail">Iscrizione anagrafica</mds-text></mds-table-cell>
+      </mds-table-row>
+      <mds-table-row>
+        <mds-table-cell><mds-text typography="detail">2026/0139</mds-text></mds-table-cell>
+        <mds-table-cell><mds-text typography="detail">Carta di identità</mds-text></mds-table-cell>
+      </mds-table-row>
+      <mds-table-row>
+        <mds-table-cell><mds-text typography="detail">2026/0137</mds-text></mds-table-cell>
+        <mds-table-cell><mds-text typography="detail">Certificato di residenza</mds-text></mds-table-cell>
+      </mds-table-row>
+      <mds-table-row>
+        <mds-table-cell><mds-text typography="detail">2026/0136</mds-text></mds-table-cell>
+        <mds-table-cell><mds-text typography="detail">Cambio di indirizzo</mds-text></mds-table-cell>
+      </mds-table-row>
+      <mds-table-row>
+        <mds-table-cell><mds-text typography="detail">2026/0134</mds-text></mds-table-cell>
+        <mds-table-cell><mds-text typography="detail">Iscrizione AIRE</mds-text></mds-table-cell>
+      </mds-table-row>
+      <mds-table-row>
+        <mds-table-cell><mds-text typography="detail">2026/0131</mds-text></mds-table-cell>
+        <mds-table-cell><mds-text typography="detail">Stato di famiglia</mds-text></mds-table-cell>
+      </mds-table-row>
+      <mds-table-row>
+        <mds-table-cell><mds-text typography="detail">2026/0129</mds-text></mds-table-cell>
+        <mds-table-cell><mds-text typography="detail">Certificato di nascita</mds-text></mds-table-cell>
+      </mds-table-row>
+    </mds-table-body>
+  </mds-table>
+</main>

package/agents/patterns/previews/surfaces/canvas.html

@@ -0,0 +1,66 @@
+<!--
+try: Look at the background: the page is one canvas, the title and the data stand on it with no sheet around them, and only the bar and the cards of the related requests rise from it.
+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">Archivio</mds-button>
+    <mds-button id="persona" slot="nav" icon="mi/baseline/account-circle" variant="dark" tone="text" aria-label="Account di Mario Rossi"></mds-button>
+  </mds-header-bar>
+  <nav slot="menu" class="grid gap-inline p-inset">
+    <mds-button href="#" aria-current="page" variant="dark" tone="weak" class="w-full justify-start">Pratiche</mds-button>
+    <mds-button href="#" variant="dark" tone="text" class="w-full justify-start">Archivio</mds-button>
+    <mds-separator></mds-separator>
+    <mds-text typography="detail" tag="p" class="text-fg-muted">Mario Rossi</mds-text>
+    <mds-button href="#" variant="dark" tone="text" class="w-full justify-start">Profilo</mds-button>
+    <mds-button href="#" variant="dark" tone="text" class="w-full justify-start">Esci</mds-button>
+  </nav>
+</mds-header>
+<mds-dropdown target="#persona" placement="bottom-end" strategy="fixed">
+  <mds-text typography="detail" tag="p" class="text-fg-muted">Mario Rossi</mds-text>
+  <mds-button href="#" icon="mi/baseline/person" variant="dark" tone="text" label="Profilo"></mds-button>
+  <mds-separator></mds-separator>
+  <mds-button href="#" icon="mi/baseline/logout" variant="dark" tone="text" label="Esci"></mds-button>
+</mds-dropdown>
+<main class="page-frame grid gap-between-sections py-between-sections">
+  <div class="grid gap-title-content">
+    <mds-text typography="page" tag="h1">Cambio di residenza</mds-text>
+    <mds-text typography="detail" tag="p" class="text-fg-muted">Pratica 2026/0142, ricevuta il 3 marzo 2026</mds-text>
+  </div>
+  <section class="grid gap-title-content">
+    <mds-text typography="section" tag="h2">Richiedente</mds-text>
+    <dl class="m-0 grid max-w-form items-start gap-between-fields @md:grid-cols-2">
+      <div class="grid gap-label-control">
+        <mds-text typography="label" tag="dt" class="text-fg-muted">Nome e cognome</mds-text>
+        <mds-text tag="dd" class="m-0">Marco 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>
+  </section>
+  <section class="grid gap-title-content">
+    <mds-text typography="section" tag="h2">Pratiche collegate</mds-text>
+    <div class="grid grid-cols-[repeat(auto-fill,minmax(14rem,1fr))] gap-between-containers">
+      <mds-card>
+        <mds-card-header>
+          <mds-text typography="part" tag="h3">Iscrizione anagrafica</mds-text>
+        </mds-card-header>
+        <mds-card-content>
+          <mds-text typography="detail" tag="p">Pratica 2026/0098, conclusa.</mds-text>
+        </mds-card-content>
+      </mds-card>
+      <mds-card>
+        <mds-card-header>
+          <mds-text typography="part" tag="h3">Carta di identità</mds-text>
+        </mds-card-header>
+        <mds-card-content>
+          <mds-text typography="detail" tag="p">Pratica 2026/0131, in attesa.</mds-text>
+        </mds-card-content>
+      </mds-card>
+    </div>
+  </section>
+</main>

package/agents/patterns/previews/surfaces/card.html

@@ -0,0 +1,30 @@
+<!--
+try: Look at the related requests: each one is a card, whose edge tells where one ends and the next begins; the section around them has no surface of its own.
+-->
+<section class="grid gap-title-content">
+  <mds-text typography="section" tag="h2">Pratiche collegate</mds-text>
+  <div class="grid grid-cols-[repeat(auto-fill,minmax(14rem,1fr))] gap-between-containers">
+    <mds-card>
+      <mds-card-header>
+        <mds-text typography="part" tag="h3">Iscrizione anagrafica</mds-text>
+      </mds-card-header>
+      <mds-card-content>
+        <mds-text typography="detail" tag="p">Pratica 2026/0098, conclusa il 12 febbraio.</mds-text>
+      </mds-card-content>
+      <mds-card-footer>
+        <mds-button variant="primary" tone="outline">Apri</mds-button>
+      </mds-card-footer>
+    </mds-card>
+    <mds-card>
+      <mds-card-header>
+        <mds-text typography="part" tag="h3">Carta di identità</mds-text>
+      </mds-card-header>
+      <mds-card-content>
+        <mds-text typography="detail" tag="p">Pratica 2026/0131, in attesa della foto.</mds-text>
+      </mds-card-content>
+      <mds-card-footer>
+        <mds-button variant="primary" tone="outline">Apri</mds-button>
+      </mds-card-footer>
+    </mds-card>
+  </div>
+</section>

package/agents/patterns/previews/surfaces/dialog.html

@@ -0,0 +1,28 @@
+<!--
+try: Look at the window: the neutral surface of every form, choice and confirmation, with its title and its X in the colour of the text; the page behind it is dimmed and inert.
+height: 560
+-->
+<div class="grid gap-title-content">
+  <mds-text typography="page" tag="h1">Ditta Bianchi Costruzioni</mds-text>
+  <mds-text typography="detail" tag="p" class="text-fg-muted">I referenti ricevono le comunicazioni dell'ente sulle pratiche.</mds-text>
+</div>
+<mds-modal opened aria-label="Nuovo referente">
+  <mds-banner
+    slot="window"
+    variant="light"
+    tone="box"
+    dismissible
+    headline="Nuovo referente"
+  >
+    <form class="grid gap-between-fields">
+      <mds-input-field label="Nome e cognome">
+        <mds-input value="Marco Bianchi"></mds-input>
+      </mds-input-field>
+      <mds-input-field label="PEC">
+        <mds-input type="email" value="m.bianchi@pec.esempio.it"></mds-input>
+      </mds-input-field>
+    </form>
+    <mds-button slot="action" variant="dark" tone="outline">Annulla</mds-button>
+    <mds-button slot="action">Aggiungi</mds-button>
+  </mds-banner>
+</mds-modal>

package/agents/patterns/previews/surfaces/edit-actions.html

@@ -0,0 +1,35 @@
+<!--
+try: Correct a field anywhere in the form and save without scrolling: Annulla and Salva stay docked at the bottom of the window for the whole edit, and the form has no row of its own at its end.
+height: 560
+whole-page: true
+-->
+<main class="page-frame grid gap-between-sections py-between-sections">
+  <mds-text typography="page" tag="h1">Modifica pratica</mds-text>
+  <form class="grid max-w-form gap-between-fields">
+    <mds-input-field label="Oggetto">
+      <mds-input value="Rinnovo concessione suolo pubblico"></mds-input>
+    </mds-input-field>
+    <mds-input-field label="Richiedente">
+      <mds-input value="Marco Bianchi"></mds-input>
+    </mds-input-field>
+    <mds-input-field label="Codice fiscale">
+      <mds-input value="BNCMRC80A01H294K"></mds-input>
+    </mds-input-field>
+    <mds-input-field label="PEC">
+      <mds-input type="email" value="m.bianchi@pec.esempio.it"></mds-input>
+    </mds-input-field>
+    <mds-input-field label="Indirizzo">
+      <mds-input value="Via Emilia 12"></mds-input>
+    </mds-input-field>
+    <mds-input-field label="Comune">
+      <mds-input value="Santarcangelo di Romagna"></mds-input>
+    </mds-input-field>
+    <mds-input-field label="Durata in giorni">
+      <mds-input value="90"></mds-input>
+    </mds-input-field>
+  </form>
+</main>
+<mds-status-bar visible description="Modifiche non salvate">
+  <mds-button variant="dark" tone="outline">Annulla</mds-button>
+  <mds-button>Salva</mds-button>
+</mds-status-bar>

package/agents/patterns/previews/surfaces/section.html

@@ -0,0 +1,35 @@
+<!--
+try: Look at the sections: no fill, no border, no inset of their own; the title of each and the space between them set them apart. The header of the page is the first one, in the flow.
+-->
+<div class="grid gap-between-sections">
+  <div class="grid gap-title-content">
+    <mds-text typography="page" tag="h1">Cambio di residenza</mds-text>
+    <mds-text typography="detail" tag="p" class="text-fg-muted">Pratica 2026/0142, ricevuta il 3 marzo 2026</mds-text>
+  </div>
+  <section class="grid gap-title-content">
+    <mds-text typography="section" tag="h2">Richiedente</mds-text>
+    <dl class="m-0 grid max-w-form items-start gap-between-fields @md:grid-cols-2">
+      <div class="grid gap-label-control">
+        <mds-text typography="label" tag="dt" class="text-fg-muted">Nome e cognome</mds-text>
+        <mds-text tag="dd" class="m-0">Marco Bianchi</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">12 aprile 1980</mds-text>
+      </div>
+    </dl>
+  </section>
+  <section class="grid gap-title-content">
+    <mds-text typography="section" tag="h2">Nuova 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 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>
+  </section>
+</div>

package/agents/patterns/previews/titles/dialog.html

@@ -0,0 +1,18 @@
+<!--
+try: Look at Nuovo contatto, the headline of the window with its X at the end of the row: it names the dialog on screen, and aria-label on mds-modal names it for a screen reader.
+height: 400
+-->
+<mds-modal opened interaction="strict" aria-label="Nuovo contatto">
+  <mds-banner slot="window" variant="light" tone="box" dismissible headline="Nuovo contatto">
+    <form class="grid gap-between-fields">
+      <mds-input-field label="Nome e cognome">
+        <mds-input value="Marco Bianchi"></mds-input>
+      </mds-input-field>
+      <mds-input-field label="Email">
+        <mds-input type="email" value="m.bianchi@comune.esempio.it"></mds-input>
+      </mds-input-field>
+    </form>
+    <mds-button slot="action" variant="dark" tone="outline">Annulla</mds-button>
+    <mds-button slot="action">Aggiungi</mds-button>
+  </mds-banner>
+</mds-modal>

package/agents/patterns/previews/titles/group.html

@@ -0,0 +1,14 @@
+<!--
+try: Look at Residenza: the legend of the fieldset, styled as the title of a part but not a heading of the page; a screen reader says it before each field of the group.
+-->
+<form class="max-w-form">
+  <fieldset class="field-group">
+    <legend>Residenza</legend>
+    <mds-input-field label="Indirizzo">
+      <mds-input value="Via Emilia 12/A"></mds-input>
+    </mds-input-field>
+    <mds-input-field label="Comune">
+      <mds-input value="Santarcangelo di Romagna"></mds-input>
+    </mds-input-field>
+  </fieldset>
+</form>

package/agents/patterns/previews/titles/page.html

@@ -0,0 +1,25 @@
+<!--
+try: Look at Richieste di residenza: the title of the page, the largest of the ladder, on the only h1; the list under it adds no title of its own.
+-->
+<div class="grid gap-between-sections">
+  <header class="grid gap-title-content">
+    <mds-text typography="page" tag="h1">Richieste di residenza</mds-text>
+    <mds-text typography="detail" tag="p" class="text-fg-muted">Le richieste degli ultimi trenta giorni, dalla più recente.</mds-text>
+  </header>
+  <mds-table class="w-full">
+    <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">2026/0412</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">2026/0398</mds-text></mds-table-cell>
+        <mds-table-cell><mds-text typography="detail">Luca Ferri</mds-text></mds-table-cell>
+      </mds-table-row>
+    </mds-table-body>
+  </mds-table>
+</div>

package/agents/patterns/previews/titles/part.html

@@ -0,0 +1,24 @@
+<!--
+try: Look at the titles of the two cards: parts, one size under the title of their section and one level under it in the outline, h3 under the h2.
+-->
+<section class="grid gap-title-content">
+  <mds-text typography="section" tag="h2">Pratiche collegate</mds-text>
+  <div class="grid gap-between-containers">
+    <mds-card>
+      <mds-card-header>
+        <mds-text typography="part" tag="h3">Cambio di residenza</mds-text>
+      </mds-card-header>
+      <mds-card-content>
+        <mds-text typography="detail" tag="p">Protocollo 2026/0398, chiusa il 12 ottobre 2026.</mds-text>
+      </mds-card-content>
+    </mds-card>
+    <mds-card>
+      <mds-card-header>
+        <mds-text typography="part" tag="h3">Carta di identità</mds-text>
+      </mds-card-header>
+      <mds-card-content>
+        <mds-text typography="detail" tag="p">Protocollo 2026/0371, in attesa del ritiro.</mds-text>
+      </mds-card-content>
+    </mds-card>
+  </div>
+</section>

package/agents/patterns/previews/titles/section.html

@@ -0,0 +1,14 @@
+<!--
+try: Look at Richiedente and Nuova residenza: two sections, a step under the title of the page in size and one level under it in the outline, h2 under its h1.
+-->
+<div class="grid gap-between-sections">
+  <mds-text typography="page" tag="h1">Riepilogo della richiesta</mds-text>
+  <section class="grid gap-title-content">
+    <mds-text typography="section" tag="h2">Richiedente</mds-text>
+    <mds-text typography="detail" tag="p">Giulia Bianchi, nata a Rimini il 4 marzo 1985.</mds-text>
+  </section>
+  <section class="grid gap-title-content">
+    <mds-text typography="section" tag="h2">Nuova residenza</mds-text>
+    <mds-text typography="detail" tag="p">Via Emilia 12/A, 47822 Santarcangelo di Romagna.</mds-text>
+  </section>
+</div>

package/agents/patterns/previews/widths/dialog.html

@@ -0,0 +1,33 @@
+<!--
+try: Look at the window: the column of a form plus its inset, with Telefono and Interno side by side as on a page. Narrow the stage under 480 px: the window fills the width, and its fields and actions go one under the other.
+height: 640
+-->
+<mds-modal opened interaction="strict" aria-label="Nuovo referente">
+  <mds-banner
+    slot="window"
+    variant="light"
+    tone="box"
+    dismissible
+    headline="Nuovo referente"
+  >
+    <form class="field-group">
+      <mds-input-field label="Nome e cognome">
+        <mds-input value="Marco Bianchi"></mds-input>
+      </mds-input-field>
+      <mds-input-field
+        label="PEC"
+        message="La posta certificata delle comunicazioni ufficiali."
+      >
+        <mds-input type="email" value="m.bianchi@pec.comune.esempio.it"></mds-input>
+      </mds-input-field>
+      <mds-input-field label="Telefono" short>
+        <mds-input type="tel" value="0541 123456"></mds-input>
+      </mds-input-field>
+      <mds-input-field label="Interno" short>
+        <mds-input value="214"></mds-input>
+      </mds-input-field>
+    </form>
+    <mds-button slot="action" variant="dark" tone="outline">Annulla</mds-button>
+    <mds-button slot="action">Aggiungi</mds-button>
+  </mds-banner>
+</mds-modal>

package/agents/patterns/previews/widths/field.html

@@ -0,0 +1,20 @@
+<!--
+try: Look at Civico and CAP: two short fields of one address share a row, each half the column. Narrow the stage under 28rem: they take the whole column, one under the other.
+-->
+<form class="max-w-form">
+  <fieldset class="field-group">
+    <legend>Nuova residenza</legend>
+    <mds-input-field label="Via">
+      <mds-input value="Via Emilia"></mds-input>
+    </mds-input-field>
+    <mds-input-field label="Civico" short>
+      <mds-input value="12/A"></mds-input>
+    </mds-input-field>
+    <mds-input-field label="CAP" short variant="error" message="Il CAP ha cinque cifre: ne mancano due.">
+      <mds-input value="470"></mds-input>
+    </mds-input-field>
+    <mds-input-field label="Comune">
+      <mds-input value="Santarcangelo di Romagna"></mds-input>
+    </mds-input-field>
+  </fieldset>
+</form>

package/agents/patterns/previews/widths/form.html

@@ -0,0 +1,27 @@
+<!--
+try: Look at the end of the form: it stops where the text above it stops, its fields take the whole column and their messages stay on one line. Narrow the stage: the column follows it.
+-->
+<div class="grid gap-between-groups">
+  <div class="grid gap-title-content">
+    <mds-text typography="page" tag="h1">Nuovo referente</mds-text>
+    <mds-text typography="detail" tag="p">
+      Il referente riceve le comunicazioni dell'ente sulla pratica e risponde a nome
+      dell'azienda. Puoi cambiarlo in ogni momento dalla scheda dell'azienda.
+    </mds-text>
+  </div>
+  <form class="grid max-w-form gap-between-fields">
+    <mds-input-field label="Nome e cognome">
+      <mds-input value="Marco Bianchi"></mds-input>
+    </mds-input-field>
+    <mds-input-field label="PEC" message="La posta certificata delle comunicazioni ufficiali.">
+      <mds-input type="email" value="m.bianchi@pec.comune.esempio.it"></mds-input>
+    </mds-input-field>
+    <mds-input-field label="Ufficio" message="L'ufficio che segue la pratica per l'azienda.">
+      <mds-input value="Ufficio tecnico"></mds-input>
+    </mds-input-field>
+    <div class="flex justify-end gap-inline">
+      <mds-button variant="dark" tone="outline">Annulla</mds-button>
+      <mds-button>Aggiungi</mds-button>
+    </div>
+  </form>
+</div>