Progress Toast

<!--
  Toast with a countdown bar. The bar is ONE width transition (100% -> 0% over the
  duration), which is why motion-reduce can switch it off with a single
  motion-reduce:transition-none - the toast still dismisses on its timer, only the
  sliding stops. The bar is aria-hidden: its meaning is the timer, not content.
  role="status" stays polite; width caps at the viewport at 320px.
-->
<div role="status" aria-live="polite" class="pointer-events-auto w-96 max-w-[calc(100vw-2rem)] overflow-hidden rounded-xl border border-gray-200 bg-white shadow-[0_10px_30px_-10px_rgba(0,0,0,0.35)] dark:border-gray-800 dark:bg-gray-900">
  <div class="flex items-start gap-3 px-4 py-3.5">
    <svg class="mt-0.5 h-5 w-5 flex-none text-blue-700 dark:text-blue-300" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
      <path d="M10 2a8 8 0 1 0 0 16 8 8 0 0 0 0-16Zm0 4a1 1 0 1 1 0 2 1 1 0 0 1 0-2Zm1 4a1 1 0 0 0-2 0v4a1 1 0 0 0 2 0v-4Z" />
    </svg>
    <div class="min-w-0 flex-1">
      <p class="text-sm font-semibold text-gray-900 dark:text-gray-100">Export started</p>
      <p class="mt-0.5 text-sm leading-normal text-gray-600 dark:text-gray-400">We'll email you when the file is ready.</p>
    </div>
    <button type="button" aria-label="Dismiss" class="-mr-1 -mt-1 flex h-7 w-7 flex-none items-center justify-center rounded-md text-gray-600 transition hover:bg-gray-100 hover:text-gray-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 motion-reduce:transition-none dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-100 dark:focus-visible:ring-blue-400">
      <svg class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
        <path d="M6.3 6.3a1 1 0 0 1 1.4 0L10 8.6l2.3-2.3a1 1 0 1 1 1.4 1.4L11.4 10l2.3 2.3a1 1 0 0 1-1.4 1.4L10 11.4l-2.3 2.3a1 1 0 0 1-1.4-1.4L8.6 10 6.3 7.7a1 1 0 0 1 0-1.4Z" />
      </svg>
    </button>
  </div>
  <div class="h-1 w-full bg-gray-100 dark:bg-gray-800" aria-hidden="true">
    <div class="h-full w-full bg-blue-600 transition-[width] ease-linear motion-reduce:transition-none dark:bg-blue-400" style="width:0%;transition-duration:6s"></div>
  </div>
</div>