Details Group

import "@taprootio/espalier/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.

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.

intent

intent has a default value of undefined.

The element's intent — its meaning: neutral (no pin), or success, warning, danger, info — each pinned to its fixed status family (blue for info), retunable per theme via intents. On token-emitting controls a non-neutral intent pins the filled-action pair to that family, derived over the governing zone's theme; class-styled chrome (badges, callouts, status pills) opts out of inline emission and renders its treatment from CSS classes instead. An intent never repaints the surrounding zone, which is what contexts are for. Removing the attribute restores the element's own default intent.

context

context has a default value of undefined.

A theme-defined color zone. The selected context rebinds designer-facing roles and emits a complete, contrast-enforced semantic token table on this host for descendants to inherit.

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-details-group-change

esp-details-group-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).