dev-kit-italia, senza JavaScript

I componenti del design system .italia come ricette daisyUI

Ogni componente è HTML con classi ita-* costruite su daisyUI e Tailwind: nessun web component, nessun Bootstrap. I colori arrivano tutti dai token del tema, quindi cambiando data-theme cambia tutto.

Stesso markup, un tema per riquadro

Qui sotto lo stesso frammento HTML è ripetuto dentro un contenitore per ogni tema, ciascuno con un data-theme diverso.

Uso

@import "tailwindcss";
@import "@italia-tailwind/css";

<html data-theme="italia-original">
  <button class="ita-btn ita-btn-primary">Invia</button>

  <!-- i temi si annidano -->
  <section data-theme="italia-dark"> … </section>
</html>

Componenti

• Accordion

  <it-accordion>, <it-accordion-item>

  Elementi richiudibili su <details>/<summary> nativi con daisyUI collapse: apertura, chiusura e tastiera funzionano senza JavaScript.

• Alert

  <it-alert>

  Messaggi di stato con la barra sinistra .italia: daisyUI alert, con bordo sinistro da 8px nel colore della variante e icona colorata.

• Autocomplete

  <it-autocomplete>

  Campo con suggerimenti mentre si scrive: input daisyUI legato a un <datalist> nativo. Filtraggio, frecce e Invio li gestisce il browser.

• Avatar

  <it-avatar>, <it-avatar-group>

  Immagine, iniziali o icona dell'utente in un cerchio, nelle sei misure di bootstrap-italia (16–112px), con stato, gruppi sovrapposti e menu.

• Back

  <it-back>

  Il link «Torna indietro» con la freccia a sinistra: un <a> verso la pagina padre, come link semplice o come pulsante piccolo.

• Back to top

  <it-back-to-top>

  Il pulsante rotondo che riporta in cima alla pagina: un link a #top, fisso in basso a destra, che compare dopo lo scorrimento.

• Badge

  .badge (bootstrap-italia)

  Piccole etichette di conteggio o stato. Il testo è 0.75em, quindi il badge scala con il testo che lo contiene.

• Bottom navigation

  <it-bottom-nav>

  La barra di navigazione in fondo allo schermo delle app mobili: daisyUI dock con icona, etichetta, contatori e la voce corrente in colore primario.

• Breadcrumbs

  <it-breadcrumbs>

  Percorso di navigazione: daisyUI breadcrumbs su un elenco ordinato, con il separatore «/» di .italia o la freccia di daisyUI.

• Button

  <it-button>

  Pulsanti per azioni: ita-btn più la variante di colore. Sotto c'è daisyUI btn, con il peso 600, il testo a 16px e lo spazio per le icone di .italia.

• Callout

  <it-callout>, <it-callout-more>

  Riquadri di approfondimento con titolo maiuscolo e icona, sui token del tema; la variante «Approfondimento» usa l'angolo piegato it-fold-corner.

• Card

  <it-card>

  Card editoriali, inline, profilo e banner. daisyUI card con bordo sottile, ombre di design-tokens-italia e titolo come link.

• Carousel

  <it-carousel>, <it-carousel-item>

  Caroselli di card o immagini su daisyUI carousel (scroll-snap). Pulsanti avanti/indietro e punti di navigazione sono pseudo-elementi CSS (::scroll-button, ::scroll-marker): nessuno script.

• Checkbox

  <it-checkbox>

  Caselle di controllo native con daisyUI checkbox nel colore primario, raggruppate in un fieldset con legenda, testo di aiuto e messaggio di errore.

• Chip

  <it-chip>

  Etichette a pillola per argomenti e filtri: daisyUI badge ingrandito a 32/40px, con icona, avatar e chiusura opzionali.

• Collapse

  <it-collapse>

  Un pannello che si apre e si chiude da un pulsante o da un link: <details>/<summary> su daisyUI collapse, con l'animazione di altezza di daisyUI.

• Dropdown

  <it-dropdown>, <it-dropdown-item>

  Menu a tendina su <details>/<summary> nativi con daisyUI dropdown e menu: apertura, chiusura con Esc e tastiera senza JavaScript. La tacca .italia è una pseudo-classe before che eredita lo sfondo del menu.

• Footer

  .it-footer (bootstrap-italia)

  Piè di pagina istituzionale a due fasce: colonne di link e contatti su primary, note legali su accent, oppure sulla superficie base (lo sfondo della pagina) con testo primary. daisyUI footer e footer-title, colori dai token del tema.

• Forward

  <it-forward>

  La freccia che porta alla sezione successiva, di solito in fondo a un hero: un link ad ancora con scorrimento fluido del browser.

• Header

  <it-header>

  Le tre fasce dell'intestazione .italia — slim, centrale e navigazione — su daisyUI menu, dropdown e navbar. Su mobile il menu si apre con una checkbox, senza JavaScript.

• Hero

  <it-hero>

  Blocco di apertura con immagine di sfondo, occhiello, titolo e azione. daisyUI hero e hero-overlay, con i colori presi dai token del tema.

• Input

  <it-input>

  Campi di testo .italia: etichetta sopra, bordo ardesia, testo di aiuto e messaggi di validazione legati con aria-describedby. daisyUI input, textarea, floating-label e validator.

• Megamenu

  <it-megamenu>

  Il pannello largo della navigazione principale: colonne di link, blocco descrittivo, link di sezione e call to action. Un <details> dentro daisyUI dropdown, quindi funziona con la tastiera e senza JavaScript.

• Modal

  <it-modal>

  Finestre modali su daisyUI modal. Tre aperture senza JavaScript d'autore: <dialog> con command/commandfor, :target e la checkbox modal-toggle.

• Navscroll

  <it-navscroll>

  L'indice di pagina di bootstrap-italia: link ad ancora con la sezione corrente evidenziata durante lo scorrimento e una barra di avanzamento della lettura.

• Notification

  <it-notification>

  Notifiche brevi con titolo, icona e barra laterale colorata. Nel flusso della pagina, oppure in un angolo dello schermo come popover nativo posizionato da daisyUI toast.

• Overlay

  <it-dimmer>, .overlay-panel (bootstrap-italia)

  Due sovrapposizioni: il pannello sopra un'immagine (didascalia, icona, a tutta altezza) e il dimmer che copre un contenitore con messaggio e azioni. Il dimmer si apre con una checkbox, senza JavaScript.

• Pagination

  <it-pagination>, <it-pagination-item>

  Paginazione a link reali: daisyUI btn-ghost 48×48px con bordo 2px sulla pagina corrente. Sotto i 640px resta visibile solo la pagina corrente.

• Popover

  <it-popover>

  Un riquadro con titolo e contenuto che si apre al clic accanto al suo pulsante: popover API nativa più l'ancoraggio CSS che daisyUI dropdown già usa.

• Progress

  <it-progress>, <it-progress-donut>, <it-spinner>

  Indicatori di avanzamento: barra sottile su <progress> nativo, ciambella daisyUI radial-progress, spinner e pulsante in caricamento.

• Radio

  <it-radio>, <it-radio-group>

  Pulsanti di opzione nativi con daisyUI radio nel colore primario, in un fieldset con legenda: lo stesso name li rende esclusivi e le frecce si muovono nel gruppo.

• Rating

  <it-rating>

  Valutazione a stelle nel colore primario: un gruppo di radio daisyUI rating per votare, o una sola immagine etichettata per mostrare un voto.

• Section

  <it-section>

  Fasce di pagina a tutta larghezza con titolo, testo introduttivo e un contenitore centrato: sfondo neutro, grigio, primario, enfasi o immagine.

• Select

  <it-select>

  Menu di selezione su <select> nativo con daisyUI select: tastiera, lettori di schermo e selettore del sistema su mobile funzionano senza script.

• Skiplinks

  <it-skiplinks>

  I collegamenti «Vai al contenuto» per chi naviga da tastiera: nascosti con sr-only, la barra intera compare in cima quando uno di loro riceve il focus.

• Stepper

  <it-steppers>

  L'intestazione dei moduli a più passaggi, con passi completati, passo corrente e navigazione Indietro/Avanti con punti o barra di avanzamento.

• Sticky

  <it-sticky>

  Elementi che restano attaccati al bordo durante lo scorrimento: position: sticky di Tailwind, con ombra solo quando l'elemento è davvero bloccato grazie alle scroll-state container query.

• Tabs

  <it-tabs>, <it-tab-item>, <it-tab-panel>

  Schede su radio button nativi con daisyUI tabs: il pannello visibile segue il radio selezionato. Stile .italia sottolineato o a schede, anche con icone. Per le sezioni su pagine diverse ci sono le schede come link.

• Thumbnav

  <it-thumbnav>

  Una fila di miniature per scegliere un'immagine: link ad ancora verso le slide di un carosello, con la miniatura corrente evidenziata durante lo scorrimento.

• Timeline

  <it-timeline>, <it-timeline-item>

  La linea del tempo di bootstrap-italia: pin rotondi con icona, data accanto al pin, card con titolo e link, e l'indicatore «Oggi» fra passato e futuro. daisyUI timeline verticale.

• Toggle

  <it-toggle>

  Interruttori acceso/spento: checkbox nativo con role=switch e daisyUI toggle nel colore primario. L'etichetta sta a sinistra e l'interruttore sul bordo destro, come in bootstrap-italia.

• Toolbar

  <it-toolbar>

  Barra di azioni con icone ed etichette, divisori, contatori e un menu «Altro»: una lista di link con utility Tailwind, daisyUI indicator per i badge e Dropdown per il menu.

• Tooltip

  <it-tooltip>

  Suggerimenti al passaggio del mouse e al focus da tastiera. daisyUI tooltip per il caso rapido, oppure un elemento reale con role=tooltip e aria-describedby quando il testo deve essere annunciato.

• Transfer

  <it-transfer>

  Spostare voci da un elenco «disponibili» a un elenco «selezionati». Nella versione solo CSS ogni voce è un checkbox che cambia colonna quando viene selezionato; la versione classica usa due elenchi e pulsanti di invio.

• Upload

  <it-upload>

  Caricamento di file: daisyUI file-input, un'area di trascinamento dove si rilasciano i file direttamente sul campo nativo, l'elenco dei file allegati con stato e avanzamento, e il cambio della foto profilo.

• Video

  <it-video>

  Video nativi con controlli del browser, sottotitoli WebVTT e trascrizione in un pannello richiudibile; video di YouTube dietro l'avviso di consenso di bootstrap-italia.