@salt-ds/core 1.35.0 → 1.36.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 {
@@ -500,7 +668,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 +693,6 @@ a:focus .saltCard-interactable.saltCard-disabled {
 }
 .saltCheckbox-input {
   cursor: inherit;
-  margin: 0;
   opacity: 0;
   padding: 0;
   position: absolute;
@@ -574,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,
@@ -763,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);
@@ -916,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;
@@ -949,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);
@@ -982,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);
@@ -989,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 */
@@ -1311,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));
@@ -1336,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);
@@ -1354,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);
@@ -1361,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;
@@ -1501,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 {
@@ -1876,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);
@@ -1901,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);
@@ -1919,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);
@@ -1926,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 {
@@ -2071,6 +2269,34 @@ 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 {
@@ -2414,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));
@@ -2497,20 +2723,15 @@ a:focus .saltCard-interactable.saltCard-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 +2748,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 +2816,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 +2827,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;
@@ -2739,6 +2958,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 +3000,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 +3015,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 +3087,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 +3440,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));
@@ -3916,4 +4167,4 @@ label.saltText small,
   }
 }
 
-/* src/b2ce0a41-ff2d-46d3-b9b0-a331dce86eca.css */
+/* src/d12f0180-9b85-4416-9fff-76815881e1ac.css */