@salt-ds/core 1.57.1 → 1.59.0

package/css/salt-core.css

@@ -143,7 +143,7 @@
   user-select: none;
 }
 .saltAvatar-accent {
-  --avatar-background: var(--salt-accent-background);
+  --avatar-background: var(--salt-sentiment-accent-background);
 }
 .saltAvatar-category-1 {
   --avatar-background: var(--salt-category-1-bold-background);
@@ -240,7 +240,7 @@
   font-weight: var(--salt-text-notation-fontWeight);
   font-family: var(--salt-text-fontFamily);
   line-height: var(--salt-text-notation-lineHeight);
-  background: var(--salt-accent-background);
+  background: var(--salt-sentiment-accent-background);
   color: var(--salt-content-bold-foreground);
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
@@ -666,7 +666,7 @@
   box-sizing: border-box;
   border-radius: var(--saltCard-borderRadius, var(--salt-palette-corner, 0));
   overflow: hidden;
-  --card-accent-color: var(--salt-accent-background);
+  --card-accent-color: var(--salt-sentiment-accent-background);
 }
 .saltCard-primary {
   background: var(--saltCard-background, var(--salt-container-primary-background));
@@ -766,8 +766,9 @@ a:focus .saltCard-interactable.saltCard-disabled {
   font-weight: var(--salt-text-fontWeight);
 }
 .saltCheckbox-disabled {
-  color: var(--salt-content-primary-foreground-disabled);
+  color: var(--salt-content-primary-foreground);
   cursor: var(--salt-cursor-disabled);
+  opacity: 0.4;
 }
 .saltCheckbox-readOnly {
   color: var(--salt-content-primary-foreground);
@@ -870,14 +871,15 @@ a:focus .saltCard-interactable.saltCard-disabled {
 .saltCheckbox:hover .saltCheckboxIcon-disabled,
 .saltCheckboxIcon-disabled.saltCheckboxIcon-indeterminate,
 .saltCheckbox:hover .saltCheckboxIcon-disabled.saltCheckboxIcon-indeterminate {
-  border-color: var(--salt-selectable-borderColor-disabled);
-  background: var(--salt-container-primary-background-disabled);
-  color: var(--salt-selectable-foreground-disabled);
+  opacity: 0.4;
+  border-color: var(--salt-selectable-borderColor);
+  background: var(--salt-container-primary-background);
+  color: var(--salt-selectable-foreground);
 }
 .saltCheckboxIcon-checked.saltCheckboxIcon-disabled,
 .saltCheckbox:hover .saltCheckboxIcon-checked.saltCheckboxIcon-disabled {
-  border-color: var(--salt-selectable-borderColor-selectedDisabled);
-  color: var(--salt-selectable-foreground-selectedDisabled);
+  border-color: var(--salt-selectable-borderColor-selected);
+  color: var(--salt-selectable-foreground-selected);
 }
 .saltCheckboxIcon-indeterminate::before {
   content: "";
@@ -935,8 +937,6 @@ a:focus .saltCard-interactable.saltCard-disabled {
   overflow: hidden;
 }
 
-/* src/combo-box/ComboBox.css */
-
 /* src/dialog/Dialog.css */
 .saltDialog {
   position: fixed;
@@ -1128,7 +1128,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
   left: 0;
   bottom: var(--salt-spacing-300);
   width: var(--salt-size-bar);
-  background: var(--salt-accent-background);
+  background: var(--salt-sentiment-accent-background);
 }
 
 /* src/divider/Divider.css */
@@ -1259,7 +1259,6 @@ a:focus .saltCard-interactable.saltCard-disabled {
   overflow: hidden;
 }
 .saltDropdown:hover {
-  background: var(--dropdown-background-hover);
   cursor: var(--salt-cursor-hover);
 }
 .saltDropdown-bordered.saltDropdown {
@@ -1320,10 +1319,8 @@ a:focus .saltCard-interactable.saltCard-disabled {
 .saltDropdown-primary {
   --dropdown-color: var(--salt-content-primary-foreground);
   --dropdown-background: var(--salt-editable-primary-background);
-  --dropdown-background-active: var(--salt-editable-primary-background-active);
-  --dropdown-background-hover: var(--salt-editable-primary-background-hover);
   --dropdown-background-disabled: var(--salt-editable-primary-background-disabled);
-  --dropdown-background-readonly: var(--salt-editable-primary-background-readonly);
+  --dropdown-background-readonly: var(--salt-editable-background-readonly);
   --dropdown-borderColor: var(--salt-editable-borderColor);
   --dropdown-borderColor-active: var(--salt-editable-borderColor-active);
   --dropdown-borderColor-hover: var(--salt-editable-borderColor-hover);
@@ -1332,10 +1329,18 @@ a:focus .saltCard-interactable.saltCard-disabled {
 .saltDropdown-secondary {
   --dropdown-color: var(--salt-content-primary-foreground);
   --dropdown-background: var(--salt-editable-secondary-background);
-  --dropdown-background-active: var(--salt-editable-secondary-background-active);
-  --dropdown-background-hover: var(--salt-editable-secondary-background-active);
   --dropdown-background-disabled: var(--salt-editable-secondary-background-disabled);
-  --dropdown-background-readonly: var(--salt-editable-secondary-background-readonly);
+  --dropdown-background-readonly: var(--salt-editable-background-readonly);
+  --dropdown-borderColor: var(--salt-editable-borderColor);
+  --dropdown-borderColor-active: var(--salt-editable-borderColor-active);
+  --dropdown-borderColor-hover: var(--salt-editable-borderColor-hover);
+  --dropdown-outlineColor: var(--salt-focused-outlineColor);
+}
+.saltDropdown-tertiary {
+  --dropdown-color: var(--salt-content-primary-foreground);
+  --dropdown-background: var(--salt-editable-tertiary-background);
+  --dropdown-background-disabled: var(--salt-editable-tertiary-background-disabled);
+  --dropdown-background-readonly: var(--salt-editable-background-readonly);
   --dropdown-borderColor: var(--salt-editable-borderColor);
   --dropdown-borderColor-active: var(--salt-editable-borderColor-active);
   --dropdown-borderColor-hover: var(--salt-editable-borderColor-hover);
@@ -1344,8 +1349,6 @@ a:focus .saltCard-interactable.saltCard-disabled {
 .saltDropdown-error {
   --dropdown-color: var(--salt-content-primary-foreground);
   --dropdown-background: var(--salt-status-error-background);
-  --dropdown-background-active: var(--salt-status-error-background);
-  --dropdown-background-hover: var(--salt-status-error-background);
   --dropdown-background-readonly: var(--salt-status-error-background);
   --dropdown-borderColor: var(--salt-status-error-borderColor);
   --dropdown-borderColor-active: var(--salt-status-error-borderColor);
@@ -1355,8 +1358,6 @@ a:focus .saltCard-interactable.saltCard-disabled {
 .saltDropdown-warning {
   --dropdown-color: var(--salt-content-primary-foreground);
   --dropdown-background: var(--salt-status-warning-background);
-  --dropdown-background-active: var(--salt-status-warning-background);
-  --dropdown-background-hover: var(--salt-status-warning-background);
   --dropdown-background-readonly: var(--salt-status-warning-background);
   --dropdown-borderColor: var(--salt-status-warning-borderColor);
   --dropdown-borderColor-active: var(--salt-status-warning-borderColor);
@@ -1366,8 +1367,6 @@ a:focus .saltCard-interactable.saltCard-disabled {
 .saltDropdown-success {
   --dropdown-color: var(--salt-content-primary-foreground);
   --dropdown-background: var(--salt-status-success-background);
-  --dropdown-background-active: var(--salt-status-success-background);
-  --dropdown-background-hover: var(--salt-status-success-background);
   --dropdown-background-readonly: var(--salt-status-success-background);
   --dropdown-borderColor: var(--salt-status-success-borderColor);
   --dropdown-borderColor-active: var(--salt-status-success-borderColor);
@@ -1376,7 +1375,6 @@ a:focus .saltCard-interactable.saltCard-disabled {
 }
 .saltDropdown:focus,
 .saltDropdown:focus:hover {
-  background: var(--dropdown-background-active);
   cursor: var(--salt-cursor-hover);
   outline: var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--dropdown-outlineColor);
 }
@@ -1689,7 +1687,6 @@ a:focus .saltCard-interactable.saltCard-disabled {
   overflow: hidden;
 }
 .saltInput:hover {
-  background: var(--saltInput-background-hover, var(--input-background-hover));
   cursor: var(--salt-cursor-text);
 }
 .saltInput-bordered.saltInput {
@@ -1749,10 +1746,8 @@ a:focus .saltCard-interactable.saltCard-disabled {
 }
 .saltInput-primary {
   --input-background: var(--salt-editable-primary-background);
-  --input-background-active: var(--salt-editable-primary-background-active);
-  --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-background-readonly: var(--salt-editable-background-readonly);
   --input-borderColor: var(--salt-editable-borderColor);
   --input-borderColor-active: var(--salt-editable-borderColor-active);
   --input-borderColor-hover: var(--salt-editable-borderColor-hover);
@@ -1760,10 +1755,17 @@ a:focus .saltCard-interactable.saltCard-disabled {
 }
 .saltInput-secondary {
   --input-background: var(--salt-editable-secondary-background);
-  --input-background-active: var(--salt-editable-secondary-background-active);
-  --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-background-readonly: var(--salt-editable-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);
+}
+.saltInput-tertiary {
+  --input-background: var(--salt-editable-tertiary-background);
+  --input-background-disabled: var(--salt-editable-tertiary-background-disabled);
+  --input-background-readonly: var(--salt-editable-background-readonly);
   --input-borderColor: var(--salt-editable-borderColor);
   --input-borderColor-active: var(--salt-editable-borderColor-active);
   --input-borderColor-hover: var(--salt-editable-borderColor-hover);
@@ -1771,8 +1773,6 @@ a:focus .saltCard-interactable.saltCard-disabled {
 }
 .saltInput-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);
@@ -1781,8 +1781,6 @@ a:focus .saltCard-interactable.saltCard-disabled {
 }
 .saltInput-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);
@@ -1791,8 +1789,6 @@ a:focus .saltCard-interactable.saltCard-disabled {
 }
 .saltInput-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);
@@ -1801,7 +1797,6 @@ a:focus .saltCard-interactable.saltCard-disabled {
 }
 .saltInput-focused,
 .saltInput-focused:hover {
-  background: var(--saltInput-background-active, var(--input-background-active));
   cursor: var(--salt-cursor-text);
   outline: var(--saltInput-outline, var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--input-outlineColor));
 }
@@ -1889,7 +1884,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
   text-align: start;
   transition: box-shadow var(--salt-duration-instant) ease-in-out;
   overflow: hidden;
-  --card-accent-color: var(--salt-accent-background);
+  --card-accent-color: var(--salt-sentiment-accent-background);
 }
 .saltInteractableCard-primary {
   background: var(--saltInteractableCard-background, var(--salt-container-primary-background));
@@ -1966,7 +1961,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
   color: var(--salt-content-primary-foreground-disabled);
   cursor: var(--salt-cursor-disabled);
   outline: none;
-  --card-accent-color: var(--salt-accent-background-disabled);
+  --card-accent-color: var(--salt-sentiment-accent-background-disabled);
 }
 .saltInteractableCard-primary.saltInteractableCard-disabled,
 .saltInteractableCard-primary.saltInteractableCard-disabled:focus,
@@ -2005,6 +2000,36 @@ a:focus .saltCard-interactable.saltCard-disabled {
   gap: var(--salt-spacing-200);
 }
 
+/* src/kbd/Kbd.css */
+.saltKbd-primary {
+  --kbd-background: var(--salt-container-primary-background);
+}
+.saltKbd-secondary {
+  --kbd-background: var(--salt-container-secondary-background);
+}
+.saltKbd-tertiary {
+  --kbd-background: var(--salt-container-tertiary-background);
+}
+.saltKbd {
+  display: inline-flex;
+  box-sizing: border-box;
+  width: fit-content;
+  border-radius: var(--salt-palette-corner-weaker);
+  border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-container-primary-borderColor);
+  background: var(--kbd-background);
+  box-shadow: 0 var(--salt-size-fixed-100) 0 0 var(--salt-container-primary-borderColor);
+  height: calc(var(--salt-size-base) - var(--salt-spacing-100));
+  align-items: center;
+  padding: 0 var(--salt-spacing-50);
+  text-transform: capitalize;
+  color: var(--salt-content-primary-foreground);
+  font-family: var(--salt-text-code-fontFamily);
+  font-size: var(--salt-text-fontSize);
+  font-style: normal;
+  font-weight: var(--salt-text-fontWeight);
+  line-height: var(--salt-text-lineHeight);
+}
+
 /* src/link/Link.css */
 .saltLink {
   --link-color: "inherit";
@@ -2101,7 +2126,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
   position: relative;
   text-decoration: none;
   transition: box-shadow var(--salt-duration-instant) ease-in-out;
-  --linkCard-accent-color: var(--salt-accent-background);
+  --linkCard-accent-color: var(--salt-sentiment-accent-background);
 }
 .saltLinkCard-primary {
   background: var(--saltLinkCard-background, var(--salt-container-primary-background));
@@ -2313,7 +2338,6 @@ a:focus .saltCard-interactable.saltCard-disabled {
   display: flex;
 }
 .saltMultilineInput:hover {
-  background: var(--multilineInput-background-hover);
   cursor: var(--salt-cursor-text);
 }
 .saltMultilineInput-bordered.saltMultilineInput {
@@ -2373,10 +2397,8 @@ a:focus .saltCard-interactable.saltCard-disabled {
 }
 .saltMultilineInput-primary {
   --multilineInput-background: var(--salt-editable-primary-background);
-  --multilineInput-background-active: var(--salt-editable-primary-background-active);
-  --multilineInput-background-hover: var(--salt-editable-primary-background-hover);
   --multilineInput-background-disabled: var(--salt-editable-primary-background-disabled);
-  --multilineInput-background-readonly: var(--salt-editable-primary-background-readonly);
+  --multilineInput-background-readonly: var(--salt-editable-background-readonly);
   --multilineInput-borderColor: var(--salt-editable-borderColor);
   --multilineInput-borderColor-active: var(--salt-editable-borderColor-active);
   --multilineInput-borderColor-hover: var(--salt-editable-borderColor-hover);
@@ -2384,10 +2406,17 @@ a:focus .saltCard-interactable.saltCard-disabled {
 }
 .saltMultilineInput-secondary {
   --multilineInput-background: var(--salt-editable-secondary-background);
-  --multilineInput-background-active: var(--salt-editable-secondary-background-active);
-  --multilineInput-background-hover: var(--salt-editable-secondary-background-active);
   --multilineInput-background-disabled: var(--salt-editable-secondary-background-disabled);
-  --multilineInput-background-readonly: var(--salt-editable-secondary-background-readonly);
+  --multilineInput-background-readonly: var(--salt-editable-background-readonly);
+  --multilineInput-borderColor: var(--salt-editable-borderColor);
+  --multilineInput-borderColor-active: var(--salt-editable-borderColor-active);
+  --multilineInput-borderColor-hover: var(--salt-editable-borderColor-hover);
+  --multilineInput-outlineColor: var(--salt-focused-outlineColor);
+}
+.saltMultilineInput-tertiary {
+  --multilineInput-background: var(--salt-editable-tertiary-background);
+  --multilineInput-background-disabled: var(--salt-editable-tertiary-background-disabled);
+  --multilineInput-background-readonly: var(--salt-editable-background-readonly);
   --multilineInput-borderColor: var(--salt-editable-borderColor);
   --multilineInput-borderColor-active: var(--salt-editable-borderColor-active);
   --multilineInput-borderColor-hover: var(--salt-editable-borderColor-hover);
@@ -2395,8 +2424,6 @@ a:focus .saltCard-interactable.saltCard-disabled {
 }
 .saltMultilineInput-error {
   --multilineInput-background: var(--salt-status-error-background);
-  --multilineInput-background-active: var(--salt-status-error-background);
-  --multilineInput-background-hover: var(--salt-status-error-background);
   --multilineInput-background-readonly: var(--salt-status-error-background);
   --multilineInput-borderColor: var(--salt-status-error-borderColor);
   --multilineInput-borderColor-active: var(--salt-status-error-borderColor);
@@ -2405,8 +2432,6 @@ a:focus .saltCard-interactable.saltCard-disabled {
 }
 .saltMultilineInput-warning {
   --multilineInput-background: var(--salt-status-warning-background);
-  --multilineInput-background-active: var(--salt-status-warning-background);
-  --multilineInput-background-hover: var(--salt-status-warning-background);
   --multilineInput-background-readonly: var(--salt-status-warning-background);
   --multilineInput-borderColor: var(--salt-status-warning-borderColor);
   --multilineInput-borderColor-active: var(--salt-status-warning-borderColor);
@@ -2415,8 +2440,6 @@ a:focus .saltCard-interactable.saltCard-disabled {
 }
 .saltMultilineInput-success {
   --multilineInput-background: var(--salt-status-success-background);
-  --multilineInput-background-active: var(--salt-status-success-background);
-  --multilineInput-background-hover: var(--salt-status-success-background);
   --multilineInput-background-readonly: var(--salt-status-success-background);
   --multilineInput-borderColor: var(--salt-status-success-borderColor);
   --multilineInput-borderColor-active: var(--salt-status-success-borderColor);
@@ -2425,7 +2448,6 @@ a:focus .saltCard-interactable.saltCard-disabled {
 }
 .saltMultilineInput-focused,
 .saltMultilineInput-focused:hover {
-  background: var(--multilineInput-background-active);
   cursor: var(--salt-cursor-text);
   outline: var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--multilineInput-outlineColor);
 }
@@ -2439,6 +2461,9 @@ a:focus .saltCard-interactable.saltCard-disabled {
   cursor: var(--salt-cursor-disabled);
   color: var(--salt-content-primary-foreground-disabled);
 }
+.saltMultilineInput-disabled .saltMultilineInput-textarea {
+  cursor: var(--salt-cursor-disabled);
+}
 .saltMultilineInput.saltMultilineInput-withAdornmentRow {
   grid-template-areas: "start-adornment textarea" "end-adornment end-adornment";
   grid-template-columns: min-content 1fr;
@@ -2651,7 +2676,6 @@ a:focus .saltCard-interactable.saltCard-disabled {
 .saltNumberInput:hover {
   --numberInput-borderStyle: var(--salt-borderStyle-solid);
   --numberInput-borderColor: var(--salt-editable-borderColor-hover);
-  background: var(--numberInput-background-hover);
   cursor: var(--salt-cursor-text);
 }
 .saltNumberInput:active {
@@ -2662,23 +2686,22 @@ a:focus .saltCard-interactable.saltCard-disabled {
 }
 .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);
+  --numberInput-background-readonly: var(--salt-editable-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);
+  --numberInput-background-readonly: var(--salt-editable-background-readonly);
+}
+.saltNumberInput-tertiary {
+  --numberInput-background: var(--salt-editable-tertiary-background);
+  --numberInput-background-disabled: var(--salt-editable-tertiary-background-disabled);
+  --numberInput-background-readonly: var(--salt-editable-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);
@@ -2686,8 +2709,6 @@ a:focus .saltCard-interactable.saltCard-disabled {
 .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);
@@ -2695,8 +2716,6 @@ a:focus .saltCard-interactable.saltCard-disabled {
 .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);
@@ -2874,6 +2893,12 @@ a:focus .saltCard-interactable.saltCard-disabled {
 .saltOption:hover {
   background: var(--salt-selectable-background-hover);
 }
+.saltOption[aria-disabled=true] {
+  color: var(--salt-content-primary-foreground);
+  background: var(--salt-selectable-background);
+  opacity: 0.4;
+  cursor: var(--salt-cursor-disabled);
+}
 .saltOption[aria-selected=true] {
   z-index: var(--salt-zIndex-default);
   background: var(--salt-selectable-background-selected);
@@ -2882,10 +2907,6 @@ a:focus .saltCard-interactable.saltCard-disabled {
     calc(var(--salt-size-fixed-100) * -1) 0 0 var(--salt-size-fixed-100) var(--salt-selectable-borderColor-selected),
     0 calc(var(--salt-size-fixed-100) * -1) 0 var(--salt-selectable-borderColor-selected);
 }
-.saltOption[aria-disabled=true] {
-  color: var(--salt-content-primary-foreground-disabled);
-  cursor: var(--salt-cursor-disabled);
-}
 .saltOption .saltIcon:not(.saltCheckboxIcon-icon) {
   min-height: var(--salt-text-lineHeight);
 }
@@ -3292,7 +3313,6 @@ a:focus .saltCard-interactable.saltCard-disabled {
   flex-wrap: nowrap;
 }
 .saltPillInput:hover {
-  background: var(--saltPillInput-background-hover, var(--pillInput-background-hover));
   cursor: var(--salt-cursor-text);
 }
 .saltPillInput-bordered.saltPillInput {
@@ -3353,10 +3373,8 @@ a:focus .saltCard-interactable.saltCard-disabled {
 }
 .saltPillInput-primary {
   --pillInput-background: var(--salt-editable-primary-background);
-  --pillInput-background-active: var(--salt-editable-primary-background-active);
-  --pillInput-background-hover: var(--salt-editable-primary-background-hover);
   --pillInput-background-disabled: var(--salt-editable-primary-background-disabled);
-  --pillInput-background-readonly: var(--salt-editable-primary-background-readonly);
+  --pillInput-background-readonly: var(--salt-editable-background-readonly);
   --pillInput-borderColor: var(--salt-editable-borderColor);
   --pillInput-borderColor-active: var(--salt-editable-borderColor-active);
   --pillInput-borderColor-hover: var(--salt-editable-borderColor-hover);
@@ -3364,10 +3382,16 @@ a:focus .saltCard-interactable.saltCard-disabled {
 }
 .saltPillInput-secondary {
   --pillInput-background: var(--salt-editable-secondary-background);
-  --pillInput-background-active: var(--salt-editable-secondary-background-active);
-  --pillInput-background-hover: var(--salt-editable-secondary-background-active);
   --pillInput-background-disabled: var(--salt-editable-secondary-background-disabled);
-  --pillInput-background-readonly: var(--salt-editable-secondary-background-readonly);
+  --pillInput-background-readonly: var(--salt-editable-background-readonly);
+  --pillInput-borderColor: var(--salt-editable-borderColor);
+  --pillInput-borderColor-active: var(--salt-editable-borderColor-active);
+  --pillInput-borderColor-hover: var(--salt-editable-borderColor-hover);
+  --pillInput-outlineColor: var(--salt-focused-outlineColor);
+}
+.saltPillInput-tertiary {
+  --pillInput-background: var(--salt-editable-tertiary-background);
+  --pillInput-background-readonly: var(--salt-editable-background-readonly);
   --pillInput-borderColor: var(--salt-editable-borderColor);
   --pillInput-borderColor-active: var(--salt-editable-borderColor-active);
   --pillInput-borderColor-hover: var(--salt-editable-borderColor-hover);
@@ -3375,30 +3399,22 @@ a:focus .saltCard-interactable.saltCard-disabled {
 }
 .saltPillInput-error {
   --pillInput-background: var(--salt-status-error-background);
-  --pillInput-background-active: var(--salt-status-error-background);
-  --pillInput-background-hover: var(--salt-status-error-background);
   --pillInput-background-readonly: var(--salt-status-error-background);
   --pillInput-borderColor: var(--salt-status-error-borderColor);
   --pillInput-borderColor-active: var(--salt-status-error-borderColor);
   --pillInput-borderColor-hover: var(--salt-status-error-borderColor);
-  --pillInput-borderColor-disabled: var(--salt-editable-borderColor-disabled);
   --pillInput-outlineColor: var(--salt-status-error-borderColor);
 }
 .saltPillInput-warning {
   --pillInput-background: var(--salt-status-warning-background);
-  --pillInput-background-active: var(--salt-status-warning-background);
-  --pillInput-background-hover: var(--salt-status-warning-background);
   --pillInput-background-readonly: var(--salt-status-warning-background);
   --pillInput-borderColor: var(--salt-status-warning-borderColor);
   --pillInput-borderColor-active: var(--salt-status-warning-borderColor);
   --pillInput-borderColor-hover: var(--salt-status-warning-borderColor);
-  --pillInput-borderColor-disabled: var(--salt-editable-borderColor-disabled);
   --pillInput-outlineColor: var(--salt-status-warning-borderColor);
 }
 .saltPillInput-success {
   --pillInput-background: var(--salt-status-success-background);
-  --pillInput-background-active: var(--salt-status-success-background);
-  --pillInput-background-hover: var(--salt-status-success-background);
   --pillInput-background-readonly: var(--salt-status-success-background);
   --pillInput-borderColor: var(--salt-status-success-borderColor);
   --pillInput-borderColor-active: var(--salt-status-success-borderColor);
@@ -3407,7 +3423,6 @@ a:focus .saltCard-interactable.saltCard-disabled {
 }
 .saltPillInput-focused,
 .saltPillInput-focused:hover {
-  background: var(--saltPillInput-background-active, var(--pillInput-background-active));
   cursor: var(--salt-cursor-text);
   outline: var(--saltPillInput-outline, var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--pillInput-outlineColor));
 }
@@ -3536,8 +3551,9 @@ a:focus .saltCard-interactable.saltCard-disabled {
   --radioButton-icon-margin: calc((var(--salt-text-lineHeight) - var(--salt-size-selectable)) / 2);
 }
 .saltRadioButton-disabled {
-  color: var(--salt-content-primary-foreground-disabled);
+  color: var(--salt-content-primary-foreground);
   cursor: var(--salt-cursor-disabled);
+  opacity: 0.4;
 }
 .saltRadioButton-readOnly {
   color: var(--salt-content-primary-foreground);
@@ -3635,14 +3651,15 @@ a:focus .saltCard-interactable.saltCard-disabled {
 }
 .saltRadioButtonIcon-disabled,
 .saltRadioButton:hover .saltRadioButtonIcon-disabled {
-  border-color: var(--salt-selectable-borderColor-disabled);
-  background: var(--salt-container-primary-background-disabled);
-  color: var(--salt-selectable-foreground-disabled);
+  opacity: 0.4;
+  border-color: var(--salt-selectable-borderColor);
+  background: var(--salt-container-primary-background);
+  color: var(--salt-selectable-foreground);
 }
 .saltRadioButtonIcon-checked.saltRadioButtonIcon-disabled,
 .saltRadioButton:hover .saltRadioButtonIcon-checked.saltRadioButtonIcon-disabled {
-  border-color: var(--salt-selectable-borderColor-selectedDisabled);
-  color: var(--salt-selectable-foreground-selectedDisabled);
+  border-color: var(--salt-selectable-borderColor-selected);
+  color: var(--salt-selectable-foreground-selected);
 }
 .saltRadioButtonIcon-error,
 .saltRadioButton:hover .saltRadioButtonIcon-error {
@@ -3784,7 +3801,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
   position: relative;
 }
 .saltSpinner-gradientStop {
-  stop-color: var(--saltSpinner-gradient-color, var(--salt-accent-background));
+  stop-color: var(--saltSpinner-gradient-color, var(--salt-sentiment-accent-background));
 }
 .saltSpinner-medium {
   --spinner-strokeWidth: var(--salt-size-bar);
@@ -3989,8 +4006,9 @@ a:focus .saltCard-interactable.saltCard-disabled {
   line-height: var(--salt-text-lineHeight);
 }
 .saltSwitch-disabled {
-  color: var(--salt-content-primary-foreground-disabled);
+  color: var(--salt-content-primary-foreground);
   cursor: var(--salt-cursor-disabled);
+  opacity: 0.4;
 }
 .saltSwitch-track {
   border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-selectable-borderColor);
@@ -4025,14 +4043,14 @@ a:focus .saltCard-interactable.saltCard-disabled {
 }
 .saltSwitch-disabled .saltSwitch-track,
 .saltSwitch-disabled:hover .saltSwitch-track {
-  border-color: var(--salt-selectable-borderColor-disabled);
-  color: var(--salt-selectable-foreground-disabled);
-  background: var(--salt-container-primary-background-disabled);
+  border-color: var(--salt-selectable-borderColor);
+  color: var(--salt-selectable-foreground);
+  background: var(--salt-container-primary-background);
 }
 .saltSwitch-checked.saltSwitch-disabled .saltSwitch-track,
 .saltSwitch-checked.saltSwitch-disabled:hover .saltSwitch-track {
-  border-color: var(--salt-selectable-borderColor-selectedDisabled);
-  color: var(--salt-selectable-foreground-selectedDisabled);
+  border-color: var(--salt-selectable-borderColor-selected);
+  color: var(--salt-selectable-foreground-selected);
 }
 .saltSwitch-thumb {
   display: flex;
@@ -5004,6 +5022,68 @@ label.saltText small,
   justify-content: start;
 }
 
+/* src/toggletip/ToggletipPanel.css */
+.saltToggletipPanel {
+  --toggletip-background: var(--salt-container-primary-background);
+  --toggletip-borderColor: var(--salt-container-primary-borderColor);
+  box-sizing: border-box;
+  padding: var(--salt-spacing-100);
+  font-family: var(--salt-text-fontFamily);
+  font-size: var(--salt-text-fontSize);
+  font-weight: var(--salt-text-fontWeight);
+  line-height: var(--salt-text-lineHeight);
+  border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--toggletip-borderColor);
+  border-radius: var(--salt-palette-corner-weak);
+  background: var(--toggletip-background);
+  box-shadow: var(--salt-overlayable-shadow-popout);
+  color: var(--salt-content-primary-foreground);
+  z-index: var(--salt-zIndex-flyover);
+  max-width: 45ch;
+  max-height: 100vh;
+}
+.saltToggletipPanel-content {
+  max-height: 100%;
+  overflow-y: auto;
+}
+.saltToggletipPanel-content:focus-visible {
+  outline-offset: var(--salt-spacing-fixed-100);
+}
+
+/* src/toggletip/ToggletipTrigger.css */
+.saltToggletipTrigger {
+  box-sizing: border-box;
+  align-items: center;
+  appearance: none;
+  display: inline-flex;
+  gap: var(--salt-spacing-50);
+  justify-content: center;
+  font-size: var(--salt-text-fontSize);
+  font-family: var(--salt-text-fontFamily);
+  font-weight: var(--salt-text-fontWeight);
+  line-height: var(--salt-text-lineHeight);
+  letter-spacing: var(--salt-text-letterSpacing);
+  padding: 0;
+  margin: 0;
+  min-height: var(--salt-size-icon);
+  min-width: var(--salt-size-icon);
+  position: relative;
+  text-align: var(--salt-text-action-textAlign);
+  text-decoration: none;
+  transition: none;
+  width: auto;
+  -webkit-appearance: none;
+  -webkit-tap-highlight-color: transparent;
+  color: var(--salt-content-primary-foreground);
+  background: transparent;
+  border: none;
+  cursor: var(--salt-cursor-hover);
+  flex: 0;
+}
+.saltToggletipTrigger:focus-visible {
+  outline: var(--salt-focused-outline);
+  outline-offset: var(--salt-size-fixed-100);
+}
+
 /* src/tooltip/Tooltip.css */
 .saltTooltip {
   --tooltip-background: var(--saltTooltip-background, var(--salt-container-primary-background));
@@ -5247,13 +5327,13 @@ label.saltText small,
   box-sizing: border-box;
 }
 .saltCircularProgress-bar {
-  border-color: var(--salt-accent-background);
+  border-color: var(--salt-sentiment-accent-background);
   border-style: var(--salt-borderStyle-solid);
   border-width: var(--salt-size-bar-strong);
 }
 .saltCircularProgress-bufferBorder {
-  border: solid var(--salt-size-fixed-100) var(--salt-accent-background);
-  outline: solid var(--salt-size-fixed-100) var(--salt-accent-background);
+  border: solid var(--salt-size-fixed-100) var(--salt-sentiment-accent-background);
+  outline: solid var(--salt-size-fixed-100) var(--salt-sentiment-accent-background);
   outline-offset: calc(var(--salt-size-bar-strong) * -1);
 }
 .saltCircularProgress-bufferBackground {
@@ -5303,7 +5383,7 @@ label.saltText small,
 .saltCircularProgress-bufferOverlayRight:before,
 .saltCircularProgress-bufferSubOverlay:before {
   content: "";
-  background: var(--salt-accent-background);
+  background: var(--salt-sentiment-accent-background);
   position: absolute;
   right: 0;
   width: var(--salt-size-fixed-100);
@@ -5342,13 +5422,13 @@ label.saltText small,
 .saltLinearProgress-buffer {
   width: 0;
   background: var(--salt-container-primary-background);
-  outline: solid var(--salt-size-fixed-100) var(--salt-accent-background);
+  outline: solid var(--salt-size-fixed-100) var(--salt-sentiment-accent-background);
   z-index: var(--salt-zIndex-default);
   outline-offset: calc(var(--salt-size-fixed-100) * -1);
 }
 .saltLinearProgress-bar {
   width: 100%;
-  background: var(--salt-accent-background);
+  background: var(--salt-sentiment-accent-background);
   z-index: calc(var(--salt-zIndex-default) * 2);
 }
 .saltLinearProgress-track {
@@ -5391,7 +5471,7 @@ label.saltText small,
 /* src/slider/internal/SliderThumb.css */
 .saltSliderThumb {
   align-items: center;
-  background: var(--salt-accent-borderColor);
+  background: var(--salt-sentiment-accent-borderColor);
   cursor: var(--salt-cursor-grab);
   display: flex;
   height: var(--salt-size-selectable);
@@ -5403,7 +5483,6 @@ label.saltText small,
   touch-action: none;
 }
 .saltSliderThumb-disabled {
-  background: var(--salt-accent-borderColor-disabled);
   cursor: var(--salt-cursor-disabled);
   pointer-events: none;
 }
@@ -5489,7 +5568,7 @@ label.saltText small,
 /* src/slider/internal/SliderTrack.css */
 .saltSliderTrack {
   --slider-track-background: var(--salt-sentiment-neutral-track);
-  --slider-track-fill: var(--salt-accent-borderColor);
+  --slider-track-fill: var(--salt-sentiment-accent-borderColor);
   --slider-progressPercentage: 0%;
   --slider-tick-height: calc((var(--salt-size-selectable) - var(--salt-size-bar)) / 2);
   --slider-progressPercentageStart: 0%;
@@ -5502,7 +5581,7 @@ label.saltText small,
   margin-bottom: calc(var(--salt-size-base) / 2);
 }
 .saltSliderTrack-disabled {
-  cursor: var(--salt-cursor-disabled);
+  opacity: 0.4;
 }
 .saltSliderTrack-container {
   align-items: center;
@@ -5544,7 +5623,7 @@ label.saltText small,
   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-fixed-300));
+  width: calc(var(--slider-progressPercentage) - var(--salt-spacing-fixed-300));
 }
 .saltSliderTrack-hasMinTick.saltSliderTrack-rail::before {
   border-bottom-left-radius: unset;
@@ -5553,23 +5632,23 @@ label.saltText small,
   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-fixed-300));
+  width: calc(100% - var(--slider-progressPercentage) - var(--salt-spacing-fixed-300));
 }
 .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-fixed-300));
+  width: calc(var(--slider-progressPercentageStart) - var(--salt-spacing-fixed-300));
 }
 .saltSliderTrack-range .saltSliderTrack-rail::after {
   background: var(--slider-track-background);
-  width: calc(100% - var(--slider-progressPercentageEnd) - var(--salt-size-fixed-300));
+  width: calc(100% - var(--slider-progressPercentageEnd) - var(--salt-spacing-fixed-300));
 }
 .saltSliderTrack-range .saltSliderTrack-rail .saltSliderTrack-fill {
   background: var(--slider-track-fill);
   height: 100%;
-  left: calc(var(--slider-progressPercentageStart) + var(--salt-size-fixed-300));
+  left: calc(var(--slider-progressPercentageStart) + var(--salt-spacing-fixed-300));
   position: absolute;
   width: calc(var(--slider-progressPercentageEnd) - var(--slider-progressPercentageStart) - var(--salt-size-fixed-600));
 }
@@ -5581,10 +5660,6 @@ label.saltText small,
 .saltSliderTrack-dragging .saltSliderTrack-wrapper {
   cursor: var(--salt-cursor-grab-active);
 }
-.saltSliderTrack-disabled {
-  --slider-track-fill: var(--salt-accent-borderColor-disabled);
-  --slider-track-background: var(--salt-sentiment-neutral-track-disabled);
-}
 .saltSliderTrack-ticks {
   top: calc(var(--salt-size-bar) + var(--slider-tick-height));
   position: absolute;
@@ -5763,4 +5838,4 @@ label.saltText small,
   color: var(--salt-status-error-foreground-informative);
 }
 
-/* src/6d38a830-6a81-4708-9979-8b93b2a7c58c.css */
+/* src/42eb285a-fd2e-42e6-a081-05b7d4d76cc3.css */