nexus-shared 3.2.0 → 4.1.0

package/src/Styles/Nexus.Crud.css

@@ -19,49 +19,184 @@
     flex: 1 1 auto;
   }
 
-  /* Details: label over value, two to a line where there is room. */
+  /*
+   * A list narrowed to one record picked in another (`narrow`): whose records these are, in the table's caption, kept
+   * while nothing is picked so the rows never move. Positioned, so the words kept for screen readers stay in it.
+   */
+  .nx-crud__scope {
+    position: relative;
+    margin: 0;
+  }
+
+  .nx-crud__scope-name {
+    color: var(--nx-text);
+    font-weight: 600;
+  }
+
+  /* A tree of records (`CrudTree`): the picked record's buttons, beside its name in the page's panel, wrapping as one group. */
+  .nx-crud-tree__actions {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--nx-space-2);
+  }
+
+  /*
+   * Details (the 2026-06-20 look): each field a label and its value in a box - a hairline and the raised surface - two
+   * pairs to a line where the details are wide (46rem), one where they are not; under 20rem the label goes over its
+   * value. The details are their own size container, so a popup, a workspace's tab, a column beside a panel and a
+   * question's box each get the look their width allows. Every label has one width (a share of the details' width), so
+   * the values of both columns, and of a field across the line, start on one edge.
+   */
   .nx-crud-details {
+    container: nx-crud-details / inline-size;
     display: flex;
     flex-direction: column;
     gap: var(--nx-space-3);
   }
 
   .nx-crud-details__list {
+    --nx-crud-details-label: clamp(6rem, 30cqi, 11rem);
+
     display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr));
-    gap: var(--nx-space-4) var(--nx-space-5);
+    grid-template-columns: minmax(0, 1fr);
+    gap: var(--nx-space-2) var(--nx-space-6);
     margin: 0;
+    font-size: var(--nx-text-md);
+    line-height: 1.5;
   }
 
+  /* The label beside its value, on the line of the value's first line however many lines the value takes. */
   .nx-crud-details__item {
-    display: flex;
-    flex-direction: column;
-    gap: 2px;
+    display: grid;
+    grid-template-columns: var(--nx-crud-details-label) minmax(0, 1fr);
+    align-items: start;
+    gap: var(--nx-space-1) var(--nx-space-3);
     min-width: 0;
   }
 
-  .nx-crud-details__item--wide {
+  /* A long text (`wrap`, Markdown) and a list of rows (`table`) take the whole line. */
+  .nx-crud-details__item--wide,
+  .nx-crud-details__item--table {
     grid-column: 1 / -1;
   }
 
   .nx-crud-details__label {
+    /* The value's box: its border and its padding, so the two first lines share a baseline. */
+    padding-block: 5px;
     color: var(--nx-text-muted);
-    font-size: var(--nx-text-sm);
+    overflow-wrap: break-word;
   }
 
   .nx-crud-details__value {
-    /* A value still to come keeps its line, so the full record lands without moving anything. */
-    min-height: 1lh;
+    /*
+     * Positioned, so what a value draws out of the flow (a tick's words for screen readers) stays in its box and inside
+     * the box that scrolls it, never making the popup itself scroll.
+     */
+    position: relative;
+    /* A value still to come keeps its box, so the full record lands without moving anything. */
+    min-height: calc(1lh + 10px);
     margin: 0;
+    padding: 4px var(--nx-space-3);
+    border: 1px solid var(--nx-border);
+    border-radius: var(--nx-radius-sm);
+    background: var(--nx-surface-2);
     overflow-wrap: anywhere;
-    font-size: var(--nx-text-md);
   }
 
-  /* A field only the full record has, when that record could not be loaded. */
+  /* A list of rows: its label over its table, which is the box. */
+  .nx-crud-details__item--table {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .nx-crud-details__item--table > .nx-crud-details__label {
+    padding-block: 0;
+  }
+
+  .nx-crud-details__table {
+    min-width: 0;
+    margin: 0;
+  }
+
+  /* The table's own frame: across the line, its columns scrolling sideways inside it when they are wider (a phone). */
+  .nx-crud-details__rows {
+    max-width: 100%;
+    overflow-x: auto;
+  }
+
+  .nx-crud-details__rows table {
+    width: 100%;
+  }
+
+  /* The row's number: as narrow as its figures. */
+  .nx-crud-details__rows :is(th, td):first-child {
+    width: 1%;
+    font-variant-numeric: tabular-nums;
+    white-space: nowrap;
+  }
+
+  /*
+   * Details in sections (`column.group`): each run of fields under its numbered heading ("01. Contact"), the heading
+   * nearer its fields than the section before it.
+   */
+  .nx-crud-details__section {
+    display: flex;
+    flex-direction: column;
+    gap: var(--nx-space-3);
+    min-width: 0;
+  }
+
+  .nx-crud-details__section + .nx-crud-details__section {
+    margin-top: var(--nx-space-4);
+  }
+
+  .nx-crud-details__heading {
+    margin: 0;
+    color: var(--nx-text);
+    font-size: var(--nx-text-lg);
+    font-weight: 600;
+    line-height: 1.35;
+    font-variant-numeric: tabular-nums;
+  }
+
+  /* A section's heading with its own Edit (`details.sections`): the button at the end of the heading's line. */
+  .nx-crud-details__head {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--nx-space-1) var(--nx-space-3);
+    min-width: 0;
+  }
+
+  /* A field only the full record has, when that record could not be loaded; a list with no rows. */
   .nx-crud-details__missing {
     color: var(--nx-text-muted);
   }
 
+  @container nx-crud-details (min-width: 46rem) {
+    .nx-crud-details__list {
+      --nx-crud-details-label: clamp(7rem, 15cqi, 11rem);
+
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+
+    /* The fields sit in from their heading. */
+    .nx-crud-details__section > .nx-crud-details__list {
+      padding-inline-start: var(--nx-space-5);
+    }
+  }
+
+  @container nx-crud-details (max-width: 19.98rem) {
+    .nx-crud-details__item {
+      grid-template-columns: minmax(0, 1fr);
+    }
+
+    .nx-crud-details__label {
+      padding-block: 0;
+    }
+  }
+
   /*
    * The details popup's footer is a form's bar (Nexus.Form.css): its status line on the left - "Loading…" for a slow
    * record, "Not all fields loaded." for one that failed - and Edit and Close on the right. The line takes only the room
@@ -124,18 +259,27 @@
     flex-direction: column;
   }
 
+  /*
+   * Under the fields, at every width (`details.asidePlace: "below"`, a record's workspace by default): the fields take
+   * the whole width, the panel the whole width under them, as tall as what it holds; what scrolls is the box around
+   * both (the workspace's panel, the popup's body), never a column of its own.
+   */
+  .nx-crud-aside--below > .nx-crud-aside__side {
+    max-height: none;
+  }
+
   /*
    * Side by side, where there is room for both. The popup's body stops scrolling and each column takes its own, so a
    * long form never pushes the panel off the screen. The body is a flex row here, which is what gives its one child a
    * height to work from: no percentage height anywhere, so it holds at every popup size.
    */
   @media (min-width: 1000px) {
-    .nx-popup__body:has(> .nx-crud-aside) {
+    .nx-popup__body:has(> .nx-crud-aside:not(.nx-crud-aside--below)) {
       display: flex;
       overflow: hidden;
     }
 
-    .nx-crud-aside {
+    .nx-crud-aside:not(.nx-crud-aside--below) {
       flex: 1 1 auto;
       min-width: 0;
       /* The panel takes a share of the width, not half of it: a form has columns to fit, and code lines are short. */
@@ -146,23 +290,344 @@
      * A details popup's panel (`details.aside`) is what the popup is for, and the details beside it are a short list
      * of fields, so the shares turn round: the fields take a column of their own width and the panel the rest.
      */
-    .nx-crud-aside.nx-crud-aside--details {
+    .nx-crud-aside--details:not(.nx-crud-aside--below) {
       grid-template-columns: minmax(0, var(--nx-crud-details-width, clamp(16rem, 30%, 26rem))) minmax(0, 1fr);
     }
 
-    .nx-crud-aside__main {
+    /*
+     * Each column scrolls on its own, and a scroll box clips at its padding edge: a field first in it would lose what it
+     * draws past its box. Room inside the edges, paid back by a negative margin so nothing moves: above, an outlined
+     * field's raised label (lifted 0.6em of the xs text over the top border) and its 2px focus outline; on every side,
+     * the 3px focus ring (`--nx-focus-ring`). Focus scrolls a field's control to an edge, so `scroll-padding` keeps the
+     * same room past the control: the label above, the box's 1px border and the ring below (the popup's body too).
+     */
+    .nx-crud-aside:not(.nx-crud-aside--below) > :is(.nx-crud-aside__main, .nx-crud-aside__side) {
       overflow: auto;
       overscroll-behavior: contain;
-      /* Focus rings reach past an input's edge; without this the scroll box cuts them off. */
-      padding: 2px;
-      margin: -2px;
+      padding: calc(var(--nx-text-xs) * 0.6 + 2px) 3px 3px;
+      margin: calc(var(--nx-text-xs) * -0.6 - 2px) -3px -3px;
+      scroll-padding: calc(var(--nx-text-xs) * 0.6 + 2px) 4px 4px;
     }
 
     /* A panel taller than the popup scrolls here, whatever it holds; one that fills the height scrolls inside itself. */
     .nx-crud-aside__side {
       max-height: none;
-      overflow: auto;
-      overscroll-behavior: contain;
+    }
+  }
+
+  /*
+   * A record's workspace in its details popup (`details.tabs`, `details.profile`): who the record is and its tabs in a
+   * column on the left, the chosen tab on the right. The popup's body stops scrolling and only the tab scrolls, inside
+   * itself, so the profile, the tabs and the footer stay where they are and a switch never changes the popup's size. The
+   * workspace is the container its column and the tabs' `auto` design follow: below 720px (a phone) the profile is one
+   * row and the tabs one strip, above the tab.
+   */
+  .nx-popup__body:has(> .nx-crud-workspace) {
+    display: flex;
+    overflow: hidden;
+  }
+
+  .nx-crud-workspace {
+    container-type: inline-size;
+    flex: 1 1 auto;
+    min-width: 0;
+    /* A popup of a set width (`lg`, `xl`) gets a height of its own, so no tab changes it; `full` gives its own. */
+    height: min(40rem, calc(100dvh - 10rem));
+  }
+
+  .nx-popup:is(.nx-popup--full, .nx-popup--maximized) .nx-crud-workspace {
+    height: auto;
+  }
+
+  .nx-crud-workspace__frame {
+    --nx-crud-profile-picture: 10rem;
+
+    display: grid;
+    grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
+    height: 100%;
+  }
+
+  /* Neither a profile nor more than one tab for this person: the tab alone, the width of the popup. */
+  .nx-crud-workspace__frame--alone {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .nx-crud-workspace__side {
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+    border-inline-end: 1px solid var(--nx-border);
+    background: color-mix(in oklab, var(--nx-text) 3%, transparent);
+  }
+
+  .nx-crud-workspace__profile {
+    flex-shrink: 0;
+    padding: var(--nx-space-5) var(--nx-space-4);
+  }
+
+  .nx-crud-workspace__profile + .nx-crud-workspace__nav {
+    border-top: 1px solid var(--nx-border);
+  }
+
+  .nx-crud-workspace__nav {
+    flex: 1 1 auto;
+    min-height: 0;
+    padding: var(--nx-space-3);
+    overflow-y: auto;
+    overscroll-behavior: contain;
+  }
+
+  /*
+   * Its padding is the room for a field first in it; `scroll-padding` the room round one the focus scrolls to (as the
+   * aside's). The side padding is named, so a tab's footer can reach across it.
+   */
+  .nx-crud-workspace__panel {
+    --nx-crud-panel-pad-x: var(--nx-space-5);
+
+    /* Positioned: what a tab draws out of the flow scrolls and clips with the tab, never past the popup. */
+    position: relative;
+    min-width: 0;
+    min-height: 0;
+    padding: var(--nx-space-4) var(--nx-crud-panel-pad-x) var(--nx-space-5);
+    overflow: auto;
+    overscroll-behavior: contain;
+    /* Below: the 3px ring and 2px more, as the panel's top can sit on a half pixel and its box on another fraction. */
+    scroll-padding: calc(var(--nx-text-xs) * 0.6 + 2px) 4px 5px;
+  }
+
+  /*
+   * A tab's footer (`CrudTabFooter`): one bar, its words at the start and its buttons at the end, with the popup
+   * footer's room and hairline. On a phone the words and the buttons wrap as whole groups. Where it is not in a
+   * workspace's panel, this is all it is: a plain bar where it stands.
+   */
+  .nx-crud-tab-footer {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: flex-end;
+    gap: var(--nx-space-2);
+    padding-block: var(--nx-space-3);
+    border-top: 1px solid var(--nx-border);
+  }
+
+  .nx-crud-tab-footer > p {
+    flex: 1 1 auto;
+    min-width: 0;
+    margin: 0;
+  }
+
+  /* A form's bar fills the rest, so its status line sits beside its buttons (as in the popup's footer). */
+  .nx-crud-tab-footer > .nx-form-buttons {
+    flex: 1 1 auto;
+  }
+
+  /*
+   * In a workspace's panel it stays in view: it sticks to the bottom of the panel while the tab scrolls and sits in its
+   * place at the end, across the panel's whole width (past its side padding) on the panel's own surface, never a box of
+   * its own (no shadow, no frame). The panel keeps no padding under it, so it meets the panel's foot at the end as
+   * while it sticks. What the focus scrolls into view (a field, a caret) clears it: the panel keeps the footer's height
+   * as `CrudTabFooter` measures it (`scroll-padding`). Above what a tab's content raises (a field's label, a table's
+   * sticky header: 5 at most).
+   */
+  .nx-crud-workspace__panel:has(.nx-crud-tab-footer) {
+    padding-bottom: 0;
+    scroll-padding-bottom: calc(var(--nx-crud-tab-footer-size, 0px) + 4px);
+  }
+
+  /* While the focus is in the footer, which is always in view, that room goes: its Save never scrolls the tab. */
+  .nx-crud-workspace__panel:has(.nx-crud-tab-footer:focus-within) {
+    scroll-padding-bottom: 4px;
+  }
+
+  .nx-crud-workspace__panel .nx-crud-tab-footer {
+    position: sticky;
+    bottom: 0;
+    z-index: 6;
+    margin-inline: calc(-1 * var(--nx-crud-panel-pad-x));
+    padding-inline: var(--nx-crud-panel-pad-x);
+    background: var(--nx-surface);
+  }
+
+  /* The profile: the picture over the name, the line under it and the tags, in the middle of the column. */
+  .nx-crud-profile {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--nx-space-3);
+    min-width: 0;
+    text-align: center;
+  }
+
+  .nx-crud-profile__picture {
+    display: flex;
+    flex-shrink: 0;
+  }
+
+  .nx-crud-profile__text {
+    display: grid;
+    justify-items: center;
+    gap: 2px;
+    min-width: 0;
+    max-width: 100%;
+  }
+
+  .nx-crud-profile__title {
+    margin: 0;
+    font-size: var(--nx-text-lg);
+    font-weight: 600;
+    line-height: 1.35;
+    overflow-wrap: anywhere;
+  }
+
+  .nx-crud-profile__subtitle {
+    margin: 0;
+    color: var(--nx-text-muted);
+    font-size: var(--nx-text-sm);
+    overflow-wrap: anywhere;
+  }
+
+  .nx-crud-profile__tags {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 4px;
+    margin: 4px 0 0;
+  }
+
+  /*
+   * A few of the record's fields under the tags (`profile.fields`): a small grid in the middle of the column, a label
+   * (muted) and its value (the text colour) a line, each pair on the grid's two tracks so the values line up. A long
+   * value wraps inside the column, never past it, and a column's tag follows its value, under it when the line is full.
+   */
+  .nx-crud-profile__fields {
+    display: grid;
+    grid-template-columns: auto minmax(0, 1fr);
+    gap: var(--nx-space-1) var(--nx-space-3);
+    max-width: 100%;
+    margin: var(--nx-space-2) 0 0;
+    font-size: var(--nx-text-sm);
+    line-height: 1.5;
+    text-align: start;
+  }
+
+  .nx-crud-profile__field {
+    display: grid;
+    grid-column: 1 / -1;
+    grid-template-columns: subgrid;
+    align-items: baseline;
+    min-width: 0;
+  }
+
+  .nx-crud-profile__label {
+    color: var(--nx-text-muted);
+    overflow-wrap: break-word;
+  }
+
+  .nx-crud-profile__value {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: baseline;
+    gap: 2px var(--nx-space-2);
+    min-width: 0;
+    margin: 0;
+    color: var(--nx-text);
+    overflow-wrap: anywhere;
+  }
+
+  /* The gap places the tag: a word's space after the value, or the start of the next line. */
+  .nx-crud-profile__value > .nx-table__tag--after {
+    margin-inline-start: 0;
+  }
+
+  /* A field only the full record has, held while it is read: a short value's width on the value's baseline. */
+  .nx-table__bone.nx-crud-profile__bone {
+    width: 6rem;
+  }
+
+  @container (max-width: 719.98px) {
+    .nx-crud-workspace__frame {
+      --nx-crud-profile-picture: 3rem;
+
+      display: flex;
+      flex-direction: column;
+    }
+
+    .nx-crud-workspace__side {
+      flex-shrink: 0;
+      border-inline-end: 0;
+      border-bottom: 1px solid var(--nx-border);
+    }
+
+    .nx-crud-workspace__profile {
+      padding: var(--nx-space-3) var(--nx-space-4);
+    }
+
+    .nx-crud-workspace__profile + .nx-crud-workspace__nav {
+      border-top: 0;
+    }
+
+    .nx-crud-profile {
+      flex-direction: row;
+      text-align: start;
+    }
+
+    .nx-crud-profile__text {
+      justify-items: start;
+    }
+
+    .nx-crud-profile__tags {
+      justify-content: flex-start;
+    }
+
+    /*
+     * The fields follow the tags as one wrapped line of "label value" pairs: beside the tags when all of them fit there,
+     * else from the next line, so they take the lines their words need, not a line a field.
+     */
+    .nx-crud-profile__text:has(> .nx-crud-profile__fields) {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: baseline;
+      gap: 2px var(--nx-space-3);
+    }
+
+    .nx-crud-profile__text:has(> .nx-crud-profile__fields) > :is(.nx-crud-profile__title, .nx-crud-profile__subtitle) {
+      flex-basis: 100%;
+    }
+
+    .nx-crud-profile__fields {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 2px var(--nx-space-3);
+      min-width: 0;
+      margin-top: 4px;
+    }
+
+    /* A pair longer than the line wraps as words do, its label kept with the start of its value. */
+    .nx-crud-profile__field {
+      display: block;
+      min-width: 0;
+    }
+
+    .nx-crud-profile__label,
+    .nx-crud-profile__value {
+      display: inline;
+    }
+
+    .nx-crud-profile__value > .nx-table__tag--after {
+      margin-inline-start: var(--nx-space-2);
+    }
+
+    .nx-crud-workspace__nav {
+      flex: 0 0 auto;
+      padding: 0 var(--nx-space-2) var(--nx-space-1);
+      overflow: visible;
+    }
+
+    .nx-crud-workspace__panel {
+      --nx-crud-panel-pad-x: var(--nx-space-4);
+
+      flex: 1 1 auto;
+      padding: var(--nx-space-3) var(--nx-crud-panel-pad-x) var(--nx-space-4);
     }
   }
 }