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

Toolbar container with managed keyboard navigation. Slotted focusable children (hp-button, hp-toggle, hp-checkbox, hp-link, etc.) participate in a roving tabindex — Tab enters at the currently-active child, arrow keys move between siblings, Home / End jump to first / last. hp-separator children break the visual flow without consuming a tab stop.

Examples API Intent Changelog save share settings <body> <hp-toolbar> <hp-button>save</hp-button> <hp-button>share</hp-button> <hp-separator orientation="vertical"></hp-separator> <hp-toggle></hp-toggle> </hp-toolbar> </body> cut copy paste <body> <hp-toolbar orientation="vertical"> <hp-button>cut</hp-button> <hp-button>copy</hp-button> <hp-button>paste</hp-button> </hp-toolbar> </body>

Install

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

Properties

Property Attribute Type Default Description
orientation orientation "horizontal" | "vertical" "horizontal" Layout direction — controls which arrow keys move focus.

Slots

Slot Description
(default) Toolbar controls (hp-button, hp-toggle, hp-checkbox, hp-separator, etc.)

Accessibility

role="toolbar" + aria-orientation. Roving tabindex: one focusable child has tabindex="0", the rest tabindex="-1". Arrow keys navigate; Tab moves out of the toolbar (the next focusable element on the page).

No per-component entries in CHANGELOG.md yet.

esc
↑ ↓ navigate ↵ open esc close