nexus-shared 3.1.0 → 4.0.0

package/src/Styles/Nexus.Tab.Buttons.css

@@ -1,432 +1,497 @@
-@layer nexus.components {
-  /*
-   * Tab buttons: a track, and an indicator that slides to the selected option.
-   * Light mode: a soft tint of the text color with no frame, so the track suits any panel, and a white indicator
-   * lifted by a soft shadow instead of a hard border.
-   * Dark mode: the raised panel color with an edge, and an indicator lighter than the track (never the darker panel
-   * color), so the selection reads at a glance in every theme.
-   */
-  .nx-tabs {
-    --nx-tabs-height: var(--nx-control-md);
-    --nx-tabs-pad: 3px;
-    --nx-tabs-radius: calc(var(--nx-radius) + 2px);
-    --nx-tabs-track: light-dark(color-mix(in oklab, var(--nx-text) 5%, transparent), var(--nx-surface-2));
-    --nx-tabs-track-border: light-dark(transparent, var(--nx-border));
-    --nx-tabs-track-shadow: inset 0 1px 2px light-dark(transparent, rgb(0 0 0 / 0.35));
-    /* Lighter than the panel in light themes too, whose panels are not always white (Nord, Solarized, Dracula). */
-    --nx-tabs-indicator: light-dark(color-mix(in oklab, var(--nx-surface), #fff 65%), color-mix(in oklab, var(--nx-surface-hover), var(--nx-text) 12%));
-    --nx-tabs-indicator-border: light-dark(transparent, color-mix(in oklab, var(--nx-border-strong), var(--nx-text) 18%));
-    --nx-tabs-indicator-shadow:
-      0 1px 2px light-dark(rgb(16 24 40 / 0.1), rgb(0 0 0 / 0.5)), 0 1px 3px light-dark(rgb(16 24 40 / 0.06), rgb(0 0 0 / 0.3)),
-      0 0 0 1px light-dark(rgb(16 24 40 / 0.04), transparent);
-    --nx-tabs-hover: color-mix(in oklab, var(--nx-text) 5%, transparent);
-    /* Unselected labels: a little darker than muted text in light mode, to keep AA contrast on the tinted track. */
-    --nx-tabs-color: light-dark(color-mix(in oklab, var(--nx-text-muted), var(--nx-text) 20%), var(--nx-text-muted));
-    --nx-tabs-active-color: var(--nx-text);
-    --nx-tabs-active-icon: var(--nx-primary);
-
-    position: relative;
-    isolation: isolate;
-    display: inline-grid;
-    grid-auto-columns: 1fr;
-    grid-auto-flow: column;
-    height: var(--nx-tabs-height);
-    padding: var(--nx-tabs-pad);
-    border: 1px solid var(--nx-tabs-track-border);
-    border-radius: var(--nx-tabs-radius);
-    background: var(--nx-tabs-track);
-    box-shadow: var(--nx-tabs-track-shadow);
-    vertical-align: middle;
-  }
-
-  .nx-tabs--block {
-    display: grid;
-    width: 100%;
-  }
-
-  /* Primary: a solid primary indicator with its own text color, for a choice that matters, such as a plan. */
-  .nx-tabs--primary {
-    --nx-tabs-indicator: var(--nx-primary-solid);
-    --nx-tabs-indicator-border: transparent;
-    --nx-tabs-indicator-shadow: 0 1px 2px color-mix(in oklab, var(--nx-primary) 35%, transparent);
-    --nx-tabs-active-color: var(--nx-primary-text);
-    --nx-tabs-active-icon: var(--nx-primary-text);
-  }
-
-  /* One column wide; --nx-tabs-count and --nx-tabs-index come from the component. */
-  .nx-tabs__indicator {
-    position: absolute;
-    z-index: -1;
-    top: var(--nx-tabs-pad);
-    bottom: var(--nx-tabs-pad);
-    left: var(--nx-tabs-pad);
-    width: calc((100% - 2 * var(--nx-tabs-pad)) / var(--nx-tabs-count));
-    border: 1px solid var(--nx-tabs-indicator-border);
-    border-radius: calc(var(--nx-tabs-radius) - 2px);
-    background: var(--nx-tabs-indicator);
-    box-shadow: var(--nx-tabs-indicator-shadow);
-    transform: translateX(calc(100% * var(--nx-tabs-index)));
-    transition:
-      transform 240ms cubic-bezier(0.2, 0, 0, 1),
-      background-color var(--nx-duration);
-  }
-
-  .nx-tabs__option {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    gap: 6px;
-    min-width: 0;
-    padding: 0 var(--nx-space-3);
-    border-radius: calc(var(--nx-tabs-radius) - 2px);
-    color: var(--nx-tabs-color);
-    font-size: var(--nx-text-sm);
-    font-weight: 500;
-    line-height: 1.3;
-    white-space: nowrap;
-    cursor: pointer;
-    user-select: none;
-    transition:
-      color var(--nx-duration),
-      background-color var(--nx-duration);
-  }
-
-  /* Room below the baseline, so the ellipsis clip never cuts letters such as y and g. */
-  .nx-tabs__label {
-    overflow: hidden;
-    padding-block: 2px;
-    text-overflow: ellipsis;
-  }
-
-  .nx-tabs__option .nx-icon {
-    width: 1.15em;
-    height: 1.15em;
-    vertical-align: 0;
-    transition: color var(--nx-duration);
-  }
-
-  .nx-tabs__option:hover:not(:has(:checked, :disabled)) {
-    background: var(--nx-tabs-hover);
-    color: var(--nx-text);
-  }
-
-  .nx-tabs__option:has(:checked) {
-    color: var(--nx-tabs-active-color);
-    cursor: default;
-  }
-
-  .nx-tabs__option:has(:checked) .nx-icon {
-    color: var(--nx-tabs-active-icon);
-  }
-
-  .nx-tabs__option:has(:focus-visible) {
-    box-shadow: var(--nx-focus-ring);
-  }
-
-  .nx-tabs__option:has(:disabled) {
-    cursor: not-allowed;
-    opacity: 0.45;
-  }
-
-  /* Sizes */
-  .nx-tabs--sm {
-    --nx-tabs-height: var(--nx-control-sm);
-    --nx-tabs-pad: 2px;
-    --nx-tabs-radius: var(--nx-radius);
-  }
-
-  .nx-tabs--sm .nx-tabs__option {
-    gap: 4px;
-    padding: 0 var(--nx-space-2);
-    font-size: var(--nx-text-xs);
-  }
-
-  .nx-tabs--lg {
-    --nx-tabs-height: var(--nx-control-lg);
-    --nx-tabs-pad: 4px;
-    --nx-tabs-radius: var(--nx-radius-lg);
-  }
-
-  .nx-tabs--lg .nx-tabs__option {
-    gap: var(--nx-space-2);
-    padding: 0 var(--nx-space-4);
-    font-size: var(--nx-text-md);
-  }
-
-  /*
-   * labels="selected": icons only, and the selected option grows to show its label. Options differ in width,
-   * so the selected option draws the indicator itself, and its label column animates from 0 to full width.
-   */
-  .nx-tabs--labels-selected {
-    display: inline-flex;
-    gap: 2px;
-  }
-
-  .nx-tabs--labels-selected.nx-tabs--block {
-    display: flex;
-  }
-
-  /* Icon-only options are square: side padding centers the 1.15em icon in the option's height. */
-  .nx-tabs--labels-selected .nx-tabs__option {
-    flex: 0 0 auto;
-    gap: 0;
-    padding: 0 calc((var(--nx-tabs-height) - 2 * var(--nx-tabs-pad) - 2px - 1.15em) / 2);
-    transition:
-      color var(--nx-duration),
-      background-color var(--nx-duration),
-      box-shadow var(--nx-duration),
-      padding 240ms cubic-bezier(0.2, 0, 0, 1);
-  }
-
-  .nx-tabs--labels-selected .nx-tabs__option:has(:checked) {
-    padding: 0 var(--nx-space-3);
-    background: var(--nx-tabs-indicator);
-    box-shadow:
-      inset 0 0 0 1px var(--nx-tabs-indicator-border),
-      var(--nx-tabs-indicator-shadow);
-  }
-
-  /* In a full-width group, the selected option takes the free space. */
-  .nx-tabs--labels-selected.nx-tabs--block .nx-tabs__option:has(:checked) {
-    flex: 1 1 auto;
-  }
-
-  /* The label column and the space before it both animate from 0, so a hidden label takes no width at all. */
-  .nx-tabs--labels-selected .nx-tabs__label {
-    display: grid;
-    grid-template-columns: 0fr;
-    margin-inline-start: 0;
-    padding-block: 0;
-    transition:
-      grid-template-columns 240ms cubic-bezier(0.2, 0, 0, 1),
-      margin 240ms cubic-bezier(0.2, 0, 0, 1);
-  }
-
-  .nx-tabs--labels-selected .nx-tabs__option:has(:checked) .nx-tabs__label {
-    grid-template-columns: 1fr;
-    margin-inline-start: 6px;
-  }
-
-  /* An option without an icon always shows its label. */
-  .nx-tabs--labels-selected .nx-tabs__option:not(:has(.nx-icon)) .nx-tabs__label {
-    grid-template-columns: 1fr;
-  }
-
-  /*
-   * `auto`: in a container wide enough for them, every option says what it is, as the chosen one does. 900px is a data
-   * table's bar with its Add, four lists, Reload, ⋮ and a full search on one line, and room to spare.
-   */
-  @container (min-width: 900px) {
-    .nx-tabs--labels-auto .nx-tabs__option {
-      padding: 0 var(--nx-space-3);
-    }
-
-    .nx-tabs--labels-auto .nx-tabs__label {
-      grid-template-columns: 1fr;
-      margin-inline-start: 6px;
-    }
-  }
-
-  .nx-tabs--labels-selected .nx-tabs__text {
-    min-width: 0;
-    overflow: hidden;
-    padding-block: 2px;
-    text-overflow: ellipsis;
-  }
-
-  /*
-   * multiple: several at once. There is no single place for a sliding indicator, so every chosen option is raised on
-   * its own, exactly as the one choice's indicator is, and an option that is not chosen sits flat on the track. The
-   * options wrap onto more rows when they do not fit, each row as tall as a one-row track's options, so a picker of
-   * 26 letters is one track of several rows rather than a line that runs off a phone. A one-character option is
-   * square, so a row of letters lines up.
-   */
-  .nx-tabs--multiple {
-    --nx-tabs-option-height: calc(var(--nx-tabs-height) - 2 * var(--nx-tabs-pad) - 2px);
-
-    display: inline-flex;
-    flex-wrap: wrap;
-    gap: 2px;
-    max-width: 100%;
-    height: auto;
-  }
-
-  .nx-tabs--multiple.nx-tabs--block {
-    display: flex;
-  }
-
-  .nx-tabs--multiple .nx-tabs__option {
-    flex: 0 0 auto;
-    min-width: var(--nx-tabs-option-height);
-    height: var(--nx-tabs-option-height);
-  }
-
-  /* A chosen option can be unchosen, so it keeps the pointer, and it keeps its raised look under the pointer too. */
-  .nx-tabs--multiple .nx-tabs__option:has(:checked) {
-    background: var(--nx-tabs-indicator);
-    box-shadow:
-      inset 0 0 0 1px var(--nx-tabs-indicator-border),
-      var(--nx-tabs-indicator-shadow);
-    cursor: pointer;
-  }
-
-  .nx-tabs--multiple .nx-tabs__option:has(:checked):has(:focus-visible) {
-    box-shadow:
-      inset 0 0 0 1px var(--nx-tabs-indicator-border),
-      var(--nx-focus-ring);
-  }
-
-  /* A finger needs more than a small button's 22px: on a touch screen every option is a medium control's height, square at the least. */
-  @media (pointer: coarse) {
-    .nx-tabs--multiple {
-      --nx-tabs-option-height: var(--nx-control-md);
-    }
-  }
-
-  /*
-   * design="list": a vertical list of rows, for settings pages and side panels. There is no track: rows sit on the
-   * panel, the selected row is tinted (darker in light mode, lighter in dark mode) and marked by a bar at its start,
-   * so the choice reads at a glance in every theme, and the label turns bold as a second cue.
-   */
-  .nx-tabs--list {
-    --nx-tabs-list-row: var(--nx-control-md);
-    --nx-tabs-list-font: var(--nx-text-md);
-    --nx-tabs-list-pad: 6px var(--nx-space-3);
-    --nx-tabs-list-gap: 10px;
-    --nx-tabs-list-selected: light-dark(color-mix(in oklab, var(--nx-text) 6%, transparent), color-mix(in oklab, var(--nx-text) 10%, transparent));
-    --nx-tabs-list-bar: var(--nx-primary);
-    --nx-tabs-list-badge: color-mix(in oklab, var(--nx-text) 8%, transparent);
-    --nx-tabs-list-badge-color: var(--nx-text-muted);
-
-    display: grid;
-    grid-auto-flow: row;
-    grid-auto-columns: auto;
-    gap: 2px;
-    width: 100%;
-    height: auto;
-    padding: 0;
-    border: 0;
-    border-radius: 0;
-    background: none;
-    box-shadow: none;
-  }
-
-  .nx-tabs--list .nx-tabs__option {
-    position: relative;
-    justify-content: flex-start;
-    gap: var(--nx-tabs-list-gap);
-    min-height: var(--nx-tabs-list-row);
-    padding: var(--nx-tabs-list-pad);
-    border-radius: var(--nx-radius);
-    font-size: var(--nx-tabs-list-font);
-    text-align: left;
-    white-space: normal;
-  }
-
-  /* The bar at the start of the selected row grows in from the middle. */
-  .nx-tabs--list .nx-tabs__option::before {
-    content: "";
-    position: absolute;
-    top: 8px;
-    bottom: 8px;
-    left: 0;
-    width: 3px;
-    border-radius: 3px;
-    background: var(--nx-tabs-list-bar);
-    opacity: 0;
-    transform: scaleY(0.3);
-    transition:
-      opacity var(--nx-duration),
-      transform 200ms cubic-bezier(0.2, 0, 0, 1);
-  }
-
-  .nx-tabs--list .nx-tabs__option:has(:checked) {
-    background: var(--nx-tabs-list-selected);
-  }
-
-  /* A list of several choices: a chosen row can be unchosen, so it keeps the pointer. */
-  .nx-tabs--list:not([role="radiogroup"]) .nx-tabs__option:has(:checked) {
-    cursor: pointer;
-  }
-
-  .nx-tabs--list .nx-tabs__option:has(:checked)::before {
-    opacity: 1;
-    transform: none;
-  }
-
-  .nx-tabs--list .nx-tabs__option:has(:checked) .nx-tabs__text {
-    font-weight: 600;
-  }
-
-  .nx-tabs--list .nx-tabs__option .nx-icon {
-    flex-shrink: 0;
-  }
-
-  .nx-tabs--list .nx-tabs__label {
-    display: grid;
-    flex: 1 1 auto;
-    min-width: 0;
-    padding-block: 0;
-  }
-
-  .nx-tabs--list .nx-tabs__text {
-    overflow: hidden;
-    line-height: 1.35;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  .nx-tabs__description {
-    color: var(--nx-text-muted);
-    font-size: var(--nx-text-xs);
-    font-weight: 400;
-    line-height: 1.4;
-  }
-
-  .nx-tabs__badge {
-    flex-shrink: 0;
-    min-width: 20px;
-    padding: 0 7px;
-    border-radius: var(--nx-radius-full);
-    background: var(--nx-tabs-list-badge);
-    color: var(--nx-tabs-list-badge-color);
-    font-size: var(--nx-text-xs);
-    font-weight: 600;
-    font-variant-numeric: tabular-nums;
-    line-height: 20px;
-    text-align: center;
-  }
-
-  /* Primary: the selected row takes the primary soft background and the primary text. */
-  .nx-tabs--list.nx-tabs--primary {
-    --nx-tabs-list-selected: var(--nx-primary-soft);
-    --nx-tabs-active-color: var(--nx-primary);
-    --nx-tabs-active-icon: var(--nx-primary);
-  }
-
-  .nx-tabs--list.nx-tabs--primary .nx-tabs__option:has(:checked) .nx-tabs__badge {
-    background: var(--nx-primary-solid);
-    color: var(--nx-primary-text);
-  }
-
-  .nx-tabs--list.nx-tabs--sm {
-    --nx-tabs-list-row: var(--nx-control-sm);
-    --nx-tabs-list-font: var(--nx-text-sm);
-    --nx-tabs-list-pad: 4px var(--nx-space-2);
-    --nx-tabs-list-gap: 8px;
-  }
-
-  .nx-tabs--list.nx-tabs--lg {
-    --nx-tabs-list-row: var(--nx-control-lg);
-    --nx-tabs-list-font: var(--nx-text-lg);
-    --nx-tabs-list-pad: 8px var(--nx-space-4);
-    --nx-tabs-list-gap: 12px;
-  }
-
-  [data-nx-motion="reduce"] .nx-tabs__indicator,
-  [data-nx-motion="reduce"] .nx-tabs--multiple .nx-tabs__option,
-  [data-nx-motion="reduce"] .nx-tabs--labels-selected :is(.nx-tabs__option, .nx-tabs__label),
-  [data-nx-motion="reduce"] .nx-tabs--list .nx-tabs__option::before {
-    transition: none;
-  }
-}
+@layer nexus.components {
+  /*
+   * Tab buttons: a track, and an indicator that slides to the selected option.
+   * Light mode: a soft tint of the text color with no frame, so the track suits any panel, and a white indicator
+   * lifted by a soft shadow instead of a hard border.
+   * Dark mode: the raised panel color with an edge, and an indicator lighter than the track (never the darker panel
+   * color), so the selection reads at a glance in every theme.
+   */
+  .nx-tabs {
+    --nx-tabs-height: var(--nx-control-md);
+    --nx-tabs-pad: 3px;
+    --nx-tabs-radius: calc(var(--nx-radius) + 2px);
+    --nx-tabs-track: light-dark(color-mix(in oklab, var(--nx-text) 5%, transparent), var(--nx-surface-2));
+    --nx-tabs-track-border: light-dark(transparent, var(--nx-border));
+    --nx-tabs-track-shadow: inset 0 1px 2px light-dark(transparent, rgb(0 0 0 / 0.35));
+    /* Lighter than the panel in light themes too, whose panels are not always white (Nord, Solarized, Dracula). */
+    --nx-tabs-indicator: light-dark(color-mix(in oklab, var(--nx-surface), #fff 65%), color-mix(in oklab, var(--nx-surface-hover), var(--nx-text) 12%));
+    --nx-tabs-indicator-border: light-dark(transparent, color-mix(in oklab, var(--nx-border-strong), var(--nx-text) 18%));
+    --nx-tabs-indicator-shadow:
+      0 1px 2px light-dark(rgb(16 24 40 / 0.1), rgb(0 0 0 / 0.5)), 0 1px 3px light-dark(rgb(16 24 40 / 0.06), rgb(0 0 0 / 0.3)),
+      0 0 0 1px light-dark(rgb(16 24 40 / 0.04), transparent);
+    --nx-tabs-hover: color-mix(in oklab, var(--nx-text) 5%, transparent);
+    /* Unselected labels: a little darker than muted text in light mode, to keep AA contrast on the tinted track. */
+    --nx-tabs-color: light-dark(color-mix(in oklab, var(--nx-text-muted), var(--nx-text) 20%), var(--nx-text-muted));
+    --nx-tabs-active-color: var(--nx-text);
+    --nx-tabs-active-icon: var(--nx-primary);
+
+    position: relative;
+    isolation: isolate;
+    display: inline-grid;
+    grid-auto-columns: 1fr;
+    grid-auto-flow: column;
+    height: var(--nx-tabs-height);
+    padding: var(--nx-tabs-pad);
+    border: 1px solid var(--nx-tabs-track-border);
+    border-radius: var(--nx-tabs-radius);
+    background: var(--nx-tabs-track);
+    box-shadow: var(--nx-tabs-track-shadow);
+    vertical-align: middle;
+  }
+
+  .nx-tabs--block {
+    display: grid;
+    width: 100%;
+  }
+
+  /* Primary: a solid primary indicator with its own text color, for a choice that matters, such as a plan. */
+  .nx-tabs--primary {
+    --nx-tabs-indicator: var(--nx-primary-solid);
+    --nx-tabs-indicator-border: transparent;
+    --nx-tabs-indicator-shadow: 0 1px 2px color-mix(in oklab, var(--nx-primary) 35%, transparent);
+    --nx-tabs-active-color: var(--nx-primary-text);
+    --nx-tabs-active-icon: var(--nx-primary-text);
+  }
+
+  /* One column wide; --nx-tabs-count and --nx-tabs-index come from the component. */
+  .nx-tabs__indicator {
+    position: absolute;
+    z-index: -1;
+    top: var(--nx-tabs-pad);
+    bottom: var(--nx-tabs-pad);
+    left: var(--nx-tabs-pad);
+    width: calc((100% - 2 * var(--nx-tabs-pad)) / var(--nx-tabs-count));
+    border: 1px solid var(--nx-tabs-indicator-border);
+    border-radius: calc(var(--nx-tabs-radius) - 2px);
+    background: var(--nx-tabs-indicator);
+    box-shadow: var(--nx-tabs-indicator-shadow);
+    transform: translateX(calc(100% * var(--nx-tabs-index)));
+    transition:
+      transform 240ms cubic-bezier(0.2, 0, 0, 1),
+      background-color var(--nx-duration);
+  }
+
+  .nx-tabs__option {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 6px;
+    min-width: 0;
+    padding: 0 var(--nx-space-3);
+    border-radius: calc(var(--nx-tabs-radius) - 2px);
+    color: var(--nx-tabs-color);
+    font-size: var(--nx-text-sm);
+    font-weight: 500;
+    line-height: 1.3;
+    white-space: nowrap;
+    cursor: pointer;
+    user-select: none;
+    transition:
+      color var(--nx-duration),
+      background-color var(--nx-duration);
+  }
+
+  /* Room below the baseline, so the ellipsis clip never cuts letters such as y and g. */
+  .nx-tabs__label {
+    overflow: hidden;
+    padding-block: 2px;
+    text-overflow: ellipsis;
+  }
+
+  .nx-tabs__option .nx-icon {
+    width: 1.15em;
+    height: 1.15em;
+    vertical-align: 0;
+    transition: color var(--nx-duration);
+  }
+
+  .nx-tabs__option:hover:not(:has(:checked, :disabled), [aria-selected="true"], :disabled) {
+    background: var(--nx-tabs-hover);
+    color: var(--nx-text);
+  }
+
+  .nx-tabs__option:is(:has(:checked), [aria-selected="true"]) {
+    color: var(--nx-tabs-active-color);
+    cursor: default;
+  }
+
+  .nx-tabs__option:is(:has(:checked), [aria-selected="true"]) .nx-icon {
+    color: var(--nx-tabs-active-icon);
+  }
+
+  .nx-tabs__option:is(:has(:focus-visible), :focus-visible) {
+    box-shadow: var(--nx-focus-ring);
+  }
+
+  .nx-tabs__option:is(:has(:disabled), :disabled) {
+    cursor: not-allowed;
+    opacity: 0.45;
+  }
+
+  /* Sizes */
+  .nx-tabs--sm {
+    --nx-tabs-height: var(--nx-control-sm);
+    --nx-tabs-pad: 2px;
+    --nx-tabs-radius: var(--nx-radius);
+  }
+
+  .nx-tabs--sm .nx-tabs__option {
+    gap: 4px;
+    padding: 0 var(--nx-space-2);
+    font-size: var(--nx-text-xs);
+  }
+
+  .nx-tabs--lg {
+    --nx-tabs-height: var(--nx-control-lg);
+    --nx-tabs-pad: 4px;
+    --nx-tabs-radius: var(--nx-radius-lg);
+  }
+
+  .nx-tabs--lg .nx-tabs__option {
+    gap: var(--nx-space-2);
+    padding: 0 var(--nx-space-4);
+    font-size: var(--nx-text-md);
+  }
+
+  /*
+   * labels="selected": icons only, and the selected option grows to show its label. Options differ in width,
+   * so the selected option draws the indicator itself, and its label column animates from 0 to full width.
+   */
+  .nx-tabs--labels-selected {
+    display: inline-flex;
+    gap: 2px;
+  }
+
+  .nx-tabs--labels-selected.nx-tabs--block {
+    display: flex;
+  }
+
+  /* Icon-only options are square: side padding centers the 1.15em icon in the option's height. */
+  .nx-tabs--labels-selected .nx-tabs__option {
+    flex: 0 0 auto;
+    gap: 0;
+    padding: 0 calc((var(--nx-tabs-height) - 2 * var(--nx-tabs-pad) - 2px - 1.15em) / 2);
+    transition:
+      color var(--nx-duration),
+      background-color var(--nx-duration),
+      box-shadow var(--nx-duration),
+      padding 240ms cubic-bezier(0.2, 0, 0, 1);
+  }
+
+  .nx-tabs--labels-selected .nx-tabs__option:is(:has(:checked), [aria-selected="true"]) {
+    padding: 0 var(--nx-space-3);
+    background: var(--nx-tabs-indicator);
+    box-shadow:
+      inset 0 0 0 1px var(--nx-tabs-indicator-border),
+      var(--nx-tabs-indicator-shadow);
+  }
+
+  /* In a full-width group, the selected option takes the free space. */
+  .nx-tabs--labels-selected.nx-tabs--block .nx-tabs__option:is(:has(:checked), [aria-selected="true"]) {
+    flex: 1 1 auto;
+  }
+
+  /* The label column and the space before it both animate from 0, so a hidden label takes no width at all. */
+  .nx-tabs--labels-selected .nx-tabs__label {
+    display: grid;
+    grid-template-columns: 0fr;
+    margin-inline-start: 0;
+    padding-block: 0;
+    transition:
+      grid-template-columns 240ms cubic-bezier(0.2, 0, 0, 1),
+      margin 240ms cubic-bezier(0.2, 0, 0, 1);
+  }
+
+  .nx-tabs--labels-selected .nx-tabs__option:is(:has(:checked), [aria-selected="true"]) .nx-tabs__label {
+    grid-template-columns: 1fr;
+    margin-inline-start: 6px;
+  }
+
+  /* An option without an icon always shows its label. */
+  .nx-tabs--labels-selected .nx-tabs__option:not(:has(.nx-icon)) .nx-tabs__label {
+    grid-template-columns: 1fr;
+  }
+
+  /*
+   * `auto`: in a container wide enough for them, every option says what it is, as the chosen one does. 900px is a data
+   * table's bar with its Add, four lists, Reload, ⋮ and a full search on one line, and room to spare.
+   */
+  @container (min-width: 900px) {
+    .nx-tabs--labels-auto .nx-tabs__option {
+      padding: 0 var(--nx-space-3);
+    }
+
+    .nx-tabs--labels-auto .nx-tabs__label {
+      grid-template-columns: 1fr;
+      margin-inline-start: 6px;
+    }
+  }
+
+  .nx-tabs--labels-selected .nx-tabs__text {
+    min-width: 0;
+    overflow: hidden;
+    padding-block: 2px;
+    text-overflow: ellipsis;
+  }
+
+  /*
+   * multiple: several at once. There is no single place for a sliding indicator, so every chosen option is raised on
+   * its own, exactly as the one choice's indicator is, and an option that is not chosen sits flat on the track. The
+   * options wrap onto more rows when they do not fit, each row as tall as a one-row track's options, so a picker of
+   * 26 letters is one track of several rows rather than a line that runs off a phone. A one-character option is
+   * square, so a row of letters lines up. A choice group drawn as tabs (`RadioGroup design="tabs"`, `nx-tabs--wrap`)
+   * is drawn the same way: its choice lives in the inputs, not in a value the track could slide an indicator to.
+   */
+  :is(.nx-tabs--multiple, .nx-tabs--wrap) {
+    --nx-tabs-option-height: calc(var(--nx-tabs-height) - 2 * var(--nx-tabs-pad) - 2px);
+
+    display: inline-flex;
+    flex-wrap: wrap;
+    gap: 2px;
+    max-width: 100%;
+    height: auto;
+  }
+
+  :is(.nx-tabs--multiple, .nx-tabs--wrap).nx-tabs--block {
+    display: flex;
+  }
+
+  :is(.nx-tabs--multiple, .nx-tabs--wrap) .nx-tabs__option {
+    flex: 0 0 auto;
+    min-width: var(--nx-tabs-option-height);
+    height: var(--nx-tabs-option-height);
+  }
+
+  /* A chosen option keeps its raised look under the pointer too. */
+  :is(.nx-tabs--multiple, .nx-tabs--wrap) .nx-tabs__option:has(:checked) {
+    background: var(--nx-tabs-indicator);
+    box-shadow:
+      inset 0 0 0 1px var(--nx-tabs-indicator-border),
+      var(--nx-tabs-indicator-shadow);
+  }
+
+  /* One of several can be unchosen, so it keeps the pointer. */
+  .nx-tabs--multiple .nx-tabs__option:has(:checked) {
+    cursor: pointer;
+  }
+
+  :is(.nx-tabs--multiple, .nx-tabs--wrap) .nx-tabs__option:has(:checked):has(:focus-visible) {
+    box-shadow:
+      inset 0 0 0 1px var(--nx-tabs-indicator-border),
+      var(--nx-focus-ring);
+  }
+
+  /* A finger needs more than a small button's 22px: on a touch screen every option is a medium control's height, square at the least. */
+  @media (pointer: coarse) {
+    :is(.nx-tabs--multiple, .nx-tabs--wrap) {
+      --nx-tabs-option-height: var(--nx-control-md);
+    }
+  }
+
+  /*
+   * design="list": a vertical list of rows, for settings pages and side panels. There is no track: rows sit on the
+   * panel, the selected row is tinted (darker in light mode, lighter in dark mode) and marked by a bar at its start,
+   * so the choice reads at a glance in every theme, and the label turns bold as a second cue.
+   */
+  .nx-tabs--list {
+    --nx-tabs-list-row: var(--nx-control-md);
+    --nx-tabs-list-font: var(--nx-text-md);
+    --nx-tabs-list-pad: 6px var(--nx-space-3);
+    --nx-tabs-list-gap: 10px;
+    --nx-tabs-list-selected: light-dark(color-mix(in oklab, var(--nx-text) 6%, transparent), color-mix(in oklab, var(--nx-text) 10%, transparent));
+    --nx-tabs-list-bar: var(--nx-primary);
+    --nx-tabs-list-badge: color-mix(in oklab, var(--nx-text) 8%, transparent);
+    --nx-tabs-list-badge-color: var(--nx-text-muted);
+
+    display: grid;
+    grid-auto-flow: row;
+    grid-auto-columns: auto;
+    gap: 2px;
+    width: 100%;
+    height: auto;
+    padding: 0;
+    border: 0;
+    border-radius: 0;
+    background: none;
+    box-shadow: none;
+  }
+
+  .nx-tabs--list .nx-tabs__option {
+    position: relative;
+    justify-content: flex-start;
+    gap: var(--nx-tabs-list-gap);
+    min-height: var(--nx-tabs-list-row);
+    padding: var(--nx-tabs-list-pad);
+    border-radius: var(--nx-radius);
+    font-size: var(--nx-tabs-list-font);
+    text-align: left;
+    white-space: normal;
+  }
+
+  /* The bar at the start of the selected row grows in from the middle. */
+  .nx-tabs--list .nx-tabs__option::before {
+    content: "";
+    position: absolute;
+    top: 8px;
+    bottom: 8px;
+    left: 0;
+    width: 3px;
+    border-radius: 3px;
+    background: var(--nx-tabs-list-bar);
+    opacity: 0;
+    transform: scaleY(0.3);
+    transition:
+      opacity var(--nx-duration),
+      transform 200ms cubic-bezier(0.2, 0, 0, 1);
+  }
+
+  .nx-tabs--list .nx-tabs__option:is(:has(:checked), [aria-selected="true"]) {
+    background: var(--nx-tabs-list-selected);
+  }
+
+  /* A list of several choices: a chosen row can be unchosen, so it keeps the pointer. */
+  .nx-tabs--list:not([role="radiogroup"], [role="tablist"]) .nx-tabs__option:is(:has(:checked), [aria-selected="true"]) {
+    cursor: pointer;
+  }
+
+  .nx-tabs--list .nx-tabs__option:is(:has(:checked), [aria-selected="true"])::before {
+    opacity: 1;
+    transform: none;
+  }
+
+  .nx-tabs--list .nx-tabs__option:is(:has(:checked), [aria-selected="true"]) .nx-tabs__text {
+    font-weight: 600;
+  }
+
+  .nx-tabs--list .nx-tabs__option .nx-icon {
+    flex-shrink: 0;
+  }
+
+  .nx-tabs--list .nx-tabs__label {
+    display: grid;
+    flex: 1 1 auto;
+    min-width: 0;
+    padding-block: 0;
+  }
+
+  .nx-tabs--list .nx-tabs__text {
+    overflow: hidden;
+    line-height: 1.35;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .nx-tabs__description {
+    color: var(--nx-text-muted);
+    font-size: var(--nx-text-xs);
+    font-weight: 400;
+    line-height: 1.4;
+  }
+
+  .nx-tabs__badge {
+    flex-shrink: 0;
+    min-width: 20px;
+    padding: 0 7px;
+    border-radius: var(--nx-radius-full);
+    background: var(--nx-tabs-list-badge);
+    color: var(--nx-tabs-list-badge-color);
+    font-size: var(--nx-text-xs);
+    font-weight: 600;
+    font-variant-numeric: tabular-nums;
+    line-height: 20px;
+    text-align: center;
+  }
+
+  /* Primary: the selected row takes the primary soft background and the primary text. */
+  .nx-tabs--list.nx-tabs--primary {
+    --nx-tabs-list-selected: var(--nx-primary-soft);
+    --nx-tabs-active-color: var(--nx-primary);
+    --nx-tabs-active-icon: var(--nx-primary);
+  }
+
+  .nx-tabs--list.nx-tabs--primary .nx-tabs__option:is(:has(:checked), [aria-selected="true"]) .nx-tabs__badge {
+    background: var(--nx-primary-solid);
+    color: var(--nx-primary-text);
+  }
+
+  .nx-tabs--list.nx-tabs--sm {
+    --nx-tabs-list-row: var(--nx-control-sm);
+    --nx-tabs-list-font: var(--nx-text-sm);
+    --nx-tabs-list-pad: 4px var(--nx-space-2);
+    --nx-tabs-list-gap: 8px;
+  }
+
+  .nx-tabs--list.nx-tabs--lg {
+    --nx-tabs-list-row: var(--nx-control-lg);
+    --nx-tabs-list-font: var(--nx-text-lg);
+    --nx-tabs-list-pad: 8px var(--nx-space-4);
+    --nx-tabs-list-gap: 12px;
+  }
+
+  /*
+   * Tabs (`Tabs`): the same options as buttons with role="tab", marked by aria-selected rather than a checked radio.
+   * Only what a button brings of its own is taken away; the ring is the options' own box-shadow.
+   */
+  button.nx-tabs__option {
+    margin: 0;
+    border: 0;
+    background: none;
+    font-family: inherit;
+    outline: none;
+  }
+
+  [role="tablist"] .nx-tabs__option[aria-selected="true"] {
+    cursor: default;
+  }
+
+  /*
+   * design="auto": the list, until its container (a popup's workspace) is narrower than 720px; there the same rows lie
+   * in one strip that scrolls sideways, the bar under the chosen one. The strip keeps room for the focus ring, which a
+   * scrolling box would cut off.
+   */
+  @container (max-width: 719.98px) {
+    .nx-tabs--auto {
+      grid-auto-columns: max-content;
+      grid-auto-flow: column;
+      padding: 3px;
+      overflow-x: auto;
+      overscroll-behavior-x: contain;
+      scrollbar-width: none;
+    }
+
+    .nx-tabs--auto .nx-tabs__option {
+      white-space: nowrap;
+    }
+
+    .nx-tabs--auto .nx-tabs__option::before {
+      top: auto;
+      right: 10px;
+      bottom: 0;
+      left: 10px;
+      width: auto;
+      height: 3px;
+      transform: scaleX(0.3);
+    }
+
+    .nx-tabs--auto .nx-tabs__description {
+      display: none;
+    }
+  }
+
+  /* A tab's panel: it takes the focus when it holds nothing that does, so its ring is drawn inside it. */
+  .nx-tab-panel {
+    min-width: 0;
+  }
+
+  .nx-tab-panel:focus-visible {
+    outline: 2px solid var(--nx-primary);
+    outline-offset: -2px;
+  }
+
+  [data-nx-motion="reduce"] .nx-tabs__indicator,
+  [data-nx-motion="reduce"] :is(.nx-tabs--multiple, .nx-tabs--wrap) .nx-tabs__option,
+  [data-nx-motion="reduce"] .nx-tabs--labels-selected :is(.nx-tabs__option, .nx-tabs__label),
+  [data-nx-motion="reduce"] .nx-tabs--list .nx-tabs__option::before {
+    transition: none;
+  }
+}