@jsenv/dom 0.8.6 → 0.8.8

package/dist/jsenv_dom.js

@@ -422,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) {
@@ -3671,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;
@@ -5059,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) {
@@ -5300,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
@@ -6163,7 +6202,9 @@ const isOverlayOf = (element, potentialTarget) => {
   return false;
 };
 
-const { documentElement } = document;
+const { documentElement } =
+  typeof document === "object" ? document : { documentElement: null };
+
 const createGetScrollOffsets = (
   scrollContainer,
   referenceScrollContainer,
@@ -7037,12 +7078,12 @@ const createConstraintFeedbackLine = () => {
 import.meta.css = /* css */ `
   .navi_constraint_feedback_line {
     position: fixed;
-    pointer-events: none;
     z-index: 9998;
+    border-top: 2px dotted rgba(59, 130, 246, 0.7);
     visibility: hidden;
-    transition: opacity 0.15s ease;
     transform-origin: left center;
-    border-top: 2px dotted rgba(59, 130, 246, 0.7);
+    transition: opacity 0.15s ease;
+    pointer-events: none;
   }
 
   .navi_constraint_feedback_line[data-visible] {
@@ -7483,11 +7524,11 @@ import.meta.css = /* css */ `
     position: fixed;
     top: 0;
     left: 0;
+    z-index: 999998;
     width: 100vw;
     height: 100vh;
-    overflow: hidden;
     pointer-events: none;
-    z-index: 999998;
+    overflow: hidden;
     --marker-size: ${MARKER_SIZE}px;
   }
 
@@ -7552,33 +7593,33 @@ import.meta.css = /* css */ `
 
   .navi_debug_marker_label {
     position: absolute;
-    font-size: 12px;
+    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);
-    padding: 2px 6px;
-    border-radius: 3px;
     border: 1px solid;
-    white-space: nowrap;
-    pointer-events: none;
-    color: rgb(from var(--marker-color) r g b / 1);
     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 {
-    left: 10px;
     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;
-    top: 20px;
     transform: rotate(-90deg);
     transform-origin: right center;
   }
@@ -7591,16 +7632,16 @@ import.meta.css = /* css */ `
 
   /* Bottom side markers - horizontal, label on the line */
   .navi_debug_marker[data-bottom] .navi_debug_marker_label {
-    bottom: 0px;
     top: auto;
+    bottom: 0px;
     left: 20px;
   }
 
   .navi_obstacle_marker {
     position: absolute;
+    z-index: 9999;
     background-color: orange;
     opacity: 0.6;
-    z-index: 9999;
     pointer-events: none;
   }
 
@@ -7608,20 +7649,20 @@ import.meta.css = /* css */ `
     position: absolute;
     top: 50%;
     left: 50%;
-    transform: translate(-50%, -50%);
-    font-size: 12px;
-    font-weight: bold;
     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;
-    z-index: 9997;
     pointer-events: none;
   }
 
@@ -7629,23 +7670,23 @@ import.meta.css = /* css */ `
     position: absolute;
     top: -25px;
     right: 0;
-    font-size: 11px;
-    font-weight: bold;
+    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);
-    padding: 2px 6px;
-    border-radius: 3px;
     border: 1px solid var(--element-color, rgb(255, 0, 150));
-    white-space: nowrap;
+    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;
-    z-index: 9998;
     pointer-events: none;
   }
 
@@ -7653,14 +7694,14 @@ import.meta.css = /* css */ `
     position: absolute;
     top: -25px;
     left: 0;
-    font-size: 11px;
-    font-weight: bold;
+    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);
-    padding: 2px 6px;
-    border-radius: 3px;
     border: 1px solid rgba(0, 150, 255, 0.7);
-    white-space: nowrap;
+    border-radius: 3px;
     pointer-events: none;
   }
 `;
@@ -8318,7 +8359,7 @@ const createDragToMoveGestureController = ({
     { element, referenceElement, elementToMove, convertScrollablePosition },
   ) => {
     const direction = dragGesture.gestureInfo.direction;
-    dragGesture.gestureInfo.name;
+    // const dragGestureName = dragGesture.gestureInfo.name;
     const scrollContainer = dragGesture.gestureInfo.scrollContainer;
     const elementImpacted = elementToMove || element;
     const translateXAtGrab = dragStyleController.getUnderlyingValue(
@@ -8375,7 +8416,9 @@ const createDragToMoveGestureController = ({
             autoScrollArea,
             {
               scrollContainer,
-              direction},
+              direction,
+              // dragGestureName,
+            },
           );
         }
         if (autoScrollAreaPadding > 0) {
@@ -8828,10 +8871,10 @@ const getWidth = (element) => {
 installImportMetaCss(import.meta);
 import.meta.css = /* css */ `
   [data-position-sticky-placeholder] {
-    opacity: 0 !important;
     position: static !important;
     width: auto !important;
     height: auto !important;
+    opacity: 0 !important;
   }
 `;
 
@@ -9665,7 +9708,9 @@ const startTimeline = () => {
   backgroundUpdateLoop.start();
   animationUpdateLoop.start();
 };
-startTimeline();
+if (typeof document === "object") {
+  startTimeline();
+}
 
 // Default lifecycle methods that do nothing
 const LIFECYCLE_DEFAULT = {
@@ -9685,11 +9730,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.6",
+  "version": "0.8.8",
   "description": "DOM utilities for writing frontend code",
   "repository": {
     "type": "git",
@@ -18,8 +18,13 @@
   "type": "module",
   "exports": {
     ".": {
-      "dev:jsenv": "./index.js",
-      "default": "./dist/jsenv_dom.js"
+      "node": {
+        "default": "./index_node.js"
+      },
+      "browser": {
+        "dev:jsenv": "./index.js",
+        "default": "./dist/jsenv_dom.js"
+      }
     },
     "./details_content_full_height": "./src/size/details_content_full_height.js",
     "./details_toggle_animation": "./src/details_toggle_animation.js",
@@ -37,7 +42,7 @@
     "@jsenv/core": "../../../",
     "@jsenv/navi": "../navi",
     "@jsenv/snapshot": "../../tooling/snapshot",
-    "@preact/signals": "2.5.0",
+    "@preact/signals": "2.5.1",
     "preact": "11.0.0-beta.0"
   },
   "publishConfig": {