Copy Region

Agent-native component that wraps slotted content and reveals, on hover or focus, a copy button that writes the region's text (or the `value` attribute) to the clipboard, with a floating confirmation and a live region for screen readers. Use it when you want to offer quick copying of code blocks, tokens, commands, or text. The machine-readable layer marks the host with `data-copyable`, `data-pura-copy`, `data-pura-copy-source`, and role/aria-roledescription, and registers each region in `window.__puraCopyRegions` (a Map with `id`, `el`, `text()`, `copy()`, `all()`), letting agents enumerate, read, and trigger the copy without piercing the Shadow DOM.

Preview

<pura-copy-region value="npm install pura" label="Copy command" style="max-width:32rem">
  <pre style="margin:0;padding:1rem 1.25rem;background:#0f172a;color:#e2e8f0;border-radius:8px;font-family:ui-monospace,monospace;font-size:.9rem;overflow:auto"><code>npm install pura</code></pre>
</pura-copy-region>

<p id="status-copy" role="status"></p>

<script type="module">
  import "/pura/lib/copy-region.js";
  const status = document.getElementById("status-copy");
  document.querySelector("pura-copy-region").addEventListener("copy", (e) => {
    status.textContent = `Copied: ${e.detail.value}`;
  });
</script>

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

import "./pura/lib/copy-region.js";