Interaction states

La grammatica condivisa che compone stato persistente, validazione, disponibilità e feedback transiente senza perdere semantica.

@qoovex/ui/styles/base.css

Famiglie di stato

Gli alias qv-* normalizzano i selettori nativi, ARIA e Base UI. Non assegnano globalmente colori o stili arbitrari, ma garantiscono coerenza e prevedibilità su tutte le primitive del catalogo.

Feedback Transiente
Transient
hoverpressedfocus-visible
Si sovrappone allo stato reale solo quando disponibilità e modalità di input lo consentono. Su touch o screen reader non viene mai simulato come stato persistente.
Stato Persistente
Persistent
selectedcheckedindeterminateopen
Resta leggibile durante hover, press e focus. È gestito direttamente dalla primitive accessibile e non viene ricreato con state manuale in React.
Validazione & Sistema
System
invalidloading / pending
Aggiunge significato semantico senza cancellare la selezione. Lo stato pending mostra il valore reale e blocca solo nuove attivazioni concorrenti.
Disponibilità & Accesso
Availability
readonlydisabled
Readonly preserva focus e selezione del testo; disabled sopprime interamente attivazione, hover, press e navigazione da tastiera.

Composizione e precedenza

Gli stati si compongono a livelli: il focus-visible è additivo su ogni controllo focusabile, mentre hover e pressed si attivano solo se il controllo è disponibile e la modalità di input lo supporta.

01
Base / Rest
Geometria iniziale, semantica nativa e conformità WAI-ARIA.
02
Stato Persistente
Valore logico attivo: selected, checked, indeterminate oppure open.
03
Validazione & Sistema
Invalid o loading si sommano allo stato persistente senza mascherarlo.
04
Disponibilità & Input
Readonly, disabled, focus-visible, hover e pressed regolano l'interattività.

Matrice di prova

Tutte le primitive sotto sono reali e interattive. Usa mouse, tastiera (Tab, Spazio, Invio) o touch per verificare come gli stati si compongono senza perdita di semantica.

Feedback transiente (Hover & Press)

Pulsante di Azione (rest → hover → pressed)

Feedback locale senza layout shift o selezione persistente

Toggle Button (selected specifico)

Base UI usa data-pressed come selezione su Toggle

Stati persistenti (Selected, Checked, Open)

Tabs (selected + hover / focus-visible)

Vista riepilogo attiva
aria-selected resta la fonte persistente dello stato

Checkbox (checked + focus-visible)

Il focus non cancella data-checked né l'indicatore grafico

Checkbox Indeterminate (Selezione Parziale)

Stato misto con indicatore semantico dedicato

Collapsible (open + rapid interaction)

Lo stato resta nel DOM durante il lifecycle previsto da Base UI.

Input rapido termina sempre sull'ultima intenzione

Validazione, Sistema & Disponibilità

Input Invalido (invalid + focus-visible)

Inserisci il codice completo.

Stato Loading (attesa asincrona)

Aria-busy e copy preservano il contesto; disabilita activation

Sola Lettura (readonly + focus-visible)

Controllo Disattivato (disabled)

Sopprime interamente attivazione, hover e press

Alias di stato Tailwind (qv-*)

I variant plugin di Tailwind esportati da @qoovex/ui normalizzano gli stati tra Base UI, selector ARIA e pseudo-classi standard.

Alias TailwindTarget SelettoreScopo e Regola
qv-hover::hover (fine pointer)Hover condizionato a pointer fine (mouse)
qv-pressed::active, [data-pressed]Feedback di pressione elastica locale
qv-selected:[aria-selected='true'], [data-selected]Selezione persistente in tab e liste
qv-checked:[aria-checked='true'], [data-checked]Stato checked di checkbox e radio
qv-indeterminate:[data-indeterminate]Selezione parziale o mista
qv-open:[data-state='open'], [open]Pannelli e collapsible espansi
qv-invalid:[aria-invalid='true'], :invalidControllo in errore di validazione
qv-readonly:[readonly], [aria-readonly='true']Dato in sola lettura selezionabile
qv-disabled::disabled, [aria-disabled='true']Controllo disattivato non interattivo
qv-loading:[data-loading], [aria-busy='true']Attesa asincrona con stato visibile