nexus-shared 3.0.0 → 3.2.0

package/src/Styles/Nexus.Input.css

@@ -1,637 +1,794 @@
-@layer nexus.components {
-  /*
-   * Field: the frame of every input. Label, a box holding icons, the control, and buttons, then a hint or error line.
-   * Sizes, designs, and states only change the --nx-field-* variables below; the rules after them read those.
-   */
-  .nx-field {
-    --nx-field-base: var(--nx-control-md);
-    --nx-field-extra: 0px;
-    --nx-field-height: calc(var(--nx-field-base) + var(--nx-field-extra));
-    --nx-field-pad-x: 10px;
-    --nx-field-pad-y: 7px;
-    --nx-field-font: var(--nx-text-md);
-    --nx-field-label-font: var(--nx-text-sm);
-    --nx-field-icon: 16px;
-    --nx-field-bg: var(--nx-surface);
-    --nx-field-border: var(--nx-border-strong);
-    --nx-field-border-hover: color-mix(in oklab, var(--nx-border-strong), var(--nx-text) 22%);
-    --nx-field-accent: var(--nx-primary);
-    --nx-field-ring: var(--nx-focus-ring);
-    --nx-field-label-color: var(--nx-text-muted);
-    --nx-field-scrollbar: color-mix(in oklab, var(--nx-text-subtle) 75%, transparent);
-    --nx-field-scrollbar-hover: var(--nx-text-muted);
-
-    display: flex;
-    flex-direction: column;
-    min-width: 0;
-  }
-
-  .nx-field--sm {
-    --nx-field-base: var(--nx-control-sm);
-    --nx-field-pad-x: var(--nx-space-2);
-    --nx-field-pad-y: 4px;
-    --nx-field-font: var(--nx-text-sm);
-    --nx-field-label-font: var(--nx-text-xs);
-    --nx-field-icon: 14px;
-  }
-
-  .nx-field--lg {
-    --nx-field-base: var(--nx-control-lg);
-    --nx-field-pad-x: var(--nx-space-3);
-    --nx-field-pad-y: 9px;
-    --nx-field-font: var(--nx-text-lg);
-    --nx-field-label-font: var(--nx-text-md);
-    --nx-field-icon: 18px;
-  }
-
-  /* States */
-  .nx-field:focus-within {
-    --nx-field-label-color: var(--nx-field-accent);
-  }
-
-  .nx-field[data-invalid] {
-    --nx-field-border: var(--nx-danger);
-    --nx-field-border-hover: var(--nx-danger);
-    --nx-field-accent: var(--nx-danger);
-    --nx-field-ring: 0 0 0 3px color-mix(in oklab, var(--nx-danger) 30%, transparent);
-    --nx-field-label-color: var(--nx-danger);
-  }
-
-  /* Read-only and disabled boxes sit lower than the panel: lighter gray in light mode, the page color in dark mode. */
-  .nx-field:is([data-readonly], [data-disabled]) {
-    --nx-field-bg: light-dark(var(--nx-surface-2), var(--nx-bg));
-    --nx-field-border-hover: var(--nx-field-border);
-  }
-
-  .nx-field:is([data-readonly], [data-disabled]) .nx-field__box {
-    box-shadow: none;
-  }
-
-  .nx-field[data-disabled] {
-    opacity: 0.6;
-  }
-
-  .nx-field[data-disabled] :is(.nx-field__label, .nx-field__box, .nx-field__control) {
-    cursor: not-allowed;
-  }
-
-  /* Label above the box */
-  .nx-field__label {
-    color: var(--nx-text);
-    font-size: var(--nx-field-label-font);
-    font-weight: 500;
-    line-height: 1.3;
-  }
-
-  .nx-field--standard > .nx-field__label {
-    align-self: flex-start;
-    margin-bottom: 6px;
-  }
-
-  .nx-field__required {
-    margin-left: 3px;
-    color: var(--nx-danger);
-  }
-
-  /* Box */
-  .nx-field__box {
-    position: relative;
-    display: flex;
-    align-items: center;
-    min-height: var(--nx-field-height);
-    border: 1px solid var(--nx-field-border);
-    border-radius: var(--nx-radius);
-    background: var(--nx-field-bg);
-    box-shadow: var(--nx-shadow-sm);
-    font-size: var(--nx-field-font);
-    transition:
-      border-color var(--nx-duration),
-      box-shadow var(--nx-duration);
-  }
-
-  .nx-field__box:hover {
-    border-color: var(--nx-field-border-hover);
-  }
-
-  .nx-field__box:focus-within {
-    border-color: var(--nx-field-accent);
-    box-shadow: var(--nx-field-ring);
-  }
-
-  .nx-field__control {
-    flex: 1 1 auto;
-    align-self: stretch;
-    width: 100%;
-    min-width: 0;
-    margin: 0;
-    padding: 0 var(--nx-field-pad-x);
-    border: 0;
-    border-radius: inherit;
-    outline: none;
-    background: transparent;
-    color: var(--nx-text);
-    font-size: var(--nx-field-font);
-    line-height: 1.4;
-    text-overflow: ellipsis;
-  }
-
-  /* Numbers line up digit under digit. */
-  .nx-field__control--number {
-    font-variant-numeric: tabular-nums;
-  }
-
-  .nx-field__control::placeholder {
-    color: var(--nx-text-subtle);
-    opacity: 1;
-  }
-
-  /* Browser extras that the field replaces with its own buttons. */
-  .nx-field__control::-webkit-search-cancel-button,
-  .nx-field__control::-webkit-search-decoration {
-    appearance: none;
-  }
-
-  .nx-field__control::-ms-reveal,
-  .nx-field__control::-ms-clear {
-    display: none;
-  }
-
-  /* Autofilled values keep the field's own colors. */
-  .nx-field__control:is(:autofill, :-webkit-autofill) {
-    -webkit-text-fill-color: var(--nx-text);
-    caret-color: var(--nx-text);
-    box-shadow: 0 0 0 100px var(--nx-field-bg) inset;
-  }
-
-  /* Icons */
-  .nx-field__icon {
-    display: flex;
-    align-items: center;
-    flex-shrink: 0;
-    padding-left: var(--nx-field-pad-x);
-    color: var(--nx-text-subtle);
-    pointer-events: none;
-    transition: color var(--nx-duration);
-  }
-
-  .nx-field__icon .nx-icon,
-  .nx-field__action .nx-icon,
-  .nx-field__lock .nx-icon {
-    width: var(--nx-field-icon);
-    height: var(--nx-field-icon);
-    vertical-align: 0;
-  }
-
-  .nx-field__icon--end {
-    padding-right: var(--nx-field-pad-x);
-    padding-left: 0;
-  }
-
-  .nx-field__box:focus-within .nx-field__icon,
-  .nx-field[data-invalid] .nx-field__icon {
-    color: var(--nx-field-accent);
-  }
-
-  .nx-field__icon:not(.nx-field__icon--end) + .nx-field__control {
-    padding-left: var(--nx-space-2);
-  }
-
-  .nx-field__control:has(~ .nx-field__actions, ~ .nx-field__icon--end) {
-    padding-right: var(--nx-space-1);
-  }
-
-  /* Text before and after the value: a currency, a unit, a domain. Muted, so the value reads first. */
-  .nx-field__affix {
-    display: flex;
-    align-items: center;
-    align-self: stretch;
-    flex-shrink: 0;
-    padding-left: var(--nx-field-pad-x);
-    color: var(--nx-text-muted);
-    line-height: 1.4;
-    white-space: nowrap;
-    user-select: none;
-  }
-
-  .nx-field__affix--end {
-    padding-right: var(--nx-field-pad-x);
-    padding-left: 0;
-  }
-
-  .nx-field__icon:not(.nx-field__icon--end) + .nx-field__affix {
-    padding-left: var(--nx-space-2);
-  }
-
-  .nx-field__affix:not(.nx-field__affix--end) + .nx-field__control {
-    padding-left: 6px;
-  }
-
-  .nx-field__control:has(~ .nx-field__affix--end) {
-    padding-right: 6px;
-  }
-
-  .nx-field__affix--end:has(~ .nx-field__actions, ~ .nx-field__icon--end) {
-    padding-right: var(--nx-space-1);
-  }
-
-  /* Buttons inside the box: clear, show password, − and + */
-  .nx-field__actions {
-    display: flex;
-    align-items: center;
-    flex-shrink: 0;
-    gap: 2px;
-    padding-right: 4px;
-  }
-
-  .nx-field__actions--start {
-    padding-right: 0;
-    padding-left: 4px;
-  }
-
-  .nx-field__actions + .nx-field__icon--end {
-    padding-left: var(--nx-space-1);
-  }
-
-  .nx-field__action {
-    display: grid;
-    place-items: center;
-    width: calc(var(--nx-field-base) - 10px);
-    height: calc(var(--nx-field-base) - 10px);
-    padding: 0;
-    border: 0;
-    border-radius: var(--nx-radius-sm);
-    background: none;
-    color: var(--nx-text-subtle);
-    cursor: pointer;
-    transition:
-      background-color var(--nx-duration),
-      color var(--nx-duration);
-  }
-
-  .nx-field__action:hover:not(:disabled, [aria-disabled="true"]) {
-    background: var(--nx-surface-hover);
-    color: var(--nx-text);
-  }
-
-  .nx-field__action:focus-visible {
-    outline: 2px solid var(--nx-primary);
-    outline-offset: -2px;
-  }
-
-  .nx-field__action[aria-pressed="true"] {
-    color: var(--nx-field-accent);
-  }
-
-  .nx-field__action:disabled {
-    cursor: not-allowed;
-  }
-
-  /* − and +: stronger than the clear button, since they are the main way to change the value by pointer. */
-  .nx-field__action--step {
-    color: var(--nx-text-muted);
-    touch-action: manipulation;
-    user-select: none;
-    -webkit-touch-callout: none;
-  }
-
-  /* At a limit: dimmed, and the press does nothing. Not `disabled`, which would lose the pointer while it is held. */
-  .nx-field__action[aria-disabled="true"] {
-    opacity: 0.4;
-    cursor: default;
-  }
-
-  /* Split stepper: − before and + after a centered value, as in a guest or quantity picker. */
-  .nx-field--split .nx-field__control {
-    padding-inline: var(--nx-space-1);
-    text-align: center;
-  }
-
-  /*
-   * Read-only lock: at the end of the box, where a button that no longer works would be (a date picker's calendar, a
-   * number box's − and +), so a click that does nothing does not look like a bug. Muted rather than subtle, since it
-   * is the only sign of the state: at least 3:1 on the box in every theme. On an attempt to change the field it turns
-   * to the text color and nudges.
-   */
-  .nx-field__lock {
-    display: grid;
-    place-items: center;
-    width: calc(var(--nx-field-base) - 10px);
-    height: calc(var(--nx-field-base) - 10px);
-    color: var(--nx-text-muted);
-    cursor: default;
-  }
-
-  /* After the label of a field without a box: a checkbox, a switch, a choice group, a slider. Sized to the label text. */
-  .nx-field__lock--label {
-    display: inline-block;
-    width: auto;
-    height: auto;
-    margin-left: 0.35em;
-  }
-
-  .nx-field__lock--label .nx-icon {
-    width: 1em;
-    height: 1em;
-  }
-
-  .nx-field__lock[data-nudge] {
-    color: var(--nx-text);
-    animation: nx-field-nudge 320ms ease-in-out;
-  }
-
-  @keyframes nx-field-nudge {
-    20%,
-    60% {
-      transform: translateX(-2px);
-    }
-
-    40%,
-    80% {
-      transform: translateX(2px);
-    }
-  }
-
-  /* The note under a read-only box, in the top layer and placed by the component. Inverted, like a tooltip. */
-  .nx-field-notice {
-    position: fixed;
-    inset: auto;
-    display: flex;
-    align-items: center;
-    gap: 6px;
-    max-width: min(320px, calc(100vw - 16px));
-    margin: 0;
-    padding: 6px 10px 6px 8px;
-    overflow: visible;
-    border: 0;
-    border-radius: var(--nx-radius);
-    background: var(--nx-text);
-    color: var(--nx-surface);
-    box-shadow: var(--nx-shadow);
-    font-size: var(--nx-text-xs);
-    font-weight: 500;
-    line-height: 1.35;
-    pointer-events: none;
-  }
-
-  .nx-field-notice:popover-open {
-    animation: nx-field-notice-in 120ms ease-out;
-  }
-
-  @keyframes nx-field-notice-in {
-    from {
-      opacity: 0;
-      transform: translateY(-4px);
-    }
-  }
-
-  .nx-field-notice .nx-icon {
-    flex-shrink: 0;
-    width: 14px;
-    height: 14px;
-    vertical-align: 0;
-  }
-
-  /* Nothing to clear in an empty field. The control always has a placeholder, so :placeholder-shown means empty. */
-  .nx-field__box:has(.nx-field__control:placeholder-shown) .nx-field__action--clear {
-    display: none;
-  }
-
-  /* Hint, error, and count under the box */
-  .nx-field__footer {
-    display: flex;
-    align-items: flex-start;
-    gap: var(--nx-space-3);
-    margin-top: 5px;
-    font-size: var(--nx-text-xs);
-    line-height: 1.35;
-  }
-
-  .nx-field__message {
-    display: flex;
-    gap: 5px;
-    min-width: 0;
-    margin: 0;
-    color: var(--nx-text-muted);
-  }
-
-  .nx-field__message .nx-icon {
-    flex-shrink: 0;
-    width: 1.35em;
-    height: 1.35em;
-    vertical-align: 0;
-  }
-
-  .nx-field__message--error {
-    color: var(--nx-danger);
-    font-weight: 500;
-  }
-
-  .nx-field__aside {
-    margin-left: auto;
-    color: var(--nx-text-muted);
-    font-variant-numeric: tabular-nums;
-    white-space: nowrap;
-  }
-
-  /* Outlined and inbox: the label rests inside the box like a placeholder and rises on focus or once there is a value. */
-  :is(.nx-field--outlined, .nx-field--inbox) .nx-field__label {
-    position: absolute;
-    z-index: 1;
-    top: 50%;
-    left: var(--nx-field-pad-x);
-    max-width: calc(100% - 2 * var(--nx-field-pad-x));
-    overflow: hidden;
-    color: var(--nx-field-label-color);
-    font-size: var(--nx-field-font);
-    font-weight: 400;
-    line-height: 1.2;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    transform: translateY(-50%);
-    pointer-events: none;
-    transition:
-      top var(--nx-duration),
-      left var(--nx-duration),
-      font-size var(--nx-duration),
-      color var(--nx-duration),
-      transform var(--nx-duration);
-  }
-
-  /* After a start icon, the resting label lines up with the text. */
-  .nx-field__icon:not(.nx-field__icon--end) ~ .nx-field__label {
-    left: calc(var(--nx-field-pad-x) + var(--nx-field-icon) + var(--nx-space-2));
-  }
-
-  /* On a multi-line box, the resting label sits on the first line. */
-  .nx-field--multiline .nx-field__label {
-    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. */
-  .nx-field--outlined:is([data-raised], :focus-within, :has(.nx-field__control:not(:placeholder-shown))) .nx-field__label {
-    top: 0;
-    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;
-  }
-
-  /* Inbox: a taller box with the raised label inside its top edge. */
-  .nx-field--inbox {
-    --nx-field-extra: 12px;
-    --nx-field-inbox-pad: 17px;
-  }
-
-  .nx-field--inbox.nx-field--sm {
-    --nx-field-inbox-pad: 15px;
-  }
-
-  .nx-field--inbox.nx-field--lg {
-    --nx-field-inbox-pad: 19px;
-  }
-
-  .nx-field--inbox .nx-field__control {
-    padding-top: var(--nx-field-inbox-pad);
-  }
-
-  /*
-   * Beside the value: while the label rests in the middle, icons, text, and buttons line up with it. Once the label
-   * rises, the value sits low in the box, and they move down to its line. Buttons move halfway, so their hover
-   * background keeps clear of the border.
-   */
-  .nx-field--inbox :is(.nx-field__icon, .nx-field__affix, .nx-field__actions) {
-    align-self: stretch;
-    transition: padding-top var(--nx-duration);
-  }
-
-  .nx-field--inbox:is([data-raised], :focus-within, :has(.nx-field__control:not(:placeholder-shown))) :is(.nx-field__icon, .nx-field__affix) {
-    padding-top: var(--nx-field-inbox-pad);
-  }
-
-  .nx-field--inbox:is([data-raised], :focus-within, :has(.nx-field__control:not(:placeholder-shown))) .nx-field__actions {
-    padding-top: calc(var(--nx-field-inbox-pad) / 2);
-  }
-
-  .nx-field--inbox:is([data-raised], :focus-within, :has(.nx-field__control:not(:placeholder-shown))) .nx-field__label {
-    top: 5px;
-    font-size: var(--nx-text-xs);
-    font-weight: 500;
-    transform: none;
-  }
-
-  /*
-   * Split stepper: the label sits centered over the centered value, between − and +.
-   * It must come after the raised-label rule above: both have the same specificity, so the later one wins.
-   */
-  .nx-field--inbox.nx-field--split[data-raised] .nx-field__label {
-    left: 50%;
-    max-width: calc(100% - 2 * var(--nx-field-base));
-    transform: translateX(-50%);
-  }
-
-  /* Multi-line */
-  .nx-field--multiline .nx-field__box {
-    align-items: stretch;
-  }
-
-  .nx-field--multiline .nx-field__control {
-    padding: var(--nx-field-pad-y) var(--nx-field-pad-x);
-    font-family: inherit;
-    resize: vertical;
-  }
-
-  /* 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;
-    padding-top: calc(var(--nx-field-pad-y) + 0.7em - (var(--nx-field-base) - 10px) / 2);
-  }
-
-  /*
-   * Thin scrollbar: 8px instead of the default 15px, a rounded thumb in theme colors, no arrow buttons.
-   * Chromium ignores ::-webkit-scrollbar once scrollbar-width is set, so the standard properties go only to
-   * browsers without it (Firefox, where "thin" is also 8px).
-   */
-  .nx-field--multiline .nx-field__control::-webkit-scrollbar {
-    width: 8px;
-    height: 8px;
-  }
-
-  .nx-field--multiline .nx-field__control::-webkit-scrollbar-track,
-  .nx-field--multiline .nx-field__control::-webkit-scrollbar-corner {
-    background: transparent;
-  }
-
-  .nx-field--multiline .nx-field__control::-webkit-scrollbar-thumb {
-    border: 2px solid transparent;
-    border-radius: var(--nx-radius-full);
-    background: var(--nx-field-scrollbar) padding-box;
-  }
-
-  .nx-field--multiline .nx-field__control::-webkit-scrollbar-thumb:hover {
-    background-color: var(--nx-field-scrollbar-hover);
-  }
-
-  /* A styled scrollbar drops the browser's resize grip, which turns light in dark mode: draw two grip lines instead. */
-  .nx-field--multiline .nx-field__control::-webkit-resizer {
-    background: linear-gradient(
-      135deg,
-      transparent 0 48%,
-      var(--nx-field-scrollbar) 48% 56%,
-      transparent 56% 70%,
-      var(--nx-field-scrollbar) 70% 78%,
-      transparent 78%
-    );
-  }
-
-  @supports not selector(::-webkit-scrollbar) {
-    .nx-field--multiline .nx-field__control {
-      scrollbar-width: thin;
-      scrollbar-color: var(--nx-field-scrollbar) transparent;
-    }
-  }
-
-  .nx-field--multiline.nx-field--inbox .nx-field__control {
-    padding-top: calc(var(--nx-field-pad-y) + var(--nx-field-inbox-pad) - 4px);
-  }
-
-  .nx-field--multiline .nx-field__icon {
-    align-items: flex-start;
-    padding-top: calc(var(--nx-field-pad-y) + (1.4em - var(--nx-field-icon)) / 2);
-  }
-
-  .nx-field--multiline.nx-field--inbox:is([data-raised], :focus-within, :has(.nx-field__control:not(:placeholder-shown))) .nx-field__icon {
-    padding-top: calc(var(--nx-field-pad-y) + var(--nx-field-inbox-pad) - 4px + (1.4em - var(--nx-field-icon)) / 2);
-  }
-
-  .nx-field--multiline.nx-field--inbox:is([data-raised], :focus-within, :has(.nx-field__control:not(:placeholder-shown))) .nx-field__actions {
-    padding-top: calc(var(--nx-field-pad-y) + var(--nx-field-inbox-pad) - 4px + 0.7em - (var(--nx-field-base) - 10px) / 2);
-  }
-
-  /* Grows with its text between --nx-field-rows and --nx-field-max-rows lines. */
-  .nx-field__control--auto {
-    field-sizing: content;
-    min-height: calc(var(--nx-field-rows, 3) * 1lh + 2 * var(--nx-field-pad-y));
-    max-height: calc(var(--nx-field-max-rows, 12) * 1lh + 2 * var(--nx-field-pad-y));
-    resize: none;
-  }
-
-  @supports not (field-sizing: content) {
-    .nx-field__control--auto {
-      max-height: none;
-      resize: vertical;
-    }
-  }
-
-  @media (prefers-reduced-motion: reduce) {
-    .nx-field__label,
-    .nx-field--inbox :is(.nx-field__icon, .nx-field__affix, .nx-field__actions) {
-      transition: none;
-    }
-
-    .nx-field__lock[data-nudge],
-    .nx-field-notice:popover-open {
-      animation: none;
-    }
-  }
-}
+@layer nexus.components {
+  /*
+   * Field: the frame of every input. Label, a box holding icons, the control, and buttons, then a hint or error line.
+   * Sizes, designs, and states only change the --nx-field-* variables below; the rules after them read those.
+   */
+  .nx-field {
+    --nx-field-base: var(--nx-control-md);
+    --nx-field-extra: 0px;
+    --nx-field-height: calc(var(--nx-field-base) + var(--nx-field-extra));
+    --nx-field-pad-x: 10px;
+    --nx-field-pad-y: 7px;
+    --nx-field-font: var(--nx-text-md);
+    --nx-field-label-font: var(--nx-text-sm);
+    --nx-field-icon: 16px;
+    --nx-field-bg: var(--nx-surface);
+    --nx-field-border: var(--nx-border-strong);
+    --nx-field-border-hover: color-mix(in oklab, var(--nx-border-strong), var(--nx-text) 22%);
+    --nx-field-accent: var(--nx-primary);
+    --nx-field-ring: var(--nx-focus-ring);
+    --nx-field-label-color: var(--nx-text-muted);
+    --nx-field-grip: color-mix(in oklab, var(--nx-text-subtle) 75%, transparent);
+
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+  }
+
+  .nx-field--sm {
+    --nx-field-base: var(--nx-control-sm);
+    --nx-field-pad-x: var(--nx-space-2);
+    --nx-field-pad-y: 4px;
+    --nx-field-font: var(--nx-text-sm);
+    --nx-field-label-font: var(--nx-text-xs);
+    --nx-field-icon: 14px;
+  }
+
+  .nx-field--lg {
+    --nx-field-base: var(--nx-control-lg);
+    --nx-field-pad-x: var(--nx-space-3);
+    --nx-field-pad-y: 9px;
+    --nx-field-font: var(--nx-text-lg);
+    --nx-field-label-font: var(--nx-text-md);
+    --nx-field-icon: 18px;
+  }
+
+  /* States */
+  .nx-field:focus-within {
+    --nx-field-label-color: var(--nx-field-accent);
+  }
+
+  .nx-field[data-invalid] {
+    --nx-field-border: var(--nx-danger);
+    --nx-field-border-hover: var(--nx-danger);
+    --nx-field-accent: var(--nx-danger);
+    --nx-field-ring: 0 0 0 3px color-mix(in oklab, var(--nx-danger) 30%, transparent);
+    --nx-field-label-color: var(--nx-danger);
+  }
+
+  /* Read-only and disabled boxes sit lower than the panel: lighter gray in light mode, the page color in dark mode. */
+  .nx-field:is([data-readonly], [data-disabled]) {
+    --nx-field-bg: light-dark(var(--nx-surface-2), var(--nx-bg));
+    --nx-field-border-hover: var(--nx-field-border);
+  }
+
+  .nx-field:is([data-readonly], [data-disabled]) .nx-field__box {
+    box-shadow: none;
+  }
+
+  .nx-field[data-disabled] {
+    opacity: 0.6;
+  }
+
+  .nx-field[data-disabled] :is(.nx-field__label, .nx-field__box, .nx-field__control) {
+    cursor: not-allowed;
+  }
+
+  /* Label above the box */
+  .nx-field__label {
+    color: var(--nx-text);
+    font-size: var(--nx-field-label-font);
+    font-weight: 500;
+    line-height: 1.3;
+  }
+
+  .nx-field--standard > .nx-field__label {
+    align-self: flex-start;
+    margin-bottom: 6px;
+  }
+
+  .nx-field__required {
+    margin-left: 3px;
+    color: var(--nx-danger);
+  }
+
+  /* Box */
+  .nx-field__box {
+    position: relative;
+    display: flex;
+    align-items: center;
+    min-height: var(--nx-field-height);
+    border: 1px solid var(--nx-field-border);
+    border-radius: var(--nx-radius);
+    background: var(--nx-field-bg);
+    box-shadow: var(--nx-shadow-sm);
+    font-size: var(--nx-field-font);
+    transition:
+      border-color var(--nx-duration),
+      box-shadow var(--nx-duration);
+  }
+
+  .nx-field__box:hover {
+    border-color: var(--nx-field-border-hover);
+  }
+
+  .nx-field__box:focus-within {
+    border-color: var(--nx-field-accent);
+    box-shadow: var(--nx-field-ring);
+  }
+
+  .nx-field__control {
+    flex: 1 1 auto;
+    align-self: stretch;
+    width: 100%;
+    min-width: 0;
+    margin: 0;
+    padding: 0 var(--nx-field-pad-x);
+    border: 0;
+    border-radius: inherit;
+    outline: none;
+    background: transparent;
+    color: var(--nx-text);
+    font-size: var(--nx-field-font);
+    line-height: 1.4;
+    text-overflow: ellipsis;
+  }
+
+  /* Numbers line up digit under digit. */
+  .nx-field__control--number {
+    font-variant-numeric: tabular-nums;
+  }
+
+  .nx-field__control::placeholder {
+    color: var(--nx-text-subtle);
+    opacity: 1;
+  }
+
+  /* Browser extras that the field replaces with its own buttons. */
+  .nx-field__control::-webkit-search-cancel-button,
+  .nx-field__control::-webkit-search-decoration {
+    appearance: none;
+  }
+
+  .nx-field__control::-ms-reveal,
+  .nx-field__control::-ms-clear {
+    display: none;
+  }
+
+  /* Autofilled values keep the field's own colors. */
+  .nx-field__control:is(:autofill, :-webkit-autofill) {
+    -webkit-text-fill-color: var(--nx-text);
+    caret-color: var(--nx-text);
+    box-shadow: 0 0 0 100px var(--nx-field-bg) inset;
+  }
+
+  /* Icons */
+  .nx-field__icon {
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+    padding-left: var(--nx-field-pad-x);
+    color: var(--nx-text-subtle);
+    pointer-events: none;
+    transition: color var(--nx-duration);
+  }
+
+  .nx-field__icon .nx-icon,
+  .nx-field__action .nx-icon,
+  .nx-field__lock .nx-icon {
+    width: var(--nx-field-icon);
+    height: var(--nx-field-icon);
+    vertical-align: 0;
+  }
+
+  .nx-field__icon--end {
+    padding-right: var(--nx-field-pad-x);
+    padding-left: 0;
+  }
+
+  .nx-field__box:focus-within .nx-field__icon,
+  .nx-field[data-invalid] .nx-field__icon {
+    color: var(--nx-field-accent);
+  }
+
+  .nx-field__icon:not(.nx-field__icon--end) + .nx-field__control {
+    padding-left: var(--nx-space-2);
+  }
+
+  .nx-field__control:has(~ .nx-field__actions, ~ .nx-field__icon--end) {
+    padding-right: var(--nx-space-1);
+  }
+
+  /* Text before and after the value: a currency, a unit, a domain. Muted, so the value reads first. */
+  .nx-field__affix {
+    display: flex;
+    align-items: center;
+    align-self: stretch;
+    flex-shrink: 0;
+    padding-left: var(--nx-field-pad-x);
+    color: var(--nx-text-muted);
+    line-height: 1.4;
+    white-space: nowrap;
+    user-select: none;
+  }
+
+  .nx-field__affix--end {
+    padding-right: var(--nx-field-pad-x);
+    padding-left: 0;
+  }
+
+  .nx-field__icon:not(.nx-field__icon--end) + .nx-field__affix {
+    padding-left: var(--nx-space-2);
+  }
+
+  .nx-field__affix:not(.nx-field__affix--end) + .nx-field__control {
+    padding-left: 6px;
+  }
+
+  .nx-field__control:has(~ .nx-field__affix--end) {
+    padding-right: 6px;
+  }
+
+  .nx-field__affix--end:has(~ .nx-field__actions, ~ .nx-field__icon--end) {
+    padding-right: var(--nx-space-1);
+  }
+
+  /* Buttons inside the box: clear, show password, − and + */
+  .nx-field__actions {
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+    gap: 2px;
+    padding-right: 4px;
+  }
+
+  .nx-field__actions--start {
+    padding-right: 0;
+    padding-left: 4px;
+  }
+
+  .nx-field__actions + .nx-field__icon--end {
+    padding-left: var(--nx-space-1);
+  }
+
+  .nx-field__action {
+    display: grid;
+    place-items: center;
+    width: calc(var(--nx-field-base) - 10px);
+    height: calc(var(--nx-field-base) - 10px);
+    padding: 0;
+    border: 0;
+    border-radius: var(--nx-radius-sm);
+    background: none;
+    color: var(--nx-text-subtle);
+    cursor: pointer;
+    transition:
+      background-color var(--nx-duration),
+      color var(--nx-duration);
+  }
+
+  .nx-field__action:hover:not(:disabled, [aria-disabled="true"]) {
+    background: var(--nx-surface-hover);
+    color: var(--nx-text);
+  }
+
+  .nx-field__action:focus-visible {
+    outline: 2px solid var(--nx-primary);
+    outline-offset: -2px;
+  }
+
+  .nx-field__action[aria-pressed="true"] {
+    color: var(--nx-field-accent);
+  }
+
+  .nx-field__action:disabled {
+    cursor: not-allowed;
+  }
+
+  /* − and +: stronger than the clear button, since they are the main way to change the value by pointer. */
+  .nx-field__action--step {
+    color: var(--nx-text-muted);
+    touch-action: manipulation;
+    user-select: none;
+    -webkit-touch-callout: none;
+  }
+
+  /* At a limit: dimmed, and the press does nothing. Not `disabled`, which would lose the pointer while it is held. */
+  .nx-field__action[aria-disabled="true"] {
+    opacity: 0.4;
+    cursor: default;
+  }
+
+  /* Split stepper: − before and + after a centered value, as in a guest or quantity picker. */
+  .nx-field--split .nx-field__control {
+    padding-inline: var(--nx-space-1);
+    text-align: center;
+  }
+
+  /*
+   * Read-only lock: at the end of the box, where a button that no longer works would be (a date picker's calendar, a
+   * number box's − and +), so a click that does nothing does not look like a bug. Muted rather than subtle, since it
+   * is the only sign of the state: at least 3:1 on the box in every theme. On an attempt to change the field it turns
+   * to the text color and nudges.
+   */
+  .nx-field__lock {
+    display: grid;
+    place-items: center;
+    width: calc(var(--nx-field-base) - 10px);
+    height: calc(var(--nx-field-base) - 10px);
+    color: var(--nx-text-muted);
+    cursor: default;
+  }
+
+  /* After the label of a field without a box: a checkbox, a switch, a choice group, a slider. Sized to the label text. */
+  .nx-field__lock--label {
+    display: inline-block;
+    width: auto;
+    height: auto;
+    margin-left: 0.35em;
+  }
+
+  .nx-field__lock--label .nx-icon {
+    width: 1em;
+    height: 1em;
+  }
+
+  .nx-field__lock[data-nudge] {
+    color: var(--nx-text);
+    animation: nx-field-nudge 320ms ease-in-out;
+  }
+
+  @keyframes nx-field-nudge {
+    20%,
+    60% {
+      transform: translateX(-2px);
+    }
+
+    40%,
+    80% {
+      transform: translateX(2px);
+    }
+  }
+
+  /* The note under a read-only box, in the top layer and placed by the component. Inverted, like a tooltip. */
+  .nx-field-notice {
+    position: fixed;
+    inset: auto;
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    max-width: min(320px, calc(100vw - 16px));
+    margin: 0;
+    padding: 6px 10px 6px 8px;
+    overflow: visible;
+    border: 0;
+    border-radius: var(--nx-radius);
+    background: var(--nx-text);
+    color: var(--nx-surface);
+    box-shadow: var(--nx-shadow);
+    font-size: var(--nx-text-xs);
+    font-weight: 500;
+    line-height: 1.35;
+    pointer-events: none;
+  }
+
+  .nx-field-notice:popover-open {
+    animation: nx-field-notice-in 120ms ease-out;
+  }
+
+  @keyframes nx-field-notice-in {
+    from {
+      opacity: 0;
+      transform: translateY(-4px);
+    }
+  }
+
+  .nx-field-notice .nx-icon {
+    flex-shrink: 0;
+    width: 14px;
+    height: 14px;
+    vertical-align: 0;
+  }
+
+  /* Nothing to clear in an empty field. The control always has a placeholder, so :placeholder-shown means empty. */
+  .nx-field__box:has(.nx-field__control:placeholder-shown) .nx-field__action--clear {
+    display: none;
+  }
+
+  /* Hint, error, and count under the box */
+  .nx-field__footer {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--nx-space-3);
+    margin-top: 5px;
+    font-size: var(--nx-text-xs);
+    line-height: 1.35;
+  }
+
+  .nx-field__message {
+    display: flex;
+    gap: 5px;
+    min-width: 0;
+    margin: 0;
+    color: var(--nx-text-muted);
+  }
+
+  .nx-field__message .nx-icon {
+    flex-shrink: 0;
+    width: 1.35em;
+    height: 1.35em;
+    vertical-align: 0;
+  }
+
+  .nx-field__message--error {
+    color: var(--nx-danger);
+    font-weight: 500;
+  }
+
+  .nx-field__aside {
+    margin-left: auto;
+    color: var(--nx-text-muted);
+    font-variant-numeric: tabular-nums;
+    white-space: nowrap;
+  }
+
+  /* Outlined and inbox: the label rests inside the box like a placeholder and rises on focus or once there is a value. */
+  :is(.nx-field--outlined, .nx-field--inbox) .nx-field__label {
+    position: absolute;
+    z-index: 1;
+    top: 50%;
+    left: var(--nx-field-pad-x);
+    max-width: calc(100% - 2 * var(--nx-field-pad-x));
+    overflow: hidden;
+    color: var(--nx-field-label-color);
+    font-size: var(--nx-field-font);
+    font-weight: 400;
+    line-height: 1.2;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    transform: translateY(-50%);
+    pointer-events: none;
+    transition:
+      top var(--nx-duration),
+      left var(--nx-duration),
+      font-size var(--nx-duration),
+      color var(--nx-duration),
+      transform var(--nx-duration);
+  }
+
+  /* After a start icon, the resting label lines up with the text. */
+  .nx-field__icon:not(.nx-field__icon--end) ~ .nx-field__label {
+    left: calc(var(--nx-field-pad-x) + var(--nx-field-icon) + var(--nx-space-2));
+  }
+
+  /* On a multi-line box, the resting label sits on the first line. */
+  .nx-field--multiline .nx-field__label {
+    top: calc(var(--nx-field-pad-y) + var(--nx-field-font) * 0.7);
+  }
+
+  /*
+   * 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.6em;
+    left: calc(var(--nx-field-pad-x) - 4px);
+    padding: 0 4px;
+    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. */
+  .nx-field--inbox {
+    --nx-field-extra: 12px;
+    --nx-field-inbox-pad: 17px;
+  }
+
+  .nx-field--inbox.nx-field--sm {
+    --nx-field-inbox-pad: 15px;
+  }
+
+  .nx-field--inbox.nx-field--lg {
+    --nx-field-inbox-pad: 19px;
+  }
+
+  .nx-field--inbox .nx-field__control {
+    padding-top: var(--nx-field-inbox-pad);
+  }
+
+  /*
+   * Beside the value: while the label rests in the middle, icons, text, and buttons line up with it. Once the label
+   * rises, the value sits low in the box, and they move down to its line. Buttons move halfway, so their hover
+   * background keeps clear of the border.
+   */
+  .nx-field--inbox :is(.nx-field__icon, .nx-field__affix, .nx-field__actions) {
+    align-self: stretch;
+    transition: padding-top var(--nx-duration);
+  }
+
+  .nx-field--inbox:is([data-raised], :focus-within, :has(.nx-field__control:not(:placeholder-shown))) :is(.nx-field__icon, .nx-field__affix) {
+    padding-top: var(--nx-field-inbox-pad);
+  }
+
+  .nx-field--inbox:is([data-raised], :focus-within, :has(.nx-field__control:not(:placeholder-shown))) .nx-field__actions {
+    padding-top: calc(var(--nx-field-inbox-pad) / 2);
+  }
+
+  .nx-field--inbox:is([data-raised], :focus-within, :has(.nx-field__control:not(:placeholder-shown))) .nx-field__label {
+    top: 5px;
+    font-size: var(--nx-text-xs);
+    font-weight: 500;
+    transform: none;
+  }
+
+  /*
+   * Split stepper: the label sits centered over the centered value, between − and +.
+   * It must come after the raised-label rule above: both have the same specificity, so the later one wins.
+   */
+  .nx-field--inbox.nx-field--split[data-raised] .nx-field__label {
+    left: 50%;
+    max-width: calc(100% - 2 * var(--nx-field-base));
+    transform: translateX(-50%);
+  }
+
+  /* Multi-line */
+  .nx-field--multiline .nx-field__box {
+    align-items: stretch;
+  }
+
+  .nx-field--multiline .nx-field__control {
+    padding: var(--nx-field-pad-y) var(--nx-field-pad-x);
+    font-family: inherit;
+    resize: vertical;
+  }
+
+  /* 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;
+    padding-top: calc(var(--nx-field-pad-y) + 0.7em - (var(--nx-field-base) - 10px) / 2);
+  }
+
+  /* The browser's own resize grip ignores the theme (white lines in dark mode): draw two grip lines instead. */
+  .nx-field--multiline .nx-field__control::-webkit-resizer {
+    background: linear-gradient(
+      135deg,
+      transparent 0 48%,
+      var(--nx-field-grip) 48% 56%,
+      transparent 56% 70%,
+      var(--nx-field-grip) 70% 78%,
+      transparent 78%
+    );
+  }
+
+  .nx-field--multiline.nx-field--inbox .nx-field__control {
+    padding-top: calc(var(--nx-field-pad-y) + var(--nx-field-inbox-pad) - 4px);
+  }
+
+  .nx-field--multiline .nx-field__icon {
+    align-items: flex-start;
+    padding-top: calc(var(--nx-field-pad-y) + (1.4em - var(--nx-field-icon)) / 2);
+  }
+
+  .nx-field--multiline.nx-field--inbox:is([data-raised], :focus-within, :has(.nx-field__control:not(:placeholder-shown))) .nx-field__icon {
+    padding-top: calc(var(--nx-field-pad-y) + var(--nx-field-inbox-pad) - 4px + (1.4em - var(--nx-field-icon)) / 2);
+  }
+
+  .nx-field--multiline.nx-field--inbox:is([data-raised], :focus-within, :has(.nx-field__control:not(:placeholder-shown))) .nx-field__actions {
+    padding-top: calc(var(--nx-field-pad-y) + var(--nx-field-inbox-pad) - 4px + 0.7em - (var(--nx-field-base) - 10px) / 2);
+  }
+
+  /* Grows with its text between --nx-field-rows and --nx-field-max-rows lines. */
+  .nx-field__control--auto {
+    field-sizing: content;
+    min-height: calc(var(--nx-field-rows, 3) * 1lh + 2 * var(--nx-field-pad-y));
+    max-height: calc(var(--nx-field-max-rows, 12) * 1lh + 2 * var(--nx-field-pad-y));
+    resize: none;
+  }
+
+  @supports not (field-sizing: content) {
+    .nx-field__control--auto {
+      max-height: none;
+      resize: vertical;
+    }
+  }
+
+  /*
+   * 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-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;
+  }
+}