{# @description A responsive toolbar: left content and right-aligned actions, stacking vertically below its breakpoint. #}
{# @prop row:text | default:"md" | description:"True for always a row, or a breakpoint name for row layout at/above that width." #}
{# @prop gap:text | default:"2" | description:"Tailwind gap size between the two sides." #}
{# @prop class:text | description:"Extra classes on the wrapper." #}
{# @slot <h1>Page Title</h1> — Left content: heading, breadcrumbs, etc. #}
{# @slot:actions <button class="btn">Action</button> — Right content: buttons, action group. #}
<c-vars row="md" gap="2" class />
<div class="flex {% if row is True %}flex-row justify-between items-center{% else %}flex-col {{ row }}:flex-row {{ row }}:justify-between {{ row }}:items-center{% endif %} w-full gap-{{ gap }} {{ class }}"
     {{ attrs }}>
  <div class="flex-shrink-0">{{ slot }}</div>
  {% if actions %}<div class="flex-shrink-0">{{ actions }}</div>{% endif %}
</div>