@stapel/search-react 0.32.7 → 0.32.8

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @stapel/search-react
 
+## 0.32.8
+
+### Patch Changes
+
+- e4797ce: `<PartitionChips variant="segmented">` renders the control it declares.
+
+  The row carried `data-variant="segmented"` and `role="radiogroup"`, and inside it the walker counted `.ant-segmented` **0** and `input[type=radio]` **0** over plain `ant-btn` cells — on both axes of two categories (D304). The ARIA was real (`role="radio"`, `aria-checked`, a roving tabindex, arrow keys), but the control named in the DOM did not exist, and ~30 lines of this file re-decided joined-row geometry the design system already owns.
+
+  The segmented arm is antd's `Segmented` now: `.ant-segmented`, one real `input[type=radio]` per cell under a shared `name`, and with it the browser's own single Tab stop and arrow keys. The declaration is unchanged (`data-variant="segmented"`, `role="radiogroup"`, the group's `aria-label` still the axis's own name) and so is the contract — `value: string | null`, `onChange` reporting `null` for the parent, controlled, nothing kept here.
+
+  What moves for anything reading the DOM: the chosen cell is the radio's **`checked`** rather than `aria-checked` on a button (`aria-checked` is how a button fakes what a radio has), and it carries `.ant-segmented-item-selected`. The per-cell test ids (`partition-chip-<path>`, `partition-chip-all`) stay where they were, on the cell's own label, now with `data-checked` beside them so a probe reading a snapshot still has the chosen cell without asking the accessibility tree. A keydown belongs to the cell's input.
+
+  The `chips` variant — the phone's wrapping pill row — is untouched: same buttons, same `role="radio"`, same `aria-checked`, same roving tabindex.
+
+  Ceiling raised 31 -> 31.25 KB. Measured with dependencies held constant, this package's src before and after: 30.95 -> 31.05 KB.
+
 ## 0.32.7
 
 ### Patch Changes

package/README.md

@@ -532,8 +532,13 @@ a tile grid: an "all" cell plus one per child, from `{id, path, name}`,
 controlled (the choice is a `category` in the URL), a real `radiogroup` with
 roving tabindex and arrow keys — because exactly one of them is true at a time,
 and `aria-pressed` toggles say the opposite. `variant="segmented"` is the
-desktop rail's shape (one joined control under its own label); the semantics do
-not vary with it.
+desktop rail's shape: **antd's `Segmented`**, one joined control under its own
+label, so its radiogroup is the browser's — real `input[type=radio]` under one
+`name`, the chosen cell's own `checked` (not `aria-checked`, which is how a
+button fakes what a radio has), and the arrow keys and single Tab stop that
+come with them. The contract does not vary with the variant, and the per-cell
+test ids (`partition-chip-<path>`, `partition-chip-all`, each with
+`data-checked`) are the same in both.
 
 ```tsx
 <PartitionChips items={children} value={state.category ?? null}

package/dist/default/PartitionChips.d.ts

@@ -21,15 +21,14 @@ export interface PartitionChipsProps {
     /**
      * Which shape the row takes. `"chips"` (the default) is the phone's: a
      * wrapping row of rounded pills above the feed. `"segmented"` is the
-     * desktop RAIL's — one joined control under the axis's own label, which is
-     * how the reference classified draws the same choice (a car-type row:
-     * all, used, new) and what a 280px column has room for.
+     * desktop RAIL's — antd's `Segmented`, one joined control under the axis's
+     * own label, which is how the reference classified draws the same choice (a
+     * car-type row: all, used, new) and what a 280px column has room for.
      *
-     * The SEMANTICS do not vary with it. Both are the same `radiogroup` with
-     * the same roving tabindex and the same arrow keys — a segmented look is a
-     * border-radius decision, and swapping in a component that draws joined
-     * cells by giving up "exactly one of these is true" would trade the
-     * accessible half of this control for the visible half.
+     * The SEMANTICS do not vary with it: both are a `radiogroup` naming itself,
+     * with one Tab stop and the arrow keys moving the choice. What varies is
+     * who provides them — this file's `role="radio"` buttons in `chips`, the
+     * browser's own `input[type=radio]` in `segmented`.
      */
     readonly variant?: "chips" | "segmented";
 }

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

@@ -1 +1 @@
-{"version":3,"file":"PartitionChips.d.ts","sourceRoot":"","sources":["../../src/default/PartitionChips.tsx"],"names":[],"mappings":"AA6BA,OAAO,KAAK,EAGV,YAAY,EACZ,SAAS,EACV,MAAM,OAAO,CAAC;AAMf;;oDAEoD;AACpD,MAAM,WAAW,cAAc;IAC7B,QAAQ,CAAC,EAAE,EAAE,MAAM,GAAG,MAAM,CAAC;IAC7B,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;CACvB;AAED,MAAM,WAAW,mBAAmB;IAClC,8DAA8D;IAC9D,QAAQ,CAAC,KAAK,EAAE,SAAS,cAAc,EAAE,CAAC;IAC1C;iFAC6E;IAC7E,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAC9B,QAAQ,CAAC,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IACjD,kEAAkE;IAClE,QAAQ,CAAC,QAAQ,CAAC,EAAE,SAAS,CAAC;IAC9B,uEAAuE;IACvE,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IACxB;;;;;;;;;;;;OAYG;IACH,QAAQ,CAAC,OAAO,CAAC,EAAE,OAAO,GAAG,WAAW,CAAC;CAC1C;AAiDD,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,GAAG,YAAY,CAgFvE"}
+{"version":3,"file":"PartitionChips.d.ts","sourceRoot":"","sources":["../../src/default/PartitionChips.tsx"],"names":[],"mappings":"AAmDA,OAAO,KAAK,EAGV,YAAY,EACZ,SAAS,EACV,MAAM,OAAO,CAAC;AAMf;;oDAEoD;AACpD,MAAM,WAAW,cAAc;IAC7B,QAAQ,CAAC,EAAE,EAAE,MAAM,GAAG,MAAM,CAAC;IAC7B,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;CACvB;AAED,MAAM,WAAW,mBAAmB;IAClC,8DAA8D;IAC9D,QAAQ,CAAC,KAAK,EAAE,SAAS,cAAc,EAAE,CAAC;IAC1C;iFAC6E;IAC7E,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAC9B,QAAQ,CAAC,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IACjD,kEAAkE;IAClE,QAAQ,CAAC,QAAQ,CAAC,EAAE,SAAS,CAAC;IAC9B,uEAAuE;IACvE,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IACxB;;;;;;;;;;;OAWG;IACH,QAAQ,CAAC,OAAO,CAAC,EAAE,OAAO,GAAG,WAAW,CAAC;CAC1C;AA8BD,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,GAAG,YAAY,CAsHvE"}

package/dist/default/PartitionChips.js

@@ -26,43 +26,47 @@ import { jsx as _jsx } from "react/jsx-runtime";
  * with roving tabindex is the pattern for "one of these": Tab reaches the row
  * once and lands on the chosen chip, the arrow keys move along it, and the
  * group's own name says what is being chosen.
+ *
+ * ── The two variants are two CONTROLS, and each one is real ───────────────
+ *
+ * `chips` is this file's own row of `role="radio"` buttons — pills that wrap,
+ * the phone's shape.
+ *
+ * `segmented` is antd's `Segmented`, and it used to be this same row with a
+ * shared border drawn round it. That was a claim nothing backed: the walker
+ * read `data-variant="segmented"` with `role="radiogroup"` and found
+ * `.ant-segmented` zero times, `input[type=radio]` zero times, and plain
+ * `ant-btn` inside — on both axes of two categories (D304). A row that names
+ * a control it does not render sends the next reader looking for a bug in the
+ * wrong place, and hand-rolling the joined look was ~30 lines re-deciding
+ * geometry the design system already owns.
+ *
+ * So the segmented arm IS the design system's control now, and its radiogroup
+ * is the browser's rather than ours: real `input[type=radio]` sharing one
+ * `name`, so the selected state is the radio's own `checked` (`aria-checked`
+ * is how a BUTTON fakes what a radio has), the arrow keys are the control's,
+ * and one Tab stop is the platform's doing. The per-cell test ids stay where
+ * they were, plus `data-checked`, so a probe that reads a snapshot still has
+ * the chosen cell without asking the accessibility tree.
  */
 import { useRef } from "react";
-import { Button } from "antd";
+import { Button, Segmented } from "antd";
 import { useT } from "@stapel/core";
-import { cssVar, radii, spacing } from "@stapel/tokens";
+import { radii, spacing } from "@stapel/tokens";
 import { SEARCH_I18N_KEYS } from "../i18n/keys.js";
+/**
+ * The `value` of the parent cell inside the segmented control. `null` is this
+ * component's word for "the parent, unnarrowed" and a radio's value is a
+ * string, so the sentinel exists only between here and antd — it never
+ * reaches {@link PartitionChipsProps.onChange}, which still reports `null`.
+ */
+const ALL = "__all__";
 const CHIP = { borderRadius: radii.full };
 const ROW = {
     display: "flex",
     flexWrap: "wrap",
     gap: spacing[2],
 };
-/**
- * The segmented row: one joined control, no gaps, the group's own outline.
- *
- * `gap: 0` plus a shared border is what makes three buttons read as one
- * control — the thing a rail needs, because a wrapping pill row in a 280px
- * column is two ragged lines. `overflow: hidden` clips the cells' own corners
- * to the group's radius so the ends are round and the joins are square.
- */
-const SEGMENTED_ROW = {
-    display: "flex",
-    gap: 0,
-    inlineSize: "100%",
-    border: `1px solid ${cssVar("border")}`,
-    borderRadius: cssVar("radius-md"),
-    overflow: "hidden",
-};
-/** One cell of the segmented row: an equal share of the width, square joins,
- * no border of its own — the group draws the outline. */
-const SEGMENTED_CELL = {
-    flex: "1 1 0",
-    minInlineSize: 0,
-    borderRadius: 0,
-    borderInline: "none",
-    borderBlock: "none",
-};
 /** The row's cells, as `[value, label]` — the parent first, then the
  * children in catalogue order. */
 function cells(items, allLabel) {
@@ -106,15 +110,33 @@ export function PartitionChips(props) {
     // parent chip rather than vanishing.
     const active = options.findIndex(([value]) => value === props.value);
     const stop = active >= 0 ? active : 0;
-    const segmented = props.variant === "segmented";
-    return (_jsx("div", { style: segmented ? SEGMENTED_ROW : ROW, "data-variant": segmented ? "segmented" : "chips", ref: row, role: "radiogroup", "aria-label": props.label ?? t(SEARCH_I18N_KEYS.partitionLabel), "data-testid": "partition-chips", children: options.map(([value, label], index) => {
+    const name = props.label ?? t(SEARCH_I18N_KEYS.partitionLabel);
+    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
+        // — the radiogroup this variant used to only claim to be. `role` and
+        // `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 (_jsx(Segmented, { block: true, size: "small", role: "radiogroup", "aria-label": name, "data-variant": "segmented", "data-testid": "partition-chips", value: props.value ?? ALL, options: options.map(([value, label]) => ({
+                value: value ?? ALL,
+                label: (
+                // The cell's test id and its chosen state, on the one node inside
+                // a cell this component owns — antd names the cells itself, and a
+                // label a radio is bound to is what a click has to land on.
+                _jsx("span", { "data-testid": `partition-chip-${value ?? "all"}`, "data-checked": value === props.value ? "true" : "false", children: label })),
+            })), onChange: (next) => {
+                props.onChange(next === ALL ? null : String(next));
+            } }));
+    }
+    return (_jsx("div", { style: ROW, "data-variant": "chips", ref: row, role: "radiogroup", "aria-label": name, "data-testid": "partition-chips", children: options.map(([value, label], index) => {
             const selected = value === props.value;
-            return (_jsx(Button, { size: "small", ...(segmented ? {} : { shape: "round" }), type: selected ? "primary" : "default", role: "radio", "aria-checked": selected, 
+            return (_jsx(Button, { size: "small", shape: "round", type: selected ? "primary" : "default", role: "radio", "aria-checked": selected, 
                 // Roving tabindex: the row is ONE Tab stop and it lands on the
                 // chosen chip, not on the first of eight.
-                tabIndex: index === stop ? 0 : -1, style: segmented ? SEGMENTED_CELL : CHIP, "data-testid": `partition-chip-${value ?? "all"}`, "data-analytics": "none", "data-analytics-reason": "choosing a section is a read, not a flow step", onKeyDown: onKeyDown(index), onClick: () => {
+                tabIndex: index === stop ? 0 : -1, style: CHIP, "data-testid": `partition-chip-${value ?? "all"}`, "data-analytics": "none", "data-analytics-reason": "choosing a section is a read, not a flow step", onKeyDown: onKeyDown(index), onClick: () => {
                     props.onChange(value);
-                }, children: label }, value ?? "__all__"));
+                }, children: label }, value ?? ALL));
         }) }));
 }
 //# sourceMappingURL=PartitionChips.js.map

package/dist/default/PartitionChips.js.map

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

package/llms.txt

@@ -1,4 +1,4 @@
-# @stapel/search-react 0.32.7
+# @stapel/search-react 0.32.8
 
 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.32.7",
+  "version": "0.32.8",
   "backend": {
     "module": "stapel-search",
     "contract": ">=0.16 <0.17"

package/nav-manifest.json

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stapel/search-react",
-  "version": "0.32.7",
+  "version": "0.32.8",
   "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",
+      "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",
       "path": "dist/default/index.js",
-      "limit": "31 KB"
+      "limit": "31.25 KB"
     },
     {
       "name": "router — the react-router binding is opt-in; the main entry must never pull a router",
@@ -115,7 +115,7 @@
     "size-limit": "^11.2.0",
     "typescript": "^5.8.3",
     "vitest": "^3.2.4",
-    "@stapel/attributes-react": "^0.16.4",
+    "@stapel/attributes-react": "^0.16.5",
     "@stapel/core": "^0.25.4",
     "@stapel/image": "^0.4.2",
     "@stapel/showcase": "^0.3.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.32.7",
+  "version": "0.32.8",
   "defined": [],
   "flows": []
 }

package/src/default/PartitionChips.tsx

@@ -25,6 +25,28 @@
  * with roving tabindex is the pattern for "one of these": Tab reaches the row
  * once and lands on the chosen chip, the arrow keys move along it, and the
  * group's own name says what is being chosen.
+ *
+ * ── The two variants are two CONTROLS, and each one is real ───────────────
+ *
+ * `chips` is this file's own row of `role="radio"` buttons — pills that wrap,
+ * the phone's shape.
+ *
+ * `segmented` is antd's `Segmented`, and it used to be this same row with a
+ * shared border drawn round it. That was a claim nothing backed: the walker
+ * read `data-variant="segmented"` with `role="radiogroup"` and found
+ * `.ant-segmented` zero times, `input[type=radio]` zero times, and plain
+ * `ant-btn` inside — on both axes of two categories (D304). A row that names
+ * a control it does not render sends the next reader looking for a bug in the
+ * wrong place, and hand-rolling the joined look was ~30 lines re-deciding
+ * geometry the design system already owns.
+ *
+ * So the segmented arm IS the design system's control now, and its radiogroup
+ * is the browser's rather than ours: real `input[type=radio]` sharing one
+ * `name`, so the selected state is the radio's own `checked` (`aria-checked`
+ * is how a BUTTON fakes what a radio has), the arrow keys are the control's,
+ * and one Tab stop is the platform's doing. The per-cell test ids stay where
+ * they were, plus `data-checked`, so a probe that reads a snapshot still has
+ * the chosen cell without asking the accessibility tree.
  */
 import { useRef } from "react";
 import type {
@@ -33,9 +55,9 @@ import type {
   ReactElement,
   ReactNode,
 } from "react";
-import { Button } from "antd";
+import { Button, Segmented } from "antd";
 import { useT } from "@stapel/core";
-import { cssVar, radii, spacing } from "@stapel/tokens";
+import { 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
@@ -61,19 +83,26 @@ export interface PartitionChipsProps {
   /**
    * Which shape the row takes. `"chips"` (the default) is the phone's: a
    * wrapping row of rounded pills above the feed. `"segmented"` is the
-   * desktop RAIL's — one joined control under the axis's own label, which is
-   * how the reference classified draws the same choice (a car-type row:
-   * all, used, new) and what a 280px column has room for.
+   * desktop RAIL's — antd's `Segmented`, one joined control under the axis's
+   * own label, which is how the reference classified draws the same choice (a
+   * car-type row: all, used, new) and what a 280px column has room for.
    *
-   * The SEMANTICS do not vary with it. Both are the same `radiogroup` with
-   * the same roving tabindex and the same arrow keys — a segmented look is a
-   * border-radius decision, and swapping in a component that draws joined
-   * cells by giving up "exactly one of these is true" would trade the
-   * accessible half of this control for the visible half.
+   * The SEMANTICS do not vary with it: both are a `radiogroup` naming itself,
+   * with one Tab stop and the arrow keys moving the choice. What varies is
+   * who provides them — this file's `role="radio"` buttons in `chips`, the
+   * browser's own `input[type=radio]` in `segmented`.
    */
   readonly variant?: "chips" | "segmented";
 }
 
+/**
+ * The `value` of the parent cell inside the segmented control. `null` is this
+ * component's word for "the parent, unnarrowed" and a radio's value is a
+ * string, so the sentinel exists only between here and antd — it never
+ * reaches {@link PartitionChipsProps.onChange}, which still reports `null`.
+ */
+const ALL = "__all__";
+
 const CHIP: CSSProperties = { borderRadius: radii.full };
 
 const ROW: CSSProperties = {
@@ -82,33 +111,6 @@ const ROW: CSSProperties = {
   gap: spacing[2],
 };
 
-/**
- * The segmented row: one joined control, no gaps, the group's own outline.
- *
- * `gap: 0` plus a shared border is what makes three buttons read as one
- * control — the thing a rail needs, because a wrapping pill row in a 280px
- * column is two ragged lines. `overflow: hidden` clips the cells' own corners
- * to the group's radius so the ends are round and the joins are square.
- */
-const SEGMENTED_ROW: CSSProperties = {
-  display: "flex",
-  gap: 0,
-  inlineSize: "100%",
-  border: `1px solid ${cssVar("border")}`,
-  borderRadius: cssVar("radius-md"),
-  overflow: "hidden",
-};
-
-/** One cell of the segmented row: an equal share of the width, square joins,
- * no border of its own — the group draws the outline. */
-const SEGMENTED_CELL: CSSProperties = {
-  flex: "1 1 0",
-  minInlineSize: 0,
-  borderRadius: 0,
-  borderInline: "none",
-  borderBlock: "none",
-};
-
 /** The row's cells, as `[value, label]` — the parent first, then the
  * children in catalogue order. */
 function cells(
@@ -163,30 +165,68 @@ export function PartitionChips(props: PartitionChipsProps): ReactElement {
   const active = options.findIndex(([value]) => value === props.value);
   const stop = active >= 0 ? active : 0;
 
-  const segmented = props.variant === "segmented";
+  const name = props.label ?? t(SEARCH_I18N_KEYS.partitionLabel);
+
+  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
+    // — the radiogroup this variant used to only claim to be. `role` and
+    // `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 (
+      <Segmented
+        block
+        size="small"
+        role="radiogroup"
+        aria-label={name}
+        data-variant="segmented"
+        data-testid="partition-chips"
+        value={props.value ?? ALL}
+        options={options.map(([value, label]) => ({
+          value: value ?? ALL,
+          label: (
+            // The cell's test id and its chosen state, on the one node inside
+            // a cell this component owns — antd names the cells itself, and a
+            // label a radio is bound to is what a click has to land on.
+            <span
+              data-testid={`partition-chip-${value ?? "all"}`}
+              data-checked={value === props.value ? "true" : "false"}
+            >
+              {label}
+            </span>
+          ),
+        }))}
+        onChange={(next) => {
+          props.onChange(next === ALL ? null : String(next));
+        }}
+      />
+    );
+  }
+
   return (
     <div
-      style={segmented ? SEGMENTED_ROW : ROW}
-      data-variant={segmented ? "segmented" : "chips"}
+      style={ROW}
+      data-variant="chips"
       ref={row}
       role="radiogroup"
-      aria-label={props.label ?? t(SEARCH_I18N_KEYS.partitionLabel)}
+      aria-label={name}
       data-testid="partition-chips"
     >
       {options.map(([value, label], index) => {
         const selected = value === props.value;
         return (
           <Button
-            key={value ?? "__all__"}
+            key={value ?? ALL}
             size="small"
-            {...(segmented ? {} : { shape: "round" as const })}
+            shape="round"
             type={selected ? "primary" : "default"}
             role="radio"
             aria-checked={selected}
             // Roving tabindex: the row is ONE Tab stop and it lands on the
             // chosen chip, not on the first of eight.
             tabIndex={index === stop ? 0 : -1}
-            style={segmented ? SEGMENTED_CELL : CHIP}
+            style={CHIP}
             data-testid={`partition-chip-${value ?? "all"}`}
             data-analytics="none"
             data-analytics-reason="choosing a section is a read, not a flow step"