@stapel/search-react 0.44.0 → 0.45.0

package/CHANGELOG.md

@@ -1,5 +1,61 @@
 # @stapel/search-react
 
+## 0.45.0
+
+### Minor Changes
+
+- 26b513c: The popular-values band uses the width it is given.
+
+  Measured on the live storefront's `/c/transport` at 1440 (headless Chromium):
+  the results column is 1088px and the band's columns box drew **377px** of it —
+  three columns of a make and its count — leaving 711px of white and stacking
+  twelve values four rows deep.
+
+  Two causes, compounding:
+
+  - `inline-size: fit-content` sized the box to its WORDS, so the pane's width
+    was never used;
+  - the container-query ladder asked for `breakpoints.desktop` (1200px) before
+    granting a fourth column, and this block is the window less a 280px rail less
+    the gap — 1088px at 1440. **The top rung could never fire.** The rungs were
+    window-scale numbers measuring a container that is never window-sized, which
+    is the exact mistake the module's own doc argued a media query would make.
+
+  `columns="responsive"` is now native multicol over a column MEASURE — the same
+  mechanism the expanded band next door already uses. The element answers "how
+  many columns" from its own width, with no container query, no rungs and no
+  hoisted sheet.
+
+  `POPULAR_VALUE_COLUMN_WIDTH` is 150 (was 200), swept in a real browser over the
+  live twelve makes and a worst case of the longest make with a four-digit count:
+  200/170/160 all give 4 columns and 3 rows in that pane; 150 gives 6 and 2. The
+  used column is 155px there and never below 152px at any width swept, so nothing
+  wraps — the old claim that a value wraps under its own number below 200 does not
+  hold at the default type step.
+
+  Before and after, with the literal styles the component emits:
+
+  | pane   | before                      | after                        |
+  | ------ | --------------------------- | ---------------------------- |
+  | 1088px | 3 cols, 4 rows, 666px white | **6 cols, 2 rows, no white** |
+  | 840px  | 3 cols, 4 rows, 418px white | 4 cols, 3 rows, no white     |
+  | 600px  | 3 cols, 4 rows, 178px white | 3 cols, 4 rows, no white     |
+  | 380px  | 3 cols, 5 rows (cramped)    | 2 cols, 6 rows               |
+
+  The columns box halves, 68px to 34px.
+
+  The numeric arm is untouched: a host that names a count still gets that many
+  words-wide columns, still clamped by `POPULAR_VALUES_MAX_COLUMNS`. That ceiling
+  now governs the numeric arm only — the responsive arm has no count to cap and
+  needs none, because the measure is the ceiling: no pane, however wide, can
+  produce a column narrower than a value and its count.
+
+  REMOVED, and nothing outside this package imported them: `popularValuesLadderCss`,
+  `POPULAR_VALUES_CLASS`, `POPULAR_VALUES_LADDER`, `POPULAR_VALUES_STYLE_HREF`.
+  ADDED: `POPULAR_VALUES_COLUMN_GAP`, half of the arithmetic that decides how many
+  columns a pane buys, so a host sizing a reservation for this block need not
+  re-measure it.
+
 ## 0.44.0
 
 ### Minor Changes

package/dist/default/PopularValues.d.ts

@@ -30,58 +30,60 @@ import type { ReactElement, ReactNode } from "react";
 import type { FacetGroup, FacetOption } from "../state/facets.js";
 /** How many values the block prints before the link into the full control. */
 export declare const POPULAR_VALUES_LIMIT = 12;
-/** How many columns the list flows into. Three fills a desktop content column
- * without turning a make into a two-line wrap. */
+/** How many columns the list flows into when a host names a number. Three
+ * fills a desktop content column without turning a make into a two-line wrap. */
 export declare const POPULAR_VALUES_COLUMNS = 3;
 /**
- * The ceiling on columns, whatever a host or the ladder asks for.
+ * The ceiling on columns a HOST may ask for.
  *
- * Past four the block stops being a table of contents and becomes a grid of
- * two-word cells: each column is one make and one number, and a fifth column
- * on a 1100px results pane puts 60px of air between «Toyota 4» and the next
- * make. Four is where the density still reads as a list.
+ * Past four a block whose width is fixed by its words stops being a table of
+ * contents and becomes a grid of two-word cells: each column is one make and
+ * one number, and a fifth column puts 60px of air between «Toyota 4» and the
+ * next make. Four is where that density still reads as a list.
+ *
+ * It governs the numeric arm ONLY, and since 0.45 that is the whole of its
+ * job. The responsive arm has no count to cap and needs none — see
+ * {@link POPULAR_VALUE_COLUMN_WIDTH}: there the MEASURE is the ceiling, so a
+ * column can never be narrower than a value and its count however many of them
+ * the pane holds.
  */
 export declare const POPULAR_VALUES_MAX_COLUMNS = 4;
 /**
- * The width one column of this block needs: a make and its count, on one line,
- * at the default type step. «Ford 1 204» is the measure; below it a value
- * wraps under its own number and the block stops being scannable.
- */
-export declare const POPULAR_VALUE_COLUMN_WIDTH = 200;
-/** The class the container query is hung on. */
-export declare const POPULAR_VALUES_CLASS = "stapel-popular-values";
-/** The `href` the hoisted ladder sheet is deduplicated by (React 19). */
-export declare const POPULAR_VALUES_STYLE_HREF = "stapel-popular-values";
-/**
- * The ladder `columns="responsive"` climbs — one rung per column, by the width
- * of the BLOCK rather than of the window.
+ * The minimum measure one column of this block needs, and the whole of the
+ * responsive arm's layout input.
+ *
+ * `column-width` is a MINIMUM, not a width: the browser fits as many columns
+ * of at least this measure as the element's own width allows and then widens
+ * them to fill it. That is what makes the number a ceiling on density as well
+ * as a floor on legibility — no pane, however wide, can produce a column
+ * narrower than this.
+ *
+ * ── 150, and it is measured rather than reasoned ──────────────────────────
+ *
+ * It was 200, declared as the measure «Ford 1 204» needs. Swept in a real
+ * browser over the live twelve makes and over a worst case of the longest make
+ * on the stand with a four-digit count, at this gap:
  *
- * The container is what decides, and it has to be: this block sits in the
- * results column, which on a 1440px desktop is the window minus a 280px rail
- * minus the gap. A media query would give it four columns at a width it never
- * has, and one column inside a narrow host container that happens to sit on a
- * wide screen. `container-type: inline-size` plus `@container` asks the only
- * question that has an answer here — how wide is this block.
+ *   200 → 4 columns in the storefront's 1088px pane, 3 rows
+ *   170 → 4 columns, 3 rows
+ *   160 → 4 columns, 3 rows
+ *   150 → 6 columns, 2 rows
  *
- * The rungs: one column while the block is narrower than two of
- * {@link POPULAR_VALUE_COLUMN_WIDTH}, then the two token breakpoints for the
- * third and fourth. `tablet` and `desktop` are `@stapel/tokens`' own numbers,
- * and using them here is the same statement they make everywhere else — this
- * is where a layout of this density gains a column.
+ * 150 is the knee, and nothing wraps at it: because the browser widens the
+ * columns to fill, the USED column is 155px in that pane and never below 152px
+ * at any width swept. The old claim that a value wraps under its own number
+ * below 200 does not hold at the default type step.
  */
-export declare const POPULAR_VALUES_LADDER: readonly {
-    readonly minInlineSize: number;
-    readonly columns: number;
-}[];
+export declare const POPULAR_VALUE_COLUMN_WIDTH = 150;
 /**
- * The ladder as CSS. One `@container` rule per rung, ascending, so the widest
- * matching rung is the one that wins by ordinary cascade order.
+ * The gutter between columns — one step up the scale from the row's own, so a
+ * new column reads as a column rather than as a wrapped line.
  *
- * Emitted as a hoisted `<style>` rather than an inline style because a
- * container query is unreachable from one — the same reason `<SearchPage>`
- * hoists its rail sheet.
+ * Exported because it is half of the arithmetic that decides how many columns
+ * a pane produces (`floor((available + gap) / (width + gap))`), and a host
+ * sizing a reservation for this block should not have to re-measure it.
  */
-export declare function popularValuesLadderCss(): string;
+export declare const POPULAR_VALUES_COLUMN_GAP: number;
 /** The busiest values of the group, count-descending, capped. */
 export declare function popularOptions(group: FacetGroup, limit?: number): readonly FacetOption[];
 export interface PopularValuesProps {
@@ -97,10 +99,12 @@ export interface PopularValuesProps {
     /**
      * How many columns. Default {@link POPULAR_VALUES_COLUMNS}.
      *
-     * `"responsive"` climbs {@link POPULAR_VALUES_LADDER} by the width of the
-     * BLOCK — 1, 2, 3, 4 — instead of taking one number for every surface. The
-     * numeric form stays, and stays the default: a host that has already decided
-     * its layout should not have that decision taken back by a query.
+     * `"responsive"` hands the question to the ELEMENT: native multicol over
+     * {@link POPULAR_VALUE_COLUMN_WIDTH} fits as many columns as this block's own
+     * width allows, at every width, with no rungs to keep in step with a layout
+     * this component cannot see. The numeric form stays, and stays the default:
+     * a host that has already decided its layout should not have that decision
+     * taken back.
      */
     readonly columns?: number | "responsive";
     /** The block's heading. Defaults to the group's own label; `null` draws

package/dist/default/PopularValues.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PopularValues.d.ts","sourceRoot":"","sources":["../../src/default/PopularValues.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,OAAO,KAAK,EAAiB,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AASpE,OAAO,KAAK,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAGlE,8EAA8E;AAC9E,eAAO,MAAM,oBAAoB,KAAK,CAAC;AAEvC;kDACkD;AAClD,eAAO,MAAM,sBAAsB,IAAI,CAAC;AAExC;;;;;;;GAOG;AACH,eAAO,MAAM,0BAA0B,IAAI,CAAC;AAE5C;;;;GAIG;AACH,eAAO,MAAM,0BAA0B,MAAM,CAAC;AAE9C,gDAAgD;AAChD,eAAO,MAAM,oBAAoB,0BAA0B,CAAC;AAE5D,yEAAyE;AACzE,eAAO,MAAM,yBAAyB,0BAA0B,CAAC;AAEjE;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,qBAAqB,EAAE,SAAS;IAC3C,QAAQ,CAAC,aAAa,EAAE,MAAM,CAAC;IAC/B,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC;CAC1B,EAIA,CAAC;AAEF;;;;;;;GAOG;AACH,wBAAgB,sBAAsB,IAAI,MAAM,CAW/C;AASD,iEAAiE;AACjE,wBAAgB,cAAc,CAC5B,KAAK,EAAE,UAAU,EACjB,KAAK,GAAE,MAA6B,GACnC,SAAS,WAAW,EAAE,CAIxB;AA2CD,MAAM,WAAW,kBAAkB;IACjC,wEAAwE;IACxE,QAAQ,CAAC,KAAK,EAAE,UAAU,CAAC;IAC3B;wDACoD;IACpD,QAAQ,CAAC,OAAO,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxD,0EAA0E;IAC1E,QAAQ,CAAC,MAAM,CAAC,EAAE,OAAO,CAAC;IAC1B,6DAA6D;IAC7D,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IACxB;;;;;;;OAOG;IACH,QAAQ,CAAC,OAAO,CAAC,EAAE,MAAM,GAAG,YAAY,CAAC;IACzC;8DAC0D;IAC1D,QAAQ,CAAC,OAAO,CAAC,EAAE,SAAS,CAAC;IAC7B;2CACuC;IACvC,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;CACjC;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,GAAG,YAAY,GAAG,IAAI,CAsF5E"}
+{"version":3,"file":"PopularValues.d.ts","sourceRoot":"","sources":["../../src/default/PopularValues.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,OAAO,KAAK,EAAiB,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AASpE,OAAO,KAAK,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAGlE,8EAA8E;AAC9E,eAAO,MAAM,oBAAoB,KAAK,CAAC;AAEvC;iFACiF;AACjF,eAAO,MAAM,sBAAsB,IAAI,CAAC;AAExC;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,0BAA0B,IAAI,CAAC;AAE5C;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,eAAO,MAAM,0BAA0B,MAAM,CAAC;AAE9C;;;;;;;GAOG;AACH,eAAO,MAAM,yBAAyB,EAAE,MAAmB,CAAC;AAS5D,iEAAiE;AACjE,wBAAgB,cAAc,CAC5B,KAAK,EAAE,UAAU,EACjB,KAAK,GAAE,MAA6B,GACnC,SAAS,WAAW,EAAE,CAIxB;AAkED,MAAM,WAAW,kBAAkB;IACjC,wEAAwE;IACxE,QAAQ,CAAC,KAAK,EAAE,UAAU,CAAC;IAC3B;wDACoD;IACpD,QAAQ,CAAC,OAAO,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxD,0EAA0E;IAC1E,QAAQ,CAAC,MAAM,CAAC,EAAE,OAAO,CAAC;IAC1B,6DAA6D;IAC7D,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IACxB;;;;;;;;;OASG;IACH,QAAQ,CAAC,OAAO,CAAC,EAAE,MAAM,GAAG,YAAY,CAAC;IACzC;8DAC0D;IAC1D,QAAQ,CAAC,OAAO,CAAC,EAAE,SAAS,CAAC;IAC7B;2CACuC;IACvC,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;CACjC;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,GAAG,YAAY,GAAG,IAAI,CA4E5E"}

package/dist/default/PopularValues.js

@@ -1,72 +1,65 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Button, Flex, Typography } from "antd";
 import { useT } from "@stapel/core";
-import { breakpoints, spacing } from "@stapel/tokens";
+import { spacing } from "@stapel/tokens";
 import { POINTER_FOCUS, POINTER_FOCUS_STYLE_HREF, pointerFocusCss, } from "./focusRing.js";
 import { SEARCH_I18N_KEYS } from "../i18n/keys.js";
 /** How many values the block prints before the link into the full control. */
 export const POPULAR_VALUES_LIMIT = 12;
-/** How many columns the list flows into. Three fills a desktop content column
- * without turning a make into a two-line wrap. */
+/** How many columns the list flows into when a host names a number. Three
+ * fills a desktop content column without turning a make into a two-line wrap. */
 export const POPULAR_VALUES_COLUMNS = 3;
 /**
- * The ceiling on columns, whatever a host or the ladder asks for.
+ * The ceiling on columns a HOST may ask for.
  *
- * Past four the block stops being a table of contents and becomes a grid of
- * two-word cells: each column is one make and one number, and a fifth column
- * on a 1100px results pane puts 60px of air between «Toyota 4» and the next
- * make. Four is where the density still reads as a list.
+ * Past four a block whose width is fixed by its words stops being a table of
+ * contents and becomes a grid of two-word cells: each column is one make and
+ * one number, and a fifth column puts 60px of air between «Toyota 4» and the
+ * next make. Four is where that density still reads as a list.
+ *
+ * It governs the numeric arm ONLY, and since 0.45 that is the whole of its
+ * job. The responsive arm has no count to cap and needs none — see
+ * {@link POPULAR_VALUE_COLUMN_WIDTH}: there the MEASURE is the ceiling, so a
+ * column can never be narrower than a value and its count however many of them
+ * the pane holds.
  */
 export const POPULAR_VALUES_MAX_COLUMNS = 4;
 /**
- * The width one column of this block needs: a make and its count, on one line,
- * at the default type step. «Ford 1 204» is the measure; below it a value
- * wraps under its own number and the block stops being scannable.
- */
-export const POPULAR_VALUE_COLUMN_WIDTH = 200;
-/** The class the container query is hung on. */
-export const POPULAR_VALUES_CLASS = "stapel-popular-values";
-/** The `href` the hoisted ladder sheet is deduplicated by (React 19). */
-export const POPULAR_VALUES_STYLE_HREF = "stapel-popular-values";
-/**
- * The ladder `columns="responsive"` climbs — one rung per column, by the width
- * of the BLOCK rather than of the window.
+ * The minimum measure one column of this block needs, and the whole of the
+ * responsive arm's layout input.
+ *
+ * `column-width` is a MINIMUM, not a width: the browser fits as many columns
+ * of at least this measure as the element's own width allows and then widens
+ * them to fill it. That is what makes the number a ceiling on density as well
+ * as a floor on legibility — no pane, however wide, can produce a column
+ * narrower than this.
+ *
+ * ── 150, and it is measured rather than reasoned ──────────────────────────
+ *
+ * It was 200, declared as the measure «Ford 1 204» needs. Swept in a real
+ * browser over the live twelve makes and over a worst case of the longest make
+ * on the stand with a four-digit count, at this gap:
  *
- * The container is what decides, and it has to be: this block sits in the
- * results column, which on a 1440px desktop is the window minus a 280px rail
- * minus the gap. A media query would give it four columns at a width it never
- * has, and one column inside a narrow host container that happens to sit on a
- * wide screen. `container-type: inline-size` plus `@container` asks the only
- * question that has an answer here — how wide is this block.
+ *   200 → 4 columns in the storefront's 1088px pane, 3 rows
+ *   170 → 4 columns, 3 rows
+ *   160 → 4 columns, 3 rows
+ *   150 → 6 columns, 2 rows
  *
- * The rungs: one column while the block is narrower than two of
- * {@link POPULAR_VALUE_COLUMN_WIDTH}, then the two token breakpoints for the
- * third and fourth. `tablet` and `desktop` are `@stapel/tokens`' own numbers,
- * and using them here is the same statement they make everywhere else — this
- * is where a layout of this density gains a column.
+ * 150 is the knee, and nothing wraps at it: because the browser widens the
+ * columns to fill, the USED column is 155px in that pane and never below 152px
+ * at any width swept. The old claim that a value wraps under its own number
+ * below 200 does not hold at the default type step.
  */
-export const POPULAR_VALUES_LADDER = [
-    { minInlineSize: POPULAR_VALUE_COLUMN_WIDTH * 2, columns: 2 },
-    { minInlineSize: breakpoints.tablet, columns: 3 },
-    { minInlineSize: breakpoints.desktop, columns: 4 },
-];
+export const POPULAR_VALUE_COLUMN_WIDTH = 150;
 /**
- * The ladder as CSS. One `@container` rule per rung, ascending, so the widest
- * matching rung is the one that wins by ordinary cascade order.
+ * The gutter between columns — one step up the scale from the row's own, so a
+ * new column reads as a column rather than as a wrapped line.
  *
- * Emitted as a hoisted `<style>` rather than an inline style because a
- * container query is unreachable from one — the same reason `<SearchPage>`
- * hoists its rail sheet.
+ * Exported because it is half of the arithmetic that decides how many columns
+ * a pane produces (`floor((available + gap) / (width + gap))`), and a host
+ * sizing a reservation for this block should not have to re-measure it.
  */
-export function popularValuesLadderCss() {
-    const block = `.${POPULAR_VALUES_CLASS}`;
-    return [
-        `${block}{container-type:inline-size}`,
-        `${block}>[data-popular-columns]{column-count:1}`,
-        ...POPULAR_VALUES_LADDER.map((rung) => `@container (min-width: ${String(rung.minInlineSize)}px)` +
-            `{${block}>[data-popular-columns]{column-count:${String(rung.columns)}}}`),
-    ].join("\n");
-}
+export const POPULAR_VALUES_COLUMN_GAP = spacing[6];
 /** A value with no evidence behind it is not a popular value. Uncounted
  * options carry `count: null` and are dropped here rather than printed with a
  * blank where the number belongs — the block IS the numbers. */
@@ -80,32 +73,55 @@ export function popularOptions(group, limit = POPULAR_VALUES_LIMIT) {
         .slice(0, limit);
 }
 /**
- * The columns box: as wide as its WORDS, and no wider.
+ * The columns box, in its two arms.
+ *
+ * ── The responsive arm: a block, and a MEASURE ────────────────────────────
+ *
+ * `column-width` asks the element's own width how many columns fit. That is
+ * the whole mechanism — no container query, no rungs, no hoisted sheet, and no
+ * number that has to be kept in step with a layout this component cannot see.
+ * It is also what the expanded band next door already does, so the two arms of
+ * one control stop answering "how many columns" two different ways.
+ *
+ * What it replaced was a container-query ladder whose rungs were the token
+ * WINDOW breakpoints — and this block is the window less a 280px rail less the
+ * gap, so at 1440 it is 1088px wide and the rung that grants a fourth column
+ * (1200px) could never fire. The ladder's own doc argued that a media query
+ * would be wrong here for precisely that reason, and then used the window's
+ * numbers to measure the container.
+ *
+ * `inline-size: fit-content` is deliberately NOT here, and its absence is
+ * load-bearing twice over. It sized the box to its words — 377px of a 1088px
+ * pane on the live storefront, 711px of white beside twelve values stacked
+ * four deep — and it is measurably incompatible with a column measure: set
+ * together, the box collapses to a single column. The defect `fit-content` was
+ * added for (three ~360px columns each holding «Chery 5») cannot arise here,
+ * because a column is never wider than the pane divided by however many
+ * {@link POPULAR_VALUE_COLUMN_WIDTH} fit in it.
  *
- * Multi-column layout divides the container, so three columns of a block that
- * is handed the whole results pane are three ~360px columns holding «Chery 5»
- * — which on the storefront printed a make, then 300px of nothing, then the
- * next make. The owner read it as broken, and it is: nothing about this block
- * wants the pane's width, it wants its own.
+ * `column-fill: balance` spreads the rows evenly over the columns the width
+ * produces, rather than filling the first column to the box's block-size.
  *
- * `inline-size: fit-content` is the whole fix. A multi-column box's max-content
- * size is `columns × (the widest item) + gaps` — exactly the block's natural
- * measure — and `fit-content` takes that unless the available space is
- * smaller, in which case the columns shrink instead of overflowing. The box
- * stays a block, so it stays flush with the pane's leading edge; the ladder in
- * the sheet still decides HOW MANY columns, and each one is now sized by the
- * longest make in it.
+ * ── The numeric arm: unchanged, words-wide ────────────────────────────────
  *
- * The gap is one step up the scale from the row's own: at content width the
- * columns sit close enough that the old 16px read as a wrapped line rather
- * than as a new column.
+ * A host that names a number has decided its own layout, and a count divides
+ * the container — so three columns of a box handed the whole results pane are
+ * three ~360px columns holding «Chery 5», a make and then 300px of nothing.
+ * `fit-content` is the cure there and stays: the box takes its natural measure
+ * (`columns × widest item + gaps`) unless the space is smaller, in which case
+ * the columns shrink rather than overflow.
  */
 function COLUMNS(count) {
+    if (count === undefined) {
+        return {
+            columnWidth: POPULAR_VALUE_COLUMN_WIDTH,
+            columnGap: POPULAR_VALUES_COLUMN_GAP,
+            columnFill: "balance",
+        };
+    }
     return {
-        // The rungs live in the sheet; an inline `column-count` would win against
-        // every one of them, so the responsive arm states none.
-        ...(count === undefined ? {} : { columnCount: count }),
-        columnGap: spacing[6],
+        columnCount: count,
+        columnGap: POPULAR_VALUES_COLUMN_GAP,
         inlineSize: "fit-content",
         maxInlineSize: "100%",
     };
@@ -127,7 +143,7 @@ export function PopularValues(props) {
     if (options.length === 0)
         return null;
     const responsive = props.columns === "responsive";
-    return (_jsxs(Flex, { vertical: true, gap: spacing[2], ...(responsive ? { className: POPULAR_VALUES_CLASS } : {}), "data-testid": `popular-values-${group.slug}`, "data-label-source": group.labelSource, "data-columns": responsive ? "responsive" : String(props.columns ?? POPULAR_VALUES_COLUMNS), children: [_jsx("style", { href: POINTER_FOCUS_STYLE_HREF, precedence: "default", children: pointerFocusCss() }), responsive && (_jsx("style", { href: POPULAR_VALUES_STYLE_HREF, precedence: "default", children: popularValuesLadderCss() })), props.heading !== null && (_jsx(Typography.Text, { strong: true, children: props.heading ?? group.label })), _jsx("div", { ...(responsive ? { "data-popular-columns": "" } : {}), "data-testid": `popular-columns-${group.slug}`, style: COLUMNS(responsive
+    return (_jsxs(Flex, { vertical: true, gap: spacing[2], "data-testid": `popular-values-${group.slug}`, "data-label-source": group.labelSource, "data-columns": responsive ? "responsive" : String(props.columns ?? POPULAR_VALUES_COLUMNS), children: [_jsx("style", { href: POINTER_FOCUS_STYLE_HREF, precedence: "default", children: pointerFocusCss() }), props.heading !== null && (_jsx(Typography.Text, { strong: true, children: props.heading ?? group.label })), _jsx("div", { "data-testid": `popular-columns-${group.slug}`, style: COLUMNS(responsive
                     ? undefined
                     : Math.min(props.columns ?? POPULAR_VALUES_COLUMNS, POPULAR_VALUES_MAX_COLUMNS)), children: options.map((option) => (_jsxs("div", { style: ROW, children: [_jsx(Button, { type: "link", size: "small", ...POINTER_FOCUS, style: { paddingInline: 0, height: "auto" }, "data-testid": `popular-value-${group.slug}-${option.value}`, "data-analytics": "none", "data-analytics-reason": "a filter is a read, not a flow step", onClick: () => {
                                 props.onApply(group.slug, option.value);

package/dist/default/PopularValues.js.map

@@ -1 +1 @@
-{"version":3,"file":"PopularValues.js","sourceRoot":"","sources":["../../src/default/PopularValues.tsx"],"names":[],"mappings":";AA6BA,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,MAAM,CAAC;AAChD,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AACpC,OAAO,EAAE,WAAW,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AACtD,OAAO,EACL,aAAa,EACb,wBAAwB,EACxB,eAAe,GAChB,MAAM,gBAAgB,CAAC;AAExB,OAAO,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AAEnD,8EAA8E;AAC9E,MAAM,CAAC,MAAM,oBAAoB,GAAG,EAAE,CAAC;AAEvC;kDACkD;AAClD,MAAM,CAAC,MAAM,sBAAsB,GAAG,CAAC,CAAC;AAExC;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,0BAA0B,GAAG,CAAC,CAAC;AAE5C;;;;GAIG;AACH,MAAM,CAAC,MAAM,0BAA0B,GAAG,GAAG,CAAC;AAE9C,gDAAgD;AAChD,MAAM,CAAC,MAAM,oBAAoB,GAAG,uBAAuB,CAAC;AAE5D,yEAAyE;AACzE,MAAM,CAAC,MAAM,yBAAyB,GAAG,uBAAuB,CAAC;AAEjE;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,CAAC,MAAM,qBAAqB,GAG5B;IACJ,EAAE,aAAa,EAAE,0BAA0B,GAAG,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE;IAC7D,EAAE,aAAa,EAAE,WAAW,CAAC,MAAM,EAAE,OAAO,EAAE,CAAC,EAAE;IACjD,EAAE,aAAa,EAAE,WAAW,CAAC,OAAO,EAAE,OAAO,EAAE,CAAC,EAAE;CACnD,CAAC;AAEF;;;;;;;GAOG;AACH,MAAM,UAAU,sBAAsB;IACpC,MAAM,KAAK,GAAG,IAAI,oBAAoB,EAAE,CAAC;IACzC,OAAO;QACL,GAAG,KAAK,8BAA8B;QACtC,GAAG,KAAK,yCAAyC;QACjD,GAAG,qBAAqB,CAAC,GAAG,CAC1B,CAAC,IAAI,EAAE,EAAE,CACP,0BAA0B,MAAM,CAAC,IAAI,CAAC,aAAa,CAAC,KAAK;YACzD,IAAI,KAAK,wCAAwC,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,CAC5E;KACF,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;AACf,CAAC;AAED;;gEAEgE;AAChE,SAAS,WAAW,CAAC,MAAmB;IACtC,OAAO,MAAM,CAAC,KAAK,KAAK,IAAI,IAAI,MAAM,CAAC,KAAK,GAAG,CAAC,CAAC;AACnD,CAAC;AAED,iEAAiE;AACjE,MAAM,UAAU,cAAc,CAC5B,KAAiB,EACjB,QAAgB,oBAAoB;IAEpC,OAAO,CAAC,GAAG,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC;SAC1C,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC,CAAC,CAAC;SAC/C,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC;AACrB,CAAC;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,SAAS,OAAO,CAAC,KAAyB;IACxC,OAAO;QACL,0EAA0E;QAC1E,wDAAwD;QACxD,GAAG,CAAC,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,WAAW,EAAE,KAAK,EAAE,CAAC;QACtD,SAAS,EAAE,OAAO,CAAC,CAAC,CAAC;QACrB,UAAU,EAAE,aAAa;QACzB,aAAa,EAAE,MAAM;KACtB,CAAC;AACJ,CAAC;AAED,MAAM,GAAG,GAAkB;IACzB,0EAA0E;IAC1E,iCAAiC;IACjC,WAAW,EAAE,OAAO;IACpB,OAAO,EAAE,MAAM;IACf,GAAG,EAAE,OAAO,CAAC,CAAC,CAAC;IACf,UAAU,EAAE,UAAU;CACvB,CAAC;AA6BF,MAAM,UAAU,aAAa,CAAC,KAAyB;IACrD,MAAM,CAAC,GAAG,IAAI,EAAE,CAAC;IACjB,MAAM,EAAE,KAAK,EAAE,GAAG,KAAK,CAAC;IACxB,IAAI,KAAK,CAAC,MAAM,KAAK,IAAI;QAAE,OAAO,IAAI,CAAC;IACvC,MAAM,OAAO,GAAG,cAAc,CAAC,KAAK,EAAE,KAAK,CAAC,KAAK,IAAI,oBAAoB,CAAC,CAAC;IAC3E,IAAI,OAAO,CAAC,MAAM,KAAK,CAAC;QAAE,OAAO,IAAI,CAAC;IAEtC,MAAM,UAAU,GAAG,KAAK,CAAC,OAAO,KAAK,YAAY,CAAC;IAElD,OAAO,CACL,MAAC,IAAI,IACH,QAAQ,QACR,GAAG,EAAE,OAAO,CAAC,CAAC,CAAC,KACX,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,SAAS,EAAE,oBAAoB,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,iBAC9C,kBAAkB,KAAK,CAAC,IAAI,EAAE,uBACxB,KAAK,CAAC,WAAW,kBACtB,UAAU,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,OAAO,IAAI,sBAAsB,CAAC,aAGzF,gBAAO,IAAI,EAAE,wBAAwB,EAAE,UAAU,EAAC,SAAS,YACxD,eAAe,EAAE,GACZ,EAIP,UAAU,IAAI,CACb,gBAAO,IAAI,EAAE,yBAAyB,EAAE,UAAU,EAAC,SAAS,YACzD,sBAAsB,EAAE,GACnB,CACT,EACA,KAAK,CAAC,OAAO,KAAK,IAAI,IAAI,CACzB,KAAC,UAAU,CAAC,IAAI,IAAC,MAAM,kBAAE,KAAK,CAAC,OAAO,IAAI,KAAK,CAAC,KAAK,GAAmB,CACzE,EACD,iBACM,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,sBAAsB,EAAE,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,iBACzC,mBAAmB,KAAK,CAAC,IAAI,EAAE,EAC5C,KAAK,EAAE,OAAO,CACZ,UAAU;oBACR,CAAC,CAAC,SAAS;oBACX,CAAC,CAAC,IAAI,CAAC,GAAG,CACN,KAAK,CAAC,OAAO,IAAI,sBAAsB,EACvC,0BAA0B,CAC3B,CACN,YAEA,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CACvB,eAAwB,KAAK,EAAE,GAAG,aAChC,KAAC,MAAM,IACL,IAAI,EAAC,MAAM,EACX,IAAI,EAAC,OAAO,KACR,aAAa,EACjB,KAAK,EAAE,EAAE,aAAa,EAAE,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,iBAC9B,iBAAiB,KAAK,CAAC,IAAI,IAAI,MAAM,CAAC,KAAK,EAAE,oBAC3C,MAAM,2BACC,qCAAqC,EAC3D,OAAO,EAAE,GAAG,EAAE;gCACZ,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,EAAE,MAAM,CAAC,KAAK,CAAC,CAAC;4BAC1C,CAAC,YAEA,MAAM,CAAC,KAAK,GACN,EACT,KAAC,UAAU,CAAC,IAAI,IACd,IAAI,EAAC,WAAW,iBACH,iBAAiB,KAAK,CAAC,IAAI,IAAI,MAAM,CAAC,KAAK,EAAE,YAEzD,MAAM,CAAC,KAAK,GACG,KApBV,MAAM,CAAC,KAAK,CAqBhB,CACP,CAAC,GACE,EACL,KAAK,CAAC,SAAS,KAAK,SAAS,IAAI,CAChC,KAAC,MAAM,IACL,IAAI,EAAC,MAAM,EACX,IAAI,EAAC,OAAO,KACR,aAAa,EACjB,KAAK,EAAE,EAAE,SAAS,EAAE,YAAY,EAAE,aAAa,EAAE,CAAC,EAAE,iBACvC,eAAe,KAAK,CAAC,IAAI,EAAE,oBACzB,MAAM,2BACC,qDAAqD,EAC3E,OAAO,EAAE,KAAK,CAAC,SAAS,YAEvB,CAAC,CAAC,gBAAgB,CAAC,gBAAgB,CAAC,GAC9B,CACV,IACI,CACR,CAAC;AACJ,CAAC"}
+{"version":3,"file":"PopularValues.js","sourceRoot":"","sources":["../../src/default/PopularValues.tsx"],"names":[],"mappings":"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"}

package/dist/default/index.d.ts

@@ -58,7 +58,7 @@ export { FacetGroupControl, facetGroupIsEmptyHeading, facetGroupReservedHeight,
 export type { FacetGroupControlProps, FacetGroupShape, FacetOptionNode, } from "./FacetGroupControl.js";
 export { SWATCH_SIZE, facetSwatch, isColorAxis, swatchColor, termHue, } from "./swatches.js";
 export type { ColorAxisLike, TermExtra } from "./swatches.js";
-export { PopularValues, popularOptions, popularValuesLadderCss, POPULAR_VALUES_CLASS, POPULAR_VALUES_COLUMNS, POPULAR_VALUES_LADDER, POPULAR_VALUES_LIMIT, POPULAR_VALUES_MAX_COLUMNS, POPULAR_VALUES_STYLE_HREF, POPULAR_VALUE_COLUMN_WIDTH, } from "./PopularValues.js";
+export { PopularValues, popularOptions, POPULAR_VALUES_COLUMNS, POPULAR_VALUES_COLUMN_GAP, POPULAR_VALUES_LIMIT, POPULAR_VALUES_MAX_COLUMNS, POPULAR_VALUE_COLUMN_WIDTH, } from "./PopularValues.js";
 export type { PopularValuesProps } from "./PopularValues.js";
 export { PartitionChips } from "./PartitionChips.js";
 export type { PartitionChild, PartitionChipsProps, PartitionLinkedChildren, } from "./PartitionChips.js";

package/dist/default/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/default/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCG;AAGH,OAAO,EACL,UAAU,EACV,qBAAqB,EACrB,aAAa,EACb,kBAAkB,EAClB,uBAAuB,EACvB,cAAc,EACd,UAAU,EACV,oBAAoB,EACpB,eAAe,EACf,gBAAgB,EAChB,SAAS,GACV,MAAM,iBAAiB,CAAC;AACzB,OAAO,EAAE,oBAAoB,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AACjE,OAAO,EACL,oBAAoB,EACpB,wBAAwB,EACxB,6BAA6B,GAC9B,MAAM,gBAAgB,CAAC;AACxB,OAAO,EACL,aAAa,EACb,kBAAkB,EAClB,mBAAmB,EACnB,qBAAqB,EACrB,wBAAwB,EACxB,YAAY,EACZ,eAAe,GAChB,MAAM,gBAAgB,CAAC;AACxB,YAAY,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACxD,YAAY,EACV,eAAe,EACf,mBAAmB,EACnB,mBAAmB,EACnB,4BAA4B,EAC5B,uBAAuB,EACvB,iBAAiB,EACjB,cAAc,EACd,gBAAgB,EAChB,mBAAmB,GACpB,MAAM,iBAAiB,CAAC;AAEzB,OAAO,EACL,mBAAmB,EACnB,sBAAsB,EACtB,2BAA2B,EAC3B,gCAAgC,EAChC,2BAA2B,EAC3B,kBAAkB,EAClB,yBAAyB,GAC1B,MAAM,0BAA0B,CAAC;AAClC,YAAY,EACV,wBAAwB,EACxB,yBAAyB,EACzB,kBAAkB,GACnB,MAAM,0BAA0B,CAAC;AAElC,OAAO,EACL,iBAAiB,EACjB,iBAAiB,EACjB,yBAAyB,EACzB,qBAAqB,EACrB,0BAA0B,EAC1B,qBAAqB,EACrB,4BAA4B,EAC5B,0BAA0B,EAC1B,uBAAuB,EACvB,uBAAuB,EACvB,iBAAiB,EACjB,mBAAmB,EACnB,gBAAgB,GACjB,MAAM,wBAAwB,CAAC;AAChC,YAAY,EACV,cAAc,EACd,sBAAsB,EACtB,qBAAqB,EACrB,oBAAoB,EACpB,gBAAgB,GACjB,MAAM,wBAAwB,CAAC;AAEhC,OAAO,EACL,WAAW,EACX,eAAe,EACf,YAAY,EACZ,cAAc,EACd,mBAAmB,EACnB,iBAAiB,EACjB,mBAAmB,EACnB,iBAAiB,EACjB,UAAU,EACV,YAAY,EACZ,UAAU,EACV,gBAAgB,EAChB,gBAAgB,EAChB,aAAa,EACb,gBAAgB,GACjB,MAAM,kBAAkB,CAAC;AAC1B,YAAY,EACV,WAAW,EACX,iBAAiB,EACjB,QAAQ,EACR,QAAQ,EACR,uBAAuB,EACvB,sBAAsB,EACtB,eAAe,EACf,sBAAsB,EACtB,gBAAgB,GACjB,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAE,mBAAmB,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAClF,YAAY,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAEvD,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAC/D,YAAY,EAAE,wBAAwB,EAAE,MAAM,0BAA0B,CAAC;AAEzE,OAAO,EACL,iBAAiB,EACjB,wBAAwB,EACxB,wBAAwB,EACxB,eAAe,EACf,gBAAgB,EAChB,iBAAiB,EACjB,0BAA0B,EAC1B,oBAAoB,EACpB,uBAAuB,EACvB,mBAAmB,EACnB,qBAAqB,EACrB,gBAAgB,EAChB,qBAAqB,GACtB,MAAM,wBAAwB,CAAC;AAChC,YAAY,EACV,sBAAsB,EACtB,eAAe,EACf,eAAe,GAChB,MAAM,wBAAwB,CAAC;AAEhC,OAAO,EACL,WAAW,EACX,WAAW,EACX,WAAW,EACX,WAAW,EACX,OAAO,GACR,MAAM,eAAe,CAAC;AACvB,YAAY,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAK9D,OAAO,EACL,aAAa,EACb,cAAc,EACd,sBAAsB,EACtB,oBAAoB,EACpB,sBAAsB,EACtB,qBAAqB,EACrB,oBAAoB,EACpB,0BAA0B,EAC1B,yBAAyB,EACzB,0BAA0B,GAC3B,MAAM,oBAAoB,CAAC;AAC5B,YAAY,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AAC7D,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AACrD,YAAY,EACV,cAAc,EACd,mBAAmB,EACnB,uBAAuB,GACxB,MAAM,qBAAqB,CAAC;AAE7B,OAAO,EACL,cAAc,EACd,iBAAiB,EACjB,sBAAsB,EACtB,oBAAoB,GACrB,MAAM,qBAAqB,CAAC;AAC7B,YAAY,EACV,mBAAmB,EACnB,uBAAuB,EACvB,kBAAkB,EAClB,iBAAiB,GAClB,MAAM,qBAAqB,CAAC;AAE7B,OAAO,EAAE,qBAAqB,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AACtF,YAAY,EAAE,0BAA0B,EAAE,MAAM,4BAA4B,CAAC;AAG7E,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAC3C,YAAY,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AACrD,OAAO,EACL,UAAU,EACV,kBAAkB,EAClB,qBAAqB,EACrB,gBAAgB,GACjB,MAAM,iBAAiB,CAAC;AACzB,YAAY,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AACvD,OAAO,EAAE,UAAU,EAAE,oBAAoB,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAChF,YAAY,EAAE,eAAe,EAAE,UAAU,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AACxF,OAAO,EAAE,cAAc,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxE,YAAY,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAC;AAC/D,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AACrD,YAAY,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAC;AAG/D,OAAO,EAAE,gBAAgB,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAC9E,YAAY,EAAE,eAAe,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AACjF,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAC3D,YAAY,EACV,sBAAsB,EACtB,wBAAwB,GACzB,MAAM,wBAAwB,CAAC;AAChC,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AACrD,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AACrD,YAAY,EAAE,UAAU,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAC;AAG3E,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/default/index.ts"],"names":[],"mappings":"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"}

package/dist/default/index.js

@@ -53,7 +53,7 @@ export { SWATCH_SIZE, facetSwatch, isColorAxis, swatchColor, termHue, } from "./
 // ── 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) ──────────────────────────────────
-export { PopularValues, popularOptions, popularValuesLadderCss, POPULAR_VALUES_CLASS, POPULAR_VALUES_COLUMNS, POPULAR_VALUES_LADDER, POPULAR_VALUES_LIMIT, POPULAR_VALUES_MAX_COLUMNS, POPULAR_VALUES_STYLE_HREF, POPULAR_VALUE_COLUMN_WIDTH, } from "./PopularValues.js";
+export { PopularValues, popularOptions, POPULAR_VALUES_COLUMNS, POPULAR_VALUES_COLUMN_GAP, POPULAR_VALUES_LIMIT, POPULAR_VALUES_MAX_COLUMNS, POPULAR_VALUE_COLUMN_WIDTH, } from "./PopularValues.js";
 export { PartitionChips } from "./PartitionChips.js";
 export { FacetPanelPane, FACET_OPEN_GROUPS, FACET_SEARCH_THRESHOLD, FACET_VISIBLE_GROUPS, } from "./FacetPanelPane.js";
 export { RankingDisclosurePane, RANKING_MAX_WIDTH } from "./RankingDisclosurePane.js";

package/dist/default/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/default/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/default/index.ts"],"names":[],"mappings":"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"}

package/llms.txt

@@ -1,4 +1,4 @@
-# @stapel/search-react 0.44.0
+# @stapel/search-react 0.45.0
 
 Headless React flow pair for stapel-search (contract >=0.16 <0.17) — business + state, zero visual opinion.
 Built on @stapel/core: typed client + StapelApiError envelope, auth token refresh,

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.44.0",
+  "version": "0.45.0",
   "backend": {
     "module": "stapel-search",
     "contract": ">=0.16 <0.17"

package/nav-manifest.json

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stapel/search-react",
-  "version": "0.44.0",
+  "version": "0.45.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": {
@@ -115,11 +115,11 @@
     "size-limit": "^11.2.0",
     "typescript": "^5.8.3",
     "vitest": "^3.2.4",
-    "@stapel/core": "^0.26.1",
-    "@stapel/showcase": "^0.3.0",
-    "@stapel/image": "^0.4.2",
     "@stapel/attributes-react": "^0.17.0",
+    "@stapel/core": "^0.26.1",
     "@stapel/tokens": "^0.8.0",
+    "@stapel/image": "^0.4.2",
+    "@stapel/showcase": "^0.3.0",
     "@stapel/tokens-antd": "^0.19.0"
   },
   "engines": {

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.44.0",
+  "version": "0.45.0",
   "defined": [],
   "flows": []
 }

package/src/default/PopularValues.tsx

@@ -29,7 +29,7 @@
 import type { CSSProperties, ReactElement, ReactNode } from "react";
 import { Button, Flex, Typography } from "antd";
 import { useT } from "@stapel/core";
-import { breakpoints, spacing } from "@stapel/tokens";
+import { spacing } from "@stapel/tokens";
 import {
   POINTER_FOCUS,
   POINTER_FOCUS_STYLE_HREF,
@@ -41,79 +41,63 @@ import { SEARCH_I18N_KEYS } from "../i18n/keys.js";
 /** How many values the block prints before the link into the full control. */
 export const POPULAR_VALUES_LIMIT = 12;
 
-/** How many columns the list flows into. Three fills a desktop content column
- * without turning a make into a two-line wrap. */
+/** How many columns the list flows into when a host names a number. Three
+ * fills a desktop content column without turning a make into a two-line wrap. */
 export const POPULAR_VALUES_COLUMNS = 3;
 
 /**
- * The ceiling on columns, whatever a host or the ladder asks for.
+ * The ceiling on columns a HOST may ask for.
  *
- * Past four the block stops being a table of contents and becomes a grid of
- * two-word cells: each column is one make and one number, and a fifth column
- * on a 1100px results pane puts 60px of air between «Toyota 4» and the next
- * make. Four is where the density still reads as a list.
+ * Past four a block whose width is fixed by its words stops being a table of
+ * contents and becomes a grid of two-word cells: each column is one make and
+ * one number, and a fifth column puts 60px of air between «Toyota 4» and the
+ * next make. Four is where that density still reads as a list.
+ *
+ * It governs the numeric arm ONLY, and since 0.45 that is the whole of its
+ * job. The responsive arm has no count to cap and needs none — see
+ * {@link POPULAR_VALUE_COLUMN_WIDTH}: there the MEASURE is the ceiling, so a
+ * column can never be narrower than a value and its count however many of them
+ * the pane holds.
  */
 export const POPULAR_VALUES_MAX_COLUMNS = 4;
 
 /**
- * The width one column of this block needs: a make and its count, on one line,
- * at the default type step. «Ford 1 204» is the measure; below it a value
- * wraps under its own number and the block stops being scannable.
- */
-export const POPULAR_VALUE_COLUMN_WIDTH = 200;
-
-/** The class the container query is hung on. */
-export const POPULAR_VALUES_CLASS = "stapel-popular-values";
-
-/** The `href` the hoisted ladder sheet is deduplicated by (React 19). */
-export const POPULAR_VALUES_STYLE_HREF = "stapel-popular-values";
-
-/**
- * The ladder `columns="responsive"` climbs — one rung per column, by the width
- * of the BLOCK rather than of the window.
+ * The minimum measure one column of this block needs, and the whole of the
+ * responsive arm's layout input.
+ *
+ * `column-width` is a MINIMUM, not a width: the browser fits as many columns
+ * of at least this measure as the element's own width allows and then widens
+ * them to fill it. That is what makes the number a ceiling on density as well
+ * as a floor on legibility — no pane, however wide, can produce a column
+ * narrower than this.
+ *
+ * ── 150, and it is measured rather than reasoned ──────────────────────────
  *
- * The container is what decides, and it has to be: this block sits in the
- * results column, which on a 1440px desktop is the window minus a 280px rail
- * minus the gap. A media query would give it four columns at a width it never
- * has, and one column inside a narrow host container that happens to sit on a
- * wide screen. `container-type: inline-size` plus `@container` asks the only
- * question that has an answer here — how wide is this block.
+ * It was 200, declared as the measure «Ford 1 204» needs. Swept in a real
+ * browser over the live twelve makes and over a worst case of the longest make
+ * on the stand with a four-digit count, at this gap:
  *
- * The rungs: one column while the block is narrower than two of
- * {@link POPULAR_VALUE_COLUMN_WIDTH}, then the two token breakpoints for the
- * third and fourth. `tablet` and `desktop` are `@stapel/tokens`' own numbers,
- * and using them here is the same statement they make everywhere else — this
- * is where a layout of this density gains a column.
+ *   200 → 4 columns in the storefront's 1088px pane, 3 rows
+ *   170 → 4 columns, 3 rows
+ *   160 → 4 columns, 3 rows
+ *   150 → 6 columns, 2 rows
+ *
+ * 150 is the knee, and nothing wraps at it: because the browser widens the
+ * columns to fill, the USED column is 155px in that pane and never below 152px
+ * at any width swept. The old claim that a value wraps under its own number
+ * below 200 does not hold at the default type step.
  */
-export const POPULAR_VALUES_LADDER: readonly {
-  readonly minInlineSize: number;
-  readonly columns: number;
-}[] = [
-  { minInlineSize: POPULAR_VALUE_COLUMN_WIDTH * 2, columns: 2 },
-  { minInlineSize: breakpoints.tablet, columns: 3 },
-  { minInlineSize: breakpoints.desktop, columns: 4 },
-];
+export const POPULAR_VALUE_COLUMN_WIDTH = 150;
 
 /**
- * The ladder as CSS. One `@container` rule per rung, ascending, so the widest
- * matching rung is the one that wins by ordinary cascade order.
+ * The gutter between columns — one step up the scale from the row's own, so a
+ * new column reads as a column rather than as a wrapped line.
  *
- * Emitted as a hoisted `<style>` rather than an inline style because a
- * container query is unreachable from one — the same reason `<SearchPage>`
- * hoists its rail sheet.
+ * Exported because it is half of the arithmetic that decides how many columns
+ * a pane produces (`floor((available + gap) / (width + gap))`), and a host
+ * sizing a reservation for this block should not have to re-measure it.
  */
-export function popularValuesLadderCss(): string {
-  const block = `.${POPULAR_VALUES_CLASS}`;
-  return [
-    `${block}{container-type:inline-size}`,
-    `${block}>[data-popular-columns]{column-count:1}`,
-    ...POPULAR_VALUES_LADDER.map(
-      (rung) =>
-        `@container (min-width: ${String(rung.minInlineSize)}px)` +
-        `{${block}>[data-popular-columns]{column-count:${String(rung.columns)}}}`
-    ),
-  ].join("\n");
-}
+export const POPULAR_VALUES_COLUMN_GAP: number = spacing[6];
 
 /** A value with no evidence behind it is not a popular value. Uncounted
  * options carry `count: null` and are dropped here rather than printed with a
@@ -133,32 +117,55 @@ export function popularOptions(
 }
 
 /**
- * The columns box: as wide as its WORDS, and no wider.
+ * The columns box, in its two arms.
+ *
+ * ── The responsive arm: a block, and a MEASURE ────────────────────────────
+ *
+ * `column-width` asks the element's own width how many columns fit. That is
+ * the whole mechanism — no container query, no rungs, no hoisted sheet, and no
+ * number that has to be kept in step with a layout this component cannot see.
+ * It is also what the expanded band next door already does, so the two arms of
+ * one control stop answering "how many columns" two different ways.
  *
- * Multi-column layout divides the container, so three columns of a block that
- * is handed the whole results pane are three ~360px columns holding «Chery 5»
- * — which on the storefront printed a make, then 300px of nothing, then the
- * next make. The owner read it as broken, and it is: nothing about this block
- * wants the pane's width, it wants its own.
+ * What it replaced was a container-query ladder whose rungs were the token
+ * WINDOW breakpoints — and this block is the window less a 280px rail less the
+ * gap, so at 1440 it is 1088px wide and the rung that grants a fourth column
+ * (1200px) could never fire. The ladder's own doc argued that a media query
+ * would be wrong here for precisely that reason, and then used the window's
+ * numbers to measure the container.
  *
- * `inline-size: fit-content` is the whole fix. A multi-column box's max-content
- * size is `columns × (the widest item) + gaps` — exactly the block's natural
- * measure — and `fit-content` takes that unless the available space is
- * smaller, in which case the columns shrink instead of overflowing. The box
- * stays a block, so it stays flush with the pane's leading edge; the ladder in
- * the sheet still decides HOW MANY columns, and each one is now sized by the
- * longest make in it.
+ * `inline-size: fit-content` is deliberately NOT here, and its absence is
+ * load-bearing twice over. It sized the box to its words — 377px of a 1088px
+ * pane on the live storefront, 711px of white beside twelve values stacked
+ * four deep — and it is measurably incompatible with a column measure: set
+ * together, the box collapses to a single column. The defect `fit-content` was
+ * added for (three ~360px columns each holding «Chery 5») cannot arise here,
+ * because a column is never wider than the pane divided by however many
+ * {@link POPULAR_VALUE_COLUMN_WIDTH} fit in it.
  *
- * The gap is one step up the scale from the row's own: at content width the
- * columns sit close enough that the old 16px read as a wrapped line rather
- * than as a new column.
+ * `column-fill: balance` spreads the rows evenly over the columns the width
+ * produces, rather than filling the first column to the box's block-size.
+ *
+ * ── The numeric arm: unchanged, words-wide ────────────────────────────────
+ *
+ * A host that names a number has decided its own layout, and a count divides
+ * the container — so three columns of a box handed the whole results pane are
+ * three ~360px columns holding «Chery 5», a make and then 300px of nothing.
+ * `fit-content` is the cure there and stays: the box takes its natural measure
+ * (`columns × widest item + gaps`) unless the space is smaller, in which case
+ * the columns shrink rather than overflow.
  */
 function COLUMNS(count: number | undefined): CSSProperties {
+  if (count === undefined) {
+    return {
+      columnWidth: POPULAR_VALUE_COLUMN_WIDTH,
+      columnGap: POPULAR_VALUES_COLUMN_GAP,
+      columnFill: "balance",
+    };
+  }
   return {
-    // The rungs live in the sheet; an inline `column-count` would win against
-    // every one of them, so the responsive arm states none.
-    ...(count === undefined ? {} : { columnCount: count }),
-    columnGap: spacing[6],
+    columnCount: count,
+    columnGap: POPULAR_VALUES_COLUMN_GAP,
     inlineSize: "fit-content",
     maxInlineSize: "100%",
   };
@@ -186,10 +193,12 @@ export interface PopularValuesProps {
   /**
    * How many columns. Default {@link POPULAR_VALUES_COLUMNS}.
    *
-   * `"responsive"` climbs {@link POPULAR_VALUES_LADDER} by the width of the
-   * BLOCK — 1, 2, 3, 4 — instead of taking one number for every surface. The
-   * numeric form stays, and stays the default: a host that has already decided
-   * its layout should not have that decision taken back by a query.
+   * `"responsive"` hands the question to the ELEMENT: native multicol over
+   * {@link POPULAR_VALUE_COLUMN_WIDTH} fits as many columns as this block's own
+   * width allows, at every width, with no rungs to keep in step with a layout
+   * this component cannot see. The numeric form stays, and stays the default:
+   * a host that has already decided its layout should not have that decision
+   * taken back.
    */
   readonly columns?: number | "responsive";
   /** The block's heading. Defaults to the group's own label; `null` draws
@@ -213,7 +222,6 @@ export function PopularValues(props: PopularValuesProps): ReactElement | null {
     <Flex
       vertical
       gap={spacing[2]}
-      {...(responsive ? { className: POPULAR_VALUES_CLASS } : {})}
       data-testid={`popular-values-${group.slug}`}
       data-label-source={group.labelSource}
       data-columns={responsive ? "responsive" : String(props.columns ?? POPULAR_VALUES_COLUMNS)}
@@ -222,19 +230,10 @@ export function PopularValues(props: PopularValuesProps): ReactElement | null {
       <style href={POINTER_FOCUS_STYLE_HREF} precedence="default">
         {pointerFocusCss()}
       </style>
-      {/* The ladder, hoisted and deduped by `href`: a container query has no
-          inline form. Only where it is asked for — a block with a fixed
-          column count needs no sheet at all. */}
-      {responsive && (
-        <style href={POPULAR_VALUES_STYLE_HREF} precedence="default">
-          {popularValuesLadderCss()}
-        </style>
-      )}
       {props.heading !== null && (
         <Typography.Text strong>{props.heading ?? group.label}</Typography.Text>
       )}
       <div
-        {...(responsive ? { "data-popular-columns": "" } : {})}
         data-testid={`popular-columns-${group.slug}`}
         style={COLUMNS(
           responsive

package/src/default/index.ts

@@ -189,13 +189,10 @@ export type { ColorAxisLike, TermExtra } from "./swatches.js";
 export {
   PopularValues,
   popularOptions,
-  popularValuesLadderCss,
-  POPULAR_VALUES_CLASS,
   POPULAR_VALUES_COLUMNS,
-  POPULAR_VALUES_LADDER,
+  POPULAR_VALUES_COLUMN_GAP,
   POPULAR_VALUES_LIMIT,
   POPULAR_VALUES_MAX_COLUMNS,
-  POPULAR_VALUES_STYLE_HREF,
   POPULAR_VALUE_COLUMN_WIDTH,
 } from "./PopularValues.js";
 export type { PopularValuesProps } from "./PopularValues.js";