{# @description One step of a process, used inside steps. Shows an optional icon, then the text. #}
{# @prop text:text | description:"The step's label." #}
{# @prop variant:select['neutral','primary','secondary','accent','info','success','warning','error'] | description:"Colour of the step and the line leading to it." #}
{# @prop current:boolean | description:"Mark this step as the one in progress." #}
{# @prop content:text | description:"Text shown in the step's marker in place of the number." #}
{# @prop icon:text | description:"Icon shown in the step's marker, passed as the name of the icon component." #}
{# @prop class:text | description:"Extra classes added to the step." #}
{# @slot — Extra content shown after the text. #}
{% load daisy_cotton %}
<c-vars text variant current="" content="" icon class />
<li class="step {% variation variant "step" "neutral,primary,secondary,accent,info,success,warning,error" %} {{ class }}"
    {% if content %}data-content="{{ content }}"{% endif %}
    {% if current %}aria-current="step"{% endif %}
    {{ attrs }}>
  {% if icon %}<span class="step-icon"><c-icon name="{{ icon }}" aria-hidden="true" only /></span>{% endif %}
  {{ text }}{{ slot }}
</li>