CORE UTILITY FAMILY

Interactivity

Control form appearance and intrinsic field sizing, pointer feedback, text selection, resize handles, scrolling, scrollbars, snapping, touch gestures, and rendering change hints.

completeTarget v0.38 verified examplesRegistry JSON ↗

WHEN TO USE IT

Choose the right tool for the layout.

Use interaction utilities to reflect real behavior, preserve keyboard and assistive-technology access, and keep browser-native scrolling or zooming enabled unless the application intentionally replaces it.

QUICK REFERENCE

Classes and generated CSS

These examples are resolved by the compiler when the registry manifest is generated. A broken example fails the test suite.

ClassGenerated declarations and keyframes

co-cursor-(--control-cursor)cursor: var(--control-cursor);

co-field-sizing-contentfield-sizing: content;

co-scrollbar-thumb-brand-500--co-scrollbar-thumb: var(--co-color-brand-500); scrollbar-color: var(--co-scrollbar-thumb) var(--co-scrollbar-track);

co-scrollbar-gutter-stablescrollbar-gutter: stable;

co-snap-alwaysscroll-snap-stop: always;

co-touch-pan-y--co-pan-y: pan-y; touch-action: var(--co-pan-x,) var(--co-pan-y,) var(--co-pinch-zoom,);

co-touch-pinch-zoom--co-pinch-zoom: pinch-zoom; touch-action: var(--co-pan-x,) var(--co-pan-y,) var(--co-pinch-zoom,);

co-will-change-[contents,transform]will-change: contents,transform;

VISUAL EXAMPLE · APPEARANCE

Keep native controls or take ownership of styling

Appearance auto preserves the platform control. Appearance none removes native visual treatment, so you must provide clear states, affordances, and keyboard focus yourself.

NATIVE APPEARANCECUSTOM APPEARANCE

component.coord

<select class="co-appearance-auto">...</select>

<select class="co-appearance-none co-border co-px-4 co-py-3 co-bg-white">
  ...
</select>

INTERACTIVE EXAMPLE · CURSOR

Match pointer feedback to real behavior

Move the pointer over each tile. Cursor utilities communicate the interaction users can perform; they should never promise behavior that the component does not provide.

POINTERco-cursor-pointer

GRABco-cursor-grab

NOT ALLOWEDco-cursor-not-allowed

ZOOM INco-cursor-zoom-in

component.coord

<button class="co-cursor-pointer">Open</button>
<div class="co-cursor-grab active:co-cursor-grabbing">Drag</div>
<button disabled class="co-cursor-not-allowed">Unavailable</button>
<div class="co-cursor-zoom-in">Zoom image</div>

INTERACTIVE EXAMPLE · POINTER EVENTS

Let events pass through decorative layers

The striped overlay covers the button visually but ignores pointer input. The real button underneath remains clickable and keyboard-focusable.

component.coord

<div class="co-relative">
  <button>Interactive target</button>
  <div aria-hidden="true" class="co-pointer-events-none co-absolute co-inset-0">Decoration</div>
</div>

INTERACTIVE EXAMPLE · USER SELECT

Control how content participates in selection

Try selecting each line. Use select-none for disposable decoration, select-text for normal copy, and select-all when selecting one fragment should capture it completely.

SELECT NONE · this decorative line cannot be selected

SELECT TEXT · drag to select any part of this sentence

npm install @coordiation/css

component.coord

<span class="co-select-none">Decorative label</span>
<p class="co-select-text">Copy this sentence normally.</p>
<code class="co-select-all">npm install @coordiation/css</code>

INTERACTIVE EXAMPLE · FIELD SIZING

Let form fields follow their content

Type into the content-sized controls. Keep practical minimum and maximum sizes because field-sizing is progressive enhancement and unbounded fields can disrupt layout.

component.coord

<input class="co-field-sizing-content co-min-w-32 co-max-w-full" placeholder="Type here" />

<textarea class="co-field-sizing-content co-min-h-20 co-max-h-64">...</textarea>

INTERACTIVE EXAMPLE · RESIZE

Choose which resize handles users receive

Drag the lower edge or corner of these textareas. Restrict resizing only when the surrounding layout has a genuine directional constraint.

BOTH AXESVERTICALNONE

component.coord

<textarea class="co-resize">Both axes</textarea>
<textarea class="co-resize-y">Vertical only</textarea>
<textarea class="co-resize-none">Fixed size</textarea>

INTERACTIVE EXAMPLE · SCROLL SNAP

Land scrolling at intentional positions

Scroll horizontally through the cards. The container defines the X-axis and mandatory strictness; every card chooses center alignment and an always snap stop.

component.coord

<div class="co-flex co-overflow-x-auto co-snap-x co-snap-mandatory">
  <article class="co-snap-center co-snap-always co-shrink-0">01</article>
  <article class="co-snap-center co-snap-always co-shrink-0">02</article>
</div>

VISUAL EXAMPLE · SCROLLBAR

Style scrollbars while preserving native scrolling

Thumb and track colors compose independently. Stable gutter reserves scrollbar space so content does not shift when overflow begins. Browser rendering may differ.

SCROLLABLE ROW 1

SCROLLABLE ROW 2

SCROLLABLE ROW 3

SCROLLABLE ROW 4

SCROLLABLE ROW 5

SCROLLABLE ROW 6

SCROLLABLE ROW 7

component.coord

<div class="co-overflow-auto co-scrollbar-thin co-scrollbar-thumb-black co-scrollbar-track-neutral-200 co-scrollbar-gutter-stable">
  Long content...
</div>

MOBILE EXAMPLE · TOUCH ACTION

Preserve the gestures your interface does not replace

Directional pan and pinch utilities compose. A vertical carousel might keep pan-y and pinch-zoom while an application-owned canvas intentionally handles gestures itself.

↕PAN Y + PINCH

✣APP GESTURES

component.coord

<div class="co-touch-pan-y co-touch-pinch-zoom">Vertical feed</div>
<button class="co-touch-manipulation">Fast tap target</button>
<canvas class="co-touch-none">Application-owned gestures</canvas>

PERFORMANCE EXAMPLE · WILL CHANGE

Add rendering hints only when measurement justifies them

Will-change is a temporary browser hint, not a default optimization. Apply it shortly before a costly interaction and remove it afterward to avoid excess memory use.

TEMPORARY HINTMeasure → apply → interact → remove

component.coord

<div class="hover:co-will-change-transform co-transition-transform hover:co-scale-105">
  Measured transform hotspot
</div>

<div class="co-will-change-[contents,transform]">Custom hint list</div>

BASIC USAGE

Apply a utility directly.

Keep the complete class string in your template so the plain-text scanner can discover it without evaluating application code.

component.coord

<div class="co-cursor-(--control-cursor) co-field-sizing-content co-scrollbar-thumb-brand-500 co-scrollbar-gutter-stable co-snap-always co-touch-pan-y co-touch-pinch-zoom co-will-change-[contents,transform]">
  Your content
</div>

HOW IT WORKS

Core concepts

01
Every standard cursor keyword is available, with CSS custom properties and safe arbitrary cursor lists for application-owned assets.
02
Scrollbar thumb and track colors compose through --co-scrollbar-thumb and --co-scrollbar-track while width and gutter use browser keywords.
03
Scroll snap needs a snap type and strictness on the container, alignment and optional stop behavior on children.
04
Directional pan and pinch-zoom utilities compose so one element can preserve multiple touch gestures.
05
will-change accepts named hints, custom properties, or safe arbitrary lists and should be removed after the anticipated change.

CSS PROPERTIES

What this family controls

appearancecursorfield-sizingpointer-eventsuser-selectresizescroll-behaviorscrollbar-colorscrollbar-widthscrollbar-gutterscroll-snap-typescroll-snap-alignscroll-snap-stoptouch-actionwill-change

VARIANTS

Responsive and state conditions

Prefix any supported utility with responsive or state variants. Variants compose from left to right and the compiler emits the required selector or at-rule.

component.coord

<div class="co-cursor-(--control-cursor) md:co-field-sizing-content hover:co-cursor-(--control-cursor)">
  Responsive and state-aware content
</div>

ARBITRARY VALUES

Escape the scale when necessary

Use square brackets for a one-off CSS value. Prefer theme tokens for values repeated across components so an AI agent and human reviewer can recognize design intent.

Arbitrary syntax

co-appearance-*
co-[content-visibility:auto]

SCOPE BOUNDARIES

Intentional boundaries

This family is implemented, documented, and tested. These notes define where a neighboring family or browser behavior takes over.

pointer-events-none does not automatically remove descendants from keyboard navigation.
scrollbar-width and scrollbar-color depend on browser support and user-agent rendering.
field-sizing-content is progressive enhancement and should retain sensible width, min-size, and max-size constraints.
Use will-change only for a measured performance problem; excessive hints can increase memory use.

Previous← Accessibility NextArbitrary properties →