hp-demo

Documentation envelope used to wrap each example on a component doc page. A faint hex backdrop sits behind the demo so transparent elements read clearly; an action bar carries the "copy code" button; the slotted code area shows the source. Authoring is a default slot for the rendered demo plus a code-named slot for a <pre><code> block.

Examples

API

Intent

Changelog

Bare envelope

Click me

<body> <hp-button>Click me</hp-button> </body>

With caption

info

restricted

failed

<body> <hp-badge>info</hp-badge> <hp-badge tone="positive">ok</hp-badge> <hp-badge tone="warn">!</hp-badge> <hp-badge tone="alert">restricted</hp-badge> <hp-badge tone="error">failed</hp-badge> </body>

No copy button

Install

bun add @hexpunk/core lit

import "@hexpunk/core";

Properties

Property	Attribute	Type	Default	Description
`caption`	`caption`	`string \| undefined`	—	Optional caption shown above the demo (e.g., "Default", "Sizes", "Active state"). Leave empty for a bare envelope.
`noCopy`	`no-copy`	`boolean`	`false`	Suppress the Copy code button.
`noThemeToggle`	`no-theme-toggle`	`boolean`	`false`	Suppress the per-demo theme toggle.

Slots

Slot	Description
`(default)`	Rendered demo element(s) (the foreground)
`code`	<pre><code> block showing the source

CSS Parts

Part	Description
`caption`	The caption strip (when set)
`preview`	The preview area with backdrop
`actions`	The footer toolbar with the Copy button
`code`	The code area

When to use

Wrap every standalone example on a component doc page. The hex backdrop indicates "this is a sandbox, not the page chrome"; the action bar makes the source one click away from copy-paste.

Group related variants in the default slot (e.g., all tones of hp-badge side by side) rather than wrapping each in its own hp-demo — keeps the page legible.

Accessibility

The copy button has aria-label="Copy code"; the "copied" confirmation is an aria-live="polite" region so screen readers announce after a successful copy. The backdrop is decorative and inherits hp-background's aria-hidden.

0.1.0-beta 2026-05-24
Added
- Showcase: right-rail TOC walker skips headings inside <hp-demo> blocks (demo content is sample, not page structure) and headings carrying data-no-toc for one-off opt-outs.
- Showcase: /getting-started/elements — preflight tour walking every styled primitive inside <hp-demo> blocks, with hp-banner callouts pointing to the <hp-*> component upgrade path for code, dividers, and form elements.
- <hp-copy> — copy-to-clipboard button widget. Lucide copy icon + slotted label (translatable per-instance, default "Copy") + sibling "Copied" toast with aria-live="polite". value attribute for the text to copy; copied attribute for the toast text; icon-only boolean drops the visible label while keeping it in the a11y tree. Bubbling hp-copy-success / hp-copy-error events. Async Clipboard API only — no execCommand fallback. Now powers <hp-demo>'s copy-code action and <hp-latex>'s source-copy button.
Changed
- <hp-demo> copy action — replaced the bespoke inline copy button + animated toast with <hp-copy> so the same widget powers both <hp-demo> and <hp-latex>. Slot-text source caching via slotchange on the code slot; no behaviour change for consumers.