@eifi1/ui-kit 0.51.7 → 0.52.0

package/src/components/account-chips.tsx

@@ -1,9 +1,10 @@
 import type { ReactElement, ReactNode } from "react";
 import type { LucideIcon } from "lucide-react";
 import { cn } from "../lib/cn";
-import { formatDate, formatRelativeTime, toDate, EMPTY_FORMATTED_VALUE } from "../lib/format";
+import { toDate, useKitFormat, EMPTY_FORMATTED_VALUE } from "../lib/format";
 import type { DateInput, FormatDateStyle, FormatRelativeTimeOptions } from "../lib/format";
-import { useKitDateFormatter, useKitLabels, useKitLocale, type LabelOverride } from "../i18n/kit-labels";
+import { useDayFormatter } from "../lib/day-format";
+import { useKitLabels, type LabelOverride } from "../i18n/kit-labels";
 import { toLocalIso } from "../lib/dates";
 import { Chip } from "./chip";
 import type { ChipLinkProps, ChipShape, ChipSize, ChipTone, ChipVariant } from "./chip";
@@ -292,17 +293,15 @@ export function AccountStateChip({
   // An `undefined` in the prop is skipped (the provider's merge does that), so an
   // optional value cannot blank a default.
   const labels = useKitLabels("accountState", DEFAULT_ACCOUNT_STATE_LABELS, labelsProp);
-  const locale = useKitLocale(localeProp);
-  const fromProvider = useKitDateFormatter();
+  // The kit's one day ladder: the provider's `formatDate`, else `Intl` in the provider's
+  // locale and `timeZone` (refactor audit 2026-10-30, DUP-2).
+  const day = useDayFormatter(null, localeProp);
   const when = state === "deletion" ? toDate(date ?? null) : null;
   let text: ReactNode;
   if (state !== "deletion") text = labels[state];
   else if (when) {
     // A date in a SENTENCE, so no weekday (keksdose's rule, KitDateFormatContext).
-    const day =
-      (fromProvider && fromProvider(toLocalIso(when), { unit: "day", source: "dateMark", locale, weekday: false })) ||
-      formatDate(when, "medium", { locale });
-    text = (labels.deletionOn ?? DEFAULT_ACCOUNT_STATE_LABELS.deletionOn)(day);
+    text = (labels.deletionOn ?? DEFAULT_ACCOUNT_STATE_LABELS.deletionOn)(day(date));
   } else text = labels.deletion ?? DEFAULT_ACCOUNT_STATE_LABELS.deletion;
   return (
     <Chip
@@ -355,14 +354,14 @@ export interface DateMarkProps {
 
 /**
  * A date in a table cell: a `<time>` with a machine-readable `dateTime`, nowrap and
- * tabular figures, in the provider's locale — or `empty` when there is none.
+ * tabular figures, in the provider's locale and `timeZone` — or `empty` when there is none.
  *
  * `display="date"` without a `dateStyle` is written by `<UiKitProvider formatDate>` when
  * the app set one (keksdose K12: its `DateCell` exists to put every column's date in the
- * app's date-format preference, weekday and all — dev#546), called with the LOCAL
- * calendar day of the value as `"YYYY-MM-DD"` and `weekday: true`. Without one, or for
- * an empty answer, it is `Intl`'s `medium` date as before. The relative display is not
- * a calendar day and keeps `formatRelativeTime`.
+ * app's date-format preference, weekday and all — dev#546), called with the calendar day
+ * of the value as `"YYYY-MM-DD"` (in the provider's `timeZone`, else the device's) and
+ * `weekday: true`. Without one, or for an empty answer, it is `Intl`'s `medium` date as
+ * before. The relative display is not a calendar day and keeps `formatRelativeTime`.
  */
 export function DateMark({
   value,
@@ -374,27 +373,25 @@ export function DateMark({
   locale: localeProp,
   className,
 }: DateMarkProps) {
-  const locale = useKitLocale(localeProp);
-  const fromProvider = useKitDateFormatter();
+  // The provider's `timeZone` (0.46) as well as its locale, also for the relative words
+  // and the exact line (refactor audit 2026-10-30, DUP-2: the raw formatters ignored it).
+  const { formatDate, formatRelativeTime } = useKitFormat(localeProp);
+  const day = useDayFormatter(null, localeProp);
   const date = toDate(value);
   const cls = cn("whitespace-nowrap tabular-nums", className);
   if (!date) return <span className={cn(cls, "text-muted")}>{empty}</span>;
   if (display === "date") {
-    const own =
-      dateStyle === undefined && fromProvider
-        ? fromProvider(toLocalIso(date), { unit: "day", source: "dateMark", locale, weekday: true })
-        : "";
     return (
       <time dateTime={date.toISOString()} className={cls}>
-        {own || formatDate(date, dateStyle ?? "medium", { locale })}
+        {day(value, { weekday: true, style: dateStyle ?? "medium", preference: dateStyle === undefined })}
       </time>
     );
   }
-  const text = formatRelativeTime(date, { ...relative, locale, absoluteStyle: dateStyle ?? "medium" });
-  const exact = formatDate(date, dateStyle ?? "dateTime", { locale });
+  const text = formatRelativeTime(date, { ...relative, absoluteStyle: dateStyle ?? "medium" });
+  const exact = formatDate(date, dateStyle ?? "dateTime");
   // Past `absoluteAfterDays` the relative words already ARE the date; then the exact
   // line alone, rather than the same day twice.
-  const sameDay = text === formatDate(date, dateStyle ?? "medium", { locale });
+  const sameDay = text === formatDate(date, dateStyle ?? "medium");
   const iso = date.toISOString();
   if (sameDay) {
     return (

package/src/components/alert-banner.tsx

@@ -1,9 +1,10 @@
-import { useId, useLayoutEffect, useRef, useState } from "react";
-import type { ComponentPropsWithoutRef, MouseEvent, ReactNode, Ref } from "react";
+import { useEffect, useId, useLayoutEffect, useRef, useState } from "react";
+import type { ComponentPropsWithoutRef, MouseEvent, ReactNode, Ref, RefObject } from "react";
 import { AlertTriangle, CheckCircle2, ChevronRight, Info, X } from "lucide-react";
 import { cn } from "../lib/cn";
 import { FOCUS_RING } from "./focus-ring";
 import { DEFAULT_COMMON_LABELS, useKitLabels } from "../i18n/kit-labels";
+import { focusFirst, focusIsLost, tabStopsAround, whenFocusLeftForNothing } from "../lib/focus-left";
 
 /** `info` (0.8.0) is the sky family, for news that is neither good nor bad: keksdose's
  *  preview and beta-performance banners, which borrowed `warning` for want of it and
@@ -185,10 +186,21 @@ interface AlertBannerBaseProps extends Omit<ComponentPropsWithoutRef<"div">, "on
   /** Replaces the tone's glyph — a `<Spinner label={null} />` for "Solving…", say.
    *  `null` draws none. Always decorative; the text carries the message. */
   icon?: ReactNode;
-  /** Renders an × at the end that calls this. The banner does not hide itself — the
-   *  caller removes it (and remembers that it did), as with every other kit control
-   *  whose state is app state. */
+  /**
+   * Renders an × at the end that calls this. The banner does not hide itself — the
+   * caller removes it (and remembers that it did), as with every other kit control
+   * whose state is app state.
+   *
+   * The focus (0.52, refactor audit 2026-10-30, DSP-15): the × that held it goes with the
+   * banner, and it fell to `<body>`. When the banner unmounts after its × was pressed and
+   * the focus has nowhere else, it moves on to the next control after the banner — where
+   * Tab from the × would have gone — or, at the end of the page, the one before it; to
+   * {@link dismissFocusRef} when given. A banner the caller keeps keeps its ×'s focus.
+   */
   onDismiss?: () => void;
+  /** Where the focus goes once the × has removed the banner (DSP-15) — a heading, the
+   *  control the banner was about. Default: the next control after the banner. */
+  dismissFocusRef?: RefObject<HTMLElement | null>;
   /** Accessible name of the ×. Default: `common.dismiss` from the
    *  {@link UiKitProvider}, else "Dismiss". */
   dismissLabel?: string;
@@ -278,6 +290,7 @@ export function AlertBanner({
   action,
   icon,
   onDismiss,
+  dismissFocusRef,
   dismissLabel,
   clampMobile = false,
   actionPlacement = "own-line",
@@ -318,6 +331,36 @@ export function AlertBanner({
     return () => ro?.disconnect();
   }, [clamp, expanded, children]);
 
+  // The ×'s focus, once the caller has removed the banner (DSP-15). Where it can go is read
+  // at the press, while the banner still has a place in the page to measure from; whether
+  // it must is decided at the unmount, in the cleanup of a passive effect — after React has
+  // taken the banner's DOM away, when a focus that fell with it is on <body>.
+  const dismissedFrom = useRef<HTMLElement[] | null>(null);
+  const dismissTarget = useRef(dismissFocusRef);
+  useLayoutEffect(() => {
+    dismissTarget.current = dismissFocusRef;
+  });
+  // The note lives until the focus lands outside the banner (0.52 code review,
+  // alert-banner.tsx). A caller that keeps the banner — an async dismiss that failed, a
+  // snooze — left it standing, and the banner's unmount long after, a route change with
+  // the focus on <body>, sent the focus to a stop noted at the press, over the app's own
+  // handling of a new page. A `focusin` on the document, not a `focusout` on the banner:
+  // a browser that blurs a removed node would drop the note at the very removal it is for.
+  // The one `focusout` heard is a move to nothing — a click on the page — and only once a
+  // microtask has shown the × still in place (`whenFocusLeftForNothing`). A focus that
+  // stays on the × keeps the note, however late the removal: that is DSP-15's own case,
+  // an async dismiss whose request resolves.
+  const unwatchFocus = useRef<(() => void) | null>(null);
+  useEffect(
+    () => () => {
+      unwatchFocus.current?.();
+      const around = dismissedFrom.current;
+      if (!around || !focusIsLost()) return;
+      focusFirst([dismissTarget.current?.current, ...around]);
+    },
+    [],
+  );
+
   const Glyph = TONE_GLYPH[tone];
   // Onto the first line of a box's text: 2px at 14px/20px, 1px at 12px/16px.
   const nudge = inlineRow || strip ? undefined : sm ? "mt-px" : "mt-0.5";
@@ -448,6 +491,40 @@ export function AlertBanner({
         // A dismiss inside a whole-row banner must not also follow the row.
         e.preventDefault();
         e.stopPropagation();
+        const frame = e.currentTarget.parentElement;
+        // Only a × that holds the focus has one to lose (0.52 code review, alert-banner.tsx):
+        // Safari focuses no button on a click, nor on an iOS tap, and with the focus on
+        // <body> already the removal sent it on — a ring, on a form field the on-screen
+        // keyboard, on a page the user was reading with the pointer.
+        if (frame && e.currentTarget.ownerDocument.activeElement === e.currentTarget) {
+          const { after, before } = tabStopsAround(frame);
+          dismissedFrom.current = [...after, ...before];
+          unwatchFocus.current?.();
+          const doc = frame.ownerDocument;
+          const forget = () => {
+            dismissedFrom.current = null;
+            unwatch();
+          };
+          const onFocusIn = (event: FocusEvent) => {
+            if (event.target instanceof Node && frame.contains(event.target)) return;
+            forget();
+          };
+          // Focus that left for nothing — a click on the page — took no `focusin` with it
+          // (0.52 code review): the user moved on all the same.
+          const onFocusOut = (event: FocusEvent) => {
+            whenFocusLeftForNothing(event, () => {
+              if (unwatchFocus.current === unwatch) forget();
+            });
+          };
+          const unwatch = () => {
+            doc.removeEventListener("focusin", onFocusIn, true);
+            frame.removeEventListener("focusout", onFocusOut);
+            unwatchFocus.current = null;
+          };
+          doc.addEventListener("focusin", onFocusIn, true);
+          frame.addEventListener("focusout", onFocusOut);
+          unwatchFocus.current = unwatch;
+        }
         onDismiss();
       }}
       className={cn(

package/src/components/amount-input.tsx

@@ -338,17 +338,28 @@ function settleAmount(text: string, digits: number | undefined, min?: number, ma
 // `lib/decimal-marks.ts`, read through the engine NumberInput and this field share
 // (`numeric-field.ts`, DUP-10).
 
-// The consuming app's ONE money palette (`--money-expense` / `--money-income`),
-// not a bespoke rose/emerald pairing: a figure being typed has to wear the same
-// colour the same figure will wear once it is a row in the table behind the form
-// (Keksdose dev#434). The utilities are unlayered and theme-aware, so no `dark:`
-// variant is needed and they win over the field's own text colour regardless of
-// where `cn` puts them.
-const TONE_CLASS: Record<"neutral" | "outflow" | "inflow", string> = {
+/**
+ * The figure's colour per {@link AmountInputProps.tone} — public as `AMOUNT_TONE_CLASS`,
+ * for a table cell or a test that must paint the same figure the same way (keksdose's
+ * receipt lines, dev#556).
+ *
+ * The consuming app's ONE money palette (`--money-expense` / `--money-income`), not a
+ * bespoke rose/emerald pairing: a figure being typed has to wear the same colour the same
+ * figure will wear once it is a row in the table behind the form (Keksdose dev#434). The
+ * utilities are unlayered and theme-aware, so no `dark:` variant is needed and they win
+ * over the field's own text colour regardless of where `cn` puts them.
+ */
+const TONE_CLASS: Readonly<Record<NonNullable<AmountInputProps["tone"]>, string>> = {
   neutral: "",
   outflow: "text-money-neg",
   inflow: "text-money-pos",
 };
+// Exported in 0.52 because keksdose's tests read it out of dist/components/amount-input.js
+// with a regex for `const TONE_CLASS` — the one reach into the kit's dist in three apps,
+// which a rename or a moved module breaks with no public change (MOD-8, refactor audit
+// 2026-10-30; 0.34's move failed 91 of keksdose's test files that way). The local name
+// stays until keksdose imports the export, so the bump itself breaks nothing.
+export { TONE_CLASS as AMOUNT_TONE_CLASS };
 
 // The shared chrome-less treatment at money size. `tabular-nums` so digits don't
 // reflow the figure as they are typed; FIELD_DISPLAY's own muted placeholder

package/src/components/autocomplete.tsx

@@ -1,7 +1,8 @@
-import { Fragment, useId, useRef, useState } from "react";
+import { useId, useRef, useState } from "react";
 import type { ComponentPropsWithoutRef, ReactNode, Ref } from "react";
 import { createPortal } from "react-dom";
 import { cn } from "../lib/cn";
+import { hasContent } from "../lib/presence";
 import { FIELD_BASE, FIELD_FLOATING_PAD, FIELD_INVALID } from "./field-base";
 import { Spinner } from "./spinner";
 import { useAnchoredPanel } from "../hooks/use-anchored-panel";
@@ -10,10 +11,12 @@ import { isImeEnter } from "../lib/ime";
 import { isQuietFocus } from "../lib/quiet-focus";
 import { useAnchorDir } from "./use-anchor-dir";
 import {
+  anchoredHeadingClass,
   ComboboxFieldLabel,
   DISABLED_ROW_CLASS,
   endHintRowProps,
-  GROUP_HEADING_STICKY,
+  GroupedOptions,
+  groupRuns,
   isOptionEnabled,
   stepEnabled,
   SUGGESTION_LIST_CLASS,
@@ -293,7 +296,7 @@ export function Autocomplete<V extends string | number = string>(props: Autocomp
     active: live,
   });
 
-  const hasStatus = status !== undefined && status !== null && status !== false && status !== "";
+  const hasStatus = hasContent(status);
   // The visible line under the rows. Nothing below `minChars` unless the caller has
   // something to say — an empty field opening a box that says "type more" is noise.
   const statusLine: ReactNode = hasStatus
@@ -559,75 +562,66 @@ export function Autocomplete<V extends string | number = string>(props: Autocomp
                 aria-labelledby={labelledBy}
                 className="min-h-0 flex-1 overflow-y-auto py-1"
               >
-                {results.map((o, i) => {
-                  const startsGroup = o.group != null && o.group !== results[i - 1]?.group;
-                  return (
-                    // Keyed by group AND value, as in the core panel: an option may
-                    // appear once per group.
-                    <Fragment key={`${o.group ?? ""}|${String(o.value)}`}>
-                      {startsGroup && (
-                        <li
-                          role="presentation"
-                          className={cn(
-                            GROUP_HEADING_STICKY,
-                            "px-3 pb-0.5 pt-2 text-caption font-semibold uppercase tracking-wide text-muted first:pt-1",
-                          )}
-                        >
-                          {o.group}
-                        </li>
-                      )}
-                      <li role="presentation">
-                        <button
-                          type="button"
-                          id={optionId(i)}
-                          role="option"
-                          // CHOSEN, never "highlighted" — the family's rule. This
-                          // field holds no value, so the only row that can be chosen
-                          // is the one whose label the text already is.
-                          aria-selected={fillOnSelect && o.label === value}
-                          // Listed, announced as unavailable, never taken: `take`
-                          // refuses it and the arrows pass it over.
-                          aria-disabled={o.disabled || undefined}
-                          tabIndex={-1}
-                          onClick={() => take(o)}
-                          onMouseEnter={() => {
-                            if (!o.disabled) setActive(i);
-                          }}
-                          className={cn(
-                            // The family's suggestion row (DUP-4): it hand-rolled its
-                            // own with a plain `truncate`, so a long address was cut at
-                            // Large, where Combobox's rows wrap (text size §10.17, T1).
-                            // A flex row here, for the icon and the two lines.
-                            suggestionRowClass(i === active && !o.disabled),
-                            "flex items-center gap-2",
-                            small && "py-1 text-xs",
-                            o.disabled && DISABLED_ROW_CLASS,
-                            o.group != null && "ps-6",
-                          )}
-                        >
-                          {o.icon && (
-                            <span aria-hidden className="shrink-0 text-muted">
-                              {o.icon}
+                {/* One heading per group, a `role="group"` it names, as in the core panel
+                    (refactor audit 2026-10-30, INP-8), drawn by the same renderer: an
+                    option may appear once per group. */}
+                <GroupedOptions
+                  runs={groupRuns(results, (o) => o.group)}
+                  listboxId={listboxId}
+                  rowKey={(o) => String(o.value)}
+                  headingClassName={(run) => anchoredHeadingClass(run)}
+                  row={(o, i) => (
+                    <li role="presentation">
+                      <button
+                        type="button"
+                        id={optionId(i)}
+                        role="option"
+                        // CHOSEN, never "highlighted" — the family's rule. This
+                        // field holds no value, so the only row that can be chosen
+                        // is the one whose label the text already is.
+                        aria-selected={fillOnSelect && o.label === value}
+                        // Listed, announced as unavailable, never taken: `take`
+                        // refuses it and the arrows pass it over.
+                        aria-disabled={o.disabled || undefined}
+                        tabIndex={-1}
+                        onClick={() => take(o)}
+                        onMouseEnter={() => {
+                          if (!o.disabled) setActive(i);
+                        }}
+                        className={cn(
+                          // The family's suggestion row (DUP-4): it hand-rolled its
+                          // own with a plain `truncate`, so a long address was cut at
+                          // Large, where Combobox's rows wrap (text size §10.17, T1).
+                          // A flex row here, for the icon and the two lines.
+                          suggestionRowClass(i === active && !o.disabled),
+                          "flex items-center gap-2",
+                          small && "py-1 text-xs",
+                          o.disabled && DISABLED_ROW_CLASS,
+                          o.group && "ps-6",
+                        )}
+                      >
+                        {o.icon && (
+                          <span aria-hidden className="shrink-0 text-muted">
+                            {o.icon}
+                          </span>
+                        )}
+                        <span className="min-w-0 flex-1">
+                          <span className="block truncate-until-large text-primary">{o.label}</span>
+                          {o.sublabel && (
+                            <span
+                              className={cn(
+                                "block truncate-until-large text-placeholder",
+                                small ? "text-caption" : "text-xs",
+                              )}
+                            >
+                              {o.sublabel}
                             </span>
                           )}
-                          <span className="min-w-0 flex-1">
-                            <span className="block truncate-until-large text-primary">{o.label}</span>
-                            {o.sublabel && (
-                              <span
-                                className={cn(
-                                  "block truncate-until-large text-placeholder",
-                                  small ? "text-caption" : "text-xs",
-                                )}
-                              >
-                                {o.sublabel}
-                              </span>
-                            )}
-                          </span>
-                        </button>
-                      </li>
-                    </Fragment>
-                  );
-                })}
+                        </span>
+                      </button>
+                    </li>
+                  )}
+                />
               </ul>
             )}
             {statusLine !== null && (

package/src/components/bulk-action-bar.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useLayoutEffect, useRef, useState } from "react";
-import type { ComponentPropsWithRef, CSSProperties, KeyboardEvent, ReactNode } from "react";
+import type { ComponentPropsWithRef, CSSProperties, FocusEvent, KeyboardEvent, ReactNode, RefObject } from "react";
 import { X } from "lucide-react";
 
 import { cn } from "../lib/cn";
@@ -8,6 +8,8 @@ import { useKitLabels, type LabelOverride } from "../i18n/kit-labels";
 import { useAnnounce } from "../hooks/use-announce";
 import { useBreakpoint } from "../hooks/use-breakpoint";
 import { OVERLAY_EXIT_MS, skipsExitAnimation } from "../hooks/use-close-transition";
+import { focusFirst, focusIsLost, whenFocusLeftForNothing } from "../lib/focus-left";
+import { hasContent } from "../lib/presence";
 import { Button } from "./button";
 import { IconButton } from "./icon-button";
 import { DEFAULT_BULK_ACTION_BAR_LABELS } from "./bulk-action-bar-labels";
@@ -124,6 +126,16 @@ export interface BulkActionBarProps extends Omit<ComponentPropsWithRef<"div">, "
   panel?: ReactNode;
   /** Default: `bulkActionBar` from the {@link UiKitProvider}, else English. */
   labels?: LabelOverride<BulkActionBarLabels>;
+  /**
+   * Where the focus goes when the bar leaves while it holds it — after Clear, or an action
+   * that empties the selection (0.52, refactor audit 2026-10-30, DSP-15). Without it, the
+   * control the focus came into the bar from (the row's box, say), if that is still on the
+   * page; with it, this first. Pass one where the selection takes that control with it — a
+   * bulk delete removes the rows whose boxes were ticked: the table, the list's heading,
+   * the "Select" button that entered selection mode. A bar that leaves without the focus
+   * in it moves nothing.
+   */
+  returnFocusRef?: RefObject<HTMLElement | null>;
 }
 
 /** Where the floating bar sits: clear of the phone nav and of the home indicator,
@@ -192,10 +204,12 @@ export function BulkActionBar({
   open,
   panel,
   labels: labelsProp,
+  returnFocusRef,
   className,
   style,
   onKeyDown,
   onFocus,
+  onBlur,
   ...rest
 }: BulkActionBarProps) {
   const labels = useKitLabels("bulkActionBar", DEFAULT_BULK_ACTION_BAR_LABELS, labelsProp);
@@ -245,6 +259,51 @@ export function BulkActionBar({
     rove(barRef.current, active);
   });
 
+  // Leaving with the focus in it (refactor audit 2026-10-30, DSP-15): the bar goes `inert`,
+  // which blurs the control it holds, then unmounts — and the focus fell to <body>; on a
+  // phone VoiceOver's cursor jumped to the top of the page (keksdose's register). Noted on
+  // the bar's outermost element, so the `panel`'s fields count: where the focus came in
+  // from (the first entry since the bar showed, replaced once that control is gone), and
+  // whether it is in the bar. Focus that leaves for nothing because the page took it —
+  // inert, a removal — still counts as in it; a real element elsewhere takes it out, and
+  // so does a click on the page that left it nowhere (0.52 code review,
+  // bulk-action-bar.tsx: the note outlived it, and the bar's hide long after — the last row
+  // unticked with the pointer — pulled the focus and the scroll back to the row's box).
+  const cameFrom = useRef<HTMLElement | null>(null);
+  const holdsFocus = useRef(false);
+  const trackFocus = {
+    onFocus: (e: FocusEvent<HTMLDivElement>) => {
+      holdsFocus.current = true;
+      const from = e.relatedTarget;
+      if (from instanceof HTMLElement && !e.currentTarget.contains(from) && !cameFrom.current?.isConnected)
+        cameFrom.current = from;
+    },
+    onBlur: (e: FocusEvent<HTMLDivElement>) => {
+      onBlur?.(e);
+      const to = e.relatedTarget;
+      if (to instanceof Element && !e.currentTarget.contains(to)) holdsFocus.current = false;
+      whenFocusLeftForNothing(e, () => {
+        holdsFocus.current = false;
+      });
+    },
+  };
+  // The commit that hides the bar: the focus goes back while the control holding it is
+  // still in place — before `inert` takes it, or, with no exit to play, before <body> does.
+  const wasShown = useRef(shown);
+  useLayoutEffect(() => {
+    if (wasShown.current === shown) return;
+    wasShown.current = shown;
+    const from = cameFrom.current;
+    const held = holdsFocus.current;
+    cameFrom.current = null;
+    holdsFocus.current = false;
+    if (shown) return;
+    // The outermost element: the toolbar, or with a `panel` the surface round both.
+    const surface = barRef.current?.closest("[data-bulk-action-bar]");
+    const inBar = !!surface && surface.contains(document.activeElement);
+    if (inBar || (held && focusIsLost())) focusFirst([returnFocusRef?.current, from]);
+  }, [shown, returnFocusRef]);
+
   const handleKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {
     onKeyDown?.(e);
     if (e.defaultPrevented || ownsArrows(e.target as Element)) return;
@@ -279,7 +338,9 @@ export function BulkActionBar({
     </Button>
   );
 
-  const hasPanel = panel !== undefined && panel !== null && panel !== false;
+  // `hasContent` (refactor audit 2026-10-30, DUP-14): an empty-string panel drew an empty
+  // bordered strip under the bar.
+  const hasPanel = hasContent(panel);
   // The surface — where the bar sits and what it looks like — and the toolbar row's
   // own layout. Without a panel they are one element, exactly as before 0.11.0; with
   // one the surface wraps the row and the panel, so both share its tint and position.
@@ -314,6 +375,7 @@ export function BulkActionBar({
       onKeyDown={handleKeyDown}
       onFocus={(e) => {
         onFocus?.(e);
+        if (!hasPanel) trackFocus.onFocus(e);
         // Clicking a control is using it: the stop follows the pointer too.
         const hit = itemsOf(barRef.current).find((el) => el === e.target);
         if (hit) {
@@ -321,6 +383,7 @@ export function BulkActionBar({
           rove(barRef.current, active);
         }
       }}
+      onBlur={hasPanel ? undefined : trackFocus.onBlur}
       style={hasPanel ? undefined : surfaceStyle}
       className={hasPanel ? rowClass : cn(rowClass, surfaceClass, className)}
     >
@@ -340,8 +403,13 @@ export function BulkActionBar({
     <>
       <span {...regionProps} />
       {hasPanel ? (
+        /* eslint-disable-next-line jsx-a11y/no-static-element-interactions -- the focus is
+           only noted here (DSP-15): where it came from, whether it is in the bar; the
+           controls are the toolbar's and the panel's own. */
         <div
           {...rest}
+          onFocus={trackFocus.onFocus}
+          onBlur={trackFocus.onBlur}
           data-bulk-action-bar={variant}
           inert={!shown || undefined}
           style={surfaceStyle}

package/src/components/button-look.ts

@@ -9,8 +9,8 @@ import type { KitLinkComponent, KitLinkProps } from "../i18n/kit-labels";
  * and its router link. Both now draw from this module, which renders nothing, so neither
  * imports the other.
  *
- * Public through ./ui by name: `buttonClasses`, `TOUCH_TARGET_LARGE` and the four types.
- * The other exports are the two buttons' shared parts (`@internal`).
+ * Public through the barrel (src/index.ts) by name: `buttonClasses`, `TOUCH_TARGET_LARGE`
+ * and the four types. The other exports are the two buttons' shared parts (`@internal`).
  */
 
 /**
@@ -24,9 +24,9 @@ import type { KitLinkComponent, KitLinkProps } from "../i18n/kit-labels";
  *   (theme/palette-derive.ts), which no button paints.
  * - `secondary`: an outline. `ghost`: text or glyph only. `danger`: solid `--danger`,
  *   for an action that destroys something. `link`: a text link that acts (a `<button>`).
- * - `primary` and `brand` are **deprecated** aliases of `default` and `accent` (0.49,
- *   same look; a development build warns once per name). They are removed in 0.51, and
- *   `primary` will not come back with another meaning.
+ *
+ * 0.49's `primary` and `brand` (aliases of `default` and `accent`) were removed in 0.51;
+ * `primary` will not come back with another meaning.
  */
 export type ButtonVariant = "default" | "accent" | "secondary" | "ghost" | "danger" | "link";
 

package/src/components/button.tsx

@@ -25,8 +25,8 @@ import type { ButtonSize, ButtonTone, ButtonVariant } from "./button-look";
  */
 export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   /** `default` (the quiet action, what a Button without `variant` draws), `accent` (the
-   *  strong call to action, solid brand), `secondary`, `ghost`, `danger` or `link`.
-   *  `primary` / `brand` are deprecated aliases of `default` / `accent`. See {@link ButtonVariant}. */
+   *  strong call to action, solid brand), `secondary`, `ghost`, `danger` or `link`. See
+   *  {@link ButtonVariant}. */
   variant?: ButtonVariant;
   /** `md` (default) is the page's action button. `sm` is the compact one — 12px text
    *  and `px-2 py-1` — for the secondary actions in a toolbar, a card header or a

package/src/components/chart-edge.ts

@@ -1,7 +1,8 @@
 // The live side of `chartEdge` (theme/chart-palette.ts): which colours a FILLED mark is
 // painted with and which grounds it sits on, read off <html> as the page resolves them —
 // so the 1px ink edge follows a theme toggle and a palette switch without the chart
-// knowing either store. Shared by SeriesChart (bars, areas) and Treemap (tiles).
+// knowing either store. And WHETHER a mark gets one: `useEdgesInForce`, the contrast
+// setting's switch. Shared by SeriesChart (bars, areas) and Treemap (tiles).
 import { useCallback, useSyncExternalStore } from "react";
 import { chartEdge } from "../theme/chart-palette";
 import { parseHex } from "../theme/color";
@@ -71,3 +72,35 @@ export function useChartEdge(): (fill: string | undefined) => string | undefined
     [snapshot],
   );
 }
+
+/**
+ * How filled marks are parted — see `TreemapProps.edges` (0.51.6, keksdose dev #642).
+ * `"auto"`: `"uniform"` at Standard contrast, `"contrast"` while More contrast is in force.
+ */
+export type ChartEdges = "auto" | "uniform" | "contrast";
+
+// `<html data-contrast>`, followed live: what `"auto"` keys on. Read here rather than
+// through theme/contrast, whose store would come into the chart entry with it.
+function subscribeContrast(onChange: () => void): () => void {
+  if (typeof MutationObserver === "undefined" || typeof document === "undefined") return () => {};
+  const observer = new MutationObserver(onChange);
+  observer.observe(document.documentElement, { attributes: true, attributeFilter: ["data-contrast"] });
+  return () => observer.disconnect();
+}
+const readMoreContrast = () =>
+  typeof document !== "undefined" && document.documentElement.getAttribute("data-contrast") === "more";
+
+/**
+ * The edges a filled mark draws: `"auto"` resolved against the contrast in force, live.
+ *
+ * Under `"contrast"` a mark whose hue is under 3:1 against the ground gets the 1px ink
+ * edge ({@link useChartEdge}); under `"uniform"` none does. The tiles took this rule in
+ * 0.51.6 (#642: "The borders do not look nice when changing from tile to tile"), and
+ * SeriesChart's bars and areas in 0.52 (refactor audit 2026-10-30, DSP-18, Marcel's
+ * decision 3): at Standard contrast the edge fell on 5 of 8 hues in light, and in dark on
+ * chart-5 and chart-7 alone — the same unevenness, in a bar chart.
+ */
+export function useEdgesInForce(edges: ChartEdges = "auto"): "uniform" | "contrast" {
+  const more = useSyncExternalStore(subscribeContrast, readMoreContrast, () => false);
+  return edges === "auto" ? (more ? "contrast" : "uniform") : edges;
+}