Catalogo dei componenti v0.5.2

<x-italia::layout title="Titolo della pagina">
    <x-slot:slim ente="Comune di Roma" ente-url="/" login-url="/login"></x-slot:slim>
    <x-slot:center title="Comune di Roma" tagline="Portale istituzionale" url="/" search-url="/cerca">
        <x-italia::header-social-link url="https://facebook.com" icon="it-facebook" label="Facebook" />
    </x-slot:center>
    <x-slot:navbar>
        <x-italia::header-nav-item text="Amministrazione" url="/amministrazione" />
        <x-italia::header-nav-item text="Servizi" url="/servizi" />
    </x-slot:navbar>
    <x-slot:footer title="Comune di Roma">
        <x-italia::footer-legal-link url="/privacy" text="Privacy policy" data-element="privacy-policy-link" />
    </x-slot:footer>
    <x-slot:breadcrumbs>...</x-slot:breadcrumbs>
    Contenuto della pagina
</x-italia::layout>

<x-italia::layout title="Pagina senza footer" :show-footer="false">
    <h2 class="h4">Accesso al servizio</h2>
    <p>Pagina di esempio senza footer, ideale per il login e per i layout minimali.</p>
</x-italia::layout>

<x-italia::header-slim ente="Comune di Roma" login-url="/login">
    <x-slot:links><li><a href="/servizi">Servizi</a></li></x-slot:links>
    <x-slot:languages><li><a href="/en">English</a></li></x-slot:languages>
</x-italia::header-slim>

<x-italia::header-center title="Comune di Roma" tagline="Portale istituzionale" search-url="/search">
    <x-slot:social-links>
        <x-italia::header-social-link url="https://facebook.com" icon="it-facebook" label="Facebook" />
    </x-slot:social-links>
</x-italia::header-center>

<x-italia::header-navbar>
    <x-italia::header-nav-item text="Home" url="/" active />
    <x-italia::header-nav-item text="Servizi" url="/servizi" dropdown>
        <li><a class="dropdown-item list-item" href="/anagrafe">Anagrafe</a></li>
    </x-italia::header-nav-item>
</x-italia::header-navbar>

// Oppure combina tutti e tre insieme:
<x-italia::header>
    <x-slot:slim ente="Comune di Roma" login-url="/login"></x-slot:slim>
    <x-slot:center title="Comune di Roma" search-url="/search">
        <x-italia::header-social-link url="https://facebook.com" icon="it-facebook" label="Facebook" />
    </x-slot:center>
    <x-slot:navbar>
        <x-italia::header-nav-item text="Home" url="/" active />
    </x-slot:navbar>
</x-italia::header>

<x-italia::footer title="Comune di Roma" subtitle="Portale istituzionale">
    <x-slot:sections>
        <x-italia::footer-section title="Amministrazione">
            <li><a class="list-item" href="/amministrazione">...</a></li>
        </x-italia::footer-section>
    </x-slot:sections>
    <x-slot:contacts>
        <div class="col-lg-4">
            <p>...</p>
            <a href="tel:...">Telefono: ...</a>
            <a href="mailto:...">Email: ...</a>
            <a href="mailto:...">PEC: ...</a>
        </div>
    </x-slot:contacts>
    <x-slot:social>
        <x-italia::footer-social-link url="https://facebook.com" icon="it-facebook" label="Facebook" />
    </x-slot:social>
    <x-slot:legal-links>
        <x-italia::footer-legal-link
            url="/privacy"
            text="Informativa sulla privacy"
            data-element="privacy-policy-link"
        />
    </x-slot:legal-links>
</x-italia::footer>

<x-italia::alert variant="info">Informazione importante.</x-italia::alert>
<x-italia::alert variant="success" title="Fatto!">Operazione completata.</x-italia::alert>
<x-italia::alert variant="warning">Attenzione a questo elemento.</x-italia::alert>
<x-italia::alert variant="danger" title="Errore" dismissible>Qualcosa è andato storto.</x-italia::alert>

<x-italia::badge>Principale</x-italia::badge>
<x-italia::badge variant="success">Successo</x-italia::badge>
<x-italia::badge variant="danger" pill>3 nuovi</x-italia::badge>
<x-italia::badge variant="info" href="/foo">Badge con link</x-italia::badge>

<x-italia::card title="Titolo della card" subtitle="Sottotitolo">
    Contenuto della card con testo descrittivo.
</x-italia::card>

<x-italia::card title="Card con immagine" image="https://..." image-alt="Immagine descrittiva della card">
    Testo della card con immagine sopra.
</x-italia::card>

<x-italia::card title="Card con azioni">
    Card con slot per azioni in fondo.
    <x-slot:actions>
        <x-italia::button size="sm">Azione</x-italia::button>
        <x-italia::button variant="outline" size="sm">Annulla</x-italia::button>
    </x-slot:actions>
</x-italia::card>

<x-italia::card title="Card link" href="/catalog">
    Cliccabile nella sua interezza.
</x-italia::card>

// Varianti
<x-italia::card big>Card grande</x-italia::card>
<x-italia::card teaser>Card teaser</x-italia::card>

<x-italia::button data-bs-toggle="modal" data-bs-target="#my-modal">Apri</x-italia::button>

<x-italia::modal id="my-modal" title="Conferma">
    Sei sicuro?
    <x-slot:footer>
        <x-italia::button>Conferma</x-italia::button>
        <x-italia::button variant="outline" data-bs-dismiss="modal">Annulla</x-italia::button>
    </x-slot:footer>
</x-italia::modal>

<x-italia::button data-bs-toggle="modal" data-bs-target="#demo-modal-description">
    Apri modal con descrizione
</x-italia::button>

<x-italia::modal
    id="demo-modal-description"
    title="Modal con descrizione ARIA"
    description="Questo testo è collegato all'attributo aria-describedby della modale, per gli screen reader."
    size="lg"
    centered
>
    Il parametro description è opzionale e viene collegato all'attributo aria-describedby.
</x-italia::modal>

// Varianti
<x-italia::modal title="..." size="lg" centered />
<x-italia::modal title="..." size="xl" scrollable />
<x-italia::modal title="..." static />

<x-italia::button>Principale</x-italia::button>
<x-italia::button variant="secondary">Secondario</x-italia::button>
<x-italia::button variant="danger">Pericolo</x-italia::button>
<x-italia::button variant="outline">Outline</x-italia::button>
<x-italia::button variant="link">Link</x-italia::button>
<x-italia::button size="sm">Piccolo</x-italia::button>
<x-italia::button size="lg">Grande</x-italia::button>
<x-italia::button disabled>Disabilitato</x-italia::button>
<x-italia::button loading>Caricamento…</x-italia::button>
<x-italia::button href="/catalog">Link con aspetto da pulsante</x-italia::button>

<x-italia::spinner size="sm" />
<x-italia::spinner />
<x-italia::spinner size="lg" />
<x-italia::spinner size="xl" label="Caricamento in corso" />
<x-italia::spinner :double="false" size="lg" />

<x-italia::icon name="it-search" />
<x-italia::icon name="it-search" size="lg" />
<x-italia::icon name="it-search" size="xl" label="Cerca" />
<x-italia::icon name="it-close" spacing="right" />

<x-italia::input name="nome" label="Nome" />
<x-italia::input name="cf_demo" label="Codice Fiscale (demo)" placeholder="RSSMRA80A01H501U" />
<x-italia::input name="email" type="email" label="Email" hint="name@example.com" required />
<x-italia::input name="password" type="password" label="Password" />
<x-italia::input name="eta" type="number" label="Età" hint="Minimo 18 anni" />
<x-italia::input name="semplice" label="Senza etichetta flottante" :floating="false" />

<x-italia::select name="paese" label="Paese" required :options="['it' => 'Italia', ...]" placeholder="Seleziona..." />
<x-italia::select name="citta" label="Città" :options="['Nord' => ['mi' => 'Milano', ...], ...]" />
<x-italia::select name="ruoli" label="Ruoli" :options="[...]" multiple />

<x-italia::select name="citta-slot" label="Città (slot)">
    <option value="mi">Milano</option>
    <option value="na">Napoli</option>
    <option value="rm">Roma</option>
    <option value="to">Torino</option>
</x-italia::select>

<x-italia::select name="citta-filtro" label="Città (filtro)" placeholder="Tutte le città" :placeholder-disabled="false" :options="['mi' => 'Milano', 'na' => 'Napoli', 'rm' => 'Roma']" />

<x-italia::textarea name="bio" label="Biografia" hint="Max 500 caratteri" />
<x-italia::textarea name="note" label="Note" :rows="5" />

<x-italia::checkbox name="termini" label="Accetto i termini" required />
<x-italia::checkbox name="newsletter" label="Iscriviti alla newsletter" value="yes" />
<x-italia::checkbox name="promo" label="Pre-selezionata" checked />
<x-italia::checkbox name="sms" label="Disabilitata" disabled />

// Gruppo: usa [] nel nome per un array
<x-italia::checkbox name="interessi[]" value="sport" label="Sport" />
<x-italia::checkbox name="interessi[]" value="musica" label="Musica" />
<x-italia::checkbox name="interessi[]" value="viaggi" label="Viaggi" />

<form method="get" action="/catalog">
    <x-italia::checkbox-group name="demo" legend="Interessi" hint="Seleziona uno o più interessi">
        <x-italia::checkbox name="demo[]" value="sport" label="Sport" />
        <x-italia::checkbox name="demo[]" value="musica" label="Musica" />
        <x-italia::checkbox name="demo[]" value="viaggi" label="Viaggi" />
    </x-italia::checkbox-group>
</form>

<x-italia::radio name="genere" value="m" label="Maschio" />
<x-italia::radio name="genere" value="f" label="Femmina" />
<x-italia::radio name="genere" value="o" label="Altro" />
<x-italia::radio name="genere" value="x" label="Disabilitata" disabled />

<form method="get" action="/catalog">
    <x-italia::radio-group name="demo" legend="Genere" hint="Seleziona un'opzione" required>
        <x-italia::radio name="demo" value="m" label="Maschio" />
        <x-italia::radio name="demo" value="f" label="Femmina" />
        <x-italia::radio name="demo" value="o" label="Altro" />
    </x-italia::radio-group>
</form>