Icone
Scala, allineamento, semantica accessibile e lifecycle delle icone Qoovex, senza nascondere le API native Tabler.
@tabler/icons-react · @qoovex/ui/styles/base.cssScala semantica
La size descrive una responsabilità, non un’aggiustatura locale. Il tratto resta quello Tabler e il colore eredita sempre currentColor.
--icon-compactMetadata, testo xs/sm e densità controllata.
--iconButton, field, menu, navigation e testo base.
--icon-emphasizedLeading status con gerarchia maggiore.
--icon-illustrativeEmpty state e marker focali in container dedicati.
12 px resta un’eccezione interna dei controlli micro; 24 px non ha oggi un ruolo canonico; 32 px resta una decisione component-specific per container illustrativi.
Allineamento ottico
La griglia rende misurabili box, line box e centro del controllo. Solo il leading multilinea usa un offset locale verso la prima riga.
Il leading icon segue il centro della prima line box anche quando il testo si estende su più righe o usa il fallback font.
Semantica e colore
Decorative, icon-only e informative sono tre contratti distinti. Tema e forced colors funzionano perché il glyph eredita il colore del proprio owner.
Loading
Lo spinner è decorativo; il parent mantiene busy state e feedback testuale. In reduced motion la rotazione si ferma senza nascondere lo stato.
Lifecycle Motion
Il button possiede semantica e activation; Motion governa soltanto la continuità open/close del chevron. Click ripetuti retargettano il valore corrente.
- Stato
- closed
- Press
- rilasciato
- Reduced
- rotazione state-driven