01. Modern HTML5, Semantics & Web APIs

<!-- 1. Native Modal with Browser-Managed Focus Trap & Light Dismiss -->
<dialog id="lab-modal" class="backdrop:bg-slate-950/80 rounded-2xl p-6 shadow-2xl">
  <form method="dialog" class="space-y-4">
    <h3 class="font-bold text-xl text-slate-900 dark:text-white">Native HTML5 Dialog</h3>
    <p class="text-base text-slate-600 dark:text-slate-300">
      Zero JavaScript focus containment and Esc dismiss natively handled by browser engine.
    </p>
    <div class="flex justify-end gap-2">
      <button value="cancel" class="px-4 py-2 text-base rounded-xl border border-slate-300">Cancel</button>
      <button value="confirm" class="px-4 py-2 text-base bg-indigo-600 text-white rounded-xl">Confirm</button>
    </div>
  </form>
</dialog>
<!-- 2. Exclusive Accordions with HTML5 'name' attribute -->
<details name="architecture-faq" open class="border border-slate-200 dark:border-slate-800 rounded-xl p-4">
  <summary class="font-bold text-base cursor-pointer">01. Web Standards Foundation</summary>
  <p class="mt-2 text-base text-slate-600 dark:text-slate-300">
    Uses native exclusive disclosure syntax supported across all modern engines.
  </p>
</details>
<!-- 3. Modern Web Standards APIs: URLPattern & Web Crypto -->
<script type="module">
  const pattern = new URLPattern({ pathname: '/api/v1/users/:id' });
  const match = pattern.exec('https://api.domain.com/api/v1/users/usr_998');
  console.log(match?.pathname.groups.id); // 'usr_998'
  const randomBytes = crypto.getRandomValues(new Uint8Array(16));
</script>