{# @description One entry of a menu, used inside menu. Renders as a link when an href is given and as a button otherwise. An item with an icon and no text is named by an aria-label passed by the caller. The class and any attribute not listed below land on that link or button, where target, htmx attributes and a tooltip belong, and the list item around it takes none. #}
{# @prop text:text | description:"The entry's label." #}
{# @prop href:text | description:"Link address. Without it the entry is a button." #}
{# @prop active:boolean | description:"Mark this entry as the current one." #}
{# @prop disabled:boolean | description:"Show the entry as unavailable. A link loses its href and a button is disabled." #}
{# @prop icon:text | description:"Icon shown before the text, passed as the name of the icon component." #}
{# @prop class:text | description:"Extra classes added to the link or button." #}
{# @prop type:select['button','submit','reset'] | description:"The button's type, for an entry without an href. With submit and a form attribute naming a form, the entry submits it." #}
{# @prop aria-label:text | description:"Accessible name of the link or button, for an entry that shows only an icon." #}
{# @slot — Extra content shown after the text. #}
<c-vars text href="" active="" disabled="" icon class type="button" aria-label />
<li{% if disabled %} class="menu-disabled"{% endif %}>
  {% if href %}
    <a {% if not disabled %}href="{{ href }}"{% else %}role="link" aria-disabled="true"{% endif %}
       {% if active or class %}class="{% if active %}menu-active {% endif %}{{ class }}"{% endif %}
       {% if active %}aria-current="page"{% endif %}
       {% if aria_label %}aria-label="{{ aria_label }}"{% endif %}
       {{ attrs }}>
      {% if icon %}<c-icon name="{{ icon }}" aria-hidden="true" only />{% endif %}{{ text }}{{ slot }}
    </a>
  {% else %}
    <button type="{{ type }}"
            {% if active or class %}class="{% if active %}menu-active {% endif %}{{ class }}"{% endif %}
            {% if disabled %}disabled{% endif %}
            {% if aria_label %}aria-label="{{ aria_label }}"{% endif %}
            {{ attrs }}>
      {% if icon %}<c-icon name="{{ icon }}" aria-hidden="true" only />{% endif %}{{ text }}{{ slot }}
    </button>
  {% endif %}
</li>