{# Dropdown component — Alpine x-data with click-outside dismiss
   Contract: ~/.claude/skills/ux-architect/components/alpine-dropdown.md
   Status: available primitive, zero current consumers (cycle 286 audit).
   v0.62 CSS refactor: inline Tailwind → .dz-dropdown-* family + .dz-button
   primitives (components/fragments.css, components/button.css). #}
{# Usage: {% include 'components/alpine/dropdown.html' with context %} #}
{# Expects: dropdown_label (str), dropdown_items (list of {label, href?, hx_delete?, confirm?, hx_target?, class?}) #}
<div x-data="{ open: false }" @click.outside="open = false" @keydown.escape.window="open = false" class="dz-dropdown-root">
  <button @click="open = !open" class="dz-button dz-button-ghost" :aria-expanded="open">
    {{ dropdown_label | default("Actions") }}
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
         width="16" height="16" stroke="currentColor"
         :style="open ? 'transform: rotate(180deg); transition: transform var(--duration-fast)' : 'transition: transform var(--duration-fast)'">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
    </svg>
  </button>
  <ul x-show="open" x-transition class="dz-dropdown-panel" style="inset-inline-end: 0; inset-inline-start: auto;">
    {% for item in dropdown_items | default([]) %}
    <li>
      {% if item.href %}
      <a href="{{ item.href }}" class="dz-dropdown-item {{ item.class | default('') }}">{{ item.label }}</a>
      {% elif item.hx_delete %}
      <button class="dz-dropdown-item {{ item.class | default('') }}"
              hx-delete="{{ item.hx_delete }}"
              hx-confirm="{{ item.confirm | default('Are you sure?') }}"
              hx-target="{{ item.hx_target | default('body') }}">
        {{ item.label }}
      </button>
      {% else %}
      <a href="#" class="dz-dropdown-item {{ item.class | default('') }}">{{ item.label }}</a>
      {% endif %}
    </li>
    {% endfor %}
  </ul>
</div>