@salt-ds/core 1.72.0 → 1.74.0

package/css/salt-core.css

@@ -33,7 +33,7 @@
   line-height: var(--salt-text-lineHeight);
   font-family: var(--salt-text-fontFamily);
   color: var(--salt-content-primary-foreground);
-  font-weight: var(--salt-text-fontWeight-strong);
+  font-weight: var(--salt-text-fontWeight-bolder);
   letter-spacing: var(--salt-text-letterSpacing);
   text-align: left;
   cursor: var(--salt-cursor-hover);
@@ -846,12 +846,17 @@ a.saltAvatar::after {
   --button-borderColor-active: var(--salt-actionable-caution-borderColor);
   cursor: var(--salt-cursor-pending);
 }
-.saltButton strong {
-  font-weight: var(--salt-text-action-fontWeight-strong);
+.saltButton {
+  --text-fontWeight-bolder: var(--salt-text-action-fontWeight-bolder);
+  --text-fontWeight-lighter: var(--salt-text-action-fontWeight-lighter);
+}
+.saltButton strong,
+.saltButton b {
+  font-weight: var(--salt-text-action-fontWeight-bolder);
 }
 .saltButton small {
   font-size: inherit;
-  font-weight: var(--salt-text-action-fontWeight-small);
+  font-weight: var(--salt-text-action-fontWeight-lighter);
 }
 .saltButton-spinner {
   position: absolute;
@@ -999,6 +1004,10 @@ a:focus .saltCard-interactable.saltCard-disabled {
   padding: var(--saltCardContent-padding, var(--salt-spacing-200));
   box-sizing: border-box;
 }
+.saltCardContent.saltCollapsiblePanel[aria-hidden=true] {
+  padding-top: 0;
+  padding-bottom: 0;
+}
 .saltCard-sectioned > .saltCardHeader + .saltCardContent,
 .saltCard-sectioned > .saltCardContent + .saltCardContent,
 .saltLinkCard-sectioned > .saltCardHeader + .saltCardContent,
@@ -1267,7 +1276,9 @@ a:focus .saltCard-interactable.saltCard-disabled {
   transition:
     grid-template-rows var(--salt-duration-perceptible) ease-in-out,
     opacity var(--salt-duration-perceptible) ease-in-out,
-    visibility var(--salt-duration-perceptible) ease-in-out;
+    visibility var(--salt-duration-perceptible) ease-in-out,
+    padding-top var(--salt-duration-perceptible) ease-in-out,
+    padding-bottom var(--salt-duration-perceptible) ease-in-out;
 }
 .saltCollapsiblePanel[aria-hidden=true] {
   grid-template-rows: 0fr;
@@ -1282,6 +1293,11 @@ a:focus .saltCard-interactable.saltCard-disabled {
 .saltCollapsiblePanel-inner {
   overflow: hidden;
 }
+@media (prefers-reduced-motion: reduce) {
+  .saltCollapsiblePanel {
+    transition: none;
+  }
+}
 
 /* src/dialog/Dialog.css */
 .saltDialog {
@@ -1503,13 +1519,14 @@ a:focus .saltCard-interactable.saltCard-disabled {
 
 /* src/drawer/Drawer.css */
 .saltDrawer {
+  --drawer-padding: var(--salt-spacing-300);
   background: var(--drawer-background);
   display: flex;
   flex-direction: column;
   max-height: 100%;
   max-width: 100%;
   overflow: auto;
-  padding: var(--salt-spacing-300);
+  padding: var(--drawer-padding);
   box-shadow: var(--salt-overlayable-shadow-modal);
   z-index: var(--salt-zIndex-drawer);
   position: fixed;
@@ -1517,13 +1534,99 @@ a:focus .saltCard-interactable.saltCard-disabled {
   box-sizing: border-box;
 }
 .saltDrawer.saltDrawer-sectioned {
-  padding: 0;
+  --drawer-padding: 0px;
+}
+.saltDrawer-resizing {
+  user-select: none;
 }
 @supports selector(:has(*)) {
-  .saltDrawer:has(> .saltDrawerHeader, > .saltDrawerContent, > .saltDrawerFooter) {
-    padding: 0;
+  .saltDrawer:has(> .saltDrawerHeader, > .saltDrawerContent, > .saltDrawerFooter),
+  .saltDrawer-inner:has(> .saltDrawerHeader, > .saltDrawerContent, > .saltDrawerFooter) {
+    --drawer-padding: 0px;
   }
 }
+.saltDrawer-resizable {
+  --drawer-resizeHandleSize: var(--salt-size-fixed-600);
+  --drawer-resizeHandleOutset: var(--salt-spacing-150);
+  --drawer-resizeHandleGutter: calc(var(--drawer-resizeHandleSize) + var(--drawer-resizeHandleOutset));
+  --drawer-resizeHandlePadding: var(--salt-spacing-100);
+  overflow: visible;
+  padding: 0;
+}
+.saltDrawer-inner {
+  --drawer-innerResizeHandlePadding: min(var(--drawer-padding), var(--drawer-resizeHandlePadding));
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  min-height: 0;
+  min-width: 0;
+  overflow: auto;
+  padding: var(--drawer-padding);
+  box-sizing: border-box;
+}
+.saltDrawer-resizable.saltDrawer-left {
+  padding-right: var(--drawer-resizeHandleGutter);
+}
+.saltDrawer-resizable.saltDrawer-right {
+  padding-left: var(--drawer-resizeHandleGutter);
+}
+.saltDrawer-resizable.saltDrawer-top {
+  padding-bottom: var(--drawer-resizeHandleGutter);
+}
+.saltDrawer-resizable.saltDrawer-bottom {
+  padding-top: var(--drawer-resizeHandleGutter);
+}
+.saltDrawer-resizable.saltDrawer-left > .saltDrawer-inner {
+  padding-right: var(--drawer-innerResizeHandlePadding);
+}
+.saltDrawer-resizable.saltDrawer-right > .saltDrawer-inner {
+  padding-left: var(--drawer-innerResizeHandlePadding);
+}
+.saltDrawer-resizable.saltDrawer-top > .saltDrawer-inner {
+  padding-bottom: var(--drawer-innerResizeHandlePadding);
+}
+.saltDrawer-resizable.saltDrawer-bottom > .saltDrawer-inner {
+  padding-top: var(--drawer-innerResizeHandlePadding);
+}
+.saltDrawer-resizable.saltDrawer-left > .saltDrawer-inner > :is(.saltDrawerHeader, .saltDrawerContent, .saltDrawerFooter) {
+  padding-right: var(--drawer-resizeHandlePadding);
+}
+.saltDrawer-resizable.saltDrawer-right > .saltDrawer-inner > :is(.saltDrawerHeader, .saltDrawerContent, .saltDrawerFooter) {
+  padding-left: var(--drawer-resizeHandlePadding);
+}
+.saltDrawer-resizable.saltDrawer-top > .saltDrawer-inner > :is(.saltDrawerHeader, .saltDrawerContent, .saltDrawerFooter):last-child {
+  padding-bottom: var(--drawer-resizeHandlePadding);
+}
+.saltDrawer-resizable.saltDrawer-bottom > .saltDrawer-inner > :is(.saltDrawerHeader, .saltDrawerContent, .saltDrawerFooter):first-child {
+  padding-top: var(--drawer-resizeHandlePadding);
+}
+.saltDrawer-resizable.saltDrawer-top > .saltDrawer-inner > .saltDrawerHeader-withAccent:last-child::before {
+  bottom: var(--drawer-resizeHandlePadding);
+}
+.saltDrawer-resizable.saltDrawer-bottom > .saltDrawer-inner > .saltDrawerHeader-withAccent:first-child::before {
+  top: var(--drawer-resizeHandlePadding);
+}
+.saltDrawer-resizable.saltDrawer-left .saltButton-secondary.saltDrawerCloseButton {
+  margin-right: calc(-1 * var(--drawer-innerResizeHandlePadding));
+}
+.saltDrawer-resizable.saltDrawer-bottom .saltButton-secondary.saltDrawerCloseButton {
+  margin-top: calc(-1 * var(--drawer-innerResizeHandlePadding));
+}
+.saltDrawer-resizable {
+  --drawer-resizeLimit: calc(100% - var(--drawer-resizeHandleOutset));
+  --drawer-minResize: min(max(var(--saltDrawer-minResize, 0px), var(--salt-size-base)), var(--drawer-resizeLimit));
+  --drawer-maxResize: min(var(--saltDrawer-maxResize, 100%), var(--drawer-resizeLimit));
+}
+.saltDrawer-resizable.saltDrawer-left,
+.saltDrawer-resizable.saltDrawer-right {
+  min-width: var(--drawer-minResize);
+  max-width: var(--drawer-maxResize);
+}
+.saltDrawer-resizable.saltDrawer-top,
+.saltDrawer-resizable.saltDrawer-bottom {
+  min-height: var(--drawer-minResize);
+  max-height: var(--drawer-maxResize);
+}
 .saltDrawer-primary {
   --drawer-background: var(--salt-container-primary-background);
 }
@@ -1634,6 +1737,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
   gap: var(--salt-spacing-100);
   flex-shrink: 0;
   box-sizing: border-box;
+  flex-wrap: wrap;
 }
 
 /* src/drawer/DrawerHeader.css */
@@ -1653,11 +1757,13 @@ 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-h2-lineHeight)) / 2);
   align-items: flex-start;
   min-width: 0;
   word-break: break-word;
 }
+.saltDrawerHeader-withCenteredTitle .saltDrawerHeader-container {
+  padding-top: calc((var(--salt-size-base) - var(--salt-text-h2-lineHeight)) / 2);
+}
 .saltDrawerHeader-header > .saltText {
   display: block;
   margin: 0;
@@ -1839,7 +1945,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
 }
 .saltDropdown-placeholder {
   color: var(--salt-content-secondary-foreground);
-  font-weight: var(--salt-text-fontWeight-small);
+  font-weight: var(--salt-text-fontWeight-lighter);
 }
 .saltDropdown-startAdornmentContainer {
   margin-right: var(--salt-spacing-100);
@@ -2078,13 +2184,13 @@ a:focus .saltCard-interactable.saltCard-disabled {
 .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-fontWeight: var(--salt-text-label-fontWeight-bolder);
   --formFieldLabel-necessity-fontWeight: var(--salt-text-label-fontWeight);
 }
 .saltFormFieldLabel-sentence {
   --formFieldLabel-fontSize: var(--salt-text-fontSize);
   --formFieldLabel-lineHeight: var(--salt-text-lineHeight);
-  --formFieldLabel-fontWeight: var(--salt-text-fontWeight-strong);
+  --formFieldLabel-fontWeight: var(--salt-text-fontWeight-bolder);
   --formFieldLabel-necessity-fontWeight: var(--salt-text-fontWeight);
 }
 .saltFormFieldLabel-necessityLabel {
@@ -2326,7 +2432,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
 }
 .saltInput-input::placeholder {
   color: var(--salt-content-secondary-foreground);
-  font-weight: var(--salt-text-fontWeight-small);
+  font-weight: var(--salt-text-fontWeight-lighter);
 }
 .saltInput-disabled .saltInput-input::selection {
   background: none;
@@ -2590,6 +2696,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
   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));
+  box-sizing: border-box;
   color: var(--saltLinkButton-text-color, var(--linkButton-text-color));
   display: inline-flex;
   gap: var(--salt-spacing-50);
@@ -2853,7 +2960,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
   min-height: var(--salt-size-base);
   font-family: var(--salt-text-fontFamily);
   font-size: var(--salt-text-label-fontSize);
-  font-weight: var(--salt-text-fontWeight-strong);
+  font-weight: var(--salt-text-fontWeight-bolder);
   line-height: var(--salt-text-label-lineHeight);
   letter-spacing: var(--salt-text-letterSpacing);
   color: var(--salt-content-secondary-foreground);
@@ -2920,7 +3027,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
   outline: var(--salt-focused-outline);
   outline-offset: calc(var(--salt-size-fixed-100) * -2);
 }
-.saltMegaMenuListItem-wrapper:hover:not(:focus-visible) {
+.saltMegaMenuListItem-wrapper:hover:not(:focus-visible, :active) {
   outline: none;
   background: var(--salt-overlayable-background-hover);
 }
@@ -2959,7 +3066,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
   background: var(--salt-container-primary-background);
   color: var(--salt-content-secondary-foreground);
   font-size: var(--salt-text-label-fontSize);
-  font-weight: var(--salt-text-label-fontWeight-strong);
+  font-weight: var(--salt-text-label-fontWeight-bolder);
   font-family: var(--salt-text-fontFamily);
   line-height: var(--salt-text-label-lineHeight);
   letter-spacing: var(--salt-text-letterSpacing);
@@ -2992,6 +3099,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
   cursor: var(--salt-cursor-hover);
   box-sizing: border-box;
   flex-shrink: 0;
+  --saltMenuItem-iconColumnWidth: max(var(--salt-size-icon), 12px);
 }
 .saltMenuItem:focus-visible {
   outline: var(--salt-focused-outline);
@@ -3004,7 +3112,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
 .saltMenuItem:focus-visible {
   background: var(--salt-selectable-background-hover);
 }
-.saltMenuItem:active {
+.saltMenuItem[role=menuitem]:active {
   background: var(--salt-selectable-background-selected);
   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);
 }
@@ -3024,6 +3132,23 @@ a:focus .saltCard-interactable.saltCard-disabled {
 .saltMenuItem .saltIcon:not(.saltCheckboxIcon-icon) {
   min-height: var(--salt-text-lineHeight);
 }
+.saltMenuItem .saltMenuItem-selectionIcon {
+  margin: calc((var(--salt-text-lineHeight) - var(--salt-size-selectable)) / 2) 0;
+}
+.saltMenuItem-selectionIconPlaceholder {
+  flex-shrink: 0;
+  width: var(--salt-size-selectable);
+}
+.saltMenuItem-iconPlaceholder {
+  flex-shrink: 0;
+  width: var(--saltMenuItem-iconColumnWidth);
+}
+.saltMenuItem-selectionAlignedIcon {
+  --saltMenuItem-iconColumnWidth: max(var(--salt-size-selectable), var(--salt-size-icon), 12px);
+}
+.saltMenuItem-selectionAlignedIcon > .saltIcon:first-child {
+  margin-inline: max(0px, calc((var(--saltMenuItem-iconColumnWidth) - var(--icon-size)) / 2));
+}
 .saltMenuItem-expandIcon.saltIcon {
   margin-left: auto;
 }
@@ -3271,7 +3396,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
   overflow: auto;
 }
 .saltMultilineInput-textarea::placeholder {
-  font-weight: var(--salt-text-fontWeight-small);
+  font-weight: var(--salt-text-fontWeight-lighter);
 }
 .saltMultilineInput-textarea:focus {
   outline: none;
@@ -3304,7 +3429,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
   box-sizing: border-box;
 }
 .saltNavigationItem-rootItem {
-  font-weight: var(--salt-text-fontWeight-strong);
+  font-weight: var(--salt-text-fontWeight-bolder);
 }
 .saltNavigationItem-label .saltIcon {
   top: var(--salt-spacing-25);
@@ -3485,7 +3610,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
 }
 .saltNumberInput-input::placeholder {
   color: var(--salt-content-secondary-foreground);
-  font-weight: var(--salt-text-fontWeight-small);
+  font-weight: var(--salt-text-fontWeight-lighter);
 }
 .saltNumberInput-focused {
   --numberInput-borderColor: var(--numberInput-outlineColor);
@@ -3608,6 +3733,87 @@ a:focus .saltCard-interactable.saltCard-disabled {
   --saltButton-padding: calc(var(--salt-spacing-50) - var(--button-borderWidth));
 }
 
+/* src/on-solid-button/OnSolidButton.css */
+.saltOnSolidButton {
+  --onSolidButton-borderWidth: var(--salt-size-fixed-100);
+  align-items: center;
+  appearance: none;
+  -webkit-appearance: none;
+  background: var(--salt-actionable-onSolid-subtle-background);
+  border-color: var(--salt-actionable-onSolid-subtle-borderColor);
+  border-radius: var(--salt-palette-corner-weak, 0);
+  border-style: solid;
+  border-width: var(--onSolidButton-borderWidth);
+  color: var(--salt-actionable-onSolid-subtle-foreground);
+  display: inline-flex;
+  font-family: var(--salt-text-action-fontFamily);
+  font-size: var(--salt-text-fontSize);
+  font-weight: var(--salt-text-action-fontWeight);
+  gap: var(--salt-spacing-50);
+  height: var(--salt-size-base);
+  justify-content: center;
+  letter-spacing: var(--salt-text-action-letterSpacing);
+  line-height: var(--salt-text-lineHeight);
+  margin: 0;
+  padding: 0 calc(var(--salt-spacing-100) - var(--onSolidButton-borderWidth));
+  position: relative;
+  -webkit-tap-highlight-color: transparent;
+  text-align: var(--salt-text-action-textAlign);
+  text-decoration: none;
+  text-transform: var(--salt-text-action-textTransform);
+  transition: none;
+}
+.saltOnSolidButton:focus-visible {
+  background: var(--salt-actionable-onSolid-subtle-background-hover);
+  border-color: var(--salt-actionable-onSolid-subtle-borderColor-hover);
+  color: var(--salt-actionable-onSolid-subtle-foreground-hover);
+  outline-color: var(--salt-focused-onSolid-outlineColor);
+  outline-offset: var(--salt-focused-outlineOffset);
+  outline-style: var(--salt-focused-outlineStyle);
+  outline-width: var(--salt-focused-outlineWidth);
+}
+@media (hover: hover) {
+  .saltOnSolidButton:hover {
+    background: var(--salt-actionable-onSolid-subtle-background-hover);
+    border-color: var(--salt-actionable-onSolid-subtle-borderColor-hover);
+    color: var(--salt-actionable-onSolid-subtle-foreground-hover);
+    cursor: var(--salt-cursor-hover);
+  }
+}
+.saltOnSolidButton.saltOnSolidButton-active:focus-visible,
+.saltOnSolidButton:focus-visible:active,
+.saltOnSolidButton:active,
+.saltOnSolidButton.saltOnSolidButton-active {
+  background: var(--salt-actionable-onSolid-subtle-background-active);
+  border-color: var(--salt-actionable-onSolid-subtle-borderColor-active);
+  color: var(--salt-actionable-onSolid-subtle-foreground-active);
+  cursor: var(--salt-cursor-active);
+}
+.saltOnSolidButton:disabled,
+.saltOnSolidButton.saltOnSolidButton-disabled,
+.saltOnSolidButton.saltOnSolidButton-disabled:active,
+.saltOnSolidButton.saltOnSolidButton-disabled:focus-visible,
+.saltOnSolidButton.saltOnSolidButton-disabled:focus-visible:active,
+.saltOnSolidButton.saltOnSolidButton-disabled:hover {
+  background: var(--salt-actionable-onSolid-subtle-background);
+  border-color: var(--salt-actionable-onSolid-subtle-borderColor);
+  color: var(--salt-actionable-onSolid-subtle-foreground);
+  cursor: var(--salt-cursor-disabled);
+  opacity: 0.4;
+}
+.saltOnSolidButton {
+  --text-fontWeight-bolder: var(--salt-text-action-fontWeight-bolder);
+  --text-fontWeight-lighter: var(--salt-text-action-fontWeight-lighter);
+}
+.saltOnSolidButton strong,
+.saltOnSolidButton b {
+  font-weight: var(--salt-text-action-fontWeight-bolder);
+}
+.saltOnSolidButton small {
+  font-size: inherit;
+  font-weight: var(--salt-text-action-fontWeight-lighter);
+}
+
 /* src/option/Option.css */
 .saltOption {
   color: var(--salt-content-primary-foreground);
@@ -3650,6 +3856,9 @@ a:focus .saltCard-interactable.saltCard-disabled {
     calc(var(--salt-size-fixed-100) * -1) 0 0 var(--salt-size-fixed-100) var(--salt-selectable-borderColor-selected),
     0 calc(var(--salt-size-fixed-100) * -1) 0 var(--salt-selectable-borderColor-selected);
 }
+.saltOption-checkbox {
+  margin: calc((var(--salt-text-lineHeight) - var(--salt-size-selectable)) / 2) 0;
+}
 .saltOption .saltIcon:not(.saltCheckboxIcon-icon) {
   min-height: var(--salt-text-lineHeight);
 }
@@ -3659,7 +3868,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
   background: var(--salt-container-primary-background);
   color: var(--salt-content-secondary-foreground);
   font-size: var(--salt-text-label-fontSize);
-  font-weight: var(--salt-text-label-fontWeight-strong);
+  font-weight: var(--salt-text-label-fontWeight-bolder);
   font-family: var(--salt-text-fontFamily);
   line-height: var(--salt-text-label-lineHeight);
   letter-spacing: var(--salt-text-letterSpacing);
@@ -4329,7 +4538,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
 }
 .saltPillInput-input::placeholder {
   color: var(--salt-content-secondary-foreground);
-  font-weight: var(--salt-text-fontWeight-small);
+  font-weight: var(--salt-text-fontWeight-lighter);
 }
 
 /* src/radio-button/RadioButton.css */
@@ -5244,7 +5453,7 @@ table.saltTable thead {
   height: var(--table-header-height);
   min-height: var(--table-header-height);
   font-size: var(--salt-text-label-fontSize);
-  font-weight: var(--salt-text-label-fontWeight-strong);
+  font-weight: var(--salt-text-label-fontWeight-bolder);
   line-height: var(--salt-text-label-lineHeight);
 }
 table.saltTable thead.saltTable-thead-sticky {
@@ -5283,7 +5492,7 @@ table.saltTable tfoot {
   min-height: var(--table-footer-height);
   font-size: var(--salt-text-fontSize);
   line-height: var(--salt-text-lineHeight);
-  font-weight: var(--salt-text-fontWeight-strong);
+  font-weight: var(--salt-text-fontWeight-bolder);
 }
 table.saltTable tfoot.saltTable-tfoot-sticky {
   position: sticky;
@@ -5328,7 +5537,7 @@ table.saltTable th.saltTable-th-align-right {
   text-align: end;
 }
 table.saltTable tbody th[scope=row] {
-  font-weight: var(--salt-text-fontWeight-strong);
+  font-weight: var(--salt-text-fontWeight-bolder);
   line-height: var(--salt-text-lineHeight);
 }
 table.saltTable th + th::before {
@@ -5704,6 +5913,8 @@ table.saltTable td.saltTable-td-align-right {
   line-height: var(--saltText-lineHeight, var(--salt-text-lineHeight));
   font-weight: var(--saltText-fontWeight, var(--salt-text-fontWeight));
   letter-spacing: var(--salt-text-letterSpacing);
+  --text-fontWeight-bolder: var(--salt-text-fontWeight-bolder);
+  --text-fontWeight-lighter: var(--salt-text-fontWeight-lighter);
 }
 .saltText-lineClamp {
   display: -webkit-box;
@@ -5736,25 +5947,13 @@ table.saltTable td.saltTable-td-align-right {
 .saltText-success {
   --text-color: var(--salt-status-success-foreground-informative);
 }
-.saltText strong {
-  font-weight: var(--salt-text-fontWeight-strong);
-}
-.saltText small {
-  font-size: inherit;
-  font-weight: var(--salt-text-fontWeight-small);
-}
 .saltText-notation.saltText {
   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);
-}
-.saltText-notation.saltText strong {
-  font-weight: var(--salt-text-notation-fontWeight-strong);
-}
-.saltText-notation.saltText small {
-  font-size: inherit;
-  font-weight: var(--salt-text-notation-fontWeight-small);
+  font-weight: var(--salt-text-notation-fontWeight);
+  --text-fontWeight-bolder: var(--salt-text-notation-fontWeight-bolder);
+  --text-fontWeight-lighter: var(--salt-text-notation-fontWeight-lighter);
 }
 .saltText-action.saltText {
   font-family: var(--salt-text-action-fontFamily);
@@ -5762,17 +5961,15 @@ table.saltTable td.saltTable-td-align-right {
   text-transform: var(--salt-text-action-textTransform);
   text-align: var(--salt-text-action-textAlign);
   font-weight: var(--salt-text-action-fontWeight);
-}
-.saltText-action.saltText strong {
-  font-weight: var(--salt-text-action-fontWeight-strong);
-}
-.saltText-action.saltText small {
-  font-size: inherit;
-  font-weight: var(--salt-text-action-fontWeight-small);
+  --text-fontWeight-bolder: var(--salt-text-action-fontWeight-bolder);
+  --text-fontWeight-lighter: var(--salt-text-action-fontWeight-lighter);
 }
 code.saltText,
 .saltText-code.saltText {
   font-family: var(--salt-text-code-fontFamily);
+  font-weight: var(--salt-text-code-fontWeight);
+  --text-fontWeight-bolder: var(--salt-text-code-fontWeight);
+  --text-fontWeight-lighter: var(--salt-text-code-fontWeight);
 }
 .saltText-display1.saltText {
   font-family: var(--salt-text-display-fontFamily);
@@ -5782,14 +5979,8 @@ code.saltText,
   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-display-fontWeight-strong);
-}
-.saltText-display1.saltText small {
-  font-size: inherit;
-  font-weight: var(--salt-text-display-fontWeight-small);
+  --text-fontWeight-bolder: var(--salt-text-display-fontWeight-bolder);
+  --text-fontWeight-lighter: var(--salt-text-display-fontWeight-lighter);
 }
 .saltText-display2.saltText {
   font-family: var(--salt-text-display-fontFamily);
@@ -5799,14 +5990,8 @@ code.saltText,
   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-display-fontWeight-strong);
-}
-.saltText-display2.saltText small {
-  font-size: inherit;
-  font-weight: var(--salt-text-display-fontWeight-small);
+  --text-fontWeight-bolder: var(--salt-text-display-fontWeight-bolder);
+  --text-fontWeight-lighter: var(--salt-text-display-fontWeight-lighter);
 }
 .saltText-display3.saltText {
   font-family: var(--salt-text-display-fontFamily);
@@ -5816,14 +6001,8 @@ code.saltText,
   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-display-fontWeight-strong);
-}
-.saltText-display3.saltText small {
-  font-size: inherit;
-  font-weight: var(--salt-text-display-fontWeight-small);
+  --text-fontWeight-bolder: var(--salt-text-display-fontWeight-bolder);
+  --text-fontWeight-lighter: var(--salt-text-display-fontWeight-lighter);
 }
 .saltText-display4.saltText {
   font-family: var(--salt-text-display-fontFamily);
@@ -5833,14 +6012,74 @@ code.saltText,
   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-display-fontWeight-strong);
-}
-.saltText-display4.saltText small {
-  font-size: inherit;
-  font-weight: var(--salt-text-display-fontWeight-small);
+  --text-fontWeight-bolder: var(--salt-text-display-fontWeight-bolder);
+  --text-fontWeight-lighter: var(--salt-text-display-fontWeight-lighter);
+}
+.saltText-editorial1.saltText {
+  font-family: var(--salt-text-editorial-fontFamily);
+  font-size: var(--salt-text-editorial1-fontSize);
+  font-style: var(--salt-text-editorial-fontStyle, normal);
+  font-weight: var(--salt-text-editorial-fontWeight);
+  letter-spacing: var(--salt-text-editorial-letterSpacing);
+  line-height: var(--salt-text-editorial1-lineHeight);
+  text-transform: var(--salt-text-editorial-textTransform, none);
+  --text-fontWeight-bolder: var(--salt-text-editorial-fontWeight-bolder);
+  --text-fontWeight-lighter: var(--salt-text-editorial-fontWeight-lighter);
+}
+.saltText-editorial2.saltText {
+  font-family: var(--salt-text-editorial-fontFamily);
+  font-size: var(--salt-text-editorial2-fontSize);
+  font-style: var(--salt-text-editorial-fontStyle, normal);
+  font-weight: var(--salt-text-editorial-fontWeight);
+  letter-spacing: var(--salt-text-editorial-letterSpacing);
+  line-height: var(--salt-text-editorial2-lineHeight);
+  text-transform: var(--salt-text-editorial-textTransform, none);
+  --text-fontWeight-bolder: var(--salt-text-editorial-fontWeight-bolder);
+  --text-fontWeight-lighter: var(--salt-text-editorial-fontWeight-lighter);
+}
+.saltText-editorial3.saltText {
+  font-family: var(--salt-text-editorial-fontFamily);
+  font-size: var(--salt-text-editorial3-fontSize);
+  font-style: var(--salt-text-editorial-fontStyle, normal);
+  font-weight: var(--salt-text-editorial-fontWeight);
+  letter-spacing: var(--salt-text-editorial-letterSpacing);
+  line-height: var(--salt-text-editorial3-lineHeight);
+  text-transform: var(--salt-text-editorial-textTransform, none);
+  --text-fontWeight-bolder: var(--salt-text-editorial-fontWeight-bolder);
+  --text-fontWeight-lighter: var(--salt-text-editorial-fontWeight-lighter);
+}
+.saltText-editorial4.saltText {
+  font-family: var(--salt-text-editorial-fontFamily);
+  font-size: var(--salt-text-editorial4-fontSize);
+  font-style: var(--salt-text-editorial-fontStyle, normal);
+  font-weight: var(--salt-text-editorial-fontWeight);
+  letter-spacing: var(--salt-text-editorial-letterSpacing);
+  line-height: var(--salt-text-editorial4-lineHeight);
+  text-transform: var(--salt-text-editorial-textTransform, none);
+  --text-fontWeight-bolder: var(--salt-text-editorial-fontWeight-bolder);
+  --text-fontWeight-lighter: var(--salt-text-editorial-fontWeight-lighter);
+}
+.saltText-editorial5.saltText {
+  font-family: var(--salt-text-editorial-fontFamily);
+  font-size: var(--salt-text-editorial5-fontSize);
+  font-style: var(--salt-text-editorial-fontStyle, normal);
+  font-weight: var(--salt-text-editorial-fontWeight);
+  letter-spacing: var(--salt-text-editorial-letterSpacing);
+  line-height: var(--salt-text-editorial5-lineHeight);
+  text-transform: var(--salt-text-editorial-textTransform, none);
+  --text-fontWeight-bolder: var(--salt-text-editorial-fontWeight-bolder);
+  --text-fontWeight-lighter: var(--salt-text-editorial-fontWeight-lighter);
+}
+.saltText-editorial6.saltText {
+  font-family: var(--salt-text-editorial-fontFamily);
+  font-size: var(--salt-text-editorial6-fontSize);
+  font-style: var(--salt-text-editorial-fontStyle, normal);
+  font-weight: var(--salt-text-editorial-fontWeight);
+  letter-spacing: var(--salt-text-editorial-letterSpacing);
+  line-height: var(--salt-text-editorial6-lineHeight);
+  text-transform: var(--salt-text-editorial-textTransform, none);
+  --text-fontWeight-bolder: var(--salt-text-editorial-fontWeight-bolder);
+  --text-fontWeight-lighter: var(--salt-text-editorial-fontWeight-lighter);
 }
 h1.saltText,
 .saltText-h1.saltText {
@@ -5848,15 +6087,8 @@ h1.saltText,
   font-size: var(--salt-text-h1-fontSize);
   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-heading-fontWeight-strong);
-}
-h1.saltText small,
-.saltText-h1.saltText small {
-  font-size: inherit;
-  font-weight: var(--salt-text-heading-fontWeight-small);
+  --text-fontWeight-bolder: var(--salt-text-heading-fontWeight-bolder);
+  --text-fontWeight-lighter: var(--salt-text-heading-fontWeight-lighter);
 }
 h2.saltText,
 .saltText-h2.saltText {
@@ -5864,15 +6096,8 @@ h2.saltText,
   font-size: var(--salt-text-h2-fontSize);
   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-heading-fontWeight-strong);
-}
-h2.saltText small,
-.saltText-h2.saltText small {
-  font-size: inherit;
-  font-weight: var(--salt-text-heading-fontWeight-small);
+  --text-fontWeight-bolder: var(--salt-text-heading-fontWeight-bolder);
+  --text-fontWeight-lighter: var(--salt-text-heading-fontWeight-lighter);
 }
 h3.saltText,
 .saltText-h3.saltText {
@@ -5880,15 +6105,8 @@ h3.saltText,
   font-size: var(--salt-text-h3-fontSize);
   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-heading-fontWeight-strong);
-}
-h3.saltText small,
-.saltText-h3.saltText small {
-  font-size: inherit;
-  font-weight: var(--salt-text-heading-fontWeight-small);
+  --text-fontWeight-bolder: var(--salt-text-heading-fontWeight-bolder);
+  --text-fontWeight-lighter: var(--salt-text-heading-fontWeight-lighter);
 }
 h4.saltText,
 .saltText-h4.saltText {
@@ -5896,15 +6114,8 @@ h4.saltText,
   font-size: var(--salt-text-h4-fontSize);
   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-heading-fontWeight-strong);
-}
-h4.saltText small,
-.saltText-h4.saltText small {
-  font-size: inherit;
-  font-weight: var(--salt-text-heading-fontWeight-small);
+  --text-fontWeight-bolder: var(--salt-text-heading-fontWeight-bolder);
+  --text-fontWeight-lighter: var(--salt-text-heading-fontWeight-lighter);
 }
 label.saltText,
 .saltText-label.saltText {
@@ -5912,15 +6123,58 @@ label.saltText,
   font-size: var(--salt-text-label-fontSize);
   line-height: var(--salt-text-label-lineHeight);
   font-weight: var(--salt-text-label-fontWeight);
+  --text-fontWeight-bolder: var(--salt-text-label-fontWeight-bolder);
+  --text-fontWeight-lighter: var(--salt-text-label-fontWeight-lighter);
+}
+.saltText-label2.saltText {
+  font-family: var(--salt-text-fontFamily);
+  font-size: var(--salt-text-label2-fontSize);
+  line-height: var(--salt-text-label2-lineHeight);
+  font-weight: var(--salt-text-label-fontWeight);
+  --text-fontWeight-bolder: var(--salt-text-label-fontWeight-bolder);
+  --text-fontWeight-lighter: var(--salt-text-label-fontWeight-lighter);
+}
+.saltText-body2.saltText {
+  font-family: var(--salt-text-fontFamily);
+  font-size: var(--salt-text-body2-fontSize);
+  line-height: var(--salt-text-body2-lineHeight);
+  font-weight: var(--salt-text-fontWeight);
+  --text-fontWeight-bolder: var(--salt-text-fontWeight-bolder);
+  --text-fontWeight-lighter: var(--salt-text-fontWeight-lighter);
+}
+.saltText-eyebrow.saltText {
+  font-family: var(--salt-text-eyebrow-fontFamily);
+  font-size: var(--salt-text-eyebrow-fontSize);
+  font-style: var(--salt-text-eyebrow-fontStyle, normal);
+  font-weight: var(--salt-text-eyebrow-fontWeight);
+  letter-spacing: var(--salt-text-eyebrow-letterSpacing);
+  line-height: var(--salt-text-eyebrow-lineHeight);
+  text-transform: var(--salt-text-eyebrow-textTransform, none);
+  --text-fontWeight-bolder: var(--salt-text-eyebrow-fontWeight-bolder);
+  --text-fontWeight-lighter: var(--salt-text-eyebrow-fontWeight-lighter);
+}
+.saltText-inheritStyle.saltText {
+  font-family: inherit;
+  font-size: inherit;
+  font-weight: inherit;
+  letter-spacing: inherit;
+  line-height: inherit;
+  --text-fontWeight-bolder: inherit;
+  --text-fontWeight-lighter: inherit;
 }
-label.saltText strong,
-.saltText-label.saltText strong {
-  font-weight: var(--salt-text-label-fontWeight-strong);
+.saltText strong,
+.saltText b {
+  font-weight: var(--text-fontWeight-bolder, var(--salt-text-fontWeight-bolder));
 }
-label.saltText small,
-.saltText-label.saltText small {
+.saltText small {
   font-size: inherit;
-  font-weight: var(--salt-text-label-fontWeight-small);
+  font-weight: var(--text-fontWeight-lighter, var(--salt-text-fontWeight-lighter));
+}
+.saltText.saltText-bolder {
+  font-weight: var(--text-fontWeight-bolder, var(--salt-text-fontWeight-bolder));
+}
+.saltText.saltText-lighter {
+  font-weight: var(--text-fontWeight-lighter, var(--salt-text-fontWeight-lighter));
 }
 
 /* src/toast/Toast.css */
@@ -6043,6 +6297,7 @@ label.saltText small,
 }
 .saltToggleButton[aria-pressed=true]:hover {
   background: var(--toggleButton-background-selectedHover);
+  color: var(--toggleButton-text-color-selectedHover);
   border-color: var(--toggleButton-borderColor-selectedHover);
 }
 .saltToggleButton[aria-disabled=true] {
@@ -6077,6 +6332,7 @@ label.saltText small,
   --toggleButton-text-color-hover: var(--salt-actionable-subtle-foreground-hover);
   --toggleButton-text-color-active: var(--salt-actionable-subtle-foreground-active);
   --toggleButton-text-color-selected: var(--salt-actionable-foreground-selected);
+  --toggleButton-text-color-selectedHover: var(--salt-actionable-bold-foreground-hover);
   --toggleButton-background: var(--salt-actionable-subtle-background);
   --toggleButton-background-hover: var(--salt-actionable-subtle-background-hover);
   --toggleButton-background-active: var(--salt-actionable-subtle-background-active);
@@ -6093,6 +6349,7 @@ label.saltText small,
   --toggleButton-text-color-hover: var(--salt-actionable-accented-subtle-foreground-hover);
   --toggleButton-text-color-active: var(--salt-actionable-accented-subtle-foreground-active);
   --toggleButton-text-color-selected: var(--salt-actionable-accented-foreground-selected);
+  --toggleButton-text-color-selectedHover: var(--salt-actionable-accented-bold-foreground-hover);
   --toggleButton-background: var(--salt-actionable-accented-subtle-background);
   --toggleButton-background-hover: var(--salt-actionable-accented-subtle-background-hover);
   --toggleButton-background-active: var(--salt-actionable-accented-subtle-background-active);
@@ -6109,6 +6366,7 @@ label.saltText small,
   --toggleButton-text-color-hover: var(--salt-actionable-positive-subtle-foreground-hover);
   --toggleButton-text-color-active: var(--salt-actionable-positive-subtle-foreground-active);
   --toggleButton-text-color-selected: var(--salt-actionable-positive-foreground-selected);
+  --toggleButton-text-color-selectedHover: var(--salt-actionable-positive-bold-foreground-hover);
   --toggleButton-background: var(--salt-actionable-positive-subtle-background);
   --toggleButton-background-hover: var(--salt-actionable-positive-subtle-background-hover);
   --toggleButton-background-active: var(--salt-actionable-positive-subtle-background-active);
@@ -6118,13 +6376,14 @@ label.saltText small,
   --toggleButton-borderColor-active: var(--salt-actionable-positive-subtle-borderColor-active);
   --toggleButton-borderColor-selected: var(--salt-actionable-positive-borderColor-selected);
   --toggleButton-borderColor-selectedHover: var(--salt-actionable-positive-bold-borderColor-hover);
-  --toggleButton-background-selectedHover: var(--salt-actionable-accented-bold-background-hover);
+  --toggleButton-background-selectedHover: var(--salt-actionable-positive-bold-background-hover);
 }
 .saltToggleButton-negative.saltToggleButton-solid {
   --toggleButton-text-color: var(--salt-actionable-negative-subtle-foreground);
   --toggleButton-text-color-hover: var(--salt-actionable-negative-subtle-foreground-hover);
   --toggleButton-text-color-active: var(--salt-actionable-negative-subtle-foreground-active);
   --toggleButton-text-color-selected: var(--salt-actionable-negative-foreground-selected);
+  --toggleButton-text-color-selectedHover: var(--salt-actionable-negative-bold-foreground-hover);
   --toggleButton-background: var(--salt-actionable-negative-subtle-background);
   --toggleButton-background-hover: var(--salt-actionable-negative-subtle-background-hover);
   --toggleButton-background-active: var(--salt-actionable-negative-subtle-background-active);
@@ -6141,6 +6400,7 @@ label.saltText small,
   --toggleButton-text-color-hover: var(--salt-actionable-caution-subtle-foreground-hover);
   --toggleButton-text-color-active: var(--salt-actionable-caution-subtle-foreground-active);
   --toggleButton-text-color-selected: var(--salt-actionable-caution-foreground-selected);
+  --toggleButton-text-color-selectedHover: var(--salt-actionable-caution-bold-foreground-hover);
   --toggleButton-background: var(--salt-actionable-caution-subtle-background);
   --toggleButton-background-hover: var(--salt-actionable-caution-subtle-background-hover);
   --toggleButton-background-active: var(--salt-actionable-caution-subtle-background-active);
@@ -6155,15 +6415,16 @@ label.saltText small,
 .saltToggleButton-neutral.saltToggleButton-bordered {
   --toggleButton-text-color: var(--salt-actionable-foreground);
   --toggleButton-text-color-hover: var(--salt-actionable-foreground-hover);
-  --toggleButton-text-color-active: var(--salt-actionable-foreground);
+  --toggleButton-text-color-active: var(--salt-actionable-foreground-active);
   --toggleButton-text-color-selected: var(--salt-actionable-foreground-selected);
+  --toggleButton-text-color-selectedHover: var(--salt-actionable-bold-foreground-hover);
   --toggleButton-background: var(--salt-actionable-background);
   --toggleButton-background-hover: var(--salt-actionable-background-hover);
-  --toggleButton-background-active: var(--salt-actionable-background);
+  --toggleButton-background-active: var(--salt-actionable-background-active);
   --toggleButton-background-selected: var(--salt-actionable-background-selected);
   --toggleButton-borderColor: var(--salt-actionable-borderColor);
-  --toggleButton-borderColor-hover: var(--salt-actionable-borderColor);
-  --toggleButton-borderColor-active: var(--salt-actionable-borderColor);
+  --toggleButton-borderColor-hover: var(--salt-actionable-borderColor-hover);
+  --toggleButton-borderColor-active: var(--salt-actionable-borderColor-active);
   --toggleButton-borderColor-selected: var(--salt-actionable-borderColor-selected);
   --toggleButton-borderColor-selectedHover: var(--salt-actionable-bold-borderColor-hover);
   --toggleButton-background-selectedHover: var(--salt-actionable-bold-background-hover);
@@ -6171,15 +6432,16 @@ label.saltText small,
 .saltToggleButton-accented.saltToggleButton-bordered {
   --toggleButton-text-color: var(--salt-actionable-accented-foreground);
   --toggleButton-text-color-hover: var(--salt-actionable-accented-foreground-hover);
-  --toggleButton-text-color-active: var(--salt-actionable-accented-foreground);
+  --toggleButton-text-color-active: var(--salt-actionable-accented-foreground-active);
   --toggleButton-text-color-selected: var(--salt-actionable-accented-foreground-selected);
+  --toggleButton-text-color-selectedHover: var(--salt-actionable-accented-bold-foreground-hover);
   --toggleButton-background: var(--salt-actionable-accented-background);
   --toggleButton-background-hover: var(--salt-actionable-accented-background-hover);
-  --toggleButton-background-active: var(--salt-actionable-accented-background);
+  --toggleButton-background-active: var(--salt-actionable-accented-background-active);
   --toggleButton-background-selected: var(--salt-actionable-accented-background-selected);
   --toggleButton-borderColor: var(--salt-actionable-accented-borderColor);
-  --toggleButton-borderColor-hover: var(--salt-actionable-accented-borderColor);
-  --toggleButton-borderColor-active: var(--salt-actionable-accented-borderColor);
+  --toggleButton-borderColor-hover: var(--salt-actionable-accented-borderColor-hover);
+  --toggleButton-borderColor-active: var(--salt-actionable-accented-borderColor-active);
   --toggleButton-borderColor-selected: var(--salt-actionable-accented-borderColor-selected);
   --toggleButton-borderColor-selectedHover: var(--salt-actionable-accented-bold-borderColor-hover);
   --toggleButton-background-selectedHover: var(--salt-actionable-accented-bold-background-hover);
@@ -6187,15 +6449,16 @@ label.saltText small,
 .saltToggleButton-positive.saltToggleButton-bordered {
   --toggleButton-text-color: var(--salt-actionable-positive-foreground);
   --toggleButton-text-color-hover: var(--salt-actionable-positive-foreground-hover);
-  --toggleButton-text-color-active: var(--salt-actionable-positive-foreground);
+  --toggleButton-text-color-active: var(--salt-actionable-positive-foreground-active);
   --toggleButton-text-color-selected: var(--salt-actionable-positive-foreground-selected);
+  --toggleButton-text-color-selectedHover: var(--salt-actionable-positive-bold-foreground-hover);
   --toggleButton-background: var(--salt-actionable-positive-background);
   --toggleButton-background-hover: var(--salt-actionable-positive-background-hover);
-  --toggleButton-background-active: var(--salt-actionable-positive-background);
+  --toggleButton-background-active: var(--salt-actionable-positive-background-active);
   --toggleButton-background-selected: var(--salt-actionable-positive-background-selected);
   --toggleButton-borderColor: var(--salt-actionable-positive-borderColor);
-  --toggleButton-borderColor-hover: var(--salt-actionable-positive-borderColor);
-  --toggleButton-borderColor-active: var(--salt-actionable-positive-borderColor);
+  --toggleButton-borderColor-hover: var(--salt-actionable-positive-borderColor-hover);
+  --toggleButton-borderColor-active: var(--salt-actionable-positive-borderColor-active);
   --toggleButton-borderColor-selected: var(--salt-actionable-positive-borderColor-selected);
   --toggleButton-borderColor-selectedHover: var(--salt-actionable-positive-bold-borderColor-hover);
   --toggleButton-background-selectedHover: var(--salt-actionable-positive-bold-background-hover);
@@ -6203,15 +6466,16 @@ label.saltText small,
 .saltToggleButton-negative.saltToggleButton-bordered {
   --toggleButton-text-color: var(--salt-actionable-negative-foreground);
   --toggleButton-text-color-hover: var(--salt-actionable-negative-foreground-hover);
-  --toggleButton-text-color-active: var(--salt-actionable-negative-foreground);
+  --toggleButton-text-color-active: var(--salt-actionable-negative-foreground-active);
   --toggleButton-text-color-selected: var(--salt-actionable-negative-foreground-selected);
+  --toggleButton-text-color-selectedHover: var(--salt-actionable-negative-bold-foreground-hover);
   --toggleButton-background: var(--salt-actionable-negative-background);
   --toggleButton-background-hover: var(--salt-actionable-negative-background-hover);
-  --toggleButton-background-active: var(--salt-actionable-negative-background);
+  --toggleButton-background-active: var(--salt-actionable-negative-background-active);
   --toggleButton-background-selected: var(--salt-actionable-negative-background-selected);
   --toggleButton-borderColor: var(--salt-actionable-negative-borderColor);
-  --toggleButton-borderColor-hover: var(--salt-actionable-negative-borderColor);
-  --toggleButton-borderColor-active: var(--salt-actionable-negative-borderColor);
+  --toggleButton-borderColor-hover: var(--salt-actionable-negative-borderColor-hover);
+  --toggleButton-borderColor-active: var(--salt-actionable-negative-borderColor-active);
   --toggleButton-borderColor-selected: var(--salt-actionable-negative-borderColor-selected);
   --toggleButton-borderColor-selectedHover: var(--salt-actionable-negative-bold-borderColor-hover);
   --toggleButton-background-selectedHover: var(--salt-actionable-negative-bold-background-hover);
@@ -6219,15 +6483,16 @@ label.saltText small,
 .saltToggleButton-caution.saltToggleButton-bordered {
   --toggleButton-text-color: var(--salt-actionable-caution-foreground);
   --toggleButton-text-color-hover: var(--salt-actionable-caution-foreground-hover);
-  --toggleButton-text-color-active: var(--salt-actionable-caution-foreground);
+  --toggleButton-text-color-active: var(--salt-actionable-caution-foreground-active);
   --toggleButton-text-color-selected: var(--salt-actionable-caution-foreground-selected);
+  --toggleButton-text-color-selectedHover: var(--salt-actionable-caution-bold-foreground-hover);
   --toggleButton-background: var(--salt-actionable-caution-background);
   --toggleButton-background-hover: var(--salt-actionable-caution-background-hover);
-  --toggleButton-background-active: var(--salt-actionable-caution-background);
+  --toggleButton-background-active: var(--salt-actionable-caution-background-active);
   --toggleButton-background-selected: var(--salt-actionable-caution-background-selected);
   --toggleButton-borderColor: var(--salt-actionable-caution-borderColor);
-  --toggleButton-borderColor-hover: var(--salt-actionable-caution-borderColor);
-  --toggleButton-borderColor-active: var(--salt-actionable-caution-borderColor);
+  --toggleButton-borderColor-hover: var(--salt-actionable-caution-borderColor-hover);
+  --toggleButton-borderColor-active: var(--salt-actionable-caution-borderColor-active);
   --toggleButton-borderColor-selected: var(--salt-actionable-caution-borderColor-selected);
   --toggleButton-borderColor-selectedHover: var(--salt-actionable-caution-bold-borderColor-hover);
   --toggleButton-background-selectedHover: var(--salt-actionable-caution-bold-background-hover);
@@ -6731,6 +6996,9 @@ label.saltText small,
   background: var(--salt-selectable-background);
   color: var(--salt-content-primary-foreground);
 }
+.saltTreeNode-selected.saltTreeNode-disabled > .saltTreeNodeTrigger {
+  background: var(--salt-selectable-background-selected);
+}
 .saltTreeNodeTrigger > .saltTreeNode-checkbox {
   margin-top: var(--saltTreeNodeTrigger-checkboxOffsetY);
   margin-bottom: 0;
@@ -6896,7 +7164,125 @@ label.saltText small,
   margin: 0;
 }
 .saltVerticalNavigationSubMenu .saltVerticalNavigationItemContent {
-  font-weight: var(--salt-text-heading-fontWeight-small);
+  font-weight: var(--salt-text-heading-fontWeight-lighter);
+}
+
+/* src/drawer/internal/DrawerResizeGuide.css */
+.saltDrawerResizeGuide {
+  --drawerResizeGuide-borderColor: var(--salt-content-secondary-foreground);
+  --drawerResizeGuide-borderWidth: var(--salt-size-fixed-200);
+  position: fixed;
+  inset: 0;
+  z-index: calc(var(--salt-zIndex-drawer) + 1);
+  touch-action: none;
+  user-select: none;
+}
+.saltDrawerResizeGuide::before {
+  content: "";
+  position: absolute;
+  box-sizing: border-box;
+  pointer-events: none;
+}
+.saltDrawerResizeGuide-vertical {
+  cursor: var(--salt-cursor-drag-ew);
+}
+.saltDrawerResizeGuide-vertical::before {
+  top: 0;
+  bottom: 0;
+  left: var(--drawerResizeGuide-offset, 0px);
+  width: 0;
+  border-left: var(--drawerResizeGuide-borderWidth) var(--salt-borderStyle-dashed) var(--drawerResizeGuide-borderColor);
+  transform: translateX(-50%);
+}
+.saltDrawerResizeGuide-horizontal {
+  cursor: var(--salt-cursor-drag-ns);
+}
+.saltDrawerResizeGuide-horizontal::before {
+  left: 0;
+  right: 0;
+  top: var(--drawerResizeGuide-offset, 0px);
+  height: 0;
+  border-top: var(--drawerResizeGuide-borderWidth) var(--salt-borderStyle-dashed) var(--drawerResizeGuide-borderColor);
+  transform: translateY(-50%);
+}
+
+/* src/drawer/internal/DrawerResizeHandle.css */
+.saltDrawerResizeHandle {
+  --drawerResizeHandle-thumbSize: max(var(--salt-size-icon, 12px), 12px);
+  --drawerResizeHandle-thumbImage: url(data:image/svg+xml,%3Csvg%20width%3D%2212%22%20height%3D%2212%22%20viewBox%3D%220%200%2012%2012%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20%3E%3Cpath%20d%3D%22M5%2011V9H7V11H5Z%22%20%2F%3E%3Cpath%20d%3D%22M5%207L5%205H7L7%207H5Z%22%20%2F%3E%3Cpath%20d%3D%22M5%201V3H7V1L5%201Z%22%20%2F%3E%3C%2Fsvg%3E);
+  --drawerResizeHandle-background: transparent;
+  --drawerResizeHandle-background-hover: var(--salt-separable-background-hover);
+  --drawerResizeHandle-background-active: var(--salt-separable-background-active);
+  --drawerResizeHandle-dot-background: var(--salt-separable-foreground);
+  --drawerResizeHandle-dot-background-hover: var(--salt-separable-foreground-hover);
+  --drawerResizeHandle-dot-background-active: var(--salt-separable-foreground-active);
+  --drawerResizeHandle-targetSize: calc(var(--drawer-resizeHandleSize) + 2 * var(--drawer-resizeHandleOutset));
+  position: absolute;
+  z-index: 1;
+  touch-action: none;
+}
+.saltDrawerResizeHandle::before,
+.saltDrawerResizeHandle::after {
+  content: "";
+  position: absolute;
+  inset: var(--drawerResizeHandle-stripInset);
+}
+.saltDrawerResizeHandle::before {
+  background: var(--drawerResizeHandle-background);
+}
+.saltDrawerResizeHandle::after {
+  background: var(--drawerResizeHandle-dot-background);
+  mask-image: var(--drawerResizeHandle-thumbImage);
+  mask-position: center;
+  mask-repeat: no-repeat;
+  mask-size: var(--drawerResizeHandle-thumbSize);
+  -webkit-mask-image: var(--drawerResizeHandle-thumbImage);
+  -webkit-mask-position: center;
+  -webkit-mask-repeat: no-repeat;
+  -webkit-mask-size: var(--drawerResizeHandle-thumbSize);
+}
+.saltDrawerResizeHandle-left,
+.saltDrawerResizeHandle-right {
+  --drawerResizeHandle-stripInset: 0 var(--drawer-resizeHandleOutset);
+  top: 0;
+  bottom: 0;
+  width: var(--drawerResizeHandle-targetSize);
+}
+.saltDrawerResizeHandle-left {
+  right: calc(-1 * var(--drawer-resizeHandleOutset));
+}
+.saltDrawerResizeHandle-right {
+  left: calc(-1 * var(--drawer-resizeHandleOutset));
+}
+.saltDrawerResizeHandle-top,
+.saltDrawerResizeHandle-bottom {
+  --drawerResizeHandle-thumbImage: url(data:image/svg+xml,%3Csvg%20width%3D%2212%22%20height%3D%2212%22%20viewBox%3D%220%200%2012%2012%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20%3E%3Cpath%20d%3D%22M1%205H3V7H1Z%22%20%2F%3E%3Cpath%20d%3D%22M5%205H7V7H5Z%22%20%2F%3E%3Cpath%20d%3D%22M9%205H11V7H9Z%22%20%2F%3E%3C%2Fsvg%3E);
+  --drawerResizeHandle-stripInset: var(--drawer-resizeHandleOutset) 0;
+  left: 0;
+  right: 0;
+  height: var(--drawerResizeHandle-targetSize);
+}
+.saltDrawerResizeHandle-top {
+  bottom: calc(-1 * var(--drawer-resizeHandleOutset));
+}
+.saltDrawerResizeHandle-bottom {
+  top: calc(-1 * var(--drawer-resizeHandleOutset));
+}
+.saltDrawerResizeHandle-hovered {
+  --drawerResizeHandle-background: var(--drawerResizeHandle-background-hover);
+  --drawerResizeHandle-dot-background: var(--drawerResizeHandle-dot-background-hover);
+}
+.saltDrawerResizeHandle.saltDrawerResizeHandle-resizing {
+  --drawerResizeHandle-background: var(--drawerResizeHandle-background-active);
+  --drawerResizeHandle-dot-background: var(--drawerResizeHandle-dot-background-active);
+}
+.saltDrawerResizeHandle:focus-visible {
+  outline: none;
+}
+.saltDrawerResizeHandle:focus-visible::before {
+  outline-style: var(--salt-focused-outlineStyle);
+  outline-width: var(--salt-focused-outlineWidth);
+  outline-color: var(--salt-focused-outlineColor);
 }
 
 /* src/progress/CircularProgress/CircularProgress.css */
@@ -7424,13 +7810,13 @@ label.saltText small,
   padding-left: calc(var(--step-depth) * var(--salt-spacing-100));
 }
 .saltStep-depth-0 > .saltText.saltStepText-label {
-  font-weight: var(--salt-text-fontWeight-strong);
+  font-weight: var(--salt-text-fontWeight-bolder);
 }
 .saltStepText-description {
   grid-area: description;
   color: var(--salt-content-secondary-foreground);
   font-size: var(--salt-text-label-fontSize);
-  font-weight: var(--salt-text-label-fontWeight-strong);
+  font-weight: var(--salt-text-label-fontWeight-bolder);
   font-family: var(--salt-text-fontFamily);
   line-height: var(--salt-text-label-lineHeight);
   letter-spacing: var(--salt-text-letterSpacing);
@@ -7517,4 +7903,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/f4ebb149-7141-4270-8ac0-a01fbff8903d.css */
+/* src/92ad5b70-6538-4237-91eb-564c13b73316.css */