FilterBar

---
import { Button, Field, FilterBar, Label, NativeSelect, SearchField } from '@santi020k/lumen-astro'
---

<FilterBar label="Filters" resultLabel="12 matching records">
  <Field><Label for="filter-search">Search</Label><SearchField id="filter-search" placeholder="Search records" /></Field>
  <Field><Label for="filter-status">Status</Label><NativeSelect id="filter-status"><option>Active</option><option>All</option></NativeSelect></Field>
  <Button slot="active" variant="outline" size="sm" aria-label="Remove status: Active">Status: Active ×</Button>
  <Button slot="actions" variant="ghost" size="sm">Reset filters</Button>
</FilterBar>

import { Button, Field, FilterBar, Label, NativeSelect, SearchField } from '@santi020k/lumen-react'

export const Example = () => (
  <>
    <FilterBar label="Filters" resultLabel="12 matching records">
      <Field><Label htmlFor="filter-search">Search</Label><SearchField id="filter-search" placeholder="Search records" /></Field>
      <Field><Label htmlFor="filter-status">Status</Label><NativeSelect id="filter-status"><option>Active</option><option>All</option></NativeSelect></Field>
      <Button slot="active" variant="outline" size="sm" aria-label="Remove status: Active">Status: Active ×</Button>
      <Button slot="actions" variant="ghost" size="sm">Reset filters</Button>
    </FilterBar>
  </>
)

<script type="module">
  import { defineLumenElements } from '@santi020k/lumen-elements/define'

  defineLumenElements()
</script>
<lumen-filter-bar aria-label="Filters">
  <details open>
    <summary>Filters</summary>
    <div class="ui-filter-bar__controls">
      <lumen-search-field aria-label="Search records"></lumen-search-field>
    </div>
  </details>
  <div class="ui-filter-bar__active">
    <lumen-button aria-label="Remove status: Active">Status: Active ×</lumen-button>
  </div>
  <p role="status" aria-live="polite" aria-atomic="true">12 matching records</p>
</lumen-filter-bar>