Stacked Alert Group

<!--
  Several related alerts as one labelled group. The wrapper is a single
  aria-labelledby'd region with the heading as its name, so a screen-reader user
  hears "Notices, group" once and can step through the members - far better than
  three loose, separately-announced alerts. The children carry NO live role: the
  group is present on load, so there is nothing to announce assertively; the
  colour+icon pairing still carries each severity. Rows wrap and never overflow
  at 320px.
-->
<section aria-labelledby="grp-heading" class="rounded-xl border border-gray-200 bg-white p-3 dark:border-gray-800 dark:bg-gray-900">
  <h2 id="grp-heading" class="px-1 pb-2 text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">2 notices</h2>
  <ul class="space-y-2">
    <li class="flex items-start gap-2.5 rounded-lg border border-amber-200 bg-amber-50 px-3 py-2.5 text-amber-800 dark:border-amber-900 dark:bg-amber-950 dark:text-amber-200">
      <svg class="mt-px h-[1.125rem] w-[1.125rem] flex-none" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
        <path d="M8.3 3.1a2 2 0 0 1 3.4 0l6 10A2 2 0 0 1 16 16H4a2 2 0 0 1-1.7-3l6-9.9ZM10 7a1 1 0 0 0-1 1v3a1 1 0 1 0 2 0V8a1 1 0 0 0-1-1Zm0 8a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z" />
      </svg>
      <span class="min-w-0 flex-1 text-sm leading-normal">Your SSL certificate renews in 6 days.</span>
    </li>
    <li class="flex items-start gap-2.5 rounded-lg border border-blue-200 bg-blue-50 px-3 py-2.5 text-blue-800 dark:border-blue-900 dark:bg-blue-950 dark:text-blue-200">
      <svg class="mt-px h-[1.125rem] w-[1.125rem] flex-none" 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-16Zm1 4a1 1 0 1 1-2 0 1 1 0 0 1 2 0Zm-2 3a1 1 0 0 1 2 0v5a1 1 0 1 1-2 0V9Z" />
      </svg>
      <span class="min-w-0 flex-1 text-sm leading-normal">A new team member is waiting for a role assignment.</span>
    </li>
  </ul>
</section>