<button
  data-part="trigger"
  phx-click={Phoenix.LiveView.JS.toggle_attribute({"data-state", "open", "closed"})}
  style="display:inline-flex; align-items:center; justify-content:center; padding:.75rem; border:1px solid #d0d0d0; border-radius:10px; background:#fff; color:#1a1a1a; cursor:pointer;"
>
  <.icon name="selector" transition="morph" active_name="selector_2"/>
</button>

<button
  data-part="trigger"
  phx-click={Phoenix.LiveView.JS.toggle_attribute({"data-state", "open", "closed"})}
  style="display:inline-flex; align-items:center; justify-content:center; padding:.75rem; border:1px solid #d0d0d0; border-radius:10px; background:#fff; color:#1a1a1a; cursor:pointer;"
>
  <.icon name="menu" transition="crossfade_rotate" active_name="close"/>
</button>

<button
  data-part="trigger"
  phx-click={Phoenix.LiveView.JS.toggle_attribute({"data-state", "open", "closed"})}
  style="display:inline-flex; align-items:center; justify-content:center; padding:.75rem; border:1px solid #d0d0d0; border-radius:10px; background:#fff; color:#1a1a1a; cursor:pointer;"
>
  <.icon name="sun_high" transition="crossfade_rotate" active_name="moon"/>
</button>

<button
  data-part="trigger"
  phx-click={Phoenix.LiveView.JS.toggle_attribute({"data-state", "open", "closed"})}
  style="display:inline-flex; align-items:center; justify-content:center; padding:.75rem; border:1px solid #d0d0d0; border-radius:10px; background:#fff; color:#1a1a1a; cursor:pointer;"
>
  <.icon name="player_play" transition="auto" active_name="player_pause"/>
</button>