@gemboss/ui 0.48.0 → 0.50.0

package/src/menu-keys.ts

@@ -0,0 +1,199 @@
+/**
+ * menu-keys.ts (23/10/2026): what a kit menu (`details.ui-menu`) does from the keyboard, and the page-wide rules every
+ * React menu shares. Used by `Menu` (menu.tsx) and `LanguageSwitcher`; menu-plain.js is the plain-HTML copy, and
+ * menu-browser.test.ts runs one script against both, so they cannot drift apart.
+ *
+ * - The list is `role="menu"` named by the trigger's label, its rows `role="menuitem"` out of the Tab order (tabindex -1):
+ *   the arrows move between them, not Tab. `armMenu` adds whatever hand-written markup leaves out.
+ * - An opening by a click, Enter or Space on the trigger, or ↓, puts focus on the first row that can act; ↑ on the last.
+ * - On a ROW (a field or a checkbox in the list keeps its own keys): ↓ ↑ move to the next / previous row that can act and
+ *   wrap; a disabled row (`disabled`, `aria-disabled="true"`) is skipped. Home / End: the first / last. Enter and Space
+ *   act on the row (a button does both natively, a link only Enter, so Space clicks a link row here).
+ * - Escape closes the menu and puts focus back on the trigger; it is taken (default prevented, propagation stopped), so a
+ *   popup holding the menu stays open. Tab closes it and lets focus go on from the trigger, forward or back.
+ * - One menu open at a time: opening one closes every other open `details.ui-menu` on the page, however it was opened
+ *   (a click, a key, a script), not only by a click outside, which a key never is. A menu that holds it stays open.
+ * - ONE set of page-wide listeners for every mounted React menu (`registerMenu`): a click outside closes it, Escape closes
+ *   it with focus back on its trigger, its toggle floats or sinks it. A 100-row table has 100 Menus, not 300 listeners.
+ */
+import { canFloatMenus, floatMenu, partsOf, sinkMenu } from "./menu-layer";
+
+/** A row of a kit menu. */
+export const MENU_ROW = ".ui-menu__item";
+const MENU = "details.ui-menu";
+
+/** The rows the keys land on: in the list, not disabled. */
+export function menuRows(d: HTMLDetailsElement, selector = MENU_ROW): HTMLElement[] {
+  const { list } = partsOf(d);
+  if (!list) return [];
+  return Array.from(list.querySelectorAll<HTMLElement>(selector)).filter((r) => !r.matches(':disabled, [aria-disabled="true"]'));
+}
+
+/** Gives a menu what `Menu` renders, where the markup has not said it already: `aria-haspopup` on the trigger, the list a
+ *  `menu` named by the trigger's label, each row a `menuitem` out of the Tab order. Never overwrites (LanguageSwitcher's
+ *  rows are `menuitemradio`). */
+export function armMenu(d: HTMLDetailsElement): void {
+  const { button, list } = partsOf(d);
+  if (button && !button.hasAttribute("aria-haspopup")) button.setAttribute("aria-haspopup", "menu");
+  if (!list) return;
+  if (!list.hasAttribute("role")) list.setAttribute("role", "menu");
+  if (!list.hasAttribute("aria-label") && !list.hasAttribute("aria-labelledby")) {
+    const name = button ? button.getAttribute("aria-label") || (button.textContent ?? "").trim() : "";
+    if (name) list.setAttribute("aria-label", name);
+  }
+  list.querySelectorAll<HTMLElement>(MENU_ROW).forEach((r) => {
+    if (!r.hasAttribute("role")) r.setAttribute("role", "menuitem");
+    if (!r.hasAttribute("tabindex")) r.setAttribute("tabindex", "-1");
+  });
+}
+
+/** Closes every other open kit menu (not one that holds `d`). */
+export function closeOtherMenus(d: HTMLDetailsElement): void {
+  document.querySelectorAll<HTMLDetailsElement>(`${MENU}[open]`).forEach((o) => {
+    if (o !== d && !o.contains(d)) o.open = false;
+  });
+}
+
+// Menus an opening has already closed the others for: the page-wide toggle listener skips them once, so the others are
+// closed once per opening, in the task of the click or key that opened it.
+const closedFor = new WeakSet<HTMLDetailsElement>();
+
+/** Opens a menu the way a click on its trigger does: the others close, it floats in the same task where it can. */
+export function openMenu(d: HTMLDetailsElement): void {
+  // (Already open: no toggle will come to use up the mark.)
+  if (!d.open) {
+    closeOtherMenus(d);
+    closedFor.add(d);
+    d.open = true;
+  }
+  armMenu(d);
+  if (canFloatMenus()) floatMenu(d);
+}
+
+/** Closes it; `focusTrigger` puts focus back on its button. */
+export function closeMenu(d: HTMLDetailsElement, focusTrigger = true): void {
+  d.open = false;
+  if (focusTrigger) partsOf(d).button?.focus();
+}
+
+/** Focus where an opening lands: the first row that can act, or the last. */
+export function focusRow(d: HTMLDetailsElement, which: "first" | "last", selector = MENU_ROW): void {
+  const rows = menuRows(d, selector);
+  (which === "first" ? rows[0] : rows[rows.length - 1])?.focus();
+}
+
+const mounted = new Set<HTMLDetailsElement>();
+let wired = false;
+/** The page-wide listeners, once: the one-open rule for every `details.ui-menu` (React or hand-written), and for the
+ *  menus `registerMenu` holds, the outside click, Escape and the float. */
+export function listenForMenus(): void {
+  if (wired || typeof document === "undefined") return;
+  wired = true;
+  const openMounted = () => Array.from(document.querySelectorAll<HTMLDetailsElement>(`${MENU}[open]`)).filter((d) => mounted.has(d));
+  document.addEventListener("click", (e) => {
+    for (const d of openMounted()) if (!d.contains(e.target as Node)) d.open = false;
+  });
+  document.addEventListener("keydown", (e) => {
+    // An Escape something else already took (a dialog over the page, a combobox) is not the menus' (review of #5179).
+    if (e.key !== "Escape" || e.isComposing || e.defaultPrevented) return;
+    const open = openMounted().reverse();
+    if (!open.length) return;
+    // Taken (default prevented), as kit-plain.js takes it: a dialog listening after this one, on the document or the window,
+    // must not close on the Escape that closed the menu. Focus on the ⋯ of a menu whose rows are all disabled closed the
+    // menu AND the admin's Modal or funnel popup around it (review of the admin's step 2, measured in Chromium): the menu
+    // was already shut when the dialog looked.
+    e.preventDefault();
+    // Innermost first, so focus ends on the outermost trigger that stays on screen.
+    for (const d of open) closeMenu(d);
+  });
+  document.addEventListener("toggle", (e) => {
+    const d = e.target as HTMLDetailsElement | null;
+    if (!d || typeof d.matches !== "function" || !d.matches(MENU)) return;
+    // A close uses up the mark too: an opening closed again before its toggle came left it, and the next opening skipped
+    // the one-open rule (review of #5179).
+    if (!d.open) { closedFor.delete(d); if (mounted.has(d)) sinkMenu(d); return; }
+    if (!closedFor.delete(d)) closeOtherMenus(d);
+    if (mounted.has(d)) {
+      if (canFloatMenus()) floatMenu(d);
+      armMenu(d);
+    }
+  }, true);
+}
+
+/** A mounted React menu joins the page-wide listeners; the return value takes it out (the effect's cleanup). */
+export function registerMenu(d: HTMLDetailsElement): () => void {
+  listenForMenus();
+  mounted.add(d);
+  return () => { mounted.delete(d); };
+}
+
+/** A keydown, native or React's. */
+export interface MenuKeyEvent {
+  key: string;
+  target: EventTarget | null;
+  defaultPrevented: boolean;
+  preventDefault(): void;
+  stopPropagation(): void;
+  isComposing?: boolean;
+  nativeEvent?: { isComposing?: boolean };
+}
+
+export interface MenuKeyOptions {
+  /** What a row is (default `.ui-menu__item`). Only a row's keys are the menu's. */
+  row?: string;
+  /** Where ↓ / ↑ on the trigger put focus (default: the first / the last row). LanguageSwitcher: the checked row. */
+  entry?: (d: HTMLDetailsElement, which: "first" | "last") => void;
+}
+
+/** The menu's keys, for a keydown inside `d` (its trigger or one of its rows). True when it took the key. */
+export function menuKeyDown(d: HTMLDetailsElement, e: MenuKeyEvent, o: MenuKeyOptions = {}): boolean {
+  if (e.defaultPrevented || e.isComposing || e.nativeEvent?.isComposing) return false;
+  const { button, list } = partsOf(d);
+  const t = e.target as HTMLElement | null;
+  // A key in a menu inside this one is that menu's.
+  if (!t || !button || !list || t.closest(MENU) !== d) return false;
+  const row = o.row ?? MENU_ROW;
+  const entry = o.entry ?? ((m, which) => focusRow(m, which, row));
+  if (t === button) {
+    // Tab from the button of an open menu: its rows are out of the Tab order, so focus would go on with the list still over
+    // the page. It closes, and focus goes on (not prevented), forward or back (review of #5179).
+    if (e.key === "Tab" && d.open) { closeMenu(d, false); return true; }
+    if (e.key !== "ArrowDown" && e.key !== "ArrowUp") return false;
+    e.preventDefault();
+    if (!d.open) openMenu(d);
+    entry(d, e.key === "ArrowUp" ? "last" : "first");
+    return true;
+  }
+  if (!d.open || !t.matches(row) || !list.contains(t)) return false;
+  if (e.key === "Escape") {
+    e.preventDefault();
+    e.stopPropagation();
+    closeMenu(d);
+    return true;
+  }
+  // Tab leaves: the menu closes and focus goes on from its button (not prevented), forward or back.
+  if (e.key === "Tab") { closeMenu(d); return true; }
+  const rows = menuRows(d, row);
+  const i = rows.indexOf(t);
+  if (e.key === " " && t.tagName === "A" && i > -1) { e.preventDefault(); t.click(); return true; }
+  const n = rows.length;
+  if (!n) return false;
+  const next = e.key === "ArrowDown" ? (i + 1) % n
+    : e.key === "ArrowUp" ? (i < 1 ? n - 1 : i - 1)
+      : e.key === "Home" ? 0 : e.key === "End" ? n - 1 : -1;
+  if (next < 0) return false;
+  e.preventDefault();
+  rows[next].focus();
+  return true;
+}
+
+/** A row was chosen (its click): focus goes back on the trigger BEFORE the row's own handler, so a popup it opens returns
+ *  focus there and not to a row about to be hidden; then the menu closes. Only when focus is in the menu: a row's handler
+ *  that moved focus on purpose keeps it. Returns the close to run after the handler. */
+export function chooseRow(row: Element): () => void {
+  const d = row.closest<HTMLDetailsElement>(MENU);
+  if (!d) return () => {};
+  const { button } = partsOf(d);
+  if (button && d.contains(document.activeElement)) button.focus();
+  return () => { d.open = false; };
+}

package/src/menu-layer.ts

@@ -24,7 +24,8 @@ export function canFloatMenus(): boolean {
   return typeof HTMLElement !== "undefined" && Object.prototype.hasOwnProperty.call(HTMLElement.prototype, "popover");
 }
 
-const partsOf = (d: HTMLDetailsElement) => ({
+/** A kit menu's two parts: its list and its button (the summary). menu-keys.ts reads them through this too. */
+export const partsOf = (d: HTMLDetailsElement) => ({
   list: d.querySelector<HTMLElement>(":scope > .ui-menu__list"),
   button: d.querySelector<HTMLElement>(":scope > summary"),
 });

package/src/menu-plain.js

@@ -0,0 +1 @@
+(function(m){"use strict";if(typeof document>"u")return;var l="details.ui-menu",d=".ui-menu__item",b=!1,a=null,s=function(e){return{list:e.querySelector(":scope > .ui-menu__list"),button:e.querySelector(":scope > summary")}},g=function(e){var t=m.gembossUI;t&&t.floatMenu&&t.floatMenu(e)},p=function(e,t){var n=e&&e.closest&&e.closest(t);return n&&n.closest(l)};function h(e){var t=s(e).list;return t?[].filter.call(t.querySelectorAll(d),function(n){return!n.matches(':disabled,[aria-disabled="true"]')}):[]}function c(e){var t=s(e),n=t.button,r=t.list,u=function(i,o,f){i&&f&&!i.hasAttribute(o)&&i.setAttribute(o,f)};u(n,"aria-haspopup","menu"),r&&(u(r,"role","menu"),r.hasAttribute("aria-labelledby")||u(r,"aria-label",n&&(n.getAttribute("aria-label")||n.textContent.trim())),r.querySelectorAll(d).forEach(function(i){u(i,"role","menuitem"),u(i,"tabindex","-1")}))}function y(e){document.querySelectorAll(l+"[open]").forEach(function(t){t!==e&&!t.contains(e)&&(t.open=!1)})}function A(e,t){var n=h(e);n.length&&n[t?n.length-1:0].focus()}function w(e){e.open=!1,s(e).button.focus()}var v=function(e){return e.matches(".gb-lang")};function E(){b||(b=!0,addEventListener("focusin",function(e){var t=p(e.target,l+" > summary");t&&c(t)},!0),addEventListener("click",function(e){var t=p(e.target,l+" > summary");t&&v(t)||(a=t&&!t.open?t:null,t&&c(t))},!0),addEventListener("click",function(e){a&&e.defaultPrevented&&!a.open&&(a=null)}),document.addEventListener("toggle",function(e){var t=e.target,n;if(!(!t.matches||!t.matches(l))){if(!t.open){a===t&&(a=null);return}y(t),!v(t)&&(c(t),n=s(t).list,a===t&&(a=null,g(t),n&&!n.contains(document.activeElement)&&A(t)))}},!0),document.addEventListener("keydown",function(e){var t=e.target,n=e.key,r=!e.defaultPrevented&&!e.isComposing&&p(t,l),u=r&&s(r);if(!(!u||!u.list||!u.button||v(r))){if(t===u.button){if(n==="Tab"&&r.open){r.open=!1;return}return n!=="ArrowDown"&&n!=="ArrowUp"?void 0:(e.preventDefault(),r.open||(y(r),r.open=!0,c(r),g(r)),A(r,n==="ArrowUp"))}if(!(!r.open||!t.matches(d)||!u.list.contains(t))){if(n==="Escape")return e.preventDefault(),e.stopPropagation(),w(r);if(n==="Tab")return w(r);var i=h(r),o=i.indexOf(t),f=i.length;if(n===" "&&t.tagName==="A"&&o>-1)return e.preventDefault(),t.click();o=n==="ArrowDown"?(o+1)%f:n==="ArrowUp"?(o<1?f:o)-1:n==="Home"?0:n==="End"?f-1:-1,!(o<0||!f)&&(e.preventDefault(),i[o].focus())}}}))}E(),m.gembossUI&&(m.gembossUI.initMenuKeys=E)})(globalThis);

package/src/menu.css

@@ -0,0 +1 @@
+.ui-btn--icon{flex:none;width:var(--ui-btn-h);padding:0}.ui-btn--icon svg{width:18px;height:18px}.ui-menu{position:relative;display:inline-block}.ui-menu>summary{list-style:none;cursor:pointer}.ui-menu>summary::-webkit-details-marker{display:none}.ui-menu__list{position:absolute;z-index:20;top:calc(100% + 4px);left:0;display:grid;min-width:220px;padding:6px;box-sizing:border-box}.ui-menu--end .ui-menu__list{left:auto;right:0}.ui-menu__list[popover]{position:fixed;inset:auto;margin:0;overflow:auto}.ui-menu__list[popover]:not(:popover-open){display:none}:where(.ui-menu__list[popover]){border:0;background:none;color:inherit}:root[data-gb-menus=float] .ui-menu[open]>.ui-menu__list:not([popover]){visibility:hidden}.ui-menu__item:is([disabled],[aria-disabled=true]){opacity:.5;cursor:not-allowed;pointer-events:none}.ui-menu__hint{margin-left:auto;padding-left:var(--ui-space-4);color:var(--ui-text-muted);font-size:var(--ui-fs-caption)}.ui-menu__sep{height:1px;margin:var(--ui-space-1) 0;border:0;background:var(--ui-border)}@media (pointer: coarse){.ui-btn--icon:not(.ui-btn--sm){min-width:44px}}@media (max-width: 47.9975em){.ui-btn--icon:not(.ui-btn--sm){min-width:44px;min-height:44px}}

package/src/menu.tsx

@@ -8,64 +8,96 @@
 // had no clean way to close it). The catalog renders its example from these components.
 // 0.18.0: the open list floats in the top layer (./menu-layer), so a table's scrolling frame no longer cuts it; it
 // closes when the page scrolls or the window resizes.
+// 23/10/2026: a menu's semantics and keys (./menu-keys, shared with LanguageSwitcher; menu-plain.js is the plain twin): the
+// list is `role="menu"` named by `label`, rows are `menuitem`s out of the Tab order, an opening puts focus on the first row
+// that can act, ↑ ↓ (wrapping, skipping disabled rows) Home End move, Escape closes with focus back on ⋯, Tab closes and
+// goes on; one menu open at a time. Its CSS is its own file (./menu.css), so a surface without the core (the admin) draws it.
+import "./menu.css";
+import "./menu-extras.css";
 import React, { useEffect, useRef } from "react";
 import { Icon } from "./icons";
 import { canFloatMenus, floatMenu, listenForDetachedMenus, sinkMenu } from "./menu-layer";
+import { chooseRow, closeMenu, focusRow, menuKeyDown, menuRows, openMenu, registerMenu } from "./menu-keys";
 
-/** The trigger is an icon button (`label` is its accessible name). `end` aligns the list to the right edge. */
-export function Menu({ label, icon, end, children, className }: {
+/** The trigger is an icon button (`label` is its accessible name, and the menu's). `end` aligns the list to the right edge.
+ *  `disabled`: the ⋯ takes no click and no key and leaves the Tab order (a row's work runs). `loading`: a ring in place of the
+ *  dots, `aria-busy`, and disabled the same way (what it started runs: a rename, a duplicate). */
+export function Menu({ label, icon, end, children, className, disabled, loading }: {
   label: string;
   icon?: React.ReactNode;
   end?: boolean;
   children?: React.ReactNode;
   className?: string;
+  disabled?: boolean;
+  loading?: boolean;
 }) {
   const ref = useRef<HTMLDetailsElement>(null);
+  const off = Boolean(disabled || loading);
+  // Turned off while open (its work started from a row): it closes, and focus that was in it goes back to ⋯, not to the page
+  // (review of the admin's step 2: on a row the close hid, the next Tab started from the top).
+  useEffect(() => {
+    const el = ref.current;
+    if (off && el?.open) { closeMenu(el, el.contains(document.activeElement)); sinkMenu(el); }
+  }, [off]);
   useEffect(() => {
     const el = ref.current;
     if (!el) return undefined;
-    const onDoc = (e: MouseEvent) => { if (el.open && !el.contains(e.target as Node)) el.open = false; };
-    const onKey = (e: KeyboardEvent) => { if (e.key === "Escape" && el.open) { el.open = false; el.querySelector("summary")?.focus(); } };
-    const float = canFloatMenus();
-    const onToggle = () => { if (el.open) floatMenu(el); else sinkMenu(el); };
-    document.addEventListener("click", onDoc);
-    document.addEventListener("keydown", onKey);
-    if (float) {
-      el.addEventListener("toggle", onToggle);
-      // One page-wide pair of listeners for all menus (a 100-row table has 100 Menus), not one per menu.
+    // The outside click, Escape (focus back on ⋯), the float on its toggle and one menu open at a time: one page-wide set
+    // of listeners for every Menu (./menu-keys registerMenu), not three per menu.
+    const off = registerMenu(el);
+    if (canFloatMenus()) {
       listenForDetachedMenus();
       // Opened before this effect ran (a click during hydration): float it now.
       if (el.open) floatMenu(el);
     }
-    return () => {
-      document.removeEventListener("click", onDoc);
-      document.removeEventListener("keydown", onKey);
-      el.removeEventListener("toggle", onToggle);
-    };
+    return off;
   }, []);
-  // The summary toggles the menu itself and floats it in the same task, so the list is never painted inside the frame
-  // first (the details' own `toggle` event comes a task later). Nothing page-wide: kit-plain.js's `data-gb-menus` rule
-  // would hide a hand-written `details.ui-menu` on a React page that nobody floats.
+  // The summary opens the menu itself, floats it in the same task (so the list is never painted inside the frame first:
+  // the details' own `toggle` event comes a task later) and puts focus on its first row, with or without the popover API.
+  // Nothing page-wide: kit-plain.js's `data-gb-menus` rule would hide a hand-written `details.ui-menu` on a React page that
+  // nobody floats.
   const onSummary = (e: React.MouseEvent<HTMLElement>) => {
     const el = ref.current;
-    if (!el || !canFloatMenus()) return;
+    if (!el) return;
     e.preventDefault();
-    el.open = !el.open;
-    if (el.open) floatMenu(el); else sinkMenu(el);
+    if (off) return;
+    if (el.open) { el.open = false; sinkMenu(el); return; }
+    openMenu(el);
+    enter(el, "first");
   };
   return (
-    <details ref={ref} className={["ui-menu", end ? "ui-menu--end" : "", className ?? ""].filter(Boolean).join(" ")}>
-      <summary className="ui-btn ui-btn--icon" aria-label={label} title={label} onClick={onSummary}>{icon ?? <Icon name="more" />}</summary>
-      <div className="ui-menu__list gemboss-popover-surface">{children}</div>
+    <details ref={ref} className={["ui-menu", end ? "ui-menu--end" : "", className ?? ""].filter(Boolean).join(" ")}
+      onKeyDown={(e) => { if (ref.current && !off) menuKeyDown(ref.current, e, { entry: enter }); }}
+      // Opened while off by anything but its button (find-in-page opens a closed details that holds a match, a script):
+      // closed again.
+      onToggle={(e) => { if (off && e.currentTarget.open) e.currentTarget.open = false; }}>
+      <summary className="ui-btn ui-btn--icon" aria-label={label} title={label} aria-haspopup="menu" onClick={onSummary}
+        aria-disabled={off || undefined} aria-busy={loading || undefined} tabIndex={off ? -1 : undefined}>
+        {loading ? <span className="ui-menu__busy" aria-hidden="true" /> : (icon ?? <Icon name="more" />)}
+      </summary>
+      <div className="ui-menu__list gemboss-popover-surface" role="menu" aria-label={label}>{children}</div>
     </details>
   );
 }
 
 /** One row: a link (`href`) or a button. `hint` is the quiet text on the right; `danger` for destructive rows.
  *  A disabled link is not a link: no href, aria-disabled, out of the tab order (an `<a disabled>` still follows
- *  on Enter). A caller's `className` is added to the row's class, not put in its place. */
-export function MenuItem({ href, danger, hint, children, className, disabled, onClick, ...rest }: {
+ *  on Enter). A caller's `className` is added to the row's class, not put in its place. `linkAs` draws a link row with
+ *  the app's link (Next's Link), so a row and a button with the same URL navigate the same way (ListPage). */
+/** Where an opening puts focus: a menu whose rows are all choices (MenuItem `checked`) opens on the one that is on, as
+ *  LanguageSwitcher does; any other menu on its first (or, from ↑, its last) row. */
+function enter(el: HTMLDetailsElement, which: "first" | "last"): void {
+  const rows = menuRows(el);
+  const on = rows.length > 0 && rows.every((r) => r.getAttribute("role") === "menuitemradio")
+    ? rows.find((r) => r.getAttribute("aria-checked") === "true") : undefined;
+  if (on) on.focus(); else focusRow(el, which);
+}
+
+export function MenuItem({ href, danger, hint, children, className, disabled, onClick, linkAs, checked, ...rest }: {
   href?: string;
+  /** A choice among others (in a MenuGroup): `menuitemradio`, a check before the one that is on. Left out: a plain row. */
+  checked?: boolean;
+  linkAs?: React.ElementType;
   danger?: boolean;
   hint?: React.ReactNode;
   children?: React.ReactNode;
@@ -73,16 +105,32 @@ export function MenuItem({ href, danger, hint, children, className, disabled, on
   onClick?: React.MouseEventHandler<HTMLElement>;
 } & Omit<React.HTMLAttributes<HTMLElement>, "onClick"> & Pick<React.AnchorHTMLAttributes<HTMLAnchorElement>, "target" | "rel">) {
   const cls = ["ui-menu__item", danger ? "ui-menu__item--danger" : "", className ?? ""].filter(Boolean).join(" ");
-  const body = <>{children}{hint ? <span className="ui-menu__hint">{hint}</span> : null}</>;
+  const choice = checked === undefined ? { role: "menuitem" } : { role: "menuitemradio", "aria-checked": checked };
+  const body = <>{checked === undefined ? null : <span className="ui-menu__check" aria-hidden="true"><Icon name="check" size={16} /></span>}
+    {children}{hint ? <span className="ui-menu__hint">{hint}</span> : null}</>;
+  // Every row closes its menu once chosen, a link too (a new tab, an anchor, a client router leave the page as it was).
+  // Focus is back on ⋯ before the row's handler runs (./menu-keys chooseRow).
+  const choose: React.MouseEventHandler<HTMLElement> = (e) => {
+    const close = chooseRow(e.currentTarget);
+    try { onClick?.(e); } finally { close(); }
+  };
   if (href) {
-    if (disabled) return <a className={cls} aria-disabled="true" tabIndex={-1} {...rest}>{body}</a>;
-    return <a className={cls} href={href} onClick={onClick} {...rest}>{body}</a>;
+    if (disabled) return <a className={cls} {...choice} aria-disabled="true" tabIndex={-1} {...rest}>{body}</a>;
+    const A = linkAs ?? "a";
+    return <A className={cls} href={href} {...choice} tabIndex={-1} onClick={choose} {...rest}>{body}</A>;
   }
-  const close: React.MouseEventHandler<HTMLButtonElement> = (e) => {
-    onClick?.(e);
-    e.currentTarget.closest("details")?.removeAttribute("open");
-  };
-  return <button type="button" className={cls} disabled={disabled} onClick={close} {...rest}>{body}</button>;
+  return <button type="button" className={cls} {...choice} tabIndex={-1} disabled={disabled} onClick={choose} {...rest}>{body}</button>;
+}
+
+/** Rows that are choices of one kind (Products' Auto-refresh: Daily, Off), named: `role="group"` with the title as its name,
+ *  and the title shown above them. Its rows are MenuItems with `checked`. */
+export function MenuGroup({ title, children }: { title: string; children?: React.ReactNode }) {
+  return (
+    <div className="ui-menu__group" role="group" aria-label={title}>
+      <div className="ui-menu__group-title" aria-hidden="true">{title}</div>
+      {children}
+    </div>
+  );
 }
 
 export function MenuSeparator() {

package/src/pager-extras.css

@@ -0,0 +1 @@
+.ui-pager>button{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;gap:4px;min-width:32px;min-height:32px;padding:0 12px;border:1px solid var(--ui-border);border-radius:var(--ui-radius-md);background:none;color:var(--ui-text);font:inherit;font-size:var(--ui-fs-body);cursor:pointer}.ui-pager>button:hover{background:var(--ui-surface-2)}.ui-pager>button:focus-visible{outline:2px solid var(--p-color-border-focus, var(--ui-focus));outline-offset:1px}.ui-pager>button[aria-current=page]{background:var(--ui-text);border-color:var(--ui-text);color:var(--ui-surface);font-size:var(--ui-fs-body);font-weight:600;cursor:default}.ui-pager>button[aria-disabled=true]{cursor:default}@media (pointer: coarse),(max-width: 47.9975em){.ui-pager>button{min-width:44px;min-height:44px}}@media (max-width: 35.9975em){.ui-pager>button:not([data-rel]):not([aria-current]){display:none}}@media (max-width: 35.9975em){.ui-pager>a[aria-disabled=true]:not([data-rel]):not([aria-current]){display:none}}.ui-pager.ui-pager--flush{margin-block:0}

package/src/pager.css

@@ -0,0 +1 @@
+.ui-pager>a,.ui-pager>[aria-disabled=true]{min-width:32px;justify-content:center;box-sizing:border-box;gap:4px}.ui-pager>a[aria-current=page]{background:var(--ui-text);border-color:var(--ui-text);color:var(--ui-surface);font-size:var(--ui-fs-body);font-weight:600}.ui-pager>a[aria-current=page]:hover{background:var(--ui-text)}.ui-pager>[aria-disabled=true]{display:inline-flex;align-items:center;min-height:32px;padding:0 12px;border:1px solid var(--ui-border);border-radius:var(--ui-radius-md);color:var(--ui-text-muted);font-size:var(--ui-fs-body);opacity:.55;cursor:default}.ui-pager>[aria-disabled=true]:hover{background:none}.ui-pager__gap{min-width:16px;text-align:center;color:var(--ui-text-muted)}.ui-pager__range{margin-left:auto;color:var(--ui-text-muted);font-size:var(--ui-fs-body);font-variant-numeric:tabular-nums}@media (pointer: coarse),(max-width: 47.9975em){.ui-pager>a,.ui-pager>[aria-disabled=true]{min-width:44px;min-height:44px}}@media (max-width: 35.9975em){.ui-pager>a:not([rel]):not([aria-current]):not([aria-disabled]),.ui-pager__gap{display:none}}

package/src/pager.tsx

@@ -0,0 +1,88 @@
+import "./pager.css";
+import "./pager-extras.css";
+import React from "react";
+
+// The numbered pager (README "Long lists", 24/10/2026): Previous · the pages around the current one · Next, and the range
+// ("25–48 of 655") pushed right. Two ways to page:
+//   - `href(n)`: the position is in the URL (a work list people send each other). Links, drawn through `linkAs` (Next's Link);
+//     an edge that cannot move is a link with no href and aria-disabled, read as an unavailable link.
+//   - `onPage(n)`: the list pages in state (the admin's Products, whose search and filters are not in the URL either, so a
+//     page link would open page 3 of a different list). Buttons, the same look (pager-extras.css).
+// Under 576px only Previous · the current page · Next stay and the range wraps under them.
+
+/** The page numbers to show: the first, the last, the current one ± 1, and a gap only where it hides two pages or more (a gap
+ *  hiding one page shows that page instead). */
+export function pageWindow(page: number, count: number): (number | "gap")[] {
+  if (count < 1) return [];
+  const nums = [...new Set([1, count, page - 1, page, page + 1])].filter((n) => n >= 1 && n <= count).sort((a, b) => a - b);
+  const out: (number | "gap")[] = [];
+  nums.forEach((n, i) => {
+    const before = nums[i - 1];
+    if (before !== undefined && n - before === 2) out.push(before + 1);
+    else if (before !== undefined && n - before > 2) out.push("gap");
+    out.push(n);
+  });
+  return out;
+}
+
+interface PagerCommon {
+  /** The current page, from 1. */
+  page: number;
+  pageCount: number;
+  /** "25–48 of 655": what is on screen, out of how many. */
+  range?: React.ReactNode;
+  /** The nav's name for a screen reader. */
+  label?: string;
+  /** A page is on its way: nothing moves until it lands (every page is unavailable, the current one stays marked). */
+  busy?: boolean;
+  previousLabel?: string;
+  nextLabel?: string;
+  /** In a stack that already spaces its children (a card's): no margin of its own. */
+  flush?: boolean;
+}
+/** One way to page, never none (a pager with neither drew controls that did nothing; review of the Pager). */
+export type PagerProps = PagerCommon & (
+  /** The position is in the URL: links, through the app's link. */
+  | { href: (page: number) => string; linkAs?: React.ElementType; onPage?: never }
+  /** The list pages in state: buttons. */
+  | { onPage: (page: number) => void; href?: never; linkAs?: never }
+);
+
+export function Pager({ page, pageCount, range, href, onPage, linkAs, label = "Pages", busy = false, previousLabel = "Previous", nextLabel = "Next", flush = false }: PagerProps) {
+  const count = Math.max(1, pageCount);
+  const current = Math.min(Math.max(1, page), count);
+  const Link: React.ElementType = linkAs ?? "a";
+  const asLinks = Boolean(href);
+  const prev = <><span aria-hidden="true">‹</span> {previousLabel}</>;
+  const next = <>{nextLabel} <span aria-hidden="true">›</span></>;
+
+  // Previous / Next: an edge that cannot move (or a page on its way) says so, and does nothing.
+  const edge = (to: number, rel: "prev" | "next", body: React.ReactNode) => {
+    const off = busy || to < 1 || to > count;
+    // A closed edge keeps `data-rel` (a link with no href has no `rel`), so the phone rule keeps it beside the current page.
+    if (asLinks) return off
+      ? <a key={rel} role="link" aria-disabled="true" data-rel={rel}>{body}</a>
+      : <Link key={rel} href={href!(to)} rel={rel}>{body}</Link>;
+    return <button key={rel} type="button" data-rel={rel} aria-disabled={off || undefined} onClick={off ? undefined : () => onPage?.(to)}>{body}</button>;
+  };
+  // A page number: the current one is marked and goes nowhere; while a page is on its way the others are unavailable (a link
+  // with no href, a button that says so), not live controls that do nothing.
+  const num = (n: number) => {
+    const here = n === current;
+    const off = busy && !here;
+    if (asLinks) return off
+      ? <a key={n} role="link" aria-disabled="true" aria-label={`Page ${n}`}>{n}</a>
+      : <Link key={n} href={href!(n)} aria-label={`Page ${n}`} aria-current={here ? "page" : undefined}>{n}</Link>;
+    return <button key={n} type="button" aria-label={`Page ${n}`} aria-current={here ? "page" : undefined} aria-disabled={off || undefined}
+      onClick={here || off ? undefined : () => onPage?.(n)}>{n}</button>;
+  };
+
+  return (
+    <nav className={flush ? "ui-pager ui-pager--flush" : "ui-pager"} aria-label={label} aria-busy={busy || undefined}>
+      {edge(current - 1, "prev", prev)}
+      {pageWindow(current, count).map((n, i) => (n === "gap" ? <span key={`gap-${i}`} className="ui-pager__gap" aria-hidden="true">…</span> : num(n)))}
+      {edge(current + 1, "next", next)}
+      {range ? <span className="ui-pager__range">{range}</span> : null}
+    </nav>
+  );
+}

package/src/portal.css

@@ -1 +1 @@
-.gb-topnav{display:flex;align-items:stretch;gap:4px;min-width:0;height:100%;margin-left:12px;padding-left:12px;border-left:1px solid var(--gemboss-divider);overflow-x:auto;scrollbar-width:none}.gb-topnav::-webkit-scrollbar{display:none}.gb-topnav-link{position:relative;display:inline-flex;align-items:center;align-self:stretch;flex:0 0 auto;min-height:36px;padding:0 10px;border-radius:8px;color:var(--gemboss-text-muted);font-size:14px;font-weight:520;text-decoration:none;white-space:nowrap}.gb-topnav-link:hover{color:var(--gemboss-text-strong);background:var(--gemboss-hover)}.gb-topnav-link:focus-visible{outline:2px solid var(--gemboss-accent);outline-offset:-2px}.gb-topnav-link[aria-current=page]{color:var(--gemboss-text-strong);font-weight:640}.gb-topnav-link[aria-current=page]:after{content:"";position:absolute;left:10px;right:10px;bottom:-1px;height:2px;border-radius:2px;background:var(--gemboss-text-strong)}@media (pointer: coarse){.gb-topnav-link{min-height:44px}}.gemboss-platform-topbar:has(.gb-topnav):has(>.gemboss-topbar-center:empty){grid-template-columns:minmax(0,1fr) auto}.gemboss-platform-topbar:has(.gb-topnav)>.gemboss-topbar-center:empty{display:none}.gemboss-topbar-start:has(.gb-topnav){min-width:0;height:100%}.gemboss-topbar-start:has(.gb-topnav)>.gb-brand{flex:0 0 auto}@media (max-width: 760px){.gb-topnav{margin-left:8px;padding-left:8px}.gb-topnav-link{min-height:44px;padding:0 8px}}.gb-topnav-row{display:flex;align-items:stretch;gap:4px;min-width:0;height:100%}.gb-topnav-fold{display:none;position:relative;align-self:stretch}.gb-topnav-fold>summary{list-style:none;cursor:pointer;gap:4px;height:100%}.gb-topnav-fold>summary::-webkit-details-marker{display:none}.gb-topnav-fold-btn[aria-current=page]:after{display:none}.gb-topnav-chevron{flex:0 0 auto;transition:transform .15s ease}.gb-topnav-fold[open] .gb-topnav-chevron{transform:rotate(180deg)}.gb-topnav-pop{position:fixed;top:56px;left:8px;min-width:200px;padding:6px;display:grid;gap:2px;z-index:60}.gb-topnav-item{display:flex;align-items:center;min-height:44px;padding:0 12px;border-radius:8px;color:var(--gemboss-text);font-size:14px;font-weight:520;text-decoration:none}.gb-topnav-item:hover{background:var(--gemboss-hover)}.gb-topnav-item:focus-visible{outline:2px solid var(--gemboss-accent);outline-offset:-2px}.gb-topnav-item[aria-current=page]{color:var(--gemboss-active-fg);background:var(--gemboss-active-bg);font-weight:640}@media (max-width: 600px){.gb-topnav{overflow:visible}.gb-topnav-row{display:none}.gb-topnav-fold{display:flex}}@media (prefers-reduced-motion: reduce){.gb-topnav-chevron{transition:none}}.gb-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}.gb-avatar{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;border-radius:50%;overflow:hidden;font-weight:700;line-height:1;letter-spacing:.01em;user-select:none}.gb-avatar--24{width:24px;height:24px;font-size:9.5px}.gb-avatar--32{width:32px;height:32px;font-size:11px}.gb-avatar--40{width:40px;height:40px;font-size:13px}.gb-avatar--56{width:56px;height:56px;font-size:18px}.gb-avatar-img{width:100%;height:100%;object-fit:cover;display:block}.gb-avatar[data-tone]{background:color-mix(in srgb,var(--gb-tone) 16%,#ffffff);color:color-mix(in srgb,var(--gb-tone) 70%,#000000)}.gb-avatar[data-tone="0"]{--gb-tone: #5661f5}.gb-avatar[data-tone="1"]{--gb-tone: #0a8f6a}.gb-avatar[data-tone="2"]{--gb-tone: #c26a04}.gb-avatar[data-tone="3"]{--gb-tone: #db2777}.gb-avatar[data-tone="4"]{--gb-tone: #0891b2}.gb-avatar[data-tone="5"]{--gb-tone: #7c3aed}.gb-avatar[data-tone="6"]{--gb-tone: #dc2626}.gb-avatar[data-tone="7"]{--gb-tone: #6b7280}.gb-leaderboard{display:grid;gap:6px;min-width:0}.gb-leaderboard-title{margin:0;display:flex;align-items:center;gap:6px;font-size:12px;font-weight:650;letter-spacing:.04em;text-transform:uppercase;color:var(--gemboss-text-muted)}.gb-leaderboard-caption{margin:-2px 0 2px;font-size:12px;color:var(--gemboss-text-muted)}.gb-leaderboard-list{list-style:none;margin:0;padding:0;display:grid;gap:0}.gb-leaderboard-link{display:flex;align-items:center;gap:10px;min-height:44px;padding:0 6px;border-radius:8px;color:var(--gemboss-text);text-decoration:none}a.gb-leaderboard-link:hover{background:var(--gemboss-hover)}a.gb-leaderboard-link:focus-visible{outline:2px solid var(--gemboss-accent);outline-offset:-2px}.gb-leaderboard-rank{width:20px;flex:0 0 auto;text-align:center;font-size:15px;line-height:1}.gb-leaderboard-rank.is-number{font-size:12px;font-weight:700;color:var(--gemboss-text-muted);font-variant-numeric:tabular-nums}.gb-leaderboard-name{flex:1 1 auto;min-width:0;font-size:13px;font-weight:560;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.gb-leaderboard-value{flex:0 0 auto;font-size:13px;font-weight:650;color:var(--gemboss-text-muted);font-variant-numeric:tabular-nums}.gb-leaderboard-row.is-first .gb-leaderboard-value{color:#8a5a00;font-weight:750}.gb-leaderboard-row.is-current>.gb-leaderboard-link{background:var(--gemboss-active-bg)}.gb-leaderboard-badge{flex:0 1 auto;min-width:0;overflow:hidden}.gb-leaderboard-all{justify-self:center;display:inline-flex;align-items:center;min-height:24px;font-size:12px;font-weight:600;color:var(--gemboss-text-muted);text-decoration:none}.gb-leaderboard-all:hover{color:var(--gemboss-text-strong);text-decoration:underline}.gb-podium{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;align-items:end}.gb-podium-link{display:grid;justify-items:center;gap:6px;padding:14px 8px;border:1px solid var(--gemboss-divider);border-radius:12px;background:var(--gemboss-surface);color:var(--gemboss-text);text-decoration:none;text-align:center}a.gb-podium-link:hover{background:var(--gemboss-hover)}.gb-podium-slot{min-width:0}.gb-podium-slot.is-empty{visibility:hidden}.gb-podium-slot--1 .gb-podium-link{padding-top:22px;padding-bottom:20px;border-color:color-mix(in srgb,#d4a017 45%,var(--gemboss-divider))}.gb-podium-slot--2 .gb-podium-link{padding-bottom:12px}.gb-podium-slot--3 .gb-podium-link{padding-bottom:8px}.gb-podium-medal{font-size:22px;line-height:1}.gb-podium-name{max-width:100%;font-size:13px;font-weight:620;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.gb-podium-value{font-size:15px;font-weight:750;font-variant-numeric:tabular-nums}.gb-podium-slot--1 .gb-podium-value{color:#8a5a00}.gb-podium-unit{font-size:11px;font-weight:500;color:var(--gemboss-text-muted)}.gb-podium-slot.is-current .gb-podium-link{border-color:var(--gemboss-text-strong);background:var(--gemboss-active-bg)}.gb-search-trigger,.gb-theme-toggle{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;flex:0 0 auto;border:0;border-radius:8px;background:transparent;color:var(--gemboss-text-muted);cursor:pointer}.gb-search-trigger:hover,.gb-theme-toggle:hover{background:var(--gemboss-hover);color:var(--gemboss-text-strong)}.gb-search-trigger:focus-visible,.gb-theme-toggle:focus-visible{outline:2px solid var(--gemboss-accent);outline-offset:-2px}@media (pointer: coarse),(max-width: 760px){.gb-search-trigger,.gb-theme-toggle{width:44px;height:44px}}.gb-search-field{text-decoration:none;cursor:text}.gb-search-field:focus-visible{outline:2px solid var(--gemboss-accent);outline-offset:1px}.gb-search-field-text{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--gemboss-fs-body);color:var(--gemboss-field-placeholder)}dialog.ui-modal.gb-search{width:min(640px,100%);margin-top:8vh;max-height:min(560px,calc(100dvh - 16vh))}.gb-search-box{position:relative;display:flex;align-items:center;border-bottom:1px solid var(--ui-border)}.gb-search-icon{position:absolute;left:18px;color:var(--ui-text-muted);pointer-events:none}.gb-search-input{flex:1 1 auto;min-width:0;height:52px;padding:0 18px 0 46px;border:0;background:transparent;color:var(--ui-text);font:inherit;font-size:15px;outline:none}.gb-search-input::-webkit-search-cancel-button{display:none}.gb-search-results{flex:1 1 auto;min-height:0;overflow:auto;padding:8px}.gb-search-section+.gb-search-section{margin-top:8px}.gb-search-section-title{padding:6px 10px;font-size:12px;font-weight:600;color:var(--ui-text-muted)}.gb-search-item{display:grid;gap:2px;min-height:44px;align-content:center;padding:6px 10px;border-radius:8px;color:var(--ui-text);text-decoration:none}.gb-search-item.is-active{background:var(--ui-surface-2)}.gb-search-item-title{font-size:14px;font-weight:520;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.gb-search-item-meta{display:flex;gap:8px;align-items:center;font-size:12px;color:var(--ui-text-muted)}.gb-search-empty{margin:0;padding:18px 18px 0;font-size:13px;color:var(--ui-text-muted)}.gb-search-empty:empty{padding:0}.gb-search-foot{display:flex;gap:16px;justify-content:flex-end;padding:8px 14px;border-top:1px solid var(--ui-border);font-size:12px;color:var(--ui-text-muted)}@media (max-width: 760px){dialog.ui-modal.gb-search{margin-top:12px}.gb-search-foot{display:none}}
+.gb-topnav{display:flex;align-items:stretch;gap:4px;min-width:0;height:100%;margin-left:12px;padding-left:12px;border-left:1px solid var(--gemboss-divider);overflow-x:auto;scrollbar-width:none}.gb-topnav::-webkit-scrollbar{display:none}.gb-topnav-link{position:relative;display:inline-flex;align-items:center;align-self:stretch;flex:0 0 auto;min-height:36px;padding:0 10px;border-radius:8px;color:var(--gemboss-text-muted);font-size:14px;font-weight:520;text-decoration:none;white-space:nowrap}.gb-topnav-link:hover{color:var(--gemboss-text-strong);background:var(--gemboss-hover)}.gb-topnav-link:focus-visible{outline:2px solid var(--gemboss-accent);outline-offset:-2px}.gb-topnav-link[aria-current=page]{color:var(--gemboss-text-strong);font-weight:640}.gb-topnav-link[aria-current=page]:after{content:"";position:absolute;left:10px;right:10px;bottom:-1px;height:2px;border-radius:2px;background:var(--gemboss-text-strong)}@media (pointer: coarse){.gb-topnav-link{min-height:44px}}.gemboss-platform-topbar:has(.gb-topnav):has(>.gemboss-topbar-center:empty){grid-template-columns:minmax(0,1fr) auto}.gemboss-platform-topbar:has(.gb-topnav)>.gemboss-topbar-center:empty{display:none}.gemboss-topbar-start:has(.gb-topnav){min-width:0;height:100%}.gemboss-topbar-start:has(.gb-topnav)>.gb-brand{flex:0 0 auto}@media (max-width: 760px){.gb-topnav{margin-left:8px;padding-left:8px}.gb-topnav-link{min-height:44px;padding:0 8px}}.gb-topnav-row{display:flex;align-items:stretch;gap:4px;min-width:0;height:100%}.gb-topnav-fold{display:none;position:relative;align-self:stretch}.gb-topnav-fold>summary{list-style:none;cursor:pointer;gap:4px;height:100%}.gb-topnav-fold>summary::-webkit-details-marker{display:none}.gb-topnav-fold-btn[aria-current=page]:after{display:none}.gb-topnav-chevron{flex:0 0 auto;transition:transform .15s ease}.gb-topnav-fold[open] .gb-topnav-chevron{transform:rotate(180deg)}.gb-topnav-pop{position:fixed;top:56px;left:8px;min-width:200px;padding:6px;display:grid;gap:2px;z-index:60}.gb-topnav-item{display:flex;align-items:center;min-height:44px;padding:0 12px;border-radius:8px;color:var(--gemboss-text);font-size:14px;font-weight:520;text-decoration:none}.gb-topnav-item:hover{background:var(--gemboss-hover)}.gb-topnav-item:focus-visible{outline:2px solid var(--gemboss-accent);outline-offset:-2px}.gb-topnav-item[aria-current=page]{color:var(--gemboss-active-fg);background:var(--gemboss-active-bg);font-weight:640}@media (max-width: 600px){.gb-topnav{overflow:visible}.gb-topnav-row{display:none}.gb-topnav-fold{display:flex}}@media (prefers-reduced-motion: reduce){.gb-topnav-chevron{transition:none}}.gb-sr-only{position:absolute;left:0;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}.gb-avatar{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;border-radius:50%;overflow:hidden;font-weight:700;line-height:1;letter-spacing:.01em;user-select:none}.gb-avatar--24{width:24px;height:24px;font-size:9.5px}.gb-avatar--32{width:32px;height:32px;font-size:11px}.gb-avatar--40{width:40px;height:40px;font-size:13px}.gb-avatar--56{width:56px;height:56px;font-size:18px}.gb-avatar-img{width:100%;height:100%;object-fit:cover;display:block}.gb-avatar[data-tone]{background:color-mix(in srgb,var(--gb-tone) 16%,#ffffff);color:color-mix(in srgb,var(--gb-tone) 70%,#000000)}.gb-avatar[data-tone="0"]{--gb-tone: #5661f5}.gb-avatar[data-tone="1"]{--gb-tone: #0a8f6a}.gb-avatar[data-tone="2"]{--gb-tone: #c26a04}.gb-avatar[data-tone="3"]{--gb-tone: #db2777}.gb-avatar[data-tone="4"]{--gb-tone: #0891b2}.gb-avatar[data-tone="5"]{--gb-tone: #7c3aed}.gb-avatar[data-tone="6"]{--gb-tone: #dc2626}.gb-avatar[data-tone="7"]{--gb-tone: #6b7280}.gb-leaderboard{display:grid;gap:6px;min-width:0}.gb-leaderboard-title{margin:0;display:flex;align-items:center;gap:6px;font-size:12px;font-weight:650;letter-spacing:.04em;text-transform:uppercase;color:var(--gemboss-text-muted)}.gb-leaderboard-caption{margin:-2px 0 2px;font-size:12px;color:var(--gemboss-text-muted)}.gb-leaderboard-list{list-style:none;margin:0;padding:0;display:grid;gap:0}.gb-leaderboard-link{display:flex;align-items:center;gap:10px;min-height:44px;padding:0 6px;border-radius:8px;color:var(--gemboss-text);text-decoration:none}a.gb-leaderboard-link:hover{background:var(--gemboss-hover)}a.gb-leaderboard-link:focus-visible{outline:2px solid var(--gemboss-accent);outline-offset:-2px}.gb-leaderboard-rank{width:20px;flex:0 0 auto;text-align:center;font-size:15px;line-height:1}.gb-leaderboard-rank.is-number{font-size:12px;font-weight:700;color:var(--gemboss-text-muted);font-variant-numeric:tabular-nums}.gb-leaderboard-name{flex:1 1 auto;min-width:0;font-size:13px;font-weight:560;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.gb-leaderboard-value{flex:0 0 auto;font-size:13px;font-weight:650;color:var(--gemboss-text-muted);font-variant-numeric:tabular-nums}.gb-leaderboard-row.is-first .gb-leaderboard-value{color:#8a5a00;font-weight:750}.gb-leaderboard-row.is-current>.gb-leaderboard-link{background:var(--gemboss-active-bg)}.gb-leaderboard-badge{flex:0 1 auto;min-width:0;overflow:hidden}.gb-leaderboard-all{justify-self:center;display:inline-flex;align-items:center;min-height:24px;font-size:12px;font-weight:600;color:var(--gemboss-text-muted);text-decoration:none}.gb-leaderboard-all:hover{color:var(--gemboss-text-strong);text-decoration:underline}.gb-podium{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;align-items:end}.gb-podium-link{display:grid;justify-items:center;gap:6px;padding:14px 8px;border:1px solid var(--gemboss-divider);border-radius:12px;background:var(--gemboss-surface);color:var(--gemboss-text);text-decoration:none;text-align:center}a.gb-podium-link:hover{background:var(--gemboss-hover)}.gb-podium-slot{min-width:0}.gb-podium-slot.is-empty{visibility:hidden}.gb-podium-slot--1 .gb-podium-link{padding-top:22px;padding-bottom:20px;border-color:color-mix(in srgb,#d4a017 45%,var(--gemboss-divider))}.gb-podium-slot--2 .gb-podium-link{padding-bottom:12px}.gb-podium-slot--3 .gb-podium-link{padding-bottom:8px}.gb-podium-medal{font-size:22px;line-height:1}.gb-podium-name{max-width:100%;font-size:13px;font-weight:620;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.gb-podium-value{font-size:15px;font-weight:750;font-variant-numeric:tabular-nums}.gb-podium-slot--1 .gb-podium-value{color:#8a5a00}.gb-podium-unit{font-size:11px;font-weight:500;color:var(--gemboss-text-muted)}.gb-podium-slot.is-current .gb-podium-link{border-color:var(--gemboss-text-strong);background:var(--gemboss-active-bg)}.gb-search-trigger,.gb-theme-toggle{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;flex:0 0 auto;border:0;border-radius:8px;background:transparent;color:var(--gemboss-text-muted);cursor:pointer}.gb-search-trigger:hover,.gb-theme-toggle:hover{background:var(--gemboss-hover);color:var(--gemboss-text-strong)}.gb-search-trigger:focus-visible,.gb-theme-toggle:focus-visible{outline:2px solid var(--gemboss-accent);outline-offset:-2px}@media (pointer: coarse),(max-width: 760px){.gb-search-trigger,.gb-theme-toggle{width:44px;height:44px}}.gb-search-field{text-decoration:none;cursor:text}.gb-search-field:focus-visible{outline:2px solid var(--gemboss-accent);outline-offset:1px}.gb-search-field-text{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--gemboss-fs-body);color:var(--gemboss-field-placeholder)}dialog.ui-modal.gb-search{width:min(640px,100%);margin-top:8vh;max-height:min(560px,calc(100dvh - 16vh))}.gb-search-box{position:relative;display:flex;align-items:center;border-bottom:1px solid var(--ui-border)}.gb-search-icon{position:absolute;left:18px;color:var(--ui-text-muted);pointer-events:none}.gb-search-input{flex:1 1 auto;min-width:0;height:52px;padding:0 18px 0 46px;border:0;background:transparent;color:var(--ui-text);font:inherit;font-size:15px;outline:none}.gb-search-input::-webkit-search-cancel-button{display:none}.gb-search-results{flex:1 1 auto;min-height:0;overflow:auto;padding:8px}.gb-search-section+.gb-search-section{margin-top:8px}.gb-search-section-title{padding:6px 10px;font-size:12px;font-weight:600;color:var(--ui-text-muted)}.gb-search-item{display:grid;gap:2px;min-height:44px;align-content:center;padding:6px 10px;border-radius:8px;color:var(--ui-text);text-decoration:none}.gb-search-item.is-active{background:var(--ui-surface-2)}.gb-search-item-title{font-size:14px;font-weight:520;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.gb-search-item-meta{display:flex;gap:8px;align-items:center;font-size:12px;color:var(--ui-text-muted)}.gb-search-empty{margin:0;padding:18px 18px 0;font-size:13px;color:var(--ui-text-muted)}.gb-search-empty:empty{padding:0}.gb-search-foot{display:flex;gap:16px;justify-content:flex-end;padding:8px 14px;border-top:1px solid var(--ui-border);font-size:12px;color:var(--ui-text-muted)}@media (max-width: 760px){dialog.ui-modal.gb-search{margin-top:12px}.gb-search-foot{display:none}}

package/src/segmented.tsx

@@ -27,8 +27,12 @@ export type SegmentedOption<T extends string> = {
   disabled?: boolean;
 };
 
+/** `scroll`'s layout: the group scrolls inside itself, each tab keeps its words on one line (kit-plain.css's rule, as styles). */
+const SCROLL_GROUP: CSSProperties = { maxWidth: "100%", overflowX: "auto" };
+const SCROLL_TAB: CSSProperties = { flex: "none", whiteSpace: "nowrap" };
+
 export function Segmented<T extends string>({
-  options, value, onChange, ariaLabel, disabled, onClear, fill = false, className, style,
+  options, value, onChange, ariaLabel, disabled, onClear, fill = false, scroll = false, className, style,
 }: {
   options: SegmentedOption<T>[];
   value: T | "";
@@ -47,13 +51,18 @@ export function Segmented<T extends string>({
   onClear?: () => void;
   /** Stretch to the row and share it equally: a field switch in the inspector's narrow column. */
   fill?: boolean;
+  /** Keep each label on one line and scroll sideways inside the group when it is wider than its room, for a filter of many
+   *  options on a phone: what kit-plain.css does for every plain surface. Set as layout styles here, not as a rule in ui.css:
+   *  gemboss-ui.css had 0 bytes of room (weight gate, 22/10/2026). Not in a short flex column: a scroll container there loses
+   *  its height. */
+  scroll?: boolean;
   /** A hook class beside `ui-seg` (the editor kit's `gemboss-ei-seg`, which editor-plain.js finds). Never a look. */
   className?: string;
   /** On the group: the inspector narrows a two-option row with a max-width. */
   style?: CSSProperties;
 }) {
   return (
-    <div className={`ui-seg${fill ? " ui-seg--fill" : ""}${className ? ` ${className}` : ""}`} style={style} role="group" aria-label={ariaLabel || undefined}>
+    <div className={`ui-seg${fill ? " ui-seg--fill" : ""}${className ? ` ${className}` : ""}`} style={scroll ? { ...SCROLL_GROUP, ...style } : style} role="group" aria-label={ariaLabel || undefined}>
       {options.map((o) => {
         const active = value === o.value;
         return (
@@ -67,6 +76,7 @@ export function Segmented<T extends string>({
             aria-label={o.ariaLabel}
             aria-pressed={active}
             className={`is-text${active ? " active" : ""}`}
+            style={scroll ? SCROLL_TAB : undefined}
             onClick={() => segmentedClick(active, o.value, onChange, onClear)}
           >
             {o.label}

package/src/selection.tsx

@@ -23,7 +23,9 @@ export const ESCAPE_OWNERS = 'details[open], dialog[open], [role="dialog"], [rol
 export function escapeTaken(root: Element, target: EventTarget | null): boolean {
   const t = target as Element | null;
   if (t && typeof t.closest === "function" && t.closest(ESCAPE_OWNERS)) return true;
-  return Array.from(root.querySelectorAll(ESCAPE_OWNERS)).some((e) => e.getClientRects().length > 0);
+  // Shown, not merely boxed: a closed <details>' content still has boxes (content-visibility: hidden), and every ⋯ menu's
+  // list is role="menu" (23/10/2026), so a box test would hand every Escape in a table to its closed menus.
+  return Array.from(root.querySelectorAll(ESCAPE_OWNERS)).some((e) => (typeof e.checkVisibility === "function" ? e.checkVisibility() : e.getClientRects().length > 0));
 }
 
 export function useSelection<R extends HTMLElement>(ids: string[], selectedProp: string[] | undefined, onSelectionChange: ((ids: string[]) => void) | undefined, enabled: boolean) {