nexus-shared 2.0.0 → 3.0.0

package/src/Styles/Nexus.Rows.css

@@ -57,8 +57,13 @@
    */
   .nx-tabular {
     --nx-tabular-row: calc(var(--nx-control-md) + 1px);
-    --nx-tabular-end: 40px;
+    --nx-tabular-menu: 22px;
     --nx-tabular-line: var(--nx-border);
+    /*
+     * The sheet keeps the strong edge. Making it the plain border to answer "boxes inside boxes" put the frame below
+     * the edge of every input box beside it, in all seven themes light and dark, which the library asserts against
+     * (`tabular-form.cjs`, "frame edge"): the outermost edge of a control cannot be fainter than the ones inside it.
+     */
     --nx-tabular-frame: var(--nx-border-strong);
     --nx-tabular-bg: var(--nx-surface);
     --nx-tabular-head: color-mix(in oklab, var(--nx-text) 4%, var(--nx-surface));
@@ -68,12 +73,12 @@
 
   .nx-tabular--sm {
     --nx-tabular-row: calc(var(--nx-control-sm) + 1px);
-    --nx-tabular-end: 34px;
+    --nx-tabular-menu: 20px;
   }
 
   .nx-tabular--lg {
     --nx-tabular-row: calc(var(--nx-control-lg) + 1px);
-    --nx-tabular-end: 44px;
+    --nx-tabular-menu: 24px;
   }
 
   .nx-tabular[data-problem] {
@@ -89,7 +94,7 @@
     box-shadow: var(--nx-shadow-sm);
     outline: none;
     /* A focused cell scrolls clear of the header and the fixed columns. */
-    scroll-padding: var(--nx-tabular-row) var(--nx-tabular-end) 0 48px;
+    scroll-padding: var(--nx-tabular-row) 0 0 var(--nx-tabular-num, 48px);
     scrollbar-width: thin;
     scrollbar-color: color-mix(in oklab, var(--nx-text-subtle) 75%, transparent) transparent;
     transition: border-color var(--nx-duration);
@@ -106,6 +111,12 @@
   .nx-tabular__row {
     display: grid;
     grid-template-columns: var(--nx-tabular-columns);
+    /*
+     * One track, exactly the row's height. Without it the track is sized by the tallest cell, so a single
+     * textarea of two lines made every cell of its row 20px too tall and drew them over the rows below: the row
+     * looked taller than its neighbours, and its focus ring and its edges bled out of it.
+     */
+    grid-template-rows: minmax(0, 1fr);
     height: var(--nx-tabular-row);
     border-bottom: 1px solid var(--nx-tabular-line);
     background: var(--nx-tabular-bg);
@@ -163,9 +174,24 @@
     display: flex;
     align-items: stretch;
     min-width: 0;
+    /* Nothing a cell holds is drawn past its own edges: the ring, the invalid edge and the tint all stop here. */
+    min-height: 0;
+    overflow: hidden;
     border-left: 1px solid var(--nx-tabular-line);
   }
 
+  /*
+   * A textarea scrolls inside its cell instead of making the cell taller. Its own `rows` would size the row, and
+   * its resize grip would let one cell break the alignment of its row: in a grid where every other cell keeps the
+   * line, that grip is a handle for making the table wrong, eighteen of them down one column.
+   */
+  .nx-tabular__cell textarea.nx-field__control {
+    height: 100%;
+    min-height: 0;
+    /* Two classes: the multi-line rule in Nexus.Input.css is two, and one would lose to it in the same layer. */
+    resize: none;
+  }
+
   .nx-tabular__cell > * {
     flex: 1 1 auto;
     min-width: 0;
@@ -227,10 +253,33 @@
     margin: 0;
   }
 
-  .nx-tabular__cell--check:has(.nx-field__lock) {
+  /*
+   * A generated cell wears the read-only tint and no lock: the column header carries one lock for the whole
+   * column, and the cell still says why under the table when it is used. One fact, said once, not once a row.
+   */
+  .nx-tabular__cell .nx-field__lock {
+    display: none;
+  }
+
+  .nx-tabular__cell--check:has([data-readonly]) {
     background: var(--nx-tabular-readonly);
   }
 
+  .nx-tabular__head-cell[data-nx-locked] {
+    color: var(--nx-text-muted);
+  }
+
+  .nx-tabular__head-lock {
+    width: 13px;
+    height: 13px;
+    margin-left: auto;
+    color: var(--nx-text-muted);
+  }
+
+  .nx-tabular__head-cell.nx-tabular__cell--number .nx-tabular__head-lock {
+    margin-left: 4px;
+  }
+
   .nx-tabular__cell .nx-choices {
     display: flex;
     align-items: center;
@@ -244,14 +293,19 @@
     overflow: hidden;
   }
 
-  /* Row numbers, fixed at the start: the button of each row's menu. Dots take the number's place on hover. */
+  /*
+   * Row numbers, fixed at the start, with the row's menu beside them. Both have their own place and neither
+   * moves: a menu that takes the number's place on hover makes the numbering look broken and the grid unstable.
+   */
   .nx-tabular__num {
     position: sticky;
     left: 0;
     z-index: 1;
-    display: flex;
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) var(--nx-tabular-menu);
     align-items: center;
-    justify-content: center;
+    gap: 2px;
+    padding-left: 6px;
     border-right: 1px solid var(--nx-tabular-line);
     background: inherit;
     color: var(--nx-text-muted);
@@ -264,6 +318,11 @@
     font-weight: 600;
   }
 
+  /* Right-aligned, so 9 and 10 line up under one another and the menu is always the same distance away. */
+  .nx-tabular__num-text {
+    text-align: end;
+  }
+
   .nx-tabular__num + .nx-tabular__cell,
   .nx-tabular__num + .nx-tabular__head-cell {
     border-left: 0;
@@ -272,26 +331,24 @@
   .nx-tabular__num-button {
     display: grid;
     place-items: center;
-    width: calc(100% - 6px);
-    height: calc(100% - 6px);
+    width: var(--nx-tabular-menu);
+    height: calc(var(--nx-tabular-row) - 8px);
     padding: 0;
     border: 0;
     border-radius: var(--nx-radius-sm);
     background: none;
-    color: inherit;
+    /* Muted, like the numbers beside it, so the column reads as one thing; it is the row's only control now. */
+    color: var(--nx-text-muted);
     font: inherit;
     cursor: pointer;
+    transition:
+      background-color var(--nx-duration),
+      color var(--nx-duration);
   }
 
-  .nx-tabular__num-button > * {
-    grid-area: 1 / 1;
-    transition: opacity var(--nx-duration);
-  }
-
-  .nx-tabular__num-icon {
-    width: 16px;
-    height: 16px;
-    opacity: 0;
+  .nx-tabular__num-button .nx-icon {
+    width: 15px;
+    height: 15px;
   }
 
   .nx-tabular__num-button:is(:hover, :focus-visible, [aria-expanded="true"]) {
@@ -299,16 +356,6 @@
     color: var(--nx-text);
   }
 
-  .nx-tabular__row:hover .nx-tabular__num-icon,
-  .nx-tabular__num-button:is(:focus-visible, [aria-expanded="true"]) .nx-tabular__num-icon {
-    opacity: 1;
-  }
-
-  .nx-tabular__row:hover .nx-tabular__num-button .nx-tabular__num-text,
-  .nx-tabular__num-button:is(:focus-visible, [aria-expanded="true"]) .nx-tabular__num-text {
-    opacity: 0;
-  }
-
   .nx-tabular__num-button:focus-visible {
     outline: 2px solid var(--nx-primary);
     outline-offset: -2px;
@@ -321,23 +368,6 @@
     font-weight: 600;
   }
 
-  /* Remove buttons, fixed at the end. */
-  .nx-tabular__end {
-    position: sticky;
-    right: 0;
-    z-index: 1;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border-left: 1px solid var(--nx-tabular-line);
-    background: inherit;
-  }
-
-  .nx-tabular__remove.nx-btn {
-    width: calc(var(--nx-tabular-row) - 9px);
-    height: calc(var(--nx-tabular-row) - 9px);
-    color: var(--nx-text-muted);
-  }
 
   .nx-tabular__row--empty {
     display: block;
@@ -557,7 +587,7 @@
 
   @media (prefers-reduced-motion: reduce) {
     .nx-tabular__viewport,
-    .nx-tabular__num-button > *,
+    .nx-tabular__num-button,
     .nx-group-form__toggle,
     .nx-group-form__chevron {
       transition: none;

package/src/Styles/Nexus.Tab.Buttons.css

@@ -219,6 +219,55 @@
     text-overflow: ellipsis;
   }
 
+  /*
+   * multiple: several at once. There is no single place for a sliding indicator, so every chosen option is raised on
+   * its own, exactly as the one choice's indicator is, and an option that is not chosen sits flat on the track. The
+   * options wrap onto more rows when they do not fit, each row as tall as a one-row track's options, so a picker of
+   * 26 letters is one track of several rows rather than a line that runs off a phone. A one-character option is
+   * square, so a row of letters lines up.
+   */
+  .nx-tabs--multiple {
+    --nx-tabs-option-height: calc(var(--nx-tabs-height) - 2 * var(--nx-tabs-pad) - 2px);
+
+    display: inline-flex;
+    flex-wrap: wrap;
+    gap: 2px;
+    max-width: 100%;
+    height: auto;
+  }
+
+  .nx-tabs--multiple.nx-tabs--block {
+    display: flex;
+  }
+
+  .nx-tabs--multiple .nx-tabs__option {
+    flex: 0 0 auto;
+    min-width: var(--nx-tabs-option-height);
+    height: var(--nx-tabs-option-height);
+  }
+
+  /* A chosen option can be unchosen, so it keeps the pointer, and it keeps its raised look under the pointer too. */
+  .nx-tabs--multiple .nx-tabs__option:has(:checked) {
+    background: var(--nx-tabs-indicator);
+    box-shadow:
+      inset 0 0 0 1px var(--nx-tabs-indicator-border),
+      var(--nx-tabs-indicator-shadow);
+    cursor: pointer;
+  }
+
+  .nx-tabs--multiple .nx-tabs__option:has(:checked):has(:focus-visible) {
+    box-shadow:
+      inset 0 0 0 1px var(--nx-tabs-indicator-border),
+      var(--nx-focus-ring);
+  }
+
+  /* A finger needs more than a small button's 22px: on a touch screen every option is a medium control's height, square at the least. */
+  @media (pointer: coarse) {
+    .nx-tabs--multiple {
+      --nx-tabs-option-height: var(--nx-control-md);
+    }
+  }
+
   /*
    * design="list": a vertical list of rows, for settings pages and side panels. There is no track: rows sit on the
    * panel, the selected row is tinted (darker in light mode, lighter in dark mode) and marked by a bar at its start,
@@ -280,6 +329,11 @@
     background: var(--nx-tabs-list-selected);
   }
 
+  /* A list of several choices: a chosen row can be unchosen, so it keeps the pointer. */
+  .nx-tabs--list:not([role="radiogroup"]) .nx-tabs__option:has(:checked) {
+    cursor: pointer;
+  }
+
   .nx-tabs--list .nx-tabs__option:has(:checked)::before {
     opacity: 1;
     transform: none;
@@ -356,6 +410,7 @@
 
   @media (prefers-reduced-motion: reduce) {
     .nx-tabs__indicator,
+    .nx-tabs--multiple .nx-tabs__option,
     .nx-tabs--labels-selected :is(.nx-tabs__option, .nx-tabs__label),
     .nx-tabs--list .nx-tabs__option::before {
       transition: none;

package/src/Styles/Nexus.Table.css

@@ -13,6 +13,12 @@
     --nx-table-flash: color-mix(in oklab, var(--nx-success) 18%, var(--nx-surface));
     --nx-table-line: var(--nx-border);
     --nx-table-head-h: 40px;
+    /* The band of group headings above the columns' own, when any column names a group. */
+    --nx-table-group-h: 30px;
+    /* How many rows the header has: 1, or 2 while a band stands above the headings (`data-head-rows`). */
+    --nx-table-head-rows: 1;
+    /* The whole header, which the loading bar and the selection bar are measured from. */
+    --nx-table-head-all: calc(var(--nx-table-head-h) + (var(--nx-table-head-rows) - 1) * var(--nx-table-group-h));
     --nx-table-row-h: 44px;
     --nx-table-pad-x: 12px;
     --nx-table-select-w: 44px;
@@ -27,8 +33,13 @@
     color: var(--nx-text);
   }
 
+  .nx-table[data-head-rows="2"] {
+    --nx-table-head-rows: 2;
+  }
+
   .nx-table--sm {
     --nx-table-head-h: 34px;
+    --nx-table-group-h: 26px;
     --nx-table-row-h: 36px;
     --nx-table-pad-x: 10px;
     --nx-table-select-w: 38px;
@@ -103,6 +114,30 @@
     }
   }
 
+  /*
+   * `fill`: the table takes the height it is given instead of growing with its rows. The bar and the footer keep their
+   * own height, the frame takes the rest, and the rows scroll inside it. Nothing below the table moves when a page
+   * holds fewer rows, and the page behind it never gains a scrollbar.
+   */
+  .nx-table--fill {
+    height: 100%;
+    min-height: 0;
+  }
+
+  .nx-table--fill > .nx-table__frame {
+    display: flex;
+    flex: 1 1 auto;
+    flex-direction: column;
+    min-height: 0;
+  }
+
+  .nx-table--fill .nx-table__scroll {
+    flex: 1 1 auto;
+    min-height: 0;
+    /* The room for the scrollbar is kept, so the headings do not shift the moment the rows need one. */
+    scrollbar-gutter: stable;
+  }
+
   /* The frame. */
   .nx-table__frame {
     position: relative;
@@ -157,6 +192,11 @@
     --nx-row-bg: var(--nx-table-hover);
   }
 
+  /* A row a click opens says so under the pointer. Only the pointer changes: nothing in the row moves on hover. */
+  .nx-table__row[data-open] {
+    cursor: pointer;
+  }
+
   .nx-table__row[data-selected] {
     --nx-row-bg: var(--nx-table-selected);
   }
@@ -303,14 +343,15 @@
   }
 
   .nx-table__row:hover > .nx-table__cell--index[data-swap] > .nx-table__check,
-  .nx-table__head:hover > .nx-table__cell--index[data-swap] > .nx-table__check,
+  /* The heading's own cell may stand in the band row, so the whole header counts as hovering it. */
+  .nx-table__thead:hover .nx-table__cell--index[data-swap] > .nx-table__check,
   .nx-table__cell--index[data-swap]:focus-within > .nx-table__check,
   .nx-table[data-selecting] .nx-table__cell--index[data-swap] > .nx-table__check {
     opacity: 1;
   }
 
   .nx-table__row:hover > .nx-table__cell--index[data-swap] > .nx-table__number,
-  .nx-table__head:hover > .nx-table__cell--index[data-swap] > .nx-table__number,
+  .nx-table__thead:hover .nx-table__cell--index[data-swap] > .nx-table__number,
   .nx-table__cell--index[data-swap]:focus-within > .nx-table__number,
   .nx-table[data-selecting] .nx-table__cell--index[data-swap] > .nx-table__number {
     opacity: 0;
@@ -462,6 +503,42 @@
     padding: 0;
   }
 
+  /*
+   * Columns in bands: a group's heading spans the columns next to each other that name it, and the columns with no
+   * group keep one heading as tall as both rows. Both rows stay while the rows scroll, the band on top.
+   */
+  .nx-table__head--leaves > .nx-table__heading {
+    top: var(--nx-table-group-h);
+  }
+
+  .nx-table__heading--group {
+    height: var(--nx-table-group-h);
+    border-bottom: 0;
+    text-align: center;
+  }
+
+  /* The line under a band stops short of its edges, so two bands beside each other read as two, not as one rule. */
+  .nx-table__heading--group::after {
+    content: "";
+    position: absolute;
+    right: var(--nx-table-pad-x);
+    bottom: 0;
+    left: var(--nx-table-pad-x);
+    height: 1px;
+    background: var(--nx-table-line);
+  }
+
+  .nx-table__group {
+    display: block;
+    overflow: hidden;
+    color: var(--nx-text);
+    font-size: var(--nx-text-xs);
+    font-weight: 700;
+    letter-spacing: 0.04em;
+    text-overflow: ellipsis;
+    text-transform: uppercase;
+  }
+
   .nx-table__heading-inner {
     display: flex;
     align-items: center;
@@ -775,7 +852,7 @@
   /* A thin bar under the header while a load runs with rows on screen. The rows dim only if it takes a moment. */
   .nx-table__progress {
     position: absolute;
-    top: calc(var(--nx-table-head-h) - 1px);
+    top: calc(var(--nx-table-head-all) - 1px);
     right: 0;
     left: 0;
     z-index: 4;
@@ -827,7 +904,7 @@
     display: flex;
     align-items: center;
     gap: var(--nx-space-2);
-    height: calc(var(--nx-table-head-h) - 1px);
+    height: calc(var(--nx-table-head-all) - 1px);
     padding: 0 var(--nx-space-2) 0 2px;
     background: var(--nx-table-selected);
   }
@@ -1011,4 +1088,209 @@
       opacity: 0.6;
     }
   }
+
+  /*
+   * The Columns panel: a checkbox per column and a handle to drag it into another place. It shares the .nx-popover
+   * panel with the menu, and holds a list rather than actions, so a click inside it never closes it.
+   */
+  .nx-columns {
+    --nx-columns-row-h: 32px;
+    position: fixed;
+    inset: auto;
+    min-width: 232px;
+    max-width: min(320px, calc(100% - 16px));
+    max-height: calc(100vh - 16px);
+    padding: var(--nx-space-2);
+    outline: none;
+  }
+
+  .nx-columns--sm {
+    --nx-columns-row-h: 28px;
+    font-size: var(--nx-text-sm);
+  }
+
+  /* A shut popover is hidden by the browser, so the panel takes its layout only while it is open. */
+  .nx-columns:popover-open {
+    display: flex;
+    flex-direction: column;
+    animation: nx-menu-in 120ms ease-out;
+  }
+
+  .nx-columns__head {
+    display: flex;
+    align-items: baseline;
+    justify-content: space-between;
+    gap: var(--nx-space-3);
+    padding: 2px var(--nx-space-2) 6px;
+  }
+
+  .nx-columns__title {
+    font-weight: 600;
+  }
+
+  .nx-columns__count {
+    color: var(--nx-text-muted);
+    font-size: var(--nx-text-xs);
+    font-variant-numeric: tabular-nums;
+  }
+
+  .nx-columns__list {
+    display: flex;
+    flex: 1 1 auto;
+    flex-direction: column;
+    min-height: 0;
+    margin: 0;
+    padding: 0;
+    overflow: hidden auto;
+    overscroll-behavior: contain;
+    list-style: none;
+  }
+
+  .nx-columns__row {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    min-height: var(--nx-columns-row-h);
+    padding: 0 var(--nx-space-2) 0 2px;
+    border: 1px solid transparent;
+    border-radius: var(--nx-radius);
+  }
+
+  .nx-columns__row:hover {
+    background: var(--nx-surface-hover);
+  }
+
+  /* The row being dragged stays in place and goes quiet; a line shows where it would land. */
+  .nx-columns__row[data-held] {
+    background: var(--nx-surface-hover);
+    opacity: 0.6;
+  }
+
+  .nx-columns__row[data-drop] {
+    border-color: var(--nx-primary);
+  }
+
+  /* A band: its own line, with the columns under it indented along a line that says where the band ends. */
+  .nx-columns__row--band {
+    display: block;
+    padding: 0;
+  }
+
+  .nx-columns__row--band:hover {
+    background: none;
+  }
+
+  .nx-columns__band {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    min-height: var(--nx-columns-row-h);
+    padding: 0 var(--nx-space-2) 0 2px;
+    border-radius: var(--nx-radius);
+  }
+
+  .nx-columns__band:hover {
+    background: var(--nx-surface-hover);
+  }
+
+  .nx-columns__band .nx-columns__label {
+    font-weight: 600;
+  }
+
+  .nx-columns__band-count {
+    flex: none;
+    color: var(--nx-text-subtle);
+    font-size: var(--nx-text-xs);
+    font-variant-numeric: tabular-nums;
+  }
+
+  .nx-columns__children {
+    margin: 0 0 2px 13px;
+    padding: 0 0 0 9px;
+    border-left: 1px solid var(--nx-border);
+    list-style: none;
+  }
+
+  /* A column whose band is hidden stays readable but plainly off. */
+  .nx-columns__row--child:has(input:disabled) .nx-columns__label {
+    color: var(--nx-text-subtle);
+  }
+
+  .nx-columns__handle {
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    justify-content: center;
+    width: 20px;
+    height: var(--nx-columns-row-h);
+    padding: 0;
+    border: 0;
+    border-radius: var(--nx-radius-sm);
+    background: none;
+    color: var(--nx-text-subtle);
+    cursor: grab;
+    touch-action: none;
+  }
+
+  .nx-columns__handle:hover {
+    color: var(--nx-text);
+  }
+
+  .nx-columns__handle:focus-visible {
+    outline: none;
+    box-shadow: var(--nx-focus-ring);
+  }
+
+  .nx-columns[data-dragging] .nx-columns__handle {
+    cursor: grabbing;
+  }
+
+  .nx-columns__handle--fixed {
+    cursor: default;
+  }
+
+  .nx-columns__choice {
+    flex: 1 1 auto;
+    min-width: 0;
+    padding: 2px 0;
+  }
+
+  .nx-columns__label {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .nx-columns__pin {
+    display: inline-flex;
+    flex: none;
+    color: var(--nx-text-subtle);
+  }
+
+  .nx-columns__pin .nx-icon {
+    width: 14px;
+    height: 14px;
+  }
+
+  .nx-columns__note {
+    margin: 6px 0 0;
+    padding: 0 var(--nx-space-2);
+    color: var(--nx-text-muted);
+    font-size: var(--nx-text-xs);
+    line-height: 1.4;
+  }
+
+  .nx-columns__foot {
+    display: flex;
+    justify-content: flex-end;
+    margin-top: var(--nx-space-2);
+    padding-top: var(--nx-space-2);
+    border-top: 1px solid var(--nx-border);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .nx-columns:popover-open {
+      animation: none;
+    }
+  }
 }