@eifi1/ui-kit 0.51.7 → 0.52.0

package/src/components/chart-figure.tsx

@@ -0,0 +1,35 @@
+// A chart's accessible description — internal, not exported from the barrel.
+//
+// A chart is a `role="figure"` named by its `aria-label` and described by a sentence of
+// what it shows (0.52, refactor audit 2026-10-30, DSP-5). SeriesChart and Treemap each
+// built the `hidden` sentence and the `aria-describedby` that points at it, and already
+// differed: Treemap kept a caller's own ids, SeriesChart had none to keep. Both put the
+// sentence AFTER the figure, as its sibling, so the chart stopped being its parent's last
+// child and a stack's `space-y-*` or `divide-y` gave it a margin or a rule underneath (0.52
+// code review, deep, charts, findings 7 and 14). One copy now, rendered inside the root.
+import { useId, type ReactNode } from "react";
+
+export interface FigureDescription {
+  /** The root's `aria-describedby`: the caller's own ids, then the description's. */
+  describedBy: string | undefined;
+  /** The description, to render INSIDE the root; `null` when there is none. */
+  node: ReactNode;
+}
+
+/**
+ * The description of a figure, and the `aria-describedby` that reads it — after the
+ * caller's own ids (`describedBy`), which it keeps. The sentence is `hidden`: it is read
+ * through the reference, never a second time in browse mode, and takes no room.
+ */
+export function useFigureDescription(description: string | undefined, describedBy?: string): FigureDescription {
+  const id = useId();
+  if (!description) return { describedBy, node: null };
+  return {
+    describedBy: describedBy ? `${describedBy} ${id}` : id,
+    node: (
+      <span id={id} hidden>
+        {description}
+      </span>
+    ),
+  };
+}

package/src/components/chart-zoom-core.tsx

@@ -466,7 +466,6 @@ export function withChartZoom<P extends ZoomTarget>(Chart: ComponentType<P>) {
         <ZoomLayer
           axisIds={axes.map((axis) => axis.id)}
           only={only}
-          label={labels.zoomHint}
           onZoom={(selection) => {
             const next = zoomAfter(state, selection, source);
             if (next.x !== xWindow) setXWindow(next.x);
@@ -506,17 +505,20 @@ export function withChartZoom<P extends ZoomTarget>(Chart: ComponentType<P>) {
  * A transparent rectangle over the plot area that reads the drag. It does NOT stop the
  * event: recharts drives its tooltip from the same pointer move bubbling up to its own
  * wrapper, so swallowing it here would trade the tooltip for the zoom.
+ *
+ * Nothing to assistive technology (0.52, refactor audit 2026-10-30, DSP-5): it was a
+ * `role="application"` named by the drag hint, which could not take focus — the one name
+ * on an otherwise unnamed chart. The hint is in the chart's description now
+ * (`SeriesChart`'s figure), and `data-zoom-surface` is how a test finds the rect.
  */
 function ZoomLayer({
   axisIds,
   only,
-  label,
   onZoom,
   onReset,
 }: {
   axisIds: string[];
   only?: "x" | "y";
-  label: string;
   onZoom: (selection: ZoomSelection) => void;
   onReset: () => void;
 }) {
@@ -578,8 +580,7 @@ function ZoomLayer({
         height={plot.height}
         // `transparent`, not `none`: an unpainted shape takes no pointer events.
         fill="transparent"
-        role="application"
-        aria-label={label}
+        data-zoom-surface=""
         style={{ cursor: "crosshair" }}
         onPointerDown={(event) => {
           if (event.button !== 0) return;

package/src/components/chart.tsx

@@ -13,6 +13,7 @@ import type { ComponentProps, CSSProperties, ReactNode, RefObject } from "react"
 import { Legend as RechartsLegend, ResponsiveContainer, Tooltip as RechartsTooltip } from "recharts";
 import { cn } from "../lib/cn";
 import { isRtl } from "../lib/direction";
+import { useFigureDescription } from "./chart-figure";
 import { TYPOGRAPHIC_MINUS } from "../lib/minus";
 
 export interface ChartSeriesConfig {
@@ -33,6 +34,13 @@ export function useChart(): ChartConfig {
 interface ChartContainerProps extends ComponentProps<"div"> {
   config: ChartConfig;
   children: ComponentProps<typeof ResponsiveContainer>["children"];
+  /**
+   * What the chart SHOWS, in a sentence, as its accessible description (0.52): read through
+   * `aria-describedby`, after a caller's own ids, and drawn nowhere. Inside the root, so
+   * the chart stays the one element its parent lays out. Pair it with `role="figure"` and
+   * an `aria-label`, as `Treemap` and `SeriesChart` do.
+   */
+  description?: string;
 }
 
 /**
@@ -49,8 +57,9 @@ interface ChartContainerProps extends ComponentProps<"div"> {
  * page's direction like any other markup. A consumer who does want a mirrored
  * category axis passes `reversed` on its own `XAxis`.
  */
-export function ChartContainer({ id, className, children, config, ...props }: ChartContainerProps) {
+export function ChartContainer({ id, className, children, config, description, ...props }: ChartContainerProps) {
   const uid = useId();
+  const about = useFigureDescription(description, props["aria-describedby"]);
   // The id is pasted into an UNQUOTED `[data-chart=…]` selector below, so it has to be
   // a CSS identifier: one stray space or `#` and the browser discards the whole rule,
   // taking every series colour with it — silently, because an invalid rule is not an
@@ -81,11 +90,13 @@ export function ChartContainer({ id, className, children, config, ...props }: Ch
           className,
         )}
         {...props}
+        aria-describedby={about.describedBy}
       >
         <ChartStyle id={chartId} config={config} />
         <ResponsiveContainer width="100%" height="100%">
           {children}
         </ResponsiveContainer>
+        {about.node}
       </div>
     </ChartContext.Provider>
   );
@@ -489,15 +500,22 @@ export function ChartLegendContent({ payload, onItemClick, hiddenKeys, activeKey
         const label = series?.label ?? vv ?? cfgKey;
         const off = hidden?.has(cfgKey) ?? false;
         const dimmed = off || (activeKey != null && activeKey !== cfgKey);
+        // The label's cue, in a key and on a button alike: a hidden series struck through,
+        // and an entry an isolate legend dims in the muted ink — drawn still, so not struck.
+        // Only a toggle button had one, and a key or an isolate legend told an entry off by
+        // its 10px swatch at 40 % alone (0.52 code review, deep, charts, finding 9).
+        const cue = off ? "line-through" : dimmed ? "text-muted" : undefined;
         const className = cn(
           "flex items-center gap-1.5 text-secondary transition-opacity",
           onItemClick ? "cursor-pointer hover:opacity-80" : "cursor-default",
-          dimmed && "opacity-40",
         );
+        // Only the swatch fades; the label keeps an ink of AA contrast (0.52, refactor audit
+        // 2026-10-30, DSP-9). The whole entry at 40 % put a switched-off label under 2:1,
+        // on a button that brings its series back and is named by nothing else.
         const swatch = (
           <span
             aria-hidden
-            className="h-2.5 w-2.5 shrink-0 rounded-[3px]"
+            className={cn("h-2.5 w-2.5 shrink-0 rounded-[3px]", dimmed && "opacity-40")}
             style={{ backgroundColor: color } as CSSProperties}
           />
         );
@@ -519,10 +537,13 @@ export function ChartLegendContent({ payload, onItemClick, hiddenKeys, activeKey
             className={className}
           >
             {swatch}
-            <span className={cn(off && "line-through")}>{label}</span>
+            <span className={cue}>{label}</span>
           </button>
         ) : (
-          <span key={`${cfgKey}-${i}`} className={className}>
+          // On the entry, not round the label: the text is its own, so the key's DOM is the
+          // same with a cue as without. A line-through reaches the text only (the swatch
+          // holds none), and the ink colours no swatch.
+          <span key={`${cfgKey}-${i}`} className={cn(className, cue)}>
             {swatch}
             {label}
           </span>

package/src/components/combobox-core.tsx

@@ -11,6 +11,7 @@ import type {
 import { Check, Plus } from "lucide-react";
 import { cn } from "../lib/cn";
 import { CLIPS_ATTRIBUTE } from "../lib/clipping";
+import { tabStops } from "../lib/focus-left";
 import { DropdownSearchHeader } from "./dropdown";
 import { PickerSheet, SHEET_ROW_CLASS } from "./picker-sheet";
 import { usePhoneLayout, useRemPx } from "../hooks/use-breakpoint";
@@ -471,10 +472,147 @@ export function useComboboxCore<V extends string | number>({
  * heading is the one thing that says where in the alphabet the thumb is. Opaque — the
  * list's own `bg-surface` — so the rows pass beneath it rather than through it. Shared
  * by every list that heads groups (the panel and the sheet, `Combobox`, `Autocomplete`,
- * `InlineEntityCombobox`).
+ * `InlineEntityCombobox`). Inside its {@link OptionGroup} since 0.52, it sticks while its
+ * own group is in view and the next group's heading pushes it out.
  */
 export const GROUP_HEADING_STICKY = "sticky top-0 z-10 bg-surface";
 
+/** One run of rows that share a group, as {@link groupRuns} finds them: `group` is
+ *  `null` for rows filed under none, which stand bare in the list; `start` is the index
+ *  of the run's first row in the whole list (the option ids and the arrows count by it). */
+export interface GroupRun<T> {
+  group: string | null;
+  start: number;
+  rows: T[];
+}
+
+/**
+ * A list's rows, cut where the group changes — the runs {@link OptionGroup} wraps. The
+ * lists keep their rows group-contiguous (the panel's source order, or the ranked list
+ * regrouped by its best member), so a run is "the rows up to the next change of group".
+ * `groupOf` is asked once per row. An empty group name is no group: a heading of nothing
+ * names nothing.
+ */
+export function groupRuns<T>(rows: readonly T[], groupOf: (row: T) => string | null | undefined): GroupRun<T>[] {
+  const runs: GroupRun<T>[] = [];
+  rows.forEach((row, i) => {
+    const raw = groupOf(row);
+    const group = raw === undefined || raw === null || raw === "" ? null : raw;
+    const last = runs[runs.length - 1];
+    if (last && last.group === group) last.rows.push(row);
+    else runs.push({ group, start: i, rows: [row] });
+  });
+  return runs;
+}
+
+/**
+ * A group of options under its heading, inside a `role="listbox"`: a `role="group"`
+ * NAMED by the heading, so a reader moving through the list hears which group a row is
+ * in (refactor audit 2026-10-30, INP-8). The heading was loose text among the options,
+ * and focus stays in the search box with the row announced through
+ * `aria-activedescendant` — keksdose's "Groceries" under Recent and again under its own
+ * group were two identical names, and an account filed by its type never said the type.
+ * The heading stays a visible first item of the group (sticky within it); the columns of
+ * {@link ComboboxPanel} carry the same `role="group"`.
+ *
+ * `id` must be unique in the document (the list's id plus the run's start); `className`
+ * places the heading's text in its list.
+ */
+export function OptionGroup({
+  id,
+  heading,
+  className,
+  children,
+}: {
+  id: string;
+  heading: ReactNode;
+  className?: string;
+  children: ReactNode;
+}) {
+  return (
+    <li role="presentation">
+      <ul role="group" aria-labelledby={id}>
+        <li
+          role="presentation"
+          id={id}
+          className={cn(GROUP_HEADING_STICKY, "font-semibold uppercase tracking-wide text-muted", className)}
+        >
+          {heading}
+        </li>
+        {children}
+      </ul>
+    </li>
+  );
+}
+
+/**
+ * A list's rows in their {@link groupRuns}: a run filed under no group stands bare, any
+ * other is an {@link OptionGroup} under its heading. The one drawing of it for
+ * {@link ComboboxPanel}, {@link Combobox}, {@link InlineEntityCombobox} and
+ * {@link Autocomplete}, which had a copy each (0.52 code review, combobox-core.tsx).
+ *
+ * A run is keyed by its group and how many runs of that group came before it — NOT by
+ * the index of its first row, which every keystroke that drops a row from an earlier
+ * group moves: each later group was re-keyed and React rebuilt it, every row of it, per
+ * keystroke. A row is keyed by `rowKey` among the rows of its run; an option may stand
+ * in two groups (keksdose's "Recent", live #203), never twice in one.
+ *
+ * `row(o, i, grouped)`: `i` is the row's index in the whole list (the option ids and the
+ * arrows count by it), `grouped` whether it stands under a heading. `headingClassName`
+ * places a run's heading text in its list. The group's id is the list's id and the run's
+ * first row, unique in the document.
+ */
+export function GroupedOptions<T>({
+  runs,
+  listboxId,
+  rowKey,
+  row,
+  headingClassName,
+}: {
+  runs: readonly GroupRun<T>[];
+  listboxId: string;
+  rowKey: (o: T) => string;
+  row: (o: T, index: number, grouped: boolean) => ReactNode;
+  headingClassName: (run: GroupRun<T>) => string;
+}) {
+  return keyRuns(runs).map(({ run, key }) => {
+    const grouped = run.group !== null;
+    const rows = run.rows.map((o, k) => <Fragment key={rowKey(o)}>{row(o, run.start + k, grouped)}</Fragment>);
+    if (!grouped) return <Fragment key={key}>{rows}</Fragment>;
+    return (
+      <OptionGroup
+        key={key}
+        id={`${listboxId}-group-${run.start}`}
+        heading={run.group}
+        className={headingClassName(run)}
+      >
+        {rows}
+      </OptionGroup>
+    );
+  });
+}
+
+/** Each run with its key — see {@link GroupedOptions}: the group and how many runs of it
+ *  came before, which a query narrowing an earlier group does not move. */
+function keyRuns<T>(runs: readonly GroupRun<T>[]): { run: GroupRun<T>; key: string }[] {
+  const seen = new Map<string | null, number>();
+  return runs.map((run) => {
+    const nth = seen.get(run.group) ?? 0;
+    seen.set(run.group, nth + 1);
+    // The count first: it never holds a ":", so no group's name can make two keys equal.
+    return { run, key: run.group === null ? String(nth) : `${nth}:${run.group}` };
+  });
+}
+
+/** The anchored list's heading text: the first group's sits closer to the list's top
+ *  edge, unless a row stands above it (`first: false`, Combobox's create row). */
+export const anchoredHeadingClass = (run: GroupRun<unknown>, first = true) =>
+  cn("px-3 pb-0.5 text-caption", run.start === 0 && first ? "pt-1" : "pt-2");
+
+/** The typed comboboxes' phone sheet's heading text ({@link Combobox},
+ *  {@link InlineEntityCombobox}). */
+export const SHEET_HEADING_CLASS = "px-4 pb-0.5 pt-3 text-caption";
+
 export const SUGGESTION_LIST_CLASS =
   "max-h-64 overflow-y-auto rounded-md border border-subtle bg-surface py-1 shadow-lg";
 
@@ -505,6 +643,63 @@ export function useActiveOptionScroll(activeId: string | undefined): void {
   }, [activeId]);
 }
 
+/**
+ * What a TYPED combobox's list says — {@link Combobox} and {@link InlineEntityCombobox},
+ * which had a copy each, the second saying "see the twin" (0.52 code review,
+ * inline-entity-combobox.tsx; the rules are refactor audit 2026-10-30, INP-6):
+ *
+ * - `showing`: the anchored list is on screen — open, not inert, with a row to show (an
+ *   option, or `extraRow`, the create row). The list is then a layer on the Escape stack
+ *   (Wave 2, DUP-1). Never on a phone, where the sheet is the list and the layer.
+ * - `expanded`, the field's `aria-expanded`: a list on screen. An open list with nothing
+ *   to show said "expanded" with no listbox in the document.
+ * - `activeOption`: the id of the row the keyboard is on — `active`, a TAKEABLE row's
+ *   index, else -1 — in whichever list shows, kept scrolled into view.
+ * - `statusRegion`: a polite live region with the row count, or "No results" for a query
+ *   that left nothing to show or do. Focus stays in the field, or in the sheet's search
+ *   box, so a list changing under it was silent. A list opened on no query asked nothing.
+ *   Render it outside the list, so the list going cannot take it along: on a phone inside
+ *   the sheet, which hides from a reader what lies outside it. There it mounts with the
+ *   sheet, so the count the sheet opens with is not announced — as a ComboboxPanel's is
+ *   not, in either shell — and every change after it is.
+ */
+export function useTypedListStatus({
+  isPhone,
+  open,
+  inert,
+  rowCount,
+  extraRow,
+  query,
+  active,
+  optionId,
+  labels,
+}: {
+  isPhone: boolean;
+  open: boolean;
+  inert: boolean;
+  /** The options the list shows. */
+  rowCount: number;
+  /** A create row shows: the list is not empty, it offers to fill itself. */
+  extraRow: boolean;
+  query: string;
+  active: number;
+  optionId: (index: number) => string;
+  labels: { resultCount: (count: number) => string; noResults: string };
+}): { showing: boolean; expanded: boolean; activeOption: string | undefined; statusRegion: ReactNode } {
+  const showing = !isPhone && open && !inert && (rowCount > 0 || extraRow);
+  const expanded = isPhone ? open && !inert : showing;
+  const activeOption = expanded && active >= 0 ? optionId(active) : undefined;
+  useActiveOptionScroll(activeOption);
+  const status =
+    !open || inert ? null : rowCount > 0 ? labels.resultCount(rowCount) : query && !extraRow ? labels.noResults : null;
+  const statusRegion = (
+    <div role="status" aria-live="polite" className="sr-only">
+      {status}
+    </div>
+  );
+  return { showing, expanded, activeOption, statusRegion };
+}
+
 /** The anchored panel's least width, in rem: 220 px at Normal (§3.2). */
 const PANEL_MIN_REM = 13.75;
 
@@ -570,7 +765,9 @@ export interface ComboboxPanelProps<V extends string | number> extends Component
    */
   renderOption?: (o: ComboOption<V>) => ReactNode;
   /** Controls between the search box and the list, in the anchored panel and the phone
-   *  sheet alike — MultiSelect's "Select all" and "Clear". */
+   *  sheet alike — MultiSelect's "Select all" and "Clear". In the anchored panel Tab from
+   *  the search box walks them before it leaves (0.52); keep them focusable when they
+   *  have nothing to do (`aria-disabled`), or a press drops their focus to <body>. */
   toolbar?: ReactNode;
   /** See {@link ComboboxPanelWidth}. */
   width?: ComboboxPanelWidth;
@@ -695,6 +892,44 @@ export function ComboboxPanel<V extends string | number>({
     return () => observer.disconnect();
   }, [fit, placed, panelRef]);
 
+  // The toolbar's own box, so the keyboard can tell its buttons from the search box.
+  const toolbarRef = useRef<HTMLDivElement>(null);
+  // The kit's one tab-stop rule (0.52 code review, lib/focus-left.ts): this had a third
+  // copy of the selector, without its `hidden`/`inert` half. An `aria-disabled` button
+  // stays a stop — it keeps its focus (INP-9).
+  const toolbarStops = () => (toolbarRef.current ? tabStops(toolbarRef.current, { includeSelf: false }) : []);
+  // A POINTER press on the toolbar leaves the focus in the search box, as a press on a
+  // row does: since a toolbar button's keys are its own (INP-9), a mouse press — which
+  // focuses a button in Chrome and Firefox — left the arrows on "Select all", where they
+  // did nothing; until 0.52 they moved the list's highlight (0.52 code review,
+  // combobox-core.tsx). Tab still reaches the buttons. A field in a toolbar keeps its
+  // press: it is there to be typed in.
+  const toolbarBox = hasContent(toolbar) && (
+    // eslint-disable-next-line jsx-a11y/no-static-element-interactions -- never focused itself: it only keeps a pointer press on its buttons from taking the focus out of the search box.
+    <div
+      ref={toolbarRef}
+      onMouseDown={(e) => {
+        if (!(e.target as Element).closest("input, select, textarea, [contenteditable]")) e.preventDefault();
+      }}
+    >
+      {toolbar}
+    </div>
+  );
+  /** Tab on a toolbar button in the anchored panel: Shift+Tab off the first goes back to
+   *  the search box, Tab off the last leaves as the search box's Tab did; between two of
+   *  them the browser's own Tab is right, as they stand next to each other. */
+  const tabInToolbar = (e: ReactKeyboardEvent) => {
+    const stops = toolbarStops();
+    const at = stops.indexOf(e.target as HTMLElement);
+    if (e.shiftKey && at === 0) {
+      e.preventDefault();
+      inputRef.current?.focus();
+    } else if (!e.shiftKey && at === stops.length - 1) {
+      e.preventDefault();
+      closeToTrigger();
+    }
+  };
+
   // The WAI-ARIA APG's listbox keyboard, in full: Up/Down step, Home/End jump, Enter
   // commits, Tab leaves, Escape closes. On the panel's search box — in the anchored
   // panel and, through `onSearchKeyDown`, in the phone sheet's header (BUG-5).
@@ -704,6 +939,14 @@ export function ComboboxPanel<V extends string | number>({
     // panel's events travel up the React tree through that dialog, portal or not, and
     // one press used to close the dialog and throw the form away, list still open.
     if (takeEscape(e)) return;
+    // A key on a toolbar button is the button's — Enter and Space press it — and not the
+    // list's: Enter there toggled the highlighted row instead of pressing "Select all".
+    // Only Tab is the panel's (refactor audit 2026-10-30, INP-9). The phone sheet hands
+    // this handler its search box's keys alone, and its trap keeps Tab.
+    if (toolbarRef.current?.contains(e.target as Node)) {
+      if (e.key === "Tab" && !isPhone) tabInToolbar(e);
+      return;
+    }
     // The Enter that confirms an IME composition is the IME's (BUG-9).
     if (isImeEnter(e)) return;
     // Disabled rows are passed over (`stepEnabled`), and each step starts from the
@@ -731,8 +974,12 @@ export function ComboboxPanel<V extends string | number>({
       // here to whatever follows the portal — i.e. off the end of the document. The
       // trade is one extra Tab (trigger, then onward) against never stranding focus
       // at the bottom of the page. The phone sheet is a dialog, and its trap keeps Tab.
+      // A panel with a toolbar is walked through it first: the rows are not tab stops,
+      // so MultiSelect's "Select all" and "Clear" were out of a keyboard's reach (INP-9).
       e.preventDefault();
-      closeToTrigger();
+      const first = e.shiftKey ? undefined : toolbarStops()[0];
+      if (first) first.focus();
+      else closeToTrigger();
     }
   };
 
@@ -891,17 +1138,9 @@ export function ComboboxPanel<V extends string | number>({
     </li>
   );
 
-  // In columns, a block per run of one group; `results` keeps its source order, so a
-  // run is the rows up to the next change of group.
-  const blocks: { group: string; rows: { o: ComboOption<V>; i: number }[] }[] = [];
-  if (columns && !isPhone) {
-    results.forEach((o, i) => {
-      const group = o.group ?? "";
-      const last = blocks[blocks.length - 1];
-      if (last && last.group === group) last.rows.push({ o, i });
-      else blocks.push({ group, rows: [{ o, i }] });
-    });
-  }
+  // The rows' group runs — `results` keeps its source order, so a run is the rows up to
+  // the next change of group. In columns, a block per run.
+  const runs = groupRuns(results, (o) => o.group);
 
   const list = (
     <ul
@@ -921,51 +1160,39 @@ export function ComboboxPanel<V extends string | number>({
         isPhone && "flex-none",
       )}
     >
-      {columns && !isPhone
-        ? blocks.map((block) => (
-            // A column block: its heading is a picture of the group's name, which the
-            // `role="group"` carries for a reader — the listbox may own options and
-            // groups, and a heading of loose text in it is neither.
-            <li key={`${block.group}|${block.rows[0].i}`} role="presentation" className="mb-3 break-inside-avoid">
-              {block.group && (
-                <div aria-hidden className="mb-1 text-xs font-semibold uppercase tracking-wide text-muted">
-                  {block.group}
-                </div>
-              )}
-              <ul role="group" aria-label={block.group || undefined} className="space-y-0.5">
-                {block.rows.map(({ o, i }) => (
-                  <Fragment key={`${o.group ?? ""}|${String(o.value)}`}>{optionRow(o, i)}</Fragment>
-                ))}
-              </ul>
-            </li>
-          ))
-        : results.map((o, i) => {
-            // One heading per group rather than a grey suffix on every row (#136), and
-            // the thing the native <select>'s <optgroup> used to give the account
-            // picker for free (live #200). `results` keeps its source order, so a
-            // boundary is simply "different from the row above".
-            const startsGroup = o.group != null && o.group !== results[i - 1]?.group;
-            return (
-              // Keyed by group AND value: an option may deliberately appear twice —
-              // Keksdose repeats recently-used categories in a "Recent" group at the
-              // top (live #203) — and a bare value key would collide.
-              <Fragment key={`${o.group ?? ""}|${String(o.value)}`}>
-                {startsGroup && (
-                  <li
-                    role="presentation"
-                    className={cn(
-                      GROUP_HEADING_STICKY,
-                      "font-semibold uppercase tracking-wide text-muted",
-                      isPhone ? "px-4 pb-1 pt-3 text-xs" : "px-3 pb-0.5 pt-2 text-caption first:pt-1",
-                    )}
-                  >
-                    {o.group}
-                  </li>
-                )}
-                {optionRow(o, i)}
-              </Fragment>
-            );
-          })}
+      {columns && !isPhone ? (
+        keyRuns(runs).map(({ run, key }) => (
+          // A column block: its heading is a picture of the group's name, which the
+          // `role="group"` carries for a reader — the listbox may own options and
+          // groups, and a heading of loose text in it is neither. Keyed as
+          // GroupedOptions keys a run, so a filter does not rebuild the later columns.
+          <li key={key} role="presentation" className="mb-3 break-inside-avoid">
+            {run.group !== null && (
+              <div aria-hidden className="mb-1 text-xs font-semibold uppercase tracking-wide text-muted">
+                {run.group}
+              </div>
+            )}
+            <ul role="group" aria-label={run.group ?? undefined} className="space-y-0.5">
+              {run.rows.map((o, k) => (
+                <Fragment key={String(o.value)}>{optionRow(o, run.start + k)}</Fragment>
+              ))}
+            </ul>
+          </li>
+        ))
+      ) : (
+        // One heading per group rather than a grey suffix on every row (#136), and the
+        // thing the native <select>'s <optgroup> used to give the account picker for
+        // free (live #200) — a `role="group"` it names (INP-8). Keksdose repeats
+        // recently-used categories in a "Recent" group at the top (live #203): a value
+        // is a row's key within its group alone.
+        <GroupedOptions
+          runs={runs}
+          listboxId={listboxId}
+          rowKey={(o) => String(o.value)}
+          row={optionRow}
+          headingClassName={(run) => (isPhone ? "px-4 pb-1 pt-3 text-xs" : anchoredHeadingClass(run))}
+        />
+      )}
       {createRow}
     </ul>
   );
@@ -986,7 +1213,11 @@ export function ComboboxPanel<V extends string | number>({
         className={className}
         style={style}
         open
-        onClose={() => core.setOpen(false)}
+        // The X, Done, Escape and Back hand focus to the trigger, as taking a row does:
+        // these triggers open on a click, never on focus, so focusing one re-opens
+        // nothing — and the sheet, which cannot know that, leaves focus on <body>
+        // (refactor audit 2026-10-30, INP-7).
+        onClose={closeToTrigger}
         title={sheetTitle}
         query={query}
         onQueryChange={setQuery}
@@ -1005,7 +1236,7 @@ export function ComboboxPanel<V extends string | number>({
         // A single pick closes the sheet itself.
         done={multi}
       >
-        {toolbar}
+        {toolbarBox}
         <div className="relative">
           {list}
           {announcement}
@@ -1079,7 +1310,7 @@ export function ComboboxPanel<V extends string | number>({
         listboxId={listboxId}
         activeId={activeId}
       />
-      {toolbar}
+      {toolbarBox}
       {/* One list, two containers: the desktop panel and the phone sheet render
           the same rows through the same handlers (live #200). */}
       {list}