nexus-shared 1.1.20 → 2.0.0

package/src/Styles/Nexus.Rows.css

@@ -0,0 +1,566 @@
+@layer nexus.components {
+  /*
+   * Tabular and group forms: rows of inputs in a table, or as sections. Both sit in a fieldset with a legend, and end
+   * with a line that holds the Add button, the rows' message (or a removed row with Undo), and the count.
+   */
+  .nx-rows {
+    min-width: 0;
+    margin: 0;
+    padding: 0;
+    border: 0;
+  }
+
+  .nx-rows__legend {
+    margin-bottom: 6px;
+    padding: 0;
+  }
+
+  .nx-rows__footer {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--nx-space-2) var(--nx-space-3);
+    margin-top: var(--nx-space-2);
+  }
+
+  .nx-rows__message {
+    flex: 1 1 14rem;
+    align-items: center;
+    min-width: 0;
+    margin: 0;
+    font-size: var(--nx-text-xs);
+    line-height: 1.35;
+  }
+
+  .nx-rows__removed {
+    display: flex;
+    gap: var(--nx-space-2);
+    color: var(--nx-text-muted);
+  }
+
+  .nx-rows__removed .nx-btn {
+    margin-block: -4px;
+  }
+
+  .nx-rows__count {
+    margin-left: auto;
+    color: var(--nx-text-muted);
+    font-size: var(--nx-text-xs);
+    font-variant-numeric: tabular-nums;
+    white-space: nowrap;
+  }
+
+  /*
+   * Tabular form. Rows have a fixed height (the component places rows by it, and measures the first one), so every
+   * input is one line. Cells are drawn like a sheet: the inputs lose their own box, the grid lines take its place, and
+   * the cell with focus gets the ring inside its edges. Messages show under the table, for the input with focus.
+   */
+  .nx-tabular {
+    --nx-tabular-row: calc(var(--nx-control-md) + 1px);
+    --nx-tabular-end: 40px;
+    --nx-tabular-line: var(--nx-border);
+    --nx-tabular-frame: var(--nx-border-strong);
+    --nx-tabular-bg: var(--nx-surface);
+    --nx-tabular-head: color-mix(in oklab, var(--nx-text) 4%, var(--nx-surface));
+    --nx-tabular-hover: color-mix(in oklab, var(--nx-text) 3%, var(--nx-surface));
+    --nx-tabular-readonly: light-dark(var(--nx-surface-2), var(--nx-bg));
+  }
+
+  .nx-tabular--sm {
+    --nx-tabular-row: calc(var(--nx-control-sm) + 1px);
+    --nx-tabular-end: 34px;
+  }
+
+  .nx-tabular--lg {
+    --nx-tabular-row: calc(var(--nx-control-lg) + 1px);
+    --nx-tabular-end: 44px;
+  }
+
+  .nx-tabular[data-problem] {
+    --nx-tabular-frame: var(--nx-danger);
+  }
+
+  .nx-tabular__viewport {
+    position: relative;
+    overflow: auto;
+    border: 1px solid var(--nx-tabular-frame);
+    border-radius: var(--nx-radius);
+    background: var(--nx-tabular-bg);
+    box-shadow: var(--nx-shadow-sm);
+    outline: none;
+    /* A focused cell scrolls clear of the header and the fixed columns. */
+    scroll-padding: var(--nx-tabular-row) var(--nx-tabular-end) 0 48px;
+    scrollbar-width: thin;
+    scrollbar-color: color-mix(in oklab, var(--nx-text-subtle) 75%, transparent) transparent;
+    transition: border-color var(--nx-duration);
+  }
+
+  .nx-tabular__viewport:focus-visible {
+    box-shadow: inset 0 0 0 2px var(--nx-primary);
+  }
+
+  .nx-tabular__table {
+    width: 100%;
+  }
+
+  .nx-tabular__row {
+    display: grid;
+    grid-template-columns: var(--nx-tabular-columns);
+    height: var(--nx-tabular-row);
+    border-bottom: 1px solid var(--nx-tabular-line);
+    background: var(--nx-tabular-bg);
+  }
+
+  /* The last row's line hides under the frame. */
+  .nx-tabular__body {
+    margin-bottom: -1px;
+  }
+
+  .nx-tabular__body > .nx-tabular__row:hover {
+    background: var(--nx-tabular-hover);
+  }
+
+  /* Header: stays at the top while the rows scroll. */
+  .nx-tabular__head {
+    position: sticky;
+    top: 0;
+    z-index: 3;
+  }
+
+  .nx-tabular__head > .nx-tabular__row {
+    background: var(--nx-tabular-head);
+  }
+
+  .nx-tabular__head-cell {
+    display: flex;
+    align-items: center;
+    gap: 2px;
+    min-width: 0;
+    padding: 0 10px;
+    border-left: 1px solid var(--nx-tabular-line);
+    color: var(--nx-text);
+    font-size: var(--nx-text-sm);
+    font-weight: 600;
+    white-space: nowrap;
+  }
+
+  .nx-tabular__head-label {
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .nx-tabular__head-cell.nx-tabular__cell--number {
+    justify-content: flex-end;
+  }
+
+  .nx-tabular__head-cell.nx-tabular__cell--check {
+    justify-content: center;
+    padding-inline: 6px;
+  }
+
+  /* Cells */
+  .nx-tabular__cell {
+    display: flex;
+    align-items: stretch;
+    min-width: 0;
+    border-left: 1px solid var(--nx-tabular-line);
+  }
+
+  .nx-tabular__cell > * {
+    flex: 1 1 auto;
+    min-width: 0;
+  }
+
+  .nx-tabular__cell .nx-field {
+    --nx-field-bg: transparent;
+    --nx-field-border: transparent;
+    --nx-field-border-hover: transparent;
+  }
+
+  .nx-tabular__cell .nx-field:is([data-readonly], [data-disabled]) {
+    --nx-field-bg: var(--nx-tabular-readonly);
+  }
+
+  .nx-tabular__cell .nx-field[data-disabled] {
+    opacity: 1;
+    color: var(--nx-text-muted);
+  }
+
+  .nx-tabular__cell .nx-field__box {
+    height: 100%;
+    min-height: 0;
+    border-radius: 0;
+    box-shadow: none;
+  }
+
+  .nx-tabular__cell .nx-field__box:focus-within {
+    box-shadow: inset 0 0 0 2px var(--nx-field-accent);
+  }
+
+  .nx-tabular__cell .nx-field[data-invalid] .nx-field__box {
+    box-shadow: inset 0 0 0 1px var(--nx-danger);
+  }
+
+  .nx-tabular__cell .nx-field[data-invalid] .nx-field__box:focus-within {
+    box-shadow: inset 0 0 0 2px var(--nx-danger);
+  }
+
+  /* The message of the input with focus shows under the table instead. Screen readers still hear it with the input. */
+  .nx-tabular__cell :is(.nx-field, .nx-choice-field, .nx-choices) > .nx-field__footer {
+    display: none;
+  }
+
+  .nx-tabular__cell--number .nx-field__control {
+    text-align: end;
+  }
+
+  .nx-tabular__cell--check {
+    align-items: center;
+    justify-content: center;
+  }
+
+  .nx-tabular__cell--check > * {
+    flex: 0 0 auto;
+  }
+
+  .nx-tabular__cell .nx-choice__control {
+    margin: 0;
+  }
+
+  .nx-tabular__cell--check:has(.nx-field__lock) {
+    background: var(--nx-tabular-readonly);
+  }
+
+  .nx-tabular__cell .nx-choices {
+    display: flex;
+    align-items: center;
+    padding-inline: 10px;
+  }
+
+  .nx-tabular__cell .nx-choices__options {
+    display: flex;
+    flex-wrap: nowrap;
+    gap: var(--nx-space-3);
+    overflow: hidden;
+  }
+
+  /* Row numbers, fixed at the start: the button of each row's menu. Dots take the number's place on hover. */
+  .nx-tabular__num {
+    position: sticky;
+    left: 0;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-right: 1px solid var(--nx-tabular-line);
+    background: inherit;
+    color: var(--nx-text-muted);
+    font-size: var(--nx-text-xs);
+    font-variant-numeric: tabular-nums;
+  }
+
+  .nx-tabular__head .nx-tabular__num {
+    color: var(--nx-text);
+    font-weight: 600;
+  }
+
+  .nx-tabular__num + .nx-tabular__cell,
+  .nx-tabular__num + .nx-tabular__head-cell {
+    border-left: 0;
+  }
+
+  .nx-tabular__num-button {
+    display: grid;
+    place-items: center;
+    width: calc(100% - 6px);
+    height: calc(100% - 6px);
+    padding: 0;
+    border: 0;
+    border-radius: var(--nx-radius-sm);
+    background: none;
+    color: inherit;
+    font: inherit;
+    cursor: pointer;
+  }
+
+  .nx-tabular__num-button > * {
+    grid-area: 1 / 1;
+    transition: opacity var(--nx-duration);
+  }
+
+  .nx-tabular__num-icon {
+    width: 16px;
+    height: 16px;
+    opacity: 0;
+  }
+
+  .nx-tabular__num-button:is(:hover, :focus-visible, [aria-expanded="true"]) {
+    background: var(--nx-surface-hover);
+    color: var(--nx-text);
+  }
+
+  .nx-tabular__row:hover .nx-tabular__num-icon,
+  .nx-tabular__num-button:is(:focus-visible, [aria-expanded="true"]) .nx-tabular__num-icon {
+    opacity: 1;
+  }
+
+  .nx-tabular__row:hover .nx-tabular__num-button .nx-tabular__num-text,
+  .nx-tabular__num-button:is(:focus-visible, [aria-expanded="true"]) .nx-tabular__num-text {
+    opacity: 0;
+  }
+
+  .nx-tabular__num-button:focus-visible {
+    outline: 2px solid var(--nx-primary);
+    outline-offset: -2px;
+  }
+
+  /* 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);
+    color: var(--nx-danger);
+    font-weight: 600;
+  }
+
+  /* Remove buttons, fixed at the end. */
+  .nx-tabular__end {
+    position: sticky;
+    right: 0;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-left: 1px solid var(--nx-tabular-line);
+    background: inherit;
+  }
+
+  .nx-tabular__remove.nx-btn {
+    width: calc(var(--nx-tabular-row) - 9px);
+    height: calc(var(--nx-tabular-row) - 9px);
+    color: var(--nx-text-muted);
+  }
+
+  .nx-tabular__row--empty {
+    display: block;
+    height: auto;
+    border-bottom: 0;
+  }
+
+  .nx-tabular__empty {
+    position: sticky;
+    left: 0;
+    width: max-content;
+    max-width: 100%;
+    padding: var(--nx-space-4);
+    color: var(--nx-text-muted);
+    font-size: var(--nx-text-sm);
+  }
+
+  /*
+   * Group form: each row is a section on a light tint, without a border, so the inputs' own boxes are the only frames.
+   * The header collapses the section; the inputs sit on a 12-column grid by their span, one column on narrow screens.
+   */
+  .nx-group-form {
+    --nx-group-tint: color-mix(in oklab, var(--nx-text) 3.5%, var(--nx-surface));
+    --nx-group-hover: color-mix(in oklab, var(--nx-text) 6%, var(--nx-surface));
+    --nx-group-pad: var(--nx-space-4);
+    --nx-group-gap: var(--nx-space-4);
+  }
+
+  .nx-group-form--sm {
+    --nx-group-pad: var(--nx-space-3);
+    --nx-group-gap: var(--nx-space-3);
+  }
+
+  .nx-group-form--lg {
+    --nx-group-pad: var(--nx-space-5);
+    --nx-group-gap: var(--nx-space-5);
+  }
+
+  .nx-group-form__list {
+    display: flex;
+    flex-direction: column;
+    gap: var(--nx-space-3);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  .nx-group-form__section {
+    border-radius: var(--nx-radius-lg);
+    background: var(--nx-group-tint);
+  }
+
+  .nx-group-form__section[data-problem] {
+    box-shadow: inset 3px 0 0 var(--nx-danger);
+  }
+
+  .nx-group-form__head {
+    display: flex;
+    align-items: center;
+    gap: var(--nx-space-2);
+    padding: 6px 8px 6px 6px;
+  }
+
+  .nx-group-form__toggle,
+  .nx-group-form__heading {
+    display: flex;
+    flex: 1 1 auto;
+    align-items: center;
+    gap: var(--nx-space-2);
+    min-width: 0;
+    min-height: 34px;
+    padding: 4px 10px 4px 8px;
+    color: var(--nx-text);
+    font-size: var(--nx-text-md);
+    text-align: start;
+  }
+
+  .nx-group-form__heading {
+    padding-left: calc(var(--nx-group-pad) - 6px);
+  }
+
+  .nx-group-form__toggle {
+    border: 0;
+    border-radius: var(--nx-radius);
+    background: none;
+    font: inherit;
+    cursor: pointer;
+    transition: background-color var(--nx-duration);
+  }
+
+  .nx-group-form__toggle:hover {
+    background: var(--nx-group-hover);
+  }
+
+  .nx-group-form__toggle:focus-visible {
+    outline: 2px solid var(--nx-primary);
+    outline-offset: 0;
+  }
+
+  .nx-group-form__chevron {
+    width: 16px;
+    height: 16px;
+    color: var(--nx-text-muted);
+    transition: transform var(--nx-duration);
+  }
+
+  .nx-group-form__toggle[aria-expanded="false"] .nx-group-form__chevron {
+    transform: rotate(-90deg);
+  }
+
+  .nx-group-form__title {
+    flex: none;
+    font-weight: 600;
+    white-space: nowrap;
+  }
+
+  /* A radio this row has on, such as "Primary". Text color on the tint, as tags do. */
+  .nx-group-form__tag {
+    flex: none;
+    padding: 1px 8px;
+    border-radius: var(--nx-radius-full);
+    background: var(--nx-primary-soft);
+    color: var(--nx-text);
+    font-size: var(--nx-text-xs);
+    font-weight: 500;
+    line-height: 1.5;
+  }
+
+  /* Muted text moves toward the text color, so it keeps 4.5:1 on the tint and on the hover tint. */
+  .nx-group-form__summary {
+    min-width: 0;
+    overflow: hidden;
+    color: color-mix(in oklab, var(--nx-text-muted), var(--nx-text) 35%);
+    font-size: var(--nx-text-sm);
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .nx-group-form__problems {
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    gap: 4px;
+    margin-left: auto;
+    color: var(--nx-danger);
+    font-size: var(--nx-text-xs);
+    font-weight: 600;
+    white-space: nowrap;
+  }
+
+  .nx-group-form__problems .nx-icon {
+    width: 14px;
+    height: 14px;
+    vertical-align: 0;
+  }
+
+  .nx-group-form__actions {
+    display: flex;
+    flex: none;
+    align-items: center;
+    gap: 2px;
+  }
+
+  .nx-group-form__actions .nx-btn {
+    color: var(--nx-text-muted);
+  }
+
+  .nx-group-form__body {
+    container-type: inline-size;
+    display: grid;
+    grid-template-columns: repeat(12, minmax(0, 1fr));
+    align-items: start;
+    gap: var(--nx-group-gap);
+    padding: 2px var(--nx-group-pad) var(--nx-group-pad);
+  }
+
+  .nx-group-form__cell {
+    grid-column: span var(--nx-span, 12);
+    min-width: 0;
+  }
+
+  /* A checkbox, switch, or radio lines up with the boxes beside it. */
+  .nx-group-form__cell--choice {
+    display: flex;
+    align-self: end;
+    align-items: center;
+    min-height: var(--nx-control-md);
+  }
+
+  .nx-group-form--sm .nx-group-form__cell--choice {
+    min-height: var(--nx-control-sm);
+  }
+
+  .nx-group-form--lg .nx-group-form__cell--choice {
+    min-height: var(--nx-control-lg);
+  }
+
+  @container (max-width: 34rem) {
+    .nx-group-form__cell {
+      grid-column: span 12;
+    }
+
+    .nx-group-form__cell--choice {
+      min-height: 0;
+    }
+  }
+
+  .nx-group-form__empty {
+    margin: 0;
+    padding: var(--nx-space-4);
+    border-radius: var(--nx-radius-lg);
+    background: var(--nx-group-tint);
+    color: color-mix(in oklab, var(--nx-text-muted), var(--nx-text) 35%);
+    font-size: var(--nx-text-sm);
+    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;
+    }
+  }
+}