States & variants stable

VelinStyle does not use Tailwind-style variant prefixes (hover:, focus:, dark:). Use components, tokens, and responsive utilities instead. Deutsch: Zustände & Varianten

Maturity: Component states and responsive utilities are stable. A complete Tailwind-parity utility variant engine remains planned (not in 1.2.0).

When to use

Prefer component modifiers (velin-btn--primary, is-open) and token themes for interaction states.
Use breakpoint display utilities for responsive show/hide.

When not

Do not expect hover: / dark: class prefixes — they are not part of the current API.
Respect prefers-reduced-motion and use :focus-visible patterns — see Accessibility.

No `hover:` prefix

Interactive states live in component CSS (e.g. .velin-btn:hover). For custom elements, add your own rules in a layer above utilities or use :hover in project CSS.

Responsive

Breakpoint prefixes use min-width media queries: .velin-md-flex, .velin-lg-hidden. See Breakpoints.

Dark mode

Set data-velin-theme="dark" on <html> or use Color modes — tokens swap globally; there are no dark: utility classes.

State classes

Loading and validation helpers: .velin-is-loading, .velin-is-disabled, .velin-is-error — see Utilities API.