Disclosure

`<pura-disclosure>` is a show/hide region that animates its height between `0` and the content's natural `auto` using the modern CSS recipe `interpolate-size: allow-keywords` + `transition: height`, no grid-row hack and no JS measuring. Padding, borders, and nested disclosures all tween cleanly. Browsers without `interpolate-size` still open and close, they just snap. Put the summary in `slot="trigger"` and the body in the default slot; drive it with `open`, `.toggle()`, or listen for `disclosuretoggle` `{ open }`. Each instance registers in `window.__puraDisclosures` by `data-pura-id` and mirrors `data-pura-open`. Theme the timing with `--pura-disclosure-duration`.

Preview

<pura-disclosure>
  <span slot="trigger">Show more</span>
  <div>Disclosed content, height animates to auto.</div>
</pura-disclosure>

<script type="module">
  const d = document.querySelector('pura-disclosure');
  d.addEventListener('disclosuretoggle', (e) => console.log(e.detail.open));
  d.toggle();
</script>

<link rel="stylesheet" href="/pura/tokens.css">
<script type="module" src="/pura/lib/disclosure.js"></script>

import "./pura/lib/disclosure.js";