@eifi1/ui-kit 0.51.7 → 0.53.0

package/src/components/date-range-picker.tsx

@@ -1,12 +1,13 @@
-// The two-date range picker: presets beside the calendar, `commit="apply"` drafts, a
-// custom trigger. Moved out of date-picker.tsx as it was (MOD-9, refactor audit
+// The two-date range picker: presets beside the calendar, `apply` drafts, a custom
+// trigger. Moved out of date-picker.tsx as it was (MOD-9, refactor audit
 // 2026-10); date-picker still exports every public name here.
 import { useState } from "react";
 import type { ReactNode } from "react";
 import { cn } from "../lib/cn";
 import { useKitLocale, type DatePickerLabels } from "../i18n/kit-labels";
 import { Button } from "./button";
-import { FieldBox, useFieldMessages } from "./field-parts";
+import { FieldBox, LockedReason, useFieldMessages, useLockReason } from "./field-parts";
+import type { CommitScope } from "./write-lock";
 import { usePhoneLayout } from "../hooks/use-breakpoint";
 import {
   DateField,
@@ -39,23 +40,6 @@ export interface DateRangePickerPreset {
   to: string;
 }
 
-/**
- * When the picker hands its range to `onChange`.
- *
- *  - `"immediate"` (the default, and all of 0.7): a preset click commits and closes,
- *    and each calendar click is reported as it happens — the half-made `(from, "")`
- *    included. The right shape for quick ranges on a filter, where one click is one
- *    answer.
- *  - `"apply"`: the panel works on a DRAFT. A preset ARMS the calendar instead of
- *    committing, days can then be nudged ("last 3 months, but end it last Friday"),
- *    and nothing reaches `onChange` until Apply — which stays disabled until both ends
- *    exist. Cancel, Escape and an outside click discard the draft, and every open
- *    starts again from the committed value. keksdose's report range asked for exactly
- *    this: each commit there re-runs a whole page of charts, so an intermediate state
- *    must never escape the panel.
- */
-export type DateRangeCommit = "immediate" | "apply";
-
 export interface DateRangePickerProps extends DatePickerBaseProps {
   from: string;
   to: string;
@@ -65,8 +49,9 @@ export interface DateRangePickerProps extends DatePickerBaseProps {
   onChange: (from: string, to: string, presetId?: string) => void;
   /** Separator between the two formatted dates in the trigger (default " – "). */
   separator?: string;
-  /** Optional named ranges rendered as a start-side column (last month / YTD / …). */
-  presets?: DateRangePickerPreset[];
+  /** Optional named ranges rendered as a start-side column (last month / YTD / …).
+   *  `readonly` since 0.52 (API-7): the picker never changes the list. */
+  presets?: readonly DateRangePickerPreset[];
   /**
    * The active preset's `id`, controlled — e.g. straight from keksdose's `?preset=`.
    * `null` (or an id no preset has, such as `"custom"`) says "no preset": nothing in
@@ -77,8 +62,36 @@ export interface DateRangePickerProps extends DatePickerBaseProps {
    * itself; with no memory at all it falls back to the first preset whose dates match.
    */
   preset?: string | null;
-  /** See {@link DateRangeCommit}. Default `"immediate"`. */
-  commit?: DateRangeCommit;
+  /**
+   * When the picker hands its range to `onChange`.
+   *
+   *  - Left out (the default, and all of 0.7): a preset click commits and closes, and
+   *    each calendar click is reported as it happens — the half-made `(from, "")`
+   *    included. The right shape for quick ranges on a filter, where one click is one
+   *    answer.
+   *  - `apply`: the panel works on a DRAFT. A preset ARMS the calendar instead of
+   *    committing, days can then be nudged ("last 3 months, but end it last Friday"),
+   *    and nothing reaches `onChange` until Apply — which stays disabled until both ends
+   *    exist. Cancel, Escape and an outside click discard the draft, and every open
+   *    starts again from the committed value. keksdose's report range asked for exactly
+   *    this: each commit there re-runs a whole page of charts, so an intermediate state
+   *    must never escape the panel.
+   *
+   * `commit="apply"` until 0.52 (refactor audit 2026-10-30, API-3): `commit` is the write
+   * lock's prop on every other kit control. The old spelling went in 0.53.
+   */
+  apply?: boolean;
+  /**
+   * This picker COMMITS — picking a range saves it (a report's period kept per user, a
+   * filter persisted as it moves). Under a locked {@link WriteLockProvider} it is locked
+   * the `disabledReason` way, with the lock's reason; a {@link CommitScope}, as on every
+   * kit control since 0.33, and on this one since 0.52 (API-3). A range inside a form with
+   * its own Save stays editable under the lock — leave this off there.
+   *
+   * The strings `"immediate"` and `"apply"`, the panel's mode in 0.x, went in 0.53
+   * (deprecated in 0.52): `apply` is the mode.
+   */
+  commit?: CommitScope;
   /**
    * Draw the trigger yourself. keksdose's report range field
    * (reports/report-range-field.tsx, "Why this is app-level") is why: its trigger
@@ -103,7 +116,7 @@ export interface DateRangePickerProps extends DatePickerBaseProps {
    */
   sheetBackCloses?: boolean;
   /**
-   * With `commit="apply"`: a line above the calendar saying what Apply would commit —
+   * With `apply`: a line above the calendar saying what Apply would commit —
    * keksdose's report range writes "Custom · 1 Mar 2026 – …" there
    * (report-range-field.tsx), the one place a preset armed and then nudged by a day is
    * seen to have become "Custom", and a half-made range to still lack its end. Called
@@ -112,7 +125,7 @@ export interface DateRangePickerProps extends DatePickerBaseProps {
    * `""` until the second click. The line is a polite live region, so a screen reader
    * hears the draft change as the calendar is used.
    *
-   * Ignored in `"immediate"` mode, where there is no draft: every click is the value.
+   * Ignored without `apply`, where there is no draft: every click is the value.
    */
   renderDraftSummary?: (draft: DateRangeDraftSummary) => ReactNode;
 }
@@ -218,8 +231,8 @@ function PresetColumn({
 }
 
 /**
- * The panel's body. A component of its own so `commit="apply"` can keep its draft in
- * state that is born when the panel opens: `Popover` unmounts its children on close,
+ * The panel's body. A component of its own so `apply` can keep its draft in state that
+ * is born when the panel opens: `Popover` unmounts its children on close,
  * so the draft is re-seeded from the committed value on every open, and an abandoned
  * half-selection cannot survive into the next one.
  */
@@ -229,7 +242,7 @@ function RangePanel({
   presets,
   activeId,
   controlled,
-  commit,
+  drafting,
   close,
   frame,
   sheet,
@@ -243,7 +256,8 @@ function RangePanel({
   presets: readonly DateRangePickerPreset[] | undefined;
   activeId: string | null | undefined;
   controlled: boolean;
-  commit: DateRangeCommit;
+  /** `apply`: the panel works on a draft. */
+  drafting: boolean;
   close: () => void;
   /** Where the body and the Apply row go — see `PanelFrame`. */
   frame: PanelFrame;
@@ -253,7 +267,6 @@ function RangePanel({
   labels: DatePickerLabels;
   renderDraftSummary?: DateRangePickerProps["renderDraftSummary"];
 }) {
-  const drafting = commit === "apply";
   const [draft, setDraft] = useState<RangeDraft>({
     from,
     to,
@@ -360,8 +373,8 @@ function RangePanel({
 }
 
 /** Two-date range picker: click a start then an end; closes once both are set.
- *  With `presets`, a column of named ranges is shown beside the calendar; with
- *  `commit="apply"` the panel drafts and commits on Apply (see {@link DateRangeCommit}). */
+ *  With `presets`, a column of named ranges is shown beside the calendar; with `apply`
+ *  the panel drafts and commits on Apply (see {@link DateRangePickerProps.apply}). */
 export function DateRangePicker(props: DateRangePickerProps) {
   const {
     from,
@@ -376,7 +389,8 @@ export function DateRangePicker(props: DateRangePickerProps) {
     separator = " – ",
     presets,
     preset,
-    commit = "immediate",
+    apply,
+    commit,
     renderTrigger,
     sheetBackCloses,
     renderDraftSummary,
@@ -386,10 +400,13 @@ export function DateRangePicker(props: DateRangePickerProps) {
     clearable,
     clearLabel,
     disabled,
+    disabledReason,
+    disabledReasonDisplay,
     invalid,
     hint,
     help,
     error,
+    className,
     // The trigger's (API-3).
     ref,
     ...rest
@@ -397,6 +414,9 @@ export function DateRangePicker(props: DateRangePickerProps) {
   const locale = useKitLocale(localeProp);
   const text = useDatePickerLabels(clearLabel, undefined, undefined);
   const render = useTriggerFormat("dateRangePicker", locale, formatOptions, formatValue);
+  const drafting = apply ?? false;
+  const lock = useLockReason(commit, disabledReason);
+  const locked = lock.locked;
   const messages = useFieldMessages({
     hint,
     help,
@@ -405,6 +425,8 @@ export function DateRangePicker(props: DateRangePickerProps) {
     invalid,
     describedBy: rest["aria-describedby"],
     ariaInvalid: rest["aria-invalid"],
+    // A lock's reason between the caption and the error, as on Select.
+    reasonId: locked && lock.reasonId,
   });
   // The preset this picker committed itself, for a caller that does not control
   // `preset`. Cleared by a hand-picked range or a clear.
@@ -417,6 +439,7 @@ export function DateRangePicker(props: DateRangePickerProps) {
   const hasPresets = Boolean(presets && presets.length > 0);
   const sheet = usePhoneLayout();
   const commitRange = (f: string, t: string, presetId: string | undefined) => {
+    if (locked) return;
     setOwnPreset(presetId);
     // Two arguments when no preset is involved — exactly the 0.7 call, so a caller's
     // `toHaveBeenCalledWith(from, to)` and a variadic handler see no difference.
@@ -434,6 +457,9 @@ export function DateRangePicker(props: DateRangePickerProps) {
       clearLabel={text.clear}
       panelLabel={text.rangePanel}
       disabled={disabled}
+      locked={locked}
+      // Locked, the caller's classes are the reason's frame's (below).
+      className={locked ? undefined : className}
       invalid={messages.isInvalid}
       // Widen so the preset column sits beside the calendar (default otherwise).
       width={hasPresets ? "27.5rem" : undefined}
@@ -463,7 +489,7 @@ export function DateRangePicker(props: DateRangePickerProps) {
           presets={presets}
           activeId={activeId}
           controlled={controlled}
-          commit={commit}
+          drafting={drafting}
           close={close}
           frame={frame}
           sheet={sheet}
@@ -475,9 +501,18 @@ export function DateRangePicker(props: DateRangePickerProps) {
       )}
     </DateField>
   );
+  const box = withEndHint(field, label === undefined ? messages.labelHint : undefined);
   return (
     <FieldBox below={messages.below} reserve={"error" in props || "hint" in props}>
-      {withEndHint(field, label === undefined ? messages.labelHint : undefined)}
+      {locked ? (
+        // DatePicker's frame: the line under the field, or the Tooltip with a hidden copy
+        // for `aria-describedby`; the outermost box, so it takes the caller's classes.
+        <LockedReason lock={lock} display={disabledReasonDisplay} className={cn("block", className)}>
+          {box}
+        </LockedReason>
+      ) : (
+        box
+      )}
     </FieldBox>
   );
 }

package/src/components/error-boundary.tsx

@@ -1,4 +1,4 @@
-import { Component } from "react";
+import { Component, useEffect } from "react";
 import type { ErrorInfo, ReactNode } from "react";
 import { AlertTriangle, RefreshCw, WifiOff } from "lucide-react";
 import { useKitLabels, type LabelOverride } from "../i18n/kit-labels";
@@ -7,6 +7,7 @@ import { EmptyState } from "./empty-state";
 import { CopyButton } from "./copy-button";
 import { Disclosure } from "./disclosure";
 import { documentNavigation } from "../lib/document-navigation";
+import { useAnnounce } from "../hooks/use-announce";
 import { DEFAULT_ERROR_BOUNDARY_LABELS } from "./error-boundary-labels";
 
 /** The words of the default fallback. */
@@ -605,6 +606,17 @@ function ErrorFallback({
   const reportText = report ? formatCrashReport(report) : null;
   const errorLine = details.message ? `${details.name}: ${details.message}` : details.name;
 
+  // The title and the hint, said once through an assertive region of their own (0.52,
+  // refactor audit 2026-10-30, DSP-17). `role="alert"` on the whole box put the actions
+  // in it, so each later insertion was read out as news: "Copy error report" and
+  // "Details" on `componentDidCatch`'s second render, "Reported as …", and on opening
+  // Details both stacks of the crash report. EmptyState has no wrapper for title and
+  // hint alone, and a region mounted with its message is often missed anyway.
+  const alert = useAnnounce({ politeness: "assertive" });
+  const { announce } = alert;
+  const spoken = `${title}. ${hint}`;
+  useEffect(() => announce(spoken), [announce, spoken]);
+
   const reloadButton = (
     <Button key="reload" variant={mode === "error" ? "secondary" : "default"} onClick={reloadPage}>
       {text.reload}
@@ -619,43 +631,45 @@ function ErrorFallback({
   );
 
   return (
-    <EmptyState
-      role="alert"
-      tone={mode === "error" ? "danger" : undefined}
-      headingAs={headingAs}
-      className={className}
-      icon={<Icon />}
-      title={title}
-      hint={hint}
-      action={
-        <>
-          {showMessage && mode === "error" && (
-            // A quotation, not prose: left-aligned and monospaced, so it reads as the
-            // program's words and can be read out or screenshotted verbatim.
-            <p
-              data-error-message=""
-              className="-mt-1 mb-1 basis-full whitespace-pre-wrap break-words rounded-md border border-danger-strong bg-danger-soft px-3 py-2 text-start font-mono text-xs text-primary"
-            >
-              {errorLine}
-            </p>
-          )}
-          {filing === "filed" && (
-            <p className="-mt-1 mb-1 basis-full text-xs">{reference ? text.reportedAs(reference) : text.reported}</p>
-          )}
-          {mode === "error" ? [retryButton, reloadButton] : [reloadButton, retryButton]}
-          {copyReport && reportText !== null && filing !== "filed" && (
-            <CopyButton variant="label" buttonVariant="ghost" label={text.copyReport} text={reportText} />
-          )}
-          {actions}
-          {showDetails && reportText !== null && (
-            <Disclosure variant="bare" title={text.details} className="basis-full text-start">
-              <pre className="max-h-60 overflow-auto whitespace-pre-wrap break-words text-xs text-secondary">
-                {reportText}
-              </pre>
-            </Disclosure>
-          )}
-        </>
-      }
-    />
+    <>
+      <span {...alert.regionProps} />
+      <EmptyState
+        tone={mode === "error" ? "danger" : undefined}
+        headingAs={headingAs}
+        className={className}
+        icon={<Icon />}
+        title={title}
+        hint={hint}
+        action={
+          <>
+            {showMessage && mode === "error" && (
+              // A quotation, not prose: left-aligned and monospaced, so it reads as the
+              // program's words and can be read out or screenshotted verbatim.
+              <p
+                data-error-message=""
+                className="-mt-1 mb-1 basis-full whitespace-pre-wrap break-words rounded-md border border-danger-strong bg-danger-soft px-3 py-2 text-start font-mono text-xs text-primary"
+              >
+                {errorLine}
+              </p>
+            )}
+            {filing === "filed" && (
+              <p className="-mt-1 mb-1 basis-full text-xs">{reference ? text.reportedAs(reference) : text.reported}</p>
+            )}
+            {mode === "error" ? [retryButton, reloadButton] : [reloadButton, retryButton]}
+            {copyReport && reportText !== null && filing !== "filed" && (
+              <CopyButton variant="label" buttonVariant="ghost" label={text.copyReport} text={reportText} />
+            )}
+            {actions}
+            {showDetails && reportText !== null && (
+              <Disclosure variant="bare" title={text.details} className="basis-full text-start">
+                <pre className="max-h-60 overflow-auto whitespace-pre-wrap break-words text-xs text-secondary">
+                  {reportText}
+                </pre>
+              </Disclosure>
+            )}
+          </>
+        }
+      />
+    </>
   );
 }

package/src/components/field-base-labels.ts

@@ -0,0 +1,20 @@
+// The English words of ./field-base, in a module with no component code: the English
+// catalogue (src/i18n/defaults.ts) imports them without the component, so `en` loads as one
+// chunk like the other languages (0.34, KS U8). ./field-base re-exports them.
+//
+// Until 0.52 they shared ui-labels.ts with the tabs' words, named after the ui.tsx that
+// 0.34 split up (MOD-7, refactor audit 2026-10-30): one labels module per component now,
+// as every other `*-labels.ts` is.
+
+import type { CharacterCountLabels, PasswordRevealLabels } from "./field-base";
+
+export const DEFAULT_PASSWORD_REVEAL_LABELS: PasswordRevealLabels = {
+  show: "Show password",
+  hide: "Hide password",
+};
+
+export const DEFAULT_CHARACTER_COUNT_LABELS: CharacterCountLabels = {
+  count: (used, max) => `${used} of ${max} characters`,
+  remaining: (left) => (left === 1 ? "1 character left" : `${left} characters left`),
+  limitReached: "Character limit reached",
+};

package/src/components/field-base.tsx

@@ -11,7 +11,7 @@ import {
   STATIC_LABEL_TYPE,
   type FieldHintParts,
 } from "./field-parts";
-import { DEFAULT_CHARACTER_COUNT_LABELS, DEFAULT_PASSWORD_REVEAL_LABELS } from "./ui-labels";
+import { DEFAULT_CHARACTER_COUNT_LABELS, DEFAULT_PASSWORD_REVEAL_LABELS } from "./field-base-labels";
 
 /**
  * The field base: what Input, Select and Textarea — and every kit field built on the same
@@ -20,7 +20,8 @@ import { DEFAULT_CHARACTER_COUNT_LABELS, DEFAULT_PASSWORD_REVEAL_LABELS } from "
  * reveal and the character counter. The message under a wrong field is field-parts'
  * `useFieldError`, every field's.
  *
- * Public through ./ui by name. `FieldGroup`, the counter and the placeholder helpers are
+ * Public through the barrel (src/index.ts) by name. `FieldGroup`, the counter and the
+ * placeholder helpers are
  * the three fields' shared parts (`@internal`), as are the Select's own classes and its
  * `SelectWidthFloor` (0.51).
  */
@@ -47,7 +48,12 @@ export const FIELD_BASE =
   // doubles the line inward — FIELD_INVALID's border-plus-ring (live #295), and the
   // DatePicker stepper's fix (0.34) — so every side keeps one fully covered device
   // pixel. Inset: nothing outside the field moves or is covered.
-  "focus:ring-1 focus:ring-inset focus:ring-brand " +
+  //
+  // Under More contrast the ring is 2px, so the line is 3px — what `--focus-ring-width`
+  // gives every `FOCUS_RING` there, and what `appearance.contrastHelp` promises ("thickens
+  // focus frames"); before 0.52 a text field kept its 2px (refactor audit 2026-10-30,
+  // DOC-2). Still inset, so nothing moves.
+  "focus:ring-1 contrast:focus:ring-2 focus:ring-inset focus:ring-brand " +
   // §10.1: at least 16 px on a touch screen, or iOS zooms the page on focus.
   FIELD_TOUCH_TEXT +
   " " +
@@ -106,9 +112,9 @@ export const FIELD_FLOATING_PAD = "pt-4 pb-1 large:py-2";
 //
 // A ring rather than `border-2`: a box-shadow adds no layout, so an invalid field
 // stays exactly the size of a valid one and nothing beside it moves when the value
-// arrives.
+// arrives. Under More contrast the ring is 2px, as FIELD_BASE's focus line (0.52, DOC-2).
 export const FIELD_INVALID =
-  "border-danger-strong ring-1 ring-danger-strong focus:border-[var(--danger)] focus:ring-[var(--danger)]";
+  "border-danger-strong ring-1 contrast:ring-2 ring-danger-strong focus:border-[var(--danger)] focus:ring-[var(--danger)]";
 
 export const FLOATING_INPUT_CLASS = cn(FIELD_BASE, FIELD_FLOATING_PAD, "peer placeholder:text-transparent");
 
@@ -504,7 +510,7 @@ export interface PasswordRevealLabels {
   hide: string;
 }
 
-// Defined in ./ui-labels, which holds no component code (0.34, KS U8).
+// Defined in ./field-base-labels, which holds no component code (0.34, KS U8).
 export { DEFAULT_PASSWORD_REVEAL_LABELS };
 
 /**
@@ -523,7 +529,7 @@ export interface CharacterCountLabels {
   limitReached: string;
 }
 
-// Defined in ./ui-labels, which holds no component code (0.34, KS U8).
+// Defined in ./field-base-labels, which holds no component code (0.34, KS U8).
 export { DEFAULT_CHARACTER_COUNT_LABELS };
 
 /** The length the browser's own `maxLength` counts — UTF-16 code units — so the counter

package/src/components/form-actions.tsx

@@ -5,7 +5,9 @@ import { cn } from "../lib/cn";
 import { useKitLabels } from "../i18n/kit-labels";
 import { useBreakpoint, usePhoneLayout } from "../hooks/use-breakpoint";
 import { useLargeText } from "../hooks/use-large-text";
-import { isApplePlatform } from "../hooks/use-hotkey";
+import { isApplePlatform, matchesHotkey, type ParsedHotkey } from "../hooks/use-hotkey";
+import { isComposing } from "../lib/ime";
+import { hasContent } from "../lib/presence";
 import { Button, type ButtonProps } from "./button";
 import { Spinner } from "./spinner";
 import type { ButtonSize, ButtonVariant } from "./button-look";
@@ -337,6 +339,17 @@ function shortcutScope(row: HTMLElement | null, formId: string | undefined): Ele
   return row.closest("form") ?? row.closest('[role="dialog"]') ?? row.parentElement;
 }
 
+/**
+ * What {@link FormActionsProps.submitShortcut} answers, on every platform: Ctrl+Enter and
+ * Cmd+Enter with nothing else held, read by `matchesHotkey` as every kit shortcut is
+ * (refactor audit 2026-10-30, DUP-12). Literals, not `parseHotkey` calls: no module-scope
+ * call for a bundler to keep.
+ */
+const SUBMIT_CHORDS: readonly ParsedHotkey[] = [
+  { ctrl: true, meta: false, shift: false, alt: false, key: "Enter" },
+  { ctrl: false, meta: true, shift: false, alt: false, key: "Enter" },
+];
+
 function isDestructiveData(value: unknown): value is FormActionsDestructive {
   return typeof value === "object" && value !== null && !isValidElement(value) && "onClick" in value;
 }
@@ -429,8 +442,9 @@ export function FormActions({
   useEffect(() => {
     if (submitShortcut !== "mod-enter") return;
     const onKeyDown = (e: KeyboardEvent) => {
-      if (e.key !== "Enter" || !(e.ctrlKey || e.metaKey) || e.shiftKey || e.altKey) return;
-      if (e.repeat || e.isComposing || e.defaultPrevented || !canSaveRef.current) return;
+      if (!SUBMIT_CHORDS.some((chord) => matchesHotkey(e, chord))) return;
+      // `isComposing` is lib/ime's: Safari's composition-ending Enter (keyCode 229) too.
+      if (e.repeat || isComposing(e) || e.defaultPrevented || !canSaveRef.current) return;
       const scope = shortcutScope(rootRef.current, form);
       if (!scope || !(e.target instanceof Node) || !scope.contains(e.target)) return;
       e.preventDefault();
@@ -442,8 +456,9 @@ export function FormActions({
   const apple = submitShortcut ? isApplePlatform() : false;
   const placement = useResolvedPlacement(placementProp);
   const bleedLength = bleed === undefined || bleed === "" ? undefined : cssLength(bleed);
-  const hasDestructive = destructive !== undefined && destructive !== null && destructive !== false;
-  const hasStart = startSlot !== undefined && startSlot !== null && startSlot !== false;
+  // `hasContent` (DUP-14): an empty string is no slot either, not an empty `me-auto` box.
+  const hasDestructive = isDestructiveData(destructive) || hasContent(destructive);
+  const hasStart = hasContent(startSlot);
   const justify = align ?? (hasDestructive || hasStart ? "between" : "end");
   const destructiveNode = !hasDestructive ? null : isDestructiveData(destructive) ? (
     <Button

package/src/components/hover-menu.tsx

@@ -18,6 +18,9 @@ export interface HoverMenuProps extends Omit<ComponentPropsWithoutRef<"div">, "c
   /** The trigger. `toggle` for a button's click; `close` for a trigger that is a LINK —
    *  following it should shut a panel hover opened (TopBarActionMenu `href`). */
   trigger: (state: { open: boolean; toggle: () => void; close: () => void }) => ReactNode;
+  /** The menu's rows. `close` shuts the menu 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;
   /**
    * Which edge of the trigger the panel lines up with, by the reading direction: `end`
@@ -177,16 +180,20 @@ export function HoverMenu({
     ) ?? null;
   const items = () => (menuRef.current ? applyMenuSemantics(menuRef.current) : []);
 
-  // Escape closes, from anywhere — it did nothing at all before — as a layer on the kit's
-  // Escape stack, so inside a dialog it closes the menu and not the dialog (Wave 2,
-  // DUP-1). Focus goes back to the trigger only when it was inside the menu: a panel
-  // opened by hover while the user is typing elsewhere must not yank the caret over
-  // here on the way out.
-  const layer = useDismissLayer(open, () => {
+  // Focus goes back to the trigger only when it was inside the menu: a panel opened by
+  // hover while the user is typing elsewhere must not yank the caret over here on the
+  // way out. At once, not after the commit: a row that closes the menu and opens a dialog
+  // in one handler has the dialog record its restore target during that commit's render,
+  // and the row it would record is about to go (refactor audit 2026-10-30, INP-2).
+  const closeToTrigger = () => {
     const hadFocus = wrapperRef.current?.contains(document.activeElement) ?? false;
     close();
     if (hadFocus) triggerEl()?.focus();
-  });
+  };
+  // Escape closes, from anywhere — it did nothing at all before — as a layer on the kit's
+  // Escape stack, so inside a dialog it closes the menu and not the dialog (Wave 2,
+  // DUP-1).
+  const layer = useDismissLayer(open, closeToTrigger);
 
   // Upgrade the markup every render while open (the caller's rows can change), then
   // honour a pending keyboard open.
@@ -324,7 +331,10 @@ export function HoverMenu({
               panelClassName,
             )}
           >
-            {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(closeToTrigger)
+            }
           </div>
         </div>
       )}

package/src/components/icon-button.tsx

@@ -148,22 +148,27 @@ const ICON_BUTTON_TONES: Record<ColouredTone, { quiet: string; toned: string }>
     // focus ring at 1.1:1 on the light surfaces.
     toned: "text-warning hover:bg-warning-soft focus-visible:ring-warning-strong",
   },
+  // The ring is the tone's own text colour (0.52, refactor audit 2026-10-30, DSP-6):
+  // `--info-border` and `--success-border` rang at 1.2–1.4:1 on the light grounds and
+  // about 2:1 in dark, and More contrast re-solves neither — while `--info` / `--success`
+  // clear 4.5:1 and are re-solved there. The sync chip wears these two on every page.
   info: {
-    quiet: "text-placeholder hover:bg-info-soft hover:text-info focus-visible:ring-[var(--info-border)]",
-    toned: "text-info hover:bg-info-soft focus-visible:ring-[var(--info-border)]",
+    quiet: "text-placeholder hover:bg-info-soft hover:text-info focus-visible:ring-[var(--info)]",
+    toned: "text-info hover:bg-info-soft focus-visible:ring-[var(--info)]",
   },
   success: {
-    quiet: "text-placeholder hover:bg-success-soft hover:text-success focus-visible:ring-[var(--success-border)]",
-    toned: "text-success hover:bg-success-soft focus-visible:ring-[var(--success-border)]",
+    quiet: "text-placeholder hover:bg-success-soft hover:text-success focus-visible:ring-[var(--success)]",
+    toned: "text-success hover:bg-success-soft focus-visible:ring-[var(--success)]",
   },
-  // The hover fill and the ring are MIXED from the one colour, since a custom tone
-  // brings no `-bg` / `-border` pair of its own. The fallback is the body colour, so a
-  // `custom` tone with no colour set is the default look rather than invisible.
+  // The hover fill is MIXED from the one colour, since a custom tone brings no `-bg` of
+  // its own; the ring is the colour at full strength (0.52, DSP-6: at 40 % it was a ring
+  // nobody could see). The fallback is the body colour, so a `custom` tone with no colour
+  // set is the default look rather than invisible.
   custom: {
     quiet:
-      "text-placeholder hover:bg-[color-mix(in_srgb,var(--icon-button-tone,var(--text-primary))_12%,transparent)] hover:text-[var(--icon-button-tone,var(--text-primary))] focus-visible:ring-[color-mix(in_srgb,var(--icon-button-tone,var(--text-primary))_40%,transparent)]",
+      "text-placeholder hover:bg-[color-mix(in_srgb,var(--icon-button-tone,var(--text-primary))_12%,transparent)] hover:text-[var(--icon-button-tone,var(--text-primary))] focus-visible:ring-[var(--icon-button-tone,var(--text-primary))]",
     toned:
-      "text-[var(--icon-button-tone,var(--text-primary))] hover:bg-[color-mix(in_srgb,var(--icon-button-tone,var(--text-primary))_12%,transparent)] focus-visible:ring-[color-mix(in_srgb,var(--icon-button-tone,var(--text-primary))_40%,transparent)]",
+      "text-[var(--icon-button-tone,var(--text-primary))] hover:bg-[color-mix(in_srgb,var(--icon-button-tone,var(--text-primary))_12%,transparent)] focus-visible:ring-[var(--icon-button-tone,var(--text-primary))]",
   },
 };