Accordion

Cos'è Grigna?

Un design system pensato per persone e agenti AI: token, componenti e linee guida scritte per due lettori.

Quali icone usa?

Lucide 1.57.0, una sola libreria per tutto il sistema.

Si può usare in altri progetti?

Per ora no: è un progetto personale e un caso studio.

Cos'è

Una lista di sezioni con un titolo sempre visibile e un contenuto che si apre e si chiude cliccando sul titolo.

Quando usarlo

Domande frequenti, dettagli tecnici, informazioni secondarie che non devono occupare spazio.
Quando chi legge cerca una sola risposta tra tante, e le altre possono restare chiuse.

Quando non usarlo

Per informazioni importanti che tutti devono leggere: nasconderle non le rende più semplici, le rende invisibili.
Per passi in sequenza, come una procedura: lì serve una struttura che mostri l'ordine.
Un accordion dentro un altro accordion: mai.
Con una sola sezione: basta il testo, o un link "mostra di più".

Codice

<div class="grigna-accordion">
  <details class="grigna-accordion__item">
    <summary class="grigna-accordion__summary">Titolo della sezione</summary>
    <div class="grigna-accordion__content">
      <p>Contenuto della sezione.</p>
    </div>
  </details>
  <details class="grigna-accordion__item">
    <summary class="grigna-accordion__summary">Altra sezione</summary>
    <div class="grigna-accordion__content">
      <p>Altro contenuto.</p>
    </div>
  </details>
</div>

Non serve JavaScript: apertura e chiusura le gestisce il browser.

Varianti e stati

Come	Risultato
(nessun attributo)	Si possono aprire più sezioni insieme. È il comportamento di default
Stesso `name="…"` su tutti i `<details>` del gruppo	Una sola sezione aperta alla volta: aprendone una, le altre si chiudono
`open` su un `<details>`	Quella sezione è aperta quando la pagina si carica
Hover, focus	Superficie tenue al passaggio del mouse, anello Abete da tastiera

La freccia a destra la disegna il CSS: punta in giù da chiuso e in su da aperto.

Testi

Titolo: dice cosa c'è dentro, in poche parole. Una domanda funziona bene per le FAQ ("Quali icone usa?").
Contenuto: breve. Se un contenuto è lungo, forse merita una pagina sua.

Token

--grigna-accordion-bg, -bg-hover, -border, -icon, -text, -radius, -min-height, -padding-x, -padding-y, -gap, -summary-font, -content-font (tutti con prefisso --grigna-accordion).

Accessibilità

<details> e <summary> sono nativi: tastiera (Invio e Spazio), stato "aperto/chiuso" letto dallo screen reader e ricerca nella pagina anche dentro le sezioni chiuse funzionano senza codice in più.
Area cliccabile del titolo alta almeno 44px.
Il titolo è testo semplice: niente link o bottoni dentro <summary>.

Per gli agenti

Sempre

Struttura completa: grigna-accordion > details.grigna-accordion__item > summary.grigna-accordion__summary + div.grigna-accordion__content.
Per "una sola aperta alla volta" usa l'attributo name, uguale su tutto il gruppo.

Mai

Mai ricostruire l'accordion con <div> e JavaScript: usa <details> e <summary>.
Mai link, bottoni o altri controlli dentro <summary>.
Mai accordion annidati, mai un accordion con una sola sezione.
Mai nascondere in un accordion informazioni che tutti devono leggere.