{# Full-width alert banner — canonical renderer (cycle 247).

   Contract: ~/.claude/skills/ux-architect/components/parking-lot-primitives.md

   Parameters:
     message     : str                                   — the alert text
     level       : "info" | "success" | "warning" | "error" (default: info)
     dismissible : bool (default true)                    — show an × button
     icon        : str | None                             — lucide icon name

   Four semantic tones mirror the status-badge contract (cycle 238).

   v0.62 CSS refactor: tone tinting now driven by `data-dz-alert-level`
   attribute selectors in components/fragments.css — replaces the
   4-branch Tailwind class string that built `bg-[hsl(var(--{{ _token }})/0.08)]
   border-[hsl(var(--{{ _token }})/0.2)]` from the resolved token name.
   Same #906-class JIT-visibility win for downstream consumers. #}
{% set level = level | default('info') %}
{% set dismissible = dismissible | default(true) %}
<div class="dz-alert-banner"
     role="alert"
     data-dz-alert-level="{{ level }}"
     {% if dismissible %}x-data="{ show: true }" x-show="show" x-cloak x-transition{% endif %}>
  {% if icon %}
  <i data-lucide="{{ icon }}" class="dz-alert-icon" aria-hidden="true"></i>
  {% endif %}
  <span class="dz-alert-message">{{ message }}</span>
  {% if dismissible %}
  <button type="button"
          @click="show = false"
          class="dz-alert-dismiss"
          aria-label="Dismiss">
    <span aria-hidden="true">&times;</span>
  </button>
  {% endif %}
</div>