nexus-shared 3.0.0 → 3.2.0

package/src/Styles/Nexus.Tokens.css

@@ -32,14 +32,31 @@
     --nx-space-5: 20px;
     --nx-space-6: 24px;
     --nx-space-8: 32px;
+
+    /* Density: the sizes a compact and a cozy page differ by (cozy below). Everything sized by them follows. */
     --nx-control-sm: 28px;
     --nx-control-md: 34px;
     --nx-control-lg: 40px;
+    /* A row in a list: a menu's item, a table's row and header, a dropdown's option, the Columns panel's line. */
+    --nx-row: 32px;
+    /* A bottom band, such as a table's footer: small controls with 6px above and below, and its 1px line. */
+    --nx-footbar: calc(var(--nx-control-sm) + 13px);
 
     /* Motion */
     --nx-duration: 120ms;
   }
 
+  /*
+   * Cozy: every control 4px taller and every row 6px, for a touch screen or a large monitor. One attribute on <html>
+   * (ThemeScript and ThemeSwitcher set it), so no component asks; compact, the default, is the sizes above.
+   */
+  :root[data-nx-density="cozy"] {
+    --nx-control-sm: 32px;
+    --nx-control-md: 38px;
+    --nx-control-lg: 44px;
+    --nx-row: 38px;
+  }
+
   :root[data-nx-mode="light"] {
     color-scheme: light;
   }

package/src/Styles/Nexus.Tree.css

@@ -109,8 +109,6 @@
     overflow: auto;
     overscroll-behavior: contain;
     outline: none;
-    scrollbar-width: thin;
-    scrollbar-color: var(--nx-field-scrollbar) transparent;
   }
 
   .nx-tree__viewport:focus-visible {
@@ -272,6 +270,75 @@
     vertical-align: 0;
   }
 
+  /*
+   * Rows that are not items, under a parent of a lazy tree (loadChildren): its page on its way, a page that failed
+   * with Retry, and Load more. They sit at the children's level and take no checkbox; the whole row is the button, so
+   * the Retry drawn in it is not a second stop for the keyboard.
+   */
+  .nx-tree__row--status {
+    cursor: default;
+  }
+
+  .nx-tree__row--more,
+  .nx-tree__row--error {
+    cursor: pointer;
+  }
+
+  /* Nothing to press while a page comes. */
+  .nx-tree__row--loading[role="treeitem"]:hover {
+    background-color: transparent;
+  }
+
+  .nx-tree__status-icon {
+    flex: none;
+    width: 14px;
+    height: 14px;
+    color: var(--nx-tree-muted);
+    vertical-align: 0;
+  }
+
+  /* The sentence keeps its own width, so Retry follows it rather than the row's far end. */
+  .nx-tree__row--status .nx-tree__text {
+    flex: 0 1 auto;
+  }
+
+  .nx-tree__status-text {
+    flex: 0 1 auto;
+    min-width: 0;
+    overflow: hidden;
+    color: var(--nx-tree-muted);
+    text-overflow: ellipsis;
+  }
+
+  .nx-tree__row--error .nx-tree__status-icon {
+    color: var(--nx-danger);
+  }
+
+  .nx-tree__row--error .nx-tree__status-text {
+    color: var(--nx-text);
+  }
+
+  /* The accent as text; on the hover tint it moves toward the text color, as muted texts do, to keep 4.5:1 (the plain
+     accent measured 3.79:1 on Dracula dark's hover tint). */
+  .nx-tree__row--more {
+    --nx-tree-link: var(--nx-primary);
+  }
+
+  .nx-tree__row--more:is(:hover, :focus-visible) {
+    --nx-tree-link: color-mix(in oklab, var(--nx-primary), var(--nx-text) 35%);
+  }
+
+  .nx-tree__row--more .nx-tree__status-text {
+    color: var(--nx-tree-link);
+    font-weight: 500;
+  }
+
+  .nx-btn.nx-tree__retry {
+    --nx-btn-height: calc(var(--nx-tree-row) - 6px);
+    flex: none;
+    margin-left: var(--nx-space-1);
+  }
+
   /* A locked item: the read-only box (data-readonly), a muted label, and a lock. */
   .nx-tree__row--locked {
     cursor: default;
@@ -421,15 +488,13 @@
     cursor: default;
   }
 
-  @media (prefers-reduced-motion: reduce) {
-    .nx-tree__motion,
-    .nx-tree__skeleton {
-      animation: none;
-    }
+  [data-nx-motion="reduce"] .nx-tree__motion,
+  [data-nx-motion="reduce"] .nx-tree__skeleton {
+    animation: none;
+  }
 
-    .nx-tree,
-    .nx-tree__toggle .nx-icon {
-      transition: none;
-    }
+  [data-nx-motion="reduce"] .nx-tree,
+  [data-nx-motion="reduce"] .nx-tree__toggle .nx-icon {
+    transition: none;
   }
 }