@salt-ds/core 1.53.0 → 1.54.1

package/CHANGELOG.md

@@ -1,5 +1,47 @@
 # @salt-ds/core
 
+## 1.54.1
+
+### Patch Changes
+
+- f670363: Fixed support for React 16 and 17.
+- 9f9be9d: Fixed `Menu`, `Collapsible` and `Overlay` triggers not forwarding props.
+- 0d3fc12: Fixed `SaltProvider`'s incorrectly being marked as root when an empty theme name is passed in.
+- f670363: Fixed `ComboBox` scrolling to the top when trying to scroll to the bottom of its list with a value in the input.
+- Updated dependencies [0c664ed]
+- Updated dependencies [ee16c19]
+- Updated dependencies [ee16c19]
+  - @salt-ds/icons@1.16.0
+
+## 1.54.0
+
+### Minor Changes
+
+- 64afd57: Introduced a PillGroup component.
+  This enhancement allows for multi-selection functionality, making it easier to capture user choices in grouped pill interfaces.
+
+  Usage example:
+
+  ```tsx
+  <PillGroup>
+    <Pill value="one">Pill 1</Pill>
+    <Pill value="two">Pill 2</Pill>
+    <Pill value="three">Pill 3</Pill>
+  </PillGroup>
+  ```
+
+- 1511c0d: Based on consumer feedback, we have enhanced our button's solid appearance hover state to include a fill color change along with the border, improving visual affordance. Additionally, for the transparent button appearance, the border is now removed in both hover and active states, and the fill uses a subtler style—applying a black alpha in light mode and a white alpha in dark mode.
+
+### Patch Changes
+
+- 89779b5: Updated foreground tokens used in Avatar, Badge and Tag.
+- 10ffed9: Fixed disabled `MenuItem`s opening submenus on hover.
+- 12ef4c9: Fixed right click behavior on `NumberInput` and `Slider`.
+
+  Previously, when users right-clicked on the increment/decrement buttons of the `NumberInput` or the thumb of the `Slider`, these components could remain stuck in a pressed state. The components have been updated to properly handle right-clicks and other pointer events by canceling the pressed state when such interactions occur.
+
+- e31acee: Removed `useLayoutEffect` usage to fix warnings being logged during SSR.
+
 ## 1.53.0
 
 ### Minor Changes

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;
 }
@@ -3251,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;
@@ -4100,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 {
@@ -4108,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 */
@@ -4580,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] {
@@ -4623,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);
@@ -4638,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);
@@ -4653,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);
@@ -4668,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);
@@ -4683,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);
@@ -4698,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);
@@ -4713,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);
@@ -4728,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);
@@ -4743,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);
@@ -4758,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 */
@@ -5554,4 +5556,4 @@ label.saltText small,
   color: var(--salt-status-error-foreground-informative);
 }
 
-/* src/6e6ab152-19e8-4f22-8b9f-b5e6b2237225.css */
+/* src/7631a5b7-ec05-434c-ab08-8ca88766c18b.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

package/dist-cjs/badge/Badge.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = "/* Style applied to the root element */\n.saltBadge {\n  display: inline-flex;\n  position: relative;\n  flex-shrink: 0;\n  vertical-align: middle;\n  --badge-size: var(--salt-text-notation-lineHeight);\n}\n\n.saltBadge-badge {\n  /* Should this vary according to touch size */\n  padding-left: var(--salt-spacing-50);\n  padding-right: var(--salt-spacing-50);\n  height: var(--badge-size);\n  min-width: var(--badge-size);\n  border-radius: var(--salt-palette-corner-strongest, 9999px);\n\n  white-space: nowrap;\n  z-index: var(--salt-zIndex-default);\n  box-sizing: border-box;\n\n  align-items: center;\n  justify-content: center;\n  display: inline-flex;\n  margin: auto;\n\n  font-size: var(--salt-text-notation-fontSize);\n  font-weight: var(--salt-text-notation-fontWeight);\n  font-family: var(--salt-text-fontFamily);\n  line-height: var(--salt-text-notation-lineHeight);\n  background: var(--salt-accent-background);\n  color: var(--salt-accent-foreground);\n\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\n.saltBadge-topRight {\n  position: absolute;\n  right: var(--salt-spacing-100);\n  transform: translateX(100%) translateY(calc(-1 * (var(--badge-size) / 2)));\n}\n\n.saltBadge-dotBadge {\n  height: var(--salt-size-adornment);\n  min-width: var(--salt-size-adornment);\n  padding: 0;\n  --badge-size: var(--salt-size-adornment);\n}\n\n.saltBadge-dotBadge.saltBadge-topRight {\n  right: calc((var(--salt-size-adornment) / 2));\n}\n";
+var css_248z = "/* Style applied to the root element */\n.saltBadge {\n  display: inline-flex;\n  position: relative;\n  flex-shrink: 0;\n  vertical-align: middle;\n  --badge-size: var(--salt-text-notation-lineHeight);\n}\n\n.saltBadge-badge {\n  /* Should this vary according to touch size */\n  padding-left: var(--salt-spacing-50);\n  padding-right: var(--salt-spacing-50);\n  height: var(--badge-size);\n  min-width: var(--badge-size);\n  border-radius: var(--salt-palette-corner-strongest, 9999px);\n\n  white-space: nowrap;\n  z-index: var(--salt-zIndex-default);\n  box-sizing: border-box;\n\n  align-items: center;\n  justify-content: center;\n  display: inline-flex;\n  margin: auto;\n\n  font-size: var(--salt-text-notation-fontSize);\n  font-weight: var(--salt-text-notation-fontWeight);\n  font-family: var(--salt-text-fontFamily);\n  line-height: var(--salt-text-notation-lineHeight);\n  background: var(--salt-accent-background);\n  color: var(--salt-content-bold-foreground);\n\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\n.saltBadge-topRight {\n  position: absolute;\n  right: var(--salt-spacing-100);\n  transform: translateX(100%) translateY(calc(-1 * (var(--badge-size) / 2)));\n}\n\n.saltBadge-dotBadge {\n  height: var(--salt-size-adornment);\n  min-width: var(--salt-size-adornment);\n  padding: 0;\n  --badge-size: var(--salt-size-adornment);\n}\n\n.saltBadge-dotBadge.saltBadge-topRight {\n  right: calc((var(--salt-size-adornment) / 2));\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=Badge.css.js.map

package/dist-cjs/collapsible/CollapsibleTrigger.js

@@ -13,7 +13,7 @@ var CollapsibleContext = require('./CollapsibleContext.js');
 
 const withBaseName = makePrefixer.makePrefixer("saltCollapsibleTrigger");
 const CollapsibleTrigger = React.forwardRef(function CollapsibleTrigger2(props, ref) {
-  const { children, className, onClick } = props;
+  const { children, className, onClick, ...rest } = props;
   const { open, setOpen, panelId } = CollapsibleContext.useCollapsibleContext();
   const handleClick = (event) => {
     setOpen(event, !open);
@@ -28,7 +28,8 @@ const CollapsibleTrigger = React.forwardRef(function CollapsibleTrigger2(props,
         className: clsx.clsx(withBaseName(), className),
         "aria-expanded": open,
         "aria-controls": panelId,
-        onClick: handleClick
+        onClick: handleClick,
+        ...rest
       },
       children.props
     ),

package/dist-cjs/collapsible/CollapsibleTrigger.js.map

@@ -1 +1 @@
-{"version":3,"file":"CollapsibleTrigger.js","sources":["../src/collapsible/CollapsibleTrigger.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  cloneElement,\n  forwardRef,\n  isValidElement,\n  type MouseEvent,\n  type ReactNode,\n  type Ref,\n} from \"react\";\nimport { makePrefixer, mergeProps } from \"../utils\";\nimport { useCollapsibleContext } from \"./CollapsibleContext\";\n\nexport interface CollapsibleTriggerProps\n  extends Pick<ComponentPropsWithoutRef<\"button\">, \"className\" | \"onClick\"> {\n  children: ReactNode;\n}\n\nconst withBaseName = makePrefixer(\"saltCollapsibleTrigger\");\n\nexport const CollapsibleTrigger = forwardRef<\n  HTMLButtonElement,\n  CollapsibleTriggerProps\n>(function CollapsibleTrigger(props, ref) {\n  const { children, className, onClick } = props;\n\n  const { open, setOpen, panelId } = useCollapsibleContext();\n\n  const handleClick = (event: MouseEvent<HTMLButtonElement>) => {\n    setOpen(event, !open);\n    onClick?.(event);\n  };\n\n  if (!children || !isValidElement<{ ref?: Ref<unknown> }>(children)) {\n    // Should we log or throw error?\n    return <>{children}</>;\n  }\n\n  return cloneElement(children, {\n    ...mergeProps(\n      {\n        className: clsx(withBaseName(), className),\n        \"aria-expanded\": open,\n        \"aria-controls\": panelId,\n        onClick: handleClick,\n      },\n      children.props,\n    ),\n    ref,\n  });\n});\n"],"names":["makePrefixer","forwardRef","CollapsibleTrigger","useCollapsibleContext","isValidElement","cloneElement","mergeProps","clsx"],"mappings":";;;;;;;;;;;;;AAkBA,MAAM,YAAA,GAAeA,0BAAa,wBAAwB,CAAA;AAEnD,MAAM,kBAAA,GAAqBC,gBAAA,CAGhC,SAASC,mBAAAA,CAAmB,OAAO,GAAA,EAAK;AACxC,EAAA,MAAM,EAAE,QAAA,EAAU,SAAA,EAAW,OAAA,EAAQ,GAAI,KAAA;AAEzC,EAAA,MAAM,EAAE,IAAA,EAAM,OAAA,EAAS,OAAA,KAAYC,wCAAA,EAAsB;AAEzD,EAAA,MAAM,WAAA,GAAc,CAAC,KAAA,KAAyC;AAC5D,IAAA,OAAA,CAAQ,KAAA,EAAO,CAAC,IAAI,CAAA;AACpB,IAAA,OAAA,IAAA,IAAA,GAAA,MAAA,GAAA,OAAA,CAAU,KAAA,CAAA;AAAA,EACZ,CAAA;AAEA,EAAA,IAAI,CAAC,QAAA,IAAY,CAACC,oBAAA,CAAuC,QAAQ,CAAA,EAAG;AAElE,IAAA,6DAAU,QAAA,EAAS,CAAA;AAAA,EACrB;AAEA,EAAA,OAAOC,mBAAa,QAAA,EAAU;AAAA,IAC5B,GAAGC,qBAAA;AAAA,MACD;AAAA,QACE,SAAA,EAAWC,SAAA,CAAK,YAAA,EAAa,EAAG,SAAS,CAAA;AAAA,QACzC,eAAA,EAAiB,IAAA;AAAA,QACjB,eAAA,EAAiB,OAAA;AAAA,QACjB,OAAA,EAAS;AAAA,OACX;AAAA,MACA,QAAA,CAAS;AAAA,KACX;AAAA,IACA;AAAA,GACD,CAAA;AACH,CAAC;;;;"}
+{"version":3,"file":"CollapsibleTrigger.js","sources":["../src/collapsible/CollapsibleTrigger.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  cloneElement,\n  forwardRef,\n  isValidElement,\n  type MouseEvent,\n  type ReactNode,\n  type Ref,\n} from \"react\";\nimport { makePrefixer, mergeProps } from \"../utils\";\nimport { useCollapsibleContext } from \"./CollapsibleContext\";\n\nexport interface CollapsibleTriggerProps\n  extends Pick<ComponentPropsWithoutRef<\"button\">, \"className\" | \"onClick\"> {\n  children: ReactNode;\n}\n\nconst withBaseName = makePrefixer(\"saltCollapsibleTrigger\");\n\nexport const CollapsibleTrigger = forwardRef<\n  HTMLButtonElement,\n  CollapsibleTriggerProps\n>(function CollapsibleTrigger(props, ref) {\n  const { children, className, onClick, ...rest } = props;\n\n  const { open, setOpen, panelId } = useCollapsibleContext();\n\n  const handleClick = (event: MouseEvent<HTMLButtonElement>) => {\n    setOpen(event, !open);\n    onClick?.(event);\n  };\n\n  if (!children || !isValidElement<{ ref?: Ref<unknown> }>(children)) {\n    // Should we log or throw error?\n    return <>{children}</>;\n  }\n\n  return cloneElement(children, {\n    ...mergeProps(\n      {\n        className: clsx(withBaseName(), className),\n        \"aria-expanded\": open,\n        \"aria-controls\": panelId,\n        onClick: handleClick,\n        ...rest,\n      },\n      children.props,\n    ),\n    ref,\n  });\n});\n"],"names":["makePrefixer","forwardRef","CollapsibleTrigger","useCollapsibleContext","isValidElement","cloneElement","mergeProps","clsx"],"mappings":";;;;;;;;;;;;;AAkBA,MAAM,YAAA,GAAeA,0BAAa,wBAAwB,CAAA;AAEnD,MAAM,kBAAA,GAAqBC,gBAAA,CAGhC,SAASC,mBAAAA,CAAmB,OAAO,GAAA,EAAK;AACxC,EAAA,MAAM,EAAE,QAAA,EAAU,SAAA,EAAW,OAAA,EAAS,GAAG,MAAK,GAAI,KAAA;AAElD,EAAA,MAAM,EAAE,IAAA,EAAM,OAAA,EAAS,OAAA,KAAYC,wCAAA,EAAsB;AAEzD,EAAA,MAAM,WAAA,GAAc,CAAC,KAAA,KAAyC;AAC5D,IAAA,OAAA,CAAQ,KAAA,EAAO,CAAC,IAAI,CAAA;AACpB,IAAA,OAAA,IAAA,IAAA,GAAA,MAAA,GAAA,OAAA,CAAU,KAAA,CAAA;AAAA,EACZ,CAAA;AAEA,EAAA,IAAI,CAAC,QAAA,IAAY,CAACC,oBAAA,CAAuC,QAAQ,CAAA,EAAG;AAElE,IAAA,6DAAU,QAAA,EAAS,CAAA;AAAA,EACrB;AAEA,EAAA,OAAOC,mBAAa,QAAA,EAAU;AAAA,IAC5B,GAAGC,qBAAA;AAAA,MACD;AAAA,QACE,SAAA,EAAWC,SAAA,CAAK,YAAA,EAAa,EAAG,SAAS,CAAA;AAAA,QACzC,eAAA,EAAiB,IAAA;AAAA,QACjB,eAAA,EAAiB,OAAA;AAAA,QACjB,OAAA,EAAS,WAAA;AAAA,QACT,GAAG;AAAA,OACL;AAAA,MACA,QAAA,CAAS;AAAA,KACX;AAAA,IACA;AAAA,GACD,CAAA;AACH,CAAC;;;;"}

package/dist-cjs/combo-box/ComboBox.js

@@ -13,6 +13,7 @@ var OptionList = require('../option/OptionList.js');
 var PillInput = require('../pill-input/PillInput.js');
 var SemanticIconProvider = require('../semantic-icon-provider/SemanticIconProvider.js');
 var makePrefixer = require('../utils/makePrefixer.js');
+var useIsomorphicLayoutEffect = require('../utils/useIsomorphicLayoutEffect.js');
 var useFloatingUI = require('../utils/useFloatingUI/useFloatingUI.js');
 var useForkRef = require('../utils/useForkRef.js');
 var useId = require('../utils/useId.js');
@@ -280,7 +281,7 @@ const ComboBox = React.forwardRef(function ComboBox2(props, ref) {
     var _a2;
     (_a2 = inputRef.current) == null ? void 0 : _a2.focus();
   };
-  React.useLayoutEffect(() => {
+  useIsomorphicLayoutEffect.useIsomorphicLayoutEffect(() => {
     if (value) {
       shouldAutoSelectRef.current = true;
     }