nexus-shared 3.1.0 → 4.0.0

package/src/Styles/Nexus.Crud.css

@@ -1,168 +1,542 @@
-@layer nexus.components {
-  /*
-   * CRUD: the table comes from Nexus.Table.css. Here: the details popup and the message for a user who may not see any
-   * list.
-   */
-  .nx-crud {
-    min-width: 0;
-  }
-
-  /* A CRUD whose table fills takes the height it is given and hands all of it to the table. */
-  .nx-crud:has(.nx-table--fill) {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-    min-height: 0;
-  }
-
-  .nx-crud:has(.nx-table--fill) > .nx-table--fill {
-    flex: 1 1 auto;
-  }
-
-  /* Details: label over value, two to a line where there is room. */
-  .nx-crud-details {
-    display: flex;
-    flex-direction: column;
-    gap: var(--nx-space-3);
-  }
-
-  .nx-crud-details__list {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr));
-    gap: var(--nx-space-4) var(--nx-space-5);
-    margin: 0;
-  }
-
-  .nx-crud-details__item {
-    display: flex;
-    flex-direction: column;
-    gap: 2px;
-    min-width: 0;
-  }
-
-  .nx-crud-details__item--wide {
-    grid-column: 1 / -1;
-  }
-
-  .nx-crud-details__label {
-    color: var(--nx-text-muted);
-    font-size: var(--nx-text-sm);
-  }
-
-  .nx-crud-details__value {
-    /* A value still to come keeps its line, so the full record lands without moving anything. */
-    min-height: 1lh;
-    margin: 0;
-    overflow-wrap: anywhere;
-    font-size: var(--nx-text-md);
-  }
-
-  /* A field only the full record has, when that record could not be loaded. */
-  .nx-crud-details__missing {
-    color: var(--nx-text-muted);
-  }
-
-  /*
-   * 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
-   * the buttons leave, not a form's 14rem, so the bar stays one row on a phone and what it says never moves anything.
-   */
-  .nx-crud-details__foot > .nx-form-status {
-    flex-basis: 0;
-  }
-
-  /* No list the user may see. */
-  .nx-crud--denied {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 4px;
-    padding: 48px var(--nx-space-4);
-    border: 1px dashed var(--nx-border-strong);
-    border-radius: var(--nx-radius-lg);
-    text-align: center;
-  }
-
-  .nx-crud__denied-icon {
-    width: 28px;
-    height: 28px;
-    margin-bottom: 6px;
-    color: var(--nx-text-muted);
-  }
-
-  .nx-crud__denied-title {
-    margin: 0;
-    font-weight: 600;
-  }
-
-  .nx-crud__denied-detail {
-    margin: 0;
-    color: var(--nx-text-muted);
-    font-size: var(--nx-text-sm);
-  }
-
-  /*
-   * A form popup with a panel beside it (`form.aside`): a preview of what will be written, a summary, help. The form
-   * is first in the DOM, so a narrow window stacks the panel under it and the keyboard still reaches the form first.
-   */
-  .nx-crud-aside {
-    display: grid;
-    grid-template-columns: minmax(0, 1fr);
-    gap: var(--nx-space-5);
-  }
-
-  .nx-crud-aside__main,
-  .nx-crud-aside__side {
-    min-width: 0;
-  }
-
-  /* Stacked, the panel does not take the whole window: the popup's body scrolls past it back to the form above. */
-  .nx-crud-aside__side {
-    display: flex;
-    min-height: 0;
-    max-height: 70vh;
-    flex-direction: column;
-  }
-
-  /*
-   * 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) {
-      display: flex;
-      overflow: hidden;
-    }
-
-    .nx-crud-aside {
-      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. */
-      grid-template-columns: minmax(0, 1fr) minmax(0, var(--nx-crud-aside-width, clamp(20rem, 38%, 44rem)));
-    }
-
-    /*
-     * 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 {
-      grid-template-columns: minmax(0, var(--nx-crud-details-width, clamp(16rem, 30%, 26rem))) minmax(0, 1fr);
-    }
-
-    .nx-crud-aside__main {
-      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;
-    }
-
-    /* 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;
-    }
-  }
-}
+@layer nexus.components {
+  /*
+   * CRUD: the table comes from Nexus.Table.css. Here: the details popup and the message for a user who may not see any
+   * list.
+   */
+  .nx-crud {
+    min-width: 0;
+  }
+
+  /* A CRUD whose table fills takes the height it is given and hands all of it to the table. */
+  .nx-crud:has(.nx-table--fill) {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    min-height: 0;
+  }
+
+  .nx-crud:has(.nx-table--fill) > .nx-table--fill {
+    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;
+    flex-direction: column;
+    gap: var(--nx-space-3);
+  }
+
+  .nx-crud-details__list {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr));
+    gap: var(--nx-space-4) var(--nx-space-5);
+    margin: 0;
+  }
+
+  .nx-crud-details__item {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    min-width: 0;
+  }
+
+  .nx-crud-details__item--wide {
+    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);
+  }
+
+  .nx-crud-details__value {
+    /* A value still to come keeps its line, so the full record lands without moving anything. */
+    min-height: 1lh;
+    margin: 0;
+    overflow-wrap: anywhere;
+    font-size: var(--nx-text-md);
+  }
+
+  /* A field only the full record has, when that record could not be loaded. */
+  .nx-crud-details__missing {
+    color: var(--nx-text-muted);
+  }
+
+  /*
+   * 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
+   * the buttons leave, not a form's 14rem, so the bar stays one row on a phone and what it says never moves anything.
+   */
+  .nx-crud-details__foot > .nx-form-status {
+    flex-basis: 0;
+  }
+
+  /* No list the user may see. */
+  .nx-crud--denied {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 4px;
+    padding: 48px var(--nx-space-4);
+    border: 1px dashed var(--nx-border-strong);
+    border-radius: var(--nx-radius-lg);
+    text-align: center;
+  }
+
+  .nx-crud__denied-icon {
+    width: 28px;
+    height: 28px;
+    margin-bottom: 6px;
+    color: var(--nx-text-muted);
+  }
+
+  .nx-crud__denied-title {
+    margin: 0;
+    font-weight: 600;
+  }
+
+  .nx-crud__denied-detail {
+    margin: 0;
+    color: var(--nx-text-muted);
+    font-size: var(--nx-text-sm);
+  }
+
+  /*
+   * A form popup with a panel beside it (`form.aside`): a preview of what will be written, a summary, help. The form
+   * is first in the DOM, so a narrow window stacks the panel under it and the keyboard still reaches the form first.
+   */
+  .nx-crud-aside {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr);
+    gap: var(--nx-space-5);
+  }
+
+  .nx-crud-aside__main,
+  .nx-crud-aside__side {
+    min-width: 0;
+  }
+
+  /* Stacked, the panel does not take the whole window: the popup's body scrolls past it back to the form above. */
+  .nx-crud-aside__side {
+    display: flex;
+    min-height: 0;
+    max-height: 70vh;
+    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:not(.nx-crud-aside--below)) {
+      display: flex;
+      overflow: hidden;
+    }
+
+    .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. */
+      grid-template-columns: minmax(0, 1fr) minmax(0, var(--nx-crud-aside-width, clamp(20rem, 38%, 44rem)));
+    }
+
+    /*
+     * 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--details:not(.nx-crud-aside--below) {
+      grid-template-columns: minmax(0, var(--nx-crud-details-width, clamp(16rem, 30%, 26rem))) minmax(0, 1fr);
+    }
+
+    /*
+     * 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;
+      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;
+    }
+  }
+
+  /*
+   * 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);
+    }
+  }
+}