@lumiose/ui 0.0.0-stage → 0.1.1

package/dist/context-menu/context-menu.script.ts

@@ -0,0 +1,172 @@
+// Context Menu's client script (decision-62, decision-63): defines `<lu-context-menu>`, the
+// light-DOM element that ContextMenu.Root renders around its trigger area and its menu. The menu
+// is Menu's own `<lu-menu>` (../menu/menu.script.ts, which this module loads): its keys, items,
+// typeahead, submenus and dismissal (../layer/layer.ts). This element only opens it, where Base UI
+// and Zag open a context menu (doc-9 §5):
+//
+// - A right-click (`contextmenu`) in the trigger area opens the menu at the pointer, instead of
+//   the browser's menu; another one moves it there. The popup is anchored to a fixed, zero-size
+//   element that the element puts at the pointer (`--lu-context-x`, `--lu-context-y`), so CSS
+//   anchor positioning places it with Menu's flips; elsewhere ../placement/place.ts does.
+// - A long press on a touch screen (500ms without moving 10px, one finger) opens it at the
+//   finger: iOS fires no `contextmenu`, and the `contextmenu` Android fires after it is ignored.
+// - The keyboard (WCAG 2.5.1): Shift+F10 or the ContextMenu key, with focus in the trigger area,
+//   opens it at the focused element and focuses its first item.
+// - Focus: a keyboard opening focuses the first item, a pointer one the popup (Menu's rules). With
+//   no trigger to return to, closing returns focus to where it was before the menu opened, unless
+//   it already moved elsewhere (an outside press on a control).
+// - A right-click inside the open menu shows neither menu.
+// - `data-disabled` on the element leaves the browser's menu alone.
+// - Nested: in the area of a context menu inside another's, the inner one opens (unless it is
+//   disabled, where the outer one does).
+//
+// It must not import `lumiose`: server-rendered pages load it without the runtime.
+import "../menu/menu.script.ts";
+import type { MenuElement } from "../menu/menu.script.ts";
+import { anchoring, place } from "../placement/place.ts";
+
+/** How long (ms) a touch rests before it opens the menu, and how far (px) it may move. */
+const LONG_PRESS = 500;
+const SLOP = 10;
+
+interface Press {
+  pointer: number;
+  x: number;
+  y: number;
+  timer: ReturnType<typeof setTimeout>;
+}
+
+export class ContextMenuElement extends HTMLElement {
+  #press: Press | undefined;
+  /** The element focused before the menu opened, to return focus to. */
+  #previous: HTMLElement | null = null;
+  /** When a long press opened the menu: the `contextmenu` that follows it on Android is ignored. */
+  #pressedAt = -Infinity;
+
+  /** The menu: its `<lu-menu>`. */
+  get menu(): MenuElement | null {
+    return this.querySelector<MenuElement>(":scope > lu-menu, :scope > * > lu-menu");
+  }
+
+  connectedCallback(): void {
+    for (const type of ["contextmenu", "keydown", "pointerdown", "pointermove", "pointerup"]) {
+      this.addEventListener(type, this);
+    }
+    this.addEventListener("pointercancel", this);
+    // The menu's `openchange` does not bubble: a capturing listener still sees it.
+    this.addEventListener("openchange", this, true);
+  }
+
+  disconnectedCallback(): void {
+    for (const type of ["contextmenu", "keydown", "pointerdown", "pointermove", "pointerup"]) {
+      this.removeEventListener(type, this);
+    }
+    this.removeEventListener("pointercancel", this);
+    this.removeEventListener("openchange", this, true);
+    this.#cancel();
+  }
+
+  handleEvent(event: Event): void {
+    const menu = this.menu;
+    if (event.type === "openchange") {
+      // The menu's own, not a submenu's: focus left with the popup, or stayed in it.
+      if (event.target !== menu || (event as CustomEvent<{ open: boolean }>).detail.open) return;
+      const active = document.activeElement;
+      if (!active || active === document.body || menu?.contains(active)) {
+        this.#previous?.focus({ preventScroll: true });
+      }
+      this.#previous = null;
+      return;
+    }
+    if (!menu || this.hasAttribute("data-disabled")) return;
+    const target = event.target as Node;
+    // A context menu nested in this one's area opens instead (TASK-437 M15).
+    const owner = (target instanceof Element ? target : target.parentElement)?.closest(
+      "lu-context-menu:not([data-disabled])",
+    );
+    if (owner !== this) return;
+    const inMenu = menu.contains(target);
+    switch (event.type) {
+      case "contextmenu": {
+        event.preventDefault();
+        if (inMenu || event.timeStamp - this.#pressedAt < 1000) return;
+        const pointer = event as MouseEvent;
+        // A keyboard's `contextmenu` (where Shift+F10 was not caught below) has no pointer.
+        const keyboard = pointer.detail === 0 && pointer.clientX === 0 && pointer.clientY === 0;
+        if (keyboard) this.#openAtFocus(target);
+        else this.#open(pointer.clientX, pointer.clientY, false);
+        break;
+      }
+      case "keydown": {
+        const key = event as KeyboardEvent;
+        const opens = key.key === "ContextMenu" || (key.key === "F10" && key.shiftKey);
+        if (!opens || inMenu || key.altKey || key.ctrlKey || key.metaKey) return;
+        event.preventDefault();
+        this.#openAtFocus(target);
+        break;
+      }
+      case "pointerdown": {
+        const pointer = event as PointerEvent;
+        if (this.#press) {
+          // A second finger: not a long press.
+          this.#cancel();
+          return;
+        }
+        if (inMenu || pointer.pointerType === "mouse" || !pointer.isPrimary) return;
+        const { clientX: x, clientY: y, pointerId } = pointer;
+        this.#press = {
+          pointer: pointerId,
+          x,
+          y,
+          timer: setTimeout(() => {
+            this.#press = undefined;
+            this.#pressedAt = performance.now();
+            this.#open(x, y, false);
+          }, LONG_PRESS),
+        };
+        break;
+      }
+      case "pointermove": {
+        const pointer = event as PointerEvent;
+        const press = this.#press;
+        if (press?.pointer !== pointer.pointerId) return;
+        if (Math.hypot(pointer.clientX - press.x, pointer.clientY - press.y) > SLOP) this.#cancel();
+        break;
+      }
+      default:
+        if (this.#press?.pointer === (event as PointerEvent).pointerId) this.#cancel();
+    }
+  }
+
+  #cancel(): void {
+    if (this.#press) clearTimeout(this.#press.timer);
+    this.#press = undefined;
+  }
+
+  /** Opens the menu below the start of the focused element, as from the keyboard. */
+  #openAtFocus(target: Node): void {
+    const element = target instanceof Element ? target : target.parentElement;
+    const box = (element ?? this).getBoundingClientRect();
+    this.#open(box.left, box.bottom, true);
+  }
+
+  /** Opens the menu at `x`, `y` (viewport pixels), or moves it there when it is open. */
+  #open(x: number, y: number, keyboard: boolean): void {
+    const menu = this.menu!;
+    if (!menu.open) {
+      const active = document.activeElement;
+      this.#previous = active instanceof HTMLElement && active !== document.body ? active : null;
+    }
+    this.style.setProperty("--lu-context-x", `${x}px`);
+    this.style.setProperty("--lu-context-y", `${y}px`);
+    menu.show(keyboard);
+    const popup = menu.popup;
+    if (!anchoring && popup) {
+      place(popup, { getBoundingClientRect: () => new DOMRect(x, y, 0, 0) } as Element);
+    }
+  }
+}
+
+if (!customElements.get("lu-context-menu")) {
+  customElements.define("lu-context-menu", ContextMenuElement);
+}

package/dist/context-menu/context-menu.tsx

@@ -0,0 +1,178 @@
+// Context Menu (decision-62, TASK-378): Menu, opened at the pointer by a right-click in its trigger
+// area, a long press on a touch screen, or Shift+F10 and the ContextMenu key. Root renders
+// `<lu-context-menu>` (./context-menu.script.ts) around the area and the menu; Popup renders
+// Menu's `<lu-menu>` and `Menu.Popup`, anchored to a zero-size element that the script moves to
+// the pointer; the items are Menu's parts, with Menu's keys, typeahead, submenus and dismissal.
+// A right-click needs the script: without JavaScript the browser shows its own menu.
+import {
+  createContext,
+  effect,
+  ref,
+  signal,
+  untrack,
+  useContext,
+  useId,
+  type Signal,
+} from "lumiose";
+import { Menu, MenuContext, type MenuContextValue, type MenuPopupProps } from "../menu/menu.tsx";
+import type { MenuElement, MenuOpenChangeDetail } from "../menu/menu.script.ts";
+import { anchorName } from "../placement/placement.ts";
+import contextMenuScript from "./context-menu.script.ts?client";
+import type { ContextMenuElement } from "./context-menu.script.ts";
+
+declare module "lumiose/jsx-runtime" {
+  namespace JSX {
+    interface IntrinsicElements {
+      /** ContextMenu.Root's element: it opens its menu on a right-click, long press or key. */
+      "lu-context-menu": JSX.HTMLProps<ContextMenuElement>;
+    }
+  }
+}
+
+/**
+ * `ContextMenu.Root` renders `<lu-context-menu>`, an element with no box around the trigger area
+ * and the menu. `bind:open={signal}` stands in for `open` and `onOpenChange`.
+ */
+export interface ContextMenuRootProps {
+  /**
+   * Opens (`true`) or closes (`false`) the menu when it changes, in the browser, at the last place
+   * it opened (the top start corner of the window at first). Pair it with `onOpenChange` to keep a
+   * signal in sync; leave both out and the menu keeps its own state.
+   */
+  open?: boolean;
+  /** Called after the menu opens or closes, whatever opened or closed it. */
+  onOpenChange?: (open: boolean) => void;
+  /** The trigger area keeps the browser's own menu. */
+  disabled?: boolean;
+  /** The other parts: the `ContextMenu.Trigger` and the `ContextMenu.Popup`. */
+  children?: JSX.Element;
+}
+
+/**
+ * The `<div>` area whose right-click, long press, Shift+F10 or ContextMenu key opens the menu. For
+ * the keys, focus must be in it: give it `tabindex={0}`, or focusable content.
+ */
+export type ContextMenuTriggerProps = JSX.IntrinsicElements["div"];
+
+/**
+ * The `<div role="menu" popover>` of items: Menu's popup, placed at the pointer. Its placement
+ * props work from that point (default `side="bottom"`, `align="start"`, `sideOffset={0}`). Inside
+ * a `SubmenuRoot` it is the submenu's popup, placed next to its trigger.
+ */
+export type ContextMenuPopupProps = MenuPopupProps;
+
+interface ContextMenuContextValue {
+  menu: MenuContextValue;
+  host: (element: MenuElement) => void;
+  onOpenChange: (open: boolean) => void;
+}
+
+const ContextMenuContext = createContext<ContextMenuContextValue>();
+
+function useContextMenu(): ContextMenuContextValue {
+  const context = useContext(ContextMenuContext);
+  if (!context) throw new Error("ContextMenu parts must be inside <ContextMenu.Root>.");
+  return context;
+}
+
+function Root(props: ContextMenuRootProps) {
+  // Right-click, long press and the keys; Menu's script comes with it (decision-63).
+  contextMenuScript();
+  const id = useId();
+  const host = ref<MenuElement>();
+  const menu: MenuContextValue = {
+    popupId: `${id}-popup`,
+    triggerId: `${id}-trigger`,
+    id,
+    submenu: false,
+    triggers: signal(0) as Signal<number>,
+  };
+
+  // The `open` prop drives the menu; its `openchange` event reports back (as Menu.Root).
+  effect(() => {
+    const element = host();
+    const wanted = props.open;
+    if (!element?.isConnected || wanted === undefined) return;
+    if (wanted) element.show(false);
+    else element.open = false;
+  });
+
+  return (
+    <ContextMenuContext
+      value={{
+        menu,
+        host,
+        onOpenChange: (open) => untrack(() => props.onOpenChange?.(open)),
+      }}
+    >
+      <MenuContext value={menu}>
+        <lu-context-menu data-disabled={props.disabled ? "" : undefined}>
+          {props.children}
+        </lu-context-menu>
+      </MenuContext>
+    </ContextMenuContext>
+  );
+}
+
+function Trigger({ children, ...rest }: ContextMenuTriggerProps) {
+  useContextMenu();
+  return <div {...rest}>{children}</div>;
+}
+
+function Popup(props: ContextMenuPopupProps) {
+  const context = useContextMenu();
+  // In a submenu, a submenu's popup: placed next to its trigger, as in Menu.
+  if (useContext(MenuContext)?.submenu) return <Menu.Popup {...props} />;
+  return (
+    <lu-menu
+      ref={context.host}
+      on:openchange={(event: CustomEvent<MenuOpenChangeDetail>) =>
+        context.onOpenChange(event.detail.open)
+      }
+    >
+      {/* The point the popup is anchored to: the script moves it to the pointer. */}
+      <span
+        aria-hidden="true"
+        style={{
+          position: "fixed",
+          "inset-inline-start": "var(--lu-context-x, 0)",
+          "inset-block-start": "var(--lu-context-y, 0)",
+          "anchor-name": anchorName(context.menu.id),
+        }}
+      />
+      {/* At the pointer itself: no gap, unless the props ask for one. */}
+      <Menu.Popup {...props} sideOffset={props.sideOffset ?? 0} />
+    </lu-menu>
+  );
+}
+
+/**
+ * A menu opened at the pointer by a right-click in its trigger area, a long press on a touch
+ * screen, or Shift+F10 and the ContextMenu key with focus in it. Its items are Menu's: commands,
+ * links, checkbox and radio items, groups, separators and submenus, with Menu's keys and
+ * dismissal. Unstyled: style the popup as a Menu's (the default theme's `lu-menu`).
+ *
+ * @example
+ * <ContextMenu.Root>
+ *   <ContextMenu.Trigger tabindex={0}>Right-click here</ContextMenu.Trigger>
+ *   <ContextMenu.Popup>
+ *     <ContextMenu.Item>Copy</ContextMenu.Item>
+ *     <ContextMenu.Item>Paste</ContextMenu.Item>
+ *   </ContextMenu.Popup>
+ * </ContextMenu.Root>
+ */
+export const ContextMenu = {
+  Root,
+  Trigger,
+  Popup,
+  Item: Menu.Item,
+  LinkItem: Menu.LinkItem,
+  CheckboxItem: Menu.CheckboxItem,
+  RadioGroup: Menu.RadioGroup,
+  RadioItem: Menu.RadioItem,
+  Group: Menu.Group,
+  GroupLabel: Menu.GroupLabel,
+  Separator: Menu.Separator,
+  SubmenuRoot: Menu.SubmenuRoot,
+  SubmenuTrigger: Menu.SubmenuTrigger,
+};

package/dist/dialog/dialog.css

@@ -0,0 +1,35 @@
+/*
+ * Dialog needs no CSS to open, close, trap focus or make the page inert: the native <dialog>
+ * does it. This keeps the page behind a modal dialog from scrolling, as Base UI's and Zag's modal
+ * dialogs do, without shifting the layout where the page had a classic scrollbar. It matches every
+ * modal <dialog> on the page, since parts carry no class or attribute of their own (decision-62).
+ */
+@layer lu.core, lu.theme;
+
+@layer lu.core {
+  :root:has(dialog:modal) {
+    overflow: hidden;
+    scrollbar-gutter: stable;
+  }
+
+  /*
+   * The gutter only where the page overflows, so had a scrollbar (TASK-507, decision-79): a scroll
+   * timeline is active only then, so this animation sets it only then, with no script. Elsewhere
+   * a short page would lose 15px at its inline end to an empty gutter with classic scrollbars.
+   * Without scroll timelines (Firefox) the gutter stays, and Dialog's script measures the page.
+   */
+  @supports (animation-timeline: scroll()) {
+    :root:has(dialog:modal) {
+      scrollbar-gutter: auto;
+      animation: lu-dialog-gutter linear both;
+      animation-timeline: scroll(root block);
+    }
+  }
+
+  @keyframes lu-dialog-gutter {
+    from,
+    to {
+      scrollbar-gutter: stable;
+    }
+  }
+}

package/dist/dialog/dialog.script.ts

@@ -0,0 +1,269 @@
+// Dialog's client script (decision-62's "native gaps are closed by small scripts", shipped through
+// the client-script import of decision-63). Dialog works without it; on a page that renders one,
+// this module runs once and closes what a native modal <dialog> misses next to Base UI and Zag
+// (doc-9), for every <dialog> on the page:
+//
+// - Light dismiss: a secondary button or a second finger outside does not close a dialog, and
+//   `closedby="any"` works where the browser lacks it (Safari).
+// - Invoker commands (`show-modal`, `close`, `request-close`) where the browser lacks them.
+// - Nesting: a dialog with open dialogs inside gets `data-nested-dialog-open` and `--lu-nested-dialogs`.
+// - Initial focus: the `autofocus` element (the dialog itself when it has `autofocus`), or else the
+//   first tab stop inside, or else the dialog,
+//   as in Base UI, the same in every browser: Chromium would focus a scroller before the first
+//   control, Chromium and WebKit a `tabindex="-1"` title (TASK-453 L29). A dialog opened by touch
+//   focuses itself rather than its first field, so no virtual keyboard opens (an `autofocus`
+//   element still gets focus).
+// - Focus return: when closing leaves focus nowhere (WebKit does not focus a clicked trigger, or the
+//   trigger is gone), focus goes to the opener, else to a trigger of the dialog, without scrolling.
+// - Scroll lock (dialog.css locks <html> and keeps its scrollbar's gutter): a <body> that scrolls is
+//   locked too, and only a page that overflows keeps a gutter, measured before the dialog opens,
+//   so a page without a scrollbar gets no empty one.
+// - A dialog that closes closes the popovers and dialogs open inside it, innermost first, so none
+//   outlives it (TASK-436 M1; Chromium would keep a popover showing without its dialog).
+// - One Escape closes one layer (TASK-427): an Escape that nothing above took closes the topmost
+//   modal dialog through `requestClose()` (not one with `closedby="none"`), and is cancelled, so
+//   the browser's own close request does not follow. A dialog opened without user activation
+//   (by a timer) shares a close-watcher group with the dialog or popover before it, and that
+//   request would close the whole group.
+//
+// It must not import `lumiose`: server-rendered pages load it without the runtime.
+
+/** The last press, until a key is pressed: what a `cancel` or a `click` came from. */
+let press: PointerEvent | undefined;
+/** A dialog opening after a touch: its first focus moves to the dialog itself. */
+let touched: HTMLDialogElement | undefined;
+/** A dialog opening: its first focus moves to its first tab stop. */
+let opening: HTMLDialogElement | undefined;
+const openers = new WeakMap<HTMLDialogElement, HTMLElement>();
+/** Undoes the scroll lock's inline styles once no modal dialog is open. */
+let unlock: (() => void) | undefined;
+/** The open modal dialogs, in the order they opened: the last is on top. */
+const modals: HTMLDialogElement[] = [];
+
+function on<K extends keyof DocumentEventMap>(
+  type: K,
+  listener: (event: DocumentEventMap[K]) => void,
+) {
+  document.addEventListener(type, listener, true);
+}
+
+const isDialog = (node: unknown): node is HTMLDialogElement => node instanceof HTMLDialogElement;
+const recent = (event: Event) => press !== undefined && event.timeStamp - press.timeStamp < 1000;
+const primary = (event: PointerEvent) => event.button === 0 && event.isPrimary;
+
+/** Runs before a dialog opens, while the page can still be measured unlocked. */
+function lockScroll() {
+  if (unlock) return;
+  const { documentElement: html, body } = document;
+  const { scrollbarGutter } = html.style;
+  const { overflowY } = body.style;
+  // The gutter only where the page overflows, so has a scrollbar (TASK-507): set either way, so
+  // this does not depend on dialog.css's scroll timeline (Firefox has none, and a page's own
+  // `animation` on the root would cancel it).
+  if (getComputedStyle(html).scrollbarGutter === "auto") {
+    html.style.scrollbarGutter = html.scrollHeight > html.clientHeight ? "stable" : "auto";
+  }
+  if (
+    /auto|scroll/.test(getComputedStyle(body).overflowY) &&
+    body.scrollHeight > body.clientHeight
+  ) {
+    body.style.overflowY = "hidden";
+  }
+  unlock = () => {
+    html.style.scrollbarGutter = scrollbarGutter;
+    body.style.overflowY = overflowY;
+    unlock = undefined;
+  };
+}
+
+/** Whether a press is outside the dialog's box, on its backdrop. */
+function outside(dialog: HTMLDialogElement, { clientX: x, clientY: y }: MouseEvent): boolean {
+  const box = dialog.getBoundingClientRect();
+  return x < box.left || x > box.right || y < box.top || y > box.bottom;
+}
+
+on("pointerdown", (event) => (press = event));
+on("keydown", () => (press = undefined));
+
+// Native light dismiss fires a cancelable `cancel`: keep the dialog open for other presses.
+on("cancel", (event) => {
+  if (recent(event) && !primary(press!)) event.preventDefault();
+});
+
+if (!("closedBy" in HTMLDialogElement.prototype)) {
+  on("click", (event) => {
+    const dialog = event.target;
+    if (
+      isDialog(dialog) &&
+      dialog.matches("[open][closedby=any]") &&
+      press?.target === dialog &&
+      primary(press) &&
+      outside(dialog, press) &&
+      outside(dialog, event)
+    ) {
+      if (dialog.requestClose) dialog.requestClose();
+      else dialog.close();
+    }
+  });
+}
+
+if (!("command" in HTMLButtonElement.prototype)) {
+  on("click", (event) => {
+    const button = (event.target as Element).closest?.<HTMLButtonElement>("button[commandfor]");
+    const dialog = button && document.getElementById(button.getAttribute("commandfor")!);
+    if (!isDialog(dialog)) return;
+    const command = button!.getAttribute("command");
+    if (command === "show-modal" && !dialog.open) {
+      openers.set(dialog, button!);
+      dialog.showModal();
+    } else if (command === "close" && dialog.open) {
+      dialog.close(button!.value);
+    } else if (command === "request-close" && dialog.open) {
+      if (dialog.requestClose) dialog.requestClose(button!.value);
+      else dialog.close(button!.value);
+    }
+  });
+}
+
+on("command", (event) => {
+  // A CommandEvent: `source` is the invoker.
+  const { command, source } = event as Event & { command: string; source: Element | null };
+  if (isDialog(event.target) && command === "show-modal" && source instanceof HTMLElement) {
+    openers.set(event.target, source);
+  }
+});
+
+on("beforetoggle", (event) => {
+  const dialog = event.target;
+  if (!isDialog(dialog) || event.newState !== "open") return;
+  const active = document.activeElement;
+  if (!openers.has(dialog) && active instanceof HTMLElement && active !== document.body) {
+    openers.set(dialog, active);
+  }
+  if (recent(event) && press!.pointerType === "touch") touched = dialog;
+  else opening = dialog;
+  lockScroll();
+});
+
+const TABBABLE =
+  "a[href], button, input:not([type=hidden]), select, textarea, summary, iframe, [tabindex], [contenteditable]";
+
+/** The dialog's first tab stop: not a scroller, a `tabindex="-1"` element or a hidden one. */
+function firstTabStop(dialog: HTMLDialogElement): HTMLElement | undefined {
+  for (const element of dialog.querySelectorAll<HTMLElement>(TABBABLE)) {
+    if (element.tabIndex < 0 || element.matches(":disabled")) continue;
+    if (!(element.checkVisibility?.() ?? true)) continue;
+    // A radio group's tab stop is its checked radio.
+    if (element instanceof HTMLInputElement && element.type === "radio" && !element.checked) {
+      // Through the prototype: a control named `elements` shadows the form's (TASK-473, L9).
+      const elements = Object.getOwnPropertyDescriptor(HTMLFormElement.prototype, "elements")!;
+      const group = element.form && elements.get!.call(element.form).namedItem(element.name);
+      if (group instanceof RadioNodeList && group.value !== "") continue;
+    }
+    return element;
+  }
+  return undefined;
+}
+
+/** Focuses the dialog itself, which takes focus without being a tab stop. */
+function focusItself(dialog: HTMLDialogElement) {
+  if (!dialog.hasAttribute("tabindex")) dialog.tabIndex = -1;
+  dialog.focus({ preventScroll: true });
+}
+
+// Opening focuses an element synchronously, between `beforetoggle` and `toggle`.
+on("focusin", (event) => {
+  const target = event.target as Element;
+  if (touched) {
+    const dialog = touched;
+    if (!dialog.contains(target) || target === dialog) return;
+    touched = undefined;
+    if (!target.hasAttribute("autofocus")) focusItself(dialog);
+    return;
+  }
+  const dialog = opening;
+  if (!dialog?.contains(target)) return;
+  opening = undefined;
+  // `autofocus` on the dialog itself: the dialog takes focus (Chromium would focus its first
+  // control).
+  if (dialog.hasAttribute("autofocus")) {
+    if (target !== dialog) focusItself(dialog);
+    return;
+  }
+  if (target.hasAttribute("autofocus")) return;
+  const first = firstTabStop(dialog);
+  if (first) {
+    if (first !== target) first.focus();
+  } else if (target !== dialog) focusItself(dialog);
+});
+
+/**
+ * Whether a native popup is open above `dialog`: a select's picker, or a popover that no layer
+ * script runs (the toast viewport, always open, aside). The browser's close request is its.
+ */
+function popupAbove(dialog: HTMLDialogElement): boolean {
+  const popovers = [...document.querySelectorAll(":popover-open")].filter(
+    (popover) => popover.localName !== "lu-toast-viewport" && !popover.contains(dialog),
+  );
+  if (popovers.length > 0) return true;
+  try {
+    return dialog.querySelector("select:open") !== null;
+  } catch {
+    // No `:open` (Firefox): no customizable select picker either.
+    return false;
+  }
+}
+
+// On `window`, after the layers' listeners on `document`: an open layer takes the Escape first.
+window.addEventListener("keydown", (event) => {
+  // `keyCode` 229: Safari's key that ends an input method's composition (TASK-438 M21).
+  if (event.key !== "Escape" || event.defaultPrevented || event.isComposing) return;
+  if (event.keyCode === 229) return;
+  const dialog = modals.filter((each) => each.isConnected && each.matches(":modal")).at(-1);
+  if (!dialog || popupAbove(dialog)) return;
+  event.preventDefault();
+  if (dialog.getAttribute("closedby") === "none") return;
+  if (dialog.requestClose) dialog.requestClose();
+  else if (dialog.dispatchEvent(new Event("cancel", { cancelable: true }))) dialog.close();
+});
+
+on("toggle", (event) => {
+  const dialog = event.target;
+  if (!isDialog(dialog)) return;
+  touched = opening = undefined;
+  const at = modals.indexOf(dialog);
+  if (at !== -1) modals.splice(at, 1);
+  if (event.newState === "open" && dialog.matches(":modal")) modals.push(dialog);
+  if (!document.querySelector("dialog:modal")) unlock?.();
+  for (const each of document.querySelectorAll("dialog")) {
+    const nested = each.querySelectorAll("dialog[open]").length;
+    each.toggleAttribute("data-nested-dialog-open", nested > 0);
+    if (nested) each.style.setProperty("--lu-nested-dialogs", String(nested));
+    else each.style.removeProperty("--lu-nested-dialogs");
+  }
+  if (event.newState !== "closed") return;
+  for (const each of [
+    ...dialog.querySelectorAll<HTMLElement>(":popover-open, dialog[open]"),
+  ].toReversed()) {
+    if (each.closest("lu-toast-viewport")) continue;
+    if (isDialog(each)) each.close();
+    else if (each.matches(":popover-open")) each.hidePopover();
+  }
+  // The browser has already restored focus, or failed to: fix only the failure.
+  const opener = openers.get(dialog);
+  openers.delete(dialog);
+  const active = document.activeElement;
+  if (dialog.open || (active && active !== document.body && !dialog.contains(active))) return;
+  // A trigger found by comparing ids, not by a selector built from one: a quote in the id must
+  // not end the selector's string (TASK-473, L8).
+  const trigger = opener?.isConnected
+    ? opener
+    : [...document.querySelectorAll<HTMLElement>('[command="show-modal"][commandfor]')].find(
+        (each) => dialog.id !== "" && each.getAttribute("commandfor") === dialog.id,
+      );
+  trigger?.focus({ preventScroll: true });
+});
+
+// A module, so it runs once per page whoever imports it.
+// oxlint-disable-next-line unicorn/require-module-specifiers
+export {};