{# @description A row of tabs. Fill the default slot with tabs.tab components. Tabs are buttons, links or radio inputs depending on the attributes each tab is given. #}
{# @prop size:select['xs','sm','md','lg','xl'] | description:"Size of the tabs." #}
{# @prop box:boolean | description:"Draw the tabs as a boxed group." #}
{# @prop border:boolean | description:"Draw a border under the tabs." #}
{# @prop lift:boolean | description:"Lift the active tab above the row." #}
{# @prop placement:select['top','bottom'] | description:"Whether the tabs sit above or below their content." #}
{# @prop links:boolean | description:"Set when every tab is a link, so the row is plain navigation and not a tablist." #}
{# @prop class:text | description:"Extra classes added to the tabs." #}
{# @slot <c-tabs.tab text="Overview" active /><c-tabs.tab text="Usage" /><c-tabs.tab text="Archived" disabled /> — The tabs, as tabs.tab components. #}
{% load daisy_cotton %}
<c-vars size box border lift placement links="" class />
<div {% if not links %}role="tablist" {% endif %}class="tabs{% if box %} tabs-box{% endif %}{% if border %} tabs-border{% endif %}{% if lift %} tabs-lift{% endif %} {% variation size "tabs" "xs,sm,md,lg,xl" %} {% variation placement "tabs" "top,bottom" %} {{ class }}"
     {{ attrs }}>{{ slot }}</div>