@slotted/styles 0.0.0-stage → 0.1.0-beta.0

package/src/filter-bar/filter-bar.css

@@ -0,0 +1,1306 @@
+@layer slotted.components {
+  /**
+   * A bar above a listing that edits one value: a tree of conditions over the
+   * listing's fields, whose leaves are the descriptor `table` edits in a
+   * column header. The bar draws the tree's first level — a search field, a
+   * pill per pinned field still waiting for a condition, a chip per condition
+   * — and opens a drawer on the whole tree.
+   *
+   * Two tab stops however many fields a product declares: the search, and the
+   * toolbar that holds everything else. The root is a `search` landmark and
+   * not a toolbar, because the search field needs the arrow keys a toolbar
+   * takes.
+   *
+   * Every control reads the control scale — height, inline padding, glyph,
+   * gap — so a theme that retunes a text field retunes this bar with it, and
+   * the three densities move every control together.
+   */
+  [data-ui='filter-bar'] {
+    --_gap: var(--slotted-filter-bar-gap, var(--slotted-control-gap-md, 8px));
+    --_gap-sm: var(--slotted-control-gap-sm, 6px);
+    --_height: var(--slotted-control-height-md, 34px);
+    --_font-size: var(--slotted-control-font-size-md, 13px);
+    --_pad: var(--slotted-control-padding-inline-md, 13px);
+    /* A chip segment sits between two others, so it takes the smaller inset of the scale. */
+    --_seg-pad: var(--slotted-control-padding-inline-sm, 10px);
+    --_icon: var(--slotted-control-icon-size-md, 16px);
+    --_radius: var(--slotted-filter-bar-pill-radius, var(--slotted-radius-full, 9999px));
+    --_control-radius: var(--slotted-control-radius, var(--slotted-radius-sm, 4px));
+    --_border-width: var(--slotted-control-border-width, 1px);
+    --_ink: var(--slotted-filter-bar-color, var(--slotted-text, CanvasText));
+    --_muted: var(--slotted-filter-bar-color-muted, var(--slotted-text-muted, GrayText));
+    --_edge: var(
+      --slotted-filter-bar-pill-border,
+      var(--slotted-control-border-color, ButtonBorder)
+    );
+    /* The line between two segments of a chip: the chip's own edge carries the outline, the seam only divides. */
+    --_seam: var(--slotted-filter-bar-chip-seam, var(--slotted-border-subtle, ButtonBorder));
+    --_surface: var(--slotted-filter-bar-surface, var(--slotted-surface, Canvas));
+    --_hover: var(--slotted-tone-secondary-subtle-hover, ButtonFace);
+    --_active: var(--slotted-tone-secondary-subtle-active, ButtonFace);
+    --_invalid: var(--slotted-tone-danger-border, GrayText);
+    /* Width as well as colour (WCAG 1.4.1): in `high-contrast` the danger edge is the resting edge's black, so every invalid box adds the edge `text-field` draws, inside its border, where nothing moves. */
+    --_invalid-edge-width: var(--slotted-control-invalid-edge-width, 1px);
+    --_invalid-edge: inset 0 0 0 var(--_invalid-edge-width) var(--_invalid);
+    --_duration: var(--slotted-control-transition-duration, var(--slotted-duration-short));
+    --_easing: var(--slotted-control-transition-easing, var(--slotted-easing-standard));
+
+    box-sizing: border-box;
+    color: var(--_ink);
+    font-family: var(--slotted-filter-bar-font-family, var(--slotted-font-family-sans, inherit));
+    font-size: var(--_font-size);
+    line-height: var(--slotted-line-height-md, 1.5);
+    min-inline-size: 0;
+  }
+
+  /**
+   * The builder is a part that leaves the root: it renders inside a drawer,
+   * which `portal` moves to the end of the document, so it carries `data-ui`
+   * of its own and the block above gives it the same locals. The value
+   * popover a chip opens does the same.
+   *
+   * The root is the query container and the frame is the grid, because a
+   * container query cannot restyle the element it measures — the split
+   * `stepper` and `description-list` already carry, recorded in the briefing.
+   *
+   * A bar spans the listing it filters, so its inline size is its parent's:
+   * inline-size containment gives a container no intrinsic width, and a
+   * start-justified grid or flex parent measured the root at zero pixels and
+   * drew every pill and chip outside it.
+   */
+  [data-ui='filter-bar'][data-part='root'] {
+    container-name: slotted-filter-bar;
+    container-type: inline-size;
+    display: block;
+    inline-size: 100%;
+  }
+
+  /**
+   * The editor a pill or a chip's value opens: one rule alone in a popover,
+   * so it carries the family's `data-ui` like the builder does. A column — the
+   * operator when a pill opened it, the operand or the pair, then Clear and
+   * Done at the end — at a width of its own, because a popover shrink-wraps
+   * and a select shrink-wrapped to its value is a control that changes width
+   * when the value does.
+   */
+  [data-ui='filter-bar'][data-part='rule'] {
+    display: grid;
+    gap: var(--_gap);
+    inline-size: var(--slotted-filter-bar-editor-size, 18rem);
+    max-inline-size: 100%;
+  }
+
+  /*
+   * The operator and the operand are reached as descendants and not as
+   * children: a binding may render the condition inside one element of its
+   * own at `display: contents`, which leaves the two parts as grid items of
+   * the rule and out of reach of a child combinator.
+   */
+  [data-ui='filter-bar'][data-part='rule'] [data-part='operand'] {
+    display: grid;
+    gap: var(--_gap-sm);
+    min-inline-size: 0;
+  }
+
+  [data-ui='filter-bar'][data-part='rule'][data-kind='boolean'] [data-part='operand']:empty {
+    display: none;
+  }
+
+  [data-ui='filter-bar'][data-part='rule'] > [data-part='actions'] {
+    align-items: center;
+    display: flex;
+    gap: var(--_gap-sm);
+    justify-content: flex-end;
+  }
+
+  /* ── Composition ──────────────────────────────────────────────────────
+   *
+   * Two lines at every width from 36rem: the search, the consumer's controls
+   * and the count, then the toolbar, which wraps. The toolbar holds the chips,
+   * so it grows with the filter and has a line of its own to grow in; a
+   * composition that put it beside the search at a wide width had to measure
+   * when it wrapped, and fell back to this one whenever it did.
+   *
+   * Under 36rem: the search alone, then one control that says how many
+   * conditions are applied beside the consumer's controls, then the count.
+   * The pills and chips fold behind that control, which opens the builder. The
+   * line sits at 36rem and not at 40rem because a reference page's stage is
+   * 39rem wide: at 40rem every demonstration on the page showed the fold and
+   * none showed a chip.
+   *
+   * Every member of the first line starts at its top and is a control tall,
+   * so the count centres its text against the search whatever wraps.
+   */
+  [data-ui='filter-bar'] > [data-part='frame'] {
+    align-items: start;
+    column-gap: var(--_gap);
+    display: grid;
+    grid-template-areas:
+      'search end count'
+      'bar bar bar';
+    grid-template-columns: minmax(0, 1fr) auto auto;
+    row-gap: var(--_gap);
+  }
+
+  [data-ui='filter-bar'] > [data-part='frame'] > [data-part='search'] {
+    grid-area: search;
+    max-inline-size: var(--slotted-filter-bar-search-max, 28rem);
+    min-inline-size: 0;
+  }
+
+  [data-ui='filter-bar'] > [data-part='frame'] > [data-part='bar'] {
+    grid-area: bar;
+  }
+
+  [data-ui='filter-bar'] > [data-part='frame'] > [data-part='end'] {
+    grid-area: end;
+  }
+
+  [data-ui='filter-bar'] > [data-part='frame'] > [data-part='count'] {
+    grid-area: count;
+    justify-self: end;
+  }
+
+  /** A member that is absent collapses: the grid's gap is what would remain, and it is taken away. */
+  [data-ui='filter-bar'] > [data-part='frame'] > [data-part='end']:empty {
+    display: none;
+  }
+
+  [data-ui='filter-bar'][data-size='sm'] {
+    --_height: var(--slotted-control-height-sm, 30px);
+    --_font-size: var(--slotted-control-font-size-sm, 12px);
+    --_pad: var(--slotted-control-padding-inline-sm, 10px);
+    --_seg-pad: var(--slotted-control-gap-md, 8px);
+    --_icon: var(--slotted-control-icon-size-sm, 14px);
+    --_gap: var(--slotted-filter-bar-gap, var(--slotted-control-gap-sm, 6px));
+    --_gap-sm: var(--slotted-control-gap-sm, 4px);
+  }
+
+  [data-ui='filter-bar'][data-size='lg'] {
+    --_height: var(--slotted-control-height-lg, 38px);
+    --_font-size: var(--slotted-control-font-size-lg, 14px);
+    --_pad: var(--slotted-control-padding-inline-lg, 16px);
+    --_seg-pad: var(--slotted-control-padding-inline-md, 13px);
+    --_icon: var(--slotted-control-icon-size-lg, 18px);
+    --_gap: var(--slotted-filter-bar-gap, var(--slotted-control-gap-lg, 8px));
+  }
+
+  /**
+   * The search, the preset, a rule's field and operator are other families'
+   * roots — `text-field` and `select` select their own root part — so each
+   * one sits inside a part of this family's and fills it. The magnifier before
+   * the query is an `icon` in the field's start adornment, which the field
+   * sizes as it sizes every adornment.
+   */
+  [data-ui='filter-bar'] [data-part='search'] > [data-ui='text-field'],
+  [data-ui='filter-bar'] [data-part='preset'] > [data-ui='select'],
+  [data-ui='filter-bar'] :is([data-part='field'], [data-part='operator']) > [data-ui='select'] {
+    inline-size: 100%;
+  }
+
+  /**
+   * One toolbar, which wraps: the arrows walk its controls in order from line
+   * to line, which the toolbar pattern allows for a toolbar of several rows.
+   * The row gap is the column gap, so two lines of chips read as one set.
+   */
+  [data-ui='filter-bar'] [data-part='bar'] {
+    align-items: center;
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--_gap);
+    min-inline-size: 0;
+  }
+
+  [data-ui='filter-bar'] [data-part='end'] {
+    align-items: center;
+    display: flex;
+    gap: var(--_gap);
+  }
+
+  /** The count is the answer to the filters, and it takes the far end of its line — PatternFly's rule for an item count. */
+  [data-ui='filter-bar'] > [data-part='frame'] > [data-part='count'] {
+    color: var(--_muted);
+    font-variant-numeric: tabular-nums;
+    margin: 0;
+    /* A line of its own type whatever it holds: before the first answer it holds only the
+       spinner, shorter than the text that replaces it, and the rows under the bar moved. */
+    min-block-size: 1lh;
+    /* The line in the middle of a control's height, which is the line it shares with the
+       search: the frame starts every member at the top of its line. */
+    padding-block: max(0px, calc((var(--_height) - 1lh) / 2));
+    white-space: nowrap;
+  }
+
+  /* ── The pill ───────────────────────────────────────────────────────────
+   *
+   * A pinned field with no condition: a place in the bar waiting to be
+   * filled. Its edge is dashed — the edge `upload` gives a file not yet sent,
+   * which already means *waiting for something* in this library — and it has
+   * no ground and no lift, so it reads as a slot rather than as a control
+   * that holds something. The plus before the name says what pressing it
+   * does. Given a condition, the same place in the bar becomes a chip.
+   */
+  [data-ui='filter-bar'] [data-part='pill'] {
+    align-items: center;
+    appearance: none;
+    background-color: transparent;
+    block-size: var(--_height);
+    border: var(--_border-width) dashed var(--_edge);
+    border-radius: var(--_radius);
+    box-sizing: border-box;
+    color: var(--_muted);
+    cursor: pointer;
+    display: inline-flex;
+    font: inherit;
+    font-weight: var(--slotted-font-weight-medium, 500);
+    gap: var(--_gap-sm);
+    line-height: var(--slotted-control-line-height, 1);
+    margin: 0;
+    /* The plus carries its own air, so the start inset is one step short. */
+    padding-block: 0;
+    padding-inline: calc(var(--_pad) - var(--_gap-sm)) var(--_pad);
+    transition:
+      background-color var(--_duration) var(--_easing),
+      border-color var(--_duration) var(--_easing),
+      color var(--_duration) var(--_easing),
+      opacity var(--slotted-duration-medium) var(--slotted-easing-enter),
+      translate var(--slotted-duration-medium) var(--slotted-easing-enter);
+    white-space: nowrap;
+  }
+
+  [data-ui='filter-bar'] [data-part='pill'] > span:not([data-ui='icon']) {
+    min-inline-size: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    unicode-bidi: isolate;
+  }
+
+  [data-ui='filter-bar'] [data-part='pill'] > [data-ui='icon'] {
+    --slotted-icon-size: var(--_icon);
+  }
+
+  [data-ui='filter-bar'] [data-part='pill'][data-invalid] {
+    border-color: var(--_invalid);
+    box-shadow: var(--_invalid-edge);
+  }
+
+  [data-ui='filter-bar'] [data-part='pill']:enabled:hover {
+    background-color: var(--_hover);
+    border-color: var(--slotted-border-strong, ButtonBorder);
+    color: var(--_ink);
+  }
+
+  [data-ui='filter-bar'] [data-part='pill']:enabled:active,
+  [data-ui='filter-bar'] [data-part='pill']:enabled[aria-expanded='true'] {
+    background-color: var(--_active);
+    border-color: var(--slotted-border-strong, ButtonBorder);
+    color: var(--_ink);
+  }
+
+  [data-ui='filter-bar'] [data-part='pill']:focus-visible {
+    outline: var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);
+    outline-offset: var(--slotted-focus-ring-offset, 2px);
+  }
+
+  /* ── The chip ───────────────────────────────────────────────────────────
+   *
+   * One condition, written as the sentence it is: the field, the operator,
+   * the value, the remove control, each a segment of one capsule divided by a
+   * seam. Each segment answers one question — the operator opens a menu of
+   * operators, the value a popover with the operand — so changing how two
+   * values compare no longer reopens the values.
+   *
+   * The field is read and never pressed: a condition keeps its field for its
+   * life. It carries the weight, the operator reads quieter as the connective
+   * between two things, and the value is back at the weight of the field.
+   *
+   * The capsule owns the edge, the ground and the lift, and the segments own
+   * hover and press. The first and last segments take the capsule's corners,
+   * so a hover ground and a focus ring follow its curve rather than being
+   * clipped by it.
+   */
+  [data-ui='filter-bar'] [data-part='chip'] {
+    align-items: stretch;
+    background-color: var(--_surface);
+    block-size: var(--_height);
+    border: var(--_border-width) solid var(--_edge);
+    border-radius: var(--_radius);
+    box-shadow: var(--slotted-control-shadow, none);
+    box-sizing: border-box;
+    display: inline-flex;
+    max-inline-size: 100%;
+    min-inline-size: 0;
+    transition:
+      border-color var(--_duration) var(--_easing),
+      opacity var(--slotted-duration-medium) var(--slotted-easing-enter),
+      translate var(--slotted-duration-medium) var(--slotted-easing-enter);
+  }
+
+  /**
+   * A chip or a pill arrives: it fades in from a step above its place — the
+   * arrival `upload` gives a file — so a condition added from the menu is seen
+   * landing in the bar. It does not scale: a box of text that scales redraws
+   * its letters at every frame. It
+   * starts from the style below only on the frame it is first rendered — a
+   * chip whose value changes does not arrive again. A chip that leaves does
+   * not animate: focus moves to its neighbour in the same gesture, and a chip
+   * held for an exit would be a stop of the arrows that no longer exists.
+   */
+  @starting-style {
+    [data-ui='filter-bar'] :is([data-part='chip'], [data-part='pill']) {
+      opacity: 0;
+      translate: 0 calc(-1 * var(--slotted-space-2, 0.25rem));
+    }
+  }
+
+  [data-ui='filter-bar'] [data-part='chip'] > * {
+    align-items: center;
+    background-color: transparent;
+    border: 0;
+    box-sizing: border-box;
+    color: inherit;
+    display: inline-flex;
+    flex: none;
+    font: inherit;
+    gap: var(--_gap-sm);
+    line-height: var(--slotted-control-line-height, 1);
+    margin: 0;
+    min-inline-size: 0;
+    padding-block: 0;
+    padding-inline: var(--_seg-pad);
+    white-space: nowrap;
+  }
+
+  [data-ui='filter-bar'] [data-part='chip'] > * + * {
+    border-inline-start: var(--_border-width) solid var(--_seam);
+  }
+
+  [data-ui='filter-bar'] [data-part='chip'] > :first-child {
+    border-end-start-radius: var(--_radius);
+    border-start-start-radius: var(--_radius);
+    /* The capsule's curve takes air from the first letter, so the start inset is the control's, not the segment's. */
+    padding-inline-start: var(--_pad);
+  }
+
+  [data-ui='filter-bar'] [data-part='chip'] > :last-child {
+    border-end-end-radius: var(--_radius);
+    border-start-end-radius: var(--_radius);
+  }
+
+  [data-ui='filter-bar'] [data-part='chip'] [data-ui='icon'] {
+    --slotted-icon-size: var(--_icon);
+  }
+
+  [data-ui='filter-bar'] [data-part='chip-field'] {
+    font-weight: var(--slotted-font-weight-medium, 500);
+  }
+
+  [data-ui='filter-bar'] [data-part='chip-field'] > [data-ui='icon'] {
+    color: var(--_muted);
+  }
+
+  /** The field's name, the operator and the value are isolated runs, so a right-to-left name beside an ISO date reorders nothing. */
+  [data-ui='filter-bar'] [data-part='chip'] > * > span:not([data-ui]),
+  [data-ui='filter-bar'] [data-part='chip-operator'] {
+    unicode-bidi: isolate;
+  }
+
+  [data-ui='filter-bar'] [data-part='chip-operator'] {
+    color: var(--_muted);
+    font-weight: var(--slotted-font-weight-regular, 400);
+  }
+
+  [data-ui='filter-bar'] [data-part='chip-value'] {
+    font-weight: var(--slotted-font-weight-medium, 500);
+    min-inline-size: 0;
+  }
+
+  /* The value truncates and the whole list stays in the segment's name and title. */
+  [data-ui='filter-bar'] [data-part='chip-value'] > [data-value] {
+    max-inline-size: var(--slotted-filter-bar-value-max, 12rem);
+    min-inline-size: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  /**
+   * The operator's words inside the value segment are drawn only where the
+   * operator segment is not — under the narrow breakpoint, below.
+   */
+  [data-ui='filter-bar'] [data-part='chip-value'] > [data-operator] {
+    color: var(--_muted);
+    display: none;
+    font-weight: var(--slotted-font-weight-regular, 400);
+  }
+
+  /** The remove control is square in the capsule's height, and its glyph reads quiet until it is aimed at. */
+  [data-ui='filter-bar'] [data-part='chip-remove'] {
+    aspect-ratio: 1;
+    color: var(--_muted);
+    justify-content: center;
+    padding-inline: 0;
+  }
+
+  [data-ui='filter-bar'] [data-part='chip'] > :is(button, [role='button']) {
+    cursor: pointer;
+    transition:
+      background-color var(--_duration) var(--_easing),
+      color var(--_duration) var(--_easing);
+  }
+
+  /*
+   * Hover and press are the segment's own. Press is a step past hover, and an
+   * open segment holds the press ground while its surface is up, so the
+   * reader sees which segment the menu or the popover belongs to.
+   */
+  [data-ui='filter-bar']
+    [data-part='chip']
+    > :is(button, [role='button']):enabled:not([aria-disabled='true']):hover {
+    background-color: var(--_hover);
+    color: var(--_ink);
+  }
+
+  [data-ui='filter-bar']
+    [data-part='chip']
+    > :is(button, [role='button']):enabled:not([aria-disabled='true']):active,
+  [data-ui='filter-bar'] [data-part='chip'] > :is(button, [role='button'])[aria-expanded='true'] {
+    background-color: var(--_active);
+    color: var(--_ink);
+  }
+
+  /*
+   * A segment's ring is drawn inward: an outward ring would lie across the
+   * neighbouring segments, and inward it stays inside the capsule and follows
+   * its curve on the end segments — the rule every inner control follows.
+   */
+  [data-ui='filter-bar'] [data-part='chip'] > :focus-visible {
+    outline: var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);
+    outline-offset: calc(var(--slotted-focus-ring-width, 2px) * -1);
+  }
+
+  /**
+   * A condition still waiting for its value: the dashed edge of a pill, which
+   * says the same thing, and the value segment writes the prompt in the
+   * muted ink. The condition is not applied until the value is there.
+   */
+  [data-ui='filter-bar'] [data-part='chip'][data-incomplete] {
+    border-style: dashed;
+    box-shadow: none;
+  }
+
+  [data-ui='filter-bar'] [data-part='chip'][data-incomplete] > [data-part='chip-value'] {
+    color: var(--_muted);
+    font-weight: var(--slotted-font-weight-regular, 400);
+  }
+
+  [data-ui='filter-bar'] [data-part='chip'][data-invalid] {
+    border-color: var(--_invalid);
+    box-shadow: var(--_invalid-edge);
+  }
+
+  /** The field's glyph and name turn to the danger ink with the edge, so the fault is read on the segment it is about. */
+  [data-ui='filter-bar'] [data-part='chip'][data-invalid] > [data-part='chip-field'],
+  [data-ui='filter-bar']
+    [data-part='chip'][data-invalid]
+    > [data-part='chip-field']
+    > [data-ui='icon'] {
+    color: var(--slotted-tone-danger-text, CanvasText);
+  }
+
+  [data-ui='filter-bar'] [data-part='chip'][data-folded] {
+    display: none;
+    visibility: hidden;
+  }
+
+  [data-ui='filter-bar'] [data-part='bar'][data-revealed] [data-part='chip'][data-folded] {
+    display: inline-flex;
+    visibility: visible;
+  }
+
+  /* ── More ───────────────────────────────────────────────────────────── */
+
+  [data-ui='filter-bar'] [data-part='more'] {
+    align-items: center;
+    appearance: none;
+    background: none;
+    block-size: var(--_height);
+    border: 0;
+    border-radius: var(--_radius);
+    color: var(--_muted);
+    cursor: pointer;
+    display: inline-flex;
+    font: inherit;
+    font-weight: var(--slotted-font-weight-medium, 500);
+    justify-content: center;
+    margin: 0;
+    padding-inline: var(--_seg-pad);
+    transition:
+      background-color var(--_duration) var(--_easing),
+      color var(--_duration) var(--_easing);
+    white-space: nowrap;
+  }
+
+  [data-ui='filter-bar'] [data-part='more']:enabled:hover {
+    background-color: var(--_hover);
+    color: var(--_ink);
+  }
+
+  [data-ui='filter-bar'] [data-part='more']:enabled:active {
+    background-color: var(--_active);
+    color: var(--_ink);
+  }
+
+  [data-ui='filter-bar'] [data-part='more']:focus-visible {
+    outline: var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);
+    outline-offset: var(--slotted-focus-ring-offset, 2px);
+  }
+
+  /* ── Add and Clear ──────────────────────────────────────────────────────
+   *
+   * Both are `button`s worn with this family's part name. Add draws its glyph
+   * alone once a chip is in the bar, as a circle in the chips' height, so the
+   * line of capsules ends in a control of their own shape; it keeps its label
+   * as its name and its title. Clear and Reset read at the chips' weight: the
+   * conditions are what the bar is about, and a control that empties them is
+   * not the loudest word on the line. Apply keeps the weight of a commit.
+   */
+  [data-ui='filter-bar'] [data-part='bar'] :is([data-part='clear'], [data-part='reset']) {
+    --slotted-control-font-weight: var(--slotted-font-weight-medium, 500);
+  }
+
+  /* ── The summary, drawn only when the bar is narrow ─────────────────── */
+
+  [data-ui='filter-bar'] [data-part='summary'] {
+    display: none;
+    visibility: hidden;
+  }
+
+  [data-ui='filter-bar'] [data-part='summary'] > [data-part='label'] > span {
+    /* The count in the summary is a figure, and figures line up. */
+    font-variant-numeric: tabular-nums;
+  }
+
+  /* ── The actions under apply=manual ─────────────────────────────────── */
+
+  /**
+   * Apply and Reset close the toolbar line from its end. Clear stays beside
+   * Add rather than at the far end: under manual the far end holds Apply,
+   * and Clear there would make the control that empties the filter the
+   * neighbour of the one that commits it.
+   */
+  [data-ui='filter-bar'] > [data-part='frame'] > [data-part='bar'] > [data-part='actions'] {
+    align-items: center;
+    display: flex;
+    gap: var(--_gap-sm);
+    margin-inline-start: auto;
+  }
+
+  /* ── States of the whole bar ────────────────────────────────────────── */
+
+  [data-ui='filter-bar'][data-disabled] {
+    --_ink: var(--slotted-disabled-foreground, GrayText);
+    --_muted: var(--slotted-disabled-foreground, GrayText);
+    --_edge: var(--slotted-disabled-border, GrayText);
+    --_seam: var(--slotted-disabled-border, GrayText);
+    --_surface: var(--slotted-disabled-background, Canvas);
+  }
+
+  [data-ui='filter-bar'][data-disabled] :is([data-part='pill'], [data-part='chip']) {
+    box-shadow: none;
+  }
+
+  [data-ui='filter-bar'][data-disabled] :is([data-part='pill'], [data-part='chip'] > *) {
+    cursor: not-allowed;
+  }
+
+  /**
+   * Read-only: every condition stays reachable and readable, and nothing
+   * invites a press — the segments keep their stop and lose the pointer, and
+   * the binding draws no remove, add or clear control.
+   */
+  [data-ui='filter-bar'][data-readonly] [data-part='chip'] > * {
+    cursor: default;
+  }
+
+  /** A loading bar keeps its width and its controls, and says so in the count's place. */
+  [data-ui='filter-bar'][data-loading] > [data-part='frame'] > [data-part='count'] {
+    align-items: center;
+    display: inline-flex;
+    gap: var(--_gap-sm);
+  }
+
+  /* ── Sticky ─────────────────────────────────────────────────────────────
+   *
+   * The bar sticks under the page chrome, reading the property `page`
+   * publishes and never measuring the header itself. It then adds its own
+   * height to the number for what follows: the binding measures the root and
+   * writes the sum as `--slotted-page-sticky-top` on the element that holds
+   * the bar and the listing — the rule `section` established for its body —
+   * and writes the value it read back on the root itself, so the bar keeps
+   * sticking where it did while everything after it stops under the bar.
+   */
+  [data-ui='filter-bar'][data-sticky] {
+    background-color: var(--_surface);
+    inset-block-start: var(--slotted-page-sticky-top, 0px);
+    padding-block: var(--slotted-space-3, 0.375rem);
+    position: sticky;
+    z-index: var(--slotted-z-index-sticky, 100);
+  }
+
+  /* ── The builder ────────────────────────────────────────────────────────
+   *
+   * The whole tree, in a drawer, laid out the way Notion, Airtable and AG
+   * Grid's advanced filter lay a query out: a group opens with "Match [All |
+   * Any] of the following", every row under it starts with the word that
+   * joins it to the row above — "Where" on the first, "and" or "or" after —
+   * and a group inside a group is a box on a sunken ground with the same
+   * header and its own remove. A rule is one row: field, operator, operand,
+   * remove; it stacks when the drawer is narrow, and the leading word stays.
+   */
+  [data-ui='filter-bar'][data-part='builder'] {
+    --_join-col: var(--slotted-filter-bar-join-size, 3.5rem);
+    --_group-surface: var(
+      --slotted-filter-bar-group-surface,
+      var(--slotted-surface-sunken, Canvas)
+    );
+    --_group-edge: var(--slotted-filter-bar-group-border, var(--slotted-border-subtle, GrayText));
+
+    container-name: slotted-filter-bar-builder;
+    container-type: inline-size;
+    display: grid;
+    gap: var(--slotted-space-5, 0.75rem);
+  }
+
+  /**
+   * Every group is a container of its own, so a rule stacks against the width
+   * its own group has left, not the drawer's: two levels in, the gutter, the
+   * box padding and the border have taken nine rems, and a row measured
+   * against the drawer overflowed its box. The name differs from the
+   * builder's, because the card form below is the builder's decision and
+   * every group in one builder takes the same form.
+   */
+  [data-ui='filter-bar'][data-part='builder'] [data-part='group'] {
+    border: 0;
+    container-name: slotted-filter-bar-group;
+    container-type: inline-size;
+    display: grid;
+    gap: var(--_gap);
+    margin: 0;
+    min-inline-size: 0;
+    padding: 0;
+  }
+
+  [data-ui='filter-bar'][data-part='builder'] [data-part='group']:not([data-depth='0']) {
+    background-color: var(--_group-surface);
+    border: var(--slotted-border-width-thin, 1px) solid var(--_group-edge);
+    border-radius: var(--slotted-radius-md, 6px);
+    padding: var(--slotted-space-5, 0.75rem);
+  }
+
+  /* A box inside a box alternates its ground, so the third level reads as a level and not as a border. */
+  [data-ui='filter-bar'][data-part='builder']
+    [data-part='group']:is([data-depth='2'], [data-depth='4'], [data-depth='6']) {
+    background-color: var(--_surface);
+  }
+
+  [data-ui='filter-bar'][data-part='builder'] [data-part='group'] > legend {
+    /* The legend names the group to a reader and draws nothing. */
+    block-size: 1px;
+    clip-path: inset(50%);
+    overflow: hidden;
+    position: absolute;
+    white-space: nowrap;
+    inline-size: 1px;
+  }
+
+  /** The header: the words, the All | Any control between them, and, in a nested group, its remove at the end. */
+  [data-ui='filter-bar'][data-part='builder'] [data-part='join'] {
+    align-items: center;
+    color: var(--_ink);
+    display: flex;
+    flex-wrap: wrap;
+    font-weight: var(--slotted-font-weight-medium, 500);
+    gap: var(--_gap-sm);
+  }
+
+  [data-ui='filter-bar'][data-part='builder'] [data-part='join'] > [data-part='remove-group'] {
+    margin-inline-start: auto;
+  }
+
+  /**
+   * The rows: a two-column grid, the joining word then the rule or the group,
+   * so every field lines up under the first whatever word stands before it.
+   */
+  [data-ui='filter-bar'][data-part='builder'] [data-part='rules'] {
+    align-items: start;
+    column-gap: var(--_gap-sm);
+    display: grid;
+    grid-template-columns: var(--_join-col) minmax(0, 1fr);
+    min-inline-size: 0;
+    row-gap: var(--_gap);
+  }
+
+  [data-ui='filter-bar'][data-part='builder'] [data-part='conjunction'] {
+    color: var(--_muted);
+    /* Centred on the first control of its row, whatever the row stacks to. */
+    line-height: var(--_height);
+    overflow: hidden;
+    text-align: end;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  [data-ui='filter-bar'][data-part='builder'] [data-part='rule'] {
+    align-items: center;
+    display: grid;
+    gap: var(--_gap-sm);
+    /* Every track may shrink, so a row never pushes its remove control past its
+       group's edge; the container query below stacks it before it gets narrow.
+       The remove track is the control's own width, so the crosses of one
+       group stand in a column whatever each row holds. */
+    grid-template-columns:
+      minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.5fr)
+      var(--slotted-target-min, 24px);
+    min-inline-size: 0;
+  }
+
+  [data-ui='filter-bar'][data-part='builder'] [data-part='rule'] > *,
+  [data-ui='filter-bar'][data-part='builder']
+    [data-part='rule']
+    :is([data-part='operator'], [data-part='operand']) {
+    min-inline-size: 0;
+  }
+
+  [data-ui='filter-bar'][data-part='builder']
+    [data-part='rule'][data-operands='0']
+    [data-part='operand'] {
+    display: none;
+  }
+
+  [data-ui='filter-bar'][data-part='builder'] [data-part='rule'][data-operands='0'] {
+    /* The operator takes the operand's tracks too, so the field keeps the width it has on every other row. */
+    grid-template-columns: minmax(0, 1fr) minmax(0, 2.5fr) var(--slotted-target-min, 24px);
+  }
+
+  [data-ui='filter-bar'][data-part='builder'] [data-part='operand'] {
+    display: grid;
+    gap: var(--_gap-sm);
+    min-inline-size: 0;
+  }
+
+  [data-ui='filter-bar'][data-part='builder']
+    [data-part='rule'][data-operands='2']
+    [data-part='operand'] {
+    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+  }
+
+  /** The group's own controls, under its rows and aligned with them. */
+  [data-ui='filter-bar'][data-part='builder'] [data-part='group'] > [data-part='actions'] {
+    align-items: center;
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--_gap-sm);
+    padding-inline-start: calc(var(--_join-col) + var(--_gap-sm));
+  }
+
+  /**
+   * The builder's Add rule and Add group are outlined: they are what the
+   * footer is for, and as ghosts under a column of outlined fields they read
+   * as a caption. A nested group's pair is ghost, so the builder's own pair
+   * stays the one that reads as the footer. Save
+   * as view is a different act — it leaves the builder for the application's
+   * dialog — so it stands apart at the far end, at the weight of the words.
+   */
+  [data-ui='filter-bar'][data-part='builder']
+    [data-part='group']
+    > [data-part='actions']
+    > :is(
+      [data-part='add-rule'],
+      [data-part='add-group'],
+      [data-part='clear'],
+      [data-part='save-preset']
+    ) {
+    --slotted-control-font-weight: var(--slotted-font-weight-medium, 500);
+  }
+
+  [data-ui='filter-bar'][data-part='builder']
+    [data-part='group']
+    > [data-part='actions']
+    > [data-part='save-preset'] {
+    margin-inline-start: auto;
+  }
+
+  @container slotted-filter-bar-group (max-width: 30rem) {
+    /* The second track is the remove control's own width, not `auto`: the
+       operator and the operand span both tracks, and a spanning item hands
+       its size to the non-flexible track first — `auto` took the operand's
+       whole width and left the field 34 pixels wide, a chevron with no name. */
+    [data-ui='filter-bar'][data-part='builder'] [data-part='rule'],
+    [data-ui='filter-bar'][data-part='builder'] [data-part='rule'][data-operands='0'] {
+      grid-template-columns: minmax(0, 1fr) var(--slotted-target-min, 24px);
+    }
+
+    [data-ui='filter-bar'][data-part='builder'] [data-part='rule'] > [data-part='field'] {
+      grid-column: 1;
+    }
+
+    [data-ui='filter-bar'][data-part='builder'] [data-part='rule'] > [data-part='remove'] {
+      grid-column: 2;
+      grid-row: 1;
+    }
+
+    [data-ui='filter-bar'][data-part='builder']
+      [data-part='rule']
+      :is([data-part='operator'], [data-part='operand']) {
+      grid-column: 1 / -1;
+    }
+  }
+
+  /*
+   * The sentence of a rule is the card form's header, and a row that already
+   * shows its three controls does not draw it.
+   */
+  [data-ui='filter-bar'][data-part='builder'] [data-part='rule-summary'] {
+    display: none;
+    visibility: hidden;
+  }
+
+  /* ── The builder as cards ───────────────────────────────────────────────
+   *
+   * Under 30rem of the builder — a phone, where the builder is a sheet — a row
+   * of three controls beside a gutter of joining words leaves each control a
+   * third of a third of the screen, and every level of nesting takes another
+   * eighty pixels. So each rule becomes a card: its sentence, which a reader
+   * scans, and its remove control; pressing the sentence expands the card and
+   * stacks the field, the operator and the operand under it at the card's
+   * full width. A nested group is a rail on its start edge, one step in, and
+   * the joining word stands on its own line between two cards.
+   */
+  @container slotted-filter-bar-builder (max-width: 30rem) {
+    [data-ui='filter-bar'][data-part='builder'] {
+      gap: var(--_gap);
+    }
+
+    [data-ui='filter-bar'][data-part='builder'] [data-part='rules'] {
+      grid-template-columns: minmax(0, 1fr);
+      row-gap: var(--_gap-sm);
+    }
+
+    /* The joining word, small and on a line of its own; "Where" says nothing a list of cards does not. */
+    [data-ui='filter-bar'][data-part='builder'] [data-part='conjunction'] {
+      font-size: var(--slotted-font-size-xs, 12px);
+      line-height: var(--slotted-line-height-xs, 1.5);
+      padding-inline-start: var(--_seg-pad);
+      text-align: start;
+    }
+
+    [data-ui='filter-bar'][data-part='builder']
+      [data-part='rules']
+      > [data-part='conjunction']:first-child {
+      display: none;
+    }
+
+    [data-ui='filter-bar'][data-part='builder'] [data-part='group']:not([data-depth='0']),
+    [data-ui='filter-bar'][data-part='builder']
+      [data-part='group']:is([data-depth='2'], [data-depth='4'], [data-depth='6']) {
+      background-color: transparent;
+      border: 0;
+      /* The rail carries the nesting alone here, so it takes the edge the cards have rather than the box's subtler one. */
+      border-inline-start: var(--slotted-border-width-medium, 2px) solid var(--_edge);
+      border-radius: 0;
+      padding-block: 0;
+      padding-inline: var(--slotted-space-4, 0.5rem) 0;
+    }
+
+    [data-ui='filter-bar'][data-part='builder'] [data-part='rule'],
+    [data-ui='filter-bar'][data-part='builder'] [data-part='rule'][data-operands='0'] {
+      background-color: var(--_surface);
+      border: var(--_border-width) solid var(--_edge);
+      border-radius: var(--slotted-radius-md, 6px);
+      box-shadow: var(--slotted-control-shadow, none);
+      column-gap: 0;
+      grid-template-areas: 'summary remove';
+      grid-template-columns: minmax(0, 1fr) var(--_height);
+      row-gap: var(--_gap-sm);
+      transition: border-color var(--_duration) var(--_easing);
+    }
+
+    [data-ui='filter-bar'][data-part='builder'] [data-part='rule'][data-expanded] {
+      border-color: var(--slotted-border-strong, ButtonBorder);
+      padding-block-end: var(--_seg-pad);
+    }
+
+    [data-ui='filter-bar'][data-part='builder'] [data-part='rule'][data-invalid] {
+      border-color: var(--_invalid);
+      box-shadow: var(--_invalid-edge);
+    }
+
+    /* Forced colours remove the shadow; the edge comes back as an outline. */
+    @media (forced-colors: active) {
+      [data-ui='filter-bar'][data-part='builder'] [data-part='rule'][data-invalid] {
+        outline: var(--_invalid-edge-width) solid CanvasText;
+        outline-offset: calc(-1 * (var(--_border-width) + var(--_invalid-edge-width)));
+      }
+    }
+
+    /* The sentence: the field at the weight of a name, the operator quiet, the value back at weight. It wraps rather than truncates — on a phone the sentence is what is read. */
+    [data-ui='filter-bar'][data-part='builder'] [data-part='rule-summary'] {
+      /* The chevron stands in the middle of the card's header, whether the sentence takes one line or two. */
+      align-items: center;
+      appearance: none;
+      background: none;
+      border: 0;
+      border-radius: calc(var(--slotted-radius-md, 6px) - var(--_border-width));
+      color: var(--_ink);
+      cursor: pointer;
+      display: flex;
+      font: inherit;
+      gap: var(--_gap-sm);
+      grid-area: summary;
+      margin: 0;
+      min-block-size: var(--_height);
+      min-inline-size: 0;
+      padding-block: max(var(--_gap-sm), calc((var(--_height) - 1lh) / 2));
+      padding-inline: var(--_seg-pad) 0;
+      text-align: start;
+      transition: background-color var(--_duration) var(--_easing);
+      visibility: visible;
+    }
+
+    /* The words wrap inside their own run, so the chevron keeps the end of the first line however long the value is. */
+    [data-ui='filter-bar'][data-part='builder'] [data-part='rule-summary'] > [data-sentence] {
+      flex: 1 1 auto;
+      min-inline-size: 0;
+    }
+
+    [data-ui='filter-bar'][data-part='builder'] [data-part='rule-summary'] [data-field] {
+      font-weight: var(--slotted-font-weight-medium, 500);
+    }
+
+    [data-ui='filter-bar'][data-part='builder'] [data-part='rule-summary'] [data-operator] {
+      color: var(--_muted);
+    }
+
+    [data-ui='filter-bar'][data-part='builder'] [data-part='rule-summary'] [data-value] {
+      font-weight: var(--slotted-font-weight-medium, 500);
+      min-inline-size: 0;
+      overflow-wrap: anywhere;
+    }
+
+    [data-ui='filter-bar'][data-part='builder'] [data-part='rule-summary'] > [data-ui='icon'] {
+      --slotted-icon-size: var(--_icon);
+
+      color: var(--_muted);
+      flex: none;
+      margin-inline-start: auto;
+      transition: rotate var(--_duration) var(--_easing);
+    }
+
+    [data-ui='filter-bar'][data-part='builder']
+      [data-part='rule-summary'][aria-expanded='true']
+      > [data-ui='icon'] {
+      rotate: 180deg;
+    }
+
+    [data-ui='filter-bar'][data-part='builder'] [data-part='rule-summary']:enabled:hover {
+      background-color: var(--_hover);
+    }
+
+    [data-ui='filter-bar'][data-part='builder'] [data-part='rule-summary']:enabled:active {
+      background-color: var(--_active);
+    }
+
+    [data-ui='filter-bar'][data-part='builder'] [data-part='rule-summary']:focus-visible {
+      outline: var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);
+      outline-offset: calc(var(--slotted-focus-ring-width, 2px) * -1);
+    }
+
+    /*
+     * The remove control stands level with the chevron, in the middle of the
+     * header: the header's own height is the summary's, so the row it shares
+     * with the summary is centred on it, and an expanded card's controls
+     * below do not pull it down.
+     */
+    [data-ui='filter-bar'][data-part='builder'] [data-part='rule'] > [data-part='remove'] {
+      align-self: center;
+      grid-area: remove;
+      grid-row: 1;
+      justify-self: center;
+    }
+
+    /*
+     * A collapsed card holds only its sentence: the controls leave the picture
+     * and the tab order. Expanded, they stack at the card's full width and
+     * arrive from a step above, so the eye follows the card opening; closing
+     * snaps, because the reader has already looked away to the next card.
+     */
+    [data-ui='filter-bar'][data-part='builder']
+      [data-part='rule']:not([data-expanded])
+      :is([data-part='field'], [data-part='operator'], [data-part='operand']) {
+      display: none;
+      visibility: hidden;
+    }
+
+    [data-ui='filter-bar'][data-part='builder']
+      [data-part='rule'][data-expanded]
+      :is([data-part='field'], [data-part='operator'], [data-part='operand']) {
+      grid-column: 1 / -1;
+      margin-inline: var(--_seg-pad);
+      transition:
+        opacity var(--slotted-duration-medium) var(--slotted-easing-enter),
+        translate var(--slotted-duration-medium) var(--slotted-easing-enter);
+    }
+
+    @starting-style {
+      [data-ui='filter-bar'][data-part='builder']
+        [data-part='rule'][data-expanded]
+        :is([data-part='field'], [data-part='operator'], [data-part='operand']) {
+        opacity: 0;
+        translate: 0 calc(-1 * var(--slotted-space-2, 0.25rem));
+      }
+    }
+
+    [data-ui='filter-bar'][data-part='builder'] [data-part='group'] > [data-part='actions'] {
+      padding-inline-start: 0;
+    }
+
+    /*
+     * The builder's own Add rule and Add group share their line in two equal
+     * halves, and Clear all and Save as view take the line under them. A
+     * nested group's pair stays a quiet line at the start of its rail: three
+     * lines of full-width buttons read as three copies of one control.
+     */
+    [data-ui='filter-bar'][data-part='builder']
+      [data-part='group'][data-depth='0']
+      > [data-part='actions'] {
+      display: grid;
+      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+    }
+
+    [data-ui='filter-bar'][data-part='builder']
+      [data-part='group'][data-depth='0']
+      > [data-part='actions']
+      > :is([data-part='add-rule'], [data-part='add-group']) {
+      inline-size: 100%;
+    }
+
+    [data-ui='filter-bar'][data-part='builder']
+      [data-part='group']
+      > [data-part='actions']
+      > :is([data-part='clear'], [data-part='save-preset']) {
+      margin-inline-start: 0;
+    }
+  }
+
+  /* ── A builder row's remove control ─────────────────────────────────── */
+
+  [data-ui='filter-bar'] [data-part='rule'] > [data-part='remove'] {
+    align-items: center;
+    appearance: none;
+    background: none;
+    block-size: var(--slotted-target-min, 24px);
+    border: 0;
+    border-radius: var(--_control-radius);
+    color: var(--_muted);
+    cursor: pointer;
+    display: inline-flex;
+    font: inherit;
+    inline-size: var(--slotted-target-min, 24px);
+    justify-content: center;
+    padding: 0;
+    transition:
+      background-color var(--_duration) var(--_easing),
+      color var(--_duration) var(--_easing);
+  }
+
+  [data-ui='filter-bar'] [data-part='rule'] > [data-part='remove'] > [data-ui='icon'] {
+    --slotted-icon-size: var(--_icon);
+  }
+
+  [data-ui='filter-bar'] [data-part='rule'] > [data-part='remove']:enabled:hover {
+    background-color: var(--_hover);
+    color: var(--_ink);
+  }
+
+  [data-ui='filter-bar'] [data-part='rule'] > [data-part='remove']:enabled:active {
+    background-color: var(--_active);
+    color: var(--_ink);
+  }
+
+  [data-ui='filter-bar'] [data-part='rule'] > [data-part='remove']:focus-visible {
+    outline: var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);
+    outline-offset: var(--slotted-focus-ring-offset, 2px);
+  }
+
+  /* ── Narrow ─────────────────────────────────────────────────────────────
+   *
+   * Under the breakpoint — a phone — the bar keeps every condition in sight
+   * on one row that scrolls sideways, instead of folding them away or
+   * wrapping them into a wall of lines above the listing: the summary first,
+   * which opens the builder as a sheet, then every chip, the folded ones too,
+   * then the pinned fields still empty. A chip there is three targets, not
+   * four — the field, the value with the operator's words in it, the remove
+   * control — because every edit on a phone opens the builder, with the
+   * condition's card expanded. The last chip cut by the edge is what says
+   * the row goes on.
+   *
+   * The search stays on top, because a query is the one thing a reader on a
+   * phone types first, and the count stays under the row, because it is the
+   * answer.
+   */
+  @container slotted-filter-bar (max-width: 36rem) {
+    [data-ui='filter-bar'] > [data-part='frame'] {
+      grid-template-areas:
+        'search'
+        'bar'
+        'count';
+      grid-template-columns: minmax(0, 1fr);
+    }
+
+    [data-ui='filter-bar'] > [data-part='frame']:has(> [data-part='end']:not(:empty)) {
+      grid-template-areas:
+        'search'
+        'bar'
+        'end'
+        'count';
+    }
+
+    [data-ui='filter-bar'] > [data-part='frame'] > [data-part='search'] {
+      max-inline-size: none;
+    }
+
+    /*
+     * The row scrolls, so it clips at its padding edge, and a ring drawn
+     * outside a pill or the summary would lose its outer pixels there. Every
+     * member of the row draws its ring one width inside its own box instead —
+     * the chip segments already do, and it is the answer a chip row inside a
+     * control gives (`focus-ring.test.mjs`) — so the row takes no room it
+     * would have to give back as a negative margin.
+     */
+    [data-ui='filter-bar'] > [data-part='frame'] > [data-part='bar'] {
+      flex-wrap: nowrap;
+      overflow-x: auto;
+      overscroll-behavior-inline: contain;
+      scrollbar-width: none;
+    }
+
+    [data-ui='filter-bar']
+      > [data-part='frame']
+      > [data-part='bar']
+      > :is([data-part='summary'], [data-part='pill']):focus-visible {
+      outline-offset: calc(var(--slotted-focus-ring-width, 2px) * -1);
+    }
+
+    [data-ui='filter-bar'] > [data-part='frame'] > [data-part='bar']::-webkit-scrollbar {
+      display: none;
+    }
+
+    [data-ui='filter-bar']
+      > [data-part='frame']
+      > [data-part='bar']
+      > :is([data-part='summary'], [data-part='chip'], [data-part='pill']) {
+      flex: none;
+    }
+
+    [data-ui='filter-bar']
+      > [data-part='frame']
+      > [data-part='bar']
+      > :is([data-part='more'], [data-part='add'], [data-part='clear'], [data-part='actions']),
+    [data-ui='filter-bar'] [data-part='chip'] > [data-part='chip-operator'] {
+      display: none;
+      visibility: hidden;
+    }
+
+    [data-ui='filter-bar']
+      > [data-part='frame']
+      > [data-part='bar']
+      > [data-part='chip'][data-folded] {
+      display: inline-flex;
+      visibility: visible;
+    }
+
+    [data-ui='filter-bar'] [data-part='chip-value'] > [data-operator] {
+      display: inline;
+    }
+
+    [data-ui='filter-bar'] [data-part='chip-value'] > [data-value] {
+      max-inline-size: var(--slotted-filter-bar-value-max-narrow, 9rem);
+    }
+
+    [data-ui='filter-bar'] [data-part='summary'] {
+      display: inline-flex;
+      visibility: visible;
+    }
+
+    /* A line of its own here, with nothing to line up with. */
+    [data-ui='filter-bar'] > [data-part='frame'] > [data-part='count'] {
+      justify-self: start;
+      padding-block: 0;
+    }
+  }
+
+  /**
+   * A legend for a key the reader has none of. Where the primary input is a
+   * touch screen the shortcut at the end of the search names nothing the
+   * reader can press; the field is tapped. The key still works when a
+   * keyboard is attached.
+   */
+  @media (hover: none) and (pointer: coarse) {
+    [data-ui='filter-bar'] [data-part='search'] [data-ui='kbd'] {
+      display: none;
+    }
+  }
+
+  /*
+   * On a finger the remove control of a builder row and `more` are full
+   * targets, and the box is the one a mouse sees: a transparent `::before`
+   * centred on each reaches the comfortable size in both axes, so no row grows
+   * and the builder's remove track keeps its width. A chip's segments take the
+   * control height, which the theme already raises to the comfortable target.
+   */
+  @media (pointer: coarse) {
+    [data-ui='filter-bar'] :is([data-part='more'], [data-part='rule'] > [data-part='remove']) {
+      position: relative;
+    }
+
+    [data-ui='filter-bar']
+      :is([data-part='more'], [data-part='rule'] > [data-part='remove'])::before {
+      content: '';
+      inset: min(0px, calc((100% - var(--slotted-target-comfortable, 44px)) / 2));
+      position: absolute;
+    }
+  }
+
+  @media (forced-colors: active) {
+    /* Forced colours remove the invalid edge's shadow; it comes back as an
+       outline inside the border, and a focused invalid pill draws its ring
+       double. A chip's ring belongs to a segment and leaves it alone. */
+    [data-ui='filter-bar'] [data-part='pill'][data-invalid],
+    [data-ui='filter-bar'] [data-part='chip'][data-invalid] {
+      outline: var(--_invalid-edge-width) solid CanvasText;
+      outline-offset: calc(-1 * (var(--_border-width) + var(--_invalid-edge-width)));
+    }
+
+    [data-ui='filter-bar'] [data-part='pill'][data-invalid]:focus-visible {
+      outline: calc(var(--slotted-focus-ring-width, 2px) + var(--_invalid-edge-width)) double
+        var(--slotted-focus-ring-color, Highlight);
+      outline-offset: var(--slotted-focus-ring-offset, 2px);
+    }
+
+    /* The seams would read as a second edge in the system palette; the segments keep one line each. */
+    [data-ui='filter-bar'] [data-part='chip'] > * + * {
+      border-inline-start-color: GrayText;
+    }
+
+    [data-ui='filter-bar'] [data-part='chip'] > [aria-expanded='true'] {
+      background-color: Highlight;
+      color: HighlightText;
+    }
+  }
+
+  @media print {
+    [data-ui='filter-bar'][data-sticky] {
+      position: static;
+    }
+  }
+}