nexus-shared 3.1.0 → 3.2.0

package/src/Styles/Nexus.Input.css

@@ -466,14 +466,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. */
@@ -590,11 +627,166 @@
     }
   }
 
+  /*
+   * 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-notice:popover-open {
     animation: none;

package/src/Styles/Nexus.Markdown.css

@@ -1,237 +1,237 @@
-@layer nexus.components {
-  /*
-   * Markdown editor: the text and its preview inside the editor frame (Nexus.Editor.css), which brings the bar, the
-   * height handle, and full screen.
-   */
-  .nx-md .nx-editor__body[data-mode="split"] {
-    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
-  }
-
-  .nx-md .nx-editor__body[data-mode="preview"] .nx-md__input {
-    display: none;
-  }
-
-  .nx-md .nx-md__input {
-    height: 100%;
-    min-height: 0;
-    padding: 10px var(--nx-space-3);
-    border-radius: 0;
-    line-height: 1.6;
-    resize: none;
-  }
-
-  .nx-md--mono .nx-md__input {
-    font-family: var(--nx-font-mono);
-    font-size: calc(var(--nx-field-font) - 0.5px);
-  }
-
-  .nx-md__preview {
-    min-width: 0;
-    min-height: 0;
-    padding: 10px var(--nx-space-4);
-    overflow: auto;
-    overscroll-behavior: contain;
-  }
-
-  .nx-md .nx-editor__body[data-mode="split"] .nx-md__preview {
-    border-left: 1px solid var(--nx-border);
-  }
-
-  .nx-md__preview:focus-visible {
-    outline: 2px solid var(--nx-primary);
-    outline-offset: -2px;
-  }
-
-  @container nx-editor (width < 560px) {
-    .nx-md .nx-editor__body[data-mode="split"] {
-      grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
-      grid-template-columns: minmax(0, 1fr);
-    }
-
-    .nx-md .nx-editor__body[data-mode="split"] .nx-md__preview {
-      border-top: 1px solid var(--nx-border);
-      border-left: 0;
-    }
-  }
-
-  /*
-   * 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.
-   */
-  .nx-markdown {
-    color: var(--nx-text);
-    font-size: var(--nx-text-md);
-    line-height: 1.65;
-    overflow-wrap: break-word;
-  }
-
-  .nx-markdown > :first-child {
-    margin-top: 0;
-  }
-
-  .nx-markdown > :last-child {
-    margin-bottom: 0;
-  }
-
-  .nx-markdown :is(p, ul, ol, blockquote, pre, hr, .nx-markdown__table) {
-    margin: 0 0 0.9em;
-  }
-
-  .nx-markdown :is(h1, h2, h3, h4, h5, h6) {
-    margin: 1.4em 0 0.55em;
-    font-weight: 650;
-    line-height: 1.3;
-    letter-spacing: -0.01em;
-  }
-
-  .nx-markdown :is(h1, h2) {
-    padding-bottom: 0.3em;
-    border-bottom: 1px solid var(--nx-border);
-  }
-
-  .nx-markdown h1 {
-    font-size: 1.6em;
-  }
-
-  .nx-markdown h2 {
-    font-size: 1.3em;
-  }
-
-  .nx-markdown h3 {
-    font-size: 1.12em;
-  }
-
-  .nx-markdown h4 {
-    font-size: 1em;
-  }
-
-  .nx-markdown h5 {
-    font-size: 0.9em;
-  }
-
-  .nx-markdown h6 {
-    color: var(--nx-text-muted);
-    font-size: 0.85em;
-  }
-
-  .nx-markdown a {
-    color: var(--nx-primary);
-    text-decoration: underline;
-    text-decoration-color: color-mix(in oklab, currentColor 40%, transparent);
-    text-underline-offset: 0.18em;
-  }
-
-  .nx-markdown a:hover {
-    text-decoration-color: currentColor;
-  }
-
-  .nx-markdown :is(ul, ol) {
-    padding-left: 1.6em;
-  }
-
-  .nx-markdown li + li {
-    margin-top: 0.25em;
-  }
-
-  .nx-markdown li > :is(ul, ol) {
-    margin: 0.25em 0 0;
-  }
-
-  .nx-markdown li > p {
-    margin-bottom: 0.5em;
-  }
-
-  /* Tasks: the box sits where the bullet would. */
-  .nx-markdown__task {
-    position: relative;
-    list-style: none;
-  }
-
-  .nx-markdown__task > input {
-    position: absolute;
-    top: 0.32em;
-    left: -1.45em;
-    width: 1em;
-    height: 1em;
-    margin: 0;
-    accent-color: var(--nx-primary-solid);
-  }
-
-  .nx-markdown__task > input:enabled {
-    cursor: pointer;
-  }
-
-  .nx-markdown blockquote {
-    padding: 0 0 0 1em;
-    border-left: 3px solid var(--nx-border-strong);
-    color: var(--nx-text-muted);
-  }
-
-  .nx-markdown code {
-    padding: 0.12em 0.38em;
-    border-radius: var(--nx-radius-sm);
-    background: color-mix(in oklab, var(--nx-text) 8%, transparent);
-    font-family: var(--nx-font-mono);
-    font-size: 0.875em;
-  }
-
-  .nx-markdown pre {
-    overflow: auto;
-    padding: 0.8em 1em;
-    border-radius: var(--nx-radius);
-    background: color-mix(in oklab, var(--nx-text) 5%, transparent);
-    line-height: 1.5;
-  }
-
-  .nx-markdown pre code {
-    padding: 0;
-    background: none;
-    font-size: 0.86em;
-    white-space: pre;
-  }
-
-  .nx-markdown hr {
-    height: 0;
-    margin-block: 1.4em;
-    border: 0;
-    border-top: 1px solid var(--nx-border-strong);
-  }
-
-  .nx-markdown img {
-    max-width: 100%;
-    height: auto;
-    border-radius: var(--nx-radius-sm);
-    vertical-align: middle;
-  }
-
-  .nx-markdown del {
-    color: var(--nx-text-muted);
-  }
-
-  .nx-markdown__table {
-    max-width: 100%;
-    overflow-x: auto;
-  }
-
-  .nx-markdown table {
-    border-collapse: collapse;
-    font-size: 0.95em;
-  }
-
-  .nx-markdown :is(th, td) {
-    padding: 0.4em 0.8em;
-    border: 1px solid var(--nx-border);
-    text-align: left;
-    vertical-align: top;
-  }
-
-  .nx-markdown th {
-    background: color-mix(in oklab, var(--nx-text) 4%, transparent);
-    font-weight: 600;
-  }
-
-  .nx-markdown__empty {
-    color: var(--nx-text-muted);
-    font-style: italic;
-  }
-}
+@layer nexus.components {
+  /*
+   * Markdown editor: the text and its preview inside the editor frame (Nexus.Editor.css), which brings the bar, the
+   * height handle, and full screen.
+   */
+  .nx-md .nx-editor__body[data-mode="split"] {
+    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+  }
+
+  .nx-md .nx-editor__body[data-mode="preview"] .nx-md__input {
+    display: none;
+  }
+
+  .nx-md .nx-md__input {
+    height: 100%;
+    min-height: 0;
+    padding: 10px var(--nx-space-3);
+    border-radius: 0;
+    line-height: 1.6;
+    resize: none;
+  }
+
+  .nx-md--mono .nx-md__input {
+    font-family: var(--nx-font-mono);
+    font-size: calc(var(--nx-field-font) - 0.5px);
+  }
+
+  .nx-md__preview {
+    min-width: 0;
+    min-height: 0;
+    padding: 10px var(--nx-space-4);
+    overflow: auto;
+    overscroll-behavior: contain;
+  }
+
+  .nx-md .nx-editor__body[data-mode="split"] .nx-md__preview {
+    border-left: 1px solid var(--nx-border);
+  }
+
+  .nx-md__preview:focus-visible {
+    outline: 2px solid var(--nx-primary);
+    outline-offset: -2px;
+  }
+
+  @container nx-editor (width < 560px) {
+    .nx-md .nx-editor__body[data-mode="split"] {
+      grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
+      grid-template-columns: minmax(0, 1fr);
+    }
+
+    .nx-md .nx-editor__body[data-mode="split"] .nx-md__preview {
+      border-top: 1px solid var(--nx-border);
+      border-left: 0;
+    }
+  }
+
+  /*
+   * 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.
+   */
+  .nx-markdown {
+    color: var(--nx-text);
+    font-size: var(--nx-text-md);
+    line-height: 1.65;
+    overflow-wrap: break-word;
+  }
+
+  .nx-markdown > :first-child {
+    margin-top: 0;
+  }
+
+  .nx-markdown > :last-child {
+    margin-bottom: 0;
+  }
+
+  .nx-markdown :is(p, ul, ol, blockquote, pre, hr, .nx-markdown__table) {
+    margin: 0 0 0.9em;
+  }
+
+  .nx-markdown :is(h1, h2, h3, h4, h5, h6) {
+    margin: 1.4em 0 0.55em;
+    font-weight: 650;
+    line-height: 1.3;
+    letter-spacing: -0.01em;
+  }
+
+  .nx-markdown :is(h1, h2) {
+    padding-bottom: 0.3em;
+    border-bottom: 1px solid var(--nx-border);
+  }
+
+  .nx-markdown h1 {
+    font-size: 1.6em;
+  }
+
+  .nx-markdown h2 {
+    font-size: 1.3em;
+  }
+
+  .nx-markdown h3 {
+    font-size: 1.12em;
+  }
+
+  .nx-markdown h4 {
+    font-size: 1em;
+  }
+
+  .nx-markdown h5 {
+    font-size: 0.9em;
+  }
+
+  .nx-markdown h6 {
+    color: var(--nx-text-muted);
+    font-size: 0.85em;
+  }
+
+  .nx-markdown a {
+    color: var(--nx-primary);
+    text-decoration: underline;
+    text-decoration-color: color-mix(in oklab, currentColor 40%, transparent);
+    text-underline-offset: 0.18em;
+  }
+
+  .nx-markdown a:hover {
+    text-decoration-color: currentColor;
+  }
+
+  .nx-markdown :is(ul, ol) {
+    padding-left: 1.6em;
+  }
+
+  .nx-markdown li + li {
+    margin-top: 0.25em;
+  }
+
+  .nx-markdown li > :is(ul, ol) {
+    margin: 0.25em 0 0;
+  }
+
+  .nx-markdown li > p {
+    margin-bottom: 0.5em;
+  }
+
+  /* Tasks: the box sits where the bullet would. */
+  .nx-markdown__task {
+    position: relative;
+    list-style: none;
+  }
+
+  .nx-markdown__task > input {
+    position: absolute;
+    top: 0.32em;
+    left: -1.45em;
+    width: 1em;
+    height: 1em;
+    margin: 0;
+    accent-color: var(--nx-primary-solid);
+  }
+
+  .nx-markdown__task > input:enabled {
+    cursor: pointer;
+  }
+
+  .nx-markdown blockquote {
+    padding: 0 0 0 1em;
+    border-left: 3px solid var(--nx-border-strong);
+    color: var(--nx-text-muted);
+  }
+
+  .nx-markdown code {
+    padding: 0.12em 0.38em;
+    border-radius: var(--nx-radius-sm);
+    background: color-mix(in oklab, var(--nx-text) 8%, transparent);
+    font-family: var(--nx-font-mono);
+    font-size: 0.875em;
+  }
+
+  .nx-markdown pre {
+    overflow: auto;
+    padding: 0.8em 1em;
+    border-radius: var(--nx-radius);
+    background: color-mix(in oklab, var(--nx-text) 5%, transparent);
+    line-height: 1.5;
+  }
+
+  .nx-markdown pre code {
+    padding: 0;
+    background: none;
+    font-size: 0.86em;
+    white-space: pre;
+  }
+
+  .nx-markdown hr {
+    height: 0;
+    margin-block: 1.4em;
+    border: 0;
+    border-top: 1px solid var(--nx-border-strong);
+  }
+
+  .nx-markdown img {
+    max-width: 100%;
+    height: auto;
+    border-radius: var(--nx-radius-sm);
+    vertical-align: middle;
+  }
+
+  .nx-markdown del {
+    color: var(--nx-text-muted);
+  }
+
+  .nx-markdown__table {
+    max-width: 100%;
+    overflow-x: auto;
+  }
+
+  .nx-markdown table {
+    border-collapse: collapse;
+    font-size: 0.95em;
+  }
+
+  .nx-markdown :is(th, td) {
+    padding: 0.4em 0.8em;
+    border: 1px solid var(--nx-border);
+    text-align: left;
+    vertical-align: top;
+  }
+
+  .nx-markdown th {
+    background: color-mix(in oklab, var(--nx-text) 4%, transparent);
+    font-weight: 600;
+  }
+
+  .nx-markdown__empty {
+    color: var(--nx-text-muted);
+    font-style: italic;
+  }
+}