@salt-ds/lab 1.0.0-alpha.62 → 1.0.0-alpha.64

package/css/salt-lab.css

@@ -879,7 +879,6 @@
   border-radius: var(--salt-palette-corner-weak, 0);
   color: var(--saltDateInput-color, var(--salt-content-primary-foreground));
   display: inline-flex;
-  gap: var(--salt-spacing-50);
   font-family: var(--salt-text-fontFamily);
   font-size: var(--saltDateInput-fontSize, var(--salt-text-fontSize));
   line-height: var(--saltDateInput-lineHeight, var(--salt-text-lineHeight));
@@ -890,9 +889,9 @@
   padding-left: var(--saltDateInput-paddingLeft, var(--salt-spacing-100));
   padding-right: var(--saltDateInput-paddingRight, var(--salt-spacing-100));
   position: relative;
-  width: 100%;
   box-sizing: border-box;
   overflow: hidden;
+  width: 100%;
 }
 .saltDateInput:hover {
   background: var(--saltDateInput-background-hover, var(--input-background-hover));
@@ -1021,7 +1020,7 @@
   cursor: var(--salt-editable-cursor-disabled);
   color: var(--saltDateInput-color-disabled, var(--salt-content-primary-foreground-disabled));
 }
-.saltInput-startAdornmentContainer {
+.saltDateInput-startAdornmentContainer {
   align-items: center;
   display: inline-flex;
   padding-right: var(--salt-spacing-100);
@@ -1029,9 +1028,7 @@
 }
 .saltDateInput-endAdornmentContainer {
   display: inline-flex;
-  padding-left: var(--salt-spacing-100);
-  column-gap: var(--salt-spacing-100);
-  margin-left: auto;
+  column-gap: var(--salt-spacing-50);
   align-items: end;
 }
 .saltDateInput-endAdornmentContainer .saltButton ~ .saltButton {
@@ -1040,9 +1037,11 @@
 .saltDateInput-endAdornmentContainer .saltButton:last-child {
   margin-right: calc(var(--salt-spacing-50) * -1);
 }
+.saltDateInput-startAdornmentContainer > .saltButton,
 .saltDateInput-endAdornmentContainer > .saltButton {
-  --saltButton-padding: var(--salt-spacing-50);
+  --saltButton-padding: calc(var(--salt-spacing-50) - var(--salt-size-border));
   --saltButton-height: calc(var(--salt-size-base) - var(--salt-spacing-100));
+  --saltButton-borderRadius: var(--salt-palette-corner-weaker);
 }
 .saltDateInput-input {
   background: none;
@@ -1060,6 +1059,7 @@
   padding: 0;
   text-align: left;
   width: min-content;
+  width: 100%;
 }
 .saltDateInput-input:focus {
   outline: none;
@@ -1074,6 +1074,9 @@
   color: var(--salt-content-secondary-foreground);
   font-weight: var(--salt-text-fontWeight-small);
 }
+.saltDateInput-dash {
+  margin: 0 var(--salt-spacing-50);
+}
 
 /* src/date-picker/DatePickerActions.css */
 .saltDatePickerActions {
@@ -1167,50 +1170,6 @@
   transform: translateY(var(--deckLayout-transform-value));
 }
 
-/* src/dialog/DialogHeader.css */
-.saltDialogHeader {
-  padding-bottom: var(--salt-spacing-300);
-  padding-left: var(--salt-spacing-300);
-  padding-right: var(--salt-spacing-300);
-  display: flex;
-  flex-direction: row;
-  gap: var(--salt-spacing-100);
-  box-sizing: border-box;
-}
-.saltDialogHeader-header {
-  margin: 0;
-}
-.saltDialogHeader-container {
-  flex-grow: 1;
-  margin: 0;
-  display: flex;
-  flex-direction: column;
-  gap: var(--salt-spacing-50);
-  padding-top: calc((var(--salt-size-base) - var(--salt-text-h2-lineHeight)) / 2);
-}
-.saltDialogHeader-header > .saltText {
-  margin: 0;
-}
-.saltDialogHeader-actionsContainer {
-  align-self: flex-start;
-}
-.saltDialogHeader .saltStatusIndicator.saltIcon {
-  --icon-size: var(--salt-text-h2-lineHeight);
-  padding-top: calc((var(--salt-size-base) - var(--salt-text-h2-lineHeight)) / 2);
-}
-.saltDialogHeader-withAccent {
-  position: relative;
-}
-.saltDialogHeader-withAccent::before {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: 0;
-  bottom: var(--salt-spacing-300);
-  width: var(--salt-size-bar);
-  background: var(--salt-accent-background);
-}
-
 /* src/dropdown/Dropdown.css */
 .saltDropdownBase {
   --saltIcon-margin: 2px 0 0 8px;
@@ -2395,31 +2354,230 @@
   align-items: flex-end;
 }
 
-/* src/overlay/OverlayHeader.css */
-.saltOverlayHeader {
-  padding: var(--salt-spacing-100);
+/* src/number-input/NumberInput.css */
+.saltNumberInput {
+  --numberInput-border: none;
+  --numberInput-borderColor: var(--salt-editable-borderColor);
+  --numberInput-borderStyle: var(--salt-editable-borderStyle);
+  --numberInput-outlineColor: var(--salt-focused-outlineColor);
+  --numberInput-borderWidth: var(--salt-size-border);
+  align-items: center;
+  color: var(--salt-content-primary-foreground);
+  display: inline-flex;
+  font-family: var(--salt-text-fontFamily);
+  font-size: var(--salt-text-fontSize);
+  height: var(--salt-size-base);
+  line-height: var(--salt-text-lineHeight);
+  min-height: var(--salt-size-base);
+  min-width: 4em;
   width: 100%;
-  display: flex;
-  flex-direction: row;
-  justify-content: stretch;
-  gap: var(--salt-spacing-100);
   box-sizing: border-box;
+  gap: var(--salt-spacing-50);
+}
+.saltNumberInput:hover {
+  --numberInput-borderStyle: var(--salt-editable-borderStyle-hover);
+  --numberInput-borderColor: var(--salt-editable-borderColor-hover);
+  background: var(--numberInput-background-hover);
+  cursor: var(--salt-editable-cursor-hover);
 }
-.saltOverlayHeader-container {
+.saltNumberInput:active {
+  --numberInput-borderColor: var(--salt-editable-borderColor-active);
+  --numberInput-borderStyle: var(--salt-editable-borderStyle-active);
+  --numberInput-borderWidth: var(--salt-editable-borderWidth-active);
+  background: var(--numberInput-background-active);
+  cursor: var(--salt-editable-cursor-active);
+}
+.saltNumberInput-primary {
+  --numberInput-background: var(--salt-editable-primary-background);
+  --numberInput-background-active: var(--salt-editable-primary-background-active);
+  --numberInput-background-hover: var(--salt-editable-primary-background-hover);
+  --numberInput-background-disabled: var(--salt-editable-primary-background-disabled);
+  --numberInput-background-readonly: var(--salt-editable-primary-background-readonly);
+}
+.saltNumberInput-secondary {
+  --numberInput-background: var(--salt-editable-secondary-background);
+  --numberInput-background-active: var(--salt-editable-secondary-background-active);
+  --numberInput-background-hover: var(--salt-editable-secondary-background-active);
+  --numberInput-background-disabled: var(--salt-editable-secondary-background-disabled);
+  --numberInput-background-readonly: var(--salt-editable-secondary-background-readonly);
+}
+.saltNumberInput-error,
+.saltNumberInput-error:hover {
+  --numberInput-background: var(--salt-status-error-background);
+  --numberInput-background-active: var(--salt-status-error-background);
+  --numberInput-background-hover: var(--salt-status-error-background);
+  --numberInput-borderColor: var(--salt-status-error-borderColor);
+  --numberInput-outlineColor: var(--salt-status-error-borderColor);
+  --numberInput-background-readonly: var(--salt-status-error-background);
+}
+.saltNumberInput-warning,
+.saltNumberInput-warning:hover {
+  --numberInput-background: var(--salt-status-warning-background);
+  --numberInput-background-active: var(--salt-status-warning-background);
+  --numberInput-background-hover: var(--salt-status-warning-background);
+  --numberInput-borderColor: var(--salt-status-warning-borderColor);
+  --numberInput-outlineColor: var(--salt-status-warning-borderColor);
+  --numberInput-background-readonly: var(--salt-status-warning-background);
+}
+.saltNumberInput-success,
+.saltNumberInput-success:hover {
+  --numberInput-background: var(--salt-status-success-background);
+  --numberInput-background-active: var(--salt-status-success-background);
+  --numberInput-background-hover: var(--salt-status-success-background);
+  --numberInput-borderColor: var(--salt-status-success-borderColor);
+  --numberInput-outlineColor: var(--salt-status-success-borderColor);
+  --numberInput-background-readonly: var(--salt-status-success-background);
+}
+.saltNumberInput-inputContainer {
+  display: flex;
+  background: var(--numberInput-background);
+  border-radius: var(--salt-palette-corner-weak, 0);
+  border: var(--numberInput-border);
+  box-sizing: border-box;
+  height: var(--salt-size-base);
+  min-height: var(--salt-size-base);
+  overflow: hidden;
+  padding-left: var(--salt-spacing-100);
+  padding-right: var(--salt-spacing-100);
+  position: relative;
   flex-grow: 1;
+}
+.saltNumberInput-input {
+  background: none;
+  border: none;
+  box-sizing: content-box;
+  color: inherit;
+  cursor: inherit;
+  display: block;
+  flex: 1;
+  font: inherit;
+  height: 100%;
+  letter-spacing: var(--saltNumberInput-letterSpacing, 0);
   margin: 0;
+  min-width: 0;
+  overflow: hidden;
+  padding: 0;
+  text-align: var(--numberInput-textAlign);
+  width: 100%;
+}
+.saltNumberInput-input:focus {
+  outline: none;
+}
+.saltNumberInput-input::selection {
+  background: var(--salt-content-foreground-highlight);
+}
+.saltNumberInput-input::placeholder {
+  color: var(--salt-content-secondary-foreground);
+  font-weight: var(--salt-text-fontWeight-small);
+}
+.saltNumberInput-focused {
+  --numberInput-borderColor: var(--numberInput-outlineColor);
+  --numberInput-borderWidth: var(--salt-editable-borderWidth-active);
+  outline: var(--saltNumberInput-outline, var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--numberInput-outlineColor));
+}
+.saltNumberInput-readOnly {
+  --numberInput-borderColor: var(--salt-editable-borderColor-readonly);
+  --numberInput-borderStyle: var(--salt-editable-borderStyle-readonly);
+  --numberInput-borderWidth: var(--salt-size-border);
+  background: var(--numberInput-background-readonly);
+  cursor: var(--salt-editable-cursor-readonly);
+}
+.saltNumberInput-focused.saltNumberInput-disabled {
+  --numberInput-borderWidth: var(--salt-size-border);
+  outline: none;
+}
+.saltNumberInput-focused.saltNumberInput-readOnly {
+  --numberInput-borderWidth: var(--salt-size-border);
+}
+.saltNumberInput-disabled .saltNumberInput-input::selection {
+  background: none;
+}
+.saltNumberInput-disabled,
+.saltNumberInput-disabled:hover,
+.saltNumberInput-disabled:active {
+  --numberInput-borderColor: var(--salt-editable-borderColor-disabled);
+  --numberInput-borderStyle: var(--salt-editable-borderStyle-disabled);
+  --numberInput-borderWidth: var(--salt-size-border);
+  background: var(--numberInput-background-disabled);
+  cursor: var(--salt-editable-cursor-disabled);
+  color: var(--saltNumberInput-color-disabled, var(--salt-content-primary-foreground-disabled));
+}
+.saltNumberInput-activationIndicator {
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  position: absolute;
+  border-bottom: var(--numberInput-borderWidth) var(--numberInput-borderStyle) var(--numberInput-borderColor);
+}
+.saltNumberInput-bordered {
+  --numberInput-border: var(--salt-size-border) var(--salt-container-borderStyle) var(--numberInput-borderColor);
+  --numberInput-borderWidth: 0;
+}
+.saltNumberInput-bordered.saltNumberInput-focused,
+.saltNumberInput-bordered:active {
+  --numberInput-borderWidth: var(--salt-editable-borderWidth-active);
+}
+.saltNumberInput-bordered.saltNumberInput-readOnly,
+.saltNumberInput-bordered.saltNumberInput-disabled:hover {
+  --numberInput-borderWidth: 0;
+}
+.saltNumberInput-startAdornmentContainer {
+  align-items: center;
+  display: inline-flex;
+  padding-right: var(--salt-spacing-100);
+  column-gap: var(--salt-spacing-100);
+}
+.saltNumberInput-endAdornmentContainer {
+  align-items: center;
+  display: inline-flex;
+  padding-left: var(--salt-spacing-100);
+  column-gap: var(--salt-spacing-100);
+}
+.saltNumberInput-readOnly .saltNumberInput-startAdornmentContainer {
+  margin-left: var(--salt-spacing-50);
+}
+.saltNumberInput-startAdornmentContainer .saltButton ~ .saltButton {
+  margin-left: calc(-1 * var(--salt-spacing-50));
+}
+.saltNumberInput-endAdornmentContainer .saltButton ~ .saltButton {
+  margin-left: calc(-1 * var(--salt-spacing-50));
+}
+.saltNumberInput-startAdornmentContainer .saltButton:first-child {
+  margin-left: calc(var(--salt-spacing-50) * -1);
+}
+.saltNumberInput-endAdornmentContainer .saltButton:last-child {
+  margin-right: calc(var(--salt-spacing-50) * -1);
+}
+.saltNumberInput-startAdornmentContainer > .saltButton,
+.saltNumberInput-endAdornmentContainer > .saltButton {
+  --saltButton-padding: calc(var(--salt-spacing-50) - var(--salt-size-border));
+  --saltButton-height: calc(var(--salt-size-base) - var(--salt-spacing-100));
+  --saltButton-borderRadius: var(--salt-palette-corner-weaker);
+}
+.saltNumberInput-inputTextAlignLeft {
+  text-align: left;
+}
+.saltNumberInput-inputTextAlignCenter {
+  text-align: center;
+}
+.saltNumberInput-inputTextAlignRight {
+  text-align: right;
+}
+.saltNumberInput-buttonContainer {
+  --numberInput-buttonGap: var(--salt-size-border-strong);
   display: flex;
   flex-direction: column;
-  gap: var(--salt-spacing-50);
+  gap: var(--numberInput-buttonGap);
 }
-.saltOverlayHeader-header {
-  margin: 0;
+.saltNumberInput-numberButton {
+  --saltButton-height: calc((var(--salt-size-base) - var(--numberInput-buttonGap)) * 0.5);
+  --saltButton-width: var(--salt-size-base);
 }
-.saltOverlayHeader-actionsContainer {
-  align-self: flex-start;
+.saltNumberInput-numberButtonIncrement {
+  --saltButton-borderRadius: var(--salt-palette-corner-weak, 0) var(--salt-palette-corner-weak, 0) 0 0;
 }
-.saltOverlayHeader ~ .saltOverlayPanelContent {
-  padding-top: 0;
+.saltNumberInput-numberButtonDecrement {
+  --saltButton-borderRadius: 0 0 var(--salt-palette-corner-weak, 0) var(--salt-palette-corner-weak, 0);
 }
 
 /* src/query-input/QueryInput.css */
@@ -2520,126 +2678,6 @@
   display: none;
 }
 
-/* src/slider/Slider.css */
-.saltSlider {
-  display: grid;
-  gap: var(--salt-spacing-100);
-  grid-template-columns: auto 1fr auto;
-  user-select: none;
-}
-.saltSlider-label {
-  height: var(--salt-size-base);
-  display: flex;
-  align-items: center;
-}
-.saltSlider-bottomLabel {
-  grid-template-columns: 1fr;
-  gap: 0;
-}
-.saltSlider-bottomLabel .saltSlider-label {
-  height: auto;
-}
-.saltSlider-labelMinBottom {
-  grid-row: 2;
-  grid-column: 1;
-  justify-self: start;
-  width: min-content;
-}
-.saltSlider-labelMaxBottom {
-  grid-row: 2;
-  grid-column: 1;
-  justify-self: end;
-  width: min-content;
-}
-.saltSliderTrack {
-  display: flex;
-  position: relative;
-  cursor: pointer;
-  align-items: center;
-  height: var(--salt-size-base);
-}
-.saltSliderTrack-rail {
-  height: var(--salt-size-bar);
-  background: var(--salt-track-borderColor);
-  width: 100%;
-  position: absolute;
-}
-.saltSliderTrack:active {
-  cursor: grabbing;
-}
-.saltSliderThumb-container {
-  position: absolute;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transform: translate(-50%, 0%);
-  width: var(--salt-size-base);
-  height: var(--salt-size-base);
-}
-.saltSliderThumb-tooltip {
-  background: var(--salt-container-primary-background);
-  border-color: var(--salt-status-info-borderColor);
-  border-style: var(--salt-container-borderStyle);
-  border-width: var(--salt-size-border);
-  line-height: var(--salt-text-lineHeight);
-  box-shadow: var(--salt-overlayable-shadow-popout);
-  color: var(--salt-content-primary-foreground);
-  max-width: var(--saltTooltip-maxWidth, 230px);
-  padding: var(--saltTooltip-padding, var(--salt-size-unit));
-  position: absolute;
-  z-index: var(--salt-zIndex-flyover);
-  transform: translate(0, -100%);
-  display: none;
-}
-.saltSliderThumb-tooltip-arrow {
-  position: absolute;
-  pointer-events: none;
-  top: 100%;
-  left: 50%;
-  transform: translate(-50%, 0);
-  stroke: none;
-  fill: var(--salt-container-primary-background);
-  stroke: var(--salt-status-info-borderColor);
-  stroke-width: var(--salt-size-border);
-  width: var(--salt-size-icon);
-  height: var(--salt-size-icon);
-}
-.saltSliderThumb-tooltip-visible {
-  display: block;
-}
-.saltSliderThumb-container:hover .saltSliderThumb-tooltip {
-  display: block;
-}
-.saltSliderThumb {
-  position: relative;
-  width: var(--salt-size-indicator);
-  height: var(--salt-size-selectable);
-  background: var(--salt-accent-borderColor);
-}
-.saltSliderThumb:focus-visible {
-  outline-style: var(--salt-focused-outlineStyle);
-  outline-width: var(--salt-focused-outlineWidth);
-  outline-offset: var(--salt-focused-outlineOffset);
-  outline-color: var(--salt-focused-outlineColor);
-}
-.saltSliderSelection {
-  height: var(--salt-size-bar);
-  background: var(--salt-accent-borderColor);
-  align-items: start;
-  position: absolute;
-}
-.saltSliderSelection-range {
-  align-items: center;
-}
-.saltSliderMarks {
-  position: relative;
-}
-.saltSliderMarks-mark {
-  position: absolute;
-  transform: translate(-50%);
-  line-height: var(--salt-text-lineHeight);
-}
-
 /* src/splitter/SplitHandle.css */
 .saltSplitHandle {
   --splitHandle-size: var(--salt-size-thickness-400, calc(var(--salt-size-border) * 4));
@@ -3052,232 +3090,6 @@
   visibility: hidden;
 }
 
-/* src/stepper-input/StepperInput.css */
-.saltStepperInput {
-  --stepperInput-border: none;
-  --stepperInput-borderColor: var(--salt-editable-borderColor);
-  --stepperInput-borderStyle: var(--salt-editable-borderStyle);
-  --stepperInput-outlineColor: var(--salt-focused-outlineColor);
-  --stepperInput-borderWidth: var(--salt-size-border);
-  align-items: center;
-  color: var(--salt-content-primary-foreground);
-  display: inline-flex;
-  font-family: var(--salt-text-fontFamily);
-  font-size: var(--salt-text-fontSize);
-  height: var(--salt-size-base);
-  line-height: var(--salt-text-lineHeight);
-  min-height: var(--salt-size-base);
-  min-width: 4em;
-  width: 100%;
-  box-sizing: border-box;
-  gap: var(--salt-spacing-50);
-}
-.saltStepperInput:hover {
-  --stepperInput-borderStyle: var(--salt-editable-borderStyle-hover);
-  --stepperInput-borderColor: var(--salt-editable-borderColor-hover);
-  background: var(--stepperInput-background-hover);
-  cursor: var(--salt-editable-cursor-hover);
-}
-.saltStepperInput:active {
-  --stepperInput-borderColor: var(--salt-editable-borderColor-active);
-  --stepperInput-borderStyle: var(--salt-editable-borderStyle-active);
-  --stepperInput-borderWidth: var(--salt-editable-borderWidth-active);
-  background: var(--stepperInput-background-active);
-  cursor: var(--salt-editable-cursor-active);
-}
-.saltStepperInput-primary {
-  --stepperInput-background: var(--salt-editable-primary-background);
-  --stepperInput-background-active: var(--salt-editable-primary-background-active);
-  --stepperInput-background-hover: var(--salt-editable-primary-background-hover);
-  --stepperInput-background-disabled: var(--salt-editable-primary-background-disabled);
-  --stepperInput-background-readonly: var(--salt-editable-primary-background-readonly);
-}
-.saltStepperInput-secondary {
-  --stepperInput-background: var(--salt-editable-secondary-background);
-  --stepperInput-background-active: var(--salt-editable-secondary-background-active);
-  --stepperInput-background-hover: var(--salt-editable-secondary-background-active);
-  --stepperInput-background-disabled: var(--salt-editable-secondary-background-disabled);
-  --stepperInput-background-readonly: var(--salt-editable-secondary-background-readonly);
-}
-.saltStepperInput-error,
-.saltStepperInput-error:hover {
-  --stepperInput-background: var(--salt-status-error-background);
-  --stepperInput-background-active: var(--salt-status-error-background);
-  --stepperInput-background-hover: var(--salt-status-error-background);
-  --stepperInput-borderColor: var(--salt-status-error-borderColor);
-  --stepperInput-outlineColor: var(--salt-status-error-borderColor);
-  --stepperInput-background-readonly: var(--salt-status-error-background);
-}
-.saltStepperInput-warning,
-.saltStepperInput-warning:hover {
-  --stepperInput-background: var(--salt-status-warning-background);
-  --stepperInput-background-active: var(--salt-status-warning-background);
-  --stepperInput-background-hover: var(--salt-status-warning-background);
-  --stepperInput-borderColor: var(--salt-status-warning-borderColor);
-  --stepperInput-outlineColor: var(--salt-status-warning-borderColor);
-  --stepperInput-background-readonly: var(--salt-status-warning-background);
-}
-.saltStepperInput-success,
-.saltStepperInput-success:hover {
-  --stepperInput-background: var(--salt-status-success-background);
-  --stepperInput-background-active: var(--salt-status-success-background);
-  --stepperInput-background-hover: var(--salt-status-success-background);
-  --stepperInput-borderColor: var(--salt-status-success-borderColor);
-  --stepperInput-outlineColor: var(--salt-status-success-borderColor);
-  --stepperInput-background-readonly: var(--salt-status-success-background);
-}
-.saltStepperInput-inputContainer {
-  display: flex;
-  background: var(--stepperInput-background);
-  border-radius: var(--salt-palette-corner-weak, 0);
-  border: var(--stepperInput-border);
-  box-sizing: border-box;
-  height: var(--salt-size-base);
-  min-height: var(--salt-size-base);
-  overflow: hidden;
-  padding-left: var(--salt-spacing-100);
-  padding-right: var(--salt-spacing-100);
-  position: relative;
-  flex-grow: 1;
-}
-.saltStepperInput-input {
-  background: none;
-  border: none;
-  box-sizing: content-box;
-  color: inherit;
-  cursor: inherit;
-  display: block;
-  flex: 1;
-  font: inherit;
-  height: 100%;
-  letter-spacing: var(--saltStepperInput-letterSpacing, 0);
-  margin: 0;
-  min-width: 0;
-  overflow: hidden;
-  padding: 0;
-  text-align: var(--stepperInput-textAlign);
-  width: 100%;
-}
-.saltStepperInput-input:focus {
-  outline: none;
-}
-.saltStepperInput-input::selection {
-  background: var(--salt-content-foreground-highlight);
-}
-.saltStepperInput-input::placeholder {
-  color: var(--salt-content-secondary-foreground);
-  font-weight: var(--salt-text-fontWeight-small);
-}
-.saltStepperInput-focused {
-  --stepperInput-borderColor: var(--stepperInput-outlineColor);
-  --stepperInput-borderWidth: var(--salt-editable-borderWidth-active);
-  outline: var(--saltStepperInput-outline, var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--stepperInput-outlineColor));
-}
-.saltStepperInput-readOnly {
-  --stepperInput-borderColor: var(--salt-editable-borderColor-readonly);
-  --stepperInput-borderStyle: var(--salt-editable-borderStyle-readonly);
-  --stepperInput-borderWidth: var(--salt-size-border);
-  background: var(--stepperInput-background-readonly);
-  cursor: var(--salt-editable-cursor-readonly);
-}
-.saltStepperInput-focused.saltStepperInput-disabled {
-  --stepperInput-borderWidth: var(--salt-size-border);
-  outline: none;
-}
-.saltStepperInput-focused.saltStepperInput-readOnly {
-  --stepperInput-borderWidth: var(--salt-size-border);
-}
-.saltStepperInput-disabled .saltStepperInput-input::selection {
-  background: none;
-}
-.saltStepperInput-disabled,
-.saltStepperInput-disabled:hover,
-.saltStepperInput-disabled:active {
-  --stepperInput-borderColor: var(--salt-editable-borderColor-disabled);
-  --stepperInput-borderStyle: var(--salt-editable-borderStyle-disabled);
-  --stepperInput-borderWidth: var(--salt-size-border);
-  background: var(--stepperInput-background-disabled);
-  cursor: var(--salt-editable-cursor-disabled);
-  color: var(--saltStepperInput-color-disabled, var(--salt-content-primary-foreground-disabled));
-}
-.saltStepperInput-activationIndicator {
-  left: 0;
-  bottom: 0;
-  width: 100%;
-  position: absolute;
-  border-bottom: var(--stepperInput-borderWidth) var(--stepperInput-borderStyle) var(--stepperInput-borderColor);
-}
-.saltStepperInput-bordered {
-  --stepperInput-border: var(--salt-size-border) var(--salt-container-borderStyle) var(--stepperInput-borderColor);
-  --stepperInput-borderWidth: 0;
-}
-.saltStepperInput-bordered.saltStepperInput-focused,
-.saltStepperInput-bordered:active {
-  --stepperInput-borderWidth: var(--salt-editable-borderWidth-active);
-}
-.saltStepperInput-bordered.saltStepperInput-readOnly,
-.saltStepperInput-bordered.saltStepperInput-disabled:hover {
-  --stepperInput-borderWidth: 0;
-}
-.saltStepperInput-startAdornmentContainer {
-  align-items: center;
-  display: inline-flex;
-  padding-right: var(--salt-spacing-100);
-  column-gap: var(--salt-spacing-100);
-}
-.saltStepperInput-endAdornmentContainer {
-  align-items: center;
-  display: inline-flex;
-  padding-left: var(--salt-spacing-100);
-  column-gap: var(--salt-spacing-100);
-}
-.saltStepperInput-readOnly .saltStepperInput-startAdornmentContainer {
-  margin-left: var(--salt-spacing-50);
-}
-.saltStepperInput-startAdornmentContainer .saltButton ~ .saltButton {
-  margin-left: calc(-1 * var(--salt-spacing-50));
-}
-.saltStepperInput-endAdornmentContainer .saltButton ~ .saltButton {
-  margin-left: calc(-1 * var(--salt-spacing-50));
-}
-.saltStepperInput-startAdornmentContainer .saltButton:first-child {
-  margin-left: calc(var(--salt-spacing-50) * -1);
-}
-.saltStepperInput-endAdornmentContainer .saltButton:last-child {
-  margin-right: calc(var(--salt-spacing-50) * -1);
-}
-.saltStepperInput-startAdornmentContainer > .saltButton,
-.saltStepperInput-endAdornmentContainer > .saltButton {
-  --saltButton-padding: calc(var(--salt-spacing-50) - var(--salt-size-border));
-  --saltButton-height: calc(var(--salt-size-base) - var(--salt-spacing-100));
-  --saltButton-borderRadius: var(--salt-palette-corner-weaker);
-}
-.saltStepperInput-inputTextAlignLeft {
-  text-align: left;
-}
-.saltStepperInput-inputTextAlignCenter {
-  text-align: center;
-}
-.saltStepperInput-inputTextAlignRight {
-  text-align: right;
-}
-.saltStepperInput-buttonContainer {
-  --stepperInput-buttonGap: var(--salt-size-border-strong);
-  display: flex;
-  flex-direction: column;
-  gap: var(--stepperInput-buttonGap);
-}
-.saltStepperInput-stepperButton {
-  --saltButton-height: calc((var(--salt-size-base) - var(--stepperInput-buttonGap)) * 0.5);
-  --saltButton-width: var(--salt-size-base);
-}
-.saltStepperInput-stepperButtonIncrement {
-  --saltButton-borderRadius: var(--salt-palette-corner-weak, 0) var(--salt-palette-corner-weak, 0) 0 0;
-}
-.saltStepperInput-stepperButtonDecrement {
-  --saltButton-borderRadius: 0 0 var(--salt-palette-corner-weak, 0) var(--salt-palette-corner-weak, 0);
-}
-
 /* src/system-status/SystemStatus.css */
 .saltSystemStatus {
   background: var(--saltSystemStatus-background, var(--systemStatus-background));
@@ -3811,6 +3623,8 @@
 .saltTabOverflow-list[data-hidden=true] {
   opacity: 0;
   pointer-events: none;
+  width: 1px;
+  height: 1px;
 }
 .saltTabOverflow-list .saltTabNext {
   color: var(--salt-content-primary-foreground);
@@ -4688,6 +4502,259 @@
   font-weight: 700;
 }
 
+/* src/slider/internal/SliderThumb.css */
+.saltSliderThumb {
+  align-items: center;
+  background: var(--salt-accent-borderColor);
+  cursor: var(--salt-selectable-cursor-hover);
+  display: flex;
+  height: var(--salt-size-selectable);
+  outline: none;
+  position: absolute;
+  top: calc(((var(--salt-size-selectable) - var(--salt-size-bar)) / 2) * -1);
+  transform: translateX(-50%);
+  width: var(--salt-size-border-strong);
+}
+.saltSliderThumb-disabled {
+  background: var(--salt-accent-borderColor-disabled);
+  pointer-events: none;
+}
+.saltSliderThumb-focusVisible {
+  outline-style: var(--salt-focused-outlineStyle);
+  outline-width: var(--salt-focused-outlineWidth);
+  outline-offset: var(--salt-focused-outlineOffset);
+  outline-color: var(--salt-focused-outlineColor);
+}
+.saltSliderThumb:active,
+.saltSliderThumb-dragging {
+  cursor: var(--draggable-grab-cursor-active);
+}
+.saltSliderThumb-input {
+  border: 0;
+  appearance: none;
+  cursor: var(--salt-selectable-cursor-hover);
+  height: var(--salt-size-base);
+  left: var(--slider-progressPercentage);
+  margin: 0;
+  opacity: 0.0001;
+  overflow: hidden;
+  -webkit-appearance: none;
+  pointer-events: none;
+  width: var(--salt-size-base);
+  padding: 0;
+  position: absolute;
+  transform: translateX(-50%);
+}
+.saltSliderThumb-secondThumb {
+  z-index: 2;
+}
+.saltSliderThumb-accessibleText {
+  position: absolute;
+  height: 1px;
+  width: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+
+/* src/slider/internal/SliderTooltip.css */
+.saltSliderTooltip {
+  background: var(--salt-container-primary-background);
+  border-color: var(--salt-container-primary-borderColor);
+  border-style: var(--saltTooltip-borderStyle, var(--salt-container-borderStyle));
+  border-width: var(--saltTooltip-borderWidth, var(--salt-size-border));
+  border-radius: var(--saltTooltip-borderRadius, var(--salt-palette-corner-weak, 0));
+  box-shadow: var(--saltTooltip-shadow, var(--salt-overlayable-shadow-popout));
+  bottom: 50%;
+  left: 50%;
+  padding: var(--salt-spacing-50) var(--salt-spacing-100);
+  position: absolute;
+  transform: translate(-50%, -50%);
+  text-align: var(--saltTooltip-textAlign, left);
+  user-select: none;
+  visibility: hidden;
+  z-index: var(--saltTooltip-zIndex, var(--salt-zIndex-flyover));
+}
+.saltSliderTooltip-visible,
+.saltSliderTooltip:hover {
+  visibility: visible;
+}
+.saltSliderTooltip-arrow {
+  fill: var(--salt-container-primary-background);
+  height: var(--salt-size-icon);
+  left: 50%;
+  position: absolute;
+  pointer-events: none;
+  top: 100%;
+  transform: translateX(-50%);
+  stroke: var(--salt-container-primary-borderColor);
+  stroke-width: var(--salt-size-border);
+  width: var(--salt-size-icon);
+}
+.saltSliderTooltip-text {
+  white-space: nowrap;
+}
+
+/* src/slider/internal/SliderTrack.css */
+.saltSliderTrack {
+  --slider-track-background: var(--salt-track-borderColor);
+  --slider-track-fill: var(--salt-accent-borderColor);
+  --slider-progressPercentage: 0%;
+  --slider-tick-height: calc((var(--salt-size-selectable) - var(--salt-size-bar)) / 2);
+  --slider-progressPercentageStart: 0%;
+  --slider-progressPercentageEnd: 0%;
+  display: flex;
+  width: 100%;
+}
+.saltSliderTrack.saltSliderTrack-withMarks {
+  margin-bottom: calc(var(--salt-size-base) / 2);
+}
+.saltSliderTrack-disabled {
+  cursor: var(--salt-selectable-cursor-disabled);
+}
+.saltSliderTrack-container {
+  align-items: center;
+  display: flex;
+  flex-direction: row;
+  gap: var(--salt-spacing-100);
+  width: 100%;
+}
+.saltSliderTrack-wrapper {
+  align-items: center;
+  cursor: var(--salt-selectable-cursor-hover);
+  display: flex;
+  flex: 1;
+  height: var(--salt-size-selectable);
+  position: relative;
+  width: 100%;
+}
+.saltSliderTrack-disabled,
+.saltSliderTrack-disabled .saltSliderTrack-wrapper {
+  cursor: var(--salt-selectable-cursor-disabled);
+}
+.saltSliderTrack-disabled .saltSliderTrack-wrapper {
+  pointer-events: none;
+}
+.saltSliderTrack-rail {
+  display: flex;
+  flex: 100%;
+  height: var(--salt-size-bar);
+  justify-content: space-between;
+  position: relative;
+}
+.saltSliderTrack-rail::before,
+.saltSliderTrack-rail::after {
+  content: "";
+  display: block;
+  height: 100%;
+}
+.saltSliderTrack-rail::before {
+  background: var(--slider-track-fill);
+  border-top-left-radius: var(--salt-palette-corner-weaker);
+  border-bottom-left-radius: var(--salt-palette-corner-weaker);
+  width: calc(var(--slider-progressPercentage) - 1.5 * var(--salt-size-border-strong));
+}
+.saltSliderTrack-hasMinTick.saltSliderTrack-rail::before {
+  border-bottom-left-radius: unset;
+}
+.saltSliderTrack-rail::after {
+  background: var(--slider-track-background);
+  border-top-right-radius: var(--salt-palette-corner-weaker);
+  border-bottom-right-radius: var(--salt-palette-corner-weaker);
+  width: calc(100% - var(--slider-progressPercentage) - 1.5 * var(--salt-size-border-strong));
+}
+.saltSliderTrack-hasMaxTick.saltSliderTrack-rail::after {
+  border-bottom-right-radius: unset;
+}
+.saltSliderTrack-range .saltSliderTrack-rail::before {
+  background: var(--slider-track-background);
+  width: calc(var(--slider-progressPercentageStart) - (var(--salt-size-border-strong) * 1.5));
+}
+.saltSliderTrack-range .saltSliderTrack-rail::after {
+  background: var(--slider-track-background);
+  width: calc(100% - var(--slider-progressPercentageEnd) - (var(--salt-size-border-strong) * 1.5));
+}
+.saltSliderTrack-range .saltSliderTrack-rail .saltSliderTrack-fill {
+  background: var(--slider-track-fill);
+  height: 100%;
+  left: calc(var(--slider-progressPercentageStart) + 1.5 * var(--salt-size-border-strong));
+  position: absolute;
+  width: calc(var(--slider-progressPercentageEnd) - var(--slider-progressPercentageStart) - var(--salt-size-border-strong) * 3);
+}
+.saltSliderTrack-minLabel,
+.saltSliderTrack-maxLabel {
+  user-select: none;
+}
+.saltSliderTrack-dragging,
+.saltSliderTrack-dragging .saltSliderTrack-wrapper {
+  cursor: var(--salt-draggable-grab-cursor-active);
+}
+.saltSliderTrack-disabled {
+  --slider-track-fill: var(--salt-accent-borderColor-disabled);
+  --slider-track-background: var(--salt-track-borderColor-disabled);
+}
+.saltSliderTrack-ticks {
+  top: calc(var(--salt-size-bar) + var(--slider-tick-height));
+  position: absolute;
+  width: 100%;
+}
+.saltSliderTrack-tick {
+  background: var(--slider-track-background);
+  height: var(--slider-tick-height);
+  position: absolute;
+  transform: translate(-50%);
+  width: var(--salt-size-border-strong);
+}
+.saltSliderTrack-withTicks .saltSliderTrack-tickHidden {
+  visibility: hidden;
+}
+.saltSliderTrack-tickSelected {
+  background: var(--slider-track-fill);
+}
+.saltSliderTrack-tick:first-of-type {
+  transform: unset;
+}
+.saltSliderTrack-tick:last-of-type {
+  transform: translateX(-100%);
+}
+.saltSliderTrack-marks {
+  position: absolute;
+  user-select: none;
+  width: 100%;
+}
+.saltSliderTrack-markLabel {
+  color: var(--salt-content-secondary-foreground);
+  font-family: var(--salt-text-label-fontFamily);
+  font-weight: var(--salt-text-label-fontWeight);
+  font-size: var(--salt-text-label-fontSize);
+  line-height: var(--salt-text-label-lineHeight);
+  overflow: hidden;
+  position: absolute;
+  text-overflow: ellipsis;
+  transform: translateX(-50%);
+  top: calc(var(--slider-tick-height) + var(--salt-spacing-50));
+  white-space: nowrap;
+}
+.saltSliderTrack-constrainLabelPosition .saltSliderTrack-markLabel:first-of-type {
+  transform: translateX(0%);
+}
+.saltSliderTrack-constrainLabelPosition .saltSliderTrack-markLabel:last-of-type {
+  transform: translateX(-100%);
+}
+.saltFormField .saltSliderTrack.saltSliderTrack-withMark {
+  margin-bottom: 0;
+}
+.saltFormField .saltSliderTrack-container {
+  --saltFormField-label-width: 10%;
+  height: var(--salt-size-base);
+}
+.saltFormField .saltSliderTrack-markLabel {
+  top: calc((var(--salt-size-base) - var(--salt-size-bar)) / 2);
+}
+
 /* src/tabs/drag-drop/Draggable.css */
 .saltDraggable {
   background: transparent;
@@ -4783,4 +4850,4 @@
   margin: calc(var(--salt-size-unit) / 2) 0;
 }
 
-/* src/6d166456-ef75-4510-b406-ec4b157cc54a.css */
+/* src/0d86cd54-f468-4741-b120-7ef6ac6f9def.css */