Typing Indicator

`<pura-typing>` is a three-dot "typing…" indicator for chat and agent interfaces. The bounce is pure CSS `@keyframes` with a per-dot stagger, and `role="status"` with a localized `aria-label` announces it to assistive tech. Theme it with `--pura-typing-color`, `--pura-typing-size`, and `--pura-typing-gap`. Under reduced motion the dots fall still while the status label still conveys the meaning.

Preview

<pura-typing></pura-typing>

<!-- Custom color + larger dots -->
<pura-typing style="--pura-typing-color: #2563eb; --pura-typing-size: 0.6rem;"></pura-typing>

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

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