Accordion

Accordion и Disclosure используют native <details> / <summary>, а раскрытие анимируется через Accordion.init().

Release checklist

Check component states, copy examples, keyboard focus, and responsive layout before release.

Documentation notes

Keep component copy short and include code examples for the smallest useful markup.

Runtime behavior

Use native disclosure behavior when the component does not need custom animation or async content.

Compact disclosure

Use this variant for a single expandable group inside forms or metadata blocks.

Accordion HTML

<div class="accordion">
  <details class="accordion-item" open>
    <summary class="accordion-summary">
      <span class="accordion-summary-content">
        <i class="ph ph-list-checks"></i>
        Release checklist
      </span>
      <i class="ph ph-caret-down accordion-icon"></i>
    </summary>
    <div class="accordion-panel">
      <p>Check component states, copy examples, keyboard focus, and responsive layout.</p>
    </div>
  </details>
</div>

Disclosure HTML

<details class="disclosure">
  <summary class="accordion-summary">
    <span class="accordion-summary-content">Compact disclosure</span>
    <i class="ph ph-caret-down accordion-icon"></i>
  </summary>
  <div class="accordion-panel">
    <p>Use this variant for a single expandable group.</p>
  </div>
</details>