@vibe-labs/design-interactions

Interaction, cursor, scroll, and pointer utility classes for the Vibe Design System.

Installation

@import "@vibe-labs/design-interactions";

Tokens

None — this package is utility-only.

Utilities / Generated Classes

All classes generated into @layer vibe.utilities via the build script.

Cursor

.cursor-auto · .cursor-default · .cursor-pointer · .cursor-grab · .cursor-grabbing · .cursor-move · .cursor-not-allowed · .cursor-wait · .cursor-text · .cursor-crosshair · .cursor-col-resize · .cursor-row-resize · .cursor-none

User Select

.select-none · .select-text · .select-all · .select-auto

Pointer Events

.pointer-events-none · .pointer-events-auto

Touch Action

.touch-auto · .touch-none · .touch-pan-x · .touch-pan-y · .touch-manipulation

Scroll Behavior

.scroll-auto · .scroll-smooth

Scroll Snap

• Container: .snap-x · .snap-y · .snap-both · .snap-none
• Strictness: .snap-mandatory · .snap-proximity (sets --snap-strictness)
• Child alignment: .snap-start · .snap-center · .snap-end · .snap-align-none
• Stop: .snap-always · .snap-normal

Overscroll Behavior

• .overscroll-auto · .overscroll-contain · .overscroll-none
• .overscroll-x-auto · .overscroll-x-contain · .overscroll-x-none
• .overscroll-y-auto · .overscroll-y-contain · .overscroll-y-none

Resize

.resize-none · .resize · .resize-x · .resize-y

Will-Change

.will-change-auto · .will-change-transform · .will-change-opacity · .will-change-scroll · .will-change-contents

Dist Structure

File	Description
index.css	Barrel — imports generated utilities
interactions.css	Core classes
interactions.g.css	Generated utility classes

Dependencies

None — this package is self-contained.

Build

npm run build

---

Usage Guide

Provides cursor, user select, pointer event, touch action, scroll snap, and will-change utilities for controlling interaction behaviour in the Vibe Design System.

Import

@import "@vibe-labs/design-interactions";

Common Patterns

1. Drag-and-drop handle cursor

<div class="cursor-grab active:cursor-grabbing select-none">
  Draggable item
</div>

2. Disabled overlay that blocks interaction

<div class="relative">
  <form>...</form>
  <div class="absolute inset-0 pointer-events-none opacity-50 bg-base"></div>
</div>

3. Horizontal scroll snap carousel

<div class="flex overflow-x-auto snap-x snap-mandatory gap-4 scroll-smooth">
  <div class="snap-start shrink-0 w-80 h-48 bg-elevated rounded-lg"></div>
  <div class="snap-start shrink-0 w-80 h-48 bg-elevated rounded-lg"></div>
  <div class="snap-start shrink-0 w-80 h-48 bg-elevated rounded-lg"></div>
</div>

4. Prevent scroll chaining in a modal

<dialog class="overflow-y-auto overscroll-contain max-h-screen">
  Long modal content...
</dialog>

5. Performance hint for animated elements

<div class="will-change-transform transition-transform duration-moderate ease-spring">
  Animated card
</div>

6. Touch-optimised UI (no double-tap zoom)

<button class="touch-manipulation btn-md">
  Mobile-optimised button
</button>

Token Reference

This package has no tokens. Key interaction utilities:

Class	CSS property / value
.cursor-pointer	cursor: pointer
.cursor-not-allowed	cursor: not-allowed
.select-none	user-select: none
.pointer-events-none	pointer-events: none
.touch-manipulation	touch-action: manipulation
.scroll-smooth	scroll-behavior: smooth
.snap-x.snap-mandatory	Mandatory horizontal snap container
.overscroll-contain	Prevent scroll chaining
.will-change-transform	GPU compositing hint