@stapel/search-react 0.38.0 → 0.40.0

package/src/default/PartitionChips.tsx

@@ -57,7 +57,7 @@ import type {
 } from "react";
 import { Button, Segmented, Typography } from "antd";
 import { useT } from "@stapel/core";
-import { radii, spacing } from "@stapel/tokens";
+import { cssVar, radii, spacing } from "@stapel/tokens";
 import { SEARCH_I18N_KEYS } from "../i18n/keys.js";
 
 /** One child of a partitioned category. `path` is the slash-joined id path
@@ -81,10 +81,48 @@ export interface PartitionChild {
    *
    * Omit it and nothing is drawn — an absent count is not a zero, and a
    * section whose total nobody asked for must not be captioned "0".
+   *
+   * Ignored on a POINTER — see {@link linked}.
    */
   readonly count?: number;
+  /**
+   * This entry is a POINTER to another category, not a section of THIS
+   * template (`CategoryChild.linked`, stapel-categories 0.22.0).
+   *
+   * A partition is one template split by a value its children's names express
+   * — new / used / for rent. A pointer is a different branch of the catalogue
+   * that an operator drew among these children so a person can reach it from
+   * here. It is not one of the halves, it does not narrow this feed, and it
+   * has NO count of its own: the number beside it is the number of listings in
+   * somebody else's category, which is why the storefront's
+   * `/c/transport-avtomobili` read `All | New 0 | Used 3 | Car rental 0`
+   * — two of those zeroes were a partition's real emptiness and one was a
+   * question nobody had asked.
+   *
+   * So a linked entry never becomes a radio, never carries a count, and never
+   * matches {@link PartitionChipsProps.value} — a stale address naming one
+   * leaves the row on its parent chip rather than lighting a pointer up as the
+   * chosen section. It is drawn AFTER the partitions as a link, or not at all:
+   * see {@link PartitionChipsProps.linkedChildren}.
+   */
+  readonly linked?: boolean;
+  /**
+   * WHERE a pointer leads — the target's own address, as the host builds it
+   * (`/c/<slug>`). Read only on a {@link linked} entry.
+   *
+   * The pointer's `path` is an id path into the CATALOGUE, and following it
+   * as a `category` filter is exactly the confusion this shape exists to end:
+   * a pointer is a destination, so the chip is a real `<a href>` that
+   * navigates, with no `f=` and no state change on this page. A linked entry
+   * with no `href` is not drawn — a link with no address is not a link.
+   */
+  readonly href?: string;
 }
 
+/** What the row does with a POINTER among its children — see
+ * {@link PartitionChipsProps.linkedChildren}. */
+export type PartitionLinkedChildren = "chip" | "none";
+
 export interface PartitionChipsProps {
   /** The children, in the order the catalogue declares them. */
   readonly items: readonly PartitionChild[];
@@ -109,6 +147,24 @@ export interface PartitionChipsProps {
    * browser's own `input[type=radio]` in `segmented`.
    */
   readonly variant?: "chips" | "segmented";
+  /**
+   * What the row does with a POINTER among its children. Default `"chip"`.
+   *
+   *  - `"chip"` — drawn AFTER the partitions as an outlined link chip: the
+   *    target's name and a trailing arrow, no count, a real `<a href>` that
+   *    navigates to the target rather than filtering this page. Outlined and
+   *    separate on purpose — it is not one of the choices, and a control that
+   *    looks like the others while doing something else is worse than one
+   *    that looks different;
+   *  - `"none"` — not drawn here at all, for a page whose TILE STAGE already
+   *    shows the same pointer as a tile. One destination offered twice, a row
+   *    apart, is a person wondering what the difference is.
+   *
+   * Either way a pointer is out of the partition semantics: no radio, no
+   * count, never the chosen section. This prop only decides whether the link
+   * is offered in this row.
+   */
+  readonly linkedChildren?: PartitionLinkedChildren;
 }
 
 /**
@@ -127,6 +183,23 @@ const ROW: CSSProperties = {
   gap: spacing[2],
 };
 
+/**
+ * The pointer chip: the partition pill's geometry, OUTLINED — a hairline and
+ * no fill, so it reads as a way out of this page rather than as one of the
+ * choices on it.
+ */
+const POINTER_CHIP: CSSProperties = {
+  display: "inline-flex",
+  alignItems: "center",
+  gap: spacing[1],
+  borderRadius: radii.full,
+  border: `1px solid ${cssVar("border")}`,
+  paddingBlock: spacing[1],
+  paddingInline: spacing[3],
+  color: cssVar("text"),
+  lineHeight: 1.4,
+};
+
 /** The keys that move the choice, in both variants. */
 const ARROW_KEYS = new Set(["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown"]);
 
@@ -189,6 +262,68 @@ function ChildLabel(props: { readonly child: PartitionChild }): ReactElement {
   );
 }
 
+/**
+ * The pointer chip's trailing mark — an arrow leaving to the right, the one
+ * glyph that says "this goes somewhere else" rather than "this narrows what
+ * is here".
+ *
+ * Drawn inline in `currentColor`, like every other glyph in this skin
+ * (`ChevronGlyph`, `PinGlyph`, `SlidersGlyph`): this package ships no icon set
+ * and one arrow is not the reason to take one. `aria-hidden`, because the
+ * chip's accessible name is the target's own — a screen reader announcing an
+ * arrow after it would be reading the decoration.
+ */
+function PointerGlyph(): ReactElement {
+  return (
+    <svg
+      aria-hidden="true"
+      focusable="false"
+      viewBox="0 0 16 16"
+      width="1em"
+      height="1em"
+      style={{ flex: "0 0 auto" }}
+    >
+      <path
+        d="M6 3.5 10.5 8 6 12.5"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="1.75"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+/**
+ * The pointers, after the partitions and outside the radiogroup.
+ *
+ * OUTSIDE is not a layout preference: a `role="radiogroup"` whose children
+ * include a link announces a choice that has an option you cannot choose. The
+ * pointers are their own row, and each one is an ordinary anchor — a
+ * middle-click, a ctrl/cmd-click and "open in a new tab" all work, which is
+ * the whole difference between a destination and a filter.
+ */
+function PointerChips(props: {
+  readonly items: readonly PartitionChild[];
+}): ReactElement {
+  return (
+    <div style={ROW} data-testid="partition-links">
+      {props.items.map((item) => (
+        <a
+          key={item.path}
+          href={item.href}
+          style={POINTER_CHIP}
+          data-testid={`partition-link-${item.path}`}
+        >
+          {item.name}
+          <PointerGlyph />
+        </a>
+      ))}
+    </div>
+  );
+}
+
 /** The row's cells, as `[value, label]` — the parent first, then the
  * children in catalogue order. */
 function cells(
@@ -206,8 +341,19 @@ function cells(
 export function PartitionChips(props: PartitionChipsProps): ReactElement {
   const t = useT();
   const row = useRef<HTMLDivElement>(null);
+  /* THE TWO KINDS OF CHILD, SPLIT ONCE. Everything below the split — the
+     cells, the roving stop, the value lookup, the arrow keys — sees only the
+     SECTIONS, which is what keeps a pointer out of the partition's semantics
+     rather than out of one rendering of them. */
+  const sections = props.items.filter((item) => item.linked !== true);
+  const pointers =
+    props.linkedChildren === "none"
+      ? []
+      : props.items.filter(
+          (item) => item.linked === true && item.href !== undefined
+        );
   const options = cells(
-    props.items,
+    sections,
     props.allLabel ?? t(SEARCH_I18N_KEYS.partitionAll)
   );
 
@@ -282,6 +428,20 @@ export function PartitionChips(props: PartitionChipsProps): ReactElement {
 
   const name = props.label ?? t(SEARCH_I18N_KEYS.partitionLabel);
 
+  /* The pointers ride BESIDE whichever control was drawn, never inside it —
+     see `PointerChips`. A fragment rather than a wrapper element: this row is
+     mounted in a vertical `<Flex>` that already spaces its children, and an
+     extra box here would take that gap away from the row it wraps. */
+  const withPointers = (control: ReactElement): ReactElement =>
+    pointers.length === 0 ? (
+      control
+    ) : (
+      <>
+        {control}
+        <PointerChips items={pointers} />
+      </>
+    );
+
   if (props.variant === "segmented") {
     // antd's own control: `.ant-segmented`, one `input[type=radio]` per cell
     // under a shared `name`, the selected cell's `checked`, and the arrow keys
@@ -289,7 +449,7 @@ export function PartitionChips(props: PartitionChipsProps): ReactElement {
     // `aria-label` reach the root because the component spreads what it is
     // given over its own defaults (which are `radiogroup` and the string
     // "segmented control").
-    return (
+    return withPointers(
       <Segmented
         block
         size="small"
@@ -328,7 +488,7 @@ export function PartitionChips(props: PartitionChipsProps): ReactElement {
     );
   }
 
-  return (
+  return withPointers(
     <div
       style={ROW}
       data-variant="chips"

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

package/src/default/index.ts

@@ -86,7 +86,12 @@ export {
   RESULTS_COLUMNS_CLASS,
   RESULTS_COLUMNS_STYLE_HREF,
   RESULTS_TOOLBAR_CLASS,
+  RESULTS_TOOLBAR_STICKY_CLASS,
+  RESULTS_TOOLBAR_STYLE_HREF,
+  RESULTS_TOOLBAR_TOP_VAR,
   resultsColumnsCss,
+  toolbarRowMinHeight,
+  toolbarStickyCss,
 } from "./SearchResultsPane.js";
 export type {
   ResultsColumns,
@@ -151,6 +156,9 @@ export type {
   FacetOptionNode,
 } from "./FacetGroupControl.js";
 
+export { SWATCH_SIZE, facetSwatch, isColorAxis, swatchColor } from "./swatches.js";
+export type { ColorAxisLike } from "./swatches.js";
+
 // ── the browse surfaces a storefront PLACES (this pair does not lay them
 //    out: where a popular-values block or a partition row belongs on a
 //    category page is the page's decision) ──────────────────────────────────
@@ -167,7 +175,11 @@ export {
 } from "./PopularValues.js";
 export type { PopularValuesProps } from "./PopularValues.js";
 export { PartitionChips } from "./PartitionChips.js";
-export type { PartitionChild, PartitionChipsProps } from "./PartitionChips.js";
+export type {
+  PartitionChild,
+  PartitionChipsProps,
+  PartitionLinkedChildren,
+} from "./PartitionChips.js";
 
 export {
   FacetPanelPane,
@@ -179,6 +191,7 @@ export type {
   FacetPanelPaneProps,
   CategoryFilterSlotProps,
   GeoFilterSlotProps,
+  SearchRailSurface,
 } from "./FacetPanelPane.js";
 
 export { RankingDisclosurePane, RANKING_MAX_WIDTH } from "./RankingDisclosurePane.js";