フィルタバー

hc-filterbar はいま一覧が何で絞り込まれているかを示し、その場で変更させます。各チップは自分の条件のエディタを開き、隣のコントロールはその条件を外します。

hc-chip の対話版に当たる兄弟で、hc-chip の方は装飾用のままです。分けているのは意図的で、どのピルがレコードについての事実で、どれがクエリを操作するコントロールなのかを一目で区別できるようにするためです。

別名: 適用中フィルター表示、絞り込み条件バー。

基本の HTML

<div class="hc-filterbar">
  <ul class="hc-filterbar__list">
    <li class="hc-filterbar__item">
      <!-- The chip is the trigger for this condition's editor -->
      <button class="hc-filterbar__chip" type="button" popovertarget="edit-buyer">
        <span class="hc-filterbar__label">Buyer code</span>
        <span class="hc-filterbar__op">is</span>
        <span class="hc-filterbar__value">3 values</span>
      </button>
      <!-- …and remove is a real link to the URL without it -->
      <a class="hc-filterbar__remove"
         href="/orders?f-ship-from=2026-08-01"
         aria-label="Remove Buyer code filter">×</a>
    </li>
    <!-- …more conditions… -->
  </ul>
  <a class="hc-filterbar__clear" href="/orders">Clear all</a>
</div>

<!-- The editor the chip's popovertarget points at -->
<div class="hc-popover" popover id="edit-buyer">
  <p>The editor for this one condition.</p>
</div>

パーツ

パーツ	用途
`.hc-filterbar`	行のラッパー。条件が 0 件のとき畳まれます。
`.hc-filterbar__list`	スクロールする `<ul>` — 「リスト、N 項目」と読み上げられます。
`.hc-filterbar__item`	1 条件。チップと、必要なら削除コントロール。
`.hc-filterbar__chip`	その条件のエディタを開く `<button>`。
`.hc-filterbar__label`	項目名。
`.hc-filterbar__op`	演算子。意図的に控えめ。
`.hc-filterbar__value`	値。`--hc-filterbar-value-max` を超えると省略されます。
`.hc-filterbar__remove`	この条件を除いた同じ URL へのリンク。
`.hc-filterbar__clear`	絞り込みなしの URL へのリンク。末尾側に固定されます。

1 行で、スクロールする

条件は横に積み上がります。折り返すバーはデータを下へ押しやり、条件を足すたび外すたびに再配置するので、読んでいる最中に一覧が動きます。ここではチップは縮まず、代わりにバーがスクロールします。そして 「すべて解除」は固定です。解除したい対象の末尾まで先にスクロールしないと解除できない、というのはおかしいからです。

表示テキストはサーバーのもの

項目のラベル、使われた演算子、条件が値をいくつ持つか — 知っているのはサーバーだけです。したがってチップの 3 パーツはサーバーが描画し、複数値の条件は要約として届きます。

<span class="hc-filterbar__value">3 values</span>

チップを 3 つ並べることも、貼り付けられた 200 件のコードをチップに詰め込むこともしません。全件はチップが開くエディタの中にあります。

削除はナビゲーション

__remove と __clear はボタンではなく <a href> です。条件を外すことは別の URL なので、JavaScript なしでも動き、共有でき、戻るで条件が戻ります。data-hx-get を足せばその場で結果を差し替えられます — href は no-JS 経路として残ります。

画面が強制している条件（たとえば「担当者は自分」）は、削除コントロールを描画しなければよく、チップは両端が丸いままになります。

アクセシビリティ

バーは実際のリストなので、件数が読み上げられます。
削除コントロールは必ず条件を名指しします（「Remove Buyer code filter」）。素の × にはしません。
各チップは <button popovertarget> なので、キーボードでエディタが開き、Escape で閉じます — ブラウザ標準のポップオーバー挙動です。
省略は見た目だけで、エディタには全文が入っています。

テーマ用トークン

トークンパス	用途
`filterbar.bg` / `-fg` / `-border`	チップの面。
`filterbar.hover-bg`	チップと削除のホバー。
`filterbar.op-fg`	控えめな部分 — 演算子、削除、すべて解除。
`filterbar.radius` / `-padding-x` / `-padding-y` / `-gap`	形と間隔。
`filterbar.font-size`	チップの文字サイズ。
`filterbar.value-max`	長い値を省略する位置。

CSS 変数

生成される CSS 変数を表示

--hc-filterbar-bg | -fg | -border | -hover-bg | -op-fg
--hc-filterbar-radius | -padding-x | -padding-y | -gap
--hc-filterbar-font-size | -value-max