Auto-dismiss Alert

<!--
  Auto-dismiss with a visible countdown bar, so nothing vanishes without warning.
  Two accessibility rules drive the markup:
  - The bar is decorative (aria-hidden). The remaining time is not announced
    tick-by-tick - that would flood a screen reader - so role="status" announces
    the message once and the timer is silent.
  - motion-reduce:hidden drops the shrinking bar for users who ask for less
    motion; the auto-dismiss timer still fires, it just isn't animated. Never
    auto-dismiss the ONLY copy of critical text - this pattern is for
    acknowledgements the user can also reach elsewhere.
  See the React/TypeScript tabs for the timer; CSS alone can't unmount.
-->
<div class="relative overflow-hidden rounded-lg border border-gray-200 bg-white px-4 py-3.5 shadow-sm dark:border-gray-800 dark:bg-gray-900" role="status">
  <div class="flex items-start gap-2.5">
    <svg class="mt-px h-[1.125rem] w-[1.125rem] flex-none text-green-600 dark:text-green-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
      <path d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm3.7-9.3a1 1 0 0 0-1.4-1.4L9 10.6 7.7 9.3a1 1 0 0 0-1.4 1.4l2 2a1 1 0 0 0 1.4 0l4-4Z" />
    </svg>
    <p class="min-w-0 flex-1 text-sm leading-normal text-gray-700 dark:text-gray-300">Changes saved. This notice will clear itself shortly.</p>
  </div>
  <div class="absolute inset-x-0 bottom-0 h-1 bg-gray-100 dark:bg-gray-800 motion-reduce:hidden" aria-hidden="true">
    <div class="h-full w-0 bg-green-600 transition-[width] duration-[5000ms] ease-linear dark:bg-green-400"></div>
  </div>
</div>