Hexpunk
InstallConceptsElementsProsehp-cellhp-codehp-copyhp-hexhp-latexhp-visually-hiddenhp-buttonhp-checkboxhp-formhp-labelhp-radiohp-selecthp-sliderhp-togglehp-toggle-grouphp-badgehp-taghp-progresshp-spinnerhp-backgroundhp-clusterhp-collapsiblehp-demohp-gridhp-scroll-areahp-separatorhp-sidebarhp-toolbarhp-avatarhp-iconhp-pixelhp-linkhp-menubarhp-navigation-menuhp-tabshp-alert-dialoghp-context-menuhp-dialoghp-dropdown-menuhp-hover-cardhp-popoverhp-tooltiphp-bannerhp-toasthp-tetherhp-module-handlehp-unfold-listhp-unfold-overlayhp-unfold-pagehp-bondhp-link-nodePaletteAnimationsReleases

hp-link-node

Tiny 4px dot at the endpoint of an arc-link. Filled primary at rest, secondary when bonded.

Examples API Intent Changelog <body> <hp-link-node></hp-link-node> <hp-link-node bonded></hp-link-node> </body>

Install

bun add @hexpunk/core lit
import "@hexpunk/core";

Properties

Property Attribute Type Default Description
bonded bonded boolean false When set, the node is bonded to at least one arc-link and fills with `secondary`.

When to use

Let <hp-tether> place these for you. Each tether auto-positions a node at the chosen vertex of its endpoint hex (it picks the best vertex pair from 36 candidates by crossings + distance). Position <hp-link-node> manually unless you're building a custom arc renderer. The host is pointer-events: none, so it doesn't intercept drags on the underlying hex.

States

Default: filled primary 4px dot. With bonded: filled secondary, signalling that at least one arc is attached. The colour swap is the same hue language as the rest of the system — primary at rest, secondary when engaged.

No per-component entries in CHANGELOG.md yet.

esc