@eifi1/ui-kit 0.51.7 → 0.52.0

package/src/components/series-chart.tsx

@@ -57,6 +57,8 @@ import {
   type BarShapeProps,
 } from "recharts";
 import { ChartContainer, ChartTooltip, ChartTooltipContent, type ChartConfig } from "./chart";
+import { useFigureDescription } from "./chart-figure";
+import { rovingTarget } from "../lib/direction";
 import {
   DEFAULT_Y_AXIS,
   axisExtent,
@@ -123,7 +125,7 @@ import {
 import { useBreakpoint } from "../hooks/use-breakpoint";
 import { useTextSize } from "../theme/text-size";
 import { chartHeightProps, type ChartHeight } from "./chart-height";
-import { useChartEdge } from "./chart-edge";
+import { useChartEdge, useEdgesInForce } from "./chart-edge";
 import { cn } from "../lib/cn";
 import { formatWithMinus } from "../lib/minus";
 
@@ -562,11 +564,18 @@ export interface SeriesChartHit {
 }
 
 export interface SeriesChartProps {
-  /** One row per abscissa value. A missing key is a hole (see `connectNulls`). */
-  rows: readonly SeriesChartRow[];
-  series: SeriesChartSeries[];
+  /**
+   * One row per abscissa value. A missing key is a hole (see `connectNulls`).
+   *
+   * Any object (0.52, refactor audit 2026-10-30, API-2): an `interface` has no index
+   * signature, so a typed sweep did not fit `SeriesChartRow` and Kurvenschmiede cast its
+   * Ackermann rows `as unknown as Record<string, number>[]`. The chart reads the keys
+   * `series` and `x` name, and hands the row back as {@link SeriesChartRow}.
+   */
+  rows: readonly object[];
+  series: readonly SeriesChartSeries[];
   /** Default: one untitled axis, `"y"`. */
-  axes?: SeriesChartAxis[];
+  axes?: readonly SeriesChartAxis[];
   x?: SeriesChartX;
   /** A value in the tooltip, where a number stands on its own and needs its unit.
    *  Default: `Intl.NumberFormat` in the kit's locale. */
@@ -598,11 +607,11 @@ export interface SeriesChartProps {
    * as the curve twitching. Turn it on where series come and go by choice.
    */
   animationMs?: number;
-  spans?: SeriesChartSpan[];
+  spans?: readonly SeriesChartSpan[];
   /** Lines across the plot at one value. */
-  references?: SeriesChartReference[];
+  references?: readonly SeriesChartReference[];
   /** Single labelled points. */
-  markers?: SeriesChartMarker[];
+  markers?: readonly SeriesChartMarker[];
   /**
    * Which axes a drag may zoom: `"both"`, `"x"`, `"y"` or `"none"`. Default: read off
    * the marks — see `defaultZoomAxes` (lines both, areas x, bars none). An axis carrying
@@ -614,6 +623,10 @@ export interface SeriesChartProps {
    * A click on the plot: the slot under the pointer, and the series when it landed on a
    * bar. keksdose's drilldowns — a payee's month, a budget line, a spending category.
    * A drag that zoomed is not a click.
+   *
+   * The keyboard's stops are there either way (0.52, DSP-5): one per bar, or per slot of
+   * a chart without bars, named "period — series: value", behind ONE tab stop. With this
+   * they are buttons that Enter and Space activate; without, images to read.
    */
   onPointClick?: (hit: SeriesChartHit) => void;
   /** Where the tooltip may go: for a chart inside a scroll wrapper. See
@@ -662,6 +675,19 @@ export interface SeriesChartProps {
   labels?: LabelOverride<SeriesChartLabels>;
   /** BCP 47 tag for the default number formats. Default: the provider's. */
   locale?: string;
+  /**
+   * The chart's name. The chart is a `role="figure"` (0.52, refactor audit 2026-10-30,
+   * DSP-5), and a figure is found and told apart by its name — "Net worth", "Load over
+   * travel". Its values are read stop by stop (see {@link SeriesChartProps.onPointClick}).
+   */
+  "aria-label"?: string;
+  /**
+   * What the picture SHOWS, in a sentence — "Spending rose 12 % in May, led by rent." —
+   * the figure's accessible description: a line, an area and a ruler are nothing a screen
+   * reader can say. Followed, on a zoomable chart, by the drag gesture (`zoomHint`). Not
+   * drawn; a caption the eye should read too belongs in the page.
+   */
+  description?: string;
   /** Onto the chart's root (`ChartContainer`) — e.g. an app's own grid ink. */
   className?: string;
   /** The shortest bar drawn, in px, for every bar series that does not set its own
@@ -778,9 +804,9 @@ const STEP_WIDTH = 1.5;
 const BAR_RADIUS: [number, number, number, number] = [3, 3, 0, 0];
 
 /**
- * One keyboard stop of a clickable chart: a bar, or (a chart with no bars) a whole slot.
- * `from`/`to` bound its slot on the plotted number line — half way to each neighbour,
- * or to the edge of the window on show.
+ * One keyboard stop: a bar, or (a chart with no bars) a whole slot. `from`/`to` bound its
+ * slot on the plotted number line — half way to each neighbour, or to the edge of the
+ * window on show.
  */
 interface PointStop {
   index: number;
@@ -788,10 +814,21 @@ interface PointStop {
   key?: string;
   from: number;
   to: number;
-  /** The accessible name: where it is and what it says. */
-  name: string;
+  /** The accessible name: where it is and what it says. Asked only of a stop that is
+   *  drawn — see {@link ALL_STOPS_UP_TO}. */
+  name: () => string;
 }
 
+/**
+ * Up to this many stops, every one is drawn; past it, only the roving one, its two
+ * neighbours and the two ends (0.52, DSP-5) — every stop is still reached, by the arrows,
+ * Home and End. Since every chart has stops, a measurement chart has one per row:
+ * Kurvenschmiede draws 2000-row profiles (`maxRows`), and 2000 named `<rect>`s, each
+ * named through `Intl` on every render, are a DOM and an accessibility tree nobody walks
+ * one by one. A year of months, or of weeks, stays whole for browse mode.
+ */
+const ALL_STOPS_UP_TO = 100;
+
 /**
  * The shape of a series whose bar has keyboard focus: recharts' own rectangle, with an
  * outline on the one bar at `index` — drawn at the bar's exact geometry, which an
@@ -853,23 +890,25 @@ function MarkerLabel({ viewBox, value }: { viewBox?: { x?: number; y?: number; w
 }
 
 /**
- * The keyboard's way onto a clickable chart (`onPointClick`): one focusable `<rect>` per
- * bar, or per slot when there are no bars, laid over the plot INSIDE the recharts chart,
- * where the x scale answers.
+ * The keyboard's way onto a chart: one focusable `<rect>` per bar, or per slot when there
+ * are no bars, laid over the plot INSIDE the recharts chart, where the x scale answers.
  *
  * keksdose drew its weekday pattern as seven real `<button>`s (spending-tab.tsx) because
  * a recharts bar is reachable by nothing but the pointer. This is that, for every chart:
  *
  * - ONE tab stop (roving `tabIndex`): Tab moves past the chart, not through 30 bars.
  * - ←/→ step through the stops in order, ↑/↓ between the bars of one slot, Home/End.
- * - ↵ and Space report the stop as a click would — with the series for a bar.
- * - Each is a `role="button"` named "period — series: value".
+ * - Each is named "period — series: value".
+ * - With `onPointClick` (`onPick`) each is a `role="button"`, and ↵ and Space report the
+ *   stop as a click would — with the series for a bar. Without (0.52, refactor audit
+ *   2026-10-30, DSP-5) each is a `role="img"` to read, as PieChart's slices are: before,
+ *   such a chart was recharts' unnamed `role="application"` stop, whose arrows moved a
+ *   tooltip nothing announced.
  *
  * The stops take NO pointer events, so the drag-to-zoom layer, the tooltip and the
  * pointer's own clicks underneath behave exactly as they did. Focus is shown by the
  * slot tinted and, for a bar, its own outline (`focusedBarShape`) — and by the tooltip,
- * moved to the stop through `defaultIndex`, which recharts honours until a pointer has
- * hovered the chart.
+ * which recharts' own pointer is stood on the stop for (`pointAt`).
  */
 function PointKeys({
   stops,
@@ -884,40 +923,30 @@ function PointKeys({
   label: string;
   onFocusStop: (at: number) => void;
   onBlurStops: () => void;
-  onPick: (stop: PointStop) => void;
+  onPick?: (stop: PointStop) => void;
 }) {
   const plot = usePlotArea();
   const scale = useXAxisScale();
   const refs = useRef<(SVGRectElement | null)[]>([]);
   if (!plot || !scale || plot.width <= 0 || plot.height <= 0) return null;
 
-  const move = (at: number) => {
-    const next = Math.max(0, Math.min(stops.length - 1, at));
-    refs.current[next]?.focus();
-  };
   const onKeyDown = (at: number) => (event: KeyboardEvent<SVGRectElement>) => {
     const stop = stops[at];
     // ↑/↓ stay in the slot: the next or previous bar of the same period. The stops are
-    // in slot order, so a slot's bars are neighbours.
+    // in slot order, so a slot's bars are neighbours. ←/→, Home and End as Treemap's tiles
+    // take them (0.52 code review, deep, charts, finding 14): → is the next stop in any
+    // page, since the plot runs left to right in an RTL one too (see `ChartContainer`).
     const inSlot = (step: 1 | -1) => (stops[at + step]?.index === stop.index ? at + step : at);
     const target =
-      event.key === "ArrowRight"
-        ? at + 1
-        : event.key === "ArrowLeft"
-          ? at - 1
-          : event.key === "ArrowDown"
-            ? inSlot(1)
-            : event.key === "ArrowUp"
-              ? inSlot(-1)
-              : event.key === "Home"
-                ? 0
-                : event.key === "End"
-                  ? stops.length - 1
-                  : undefined;
+      event.key === "ArrowDown"
+        ? inSlot(1)
+        : event.key === "ArrowUp"
+          ? inSlot(-1)
+          : rovingTarget(event.key, "ltr", at, stops.length, false);
     if (target !== undefined) {
       event.preventDefault();
-      move(target);
-    } else if (event.key === "Enter" || event.key === " ") {
+      refs.current[target]?.focus();
+    } else if (onPick && (event.key === "Enter" || event.key === " ")) {
       event.preventDefault();
       onPick(stop);
     }
@@ -925,9 +954,14 @@ function PointKeys({
 
   const left = plot.x;
   const right = plot.x + plot.width;
+  const middle = plot.y + plot.height / 2;
+  // Every target an arrow, Home or End can name from the roving stop — see ALL_STOPS_UP_TO.
+  const drawn =
+    stops.length <= ALL_STOPS_UP_TO ? undefined : new Set([0, current - 1, current, current + 1, stops.length - 1]);
   return (
     <g role="group" aria-label={label}>
       {stops.map((stop, at) => {
+        if (drawn && !drawn.has(at)) return null;
         // An edge with no neighbour runs to the plot's edge.
         const a = finite(scale(stop.from)) ?? left;
         const b = finite(scale(stop.to)) ?? right;
@@ -939,9 +973,9 @@ function PointKeys({
             ref={(node) => {
               refs.current[at] = node;
             }}
-            role="button"
+            role={onPick ? "button" : "img"}
             tabIndex={at === current ? 0 : -1}
-            aria-label={stop.name}
+            aria-label={stop.name()}
             data-point-key={stop.key}
             x={x0}
             y={plot.y}
@@ -956,8 +990,19 @@ function PointKeys({
               // A bar outlines ITSELF (see `FOCUSED_BAR`); a slot has nothing else to.
               stop.key === undefined && "focus-visible:stroke-[var(--brand)]",
             )}
-            onFocus={() => onFocusStop(at)}
-            onBlur={onBlurStops}
+            onFocus={(event) => {
+              onFocusStop(at);
+              pointAt(event.currentTarget, (x0 + x1) / 2, middle);
+            }}
+            onBlur={(event) => {
+              onBlurStops();
+              // On to another stop: that one stands the pointer on itself. (`refs` holds a
+              // null for every stop not drawn, so a blur to nowhere is no stop.)
+              const next = event.relatedTarget as SVGRectElement | null;
+              if (!next || !refs.current.includes(next)) {
+                pointAt(event.currentTarget, left - 1, middle);
+              }
+            }}
             onKeyDown={onKeyDown(at)}
           />
         );
@@ -966,6 +1011,32 @@ function PointKeys({
   );
 }
 
+/**
+ * Stands recharts' pointer at (`x`, `y`) in the chart's own px, as a mouse moved there
+ * would — what the keyboard's stops show their tooltip by (0.52 code review, deep, charts,
+ * finding 4). Their `defaultIndex` alone moved it only until a pointer had hovered the
+ * chart: recharts reads it no more once a hover has an index, and a mouse that has left
+ * keeps its index. After one hover the arrows moved the tint, and the tooltip, the one
+ * place the value is drawn, stayed where the mouse had left it. recharts' own keyboard
+ * layer, which these stops replaced (DSP-5), drove the tooltip through its own state.
+ *
+ * A point off the plot (`x` left of it) takes the pointer off the chart: recharts hides
+ * its tooltip there, through the same frame-throttled path a pending move takes, so a
+ * blur right after a focus is never overtaken by it. recharts reads the pointer against
+ * its wrapper's box, scaled as the box is drawn (`getRelativeCoordinate`); the point is
+ * put back into that box.
+ */
+function pointAt(within: Element, x: number, y: number) {
+  const wrapper = within.closest<HTMLElement>(".recharts-wrapper");
+  if (!wrapper) return;
+  const box = wrapper.getBoundingClientRect();
+  const scaleX = wrapper.offsetWidth > 0 ? box.width / wrapper.offsetWidth : 1;
+  const scaleY = wrapper.offsetHeight > 0 ? box.height / wrapper.offsetHeight : 1;
+  wrapper.dispatchEvent(
+    new MouseEvent("mousemove", { bubbles: true, clientX: box.left + x * scaleX, clientY: box.top + y * scaleY }),
+  );
+}
+
 interface PlotProps extends Omit<SeriesChartProps, "rows" | "x"> {
   /** The rows AS PLOTTED — what the zoom fits on. The caller's are `model.source`. */
   rows: readonly SeriesChartRow[];
@@ -1000,6 +1071,8 @@ function SeriesPlot({
   axisBudget = "auto",
   onAxisBudget,
   maxRows,
+  "aria-label": ariaLabel,
+  description,
 }: PlotProps) {
   const labels = useKitLabels("seriesChart", DEFAULT_SERIES_CHART_LABELS, labelsProp);
   const locale = useKitLocale(localeProp);
@@ -1010,6 +1083,10 @@ function SeriesPlot({
   // Strokes, dashes and the grid stay px.
   const { scale } = useTextSize();
   const edgeFor = useChartEdge();
+  // The tiles' rule (0.52, DSP-18, Marcel's decision 3): the ink edge under More contrast
+  // only — at Standard it fell on 5 of 8 hues in light and on 2 in dark, the unevenness
+  // #642 took off the tiles.
+  const edges = useEdgesInForce("auto");
   const ticksAim = tickTarget(scale);
   const grow = (px: number) => (scale === 1 ? px : Math.round(px * scale));
   // The keyboard stops' roving tab stop, and the one that has focus (see `PointKeys`).
@@ -1085,13 +1162,31 @@ function SeriesPlot({
   // one value sizes both the chart and its empty state.
   const { className: heightClass, style: heightStyle } = chartHeightProps(height);
 
+  // A named figure, described by the caller's sentence and — where a drag zooms — the
+  // gesture (0.52, refactor audit 2026-10-30, DSP-5). The hint used to be the name of the
+  // zoom layer's rect, a `role="application"` that could not take focus. The description
+  // is `hidden`: read through `aria-describedby`, never twice in browse mode.
+  const drawable = model.source.length > 0 && series.length > 0;
+  const spoken = [description, drawable && zoom?.layer ? labels.zoomHint : undefined].filter(Boolean).join(" ");
+  // Inside the root, not after it as a sibling: a StaticSeriesChart then stopped being its
+  // parent's last child, and a stack's `space-y-*` / `divide-y` gave it a margin or a rule
+  // it never had (0.52 code review, deep, charts, findings 7 and 14 — Treemap's copy of this
+  // went the same way). The plot's root is `ChartContainer`, which takes the sentence itself.
+  const about = useFigureDescription(spoken || undefined);
+  const figure = { role: "figure", "aria-label": ariaLabel, "aria-describedby": about.describedBy } as const;
+
   // The empty state takes the chart's own height and is centred in it: a chart that
   // shrank to its "nothing to draw" sentence moved everything under it up the page
   // the moment a legend entry was switched off.
-  if (!model.source.length || !series.length) {
+  if (!drawable) {
     return (
-      <div className={cn("flex w-full items-center justify-center px-2 text-center", heightClass)} style={heightStyle}>
+      <div
+        {...figure}
+        className={cn("flex w-full items-center justify-center px-2 text-center", heightClass)}
+        style={heightStyle}
+      >
         {empty !== undefined ? empty : <p className="text-xs text-muted">{labels.empty}</p>}
+        {about.node}
       </div>
     );
   }
@@ -1268,14 +1363,15 @@ function SeriesPlot({
     return row ? { index: origin(index), row, x: xOf(index), key } : undefined;
   };
 
-  // The keyboard stops of a clickable chart — every bar with a value, slot by slot; or,
-  // with no bars, every slot with any value. Only what is inside the window on show.
+  // The keyboard stops — every bar with a value, slot by slot; or, with no bars, every
+  // slot with any value. Only what is inside the window on show. Named on demand: past
+  // ALL_STOPS_UP_TO only five are drawn, and naming is a date and a number format each.
   const stops: PointStop[] = [];
-  if (onPointClick) {
+  {
     const valueText = valueFormat ?? number;
     const nameOf = (entry: SeriesChartSeries) =>
       typeof entry.label === "string" || typeof entry.label === "number" ? String(entry.label) : entry.key;
-    const said = (entry: SeriesChartSeries, value: number) => {
+    const cellText = (entry: SeriesChartSeries, value: number) => {
       const name = nameOf(entry);
       return name ? `${name}: ${valueText(value)}` : valueText(value);
     };
@@ -1291,21 +1387,23 @@ function SeriesPlot({
       const from = k > 0 ? (placed[k - 1].at + at) / 2 : low;
       const to = k < placed.length - 1 ? (placed[k + 1].at + at) / 2 : high;
       // The heading the tooltip would give it, when that is text; else the tick.
-      const heading = xLabel(at);
-      const where = typeof heading === "string" && heading ? heading : xFormat(at);
+      const where = () => {
+        const heading = xLabel(at);
+        return typeof heading === "string" && heading ? heading : xFormat(at);
+      };
       const valued = (bars.length ? bars : series)
         .map((entry) => ({ entry, value: finite(rows[index]?.[entry.key]) }))
         .filter((cell): cell is { entry: SeriesChartSeries; value: number } => cell.value !== undefined);
       if (bars.length) {
         for (const { entry, value } of valued) {
-          stops.push({ index, key: entry.key, from, to, name: `${where} — ${said(entry, value)}` });
+          stops.push({ index, key: entry.key, from, to, name: () => `${where()} — ${cellText(entry, value)}` });
         }
       } else if (valued.length) {
         stops.push({
           index,
           from,
           to,
-          name: `${where} — ${valued.map(({ entry, value }) => said(entry, value)).join(", ")}`,
+          name: () => `${where()} — ${valued.map(({ entry, value }) => cellText(entry, value)).join(", ")}`,
         });
       }
     });
@@ -1359,6 +1457,7 @@ function SeriesPlot({
   const inRow = placement !== "cursor";
   const chart = (
     <ChartContainer
+      {...(inRow ? {} : { role: "figure", "aria-label": ariaLabel, description: spoken || undefined })}
       ref={setBox}
       data-axis-budget={budgeted.length ? budgetKey.replace(/\n/g, " ") : undefined}
       // "drawn/all" while `maxRows` thins: what a reader of the DOM (a test, a bug
@@ -1381,9 +1480,10 @@ function SeriesPlot({
         // Positive and negative layers stacked apart, as `axisExtent` fits them — a
         // month's expenses hang below the axis instead of eating into its income.
         stackOffset="sign"
-        // recharts' own keyboard layer makes the whole surface a tab stop whose arrows
-        // move the tooltip — a second stop beside `PointKeys`, and one ↵ does nothing on.
-        accessibilityLayer={!onPointClick}
+        // recharts' own keyboard layer makes the whole surface an unnamed
+        // `role="application"` tab stop whose arrows move a tooltip nothing announces —
+        // a second stop beside `PointKeys`, which every chart has since 0.52 (DSP-5).
+        accessibilityLayer={false}
         onClick={
           onPointClick
             ? (state) => {
@@ -1515,9 +1615,10 @@ function SeriesPlot({
           const type = entry.type ?? "line";
           const yAxisId = entry.axis ?? DEFAULT_Y_AXIS;
           const color = `var(--color-${entry.key})`;
-          // A filled mark in a hue under 3:1 against the ground gets a 1px ink edge
-          // (WCAG 1.4.11, anyplot's rule) — measured on the colour the config paints.
-          const edge = edgeFor(config[entry.key]?.color);
+          // Under More contrast, a filled mark in a hue under 3:1 against the ground gets
+          // a 1px ink edge (WCAG 1.4.11, anyplot's rule) — measured on the colour the
+          // config paints. At Standard none does (see `edges`).
+          const edge = edges === "contrast" ? edgeFor(config[entry.key]?.color) : undefined;
           const own = entry.dash ?? (entry.dashed ? 1 : 0);
           const dash = entry.step ? strokeDash(STEP_DASH) : typeof own === "string" ? own : strokeDash(own);
           const curve = entry.step ? "stepAfter" : (entry.curve ?? "monotone");
@@ -1568,9 +1669,11 @@ function SeriesPlot({
                 type={curve}
                 dataKey={entry.key}
                 stackId={entry.stack}
-                // The edge replaces the hue on the area's outline only; the fill keeps it.
+                // The edge replaces the hue on the area's outline only; the fill keeps it,
+                // and the outline its width (0.52, DSP-18: it was 1px, whatever
+                // `strokeWidth` said).
                 stroke={edge ?? color}
-                strokeWidth={edge ? 1 : width}
+                strokeWidth={width}
                 strokeDasharray={dash}
                 fill={color}
                 fillOpacity={entry.fillOpacity ?? (entry.stack !== undefined ? 0.55 : 0.2)}
@@ -1670,10 +1773,14 @@ function SeriesPlot({
               setKeyFocus(at);
             }}
             onBlurStops={() => setKeyFocus(undefined)}
-            onPick={(stop) => {
-              const hit = hitAt(stop.index, stop.key);
-              if (hit) onPointClick?.(hit);
-            }}
+            onPick={
+              onPointClick
+                ? (stop) => {
+                    const hit = hitAt(stop.index, stop.key);
+                    if (hit) onPointClick(hit);
+                  }
+                : undefined
+            }
           />
         )}
         {zoom?.layer}
@@ -1695,10 +1802,11 @@ function SeriesPlot({
     />
   );
   return (
-    <div className={cn("flex w-full flex-col", heightClass)} style={heightStyle}>
+    <div {...figure} className={cn("flex w-full flex-col", heightClass)} style={heightStyle}>
       {placement === "above" && row}
       {chart}
       {placement === "below" && row}
+      {about.node}
     </div>
   );
 }
@@ -1715,7 +1823,8 @@ function usePlotProps(props: SeriesChartProps): PlotProps {
   const x = props.x ?? {};
   const { rows } = props;
   const { type, key } = x;
-  const model = useMemo(() => xModel(rows, { type, key }), [rows, type, key]);
+  // Read by key, so any object is a row (API-2); `SeriesChartRow` is how the plot reads it.
+  const model = useMemo(() => xModel(rows as readonly SeriesChartRow[], { type, key }), [rows, type, key]);
   return { ...props, rows: model.rows, x: { key: model.plotKey }, model, xAxis: x };
 }
 

package/src/components/share-card.tsx

@@ -4,7 +4,7 @@ import { Trash2, UserPlus, UsersRound } from "lucide-react";
 
 import { useKitLabels, useKitLocale, type LabelOverride } from "../i18n/kit-labels";
 import { cn } from "../lib/cn";
-import { foldForSearch } from "../lib/text-match";
+import { matchesSearch, searchWords } from "../lib/text-match";
 import { AlertBanner } from "./alert-banner";
 import { Autocomplete } from "./autocomplete";
 import type { ComboOption } from "./combobox-core";
@@ -368,11 +368,11 @@ export function SharePanel({
   // The completion is a convenience, not a search: an address that matches nobody is
   // the ordinary case (somebody new), so no "No results" box opens over the field —
   // and over its error. The same narrowing Autocomplete applies, asked first — folded as
-  // every kit list folds (DUP-5).
-  const needle = foldForSearch((target ? "" : email).trim(), locale);
-  const offers =
-    needle !== "" &&
-    options.some((o) => [o.label, o.sublabel ?? ""].some((s) => foldForSearch(s, locale).includes(needle)));
+  // every kit list folds (DUP-5), and word by word as its list matches since 0.51.4
+  // (refactor audit 2026-10-30, DUP-4): "weber jonas" kept the list shut over a
+  // candidate the list itself would have shown.
+  const words = searchWords(target ? "" : email, locale);
+  const offers = words.length > 0 && options.some((o) => matchesSearch(words, [o.label, o.sublabel], locale));
 
   const captionNode = typeof caption === "function" ? caption(target) : caption;
   const shownError = error ?? failure;

package/src/components/sign-chip-labels.ts

@@ -4,6 +4,7 @@
 
 import type { SignChipLabels } from "./sign-chip";
 
+/** @deprecated 0.52 — a `Chip` of your own, as keksdose's DirectionToggle is (MOD-5); removed in 0.53. */
 export const DEFAULT_SIGN_CHIP_LABELS: SignChipLabels = {
   outflow: "Outflow",
   inflow: "Inflow",

package/src/components/sign-chip.tsx

@@ -9,7 +9,9 @@ import { DEFAULT_SIGN_CHIP_LABELS } from "./sign-chip-labels";
 // ── Labels ────────────────────────────────────────────────────────────────────
 
 /** The words a {@link SignChip} says — the `signChip` namespace of
- *  `<UiKitProvider labels>`, and per chip through its `labels` prop. */
+ *  `<UiKitProvider labels>`, and per chip through its `labels` prop.
+ *
+ * @deprecated 0.52 — a `Chip` of your own, as keksdose's DirectionToggle is (MOD-5); removed in 0.53. */
 export interface SignChipLabels {
   /** The chip's text while the figure is negative — money going out. */
   outflow: string;
@@ -28,6 +30,7 @@ export interface SignChipLabels {
 // Defined in ./sign-chip-labels, which holds no component code (0.34, KS U8).
 export { DEFAULT_SIGN_CHIP_LABELS };
 
+/** @deprecated 0.52 — a `Chip` of your own, as keksdose's DirectionToggle is (MOD-5); removed in 0.53. */
 export interface SignChipProps {
   /** The figure is negative (an outflow) — the same flag {@link AmountInput}'s
    *  `negative` is, so one state feeds both: `<AmountInput negative={neg}
@@ -76,6 +79,12 @@ export interface SignChipProps {
  * to own the row the two share, and every form lays that row out differently (beside
  * the figure on a phone, in a grid column on a desktop). The chip is the part that was
  * being re-written; the row stays the form's.
+ *
+ * Deprecated in 0.52, removed in 0.53 (decision 4 of the refactor audit 2026-10-30,
+ * MOD-5): keksdose, whose chip this was (K15), kept its own `DirectionToggle` on `Chip`
+ * and `Tooltip`, and no other app renders one.
+ *
+ * @deprecated 0.52 — a `Chip` of your own, as keksdose's DirectionToggle is (MOD-5); removed in 0.53.
  */
 export function SignChip({ negative, onNegativeChange, disabled, labels: labelsProp, className }: SignChipProps) {
   const labels = useKitLabels("signChip", DEFAULT_SIGN_CHIP_LABELS, labelsProp);

package/src/components/tabs-labels.ts

@@ -0,0 +1,13 @@
+// The English words of ./tabs, in a module with no component code: the English catalogue
+// (src/i18n/defaults.ts) imports them without the component, so `en` loads as one chunk
+// like the other languages (0.34, KS U8). ./tabs re-exports them. (In ui-labels.ts with the
+// field base's until 0.52, MOD-7.)
+
+import type { TabsLabels } from "./tabs";
+
+export const DEFAULT_TABS_LABELS: TabsLabels = {
+  add: "Add tab",
+  remove: (tab) => `Remove ${tab}`,
+  more: "More tabs",
+  previous: "Previous tabs",
+};

package/src/components/tabs.tsx

@@ -9,7 +9,7 @@ import { usePhoneLayout } from "../hooks/use-breakpoint";
 import { prefersReducedMotion } from "../lib/reduced-motion";
 import { useKitLabels, type LabelOverride } from "../i18n/kit-labels";
 import { mergeRefs } from "./field-parts";
-import { DEFAULT_TABS_LABELS } from "./ui-labels";
+import { DEFAULT_TABS_LABELS } from "./tabs-labels";
 import { IconButton } from "./icon-button";
 import { HIT_AREA_LARGE } from "./button-look";
 
@@ -55,7 +55,7 @@ export interface TabsLabels {
   previous: string;
 }
 
-// Defined in ./ui-labels, which holds no component code (0.34, KS U8).
+// Defined in ./tabs-labels, which holds no component code (0.34, KS U8).
 export { DEFAULT_TABS_LABELS };
 
 /**