nexus-shared 3.2.0 → 4.0.0

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

@@ -105,25 +105,25 @@
     transition: color var(--nx-duration);
   }
 
-  .nx-tabs__option:hover:not(:has(:checked, :disabled)) {
+  .nx-tabs__option:hover:not(:has(:checked, :disabled), [aria-selected="true"], :disabled) {
     background: var(--nx-tabs-hover);
     color: var(--nx-text);
   }
 
-  .nx-tabs__option:has(:checked) {
+  .nx-tabs__option:is(:has(:checked), [aria-selected="true"]) {
     color: var(--nx-tabs-active-color);
     cursor: default;
   }
 
-  .nx-tabs__option:has(:checked) .nx-icon {
+  .nx-tabs__option:is(:has(:checked), [aria-selected="true"]) .nx-icon {
     color: var(--nx-tabs-active-icon);
   }
 
-  .nx-tabs__option:has(:focus-visible) {
+  .nx-tabs__option:is(:has(:focus-visible), :focus-visible) {
     box-shadow: var(--nx-focus-ring);
   }
 
-  .nx-tabs__option:has(:disabled) {
+  .nx-tabs__option:is(:has(:disabled), :disabled) {
     cursor: not-allowed;
     opacity: 0.45;
   }
@@ -178,7 +178,7 @@
       padding 240ms cubic-bezier(0.2, 0, 0, 1);
   }
 
-  .nx-tabs--labels-selected .nx-tabs__option:has(:checked) {
+  .nx-tabs--labels-selected .nx-tabs__option:is(:has(:checked), [aria-selected="true"]) {
     padding: 0 var(--nx-space-3);
     background: var(--nx-tabs-indicator);
     box-shadow:
@@ -187,7 +187,7 @@
   }
 
   /* In a full-width group, the selected option takes the free space. */
-  .nx-tabs--labels-selected.nx-tabs--block .nx-tabs__option:has(:checked) {
+  .nx-tabs--labels-selected.nx-tabs--block .nx-tabs__option:is(:has(:checked), [aria-selected="true"]) {
     flex: 1 1 auto;
   }
 
@@ -202,7 +202,7 @@
       margin 240ms cubic-bezier(0.2, 0, 0, 1);
   }
 
-  .nx-tabs--labels-selected .nx-tabs__option:has(:checked) .nx-tabs__label {
+  .nx-tabs--labels-selected .nx-tabs__option:is(:has(:checked), [aria-selected="true"]) .nx-tabs__label {
     grid-template-columns: 1fr;
     margin-inline-start: 6px;
   }
@@ -239,9 +239,10 @@
    * 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.
+   * square, so a row of letters lines up. A choice group drawn as tabs (`RadioGroup design="tabs"`, `nx-tabs--wrap`)
+   * is drawn the same way: its choice lives in the inputs, not in a value the track could slide an indicator to.
    */
-  .nx-tabs--multiple {
+  :is(.nx-tabs--multiple, .nx-tabs--wrap) {
     --nx-tabs-option-height: calc(var(--nx-tabs-height) - 2 * var(--nx-tabs-pad) - 2px);
 
     display: inline-flex;
@@ -251,26 +252,30 @@
     height: auto;
   }
 
-  .nx-tabs--multiple.nx-tabs--block {
+  :is(.nx-tabs--multiple, .nx-tabs--wrap).nx-tabs--block {
     display: flex;
   }
 
-  .nx-tabs--multiple .nx-tabs__option {
+  :is(.nx-tabs--multiple, .nx-tabs--wrap) .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) {
+  /* A chosen option keeps its raised look under the pointer too. */
+  :is(.nx-tabs--multiple, .nx-tabs--wrap) .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);
+  }
+
+  /* One of several can be unchosen, so it keeps the pointer. */
+  .nx-tabs--multiple .nx-tabs__option:has(:checked) {
     cursor: pointer;
   }
 
-  .nx-tabs--multiple .nx-tabs__option:has(:checked):has(:focus-visible) {
+  :is(.nx-tabs--multiple, .nx-tabs--wrap) .nx-tabs__option:has(:checked):has(:focus-visible) {
     box-shadow:
       inset 0 0 0 1px var(--nx-tabs-indicator-border),
       var(--nx-focus-ring);
@@ -278,7 +283,7 @@
 
   /* 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 {
+    :is(.nx-tabs--multiple, .nx-tabs--wrap) {
       --nx-tabs-option-height: var(--nx-control-md);
     }
   }
@@ -340,21 +345,21 @@
       transform 200ms cubic-bezier(0.2, 0, 0, 1);
   }
 
-  .nx-tabs--list .nx-tabs__option:has(:checked) {
+  .nx-tabs--list .nx-tabs__option:is(:has(:checked), [aria-selected="true"]) {
     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) {
+  .nx-tabs--list:not([role="radiogroup"], [role="tablist"]) .nx-tabs__option:is(:has(:checked), [aria-selected="true"]) {
     cursor: pointer;
   }
 
-  .nx-tabs--list .nx-tabs__option:has(:checked)::before {
+  .nx-tabs--list .nx-tabs__option:is(:has(:checked), [aria-selected="true"])::before {
     opacity: 1;
     transform: none;
   }
 
-  .nx-tabs--list .nx-tabs__option:has(:checked) .nx-tabs__text {
+  .nx-tabs--list .nx-tabs__option:is(:has(:checked), [aria-selected="true"]) .nx-tabs__text {
     font-weight: 600;
   }
 
@@ -404,7 +409,7 @@
     --nx-tabs-active-icon: var(--nx-primary);
   }
 
-  .nx-tabs--list.nx-tabs--primary .nx-tabs__option:has(:checked) .nx-tabs__badge {
+  .nx-tabs--list.nx-tabs--primary .nx-tabs__option:is(:has(:checked), [aria-selected="true"]) .nx-tabs__badge {
     background: var(--nx-primary-solid);
     color: var(--nx-primary-text);
   }
@@ -423,8 +428,68 @@
     --nx-tabs-list-gap: 12px;
   }
 
+  /*
+   * Tabs (`Tabs`): the same options as buttons with role="tab", marked by aria-selected rather than a checked radio.
+   * Only what a button brings of its own is taken away; the ring is the options' own box-shadow.
+   */
+  button.nx-tabs__option {
+    margin: 0;
+    border: 0;
+    background: none;
+    font-family: inherit;
+    outline: none;
+  }
+
+  [role="tablist"] .nx-tabs__option[aria-selected="true"] {
+    cursor: default;
+  }
+
+  /*
+   * design="auto": the list, until its container (a popup's workspace) is narrower than 720px; there the same rows lie
+   * in one strip that scrolls sideways, the bar under the chosen one. The strip keeps room for the focus ring, which a
+   * scrolling box would cut off.
+   */
+  @container (max-width: 719.98px) {
+    .nx-tabs--auto {
+      grid-auto-columns: max-content;
+      grid-auto-flow: column;
+      padding: 3px;
+      overflow-x: auto;
+      overscroll-behavior-x: contain;
+      scrollbar-width: none;
+    }
+
+    .nx-tabs--auto .nx-tabs__option {
+      white-space: nowrap;
+    }
+
+    .nx-tabs--auto .nx-tabs__option::before {
+      top: auto;
+      right: 10px;
+      bottom: 0;
+      left: 10px;
+      width: auto;
+      height: 3px;
+      transform: scaleX(0.3);
+    }
+
+    .nx-tabs--auto .nx-tabs__description {
+      display: none;
+    }
+  }
+
+  /* A tab's panel: it takes the focus when it holds nothing that does, so its ring is drawn inside it. */
+  .nx-tab-panel {
+    min-width: 0;
+  }
+
+  .nx-tab-panel:focus-visible {
+    outline: 2px solid var(--nx-primary);
+    outline-offset: -2px;
+  }
+
   [data-nx-motion="reduce"] .nx-tabs__indicator,
-  [data-nx-motion="reduce"] .nx-tabs--multiple .nx-tabs__option,
+  [data-nx-motion="reduce"] :is(.nx-tabs--multiple, .nx-tabs--wrap) .nx-tabs__option,
   [data-nx-motion="reduce"] .nx-tabs--labels-selected :is(.nx-tabs__option, .nx-tabs__label),
   [data-nx-motion="reduce"] .nx-tabs--list .nx-tabs__option::before {
     transition: none;

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);
@@ -860,6 +909,11 @@
     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;
@@ -885,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.Themes.css

@@ -6,7 +6,9 @@
  * Colors follow each theme's official palette, darkened or lightened where needed to meet WCAG AA contrast.
  * --nx-primary and --nx-danger are the accent as text and lines (light in dark mode, for contrast on dark panels);
  * --nx-primary-solid and --nx-danger-solid are the same hue as a fill behind white text (buttons, selected days,
- * checks), a darker shade in dark mode. --nx-primary-text and --nx-danger-text sit on the solid fills.
+ * checks), a darker shade in dark mode. --nx-primary-text and --nx-danger-text sit on the solid fills: a light
+ * label in both modes (white, or the theme's own near-white), since a fill under the pointer or pressed darkens
+ * (Nexus.Tokens.css). A fill keeps 2:1 on --nx-surface at rest and under the pointer.
  * After changing a color, run: npm run check:themes
  *
  * A new theme is one more block with its own data-nx-theme value, added to NEXUS_THEMES or passed to the theme components.
@@ -57,7 +59,11 @@
     --nx-info: light-dark(#0964d0, #4493f8);
   }
 
-  /* Nord: arctic, north-bluish calm. */
+  /*
+   * Nord: arctic, north-bluish calm. In dark mode its fills carry pure white: its panel (#2e3440) is lighter than
+   * other themes', and with snow (#eceff4) as the label a fill had no room to darken under the pointer and still
+   * stand 2:1 off the panel.
+   */
   [data-nx-theme="nord"] {
     --nx-bg: light-dark(#e5e9f0, #242933);
     --nx-surface: light-dark(#eceff4, #2e3440);
@@ -69,11 +75,11 @@
     --nx-text-muted: light-dark(#4c566a, #b9c2d0);
     --nx-text-subtle: light-dark(#7b88a1, #7b88a1);
     --nx-primary: light-dark(#446184, #88c0d0);
-    --nx-primary-solid: light-dark(#446184, #4b717c);
-    --nx-primary-text: light-dark(#eceff4, #eceff4);
+    --nx-primary-solid: light-dark(#446184, #557b86);
+    --nx-primary-text: light-dark(#eceff4, #ffffff);
     --nx-danger: light-dark(#9e4049, #dba6ab);
-    --nx-danger-solid: light-dark(#9e4049, #8e5e63);
-    --nx-danger-text: light-dark(#eceff4, #eceff4);
+    --nx-danger-solid: light-dark(#9e4049, #99686d);
+    --nx-danger-text: light-dark(#eceff4, #ffffff);
     --nx-success: light-dark(#4e6639, #a3be8c);
     --nx-warning: light-dark(#954931, #ebcb8b);
     --nx-info: light-dark(#406283, #9cb5ce);

package/src/Styles/Nexus.Tokens.css

@@ -68,13 +68,18 @@
   /*
    * Derived colors, declared wherever a theme applies, so an element with its own data-nx-theme
    * (a theme preview, for example) gets hover and soft colors from that theme.
-   * Mixing toward the text color darkens in light mode and lightens in dark mode.
+   *
+   * A solid fill under the pointer (--nx-primary-hover, --nx-danger-hover; a button pressed too) is the fill with 12%
+   * black mixed in, in every theme and in light and dark mode alike. The fill sits behind the white --nx-*-text label,
+   * so the darker step only raises the label's contrast: 6:1 or more, from 4.6:1 at rest. It is about the same step in
+   * every theme (an OKLab difference of 5.8 to 7.4, x100). Mixing toward the text color lightened the fill in dark
+   * mode, to 3.5:1. npm run check:themes reads these two lines and checks both.
    */
   :root,
   [data-nx-theme] {
-    --nx-primary-hover: color-mix(in oklab, var(--nx-primary-solid), var(--nx-text) 16%);
+    --nx-primary-hover: color-mix(in oklab, var(--nx-primary-solid), black 12%);
     --nx-primary-soft: color-mix(in oklab, var(--nx-primary) 14%, var(--nx-surface));
-    --nx-danger-hover: color-mix(in oklab, var(--nx-danger-solid), var(--nx-text) 16%);
+    --nx-danger-hover: color-mix(in oklab, var(--nx-danger-solid), black 12%);
     --nx-danger-soft: color-mix(in oklab, var(--nx-danger) 14%, var(--nx-surface));
     --nx-success-soft: color-mix(in oklab, var(--nx-success) 14%, var(--nx-surface));
     --nx-warning-soft: color-mix(in oklab, var(--nx-warning) 14%, var(--nx-surface));

package/src/Styles/Nexus.Tree.css

@@ -103,6 +103,18 @@
     margin-left: var(--nx-space-1);
   }
 
+  /* A tree that fills (`fill`): the height it is given, the toolbar on top and the rows scrolling under it. */
+  .nx-tree-field--fill {
+    height: 100%;
+    min-height: 0;
+  }
+
+  .nx-tree-field--fill > .nx-tree,
+  .nx-tree-field--fill .nx-tree__viewport {
+    flex: 1 1 auto;
+    min-height: 0;
+  }
+
   /* Rows */
   .nx-tree__viewport {
     position: relative;
@@ -158,11 +170,29 @@
     box-shadow: inset 0 0 0 2px var(--nx-primary);
   }
 
-  .nx-tree__row[role="treeitem"]:is(:hover, :focus-visible) {
+  .nx-tree__row[role="treeitem"]:is(:hover, :focus-visible),
+  .nx-tree__row--selected {
     --nx-tree-muted: color-mix(in oklab, var(--nx-text-muted), var(--nx-text) 35%);
     --nx-tree-count: color-mix(in oklab, var(--nx-text-muted), var(--nx-text) 50%);
   }
 
+  /* The selected row (`selectedValue`): a single choice's tint, as a dropdown's chosen option has, and a heavier label.
+     It stays when focus moves on; under the pointer or with the keyboard's focus the tint deepens, and its muted texts
+     move further toward the text color (35% read 4.49:1 there in Catppuccin light). */
+  .nx-tree__row--selected {
+    background-color: color-mix(in oklab, var(--nx-primary) 10%, transparent);
+  }
+
+  .nx-tree__row--selected[role="treeitem"]:is(:hover, :focus-visible) {
+    --nx-tree-muted: color-mix(in oklab, var(--nx-text-muted), var(--nx-text) 50%);
+    --nx-tree-count: color-mix(in oklab, var(--nx-text-muted), var(--nx-text) 65%);
+    background-color: color-mix(in oklab, var(--nx-primary) 17%, transparent);
+  }
+
+  .nx-tree__row--selected .nx-tree__label {
+    font-weight: 500;
+  }
+
   .nx-tree__toggle {
     display: grid;
     flex: none;