@jsenv/dom 0.7.1 → 0.7.3

package/dist/jsenv_dom.js

@@ -463,6 +463,61 @@ const unitlessProperties = [
   "scaleZ",
 ];
 
+// Well-known CSS units and keywords that indicate a value already has proper formatting
+const cssSizeUnitSet = new Set([
+  "px",
+  "em",
+  "rem",
+  "ex",
+  "ch",
+  "vw",
+  "vh",
+  "vmin",
+  "vmax",
+  "cm",
+  "mm",
+  "in",
+  "pt",
+  "pc",
+]);
+const cssUnitSet = new Set([
+  ...cssSizeUnitSet,
+  "%",
+  // Angle units
+  "deg",
+  "rad",
+  "grad",
+  "turn",
+  // Time units
+  "s",
+  "ms",
+  // Frequency units
+  "Hz",
+  "kHz",
+]);
+const cssKeywordSet = new Set([
+  // Keywords that shouldn't get units
+  "auto",
+  "none",
+  "inherit",
+  "initial",
+  "unset",
+  "revert",
+]);
+
+// Check if value already has a unit or is a keyword
+const hasUnit = (value) => {
+  for (const cssUnit of cssUnitSet) {
+    if (value.endsWith(cssUnit)) {
+      return true;
+    }
+  }
+  return false;
+};
+const isKeyword = (value) => {
+  return cssKeywordSet.has(value);
+};
+
 // Normalize a single style value
 const normalizeStyle = (value, propertyName, context = "js") => {
   if (propertyName === "transform") {
@@ -544,6 +599,9 @@ const normalizeNumber = (value, { unit, propertyName, preferedType }) => {
   if (typeof value === "string") {
     // Keep strings as-is (including %, em, rem, auto, none, etc.)
     if (preferedType === "string") {
+      if (unit && !hasUnit(value) && !isKeyword(value)) {
+        return `${value}${unit}`;
+      }
       return value;
     }
     // convert to number if possible (font-size: "12px" -> fontSize:12, opacity: "0.5" -> opacity: 0.5)
@@ -570,14 +628,21 @@ const normalizeNumber = (value, { unit, propertyName, preferedType }) => {
 };
 
 // Normalize styles for DOM application
-const normalizeStyles = (styles, context = "js") => {
+const normalizeStyles = (styles, context = "js", mutate = false) => {
   if (!styles) {
-    return {};
+    return mutate ? styles : {};
   }
   if (typeof styles === "string") {
     styles = parseStyleString(styles);
     return styles;
   }
+  if (mutate) {
+    for (const key of Object.keys(styles)) {
+      const value = styles[key];
+      styles[key] = normalizeStyle(value, key, context);
+    }
+    return styles;
+  }
   const normalized = {};
   for (const key of Object.keys(styles)) {
     const value = styles[key];
@@ -10285,6 +10350,8 @@ import.meta.css = /* css */ `
     flex-direction: inherit;
     align-items: inherit;
     justify-content: inherit;
+    border-radius: inherit;
+    cursor: inherit;
   }
 
   .ui_transition_measure_wrapper[data-transition-translate-x] {
@@ -11718,4 +11785,4 @@ const notifyTransitionOverflow = (element, transitionId) => {
   };
 };
 
-export { EASING, activeElementSignal, addActiveElementEffect, addAttributeEffect, addWillChange, allowWheelThrough, appendStyles, canInterceptKeys, captureScrollState, createDragGestureController, createDragToMoveGestureController, createHeightTransition, createIterableWeakSet, createOpacityTransition, createPubSub, createStyleController, createTimelineTransition, createTransition, createTranslateXTransition, createValueEffect, createWidthTransition, cubicBezier, dragAfterThreshold, elementIsFocusable, elementIsVisibleForFocus, elementIsVisuallyVisible, findAfter, findAncestor, findBefore, findDescendant, findFocusable, getAvailableHeight, getAvailableWidth, getBorderSizes, getContrastRatio, getDefaultStyles, getDragCoordinates, getDropTargetInfo, getElementSignature, getFirstVisuallyVisibleAncestor, getFocusVisibilityInfo, getHeight, getInnerHeight, getInnerWidth, getMarginSizes, getMaxHeight, getMaxWidth, getMinHeight, getMinWidth, getOpacity, getPaddingSizes, getPositionedParent, getPreferedColorScheme, getScrollContainer, getScrollContainerSet, getScrollRelativeRect, getSelfAndAncestorScrolls, getStyle, getTranslateX, getTranslateY, getVisuallyVisibleInfo, getWidth, initFlexDetailsSet, initFocusGroup, initPositionSticky, initUITransition, isScrollable, mergeStyles, normalizeStyles, parseCSSColor, pickLightOrDark, pickPositionRelativeTo, prefersDarkColors, prefersLightColors, preventFocusNav, preventFocusNavViaKeyboard, resolveCSSColor, resolveCSSSize, setAttribute, setAttributes, setStyles, startDragToResizeGesture, stickyAsRelativeCoords, stringifyCSSColor, trapFocusInside, trapScrollInside, useActiveElement, useAvailableHeight, useAvailableWidth, useMaxHeight, useMaxWidth, useResizeStatus, visibleRectEffect };
+export { EASING, activeElementSignal, addActiveElementEffect, addAttributeEffect, addWillChange, allowWheelThrough, appendStyles, canInterceptKeys, captureScrollState, createDragGestureController, createDragToMoveGestureController, createHeightTransition, createIterableWeakSet, createOpacityTransition, createPubSub, createStyleController, createTimelineTransition, createTransition, createTranslateXTransition, createValueEffect, createWidthTransition, cubicBezier, dragAfterThreshold, elementIsFocusable, elementIsVisibleForFocus, elementIsVisuallyVisible, findAfter, findAncestor, findBefore, findDescendant, findFocusable, getAvailableHeight, getAvailableWidth, getBorderSizes, getContrastRatio, getDefaultStyles, getDragCoordinates, getDropTargetInfo, getElementSignature, getFirstVisuallyVisibleAncestor, getFocusVisibilityInfo, getHeight, getInnerHeight, getInnerWidth, getMarginSizes, getMaxHeight, getMaxWidth, getMinHeight, getMinWidth, getOpacity, getPaddingSizes, getPositionedParent, getPreferedColorScheme, getScrollContainer, getScrollContainerSet, getScrollRelativeRect, getSelfAndAncestorScrolls, getStyle, getTranslateX, getTranslateY, getVisuallyVisibleInfo, getWidth, initFlexDetailsSet, initFocusGroup, initPositionSticky, initUITransition, isScrollable, mergeStyles, normalizeStyle, normalizeStyles, parseCSSColor, pickLightOrDark, pickPositionRelativeTo, prefersDarkColors, prefersLightColors, preventFocusNav, preventFocusNavViaKeyboard, resolveCSSColor, resolveCSSSize, setAttribute, setAttributes, setStyles, startDragToResizeGesture, stickyAsRelativeCoords, stringifyCSSColor, trapFocusInside, trapScrollInside, useActiveElement, useAvailableHeight, useAvailableWidth, useMaxHeight, useMaxWidth, useResizeStatus, visibleRectEffect };

package/package.json

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