work

Author: dmail

packages/frontend/navi/src/layout/dialog.jsx

@@ -680,7 +680,7 @@ const css = /* css */ `
  *   scroll while open (its backdrop only covers the scrollport, so scrolling
  *   there would reveal uncovered content); this prop extends the lock to the
  *   whole page. Defaults to `true` for a dialog docked by `dockedOnSmallTouchScreen`.
- * @param {boolean|"auto"|"fading"|"scaling"|"sliding"|"growing"|`slide-from-${string}`} [props.animation]
+ * @param {boolean|"auto"|"fading"|"scaling"|"sliding"|"growing"|`slide-from-${string}`|"cover-from-top"} [props.animation]
  *   - `true`/`"auto"` resolves to `"scaling"` for a centered `positionArea`,
  *   or a concrete `"slide-from-*"` direction otherwise. Any other explicit
  *   value is used as-is. `"growing"` is the odd one out: every other kind

packages/frontend/navi/src/layout/popover.jsx

@@ -494,7 +494,7 @@ const css = /* css */ `
  *   popover so the page/container behind it can't scroll while it's open.
  * @param {boolean} [props.focusCapture] - Traps Tab navigation inside the
  *   popover (see `focus_trap.js`).
- * @param {boolean|"auto"|"fading"|"scaling"|"sliding"|`slide-from-${string}`} [props.animation]
+ * @param {boolean|"auto"|"fading"|"scaling"|"sliding"|`slide-from-${string}`|"cover-from-top"} [props.animation]
  *   - `true`/`"auto"` resolves to a concrete `"slide-from-*"` direction
  *   based on `positionArea`. Any other explicit value is used as-is.
  * @param {string} [props.animationDuration] - Maps to

packages/frontend/navi/src/layout/popup.jsx

@@ -132,7 +132,7 @@ const css = /* css */ `
  *   identically): the wash the backdrop paints over what is behind.
  * @param {string} [props.backdropFilter] - Forwarded as-is: what that wash
  *   does to the picture underneath, `"blur(4px)"` and the like.
- * @param {boolean|"auto"|"fading"|"scaling"|"sliding"|"expanding"|`slide-from-${string}`|`expand-${string}`} [props.animation]
+ * @param {boolean|"auto"|"fading"|"scaling"|"sliding"|"expanding"|`slide-from-${string}`|"cover-from-top"|`expand-${string}`} [props.animation]
  *   - Forwarded as-is.
  * @param {string} [props.animationDuration] - Forwarded as-is.
  * @param {string} [props.maxWidth] - Forwarded as-is to both; also read

packages/frontend/navi/src/layout/popup_css.js

@@ -26,7 +26,8 @@
  * so any consumer can override it per-instance from CSS (or via the
  * `animationDuration` prop, wired to --popup-animation-duration through
  * Box's styleCSSVars) without touching this file: `--popup-animation-duration`,
- * `--popup-scale-from`, `--popup-border-radius`. `slide-from-*`'s own
+ * `--popup-scale-from`, `--popup-cover-travel`, `--popup-border-radius`.
+ * `slide-from-*`'s own
  * 100%-of-own-size distance is hardcoded for now rather than exposed as a
  * variable — fine to revisit if a consumer ever needs to override it.
  *
@@ -64,6 +65,19 @@
  * so it slides in instead. The word names *where it comes from*: placed
  * "top" (a point/corner), it slides in from the top.
  *
+ * `animation="cover-from-top"`: a slide reads through what it shows first,
+ * and a box travelling its own height from above shows its bottom first —
+ * the tail of whatever it holds, then, in the last frame, its head. That is
+ * the wrong way round for a panel whose head sits at the edge it comes from
+ * (a top-docked SidePanel: title and tabs at its top). So here the cut alone
+ * does the reveal — the same curtain descending from the container's top
+ * edge a full slide draws — while the box travels only `--popup-cover-travel`
+ * (default 15%) of its own height: the head is on screen from the first
+ * frame, settling its last few pixels into place. The exit is the same
+ * movement backwards and still reads as a slide, the head leading. One
+ * direction only: a bottom sheet leads with its head by itself, and a
+ * left/right panel keeps its head on the axis it does not travel.
+ *
  * `animation="expand-*"` (a real anchor only, explicit opt-in — "scaling"
  * reads better overall, see popover.jsx's top comment): grows out of the
  * anchor's own edge via `scale` + `transform-origin` instead of a translate, which
@@ -89,6 +103,7 @@ export const popupCss = /* css */ `
     .navi_dialog {
       --popup-animation-duration: 0.18s;
       --popup-scale-from: 0.9;
+      --popup-cover-travel: 15%;
 
       --popup-opacity-duration: var(--popup-animation-duration);
       --popup-translate-duration: var(--popup-animation-duration);
@@ -119,6 +134,31 @@ export const popupCss = /* css */ `
         var(--popup-translate-duration);
       transition-timing-function: ease;
       transition-behavior: allow-discrete;
+
+      /* Where the area the popup was placed in has its edges, in the popup's
+         own coordinates: --container-position-room-* is how far past each of
+         its own edges the popup may still paint before reaching that edge
+         (applyNewPosition in @jsenv/dom), so the negated value puts a cut ON
+         it. Read by the kinds below that cut their travel (slide, cover): each
+         takes the side(s) it needs. A popup that was never placed reads
+         100vmax and is not cut at all.
+         Outside that area is either the glass beside an app narrowed with
+         --navi-app-max-width (layout/safe_area.js) or whatever surrounds a
+         container — neither the popup's to paint, and a popup in the top layer
+         answers to no overflow of the document. The popup itself is never cut
+         either: the rooms floor at 0. */
+      --x-popup-cut-top-at-area: calc(
+        -1 * var(--container-position-room-top, 100vmax)
+      );
+      --x-popup-cut-right-at-area: calc(
+        -1 * var(--container-position-room-right, 100vmax)
+      );
+      --x-popup-cut-bottom-at-area: calc(
+        -1 * var(--container-position-room-bottom, 100vmax)
+      );
+      --x-popup-cut-left-at-area: calc(
+        -1 * var(--container-position-room-left, 100vmax)
+      );
     }
 
     /* box-shadow fades in/out alongside any animation kind, instead of
@@ -213,30 +253,8 @@ export const popupCss = /* css */ `
     &[navi-animation="slide-from-bottom-left"],
     &[navi-animation="slide-from-bottom-right"] {
       opacity: 1;
-      /* Where the area the popup was placed in has its edges, in the popup's
-         own coordinates: --container-position-room-* is how far past each of
-         its own edges the popup may still paint before reaching that edge
-         (applyNewPosition in @jsenv/dom), so the negated value puts a cut ON
-         it. Only the side(s) the travel comes from take one (see the direction
-         rules above); the rest stay far outside the box, uncut. A popup that
-         was never placed reads 100vmax and is not cut at all.
-         Outside that area is either the glass beside an app narrowed with
-         --navi-app-max-width (layout/safe_area.js) or whatever surrounds a
-         container — neither the popup's to paint, and a popup in the top layer
-         answers to no overflow of the document. The popup itself is never cut
-         either: the rooms floor at 0. */
-      --x-popup-cut-top-at-area: calc(
-        -1 * var(--container-position-room-top, 100vmax)
-      );
-      --x-popup-cut-right-at-area: calc(
-        -1 * var(--container-position-room-right, 100vmax)
-      );
-      --x-popup-cut-bottom-at-area: calc(
-        -1 * var(--container-position-room-bottom, 100vmax)
-      );
-      --x-popup-cut-left-at-area: calc(
-        -1 * var(--container-position-room-left, 100vmax)
-      );
+      /* Only the side(s) the travel comes from take a cut (see the direction
+         rules above); the rest stay far outside the box, uncut. */
       --x-popup-travel-x: calc(var(--x-popup-slide-x, 0) * 100%);
       --x-popup-travel-y: calc(var(--x-popup-slide-y, -1) * 100%);
       clip-path: inset(
@@ -263,6 +281,40 @@ export const popupCss = /* css */ `
         transform: translate(var(--x-popup-travel-x), var(--x-popup-travel-y));
       }
     }
+
+    /* cover — a top-docked popup unrolling from the top edge of its area (see
+         this file's top comment): the cut does the reveal, the box travels
+         --popup-cover-travel of its own height. The far cut sits where the
+         popup's shadow ends (--navi-popup-box-shadow reaches about 50px) or
+         where the room does, whichever is nearer, so the reveal finishes on
+         the box and its shadow at the pace of the box's own settle. On the
+         box's own edge it would shave the shadow off for good; on a distant
+         container edge it would run far ahead of the box. */
+    &[navi-animation="cover-from-top"] {
+      opacity: 1;
+      --x-popup-cut-top: var(--x-popup-cut-top-at-area);
+      --x-popup-cut-bottom: max(var(--x-popup-cut-bottom-at-area), -60px);
+      --x-popup-travel-y: calc(-1 * var(--popup-cover-travel));
+      clip-path: inset(
+        var(--x-popup-cut-top) -100vmax var(--x-popup-cut-bottom) -100vmax
+      );
+
+      transform: translate(0px, 0px);
+
+      &[aria-expanded="false"] {
+        /* The near cut follows the travel, so it holds the area's top line at
+           every instant (the slide family's arithmetic); the far cut starts on
+           that same line and descends to its open place. What is on screen is
+           the descending curtain a full slide draws, holding the top of the
+           popup instead of its tail. */
+        clip-path: inset(
+          calc(var(--x-popup-cut-top) - var(--x-popup-travel-y)) -100vmax
+            calc(100% + var(--x-popup-travel-y) - var(--x-popup-cut-top))
+            -100vmax
+        );
+        transform: translate(0px, var(--x-popup-travel-y));
+      }
+    }
   }
 
   .navi_popover {

packages/frontend/navi/src/layout/side_panel.jsx

@@ -18,6 +18,19 @@ import { withPropsClassName } from "../utils/with_props_class_name.js";
 import { Popup } from "./popup.jsx";
 import { createSwipeToClose, SWIPE_AXIS_BY_SIDE } from "./swipe_to_close.js";
 
+// What `animation={true}` plays, by the edge the panel is docked to. A top
+// panel keeps its head — the one part of it the eye knows — at the edge it
+// comes from, so a slide of its own height shows its tail first and its head
+// in the last frame; it unrolls instead (popup_css.js, `cover-from-top`). A
+// bottom panel leads with its head by itself, and a left/right one keeps it on
+// the axis it does not travel.
+const ANIMATION_BY_SIDE = {
+  left: "slide-from-left",
+  right: "slide-from-right",
+  top: "cover-from-top",
+  bottom: "slide-from-bottom",
+};
+
 const css = /* css */ `
   .navi_side_panel {
     /* Side panel create a barriere with the content that is full size */
@@ -236,8 +249,9 @@ const css = /* css */ `
  * @param {boolean|"fading"} [props.animation] - Off by default (unlike
  *   `Dialog`/`Popover` themselves) — SidePanel is commonly toggled instead
  *   of opened/closed as a one-off, where a slide transition is more often
- *   undesired noise than not. `true` slides in from `side`; `"fading"` is
- *   the other common choice. Other values are forwarded as-is but not a
+ *   undesired noise than not. `true` slides in from `side` (a top panel
+ *   unrolls from its edge instead, head first — see `ANIMATION_BY_SIDE`);
+ *   `"fading"` is the other common choice. Other values are forwarded as-is but not a
  *   documented/encouraged part of this component's own API.
  * @param {boolean} [props.closeOnClickOutside=false] - `false` (default):
  *   maps to `pointerInteractionOutsideEffect="none"` — in popover mode, no
@@ -307,7 +321,7 @@ export const SidePanel = ({
       // A side panel is flush against the edge it slides in from — none of
       // Dialog's own default gap with the container.
       marginWithContainer={0}
-      animation={animation === true ? `slide-from-${side}` : animation}
+      animation={animation === true ? ANIMATION_BY_SIDE[side] : animation}
       pointerInteractionOutsideEffect={closeOnClickOutside ? "close" : "none"}
       focusCapture={closeOnClickOutside}
       minWidth={toCssLength(minWidth)}

packages/frontend/navi/src/layout/swipe_to_close.js

@@ -110,6 +110,13 @@ export const createSwipeToClose = (side, { grip } = {}) => {
         travelTo(sizeOf(panelEl, axis) * closeDirection, 0, restore);
         return;
       }
+      // The closed style is rendered once while transitions are still off.
+      // Where the release travel left the panel and where its closed style
+      // puts it are the same point only for a kind that travels the panel's
+      // full size (popup_css.js, slide-from-*); a cover kind rests a fraction
+      // in, and handing the styles back before this frame would transition
+      // the panel from one to the other in plain view.
+      panelEl.getBoundingClientRect();
       restore();
     };
 

packages/frontend/navi/src/nav/demos/route_transition_fixed_bars/route_transition_fixed_bars.html

@@ -67,6 +67,11 @@
         padding: 16px;
         background: #f3ecfb;
       }
+
+      :root {
+        --app-max-width: 600px;
+        --navi-app-max-width: var(--app-max-width);
+      }
     </style>
   </head>
   <body>