nexus-shared 2.0.0 → 3.1.0

package/src/Styles/Nexus.Dropdown.css

@@ -1,774 +1,725 @@
-@layer nexus.components {
-  /*
-   * Dropdown: the field shell holds the chosen value (or chips for several) over a search input, and the list opens in
-   * a popover placed by the component. Rows are flex rows, or, with columns, subgrid rows of one grid, so every column
-   * lines up down the list like a table. Current values that cannot be picked again carry a tag and a dashed chip.
-   */
-  .nx-field--dropdown {
-    --nx-dropdown-chip: 22px;
-    --nx-dropdown-value-media: 20px;
-  }
-
-  .nx-field--dropdown.nx-field--sm {
-    --nx-dropdown-chip: 18px;
-    --nx-dropdown-value-media: 16px;
-  }
-
-  .nx-field--dropdown.nx-field--lg {
-    --nx-dropdown-chip: 26px;
-    --nx-dropdown-value-media: 22px;
-  }
-
-  /* The box */
-  .nx-dropdown__control {
-    position: relative;
-    flex: 1 1 auto;
-    align-self: stretch;
-    min-width: 0;
-    cursor: pointer;
-  }
-
-  .nx-field[data-disabled] .nx-dropdown__control {
-    cursor: not-allowed;
-  }
-
-  .nx-field[data-readonly] .nx-dropdown__control {
-    cursor: default;
-  }
-
-  .nx-dropdown__control:not([data-searchable]) .nx-dropdown__input {
-    caret-color: transparent;
-    cursor: inherit;
-  }
-
-  /* One value: the value and the input share one cell; typing hides the value and shows the search. */
-  .nx-dropdown__control--single {
-    display: grid;
-  }
-
-  .nx-dropdown__control--single > :is(.nx-dropdown__value, .nx-dropdown__input) {
-    grid-area: 1 / 1;
-  }
-
-  .nx-dropdown__value {
-    display: flex;
-    align-items: center;
-    gap: var(--nx-space-2);
-    min-width: 0;
-    padding: 0 var(--nx-field-pad-x);
-    color: var(--nx-text);
-    font-size: var(--nx-field-font);
-    line-height: 1.4;
-    pointer-events: none;
-  }
-
-  .nx-dropdown__value-text {
-    min-width: 0;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  .nx-dropdown__control--single:has(.nx-dropdown__input:not(:placeholder-shown)) .nx-dropdown__value {
-    visibility: hidden;
-  }
-
-  .nx-field--inbox .nx-dropdown__value {
-    padding-top: var(--nx-field-inbox-pad);
-  }
-
-  .nx-field__icon:not(.nx-field__icon--end) + .nx-dropdown__control :is(.nx-dropdown__value, .nx-dropdown__input) {
-    padding-left: var(--nx-space-2);
-  }
-
-  .nx-dropdown__control:has(~ .nx-field__actions) :is(.nx-dropdown__value, .nx-dropdown__input) {
-    padding-right: var(--nx-space-1);
-  }
-
-  .nx-dropdown__value .nx-dropdown-avatar {
-    --nx-dropdown-media: var(--nx-dropdown-value-media);
-  }
-
-  .nx-dropdown__value .nx-dropdown-image {
-    height: calc(var(--nx-dropdown-value-media) * 0.72);
-  }
-
-  /* Several values: chips wrap, and the search input takes the rest of the last line. */
-  .nx-dropdown__control--multiple {
-    display: flex;
-    flex-wrap: wrap;
-    align-content: center;
-    align-items: center;
-    gap: 4px;
-    padding: 4px var(--nx-field-pad-x);
-  }
-
-  .nx-field--inbox .nx-dropdown__control--multiple {
-    padding-top: calc(var(--nx-field-inbox-pad) + 1px);
-  }
-
-  .nx-field__icon:not(.nx-field__icon--end) + .nx-dropdown__control--multiple {
-    padding-left: var(--nx-space-2);
-  }
-
-  .nx-dropdown__control--multiple:has(~ .nx-field__actions) {
-    padding-right: var(--nx-space-1);
-  }
-
-  .nx-field .nx-dropdown__control--multiple .nx-dropdown__input {
-    flex: 1 1 2.5rem;
-    align-self: center;
-    width: 2.5rem;
-    min-width: 2.5rem;
-    height: var(--nx-dropdown-chip);
-    padding: 0;
-  }
-
-  /*
-   * With chips, the search input needs room only while someone can type: at rest (or without search) it shrinks to the
-   * end of the last line, so chips that fill a line leave no empty line under them.
-   */
-  .nx-field .nx-dropdown__control--multiple[data-has-value]:is(:not(:focus-within), :not([data-searchable])) .nx-dropdown__input {
-    flex-basis: 1px;
-    width: 1px;
-    min-width: 1px;
-  }
-
-  .nx-dropdown-chip {
-    --nx-dropdown-media: calc(var(--nx-dropdown-chip) - 4px);
-
-    display: inline-flex;
-    align-items: center;
-    gap: 5px;
-    min-width: 0;
-    max-width: 100%;
-    height: var(--nx-dropdown-chip);
-    padding: 0 7px;
-    border: 1px solid transparent;
-    border-radius: var(--nx-radius-sm);
-    background: color-mix(in oklab, var(--nx-text) 8%, var(--nx-field-bg));
-    color: var(--nx-text);
-    font-size: var(--nx-text-sm);
-    line-height: 1;
-    white-space: nowrap;
-    cursor: default;
-  }
-
-  .nx-field--sm .nx-dropdown-chip {
-    gap: 4px;
-    padding: 0 5px;
-    font-size: var(--nx-text-xs);
-  }
-
-  .nx-dropdown-chip:has(.nx-dropdown-chip__remove) {
-    padding-right: 1px;
-  }
-
-  .nx-dropdown-chip:has(> .nx-dropdown-avatar) {
-    padding-left: 2px;
-  }
-
-  .nx-dropdown-chip__label {
-    min-width: 0;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
-  .nx-dropdown-chip .nx-dropdown-image {
-    height: calc(var(--nx-dropdown-chip) - 10px);
-  }
-
-  .nx-dropdown-chip .nx-dropdown-icon {
-    color: var(--nx-text-muted);
-  }
-
-  /* A current value that cannot be picked again: an outline instead of a fill. The tooltip says why. */
-  .nx-dropdown-chip[data-state] {
-    border-style: dashed;
-    border-color: var(--nx-text-subtle);
-    background: transparent;
-    color: var(--nx-text-muted);
-  }
-
-  /* "+12 more": the values past maxChips. Its tooltip names them. */
-  .nx-dropdown-chip--more {
-    font-variant-numeric: tabular-nums;
-    font-weight: 500;
-  }
-
-  .nx-dropdown-chip__remove {
-    display: grid;
-    place-items: center;
-    flex-shrink: 0;
-    width: calc(var(--nx-dropdown-chip) - 4px);
-    height: calc(var(--nx-dropdown-chip) - 4px);
-    padding: 0;
-    border: 0;
-    border-radius: 3px;
-    background: none;
-    color: var(--nx-text-muted);
-    cursor: pointer;
-    transition:
-      background-color var(--nx-duration),
-      color var(--nx-duration);
-  }
-
-  .nx-dropdown-chip__remove:hover {
-    background: color-mix(in oklab, var(--nx-text) 12%, transparent);
-    color: var(--nx-text);
-  }
-
-  .nx-dropdown-chip__remove .nx-icon {
-    width: 12px;
-    height: 12px;
-    vertical-align: 0;
-  }
-
-  .nx-dropdown__spinner {
-    display: grid;
-    place-items: center;
-    width: calc(var(--nx-field-base) - 10px);
-    height: calc(var(--nx-field-base) - 10px);
-    color: var(--nx-text-muted);
-  }
-
-  .nx-dropdown__spinner .nx-icon {
-    width: var(--nx-field-icon);
-    height: var(--nx-field-icon);
-    vertical-align: 0;
-  }
-
-  .nx-dropdown__toggle .nx-icon {
-    transition: transform 160ms ease;
-  }
-
-  .nx-dropdown__toggle[aria-expanded="true"] {
-    color: var(--nx-field-accent);
-  }
-
-  .nx-dropdown__toggle[aria-expanded="true"] .nx-icon {
-    transform: rotate(180deg);
-  }
-
-  /* The panel */
-  .nx-dropdown-panel {
-    --nx-dropdown-row: 34px;
-    --nx-dropdown-font: var(--nx-text-md);
-    --nx-dropdown-media: 24px;
-    --nx-dropdown-check: 16px;
-    --nx-dropdown-pad-x: var(--nx-space-2);
-    --nx-dropdown-bg: light-dark(var(--nx-surface), var(--nx-surface-2));
-    --nx-dropdown-scrollbar: color-mix(in oklab, var(--nx-text-subtle) 75%, transparent);
-
-    position: fixed;
-    inset: auto;
-    width: max-content;
-    max-width: min(640px, calc(100vw - 16px));
-    overflow: hidden;
-  }
-
-  /* Two classes: the shared panel (.nx-popover) loads after this file, and its padding would wrap the list in 16px. */
-  .nx-popover.nx-dropdown-panel {
-    padding: 0;
-  }
-
-  .nx-dropdown-panel--sm {
-    --nx-dropdown-row: 30px;
-    --nx-dropdown-font: var(--nx-text-sm);
-    --nx-dropdown-media: 20px;
-    --nx-dropdown-check: 14px;
-  }
-
-  .nx-dropdown-panel--lg {
-    --nx-dropdown-row: 40px;
-    --nx-dropdown-font: var(--nx-text-lg);
-    --nx-dropdown-media: 28px;
-    --nx-dropdown-check: 18px;
-    --nx-dropdown-pad-x: 10px;
-  }
-
-  /* Only while open: a display on the popover itself would show it closed. */
-  .nx-dropdown-panel:popover-open {
-    display: flex;
-    flex-direction: column;
-    animation: nx-dropdown-in 120ms ease-out;
-  }
-
-  @keyframes nx-dropdown-in {
-    from {
-      opacity: 0;
-      transform: translateY(-4px);
-    }
-  }
-
-  /*
-   * Rows sit 10px from the top and bottom and 8px from the sides. Where scroll bars take room (Windows), the gutter
-   * kept for one is already space on the right, so the right padding gives it back (the component measures it).
-   */
-  .nx-dropdown-list {
-    position: relative;
-    flex: 1 1 auto;
-    min-height: 0;
-    padding: 10px 8px;
-    padding-right: max(0px, 8px - var(--nx-dropdown-gutter, 0px));
-    overflow: hidden auto;
-    overscroll-behavior: contain;
-    outline: none;
-    color: var(--nx-text);
-    font-size: var(--nx-dropdown-font);
-    line-height: 1.35;
-    scrollbar-gutter: stable;
-    scrollbar-width: thin;
-    scrollbar-color: var(--nx-dropdown-scrollbar) transparent;
-  }
-
-  /*
-   * Columns: one grid for the whole list; rows and the header are subgrids, so columns line up across rows. Subgrid rows
-   * take no side padding (Chromium does not widen the edge tracks for it): the check cell carries the start inset, and
-   * an empty last track the end.
-   */
-  .nx-dropdown-list--columns {
-    display: grid;
-    align-content: start;
-    column-gap: 10px;
-    padding-top: 0;
-  }
-
-  .nx-dropdown-list--columns > * {
-    grid-column: 1 / -1;
-  }
-
-  .nx-dropdown-list--columns > :is(.nx-dropdown-option, .nx-dropdown-list__header) {
-    display: grid;
-    grid-template-columns: subgrid;
-    align-items: center;
-  }
-
-  .nx-dropdown-list--columns > .nx-dropdown-list__header + *,
-  .nx-dropdown-list--columns > :first-child:not(.nx-dropdown-list__header) {
-    margin-top: 4px;
-  }
-
-  .nx-dropdown-list__header {
-    position: sticky;
-    z-index: 1;
-    top: 0;
-    padding: 7px 0 6px;
-    border-bottom: 1px solid var(--nx-border);
-    background: var(--nx-dropdown-bg);
-    color: var(--nx-text-muted);
-    font-size: var(--nx-text-xs);
-    font-weight: 600;
-    line-height: 1.3;
-    white-space: nowrap;
-  }
-
-  .nx-dropdown-list__heading {
-    min-width: 0;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
-  .nx-dropdown-list__group {
-    padding: 6px var(--nx-dropdown-pad-x) 3px;
-    color: var(--nx-text-muted);
-    font-size: var(--nx-text-xs);
-    font-weight: 600;
-    letter-spacing: 0.04em;
-    text-transform: uppercase;
-  }
-
-  .nx-dropdown-list__separator {
-    height: 1px;
-    margin: 4px 0;
-    background: var(--nx-border);
-  }
-
-  /* Rows */
-  .nx-dropdown-option {
-    display: flex;
-    align-items: center;
-    gap: var(--nx-space-2);
-    min-height: var(--nx-dropdown-row);
-    padding: 5px var(--nx-dropdown-pad-x);
-    border-radius: var(--nx-radius);
-    cursor: pointer;
-    user-select: none;
-  }
-
-  .nx-dropdown-list--columns > .nx-dropdown-option {
-    padding-inline: 0;
-  }
-
-  .nx-dropdown-list--columns > * > .nx-dropdown-option__check,
-  .nx-dropdown-list--columns > .nx-dropdown-list__header > :first-child {
-    box-sizing: content-box;
-    padding-left: var(--nx-dropdown-pad-x);
-  }
-
-  .nx-dropdown-option[data-active] {
-    background: var(--nx-surface-hover);
-  }
-
-  /* The chosen row of a single choice: a faint primary tint, a check, and a heavier label. */
-  .nx-dropdown-list:not([aria-multiselectable]) .nx-dropdown-option[aria-selected="true"] {
-    background: color-mix(in oklab, var(--nx-primary) 10%, transparent);
-  }
-
-  .nx-dropdown-list:not([aria-multiselectable]) .nx-dropdown-option[aria-selected="true"][data-active] {
-    background: color-mix(in oklab, var(--nx-primary) 17%, transparent);
-  }
-
-  .nx-dropdown-list:not([aria-multiselectable]) .nx-dropdown-option[aria-selected="true"] :is(.nx-dropdown-option__text, .nx-dropdown-cell__text) {
-    font-weight: 500;
-  }
-
-  .nx-dropdown-option[aria-disabled="true"] {
-    background: none;
-    cursor: default;
-  }
-
-  .nx-dropdown-option[aria-disabled="true"] > * {
-    opacity: 0.5;
-  }
-
-  /* Rows of an earlier search, while the next one loads. */
-  .nx-dropdown-list[data-stale] .nx-dropdown-option {
-    opacity: 0.55;
-    pointer-events: none;
-  }
-
-  .nx-dropdown-option__check {
-    display: grid;
-    flex-shrink: 0;
-    place-items: center;
-    width: var(--nx-dropdown-check);
-    color: var(--nx-primary);
-  }
-
-  .nx-dropdown-option__check .nx-icon {
-    width: var(--nx-dropdown-check);
-    height: var(--nx-dropdown-check);
-    vertical-align: 0;
-  }
-
-  /*
-   * The checkbox of a multiple list, drawn like the checkbox input. The list panel is lighter than a page panel in dark
-   * mode, so the edge takes the muted color there to keep 3:1, and the box takes the row color instead of a darker fill.
-   */
-  .nx-dropdown-checkbox {
-    display: grid;
-    place-content: center;
-    width: var(--nx-dropdown-check);
-    height: var(--nx-dropdown-check);
-    border: 1px solid light-dark(var(--nx-text-subtle), var(--nx-text-muted));
-    border-radius: 4px;
-    background: transparent;
-    color: var(--nx-primary-text);
-    transition:
-      background-color var(--nx-duration),
-      border-color var(--nx-duration);
-  }
-
-  .nx-dropdown-checkbox::before {
-    content: "";
-    width: calc(var(--nx-dropdown-check) - 2px);
-    height: calc(var(--nx-dropdown-check) - 2px);
-    background: currentColor;
-    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5l9.5 -10'/%3E%3C/svg%3E") center / 100% no-repeat;
-    transform: scale(0);
-    transition: transform var(--nx-duration) ease-out;
-  }
-
-  .nx-dropdown-option:hover .nx-dropdown-checkbox {
-    border-color: light-dark(var(--nx-text-muted), var(--nx-text));
-  }
-
-  .nx-dropdown-option[aria-selected="true"] .nx-dropdown-checkbox {
-    border-color: var(--nx-primary-solid);
-    background: var(--nx-primary-solid);
-  }
-
-  .nx-dropdown-option[aria-selected="true"] .nx-dropdown-checkbox::before {
-    transform: scale(1);
-  }
-
-  .nx-dropdown-option__icon {
-    display: grid;
-    flex-shrink: 0;
-    place-items: center;
-    width: 1.15em;
-    color: var(--nx-text-muted);
-  }
-
-  .nx-dropdown-option__icon .nx-icon,
-  .nx-dropdown-icon .nx-icon {
-    width: 1.15em;
-    height: 1.15em;
-    vertical-align: 0;
-  }
-
-  .nx-dropdown-option__body {
-    display: grid;
-    flex: 1 1 auto;
-    min-width: 0;
-  }
-
-  .nx-dropdown-option__label {
-    display: flex;
-    align-items: center;
-    gap: 6px;
-    min-width: 0;
-  }
-
-  .nx-dropdown-option__text {
-    min-width: 0;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  .nx-dropdown-option__description {
-    color: var(--nx-text-muted);
-    font-size: var(--nx-text-xs);
-    line-height: 1.4;
-  }
-
-  /* Cells */
-  .nx-dropdown-cell {
-    display: flex;
-    align-items: center;
-    gap: 6px;
-    min-width: 0;
-    white-space: nowrap;
-  }
-
-  .nx-dropdown-cell__text {
-    min-width: 0;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
-  .nx-dropdown-cell--muted {
-    color: var(--nx-text-muted);
-  }
-
-  .nx-dropdown-cell--code {
-    color: var(--nx-text-muted);
-    font-size: 0.93em;
-    font-variant-numeric: tabular-nums;
-    font-weight: 500;
-    letter-spacing: 0.03em;
-  }
-
-  .nx-dropdown-cell--media {
-    display: grid;
-    place-items: center;
-  }
-
-  /* A bare value, with no fields for the columns. */
-  .nx-dropdown-cell--span {
-    grid-column: 2 / -1;
-  }
-
-  .nx-dropdown-icon {
-    display: inline-grid;
-    flex-shrink: 0;
-    place-items: center;
-    color: var(--nx-text-muted);
-  }
-
-  .nx-dropdown-avatar {
-    position: relative;
-    display: inline-grid;
-    flex-shrink: 0;
-    place-items: center;
-    width: var(--nx-dropdown-media);
-    height: var(--nx-dropdown-media);
-    overflow: hidden;
-    border-radius: 50%;
-    background: color-mix(in oklab, var(--nx-text) 10%, var(--nx-surface));
-    color: var(--nx-text);
-    font-size: max(8px, calc(var(--nx-dropdown-media) * 0.4));
-    font-weight: 600;
-    line-height: 1;
-  }
-
-  .nx-dropdown-avatar[data-tone="primary"] {
-    background: var(--nx-primary-soft);
-  }
-
-  .nx-dropdown-avatar[data-tone="info"] {
-    background: var(--nx-info-soft);
-  }
-
-  .nx-dropdown-avatar[data-tone="success"] {
-    background: var(--nx-success-soft);
-  }
-
-  .nx-dropdown-avatar[data-tone="warning"] {
-    background: var(--nx-warning-soft);
-  }
-
-  .nx-dropdown-avatar img {
-    position: absolute;
-    inset: 0;
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-  }
-
-  /* A flag or a logo: 4:3, with a faint edge so white flags do not melt into the panel. */
-  .nx-dropdown-image {
-    display: block;
-    flex-shrink: 0;
-    width: auto;
-    height: calc(var(--nx-dropdown-media) * 0.66);
-    aspect-ratio: 4 / 3;
-    border-radius: 2px;
-    box-shadow: 0 0 0 1px color-mix(in oklab, var(--nx-text) 14%, transparent);
-    object-fit: cover;
-  }
-
-  .nx-dropdown-image--empty {
-    background: color-mix(in oklab, var(--nx-text) 8%, transparent);
-  }
-
-  /* Why a current value cannot be picked again. The text color, not muted: muted text on a tint misses 4.5:1 in most themes. */
-  .nx-dropdown-tag {
-    flex-shrink: 0;
-    padding: 1px 6px;
-    border-radius: var(--nx-radius-full);
-    background: color-mix(in oklab, var(--nx-text) 9%, transparent);
-    color: var(--nx-text);
-    font-size: var(--nx-text-xs);
-    font-weight: 500;
-    line-height: 1.35;
-    white-space: nowrap;
-  }
-
-  .nx-dropdown-option[aria-disabled="true"] .nx-dropdown-tag {
-    opacity: 1;
-  }
-
-  /* Placeholders while options load */
-  .nx-dropdown-option--skeleton {
-    cursor: default;
-  }
-
-  .nx-dropdown-skeleton {
-    display: inline-block;
-    width: 6em;
-    max-width: 100%;
-    height: 0.7em;
-    border-radius: var(--nx-radius-full);
-    background: color-mix(in oklab, var(--nx-text) 11%, transparent);
-    vertical-align: middle;
-    animation: nx-dropdown-pulse 1.2s ease-in-out infinite;
-  }
-
-  .nx-dropdown-skeleton--avatar {
-    width: var(--nx-dropdown-media);
-    height: var(--nx-dropdown-media);
-    border-radius: 50%;
-  }
-
-  .nx-dropdown-skeleton--image {
-    width: calc(var(--nx-dropdown-media) * 0.88);
-    height: calc(var(--nx-dropdown-media) * 0.66);
-    border-radius: 2px;
-  }
-
-  .nx-dropdown-skeleton--icon {
-    width: 1.15em;
-    height: 1.15em;
-    border-radius: var(--nx-radius-sm);
-  }
-
-  @keyframes nx-dropdown-pulse {
-    50% {
-      opacity: 0.45;
-    }
-  }
-
-  /* Loading more, a failed load, no matches */
-  .nx-dropdown-list__status {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-wrap: wrap;
-    gap: var(--nx-space-2);
-    padding: 10px var(--nx-space-3);
-    color: var(--nx-text-muted);
-    font-size: var(--nx-text-sm);
-    text-align: center;
-  }
-
-  .nx-dropdown-list__status > .nx-icon {
-    flex-shrink: 0;
-    width: 16px;
-    height: 16px;
-    vertical-align: 0;
-  }
-
-  .nx-dropdown-list__status--error > .nx-icon {
-    color: var(--nx-danger);
-  }
-
-  /* The footer never gives up height: a panel short of room shrinks its list instead. */
-  .nx-dropdown-panel__foot {
-    display: flex;
-    flex: none;
-    flex-wrap: wrap;
-    align-items: center;
-    justify-content: space-between;
-    gap: 4px var(--nx-space-3);
-    min-height: 40px;
-    padding: 4px var(--nx-space-2) 4px var(--nx-space-3);
-    border-top: 1px solid var(--nx-border);
-    color: var(--nx-text-muted);
-    font-size: var(--nx-text-xs);
-  }
-
-  /*
-   * A multiple choice's one footer: Select all and Clear on the left, where their hover tint lines up with the rows'
-   * and their text with the checkboxes; the count and Done on the right. A narrow panel moves the right pair to a
-   * second line.
-   */
-  .nx-dropdown-panel__foot--actions {
-    padding-left: var(--nx-space-2);
-  }
-
-  .nx-dropdown-panel__actions,
-  .nx-dropdown-panel__end {
-    display: flex;
-    align-items: center;
-  }
-
-  .nx-dropdown-panel__actions {
-    gap: 2px;
-  }
-
-  .nx-dropdown-panel__end {
-    gap: var(--nx-space-3);
-    margin-left: auto;
-  }
-
-  .nx-dropdown-panel__count {
-    font-variant-numeric: tabular-nums;
-    white-space: nowrap;
-  }
-
-  @media (prefers-reduced-motion: reduce) {
-    .nx-dropdown-panel:popover-open,
-    .nx-dropdown-skeleton {
-      animation: none;
-    }
-
-    .nx-dropdown__toggle .nx-icon,
-    .nx-dropdown-checkbox,
-    .nx-dropdown-checkbox::before {
-      transition: none;
-    }
-  }
-}
+@layer nexus.components {
+  /*
+   * Dropdown: the field shell holds the chosen value (or chips for several) over a search input, and the list opens in
+   * a popover placed by the component. Rows are flex rows, or, with columns, subgrid rows of one grid, so every column
+   * lines up down the list like a table. Current values that cannot be picked again carry a tag and a dashed chip.
+   */
+  .nx-field--dropdown {
+    --nx-dropdown-chip: 22px;
+    --nx-dropdown-value-media: 20px;
+  }
+
+  .nx-field--dropdown.nx-field--sm {
+    --nx-dropdown-chip: 18px;
+    --nx-dropdown-value-media: 16px;
+  }
+
+  .nx-field--dropdown.nx-field--lg {
+    --nx-dropdown-chip: 26px;
+    --nx-dropdown-value-media: 22px;
+  }
+
+  /* The box */
+  .nx-dropdown__control {
+    position: relative;
+    flex: 1 1 auto;
+    align-self: stretch;
+    min-width: 0;
+    cursor: pointer;
+  }
+
+  .nx-field[data-disabled] .nx-dropdown__control {
+    cursor: not-allowed;
+  }
+
+  .nx-field[data-readonly] .nx-dropdown__control {
+    cursor: default;
+  }
+
+  .nx-dropdown__control:not([data-searchable]) .nx-dropdown__input {
+    caret-color: transparent;
+    cursor: inherit;
+  }
+
+  /* One value: the value and the input share one cell; typing hides the value and shows the search. */
+  .nx-dropdown__control--single {
+    display: grid;
+  }
+
+  .nx-dropdown__control--single > :is(.nx-dropdown__value, .nx-dropdown__input) {
+    grid-area: 1 / 1;
+  }
+
+  .nx-dropdown__value {
+    display: flex;
+    align-items: center;
+    gap: var(--nx-space-2);
+    min-width: 0;
+    padding: 0 var(--nx-field-pad-x);
+    color: var(--nx-text);
+    font-size: var(--nx-field-font);
+    line-height: 1.4;
+    pointer-events: none;
+  }
+
+  .nx-dropdown__value-text {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .nx-dropdown__control--single:has(.nx-dropdown__input:not(:placeholder-shown)) .nx-dropdown__value {
+    visibility: hidden;
+  }
+
+  .nx-field--inbox .nx-dropdown__value {
+    padding-top: var(--nx-field-inbox-pad);
+  }
+
+  .nx-field__icon:not(.nx-field__icon--end) + .nx-dropdown__control :is(.nx-dropdown__value, .nx-dropdown__input) {
+    padding-left: var(--nx-space-2);
+  }
+
+  .nx-dropdown__control:has(~ .nx-field__actions) :is(.nx-dropdown__value, .nx-dropdown__input) {
+    padding-right: var(--nx-space-1);
+  }
+
+  .nx-dropdown__value .nx-dropdown-avatar {
+    --nx-dropdown-media: var(--nx-dropdown-value-media);
+  }
+
+  .nx-dropdown__value .nx-dropdown-image {
+    height: calc(var(--nx-dropdown-value-media) * 0.72);
+  }
+
+  /* Several values: chips wrap, and the search input takes the rest of the last line. */
+  .nx-dropdown__control--multiple {
+    display: flex;
+    flex-wrap: wrap;
+    align-content: center;
+    align-items: center;
+    gap: 4px;
+    padding: 4px var(--nx-field-pad-x);
+  }
+
+  .nx-field--inbox .nx-dropdown__control--multiple {
+    padding-top: calc(var(--nx-field-inbox-pad) + 1px);
+  }
+
+  .nx-field__icon:not(.nx-field__icon--end) + .nx-dropdown__control--multiple {
+    padding-left: var(--nx-space-2);
+  }
+
+  .nx-dropdown__control--multiple:has(~ .nx-field__actions) {
+    padding-right: var(--nx-space-1);
+  }
+
+  .nx-field .nx-dropdown__control--multiple .nx-dropdown__input {
+    flex: 1 1 2.5rem;
+    align-self: center;
+    width: 2.5rem;
+    min-width: 2.5rem;
+    height: var(--nx-dropdown-chip);
+    padding: 0;
+  }
+
+  /*
+   * With chips, the search input needs room only while someone can type: at rest (or without search) it shrinks to the
+   * end of the last line, so chips that fill a line leave no empty line under them.
+   */
+  .nx-field .nx-dropdown__control--multiple[data-has-value]:is(:not(:focus-within), :not([data-searchable])) .nx-dropdown__input {
+    flex-basis: 1px;
+    width: 1px;
+    min-width: 1px;
+  }
+
+  .nx-dropdown-chip {
+    --nx-dropdown-media: calc(var(--nx-dropdown-chip) - 4px);
+
+    display: inline-flex;
+    align-items: center;
+    gap: 5px;
+    min-width: 0;
+    max-width: 100%;
+    height: var(--nx-dropdown-chip);
+    padding: 0 7px;
+    border: 1px solid transparent;
+    border-radius: var(--nx-radius-sm);
+    background: color-mix(in oklab, var(--nx-text) 8%, var(--nx-field-bg));
+    color: var(--nx-text);
+    font-size: var(--nx-text-sm);
+    line-height: 1;
+    white-space: nowrap;
+    cursor: default;
+  }
+
+  .nx-field--sm .nx-dropdown-chip {
+    gap: 4px;
+    padding: 0 5px;
+    font-size: var(--nx-text-xs);
+  }
+
+  .nx-dropdown-chip:has(.nx-dropdown-chip__remove) {
+    padding-right: 1px;
+  }
+
+  .nx-dropdown-chip:has(> .nx-dropdown-avatar) {
+    padding-left: 2px;
+  }
+
+  .nx-dropdown-chip__label {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .nx-dropdown-chip .nx-dropdown-image {
+    height: calc(var(--nx-dropdown-chip) - 10px);
+  }
+
+  .nx-dropdown-chip .nx-dropdown-icon {
+    color: var(--nx-text-muted);
+  }
+
+  /* A current value that cannot be picked again: an outline instead of a fill. The tooltip says why. */
+  .nx-dropdown-chip[data-state] {
+    border-style: dashed;
+    border-color: var(--nx-text-subtle);
+    background: transparent;
+    color: var(--nx-text-muted);
+  }
+
+  /* "+12 more": the values past maxChips. Its tooltip names them. */
+  .nx-dropdown-chip--more {
+    font-variant-numeric: tabular-nums;
+    font-weight: 500;
+  }
+
+  .nx-dropdown-chip__remove {
+    display: grid;
+    place-items: center;
+    flex-shrink: 0;
+    width: calc(var(--nx-dropdown-chip) - 4px);
+    height: calc(var(--nx-dropdown-chip) - 4px);
+    padding: 0;
+    border: 0;
+    border-radius: 3px;
+    background: none;
+    color: var(--nx-text-muted);
+    cursor: pointer;
+    transition:
+      background-color var(--nx-duration),
+      color var(--nx-duration);
+  }
+
+  .nx-dropdown-chip__remove:hover {
+    background: color-mix(in oklab, var(--nx-text) 12%, transparent);
+    color: var(--nx-text);
+  }
+
+  .nx-dropdown-chip__remove .nx-icon {
+    width: 12px;
+    height: 12px;
+    vertical-align: 0;
+  }
+
+  .nx-dropdown__spinner {
+    display: grid;
+    place-items: center;
+    width: calc(var(--nx-field-base) - 10px);
+    height: calc(var(--nx-field-base) - 10px);
+    color: var(--nx-text-muted);
+  }
+
+  .nx-dropdown__spinner .nx-icon {
+    width: var(--nx-field-icon);
+    height: var(--nx-field-icon);
+    vertical-align: 0;
+  }
+
+  .nx-dropdown__toggle .nx-icon {
+    transition: transform 160ms ease;
+  }
+
+  .nx-dropdown__toggle[aria-expanded="true"] {
+    color: var(--nx-field-accent);
+  }
+
+  .nx-dropdown__toggle[aria-expanded="true"] .nx-icon {
+    transform: rotate(180deg);
+  }
+
+  /* The panel */
+  .nx-dropdown-panel {
+    --nx-dropdown-row: calc(var(--nx-row) + 2px);
+    --nx-dropdown-font: var(--nx-text-md);
+    --nx-dropdown-media: 24px;
+    --nx-dropdown-check: 16px;
+    --nx-dropdown-pad-x: var(--nx-space-2);
+    --nx-dropdown-bg: light-dark(var(--nx-surface), var(--nx-surface-2));
+
+    position: fixed;
+    inset: auto;
+    width: max-content;
+    max-width: min(640px, calc(100vw - 16px));
+    overflow: hidden;
+  }
+
+  /* Two classes: the shared panel (.nx-popover) loads after this file, and its padding would wrap the list in 16px. */
+  .nx-popover.nx-dropdown-panel {
+    padding: 0;
+  }
+
+  .nx-dropdown-panel--sm {
+    --nx-dropdown-row: calc(var(--nx-row) - 2px);
+    --nx-dropdown-font: var(--nx-text-sm);
+    --nx-dropdown-media: 20px;
+    --nx-dropdown-check: 14px;
+  }
+
+  .nx-dropdown-panel--lg {
+    --nx-dropdown-row: calc(var(--nx-row) + 8px);
+    --nx-dropdown-font: var(--nx-text-lg);
+    --nx-dropdown-media: 28px;
+    --nx-dropdown-check: 18px;
+    --nx-dropdown-pad-x: 10px;
+  }
+
+  /* Only while open: a display on the popover itself would show it closed. */
+  .nx-dropdown-panel:popover-open {
+    display: flex;
+    flex-direction: column;
+  }
+
+  /*
+   * Rows sit 10px from the top and bottom and 8px from the sides. Where scroll bars take room (Windows), the gutter
+   * kept for one is already space on the right, so the right padding gives it back (the component measures it).
+   */
+  .nx-dropdown-list {
+    position: relative;
+    flex: 1 1 auto;
+    min-height: 0;
+    padding: 10px 8px;
+    padding-right: max(0px, 8px - var(--nx-dropdown-gutter, 0px));
+    overflow: hidden auto;
+    overscroll-behavior: contain;
+    outline: none;
+    color: var(--nx-text);
+    font-size: var(--nx-dropdown-font);
+    line-height: 1.35;
+    scrollbar-gutter: stable;
+  }
+
+  /*
+   * Columns: one grid for the whole list; rows and the header are subgrids, so columns line up across rows. Subgrid rows
+   * take no side padding (Chromium does not widen the edge tracks for it): the check cell carries the start inset, and
+   * an empty last track the end.
+   */
+  .nx-dropdown-list--columns {
+    display: grid;
+    align-content: start;
+    column-gap: 10px;
+    padding-top: 0;
+  }
+
+  .nx-dropdown-list--columns > * {
+    grid-column: 1 / -1;
+  }
+
+  .nx-dropdown-list--columns > :is(.nx-dropdown-option, .nx-dropdown-list__header) {
+    display: grid;
+    grid-template-columns: subgrid;
+    align-items: center;
+  }
+
+  .nx-dropdown-list--columns > .nx-dropdown-list__header + *,
+  .nx-dropdown-list--columns > :first-child:not(.nx-dropdown-list__header) {
+    margin-top: 4px;
+  }
+
+  .nx-dropdown-list__header {
+    position: sticky;
+    z-index: 1;
+    top: 0;
+    padding: 7px 0 6px;
+    border-bottom: 1px solid var(--nx-border);
+    background: var(--nx-dropdown-bg);
+    color: var(--nx-text-muted);
+    font-size: var(--nx-text-xs);
+    font-weight: 600;
+    line-height: 1.3;
+    white-space: nowrap;
+  }
+
+  .nx-dropdown-list__heading {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .nx-dropdown-list__group {
+    padding: 6px var(--nx-dropdown-pad-x) 3px;
+    color: var(--nx-text-muted);
+    font-size: var(--nx-text-xs);
+    font-weight: 600;
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+  }
+
+  .nx-dropdown-list__separator {
+    height: 1px;
+    margin: 4px 0;
+    background: var(--nx-border);
+  }
+
+  /* Rows */
+  .nx-dropdown-option {
+    display: flex;
+    align-items: center;
+    gap: var(--nx-space-2);
+    min-height: var(--nx-dropdown-row);
+    padding: 5px var(--nx-dropdown-pad-x);
+    border-radius: var(--nx-radius);
+    cursor: pointer;
+    user-select: none;
+  }
+
+  .nx-dropdown-list--columns > .nx-dropdown-option {
+    padding-inline: 0;
+  }
+
+  .nx-dropdown-list--columns > * > .nx-dropdown-option__check,
+  .nx-dropdown-list--columns > .nx-dropdown-list__header > :first-child {
+    box-sizing: content-box;
+    padding-left: var(--nx-dropdown-pad-x);
+  }
+
+  .nx-dropdown-option[data-active] {
+    background: var(--nx-surface-hover);
+  }
+
+  /* The chosen row of a single choice: a faint primary tint, a check, and a heavier label. */
+  .nx-dropdown-list:not([aria-multiselectable]) .nx-dropdown-option[aria-selected="true"] {
+    background: color-mix(in oklab, var(--nx-primary) 10%, transparent);
+  }
+
+  .nx-dropdown-list:not([aria-multiselectable]) .nx-dropdown-option[aria-selected="true"][data-active] {
+    background: color-mix(in oklab, var(--nx-primary) 17%, transparent);
+  }
+
+  .nx-dropdown-list:not([aria-multiselectable]) .nx-dropdown-option[aria-selected="true"] :is(.nx-dropdown-option__text, .nx-dropdown-cell__text) {
+    font-weight: 500;
+  }
+
+  .nx-dropdown-option[aria-disabled="true"] {
+    background: none;
+    cursor: default;
+  }
+
+  .nx-dropdown-option[aria-disabled="true"] > * {
+    opacity: 0.5;
+  }
+
+  /* Rows of an earlier search, while the next one loads. */
+  .nx-dropdown-list[data-stale] .nx-dropdown-option {
+    opacity: 0.55;
+    pointer-events: none;
+  }
+
+  .nx-dropdown-option__check {
+    display: grid;
+    flex-shrink: 0;
+    place-items: center;
+    width: var(--nx-dropdown-check);
+    color: var(--nx-primary);
+  }
+
+  .nx-dropdown-option__check .nx-icon {
+    width: var(--nx-dropdown-check);
+    height: var(--nx-dropdown-check);
+    vertical-align: 0;
+  }
+
+  /*
+   * The checkbox of a multiple list, drawn like the checkbox input. The list panel is lighter than a page panel in dark
+   * mode, so the edge takes the muted color there to keep 3:1, and the box takes the row color instead of a darker fill.
+   */
+  .nx-dropdown-checkbox {
+    display: grid;
+    place-content: center;
+    width: var(--nx-dropdown-check);
+    height: var(--nx-dropdown-check);
+    border: 1px solid light-dark(var(--nx-text-subtle), var(--nx-text-muted));
+    border-radius: 4px;
+    background: transparent;
+    color: var(--nx-primary-text);
+    transition:
+      background-color var(--nx-duration),
+      border-color var(--nx-duration);
+  }
+
+  .nx-dropdown-checkbox::before {
+    content: "";
+    width: calc(var(--nx-dropdown-check) - 2px);
+    height: calc(var(--nx-dropdown-check) - 2px);
+    background: currentColor;
+    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5l9.5 -10'/%3E%3C/svg%3E") center / 100% no-repeat;
+    transform: scale(0);
+    transition: transform var(--nx-duration) ease-out;
+  }
+
+  .nx-dropdown-option:hover .nx-dropdown-checkbox {
+    border-color: light-dark(var(--nx-text-muted), var(--nx-text));
+  }
+
+  .nx-dropdown-option[aria-selected="true"] .nx-dropdown-checkbox {
+    border-color: var(--nx-primary-solid);
+    background: var(--nx-primary-solid);
+  }
+
+  .nx-dropdown-option[aria-selected="true"] .nx-dropdown-checkbox::before {
+    transform: scale(1);
+  }
+
+  .nx-dropdown-option__icon {
+    display: grid;
+    flex-shrink: 0;
+    place-items: center;
+    width: 1.15em;
+    color: var(--nx-text-muted);
+  }
+
+  .nx-dropdown-option__icon .nx-icon,
+  .nx-dropdown-icon .nx-icon {
+    width: 1.15em;
+    height: 1.15em;
+    vertical-align: 0;
+  }
+
+  .nx-dropdown-option__body {
+    display: grid;
+    flex: 1 1 auto;
+    min-width: 0;
+  }
+
+  .nx-dropdown-option__label {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    min-width: 0;
+  }
+
+  .nx-dropdown-option__text {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .nx-dropdown-option__description {
+    color: var(--nx-text-muted);
+    font-size: var(--nx-text-xs);
+    line-height: 1.4;
+  }
+
+  /* Cells */
+  .nx-dropdown-cell {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    min-width: 0;
+    white-space: nowrap;
+  }
+
+  .nx-dropdown-cell__text {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .nx-dropdown-cell--muted {
+    color: var(--nx-text-muted);
+  }
+
+  .nx-dropdown-cell--code {
+    color: var(--nx-text-muted);
+    font-size: 0.93em;
+    font-variant-numeric: tabular-nums;
+    font-weight: 500;
+    letter-spacing: 0.03em;
+  }
+
+  .nx-dropdown-cell--media {
+    display: grid;
+    place-items: center;
+  }
+
+  /* A bare value, with no fields for the columns. */
+  .nx-dropdown-cell--span {
+    grid-column: 2 / -1;
+  }
+
+  .nx-dropdown-icon {
+    display: inline-grid;
+    flex-shrink: 0;
+    place-items: center;
+    color: var(--nx-text-muted);
+  }
+
+  /* The shared avatar, at the size of the dropdown's pictures. */
+  .nx-dropdown-avatar {
+    --nx-avatar-size: var(--nx-dropdown-media);
+  }
+
+  /* A flag or a logo: 4:3, with a faint edge so white flags do not melt into the panel. */
+  .nx-dropdown-image {
+    display: block;
+    flex-shrink: 0;
+    width: auto;
+    height: calc(var(--nx-dropdown-media) * 0.66);
+    aspect-ratio: 4 / 3;
+    border-radius: 2px;
+    box-shadow: 0 0 0 1px color-mix(in oklab, var(--nx-text) 14%, transparent);
+    object-fit: cover;
+  }
+
+  .nx-dropdown-image--empty {
+    background: color-mix(in oklab, var(--nx-text) 8%, transparent);
+  }
+
+  /* Why a current value cannot be picked again. The text color, not muted: muted text on a tint misses 4.5:1 in most themes. */
+  .nx-dropdown-tag {
+    flex-shrink: 0;
+    padding: 1px 6px;
+    border-radius: var(--nx-radius-full);
+    background: color-mix(in oklab, var(--nx-text) 9%, transparent);
+    color: var(--nx-text);
+    font-size: var(--nx-text-xs);
+    font-weight: 500;
+    line-height: 1.35;
+    white-space: nowrap;
+  }
+
+  .nx-dropdown-option[aria-disabled="true"] .nx-dropdown-tag {
+    opacity: 1;
+  }
+
+  /* Placeholders while options load */
+  .nx-dropdown-option--skeleton {
+    cursor: default;
+  }
+
+  .nx-dropdown-skeleton {
+    display: inline-block;
+    width: 6em;
+    max-width: 100%;
+    height: 0.7em;
+    border-radius: var(--nx-radius-full);
+    background: color-mix(in oklab, var(--nx-text) 11%, transparent);
+    vertical-align: middle;
+    animation: nx-dropdown-pulse 1.2s ease-in-out infinite;
+  }
+
+  .nx-dropdown-skeleton--avatar {
+    width: var(--nx-dropdown-media);
+    height: var(--nx-dropdown-media);
+    border-radius: 50%;
+  }
+
+  .nx-dropdown-skeleton--image {
+    width: calc(var(--nx-dropdown-media) * 0.88);
+    height: calc(var(--nx-dropdown-media) * 0.66);
+    border-radius: 2px;
+  }
+
+  .nx-dropdown-skeleton--icon {
+    width: 1.15em;
+    height: 1.15em;
+    border-radius: var(--nx-radius-sm);
+  }
+
+  @keyframes nx-dropdown-pulse {
+    50% {
+      opacity: 0.45;
+    }
+  }
+
+  /* Loading more, a failed load, no matches */
+  .nx-dropdown-list__status {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-wrap: wrap;
+    gap: var(--nx-space-2);
+    padding: 10px var(--nx-space-3);
+    color: var(--nx-text-muted);
+    font-size: var(--nx-text-sm);
+    text-align: center;
+  }
+
+  .nx-dropdown-list__status > .nx-icon {
+    flex-shrink: 0;
+    width: 16px;
+    height: 16px;
+    vertical-align: 0;
+  }
+
+  .nx-dropdown-list__status--error > .nx-icon {
+    color: var(--nx-danger);
+  }
+
+  /* The footer never gives up height: a panel short of room shrinks its list instead. */
+  .nx-dropdown-panel__foot {
+    display: flex;
+    flex: none;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-between;
+    gap: 4px var(--nx-space-3);
+    min-height: 40px;
+    padding: 4px var(--nx-space-2) 4px var(--nx-space-3);
+    border-top: 1px solid var(--nx-border);
+    color: var(--nx-text-muted);
+    font-size: var(--nx-text-xs);
+  }
+
+  /*
+   * A multiple choice's one footer: Select all and Clear on the left, where their hover tint lines up with the rows'
+   * and their text with the checkboxes; the count and Done on the right. A narrow panel moves the right pair to a
+   * second line.
+   */
+  .nx-dropdown-panel__foot--actions {
+    padding-left: var(--nx-space-2);
+  }
+
+  .nx-dropdown-panel__actions,
+  .nx-dropdown-panel__end {
+    display: flex;
+    align-items: center;
+  }
+
+  .nx-dropdown-panel__actions {
+    gap: 2px;
+  }
+
+  .nx-dropdown-panel__end {
+    gap: var(--nx-space-3);
+    margin-left: auto;
+  }
+
+  .nx-dropdown-panel__count {
+    font-variant-numeric: tabular-nums;
+    white-space: nowrap;
+  }
+
+  [data-nx-motion="reduce"] .nx-dropdown-skeleton {
+    animation: none;
+  }
+
+  [data-nx-motion="reduce"] .nx-dropdown__toggle .nx-icon,
+  [data-nx-motion="reduce"] .nx-dropdown-checkbox,
+  [data-nx-motion="reduce"] .nx-dropdown-checkbox::before {
+    transition: none;
+  }
+}