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-hex

Base hex atom — a hollow stencil hex with consumer-overridable stroke colour. No hover, no focus, no events. pointer-events: none by default, so it's safe as a backdrop inside composites (palette swatches, badges, decorative plates) without intercepting clicks.

Examples API Intent Changelog <body> <hp-hex></hp-hex> <hp-hex size="md"></hp-hex> <hp-hex size="lg"></hp-hex> </body>

Custom stroke colour

Override --hp-stroke-color for a coloured outline; the interior stays canvas.

<body> <hp-hex style="--hp-stroke-color: var(--hp-primary)"></hp-hex> </body>

Filled (transparent stroke)

Set --hp-stroke-color: transparent and --hp-hex-fill to a token for a solid-colour swatch. Used in the Palette page.

<body> <hp-hex style="--hp-stroke-color: transparent; --hp-hex-fill: var(--hp-primary)"></hp-hex> </body>

Install

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

Properties

Property Attribute Type Default Description
size size "xxs" | "xs" | "sm" | "md" | "lg" "sm" Cell size. - `xxs` (20px) — dense inline form controls - `xs` (32px) — comfortable inline form controls - `sm` (100px) — content-hex default - `md` (180px) — flat-top content hex - `lg` (320px) — large content hex

CSS Custom Properties

Property Default Description
--hp-stroke-color — Outer polygon fill (the "stroke")
--hp-hex-fill — Inner polygon fill (defaults to canvas)
--hp-cell — Cell width; usually set per size attribute
--hp-hex-pointer-events — pointer-events on the painted polygons

When to use

Reach for <hp-hex> directly only when you need a bare hex shape — palette swatches, decorative plates inside composites, custom layouts where the system's composite atoms don't fit. Compose it inside your own custom atom when you need the SVG stencil + hex-shaped hit area without authoring the geometry yourself. Use <hp-hex> for buttons or interactive cells. The host is pointer-events: none and there's no built-in hover or focus state. Use <hp-cell> instead. Place adjacent <hp-hex>es in a cluster with --hp-stroke-color: transparent next to a stencil atom — the centre's outline ring will show through the overlap as an orphan band. Pick one paradigm: solid swatches or stencil rings, not both adjacent.

Accessibility

Decorative by default. If <hp-hex> is the only visual signal for some meaning (a colour swatch, a status pill), add a title attribute so the meaning is announced. For real interactive surfaces or toned status indicators, use <hp-cell> — it carries the appropriate roles, hover / focus state, and tone overlay.

Customisation hooks

--hp-stroke-color (default --hp-outline) paints the outer ring; --hp-hex-fill (default --hp-canvas) paints the inner. The hex SVG handles the stencil geometry; the inner polygon's inset scales with size so the visible stroke is roughly proportional (sm 2px, md 4px, lg 6px).

No per-component entries in CHANGELOG.md yet.

esc
↑ ↓ navigate ↵ open esc close