Details

Svelte

<Dtl accent="" open on:toggle>
  <span slot="heading">Header</span>
  <p>content</p>
</Dtl>

<Dtl accent="" heading="heading" open on:toggle>
  <p>content</p>
</Dtl>

<div class="dtl-group">
  <Dtl accent="" heading="heading" open on:toggle>
    <p>content</p>
  </Dtl>
  <Dtl accent="" heading="heading" open on:toggle>
    <p>content</p>
  </Dtl>
</div>

HTML

<details class="dtl [accent]">
  <summary>
    <div class="heading">Header</div>

    <div class="is-open fce">
      <svg height="24px" width="24px" viewBox="0 0 24 24" fill="currentColor">
        <use href="#remove"></use>
      </svg>
    </div>

    <div class="is-closed fce">
      <svg height="24px" width="24px" viewBox="0 0 24 24" fill="currentColor">
        <use href="#add"></use>
      </svg>
    </div>
  </summary>

  <div class="body">content ...</div>
</details>

Customize CSS

:root {
  --focusable-outline-width: 3px;
  --focusable-outline-style: solid;
  --focusable-transition-duration: 150ms;
}

:root {
  --dtl-br: var(--btn-br);
  --dtl-border: 1px solid var(--fl0);

  /* padding */
  --dtl-pi: clamp(1ch, 2vw, 1.5em);
  --dtl-pb: 1em;
}