{# @description A daisyUI dropdown built on the popover method: a trigger button opens a popover panel with no script. By default the trigger is a button built from the dropdown's own extra attributes — type text="Options" in the attributes field to see it labelled. #}
{# @prop id:text | description:"Panel id, and the base of the trigger's anchor name. A custom trigger (the button slot) needs this to target the panel itself." #}
{# @prop placement:select['top','bottom','left','right','start','center','end','top start','top center','top end','bottom start','bottom center','bottom end','left start','left center','left end','right start','right center','right end'] | description:"One side and one alignment, e.g. \"top end\". Leave empty for the browser's default placement." #}
{# @prop content_class:text | description:"Extra classes added to the panel." #}
{# @prop button:text | description:"A custom trigger. When given, extra attributes fall through to the dropdown wrapper instead of a button, and the caller owns the trigger's popovertarget, type=\"button\" and anchor style." #}
{# @prop class:text | description:"Extra classes added to the dropdown wrapper." #}
{# @slot <ul class="menu"><li><a href="#">Profile</a></li><li><a href="#">Settings</a></li></ul> — The panel content. #}
{# @slot:button — A custom trigger. Must carry popovertarget set to the dropdown's id and type="button", plus style="anchor-name: --<id>" for placement, so a dropdown with a custom trigger needs an id. #}
{# Without CSS anchor positioning the panel still opens but may not sit beside its trigger: a limit of the popover method. #}
{% load daisy_cotton %}
<c-vars id=""
        placement=""
        content_class=""
        button=""
        class="" />
{% unique_id "dropdown" as generated_id %}{% firstof id generated_id as panel_id %}
<div class="inline-block {{ class }}" {% if button %}{{ attrs }}{% endif %}>
  {% if button %}
    {{ button }}
  {% else %}
    <c-button type="button" :attrs="attrs" popovertarget="{{ panel_id }}" style="anchor-name: --{{ panel_id }}" />
  {% endif %}
  <div id="{{ panel_id }}"
       popover
       class="dropdown {% for word in placement.split %}{% variation word "dropdown" "top,bottom,left,right,start,center,end" %} {% endfor %}bg-base-100 rounded-box min-w-52 shadow-sm {{ content_class }}"
       style="position-anchor: --{{ panel_id }}">{{ slot }}</div>
</div>