@apliteni/apliteni-ui 0.104.0 → 0.105.0

package/guidelines/dashboards-and-reports.md

@@ -0,0 +1,77 @@
+# Dashboards and reports
+
+## Build a dashboard for one screen
+
+<!-- rule: fast-glance -->
+
+**Rule:** Answer “is anything wrong, and what changed” in one screen, without scrolling.
+
+**Why:** A dashboard is read between other work: below the fold is not read.
+
+**Except:** A phone stacks the blocks and scrolls; budget a desktop screen.
+
+**Do:** A period control, a row of figures, a short list of exceptions.
+
+**Don't:** A second screen of blocks below the figures.
+
+## Put only figures, trends and exceptions on a dashboard
+
+<!-- rule: figures-and-exceptions -->
+
+**Rule:** Keep a dashboard to figures, trends and the rows that need attention.
+
+**Why:** Reading a table is what a report is for.
+
+**Do:** The figures with their trends, then the payouts needing a decision.
+
+**Don't:** The whole ledger and a paragraph about it.
+
+## Link each reference to its row
+
+<!-- rule: link-to-the-report -->
+
+**Rule:** Link each reference to its report row and bring that row into view.
+
+**Why:** A dashboard stops at what happened; a report opening at its own top has not answered the reference.
+
+**Do:** Each payout reference opens its row in the report.
+
+**Don't:** A block that lists what is wrong and offers no way in.
+
+## Build a report for the whole answer
+
+<!-- rule: report-depth -->
+
+**Rule:** Answer “why, and exactly how much”, with the rows behind the figure.
+
+**Why:** Analysis needs the rows: a summary cannot say how much.
+
+**Do:** The payout ledger, with the fees and net on every row.
+
+**Don't:** The same ledger reduced to three figures.
+
+## Give a report its filters and its export
+
+<!-- rule: report-offers -->
+
+**Rule:** Offer filters and one export on every report.
+
+**Why:** Narrowing the question, or taking the rows away, needs no second screen.
+
+**Gap #555:** The kit's Stock screener is a report with filters and no export.
+
+**Do:** A filter row above the table, the export at its end.
+
+**Don't:** A table alone, its period fixed when it was built.
+
+## Put the table under every chart
+
+<!-- rule: table-behind-the-chart -->
+
+**Rule:** Show the table a chart was drawn from under it, on every report.
+
+**Why:** A chart shows the shape of a change, not the amount it is read for.
+
+**Do:** The months as bars, then the same months as rows.
+
+**Don't:** The bars alone, every month estimated by eye.

package/guidelines/iconography.md

@@ -8,7 +8,7 @@
 
 **Why:** Without a legend, readers need labels for unfamiliar glyphs.
 
-**Except:** [Earn a wordless button](https://ui.apli.tech/storybook/?path=/story/guidelines-button-labels--button-labels) sets the three tests an entry passes, and the list grows by decision. Today: `x` to close or dismiss, `copy` to copy to clipboard, `moreHorizontal` and `moreVertical` for an overflow menu, `chevronDown` and `chevronUp` to expand or collapse. The shell’s chrome — theme toggle, sidebar toggle, collapsed-rail links — is wordless by a separate decision.
+**Except:** New entries require a decision and the three tests in [Earn a wordless button](https://ui.apli.tech/storybook/?path=/story/guidelines-button-labels--button-labels). Allowed: close, copy, overflow, expand, collapse and export. Theme toggles, sidebar toggles and collapsed-rail links have separate approval.
 
 **Do:** Show an overflow menu without words; keep the Settings label.
 

package/guidelines/stat-bands.md

@@ -6,11 +6,11 @@
 
 **Rule:** Put key figures in a stat band, not in a card of parts.
 
-**Why:** A shared layout keeps values, changes and their comparison basis in the same place for each figure.
+**Why:** A shared layout puts every figure's value, change and basis in the same place.
 
-**Do:** Use one card per figure by default, with the figure largest, an arrow, a signed change, and one comparison caption above the row.
+**Do:** One card per figure: the figure largest, an arrow, a signed change, one caption above the row.
 
-**Don't:** Use heading-sized figures with a capitalised 10px status chip and no comparison basis.
+**Don't:** Heading-sized figures, a capitalised 10px status chip, no comparison basis.
 
 ## Colour by meaning
 
@@ -20,11 +20,11 @@
 
 **Why:** Direction alone does not show whether a change is beneficial.
 
-**Except:** Omitted tone and explicit “neutral” keep the arrow and comparison but use no colour for unscored volume, reader-dependent meaning, or net cashflow already explained by income less cost.
+**Except:** Omitted tone and explicit “neutral” keep the arrow and comparison without colour: unscored volume, reader-dependent meaning, net cashflow that income less cost already explains.
 
-**Do:** Use four verdicts: rising Income and Cost use opposite colours; falling Unclassified is green; undeclared Net cashflow stays grey.
+**Do:** Four verdicts: rising Income and Cost take opposite colours; falling Unclassified is green; undeclared Net cashflow stays grey.
 
-**Don't:** Colour four figures by sign, making three rises green, praising cost growth, and showing the year’s cleanup as red.
+**Don't:** Four figures coloured by sign: three rises green, cost growth praised, the year’s cleanup red.
 
 ## State the comparison basis
 
@@ -34,6 +34,8 @@
 
 **Why:** Percentages need a basis that readers can find.
 
-**Do:** Put the basis once in a caption referenced by each change, or beside an individual exception; keep the caption before and outside every figure.
+**Except:** A comparison basis may be screen-reader-only when the visible control names the period. Use this exception for the Finance dashboard pattern.
 
-**Don't:** Use a title attribute, put the note below the tiles, place it inside the first figure, omit the basis, or nest captions.
+**Do:** The basis once, in a caption each change references or beside one exception; the caption before and outside every figure.
+
+**Don't:** A title attribute, the note below the tiles or inside the first figure, no basis, nested captions.

package/guidelines/the-page.md

@@ -114,10 +114,10 @@
 
 <!-- rule: lede -->
 
-**Rule:** Keep the introduction to two sentences or fewer and add information the title does not give.
+**Rule:** A page may open on its title alone; where there is an introduction, keep it to two sentences or fewer and add information the title does not give.
 
 **Why:** Repeating the title wastes the reader’s time.
 
 **Do:** Below “Payouts”, say “Payouts arrive within three business days.”
 
-**Don't:** Write “This is the payouts page” below “Payouts.”
+**Don't:** Write “This is the payouts page” below “Payouts,” or keep a line there because the page looks bare without one.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@apliteni/apliteni-ui",
-  "version": "0.104.0",
+  "version": "0.105.0",
   "workspaces": [
     "react"
   ],

package/react/dist/index.css

@@ -80,6 +80,9 @@
     --tap-clear-x: var(--tap-gap);
     --tap-clear-y: var(--tap-gap);
   }
+  .ui-toolbar--split .ui-filter-bar {
+    column-gap: calc(var(--tap-gap) + var(--space-1) + 1px) !important;
+  }
   .ui-filter-bar__chip {
     --tap-clear-x: 0px;
     --tap-clear-y: 0px;

package/src/assets/icons.js

@@ -175,6 +175,11 @@ export const iconOnlyAllowed = {
   moreVertical: 'overflow menu',
   chevronDown: 'expand or collapse',
   chevronUp: 'expand or collapse',
+  // Added by Artur's review of the Finance report, #505: a report's export is a
+  // standing offer sat next to the filters that narrow it, and the tray-and-arrow
+  // is the glyph a reader has already met doing this everywhere else. The entry
+  // is the decision — review did not infer it from the glyph looking obvious.
+  download: 'export or download the rows',
 };
 
 // The word a wordless control's name may open with. The list above says which
@@ -190,6 +195,11 @@ export const iconOnlyNames = {
   moreVertical: ['more'],
   chevronDown: ['expand', 'collapse', 'show', 'hide'],
   chevronUp: ['expand', 'collapse', 'show', 'hide'],
+  // The report's export, #505. Export is the word the kit's own call sites open
+  // with; download is the reader's other name for the same action, and the glyph
+  // depicts it, so a consumer naming it that way is not borrowing the tray for
+  // something else.
+  download: ['export', 'download'],
 };
 
 // What a glyph means when a component picks it for the reader rather than a

package/src/components/stat.js

@@ -58,11 +58,20 @@ const figure = ({ label = '', value = '', caption = '', delta, trend = '' }, til
 // `basis` is the band's caption: what every change is measured against, said
 // once before the list the way a table's <caption> is, in every layout — under
 // a row of tiles it would read as a note on the last card.
+//
+// `basisId` is the other way to answer the same question: the id of a statement
+// the caller has already placed before the figures, which each change points at
+// instead. It is for a band whose basis is stated by something beside it — a
+// period control over a dashboard's figures selects the window every change is
+// measured against, and a caption under it would say that again. React's
+// StatBand has carried it since the period showcase; this is the factory's half.
+// `basis` wins when both are passed, because a band that draws its own caption
+// has said it.
 // why: docs/components.md#stat-bands
-export function statBand({ stats = [], variant = 'tiles', basis = '', label, id } = {}) {
+export function statBand({ stats = [], variant = 'tiles', basis = '', basisId: shared = '', label, id } = {}) {
   const v = STAT_VARIANTS.includes(variant) ? variant : 'tiles';
   const base = id ? esc(id) : `ui-stats-${++seq}`;
-  const basisId = basis ? `${base}-basis` : '';
+  const basisId = basis ? `${base}-basis` : (shared ? esc(shared) : '');
   const cls = cx('ui-stats', `ui-stats--${v}`, v === 'band' && 'ui-card');
   const named = label ? ` role="group" aria-label="${esc(label)}"` : '';
   const items = stats.map((s) => figure(s, v === 'tiles', basisId)).join('');

package/src/styles/card.css

@@ -91,7 +91,6 @@
   line-height: var(--leading-snug);
   margin-bottom: var(--space-5);
 }
-
 /* Setting rows: label + control, divided by a hairline */
 .ui-card__row {
   display: flex;

package/src/styles/filter-bar.css

@@ -1,16 +1,34 @@
 .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%); }
-.ui-filter-bar__chip { display: inline-flex; align-items: center; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); padding: var(--space-1); margin: 0; min-width: 0; }
+/* 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);
+}
 .ui-filter-bar__chip .ui-dropdown__trigger { border: 0; background: transparent; padding: var(--space-1) var(--space-2); }
 .ui-filter-bar__remove { border: 0; background: transparent; color: var(--text); 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; }
 
+/* The chip's value takes its button's own ink, so a disabled chip keeps the
+   disabled ink it inherits instead of the value ink the enabled rules set. */
 .ui-filter-bar .ui-dropdown__value { color: inherit; }
+.ui-filter-bar button:enabled .ui-dropdown__value { color: var(--strong); }
 /* A chip with nothing chosen prints the field's name in the slot the value will
-   take. `:enabled` leaves a disabled chip its own ink. why: guidelines/labels-and-titles.md */
-.ui-filter-bar button:enabled .ui-dropdown__value.is-placeholder { /* muted-ink: placeholder — a filter chip with nothing chosen */ color: var(--muted); }
+   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

package/src/styles/layout.css

@@ -119,7 +119,7 @@
    resting step. */
 /* Re-tuned at #295, which took the light rail down a step with the page. Below 720px
    the glyph is the whole row, so it is held at text grade rather than at 1.4.11's bar —
-   stories/apps/shell-states.test.js:1704 `a resting glyph is dimmer but still legible`. */
+   stories/apps/shell-states.test.js:1705 `a resting glyph is dimmer but still legible`. */
 .ui-app__rail .ui-nav__ic svg { opacity: 0.66; }
 
 /* A destructive row of the rail is a navigation row and rests like one; the danger
@@ -437,10 +437,9 @@
   letter-spacing: var(--tracking-tight);
   margin-bottom: 8px;
 }
-/* The head keeps the kit's second step below it whether or not a lede is there to
-   carry it: with no lede the title's own margin takes the step instead. */
-.ui-app__main h1:not(.ui-card h1):not(:has(+ .ui-app__sub)) { margin-bottom: var(--space-8); }
 .ui-app__sub { color: var(--text); font-size: calc(var(--text-base) + 0.5px); line-height: 1.6; max-width: var(--prose-body); margin-bottom: var(--space-8); }
+/* A page may open on its title alone; then the title carries the head's step. */
+.ui-app__main > h1:not(:has(+ .ui-app__sub)) { margin-bottom: var(--space-8); }
 .ui-app__body { display: flex; flex-direction: column; gap: var(--space-5); }
 /* A flex child's min-width is its content by default, so one wide block — a
    ledger, a code sample — pushes the whole page sideways instead of scrolling
@@ -459,14 +458,48 @@
    of what you typed. min-width:0 keeps an input's automatic minimum (its `size`
    attribute, ~20 characters) from setting a floor well above the basis. */
 .ui-toolbar { display: flex; flex-wrap: wrap; gap: 10px; }
+/* A control row belongs to the block it narrows rather than standing beside it,
+   so it sits closer than .ui-app__body's gap between two blocks that are each
+   their own subject. Not on the last row: there the gap is the page's bottom
+   and nothing is being narrowed. why: Artur's review of the Finance report, #505 */
+.ui-app__body > .ui-toolbar:not(:last-child) { margin-bottom: calc(var(--space-3) - var(--space-5)); }
 .ui-toolbar > .ui-input,
 .ui-toolbar > .ui-input-group { flex: 1 1 6rem; min-width: 0; }
+/* A row that offers the block two unrelated things — what to narrow it by, and
+   what to do with it — puts the second at the far end instead of beside the
+   first. The auto margin is the same one the rail's fold toggle rides to the end
+   of the brand row, so the gap between the two groups is whatever the line has
+   left and the row still wraps on its own. Above the phone step a wrapped line
+   keeps the end it was sent to; below it there is no line, and the rule in the
+   query further down takes the margin off.
+   why: Artur's review of the Finance report, #505 */
+.ui-toolbar--split > :last-child { margin-inline-start: auto; }
 /* At one column the 6rem basis stops being a floor and becomes the field's size:
    a row with two narrow chips beside it keeps all three on the line and cuts the
    field's own placeholder off. why: docs/components.md#a-toolbar-at-one-column */
 @media (max-width: 560px) {
   .ui-toolbar > .ui-input,
   .ui-toolbar > .ui-input-group { flex-basis: 100%; }
+  /* The end control stays IN the row at this width rather than dropping under it.
+     A flex line breaks on hypothetical sizes, so a group whose content is wider
+     than the line takes that line alone however much it shrinks afterwards: at
+     390 the report's filter group asks for about 340px of chips and clear in a
+     284px row, so the 36px export went to a line of its own, left-aligned under
+     the clear button — which is the reading `--split` exists to prevent, drawn
+     vertically. Given a basis the group no longer claims the whole line, the end
+     control fits beside it, and the group grows into what is left. 60% rather
+     than half because at 560 half still left room for the group beside the
+     period strip, which put the export back under the row.
+
+     The auto margin goes: with the group grown there is no slack for it to take,
+     and on the line it did have it left the control against the right edge of an
+     otherwise empty row — a mark that came loose rather than what to do with the
+     block, which is what Artur marked on round r31. `align-self` is what keeps
+     the control its own height beside a group two lines tall; it sits at the
+     row's top end, the corner it keeps above this step.
+     why: Artur's review of the Finance report, rounds r31 and r34, #505 */
+  .ui-toolbar--split > :nth-last-child(2) { flex: 1 1 60%; min-width: 0; }
+  .ui-toolbar--split > :last-child { margin-inline-start: 0; align-self: start; }
 }
 
 /* -- The narrow rail ------------------------------------------------------ */

package/src/styles/stat.css

@@ -139,6 +139,20 @@ dd.ui-stat__caption { contain: inline-size; }
 @container (width <= 28rem) {
   .ui-stats__list > .ui-stat { flex-basis: 100%; }
 }
+
+/* Stacking runs out before a phone does. One figure to a row, a value can still
+   be wider than the box holding it — it may neither wrap nor truncate — so the
+   band pushed its column sideways: at 320, 15px past the shell's 214px column
+   and 19px past a specimen cell. Below its own width the value takes the rank
+   under it. A width each, because a tile pads its figure and an open band does
+   not, so they stop fitting 16px apart; what a figure longer than the kit's own
+   still does is in docs/components.md#stat-bands. #505 */
+@container (width <= 14rem) {
+  .ui-stats:not(.ui-stats--open) .ui-stats__list > .ui-stat .ui-stat__value { font-size: var(--text-xl); }
+}
+@container (width <= 15rem) {
+  .ui-stats--open .ui-stats__list > .ui-stat .ui-stat__value { font-size: var(--text-2xl); }
+}
 @container (32rem < width <= 66rem) {
   .ui-stats--open .ui-stats__list:has(> .ui-stat:nth-child(4):last-child) > .ui-stat { flex-basis: 34%; }
 }

package/src/styles/table.css

@@ -1,6 +1,6 @@
 /* ============================================================================
  * Table — .ui-table  (hairline rows, opaque base surface)
- * Row modifiers: .is-dead (revoked/struck), right-aligned .ui-table__act
+ * Row modifiers: .is-dead (revoked/struck), .is-target (landed on), right-aligned .ui-table__act
  * ========================================================================== */
 
 .ui-table {
@@ -76,7 +76,7 @@
 /* Data-table modifiers, composable: .ui-table--dense --zebra --hover.
  *   --dense  --space-3 across, --space-2 down — one step in from the base table
  *   --zebra  legacy spacing and 2px header rule; the base-surface rule below removes stripes
- * Cell helpers: .ui-table__num (right, tabular), .ui-table__code.
+ * Cell helpers: .ui-table__num (right, tabular), .ui-table__code, .ui-table__pair.
  * why: docs/foundations.md#spacing-and-rhythm
  * held by: stories/table-rhythm.test.js */
 .ui-table--dense th { padding: 0 var(--space-3) var(--space-2); }
@@ -116,6 +116,22 @@
   color: var(--strong);
   text-decoration: underline;
 }
+/* One exception, and it is the way through: a reference that opens another screen at
+   this row. The rule above was written to keep a LEDGER's identifiers out of the accent
+   — a whole column of them is an accent with no job (guidelines/density-and-accents.md,
+   give-accents-a-job) — but a dashboard's exceptions are three rows, and there the link
+   is how a reader reaches the row's own report. Left in the row's ink it was the plain
+   cell beside it to the pixel, resolving only on hover, which a phone does not have.
+   .ui-table__pair is the cell that carries a reference and its state, so the exception is
+   as narrow as that cell. The ink is base.css's own `a { color: var(--accent) }`, at
+   7.34:1 in light and 5.53:1 in dark on the table's ground.
+   why: Artur, round r34; guidelines/dashboards-and-reports.md#link-each-reference-to-its-row
+   held by: src/styles/table.test.js */
+.ui-table :where(td, th) .ui-table__pair a:not(.ui-btn):not(.ui-identity) { color: var(--accent); }
+.ui-table :where(td, th) .ui-table__pair a:not(.ui-btn):not(.ui-identity):hover {
+  color: var(--accent);
+  text-decoration: underline;
+}
 /* A plain link — one carrying no class — is the link these rules are about. An inline-block
    box, so a title link that wraps paints one ring instead of one per line, and the kit's small
    corner for that ring to follow. Anchors the kit already styles (`.ui-btn`, `.ui-identity`,
@@ -163,6 +179,15 @@
  * row reads as one row. */
 .ui-table :is(th, td).ui-table__num--strong { color: var(--strong); font-weight: var(--weight-semibold); }
 .ui-table__code { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--text); }
+/* Two things in one cell — a row's own name and the state of it — side by side
+ * while the column has room and stacked when it does not. The wrap comes from flex
+ * because a dense cell is nowrap, and the column is then only as wide as the wider
+ * of the two: a status that had a column of its own was the first thing a phone cut
+ * off, and in here it is the last. The class goes on a span inside the cell, never
+ * on the cell, which would leave the table box model. A row carrying a paragraph takes
+ * .ui-table--stack below instead, which drops the head; a pair keeps every head at every
+ * width, which is what a three-value glance row is read by. why: #505 */
+.ui-table__pair { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); }
 
 /* The empty state (.ui-empty) — shown when a table/list has no rows — now
    lives in styles/empty.css as a standalone component (illustration support). */
@@ -182,6 +207,41 @@
 }
 .ui-table tbody tr:hover { outline: 1px solid var(--border-strong); outline-offset: -1px; }
 
+/* The row a reference landed a reader on. The mark is a GROUND, not a line: an outline
+   says the keyboard is here (Artur, r34), and this one persists — it answers which row the
+   reader came for, so it stays until the next arrival and must not wear the picture focus
+   draws. It took --ring-scroll until #505's review found a landed row still outlined in the
+   accent after focus had moved on, with a second row beside it wearing the same box.
+   The ground and the ring paint together on arrival: `landOnRow()` focuses the row, so a
+   reader must see both at once, not the ring now and the ground only after they tab away.
+
+   The wash is the accent over the table's own ground: the family `tbody tr:hover` already
+   uses for "this row", one step up from its 8% so the two are told apart. 12% is the
+   strongest step that keeps an accent link inside the row above 4.5:1 — 4.60:1 at the worst
+   of the eight accent/theme cells, against 4.45:1 at 14%. It paints cells rather than the
+   row, because the hover and zebra rules paint cells and would otherwise cover it; the two
+   hover selectors are repeated with .is-target so a pointer passing over the row does not
+   take its mark off.
+   why: Artur, round r34; guidelines/dashboards-and-reports.md#link-each-reference-to-its-row
+   held by: stories/dashboard-report-refs.test.js, for landOnRow() marking the right row and
+   only the right row; stories/contrast.test.js, for the wash's contrast, now that
+   stories/components/Table.stories.js:FinanceData renders a row wearing the mark at rest.
+   Neither gate reads paint against focus: the ground and the ring share no selector and no
+   condition, which is why one cannot switch the other off, and that is proved by the PR's
+   browser captures rather than by a gate. PR #552 code review, finding F6. */
+.ui-table tbody tr.is-target > :is(td, th),
+.ui-table--hover tbody tr.is-target:hover > :is(td, th),
+.ui-table--zebra.ui-table--hover tbody tr.is-target:hover > :is(td, th) {
+  background: color-mix(in srgb, var(--accent) 12%, transparent); /* code-bg: inherit — this translucent wash leaves the chip on its opaque ground. */
+}
+
+/* A focused row draws the shared ring inward, like its containing scroll region.
+   why: docs/foundations.md#the-focus-ring */
+.ui-table tbody tr:focus-visible {
+  outline: var(--ring-scroll);
+  outline-offset: var(--ring-scroll-offset);
+}
+
 /* The end-cell inset above gives a row's highlight room; the bleed is what stops the grid
    paying for it. The table hangs out by the same --space-3, into the card's 20-24px
    padding and never past it, so the columns start on the card's own text edge and the

package/src/styles/tap-zone.css

@@ -140,6 +140,9 @@
   /* Chips open both ways: the row wraps, and the button at the end of it is a
      target like the chips are. */
   .ui-filter-bar { gap: var(--tap-gap) !important; --tap-clear-x: var(--tap-gap); --tap-clear-y: var(--tap-gap); }
+  /* In a split toolbar the rail row beside the report sits on the same line as
+     Clear all. One step plus 1px keeps the button's layer off that row. */
+  .ui-toolbar--split .ui-filter-bar { column-gap: calc(var(--tap-gap) + var(--space-1) + 1px) !important; }
 
   /* Inside a chip there is nothing to open: parting the value from its remove
      mark would draw two controls where the reader sees one. Named on the

package/src/tokens/tokens.css

@@ -528,6 +528,7 @@
 .ui-drawer__panel,
 .ui-dropdown__panel,
 .ui-fbcomposer,
+.ui-filter-bar__chip,
 .ui-footer--app,
 .ui-seg,
 .ui-snippet,