A button that opens a menu of filter groups; a group opens a submenu of ticks, checkboxes or radios. Ticking does not close the menu. The menu is a form: it sends on Apply (phx-submit), or on every tick with phx-change, as %{"filters" => %{"status" => ["progress"], "who" => ["CA"]}}. A count on each group and on the button follows the ticks, except for an option marked default, which is what the filter already means.

A group is %{key: "status", label: "Status", type: :checkbox, options: [...]}; type is :checkbox or :radio and anything else raises. An option is %{value: "progress", label: "In progress", count: 2, checked: true, default: false, avatar: "CA"}; count, checked, default and avatar are optional, and the option_icon slot draws an icon or a color dot before the label of each option.

The count on the button is the number of filters that were applied: the ones sent by the last Apply (or, when the form has phx-change, every tick). The counts on the groups follow the ticks, and the Apply button shows how many changes it would send. Applying gives the focus back to the button; the menu also closes when the focus leaves it. Arrows move, → opens a submenu, ← and Esc go back, Enter and Space tick. Words are attributes and icons are slots.

Clear (reset_label) unticks every option, back to the default ones. With reset_submits it then submits the form, so the server hears the empty filters at once; without it, it only unticks, and Apply (or phx-change) sends them. The count on the button is only for what was applied, so it drops when Clear submits.

align is the side of the button the panel lines up with; the submenus open to the right of the panel for :start and to the left for :end, and turn to the other side when there is no room on the screen. class goes to the root; phx-submit, phx-change, phx-target and the other global attributes go to the form.