Details
<esp-details>
A disclosure widget that wraps the native <details> and
<summary> elements. Provides themed styling with a custom
open/close indicator and smooth transitions. Use
esp-details-group to create an
accordion where only one item is open at a time.
Details can have color variants:
Pre-opened details
Set the open attribute to render the details expanded by
default:
Disabled details
Slots
<esp-details> has a slot:
Default
The default slot holds the content revealed when the details element is opened.
Attributes
<esp-details> has the following attributes:
summary
summary has a default value of "".
The text displayed in the summary row.
open
open has a default value of false.
Whether the details element is open.
disabled
disabled has a default value of false.
Whether the details element is disabled (cannot be toggled).
Methods
<esp-details> has the following methods:
close
Programmatically close the details element.
traverseToClosest
Traverse up the DOM tree to find the closest element that matches the selector. This method is aware of shadow DOM boundaries and will traverse through them to find the element.
Events
<esp-details> emits the following events:
esp-toggle
esp-toggle is of type CustomEvent<{ open: boolean }>.
Fired when the details element is opened or closed.
Scroll-stability regression harness
CSS Properties
<esp-details> has the following CSS properties:
--esp-details-color-border
The border color.
--esp-details-color-background
The background color.
--esp-details-color-summary-background
The summary row background color.
--esp-details-color-summary-hover-background
The summary row background on hover.
--esp-details-color-summary-background-active
The summary row background when the details element is open.
--esp-details-color-indicator
The color of the open/close indicator.
--esp-details-size-padding
The padding inside the content area and summary row.
--esp-field-background
Background color of the shared field shell. Defaults to var(--esp-color-layer-2).
--esp-field-border-color
Border color of the shared field shell. Defaults to var(--esp-color-border).
--esp-field-border-width
Border width of the shared field shell. Defaults to 1px.
--esp-field-text-color
Text color used inside the shared field shell. Defaults to var(--esp-color-text).
--esp-field-hover-bg
Hover background color of the shared field shell. Derived from --esp-field-background.
--esp-field-focus-bg
Focus background color of the shared field shell. Derived from --esp-field-background.
--esp-field-focus-shadow
Shadow color used for shared field focus treatment. Defaults to var(--esp-color-shadow).