nexus-shared 1.1.20 → 2.0.0

package/src/Styles/Nexus.Slider.css

@@ -0,0 +1,278 @@
+@layer nexus.components {
+  /*
+   * Slider and range slider. The track and fill are drawn behind native range inputs whose own track is transparent,
+   * so one and two thumbs look the same in every browser. Positions come from unitless fractions (0 to 1) that the
+   * component writes to --nx-slider-start, --nx-slider-end, and --nx-slider-at: a thumb's center runs from half a thumb
+   * in from the left edge to half a thumb in from the right.
+   */
+  .nx-slider {
+    --nx-slider-thumb: 16px;
+    --nx-slider-track: 4px;
+    --nx-slider-accent: var(--nx-primary);
+    /* A dark panel needs a stronger mix for the rail to stay visible. */
+    --nx-slider-rail: light-dark(color-mix(in oklab, var(--nx-text) 14%, var(--nx-surface)), color-mix(in oklab, var(--nx-text) 24%, var(--nx-surface)));
+    --nx-field-label-font: var(--nx-text-sm);
+
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+  }
+
+  .nx-slider--sm {
+    --nx-slider-thumb: 14px;
+    --nx-slider-track: 3px;
+    --nx-field-label-font: var(--nx-text-xs);
+  }
+
+  .nx-slider--lg {
+    --nx-slider-thumb: 20px;
+    --nx-slider-track: 6px;
+    --nx-field-label-font: var(--nx-text-md);
+  }
+
+  .nx-slider__head {
+    display: flex;
+    align-items: baseline;
+    justify-content: space-between;
+    gap: var(--nx-space-3);
+    margin-bottom: 2px;
+  }
+
+  .nx-slider__value {
+    color: var(--nx-text);
+    font-size: var(--nx-field-label-font);
+    font-weight: 600;
+    font-variant-numeric: tabular-nums;
+    /* The same line height as the label, so a row with a value is as tall as one without. */
+    line-height: 1.3;
+    white-space: nowrap;
+  }
+
+  /* Taller than the thumb, so the hover and focus rings have room. */
+  .nx-slider__control {
+    position: relative;
+    height: calc(var(--nx-slider-thumb) + 12px);
+  }
+
+  .nx-slider--range .nx-slider__control {
+    cursor: pointer;
+    touch-action: none;
+  }
+
+  .nx-slider__track {
+    position: absolute;
+    top: 50%;
+    right: 0;
+    left: 0;
+    height: var(--nx-slider-track);
+    border-radius: var(--nx-radius-full);
+    background: var(--nx-slider-rail);
+    transform: translateY(-50%);
+    pointer-events: none;
+  }
+
+  .nx-slider__fill {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: calc(var(--nx-slider-thumb) / 2 + (100% - var(--nx-slider-thumb)) * var(--nx-slider-start));
+    right: calc(100% - var(--nx-slider-thumb) / 2 - (100% - var(--nx-slider-thumb)) * var(--nx-slider-end));
+    border-radius: inherit;
+    background: var(--nx-slider-accent);
+  }
+
+  /* One thumb: the fill starts at the left end of the track. */
+  .nx-slider:not(.nx-slider--range) .nx-slider__fill {
+    left: 0;
+  }
+
+  .nx-slider__input {
+    appearance: none;
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    background: transparent;
+    cursor: pointer;
+  }
+
+  .nx-slider__input:focus-visible {
+    outline: none;
+  }
+
+  .nx-slider__input::-webkit-slider-runnable-track {
+    height: 100%;
+    background: transparent;
+  }
+
+  .nx-slider__input::-moz-range-track {
+    height: 100%;
+    background: transparent;
+  }
+
+  .nx-slider__input::-webkit-slider-thumb {
+    appearance: none;
+    box-sizing: border-box;
+    width: var(--nx-slider-thumb);
+    height: var(--nx-slider-thumb);
+    margin-top: 6px;
+    border: 2px solid var(--nx-slider-accent);
+    border-radius: 50%;
+    background: var(--nx-surface);
+    box-shadow: var(--nx-shadow-sm);
+    transition: box-shadow var(--nx-duration);
+  }
+
+  .nx-slider__input::-moz-range-thumb {
+    box-sizing: border-box;
+    width: var(--nx-slider-thumb);
+    height: var(--nx-slider-thumb);
+    border: 2px solid var(--nx-slider-accent);
+    border-radius: 50%;
+    background: var(--nx-surface);
+    box-shadow: var(--nx-shadow-sm);
+    transition: box-shadow var(--nx-duration);
+  }
+
+  .nx-slider__input:hover::-webkit-slider-thumb {
+    box-shadow: 0 0 0 5px color-mix(in oklab, var(--nx-slider-accent) 16%, transparent);
+  }
+
+  .nx-slider__input:hover::-moz-range-thumb {
+    box-shadow: 0 0 0 5px color-mix(in oklab, var(--nx-slider-accent) 16%, transparent);
+  }
+
+  .nx-slider__input:focus-visible::-webkit-slider-thumb {
+    box-shadow: var(--nx-focus-ring);
+  }
+
+  .nx-slider__input:focus-visible::-moz-range-thumb {
+    box-shadow: var(--nx-focus-ring);
+  }
+
+  .nx-slider__input:active::-webkit-slider-thumb {
+    box-shadow: 0 0 0 7px color-mix(in oklab, var(--nx-slider-accent) 22%, transparent);
+  }
+
+  .nx-slider__input:active::-moz-range-thumb {
+    box-shadow: 0 0 0 7px color-mix(in oklab, var(--nx-slider-accent) 22%, transparent);
+  }
+
+  /* Two thumbs: each input takes the pointer only on its thumb; the one moved last sits on top. */
+  .nx-slider--range .nx-slider__input {
+    pointer-events: none;
+  }
+
+  .nx-slider--range .nx-slider__input::-webkit-slider-thumb {
+    pointer-events: auto;
+  }
+
+  .nx-slider--range .nx-slider__input::-moz-range-thumb {
+    pointer-events: auto;
+  }
+
+  .nx-slider__control[data-active="0"] .nx-slider__input:first-of-type,
+  .nx-slider__control[data-active="1"] .nx-slider__input:last-of-type {
+    z-index: 1;
+  }
+
+  /* The value above the thumb */
+  .nx-slider__tooltip {
+    position: absolute;
+    z-index: 2;
+    bottom: calc(100% - 2px);
+    left: calc(var(--nx-slider-thumb) / 2 + (100% - var(--nx-slider-thumb)) * var(--nx-slider-at));
+    padding: 3px 7px;
+    border-radius: var(--nx-radius-sm);
+    background: var(--nx-text);
+    color: var(--nx-surface);
+    font-size: var(--nx-text-xs);
+    font-weight: 600;
+    font-variant-numeric: tabular-nums;
+    line-height: 1.3;
+    white-space: nowrap;
+    opacity: 0;
+    transform: translate(-50%, 4px);
+    pointer-events: none;
+    transition:
+      opacity var(--nx-duration),
+      transform var(--nx-duration);
+  }
+
+  .nx-slider__input:is(:hover, :focus-visible, :active) + .nx-slider__tooltip {
+    opacity: 1;
+    transform: translate(-50%, 0);
+  }
+
+  /* Marks under the track: clickable labels, centered on their point; the end marks line up with the track's ends. */
+  .nx-slider__marks {
+    position: relative;
+    height: 1.4em;
+    margin-top: -2px;
+    font-size: var(--nx-text-xs);
+  }
+
+  .nx-slider__mark {
+    position: absolute;
+    top: 0;
+    left: calc(var(--nx-slider-thumb) / 2 + (100% - var(--nx-slider-thumb)) * var(--nx-slider-at));
+    padding: 0 2px;
+    border: 0;
+    border-radius: var(--nx-radius-sm);
+    background: none;
+    color: var(--nx-text-muted);
+    font: inherit;
+    line-height: 1.4;
+    white-space: nowrap;
+    transform: translateX(-50%);
+    cursor: pointer;
+  }
+
+  .nx-slider__mark[data-edge="start"] {
+    left: 0;
+    transform: none;
+  }
+
+  .nx-slider__mark[data-edge="end"] {
+    right: 0;
+    left: auto;
+    transform: none;
+  }
+
+  .nx-slider__mark:hover:not(:disabled) {
+    color: var(--nx-text);
+  }
+
+  .nx-slider > .nx-field__footer {
+    margin-top: 4px;
+  }
+
+  /* States */
+  .nx-slider[data-invalid] {
+    --nx-slider-accent: var(--nx-danger);
+  }
+
+  .nx-slider[data-disabled] {
+    opacity: 0.55;
+  }
+
+  .nx-slider[data-disabled] :is(.nx-slider__control, .nx-slider__input, .nx-slider__mark) {
+    cursor: not-allowed;
+  }
+
+  .nx-slider[data-readonly] {
+    --nx-slider-accent: color-mix(in oklab, var(--nx-primary) 60%, var(--nx-text-subtle));
+  }
+
+  .nx-slider[data-readonly] :is(.nx-slider__control, .nx-slider__input, .nx-slider__mark) {
+    cursor: default;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .nx-slider__tooltip,
+    .nx-slider__input::-webkit-slider-thumb {
+      transition: none;
+    }
+  }
+}

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

@@ -0,0 +1,364 @@
+@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;
+  }
+
+  .nx-tabs--labels-selected .nx-tabs__text {
+    min-width: 0;
+    overflow: hidden;
+    padding-block: 2px;
+    text-overflow: ellipsis;
+  }
+
+  /*
+   * 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);
+  }
+
+  .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;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .nx-tabs__indicator,
+    .nx-tabs--labels-selected :is(.nx-tabs__option, .nx-tabs__label),
+    .nx-tabs--list .nx-tabs__option::before {
+      transition: none;
+    }
+  }
+}