@salt-ds/core 1.35.0 → 1.37.0

package/css/salt-core.css

@@ -270,48 +270,6 @@
 }
 
 /* src/button/Button.css */
-.saltButton-cta {
-  --button-background: var(--salt-actionable-cta-background);
-  --button-background-active: var(--salt-actionable-cta-background-active);
-  --button-background-disabled: var(--salt-actionable-cta-background-disabled);
-  --button-background-hover: var(--salt-actionable-cta-background-hover);
-  --button-text-color: var(--salt-actionable-cta-foreground);
-  --button-text-color-active: var(--salt-actionable-cta-foreground-active);
-  --button-text-color-disabled: var(--salt-actionable-cta-foreground-disabled);
-  --button-text-color-hover: var(--salt-actionable-cta-foreground-hover);
-  --button-borderColor: var(--salt-actionable-cta-borderColor);
-  --button-borderColor-hover: var(--salt-actionable-cta-borderColor-hover);
-  --button-borderColor-active: var(--salt-actionable-cta-borderColor-active);
-  --button-borderColor-disabled: var(--salt-actionable-cta-borderColor-disabled);
-}
-.saltButton-primary {
-  --button-background: var(--salt-actionable-primary-background);
-  --button-background-active: var(--salt-actionable-primary-background-active);
-  --button-background-disabled: var(--salt-actionable-primary-background-disabled);
-  --button-background-hover: var(--salt-actionable-primary-background-hover);
-  --button-text-color: var(--salt-actionable-primary-foreground);
-  --button-text-color-active: var(--salt-actionable-primary-foreground-active);
-  --button-text-color-disabled: var(--salt-actionable-primary-foreground-disabled);
-  --button-text-color-hover: var(--salt-actionable-primary-foreground-hover);
-  --button-borderColor: var(--salt-actionable-primary-borderColor);
-  --button-borderColor-hover: var(--salt-actionable-primary-borderColor-hover);
-  --button-borderColor-active: var(--salt-actionable-primary-borderColor-active);
-  --button-borderColor-disabled: var(--salt-actionable-primary-borderColor-disabled);
-}
-.saltButton-secondary {
-  --button-background: var(--salt-actionable-secondary-background);
-  --button-background-active: var(--salt-actionable-secondary-background-active);
-  --button-background-disabled: var(--salt-actionable-secondary-background-disabled);
-  --button-background-hover: var(--salt-actionable-secondary-background-hover);
-  --button-text-color: var(--salt-actionable-secondary-foreground);
-  --button-text-color-active: var(--salt-actionable-secondary-foreground-active);
-  --button-text-color-disabled: var(--salt-actionable-secondary-foreground-disabled);
-  --button-text-color-hover: var(--salt-actionable-secondary-foreground-hover);
-  --button-borderColor: var(--salt-actionable-secondary-borderColor);
-  --button-borderColor-hover: var(--salt-actionable-secondary-borderColor-hover);
-  --button-borderColor-active: var(--salt-actionable-secondary-borderColor-active);
-  --button-borderColor-disabled: var(--salt-actionable-secondary-borderColor-disabled);
-}
 .saltButton {
   align-items: var(--saltButton-alignItems, center);
   appearance: none;
@@ -386,6 +344,216 @@
   cursor: var(--saltButton-cursor-disabled, var(--salt-actionable-cursor-disabled));
   border-color: var(--saltButton-borderColor-disabled, var(--button-borderColor-disabled));
 }
+.saltButton-accented.saltButton-solid {
+  --button-text-color: var(--salt-actionable-accented-bold-foreground);
+  --button-text-color-hover: var(--salt-actionable-accented-bold-foreground-hover);
+  --button-text-color-active: var(--salt-actionable-accented-bold-foreground-active);
+  --button-text-color-disabled: var(--salt-actionable-accented-bold-foreground-disabled);
+  --button-background: var(--salt-actionable-accented-bold-background);
+  --button-background-active: var(--salt-actionable-accented-bold-background-active);
+  --button-background-disabled: var(--salt-actionable-accented-bold-background-disabled);
+  --button-background-hover: var(--salt-actionable-accented-bold-background-hover);
+  --button-borderColor: var(--salt-actionable-accented-bold-borderColor);
+  --button-borderColor-hover: var(--salt-actionable-accented-bold-borderColor-hover);
+  --button-borderColor-active: var(--salt-actionable-accented-bold-borderColor-active);
+  --button-borderColor-disabled: var(--salt-actionable-accented-bold-borderColor-disabled);
+}
+.saltButton-accented.saltButton-bordered {
+  --button-text-color: var(--salt-actionable-accented-foreground);
+  --button-text-color-hover: var(--salt-actionable-accented-foreground-hover);
+  --button-text-color-active: var(--salt-actionable-accented-foreground-active);
+  --button-text-color-disabled: var(--salt-actionable-accented-foreground-disabled);
+  --button-background: var(--salt-actionable-accented-background);
+  --button-background-hover: var(--salt-actionable-accented-background-hover);
+  --button-background-active: var(--salt-actionable-accented-background-active);
+  --button-background-disabled: var(--salt-actionable-accented-background-disabled);
+  --button-borderColor: var(--salt-actionable-accented-borderColor);
+  --button-borderColor-hover: var(--salt-actionable-accented-borderColor-hover);
+  --button-borderColor-active: var(--salt-actionable-accented-borderColor-active);
+  --button-borderColor-disabled: var(--salt-actionable-accented-borderColor-disabled);
+}
+.saltButton-accented.saltButton-transparent {
+  --button-text-color: var(--salt-actionable-accented-subtle-foreground);
+  --button-text-color-hover: var(--salt-actionable-accented-subtle-foreground-hover);
+  --button-text-color-active: var(--salt-actionable-accented-subtle-foreground-active);
+  --button-text-color-disabled: var(--salt-actionable-accented-subtle-foreground-disabled);
+  --button-background: var(--salt-actionable-accented-subtle-background);
+  --button-background-hover: var(--salt-actionable-accented-subtle-background-hover);
+  --button-background-active: var(--salt-actionable-accented-subtle-background-active);
+  --button-background-disabled: var(--salt-actionable-accented-subtle-background-disabled);
+  --button-borderColor: var(--salt-actionable-accented-subtle-borderColor);
+  --button-borderColor-hover: var(--salt-actionable-accented-subtle-borderColor-hover);
+  --button-borderColor-active: var(--salt-actionable-accented-subtle-borderColor-active);
+  --button-borderColor-disabled: var(--salt-actionable-accented-subtle-borderColor-disabled);
+}
+.saltButton-neutral.saltButton-solid {
+  --button-text-color: var(--salt-actionable-bold-foreground);
+  --button-text-color-hover: var(--salt-actionable-bold-foreground-hover);
+  --button-text-color-active: var(--salt-actionable-bold-foreground-active);
+  --button-text-color-disabled: var(--salt-actionable-bold-foreground-disabled);
+  --button-background: var(--salt-actionable-bold-background);
+  --button-background-hover: var(--salt-actionable-bold-background-hover);
+  --button-background-active: var(--salt-actionable-bold-background-active);
+  --button-background-disabled: var(--salt-actionable-bold-background-disabled);
+  --button-borderColor: var(--salt-actionable-bold-borderColor);
+  --button-borderColor-hover: var(--salt-actionable-bold-borderColor-hover);
+  --button-borderColor-active: var(--salt-actionable-bold-borderColor-active);
+  --button-borderColor-disabled: var(--salt-actionable-bold-borderColor-disabled);
+}
+.saltButton-neutral.saltButton-bordered {
+  --button-text-color: var(--salt-actionable-foreground);
+  --button-text-color-hover: var(--salt-actionable-foreground-hover);
+  --button-text-color-active: var(--salt-actionable-foreground-active);
+  --button-text-color-disabled: var(--salt-actionable-foreground-disabled);
+  --button-background: var(--salt-actionable-background);
+  --button-background-hover: var(--salt-actionable-background-hover);
+  --button-background-active: var(--salt-actionable-background-active);
+  --button-background-disabled: var(--salt-actionable-background-disabled);
+  --button-borderColor: var(--salt-actionable-borderColor);
+  --button-borderColor-hover: var(--salt-actionable-borderColor-hover);
+  --button-borderColor-active: var(--salt-actionable-borderColor-active);
+  --button-borderColor-disabled: var(--salt-actionable-borderColor-disabled);
+}
+.saltButton-neutral.saltButton-transparent {
+  --button-text-color: var(--salt-actionable-subtle-foreground);
+  --button-text-color-hover: var(--salt-actionable-subtle-foreground-hover);
+  --button-text-color-active: var(--salt-actionable-subtle-foreground-active);
+  --button-text-color-disabled: var(--salt-actionable-subtle-foreground-disabled);
+  --button-background: var(--salt-actionable-subtle-background);
+  --button-background-hover: var(--salt-actionable-subtle-background-hover);
+  --button-background-active: var(--salt-actionable-subtle-background-active);
+  --button-background-disabled: var(--salt-actionable-subtle-background-disabled);
+  --button-borderColor: var(--salt-actionable-subtle-borderColor);
+  --button-borderColor-hover: var(--salt-actionable-subtle-borderColor-hover);
+  --button-borderColor-active: var(--salt-actionable-subtle-borderColor-active);
+  --button-borderColor-disabled: var(--salt-actionable-subtle-borderColor-disabled);
+}
+.saltButton-negative.saltButton-solid {
+  --button-text-color: var(--salt-actionable-negative-bold-foreground);
+  --button-text-color-hover: var(--salt-actionable-negative-bold-foreground-hover);
+  --button-text-color-active: var(--salt-actionable-negative-bold-foreground-active);
+  --button-text-color-disabled: var(--salt-actionable-negative-bold-foreground-disabled);
+  --button-background: var(--salt-actionable-negative-bold-background);
+  --button-background-hover: var(--salt-actionable-negative-bold-background-hover);
+  --button-background-active: var(--salt-actionable-negative-bold-background-active);
+  --button-background-disabled: var(--salt-actionable-negative-bold-background-disabled);
+  --button-borderColor: var(--salt-actionable-negative-bold-borderColor);
+  --button-borderColor-hover: var(--salt-actionable-negative-bold-borderColor-hover);
+  --button-borderColor-active: var(--salt-actionable-negative-bold-borderColor-active);
+  --button-borderColor-disabled: var(--salt-actionable-negative-bold-borderColor-disabled);
+}
+.saltButton-negative.saltButton-bordered {
+  --button-text-color: var(--salt-actionable-negative-foreground);
+  --button-text-color-hover: var(--salt-actionable-negative-foreground-hover);
+  --button-text-color-active: var(--salt-actionable-negative-foreground-active);
+  --button-text-color-disabled: var(--salt-actionable-negative-foreground-disabled);
+  --button-background: var(--salt-actionable-negative-background);
+  --button-background-hover: var(--salt-actionable-negative-background-hover);
+  --button-background-active: var(--salt-actionable-negative-background-active);
+  --button-background-disabled: var(--salt-actionable-negative-background-disabled);
+  --button-borderColor: var(--salt-actionable-negative-borderColor);
+  --button-borderColor-hover: var(--salt-actionable-negative-borderColor-hover);
+  --button-borderColor-active: var(--salt-actionable-negative-borderColor-active);
+  --button-borderColor-disabled: var(--salt-actionable-negative-borderColor-disabled);
+}
+.saltButton-negative.saltButton-transparent {
+  --button-text-color: var(--salt-actionable-negative-subtle-foreground);
+  --button-text-color-hover: var(--salt-actionable-negative-subtle-foreground-hover);
+  --button-text-color-active: var(--salt-actionable-negative-subtle-foreground-active);
+  --button-text-color-disabled: var(--salt-actionable-negative-subtle-foreground-disabled);
+  --button-background: var(--salt-actionable-negative-subtle-background);
+  --button-background-hover: var(--salt-actionable-negative-subtle-background-hover);
+  --button-background-active: var(--salt-actionable-negative-subtle-background-active);
+  --button-background-disabled: var(--salt-actionable-negative-subtle-background-disabled);
+  --button-borderColor: var(--salt-actionable-negative-subtle-borderColor);
+  --button-borderColor-hover: var(--salt-actionable-negative-subtle-borderColor-hover);
+  --button-borderColor-active: var(--salt-actionable-negative-subtle-borderColor-active);
+  --button-borderColor-disabled: var(--salt-actionable-negative-subtle-borderColor-disabled);
+}
+.saltButton-positive.saltButton-solid {
+  --button-text-color: var(--salt-actionable-positive-bold-foreground);
+  --button-text-color-hover: var(--salt-actionable-positive-bold-foreground-hover);
+  --button-text-color-active: var(--salt-actionable-positive-bold-foreground-active);
+  --button-text-color-disabled: var(--salt-actionable-positive-bold-foreground-disabled);
+  --button-background: var(--salt-actionable-positive-bold-background);
+  --button-background-hover: var(--salt-actionable-positive-bold-background-hover);
+  --button-background-active: var(--salt-actionable-positive-bold-background-active);
+  --button-background-disabled: var(--salt-actionable-positive-bold-background-disabled);
+  --button-borderColor: var(--salt-actionable-positive-bold-borderColor);
+  --button-borderColor-hover: var(--salt-actionable-positive-bold-borderColor-hover);
+  --button-borderColor-active: var(--salt-actionable-positive-bold-borderColor-active);
+  --button-borderColor-disabled: var(--salt-actionable-positive-bold-borderColor-disabled);
+}
+.saltButton-positive.saltButton-bordered {
+  --button-text-color: var(--salt-actionable-positive-foreground);
+  --button-text-color-hover: var(--salt-actionable-positive-foreground-hover);
+  --button-text-color-active: var(--salt-actionable-positive-foreground-active);
+  --button-text-color-disabled: var(--salt-actionable-positive-foreground-disabled);
+  --button-background: var(--salt-actionable-positive-background);
+  --button-background-hover: var(--salt-actionable-positive-background-hover);
+  --button-background-active: var(--salt-actionable-positive-background-active);
+  --button-background-disabled: var(--salt-actionable-positive-background-disabled);
+  --button-borderColor: var(--salt-actionable-positive-borderColor);
+  --button-borderColor-hover: var(--salt-actionable-positive-borderColor-hover);
+  --button-borderColor-active: var(--salt-actionable-positive-borderColor-active);
+  --button-borderColor-disabled: var(--salt-actionable-positive-borderColor-disabled);
+}
+.saltButton-positive.saltButton-transparent {
+  --button-text-color: var(--salt-actionable-positive-subtle-foreground);
+  --button-text-color-hover: var(--salt-actionable-positive-subtle-foreground-hover);
+  --button-text-color-active: var(--salt-actionable-positive-subtle-foreground-active);
+  --button-text-color-disabled: var(--salt-actionable-positive-subtle-foreground-disabled);
+  --button-background: var(--salt-actionable-positive-subtle-background);
+  --button-background-hover: var(--salt-actionable-positive-subtle-background-hover);
+  --button-background-active: var(--salt-actionable-positive-subtle-background-active);
+  --button-background-disabled: var(--salt-actionable-positive-subtle-background-disabled);
+  --button-borderColor: var(--salt-actionable-positive-subtle-borderColor);
+  --button-borderColor-hover: var(--salt-actionable-positive-subtle-borderColor-hover);
+  --button-borderColor-active: var(--salt-actionable-positive-subtle-borderColor-active);
+  --button-borderColor-disabled: var(--salt-actionable-positive-subtle-borderColor-disabled);
+}
+.saltButton-caution.saltButton-solid {
+  --button-text-color: var(--salt-actionable-caution-bold-foreground);
+  --button-text-color-hover: var(--salt-actionable-caution-bold-foreground-hover);
+  --button-text-color-active: var(--salt-actionable-caution-bold-foreground-active);
+  --button-text-color-disabled: var(--salt-actionable-caution-bold-foreground-disabled);
+  --button-background: var(--salt-actionable-caution-bold-background);
+  --button-background-hover: var(--salt-actionable-caution-bold-background-hover);
+  --button-background-active: var(--salt-actionable-caution-bold-background-active);
+  --button-background-disabled: var(--salt-actionable-caution-bold-background-disabled);
+  --button-borderColor: var(--salt-actionable-caution-bold-borderColor);
+  --button-borderColor-hover: var(--salt-actionable-caution-bold-borderColor-hover);
+  --button-borderColor-active: var(--salt-actionable-caution-bold-borderColor-active);
+  --button-borderColor-disabled: var(--salt-actionable-caution-bold-borderColor-disabled);
+}
+.saltButton-caution.saltButton-bordered {
+  --button-text-color: var(--salt-actionable-caution-foreground);
+  --button-text-color-hover: var(--salt-actionable-caution-foreground-hover);
+  --button-text-color-active: var(--salt-actionable-caution-foreground-active);
+  --button-text-color-disabled: var(--salt-actionable-caution-foreground-disabled);
+  --button-background: var(--salt-actionable-caution-background);
+  --button-background-hover: var(--salt-actionable-caution-background-hover);
+  --button-background-active: var(--salt-actionable-caution-background-active);
+  --button-background-disabled: var(--salt-actionable-caution-background-disabled);
+  --button-borderColor: var(--salt-actionable-caution-borderColor);
+  --button-borderColor-hover: var(--salt-actionable-caution-borderColor-hover);
+  --button-borderColor-active: var(--salt-actionable-caution-borderColor-active);
+  --button-borderColor-disabled: var(--salt-actionable-caution-borderColor-disabled);
+}
+.saltButton-caution.saltButton-transparent {
+  --button-text-color: var(--salt-actionable-caution-subtle-foreground);
+  --button-text-color-hover: var(--salt-actionable-caution-subtle-foreground-hover);
+  --button-text-color-active: var(--salt-actionable-caution-subtle-foreground-active);
+  --button-text-color-disabled: var(--salt-actionable-caution-subtle-foreground-disabled);
+  --button-background: var(--salt-actionable-caution-subtle-background);
+  --button-background-hover: var(--salt-actionable-caution-subtle-background-hover);
+  --button-background-active: var(--salt-actionable-caution-subtle-background-active);
+  --button-background-disabled: var(--salt-actionable-caution-subtle-background-disabled);
+  --button-borderColor: var(--salt-actionable-caution-subtle-borderColor);
+  --button-borderColor-hover: var(--salt-actionable-caution-subtle-borderColor-hover);
+  --button-borderColor-active: var(--salt-actionable-caution-subtle-borderColor-active);
+  --button-borderColor-disabled: var(--salt-actionable-caution-subtle-borderColor-disabled);
+}
 
 /* src/card/Card.css */
 .saltCard {
@@ -396,21 +564,20 @@
   transition: box-shadow var(--salt-duration-instant) ease-in-out;
   box-sizing: border-box;
   border-radius: var(--saltCard-borderRadius, var(--salt-palette-corner, 0));
+  overflow: hidden;
+  --card-accent-color: var(--salt-accent-background);
 }
 .saltCard-primary {
   background: var(--saltCard-background, var(--salt-container-primary-background));
   border-color: var(--salt-container-primary-borderColor);
-  --card-accent-color: var(--salt-container-primary-borderColor);
 }
 .saltCard-secondary {
   background: var(--saltCard-background, var(--salt-container-secondary-background));
   border-color: var(--salt-container-secondary-borderColor);
-  --card-accent-color: var(--salt-container-secondary-borderColor);
 }
 .saltCard-tertiary {
   background: var(--saltCard-background, var(--salt-container-tertiary-background));
   border-color: var(--salt-container-tertiary-borderColor);
-  --card-accent-color: var(--salt-container-tertiary-borderColor);
 }
 .saltCard-accent::after {
   content: "";
@@ -449,9 +616,17 @@ a:focus .saltCard-interactable,
 .saltCard-interactable:hover {
   box-shadow: var(--saltCard-boxShadow-hover, var(--salt-overlayable-shadow-hover));
   cursor: var(--saltCard-cursor-hover, var(--salt-selectable-cursor-hover));
+  border-color: var(--salt-actionable-accented-borderColor-hover);
   position: relative;
 }
+@media (hover: hover) {
+  .saltCard-hoverable:hover {
+    box-shadow: var(--saltCard-boxShadow-hover, var(--salt-overlayable-shadow-hover));
+    border-color: var(--salt-actionable-accented-borderColor-hover);
+  }
+}
 .saltCard-interactable:active {
+  border-color: var(--salt-actionable-accented-borderColor-active);
   box-shadow: var(--saltCard-boxShadow-active, var(--salt-overlayable-shadow-hover));
   outline: var(--salt-focused-outline);
   outline-offset: var(--salt-focused-outlineOffset);
@@ -472,12 +647,6 @@ a:focus .saltCard-interactable.saltCard-disabled {
 .saltCard-disabled div {
   pointer-events: none;
 }
-@media (hover: hover) {
-  .saltCard-hoverable:hover {
-    box-shadow: var(--saltCard-boxShadow-hover, var(--salt-overlayable-shadow-hover));
-    --card-accent-color: var(--salt-selectable-foreground-hover);
-  }
-}
 
 /* src/checkbox/Checkbox.css */
 .saltCheckbox {
@@ -500,7 +669,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
 }
 .saltCheckbox-input,
 .saltCheckboxIcon {
-  margin-top: calc((var(--salt-text-lineHeight) - var(--salt-size-selectable)) / 2);
+  margin: calc((var(--salt-text-lineHeight) - var(--salt-size-selectable)) / 2) 0;
   box-sizing: border-box;
 }
 .saltCheckbox-input:focus-visible + .saltCheckboxIcon {
@@ -525,7 +694,6 @@ a:focus .saltCard-interactable.saltCard-disabled {
 }
 .saltCheckbox-input {
   cursor: inherit;
-  margin: 0;
   opacity: 0;
   padding: 0;
   position: absolute;
@@ -574,6 +742,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
   position: relative;
   --saltIcon-size: 100%;
   display: flex;
+  clip-path: border-box;
   box-sizing: border-box;
 }
 .saltCheckbox:hover .saltCheckboxIcon,
@@ -763,7 +932,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
   padding-left: var(--salt-spacing-100);
   border-bottom: var(--salt-size-border) var(--salt-separable-borderStyle) transparent;
   box-shadow: none;
-  flex: 1;
+  flex: 1 1 auto;
 }
 .saltDialogContent-scroll {
   border-bottom: var(--salt-size-border) var(--salt-separable-borderStyle) var(--salt-separable-tertiary-borderColor);
@@ -916,15 +1085,6 @@ a:focus .saltCard-interactable.saltCard-disabled {
 }
 
 /* src/dropdown/Dropdown.css */
-.saltDropdown {
-  --dropdown-border: none;
-  --dropdown-borderColor: var(--salt-editable-borderColor);
-  --dropdown-color: var(--salt-content-primary-foreground);
-  --dropdown-cursor: var(--salt-selectable-cursor-hover);
-  --dropdown-borderStyle: var(--salt-editable-borderStyle);
-  --dropdown-outlineColor: var(--salt-focused-outlineColor);
-  --dropdown-borderWidth: var(--salt-size-border);
-}
 .saltDropdown {
   all: unset;
   box-sizing: border-box;
@@ -949,32 +1109,63 @@ a:focus .saltCard-interactable.saltCard-disabled {
   overflow: hidden;
 }
 .saltDropdown:hover {
-  --dropdown-borderColor: var(--salt-editable-borderColor-hover);
-  --dropdown-borderStyle: var(--salt-editable-borderStyle-hover);
-  --dropdown-background: var(--saltDropdown-background-hover, var(--dropdown-background-hover));
+  background: var(--saltDropdown-background-hover, var(--dropdown-background-hover));
+  cursor: var(--salt-selectable-cursor-hover);
 }
-.saltDropdown:active {
-  --dropdown-background: var(--saltDropdown-background-active, var(--dropdown-background-active));
-  --dropdown-borderColor: var(--salt-editable-borderColor-active);
-  --dropdown-borderWidth: var(--salt-editable-borderWidth-active);
-  --dropdown-borderStyle: var(--salt-editable-borderStyle-active);
+.saltDropdown-bordered.saltDropdown {
+  border: var(--salt-size-border) var(--salt-editable-borderStyle) var(--dropdown-borderColor);
 }
-.saltDropdown:focus {
-  outline: var(--salt-focused-outline);
-  --dropdown-borderColor: var(--salt-editable-borderColor-active);
-  --dropdown-borderWidth: var(--salt-editable-borderWidth-active);
-  --dropdown-borderStyle: var(--salt-editable-borderStyle-active);
+.saltDropdown-bordered.saltDropdown:hover {
+  border-style: var(--salt-editable-borderStyle-hover);
+  border-color: var(--dropdown-borderColor-hover);
 }
-.saltDropdown-content {
-  flex: 1;
-  max-width: 100%;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  text-wrap: nowrap;
+.saltDropdown-bordered.saltDropdown:focus,
+.saltDropdown-bordered.saltDropdown:focus:hover {
+  border-style: var(--salt-editable-borderStyle-active);
+  border-color: var(--dropdown-borderColor-active);
 }
-.saltDropdown-placeholder {
-  color: var(--salt-content-secondary-foreground);
-  font-weight: var(--salt-text-fontWeight-small);
+.saltDropdown-bordered.saltDropdown[aria-readonly=true],
+.saltDropdown-bordered.saltDropdown[aria-readonly=true]:hover {
+  border-style: var(--salt-editable-borderStyle-readonly);
+  border-color: var(--salt-editable-borderColor-readonly);
+}
+.saltDropdown-bordered.saltDropdown-disabled,
+.saltDropdown-bordered.saltDropdown-disabled:hover {
+  border-style: var(--salt-editable-borderStyle-disabled);
+  border-color: var(--salt-editable-borderColor-disabled);
+}
+.saltDropdown-activationIndicator {
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  position: absolute;
+  border-bottom: var(--salt-size-border) var(--salt-editable-borderStyle) var(--dropdown-borderColor);
+}
+.saltDropdown:hover .saltDropdown-activationIndicator {
+  border-bottom-style: var(--salt-editable-borderStyle-hover);
+  border-bottom-color: var(--dropdown-borderColor-hover);
+}
+.saltDropdown:focus .saltDropdown-activationIndicator,
+.saltDropdown:focus:hover .saltDropdown-activationIndicator {
+  border-bottom: var(--salt-size-border-strong) var(--salt-editable-borderStyle-active) var(--dropdown-borderColor-active);
+}
+.saltDropdown[aria-readonly=true] .saltDropdown-activationIndicator,
+.saltDropdown[aria-readonly=true]:hover .saltDropdown-activationIndicator {
+  border-bottom-style: var(--salt-editable-borderStyle-readonly);
+  border-bottom-color: var(--salt-editable-borderColor-readonly);
+}
+.saltDropdown-disabled .saltDropdown-activationIndicator,
+.saltDropdown-disabled:hover .saltDropdown-activationIndicator {
+  border-bottom-style: var(--salt-editable-borderStyle-disabled);
+  border-bottom-color: var(--salt-editable-borderColor-disabled);
+}
+.saltDropdown-bordered .saltDropdown-activationIndicator,
+.saltDropdown-bordered.saltDropdown[aria-readonly=true] .saltDropdown-activationIndicator,
+.saltDropdown-bordered.saltDropdown-disabled:hover .saltDropdown-activationIndicator {
+  border-bottom-width: 0;
+}
+.saltDropdown-bordered.saltDropdown:focus .saltDropdown-activationIndicator {
+  border-bottom-width: calc(var(--salt-size-border-strong) - var(--salt-size-border));
 }
 .saltDropdown-primary {
   --dropdown-background: var(--salt-editable-primary-background);
@@ -982,6 +1173,10 @@ a:focus .saltCard-interactable.saltCard-disabled {
   --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-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-secondary {
   --dropdown-background: var(--salt-editable-secondary-background);
@@ -989,85 +1184,72 @@ a:focus .saltCard-interactable.saltCard-disabled {
   --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-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:disabled,
-.saltDropdown:disabled:active,
-.saltDropdown:disabled:hover,
-.saltDropdown:disabled:focus {
-  --dropdown-background: var(--dropdown-background-disabled);
-  --dropdown-borderColor: var(--salt-editable-borderColor-disabled);
-  --dropdown-color: var(--salt-content-primary-foreground-disabled);
-  --dropdown-cursor: var(--salt-selectable-cursor-disabled);
-  --dropdown-borderWidth: var(--salt-size-border);
-}
-.saltDropdown[aria-readonly=true] {
-  --dropdown-borderColor: var(--salt-editable-borderColor-readonly);
-  --dropdown-color: var(--salt-content-primary-foreground);
-  --dropdown-cursor: var(--salt-selectable-cursor-readonly);
-  --dropdown-background: var(--dropdown-background-readonly);
-  --dropdown-borderWidth: var(--salt-size-border);
-}
-.saltDropdown[aria-readonly=true]:hover,
-.saltDropdown[aria-readonly=true]:focus {
-  --dropdown-background: var(--dropdown-background-readonly);
-  --dropdown-borderColor: var(--salt-editable-borderColor-readonly);
-}
-.saltDropdown-error,
-.saltDropdown-error:hover,
-.saltDropdown-error:focus {
+.saltDropdown-error {
   --dropdown-background: var(--salt-status-error-background);
-  --dropdown-borderColor: var(--salt-status-error-borderColor);
   --dropdown-background-active: var(--salt-status-error-background);
   --dropdown-background-hover: var(--salt-status-error-background);
   --dropdown-background-readonly: var(--salt-status-error-background);
-  outline-color: var(--salt-status-error-borderColor);
+  --dropdown-borderColor: var(--salt-status-error-borderColor);
+  --dropdown-borderColor-active: var(--salt-status-error-borderColor);
+  --dropdown-borderColor-hover: var(--salt-status-error-borderColor);
+  --dropdown-outlineColor: var(--salt-status-error-borderColor);
 }
-.saltDropdown-warning,
-.saltDropdown-warning:hover,
-.saltDropdown-warning:focus {
+.saltDropdown-warning {
   --dropdown-background: var(--salt-status-warning-background);
-  --dropdown-borderColor: var(--salt-status-warning-borderColor);
   --dropdown-background-active: var(--salt-status-warning-background);
   --dropdown-background-hover: var(--salt-status-warning-background);
   --dropdown-background-readonly: var(--salt-status-warning-background);
-  outline-color: var(--salt-status-warning-borderColor);
+  --dropdown-borderColor: var(--salt-status-warning-borderColor);
+  --dropdown-borderColor-active: var(--salt-status-warning-borderColor);
+  --dropdown-borderColor-hover: var(--salt-status-warning-borderColor);
+  --dropdown-outlineColor: var(--salt-status-warning-borderColor);
 }
-.saltDropdown-success,
-.saltDropdown-success:hover,
-.saltDropdown-success:focus {
+.saltDropdown-success {
   --dropdown-background: var(--salt-status-success-background);
-  --dropdown-borderColor: var(--salt-status-success-borderColor);
   --dropdown-background-active: var(--salt-status-success-background);
   --dropdown-background-hover: var(--salt-status-success-background);
   --dropdown-background-readonly: var(--salt-status-success-background);
-  outline-color: var(--salt-status-success-borderColor);
+  --dropdown-borderColor: var(--salt-status-success-borderColor);
+  --dropdown-borderColor-active: var(--salt-status-success-borderColor);
+  --dropdown-borderColor-hover: var(--salt-status-success-borderColor);
+  --dropdown-outlineColor: var(--salt-status-success-borderColor);
 }
-.saltDropdown-activationIndicator {
-  left: 0;
-  bottom: 0;
-  width: 100%;
-  position: absolute;
-  border-bottom: var(--dropdown-borderWidth) var(--dropdown-borderStyle) var(--dropdown-borderColor);
+.saltDropdown:focus,
+.saltDropdown:focus:hover {
+  background: var(--dropdown-background-active);
+  cursor: var(--salt-selectable-cursor-hover);
+  outline: var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--dropdown-outlineColor);
 }
-.saltDropdown-bordered {
-  --dropdown-border: var(--salt-size-border) var(--salt-container-borderStyle) var(--dropdown-borderColor);
-  --dropdown-borderWidth: 0;
+.saltDropdown.saltDropdown[aria-readonly=true] {
+  background: var(--dropdown-background-readonly);
+  cursor: var(--salt-selectable-cursor-readonly);
 }
-.saltDropdown-bordered.saltDropdown:focus,
-.saltDropdown-bordered:active {
-  --dropdown-borderWidth: var(--salt-editable-borderWidth-active);
+.saltDropdown.saltDropdown:disabled,
+.saltDropdown.saltDropdown:disabled:hover {
+  background: var(--dropdown-background-disabled);
+  cursor: var(--salt-selectable-cursor-disabled);
+  color: var(--salt-content-primary-foreground-disabled);
 }
-.saltDropdown-bordered[aria-readonly=true],
-.saltDropdown-bordered[aria-readonly=true]:hover,
-.saltDropdown[aria-readonly=true]:focus,
-.saltDropdown-bordered.saltDropdown:disabled,
-.saltDropdown-bordered.saltDropdown:disabled:hover {
-  --dropdown-borderWidth: 0;
+.saltDropdown-content {
+  flex: 1;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  text-wrap: nowrap;
+}
+.saltDropdown-placeholder {
+  color: var(--salt-content-secondary-foreground);
+  font-weight: var(--salt-text-fontWeight-small);
 }
 
 /* src/file-drop-zone/FileDropZone.css */
 .saltFileDropZone {
-  color: var(--saltFileDropZone-text-color, var(--salt-text-primary-foreground));
+  color: var(--saltFileDropZone-text-color, var(--salt-content-primary-foreground));
   display: inline-flex;
   background: var(--saltFileDropZone-background, var(--salt-container-primary-background));
   text-align: center;
@@ -1311,21 +1493,16 @@ a:focus .saltCard-interactable.saltCard-disabled {
 
 /* src/input/Input.css */
 .saltInput {
-  --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(--saltInput-background, var(--input-background));
-  border: var(--input-border);
   border-radius: var(--salt-palette-corner-weak, 0);
   color: var(--saltInput-color, var(--salt-content-primary-foreground));
   display: inline-flex;
   font-family: var(--salt-text-fontFamily);
   font-size: var(--saltInput-fontSize, var(--salt-text-fontSize));
-  height: var(--saltInput-height, var(--salt-size-base));
   line-height: var(--saltInput-lineHeight, var(--salt-text-lineHeight));
+  letter-spacing: var(--salt-text-letterSpacing);
+  height: var(--saltInput-height, var(--salt-size-base));
   min-height: var(--saltInput-minHeight, var(--salt-size-base));
   min-width: var(--saltInput-minWidth, 4em);
   padding-left: var(--saltInput-paddingLeft, var(--salt-spacing-100));
@@ -1336,17 +1513,63 @@ a:focus .saltCard-interactable.saltCard-disabled {
   overflow: hidden;
 }
 .saltInput:hover {
-  --input-borderStyle: var(--salt-editable-borderStyle-hover);
-  --input-borderColor: var(--salt-editable-borderColor-hover);
   background: var(--saltInput-background-hover, var(--input-background-hover));
   cursor: var(--salt-editable-cursor-hover);
 }
-.saltInput:active {
-  --input-borderColor: var(--salt-editable-borderColor-active);
-  --input-borderStyle: var(--salt-editable-borderStyle-active);
-  --input-borderWidth: var(--salt-editable-borderWidth-active);
-  background: var(--saltInput-background-active, var(--input-background-active));
-  cursor: var(--salt-editable-cursor-active);
+.saltInput-bordered.saltInput {
+  border: var(--salt-size-border) var(--salt-editable-borderStyle) var(--input-borderColor);
+}
+.saltInput-bordered.saltInput:hover {
+  border-style: var(--salt-editable-borderStyle-hover);
+  border-color: var(--input-borderColor-hover);
+}
+.saltInput-bordered.saltInput-focused,
+.saltInput-bordered.saltInput-focused:hover {
+  border-style: var(--salt-editable-borderStyle-active);
+  border-color: var(--input-borderColor-active);
+}
+.saltInput-bordered.saltInput-readOnly,
+.saltInput-bordered.saltInput-readOnly:hover {
+  border-style: var(--salt-editable-borderStyle-readonly);
+  border-color: var(--salt-editable-borderColor-readonly);
+}
+.saltInput-bordered.saltInput-disabled,
+.saltInput-bordered.saltInput-disabled:hover {
+  border-style: var(--salt-editable-borderStyle-disabled);
+  border-color: var(--salt-editable-borderColor-disabled);
+}
+.saltInput-activationIndicator {
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  position: absolute;
+  border-bottom: var(--salt-size-border) var(--salt-editable-borderStyle) var(--input-borderColor);
+}
+.saltInput:hover .saltInput-activationIndicator {
+  border-bottom-style: var(--salt-editable-borderStyle-hover);
+  border-bottom-color: var(--input-borderColor-hover);
+}
+.saltInput-focused .saltInput-activationIndicator,
+.saltInput-focused:hover .saltInput-activationIndicator {
+  border-bottom: var(--salt-size-border-strong) var(--salt-editable-borderStyle-active) var(--input-borderColor-active);
+}
+.saltInput-readOnly .saltInput-activationIndicator,
+.saltInput-readOnly:hover .saltInput-activationIndicator {
+  border-bottom-style: var(--salt-editable-borderStyle-readonly);
+  border-bottom-color: var(--salt-editable-borderColor-readonly);
+}
+.saltInput-disabled .saltInput-activationIndicator,
+.saltInput-disabled:hover .saltInput-activationIndicator {
+  border-bottom-style: var(--salt-editable-borderStyle-disabled);
+  border-bottom-color: var(--salt-editable-borderColor-disabled);
+}
+.saltInput-bordered .saltInput-activationIndicator,
+.saltInput-bordered.saltInput-readOnly .saltInput-activationIndicator,
+.saltInput-bordered.saltInput-disabled:hover .saltInput-activationIndicator {
+  border-bottom-width: 0;
+}
+.saltInput-bordered.saltInput-focused .saltInput-activationIndicator {
+  border-bottom-width: calc(var(--salt-size-border-strong) - var(--salt-size-border));
 }
 .saltInput-primary {
   --input-background: var(--salt-editable-primary-background);
@@ -1354,6 +1577,10 @@ a:focus .saltCard-interactable.saltCard-disabled {
   --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);
 }
 .saltInput-secondary {
   --input-background: var(--salt-editable-secondary-background);
@@ -1361,113 +1588,57 @@ a:focus .saltCard-interactable.saltCard-disabled {
   --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);
 }
-.saltInput-error,
-.saltInput-error:hover {
+.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);
+  --input-borderColor-hover: var(--salt-status-error-borderColor);
   --input-outlineColor: var(--salt-status-error-borderColor);
-  --input-background-readonly: var(--salt-status-error-background);
 }
-.saltInput-warning,
-.saltInput-warning:hover {
+.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);
+  --input-borderColor-hover: var(--salt-status-warning-borderColor);
   --input-outlineColor: var(--salt-status-warning-borderColor);
-  --input-background-readonly: var(--salt-status-warning-background);
 }
-.saltInput-success,
-.saltInput-success:hover {
+.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);
+  --input-borderColor-hover: var(--salt-status-success-borderColor);
   --input-outlineColor: var(--salt-status-success-borderColor);
-  --input-background-readonly: var(--salt-status-success-background);
 }
-.saltInput-input {
-  background: none;
-  border: none;
-  box-sizing: content-box;
-  color: inherit;
-  cursor: inherit;
-  display: block;
-  flex: 1;
-  font: inherit;
-  height: 100%;
-  letter-spacing: var(--saltInput-letterSpacing, 0);
-  margin: 0;
-  min-width: 0;
-  overflow: hidden;
-  padding: 0;
-  text-align: var(--input-textAlign);
-  width: 100%;
-}
-.saltInput-input:focus {
-  outline: none;
-}
-.saltInput-input::selection {
-  background: var(--salt-content-foreground-highlight);
-}
-.saltInput-input::placeholder {
-  color: var(--salt-content-secondary-foreground);
-  font-weight: var(--salt-text-fontWeight-small);
-}
-.saltInput-focused {
-  --input-borderColor: var(--input-outlineColor);
-  --input-borderWidth: var(--salt-editable-borderWidth-active);
+.saltInput-focused,
+.saltInput-focused:hover {
+  background: var(--saltInput-background-active, var(--input-background-active));
+  cursor: var(--salt-editable-cursor-active);
   outline: var(--saltInput-outline, var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--input-outlineColor));
 }
 .saltInput.saltInput-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);
 }
-.saltInput-focused.saltInput-disabled {
-  --input-borderWidth: var(--salt-size-border);
-  outline: none;
-}
-.saltInput-focused.saltInput-readOnly {
-  --input-borderWidth: var(--salt-size-border);
-}
-.saltInput-disabled .saltInput-input::selection {
-  background: none;
-}
 .saltInput.saltInput-disabled,
-.saltInput.saltInput-disabled:hover,
-.saltInput.saltInput-disabled:active {
-  --input-borderColor: var(--salt-editable-borderColor-disabled);
-  --input-borderStyle: var(--salt-editable-borderStyle-disabled);
-  --input-borderWidth: var(--salt-size-border);
+.saltInput.saltInput-disabled:hover {
   background: var(--input-background-disabled);
   cursor: var(--salt-editable-cursor-disabled);
   color: var(--saltInput-color-disabled, var(--salt-content-primary-foreground-disabled));
 }
-.saltInput-activationIndicator {
-  left: 0;
-  bottom: 0;
-  width: 100%;
-  position: absolute;
-  border-bottom: var(--input-borderWidth) var(--input-borderStyle) var(--input-borderColor);
-}
-.saltInput.saltInput-bordered {
-  --input-border: var(--salt-size-border) var(--salt-container-borderStyle) var(--input-borderColor);
-  --input-borderWidth: 0;
-}
-.saltInput-bordered.saltInput-focused,
-.saltInput-bordered:active {
-  --input-borderWidth: var(--salt-editable-borderWidth-active);
-}
-.saltInput-bordered.saltInput-readOnly,
-.saltInput-bordered.saltInput-disabled:hover {
-  --input-borderWidth: 0;
-}
 .saltInput-startAdornmentContainer {
   align-items: center;
   display: inline-flex;
@@ -1501,6 +1672,37 @@ a:focus .saltCard-interactable.saltCard-disabled {
   --saltButton-height: calc(var(--salt-size-base) - var(--salt-spacing-100));
   --saltButton-borderRadius: var(--salt-palette-corner-weaker);
 }
+.saltInput-input {
+  background: none;
+  border: none;
+  box-sizing: content-box;
+  color: inherit;
+  cursor: inherit;
+  display: block;
+  flex: 1;
+  font: inherit;
+  height: 100%;
+  letter-spacing: var(--saltInput-letterSpacing, 0);
+  margin: 0;
+  min-width: 0;
+  overflow: hidden;
+  padding: 0;
+  text-align: var(--input-textAlign, left);
+  width: 100%;
+}
+.saltInput-input:focus {
+  outline: none;
+}
+.saltInput-input::selection {
+  background: var(--salt-content-foreground-highlight);
+}
+.saltInput-input::placeholder {
+  color: var(--salt-content-secondary-foreground);
+  font-weight: var(--salt-text-fontWeight-small);
+}
+.saltInput-disabled .saltInput-input::selection {
+  background: none;
+}
 
 /* src/interactable-card/InteractableCard.css */
 .saltInteractableCard {
@@ -1512,21 +1714,20 @@ a:focus .saltCard-interactable.saltCard-disabled {
   position: relative;
   text-align: start;
   transition: box-shadow var(--salt-duration-instant) ease-in-out;
+  overflow: hidden;
+  --card-accent-color: var(--salt-accent-background);
 }
 .saltInteractableCard-primary {
   background: var(--saltInteractableCard-background, var(--salt-container-primary-background));
   border-color: var(--salt-container-primary-borderColor);
-  --card-accent-color: var(--salt-container-primary-borderColor);
 }
 .saltInteractableCard-secondary {
   background: var(--saltInteractableCard-background, var(--salt-container-secondary-background));
   border-color: var(--salt-container-secondary-borderColor);
-  --card-accent-color: var(--salt-container-secondary-borderColor);
 }
 .saltInteractableCard-tertiary {
   background: var(--saltInteractableCard-background, var(--salt-container-tertiary-background));
   border-color: var(--salt-container-tertiary-borderColor);
-  --card-accent-color: var(--salt-container-tertiary-borderColor);
 }
 .saltInteractableCard-accent::after {
   content: "";
@@ -1565,14 +1766,24 @@ a:focus .saltCard-interactable.saltCard-disabled {
   outline-style: var(--salt-focused-outlineStyle);
   outline-width: var(--salt-focused-outlineWidth);
   outline-offset: var(--salt-focused-outlineOffset);
-  --card-accent-color: var(--salt-selectable-foreground-hover);
+}
+@media (hover: hover) {
+  .saltInteractableCard:hover {
+    cursor: var(--salt-selectable-cursor-hover);
+    box-shadow: var(--salt-overlayable-shadow-hover);
+    border-color: var(--salt-actionable-accented-borderColor-hover);
+  }
+  .saltInteractableCard-disabled:hover {
+    cursor: var(--salt-selectable-cursor-disabled);
+    box-shadow: none;
+  }
 }
 .saltInteractableCard-selected,
 .saltInteractableCard:active,
 .saltInteractableCard-active {
   cursor: var(--salt-selectable-cursor-hover);
-  border-color: var(--salt-selectable-borderColor-selected);
-  --card-accent-color: var(--salt-selectable-foreground-selected);
+  box-shadow: var(--salt-overlayable-shadow);
+  border-color: var(--salt-actionable-accented-borderColor-active);
 }
 .saltInteractableCard-disabled,
 .saltInteractableCard-disabled:focus,
@@ -1581,7 +1792,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
   color: var(--salt-content-primary-foreground-disabled);
   cursor: var(--salt-selectable-cursor-disabled);
   outline: none;
-  --card-accent-color: var(--salt-selectable-foreground-disabled);
+  --card-accent-color: var(--salt-accent-background-disabled);
 }
 .saltInteractableCard-primary.saltInteractableCard-disabled,
 .saltInteractableCard-primary.saltInteractableCard-disabled:focus,
@@ -1605,18 +1816,6 @@ a:focus .saltCard-interactable.saltCard-disabled {
 .saltInteractableCard-disabled div {
   pointer-events: none;
 }
-@media (hover: hover) {
-  .saltInteractableCard:hover {
-    cursor: var(--salt-selectable-cursor-hover);
-    box-shadow: var(--salt-overlayable-shadow-hover);
-    --card-accent-color: var(--salt-selectable-foreground-hover);
-  }
-  .saltInteractableCard-disabled:hover {
-    cursor: var(--salt-selectable-cursor-disabled);
-    box-shadow: none;
-    --card-accent-color: var(--salt-selectable-foreground-disabled);
-  }
-}
 
 /* src/interactable-card/InteractableCardGroup.css */
 .saltInteractableCardGroup {
@@ -1689,21 +1888,20 @@ 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);
+  overflow: hidden;
 }
 .saltLinkCard-primary {
   background: var(--saltLinkCard-background, var(--salt-container-primary-background));
   border-color: var(--salt-container-primary-borderColor);
-  --linkCard-accent-color: var(--salt-container-primary-borderColor);
 }
 .saltLinkCard-secondary {
   background: var(--saltLinkCard-background, var(--salt-container-secondary-background));
   border-color: var(--salt-container-secondary-borderColor);
-  --linkCard-accent-color: var(--salt-container-secondary-borderColor);
 }
 .saltLinkCard-tertiary {
   background: var(--saltLinkCard-background, var(--salt-container-tertiary-background));
   border-color: var(--salt-container-tertiary-borderColor);
-  --linkCard-accent-color: var(--salt-container-tertiary-borderColor);
 }
 .saltLinkCard-accent::after {
   content: "";
@@ -1743,19 +1941,18 @@ a:focus .saltCard-interactable.saltCard-disabled {
   outline-offset: var(--salt-focused-outlineOffset);
   --linkCard-accent-color: var(--salt-selectable-foreground-hover);
 }
-.saltLinkCard:active {
-  cursor: var(--salt-selectable-cursor-active);
-  border-color: var(--salt-selectable-borderColor-selected);
-  box-shadow: var(--salt-overlayable-shadow);
-  --linkCard-accent-color: var(--salt-selectable-foreground-selected);
-}
 @media (hover: hover) {
   .saltLinkCard:hover {
     cursor: var(--salt-selectable-cursor-hover);
     box-shadow: var(--salt-overlayable-shadow-hover);
-    --linkCard-accent-color: var(--salt-selectable-foreground-hover);
+    border-color: var(--salt-actionable-accented-borderColor-hover);
   }
 }
+.saltLinkCard:active {
+  cursor: var(--salt-selectable-cursor-active);
+  border-color: var(--salt-actionable-accented-borderColor-active);
+  box-shadow: var(--salt-overlayable-shadow);
+}
 
 /* src/list-box/ListBox.css */
 .saltListBox {
@@ -1782,7 +1979,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
 /* src/menu/MenuGroup.css */
 .saltMenuGroup-label {
   background: var(--salt-container-primary-background);
-  color: var(--salt-text-secondary-foreground);
+  color: var(--salt-content-secondary-foreground);
   font-size: var(--salt-text-label-fontSize);
   font-weight: var(--salt-text-label-fontWeight-strong);
   font-family: var(--salt-text-label-fontFamily);
@@ -1836,7 +2033,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
 .saltMenuItem[aria-disabled=true],
 .saltMenuItem[aria-disabled=true]:active {
   background: var(--salt-selectable-background-disabled);
-  color: var(--salt-text-primary-foreground-disabled);
+  color: var(--salt-content-primary-foreground-disabled);
   cursor: var(--salt-selectable-cursor-disabled);
   box-shadow: none;
 }
@@ -1876,21 +2073,16 @@ a:focus .saltCard-interactable.saltCard-disabled {
 
 /* src/multiline-input/MultilineInput.css */
 .saltMultilineInput {
-  --multilineInput-borderColor: var(--salt-editable-borderColor);
-  --multilineInput-borderStyle: var(--salt-editable-borderStyle);
-  --multilineInput-outlineColor: var(--salt-focused-outlineColor);
-  --multilineInput-border: none;
-  --multilineInput-activationIndicator-borderWidth: var(--salt-size-border);
   align-items: center;
   background: var(--multilineInput-background);
-  border: var(--multilineInput-border);
   border-radius: var(--salt-palette-corner-weak, 0);
   color: var(--salt-content-primary-foreground);
   display: inline-flex;
   font-family: var(--salt-text-fontFamily);
   font-size: var(--salt-text-fontSize);
-  height: auto;
   line-height: var(--salt-text-lineHeight);
+  letter-spacing: var(--salt-text-letterSpacing);
+  height: auto;
   min-height: var(--salt-size-base);
   min-width: 4em;
   padding-left: var(--salt-spacing-100);
@@ -1901,17 +2093,63 @@ a:focus .saltCard-interactable.saltCard-disabled {
   overflow: hidden;
 }
 .saltMultilineInput:hover {
-  --multilineInput-borderStyle: var(--salt-editable-borderStyle-hover);
-  --multilineInput-borderColor: var(--salt-editable-borderColor-hover);
   background: var(--multilineInput-background-hover);
   cursor: var(--salt-editable-cursor-hover);
 }
-.saltMultilineInput:active {
-  --multilineInput-borderColor: var(--salt-editable-borderColor-active);
-  --multilineInput-borderStyle: var(--salt-editable-borderStyle-active);
-  --multilineInput-activationIndicator-borderWidth: var(--salt-editable-borderWidth-active);
-  background: var(--multilineInput-background-active);
-  cursor: var(--salt-editable-cursor-active);
+.saltMultilineInput-bordered.saltMultilineInput {
+  border: var(--salt-size-border) var(--salt-editable-borderStyle) var(--multilineInput-borderColor);
+}
+.saltMultilineInput-bordered.saltMultilineInput:hover {
+  border-style: var(--salt-editable-borderStyle-hover);
+  border-color: var(--multilineInput-borderColor-hover);
+}
+.saltMultilineInput-bordered.saltMultilineInput-focused,
+.saltMultilineInput-bordered.saltMultilineInput-focused:hover {
+  border-style: var(--salt-editable-borderStyle-active);
+  border-color: var(--multilineInput-borderColor-active);
+}
+.saltMultilineInput-bordered.saltMultilineInput-readOnly,
+.saltMultilineInput-bordered.saltMultilineInput-readOnly:hover {
+  border-style: var(--salt-editable-borderStyle-readonly);
+  border-color: var(--salt-editable-borderColor-readonly);
+}
+.saltMultilineInput-bordered.saltMultilineInput-disabled,
+.saltMultilineInput-bordered.saltMultilineInput-disabled:hover {
+  border-style: var(--salt-editable-borderStyle-disabled);
+  border-color: var(--salt-editable-borderColor-disabled);
+}
+.saltMultilineInput-activationIndicator {
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  position: absolute;
+  border-bottom: var(--salt-size-border) var(--salt-editable-borderStyle) var(--multilineInput-borderColor);
+}
+.saltMultilineInput:hover .saltMultilineInput-activationIndicator {
+  border-bottom-style: var(--salt-editable-borderStyle-hover);
+  border-bottom-color: var(--multilineInput-borderColor-hover);
+}
+.saltMultilineInput-focused .saltMultilineInput-activationIndicator,
+.saltMultilineInput-focused:hover .saltMultilineInput-activationIndicator {
+  border-bottom: var(--salt-size-border-strong) var(--salt-editable-borderStyle-active) var(--multilineInput-borderColor-active);
+}
+.saltMultilineInput-readOnly .saltMultilineInput-activationIndicator,
+.saltMultilineInput-readOnly:hover .saltMultilineInput-activationIndicator {
+  border-bottom-style: var(--salt-editable-borderStyle-readonly);
+  border-bottom-color: var(--salt-editable-borderColor-readonly);
+}
+.saltMultilineInput-disabled .saltMultilineInput-activationIndicator,
+.saltMultilineInput-disabled:hover .saltMultilineInput-activationIndicator {
+  border-bottom-style: var(--salt-editable-borderStyle-disabled);
+  border-bottom-color: var(--salt-editable-borderColor-disabled);
+}
+.saltMultilineInput-bordered .saltMultilineInput-activationIndicator,
+.saltMultilineInput-bordered.saltMultilineInput-readOnly .saltMultilineInput-activationIndicator,
+.saltMultilineInput-bordered.saltMultilineInput-disabled:hover .saltMultilineInput-activationIndicator {
+  border-bottom-width: 0;
+}
+.saltMultilineInput-bordered.saltMultilineInput-focused .saltMultilineInput-activationIndicator {
+  border-bottom-width: calc(var(--salt-size-border-strong) - var(--salt-size-border));
 }
 .saltMultilineInput-primary {
   --multilineInput-background: var(--salt-editable-primary-background);
@@ -1919,6 +2157,10 @@ a:focus .saltCard-interactable.saltCard-disabled {
   --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-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-secondary {
   --multilineInput-background: var(--salt-editable-secondary-background);
@@ -1926,108 +2168,60 @@ a:focus .saltCard-interactable.saltCard-disabled {
   --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-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-error,
-.saltMultilineInput-error:hover {
+.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);
+  --multilineInput-borderColor-hover: var(--salt-status-error-borderColor);
   --multilineInput-outlineColor: var(--salt-status-error-borderColor);
-  --multilineInput-background-readonly: var(--salt-status-error-background);
 }
-.saltMultilineInput-warning,
-.saltMultilineInput-warning:hover {
+.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);
+  --multilineInput-borderColor-hover: var(--salt-status-warning-borderColor);
   --multilineInput-outlineColor: var(--salt-status-warning-borderColor);
-  --multilineInput-background-readonly: var(--salt-status-warning-background);
 }
-.saltMultilineInput-success,
-.saltMultilineInput-success:hover {
+.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);
+  --multilineInput-borderColor-hover: var(--salt-status-success-borderColor);
   --multilineInput-outlineColor: var(--salt-status-success-borderColor);
-  --multilineInput-background-readonly: var(--salt-status-success-background);
 }
-.saltMultilineInput.saltMultilineInput-withAdornmentRow {
-  display: flex;
-  flex-wrap: wrap;
-}
-.saltMultilineInput-textarea {
-  background: none;
-  border: none;
-  box-sizing: border-box;
-  color: inherit;
-  cursor: inherit;
-  flex-grow: 1;
-  font: inherit;
-  letter-spacing: 0;
-  line-height: var(--salt-text-lineHeight);
-  margin: var(--salt-spacing-75) 0;
-  min-width: 0;
-  min-height: 0;
-  resize: vertical;
-  padding: 0;
-}
-.saltMultilineInput-textarea::placeholder {
-  font-weight: var(--salt-text-fontWeight-small);
-}
-.saltMultilineInput-textarea:focus {
-  outline: none;
-}
-.saltMultilineInput-textarea::selection {
-  background: var(--salt-content-foreground-highlight);
-}
-.saltMultilineInput-focused {
-  --multilineInput-borderColor: var(--multilineInput-outlineColor);
-  --multilineInput-activationIndicator-borderWidth: var(--salt-editable-borderWidth-active);
+.saltMultilineInput-focused,
+.saltMultilineInput-focused:hover {
+  background: var(--multilineInput-background-active);
+  cursor: var(--salt-editable-cursor-active);
   outline: var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--multilineInput-outlineColor);
 }
-.saltMultilineInput-readOnly,
-.saltMultilineInput-readOnly:active,
-.saltMultilineInput-readOnly:hover {
-  --multilineInput-borderColor: var(--salt-editable-borderColor-readonly);
-  --multilineInput-borderStyle: var(--salt-editable-borderStyle-readonly);
-  --multilineInput-activationIndicator-borderWidth: var(--salt-size-border);
+.saltMultilineInput.saltMultilineInput-readOnly {
   background: var(--multilineInput-background-readonly);
   cursor: var(--salt-editable-cursor-readonly);
 }
-.saltMultilineInput-disabled .saltMultilineInput-textarea::selection {
-  background: none;
-}
-.saltMultilineInput-disabled,
-.saltMultilineInput-disabled:hover,
-.saltMultilineInput-disabled:active {
-  --multilineInput-borderColor: var(--salt-editable-borderColor-disabled);
-  --multilineInput-borderStyle: var(--salt-editable-borderStyle-disabled);
-  --multilineInput-activationIndicator-borderWidth: var(--salt-size-border);
-  background: var(--multilineInput-background-disabled);
+.saltMultilineInput.saltMultilineInput-disabled,
+.saltMultilineInput.saltMultilineInput-disabled:hover {
+  background: var(--input-background-disabled);
   cursor: var(--salt-editable-cursor-disabled);
   color: var(--salt-content-primary-foreground-disabled);
 }
-.saltMultilineInput-activationIndicator {
-  left: 0;
-  bottom: 0;
-  width: 100%;
-  position: absolute;
-  border-bottom: var(--multilineInput-activationIndicator-borderWidth) var(--multilineInput-borderStyle) var(--multilineInput-borderColor);
-}
-.saltMultilineInput.saltMultilineInput-bordered {
-  --multilineInput-border: var(--salt-size-border) var(--salt-container-borderStyle) var(--multilineInput-borderColor);
-  --multilineInput-activationIndicator-borderWidth: 0;
-}
-.saltMultilineInput-bordered.saltMultilineInput-focused,
-.saltMultilineInput-bordered:active {
-  --multilineInput-activationIndicator-borderWidth: var(--salt-editable-borderWidth-active);
-}
-.saltMultilineInput-bordered.saltMultilineInput-readOnly,
-.saltMultilineInput-bordered.saltMultilineInput-disabled:hover {
-  --multilineInput-activationIndicator-borderWidth: 0;
+.saltMultilineInput.saltMultilineInput-withAdornmentRow {
+  display: flex;
+  flex-wrap: wrap;
 }
 .saltMultilineInput-endAdornmentContainer,
 .saltMultilineInput-startAdornmentContainer {
@@ -2071,6 +2265,35 @@ a:focus .saltCard-interactable.saltCard-disabled {
   --saltButton-height: calc(var(--salt-size-base) - var(--salt-spacing-100));
   --saltButton-borderRadius: var(--salt-palette-corner-weaker);
 }
+.saltMultilineInput-textarea {
+  background: none;
+  border: none;
+  box-sizing: border-box;
+  color: inherit;
+  cursor: inherit;
+  flex-grow: 1;
+  font: inherit;
+  letter-spacing: 0;
+  line-height: var(--salt-text-lineHeight);
+  margin: var(--salt-spacing-75) 0;
+  min-width: 0;
+  min-height: 0;
+  max-height: inherit;
+  resize: vertical;
+  padding: 0;
+}
+.saltMultilineInput-textarea::placeholder {
+  font-weight: var(--salt-text-fontWeight-small);
+}
+.saltMultilineInput-textarea:focus {
+  outline: none;
+}
+.saltMultilineInput-textarea::selection {
+  background: var(--salt-content-foreground-highlight);
+}
+.saltMultilineInput-disabled .saltMultilineInput-textarea::selection {
+  background: none;
+}
 
 /* src/navigation-item/NavigationItem.css */
 .saltNavigationItem {
@@ -2222,7 +2445,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
 /* src/option/OptionGroup.css */
 .saltOptionGroup-label {
   background: var(--salt-container-primary-background);
-  color: var(--salt-text-secondary-foreground);
+  color: var(--salt-content-secondary-foreground);
   font-size: var(--salt-text-label-fontSize);
   font-weight: var(--salt-text-label-fontWeight-strong);
   font-family: var(--salt-text-label-fontFamily);
@@ -2277,7 +2500,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
   border-radius: var(--saltOverlay-borderRadius, var(--salt-palette-corner, 0));
   background: var(--overlay-background);
   box-shadow: var(--saltOverlay-boxShadow, var(--salt-overlayable-shadow-popout));
-  color: var(--saltOverlay-text-color, var(--salt-text-primary-foreground));
+  color: var(--saltOverlay-text-color, var(--salt-content-primary-foreground));
   z-index: var(--saltOverlay-zIndex, var(--salt-zIndex-flyover));
   width: max-content;
 }
@@ -2414,10 +2637,10 @@ a:focus .saltCard-interactable.saltCard-disabled {
 }
 .saltPanel {
   background: var(--saltPanel-background, var(--panel-background));
-  color: var(--saltPanel-color, initial);
+  color: var(--saltPanel-color, inherit);
   height: var(--saltPanel-height, 100%);
   overflow: auto;
-  padding: var(--saltPanel-padding, var(--salt-size-container-spacing));
+  padding: var(--saltPanel-padding, var(--salt-spacing-300));
   width: var(--saltPanel-width, 100%);
   border-radius: var(--saltPanel-borderRadius, var(--salt-palette-corner, 0));
   box-sizing: border-box;
@@ -2454,63 +2677,70 @@ a:focus .saltCard-interactable.saltCard-disabled {
   appearance: none;
   display: inline-flex;
   align-items: center;
-  background: var(--saltPill-background, var(--salt-actionable-primary-background));
-  border-radius: var(--saltPill-borderRadius, var(--salt-palette-corner-weaker, 0));
-  border: 0;
+  background: var(--saltPill-background, var(--pill-background));
+  border-radius: var(--salt-palette-corner-weaker, 0);
+  border-style: solid;
+  border-width: var(--salt-size-border, 0);
+  border-color: var(--pill-borderColor);
   height: calc(var(--salt-size-base) - var(--salt-spacing-100));
   min-height: var(--salt-text-minHeight);
-  outline: 0;
   position: relative;
   gap: var(--salt-spacing-50);
-  padding-left: var(--salt-spacing-50);
-  padding-right: var(--salt-spacing-50);
-  color: var(--saltPill-color, var(--salt-actionable-primary-foreground));
+  padding: 0 calc(var(--salt-spacing-50) - var(--salt-size-border, 0));
+  color: var(--saltPill-color, var(--pill-color));
   font-family: var(--salt-text-fontFamily);
   font-size: var(--salt-text-fontSize);
   font-weight: var(--salt-text-fontWeight);
   line-height: var(--salt-text-lineHeight);
+  letter-spacing: var(--salt-text-letterSpacing);
   overflow: hidden;
   white-space: nowrap;
 }
 .saltPill-clickable {
+  --pill-background: var(--salt-actionable-bold-background);
+  --pill-color: var(--salt-actionable-bold-foreground);
+  --pill-borderColor: var(--salt-actionable-bold-borderColor);
   cursor: var(--salt-selectable-cursor-hover);
 }
 .saltPill-clickable:hover,
 .saltPill-clickable:focus-visible {
-  color: var(--salt-actionable-primary-foreground-hover);
-  background: var(--salt-actionable-primary-background-hover);
+  --pill-color: var(--salt-actionable-bold-foreground-hover);
+  --pill-background: var(--salt-actionable-bold-background-hover);
+  --pill-borderColor: var(--salt-actionable-bold-borderColor-hover);
 }
 .saltPill-clickable.saltPill-active,
 .saltPill-clickable:active {
-  background: var(--salt-actionable-primary-background-active);
-  color: var(--salt-actionable-primary-foreground-active);
+  --pill-color: var(--salt-actionable-bold-foreground-active);
+  --pill-background: var(--salt-actionable-bold-background-active);
+  --pill-borderColor: var(--salt-actionable-bold-borderColor-active);
 }
 .saltPill:focus-visible {
   outline: var(--salt-focused-outline);
 }
+.saltPill[aria-expanded=true][aria-haspopup=menu] {
+  --pill-color: var(--salt-actionable-bold-foreground-active);
+  --pill-background: var(--salt-actionable-bold-background-active);
+  --pill-borderColor: var(--salt-actionable-bold-borderColor-active);
+}
 .saltPill:disabled,
 .saltPill:disabled:hover {
-  color: var(--salt-actionable-primary-foreground-disabled);
-  background: var(--salt-actionable-primary-background-disabled);
-  cursor: var(--salt-selectable-cursor-disabled);
+  --pill-color: var(--salt-actionable-bold-foreground-disabled);
+  --pill-background: var(--salt-actionable-bold-background-disabled);
+  --pill-borderColor: var(--salt-actionable-bold-borderColor-disabled);
+  cursor: var(--salt-actionable-cursor-disabled);
 }
 
 /* src/pill-input/PillInput.css */
 .saltPillInput {
-  --pillInput-border: none;
-  --pillInput-borderColor: var(--salt-editable-borderColor);
-  --pillInput-borderStyle: var(--salt-editable-borderStyle);
-  --pillInput-outlineColor: var(--salt-focused-outlineColor);
-  --pillInput-borderWidth: var(--salt-size-border);
   align-items: center;
   background: var(--saltPillInput-background, var(--pillInput-background));
   border-radius: var(--salt-palette-corner-weak, 0);
-  border: var(--pillInput-border);
   color: var(--saltPillInput-color, var(--salt-content-primary-foreground));
   display: inline-flex;
   font-family: var(--salt-text-fontFamily);
   font-size: var(--saltPillInput-fontSize, var(--salt-text-fontSize));
   line-height: var(--saltPillInput-lineHeight, var(--salt-text-lineHeight));
+  letter-spacing: var(--salt-text-letterSpacing);
   min-height: var(--saltPillInput-minHeight, var(--salt-size-base));
   min-width: var(--saltPillInput-minWidth, 4em);
   padding-left: var(--saltPillInput-paddingLeft, var(--salt-spacing-100));
@@ -2527,17 +2757,67 @@ a:focus .saltCard-interactable.saltCard-disabled {
   flex-wrap: nowrap;
 }
 .saltPillInput:hover {
-  --pillInput-borderStyle: var(--salt-editable-borderStyle-hover);
-  --pillInput-borderColor: var(--salt-editable-borderColor-hover);
   background: var(--saltPillInput-background-hover, var(--pillInput-background-hover));
   cursor: var(--salt-editable-cursor-hover);
 }
-.saltPillInput:active {
-  --pillInput-borderColor: var(--salt-editable-borderColor-active);
-  --pillInput-borderStyle: var(--salt-editable-borderStyle-active);
-  --pillInput-borderWidth: var(--salt-editable-borderWidth-active);
-  background: var(--saltPillInput-background-active, var(--pillInput-background-active));
-  cursor: var(--salt-editable-cursor-active);
+.saltPillInput-bordered.saltPillInput {
+  border: var(--salt-size-border) var(--salt-editable-borderStyle) var(--pillInput-borderColor);
+}
+.saltPillInput-bordered.saltPillInput:hover {
+  border-style: var(--salt-editable-borderStyle-hover);
+  border-color: var(--pillInput-borderColor-hover);
+}
+.saltPillInput-bordered.saltPillInput-focused,
+.saltPillInput-bordered:active {
+  --pillInput-borderWidth: calc(var(--salt-editable-borderWidth-active) - var(--salt-size-border));
+}
+.saltPillInput-bordered.saltPillInput-focused,
+.saltPillInput-bordered.saltPillInput-focused:hover {
+  border-style: var(--salt-editable-borderStyle-active);
+  border-color: var(--pillInput-borderColor-active);
+}
+.saltPillInput-bordered.saltPillInput-readOnly,
+.saltPillInput-bordered.saltPillInput-readOnly:hover {
+  border-style: var(--salt-editable-borderStyle-readonly);
+  border-color: var(--salt-editable-borderColor-readonly);
+}
+.saltPillInput-bordered.saltPillInput-disabled,
+.saltPillInput-bordered.saltPillInput-disabled:hover {
+  border-style: var(--salt-editable-borderStyle-disabled);
+  border-color: var(--salt-editable-borderColor-disabled);
+}
+.saltPillInput-activationIndicator {
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  position: absolute;
+  border-bottom: var(--salt-size-border) var(--salt-editable-borderStyle) var(--pillInput-borderColor);
+}
+.saltPillInput:hover .saltPillInput-activationIndicator {
+  border-bottom-style: var(--salt-editable-borderStyle-hover);
+  border-bottom-color: var(--pillInput-borderColor-hover);
+}
+.saltPillInput-focused .saltPillInput-activationIndicator,
+.saltPillInput-focused:hover .saltPillInput-activationIndicator {
+  border-bottom: var(--salt-size-border-strong) var(--salt-editable-borderStyle-active) var(--pillInput-borderColor-active);
+}
+.saltPillInput-readOnly .saltPillInput-activationIndicator,
+.saltPillInput-readOnly:hover .saltPillInput-activationIndicator {
+  border-bottom-style: var(--salt-editable-borderStyle-readonly);
+  border-bottom-color: var(--salt-editable-borderColor-readonly);
+}
+.saltPillInput-disabled .saltPillInput-activationIndicator,
+.saltPillInput-disabled:hover .saltPillInput-activationIndicator {
+  border-bottom-style: var(--salt-editable-borderStyle-disabled);
+  border-bottom-color: var(--salt-editable-borderColor-disabled);
+}
+.saltPillInput-bordered .saltPillInput-activationIndicator,
+.saltPillInput-bordered.saltPillInput-readOnly .saltPillInput-activationIndicator,
+.saltPillInput-bordered.saltPillInput-disabled:hover .saltPillInput-activationIndicator {
+  border-bottom-width: 0;
+}
+.saltPillInput-bordered.saltPillInput-focused .saltPillInput-activationIndicator {
+  border-bottom-width: calc(var(--salt-size-border-strong) - var(--salt-size-border));
 }
 .saltPillInput-primary {
   --pillInput-background: var(--salt-editable-primary-background);
@@ -2545,6 +2825,10 @@ a:focus .saltCard-interactable.saltCard-disabled {
   --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-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-secondary {
   --pillInput-background: var(--salt-editable-secondary-background);
@@ -2552,115 +2836,59 @@ a:focus .saltCard-interactable.saltCard-disabled {
   --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-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-error,
-.saltPillInput-error:hover {
+.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);
-  --pillInput-background-readonly: var(--salt-status-error-background);
 }
-.saltPillInput-warning,
-.saltPillInput-warning:hover {
+.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);
-  --pillInput-background-readonly: var(--salt-status-warning-background);
 }
-.saltPillInput-success,
-.saltPillInput-success:hover {
+.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);
+  --pillInput-borderColor-hover: var(--salt-status-success-borderColor);
   --pillInput-outlineColor: var(--salt-status-success-borderColor);
-  --pillInput-background-readonly: var(--salt-status-success-background);
-}
-.saltPillInput-input {
-  background: none;
-  border: none;
-  box-sizing: content-box;
-  color: inherit;
-  cursor: inherit;
-  display: block;
-  flex: 1;
-  font: inherit;
-  height: 100%;
-  letter-spacing: var(--saltPillInput-letterSpacing, 0);
-  margin: 0;
-  min-width: 0;
-  overflow: hidden;
-  padding: 0;
-  text-align: var(--pillInput-textAlign);
-  width: 100%;
-}
-.saltPillInput-input:focus {
-  outline: none;
-}
-.saltPillInput-input::selection {
-  background: var(--salt-content-foreground-highlight);
-}
-.saltPillInput-input::placeholder {
-  color: var(--salt-content-secondary-foreground);
-  font-weight: var(--salt-text-fontWeight-small);
 }
 .saltPillInput-focused,
 .saltPillInput-focused:hover {
-  --pillInput-borderColor: var(--pillInput-outlineColor);
-  --pillInput-borderWidth: var(--salt-editable-borderWidth-active);
+  background: var(--saltPillInput-background-active, var(--pillInput-background-active));
+  cursor: var(--salt-editable-cursor-active);
   outline: var(--saltPillInput-outline, var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--pillInput-outlineColor));
 }
 .saltPillInput.saltPillInput-readOnly {
-  --pillInput-borderColor: var(--salt-editable-borderColor-readonly);
-  --pillInput-borderStyle: var(--salt-editable-borderStyle-readonly);
-  --pillInput-borderWidth: var(--salt-size-border);
   background: var(--pillInput-background-readonly);
   cursor: var(--salt-editable-cursor-readonly);
 }
-.saltPillInput-focused.saltPillInput-disabled {
-  --pillInput-borderWidth: var(--salt-size-border);
-  outline: none;
-}
-.saltPillInput-focused.saltPillInput-readOnly {
-  --pillInput-borderWidth: var(--salt-size-border);
-}
-.saltPillInput-disabled .saltPillInput-input::selection {
-  background: none;
-}
-.saltPillInput.saltPillInput-disabled,
-.saltPillInput.saltPillInput-disabled:hover,
-.saltPillInput.saltPillInput-disabled:active {
-  --pillInput-borderColor: var(--salt-editable-borderColor-disabled);
-  --pillInput-borderStyle: var(--salt-editable-borderStyle-disabled);
-  --pillInput-borderWidth: var(--salt-size-border);
+.saltPillInput-disabled,
+.saltPillInput-disabled:hover {
   background: var(--pillInput-background-disabled);
   cursor: var(--salt-editable-cursor-disabled);
   color: var(--saltPillInput-color-disabled, var(--salt-content-primary-foreground-disabled));
 }
-.saltPillInput-activationIndicator {
-  left: 0;
-  bottom: 0;
-  width: 100%;
-  position: absolute;
-  border-bottom: var(--pillInput-borderWidth) var(--pillInput-borderStyle) var(--pillInput-borderColor);
-}
-.saltPillInput.saltPillInput-bordered {
-  --pillInput-border: var(--salt-size-border) var(--salt-container-borderStyle) var(--pillInput-borderColor);
-  --pillInput-borderWidth: 0;
-}
-.saltPillInput-bordered.saltPillInput-focused,
-.saltPillInput-bordered:active {
-  --pillInput-borderWidth: var(--salt-editable-borderWidth-active);
-}
-.saltPillInput-bordered.saltPillInput-readOnly,
-.saltPillInput-bordered.saltPillInput-disabled:hover,
-.saltPillInput-bordered.saltPillInput-disabled.saltPillInput-focused {
-  --pillInput-borderWidth: 0;
-}
 .saltPillInput-startAdornmentContainer {
   align-items: center;
   display: inline-flex;
@@ -2727,6 +2955,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
   background: var(--salt-content-foreground-highlight);
   color: var(--salt-content-primary-foreground);
   --saltIcon-color: var(--salt-content-primary-foreground);
+  border-color: transparent;
   outline: none;
 }
 .saltPillInput-pillList div[role=listitem] {
@@ -2739,6 +2968,37 @@ a:focus .saltCard-interactable.saltCard-disabled {
   align-items: center;
   justify-content: center;
 }
+.saltPillInput-input {
+  background: none;
+  border: none;
+  box-sizing: content-box;
+  color: inherit;
+  cursor: inherit;
+  display: block;
+  flex: 1;
+  font: inherit;
+  height: 100%;
+  letter-spacing: var(--saltPillInput-letterSpacing, 0);
+  margin: 0;
+  min-width: 0;
+  overflow: hidden;
+  padding: 0;
+  text-align: var(--pillInput-textAlign, left);
+  width: 100%;
+}
+.saltPillInput-input:focus {
+  outline: none;
+}
+.saltPillInput-input::selection {
+  background: var(--salt-content-foreground-highlight);
+}
+.saltPillInput-disabled .saltPillInput-input::selection {
+  background: none;
+}
+.saltPillInput-input::placeholder {
+  color: var(--salt-content-secondary-foreground);
+  font-weight: var(--salt-text-fontWeight-small);
+}
 
 /* src/radio-button/RadioButton.css */
 .saltRadioButton {
@@ -2750,7 +3010,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
   line-height: var(--salt-text-lineHeight);
   font-family: var(--salt-text-fontFamily);
   font-weight: var(--salt-text-fontWeight);
-  --radioButton-icon-marginTop: calc((var(--salt-text-lineHeight) - var(--salt-size-selectable)) / 2);
+  --radioButton-icon-margin: calc((var(--salt-text-lineHeight) - var(--salt-size-selectable)) / 2);
 }
 .saltRadioButton-disabled {
   color: var(--salt-content-primary-foreground-disabled);
@@ -2765,14 +3025,13 @@ a:focus .saltCard-interactable.saltCard-disabled {
   position: absolute;
   height: var(--salt-size-selectable);
   opacity: 0;
-  margin: var(--radioButton-icon-marginTop) 0 0 0;
   padding: 0;
   width: var(--salt-size-selectable);
   z-index: var(--salt-zIndex-default);
-  box-sizing: border-box;
 }
+.saltRadioButton-input,
 .saltRadioButtonIcon {
-  margin-top: var(--radioButton-icon-marginTop);
+  margin: var(--radioButton-icon-margin) 0;
   box-sizing: border-box;
 }
 .saltRadioButton-input:focus-visible + .saltRadioButtonIcon {
@@ -2838,6 +3097,8 @@ a:focus .saltCard-interactable.saltCard-disabled {
   background: var(--salt-container-primary-background);
   --saltIcon-size: 100%;
   display: flex;
+  clip-path: border-box;
+  box-sizing: border-box;
 }
 .saltRadioButton:hover .saltRadioButtonIcon {
   border-color: var(--salt-selectable-borderColor-hover);
@@ -3189,7 +3450,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
   border-radius: var(--saltTag-borderRadius, var(--salt-palette-corner-strongest, 9999px));
   width: fit-content;
   min-width: max-content;
-  border-box: box-sizing;
+  box-sizing: border-box;
 }
 .saltTag-primary {
   background: var(--tag-primary-background, var(--salt-category-1-subtle-background));
@@ -3355,6 +3616,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
   font-size: var(--saltText-fontSize, var(--salt-text-fontSize));
   line-height: var(--saltText-lineHeight, var(--salt-text-lineHeight));
   font-weight: var(--saltText-fontWeight, var(--salt-text-fontWeight));
+  letter-spacing: var(--salt-text-letterSpacing);
 }
 .saltText::selection {
   background: var(--saltText-highlight, var(--salt-content-foreground-highlight));
@@ -3691,7 +3953,7 @@ label.saltText small,
 .saltTooltip {
   --tooltip-background: var(--saltTooltip-background, var(--salt-container-primary-background));
   --tooltip-zIndex: var(--saltTooltip-zIndex, var(--salt-zIndex-flyover));
-  --tooltip-icon-marginTop: calc((var(--salt-text-lineHeight) - max(var(--salt-icon-size-base), 12px)) / 2);
+  --tooltip-icon-marginTop: calc((var(--salt-text-lineHeight) - max(var(--salt-size-icon), 12px)) / 2);
   --tooltip-status-borderColor: var(--salt-container-primary-borderColor);
   --tooltip-padding: calc(var(--salt-spacing-75) - var(--salt-size-border)) var(--salt-spacing-100);
 }
@@ -3916,4 +4178,4 @@ label.saltText small,
   }
 }
 
-/* src/b2ce0a41-ff2d-46d3-b9b0-a331dce86eca.css */
+/* src/2e62dc25-69c6-4ab4-a16f-2982e3336659.css */