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.
Live Previews
Section titled “Live Previews”Closed by default
Section titled “Closed by default”<holo-details summary="What is Holocron?"> Holocron is a Stencil-based web component design system. </holo-details>Open by default
Section titled “Open by default”Orders ship within 2 business days.
<holo-details summary="Shipping details" open> Orders ship within 2 business days. </holo-details>API Reference
Section titled “API Reference”Properties
Section titled “Properties”| Property | Attribute | Description | Type | Default |
| --------- | --------- | ---------------------------------------------------------------------------- | --------- | ----------- |
| summary | summary | The text rendered inside the <summary> element. | string | undefined |
| open | open | Whether the disclosure is expanded. Reflects to the native open attribute. | boolean | false |
| Slot Name | Description | | --------- | -------------------------------------- | | (default) | The disclosure’s hidden/revealed body. |
Events
Section titled “Events”| Event | Description | Type |
| ------------ | --------------------------------------------------- | ---------------------- |
| holoToggle | Emitted when the disclosure is toggled open/closed. | CustomEvent<boolean> |