@jsenv/navi 0.29.367 → 0.29.369

package/dist/dev/jsenv_navi.js

@@ -89,6 +89,7 @@ const css$17 = /* css */ `@layer navi {
     --navi-z-index-bar: 100;
     --navi-z-index-popup: 1000;
     --navi-z-index-callout: var(--navi-z-index-popup);
+    --navi-z-index-top-layer: 10000;
   }
 }
 `;
@@ -29928,6 +29929,8 @@ const warnOnce$1 = (id, message) => {
   console.warn(message);
 };
 
+installImportMetaCssBuild(import.meta);
+
 /**
  * The furniture around the pages — the fixed bars, and the popups standing
  * over them in the top layer — photographed with them for the length of a
@@ -29975,6 +29978,23 @@ const warnOnce$1 = (id, message) => {
  * that has nothing to do with it. Being unable to answer a press is the price
  * of being photographed, and a route transition is where it costs nothing:
  * both pages are pictures for those few hundred milliseconds anyway.
+ *
+ * The WALL of a modal dialog goes the other way round: it cannot be
+ * photographed at all. It is the browser's own ::backdrop — a pseudo-element,
+ * which wears no name — and the top layer it is painted in is drawn during a
+ * transition only as part of the root's picture, which is opted out while an
+ * area is marked (route_transition.jsx). Captured on its own, the dialog's
+ * box travels; its wall is painted nowhere for the length of the movement,
+ * and the page under it leaves undimmed. So the wall is painted INTO the
+ * page's picture instead: a stand-in laid over the area before each of the
+ * two pictures is taken, painting what the ::backdrop paints, and removed
+ * with the movement. Carried by the page's picture, it leaves with the page
+ * being left and arrives with the page arriving, cut at the page's edge — and
+ * under the dialog's own picture, which stands over the pages (the z-order in
+ * route_transition.jsx). A bar the two states share is outside both pictures
+ * and goes undimmed for those few hundred milliseconds: it is the frame, not
+ * part of the page. A dialog with layer="local" paints a real element for its
+ * wall, inside the page, and needs none of this.
  */
 
 // The browser's top layer: painted above everything the document paints, so
@@ -29992,6 +30012,32 @@ const FURNITURE_SELECTOR = `.navi_fixed_bar, .navi_popover:is(${TOP_LAYER_SELECT
 const TRANSITION_ATTRIBUTE$1 = "data-navi-route-transition";
 const NAME_PROPERTY$1 = "view-transition-name";
 const FURNITURE_NAME_PREFIX = "navi-transition-furniture-";
+// The dialogs whose wall is the browser's ::backdrop: shown with showModal().
+// A top-layer dialog without a wall is shown as a popover and has nothing to
+// stand in for.
+const MODAL_DIALOG_SELECTOR = ".navi_dialog:modal";
+const WALL_ATTRIBUTE = "data-navi-transition-wall";
+// What the ::backdrop paints, resolved on the dialog (layout/dialog.jsx): the
+// same two properties, copied onto the wall.
+const WALL_PROPERTIES = ["--backdrop-background", "--backdrop-filter"];
+
+const TRANSITION_WALL_CSS = /* css */ `[data-navi-transition-wall] {
+  z-index: var(--navi-z-index-top-layer);
+  background: var(--backdrop-background);
+  backdrop-filter: var(--backdrop-filter);
+  pointer-events: none;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+`;
+
+// Called from the render of whatever holds the pages, never at module scope:
+// a page that never travels between routes must not carry this sheet, and a
+// build that sees no caller drops the css with the function.
+const installTransitionFurnitureCss = () => {
+  import.meta.css = [TRANSITION_WALL_CSS, "@jsenv/navi/src/nav/transition_furniture.js"];
+};
 
 const nameByElement = new WeakMap();
 let nameCount = 0;
@@ -30004,6 +30050,9 @@ let namedElements = new Set();
 // The rule giving the one-sided bars their movement, written for one movement
 // and taken down with it.
 let travelStyleElement = null;
+// The walls standing in for the ::backdrop of the modal dialogs open in the
+// area, painted for one picture and taken down before the next.
+let wallElements = [];
 
 /**
  * Name what stands around the area, before the picture of the state being left
@@ -30016,6 +30065,7 @@ const nameTransitionFurniture = (owner, areaElement) => {
     namedElements = new Set();
   }
   nameFurnitureAround(areaElement);
+  paintTransitionWalls(areaElement);
 };
 
 /**
@@ -30036,6 +30086,7 @@ const holdTransitionFurniture = (owner, areaElement) => {
     }
   }
   const namesArriving = nameFurnitureAround(areaElement);
+  paintTransitionWalls(areaElement);
   const cssText = `${travelRule("old", namesLeaving, "--navi-route-transition-leave")}${travelRule("new", namesArriving, "--navi-route-transition-enter")}`;
   if (!cssText) {
     return;
@@ -30118,6 +30169,40 @@ const releaseTransitionFurniture = (owner) => {
     travelStyleElement.remove();
     travelStyleElement = null;
   }
+  removeTransitionWalls();
+};
+
+// One wall per modal dialog open in the area, in document order: the
+// ::backdrops stack in the top layer, and what dims the page is all of them.
+const paintTransitionWalls = (areaElement) => {
+  removeTransitionWalls();
+  for (const dialog of areaElement.querySelectorAll(MODAL_DIALOG_SELECTOR)) {
+    const dialogStyle = getComputedStyle(dialog);
+    const wall = document.createElement("div");
+    wall.setAttribute(WALL_ATTRIBUTE, "");
+    for (const property of WALL_PROPERTIES) {
+      wall.style.setProperty(property, dialogStyle.getPropertyValue(property));
+    }
+    areaElement.appendChild(wall);
+    // The area is not necessarily a containing block, and made one for the
+    // movement it would move whatever the page positioned against an ancestor
+    // of the area: the wall is placed from wherever its containing block
+    // turns out to be, by the offset between that box and the area's.
+    const areaRect = areaElement.getBoundingClientRect();
+    const wallRect = wall.getBoundingClientRect();
+    wall.style.left = `${areaRect.left - wallRect.left}px`;
+    wall.style.top = `${areaRect.top - wallRect.top}px`;
+    wall.style.width = `${areaRect.width}px`;
+    wall.style.height = `${areaRect.height}px`;
+    wallElements.push(wall);
+  }
+};
+
+const removeTransitionWalls = () => {
+  for (const wall of wallElements) {
+    wall.remove();
+  }
+  wallElements = [];
 };
 
 installImportMetaCssBuild(import.meta);
@@ -30969,6 +31054,7 @@ const RouteTransitionArea = ({
 }) => {
   import.meta.css = [css$12, "@jsenv/navi/src/nav/route_transition.jsx"];
   installTransitionWindowCss();
+  installTransitionFurnitureCss();
   const props = {
     ...rest,
     [TRANSITION_AREA_ATTRIBUTE]: ""
@@ -74690,6 +74776,7 @@ const css$t = /* css */`@layer navi {
         var(--picker-icon-color) 45%,
         transparent);
     --picker-icon-color-disabled: var(--picker-icon-color-readonly);
+    --picker-icon-color-hover: var(--picker-icon-color);
     --picker-align-x-default: flex-start;
     --picker-align-y-default: center;
     --picker-text-align-default: initial;
@@ -74707,6 +74794,7 @@ const css$t = /* css */`@layer navi {
   --x-picker-press-padding-right: var(--picker-press-padding-right, var(--picker-press-padding-x, var(--picker-press-padding, 0px)));
   --x-picker-press-padding-bottom: var(--picker-press-padding-bottom, var(--picker-press-padding-y, var(--picker-press-padding, 0px)));
   --x-picker-press-padding-left: var(--picker-press-padding-left, var(--picker-press-padding-x, var(--picker-press-padding, 0px)));
+  --x-picker-chevron-reach: 0px;
   --x-picker-color: var(--picker-color);
   --x-picker-icon-color: var(--picker-icon-color);
   --x-picker-align-x: var(--picker-align-x, var(--picker-align-x-default));
@@ -74875,7 +74963,10 @@ const css$t = /* css */`@layer navi {
     & > .navi_picker_box > .navi_picker_input {
       top: calc(-1 * (var(--picker-border-width) + var(--x-picker-press-padding-top)));
       right: calc(-1 *
-            (var(--picker-border-width) + var(--x-picker-press-padding-right)));
+            (
+              var(--picker-border-width) + var(--x-picker-press-padding-right) +
+                var(--x-picker-chevron-reach)
+            ));
       bottom: calc(-1 *
             (var(--picker-border-width) + var(--x-picker-press-padding-bottom)));
       left: calc(-1 * (var(--picker-border-width) + var(--x-picker-press-padding-left)));
@@ -74921,6 +75012,7 @@ const css$t = /* css */`@layer navi {
   &[data-hover] {
     --x-picker-background-color: var(--picker-background-color-hover);
     --x-picker-border-color: var(--picker-border-color-hover);
+    --x-picker-icon-color: var(--picker-icon-color-hover);
   }
 
   &[data-readonly] {
@@ -75030,6 +75122,30 @@ const css$t = /* css */`@layer navi {
       align-items: var(--x-picker-align-y);
       display: flex;
     }
+
+    & > .navi_picker_box > .navi_picker_right_slot {
+      margin-right: 0;
+      margin-left: var(--picker-slot-spacing, var(--navi-xxs));
+      align-self: center;
+    }
+
+    &[data-chevron="start"] > .navi_picker_box > .navi_picker_right_slot {
+      margin-right: var(--picker-slot-spacing, var(--navi-xxs));
+      order: -1;
+      margin-left: 0;
+    }
+
+    &[data-chevron="hang-end"] > .navi_picker_box {
+      --x-picker-chevron-reach: calc(var(--x-picker-chevron-size) +
+            var(--picker-slot-spacing, var(--navi-xxs)));
+
+      & > .navi_picker_right_slot {
+        position: absolute;
+        top: 50%;
+        left: 100%;
+        transform: translateY(-50%);
+      }
+    }
   }
 
   &[data-variant="button"] {
@@ -75109,6 +75225,9 @@ const PickerButton = props => {
     // an <Icon>, which is aria-hidden, and a focusable node under aria-hidden is
     // invisible to assistive tech while still being reachable by tab.
     rightSlot,
+    // A bare picker's chevron, and where it goes so the drawing keeps its box
+    // (see the `chevron` doc). Left out, a bare picker draws no slot at all.
+    chevron,
     placeholder,
     ui,
     maxLines: maxLinesProp = 1,
@@ -75169,12 +75288,22 @@ const PickerButton = props => {
   // icon, a headless one draws nothing, a button says what it opens with its
   // label, a word in a sentence has no room for furniture. Nor a picker
   // rendering the browser's own control ("default").
-  // Nor a bare one: the picker is that drawing's box to the pixel, so anything
-  // navi adds beside it either grows the box or covers what the caller drew.
-  // The pieces are the caller's to place there instead — a <Picker.Clear /> in
-  // their own layout (see warnOnClearableWithoutSlot).
-  const hasRightSlot = !picksNothing && rightSlot !== null && !isIcon && variant !== "headless" && variant !== "button" && variant !== "text" && variant !== "bare" && ui !== "default";
+  // Nor a bare one, unless `chevron` says where: the picker is that drawing's
+  // box to the pixel, so anything navi adds beside it either grows the box or
+  // covers what the caller drew. The pieces are the caller's to place there
+  // instead — a <Picker.Clear /> in their own layout (see
+  // warnOnClearableWithoutSlot) — or the slot goes where the drawing is not:
+  // after it, before it, or out of the flow altogether.
+  const isBare = variant === "bare";
+  const bareChevron = isBare && chevron !== undefined ? chevron : undefined;
+  warnOnChevronOffBare(props, isBare);
+  const hasRightSlot = !picksNothing && rightSlot !== null && !isIcon && variant !== "headless" && variant !== "button" && variant !== "text" && (!isBare || bareChevron !== undefined) && ui !== "default";
   warnOnClearableWithoutSlot(props, hasRightSlot);
+  // How far the press must follow a hanging chevron: its size, as a length the
+  // input's inset can add up. "inherit" is 1em of the picker's own font, which
+  // the input shares (font: inherit), so the em the icon is drawn in and the
+  // em the reach is measured in are the same.
+  const hangingChevronSize = bareChevron === "hang-end" && hasRightSlot ? rightSlotIconSize === "inherit" ? "1em" : stringifyStyleValue(rightSlotIconSize, "fontSize") : undefined;
   const inputRef = useRef(null);
   const [pickerRemainingProps, inputProps, facadeChildrenProps] = useControlFacadeProps({
     ...props,
@@ -75258,6 +75387,7 @@ const PickerButton = props => {
         pseudoClasses: PICKER_BUTTON_PSEUDO_CLASSES,
         "data-variant": variant,
         "data-icon": isIcon ? "" : undefined,
+        "data-chevron": hasRightSlot ? bareChevron : undefined,
         "navi-picker": "",
         "navi-single-line": isSingleLine ? "" : undefined,
         "navi-ui-custom": ui === "default" ? undefined : "",
@@ -75271,6 +75401,7 @@ const PickerButton = props => {
         rightSlotIcon: undefined,
         rightSlotIconSize: undefined,
         rightSlot: undefined,
+        chevron: undefined,
         clearConfirm: undefined,
         picksNothing: undefined,
         openWhileReadOnly: undefined,
@@ -75307,6 +75438,9 @@ const PickerButton = props => {
         },
         children: [jsx("span", {
           className: "navi_picker_box",
+          style: hangingChevronSize === undefined ? undefined : {
+            "--x-picker-chevron-size": hangingChevronSize
+          },
           children: jsxs(PickerContext.Provider, {
             value: pickerContext,
             children: [variant === "headless" ? null : jsx(LoadingOutline, {
@@ -75848,6 +75982,7 @@ const PickerFirstResolver = props => {
  *   rightSlotIcon?: import("ignore:preact").ComponentChildren,
  *   rightSlotIconSize?: number | string,
  *   rightSlot?: import("ignore:preact").ComponentChildren,
+ *   chevron?: "end" | "start" | "hang-end",
  *   clearConfirm?: string | import("ignore:preact").ComponentChildren,
  *   message?: import("ignore:preact").ComponentChildren,
  *   confirmLabel?: import("ignore:preact").ComponentChildren,
@@ -75948,7 +76083,7 @@ const PickerFirstResolver = props => {
  *   a drawing that paints outside it on purpose — an affordance in the margin
  *   beside it, out of the flow so the rest keeps its width — is drawn and
  *   opens nothing; `pressPadding` is how far the press area follows it out
- *   there.
+ *   there. The chevron itself is the `chevron` prop's to draw and place.
  *
  *   A drawing that follows what the picker HOLDS — the value the popup just
  *   closed on, before the server has answered, the same state navi's own
@@ -76052,7 +76187,23 @@ const PickerFirstResolver = props => {
 
  *   `variant="bare"` has no slot either, for the same reason turned around: the
  *   picker is the drawing's box to the pixel, so nothing may be added beside it
- *   — the drawing holds what it needs (`<Picker.Clear />`) and places it.
+ *   — the drawing holds what it needs (`<Picker.Clear />`) and places it. Its
+ *   `chevron` prop is the exception: the slot, put where the drawing is not.
+ * @param {"end"|"start"|"hang-end"} [chevron] `variant="bare"` only: the
+ *   picker draws no chevron beside the drawing, so nothing says it opens; this
+ *   draws one — the icon the right slot would hold, `rightSlotIcon` or the
+ *   chevron, at `rightSlotIconSize`, `slotSpacing` away from the drawing (xxs
+ *   by default), taking the clear cross's place under `clearable` like any
+ *   slot — and says where, so the drawing keeps the box it has when nothing
+ *   opens. Which side depends on where the drawing is anchored in its line.
+ *   `"end"`: after it, in the flow — a label with room after it. `"start"`:
+ *   before it — a label pushed against the right edge, which the chevron
+ *   would otherwise push left by its width. `"hang-end"`: after it and OUT of
+ *   the flow, in the margin beside the box — a drawing filling its whole
+ *   line; the press follows it out there by its size plus its gap, on top of
+ *   any `pressPaddingRight`. The chevron is drawn in `--picker-icon-color`
+ *   (`currentColor` here) and `--picker-icon-color-hover`; a dimmed one is
+ *   `--picker-icon-color: color-mix(in srgb, currentColor 55%, transparent)`.
  * @param {import("ignore:preact").ComponentChildren} [rightSlot] Same place, rendered
  *   as-is: no `<Icon>` around it, nothing `aria-hidden`. This is where an
  *   interactive right slot goes. `null` takes the slot away entirely — the
@@ -76354,6 +76505,18 @@ const warnOnClearableWithoutSlot = (props, hasRightSlot) => {
   }
   console.warn(`[navi] <Picker ${cause} clearable> — that leaves no right slot, so no cross is drawn. ` + `Draw it where it belongs instead: <Picker ${cause} ui={<YourDrawing>… <Picker.Clear /></YourDrawing>}>. ` + `It is the same cross, and it takes itself away when there is nothing left to clear.`);
 };
+let chevronOffBareWarned = false;
+const warnOnChevronOffBare = (props, isBare) => {
+  const {
+    chevron,
+    variant
+  } = props;
+  if (chevron === undefined || isBare || chevronOffBareWarned) {
+    return;
+  }
+  chevronOffBareWarned = true;
+  console.warn(`[navi] <Picker variant="${variant}" chevron="${chevron}"> — \`chevron\` places the chevron of a bare picker, whose drawing has no slot beside it. ` + `This variant draws its chevron in its right slot already (rightSlotIcon, rightSlot to change it); \`chevron\` is ignored.`);
+};
 const warnOnUnknownPickerType = props => {
   const {
     type