Toggleables can't toggle independently?

[matt17r]

I'm trying to use Toggle to switch which icon is hidden in a button when the button is clicked. Even if I start with Icon A visible and Icon B hidden, toggle synchronises them on first run.

Does Toggle support toggling two items with opposing values? If not, is this a valid use case that's worth adding support for?

<div data-controller="toggle" class="-mr-2 flex md:hidden">
  <button data-action="click->toggle#toggle touch->toggle#toggle" type="button" class="relative inline-flex items-center justify-center rounded-md bg-blue-900 p-2 text-blue-50">
    <!-- Hamburger icon, starts visible -->
    <svg data-toggle-target="toggleable" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
      <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
    </svg>
    <!-- Close (x) icon, starts hidden -->
    <svg data-toggle-target="toggleable" class="hidden h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
      <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
    </svg>
  </button>
</div>

[excid3]

Toggle's only designed for a single element currently.