{% comment %}
Component: Selection Control (c-check, c-switch)
Supports checkbox, radio, and accessible switch.
{% endcomment %}
<div class="flex items-start gap-2.5" {% if variant == "switch" %}x-data="{ checked: {% if checked %}true{% else %}false{% endif %} }"{% endif %}>
    {% if variant == "switch" %}
    <label class="relative inline-flex items-center cursor-pointer select-none">
        <input type="checkbox"
               id="{{ id|default:name }}"
               name="{{ name }}"
               role="switch"
               aria-checked="{% if checked %}true{% else %}false{% endif %}"
               :aria-checked="checked ? 'true' : 'false'"
               @change="checked = $el.checked"
               {% if checked %}checked{% endif %}
               {% if disabled %}disabled{% endif %}
               class="sr-only peer"
               {% for k, v in attrs.items %} {{ k }}="{{ v }}"{% endfor %}>
        <div class="w-9 h-5 bg-border rounded-full peer-checked:bg-accent peer-focus-visible:ring-2 peer-focus-visible:ring-focus transition-colors relative after:content-[''] after:absolute after:top-0.5 after:left-0.5 after:bg-surface after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:after:translate-x-4"></div>
        {% if label %}<span class="ml-2 text-sm text-text font-medium">{{ label }}</span>{% endif %}
    </label>
    {% elif variant == "radio" %}
    <label class="flex items-center gap-2 cursor-pointer select-none">
        <input type="radio"
               id="{{ id|default:name }}"
               name="{{ name }}"
               value="{{ value|default_if_none:'' }}"
               {% if checked %}checked{% endif %}
               {% if disabled %}disabled{% endif %}
               class="w-4 h-4 text-accent border-control focus:ring-focus"
               {% for k, v in attrs.items %} {{ k }}="{{ v }}"{% endfor %}>
        {% if label %}<span class="text-sm text-text">{{ label }}</span>{% endif %}
    </label>
    {% else %}
    <label class="flex items-start gap-2 cursor-pointer select-none">
        <input type="checkbox"
               id="{{ id|default:name }}"
               name="{{ name }}"
               value="{{ value|default_if_none:'' }}"
               {% if checked %}checked{% endif %}
               {% if disabled %}disabled{% endif %}
               class="w-4 h-4 mt-0.5 rounded border-control text-accent focus:ring-focus"
               {% for k, v in attrs.items %} {{ k }}="{{ v }}"{% endfor %}>
        <div class="flex flex-col">
            {% if label %}<span class="text-sm text-text font-medium">{{ label }}</span>{% endif %}
            {% if description %}<span class="text-xs text-subtle">{{ description }}</span>{% endif %}
        </div>
    </label>
    {% endif %}
</div>