Components

Accordion

Stacked disclosure rows separated by 1px rules. Each .ds-accordion__header is a full-width button with a chevron that rotates when the row is open. The native <details> markup below demos the CSS with no JavaScript.

Buildless (details/summary)

Using native <details> / <summary> elements styled as accordion rows. The chevron rotates via the [open] attribute — open a couple at once.

Native disclosure
How is the day rate computed?
The rate is derived from the loaded salary, the target margin, and the billable-days assumption for the entity.
Which currency applies?
Currency follows the selected entity; figures are shown with tabular numerals.
Can I override the matrix?
Yes — per-cell overrides are allowed and flagged so reviewers can see where the grid was adjusted.
<div class="ds-accordion">
  <details class="ds-accordion__item" open>
    <summary class="ds-accordion__header">
      <span>How is the day rate computed?</span>
      <span class="ds-accordion__chevron" aria-hidden="true"></span>
    </summary>
    <div class="ds-accordion__panel">The rate is derived from the loaded salary…</div>
  </details>
  <details class="ds-accordion__item">
    <summary class="ds-accordion__header">
      <span>Which currency applies?</span>
      <span class="ds-accordion__chevron" aria-hidden="true"></span>
    </summary>
    <div class="ds-accordion__panel">Currency follows the selected entity…</div>
  </details>
</div>

Button markup

The form the React component renders: a <button> header carrying aria-expanded over a .ds-accordion__panel. Collapsed panels get the hidden attribute.

aria-expanded + panel
This panel is expanded; its chevron points down.
<div class="ds-accordion__item">
  <button class="ds-accordion__header" type="button" aria-expanded="true" aria-controls="p-open">
    <span>Open row</span>
    <span class="ds-accordion__chevron" aria-hidden="true"></span>
  </button>
  <div class="ds-accordion__panel" id="p-open" role="region">This panel is expanded.</div>
</div>

React

The Accordion takes an items array and works controlled (value/onChange) or uncontrolled (defaultOpen). Set multiple to allow several panels open at once.

<Accordion> 
import { Accordion } from "@diametral/design-system/react";

const items = [
  { id: "rate",     title: "How is the day rate computed?", content: "Derived from loaded salary…" },
  { id: "currency", title: "Which currency applies?",       content: "Follows the selected entity." },
];

<Accordion items={items} multiple defaultOpen={["rate"]} />