nexus-shared 1.1.20 → 2.0.0

package/src/Styles/Nexus.Input.css

@@ -0,0 +1,637 @@
+@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;
+    }
+  }
+}