.ui-filter-bar { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); min-width: 0; }
.ui-filter-bar__legend { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); }
/* A chip is a control, so it is painted like the controls beside it: the field
   surface and the same edge a button takes. Left transparent it read as the page
   showing through a switched-off box — the complaint behind #505's review. */
.ui-filter-bar__chip {
  display: inline-flex; align-items: center; min-width: 0; margin: 0;
  border: 1px solid var(--control-edge); border-radius: var(--radius-sm); padding: var(--space-1);
  /* The chip holds two focus targets of its own — the trigger and the remove
     button — so it is a painted container, not a control that inherits the gap
     outside it. It joins the shared recomposition in tokens.css beside .ui-seg,
     which is also what hands an inline code chip the page from here. */
  background: var(--surface);
  /* A chip with no value draws no remove mark, so it stops taking its height from the
     mark's line box. The bar names the height; every chip keeps it. */
  min-height: var(--ui-filter-row-h);
}
.ui-filter-bar__chip .ui-dropdown__trigger { border: 0; background: transparent; padding: var(--space-1) var(--space-2); }
/* The chip is the edge the row's other boxes are measured against, so it fades with them:
   off, the chips stayed at full strength and only their ink said so. Two carriers, because
   a bar turned off disables the controls in a nested fieldset and not the fieldset. #518
   why: guidelines/accessibility-floor.md#disabled-control-legibility */
.ui-filter-bar__chip:disabled,
.ui-filter-bar:disabled .ui-filter-bar__chip { border-color: var(--disabled-border); }
.ui-filter-bar__remove { border: 0; background: transparent; /* muted-ink: glyph — filter remove mark */ color: var(--muted); font: inherit; text-align: center; font-size: var(--text-lg); padding: 0; min-width: 24px; min-height: 24px; border-radius: var(--radius-xs); cursor: pointer; }
.ui-filter-bar__remove:focus-visible,
.ui-filter-bar:focus-visible { outline: var(--ring); outline-offset: var(--ring-offset); }
.ui-filter-bar button:disabled { /* muted-ink: state — disabled filters */ color: var(--disabled-ink); cursor: not-allowed; }
.ui-filter-bar .ui-filter-bar__remove:disabled { /* muted-ink: state — unavailable remove mark on the page */ color: var(--disabled-ink-bare); }

.ui-filter-bar .ui-dropdown__value { color: inherit; font-weight: inherit; letter-spacing: normal; }
/* A chip with nothing chosen prints the field's name in the slot the value will
   take — in the page's reading ink, not --muted. --disabled-ink IS --muted, so a
   muted name on an offered filter said "switched off" in the one ink the kit
   reserves for that; the pick keeps the heavier, darker value ink, so a chosen
   chip and an empty one are still told apart. `:enabled` leaves a disabled chip
   its own ink. why: guidelines/labels-and-titles.md, #505 */
.ui-filter-bar button:enabled .ui-dropdown__value.is-placeholder { color: var(--text); font-weight: var(--weight-normal); }

/* Shut, a panel is the trigger's width, never the 240px floor a standalone
   dropdown gets: it is laid out while hidden, so a wider one widened the page
   (#467). why: docs/components.md#a-filter-row-holds-its-panels */
.ui-filter-bar .ui-dropdown__panel { min-width: 100%; max-width: 100%; overflow-wrap: anywhere; }
/* Clear is a quiet text button: no edge in any state, and no fill but the pointer's wash below.
   why: docs/components.md#a-filter-row-holds-its-panels */
[data-filter-clear] button { background: transparent; }
.ui-filter-bar [data-filter-clear] button:disabled,
.ui-filter-bar [data-filter-clear] button[aria-disabled="true"],
.ui-filter-bar [data-filter-clear] button[aria-busy="true"],
.ui-filter-bar [data-filter-clear] button[aria-busy="true"]:hover,
.ui-filter-bar [data-filter-clear] button[aria-busy="true"]:active,
.ui-filter-bar [data-filter-clear] button[aria-busy="true"][data-btn-disabled] { background: transparent; }
/* The ink button-disabled.test.js measures on every ground, since there is no fill. */
.ui-filter-bar [data-filter-clear] button:disabled,
.ui-filter-bar [data-filter-clear] button[aria-disabled="true"] { /* muted-ink: state — the clear action is off and its words sit on the page */ color: var(--disabled-ink-bare); }
.ui-filter-bar [data-filter-clear] button { border-color: transparent; }
.ui-filter-bar [data-filter-clear] button[aria-busy="true"],
.ui-filter-bar [data-filter-clear] button[aria-busy="true"]:hover,
.ui-filter-bar [data-filter-clear] button[aria-busy="true"]:active { border-color: transparent; }
/* The kit's own pointer answer, `.ui-btn:hover`: --accent at 14% and --strong ink, over the page
   ground rather than --surface, which would be a grey block under words. Busy restated after. */
.ui-filter-bar [data-filter-clear] button:enabled:hover { border-color: transparent; background: color-mix(in srgb, var(--accent) 14%, transparent); /* code-bg: inherit — a translucent wash moves the ground, not the chip on it. */ }
.ui-filter-bar [data-filter-clear] button[aria-busy="true"]:hover { background: transparent; }
.ui-filter-bar [data-filter-clear] button:disabled,
.ui-filter-bar [data-filter-clear] button[aria-disabled="true"],
.ui-filter-bar [data-filter-clear] button[aria-busy="true"][data-btn-disabled] { border-color: transparent; }

/* Open, a filter menu anchored at its own trigger takes a floor measured and slid by
   filterPanelFit(); `is-closing` holds that geometry through the fade. A chip's menu
   reaches for the kit's menu floor; the add control's catalogue asks for a panel's
   width instead, because a search field over it reads "Searc" at 240. #549, #496
   why: docs/components.md#a-filter-row-holds-its-panels */
.ui-filter-bar [data-filter-add] .ui-dropdown__panel { --ui-filter-panel-ask: var(--panel-sm); }
.ui-filter-bar__chip .ui-dropdown.open .ui-dropdown__panel,
.ui-filter-bar__chip .ui-dropdown__panel.is-closing,
.ui-filter-bar [data-filter-add] .ui-dropdown.open .ui-dropdown__panel,
.ui-filter-bar [data-filter-add] .ui-dropdown__panel.is-closing {
  min-width: min(var(--ui-filter-panel-floor, 240px), var(--ui-filter-panel-room, 100%));
  max-width: var(--ui-filter-panel-room, 100%);
  margin-inline-start: calc(-1 * var(--ui-filter-panel-shift, 0px));
}
/* An end-aligned panel is pinned by its right edge, so the slide pushes it. */
.ui-filter-bar__chip .ui-dropdown.open .ui-dropdown__panel.is-end,
.ui-filter-bar__chip .ui-dropdown__panel.is-end.is-closing,
.ui-filter-bar [data-filter-add] .ui-dropdown.open .ui-dropdown__panel.is-end,
.ui-filter-bar [data-filter-add] .ui-dropdown__panel.is-end.is-closing {
  margin-inline-start: 0;
  margin-inline-end: calc(-1 * var(--ui-filter-panel-shift, 0px));
}

/* A 16px tick and an 11px gap do not fit the 48px trigger a chip printing `All`
   gives its SHUT panel, and overflow-wrap cannot break a mark; the clip is what
   shrinks the glyph and not just its box.

   Shut is the whole of it. Written for every panel in a chip, this reached the
   open menu too and left 9.8px of the check in a 240px menu — a chevron, not a
   tick. Open the menu is at the floor with room for the mark, and `is-closing`
   holds the open geometry through the fade, so it is open for this as well. #550
   why: docs/components.md#a-filter-row-holds-its-panels */
.ui-filter-bar__chip .ui-dropdown:not(.open) .ui-dropdown__panel:not(.is-closing) .ui-dropdown__tick {
  flex-shrink: 1;
  min-width: 0;
  overflow: hidden;
}

/* The chosen value takes --glow-purple, the wash .ui-nav--tabs.is-pill gives the
   tab you are on, and keeps the kit's 16px check. The wash is a 1.2:1 tint, so the
   check is what identifies the state under WCAG 1.4.1; Apple, Material, Carbon,
   Primer and Radix all tick a chosen menu row. #549
   why: docs/components.md#a-filter-row-holds-its-panels */
.ui-filter-bar .ui-dropdown__item.is-selected { background: var(--glow-purple); /* code-bg: inherit — a translucent wash moves the ground, not the chip on it. */ }
/* Kit-wide a chosen label steps down to --text, which left the row in force the
   faintest in the panel. Under the wash it holds --strong. */
.ui-filter-bar .ui-dropdown__item.is-selected .ui-dropdown__label { color: var(--strong); }
/* Focus sets an opaque --surface, which would take the wash off; restated here so
   the guarantee is one declaration a reader and filter-selected-mark.test.js can
   both find. Focus still reads by its own paint — the kit's band, which #578 made a
   real outline a pixel off the row.
   why: guidelines/accessibility-floor.md#measurable-pairs */
.ui-filter-bar .ui-dropdown__item.is-selected:focus-visible { background: var(--glow-purple); /* code-bg: inherit — a translucent wash moves the ground, not the chip on it. */ }
/* Hover's other paint is a 1px edge, 1.06:1 on the wash, which left the row in force
   the one row a pointer got no answer from. Selection is a background highlight, so
   hover deepens it: 9% more accent, the step .ui-table--zebra gives a hovered row.
   The arrow keys need nothing here: ddSetActive() writes no .is-active without a search
   field and filterBar() builds none, so an arrow key moves real focus instead. #578
   why: docs/components.md#a-filter-row-holds-its-panels */
.ui-filter-bar .ui-dropdown__item.is-selected:hover { background: color-mix(in srgb, var(--glow-purple), var(--accent) 9%); /* code-bg: inherit — a translucent wash moves the ground, not the chip on it. */ }

/* A chip's height — a remove mark's line box, padding and border — named so every chip,
   with or without a mark, and a control on a line of its own stand as tall. */
.ui-filter-bar { --ui-filter-row-h: calc(2px + 2 * var(--space-1) + var(--leading-normal) * var(--text-lg)); }

/* A chip's neighbour takes the chip's corner, that height and edge, but not its painted fill:
   the trigger's own edge can differ from the row's, while its --surface made the
   row's least consequential action its loudest box — and off, with its edge down, the one thing
   still looking pressable. The states are
   spelled out because this depth outranks the base rules; the fill needs one rule, because the
   kit paints it at rest only. Under a pointer it takes the kit's trigger edge, --accent, which
   steps aside under the band; held at its resting edge, hover and rest were one paint. #496, #518
   why: guidelines/colour-and-theming.md#keep-text-off-grey-fills */
.ui-filter-bar [data-filter-add] { display: flex; align-self: stretch; }
.ui-filter-bar [data-filter-add] .ui-dropdown { display: flex; }
.ui-filter-bar [data-filter-add] .ui-dropdown__trigger { border-radius: var(--radius-sm); min-height: var(--ui-filter-row-h); border-color: var(--control-edge); background: transparent; }
.ui-filter-bar [data-filter-add] .ui-dropdown__trigger svg { width: 16px; height: 16px; flex: none; stroke-width: 2.4; }
.ui-filter-bar [data-filter-add] .ui-dropdown__trigger:enabled:hover:not(:focus-visible) { border-color: var(--accent); }
.ui-filter-bar [data-filter-add] .ui-dropdown__trigger:disabled { border-color: var(--disabled-border); }
.ui-filter-bar [data-filter-add] .ui-dropdown__trigger[aria-disabled="true"],
.ui-filter-bar [data-filter-add] .ui-dropdown__trigger[aria-disabled="true"]:hover:not(:focus-visible) { border-color: var(--disabled-border); }