@salt-ds/core 1.29.0 → 1.31.0

package/css/salt-core.css

@@ -51,10 +51,6 @@
 }
 .saltAccordionHeader .saltAccordionHeader-icon {
   height: var(--salt-size-base);
-  transition: transform var(--salt-duration-perceptible) ease-in-out;
-}
-.saltAccordionHeader[aria-expanded=true] > .saltAccordionHeader-icon {
-  transform: rotate(90deg);
 }
 .saltAccordionHeader-error {
   background: var(--salt-status-error-background);
@@ -101,11 +97,14 @@
   overflow: hidden;
 }
 .saltAccordionPanel-content {
-  padding-left: calc(var(--salt-spacing-200) + var(--salt-size-icon));
+  padding-left: var(--salt-spacing-100);
   padding-right: var(--salt-spacing-100);
   padding-top: var(--salt-spacing-300);
   padding-bottom: var(--salt-spacing-300);
 }
+.saltAccordionPanel-indentedContent {
+  padding-left: calc(var(--salt-spacing-200) + var(--salt-size-icon));
+}
 @media (prefers-reduced-motion: reduce) {
   .saltAccordionPanel {
     transition: none;
@@ -314,7 +313,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 +792,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);
@@ -874,9 +897,13 @@ a:focus .saltCard-interactable.saltCard-disabled {
 
 /* src/dropdown/Dropdown.css */
 .saltDropdown {
+  --dropdown-border: none;
   --dropdown-borderColor: var(--salt-editable-borderColor);
   --dropdown-color: var(--salt-content-primary-foreground);
   --dropdown-cursor: var(--salt-selectable-cursor-hover);
+  --dropdown-borderStyle: var(--salt-editable-borderStyle);
+  --dropdown-outlineColor: var(--salt-focused-outlineColor);
+  --dropdown-borderWidth: var(--salt-size-border);
 }
 .saltDropdown {
   all: unset;
@@ -886,8 +913,9 @@ a:focus .saltCard-interactable.saltCard-disabled {
   background: var(--dropdown-background);
   cursor: var(--dropdown-cursor);
   min-height: var(--salt-size-base);
-  border-bottom: var(--salt-size-border) var(--salt-editable-borderStyle) var(--dropdown-borderColor);
-  display: flex;
+  border: var(--dropdown-border);
+  border-radius: var(--salt-palette-corner-weak, 0);
+  display: inline-flex;
   align-items: center;
   padding: 0 var(--salt-spacing-100);
   gap: var(--salt-spacing-100);
@@ -895,13 +923,27 @@ 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);
+  position: relative;
+  overflow: hidden;
 }
 .saltDropdown:hover {
   --dropdown-borderColor: var(--salt-editable-borderColor-hover);
+  --dropdown-borderStyle: var(--salt-editable-borderStyle-hover);
+  --dropdown-background: var(--saltDropdown-background-hover, var(--dropdown-background-hover));
 }
-.saltDropdown:focus-visible {
+.saltDropdown:active {
+  --dropdown-background: var(--saltDropdown-background-active, var(--dropdown-background-active));
+  --dropdown-borderColor: var(--salt-editable-borderColor-active);
+  --dropdown-borderWidth: var(--salt-editable-borderWidth-active);
+  --dropdown-borderStyle: var(--salt-editable-borderStyle-active);
+}
+.saltDropdown:focus {
   outline: var(--salt-focused-outline);
-  --dropdown-borderColor: var(--salt-editable-borderColor-hover);
+  --dropdown-borderColor: var(--salt-editable-borderColor-active);
+  --dropdown-borderWidth: var(--salt-editable-borderWidth-active);
+  --dropdown-borderStyle: var(--salt-editable-borderStyle-active);
 }
 .saltDropdown-content {
   flex: 1;
@@ -916,45 +958,91 @@ a:focus .saltCard-interactable.saltCard-disabled {
 }
 .saltDropdown-primary {
   --dropdown-background: var(--salt-editable-primary-background);
+  --dropdown-background-active: var(--salt-editable-primary-background-active);
+  --dropdown-background-hover: var(--salt-editable-primary-background-hover);
+  --dropdown-background-disabled: var(--salt-editable-primary-background-disabled);
+  --dropdown-background-readonly: var(--salt-editable-primary-background-readonly);
 }
 .saltDropdown-secondary {
   --dropdown-background: var(--salt-editable-secondary-background);
-}
-.saltDropdown:disabled {
-  --dropdown-background: var(--salt-editable-primary-background-disabled);
+  --dropdown-background-active: var(--salt-editable-secondary-background-active);
+  --dropdown-background-hover: var(--salt-editable-secondary-background-active);
+  --dropdown-background-disabled: var(--salt-editable-secondary-background-disabled);
+  --dropdown-background-readonly: var(--salt-editable-secondary-background-readonly);
+}
+.saltDropdown:disabled,
+.saltDropdown:disabled:active,
+.saltDropdown:disabled:hover,
+.saltDropdown:disabled:focus {
+  --dropdown-background: var(--dropdown-background-disabled);
   --dropdown-borderColor: var(--salt-editable-borderColor-disabled);
   --dropdown-color: var(--salt-content-primary-foreground-disabled);
   --dropdown-cursor: var(--salt-selectable-cursor-disabled);
+  --dropdown-borderWidth: var(--salt-size-border);
 }
 .saltDropdown[aria-readonly=true] {
-  --dropdown-background: var(--salt-editable-primary-background-readonly);
   --dropdown-borderColor: var(--salt-editable-borderColor-readonly);
   --dropdown-color: var(--salt-content-primary-foreground);
   --dropdown-cursor: var(--salt-selectable-cursor-readonly);
+  --dropdown-background: var(--dropdown-background-readonly);
+  --dropdown-borderWidth: var(--salt-size-border);
+}
+.saltDropdown[aria-readonly=true]:hover,
+.saltDropdown[aria-readonly=true]:focus {
+  --dropdown-background: var(--dropdown-background-readonly);
+  --dropdown-borderColor: var(--salt-editable-borderColor-readonly);
 }
-.saltDropdown-error {
+.saltDropdown-error,
+.saltDropdown-error:hover,
+.saltDropdown-error:focus {
   --dropdown-background: var(--salt-status-error-background);
   --dropdown-borderColor: var(--salt-status-error-borderColor);
-}
-.saltDropdown-error .saltDropdown:focus-visible {
+  --dropdown-background-active: var(--salt-status-error-background);
+  --dropdown-background-hover: var(--salt-status-error-background);
+  --dropdown-background-readonly: var(--salt-status-error-background);
   outline-color: var(--salt-status-error-borderColor);
-  --dropdown-borderColor: var(--salt-status-error-borderColor);
 }
-.saltDropdown-warning {
+.saltDropdown-warning,
+.saltDropdown-warning:hover,
+.saltDropdown-warning:focus {
   --dropdown-background: var(--salt-status-warning-background);
   --dropdown-borderColor: var(--salt-status-warning-borderColor);
-}
-.saltDropdown-warning .saltDropdown:focus-visible {
+  --dropdown-background-active: var(--salt-status-warning-background);
+  --dropdown-background-hover: var(--salt-status-warning-background);
+  --dropdown-background-readonly: var(--salt-status-warning-background);
   outline-color: var(--salt-status-warning-borderColor);
-  --dropdown-borderColor: var(--salt-status-warning-borderColor);
 }
-.saltDropdown-success {
+.saltDropdown-success,
+.saltDropdown-success:hover,
+.saltDropdown-success:focus {
   --dropdown-background: var(--salt-status-success-background);
   --dropdown-borderColor: var(--salt-status-success-borderColor);
-}
-.saltDropdown-success .saltDropdown:focus-visible {
+  --dropdown-background-active: var(--salt-status-success-background);
+  --dropdown-background-hover: var(--salt-status-success-background);
+  --dropdown-background-readonly: var(--salt-status-success-background);
   outline-color: var(--salt-status-success-borderColor);
-  --dropdown-borderColor: var(--salt-status-success-borderColor);
+}
+.saltDropdown-activationIndicator {
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  position: absolute;
+  border-bottom: var(--dropdown-borderWidth) var(--dropdown-borderStyle) var(--dropdown-borderColor);
+}
+.saltDropdown-bordered {
+  --dropdown-border: var(--salt-size-border) var(--salt-container-borderStyle) var(--dropdown-borderColor);
+  --dropdown-borderWidth: 0;
+}
+.saltDropdown-bordered.saltDropdown:focus,
+.saltDropdown-bordered:active {
+  --dropdown-borderWidth: var(--salt-editable-borderWidth-active);
+}
+.saltDropdown-bordered[aria-readonly=true],
+.saltDropdown-bordered[aria-readonly=true]:hover,
+.saltDropdown[aria-readonly=true]:focus,
+.saltDropdown-bordered.saltDropdown:disabled,
+.saltDropdown-bordered.saltDropdown:disabled:hover {
+  --dropdown-borderWidth: 0;
 }
 
 /* src/file-drop-zone/FileDropZone.css */
@@ -1638,19 +1726,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);
@@ -1667,14 +1777,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;
@@ -1719,7 +1827,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
   overflow-y: auto;
   min-width: 10em;
   position: relative;
-  z-index: var(--salt-zIndex-popout);
+  z-index: var(--salt-zIndex-flyover);
   box-shadow: var(--salt-overlayable-shadow-popout);
   box-sizing: border-box;
 }
@@ -2042,13 +2150,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;
@@ -2064,9 +2173,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;
@@ -2075,7 +2185,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);
 }
@@ -2098,20 +2208,26 @@ 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 */
 .saltOptionList {
   background: var(--salt-container-primary-background);
   border: var(--salt-size-border) var(--salt-selectable-borderStyle-selected) var(--salt-selectable-borderColor-selected);
+  border-radius: var(--salt-palette-corner-weak, 0);
   overflow: hidden;
   overflow-y: auto;
   position: relative;
@@ -2360,6 +2476,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
 
 /* src/pill-input/PillInput.css */
 .saltPillInput {
+  --input-border: none;
   --input-borderColor: var(--salt-editable-borderColor);
   --input-borderStyle: var(--salt-editable-borderStyle);
   --input-outlineColor: var(--salt-focused-outlineColor);
@@ -2378,6 +2495,9 @@ a:focus .saltCard-interactable.saltCard-disabled {
   position: relative;
   width: 100%;
   box-sizing: border-box;
+  border-radius: var(--salt-palette-corner-weak, 0);
+  border: var(--input-border);
+  overflow: hidden;
 }
 .saltPillInput-truncate {
   height: var(--salt-size-base);
@@ -2419,6 +2539,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);
 }
 .saltPillInput-warning,
 .saltPillInput-warning:hover {
@@ -2427,6 +2548,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);
 }
 .saltPillInput-success,
 .saltPillInput-success:hover {
@@ -2435,6 +2557,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);
 }
 .saltPillInput-input {
   background: none;
@@ -2464,7 +2587,8 @@ a:focus .saltCard-interactable.saltCard-disabled {
   color: var(--salt-content-secondary-foreground);
   font-weight: var(--salt-text-fontWeight-small);
 }
-.saltPillInput-focused {
+.saltPillInput-focused,
+.saltPillInput-focused:hover {
   --input-borderColor: var(--input-outlineColor);
   --input-borderWidth: var(--salt-editable-borderWidth-active);
   outline: var(--saltInput-outline, var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--input-outlineColor));
@@ -2503,6 +2627,19 @@ a:focus .saltCard-interactable.saltCard-disabled {
   position: absolute;
   border-bottom: var(--input-borderWidth) var(--input-borderStyle) var(--input-borderColor);
 }
+.saltPillInput.saltPillInput-bordered {
+  --input-border: var(--salt-size-border) var(--salt-container-borderStyle) var(--input-borderColor);
+  --input-borderWidth: 0;
+}
+.saltPillInput-bordered.saltPillInput-focused,
+.saltPillInput-bordered:active {
+  --input-borderWidth: var(--salt-editable-borderWidth-active);
+}
+.saltPillInput-bordered.saltPillInput-readOnly,
+.saltPillInput-bordered.saltPillInput-disabled:hover,
+.saltPillInput-bordered.saltPillInput-disabled.saltPillInput-focused {
+  --input-borderWidth: 0;
+}
 .saltPillInput-startAdornmentContainer {
   align-items: center;
   display: inline-flex;
@@ -2536,6 +2673,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
 .saltPillInput-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);
 }
 .saltPillInput-inputWrapper {
   display: flex;
@@ -2549,6 +2687,12 @@ a:focus .saltCard-interactable.saltCard-disabled {
   overflow-y: auto;
   box-sizing: border-box;
 }
+.saltPillInput-bordered > .saltPillInput-endAdornmentContainer {
+  padding-top: calc(var(--salt-spacing-50) - var(--salt-size-border));
+}
+.saltPillInput-bordered > .saltPillInput-inputWrapper {
+  padding: calc(var(--salt-spacing-50) - var(--salt-size-border)) 0;
+}
 .saltPillInput-pillList {
   display: contents;
 }
@@ -3006,6 +3150,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;
@@ -3072,6 +3388,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);
@@ -3286,7 +3603,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);
@@ -3554,4 +3871,4 @@ label.saltText small,
   padding-left: var(--salt-spacing-100);
 }
 
-/* src/256ef0ce-4f31-4b05-b6e0-9adf18d6b22d.css */
+/* src/d617c351-7466-4472-a746-ef8092b8c14c.css */