Details Group
<esp-details-group>
Groups multiple esp-details components into an accordion. By default only one item can be open at a time — opening one automatically closes the others.
Non-exclusive group
Set exclusive to false to allow multiple items to be open
at the same time. The group still provides the visual
accordion treatment.
With color variant
Slots
<esp-details-group> has a slot:
Default
Place esp-details elements in the default slot.
Attributes
<esp-details-group> has the following attributes:
exclusive
exclusive has a default value of true.
When true (the default), only one item can be open at a time. Set to false to allow multiple items open simultaneously while keeping the grouped visual treatment.
Methods
<esp-details-group> has the following methods:
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-group> emits the following events:
esp-accordion-change
esp-accordion-change is of type CustomEvent<{ openItem: EspalierDetails | null }>.
Fired when the currently open item changes.
CSS Properties
<esp-details-group> has the following CSS properties:
--esp-details-group-color-border
The border color of the group container.
--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).