Filters are a way for users to drill down information.
<filters-trigger>
<button type="button"
class="filters-trigger__btn btn btn--icon-square"
aria-label="Show Filters">
<tk-icon class="filters-trigger__icon"
name="filters"
size="small">
</tk-icon>
</button>
</filters-trigger>
<filters-trigger>
<button type="button"
class="filters-trigger__btn btn btn--icon-square active"
aria-label="Show Filters">
<span class="filters-trigger__count mr-2x">5</span>
<tk-icon class="filters-trigger__icon"
name="filters"
size="small">
</tk-icon>
</button>
</filters-trigger>
<div class="filters-overlay-container">
<filters-overlay>
<div class="filters-overlay__header">
<h2 class="filters-header__title mr-3x">Filters</h2>
</div>
<div class="filters-overlay__body">
<accordion>
<accordion-trigger class="mb-3x">
<button type="button" class="accordion-trigger__btn btn">
<span class="accordion-trigger__title">
Potion Names
<tk-icon class="icon-arrow--up ml-2x"
name="dropdown"
size="xs">
</tk-icon>
</span>
<span class="accordion-trigger__count">1 Selected</span>
</button>
</accordion-trigger>
<accordion-content>
<div class="filters-input-container">
<filters-input class="filters-input search">
<input class="form-input filters-input__input" placeholder="Filter by potion name">
</filters-input>
<filters-results class="filters-input-container__results">
<nav class="tab-switcher tab-switcher--left">
<button type="button" class="tab-switcher__link active">
My potions <span class="badge">2</span>
</button>
<button type="button" class="tab-switcher__link">
All potions <tk-badge type="muted">188</tk-badge>
</button>
</nav>
<hr class="filters-overlay__rule">
<label class="form__label form__label--checkbox form__label--medium">
<input type="checkbox" class="input-checkbox input-checkbox--medium">
Felix Felicis
</label>
<label class="form__label form__label--checkbox form__label--medium">
<input type="checkbox" class="input-checkbox input-checkbox--medium">
Polyjuice Potion
</label>
</filters-results>
</div>
</accordion-content>
</accordion>
<hr class="filters-overlay__rule">
<accordion>
<accordion-trigger>
<button type="button" class="accordion-trigger__btn btn">
<span class="accordion-trigger__title">
Ingredients
<tk-icon class="ml-2x"
name="dropdown"
size="xs">
</tk-icon>
</span>
<span class="accordion-trigger__count">3 Selected</span>
</button>
</accordion-trigger>
</accordion>
</div>
<div class="filters-overlay__footer">
<filters-submit class="ml-auto">
<button type="button" class="btn btn--tertiary filters-overlay__clear">Clear</button>
<button type="button" class="ml-3x btn btn--primary">Apply</button>
</filters-submit>
</div>
</filters-overlay>
</div>