Expand Card

`<pura-expand-card>` is the iOS App Store card morph: closed, it is a normal card in the layout (slot `card`); click it and it expands into a near-fullscreen overlay revealing the detail content (default slot). The morph is a FLIP animation — the element measures the card rect, switches to fixed positioning at the final inset (`margin` px from the viewport), and animates `top/left/width/height` between the two — while the backdrop fade and detail fade-up are plain CSS. The host keeps the card's closed size inline while open, so the surrounding layout never jumps. The closed card is a button (Enter/Space opens); Escape or clicking the backdrop closes; `open`/`close` events fire at each end. Reduced motion swaps instantly with no morph. Each instance registers in `window.__puraExpandCards` by `data-pura-id` with `{ open, close }`.

Preview

<pura-expand-card margin="32">
  <div slot="card">
    <img src="cover.jpg" alt="" />
    <h3>App of the day</h3>
  </div>

  <!-- detail content, revealed while open -->
  <article>
    <p>Long-form detail content…</p>
  </article>
</pura-expand-card>

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

import "./pura/lib/expand-card.js";