@stapel/search-react 0.39.0 → 0.40.0

package/manifest.json

@@ -1,7 +1,7 @@
 {
   "$generated": "by scripts/gen-manifest.mjs — do not edit; drift-gated (pnpm gen:manifest:check)",
   "package": "@stapel/search-react",
-  "version": "0.39.0",
+  "version": "0.40.0",
   "backend": {
     "module": "stapel-search",
     "contract": ">=0.16 <0.17"
@@ -582,6 +582,8 @@
         "phone",
         "catalogue-leaf",
         "under-a-header",
+        "toolbar-not-pinned",
+        "rail-on-a-panel",
         "system-scrollbar",
         "legacy-rhythm",
         "filters-header-navigates",

package/nav-manifest.json

@@ -1,6 +1,6 @@
 {
   "package": "@stapel/search-react",
-  "version": "0.39.0",
+  "version": "0.40.0",
   "entries": [
     {
       "id": "search.results",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stapel/search-react",
-  "version": "0.39.0",
+  "version": "0.40.0",
   "description": "Headless React pair for stapel-search: a typed query client, TanStack Query hooks, and a URL-first state codec that makes a search shareable by construction (filters, ranges, geo, sort and the keyset cursor all live in the query string). Drill-down facets rendered with their remaining counts and with the server's own honesty flags — approximate, skipped, degraded — never swallowed; keyset pagination with the window refusal named; DSA Art. 26 `promoted` marking carried into every card slot and the P2B Art. 5 ranking disclosure exposed as data. Zero visual opinion in the main entry; an opt-in /default subpath ships the antd skin, and /router binds the codec to react-router's useSearchParams.",
   "license": "MIT",
   "repository": {
@@ -57,9 +57,9 @@
       "limit": "14.5 KB"
     },
     {
-      "name": "default — the antd skin (query box + a typeahead that offers CATEGORY destinations with their live counts, filters incl. ranges/geo/category slots + the phone chip row with its leading category chip and the location summary row + the rail's evidence-ranked disclosure groups, panel search and sticky count/clear footer, results incl. the view switch, the card photo GALLERY as a SkinCarousel strip, the empty state's derived exits, ranking, the dictionary control for a vocabulary facet, the popular-values block, the partition row in both its chip and segmented variants, the select-style dictionary FIELD the desktop rail opens, the from/to pickers a bounded integer axis draws and the rail's own scrollbar sheet) must stay out of the main bundle. Raised 24.5 → 25.5 KB for those four controls, then 25.5 → 26.25 KB for the chip row's APPLIED mode — one chip per applied value and per numeric bound, each removing that one constraint beside a rail that is already on screen (a storefront was carrying its own copy of it), then 26.25 → 27 KB for the \"search in other categories\" LINE — which is a net deletion on the page that mounts it, replacing a full-width block of one row per section that arrived after the results and pushed them, then 27 → 27.75 KB for the two frames the page now tells apart: the dictionary FIELD reaching `<SearchPage>` at all (per-layout default, field in the rail and inline in the sheet) and the footer bar being static in a column and sticky in a sheet, where it used to be pinned over the last two groups everywhere, then 27.75 → 28.5 KB for `categoryHref` on the other-categories line — a real `<a href>` per row with a modifier-click left to the browser, instead of a `<button>` with no address a person could open in a new tab, then 28.5 → 29.25 KB for the phone's dictionary SHEET — a trigger row over the shared `SkinPickerSheet` with a recommended band, an alphabetical rest paged fifty at a time and a draft committed in one write, which is the control the composer's vocabulary picker already was while the buyer got a wall of checkboxes, then 29.25 → 30.5 KB for the panel that draws all of it: groups and ranges as one ordered sequence with one «Apply» for the panel rather than one per row, the empty-group heading rule, `categoryFilter={false}` and the `resultsLead` slot for a page reached by walking the catalogue, `PopularValues columns=\\\"responsive\\\"` on a container query, `SortSelect` annotating a blocked option at every width, a loading arm that covers the whole pane (0.34 CLS on a live host), and the chip row reserving its own box (a further 0.045). Measured with dependencies held constant, this package's src at the commit before that work and then at it: 29.05 -> 30.16 KB — 1.11 KB, and every part of it is a shift or a mislabelled control a host was living with, then 30.5 -> 31 KB for `<SearchResultsPane columns>` and its pass-through on `<SearchPage resultsColumns>`: a fixed track count or a per-breakpoint map, emitted as a hoisted container-query sheet (the results block is the window minus a 280px rail, so a media query would answer about a width the cards never have). Measured with dependencies held constant, this package's src before and after: 30.40 -> 30.65 KB — 250 B, and what it replaces is a host's `!important` rule against a grid declaration it could not read back, then 31 -> 31.25 KB for the segmented partition being antd's `Segmented` rather than a row of buttons wearing a border: the walker read `data-variant=\"segmented\"` with `role=\"radiogroup\"` and found `.ant-segmented` zero times and `input[type=radio]` zero times (D304), so the cells are the design system's now — real radios under one name, the browser's own arrow keys and Tab stop. Measured with dependencies held constant, this package's src before and after: 30.95 -> 31.05 KB — 100 B, against ~30 lines of hand-rolled joined-row geometry deleted, then 31.25 -> 31.5 KB for the two PINNING seams: `<SearchPage railTop>` (the rail's sticky offset and its height cap moved together, so a rail under a 64px header still ends at the foot of the window) and `<SearchResultsPane stickyToolbar>` with the toolbar's own element in both header shapes. Measured with dependencies held constant, this package's src before and after: 31.05 -> 31.2 KB — 150 B, and what it replaces in one deployment is an `!important` over the pair's own inline geometry, a `:has()`, a `display: contents` and this pair's rail breakpoint restated in the host's media query, then 31.5 -> 31.75 KB for the rail saying when its answer is IN FLIGHT: `FacetPanelBag.refreshing` off `loadStateFromQuery(…, { keepPrevious })`, `data-facets-refreshing` on the rail, and each facet group standing on its own last measured height (a `min-block-size` floor held in a ref) until the new answer lands. Measured with dependencies held constant, this package's src before and after: 31.43 -> 31.51 KB — 80 B, against 0.0586 CLS on a partition press (p43), where the groups survive and RESIZE, then 31.75 -> 32 KB for the FIRST MOUNT, which had none of that: `refreshing` is never true on a cold load, so nothing above reached the one pass a plain load is made of. Three parts. `<SearchPage categoryFeaturesPending>` / `<FacetPanelPane categoryFeaturesPending>` is the third state `categoryFeatures` never had — undefined means both \"no schema\" and \"not yet\", and on a category leaf the schema is a SECOND read, so the panel drew the rail from the answer alone and then drew it again when the schema landed: on the live cars leaf make and model went from three-row checkbox lists to one-row dictionary fields, condition and colour from checkboxes to pills, and `orderFacetGroupsBySchema` reordered all of them (p41, 0.0586 CLS on a plain load of `/c/transport-avtomobili`, make -152px and model -76px). Told the schema is coming, the panel keeps the box it already reserves and draws the rail ONCE. Second, every group now stands on a DECLARED box from the frame it mounts in (`facetGroupReservedHeight` — heading, rows and fold per shape), with its measured height preferred only while an answer is in flight. Third, `<SearchPage filtersHeaderReserve>` puts the host's own band above the rail in flow from the first frame, for the partition row that is two chained catalogue reads behind the answer. Measured with dependencies held constant, this package's src before and after: 30.77 -> 31.14 KB — 366 B, then 32 -> 32.25 KB for the filter sheet's open state becoming the HOST's: `<SearchPage filtersOpen>` / `onFiltersOpenChange(open, reason)` as React's usual controlled pair, and `filtersHeader` accepting a function handed `{ closeFilters, open }`. What it costs is the four call sites naming WHY the sheet moved (`open`, `apply`, `dismiss`, `consumer`) and the slot's function arm; what it buys is a header whose own control NAVIGATES being able to take the sheet down on the same press — the page published only `defaultFiltersOpen`, so a partition chip inside the sheet left the drawer standing over the page it had just opened. Measured with dependencies held constant, this package's src before and after: 31.14 -> 31.26 KB — 120 B, then 32.25 -> 32.5 KB for the two levers a storefront could not reach: `<SearchPage footerBar>` (the rail's footer bar writes its own `display` inline, so a consumer stylesheet could only suppress it with an `!important` its own gate forbids, and this page hard-coded the column's value) and `PartitionChild.count`, which the chip draws itself in the muted weight the facet rows use instead of a host welding the number onto the name. Measured with dependencies held constant, this package's src before and after: 32.01 -> 32.10 KB — 90 B, against a string-joining hack and an unreachable bar, then 32.5 -> 32.75 KB for THE THREE BOXES A STOREFRONT WAS HOLDING FOR THIS PAIR. The phone chip row's reserve is `chipRowMinHeight(token.controlHeight)` instead of a `44 + …` constant: the touch floor raises the chips to 44 only BELOW the tablet breakpoint, so from 768px up the reserve stood 12px taller than the 40px row and the results pane ROSE when the row landed (0.0725 CLS on a category leaf at 768, against 0.00016 at 390). `<SortSelect compact>` reserves the width of the longest label it can display, measured by the browser through an `aria-hidden` sizer stacked with the select in one grid cell, instead of `minWidth: 0` inline and a control that GREW 115px when the answer named the sort. And `<SearchResultsPane>` names its own root (`data-testid=\"search-results-pane\"`) and takes `reserve` — `<SearchPage resultsReserve>` — for the box the feed arrives into, which a host was holding with `#search-page > :last-child`. Measured with dependencies held constant, this package's src before and after: 32.10 -> 32.25 KB — 150 B, against a hand-guessed height, a sibling-count selector and two stylesheet rules a consumer can now delete. 32.75 KB HOLDS for the rail's own scrollbar and the block rhythm (owner's walk of the storefront, dark theme): measured 32539 B against the 32.75 KB line, 290 B over the 32249 B this note last recorded, and 211 B of room left. The rail stays its own scroll container — filters that stay put while the results move under them is the whole point of it — and `railScrollbar` names whose BAR draws in the gutter: `\"styled\"` (the new default) is a hoisted rule set in both vendor forms, a 6px track with no arrows and no track fill and a thumb that is transparent at rest and arrives from the tokens on hover or focus-within, standing always under `(pointer: coarse)` where neither fires; `\"system\"` hands the port back to the platform and mounts no sheet at all. The system bar was never a decision, which is why the default is the new arm. The rest is `blockRhythm`: one gap for every block on this page from `var(--stapel-block-gap)` / `var(--stapel-block-gap-compact)` with each block's outer margin reset, in place of the flat `spacing[4]` the root `<Flex>` wrote inline. A budget is not raised for a change that fits under the line it already has. 32.75 -> 33.25 KB for THE POINTER THAT WAS A PARTITION CHIP (owner's read of the stand at 0.38.0). Measured with dependencies held constant, this package's src before this change and then at it: 32539 -> 32779 B — 240 B, 29 of them over the old line, and a ceiling that fails on 29 B of a shipped defect fix is a gate proving nothing. `PartitionChild.linked`/`href` and `<PartitionChips linkedChildren>` split the row's items ONCE, above everything that reads them: the cells, the roving stop, the value lookup and the arrow keys see only the SECTIONS, so a pointer cannot be a radio, cannot carry a count and cannot be the chosen partition — the live row read `All | New 0 | Used 3 | Car rental 0`, where the last zero counted a category that is not a section of this template at all. The rest is the pointer's own chip: an outlined pill that is a real `<a href>` to the target, its inline arrow glyph (drawn here, like every other glyph in this skin — this package ships no icon set), and the row that carries them OUTSIDE the radiogroup, because a `role=\"radiogroup\"` containing a link announces a choice with an option nobody can choose. 33.25 KB leaves 471 B",
+      "name": "default — the antd skin (query box + a typeahead that offers CATEGORY destinations with their live counts, filters incl. ranges/geo/category slots + the phone chip row with its leading category chip and the location summary row + the rail's evidence-ranked disclosure groups, panel search and sticky count/clear footer, results incl. the view switch, the card photo GALLERY as a SkinCarousel strip, the empty state's derived exits, ranking, the dictionary control for a vocabulary facet, the popular-values block, the partition row in both its chip and segmented variants, the select-style dictionary FIELD the desktop rail opens, the from/to pickers a bounded integer axis draws and the rail's own scrollbar sheet) must stay out of the main bundle. Raised 24.5 → 25.5 KB for those four controls, then 25.5 → 26.25 KB for the chip row's APPLIED mode — one chip per applied value and per numeric bound, each removing that one constraint beside a rail that is already on screen (a storefront was carrying its own copy of it), then 26.25 → 27 KB for the \"search in other categories\" LINE — which is a net deletion on the page that mounts it, replacing a full-width block of one row per section that arrived after the results and pushed them, then 27 → 27.75 KB for the two frames the page now tells apart: the dictionary FIELD reaching `<SearchPage>` at all (per-layout default, field in the rail and inline in the sheet) and the footer bar being static in a column and sticky in a sheet, where it used to be pinned over the last two groups everywhere, then 27.75 → 28.5 KB for `categoryHref` on the other-categories line — a real `<a href>` per row with a modifier-click left to the browser, instead of a `<button>` with no address a person could open in a new tab, then 28.5 → 29.25 KB for the phone's dictionary SHEET — a trigger row over the shared `SkinPickerSheet` with a recommended band, an alphabetical rest paged fifty at a time and a draft committed in one write, which is the control the composer's vocabulary picker already was while the buyer got a wall of checkboxes, then 29.25 → 30.5 KB for the panel that draws all of it: groups and ranges as one ordered sequence with one «Apply» for the panel rather than one per row, the empty-group heading rule, `categoryFilter={false}` and the `resultsLead` slot for a page reached by walking the catalogue, `PopularValues columns=\\\"responsive\\\"` on a container query, `SortSelect` annotating a blocked option at every width, a loading arm that covers the whole pane (0.34 CLS on a live host), and the chip row reserving its own box (a further 0.045). Measured with dependencies held constant, this package's src at the commit before that work and then at it: 29.05 -> 30.16 KB — 1.11 KB, and every part of it is a shift or a mislabelled control a host was living with, then 30.5 -> 31 KB for `<SearchResultsPane columns>` and its pass-through on `<SearchPage resultsColumns>`: a fixed track count or a per-breakpoint map, emitted as a hoisted container-query sheet (the results block is the window minus a 280px rail, so a media query would answer about a width the cards never have). Measured with dependencies held constant, this package's src before and after: 30.40 -> 30.65 KB — 250 B, and what it replaces is a host's `!important` rule against a grid declaration it could not read back, then 31 -> 31.25 KB for the segmented partition being antd's `Segmented` rather than a row of buttons wearing a border: the walker read `data-variant=\"segmented\"` with `role=\"radiogroup\"` and found `.ant-segmented` zero times and `input[type=radio]` zero times (D304), so the cells are the design system's now — real radios under one name, the browser's own arrow keys and Tab stop. Measured with dependencies held constant, this package's src before and after: 30.95 -> 31.05 KB — 100 B, against ~30 lines of hand-rolled joined-row geometry deleted, then 31.25 -> 31.5 KB for the two PINNING seams: `<SearchPage railTop>` (the rail's sticky offset and its height cap moved together, so a rail under a 64px header still ends at the foot of the window) and `<SearchResultsPane stickyToolbar>` with the toolbar's own element in both header shapes. Measured with dependencies held constant, this package's src before and after: 31.05 -> 31.2 KB — 150 B, and what it replaces in one deployment is an `!important` over the pair's own inline geometry, a `:has()`, a `display: contents` and this pair's rail breakpoint restated in the host's media query, then 31.5 -> 31.75 KB for the rail saying when its answer is IN FLIGHT: `FacetPanelBag.refreshing` off `loadStateFromQuery(…, { keepPrevious })`, `data-facets-refreshing` on the rail, and each facet group standing on its own last measured height (a `min-block-size` floor held in a ref) until the new answer lands. Measured with dependencies held constant, this package's src before and after: 31.43 -> 31.51 KB — 80 B, against 0.0586 CLS on a partition press (p43), where the groups survive and RESIZE, then 31.75 -> 32 KB for the FIRST MOUNT, which had none of that: `refreshing` is never true on a cold load, so nothing above reached the one pass a plain load is made of. Three parts. `<SearchPage categoryFeaturesPending>` / `<FacetPanelPane categoryFeaturesPending>` is the third state `categoryFeatures` never had — undefined means both \"no schema\" and \"not yet\", and on a category leaf the schema is a SECOND read, so the panel drew the rail from the answer alone and then drew it again when the schema landed: on the live cars leaf make and model went from three-row checkbox lists to one-row dictionary fields, condition and colour from checkboxes to pills, and `orderFacetGroupsBySchema` reordered all of them (p41, 0.0586 CLS on a plain load of `/c/transport-avtomobili`, make -152px and model -76px). Told the schema is coming, the panel keeps the box it already reserves and draws the rail ONCE. Second, every group now stands on a DECLARED box from the frame it mounts in (`facetGroupReservedHeight` — heading, rows and fold per shape), with its measured height preferred only while an answer is in flight. Third, `<SearchPage filtersHeaderReserve>` puts the host's own band above the rail in flow from the first frame, for the partition row that is two chained catalogue reads behind the answer. Measured with dependencies held constant, this package's src before and after: 30.77 -> 31.14 KB — 366 B, then 32 -> 32.25 KB for the filter sheet's open state becoming the HOST's: `<SearchPage filtersOpen>` / `onFiltersOpenChange(open, reason)` as React's usual controlled pair, and `filtersHeader` accepting a function handed `{ closeFilters, open }`. What it costs is the four call sites naming WHY the sheet moved (`open`, `apply`, `dismiss`, `consumer`) and the slot's function arm; what it buys is a header whose own control NAVIGATES being able to take the sheet down on the same press — the page published only `defaultFiltersOpen`, so a partition chip inside the sheet left the drawer standing over the page it had just opened. Measured with dependencies held constant, this package's src before and after: 31.14 -> 31.26 KB — 120 B, then 32.25 -> 32.5 KB for the two levers a storefront could not reach: `<SearchPage footerBar>` (the rail's footer bar writes its own `display` inline, so a consumer stylesheet could only suppress it with an `!important` its own gate forbids, and this page hard-coded the column's value) and `PartitionChild.count`, which the chip draws itself in the muted weight the facet rows use instead of a host welding the number onto the name. Measured with dependencies held constant, this package's src before and after: 32.01 -> 32.10 KB — 90 B, against a string-joining hack and an unreachable bar, then 32.5 -> 32.75 KB for THE THREE BOXES A STOREFRONT WAS HOLDING FOR THIS PAIR. The phone chip row's reserve is `chipRowMinHeight(token.controlHeight)` instead of a `44 + …` constant: the touch floor raises the chips to 44 only BELOW the tablet breakpoint, so from 768px up the reserve stood 12px taller than the 40px row and the results pane ROSE when the row landed (0.0725 CLS on a category leaf at 768, against 0.00016 at 390). `<SortSelect compact>` reserves the width of the longest label it can display, measured by the browser through an `aria-hidden` sizer stacked with the select in one grid cell, instead of `minWidth: 0` inline and a control that GREW 115px when the answer named the sort. And `<SearchResultsPane>` names its own root (`data-testid=\"search-results-pane\"`) and takes `reserve` — `<SearchPage resultsReserve>` — for the box the feed arrives into, which a host was holding with `#search-page > :last-child`. Measured with dependencies held constant, this package's src before and after: 32.10 -> 32.25 KB — 150 B, against a hand-guessed height, a sibling-count selector and two stylesheet rules a consumer can now delete. 32.75 KB HOLDS for the rail's own scrollbar and the block rhythm (owner's walk of the storefront, dark theme): measured 32539 B against the 32.75 KB line, 290 B over the 32249 B this note last recorded, and 211 B of room left. The rail stays its own scroll container — filters that stay put while the results move under them is the whole point of it — and `railScrollbar` names whose BAR draws in the gutter: `\"styled\"` (the new default) is a hoisted rule set in both vendor forms, a 6px track with no arrows and no track fill and a thumb that is transparent at rest and arrives from the tokens on hover or focus-within, standing always under `(pointer: coarse)` where neither fires; `\"system\"` hands the port back to the platform and mounts no sheet at all. The system bar was never a decision, which is why the default is the new arm. The rest is `blockRhythm`: one gap for every block on this page from `var(--stapel-block-gap)` / `var(--stapel-block-gap-compact)` with each block's outer margin reset, in place of the flat `spacing[4]` the root `<Flex>` wrote inline. A budget is not raised for a change that fits under the line it already has. 32.75 -> 33.25 KB for THE POINTER THAT WAS A PARTITION CHIP (owner's read of the stand at 0.38.0). Measured with dependencies held constant, this package's src before this change and then at it: 32539 -> 32779 B — 240 B, 29 of them over the old line, and a ceiling that fails on 29 B of a shipped defect fix is a gate proving nothing. `PartitionChild.linked`/`href` and `<PartitionChips linkedChildren>` split the row's items ONCE, above everything that reads them: the cells, the roving stop, the value lookup and the arrow keys see only the SECTIONS, so a pointer cannot be a radio, cannot carry a count and cannot be the chosen partition — the live row read `All | New 0 | Used 3 | Car rental 0`, where the last zero counted a category that is not a section of this template at all. The rest is the pointer's own chip: an outlined pill that is a real `<a href>` to the target, its inline arrow glyph (drawn here, like every other glyph in this skin — this package ships no icon set), and the row that carries them OUTSIDE the radiogroup, because a `role=\"radiogroup\"` containing a link announces a choice with an option nobody can choose. 33.25 KB leaves 471 B, then 33.25 -> 34 KB for THE TWO THINGS THE CLOSING-WAVE CENSUS FOUND ON THE FEED AND THE RAIL. Measured with dependencies held constant, this package's src before this change and then at it: 32779 -> 33584 B — 805 B, 334 of them over the old line. First, `<SearchPage toolbarSticky>` (default `true`): the results toolbar pins itself at `railTop` — the same edge the filter rail already clears, so there is no second number to keep in step — through a hoisted `@media (pointer: fine)` rule set, because the pin has to be gated on a pointer and a media query cannot be written in a `style` attribute. `stickyToolbar` shipped a release ago and no deployment turned it on, which is a feature nobody has; the reference pins its sort bar once a reader has scrolled into the results (REPORT §24, Surface 2) and this page now does too, on a desktop only — a pinned bar over a 390px viewport spends the fold on chrome. The row also states its own box from the first frame (`toolbarRowMinHeight(token.controlHeight)`, the discipline `chipRowMinHeight` is written under), so its height cannot change around the moment the rule engages. Second, the colour SWATCH: a facet whose axis is a colour (`isColorAxis` — the slug's head, the address key beside it, and `axis_role` the day the canon grows a colour one) draws a filled dot beside every value whose code it can resolve to an actual colour (`swatchColor` — a design-system colour role first, then CSS's own keyword vocabulary, then a hex code a catalogue spelled out itself), and NOTHING beside the rest. Most of the weight is that keyword list, and it is the whole point of the feature: it is the vocabulary in which \"this code names a colour\" is a fact rather than a guess, and without it the only alternatives are a hue table invented for one catalogue's transliterations or a grey placeholder saying every value is the same colour. 34 KB leaves 416 B. 34 KB HOLDS for the owner's tidiness probe on the stand (dark theme): measured 33661 B against the 34 KB line, 77 B over the 33584 B this note last recorded, and 339 B of room left. Three fills, all of them this pair drawing something the page had already decided. `<SearchPage railSurface>` / `<FacetPanelPane railSurface>` (default `\"flat\"`, `\"panel\"` restores the old arm): the filter panel's body painted the raised container ground and read as a 270 x 1539 filled slab with no radius and no border, standing on the page ground for the whole height of the feed — flat draws the controls and only the text colour a bare surface drops (`var(--stapel-text)`), the same answer `categories-react` gave for its grid, strip and breadcrumbs. The rail's footer bar stopped choosing a colour: it painted antd's `colorBgContainer` in both arms, and now paints the panel's OWN token and only in the pinned arm, which is the one with a scroll port under it — the static arm paints nothing and keeps its hairline. And `resultsHeader`'s wrapper is `display: contents`: it was mounted on the PROP rather than on what the prop rendered, so a host whose header said nothing still put a 1392 x 0 element in the block-rhythm column, which is charged a gap on BOTH sides — 64px between two real blocks where 32 is declared, on every feed page, plus a `:empty` stand-in rule in the consumer's stylesheet that can now be deleted. A budget is not raised for a change that fits under the line it already has",
       "path": "dist/default/index.js",
-      "limit": "33.25 KB"
+      "limit": "34 KB"
     },
     {
       "name": "router — the react-router binding is opt-in; the main entry must never pull a router",
@@ -115,9 +115,9 @@
     "size-limit": "^11.2.0",
     "typescript": "^5.8.3",
     "vitest": "^3.2.4",
-    "@stapel/image": "^0.4.2",
-    "@stapel/core": "^0.26.1",
     "@stapel/attributes-react": "^0.17.0",
+    "@stapel/core": "^0.26.1",
+    "@stapel/image": "^0.4.2",
     "@stapel/showcase": "^0.3.0",
     "@stapel/tokens": "^0.8.0",
     "@stapel/tokens-antd": "^0.18.0"

package/src/analytics/generated/events.json

@@ -1,7 +1,7 @@
 {
   "$generated": "by scripts/gen-events.mjs — do not edit; drift-gated (pnpm gen:events:check)",
   "package": "@stapel/search-react",
-  "version": "0.39.0",
+  "version": "0.40.0",
   "defined": [],
   "flows": []
 }

package/src/default/FacetGroupControl.tsx

@@ -67,6 +67,7 @@ import type { CSSProperties, ReactElement } from "react";
 import { Button, Checkbox, Flex, Input, Typography } from "antd";
 import { useT } from "@stapel/core";
 import { SkinPickerSheet } from "@stapel/tokens-antd/skin";
+import { SWATCH_SIZE, facetSwatch } from "./swatches.js";
 import type { PickerGroup, PickerOption } from "@stapel/tokens-antd/skin";
 import { controls, cssVar, radii, spacing } from "@stapel/tokens";
 import { featureConfig, featureType } from "@stapel/attributes-react";
@@ -342,6 +343,42 @@ function OptionCount(props: {
 /** The indent one level of a hierarchical facet is drawn with. */
 const NEST_STEP = spacing[5];
 
+/**
+ * The colour a value IS, drawn beside the word for it — see `./swatches.ts`.
+ *
+ * `aria-hidden`, and it never replaces the label: a dot is a second way to
+ * read a row that already reads, so a screen reader and a monochrome display
+ * lose nothing. The hairline is the panel's own border role, because a white
+ * swatch on a white rail is otherwise an empty hole.
+ */
+function Swatch(props: {
+  readonly group: FacetGroup;
+  readonly value: string;
+}): ReactElement | null {
+  const color = facetSwatch(props.group, props.value);
+  if (color === null) return null;
+  return (
+    <span
+      aria-hidden="true"
+      data-testid={`facet-swatch-${props.group.slug}-${props.value}`}
+      data-swatch={color}
+      style={{
+        display: "inline-block",
+        inlineSize: SWATCH_SIZE,
+        blockSize: SWATCH_SIZE,
+        flex: "0 0 auto",
+        borderRadius: radii.full,
+        background: color,
+        border: `1px solid ${cssVar("border")}`,
+        // The dot sits ON the text line rather than on the box's baseline,
+        // which is what keeps a 12px circle centred against a 14px label.
+        verticalAlign: "-0.125em",
+        marginInlineEnd: spacing[1],
+      }}
+    />
+  );
+}
+
 function CheckboxRow(props: {
   readonly group: FacetGroup;
   readonly node: FacetOptionNode;
@@ -369,6 +406,7 @@ function CheckboxRow(props: {
           props.onToggle(group.slug, node.option.value);
         }}
       >
+        <Swatch group={group} value={node.option.value} />
         {node.option.label}
       </Checkbox>
       <OptionCount group={group} option={node.option} />
@@ -406,6 +444,7 @@ function OptionPill(props: {
         props.onToggle(group.slug, option.value);
       }}
     >
+      <Swatch group={group} value={option.value} />
       {option.count === null ? option.label : `${option.label} ${option.count}`}
     </Button>
   );

package/src/default/FacetPanelPane.tsx

@@ -96,7 +96,7 @@ import {
   LoadList,
   SkinTheme,
 } from "@stapel/tokens-antd/skin";
-import { spacing } from "@stapel/tokens";
+import { cssVar, spacing } from "@stapel/tokens";
 import { featureName } from "@stapel/attributes-react";
 import type { FeatureDef } from "@stapel/attributes-react";
 import type { SearchGeo } from "../api/types.js";
@@ -226,7 +226,32 @@ export interface GeoFilterSlotProps {
   readonly onChange: (geo: SearchGeo | null) => void;
 }
 
+/**
+ * WHAT THE FILTER PANEL'S OWN BODY PAINTS — see
+ * {@link FacetPanelPaneProps.railSurface}.
+ */
+export type SearchRailSurface = "flat" | "panel";
+
 export interface FacetPanelPaneProps extends ThemeModeProp {
+  /**
+   * WHAT THE PANEL'S OWN BODY PAINTS. Default `"flat"`.
+   *
+   *  - `"flat"` — nothing. The panel is a column of controls standing on the
+   *    page's own ground, and it takes only the text colour it needs
+   *    (`var(--stapel-text)`), which a bare surface does not set;
+   *  - `"panel"` — the raised container ground this pane painted until now.
+   *
+   * The default changed, and the measurement is why: on the stand's dark theme
+   * the rail was a **270 x 1539** filled slab with no radius and no border,
+   * standing on the page ground — a card shape with none of a card's edges,
+   * running the whole height of the feed beside it. The same read produced the
+   * same verdict for `categories-react`'s grid, strip and breadcrumbs, and the
+   * answer there was the same one: draw the controls, not a box around them.
+   *
+   * `"panel"` is the old arm kept whole, for a deployment whose page ground is
+   * an image or whose layout genuinely wants the filters on their own sheet.
+   */
+  readonly railSurface?: SearchRailSurface;
   /** The category's feature schema — the source of option LABELS, of which
    * slugs get a numeric range row, and of which slugs are a filter at all
    * (`isFacetableFeature`: an `imei` is counted and is not one). */
@@ -407,6 +432,9 @@ function RailFooterBar(props: {
   /** `"sticky"` pins it to the scroll port's floor; `"static"` lets it sit
    * after the last group. See {@link FacetPanelPaneProps.footerBar}. */
   readonly position: "sticky" | "static";
+  /** What the panel around it paints, so a pinned bar takes the SAME ground
+   * rather than deciding one of its own. See {@link FacetPanelPaneProps.railSurface}. */
+  readonly railSurface: SearchRailSurface;
 }): ReactElement | null {
   const t = useT();
   const tPlural = useTPlural();
@@ -430,9 +458,25 @@ function RailFooterBar(props: {
       data-testid="facets-footer-bar"
       data-position={props.position}
       style={{
-        ...(props.position === "sticky" ? { position: "sticky", bottom: 0 } : {}),
-        // Opaque, or the options scrolling under the bar read THROUGH it.
-        background: token.colorBgContainer,
+        ...(props.position === "sticky"
+          ? {
+              position: "sticky",
+              bottom: 0,
+              /* THE GROUND IT IS ON, and only where it has to be opaque.
+                 The bar used to paint antd's `colorBgContainer` in BOTH arms:
+                 a second opinion about a colour its parent already decided,
+                 and — since the panel's own body went flat — a lighter strip
+                 standing across the foot of the rail on the stand's dark
+                 theme. It now paints the same token the panel does and only
+                 in the arm that is pinned over its own scroll port, where a
+                 transparent floor lets the options read THROUGH it. The
+                 static arm has nothing scrolling under it and paints
+                 nothing. */
+              background: cssVar(
+                props.railSurface === "panel" ? "surface-raised" : "surface"
+              ),
+            }
+          : {}),
         borderBlockStart: `1px solid ${token.colorSplit}`,
         paddingBlockStart: spacing[2],
         display: "flex",
@@ -633,8 +677,19 @@ export function FacetPanelPane(props: FacetPanelPaneProps): ReactElement {
         ? "none"
         : props.footerBar;
 
+  /* The panel's own ground — see `railSurface`. `"bare"` paints NOTHING, text
+     colour included, so the flat arm states the one property it still needs;
+     the theme's own custom property, so it follows the brand and the dark side
+     rather than freezing whichever mode mounted first. */
+  const railSurface: SearchRailSurface = props.railSurface ?? "flat";
+
   return (
-    <SkinTheme {...(props.mode !== undefined ? { mode: props.mode } : {})}>
+    <SkinTheme
+      {...(props.mode !== undefined ? { mode: props.mode } : {})}
+      {...(railSurface === "flat"
+        ? { surface: "bare" as const, style: { color: cssVar("text") } }
+        : {})}
+    >
       <FacetPanel
         {...(props.categoryFeatures !== undefined
           ? { categoryFeatures: props.categoryFeatures }
@@ -1155,6 +1210,7 @@ export function FacetPanelPane(props: FacetPanelPaneProps): ReactElement {
                 activeFilters={bag.activeFilters}
                 clearAll={bag.clearAll}
                 position={footerBar}
+                railSurface={railSurface}
               />
             )}
           </Flex>

package/src/default/SearchPage.tsx

@@ -82,6 +82,7 @@ import type {
   CategoryFilterSlotProps,
   FacetPanelPaneProps,
   GeoFilterSlotProps,
+  SearchRailSurface,
 } from "./FacetPanelPane.js";
 import { FilterChips } from "./FilterChips.js";
 import { LocationSummaryLine } from "./LocationSummaryLine.js";
@@ -394,6 +395,9 @@ export function railStyle(top: number | string | undefined): CSSProperties {
  * cannot push the grid wider than its column. */
 const RESULTS_COLUMN: CSSProperties = { flex: "1 1 auto", minWidth: 0 };
 
+/** A wrapper that names a slot without occupying one — see `resultsHeader`. */
+const CONTENTS_BOX: CSSProperties = { display: "contents" };
+
 /* ── THE RHYTHM: ONE GAP BETWEEN BLOCKS, SAID ONCE ─────────────────────────
  *
  * This page is an assembly of BLOCKS — the query box, the breadcrumb, the
@@ -785,6 +789,16 @@ export interface SearchPageProps extends ThemeModeProp, ParseSearchStateOptions
    * page was measured on.
    */
   readonly railScrollbar?: SearchRailScrollbar;
+  /**
+   * WHAT THE FILTER PANEL'S OWN BODY PAINTS. Default `"flat"`.
+   *
+   * Handed straight to {@link FacetPanelPaneProps.railSurface}, in the column
+   * and in the phone sheet alike. `"flat"` draws the controls and no box
+   * around them (the stand's dark theme read the old ground as a 270 x 1539
+   * filled slab with no radius and no border, standing on the page ground);
+   * `"panel"` restores the raised container this page painted until now.
+   */
+  readonly railSurface?: SearchRailSurface;
   /**
    * WHERE the space between this page's blocks comes from. Default `"token"`.
    *
@@ -822,6 +836,28 @@ export interface SearchPageProps extends ThemeModeProp, ParseSearchStateOptions
    * the layout put under their thumb.
    */
   readonly stickyToolbar?: SearchToolbarPin;
+  /**
+   * PIN the results toolbar by default, on a fine pointer, at {@link railTop}.
+   * Default `true`.
+   *
+   * {@link stickyToolbar} is the same pin asked for explicitly, and it existed
+   * for a release without a single deployment turning it on — a default nobody
+   * sets is a feature nobody has. The reference pins its sort bar once a reader
+   * has scrolled into the results (REPORT §24, Surface 2) and this page now
+   * does the same without being asked:
+   *
+   *  - it pins at `railTop`, so the two columns clear the host's header by the
+   *    same edge and there is no second number to keep in step;
+   *  - it is a `@media (pointer: fine)` rule, so a phone keeps its toolbar in
+   *    flow — a pinned bar over a 390px viewport spends the fold on chrome;
+   *  - the row reserves its own height whether or not it pins, so nothing in
+   *    the feed moves when the rule engages.
+   *
+   * `stickyToolbar` still wins where it is given (it pins on every pointer, at
+   * its own offset). `false` turns the default off and leaves the row static —
+   * for a surface that draws a bar of its own over the page.
+   */
+  readonly toolbarSticky?: boolean;
   /**
    * The host's own exits from an empty result — sibling sections with their
    * counts. A SLOT for the same reason `breadcrumb` is one: walking the tree
@@ -990,8 +1026,10 @@ interface SearchPageBodyProps {
   readonly filtersLayout?: SearchFiltersLayout;
   readonly railTop?: number | string;
   readonly railScrollbar?: SearchRailScrollbar;
+  readonly railSurface?: SearchRailSurface;
   readonly blockRhythm?: SearchBlockRhythm;
   readonly stickyToolbar?: SearchToolbarPin;
+  readonly toolbarSticky?: boolean;
   readonly defaultFiltersOpen?: boolean;
   readonly filtersOpen?: boolean;
   readonly onFiltersOpenChange?: (
@@ -1178,6 +1216,9 @@ function SearchPageBody(props: SearchPageBodyProps): ReactElement {
         <FacetPanelPane
           {...(layout === "sheet" ? { heading: null } : {})}
           {...(footerBar !== undefined ? { footerBar } : {})}
+          {...(props.railSurface !== undefined
+            ? { railSurface: props.railSurface }
+            : {})}
           dictionaryMode={props.dictionaryMode ?? (layout === "sheet" ? "sheet" : "field")}
           // `??` would treat an explicit `null` ("never fold") the same as
           // "not set": `visibleGroups` uses `null` as a real value, unlike
@@ -1250,6 +1291,10 @@ function SearchPageBody(props: SearchPageBodyProps): ReactElement {
     </Flex>
   );
 
+  /* ONE OFFSET FOR BOTH COLUMNS. The rail's sticky top edge and the toolbar's
+     are the same edge — the foot of whatever chrome the host pinned above this
+     page — so `railTop` feeds both rather than the page asking for the number
+     twice and letting the two halves disagree. */
   const results = (
     <SearchResultsPane
       toolbar={toolbar}
@@ -1258,6 +1303,10 @@ function SearchPageBody(props: SearchPageBodyProps): ReactElement {
       {...(props.stickyToolbar !== undefined
         ? { stickyToolbar: props.stickyToolbar }
         : {})}
+      {...(props.toolbarSticky !== undefined
+        ? { toolbarSticky: props.toolbarSticky }
+        : {})}
+      {...(props.railTop !== undefined ? { toolbarTop: props.railTop } : {})}
       headingLevel={props.resultsHeadingLevel ?? 1}
       {...(view.render !== undefined ? { renderResults: view.render } : {})}
       {...(props.wrapResults !== undefined ? { wrapResults: props.wrapResults } : {})}
@@ -1363,7 +1412,25 @@ function SearchPageBody(props: SearchPageBodyProps): ReactElement {
           the written decision, not an oversight: a page with nothing to say
           about location says nothing rather than reserving a blank row. */}
       {props.resultsHeader !== undefined && (
-        <div data-testid="search-results-header">{props.resultsHeader}</div>
+        /* NO BOX OF ITS OWN (`display: contents`). The slot is a NODE, and a
+           node that renders nothing is indistinguishable from one that renders
+           something until React has run it — so the wrapper was mounted on the
+           prop alone and stood in this column as a 1392 x 0 element whenever
+           the host's header had nothing to say. Inside the block rhythm an
+           empty child is not free: the column's `gap` is charged on BOTH sides
+           of it, so the distance between the two real blocks around it
+           measured 64px where 32 is declared, on every feed page (owner's
+           tidiness probe on the stand).
+
+           `display: contents` generates no box at all: with nothing inside,
+           there is no flex item and no gap; with something inside, the host's
+           own element IS the column's child and takes exactly one gap. The
+           `data-testid` survives either way, and the consumer stylesheet's
+           stand-in (`[data-testid="search-results-header"]:empty{display:none}`)
+           can go. */
+        <div style={CONTENTS_BOX} data-testid="search-results-header">
+          {props.resultsHeader}
+        </div>
       )}
 
       {/* What the search is NARROWED to, above the results, each constraint
@@ -1502,8 +1569,10 @@ export function SearchPage(props: SearchPageProps): ReactElement {
     filtersLayout,
     railTop,
     railScrollbar,
+    railSurface,
     blockRhythm,
     stickyToolbar,
+    toolbarSticky,
     defaultFiltersOpen,
     filtersOpen,
     onFiltersOpenChange,
@@ -1568,8 +1637,10 @@ export function SearchPage(props: SearchPageProps): ReactElement {
           {...(filtersLayout !== undefined ? { filtersLayout } : {})}
           {...(railTop !== undefined ? { railTop } : {})}
           {...(railScrollbar !== undefined ? { railScrollbar } : {})}
+          {...(railSurface !== undefined ? { railSurface } : {})}
           {...(blockRhythm !== undefined ? { blockRhythm } : {})}
           {...(stickyToolbar !== undefined ? { stickyToolbar } : {})}
+          {...(toolbarSticky !== undefined ? { toolbarSticky } : {})}
           {...(defaultFiltersOpen !== undefined ? { defaultFiltersOpen } : {})}
           {...(filtersOpen !== undefined ? { filtersOpen } : {})}
           {...(onFiltersOpenChange !== undefined ? { onFiltersOpenChange } : {})}

package/src/default/SearchResultsPane.tsx

@@ -25,7 +25,7 @@
  *    when the answer actually has another page in some direction.
  */
 import type { CSSProperties, ReactElement, ReactNode } from "react";
-import { Flex, Typography } from "antd";
+import { Flex, Typography, theme as antdTheme } from "antd";
 import { errorCode, useT, useTPlural } from "@stapel/core";
 import {
   EmptyState,
@@ -139,6 +139,76 @@ export interface SearchToolbarPin {
   readonly top?: number | string;
 }
 
+/**
+ * The class the DEFAULT pin's rules are hung on — the media-gated half of
+ * {@link SearchResultsPaneProps.toolbarSticky}.
+ *
+ * A class and a sheet rather than an inline style, for the one reason a sheet
+ * is ever right here: the pin is `@media (pointer: fine)` and a media query
+ * cannot be said in a `style` attribute. A pinned sort row is a desktop
+ * affordance — a phone's toolbar is already one tap from the top of a short
+ * scroll, and a bar standing over a 390px viewport spends the fold on chrome
+ * the reader did not ask for (REPORT §24, Surface 2: what the reference pins
+ * is the DESKTOP feed's sort row).
+ */
+export const RESULTS_TOOLBAR_STICKY_CLASS = "stapel-search-results-toolbar-sticky";
+
+/** The custom property the default pin reads its offset from. */
+export const RESULTS_TOOLBAR_TOP_VAR = "--stapel-search-toolbar-top";
+
+/** The `href` the hoisted toolbar sheet is deduplicated by. */
+export const RESULTS_TOOLBAR_STYLE_HREF = "stapel-search-toolbar";
+
+/**
+ * The default pin's rule set.
+ *
+ * Everything {@link toolbarPinStyle} writes inline, said once in a sheet and
+ * gated on a fine pointer — the offset arrives per instance through
+ * {@link RESULTS_TOOLBAR_TOP_VAR}, which is how one static rule serves a page
+ * whose header height only the host knows. `0px` is the fallback, which is
+ * where a page with no chrome above it pins.
+ */
+export function toolbarStickyCss(): string {
+  const bar = `.${RESULTS_TOOLBAR_STICKY_CLASS}`;
+  return (
+    `@media (pointer:fine){` +
+    `${bar}{position:sticky;top:var(${RESULTS_TOOLBAR_TOP_VAR},0px);` +
+    // Over the cards, under the page's own chrome — and under antd's popups,
+    // so the sort select still opens over its own bar. Opaque, or the cards
+    // scroll THROUGH the row.
+    `z-index:1;background:${cssVar("surface")}}}`
+  );
+}
+
+/**
+ * The toolbar row's own block-size, reserved from the FIRST frame.
+ *
+ * The same discipline — and the same arithmetic — as `chipRowMinHeight`: a
+ * NUMBER OUT OF THE THEME rather than a constant, because the shared
+ * `SkinTheme` raises `controlHeight` to the 44px touch floor below the tablet
+ * breakpoint and a hard-coded reserve is then right on one surface and wrong
+ * on the other.
+ *
+ * Why a row that is already this tall states it anyway: the row's contents
+ * arrive in two frames — the count lands with the answer, and a sort select
+ * whose options are still loading measures its placeholder — so the box a
+ * pinned bar occupies must not be a consequence of what is inside it. A
+ * reserve makes the height a constant before and after the pin engages, which
+ * is what "no layout shift when it pins" means in a `position: sticky` world:
+ * the sticky box keeps its place in flow, so the only way it can move the feed
+ * is by changing its own height.
+ */
+export function toolbarRowMinHeight(controlHeight: number): number {
+  return controlHeight + spacing[1] * 2;
+}
+
+/** A CSS length from a prop that is a number of pixels or a string as written
+ * (a `var()`, a `calc()`, `"4rem"`) — the rule `railStyle` follows. */
+function toolbarTopLength(top: number | string | undefined): string {
+  if (top === undefined) return "0px";
+  return typeof top === "number" ? `${String(top)}px` : top;
+}
+
 /**
  * The controls' own line: it may not become two.
  *
@@ -598,6 +668,36 @@ export interface SearchResultsPaneProps extends ThemeModeProp {
    * pins it where it stands.
    */
   readonly stickyToolbar?: SearchToolbarPin;
+  /**
+   * PIN the toolbar row by default, on a fine pointer. Default `true`.
+   *
+   * The same argument as {@link stickyToolbar} and none of the wiring: a
+   * catalogue page is thirty cards long, the control that reorders them is at
+   * the top of it, and by the fourth row the sort is a screenful above the
+   * list it sorts. The reference pins its sort bar once a reader has scrolled
+   * into results (REPORT §24, Surface 2); this pair had the mechanism and made
+   * every host ask for it, so no deployment had it.
+   *
+   * What the default does that the explicit prop cannot: it is a `@media
+   * (pointer: fine)` rule (see {@link toolbarStickyCss}), so a phone — where
+   * a pinned bar costs a fifth of the fold and the feed is a flick long —
+   * keeps its toolbar in flow. `stickyToolbar` stays the host's own
+   * instruction and is honoured on every pointer; passing it takes this
+   * default out of play, so the two can never both be on one row.
+   *
+   * `false` leaves the row exactly where it stood: no class, no sheet, no
+   * custom property.
+   */
+  readonly toolbarSticky?: boolean;
+  /**
+   * WHERE the default pin's top edge is — the results column's half of
+   * `<SearchPage railTop>`, and the same value.
+   *
+   * A number is pixels; a string is taken as written, so
+   * `toolbarTop="var(--stapel-header-height)"` reads the height
+   * `<PublicShell>` publishes rather than restating it. Default `0`.
+   */
+  readonly toolbarTop?: number | string;
   /**
    * The category's feature schema, used ONLY to name an applied filter in the
    * empty state's exits ("Without Brand" rather than "Without vendor").
@@ -706,6 +806,34 @@ export function SearchResultsPane(props: SearchResultsPaneProps): ReactElement {
   // not, and `headingVisible` overrides either way — see that prop.
   const compactHeadingSeen = props.headingVisible ?? props.heading !== undefined;
   const toolbarPin = toolbarPinStyle(props.stickyToolbar);
+  // The chips' own height, from the theme they are drawn in — see
+  // `toolbarRowMinHeight`.
+  const { token } = antdTheme.useToken();
+  /* The DEFAULT pin, and the host's explicit one takes precedence: a row
+     carrying both would be pinned twice at two offsets, and which one wins
+     would be whichever declaration the cascade happened to resolve last. */
+  const defaultPin = props.stickyToolbar === undefined && props.toolbarSticky !== false;
+  const toolbarClass = defaultPin
+    ? `${RESULTS_TOOLBAR_CLASS} ${RESULTS_TOOLBAR_STICKY_CLASS}`
+    : RESULTS_TOOLBAR_CLASS;
+  /* The reserve is written whether or not the row pins, and that is the
+     point: a height that only exists while pinned is a height that changes
+     when the pin engages. */
+  const toolbarBox: CSSProperties = {
+    minBlockSize: toolbarRowMinHeight(token.controlHeight),
+    ...(defaultPin
+      ? ({ [RESULTS_TOOLBAR_TOP_VAR]: toolbarTopLength(props.toolbarTop) } as CSSProperties)
+      : {}),
+    ...toolbarPin,
+  };
+  /* Hoisted and deduped by `href` (React 19), and not mounted at all when
+     nothing carries the class — a sheet whose only selector is a class no
+     node has is dead weight in the document. */
+  const toolbarSheet = defaultPin ? (
+    <style href={RESULTS_TOOLBAR_STYLE_HREF} precedence="default">
+      {toolbarStickyCss()}
+    </style>
+  ) : null;
   const columnRules =
     props.columns === undefined || props.layout === "list"
       ? null
@@ -739,6 +867,7 @@ export function SearchResultsPane(props: SearchResultsPaneProps): ReactElement {
         ...(maxWidth !== null ? { maxWidth } : {}),
       }}
     >
+      {toolbarSheet}
       <SearchResults {...(props.enabled !== undefined ? { enabled: props.enabled } : {})}>
         {(bag) => (
           <Flex
@@ -773,9 +902,9 @@ export function SearchResultsPane(props: SearchResultsPaneProps): ReactElement {
                   {props.heading ?? t(SEARCH_I18N_KEYS.resultsTitle)}
                 </Typography.Title>
                 <div
-                  className={RESULTS_TOOLBAR_CLASS}
+                  className={toolbarClass}
                   data-testid="search-results-toolbar"
-                  style={{ ...COMPACT_TOOLBAR, ...toolbarPin }}
+                  style={{ ...COMPACT_TOOLBAR, ...toolbarBox }}
                 >
                   {props.toolbar}
                 </div>
@@ -800,9 +929,9 @@ export function SearchResultsPane(props: SearchResultsPaneProps): ReactElement {
                 <Flex
                   align="center"
                   gap={spacing[3]}
-                  className={RESULTS_TOOLBAR_CLASS}
+                  className={toolbarClass}
                   data-testid="search-results-toolbar"
-                  style={{ ...TOOLBAR_ROW, ...toolbarPin }}
+                  style={{ ...TOOLBAR_ROW, ...toolbarBox }}
                 >
                   {/* The elastic half, present whether or not there is a
                       count in it — see TOOLBAR_LEAD. It is what holds the