Filtr qatori

1. root.fx-filterbarşart
2. main.fx-filterbar__mainixtiyoriy
3. search.fx-filterbar__searchixtiyoriy
4. facets.fx-filterbar__facetsixtiyoriy
5. end.fx-filterbar__endixtiyoriy
6. trigger.fx-filterbar__triggerixtiyoriy
7. count.fx-filterbar__countixtiyoriy
8. tags.fx-filterbar__tagsixtiyoriy
9. tags-label.fx-filterbar__tags-labelixtiyoriy
10. clear.fx-filterbar__clearixtiyoriy
11. group.fx-filterbar__groupixtiyoriy
12. join.fx-filterbar__joinixtiyoriy
13. rule.fx-filterbar__ruleixtiyoriy
14. remove.fx-filterbar__removeixtiyoriy
15. add.fx-filterbar__addixtiyoriy
16. summary.fx-filterbar__summaryixtiyoriy

Qator role="search" + aria-label; teglar guruhi aria-label «Faol filtrlar»; × tugmasida «Olib taşlaş: <nom>»; olib taşlangaç fokus qöşni tegga yoki qidiruvga qaytadi. Faset chip aria-pressed.

npx foxui add filterbar

<div class="fx-filterbar" data-fx-filterbar>
  <div class="fx-filterbar__main" role="search" aria-label="Arizalarni filtrlaş">
    <div class="fx-filterbar__search"><label class="fx-search" data-size="sm"><svg viewBox="0 0 20 20" aria-hidden="true"><circle cx="9" cy="9" r="5.5" fill="none" stroke="currentColor" stroke-width="1.5"/><path d="m13.5 13.5 3.5 3.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg><input class="fx-search__input" type="search" placeholder="Ism, telefon yoki raqam" aria-label="Qidiriş"></label></div>
    <div class="fx-filterbar__facets">
      <button class="fx-chip" type="button" aria-pressed="false">Mening arizalarim</button>
      <button class="fx-chip" type="button" aria-pressed="true">Muddati ötgan <span class="fx-chip__count">12</span></button>
    </div>
    <div class="fx-filterbar__end">
      <button class="fx-btn fx-filterbar__trigger" data-size="sm" type="button" commandfor="fb-sheet" command="show-modal"><svg viewBox="0 0 20 20" aria-hidden="true"><path d="M3 5h14M6 10h8M8.5 15h3" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>Filtrlar <span class="fx-filterbar__count" data-filter-count>2</span></button>
    </div>
  </div>
  <div class="fx-filterbar__tags" aria-label="Faol filtrlar">
    <span class="fx-filterbar__tags-label">Faol:</span>
    <span class="fx-chip" data-type="tag" data-value="holat:yangi">Holat: Yangi <button class="fx-chip__remove" type="button" aria-label="Olib taşlaş: Holat Yangi">×</button></span>
    <span class="fx-chip" data-type="tag" data-value="shahar:samarqand">Şahar: Samarqand <button class="fx-chip__remove" type="button" aria-label="Olib taşlaş: Şahar Samarqand">×</button></span>
    <button class="fx-filterbar__clear" type="button" data-clear-all>Hammasini tozalaş</button>
  </div>
</div>
<dialog class="fx-sheet" id="fb-sheet" aria-labelledby="fb-sheet-t"><div class="fx-sheet__head"><h2 class="fx-sheet__title" id="fb-sheet-t">Filtrlar</h2><form method="dialog"><button class="fx-btn" data-variant="ghost" data-shape="icon" aria-label="Yopiş">×</button></form></div><div class="fx-sheet__body"><p>Holat, şahar, summa oraliği.</p></div></dialog>
<!-- Soʻrov quruvchi (4.168) -->
<div class="fx-filterbar" data-builder data-fx-filterbar>
  <div class="fx-filterbar__group" role="group" aria-label="Şartlar">
    <div class="fx-filterbar__join" role="radiogroup" aria-label="Şartlarni boğlaş"><button type="button" role="radio" aria-checked="true" data-op="and">VA</button><button type="button" role="radio" aria-checked="false" data-op="or">YOKI</button></div>
    <div class="fx-filterbar__rule">
      <select class="fx-select" data-size="sm" aria-label="Maydon"><option value="bosqich" selected>Bosqiç</option><option value="summa">Summa</option><option value="shahar">Şahar</option><option value="masul">Mas'ul</option></select>
      <select class="fx-select" data-size="sm" aria-label="Operator"><option value="eq" selected>teng</option><option value="neq">teng emas</option><option value="gt">katta</option><option value="lt">kiçik</option><option value="has">öz içiga oladi</option></select>
      <input class="fx-input" data-size="sm" aria-label="Qiymat" value="Muzokara">
      <button class="fx-filterbar__remove" type="button" aria-label="Şartni öçiriş">×</button>
    </div>
    <div class="fx-filterbar__rule">
      <select class="fx-select" data-size="sm" aria-label="Maydon"><option value="bosqich">Bosqiç</option><option value="summa" selected>Summa</option><option value="shahar">Şahar</option><option value="masul">Mas'ul</option></select>
      <select class="fx-select" data-size="sm" aria-label="Operator"><option value="eq">teng</option><option value="neq">teng emas</option><option value="gt" selected>katta</option><option value="lt">kiçik</option><option value="has">öz içiga oladi</option></select>
      <input class="fx-input" data-size="sm" aria-label="Qiymat" value="5 000 000">
      <button class="fx-filterbar__remove" type="button" aria-label="Şartni öçiriş">×</button>
    </div>
    <div class="fx-filterbar__add"><button class="fx-btn" data-variant="ghost" data-size="sm" type="button" data-add="rule">+ Şart</button><button class="fx-btn" data-variant="ghost" data-size="sm" type="button" data-add="group">+ Guruh</button></div>
  </div>
  <output class="fx-filterbar__summary" aria-live="polite"></output>
</div>

Tokenlar: --fx-bg-brand-solid --fx-bg-muted --fx-bg-pressed --fx-bg-subtle --fx-bg-surface --fx-border-color-default --fx-border-color-focus --fx-border-color-strong --fx-border-width-default --fx-border-width-focus --fx-control-h-sm --fx-font-adjust-mono --fx-font-family-mono --fx-font-size-lg --fx-font-size-sm --fx-font-size-xs --fx-font-weight-semibold --fx-popover-width --fx-radius-badge --fx-radius-circle --fx-radius-control --fx-radius-surface --fx-shadow-sm --fx-size-icon-md --fx-space-1 --fx-space-2 --fx-space-3 --fx-space-6 --fx-text-error --fx-text-on-brand --fx-text-primary --fx-text-secondary --fx-text-tertiary