@salt-ds/core 1.68.0 → 1.69.0

package/CHANGELOG.md

@@ -1,5 +1,51 @@
 # @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

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: "";
@@ -2029,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);
@@ -2140,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: "";
@@ -2224,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 {
@@ -2368,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);
 }
@@ -3148,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));
@@ -4024,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;
@@ -4037,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;
@@ -5272,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));
@@ -5583,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);
@@ -5592,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 {
@@ -5616,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);
@@ -5725,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));
@@ -5880,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);
 }
@@ -6480,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));
@@ -6507,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);
 }
@@ -6859,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/467e9838-024c-426c-b48e-541cfcba6225.css */
+/* src/c5e3d709-38a6-4a0c-a69c-6a4d66821241.css */

package/dist-cjs/avatar/Avatar.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = "/* Default variables applied to the root element */\n.saltAvatar {\n  --avatar-size-multiplier: var(--saltAvatar-size-multiplier, 1);\n  --avatar-base-size: var(--salt-size-base);\n  --avatar-base-fontSize: var(--saltAvatar-fontSize, var(--salt-text-notation-fontSize));\n  --avatar-container-size: calc(var(--avatar-base-size) * var(--avatar-size-multiplier));\n  --avatar-fontSize: calc(var(--avatar-base-fontSize) * var(--avatar-size-multiplier));\n  /* Icon styling */\n  --saltIcon-size: calc(var(--avatar-container-size) / 2);\n}\n\n/* Style applied to the root element */\n.saltAvatar {\n  color: var(--saltAvatar-foreground, var(--salt-content-bold-foreground));\n  background: var(--saltAvatar-background, var(--avatar-background));\n  font-size: var(--avatar-fontSize);\n  line-height: var(--saltAvatar-lineHeight, var(--salt-text-notation-lineHeight));\n  font-family: var(--salt-text-notation-fontFamily);\n  font-weight: var(--salt-text-notation-fontWeight);\n  width: var(--avatar-container-size);\n  min-width: var(--avatar-container-size);\n  height: var(--avatar-container-size);\n  min-height: var(--avatar-container-size);\n  border-radius: var(--saltAvatar-borderRadius, var(--salt-palette-corner-strongest, 50%));\n  border: none;\n  padding: 0;\n  appearance: none;\n  -webkit-appearance: none;\n  text-decoration: none;\n  position: relative;\n\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  overflow: hidden;\n  user-select: none;\n}\n\n.saltAvatar-accent {\n  --avatar-background: var(--salt-sentiment-accent-background);\n}\n\n.saltAvatar-category-1 {\n  --avatar-background: var(--salt-category-1-bold-background);\n}\n.saltAvatar-category-2 {\n  --avatar-background: var(--salt-category-2-bold-background);\n}\n\n.saltAvatar-category-3 {\n  --avatar-background: var(--salt-category-3-bold-background);\n}\n\n.saltAvatar-category-4 {\n  --avatar-background: var(--salt-category-4-bold-background);\n}\n\n.saltAvatar-category-5 {\n  --avatar-background: var(--salt-category-5-bold-background);\n}\n\n.saltAvatar-category-6 {\n  --avatar-background: var(--salt-category-6-bold-background);\n}\n\n.saltAvatar-category-7 {\n  --avatar-background: var(--salt-category-7-bold-background);\n}\n\n.saltAvatar-category-8 {\n  --avatar-background: var(--salt-category-8-bold-background);\n}\n\n.saltAvatar-category-9 {\n  --avatar-background: var(--salt-category-9-bold-background);\n}\n\n.saltAvatar-category-10 {\n  --avatar-background: var(--salt-category-10-bold-background);\n}\n.saltAvatar-category-11 {\n  --avatar-background: var(--salt-category-11-bold-background);\n}\n.saltAvatar-category-12 {\n  --avatar-background: var(--salt-category-12-bold-background);\n}\n.saltAvatar-category-13 {\n  --avatar-background: var(--salt-category-13-bold-background);\n}\n.saltAvatar-category-14 {\n  --avatar-background: var(--salt-category-14-bold-background);\n}\n.saltAvatar-category-15 {\n  --avatar-background: var(--salt-category-15-bold-background);\n}\n.saltAvatar-category-16 {\n  --avatar-background: var(--salt-category-16-bold-background);\n}\n.saltAvatar-category-17 {\n  --avatar-background: var(--salt-category-17-bold-background);\n}\n.saltAvatar-category-18 {\n  --avatar-background: var(--salt-category-18-bold-background);\n}\n.saltAvatar-category-19 {\n  --avatar-background: var(--salt-category-19-bold-background);\n}\n.saltAvatar-category-20 {\n  --avatar-background: var(--salt-category-20-bold-background);\n}\n\n.saltAvatar:has(img),\n.saltAvatar-withImage {\n  --avatar-background: none;\n}\n\n/* Style applied to the image/svg element. We specifically allow SVGs as the Avatar image to enable SVGs such as Flags to take up the full Avatar space */\n.saltAvatar > img,\n.saltAvatar > svg:not(.saltIcon) {\n  width: 100%;\n  height: 100%;\n}\n\n.saltAvatar:focus-visible {\n  outline-offset: var(--salt-spacing-fixed-100);\n}\n\nbutton.saltAvatar,\na.saltAvatar {\n  cursor: var(--salt-cursor-hover);\n}\n\nbutton.saltAvatar:disabled {\n  cursor: var(--salt-cursor-disabled);\n}\n\nbutton.saltAvatar::after,\na.saltAvatar::after {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n  pointer-events: none;\n  background: transparent;\n}\n\n.saltAvatar[aria-expanded=\"true\"][aria-haspopup=\"menu\"]::after,\n.saltAvatar[aria-expanded=\"true\"][aria-haspopup=\"dialog\"]::after {\n  background: var(--salt-overlayable-background-hover);\n}\n\n@media (hover: hover) {\n  button.saltAvatar:hover::after,\n  a.saltAvatar:hover::after {\n    background: var(--salt-overlayable-background-hover);\n  }\n\n  button.saltAvatar:disabled:hover::after {\n    background: transparent;\n  }\n}\n";
+var css_248z = "/* Default variables applied to the root element */\n.saltAvatar {\n  --avatar-size-multiplier: var(--saltAvatar-size-multiplier, 1);\n  --avatar-base-size: var(--salt-size-base);\n  --avatar-base-fontSize: var(--saltAvatar-fontSize, var(--salt-text-notation-fontSize));\n  --avatar-container-size: calc(var(--avatar-base-size) * var(--avatar-size-multiplier));\n  --avatar-fontSize: calc(var(--avatar-base-fontSize) * var(--avatar-size-multiplier));\n  /* Icon styling */\n  --saltIcon-size: calc(var(--avatar-container-size) / 2);\n}\n\n/* Style applied to the root element */\n.saltAvatar {\n  color: var(--saltAvatar-foreground, var(--salt-content-bold-foreground));\n  background: var(--saltAvatar-background, var(--avatar-background));\n  font-size: var(--avatar-fontSize);\n  line-height: var(--saltAvatar-lineHeight, var(--salt-text-notation-lineHeight));\n  font-family: var(--salt-text-notation-fontFamily);\n  font-weight: var(--salt-text-notation-fontWeight);\n  width: var(--avatar-container-size);\n  min-width: var(--avatar-container-size);\n  height: var(--avatar-container-size);\n  min-height: var(--avatar-container-size);\n  border-radius: var(--saltAvatar-borderRadius, var(--salt-palette-corner-strongest, 50%));\n  border: none;\n  padding: 0;\n  appearance: none;\n  -webkit-appearance: none;\n  text-decoration: none;\n  position: relative;\n\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  overflow: hidden;\n  user-select: none;\n}\n\n.saltAvatar-entity {\n  border-radius: var(--salt-palette-corner-weak, 0);\n}\n\n.saltAvatar-accent {\n  --avatar-background: var(--salt-sentiment-accent-background);\n}\n\n.saltAvatar-category-1 {\n  --avatar-background: var(--salt-category-1-bold-background);\n}\n.saltAvatar-category-2 {\n  --avatar-background: var(--salt-category-2-bold-background);\n}\n\n.saltAvatar-category-3 {\n  --avatar-background: var(--salt-category-3-bold-background);\n}\n\n.saltAvatar-category-4 {\n  --avatar-background: var(--salt-category-4-bold-background);\n}\n\n.saltAvatar-category-5 {\n  --avatar-background: var(--salt-category-5-bold-background);\n}\n\n.saltAvatar-category-6 {\n  --avatar-background: var(--salt-category-6-bold-background);\n}\n\n.saltAvatar-category-7 {\n  --avatar-background: var(--salt-category-7-bold-background);\n}\n\n.saltAvatar-category-8 {\n  --avatar-background: var(--salt-category-8-bold-background);\n}\n\n.saltAvatar-category-9 {\n  --avatar-background: var(--salt-category-9-bold-background);\n}\n\n.saltAvatar-category-10 {\n  --avatar-background: var(--salt-category-10-bold-background);\n}\n.saltAvatar-category-11 {\n  --avatar-background: var(--salt-category-11-bold-background);\n}\n.saltAvatar-category-12 {\n  --avatar-background: var(--salt-category-12-bold-background);\n}\n.saltAvatar-category-13 {\n  --avatar-background: var(--salt-category-13-bold-background);\n}\n.saltAvatar-category-14 {\n  --avatar-background: var(--salt-category-14-bold-background);\n}\n.saltAvatar-category-15 {\n  --avatar-background: var(--salt-category-15-bold-background);\n}\n.saltAvatar-category-16 {\n  --avatar-background: var(--salt-category-16-bold-background);\n}\n.saltAvatar-category-17 {\n  --avatar-background: var(--salt-category-17-bold-background);\n}\n.saltAvatar-category-18 {\n  --avatar-background: var(--salt-category-18-bold-background);\n}\n.saltAvatar-category-19 {\n  --avatar-background: var(--salt-category-19-bold-background);\n}\n.saltAvatar-category-20 {\n  --avatar-background: var(--salt-category-20-bold-background);\n}\n\n.saltAvatar:has(img),\n.saltAvatar-withImage {\n  --avatar-background: none;\n}\n\n/* Style applied to the image/svg element. We specifically allow SVGs as the Avatar image to enable SVGs such as Flags to take up the full Avatar space */\n.saltAvatar > img,\n.saltAvatar > svg:not(.saltIcon) {\n  width: 100%;\n  height: 100%;\n}\n\n.saltAvatar:focus-visible {\n  outline-offset: var(--salt-spacing-fixed-100);\n}\n\nbutton.saltAvatar,\na.saltAvatar {\n  cursor: var(--salt-cursor-hover);\n}\n\nbutton.saltAvatar:disabled {\n  cursor: var(--salt-cursor-disabled);\n}\n\nbutton.saltAvatar::after,\na.saltAvatar::after {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n  pointer-events: none;\n  background: transparent;\n}\n\n.saltAvatar[aria-expanded=\"true\"][aria-haspopup=\"menu\"]::after,\n.saltAvatar[aria-expanded=\"true\"][aria-haspopup=\"dialog\"]::after {\n  background: var(--salt-overlayable-background-hover);\n}\n\n@media (hover: hover) {\n  button.saltAvatar:hover::after,\n  a.saltAvatar:hover::after {\n    background: var(--salt-overlayable-background-hover);\n  }\n\n  button.saltAvatar:disabled:hover::after {\n    background: transparent;\n  }\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=Avatar.css.js.map

package/dist-cjs/avatar/Avatar.js

@@ -29,6 +29,7 @@ const Avatar = React.forwardRef(function Avatar2({
   color = "accent",
   name,
   nameToInitials = defaultNameToInitials,
+  kind = "person",
   src,
   size = DEFAULT_AVATAR_SIZE,
   style: styleProp,
@@ -37,8 +38,9 @@ const Avatar = React.forwardRef(function Avatar2({
   ...rest
 }, ref) {
   const targetWindow = window.useWindow();
-  const { UserIcon } = SemanticIconProvider.useIcon();
-  const fallbackIcon = fallbackIconProp === void 0 ? /* @__PURE__ */ jsxRuntime.jsx(UserIcon, { "aria-hidden": true }) : fallbackIconProp;
+  const { UserIcon, EntityIcon } = SemanticIconProvider.useIcon();
+  const DefaultFallbackIcon = kind === "entity" ? EntityIcon : UserIcon;
+  const fallbackIcon = fallbackIconProp === void 0 ? /* @__PURE__ */ jsxRuntime.jsx(DefaultFallbackIcon, { "aria-hidden": true }) : fallbackIconProp;
   styles.useComponentCssInjection({
     testId: "salt-avatar",
     css: Avatar$1,
@@ -72,6 +74,7 @@ const Avatar = React.forwardRef(function Avatar2({
       className: clsx.clsx(
         withBaseName(),
         withBaseName(color),
+        withBaseName(kind),
         {
           [withBaseName("withImage")]: hasImgNotFailing
         },