@jsenv/dom 0.9.3 → 0.9.5

package/dist/jsenv_dom.js

@@ -2227,6 +2227,9 @@ const normalizeStyle = (
   if (propertyName === "lineHeight") {
     if (context === "js") {
       if (typeof value === "string") {
+        if (isCSSFunction(value)) {
+          return value;
+        }
         const unit = getUnit(value);
         if (unit === "px") {
           const float = parseFloat(value);
@@ -2271,6 +2274,9 @@ const normalizeStyle = (
   }
 
   if (colorPropertySet.has(propertyName)) {
+    if (typeof value === "string" && isCSSFunction(value)) {
+      return value;
+    }
     const rgba = parseCSSColor(value, element);
     if (context === "js") {
       return rgba;
@@ -2287,8 +2293,15 @@ const stringifyStyle = (value, propertyName, element) => {
   return normalizeStyle(value, propertyName, "css", element);
 };
 
+const isCSSFunction = (value) => {
+  return /^[a-z-]+\(/.test(value);
+};
 const normalizeNumber = (value, { unit, propertyName, preferedType }) => {
   if (typeof value === "string") {
+    // CSS variables and CSS functions like calc() must be passed through as-is
+    if (isCSSFunction(value)) {
+      return value;
+    }
     // Keep strings as-is (including %, em, rem, auto, none, etc.)
     if (preferedType === "string") {
       if (unit && isUnitless(value) && !unitlessKeywordSet.has(value)) {
@@ -3982,16 +3995,38 @@ const findFocusable = (element) => {
   return focusableDescendant;
 };
 
+// Input types where ArrowUp/Down natively change the value — don't intercept them
+const INPUT_TYPES_WITH_ARROW_MEANING = new Set([
+  "number",
+  "range",
+  "date",
+  "time",
+  "datetime-local",
+  "month",
+  "week",
+]);
+const INPUT_ALLOWED_KEYS = new Set(["Home", "End", "Escape", "Enter"]);
+const INPUT_ARROW_KEYS = new Set(["ArrowDown", "ArrowUp"]);
+const TEXTAREA_ALLOWED_KEYS = new Set(["Escape"]);
+
 const canInterceptKeys = (event) => {
   const target = event.target;
-  // Don't handle shortcuts when user is typing
+  // Allow specific keys on input/textarea/contenteditable elements
+  if (target.tagName === "INPUT") {
+    if (INPUT_ALLOWED_KEYS.has(event.key)) {
+      return true;
+    }
+    if (INPUT_ARROW_KEYS.has(event.key)) {
+      return !INPUT_TYPES_WITH_ARROW_MEANING.has(target.type);
+    }
+    return false;
+  }
   if (
-    target.tagName === "INPUT" ||
     target.tagName === "TEXTAREA" ||
     target.contentEditable === "true" ||
     target.isContentEditable
   ) {
-    return false;
+    return TEXTAREA_ALLOWED_KEYS.has(event.key);
   }
   // Don't handle shortcuts when select dropdown is open
   if (target.tagName === "SELECT") {
@@ -7052,7 +7087,7 @@ import.meta.css = [/* css */`
     inset: 0;
     user-select: none;
   }
-`, "/src/interaction/drag/drag_gesture.js"];
+`, "@jsenv/dom/src/interaction/drag/drag_gesture.js"];
 
 installImportMetaCssBuild(import.meta);const setupConstraintFeedbackLine = () => {
   const constraintFeedbackLine = createConstraintFeedbackLine();
@@ -7141,7 +7176,7 @@ import.meta.css = [/* css */`
   .navi_constraint_feedback_line[data-visible] {
     visibility: visible;
   }
-`, "/src/interaction/drag/constraint_feedback_line.js"];
+`, "@jsenv/dom/src/interaction/drag/constraint_feedback_line.js"];
 
 installImportMetaCssBuild(import.meta);// Keep visual markers (debug markers, obstacle markers, constraint feedback line) in DOM after drag ends
 const MARKER_SIZE = 12;
@@ -7723,7 +7758,7 @@ import.meta.css = [/* css */`
     border-radius: 3px;
     pointer-events: none;
   }
-`, "/src/interaction/drag/drag_debug_markers.js"];
+`, "@jsenv/dom/src/interaction/drag/drag_debug_markers.js"];
 
 const initDragConstraints = (
   dragGesture,
@@ -8916,7 +8951,7 @@ import.meta.css = [/* css */`
     height: auto !important;
     opacity: 0 !important;
   }
-`, "/src/position/position_sticky.js"];
+`, "@jsenv/dom/src/position/position_sticky.js"];
 const initPositionSticky = element => {
   const computedStyle = getComputedStyle(element);
   const topCssValue = computedStyle.top;

package/package.json

@@ -1,21 +1,18 @@
 {
   "name": "@jsenv/dom",
-  "version": "0.9.3",
+  "version": "0.9.5",
+  "type": "module",
   "description": "DOM utilities for writing frontend code",
   "repository": {
     "type": "git",
     "url": "https://github.com/jsenv/core",
     "directory": "packages/frontend/dom"
   },
-  "license": "MIT",
   "author": {
     "name": "dmail",
     "email": "dmaillard06@gmail.com"
   },
-  "sideEffects": [
-    "./dist/jsenv_dom.js"
-  ],
-  "type": "module",
+  "license": "MIT",
   "exports": {
     ".": {
       "node": {
@@ -47,5 +44,8 @@
   },
   "publishConfig": {
     "access": "public"
-  }
+  },
+  "sideEffects": [
+    "./dist/jsenv_dom.js"
+  ]
 }