List filters
A search + filters + sort row that keeps the filters inline until they'd no longer fit, then collapses them behind a single funnel button that opens an anchored popover. Width-driven (a ResizeObserver), not a fixed breakpoint — so it collapses exactly when the row runs out of room, whatever the filter count.
Canonical
One row: search (grows), filters, sort. While the dropdowns fit they sit inline; the moment they'd overflow they collapse into the funnel button, which opens the same dropdowns in an anchored popover.
Behaviour
Props
2 attributes| Attribute | Values | Notes |
|---|---|---|
| filter-count | int | Active-filter count, shown as a badge on the collapsed funnel icon. |
| trigger-id | string | Id of the collapsed trigger (default filter-button) so a page can name it in an Alpine-AJAX x-target. |
| breakpoint | Medium, Large | Deprecated — ignored. Collapse is width-driven now; kept only so old call sites still bind. |
The parent <form> must declare x-data="koalaListFilters()" and lay out a single row tagged data-filter-bar containing data-filter-search and (optionally) data-filter-sort. The component measures these to decide when to collapse.
Do & don't
<koala-list-filters> and sort in one data-filter-bar row. Each checkbox auto-submits via $el.form.requestSubmit().