Accordion

<dsx-accordion> — Accordion

Accordion container plus item element for expandable content sections.

Live Preview

Import

import '@bnotk/dsx/components/accordion.js';

Usage

<dsx-accordion variant="card">
  <dsx-accordion-item header="General" expanded>
    <p>General section content.</p>
  </dsx-accordion-item>
  <dsx-accordion-item header="Advanced" removable>
    <p>Advanced section content.</p>
  </dsx-accordion-item>
</dsx-accordion>

Elements

<dsx-accordion>

Container that coordinates one or more <dsx-accordion-item> elements.

Properties

Property	Type	Default	Description
multiple	boolean	false	Allows more than one item to stay expanded at the same time.
variant	’default’ | ‘card'	'default’	Adds the card-like slotted styling variant when set to card.

Methods

None.

Events

None.

Slots

Slot	Description
default	Accordion items (<dsx-accordion-item>).

CSS Parts

This element does not expose shadow parts.

Notes

• Listens for bubbled dsx-expand events from child items.
• When multiple is false, expanding one item sets expanded = false on every other item in the light DOM.

<dsx-accordion-item>

Single collapsible panel with header text, optional custom header content, and optional remove action.

Properties

Property	Type	Default	Description
header	string	”	Plain-text header label rendered before the named header slot.
expanded	boolean	false	Shows the content region and rotates the chevron when true.
removable	boolean	false	Shows a trailing remove button in the header.

Methods

None.

Events

Event	Detail	Description
dsx-expand	—	Bubbles/composed when the item is expanded.
dsx-collapse	—	Bubbles/composed when the item is collapsed.
dsx-remove	—	Bubbles/composed when the remove button is clicked.

Slots

Slot	Description
default	Panel body content.
header	Additional inline header content appended after the header property text.

CSS Parts

This element does not expose shadow parts.

Notes

• The header wrapper uses role="button" and updates aria-expanded from the expanded state.
• The remove button stops propagation so clicking it does not also toggle the panel.

Behavior Notes

• Accordion items are stacked with a shared border seam created by margin-top: -1px on non-first items.
• The chevron rotates 90 degrees when expanded is true.
• The card variant styles slotted items from the container with extra radius, margin, and a subtle shadow.

Styling Notes

• Uses --ds2-color-grey-*, --ds2-color-white, and --ds2-border-radius tokens for borders and surfaces.
• Header hover state uses --ds2-color-grey-1; remove hover uses --ds2-color-error.