Holo Details

The <holo-details> component wraps the native <details>/<summary> elements, giving them design-system styling while retaining native, zero-JS-required disclosure behavior.

When to use

Use it for:

• A single optional piece of content the reader can reveal, such as a “Show advanced options” section.
• Supplementary notes that most readers can skip.

Don’t use it for:

• A set of related sections where opening one closes another. Use Accordion.
• Switching between peer views. Use Tabs.
• Content essential to completing the task. Show it directly.

Live Previews

Closed by default

Hololink UI is a Stencil-based web component design system with a “holo” tech aesthetic.

<holo-details summary="What is Hololink UI?"> Hololink UI is a Stencil-based web component design system. </holo-details>

Open by default

Orders ship within 2 business days.

<holo-details summary="Shipping details" open> Orders ship within 2 business days. </holo-details>

Accessibility

The component renders a native <details> with a <summary> (text from the summary prop) and a wrapper for the default slot. Role, expanded state and keyboard behaviour come from the browser.

Key	Action
Tab	Moves focus to or from the summary
Enter, Space	Toggles the section open or closed

• The summary shows a visible focus ring with :focus-visible.
• Focus stays on the summary when it toggles. The component emits holoToggle with the new state.

You provide:

• A concise summary that says what will be revealed.
• Content that makes sense when read alone, because collapsed content is not exposed until opened.

---

API Reference

Importing

import '@philbob-sideprojects/hololink-ui/holo-details';

Properties

Property	Attribute	Type	Default	Description
open	open	boolean	false	Whether the disclosure is expanded. Reflects to the native open attribute on the underlying <details> element.
summary (required)	summary	string	—	The text rendered inside the native <summary> element.

Events

Event	Detail	Description
holoToggle	boolean	Emitted when the disclosure is toggled open or closed.

Slots

Slot	Description
(default)	The body content revealed when the disclosure is open.