nexus-shared 3.0.0 → 3.2.0

package/src/Styles/Nexus.Markdown.css

@@ -54,34 +54,6 @@
     }
   }
 
-  /* The preview's thin scrollbar, as the text area's (Nexus.Input.css). */
-  .nx-md__preview::-webkit-scrollbar {
-    width: 8px;
-    height: 8px;
-  }
-
-  .nx-md__preview::-webkit-scrollbar-track,
-  .nx-md__preview::-webkit-scrollbar-corner {
-    background: transparent;
-  }
-
-  .nx-md__preview::-webkit-scrollbar-thumb {
-    border: 2px solid transparent;
-    border-radius: var(--nx-radius-full);
-    background: var(--nx-field-scrollbar) padding-box;
-  }
-
-  .nx-md__preview::-webkit-scrollbar-thumb:hover {
-    background-color: var(--nx-field-scrollbar-hover);
-  }
-
-  @supports not selector(::-webkit-scrollbar) {
-    .nx-md__preview {
-      scrollbar-width: thin;
-      scrollbar-color: var(--nx-field-scrollbar) transparent;
-    }
-  }
-
   /*
    * Markdown content (MarkdownView), in the editor's preview and anywhere else. Sizes are in em, so the text follows
    * the size of the element it sits in.

package/src/Styles/Nexus.Menu.css

@@ -5,49 +5,31 @@
    * because focus follows the pointer.
    */
   .nx-menu {
-    --nx-menu-item-height: 32px;
+    --nx-menu-item-height: var(--nx-row);
     --nx-menu-font: var(--nx-text-md);
     --nx-menu-pad-x: var(--nx-space-2);
+    --nx-popover-pad: 4px;
 
     position: fixed;
     inset: auto;
     min-width: 180px;
     max-width: min(360px, calc(100% - 16px));
-    max-height: calc(100vh - 16px);
-    padding: 4px;
     outline: none;
   }
 
-  .nx-menu:popover-open {
-    display: flex;
-    flex-direction: column;
-    animation: nx-menu-in 120ms ease-out;
-  }
-
-  /* The items scroll, not the panel: a panel that scrolls its own box would cut its arrow off. A block inside the
-     panel's column, so a long menu scrolls instead of squeezing its items the way flex children would. */
+  /* The items scroll inside the panel (`.nx-popover__scroll`): a block, so a long menu scrolls instead of squeezing
+     its items the way flex children would. */
   .nx-menu__list {
     display: block;
-    flex: 1 1 auto;
-    min-height: 0;
-    overflow: hidden auto;
-    overscroll-behavior: contain;
-  }
-
-  @keyframes nx-menu-in {
-    from {
-      opacity: 0;
-      transform: translateY(-4px);
-    }
   }
 
   .nx-menu--sm {
-    --nx-menu-item-height: 28px;
+    --nx-menu-item-height: calc(var(--nx-row) - 4px);
     --nx-menu-font: var(--nx-text-sm);
   }
 
   .nx-menu--lg {
-    --nx-menu-item-height: 38px;
+    --nx-menu-item-height: calc(var(--nx-row) + 6px);
     --nx-menu-font: var(--nx-text-lg);
     --nx-menu-pad-x: 10px;
   }
@@ -249,11 +231,7 @@
     min-width: 240px;
   }
 
-  @media (prefers-reduced-motion: reduce) {
-    .nx-menu:popover-open,
-    .nx-split .nx-split__toggle .nx-icon {
-      animation: none;
-      transition: none;
-    }
+  [data-nx-motion="reduce"] .nx-split .nx-split__toggle .nx-icon {
+    transition: none;
   }
 }

package/src/Styles/Nexus.Popup.css

@@ -23,48 +23,38 @@
     translate: var(--nx-popup-x, 0px) var(--nx-popup-y, 0px);
   }
 
+  /*
+   * Opening and closing are a plain fade, the popup and its backdrop together: it appears where it stays, at the size
+   * it keeps, so nothing in it moves while it fades. Closing waits for its fade (`afterAnimation`), and takes no clicks
+   * meanwhile, so a double-click on Save does not submit twice; with animations off there is no fade to wait for.
+   */
   .nx-popup[open] {
     display: flex;
     flex-direction: column;
-    animation: nx-popup-in 180ms cubic-bezier(0.2, 0, 0, 1);
+    animation: nx-popup-in 160ms ease-out;
   }
 
   .nx-popup::backdrop {
     background: rgb(0 0 0 / 0.5);
-    animation: nx-popup-fade-in 180ms ease-out;
+    animation: nx-popup-in 160ms ease-out;
   }
 
-  /* A closing popup takes no more clicks, so a double-click on Save does not submit twice. */
   .nx-popup--closing[open] {
-    animation: nx-popup-out 140ms ease-in forwards;
+    animation: nx-popup-out 120ms ease-in forwards;
     pointer-events: none;
   }
 
   .nx-popup--closing::backdrop {
-    animation: nx-popup-fade-out 140ms ease-in forwards;
+    animation: nx-popup-out 120ms ease-in forwards;
   }
 
   @keyframes nx-popup-in {
     from {
       opacity: 0;
-      transform: translateY(10px) scale(0.98);
     }
   }
 
   @keyframes nx-popup-out {
-    to {
-      opacity: 0;
-      transform: translateY(6px) scale(0.98);
-    }
-  }
-
-  @keyframes nx-popup-fade-in {
-    from {
-      opacity: 0;
-    }
-  }
-
-  @keyframes nx-popup-fade-out {
     to {
       opacity: 0;
     }
@@ -116,7 +106,7 @@
   }
 
   .nx-popup[data-nx-minimizing]::backdrop {
-    animation: nx-popup-fade-out 200ms ease-in forwards;
+    animation: nx-popup-out 200ms ease-in forwards;
   }
 
   /* Header, either design: the title bar moves the popup, so it selects no text and a touch drags instead of scrolling. */
@@ -394,6 +384,11 @@
     border-top: 1px solid var(--nx-border);
   }
 
+  /* A form's bar fills the foot, so its status line sits beside the buttons instead of on a row of its own. */
+  .nx-popup__foot > .nx-form-buttons {
+    flex: 1 1 auto;
+  }
+
   /* Message boxes: a small popup whose icon carries the tone. */
   .nx-popup--message .nx-popup__body {
     padding-top: var(--nx-space-2);
@@ -718,14 +713,12 @@
     }
   }
 
-  @media (prefers-reduced-motion: reduce) {
-    .nx-popup[open],
-    .nx-popup--closing[open],
-    .nx-popup::backdrop,
-    .nx-popup--closing::backdrop,
-    .nx-popup[data-nx-minimizing]::backdrop,
-    .nx-dock__item {
-      animation: none;
-    }
+  [data-nx-motion="reduce"] .nx-popup[open],
+  [data-nx-motion="reduce"] .nx-popup--closing[open],
+  [data-nx-motion="reduce"] .nx-popup::backdrop,
+  [data-nx-motion="reduce"] .nx-popup--closing::backdrop,
+  [data-nx-motion="reduce"] .nx-popup[data-nx-minimizing]::backdrop,
+  [data-nx-motion="reduce"] .nx-dock__item {
+    animation: none;
   }
 }

package/src/Styles/Nexus.RichText.css

@@ -287,34 +287,6 @@
     resize: none;
   }
 
-  /* The text's thin scrollbar, as the text area's (Nexus.Input.css). */
-  .nx-rte__content::-webkit-scrollbar {
-    width: 8px;
-    height: 8px;
-  }
-
-  .nx-rte__content::-webkit-scrollbar-track,
-  .nx-rte__content::-webkit-scrollbar-corner {
-    background: transparent;
-  }
-
-  .nx-rte__content::-webkit-scrollbar-thumb {
-    border: 2px solid transparent;
-    border-radius: var(--nx-radius-full);
-    background: var(--nx-field-scrollbar) padding-box;
-  }
-
-  .nx-rte__content::-webkit-scrollbar-thumb:hover {
-    background-color: var(--nx-field-scrollbar-hover);
-  }
-
-  @supports not selector(::-webkit-scrollbar) {
-    .nx-rte__content {
-      scrollbar-width: thin;
-      scrollbar-color: var(--nx-field-scrollbar) transparent;
-    }
-  }
-
   /* Tokens: values a template fills in, edited as one piece. */
   .nx-rte__token {
     padding: 0.05em 0.45em;
@@ -455,9 +427,7 @@
     flex: 1 1 auto;
   }
 
-  @media (prefers-reduced-motion: reduce) {
-    .nx-rte-colors__swatch {
-      transition: none;
-    }
+  [data-nx-motion="reduce"] .nx-rte-colors__swatch {
+    transition: none;
   }
 }

package/src/Styles/Nexus.Rows.css

@@ -95,8 +95,6 @@
     outline: none;
     /* A focused cell scrolls clear of the header and the fixed columns. */
     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);
   }
 
@@ -351,16 +349,61 @@
     height: 15px;
   }
 
-  .nx-tabular__num-button:is(:hover, :focus-visible, [aria-expanded="true"]) {
+  .nx-tabular__num-button:not(:disabled):is(:hover, :focus-visible, [aria-expanded="true"]) {
     background: var(--nx-surface-hover);
     color: var(--nx-text);
   }
 
+  .nx-tabular__num-button[data-tone="danger"]:not(:disabled):is(:hover, :focus-visible) {
+    color: var(--nx-danger);
+  }
+
+  /* A locked row's lock is drawn in the text colour, so the locked rows can be told apart down the column. */
+  .nx-tabular__num-button[aria-pressed="true"] {
+    color: var(--nx-text);
+  }
+
+  .nx-tabular__num-button:disabled {
+    cursor: default;
+    opacity: 0.4;
+  }
+
   .nx-tabular__num-button:focus-visible {
     outline: 2px solid var(--nx-primary);
     outline-offset: -2px;
   }
 
+  /* With the actions at the end, the number column is the number alone. */
+  .nx-tabular[data-actions-at="end"] .nx-tabular__num {
+    grid-template-columns: minmax(0, 1fr);
+    padding-right: 10px;
+  }
+
+  /*
+   * The row's actions at its end (`actionsAt="end"`), as a data table has them: fixed at the right edge while the
+   * columns scroll, each action its own small button, every one always in its place.
+   */
+  .nx-tabular__actions {
+    position: sticky;
+    right: 0;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 2px;
+    padding-inline: 4px;
+    border-left: 1px solid var(--nx-tabular-line);
+    background: inherit;
+  }
+
+  /*
+   * The line under the table keeps its height in a tabular form, said or not: it holds the hint or the message of the
+   * input with focus, and a line that came and went with the focus made the whole panel jump on every click.
+   */
+  .nx-tabular > .nx-rows__footer {
+    min-height: calc(var(--nx-text-xs) * 1.35);
+  }
+
   /* A row with a problem, after a check: a red edge at its start, and a red number. */
   .nx-tabular__row[data-problem] > .nx-tabular__num {
     box-shadow: inset 3px 0 0 var(--nx-danger);
@@ -585,12 +628,10 @@
     text-align: center;
   }
 
-  @media (prefers-reduced-motion: reduce) {
-    .nx-tabular__viewport,
-    .nx-tabular__num-button,
-    .nx-group-form__toggle,
-    .nx-group-form__chevron {
-      transition: none;
-    }
+  [data-nx-motion="reduce"] .nx-tabular__viewport,
+  [data-nx-motion="reduce"] .nx-tabular__num-button,
+  [data-nx-motion="reduce"] .nx-group-form__toggle,
+  [data-nx-motion="reduce"] .nx-group-form__chevron {
+    transition: none;
   }
 }

package/src/Styles/Nexus.Slider.css

@@ -269,10 +269,8 @@
     cursor: default;
   }
 
-  @media (prefers-reduced-motion: reduce) {
-    .nx-slider__tooltip,
-    .nx-slider__input::-webkit-slider-thumb {
-      transition: none;
-    }
+  [data-nx-motion="reduce"] .nx-slider__tooltip,
+  [data-nx-motion="reduce"] .nx-slider__input::-webkit-slider-thumb {
+    transition: none;
   }
 }

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

@@ -212,6 +212,21 @@
     grid-template-columns: 1fr;
   }
 
+  /*
+   * `auto`: in a container wide enough for them, every option says what it is, as the chosen one does. 900px is a data
+   * table's bar with its Add, four lists, Reload, ⋮ and a full search on one line, and room to spare.
+   */
+  @container (min-width: 900px) {
+    .nx-tabs--labels-auto .nx-tabs__option {
+      padding: 0 var(--nx-space-3);
+    }
+
+    .nx-tabs--labels-auto .nx-tabs__label {
+      grid-template-columns: 1fr;
+      margin-inline-start: 6px;
+    }
+  }
+
   .nx-tabs--labels-selected .nx-tabs__text {
     min-width: 0;
     overflow: hidden;
@@ -408,12 +423,10 @@
     --nx-tabs-list-gap: 12px;
   }
 
-  @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;
-    }
+  [data-nx-motion="reduce"] .nx-tabs__indicator,
+  [data-nx-motion="reduce"] .nx-tabs--multiple .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;
   }
 }