@splendidlabz/utils 1.9.1 → 1.10.1

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @splendidlabz/utils
 
+## 1.10.1
+
+### Patch Changes
+
+- Fix circular references and typescript errors
+
+## 1.10.0
+
+### Minor Changes
+
+- 4efacb3: - 6c636877 fix scroll observer
+  - 54effb06 add rlh
+
 ## 1.9.1
 
 ### Patch Changes

package/dist/cjs/dom/actions/index.cjs

@@ -108,12 +108,14 @@ function useObserverMethodOnTarget(target, observer, method = "observe", options
 function resizeObserver(target, options) {
   const { callback, ...opts } = options;
   const observer = new ResizeObserver(observerFn);
-  if (target === window) target = document.body;
+  if (target === window || target === document)
+    target = document.documentElement;
   useObserverMethodOnTarget(target, observer, "observe", opts);
   function observerFn(entries) {
     for (const entry of entries) {
       if (callback) callback({ entry, entries, observer });
-      else dispatchEvent(target, "resize-obs", { entry, entries, observer });
+      else
+        dispatchEvent(entry.target, "resize-obs", { entry, entries, observer });
     }
   }
   return {
@@ -161,58 +163,6 @@ function nativeMasonrySupport(node) {
   return getComputedStyle(node).gridTemplateRows === "masonry";
 }
 
-// src/dom/bounding-box.js
-function boundingBox(element, { containsPadding = true } = {}) {
-  const box = element.getBoundingClientRect();
-  const ret = {};
-  for (const prop in box) ret[prop] = box[prop];
-  if (!containsPadding) {
-    const style = getComputedStyle(element);
-    const paddingTop = parseFloat(style.paddingTop);
-    const paddingRight = parseFloat(style.paddingRight);
-    const paddingBottom = parseFloat(style.paddingBottom);
-    const paddingLeft = parseFloat(style.paddingLeft);
-    ret.x = ret.x + paddingLeft;
-    ret.y = ret.y + paddingTop;
-    ret.width = ret.width - paddingLeft - paddingRight;
-    ret.height = ret.height - paddingTop - paddingBottom;
-    ret.top = ret.top + paddingTop;
-    ret.bottom = ret.bottom - paddingBottom;
-    ret.right = ret.right - paddingRight;
-    ret.left = ret.left + paddingLeft;
-  }
-  ret.xCenter = (ret.left + ret.right) / 2;
-  ret.yCenter = (ret.top + ret.bottom) / 2;
-  return ret;
-}
-function boundingBoxRelativeToAncestor({ element, ancestorElement }) {
-  ancestorElement = ancestorElement || element.parentElement;
-  const box = boundingBox(element);
-  const ancestorBox = boundingBox(ancestorElement, {
-    containsPadding: false
-  });
-  return {
-    top: box.top - ancestorBox.top,
-    right: box.right - ancestorBox.right,
-    bottom: box.bottom - ancestorBox.bottom,
-    left: box.left - ancestorBox.left,
-    width: box.width,
-    height: box.height,
-    xCenter: (box.left + box.right) / 2 - ancestorBox.left,
-    yCenter: (box.top + box.bottom) / 2 - ancestorBox.top
-  };
-}
-
-// src/dom/css-vars.js
-function getCSSVar(element, prop) {
-  element = getElement(element);
-  return getComputedStyle(element).getPropertyValue(prop);
-}
-function setCSSVar(element, prop, value) {
-  element = getElement(element);
-  element.style.setProperty(prop, value);
-}
-
 // src/lib/objects/omit-empty.js
 function omitEmpty(obj, shallow = false) {
   if (typeof obj !== "object" || obj === null) return obj;
@@ -227,25 +177,14 @@ function omitEmpty(obj, shallow = false) {
   return result;
 }
 
-// src/dom/ui/scroll-container.js
-function findScrollContainer(element, direction = "both") {
-  if (!element) return;
-  let parent = element.parentElement;
-  while (parent) {
-    const { overflow, overflowX, overflowY } = getComputedStyle(parent);
-    if (direction === "both") {
-      if (overflow.includes("auto") || overflow.includes("scroll"))
-        return parent;
-    }
-    if (direction === "horizontal") {
-      if (overflowX === "auto" || overflowX === "scroll") return parent;
-    }
-    if (direction === "vertical") {
-      if (overflowY === "auto" || overflowY === "scroll") return parent;
-    }
-    parent = parent.parentElement;
-  }
-  return document.documentElement;
+// src/dom/css-vars.js
+function getCSSVar(element, prop) {
+  element = getElement(element);
+  return getComputedStyle(element).getPropertyValue(prop);
+}
+function setCSSVar(element, prop, value) {
+  element = getElement(element);
+  element.style.setProperty(prop, value);
 }
 
 // src/dom/actions/prefer-horizontal-scroll.js
@@ -334,6 +273,69 @@ function isTrackpad(event) {
   if (event.wheelDeltaY === event.deltaY * -3) return true;
 }
 
+// src/dom/bounding-box.js
+function boundingBox(element, { containsPadding = true } = {}) {
+  const box = element.getBoundingClientRect();
+  const ret = {};
+  for (const prop in box) ret[prop] = box[prop];
+  if (!containsPadding) {
+    const style = getComputedStyle(element);
+    const paddingTop = parseFloat(style.paddingTop);
+    const paddingRight = parseFloat(style.paddingRight);
+    const paddingBottom = parseFloat(style.paddingBottom);
+    const paddingLeft = parseFloat(style.paddingLeft);
+    ret.x = ret.x + paddingLeft;
+    ret.y = ret.y + paddingTop;
+    ret.width = ret.width - paddingLeft - paddingRight;
+    ret.height = ret.height - paddingTop - paddingBottom;
+    ret.top = ret.top + paddingTop;
+    ret.bottom = ret.bottom - paddingBottom;
+    ret.right = ret.right - paddingRight;
+    ret.left = ret.left + paddingLeft;
+  }
+  ret.xCenter = (ret.left + ret.right) / 2;
+  ret.yCenter = (ret.top + ret.bottom) / 2;
+  return ret;
+}
+function boundingBoxRelativeToAncestor({ element, ancestorElement }) {
+  ancestorElement = ancestorElement || element.parentElement;
+  const box = boundingBox(element);
+  const ancestorBox = boundingBox(ancestorElement, {
+    containsPadding: false
+  });
+  return {
+    top: box.top - ancestorBox.top,
+    right: box.right - ancestorBox.right,
+    bottom: box.bottom - ancestorBox.bottom,
+    left: box.left - ancestorBox.left,
+    width: box.width,
+    height: box.height,
+    xCenter: (box.left + box.right) / 2 - ancestorBox.left,
+    yCenter: (box.top + box.bottom) / 2 - ancestorBox.top
+  };
+}
+
+// src/dom/ui/scroll-container.js
+function findScrollContainer(element, direction = "both") {
+  if (!element) return;
+  let parent = element.parentElement;
+  while (parent) {
+    const { overflow, overflowX, overflowY } = getComputedStyle(parent);
+    if (direction === "both") {
+      if (overflow.includes("auto") || overflow.includes("scroll"))
+        return parent;
+    }
+    if (direction === "horizontal") {
+      if (overflowX === "auto" || overflowX === "scroll") return parent;
+    }
+    if (direction === "vertical") {
+      if (overflowY === "auto" || overflowY === "scroll") return parent;
+    }
+    parent = parent.parentElement;
+  }
+  return document.documentElement;
+}
+
 // src/dom/actions/sticky.js
 function sticky(node, props = {}) {
   const scrollContainer = findScrollContainer(node);

package/dist/cjs/dom/actions/masonry.cjs

@@ -91,12 +91,14 @@ function useObserverMethodOnTarget(target, observer, method = "observe", options
 function resizeObserver(target, options) {
   const { callback, ...opts } = options;
   const observer = new ResizeObserver(observerFn);
-  if (target === window) target = document.body;
+  if (target === window || target === document)
+    target = document.documentElement;
   useObserverMethodOnTarget(target, observer, "observe", opts);
   function observerFn(entries) {
     for (const entry of entries) {
       if (callback) callback({ entry, entries, observer });
-      else dispatchEvent(target, "resize-obs", { entry, entries, observer });
+      else
+        dispatchEvent(entry.target, "resize-obs", { entry, entries, observer });
     }
   }
   return {

package/dist/cjs/dom/actions/prefer-horizontal-scroll.cjs

@@ -23,6 +23,20 @@ __export(prefer_horizontal_scroll_exports, {
 });
 module.exports = __toCommonJS(prefer_horizontal_scroll_exports);
 
+// src/lib/objects/omit-empty.js
+function omitEmpty(obj, shallow = false) {
+  if (typeof obj !== "object" || obj === null) return obj;
+  if (obj instanceof Date) return obj;
+  const result = Array.isArray(obj) ? [] : {};
+  for (const [key, value] of Object.entries(obj)) {
+    if (value === null || value === void 0 || value === "" || typeof value === "object" && !(value instanceof Date) && Object.keys(value).length === 0) {
+      continue;
+    }
+    result[key] = shallow ? value : omitEmpty(value);
+  }
+  return result;
+}
+
 // src/dom/get-element.js
 function getElement(selector) {
   if (!selector) return;
@@ -30,18 +44,6 @@ function getElement(selector) {
   return document.querySelector(selector);
 }
 
-// src/dom/events.js
-function addListeners(listeners) {
-  listeners.forEach(({ node, event, handler }) => {
-    node.addEventListener(event, handler);
-  });
-}
-function removeListeners(listeners) {
-  listeners.forEach(({ node, event, handler }) => {
-    node.removeEventListener(event, handler);
-  });
-}
-
 // src/dom/css-vars.js
 function getCSSVar(element, prop) {
   element = getElement(element);
@@ -52,18 +54,16 @@ function setCSSVar(element, prop, value) {
   element.style.setProperty(prop, value);
 }
 
-// src/lib/objects/omit-empty.js
-function omitEmpty(obj, shallow = false) {
-  if (typeof obj !== "object" || obj === null) return obj;
-  if (obj instanceof Date) return obj;
-  const result = Array.isArray(obj) ? [] : {};
-  for (const [key, value] of Object.entries(obj)) {
-    if (value === null || value === void 0 || value === "" || typeof value === "object" && !(value instanceof Date) && Object.keys(value).length === 0) {
-      continue;
-    }
-    result[key] = shallow ? value : omitEmpty(value);
-  }
-  return result;
+// src/dom/events.js
+function addListeners(listeners) {
+  listeners.forEach(({ node, event, handler }) => {
+    node.addEventListener(event, handler);
+  });
+}
+function removeListeners(listeners) {
+  listeners.forEach(({ node, event, handler }) => {
+    node.removeEventListener(event, handler);
+  });
 }
 
 // src/dom/actions/prefer-horizontal-scroll.js

package/dist/cjs/dom/actions/sticky.cjs

@@ -99,12 +99,14 @@ function useObserverMethodOnTarget(target, observer, method = "observe", options
 function resizeObserver(target, options) {
   const { callback, ...opts } = options;
   const observer = new ResizeObserver(observerFn);
-  if (target === window) target = document.body;
+  if (target === window || target === document)
+    target = document.documentElement;
   useObserverMethodOnTarget(target, observer, "observe", opts);
   function observerFn(entries) {
     for (const entry of entries) {
       if (callback) callback({ entry, entries, observer });
-      else dispatchEvent(target, "resize-obs", { entry, entries, observer });
+      else
+        dispatchEvent(entry.target, "resize-obs", { entry, entries, observer });
     }
   }
   return {

package/dist/cjs/dom/font-size.cjs

@@ -23,6 +23,7 @@ __export(font_size_exports, {
   getUnit: () => getUnit,
   lh: () => lh,
   rem: () => rem,
+  rlh: () => rlh,
   toPx: () => toPx
 });
 module.exports = __toCommonJS(font_size_exports);
@@ -41,13 +42,17 @@ function getUnit(value) {
   const [, unit] = splitUnit(value);
   return unit;
 }
+function rem(multiple = 1) {
+  const value = parseFloat(getComputedStyle(document.body)["font-size"]);
+  return Math.round(value * multiple);
+}
 function em(element = document.body, multiple = 1) {
   const value = parseFloat(getComputedStyle(element)["font-size"]);
   return Math.round(value * multiple);
 }
-function rem(multiple = 1) {
-  const value = parseFloat(getComputedStyle(document.body)["font-size"]);
-  return Math.round(value * multiple);
+function rlh(multiple = 1) {
+  const lineHeight = parseFloat(getComputedStyle(document.body)["line-height"]);
+  return Math.round(lineHeight * multiple);
 }
 function lh(element = document.body, multiple = 1) {
   const lineHeight = getComputedStyle(element)["line-height"];
@@ -70,5 +75,6 @@ function toPx(value, element = null) {
   getUnit,
   lh,
   rem,
+  rlh,
   toPx
 });

package/dist/cjs/dom/index.cjs

@@ -77,6 +77,7 @@ __export(dom_exports, {
   rem: () => rem,
   removeListeners: () => removeListeners,
   resizeObserver: () => resizeObserver,
+  rlh: () => rlh,
   sanitize: () => sanitize2,
   scrollObserver: () => scrollObserver,
   scrollToElement: () => scrollToElement,
@@ -248,12 +249,14 @@ function useObserverMethodOnTarget(target, observer, method = "observe", options
 function resizeObserver(target, options) {
   const { callback, ...opts } = options;
   const observer = new ResizeObserver(observerFn);
-  if (target === window) target = document.body;
+  if (target === window || target === document)
+    target = document.documentElement;
   useObserverMethodOnTarget(target, observer, "observe", opts);
   function observerFn(entries) {
     for (const entry of entries) {
       if (callback) callback({ entry, entries, observer });
-      else dispatchEvent(target, "resize-obs", { entry, entries, observer });
+      else
+        dispatchEvent(entry.target, "resize-obs", { entry, entries, observer });
     }
   }
   return {
@@ -301,36 +304,6 @@ function nativeMasonrySupport(node) {
   return getComputedStyle(node).gridTemplateRows === "masonry";
 }
 
-// src/lib/numbers/index.js
-function splitUnit(string) {
-  if (typeof string === "number") return [string, null];
-  const regex = /(-?\d*\.?\d+)\s*([a-z]+)/i;
-  const match = string.match(regex);
-  if (match) return [parseFloat(match[1]), match[2]];
-  return [parseFloat(string), null];
-}
-
-// src/lib/form/sanitize.js
-function sanitize(value, options = {}) {
-  const { sanitizer, ...rest } = options;
-  if (!sanitizer) throw new Error("sanitizer function is required");
-  if (typeof value === "string") return sanitizer(value, rest);
-  if (Array.isArray(value)) return sanitizeArray(value, { sanitizer, ...rest });
-  if (value && typeof value === "object") {
-    return Object.fromEntries(
-      Object.entries(value).map(([key, val]) => [
-        key,
-        sanitize(val, { sanitizer, ...rest })
-      ])
-    );
-  }
-  return value;
-}
-function sanitizeArray(arr, { sanitizer, ...rest }) {
-  if (!sanitizer) throw new Error("sanitizer function is required");
-  return arr.map((item) => sanitize(item, { sanitizer, ...rest }));
-}
-
 // src/lib/objects/omit-empty.js
 function omitEmpty(obj, shallow = false) {
   if (typeof obj !== "object" || obj === null) return obj;
@@ -345,6 +318,22 @@ function omitEmpty(obj, shallow = false) {
   return result;
 }
 
+// src/dom/css-vars.js
+function getCSSValue(element, prop) {
+  return getCSSVar(element, prop);
+}
+function setCSSValue(element, prop, value) {
+  setCSSVar(element, prop, value);
+}
+function getCSSVar(element, prop) {
+  element = getElement(element);
+  return getComputedStyle(element).getPropertyValue(prop);
+}
+function setCSSVar(element, prop, value) {
+  element = getElement(element);
+  element.style.setProperty(prop, value);
+}
+
 // src/dom/actions/prefer-horizontal-scroll.js
 var DEFAULT_OPTIONS = {
   scrollSnapDelay: 1e3
@@ -600,22 +589,6 @@ function setCookie(name, value, days) {
   document.cookie = name + "=" + (value || "") + expires + "; path=/";
 }
 
-// src/dom/css-vars.js
-function getCSSValue(element, prop) {
-  return getCSSVar(element, prop);
-}
-function setCSSValue(element, prop, value) {
-  setCSSVar(element, prop, value);
-}
-function getCSSVar(element, prop) {
-  element = getElement(element);
-  return getComputedStyle(element).getPropertyValue(prop);
-}
-function setCSSVar(element, prop, value) {
-  element = getElement(element);
-  element.style.setProperty(prop, value);
-}
-
 // src/dom/focusable.js
 function getFocusableElements(container = document.body) {
   return {
@@ -731,18 +704,31 @@ function Focusable(container = document.body) {
   return getFocusableElements(container);
 }
 
+// src/lib/numbers/index.js
+function splitUnit(string) {
+  if (typeof string === "number") return [string, null];
+  const regex = /(-?\d*\.?\d+)\s*([a-z]+)/i;
+  const match = string.match(regex);
+  if (match) return [parseFloat(match[1]), match[2]];
+  return [parseFloat(string), null];
+}
+
 // src/dom/font-size.js
 function getUnit(value) {
   const [, unit] = splitUnit(value);
   return unit;
 }
+function rem(multiple = 1) {
+  const value = parseFloat(getComputedStyle(document.body)["font-size"]);
+  return Math.round(value * multiple);
+}
 function em(element = document.body, multiple = 1) {
   const value = parseFloat(getComputedStyle(element)["font-size"]);
   return Math.round(value * multiple);
 }
-function rem(multiple = 1) {
-  const value = parseFloat(getComputedStyle(document.body)["font-size"]);
-  return Math.round(value * multiple);
+function rlh(multiple = 1) {
+  const lineHeight = parseFloat(getComputedStyle(document.body)["line-height"]);
+  return Math.round(lineHeight * multiple);
 }
 function lh(element = document.body, multiple = 1) {
   const lineHeight = getComputedStyle(element)["line-height"];
@@ -915,40 +901,44 @@ var defaultOptions2 = {
   // Float between 0 to 1.
   tolerance: 0.1,
   // Float between 0 to 1. Tolerance for event firing
-  throttle: 16,
-  // Throttle interval in ms (default: ~60fps)
   once: false
   // Only fire threshold callback once
 };
+function getScrollElement(node) {
+  if (node === document || node === window || node === document.documentElement) {
+    return document.documentElement;
+  }
+  return (
+    /** @type {Element} */
+    node
+  );
+}
 function scrollObserver(node, options = {}) {
   const { callback, onScrollDown, onScrollUp, onEnterThreshold, ...userOpts } = options;
   const opts = { ...defaultOptions2, ...userOpts };
-  const { threshold, tolerance, throttle, once } = opts;
-  const prevScrollDirection = null;
+  const { threshold, tolerance, once } = opts;
+  let prevScrollDirection = null;
   let prevScrollTop = 0;
   let prevScrollPercent = 0;
-  let lastThrottleTime = 0;
   let thresholdFired = false;
   let rafId = null;
-  const isDocumentScroll = node === document || node === window;
-  const scrollElement = isDocumentScroll ? document.documentElement : node;
+  const isDocumentScroll = node === document || node === window || node === document.documentElement;
+  const scrollElement = getScrollElement(node);
+  const eventTarget = isDocumentScroll ? window : node;
   let cachedScrollHeight = 0;
   let cachedClientHeight = 0;
   updateCache();
   const cacheObserver = resizeObserver(scrollElement, {
     callback: updateCache
   });
-  node.addEventListener("scroll", throttledObserve, { passive: true });
+  eventTarget.addEventListener("scroll", throttledObserve, { passive: true });
+  function throttledObserve() {
+    rafId = requestAnimationFrame(observe);
+  }
   function updateCache() {
     cachedScrollHeight = scrollElement.scrollHeight;
     cachedClientHeight = scrollElement.clientHeight;
   }
-  function throttledObserve() {
-    const now = Date.now();
-    if (now - lastThrottleTime < throttle) return;
-    lastThrottleTime = now;
-    rafId = requestAnimationFrame(observe);
-  }
   function observe() {
     const scrollTop = scrollElement.scrollTop;
     if (Math.abs(scrollTop - prevScrollTop) < 1) return;
@@ -987,10 +977,11 @@ function scrollObserver(node, options = {}) {
     }
     prevScrollTop = scrollTop;
     prevScrollPercent = scrollPercent;
+    prevScrollDirection = scrollDirection;
   }
   return {
     destroy() {
-      node.removeEventListener("scroll", throttledObserve);
+      eventTarget.removeEventListener("scroll", throttledObserve);
       if (rafId) cancelAnimationFrame(rafId);
       cacheObserver.destroy();
     }
@@ -1039,6 +1030,29 @@ var queryParams = {
 
 // src/dom/sanitize.js
 var import_dompurify = __toESM(require("dompurify"), 1);
+
+// src/lib/form/sanitize.js
+function sanitize(value, options = {}) {
+  const { sanitizer, ...rest } = options;
+  if (!sanitizer) throw new Error("sanitizer function is required");
+  if (typeof value === "string") return sanitizer(value, rest);
+  if (Array.isArray(value)) return sanitizeArray(value, { sanitizer, ...rest });
+  if (value && typeof value === "object") {
+    return Object.fromEntries(
+      Object.entries(value).map(([key, val]) => [
+        key,
+        sanitize(val, { sanitizer, ...rest })
+      ])
+    );
+  }
+  return value;
+}
+function sanitizeArray(arr, { sanitizer, ...rest }) {
+  if (!sanitizer) throw new Error("sanitizer function is required");
+  return arr.map((item) => sanitize(item, { sanitizer, ...rest }));
+}
+
+// src/dom/sanitize.js
 function sanitize2(value, options = {}) {
   return sanitize(value, { sanitizer: import_dompurify.default.sanitize, ...options });
 }
@@ -1234,6 +1248,7 @@ function scrambleText(text) {
   rem,
   removeListeners,
   resizeObserver,
+  rlh,
   sanitize,
   scrollObserver,
   scrollToElement,

package/dist/cjs/dom/observers/index.cjs

@@ -130,12 +130,14 @@ function mutationObserver(target, options) {
 function resizeObserver(target, options) {
   const { callback, ...opts } = options;
   const observer = new ResizeObserver(observerFn);
-  if (target === window) target = document.body;
+  if (target === window || target === document)
+    target = document.documentElement;
   useObserverMethodOnTarget(target, observer, "observe", opts);
   function observerFn(entries) {
     for (const entry of entries) {
       if (callback) callback({ entry, entries, observer });
-      else dispatchEvent(target, "resize-obs", { entry, entries, observer });
+      else
+        dispatchEvent(entry.target, "resize-obs", { entry, entries, observer });
     }
   }
   return {
@@ -156,40 +158,44 @@ var defaultOptions2 = {
   // Float between 0 to 1.
   tolerance: 0.1,
   // Float between 0 to 1. Tolerance for event firing
-  throttle: 16,
-  // Throttle interval in ms (default: ~60fps)
   once: false
   // Only fire threshold callback once
 };
+function getScrollElement(node) {
+  if (node === document || node === window || node === document.documentElement) {
+    return document.documentElement;
+  }
+  return (
+    /** @type {Element} */
+    node
+  );
+}
 function scrollObserver(node, options = {}) {
   const { callback, onScrollDown, onScrollUp, onEnterThreshold, ...userOpts } = options;
   const opts = { ...defaultOptions2, ...userOpts };
-  const { threshold, tolerance, throttle, once } = opts;
-  const prevScrollDirection = null;
+  const { threshold, tolerance, once } = opts;
+  let prevScrollDirection = null;
   let prevScrollTop = 0;
   let prevScrollPercent = 0;
-  let lastThrottleTime = 0;
   let thresholdFired = false;
   let rafId = null;
-  const isDocumentScroll = node === document || node === window;
-  const scrollElement = isDocumentScroll ? document.documentElement : node;
+  const isDocumentScroll = node === document || node === window || node === document.documentElement;
+  const scrollElement = getScrollElement(node);
+  const eventTarget = isDocumentScroll ? window : node;
   let cachedScrollHeight = 0;
   let cachedClientHeight = 0;
   updateCache();
   const cacheObserver = resizeObserver(scrollElement, {
     callback: updateCache
   });
-  node.addEventListener("scroll", throttledObserve, { passive: true });
+  eventTarget.addEventListener("scroll", throttledObserve, { passive: true });
+  function throttledObserve() {
+    rafId = requestAnimationFrame(observe);
+  }
   function updateCache() {
     cachedScrollHeight = scrollElement.scrollHeight;
     cachedClientHeight = scrollElement.clientHeight;
   }
-  function throttledObserve() {
-    const now = Date.now();
-    if (now - lastThrottleTime < throttle) return;
-    lastThrottleTime = now;
-    rafId = requestAnimationFrame(observe);
-  }
   function observe() {
     const scrollTop = scrollElement.scrollTop;
     if (Math.abs(scrollTop - prevScrollTop) < 1) return;
@@ -228,10 +234,11 @@ function scrollObserver(node, options = {}) {
     }
     prevScrollTop = scrollTop;
     prevScrollPercent = scrollPercent;
+    prevScrollDirection = scrollDirection;
   }
   return {
     destroy() {
-      node.removeEventListener("scroll", throttledObserve);
+      eventTarget.removeEventListener("scroll", throttledObserve);
       if (rafId) cancelAnimationFrame(rafId);
       cacheObserver.destroy();
     }