@salt-ds/core 1.52.1 → 1.54.0

package/css/salt-core.css

@@ -125,7 +125,7 @@
   --saltIcon-size: calc(var(--avatar-container-size) / 2);
 }
 .saltAvatar {
-  color: var(--saltAvatar-foreground, var(--avatar-foreground));
+  color: var(--saltAvatar-foreground, var(--salt-content-bold-foreground));
   background: var(--saltAvatar-background, var(--avatar-background));
   font-size: var(--avatar-fontSize);
   line-height: var(--saltAvatar-lineHeight, var(--salt-text-notation-lineHeight));
@@ -144,87 +144,66 @@
 }
 .saltAvatar-accent {
   --avatar-background: var(--salt-accent-background);
-  --avatar-foreground: var(--salt-accent-foreground);
 }
 .saltAvatar-category-1 {
   --avatar-background: var(--salt-category-1-bold-background);
-  --avatar-foreground: var(--salt-category-1-bold-foreground);
 }
 .saltAvatar-category-2 {
   --avatar-background: var(--salt-category-2-bold-background);
-  --avatar-foreground: var(--salt-category-2-bold-foreground);
 }
 .saltAvatar-category-3 {
   --avatar-background: var(--salt-category-3-bold-background);
-  --avatar-foreground: var(--salt-category-3-bold-foreground);
 }
 .saltAvatar-category-4 {
   --avatar-background: var(--salt-category-4-bold-background);
-  --avatar-foreground: var(--salt-category-4-bold-foreground);
 }
 .saltAvatar-category-5 {
   --avatar-background: var(--salt-category-5-bold-background);
-  --avatar-foreground: var(--salt-category-5-bold-foreground);
 }
 .saltAvatar-category-6 {
   --avatar-background: var(--salt-category-6-bold-background);
-  --avatar-foreground: var(--salt-category-6-bold-foreground);
 }
 .saltAvatar-category-7 {
   --avatar-background: var(--salt-category-7-bold-background);
-  --avatar-foreground: var(--salt-category-7-bold-foreground);
 }
 .saltAvatar-category-8 {
   --avatar-background: var(--salt-category-8-bold-background);
-  --avatar-foreground: var(--salt-category-8-bold-foreground);
 }
 .saltAvatar-category-9 {
   --avatar-background: var(--salt-category-9-bold-background);
-  --avatar-foreground: var(--salt-category-9-bold-foreground);
 }
 .saltAvatar-category-10 {
   --avatar-background: var(--salt-category-10-bold-background);
-  --avatar-foreground: var(--salt-category-10-bold-foreground);
 }
 .saltAvatar-category-11 {
   --avatar-background: var(--salt-category-11-bold-background);
-  --avatar-foreground: var(--salt-category-11-bold-foreground);
 }
 .saltAvatar-category-12 {
   --avatar-background: var(--salt-category-12-bold-background);
-  --avatar-foreground: var(--salt-category-12-bold-foreground);
 }
 .saltAvatar-category-13 {
   --avatar-background: var(--salt-category-13-bold-background);
-  --avatar-foreground: var(--salt-category-13-bold-foreground);
 }
 .saltAvatar-category-14 {
   --avatar-background: var(--salt-category-14-bold-background);
-  --avatar-foreground: var(--salt-category-14-bold-foreground);
 }
 .saltAvatar-category-15 {
   --avatar-background: var(--salt-category-15-bold-background);
-  --avatar-foreground: var(--salt-category-15-bold-foreground);
 }
 .saltAvatar-category-16 {
   --avatar-background: var(--salt-category-16-bold-background);
-  --avatar-foreground: var(--salt-category-16-bold-foreground);
 }
 .saltAvatar-category-17 {
   --avatar-background: var(--salt-category-17-bold-background);
-  --avatar-foreground: var(--salt-category-17-bold-foreground);
 }
 .saltAvatar-category-18 {
   --avatar-background: var(--salt-category-18-bold-background);
-  --avatar-foreground: var(--salt-category-18-bold-foreground);
 }
 .saltAvatar-category-19 {
   --avatar-background: var(--salt-category-19-bold-background);
-  --avatar-foreground: var(--salt-category-19-bold-foreground);
 }
 .saltAvatar-category-20 {
   --avatar-background: var(--salt-category-20-bold-background);
-  --avatar-foreground: var(--salt-category-20-bold-foreground);
 }
 .saltAvatar:has(img),
 .saltAvatar-withImage {
@@ -262,7 +241,7 @@
   font-family: var(--salt-text-fontFamily);
   line-height: var(--salt-text-notation-lineHeight);
   background: var(--salt-accent-background);
-  color: var(--salt-accent-foreground);
+  color: var(--salt-content-bold-foreground);
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
@@ -957,9 +936,6 @@ a:focus .saltCard-interactable.saltCard-disabled {
 }
 
 /* src/combo-box/ComboBox.css */
-.saltComboBox-focused {
-  outline: var(--saltPillInput-outline, var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--pillInput-outlineColor));
-}
 
 /* src/dialog/Dialog.css */
 .saltDialog {
@@ -1107,11 +1083,6 @@ a:focus .saltCard-interactable.saltCard-disabled {
 .saltDialogContent-scrollBottom.saltDialogContent-inner {
   border-bottom-color: var(--salt-separable-tertiary-borderColor);
 }
-@supports selector(:has(*)) {
-  .saltDialogContent:has(.saltDialogContent-overflow) {
-    min-height: calc(var(--salt-text-lineHeight) * 4);
-  }
-}
 
 /* src/dialog/DialogHeader.css */
 .saltDialogHeader {
@@ -2645,6 +2616,233 @@ a:focus .saltCard-interactable.saltCard-disabled {
   transition: background var(--salt-duration-perceptible) ease-in-out;
 }
 
+/* src/number-input/NumberInput.css */
+.saltNumberInput {
+  --numberInput-border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--numberInput-borderColor);
+  --numberInput-borderColor: var(--salt-editable-borderColor);
+  --numberInput-borderStyle: var(--salt-borderStyle-solid);
+  --numberInput-outlineColor: var(--salt-focused-outlineColor);
+  --numberInput-borderWidth: var(--salt-size-fixed-100);
+  --numberInput-outline: none;
+  align-items: center;
+  background: var(--numberInput-background);
+  border-radius: var(--salt-palette-corner-weak, 0);
+  box-sizing: border-box;
+  color: var(--salt-content-primary-foreground);
+  display: inline-flex;
+  font-family: var(--salt-text-fontFamily);
+  font-size: var(--salt-text-fontSize);
+  gap: var(--salt-spacing-50);
+  height: var(--salt-size-base);
+  min-height: var(--salt-size-base);
+  min-width: 4em;
+  overflow: hidden;
+  outline: var(--numberInput-outline);
+  padding-left: var(--salt-spacing-100);
+  padding-right: var(--salt-spacing-50);
+  padding-top: var(--salt-spacing-50);
+  padding-bottom: var(--salt-spacing-50);
+  position: relative;
+  width: 100%;
+}
+.saltNumberInput:hover {
+  --numberInput-borderStyle: var(--salt-borderStyle-solid);
+  --numberInput-borderColor: var(--salt-editable-borderColor-hover);
+  background: var(--numberInput-background-hover);
+  cursor: var(--salt-cursor-text);
+}
+.saltNumberInput:active {
+  --numberInput-borderColor: var(--salt-editable-borderColor-active);
+  --numberInput-borderStyle: var(--salt-borderStyle-solid);
+  --numberInput-borderWidth: var(--salt-size-fixed-200);
+  background: var(--numberInput-background-active);
+}
+.saltNumberInput-primary {
+  --numberInput-background: var(--salt-editable-primary-background);
+  --numberInput-background-active: var(--salt-editable-primary-background-active);
+  --numberInput-background-hover: var(--salt-editable-primary-background-hover);
+  --numberInput-background-disabled: var(--salt-editable-primary-background-disabled);
+  --numberInput-background-readonly: var(--salt-editable-primary-background-readonly);
+}
+.saltNumberInput-secondary {
+  --numberInput-background: var(--salt-editable-secondary-background);
+  --numberInput-background-active: var(--salt-editable-secondary-background-active);
+  --numberInput-background-hover: var(--salt-editable-secondary-background-active);
+  --numberInput-background-disabled: var(--salt-editable-secondary-background-disabled);
+  --numberInput-background-readonly: var(--salt-editable-secondary-background-readonly);
+}
+.saltNumberInput-error,
+.saltNumberInput-error:hover {
+  --numberInput-background: var(--salt-status-error-background);
+  --numberInput-background-active: var(--salt-status-error-background);
+  --numberInput-background-hover: var(--salt-status-error-background);
+  --numberInput-borderColor: var(--salt-status-error-borderColor);
+  --numberInput-outlineColor: var(--salt-status-error-borderColor);
+  --numberInput-background-readonly: var(--salt-status-error-background);
+}
+.saltNumberInput-warning,
+.saltNumberInput-warning:hover {
+  --numberInput-background: var(--salt-status-warning-background);
+  --numberInput-background-active: var(--salt-status-warning-background);
+  --numberInput-background-hover: var(--salt-status-warning-background);
+  --numberInput-borderColor: var(--salt-status-warning-borderColor);
+  --numberInput-outlineColor: var(--salt-status-warning-borderColor);
+  --numberInput-background-readonly: var(--salt-status-warning-background);
+}
+.saltNumberInput-success,
+.saltNumberInput-success:hover {
+  --numberInput-background: var(--salt-status-success-background);
+  --numberInput-background-active: var(--salt-status-success-background);
+  --numberInput-background-hover: var(--salt-status-success-background);
+  --numberInput-borderColor: var(--salt-status-success-borderColor);
+  --numberInput-outlineColor: var(--salt-status-success-borderColor);
+  --numberInput-background-readonly: var(--salt-status-success-background);
+}
+.saltNumberInput-input {
+  background: none;
+  border: none;
+  box-sizing: content-box;
+  color: inherit;
+  cursor: inherit;
+  display: block;
+  flex: 1;
+  font: inherit;
+  letter-spacing: var(--salt-text-letterSpacing);
+  line-height: var(--salt-text-lineHeight);
+  margin: 0;
+  min-width: 0;
+  padding: 0;
+  text-align: var(--numberInput-textAlign);
+  width: 100%;
+}
+.saltNumberInput-input:focus {
+  outline: none;
+}
+.saltNumberInput-input::placeholder {
+  color: var(--salt-content-secondary-foreground);
+  font-weight: var(--salt-text-fontWeight-small);
+}
+.saltNumberInput-focused {
+  --numberInput-borderColor: var(--numberInput-outlineColor);
+  --numberInput-borderWidth: var(--salt-size-fixed-200);
+  outline: var(--saltNumberInput-outline, var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--numberInput-outlineColor));
+}
+.saltNumberInput-bordered {
+  --numberInput-border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--numberInput-borderColor);
+  --numberInput-borderWidth: 0;
+  border: var(--numberInput-border);
+}
+.saltNumberInput-bordered.saltNumberInput-focused,
+.saltNumberInput-bordered:active {
+  --numberInput-borderWidth: var(--salt-size-fixed-200);
+}
+.saltNumberInput-bordered.saltNumberInput-readOnly,
+.saltNumberInput-bordered.saltNumberInput-disabled:hover {
+  --numberInput-borderWidth: 0;
+}
+.saltNumberInput-bordered.saltNumberInput-focused:hover {
+  --numberInput-borderColor: var(--salt-editable-borderColor-active);
+}
+.saltNumberInput-readOnly,
+.saltNumberInput-bordered.saltNumberInput-readOnly {
+  --numberInput-borderColor: var(--salt-editable-borderColor-readonly);
+  --numberInput-borderStyle: var(--salt-borderStyle-solid);
+  --numberInput-borderWidth: var(--salt-size-fixed-100);
+  background: var(--numberInput-background-readonly);
+  cursor: var(--salt-cursor-readonly);
+}
+.saltNumberInput-focused.saltNumberInput-disabled {
+  --numberInput-borderWidth: var(--salt-size-fixed-100);
+  outline: none;
+}
+.saltNumberInput-focused.saltNumberInput-readOnly {
+  --numberInput-borderWidth: var(--salt-size-fixed-100);
+}
+.saltNumberInput:hover.saltNumberInput-readOnly {
+  --numberInput-borderColor: var(--salt-editable-borderColor-readonly);
+}
+.saltNumberInput-disabled .saltNumberInput-input::selection {
+  background: none;
+}
+.saltNumberInput-disabled,
+.saltNumberInput-disabled:hover,
+.saltNumberInput-disabled:active {
+  --numberInput-borderColor: var(--salt-editable-borderColor-disabled);
+  --numberInput-borderStyle: var(--salt-borderStyle-solid);
+  --numberInput-borderWidth: var(--salt-size-fixed-100);
+  background: var(--numberInput-background-disabled);
+  cursor: var(--salt-cursor-disabled);
+  color: var(--saltNumberInput-color-disabled, var(--salt-content-primary-foreground-disabled));
+}
+.saltNumberInput-startAdornmentContainer {
+  align-items: center;
+  display: inline-flex;
+  padding-right: var(--salt-spacing-100);
+  column-gap: var(--salt-spacing-100);
+}
+.saltNumberInput-endAdornmentContainer {
+  align-items: center;
+  display: inline-flex;
+  padding-left: var(--salt-spacing-100);
+  column-gap: var(--salt-spacing-100);
+}
+.saltNumberInput-startAdornmentContainer {
+  margin-left: calc(var(--salt-spacing-50) * -1);
+}
+.saltNumberInput-startAdornmentContainer > .saltButton,
+.saltNumberInput-endAdornmentContainer > .saltButton {
+  --saltButton-padding: calc(var(--salt-spacing-50) - var(--button-borderWidth));
+  --saltButton-height: calc(var(--salt-size-base) - var(--salt-spacing-100));
+  --saltButton-borderRadius: var(--salt-palette-corner-weaker);
+}
+.saltNumberInput-inputTextAlignLeft {
+  --numberInput-textAlign: left;
+}
+.saltNumberInput-inputTextAlignCenter {
+  --numberInput-textAlign: center;
+}
+.saltNumberInput-inputTextAlignRight {
+  --numberInput-textAlign: right;
+}
+.saltNumberInput-buttonContainer {
+  --numberInput-buttonGap: var(--salt-spacing-fixed-200);
+  display: flex;
+  flex-direction: column;
+  gap: var(--numberInput-buttonGap);
+  justify-content: center;
+}
+.saltNumberInput-hiddenButtons .saltNumberInput-buttonContainer {
+  display: none;
+}
+.saltNumberInput-activationIndicator {
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  position: absolute;
+  border-bottom: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--numberInput-borderColor);
+}
+.saltNumberInput-focused .saltNumberInput-activationIndicator {
+  border-bottom: var(--salt-size-fixed-200) var(--salt-borderStyle-solid) var(--salt-editable-borderColor-active);
+}
+.saltNumberInput-bordered.saltNumberInput-focused .saltNumberInput-activationIndicator {
+  border-bottom-width: var(--salt-size-fixed-100);
+}
+.saltNumberInput-bordered .saltNumberInput-activationIndicator,
+.saltNumberInput-readOnly.saltNumberInput-focused .saltNumberInput-activationIndicator {
+  border-bottom-width: 0;
+}
+.saltNumberInput-increment {
+  --saltButton-borderRadius: var(--salt-palette-corner-weaker, 0) var(--salt-palette-corner-weaker, 0) 0 0;
+}
+.saltNumberInput-decrement {
+  --saltButton-borderRadius: 0 0 var(--salt-palette-corner-weaker, 0) var(--salt-palette-corner-weaker, 0);
+}
+.saltNumberInput-increment,
+.saltNumberInput-decrement {
+  --saltButton-height: calc((var(--salt-size-base) - (var(--salt-spacing-50) * 2) - var(--salt-size-fixed-200)) / 2);
+  --saltButton-padding: calc(var(--salt-spacing-50) - var(--button-borderWidth));
+}
+
 /* src/option/Option.css */
 .saltOption {
   color: var(--salt-content-primary-foreground);
@@ -3032,6 +3230,38 @@ a:focus .saltCard-interactable.saltCard-disabled {
   opacity: 0.4;
 }
 
+/* src/pill/PillCheckIcon.css */
+.saltPillCheckIcon {
+  --checkbox-size: var(--salt-size-selectable);
+  width: var(--checkbox-size);
+  min-width: var(--checkbox-size);
+  height: var(--checkbox-size);
+  min-height: var(--checkbox-size);
+  border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid);
+  border-radius: var(--salt-palette-corner-weaker, 0);
+  position: relative;
+  --saltIcon-size: 100%;
+  display: flex;
+  pointer-events: none;
+  clip-path: border-box;
+  box-sizing: border-box;
+}
+.saltPillCheckIcon > svg {
+  pointer-events: none;
+  position: absolute;
+  transform: scale(1.01);
+}
+
+/* src/pill/PillGroup.css */
+.saltPillGroup {
+  border: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--salt-spacing-50);
+}
+
 /* src/pill-input/PillInput.css */
 .saltPillInput {
   align-items: center;
@@ -3250,13 +3480,6 @@ a:focus .saltCard-interactable.saltCard-disabled {
 .saltPillInput-pillList {
   display: contents;
 }
-.saltPillInput .saltPill:focus-visible {
-  background: var(--salt-content-foreground-highlight);
-  color: var(--salt-content-primary-foreground);
-  --saltIcon-color: var(--salt-content-primary-foreground);
-  border-color: transparent;
-  outline: none;
-}
 .saltPillInput-pillList div[role=listitem] {
   display: inline;
 }
@@ -3888,7 +4111,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
 }
 .saltTag-secondary {
   background: var(--tag-secondary-background, var(--salt-category-1-bold-background));
-  color: var(--tag-secondary-foreground, var(--salt-category-1-bold-foreground));
+  color: var(--salt-content-bold-foreground);
   border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) transparent;
 }
 .saltTag-category-1 {
@@ -3896,140 +4119,120 @@ a:focus .saltCard-interactable.saltCard-disabled {
   --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 */
@@ -4368,6 +4571,7 @@ label.saltText small,
   cursor: unset;
 }
 .saltToggleButton[aria-pressed=true]:hover {
+  background: var(--toggleButton-background-selectedHover);
   border-color: var(--toggleButton-borderColor-selectedHover);
 }
 .saltToggleButton[aria-disabled=true] {
@@ -4411,6 +4615,7 @@ label.saltText small,
   --toggleButton-borderColor-active: var(--salt-actionable-subtle-borderColor-active);
   --toggleButton-borderColor-selected: var(--salt-actionable-borderColor-selected);
   --toggleButton-borderColor-selectedHover: var(--salt-actionable-bold-borderColor-hover);
+  --toggleButton-background-selectedHover: var(--salt-actionable-bold-background-hover);
 }
 .saltToggleButton-accented.saltToggleButton-solid {
   --toggleButton-text-color: var(--salt-actionable-accented-subtle-foreground);
@@ -4426,6 +4631,7 @@ label.saltText small,
   --toggleButton-borderColor-active: var(--salt-actionable-accented-subtle-borderColor-active);
   --toggleButton-borderColor-selected: var(--salt-actionable-accented-borderColor-selected);
   --toggleButton-borderColor-selectedHover: var(--salt-actionable-accented-bold-borderColor-hover);
+  --toggleButton-background-selectedHover: var(--salt-actionable-accented-bold-background-hover);
 }
 .saltToggleButton-positive.saltToggleButton-solid {
   --toggleButton-text-color: var(--salt-actionable-positive-subtle-foreground);
@@ -4441,6 +4647,7 @@ label.saltText small,
   --toggleButton-borderColor-active: var(--salt-actionable-positive-subtle-borderColor-active);
   --toggleButton-borderColor-selected: var(--salt-actionable-positive-borderColor-selected);
   --toggleButton-borderColor-selectedHover: var(--salt-actionable-positive-bold-borderColor-hover);
+  --toggleButton-background-selectedHover: var(--salt-actionable-accented-bold-background-hover);
 }
 .saltToggleButton-negative.saltToggleButton-solid {
   --toggleButton-text-color: var(--salt-actionable-negative-subtle-foreground);
@@ -4456,6 +4663,7 @@ label.saltText small,
   --toggleButton-borderColor-active: var(--salt-actionable-negative-subtle-borderColor-active);
   --toggleButton-borderColor-selected: var(--salt-actionable-negative-borderColor-selected);
   --toggleButton-borderColor-selectedHover: var(--salt-actionable-negative-bold-borderColor-hover);
+  --toggleButton-background-selectedHover: var(--salt-actionable-negative-bold-background-hover);
 }
 .saltToggleButton-caution.saltToggleButton-solid {
   --toggleButton-text-color: var(--salt-actionable-caution-subtle-foreground);
@@ -4471,6 +4679,7 @@ label.saltText small,
   --toggleButton-borderColor-active: var(--salt-actionable-caution-subtle-borderColor-active);
   --toggleButton-borderColor-selected: var(--salt-actionable-caution-borderColor-selected);
   --toggleButton-borderColor-selectedHover: var(--salt-actionable-caution-bold-borderColor-hover);
+  --toggleButton-background-selectedHover: var(--salt-actionable-caution-bold-background-hover);
 }
 .saltToggleButton-neutral.saltToggleButton-bordered {
   --toggleButton-text-color: var(--salt-actionable-foreground);
@@ -4486,6 +4695,7 @@ label.saltText small,
   --toggleButton-borderColor-active: var(--salt-actionable-borderColor);
   --toggleButton-borderColor-selected: var(--salt-actionable-borderColor-selected);
   --toggleButton-borderColor-selectedHover: var(--salt-actionable-bold-borderColor-hover);
+  --toggleButton-background-selectedHover: var(--salt-actionable-bold-background-hover);
 }
 .saltToggleButton-accented.saltToggleButton-bordered {
   --toggleButton-text-color: var(--salt-actionable-accented-foreground);
@@ -4501,6 +4711,7 @@ label.saltText small,
   --toggleButton-borderColor-active: var(--salt-actionable-accented-borderColor);
   --toggleButton-borderColor-selected: var(--salt-actionable-accented-borderColor-selected);
   --toggleButton-borderColor-selectedHover: var(--salt-actionable-accented-bold-borderColor-hover);
+  --toggleButton-background-selectedHover: var(--salt-actionable-accented-bold-background-hover);
 }
 .saltToggleButton-positive.saltToggleButton-bordered {
   --toggleButton-text-color: var(--salt-actionable-positive-foreground);
@@ -4516,6 +4727,7 @@ label.saltText small,
   --toggleButton-borderColor-active: var(--salt-actionable-positive-borderColor);
   --toggleButton-borderColor-selected: var(--salt-actionable-positive-borderColor-selected);
   --toggleButton-borderColor-selectedHover: var(--salt-actionable-positive-bold-borderColor-hover);
+  --toggleButton-background-selectedHover: var(--salt-actionable-positive-bold-background-hover);
 }
 .saltToggleButton-negative.saltToggleButton-bordered {
   --toggleButton-text-color: var(--salt-actionable-negative-foreground);
@@ -4531,6 +4743,7 @@ label.saltText small,
   --toggleButton-borderColor-active: var(--salt-actionable-negative-borderColor);
   --toggleButton-borderColor-selected: var(--salt-actionable-negative-borderColor-selected);
   --toggleButton-borderColor-selectedHover: var(--salt-actionable-negative-bold-borderColor-hover);
+  --toggleButton-background-selectedHover: var(--salt-actionable-negative-bold-background-hover);
 }
 .saltToggleButton-caution.saltToggleButton-bordered {
   --toggleButton-text-color: var(--salt-actionable-caution-foreground);
@@ -4546,6 +4759,7 @@ label.saltText small,
   --toggleButton-borderColor-active: var(--salt-actionable-caution-borderColor);
   --toggleButton-borderColor-selected: var(--salt-actionable-caution-borderColor-selected);
   --toggleButton-borderColor-selectedHover: var(--salt-actionable-caution-bold-borderColor-hover);
+  --toggleButton-background-selectedHover: var(--salt-actionable-caution-bold-background-hover);
 }
 
 /* src/toggle-button-group/ToggleButtonGroup.css */
@@ -5342,4 +5556,4 @@ label.saltText small,
   color: var(--salt-status-error-foreground-informative);
 }
 
-/* src/cffa4c84-7bd6-49e1-a87d-9c027d493356.css */
+/* src/5a699fff-d814-4b2c-a9d7-dab7b34e2781.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(--avatar-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-fontFamily);\n  font-weight: var(--salt-text-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\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-accent-background);\n  --avatar-foreground: var(--salt-accent-foreground);\n}\n\n.saltAvatar-category-1 {\n  --avatar-background: var(--salt-category-1-bold-background);\n  --avatar-foreground: var(--salt-category-1-bold-foreground);\n}\n.saltAvatar-category-2 {\n  --avatar-background: var(--salt-category-2-bold-background);\n  --avatar-foreground: var(--salt-category-2-bold-foreground);\n}\n\n.saltAvatar-category-3 {\n  --avatar-background: var(--salt-category-3-bold-background);\n  --avatar-foreground: var(--salt-category-3-bold-foreground);\n}\n\n.saltAvatar-category-4 {\n  --avatar-background: var(--salt-category-4-bold-background);\n  --avatar-foreground: var(--salt-category-4-bold-foreground);\n}\n\n.saltAvatar-category-5 {\n  --avatar-background: var(--salt-category-5-bold-background);\n  --avatar-foreground: var(--salt-category-5-bold-foreground);\n}\n\n.saltAvatar-category-6 {\n  --avatar-background: var(--salt-category-6-bold-background);\n  --avatar-foreground: var(--salt-category-6-bold-foreground);\n}\n\n.saltAvatar-category-7 {\n  --avatar-background: var(--salt-category-7-bold-background);\n  --avatar-foreground: var(--salt-category-7-bold-foreground);\n}\n\n.saltAvatar-category-8 {\n  --avatar-background: var(--salt-category-8-bold-background);\n  --avatar-foreground: var(--salt-category-8-bold-foreground);\n}\n\n.saltAvatar-category-9 {\n  --avatar-background: var(--salt-category-9-bold-background);\n  --avatar-foreground: var(--salt-category-9-bold-foreground);\n}\n\n.saltAvatar-category-10 {\n  --avatar-background: var(--salt-category-10-bold-background);\n  --avatar-foreground: var(--salt-category-10-bold-foreground);\n}\n.saltAvatar-category-11 {\n  --avatar-background: var(--salt-category-11-bold-background);\n  --avatar-foreground: var(--salt-category-11-bold-foreground);\n}\n.saltAvatar-category-12 {\n  --avatar-background: var(--salt-category-12-bold-background);\n  --avatar-foreground: var(--salt-category-12-bold-foreground);\n}\n.saltAvatar-category-13 {\n  --avatar-background: var(--salt-category-13-bold-background);\n  --avatar-foreground: var(--salt-category-13-bold-foreground);\n}\n.saltAvatar-category-14 {\n  --avatar-background: var(--salt-category-14-bold-background);\n  --avatar-foreground: var(--salt-category-14-bold-foreground);\n}\n.saltAvatar-category-15 {\n  --avatar-background: var(--salt-category-15-bold-background);\n  --avatar-foreground: var(--salt-category-15-bold-foreground);\n}\n.saltAvatar-category-16 {\n  --avatar-background: var(--salt-category-16-bold-background);\n  --avatar-foreground: var(--salt-category-16-bold-foreground);\n}\n.saltAvatar-category-17 {\n  --avatar-background: var(--salt-category-17-bold-background);\n  --avatar-foreground: var(--salt-category-17-bold-foreground);\n}\n.saltAvatar-category-18 {\n  --avatar-background: var(--salt-category-18-bold-background);\n  --avatar-foreground: var(--salt-category-18-bold-foreground);\n}\n.saltAvatar-category-19 {\n  --avatar-background: var(--salt-category-19-bold-background);\n  --avatar-foreground: var(--salt-category-19-bold-foreground);\n}\n.saltAvatar-category-20 {\n  --avatar-background: var(--salt-category-20-bold-background);\n  --avatar-foreground: var(--salt-category-20-bold-foreground);\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";
+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-fontFamily);\n  font-weight: var(--salt-text-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\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-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";
 
 module.exports = css_248z;
 //# sourceMappingURL=Avatar.css.js.map