{# Popover — anchored floating content panel.
   Contract: ~/.claude/skills/ux-architect/components/popover.md (UX-015)
   Parameters: trigger_text (str), position (str: top|bottom|left|right, default: bottom)

   v0.62 CSS refactor: inline Tailwind → semantic .dz-popover-* classes
   (components/fragments.css). Position via Alpine x-anchor (Floating UI). #}
{% set position = position | default('bottom') %}
<div x-data="dzPopover" class="dz-popover">
  {# Trigger #}
  <button @click="toggle()" type="button"
          :aria-expanded="open"
          class="dz-popover-trigger">
    {{ trigger_text | default('More') }}
  </button>

  {# Content panel — position via Alpine x-anchor (Floating UI under the hood) #}
  <div x-show="open"
       x-transition:enter="transition ease-out duration-150"
       x-transition:enter-start="opacity-0 scale-95"
       x-transition:enter-end="opacity-100 scale-100"
       x-transition:leave="transition ease-in duration-100"
       x-transition:leave-start="opacity-100 scale-100"
       x-transition:leave-end="opacity-0 scale-95"
       x-anchor.{{ position }}="$el.previousElementSibling"
       role="dialog"
       class="dz-popover-panel"
       style="display: none">
    {% block popover_content %}{{ content | safe if content else '' }}{% endblock %}
  </div>
</div>