nexus-shared 3.2.0 → 4.1.0

package/src/Styles/Nexus.Domain.css

@@ -0,0 +1,384 @@
+@layer nexus.components {
+  /*
+   * A record's card (`DomainCard`, `DomainCardFrame`): its title line - the kind as a tag, the title, the code, the state
+   * - then its fields, figures, lines and link. A band of whatever holds it (a mail thread's head draws a line above it),
+   * never a bordered box of its own. Its placeholder is the same parts with a bone on each line, so the card holds its
+   * height when the record lands. A record named with no card (`DomainLine`) is its kind and its words on one line.
+   * Table.css loads after this sheet: a rule on a table tag or bone takes two classes.
+   */
+
+  /* A band: as wide as what holds it, also where a grid or a column lines its items up at the start. */
+  .nx-domain-card {
+    display: flex;
+    flex-direction: column;
+    gap: var(--nx-space-2);
+    align-self: stretch;
+    justify-self: stretch;
+    min-width: 0;
+  }
+
+  /*
+   * The head: the title takes the room; the marks, the state and the fold button sit at the end; the quiet line under.
+   * Its own width lays it out (the status beside the title, or under it when narrow), so it is the size container.
+   */
+  .nx-domain-card__head {
+    container: nx-domain-card / inline-size;
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--nx-space-1) var(--nx-space-2);
+    align-items: center;
+  }
+
+  /*
+   * The title takes the room the status leaves. The width of the card, never the length of its words, decides whether
+   * the status sits beside it, so the placeholder and the card it stands for lay out alike at every width.
+   */
+  .nx-domain-card__title {
+    flex: 1 1 0;
+    min-width: 0;
+    margin: 0;
+    font-size: var(--nx-text-md);
+    font-weight: 600;
+    line-height: 1.5;
+    overflow-wrap: anywhere;
+  }
+
+  @container nx-domain-card (max-width: 24rem) {
+    .nx-domain-card__title {
+      flex-basis: 100%;
+    }
+  }
+
+  .nx-table__tag.nx-domain-card__kind {
+    margin-inline-end: var(--nx-space-1);
+    vertical-align: 1px;
+  }
+
+  /*
+   * The quiet line under the title, one line at any width: the code, then the subtitle, cut with "..." when the link at
+   * its end needs the room (their whole words on hover), so the card is as tall on a phone as its placeholder.
+   */
+  .nx-domain-card__subtitle {
+    display: flex;
+    flex-basis: 100%;
+    gap: var(--nx-space-3);
+    align-items: baseline;
+    min-width: 0;
+    color: var(--nx-text-muted);
+    font-size: var(--nx-text-sm);
+    line-height: 1.5;
+  }
+
+  .nx-domain-card__subtitle > :first-child {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .nx-domain-card__code {
+    font-variant-numeric: tabular-nums;
+  }
+
+  .nx-domain-card__status {
+    display: inline-flex;
+    flex-shrink: 0;
+    gap: var(--nx-space-2);
+    align-items: center;
+    margin-inline-start: auto;
+  }
+
+  .nx-table__tag.nx-domain-card__state {
+    flex-shrink: 0;
+  }
+
+  /* The fold button keeps the title line as tall as its text: a small control laid over the line's own height. */
+  .nx-btn.nx-domain-card__toggle {
+    margin-block: calc((var(--nx-text-md) * 1.5 - var(--nx-control-sm)) / 2);
+  }
+
+  /* A mark beside the state: read again just now, being read, not up to date. */
+  .nx-domain-card__meta {
+    display: inline-flex;
+    gap: 4px;
+    align-items: center;
+    color: var(--nx-text-muted);
+    font-size: var(--nx-text-xs);
+    font-variant-numeric: tabular-nums;
+    white-space: nowrap;
+  }
+
+  .nx-domain-card__meta .nx-icon {
+    width: 14px;
+    height: 14px;
+  }
+
+  .nx-domain-card__meta--failed {
+    color: var(--nx-danger);
+  }
+
+  .nx-domain-card__retry {
+    padding: 0;
+    border: 0;
+    border-radius: var(--nx-radius-sm);
+    background: none;
+    color: inherit;
+    font: inherit;
+    font-weight: 600;
+    text-decoration: underline;
+    cursor: pointer;
+  }
+
+  .nx-domain-card__retry:focus-visible {
+    outline: none;
+    box-shadow: var(--nx-focus-ring);
+  }
+
+  .nx-domain-card__body {
+    display: flex;
+    flex-direction: column;
+    gap: var(--nx-space-2);
+    min-width: 0;
+  }
+
+  /* Folded: the class's display would otherwise beat the browser's own [hidden]. */
+  /*
+   * The details - fields, lines, what a kind adds - fold under the figures, which always show: folded, a leave's card is
+   * its title, its code and its balance. Their display would otherwise beat the browser's own [hidden].
+   */
+  .nx-domain-card__details {
+    display: flex;
+    flex-direction: column;
+    gap: var(--nx-space-2);
+    min-width: 0;
+  }
+
+  .nx-domain-card__body[hidden],
+  .nx-domain-card__details[hidden] {
+    display: none;
+  }
+
+  /* Fields: a label over its value, as many to a row as fit. */
+  .nx-domain-card__fields {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(min(100%, 9rem), 1fr));
+    gap: var(--nx-space-2) var(--nx-space-4);
+    margin: 0;
+  }
+
+  .nx-domain-card__field {
+    min-width: 0;
+  }
+
+  .nx-domain-card__field > dt,
+  .nx-domain-card__figure > dt {
+    color: var(--nx-text-muted);
+    font-size: var(--nx-text-xs);
+    line-height: 1.5;
+  }
+
+  .nx-domain-card__field > dd {
+    margin: 0;
+    font-size: var(--nx-text-sm);
+    line-height: 1.5;
+    overflow-wrap: anywhere;
+  }
+
+  .nx-domain-card__field[data-empty] > dd,
+  .nx-domain-card__note {
+    color: var(--nx-text-muted);
+  }
+
+  /*
+   * Figures: each a label over a large value, marked at its start by its tone (a second cue beside the words), on one
+   * track width so a row of them does not move as their values arrive; two to a row on a phone.
+   */
+  .nx-domain-card__figures {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(min(100%, 7.5rem), 1fr));
+    gap: var(--nx-space-2) var(--nx-space-4);
+    margin: 0;
+  }
+
+  .nx-domain-card__figure {
+    --nx-figure-tone: var(--nx-border-strong);
+    min-width: 0;
+    padding-inline-start: var(--nx-space-2);
+    border-inline-start: 3px solid var(--nx-figure-tone);
+  }
+
+  .nx-domain-card__figure[data-tone="primary"] {
+    --nx-figure-tone: var(--nx-primary);
+  }
+
+  .nx-domain-card__figure[data-tone="info"] {
+    --nx-figure-tone: var(--nx-info);
+  }
+
+  .nx-domain-card__figure[data-tone="success"] {
+    --nx-figure-tone: var(--nx-success);
+  }
+
+  .nx-domain-card__figure[data-tone="warning"] {
+    --nx-figure-tone: var(--nx-warning);
+  }
+
+  .nx-domain-card__figure[data-tone="danger"] {
+    --nx-figure-tone: var(--nx-danger);
+  }
+
+  .nx-domain-card__figure > dd {
+    margin: 0;
+    white-space: nowrap;
+  }
+
+  .nx-domain-card__value {
+    font-size: var(--nx-text-xl);
+    font-weight: 600;
+    line-height: 1.3;
+    font-variant-numeric: tabular-nums;
+  }
+
+  .nx-domain-card__unit {
+    color: var(--nx-text-muted);
+    font-size: var(--nx-text-sm);
+  }
+
+  /*
+   * A hint keeps two lines, in the placeholder and the card alike, so a figure keeps one size whether its words take one
+   * line or wrap to two ("1.5 paid, 0.5 unpaid (1 day's pay)" in a narrow column).
+   */
+  .nx-domain-card__figure > dd.nx-domain-card__hint {
+    min-height: 3em;
+    color: var(--nx-text-muted);
+    font-size: var(--nx-text-xs);
+    line-height: 1.5;
+    white-space: normal;
+  }
+
+  /* Lines: a short table with no frame, lines between rows, numbers at the end. */
+  .nx-domain-card__lines {
+    width: 100%;
+    border-collapse: collapse;
+    font-size: var(--nx-text-sm);
+    font-variant-numeric: tabular-nums;
+    line-height: 1.5;
+  }
+
+  /* Every cell one line: the values are short, and the first column gives way for the rest. */
+  .nx-domain-card__lines th {
+    padding: 2px var(--nx-space-2);
+    white-space: nowrap;
+    border-bottom: 1px solid var(--nx-border);
+    color: var(--nx-text-muted);
+    font-size: var(--nx-text-xs);
+    font-weight: 500;
+    text-align: start;
+  }
+
+  .nx-domain-card__lines td {
+    padding: 3px var(--nx-space-2);
+    border-bottom: 1px solid color-mix(in oklab, var(--nx-border) 60%, transparent);
+    white-space: nowrap;
+  }
+
+  .nx-domain-card__lines :is(th, td):first-child {
+    padding-inline-start: 0;
+  }
+
+  .nx-domain-card__lines :is(th, td):last-child {
+    padding-inline-end: 0;
+  }
+
+  .nx-domain-card__lines :is(th, td)[data-align="end"] {
+    text-align: end;
+  }
+
+  /* The first column takes the room the others leave and keeps to one line, so a row is one line tall at any width. */
+  .nx-domain-card__lines td:first-child {
+    width: 100%;
+    max-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .nx-domain-card__more {
+    margin: 0;
+    color: var(--nx-text-muted);
+    font-size: var(--nx-text-xs);
+    line-height: 1.5;
+  }
+
+  .nx-domain-card__link {
+    display: inline-flex;
+    gap: 4px;
+    align-items: center;
+    margin-inline-start: auto;
+    white-space: nowrap;
+    border-radius: var(--nx-radius-sm);
+    color: var(--nx-primary);
+    font-size: var(--nx-text-sm);
+    font-weight: 500;
+    line-height: 1.5;
+    text-decoration: none;
+  }
+
+  a.nx-domain-card__link:hover {
+    text-decoration: underline;
+  }
+
+  .nx-domain-card__link:focus-visible {
+    outline: none;
+    box-shadow: var(--nx-focus-ring);
+  }
+
+  .nx-domain-card__link .nx-icon {
+    width: 14px;
+    height: 14px;
+  }
+
+  /* A record the reader cannot open: one quiet sentence under its words, the lock as its second cue. */
+  .nx-domain-card__notice {
+    display: flex;
+    gap: 6px;
+    align-items: center;
+    margin: 0;
+    color: var(--nx-text-muted);
+    font-size: var(--nx-text-sm);
+  }
+
+  .nx-domain-card__notice .nx-icon {
+    flex-shrink: 0;
+    width: 14px;
+    height: 14px;
+  }
+
+  /* The placeholder: a bone on the line of the text it stands for, and a tag's size for the state. */
+  .nx-table__bone.nx-domain-card__bone {
+    display: inline-block;
+    max-width: 100%;
+    height: 0.9em;
+    vertical-align: -0.1em;
+  }
+
+  .nx-table__tag.nx-domain-card__bone-tag {
+    width: 6.5rem;
+    height: calc(var(--nx-text-xs) * 1.6 + 2px);
+    background: color-mix(in oklab, var(--nx-text) 9%, transparent);
+  }
+
+  /* A record with no card: its kind as a tag, then its words. */
+  .nx-domain-line {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--nx-space-1) var(--nx-space-2);
+    align-items: center;
+    margin: 0;
+    font-size: var(--nx-text-sm);
+  }
+
+  .nx-domain-line__label {
+    min-width: 0;
+    overflow-wrap: anywhere;
+  }
+}

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;

package/src/Styles/Nexus.Editor.css

@@ -49,6 +49,26 @@
     margin-left: auto;
   }
 
+  /*
+   * One row (`toolbarOverflow="menu"`): at any width the buttons take the room the views and the end leave them, never a
+   * row of their own, and those that do not fit are in the "More formatting" menu at their end. Two classes, so the
+   * narrow rule below that gives the buttons a row of their own does not reach them.
+   */
+  .nx-editor__bar--one-row {
+    flex-wrap: nowrap;
+  }
+
+  .nx-editor__bar--one-row > .nx-editor__tools {
+    flex: 1 1 0;
+    flex-wrap: nowrap;
+    order: 0;
+    overflow: hidden;
+  }
+
+  .nx-editor__bar--one-row > .nx-editor__end {
+    order: 0;
+  }
+
   .nx-editor__tool {
     display: grid;
     place-items: center;