@jsenv/navi 0.29.307 → 0.29.309

package/dist/dev/jsenv_navi.js

@@ -10451,6 +10451,42 @@ const readNumberFromDom = (element, attribute, defaultValue) => {
   return value;
 };
 
+/**
+ * Where a press really landed, for an element reading a gesture out of it.
+ *
+ * A popup is painted OVER the page and stays a DOM descendant of whatever it
+ * was written in — a dialog inside the card that opens it, a callout beside the
+ * button it belongs to. Its pointer events therefore bubble through boxes it
+ * covers, and a box reading a gesture off one of them answers for something
+ * nobody aimed at it: a finger held in a sheet opening the card underneath the
+ * sheet, a card the sheet is drawn from and that the finger cannot even reach.
+ *
+ * The same list, read for the same reason, as the drag sources in @jsenv/dom
+ * (see DRAG_IGNORED_SELECTOR in drag_to.js) and as the selection rule in
+ * interaction_press.js: a layer over the element (`[popover]`, `dialog`), and
+ * something saying its press is its own business (`data-drag-ignore`, which is
+ * what a popup outside the top layer says for itself).
+ */
+
+const LAYER_OVER_SELECTOR = "[data-drag-ignore],[popover],dialog";
+
+/**
+ * The nearest word wins: a layer INSIDE the element takes the press away from
+ * it, one AROUND it does not — an element that IS the dialog, or that sits in
+ * one, goes on answering its own presses.
+ *
+ * @param {EventTarget} target Where the event says the press landed.
+ * @param {Element} element The element reading a gesture out of that press.
+ * @returns {boolean}
+ */
+const isPressOnLayerOver = (target, element) => {
+  if (!target || typeof target.closest !== "function") {
+    return false;
+  }
+  const layer = target.closest(LAYER_OVER_SELECTOR);
+  return Boolean(layer) && !layer.contains(element);
+};
+
 /**
  * The interactions the browser already has an event for.
  *
@@ -10469,6 +10505,11 @@ const readNumberFromDom = (element, attribute, defaultValue) => {
  * refuses what is already `defaultPrevented`. Cancelling first would therefore
  * make the interaction refuse itself, and no right click could ever get through.
  * So: ask, and only cover the browser's menu once something answered.
+ *
+ * They are read off the element and not off whatever bubbles to it: a popup is
+ * a DOM descendant of what it was opened from, so a right click in a sheet
+ * reaches the card the sheet was drawn from, and answering it there answers a
+ * request nobody made (see isPressOnLayerOver).
  */
 
 
@@ -10485,6 +10526,9 @@ defineInteractionDetector({
   setup: (element, trigger, { types }) => {
     const listeners = types.map((type) => {
       const listener = (nativeEvent) => {
+        if (isPressOnLayerOver(nativeEvent.target, element)) {
+          return;
+        }
         const performed = trigger(type, nativeEvent);
         if (type === "contextmenu" && performed) {
           // Something answered the request, so the browser's own menu would only
@@ -10777,6 +10821,11 @@ defineInteractionDetector({
       if (pointerDownEvent.button !== 0) {
         return;
       }
+      // A press aimed at a layer over this element, merely bubbling through it
+      // — the same layers the stylesheet above hands the selection back to.
+      if (isPressOnLayerOver(pointerDownEvent.target, element)) {
+        return;
+      }
       let swipe = null;
       let press = null;
       // Set below, with the hold; a no-op until then so the swipe can call it.
@@ -40670,7 +40719,15 @@ const LoadingRectangleSvg = ({
   strokeWidth,
   networkSpeed: networkSpeedForced
 }) => {
-  const margin = Math.max(2, Math.min(width, height) * 0.03);
+  // The stroke is centered on the path, so half of it falls outside: drawing
+  // at half the stroke width puts its outer edge exactly on the box, whatever
+  // the box. It used to be a share of the smaller dimension (3%, floored at
+  // 2px), which held the line further and further inside as the box grew — a
+  // caller placing the outline with `inset` got the distance it asked for on a
+  // field and something several pixels inward on a card. Nothing needs the
+  // extra room: the svg is `overflow: visible` and whoever positions the
+  // wrapper already reserves the half stroke.
+  const margin = strokeWidth / 2;
 
   // Calculate the drawable area
   const drawableWidth = width - margin * 2;