@jsenv/dom 0.9.1 → 0.9.3

package/dist/jsenv_dom.js

@@ -385,7 +385,8 @@ const areSameRGBA = (first, second) => {
 };
 const resolveCSSColor = (color, element) => {
   const rgba = parseCSSColor(color, element);
-  return stringifyCSSColor(rgba);
+  const colorString = stringifyCSSColor(rgba);
+  return colorString;
 };
 
 /**
@@ -440,12 +441,27 @@ const parseCSSColor = (color, element) => {
     return color;
   }
 
+  // oklab(L a b) and oklab(L a b / alpha)
+  if (color.startsWith("oklab(")) {
+    const oklabMatch = color.match(
+      /^oklab\(\s*([\d.]+)\s+(-?[\d.]+)\s+(-?[\d.]+)(?:\s*\/\s*([\d.]+))?\s*\)$/,
+    );
+    if (oklabMatch) {
+      const L = parseFloat(oklabMatch[1]);
+      const a = parseFloat(oklabMatch[2]);
+      const b = parseFloat(oklabMatch[3]);
+      const alpha = oklabMatch[4] !== undefined ? parseFloat(oklabMatch[4]) : 1;
+      const [r, g, bChannel] = oklabToRgb(L, a, b);
+      return [r, g, bChannel, alpha];
+    }
+    return color;
+  }
+
   // Pass through CSS color functions we don't handle
   if (
     color.startsWith("lch(") ||
     color.startsWith("oklch(") ||
     color.startsWith("lab(") ||
-    color.startsWith("oklab(") ||
     color.startsWith("hwb(") ||
     color.includes("color-contrast(")
   ) {
@@ -505,6 +521,27 @@ const parseCSSColor = (color, element) => {
   const rgba = convertColorToRgba(resolvedColor);
   return rgba;
 };
+const oklabToRgb = (L, a, b) => {
+  const l_ = L + 0.3963377774 * a + 0.2158037573 * b;
+  const m_ = L - 0.1055613458 * a - 0.0638541728 * b;
+  const s_ = L - 0.0894841775 * a - 1.291485548 * b;
+  const l = l_ * l_ * l_;
+  const m = m_ * m_ * m_;
+  const s = s_ * s_ * s_;
+  const rLinear = 4.0767416621 * l - 3.3077115913 * m + 0.2309699292 * s;
+  const gLinear = -1.2684380046 * l + 2.6097574011 * m - 0.3413193965 * s;
+  const bLinear = -0.0041960863 * l - 0.7034186147 * m + 1.707614701 * s;
+  const toSrgb = (linear) => {
+    const clamped = linear < 0 ? 0 : linear > 1 ? 1 : linear;
+    const srgb =
+      clamped <= 0.0031308
+        ? 12.92 * clamped
+        : 1.055 * Math.pow(clamped, 1 / 2.4) - 0.055;
+    return Math.round(srgb * 255);
+  };
+  return [toSrgb(rLinear), toSrgb(gLinear), toSrgb(bLinear)];
+};
+
 /**
  * Converts HSL color to RGB
  * @param {number} h - Hue (0-360)
@@ -637,12 +674,10 @@ const stringifyCSSColor = (value) => {
   }
   const rgba = value;
   const [r, g, b, a = 1] = rgba;
-
   // Validate RGB values
   if (r < 0 || r > 255 || g < 0 || g > 255 || b < 0 || b > 255) {
     return null;
   }
-
   // Validate alpha value
   if (a < 0 || a > 1) {
     return null;
@@ -660,10 +695,7 @@ const stringifyCSSColor = (value) => {
         return name;
       }
     }
-  }
-
-  // Use rgb() for opaque colors, rgba() for transparent
-  if (a === 1) {
+    // Use rgb() for opaque colors, rgba() for transparent
     return `rgb(${rInt}, ${gInt}, ${bInt})`;
   }
   if (a === 0 && rInt === 0 && gInt === 0 && bInt === 0) {
@@ -4034,12 +4066,6 @@ const performArrowNavigation = (
   }
 
   const onTargetToFocus = (targetToFocus) => {
-    console.debug(
-      `Arrow navigation: ${event.key} from`,
-      activeElement,
-      "to",
-      targetToFocus,
-    );
     event.preventDefault();
     markFocusNav(event);
     targetToFocus.focus();
@@ -6299,23 +6325,52 @@ const getDragCoordinates = (
   return [leftRelativeToScrollContainer, topRelativeToScrollContainer];
 };
 
-const installImportMetaCss = (importMeta) => {
-  const stylesheet = new CSSStyleSheet({ baseUrl: importMeta.url });
+const installImportMetaCssBuild = (importMeta) => {
+  const IMPORT_META_CSS_BUILD = "jsenv_import_meta_css_build";
+
+  if (importMeta.css === IMPORT_META_CSS_BUILD) {
+    return;
+  }
+
+  const stylesheetMap = new Map();
+  const adopt = (url, value) => {
+    const stylesheet = new CSSStyleSheet({ baseUrl: importMeta.url });
+    stylesheet.replaceSync(value);
+    stylesheetMap.set(url, stylesheet);
+    document.adoptedStyleSheets = [...document.adoptedStyleSheets, stylesheet];
+  };
+  const update = (url, value) => {
+    stylesheetMap.get(url).replaceSync(value);
+  };
+  const remove = (url) => {
+    const stylesheet = stylesheetMap.get(url);
+    document.adoptedStyleSheets = document.adoptedStyleSheets.filter(
+      (s) => s !== stylesheet,
+    );
+    stylesheetMap.delete(url);
+  };
 
-  let called = false;
-  // eslint-disable-next-line accessor-pairs
+  const currentCssSourceMap = new Map();
   Object.defineProperty(importMeta, "css", {
     configurable: true,
-    set(value) {
-      if (called) {
-        throw new Error("import.meta.css setter can only be called once");
-      }
-      called = true;
-      stylesheet.replaceSync(value);
-      document.adoptedStyleSheets = [
-        ...document.adoptedStyleSheets,
-        stylesheet,
-      ];
+    get() {
+      return IMPORT_META_CSS_BUILD;
+    },
+    set([value, url]) {
+      if (value === undefined) {
+        if (stylesheetMap.has(url)) {
+          remove(url);
+          currentCssSourceMap.delete(url);
+        }
+        return;
+      }
+      if (!stylesheetMap.has(url)) {
+        adopt(url, value);
+        currentCssSourceMap.set(url, value);
+      } else if (currentCssSourceMap.get(url) !== value) {
+        update(url, value);
+        currentCssSourceMap.set(url, value);
+      }
     },
   });
 };
@@ -6479,7 +6534,16 @@ const isolateInteractions = (elements) => {
   };
 };
 
-installImportMetaCss(import.meta);
+installImportMetaCssBuild(import.meta);/**
+ * Drag Gesture System
+ *
+ * TODO: rename moveX/moveY en juste x/y
+ * puisque move c'est perturbant sachant que c'est drag + scroll
+ * et que drag c'est juste la partie mouvement de la souris
+ *
+ * donc juste x/y ca seras surement mieux
+ *
+ */
 const createDragGestureController = (options = {}) => {
   const {
     name,
@@ -6488,17 +6552,18 @@ const createDragGestureController = (options = {}) => {
     onDrag,
     onRelease,
     threshold = 5,
-    direction: defaultDirection = { x: true, y: true },
+    direction: defaultDirection = {
+      x: true,
+      y: true
+    },
     documentInteractions = "auto",
     backdrop = true,
-    backdropZIndex = 999999,
+    backdropZIndex = 999999
   } = options;
-
   const dragGestureController = {
     grab: null,
-    gravViaPointer: null,
+    gravViaPointer: null
   };
-
   const grab = ({
     element,
     direction = defaultDirection,
@@ -6508,7 +6573,7 @@ const createDragGestureController = (options = {}) => {
     cursor = "grabbing",
     scrollContainer = document.documentElement,
     layoutScrollableLeft: scrollableLeftAtGrab = 0,
-    layoutScrollableTop: scrollableTopAtGrab = 0,
+    layoutScrollableTop: scrollableTopAtGrab = 0
   } = {}) => {
     if (!element) {
       throw new Error("element is required");
@@ -6516,7 +6581,6 @@ const createDragGestureController = (options = {}) => {
     if (!direction.x && !direction.y) {
       return null;
     }
-
     const [publishBeforeDrag, addBeforeDragCallback] = createPubSub();
     const [publishDrag, addDragCallback] = createPubSub();
     const [publishRelease, addReleaseCallback] = createPubSub();
@@ -6526,13 +6590,15 @@ const createDragGestureController = (options = {}) => {
     if (onRelease) {
       addReleaseCallback(onRelease);
     }
-
     const scrollLeftAtGrab = scrollContainer.scrollLeft;
     const scrollTopAtGrab = scrollContainer.scrollTop;
     const leftAtGrab = scrollLeftAtGrab + scrollableLeftAtGrab;
     const topAtGrab = scrollTopAtGrab + scrollableTopAtGrab;
     const createLayout = (x, y) => {
-      const { scrollLeft, scrollTop } = scrollContainer;
+      const {
+        scrollLeft,
+        scrollTop
+      } = scrollContainer;
       const left = scrollableLeftAtGrab + x;
       const top = scrollableTopAtGrab + y;
       const scrollableLeft = left - scrollLeft;
@@ -6552,42 +6618,38 @@ const createDragGestureController = (options = {}) => {
         top,
         // Delta since grab (number representing how much we dragged)
         xDelta: left - leftAtGrab,
-        yDelta: top - topAtGrab,
+        yDelta: top - topAtGrab
       };
       return layoutProps;
     };
-
-    const grabLayout = createLayout(
-      grabX + scrollContainer.scrollLeft,
-      grabY + scrollContainer.scrollTop,
-    );
+    const grabLayout = createLayout(grabX + scrollContainer.scrollLeft, grabY + scrollContainer.scrollTop);
     const gestureInfo = {
       name,
       direction,
       started: !threshold,
       status: "grabbed",
-
       element,
       scrollContainer,
-      grabX, // x grab coordinate (excluding scroll)
-      grabY, // y grab coordinate (excluding scroll)
+      grabX,
+      // x grab coordinate (excluding scroll)
+      grabY,
+      // y grab coordinate (excluding scroll)
       grabLayout,
       leftAtGrab,
       topAtGrab,
-
-      dragX: grabX, // coordinate of the last drag (excluding scroll of the scrollContainer)
-      dragY: grabY, // coordinate of the last drag (excluding scroll of the scrollContainer)
+      dragX: grabX,
+      // coordinate of the last drag (excluding scroll of the scrollContainer)
+      dragY: grabY,
+      // coordinate of the last drag (excluding scroll of the scrollContainer)
       layout: grabLayout,
-
       isGoingUp: undefined,
       isGoingDown: undefined,
       isGoingLeft: undefined,
       isGoingRight: undefined,
-
       // metadata about interaction sources
       grabEvent: event,
       dragEvent: null,
-      releaseEvent: null,
+      releaseEvent: null
     };
     definePropertyAsReadOnly(gestureInfo, "name");
     definePropertyAsReadOnly(gestureInfo, "direction");
@@ -6598,7 +6660,6 @@ const createDragGestureController = (options = {}) => {
     definePropertyAsReadOnly(gestureInfo, "leftAtGrab");
     definePropertyAsReadOnly(gestureInfo, "topAtGrab");
     definePropertyAsReadOnly(gestureInfo, "grabEvent");
-
     document_interactions: {
       if (documentInteractions === "manual") {
         break document_interactions;
@@ -6611,23 +6672,18 @@ const createDragGestureController = (options = {}) => {
       2. Break the visual feedback (inconsistent cursors, hover states)
       3. Cause unwanted scrolling (keyboard shortcuts, wheel events in restricted directions)
       4. Create accessibility issues (focus jumping, screen reader confusion)
-
-      STRATEGY: Create a controlled interaction environment by:
+       STRATEGY: Create a controlled interaction environment by:
       1. VISUAL CONTROL: Use a backdrop to unify cursor appearance and block pointer events
       2. INTERACTION ISOLATION: Make non-dragged elements inert to prevent interference
       3. FOCUS MANAGEMENT: Control focus location and prevent focus changes during drag
       4. SELECTIVE SCROLLING: Allow scrolling only in directions supported by the drag gesture
-
-      IMPLEMENTATION:
+       IMPLEMENTATION:
       */
 
       // 1. INTERACTION ISOLATION: Make everything except the dragged element inert
       // This prevents keyboard events, pointer interactions, and screen reader navigation
       // on non-relevant elements during the drag operation
-      const cleanupInert = isolateInteractions([
-        element,
-        ...Array.from(document.querySelectorAll("[data-droppable]")),
-      ]);
+      const cleanupInert = isolateInteractions([element, ...Array.from(document.querySelectorAll("[data-droppable]"))]);
       addReleaseCallback(() => {
         cleanupInert();
       });
@@ -6644,14 +6700,14 @@ const createDragGestureController = (options = {}) => {
         // Handle wheel events on backdrop for directionally-constrained drag gestures
         // (e.g., table column resize should only allow horizontal scrolling)
         if (!direction.x || !direction.y) {
-          backdropElement.onwheel = (e) => {
+          backdropElement.onwheel = e => {
             e.preventDefault();
             const scrollX = direction.x ? e.deltaX : 0;
             const scrollY = direction.y ? e.deltaY : 0;
             scrollContainer.scrollBy({
               left: scrollX,
               top: scrollY,
-              behavior: "auto",
+              behavior: "auto"
             });
           };
         }
@@ -6662,23 +6718,25 @@ const createDragGestureController = (options = {}) => {
       }
 
       // 3. FOCUS MANAGEMENT: Control and stabilize focus during drag
-      const { activeElement } = document;
+      const {
+        activeElement
+      } = document;
       const focusableElement = findFocusable(element);
       // Focus the dragged element (or document.body as fallback) to establish clear focus context
       // This also ensure any keydown event listened by the currently focused element
       // won't be available during drag
       const elementToFocus = focusableElement || document.body;
       elementToFocus.focus({
-        preventScroll: true,
+        preventScroll: true
       });
       addReleaseCallback(() => {
         // Restore original focus on release
         activeElement.focus({
-          preventScroll: true,
+          preventScroll: true
         });
       });
       // Prevent Tab navigation entirely (focus should stay stable)
-      const onkeydown = (e) => {
+      const onkeydown = e => {
         if (e.key === "Tab") {
           e.preventDefault();
           return;
@@ -6691,27 +6749,16 @@ const createDragGestureController = (options = {}) => {
 
       // 4. SELECTIVE SCROLLING: Allow keyboard scrolling only in supported directions
       {
-        const onDocumentKeydown = (keyboardEvent) => {
+        const onDocumentKeydown = keyboardEvent => {
           // Vertical scrolling keys - prevent if vertical movement not supported
-          if (
-            keyboardEvent.key === "ArrowUp" ||
-            keyboardEvent.key === "ArrowDown" ||
-            keyboardEvent.key === " " ||
-            keyboardEvent.key === "PageUp" ||
-            keyboardEvent.key === "PageDown" ||
-            keyboardEvent.key === "Home" ||
-            keyboardEvent.key === "End"
-          ) {
+          if (keyboardEvent.key === "ArrowUp" || keyboardEvent.key === "ArrowDown" || keyboardEvent.key === " " || keyboardEvent.key === "PageUp" || keyboardEvent.key === "PageDown" || keyboardEvent.key === "Home" || keyboardEvent.key === "End") {
             if (!direction.y) {
               keyboardEvent.preventDefault();
             }
             return;
           }
           // Horizontal scrolling keys - prevent if horizontal movement not supported
-          if (
-            keyboardEvent.key === "ArrowLeft" ||
-            keyboardEvent.key === "ArrowRight"
-          ) {
+          if (keyboardEvent.key === "ArrowLeft" || keyboardEvent.key === "ArrowRight") {
             if (!direction.x) {
               keyboardEvent.preventDefault();
             }
@@ -6728,36 +6775,38 @@ const createDragGestureController = (options = {}) => {
     // Set up scroll event handling to adjust drag position when scrolling occurs
     {
       let isHandlingScroll = false;
-      const handleScroll = (scrollEvent) => {
+      const handleScroll = scrollEvent => {
         if (isHandlingScroll) {
           return;
         }
         isHandlingScroll = true;
-        drag(gestureInfo.dragX, gestureInfo.dragY, { event: scrollEvent });
+        drag(gestureInfo.dragX, gestureInfo.dragY, {
+          event: scrollEvent
+        });
         isHandlingScroll = false;
       };
-      const scrollEventReceiver =
-        scrollContainer === document.documentElement
-          ? document
-          : scrollContainer;
+      const scrollEventReceiver = scrollContainer === document.documentElement ? document : scrollContainer;
       scrollEventReceiver.addEventListener("scroll", handleScroll, {
-        passive: true,
+        passive: true
       });
       addReleaseCallback(() => {
         scrollEventReceiver.removeEventListener("scroll", handleScroll, {
-          passive: true,
+          passive: true
         });
       });
     }
-
     const determineDragData = ({
       dragX,
       dragY,
       dragEvent,
-      isRelease = false,
+      isRelease = false
     }) => {
       // === ÉTAT INITIAL (au moment du grab) ===
-      const { grabX, grabY, grabLayout } = gestureInfo;
+      const {
+        grabX,
+        grabY,
+        grabLayout
+      } = gestureInfo;
       // === CE QUI EST DEMANDÉ (où on veut aller) ===
       // Calcul de la direction basé sur le mouvement précédent
       // (ne tient pas compte du mouvement final une fois les contraintes appliquées)
@@ -6769,56 +6818,38 @@ const createDragGestureController = (options = {}) => {
       const isGoingRight = dragX > currentDragX;
       const isGoingUp = dragY < currentDragY;
       const isGoingDown = dragY > currentDragY;
-
-      const layoutXRequested = direction.x
-        ? scrollContainer.scrollLeft + (dragX - grabX)
-        : grabLayout.scrollLeft;
-      const layoutYRequested = direction.y
-        ? scrollContainer.scrollTop + (dragY - grabY)
-        : grabLayout.scrollTop;
+      const layoutXRequested = direction.x ? scrollContainer.scrollLeft + (dragX - grabX) : grabLayout.scrollLeft;
+      const layoutYRequested = direction.y ? scrollContainer.scrollTop + (dragY - grabY) : grabLayout.scrollTop;
       const layoutRequested = createLayout(layoutXRequested, layoutYRequested);
       const currentLayout = gestureInfo.layout;
       let layout;
-      if (
-        layoutRequested.x === currentLayout.x &&
-        layoutRequested.y === currentLayout.y
-      ) {
+      if (layoutRequested.x === currentLayout.x && layoutRequested.y === currentLayout.y) {
         layout = currentLayout;
       } else {
         // === APPLICATION DES CONTRAINTES ===
         let layoutConstrained = layoutRequested;
         const limitLayout = (left, top) => {
-          layoutConstrained = createLayout(
-            left === undefined
-              ? layoutConstrained.x
-              : left - scrollableLeftAtGrab,
-            top === undefined ? layoutConstrained.y : top - scrollableTopAtGrab,
-          );
+          layoutConstrained = createLayout(left === undefined ? layoutConstrained.x : left - scrollableLeftAtGrab, top === undefined ? layoutConstrained.y : top - scrollableTopAtGrab);
         };
-
         publishBeforeDrag(layoutRequested, currentLayout, limitLayout, {
           dragEvent,
-          isRelease,
+          isRelease
         });
         // === ÉTAT FINAL ===
         layout = layoutConstrained;
       }
-
       const dragData = {
         dragX,
         dragY,
         layout,
-
         isGoingLeft,
         isGoingRight,
         isGoingUp,
         isGoingDown,
-
         status: isRelease ? "released" : "dragging",
         dragEvent: isRelease ? gestureInfo.dragEvent : dragEvent,
-        releaseEvent: isRelease ? dragEvent : null,
+        releaseEvent: isRelease ? dragEvent : null
       };
-
       if (isRelease) {
         return dragData;
       }
@@ -6843,18 +6874,19 @@ const createDragGestureController = (options = {}) => {
       }
       return dragData;
     };
-
-    const drag = (
-      dragX = gestureInfo.dragX, // Scroll container relative X coordinate
-      dragY = gestureInfo.dragY, // Scroll container relative Y coordinate
-      { event = new CustomEvent("programmatic"), isRelease = false } = {},
-    ) => {
-
+    const drag = (dragX = gestureInfo.dragX,
+    // Scroll container relative X coordinate
+    dragY = gestureInfo.dragY,
+    // Scroll container relative Y coordinate
+    {
+      event = new CustomEvent("programmatic"),
+      isRelease = false
+    } = {}) => {
       const dragData = determineDragData({
         dragX,
         dragY,
         dragEvent: event,
-        isRelease,
+        isRelease
       });
       const startedPrevious = gestureInfo.started;
       const layoutPrevious = gestureInfo.layout;
@@ -6864,25 +6896,24 @@ const createDragGestureController = (options = {}) => {
         onDragStart?.(gestureInfo);
       }
       const someLayoutChange = gestureInfo.layout !== layoutPrevious;
-      publishDrag(
-        gestureInfo,
-        // we still publish drag event even when unchanged
-        // because UI might need to adjust when document scrolls
-        // even if nothing truly changes visually the element
-        // can decide to stick to the scroll for example
-        someLayoutChange,
-      );
+      publishDrag(gestureInfo,
+      // we still publish drag event even when unchanged
+      // because UI might need to adjust when document scrolls
+      // even if nothing truly changes visually the element
+      // can decide to stick to the scroll for example
+      someLayoutChange);
     };
-
     const release = ({
       event = new CustomEvent("programmatic"),
       releaseX = gestureInfo.dragX,
-      releaseY = gestureInfo.dragY,
+      releaseY = gestureInfo.dragY
     } = {}) => {
-      drag(releaseX, releaseY, { event, isRelease: true });
+      drag(releaseX, releaseY, {
+        event,
+        isRelease: true
+      });
       publishRelease(gestureInfo);
     };
-
     onGrab?.(gestureInfo);
     const dragGesture = {
       gestureInfo,
@@ -6890,12 +6921,11 @@ const createDragGestureController = (options = {}) => {
       addDragCallback,
       addReleaseCallback,
       drag,
-      release,
+      release
     };
     return dragGesture;
   };
   dragGestureController.grab = grab;
-
   const initDragByPointer = (grabEvent, dragOptions, initializer) => {
     if (grabEvent.button !== undefined && grabEvent.button !== 0) {
       return null;
@@ -6905,8 +6935,11 @@ const createDragGestureController = (options = {}) => {
       // target is a text node
       return null;
     }
-    const mouseEventCoords = (mouseEvent) => {
-      const { clientX, clientY } = mouseEvent;
+    const mouseEventCoords = mouseEvent => {
+      const {
+        clientX,
+        clientY
+      } = mouseEvent;
       return [clientX, clientY];
     };
     const [grabX, grabY] = mouseEventCoords(grabEvent);
@@ -6914,37 +6947,39 @@ const createDragGestureController = (options = {}) => {
       grabX,
       grabY,
       event: grabEvent,
-      ...dragOptions,
+      ...dragOptions
     });
-    const dragViaPointer = (dragEvent) => {
+    const dragViaPointer = dragEvent => {
       const [mouseDragX, mouseDragY] = mouseEventCoords(dragEvent);
       dragGesture.drag(mouseDragX, mouseDragY, {
-        event: dragEvent,
+        event: dragEvent
       });
     };
-    const releaseViaPointer = (mouseupEvent) => {
+    const releaseViaPointer = mouseupEvent => {
       const [mouseReleaseX, mouseReleaseY] = mouseEventCoords(mouseupEvent);
       dragGesture.release({
         event: mouseupEvent,
         releaseX: mouseReleaseX,
-        releaseY: mouseReleaseY,
+        releaseY: mouseReleaseY
       });
     };
     dragGesture.dragViaPointer = dragViaPointer;
     dragGesture.releaseViaPointer = releaseViaPointer;
     const cleanup = initializer({
       onMove: dragViaPointer,
-      onRelease: releaseViaPointer,
+      onRelease: releaseViaPointer
     });
     dragGesture.addReleaseCallback(() => {
       cleanup();
     });
     return dragGesture;
   };
-
   const grabViaPointer = (grabEvent, options) => {
     if (grabEvent.type === "pointerdown") {
-      return initDragByPointer(grabEvent, options, ({ onMove, onRelease }) => {
+      return initDragByPointer(grabEvent, options, ({
+        onMove,
+        onRelease
+      }) => {
         const target = grabEvent.target;
         target.setPointerCapture(grabEvent.pointerId);
         target.addEventListener("lostpointercapture", onRelease);
@@ -6961,11 +6996,12 @@ const createDragGestureController = (options = {}) => {
       });
     }
     if (grabEvent.type === "mousedown") {
-      console.warn(
-        `Received "mousedown" event, "pointerdown" events are recommended to perform drag gestures.`,
-      );
-      return initDragByPointer(grabEvent, options, ({ onMove, onRelease }) => {
-        const onPointerUp = (pointerEvent) => {
+      console.warn(`Received "mousedown" event, "pointerdown" events are recommended to perform drag gestures.`);
+      return initDragByPointer(grabEvent, options, ({
+        onMove,
+        onRelease
+      }) => {
+        const onPointerUp = pointerEvent => {
           // <button disabled> for example does not emit mouseup if we release mouse over it
           // -> we add "pointerup" to catch mouseup occuring on disabled element
           if (pointerEvent.pointerType === "mouse") {
@@ -6982,54 +7018,43 @@ const createDragGestureController = (options = {}) => {
         };
       });
     }
-    throw new Error(
-      `Unsupported "${grabEvent.type}" evenet passed to grabViaPointer. "pointerdown" was expected.`,
-    );
+    throw new Error(`Unsupported "${grabEvent.type}" evenet passed to grabViaPointer. "pointerdown" was expected.`);
   };
   dragGestureController.grabViaPointer = grabViaPointer;
-
   return dragGestureController;
 };
-
-const dragAfterThreshold = (
-  grabEvent,
-  dragGestureInitializer,
-  threshold,
-) => {
+const dragAfterThreshold = (grabEvent, dragGestureInitializer, threshold) => {
   const significantDragGestureController = createDragGestureController({
     threshold,
     // allow interaction for this intermediate gesture:
     // user should still be able to scroll or interact with the document
     // only once the gesture is significant we take control
     documentInteractions: "manual",
-    onDragStart: (gestureInfo) => {
+    onDragStart: gestureInfo => {
       significantDragGesture.release(); // kill that gesture
       const dragGesture = dragGestureInitializer();
       dragGesture.dragViaPointer(gestureInfo.dragEvent);
-    },
+    }
+  });
+  const significantDragGesture = significantDragGestureController.grabViaPointer(grabEvent, {
+    element: grabEvent.target
   });
-  const significantDragGesture =
-    significantDragGestureController.grabViaPointer(grabEvent, {
-      element: grabEvent.target,
-    });
 };
-
 const definePropertyAsReadOnly = (object, propertyName) => {
   Object.defineProperty(object, propertyName, {
     writable: false,
-    value: object[propertyName],
+    value: object[propertyName]
   });
 };
-
-import.meta.css = /* css */ `
+import.meta.css = [/* css */`
   .navi_drag_gesture_backdrop {
     position: fixed;
     inset: 0;
     user-select: none;
   }
-`;
+`, "/src/interaction/drag/drag_gesture.js"];
 
-installImportMetaCss(import.meta);const setupConstraintFeedbackLine = () => {
+installImportMetaCssBuild(import.meta);const setupConstraintFeedbackLine = () => {
   const constraintFeedbackLine = createConstraintFeedbackLine();
 
   // Track last known mouse position for constraint feedback line during scroll
@@ -7037,16 +7062,17 @@ installImportMetaCss(import.meta);const setupConstraintFeedbackLine = () => {
   let lastMouseY = null;
 
   // Internal function to update constraint feedback line
-  const onDrag = (gestureInfo) => {
-    const { grabEvent, dragEvent } = gestureInfo;
-    if (
-      grabEvent.type === "programmatic" ||
-      dragEvent.type === "programmatic"
-    ) {
+  const onDrag = gestureInfo => {
+    const {
+      grabEvent,
+      dragEvent
+    } = gestureInfo;
+    if (grabEvent.type === "programmatic" ||
+    // dragEvent can be null when only mousedown without yet any mousemove
+    !dragEvent || dragEvent.type === "programmatic") {
       // programmatic drag
       return;
     }
-
     const mouseX = dragEvent.clientX;
     const mouseY = dragEvent.clientY;
     // Use last known position if current position not available (e.g., during scroll)
@@ -7059,7 +7085,6 @@ installImportMetaCss(import.meta);const setupConstraintFeedbackLine = () => {
     // Store current mouse position for potential use during scroll
     lastMouseX = mouseX;
     lastMouseY = mouseY;
-
     const grabClientX = grabEvent.clientX;
     const grabClientY = grabEvent.clientY;
 
@@ -7088,25 +7113,21 @@ installImportMetaCss(import.meta);const setupConstraintFeedbackLine = () => {
     constraintFeedbackLine.style.opacity = `${maxOpacity * opacityFactor}`;
     constraintFeedbackLine.setAttribute("data-visible", "");
   };
-
   return {
     onDrag,
     onRelease: () => {
       constraintFeedbackLine.remove();
-    },
+    }
   };
 };
-
 const createConstraintFeedbackLine = () => {
   const line = document.createElement("div");
   line.className = "navi_constraint_feedback_line";
-  line.title =
-    "Constraint feedback - shows distance between mouse and moving grab point";
+  line.title = "Constraint feedback - shows distance between mouse and moving grab point";
   document.body.appendChild(line);
   return line;
 };
-
-import.meta.css = /* css */ `
+import.meta.css = [/* css */`
   .navi_constraint_feedback_line {
     position: fixed;
     z-index: 9998;
@@ -7120,16 +7141,17 @@ import.meta.css = /* css */ `
   .navi_constraint_feedback_line[data-visible] {
     visibility: visible;
   }
-`;
-
-installImportMetaCss(import.meta);const MARKER_SIZE = 12;
+`, "/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;
 let currentDebugMarkers = [];
 let currentConstraintMarkers = [];
 let currentReferenceElementMarker = null;
 let currentElementMarker = null;
-
-const setupDragDebugMarkers = (dragGesture, { referenceElement }) => {
+const setupDragDebugMarkers = (dragGesture, {
+  referenceElement
+}) => {
   // Clean up any existing persistent markers from previous drag gestures
   {
     // Remove any existing markers from previous gestures
@@ -7138,29 +7160,27 @@ const setupDragDebugMarkers = (dragGesture, { referenceElement }) => {
       container.innerHTML = ""; // Clear all markers efficiently
     }
   }
-
-  const { direction, scrollContainer } = dragGesture.gestureInfo;
-
+  const {
+    direction,
+    scrollContainer
+  } = dragGesture.gestureInfo;
   return {
-    onConstraints: (
-      constraints,
-      { left, top, right, bottom, autoScrollArea },
-    ) => {
+    onConstraints: (constraints, {
+      left,
+      top,
+      right,
+      bottom,
+      autoScrollArea
+    }) => {
       // Schedule removal of previous markers if they exist
       const previousDebugMarkers = [...currentDebugMarkers];
       const previousConstraintMarkers = [...currentConstraintMarkers];
       const previousReferenceElementMarker = currentReferenceElementMarker;
       const previousElementMarker = currentElementMarker;
-
-      if (
-        previousDebugMarkers.length > 0 ||
-        previousConstraintMarkers.length > 0 ||
-        previousReferenceElementMarker ||
-        previousElementMarker
-      ) {
+      if (previousDebugMarkers.length > 0 || previousConstraintMarkers.length > 0 || previousReferenceElementMarker || previousElementMarker) {
         setTimeout(() => {
-          previousDebugMarkers.forEach((marker) => marker.remove());
-          previousConstraintMarkers.forEach((marker) => marker.remove());
+          previousDebugMarkers.forEach(marker => marker.remove());
+          previousConstraintMarkers.forEach(marker => marker.remove());
           if (previousReferenceElementMarker) {
             previousReferenceElementMarker.remove();
           }
@@ -7189,7 +7209,7 @@ const setupDragDebugMarkers = (dragGesture, { referenceElement }) => {
         bottom,
         scrollContainer,
         label: elementLabel,
-        color: elementColor,
+        color: elementColor
       });
 
       // Create reference element marker if reference element exists
@@ -7199,52 +7219,47 @@ const setupDragDebugMarkers = (dragGesture, { referenceElement }) => {
           top,
           right,
           bottom,
-          scrollContainer,
+          scrollContainer
         });
       }
 
       // Collect all markers to be created, then merge duplicates
       const markersToCreate = [];
-
       {
         if (direction.x) {
           markersToCreate.push({
-            name: autoScrollArea.paddingLeft
-              ? `autoscroll.left + padding(${autoScrollArea.paddingLeft})`
-              : "autoscroll.left",
+            name: autoScrollArea.paddingLeft ? `autoscroll.left + padding(${autoScrollArea.paddingLeft})` : "autoscroll.left",
             x: autoScrollArea.left,
             y: 0,
-            color: "0 128 0", // green
-            side: "left",
+            color: "0 128 0",
+            // green
+            side: "left"
           });
           markersToCreate.push({
-            name: autoScrollArea.paddingRight
-              ? `autoscroll.right + padding(${autoScrollArea.paddingRight})`
-              : "autoscroll.right",
+            name: autoScrollArea.paddingRight ? `autoscroll.right + padding(${autoScrollArea.paddingRight})` : "autoscroll.right",
             x: autoScrollArea.right,
             y: 0,
-            color: "0 128 0", // green
-            side: "right",
+            color: "0 128 0",
+            // green
+            side: "right"
           });
         }
         if (direction.y) {
           markersToCreate.push({
-            name: autoScrollArea.paddingTop
-              ? `autoscroll.top + padding(${autoScrollArea.paddingTop})`
-              : "autoscroll.top",
+            name: autoScrollArea.paddingTop ? `autoscroll.top + padding(${autoScrollArea.paddingTop})` : "autoscroll.top",
             x: 0,
             y: autoScrollArea.top,
-            color: "255 0 0", // red
-            side: "top",
+            color: "255 0 0",
+            // red
+            side: "top"
           });
           markersToCreate.push({
-            name: autoScrollArea.paddingBottom
-              ? `autoscroll.bottom + padding(${autoScrollArea.paddingBottom})`
-              : "autoscroll.bottom",
+            name: autoScrollArea.paddingBottom ? `autoscroll.bottom + padding(${autoScrollArea.paddingBottom})` : "autoscroll.bottom",
             x: 0,
             y: autoScrollArea.bottom,
-            color: "255 165 0", // orange
-            side: "bottom",
+            color: "255 165 0",
+            // orange
+            side: "bottom"
           });
         }
       }
@@ -7252,7 +7267,9 @@ const setupDragDebugMarkers = (dragGesture, { referenceElement }) => {
       // Process each constraint individually to preserve names
       for (const constraint of constraints) {
         if (constraint.type === "bounds") {
-          const { bounds } = constraint;
+          const {
+            bounds
+          } = constraint;
 
           // Create individual markers for each bound with constraint name
           if (direction.x) {
@@ -7261,8 +7278,9 @@ const setupDragDebugMarkers = (dragGesture, { referenceElement }) => {
                 name: `${constraint.name}.left`,
                 x: bounds.left,
                 y: 0,
-                color: "128 0 128", // purple
-                side: "left",
+                color: "128 0 128",
+                // purple
+                side: "left"
               });
             }
             if (bounds.right !== undefined) {
@@ -7272,8 +7290,9 @@ const setupDragDebugMarkers = (dragGesture, { referenceElement }) => {
                 name: `${constraint.name}.right`,
                 x: bounds.right,
                 y: 0,
-                color: "128 0 128", // purple
-                side: "right",
+                color: "128 0 128",
+                // purple
+                side: "right"
               });
             }
           }
@@ -7283,8 +7302,9 @@ const setupDragDebugMarkers = (dragGesture, { referenceElement }) => {
                 name: `${constraint.name}.top`,
                 x: 0,
                 y: bounds.top,
-                color: "128 0 128", // purple
-                side: "top",
+                color: "128 0 128",
+                // purple
+                side: "top"
               });
             }
             if (bounds.bottom !== undefined) {
@@ -7294,37 +7314,28 @@ const setupDragDebugMarkers = (dragGesture, { referenceElement }) => {
                 name: `${constraint.name}.bottom`,
                 x: 0,
                 y: bounds.bottom,
-                color: "128 0 128", // purple
-                side: "bottom",
+                color: "128 0 128",
+                // purple
+                side: "bottom"
               });
             }
           }
         } else if (constraint.type === "obstacle") {
-          const obstacleMarker = createObstacleMarker(
-            constraint,
-            scrollContainer,
-          );
+          const obstacleMarker = createObstacleMarker(constraint, scrollContainer);
           currentConstraintMarkers.push(obstacleMarker);
         }
       }
 
       // Create markers with merging for overlapping positions
-      const createdMarkers = createMergedMarkers(
-        markersToCreate,
-        scrollContainer,
-      );
-      currentDebugMarkers.push(
-        ...createdMarkers.filter((m) => m.type !== "constraint"),
-      );
-      currentConstraintMarkers.push(
-        ...createdMarkers.filter((m) => m.type === "constraint"),
-      );
+      const createdMarkers = createMergedMarkers(markersToCreate, scrollContainer);
+      currentDebugMarkers.push(...createdMarkers.filter(m => m.type !== "constraint"));
+      currentConstraintMarkers.push(...createdMarkers.filter(m => m.type === "constraint"));
     },
     onRelease: () => {
       {
         return;
       }
-    },
+    }
   };
 };
 
@@ -7343,8 +7354,9 @@ const getMarkersContainer = () => {
 // Convert document-relative coordinates to viewport coordinates for marker positioning
 // Takes the scroll container into account for proper positioning relative to the container
 const getDebugMarkerPos = (x, y, scrollContainer, side = null) => {
-  const { documentElement } = document;
-
+  const {
+    documentElement
+  } = document;
   const leftWithoutScroll = x - scrollContainer.scrollLeft;
   const topWithoutScroll = y - scrollContainer.scrollTop;
   let baseX;
@@ -7376,7 +7388,6 @@ const getDebugMarkerPos = (x, y, scrollContainer, side = null) => {
   // For obstacles and other markers: use converted coordinates directly
   return [baseX, baseY];
 };
-
 const createMergedMarkers = (markersToCreate, scrollContainer) => {
   const mergedMarkers = [];
   const positionMap = new Map();
@@ -7384,7 +7395,6 @@ const createMergedMarkers = (markersToCreate, scrollContainer) => {
   // Group markers by position and side
   for (const marker of markersToCreate) {
     const key = `${marker.x},${marker.y},${marker.side}`;
-
     if (!positionMap.has(key)) {
       positionMap.set(key, []);
     }
@@ -7402,43 +7412,36 @@ const createMergedMarkers = (markersToCreate, scrollContainer) => {
     } else {
       // Multiple markers at same position - merge labels
       const firstMarker = markers[0];
-      const combinedName = markers.map((m) => m.name).join(" + ");
+      const combinedName = markers.map(m => m.name).join(" + ");
 
       // Use the first marker's color, or mix colors if needed
-      const domMarker = createDebugMarker(
-        {
-          ...firstMarker,
-          name: combinedName,
-        },
-        scrollContainer,
-      );
-      domMarker.type = markers.some((m) => m.name.includes("Bound"))
-        ? "constraint"
-        : "visible";
+      const domMarker = createDebugMarker({
+        ...firstMarker,
+        name: combinedName
+      }, scrollContainer);
+      domMarker.type = markers.some(m => m.name.includes("Bound")) ? "constraint" : "visible";
       mergedMarkers.push(domMarker);
     }
   }
-
   return mergedMarkers;
 };
-
-const createDebugMarker = (
-  { name, x, y, color = "255 0 0", side },
-  scrollContainer,
-) => {
+const createDebugMarker = ({
+  name,
+  x,
+  y,
+  color = "255 0 0",
+  side
+}, scrollContainer) => {
   // Convert coordinates from document-relative to viewport
   const [viewportX, viewportY] = getDebugMarkerPos(x, y, scrollContainer, side);
-
   const marker = document.createElement("div");
   marker.className = `navi_debug_marker`;
   marker.setAttribute(`data-${side}`, "");
   // Set the color as a CSS custom property
   marker.style.setProperty("--marker-color", `rgb(${color})`);
   // Position markers exactly at the boundary coordinates
-  marker.style.left =
-    side === "right" ? `${viewportX - MARKER_SIZE}px` : `${viewportX}px`;
-  marker.style.top =
-    side === "bottom" ? `${viewportY - MARKER_SIZE}px` : `${viewportY}px`;
+  marker.style.left = side === "right" ? `${viewportX - MARKER_SIZE}px` : `${viewportX}px`;
+  marker.style.top = side === "bottom" ? `${viewportY - MARKER_SIZE}px` : `${viewportY}px`;
   marker.title = name;
 
   // Add label
@@ -7446,7 +7449,6 @@ const createDebugMarker = (
   label.className = `navi_debug_marker_label`;
   label.textContent = name;
   marker.appendChild(label);
-
   const container = getMarkersContainer();
   container.appendChild(marker);
   return marker;
@@ -7456,13 +7458,7 @@ const createObstacleMarker = (obstacleObj, scrollContainer) => {
   const height = obstacleObj.bounds.bottom - obstacleObj.bounds.top;
 
   // Convert document-relative coordinates to viewport coordinates
-  const [x, y] = getDebugMarkerPos(
-    obstacleObj.bounds.left,
-    obstacleObj.bounds.top,
-    scrollContainer,
-    "obstacle",
-  );
-
+  const [x, y] = getDebugMarkerPos(obstacleObj.bounds.left, obstacleObj.bounds.top, scrollContainer, "obstacle");
   const marker = document.createElement("div");
   marker.className = "navi_obstacle_marker";
   marker.style.left = `${x}px`;
@@ -7476,12 +7472,10 @@ const createObstacleMarker = (obstacleObj, scrollContainer) => {
   label.className = "navi_obstacle_marker_label";
   label.textContent = obstacleObj.name;
   marker.appendChild(label);
-
   const container = getMarkersContainer();
   container.appendChild(marker);
   return marker;
 };
-
 const createElementMarker = ({
   left,
   top,
@@ -7489,13 +7483,12 @@ const createElementMarker = ({
   bottom,
   scrollContainer,
   label = "Element",
-  color = "0, 200, 0", // Default green color
+  color = "0, 200, 0" // Default green color
 }) => {
   const width = right - left;
   const height = bottom - top;
   // Convert document-relative coordinates to viewport coordinates
   const [x, y] = getDebugMarkerPos(left, top, scrollContainer, "element");
-
   const marker = document.createElement("div");
   marker.className = "navi_element_marker";
   marker.style.left = `${x}px`;
@@ -7513,24 +7506,21 @@ const createElementMarker = ({
   labelEl.className = "navi_element_marker_label";
   labelEl.textContent = label;
   marker.appendChild(labelEl);
-
   const container = getMarkersContainer();
   container.appendChild(marker);
   return marker;
 };
-
 const createReferenceElementMarker = ({
   left,
   top,
   right,
   bottom,
-  scrollContainer,
+  scrollContainer
 }) => {
   const width = right - left;
   const height = bottom - top;
   // Convert document-relative coordinates to viewport coordinates
   const [x, y] = getDebugMarkerPos(left, top, scrollContainer, "reference");
-
   const marker = document.createElement("div");
   marker.className = "navi_reference_element_marker";
   marker.style.left = `${x}px`;
@@ -7544,13 +7534,11 @@ const createReferenceElementMarker = ({
   label.className = "navi_reference_element_marker_label";
   label.textContent = "Reference Element";
   marker.appendChild(label);
-
   const container = getMarkersContainer();
   container.appendChild(marker);
   return marker;
 };
-
-import.meta.css = /* css */ `
+import.meta.css = [/* css */`
   .navi_debug_markers_container {
     position: fixed;
     top: 0;
@@ -7735,7 +7723,7 @@ import.meta.css = /* css */ `
     border-radius: 3px;
     pointer-events: none;
   }
-`;
+`, "/src/interaction/drag/drag_debug_markers.js"];
 
 const initDragConstraints = (
   dragGesture,
@@ -8899,46 +8887,72 @@ const getWidth = (element) => {
   return width;
 };
 
-installImportMetaCss(import.meta);
-import.meta.css = /* css */ `
+installImportMetaCssBuild(import.meta);/**
+ * Position Sticky Polyfill
+ *
+ * This module provides a workaround for position:sticky limitations when used with
+ * overflow:auto/hidden parent elements (see https://github.com/w3c/csswg-drafts/issues/865).
+ *
+ * How it works:
+ * 1. Creates a placeholder clone of the sticky element to maintain document flow
+ * 2. Positions the real element using fixed positioning relative to viewport
+ * 3. Adjusts position on scroll to emulate position:sticky behavior
+ * 4. Handles parent boundary detection to keep element within its container
+ * 5. Updates dimensions on resize and DOM changes
+ *
+ * Usage:
+ * ```
+ * const cleanup = initPositionSticky(element);
+ * // Later when no longer needed
+ * cleanup();
+ * ```
+ *
+ * The element should have a CSS "top" value specified (e.g., top: 10px).
+ */
+import.meta.css = [/* css */`
   [data-position-sticky-placeholder] {
     position: static !important;
     width: auto !important;
     height: auto !important;
     opacity: 0 !important;
   }
-`;
-
-const initPositionSticky = (element) => {
+`, "/src/position/position_sticky.js"];
+const initPositionSticky = element => {
   const computedStyle = getComputedStyle(element);
   const topCssValue = computedStyle.top;
   const top = parseFloat(topCssValue);
-  if (isNaN(top)) {
-    return () => {}; // Early return if no valid top value
+  const leftCssValue = computedStyle.left;
+  const left = parseFloat(leftCssValue);
+  const hasTop = !isNaN(top);
+  const hasLeft = !isNaN(left);
+  if (!hasTop && !hasLeft) {
+    return () => {}; // Early return if no valid top or left value
   }
 
   // Skip polyfill if native position:sticky would work (no overflow:auto/hidden parents)
   const scrollContainerSet = getScrollContainerSet(element);
-  {
-    let hasOverflowHiddenOrAuto = false;
-    for (const scrollContainer of scrollContainerSet) {
-      const scrollContainerComputedStyle = getComputedStyle(scrollContainer);
-      const overflowX = scrollContainerComputedStyle.overflowX;
-      if (overflowX === "auto" || overflowX === "hidden") {
-        hasOverflowHiddenOrAuto = true;
-        break;
-      }
-      const overflowY = scrollContainerComputedStyle.overflowY;
-      if (overflowY === "auto" || overflowY === "hidden") {
-        hasOverflowHiddenOrAuto = true;
-        break;
-      }
+  // Determine per-axis whether an intermediate container blocks native sticky.
+  // Native sticky fails only when there is a scroll container between the element
+  // and the document with overflow set on that axis.
+  let xScrollContainer = null; // first intermediate container blocking horizontal sticky
+  let yScrollContainer = null; // first intermediate container blocking vertical sticky
+  for (const scrollContainer of scrollContainerSet) {
+    if (scrollContainer === document.documentElement) {
+      break;
+    }
+    const style = getComputedStyle(scrollContainer);
+    if (xScrollContainer === null && (style.overflowX === "auto" || style.overflowX === "hidden" || style.overflowX === "scroll")) {
+      xScrollContainer = scrollContainer;
     }
-    if (!hasOverflowHiddenOrAuto) {
-      return () => {}; // Native sticky will work fine
+    if (yScrollContainer === null && (style.overflowY === "auto" || style.overflowY === "hidden" || style.overflowY === "scroll")) {
+      yScrollContainer = scrollContainer;
     }
   }
-
+  const needsPolyfillX = hasLeft && xScrollContainer !== null;
+  const needsPolyfillY = hasTop && yScrollContainer !== null;
+  if (!needsPolyfillX && !needsPolyfillY) {
+    return () => {}; // Native sticky will work fine on both axes
+  }
   const cleanupCallbackSet = new Set();
   const cleanup = () => {
     for (const cleanupCallback of cleanupCallbackSet) {
@@ -8946,7 +8960,6 @@ const initPositionSticky = (element) => {
     }
     cleanupCallbackSet.clear();
   };
-
   const parentElement = element.parentElement;
   const createPlaceholderClone = () => {
     const clone = element.cloneNode(true);
@@ -8954,16 +8967,13 @@ const initPositionSticky = (element) => {
     clone.removeAttribute("data-sticky");
     return clone;
   };
-
   let placeholder = createPlaceholderClone();
   parentElement.insertBefore(placeholder, element);
   cleanupCallbackSet.add(() => {
     placeholder.remove();
   });
-
   let width = getWidth(element);
   let height = getHeight(element);
-
   const updateSize = () => {
     const newPlaceholder = createPlaceholderClone();
     parentElement.replaceChild(newPlaceholder, placeholder);
@@ -8972,84 +8982,114 @@ const initPositionSticky = (element) => {
     height = getHeight(placeholder);
     updatePosition();
   };
-
   const updatePosition = () => {
     // Ensure placeholder dimensions match element
     setStyles(placeholder, {
       width: `${width}px`,
-      height: `${height}px`,
+      height: `${height}px`
     });
-
     const placeholderRect = placeholder.getBoundingClientRect();
     const parentRect = parentElement.getBoundingClientRect();
 
-    // Calculate left position in viewport coordinates (fixed positioning)
-    const leftPosition = placeholderRect.left;
-    element.style.left = `${Math.round(leftPosition)}px`;
+    // The CSS `top`/`left` values are offsets from the scroll container's edge.
+    // getBoundingClientRect() always returns viewport coordinates (already accounting
+    // for scroll position of all ancestors), so to convert the CSS offset to a
+    // viewport threshold we add the scroll container's own viewport position.
+    //
+    // Example: main starts at viewport x=250, left=0 → leftThreshold=250.
+    // After scrolling main 670px: placeholderRect.left = 250-670 = -420.
+    // -420 <= 250 → stuck → element.style.left = 250px (main's left edge). ✓
+    //
+    // If no intermediate scroll container exists, use 0 (document/viewport edge).
+    const yContainerRect = yScrollContainer ? yScrollContainer.getBoundingClientRect() : {
+      top: 0
+    };
+    const xContainerRect = xScrollContainer ? xScrollContainer.getBoundingClientRect() : {
+      left: 0
+    };
+    const topThreshold = yContainerRect.top + top;
+    const leftThreshold = xContainerRect.left + left;
 
-    // Determine if element should be sticky or at its natural position
+    // ── Vertical (top) ──────────────────────────────────────────────────────
     let topPosition;
-    let isStuck = false;
-
-    // Check if we need to stick the element
-    if (placeholderRect.top <= top) {
-      // Element should be stuck at "top" position in the viewport
-      topPosition = top;
-      isStuck = true;
-
-      // But make sure it doesn't go beyond parent's bottom boundary
-      const parentBottom = parentRect.bottom;
-      const elementBottom = top + height;
-
-      if (elementBottom > parentBottom) {
-        // Adjust to stay within parent
-        topPosition = parentBottom - height;
+    let isStuckVertically = false;
+    if (hasTop) {
+      if (placeholderRect.top <= topThreshold) {
+        topPosition = topThreshold;
+        isStuckVertically = true;
+        // Don't go beyond parent's bottom boundary
+        const parentBottom = parentRect.bottom;
+        const elementBottom = topThreshold + height;
+        if (elementBottom > parentBottom) {
+          topPosition = parentBottom - height;
+        }
+      } else {
+        topPosition = placeholderRect.top;
       }
     } else {
-      // Element should be at its natural position in the flow
       topPosition = placeholderRect.top;
     }
 
+    // ── Horizontal (left) ───────────────────────────────────────────────────
+    let leftPosition;
+    let isStuckHorizontally = false;
+    if (hasLeft) {
+      if (placeholderRect.left <= leftThreshold) {
+        leftPosition = leftThreshold;
+        isStuckHorizontally = true;
+        // Don't go beyond parent's right boundary
+        const parentRight = parentRect.right;
+        const elementRight = leftThreshold + width;
+        if (elementRight > parentRight) {
+          leftPosition = parentRight - width;
+        }
+      } else {
+        leftPosition = placeholderRect.left;
+      }
+    } else {
+      leftPosition = placeholderRect.left;
+    }
     element.style.top = `${topPosition}px`;
+    element.style.left = `${Math.round(leftPosition)}px`;
     element.style.width = `${width}px`;
     element.style.height = `${height}px`;
 
     // Set attribute for potential styling
-    if (isStuck) {
+    if (isStuckVertically || isStuckHorizontally) {
       element.setAttribute("data-sticky", "");
     } else {
       element.removeAttribute("data-sticky");
     }
   };
-
   {
     const restorePositionStyle = forceStyles(element, {
       "position": "fixed",
       "z-index": 1,
-      "will-change": "transform", // Hint for hardware acceleration
+      "will-change": "transform" // Hint for hardware acceleration
     });
     cleanupCallbackSet.add(restorePositionStyle);
   }
-
   updatePosition();
-
   {
     const handleScroll = () => {
       updatePosition();
     };
 
-    for (const scrollContainer of scrollContainerSet) {
-      scrollContainer.addEventListener("scroll", handleScroll, {
-        passive: true,
+    // Listen on all scroll containers (including document) since the element
+    // uses position:fixed and any ancestor scroll changes its apparent position.
+    const listenTargets = new Set(scrollContainerSet);
+    listenTargets.add(document.documentElement);
+    for (const scrollTarget of listenTargets) {
+      scrollTarget.addEventListener("scroll", handleScroll, {
+        passive: true
       });
       cleanupCallbackSet.add(() => {
-        scrollContainer.removeEventListener("scroll", handleScroll, {
-          passive: true,
+        scrollTarget.removeEventListener("scroll", handleScroll, {
+          passive: true
         });
       });
     }
   }
-
   {
     let animationFrame = null;
     const resizeObserver = new ResizeObserver(() => {
@@ -9068,7 +9108,6 @@ const initPositionSticky = (element) => {
       animationFrame = null;
     });
   }
-
   {
     const mutationObserver = new MutationObserver(() => {
       updateSize();
@@ -9076,13 +9115,12 @@ const initPositionSticky = (element) => {
     mutationObserver.observe(element, {
       childList: true,
       subtree: true,
-      characterData: true,
+      characterData: true
     });
     cleanupCallbackSet.add(() => {
       mutationObserver.disconnect();
     });
   }
-
   return cleanup;
 };