nexus-shared 1.1.20 → 2.0.0

package/src/Styles/Nexus.Table.css

@@ -0,0 +1,1014 @@
+@layer nexus.components {
+  /*
+   * Data table: a bar (tabs, search, buttons), a frame holding the table (a header that stays while rows scroll, a
+   * checkbox column on the left and the actions on the right that stay while columns scroll), and a footer with the
+   * range and the pager. While rows are selected, a bar with their actions covers the column headings.
+   */
+  .nx-table {
+    --nx-table-bg: var(--nx-surface);
+    --nx-table-head-bg: color-mix(in oklab, var(--nx-text) 4%, var(--nx-surface));
+    --nx-table-hover: color-mix(in oklab, var(--nx-text) 3%, var(--nx-surface));
+    --nx-table-selected: color-mix(in oklab, var(--nx-primary) 11%, var(--nx-surface));
+    --nx-table-selected-hover: color-mix(in oklab, var(--nx-primary) 16%, var(--nx-surface));
+    --nx-table-flash: color-mix(in oklab, var(--nx-success) 18%, var(--nx-surface));
+    --nx-table-line: var(--nx-border);
+    --nx-table-head-h: 40px;
+    --nx-table-row-h: 44px;
+    --nx-table-pad-x: 12px;
+    --nx-table-select-w: 44px;
+    --nx-table-font: var(--nx-text-md);
+    --nx-table-edge: light-dark(rgb(16 24 40 / 0.14), rgb(0 0 0 / 0.55));
+
+    container: nx-table / inline-size;
+    display: flex;
+    flex-direction: column;
+    gap: var(--nx-space-3);
+    min-width: 0;
+    color: var(--nx-text);
+  }
+
+  .nx-table--sm {
+    --nx-table-head-h: 34px;
+    --nx-table-row-h: 36px;
+    --nx-table-pad-x: 10px;
+    --nx-table-select-w: 38px;
+    --nx-table-font: var(--nx-text-sm);
+  }
+
+  /* The bar: tabs and filters on the left, the search and buttons on the right. */
+  .nx-table__bar {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--nx-space-2) var(--nx-space-3);
+  }
+
+  .nx-table__bar-start {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--nx-space-2);
+    min-width: 0;
+  }
+
+  .nx-table__bar-end {
+    display: flex;
+    flex: 1 1 auto;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: flex-end;
+    gap: var(--nx-space-2);
+    min-width: 0;
+  }
+
+  .nx-table__search {
+    flex: 0 1 19rem;
+    min-width: 12rem;
+  }
+
+  /* Rows per page inside the search box, at its start, with a line between the two. */
+  .nx-table__search .nx-field__actions--start {
+    align-self: stretch;
+    padding-right: 0;
+    padding-left: 2px;
+    border-right: 1px solid var(--nx-field-border);
+  }
+
+  .nx-table__page-size--field.nx-btn {
+    min-width: 0;
+    height: calc(var(--nx-field-height) - 8px);
+    gap: 0;
+    padding: 0 2px 0 4px;
+    color: var(--nx-text-muted);
+    font-variant-numeric: tabular-nums;
+  }
+
+  .nx-table__page-size--field .nx-icon {
+    width: 14px;
+    height: 14px;
+  }
+
+  .nx-table__page-size--field:hover {
+    color: var(--nx-text);
+  }
+
+  @container nx-table (max-width: 560px) {
+    .nx-table__bar-end {
+      justify-content: flex-start;
+    }
+
+    .nx-table__search {
+      flex: 1 1 100%;
+      order: -1;
+    }
+  }
+
+  /* The frame. */
+  .nx-table__frame {
+    position: relative;
+    min-width: 0;
+    border: 1px solid var(--nx-table-line);
+    border-radius: var(--nx-radius-lg);
+    background: var(--nx-table-bg);
+    box-shadow: var(--nx-shadow-sm);
+    overflow: hidden;
+  }
+
+  .nx-table__scroll {
+    overflow: auto;
+    overscroll-behavior-x: contain;
+    scrollbar-width: thin;
+    scrollbar-color: color-mix(in oklab, var(--nx-text-subtle) 75%, transparent) transparent;
+  }
+
+  .nx-table__table {
+    width: 100%;
+    border-collapse: separate;
+    border-spacing: 0;
+    font-size: var(--nx-table-font);
+    line-height: 1.45;
+  }
+
+  /* Cells */
+  .nx-table__cell,
+  .nx-table__heading {
+    box-sizing: border-box;
+    padding: 4px var(--nx-table-pad-x);
+    text-align: start;
+    vertical-align: middle;
+  }
+
+  .nx-table__cell {
+    height: var(--nx-table-row-h);
+    border-bottom: 1px solid var(--nx-table-line);
+    background: var(--nx-row-bg);
+  }
+
+  .nx-table__row {
+    --nx-row-bg: var(--nx-table-bg);
+  }
+
+  /* The last row's line would double the frame. */
+  .nx-table__row:last-child > .nx-table__cell {
+    border-bottom: 0;
+  }
+
+  .nx-table__row:not(.nx-table__row--message, .nx-table__row--skeleton):hover {
+    --nx-row-bg: var(--nx-table-hover);
+  }
+
+  .nx-table__row[data-selected] {
+    --nx-row-bg: var(--nx-table-selected);
+  }
+
+  .nx-table__row[data-selected]:hover {
+    --nx-row-bg: var(--nx-table-selected-hover);
+  }
+
+  /* Muted text on a selected row's tint moves toward the text color, so it keeps 4.5:1 in every theme. */
+  .nx-table__row[data-selected] :is(.nx-table__number, .nx-table__dash, .nx-table__no) {
+    color: color-mix(in oklab, var(--nx-text-muted), var(--nx-text) 45%);
+  }
+
+  /* Columns scroll under the pinned ones: a soft shadow shows there is more on that side. */
+  .nx-table__frame[data-scroll-start] {
+    --nx-table-start-edge: 8px 0 8px -8px var(--nx-table-edge);
+  }
+
+  .nx-table__frame[data-scroll-end] {
+    --nx-table-end-edge: -8px 0 8px -8px var(--nx-table-edge);
+  }
+
+  .nx-table__row[data-busy] > .nx-table__cell:not(.nx-table__cell--actions) {
+    color: var(--nx-text-muted);
+  }
+
+  /* A row just added or saved: a green wash that fades (a steady one with reduced motion, until the mark goes). */
+  .nx-table__row[data-flash] > .nx-table__cell {
+    animation: nx-table-flash 1600ms ease-out;
+  }
+
+  @keyframes nx-table-flash {
+    from {
+      background-color: var(--nx-table-flash);
+    }
+  }
+
+  .nx-table__cell--start {
+    text-align: start;
+  }
+
+  .nx-table__cell--center {
+    text-align: center;
+  }
+
+  .nx-table__cell--end {
+    text-align: end;
+    font-variant-numeric: tabular-nums;
+  }
+
+  /* A value ends in "…" at the column's width (24rem when the column sets none). */
+  .nx-table__value {
+    display: block;
+    max-width: var(--nx-col-max, 24rem);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .nx-table__cell--wrap .nx-table__value {
+    max-width: var(--nx-col-max, 32rem);
+    white-space: normal;
+    overflow-wrap: anywhere;
+  }
+
+  .nx-table__cell--end .nx-table__value {
+    margin-left: auto;
+  }
+
+  .nx-table__cell--center .nx-table__value {
+    margin-inline: auto;
+  }
+
+  /*
+   * Pinned columns stay while the others scroll: the numbers and checkbox column and the actions always, and
+   * any column the user pins from its menu. Their distance from the edge is measured from the headings before them.
+   */
+  .nx-table__cell[data-pin],
+  .nx-table__heading[data-pin] {
+    position: sticky;
+    z-index: 1;
+    background: var(--nx-row-bg);
+  }
+
+  .nx-table__heading[data-pin] {
+    z-index: 3;
+    background: var(--nx-table-head-bg);
+  }
+
+  /* The last pinned column of a side carries the shadow the others scroll under. */
+  .nx-table__cell[data-pin="left"][data-pin-edge],
+  .nx-table__heading[data-pin="left"][data-pin-edge] {
+    box-shadow: var(--nx-table-start-edge, 0 0 #0000);
+  }
+
+  .nx-table__cell[data-pin="right"][data-pin-edge],
+  .nx-table__heading[data-pin="right"][data-pin-edge] {
+    box-shadow: var(--nx-table-end-edge, 0 0 #0000);
+  }
+
+  /* The first column: the row's number, with its checkbox in the same place. */
+  .nx-table__cell--index {
+    width: var(--nx-table-select-w);
+    min-width: var(--nx-table-select-w);
+    padding: 0;
+    text-align: center;
+  }
+
+  .nx-table__number {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    color: var(--nx-text-muted);
+    font-size: var(--nx-text-xs);
+    font-variant-numeric: tabular-nums;
+    font-weight: 500;
+  }
+
+  .nx-table__check {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    min-height: 28px;
+  }
+
+  .nx-table__check .nx-choice__control {
+    margin: 0;
+  }
+
+  /* Both in the one cell: the number, until the row is under the pointer or anything is selected. */
+  .nx-table__cell--index[data-swap] > .nx-table__number,
+  .nx-table__cell--index[data-swap] > .nx-table__check {
+    position: absolute;
+    inset: 0;
+    width: auto;
+    transition: opacity var(--nx-duration);
+  }
+
+  .nx-table__cell--index[data-swap] > .nx-table__check {
+    opacity: 0;
+  }
+
+  .nx-table__row:hover > .nx-table__cell--index[data-swap] > .nx-table__check,
+  .nx-table__head:hover > .nx-table__cell--index[data-swap] > .nx-table__check,
+  .nx-table__cell--index[data-swap]:focus-within > .nx-table__check,
+  .nx-table[data-selecting] .nx-table__cell--index[data-swap] > .nx-table__check {
+    opacity: 1;
+  }
+
+  .nx-table__row:hover > .nx-table__cell--index[data-swap] > .nx-table__number,
+  .nx-table__head:hover > .nx-table__cell--index[data-swap] > .nx-table__number,
+  .nx-table__cell--index[data-swap]:focus-within > .nx-table__number,
+  .nx-table[data-selecting] .nx-table__cell--index[data-swap] > .nx-table__number {
+    opacity: 0;
+  }
+
+  /* A touch screen has no pointer to hover with, so the checkbox stays. */
+  @media (hover: none) {
+    .nx-table__cell--index[data-swap] > .nx-table__check {
+      opacity: 1;
+    }
+
+    .nx-table__cell--index[data-swap] > .nx-table__number {
+      opacity: 0;
+    }
+  }
+
+  /*
+   * The pinned section above the page: a row across the table whose button folds the records the user pinned open and
+   * shut, and the rows themselves, which show in the list below as well. A pinned row wears a pin where the rows of the
+   * page show their number.
+   */
+  .nx-table__pins {
+    border-bottom: 2px solid var(--nx-table-line);
+  }
+
+  .nx-table__pin-cell {
+    padding: 0;
+    border-bottom: 1px solid var(--nx-table-line);
+    background: var(--nx-table-head-bg);
+  }
+
+  .nx-table__pin-toggle {
+    display: flex;
+    align-items: center;
+    gap: var(--nx-space-2);
+    width: 100%;
+    min-height: var(--nx-table-head-h);
+    padding: 0 var(--nx-table-pad-x);
+    border: 0;
+    background: none;
+    color: var(--nx-text);
+    font: inherit;
+    font-size: var(--nx-table-font);
+    font-weight: 600;
+    text-align: start;
+    cursor: pointer;
+    transition: background-color var(--nx-duration);
+  }
+
+  .nx-table__pin-toggle:hover {
+    background: color-mix(in oklab, var(--nx-text) 5%, transparent);
+  }
+
+  .nx-table__pin-toggle:focus-visible {
+    outline: none;
+    box-shadow: inset 0 0 0 2px var(--nx-primary);
+  }
+
+  .nx-table__pin-caret {
+    flex-shrink: 0;
+    width: 15px;
+    height: 15px;
+    color: var(--nx-text-muted);
+    transition: transform var(--nx-duration);
+  }
+
+  .nx-table__pins[data-open] .nx-table__pin-caret {
+    transform: rotate(90deg);
+  }
+
+  .nx-table__pin-icon {
+    flex-shrink: 0;
+    width: 15px;
+    height: 15px;
+    color: var(--nx-text-muted);
+  }
+
+  .nx-table__pin-count {
+    color: var(--nx-text-muted);
+    font-weight: 400;
+    font-variant-numeric: tabular-nums;
+  }
+
+  .nx-table__pin-loading {
+    width: 14px;
+    height: 14px;
+    color: var(--nx-text-muted);
+  }
+
+  .nx-table__pin-mark {
+    width: 15px;
+    height: 15px;
+    color: var(--nx-text-muted);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .nx-table__pin-caret,
+    .nx-table__pin-toggle {
+      transition: none;
+    }
+  }
+
+  .nx-table__cell--actions {
+    width: 1px;
+    padding-inline: 4px 8px;
+    white-space: nowrap;
+  }
+
+  /*
+   * Once the user has given a column a width, the table lays its columns out from the list of widths, so dragging one
+   * edge moves that edge only. The filler column takes whatever space the others leave.
+   */
+  .nx-table[data-sized] .nx-table__table {
+    table-layout: fixed;
+  }
+
+  .nx-table__cell--filler {
+    padding: 0;
+    background: var(--nx-row-bg);
+  }
+
+  .nx-table__heading.nx-table__cell--filler {
+    background: var(--nx-table-head-bg);
+  }
+
+  .nx-table__actions {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 2px;
+  }
+
+  /* Header: stays at the top while rows scroll. */
+  .nx-table__heading {
+    position: sticky;
+    top: 0;
+    z-index: 2;
+    height: var(--nx-table-head-h);
+    border-bottom: 1px solid var(--nx-table-line);
+    background: var(--nx-table-head-bg);
+    color: var(--nx-text);
+    font-size: var(--nx-text-sm);
+    font-weight: 600;
+    white-space: nowrap;
+  }
+
+  /* A heading that holds the sort button, the column's menu, and the edge to drag keeps no padding of its own. */
+  .nx-table__heading:has(> .nx-table__heading-inner) {
+    padding: 0;
+  }
+
+  .nx-table__heading-inner {
+    display: flex;
+    align-items: center;
+    min-width: 0;
+    height: 100%;
+  }
+
+  .nx-table__heading-label {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .nx-table__heading-inner > .nx-table__heading-label {
+    flex: 1 1 auto;
+    padding: 0 var(--nx-table-pad-x);
+  }
+
+  /* A sortable heading is one button across its cell, beside the column's menu. */
+  .nx-table__sort {
+    display: flex;
+    flex: 1 1 auto;
+    align-items: center;
+    gap: 6px;
+    min-width: 0;
+    height: 100%;
+    padding: 0 4px 0 var(--nx-table-pad-x);
+    border: 0;
+    background: transparent;
+    color: inherit;
+    font: inherit;
+    text-align: inherit;
+    cursor: pointer;
+    transition: background-color var(--nx-duration);
+  }
+
+  .nx-table__cell--end .nx-table__sort {
+    flex-direction: row-reverse;
+    padding: 0 var(--nx-table-pad-x) 0 4px;
+  }
+
+  .nx-table__cell--center .nx-table__sort {
+    justify-content: center;
+  }
+
+  /* The column's menu (pin, move, fit, hide): at the end of the heading, and shown while it is hovered or focused. */
+  .nx-table__col-menu.nx-btn {
+    flex: 0 0 auto;
+    width: 20px;
+    min-width: 20px;
+    height: calc(var(--nx-table-head-h) - 12px);
+    margin-right: 2px;
+    padding: 0;
+    border-radius: var(--nx-radius-sm);
+    opacity: 0;
+    transition: opacity var(--nx-duration);
+  }
+
+  .nx-table__col-menu .nx-icon {
+    width: 14px;
+    height: 14px;
+  }
+
+  .nx-table__heading:hover .nx-table__col-menu,
+  .nx-table__col-menu:is(:focus, :focus-visible),
+  .nx-table__col-menu[aria-expanded="true"] {
+    opacity: 1;
+  }
+
+  @media (hover: none) {
+    .nx-table__col-menu.nx-btn {
+      opacity: 1;
+    }
+  }
+
+  /* The edge of a heading: drag it for the column's width, double-click it to fit the content. */
+  .nx-table__resizer {
+    position: absolute;
+    top: 0;
+    right: -2px;
+    z-index: 4;
+    width: 8px;
+    height: 100%;
+    touch-action: none;
+    cursor: col-resize;
+  }
+
+  .nx-table__resizer::after {
+    content: "";
+    position: absolute;
+    top: 7px;
+    bottom: 7px;
+    left: 3px;
+    width: 2px;
+    border-radius: 1px;
+    background: transparent;
+    transition: background-color var(--nx-duration);
+  }
+
+  .nx-table__heading:hover > .nx-table__resizer::after,
+  .nx-table__resizer[data-active]::after {
+    background: var(--nx-primary);
+  }
+
+  .nx-table__resizer[data-active]::after {
+    top: 0;
+    bottom: 0;
+  }
+
+  /* Dragging a heading to another place: the heading being moved, and a line where it will land. */
+  .nx-table__heading[data-dragging] {
+    background: color-mix(in oklab, var(--nx-primary) 14%, var(--nx-table-head-bg));
+  }
+
+  .nx-table__heading[data-drop-before]::before,
+  .nx-table__heading[data-drop-after]::after {
+    content: "";
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    z-index: 5;
+    width: 2px;
+    background: var(--nx-primary);
+  }
+
+  .nx-table__heading[data-drop-before]::before {
+    left: 0;
+  }
+
+  .nx-table__heading[data-drop-after]::after {
+    right: 0;
+  }
+
+  .nx-table[data-col-drag] .nx-table__head {
+    user-select: none;
+  }
+
+  .nx-table[data-col-drag] :is(.nx-table__heading, .nx-table__sort, .nx-table__col-menu, .nx-table__resizer) {
+    cursor: grabbing;
+  }
+
+  .nx-table[data-col-resize] :is(.nx-table__heading, .nx-table__sort, .nx-table__cell) {
+    cursor: col-resize;
+  }
+
+  .nx-table__sort:hover:not(:disabled) {
+    background: color-mix(in oklab, var(--nx-text) 5%, transparent);
+  }
+
+  .nx-table__sort:focus-visible {
+    outline: none;
+    box-shadow: inset 0 0 0 2px var(--nx-primary);
+  }
+
+  .nx-table__sort:disabled {
+    cursor: default;
+  }
+
+  .nx-table__sort-icon {
+    flex-shrink: 0;
+    width: 14px;
+    height: 14px;
+    color: var(--nx-text-muted);
+    opacity: 0;
+    transition: opacity var(--nx-duration);
+  }
+
+  .nx-table__sort[data-sorted] .nx-table__sort-icon {
+    color: var(--nx-text);
+    opacity: 1;
+  }
+
+  .nx-table__sort:is(:hover, :focus-visible):not(:disabled) .nx-table__sort-icon {
+    opacity: 1;
+  }
+
+  @media (hover: none) {
+    .nx-table__sort:not(:disabled) .nx-table__sort-icon {
+      opacity: 0.7;
+    }
+  }
+
+  /* Values */
+  .nx-table__dash,
+  .nx-table__no {
+    color: var(--nx-text-muted);
+  }
+
+  .nx-table__yes {
+    display: inline-flex;
+    color: var(--nx-success);
+  }
+
+  .nx-table__yes .nx-icon {
+    width: 16px;
+    height: 16px;
+  }
+
+  /* An option with a tone: a tag with a dot of its color; the text keeps the text color, readable on every tint. */
+  .nx-table__tag {
+    --nx-tag-tone: var(--nx-text-muted);
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    max-width: 100%;
+    padding: 1px 8px;
+    border-radius: var(--nx-radius-full);
+    background: color-mix(in oklab, var(--nx-tag-tone) 14%, var(--nx-surface));
+    color: var(--nx-text);
+    font-size: var(--nx-text-xs);
+    font-weight: 500;
+    line-height: 1.6;
+    vertical-align: middle;
+  }
+
+  .nx-table__tag::before {
+    content: "";
+    flex-shrink: 0;
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    background: var(--nx-tag-tone);
+  }
+
+  .nx-table__tag[data-tone="primary"] {
+    --nx-tag-tone: var(--nx-primary);
+  }
+
+  .nx-table__tag[data-tone="success"] {
+    --nx-tag-tone: var(--nx-success);
+  }
+
+  .nx-table__tag[data-tone="warning"] {
+    --nx-tag-tone: var(--nx-warning);
+  }
+
+  .nx-table__tag[data-tone="danger"] {
+    --nx-tag-tone: var(--nx-danger);
+  }
+
+  .nx-table__tag[data-tone="info"] {
+    --nx-tag-tone: var(--nx-info);
+  }
+
+  /* Placeholders while the first rows load. */
+  .nx-table__bone {
+    display: block;
+    height: 0.75em;
+    border-radius: var(--nx-radius-sm);
+    background: color-mix(in oklab, var(--nx-text) 9%, transparent);
+    animation: nx-table-pulse 1.6s ease-in-out infinite;
+  }
+
+  .nx-table__cell--end .nx-table__bone {
+    margin-left: auto;
+  }
+
+  @keyframes nx-table-pulse {
+    50% {
+      opacity: 0.45;
+    }
+  }
+
+  /* A message across the table: no rows, no matches, a failed load. */
+  .nx-table__message-cell {
+    padding: 0;
+    background: var(--nx-table-bg);
+  }
+
+  .nx-table__message {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 4px;
+    padding: 40px var(--nx-space-4);
+    text-align: center;
+  }
+
+  .nx-table__message-icon {
+    width: 28px;
+    height: 28px;
+    margin-bottom: 6px;
+    color: var(--nx-text-muted);
+  }
+
+  .nx-table__message[data-tone="danger"] .nx-table__message-icon {
+    color: var(--nx-danger);
+  }
+
+  .nx-table__message-title {
+    margin: 0;
+    font-size: var(--nx-text-md);
+    font-weight: 600;
+  }
+
+  .nx-table__message-detail {
+    max-width: 36rem;
+    margin: 0;
+    color: var(--nx-text-muted);
+    font-size: var(--nx-text-sm);
+  }
+
+  .nx-table__message-actions {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: var(--nx-space-2);
+    margin-top: var(--nx-space-3);
+  }
+
+  /* A thin bar under the header while a load runs with rows on screen. The rows dim only if it takes a moment. */
+  .nx-table__progress {
+    position: absolute;
+    top: calc(var(--nx-table-head-h) - 1px);
+    right: 0;
+    left: 0;
+    z-index: 4;
+    height: 2px;
+    overflow: hidden;
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity var(--nx-duration);
+  }
+
+  .nx-table__progress::before {
+    content: "";
+    position: absolute;
+    inset: 0 auto 0 0;
+    width: 35%;
+    background: var(--nx-primary);
+    animation: nx-table-progress 1.1s ease-in-out infinite;
+  }
+
+  @keyframes nx-table-progress {
+    from {
+      transform: translateX(-100%);
+    }
+    to {
+      transform: translateX(290%);
+    }
+  }
+
+  .nx-table[data-refreshing] .nx-table__progress {
+    opacity: 1;
+  }
+
+  .nx-table__table > tbody {
+    transition: opacity var(--nx-duration);
+  }
+
+  .nx-table[data-refreshing] .nx-table__table > tbody {
+    opacity: 0.55;
+    transition-delay: 180ms;
+  }
+
+  /* The selection bar covers the column headings, so the table does not move when it shows. */
+  .nx-table__selection {
+    position: absolute;
+    top: 0;
+    right: 0;
+    left: var(--nx-table-index-w, var(--nx-table-select-w));
+    z-index: 5;
+    display: flex;
+    align-items: center;
+    gap: var(--nx-space-2);
+    height: calc(var(--nx-table-head-h) - 1px);
+    padding: 0 var(--nx-space-2) 0 2px;
+    background: var(--nx-table-selected);
+  }
+
+  .nx-table__frame:has(.nx-table__selection) .nx-table__heading.nx-table__cell--index {
+    background: var(--nx-table-selected);
+  }
+
+  .nx-table__selection-count {
+    flex-shrink: 0;
+    padding-right: var(--nx-space-2);
+    font-size: var(--nx-text-sm);
+    font-weight: 600;
+    font-variant-numeric: tabular-nums;
+    white-space: nowrap;
+  }
+
+  .nx-table__selection-actions {
+    display: flex;
+    flex: 1 1 auto;
+    align-items: center;
+    gap: 2px;
+    min-width: 0;
+    overflow: hidden;
+  }
+
+  /* Every action on the selected rows in one split button: the name of the one shown must stay readable. */
+  .nx-table__mass {
+    min-width: 0;
+  }
+
+  .nx-table__mass .nx-btn__label,
+  .nx-table__mass .nx-split__main .nx-btn__label {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .nx-table__selection-clear {
+    flex-shrink: 0;
+    margin-left: auto;
+  }
+
+  /* A narrow table keeps the action's name and drops the word "Clear"; it stays for screen readers and in the tooltip. */
+  @container nx-table (max-width: 560px) {
+    .nx-table__selection-clear.nx-btn {
+      width: var(--nx-btn-height);
+      padding: 0;
+    }
+
+    .nx-table__selection-clear .nx-btn__label {
+      position: absolute;
+      width: 1px;
+      height: 1px;
+      overflow: hidden;
+      clip-path: inset(50%);
+      white-space: nowrap;
+    }
+  }
+
+  /* Footer: the range on the left, rows per page and the pager on the right. */
+  .nx-table__footer {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--nx-space-2) var(--nx-space-4);
+    min-height: var(--nx-control-sm);
+  }
+
+  .nx-table__range {
+    margin: 0;
+    color: var(--nx-text-muted);
+    font-size: var(--nx-text-sm);
+    font-variant-numeric: tabular-nums;
+  }
+
+  /* The numbers themselves read as the text colour, so the line is skimmed at a glance. */
+  .nx-table__range b {
+    color: var(--nx-text);
+    font-weight: 600;
+  }
+
+  .nx-table__page-info {
+    color: var(--nx-text-muted);
+    font-size: var(--nx-text-sm);
+    font-variant-numeric: tabular-nums;
+    white-space: nowrap;
+  }
+
+  .nx-table__paging {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--nx-space-2);
+    margin-left: auto;
+  }
+
+  .nx-table__page-size {
+    color: var(--nx-text-muted);
+    font-variant-numeric: tabular-nums;
+  }
+
+  .nx-table__pager {
+    display: flex;
+    align-items: center;
+    gap: 2px;
+  }
+
+  .nx-table__page-list {
+    display: flex;
+    align-items: center;
+    gap: 2px;
+  }
+
+  .nx-table__page {
+    min-width: var(--nx-control-sm);
+    height: var(--nx-control-sm);
+    padding: 0 6px;
+    border: 0;
+    border-radius: var(--nx-radius);
+    background: transparent;
+    color: var(--nx-text);
+    font: inherit;
+    font-size: var(--nx-text-sm);
+    font-variant-numeric: tabular-nums;
+    cursor: pointer;
+    transition: background-color var(--nx-duration);
+  }
+
+  .nx-table__page:hover:not(:disabled, [aria-current]) {
+    background: var(--nx-surface-hover);
+  }
+
+  .nx-table__page:focus-visible {
+    outline: none;
+    box-shadow: var(--nx-focus-ring);
+  }
+
+  .nx-table__page[aria-current] {
+    background: var(--nx-primary-solid);
+    color: var(--nx-primary-text);
+    font-weight: 600;
+    cursor: default;
+  }
+
+  .nx-table__page:disabled {
+    opacity: 0.5;
+    cursor: default;
+  }
+
+  .nx-table__page-gap {
+    min-width: 20px;
+    color: var(--nx-text-muted);
+    text-align: center;
+  }
+
+  /* A narrow table drops the page buttons: "Page 6 of 24" and the arrows are enough. */
+  @container nx-table (max-width: 520px) {
+    .nx-table__page-list {
+      display: none;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .nx-table__bone {
+      animation: none;
+    }
+
+    .nx-table__row[data-flash] > .nx-table__cell {
+      animation: none;
+    }
+
+    .nx-table__row[data-flash] {
+      --nx-row-bg: var(--nx-table-flash);
+    }
+
+    .nx-table__progress::before {
+      width: 100%;
+      animation: none;
+      opacity: 0.6;
+    }
+  }
+}