@eifi1/ui-kit 0.33.1 → 0.34.0

package/src/components/toggle-group.tsx

@@ -1,14 +1,16 @@
-import { useId } from "react";
-import type { ComponentPropsWithoutRef, KeyboardEvent, ReactElement, ReactNode } from "react";
+import { useCallback, useId } from "react";
+import type { ComponentPropsWithoutRef, KeyboardEvent, ReactElement, ReactNode, Ref } from "react";
 import { cn } from "../lib/cn";
 import { horizontalStep } from "../lib/direction";
-import { FIELD_INVALID, FloatingField, Label } from "./ui";
+import { FIELD_INVALID, FloatingField, Label } from "./field-base";
 import { Tooltip } from "./tooltip";
 import { useCommitReason, type CommitScope } from "./write-lock";
+import { hasContent } from "../lib/presence";
 import {
+  assignRef,
   DISABLED_REASON_LINE_CLASS,
   FIELD_CAPTION_CLASS,
-  hasContent,
+  FIELD_ERROR_CLASS,
   isTextHint,
   LabelStrip,
   useDisabledReasonLine,
@@ -53,12 +55,6 @@ export interface ToggleGroupBaseProps<T extends string>
    * (docs/text-size-harmonization.md §4). The keyboard is the same either way.
    */
   overflow?: "truncate" | "wrap";
-  /**
-   * @deprecated Pass `aria-label` instead — the DOM spelling, which every other
-   * control in this kit now answers to. Kept working because three applications ship
-   * this one today; it names the group only when `aria-label` is absent.
-   */
-  ariaLabel?: string;
   /**
    * Show, refuse the change (Keksdose live #288: a payment dated in the future has no
    * state to set).
@@ -108,9 +104,11 @@ export interface ToggleGroupBaseProps<T extends string>
    * `"strip"`: the 11px static label (and `hint`) in a strip OVER the bare group, for a
    * group that stands in a row of fields but is not one (keksdose K2 — the transaction
    * row's cleared-status picker, live #288 / #431 / dev#468). No field border: the group
-   * keeps its own box, and its segments drop their vertical padding so a 16px strip
-   * plus the 26px group is exactly a labelled {@link Input}'s 42px, the label on the
-   * same line as theirs. `error` and `caption` go under the group, as in the other two.
+   * keeps its own box, and its segments drop their vertical padding and set a 16px line,
+   * so the 20px strip plus the 22px group is exactly a labelled {@link Input}'s 42px,
+   * the label on the same line as theirs and clear of the group's border (keksdose
+   * dev#593 — see `STRIP_SEGMENT`). `error` and `caption` go under the group, as in the
+   * other two.
    *
    * Inside a `Field`, pass no `label` at all and spread the render-prop instead —
    * `{(ids, { labelId }) => <ToggleGroup {...ids} aria-labelledby={labelId} … />}` —
@@ -173,6 +171,15 @@ export interface ToggleGroupBaseProps<T extends string>
    * no effect.
    */
   commit?: CommitScope;
+  /**
+   * The group — the `radiogroup` (or the pressed shape's `group`) the rest of the props go
+   * on — as a React 19 ref prop (0.34, API-3, refactor audit 2026-10). The group itself
+   * takes no focus, so its `focus()` lands where a keyboard would: the radio shape's one
+   * tab stop (the checked option, else the first), or in the pressed shape the pressed
+   * button, else the first. That is react-hook-form's focus-on-error, which /rhf's
+   * adapter reached by an id lookup carrying this same rule until now.
+   */
+  ref?: Ref<HTMLDivElement>;
 }
 
 /**
@@ -225,20 +232,61 @@ const CHROME_SEGMENT: Record<"sm" | "md", string> = { md: "py-0 leading-[1.125re
  * A `large:` class, so it costs no render and is right on the first paint.
  * `overflow="wrap"` wraps at every size already.
  *
- * 0.32.1 (Kurvenschmiede's 0.32 report): every count and every placement but the
- * strip, not only a field of four or more. Since a row breaks only where its labels do
- * not fit, a wrap only ever replaces a truncation — and three options in a card at
- * Extra large on a 360 px phone read "Syst… Li… D…". The strip keeps one row: its
- * 26 px group is what lines it up with the 42 px fields beside it (`STRIP_SEGMENT`).
+ * 0.32.1 (Kurvenschmiede's 0.32 report): every count and every placement, not only a
+ * field of four or more. Since a row breaks only where its labels do not fit, a wrap
+ * only ever replaces a truncation — and three options in a card at Extra large on a
+ * 360 px phone read "Syst… Li… D…".
+ *
+ * 0.34 (round 0.34 T1, text size §10.17): the strip too, which 0.32.1 kept to one row so
+ * its 26 px group lined up with the 42 px fields beside it (`STRIP_SEGMENT`). The size
+ * sweep read "Op…" in its segments at 360 px / Extra large — the same "Syst… Li… D…" —
+ * and a row of fields that grows to a taller cell (keksdose's status strip sits in an
+ * `items-start` grid) is the smaller loss. At Normal, and wherever it fits, it is the
+ * one row it was.
  */
 const WRAP_AT_LARGE = "large:flex-wrap";
 
 /**
- * The strip placement's segments: a 26px group (1 + 2 + 20 + 2 + 1) under the 16px
- * strip — `md`'s 20px text-sm line with no padding, `sm`'s 16px line with 2px either
- * side. See `LABEL_STRIP_PAD` for why 16.
+ * The strip placement's segments (keksdose dev#593, kk K4): a 22px group under the 20px
+ * strip, which is a labelled Input's 42px at Normal —
+ *
+ *     strip 20 + group (1 + 2 + 16 + 2 + 1) 22 = 42 = Input (1 + 16 + 20 + 4 + 1)
+ *
+ * — both sizes setting their text in a 16px line with no padding (`md`'s 14px, `sm`'s
+ * 12px). Until 0.34 the strip was 16px over a 26px group (a 20px line), and the label
+ * row, which ends 18px down, crossed the group's top border by 2px; see
+ * `LABEL_STRIP_PAD` in field-parts.tsx for the label row's sum. keksdose had the same
+ * fix locally: `pt-5` and `@3xl:leading-4`.
+ *
+ * At Large and Extra large the label stands above the group and there is no strip to
+ * share out, so the segments keep the line they had: `md` its text-sm line
+ * (`large:leading-5` — a label that wraps there, WRAP_AT_LARGE, needs it), `sm` its 2px
+ * either side.
  */
-const STRIP_SEGMENT: Record<"sm" | "md", string> = { md: "py-0", sm: "py-0.5" };
+const STRIP_SEGMENT: Record<"sm" | "md", string> = {
+  md: "py-0 leading-4 large:leading-5",
+  sm: "py-0 leading-4 large:py-0.5",
+};
+
+/**
+ * The strip placement's group is BLOCK-level (keksdose dev#593). Drawn `inline-flex`, it
+ * sat on a line box of the strip's own line height, and a 22px box on a taller line
+ * gained a pixel of leading above and below — 44px, not 42. Block-level, the group is
+ * exactly its box. keksdose wrote it as `[&>[role=radiogroup]]:flex` on the strip.
+ */
+const STRIP_GROUP = "flex";
+
+/**
+ * Where the group's `focus()` lands (see {@link ToggleGroupBaseProps.ref}): the radio
+ * shape's one tab stop, or the pressed shape's pressed button — else the first option a
+ * keyboard can reach. The rule /rhf's ToggleGroup adapter applied by id until 0.34.
+ */
+function groupFocusTarget(group: HTMLElement): HTMLElement | null {
+  return (
+    group.querySelector<HTMLElement>('button[tabindex="0"], button[aria-pressed="true"]') ??
+    group.querySelector<HTMLElement>("button:not(:disabled)")
+  );
+}
 
 /**
  * A line under the group saying what the CHOSEN option means — lenkbank's ToggleField
@@ -326,7 +374,6 @@ export function ToggleGroup<T extends string>(props: ToggleGroupProps<T>): React
     className,
     optionClassName,
     overflow = "truncate",
-    ariaLabel,
     disabled = false,
     size = "md",
     label,
@@ -338,12 +385,22 @@ export function ToggleGroup<T extends string>(props: ToggleGroupProps<T>): React
     disabledReasonDisplay,
     commit,
     "aria-label": ariaLabelAttr,
+    ref,
     ...restWithMode
   } = props;
   const labelId = useId();
   const errorId = useId();
   const reasonId = useId();
   const hintCaptionId = useId();
+  // The group's `focus()` is a no-op on a div with no tabindex; the caller's ref gets one
+  // that lands where the keyboard would (see `ref`).
+  const setGroup = useCallback(
+    (el: HTMLDivElement | null) => {
+      if (el) el.focus = (options?: FocusOptions) => groupFocusTarget(el)?.focus(options);
+      assignRef(ref, el);
+    },
+    [ref],
+  );
   // The lock's reason under a locked provider (with `commit`), else the group's own.
   const disabledReason = useCommitReason(commit, ownDisabledReason);
   const locked = hasContent(disabledReason);
@@ -363,9 +420,9 @@ export function ToggleGroup<T extends string>(props: ToggleGroupProps<T>): React
   const field = labelled && labelPlacement === "field";
   const above = labelled && labelPlacement === "above";
   const strip = labelled && labelPlacement === "strip";
-  // At Large and Extra large a truncating group wraps instead, the strip excepted (see
-  // WRAP_AT_LARGE).
-  const wrapAtLarge = overflow === "truncate" && !strip;
+  // At Large and Extra large a truncating group wraps instead, the strip too since 0.34
+  // (see WRAP_AT_LARGE).
+  const wrapAtLarge = overflow === "truncate";
   const hasError = labelled && hasContent(error);
   // Taken off the rest so neither reaches the DOM; `props` keeps them paired, which is
   // what lets the `onChange` below be called with `null` only in the mode that allows it.
@@ -454,19 +511,24 @@ export function ToggleGroup<T extends string>(props: ToggleGroupProps<T>): React
           // keyboard, which is the only input that needs it.
           //
           // The ring is the kit's focus frame (0.32, §5): `--focus-ring-width` wide.
-          overflow === "wrap" ? "whitespace-nowrap" : "min-w-0 truncate",
-          "flex-1 basis-auto rounded px-3 py-1.5 text-sm font-medium transition-colors focus:outline-none focus-visible:ring-inset focus-visible:ring-[var(--border-strong)]",
+          //
+          // From Large up the group wraps its ROW first (WRAP_AT_LARGE), so a segment's
+          // own text breaks only when one label is wider than a whole row — and then it
+          // wraps rather than ending in an ellipsis (`truncate-until-large`, text size
+          // §10.17; round 0.34 T1: the sweep read 'confirmVariant="da…' at 360 px).
+          overflow === "wrap" ? "whitespace-nowrap" : "min-w-0 truncate-until-large",
+          "flex-1 basis-auto rounded px-3 py-1.5 text-sm font-medium transition-colors focus:outline-none focus-visible:ring-inset focus-visible:ring-strong",
           FOCUS_RING_WIDTH,
           size === "sm" && "px-2 py-1 text-xs",
           // In the field chrome: no vertical padding, and the line that makes the
           // field 42px under a strip that clears the label — see CHROME_PAD. `sm`
           // keeps its 12px type here (it used to be overridden to the md line).
           field && CHROME_SEGMENT[size],
-          // In the strip placement: a 26px group under a 16px strip — STRIP_SEGMENT.
+          // In the strip placement: a 22px group under a 20px strip — STRIP_SEGMENT.
           strip && STRIP_SEGMENT[size],
           active
-            ? "bg-[var(--bg-inverse)] text-[var(--text-inverse)]"
-            : "text-[var(--text-secondary)] hover:bg-[var(--bg-hover)]",
+            ? "bg-inverse text-inverse"
+            : "text-secondary hover:bg-hover",
           // No hover fill on a group that cannot be changed — a segment that
           // lights up under the pointer is an offer, and there is none here. Not on
           // the chosen segment: its fill IS its state, and its inverse text would
@@ -494,11 +556,10 @@ export function ToggleGroup<T extends string>(props: ToggleGroupProps<T>): React
       // radiogroup role or the disabled state by accident. `className` is destructured
       // out entirely and merged through `cn`, so it is never in here.
       {...rest}
+      ref={setGroup}
       role={pressed ? "group" : "radiogroup"}
-      // The DOM spelling wins; `ariaLabel` is the fallback for the call sites that
-      // have not moved yet.
-      aria-label={ariaLabelAttr ?? ariaLabel}
-      aria-labelledby={labelled && ariaLabelAttr === undefined && ariaLabel === undefined ? labelId : rest["aria-labelledby"]}
+      aria-label={ariaLabelAttr}
+      aria-labelledby={labelled && ariaLabelAttr === undefined ? labelId : rest["aria-labelledby"]}
       aria-invalid={hasError || rest["aria-invalid"] || undefined}
       aria-describedby={
         [rest["aria-describedby"], hintAsCaption !== undefined && hintCaptionId, hasCaption && captionId, hasError && errorId]
@@ -522,7 +583,9 @@ export function ToggleGroup<T extends string>(props: ToggleGroupProps<T>): React
         // (The hover fill is the DESKTOP half of that report: Tailwind v4 wraps every
         // `hover:` in `@media (hover: hover)`, so a phone never paints it. The half a
         // phone does see is the focus ring — see the segment's own note below.)
-        "inline-flex w-full gap-0.5 rounded-md border border-[var(--border-strong)] bg-[var(--bg-surface)] p-0.5 shadow-sm",
+        "inline-flex w-full gap-0.5 rounded-md border border-strong bg-surface p-0.5 shadow-sm",
+        // Block-level under the strip, so it adds no line box's leading — STRIP_GROUP.
+        strip && STRIP_GROUP,
         overflow === "wrap" && "flex-wrap",
         wrapAtLarge && WRAP_AT_LARGE,
         // The whole group fades, the way every other disabled control in this
@@ -568,13 +631,13 @@ export function ToggleGroup<T extends string>(props: ToggleGroupProps<T>): React
       <p
         id={captionId}
         aria-live={captionIsLive ? "polite" : undefined}
-        className={cn("text-caption leading-snug text-[var(--text-muted)]", hasCaption && "mt-1")}
+        className={cn("text-caption leading-snug text-muted", hasCaption && "mt-1")}
       >
         {hasCaption ? captionNode : null}
       </p>
     ) : null;
   const errorEl = hasError ? (
-    <p id={errorId} className="mt-1 text-caption leading-tight text-[var(--danger)]">
+    <p id={errorId} className={FIELD_ERROR_CLASS}>
       {error}
     </p>
   ) : null;
@@ -607,7 +670,7 @@ export function ToggleGroup<T extends string>(props: ToggleGroupProps<T>): React
             id={labelId}
             disabled={dimmed}
             data-error={hasError || undefined}
-            className="data-[error=true]:text-[var(--danger)]"
+            className="data-[error=true]:text-danger"
           >
             {label}
           </Label>
@@ -624,7 +687,7 @@ export function ToggleGroup<T extends string>(props: ToggleGroupProps<T>): React
   }
   if (strip) {
     return (
-      <LabelStrip labelId={labelId} label={label} hint={labelHint} disabled={dimmed} pad="field" className={className}>
+      <LabelStrip labelId={labelId} label={label} hint={labelHint} disabled={dimmed} className={className}>
         {group}
         {belowEl}
         {captionEl}
@@ -655,9 +718,9 @@ export function ToggleGroup<T extends string>(props: ToggleGroupProps<T>): React
       >
         <div
           className={cn(
-            "flex flex-1 flex-col justify-center rounded-md border border-[var(--border)] bg-[var(--bg-surface)] px-1 shadow-sm",
+            "flex flex-1 flex-col justify-center rounded-md border border-subtle bg-surface px-1 shadow-sm",
             CHROME_PAD[size],
-            dimmed && "bg-[var(--bg-surface-2)] opacity-60",
+            dimmed && "bg-surface-2 opacity-60",
             hasError && FIELD_INVALID,
             chromeClassName,
           )}

package/src/components/toggle-legend.tsx

@@ -7,7 +7,7 @@
 import type { ReactNode } from "react";
 import { cn } from "../lib/cn";
 import { FOCUS_RING } from "./focus-ring";
-import { useKitLabels } from "../i18n/kit-labels";
+import { useKitLabels, type LabelOverride } from "../i18n/kit-labels";
 import { DEFAULT_SERIES_CHART_LABELS, type SeriesChartLabels } from "./series-chart-labels";
 
 /**
@@ -151,7 +151,7 @@ export interface ToggleLegendProps {
   showSingle?: boolean;
   className?: string;
   /** Per-instance strings over `<UiKitProvider labels={{ seriesChart }}>`. */
-  labels?: Partial<SeriesChartLabels>;
+  labels?: LabelOverride<SeriesChartLabels>;
 }
 
 /**
@@ -203,7 +203,7 @@ export function ToggleLegend({
             aria-pressed={!off}
             onClick={() => onToggle(entry.key)}
             className={cn(
-              "flex items-center gap-1.5 rounded text-start text-caption text-[var(--text-secondary)] transition-opacity hover:opacity-80",
+              "flex items-center gap-1.5 rounded text-start text-caption text-secondary transition-opacity hover:opacity-80",
               FOCUS_RING,
               off && "opacity-35",
               entry.align === "end" && "ms-auto",
@@ -237,7 +237,7 @@ export interface StaticLegendProps {
   as?: "ul" | "div";
   className?: string;
   /** Per-instance strings over `<UiKitProvider labels={{ seriesChart }}>`. */
-  labels?: Partial<SeriesChartLabels>;
+  labels?: LabelOverride<SeriesChartLabels>;
 }
 
 /**
@@ -285,7 +285,7 @@ export function StaticLegend({
         <Item
           key={entry.key}
           className={cn(
-            "flex items-center gap-1.5 text-caption text-[var(--text-secondary)]",
+            "flex items-center gap-1.5 text-caption text-secondary",
             entry.align === "end" && "ms-auto",
           )}
         >
@@ -335,7 +335,7 @@ export function LegendColumn({ children, className }: { children: ReactNode; cla
 export function LegendGroup({ title, children }: { title: ReactNode; children: ReactNode }) {
   return (
     <div className="flex min-w-0 flex-col items-start gap-1">
-      <span className="text-micro font-semibold uppercase tracking-wide text-[var(--text-muted)]">
+      <span className="text-micro font-semibold uppercase tracking-wide text-muted">
         {title}
       </span>
       <div className="flex flex-col items-start gap-y-0.5">{children}</div>

package/src/components/tooltip.tsx

@@ -16,8 +16,9 @@ import {
 } from "react";
 import { createPortal } from "react-dom";
 import { cn } from "../lib/cn";
-import { useEscapeKey, useOutsideClick } from "../hooks/use-dismiss";
+import { useDismissLayer, useOutsideClick } from "../hooks/use-dismiss";
 import { useAnchoredRect, type AnchorRect } from "../hooks/use-anchored-rect";
+import { viewportSize } from "../hooks/use-anchored-panel";
 import { dirOf, type Direction } from "../lib/direction";
 import { hasClippingAncestor } from "../lib/clipping";
 
@@ -72,7 +73,7 @@ function physicalSide(side: TooltipSide, dir: Direction): PhysicalSide {
  *  viewport term in this cap is what makes possible: a bubble never wider than the glass
  *  minus the margins always fits once slid. */
 const TOOLTIP_SURFACE =
-  "w-max max-w-[min(20rem,calc(100vw-1rem))] rounded-md border border-[var(--border)] bg-[var(--bg-surface)] px-2 py-1 text-xs font-medium text-[var(--text-primary)] shadow-lg";
+  "w-max max-w-[min(20rem,calc(100vw-1rem))] rounded-md border border-subtle bg-surface px-2 py-1 text-xs font-medium text-primary shadow-lg";
 
 const sidePositionClass: Record<TooltipSide, string> = {
   top: "bottom-full left-1/2 -translate-x-1/2 mb-1",
@@ -565,7 +566,10 @@ function useTooltipTrigger(
     setFocused(false);
     setTapped(false);
   };
-  useEscapeKey(() => setDismissed(true), open);
+  // A layer on the Escape stack while up (Wave 2, DUP-1): over a dialog, the first
+  // Escape dismisses the bubble — WCAG 1.4.13, without moving focus — and the next one
+  // the dialog. Inside a Modal the bubble used to be beyond reach of the key.
+  useDismissLayer(open, () => setDismissed(true));
   // A press anywhere else closes it — the case a blur does not cover: Safari moves no
   // focus on a tap, and a tap on plain text moves it nowhere.
   useOutsideClick(triggerRef, close, open);
@@ -804,24 +808,9 @@ function slideInto(low: number, high: number, extent: number, keepHigh = false):
   return 0;
 }
 
-/**
- * The glass a bubble has to stay on, in CSS pixels — `window.innerWidth` is the wrong
- * width on a phone (keksdose run 72, live #381). There it is the LAYOUT viewport, and
- * that grows to the page's width as soon as anything sticks out past the screen: 430 on
- * a 406px screen in Chromium's mobile emulation, with `position: fixed` layers laid out
- * against the 430. A bubble that had widened the page then measured itself as inside it.
- * The root element's client width is the initial containing block instead — the screen,
- * the width `100vw` and the media queries see — whatever overflows, and on a desktop it
- * also leaves a classic scrollbar out. It is 0 where nothing is laid out (jsdom), and the
- * window is the answer there. The height stays the window's: nothing measured grows it,
- * and a phone's collapsing toolbar makes the window the truer of the two.
- */
-function viewportSize(): TooltipViewport {
-  return {
-    width: document.documentElement.clientWidth || window.innerWidth,
-    height: window.innerHeight,
-  };
-}
+// The glass a bubble has to stay on — the root's client width, not `innerWidth` (keksdose
+// run 72, live #381) — is `viewportSize` in use-anchored-panel.ts since 0.34 (Wave 2,
+// DUP-7), where every anchored panel now reads it.
 
 /**
  * The in-place bubble's viewport clamp (keksdose G7): while `active`, measure the bubble

package/src/components/translation-review-editor.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useRef, useState } from "react";
 import type { ReactNode } from "react";
 
-import { useKitLabels } from "../i18n/kit-labels";
+import { useKitLabels, type LabelOverride } from "../i18n/kit-labels";
 import { cn } from "../lib/cn";
 import { useKitFormat } from "../lib/format";
 import { placeholderTokens, reviewWrite } from "../lib/translation-review";
@@ -15,7 +15,8 @@ import { AlertBanner } from "./alert-banner";
 import { Caption, SectionLabel } from "./text";
 import { DEFAULT_TRANSLATION_REVIEW_LABELS } from "./translation-review-labels";
 import type { TranslationReviewLabels } from "./translation-review-labels";
-import { Button, Textarea } from "./ui";
+import { Button } from "./button";
+import { Textarea } from "./textarea";
 import { COMMIT_EXCEPT_BILLING } from "./write-lock";
 
 /** A callback may return a promise: resolve and the editor closes, reject and it stays
@@ -53,7 +54,7 @@ export interface TranslationReviewEditorProps {
   /** Turns a rejection into words. Default {@link TranslationReviewLabels.failed}. */
   formatError?: (error: unknown) => ReactNode;
   className?: string;
-  labels?: Partial<TranslationReviewLabels>;
+  labels?: LabelOverride<TranslationReviewLabels>;
 }
 
 /** The wording a verdict was given on, under the line that says it changed. */
@@ -61,7 +62,7 @@ function Then({ label, text }: { label: string; text: string }) {
   return (
     <div className="mt-1.5 min-w-0">
       <span className="text-xs font-medium">{label}</span>
-      <p className="whitespace-pre-line break-words text-[var(--text-secondary)]">{text}</p>
+      <p className="whitespace-pre-line break-words text-secondary">{text}</p>
     </div>
   );
 }
@@ -153,21 +154,21 @@ export function TranslationReviewEditor({
 
   return (
     <div className={cn("min-w-0 space-y-3 text-sm", className)}>
-      <code className="block break-all text-xs text-[var(--text-muted)]">{row.key}</code>
+      <code className="block break-all text-xs text-muted">{row.key}</code>
 
       <div className="grid grid-cols-1 gap-3 md:grid-cols-2">
         <div className="min-w-0">
           <SectionLabel as="span" size="xs">
             {referenceLabel}
           </SectionLabel>
-          <p className="mt-1 whitespace-pre-line break-words text-[var(--text-secondary)]">{row.reference}</p>
+          <p className="mt-1 whitespace-pre-line break-words text-secondary">{row.reference}</p>
         </div>
         <div className="min-w-0">
           <SectionLabel as="span" size="xs">
             {localeLabel}
           </SectionLabel>
           {missing ? (
-            <p className="mt-1 italic text-[var(--text-muted)]">{labels.missingText}</p>
+            <p className="mt-1 italic text-muted">{labels.missingText}</p>
           ) : (
             <p lang={row.locale} className="mt-1 whitespace-pre-line break-words">
               {row.text}

package/src/components/translation-review-parts.tsx

@@ -2,7 +2,8 @@ import { useMemo } from "react";
 import type { ReactNode } from "react";
 import { Download } from "lucide-react";
 
-import { useKitLabels } from "../i18n/kit-labels";
+import { useKitLabels, type LabelOverride } from "../i18n/kit-labels";
+import { saveBlob } from "../lib/download";
 import { useKitFormat } from "../lib/format";
 import { summariseRows, translationCorrections } from "../lib/translation-review";
 import type {
@@ -17,7 +18,8 @@ import { ProgressBar } from "./progress-bar";
 import type { ProgressBarSegment } from "./progress-bar";
 import { DEFAULT_TRANSLATION_REVIEW_LABELS, reviewStatusLabel } from "./translation-review-labels";
 import type { TranslationReviewLabels } from "./translation-review-labels";
-import { Button, Tabs } from "./ui";
+import { Button } from "./button";
+import { Tabs } from "./tabs";
 
 /**
  * The small parts of the translation review, each usable on its own: the status
@@ -52,7 +54,7 @@ export interface ReviewStatusChipProps {
   caps?: boolean;
   className?: string;
   /** Prop > `<UiKitProvider labels={{ translationReview }}>` > English. */
-  labels?: Partial<TranslationReviewLabels>;
+  labels?: LabelOverride<TranslationReviewLabels>;
   [key: `data-${string}`]: string | number | boolean | undefined;
 }
 
@@ -95,7 +97,7 @@ export interface TranslationProgressProps {
   /** The list under the bar naming each part with its count. Default true. */
   legend?: boolean;
   className?: string;
-  labels?: Partial<TranslationReviewLabels>;
+  labels?: LabelOverride<TranslationReviewLabels>;
 }
 
 /**
@@ -163,7 +165,7 @@ export interface TranslationLocaleTabsProps {
   active: string;
   onChange: (locale: string) => void;
   className?: string;
-  labels?: Partial<TranslationReviewLabels>;
+  labels?: LabelOverride<TranslationReviewLabels>;
 }
 
 /**
@@ -214,7 +216,7 @@ export interface TranslationExportButtonProps {
    */
   onExport?: (corrections: TranslationCorrection[], file: Blob) => void;
   className?: string;
-  labels?: Partial<TranslationReviewLabels>;
+  labels?: LabelOverride<TranslationReviewLabels>;
 }
 
 /**
@@ -252,13 +254,7 @@ export function TranslationExportButton({
       onExport(corrections, file);
       return;
     }
-    const url = URL.createObjectURL(file);
-    const a = document.createElement("a");
-    a.href = url;
-    a.download = fileName ?? `translation-corrections-${now.toISOString().slice(0, 10)}.json`;
-    a.click();
-    // After the click has handed the URL to the download, not before.
-    setTimeout(() => URL.revokeObjectURL(url), 0);
+    saveBlob(file, fileName ?? `translation-corrections-${now.toISOString().slice(0, 10)}.json`);
   };
   return (
     <Button variant="secondary" disabled={corrections.length === 0} onClick={run} className={className}>

package/src/components/translation-review.tsx

@@ -3,7 +3,7 @@ import type { ReactNode } from "react";
 import { Check, ListChecks, PencilLine, RotateCcw } from "lucide-react";
 
 import { usePhoneLayout } from "../hooks/use-breakpoint";
-import { useKitLabels, useKitLocale } from "../i18n/kit-labels";
+import { useKitLabels, useKitLocale, type LabelOverride } from "../i18n/kit-labels";
 import { cn } from "../lib/cn";
 import {
   DEFAULT_TRANSLATION_REVIEW_FILTER,
@@ -43,7 +43,9 @@ import { TranslationReviewEditor } from "./translation-review-editor";
 import { DEFAULT_TRANSLATION_REVIEW_LABELS, reviewStatusLabel } from "./translation-review-labels";
 import type { TranslationReviewLabels } from "./translation-review-labels";
 import { ReviewStatusChip, TranslationProgress } from "./translation-review-parts";
-import { Button, IconButton, Select } from "./ui";
+import { Button } from "./button";
+import { IconButton } from "./icon-button";
+import { Select } from "./select";
 import { COMMIT_EXCEPT_BILLING, useWriteLock } from "./write-lock";
 
 export {
@@ -165,8 +167,17 @@ export interface TranslationReviewPanelProps {
   progress?: boolean;
   /** Rows per page. Default 50. */
   pageSize?: number;
-  /** Persists the table's sort and page size (DataTable's `storageKey`). */
+  /** Persists the table's sort and page size (DataTable's `storageKey`), under the
+   *  prefix below. */
   storageKey?: string;
+  /**
+   * The `localStorage` prefix in front of `storageKey` (DataTable's `storageKeyPrefix`).
+   * Left out, it is the provider's `tableStorageKeyPrefix`, then the kit's
+   * `"hbui-table:"` — so an app that sets its prefix on `UiKitProvider` needs nothing
+   * here. Before 0.34 the panel took no prefix and its view always landed under the
+   * kit's, which an app listing what it stores had to list as its own (KS U4).
+   */
+  storageKeyPrefix?: string;
   /** How a verdict's date reads in the editor. */
   formatDate?: (iso: string) => string;
   /** Turns a callback's rejection into words. Default {@link TranslationReviewLabels.failed}. */
@@ -290,7 +301,7 @@ export interface TranslationReviewPanelProps {
    *  the page's `h1`. */
   groupHeadingAs?: "h2" | "h3" | "h4";
   className?: string;
-  labels?: Partial<TranslationReviewLabels>;
+  labels?: LabelOverride<TranslationReviewLabels>;
 }
 
 
@@ -399,9 +410,9 @@ function useFilterEchoCheck(filterProp: Partial<TranslationReviewFilter> | undef
 /** The row's text — or, for a missing string, the line that says so. */
 function TextCell({ row, labels, clamp }: { row: TranslationRow; labels: TranslationReviewLabels; clamp?: boolean }) {
   return row.text === "" ? (
-    <span className="italic text-[var(--text-muted)]">{labels.missingText}</span>
+    <span className="italic text-muted">{labels.missingText}</span>
   ) : (
-    <span lang={row.locale} className={cn("whitespace-pre-line break-words", clamp && "line-clamp-3")}>
+    <span lang={row.locale} className={cn("whitespace-pre-line break-words", clamp && "line-clamp-3 large:line-clamp-none")}>
       {row.text}
     </span>
   );
@@ -444,6 +455,7 @@ export function TranslationReviewPanel({
   progress = true,
   pageSize = 50,
   storageKey,
+  storageKeyPrefix,
   formatDate,
   formatError,
   swipe = false,
@@ -701,7 +713,7 @@ export function TranslationReviewPanel({
     {
       key: "key",
       header: labels.key,
-      cell: (r) => <code className="break-all text-xs text-[var(--text-secondary)]">{r.key}</code>,
+      cell: (r) => <code className="break-all text-xs text-secondary">{r.key}</code>,
       sortBy: (r) => r.key,
       mobileHidden: true,
     },
@@ -709,7 +721,7 @@ export function TranslationReviewPanel({
       key: "reference",
       header: referenceLabel,
       cell: (r) => (
-        <span className="line-clamp-3 whitespace-pre-line break-words text-[var(--text-secondary)]">{r.reference}</span>
+        <span className="line-clamp-3 whitespace-pre-line break-words text-secondary">{r.reference}</span>
       ),
       mobileHidden: true,
     },
@@ -862,7 +874,7 @@ export function TranslationReviewPanel({
             onSortsChange: setGroupSorts,
             labels: { table: group.name },
           }
-        : { storageKey })}
+        : { storageKey, storageKeyPrefix })}
       isExpanded={(r) => r.id === openId}
       onRowClick={(r) => {
         if (openId !== r.id) keepGroupOpen(group?.key);
@@ -890,8 +902,8 @@ export function TranslationReviewPanel({
       )}
       mobileCard={(r) => (
         <div className="min-w-0 space-y-1">
-          <code className="block break-all text-xs text-[var(--text-muted)]">{r.key}</code>
-          <div className="text-sm text-[var(--text-primary)]">
+          <code className="block break-all text-xs text-muted">{r.key}</code>
+          <div className="text-sm text-primary">
             <TextCell row={r} labels={labels} clamp />
           </div>
           <div className="flex flex-wrap gap-1">
@@ -951,10 +963,10 @@ export function TranslationReviewPanel({
             </Button>
           ) : undefined
         }
-        bodyClassName="space-y-0 px-0 pb-0 border-t border-[var(--border)]"
+        bodyClassName="space-y-0 px-0 pb-0 border-t border-subtle"
       >
         {body && confirming === g.key && targets.length > 0 && (
-          <div className="border-b border-[var(--border)] p-3">
+          <div className="border-b border-subtle p-3">
             <AlertBanner tone="warning" size="sm">
               <div className="min-w-0 space-y-2">
                 <p id={questionId}>{labels.confirmGroup(targets.length, name)}</p>
@@ -1050,7 +1062,7 @@ export function TranslationReviewPanel({
         </div>
         <SearchField
           className="min-w-0 md:flex-1"
-          label={labels.search}
+          aria-label={labels.search}
           value={filter.query}
           onChange={(next) => setFilter({ query: next })}
         />