@jsenv/dom 0.10.3 → 0.10.5

package/dist/jsenv_dom.js

@@ -5419,6 +5419,31 @@ const getScrollContainerSet = (element) => {
   return scrollContainerSet;
 };
 
+/**
+ * Rounds a CSS pixel value to the nearest physical pixel boundary for the current display.
+ *
+ * At zoom levels other than 100%, `devicePixelRatio` is not an integer (e.g. 1.25, 1.5),
+ * so fractional CSS pixel values from `getBoundingClientRect()` may not align to the physical
+ * pixel grid. Setting `top`/`left` to such values causes the browser to interpolate across
+ * pixels, resulting in blurry rendering or misalignment with adjacent elements.
+ *
+ * Snapping to the physical grid ensures the value falls exactly on a pixel boundary.
+ *
+ * @param {number} value - A CSS pixel value (e.g. from getBoundingClientRect or scroll offset).
+ * @returns {number} The nearest physical-pixel-aligned CSS pixel value.
+ * @example
+ * // At devicePixelRatio 1.25, snapToPixel(154.4) → 154.4 (already on grid)
+ * // At devicePixelRatio 1.25, snapToPixel(154.3) → 154.4
+ */
+const snapToPixel = (value) => {
+  return Math.round(value * devicePixelRatio) / devicePixelRatio;
+};
+
+// Round a CSS-pixel value to the nearest physical pixel boundary.
+// At zoom levels other than 100%, devicePixelRatio is not an integer (e.g. 1.25, 1.5),
+// so CSS pixels don't align 1:1 with physical pixels. Rounding to the physical grid
+// ensures the browser can render the element without sub-pixel blurring.
+
 const getBorderSizes = (element) => {
   const {
     borderLeftWidth,
@@ -5426,11 +5451,12 @@ const getBorderSizes = (element) => {
     borderTopWidth,
     borderBottomWidth,
   } = window.getComputedStyle(element, null);
+
   return {
-    left: parseFloat(borderLeftWidth),
-    right: parseFloat(borderRightWidth),
-    top: parseFloat(borderTopWidth),
-    bottom: parseFloat(borderBottomWidth),
+    left: snapToPixel(parseFloat(borderLeftWidth)),
+    right: snapToPixel(parseFloat(borderRightWidth)),
+    top: snapToPixel(parseFloat(borderTopWidth)),
+    bottom: snapToPixel(parseFloat(borderBottomWidth)),
   };
 };
 
@@ -5782,8 +5808,8 @@ const measureScrollbar = (scrollableElement) => {
   const scrollbarHeight = scrollDiv.offsetHeight - scrollDiv.clientHeight;
   scrollableElement.removeChild(scrollDiv);
   return [
-    hasXScrollbar ? scrollbarWidth : 0,
-    hasYScrollbar ? scrollbarHeight : 0,
+    hasXScrollbar ? snapToPixel(scrollbarWidth) : 0,
+    hasYScrollbar ? snapToPixel(scrollbarHeight) : 0,
   ];
 };
 
@@ -6096,6 +6122,18 @@ const scrollIntoViewWithStickyAwareness = (
   }
 };
 
+const getPaddingSizes = (element) => {
+  const { paddingLeft, paddingRight, paddingTop, paddingBottom } =
+    window.getComputedStyle(element, null);
+
+  return {
+    left: snapToPixel(parseFloat(paddingLeft)),
+    right: snapToPixel(parseFloat(paddingRight)),
+    top: snapToPixel(parseFloat(paddingTop)),
+    bottom: snapToPixel(parseFloat(paddingBottom)),
+  };
+};
+
 /**
  * Prevents scrolling on all scrollable containers that are ancestors of (or
  * siblings preceding) `element`. Used when an overlay (popover, dialog) is
@@ -6132,11 +6170,10 @@ const trapScrollInside = (element) => {
       return;
     }
     const [scrollbarWidth, scrollbarHeight] = measureScrollbar(el);
-    const paddingRight = parseInt(getStyle(el, "padding-right"), 0);
-    const paddingBottom = parseInt(getStyle(el, "padding-bottom"), 0);
+    const { right, bottom } = getPaddingSizes(el);
     const removeScrollLockStyles = setStyles(el, {
-      "padding-right": `${paddingRight + scrollbarWidth}px`,
-      "padding-bottom": `${paddingBottom + scrollbarHeight}px`,
+      "padding-right": `${right + scrollbarWidth}px`,
+      "padding-bottom": `${bottom + scrollbarHeight}px`,
       "overflow": "hidden",
     });
     cleanupCallbackSet.add(removeScrollLockStyles);
@@ -6919,6 +6956,13 @@ installImportMetaCssBuild(import.meta);/**
  * donc juste x/y ca seras surement mieux
  *
  */
+const css$3 = /* css */`
+  .navi_drag_gesture_backdrop {
+    position: fixed;
+    inset: 0;
+    user-select: none;
+  }
+`;
 const createDragGestureController = (options = {}) => {
   const {
     name,
@@ -7065,6 +7109,7 @@ const createDragGestureController = (options = {}) => {
 
       // 2. VISUAL CONTROL: Backdrop for consistent cursor and pointer event blocking
       if (backdrop) {
+        import.meta.css = [css$3, "@jsenv/dom/src/interaction/drag/drag_gesture.js"];
         const backdropElement = document.createElement("div");
         backdropElement.className = "navi_drag_gesture_backdrop";
         backdropElement.ariaHidden = "true";
@@ -7421,15 +7466,24 @@ const definePropertyAsReadOnly = (object, propertyName) => {
     value: object[propertyName]
   });
 };
-import.meta.css = [/* css */`
-  .navi_drag_gesture_backdrop {
+
+installImportMetaCssBuild(import.meta);const css$2 = /* css */`
+  .navi_constraint_feedback_line {
     position: fixed;
-    inset: 0;
-    user-select: none;
+    z-index: 9998;
+    border-top: 2px dotted rgba(59, 130, 246, 0.7);
+    visibility: hidden;
+    transform-origin: left center;
+    transition: opacity 0.15s ease;
+    pointer-events: none;
   }
-`, "@jsenv/dom/src/interaction/drag/drag_gesture.js"];
 
-installImportMetaCssBuild(import.meta);const setupConstraintFeedbackLine = () => {
+  .navi_constraint_feedback_line[data-visible] {
+    visibility: visible;
+  }
+`;
+const setupConstraintFeedbackLine = () => {
+  import.meta.css = [css$2, "@jsenv/dom/src/interaction/drag/constraint_feedback_line.js"];
   const constraintFeedbackLine = createConstraintFeedbackLine();
 
   // Track last known mouse position for constraint feedback line during scroll
@@ -7502,21 +7556,6 @@ const createConstraintFeedbackLine = () => {
   document.body.appendChild(line);
   return line;
 };
-import.meta.css = [/* css */`
-  .navi_constraint_feedback_line {
-    position: fixed;
-    z-index: 9998;
-    border-top: 2px dotted rgba(59, 130, 246, 0.7);
-    visibility: hidden;
-    transform-origin: left center;
-    transition: opacity 0.15s ease;
-    pointer-events: none;
-  }
-
-  .navi_constraint_feedback_line[data-visible] {
-    visibility: visible;
-  }
-`, "@jsenv/dom/src/interaction/drag/constraint_feedback_line.js"];
 
 installImportMetaCssBuild(import.meta);// Keep visual markers (debug markers, obstacle markers, constraint feedback line) in DOM after drag ends
 const MARKER_SIZE = 12;
@@ -7524,9 +7563,197 @@ let currentDebugMarkers = [];
 let currentConstraintMarkers = [];
 let currentReferenceElementMarker = null;
 let currentElementMarker = null;
+const css$1 = /* css */`
+  .navi_debug_markers_container {
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 999998;
+    width: 100vw;
+    height: 100vh;
+    pointer-events: none;
+    overflow: hidden;
+    --marker-size: ${MARKER_SIZE}px;
+  }
+
+  .navi_debug_marker {
+    position: absolute;
+    pointer-events: none;
+  }
+
+  /* Markers based on side rather than orientation */
+  .navi_debug_marker[data-left],
+  .navi_debug_marker[data-right] {
+    width: var(--marker-size);
+    height: 100vh;
+  }
+
+  .navi_debug_marker[data-top],
+  .navi_debug_marker[data-bottom] {
+    width: 100vw;
+    height: var(--marker-size);
+  }
+
+  /* Gradient directions based on side, using CSS custom properties for color */
+  .navi_debug_marker[data-left] {
+    background: linear-gradient(
+      to right,
+      rgba(from var(--marker-color) r g b / 0.9) 0%,
+      rgba(from var(--marker-color) r g b / 0.7) 30%,
+      rgba(from var(--marker-color) r g b / 0.3) 70%,
+      rgba(from var(--marker-color) r g b / 0) 100%
+    );
+  }
+
+  .navi_debug_marker[data-right] {
+    background: linear-gradient(
+      to left,
+      rgba(from var(--marker-color) r g b / 0.9) 0%,
+      rgba(from var(--marker-color) r g b / 0.7) 30%,
+      rgba(from var(--marker-color) r g b / 0.3) 70%,
+      rgba(from var(--marker-color) r g b / 0) 100%
+    );
+  }
+
+  .navi_debug_marker[data-top] {
+    background: linear-gradient(
+      to bottom,
+      rgba(from var(--marker-color) r g b / 0.9) 0%,
+      rgba(from var(--marker-color) r g b / 0.7) 30%,
+      rgba(from var(--marker-color) r g b / 0.3) 70%,
+      rgba(from var(--marker-color) r g b / 0) 100%
+    );
+  }
+
+  .navi_debug_marker[data-bottom] {
+    background: linear-gradient(
+      to top,
+      rgba(from var(--marker-color) r g b / 0.9) 0%,
+      rgba(from var(--marker-color) r g b / 0.7) 30%,
+      rgba(from var(--marker-color) r g b / 0.3) 70%,
+      rgba(from var(--marker-color) r g b / 0) 100%
+    );
+  }
+
+  .navi_debug_marker_label {
+    position: absolute;
+    padding: 2px 6px;
+    color: rgb(from var(--marker-color) r g b / 1);
+    font-weight: bold;
+    font-size: 12px;
+    white-space: nowrap;
+    background: rgba(255, 255, 255, 0.9);
+    border: 1px solid;
+    border-color: rgb(from var(--marker-color) r g b / 1);
+    border-radius: 3px;
+    pointer-events: none;
+  }
+
+  /* Label positioning based on side data attributes */
+
+  /* Left side markers - vertical with 90° rotation */
+  .navi_debug_marker[data-left] .navi_debug_marker_label {
+    top: 20px;
+    left: 10px;
+    transform: rotate(90deg);
+    transform-origin: left center;
+  }
+
+  /* Right side markers - vertical with -90° rotation */
+  .navi_debug_marker[data-right] .navi_debug_marker_label {
+    top: 20px;
+    right: 10px;
+    left: auto;
+    transform: rotate(-90deg);
+    transform-origin: right center;
+  }
+
+  /* Top side markers - horizontal, label on the line */
+  .navi_debug_marker[data-top] .navi_debug_marker_label {
+    top: 0px;
+    left: 20px;
+  }
+
+  /* Bottom side markers - horizontal, label on the line */
+  .navi_debug_marker[data-bottom] .navi_debug_marker_label {
+    top: auto;
+    bottom: 0px;
+    left: 20px;
+  }
+
+  .navi_obstacle_marker {
+    position: absolute;
+    z-index: 9999;
+    background-color: orange;
+    opacity: 0.6;
+    pointer-events: none;
+  }
+
+  .navi_obstacle_marker_label {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    color: white;
+    font-weight: bold;
+    font-size: 12px;
+    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8);
+    transform: translate(-50%, -50%);
+    pointer-events: none;
+  }
+
+  .navi_element_marker {
+    position: absolute;
+    z-index: 9997;
+    background-color: var(--element-color-alpha, rgba(255, 0, 150, 0.3));
+    border: 2px solid var(--element-color, rgb(255, 0, 150));
+    opacity: 0.9;
+    pointer-events: none;
+  }
+
+  .navi_element_marker_label {
+    position: absolute;
+    top: -25px;
+    right: 0;
+    padding: 2px 6px;
+    color: var(--element-color, rgb(255, 0, 150));
+    font-weight: bold;
+    font-size: 11px;
+    white-space: nowrap;
+    background: rgba(255, 255, 255, 0.9);
+    border: 1px solid var(--element-color, rgb(255, 0, 150));
+    border-radius: 3px;
+    pointer-events: none;
+  }
+
+  .navi_reference_element_marker {
+    position: absolute;
+    z-index: 9998;
+    background-color: rgba(0, 150, 255, 0.3);
+    border: 2px dashed rgba(0, 150, 255, 0.7);
+    opacity: 0.8;
+    pointer-events: none;
+  }
+
+  .navi_reference_element_marker_label {
+    position: absolute;
+    top: -25px;
+    left: 0;
+    padding: 2px 6px;
+    color: rgba(0, 150, 255, 1);
+    font-weight: bold;
+    font-size: 11px;
+    white-space: nowrap;
+    background: rgba(255, 255, 255, 0.9);
+    border: 1px solid rgba(0, 150, 255, 0.7);
+    border-radius: 3px;
+    pointer-events: none;
+  }
+`;
 const setupDragDebugMarkers = (dragGesture, {
   referenceElement
 }) => {
+  import.meta.css = [css$1, "@jsenv/dom/src/interaction/drag/drag_debug_markers.js"];
+
   // Clean up any existing persistent markers from previous drag gestures
   {
     // Remove any existing markers from previous gestures
@@ -7913,192 +8140,6 @@ const createReferenceElementMarker = ({
   container.appendChild(marker);
   return marker;
 };
-import.meta.css = [/* css */`
-  .navi_debug_markers_container {
-    position: fixed;
-    top: 0;
-    left: 0;
-    z-index: 999998;
-    width: 100vw;
-    height: 100vh;
-    pointer-events: none;
-    overflow: hidden;
-    --marker-size: ${MARKER_SIZE}px;
-  }
-
-  .navi_debug_marker {
-    position: absolute;
-    pointer-events: none;
-  }
-
-  /* Markers based on side rather than orientation */
-  .navi_debug_marker[data-left],
-  .navi_debug_marker[data-right] {
-    width: var(--marker-size);
-    height: 100vh;
-  }
-
-  .navi_debug_marker[data-top],
-  .navi_debug_marker[data-bottom] {
-    width: 100vw;
-    height: var(--marker-size);
-  }
-
-  /* Gradient directions based on side, using CSS custom properties for color */
-  .navi_debug_marker[data-left] {
-    background: linear-gradient(
-      to right,
-      rgba(from var(--marker-color) r g b / 0.9) 0%,
-      rgba(from var(--marker-color) r g b / 0.7) 30%,
-      rgba(from var(--marker-color) r g b / 0.3) 70%,
-      rgba(from var(--marker-color) r g b / 0) 100%
-    );
-  }
-
-  .navi_debug_marker[data-right] {
-    background: linear-gradient(
-      to left,
-      rgba(from var(--marker-color) r g b / 0.9) 0%,
-      rgba(from var(--marker-color) r g b / 0.7) 30%,
-      rgba(from var(--marker-color) r g b / 0.3) 70%,
-      rgba(from var(--marker-color) r g b / 0) 100%
-    );
-  }
-
-  .navi_debug_marker[data-top] {
-    background: linear-gradient(
-      to bottom,
-      rgba(from var(--marker-color) r g b / 0.9) 0%,
-      rgba(from var(--marker-color) r g b / 0.7) 30%,
-      rgba(from var(--marker-color) r g b / 0.3) 70%,
-      rgba(from var(--marker-color) r g b / 0) 100%
-    );
-  }
-
-  .navi_debug_marker[data-bottom] {
-    background: linear-gradient(
-      to top,
-      rgba(from var(--marker-color) r g b / 0.9) 0%,
-      rgba(from var(--marker-color) r g b / 0.7) 30%,
-      rgba(from var(--marker-color) r g b / 0.3) 70%,
-      rgba(from var(--marker-color) r g b / 0) 100%
-    );
-  }
-
-  .navi_debug_marker_label {
-    position: absolute;
-    padding: 2px 6px;
-    color: rgb(from var(--marker-color) r g b / 1);
-    font-weight: bold;
-    font-size: 12px;
-    white-space: nowrap;
-    background: rgba(255, 255, 255, 0.9);
-    border: 1px solid;
-    border-color: rgb(from var(--marker-color) r g b / 1);
-    border-radius: 3px;
-    pointer-events: none;
-  }
-
-  /* Label positioning based on side data attributes */
-
-  /* Left side markers - vertical with 90° rotation */
-  .navi_debug_marker[data-left] .navi_debug_marker_label {
-    top: 20px;
-    left: 10px;
-    transform: rotate(90deg);
-    transform-origin: left center;
-  }
-
-  /* Right side markers - vertical with -90° rotation */
-  .navi_debug_marker[data-right] .navi_debug_marker_label {
-    top: 20px;
-    right: 10px;
-    left: auto;
-    transform: rotate(-90deg);
-    transform-origin: right center;
-  }
-
-  /* Top side markers - horizontal, label on the line */
-  .navi_debug_marker[data-top] .navi_debug_marker_label {
-    top: 0px;
-    left: 20px;
-  }
-
-  /* Bottom side markers - horizontal, label on the line */
-  .navi_debug_marker[data-bottom] .navi_debug_marker_label {
-    top: auto;
-    bottom: 0px;
-    left: 20px;
-  }
-
-  .navi_obstacle_marker {
-    position: absolute;
-    z-index: 9999;
-    background-color: orange;
-    opacity: 0.6;
-    pointer-events: none;
-  }
-
-  .navi_obstacle_marker_label {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    color: white;
-    font-weight: bold;
-    font-size: 12px;
-    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8);
-    transform: translate(-50%, -50%);
-    pointer-events: none;
-  }
-
-  .navi_element_marker {
-    position: absolute;
-    z-index: 9997;
-    background-color: var(--element-color-alpha, rgba(255, 0, 150, 0.3));
-    border: 2px solid var(--element-color, rgb(255, 0, 150));
-    opacity: 0.9;
-    pointer-events: none;
-  }
-
-  .navi_element_marker_label {
-    position: absolute;
-    top: -25px;
-    right: 0;
-    padding: 2px 6px;
-    color: var(--element-color, rgb(255, 0, 150));
-    font-weight: bold;
-    font-size: 11px;
-    white-space: nowrap;
-    background: rgba(255, 255, 255, 0.9);
-    border: 1px solid var(--element-color, rgb(255, 0, 150));
-    border-radius: 3px;
-    pointer-events: none;
-  }
-
-  .navi_reference_element_marker {
-    position: absolute;
-    z-index: 9998;
-    background-color: rgba(0, 150, 255, 0.3);
-    border: 2px dashed rgba(0, 150, 255, 0.7);
-    opacity: 0.8;
-    pointer-events: none;
-  }
-
-  .navi_reference_element_marker_label {
-    position: absolute;
-    top: -25px;
-    left: 0;
-    padding: 2px 6px;
-    color: rgba(0, 150, 255, 1);
-    font-weight: bold;
-    font-size: 11px;
-    white-space: nowrap;
-    background: rgba(255, 255, 255, 0.9);
-    border: 1px solid rgba(0, 150, 255, 0.7);
-    border-radius: 3px;
-    pointer-events: none;
-  }
-`, "@jsenv/dom/src/interaction/drag/drag_debug_markers.js"];
 
 const initDragConstraints = (
   dragGesture,
@@ -8730,6 +8771,7 @@ const createStickyFrontierOnAxis = (
 const dragStyleController = createStyleController("drag_to_move");
 
 const createDragToMoveGestureController = ({
+  cloneOnDrag = false,
   stickyFrontiers = true,
   // Padding to reduce the area used to autoscroll by this amount (applied after sticky frontiers)
   // This creates an invisible space around the area where elements cannot be dragged
@@ -8743,8 +8785,8 @@ const createDragToMoveGestureController = ({
   // position due to obstacles, boundaries, or other constraints. The line originates from where the mouse
   // initially grabbed the element, but moves with the element to show the current anchor position.
   // It becomes visible when there's a significant distance between mouse and grab point.
-  showConstraintFeedbackLine = true,
-  showDebugMarkers = true,
+  showConstraintFeedbackLine = false,
+  showDebugMarkers = false,
   resetPositionAfterRelease = false,
   ...options
 } = {}) => {
@@ -8752,6 +8794,18 @@ const createDragToMoveGestureController = ({
     dragGesture,
     { element, referenceElement, elementToMove, convertScrollablePosition },
   ) => {
+    if (cloneOnDrag) {
+      const { grabEvent } = dragGesture.gestureInfo;
+      const ghostData = createDragGhost(element, {
+        clientX: grabEvent.clientX,
+        clientY: grabEvent.clientY,
+      });
+      elementToMove = ghostData.ghostWrapper;
+      dragGesture.gestureInfo.elementImpacted = ghostData.ghostWrapper;
+      dragGesture.addReleaseCallback(() => {
+        ghostData.remove();
+      });
+    }
     const direction = dragGesture.gestureInfo.direction;
     // const dragGestureName = dragGesture.gestureInfo.name;
     const scrollContainer = dragGesture.gestureInfo.scrollContainer;
@@ -9021,6 +9075,31 @@ const createDragToMoveGestureController = ({
   return dragGestureController;
 };
 
+const createDragGhost = (element, pointerEvent) => {
+  const rect = element.getBoundingClientRect();
+
+  const ghost = element.cloneNode(true);
+  ghost.dataset.dragging = "";
+  ghost.style.pointerEvents = "none";
+  // transform-origin set to pointer position within the element for natural scale expansion
+  const originX = pointerEvent.clientX - rect.left;
+  const originY = pointerEvent.clientY - rect.top;
+  ghost.style.transformOrigin = `${originX}px ${originY}px`;
+
+  const ghostWrapper = document.createElement("div");
+  ghostWrapper.style.cssText = `position: absolute; pointer-events: none; z-index: 9999; top: ${rect.top + window.scrollY}px; left: ${rect.left + window.scrollX}px; width: ${rect.width}px;`;
+  ghostWrapper.appendChild(ghost);
+  document.body.appendChild(ghostWrapper);
+
+  return {
+    ghost,
+    ghostWrapper,
+    remove: () => {
+      ghostWrapper.remove();
+    },
+  };
+};
+
 const startDragToResizeGesture = (
   pointerdownEvent,
   { onDragStart, onDrag, onRelease, ...options },
@@ -9096,7 +9175,7 @@ const getResizeDirection = (element) => {
  * @returns {Object|null} Drop target info with elementSide or null if no valid target found
  */
 const getDropTargetInfo = (gestureInfo, targetElements) => {
-  const dragElement = gestureInfo.element;
+  const dragElement = gestureInfo.elementImpacted || gestureInfo.element;
   const dragElementRect = dragElement.getBoundingClientRect();
   const intersectingTargets = [];
   let someTargetIsCol;
@@ -9141,12 +9220,13 @@ const getDropTargetInfo = (gestureInfo, targetElements) => {
   const elementsUnderDragElement = document.elementsFromPoint(clientX, clientY);
   let targetElement = null;
   let targetIndex = -1;
+  let intersectingIndex = -1;
   for (const element of elementsUnderDragElement) {
     // First, check if the element itself is a target
     const directIndex = intersectingTargets.indexOf(element);
     if (directIndex !== -1) {
       targetElement = element;
-      targetIndex = directIndex;
+      intersectingIndex = directIndex;
       break;
     }
     // Special case: if element is <td> or <th> and not in targets,
@@ -9167,7 +9247,7 @@ const getDropTargetInfo = (gestureInfo, targetElements) => {
         break try_col;
       }
       targetElement = tableCellCol;
-      targetIndex = colIndex;
+      intersectingIndex = colIndex;
       break;
     }
     try_tr: {
@@ -9180,26 +9260,31 @@ const getDropTargetInfo = (gestureInfo, targetElements) => {
         break try_tr;
       }
       targetElement = tableRow;
-      targetIndex = rowIndex;
+      intersectingIndex = intersectingTargets.indexOf(tableRow);
       break;
     }
   }
   if (!targetElement) {
     targetElement = intersectingTargets[0];
-    targetIndex = 0;
+    intersectingIndex = 0;
   }
+  targetIndex = targetElements.indexOf(targetElement);
 
   // Determine position within the target for both axes
   const targetRect = targetElement.getBoundingClientRect();
   const targetCenterX = targetRect.left + targetRect.width / 2;
   const targetCenterY = targetRect.top + targetRect.height / 2;
   const result = {
+    // Index of the target element within the original targetElements array
     index: targetIndex,
     element: targetElement,
     elementSide: {
       x: dragElementRect.left < targetCenterX ? "start" : "end",
       y: dragElementRect.top < targetCenterY ? "start" : "end",
     },
+    // Index within the intersecting subset — could be useful to know how many
+    // elements were overlapping, but rarely needed in practice
+    intersectingIndex,
     intersecting: intersectingTargets,
   };
   return result;
@@ -9284,15 +9369,16 @@ installImportMetaCssBuild(import.meta);/**
  *
  * The element should have a CSS "top" value specified (e.g., top: 10px).
  */
-import.meta.css = [/* css */`
+const css = /* css */`
   [data-position-sticky-placeholder] {
     position: static !important;
     width: auto !important;
     height: auto !important;
     opacity: 0 !important;
   }
-`, "@jsenv/dom/src/position/position_sticky.js"];
+`;
 const initPositionSticky = element => {
+  import.meta.css = [css, "@jsenv/dom/src/position/position_sticky.js"];
   const computedStyle = getComputedStyle(element);
   const topCssValue = computedStyle.top;
   const top = parseFloat(topCssValue);
@@ -9930,6 +10016,8 @@ const pickPositionRelativeTo = (
     positionYFixed,
     alignToViewportEdgeWhenAnchorNearEdge = 0,
     minLeft = 0,
+    spacing = 0,
+    viewportSpacing = 0,
   } = {},
 ) => {
 
@@ -9944,12 +10032,10 @@ const pickPositionRelativeTo = (
     top: elementTop,
     bottom: elementBottom,
   } = elementRect;
-  const {
-    left: anchorLeft,
-    right: anchorRight,
-    top: anchorTop,
-    bottom: anchorBottom,
-  } = anchorRect;
+  const anchorLeft = snapToPixel(anchorRect.left);
+  const anchorTop = snapToPixel(anchorRect.top);
+  const anchorRight = snapToPixel(anchorRect.right);
+  const anchorBottom = snapToPixel(anchorRect.bottom);
   const elementWidth = elementRight - elementLeft;
   const elementHeight = elementBottom - elementTop;
   const anchorWidth = anchorRight - anchorLeft;
@@ -9992,16 +10078,16 @@ const pickPositionRelativeTo = (
     // Compute effective space for a given Y value
     const spaceFor = (y) => {
       if (y === "above") {
-        return spaceAbove;
+        return spaceAbove - spacing - viewportSpacing;
       }
       if (y === "above-overlap") {
-        return spaceAbove + anchorHeight;
+        return spaceAbove + anchorHeight - viewportSpacing;
       }
       if (y === "below") {
-        return spaceBelow;
+        return spaceBelow - spacing - viewportSpacing;
       }
       if (y === "below-overlap") {
-        return spaceBelow + anchorHeight;
+        return spaceBelow + anchorHeight - viewportSpacing;
       }
       return Infinity; // center
     };
@@ -10049,16 +10135,16 @@ const pickPositionRelativeTo = (
     // Compute effective space for a given X value
     const spaceFor = (x) => {
       if (x === "to-the-left") {
-        return spaceLeft;
+        return spaceLeft - spacing - viewportSpacing;
       }
       if (x === "left-aligned") {
-        return viewportWidth - anchorLeft;
+        return viewportWidth - anchorLeft - viewportSpacing;
       }
       if (x === "right-aligned") {
-        return anchorRight;
+        return anchorRight - viewportSpacing;
       }
       if (x === "to-the-right") {
-        return spaceRight;
+        return spaceRight - spacing - viewportSpacing;
       }
       return Infinity; // center
     };
@@ -10095,7 +10181,7 @@ const pickPositionRelativeTo = (
   let elementPositionLeft;
   {
     if (finalX === "to-the-left") {
-      elementPositionLeft = anchorLeft - elementWidth;
+      elementPositionLeft = anchorLeft - elementWidth - spacing;
     } else if (finalX === "left-aligned") {
       elementPositionLeft = anchorLeft;
     } else if (finalX === "center") {
@@ -10132,13 +10218,16 @@ const pickPositionRelativeTo = (
       elementPositionLeft = anchorRight - elementWidth;
     } else {
       // "to-the-right"
-      elementPositionLeft = anchorRight;
+      elementPositionLeft = anchorRight + spacing;
     }
-    // Constrain horizontal position to viewport boundaries
-    if (elementPositionLeft < 0) {
-      elementPositionLeft = 0;
-    } else if (elementPositionLeft + elementWidth > viewportWidth) {
-      elementPositionLeft = viewportWidth - elementWidth;
+    // Constrain horizontal position to viewport boundaries (with viewportSpacing margin)
+    if (elementPositionLeft < viewportSpacing) {
+      elementPositionLeft = viewportSpacing;
+    } else if (
+      elementPositionLeft + elementWidth >
+      viewportWidth - viewportSpacing
+    ) {
+      elementPositionLeft = viewportWidth - viewportSpacing - elementWidth;
     }
   }
 
@@ -10146,11 +10235,14 @@ const pickPositionRelativeTo = (
   let elementPositionTop;
   {
     if (finalY === "above") {
-      const idealTop = anchorTop - elementHeight;
-      elementPositionTop = idealTop < 0 ? 0 : idealTop;
+      // top is always anchorTop - elementHeight - spacing — max-height truncates if needed.
+      const idealTop = anchorTop - elementHeight - spacing;
+      elementPositionTop =
+        idealTop < viewportSpacing ? viewportSpacing : idealTop;
     } else if (finalY === "above-overlap") {
       const idealTop = anchorBottom - elementHeight;
-      elementPositionTop = idealTop < 0 ? 0 : idealTop;
+      elementPositionTop =
+        idealTop < viewportSpacing ? viewportSpacing : idealTop;
     } else if (finalY === "center") {
       elementPositionTop = anchorTop + anchorHeight / 2 - elementHeight / 2;
     } else if (finalY === "below-overlap") {
@@ -10159,7 +10251,9 @@ const pickPositionRelativeTo = (
         idealTop % 1 === 0 ? idealTop : Math.floor(idealTop) + 1;
     } else {
       // "below"
-      const idealTop = anchorBottom;
+      // top is always anchorBottom + spacing — max-height (via --space-available) truncates
+      // the element height so it doesn't overflow the viewport bottom.
+      const idealTop = anchorBottom + spacing;
       elementPositionTop =
         idealTop % 1 === 0 ? idealTop : Math.floor(idealTop) + 1;
     }
@@ -10176,13 +10270,26 @@ const pickPositionRelativeTo = (
 
   // Get document scroll for final coordinate conversion
   const { scrollLeft, scrollTop } = document.documentElement;
-  const elementDocumentLeft = elementPositionLeft + scrollLeft;
-  const elementDocumentTop = elementPositionTop + scrollTop;
+  const elementDocumentLeft = snapToPixel(elementPositionLeft + scrollLeft);
+  const elementDocumentTop = snapToPixel(elementPositionTop + scrollTop);
   const anchorDocumentLeft = anchorLeft + scrollLeft;
   const anchorDocumentTop = anchorTop + scrollTop;
   const anchorDocumentRight = anchorRight + scrollLeft;
   const anchorDocumentBottom = anchorBottom + scrollTop;
 
+  // For overlap variants the element starts at the anchor edge (not past it),
+  // so the usable space includes the anchor dimension.
+  // spacing (gap between anchor and element) and viewportSpacing are subtracted
+  // so callers get the net usable space directly.
+  const effectiveSpaceAbove =
+    (finalY === "above-overlap" ? spaceAbove + anchorHeight : spaceAbove) -
+    (finalY === "above" ? spacing : 0) -
+    viewportSpacing;
+  const effectiveSpaceBelow =
+    (finalY === "below-overlap" ? spaceBelow + anchorHeight : spaceBelow) -
+    (finalY === "below" ? spacing : 0) -
+    viewportSpacing;
+
   return {
     positionX: finalX,
     positionY: finalY,
@@ -10194,10 +10301,10 @@ const pickPositionRelativeTo = (
     anchorTop: anchorDocumentTop,
     anchorRight: anchorDocumentRight,
     anchorBottom: anchorDocumentBottom,
-    spaceLeft,
-    spaceRight,
-    spaceAbove,
-    spaceBelow,
+    spaceLeft: spaceLeft - viewportSpacing,
+    spaceRight: spaceRight - viewportSpacing,
+    spaceAbove: effectiveSpaceAbove,
+    spaceBelow: effectiveSpaceBelow,
   };
 };
 
@@ -11973,17 +12080,6 @@ const getWidthWithoutTransition = (element) =>
 const getHeightWithoutTransition = (element) =>
   getHeight$1(element, transitionStyleController);
 
-const getPaddingSizes = (element) => {
-  const { paddingLeft, paddingRight, paddingTop, paddingBottom } =
-    window.getComputedStyle(element, null);
-  return {
-    left: parseFloat(paddingLeft),
-    right: parseFloat(paddingRight),
-    top: parseFloat(paddingTop),
-    bottom: parseFloat(paddingBottom),
-  };
-};
-
 const getInnerHeight = (element) => {
   // Always subtract paddings and borders to get the content height
   const paddingSizes = getPaddingSizes(element);
@@ -13324,4 +13420,4 @@ const useResizeStatus = (elementRef, { as = "number" } = {}) => {
   };
 };
 
-export { EASING, activeElementSignal, addActiveElementEffect, addAttributeEffect, allowWheelThrough, appendStyles, canInterceptKeys, captureScrollState, contrastColor, createBackgroundColorTransition, createBackgroundTransition, createBorderRadiusTransition, createBorderTransition, createDragGestureController, createDragToMoveGestureController, createGroupTransitionController, createHeightTransition, createIterableWeakSet, createOpacityTransition, createPubSub, createStyleController, createTimelineTransition, createTransition, createTranslateXTransition, createValueEffect, createWidthTransition, cubicBezier, dragAfterThreshold, elementIsFocusable, elementIsVisibleForFocus, elementIsVisuallyVisible, findAfter, findAncestor, findBefore, findDescendant, findFocusable, getAvailableHeight, getAvailableWidth, getBackground, getBackgroundColor, getBorder, getBorderRadius, getBorderSizes, getContrastRatio, getDefaultStyles, getDragCoordinates, getDropTargetInfo, getElementSignature, getFirstVisuallyVisibleAncestor, getFocusVisibilityInfo, getHeight, getHeightWithoutTransition, getInnerHeight, getInnerWidth, getLuminance, getMarginSizes, getMaxHeight, getMaxWidth, getMinHeight, getMinWidth, getOpacity, getOpacityWithoutTransition, getPaddingSizes, getPositionedParent, getPreferedColorScheme, getScrollBox, getScrollContainer, getScrollContainerSet, getScrollRelativeRect, getSelfAndAncestorScrolls, getStyle, getTranslateX, getTranslateXWithoutTransition, getTranslateY, getVisuallyVisibleInfo, getWidth, getWidthWithoutTransition, hasCSSSizeUnit, initFlexDetailsSet, initFocusGroup, initPositionSticky, isSameColor, isScrollable, measureScrollbar, mergeOneStyle, mergeTwoStyles, normalizeStyles, parseStyle, pickPositionRelativeTo, prefersDarkColors, prefersLightColors, preventFocusNav, preventFocusNavViaKeyboard, preventIntermediateScrollbar, resolveCSSColor, resolveCSSSize, resolveColorLuminance, resolveOklchLightness, scrollIntoViewScoped, scrollIntoViewWithStickyAwareness, setAttribute, setAttributes, setStyles, startDragToResizeGesture, stickyAsRelativeCoords, stringifyStyle, trapFocusInside, trapScrollInside, useActiveElement, useAvailableHeight, useAvailableWidth, useMaxHeight, useMaxWidth, useResizeStatus, visibleRectEffect };
+export { EASING, activeElementSignal, addActiveElementEffect, addAttributeEffect, allowWheelThrough, appendStyles, canInterceptKeys, captureScrollState, contrastColor, createBackgroundColorTransition, createBackgroundTransition, createBorderRadiusTransition, createBorderTransition, createDragGestureController, createDragToMoveGestureController, createGroupTransitionController, createHeightTransition, createIterableWeakSet, createOpacityTransition, createPubSub, createStyleController, createTimelineTransition, createTransition, createTranslateXTransition, createValueEffect, createWidthTransition, cubicBezier, dragAfterThreshold, elementIsFocusable, elementIsVisibleForFocus, elementIsVisuallyVisible, findAfter, findAncestor, findBefore, findDescendant, findFocusable, getAvailableHeight, getAvailableWidth, getBackground, getBackgroundColor, getBorder, getBorderRadius, getBorderSizes, getContrastRatio, getDefaultStyles, getDragCoordinates, getDropTargetInfo, getElementSignature, getFirstVisuallyVisibleAncestor, getFocusVisibilityInfo, getHeight, getHeightWithoutTransition, getInnerHeight, getInnerWidth, getLuminance, getMarginSizes, getMaxHeight, getMaxWidth, getMinHeight, getMinWidth, getOpacity, getOpacityWithoutTransition, getPaddingSizes, getPositionedParent, getPreferedColorScheme, getScrollBox, getScrollContainer, getScrollContainerSet, getScrollRelativeRect, getSelfAndAncestorScrolls, getStyle, getTranslateX, getTranslateXWithoutTransition, getTranslateY, getVisuallyVisibleInfo, getWidth, getWidthWithoutTransition, hasCSSSizeUnit, initFlexDetailsSet, initFocusGroup, initPositionSticky, isSameColor, isScrollable, measureScrollbar, mergeOneStyle, mergeTwoStyles, normalizeStyle, normalizeStyles, parseStyle, pickPositionRelativeTo, prefersDarkColors, prefersLightColors, preventFocusNav, preventFocusNavViaKeyboard, preventIntermediateScrollbar, resolveCSSColor, resolveCSSSize, resolveColorLuminance, resolveOklchLightness, scrollIntoViewScoped, scrollIntoViewWithStickyAwareness, setAttribute, setAttributes, setStyles, snapToPixel, startDragToResizeGesture, stickyAsRelativeCoords, stringifyStyle, trapFocusInside, trapScrollInside, useActiveElement, useAvailableHeight, useAvailableWidth, useMaxHeight, useMaxWidth, useResizeStatus, visibleRectEffect };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jsenv/dom",
-  "version": "0.10.3",
+  "version": "0.10.5",
   "type": "module",
   "description": "DOM utilities for writing frontend code",
   "repository": {