hp-tabs

Tabbed content container. hp-tab children render the trigger row; hp-tab-panel children render the body. Matching value attributes link a tab to its panel. Arrow keys cycle tabs, Home / End jump to first / last, roving tabindex.

Examples

API

Intent

Changelog

overview

details

logs

High-level summary of the build.

Step-by-step trace of every operation.

Raw output from the runner.

<body> <hp-tabs value="overview"> <hp-tab value="overview">overview</hp-tab> <hp-tab value="details">details</hp-tab> <hp-tab-panel value="overview">…</hp-tab-panel> <hp-tab-panel value="details">…</hp-tab-panel> </hp-tabs> document .querySelector("hp-tabs") .addEventListener("change", (ev) => { console.log(ev.detail.value); }); </body>

Install

bun add @hexpunk/core lit

import "@hexpunk/core";

Properties

Property	Attribute	Type	Default	Description
`value`	`value`	`string`	`""`	Selected tab value. Setting this activates the matching tab and shows the matching panel. Default = first tab's value.
`orientation`	`orientation`	`"horizontal" \| "vertical"`	`"horizontal"`	Tab list orientation. Horizontal arrows = Left / Right; vertical = Up / Down.
`route`	`route`	`"hash" \| "query" \| undefined`	—	Sync value with the URL. - `"hash"`: reads / writes `location.hash`. Simple but collides with any other consumer of the hash (e.g. heading anchors in panel content, in-page TOC links). Best for standalone pages where the hash is yours alone. - `"query"`: reads / writes a search param (default `tab`, set via `query-param` attribute). Leaves the hash free for in-page anchors. Best for docs pages where panels contain headings with their own slug anchors.
`queryParam`	`query-param`	`string`	`"tab"`	Search-param name used when `route="query"`. Defaults to `tab`.

Events

Event	Type	Description
`hp-tabs-change`	`CustomEvent`
`change`	`Event`	When the active tab changes. detail: { value }

Slots

Slot	Description
`tab`	hp-tab children for the tablist (auto-slotted)
`(default)`	hp-tab-panel children for the panels

CSS Parts

Part	Description
`list`	The tablist row / column
`panels`	The panels container

Accessibility

Tablist exposes role="tablist" + aria-orientation; each tab role="tab" + aria-selected; each panel role="tabpanel". Roving tabindex: only the active tab is in the tab order. Arrow keys move focus + selection.