nexus-shared 3.2.0 → 4.1.0

package/src/Styles/Nexus.Menu.css

@@ -15,6 +15,8 @@
     min-width: 180px;
     max-width: min(360px, calc(100% - 16px));
     outline: none;
+    /* A row's menu sits inside the table's actions cell, which does not wrap; an item's second line has to. */
+    white-space: normal;
   }
 
   /* The items scroll inside the panel (`.nx-popover__scroll`): a block, so a long menu scrolls instead of squeezing
@@ -60,12 +62,19 @@
     background: var(--nx-surface-hover);
   }
 
+  /*
+   * A switched-off item fades its icon, check, label and shortcut, not its second line: that line is why it is off
+   * (a locked record's reason, what an action waits for), and at half strength it measured 2.0 to 3.1:1 in every theme.
+   */
   .nx-menu__item[aria-disabled="true"] {
     background: none;
-    opacity: 0.5;
     cursor: not-allowed;
   }
 
+  .nx-menu__item[aria-disabled="true"] :is(.nx-menu__icon, .nx-menu__check, .nx-menu__label, .nx-menu__shortcut) {
+    opacity: 0.5;
+  }
+
   /* The icon column: the same width on every item, empty on items without an icon. */
   .nx-menu__icon {
     display: grid;

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;
@@ -351,12 +409,18 @@
   }
 
   /* Body: scrolls when the content is taller than the window allows. */
+  /*
+   * Focus scrolls a field's control to the body's edge: `scroll-padding` keeps room past it for what the field draws
+   * outside, an outlined field's raised label above (0.6em of the xs text, and the 2px outline) and the box's border and
+   * 3px focus ring below. A field first in the body has its padding for that.
+   */
   .nx-popup__body {
     flex: 1 1 auto;
     min-height: 0;
     padding: var(--nx-space-4) var(--nx-space-5) var(--nx-space-5);
     overflow: auto;
     overscroll-behavior: contain;
+    scroll-padding: calc(var(--nx-text-xs) * 0.6 + 2px) 4px 4px;
   }
 
   .nx-popup__head + .nx-popup__body:empty {
@@ -403,6 +467,15 @@
     line-height: 1.5;
   }
 
+  /* What a question is about, in full (`details`): read as content, so in the normal text colour, under the message. */
+  .nx-message__details {
+    color: var(--nx-text);
+  }
+
+  .nx-message__text + .nx-message__details {
+    margin-top: var(--nx-space-4);
+  }
+
   .nx-message__form {
     display: grid;
     gap: var(--nx-space-4);
@@ -628,8 +701,15 @@
     vertical-align: 0;
   }
 
-  .nx-dock__title {
+  /* The title, and under it what the window is about when it says (its description): the record, the place. */
+  .nx-dock__text {
+    display: flex;
     flex: 1 1 auto;
+    flex-direction: column;
+    min-width: 0;
+  }
+
+  .nx-dock__title {
     min-width: 0;
     overflow: hidden;
     font-size: var(--nx-text-md);
@@ -639,6 +719,21 @@
     white-space: nowrap;
   }
 
+  .nx-dock__description {
+    min-width: 0;
+    overflow: hidden;
+    color: var(--nx-text-muted);
+    font-size: var(--nx-text-xs);
+    line-height: 1.3;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  /* Muted text on the hover tint moves toward the text color, so it keeps 4.5:1 in every theme. */
+  .nx-dock__window:hover .nx-dock__description {
+    color: color-mix(in oklab, var(--nx-text-muted), var(--nx-text) 35%);
+  }
+
   .nx-dock__restore {
     flex-shrink: 0;
     width: 18px;
@@ -711,6 +806,45 @@
     .nx-popup__foot {
       padding: var(--nx-space-3) var(--nx-space-4);
     }
+
+    /*
+     * A phone has no room for the description after the title: it takes the lines under the title it needs, in full,
+     * and the bar grows with it. The icon and the window buttons keep the bar's first line; the title stays one line.
+     */
+    .nx-popup--window .nx-popup__head {
+      align-items: flex-start;
+      height: auto;
+      min-height: var(--nx-popup-bar);
+    }
+
+    .nx-popup--window .nx-popup__icon {
+      align-self: flex-start;
+      height: var(--nx-popup-bar);
+    }
+
+    .nx-popup--window .nx-popup__heading {
+      flex-wrap: wrap;
+      row-gap: 0;
+    }
+
+    .nx-popup--window .nx-popup__title {
+      flex-basis: 100%;
+    }
+
+    .nx-popup--window .nx-popup__description:not(:empty) {
+      flex-basis: 100%;
+      margin-top: calc(var(--nx-space-1) * -1);
+      padding-bottom: var(--nx-space-2);
+      overflow: visible;
+      line-height: 1.45;
+      white-space: normal;
+      overflow-wrap: anywhere;
+    }
+
+    .nx-popup--window .nx-popup__controls {
+      align-self: flex-start;
+      height: var(--nx-popup-bar);
+    }
   }
 
   [data-nx-motion="reduce"] .nx-popup[open],

package/src/Styles/Nexus.Print.css

@@ -0,0 +1,288 @@
+/*
+ * A printable document (PrintDocument.tsx): a receipt, a bill, a statement. On screen it reads in the theme's colours
+ * at the width of its paper; printed, it is the only thing on the paper, black on white - A5 (128 mm of text) or an
+ * 80 mm thermal roll (72 mm printed). The browser's own print, no PDF library. The paper itself is the component's
+ * own @page rule, written while it is on the page.
+ *
+ * And a whole page a server wrote, in a frame of its own (DocumentFrame.tsx): its sheet, desk and @page are its own.
+ */
+@layer nexus.components {
+  /* As wide as its paper, in any container (a flex column that would shrink it to its text included). */
+  .nx-print {
+    container: nx-print / inline-size;
+    width: 100%;
+    max-width: 128mm;
+    margin-inline: auto;
+    color: var(--nx-text);
+    font-size: 0.875rem;
+    line-height: 1.45;
+  }
+
+  .nx-print--thermal {
+    max-width: 72mm;
+    font-size: 0.75rem;
+  }
+
+  .nx-print p {
+    margin: 0;
+  }
+
+  .nx-print__head {
+    padding-block-end: var(--nx-space-2);
+    border-block-end: 1px dashed var(--nx-border);
+    text-align: center;
+  }
+
+  .nx-print__title {
+    font-size: 1.25em;
+    font-weight: 700;
+  }
+
+  /*
+   * A logo (`logo`). On A5 it sits beside the title lines in a 24 mm column, with one as wide after them so the lines
+   * stay centred on the paper; at most 16 mm tall, so the head is never taller than its lines and a one-page receipt
+   * stays one page. On an 80 mm roll it sits above them, small and centred.
+   */
+  .nx-print__head--logo {
+    display: grid;
+    grid-template-columns: 24mm minmax(0, 1fr) 24mm;
+    align-items: center;
+    column-gap: var(--nx-space-2);
+  }
+
+  .nx-print__logo,
+  .nx-print__heading {
+    min-width: 0;
+  }
+
+  .nx-print__logo {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .nx-print__logo > :is(img, svg) {
+    display: block;
+    max-width: 100%;
+    max-height: 16mm;
+    object-fit: contain;
+  }
+
+  .nx-print--thermal .nx-print__head--logo {
+    display: block;
+  }
+
+  .nx-print--thermal .nx-print__logo {
+    margin-block-end: var(--nx-space-1);
+  }
+
+  /* An A5 document shown narrower than its paper (a phone): the logo above the lines, as on a roll. Printed, it is A5. */
+  @container nx-print (max-width: 100mm) {
+    .nx-print__head--logo {
+      display: block;
+    }
+
+    .nx-print__logo {
+      margin-block-end: var(--nx-space-1);
+    }
+  }
+
+  .nx-print--thermal .nx-print__logo > :is(img, svg) {
+    max-width: 36mm;
+    max-height: 10mm;
+  }
+
+  .nx-print__kind {
+    margin-block-start: var(--nx-space-1);
+    font-weight: 600;
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+  }
+
+  /* A stamp across the document: Voided, Cancelled, Copy. */
+  .nx-print__stamp {
+    margin-block: var(--nx-space-2);
+    padding: var(--nx-space-1);
+    border: 1px solid currentColor;
+    font-weight: 700;
+    text-align: center;
+    text-transform: uppercase;
+  }
+
+  /* Facts: a label and its value on each line, the labels in one column. */
+  .nx-print__facts {
+    display: grid;
+    gap: 2px;
+    margin: var(--nx-space-2) 0;
+  }
+
+  .nx-print__facts > div {
+    display: grid;
+    grid-template-columns: minmax(6.5em, 35%) 1fr;
+    gap: var(--nx-space-2);
+  }
+
+  .nx-print__facts dt {
+    color: var(--nx-text-muted);
+  }
+
+  .nx-print__facts dd {
+    margin: 0;
+    overflow-wrap: anywhere;
+  }
+
+  /* Lines: what was charged, the figures lined up at the end, the totals under a rule. */
+  .nx-print__lines {
+    width: 100%;
+    margin-block: var(--nx-space-2);
+    border-collapse: collapse;
+    font-variant-numeric: tabular-nums;
+  }
+
+  .nx-print__lines th,
+  .nx-print__lines td {
+    padding: 3px 0;
+    text-align: start;
+    vertical-align: top;
+  }
+
+  .nx-print__lines :is(th, td) + :is(th, td) {
+    padding-inline-start: var(--nx-space-2);
+  }
+
+  .nx-print__lines .nx-print__end {
+    text-align: end;
+    white-space: nowrap;
+  }
+
+  .nx-print__lines thead th {
+    border-block-end: 1px solid var(--nx-border);
+    font-weight: 600;
+  }
+
+  .nx-print__lines tfoot :is(th, td) {
+    border-block-start: 1px solid var(--nx-border);
+    font-size: 1.1em;
+    font-weight: 700;
+  }
+
+  .nx-print__lines tfoot tr + tr :is(th, td) {
+    border-block-start: 0;
+  }
+
+  .nx-print__note {
+    display: block;
+    color: var(--nx-text-muted);
+    font-size: 0.9em;
+  }
+
+  .nx-print__foot {
+    padding-block-start: var(--nx-space-2);
+    border-block-start: 1px dashed var(--nx-border);
+    text-align: center;
+    white-space: pre-line;
+  }
+
+  /*
+   * Printed: only the document, lifted out of the page around it, black on white. Only while a document is on the
+   * page (`:has`), so printing any other page prints that page as it is.
+   */
+  @media print {
+    body:has(.nx-print) * {
+      visibility: hidden;
+    }
+
+    body:has(.nx-print) .nx-print,
+    body:has(.nx-print) .nx-print * {
+      visibility: visible;
+    }
+
+    body:has(.nx-print) .nx-print {
+      position: absolute;
+      inset: 0 auto auto 0;
+      width: 100%;
+      max-width: none;
+      color: #000;
+      background: #fff;
+    }
+
+    body:has(.nx-print) .nx-print--thermal {
+      width: 72mm;
+    }
+
+    .nx-print__facts dt,
+    .nx-print__note {
+      color: #000;
+    }
+
+    /* A logo prints in black and white, as the rest does: a thermal roll has no other colour. */
+    .nx-print__logo {
+      filter: grayscale(1);
+    }
+
+    .nx-print__head,
+    .nx-print__foot,
+    .nx-print__lines thead th,
+    .nx-print__lines tfoot :is(th, td) {
+      border-color: #000;
+    }
+  }
+
+  /*
+   * A server's page in a frame: a form's bar (its status line and the page's buttons) over the page, which fills the
+   * height the container gives and never less than 22rem, so a frame stacked under an editor is never a sliver. The
+   * frame scrolls inside itself; a sheet wider than the box scrolls sideways there, never the page.
+   */
+  .nx-document-frame {
+    display: flex;
+    flex: 1 1 auto;
+    flex-direction: column;
+    gap: var(--nx-space-2);
+    min-width: 0;
+    min-height: 22rem;
+  }
+
+  /* Its line says a few words ("Loading the preview…"), so two buttons stay beside it in a half-width frame. */
+  .nx-document-frame__bar {
+    --nx-form-status-basis: 10rem;
+
+    flex: none;
+  }
+
+  /* Lower than the panel, as a read-only box: the page's own desk covers it once a page is there. */
+  .nx-document-frame__view {
+    position: relative;
+    display: grid;
+    flex: 1 1 auto;
+    place-items: center;
+    min-height: 0;
+    overflow: hidden;
+    border: 1px solid var(--nx-border);
+    border-radius: var(--nx-radius);
+    background: light-dark(var(--nx-surface-2), var(--nx-bg));
+  }
+
+  .nx-document-frame__page {
+    position: absolute;
+    inset: 0;
+    display: block;
+    width: 100%;
+    height: 100%;
+    border: 0;
+    transition: opacity var(--nx-duration);
+  }
+
+  /* A read that lasts: the page shown stays, dimmed, under the bar's "Loading…". */
+  .nx-document-frame__view--busy .nx-document-frame__page {
+    opacity: 0.5;
+  }
+
+  [data-nx-motion="reduce"] .nx-document-frame__page {
+    transition: none;
+  }
+
+  .nx-document-frame__empty {
+    max-width: 32rem;
+    padding: var(--nx-space-4);
+  }
+}

package/src/Styles/Nexus.QrCode.css

@@ -0,0 +1,12 @@
+@layer nexus.components {
+  /*
+   * A QR code (`QrCodeImage`): the white square of its quiet zone with a control's rounded corners, 9rem wide unless the
+   * page's own class says otherwise. Its colours are the SVG's own fills, black on white in every theme, as a camera
+   * reads it; forced colours leave SVG fills alone (Chromium, measured by the template's qr-code.cjs).
+   */
+  .nx-qr {
+    display: block;
+    width: 9rem;
+    border-radius: var(--nx-radius);
+  }
+}