nexus-shared 3.2.0 → 4.0.0

package/src/Styles/Nexus.Crud.css

@@ -19,6 +19,28 @@
     flex: 1 1 auto;
   }
 
+  /*
+   * 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: label over value, two to a line where there is room. */
   .nx-crud-details {
     display: flex;
@@ -44,6 +66,31 @@
     grid-column: 1 / -1;
   }
 
+  /*
+   * Details in sections (`column.group`): each run of fields under its heading in the small muted heading style, the
+   * heading nearer its fields than the section before it.
+   */
+  .nx-crud-details__section {
+    display: flex;
+    flex-direction: column;
+    gap: var(--nx-space-2);
+    min-width: 0;
+  }
+
+  .nx-crud-details__section + .nx-crud-details__section {
+    margin-top: var(--nx-space-3);
+  }
+
+  .nx-crud-details__heading {
+    margin: 0;
+    color: var(--nx-text-muted);
+    font-size: var(--nx-text-xs);
+    font-weight: 600;
+    line-height: 1.3;
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+  }
+
   .nx-crud-details__label {
     color: var(--nx-text-muted);
     font-size: var(--nx-text-sm);
@@ -124,18 +171,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 +202,341 @@
      * 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);
+
+    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;
+    scroll-padding: calc(var(--nx-text-xs) * 0.6 + 2px) 4px 4px;
+  }
+
+  /*
+   * 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);
     }
   }
 }

package/src/Styles/Nexus.Dropdown.css

@@ -385,7 +385,10 @@
     user-select: none;
   }
 
+  /* The list's gutters, not the row's own 8px gap: a subgrid with a gap of its own sets its cells a pixel past each side
+     of their headings, so a figure at the end of its column ended a pixel past its heading. */
   .nx-dropdown-list--columns > .nx-dropdown-option {
+    column-gap: normal;
     padding-inline: 0;
   }
 
@@ -550,6 +553,11 @@
     letter-spacing: 0.03em;
   }
 
+  /* A price beside a name: figures in even digits, so a column of them lines up at the end. */
+  .nx-dropdown-cell--money {
+    font-variant-numeric: tabular-nums;
+  }
+
   .nx-dropdown-cell--media {
     display: grid;
     place-items: center;