@jsenv/dom 0.14.4 → 0.14.6

package/dist/jsenv_dom.js

@@ -420,7 +420,7 @@ const getEventLabel = (e) => {
     return e.type;
   }
   if (e.type === "keydown") {
-    const key = e.key === " " ? "space" : e.key.toLowerCase();
+    const key = e.key === " " ? "space" : e.key?.toLowerCase();
     const modifiers = [];
     if (e.ctrlKey) {
       modifiers.push("ctrl");
@@ -507,6 +507,15 @@ const createIterableWeakSet = () => {
   };
 };
 
+/**
+ * Creates a simple publish/subscribe pair.
+ *
+ * @param {boolean} [clearOnPublish=false] - When true, all subscribers are removed after each publish call.
+ * @returns {[publish: (...args: any[]) => any[], subscribe: (callback: Function) => () => void, clear: () => void]}
+ *   - `publish(...args)` — calls all subscribers with the given arguments and returns their return values.
+ *   - `subscribe(callback)` — registers a subscriber and returns an unsubscribe function.
+ *   - `clear()` — removes all subscribers without calling them.
+ */
 const createPubSub = (clearOnPublish = false) => {
   const callbackSet = new Set();
 
@@ -4593,7 +4602,13 @@ const DEFAULT_BEHAVIORS = [
   {
     test: (el) => el.matches("input[type='radio'], input[type='checkbox']"),
     keys: {
-      space: "activate",
+      space: (e) => {
+        if (e.target.type === "radio" && e.target.checked) {
+          // space on checked radio does nothing
+          return "";
+        }
+        return "activate";
+      },
       enter: (e) => (e.target.form ? "form_submit" : ""),
       arrowleft: "focus_nav",
       arrowright: "focus_nav",
@@ -4609,17 +4624,20 @@ const DEFAULT_BEHAVIORS = [
     keys: {
       escape: (e) => {
         if (e.target.type === "search") {
+          if (e.target.readOnly) {
+            return "";
+          }
           return e.target.value ? "clear" : "";
         }
         return "";
       },
       enter: (e) => (e.target.form ? "form_submit" : ""),
-      arrowleft: "cursor_move",
-      arrowright: "cursor_move",
-      arrowup: "cursor_move",
-      arrowdown: "cursor_move",
-      home: "cursor_move",
-      end: "cursor_move",
+      arrowleft: (e) => (e.target.readOnly ? "scroll" : "cursor_move"),
+      arrowright: (e) => (e.target.readOnly ? "scroll" : "cursor_move"),
+      arrowup: (e) => (e.target.readOnly ? "scroll" : "cursor_move"),
+      arrowdown: (e) => (e.target.readOnly ? "scroll" : "cursor_move"),
+      home: (e) => (e.target.readOnly ? "scroll" : "cursor_move"),
+      end: (e) => (e.target.readOnly ? "scroll" : "cursor_move"),
     },
     fallback: (e) => (isTypingIntent(e) ? "type" : undefined),
   },
@@ -4658,7 +4676,7 @@ const DEFAULT_BEHAVIORS = [
       ),
     keys: {
       space: "activate",
-      enter: (e) => (e.target.form ? "form_submit" : ""),
+      enter: "activate",
       arrowleft: "value_change",
       arrowright: "value_change",
       arrowup: "value_change",
@@ -4666,19 +4684,19 @@ const DEFAULT_BEHAVIORS = [
     },
   },
   {
-    // Color input: Space opens the color picker, Enter submits the form
+    // Color input: Space opens the color picker, Enter  too
     test: (el) => el.matches("input[type='color']"),
     keys: {
       space: "activate",
-      enter: (e) => (e.target.form ? "form_submit" : ""),
+      enter: "activate",
     },
   },
   {
-    // File input: Space opens the picker, Enter submits the form
+    // File input: Space opens the picker, Enter too
     test: (el) => el.matches("input[type='file']"),
     keys: {
       space: "activate",
-      enter: (e) => (e.target.form ? "form_submit" : ""),
+      enter: "activate",
     },
   },
   {
@@ -4725,7 +4743,10 @@ const DEFAULT_BEHAVIORS = [
   {
     // SELECT: don't intercept anything while the dropdown may be open
     test: (el) => el.tagName === "SELECT",
-    keys: {},
+    keys: {
+      space: "activate",
+      enter: "activate",
+    },
   },
   {
     // Non-interactive elements: browser scrolls on Space and arrow keys
@@ -11328,9 +11349,11 @@ const visibleRectEffect = (
       }
     }
     {
-      // visualViewport resize is a superset of window resize:
-      // it also fires when the virtual keyboard opens/closes on mobile.
-      // Fall back to window resize when visualViewport is unavailable.
+      // visualViewport resize fires when the virtual keyboard opens/closes on mobile.
+      // window resize catches cases visualViewport misses, notably the browser input
+      // accessory bar (password/autocomplete suggestions) on iOS Safari which changes
+      // the available height without always firing a visualViewport resize event.
+      // We listen to both simultaneously; the check is idempotent so duplicates are harmless.
       const onResize = (e) => {
         autoCheck(e);
       };
@@ -11339,12 +11362,11 @@ const visibleRectEffect = (
         addTeardown(() => {
           window.visualViewport.removeEventListener("resize", onResize);
         });
-      } else {
-        window.addEventListener("resize", onResize);
-        addTeardown(() => {
-          window.removeEventListener("resize", onResize);
-        });
       }
+      window.addEventListener("resize", onResize);
+      addTeardown(() => {
+        window.removeEventListener("resize", onResize);
+      });
     }
     {
       // visualViewport scroll fires when the visual viewport pans independently
@@ -11556,9 +11578,19 @@ const visibleRectEffect = (
  * @param {HTMLElement} anchor - The anchor element to position against
  * @param {object} [options]
  * @param {string} [options.positionX="center"] - Preferred X placement, with viewport fallback.
+ *   "to-the-left"   — element.right  = anchor.left   (sits entirely to the left of anchor)
+ *   "left-aligned"  — element.left   = anchor.left   (left edges aligned)
+ *   "center"        — element centered horizontally over anchor  (default)
+ *   "right-aligned" — element.right  = anchor.right  (right edges aligned)
+ *   "to-the-right"  — element.left   = anchor.right  (sits entirely to the right of anchor)
  * @param {string} [options.positionY="below"] - Preferred Y placement, with viewport fallback.
- * @param {string} [options.positionXFixed] - Force X placement, skipping the fit-check.
- * @param {string} [options.positionYFixed] - Force Y placement, skipping the fit-check.
+ *   "above"         — element.bottom = anchor.top    (sits above, no overlap)
+ *   "above-overlap" — element.bottom = anchor.bottom (sits above, overlapping anchor)
+ *   "center"        — element centered vertically over anchor
+ *   "below-overlap" — element.top    = anchor.top    (sits below, overlapping anchor)
+ *   "below"         — element.top    = anchor.bottom (sits below, no overlap)  (default)
+ * @param {string} [options.positionXFixed] - Force X placement, skipping the fit-check. Same values as positionX.
+ * @param {string} [options.positionYFixed] - Force Y placement, skipping the fit-check. Same values as positionY.
  * @param {number} [options.alignToViewportEdgeWhenAnchorNearEdge=0] - Snap to viewport left
  *   edge when anchor is within this many px of the left edge and element is wider than anchor.
  * @param {number} [options.minLeft=0] - Minimum left coordinate (document-relative).
@@ -15146,4 +15178,4 @@ const useResizeStatus = (elementRef, { as = "number" } = {}) => {
   };
 };
 
-export { EASING, activeElementSignal, addActiveElementEffect, addAttributeEffect, allowWheelThrough, appendStyles, captureScrollState, chainEvent, contrastColor, createBackgroundColorTransition, createBackgroundTransition, createBorderRadiusTransition, createBorderTransition, createDragGestureController, createDragToMoveGestureController, createEventGroupLogger, createGroupTransitionController, createHeightTransition, createIterableWeakSet, createOpacityTransition, createPubSub, createStyleController, createTimelineTransition, createTransition, createTranslateXTransition, createValueEffect, createWidthTransition, cubicBezier, dispatchCustomEvent, dispatchInternalCustomEvent, dispatchPublicCustomEvent, dragAfterThreshold, elementIsFocusable, elementIsVisibleForFocus, elementIsVisuallyVisible, findAfter, findAncestor, findBefore, findDescendant, findEvent, findFocusDelegateTarget, findFocusable, formatEventSideEffect, getAvailableHeight, getAvailableWidth, getBackground, getBackgroundColor, getBorder, getBorderRadius, getBorderSizes, getContrastRatio, getDefaultStyles, getDragCoordinates, getDropTargetInfo, getElementSignature, getFirstVisuallyVisibleAncestor, getFocusVisibilityInfo, getHeight, getHeightWithoutTransition, getInnerHeight, getInnerWidth, getKeyboardEventDefaultAction, getLuminance, getMarginSizes, getMaxHeight, getMaxWidth, getMinHeight, getMinWidth, getOpacity, getOpacityWithoutTransition, getPaddingSizes, getPositionedParent, getPreferedColorScheme, getScrollBox, getScrollContainer, getScrollContainerSet, getScrollRelativeRect, getSelfAndAncestorScrolls, getStyle, getTranslateX, getTranslateXWithoutTransition, getTranslateY, getVisuallyVisibleInfo, getWidth, getWidthWithoutTransition, hasCSSSizeUnit, initFlexDetailsSet, initFocusGroup, initPositionSticky, isSameColor, isScrollable, measureLongestVisualLineWidth, measureScrollbar, measureWidestChildRow, mergeOneStyle, mergeTwoStyles, normalizeKeyboardKey, normalizeStyle, normalizeStyles, parseStyle, pickPositionRelativeTo, prefersDarkColors, prefersLightColors, preventFocusNav, preventFocusNavViaKeyboard, preventIntermediateScrollbar, resolveCSSColor, resolveCSSSize, resolveColorLuminance, resolveOklchLightness, scrollIntoViewScoped, scrollIntoViewWithStickyAwareness, setAttribute, setAttributes, setStyles, snapToPixel, startDragToReorder, startDragToResizeGesture, stickyAsRelativeCoords, stringifyStyle, trapFocusInside, trapScrollInside, useActiveElement, useAvailableHeight, useAvailableWidth, useMaxHeight, useMaxWidth, useResizeStatus, visibleRectEffect };
+export { EASING, activeElementSignal, addActiveElementEffect, addAttributeEffect, allowWheelThrough, appendStyles, captureScrollState, chainEvent, contrastColor, createBackgroundColorTransition, createBackgroundTransition, createBorderRadiusTransition, createBorderTransition, createDragGestureController, createDragToMoveGestureController, createEventGroupLogger, createGroupTransitionController, createHeightTransition, createIterableWeakSet, createOpacityTransition, createPubSub, createStyleController, createTimelineTransition, createTransition, createTranslateXTransition, createValueEffect, createWidthTransition, cubicBezier, dispatchCustomEvent, dispatchInternalCustomEvent, dispatchPublicCustomEvent, dragAfterThreshold, elementIsFocusable, elementIsVisibleForFocus, elementIsVisuallyVisible, findAfter, findAncestor, findBefore, findDescendant, findEvent, findFocusDelegateTarget, findFocusable, formatEventSideEffect, getAvailableHeight, getAvailableWidth, getBackground, getBackgroundColor, getBorder, getBorderRadius, getBorderSizes, getContrastRatio, getDefaultStyles, getDragCoordinates, getDropTargetInfo, getElementSignature, getFirstVisuallyVisibleAncestor, getFocusVisibilityInfo, getHeight, getHeightWithoutTransition, getInnerHeight, getInnerWidth, getKeyboardEventDefaultAction, getLuminance, getMarginSizes, getMaxHeight, getMaxWidth, getMinHeight, getMinWidth, getOpacity, getOpacityWithoutTransition, getPaddingSizes, getPositionedParent, getPreferedColorScheme, getScrollBox, getScrollContainer, getScrollContainerSet, getScrollRelativeRect, getSelfAndAncestorScrolls, getStyle, getTranslateX, getTranslateXWithoutTransition, getTranslateY, getVisuallyVisibleInfo, getWidth, getWidthWithoutTransition, hasCSSSizeUnit, initFlexDetailsSet, initFocusGroup, initPositionSticky, isSameColor, isScrollable, measureLongestVisualLineWidth, measureScrollbar, measureWidestChildRow, mergeOneStyle, mergeTwoStyles, normalizeKeyboardKey, normalizeStyle, normalizeStyles, parseStyle, performTabNavigation, pickPositionRelativeTo, prefersDarkColors, prefersLightColors, preventFocusNav, preventFocusNavViaKeyboard, preventIntermediateScrollbar, resolveCSSColor, resolveCSSSize, resolveColorLuminance, resolveOklchLightness, scrollIntoViewScoped, scrollIntoViewWithStickyAwareness, setAttribute, setAttributes, setStyles, snapToPixel, startDragToReorder, startDragToResizeGesture, stickyAsRelativeCoords, stringifyStyle, trapFocusInside, trapScrollInside, useActiveElement, useAvailableHeight, useAvailableWidth, useMaxHeight, useMaxWidth, useResizeStatus, visibleRectEffect };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jsenv/dom",
-  "version": "0.14.4",
+  "version": "0.14.6",
   "type": "module",
   "description": "DOM utilities for writing frontend code",
   "repository": {