nexus-shared 2.0.0 → 3.1.0

package/src/Styles/Nexus.Slider.css

@@ -1,278 +1,276 @@
-@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;
-    }
-  }
-}
+@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;
+  }
+
+  [data-nx-motion="reduce"] .nx-slider__tooltip,
+  [data-nx-motion="reduce"] .nx-slider__input::-webkit-slider-thumb {
+    transition: none;
+  }
+}