nexus-shared 3.1.0 → 4.0.0

package/src/Styles/Nexus.Input.css

@@ -139,11 +139,36 @@
     font-variant-numeric: tabular-nums;
   }
 
+  /*
+   * A value worked out from other inputs (a form's `compute`): an <output> where an input would be, its text placed as an
+   * input's is (in the middle of the box, low in an inbox one) and in the text colour, a long one cut with an ellipsis.
+   * Never typed in, so no I-beam; the read-only tint around it comes from the field.
+   */
+  .nx-field__control--output {
+    display: flex;
+    align-items: center;
+    overflow: hidden;
+    white-space: nowrap;
+    cursor: default;
+  }
+
+  .nx-field__output-text {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
   .nx-field__control::placeholder {
     color: var(--nx-text-subtle);
     opacity: 1;
   }
 
+  /* A read-only field's placeholder is all it shows ("None"), so it reads as text: --nx-text-subtle is under 3:1 on the
+     read-only box in light themes, muted text at least 4.5:1. */
+  .nx-field[data-readonly] .nx-field__control::placeholder {
+    color: var(--nx-text-muted);
+  }
+
   /* Browser extras that the field replaces with its own buttons. */
   .nx-field__control::-webkit-search-cancel-button,
   .nx-field__control::-webkit-search-decoration {
@@ -338,6 +363,12 @@
     animation: nx-field-nudge 320ms ease-in-out;
   }
 
+  /* A box pointed at with the same nudge: the one thing to set first, when the cursor is sent to it (a CRUD's Add pressed
+     while its narrowing box has nothing picked). */
+  .nx-field__box[data-nudge] {
+    animation: nx-field-nudge 320ms ease-in-out;
+  }
+
   @keyframes nx-field-nudge {
     20%,
     60% {
@@ -466,14 +497,51 @@
     top: calc(var(--nx-field-pad-y) + var(--nx-field-font) * 0.7);
   }
 
-  /* Outlined: the raised label sits on the top border. Its backing covers only the lower half, so it blends with any panel. */
+  /*
+   * Outlined: the raised label sits on the top border, centred on its inner edge, and opens a gap in it: behind the
+   * label the field's colour runs from the box's top edge down, and never above it, where it shows on any panel whose
+   * colour is not the field's (a read-only box, a dark popover). No CSS length finds that edge at every scale: a 1px
+   * border is one device pixel thick at 125% and two at 200%. So the backing is placed by the same length the label is
+   * lifted by (half its 1.2 line height: the two cancel, and it starts on the border's inner edge), and its 1px outline
+   * covers the border, because the browser snaps an outline exactly as it snaps a border. The label's overflow keeps
+   * the outline's sides and foot inside it. A gradient on the label instead was half a pixel off at most scales from 67%
+   * to 300%: the field's colour a row above the box, or a hairline of border through the gap.
+   */
   .nx-field--outlined:is([data-raised], :focus-within, :has(.nx-field__control:not(:placeholder-shown))) .nx-field__label {
-    top: 0;
+    top: -0.6em;
     left: calc(var(--nx-field-pad-x) - 4px);
     padding: 0 4px;
-    background: linear-gradient(to bottom, transparent calc(50% - 1px), var(--nx-field-bg) calc(50% - 1px));
     font-size: var(--nx-text-xs);
     font-weight: 500;
+    transform: none;
+  }
+
+  .nx-field--outlined:is([data-raised], :focus-within, :has(.nx-field__control:not(:placeholder-shown))) .nx-field__label::before {
+    content: "";
+    position: absolute;
+    z-index: -1;
+    inset: 0.6em 0 0;
+    outline: 1px solid var(--nx-field-bg);
+    background: var(--nx-field-bg);
+  }
+
+  /* Forced colours would paint that outline in the text's colour; the browser's backplate behind the text opens the gap. */
+  @media (forced-colors: active) {
+    .nx-field--outlined .nx-field__label::before {
+      display: none;
+    }
+  }
+
+  /*
+   * Outlined, with focus: the border thickens to 2px instead of taking the ring. A ring lies outside the box, past the
+   * label's backing, so it ran on behind the label; this edge lies on the border and a pixel inside it, where the
+   * backing opens the same gap in it. One 2px outline over the border, not a second pixel beside it, which showed a
+   * seam at 150%; and an outline, so it is drawn over the control (an autofilled one is opaque) and under the label.
+   */
+  .nx-field--outlined:not([data-readonly], [data-disabled]) .nx-field__box:focus-within {
+    outline: 2px solid var(--nx-field-accent);
+    outline-offset: -2px;
+    box-shadow: var(--nx-shadow-sm);
   }
 
   /* Inbox: a taller box with the raised label inside its top edge. */
@@ -540,6 +608,16 @@
     resize: vertical;
   }
 
+  /* Code (`TextArea code`): the editor's monospace, lines kept as typed, a long one scrolled sideways in the box. */
+  .nx-field--multiline .nx-field__control--code {
+    overflow-x: auto;
+    font-family: var(--nx-font-mono);
+    font-size: calc(var(--nx-field-font) - 0.5px);
+    white-space: pre;
+    overflow-wrap: normal;
+    tab-size: 2;
+  }
+
   /* Buttons and the read-only lock sit at the top end, centered on the first line (line height 1.4). */
   .nx-field--multiline .nx-field__actions {
     align-items: flex-start;
@@ -590,12 +668,168 @@
     }
   }
 
+  /*
+   * Code box: a box per character, drawn from one input that lies over them unseen. The boxes wear the field's own
+   * variables, so sizes, states, densities, and themes come with them; the field's single frame steps aside.
+   */
+  .nx-field--code .nx-field__box,
+  .nx-field--code .nx-field__box:focus-within {
+    min-height: 0;
+    border: 0;
+    background: none;
+    box-shadow: none;
+  }
+
+  .nx-code {
+    position: relative;
+    display: flex;
+    min-width: 0;
+  }
+
+  .nx-code[data-block] {
+    flex: 1 1 auto;
+  }
+
+  /* On a phone the gaps and the characters scale with the screen, so an SSN's nine boxes fit a 390px screen. */
+  .nx-code__slots,
+  .nx-code__group {
+    display: flex;
+    align-items: center;
+    gap: min(var(--nx-space-2), 1.2vw);
+    min-width: 0;
+  }
+
+  .nx-code[data-block] :is(.nx-code__slots, .nx-code__group) {
+    flex: 1 1 auto;
+  }
+
+  .nx-code__separator {
+    flex: none;
+    color: var(--nx-text-muted);
+    font-size: var(--nx-field-font);
+  }
+
+  /*
+   * A box is a little taller than the field's line and about as wide; its character is larger than the field's text.
+   * Boxes shrink alike rather than spill out of their field: a code too long for its room is cramped, never cut off.
+   */
+  .nx-code__slot {
+    position: relative;
+    display: grid;
+    flex: 0 1 calc(var(--nx-field-height) + var(--nx-space-1));
+    place-items: center;
+    min-width: 0;
+    height: calc(var(--nx-field-height) + var(--nx-space-3));
+    border: 1px solid var(--nx-field-border);
+    border-radius: var(--nx-radius);
+    background: var(--nx-field-bg);
+    box-shadow: var(--nx-shadow-sm);
+    color: var(--nx-text);
+    font-size: min(calc(var(--nx-field-font) * 1.4), 5vw);
+    font-variant-numeric: tabular-nums;
+    font-weight: 600;
+    line-height: 1;
+    transition:
+      border-color var(--nx-duration),
+      box-shadow var(--nx-duration),
+      background-color var(--nx-duration);
+  }
+
+  /*
+   * Without `block` the rows around the boxes are as wide as their content, and Chromium counts each box's width there,
+   * not its flex-basis: with a basis alone an empty box was its 2px border and a filled one its character. A width
+   * gives each box its size; `min-width: 0` still lets them shrink alike on a narrow screen.
+   */
+  .nx-code:not([data-block]) .nx-code__slot {
+    width: calc(var(--nx-field-height) + var(--nx-space-1));
+  }
+
+  .nx-code[data-block] .nx-code__slot {
+    flex: 1 1 0;
+  }
+
+  .nx-code:hover .nx-code__slot {
+    border-color: var(--nx-field-border-hover);
+  }
+
+  .nx-code__slot[data-active] {
+    border-color: var(--nx-field-accent);
+    box-shadow: var(--nx-field-ring);
+  }
+
+  .nx-code__slot[data-selected] {
+    background: color-mix(in oklab, var(--nx-field-accent) 14%, var(--nx-field-bg));
+  }
+
+  .nx-code__slot:empty::before {
+    content: attr(data-placeholder);
+    color: var(--nx-text-subtle);
+    font-weight: 400;
+  }
+
+  /* The caret in an empty box, blinking as a text caret does. */
+  .nx-code__slot[data-caret]::after {
+    content: "";
+    position: absolute;
+    width: 2px;
+    height: 45%;
+    border-radius: 1px;
+    background: var(--nx-text);
+    animation: nx-code-caret 1s step-end infinite;
+  }
+
+  @keyframes nx-code-caret {
+    50% {
+      opacity: 0;
+    }
+  }
+
+  .nx-field:is([data-readonly], [data-disabled]) .nx-code__slot {
+    box-shadow: none;
+  }
+
+  /* The input that holds the code lies over the boxes, never seen. At 16px a phone does not zoom in on focus. */
+  .nx-code__input {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    margin: 0;
+    padding: 0;
+    border: 0;
+    outline: none;
+    background: transparent;
+    color: transparent;
+    caret-color: transparent;
+    font-size: 16px;
+    cursor: text;
+  }
+
+  .nx-code__input::selection {
+    background: transparent;
+  }
+
+  /* An offered code fills the input without its yellow: the boxes show it. */
+  .nx-code__input:is(:autofill, :-webkit-autofill) {
+    -webkit-text-fill-color: transparent;
+    transition: background-color 600000s;
+  }
+
+  .nx-code__input:disabled {
+    cursor: not-allowed;
+  }
+
   [data-nx-motion="reduce"] .nx-field__label,
-  [data-nx-motion="reduce"] .nx-field--inbox :is(.nx-field__icon, .nx-field__affix, .nx-field__actions) {
+  [data-nx-motion="reduce"] .nx-field--inbox :is(.nx-field__icon, .nx-field__affix, .nx-field__actions),
+  [data-nx-motion="reduce"] .nx-code__slot {
     transition: none;
   }
 
+  [data-nx-motion="reduce"] .nx-code__slot[data-caret]::after {
+    animation: none;
+  }
+
   [data-nx-motion="reduce"] .nx-field__lock[data-nudge],
+  [data-nx-motion="reduce"] .nx-field__box[data-nudge],
   [data-nx-motion="reduce"] .nx-field-notice:popover-open {
     animation: none;
   }