@salt-ds/core 1.71.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;
 }
@@ -1090,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);
@@ -1193,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,
@@ -1845,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 {
@@ -1961,6 +1982,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);
 }
 .saltFormField-labelTop {
   gap: var(--salt-spacing-75);
@@ -2030,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);
@@ -2041,7 +2063,9 @@ 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%;
 }
 .saltFormField-labelLeft .saltFormFieldLabel.saltText {
@@ -2051,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 */
@@ -2281,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;
@@ -2391,7 +2423,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
   outline-offset: var(--salt-focused-outlineOffset);
 }
 @media (hover: hover) {
-  .saltInteractableCard:not(.saltInteractableCard-disabled):hover {
+  .saltInteractableCard:hover {
     cursor: var(--salt-cursor-hover);
     box-shadow: var(--salt-overlayable-shadow-hover);
     border-color: var(--salt-actionable-accented-borderColor-hover);
@@ -2405,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;
 }
@@ -2454,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 */
@@ -2461,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);
@@ -2489,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);
@@ -2497,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);
@@ -2505,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);
@@ -2815,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);
 }
 
@@ -2877,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);
@@ -2922,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));
@@ -2972,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;
 }
@@ -3248,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;
@@ -3620,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));
@@ -3660,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 {
@@ -3676,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 {
@@ -3697,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));
@@ -3706,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 */
@@ -3729,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);
@@ -3737,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 */
@@ -4226,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;
@@ -4256,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 {
@@ -4352,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);
@@ -4431,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;
 }
 
@@ -4959,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);
@@ -5127,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 {
@@ -5457,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;
@@ -5648,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);
@@ -5679,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 {
@@ -5812,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 */
@@ -5836,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);
@@ -6169,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);
@@ -6443,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;
@@ -6693,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);
@@ -6738,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]) {
@@ -6785,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 */
@@ -7187,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;
@@ -7319,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);
 }
@@ -7405,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/cb166099-faaf-4d81-b955-72294da7c0cb.css */
+/* src/f4ebb149-7141-4270-8ac0-a01fbff8903d.css */