{# Toggle group — exclusive (radiogroup) or multi-select button group.

   Contract: ~/.claude/skills/ux-architect/components/toggle-group.md (UX-046)

   A segmented control: a row of connected buttons where one (exclusive)
   or several (multi) can be "pressed". Uses the ``dzToggleGroup`` Alpine
   controller at ``dz-alpine.js:966`` for state + keyboard semantics.
   Writes the selected value(s) to a hidden input for form submission.

   Parameters:
     name     : str                           — form field name (required)
     options  : list of {value, label}        — button choices (required)
     multi    : bool                          — true for multi-select (default false → exclusive)
     initial  : str | None                    — pre-selected value (comma-separated for multi)
     label    : str | None                    — ARIA group label (defaults to ``name``)

   v0.62 CSS refactor: inline Tailwind → semantic .dz-toggle-* classes
   (components/fragments.css). Selected-button styling now driven by
   `aria-pressed="true"` (already emitted via Alpine `:aria-pressed`)
   so the visual state and the accessibility attribute share one
   source of truth — and Alpine `:class` collapses to nothing rather
   than two parallel branch class strings.
#}
{% set multi = multi | default(false) %}
<div x-data="dzToggleGroup"
     class="dz-toggle-group"
     data-dz-multi="{{ 'true' if multi else 'false' }}"
     {% if initial %}data-dz-value="{{ initial }}"{% endif %}
     role="{{ 'group' if multi else 'radiogroup' }}"
     aria-label="{{ label | default(name) }}">
  {# Hidden input carries the (possibly joined) value for form submission #}
  <input type="hidden" name="{{ name }}" :value="multi ? (value || []).join(',') : (value || '')">
  {% for option in options %}
  <button type="button"
          data-dz-toggle-item
          data-dz-value="{{ option.value }}"
          @click="toggle('{{ option.value }}')"
          @keydown.left.prevent="$el.previousElementSibling && $el.previousElementSibling.focus()"
          @keydown.right.prevent="$el.nextElementSibling && $el.nextElementSibling.tagName === 'BUTTON' && $el.nextElementSibling.focus()"
          :aria-pressed="isSelected('{{ option.value }}')"
          class="dz-toggle-item">
    {{ option.label }}
  </button>
  {% endfor %}
</div>