@jsenv/navi 0.29.383 → 0.29.385

package/dist/jsenv_navi.js

@@ -4739,14 +4739,40 @@ const timeFromMinutes = (minutes) => {
 
 const padTwo$1 = (value) => String(value).padStart(2, "0");
 
-// Maps validity type names → navi input type names.
-// Numeric signal types must not fall through to the native type="number"
-// (which adds spinner buttons and has poor UX) — they map to navi_number instead.
-const VALIDITY_TYPE_TO_INPUT_TYPE = {
+// What a bound signal's type says is what its VALUE is (a validity type);
+// what a control's `type` says is what the control IS. This table is the whole
+// bridge between the two vocabularies: a value type with a row here asks for
+// that control, one without a row asks for nothing and the control keeps its
+// own default. "string" has no row on purpose — it is the value every typeless
+// control already holds — and a name only one side knows must never cross as
+// is: a control type nobody implements is a plain text field that writes an
+// object as "[object Object]" (see warnOnUnknownPickerType in picker.jsx).
+// Numeric value types map to navi_number rather than the native type="number"
+// (spinner buttons, poor UX).
+const CONTROL_TYPE_BY_SIGNAL_TYPE = {
   boolean: "checkbox",
   number: "navi_number",
   integer: "navi_number",
+  float: "navi_number",
+  ratio: "navi_number",
+  longitude: "navi_number",
+  latitude: "navi_number",
+  second: "navi_number",
+  minute: "navi_number",
+  hour: "navi_number",
+  year: "navi_number",
   percentage: "navi_percentage",
+  date: "date",
+  month: "month",
+  week: "week",
+  time: "time",
+  datetime: "datetime",
+  duration: "duration",
+  color: "color",
+  email: "email",
+  url: "url",
+  array: "array",
+  object: "object",
 };
 
 // Conceptual navi types: defaults, plus the host type they resolve to.
@@ -4877,18 +4903,16 @@ const resolveInputProps = (props, { controlType = "input" } = {}) => {
         }
       }
       if (props.type === undefined && signalOptions.type !== undefined) {
-        const typeFromSignal =
-          VALIDITY_TYPE_TO_INPUT_TYPE[signalOptions.type] ?? signalOptions.type;
-        // What a signal says is what its value IS; what a control's `type` says
-        // is what the control is. They usually agree — a date-typed signal wants
-        // a date field — but a boolean one maps to a checkbox, and a picker made
-        // into a checkbox is not a picker with a different look: it is another
-        // control, with no popup to open. A picker asked to hold a yes/no keeps
-        // its two rows and stays itself.
+        const typeFromSignal = CONTROL_TYPE_BY_SIGNAL_TYPE[signalOptions.type];
+        // A value type and the control for it usually agree — a date-typed
+        // signal wants a date field — but a boolean one maps to a checkbox, and
+        // a picker made into a checkbox is not a picker with a different look:
+        // it is another control, with no popup to open. A picker asked to hold
+        // a yes/no keeps its two rows and stays itself.
         const wouldChangeWhatTheControlIs =
           controlType === "picker" &&
           (typeFromSignal === "checkbox" || typeFromSignal === "radio");
-        if (!wouldChangeWhatTheControlIs) {
+        if (typeFromSignal !== undefined && !wouldChangeWhatTheControlIs) {
           props.type = typeFromSignal;
         }
       }
@@ -60190,10 +60214,12 @@ let releaseLiftInProgress = null;
 // 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
-// clip to the room between the bars, computed where the boxes stood.
+// The page held still from the first read about it to the end 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 clip to the room between the bars, computed
+// where the boxes stood — and read once, before the opening waits for its
+// target (see liftPopupFromAnchor).
 let releaseScrollHold = null;
 
 /**
@@ -60219,11 +60245,20 @@ const liftPopupFromAnchor = (
   releaseLiftInProgress?.();
 
   const elementLeaving = opened ? resolveAnchor() : resolveLiftTarget(popupEl);
-  // Read before the first write: the read brings the style up to date, and a
-  // write before it would make it bring it up to date once more.
+  // Everything read about the leaving side, before the first write. A read
+  // brings the style up to date, and the writes below land on the root — an
+  // attribute or an unregistered custom property there invalidates the
+  // computed style of every element — so a read placed after any of them is
+  // the whole document's style over again. Nothing on the leaving side moves
+  // before the movement, the page being held from here on.
+  releaseScrollHold = trapScrollInside(popupEl, { backdrop: true });
   const duration = getComputedStyle(popupEl)
     .getPropertyValue("--popup-animation-duration")
     .trim();
+  const cornersLeaving = readCorners(elementLeaving);
+  const room = measureRoomBetweenBars();
+  const boxLeaving = elementLeaving.getBoundingClientRect();
+  const paintLeaving = opened ? null : readBoxPaint(elementLeaving);
   const giveBackNameLeaving = wearLiftName(elementLeaving);
   const root = document.documentElement;
   root.setAttribute(ROOT_ATTRIBUTE, opened ? "opening" : "closing");
@@ -60234,11 +60269,10 @@ const liftPopupFromAnchor = (
     // browser's own pace.
     root.style.setProperty(DURATION_PROPERTY, duration);
   }
-  if (!opened) {
-    publishBoxPaint(elementLeaving);
-  }
-  const cornersLeaving = readCorners(elementLeaving);
   root.style.setProperty(BORDER_RADIUS_PROPERTY, cornersLeaving);
+  if (paintLeaving) {
+    publishBoxPaint(paintLeaving);
+  }
 
   let giveBackNameArriving = null;
   let stopWaitingForTarget = null;
@@ -60270,10 +60304,6 @@ const liftPopupFromAnchor = (
   releaseLiftInProgress = release;
 
   const startMovement = (change, resolveElementArriving) => {
-    releaseScrollHold?.();
-    releaseScrollHold = trapScrollInside(popupEl, { backdrop: true });
-    const room = measureRoomBetweenBars();
-    const boxLeaving = elementLeaving.getBoundingClientRect();
     let boxArriving = null;
     let cornersArriving = null;
     const viewTransition = startViewTransition(async () => {
@@ -60342,7 +60372,9 @@ const liftPopupFromAnchor = (
     popupEl.removeAttribute(ARRIVING_ATTRIBUTE);
   };
   const liftTarget = (target) => {
-    publishBoxPaint(target);
+    // The last write before the transition: nothing reads between it and the
+    // style pass the browser makes on its own to take the first picture.
+    publishBoxPaint(readBoxPaint(target));
     startMovement(reveal, () => target);
   };
   const targetNow = findLiftTarget(popupEl);
@@ -60360,10 +60392,16 @@ const liftPopupFromAnchor = (
   });
 };
 
-const publishBoxPaint = (liftedElement) => {
+// Read and published apart, so that a closing can read the paint with the
+// rest of what it reads and write it with the rest of what it writes.
+const readBoxPaint = (liftedElement) => {
   const { backgroundColor, backgroundImage } = getComputedStyle(
     findPaintedBox(liftedElement),
   );
+  return { backgroundColor, backgroundImage };
+};
+
+const publishBoxPaint = ({ backgroundColor, backgroundImage }) => {
   const root = document.documentElement;
   root.style.setProperty(BACKGROUND_COLOR_PROPERTY, backgroundColor);
   root.style.setProperty(BACKGROUND_IMAGE_PROPERTY, backgroundImage);