Filter Management Showcase

This showcase demonstrates a compact filter management pattern built from existing dsx CSS primitives.

Live Preview

What it demonstrates

Active filter rows with .dsx-large-token and .dsx-large-token__label
A secondary .dsx-btn for adding filters
A static .dsx-popover menu with clickable options
A destructive clear-all action styled as a link button
An empty state with small token alternatives from tokens-chips.css

CSS building blocks

File	Classes used
`css/large-token.css`	`.dsx-large-token`, `.dsx-large-token__label`, `.dsx-large-token-list`
`css/popover.css`	`.dsx-popover`, `.dsx-popover--small`, `.dsx-popover--dividers`, `.dsx-popover__option`, `.dsx-popover__option--clickable`
`css/buttons.css`	`.dsx-btn`, `.dsx-btn--secondary`, `.dsx-btn--link`, `.dsx-btn--icon`, `.dsx-btn--sm`
`css/tokens-chips.css`	`.dsx-token`, `.dsx-token--highlight`, `.dsx-token-list`

Pattern summary

<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="Active" readonly>
    <button class="dsx-btn dsx-btn--secondary dsx-btn--icon dsx-btn--sm dsx-btn--flat-left" type="button">
      ×
    </button>
  </div>
</div>

<button class="dsx-btn dsx-btn--secondary" type="button">Add filter</button>

<div class="dsx-popover dsx-popover--small dsx-popover--dividers" role="menu">
  <button class="dsx-popover__option dsx-popover__option--clickable" type="button">Status</button>
  <button class="dsx-popover__option dsx-popover__option--clickable" type="button">Category</button>
</div>

<button class="dsx-btn dsx-btn--link" type="button">Clear all</button>

Usage notes

Use large tokens when the filter label and value should remain visible together.
Keep remove controls as real buttons with descriptive aria-label text.
Use the popover for discoverable filter creation, then fall back to small tokens for suggested shortcuts in the empty state.