nexus-shared 4.0.0 → 4.1.0

package/src/Styles/Nexus.Popup.css

@@ -9,6 +9,8 @@
     /* Percentages, not vw: the viewport width here leaves out the scrollbar. */
     width: min(var(--nx-popup-width), calc(100% - 32px));
     max-width: none;
+    /* fit-content, as the browser sizes a dialog: `auto` would stretch a modal one between its insets. */
+    height: var(--nx-popup-height, fit-content);
     max-height: min(calc(100vh - 48px), calc(100dvh - 48px));
     margin: auto;
     padding: 0;
@@ -86,7 +88,12 @@
   .nx-popup--full {
     --nx-popup-width: calc(100% - 32px);
 
+    /*
+     * dvh, not vh alone: on a phone or tablet browser 100vh is the screen with the address bar hidden, so while the bar
+     * shows, the popup's foot (Save, the tab footer) would sit under the screen's edge. vh stays for older browsers.
+     */
     height: calc(100vh - 32px);
+    height: calc(100dvh - 32px);
     max-height: none;
   }
 
@@ -100,6 +107,57 @@
     translate: none;
   }
 
+  /*
+   * Docked (`docked`): a window on the page, not over it - no backdrop, the page usable - standing on the bottom edge at
+   * the right, above the dock's bars, each next one to the left of the one before (the Popup writes where,
+   * `--nx-docked-right`, and which is on top, `--nx-docked-z`). Its height is its own (`height`), the body
+   * scrolling inside. On a phone it takes the width, and the last used covers the others.
+   */
+  .nx-popup.nx-popup--docked {
+    position: fixed;
+    inset: auto calc(var(--nx-docked-right, 16px) + env(safe-area-inset-right, 0px)) calc(16px + var(--nx-dock-space, 0px) + env(safe-area-inset-bottom, 0px)) auto;
+    z-index: calc(900 + var(--nx-docked-z, 1));
+    height: min(var(--nx-popup-height, 32rem), calc(100dvh - 32px - var(--nx-dock-space, 0px)));
+    max-height: none;
+    margin: 0;
+    translate: none;
+  }
+
+  .nx-popup.nx-popup--docked.nx-popup--maximized {
+    inset: 0;
+    z-index: 950;
+    width: 100%;
+    height: 100%;
+  }
+
+  @media (max-width: 40rem) {
+    .nx-popup.nx-popup--docked:not(.nx-popup--maximized) {
+      inset: auto calc(8px + env(safe-area-inset-right, 0px)) calc(8px + var(--nx-dock-space, 0px) + env(safe-area-inset-bottom, 0px)) auto;
+      width: calc(100% - 16px);
+      height: min(var(--nx-popup-height, 32rem), calc(100dvh - 24px - var(--nx-dock-space, 0px)));
+    }
+  }
+
+  /*
+   * A drawer (`drawer`): the window's whole height at its end edge, its width from its size, all of it on a phone. It
+   * fades in where it stays, as every popup does; its body scrolls between the title bar and the foot.
+   */
+  .nx-popup.nx-popup--drawer {
+    inset: 0 0 0 auto;
+    width: min(var(--nx-popup-width), 100%);
+    height: 100%;
+    max-height: none;
+    margin: 0;
+    border-width: 0;
+    border-inline-start-width: 1px;
+    border-radius: 0;
+    translate: none;
+  }
+
+  .nx-popup--drawer:dir(rtl) {
+    inset: 0 auto 0 0;
+  }
+
   /* Minimizing: the page comes back while the popup flies to the dock. */
   .nx-popup[data-nx-minimizing] {
     pointer-events: none;