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

Visual + semantic divider. Horizontal (default) or vertical, with an optional centre glyph (hex, dot, or none). decorative flips between role="separator" and role="presentation" for screen readers.

Examples API Intent Changelog
section one section two section three section four
<body> <hp-separator></hp-separator> <hp-separator mark="dot"></hp-separator> <hp-separator mark="none"></hp-separator> </body>
left middle right
<body> <hp-separator orientation="vertical"></hp-separator> <hp-separator orientation="vertical" mark="dot"></hp-separator> <!-- decorative — role="presentation" for screen readers --> <hp-separator orientation="vertical" decorative></hp-separator> </body>

Install

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

Properties

Property Attribute Type Default Description
orientation orientation HpSeparatorOrientation "horizontal" Layout direction. Horizontal is a row divider; vertical is a column divider.
decorative decorative boolean false When set, the separator is purely visual (role=presentation, invisible to assistive tech). Default unset = role=separator.
mark mark HpSeparatorMark "hex" Centre glyph. `hex` (default) reads as a small node on the divider; `dot` is a tighter filled dot; `none` is a clean line.

CSS Parts

Part Description
line The line segments either side of the centre glyph
mark The centre glyph element

When to use

Default role="separator" announces the divider as a structural break. Use decorative when the surrounding hierarchy already conveys the grouping (heading, landmark) and the line is purely visual.

No per-component entries in CHANGELOG.md yet.

esc
↑ ↓ navigate ↵ open esc close