@eifi1/ui-kit 0.34.0 → 0.35.0

package/src/components/amount-input.tsx

@@ -100,9 +100,6 @@ export interface AmountInputProps {
   id?: string;
   /** Names the field when it has no visible `label` (a table cell, the display shape). */
   "aria-label"?: string;
-  /** @deprecated 0.34 — use `aria-label`; removed in 0.35 (refactor audit 2026-10, API-1).
-   *  Names the field only when `aria-label` is absent. */
-  ariaLabel?: string;
   /**
    * Set on the `<input>`, with `id` above. Declared so `Field`'s render-prop spread —
    * `{(ids) => <AmountInput {...ids} … />}` — is typed and reaches the input: the
@@ -382,7 +379,7 @@ function isResultOf(previous: string, text: string, settle: (text: string) => st
 }
 
 export function AmountInput(props: AmountInputProps) {
-  const { ref, value, onChange, currency, onCurrencyChange, placeholder, label, className, inputClassName, id, "aria-label": ariaLabelAttr, ariaLabel: ariaLabelProp, "aria-required": ariaRequired, autoFocus, tone = "neutral", negative = false, onNegativeChange, align = "start", labels, currencyNames, currencyOptions, digits: digitsProp, min, max, onCommit, disabledReasonDisplay } = props;
+  const { ref, value, onChange, currency, onCurrencyChange, placeholder, label, className, inputClassName, id, "aria-label": ariaLabel, "aria-required": ariaRequired, autoFocus, tone = "neutral", negative = false, onNegativeChange, align = "start", labels, currencyNames, currencyOptions, digits: digitsProp, min, max, onCommit, disabledReasonDisplay } = props;
   const generatedId = useId();
   const fieldId = id ?? generatedId;
   // The sign is DISPLAYED, not stored (live #201 rework). `value` is the
@@ -556,8 +553,7 @@ export function AmountInput(props: AmountInputProps) {
       <input
         ref={setRefs}
         id={fieldId}
-        // The DOM spelling wins; `ariaLabel` is the fallback for call sites not moved yet.
-        aria-label={ariaLabelAttr ?? ariaLabelProp}
+        aria-label={ariaLabel}
         type="text"
         // eslint-disable-next-line jsx-a11y/no-autofocus -- opt-in per call site (feedback #70)
         autoFocus={autoFocus}

package/src/components/calculator.tsx

@@ -37,9 +37,6 @@ interface CalculatorButtonProps {
   className?: string;
   /** The trigger's accessible name; wins over `calculator.open` from the provider. */
   "aria-label"?: string;
-  /** @deprecated 0.34 — use `aria-label`; removed in 0.35 (refactor audit 2026-10, API-1).
-   *  Names the trigger only when `aria-label` is absent. */
-  ariaLabel?: string;
   /** Screen-reader names for the panel's own controls. `aria-label` above already
    *  covers the trigger; these three were hardcoded English inside the popover,
    *  which a translating host had no way to reach. */
@@ -229,13 +226,11 @@ export function CalculatorButton({
   value,
   onChange,
   className,
-  "aria-label": ariaLabelAttr,
-  ariaLabel: ariaLabelProp,
+  "aria-label": ariaLabel,
   labels: labelsProp,
 }: CalculatorButtonProps) {
   // prop > provider > English, with the name prop folded in as the `open` key it has
-  // always been. The DOM spelling wins over the deprecated `ariaLabel`.
-  const ariaLabel = ariaLabelAttr ?? ariaLabelProp;
+  // always been.
   const fromProps = useMemo(
     () => (ariaLabel === undefined ? labelsProp : { ...labelsProp, open: ariaLabel }),
     [ariaLabel, labelsProp],

package/src/components/chart-zoom.tsx

@@ -3,12 +3,10 @@
 // axes). `SeriesChart` is how an app zooms; `SharedXZoom` gives a column of charts one x
 // window.
 //
-// 0.34 (refactor audit 2026-10, API-6b = MOD-10): the arithmetic and the HOC leave the
-// public surface in 0.35. They were exported because lenkbank's, later Kurvenschmiede's,
-// own tests used them; no file in any of the three apps names one today. The kit's own
-// modules import them from the core, so their removal is the block below.
-import * as core from "./chart-zoom-core";
-
+// Those two and the zoom's types are all that is public. The arithmetic and the HOC were
+// too until 0.35 (refactor audit 2026-10, API-6b = MOD-10; deprecated in 0.34): exported
+// because lenkbank's, later Kurvenschmiede's, own tests used them, and named by no file in
+// any of the three apps since. The kit's own modules import them from the core.
 export { SharedXZoom } from "./chart-zoom-core";
 export type {
   ZoomAxes,
@@ -22,44 +20,3 @@ export type {
   ZoomState,
   ZoomTarget,
 } from "./chart-zoom-core";
-
-/* ── Deprecated 0.34, removed in 0.35 ─────────────────────────────────────
- * Each is the core's own value under its old public name: SeriesChart draws the zoom
- * these compute, and a chart's `zoomAxes` prop is what an app sets. */
-
-/** @deprecated 0.34 — a series without `axis` is on the chart's single y axis, `"y"`;
- *  removed in 0.35 (API-6b). */
-export const DEFAULT_Y_AXIS = core.DEFAULT_Y_AXIS;
-/** @deprecated 0.34 — SeriesChart's zoom, which reads it; removed in 0.35 (API-6b). */
-export const ZOOM_SQUARE_ENOUGH = core.ZOOM_SQUARE_ENOUGH;
-/** @deprecated 0.34 — SeriesChart's zoom, which reads it; removed in 0.35 (API-6b). */
-export const ZOOM_MIN_DRAG = core.ZOOM_MIN_DRAG;
-/** @deprecated 0.34 — SeriesChart's zoom, which reads a drag this way; removed in 0.35
- *  (API-6b). */
-export const zoomAxesFor = core.zoomAxesFor;
-/** @deprecated 0.34 — SeriesChart's zoom, which reads a drag this way; removed in 0.35
- *  (API-6b). */
-export const selectionFromDrag = core.selectionFromDrag;
-/** @deprecated 0.34 — SeriesChart fits its axes with it; removed in 0.35 (API-6b). */
-export const axisExtent = core.axisExtent;
-/** @deprecated 0.34 — SeriesChart's zoom, which refits the axes a drag did not name;
- *  removed in 0.35 (API-6b). */
-export const fitYToX = core.fitYToX;
-/** @deprecated 0.34 — SeriesChart's zoom, which refits the axes a drag did not name;
- *  removed in 0.35 (API-6b). */
-export const fitXToY = core.fitXToY;
-/** @deprecated 0.34 — SeriesChart's zoom, which keeps its own state; removed in 0.35
- *  (API-6b). */
-export const NO_ZOOM = core.NO_ZOOM;
-/** @deprecated 0.34 — SeriesChart's zoom, which keeps its own state; removed in 0.35
- *  (API-6b). */
-export const zoomAfter = core.zoomAfter;
-/** @deprecated 0.34 — SeriesChart's zoom, which keeps its own state; removed in 0.35
- *  (API-6b). */
-export const zoomDomains = core.zoomDomains;
-/** @deprecated 0.34 — SeriesChart's `zoomAxes` prop, which says what its default is;
- *  removed in 0.35 (API-6b). */
-export const defaultZoomAxes = core.defaultZoomAxes;
-/** @deprecated 0.34 — SeriesChart, which is a chart wrapped in it, and SharedXZoom;
- *  removed in 0.35 (API-6b). */
-export const withChartZoom = core.withChartZoom;

package/src/components/chip-input.tsx

@@ -32,13 +32,6 @@ export interface ChipInputLabels {
 // Defined in ./chip-labels, which holds no component code (0.34, KS U8).
 export { DEFAULT_CHIP_INPUT_LABELS };
 
-/** @deprecated 0.34 — `useKitLabels("chipInput", DEFAULT_CHIP_INPUT_LABELS, labels)`, which
- *  the provider reaches too, or ChipInput's own `labels`; removed in 0.35 (refactor audit
- *  2026-10, API-6a). A merge from before the provider, which no kit component calls. */
-export function resolveChipInputLabels(labels?: Partial<ChipInputLabels>): ChipInputLabels {
-  return labels ? { ...DEFAULT_CHIP_INPUT_LABELS, ...labels } : DEFAULT_CHIP_INPUT_LABELS;
-}
-
 /**
  * `onChange` is the field's own — the whole LIST, not a DOM event — so the wrapper
  * div's `onChange` is omitted rather than shadowed. `placeholder` is likewise this

package/src/components/combobox.tsx

@@ -125,7 +125,7 @@ export interface ComboboxProps
   closeLabel?: string;
   /**
    * The phone sheet's heading — and, as a string, the dialog's accessible name — for a
-   * field whose label is drawn by someone else: a form's `FormLabel` above it,
+   * field whose label is drawn by someone else: a bound field's label above it,
    * which `RhfTextCombobox` hands over here (0.24). Default: `label`. Without either, the
    * full-screen sheet opened untitled and unnamed, the one screen on a phone that has to
    * say what it is asking for (live #200).

package/src/components/copy-button.tsx

@@ -1,4 +1,4 @@
-import type { ButtonHTMLAttributes } from "react";
+import type { ButtonHTMLAttributes, Ref } from "react";
 import { Check, Copy, X } from "lucide-react";
 import { cn } from "../lib/cn";
 import { useKitLabels, type LabelOverride } from "../i18n/kit-labels";
@@ -62,6 +62,10 @@ export interface CopyButtonProps
   /** Called with the real outcome once the copy settles. */
   onCopied?: (ok: boolean) => void;
   labels?: LabelOverride<CopyButtonLabels>;
+  /** The `<button>` in either variant — the {@link IconButton}'s or the {@link Button}'s,
+   *  never the tooltip's wrapper round it (0.35, round 0.35 R4, the follow-up to API-2).
+   *  It rides the rest of the props on to that kit button, whose own ref it is. */
+  ref?: Ref<HTMLButtonElement>;
 }
 
 const ICONS: Record<CopyState, typeof Copy> = { idle: Copy, copied: Check, failed: X };

package/src/components/currency-option-list.tsx

@@ -3,49 +3,15 @@ import type { ComponentPropsWithRef, ReactNode } from "react";
 import { cn } from "../lib/cn";
 import { foldForSearch } from "../lib/text-match";
 import { ComboboxPanel, type ComboboxCore, type ComboOption } from "./combobox-core";
+import { CURRENCIES, type CurrencyOption } from "../currencies";
 
-// The currency data and the one list both currency pickers render (round 0.34 Wave 2,
-// DUP-4). CurrencySelect re-exports the data under its own name, as it always has; the
-// list is package-private. Its own module, so AmountInput can render the list without a
-// cycle through currency-select.
-
-export interface CurrencyOption {
-  code: string;
-  name: string;
-  symbol: string;
-  /** ISO 3166-1 alpha-2 country code (lowercase) used by flag-icons. */
-  country: string;
-}
-
-export const CURRENCIES: CurrencyOption[] = [
-  { code: "EUR", name: "Euro", symbol: "€", country: "eu" },
-  { code: "USD", name: "US Dollar", symbol: "$", country: "us" },
-  { code: "GBP", name: "British Pound", symbol: "£", country: "gb" },
-  { code: "CHF", name: "Swiss Franc", symbol: "CHF", country: "ch" },
-  { code: "JPY", name: "Japanese Yen", symbol: "¥", country: "jp" },
-  { code: "CAD", name: "Canadian Dollar", symbol: "CA$", country: "ca" },
-  { code: "AUD", name: "Australian Dollar", symbol: "A$", country: "au" },
-  { code: "NZD", name: "New Zealand Dollar", symbol: "NZ$", country: "nz" },
-  { code: "SEK", name: "Swedish Krona", symbol: "kr", country: "se" },
-  { code: "NOK", name: "Norwegian Krone", symbol: "kr", country: "no" },
-  { code: "DKK", name: "Danish Krone", symbol: "kr", country: "dk" },
-  { code: "PLN", name: "Polish Zloty", symbol: "zł", country: "pl" },
-  { code: "CZK", name: "Czech Koruna", symbol: "Kč", country: "cz" },
-  { code: "HUF", name: "Hungarian Forint", symbol: "Ft", country: "hu" },
-  { code: "RON", name: "Romanian Leu", symbol: "lei", country: "ro" },
-  { code: "BGN", name: "Bulgarian Lev", symbol: "лв", country: "bg" },
-  { code: "TRY", name: "Turkish Lira", symbol: "₺", country: "tr" },
-  { code: "RUB", name: "Russian Ruble", symbol: "₽", country: "ru" },
-  { code: "CNY", name: "Chinese Yuan", symbol: "¥", country: "cn" },
-  { code: "HKD", name: "Hong Kong Dollar", symbol: "HK$", country: "hk" },
-  { code: "SGD", name: "Singapore Dollar", symbol: "S$", country: "sg" },
-  { code: "INR", name: "Indian Rupee", symbol: "₹", country: "in" },
-  { code: "BRL", name: "Brazilian Real", symbol: "R$", country: "br" },
-  { code: "MXN", name: "Mexican Peso", symbol: "MX$", country: "mx" },
-  { code: "ZAR", name: "South African Rand", symbol: "R", country: "za" },
-  { code: "ILS", name: "Israeli Shekel", symbol: "₪", country: "il" },
-  { code: "AED", name: "UAE Dirham", symbol: "د.إ", country: "ae" },
-];
+// The one list both currency pickers render (round 0.34 Wave 2, DUP-4). CurrencySelect
+// re-exports the data under its own name, as it always has; the list is package-private.
+// Its own module, so AmountInput can render the list without a cycle through
+// currency-select. The data itself is ../currencies since 0.35: an entry of its own that
+// imports nothing, which an app's build can read in Node (keksdose's flag subset).
+export { CURRENCIES };
+export type { CurrencyOption };
 
 export interface CurrencyFlagProps extends ComponentPropsWithRef<"span"> {
   /** ISO 3166-1 alpha-2, lowercase — the class flag-icons keys its sprite by. */

package/src/components/danger-confirm.tsx

@@ -92,7 +92,7 @@ export interface CurrentPasswordInputProps extends Omit<InputProps, "type" | "au
    * is named another way (`aria-label` / `aria-labelledby`), which then stays the only
    * name. Pass the app's own word on a sign-in form ("Password", "Your password"), or
    * `null` for a field whose `<label htmlFor>` is drawn elsewhere (a form library's
-   * `FormLabel`), which would otherwise be labelled twice.
+   * label), which would otherwise be labelled twice.
    */
   label?: ReactNode;
   /** The value as a string — the `(next) => …` shape, so a caller holding it in
@@ -125,8 +125,8 @@ export interface CurrentPasswordInputProps extends Omit<InputProps, "type" | "au
  *
  * Everything else is {@link Input}: the reveal toggle, `error` (under the field,
  * `aria-describedby`, `aria-invalid`), `invalid`, `name`, `id`, `autoFocus`, `required`.
- * The ref is the `<input>`, so it works with `@eifi1/ui-kit/rhf`'s `FormControl` /
- * a `register()` spread, and controlled or uncontrolled.
+ * The ref is the `<input>`, so it works with `@eifi1/ui-kit/rhf`'s `RhfField` / a
+ * `register()` spread, and controlled or uncontrolled.
  *
  * ```tsx
  * <CurrentPasswordInput name="password" label={t("password")} error={errors.password?.message}

package/src/components/data-table-filter-popover.tsx

@@ -9,7 +9,8 @@ import { dateRangePresets } from "../lib/dates";
 import { resolveFilter } from "./data-table-filters";
 import type { FilterValue } from "./data-table-filters";
 import type { DataTableColumn } from "./data-table";
-import { resolveDataTableLabels, type DataTableLabels } from "./data-table-labels";
+import type { DataTableLabels } from "./data-table-labels";
+import { resolveDataTableLabels } from "./data-table-shared";
 import { useKitLabelOverrides, useKitLocale } from "../i18n/kit-labels";
 
 interface FilterPopoverProps<T> {

package/src/components/data-table-labels.ts

@@ -6,7 +6,6 @@
 // A type-only import: erased at build time, so this module stays free of the table
 // itself (and of react-router), which `i18n/defaults` relies on.
 import type { DataTableSortLabels } from "./data-table";
-import type { LabelOverride } from "../i18n/kit-labels";
 
 /** The phone sort control's four keys (`sortBy`, `sortDefault`, `sortAscending`,
  *  `sortDescending`, 0.22.0) are {@link DataTableSortLabels}', declared beside the
@@ -89,7 +88,7 @@ export interface DataTableLabels extends DataTableSortLabels {
    * A column's filter button and panel: "Filter Amount", and "Filter Amount (active)"
    * while the column is filtered (round 0.34 Wave 2, BUG-7c). Every column's used to be
    * "Filter" alike, and "filtered" was a colour. An app that translated only `filter`
-   * gets `"<filter>: <column>"` from it — see {@link resolveDataTableLabels}.
+   * gets `"<filter>: <column>"` from it: DataTable derives the one from the other.
    */
   filterColumn: (column: string, active: boolean) => string;
 
@@ -171,90 +170,9 @@ export const DEFAULT_DATA_TABLE_LABELS: DataTableLabels = {
   // The phone sort control (0.22.0). The same words as `DEFAULT_DATA_TABLE_SORT_LABELS`
   // in data-table.tsx, written out rather than spread in: importing that VALUE here
   // would make data-table.tsx and this module import each other (data-table.tsx reads
-  // its resolver from here), and would pull the whole table into `i18n/defaults`.
+  // these defaults from here), and would pull the whole table into `i18n/defaults`.
   sortBy: "Sort by",
   sortDefault: "Default order",
   sortAscending: "Ascending",
   sortDescending: "Descending",
 };
-
-/**
- * Merge caller overrides onto the English defaults (presets merged too, key by key, as
- * the provider merges them — so the parameter is a {@link LabelOverride}).
- *
- * The parameter is lenient on purpose — a table with no labels at all still
- * renders — but that is also how a translated app ends up half English and never
- * hears about it: lenkbank ships nineteen of these keys in English in a German UI
- * today, because every one of them is backfilled silently. The kit will not start
- * throwing over it (three apps depend on the lenient merge), so
- * {@link missingDataTableLabels} is the other half: it answers which keys fell back,
- * and an app asserts on that in its OWN test, where the answer is actionable.
- *
- * @deprecated 0.34 — pass `labels` to DataTable, or the provider's `dataTable`, which this
- * merge serves; removed in 0.35 from the public surface, where DataTable keeps it as its
- * own (refactor audit 2026-10, API-6a). One app test calls it.
- */
-export function resolveDataTableLabels(partial?: LabelOverride<DataTableLabels>): DataTableLabels {
-  if (!partial) return DEFAULT_DATA_TABLE_LABELS;
-  // An `undefined` preset is skipped, as the provider skips it, rather than blanking one.
-  const presets = { ...DEFAULT_DATA_TABLE_LABELS.presets };
-  for (const [key, text] of Object.entries(partial.presets ?? {})) if (text !== undefined) presets[key] = text;
-  const merged: DataTableLabels = { ...DEFAULT_DATA_TABLE_LABELS, ...partial, presets };
-  // `columnsCount` was split out of `columns` + a template literal. Consumers have
-  // been translating `columns` since 0.1, and backfilling the English default over
-  // that would hand them "Columns (4/9)" back for having translated the key that
-  // existed at the time — the same silent-English failure the audit records against
-  // this file. So the count is derived from the RESOLVED `columns` unless the caller
-  // states the whole sentence, which is the escape hatch for a language where the
-  // parenthetical does not fit.
-  if (partial.columns !== undefined && partial.columnsCount === undefined) {
-    merged.columnsCount = (visible, total) => `${merged.columns} (${visible}/${total})`;
-  }
-  // The same for `filterColumn` (0.34), from a translated `filter`: the app's own word
-  // with the column, rather than English for having translated the key that existed.
-  if (partial.filter !== undefined && partial.filterColumn === undefined) {
-    merged.filterColumn = (column) => `${merged.filter}: ${column}`;
-  }
-  return merged;
-}
-
-/**
- * The label keys `labels` does not supply, and which therefore come back English
- * from {@link resolveDataTableLabels}.
- *
- * For a consumer's own test:
- *
- * ```ts
- * expect(missingDataTableLabels(de.dataTable)).toEqual([]);
- * ```
- *
- * which fails the day the kit adds a key — which is the point. Adding a label is
- * additive here and a silent regression in a translated app, and nothing else in
- * either repository can tell the two apart.
- *
- * Preset labels are reported one at a time (`presets.yesterday`), because `presets`
- * is a `Record` merged key by key: answering `"presets"` would say nothing about
- * which of the eleven are still English.
- *
- * @deprecated 0.34 — `missingKitLabels(labels, DEFAULT_UI_KIT_LABELS)`, which checks every
- * namespace, the table's among them, and which all three apps' tests already call;
- * removed in 0.35 (refactor audit 2026-10, API-6a).
- */
-export function missingDataTableLabels(labels?: Partial<DataTableLabels>): string[] {
-  const missing: string[] = [];
-  for (const key of Object.keys(DEFAULT_DATA_TABLE_LABELS) as Array<keyof DataTableLabels>) {
-    if (key === "presets") continue;
-    if (labels?.[key] !== undefined) continue;
-    // `columnsCount` is DERIVED from a translated `columns` by the resolver above,
-    // so a caller who set that one is not leaking English here. Reporting it would
-    // send them to translate a key they have already covered, and an `toEqual([])`
-    // assertion built on this would never go green.
-    if (key === "columnsCount" && labels?.columns !== undefined) continue;
-    if (key === "filterColumn" && labels?.filter !== undefined) continue;
-    missing.push(key);
-  }
-  for (const preset of Object.keys(DEFAULT_DATA_TABLE_LABELS.presets)) {
-    if (labels?.presets?.[preset] === undefined) missing.push(`presets.${preset}`);
-  }
-  return missing;
-}

package/src/components/data-table-shared.tsx

@@ -1,13 +1,16 @@
 import type { CSSProperties, ReactNode } from "react";
 import { ROW_ACTIONS_KEY } from "./data-table-row-actions";
-import type { DataTableLabels } from "./data-table-labels";
+import { DEFAULT_DATA_TABLE_LABELS, type DataTableLabels } from "./data-table-labels";
 import type { DataTableCellProps, DataTableColumn, DataTableHeadProps } from "./data-table";
+import type { LabelOverride } from "../i18n/kit-labels";
 
 // What DataTable shares with its header (data-table-head.tsx), its column panel and its
 // phone layout (data-table-mobile.tsx): the cell-attribute and alignment rules, a
 // column's plain-text name, and the row link. Moved out of data-table.tsx unchanged
 // (refactor audit 2026-10, MOD-3), into a module of their own so none of those has to
-// import data-table.tsx at run time — which imports them.
+// import data-table.tsx at run time — which imports them. Since 0.35 also the table's
+// label resolver, which DataTable and its FilterPopover share and the barrel no longer
+// exports (round 0.35 R1).
 
 /**
  * Split a caller's cell attributes into what may reach the element and what the kit
@@ -80,6 +83,56 @@ export function columnLabel<T>(col: DataTableColumn<T>, labels?: DataTableLabels
   return col.headerText ?? (typeof col.header === "string" ? col.header : col.key);
 }
 
+/**
+ * The table's labels: caller overrides merged onto the English defaults (presets merged
+ * too, key by key, as the provider merges them — so the parameter is a
+ * {@link LabelOverride}).
+ *
+ * DataTable's own, and FilterPopover's: public until 0.35, when it left the barrel for
+ * DataTable's `labels` and the provider's `dataTable`, which it serves (round 0.35 R1,
+ * refactor audit 2026-10 API-6a). It stays a resolver rather than `useKitLabels` for the
+ * two keys it derives (`columnsCount`, `filterColumn`), which a plain merge would not.
+ *
+ * Lenient on purpose — a table with no labels at all still renders — so a translated app
+ * finds out what fell back to English from `missingKitLabels(labels,
+ * DEFAULT_UI_KIT_LABELS)` in its own test, where the answer is actionable.
+ */
+export function resolveDataTableLabels(
+  ...layers: (LabelOverride<DataTableLabels> | undefined)[]
+): DataTableLabels {
+  if (!layers.some(Boolean)) return DEFAULT_DATA_TABLE_LABELS;
+  // The layers in order, the provider's then the prop's, later winning key by key. An
+  // `undefined` key is skipped, as `useKitLabels` skips it, rather than blanking the word
+  // under it: DataTable spread `{ ...provider, ...prop }`, so `labels={{ autoSize:
+  // undefined }}` blanked the provider's word and the English one (round 0.35). `presets`
+  // is a record and is merged the same way, so renaming one keeps the other ten.
+  const partial: Partial<Omit<DataTableLabels, "presets">> = {};
+  const presets = { ...DEFAULT_DATA_TABLE_LABELS.presets };
+  for (const layer of layers) {
+    for (const [key, value] of Object.entries(layer ?? {})) {
+      if (value === undefined) continue;
+      if (key !== "presets") Object.assign(partial, { [key]: value });
+      else for (const [preset, text] of Object.entries(value)) if (text !== undefined) presets[preset] = text;
+    }
+  }
+  const merged: DataTableLabels = { ...DEFAULT_DATA_TABLE_LABELS, ...partial, presets };
+  // `columnsCount` was split out of `columns` + a template literal. Consumers have
+  // been translating `columns` since 0.1, and backfilling the English default over
+  // that would hand them "Columns (4/9)" back for having translated the key that
+  // existed at the time. So the count is derived from the RESOLVED `columns` unless the
+  // caller states the whole sentence, which is the escape hatch for a language where
+  // the parenthetical does not fit.
+  if (partial.columns !== undefined && partial.columnsCount === undefined) {
+    merged.columnsCount = (visible, total) => `${merged.columns} (${visible}/${total})`;
+  }
+  // The same for `filterColumn` (0.34), from a translated `filter`: the app's own word
+  // with the column, rather than English for having translated the key that existed.
+  if (partial.filter !== undefined && partial.filterColumn === undefined) {
+    merged.filterColumn = (column) => `${merged.filter}: ${column}`;
+  }
+  return merged;
+}
+
 /**
  * Whether a click that reached `row`'s handler did not start in the row's own DOM.
  *

package/src/components/data-table.tsx

@@ -5,7 +5,15 @@ import { Spinner } from "./spinner";
 import { ROW_ACTIONS_KEY, useRowActionColumn } from "./data-table-row-actions";
 import { useColumnResize } from "./data-table-resize";
 import { useRangeSelection } from "./data-table-selection";
-import { RowLink, cleanAttrs, columnLabel, fromOutside, logicalAlign, splitCellProps } from "./data-table-shared";
+import {
+  RowLink,
+  cleanAttrs,
+  columnLabel,
+  fromOutside,
+  logicalAlign,
+  resolveDataTableLabels,
+  splitCellProps,
+} from "./data-table-shared";
 import { MobileFilters, MobileRow, MobileSort, StackedFields } from "./data-table-mobile";
 import { DataTableHead } from "./data-table-head";
 import { ColumnSettingsPanel } from "./data-table-column-settings";
@@ -20,7 +28,7 @@ import type { SwipeAction } from "./swipeable-row";
 import { FullBleedDialog } from "./full-bleed-dialog";
 import { usePhoneLayout } from "../hooks/use-breakpoint";
 import { useAnnounce } from "../hooks/use-announce";
-import { DEFAULT_DATA_TABLE_LABELS, resolveDataTableLabels, type DataTableLabels } from "./data-table-labels";
+import { DEFAULT_DATA_TABLE_LABELS, type DataTableLabels } from "./data-table-labels";
 import { useKitLabelOverrides, useKitLocale, useKitTableStorageKeyPrefix, type LabelOverride } from "../i18n/kit-labels";
 import { useEdgeFade } from "../lib/strip-fade";
 import { dirOf, type Direction } from "../lib/direction";
@@ -294,6 +302,16 @@ export interface DataTableProps<T> {
   onFiltersChange?: (next: FilterState) => void;
   sorts?: SortState[];
   onSortsChange?: (next: SortState[]) => void;
+  /**
+   * Controlled page size, as `sorts` above: the table pages by it and hands its pager's
+   * choice to `onPageSizeChange` (`Infinity` is "All"). For tables that page ALIKE —
+   * `TranslationReviewPanel`'s groups share one page size as they share one sort
+   * (0.35). Left out, the table keeps its own, from `defaultPageSize`, the URL and
+   * `storageKey`. A change of value sends a client-side table back to page 1. In
+   * `serverPagination` mode the page size is `serverPagination.pageSize`.
+   */
+  pageSize?: number;
+  onPageSizeChange?: (pageSize: number) => void;
   /**
    * Opt-in multi-row selection (desktop table only). When provided, a leading
    * checkbox column is rendered with a select-all box in the header; the owner
@@ -556,7 +574,7 @@ export interface DataTableProps<T> {
    * On a phone it heads the summary card, which is also named by it.
    *
    * There is no built-in default word: a new kit label key is a silent English string
-   * in every translated app (see `missingDataTableLabels`), and the caller has the
+   * in every translated app (see `missingKitLabels`), and the caller has the
    * word in its own catalogue already. Without it the row is unlabelled on screen —
    * pass one.
    */
@@ -728,6 +746,8 @@ export function DataTable<T>({
   onFiltersChange,
   sorts: sortsProp,
   onSortsChange,
+  pageSize: pageSizeProp,
+  onPageSizeChange,
   selection,
   labels: labelsProp,
   locale: localeProp,
@@ -775,19 +795,7 @@ export function DataTable<T>({
   // prop to, `TranslationReviewPanel`'s among them.
   const providerStorageKeyPrefix = useKitTableStorageKeyPrefix();
   const storageKeyPrefix = storageKeyPrefixProp ?? providerStorageKeyPrefix ?? DEFAULT_PERSIST_PREFIX;
-  const labels = useMemo(
-    () =>
-      resolveDataTableLabels(
-        labelOverrides || labelsProp
-          ? {
-              ...labelOverrides,
-              ...labelsProp,
-              presets: { ...labelOverrides?.presets, ...labelsProp?.presets },
-            }
-          : undefined,
-      ),
-    [labelOverrides, labelsProp],
-  );
+  const labels = useMemo(() => resolveDataTableLabels(labelOverrides, labelsProp), [labelOverrides, labelsProp]);
   const locale = useKitLocale(localeProp);
 
   // ---- Row actions ---- (data-table-row-actions.tsx)
@@ -830,6 +838,8 @@ export function DataTable<T>({
     defaultPageSize,
     sortsProp,
     filtersProp,
+    // Ignored in `serverPagination` mode, where the owner's is the page size.
+    pageSizeProp: isServer ? undefined : pageSizeProp,
   });
 
   // With the controls that change them switched off, persisted widths and hidden
@@ -1841,7 +1851,9 @@ export function DataTable<T>({
                 isServer
                   ? serverPagination!.onPageSizeChange
                   : (n) => {
-                      setPageSize(n);
+                      // To the owner when it holds the page size, as `commitSorts` does.
+                      if (onPageSizeChange) onPageSizeChange(n);
+                      else setPageSize(n);
                       setPage(0);
                     }
               }

package/src/components/dialog-frame.tsx

@@ -23,7 +23,9 @@ export { DEFAULT_DIALOG_FRAME_LABELS };
  * (`children` is the body here, not the whole panel) and `title`, which is the dialog's
  * HEADING and a ReactNode rather than the browser's tooltip string — the collision
  * `PickerSheet` met first. Everything else, `size`, `draggable`, `fullBleed`,
- * `onKeyDown`, a `data-tour` anchor, still reaches the `Modal`.
+ * `onKeyDown`, a `data-tour` anchor, still reaches the `Modal` — and since 0.35 `ref`
+ * (round 0.35 R4): the panel, the `role="dialog"` element the frame's header, body and
+ * actions sit in.
  */
 export interface DialogFrameProps extends Omit<ModalProps, "labelledBy" | "children" | "title"> {
   /** The heading, and therefore the dialog's accessible name (`aria-labelledby`). */