{% load ui_assets ui_classes ui_props %}
{% ui_require_asset "trellis:dropdown" %}

<c-vars side="bottom"
        align="start"
        offset="0"
        gap="4"
        open="False"
        disabled="False"
        class="" />
{% ui_class "ui.dropdown" "root" class=class as root_class %}
<div x-data="UiDropdown"
     x-bind="root"
     data-ui-dropdown
     data-state="closed"
     data-side="{{ side }}"
     data-align="{{ align }}"
     data-offset="{{ offset }}"
     data-gap="{{ gap }}"
     data-open="{{ open }}"
     {% if disabled|ui_bool %}data-disabled="true"{% endif %}
     data-class="{{ class }}"
     class="{{ root_class }}"
     {% if "x-ui-transition:opening" not in attrs %}x-ui-transition:opening="$ui.motion($transition).animate('[popover]', $ui.motion.presets.popover.in).role('feedback').play()"{% endif %}
     {% if "x-ui-transition:closing" not in attrs %}x-ui-transition:closing="$ui.motion($transition).animate('[popover]', $ui.motion.presets.popover.out).role('feedback').play()"{% endif %}
     {{ attrs }}>
    {{ slot }}
</div>