@eifi1/ui-kit 0.51.7 → 0.53.0

package/src/components/multi-select.tsx

@@ -48,9 +48,9 @@ export interface MultiSelectOption<V extends string | number = string | number>
  *  ids and `string[]` for string ones, and no call site casts. */
 export interface MultiSelectProps<V extends string | number = string | number>
   extends Omit<ComponentPropsWithoutRef<"div">, "onChange">, FieldHelpProps {
-  options: MultiSelectOption<V>[];
+  options: readonly MultiSelectOption<V>[];
   /** The chosen values — the select family's `value` (API-4). */
-  value?: V[];
+  value?: readonly V[];
   onChange: (next: V[]) => void;
   /** Singular/plural countable label, used when 1+ items are selected. Default:
    *  `labels.selectedCount`, else `multiSelect.selectedCount` from the provider — the
@@ -116,6 +116,10 @@ export interface MultiSelectProps<V extends string | number = string | number>
   ref?: Ref<HTMLButtonElement>;
 }
 
+/** "Select all" and "Clear": dimmed, with no hover, while there is nothing for them to do. */
+const TOOLBAR_BUTTON =
+  "rounded px-2 py-0.5 text-secondary hover:bg-hover aria-disabled:cursor-not-allowed aria-disabled:opacity-40 aria-disabled:hover:bg-transparent";
+
 /**
  * Pick several of a fixed list — a filter's accounts, a comparison's data sets — with a
  * search box, "Select all" and "Clear"; nothing picked reads as "all".
@@ -158,7 +162,7 @@ export function MultiSelect<V extends string | number = string | number>(props:
     "aria-required": ariaRequired,
     ...rest
   } = props;
-  const value = useMemo<V[]>(() => valueProp ?? [], [valueProp]);
+  const value = useMemo<readonly V[]>(() => valueProp ?? [], [valueProp]);
   // The rows as the family's options — the hint is the sublabel, searched like the label.
   const comboOptions = useMemo(
     () =>
@@ -338,21 +342,29 @@ export function MultiSelect<V extends string | number = string | number>(props:
         // hints are why it was widened at all (keksdose #147).
         width={{ minRem: 16, fit: true, maxRem: 32 }}
         className={panelClassName}
+        // Reached by Tab from the search box (the panel's rows are not tab stops), and
+        // `aria-disabled` with a guarded click rather than `disabled`: a pressed "Clear"
+        // with nothing left to clear disabled itself under the focus, which dropped it to
+        // <body> — JumpCalendar's arrows are the rule (refactor audit 2026-10-30, INP-9).
         toolbar={
           <div className="flex items-center justify-between gap-2 px-2 py-1.5 text-xs">
             <button
               type="button"
-              onClick={selectAll}
-              disabled={!canSelectAll}
-              className="rounded px-2 py-0.5 text-secondary hover:bg-hover disabled:opacity-40"
+              onClick={() => {
+                if (canSelectAll) selectAll();
+              }}
+              aria-disabled={!canSelectAll || undefined}
+              className={TOOLBAR_BUTTON}
             >
               {text.selectAll}
             </button>
             <button
               type="button"
-              onClick={clearAll}
-              disabled={!canClear}
-              className="rounded px-2 py-0.5 text-secondary hover:bg-hover disabled:opacity-40"
+              onClick={() => {
+                if (canClear) clearAll();
+              }}
+              aria-disabled={!canClear || undefined}
+              className={TOOLBAR_BUTTON}
             >
               {text.clear}
             </button>

package/src/components/nav-pills.tsx

@@ -59,7 +59,7 @@ export interface NavPillsProps<T extends string> extends Omit<
    * 0.49: `wrap` (default) puts the pills on as many rows as they need. `scroll` keeps
    * them on ONE row that scrolls sideways — faded at a cut edge, the current pill
    * scrolled into view (the row only, never the page) — for a strip that must stay one
-   * line high, as {@link SectionNav} under a page title on a phone.
+   * line high, as a section's pages under a page title on a phone.
    */
   layout?: "wrap" | "scroll";
   /** The `<nav>` (or the `<div role="group">`) — hence `HTMLElement` (0.34, API-2,

package/src/components/picker-sheet.tsx

@@ -3,6 +3,7 @@ import { createPortal } from "react-dom";
 import { X } from "lucide-react";
 import type { ComponentPropsWithoutRef, KeyboardEvent, ReactNode, Ref, RefObject } from "react";
 import { cn } from "../lib/cn";
+import { hasContent } from "../lib/presence";
 import { mergeRefs } from "./field-parts";
 import { CLIPS_ATTRIBUTE } from "../lib/clipping";
 import { DropdownSearchHeader } from "./dropdown";
@@ -119,7 +120,8 @@ export function PickerSheet({
   // one way out of a full-screen sheet speak the app's language without each of
   // them having to (see the prop's note in `EntityCombobox`).
   const labels = useKitLabels("pickerSheet", DEFAULT_PICKER_SHEET_LABELS, { close: closeLabel, done: doneLabel });
-  const hasFooter = (footer !== undefined && footer !== null && footer !== false) || Boolean(done);
+  // `hasContent`, so a `footer` of "" draws no empty bar (refactor audit 2026-10-30, DUP-14).
+  const hasFooter = hasContent(footer) || Boolean(done);
   useBodyScrollLock(open);
   /**
    * Back closes THE SHEET, not the dialog it was opened from (Keksdose live #309:
@@ -169,14 +171,15 @@ export function PickerSheet({
    * sheet knows when its own input exists. Popping the keyboard is the POINT here,
    * where in a form dialog it is the cost.
    *
-   * **`restoreFocus` is off**, which is the uncomfortable half. Every caller in this
-   * kit opens the sheet from the field's own `onFocus` handler, so handing focus back
-   * to that field on close re-opens the sheet the user has just dismissed — a row tap
-   * would select a value and immediately put the list back over it. The field that
-   * opened it is the only thing that knows whether re-focusing it means "open"; a sheet
-   * that cannot tell must not guess. The cost is that focus lands on `<body>` after a
-   * dismissal, which on the phone this shape is for costs nothing, and on a pointer
-   * device is what happened before this change too.
+   * **`restoreFocus` is off**, which is the uncomfortable half. `Combobox` and
+   * `InlineEntityCombobox` open the sheet from the field's own `onFocus` handler, so
+   * handing focus back to that field on close re-opens the sheet the user has just
+   * dismissed — a row tap would select a value and immediately put the list back over
+   * it. The field that opened it is the only thing that knows whether re-focusing it
+   * means "open"; a sheet that cannot tell must not guess. So the caller does it in
+   * `onClose` where it can: `ComboboxPanel`'s triggers open on a click, and its
+   * `onClose` hands focus back to the trigger (0.52, refactor audit 2026-10-30, INP-7) —
+   * a screen-reader user is in exactly this layout, and <body> was where they landed.
    */
   useFocusTrap(sheetRef, {
     active: open,

package/src/components/pie-chart-labels.ts

@@ -15,6 +15,13 @@ export interface PieChartLabels {
    * German, "42%" in English) — the function only arranges them.
    */
   slice: (label: string, value: string, percent: string) => string;
+  /**
+   * One slice's accessible name under `redact` (0.52): the label and the share, with no
+   * amount. `redact` blurs every figure on screen but not the ring, and the ring's names
+   * are attributes on untagged elements, which a session replay or a redaction keyed on
+   * `[data-private]` reads as they are. `percent` as for {@link PieChartLabels.slice}.
+   */
+  sliceShare: (label: string, percent: string) => string;
   /** The caption over the donut's centre figure. */
   total: string;
   /** What a chart with nothing to draw says, when the caller passes no `empty`. */
@@ -26,6 +33,7 @@ export interface PieChartLabels {
 export const DEFAULT_PIE_CHART_LABELS: PieChartLabels = {
   slices: "Chart slices",
   slice: (label, value, percent) => `${label}: ${value} (${percent})`,
+  sliceShare: (label, percent) => `${label}: ${percent}`,
   total: "Total",
   empty: "No data",
   legend: "Categories",

package/src/components/pie-chart.tsx

@@ -12,7 +12,8 @@ import type { ComponentProps, ComponentPropsWithRef, KeyboardEvent, ReactNode }
 import { Pie, PieChart as RechartsPieChart, Sector } from "recharts";
 import type { PieLabelRenderProps, PieSectorShapeProps } from "recharts";
 import { cn } from "../lib/cn";
-import { horizontalStep } from "../lib/direction";
+import { dirOf, rovingTarget } from "../lib/direction";
+import { shareFormat } from "../lib/share-format";
 import { useKitLabels, useKitLocale, type LabelOverride } from "../i18n/kit-labels";
 import { paletteFor } from "../theme/chart-palette";
 import { ChartContainer, ChartTooltip, ChartTooltipContent, type ChartConfig } from "./chart";
@@ -93,7 +94,8 @@ export interface PieChartProps extends Omit<ComponentPropsWithRef<"div">, "child
    * Tag every figure ON SCREEN `data-private` — the tooltip bubble, the centre and
    * `"value"` slice labels — so the host's demo-mode rule blurs it. A percentage alone
    * reveals no amount, so `"percent"` labels stay readable, and the slices themselves
-   * are not tagged: a blurred ring is no picture at all.
+   * are not tagged: a blurred ring is no picture at all. So a slice's NAME says no
+   * amount either (0.52): "Occupied: 60%" (`labels.sliceShare`), not `labels.slice`.
    */
   redact?: boolean;
   /** What to show with nothing to draw. Default: `labels.empty`. */
@@ -138,8 +140,9 @@ function RedactedTooltipContent(props: ComponentProps<typeof ChartTooltipContent
  * clockwise from twelve o'clock, the order of the legend — with ←/→ following the
  * reading direction in RTL; Home/End go to the first and last. Each slice is named
  * "Label: value (xx%)" (`labels.slice`), because a colour and an angle are nothing a
- * screen reader can say, and focusing one reads it out in the donut's centre. With
- * `onSliceClick`, Enter and Space activate it as a click does.
+ * screen reader can say — under `redact` "Label: xx%" (`labels.sliceShare`) — and
+ * focusing one reads it out in the donut's centre. With `onSliceClick`, Enter and Space
+ * activate it as a click does.
  *
  * The legend switches slices off (`legend="toggle"`); the percentages are always of
  * what is drawn. The plot is not mirrored in RTL (see `ChartContainer`); the legend
@@ -177,25 +180,14 @@ export function PieChart({
   const { scale } = useTextSize();
   const box = chartHeightProps(height);
   const numberFormat = useMemo(() => new Intl.NumberFormat(locale), [locale]);
-  const percentFormats = useMemo(
-    () => ({
-      whole: new Intl.NumberFormat(locale, { style: "percent", maximumFractionDigits: 0 }),
-      fine: new Intl.NumberFormat(locale, { style: "percent", maximumFractionDigits: 1 }),
-    }),
-    [locale],
-  );
   // Memoised, like everything the sectors are drawn from: they must not be rebuilt on
   // this component's own re-renders (see `pie` below).
   const formatValue = useCallback(
     (v: number) => (formatValueProp ? formatValueProp(v) : formatWithMinus(numberFormat, v)),
     [formatValueProp, numberFormat],
   );
-  // One decimal under 10 %, where rounding to whole percents starts to lie — a slice
-  // of 0.4 % labelled "0%" says it is not there.
-  const formatShare = useCallback(
-    (share: number) => (share < 0.1 ? percentFormats.fine : percentFormats.whole).format(share),
-    [percentFormats],
-  );
+  // One decimal under 10 %, the rule Treemap says its shares by too (lib/share-format).
+  const formatShare = useMemo(() => shareFormat(locale), [locale]);
 
   const [ownHidden, setOwnHidden] = useState<ReadonlySet<string>>(() => new Set());
   const hidden = hiddenProp ?? ownHidden;
@@ -273,17 +265,11 @@ export function PieChart({
       const d = drawn[index];
       if (!d) return <Sector key={key ?? undefined} {...sector} />;
       const onKeyDown = (event: KeyboardEvent<SVGGElement>) => {
-        const step = horizontalStep(event.key, event.currentTarget);
-        let target: number | undefined;
-        if (step) target = index + step;
-        else if (event.key === "ArrowDown") target = index + 1;
-        else if (event.key === "ArrowUp") target = index - 1;
-        else if (event.key === "Home") target = 0;
-        else if (event.key === "End") target = drawn.length - 1;
+        // Round the circle: past the last slice is the first, as the eye goes.
+        const target = rovingTarget(event.key, dirOf(event.currentTarget), index, drawn.length, true);
         if (target !== undefined) {
           event.preventDefault();
-          // Round the circle: past the last slice is the first, as the eye goes.
-          refs.current[((target % drawn.length) + drawn.length) % drawn.length]?.focus();
+          refs.current[target]?.focus();
         } else if (clickable && (event.key === "Enter" || event.key === " ")) {
           event.preventDefault();
           clickRef.current?.(d.slice.key, d.slice);
@@ -297,7 +283,15 @@ export function PieChart({
           role={clickable ? "button" : "img"}
           // The first slice until the effect below moves the stop.
           tabIndex={index === 0 ? 0 : -1}
-          aria-label={labels.slice(d.slice.label, formatValue(d.value), formatShare(d.share))}
+          // Under `redact` with no amount: the ring is left untagged so it stays a picture,
+          // and its names are attributes a session replay or a redaction keyed on
+          // `[data-private]` reads as they are — "Occupied: €6.00 (60%)" told the amount the
+          // blurred centre and tooltip hid (0.52 code review; Marcel's decision).
+          aria-label={
+            redact
+              ? labels.sliceShare(d.slice.label, formatShare(d.share))
+              : labels.slice(d.slice.label, formatValue(d.value), formatShare(d.share))
+          }
           data-slice={d.slice.key}
           onKeyDown={onKeyDown}
           onFocus={() => {
@@ -313,7 +307,7 @@ export function PieChart({
         </g>
       );
     },
-    [drawn, labels, formatValue, formatShare, clickable],
+    [drawn, labels, formatValue, formatShare, clickable, redact],
   );
 
   const label = useCallback(

package/src/components/popover.tsx

@@ -37,6 +37,9 @@ export { DEFAULT_POPOVER_LABELS };
  */
 export interface PopoverProps extends Omit<ComponentPropsWithoutRef<"div">, "children"> {
   trigger: (state: { open: boolean; toggle: () => void; ref: RefObject<HTMLButtonElement | null> }) => ReactNode;
+  /** The panel's content. `close` shuts the panel and, when focus is in it, puts focus
+   *  on the trigger before returning — so a dialog the same handler opens gives it back
+   *  there (0.52). */
   children: (close: () => void) => ReactNode;
   /**
    * The panel's width: `"18rem"` (the default) grows with the text size — the panel
@@ -125,6 +128,17 @@ export function Popover({
   // across a right-to-left calendar or filter rendered left-to-right.
   const [dir, setDir] = useState<Direction>("ltr");
   const close = () => setOpen(false);
+  // The `close` the children get also hands focus to the trigger, AT ONCE, when it is
+  // inside the panel. The trap restores it too, but only after the commit — and a dialog
+  // opened in the same handler records its own restore target during that commit's
+  // render: the menu item that is about to go. RowActions' "Delete" asks first, and the
+  // answered confirm dropped focus on <body>, mid-table (refactor audit 2026-10-30,
+  // INP-2). Escape and an outside press keep the plain close: nothing opens after them.
+  const closeFromPanel = () => {
+    const focusInside = panelRef.current?.contains(document.activeElement) ?? false;
+    setOpen(false);
+    if (focusInside) triggerRef.current?.focus();
+  };
   const toggle = () => {
     setDir(dirOf(triggerRef.current));
     setOpen((v) => !v);
@@ -242,7 +256,10 @@ export function Popover({
               className,
             )}
           >
-            {children(close)}
+            {
+              // eslint-disable-next-line react-hooks/refs -- handed to the items' handlers: it reads the trigger and the focus when an item is chosen, never while rendering
+              children(closeFromPanel)
+            }
           </div>,
           document.body,
         )}

package/src/components/row-actions.tsx

@@ -3,6 +3,7 @@ import type { KeyboardEvent, MouseEvent, ReactElement, ReactNode } from "react";
 import { MoreHorizontal } from "lucide-react";
 import type { LucideIcon } from "lucide-react";
 import { cn } from "../lib/cn";
+import { hasContent } from "../lib/presence";
 import { useLargeText } from "../hooks/use-large-text";
 import { useKitLabels, type LabelOverride } from "../i18n/kit-labels";
 import { Popover } from "./popover";
@@ -466,7 +467,7 @@ function stopActivationKeys(e: KeyboardEvent) {
  */
 function useActionHref(action: RowAction): string | undefined {
   const reason = useCommitReason(action.commit, action.disabledReason);
-  const refused = reason !== undefined && reason !== null && reason !== false && reason !== "";
+  const refused = hasContent(reason);
   return action.href !== undefined && !action.pending && !refused ? action.href : undefined;
 }
 

package/src/components/series-chart-axes.ts

@@ -143,8 +143,8 @@ export function oneAxis(
 
 /** One source's samples: an abscissa and the channels measured against it. */
 export interface SeriesSource {
-  x: number[];
-  channels: Record<string, number[]>;
+  x: readonly number[];
+  channels: Readonly<Record<string, readonly number[]>>;
 }
 
 /**
@@ -155,7 +155,7 @@ export interface SeriesSource {
  * has no sample the key is absent, and `connectNulls` bridges the hole with the same
  * straight segment an interpolation would have drawn — without claiming a measurement.
  */
-export function mergeSeries(sources: SeriesSource[]): Record<string, number>[] {
+export function mergeSeries(sources: readonly SeriesSource[]): Record<string, number>[] {
   const byAbscissa = new Map<number, Record<string, number>>();
   for (const source of sources) {
     source.x.forEach((value, index) => {
@@ -212,7 +212,12 @@ export function anchoredBand(extent: readonly [number, number] | undefined): [nu
  * it in its neighbour's colour on each click. Resolving the colours on the full list
  * and filtering after keeps each series in the colour its legend entry shows.
  */
-export function visibleSeries(series: readonly SeriesChartSeries[], hidden: ReadonlySet<string>): SeriesChartSeries[] {
+// Generic so a typed list comes back typed (0.53): a chart of `Month` rows takes it, and
+// its `dot`s still read `point.row` as a `Month`.
+export function visibleSeries<TRow extends object>(
+  series: readonly SeriesChartSeries<TRow>[],
+  hidden: ReadonlySet<string>,
+): SeriesChartSeries<TRow>[] {
   return series
     .map((entry, index) => ({ ...entry, color: entry.color ?? paletteFor(index) }))
     .filter((entry) => !hidden.has(entry.key));

package/src/components/series-chart-labels.ts

@@ -8,15 +8,18 @@
 export interface SeriesChartLabels {
   /** The button that puts a zoomed chart back to its full extent. Visible text. */
   resetZoom: string;
-  /** Accessible name of the drag surface laid over the plot. It is the only place the
-   *  gesture is explained, so it says how the drag is read and how to undo it. */
+  /** The drag-to-zoom gesture, said at the end of a zoomable chart's description (the
+   *  figure's `aria-describedby`; until 0.52 the name of the drag surface, an
+   *  `application` nothing could focus). It is the only place the gesture is explained,
+   *  so it says how the drag is read and how to undo it. */
   zoomHint: string;
   /** What a chart with nothing to draw says, when the caller passes no `empty`. */
   empty: string;
   /** Accessible name of a `ToggleLegend` — a group of switches, one per series. */
   legend: string;
-  /** Accessible name of the group of keyboard stops a clickable chart (`onPointClick`)
-   *  lays over its bars or periods — one tab stop, arrow keys between them. */
+  /** Accessible name of the group of keyboard stops a chart lays over its bars or
+   *  periods — one tab stop, arrow keys between them; buttons with `onPointClick`, and
+   *  since 0.52 images to read without. */
   points: string;
 }