nexus-shared 3.0.0 → 3.2.0

package/src/Styles/Nexus.Dropdown.css

@@ -252,13 +252,12 @@
 
   /* The panel */
   .nx-dropdown-panel {
-    --nx-dropdown-row: 34px;
+    --nx-dropdown-row: calc(var(--nx-row) + 2px);
     --nx-dropdown-font: var(--nx-text-md);
     --nx-dropdown-media: 24px;
     --nx-dropdown-check: 16px;
     --nx-dropdown-pad-x: var(--nx-space-2);
     --nx-dropdown-bg: light-dark(var(--nx-surface), var(--nx-surface-2));
-    --nx-dropdown-scrollbar: color-mix(in oklab, var(--nx-text-subtle) 75%, transparent);
 
     position: fixed;
     inset: auto;
@@ -273,14 +272,14 @@
   }
 
   .nx-dropdown-panel--sm {
-    --nx-dropdown-row: 30px;
+    --nx-dropdown-row: calc(var(--nx-row) - 2px);
     --nx-dropdown-font: var(--nx-text-sm);
     --nx-dropdown-media: 20px;
     --nx-dropdown-check: 14px;
   }
 
   .nx-dropdown-panel--lg {
-    --nx-dropdown-row: 40px;
+    --nx-dropdown-row: calc(var(--nx-row) + 8px);
     --nx-dropdown-font: var(--nx-text-lg);
     --nx-dropdown-media: 28px;
     --nx-dropdown-check: 18px;
@@ -291,14 +290,6 @@
   .nx-dropdown-panel:popover-open {
     display: flex;
     flex-direction: column;
-    animation: nx-dropdown-in 120ms ease-out;
-  }
-
-  @keyframes nx-dropdown-in {
-    from {
-      opacity: 0;
-      transform: translateY(-4px);
-    }
   }
 
   /*
@@ -318,8 +309,6 @@
     font-size: var(--nx-dropdown-font);
     line-height: 1.35;
     scrollbar-gutter: stable;
-    scrollbar-width: thin;
-    scrollbar-color: var(--nx-dropdown-scrollbar) transparent;
   }
 
   /*
@@ -578,44 +567,9 @@
     color: var(--nx-text-muted);
   }
 
+  /* The shared avatar, at the size of the dropdown's pictures. */
   .nx-dropdown-avatar {
-    position: relative;
-    display: inline-grid;
-    flex-shrink: 0;
-    place-items: center;
-    width: var(--nx-dropdown-media);
-    height: var(--nx-dropdown-media);
-    overflow: hidden;
-    border-radius: 50%;
-    background: color-mix(in oklab, var(--nx-text) 10%, var(--nx-surface));
-    color: var(--nx-text);
-    font-size: max(8px, calc(var(--nx-dropdown-media) * 0.4));
-    font-weight: 600;
-    line-height: 1;
-  }
-
-  .nx-dropdown-avatar[data-tone="primary"] {
-    background: var(--nx-primary-soft);
-  }
-
-  .nx-dropdown-avatar[data-tone="info"] {
-    background: var(--nx-info-soft);
-  }
-
-  .nx-dropdown-avatar[data-tone="success"] {
-    background: var(--nx-success-soft);
-  }
-
-  .nx-dropdown-avatar[data-tone="warning"] {
-    background: var(--nx-warning-soft);
-  }
-
-  .nx-dropdown-avatar img {
-    position: absolute;
-    inset: 0;
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
+    --nx-avatar-size: var(--nx-dropdown-media);
   }
 
   /* A flag or a logo: 4:3, with a faint edge so white flags do not melt into the panel. */
@@ -759,16 +713,13 @@
     white-space: nowrap;
   }
 
-  @media (prefers-reduced-motion: reduce) {
-    .nx-dropdown-panel:popover-open,
-    .nx-dropdown-skeleton {
-      animation: none;
-    }
+  [data-nx-motion="reduce"] .nx-dropdown-skeleton {
+    animation: none;
+  }
 
-    .nx-dropdown__toggle .nx-icon,
-    .nx-dropdown-checkbox,
-    .nx-dropdown-checkbox::before {
-      transition: none;
-    }
+  [data-nx-motion="reduce"] .nx-dropdown__toggle .nx-icon,
+  [data-nx-motion="reduce"] .nx-dropdown-checkbox,
+  [data-nx-motion="reduce"] .nx-dropdown-checkbox::before {
+    transition: none;
   }
 }

package/src/Styles/Nexus.Editor.css

@@ -287,11 +287,9 @@
     }
   }
 
-  @media (prefers-reduced-motion: reduce) {
-    .nx-editor__grip,
-    .nx-editor__size,
-    .nx-editor__footer {
-      transition: none;
-    }
+  [data-nx-motion="reduce"] .nx-editor__grip,
+  [data-nx-motion="reduce"] .nx-editor__size,
+  [data-nx-motion="reduce"] .nx-editor__footer {
+    transition: none;
   }
 }

package/src/Styles/Nexus.Excel.css

@@ -67,6 +67,15 @@
     font-size: var(--nx-text-sm);
   }
 
+  /* The picked file's icon, on the line of its name; the line stays text, so "Checking" keeps its space. */
+  .nx-excel__file > .nx-icon {
+    width: 16px;
+    height: 16px;
+    margin-right: 6px;
+    color: var(--nx-text-muted);
+    vertical-align: -3px;
+  }
+
   .nx-excel__muted {
     color: var(--nx-text-muted);
   }
@@ -84,6 +93,11 @@
     font-size: var(--nx-text-sm);
   }
 
+  /* What the new records start as: one short choice, as wide as its words need and no wider. */
+  .nx-excel__status {
+    max-width: 18rem;
+  }
+
   /* A refusal, and what the import could not write: a tint, with the words in the text color so they read on it. */
   .nx-excel__failure,
   .nx-excel__result {
@@ -188,6 +202,15 @@
     transform: rotate(-90deg);
   }
 
+  /* The new rows' line, which does not fold: the same line as a toggle, with nothing to press. */
+  .nx-excel__toggle[data-fixed] {
+    cursor: default;
+  }
+
+  .nx-excel__toggle[data-fixed]:hover {
+    background: none;
+  }
+
   .nx-excel__title {
     flex: none;
     font-weight: 600;
@@ -264,8 +287,7 @@
     color: var(--nx-warning);
   }
 
-  .nx-excel__problems ul,
-  .nx-excel__refused {
+  .nx-excel__problems ul {
     display: grid;
     gap: var(--nx-space-1);
     margin: 0;
@@ -273,17 +295,12 @@
     list-style: none;
   }
 
-  .nx-excel__problems li,
-  .nx-excel__refused li {
+  .nx-excel__problems li {
     display: grid;
     grid-template-columns: minmax(6rem, max-content) 1fr;
     gap: var(--nx-space-1) var(--nx-space-3);
   }
 
-  .nx-excel__refused {
-    font-size: var(--nx-text-xs);
-  }
-
   .nx-excel__place {
     font-weight: 600;
     font-variant-numeric: tabular-nums;
@@ -315,8 +332,7 @@
   }
 
   @media (width < 36rem) {
-    .nx-excel__problems li,
-    .nx-excel__refused li {
+    .nx-excel__problems li {
       grid-template-columns: 1fr;
     }
 
@@ -334,6 +350,11 @@
       padding-left: 24px;
       white-space: normal;
     }
+
+    /* Under the title, where the title starts: a line that does not fold has no chevron to clear. */
+    .nx-excel__toggle[data-fixed] .nx-excel__hint {
+      padding-left: 0;
+    }
   }
 
   /* The sentence about what will be sent, then the buttons. */
@@ -361,10 +382,8 @@
     margin-left: auto;
   }
 
-  @media (prefers-reduced-motion: reduce) {
-    .nx-excel__toggle,
-    .nx-excel__chevron {
-      transition: none;
-    }
+  [data-nx-motion="reduce"] .nx-excel__toggle,
+  [data-nx-motion="reduce"] .nx-excel__chevron {
+    transition: none;
   }
 }

package/src/Styles/Nexus.Form.css

@@ -143,73 +143,6 @@
     margin-block: -4px;
   }
 
-  /* Placeholders while the values load, in the shape of the inputs to come. */
-  .nx-form__skeleton {
-    display: flex;
-    flex-direction: column;
-    gap: 6px;
-  }
-
-  /* A checkbox's placeholder starts where its box would. */
-  .nx-form__skeleton.nx-form__cell--choice {
-    flex-direction: row;
-  }
-
-  .nx-form__skeleton-label,
-  .nx-form__skeleton-box {
-    display: block;
-    border-radius: var(--nx-radius-sm);
-    background: color-mix(in oklab, var(--nx-text) 9%, transparent);
-    animation: nx-form-pulse 1.6s ease-in-out infinite;
-  }
-
-  /* The label's line: 1.3 × the label font, with the text's height as the bar. */
-  .nx-form__skeleton-label {
-    width: min(40%, 10rem);
-    height: 0.85em;
-    margin-block: 0.225em;
-    font-size: var(--nx-text-sm);
-  }
-
-  .nx-form__skeleton-box {
-    height: var(--nx-control-md);
-    border-radius: var(--nx-radius);
-  }
-
-  .nx-form--sm .nx-form__skeleton-box {
-    height: var(--nx-control-sm);
-  }
-
-  .nx-form--lg .nx-form__skeleton-box {
-    height: var(--nx-control-lg);
-  }
-
-  .nx-form__skeleton-box--tall,
-  .nx-form--sm .nx-form__skeleton-box--tall,
-  .nx-form--lg .nx-form__skeleton-box--tall {
-    height: calc(var(--nx-control-md) * 2.75);
-  }
-
-  .nx-form__skeleton-box--choice,
-  .nx-form--sm .nx-form__skeleton-box--choice,
-  .nx-form--lg .nx-form__skeleton-box--choice {
-    width: min(60%, 12rem);
-    height: 1.1em;
-  }
-
-  @keyframes nx-form-pulse {
-    50% {
-      opacity: 0.45;
-    }
-  }
-
-  @media (prefers-reduced-motion: reduce) {
-    .nx-form__skeleton-label,
-    .nx-form__skeleton-box {
-      animation: none;
-    }
-  }
-
   /* SubmitForm */
   .nx-submit-form {
     display: flex;
@@ -237,12 +170,24 @@
     margin-left: auto;
   }
 
+  /* `block`: the buttons share the bar's whole width, as a sign-in's one button fills its card. */
+  .nx-form-buttons--block .nx-form-buttons__actions {
+    width: 100%;
+    margin-left: 0;
+  }
+
+  .nx-form-buttons--block .nx-form-buttons__actions > .nx-btn {
+    flex: 1;
+  }
+
+  /* One line kept even when empty: "Loading…", "Saving…" and "Unsaved changes" come and go, and the bar never jumps. */
   .nx-form-status {
     display: flex;
     flex: 1 1 14rem;
     align-items: flex-start;
     gap: 6px;
     min-width: 0;
+    min-height: 1lh;
     margin: 0;
     color: var(--nx-text-muted);
     font-size: var(--nx-text-sm);
@@ -265,6 +210,19 @@
     color: var(--nx-success);
   }
 
+  /*
+   * An `errors` line has nothing to say until something goes wrong, so it keeps no room until then. It is clipped,
+   * not removed: a live region has to be there before its words arrive for a screen reader to read them.
+   */
+  .nx-form-status--errors:empty {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    min-height: 0;
+    overflow: hidden;
+    clip-path: inset(50%);
+  }
+
   /* An input's name in the status line: a link-like button that goes to it. */
   .nx-form-status__jump {
     padding: 0;

package/src/Styles/Nexus.Index.css

@@ -11,6 +11,7 @@
 @import "./Nexus.Tokens.css";
 @import "./Nexus.Themes.css";
 @import "./Nexus.Base.css";
+@import "./Nexus.Avatar.css";
 @import "./Nexus.Button.css";
 @import "./Nexus.Calendar.css";
 @import "./Nexus.Chat.css";