Redact

Redact is an agent-native component that blurs and protects sensitive content in the slot (secrets, tokens, salaries, PII) until an explicit reveal by click, hover, or programmatic call. While hidden, the accessibility tree exposes only a generic label ("hidden content"), so screen readers and agents never leak the real value before a human reveals it. The agent-native layer mirrors the state in stable data-* attributes on the host (data-pura-redact, data-pura-id, data-state, data-reveal-on) and registers each instance in window.__puraRedactions, letting agents audit and control every redaction on the page without crossing the Shadow DOM (the value is never mirrored in those attributes).

Preview

<p style="font-family: system-ui; line-height: 2;">
  Your API key:
  <pura-redact id="apikey" reveal-on="click" toggle blur="md">sk-live-9f2c7b41ad8e4f00</pura-redact>
  <br>
  Salary (hover over it):
  <pura-redact reveal-on="hover" blur="lg">$14,250.00</pura-redact>
</p>
<p id="status" style="font-family: system-ui; color: #16a34a; font-size: 14px;"></p>
<script type="module">
  const status = document.getElementById("status");
  document.getElementById("apikey").addEventListener("reveal", (e) => {
    status.textContent = "Key revealed: " + e.detail.value;
  });
  document.getElementById("apikey").addEventListener("hide", () => {
    status.textContent = "Key hidden again.";
  });
</script>

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

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