nexus-shared 1.1.21 → 3.0.0

package/src/Styles/Nexus.Rows.css

@@ -0,0 +1,596 @@
+@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-menu: 22px;
+    --nx-tabular-line: var(--nx-border);
+    /*
+     * The sheet keeps the strong edge. Making it the plain border to answer "boxes inside boxes" put the frame below
+     * the edge of every input box beside it, in all seven themes light and dark, which the library asserts against
+     * (`tabular-form.cjs`, "frame edge"): the outermost edge of a control cannot be fainter than the ones inside it.
+     */
+    --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-menu: 20px;
+  }
+
+  .nx-tabular--lg {
+    --nx-tabular-row: calc(var(--nx-control-lg) + 1px);
+    --nx-tabular-menu: 24px;
+  }
+
+  .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) 0 0 var(--nx-tabular-num, 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);
+    /*
+     * One track, exactly the row's height. Without it the track is sized by the tallest cell, so a single
+     * textarea of two lines made every cell of its row 20px too tall and drew them over the rows below: the row
+     * looked taller than its neighbours, and its focus ring and its edges bled out of it.
+     */
+    grid-template-rows: minmax(0, 1fr);
+    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;
+    /* Nothing a cell holds is drawn past its own edges: the ring, the invalid edge and the tint all stop here. */
+    min-height: 0;
+    overflow: hidden;
+    border-left: 1px solid var(--nx-tabular-line);
+  }
+
+  /*
+   * A textarea scrolls inside its cell instead of making the cell taller. Its own `rows` would size the row, and
+   * its resize grip would let one cell break the alignment of its row: in a grid where every other cell keeps the
+   * line, that grip is a handle for making the table wrong, eighteen of them down one column.
+   */
+  .nx-tabular__cell textarea.nx-field__control {
+    height: 100%;
+    min-height: 0;
+    /* Two classes: the multi-line rule in Nexus.Input.css is two, and one would lose to it in the same layer. */
+    resize: none;
+  }
+
+  .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;
+  }
+
+  /*
+   * A generated cell wears the read-only tint and no lock: the column header carries one lock for the whole
+   * column, and the cell still says why under the table when it is used. One fact, said once, not once a row.
+   */
+  .nx-tabular__cell .nx-field__lock {
+    display: none;
+  }
+
+  .nx-tabular__cell--check:has([data-readonly]) {
+    background: var(--nx-tabular-readonly);
+  }
+
+  .nx-tabular__head-cell[data-nx-locked] {
+    color: var(--nx-text-muted);
+  }
+
+  .nx-tabular__head-lock {
+    width: 13px;
+    height: 13px;
+    margin-left: auto;
+    color: var(--nx-text-muted);
+  }
+
+  .nx-tabular__head-cell.nx-tabular__cell--number .nx-tabular__head-lock {
+    margin-left: 4px;
+  }
+
+  .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, with the row's menu beside them. Both have their own place and neither
+   * moves: a menu that takes the number's place on hover makes the numbering look broken and the grid unstable.
+   */
+  .nx-tabular__num {
+    position: sticky;
+    left: 0;
+    z-index: 1;
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) var(--nx-tabular-menu);
+    align-items: center;
+    gap: 2px;
+    padding-left: 6px;
+    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;
+  }
+
+  /* Right-aligned, so 9 and 10 line up under one another and the menu is always the same distance away. */
+  .nx-tabular__num-text {
+    text-align: end;
+  }
+
+  .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: var(--nx-tabular-menu);
+    height: calc(var(--nx-tabular-row) - 8px);
+    padding: 0;
+    border: 0;
+    border-radius: var(--nx-radius-sm);
+    background: none;
+    /* Muted, like the numbers beside it, so the column reads as one thing; it is the row's only control now. */
+    color: var(--nx-text-muted);
+    font: inherit;
+    cursor: pointer;
+    transition:
+      background-color var(--nx-duration),
+      color var(--nx-duration);
+  }
+
+  .nx-tabular__num-button .nx-icon {
+    width: 15px;
+    height: 15px;
+  }
+
+  .nx-tabular__num-button:is(:hover, :focus-visible, [aria-expanded="true"]) {
+    background: var(--nx-surface-hover);
+    color: var(--nx-text);
+  }
+
+  .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;
+  }
+
+
+  .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;
+    }
+  }
+}