@jsenv/navi 0.29.338 → 0.29.340

package/dist/dev/jsenv_navi.js

@@ -59916,7 +59916,7 @@ const clipOf = (side, distance) => {
  * the root's picture (see the CSS in dialog.jsx). The fixed bars are part of
  * that picture, under the wall like the rest of the page. The popup is placed
  * between the bars, and its picture keeps to the room between them on the
- * way as well: the moving box is clipped to that room (clipToRoomBetweenBars),
+ * way as well: the moving box is clipped to that room (animateMovingBox),
  * so a card half under the bottom bar leaves from under it and comes back
  * under it.
  */
@@ -59954,22 +59954,29 @@ const DURATION_PROPERTY = "--navi-popup-lift-duration";
 // The fixed bars (fixed_bar.jsx): the popup is placed in the room between
 // them, and the moving picture is clipped to that room on the way.
 const FIXED_BAR_SELECTOR = ".navi_fixed_bar";
-// The corners and the paint of the lifted node, published the same way. The
-// pictures are clipped to the moving box (dialog.jsx), and a card with rounded
-// corners must not travel with square ones; the box wears the card's own
-// background, so where it has grown past the picture it carries it is the card
-// that has grown, not a picture fading into a bigger one. Read off the lifted
-// node rather than the anchor: the anchor is often a bare trigger around the
-// card, painting nothing of its own, while the lifted node IS the card.
-const BORDER_RADIUS_PROPERTY = "--navi-popup-lift-border-radius";
+// The paint of the lifted node, published the same way: the box wears the
+// card's own background, so where it has grown past the picture it carries it
+// is the card that has grown, not a picture fading into a bigger one. Read off
+// the lifted node rather than the anchor: the anchor is often a bare trigger
+// around the card, painting nothing of its own, while the lifted node IS the
+// card — and a card does not change colour on the way.
 const BACKGROUND_COLOR_PROPERTY = "--navi-popup-lift-background-color";
 const BACKGROUND_IMAGE_PROPERTY = "--navi-popup-lift-background-image";
+// The corners of the box the movement starts from, published the same way —
+// and, unlike the paint, not kept for the length of the movement: a corner is
+// written per box, on purpose, the same card at two sizes not wanting the same
+// round (a 6px corner stops showing on a big card). The moving box leaves with
+// the corners of the box it leaves and arrives with those of the box it
+// arrives on, the two authored values interpolated on the group's own clock
+// (see animateMovingBox).
+const BORDER_RADIUS_PROPERTY = "--navi-popup-lift-border-radius";
 
 let releaseLiftInProgress = null;
-// The clip of the movement in progress (clipToRoomBetweenBars): cancelled
-// with the movement, so a finished one cannot go on applying its last inset
-// to the next movement's picture.
-let clipInProgress = null;
+// What the moving box is told frame by frame on top of the browser's own morph
+// (animateMovingBox: its corners, its clip to the room between the bars),
+// cancelled with the movement so a finished one cannot go on applying its
+// last values to the next movement's picture.
+let boxAnimationInProgress = null;
 // The page held still for the length of the movement. Its picture is frozen
 // anyway, and the browser keeps following the live anchor: a scroll would
 // carry the arriving box along under a page that does not move, and past the
@@ -60015,6 +60022,8 @@ const liftPopupFromAnchor = (
   if (!opened) {
     publishBoxPaint(elementLeaving);
   }
+  const cornersLeaving = readCorners(elementLeaving);
+  root.style.setProperty(BORDER_RADIUS_PROPERTY, cornersLeaving);
 
   let giveBackNameArriving = null;
   let stopWaitingForTarget = null;
@@ -60024,8 +60033,8 @@ const liftPopupFromAnchor = (
     }
     releaseLiftInProgress = null;
     stopWaitingForTarget?.();
-    clipInProgress?.cancel();
-    clipInProgress = null;
+    boxAnimationInProgress?.cancel();
+    boxAnimationInProgress = null;
     releaseScrollHold?.();
     releaseScrollHold = null;
     // Given up on, or replaced, while still waiting to be lifted: shown where
@@ -60048,6 +60057,7 @@ const liftPopupFromAnchor = (
     const room = measureRoomBetweenBars();
     const boxLeaving = room ? elementLeaving.getBoundingClientRect() : null;
     let boxArriving = null;
+    let cornersArriving = null;
     const viewTransition = startViewTransition(() => {
       // The name is the arriving box's from here on: worn by both, it is worn
       // by neither. Written rather than removed, so a name the element also
@@ -60057,18 +60067,24 @@ const liftPopupFromAnchor = (
       const elementArriving = resolveElementArriving();
       if (elementArriving) {
         giveBackNameArriving = wearLiftName(elementArriving);
+        cornersArriving = readCorners(elementArriving);
         if (room) {
           boxArriving = elementArriving.getBoundingClientRect();
         }
       }
     });
-    if (room) {
-      viewTransition.ready.then(() => {
-        if (boxArriving) {
-          clipToRoomBetweenBars(room, boxLeaving, boxArriving);
-        }
-      }, ignore);
-    }
+    viewTransition.ready.then(() => {
+      if (cornersArriving === null) {
+        return;
+      }
+      animateMovingBox({
+        cornersFrom: cornersLeaving,
+        cornersTo: cornersArriving,
+        room,
+        boxFrom: boxLeaving,
+        boxTo: boxArriving,
+      });
+    }, ignore);
     viewTransition.finished.then(release, release);
   };
 
@@ -60114,17 +60130,30 @@ const liftPopupFromAnchor = (
 };
 
 const publishBoxPaint = (liftedElement) => {
-  const { borderRadius, backgroundColor, backgroundImage } = getComputedStyle(
+  const { backgroundColor, backgroundImage } = getComputedStyle(
     findPaintedBox(liftedElement),
   );
   const root = document.documentElement;
-  if (borderRadius) {
-    root.style.setProperty(BORDER_RADIUS_PROPERTY, borderRadius);
-  }
   root.style.setProperty(BACKGROUND_COLOR_PROPERTY, backgroundColor);
   root.style.setProperty(BACKGROUND_IMAGE_PROPERTY, backgroundImage);
 };
 
+// The corners of a box: the first round found going down through children
+// that are the same box, the outermost one being what clips the others; a
+// bare trigger around a card carries its corners on itself or on the card,
+// and either is found. Square when none does.
+const readCorners = (element) => {
+  let current = element;
+  while (current) {
+    const { borderRadius } = getComputedStyle(current);
+    if (borderRadius && !/^(?:0px\s*)+$/.test(borderRadius)) {
+      return borderRadius;
+    }
+    current = sameBoxChild(current);
+  }
+  return "0px";
+};
+
 // The lifted node is often a wrapper painting nothing, around the card that
 // paints: what the moving box has to wear is the card's paint, found by going
 // down through children that are the same box, until one paints.
@@ -60231,15 +60260,17 @@ const measureRoomBetweenBars = () => {
   return room;
 };
 
-// Clips the moving picture to the room between the bars, for the length of
-// the movement. The clip is written in the moving box's own coordinates, and
-// the box goes from one rectangle to the other along the browser's own
-// easing: each inset is an affine function of that progress, so two keyframes
-// with the group's timing follow the box exactly, and a negative inset — the
-// box clear of that bar — clips nothing. The easing is the one on the
-// group's keyframes: a CSS animation carries it there, and the animation's
-// own timing reads linear.
-const clipToRoomBetweenBars = (room, boxFrom, boxTo) => {
+// What the moving picture is told on top of the browser's own morph, from one
+// end of the movement to the other, on the group's own clock: its corners,
+// from those of the box it leaves to those of the box it arrives on; and, when
+// there are fixed bars, its clip to the room between them. The clip is written
+// in the moving box's own coordinates, and the box goes from one rectangle to
+// the other along the browser's own easing: each inset is an affine function
+// of that progress, so two keyframes with the group's timing follow the box
+// exactly, and a negative inset — the box clear of that bar — clips nothing.
+// The easing is the one on the group's keyframes: a CSS animation carries it
+// there, and the animation's own timing reads linear.
+const animateMovingBox = ({ cornersFrom, cornersTo, room, boxFrom, boxTo }) => {
   const groupAnimation = document
     .getAnimations()
     .find(
@@ -60252,18 +60283,18 @@ const clipToRoomBetweenBars = (room, boxFrom, boxTo) => {
   const { duration } = groupAnimation.effect.getTiming();
   const [firstKeyframe] = groupAnimation.effect.getKeyframes();
   const easing = firstKeyframe?.easing || "ease";
-  clipInProgress?.cancel();
-  clipInProgress = document.documentElement.animate(
-    [
-      { clipPath: insetToRoom(room, boxFrom), easing },
-      { clipPath: insetToRoom(room, boxTo) },
-    ],
-    {
-      duration,
-      fill: "both",
-      pseudoElement: `::view-transition-image-pair(${NAME})`,
-    },
-  );
+  const from = { borderRadius: cornersFrom, easing };
+  const to = { borderRadius: cornersTo };
+  if (room && boxFrom && boxTo) {
+    from.clipPath = insetToRoom(room, boxFrom);
+    to.clipPath = insetToRoom(room, boxTo);
+  }
+  boxAnimationInProgress?.cancel();
+  boxAnimationInProgress = document.documentElement.animate([from, to], {
+    duration,
+    fill: "both",
+    pseudoElement: `::view-transition-image-pair(${NAME})`,
+  });
 };
 
 const insetToRoom = (room, box) =>
@@ -60892,8 +60923,11 @@ const css$E = /* css */`
        then swapping.
 
        The box paints what the lifted card paints behind its content
-       (published by popup_lift.js, with its corners): where it has grown past
-       the picture it carries, it is the card that has grown. */
+       (published by popup_lift.js): where it has grown past the picture it
+       carries, it is the card that has grown. Its corners are those of the
+       box it leaves, and travel to those of the box it arrives on — a corner
+       is written per box, the same card at two sizes not wanting the same
+       round (see animateMovingBox in popup_lift.js). */
     &::view-transition-image-pair(navi-popup-lift) {
       background-image: var(--navi-popup-lift-background-image, none);
       background-color: var(--navi-popup-lift-background-color, transparent);
@@ -73569,6 +73603,10 @@ const css$t = /* css */`@layer navi {
     }
   }
 
+  &[data-open-on]:not([data-open-on~="single_click"]) {
+    --x-picker-cursor: auto;
+  }
+
   &[data-open-on~="longpress"] {
     -webkit-touch-callout: none;
     user-select: none;
@@ -73644,7 +73682,7 @@ const css$t = /* css */`@layer navi {
     --x-picker-cursor: default;
   }
 
-  &[data-readonly-opens] {
+  &[data-readonly-opens]:not([data-open-on]) {
     --x-picker-cursor: pointer;
   }
 
@@ -74621,10 +74659,12 @@ const PickerFirstResolver = props => {
  *   press a hold would have taken. A tap then opens nothing — the press stays
  *   free for what the `ui` holds: a link in the card navigates, a button in it
  *   presses, a picker in it opens on its own click, with nothing to declare
- *   (`selfInteractions` is for a drawing that DOES open on the press). That
- *   is what lets a whole card be a picker without every touch on it opening
- *   the sheet — and the keyboard keeps its ways in (Enter, Space, the
- *   arrows). A hold declared INSIDE the card (`interactions={{ longpress }}`
+ *   (`selfInteractions` is for a drawing that DOES open on the press). The
+ *   trigger says so under the mouse too: it drops the hand cursor, which is
+ *   the press's promise, and every pixel of the drawing keeps the cursor it
+ *   would have on its own. That is what lets a whole card be a picker without
+ *   every touch on it opening the sheet — and the keyboard keeps its ways in
+ *   (Enter, Space, the arrows). A hold declared INSIDE the card (`interactions={{ longpress }}`
  *   on something it holds) answers before this one: the nearer hold takes the
  *   press, the way a click is the innermost target's. Being a gesture, the open goes through
  *   the interaction gate as one: a `readOnly` picker refuses it and says so