@jsenv/navi 0.29.61 → 0.29.63

package/dist/jsenv_navi.js

@@ -3,7 +3,7 @@
  * using @jsenv/navi as intended.
  */
 import { installImportMetaCssBuild, windowHeightSignal, windowWidthSignal, visualViewportHeightSignal, visualViewportWidthSignal, getAppHeight, getAppWidth, smallTouchScreenSignal } from "./jsenv_navi_side_effects.js";
-export { coarsePointerSignal } from "./jsenv_navi_side_effects.js";
+export { coarsePointerSignal, disableVirtualKeyboardOverlay } from "./jsenv_navi_side_effects.js";
 import { elementIsFocusable, createPubSub, dispatchInternalCustomEvent, dispatchCustomEvent, getVisuallyVisibleInfo, getFirstVisuallyVisibleAncestor, getElementSignature, findEvent, createValueEffect, findFocusDelegateTarget, findFocusable, allowWheelThrough, dispatchPublicCustomEvent, resolveCSSColor, ELEMENT_SIZE_CHANGE, findSelfOrAncestorFixedPosition, visibleRectEffect, pickPositionRelativeTo, getBorderSizes, getPaddingSizes, applyNewPosition, measureLongestVisualLineWidth, chainEvent, waitForPressHeld, suppressClickAfterGesture, startDragToTravel, markDragSource, startDragTo, createIterableWeakSet, createEventGroupLogger, getKeyboardEventDefaultAction, activeElementSignal, normalizeStyle, mergeOneStyle, getPositionedParent, mergeTwoStyles, normalizeStyles, resolveCSSSize, hasCSSSizeUnit, resolveOklchLightness, contrastColor, closestOpenableAncestor, isAncestorOpen, observeAncestorOpenState, getAncestorOpenType, scrollRoomTowards, parsePositionArea, snapToPixel, trapFocusInside, trapScrollInside, onAncestorReopen, createGroupTransitionController, getBorderRadius, preventIntermediateScrollbar, createOpacityTransition, watchWheelTravel, findBefore, findAfter, initFocusGroup, scrollIntoViewScoped, getScrollContainer, canScroll, measureWidestChildRow, performTabNavigation, wheelGestureIsTakenFrom, releaseWheelGesture, claimWheelGesture, dragAfterIntent, stickyAsRelativeCoords, createDragToMoveGestureController, getDropTargetInfo, setStyles, useActiveElement, stringifyStyle as stringifyStyle$1 } from "@jsenv/dom";
 export { contrastColor, findEvent, startDragTo } from "@jsenv/dom";
 import { signal, computed, effect, batch, untracked, useSignal } from "@preact/signals";
@@ -16829,8 +16829,11 @@ const DIMENSION_PROPS = {
       return { flexGrow: expandWeight(value), flexBasis: "0%" };
     }
     if (parentBoxFlow === "flex-y" || parentBoxFlow === "inline-flex-y") {
+      // width 100% is what fills the cross axis; align-self stretch would do
+      // the same but takes the parent's alignX away — a maxWidth-capped item
+      // in an alignX="center" parent would then sit at the start instead of
+      // in the middle.
       return {
-        alignSelf: "stretch",
         width: "100%",
       };
     }
@@ -30335,8 +30338,40 @@ const useDialogProps = props => {
     // argument at all) docks it against the viewport (layer="top"/isModal)
     // or its own positioned ancestor (layer="local", the same
     // positionedAncestor computed above), same mechanism as Popover's own
-    // custom renderer. applyNewPosition sets --container-position-remaining-height/-width
-    // from the result, same as popover.jsx.
+    // custom renderer. applyDialogPosition sets --container-position-remaining-height/-width
+    // from the result, same as popover.jsx — except for layer="top", see its
+    // own comment just above.
+    // The placement is a snapshot taken on a debounce; the size caps must not
+    // be one too. applyNewPosition writes --container-position-remaining-
+    // height/width on every reposition, from what pickPositionRelativeTo
+    // measured the container as at that instant. For layer="top" that value
+    // says nothing --dialog-maxmax-height/width doesn't already say live: the
+    // container IS the visual viewport and Dialog is never anchored, so the
+    // "remaining" space is always the whole container net of its own margins
+    // — the very definition of --dialog-maxmax-*, which tracks the visual
+    // viewport through --navi-vvh/--navi-app-height without waiting for
+    // anything. Identical values, one of them one debounce late.
+    //
+    // That lag stays invisible while the viewport SHRINKS — the two are
+    // combined with min(), so the live var is the one that binds and the
+    // dialog follows the mobile keyboard down, its top edge pinned. On the
+    // way back up the stale pixel value is the smaller one, so it binds
+    // instead and the dialog stays keyboard-sized until the debounced
+    // reposition fires — which then places a still-shrunk box in a
+    // full-height viewport (centered: visibly lower), grows it in the same
+    // call, and has to slide it back up: the bounce. Dropping the property
+    // for layer="top" leaves the live var alone in charge, so the height
+    // comes back exactly the way it left, from the bottom edge.
+    //
+    // Kept for layer="local": there the container is a real element, its own
+    // box is what the caps must read, and nothing in CSS tracks it.
+    const applyDialogPosition = position => {
+      applyNewPosition(dialogEl, position);
+      if (isModal) {
+        dialogEl.style.removeProperty("--container-position-remaining-height");
+        dialogEl.style.removeProperty("--container-position-remaining-width");
+      }
+    };
     const positionDialog = triggerEvent => {
       const {
         positionArea,
@@ -30366,8 +30401,8 @@ const useDialogProps = props => {
         event: triggerEvent
       };
       let position = pickPositionRelativeTo(dialogEl, null, pickOptions);
-      applyNewPosition(dialogEl, position);
-      // applyNewPosition above just set --container-position-remaining-
+      applyDialogPosition(position);
+      // applyDialogPosition above just set --container-position-remaining-
       // width/height to the real available space — narrower than whatever
       // dialogEl measured at just before (nothing, on a first open — see
       // popover.jsx's own identical comment on its own positionPopover for
@@ -30380,7 +30415,7 @@ const useDialogProps = props => {
       // correct it — that one only reacts on the *next* animation frame.
       if (dialogEl.offsetWidth !== position.width || dialogEl.offsetHeight !== position.height) {
         position = pickPositionRelativeTo(dialogEl, null, pickOptions);
-        applyNewPosition(dialogEl, position);
+        applyDialogPosition(position);
       }
       // A descendant's own visibleRectEffect (visible_rect.js — e.g. a
       // Callout anchored to something inside this Dialog) knowing to