fix(panel): the file Files changed's keys stand on is marked by its card's edge, not a focus ring

packages/panel/src/styles/file-head-current.test.ts

@@ -0,0 +1,82 @@
+// @vitest-environment jsdom
+
+import assert from "node:assert/strict";
+import { afterEach, test } from "vitest";
+import { layContainersAt } from "../testing/container-width.js";
+
+/**
+ * file-head-current.test.ts -- the file Files changed's keys stand on is
+ * marked as a selected card is, not ringed as a focused control: its card,
+ * Pierre's file element the header stands in, draws its own edge in the
+ * selected edge's ink, and the header itself wears no ring, so the card never
+ * reads as double-bordered. Every other file's card keeps its edge. jsdom
+ * lays nothing out and resolves no `light-dark()`, so the sheets are laid
+ * (`testing/container-width.ts`), each file is built in the markup the list
+ * draws (the card, Pierre's header slot, the view's kept element, and the
+ * header, `changes-list.tsx`), and what the sheets declare for an element is
+ * read off the rules that select it.
+ */
+
+let laid: HTMLStyleElement | undefined;
+
+afterEach(() => {
+  laid?.remove();
+  laid = undefined;
+  document.body.replaceChildren();
+  document.documentElement.removeAttribute("data-luke-profile");
+});
+
+/** A file's card in the list, its header standing or not; answers the card and its header. */
+function card(list: Element, standing: boolean) {
+  const container = list.appendChild(document.createElement("diffs-container"));
+  const slot = container.appendChild(document.createElement("div"));
+  slot.setAttribute("slot", "header-custom");
+  const kept = slot.appendChild(document.createElement("div"));
+  kept.className = "diff-list-head-slot";
+  const head = kept.appendChild(document.createElement("div"));
+  head.className = "diff-list-head";
+  head.toggleAttribute("data-standing", standing);
+  head.toggleAttribute("data-collapsed", true);
+  return { container, head };
+}
+
+/** Whether `selector` selects `element`; a selector jsdom cannot read, a pseudo-element's, selects none of these. */
+function selects(element: Element, selector: string): boolean {
+  try {
+    return element.matches(selector);
+  } catch {
+    return false;
+  }
+}
+
+/** Every value the laid sheets declare for `property` on `element`, in the order they are laid. */
+function declared(element: Element, property: string): string[] {
+  const values: string[] = [];
+  for (const rule of laid?.sheet?.cssRules ?? []) {
+    if (!(rule instanceof CSSStyleRule) || !selects(element, rule.selectorText)) continue;
+    const value = rule.style.getPropertyValue(property);
+    if (value !== "") values.push(value);
+  }
+  return values;
+}
+
+test("the file the keys stand on draws its card's edge in the selected ink, and its header wears no ring", () => {
+  document.documentElement.setAttribute("data-luke-profile", "desktop");
+  laid = layContainersAt({});
+  const list = document.body.appendChild(document.createElement("div"));
+  list.className = "diff-view diff-list";
+  const stood = card(list, true);
+  const other = card(list, false);
+
+  assert.deepEqual(declared(stood.container, "border-color"), [
+    "var(--luke-color-border-selected)",
+  ]);
+  assert.deepEqual(declared(other.container, "border-color"), []);
+  for (const { head } of [stood, other]) {
+    assert.deepEqual(
+      [...declared(head, "outline"), ...declared(head, "outline-style")],
+      [],
+      "no ring on the header",
+    );
+  }
+});

packages/panel/src/styles/tasks.css

@@ -1920,8 +1920,7 @@
 /* Files changed's list of diffs (diff-list.tsx): every file under a header
    of its own, which Pierre keeps at the top while the file's lines scroll
    under it, so it is drawn opaque, on the code's ground, at the height the
-   bundle reserves for it (diff-view/index.ts's LIST_HEADER_HEIGHT). The file
-   stage-cli's keys stand on is ringed as a focused control is. */
+   bundle reserves for it (diff-view/index.ts's LIST_HEADER_HEIGHT). */
 .diff-list-head {
   background: var(--luke-color-surface);
   color: var(--luke-color-text);
@@ -1945,9 +1944,14 @@
   border-bottom: 1px solid var(--luke-color-border);
 }
 
-.diff-list-head[data-standing] {
-  outline: var(--luke-focus-ring-width) solid var(--luke-color-focus-ring);
-  outline-offset: var(--luke-focus-ring-inset);
+/* The file stage-cli's keys stand on is marked as a selected card is: the
+   card's own edge, Pierre's file element the header stands in, drawn in the
+   selected edge's ink, around the folded header or the whole open file. It
+   says which file the keys act on, not where the focus is: the keyboard's
+   focus rings the control in the header that holds it, as every control is
+   ringed (base.css), so the card never wears a second border or a ring. */
+.diff-list diffs-container:has(.diff-list-head[data-standing]) {
+  border-color: var(--luke-color-border-selected);
 }
 
 .diff-list-fold {