hp-bond
Small green hex on a shared edge. Visible while forming, fades to a hairline when settled.
Install
bun add @hexpunk/core litimport "@hexpunk/core";Properties
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
state | state | HpBondState | "forming" | `forming` (default, full visibility) or `settled` (hairline). |
When to use
<hp-grid> render bonds for you — it fires
hp-grid-bond when two adjacent atoms become axial neighbours after a drop,
and the bond renders in the shared edge automatically.
<hp-bond> directly only when you're building a custom
molecule layout and need to mark a fixed edge as bonded (e.g., a `<hp-bond> as a generic decoration — it's specifically the
edge-bond indicator, and overusing it dilutes the bonding metaphor.
States
state="forming" (default) — the bond is being created right now, visible
as a 12px green hex on the shared edge.
state="settled" — the bond is stable; collapses opacity + scaleY so it reads
as a 1px hairline on the shared edge, present but quiet.
No per-component entries in CHANGELOG.md yet.