@salt-ds/core 1.33.0 → 1.35.0

package/css/salt-core.css

@@ -11,6 +11,9 @@
 .saltAccordion-success {
   border-top-color: var(--salt-status-success-borderColor);
 }
+.saltAccordion-disabled {
+  border-top-color: var(--salt-separable-tertiary-borderColor);
+}
 
 /* src/accordion/AccordionGroup.css */
 .saltAccordionGroup {
@@ -39,11 +42,6 @@
   outline: var(--salt-focused-outline);
   outline-offset: calc(-1 * var(--salt-focused-outlineWidth));
 }
-.saltAccordionHeader:disabled {
-  background: var(--salt-actionable-secondary-background);
-  color: var(--salt-content-primary-foreground-disabled);
-  cursor: var(--salt-actionable-cursor-disabled);
-}
 .saltAccordionHeader-content {
   padding: var(--salt-spacing-75) 0;
   width: 100%;
@@ -74,6 +72,11 @@
   height: var(--salt-size-base);
   margin-left: auto;
 }
+.saltAccordionHeader:disabled {
+  background: var(--salt-actionable-secondary-background);
+  color: var(--salt-content-primary-foreground-disabled);
+  cursor: var(--salt-actionable-cursor-disabled);
+}
 
 /* src/accordion/AccordionPanel.css */
 .saltAccordionPanel {
@@ -99,8 +102,8 @@
 .saltAccordionPanel-content {
   padding-left: var(--salt-spacing-100);
   padding-right: var(--salt-spacing-100);
-  padding-top: var(--salt-spacing-300);
-  padding-bottom: var(--salt-spacing-300);
+  padding-top: var(--salt-spacing-100);
+  padding-bottom: var(--salt-spacing-150);
 }
 .saltAccordionPanel-indentedContent {
   padding-left: calc(var(--salt-spacing-200) + var(--salt-size-icon));
@@ -155,12 +158,13 @@
   position: relative;
   flex-shrink: 0;
   vertical-align: middle;
+  --badge-size: var(--salt-text-notation-lineHeight);
 }
 .saltBadge-badge {
   padding-left: var(--salt-spacing-50);
   padding-right: var(--salt-spacing-50);
-  height: var(--salt-text-notation-lineHeight);
-  min-width: var(--salt-text-notation-lineHeight);
+  height: var(--badge-size);
+  min-width: var(--badge-size);
   border-radius: var(--salt-palette-corner-strongest, 9999px);
   white-space: nowrap;
   z-index: var(--salt-zIndex-default);
@@ -181,7 +185,16 @@
 .saltBadge-topRight {
   position: absolute;
   right: var(--salt-spacing-100);
-  transform: translateX(100%);
+  transform: translateX(100%) translateY(calc(-1 * (var(--badge-size) / 2)));
+}
+.saltBadge-dotBadge {
+  height: var(--salt-size-adornment);
+  min-width: var(--salt-size-adornment);
+  padding: 0;
+  --badge-size: var(--salt-size-adornment);
+}
+.saltBadge-dotBadge.saltBadge-topRight {
+  right: calc((var(--salt-size-adornment) / 2));
 }
 
 /* src/banner/Banner.css */
@@ -366,6 +379,7 @@
 .saltButton-disabled,
 .saltButton-disabled:active,
 .saltButton-disabled:focus-visible,
+.saltButton-disabled:focus-visible:active,
 .saltButton-disabled:hover {
   background: var(--saltButton-background-disabled, var(--button-background-disabled));
   color: var(--saltButton-text-color-disabled, var(--button-text-color-disabled));
@@ -393,6 +407,11 @@
   border-color: var(--salt-container-secondary-borderColor);
   --card-accent-color: var(--salt-container-secondary-borderColor);
 }
+.saltCard-tertiary {
+  background: var(--saltCard-background, var(--salt-container-tertiary-background));
+  border-color: var(--salt-container-tertiary-borderColor);
+  --card-accent-color: var(--salt-container-tertiary-borderColor);
+}
 .saltCard-accent::after {
   content: "";
   position: absolute;
@@ -484,9 +503,6 @@ a:focus .saltCard-interactable.saltCard-disabled {
   margin-top: calc((var(--salt-text-lineHeight) - var(--salt-size-selectable)) / 2);
   box-sizing: border-box;
 }
-.saltCheckboxIcon > svg {
-  transform: translate(0px, 0px);
-}
 .saltCheckbox-input:focus-visible + .saltCheckboxIcon {
   outline-offset: var(--salt-focused-outlineOffset);
   outline: var(--saltCheckbox-outline, var(--salt-focused-outline));
@@ -610,10 +626,14 @@ a:focus .saltCard-interactable.saltCard-disabled {
   border-color: var(--salt-selectable-borderColor-readonly);
   color: var(--salt-content-primary-foreground);
 }
+.saltCheckboxIcon > svg {
+  position: absolute;
+  transform: scale(1.01);
+}
 
 /* src/combo-box/ComboBox.css */
 .saltComboBox-focused {
-  outline: var(--salt-focused-outline);
+  outline: var(--saltPillInput-outline, var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--pillInput-outlineColor));
 }
 
 /* src/dialog/Dialog.css */
@@ -631,7 +651,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
   background: var(--salt-container-primary-background);
   box-shadow: var(--salt-overlayable-shadow-modal);
   overflow-y: auto;
-  z-index: var(--salt-zIndex-drawer);
+  z-index: var(--salt-zIndex-modal);
   height: min-content;
   border: var(--salt-size-border) var(--salt-container-borderStyle) var(--salt-separable-tertiary-borderColor);
   box-sizing: border-box;
@@ -1179,6 +1199,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
   line-height: var(--salt-text-lineHeight);
 }
 .saltFormField-labelTop {
+  gap: var(--salt-spacing-75);
   grid-template-areas: "label" "controls";
 }
 .saltFormField-labelTop .saltFormFieldHelperText {
@@ -1502,6 +1523,11 @@ a:focus .saltCard-interactable.saltCard-disabled {
   border-color: var(--salt-container-secondary-borderColor);
   --card-accent-color: var(--salt-container-secondary-borderColor);
 }
+.saltInteractableCard-tertiary {
+  background: var(--saltInteractableCard-background, var(--salt-container-tertiary-background));
+  border-color: var(--salt-container-tertiary-borderColor);
+  --card-accent-color: var(--salt-container-tertiary-borderColor);
+}
 .saltInteractableCard-accent::after {
   content: "";
   position: absolute;
@@ -1674,6 +1700,11 @@ a:focus .saltCard-interactable.saltCard-disabled {
   border-color: var(--salt-container-secondary-borderColor);
   --linkCard-accent-color: var(--salt-container-secondary-borderColor);
 }
+.saltLinkCard-tertiary {
+  background: var(--saltLinkCard-background, var(--salt-container-tertiary-background));
+  border-color: var(--salt-container-tertiary-borderColor);
+  --linkCard-accent-color: var(--salt-container-tertiary-borderColor);
+}
 .saltLinkCard-accent::after {
   content: "";
   position: absolute;
@@ -2042,6 +2073,13 @@ a:focus .saltCard-interactable.saltCard-disabled {
 }
 
 /* src/navigation-item/NavigationItem.css */
+.saltNavigationItem {
+  color: var(--salt-content-primary-foreground);
+  line-height: var(--salt-text-lineHeight);
+  font-family: var(--salt-text-fontFamily);
+  font-size: var(--salt-text-fontSize);
+  font-weight: var(--salt-text-fontWeight);
+}
 .saltNavigationItem-wrapper {
   display: flex;
   gap: var(--salt-spacing-100);
@@ -2049,7 +2087,8 @@ a:focus .saltCard-interactable.saltCard-disabled {
   position: relative;
   background: none;
   border: none;
-  font-size: var(--salt-text-fontSize);
+  font: inherit;
+  color: inherit;
   text-decoration: none;
   cursor: var(--salt-selectable-cursor-hover);
   transition: all var(--salt-duration-instant) ease-in-out;
@@ -2075,9 +2114,6 @@ a:focus .saltCard-interactable.saltCard-disabled {
   width: 100%;
 }
 .saltNavigationItem-label {
-  color: var(--salt-content-primary-foreground);
-  line-height: var(--salt-text-lineHeight);
-  font-family: var(--salt-text-fontFamily);
   padding-left: calc(var(--saltNavigationItem-level, 0) * var(--salt-spacing-100));
   flex: 1;
   text-align: left;
@@ -2098,9 +2134,6 @@ a:focus .saltCard-interactable.saltCard-disabled {
   width: 100%;
 }
 .saltNavigationItem-label {
-  color: var(--salt-content-primary-foreground);
-  line-height: var(--salt-text-lineHeight);
-  font-family: var(--salt-text-fontFamily);
   padding-left: calc(var(--saltNavigationItem-level, 0) * var(--salt-spacing-100));
   flex: 1;
   text-align: left;
@@ -2136,13 +2169,13 @@ a:focus .saltCard-interactable.saltCard-disabled {
 .saltNavigationItem-wrapper:hover::after,
 .saltNavigationItem-wrapper:focus-visible::after {
   background: var(--salt-navigable-indicator-hover);
-  transition: all var(--salt-duration-perceptible) ease-in-out;
+  transition: background var(--salt-duration-perceptible) ease-in-out;
 }
 .saltNavigationItem-active::after,
 .saltNavigationItem-active:hover::after,
 .saltNavigationItem-active:focus::after {
   background: var(--salt-navigable-indicator-active);
-  transition: all var(--salt-duration-perceptible) ease-in-out;
+  transition: background var(--salt-duration-perceptible) ease-in-out;
 }
 
 /* src/option/Option.css */
@@ -2176,27 +2209,10 @@ a:focus .saltCard-interactable.saltCard-disabled {
 .saltOption[aria-selected=true] {
   z-index: var(--salt-zIndex-default);
   background: var(--salt-selectable-background-selected);
-}
-.saltOption[aria-selected=true]::after {
-  content: "";
-  display: block;
-  position: absolute;
-  top: -1px;
-  bottom: -1px;
-  left: 0;
-  width: 100%;
-}
-.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);
-}
-.saltOption[aria-selected=true]:first-of-type::before {
-  border-top: unset;
-  top: 0;
-}
-.saltOption[aria-selected=true]:last-of-type::before {
-  border-bottom: unset;
-  bottom: 0;
+  box-shadow:
+    calc(var(--salt-size-border) * -2) 0 0 0 var(--salt-selectable-background-hover),
+    calc(var(--salt-size-border) * -1) 0 0 var(--salt-size-border) var(--salt-selectable-borderColor-selected),
+    0 calc(var(--salt-size-border) * -1) 0 var(--salt-selectable-borderColor-selected);
 }
 .saltOption[aria-disabled=true] {
   color: var(--salt-content-primary-foreground-disabled);
@@ -2341,6 +2357,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
 }
 .saltPageButton:hover,
 .saltPageButton:focus-visible {
+  --saltButton-text-color-hover: var(--salt-content-primary-foreground);
   --saltButton-background-hover: var(--salt-selectable-background-hover);
 }
 .saltPageButton:disabled {
@@ -2392,6 +2409,9 @@ a:focus .saltCard-interactable.saltCard-disabled {
 .saltPanel-secondary.saltPanel {
   --panel-background: var(--salt-container-secondary-background);
 }
+.saltPanel-tertiary.saltPanel {
+  --panel-background: var(--salt-container-tertiary-background);
+}
 .saltPanel {
   background: var(--saltPanel-background, var(--panel-background));
   color: var(--saltPanel-color, initial);
@@ -2477,27 +2497,27 @@ 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);
-  --input-borderWidth: var(--salt-size-border);
+  --pillInput-border: none;
+  --pillInput-borderColor: var(--salt-editable-borderColor);
+  --pillInput-borderStyle: var(--salt-editable-borderStyle);
+  --pillInput-outlineColor: var(--salt-focused-outlineColor);
+  --pillInput-borderWidth: var(--salt-size-border);
   align-items: center;
-  background: var(--saltInput-background, var(--input-background));
-  color: var(--saltInput-color, var(--salt-content-primary-foreground));
+  background: var(--saltPillInput-background, var(--pillInput-background));
+  border-radius: var(--salt-palette-corner-weak, 0);
+  border: var(--pillInput-border);
+  color: var(--saltPillInput-color, var(--salt-content-primary-foreground));
   display: inline-flex;
   font-family: var(--salt-text-fontFamily);
-  font-size: var(--saltInput-fontSize, var(--salt-text-fontSize));
-  line-height: var(--saltInput-lineHeight, var(--salt-text-lineHeight));
-  min-height: var(--saltInput-minHeight, var(--salt-size-base));
-  min-width: var(--saltInput-minWidth, 4em);
-  padding-left: var(--saltInput-paddingLeft, var(--salt-spacing-100));
-  padding-right: var(--saltInput-paddingRight, var(--salt-spacing-100));
+  font-size: var(--saltPillInput-fontSize, var(--salt-text-fontSize));
+  line-height: var(--saltPillInput-lineHeight, var(--salt-text-lineHeight));
+  min-height: var(--saltPillInput-minHeight, var(--salt-size-base));
+  min-width: var(--saltPillInput-minWidth, 4em);
+  padding-left: var(--saltPillInput-paddingLeft, var(--salt-spacing-100));
+  padding-right: var(--saltPillInput-paddingRight, var(--salt-spacing-100));
   position: relative;
   width: 100%;
   box-sizing: border-box;
-  border-radius: var(--salt-palette-corner-weak, 0);
-  border: var(--input-border);
   overflow: hidden;
 }
 .saltPillInput-truncate {
@@ -2507,58 +2527,58 @@ a:focus .saltCard-interactable.saltCard-disabled {
   flex-wrap: nowrap;
 }
 .saltPillInput:hover {
-  --input-borderStyle: var(--salt-editable-borderStyle-hover);
-  --input-borderColor: var(--salt-editable-borderColor-hover);
-  background: var(--saltInput-background-hover, var(--input-background-hover));
+  --pillInput-borderStyle: var(--salt-editable-borderStyle-hover);
+  --pillInput-borderColor: var(--salt-editable-borderColor-hover);
+  background: var(--saltPillInput-background-hover, var(--pillInput-background-hover));
   cursor: var(--salt-editable-cursor-hover);
 }
 .saltPillInput:active {
-  --input-borderColor: var(--salt-editable-borderColor-active);
-  --input-borderStyle: var(--salt-editable-borderStyle-active);
-  --input-borderWidth: var(--salt-editable-borderWidth-active);
-  background: var(--saltInput-background-active, var(--input-background-active));
+  --pillInput-borderColor: var(--salt-editable-borderColor-active);
+  --pillInput-borderStyle: var(--salt-editable-borderStyle-active);
+  --pillInput-borderWidth: var(--salt-editable-borderWidth-active);
+  background: var(--saltPillInput-background-active, var(--pillInput-background-active));
   cursor: var(--salt-editable-cursor-active);
 }
 .saltPillInput-primary {
-  --input-background: var(--salt-editable-primary-background);
-  --input-background-active: var(--salt-editable-primary-background-active);
-  --input-background-hover: var(--salt-editable-primary-background-hover);
-  --input-background-disabled: var(--salt-editable-primary-background-disabled);
-  --input-background-readonly: var(--salt-editable-primary-background-readonly);
+  --pillInput-background: var(--salt-editable-primary-background);
+  --pillInput-background-active: var(--salt-editable-primary-background-active);
+  --pillInput-background-hover: var(--salt-editable-primary-background-hover);
+  --pillInput-background-disabled: var(--salt-editable-primary-background-disabled);
+  --pillInput-background-readonly: var(--salt-editable-primary-background-readonly);
 }
 .saltPillInput-secondary {
-  --input-background: var(--salt-editable-secondary-background);
-  --input-background-active: var(--salt-editable-secondary-background-active);
-  --input-background-hover: var(--salt-editable-secondary-background-active);
-  --input-background-disabled: var(--salt-editable-secondary-background-disabled);
-  --input-background-readonly: var(--salt-editable-secondary-background-readonly);
+  --pillInput-background: var(--salt-editable-secondary-background);
+  --pillInput-background-active: var(--salt-editable-secondary-background-active);
+  --pillInput-background-hover: var(--salt-editable-secondary-background-active);
+  --pillInput-background-disabled: var(--salt-editable-secondary-background-disabled);
+  --pillInput-background-readonly: var(--salt-editable-secondary-background-readonly);
 }
 .saltPillInput-error,
 .saltPillInput-error:hover {
-  --input-background: var(--salt-status-error-background);
-  --input-background-active: var(--salt-status-error-background);
-  --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);
+  --pillInput-background: var(--salt-status-error-background);
+  --pillInput-background-active: var(--salt-status-error-background);
+  --pillInput-background-hover: var(--salt-status-error-background);
+  --pillInput-borderColor: var(--salt-status-error-borderColor);
+  --pillInput-outlineColor: var(--salt-status-error-borderColor);
+  --pillInput-background-readonly: var(--salt-status-error-background);
 }
 .saltPillInput-warning,
 .saltPillInput-warning:hover {
-  --input-background: var(--salt-status-warning-background);
-  --input-background-active: var(--salt-status-warning-background);
-  --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);
+  --pillInput-background: var(--salt-status-warning-background);
+  --pillInput-background-active: var(--salt-status-warning-background);
+  --pillInput-background-hover: var(--salt-status-warning-background);
+  --pillInput-borderColor: var(--salt-status-warning-borderColor);
+  --pillInput-outlineColor: var(--salt-status-warning-borderColor);
+  --pillInput-background-readonly: var(--salt-status-warning-background);
 }
 .saltPillInput-success,
 .saltPillInput-success:hover {
-  --input-background: var(--salt-status-success-background);
-  --input-background-active: var(--salt-status-success-background);
-  --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);
+  --pillInput-background: var(--salt-status-success-background);
+  --pillInput-background-active: var(--salt-status-success-background);
+  --pillInput-background-hover: var(--salt-status-success-background);
+  --pillInput-borderColor: var(--salt-status-success-borderColor);
+  --pillInput-outlineColor: var(--salt-status-success-borderColor);
+  --pillInput-background-readonly: var(--salt-status-success-background);
 }
 .saltPillInput-input {
   background: none;
@@ -2570,12 +2590,12 @@ a:focus .saltCard-interactable.saltCard-disabled {
   flex: 1;
   font: inherit;
   height: 100%;
-  letter-spacing: var(--saltInput-letterSpacing, 0);
+  letter-spacing: var(--saltPillInput-letterSpacing, 0);
   margin: 0;
   min-width: 0;
   overflow: hidden;
   padding: 0;
-  text-align: var(--input-textAlign);
+  text-align: var(--pillInput-textAlign);
   width: 100%;
 }
 .saltPillInput-input:focus {
@@ -2590,23 +2610,23 @@ a:focus .saltCard-interactable.saltCard-disabled {
 }
 .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));
+  --pillInput-borderColor: var(--pillInput-outlineColor);
+  --pillInput-borderWidth: var(--salt-editable-borderWidth-active);
+  outline: var(--saltPillInput-outline, var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--pillInput-outlineColor));
 }
 .saltPillInput.saltPillInput-readOnly {
-  --input-borderColor: var(--salt-editable-borderColor-readonly);
-  --input-borderStyle: var(--salt-editable-borderStyle-readonly);
-  --input-borderWidth: var(--salt-size-border);
-  background: var(--input-background-readonly);
+  --pillInput-borderColor: var(--salt-editable-borderColor-readonly);
+  --pillInput-borderStyle: var(--salt-editable-borderStyle-readonly);
+  --pillInput-borderWidth: var(--salt-size-border);
+  background: var(--pillInput-background-readonly);
   cursor: var(--salt-editable-cursor-readonly);
 }
 .saltPillInput-focused.saltPillInput-disabled {
-  --input-borderWidth: var(--salt-size-border);
+  --pillInput-borderWidth: var(--salt-size-border);
   outline: none;
 }
 .saltPillInput-focused.saltPillInput-readOnly {
-  --input-borderWidth: var(--salt-size-border);
+  --pillInput-borderWidth: var(--salt-size-border);
 }
 .saltPillInput-disabled .saltPillInput-input::selection {
   background: none;
@@ -2614,32 +2634,32 @@ a:focus .saltCard-interactable.saltCard-disabled {
 .saltPillInput.saltPillInput-disabled,
 .saltPillInput.saltPillInput-disabled:hover,
 .saltPillInput.saltPillInput-disabled:active {
-  --input-borderColor: var(--salt-editable-borderColor-disabled);
-  --input-borderStyle: var(--salt-editable-borderStyle-disabled);
-  --input-borderWidth: var(--salt-size-border);
-  background: var(--input-background-disabled);
+  --pillInput-borderColor: var(--salt-editable-borderColor-disabled);
+  --pillInput-borderStyle: var(--salt-editable-borderStyle-disabled);
+  --pillInput-borderWidth: var(--salt-size-border);
+  background: var(--pillInput-background-disabled);
   cursor: var(--salt-editable-cursor-disabled);
-  color: var(--saltInput-color-disabled, var(--salt-content-primary-foreground-disabled));
+  color: var(--saltPillInput-color-disabled, var(--salt-content-primary-foreground-disabled));
 }
 .saltPillInput-activationIndicator {
   left: 0;
   bottom: 0;
   width: 100%;
   position: absolute;
-  border-bottom: var(--input-borderWidth) var(--input-borderStyle) var(--input-borderColor);
+  border-bottom: var(--pillInput-borderWidth) var(--pillInput-borderStyle) var(--pillInput-borderColor);
 }
 .saltPillInput.saltPillInput-bordered {
-  --input-border: var(--salt-size-border) var(--salt-container-borderStyle) var(--input-borderColor);
-  --input-borderWidth: 0;
+  --pillInput-border: var(--salt-size-border) var(--salt-container-borderStyle) var(--pillInput-borderColor);
+  --pillInput-borderWidth: 0;
 }
 .saltPillInput-bordered.saltPillInput-focused,
 .saltPillInput-bordered:active {
-  --input-borderWidth: var(--salt-editable-borderWidth-active);
+  --pillInput-borderWidth: var(--salt-editable-borderWidth-active);
 }
 .saltPillInput-bordered.saltPillInput-readOnly,
 .saltPillInput-bordered.saltPillInput-disabled:hover,
 .saltPillInput-bordered.saltPillInput-disabled.saltPillInput-focused {
-  --input-borderWidth: 0;
+  --pillInput-borderWidth: 0;
 }
 .saltPillInput-startAdornmentContainer {
   align-items: center;
@@ -2655,6 +2675,12 @@ a:focus .saltCard-interactable.saltCard-disabled {
   column-gap: var(--salt-spacing-100);
   align-self: flex-start;
 }
+.saltPillInput-statusAdornmentContainer {
+  align-self: flex-start;
+  display: inline-flex;
+  align-items: center;
+  height: var(--salt-size-base);
+}
 .saltPillInput-readOnly .saltPillInput-startAdornmentContainer {
   margin-left: var(--salt-spacing-50);
 }
@@ -2698,18 +2724,12 @@ a:focus .saltCard-interactable.saltCard-disabled {
   display: contents;
 }
 .saltPillInput .saltPill:focus-visible {
-  background: var(--salt-selectable-background-hover);
+  background: var(--salt-content-foreground-highlight);
+  color: var(--salt-content-primary-foreground);
+  --saltIcon-color: var(--salt-content-primary-foreground);
   outline: none;
 }
-.saltPillInput .saltPill:hover {
-  background: var(--salt-selectable-background-hover);
-}
-.saltPillInput .saltPill:active {
-  background: var(--salt-actionable-primary-background-active);
-  --saltPill-color: var(--salt-actionable-primary-foreground-active);
-  --saltIcon-color: var(--salt-actionable-primary-foreground-active);
-}
-div[role=listitem] {
+.saltPillInput-pillList div[role=listitem] {
   display: inline;
 }
 .saltPillInput-overflowIndicator {
@@ -2755,9 +2775,6 @@ div[role=listitem] {
   margin-top: var(--radioButton-icon-marginTop);
   box-sizing: border-box;
 }
-.saltRadioButtonIcon > svg {
-  transform: translate(0px, 0px);
-}
 .saltRadioButton-input:focus-visible + .saltRadioButtonIcon {
   outline: var(--saltRadioButton-outline, var(--salt-focused-outline));
   outline-offset: var(--salt-focused-outlineOffset);
@@ -2815,6 +2832,7 @@ div[role=listitem] {
   min-width: var(--radioButton-size);
   min-height: var(--radioButton-size);
   border-radius: 50%;
+  position: relative;
   border: var(--salt-size-border) var(--salt-selectable-borderStyle) var(--salt-selectable-borderColor);
   color: var(--salt-selectable-foreground);
   background: var(--salt-container-primary-background);
@@ -2858,6 +2876,10 @@ div[role=listitem] {
   border-color: var(--salt-selectable-borderColor-readonly);
   color: var(--salt-content-primary-foreground);
 }
+.saltRadioButtonIcon > svg {
+  position: absolute;
+  transform: scale(1.01);
+}
 
 /* src/salt-provider/SaltProvider.css */
 .salt-provider {
@@ -3894,4 +3916,4 @@ label.saltText small,
   }
 }
 
-/* src/d2dc509c-469f-44b5-8784-1c26d9a0aad8.css */
+/* src/b2ce0a41-ff2d-46d3-b9b0-a331dce86eca.css */

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = ".saltAccordion {\n  border-top: var(--salt-size-border) var(--salt-separable-borderStyle) var(--salt-separable-tertiary-borderColor);\n}\n\n.saltAccordion-error {\n  border-top-color: var(--salt-status-error-borderColor);\n}\n\n.saltAccordion-warning {\n  border-top-color: var(--salt-status-warning-borderColor);\n}\n\n.saltAccordion-success {\n  border-top-color: var(--salt-status-success-borderColor);\n}\n";
+var css_248z = ".saltAccordion {\n  border-top: var(--salt-size-border) var(--salt-separable-borderStyle) var(--salt-separable-tertiary-borderColor);\n}\n\n.saltAccordion-error {\n  border-top-color: var(--salt-status-error-borderColor);\n}\n\n.saltAccordion-warning {\n  border-top-color: var(--salt-status-warning-borderColor);\n}\n\n.saltAccordion-success {\n  border-top-color: var(--salt-status-success-borderColor);\n}\n\n.saltAccordion-disabled {\n  border-top-color: var(--salt-separable-tertiary-borderColor);\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=Accordion.css.js.map

package/dist-cjs/accordion/Accordion.js

@@ -127,6 +127,8 @@ const Accordion = React.forwardRef(
       ...rest
     } = props;
     const id = useId.useId(idProp);
+    const [headerId, setHeaderId] = React.useState(`${id}-header`);
+    const [panelId, setPanelId] = React.useState(`${id}-panel`);
     const targetWindow = window.useWindow();
     styles.useComponentCssInjection({
       testId: "salt-accordion",
@@ -150,14 +152,20 @@ const Accordion = React.forwardRef(
         expanded,
         indicatorSide,
         disabled: Boolean(disabled),
-        id: id != null ? id : "",
+        headerId,
+        setHeaderId,
+        panelId,
+        setPanelId,
         status
       },
       children: /* @__PURE__ */ jsxRuntime.jsx("div", {
         ref,
         className: clsx.clsx(
           withBaseName(),
-          { [withBaseName(status != null ? status : "")]: status },
+          {
+            [withBaseName(status != null ? status : "")]: status,
+            [withBaseName("disabled")]: disabled
+          },
           className
         ),
         ...rest

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

@@ -1 +1 @@
-{"version":3,"file":"Accordion.js","sources":["../src/accordion/Accordion.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  type SyntheticEvent,\n  forwardRef,\n} from \"react\";\nimport { makePrefixer, useControlled, useId } from \"../utils\";\nimport accordionCss from \"./Accordion.css\";\nimport { AccordionContext } from \"./AccordionContext\";\nexport interface AccordionProps\n  extends Omit<ComponentPropsWithoutRef<\"div\">, \"onToggle\"> {\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   * Side to align the Accordion's indicator. Defaults to `left`.\n   */\n  indicatorSide?: \"left\" | \"right\";\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      indicatorSide = \"left\",\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          indicatorSide,\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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2CA,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,aAAgB,GAAA,MAAA;AAAA,MAChB,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,aAAA;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 { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  type SyntheticEvent,\n  forwardRef,\n  useState,\n} from \"react\";\nimport { makePrefixer, useControlled, useId } from \"../utils\";\nimport accordionCss from \"./Accordion.css\";\nimport { AccordionContext } from \"./AccordionContext\";\nexport interface AccordionProps\n  extends Omit<ComponentPropsWithoutRef<\"div\">, \"onToggle\"> {\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   * Side to align the Accordion's indicator. Defaults to `left`.\n   */\n  indicatorSide?: \"left\" | \"right\";\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      indicatorSide = \"left\",\n      id: idProp,\n      onToggle,\n      status,\n      value,\n      ...rest\n    } = props;\n\n    const id = useId(idProp);\n    const [headerId, setHeaderId] = useState(`${id}-header`);\n    const [panelId, setPanelId] = useState(`${id}-panel`);\n\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          indicatorSide,\n          disabled: Boolean(disabled),\n          headerId,\n          setHeaderId,\n          panelId,\n          setPanelId,\n          status,\n        }}\n      >\n        <div\n          ref={ref}\n          className={clsx(\n            withBaseName(),\n            {\n              [withBaseName(status ?? \"\")]: status,\n              [withBaseName(\"disabled\")]: disabled,\n            },\n            className,\n          )}\n          {...rest}\n        />\n      </AccordionContext.Provider>\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","Accordion","useId","useState","useWindow","useComponentCssInjection","accordionCss","useControlled","jsx","AccordionContext","clsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4CA,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,aAAgB,GAAA,MAAA;AAAA,MAChB,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,CAAC,QAAU,EAAA,WAAW,CAAI,GAAAC,cAAA,CAAS,GAAG,EAAW,CAAA,OAAA,CAAA,CAAA,CAAA;AACvD,IAAA,MAAM,CAAC,OAAS,EAAA,UAAU,CAAI,GAAAA,cAAA,CAAS,GAAG,EAAU,CAAA,MAAA,CAAA,CAAA,CAAA;AAEpD,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,aAAA;AAAA,QACA,QAAA,EAAU,QAAQ,QAAQ,CAAA;AAAA,QAC1B,QAAA;AAAA,QACA,WAAA;AAAA,QACA,OAAA;AAAA,QACA,UAAA;AAAA,QACA,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;AAAA,YACE,CAAC,YAAA,CAAa,MAAU,IAAA,IAAA,GAAA,MAAA,GAAA,EAAE,CAAI,GAAA,MAAA;AAAA,YAC9B,CAAC,YAAa,CAAA,UAAU,CAAI,GAAA,QAAA;AAAA,WAC9B;AAAA,UACA,SAAA;AAAA,SACF;AAAA,QACC,GAAG,IAAA;AAAA,OACN,CAAA;AAAA,KACF,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}

package/dist-cjs/accordion/AccordionContext.js

@@ -117,7 +117,10 @@ const AccordionContext = createContext.createContext(
     toggle: () => void 0,
     disabled: false,
     indicatorSide: "left",
-    id: ""
+    headerId: "",
+    setHeaderId: () => void 0,
+    panelId: "",
+    setPanelId: () => void 0
   }
 );
 function useAccordion() {

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

@@ -1 +1 @@
-{"version":3,"file":"AccordionContext.js","sources":["../src/accordion/AccordionContext.ts"],"sourcesContent":["import { type SyntheticEvent, useContext } from \"react\";\nimport { createContext } from \"../utils\";\n\nexport interface AccordionContextValue {\n  value: string;\n  expanded: boolean;\n  toggle: (event: SyntheticEvent<HTMLButtonElement>) => void;\n  disabled: boolean;\n  indicatorSide: \"left\" | \"right\";\n  id: string;\n  status?: \"error\" | \"warning\" | \"success\";\n}\n\nexport const AccordionContext = createContext<AccordionContextValue>(\n  \"AccordionContext\",\n  {\n    value: \"\",\n    expanded: false,\n    toggle: () => undefined,\n    disabled: false,\n    indicatorSide: \"left\",\n    id: \"\",\n  },\n);\n\nexport function useAccordion() {\n  return useContext(AccordionContext);\n}\n"],"names":["createContext","useContext"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAaO,MAAM,gBAAmB,GAAAA,2BAAA;AAAA,EAC9B,kBAAA;AAAA,EACA;AAAA,IACE,KAAO,EAAA,EAAA;AAAA,IACP,QAAU,EAAA,KAAA;AAAA,IACV,QAAQ,MAAM,KAAA,CAAA;AAAA,IACd,QAAU,EAAA,KAAA;AAAA,IACV,aAAe,EAAA,MAAA;AAAA,IACf,EAAI,EAAA,EAAA;AAAA,GACN;AACF,EAAA;AAEO,SAAS,YAAe,GAAA;AAC7B,EAAA,OAAOC,iBAAW,gBAAgB,CAAA,CAAA;AACpC;;;;;"}
+{"version":3,"file":"AccordionContext.js","sources":["../src/accordion/AccordionContext.ts"],"sourcesContent":["import { type SyntheticEvent, useContext } from \"react\";\nimport { createContext } from \"../utils\";\n\nexport interface AccordionContextValue {\n  value: string;\n  expanded: boolean;\n  toggle: (event: SyntheticEvent<HTMLButtonElement>) => void;\n  disabled: boolean;\n  indicatorSide: \"left\" | \"right\";\n  headerId: string;\n  setHeaderId: (id: string) => void;\n  panelId: string;\n  setPanelId: (id: string) => void;\n  status?: \"error\" | \"warning\" | \"success\";\n}\n\nexport const AccordionContext = createContext<AccordionContextValue>(\n  \"AccordionContext\",\n  {\n    value: \"\",\n    expanded: false,\n    toggle: () => undefined,\n    disabled: false,\n    indicatorSide: \"left\",\n    headerId: \"\",\n    setHeaderId: () => undefined,\n    panelId: \"\",\n    setPanelId: () => undefined,\n  },\n);\n\nexport function useAccordion() {\n  return useContext(AccordionContext);\n}\n"],"names":["createContext","useContext"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgBO,MAAM,gBAAmB,GAAAA,2BAAA;AAAA,EAC9B,kBAAA;AAAA,EACA;AAAA,IACE,KAAO,EAAA,EAAA;AAAA,IACP,QAAU,EAAA,KAAA;AAAA,IACV,QAAQ,MAAM,KAAA,CAAA;AAAA,IACd,QAAU,EAAA,KAAA;AAAA,IACV,aAAe,EAAA,MAAA;AAAA,IACf,QAAU,EAAA,EAAA;AAAA,IACV,aAAa,MAAM,KAAA,CAAA;AAAA,IACnB,OAAS,EAAA,EAAA;AAAA,IACT,YAAY,MAAM,KAAA,CAAA;AAAA,GACpB;AACF,EAAA;AAEO,SAAS,YAAe,GAAA;AAC7B,EAAA,OAAOC,iBAAW,gBAAgB,CAAA,CAAA;AACpC;;;;;"}