A container element used to display a menu or other content in a popover.
<div x-data x-popover class="azalea-dropdown relative"><button x-popover:button type="button" class="inline-flex items-center justify-center w-full rounded-md border border-tertiary-300 shadow-sm px-4 py-2 bg-white text-sm font-medium text-tertiary-700 hover:bg-tertiary-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-tertiary-100 focus:ring-primary-500"><span class="mr-2">Menu</span><span x-cloak x-show="!$popover.isOpen">
<div class="fill-current w-5 h-5 md:w-6 md:h-6" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<polyline points="6 9 12 15 18 9"></polyline>
</svg></div>
</span><span x-cloak x-show="$popover.isOpen">
<div class="fill-current w-5 h-5 md:w-6 md:h-6" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<line x1="18" y1="6" x2="6" y2="18" />
<line x1="6" y1="6" x2="18" y2="18" />
</svg></div>
</span></button>
<div x-popover:panel x-cloak x-transition.origin.top.left class="absolute left-0 mt-2 bg-white rounded-md shadow-md focus:outline-none z-10 w-full"></div>
</div>
{% apply spaceless %}
{% set classes = ['w-full'] %}
{# Prop: size #}
{% if size == 'large' %}
{% set classes = classes|merge(['lg:w-96']) %}
{% elseif size == 'medium' %}
{% set classes = classes|merge(['lg:w-60']) %}
{% elseif size == 'small' %}
{% set classes = classes|merge(['lg:w-44']) %}
{% elseif size == 'xsmall' %}
{% set classes = classes|merge(['lg:w-32']) %}
{% endif %}
{# Prop: label #}
<div x-data x-popover class="azalea-dropdown relative">
<button
x-popover:button
type="button"
class="inline-flex items-center justify-center w-full rounded-md border border-tertiary-300 shadow-sm px-4 py-2 bg-white text-sm font-medium text-tertiary-700 hover:bg-tertiary-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-tertiary-100 focus:ring-primary-500"
>
{# Slot: button text #}
{% block button %}
<span class="mr-2">{{ label|default('Menu') }}</span>
<span x-cloak x-show="!$popover.isOpen">
{% include "@components/icon/icon.twig" with { icon: 'chevron-down', size: 'small' } only %}
</span>
<span x-cloak x-show="$popover.isOpen">
{% include "@components/icon/icon.twig" with { icon: 'x', size: 'small' } only %}
</span>
{% endblock button %}
</button>
<div
x-popover:panel
x-cloak
x-transition.origin.top.left
class="absolute left-0 mt-2 bg-white rounded-md shadow-md focus:outline-none z-10 {{ classes|join(' ') }}"
{% if focus %}focus{% endif %}
>
{# Slot: content #}
{% block content %}{% endblock content %}
</div>
</div>
{% endapply %}