@salt-ds/core 1.70.0 → 1.72.0

package/css/salt-core.css

@@ -34,6 +34,7 @@
   font-family: var(--salt-text-fontFamily);
   color: var(--salt-content-primary-foreground);
   font-weight: var(--salt-text-fontWeight-strong);
+  letter-spacing: var(--salt-text-letterSpacing);
   text-align: left;
   cursor: var(--salt-cursor-hover);
   box-sizing: border-box;
@@ -75,7 +76,8 @@
 }
 .saltAccordionHeader:disabled {
   background: transparent;
-  color: var(--salt-content-primary-foreground-disabled);
+  opacity: 0.4;
+  color: var(--salt-content-primary-foreground);
   cursor: var(--salt-cursor-disabled);
 }
 
@@ -145,8 +147,9 @@
   background: var(--saltAvatar-background, var(--avatar-background));
   font-size: var(--avatar-fontSize);
   line-height: var(--saltAvatar-lineHeight, var(--salt-text-notation-lineHeight));
-  font-family: var(--salt-text-notation-fontFamily);
+  font-family: var(--salt-text-fontFamily);
   font-weight: var(--salt-text-notation-fontWeight);
+  letter-spacing: var(--salt-text-letterSpacing);
   width: var(--avatar-container-size);
   min-width: var(--avatar-container-size);
   height: var(--avatar-container-size);
@@ -297,6 +300,7 @@ a.saltAvatar::after {
   font-weight: var(--salt-text-notation-fontWeight);
   font-family: var(--salt-text-fontFamily);
   line-height: var(--salt-text-notation-lineHeight);
+  letter-spacing: var(--salt-text-letterSpacing);
   background: var(--salt-sentiment-accent-background);
   color: var(--salt-content-bold-foreground);
   -webkit-font-smoothing: antialiased;
@@ -335,6 +339,7 @@ a.saltAvatar::after {
   font-size: var(--salt-text-fontSize);
   font-weight: var(--salt-text-fontWeight);
   line-height: var(--salt-text-lineHeight);
+  letter-spacing: var(--salt-text-letterSpacing);
   color: var(--salt-content-primary-foreground);
 }
 .saltBanner-icon.saltIcon {
@@ -409,7 +414,7 @@ a.saltAvatar::after {
   align-items: center;
   color: var(--salt-content-primary-foreground);
   display: inline-flex;
-  font-family: var(--salt-text-label-fontFamily);
+  font-family: var(--salt-text-fontFamily);
   font-size: var(--salt-text-label-fontSize);
   font-weight: var(--salt-text-fontWeight);
   gap: var(--salt-spacing-50);
@@ -533,8 +538,9 @@ a.saltAvatar::after {
 }
 .saltBreadcrumbs-disclosureItem[aria-disabled=true],
 .saltBreadcrumbs-disclosureItem[aria-disabled=true]:active {
-  background: var(--salt-selectable-background-disabled);
-  color: var(--salt-content-primary-foreground-disabled);
+  opacity: 0.4;
+  background: var(--salt-selectable-background);
+  color: var(--salt-content-primary-foreground);
   cursor: var(--salt-cursor-disabled);
   box-shadow: none;
 }
@@ -865,14 +871,17 @@ a.saltAvatar::after {
 .saltCard {
   border-width: var(--saltCard-borderWidth, var(--salt-size-fixed-100));
   border-style: var(--salt-borderStyle-solid);
+  border-color: var(--saltCard-borderColor, var(--card-borderColor));
   padding: var(--saltCard-padding, var(--card-padding));
   position: relative;
-  box-shadow: var(--salt-overlayable-shadow);
   transition: box-shadow var(--salt-duration-instant) ease-in-out;
   box-sizing: border-box;
   border-radius: var(--saltCard-borderRadius, var(--salt-palette-corner, 0));
   overflow: hidden;
   --card-accent-color: var(--salt-sentiment-accent-background);
+  --card-borderColor: var(--salt-container-borderColor);
+  --card-borderColor-strong: var(--salt-container-bold-borderColor);
+  --card-borderColor-subtle: var(--salt-container-subtle-borderColor);
   --card-padding: var(--salt-spacing-200);
 }
 .saltCard.saltCard-sectioned {
@@ -889,19 +898,33 @@ a.saltAvatar::after {
 }
 .saltCard-primary {
   background: var(--saltCard-background, var(--salt-container-primary-background));
-  border-color: var(--salt-container-bold-borderColor);
 }
 .saltCard-secondary {
   background: var(--saltCard-background, var(--salt-container-secondary-background));
-  border-color: var(--salt-container-bold-borderColor);
 }
 .saltCard-tertiary {
   background: var(--saltCard-background, var(--salt-container-tertiary-background));
-  border-color: var(--salt-container-bold-borderColor);
 }
 .saltCard-ghost {
   background: var(--saltCard-background, var(--salt-container-ghost-background));
-  border-color: var(--salt-container-ghost-borderColor);
+  --card-borderColor: var(--salt-container-ghost-borderColor);
+  --card-borderColor-strong: var(--salt-container-ghost-bold-borderColor);
+  --card-borderColor-subtle: var(--salt-container-ghost-subtle-borderColor);
+}
+.saltCard-flat {
+  box-shadow: var(--saltCard-boxShadow-flat, none);
+}
+.saltCard-raised {
+  box-shadow: var(--saltCard-boxShadow, var(--salt-overlayable-shadow));
+}
+.saltCard-borderColorStrong {
+  --card-borderColor: var(--card-borderColor-strong);
+}
+.saltCard-borderColorSubtle {
+  --card-borderColor: var(--card-borderColor-subtle);
+}
+.saltCard-borderColorNone {
+  --card-borderColor: transparent;
 }
 .saltCard-accent::after {
   content: "";
@@ -941,10 +964,9 @@ a:focus .saltCard-interactable,
   box-shadow: var(--saltCard-boxShadow-hover, var(--salt-overlayable-shadow-hover));
   cursor: var(--saltCard-cursor-hover, var(--salt-cursor-hover));
   border-color: var(--salt-actionable-accented-borderColor-hover);
-  position: relative;
 }
 @media (hover: hover) {
-  .saltCard-hoverable:hover {
+  .saltCard-hoverable:not(.saltCard-disabled):hover {
     box-shadow: var(--saltCard-boxShadow-hover, var(--salt-overlayable-shadow-hover));
     border-color: var(--salt-actionable-accented-borderColor-hover);
   }
@@ -1074,6 +1096,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);
+  letter-spacing: var(--salt-text-letterSpacing);
 }
 .saltCheckbox-disabled {
   color: var(--salt-content-primary-foreground);
@@ -1177,6 +1200,19 @@ a:focus .saltCard-interactable.saltCard-disabled {
   border-color: var(--salt-selectable-borderColor);
   color: var(--salt-selectable-foreground);
 }
+.saltCheckbox-disabled:hover .saltCheckboxIcon,
+.saltCheckbox-disabled:hover .saltCheckboxIcon-indeterminate {
+  border-color: var(--salt-selectable-borderColor);
+  color: var(--salt-selectable-foreground);
+}
+.saltCheckbox-disabled:hover .saltCheckboxIcon-checked {
+  border-color: var(--salt-selectable-borderColor-selected);
+  color: var(--salt-selectable-foreground-selected);
+}
+.saltCheckbox-disabled:hover .saltCheckboxIcon-checked.saltCheckboxIcon-indeterminate {
+  border-color: var(--salt-selectable-borderColor);
+  color: var(--salt-selectable-foreground);
+}
 .saltCheckboxIcon-disabled,
 .saltCheckbox:hover .saltCheckboxIcon-disabled,
 .saltCheckboxIcon-disabled.saltCheckboxIcon-indeterminate,
@@ -1480,6 +1516,14 @@ a:focus .saltCard-interactable.saltCard-disabled {
   top: 0;
   box-sizing: border-box;
 }
+.saltDrawer.saltDrawer-sectioned {
+  padding: 0;
+}
+@supports selector(:has(*)) {
+  .saltDrawer:has(> .saltDrawerHeader, > .saltDrawerContent, > .saltDrawerFooter) {
+    padding: 0;
+  }
+}
 .saltDrawer-primary {
   --drawer-background: var(--salt-container-primary-background);
 }
@@ -1547,6 +1591,94 @@ a:focus .saltCard-interactable.saltCard-disabled {
   margin-right: calc(var(--salt-spacing-300) * -1);
 }
 
+/* src/drawer/DrawerContent.css */
+.saltDrawerContent {
+  color: var(--salt-content-primary-foreground);
+  padding: 0 var(--salt-spacing-300);
+  flex: 1 1 auto;
+  min-height: var(--salt-text-lineHeight);
+  display: flex;
+  box-sizing: border-box;
+}
+.saltDrawerContent:first-child {
+  padding-top: var(--salt-spacing-300);
+}
+.saltDrawerContent:last-child {
+  padding-bottom: var(--salt-spacing-300);
+}
+.saltDrawerContent-inner {
+  flex: 1;
+  min-width: 0;
+  overflow-y: auto;
+  border-top: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) transparent;
+  border-bottom: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) transparent;
+  box-sizing: border-box;
+}
+.saltDrawerContent-inner:focus-visible {
+  outline: var(--salt-focused-outline);
+  outline-offset: calc(-1 * var(--salt-focused-outlineWidth));
+}
+.saltDrawerContent-inner.saltDrawerContent-scrollTop {
+  border-top-color: var(--salt-separable-tertiary-borderColor);
+}
+.saltDrawerContent-inner.saltDrawerContent-scrollBottom {
+  border-bottom-color: var(--salt-separable-tertiary-borderColor);
+}
+
+/* src/drawer/DrawerFooter.css */
+.saltDrawerFooter {
+  padding: var(--salt-spacing-300);
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  gap: var(--salt-spacing-100);
+  flex-shrink: 0;
+  box-sizing: border-box;
+}
+
+/* src/drawer/DrawerHeader.css */
+.saltDrawerHeader {
+  padding: var(--salt-spacing-300);
+  display: flex;
+  gap: var(--salt-spacing-100);
+  flex-shrink: 0;
+  box-sizing: border-box;
+}
+.saltDrawerHeader-header {
+  margin: 0;
+}
+.saltDrawerHeader-container {
+  flex-grow: 1;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--salt-spacing-50);
+  padding-top: calc((var(--salt-size-base) - var(--salt-text-h2-lineHeight)) / 2);
+  align-items: flex-start;
+  min-width: 0;
+  word-break: break-word;
+}
+.saltDrawerHeader-header > .saltText {
+  display: block;
+  margin: 0;
+}
+.saltDrawerHeader-actionsContainer {
+  align-self: flex-start;
+  display: flex;
+}
+.saltDrawerHeader-withAccent {
+  position: relative;
+}
+.saltDrawerHeader-withAccent::before {
+  content: "";
+  position: absolute;
+  top: var(--salt-spacing-300);
+  bottom: var(--salt-spacing-300);
+  left: 0;
+  width: var(--salt-size-bar);
+  background: var(--salt-sentiment-accent-background);
+}
+
 /* src/dropdown/Dropdown.css */
 .saltDropdown {
   all: unset;
@@ -1733,6 +1865,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
   font-size: var(--saltFileDropZone-fontSize, var(--salt-text-fontSize));
   font-family: var(--saltFileDropZone-fontFamily, var(--salt-text-fontFamily));
   line-height: var(--saltFileDropZone-lineHeight, var(--salt-text-lineHeight));
+  letter-spacing: var(--saltFileDropZone-letterSpacing, var(--salt-text-letterSpacing));
   box-sizing: border-box;
 }
 .saltFileDropZone-active {
@@ -1849,12 +1982,17 @@ a:focus .saltCard-interactable.saltCard-disabled {
   font-size: var(--salt-text-fontSize);
   font-weight: var(--salt-text-fontWeight);
   line-height: var(--salt-text-lineHeight);
+  letter-spacing: var(--salt-text-letterSpacing);
 }
 .saltFormField-labelTop {
   gap: var(--salt-spacing-75);
   grid-auto-rows: min-content;
   grid-template-areas: "label" "controls";
 }
+.saltFormField-labelTop.saltFormField-hasControls {
+  align-content: start;
+  grid-template-rows: min-content minmax(var(--salt-size-base), auto);
+}
 .saltFormField-labelTop .saltFormFieldHelperText {
   grid-area: 3 / 1;
 }
@@ -1862,10 +2000,16 @@ a:focus .saltCard-interactable.saltCard-disabled {
   grid-template-columns: var(--saltFormField-label-width, var(--formField-label-width, 40%)) 1fr;
   grid-template-areas: "label controls";
 }
+.saltFormField-labelLeft.saltFormField-hasControls {
+  grid-template-rows: minmax(var(--salt-size-base), auto);
+}
 .saltFormField-labelRight {
   grid-template-columns: var(--saltFormField-label-width, var(--formField-label-width, 40%)) 1fr;
   grid-template-areas: "label controls";
 }
+.saltFormField-labelRight.saltFormField-hasControls {
+  grid-template-rows: minmax(var(--salt-size-base), auto);
+}
 .saltFormField-labelLeft .saltFormFieldHelperText,
 .saltFormField-labelRight .saltFormFieldHelperText {
   grid-area: 2 / 2;
@@ -1877,19 +2021,15 @@ a:focus .saltCard-interactable.saltCard-disabled {
 .saltFormField-labelRight .saltFormFieldLabel {
   text-align: right;
 }
-.saltFormField-controls {
-  align-items: center;
-  display: grid;
-  grid-auto-columns: minmax(0, 1fr);
-  grid-auto-flow: column;
-  grid-column-gap: var(--salt-spacing-100);
-}
 .saltFormFieldLabel {
   grid-area: label;
 }
 .saltFormFieldHelperText {
   grid-area: helperText;
 }
+.saltFormField-labelTop > :not(.saltFormFieldLabel):not(.saltFormFieldHelperText) {
+  align-self: center;
+}
 .saltFormField-disabled {
   --saltInput-outline: none;
   --saltCheckbox-outline: none;
@@ -1899,6 +2039,9 @@ a:focus .saltCard-interactable.saltCard-disabled {
   .saltFormField:not(:has(.saltFormFieldLabel)) {
     grid-template-areas: "controls";
   }
+  .saltFormField-hasControls:not(:has(.saltFormFieldLabel)) {
+    grid-template-rows: minmax(var(--salt-size-base), auto);
+  }
 }
 
 /* src/form-field/FormFieldHelperText.css */
@@ -1909,7 +2052,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
   width: 100%;
 }
 .saltFormFieldHelperText .saltText {
-  font-style: var(--saltFormField-helperText-fontStyle, var(--salt-typography-textDecoration-italic));
+  font-style: var(--saltFormField-helperText-fontStyle, var(--salt-typography-fontStyle-italic, italic));
 }
 .saltFormFieldHelperText-withValidation {
   column-gap: var(--salt-spacing-75);
@@ -1920,12 +2063,11 @@ a:focus .saltCard-interactable.saltCard-disabled {
 
 /* src/form-field/FormFieldLabel.css */
 .saltFormFieldLabel.saltText {
-  font-weight: var(--saltFormField-label-fontWeight, var(--salt-text-fontWeight-strong));
+  font-size: var(--formFieldLabel-fontSize);
+  line-height: var(--formFieldLabel-lineHeight);
+  font-weight: var(--saltFormField-label-fontWeight, var(--formFieldLabel-fontWeight));
   width: 100%;
 }
-.saltFormFieldLabel:hover + .saltFormField-controls * {
-  --input-borderColor: var(--input-borderColor-hover);
-}
 .saltFormField-labelLeft .saltFormFieldLabel.saltText {
   align-self: baseline;
   padding-top: var(--salt-spacing-100);
@@ -1933,13 +2075,21 @@ a:focus .saltCard-interactable.saltCard-disabled {
 .saltFormField-labelTop .saltFormFieldLabel.saltText {
   width: fit-content;
 }
-.saltFormFieldLabel-necessityLabel {
-  font-weight: var(--salt-text-fontWeight);
-  font-style: var(--salt-typography-textDecoration-italic);
+.saltFormFieldLabel-label {
+  --formFieldLabel-fontSize: var(--salt-text-label-fontSize);
+  --formFieldLabel-lineHeight: var(--salt-text-label-lineHeight);
+  --formFieldLabel-fontWeight: var(--salt-text-label-fontWeight-strong);
+  --formFieldLabel-necessity-fontWeight: var(--salt-text-label-fontWeight);
 }
-.saltFormFieldLabel-sentence.saltText {
-  color: var(--salt-content-primary-foreground);
-  font-size: var(--salt-text-fontSize);
+.saltFormFieldLabel-sentence {
+  --formFieldLabel-fontSize: var(--salt-text-fontSize);
+  --formFieldLabel-lineHeight: var(--salt-text-lineHeight);
+  --formFieldLabel-fontWeight: var(--salt-text-fontWeight-strong);
+  --formFieldLabel-necessity-fontWeight: var(--salt-text-fontWeight);
+}
+.saltFormFieldLabel-necessityLabel {
+  font-style: var(--salt-typography-fontStyle-italic, italic);
+  font-weight: var(--formFieldLabel-necessity-fontWeight);
 }
 
 /* src/grid-item/GridItem.css */
@@ -2163,7 +2313,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
   flex: 1;
   font: inherit;
   height: 100%;
-  letter-spacing: var(--saltInput-letterSpacing, 0);
+  letter-spacing: var(--saltInput-letterSpacing, var(--salt-text-letterSpacing));
   margin: 0;
   min-width: 0;
   overflow: hidden;
@@ -2186,8 +2336,8 @@ a:focus .saltCard-interactable.saltCard-disabled {
 .saltInteractableCard {
   border-width: var(--saltInteractableCard-borderWidth, var(--salt-size-fixed-100));
   border-style: var(--saltInteractableCard-borderStyle, var(--salt-borderStyle-solid));
+  border-color: var(--saltInteractableCard-borderColor, var(--interactableCard-borderColor));
   border-radius: var(--saltInteractableCard-borderRadius, var(--salt-palette-corner, 0));
-  box-shadow: var(--salt-overlayable-shadow);
   display: block;
   padding: var(--saltInteractableCard-padding, var(--card-padding));
   position: relative;
@@ -2195,6 +2345,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
   transition: box-shadow var(--salt-duration-instant) ease-in-out;
   overflow: hidden;
   --card-accent-color: var(--salt-sentiment-accent-background);
+  --interactableCard-borderColor: var(--salt-container-borderColor);
   --card-padding: var(--salt-spacing-200);
 }
 .saltInteractableCard.saltInteractableCard-sectioned {
@@ -2211,15 +2362,27 @@ a:focus .saltCard-interactable.saltCard-disabled {
 }
 .saltInteractableCard-primary {
   background: var(--saltInteractableCard-background, var(--salt-container-primary-background));
-  border-color: var(--salt-container-bold-borderColor);
 }
 .saltInteractableCard-secondary {
   background: var(--saltInteractableCard-background, var(--salt-container-secondary-background));
-  border-color: var(--salt-container-bold-borderColor);
 }
 .saltInteractableCard-tertiary {
   background: var(--saltInteractableCard-background, var(--salt-container-tertiary-background));
-  border-color: var(--salt-container-bold-borderColor);
+}
+.saltInteractableCard-flat {
+  box-shadow: var(--saltInteractableCard-boxShadow-flat, none);
+}
+.saltInteractableCard-raised {
+  box-shadow: var(--saltInteractableCard-boxShadow, var(--salt-overlayable-shadow));
+}
+.saltInteractableCard-borderColorStrong {
+  --interactableCard-borderColor: var(--salt-container-bold-borderColor);
+}
+.saltInteractableCard-borderColorSubtle {
+  --interactableCard-borderColor: var(--salt-container-subtle-borderColor);
+}
+.saltInteractableCard-borderColorNone {
+  --interactableCard-borderColor: transparent;
 }
 .saltInteractableCard-accent::after {
   content: "";
@@ -2265,10 +2428,6 @@ a:focus .saltCard-interactable.saltCard-disabled {
     box-shadow: var(--salt-overlayable-shadow-hover);
     border-color: var(--salt-actionable-accented-borderColor-hover);
   }
-  .saltInteractableCard-disabled:hover {
-    cursor: var(--salt-cursor-disabled);
-    box-shadow: none;
-  }
 }
 .saltInteractableCard-selected,
 .saltInteractableCard:active,
@@ -2278,15 +2437,18 @@ a:focus .saltCard-interactable.saltCard-disabled {
   border-color: var(--salt-actionable-accented-borderColor-active);
 }
 .saltInteractableCard-disabled,
-.saltInteractableCard-disabled:focus,
-.saltInteractableCard-disabled:focus-visible,
 .saltInteractableCard-disabled:hover,
 .saltInteractableCard-disabled:active {
+  border-color: var(--saltInteractableCard-borderColor, var(--interactableCard-borderColor));
   box-shadow: none;
   cursor: var(--salt-cursor-disabled);
-  outline: none;
   opacity: 0.4;
 }
+.saltInteractableCard-disabled.saltInteractableCard-selected,
+.saltInteractableCard-disabled.saltInteractableCard-selected:hover,
+.saltInteractableCard-disabled.saltInteractableCard-selected:active {
+  border-color: var(--salt-actionable-accented-borderColor-active);
+}
 .saltInteractableCard-disabled div {
   pointer-events: none;
 }
@@ -2327,6 +2489,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
   font-style: normal;
   font-weight: var(--salt-text-fontWeight);
   line-height: var(--salt-text-lineHeight);
+  letter-spacing: var(--salt-text-letterSpacing);
 }
 
 /* src/link/Link.css */
@@ -2334,7 +2497,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
   --link-color: "inherit";
   --link-color-hover: "inherit";
   --link-color-active: "inherit";
-  --link-color-visited: var(--salt-content-foreground-visited);
+  --link-color-visited: var(--salt-content-foreground-visited, var(--link-color));
   --link-color-focus: "inherit";
   --link-focus-outlineColor: currentColor;
   --link-fontFamily: var(--salt-text-fontFamily);
@@ -2362,7 +2525,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
   --link-color-active: var(--salt-content-primary-foreground);
   --link-color-focus: var(--salt-content-primary-foreground);
   --link-focus-outlineColor: var(--salt-focused-outlineColor);
-  --link-color-visited: var(--salt-content-foreground-visited);
+  --link-color-visited: var(--salt-content-foreground-visited, var(--link-color));
 }
 .saltLink-secondary {
   --link-color: var(--salt-content-secondary-foreground);
@@ -2370,7 +2533,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
   --link-color-active: var(--salt-content-secondary-foreground);
   --link-color-focus: var(--salt-content-secondary-foreground);
   --link-focus-outlineColor: var(--salt-focused-outlineColor);
-  --link-color-visited: var(--salt-content-foreground-visited);
+  --link-color-visited: var(--salt-content-foreground-visited, var(--link-color));
 }
 .saltLink-accent {
   --link-color: var(--salt-content-accent-foreground);
@@ -2378,7 +2541,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
   --link-color-active: var(--salt-content-accent-foreground);
   --link-color-focus: var(--salt-content-accent-foreground);
   --link-focus-outlineColor: var(--salt-focused-outlineColor);
-  --link-color-visited: var(--salt-content-foreground-visited);
+  --link-color-visited: var(--salt-content-foreground-visited, var(--link-color));
 }
 .saltLink .saltLink-icon {
   margin-left: var(--salt-spacing-75);
@@ -2417,12 +2580,117 @@ a:focus .saltCard-interactable.saltCard-disabled {
   -webkit-user-select: none;
 }
 
+/* src/link-button/LinkButton.css */
+.saltLinkButton {
+  --linkButton-borderWidth: var(--salt-size-fixed-100);
+  align-items: var(--saltLinkButton-alignItems, center);
+  appearance: none;
+  background: var(--saltLinkButton-background, var(--linkButton-background));
+  border-color: var(--saltLinkButton-borderColor, var(--linkButton-borderColor, transparent));
+  border-style: var(--saltLinkButton-borderStyle, solid);
+  border-width: var(--saltLinkButton-borderWidth, var(--linkButton-borderWidth));
+  border-radius: var(--saltLinkButton-borderRadius, var(--salt-palette-corner-weak, 0));
+  color: var(--saltLinkButton-text-color, var(--linkButton-text-color));
+  display: inline-flex;
+  gap: var(--salt-spacing-50);
+  justify-content: var(--saltLinkButton-justifyContent, center);
+  font-size: var(--saltLinkButton-fontSize, var(--salt-text-fontSize));
+  font-family: var(--saltLinkButton-fontFamily, var(--salt-text-action-fontFamily));
+  line-height: var(--saltLinkButton-lineHeight, var(--salt-text-lineHeight));
+  letter-spacing: var(--saltLinkButton-letterSpacing, var(--salt-text-action-letterSpacing));
+  text-transform: var(--saltLinkButton-textTransform, var(--salt-text-action-textTransform));
+  padding: 0 var(--saltLinkButton-padding, calc(var(--salt-spacing-100) - var(--saltLinkButton-borderWidth, var(--linkButton-borderWidth))));
+  margin: var(--saltLinkButton-margin, 0);
+  height: var(--saltLinkButton-height, var(--salt-size-base));
+  min-width: var(--saltLinkButton-minWidth, unset);
+  position: relative;
+  text-align: var(--saltLinkButton-textAlign, var(--salt-text-action-textAlign));
+  text-decoration: var(--linkButton-textDecoration, var(--salt-typography-textDecoration-underline));
+  text-underline-offset: var(--salt-spacing-fixed-200);
+  transition: none;
+  width: var(--saltLinkButton-width, auto);
+  -webkit-appearance: none;
+  -webkit-tap-highlight-color: transparent;
+  font-weight: var(--saltLinkButton-fontWeight, var(--salt-text-action-fontWeight));
+}
+.saltLinkButton-underlineDefault {
+  --linkButton-textDecoration: var(--salt-typography-textDecoration-underline);
+  --linkButton-textDecoration-hover: var(--salt-typography-textDecoration-none);
+  --linkButton-textDecoration-focus: var(--linkButton-textDecoration-hover);
+}
+.saltLinkButton-underlineNever {
+  --linkButton-textDecoration: var(--salt-typography-textDecoration-none);
+  --linkButton-textDecoration-hover: var(--salt-typography-textDecoration-none);
+  --linkButton-textDecoration-focus: var(--salt-typography-textDecoration-none);
+}
+.saltLinkButton-externalLinkADA {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+  user-select: none;
+  -webkit-user-select: none;
+}
+@media (hover: hover) {
+  .saltLinkButton:hover {
+    background: var(--saltLinkButton-background-hover, var(--linkButton-background-hover));
+    color: var(--saltLinkButton-text-color-hover, var(--linkButton-text-color-hover));
+    border-color: var(--saltLinkButton-borderColor-hover, var(--linkButton-borderColor-hover));
+    cursor: var(--salt-cursor-hover);
+    text-decoration: var(--linkButton-textDecoration-hover, var(--salt-typography-textDecoration-none));
+  }
+}
+.saltLinkButton:focus-visible {
+  outline: var(--salt-focused-outline);
+  background: var(--saltLinkButton-background-hover, var(--linkButton-background-hover));
+  color: var(--saltLinkButton-text-color-hover, var(--linkButton-text-color-hover));
+  border-color: var(--saltLinkButton-borderColor-hover, var(--linkButton-borderColor-hover));
+  text-decoration: var(--linkButton-textDecoration-focus, var(--salt-typography-textDecoration-none));
+}
+.saltLinkButton.saltLinkButton-active:focus-visible,
+.saltLinkButton:focus-visible:active,
+.saltLinkButton:active,
+.saltLinkButton.saltLinkButton-active {
+  background: var(--saltLinkButton-background-active, var(--linkButton-background-active));
+  color: var(--saltLinkButton-text-color-active, var(--linkButton-text-color-active));
+  border-color: var(--saltLinkButton-borderColor-active, var(--linkButton-borderColor-active));
+  cursor: var(--salt-cursor-active);
+}
+.saltLinkButton-neutral {
+  --linkButton-text-color: var(--salt-actionable-subtle-foreground);
+  --linkButton-text-color-hover: var(--salt-actionable-subtle-foreground-hover);
+  --linkButton-text-color-active: var(--salt-actionable-subtle-foreground-active);
+  --linkButton-background: var(--salt-actionable-subtle-background);
+  --linkButton-background-hover: var(--salt-actionable-subtle-background-hover);
+  --linkButton-background-active: var(--salt-actionable-subtle-background-active);
+  --linkButton-borderColor: var(--salt-actionable-subtle-borderColor);
+  --linkButton-borderColor-hover: var(--salt-actionable-subtle-borderColor-hover);
+  --linkButton-borderColor-active: var(--salt-actionable-subtle-borderColor-active);
+}
+.saltLinkButton-accented {
+  --linkButton-text-color: var(--salt-actionable-accented-subtle-foreground);
+  --linkButton-text-color-hover: var(--salt-actionable-accented-subtle-foreground-hover);
+  --linkButton-text-color-active: var(--salt-actionable-accented-subtle-foreground-active);
+  --linkButton-background: var(--salt-actionable-accented-subtle-background);
+  --linkButton-background-hover: var(--salt-actionable-accented-subtle-background-hover);
+  --linkButton-background-active: var(--salt-actionable-accented-subtle-background-active);
+  --linkButton-borderColor: var(--salt-actionable-accented-subtle-borderColor);
+  --linkButton-borderColor-hover: var(--salt-actionable-accented-subtle-borderColor-hover);
+  --linkButton-borderColor-active: var(--salt-actionable-accented-subtle-borderColor-active);
+}
+
 /* src/link-card/LinkCard.css */
 .saltLinkCard {
   border-radius: var(--saltLinkCard-borderRadius, var(--salt-palette-corner, 0));
   border-style: var(--saltLinkCard-borderStyle, var(--salt-borderStyle-solid));
   border-width: var(--saltLinkCard-borderWidth, var(--salt-size-fixed-100));
-  box-shadow: var(--salt-overlayable-shadow);
+  border-color: var(--saltLinkCard-borderColor, var(--linkCard-borderColor));
   display: block;
   overflow: hidden;
   padding: var(--saltLinkCard-padding, var(--card-padding));
@@ -2430,6 +2698,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
   text-decoration: none;
   transition: box-shadow var(--salt-duration-instant) ease-in-out;
   --linkCard-accent-color: var(--salt-sentiment-accent-background);
+  --linkCard-borderColor: var(--salt-container-borderColor);
   --card-padding: var(--salt-spacing-200);
 }
 .saltLinkCard.saltLinkCard-sectioned {
@@ -2446,15 +2715,27 @@ a:focus .saltCard-interactable.saltCard-disabled {
 }
 .saltLinkCard-primary {
   background: var(--saltLinkCard-background, var(--salt-container-primary-background));
-  border-color: var(--salt-container-bold-borderColor);
 }
 .saltLinkCard-secondary {
   background: var(--saltLinkCard-background, var(--salt-container-secondary-background));
-  border-color: var(--salt-container-bold-borderColor);
 }
 .saltLinkCard-tertiary {
   background: var(--saltLinkCard-background, var(--salt-container-tertiary-background));
-  border-color: var(--salt-container-bold-borderColor);
+}
+.saltLinkCard-flat {
+  box-shadow: var(--saltLinkCard-boxShadow-flat, none);
+}
+.saltLinkCard-raised {
+  box-shadow: var(--saltLinkCard-boxShadow, var(--salt-overlayable-shadow));
+}
+.saltLinkCard-borderColorStrong {
+  --linkCard-borderColor: var(--salt-container-bold-borderColor);
+}
+.saltLinkCard-borderColorSubtle {
+  --linkCard-borderColor: var(--salt-container-subtle-borderColor);
+}
+.saltLinkCard-borderColorNone {
+  --linkCard-borderColor: transparent;
 }
 .saltLinkCard-accent::after {
   content: "";
@@ -2570,10 +2851,11 @@ a:focus .saltCard-interactable.saltCard-disabled {
   padding: var(--salt-spacing-50) var(--salt-spacing-100);
   border-bottom: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-separable-tertiary-borderColor);
   min-height: var(--salt-size-base);
-  font-family: var(--salt-text-label-fontFamily);
+  font-family: var(--salt-text-fontFamily);
   font-size: var(--salt-text-label-fontSize);
   font-weight: var(--salt-text-fontWeight-strong);
   line-height: var(--salt-text-label-lineHeight);
+  letter-spacing: var(--salt-text-letterSpacing);
   color: var(--salt-content-secondary-foreground);
 }
 
@@ -2632,6 +2914,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
   font-size: var(--salt-text-fontSize);
   font-weight: var(--salt-text-fontWeight);
   line-height: var(--salt-text-lineHeight);
+  letter-spacing: var(--salt-text-letterSpacing);
 }
 .saltMegaMenuListItem-wrapper:focus-visible {
   outline: var(--salt-focused-outline);
@@ -2677,7 +2960,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
   color: var(--salt-content-secondary-foreground);
   font-size: var(--salt-text-label-fontSize);
   font-weight: var(--salt-text-label-fontWeight-strong);
-  font-family: var(--salt-text-label-fontFamily);
+  font-family: var(--salt-text-fontFamily);
   line-height: var(--salt-text-label-lineHeight);
   letter-spacing: var(--salt-text-letterSpacing);
   height: calc(var(--salt-size-base) + var(--salt-spacing-100));
@@ -2727,8 +3010,9 @@ a:focus .saltCard-interactable.saltCard-disabled {
 }
 .saltMenuItem[aria-disabled=true],
 .saltMenuItem[aria-disabled=true]:active {
-  background: var(--salt-selectable-background-disabled);
-  color: var(--salt-content-primary-foreground-disabled);
+  opacity: 0.4;
+  background: var(--salt-selectable-background);
+  color: var(--salt-content-primary-foreground);
   cursor: var(--salt-cursor-disabled);
   box-shadow: none;
 }
@@ -3003,6 +3287,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
   font-family: var(--salt-text-fontFamily);
   font-size: var(--salt-text-fontSize);
   font-weight: var(--salt-text-fontWeight);
+  letter-spacing: var(--salt-text-letterSpacing);
 }
 .saltNavigationItem-wrapper {
   display: flex;
@@ -3375,7 +3660,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
   color: var(--salt-content-secondary-foreground);
   font-size: var(--salt-text-label-fontSize);
   font-weight: var(--salt-text-label-fontWeight-strong);
-  font-family: var(--salt-text-label-fontFamily);
+  font-family: var(--salt-text-fontFamily);
   line-height: var(--salt-text-label-lineHeight);
   letter-spacing: var(--salt-text-letterSpacing);
   min-height: calc(var(--salt-size-base) + var(--salt-spacing-100));
@@ -3415,14 +3700,26 @@ a:focus .saltCard-interactable.saltCard-disabled {
   display: none;
 }
 
+/* src/overlay/OverlayFooter.css */
+.saltOverlayFooter {
+  padding: var(--saltOverlay-footer-padding, var(--salt-spacing-100));
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--salt-spacing-100);
+  flex-shrink: 0;
+  box-sizing: border-box;
+}
+
 /* src/overlay/OverlayHeader.css */
 .saltOverlayHeader {
-  padding: var(--salt-spacing-100);
+  padding: var(--saltOverlay-header-padding, var(--salt-spacing-100));
   width: 100%;
   display: flex;
   flex-direction: row;
   justify-content: stretch;
   gap: var(--salt-spacing-100);
+  flex-shrink: 0;
   box-sizing: border-box;
 }
 .saltOverlayHeader-container {
@@ -3431,18 +3728,17 @@ a:focus .saltCard-interactable.saltCard-disabled {
   display: flex;
   flex-direction: column;
   gap: var(--salt-spacing-50);
-  padding-top: calc((var(--salt-size-base) - var(--salt-text-h4-lineHeight)) / 2);
   align-items: flex-start;
 }
+.saltOverlayHeader-withActions .saltOverlayHeader-container {
+  padding-top: calc((var(--salt-size-base) - var(--salt-text-h4-lineHeight)) / 2);
+}
 .saltOverlayHeader-header {
   margin: 0;
 }
 .saltOverlayHeader-actionsContainer {
   align-self: flex-start;
 }
-.saltOverlayHeader ~ .saltOverlayPanelContent {
-  padding-top: 0;
-}
 
 /* src/overlay/OverlayPanel.css */
 .saltOverlayPanel {
@@ -3452,6 +3748,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
   font-size: var(--saltOverlay-fontSize, var(--salt-text-fontSize));
   font-weight: var(--saltOverlay-fontWeight, var(--salt-text-fontWeight));
   line-height: var(--saltOverlay-lineHeight, var(--salt-text-lineHeight));
+  letter-spacing: var(--salt-text-letterSpacing);
   border-color: var(--overlay-borderColor);
   border-style: var(--saltOverlay-borderStyle, var(--salt-borderStyle-solid));
   border-width: var(--saltOverlay-borderWidth, var(--salt-size-fixed-100));
@@ -3461,6 +3758,25 @@ a:focus .saltCard-interactable.saltCard-disabled {
   color: var(--saltOverlay-text-color, var(--salt-content-primary-foreground));
   z-index: var(--saltOverlay-zIndex, var(--salt-zIndex-flyover));
   width: max-content;
+  max-width: 100vw;
+  max-height: 100vh;
+  box-sizing: border-box;
+}
+.saltOverlayPanel-content {
+  max-width: inherit;
+  max-height: inherit;
+  overflow-y: auto;
+  box-sizing: border-box;
+}
+.saltOverlayPanel-content.saltOverlayPanel-sectioned {
+  display: flex;
+  flex-direction: column;
+}
+@supports selector(:has(*)) {
+  .saltOverlayPanel-content:has(> .saltOverlayHeader, > .saltOverlayPanelContent, > .saltOverlayFooter) {
+    display: flex;
+    flex-direction: column;
+  }
 }
 
 /* src/overlay/OverlayPanelCloseButton.css */
@@ -3484,6 +3800,19 @@ a:focus .saltCard-interactable.saltCard-disabled {
   position: relative;
   overflow: hidden;
   padding: var(--saltOverlay-content-padding, var(--salt-spacing-100));
+  flex: 1 1 auto;
+  min-height: 0;
+  display: flex;
+}
+.saltOverlayHeader ~ .saltOverlayPanelContent {
+  padding-top: 0;
+}
+.saltOverlayPanelContent:not(:last-child) {
+  padding-bottom: 0;
+}
+.saltOverlayPanelContent-container {
+  flex: 1;
+  min-width: 0;
 }
 .saltOverlayPanelContent-overflow {
   padding-right: var(--salt-spacing-100);
@@ -3492,7 +3821,10 @@ a:focus .saltCard-interactable.saltCard-disabled {
   overflow-y: auto;
 }
 .saltOverlayPanelContent-overflow.saltOverlayPanelContent-scroll-top {
-  border-top: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-separable-tertiary-borderColor);
+  border-top-color: var(--salt-separable-tertiary-borderColor);
+}
+.saltOverlayPanelContent-overflow.saltOverlayPanelContent-scroll-bottom {
+  border-bottom-color: var(--salt-separable-tertiary-borderColor);
 }
 
 /* src/pagination/CompactInput.css */
@@ -3624,9 +3956,12 @@ a:focus .saltCard-interactable.saltCard-disabled {
   overflow: auto;
   padding: var(--saltPanel-padding, var(--salt-spacing-300));
   width: var(--saltPanel-width, 100%);
-  border-radius: var(--saltPanel-borderRadius, var(--salt-palette-corner, 0));
   box-sizing: border-box;
 }
+.saltPanel-raised {
+  border-radius: var(--saltPanel-borderRadius, var(--salt-palette-corner, 0));
+  box-shadow: var(--saltPanel-boxShadow, var(--salt-overlayable-shadow));
+}
 
 /* src/parent-child-layout/ParentChildLayout.css */
 .saltParentChildLayout {
@@ -3978,7 +4313,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
   flex: 1;
   font: inherit;
   height: 100%;
-  letter-spacing: var(--saltPillInput-letterSpacing, 0);
+  letter-spacing: var(--saltPillInput-letterSpacing, var(--salt-text-letterSpacing));
   margin: 0;
   min-width: 0;
   overflow: hidden;
@@ -4008,6 +4343,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);
+  letter-spacing: var(--salt-text-letterSpacing);
   --radioButton-icon-margin: calc((var(--salt-text-lineHeight) - var(--salt-size-selectable)) / 2);
 }
 .saltRadioButton-disabled {
@@ -4104,6 +4440,10 @@ a:focus .saltCard-interactable.saltCard-disabled {
   border-color: var(--salt-selectable-borderColor-hover);
   color: var(--salt-selectable-foreground-hover);
 }
+.saltRadioButton-disabled:hover .saltRadioButtonIcon {
+  border-color: var(--salt-selectable-borderColor);
+  color: var(--salt-selectable-foreground);
+}
 .saltRadioButtonIcon-checked,
 .saltRadioButton:hover .saltRadioButtonIcon-checked {
   border-color: var(--salt-selectable-borderColor-selected);
@@ -4183,6 +4523,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
   font-size: var(--salt-text-fontSize);
   font-weight: var(--salt-text-fontWeight);
   line-height: var(--salt-text-lineHeight);
+  letter-spacing: var(--salt-text-letterSpacing);
   box-sizing: border-box;
 }
 
@@ -4711,6 +5052,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
   font-size: var(--salt-text-fontSize);
   font-weight: var(--salt-text-fontWeight);
   line-height: var(--salt-text-lineHeight);
+  letter-spacing: var(--salt-text-letterSpacing);
 }
 .saltSwitch-disabled {
   color: var(--salt-content-primary-foreground);
@@ -4879,6 +5221,7 @@ table.saltTable {
   font-family: var(--salt-text-fontFamily);
   font-size: var(--salt-text-fontSize);
   line-height: var(--salt-text-lineHeight);
+  letter-spacing: var(--salt-text-letterSpacing);
   width: 100%;
 }
 table.saltTable tr {
@@ -5209,6 +5552,7 @@ table.saltTable td.saltTable-td-align-right {
   font-size: var(--salt-text-fontSize);
   font-weight: var(--salt-text-fontWeight);
   line-height: var(--salt-text-lineHeight);
+  letter-spacing: var(--salt-text-letterSpacing);
   overflow: hidden;
   border-radius: var(--saltTag-borderRadius, var(--salt-palette-corner-strongest, 9999px));
   width: fit-content;
@@ -5400,7 +5744,7 @@ table.saltTable td.saltTable-td-align-right {
   font-weight: var(--salt-text-fontWeight-small);
 }
 .saltText-notation.saltText {
-  font-family: var(--salt-text-notation-fontFamily);
+  font-family: var(--salt-text-fontFamily);
   font-size: var(--salt-text-notation-fontSize);
   line-height: var(--salt-text-notation-lineHeight);
   font-weight: var(--salt-text-fontWeight);
@@ -5431,131 +5775,143 @@ code.saltText,
   font-family: var(--salt-text-code-fontFamily);
 }
 .saltText-display1.saltText {
-  font-family: var(--salt-text-display1-fontFamily);
+  font-family: var(--salt-text-display-fontFamily);
   font-size: var(--salt-text-display1-fontSize);
-  font-weight: var(--salt-text-display1-fontWeight);
+  font-style: var(--salt-text-display-fontStyle, normal);
+  font-weight: var(--salt-text-display-fontWeight);
+  letter-spacing: var(--salt-text-display-letterSpacing, var(--salt-text-letterSpacing));
   line-height: var(--salt-text-display1-lineHeight);
+  text-transform: var(--salt-text-display-textTransform, none);
 }
 .saltText-display1.saltText strong {
   font-size: inherit;
-  font-weight: var(--salt-text-display1-fontWeight-strong);
+  font-weight: var(--salt-text-display-fontWeight-strong);
 }
 .saltText-display1.saltText small {
   font-size: inherit;
-  font-weight: var(--salt-text-display1-fontWeight-small);
+  font-weight: var(--salt-text-display-fontWeight-small);
 }
 .saltText-display2.saltText {
-  font-family: var(--salt-text-display2-fontFamily);
+  font-family: var(--salt-text-display-fontFamily);
   font-size: var(--salt-text-display2-fontSize);
-  font-weight: var(--salt-text-display2-fontWeight);
+  font-style: var(--salt-text-display-fontStyle, normal);
+  font-weight: var(--salt-text-display-fontWeight);
+  letter-spacing: var(--salt-text-display-letterSpacing, var(--salt-text-letterSpacing));
   line-height: var(--salt-text-display2-lineHeight);
+  text-transform: var(--salt-text-display-textTransform, none);
 }
 .saltText-display2.saltText strong {
   font-size: inherit;
-  font-weight: var(--salt-text-display2-fontWeight-strong);
+  font-weight: var(--salt-text-display-fontWeight-strong);
 }
 .saltText-display2.saltText small {
   font-size: inherit;
-  font-weight: var(--salt-text-display2-fontWeight-small);
+  font-weight: var(--salt-text-display-fontWeight-small);
 }
 .saltText-display3.saltText {
-  font-family: var(--salt-text-display3-fontFamily);
+  font-family: var(--salt-text-display-fontFamily);
   font-size: var(--salt-text-display3-fontSize);
-  font-weight: var(--salt-text-display3-fontWeight);
+  font-style: var(--salt-text-display-fontStyle, normal);
+  font-weight: var(--salt-text-display-fontWeight);
+  letter-spacing: var(--salt-text-display-letterSpacing, var(--salt-text-letterSpacing));
   line-height: var(--salt-text-display3-lineHeight);
+  text-transform: var(--salt-text-display-textTransform, none);
 }
 .saltText-display3.saltText strong {
   font-size: inherit;
-  font-weight: var(--salt-text-display3-fontWeight-strong);
+  font-weight: var(--salt-text-display-fontWeight-strong);
 }
 .saltText-display3.saltText small {
   font-size: inherit;
-  font-weight: var(--salt-text-display3-fontWeight-small);
+  font-weight: var(--salt-text-display-fontWeight-small);
 }
 .saltText-display4.saltText {
-  font-family: var(--salt-text-display4-fontFamily);
+  font-family: var(--salt-text-display-fontFamily);
   font-size: var(--salt-text-display4-fontSize);
-  font-weight: var(--salt-text-display4-fontWeight);
+  font-style: var(--salt-text-display-fontStyle, normal);
+  font-weight: var(--salt-text-display-fontWeight);
+  letter-spacing: var(--salt-text-display-letterSpacing, var(--salt-text-letterSpacing));
   line-height: var(--salt-text-display4-lineHeight);
+  text-transform: var(--salt-text-display-textTransform, none);
 }
 .saltText-display4.saltText strong {
   font-size: inherit;
-  font-weight: var(--salt-text-display4-fontWeight-strong);
+  font-weight: var(--salt-text-display-fontWeight-strong);
 }
 .saltText-display4.saltText small {
   font-size: inherit;
-  font-weight: var(--salt-text-display4-fontWeight-small);
+  font-weight: var(--salt-text-display-fontWeight-small);
 }
 h1.saltText,
 .saltText-h1.saltText {
-  font-family: var(--salt-text-h1-fontFamily);
+  font-family: var(--salt-text-heading-fontFamily);
   font-size: var(--salt-text-h1-fontSize);
-  font-weight: var(--salt-text-h1-fontWeight);
+  font-weight: var(--salt-text-heading-fontWeight);
   line-height: var(--salt-text-h1-lineHeight);
 }
 h1.saltText strong,
 .saltText-h1.saltText strong {
-  font-weight: var(--salt-text-h1-fontWeight-strong);
+  font-weight: var(--salt-text-heading-fontWeight-strong);
 }
 h1.saltText small,
 .saltText-h1.saltText small {
   font-size: inherit;
-  font-weight: var(--salt-text-h1-fontWeight-small);
+  font-weight: var(--salt-text-heading-fontWeight-small);
 }
 h2.saltText,
 .saltText-h2.saltText {
-  font-family: var(--salt-text-h2-fontFamily);
+  font-family: var(--salt-text-heading-fontFamily);
   font-size: var(--salt-text-h2-fontSize);
-  font-weight: var(--salt-text-h2-fontWeight);
+  font-weight: var(--salt-text-heading-fontWeight);
   line-height: var(--salt-text-h2-lineHeight);
 }
 h2.saltText strong,
 .saltText-h2.saltText strong {
-  font-weight: var(--salt-text-h2-fontWeight-strong);
+  font-weight: var(--salt-text-heading-fontWeight-strong);
 }
 h2.saltText small,
 .saltText-h2.saltText small {
   font-size: inherit;
-  font-weight: var(--salt-text-h2-fontWeight-small);
+  font-weight: var(--salt-text-heading-fontWeight-small);
 }
 h3.saltText,
 .saltText-h3.saltText {
-  font-family: var(--salt-text-h3-fontFamily);
+  font-family: var(--salt-text-heading-fontFamily);
   font-size: var(--salt-text-h3-fontSize);
-  font-weight: var(--salt-text-h3-fontWeight);
+  font-weight: var(--salt-text-heading-fontWeight);
   line-height: var(--salt-text-h3-lineHeight);
 }
 h3.saltText strong,
 .saltText-h3.saltText strong {
-  font-weight: var(--salt-text-h3-fontWeight-strong);
+  font-weight: var(--salt-text-heading-fontWeight-strong);
 }
 h3.saltText small,
 .saltText-h3.saltText small {
   font-size: inherit;
-  font-weight: var(--salt-text-h3-fontWeight-small);
+  font-weight: var(--salt-text-heading-fontWeight-small);
 }
 h4.saltText,
 .saltText-h4.saltText {
-  font-family: var(--salt-text-h4-fontFamily);
+  font-family: var(--salt-text-heading-fontFamily);
   font-size: var(--salt-text-h4-fontSize);
-  font-weight: var(--salt-text-h4-fontWeight);
+  font-weight: var(--salt-text-heading-fontWeight);
   line-height: var(--salt-text-h4-lineHeight);
 }
 h4.saltText strong,
 .saltText-h4.saltText strong {
-  font-weight: var(--salt-text-h4-fontWeight-strong);
+  font-weight: var(--salt-text-heading-fontWeight-strong);
 }
 h4.saltText small,
 .saltText-h4.saltText small {
   font-size: inherit;
-  font-weight: var(--salt-text-h4-fontWeight-small);
+  font-weight: var(--salt-text-heading-fontWeight-small);
 }
 label.saltText,
 .saltText-label.saltText {
-  font-family: var(--salt-text-label-fontFamily);
+  font-family: var(--salt-text-fontFamily);
   font-size: var(--salt-text-label-fontSize);
   line-height: var(--salt-text-label-lineHeight);
-  font-weight: var(--salt-text-fontWeight);
+  font-weight: var(--salt-text-label-fontWeight);
 }
 label.saltText strong,
 .saltText-label.saltText strong {
@@ -5564,7 +5920,7 @@ label.saltText strong,
 label.saltText small,
 .saltText-label.saltText small {
   font-size: inherit;
-  font-weight: var(--salt-text-fontWeight-small);
+  font-weight: var(--salt-text-label-fontWeight-small);
 }
 
 /* src/toast/Toast.css */
@@ -5588,6 +5944,7 @@ label.saltText small,
   font-size: var(--salt-text-fontSize);
   font-weight: var(--salt-text-fontWeight);
   line-height: var(--salt-text-lineHeight);
+  letter-spacing: var(--salt-text-letterSpacing);
 }
 .saltToast:last-child {
   margin-bottom: var(--salt-spacing-200);
@@ -5921,6 +6278,7 @@ label.saltText small,
   font-size: var(--salt-text-fontSize);
   font-weight: var(--salt-text-fontWeight);
   line-height: var(--salt-text-lineHeight);
+  letter-spacing: var(--salt-text-letterSpacing);
   border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--toggletip-borderColor);
   border-radius: var(--salt-palette-corner-weak);
   background: var(--toggletip-background);
@@ -6195,6 +6553,7 @@ label.saltText small,
   font-size: var(--saltTooltip-fontSize, var(--salt-text-fontSize));
   font-weight: var(--saltTooltip-fontWeight, var(--salt-text-fontWeight));
   line-height: var(--saltTooltip-lineHeight, var(--salt-text-lineHeight));
+  letter-spacing: var(--salt-text-letterSpacing);
   max-width: var(--saltTooltip-maxWidth, 60ch);
   padding: var(--saltTooltip-padding, var(--tooltip-padding));
   position: relative;
@@ -6445,8 +6804,8 @@ label.saltText small,
   overflow: hidden;
   cursor: var(--salt-cursor-hover);
   color: var(--salt-content-primary-foreground);
-  font-weight: var(--salt-text-h4-fontWeight);
-  font-family: var(--salt-text-h4-fontFamily);
+  font-weight: var(--salt-text-heading-fontWeight);
+  font-family: var(--salt-text-heading-fontFamily);
   text-align: var(--salt-text-textAlign);
   letter-spacing: var(--salt-text-letterSpacing);
   line-height: var(--salt-text-h4-lineHeight);
@@ -6490,7 +6849,7 @@ label.saltText small,
 }
 .saltVerticalNavigation .saltVerticalNavigationItemContent-active,
 .saltVerticalNavigation .saltVerticalNavigationSubMenu .saltVerticalNavigationItemContent-active {
-  font-weight: var(--salt-text-h4-fontWeight);
+  font-weight: var(--salt-text-heading-fontWeight);
 }
 @supports selector(:has(*)) {
   .saltVerticalNavigationItemContent-active:hover:has(.saltVerticalNavigationItemTrigger[aria-controls]) {
@@ -6537,7 +6896,7 @@ label.saltText small,
   margin: 0;
 }
 .saltVerticalNavigationSubMenu .saltVerticalNavigationItemContent {
-  font-weight: var(--salt-text-h4-fontWeight-small);
+  font-weight: var(--salt-text-heading-fontWeight-small);
 }
 
 /* src/progress/CircularProgress/CircularProgress.css */
@@ -6939,10 +7298,11 @@ label.saltText small,
 }
 .saltSliderTrack-markLabel {
   color: var(--salt-content-secondary-foreground);
-  font-family: var(--salt-text-label-fontFamily);
+  font-family: var(--salt-text-fontFamily);
   font-weight: var(--salt-text-label-fontWeight);
   font-size: var(--salt-text-label-fontSize);
   line-height: var(--salt-text-label-lineHeight);
+  letter-spacing: var(--salt-text-letterSpacing);
   overflow: hidden;
   position: absolute;
   text-overflow: ellipsis;
@@ -7071,7 +7431,7 @@ label.saltText small,
   color: var(--salt-content-secondary-foreground);
   font-size: var(--salt-text-label-fontSize);
   font-weight: var(--salt-text-label-fontWeight-strong);
-  font-family: var(--salt-text-label-fontFamily);
+  font-family: var(--salt-text-fontFamily);
   line-height: var(--salt-text-label-lineHeight);
   letter-spacing: var(--salt-text-letterSpacing);
 }
@@ -7157,4 +7517,4 @@ label.saltText small,
   box-shadow: 0 calc(var(--salt-size-fixed-100) * -1) 0 0 var(--salt-selectable-borderColor-selected), 0 var(--salt-size-fixed-100) 0 0 var(--salt-selectable-borderColor-selected);
 }
 
-/* src/cd5976d7-dcad-41e7-8f09-5aa5bbfe3d34.css */
+/* src/f4ebb149-7141-4270-8ac0-a01fbff8903d.css */