Component · Token Snap Drag

01 · Snap-on · the scale catches the handle--space-xxs … --space-7xl

24px · width

24px · --space-2xl

current

24px --space-2xl

drift from token

0px

02 · Multi-axis · X snaps independently of Y--space + --size

width

96px --space-7xl

height

64px --space-7xl

03 · Token scale--space-* family

Token	Value	Use case
`--space-xxs`	2px	Hairline · keyline
`--space-xs`	4px	Icon padding · pill gap
`--space-sm`	8px	Compact stack · chip gap
`--space-md`	12px	Card-inner spacing
`--space-lg`	16px	Default rhythm · base unit
`--space-xl`	20px	Sidebar gutter
`--space-2xl`	24px	Card padding
`--space-3xl`	32px	Section gap
`--space-4xl`	40px	Hero padding
`--space-5xl`	48px	Section vertical
`--space-7xl`	64px	Page-section break
`--space-9xl`	96px	Hero vertical · landing

UsageAPI surface

Authoring contract

The host reads a token scale (declared in JS or DOM) and snaps the drag value to the nearest entry. Snap threshold defaults to ½ the gap between adjacent tokens. data-snap="off" falls back to raw pixel dragging. The chip floats above the drag handle, hidden by default, visible during the gesture.

Hook	Values	Effect
`data-snap`	on · off	Enable / disable token snap.
`--tsd-w` / `--tsd-h`	number (px)	Live values; host element reads these into width / height.
`data-axis` on handle	x · y	Which dimension the handle controls.
JS event	`tsd:snap`	Fires with `detail.px, token, axis`.
`prefers-reduced-motion`	—	Transition removed; snap still computes.

View HTML

<div class="lsd-tsd" data-snap="on" style="--tsd-w: 24;">
  <div class="lsd-tsd__rail">
    <div class="lsd-tsd__chip"><b>24px</b> · <code>--space-2xl</code></div>
    <div class="lsd-tsd__handle" data-handle></div>
  </div>
  <div class="lsd-tsd__ticks"></div>
</div>