Accordion

The .pl-c-accordion wraps <details>/<summary> elements for a collapsible disclosure UI. Animates open/close to/from height: auto using interpolate-size: allow-keywords where supported, with a universal grid-template-rows: 0fr to 1fr fallback.

Semantic HTML

<div class="pl-c-accordion">
  <details class="pl-c-accordion__item">
    <summary class="pl-c-accordion__header">
      <span>Section title</span>
      <svg class="pl-c-accordion__icon">...</svg>
    </summary>
    <div class="pl-c-accordion__panel">
      <div class="pl-c-accordion__content">Content goes here.</div>
    </div>
  </details>
</div>

Animation strategy

Two techniques are used, layered:

1. Universal fallback: grid-template-rows: 0fr to 1fr on the panel wrapper. Works in all browsers. Smooth height transition.
2. Enhanced: Where interpolate-size: allow-keywords is supported, block-size: 0 to auto animates directly. Produces smoother results.

Class contract