@eifi1/ui-kit 0.51.7 → 0.52.0

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))]",
   },
 };
 

package/src/components/inline-confirm.tsx

@@ -0,0 +1,116 @@
+import { useEffect, useRef } from "react";
+import type { HTMLAttributes, KeyboardEvent, ReactNode, RefObject } from "react";
+import { cn } from "../lib/cn";
+import { Button } from "./button";
+import type { CommitScope } from "./write-lock";
+
+/**
+ * "Confirm in place": a destructive press swaps its row (or a header) for a question with
+ * the action and Cancel — for a card that must work without a `ConfirmProvider`, where
+ * the question belongs beside the thing it names.
+ *
+ * Written three times since 0.34 — PasskeysSetting, PushDevicesSetting and
+ * NotificationInbox's "Clear all" — and the copies drifted: the passkeys' had no `commit`
+ * and no `pending`, so under a locked `WriteLockProvider` (the demo) a passkey could
+ * still be deleted (refactor audit 2026-10-30, DUP-10). One copy now:
+ *
+ * - **Focus moves to Cancel** on open, so the Enter that pressed the trigger cannot also
+ *   answer the question.
+ * - **Cancel, or Escape on either button, leaves**, and focus goes back to
+ *   `returnFocusRef` — the trigger, which the caller renders again in the prompt's place;
+ *   otherwise the focus falls to `<body>` with the unmounted prompt. A confirm that
+ *   succeeded returns nothing: the row it named is usually gone.
+ * - **The action is a `commit` control** in `commit`'s scope, `pending` while `busy`.
+ *
+ * @internal Not part of the barrel; the cards that use it are.
+ */
+export interface InlineConfirmProps extends Omit<HTMLAttributes<HTMLElement>, "children" | "prompt"> {
+  /** The question, announced when it appears (`role="alert"`). */
+  prompt: ReactNode;
+  /** The action's words ("Delete", "Remove", "Clear all"). */
+  confirmLabel: ReactNode;
+  /** The action's accessible name, when its words do not say what it acts on. */
+  confirmName?: string;
+  cancelLabel: ReactNode;
+  onConfirm: () => void;
+  /** Cancel, or Escape on either button: the caller closes the prompt. */
+  onLeave: () => void;
+  /** The action's request runs: the action is `pending`. */
+  busy?: boolean;
+  /** The action's write-lock scope ({@link Button}'s `commit`). */
+  commit?: CommitScope;
+  /** Where focus goes once the prompt has left by Cancel or Escape: the trigger. */
+  returnFocusRef?: RefObject<HTMLElement | null>;
+  /** The element the prompt replaces: a list row (`li`) or a header (`div`). */
+  as?: "li" | "div";
+}
+
+export function InlineConfirm({
+  prompt,
+  confirmLabel,
+  confirmName,
+  cancelLabel,
+  onConfirm,
+  onLeave,
+  busy = false,
+  commit,
+  returnFocusRef,
+  as: Tag = "div",
+  className,
+  ...rest
+}: InlineConfirmProps) {
+  const cancelRef = useRef<HTMLButtonElement>(null);
+  // Set by a leave, read when the prompt unmounts: by then the caller has rendered the
+  // trigger again and its ref is attached (refs attach before passive effects run).
+  const left = useRef(false);
+
+  useEffect(() => {
+    cancelRef.current?.focus();
+  }, []);
+  useEffect(() => {
+    const leaving = left;
+    // Read at unmount on purpose: the node wanted is the trigger rendered in this
+    // prompt's place, not whatever the ref held when the prompt opened.
+    const trigger = returnFocusRef;
+    return () => {
+      if (leaving.current) trigger?.current?.focus();
+    };
+  }, [returnFocusRef]);
+
+  const leave = () => {
+    left.current = true;
+    onLeave();
+  };
+  const escapeLeaves = (event: KeyboardEvent<HTMLButtonElement>) => {
+    if (event.key === "Escape") {
+      event.preventDefault();
+      event.stopPropagation();
+      leave();
+    }
+  };
+
+  return (
+    <Tag {...rest} className={cn("space-y-2", className)}>
+      <p role="alert" className="text-sm">
+        {prompt}
+      </p>
+      <div className="flex flex-wrap gap-2">
+        <Button
+          type="button"
+          size="sm"
+          variant="danger"
+          commit={commit}
+          pending={busy}
+          aria-label={confirmName}
+          onClick={onConfirm}
+          onKeyDown={escapeLeaves}
+        >
+          {confirmLabel}
+        </Button>
+        <Button ref={cancelRef} type="button" size="sm" variant="ghost" onClick={leave} onKeyDown={escapeLeaves}>
+          {cancelLabel}
+        </Button>
+      </div>
+    </Tag>
+  );
+}