@salt-ds/core 1.68.0 → 1.70.0

package/CHANGELOG.md

@@ -1,5 +1,72 @@
 # @salt-ds/core
 
+## 1.70.0
+
+### Minor Changes
+
+- 6c12378: Added `--saltAvatar-size` for sizing an Avatar from a CSS length. Images, fallback icons and initials stay proportional to that length across densities, matching the existing `size` multiplier ratio.
+
+### Patch Changes
+
+- 2892934: Fixed `Avatar` so consumer `style` can override `--saltAvatar-size-multiplier`.
+- 416d4b8: Fixed `VerticalNavigationItemTrigger` dropping its forwarded ref.
+
+  The internal action element was a plain function component, so the ref passed to `VerticalNavigationItemTrigger` never reached the rendered element on React 18 and below. This broke consumers that need the underlying node, such as wrapping the trigger in a `Tooltip`.
+
+  ```tsx
+  <Tooltip content="Products" placement="right">
+    <VerticalNavigationItemTrigger render={<Link to="/products" />}>
+      <VerticalNavigationItemLabel>Products</VerticalNavigationItemLabel>
+    </VerticalNavigationItemTrigger>
+  </Tooltip>
+  ```
+
+## 1.69.0
+
+### Minor Changes
+
+- fc59869: Added a `kind` prop to `Avatar` to distinguish usage by what the Avatar represents.
+
+  - `kind="person"` (default) renders a circular Avatar.
+  - `kind="entity"` renders a square Avatar.
+
+  ```tsx
+  <Avatar name="John Doe" />
+  <Avatar kind="entity" name="JPMC" />
+  ```
+
+- e3c0230: Add `CardHeader`, `CardContent` and `CardFooter`, composable layout sections that own the inner padding of a card. Use them as direct children of `Card`, `LinkCard` or `InteractableCard` to create structured layouts and allow other children, such as images or dividers, to extend to the card's edges. When a section is present, the wrapping card's default padding is automatically removed.
+- b573303: Added `Breadcrumbs`, `Breadcrumb`, `BreadcrumbTrigger`, and `BreadcrumbLabel` for secondary navigation trails with collapse, wrapping, and router compatible link rendering.
+
+  Renamed from `BreadcrumbsNext`, `BreadcrumbNext`, `BreadcrumbNextTrigger`, and `BreadcrumbNextLabel` in lab.
+
+  ```tsx
+  import { Breadcrumb, Breadcrumbs } from "@salt-ds/core";
+
+  <Breadcrumbs aria-label="Breadcrumb">
+    <Breadcrumb href="/">Home</Breadcrumb>
+    <Breadcrumb href="/level-1">Level 1</Breadcrumb>
+    <Breadcrumb href="/level-2">Current level</Breadcrumb>
+  </Breadcrumbs>;
+  ```
+
+- 9c4e307: Add `hideArrow` prop to `Overlay`.
+
+  ```tsx
+  <Overlay hideArrow>
+    <OverlayTrigger>
+      <Button>Show Overlay</Button>
+    </OverlayTrigger>
+    <OverlayPanel>Overlay content</OverlayPanel>
+  </Overlay>
+  ```
+
+### Patch Changes
+
+- e25daab: Fixed the TypeScript definition for `OverlayProps` to no longer include unsupported DOM attributes, since `Overlay` does not render a DOM element.
+- e25daab: Reduced the gap between `Overlay` panels and their anchor element, and improved `Overlay` rendering performance by memoizing context values.
+- df76f3e: Fixed the default semantic `UserIcon` to render with the outline icon instead of the solid icon. Validation semantic icons continue to use solid icons by default.
+
 ## 1.68.0
 
 ### Minor Changes

package/css/salt-core.css

@@ -116,11 +116,27 @@
 }
 
 /* src/avatar/Avatar.css */
+.salt-density-high {
+  --avatar-fontSize-ratio: calc(8 / 20);
+}
+.salt-density-medium {
+  --avatar-fontSize-ratio: calc(10 / 28);
+}
+.salt-density-low {
+  --avatar-fontSize-ratio: calc(12 / 36);
+}
+.salt-density-touch {
+  --avatar-fontSize-ratio: calc(14 / 44);
+}
+.salt-density-mobile {
+  --avatar-fontSize-ratio: calc(12 / 44);
+}
 .saltAvatar {
   --avatar-size-multiplier: var(--saltAvatar-size-multiplier, 1);
   --avatar-base-size: var(--salt-size-base);
-  --avatar-base-fontSize: var(--saltAvatar-fontSize, var(--salt-text-notation-fontSize));
-  --avatar-container-size: calc(var(--avatar-base-size) * var(--avatar-size-multiplier));
+  --avatar-direct-fontSize: calc(var(--saltAvatar-size) * var(--avatar-fontSize-ratio) / var(--avatar-size-multiplier));
+  --avatar-base-fontSize: var(--saltAvatar-fontSize, var(--avatar-direct-fontSize, var(--salt-text-notation-fontSize)));
+  --avatar-container-size: var(--saltAvatar-size, calc(var(--avatar-base-size) * var(--avatar-size-multiplier)));
   --avatar-fontSize: calc(var(--avatar-base-fontSize) * var(--avatar-size-multiplier));
   --saltIcon-size: calc(var(--avatar-container-size) / 2);
 }
@@ -148,6 +164,9 @@
   overflow: hidden;
   user-select: none;
 }
+.saltAvatar-entity {
+  border-radius: var(--salt-palette-corner-weak, 0);
+}
 .saltAvatar-accent {
   --avatar-background: var(--salt-sentiment-accent-background);
 }
@@ -371,6 +390,155 @@ a.saltAvatar::after {
   bottom: 0;
 }
 
+/* src/breadcrumbs/Breadcrumb.css */
+.saltBreadcrumb {
+  align-items: center;
+  display: inline-flex;
+  flex: 0 1 auto;
+  gap: var(--salt-spacing-100);
+  list-style: none;
+  min-width: 0;
+}
+.saltBreadcrumb-current,
+.saltBreadcrumb-label,
+.saltBreadcrumb-link,
+.saltBreadcrumb-trigger {
+  min-width: 0;
+}
+.saltBreadcrumb-trigger {
+  align-items: center;
+  color: var(--salt-content-primary-foreground);
+  display: inline-flex;
+  font-family: var(--salt-text-label-fontFamily);
+  font-size: var(--salt-text-label-fontSize);
+  font-weight: var(--salt-text-fontWeight);
+  gap: var(--salt-spacing-50);
+  letter-spacing: var(--salt-text-letterSpacing);
+  line-height: var(--salt-text-label-lineHeight);
+  max-width: 100%;
+  text-decoration: var(--salt-typography-textDecoration-none);
+}
+.saltBreadcrumb-link:not(.saltBreadcrumb-current) {
+  text-decoration: var(--salt-typography-textDecoration-underline);
+}
+.saltBreadcrumb-link:not(.saltBreadcrumb-current):hover {
+  text-decoration: var(--salt-typography-textDecoration-none);
+}
+.saltBreadcrumb-link:not(.saltBreadcrumb-current):active {
+  text-decoration: var(--salt-typography-textDecoration-underline);
+}
+.saltBreadcrumb-trigger:focus {
+  outline: var(--salt-focused-outline);
+  text-decoration: var(--salt-typography-textDecoration-none);
+}
+.saltBreadcrumb-current {
+  cursor: var(--salt-cursor-text);
+}
+.saltBreadcrumb-separator {
+  --saltIcon-color: var(--salt-content-secondary-foreground);
+  --saltIcon-size: var(--salt-size-icon);
+  flex: 0 0 auto;
+}
+
+/* src/breadcrumbs/Breadcrumbs.css */
+.saltBreadcrumbs {
+  display: block;
+  margin-block: var(--salt-spacing-25);
+}
+.saltBreadcrumbs-ol {
+  display: flex;
+  align-items: center;
+  flex-wrap: nowrap;
+  gap: var(--salt-spacing-100);
+  justify-content: flex-start;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+.saltBreadcrumbs-ol-wrap {
+  flex-wrap: wrap;
+}
+.saltBreadcrumbs-collapseItem {
+  align-items: center;
+  display: inline-flex;
+  flex: 0 1 auto;
+  gap: var(--salt-spacing-100);
+  list-style: none;
+  min-width: 0;
+}
+.saltBreadcrumbs-collapseButton[aria-expanded=true] {
+  --saltButton-background: var(--salt-actionable-subtle-background-active);
+  --saltButton-background-hover: var(--salt-actionable-subtle-background-active);
+  --saltButton-text-color: var(--salt-actionable-subtle-foreground-active);
+  --saltButton-text-color-hover: var(--salt-actionable-subtle-foreground-active);
+  --saltButton-borderColor: var(--salt-actionable-subtle-borderColor-active);
+  --saltButton-borderColor-hover: var(--salt-actionable-subtle-borderColor-active);
+  cursor: var(--salt-cursor-active);
+}
+.saltBreadcrumbs-disclosure {
+  background: var(--salt-container-primary-background);
+  border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-selectable-borderColor-selected);
+  overflow: hidden;
+  overflow-y: auto;
+  min-width: 10em;
+  position: relative;
+  z-index: var(--salt-zIndex-flyover);
+  box-shadow: var(--salt-overlayable-shadow-popout);
+  box-sizing: border-box;
+  border-radius: var(--salt-palette-corner, 0);
+}
+.saltBreadcrumbs-disclosureList {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+.saltBreadcrumbs-disclosureListItem {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+.saltBreadcrumbs-disclosureItem {
+  color: var(--salt-content-primary-foreground);
+  background: var(--salt-selectable-background);
+  font-size: var(--salt-text-fontSize);
+  font-weight: var(--salt-text-fontWeight);
+  font-family: var(--salt-text-fontFamily);
+  line-height: var(--salt-text-lineHeight);
+  letter-spacing: var(--salt-text-letterSpacing);
+  min-height: calc(var(--salt-size-base) + var(--salt-spacing-100));
+  padding: calc(var(--salt-spacing-100) + var(--salt-spacing-25)) var(--salt-spacing-100);
+  display: flex;
+  gap: var(--salt-spacing-100);
+  position: relative;
+  cursor: var(--salt-cursor-hover);
+  box-sizing: border-box;
+  flex-shrink: 0;
+  text-decoration: none;
+  width: 100%;
+}
+.saltBreadcrumbs-disclosureItem:focus-visible {
+  outline: var(--salt-focused-outline);
+  outline-offset: calc(var(--salt-size-fixed-100) * -2);
+}
+.saltBreadcrumbs-disclosureItem:hover {
+  outline: none;
+}
+.saltBreadcrumbs-disclosureItem:hover,
+.saltBreadcrumbs-disclosureItem:focus-visible {
+  background: var(--salt-selectable-background-hover);
+}
+.saltBreadcrumbs-disclosureItem: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);
+}
+.saltBreadcrumbs-disclosureItem[aria-disabled=true],
+.saltBreadcrumbs-disclosureItem[aria-disabled=true]:active {
+  background: var(--salt-selectable-background-disabled);
+  color: var(--salt-content-primary-foreground-disabled);
+  cursor: var(--salt-cursor-disabled);
+  box-shadow: none;
+}
+
 /* src/button/Button.css */
 .saltButton {
   --button-borderWidth: var(--salt-size-fixed-100);
@@ -697,7 +865,7 @@ a.saltAvatar::after {
 .saltCard {
   border-width: var(--saltCard-borderWidth, var(--salt-size-fixed-100));
   border-style: var(--salt-borderStyle-solid);
-  padding: var(--saltCard-padding, var(--salt-spacing-200));
+  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;
@@ -705,18 +873,31 @@ a.saltAvatar::after {
   border-radius: var(--saltCard-borderRadius, var(--salt-palette-corner, 0));
   overflow: hidden;
   --card-accent-color: var(--salt-sentiment-accent-background);
+  --card-padding: var(--salt-spacing-200);
+}
+.saltCard.saltCard-sectioned {
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+}
+@supports selector(:has(*)) {
+  .saltCard:has(> .saltCardHeader, > .saltCardContent, > .saltCardFooter) {
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+  }
 }
 .saltCard-primary {
   background: var(--saltCard-background, var(--salt-container-primary-background));
-  border-color: var(--salt-container-primary-borderColor);
+  border-color: var(--salt-container-bold-borderColor);
 }
 .saltCard-secondary {
   background: var(--saltCard-background, var(--salt-container-secondary-background));
-  border-color: var(--salt-container-secondary-borderColor);
+  border-color: var(--salt-container-bold-borderColor);
 }
 .saltCard-tertiary {
   background: var(--saltCard-background, var(--salt-container-tertiary-background));
-  border-color: var(--salt-container-tertiary-borderColor);
+  border-color: var(--salt-container-bold-borderColor);
 }
 .saltCard-ghost {
   background: var(--saltCard-background, var(--salt-container-ghost-background));
@@ -782,7 +963,7 @@ a:focus .saltCard-interactable.saltCard-disabled,
 .saltCard-disabled,
 .saltCard-disabled.saltCard-interactable,
 a:focus .saltCard-interactable.saltCard-disabled {
-  border-color: var(--salt-container-primary-borderColor-disabled);
+  border-color: var(--salt-container-bold-borderColor-disabled);
   color: var(--saltCard-color-disabled, var(--salt-content-primary-foreground-disabled));
   cursor: var(--saltCard-cursor-disabled, var(--salt-cursor-disabled));
   outline: none;
@@ -791,6 +972,97 @@ a:focus .saltCard-interactable.saltCard-disabled {
   pointer-events: none;
 }
 
+/* src/card/CardContent.css */
+.saltCardContent {
+  padding: var(--saltCardContent-padding, var(--salt-spacing-200));
+  box-sizing: border-box;
+}
+.saltCard-sectioned > .saltCardHeader + .saltCardContent,
+.saltCard-sectioned > .saltCardContent + .saltCardContent,
+.saltLinkCard-sectioned > .saltCardHeader + .saltCardContent,
+.saltLinkCard-sectioned > .saltCardContent + .saltCardContent,
+.saltInteractableCard-sectioned > .saltCardHeader + .saltCardContent,
+.saltInteractableCard-sectioned > .saltCardContent + .saltCardContent {
+  padding-top: 0;
+}
+.saltCard-sectioned > .saltCardContent,
+.saltLinkCard-sectioned > .saltCardContent,
+.saltInteractableCard-sectioned > .saltCardContent {
+  flex: 1 1 auto;
+}
+@supports selector(:has(*)) {
+  .saltCard > .saltCardHeader + .saltCardContent,
+  .saltCard > .saltCardContent + .saltCardContent,
+  .saltLinkCard > .saltCardHeader + .saltCardContent,
+  .saltLinkCard > .saltCardContent + .saltCardContent,
+  .saltInteractableCard > .saltCardHeader + .saltCardContent,
+  .saltInteractableCard > .saltCardContent + .saltCardContent {
+    padding-top: 0;
+  }
+  .saltCard > .saltCardContent,
+  .saltLinkCard > .saltCardContent,
+  .saltInteractableCard > .saltCardContent {
+    flex: 1 1 auto;
+  }
+}
+
+/* src/card/CardFooter.css */
+.saltCardFooter {
+  padding: var(--saltCardFooter-padding, var(--salt-spacing-200));
+  display: flex;
+  align-items: center;
+  gap: var(--salt-spacing-100);
+  box-sizing: border-box;
+}
+.saltCard-sectioned > .saltCardHeader + .saltCardFooter,
+.saltCard-sectioned > .saltCardContent + .saltCardFooter,
+.saltLinkCard-sectioned > .saltCardHeader + .saltCardFooter,
+.saltLinkCard-sectioned > .saltCardContent + .saltCardFooter,
+.saltInteractableCard-sectioned > .saltCardHeader + .saltCardFooter,
+.saltInteractableCard-sectioned > .saltCardContent + .saltCardFooter {
+  padding-top: 0;
+}
+.saltCard-sectioned > .saltCardFooter,
+.saltLinkCard-sectioned > .saltCardFooter,
+.saltInteractableCard-sectioned > .saltCardFooter {
+  flex-shrink: 0;
+  margin-top: auto;
+}
+@supports selector(:has(*)) {
+  .saltCard > .saltCardHeader + .saltCardFooter,
+  .saltCard > .saltCardContent + .saltCardFooter,
+  .saltLinkCard > .saltCardHeader + .saltCardFooter,
+  .saltLinkCard > .saltCardContent + .saltCardFooter,
+  .saltInteractableCard > .saltCardHeader + .saltCardFooter,
+  .saltInteractableCard > .saltCardContent + .saltCardFooter {
+    padding-top: 0;
+  }
+  .saltCard > .saltCardFooter,
+  .saltLinkCard > .saltCardFooter,
+  .saltInteractableCard > .saltCardFooter {
+    flex-shrink: 0;
+    margin-top: auto;
+  }
+}
+
+/* src/card/CardHeader.css */
+.saltCardHeader {
+  padding: var(--saltCardHeader-padding, var(--salt-spacing-200));
+  box-sizing: border-box;
+}
+.saltCard-sectioned > .saltCardHeader,
+.saltLinkCard-sectioned > .saltCardHeader,
+.saltInteractableCard-sectioned > .saltCardHeader {
+  flex-shrink: 0;
+}
+@supports selector(:has(*)) {
+  .saltCard > .saltCardHeader,
+  .saltLinkCard > .saltCardHeader,
+  .saltInteractableCard > .saltCardHeader {
+    flex-shrink: 0;
+  }
+}
+
 /* src/checkbox/Checkbox.css */
 .saltCheckbox {
   display: inline-flex;
@@ -1452,7 +1724,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
   text-align: center;
   align-items: center;
   justify-content: center;
-  border: var(--saltFileDropZone-border, var(--salt-size-fixed-200) var(--salt-borderStyle-dashed) var(--salt-container-primary-borderColor));
+  border: var(--saltFileDropZone-border, var(--salt-size-fixed-200) var(--salt-borderStyle-dashed) var(--salt-container-bold-borderColor));
   border-radius: var(--saltFileDropZone-borderRadius, var(--salt-palette-corner, 0));
   flex-direction: column;
   padding: var(--salt-spacing-200);
@@ -1475,7 +1747,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
 }
 .saltFileDropZone-disabled {
   background: var(--salt-container-primary-background-disabled);
-  border: var(--salt-size-fixed-200) var(--salt-borderStyle-dashed) var(--salt-container-primary-borderColor-disabled);
+  border: var(--salt-size-fixed-200) var(--salt-borderStyle-dashed) var(--salt-container-bold-borderColor-disabled);
   cursor: var(--salt-cursor-disabled);
   color: var(--salt-content-primary-foreground-disabled);
 }
@@ -1917,24 +2189,37 @@ a:focus .saltCard-interactable.saltCard-disabled {
   border-radius: var(--saltInteractableCard-borderRadius, var(--salt-palette-corner, 0));
   box-shadow: var(--salt-overlayable-shadow);
   display: block;
-  padding: var(--saltInteractableCard-padding, var(--salt-spacing-200));
+  padding: var(--saltInteractableCard-padding, var(--card-padding));
   position: relative;
   text-align: start;
   transition: box-shadow var(--salt-duration-instant) ease-in-out;
   overflow: hidden;
   --card-accent-color: var(--salt-sentiment-accent-background);
+  --card-padding: var(--salt-spacing-200);
+}
+.saltInteractableCard.saltInteractableCard-sectioned {
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+}
+@supports selector(:has(*)) {
+  .saltInteractableCard:has(> .saltCardHeader, > .saltCardContent, > .saltCardFooter) {
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+  }
 }
 .saltInteractableCard-primary {
   background: var(--saltInteractableCard-background, var(--salt-container-primary-background));
-  border-color: var(--salt-container-primary-borderColor);
+  border-color: var(--salt-container-bold-borderColor);
 }
 .saltInteractableCard-secondary {
   background: var(--saltInteractableCard-background, var(--salt-container-secondary-background));
-  border-color: var(--salt-container-secondary-borderColor);
+  border-color: var(--salt-container-bold-borderColor);
 }
 .saltInteractableCard-tertiary {
   background: var(--saltInteractableCard-background, var(--salt-container-tertiary-background));
-  border-color: var(--salt-container-tertiary-borderColor);
+  border-color: var(--salt-container-bold-borderColor);
 }
 .saltInteractableCard-accent::after {
   content: "";
@@ -2029,9 +2314,9 @@ a:focus .saltCard-interactable.saltCard-disabled {
   box-sizing: border-box;
   width: fit-content;
   border-radius: var(--salt-palette-corner-weaker);
-  border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-container-primary-borderColor);
+  border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-container-bold-borderColor);
   background: var(--kbd-background);
-  box-shadow: 0 var(--salt-size-fixed-100) 0 0 var(--salt-container-primary-borderColor);
+  box-shadow: 0 var(--salt-size-fixed-100) 0 0 var(--salt-container-bold-borderColor);
   height: calc(var(--salt-size-base) - var(--salt-spacing-100));
   align-items: center;
   padding: 0 var(--salt-spacing-50);
@@ -2140,23 +2425,36 @@ a:focus .saltCard-interactable.saltCard-disabled {
   box-shadow: var(--salt-overlayable-shadow);
   display: block;
   overflow: hidden;
-  padding: var(--saltLinkCard-padding, var(--salt-spacing-200));
+  padding: var(--saltLinkCard-padding, var(--card-padding));
   position: relative;
   text-decoration: none;
   transition: box-shadow var(--salt-duration-instant) ease-in-out;
   --linkCard-accent-color: var(--salt-sentiment-accent-background);
+  --card-padding: var(--salt-spacing-200);
+}
+.saltLinkCard.saltLinkCard-sectioned {
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+}
+@supports selector(:has(*)) {
+  .saltLinkCard:has(> .saltCardHeader, > .saltCardContent, > .saltCardFooter) {
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+  }
 }
 .saltLinkCard-primary {
   background: var(--saltLinkCard-background, var(--salt-container-primary-background));
-  border-color: var(--salt-container-primary-borderColor);
+  border-color: var(--salt-container-bold-borderColor);
 }
 .saltLinkCard-secondary {
   background: var(--saltLinkCard-background, var(--salt-container-secondary-background));
-  border-color: var(--salt-container-secondary-borderColor);
+  border-color: var(--salt-container-bold-borderColor);
 }
 .saltLinkCard-tertiary {
   background: var(--saltLinkCard-background, var(--salt-container-tertiary-background));
-  border-color: var(--salt-container-tertiary-borderColor);
+  border-color: var(--salt-container-bold-borderColor);
 }
 .saltLinkCard-accent::after {
   content: "";
@@ -2224,7 +2522,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
   max-height: inherit;
 }
 .saltListBox-bordered {
-  border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-container-primary-borderColor);
+  border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-container-bold-borderColor);
   border-radius: var(--salt-palette-corner, 0);
 }
 .saltListBox:focus-visible {
@@ -2368,7 +2666,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
   overflow-y: auto;
   box-sizing: border-box;
   border-radius: var(--salt-palette-corner, 0);
-  border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-container-primary-borderColor);
+  border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-container-bold-borderColor);
   background: var(--salt-container-primary-background);
   box-shadow: var(--salt-overlayable-shadow-modal);
 }
@@ -3148,7 +3446,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
 
 /* src/overlay/OverlayPanel.css */
 .saltOverlayPanel {
-  --overlay-borderColor: var(--saltOverlay-borderColor, var(--salt-container-primary-borderColor));
+  --overlay-borderColor: var(--saltOverlay-borderColor, var(--salt-container-bold-borderColor));
   --overlay-background: var(--saltOverlay-background, var(--salt-container-primary-background));
   font-family: var(--salt-text-fontFamily);
   font-size: var(--saltOverlay-fontSize, var(--salt-text-fontSize));
@@ -4024,7 +4322,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
 /* src/side-panel/SidePanel.css */
 .saltSidePanel {
   --saltSidePanel-width: 300px;
-  --sidePanel-border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--sidePanel-borderColor, var(--salt-container-primary-borderColor));
+  --sidePanel-border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--sidePanel-borderColor, var(--salt-container-bold-borderColor));
   --saltSidePanel-padding: var(--salt-spacing-300);
   position: relative;
   display: flex;
@@ -4037,15 +4335,15 @@ a:focus .saltCard-interactable.saltCard-disabled {
 }
 .saltSidePanel-primary {
   --sidePanel-background: var(--salt-container-primary-background);
-  --sidePanel-borderColor: var(--salt-container-primary-borderColor);
+  --sidePanel-borderColor: var(--salt-container-bold-borderColor);
 }
 .saltSidePanel-secondary {
   --sidePanel-background: var(--salt-container-secondary-background);
-  --sidePanel-borderColor: var(--salt-container-secondary-borderColor);
+  --sidePanel-borderColor: var(--salt-container-bold-borderColor);
 }
 .saltSidePanel-tertiary {
   --sidePanel-background: var(--salt-container-tertiary-background);
-  --sidePanel-borderColor: var(--salt-container-tertiary-borderColor);
+  --sidePanel-borderColor: var(--salt-container-bold-borderColor);
 }
 .saltSidePanel-none {
   --sidePanel-background: none;
@@ -5272,7 +5570,7 @@ label.saltText small,
 /* src/toast/Toast.css */
 .saltToast {
   --toast-background: var(--salt-container-primary-background);
-  --toast-borderColor: var(--salt-container-primary-borderColor);
+  --toast-borderColor: var(--salt-container-bold-borderColor);
   --toast-iconColor: var(--salt-content-primary-foreground);
   background: var(--saltToast-background, var(--toast-background));
   border-color: var(--saltToast-borderColor, var(--toast-borderColor));
@@ -5583,7 +5881,7 @@ label.saltText small,
   --toggleButtonGroup-borderWidth: var(--salt-size-fixed-100);
   display: flex;
   background: var(--salt-container-primary-background);
-  border: var(--toggleButtonGroup-borderWidth) var(--salt-borderStyle-solid) var(--salt-container-primary-borderColor);
+  border: var(--toggleButtonGroup-borderWidth) var(--salt-borderStyle-solid) var(--salt-container-bold-borderColor);
   border-radius: var(--salt-palette-corner-weak, 0);
   width: fit-content;
   gap: var(--salt-spacing-50);
@@ -5592,12 +5890,12 @@ label.saltText small,
 }
 .saltToggleButtonGroup-disabled {
   background: var(--salt-container-primary-background-disabled);
-  border-color: var(--salt-container-primary-borderColor-disabled);
+  border-color: var(--salt-container-bold-borderColor-disabled);
   cursor: var(--salt-cursor-disabled);
 }
 .saltToggleButtonGroup-readOnly {
   background: var(--salt-container-primary-background);
-  border-color: var(--salt-container-primary-borderColor);
+  border-color: var(--salt-container-bold-borderColor);
   cursor: var(--salt-cursor-disabled);
 }
 .saltToggleButtonGroup .saltToggleButton {
@@ -5616,7 +5914,7 @@ label.saltText small,
 /* src/toggletip/ToggletipPanel.css */
 .saltToggletipPanel {
   --toggletip-background: var(--salt-container-primary-background);
-  --toggletip-borderColor: var(--salt-container-primary-borderColor);
+  --toggletip-borderColor: var(--salt-container-bold-borderColor);
   box-sizing: border-box;
   padding: var(--salt-spacing-100);
   font-family: var(--salt-text-fontFamily);
@@ -5725,15 +6023,15 @@ label.saltText small,
 }
 .saltToolbar-primary {
   --toolbar-background: var(--salt-container-primary-background);
-  --toolbar-borderColor: var(--salt-container-primary-borderColor);
+  --toolbar-borderColor: var(--salt-container-bold-borderColor);
 }
 .saltToolbar-secondary {
   --toolbar-background: var(--salt-container-secondary-background);
-  --toolbar-borderColor: var(--salt-container-secondary-borderColor);
+  --toolbar-borderColor: var(--salt-container-bold-borderColor);
 }
 .saltToolbar-tertiary {
   --toolbar-background: var(--salt-container-tertiary-background);
-  --toolbar-borderColor: var(--salt-container-tertiary-borderColor);
+  --toolbar-borderColor: var(--salt-container-bold-borderColor);
 }
 .saltToolbar-bordered {
   background: var(--saltToolbar-background, var(--toolbar-background));
@@ -5880,7 +6178,7 @@ label.saltText small,
   --tooltip-background: var(--saltTooltip-background, var(--salt-container-primary-background));
   --tooltip-zIndex: var(--saltTooltip-zIndex, var(--salt-zIndex-flyover));
   --tooltip-icon-marginTop: calc((var(--salt-text-lineHeight) - max(var(--salt-size-icon), 12px)) / 2);
-  --tooltip-status-borderColor: var(--salt-container-primary-borderColor);
+  --tooltip-status-borderColor: var(--salt-container-bold-borderColor);
   --tooltip-borderWidth: var(--salt-size-fixed-100);
   --tooltip-padding: calc(var(--salt-spacing-75) - var(--tooltip-borderWidth)) var(--salt-spacing-100);
 }
@@ -6480,7 +6778,7 @@ label.saltText small,
 /* src/slider/internal/SliderTooltip.css */
 .saltSliderTooltip {
   background: var(--salt-container-primary-background);
-  border-color: var(--salt-container-primary-borderColor);
+  border-color: var(--salt-container-bold-borderColor);
   border-style: var(--saltTooltip-borderStyle, var(--salt-borderStyle-solid));
   border-width: var(--saltTooltip-borderWidth, var(--salt-size-fixed-100));
   border-radius: var(--saltTooltip-borderRadius, var(--salt-palette-corner-weak, 0));
@@ -6507,7 +6805,7 @@ label.saltText small,
   pointer-events: none;
   top: 100%;
   transform: translateX(-50%);
-  stroke: var(--salt-container-primary-borderColor);
+  stroke: var(--salt-container-bold-borderColor);
   stroke-width: var(--salt-size-fixed-100);
   width: var(--salt-size-icon);
 }
@@ -6859,4 +7157,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/467e9838-024c-426c-b48e-541cfcba6225.css */
+/* src/cd5976d7-dcad-41e7-8f09-5aa5bbfe3d34.css */