Zustände & Varianten stable

VelinStyle verwendet keine Tailwind-artigen Varianten-Präfixe (hover:, focus:, dark:). Nutzen Sie stattdessen Komponenten, Tokens und responsive Utilities. English: States & variants

Reifegrad

Komponenten-Zustände und responsive Utilities sind stable.

Eine vollständige Utility-Varianten-Engine (Tailwind-Parität) bleibt planned (nicht in 1.2.0).

Wann nutzen

Komponenten-Modifieratoren bevorzugen (velin-btn--primary, is-open) und Token-Themes für Interaktionszustände.
Breakpoint-Display-Utilities für responsives Ein-/Ausblenden nutzen.

Wann nicht

Keine hover:- / dark:-Klassenpräfixe erwarten — sie gehören nicht zur aktuellen API.
prefers-reduced-motion respektieren und :focus-visible-Muster nutzen — siehe Barrierefreiheit.

Kein `hover:`-Präfix

Interaktionszustände liegen im Komponenten-CSS (z. B. .velin-btn:hover). Für eigene Elemente Regeln oberhalb der Utilities ergänzen oder :hover im Projekt-CSS verwenden.

Responsive

Breakpoint-Präfixe nutzen Min-Width-Media-Queries: .velin-md-flex, .velin-lg-hidden. Siehe Breakpoints.

Dark Mode

data-velin-theme="dark" auf <html> setzen oder Color Modes nutzen — Tokens wechseln global; es gibt keine dark:-Utility-Klassen.

Zustands-Klassen

Lade- und Validierungshelfer: .velin-is-loading, .velin-is-disabled, .velin-is-error — siehe Utilities API.