@jsenv/dom 0.8.5 → 0.8.7

package/dist/jsenv_dom.js

@@ -92,16 +92,17 @@ const getElementSignature = (element) => {
     }
     return `[${functionLabel}]`;
   }
-  if (element.nodeType === Node.TEXT_NODE) {
-    return `#text(${getElementSignature(element.nodeValue)})`;
-  }
   if (element.props) {
     const type = element.type;
+    const elementName = typeof type === "function" ? type.name : type;
     const id = element.props.id;
     if (id) {
-      return `<${type} id="${id}" />`;
+      return `<${elementName} id="${id}" />`;
     }
-    return `<${type} />`;
+    return `<${elementName} />`;
+  }
+  if (element.nodeType === Node.TEXT_NODE) {
+    return `#text(${getElementSignature(element.nodeValue)})`;
   }
 
   const tagName = element.tagName.toLowerCase();
@@ -399,6 +400,14 @@ const parseCSSColor = (color, element) => {
   if (typeof color !== "string") {
     return color;
   }
+  if (color === "inherit") {
+    if (!element) {
+      return color;
+    }
+    const computedStyle = getComputedStyle(element);
+    const resolvedColor = parseCSSColor(computedStyle.color, element);
+    return resolvedColor;
+  }
   let resolvedColor = color;
 
   // Handle light-dark() function
@@ -413,6 +422,40 @@ const parseCSSColor = (color, element) => {
     return parseCSSColor(resolvedColor, element);
   }
 
+  if (color.startsWith("color-mix(")) {
+    return color;
+  }
+
+  // Pass through CSS functions that we don't want to resolve
+  if (
+    color.includes("calc(") ||
+    color.includes("min(") ||
+    color.includes("max(") ||
+    color.includes("clamp(") ||
+    color.includes("env(") ||
+    color.includes("attr(")
+  ) {
+    return color;
+  }
+
+  // Pass through CSS color functions we don't handle
+  if (
+    color.startsWith("color(") ||
+    color.startsWith("lch(") ||
+    color.startsWith("oklch(") ||
+    color.startsWith("lab(") ||
+    color.startsWith("oklab(") ||
+    color.startsWith("hwb(") ||
+    color.includes("color-contrast(")
+  ) {
+    return color;
+  }
+
+  // Pass through relative color syntax (CSS Color Module Level 5)
+  if (color.includes(" from ")) {
+    return color;
+  }
+
   // If it's a CSS custom property, resolve it using getComputedStyle
   if (resolvedColor.includes("var(")) {
     if (!element) {
@@ -3662,26 +3705,29 @@ const createPreviousNodeIterator = (fromNode, rootNode, skipRoot = null) => {
   };
 };
 
-const activeElementSignal = signal(document.activeElement);
-
-document.addEventListener(
-  "focus",
-  () => {
-    activeElementSignal.value = document.activeElement;
-  },
-  { capture: true },
+const activeElementSignal = signal(
+  typeof document === "object" ? document.activeElement : undefined,
 );
-// When clicking on document there is no "focus" event dispatched on the document
-// We can detect that with "blur" event when relatedTarget is null
-document.addEventListener(
-  "blur",
-  (e) => {
-    if (!e.relatedTarget) {
+if (typeof document === "object") {
+  document.addEventListener(
+    "focus",
+    () => {
       activeElementSignal.value = document.activeElement;
-    }
-  },
-  { capture: true },
-);
+    },
+    { capture: true },
+  );
+  // When clicking on document there is no "focus" event dispatched on the document
+  // We can detect that with "blur" event when relatedTarget is null
+  document.addEventListener(
+    "blur",
+    (e) => {
+      if (!e.relatedTarget) {
+        activeElementSignal.value = document.activeElement;
+      }
+    },
+    { capture: true },
+  );
+}
 
 const useActiveElement = () => {
   return activeElementSignal.value;
@@ -5050,7 +5096,8 @@ const bodyIsScrollable = (body) => {
 // https://developer.mozilla.org/en-US/docs/Glossary/Scroll_container
 
 
-const { documentElement: documentElement$2 } = document;
+const { documentElement: documentElement$2 } =
+  typeof document === "object" ? document : { documentElement: null };
 
 const getScrollContainer = (arg, { includeHidden } = {}) => {
   if (typeof arg !== "object" || arg.nodeType !== 1) {
@@ -5291,7 +5338,8 @@ const getBorderSizes = (element) => {
  */
 
 
-const { documentElement: documentElement$1 } = document;
+const { documentElement: documentElement$1 } =
+  typeof document === "object" ? document : { documentElement: null };
 
 /**
  * Get element rectangle relative to its scroll container
@@ -6154,7 +6202,9 @@ const isOverlayOf = (element, potentialTarget) => {
   return false;
 };
 
-const { documentElement } = document;
+const { documentElement } =
+  typeof document === "object" ? document : { documentElement: null };
+
 const createGetScrollOffsets = (
   scrollContainer,
   referenceScrollContainer,
@@ -9372,6 +9422,7 @@ const pickPositionRelativeTo = (
   {
     alignToViewportEdgeWhenTargetNearEdge = 0,
     minLeft = 0,
+    positionPreference,
     forcePosition,
   } = {},
 ) => {
@@ -9452,8 +9503,12 @@ const pickPositionRelativeTo = (
       position = forcePosition;
       break determine_position;
     }
-    const preferredPosition = element.getAttribute("data-position");
+    const elementPreferredPosition = element.getAttribute("data-position");
     const minContentVisibilityRatio = 0.6; // 60% minimum visibility to keep position
+
+    // Check positionPreference parameter first, then element attribute
+    const preferredPosition = positionPreference || elementPreferredPosition;
+
     if (preferredPosition) {
       // Element has a preferred position - try to keep it unless we really struggle
       const visibleRatio =
@@ -9651,7 +9706,9 @@ const startTimeline = () => {
   backgroundUpdateLoop.start();
   animationUpdateLoop.start();
 };
-startTimeline();
+if (typeof document === "object") {
+  startTimeline();
+}
 
 // Default lifecycle methods that do nothing
 const LIFECYCLE_DEFAULT = {
@@ -9671,11 +9728,13 @@ const onTransitionPausedByBreakpoint = (transition) => {
 const cleanupTransitionPausedByBreakpoint = (transition) => {
   transitionPausedByBreakpointWeakSet.delete(transition);
 };
-window.resumeTransitions = () => {
-  for (const transition of transitionPausedByBreakpointWeakSet) {
-    transition.play();
-  }
-};
+if (typeof window !== "undefined") {
+  window.resumeTransitions = () => {
+    for (const transition of transitionPausedByBreakpointWeakSet) {
+      transition.play();
+    }
+  };
+}
 
 const combineTwoLifecycle = (lifecycleA, lifecycleB) => {
   if (!lifecycleA && !lifecycleB) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jsenv/dom",
-  "version": "0.8.5",
+  "version": "0.8.7",
   "description": "DOM utilities for writing frontend code",
   "repository": {
     "type": "git",