@salt-ds/core 1.67.1 → 1.69.0

package/CHANGELOG.md

@@ -1,5 +1,75 @@
 # @salt-ds/core
 
+## 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
+
+- 87a8a85: Added a top-level `name` prop to form controls which map to underlying native inputs:
+
+  - `Input`, `MultilineInput`, `NumberInput`, `PillInput`, `ComboBox`, `Slider` and `FileDropZoneTrigger` accept `name`
+  - `FileDropZoneTrigger`: `name` is now applied to the hidden input instead of the button
+  - `RangeSlider` accepts `startName` and `endName`
+  - `Checkbox` now inherits `name` from `CheckboxGroup` when not set on the checkbox itself
+
+### Patch Changes
+
+- 8aaa8d0: Fixed `Dropdown` validation status precedence to align with the other form controls, so the `FormField` validation status now takes precedence over the `Dropdown`'s own `validationStatus` prop.
+- 8aaa8d0: Fixed read-only inputs so empty controlled values, empty default values, and empty selections consistently display the `emptyReadOnlyMarker` (`—` by default), while non-empty values such as numeric `0` continue to display the real value.
+- 8156149: Updated `InteractableCard` disabled styling to apply `opacity: 0.4` at the card level.
+
+  _Note:_ This may introduce a visual regression for apps that relied on the previous per-variant disabled appearance or on disabled tokens applied to nested content.
+
+- Updated dependencies [fc112cb]
+- Updated dependencies [7a828e4]
+  - @salt-ds/styles@0.4.0
+  - @salt-ds/icons@1.18.2
+
 ## 1.67.1
 
 ### Patch Changes

package/css/salt-core.css

@@ -148,6 +148,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 +374,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 +849,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 +857,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 +947,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 +956,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 +1708,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 +1731,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 +2173,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: "";
@@ -1994,37 +2263,13 @@ a:focus .saltCard-interactable.saltCard-disabled {
 }
 .saltInteractableCard-disabled,
 .saltInteractableCard-disabled:focus,
+.saltInteractableCard-disabled:focus-visible,
+.saltInteractableCard-disabled:hover,
 .saltInteractableCard-disabled:active {
   box-shadow: none;
-  color: var(--salt-content-primary-foreground-disabled);
   cursor: var(--salt-cursor-disabled);
   outline: none;
-  --card-accent-color: var(--salt-sentiment-accent-background-disabled);
-}
-.saltInteractableCard-primary.saltInteractableCard-disabled,
-.saltInteractableCard-primary.saltInteractableCard-disabled:focus,
-.saltInteractableCard-primary.saltInteractableCard-disabled:active {
-  background: var(--salt-container-primary-background-disabled);
-  border-color: var(--salt-container-primary-borderColor-disabled);
-}
-.saltInteractableCard-secondary.saltInteractableCard-disabled,
-.saltInteractableCard-secondary.saltInteractableCard-disabled:focus,
-.saltInteractableCard-secondary.saltInteractableCard-disabled:active {
-  background: var(--saltInteractableCard-background-disabled, var(--salt-container-secondary-background-disabled));
-  border-color: var(--salt-container-secondary-borderColor-disabled);
-}
-.saltInteractableCard-tertiary.saltInteractableCard-disabled,
-.saltInteractableCard-tertiary.saltInteractableCard-disabled:focus,
-.saltInteractableCard-tertiary.saltInteractableCard-disabled:active {
-  background: var(--salt-container-tertiary-background-disabled);
-  border-color: var(--salt-container-tertiary-borderColor-disabled);
-}
-.saltInteractableCard-selected.saltInteractableCard-disabled,
-.saltInteractableCard-selected.saltInteractableCard-disabled:focus,
-.saltInteractableCard-selected.saltInteractableCard-disabled:hover,
-.saltInteractableCard-selected.saltInteractableCard-disabled:active {
-  border-color: var(--salt-selectable-borderColor-selectedDisabled);
-  --card-accent-color: var(--salt-selectable-foreground-selectedDisabled);
+  opacity: 0.4;
 }
 .saltInteractableCard-disabled div {
   pointer-events: none;
@@ -2053,9 +2298,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);
@@ -2164,23 +2409,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: "";
@@ -2248,7 +2506,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 {
@@ -2392,7 +2650,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);
 }
@@ -3172,7 +3430,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));
@@ -4048,7 +4306,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;
@@ -4061,15 +4319,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;
@@ -5296,7 +5554,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));
@@ -5607,7 +5865,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);
@@ -5616,12 +5874,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 {
@@ -5640,7 +5898,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);
@@ -5749,15 +6007,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));
@@ -5904,7 +6162,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);
 }
@@ -6504,7 +6762,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));
@@ -6531,7 +6789,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);
 }
@@ -6883,4 +7141,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/2189cfbd-84ef-4cd3-8a0f-d16dc62efdf3.css */
+/* src/c5e3d709-38a6-4a0c-a69c-6a4d66821241.css */