@salt-ds/core 1.28.1 → 1.30.0

package/css/salt-core.css

@@ -314,7 +314,7 @@
   gap: var(--salt-spacing-50);
   justify-content: var(--saltButton-justifyContent, center);
   font-size: var(--saltButton-fontSize, var(--salt-text-fontSize));
-  font-family: var(--saltButton-fontFamily, var(--salt-text-fontFamily));
+  font-family: var(--saltButton-fontFamily, var(--salt-text-action-fontFamily));
   line-height: var(--saltButton-lineHeight, var(--salt-text-lineHeight));
   letter-spacing: var(--saltButton-letterSpacing, var(--salt-text-action-letterSpacing));
   text-transform: var(--saltButton-textTransform, var(--salt-text-action-textTransform));
@@ -793,6 +793,30 @@ a:focus .saltCard-interactable.saltCard-disabled {
   background: var(--salt-status-warning-borderColor);
 }
 
+/* src/divider/Divider.css */
+.saltDivider-primary {
+  --divider-background: var(--salt-separable-primary-borderColor);
+}
+.saltDivider-secondary {
+  --divider-background: var(--salt-separable-secondary-borderColor);
+}
+.saltDivider-tertiary {
+  --divider-background: var(--salt-separable-tertiary-borderColor);
+}
+.saltDivider {
+  background: var(--divider-background);
+  align-self: stretch;
+  margin: 0;
+  border: none;
+}
+.saltDivider-horizontal {
+  height: var(--salt-size-border);
+}
+.saltDivider-vertical {
+  width: var(--salt-size-border);
+  height: auto;
+}
+
 /* src/drawer/Drawer.css */
 .saltDrawer {
   background: var(--drawer-background);
@@ -895,6 +919,8 @@ a:focus .saltCard-interactable.saltCard-disabled {
   font-family: var(--salt-text-fontFamily);
   font-size: var(--salt-text-fontSize);
   font-weight: var(--salt-text-fontWeight);
+  line-height: var(--salt-text-lineHeight);
+  letter-spacing: var(--salt-text-letterSpacing);
 }
 .saltDropdown:hover {
   --dropdown-borderColor: var(--salt-editable-borderColor-hover);
@@ -1202,12 +1228,15 @@ a:focus .saltCard-interactable.saltCard-disabled {
 
 /* src/input/Input.css */
 .saltInput {
+  --input-border: none;
   --input-borderColor: var(--salt-editable-borderColor);
   --input-borderStyle: var(--salt-editable-borderStyle);
   --input-outlineColor: var(--salt-focused-outlineColor);
   --input-borderWidth: var(--salt-size-border);
   align-items: center;
   background: var(--saltInput-background, var(--input-background));
+  border: var(--input-border);
+  border-radius: var(--salt-palette-corner-weak, 0);
   color: var(--saltInput-color, var(--salt-content-primary-foreground));
   display: inline-flex;
   font-family: var(--salt-text-fontFamily);
@@ -1221,6 +1250,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
   position: relative;
   width: 100%;
   box-sizing: border-box;
+  overflow: hidden;
 }
 .saltInput:hover {
   --input-borderStyle: var(--salt-editable-borderStyle-hover);
@@ -1256,6 +1286,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
   --input-background-hover: var(--salt-status-error-background);
   --input-borderColor: var(--salt-status-error-borderColor);
   --input-outlineColor: var(--salt-status-error-borderColor);
+  --input-background-readonly: var(--salt-status-error-background);
 }
 .saltInput-warning,
 .saltInput-warning:hover {
@@ -1264,6 +1295,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
   --input-background-hover: var(--salt-status-warning-background);
   --input-borderColor: var(--salt-status-warning-borderColor);
   --input-outlineColor: var(--salt-status-warning-borderColor);
+  --input-background-readonly: var(--salt-status-warning-background);
 }
 .saltInput-success,
 .saltInput-success:hover {
@@ -1272,6 +1304,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
   --input-background-hover: var(--salt-status-success-background);
   --input-borderColor: var(--salt-status-success-borderColor);
   --input-outlineColor: var(--salt-status-success-borderColor);
+  --input-background-readonly: var(--salt-status-success-background);
 }
 .saltInput-input {
   background: none;
@@ -1340,6 +1373,18 @@ a:focus .saltCard-interactable.saltCard-disabled {
   position: absolute;
   border-bottom: var(--input-borderWidth) var(--input-borderStyle) var(--input-borderColor);
 }
+.saltInput.saltInput-bordered {
+  --input-border: var(--salt-size-border) var(--salt-container-borderStyle) var(--input-borderColor);
+  --input-borderWidth: 0;
+}
+.saltInput-bordered.saltInput-focused,
+.saltInput-bordered:active {
+  --input-borderWidth: var(--salt-editable-borderWidth-active);
+}
+.saltInput-bordered.saltInput-readOnly,
+.saltInput-bordered.saltInput-disabled:hover {
+  --input-borderWidth: 0;
+}
 .saltInput-startAdornmentContainer {
   align-items: center;
   display: inline-flex;
@@ -1371,6 +1416,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
 .saltInput-endAdornmentContainer > .saltButton {
   --saltButton-padding: calc(var(--salt-spacing-50) - var(--salt-size-border));
   --saltButton-height: calc(var(--salt-size-base) - var(--salt-spacing-100));
+  --saltButton-borderRadius: var(--salt-palette-corner-weaker);
 }
 
 /* src/interactable-card/InteractableCard.css */
@@ -1618,19 +1664,41 @@ a:focus .saltCard-interactable.saltCard-disabled {
   }
 }
 
+/* src/list-box/ListBox.css */
+.saltListBox {
+  display: flex;
+  flex-direction: column;
+  gap: var(--salt-size-border);
+  background: var(--salt-container-primary-background);
+  overflow: auto;
+  padding-top: 1px;
+  padding-bottom: 1px;
+  box-sizing: border-box;
+  isolation: isolate;
+  position: relative;
+  max-height: inherit;
+  border-radius: var(--salt-palette-corner-weak, 0);
+}
+.saltListBox-bordered {
+  border: var(--salt-size-border) var(--salt-container-borderStyle) var(--salt-container-primary-borderColor);
+}
+.saltListBox:focus-visible {
+  outline: none;
+}
+
 /* src/menu/MenuGroup.css */
 .saltMenuGroup-label {
   background: var(--salt-container-primary-background);
   color: var(--salt-text-secondary-foreground);
   font-size: var(--salt-text-label-fontSize);
   font-weight: var(--salt-text-label-fontWeight-strong);
-  font-family: var(--salt-text-fontFamily);
-  line-height: var(--salt-text-lineHeight);
+  font-family: var(--salt-text-label-fontFamily);
+  line-height: var(--salt-text-label-lineHeight);
+  letter-spacing: var(--salt-text-letterSpacing);
   height: calc(var(--salt-size-base) + var(--salt-spacing-100));
-  padding-left: var(--salt-spacing-100);
-  padding-right: var(--salt-spacing-100);
+  padding: calc(var(--salt-spacing-100) + var(--salt-spacing-25)) var(--salt-spacing-100);
   display: flex;
-  align-items: center;
+  box-sizing: border-box;
 }
 .saltMenuGroup {
   border-top: var(--salt-size-border) var(--salt-separable-borderStyle) var(--salt-separable-tertiary-borderColor);
@@ -1647,14 +1715,12 @@ a:focus .saltCard-interactable.saltCard-disabled {
   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-left: var(--salt-spacing-100);
-  padding-right: var(--salt-spacing-100);
+  padding: calc(var(--salt-spacing-100) + var(--salt-spacing-25)) var(--salt-spacing-100);
   display: flex;
-  justify-content: flex-start;
   gap: var(--salt-spacing-100);
   position: relative;
-  align-items: center;
   cursor: var(--salt-selectable-cursor-hover);
   box-sizing: border-box;
   flex-shrink: 0;
@@ -1724,6 +1790,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
   align-items: center;
   background: var(--multilineInput-background);
   border: var(--multilineInput-border);
+  border-radius: var(--salt-palette-corner-weak, 0);
   color: var(--salt-content-primary-foreground);
   display: inline-flex;
   font-family: var(--salt-text-fontFamily);
@@ -1737,6 +1804,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
   position: relative;
   width: 100%;
   box-sizing: border-box;
+  overflow: hidden;
 }
 .saltMultilineInput:hover {
   --multilineInput-borderStyle: var(--salt-editable-borderStyle-hover);
@@ -1772,6 +1840,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
   --multilineInput-background-hover: var(--salt-status-error-background);
   --multilineInput-borderColor: var(--salt-status-error-borderColor);
   --multilineInput-outlineColor: var(--salt-status-error-borderColor);
+  --multilineInput-background-readonly: var(--salt-status-error-background);
 }
 .saltMultilineInput-warning,
 .saltMultilineInput-warning:hover {
@@ -1780,6 +1849,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
   --multilineInput-background-hover: var(--salt-status-warning-background);
   --multilineInput-borderColor: var(--salt-status-warning-borderColor);
   --multilineInput-outlineColor: var(--salt-status-warning-borderColor);
+  --multilineInput-background-readonly: var(--salt-status-warning-background);
 }
 .saltMultilineInput-success,
 .saltMultilineInput-success:hover {
@@ -1788,6 +1858,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
   --multilineInput-background-hover: var(--salt-status-success-background);
   --multilineInput-borderColor: var(--salt-status-success-borderColor);
   --multilineInput-outlineColor: var(--salt-status-success-borderColor);
+  --multilineInput-background-readonly: var(--salt-status-success-background);
 }
 .saltMultilineInput.saltMultilineInput-withAdornmentRow {
   display: flex;
@@ -1856,11 +1927,11 @@ a:focus .saltCard-interactable.saltCard-disabled {
   --multilineInput-border: var(--salt-size-border) var(--salt-container-borderStyle) var(--multilineInput-borderColor);
   --multilineInput-activationIndicator-borderWidth: 0;
 }
-.saltMultilineInput-bordered:active,
-.saltMultilineInput-bordered.saltMultilineInput-focused {
+.saltMultilineInput-bordered.saltMultilineInput-focused,
+.saltMultilineInput-bordered:active {
   --multilineInput-activationIndicator-borderWidth: var(--salt-editable-borderWidth-active);
 }
-.saltMultilineInput-bordered.saltMultilineInput-readOnly:hover,
+.saltMultilineInput-bordered.saltMultilineInput-readOnly,
 .saltMultilineInput-bordered.saltMultilineInput-disabled:hover {
   --multilineInput-activationIndicator-borderWidth: 0;
 }
@@ -1904,6 +1975,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
 .saltMultilineInput-endAdornmentContainer > .saltButton {
   --saltButton-padding: calc(var(--salt-spacing-50) - var(--salt-size-border));
   --saltButton-height: calc(var(--salt-size-base) - var(--salt-spacing-100));
+  --saltButton-borderRadius: var(--salt-palette-corner-weaker);
 }
 
 /* src/navigation-item/NavigationItem.css */
@@ -2016,13 +2088,14 @@ a:focus .saltCard-interactable.saltCard-disabled {
   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-left: var(--salt-spacing-100);
-  padding-right: 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;
-  align-items: center;
   cursor: var(--salt-selectable-cursor-hover);
   box-sizing: border-box;
   flex-shrink: 0;
@@ -2038,9 +2111,10 @@ a:focus .saltCard-interactable.saltCard-disabled {
   background: var(--salt-selectable-background-hover);
 }
 .saltOption[aria-selected=true] {
+  z-index: var(--salt-zIndex-default);
   background: var(--salt-selectable-background-selected);
 }
-.saltOption[aria-selected=true]::before {
+.saltOption[aria-selected=true]::after {
   content: "";
   display: block;
   position: absolute;
@@ -2049,7 +2123,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
   left: 0;
   width: 100%;
 }
-.saltOption[aria-selected=true]::before {
+.saltOption[aria-selected=true]::after {
   border-top: var(--salt-size-border) var(--salt-selectable-borderStyle-selected) var(--salt-selectable-borderColor-selected);
   border-bottom: var(--salt-size-border) var(--salt-selectable-borderStyle-selected) var(--salt-selectable-borderColor-selected);
 }
@@ -2072,14 +2146,19 @@ a:focus .saltCard-interactable.saltCard-disabled {
   color: var(--salt-text-secondary-foreground);
   font-size: var(--salt-text-label-fontSize);
   font-weight: var(--salt-text-label-fontWeight-strong);
-  height: calc(var(--salt-size-base) + var(--salt-spacing-100));
-  padding-left: var(--salt-spacing-100);
-  padding-right: var(--salt-spacing-100);
+  font-family: var(--salt-text-label-fontFamily);
+  line-height: var(--salt-text-label-lineHeight);
+  letter-spacing: var(--salt-text-letterSpacing);
+  min-height: calc(var(--salt-size-base) + var(--salt-spacing-100));
+  padding: calc(var(--salt-spacing-100) + var(--salt-spacing-25)) var(--salt-spacing-100);
   display: flex;
-  align-items: center;
-  position: sticky;
-  top: 0;
-  z-index: 2;
+  box-sizing: border-box;
+}
+.saltOptionGroup {
+  border-top: var(--salt-size-border) var(--salt-separable-borderStyle) var(--salt-separable-tertiary-borderColor);
+}
+.saltOptionGroup:first-of-type {
+  border-top: 0;
 }
 
 /* src/option/OptionList.css */
@@ -2741,6 +2820,14 @@ div[role=listitem] {
   top: calc(var(--salt-size-border) * -1);
   bottom: calc(var(--salt-size-border) * -1);
 }
+.saltSegmentedButtonGroup > .saltButton:not(:first-of-type) {
+  border-bottom-left-radius: 0;
+  border-top-left-radius: 0;
+}
+.saltSegmentedButtonGroup > .saltButton:not(:last-of-type) {
+  border-bottom-right-radius: 0;
+  border-top-right-radius: 0;
+}
 
 /* src/spinner/Spinner.css */
 .saltSpinner {
@@ -2972,6 +3059,178 @@ div[role=listitem] {
   padding-bottom: var(--salt-spacing-50);
 }
 
+/* src/tag/Tag.css */
+.saltTag {
+  height: calc(var(--salt-size-base) - var(--salt-spacing-100));
+  min-height: var(--salt-text-minHeight);
+  display: flex;
+  column-gap: var(--salt-spacing-50);
+  align-items: center;
+  padding: var(--salt-spacing-25) var(--salt-spacing-100);
+  font-family: var(--salt-text-fontFamily);
+  font-size: var(--salt-text-fontSize);
+  font-weight: var(--salt-text-fontWeight);
+  line-height: var(--salt-text-lineHeight);
+  overflow: hidden;
+  border-radius: var(--saltTag-borderRadius, var(--salt-palette-corner-strongest, 9999px));
+  width: fit-content;
+  min-width: max-content;
+  border-box: box-sizing;
+}
+.saltTag-primary {
+  background: var(--tag-primary-background, var(--salt-category-1-subtle-background));
+  color: var(--tag-primary-foreground, var(--salt-category-1-subtle-foreground));
+  border: var(--salt-size-border) var(--salt-container-borderStyle) transparent;
+}
+.saltTag-bordered {
+  border: var(--salt-size-border) var(--salt-container-borderStyle) var(--tag-primary-borderColor, var(--salt-category-1-subtle-borderColor));
+}
+.saltTag-secondary {
+  background: var(--tag-secondary-background, var(--salt-category-1-bold-background));
+  color: var(--tag-secondary-foreground, var(--salt-category-1-bold-foreground));
+  border: var(--salt-size-border) var(--salt-container-borderStyle) transparent;
+}
+.saltTag-category-1 {
+  --tag-primary-background: var(--salt-category-1-subtle-background);
+  --tag-primary-foreground: var(--salt-category-1-subtle-foreground);
+  --tag-primary-borderColor: var(--salt-category-1-subtle-borderColor);
+  --tag-secondary-background: var(--salt-category-1-bold-background);
+  --tag-secondary-foreground: var(--salt-category-1-bold-foreground);
+}
+.saltTag-category-2 {
+  --tag-primary-background: var(--salt-category-2-subtle-background);
+  --tag-primary-foreground: var(--salt-category-2-subtle-foreground);
+  --tag-primary-borderColor: var(--salt-category-2-subtle-borderColor);
+  --tag-secondary-background: var(--salt-category-2-bold-background);
+  --tag-secondary-foreground: var(--salt-category-2-bold-foreground);
+}
+.saltTag-category-3 {
+  --tag-primary-background: var(--salt-category-3-subtle-background);
+  --tag-primary-foreground: var(--salt-category-3-subtle-foreground);
+  --tag-primary-borderColor: var(--salt-category-3-subtle-borderColor);
+  --tag-secondary-background: var(--salt-category-3-bold-background);
+  --tag-secondary-foreground: var(--salt-category-3-bold-foreground);
+}
+.saltTag-category-4 {
+  --tag-primary-background: var(--salt-category-4-subtle-background);
+  --tag-primary-foreground: var(--salt-category-4-subtle-foreground);
+  --tag-primary-borderColor: var(--salt-category-4-subtle-borderColor);
+  --tag-secondary-background: var(--salt-category-4-bold-background);
+  --tag-secondary-foreground: var(--salt-category-4-bold-foreground);
+}
+.saltTag-category-5 {
+  --tag-primary-background: var(--salt-category-5-subtle-background);
+  --tag-primary-foreground: var(--salt-category-5-subtle-foreground);
+  --tag-primary-borderColor: var(--salt-category-5-subtle-borderColor);
+  --tag-secondary-background: var(--salt-category-5-bold-background);
+  --tag-secondary-foreground: var(--salt-category-5-bold-foreground);
+}
+.saltTag-category-6 {
+  --tag-primary-background: var(--salt-category-6-subtle-background);
+  --tag-primary-foreground: var(--salt-category-6-subtle-foreground);
+  --tag-primary-borderColor: var(--salt-category-6-subtle-borderColor);
+  --tag-secondary-background: var(--salt-category-6-bold-background);
+  --tag-secondary-foreground: var(--salt-category-6-bold-foreground);
+}
+.saltTag-category-7 {
+  --tag-primary-background: var(--salt-category-7-subtle-background);
+  --tag-primary-foreground: var(--salt-category-7-subtle-foreground);
+  --tag-primary-borderColor: var(--salt-category-7-subtle-borderColor);
+  --tag-secondary-background: var(--salt-category-7-bold-background);
+  --tag-secondary-foreground: var(--salt-category-7-bold-foreground);
+}
+.saltTag-category-8 {
+  --tag-primary-background: var(--salt-category-8-subtle-background);
+  --tag-primary-foreground: var(--salt-category-8-subtle-foreground);
+  --tag-primary-borderColor: var(--salt-category-8-subtle-borderColor);
+  --tag-secondary-background: var(--salt-category-8-bold-background);
+  --tag-secondary-foreground: var(--salt-category-8-bold-foreground);
+}
+.saltTag-category-9 {
+  --tag-primary-background: var(--salt-category-9-subtle-background);
+  --tag-primary-foreground: var(--salt-category-9-subtle-foreground);
+  --tag-primary-borderColor: var(--salt-category-9-subtle-borderColor);
+  --tag-secondary-background: var(--salt-category-9-bold-background);
+  --tag-secondary-foreground: var(--salt-category-9-bold-foreground);
+}
+.saltTag-category-10 {
+  --tag-primary-background: var(--salt-category-10-subtle-background);
+  --tag-primary-foreground: var(--salt-category-10-subtle-foreground);
+  --tag-primary-borderColor: var(--salt-category-10-subtle-borderColor);
+  --tag-secondary-background: var(--salt-category-10-bold-background);
+  --tag-secondary-foreground: var(--salt-category-10-bold-foreground);
+}
+.saltTag-category-11 {
+  --tag-primary-background: var(--salt-category-11-subtle-background);
+  --tag-primary-foreground: var(--salt-category-11-subtle-foreground);
+  --tag-primary-borderColor: var(--salt-category-11-subtle-borderColor);
+  --tag-secondary-background: var(--salt-category-11-bold-background);
+  --tag-secondary-foreground: var(--salt-category-11-bold-foreground);
+}
+.saltTag-category-12 {
+  --tag-primary-background: var(--salt-category-12-subtle-background);
+  --tag-primary-foreground: var(--salt-category-12-subtle-foreground);
+  --tag-primary-borderColor: var(--salt-category-12-subtle-borderColor);
+  --tag-secondary-background: var(--salt-category-12-bold-background);
+  --tag-secondary-foreground: var(--salt-category-12-bold-foreground);
+}
+.saltTag-category-13 {
+  --tag-primary-background: var(--salt-category-13-subtle-background);
+  --tag-primary-foreground: var(--salt-category-13-subtle-foreground);
+  --tag-primary-borderColor: var(--salt-category-13-subtle-borderColor);
+  --tag-secondary-background: var(--salt-category-13-bold-background);
+  --tag-secondary-foreground: var(--salt-category-13-bold-foreground);
+}
+.saltTag-category-14 {
+  --tag-primary-background: var(--salt-category-14-subtle-background);
+  --tag-primary-foreground: var(--salt-category-14-subtle-foreground);
+  --tag-primary-borderColor: var(--salt-category-14-subtle-borderColor);
+  --tag-secondary-background: var(--salt-category-14-bold-background);
+  --tag-secondary-foreground: var(--salt-category-14-bold-foreground);
+}
+.saltTag-category-15 {
+  --tag-primary-background: var(--salt-category-15-subtle-background);
+  --tag-primary-foreground: var(--salt-category-15-subtle-foreground);
+  --tag-primary-borderColor: var(--salt-category-15-subtle-borderColor);
+  --tag-secondary-background: var(--salt-category-15-bold-background);
+  --tag-secondary-foreground: var(--salt-category-15-bold-foreground);
+}
+.saltTag-category-16 {
+  --tag-primary-background: var(--salt-category-16-subtle-background);
+  --tag-primary-foreground: var(--salt-category-16-subtle-foreground);
+  --tag-primary-borderColor: var(--salt-category-16-subtle-borderColor);
+  --tag-secondary-background: var(--salt-category-16-bold-background);
+  --tag-secondary-foreground: var(--salt-category-16-bold-foreground);
+}
+.saltTag-category-17 {
+  --tag-primary-background: var(--salt-category-17-subtle-background);
+  --tag-primary-foreground: var(--salt-category-17-subtle-foreground);
+  --tag-primary-borderColor: var(--salt-category-17-subtle-borderColor);
+  --tag-secondary-background: var(--salt-category-17-bold-background);
+  --tag-secondary-foreground: var(--salt-category-17-bold-foreground);
+}
+.saltTag-category-18 {
+  --tag-primary-background: var(--salt-category-18-subtle-background);
+  --tag-primary-foreground: var(--salt-category-18-subtle-foreground);
+  --tag-primary-borderColor: var(--salt-category-18-subtle-borderColor);
+  --tag-secondary-background: var(--salt-category-18-bold-background);
+  --tag-secondary-foreground: var(--salt-category-18-bold-foreground);
+}
+.saltTag-category-19 {
+  --tag-primary-background: var(--salt-category-19-subtle-background);
+  --tag-primary-foreground: var(--salt-category-19-subtle-foreground);
+  --tag-primary-borderColor: var(--salt-category-19-subtle-borderColor);
+  --tag-secondary-background: var(--salt-category-19-bold-background);
+  --tag-secondary-foreground: var(--salt-category-19-bold-foreground);
+}
+.saltTag-category-20 {
+  --tag-primary-background: var(--salt-category-20-subtle-background);
+  --tag-primary-foreground: var(--salt-category-20-subtle-foreground);
+  --tag-primary-borderColor: var(--salt-category-20-subtle-borderColor);
+  --tag-secondary-background: var(--salt-category-20-bold-background);
+  --tag-secondary-foreground: var(--salt-category-20-bold-foreground);
+}
+
 /* src/text/Text.css */
 .saltText {
   --text-color: currentColor;
@@ -3038,6 +3297,7 @@ div[role=listitem] {
   font-weight: var(--salt-text-notation-fontWeight-small);
 }
 .saltText-action.saltText {
+  font-family: var(--salt-text-action-fontFamily);
   letter-spacing: var(--salt-text-action-letterSpacing);
   text-transform: var(--salt-text-action-textTransform);
   text-align: var(--salt-text-action-textAlign);
@@ -3053,18 +3313,56 @@ code.saltText,
   font-weight: var(--salt-text-display1-fontWeight);
   line-height: var(--salt-text-display1-lineHeight);
 }
+.saltText-display1.saltText strong {
+  font-size: inherit;
+  font-weight: var(--salt-text-display1-fontWeight-strong);
+}
+.saltText-display1.saltText small {
+  font-size: inherit;
+  font-weight: var(--salt-text-display1-fontWeight-small);
+}
 .saltText-display2.saltText {
   font-family: var(--salt-text-display2-fontFamily);
   font-size: var(--salt-text-display2-fontSize);
   font-weight: var(--salt-text-display2-fontWeight);
   line-height: var(--salt-text-display2-lineHeight);
 }
+.saltText-display2.saltText strong {
+  font-size: inherit;
+  font-weight: var(--salt-text-display2-fontWeight-strong);
+}
+.saltText-display2.saltText small {
+  font-size: inherit;
+  font-weight: var(--salt-text-display2-fontWeight-small);
+}
 .saltText-display3.saltText {
   font-family: var(--salt-text-display3-fontFamily);
   font-size: var(--salt-text-display3-fontSize);
   font-weight: var(--salt-text-display3-fontWeight);
   line-height: var(--salt-text-display3-lineHeight);
 }
+.saltText-display3.saltText strong {
+  font-size: inherit;
+  font-weight: var(--salt-text-display3-fontWeight-strong);
+}
+.saltText-display3.saltText small {
+  font-size: inherit;
+  font-weight: var(--salt-text-display3-fontWeight-small);
+}
+.saltText-display4.saltText {
+  font-family: var(--salt-text-display4-fontFamily);
+  font-size: var(--salt-text-display4-fontSize);
+  font-weight: var(--salt-text-display4-fontWeight);
+  line-height: var(--salt-text-display4-lineHeight);
+}
+.saltText-display4.saltText strong {
+  font-size: inherit;
+  font-weight: var(--salt-text-display4-fontWeight-strong);
+}
+.saltText-display4.saltText small {
+  font-size: inherit;
+  font-weight: var(--salt-text-display4-fontWeight-small);
+}
 h1.saltText,
 .saltText-h1.saltText {
   font-family: var(--salt-text-h1-fontFamily);
@@ -3150,6 +3448,7 @@ label.saltText small,
 .saltToast {
   --toast-background: var(--salt-container-primary-background);
   --toast-borderColor: var(--salt-container-primary-borderColor);
+  --toast-iconColor: var(--salt-content-primary-foreground);
   background: var(--saltToast-background, var(--toast-background));
   border-color: var(--saltToast-borderColor, var(--toast-borderColor));
   border-width: var(--saltToast-borderWidth, var(--salt-size-border));
@@ -3170,23 +3469,25 @@ label.saltText small,
 .saltToast:last-child {
   margin-bottom: var(--salt-spacing-200);
 }
-.saltToast-icon.saltIcon {
+.saltToast-iconContainer > .saltIcon {
   margin: calc(var(--salt-spacing-75) + 2px) 0 var(--salt-spacing-75) 0;
-}
-.salt-density-high.saltToast-icon.saltIcon {
-  margin: calc(var(--salt-spacing-75) + 1px) 0 var(--salt-spacing-75) 0;
+  color: var(--toast-iconColor);
 }
 .saltToast-info {
   --toast-borderColor: var(--salt-status-info-borderColor);
+  --toast-iconColor: var(--salt-status-info-foreground-decorative);
 }
 .saltToast-error {
   --toast-borderColor: var(--salt-status-error-borderColor);
+  --toast-iconColor: var(--salt-status-error-foreground-decorative);
 }
 .saltToast-warning {
   --toast-borderColor: var(--salt-status-warning-borderColor);
+  --toast-iconColor: var(--salt-status-warning-foreground-decorative);
 }
 .saltToast-success {
   --toast-borderColor: var(--salt-status-success-borderColor);
+  --toast-iconColor: var(--salt-status-success-foreground-decorative);
 }
 
 /* src/toast/ToastContent.css */
@@ -3211,7 +3512,7 @@ label.saltText small,
   color: var(--salt-actionable-secondary-foreground);
   text-transform: var(--salt-text-action-textTransform);
   font-weight: var(--salt-text-action-fontWeight);
-  font-family: var(--salt-text-fontFamily);
+  font-family: var(--salt-text-action-fontFamily);
   text-align: var(--salt-text-action-textAlign);
   letter-spacing: var(--salt-text-action-letterSpacing);
   line-height: var(--salt-text-lineHeight);
@@ -3479,4 +3780,4 @@ label.saltText small,
   padding-left: var(--salt-spacing-100);
 }
 
-/* src/6dcea281-8286-4d18-8c3f-35539f4af4d6.css */
+/* src/bc041f09-367d-4fd6-976a-333ff67e34d8.css */

package/dist-cjs/accordion/Accordion.js

@@ -38,6 +38,7 @@ require('../dialog/DialogActions.js');
 require('../dialog/DialogContent.js');
 require('../dialog/DialogContext.js');
 require('../dialog/DialogCloseButton.js');
+require('../divider/Divider.js');
 require('../drawer/Drawer.js');
 require('../drawer/DrawerCloseButton.js');
 require('../dropdown/Dropdown.js');
@@ -65,6 +66,7 @@ require('../interactable-card/InteractableCardGroup.js');
 require('../interactable-card/InteractableCardGroupContext.js');
 require('../link/Link.js');
 require('../link-card/LinkCard.js');
+require('../list-box/ListBox.js');
 require('../list-control/ListControlContext.js');
 require('../menu/MenuContext.js');
 require('@floating-ui/react');
@@ -102,6 +104,7 @@ require('../toast/Toast.js');
 require('../toast/ToastContent.js');
 require('../split-layout/SplitLayout.js');
 require('../switch/Switch.js');
+require('../tag/Tag.js');
 require('../toggle-button/ToggleButton.js');
 require('../toggle-button-group/ToggleButtonGroup.js');
 require('../toggle-button-group/ToggleButtonGroupContext.js');

package/dist-cjs/accordion/Accordion.js.map

@@ -1 +1 @@
-{"version":3,"file":"Accordion.js","sources":["../src/accordion/Accordion.tsx"],"sourcesContent":["import { ComponentPropsWithoutRef, forwardRef, SyntheticEvent } from \"react\";\nimport { clsx } from \"clsx\";\nimport { AccordionContext } from \"./AccordionContext\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { makePrefixer, useControlled, useId } from \"../utils\";\nimport accordionCss from \"./Accordion.css\";\nexport interface AccordionProps extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * AccordionGroup value.\n   */\n  value: string;\n  /**\n   * Whether the accordion is expanded.\n   */\n  expanded?: boolean;\n  /**\n   * Whether the accordion is expanded by default.\n   */\n  defaultExpanded?: boolean;\n  /**\n   * Callback fired when the accordion is toggled.\n   */\n  onToggle?: (event: SyntheticEvent<HTMLButtonElement>) => void;\n  /**\n   * Whether the accordion is disabled.\n   */\n  disabled?: boolean;\n  /**\n   * The status of the accordion.\n   */\n  status?: \"error\" | \"warning\" | \"success\";\n}\n\nconst withBaseName = makePrefixer(\"saltAccordion\");\n\nexport const Accordion = forwardRef<HTMLDivElement, AccordionProps>(\n  function Accordion(props, ref) {\n    const {\n      className,\n      defaultExpanded,\n      expanded: expandedProp,\n      disabled,\n      id: idProp,\n      onToggle,\n      status,\n      value,\n      ...rest\n    } = props;\n\n    const id = useId(idProp);\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-accordion\",\n      css: accordionCss,\n      window: targetWindow,\n    });\n\n    const [expanded, setExpanded] = useControlled({\n      controlled: expandedProp,\n      default: Boolean(defaultExpanded),\n      name: \"Accordion\",\n      state: \"expanded\",\n    });\n\n    const toggle = (event: SyntheticEvent<HTMLButtonElement>) => {\n      setExpanded((prev) => !prev);\n      onToggle?.(event);\n    };\n\n    return (\n      <AccordionContext.Provider\n        value={{\n          value,\n          toggle,\n          expanded,\n          disabled: Boolean(disabled),\n          id: id ?? \"\",\n          status,\n        }}\n      >\n        <div\n          ref={ref}\n          className={clsx(\n            withBaseName(),\n            { [withBaseName(status ?? \"\")]: status },\n            className\n          )}\n          {...rest}\n        />\n      </AccordionContext.Provider>\n    );\n  }\n);\n"],"names":["makePrefixer","forwardRef","Accordion","useId","useWindow","useComponentCssInjection","accordionCss","useControlled","jsx","AccordionContext","clsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkCA,MAAM,YAAA,GAAeA,0BAAa,eAAe,CAAA,CAAA;AAE1C,MAAM,SAAY,GAAAC,gBAAA;AAAA,EACvB,SAASC,UAAU,CAAA,KAAA,EAAO,GAAK,EAAA;AAC7B,IAAM,MAAA;AAAA,MACJ,SAAA;AAAA,MACA,eAAA;AAAA,MACA,QAAU,EAAA,YAAA;AAAA,MACV,QAAA;AAAA,MACA,EAAI,EAAA,MAAA;AAAA,MACJ,QAAA;AAAA,MACA,MAAA;AAAA,MACA,KAAA;AAAA,MACG,GAAA,IAAA;AAAA,KACD,GAAA,KAAA,CAAA;AAEJ,IAAM,MAAA,EAAA,GAAKC,YAAM,MAAM,CAAA,CAAA;AACvB,IAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,gBAAA;AAAA,MACR,GAAK,EAAAC,WAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAIC,2BAAc,CAAA;AAAA,MAC5C,UAAY,EAAA,YAAA;AAAA,MACZ,OAAA,EAAS,QAAQ,eAAe,CAAA;AAAA,MAChC,IAAM,EAAA,WAAA;AAAA,MACN,KAAO,EAAA,UAAA;AAAA,KACR,CAAA,CAAA;AAED,IAAM,MAAA,MAAA,GAAS,CAAC,KAA6C,KAAA;AAC3D,MAAY,WAAA,CAAA,CAAC,IAAS,KAAA,CAAC,IAAI,CAAA,CAAA;AAC3B,MAAW,QAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,QAAA,CAAA,KAAA,CAAA,CAAA;AAAA,KACb,CAAA;AAEA,IACE,uBAAAC,cAAA,CAACC,kCAAiB,QAAjB,EAAA;AAAA,MACC,KAAO,EAAA;AAAA,QACL,KAAA;AAAA,QACA,MAAA;AAAA,QACA,QAAA;AAAA,QACA,QAAA,EAAU,QAAQ,QAAQ,CAAA;AAAA,QAC1B,IAAI,EAAM,IAAA,IAAA,GAAA,EAAA,GAAA,EAAA;AAAA,QACV,MAAA;AAAA,OACF;AAAA,MAEA,QAAC,kBAAAD,cAAA,CAAA,KAAA,EAAA;AAAA,QACC,GAAA;AAAA,QACA,SAAW,EAAAE,SAAA;AAAA,UACT,YAAa,EAAA;AAAA,UACb,EAAE,CAAC,YAAA,CAAa,MAAU,IAAA,IAAA,GAAA,MAAA,GAAA,EAAE,IAAI,MAAO,EAAA;AAAA,UACvC,SAAA;AAAA,SACF;AAAA,QACC,GAAG,IAAA;AAAA,OACN,CAAA;AAAA,KACF,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
+{"version":3,"file":"Accordion.js","sources":["../src/accordion/Accordion.tsx"],"sourcesContent":["import { ComponentPropsWithoutRef, forwardRef, SyntheticEvent } from \"react\";\nimport { clsx } from \"clsx\";\nimport { AccordionContext } from \"./AccordionContext\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { makePrefixer, useControlled, useId } from \"../utils\";\nimport accordionCss from \"./Accordion.css\";\nexport interface AccordionProps extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * AccordionGroup value.\n   */\n  value: string;\n  /**\n   * Whether the accordion is expanded.\n   */\n  expanded?: boolean;\n  /**\n   * Whether the accordion is expanded by default.\n   */\n  defaultExpanded?: boolean;\n  /**\n   * Callback fired when the accordion is toggled.\n   */\n  onToggle?: (event: SyntheticEvent<HTMLButtonElement>) => void;\n  /**\n   * Whether the accordion is disabled.\n   */\n  disabled?: boolean;\n  /**\n   * The status of the accordion.\n   */\n  status?: \"error\" | \"warning\" | \"success\";\n}\n\nconst withBaseName = makePrefixer(\"saltAccordion\");\n\nexport const Accordion = forwardRef<HTMLDivElement, AccordionProps>(\n  function Accordion(props, ref) {\n    const {\n      className,\n      defaultExpanded,\n      expanded: expandedProp,\n      disabled,\n      id: idProp,\n      onToggle,\n      status,\n      value,\n      ...rest\n    } = props;\n\n    const id = useId(idProp);\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-accordion\",\n      css: accordionCss,\n      window: targetWindow,\n    });\n\n    const [expanded, setExpanded] = useControlled({\n      controlled: expandedProp,\n      default: Boolean(defaultExpanded),\n      name: \"Accordion\",\n      state: \"expanded\",\n    });\n\n    const toggle = (event: SyntheticEvent<HTMLButtonElement>) => {\n      setExpanded((prev) => !prev);\n      onToggle?.(event);\n    };\n\n    return (\n      <AccordionContext.Provider\n        value={{\n          value,\n          toggle,\n          expanded,\n          disabled: Boolean(disabled),\n          id: id ?? \"\",\n          status,\n        }}\n      >\n        <div\n          ref={ref}\n          className={clsx(\n            withBaseName(),\n            { [withBaseName(status ?? \"\")]: status },\n            className\n          )}\n          {...rest}\n        />\n      </AccordionContext.Provider>\n    );\n  }\n);\n"],"names":["makePrefixer","forwardRef","Accordion","useId","useWindow","useComponentCssInjection","accordionCss","useControlled","jsx","AccordionContext","clsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkCA,MAAM,YAAA,GAAeA,0BAAa,eAAe,CAAA,CAAA;AAE1C,MAAM,SAAY,GAAAC,gBAAA;AAAA,EACvB,SAASC,UAAU,CAAA,KAAA,EAAO,GAAK,EAAA;AAC7B,IAAM,MAAA;AAAA,MACJ,SAAA;AAAA,MACA,eAAA;AAAA,MACA,QAAU,EAAA,YAAA;AAAA,MACV,QAAA;AAAA,MACA,EAAI,EAAA,MAAA;AAAA,MACJ,QAAA;AAAA,MACA,MAAA;AAAA,MACA,KAAA;AAAA,MACG,GAAA,IAAA;AAAA,KACD,GAAA,KAAA,CAAA;AAEJ,IAAM,MAAA,EAAA,GAAKC,YAAM,MAAM,CAAA,CAAA;AACvB,IAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,gBAAA;AAAA,MACR,GAAK,EAAAC,WAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAIC,2BAAc,CAAA;AAAA,MAC5C,UAAY,EAAA,YAAA;AAAA,MACZ,OAAA,EAAS,QAAQ,eAAe,CAAA;AAAA,MAChC,IAAM,EAAA,WAAA;AAAA,MACN,KAAO,EAAA,UAAA;AAAA,KACR,CAAA,CAAA;AAED,IAAM,MAAA,MAAA,GAAS,CAAC,KAA6C,KAAA;AAC3D,MAAY,WAAA,CAAA,CAAC,IAAS,KAAA,CAAC,IAAI,CAAA,CAAA;AAC3B,MAAW,QAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,QAAA,CAAA,KAAA,CAAA,CAAA;AAAA,KACb,CAAA;AAEA,IACE,uBAAAC,cAAA,CAACC,kCAAiB,QAAjB,EAAA;AAAA,MACC,KAAO,EAAA;AAAA,QACL,KAAA;AAAA,QACA,MAAA;AAAA,QACA,QAAA;AAAA,QACA,QAAA,EAAU,QAAQ,QAAQ,CAAA;AAAA,QAC1B,IAAI,EAAM,IAAA,IAAA,GAAA,EAAA,GAAA,EAAA;AAAA,QACV,MAAA;AAAA,OACF;AAAA,MAEA,QAAC,kBAAAD,cAAA,CAAA,KAAA,EAAA;AAAA,QACC,GAAA;AAAA,QACA,SAAW,EAAAE,SAAA;AAAA,UACT,YAAa,EAAA;AAAA,UACb,EAAE,CAAC,YAAA,CAAa,MAAU,IAAA,IAAA,GAAA,MAAA,GAAA,EAAE,IAAI,MAAO,EAAA;AAAA,UACvC,SAAA;AAAA,SACF;AAAA,QACC,GAAG,IAAA;AAAA,OACN,CAAA;AAAA,KACF,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}