nexus-shared 3.1.0 → 4.0.0

package/src/Styles/Nexus.Tree.css

@@ -1,431 +1,530 @@
-@layer nexus.components {
-  /*
-   * Tree view: a panel with a toolbar and a scrolling list of rows. Rows have a fixed height (the component places
-   * rows by it: keep --nx-tree-row and --nx-tree-pad in step with ROW_HEIGHT and PAD in TreeView.tsx). The checkbox
-   * is the CheckBox control itself, so checked, mixed, and read-only boxes look the same as everywhere else.
-   */
-  .nx-tree {
-    --nx-tree-row: 32px;
-    --nx-tree-pad: 4px;
-    --nx-tree-indent: 20px;
-    --nx-tree-font: var(--nx-text-md);
-    --nx-tree-open: 200ms;
-    --nx-tree-close: 160ms;
-    /* A line under every parent's chevron, soft enough to leave the rows in front. */
-    --nx-tree-guide: color-mix(in oklab, var(--nx-border-strong) 55%, transparent);
-
-    display: flex;
-    flex-direction: column;
-    min-width: 0;
-    overflow: hidden;
-    border: 1px solid var(--nx-field-border);
-    border-radius: var(--nx-radius);
-    background: var(--nx-field-bg);
-    color: var(--nx-text);
-    font-size: var(--nx-tree-font);
-    line-height: 1.35;
-    transition: border-color var(--nx-duration);
-  }
-
-  .nx-tree--sm {
-    --nx-tree-row: 28px;
-    --nx-tree-indent: 18px;
-    --nx-tree-font: var(--nx-text-sm);
-  }
-
-  .nx-tree--lg {
-    --nx-tree-row: 38px;
-    --nx-tree-indent: 22px;
-    --nx-tree-font: var(--nx-text-lg);
-  }
-
-  .nx-tree:hover {
-    border-color: var(--nx-field-border-hover);
-  }
-
-  .nx-tree:focus-within {
-    border-color: var(--nx-field-accent);
-  }
-
-  .nx-field:is([data-readonly], [data-disabled]) .nx-tree {
-    border-color: var(--nx-field-border);
-  }
-
-  /* Toolbar: select all and counts at the start, tools at the end, a line under it. */
-  .nx-tree__toolbar {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    gap: var(--nx-space-1) var(--nx-space-3);
-    min-height: calc(var(--nx-control-sm) + 12px);
-    padding: 6px 6px 6px var(--nx-space-3);
-    border-bottom: 1px solid var(--nx-border);
-    font-size: var(--nx-text-sm);
-  }
-
-  .nx-tree__all {
-    flex: none;
-  }
-
-  .nx-tree__all .nx-choice__label {
-    font-weight: 500;
-  }
-
-  /* A read-only tree has one lock, after its label; select all still shows the note when clicked. */
-  .nx-tree__all .nx-field__lock {
-    display: none;
-  }
-
-  .nx-tree__summary {
-    display: inline-flex;
-    align-items: center;
-    gap: 6px;
-    min-width: 0;
-    margin-right: auto;
-    color: var(--nx-text-muted);
-    font-variant-numeric: tabular-nums;
-    white-space: nowrap;
-  }
-
-  .nx-tree__summary .nx-icon {
-    width: 14px;
-    height: 14px;
-    vertical-align: 0;
-  }
-
-  .nx-tree__tools {
-    display: inline-flex;
-    align-items: center;
-    gap: 2px;
-  }
-
-  .nx-tree__tools .nx-btn--secondary {
-    margin-left: var(--nx-space-1);
-  }
-
-  /* Rows */
-  .nx-tree__viewport {
-    position: relative;
-    overflow: auto;
-    overscroll-behavior: contain;
-    outline: none;
-  }
-
-  .nx-tree__viewport:focus-visible {
-    box-shadow: inset 0 0 0 2px var(--nx-primary);
-  }
-
-  .nx-tree__list {
-    min-width: 0;
-    padding-inline: var(--nx-tree-pad);
-  }
-
-  .nx-tree__row {
-    --nx-tree-depth: 0;
-    /* Muted texts of a row. On a hovered or focused row they move toward the text color, so they keep 4.5:1 on the
-       hover tint in every theme. */
-    --nx-tree-muted: var(--nx-text-muted);
-    --nx-tree-count: color-mix(in oklab, var(--nx-text-muted), var(--nx-text) 25%);
-
-    display: flex;
-    align-items: center;
-    gap: 6px;
-    height: var(--nx-tree-row);
-    padding: 0 4px 0 calc(var(--nx-tree-depth) * var(--nx-tree-indent));
-    border-radius: var(--nx-radius);
-    /* Guides: one line per level, centered under the chevron of the parent at that level. */
-    background-image: repeating-linear-gradient(
-      to right,
-      transparent 0 calc(var(--nx-tree-indent) / 2 - 0.5px),
-      var(--nx-tree-guide) calc(var(--nx-tree-indent) / 2 - 0.5px) calc(var(--nx-tree-indent) / 2 + 0.5px),
-      transparent calc(var(--nx-tree-indent) / 2 + 0.5px) var(--nx-tree-indent)
-    );
-    background-repeat: no-repeat;
-    background-size: calc(var(--nx-tree-depth) * var(--nx-tree-indent)) 100%;
-    white-space: nowrap;
-    cursor: pointer;
-    user-select: none;
-    outline: none;
-    -webkit-tap-highlight-color: transparent;
-  }
-
-  .nx-tree__row[role="treeitem"]:hover {
-    background-color: var(--nx-surface-hover);
-  }
-
-  .nx-tree__row:focus-visible {
-    background-color: var(--nx-surface-hover);
-    box-shadow: inset 0 0 0 2px var(--nx-primary);
-  }
-
-  .nx-tree__row[role="treeitem"]:is(:hover, :focus-visible) {
-    --nx-tree-muted: color-mix(in oklab, var(--nx-text-muted), var(--nx-text) 35%);
-    --nx-tree-count: color-mix(in oklab, var(--nx-text-muted), var(--nx-text) 50%);
-  }
-
-  .nx-tree__toggle {
-    display: grid;
-    flex: none;
-    place-items: center;
-    width: var(--nx-tree-indent);
-    height: var(--nx-tree-indent);
-    margin-right: -2px;
-    border-radius: var(--nx-radius-sm);
-    color: var(--nx-tree-muted);
-  }
-
-  .nx-tree__toggle .nx-icon {
-    width: 14px;
-    height: 14px;
-    vertical-align: 0;
-    transition: transform var(--nx-tree-open) cubic-bezier(0.2, 0, 0, 1);
-  }
-
-  .nx-tree__row[aria-expanded="true"] > .nx-tree__toggle .nx-icon {
-    transform: rotate(90deg);
-  }
-
-  .nx-tree__toggle:has(.nx-icon):hover {
-    background: color-mix(in oklab, var(--nx-text) 10%, transparent);
-    color: var(--nx-text);
-  }
-
-  /* The CheckBox control, without its label's line-height offset; the row takes the clicks. */
-  .nx-tree__check {
-    flex: none;
-    align-items: center;
-    gap: 0;
-  }
-
-  .nx-tree__check .nx-choice__control {
-    margin: 0;
-    pointer-events: none;
-  }
-
-  .nx-tree__row:hover .nx-choice__control:not(:checked, :indeterminate, :disabled) {
-    border-color: var(--nx-choice-border-hover);
-  }
-
-  .nx-tree__icon {
-    display: grid;
-    flex: none;
-    place-items: center;
-    color: var(--nx-tree-muted);
-  }
-
-  .nx-tree__icon .nx-icon {
-    width: 1.15em;
-    height: 1.15em;
-    vertical-align: 0;
-  }
-
-  .nx-tree__text {
-    display: flex;
-    flex: 1 1 auto;
-    align-items: baseline;
-    gap: var(--nx-space-2);
-    min-width: 0;
-    overflow: hidden;
-  }
-
-  .nx-tree__label {
-    flex: 0 1 auto;
-    min-width: 2em;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
-  .nx-tree__description {
-    flex: 0 100 auto;
-    min-width: 0;
-    overflow: hidden;
-    color: var(--nx-tree-muted);
-    font-size: calc(var(--nx-tree-font) - 1px);
-    text-overflow: ellipsis;
-  }
-
-  .nx-tree__count {
-    flex: none;
-    padding: 0 6px;
-    border-radius: var(--nx-radius-full);
-    background: color-mix(in oklab, var(--nx-text) 7%, transparent);
-    color: var(--nx-tree-count);
-    font-size: var(--nx-text-xs);
-    font-variant-numeric: tabular-nums;
-    line-height: 18px;
-  }
-
-  .nx-tree__lock,
-  .nx-tree__busy {
-    display: grid;
-    flex: none;
-    place-items: center;
-    color: var(--nx-tree-muted);
-  }
-
-  .nx-tree__lock .nx-icon,
-  .nx-tree__busy {
-    width: 14px;
-    height: 14px;
-    vertical-align: 0;
-  }
-
-  /* A locked item: the read-only box (data-readonly), a muted label, and a lock. */
-  .nx-tree__row--locked {
-    cursor: default;
-  }
-
-  .nx-tree__row--locked .nx-tree__label {
-    color: var(--nx-tree-muted);
-  }
-
-  /* Actions show on the row under the pointer or with focus; on touch screens, always. They keep their space, so
-     labels do not jump when they appear. */
-  .nx-tree__actions {
-    display: flex;
-    flex: none;
-    gap: 1px;
-    margin-left: auto;
-    visibility: hidden;
-  }
-
-  .nx-tree__row:is(:hover, :focus-visible, :focus-within) > .nx-tree__actions {
-    visibility: visible;
-  }
-
-  @media (hover: none) {
-    .nx-tree__actions {
-      visibility: visible;
-    }
-  }
-
-  .nx-btn.nx-tree__action {
-    --nx-btn-height: calc(var(--nx-tree-row) - 6px);
-  }
-
-  .nx-tree__action .nx-icon {
-    width: 15px;
-    height: 15px;
-  }
-
-  /* The name box of a row being added or renamed. */
-  .nx-tree__edit {
-    display: flex;
-    flex: 1 1 auto;
-    align-items: center;
-    gap: 1px;
-    min-width: 0;
-  }
-
-  .nx-tree__input {
-    flex: 1 1 auto;
-    width: 0;
-    min-width: 6em;
-    height: calc(var(--nx-tree-row) - 6px);
-    margin: 0 2px 0 0;
-    padding: 0 6px;
-    border: 1px solid var(--nx-field-accent);
-    border-radius: var(--nx-radius-sm);
-    background: var(--nx-surface);
-    box-shadow: var(--nx-field-ring);
-    color: var(--nx-text);
-    font: inherit;
-    outline: none;
-  }
-
-  .nx-tree__input[aria-invalid="true"] {
-    border-color: var(--nx-danger);
-    box-shadow: 0 0 0 3px color-mix(in oklab, var(--nx-danger) 30%, transparent);
-  }
-
-  .nx-tree__input:read-only {
-    color: var(--nx-text-muted);
-  }
-
-  /*
-   * Expand and collapse: the rows that come or go sit in a group whose height opens from 0, or closes to 0. Only the
-   * rows in view are in the group, so opening 10,000 children animates about 30 rows.
-   */
-  .nx-tree__motion {
-    height: var(--nx-tree-motion-height);
-    overflow: hidden;
-  }
-
-  .nx-tree__motion--open {
-    animation: nx-tree-open var(--nx-tree-open) cubic-bezier(0.2, 0, 0, 1);
-  }
-
-  .nx-tree__motion--close {
-    height: 0;
-    pointer-events: none;
-    animation: nx-tree-close var(--nx-tree-close) cubic-bezier(0.3, 0, 0.8, 0.15);
-  }
-
-  @keyframes nx-tree-open {
-    from {
-      height: 0;
-      opacity: 0.35;
-    }
-  }
-
-  @keyframes nx-tree-close {
-    from {
-      height: var(--nx-tree-motion-height);
-      opacity: 1;
-    }
-    to {
-      height: 0;
-      opacity: 0;
-    }
-  }
-
-  /* Loading and empty */
-  .nx-tree__row--skeleton {
-    cursor: default;
-  }
-
-  .nx-tree__skeleton {
-    display: inline-block;
-    height: 0.7em;
-    border-radius: var(--nx-radius-full);
-    background: color-mix(in oklab, var(--nx-text) 11%, transparent);
-    animation: nx-tree-pulse 1.2s ease-in-out infinite;
-  }
-
-  @keyframes nx-tree-pulse {
-    50% {
-      opacity: 0.45;
-    }
-  }
-
-  .nx-tree__empty {
-    margin: 0;
-    padding: var(--nx-space-6) var(--nx-space-4);
-    color: var(--nx-text-muted);
-    font-size: var(--nx-text-sm);
-    text-align: center;
-  }
-
-  /* States of the whole tree */
-  .nx-field[data-disabled] .nx-tree__row {
-    cursor: not-allowed;
-  }
-
-  .nx-field[data-disabled] .nx-tree__row:hover {
-    background-color: transparent;
-  }
-
-  .nx-field[data-readonly] .nx-tree__row {
-    cursor: default;
-  }
-
-  [data-nx-motion="reduce"] .nx-tree__motion,
-  [data-nx-motion="reduce"] .nx-tree__skeleton {
-    animation: none;
-  }
-
-  [data-nx-motion="reduce"] .nx-tree,
-  [data-nx-motion="reduce"] .nx-tree__toggle .nx-icon {
-    transition: none;
-  }
-}
+@layer nexus.components {
+  /*
+   * Tree view: a panel with a toolbar and a scrolling list of rows. Rows have a fixed height (the component places
+   * rows by it: keep --nx-tree-row and --nx-tree-pad in step with ROW_HEIGHT and PAD in TreeView.tsx). The checkbox
+   * is the CheckBox control itself, so checked, mixed, and read-only boxes look the same as everywhere else.
+   */
+  .nx-tree {
+    --nx-tree-row: 32px;
+    --nx-tree-pad: 4px;
+    --nx-tree-indent: 20px;
+    --nx-tree-font: var(--nx-text-md);
+    --nx-tree-open: 200ms;
+    --nx-tree-close: 160ms;
+    /* A line under every parent's chevron, soft enough to leave the rows in front. */
+    --nx-tree-guide: color-mix(in oklab, var(--nx-border-strong) 55%, transparent);
+
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+    overflow: hidden;
+    border: 1px solid var(--nx-field-border);
+    border-radius: var(--nx-radius);
+    background: var(--nx-field-bg);
+    color: var(--nx-text);
+    font-size: var(--nx-tree-font);
+    line-height: 1.35;
+    transition: border-color var(--nx-duration);
+  }
+
+  .nx-tree--sm {
+    --nx-tree-row: 28px;
+    --nx-tree-indent: 18px;
+    --nx-tree-font: var(--nx-text-sm);
+  }
+
+  .nx-tree--lg {
+    --nx-tree-row: 38px;
+    --nx-tree-indent: 22px;
+    --nx-tree-font: var(--nx-text-lg);
+  }
+
+  .nx-tree:hover {
+    border-color: var(--nx-field-border-hover);
+  }
+
+  .nx-tree:focus-within {
+    border-color: var(--nx-field-accent);
+  }
+
+  .nx-field:is([data-readonly], [data-disabled]) .nx-tree {
+    border-color: var(--nx-field-border);
+  }
+
+  /* Toolbar: select all and counts at the start, tools at the end, a line under it. */
+  .nx-tree__toolbar {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--nx-space-1) var(--nx-space-3);
+    min-height: calc(var(--nx-control-sm) + 12px);
+    padding: 6px 6px 6px var(--nx-space-3);
+    border-bottom: 1px solid var(--nx-border);
+    font-size: var(--nx-text-sm);
+  }
+
+  .nx-tree__all {
+    flex: none;
+  }
+
+  .nx-tree__all .nx-choice__label {
+    font-weight: 500;
+  }
+
+  /* A read-only tree has one lock, after its label; select all still shows the note when clicked. */
+  .nx-tree__all .nx-field__lock {
+    display: none;
+  }
+
+  .nx-tree__summary {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    min-width: 0;
+    margin-right: auto;
+    color: var(--nx-text-muted);
+    font-variant-numeric: tabular-nums;
+    white-space: nowrap;
+  }
+
+  .nx-tree__summary .nx-icon {
+    width: 14px;
+    height: 14px;
+    vertical-align: 0;
+  }
+
+  .nx-tree__tools {
+    display: inline-flex;
+    align-items: center;
+    gap: 2px;
+  }
+
+  .nx-tree__tools .nx-btn--secondary {
+    margin-left: var(--nx-space-1);
+  }
+
+  /* A tree that fills (`fill`): the height it is given, the toolbar on top and the rows scrolling under it. */
+  .nx-tree-field--fill {
+    height: 100%;
+    min-height: 0;
+  }
+
+  .nx-tree-field--fill > .nx-tree,
+  .nx-tree-field--fill .nx-tree__viewport {
+    flex: 1 1 auto;
+    min-height: 0;
+  }
+
+  /* Rows */
+  .nx-tree__viewport {
+    position: relative;
+    overflow: auto;
+    overscroll-behavior: contain;
+    outline: none;
+  }
+
+  .nx-tree__viewport:focus-visible {
+    box-shadow: inset 0 0 0 2px var(--nx-primary);
+  }
+
+  .nx-tree__list {
+    min-width: 0;
+    padding-inline: var(--nx-tree-pad);
+  }
+
+  .nx-tree__row {
+    --nx-tree-depth: 0;
+    /* Muted texts of a row. On a hovered or focused row they move toward the text color, so they keep 4.5:1 on the
+       hover tint in every theme. */
+    --nx-tree-muted: var(--nx-text-muted);
+    --nx-tree-count: color-mix(in oklab, var(--nx-text-muted), var(--nx-text) 25%);
+
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    height: var(--nx-tree-row);
+    padding: 0 4px 0 calc(var(--nx-tree-depth) * var(--nx-tree-indent));
+    border-radius: var(--nx-radius);
+    /* Guides: one line per level, centered under the chevron of the parent at that level. */
+    background-image: repeating-linear-gradient(
+      to right,
+      transparent 0 calc(var(--nx-tree-indent) / 2 - 0.5px),
+      var(--nx-tree-guide) calc(var(--nx-tree-indent) / 2 - 0.5px) calc(var(--nx-tree-indent) / 2 + 0.5px),
+      transparent calc(var(--nx-tree-indent) / 2 + 0.5px) var(--nx-tree-indent)
+    );
+    background-repeat: no-repeat;
+    background-size: calc(var(--nx-tree-depth) * var(--nx-tree-indent)) 100%;
+    white-space: nowrap;
+    cursor: pointer;
+    user-select: none;
+    outline: none;
+    -webkit-tap-highlight-color: transparent;
+  }
+
+  .nx-tree__row[role="treeitem"]:hover {
+    background-color: var(--nx-surface-hover);
+  }
+
+  .nx-tree__row:focus-visible {
+    background-color: var(--nx-surface-hover);
+    box-shadow: inset 0 0 0 2px var(--nx-primary);
+  }
+
+  .nx-tree__row[role="treeitem"]:is(:hover, :focus-visible),
+  .nx-tree__row--selected {
+    --nx-tree-muted: color-mix(in oklab, var(--nx-text-muted), var(--nx-text) 35%);
+    --nx-tree-count: color-mix(in oklab, var(--nx-text-muted), var(--nx-text) 50%);
+  }
+
+  /* The selected row (`selectedValue`): a single choice's tint, as a dropdown's chosen option has, and a heavier label.
+     It stays when focus moves on; under the pointer or with the keyboard's focus the tint deepens, and its muted texts
+     move further toward the text color (35% read 4.49:1 there in Catppuccin light). */
+  .nx-tree__row--selected {
+    background-color: color-mix(in oklab, var(--nx-primary) 10%, transparent);
+  }
+
+  .nx-tree__row--selected[role="treeitem"]:is(:hover, :focus-visible) {
+    --nx-tree-muted: color-mix(in oklab, var(--nx-text-muted), var(--nx-text) 50%);
+    --nx-tree-count: color-mix(in oklab, var(--nx-text-muted), var(--nx-text) 65%);
+    background-color: color-mix(in oklab, var(--nx-primary) 17%, transparent);
+  }
+
+  .nx-tree__row--selected .nx-tree__label {
+    font-weight: 500;
+  }
+
+  .nx-tree__toggle {
+    display: grid;
+    flex: none;
+    place-items: center;
+    width: var(--nx-tree-indent);
+    height: var(--nx-tree-indent);
+    margin-right: -2px;
+    border-radius: var(--nx-radius-sm);
+    color: var(--nx-tree-muted);
+  }
+
+  .nx-tree__toggle .nx-icon {
+    width: 14px;
+    height: 14px;
+    vertical-align: 0;
+    transition: transform var(--nx-tree-open) cubic-bezier(0.2, 0, 0, 1);
+  }
+
+  .nx-tree__row[aria-expanded="true"] > .nx-tree__toggle .nx-icon {
+    transform: rotate(90deg);
+  }
+
+  .nx-tree__toggle:has(.nx-icon):hover {
+    background: color-mix(in oklab, var(--nx-text) 10%, transparent);
+    color: var(--nx-text);
+  }
+
+  /* The CheckBox control, without its label's line-height offset; the row takes the clicks. */
+  .nx-tree__check {
+    flex: none;
+    align-items: center;
+    gap: 0;
+  }
+
+  .nx-tree__check .nx-choice__control {
+    margin: 0;
+    pointer-events: none;
+  }
+
+  .nx-tree__row:hover .nx-choice__control:not(:checked, :indeterminate, :disabled) {
+    border-color: var(--nx-choice-border-hover);
+  }
+
+  .nx-tree__icon {
+    display: grid;
+    flex: none;
+    place-items: center;
+    color: var(--nx-tree-muted);
+  }
+
+  .nx-tree__icon .nx-icon {
+    width: 1.15em;
+    height: 1.15em;
+    vertical-align: 0;
+  }
+
+  .nx-tree__text {
+    display: flex;
+    flex: 1 1 auto;
+    align-items: baseline;
+    gap: var(--nx-space-2);
+    min-width: 0;
+    overflow: hidden;
+  }
+
+  .nx-tree__label {
+    flex: 0 1 auto;
+    min-width: 2em;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .nx-tree__description {
+    flex: 0 100 auto;
+    min-width: 0;
+    overflow: hidden;
+    color: var(--nx-tree-muted);
+    font-size: calc(var(--nx-tree-font) - 1px);
+    text-overflow: ellipsis;
+  }
+
+  .nx-tree__count {
+    flex: none;
+    padding: 0 6px;
+    border-radius: var(--nx-radius-full);
+    background: color-mix(in oklab, var(--nx-text) 7%, transparent);
+    color: var(--nx-tree-count);
+    font-size: var(--nx-text-xs);
+    font-variant-numeric: tabular-nums;
+    line-height: 18px;
+  }
+
+  .nx-tree__lock,
+  .nx-tree__busy {
+    display: grid;
+    flex: none;
+    place-items: center;
+    color: var(--nx-tree-muted);
+  }
+
+  .nx-tree__lock .nx-icon,
+  .nx-tree__busy {
+    width: 14px;
+    height: 14px;
+    vertical-align: 0;
+  }
+
+  /*
+   * Rows that are not items, under a parent of a lazy tree (loadChildren): its page on its way, a page that failed
+   * with Retry, and Load more. They sit at the children's level and take no checkbox; the whole row is the button, so
+   * the Retry drawn in it is not a second stop for the keyboard.
+   */
+  .nx-tree__row--status {
+    cursor: default;
+  }
+
+  .nx-tree__row--more,
+  .nx-tree__row--error {
+    cursor: pointer;
+  }
+
+  /* Nothing to press while a page comes. */
+  .nx-tree__row--loading[role="treeitem"]:hover {
+    background-color: transparent;
+  }
+
+  .nx-tree__status-icon {
+    flex: none;
+    width: 14px;
+    height: 14px;
+    color: var(--nx-tree-muted);
+    vertical-align: 0;
+  }
+
+  /* The sentence keeps its own width, so Retry follows it rather than the row's far end. */
+  .nx-tree__row--status .nx-tree__text {
+    flex: 0 1 auto;
+  }
+
+  .nx-tree__status-text {
+    flex: 0 1 auto;
+    min-width: 0;
+    overflow: hidden;
+    color: var(--nx-tree-muted);
+    text-overflow: ellipsis;
+  }
+
+  .nx-tree__row--error .nx-tree__status-icon {
+    color: var(--nx-danger);
+  }
+
+  .nx-tree__row--error .nx-tree__status-text {
+    color: var(--nx-text);
+  }
+
+  /* The accent as text; on the hover tint it moves toward the text color, as muted texts do, to keep 4.5:1 (the plain
+     accent measured 3.79:1 on Dracula dark's hover tint). */
+  .nx-tree__row--more {
+    --nx-tree-link: var(--nx-primary);
+  }
+
+  .nx-tree__row--more:is(:hover, :focus-visible) {
+    --nx-tree-link: color-mix(in oklab, var(--nx-primary), var(--nx-text) 35%);
+  }
+
+  .nx-tree__row--more .nx-tree__status-text {
+    color: var(--nx-tree-link);
+    font-weight: 500;
+  }
+
+  .nx-btn.nx-tree__retry {
+    --nx-btn-height: calc(var(--nx-tree-row) - 6px);
+    flex: none;
+    margin-left: var(--nx-space-1);
+  }
+
+  /* A locked item: the read-only box (data-readonly), a muted label, and a lock. */
+  .nx-tree__row--locked {
+    cursor: default;
+  }
+
+  .nx-tree__row--locked .nx-tree__label {
+    color: var(--nx-tree-muted);
+  }
+
+  /* Actions show on the row under the pointer or with focus; on touch screens, always. They keep their space, so
+     labels do not jump when they appear. */
+  .nx-tree__actions {
+    display: flex;
+    flex: none;
+    gap: 1px;
+    margin-left: auto;
+    visibility: hidden;
+  }
+
+  .nx-tree__row:is(:hover, :focus-visible, :focus-within) > .nx-tree__actions {
+    visibility: visible;
+  }
+
+  @media (hover: none) {
+    .nx-tree__actions {
+      visibility: visible;
+    }
+  }
+
+  .nx-btn.nx-tree__action {
+    --nx-btn-height: calc(var(--nx-tree-row) - 6px);
+  }
+
+  .nx-tree__action .nx-icon {
+    width: 15px;
+    height: 15px;
+  }
+
+  /* The name box of a row being added or renamed. */
+  .nx-tree__edit {
+    display: flex;
+    flex: 1 1 auto;
+    align-items: center;
+    gap: 1px;
+    min-width: 0;
+  }
+
+  .nx-tree__input {
+    flex: 1 1 auto;
+    width: 0;
+    min-width: 6em;
+    height: calc(var(--nx-tree-row) - 6px);
+    margin: 0 2px 0 0;
+    padding: 0 6px;
+    border: 1px solid var(--nx-field-accent);
+    border-radius: var(--nx-radius-sm);
+    background: var(--nx-surface);
+    box-shadow: var(--nx-field-ring);
+    color: var(--nx-text);
+    font: inherit;
+    outline: none;
+  }
+
+  .nx-tree__input[aria-invalid="true"] {
+    border-color: var(--nx-danger);
+    box-shadow: 0 0 0 3px color-mix(in oklab, var(--nx-danger) 30%, transparent);
+  }
+
+  .nx-tree__input:read-only {
+    color: var(--nx-text-muted);
+  }
+
+  /*
+   * Expand and collapse: the rows that come or go sit in a group whose height opens from 0, or closes to 0. Only the
+   * rows in view are in the group, so opening 10,000 children animates about 30 rows.
+   */
+  .nx-tree__motion {
+    height: var(--nx-tree-motion-height);
+    overflow: hidden;
+  }
+
+  .nx-tree__motion--open {
+    animation: nx-tree-open var(--nx-tree-open) cubic-bezier(0.2, 0, 0, 1);
+  }
+
+  .nx-tree__motion--close {
+    height: 0;
+    pointer-events: none;
+    animation: nx-tree-close var(--nx-tree-close) cubic-bezier(0.3, 0, 0.8, 0.15);
+  }
+
+  @keyframes nx-tree-open {
+    from {
+      height: 0;
+      opacity: 0.35;
+    }
+  }
+
+  @keyframes nx-tree-close {
+    from {
+      height: var(--nx-tree-motion-height);
+      opacity: 1;
+    }
+    to {
+      height: 0;
+      opacity: 0;
+    }
+  }
+
+  /* Loading and empty */
+  .nx-tree__row--skeleton {
+    cursor: default;
+  }
+
+  .nx-tree__skeleton {
+    display: inline-block;
+    height: 0.7em;
+    border-radius: var(--nx-radius-full);
+    background: color-mix(in oklab, var(--nx-text) 11%, transparent);
+    animation: nx-tree-pulse 1.2s ease-in-out infinite;
+  }
+
+  @keyframes nx-tree-pulse {
+    50% {
+      opacity: 0.45;
+    }
+  }
+
+  .nx-tree__empty {
+    margin: 0;
+    padding: var(--nx-space-6) var(--nx-space-4);
+    color: var(--nx-text-muted);
+    font-size: var(--nx-text-sm);
+    text-align: center;
+  }
+
+  /* States of the whole tree */
+  .nx-field[data-disabled] .nx-tree__row {
+    cursor: not-allowed;
+  }
+
+  .nx-field[data-disabled] .nx-tree__row:hover {
+    background-color: transparent;
+  }
+
+  .nx-field[data-readonly] .nx-tree__row {
+    cursor: default;
+  }
+
+  [data-nx-motion="reduce"] .nx-tree__motion,
+  [data-nx-motion="reduce"] .nx-tree__skeleton {
+    animation: none;
+  }
+
+  [data-nx-motion="reduce"] .nx-tree,
+  [data-nx-motion="reduce"] .nx-tree__toggle .nx-icon {
+    transition: none;
+  }
+}