Folder

`<pura-folder>` is a stylized paper folder that opens to reveal up to three papers fanning out above the cover. The folder (back panel, tab, papers, front cover) is drawn entirely in CSS; opening tilts the front cover back with a `rotateX` transition while the papers rise with a staggered, springy translate and rotate. By default it opens on `:hover` with zero JS; `trigger="click"` turns it into a keyboard-operable toggle button (Enter/Space, `aria-expanded`), and the `open` attribute forces the state from markup or script. Fill the `paper-1`..`paper-3` named slots with images or text, pick the sheet count with `papers`, and tint it with `color` or the `--pura-folder-*` tokens. SSR paints the closed folder; reduced motion snaps open/close instantly. Each instance registers in `window.__puraFolders` by `data-pura-id` with `{ open, close, toggle }` and mirrors state in `data-pura-folder-open`.

Preview

<!-- opens on hover, three photos fan out (leave room above for the fan) -->
<pura-folder style="margin-top: 7rem;">
  <img slot="paper-1" src="/docs/one.jpg" alt="Document one" />
  <img slot="paper-2" src="/docs/two.jpg" alt="Document two" />
  <img slot="paper-3" src="/docs/three.jpg" alt="Document three" />
</pura-folder>

<!-- click to toggle, custom color and size, two sheets -->
<pura-folder trigger="click" color="#16a34a" papers="2"
  style="--pura-folder-size: 8rem; margin-top: 6rem;">
  <div slot="paper-1">Invoice.pdf</div>
  <div slot="paper-2">Receipt.pdf</div>
</pura-folder>

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

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