{% comment %}
Spinner component - loading indicator using Lucide loader-circle icon
Usage:
  <c-spinner />
  <c-spinner size="sm" />
  <c-spinner size="lg" />
  <c-spinner class="text-primary" />
  
Note: Basecoat doesn't have a dedicated spinner component.
Uses Lucide loader-circle icon with animate-spin.
Size prop maps to Tailwind size utilities: sm=size-4, default=size-6, lg=size-8
{% endcomment %}
<svg 
  xmlns="http://www.w3.org/2000/svg"
  width="24"
  height="24"
  viewBox="0 0 24 24"
  fill="none"
  stroke="currentColor"
  stroke-width="2"
  stroke-linecap="round"
  stroke-linejoin="round"
  class="lucide lucide-loader-circle animate-spin {% if size == 'sm' %}size-4{% elif size == 'lg' %}size-8{% else %}size-6{% endif %} {{ class }}"
  role="status"
  aria-label="Loading"
  {{ attrs }}
>
  <path d="M21 12a9 9 0 1 1-6.219-8.56" />
</svg>