accordion

<!-- .sk-accordion — disclosure panels built on <details> and <summary>.

     data-exclusive on the wrapper is documentation, not behaviour: what makes
     the group exclusive is the shared name="" on each <details>, which the
     browser enforces. Drop the name and the panels open independently. -->
<div class="sk-accordion" data-exclusive>
  <details class="sk-accordion__item" name="sk-accordion-demo" open>
    <summary class="sk-accordion__summary">Why zero JavaScript?</summary>
    <div class="sk-accordion__panel">
      <p class="sk-accordion__text">
        Less to download, parse and break. The browser already knows how to do
        this — a disclosure is one element and one attribute.
      </p>
    </div>
  </details>

  <details class="sk-accordion__item" name="sk-accordion-demo">
    <summary class="sk-accordion__summary">Is it accessible?</summary>
    <div class="sk-accordion__panel">
      <p class="sk-accordion__text">
        The keyboard and screen-reader behaviour come from the browser rather
        than a reimplementation, so there is nothing here to get wrong.
      </p>
    </div>
  </details>

  <details class="sk-accordion__item" name="sk-accordion-demo">
    <summary class="sk-accordion__summary">What about older browsers?</summary>
    <div class="sk-accordion__panel">
      <p class="sk-accordion__text">
        Every panel stays reachable all the way down to plain HTML. Only the
        height animation and the exclusive grouping need recent engines.
      </p>
    </div>
  </details>
</div>

/* .sk-accordion — disclosure panels on <details> / <summary>.

   Open and closed state, the toggle, keyboard operation and the accessibility
   tree are all the element's own. This file styles the marker, the panel, and —
   where the engine can — animates the height.

   Specs:
   - <details name> ......... https://html.spec.whatwg.org/multipage/interactive-elements.html#attr-details-name
   - ::details-content ...... https://drafts.csswg.org/css-pseudo-4/#details-content-pseudo
   - interpolate-size ....... https://drafts.csswg.org/css-values-5/#interpolate-size */

/* Public theme knobs (ADR 0011). Read, never declared, so the nearest
   declaration above the component wins. */
.sk-accordion {
  --_bg: var(--sk-accordion-bg, var(--sk-color-surface));
  --_border: var(--sk-accordion-border-color, var(--sk-color-border));
  --_radius: var(--sk-accordion-radius, var(--sk-radius-lg));
  --_summary-fg: var(--sk-accordion-summary-fg, var(--sk-color-text));
  --_summary-bg-hover: var(--sk-accordion-summary-bg-hover, var(--sk-color-surface-raised));
  --_marker: var(--sk-accordion-marker-color, var(--sk-color-text-muted));
  --_text-fg: var(--sk-accordion-text-fg, var(--sk-color-text-muted));

  border: var(--sk-border-width) solid var(--_border);
  border-radius: var(--_radius);
  background: var(--_bg);
  overflow: hidden;
}

.sk-accordion__item + .sk-accordion__item {
  border-block-start: var(--sk-border-width) solid var(--_border);
}

.sk-accordion__summary {
  display: flex;
  align-items: center;
  gap: var(--sk-space-sm);
  padding-block: var(--sk-space-sm);
  padding-inline: var(--sk-space-md);
  color: var(--_summary-fg);
  font-weight: var(--sk-weight-medium);
  cursor: pointer;
  min-block-size: var(--sk-size-tap-target);

  /* The UA triangle is replaced by the chevron below. `display: flex` already
     removes it in most engines; ::marker covers the rest without needing
     ::-webkit-details-marker. */
  list-style: none;
}

.sk-accordion__summary::marker,
.sk-accordion__summary::-webkit-details-marker {
  display: none;
  content: "";
}

.sk-accordion__summary:hover {
  background: var(--_summary-bg-hover);
}

/* A chevron drawn with borders — no icon font, no SVG, nothing to load. */
.sk-accordion__summary::before {
  content: "";
  inline-size: 0.5em;
  block-size: 0.5em;
  border-inline-end: 2px solid var(--_marker);
  border-block-end: 2px solid var(--_marker);
  rotate: -45deg;
  translate: 0 -0.125em;
}

/* Rotating to point down when open. In RTL the chevron starts pointing the
   other way, which is why the closed state uses a logical -45deg from an
   inline-end/block-end corner rather than a hardcoded direction. */
[open] > .sk-accordion__summary::before {
  rotate: 45deg;
  translate: 0 -0.125em;
}

@media (prefers-reduced-motion: no-preference) {
  .sk-accordion__summary::before {
    transition: rotate var(--sk-motion-fast) var(--sk-ease-out);
  }
}

.sk-accordion__panel {
  padding-block: 0 var(--sk-space-md);
  padding-inline: var(--sk-space-md);
}

.sk-accordion__text {
  margin: 0;
  color: var(--_text-fg);
  font-size: var(--sk-text-sm);
  max-inline-size: var(--sk-size-measure);
}

/* ---------------------------------------------------------------------------
   Height animation

   Entirely inside @supports. Without interpolate-size there is no way to
   transition to `auto`, so engines that lack it get an instant open and close —
   the panel content is never hidden or delayed, it simply appears. That is the
   fallback the whole block degrades to, and nothing above depends on it.
--------------------------------------------------------------------------- */

@supports (interpolate-size: allow-keywords) {
  @media (prefers-reduced-motion: no-preference) {
    .sk-accordion {
      interpolate-size: allow-keywords;
    }

    .sk-accordion__item::details-content {
      block-size: 0;
      overflow: hidden;
      transition:
        block-size var(--sk-motion-base) var(--sk-ease-out),
        content-visibility var(--sk-motion-base) allow-discrete;
    }

    .sk-accordion__item[open]::details-content {
      block-size: auto;
    }
  }
}