<div class="position-relative" data-controller="dialog" data-action="keydown.esc->dialog#close">
  <button class="btn btn--reversed txt-small borderless" data-action="dialog#open:stop" style="--btn-background: <%= stage_color(stage) %>">
    <%= icon_tag "art" %>
    <span class="for-screen-reader">Change color</span>
  </button>

  <dialog class="color-picker panel fill-white shadow gap-half" data-dialog-target="dialog" data-action="keydown.esc->dialog#close click@document->dialog#closeOnClickOutside">
    <form method="dialog">
      <button class="btn txt-small" title="Close (esc)">
        <%= icon_tag "remove" %>
        <span class="for-screen-reader">Close</span>
      </button>
    </form>

    <%= form_with model: stage, url: workflow_stage_path(stage.workflow, stage), class: "flex gap-half", data: { controller: "form", action: "change->form#submit" } do |form| %>
      <% Card::COLORS.each do |color| %>
        <span class="color-picker__color">
          <label class="btn btn--circle txt-small borderless" style="--btn-background: <%= color %>" title="<%= color %>">
            <%= form.radio_button :color, color %>
            <%= icon_tag "check", class: "checked" %>
            <span class="for-screen-reader"><%= color %></span>
          </label>
        </span>
      <% end %>
    <% end %>
  </dialog>
</div>
