Accordion

---
/**
 * Accordion — native <details> with an animated height, zero JS.
 *
 * The browser owns open/close, keyboard, and (with `exclusive`) the one-open
 * rule via the name attribute. The animation is ::details-content laid out
 * as a grid whose row goes 0fr → 1fr, so the body's height interpolates from
 * nothing to auto without measuring anything. Browsers without
 * ::details-content open instantly — a fallback, not a failure.
 */
import type { HTMLAttributes } from 'astro/types';

interface Item {
  title: string;
  /** HTML string. */
  body: string;
}

interface Props extends HTMLAttributes<'div'> {
  items: Item[];
  /** Only one item open at a time (details name=). */
  exclusive?: boolean;
  /** Index of the item open on load. */
  open?: number;
  /** Group name when exclusive; defaults to a generated one. */
  name?: string;
}

const { items, exclusive = false, open, name = `ma-acc-${Math.random().toString(36).slice(2, 7)}`, class: className, ...rest } = Astro.props;
---

<div class:list={['ma-accordion', className]} {...rest}>
  {
    items.map((item, i) => (
      <details class="ma-accordion__item" name={exclusive ? name : undefined} open={open === i}>
        <summary class="ma-accordion__summary">
          <span>{item.title}</span>
          <svg class="ma-accordion__chevron" aria-hidden="true" viewBox="0 0 16 16" width="16" height="16"><path d="M4 6l4 4 4-4" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" /></svg>
        </summary>
        <div class="ma-accordion__body" set:html={item.body} />
      </details>
    ))
  }
</div>

<style is:global>
  @layer components {
    :where(.ma-accordion__item) {
      border-top: 1px solid var(--ma-edge);
    }
    :where(.ma-accordion__item:last-child) {
      border-bottom: 1px solid var(--ma-edge);
    }
    :where(.ma-accordion__summary) {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      padding: 0.875rem 0;
      cursor: pointer;
      list-style: none;
      font-weight: 500;
    }
    :where(.ma-accordion__summary)::-webkit-details-marker {
      display: none;
    }
    :where(.ma-accordion__chevron) {
      flex: none;
      opacity: 0.6;
      transition: rotate var(--ma-duration) var(--ma-ease);
    }
    :where(.ma-accordion__item[open] .ma-accordion__chevron) {
      rotate: 180deg;
    }
    /* the animated part: the content box is a grid whose only row interpolates 0fr → 1fr */
    :where(.ma-accordion__item)::details-content {
      display: grid;
      grid-template-rows: 0fr;
      transition:
        grid-template-rows var(--ma-duration) var(--ma-ease),
        content-visibility var(--ma-duration) allow-discrete;
    }
    :where(.ma-accordion__item[open])::details-content {
      grid-template-rows: 1fr;
    }
    :where(.ma-accordion__body) {
      min-height: 0;
      overflow: clip;
      padding-bottom: 0;
      transition: padding-bottom var(--ma-duration) var(--ma-ease);
    }
    :where(.ma-accordion__item[open] .ma-accordion__body) {
      padding-bottom: 1rem;
    }
    /* ::details-content in a rule of its own: in an engine that does not know it, a selector list that names it is
       dropped whole, and the body and the chevron kept their transitions under reduced motion. The minifier merges
       neighbouring rules with the same declarations back into one list, so this one sits behind a feature test */
    @media (prefers-reduced-motion: reduce) {
      @supports selector(::details-content) {
        :where(.ma-accordion__item)::details-content {
          transition: none;
        }
      }
      :where(.ma-accordion__body),
      :where(.ma-accordion__chevron) {
        transition: none;
      }
    }
  }
</style>