Compact Filter Dropdown

This showcase demonstrates a compact table toolbar that keeps filter editing inside a popover instead of expanding into a full sidebar.

Live Preview

What it demonstrates

A compact .dsx-btn trigger anchored to a .dsx-popover form
Native .dsx-select fields for quick categorical filters
<dsx-dropdown-typeahead> for searchable queue selection
.dsx-large-token rows that keep the applied filters visible above the table
A dense .dsx-table.dsx-table--compact review list that reacts to the active filter state

CSS and component building blocks

File	Classes / elements used
`css/buttons.css`	`.dsx-btn`, `.dsx-btn--secondary`, `.dsx-btn--primary`, `.dsx-btn--link`, `.dsx-btn--sm`
`css/popover.css`	`.dsx-popover`
`css/select.css`	`.dsx-select`
`css/large-token.css`	`.dsx-large-token`, `.dsx-large-token__label`, `.dsx-large-token-list`
`css/table.css`	`.dsx-table`, `.dsx-table--compact`, `.dsx-table__row--selected`
`components/dropdown-typeahead.js`	`<dsx-dropdown-typeahead>`

Pattern summary

<button class="dsx-btn dsx-btn--secondary dsx-btn--sm" aria-haspopup="dialog">
  Filters
</button>

<div class="dsx-popover" role="dialog">
  <select class="dsx-select">
    <option>Any status</option>
  </select>

  <dsx-dropdown-typeahead placeholder="Any queue"></dsx-dropdown-typeahead>
</div>

<div class="dsx-large-token-list">
  <div class="dsx-large-token">
    <span class="dsx-large-token__label">Status</span>
    <input class="dsx-input dsx-input--flat dsx-input--sm" value="Needs review" readonly>
    <button class="dsx-btn dsx-btn--secondary dsx-btn--icon dsx-btn--sm dsx-btn--flat-left" type="button">
      ×
    </button>
  </div>
</div>

<table class="dsx-table dsx-table--compact">…</table>

Usage notes

Keep the trigger small so the toolbar stays compact, but give the popover enough width for readable labels.
Reflect applied filters outside the popover with large tokens so the active state stays visible after the panel closes.
Pair the pattern with a dense table or review queue so the filter dropdown solves a real workflow problem.
If the demo is interactive, wire remove-token actions back to the same state that drives the dropdown form.