{# @description A section header for a menu, or a collapsible <details> group. #}
{# @prop label:text | description:"The group's heading text." #}
{# @prop collapse:boolean | description:"Render as a collapsible <details> group instead of a static header." #}
{# @prop icon:text | description:"Icon shown beside the label, when collapse is set." #}
{# @prop icon_class:text | description:"Extra classes appended to the icon, when collapse is set." #}
{# @prop badge:text | description:"Badge text shown beside the label, when collapse is set." #}
{# @prop badge_class:text | description:"Extra classes appended to the badge, when collapse is set." #}
{# @slot <c-menu.item /> — The group's menu items. #}
<c-vars label collapse icon icon_class badge badge_class />
{% if collapse %}
  <li>
    <details {% if selected %}open{% endif %}>
      <summary>
        {% if icon %}<c-icon name="{{ icon }}" class="{{ icon_class }}" />{% endif %}
        <span>{{ label }}</span>
        {% if badge %}<span class="badge badge-sm ms-auto {{ badge_class }}">{{ badge }}</span>{% endif %}
      </summary>
      <ul>
        {{ slot }}
      </ul>
    </details>
  </li>
{% else %}
  <li></li>
  <li class="menu-title uppercase">
    <span>{{ label }}</span>
  </li>
  {{ slot }}
{% endif %}