hp-module-handle

Hex grip at a molecule centroid. Default six-dot mark; active is the grabbed state.

Examples

API

Intent

Changelog

Install

bun add @hexpunk/core lit

import "@hexpunk/core";

Properties

Property	Attribute	Type	Default	Description
`active`	`active`	`boolean`	`false`	When set, the handle is currently grabbed — fills with `primary`.

When to use

Place at the centroid of a bonded molecule when consumers need to drag the whole group as a rigid body. Once <hp-module> lands, it'll inject this automatically for any bonded set.

Slot a custom grip glyph if the default six-dot doesn't match your context (e.g., a directional arrow for movement, an icon matching the molecule's role).

Use as a regular button. Keyboard activation behaves like a drag-handle (space to grab, arrow keys to move) — repurposing it for other actions breaks the keyboard contract.

Accessibility

Auto-applies tabindex="0", role="button", and aria-label="Drag handle" on connect (consumers can override any of these explicitly). 36px bounding box hits the 44×44 minimum target via surrounding tap area on touch devices.

No per-component entries in CHANGELOG.md yet.

Install

Properties

When to use

Accessibility

Contents