nexus-shared 3.2.0 → 4.0.0

package/src/Styles/Nexus.Files.css

@@ -0,0 +1,410 @@
+/*
+ * An owner's pictures and documents (OwnerFiles.tsx, PictureInput.tsx): a picture of any size and shape, the picture
+ * input's preview and buttons, the gallery's two panes and the document list. Nothing moves under the pointer: a hovered
+ * picture gets a ring, never a new size, so a table's rows and the gallery's grid stay where they are.
+ */
+@layer nexus.components {
+  /* A picture: its height from --nx-picture-h, its width from the shape (--nx-picture-ratio, width / height). */
+  .nx-picture {
+    position: relative;
+    display: inline-grid;
+    flex-shrink: 0;
+    place-items: center;
+    height: var(--nx-picture-h, 28px);
+    aspect-ratio: var(--nx-picture-ratio, 1);
+    padding: 0;
+    overflow: hidden;
+    border: 0;
+    border-radius: var(--nx-radius-sm);
+    background: color-mix(in oklab, var(--nx-text) 7%, var(--nx-surface));
+    color: var(--nx-text-subtle);
+    font: inherit;
+    vertical-align: middle;
+  }
+
+  .nx-picture img {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  .nx-picture--empty .nx-icon {
+    width: min(50%, 2rem);
+    height: auto;
+  }
+
+  .nx-picture--round {
+    border-radius: 50%;
+  }
+
+  /* No picture, a name: its initials, on the name's avatar tone (Nexus.Avatar.css), in the text colour. */
+  .nx-picture--initials {
+    color: var(--nx-text);
+    font-size: max(8px, calc(var(--nx-picture-h, 28px) * 0.4));
+    font-weight: 600;
+    line-height: 1;
+  }
+
+  /* Not read yet: the tint alone, so a row with a picture never flashes the no-picture icon first. */
+  .nx-picture--loading .nx-icon {
+    visibility: hidden;
+  }
+
+  button.nx-picture {
+    cursor: pointer;
+  }
+
+  button.nx-picture:hover {
+    box-shadow: 0 0 0 1px var(--nx-border-strong);
+  }
+
+  :is(button.nx-picture, .nx-files__name):focus-visible {
+    outline: none;
+    box-shadow: var(--nx-focus-ring);
+  }
+
+  /* The picture input: the preview beside its buttons, which wrap under it when the form is narrow. */
+  .nx-picture-input {
+    min-width: 0;
+  }
+
+  .nx-picture-input__body {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--nx-space-3) var(--nx-space-4);
+    margin-top: var(--nx-space-1);
+  }
+
+  .nx-picture-input__actions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--nx-space-2);
+  }
+
+  /* The gallery and the document list. */
+  .nx-files {
+    display: grid;
+    gap: var(--nx-space-4);
+    min-width: 0;
+  }
+
+  .nx-files__bar {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--nx-space-2) var(--nx-space-3);
+  }
+
+  .nx-files__note {
+    margin: 0;
+    color: var(--nx-text-muted);
+    font-size: var(--nx-text-sm);
+  }
+
+  .nx-files__note--error {
+    color: var(--nx-danger-text);
+  }
+
+  .nx-files__empty {
+    display: grid;
+    place-items: center;
+    gap: var(--nx-space-2);
+    padding: var(--nx-space-8) var(--nx-space-4);
+    border-radius: var(--nx-radius-lg);
+    background: color-mix(in oklab, var(--nx-text) 4%, var(--nx-surface));
+    color: var(--nx-text-muted);
+    text-align: center;
+  }
+
+  .nx-files__empty > .nx-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+
+  .nx-files__empty p {
+    margin: 0;
+  }
+
+  .nx-files__grid,
+  .nx-files__list {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  /*
+   * Pictures in two panes (the 2026-06-20 gallery): the main picture large with its buttons and the count, a hairline,
+   * then the grid. The gallery is the size container: under 560px of its own width the main picture sits small beside
+   * its buttons, over the grid. In its window (a flush popup's body) it has a height of its own, so the grid scrolls and
+   * nothing else does; in a page or a tab it is as tall as its pictures.
+   */
+  .nx-files--panes {
+    container-type: inline-size;
+    width: 100%;
+  }
+
+  .nx-files__frame {
+    display: grid;
+    grid-template-columns: auto minmax(0, 1fr);
+    min-height: 0;
+  }
+
+  .nx-files__side {
+    display: flex;
+    flex-direction: column;
+    gap: var(--nx-space-4);
+    box-sizing: content-box;
+    width: 15rem;
+    min-height: 0;
+    padding-inline-end: var(--nx-space-5);
+    border-inline-end: 1px solid var(--nx-border);
+  }
+
+  /* The main picture: about 15rem on its long side, a rounded square for every shape (only an avatar is round). */
+  .nx-files__cover {
+    --nx-picture-h: calc(15rem / max(1, var(--nx-picture-ratio, 1)));
+
+    align-self: center;
+    border-radius: var(--nx-radius-lg);
+  }
+
+  .nx-files__cover.nx-picture--empty .nx-icon {
+    width: 3rem;
+  }
+
+  .nx-files__about {
+    display: grid;
+    align-content: start;
+    gap: var(--nx-space-3);
+    min-width: 0;
+  }
+
+  .nx-files__side-actions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--nx-space-2);
+  }
+
+  .nx-files__side-actions > .nx-btn {
+    flex: 1 1 0;
+  }
+
+  .nx-files__pane {
+    min-width: 0;
+    min-height: 0;
+    padding-inline-start: var(--nx-space-5);
+  }
+
+  /*
+   * The window: edge to edge, the panes padded inside, a height of its own (the whole window once it fills it). What is
+   * not the panes there - the list that could not be read, with Try again - has the window's own padding.
+   */
+  .nx-popup--flush .nx-popup__body > .nx-files:not(.nx-files--panes) {
+    padding: var(--nx-space-5);
+  }
+
+  @media (max-width: 600px) {
+    .nx-popup--flush .nx-popup__body > .nx-files:not(.nx-files--panes) {
+      padding: var(--nx-space-4);
+    }
+  }
+
+  .nx-popup--flush .nx-popup__body > .nx-files--panes {
+    height: min(36rem, calc(100dvh - 10rem));
+  }
+
+  .nx-popup:is(.nx-popup--full, .nx-popup--maximized) .nx-popup__body > .nx-files--panes {
+    height: 100%;
+  }
+
+  .nx-popup--flush .nx-popup__body > .nx-files--panes .nx-files__frame {
+    height: 100%;
+  }
+
+  .nx-popup--flush .nx-popup__body > .nx-files--panes :is(.nx-files__side, .nx-files__pane) {
+    padding: var(--nx-space-5);
+    overflow-y: auto;
+    overscroll-behavior: contain;
+  }
+
+  /* At least two pictures a row; about 11rem each where there is room. */
+  .nx-files__grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(min(11rem, calc(50% - var(--nx-space-3) / 2)), 1fr));
+    gap: var(--nx-space-3);
+  }
+
+  .nx-files__tile {
+    position: relative;
+    min-width: 0;
+  }
+
+  /* A picture in the grid: a rounded square (or the page's shape), the picture covering it. */
+  .nx-files__thumb,
+  .nx-table__bone.nx-files__bone {
+    position: relative;
+    display: block;
+    width: 100%;
+    height: auto;
+    aspect-ratio: var(--nx-picture-ratio, 1);
+    overflow: hidden;
+    border-radius: var(--nx-radius-lg);
+    background: color-mix(in oklab, var(--nx-text) 7%, var(--nx-surface));
+  }
+
+  .nx-files__thumb img {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  .nx-files__tile:hover .nx-files__thumb {
+    box-shadow: 0 0 0 1px var(--nx-border-strong);
+  }
+
+  /* The main picture: a ring in the accent, and the Main tag in its corner. */
+  .nx-files__tile[data-primary] .nx-files__thumb {
+    box-shadow: 0 0 0 2px var(--nx-primary);
+  }
+
+  .nx-files__mark {
+    position: absolute;
+    top: var(--nx-space-2);
+    left: var(--nx-space-2);
+    box-shadow: var(--nx-shadow-sm);
+  }
+
+  /*
+   * The picture's buttons, inside it and centred, on a popover's panel. Shown on hover and on a keyboard's focus in the
+   * picture; where a finger may press (a touch screen, a laptop's too) always, so no button waits behind a hover.
+   * Hidden, they stay in the Tab order and to a screen reader, but take no press: a tap meant for the picture never
+   * runs Make main or Edit unseen.
+   */
+  .nx-files__tools {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 2px;
+    width: fit-content;
+    max-width: calc(100% - var(--nx-space-2));
+    height: fit-content;
+    margin: auto;
+    padding: 3px;
+    border: 1px solid var(--nx-border);
+    border-radius: var(--nx-radius);
+    background: light-dark(var(--nx-surface), var(--nx-surface-2));
+    box-shadow: var(--nx-shadow);
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity var(--nx-duration) ease-out;
+  }
+
+  .nx-files__tile:is(:hover, :has(:focus-visible)) .nx-files__tools {
+    opacity: 1;
+    pointer-events: auto;
+  }
+
+  @media (hover: none), (any-hover: none), (any-pointer: coarse) {
+    .nx-files__tools {
+      opacity: 1;
+      pointer-events: auto;
+    }
+  }
+
+  @container (max-width: 559.98px) {
+    .nx-files__frame {
+      display: flex;
+      flex-direction: column;
+    }
+
+    .nx-files__side {
+      flex-direction: row;
+      align-items: flex-start;
+      flex-shrink: 0;
+      gap: var(--nx-space-3);
+      box-sizing: border-box;
+      width: auto;
+      padding: 0 0 var(--nx-space-4);
+      border-inline-end: 0;
+      border-bottom: 1px solid var(--nx-border);
+    }
+
+    .nx-files__cover {
+      --nx-picture-h: calc(7rem / max(1, var(--nx-picture-ratio, 1)));
+
+      align-self: flex-start;
+    }
+
+    .nx-files__cover.nx-picture--empty .nx-icon {
+      width: 2rem;
+    }
+
+    .nx-files__about {
+      flex: 1 1 0;
+    }
+
+    .nx-files__pane {
+      flex: 1 1 auto;
+      padding: var(--nx-space-4) 0 0;
+    }
+
+    .nx-popup--flush .nx-popup__body > .nx-files--panes .nx-files__side {
+      flex-shrink: 0;
+      padding: var(--nx-space-4);
+      overflow: visible;
+    }
+
+    .nx-popup--flush .nx-popup__body > .nx-files--panes .nx-files__pane {
+      padding: var(--nx-space-4);
+    }
+  }
+
+  [data-nx-motion="reduce"] .nx-files__tools {
+    transition: none;
+  }
+
+  /* The document list: a row per file, its buttons at the end. */
+  .nx-files__actions {
+    display: inline-flex;
+    gap: 2px;
+  }
+
+  .nx-files__row {
+    display: grid;
+    grid-template-columns: auto minmax(0, 1fr) auto;
+    align-items: center;
+    gap: var(--nx-space-3);
+    padding: var(--nx-space-2) 0;
+  }
+
+  .nx-files__row + .nx-files__row {
+    border-top: 1px solid var(--nx-border);
+  }
+
+  .nx-files__row-text {
+    display: grid;
+    min-width: 0;
+  }
+
+  .nx-files__name {
+    overflow: hidden;
+    border-radius: var(--nx-radius-sm);
+    color: var(--nx-text);
+    font-weight: 500;
+    text-decoration: none;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .nx-files__name:hover {
+    text-decoration: underline;
+  }
+}

package/src/Styles/Nexus.Form.css

@@ -180,10 +180,13 @@
     flex: 1;
   }
 
-  /* One line kept even when empty: "Loading…", "Saving…" and "Unsaved changes" come and go, and the bar never jumps. */
+  /*
+   * One line kept even when empty: "Loading…", "Saving…" and "Unsaved changes" come and go, and the bar never jumps.
+   * The room kept beside the buttons is 14rem; a bar whose words are fewer asks less (`--nx-form-status-basis`).
+   */
   .nx-form-status {
     display: flex;
-    flex: 1 1 14rem;
+    flex: 1 1 var(--nx-form-status-basis, 14rem);
     align-items: flex-start;
     gap: 6px;
     min-width: 0;

package/src/Styles/Nexus.Index.css

@@ -22,10 +22,14 @@
 @import "./Nexus.Input.css";
 @import "./Nexus.Editor.css";
 @import "./Nexus.Excel.css";
+@import "./Nexus.Files.css";
 @import "./Nexus.Form.css";
 @import "./Nexus.Markdown.css";
 @import "./Nexus.Menu.css";
 @import "./Nexus.Popup.css";
+@import "./Nexus.Print.css";
+@import "./Nexus.QrCode.css";
+@import "./Nexus.Record.css";
 @import "./Nexus.RichText.css";
 @import "./Nexus.Rows.css";
 @import "./Nexus.Slider.css";

package/src/Styles/Nexus.Input.css

@@ -139,11 +139,36 @@
     font-variant-numeric: tabular-nums;
   }
 
+  /*
+   * A value worked out from other inputs (a form's `compute`): an <output> where an input would be, its text placed as an
+   * input's is (in the middle of the box, low in an inbox one) and in the text colour, a long one cut with an ellipsis.
+   * Never typed in, so no I-beam; the read-only tint around it comes from the field.
+   */
+  .nx-field__control--output {
+    display: flex;
+    align-items: center;
+    overflow: hidden;
+    white-space: nowrap;
+    cursor: default;
+  }
+
+  .nx-field__output-text {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
   .nx-field__control::placeholder {
     color: var(--nx-text-subtle);
     opacity: 1;
   }
 
+  /* A read-only field's placeholder is all it shows ("None"), so it reads as text: --nx-text-subtle is under 3:1 on the
+     read-only box in light themes, muted text at least 4.5:1. */
+  .nx-field[data-readonly] .nx-field__control::placeholder {
+    color: var(--nx-text-muted);
+  }
+
   /* Browser extras that the field replaces with its own buttons. */
   .nx-field__control::-webkit-search-cancel-button,
   .nx-field__control::-webkit-search-decoration {
@@ -338,6 +363,12 @@
     animation: nx-field-nudge 320ms ease-in-out;
   }
 
+  /* A box pointed at with the same nudge: the one thing to set first, when the cursor is sent to it (a CRUD's Add pressed
+     while its narrowing box has nothing picked). */
+  .nx-field__box[data-nudge] {
+    animation: nx-field-nudge 320ms ease-in-out;
+  }
+
   @keyframes nx-field-nudge {
     20%,
     60% {
@@ -577,6 +608,16 @@
     resize: vertical;
   }
 
+  /* Code (`TextArea code`): the editor's monospace, lines kept as typed, a long one scrolled sideways in the box. */
+  .nx-field--multiline .nx-field__control--code {
+    overflow-x: auto;
+    font-family: var(--nx-font-mono);
+    font-size: calc(var(--nx-field-font) - 0.5px);
+    white-space: pre;
+    overflow-wrap: normal;
+    tab-size: 2;
+  }
+
   /* Buttons and the read-only lock sit at the top end, centered on the first line (line height 1.4). */
   .nx-field--multiline .nx-field__actions {
     align-items: flex-start;
@@ -788,6 +829,7 @@
   }
 
   [data-nx-motion="reduce"] .nx-field__lock[data-nudge],
+  [data-nx-motion="reduce"] .nx-field__box[data-nudge],
   [data-nx-motion="reduce"] .nx-field-notice:popover-open {
     animation: none;
   }

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

@@ -351,12 +351,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 +409,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 +643,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 +661,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 +748,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],