@salt-ds/lab 1.0.0-alpha.51 → 1.0.0-alpha.53

package/css/salt-lab.css

@@ -195,11 +195,62 @@
 
 /* src/calendar/Calendar.css */
 .saltCalendar {
-  width: min-content;
   background: var(--salt-container-primary-background);
   padding: var(--salt-spacing-100);
 }
 
+/* src/calendar/CalendarDateGrid.css */
+.saltCalendarDateGrid-grid {
+  display: grid;
+  grid-auto-flow: column;
+}
+.saltCalendarDateGrid-grid > * {
+  position: absolute;
+  left: 0;
+  width: 100%;
+}
+.saltCalendarDateGrid-grid > :nth-child(2) {
+  position: relative;
+}
+
+/* src/calendar/CalendarNavigation.css */
+.saltCalendarNavigation {
+  display: grid;
+  grid-template-columns: min-content auto min-content;
+  padding-bottom: var(--salt-spacing-100);
+  grid-gap: var(--salt-spacing-25);
+  align-items: center;
+  box-sizing: border-box;
+}
+.saltCalendarNavigation-hideYearDropdown {
+  grid-template-columns: min-content auto min-content;
+  grid-gap: var(--salt-spacing-300);
+}
+.saltCalendarNavigation-dropdowns {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-gap: var(--salt-spacing-100);
+}
+
+/* src/calendar/CalendarWeekHeader.css */
+.saltCalendarWeekHeader {
+  display: grid;
+  gap: var(--salt-size-border);
+  grid-template-columns: repeat(7, var(--salt-size-base));
+  text-align: center;
+  align-items: center;
+  height: var(--salt-size-base);
+  margin: var(--salt-size-border);
+}
+.saltCalendarWeekHeader-dayOfWeek {
+  width: var(--salt-size-base);
+  color: var(--salt-content-secondary-foreground);
+  font-family: var(--salt-text-fontFamily);
+  font-weight: var(--salt-text-fontWeight);
+  font-size: var(--salt-text-fontSize);
+  line-height: var(--salt-text-lineHeight);
+}
+
 /* src/carousel/Carousel.css */
 .saltGridLayout.saltCarousel {
   grid-template-columns: min-content auto min-content;
@@ -559,10 +610,6 @@
 .saltComboBox {
   width: 100%;
 }
-.saltComboBox-field {
-}
-.saltComboBox-disabled {
-}
 .saltComboBox-listWindowRoot {
   z-index: calc(var(--salt-zIndex-flyover) - 1);
 }
@@ -807,30 +854,23 @@
 .saltContentStatus-title.saltText {
   font-weight: var(--salt-text-display1-fontWeight);
 }
-.saltContentStatus-message {
-}
 .saltContentStatus-actions {
   margin-top: var(--saltContentStatus-actions-marginTop, var(--salt-size-unit));
 }
 
 /* src/date-input/DateInput.css */
 .saltDateInput {
-  --input-border: none;
-  --input-borderColor: var(--salt-editable-borderColor);
-  --input-borderStyle: var(--salt-editable-borderStyle);
-  --input-outlineColor: var(--salt-focused-outlineColor);
-  --input-borderWidth: var(--salt-size-border);
   align-items: center;
   background: var(--saltDateInput-background, var(--input-background));
-  border: var(--input-border);
   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));
-  height: var(--saltDateInput-height, var(--salt-size-base));
   line-height: var(--saltDateInput-lineHeight, var(--salt-text-lineHeight));
+  letter-spacing: var(--salt-text-letterSpacing);
+  height: var(--saltDateInput-height, var(--salt-size-base));
   min-height: var(--saltDateInput-minHeight, var(--salt-size-base));
   min-width: var(--saltDateInput-minWidth, 4em);
   padding-left: var(--saltDateInput-paddingLeft, var(--salt-spacing-100));
@@ -841,17 +881,63 @@
   overflow: hidden;
 }
 .saltDateInput:hover {
-  --input-borderStyle: var(--salt-editable-borderStyle-hover);
-  --input-borderColor: var(--salt-editable-borderColor-hover);
   background: var(--saltDateInput-background-hover, var(--input-background-hover));
   cursor: var(--salt-editable-cursor-hover);
 }
-.saltDateInput:active {
-  --input-borderColor: var(--salt-editable-borderColor-active);
-  --input-borderStyle: var(--salt-editable-borderStyle-active);
-  --input-borderWidth: var(--salt-editable-borderWidth-active);
-  background: var(--saltDateInput-background-active, var(--input-background-active));
-  cursor: var(--salt-editable-cursor-active);
+.saltDateInput-bordered.saltDateInput {
+  border: var(--salt-size-border) var(--salt-editable-borderStyle) var(--input-borderColor);
+}
+.saltDateInput-bordered.saltDateInput:hover {
+  border-style: var(--salt-editable-borderStyle-hover);
+  border-color: var(--input-borderColor-hover);
+}
+.saltDateInput-bordered.saltDateInput-focused,
+.saltDateInput-bordered.saltDateInput-focused:hover {
+  border-style: var(--salt-editable-borderStyle-active);
+  border-color: var(--input-borderColor-active);
+}
+.saltDateInput-bordered.saltDateInput-readOnly,
+.saltDateInput-bordered.saltDateInput-readOnly:hover {
+  border-style: var(--salt-editable-borderStyle-readonly);
+  border-color: var(--salt-editable-borderColor-readonly);
+}
+.saltDateInput-bordered.saltDateInput-disabled,
+.saltDateInput-bordered.saltDateInput-disabled:hover {
+  border-style: var(--salt-editable-borderStyle-disabled);
+  border-color: var(--salt-editable-borderColor-disabled);
+}
+.saltDateInput-activationIndicator {
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  position: absolute;
+  border-bottom: var(--salt-size-border) var(--salt-editable-borderStyle) var(--input-borderColor);
+}
+.saltDateInput:hover .saltDateInput-activationIndicator {
+  border-bottom-style: var(--salt-editable-borderStyle-hover);
+  border-bottom-color: var(--input-borderColor-hover);
+}
+.saltDateInput-focused .saltDateInput-activationIndicator,
+.saltDateInput-focused:hover .saltDateInput-activationIndicator {
+  border-bottom: var(--salt-size-border-strong) var(--salt-editable-borderStyle-active) var(--input-borderColor-active);
+}
+.saltDateInput-readOnly .saltDateInput-activationIndicator,
+.saltDateInput-readOnly:hover .saltDateInput-activationIndicator {
+  border-bottom-style: var(--salt-editable-borderStyle-readonly);
+  border-bottom-color: var(--salt-editable-borderColor-readonly);
+}
+.saltDateInput-disabled .saltDateInput-activationIndicator,
+.saltDateInput-disabled:hover .saltDateInput-activationIndicator {
+  border-bottom-style: var(--salt-editable-borderStyle-disabled);
+  border-bottom-color: var(--salt-editable-borderColor-disabled);
+}
+.saltDateInput-bordered .saltDateInput-activationIndicator,
+.saltDateInput-bordered.saltDateInput-readOnly .saltDateInput-activationIndicator,
+.saltDateInput-bordered.saltDateInput-disabled:hover .saltDateInput-activationIndicator {
+  border-bottom-width: 0;
+}
+.saltDateInput-bordered.saltDateInput-focused .saltDateInput-activationIndicator {
+  border-bottom-width: calc(var(--salt-size-border-strong) - var(--salt-size-border));
 }
 .saltDateInput-primary {
   --input-background: var(--salt-editable-primary-background);
@@ -859,6 +945,10 @@
   --input-background-hover: var(--salt-editable-primary-background-hover);
   --input-background-disabled: var(--salt-editable-primary-background-disabled);
   --input-background-readonly: var(--salt-editable-primary-background-readonly);
+  --input-borderColor: var(--salt-editable-borderColor);
+  --input-borderColor-active: var(--salt-editable-borderColor-active);
+  --input-borderColor-hover: var(--salt-editable-borderColor-hover);
+  --input-outlineColor: var(--salt-focused-outlineColor);
 }
 .saltDateInput-secondary {
   --input-background: var(--salt-editable-secondary-background);
@@ -866,31 +956,74 @@
   --input-background-hover: var(--salt-editable-secondary-background-active);
   --input-background-disabled: var(--salt-editable-secondary-background-disabled);
   --input-background-readonly: var(--salt-editable-secondary-background-readonly);
+  --input-borderColor: var(--salt-editable-borderColor);
+  --input-borderColor-active: var(--salt-editable-borderColor-active);
+  --input-borderColor-hover: var(--salt-editable-borderColor-hover);
+  --input-outlineColor: var(--salt-focused-outlineColor);
 }
-.saltDateInput-error,
-.saltDateInput-error:hover {
+.saltDateInput-error {
   --input-background: var(--salt-status-error-background);
   --input-background-active: var(--salt-status-error-background);
   --input-background-hover: var(--salt-status-error-background);
+  --input-background-readonly: var(--salt-status-error-background);
   --input-borderColor: var(--salt-status-error-borderColor);
+  --input-borderColor-active: var(--salt-status-error-borderColor);
+  --input-borderColor-hover: var(--salt-status-error-borderColor);
   --input-outlineColor: var(--salt-status-error-borderColor);
 }
-.saltDateInput-warning,
-.saltDateInput-warning:hover {
+.saltDateInput-warning {
   --input-background: var(--salt-status-warning-background);
   --input-background-active: var(--salt-status-warning-background);
   --input-background-hover: var(--salt-status-warning-background);
+  --input-background-readonly: var(--salt-status-warning-background);
   --input-borderColor: var(--salt-status-warning-borderColor);
+  --input-borderColor-active: var(--salt-status-warning-borderColor);
+  --input-borderColor-hover: var(--salt-status-warning-borderColor);
   --input-outlineColor: var(--salt-status-warning-borderColor);
 }
-.saltDateInput-success,
-.saltDateInput-success:hover {
+.saltDateInput-success {
   --input-background: var(--salt-status-success-background);
   --input-background-active: var(--salt-status-success-background);
   --input-background-hover: var(--salt-status-success-background);
+  --input-background-readonly: var(--salt-status-success-background);
   --input-borderColor: var(--salt-status-success-borderColor);
+  --input-borderColor-active: var(--salt-status-success-borderColor);
+  --input-borderColor-hover: var(--salt-status-success-borderColor);
   --input-outlineColor: var(--salt-status-success-borderColor);
 }
+.saltDateInput-focused,
+.saltDateInput-focused:hover {
+  background: var(--saltDateInput-background-active, var(--input-background-active));
+  cursor: var(--salt-editable-cursor-active);
+  outline: var(--saltDateInput-outline, var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--input-outlineColor));
+}
+.saltDateInput.saltDateInput-readOnly {
+  background: var(--input-background-readonly);
+  cursor: var(--salt-editable-cursor-readonly);
+}
+.saltDateInput-disabled,
+.saltDateInput-disabled:hover {
+  background: var(--input-background-disabled);
+  cursor: var(--salt-editable-cursor-disabled);
+  color: var(--saltDateInput-color-disabled, var(--salt-content-primary-foreground-disabled));
+}
+.saltDateInput-endAdornmentContainer {
+  display: inline-flex;
+  padding-left: var(--salt-spacing-100);
+  column-gap: var(--salt-spacing-100);
+  margin-left: auto;
+  align-items: end;
+}
+.saltDateInput-endAdornmentContainer .saltButton ~ .saltButton {
+  margin-left: calc(-1 * var(--salt-spacing-50));
+}
+.saltDateInput-endAdornmentContainer .saltButton:last-child {
+  margin-right: calc(var(--salt-spacing-50) * -1);
+}
+.saltDateInput-endAdornmentContainer > .saltButton {
+  --saltButton-padding: var(--salt-spacing-50);
+  --saltButton-height: calc(var(--salt-size-base) - var(--salt-spacing-100));
+}
 .saltDateInput-input {
   background: none;
   border: none;
@@ -914,81 +1047,50 @@
 .saltDateInput-input::selection {
   background: var(--salt-content-foreground-highlight);
 }
-.saltDateInput-input::placeholder {
-  color: var(--salt-content-secondary-foreground);
-  font-weight: var(--salt-text-fontWeight-small);
-}
-.saltDateInput-focused {
-  --input-borderColor: var(--input-outlineColor);
-  --input-borderWidth: var(--salt-editable-borderWidth-active);
-  outline: var(--saltDateInput-outline, var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--input-outlineColor));
-}
-.saltDateInput.saltDateInput-readOnly {
-  --input-borderColor: var(--salt-editable-borderColor-readonly);
-  --input-borderStyle: var(--salt-editable-borderStyle-readonly);
-  --input-borderWidth: var(--salt-size-border);
-  background: var(--input-background-readonly);
-  cursor: var(--salt-editable-cursor-readonly);
-}
-.saltDateInput-focused.saltDateInput-disabled {
-  --input-borderWidth: var(--salt-size-border);
-  outline: none;
-}
-.saltDateInput-focused.saltDateInput-readOnly {
-  --input-borderWidth: var(--salt-size-border);
-}
 .saltDateInput-disabled .saltDateInput-input::selection {
   background: none;
 }
-.saltDateInput.saltDateInput-disabled,
-.saltDateInput.saltDateInput-disabled:hover,
-.saltDateInput.saltDateInput-disabled:active {
-  --input-borderColor: var(--salt-editable-borderColor-disabled);
-  --input-borderStyle: var(--salt-editable-borderStyle-disabled);
-  --input-borderWidth: var(--salt-size-border);
-  background: var(--input-background-disabled);
-  cursor: var(--salt-editable-cursor-disabled);
-  color: var(--saltDateInput-color-disabled, var(--salt-content-primary-foreground-disabled));
+.saltDateInput-input::placeholder {
+  color: var(--salt-content-secondary-foreground);
+  font-weight: var(--salt-text-fontWeight-small);
 }
-.saltDateInput-activationIndicator {
-  left: 0;
-  bottom: 0;
+
+/* src/date-picker/DatePickerActions.css */
+.saltDatePickerActions {
+  box-sizing: border-box;
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
   width: 100%;
-  position: absolute;
-  border-bottom: var(--input-borderWidth) var(--input-borderStyle) var(--input-borderColor);
-}
-.saltDateInput.saltDateInput-bordered {
-  --input-border: var(--salt-size-border) var(--salt-container-borderStyle) var(--input-borderColor);
-  --input-borderWidth: 0;
-}
-.saltDateInput-bordered.saltDateInput-focused,
-.saltDateInput-bordered:active {
-  --input-borderWidth: var(--salt-editable-borderWidth-active);
-}
-.saltDateInput-bordered.saltDateInput-readOnly,
-.saltDateInput-bordered.saltDateInput-disabled:hover {
-  --input-borderWidth: 0;
-}
-.saltDateInput-endAdornmentContainer {
-  display: inline-flex;
+  padding-top: var(--salt-spacing-100);
+  padding-bottom: var(--salt-spacing-100);
   padding-left: var(--salt-spacing-100);
-  column-gap: var(--salt-spacing-100);
-  margin-left: auto;
-  align-items: end;
+  padding-right: var(--salt-spacing-100);
 }
-.saltDateInput-endAdornmentContainer .saltButton ~ .saltButton {
-  margin-left: calc(-1 * var(--salt-spacing-50));
+.saltDatePickerActions-body {
+  flex-grow: 1;
 }
-.saltDateInput-endAdornmentContainer .saltButton:last-child {
-  margin-right: calc(var(--salt-spacing-50) * -1);
+.saltDatePickerActions-action {
 }
-.saltDateInput-endAdornmentContainer > .saltButton {
-  --saltButton-padding: var(--salt-spacing-50);
-  --saltButton-height: calc(var(--salt-size-base) - var(--salt-spacing-100));
+.saltDatePickerActions-action + .saltDatePickerActions-action {
+  margin-left: var(--salt-spacing-100);
+}
+
+/* src/date-picker/DatePickerOverlay.css */
+.saltDatePickerOverlay {
+  background: var(--salt-container-primary-background);
+  border: var(--salt-size-border) var(--salt-selectable-borderStyle-selected) var(--salt-selectable-borderColor-selected);
+  overflow: hidden;
+  overflow-y: auto;
+  position: relative;
+  z-index: var(--salt-zIndex-flyover);
+  box-shadow: var(--salt-overlayable-shadow-popout);
+  box-sizing: border-box;
+  display: flex;
 }
 
 /* src/date-picker/DatePickerPanel.css */
-.saltDatePickerPanel {
+.saltDatePickerOverlay {
   background: var(--salt-container-primary-background);
   border: var(--salt-size-border) var(--salt-selectable-borderStyle-selected) var(--salt-selectable-borderColor-selected);
   overflow: hidden;
@@ -998,7 +1100,6 @@
   box-shadow: var(--salt-overlayable-shadow-popout);
   box-sizing: border-box;
   display: flex;
-  border-radius: var(--salt-palette-corner, 0);
 }
 .saltDatePickerPanel-container {
   width: min-content;
@@ -2125,8 +2226,6 @@
 .saltMenuButtonTrigger-buttonOpen:not(:hover) .saltMenuButtonTrigger-icon {
   color: var(--menuButton-trigger-open-color);
 }
-.saltMenuButtonTrigger-icon {
-}
 .saltMenuButtonTrigger-caretIcon {
   --saltIcon-margin: 0 0 0 var(--salt-size-unit);
 }
@@ -2229,8 +2328,6 @@
 }
 
 /* src/query-input/QueryInput.css */
-.saltQueryInput {
-}
 .saltQueryInputBody {
   display: flex;
   flex-direction: row;
@@ -2254,8 +2351,6 @@
 .saltQueryInputBody-input {
   flex-grow: 1;
 }
-.saltQueryInputValueSelector {
-}
 .saltQueryInputValueSelector-content {
   display: flex;
   flex-direction: row;
@@ -2309,10 +2404,6 @@
   font-size: var(--salt-text-fontSize);
   flex-grow: 1;
 }
-.saltQueryInputSearchList {
-}
-.saltQueryInputSearchList-group {
-}
 .saltQueryInputSearchList-addKeyword {
   border-top: solid 1px var(--salt-separable-secondary-borderColor);
 }
@@ -2328,8 +2419,6 @@
   top: 0;
   z-index: var(--salt-zIndex-default);
 }
-.saltQueryInputSearchList-value {
-}
 
 /* src/search-input/SearchInput.css */
 .saltSearchInput .saltInputLegacy-input::-webkit-search-cancel-button {
@@ -2389,171 +2478,153 @@
 }
 
 /* src/slider/Slider.css */
-.salt-density-high {
-  --slider-clickable-paddingTop: var(--saltSlider-clickable-paddingTop, 2px);
-  --slider-clickable-paddingBottom: var(--saltSlider-clickable-paddingBottom, 2px);
-  --slider-paddingTop: var(--saltSlider-paddingTop, 3px);
-  --slider-paddingBottom: var(--saltSlider-paddingBottom, 0);
+.saltSlider {
+  display: grid;
+  gap: var(--salt-spacing-100);
+  grid-template-columns: auto 1fr auto;
+  user-select: none;
 }
-.salt-density-medium {
-  --slider-clickable-paddingTop: var(--saltSlider-clickable-paddingTop, 4px);
-  --slider-clickable-paddingBottom: var(--saltSlider-clickable-paddingBottom, 4px);
-  --slider-paddingTop: var(--saltSlider-paddingTop, 6px);
-  --slider-paddingBottom: var(--saltSlider-paddingBottom, 0);
+.saltSlider-label {
+  height: var(--salt-size-base);
+  display: flex;
+  align-items: center;
 }
-.salt-density-low {
-  --slider-clickable-paddingTop: var(--saltSlider-clickable-paddingTop, 8px);
-  --slider-clickable-paddingBottom: var(--saltSlider-clickable-paddingBottom, 8px);
-  --slider-paddingTop: var(--saltSlider-paddingTop, 9px);
-  --slider-paddingBottom: var(--saltSlider-paddingBottom, 0);
+.saltSlider-bottomLabel {
+  grid-template-columns: 1fr;
+  gap: 0;
 }
-.salt-density-touch {
-  --slider-clickable-paddingTop: var(--saltSlider-clickable-paddingTop, 12px);
-  --slider-clickable-paddingBottom: var(--saltSlider-clickable-paddingBottom, 12px);
-  --slider-paddingTop: var(--saltSlider-paddingTop, 12px);
-  --slider-paddingBottom: var(--saltSlider-paddingBottom, 0);
+.saltSlider-bottomLabel .saltSlider-label {
+  height: auto;
 }
-.saltSlider {
-  --slider-rail-height: var(--saltSlider-rail-height, 8px);
-  --slider-rail-color: var(--saltSlider-rail-color, var(--salt-track-borderColor));
-  --slider-rail-mark-height: var(--saltSlider-rail-mark-height, 7px);
-  --slider-rail-mark-color: var(--saltSlider-rail-mark-color, var(--slider-rail-color));
-  --slider-selection-color: var(--saltSlider-selection-color, var(--salt-accent-background));
-  --slider-selection-height: var(--saltSlider-selection-height, 2px);
-  --slider-handle-size: var(--saltSlider-handle-size, calc(var(--salt-size-base) * 0.5));
-  --slider-handle-outlineStyle: var(--saltSlider-handle-outlineStyle, var(--salt-focused-outlineStyle));
-  --slider-handle-outlineWidth: var(--saltSlider-handle-outlineWidth, var(--salt-focused-outlineWidth));
-  --slider-handle-outlineColor: var(--saltSlider-handle-outlineColor, var(--salt-focused-outlineColor));
-  --slider-handle-outlineOffset: var(--saltSlider-handle-outlineOffset, var(--salt-focused-outlineOffset));
-  --slider-arrow-height: var(--saltSlider-arrow-height, 6px);
-  --slider-arrow-width: var(--saltSlider-arrow-width, 8px);
-  --slider-arrow-color: var(--saltSlider-arrow-color, var(--slider-selection-color));
-  --slider-borderStyle: var(--saltSlider-borderStyle, none);
-  --slider-borderWidth: var(--saltSlider-borderWidth, 0);
-  --slider-borderColor: var(--saltSlider-borderColor, transparent);
-  --slider-width: var(--saltSlider-width, 300px);
-  --slider-clickable-paddingLeft: var(--saltSlider-clickable-paddingLeft, calc(var(--salt-size-base) * 0.5));
-  --slider-clickable-paddingRight: var(--saltSlider-clickable-paddingRight, calc(var(--salt-size-base) * 0.5));
-  --slider-label-fontSize: var(--saltSlider-label-fontSize, var(--salt-text-label-fontSize));
-  --slider-label-paddingLeft: var(--saltSlider-label-paddingLeft, 0);
-  --slider-label-paddingRight: var(--saltSlider-label-paddingRight, 0);
+.saltSlider-labelMinBottom {
+  grid-row: 2;
+  grid-column: 1;
+  justify-self: start;
+  width: min-content;
 }
-.saltSlider {
-  width: var(--slider-width);
-  border-style: var(--slider-borderStyle);
-  border-width: var(--slider-borderWidth);
-  border-color: var(--slider-borderColor);
+.saltSlider-labelMaxBottom {
+  grid-row: 2;
+  grid-column: 1;
+  justify-self: end;
+  width: min-content;
+}
+.saltSliderTrack {
   display: flex;
-  flex-direction: column;
-  align-items: stretch;
-  padding-top: var(--slider-paddingTop);
-  padding-bottom: var(--slider-paddingBottom);
+  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;
 }
-.saltSlider-disabled {
+.saltSliderTrack:active {
+  cursor: grabbing;
 }
-.saltSlider-clickable {
-  padding: var(--slider-clickable-paddingTop) var(--slider-clickable-paddingRight) var(--slider-clickable-paddingBottom) var(--slider-clickable-paddingLeft);
-  margin-right: calc(-1 * var(--slider-clickable-paddingRight));
-  margin-left: calc(-1 * var(--slider-clickable-paddingLeft));
+.saltSliderThumb-container {
+  position: absolute;
   display: flex;
-  flex-direction: column;
+  align-items: center;
   justify-content: center;
-  align-items: stretch;
-}
-.saltSlider-track {
-  display: grid;
-  grid-template-rows: auto auto auto;
-  align-items: end;
-  grid-template-columns: auto auto auto;
-  row-gap: 0;
-  transition: grid-template-columns 100ms ease;
+  transform: translate(-50%, 0%);
+  width: var(--salt-size-base);
+  height: var(--salt-size-base);
 }
-.saltSliderRail {
-  grid-row: 1;
-  grid-column-start: 1;
-  grid-column-end: -1;
-  height: var(--slider-rail-height);
-  border-style: solid;
-  border-width: 0 1px 1px 1px;
-  border-color: var(--slider-rail-color);
+.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;
 }
-.saltSliderRailMarks {
-  grid-row: 2;
-  grid-column-start: 1;
-  grid-column-end: -1;
-  display: grid;
-  grid-template-rows: auto;
+.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);
 }
-.saltSliderRailMarks-mark {
-  grid-row: 1;
-  width: 0;
-  height: var(--slider-rail-mark-height);
-  border-left: 1px solid var(--slider-rail-mark-color);
+.saltSliderThumb-tooltip-visible {
+  display: block;
 }
-.saltSliderRailMarks-max {
-  margin-left: -1px;
+.saltSliderThumb-container:hover .saltSliderThumb-tooltip {
+  display: block;
 }
-.saltSliderMarkLabels {
-  grid-row: 3;
-  grid-column-start: 1;
-  grid-column-end: -1;
-  display: grid;
-  grid-template-rows: auto;
-  justify-items: center;
+.saltSliderThumb {
+  position: relative;
+  width: var(--salt-size-indicator);
+  height: var(--salt-size-selectable);
+  background: var(--salt-accent-borderColor);
 }
-.saltSliderMarkLabels-label {
-  color: var(--saltSlider-label-text-color, var(--salt-content-secondary-foreground));
-  font-size: var(--slider-label-fontSize);
-  margin-top: var(--saltSlider-label-marginTop);
-  line-height: var(--saltSlider-label-lineHeight, var(--salt-text-lineHeight));
-  white-space: nowrap;
+.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 {
-  grid-row: 1;
-  grid-column-start: 1;
-  grid-column-end: -2;
-  height: var(--slider-selection-height);
-  background: var(--slider-selection-color);
+  height: var(--salt-size-bar);
+  background: var(--salt-accent-borderColor);
+  align-items: start;
+  position: absolute;
 }
 .saltSliderSelection-range {
-  grid-row: 1;
-  grid-column-start: 2;
-  grid-column-end: -2;
-  height: var(--slider-selection-height);
-  background: var(--slider-selection-color);
-}
-.saltSliderHandle-box:focus-visible {
-  outline-style: var(--slider-handle-outlineStyle);
-  outline-width: var(--slider-handle-outlineWidth);
-  outline-color: var(--slider-handle-outlineColor);
-  outline-offset: var(--slider-handle-outlineOffset);
-}
-.saltSliderHandle {
-  margin-left: calc(var(--slider-arrow-width) * -0.5);
-  grid-row: 1;
-  width: 0;
-  height: 0;
-  border-left: calc(var(--slider-arrow-width) * 0.5) solid transparent;
-  border-right: calc(var(--slider-arrow-width) * 0.5) solid transparent;
-  border-bottom: calc(var(--slider-arrow-height)) solid var(--slider-arrow-color);
+  align-items: center;
+}
+.saltSliderMarks {
   position: relative;
 }
-.saltSliderHandle-min {
-  border-left: none;
-  margin-left: 0;
+.saltSliderMarks-mark {
+  position: absolute;
+  transform: translate(-50%);
+  line-height: var(--salt-text-lineHeight);
 }
-.saltSliderHandle-max {
-  border-right: none;
+
+/* src/static-list/StaticList.css */
+.saltStaticList {
+  overflow-y: auto;
 }
-.saltSlider-label {
-  color: var(--saltSlider-label-text-color, var(--salt-content-secondary-foreground));
-  font-size: var(--slider-label-fontSize);
-  margin-top: var(--saltSlider-label-marginTop);
-  line-height: var(--saltSlider-label-lineHeight, var(--salt-text-lineHeight));
-  padding-left: var(--slider-label-paddingLeft);
-  padding-right: var(--slider-label-paddingRight);
-  white-space: nowrap;
-  text-overflow: ellipsis;
+
+/* src/static-list/StaticListItem.css */
+.saltStaticListItem {
+  list-style-type: none;
+  display: flex;
+  gap: var(--salt-spacing-100);
+  box-sizing: border-box;
+  padding: var(--salt-spacing-50) var(--salt-spacing-100);
+  min-height: calc(var(--salt-size-base) + var(--salt-spacing-100));
+}
+.saltStaticListItem > .saltIcon {
+  min-height: var(--salt-size-base);
+}
+
+/* src/static-list/StaticListItemContent.css */
+.saltStaticListItemContent {
+  flex: 1 0;
+  margin: var(--salt-spacing-75) 0;
+  color: var(--salt-content-primary-foreground);
+  font-size: var(--salt-text-fontSize);
+  font-weight: var(--salt-text-fontWeight);
+  font-family: var(--salt-text-fontFamily);
+  line-height: var(--salt-text-lineHeight);
+  letter-spacing: var(--salt-text-letterSpacing);
 }
 
 /* src/stepped-tracker/SteppedTracker.css */
@@ -2575,20 +2646,229 @@
 
 /* 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;
-  display: flex;
-  flex-direction: row;
+  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(--salt-spacing-50);
+  gap: var(--stepperInput-buttonGap);
 }
 .saltStepperInput-stepperButton {
-  --saltButton-height: calc((var(--salt-size-base) - var(--salt-spacing-50)) * 0.5);
+  --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 {
@@ -2788,7 +3068,6 @@
 .saltTabActivationIndicator {
   --tabs-activationIndicator-background: var(--salt-container-primary-borderColor);
   background: var(--saltTabs-activationIndicator-background, var(--tabs-activationIndicator-background));
-  bottom: 0;
   height: var(--saltTabs-activationIndicator-height, auto);
   inset: var(--tabs-activationIndicator-inset);
   position: absolute;
@@ -3764,20 +4043,6 @@
   overflow: hidden;
 }
 
-/* src/calendar/internal/CalendarCarousel.css */
-.saltCalendarCarousel-track {
-  display: grid;
-  grid-auto-flow: column;
-}
-.saltCalendarCarousel-track > * {
-  position: absolute;
-  left: 0;
-  width: 100%;
-}
-.saltCalendarCarousel-track > :nth-child(2) {
-  position: relative;
-}
-
 /* src/calendar/internal/CalendarDay.css */
 .saltCalendarDay {
   font-family: var(--salt-text-fontFamily);
@@ -3840,6 +4105,7 @@
 .saltCalendarDay-selectedStart:hover,
 .saltCalendarDay-selectedEnd,
 .saltCalendarDay-selectedEnd:hover {
+  color: var(--salt-content-primary-foreground);
   background: var(--salt-selectable-background-selected);
   box-shadow: 0 0 0 var(--salt-size-border) var(--salt-selectable-borderColor-selected);
 }
@@ -3847,6 +4113,7 @@
 .saltCalendarDay-hoveredSpan:hover,
 .saltCalendarDay-selectedSpan,
 .saltCalendarDay-selectedSpan:hover {
+  color: var(--salt-content-primary-foreground);
   background: var(--salt-selectable-background-hover);
   box-shadow:
     calc(var(--salt-size-border) * -2) 0 0 0 var(--salt-selectable-background-hover),
@@ -3902,44 +4169,6 @@
   margin: var(--salt-size-border);
 }
 
-/* src/calendar/internal/CalendarNavigation.css */
-.saltCalendarNavigation {
-  display: grid;
-  grid-template-columns: min-content auto min-content;
-  padding-bottom: var(--salt-spacing-100);
-  grid-gap: 0;
-  align-items: center;
-  box-sizing: border-box;
-}
-.saltCalendarNavigation-hideYearDropdown {
-  grid-template-columns: min-content auto min-content;
-  grid-gap: var(--salt-spacing-300);
-}
-.saltCalendarNavigation-dropdowns {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  grid-gap: var(--salt-spacing-100);
-}
-
-/* src/calendar/internal/CalendarWeekHeader.css */
-.saltCalendarWeekHeader {
-  display: grid;
-  gap: var(--salt-size-border);
-  grid-template-columns: repeat(7, var(--salt-size-base));
-  text-align: center;
-  align-items: center;
-  height: var(--salt-size-base);
-  margin: var(--salt-size-border);
-}
-.saltCalendarWeekHeader-dayOfWeek {
-  width: var(--salt-size-base);
-  color: var(--salt-content-secondary-foreground);
-  font-family: var(--salt-text-fontFamily);
-  font-weight: var(--salt-text-fontWeight);
-  font-size: var(--salt-text-fontSize);
-  line-height: var(--salt-text-lineHeight);
-}
-
 /* src/list-deprecated/internal/Highlighter.css */
 .saltHighlighter-highlight {
   font-weight: 700;
@@ -4142,4 +4371,4 @@
   margin: calc(var(--salt-size-unit) / 2) 0;
 }
 
-/* src/ba816afd-b240-4e0e-8f09-cb5a1606dd53.css */
+/* src/a9f7fc8f-a7aa-4043-9f09-029432b66a3d.css */