@salt-ds/lab 1.0.0-alpha.61 → 1.0.0-alpha.63

package/css/salt-lab.css

@@ -2395,6 +2395,232 @@
   align-items: flex-end;
 }
 
+/* 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%;
+  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);
+}
+.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(--numberInput-buttonGap);
+}
+.saltNumberInput-numberButton {
+  --saltButton-height: calc((var(--salt-size-base) - var(--numberInput-buttonGap)) * 0.5);
+  --saltButton-width: var(--salt-size-base);
+}
+.saltNumberInput-numberButtonIncrement {
+  --saltButton-borderRadius: var(--salt-palette-corner-weak, 0) var(--salt-palette-corner-weak, 0) 0 0;
+}
+.saltNumberInput-numberButtonDecrement {
+  --saltButton-borderRadius: 0 0 var(--salt-palette-corner-weak, 0) var(--salt-palette-corner-weak, 0);
+}
+
 /* src/overlay/OverlayHeader.css */
 .saltOverlayHeader {
   padding: var(--salt-spacing-100);
@@ -2520,124 +2746,187 @@
   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;
+/* src/splitter/SplitHandle.css */
+.saltSplitHandle {
+  --splitHandle-size: var(--salt-size-thickness-400, calc(var(--salt-size-border) * 4));
+  --splitHandle-borderWidth: var(--salt-size-thickness-100, var(--salt-size-border));
+  --splitHandle-borderColor: var(--salt-separable-secondary-borderColor);
+  --splitHandle-borderStyle: var(--salt-separable-borderStyle);
+  --splitHandle-dot-background: var(--salt-separable-foreground);
+  --splitHandle-dot-background-hover: var(--salt-separable-foreground-hover);
+  --splitHandle-dot-background-active: var(--salt-separable-foreground-active);
+  position: relative;
+  display: inline-flex;
+  justify-content: center;
   align-items: center;
+  gap: 2px;
+  box-sizing: content-box;
+  background: var(--splitHandle-background);
 }
-.saltSlider-bottomLabel {
-  grid-template-columns: 1fr;
-  gap: 0;
+.saltSplitHandle-bordered,
+.saltSplitHandle-variant-primary {
+  --splitHandle-background: var(--salt-container-primary-background);
+  --splitHandle-background-hover: var(--salt-separable-background-hover);
+  --splitHandle-background-active: var(--salt-separable-background-active);
 }
-.saltSlider-bottomLabel .saltSlider-label {
-  height: auto;
+.saltSplitHandle-variant-secondary {
+  --splitHandle-background: var(--salt-container-secondary-background);
+  --splitHandle-background-hover: var(--salt-separable-background-hover);
+  --splitHandle-background-active: var(--salt-separable-background-active);
 }
-.saltSlider-labelMinBottom {
-  grid-row: 2;
-  grid-column: 1;
-  justify-self: start;
-  width: min-content;
+.saltSplitHandle-variant-tertiary {
+  --splitHandle-background: var(--salt-container-tertiary-background);
+  --splitHandle-background-hover: var(--salt-separable-background-hover);
+  --splitHandle-background-active: var(--salt-separable-background-active);
 }
-.saltSlider-labelMaxBottom {
-  grid-row: 2;
-  grid-column: 1;
-  justify-self: end;
-  width: min-content;
+.saltSplitHandle-variant-transparent {
+  --splitHandle-background: var(--salt-separable-background);
+  --splitHandle-background-hover: var(--salt-separable-background-hover);
+  --splitHandle-background-active: var(--salt-separable-background-active);
 }
-.saltSliderTrack {
-  display: flex;
-  position: relative;
-  cursor: pointer;
-  align-items: center;
-  height: var(--salt-size-base);
+.saltSplitHandle[data-resize-handle-state=hover] {
+  background: var(--splitHandle-background-hover);
 }
-.saltSliderTrack-rail {
-  height: var(--salt-size-bar);
-  background: var(--salt-track-borderColor);
-  width: 100%;
-  position: absolute;
+.saltSplitHandle[data-resize-handle-state=drag] {
+  --splitHandle-background: var(--splitHandle-background-active);
 }
-.saltSliderTrack:active {
-  cursor: grabbing;
+.saltSplitHandle[data-panel-group-direction=horizontal] {
+  flex-direction: column;
+  width: var(--splitHandle-size);
 }
-.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);
+.saltSplitHandle[data-panel-group-direction=vertical] {
+  flex-direction: row;
+  height: var(--splitHandle-size);
 }
-.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));
+.saltSplitHandle[data-panel-group-direction=horizontal]::after {
+  content: "";
   position: absolute;
-  z-index: var(--salt-zIndex-flyover);
-  transform: translate(0, -100%);
-  display: none;
+  left: -10px;
+  right: -10px;
+  top: 0;
+  bottom: 0;
 }
-.saltSliderThumb-tooltip-arrow {
+.saltSplitHandle[data-panel-group-direction=vertical]::after {
+  content: "";
   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);
+  left: 0;
+  right: 0;
+  top: -10px;
+  bottom: -10px;
 }
-.saltSliderThumb:focus-visible {
+.saltSplitHandle: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);
+  outline-offset: var(--salt-focused-outlineOffset);
 }
-.saltSliderSelection {
-  height: var(--salt-size-bar);
-  background: var(--salt-accent-borderColor);
-  align-items: start;
-  position: absolute;
+.saltSplitHandle-border-top {
+  border-top-width: var(--splitHandle-borderWidth);
+  border-top-color: var(--splitHandle-borderColor);
+  border-top-style: var(--splitHandle-borderStyle);
+  border-bottom-width: var(--splitHandle-borderWidth);
+  border-bottom-color: transparent;
+  border-bottom-style: var(--splitHandle-borderStyle);
+}
+.saltSplitHandle-border-bottom {
+  border-top-width: var(--splitHandle-borderWidth);
+  border-top-color: transparent;
+  border-top-style: var(--splitHandle-borderStyle);
+  border-bottom-width: var(--splitHandle-borderWidth);
+  border-bottom-color: var(--splitHandle-borderColor);
+  border-bottom-style: var(--splitHandle-borderStyle);
+}
+.saltSplitHandle-border-top-bottom {
+  border-top-width: var(--splitHandle-borderWidth);
+  border-top-color: var(--splitHandle-borderColor);
+  border-top-style: var(--splitHandle-borderStyle);
+  border-bottom-width: var(--splitHandle-borderWidth);
+  border-bottom-color: var(--splitHandle-borderColor);
+  border-bottom-style: var(--splitHandle-borderStyle);
+}
+.saltSplitHandle-border-left {
+  border-left-width: var(--splitHandle-borderWidth);
+  border-left-color: var(--splitHandle-borderColor);
+  border-left-style: var(--splitHandle-borderStyle);
+  border-right-width: var(--splitHandle-borderWidth);
+  border-right-color: transparent;
+  border-right-style: var(--splitHandle-borderStyle);
+}
+.saltSplitHandle-border-right {
+  border-left-width: var(--splitHandle-borderWidth);
+  border-left-color: transparent;
+  border-left-style: var(--splitHandle-borderStyle);
+  border-right-width: var(--splitHandle-borderWidth);
+  border-right-color: var(--splitHandle-borderColor);
+  border-right-style: var(--splitHandle-borderStyle);
+}
+.saltSplitHandle-border-left-right {
+  border-left-width: var(--splitHandle-borderWidth);
+  border-left-color: var(--splitHandle-borderColor);
+  border-left-style: var(--splitHandle-borderStyle);
+  border-right-width: var(--splitHandle-borderWidth);
+  border-right-color: var(--splitHandle-borderColor);
+  border-right-style: var(--splitHandle-borderStyle);
+}
+.saltSplitHandle[data-panel-group-direction=horizontal] + div[data-panel-size="0.0"] + .saltSplitHandle[data-panel-group-direction=horizontal] {
+  margin-left: -1px;
+}
+.saltSplitHandle[data-panel-group-direction=vertical] + div[data-panel-size="0.0"] + .saltSplitHandle[data-panel-group-direction=vertical] {
+  margin-top: -1px;
+}
+@supports selector(:has(*)) {
+  .saltSplitPanel:first-of-type[data-panel-size="0.0"] + .saltSplitHandle-bordered[data-panel-group-direction=horizontal] {
+    margin-left: -1px;
+  }
+  .saltSplitPanel:first-of-type[data-panel-size="0.0"] + .saltSplitHandle-bordered[data-panel-group-direction=vertical] {
+    margin-top: -1px;
+  }
+  .saltSplitHandle-bordered[data-panel-group-direction=horizontal]:has(+ .saltSplitPanel:last-of-type[data-panel-size="0.0"]) {
+    margin-right: -1px;
+  }
+  .saltSplitHandle-bordered[data-panel-group-direction=vertical]:has(+ .saltSplitPanel:last-of-type[data-panel-size="0.0"]) {
+    margin-bottom: -1px;
+  }
 }
-.saltSliderSelection-range {
-  align-items: center;
+.saltSplitHandle-dot {
+  background: var(--splitHandle-dot-background);
 }
-.saltSliderMarks {
-  position: relative;
+.saltSplitHandle[data-resize-handle-state=hover] > .saltSplitHandle-dot {
+  background: var(--splitHandle-dot-background-hover);
 }
-.saltSliderMarks-mark {
-  position: absolute;
-  transform: translate(-50%);
-  line-height: var(--salt-text-lineHeight);
+.saltSplitHandle[data-resize-handle-state=drag] > .saltSplitHandle-dot {
+  background: var(--splitHandle-dot-background-active);
+}
+.saltSplitHandle[data-panel-group-direction=horizontal] > .saltSplitHandle-dot {
+  width: 2px;
+  height: 1px;
+}
+.saltSplitHandle[data-panel-group-direction=vertical] > .saltSplitHandle-dot {
+  height: 2px;
+  width: 1px;
+}
+
+/* src/splitter/SplitPanel.css */
+.saltSplitPanel {
+  box-sizing: border-box;
+  background: var(--splitPanel-background);
+}
+.saltSplitPanel[data-panel-size="0.0"] {
+  visibility: hidden;
+}
+.saltSplitPanel-primary {
+  --splitPanel-background: var(--salt-container-primary-background);
+}
+.saltSplitPanel-secondary {
+  --splitPanel-background: var(--salt-container-secondary-background);
+}
+.saltSplitPanel-tertiary {
+  --splitPanel-background: var(--salt-container-tertiary-background);
+}
+@supports selector(:has(*)) {
+  .saltSplitPanel:has(.saltSplitPanel) {
+    background: unset;
+  }
 }
 
 /* src/static-list/StaticList.css */
@@ -2869,232 +3158,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));
@@ -3485,6 +3548,7 @@
   min-height: calc(var(--salt-size-base) + var(--salt-spacing-100));
   gap: var(--salt-spacing-100);
   max-width: 100%;
+  width: 100%;
 }
 .saltTabListNext-center {
   justify-content: center;
@@ -3627,6 +3691,8 @@
 .saltTabOverflow-list[data-hidden=true] {
   opacity: 0;
   pointer-events: none;
+  width: 1px;
+  height: 1px;
 }
 .saltTabOverflow-list .saltTabNext {
   color: var(--salt-content-primary-foreground);
@@ -4504,6 +4570,239 @@
   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-focused {
+  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-status-info-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-status-info-borderColor);
+  stroke-width: var(--salt-size-border);
+  width: var(--salt-size-icon);
+}
+
+/* src/slider/internal/SliderTrack.css */
+.saltSliderTrack {
+  --slider-track-background: var(--salt-track-borderColor);
+  --slider-track-fill: var(--salt-accent-borderColor);
+  --slider-progressPercentage: 0%;
+  --slider-progressPercentageStart: 0%;
+  --slider-progressPercentageEnd: 0%;
+  --slider-mark-percentage: 0%;
+  display: flex;
+  width: 100%;
+}
+.saltSliderTrack-disabled {
+  cursor: var(--salt-selectable-cursor-disabled);
+}
+.saltSliderTrack-container {
+  align-items: center;
+  display: flex;
+  flex-direction: row;
+  gap: var(--salt-spacing-50);
+  width: 100%;
+}
+.saltSliderTrack-wrapper {
+  align-items: center;
+  display: flex;
+  flex: 1;
+  height: var(--salt-size-base);
+  position: relative;
+  width: 100%;
+}
+.saltSliderTrack-rail {
+  cursor: var(--salt-selectable-cursor-hover);
+  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) - (var(--salt-size-border-strong) / 2));
+}
+.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) - (var(--salt-size-border-strong) * 2));
+}
+.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) * 2));
+}
+.saltSliderTrack-range .saltSliderTrack-rail::after {
+  background: var(--slider-track-background);
+  width: calc(100% - var(--slider-progressPercentageEnd) - (var(--salt-size-border-strong) * 2));
+}
+.saltSliderTrack-range .saltSliderTrack-rail .saltSliderTrack-fill {
+  background: var(--slider-track-fill);
+  height: 100%;
+  left: calc(var(--slider-progressPercentageStart) + (var(--salt-size-border-strong) / 2));
+  position: absolute;
+  width: calc(var(--slider-progressPercentageEnd) - var(--slider-progressPercentageStart) - var(--salt-size-border-strong));
+}
+.saltSliderTrack-minLabel,
+.saltSliderTrack-maxLabel {
+  user-select: none;
+}
+.saltSliderTrack-dragging,
+.saltSliderTrack-dragging .saltSliderTrack-rail {
+  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-disabled .saltSliderTrack-rail {
+  pointer-events: none;
+}
+.saltSliderTrack-marks {
+  position: absolute;
+  user-select: none;
+  width: 100%;
+  top: calc((var(--salt-size-base) / 2) + (var(--salt-size-bar) / 2));
+}
+.saltSliderTrack-mark {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  position: absolute;
+  justify-content: center;
+  left: var(--slider-mark-percentage);
+  transform: translateX(-50%);
+  gap: 4px;
+}
+.saltSliderTrack-markLabel {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.saltSliderTrack-markTick {
+  height: 5px;
+  width: var(--salt-size-border-strong);
+  background: var(--slider-track-background);
+  visibility: hidden;
+}
+.saltSliderTrack-withMarkTicks .saltSliderTrack-markTick {
+  visibility: visible;
+}
+.saltSliderTrack-withMarkTicks .saltSliderTrack-markTickHidden {
+  visibility: hidden;
+}
+.saltSliderTrack-mark:last-of-type .saltSliderTrack-markTick {
+  transform: translateX(-50%);
+}
+.saltSliderTrack-mark:first-of-type .saltSliderTrack-markTick {
+  transform: translateX(50%);
+}
+.saltSliderTrack-markSelected {
+  background: var(--slider-track-fill);
+}
+.saltSliderTrack-constrainLabelPosition .saltSliderTrack-mark:first-of-type .saltSliderTrack-markLabel {
+  transform: translateX(50%);
+}
+.saltSliderTrack-constrainLabelPosition .saltSliderTrack-mark:last-of-type .saltSliderTrack-markLabel {
+  transform: translateX(-50%);
+}
+
 /* src/tabs/drag-drop/Draggable.css */
 .saltDraggable {
   background: transparent;
@@ -4599,4 +4898,4 @@
   margin: calc(var(--salt-size-unit) / 2) 0;
 }
 
-/* src/f215e743-86b0-4593-a239-e79356c02946.css */
+/* src/85019b5c-7748-4277-a57a-dc6ed113dba3.css */