basecoat/docs/_includes/components/tabs.njk

{% macro tabs(
    id,
    tabsets=[],
    main_attrs=None,
    tablist_attrs=None,
    default_tab_index=1,
    include_html=true,
    include_script=false,
    register_on=["alpine:init"]
  )
%}
{% if include_script %}
  {% include "components/tabs-script.njk" %}
{% endif %}

{% if include_html %}
<div
  class="tabs {{ main_attrs.class }}"
  x-data="tabs({{ default_tab_index - 1 }})"
  {% if id %}id="{{ id }}"{% endif %}
  {% for key, value in main_attrs %}
    {% if key != 'class' %}{{ key }}="{{ value }}"{% endif %}
  {% endfor %}
>
  <div
    role="tablist"
    aria-orientation="horizontal"
    x-bind="$tablist"
    {% for key, value in tablist_attrs %}
      {{ key }}="{{ value }}"
    {% endfor %}
  >
    {% for tabset in tabsets %}
      <button
        type="button"
        role="tab"
        id="{{ tabset.id }}-tab-{{ loop.index }}"
        aria-controls="{{ tabset.id }}-panel-{{ loop.index }}"
        aria-selected="{{ 'true' if loop.index == default_tab_index else 'false' }}"
        tabindex="0"
        {% for key, value in tabset.tab_attrs %}
          {{ key }}="{{ value }}"
        {% endfor %}
      >
        {{ tabset.tab | safe }}
      </button>
    {% endfor %}
  </div>

  {% for tabset in tabsets %}
    {% if tabset.panel %}
      <div
        role="tabpanel"
        id="{{ tabset.id }}-panel-{{ loop.index }}"
        aria-labelledby="{{ tabset.id }}-tab-{{ loop.index }}"
        tabindex="-1"
        aria-selected="{{ 'true' if loop.index == default_tab_index else 'false' }}"
        {% if loop.index != default_tab_index %}hidden{% endif %}
        {% for key, value in tabset.panel_attrs %}
          {{ key }}="{{ value }}"
        {% endfor %}
      >
        {{ tabset.panel | safe }}
      </div>
    {% endif %}
  {% endfor %}
</div>
{% endif %}
{% endmacro %}