actual-css 0.1.0 → 0.3.0

package/src/js/context-menu.js

@@ -1,24 +1,16 @@
 import enhance from "./enhance.js";
 import { EVENTS } from "./events.js";
-import { focusFirstMenuItem, hasMenuItems } from "./menu.js";
-import { CLASSES } from "./selectors.js";
-import {
-  closeSurface,
-  disconnectSurface,
-  isSurfaceOpen,
-  openSurface,
-  prepareSurface,
-} from "./surface.js";
+import { connectMenu, focusFirstMenuItem, hasMenuItems } from "./menu.js";
+import { closeSurface, isSurfaceOpen, openSurface, retainSurface } from "./surface.js";
 
 const LONG_PRESS_MS = 450;
+const LONG_PRESS_CLICK_SUPPRESSION_MS = 750;
 const MOVE_TOLERANCE = 10;
-const CONTEXT_MENU_SELECTOR = `menu.${CLASSES.flyout}`;
+const CONTEXT_MENU_SELECTOR = 'menu, [role="menu"]';
 const CONTEXT_TARGET_SELECTOR = "[data-context-menu]";
 const contextMap = new WeakMap();
 const contextByMenu = new WeakMap();
 
-// Returns the detail from the last accepted `actual:context-menu` event for a
-// menu. This is intentionally optional: static menus need no application JS.
 export function contextFor(menu) {
   return contextByMenu.get(menu) || null;
 }
@@ -55,27 +47,29 @@ function getLongPressDelay(target, menu) {
   if (value === "") return LONG_PRESS_MS;
 
   const delay = Number.parseInt(value, 10);
-  return Number.isFinite(delay) ? delay : LONG_PRESS_MS;
+  return Number.isFinite(delay) ? Math.max(0, delay) : LONG_PRESS_MS;
+}
+
+function readPanelOptions(menu) {
+  const opts = { autoClose: "true" };
+  const ds = menu.dataset;
+  if (ds.flyoutMobile) opts.mobile = ds.flyoutMobile;
+  if (ds.flyoutAutoClose) opts.autoClose = ds.flyoutAutoClose;
+  return opts;
 }
 
 function focusMenuContainer(menu) {
   if (!menu.hasAttribute("tabindex")) {
     menu.tabIndex = -1;
   }
-  menu.focus();
+  // Moving the mounted menu into the surface root must not scroll the page.
+  // Genuine user scrolling is handled separately by the surface policy.
+  menu.focus({ preventScroll: true });
 }
 
-// Pointer-triggered opens (right-click, long-press) focus the menu container,
-// not the first item: a pointer-set focus ring is invisible (:focus-visible
-// doesn't match), so focusing "Open" makes the first ArrowDown look like it
-// skips to the second item. Focusing the container keeps the ring hidden and
-// lets keys.js's out-of-list fallback (indexOf === -1) land ArrowDown/ArrowUp
-// on the first/last item, matching native OS context menus. Keyboard-triggered
-// opens (openFromKeyboard) still focus the first item directly.
 function focusMenu(menu, mode) {
-  if (!hasMenuItems(menu)) return;
   if (mode === "first-item") {
-    focusFirstMenuItem(menu);
+    if (hasMenuItems(menu)) focusFirstMenuItem(menu);
   } else {
     focusMenuContainer(menu);
   }
@@ -108,9 +102,11 @@ function openContextMenu(context, menu, opts = {}) {
       y: opts.y,
       placement: opts.placement || "bottom-start",
       distance: opts.distance ?? 2,
-      mobile: opts.mobile || menu.dataset.flyoutMobile || "auto",
+      dismissOnScroll: true,
+      mobile: opts.mobile || "auto",
       scope: opts.scope || getContextScope(context),
       restoreFocusTo: opts.restoreFocusTo,
+      ...readPanelOptions(menu),
     })
   ) {
     focusMenu(menu, opts.focus);
@@ -144,11 +140,16 @@ function connectContextTarget(target) {
   const menu = menuFor(target);
   if (!menu) return;
 
-  prepareSurface(menu);
+  const release = retainSurface(menu);
   const controller = new AbortController();
+  const releaseMenu = connectMenu(menu, {
+    close: (menu) => closeSurface(menu),
+  });
   const state = {
     controller,
+    releaseMenu,
     menu,
+    release,
     timer: null,
     pointerId: null,
     startX: 0,
@@ -197,7 +198,7 @@ function connectContextTarget(target) {
       state.startY = e.clientY;
       state.timer = setTimeout(() => {
         state.timer = null;
-        state.suppressClickUntil = Date.now() + 750;
+        state.suppressClickUntil = Date.now() + LONG_PRESS_CLICK_SUPPRESSION_MS;
         openContextMenu(target, menu, {
           x: state.startX,
           y: state.startY,
@@ -245,6 +246,45 @@ function connectContextTarget(target) {
     { signal: controller.signal, capture: true },
   );
 
+  target.addEventListener(
+    "click",
+    (e) => {
+      const trigger = e.target.closest("[data-context-menu-trigger]");
+      if (
+        !trigger ||
+        trigger.getAttribute("aria-controls") !== target.getAttribute("data-context-menu")
+      )
+        return;
+
+      e.preventDefault();
+      e.stopPropagation();
+
+      if (isSurfaceOpen(menu)) {
+        closeSurface(menu);
+        return;
+      }
+
+      if (!requestContextMenu(target, menu, { origin: trigger, trigger: "button" })) return;
+
+      const rect = trigger.getBoundingClientRect();
+      if (
+        openSurface(menu, {
+          source: target,
+          x: rect.left,
+          y: rect.bottom,
+          placement: "bottom-start",
+          distance: 4,
+          dismissOnScroll: true,
+          restoreFocusTo: trigger,
+          ...readPanelOptions(menu),
+        })
+      ) {
+        focusMenuContainer(menu);
+      }
+    },
+    { signal: controller.signal },
+  );
+
   contextMap.set(target, state);
 }
 
@@ -253,39 +293,18 @@ function disconnectContextTarget(target) {
   if (!state) return;
   clearLongPress(state);
   state.controller.abort();
-  if (contextFor(state.menu)?.context === target) contextByMenu.delete(state.menu);
+  state.releaseMenu?.();
+  if (contextFor(state.menu)?.context === target) {
+    contextByMenu.delete(state.menu);
+    closeSurface(state.menu, { restoreFocus: false });
+  }
+  state.release();
   contextMap.delete(target);
 }
 
-function connectContextMenu(menu) {
-  const controller = new AbortController();
-  menu.addEventListener(
-    EVENTS.surfaceOpen,
-    (event) => {
-      const options = event.detail?.options;
-      const trigger = options?.trigger;
-      const context = trigger?.closest?.(CONTEXT_TARGET_SELECTOR);
-      if (!context || menuFor(context) !== menu) return;
-      if (!requestContextMenu(context, menu, { origin: trigger, trigger: "button" })) {
-        event.preventDefault();
-        return;
-      }
-      options.source = context;
-      options.restoreFocusTo = trigger;
-    },
-    { signal: controller.signal },
-  );
-  return () => {
-    controller.abort();
-    contextByMenu.delete(menu);
-    disconnectSurface(menu);
-  };
-}
-
 enhance({
   [CONTEXT_TARGET_SELECTOR]: (target) => {
     connectContextTarget(target);
     return () => disconnectContextTarget(target);
   },
-  [CONTEXT_MENU_SELECTOR]: (menu) => connectContextMenu(menu),
 });

package/src/js/dialog.js

@@ -8,7 +8,13 @@
  * Command semantics are explicit: show-modal calls showModal(), show calls
  * show(). data-dialog-modal still defines the default for direct openDialog()
  * calls when no command mode is forced.
- * Dismissible means backdrop click/light dismiss is allowed.
+ * data-dialog-dismissible gates backdrop click only: with it, the runtime
+ * handles light dismiss (rewriting closedby="any" to "closerequest" so the
+ * native dialog does not double-handle). Without it, a native closedby="any"
+ * dialog keeps its own light dismiss and other dialogs flash a static
+ * indicator on backdrop click. Escape and explicit close requests always
+ * close, unless an application cancels the actual:dialog-cancel event, and
+ * closedby="none" keeps its native meaning (no Escape, no backdrop close).
  *
  * View transitions (opt-in via data-dialog-view-transition):
  *   When the browser supports document.startViewTransition and the user allows
@@ -16,10 +22,9 @@
  *   view-transition-name. Otherwise native dialog behavior remains the
  *   baseline: the dialog simply opens and closes.
  *
- * Browsers without native <dialog> can get a rudimentary per-element shim
- * from the optional, standalone dialog-fallback.js module; this module has
- * no dependency on it and alerts when no shim or polyfill made the target
- * controllable.
+ * The runtime assumes native <dialog> with show()/showModal()/close() — the
+ * Minimal browser tier. requestClose() is newer than the floor and is used
+ * when present, falling back to close() otherwise.
  */
 
 import { registerCommands, targetFor } from "./command.js";
@@ -32,35 +37,10 @@ const wiredDialogs = new Set();
 const DIALOG_COMMANDS = ["show-modal", "show", "request-close", "close"];
 const DIALOG_SELECTOR = "dialog";
 const DIALOG_TITLE_SELECTOR = "[data-title], h1, h2, h3, h4, h5, h6";
-const DEFAULT_UNSUPPORTED_MESSAGE =
-  "This dialog cannot open because this browser does not support this feature.";
 let uid = 0;
 
-function supportsDialog() {
-  return (
-    typeof HTMLDialogElement !== "undefined" &&
-    typeof HTMLDialogElement.prototype.showModal === "function"
-  );
-}
 function isDialogElement(el) {
-  return (
-    typeof Node !== "undefined" && el?.nodeType === Node.ELEMENT_NODE && el.localName === "dialog"
-  );
-}
-
-function canControlDialog(el) {
-  // Optional polyfills may patch registered <dialog> elements without making
-  // supportsDialog() true globally, so check the actual element before opening.
-  return (
-    isDialogElement(el) &&
-    typeof el.show === "function" &&
-    typeof el.showModal === "function" &&
-    typeof el.close === "function"
-  );
-}
-
-function isDialog(el) {
-  return canControlDialog(el);
+  return el?.nodeType === 1 && el.localName === "dialog";
 }
 
 function boolData(el, name) {
@@ -98,13 +78,6 @@ function syncDialogSemantics(dialog, modal = isModal(dialog)) {
   }
 }
 
-// Reached only when neither the optional dialog-fallback module nor an
-// adopter polyfill made the target controllable on a legacy browser.
-function notifyUnsupportedDialog(trigger) {
-  const win = trigger.ownerDocument.defaultView;
-  win?.alert?.(DEFAULT_UNSUPPORTED_MESSAGE);
-}
-
 function isModal(dialog) {
   return dialog.getAttribute("data-dialog-modal") !== "false";
 }
@@ -227,16 +200,17 @@ function isOutsideDialog(dialog, event) {
 
 function flashStatic(dialog) {
   const state = ensureDialogWired(dialog);
+  const win = dialog.ownerDocument.defaultView;
 
   if (state.staticTimer) {
-    window.clearTimeout(state.staticTimer);
+    win?.clearTimeout(state.staticTimer);
   }
 
   dialog.classList.remove(CLASSES.static);
   void dialog.offsetWidth;
   dialog.classList.add(CLASSES.static);
 
-  state.staticTimer = window.setTimeout(() => {
+  state.staticTimer = win?.setTimeout(() => {
     dialog.classList.remove(CLASSES.static);
     state.staticTimer = null;
   }, 250);
@@ -256,7 +230,7 @@ function finishClose(dialog, returnValue = "") {
 }
 
 export function closeDialog(dialog, returnValue = "") {
-  if (!isDialog(dialog) || !dialog.open) return;
+  if (!isDialogElement(dialog) || !dialog.open) return;
 
   const state = ensureDialogWired(dialog);
   if (state.closing) return;
@@ -285,7 +259,7 @@ export function closeDialog(dialog, returnValue = "") {
 }
 
 export function requestDialogClose(dialog, returnValue = "") {
-  if (!isDialog(dialog) || !dialog.open) return;
+  if (!isDialogElement(dialog) || !dialog.open) return;
 
   if (typeof dialog.requestClose === "function") {
     ensureDialogWired(dialog).returnValue = returnValue;
@@ -297,14 +271,20 @@ export function requestDialogClose(dialog, returnValue = "") {
 }
 
 export function openDialog(dialog, trigger = null, forcedModal = null) {
-  if (!isDialog(dialog) || dialog.open || !dialog.isConnected) return;
+  if (!isDialogElement(dialog) || dialog.open || !dialog.isConnected) return;
 
   const state = ensureDialogWired(dialog);
   const modal = resolveModalMode(dialog, forcedModal);
   syncDialogSemantics(dialog, modal);
 
   state.closing = false;
-  state.restoreFocusTo = trigger || document.activeElement;
+  state.restoreFocusTo = trigger || dialog.ownerDocument.activeElement;
+
+  // showModal()/show() focus the dialog, and Chrome resets the viewport scroll
+  // while doing so; capture the position first and restore it so the page does
+  // not jump to the top behind the modal.
+  const viewport = dialog.ownerDocument.defaultView;
+  const scrollY = viewport?.scrollY ?? 0;
 
   if (modal) {
     dialog.showModal();
@@ -314,6 +294,10 @@ export function openDialog(dialog, trigger = null, forcedModal = null) {
     state.modalOpen = false;
   }
 
+  if (scrollY > 0) {
+    viewport?.scrollTo(0, scrollY);
+  }
+
   syncModalOpenClass(dialog.ownerDocument);
 }
 
@@ -322,14 +306,19 @@ function handleDialogClick(event) {
 
   if (event.target !== dialog || !isOutsideDialog(dialog, event)) return;
 
-  event.preventDefault();
-
-  if (isDismissible(dialog)) {
-    requestDialogClose(dialog);
+  // A native closedby="any" dialog owns its light dismiss; the runtime only
+  // takes over when the author opted in via data-dialog-dismissible (which
+  // rewrites "any" to "closerequest"). Leave the native close alone.
+  if (!isDismissible(dialog)) {
+    const closedBy = "closedBy" in dialog ? dialog.closedBy : "";
+    if (closedBy === "any") return;
+    event.preventDefault();
+    flashStatic(dialog);
     return;
   }
 
-  flashStatic(dialog);
+  event.preventDefault();
+  requestDialogClose(dialog);
 }
 
 function handleDialogSubmit(event) {
@@ -346,25 +335,25 @@ function handleDialogSubmit(event) {
 
 function handleDialogCancel(event) {
   const dialog = event.currentTarget;
+  const state = dialogMap.get(dialog);
 
-  if (!isDismissible(dialog)) {
-    event.preventDefault();
-    flashStatic(dialog);
-    return;
-  }
-
+  // Escape and close requests always close, whatever the dismissible flag:
+  // data-dialog-dismissible only gates light dismiss (backdrop click, handled
+  // in handleDialogClick). Applications intercept via actual:dialog-cancel.
   const request = new CustomEvent(EVENTS.dialogCancel, {
     bubbles: true,
     cancelable: true,
     detail: { dialog, sourceEvent: event },
   });
   if (!dialog.dispatchEvent(request)) {
+    // Close was prevented; drop any returnValue staged for it.
     event.preventDefault();
+    if (state) state.returnValue = "";
     return;
   }
 
   event.preventDefault();
-  closeDialog(dialog, dialogMap.get(dialog)?.returnValue || "");
+  closeDialog(dialog, state?.returnValue || "");
 }
 
 function handleDialogClose(event) {
@@ -376,7 +365,7 @@ function handleDialogClose(event) {
   if (!state) return;
 
   if (state.staticTimer) {
-    window.clearTimeout(state.staticTimer);
+    dialog.ownerDocument.defaultView?.clearTimeout(state.staticTimer);
     state.staticTimer = null;
   }
 
@@ -389,8 +378,11 @@ function handleDialogClose(event) {
   const restoreFocusTo = state.restoreFocusTo;
   state.restoreFocusTo = null;
 
-  if (restoreFocusTo?.isConnected) {
-    restoreFocusTo.focus();
+  // The native dialog restores focus to the previously focused element on
+  // close; only step in when it has not (e.g. an explicit trigger we tracked)
+  // and avoid scrolling the viewport while doing so.
+  if (restoreFocusTo?.isConnected && dialog.ownerDocument.activeElement !== restoreFocusTo) {
+    restoreFocusTo.focus({ preventScroll: true });
   }
 }
 
@@ -407,18 +399,20 @@ function ensureDialogWired(dialog) {
     staticTimer: null,
   };
 
-  syncDialogSemantics(dialog);
+  // A dialog that is already `open` in the markup is non-modal per spec,
+  // whatever data-dialog-modal says; infer semantics from its actual state.
+  syncDialogSemantics(dialog, dialog.open ? isModalOpen(dialog) : isModal(dialog));
 
   dialog.addEventListener("click", handleDialogClick, { signal: controller.signal });
   dialog.addEventListener("submit", handleDialogSubmit, { signal: controller.signal });
   dialog.addEventListener("cancel", handleDialogCancel, { signal: controller.signal });
   dialog.addEventListener("close", handleDialogClose, { signal: controller.signal });
 
-  // Let modern browsers know the intended native close policy. Backdrop click
-  // is still handled above so animation remains consistent across browsers.
-  if ("closedBy" in dialog) {
-    // Keep native Esc/back close requests, but handle backdrop clicks ourselves
-    // so animated light dismiss behaves consistently across browsers.
+  // Only rewrite "any" when the runtime owns light dismiss (dismissible
+  // backdrop): the author opted into Actual's controlled behavior. Otherwise
+  // closedby keeps its native meaning — "any" closes on backdrop click,
+  // "closerequest" on Escape, "none" disables both. Never override "none".
+  if (isDismissible(dialog) && "closedBy" in dialog && dialog.closedBy === "any") {
     dialog.closedBy = "closerequest";
   }
 
@@ -437,7 +431,7 @@ function disconnectDialog(dialog) {
   if (!state) return;
 
   if (state.staticTimer) {
-    window.clearTimeout(state.staticTimer);
+    dialog.ownerDocument.defaultView?.clearTimeout(state.staticTimer);
   }
 
   state.controller.abort();
@@ -454,7 +448,7 @@ registerCommands(DIALOG_COMMANDS, {
     return isDialogElement(dialog) ? dialog : null;
   },
   prepare: (trigger, dialog, command) => {
-    if (isDialog(dialog)) {
+    if (isDialogElement(dialog)) {
       ensureDialogWired(dialog);
     }
 
@@ -470,10 +464,7 @@ registerCommands(DIALOG_COMMANDS, {
   handle: (event, trigger, dialog, command) => {
     event.preventDefault();
 
-    if (!isDialog(dialog)) {
-      if (command === "show-modal" || command === "show") {
-        notifyUnsupportedDialog(trigger);
-      }
+    if (!isDialogElement(dialog)) {
       return;
     }
 
@@ -493,11 +484,9 @@ registerCommands(DIALOG_COMMANDS, {
   },
 });
 
-if (supportsDialog()) {
-  enhance({
-    [DIALOG_SELECTOR]: (dialog) => {
-      connectDialog(dialog);
-      return () => disconnectDialog(dialog);
-    },
-  });
-}
+enhance({
+  [DIALOG_SELECTOR]: (dialog) => {
+    connectDialog(dialog);
+    return () => disconnectDialog(dialog);
+  },
+});

package/src/js/dismiss.js

@@ -0,0 +1,15 @@
+import { registerCommands } from "./command.js";
+import { EVENTS } from "./events.js";
+
+registerCommands("--dismiss", {
+  handle(event, trigger, target) {
+    event.preventDefault();
+    target.hidden = true;
+    target.dispatchEvent(
+      new CustomEvent(EVENTS.dismiss, {
+        bubbles: true,
+        detail: { trigger },
+      }),
+    );
+  },
+});