{% load design_components %}
<dds-popout class="dds-popout" data-align="{{ align }}" data-state="{{ state }}">
  {% if trigger %}
    {{ trigger }}
  {% else %}
    <button type="button" class="dds-popout-trigger" data-popout-trigger aria-haspopup="{{ aria_haspopup }}" aria-expanded="{{ aria_expanded }}"{% if aria_label %} aria-label="{{ aria_label }}"{% endif %}>{% if has_icon %}{% dds__icon name=icon size="sm" %}{% endif %}{% if show_label %}<span>{{ label }}</span>{% endif %}{% if not icon_only %}{% dds__icon name="chevron-down" size="xs" %}{% endif %}</button>
  {% endif %}
  <div data-popout-menu data-surface="popout"{% if role != "none" %} role="{{ role }}"{% endif %}{% if resolved_menu_label %} aria-label="{{ resolved_menu_label }}"{% endif %}{% if not open %} hidden{% endif %}>{{ menu_content }}</div>
</dds-popout>