nexus-shared 3.1.0 → 4.0.0

package/src/Styles/Nexus.Table.css

@@ -72,6 +72,15 @@
     display: none;
   }
 
+  /* What the rows are (`caption`): a line over the bar, inside the frame, so a table beside another starts level with it. */
+  .nx-table__caption {
+    margin: var(--nx-space-2) var(--nx-space-3) 0;
+    color: var(--nx-text-muted);
+    font-size: var(--nx-text-md);
+    line-height: 1.5;
+    overflow-wrap: anywhere;
+  }
+
   .nx-table__bar:has(:not(.nx-table__bar-end):not(:empty)) + .nx-table__frame {
     border-top: 1px solid var(--nx-table-line);
   }
@@ -90,6 +99,21 @@
     flex-wrap: wrap;
   }
 
+  /*
+   * The Add section's items keep their own widths on a shared line: none shrinks to its longest word (a switch's
+   * label) or runs into the lists, so a bar that does not fit takes its next step instead. On the line the section
+   * takes of its own (below) they share it, and one that would not fit its share takes a line of its own, whole. The
+   * Add is `block` for that line; beside other parts it is as wide as its label.
+   */
+  .nx-table__bar-add > * {
+    flex: none;
+    min-width: fit-content;
+  }
+
+  .nx-table__bar-add > :is(.nx-btn--block, .nx-split--block) {
+    width: auto;
+  }
+
   /* A part whose page content renders nothing (an empty fragment) is no part: no room, no gap, no step. */
   .nx-table__bar-add:empty,
   .nx-table__bar-start:empty {
@@ -270,24 +294,49 @@
     --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] {
+  /* A row a click opens or picks says so under the pointer. Only the pointer changes: nothing in the row moves on hover. */
+  .nx-table__row:is([data-open], [data-pick]) {
     cursor: pointer;
   }
 
-  .nx-table__row[data-selected] {
+  /* A selected row, and the picked one (`onPick`): the same tint, which the checkbox or the list beside tells apart. */
+  .nx-table__row:is([data-selected], [data-picked]) {
     --nx-row-bg: var(--nx-table-selected);
   }
 
-  .nx-table__row[data-selected]:hover {
+  .nx-table__row:is([data-selected], [data-picked]):hover {
     --nx-row-bg: var(--nx-table-selected-hover);
   }
 
   /* Muted text on a selected row's tint moves toward the text color, so it keeps 4.5:1 in every theme. */
-  .nx-table__row[data-selected] :is(.nx-table__number, .nx-table__dash, .nx-table__no) {
+  .nx-table__row:is([data-selected], [data-picked]) :is(.nx-table__number, .nx-table__dash, .nx-table__no) {
     color: color-mix(in oklab, var(--nx-text-muted), var(--nx-text) 45%);
   }
 
+  /*
+   * The keyboard's focus on a row's radio button (`onPick`), which is out of sight: a ring round the row, drawn on its
+   * cells as the tree's rows draw theirs, so a pinned cell carries its part of it.
+   */
+  .nx-table__row:has(.nx-table__pick:focus-visible) > .nx-table__cell {
+    box-shadow:
+      inset 0 2px 0 var(--nx-primary),
+      inset 0 -2px 0 var(--nx-primary);
+  }
+
+  .nx-table__row:has(.nx-table__pick:focus-visible) > .nx-table__cell:first-child {
+    box-shadow:
+      inset 2px 0 0 var(--nx-primary),
+      inset 0 2px 0 var(--nx-primary),
+      inset 0 -2px 0 var(--nx-primary);
+  }
+
+  .nx-table__row:has(.nx-table__pick:focus-visible) > .nx-table__cell:last-child {
+    box-shadow:
+      inset -2px 0 0 var(--nx-primary),
+      inset 0 2px 0 var(--nx-primary),
+      inset 0 -2px 0 var(--nx-primary);
+  }
+
   /* Columns scroll under the pinned ones: a soft shadow shows there is more on that side. */
   .nx-table__frame[data-scroll-start] {
     --nx-table-start-edge: 8px 0 8px -8px var(--nx-table-edge);
@@ -447,21 +496,17 @@
   }
 
   /*
-   * The pinned section above the page: a row across the table whose button folds the records the user pinned open and
-   * shut, and the rows themselves, which show in the list below as well. A pinned row wears a pin where the rows of the
-   * page show their number.
+   * The sections above the page: a row across the table whose button folds a set of the user's records open and shut -
+   * the ones they pinned, their favourites - and the rows themselves, which show in the list below as well. A section's
+   * row wears the section's icon where the rows of the page show their number.
    */
-  .nx-table__pins {
-    border-bottom: 2px solid var(--nx-table-line);
-  }
-
-  .nx-table__pin-cell {
+  .nx-table__section-cell {
     padding: 0;
     border-bottom: 1px solid var(--nx-table-line);
     background: var(--nx-table-head-bg);
   }
 
-  .nx-table__pin-toggle {
+  .nx-table__section-toggle {
     display: flex;
     align-items: center;
     gap: var(--nx-space-2);
@@ -479,54 +524,54 @@
     transition: background-color var(--nx-duration);
   }
 
-  .nx-table__pin-toggle:hover {
+  .nx-table__section-toggle:hover {
     background: color-mix(in oklab, var(--nx-text) 5%, transparent);
   }
 
-  .nx-table__pin-toggle:focus-visible {
+  .nx-table__section-toggle:focus-visible {
     outline: none;
     box-shadow: inset 0 0 0 2px var(--nx-primary);
   }
 
-  .nx-table__pin-caret {
+  .nx-table__section-caret,
+  .nx-table__section-icon,
+  .nx-table__mark {
     flex-shrink: 0;
     width: 15px;
     height: 15px;
     color: var(--nx-text-muted);
-    transition: transform var(--nx-duration);
   }
 
-  .nx-table__pins[data-open] .nx-table__pin-caret {
-    transform: rotate(90deg);
+  /* A row's marks, where its number would be: one under the other, in the line a single mark takes. */
+  .nx-table__marks {
+    display: inline-flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 2px;
   }
 
-  .nx-table__pin-icon {
-    flex-shrink: 0;
-    width: 15px;
-    height: 15px;
-    color: var(--nx-text-muted);
+  .nx-table__section-caret {
+    transition: transform var(--nx-duration);
+  }
+
+  .nx-table__section[data-open] .nx-table__section-caret {
+    transform: rotate(90deg);
   }
 
-  .nx-table__pin-count {
+  .nx-table__section-count {
     color: var(--nx-text-muted);
     font-weight: 400;
     font-variant-numeric: tabular-nums;
   }
 
-  .nx-table__pin-loading {
+  .nx-table__section-loading {
     width: 14px;
     height: 14px;
     color: var(--nx-text-muted);
   }
 
-  .nx-table__pin-mark {
-    width: 15px;
-    height: 15px;
-    color: var(--nx-text-muted);
-  }
-
-  [data-nx-motion="reduce"] .nx-table__pin-caret,
-  [data-nx-motion="reduce"] .nx-table__pin-toggle {
+  [data-nx-motion="reduce"] .nx-table__section-caret,
+  [data-nx-motion="reduce"] .nx-table__section-toggle {
     transition: none;
   }
 
@@ -859,6 +904,16 @@
     --nx-tag-tone: var(--nx-info);
   }
 
+  /* A tag after a value (a column's `tag`): "Asia" then "Trashed", a word's space apart. */
+  .nx-table__tag--after {
+    margin-inline-start: var(--nx-space-2);
+  }
+
+  /* A word with no state to tell (a keyword in a record's card): the tag without its dot. */
+  .nx-table__tag--plain::before {
+    content: none;
+  }
+
   /* Placeholders while the first rows load. */
   .nx-table__bone {
     display: block;
@@ -884,7 +939,15 @@
     background: var(--nx-table-bg);
   }
 
+  /*
+   * The cell spans every column, so on a table wider than its frame the message is held to the part on screen:
+   * sticky at the start edge and as wide as the scroller shows (DataTable measures it into --nx-table-view-w).
+   */
   .nx-table__message {
+    position: sticky;
+    inset-inline-start: 0;
+    box-sizing: border-box;
+    width: var(--nx-table-view-w, 100%);
     display: flex;
     flex-direction: column;
     align-items: center;

package/src/Styles/Nexus.Theme.Picker.css

@@ -55,6 +55,11 @@
    * The scroller runs to the panel's right wall, so its scroll bar is the wall's and not a padding's width inside it,
    * and it carries the panel's right padding inside itself; the panel's other children keep the same inset with a
    * margin. Its right corners take the panel's rounding, so the bar is cut by the curve instead of drawn over it.
+   * A scroller cuts off what reaches past its edge, and a focus ring is drawn outside its box (3px; a checkbox's
+   * outline 4px). So on its other three sides it reaches 4px into the panel's padding and pads itself by as much:
+   * what it holds stays where it was, and a field at its edge shows its whole ring (every panel's padding is 4px or
+   * more). Focus scrolls a field as far clear of the edges (`scroll-padding`), so one left flush with an edge by a
+   * scroll shows its ring too.
    */
   .nx-popover:has(> .nx-popover__scroll) {
     max-height: var(--nx-popover-room, calc(100vh - 16px));
@@ -74,12 +79,31 @@
   .nx-popover__scroll {
     flex: 1 1 auto;
     min-height: 0;
+    margin: calc(var(--nx-space-1) * -1);
+    margin-right: 0;
+    padding: var(--nx-space-1);
     padding-right: var(--nx-popover-pad, var(--nx-space-4));
+    scroll-padding: var(--nx-space-1);
     overflow: hidden auto;
     overscroll-behavior: contain;
     border-radius: 0 calc(var(--nx-radius-lg) - 1px) calc(var(--nx-radius-lg) - 1px) 0;
   }
 
+  /*
+   * Where the scroller reaches one of the panel's left corners (it is the panel's first or last child, as a menu's
+   * list is), its own corner follows the panel's curve: the panel's inner radius less the room between their edges,
+   * which is the panel's padding less the 4px taken back. A menu's 4px puts the two edges together, so its corner takes
+   * the whole 9px; an 8px padding leaves 5px, the theme panel's 16px none. Square, a scrolled item's highlight ran
+   * over the rounded border.
+   */
+  .nx-popover > .nx-popover__scroll:first-child {
+    border-top-left-radius: max(0px, var(--nx-radius-lg) - 1px - (var(--nx-popover-pad, var(--nx-space-4)) - var(--nx-space-1)));
+  }
+
+  .nx-popover > .nx-popover__scroll:last-child {
+    border-bottom-left-radius: max(0px, var(--nx-radius-lg) - 1px - (var(--nx-popover-pad, var(--nx-space-4)) - var(--nx-space-1)));
+  }
+
   /*
    * The arrow that ties a panel to the button or the place it opened from: an isosceles tail, 26px across and 11px
    * deep, with a slightly rounded tip. It is drawn in two layers, because a shape with a line along two of its sides
@@ -130,19 +154,45 @@
     transform: scaleY(-1);
   }
 
+  /* Wide enough for the sections to sit two to a row. */
   .nx-theme-switcher__panel {
     position: fixed;
     inset: auto;
-    width: min(340px, calc(100vw - 16px));
+    width: min(680px, calc(100vw - 16px));
   }
 
   .nx-theme-picker,
-  .nx-theme-switcher__body {
+  .nx-theme-switcher__body,
+  .nx-theme-picker__block {
     display: grid;
     gap: var(--nx-space-4);
   }
 
-  /* A section of the preferences: a line above it and its name, a step stronger than the small headings under it. */
+  /*
+   * In the panel every section is a cell of one grid: two to a row, the theme across both, and one under the other
+   * where the window is narrow. The two pickers' own wrappers step aside so their sections share that grid.
+   */
+  .nx-theme-switcher__body {
+    grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr));
+    align-items: start;
+    column-gap: var(--nx-space-6);
+  }
+
+  .nx-theme-switcher__body > .nx-theme-picker {
+    display: contents;
+  }
+
+  .nx-theme-picker__block {
+    align-content: start;
+    min-width: 0;
+    gap: var(--nx-space-3);
+  }
+
+  .nx-theme-picker__block--wide {
+    grid-column: 1 / -1;
+  }
+
+  /* A section's name, a line above it, a step stronger than the small headings under it. */
   .nx-theme-picker__section {
     margin: 0;
     padding-top: var(--nx-space-4);
@@ -152,6 +202,12 @@
     font-weight: 600;
   }
 
+  /* The first section starts at the top of its picker, with nothing above it to set it off from. */
+  .nx-theme-picker:first-child > .nx-theme-picker__block:first-child > .nx-theme-picker__section {
+    padding-top: 0;
+    border-top: 0;
+  }
+
   .nx-theme-picker__group {
     min-width: 0;
     margin: 0;