VelinStyle Interactions 1.2.2
Control how users interact with elements — cursor style, pointer events, text selection, and touch actions. Deutsch: Interaktionen
Maturity: Documented as stable in VelinStyle 1.2.0.
Studio and the complete Utility Engine remain planned — shipping utilities are hand-authored under
@layer utilities, not a full variant generator.
When to use
- Control pointer events, user-select, and cursor with interaction utilities.
- See also state helpers in
state.css.
When not
- Do not disable pointer events on focusable controls without an accessible alternative.
Cursor
<div class="velin-cursor-auto">Auto cursor</div>
<div class="velin-cursor-pointer">Pointer cursor</div>
<div class="velin-cursor-wait">Wait cursor</div>
<div class="velin-cursor-text">Text cursor</div>
<div class="velin-cursor-move">Move cursor</div>
<div class="velin-cursor-not-allowed">Not allowed cursor</div>
<div class="velin-cursor-grab">Grab cursor</div>
<div class="velin-cursor-grabbing">Grabbing cursor</div>Auto cursor
Pointer cursor
Wait cursor
Text cursor
Move cursor
Not allowed cursor
Grab cursor
Grabbing cursor
Pointer Events
<a class="velin-pe-none" href="#">This link is not clickable</a>
<a class="velin-pe-auto" href="#">This link is clickable (default)</a>User Select
<p class="velin-user-select-all">Click to select all text at once.</p>
<p class="velin-user-select-auto">Default selection behavior.</p>
<p class="velin-user-select-none">This text cannot be selected.</p>Click to select all text at once.
Default selection behavior.
This text cannot be selected.
Touch Action
<div class="velin-touch-action-none">Disable all gestures</div>
<div class="velin-touch-action-auto">Default touch handling</div>
<div class="velin-touch-action-pan-x">Horizontal pan only</div>
<div class="velin-touch-action-pan-y">Vertical pan only</div>
<div class="velin-touch-action-manipulation">Pan + pinch zoom only</div>Disable all gestures
Default touch handling
Horizontal pan only
Vertical pan only
Pan + pinch zoom only