@salt-ds/core 1.34.0 → 1.36.0

package/css/salt-core.css

@@ -11,6 +11,9 @@
 .saltAccordion-success {
   border-top-color: var(--salt-status-success-borderColor);
 }
+.saltAccordion-disabled {
+  border-top-color: var(--salt-separable-tertiary-borderColor);
+}
 
 /* src/accordion/AccordionGroup.css */
 .saltAccordionGroup {
@@ -39,11 +42,6 @@
   outline: var(--salt-focused-outline);
   outline-offset: calc(-1 * var(--salt-focused-outlineWidth));
 }
-.saltAccordionHeader:disabled {
-  background: var(--salt-actionable-secondary-background);
-  color: var(--salt-content-primary-foreground-disabled);
-  cursor: var(--salt-actionable-cursor-disabled);
-}
 .saltAccordionHeader-content {
   padding: var(--salt-spacing-75) 0;
   width: 100%;
@@ -74,6 +72,11 @@
   height: var(--salt-size-base);
   margin-left: auto;
 }
+.saltAccordionHeader:disabled {
+  background: var(--salt-actionable-secondary-background);
+  color: var(--salt-content-primary-foreground-disabled);
+  cursor: var(--salt-actionable-cursor-disabled);
+}
 
 /* src/accordion/AccordionPanel.css */
 .saltAccordionPanel {
@@ -155,12 +158,13 @@
   position: relative;
   flex-shrink: 0;
   vertical-align: middle;
+  --badge-size: var(--salt-text-notation-lineHeight);
 }
 .saltBadge-badge {
   padding-left: var(--salt-spacing-50);
   padding-right: var(--salt-spacing-50);
-  height: var(--salt-text-notation-lineHeight);
-  min-width: var(--salt-text-notation-lineHeight);
+  height: var(--badge-size);
+  min-width: var(--badge-size);
   border-radius: var(--salt-palette-corner-strongest, 9999px);
   white-space: nowrap;
   z-index: var(--salt-zIndex-default);
@@ -181,7 +185,16 @@
 .saltBadge-topRight {
   position: absolute;
   right: var(--salt-spacing-100);
-  transform: translateX(100%);
+  transform: translateX(100%) translateY(calc(-1 * (var(--badge-size) / 2)));
+}
+.saltBadge-dotBadge {
+  height: var(--salt-size-adornment);
+  min-width: var(--salt-size-adornment);
+  padding: 0;
+  --badge-size: var(--salt-size-adornment);
+}
+.saltBadge-dotBadge.saltBadge-topRight {
+  right: calc((var(--salt-size-adornment) / 2));
 }
 
 /* src/banner/Banner.css */
@@ -257,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;
@@ -366,12 +337,223 @@
 .saltButton-disabled,
 .saltButton-disabled:active,
 .saltButton-disabled:focus-visible,
+.saltButton-disabled:focus-visible:active,
 .saltButton-disabled:hover {
   background: var(--saltButton-background-disabled, var(--button-background-disabled));
   color: var(--saltButton-text-color-disabled, var(--button-text-color-disabled));
   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 {
@@ -486,12 +668,9 @@ 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;
 }
-.saltCheckboxIcon > svg {
-  transform: translate(0px, 0px);
-}
 .saltCheckbox-input:focus-visible + .saltCheckboxIcon {
   outline-offset: var(--salt-focused-outlineOffset);
   outline: var(--saltCheckbox-outline, var(--salt-focused-outline));
@@ -514,7 +693,6 @@ a:focus .saltCard-interactable.saltCard-disabled {
 }
 .saltCheckbox-input {
   cursor: inherit;
-  margin: 0;
   opacity: 0;
   padding: 0;
   position: absolute;
@@ -563,6 +741,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,
@@ -615,10 +794,14 @@ a:focus .saltCard-interactable.saltCard-disabled {
   border-color: var(--salt-selectable-borderColor-readonly);
   color: var(--salt-content-primary-foreground);
 }
+.saltCheckboxIcon > svg {
+  position: absolute;
+  transform: scale(1.01);
+}
 
 /* src/combo-box/ComboBox.css */
 .saltComboBox-focused {
-  outline: var(--salt-focused-outline);
+  outline: var(--saltPillInput-outline, var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--pillInput-outlineColor));
 }
 
 /* src/dialog/Dialog.css */
@@ -636,7 +819,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
   background: var(--salt-container-primary-background);
   box-shadow: var(--salt-overlayable-shadow-modal);
   overflow-y: auto;
-  z-index: var(--salt-zIndex-drawer);
+  z-index: var(--salt-zIndex-modal);
   height: min-content;
   border: var(--salt-size-border) var(--salt-container-borderStyle) var(--salt-separable-tertiary-borderColor);
   box-sizing: border-box;
@@ -748,7 +931,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);
@@ -901,15 +1084,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;
@@ -934,32 +1108,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);
@@ -967,6 +1172,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);
@@ -974,80 +1183,67 @@ 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 */
@@ -1296,21 +1492,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));
@@ -1321,17 +1512,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);
@@ -1339,6 +1576,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);
@@ -1346,113 +1587,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;
@@ -1486,6 +1671,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 {
@@ -1861,21 +2077,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);
@@ -1886,17 +2097,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);
@@ -1904,6 +2161,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);
@@ -1911,108 +2172,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 {
@@ -2056,8 +2269,43 @@ 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;
+  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 {
+  color: var(--salt-content-primary-foreground);
+  line-height: var(--salt-text-lineHeight);
+  font-family: var(--salt-text-fontFamily);
+  font-size: var(--salt-text-fontSize);
+  font-weight: var(--salt-text-fontWeight);
+}
 .saltNavigationItem-wrapper {
   display: flex;
   gap: var(--salt-spacing-100);
@@ -2065,7 +2313,8 @@ a:focus .saltCard-interactable.saltCard-disabled {
   position: relative;
   background: none;
   border: none;
-  font-size: var(--salt-text-fontSize);
+  font: inherit;
+  color: inherit;
   text-decoration: none;
   cursor: var(--salt-selectable-cursor-hover);
   transition: all var(--salt-duration-instant) ease-in-out;
@@ -2091,9 +2340,6 @@ a:focus .saltCard-interactable.saltCard-disabled {
   width: 100%;
 }
 .saltNavigationItem-label {
-  color: var(--salt-content-primary-foreground);
-  line-height: var(--salt-text-lineHeight);
-  font-family: var(--salt-text-fontFamily);
   padding-left: calc(var(--saltNavigationItem-level, 0) * var(--salt-spacing-100));
   flex: 1;
   text-align: left;
@@ -2114,9 +2360,6 @@ a:focus .saltCard-interactable.saltCard-disabled {
   width: 100%;
 }
 .saltNavigationItem-label {
-  color: var(--salt-content-primary-foreground);
-  line-height: var(--salt-text-lineHeight);
-  font-family: var(--salt-text-fontFamily);
   padding-left: calc(var(--saltNavigationItem-level, 0) * var(--salt-spacing-100));
   flex: 1;
   text-align: left;
@@ -2152,13 +2395,13 @@ a:focus .saltCard-interactable.saltCard-disabled {
 .saltNavigationItem-wrapper:hover::after,
 .saltNavigationItem-wrapper:focus-visible::after {
   background: var(--salt-navigable-indicator-hover);
-  transition: all var(--salt-duration-perceptible) ease-in-out;
+  transition: background var(--salt-duration-perceptible) ease-in-out;
 }
 .saltNavigationItem-active::after,
 .saltNavigationItem-active:hover::after,
 .saltNavigationItem-active:focus::after {
   background: var(--salt-navigable-indicator-active);
-  transition: all var(--salt-duration-perceptible) ease-in-out;
+  transition: background var(--salt-duration-perceptible) ease-in-out;
 }
 
 /* src/option/Option.css */
@@ -2397,7 +2640,7 @@ 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));
@@ -2480,27 +2723,22 @@ a:focus .saltCard-interactable.saltCard-disabled {
 
 /* src/pill-input/PillInput.css */
 .saltPillInput {
-  --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));
-  color: var(--saltInput-color, var(--salt-content-primary-foreground));
+  background: var(--saltPillInput-background, var(--pillInput-background));
+  border-radius: var(--salt-palette-corner-weak, 0);
+  color: var(--saltPillInput-color, var(--salt-content-primary-foreground));
   display: inline-flex;
   font-family: var(--salt-text-fontFamily);
-  font-size: var(--saltInput-fontSize, var(--salt-text-fontSize));
-  line-height: var(--saltInput-lineHeight, var(--salt-text-lineHeight));
-  min-height: var(--saltInput-minHeight, var(--salt-size-base));
-  min-width: var(--saltInput-minWidth, 4em);
-  padding-left: var(--saltInput-paddingLeft, var(--salt-spacing-100));
-  padding-right: var(--saltInput-paddingRight, var(--salt-spacing-100));
+  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));
+  padding-right: var(--saltPillInput-paddingRight, var(--salt-spacing-100));
   position: relative;
   width: 100%;
   box-sizing: border-box;
-  border-radius: var(--salt-palette-corner-weak, 0);
-  border: var(--input-border);
   overflow: hidden;
 }
 .saltPillInput-truncate {
@@ -2510,139 +2748,137 @@ a:focus .saltCard-interactable.saltCard-disabled {
   flex-wrap: nowrap;
 }
 .saltPillInput:hover {
-  --input-borderStyle: var(--salt-editable-borderStyle-hover);
-  --input-borderColor: var(--salt-editable-borderColor-hover);
-  background: var(--saltInput-background-hover, var(--input-background-hover));
+  background: var(--saltPillInput-background-hover, var(--pillInput-background-hover));
   cursor: var(--salt-editable-cursor-hover);
 }
-.saltPillInput: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);
+.saltPillInput-bordered.saltPillInput {
+  border: var(--salt-size-border) var(--salt-editable-borderStyle) var(--pillInput-borderColor);
 }
-.saltPillInput-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);
+.saltPillInput-bordered.saltPillInput:hover {
+  border-style: var(--salt-editable-borderStyle-hover);
+  border-color: var(--pillInput-borderColor-hover);
 }
-.saltPillInput-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);
+.saltPillInput-bordered.saltPillInput-focused,
+.saltPillInput-bordered:active {
+  --pillInput-borderWidth: calc(var(--salt-editable-borderWidth-active) - var(--salt-size-border));
 }
-.saltPillInput-error,
-.saltPillInput-error:hover {
-  --input-background: var(--salt-status-error-background);
-  --input-background-active: var(--salt-status-error-background);
-  --input-background-hover: var(--salt-status-error-background);
-  --input-borderColor: var(--salt-status-error-borderColor);
-  --input-outlineColor: var(--salt-status-error-borderColor);
-  --input-background-readonly: var(--salt-status-error-background);
+.saltPillInput-bordered.saltPillInput-focused,
+.saltPillInput-bordered.saltPillInput-focused:hover {
+  border-style: var(--salt-editable-borderStyle-active);
+  border-color: var(--pillInput-borderColor-active);
 }
-.saltPillInput-warning,
-.saltPillInput-warning:hover {
-  --input-background: var(--salt-status-warning-background);
-  --input-background-active: var(--salt-status-warning-background);
-  --input-background-hover: var(--salt-status-warning-background);
-  --input-borderColor: var(--salt-status-warning-borderColor);
-  --input-outlineColor: var(--salt-status-warning-borderColor);
-  --input-background-readonly: var(--salt-status-warning-background);
+.saltPillInput-bordered.saltPillInput-readOnly,
+.saltPillInput-bordered.saltPillInput-readOnly:hover {
+  border-style: var(--salt-editable-borderStyle-readonly);
+  border-color: var(--salt-editable-borderColor-readonly);
 }
-.saltPillInput-success,
-.saltPillInput-success:hover {
-  --input-background: var(--salt-status-success-background);
-  --input-background-active: var(--salt-status-success-background);
-  --input-background-hover: var(--salt-status-success-background);
-  --input-borderColor: var(--salt-status-success-borderColor);
-  --input-outlineColor: var(--salt-status-success-borderColor);
-  --input-background-readonly: var(--salt-status-success-background);
+.saltPillInput-bordered.saltPillInput-disabled,
+.saltPillInput-bordered.saltPillInput-disabled:hover {
+  border-style: var(--salt-editable-borderStyle-disabled);
+  border-color: var(--salt-editable-borderColor-disabled);
 }
-.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(--saltInput-letterSpacing, 0);
-  margin: 0;
-  min-width: 0;
-  overflow: hidden;
-  padding: 0;
-  text-align: var(--input-textAlign);
+.saltPillInput-activationIndicator {
+  left: 0;
+  bottom: 0;
   width: 100%;
+  position: absolute;
+  border-bottom: var(--salt-size-border) var(--salt-editable-borderStyle) var(--pillInput-borderColor);
 }
-.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:hover .saltPillInput-activationIndicator {
+  border-bottom-style: var(--salt-editable-borderStyle-hover);
+  border-bottom-color: var(--pillInput-borderColor-hover);
 }
-.saltPillInput-focused,
-.saltPillInput-focused:hover {
-  --input-borderColor: var(--input-outlineColor);
-  --input-borderWidth: var(--salt-editable-borderWidth-active);
-  outline: var(--saltInput-outline, var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--input-outlineColor));
+.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.saltPillInput-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);
+.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-focused.saltPillInput-disabled {
-  --input-borderWidth: var(--salt-size-border);
-  outline: none;
+.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-focused.saltPillInput-readOnly {
-  --input-borderWidth: var(--salt-size-border);
+.saltPillInput-bordered .saltPillInput-activationIndicator,
+.saltPillInput-bordered.saltPillInput-readOnly .saltPillInput-activationIndicator,
+.saltPillInput-bordered.saltPillInput-disabled:hover .saltPillInput-activationIndicator {
+  border-bottom-width: 0;
 }
-.saltPillInput-disabled .saltPillInput-input::selection {
-  background: none;
+.saltPillInput-bordered.saltPillInput-focused .saltPillInput-activationIndicator {
+  border-bottom-width: calc(var(--salt-size-border-strong) - var(--salt-size-border));
 }
-.saltPillInput.saltPillInput-disabled,
-.saltPillInput.saltPillInput-disabled:hover,
-.saltPillInput.saltPillInput-disabled:active {
-  --input-borderColor: var(--salt-editable-borderColor-disabled);
-  --input-borderStyle: var(--salt-editable-borderStyle-disabled);
-  --input-borderWidth: var(--salt-size-border);
-  background: var(--input-background-disabled);
-  cursor: var(--salt-editable-cursor-disabled);
-  color: var(--saltInput-color-disabled, var(--salt-content-primary-foreground-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-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-activationIndicator {
-  left: 0;
-  bottom: 0;
-  width: 100%;
-  position: absolute;
-  border-bottom: var(--input-borderWidth) var(--input-borderStyle) var(--input-borderColor);
+.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-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 {
+  --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);
+  --pillInput-borderColor-hover: var(--salt-status-success-borderColor);
+  --pillInput-outlineColor: var(--salt-status-success-borderColor);
 }
-.saltPillInput.saltPillInput-bordered {
-  --input-border: var(--salt-size-border) var(--salt-container-borderStyle) var(--input-borderColor);
-  --input-borderWidth: 0;
+.saltPillInput-focused,
+.saltPillInput-focused:hover {
+  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-bordered.saltPillInput-focused,
-.saltPillInput-bordered:active {
-  --input-borderWidth: var(--salt-editable-borderWidth-active);
+.saltPillInput.saltPillInput-readOnly {
+  background: var(--pillInput-background-readonly);
+  cursor: var(--salt-editable-cursor-readonly);
 }
-.saltPillInput-bordered.saltPillInput-readOnly,
-.saltPillInput-bordered.saltPillInput-disabled:hover,
-.saltPillInput-bordered.saltPillInput-disabled.saltPillInput-focused {
-  --input-borderWidth: 0;
+.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-startAdornmentContainer {
   align-items: center;
@@ -2658,6 +2894,12 @@ a:focus .saltCard-interactable.saltCard-disabled {
   column-gap: var(--salt-spacing-100);
   align-self: flex-start;
 }
+.saltPillInput-statusAdornmentContainer {
+  align-self: flex-start;
+  display: inline-flex;
+  align-items: center;
+  height: var(--salt-size-base);
+}
 .saltPillInput-readOnly .saltPillInput-startAdornmentContainer {
   margin-left: var(--salt-spacing-50);
 }
@@ -2701,18 +2943,12 @@ a:focus .saltCard-interactable.saltCard-disabled {
   display: contents;
 }
 .saltPillInput .saltPill:focus-visible {
-  background: var(--salt-selectable-background-hover);
+  background: var(--salt-content-foreground-highlight);
+  color: var(--salt-content-primary-foreground);
+  --saltIcon-color: var(--salt-content-primary-foreground);
   outline: none;
 }
-.saltPillInput .saltPill:hover {
-  background: var(--salt-selectable-background-hover);
-}
-.saltPillInput .saltPill:active {
-  background: var(--salt-actionable-primary-background-active);
-  --saltPill-color: var(--salt-actionable-primary-foreground-active);
-  --saltIcon-color: var(--salt-actionable-primary-foreground-active);
-}
-div[role=listitem] {
+.saltPillInput-pillList div[role=listitem] {
   display: inline;
 }
 .saltPillInput-overflowIndicator {
@@ -2722,6 +2958,37 @@ div[role=listitem] {
   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 {
@@ -2733,7 +3000,7 @@ div[role=listitem] {
   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);
@@ -2748,19 +3015,15 @@ div[role=listitem] {
   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;
 }
-.saltRadioButtonIcon > svg {
-  transform: translate(0px, 0px);
-}
 .saltRadioButton-input:focus-visible + .saltRadioButtonIcon {
   outline: var(--saltRadioButton-outline, var(--salt-focused-outline));
   outline-offset: var(--salt-focused-outlineOffset);
@@ -2818,11 +3081,14 @@ div[role=listitem] {
   min-width: var(--radioButton-size);
   min-height: var(--radioButton-size);
   border-radius: 50%;
+  position: relative;
   border: var(--salt-size-border) var(--salt-selectable-borderStyle) var(--salt-selectable-borderColor);
   color: var(--salt-selectable-foreground);
   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);
@@ -2861,6 +3127,10 @@ div[role=listitem] {
   border-color: var(--salt-selectable-borderColor-readonly);
   color: var(--salt-content-primary-foreground);
 }
+.saltRadioButtonIcon > svg {
+  position: absolute;
+  transform: scale(1.01);
+}
 
 /* src/salt-provider/SaltProvider.css */
 .salt-provider {
@@ -3170,7 +3440,7 @@ div[role=listitem] {
   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));
@@ -3897,4 +4167,4 @@ label.saltText small,
   }
 }
 
-/* src/dff5db70-591c-4470-81bd-0e7a0db50a3c.css */
+/* src/d12f0180-9b85-4416-9fff-76815881e1ac.css */