actual-css 0.6.0 → 0.8.0

package/src/js/surface.js

@@ -1,15 +1,14 @@
+import { autoUpdate, reposition, repositionAt } from "@lekoala/floating";
 import enhance from "./enhance.js";
 import { registerEscapeDismissal } from "./escape.js";
 import { EVENTS } from "./events.js";
-import { autoUpdate, reposition, repositionAt } from "./floating.js";
+import { positionModeFor } from "./floating-space.js";
 
 import { CLASSES } from "./selectors.js";
-import { waitForTransitions } from "./transition.js";
 
 const openSurfaces = new Set();
 const surfaceMap = new WeakMap();
 const surfaceRetainers = new WeakMap();
-const mountedSurfaces = new WeakMap();
 const clickBoundDocuments = new WeakSet();
 
 const SURFACE_MARKER = "data-actual-surface";
@@ -38,61 +37,57 @@ function reaperFor(menu) {
 
   let reaper = reapers.get(root);
   if (!reaper) {
-    reaper = enhance(
-      { [`[${SURFACE_MARKER}]`]: (el) => () => disconnectSurface(el, { restore: false }) },
-      root,
-    );
+    reaper = enhance({ [`[${SURFACE_MARKER}]`]: (el) => () => disconnectSurface(el) }, root);
     reapers.set(root, reaper);
   }
   return reaper;
 }
 
-function getSurfaceRoot(menu, anchor) {
-  return anchor?.closest("dialog") || menu.closest("dialog") || menu.ownerDocument.body;
-}
-
-function mountSurface(menu, anchor) {
-  if (mountedSurfaces.has(menu)) return;
-
-  const root = getSurfaceRoot(menu, anchor);
-  const parent = menu.parentNode;
-  if (!root || !parent || parent === root) return;
-
-  mountedSurfaces.set(menu, { parent, next: menu.nextSibling });
-  root.append(menu);
-}
-
-function restoreSurface(menu) {
-  const mount = mountedSurfaces.get(menu);
-  if (!mount) return;
-
-  if (mount.parent.isConnected) {
-    const next = mount.next?.parentNode === mount.parent ? mount.next : null;
-    mount.parent.insertBefore(menu, next);
-  } else {
-    menu.remove();
+/*
+ * Transport: the top layer, via popover="manual".
+ *
+ * The runtime owns the whole lifecycle, so "manual" is the only usable mode —
+ * it supplies promotion to the top layer and nothing else, leaving the
+ * dismissal policy, Escape ordering and focus restoration below untouched.
+ *
+ * The attribute is set by the runtime, not asked of the author: a surface is
+ * still marked up exactly as before. showPopover/hidePopover throw on an
+ * out-of-order call (already open, not connected), which is a state Actual's
+ * own guards should already have excluded — the try/catch is there so a
+ * surprising DOM does not take the lifecycle down with it.
+ */
+function showTransport(menu) {
+  try {
+    menu.showPopover();
+    return true;
+  } catch {
+    return false;
   }
-
-  mountedSurfaces.delete(menu);
 }
 
-function shouldUseSheet(menu, state) {
-  const mobile = state.mobile || "auto";
-  if (mobile === "none" || mobile === "anchored") return false;
-  if (mobile === "sheet") return true;
-
-  const view = menu.ownerDocument?.defaultView;
-  if (!view || typeof view.matchMedia !== "function") {
-    return false;
+function hideTransport(menu) {
+  try {
+    menu.hidePopover();
+  } catch {
+    /* Already closed or detached; nothing left to hide. */
   }
-
-  const breakpoint = state.breakpoint ?? 768;
-  return (
-    view.matchMedia("(pointer: coarse)").matches &&
-    view.matchMedia(`(max-width: ${breakpoint}px)`).matches
-  );
 }
 
+/*
+ * Trigger state sync stays Actual's job, deliberately.
+ *
+ * A button carrying popovertarget gets an implicit invoker relation and the
+ * platform computes aria-expanded on it by itself — measured on the AX tree:
+ * expanded false when closed, true when open. Tempting, and out of scope: the
+ * public contract here is aria-controls, and popovertarget would replace it.
+ * That is a markup change for adopters, not an internal transport detail, so it
+ * cannot ride along with a transport swap that changes no HTML.
+ *
+ * It is also not obviously a win. linkedTriggers() is small, explicit, and
+ * already supports several triggers pointing at one panel; popovertarget covers
+ * the single-invoker case. Any future move needs to weigh what is lost, not
+ * just count the lines saved.
+ */
 function linkedTriggers(menu) {
   if (!menu.id) return [];
   return [...menu.ownerDocument.querySelectorAll(`[aria-controls="${CSS.escape(menu.id)}"]`)];
@@ -104,39 +99,9 @@ function syncExpanded(menu, expanded) {
   }
 }
 
-function ensureBackdrop(menu, state) {
-  if (!state.isSheet) {
-    state.backdrop?.remove();
-    state.backdrop = null;
-    return;
-  }
-
-  if (state.backdrop?.isConnected) {
-    state.backdrop.hidden = false;
-    return;
-  }
-
-  const backdrop = menu.ownerDocument.createElement("div");
-  backdrop.className = CLASSES.backdrop;
-  backdrop.hidden = false;
-
-  menu.before(backdrop);
-  state.backdrop = backdrop;
-}
-
-function applyPresentation(menu, state) {
-  state.isSheet = shouldUseSheet(menu, state);
-  if (state.isSheet) {
-    menu.style.removeProperty("left");
-    menu.style.removeProperty("top");
-  }
-  menu.classList.toggle(CLASSES.sheet, state.isSheet);
-  ensureBackdrop(menu, state);
-}
-
 function positionSurface(menu) {
   const state = surfaceMap.get(menu);
-  if (!state || state.isSheet) return true;
+  if (!state) return true;
 
   if (state.trigger) {
     const triggerWidth = state.trigger.getBoundingClientRect().width;
@@ -152,6 +117,7 @@ function positionSurface(menu) {
     shift: state.shift !== false,
     shiftPadding: state.shiftPadding ?? 4,
     scope: state.scope,
+    coordinateSpace: state.coordinateSpace,
   };
 
   if (state.point) {
@@ -171,12 +137,9 @@ function ensureSurfaceWired(menu) {
     stopTracking: null,
     stopScrollIntent: null,
     unregisterEscape: null,
-    backdrop: null,
     trigger: null,
     source: null,
     point: null,
-    mobile: "auto",
-    breakpoint: 768,
     placement: "bottom-start",
     distance: 4,
     flip: true,
@@ -185,8 +148,7 @@ function ensureSurfaceWired(menu) {
     autoClose: "outside",
     dismissOnScroll: false,
     scrollIntentAt: null,
-    isSheet: false,
-    closeId: 0,
+    coordinateSpace: "viewport",
   };
 
   surfaceMap.set(menu, state);
@@ -210,6 +172,10 @@ function startSurfaceResources(menu, state) {
     const armKey = (event) => {
       if (!event.defaultPrevented && SCROLL_KEYS.has(event.key)) arm(event);
     };
+    const dismissOnScroll = (event) => {
+      if (state.scrollIntentAt == null || menu.contains(event.target)) return;
+      closeSurface(menu);
+    };
     const captureOptions = { signal: controller.signal, capture: true };
     const passiveCaptureOptions = { ...captureOptions, passive: true };
     const doc = menu.ownerDocument;
@@ -217,33 +183,32 @@ function startSurfaceResources(menu, state) {
     doc.addEventListener("touchmove", arm, passiveCaptureOptions);
     doc.addEventListener("wheel", arm, passiveCaptureOptions);
     doc.addEventListener("keydown", armKey, { signal: controller.signal });
+    doc.addEventListener("scroll", dismissOnScroll, passiveCaptureOptions);
     state.stopScrollIntent = () => controller.abort();
   }
-  state.stopTracking = autoUpdate(menu, ({ type, targets, timeStamp }) => {
-    if (menu.hidden) return;
-    if (
-      type === "scroll" &&
-      state.dismissOnScroll &&
-      state.scrollIntentAt != null &&
-      timeStamp >= state.scrollIntentAt &&
-      [...targets].some((target) => target !== menu && !menu.contains(target))
-    ) {
-      closeSurface(menu);
-      return;
-    }
-    applyPresentation(menu, state);
+  const anchor = state.point ? null : state.trigger || state.source;
+  state.stopTracking = autoUpdate(anchor, menu, ({ type }) => {
+    if (!isSurfaceOpen(menu)) return;
+    if (type === "scroll" && state.dismissOnScroll) return;
     if (!positionSurface(menu)) closeSurface(menu);
   });
 }
 
 export function isSurfaceOpen(menu) {
-  return menu.classList.contains(CLASSES.open) && !menu.hidden;
+  return menu.classList.contains(CLASSES.open);
 }
 
 export function prepareSurface(menu) {
   if (!menu) return;
   menu.style.position = "fixed";
-  menu.hidden = true;
+  // A closed popover is hidden by the platform, so [hidden] is no longer the
+  // closed state. Any left over from author markup would outrank it.
+  menu.removeAttribute("hidden");
+  // "manual" is written even over an author's own value, because it is the
+  // whole of what the transport asks for. Any other mode hands the UA a
+  // dismissal policy of its own: light dismiss closes on outside clicks only,
+  // which silently defeats data-flyout-auto-close.
+  menu.setAttribute("popover", "manual");
   syncExpanded(menu, false);
   menu.setAttribute(SURFACE_MARKER, "");
   reaperFor(menu)?.refresh(menu);
@@ -266,8 +231,10 @@ export function retainSurface(panel) {
     released = true;
     entry.count--;
     if (entry.count <= 0) {
-      // A released retainer may leave a mounted panel whose original parent
-      // either still needs it back or has disappeared along with the trigger.
+      // Nothing was moved, so nothing has to be put back. What the last
+      // release still owes is the teardown: the panel may be open, and an
+      // open surface holds an Escape entry and a position tracker, neither of
+      // which has an owner once the last retainer is gone.
       disconnectSurface(panel);
       surfaceRetainers.delete(panel);
     }
@@ -285,20 +252,12 @@ export function openSurface(menu, opts = {}) {
   });
   if (!menu.dispatchEvent(beforeOpen)) return false;
 
-  for (const other of openSurfaces) {
-    if (other !== menu && other.ownerDocument === menu.ownerDocument) closeSurface(other);
-  }
-
-  const anchor = opts.trigger || opts.source || null;
-  mountSurface(menu, anchor);
   prepareSurface(menu);
   const state = ensureSurfaceWired(menu);
   state.trigger = opts.trigger || null;
   state.source = opts.source || null;
   state.point =
     Number.isFinite(opts.x) && Number.isFinite(opts.y) ? { x: opts.x, y: opts.y } : null;
-  state.mobile = opts.mobile || "auto";
-  state.breakpoint = opts.breakpoint ?? 768;
   state.autoClose = normalizeAutoClose(opts.autoClose);
   state.dismissOnScroll = opts.dismissOnScroll === true;
   state.scrollIntentAt = null;
@@ -309,11 +268,18 @@ export function openSurface(menu, opts = {}) {
   state.shiftPadding = opts.shiftPadding ?? 4;
   state.scope = opts.scope;
   state.restoreFocusTo = opts.restoreFocusTo || opts.trigger || opts.source || null;
-  state.closeId++;
 
+  // Points are client coordinates and therefore always viewport-relative.
+  // Element anchors choose their coupled coordinate/CSS mode once per open;
+  // in particular, a sticky anchor must not switch modes while scrolling.
+  const positionAnchor = state.point ? null : state.trigger || state.source;
+  const mode = positionModeFor(positionAnchor);
+  state.coordinateSpace = mode.space;
+  menu.style.position = mode.position;
+
+  // Promote before measuring: a closed popover has no box to position.
+  if (!showTransport(menu)) return false;
   menu.classList.add(CLASSES.open);
-  menu.hidden = false;
-  applyPresentation(menu, state);
   syncExpanded(menu, true);
 
   if (!positionSurface(menu)) {
@@ -321,6 +287,33 @@ export function openSurface(menu, opts = {}) {
     return false;
   }
 
+  /*
+   * Surfaces are mutually exclusive per document, including when one contains
+   * the other's trigger. That is a deliberate contract, not a missing feature:
+   * making this loop ancestor-aware is most of a nesting implementation but
+   * not all of it. The platform closes a popover with display: none, and what
+   * that does to a descendant surface already in the top layer is unmeasured —
+   * nothing here cascades a close, so a live Escape entry and position tracker
+   * outliving their panel is the expected failure. Measure before relaxing it.
+   *
+   * The others come down only once this one is up and placed. With
+   * popover="manual" nothing requires the old surface to leave the top layer
+   * before the new one enters it, so there is no reason to spend it before
+   * knowing the open will succeed — a detached anchor or a positioner failure
+   * used to dismiss the current menu and then open nothing.
+   *
+   * restoreFocus: false because these are superseded, not dismissed. Restoring
+   * would bounce focus through the outgoing trigger on the way to the new
+   * surface, firing focusin on a control the user has just navigated away
+   * from; placing focus in the new surface is the caller's job, and both
+   * callers in tree do it as soon as this returns.
+   */
+  for (const other of openSurfaces) {
+    if (other !== menu && other.ownerDocument === menu.ownerDocument) {
+      closeSurface(other, { restoreFocus: false });
+    }
+  }
+
   openSurfaces.add(menu);
   startSurfaceResources(menu, state);
   return true;
@@ -330,17 +323,10 @@ export function closeSurface(menu, opts = {}) {
   if (!menu || !isSurfaceOpen(menu)) return;
 
   const state = surfaceMap.get(menu);
-  const closeId = state ? ++state.closeId : 0;
-  const wasSheet = state?.isSheet === true;
   const activeElement = menu.ownerDocument.activeElement;
   const shouldRestoreFocus = opts.restoreFocus ?? menu.contains(activeElement);
   menu.classList.remove(CLASSES.open);
-  if (!wasSheet) {
-    menu.classList.remove(CLASSES.sheet);
-  }
-  menu.hidden = true;
-  const backdrop = state?.backdrop || null;
-  if (backdrop) backdrop.hidden = true;
+  hideTransport(menu);
   openSurfaces.delete(menu);
   syncExpanded(menu, false);
   state?.unregisterEscape?.();
@@ -350,30 +336,18 @@ export function closeSurface(menu, opts = {}) {
   if (shouldRestoreFocus && state?.restoreFocusTo?.isConnected) {
     state.restoreFocusTo.focus({ preventScroll: true });
   }
-
-  waitForTransitions(menu, backdrop).then(() => {
-    if (!state || state.closeId !== closeId) return;
-    state.isSheet = false;
-    menu.classList.remove(CLASSES.sheet);
-    backdrop?.remove();
-    if (state.backdrop === backdrop) state.backdrop = null;
-    restoreSurface(menu);
-  });
 }
 
-export function disconnectSurface(menu, { restore = true } = {}) {
+export function disconnectSurface(menu) {
   if (!menu) return;
-  if (!restore) mountedSurfaces.delete(menu);
   closeSurface(menu);
   const state = surfaceMap.get(menu);
   if (state) {
-    state.backdrop?.remove();
     state.unregisterEscape?.();
     state.stopScrollIntent?.();
     state.stopTracking?.();
     surfaceMap.delete(menu);
   }
-  restoreSurface(menu);
 }
 
 function onDocumentClick(e) {

package/src/js/tab.js

@@ -8,6 +8,7 @@
  * Keyboard:  ArrowLeft/Right, Home/End (select tab, wrapping)
  *            ArrowUp/Down for aria-orientation="vertical"
  *            ArrowDown (focus selected panel)
+ *            [hidden], disabled and panel-less tabs are skipped
  *
  * Self-registers via registerEnhancement: injected tablists wire automatically.
  * The tab→panel map is rebuilt from the live tablist on each interaction,
@@ -47,8 +48,12 @@ function isTabDisabled(tab) {
   return tab.disabled || tab.getAttribute("aria-disabled") === "true";
 }
 
+/* A [hidden] tab is not on screen, so it must not be a keyboard stop either:
+   an application that filters a tab strip would otherwise leave the hidden
+   tabs in the arrow-key sequence, selecting a panel whose tab is invisible.
+   Rebuilding from the live tablist is not enough — live is not visible. */
 function activatableTabs(list) {
-  return tabsOf(list).filter((tab) => !isTabDisabled(tab) && panelFor(tab));
+  return tabsOf(list).filter((tab) => !tab.hidden && !isTabDisabled(tab) && panelFor(tab));
 }
 
 function makePanelFocusable(panel) {