@salt-ds/core 1.58.0 → 1.59.0

package/CHANGELOG.md

@@ -1,5 +1,51 @@
 # @salt-ds/core
 
+## 1.59.0
+
+### Minor Changes
+
+- 5c36edc: Added `Toggletip`.
+
+  `Toggletip` shows a user supplementary information on click.
+
+  ```tsx
+  <Toggletip>
+    <ToggletipTrigger aria-label="More info about locked content">
+      <HelpCircleIcon aria-hidden />
+    </ToggletipTrigger>
+    <ToggletipPanel>
+      <Text>
+        This setting is managed at a project level. Contact your administrator
+        for assistance.
+      </Text>
+    </ToggletipPanel>
+  </Toggletip>
+  ```
+
+### Patch Changes
+
+- cfc1591: Simplify disabled styling across the system. This affected the following components:
+
+  ## Core
+
+  - Checkbox
+  - Combo box
+  - Dropdown
+  - List box
+  - Radio button
+  - Slider
+  - Switch
+
+  ## Lab
+
+  - Tree
+
+- 89429e2: Updated accent token usage, to align to the recent theme change.
+- 0a08ae0: Fixed `SaltProvider` and `SaltProviderNext` not applying inherited themes.
+- 5c36edc: Update Overlay and Tooltip arrow sizes.
+- Updated dependencies [49b3486]
+  - @salt-ds/icons@1.18.0
+
 ## 1.58.0
 
 ### Minor Changes

package/css/salt-core.css

@@ -143,7 +143,7 @@
   user-select: none;
 }
 .saltAvatar-accent {
-  --avatar-background: var(--salt-accent-background);
+  --avatar-background: var(--salt-sentiment-accent-background);
 }
 .saltAvatar-category-1 {
   --avatar-background: var(--salt-category-1-bold-background);
@@ -240,7 +240,7 @@
   font-weight: var(--salt-text-notation-fontWeight);
   font-family: var(--salt-text-fontFamily);
   line-height: var(--salt-text-notation-lineHeight);
-  background: var(--salt-accent-background);
+  background: var(--salt-sentiment-accent-background);
   color: var(--salt-content-bold-foreground);
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
@@ -666,7 +666,7 @@
   box-sizing: border-box;
   border-radius: var(--saltCard-borderRadius, var(--salt-palette-corner, 0));
   overflow: hidden;
-  --card-accent-color: var(--salt-accent-background);
+  --card-accent-color: var(--salt-sentiment-accent-background);
 }
 .saltCard-primary {
   background: var(--saltCard-background, var(--salt-container-primary-background));
@@ -766,8 +766,9 @@ a:focus .saltCard-interactable.saltCard-disabled {
   font-weight: var(--salt-text-fontWeight);
 }
 .saltCheckbox-disabled {
-  color: var(--salt-content-primary-foreground-disabled);
+  color: var(--salt-content-primary-foreground);
   cursor: var(--salt-cursor-disabled);
+  opacity: 0.4;
 }
 .saltCheckbox-readOnly {
   color: var(--salt-content-primary-foreground);
@@ -870,14 +871,15 @@ a:focus .saltCard-interactable.saltCard-disabled {
 .saltCheckbox:hover .saltCheckboxIcon-disabled,
 .saltCheckboxIcon-disabled.saltCheckboxIcon-indeterminate,
 .saltCheckbox:hover .saltCheckboxIcon-disabled.saltCheckboxIcon-indeterminate {
-  border-color: var(--salt-selectable-borderColor-disabled);
-  background: var(--salt-container-primary-background-disabled);
-  color: var(--salt-selectable-foreground-disabled);
+  opacity: 0.4;
+  border-color: var(--salt-selectable-borderColor);
+  background: var(--salt-container-primary-background);
+  color: var(--salt-selectable-foreground);
 }
 .saltCheckboxIcon-checked.saltCheckboxIcon-disabled,
 .saltCheckbox:hover .saltCheckboxIcon-checked.saltCheckboxIcon-disabled {
-  border-color: var(--salt-selectable-borderColor-selectedDisabled);
-  color: var(--salt-selectable-foreground-selectedDisabled);
+  border-color: var(--salt-selectable-borderColor-selected);
+  color: var(--salt-selectable-foreground-selected);
 }
 .saltCheckboxIcon-indeterminate::before {
   content: "";
@@ -1126,7 +1128,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
   left: 0;
   bottom: var(--salt-spacing-300);
   width: var(--salt-size-bar);
-  background: var(--salt-accent-background);
+  background: var(--salt-sentiment-accent-background);
 }
 
 /* src/divider/Divider.css */
@@ -1882,7 +1884,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
   text-align: start;
   transition: box-shadow var(--salt-duration-instant) ease-in-out;
   overflow: hidden;
-  --card-accent-color: var(--salt-accent-background);
+  --card-accent-color: var(--salt-sentiment-accent-background);
 }
 .saltInteractableCard-primary {
   background: var(--saltInteractableCard-background, var(--salt-container-primary-background));
@@ -1959,7 +1961,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
   color: var(--salt-content-primary-foreground-disabled);
   cursor: var(--salt-cursor-disabled);
   outline: none;
-  --card-accent-color: var(--salt-accent-background-disabled);
+  --card-accent-color: var(--salt-sentiment-accent-background-disabled);
 }
 .saltInteractableCard-primary.saltInteractableCard-disabled,
 .saltInteractableCard-primary.saltInteractableCard-disabled:focus,
@@ -2124,7 +2126,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
   position: relative;
   text-decoration: none;
   transition: box-shadow var(--salt-duration-instant) ease-in-out;
-  --linkCard-accent-color: var(--salt-accent-background);
+  --linkCard-accent-color: var(--salt-sentiment-accent-background);
 }
 .saltLinkCard-primary {
   background: var(--saltLinkCard-background, var(--salt-container-primary-background));
@@ -2891,6 +2893,12 @@ a:focus .saltCard-interactable.saltCard-disabled {
 .saltOption:hover {
   background: var(--salt-selectable-background-hover);
 }
+.saltOption[aria-disabled=true] {
+  color: var(--salt-content-primary-foreground);
+  background: var(--salt-selectable-background);
+  opacity: 0.4;
+  cursor: var(--salt-cursor-disabled);
+}
 .saltOption[aria-selected=true] {
   z-index: var(--salt-zIndex-default);
   background: var(--salt-selectable-background-selected);
@@ -2899,10 +2907,6 @@ a:focus .saltCard-interactable.saltCard-disabled {
     calc(var(--salt-size-fixed-100) * -1) 0 0 var(--salt-size-fixed-100) var(--salt-selectable-borderColor-selected),
     0 calc(var(--salt-size-fixed-100) * -1) 0 var(--salt-selectable-borderColor-selected);
 }
-.saltOption[aria-disabled=true] {
-  color: var(--salt-content-primary-foreground-disabled);
-  cursor: var(--salt-cursor-disabled);
-}
 .saltOption .saltIcon:not(.saltCheckboxIcon-icon) {
   min-height: var(--salt-text-lineHeight);
 }
@@ -3547,8 +3551,9 @@ a:focus .saltCard-interactable.saltCard-disabled {
   --radioButton-icon-margin: calc((var(--salt-text-lineHeight) - var(--salt-size-selectable)) / 2);
 }
 .saltRadioButton-disabled {
-  color: var(--salt-content-primary-foreground-disabled);
+  color: var(--salt-content-primary-foreground);
   cursor: var(--salt-cursor-disabled);
+  opacity: 0.4;
 }
 .saltRadioButton-readOnly {
   color: var(--salt-content-primary-foreground);
@@ -3646,14 +3651,15 @@ a:focus .saltCard-interactable.saltCard-disabled {
 }
 .saltRadioButtonIcon-disabled,
 .saltRadioButton:hover .saltRadioButtonIcon-disabled {
-  border-color: var(--salt-selectable-borderColor-disabled);
-  background: var(--salt-container-primary-background-disabled);
-  color: var(--salt-selectable-foreground-disabled);
+  opacity: 0.4;
+  border-color: var(--salt-selectable-borderColor);
+  background: var(--salt-container-primary-background);
+  color: var(--salt-selectable-foreground);
 }
 .saltRadioButtonIcon-checked.saltRadioButtonIcon-disabled,
 .saltRadioButton:hover .saltRadioButtonIcon-checked.saltRadioButtonIcon-disabled {
-  border-color: var(--salt-selectable-borderColor-selectedDisabled);
-  color: var(--salt-selectable-foreground-selectedDisabled);
+  border-color: var(--salt-selectable-borderColor-selected);
+  color: var(--salt-selectable-foreground-selected);
 }
 .saltRadioButtonIcon-error,
 .saltRadioButton:hover .saltRadioButtonIcon-error {
@@ -3795,7 +3801,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
   position: relative;
 }
 .saltSpinner-gradientStop {
-  stop-color: var(--saltSpinner-gradient-color, var(--salt-accent-background));
+  stop-color: var(--saltSpinner-gradient-color, var(--salt-sentiment-accent-background));
 }
 .saltSpinner-medium {
   --spinner-strokeWidth: var(--salt-size-bar);
@@ -4000,8 +4006,9 @@ a:focus .saltCard-interactable.saltCard-disabled {
   line-height: var(--salt-text-lineHeight);
 }
 .saltSwitch-disabled {
-  color: var(--salt-content-primary-foreground-disabled);
+  color: var(--salt-content-primary-foreground);
   cursor: var(--salt-cursor-disabled);
+  opacity: 0.4;
 }
 .saltSwitch-track {
   border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-selectable-borderColor);
@@ -4036,14 +4043,14 @@ a:focus .saltCard-interactable.saltCard-disabled {
 }
 .saltSwitch-disabled .saltSwitch-track,
 .saltSwitch-disabled:hover .saltSwitch-track {
-  border-color: var(--salt-selectable-borderColor-disabled);
-  color: var(--salt-selectable-foreground-disabled);
-  background: var(--salt-container-primary-background-disabled);
+  border-color: var(--salt-selectable-borderColor);
+  color: var(--salt-selectable-foreground);
+  background: var(--salt-container-primary-background);
 }
 .saltSwitch-checked.saltSwitch-disabled .saltSwitch-track,
 .saltSwitch-checked.saltSwitch-disabled:hover .saltSwitch-track {
-  border-color: var(--salt-selectable-borderColor-selectedDisabled);
-  color: var(--salt-selectable-foreground-selectedDisabled);
+  border-color: var(--salt-selectable-borderColor-selected);
+  color: var(--salt-selectable-foreground-selected);
 }
 .saltSwitch-thumb {
   display: flex;
@@ -5015,6 +5022,68 @@ label.saltText small,
   justify-content: start;
 }
 
+/* src/toggletip/ToggletipPanel.css */
+.saltToggletipPanel {
+  --toggletip-background: var(--salt-container-primary-background);
+  --toggletip-borderColor: var(--salt-container-primary-borderColor);
+  box-sizing: border-box;
+  padding: var(--salt-spacing-100);
+  font-family: var(--salt-text-fontFamily);
+  font-size: var(--salt-text-fontSize);
+  font-weight: var(--salt-text-fontWeight);
+  line-height: var(--salt-text-lineHeight);
+  border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--toggletip-borderColor);
+  border-radius: var(--salt-palette-corner-weak);
+  background: var(--toggletip-background);
+  box-shadow: var(--salt-overlayable-shadow-popout);
+  color: var(--salt-content-primary-foreground);
+  z-index: var(--salt-zIndex-flyover);
+  max-width: 45ch;
+  max-height: 100vh;
+}
+.saltToggletipPanel-content {
+  max-height: 100%;
+  overflow-y: auto;
+}
+.saltToggletipPanel-content:focus-visible {
+  outline-offset: var(--salt-spacing-fixed-100);
+}
+
+/* src/toggletip/ToggletipTrigger.css */
+.saltToggletipTrigger {
+  box-sizing: border-box;
+  align-items: center;
+  appearance: none;
+  display: inline-flex;
+  gap: var(--salt-spacing-50);
+  justify-content: center;
+  font-size: var(--salt-text-fontSize);
+  font-family: var(--salt-text-fontFamily);
+  font-weight: var(--salt-text-fontWeight);
+  line-height: var(--salt-text-lineHeight);
+  letter-spacing: var(--salt-text-letterSpacing);
+  padding: 0;
+  margin: 0;
+  min-height: var(--salt-size-icon);
+  min-width: var(--salt-size-icon);
+  position: relative;
+  text-align: var(--salt-text-action-textAlign);
+  text-decoration: none;
+  transition: none;
+  width: auto;
+  -webkit-appearance: none;
+  -webkit-tap-highlight-color: transparent;
+  color: var(--salt-content-primary-foreground);
+  background: transparent;
+  border: none;
+  cursor: var(--salt-cursor-hover);
+  flex: 0;
+}
+.saltToggletipTrigger:focus-visible {
+  outline: var(--salt-focused-outline);
+  outline-offset: var(--salt-size-fixed-100);
+}
+
 /* src/tooltip/Tooltip.css */
 .saltTooltip {
   --tooltip-background: var(--saltTooltip-background, var(--salt-container-primary-background));
@@ -5258,13 +5327,13 @@ label.saltText small,
   box-sizing: border-box;
 }
 .saltCircularProgress-bar {
-  border-color: var(--salt-accent-background);
+  border-color: var(--salt-sentiment-accent-background);
   border-style: var(--salt-borderStyle-solid);
   border-width: var(--salt-size-bar-strong);
 }
 .saltCircularProgress-bufferBorder {
-  border: solid var(--salt-size-fixed-100) var(--salt-accent-background);
-  outline: solid var(--salt-size-fixed-100) var(--salt-accent-background);
+  border: solid var(--salt-size-fixed-100) var(--salt-sentiment-accent-background);
+  outline: solid var(--salt-size-fixed-100) var(--salt-sentiment-accent-background);
   outline-offset: calc(var(--salt-size-bar-strong) * -1);
 }
 .saltCircularProgress-bufferBackground {
@@ -5314,7 +5383,7 @@ label.saltText small,
 .saltCircularProgress-bufferOverlayRight:before,
 .saltCircularProgress-bufferSubOverlay:before {
   content: "";
-  background: var(--salt-accent-background);
+  background: var(--salt-sentiment-accent-background);
   position: absolute;
   right: 0;
   width: var(--salt-size-fixed-100);
@@ -5353,13 +5422,13 @@ label.saltText small,
 .saltLinearProgress-buffer {
   width: 0;
   background: var(--salt-container-primary-background);
-  outline: solid var(--salt-size-fixed-100) var(--salt-accent-background);
+  outline: solid var(--salt-size-fixed-100) var(--salt-sentiment-accent-background);
   z-index: var(--salt-zIndex-default);
   outline-offset: calc(var(--salt-size-fixed-100) * -1);
 }
 .saltLinearProgress-bar {
   width: 100%;
-  background: var(--salt-accent-background);
+  background: var(--salt-sentiment-accent-background);
   z-index: calc(var(--salt-zIndex-default) * 2);
 }
 .saltLinearProgress-track {
@@ -5402,7 +5471,7 @@ label.saltText small,
 /* src/slider/internal/SliderThumb.css */
 .saltSliderThumb {
   align-items: center;
-  background: var(--salt-accent-borderColor);
+  background: var(--salt-sentiment-accent-borderColor);
   cursor: var(--salt-cursor-grab);
   display: flex;
   height: var(--salt-size-selectable);
@@ -5414,7 +5483,6 @@ label.saltText small,
   touch-action: none;
 }
 .saltSliderThumb-disabled {
-  background: var(--salt-accent-borderColor-disabled);
   cursor: var(--salt-cursor-disabled);
   pointer-events: none;
 }
@@ -5500,7 +5568,7 @@ label.saltText small,
 /* src/slider/internal/SliderTrack.css */
 .saltSliderTrack {
   --slider-track-background: var(--salt-sentiment-neutral-track);
-  --slider-track-fill: var(--salt-accent-borderColor);
+  --slider-track-fill: var(--salt-sentiment-accent-borderColor);
   --slider-progressPercentage: 0%;
   --slider-tick-height: calc((var(--salt-size-selectable) - var(--salt-size-bar)) / 2);
   --slider-progressPercentageStart: 0%;
@@ -5513,7 +5581,7 @@ label.saltText small,
   margin-bottom: calc(var(--salt-size-base) / 2);
 }
 .saltSliderTrack-disabled {
-  cursor: var(--salt-cursor-disabled);
+  opacity: 0.4;
 }
 .saltSliderTrack-container {
   align-items: center;
@@ -5555,7 +5623,7 @@ label.saltText small,
   background: var(--slider-track-fill);
   border-top-left-radius: var(--salt-palette-corner-weaker);
   border-bottom-left-radius: var(--salt-palette-corner-weaker);
-  width: calc(var(--slider-progressPercentage) - var(--salt-size-fixed-300));
+  width: calc(var(--slider-progressPercentage) - var(--salt-spacing-fixed-300));
 }
 .saltSliderTrack-hasMinTick.saltSliderTrack-rail::before {
   border-bottom-left-radius: unset;
@@ -5564,23 +5632,23 @@ label.saltText small,
   background: var(--slider-track-background);
   border-top-right-radius: var(--salt-palette-corner-weaker);
   border-bottom-right-radius: var(--salt-palette-corner-weaker);
-  width: calc(100% - var(--slider-progressPercentage) - var(--salt-size-fixed-300));
+  width: calc(100% - var(--slider-progressPercentage) - var(--salt-spacing-fixed-300));
 }
 .saltSliderTrack-hasMaxTick.saltSliderTrack-rail::after {
   border-bottom-right-radius: unset;
 }
 .saltSliderTrack-range .saltSliderTrack-rail::before {
   background: var(--slider-track-background);
-  width: calc(var(--slider-progressPercentageStart) - var(--salt-size-fixed-300));
+  width: calc(var(--slider-progressPercentageStart) - var(--salt-spacing-fixed-300));
 }
 .saltSliderTrack-range .saltSliderTrack-rail::after {
   background: var(--slider-track-background);
-  width: calc(100% - var(--slider-progressPercentageEnd) - var(--salt-size-fixed-300));
+  width: calc(100% - var(--slider-progressPercentageEnd) - var(--salt-spacing-fixed-300));
 }
 .saltSliderTrack-range .saltSliderTrack-rail .saltSliderTrack-fill {
   background: var(--slider-track-fill);
   height: 100%;
-  left: calc(var(--slider-progressPercentageStart) + var(--salt-size-fixed-300));
+  left: calc(var(--slider-progressPercentageStart) + var(--salt-spacing-fixed-300));
   position: absolute;
   width: calc(var(--slider-progressPercentageEnd) - var(--slider-progressPercentageStart) - var(--salt-size-fixed-600));
 }
@@ -5592,10 +5660,6 @@ label.saltText small,
 .saltSliderTrack-dragging .saltSliderTrack-wrapper {
   cursor: var(--salt-cursor-grab-active);
 }
-.saltSliderTrack-disabled {
-  --slider-track-fill: var(--salt-accent-borderColor-disabled);
-  --slider-track-background: var(--salt-sentiment-neutral-track-disabled);
-}
 .saltSliderTrack-ticks {
   top: calc(var(--salt-size-bar) + var(--slider-tick-height));
   position: absolute;
@@ -5774,4 +5838,4 @@ label.saltText small,
   color: var(--salt-status-error-foreground-informative);
 }
 
-/* src/244337bf-6a40-49c5-ab4b-8e10a53e69fd.css */
+/* src/42eb285a-fd2e-42e6-a081-05b7d4d76cc3.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(--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";
+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-sentiment-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-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";
+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-sentiment-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/card/Card.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = "/* Styles applied to the root element */\n.saltCard {\n  border-width: var(--saltCard-borderWidth, var(--salt-size-fixed-100));\n  border-style: var(--salt-borderStyle-solid);\n  padding: var(--saltCard-padding, var(--salt-spacing-200));\n  position: relative;\n  box-shadow: var(--salt-overlayable-shadow);\n  transition: box-shadow var(--salt-duration-instant) ease-in-out;\n  box-sizing: border-box;\n  border-radius: var(--saltCard-borderRadius, var(--salt-palette-corner, 0));\n  overflow: hidden;\n  --card-accent-color: var(--salt-accent-background);\n}\n\n.saltCard-primary {\n  background: var(--saltCard-background, var(--salt-container-primary-background));\n  border-color: var(--salt-container-primary-borderColor);\n}\n\n.saltCard-secondary {\n  background: var(--saltCard-background, var(--salt-container-secondary-background));\n  border-color: var(--salt-container-secondary-borderColor);\n}\n\n.saltCard-tertiary {\n  background: var(--saltCard-background, var(--salt-container-tertiary-background));\n  border-color: var(--salt-container-tertiary-borderColor);\n}\n\n.saltCard-ghost {\n  background: var(--saltCard-background, var(--salt-container-ghost-background));\n  border-color: var(--salt-container-ghost-borderColor);\n}\n\n/* Styles applied to create accent */\n.saltCard-accent::after {\n  content: \"\";\n  position: absolute;\n  background-color: var(--saltCard-accent-color, var(--card-accent-color));\n}\n\n/* Styles applied to Card if `accent=\"bottom\"` (default) */\n.saltCard-accentBottom::after {\n  left: calc(-1 * var(--salt-size-fixed-100));\n  bottom: calc(-1 * var(--salt-size-fixed-100));\n  height: var(--salt-size-bar);\n  width: calc(100% + var(--salt-size-fixed-200));\n}\n\n/* Styles applied to Card if `accent=\"left\"` */\n.saltCard-accentLeft::after {\n  left: calc(-1 * var(--salt-size-fixed-100));\n  top: calc(-1 * var(--salt-size-fixed-100));\n  height: calc(100% + var(--salt-size-fixed-200));\n  width: var(--salt-size-bar);\n}\n\n/* Styles applied to Card if `accent=\"top\"` */\n.saltCard-accentTop::after {\n  left: calc(-1 * var(--salt-size-fixed-100));\n  top: calc(-1 * var(--salt-size-fixed-100));\n  height: var(--salt-size-bar);\n  width: calc(100% + var(--salt-size-fixed-200));\n}\n\n/* Styles applied to Card if `accent=\"right\"` */\n.saltCard-accentRight::after {\n  right: calc(-1 * var(--salt-size-fixed-100));\n  top: calc(-1 * var(--salt-size-fixed-100));\n  height: calc(100% + var(--salt-size-fixed-200));\n  width: var(--salt-size-bar);\n}\n\n/*\n * **Deprecated:** The following styles are deprecated\n *  Use Interactable Card component instead\n *  for interactable styling\n */\n\n/* **Deprecated:** Styles applied if `interactable={true}` */\n.saltCard-interactable {\n  display: block;\n  transition: none;\n}\n\n/* **Deprecated:** Styles applied on hover if `interactable={true}` */\na:focus .saltCard-interactable,\n.saltCard-interactable:hover {\n  box-shadow: var(--saltCard-boxShadow-hover, var(--salt-overlayable-shadow-hover));\n  cursor: var(--saltCard-cursor-hover, var(--salt-cursor-hover));\n  border-color: var(--salt-actionable-accented-borderColor-hover);\n  position: relative;\n}\n\n/* Styles applied if `hoverable` is set */\n@media (hover: hover) {\n  .saltCard-hoverable:hover {\n    box-shadow: var(--saltCard-boxShadow-hover, var(--salt-overlayable-shadow-hover));\n    border-color: var(--salt-actionable-accented-borderColor-hover);\n  }\n}\n\n/* **Deprecated:** Styles applied on active state if `interactable={true}` */\n.saltCard-interactable:active {\n  border-color: var(--salt-actionable-accented-borderColor-active);\n  box-shadow: var(--saltCard-boxShadow-active, var(--salt-overlayable-shadow-hover));\n  outline: var(--salt-focused-outline);\n  outline-offset: var(--salt-focused-outlineOffset);\n}\n\n/* **Deprecated:** Styles applied on hover if `interactable={true}` and `disabled={true}` */\na:focus .saltCard-interactable.saltCard-disabled,\n.saltCard-interactable.saltCard-disabled:hover,\n.saltCard-interactable.saltCard-disabled:active {\n  box-shadow: var(--saltCard-boxShadow-disabled, var(--salt-overlayable-shadow));\n}\n\n/* **Deprecated:** Styles applied if `disabled={true}` */\n.saltCard-disabled,\n.saltCard-disabled.saltCard-interactable,\na:focus .saltCard-interactable.saltCard-disabled {\n  border-color: var(--salt-container-primary-borderColor-disabled);\n  color: var(--saltCard-color-disabled, var(--salt-content-primary-foreground-disabled));\n  cursor: var(--saltCard-cursor-disabled, var(--salt-cursor-disabled));\n  outline: none;\n}\n\n/* **Deprecated:** Styles applied to nested divs if `disabled={true}` */\n.saltCard-disabled div {\n  pointer-events: none;\n}\n";
+var css_248z = "/* Styles applied to the root element */\n.saltCard {\n  border-width: var(--saltCard-borderWidth, var(--salt-size-fixed-100));\n  border-style: var(--salt-borderStyle-solid);\n  padding: var(--saltCard-padding, var(--salt-spacing-200));\n  position: relative;\n  box-shadow: var(--salt-overlayable-shadow);\n  transition: box-shadow var(--salt-duration-instant) ease-in-out;\n  box-sizing: border-box;\n  border-radius: var(--saltCard-borderRadius, var(--salt-palette-corner, 0));\n  overflow: hidden;\n  --card-accent-color: var(--salt-sentiment-accent-background);\n}\n\n.saltCard-primary {\n  background: var(--saltCard-background, var(--salt-container-primary-background));\n  border-color: var(--salt-container-primary-borderColor);\n}\n\n.saltCard-secondary {\n  background: var(--saltCard-background, var(--salt-container-secondary-background));\n  border-color: var(--salt-container-secondary-borderColor);\n}\n\n.saltCard-tertiary {\n  background: var(--saltCard-background, var(--salt-container-tertiary-background));\n  border-color: var(--salt-container-tertiary-borderColor);\n}\n\n.saltCard-ghost {\n  background: var(--saltCard-background, var(--salt-container-ghost-background));\n  border-color: var(--salt-container-ghost-borderColor);\n}\n\n/* Styles applied to create accent */\n.saltCard-accent::after {\n  content: \"\";\n  position: absolute;\n  background-color: var(--saltCard-accent-color, var(--card-accent-color));\n}\n\n/* Styles applied to Card if `accent=\"bottom\"` (default) */\n.saltCard-accentBottom::after {\n  left: calc(-1 * var(--salt-size-fixed-100));\n  bottom: calc(-1 * var(--salt-size-fixed-100));\n  height: var(--salt-size-bar);\n  width: calc(100% + var(--salt-size-fixed-200));\n}\n\n/* Styles applied to Card if `accent=\"left\"` */\n.saltCard-accentLeft::after {\n  left: calc(-1 * var(--salt-size-fixed-100));\n  top: calc(-1 * var(--salt-size-fixed-100));\n  height: calc(100% + var(--salt-size-fixed-200));\n  width: var(--salt-size-bar);\n}\n\n/* Styles applied to Card if `accent=\"top\"` */\n.saltCard-accentTop::after {\n  left: calc(-1 * var(--salt-size-fixed-100));\n  top: calc(-1 * var(--salt-size-fixed-100));\n  height: var(--salt-size-bar);\n  width: calc(100% + var(--salt-size-fixed-200));\n}\n\n/* Styles applied to Card if `accent=\"right\"` */\n.saltCard-accentRight::after {\n  right: calc(-1 * var(--salt-size-fixed-100));\n  top: calc(-1 * var(--salt-size-fixed-100));\n  height: calc(100% + var(--salt-size-fixed-200));\n  width: var(--salt-size-bar);\n}\n\n/*\n * **Deprecated:** The following styles are deprecated\n *  Use Interactable Card component instead\n *  for interactable styling\n */\n\n/* **Deprecated:** Styles applied if `interactable={true}` */\n.saltCard-interactable {\n  display: block;\n  transition: none;\n}\n\n/* **Deprecated:** Styles applied on hover if `interactable={true}` */\na:focus .saltCard-interactable,\n.saltCard-interactable:hover {\n  box-shadow: var(--saltCard-boxShadow-hover, var(--salt-overlayable-shadow-hover));\n  cursor: var(--saltCard-cursor-hover, var(--salt-cursor-hover));\n  border-color: var(--salt-actionable-accented-borderColor-hover);\n  position: relative;\n}\n\n/* Styles applied if `hoverable` is set */\n@media (hover: hover) {\n  .saltCard-hoverable:hover {\n    box-shadow: var(--saltCard-boxShadow-hover, var(--salt-overlayable-shadow-hover));\n    border-color: var(--salt-actionable-accented-borderColor-hover);\n  }\n}\n\n/* **Deprecated:** Styles applied on active state if `interactable={true}` */\n.saltCard-interactable:active {\n  border-color: var(--salt-actionable-accented-borderColor-active);\n  box-shadow: var(--saltCard-boxShadow-active, var(--salt-overlayable-shadow-hover));\n  outline: var(--salt-focused-outline);\n  outline-offset: var(--salt-focused-outlineOffset);\n}\n\n/* **Deprecated:** Styles applied on hover if `interactable={true}` and `disabled={true}` */\na:focus .saltCard-interactable.saltCard-disabled,\n.saltCard-interactable.saltCard-disabled:hover,\n.saltCard-interactable.saltCard-disabled:active {\n  box-shadow: var(--saltCard-boxShadow-disabled, var(--salt-overlayable-shadow));\n}\n\n/* **Deprecated:** Styles applied if `disabled={true}` */\n.saltCard-disabled,\n.saltCard-disabled.saltCard-interactable,\na:focus .saltCard-interactable.saltCard-disabled {\n  border-color: var(--salt-container-primary-borderColor-disabled);\n  color: var(--saltCard-color-disabled, var(--salt-content-primary-foreground-disabled));\n  cursor: var(--saltCard-cursor-disabled, var(--salt-cursor-disabled));\n  outline: none;\n}\n\n/* **Deprecated:** Styles applied to nested divs if `disabled={true}` */\n.saltCard-disabled div {\n  pointer-events: none;\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=Card.css.js.map

package/dist-cjs/checkbox/Checkbox.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = "/* Styles applied to root component */\n.saltCheckbox {\n  display: inline-flex;\n  width: fit-content;\n  gap: var(--salt-spacing-100);\n  position: relative;\n  cursor: var(--salt-cursor-hover);\n\n  font-size: var(--salt-text-fontSize);\n  line-height: var(--salt-text-lineHeight);\n  font-family: var(--salt-text-fontFamily);\n  font-weight: var(--salt-text-fontWeight);\n}\n\n/* Styles applied to root component if `disabled={true}` */\n.saltCheckbox-disabled {\n  color: var(--salt-content-primary-foreground-disabled);\n  cursor: var(--salt-cursor-disabled);\n}\n\n/* Styles applied to root component if `readOnly={true}` */\n.saltCheckbox-readOnly {\n  color: var(--salt-content-primary-foreground);\n  cursor: var(--salt-cursor-readonly);\n}\n\n.saltCheckbox-input,\n.saltCheckboxIcon {\n  margin: calc((var(--salt-text-lineHeight) - var(--salt-size-selectable)) / 2) 0;\n  box-sizing: border-box;\n}\n\n/* Styles applied to the icon component if focused */\n.saltCheckbox-input:focus-visible + .saltCheckboxIcon {\n  outline-offset: var(--salt-spacing-fixed-100);\n  outline: var(--saltCheckbox-outline, var(--salt-focused-outline));\n  border-color: var(--salt-selectable-borderColor-hover);\n  color: var(--salt-selectable-foreground-hover);\n  clip-path: unset;\n}\n\n.saltCheckbox-input:focus-visible + .saltCheckboxIcon-checked {\n  border-color: var(--salt-selectable-borderColor-selected);\n  color: var(--salt-selectable-foreground-selected);\n}\n\n.saltCheckbox-error .saltCheckbox-input:focus-visible + .saltCheckboxIcon {\n  outline-color: var(--salt-status-error-foreground-decorative);\n  border-color: var(--salt-status-error-borderColor);\n  color: var(--salt-status-error-foreground-decorative);\n}\n\n.saltCheckbox-warning .saltCheckbox-input:focus-visible + .saltCheckboxIcon {\n  outline-color: var(--salt-status-warning-foreground-decorative);\n  border-color: var(--salt-status-warning-borderColor);\n  color: var(--salt-status-warning-foreground-decorative);\n}\n\n/* Styles applied to input element */\n.saltCheckbox-input {\n  cursor: inherit;\n  opacity: 0;\n  padding: 0;\n  position: absolute;\n  z-index: var(--salt-zIndex-default);\n}\n";
+var css_248z = "/* Styles applied to root component */\n.saltCheckbox {\n  display: inline-flex;\n  width: fit-content;\n  gap: var(--salt-spacing-100);\n  position: relative;\n  cursor: var(--salt-cursor-hover);\n\n  font-size: var(--salt-text-fontSize);\n  line-height: var(--salt-text-lineHeight);\n  font-family: var(--salt-text-fontFamily);\n  font-weight: var(--salt-text-fontWeight);\n}\n\n/* Styles applied to root component if `disabled={true}` */\n.saltCheckbox-disabled {\n  color: var(--salt-content-primary-foreground);\n\n  cursor: var(--salt-cursor-disabled);\n  opacity: 0.4;\n}\n\n/* Styles applied to root component if `readOnly={true}` */\n.saltCheckbox-readOnly {\n  color: var(--salt-content-primary-foreground);\n  cursor: var(--salt-cursor-readonly);\n}\n\n.saltCheckbox-input,\n.saltCheckboxIcon {\n  margin: calc((var(--salt-text-lineHeight) - var(--salt-size-selectable)) / 2) 0;\n  box-sizing: border-box;\n}\n\n/* Styles applied to the icon component if focused */\n.saltCheckbox-input:focus-visible + .saltCheckboxIcon {\n  outline-offset: var(--salt-spacing-fixed-100);\n  outline: var(--saltCheckbox-outline, var(--salt-focused-outline));\n  border-color: var(--salt-selectable-borderColor-hover);\n  color: var(--salt-selectable-foreground-hover);\n  clip-path: unset;\n}\n\n.saltCheckbox-input:focus-visible + .saltCheckboxIcon-checked {\n  border-color: var(--salt-selectable-borderColor-selected);\n  color: var(--salt-selectable-foreground-selected);\n}\n\n.saltCheckbox-error .saltCheckbox-input:focus-visible + .saltCheckboxIcon {\n  outline-color: var(--salt-status-error-foreground-decorative);\n  border-color: var(--salt-status-error-borderColor);\n  color: var(--salt-status-error-foreground-decorative);\n}\n\n.saltCheckbox-warning .saltCheckbox-input:focus-visible + .saltCheckboxIcon {\n  outline-color: var(--salt-status-warning-foreground-decorative);\n  border-color: var(--salt-status-warning-borderColor);\n  color: var(--salt-status-warning-foreground-decorative);\n}\n\n/* Styles applied to input element */\n.saltCheckbox-input {\n  cursor: inherit;\n  opacity: 0;\n  padding: 0;\n  position: absolute;\n  z-index: var(--salt-zIndex-default);\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=Checkbox.css.js.map

package/dist-cjs/checkbox/Checkbox.js

@@ -136,7 +136,6 @@ const Checkbox = React.forwardRef(
             CheckboxIcon.CheckboxIcon,
             {
               checked,
-              disabled,
               readOnly,
               indeterminate,
               validationStatus,

package/dist-cjs/checkbox/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","sources":["../src/checkbox/Checkbox.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ChangeEventHandler,\n  type FocusEventHandler,\n  forwardRef,\n  type InputHTMLAttributes,\n  type ReactNode,\n  type Ref,\n  useRef,\n} from \"react\";\nimport { useFormFieldProps } from \"../form-field-context\";\nimport type { AdornmentValidationStatus } from \"../status-adornment\";\nimport type { DataAttributes } from \"../types\";\nimport {\n  makePrefixer,\n  useControlled,\n  useForkRef,\n  useIsomorphicLayoutEffect,\n} from \"../utils\";\nimport checkboxCss from \"./Checkbox.css\";\nimport { CheckboxIcon } from \"./CheckboxIcon\";\nimport { useCheckboxGroup } from \"./internal/useCheckboxGroup\";\n\nconst withBaseName = makePrefixer(\"saltCheckbox\");\nexport interface CheckboxProps\n  extends Omit<\n    InputHTMLAttributes<HTMLLabelElement>,\n    \"onChange\" | \"onBlur\" | \"onFocus\"\n  > {\n  /**\n   * If `true`, the checkbox will be checked.\n   */\n  checked?: boolean;\n  /**\n   * Whether the checkbox component is checked by default\n   * This will be disregarded if checked is already set.\n   */\n  defaultChecked?: boolean;\n  /**\n   * If `true`, the checkbox will be disabled.\n   */\n  disabled?: boolean;\n  /**\n   * **Deprecated**: Use validationStatus instead\n   * If `true`, the checkbox will be in the error state.\n   */\n  error?: boolean;\n  /**\n   * If true, the checkbox appears indeterminate. A data-indeterminate attribute is set on the input.\n   */\n  indeterminate?: boolean;\n  /**\n   * Properties applied to the input element.\n   */\n  inputProps?: Partial<InputHTMLAttributes<HTMLInputElement>> & DataAttributes;\n  /**\n   * Used to access the hidden `<input>` element.\n   */\n  inputRef?: Ref<HTMLInputElement>;\n  /**\n   * The label to be shown next to the checkbox.\n   */\n  label?: ReactNode;\n  /**\n   * The name applied to the input.\n   */\n  name?: string;\n  /**\n   * Callback when checkbox loses focus.\n   */\n  onBlur?: FocusEventHandler<HTMLInputElement>;\n  /**\n   * Callback when checked state is changed.\n   */\n  onChange?: ChangeEventHandler<HTMLInputElement>;\n  /**\n   * Callback when checkbox gains focus.\n   */\n  onFocus?: FocusEventHandler<HTMLInputElement>;\n  /**\n   * The value of the checkbox.\n   */\n  value?: string;\n  /**\n   * Validation status, one of \"warning\" | \"error\" | \"success\"\n   *\n   * Checkbox has styling variants for \"error\" and \"warning\".\n   * No visual styling will be applied on \"success\" variant.\n   */\n  validationStatus?: AdornmentValidationStatus;\n}\n\nexport const Checkbox = forwardRef<HTMLLabelElement, CheckboxProps>(\n  function Checkbox(\n    {\n      checked: checkedProp,\n      className,\n      defaultChecked,\n      disabled: disabledProp,\n      error,\n      indeterminate,\n      inputProps = {},\n      inputRef: inputRefProp,\n      label,\n      name,\n      onBlur,\n      onChange,\n      onFocus,\n      value,\n      validationStatus: validationStatusProp,\n      readOnly: readOnlyProp,\n      ...rest\n    },\n    ref,\n  ) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-checkbox\",\n      css: checkboxCss,\n      window: targetWindow,\n    });\n    const checkboxGroup = useCheckboxGroup();\n\n    const {\n      \"aria-describedby\": inputDescribedBy,\n      \"aria-labelledby\": inputLabelledBy,\n      className: inputClassName,\n      onChange: inputOnChange,\n      ...restInputProps\n    } = inputProps;\n\n    const checkboxGroupChecked =\n      checkedProp ??\n      (checkboxGroup?.checkedValues && value\n        ? checkboxGroup.checkedValues.includes(value)\n        : checkedProp);\n\n    const [checked, setChecked] = useControlled({\n      controlled: checkboxGroupChecked,\n      default: Boolean(defaultChecked),\n      name: \"Checkbox\",\n      state: \"checked\",\n    });\n\n    const {\n      a11yProps: formFieldA11yProps,\n      disabled: formFieldDisabled,\n      readOnly: formFieldReadOnly,\n      validationStatus: formFieldValidationStatus,\n    } = useFormFieldProps();\n\n    const disabled =\n      checkboxGroup?.disabled || formFieldDisabled || disabledProp;\n    const readOnly =\n      checkboxGroup?.readOnly || formFieldReadOnly || readOnlyProp;\n    const validationStatus = !disabled\n      ? (checkboxGroup?.validationStatus ??\n        formFieldValidationStatus ??\n        validationStatusProp)\n      : undefined;\n\n    const inputRef = useRef<HTMLInputElement>(null);\n    const handleInputRef = useForkRef(inputRefProp, inputRef);\n\n    const handleChange: ChangeEventHandler<HTMLInputElement> = (event) => {\n      // Workaround for https://github.com/facebook/react/issues/9023\n      if (event.nativeEvent.defaultPrevented || readOnly) {\n        return;\n      }\n\n      const value = event.target.checked;\n      setChecked(value);\n      onChange?.(event);\n      inputOnChange?.(event);\n      checkboxGroup?.onChange?.(event);\n    };\n\n    useIsomorphicLayoutEffect(() => {\n      if (inputRef.current != null) {\n        inputRef.current.indeterminate = indeterminate ?? false;\n      }\n    }, [indeterminate]);\n\n    return (\n      <label\n        className={clsx(\n          withBaseName(),\n          {\n            [withBaseName(\"disabled\")]: disabled,\n            [withBaseName(\"readOnly\")]: readOnly,\n            [withBaseName(\"error\")]: error /* **Deprecated** */,\n            [withBaseName(validationStatus ?? \"\")]: validationStatus,\n          },\n          className,\n        )}\n        ref={ref}\n        {...rest}\n      >\n        <input\n          aria-readonly={readOnly || undefined}\n          aria-describedby={\n            clsx(\n              checkboxGroup === undefined\n                ? formFieldA11yProps?.[\"aria-describedby\"]\n                : undefined,\n              inputDescribedBy,\n            ) || undefined\n          }\n          aria-labelledby={\n            clsx(\n              checkboxGroup === undefined\n                ? formFieldA11yProps?.[\"aria-labelledby\"]\n                : undefined,\n              inputLabelledBy,\n            ) || undefined\n          }\n          name={name}\n          value={value}\n          checked={checked}\n          className={clsx(withBaseName(\"input\"), inputClassName)}\n          data-indeterminate={indeterminate}\n          defaultChecked={defaultChecked}\n          disabled={disabled}\n          readOnly={readOnly}\n          onBlur={onBlur}\n          onChange={handleChange}\n          onFocus={onFocus}\n          type=\"checkbox\"\n          ref={handleInputRef}\n          {...restInputProps}\n        />\n        <CheckboxIcon\n          checked={checked}\n          disabled={disabled}\n          readOnly={readOnly}\n          indeterminate={indeterminate}\n          validationStatus={validationStatus}\n          error={error}\n        />\n        {label}\n      </label>\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","Checkbox","useWindow","useComponentCssInjection","checkboxCss","useCheckboxGroup","useControlled","useFormFieldProps","useRef","useForkRef","value","useIsomorphicLayoutEffect","jsxs","clsx","jsx","CheckboxIcon"],"mappings":"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"}
+{"version":3,"file":"Checkbox.js","sources":["../src/checkbox/Checkbox.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ChangeEventHandler,\n  type FocusEventHandler,\n  forwardRef,\n  type InputHTMLAttributes,\n  type ReactNode,\n  type Ref,\n  useRef,\n} from \"react\";\nimport { useFormFieldProps } from \"../form-field-context\";\nimport type { AdornmentValidationStatus } from \"../status-adornment\";\nimport type { DataAttributes } from \"../types\";\nimport {\n  makePrefixer,\n  useControlled,\n  useForkRef,\n  useIsomorphicLayoutEffect,\n} from \"../utils\";\nimport checkboxCss from \"./Checkbox.css\";\nimport { CheckboxIcon } from \"./CheckboxIcon\";\nimport { useCheckboxGroup } from \"./internal/useCheckboxGroup\";\n\nconst withBaseName = makePrefixer(\"saltCheckbox\");\nexport interface CheckboxProps\n  extends Omit<\n    InputHTMLAttributes<HTMLLabelElement>,\n    \"onChange\" | \"onBlur\" | \"onFocus\"\n  > {\n  /**\n   * If `true`, the checkbox will be checked.\n   */\n  checked?: boolean;\n  /**\n   * Whether the checkbox component is checked by default\n   * This will be disregarded if checked is already set.\n   */\n  defaultChecked?: boolean;\n  /**\n   * If `true`, the checkbox will be disabled.\n   */\n  disabled?: boolean;\n  /**\n   * **Deprecated**: Use validationStatus instead\n   * If `true`, the checkbox will be in the error state.\n   */\n  error?: boolean;\n  /**\n   * If true, the checkbox appears indeterminate. A data-indeterminate attribute is set on the input.\n   */\n  indeterminate?: boolean;\n  /**\n   * Properties applied to the input element.\n   */\n  inputProps?: Partial<InputHTMLAttributes<HTMLInputElement>> & DataAttributes;\n  /**\n   * Used to access the hidden `<input>` element.\n   */\n  inputRef?: Ref<HTMLInputElement>;\n  /**\n   * The label to be shown next to the checkbox.\n   */\n  label?: ReactNode;\n  /**\n   * The name applied to the input.\n   */\n  name?: string;\n  /**\n   * Callback when checkbox loses focus.\n   */\n  onBlur?: FocusEventHandler<HTMLInputElement>;\n  /**\n   * Callback when checked state is changed.\n   */\n  onChange?: ChangeEventHandler<HTMLInputElement>;\n  /**\n   * Callback when checkbox gains focus.\n   */\n  onFocus?: FocusEventHandler<HTMLInputElement>;\n  /**\n   * The value of the checkbox.\n   */\n  value?: string;\n  /**\n   * Validation status, one of \"warning\" | \"error\" | \"success\"\n   *\n   * Checkbox has styling variants for \"error\" and \"warning\".\n   * No visual styling will be applied on \"success\" variant.\n   */\n  validationStatus?: AdornmentValidationStatus;\n}\n\nexport const Checkbox = forwardRef<HTMLLabelElement, CheckboxProps>(\n  function Checkbox(\n    {\n      checked: checkedProp,\n      className,\n      defaultChecked,\n      disabled: disabledProp,\n      error,\n      indeterminate,\n      inputProps = {},\n      inputRef: inputRefProp,\n      label,\n      name,\n      onBlur,\n      onChange,\n      onFocus,\n      value,\n      validationStatus: validationStatusProp,\n      readOnly: readOnlyProp,\n      ...rest\n    },\n    ref,\n  ) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-checkbox\",\n      css: checkboxCss,\n      window: targetWindow,\n    });\n    const checkboxGroup = useCheckboxGroup();\n\n    const {\n      \"aria-describedby\": inputDescribedBy,\n      \"aria-labelledby\": inputLabelledBy,\n      className: inputClassName,\n      onChange: inputOnChange,\n      ...restInputProps\n    } = inputProps;\n\n    const checkboxGroupChecked =\n      checkedProp ??\n      (checkboxGroup?.checkedValues && value\n        ? checkboxGroup.checkedValues.includes(value)\n        : checkedProp);\n\n    const [checked, setChecked] = useControlled({\n      controlled: checkboxGroupChecked,\n      default: Boolean(defaultChecked),\n      name: \"Checkbox\",\n      state: \"checked\",\n    });\n\n    const {\n      a11yProps: formFieldA11yProps,\n      disabled: formFieldDisabled,\n      readOnly: formFieldReadOnly,\n      validationStatus: formFieldValidationStatus,\n    } = useFormFieldProps();\n\n    const disabled =\n      checkboxGroup?.disabled || formFieldDisabled || disabledProp;\n    const readOnly =\n      checkboxGroup?.readOnly || formFieldReadOnly || readOnlyProp;\n    const validationStatus = !disabled\n      ? (checkboxGroup?.validationStatus ??\n        formFieldValidationStatus ??\n        validationStatusProp)\n      : undefined;\n\n    const inputRef = useRef<HTMLInputElement>(null);\n    const handleInputRef = useForkRef(inputRefProp, inputRef);\n\n    const handleChange: ChangeEventHandler<HTMLInputElement> = (event) => {\n      // Workaround for https://github.com/facebook/react/issues/9023\n      if (event.nativeEvent.defaultPrevented || readOnly) {\n        return;\n      }\n\n      const value = event.target.checked;\n      setChecked(value);\n      onChange?.(event);\n      inputOnChange?.(event);\n      checkboxGroup?.onChange?.(event);\n    };\n\n    useIsomorphicLayoutEffect(() => {\n      if (inputRef.current != null) {\n        inputRef.current.indeterminate = indeterminate ?? false;\n      }\n    }, [indeterminate]);\n\n    return (\n      <label\n        className={clsx(\n          withBaseName(),\n          {\n            [withBaseName(\"disabled\")]: disabled,\n            [withBaseName(\"readOnly\")]: readOnly,\n            [withBaseName(\"error\")]: error /* **Deprecated** */,\n            [withBaseName(validationStatus ?? \"\")]: validationStatus,\n          },\n          className,\n        )}\n        ref={ref}\n        {...rest}\n      >\n        <input\n          aria-readonly={readOnly || undefined}\n          aria-describedby={\n            clsx(\n              checkboxGroup === undefined\n                ? formFieldA11yProps?.[\"aria-describedby\"]\n                : undefined,\n              inputDescribedBy,\n            ) || undefined\n          }\n          aria-labelledby={\n            clsx(\n              checkboxGroup === undefined\n                ? formFieldA11yProps?.[\"aria-labelledby\"]\n                : undefined,\n              inputLabelledBy,\n            ) || undefined\n          }\n          name={name}\n          value={value}\n          checked={checked}\n          className={clsx(withBaseName(\"input\"), inputClassName)}\n          data-indeterminate={indeterminate}\n          defaultChecked={defaultChecked}\n          disabled={disabled}\n          readOnly={readOnly}\n          onBlur={onBlur}\n          onChange={handleChange}\n          onFocus={onFocus}\n          type=\"checkbox\"\n          ref={handleInputRef}\n          {...restInputProps}\n        />\n        <CheckboxIcon\n          checked={checked}\n          readOnly={readOnly}\n          indeterminate={indeterminate}\n          validationStatus={validationStatus}\n          error={error}\n        />\n        {label}\n      </label>\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","Checkbox","useWindow","useComponentCssInjection","checkboxCss","useCheckboxGroup","useControlled","useFormFieldProps","useRef","useForkRef","value","useIsomorphicLayoutEffect","jsxs","clsx","jsx","CheckboxIcon"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAyBA,MAAM,YAAA,GAAeA,0BAAa,cAAc,CAAA;AAqEzC,MAAM,QAAA,GAAWC,gBAAA;AAAA,EACtB,SAASC,SAAAA,CACP;AAAA,IACE,OAAA,EAAS,WAAA;AAAA,IACT,SAAA;AAAA,IACA,cAAA;AAAA,IACA,QAAA,EAAU,YAAA;AAAA,IACV,KAAA;AAAA,IACA,aAAA;AAAA,IACA,aAAa,EAAC;AAAA,IACd,QAAA,EAAU,YAAA;AAAA,IACV,KAAA;AAAA,IACA,IAAA;AAAA,IACA,MAAA;AAAA,IACA,QAAA;AAAA,IACA,OAAA;AAAA,IACA,KAAA;AAAA,IACA,gBAAA,EAAkB,oBAAA;AAAA,IAClB,QAAA,EAAU,YAAA;AAAA,IACV,GAAG;AAAA,KAEL,GAAA,EACA;AACA,IAAA,MAAM,eAAeC,gBAAA,EAAU;AAC/B,IAAAC,+BAAA,CAAyB;AAAA,MACvB,MAAA,EAAQ,eAAA;AAAA,MACR,GAAA,EAAKC,UAAA;AAAA,MACL,MAAA,EAAQ;AAAA,KACT,CAAA;AACD,IAAA,MAAM,gBAAgBC,iCAAA,EAAiB;AAEvC,IAAA,MAAM;AAAA,MACJ,kBAAA,EAAoB,gBAAA;AAAA,MACpB,iBAAA,EAAmB,eAAA;AAAA,MACnB,SAAA,EAAW,cAAA;AAAA,MACX,QAAA,EAAU,aAAA;AAAA,MACV,GAAG;AAAA,KACL,GAAI,UAAA;AAEJ,IAAA,MAAM,oBAAA,GACJ,iBACC,aAAA,IAAA,IAAA,GAAA,MAAA,GAAA,aAAA,CAAe,aAAA,KAAiB,QAC7B,aAAA,CAAc,aAAA,CAAc,QAAA,CAAS,KAAK,CAAA,GAC1C,WAAA,CAAA;AAEN,IAAA,MAAM,CAAC,OAAA,EAAS,UAAU,CAAA,GAAIC,2BAAA,CAAc;AAAA,MAC1C,UAAA,EAAY,oBAAA;AAAA,MACZ,OAAA,EAAS,QAAQ,cAAc,CAAA;AAAA,MAC/B,IAAA,EAAM,UAAA;AAAA,MACN,KAAA,EAAO;AAAA,KACR,CAAA;AAED,IAAA,MAAM;AAAA,MACJ,SAAA,EAAW,kBAAA;AAAA,MACX,QAAA,EAAU,iBAAA;AAAA,MACV,QAAA,EAAU,iBAAA;AAAA,MACV,gBAAA,EAAkB;AAAA,QAChBC,mCAAA,EAAkB;AAEtB,IAAA,MAAM,QAAA,GAAA,CACJ,aAAA,IAAA,IAAA,GAAA,MAAA,GAAA,aAAA,CAAe,QAAA,KAAY,iBAAA,IAAqB,YAAA;AAClD,IAAA,MAAM,QAAA,GAAA,CACJ,aAAA,IAAA,IAAA,GAAA,MAAA,GAAA,aAAA,CAAe,QAAA,KAAY,iBAAA,IAAqB,YAAA;AAClD,IAAA,MAAM,mBAAmB,CAAC,QAAA,GAAA,CACrB,aAAA,IAAA,IAAA,GAAA,MAAA,GAAA,aAAA,CAAe,gBAAA,KAChB,6BACA,oBAAA,GACA,MAAA;AAEJ,IAAA,MAAM,QAAA,GAAWC,aAAyB,IAAI,CAAA;AAC9C,IAAA,MAAM,cAAA,GAAiBC,qBAAA,CAAW,YAAA,EAAc,QAAQ,CAAA;AAExD,IAAA,MAAM,YAAA,GAAqD,CAAC,KAAA,KAAU;AAtK1E,MAAA,IAAA,EAAA;AAwKM,MAAA,IAAI,KAAA,CAAM,WAAA,CAAY,gBAAA,IAAoB,QAAA,EAAU;AAClD,QAAA;AAAA,MACF;AAEA,MAAA,MAAMC,MAAAA,GAAQ,MAAM,MAAA,CAAO,OAAA;AAC3B,MAAA,UAAA,CAAWA,MAAK,CAAA;AAChB,MAAA,QAAA,IAAA,IAAA,GAAA,MAAA,GAAA,QAAA,CAAW,KAAA,CAAA;AACX,MAAA,aAAA,IAAA,IAAA,GAAA,MAAA,GAAA,aAAA,CAAgB,KAAA,CAAA;AAChB,MAAA,CAAA,EAAA,GAAA,aAAA,IAAA,IAAA,GAAA,MAAA,GAAA,aAAA,CAAe,aAAf,IAAA,GAAA,MAAA,GAAA,EAAA,CAAA,IAAA,CAAA,aAAA,EAA0B,KAAA,CAAA;AAAA,IAC5B,CAAA;AAEA,IAAAC,mDAAA,CAA0B,MAAM;AAC9B,MAAA,IAAI,QAAA,CAAS,WAAW,IAAA,EAAM;AAC5B,QAAA,QAAA,CAAS,OAAA,CAAQ,gBAAgB,aAAA,IAAiB,KAAA;AAAA,MACpD;AAAA,IACF,CAAA,EAAG,CAAC,aAAa,CAAC,CAAA;AAElB,IAAA,uBACEC,eAAA;AAAA,MAAC,OAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAWC,SAAA;AAAA,UACT,YAAA,EAAa;AAAA,UACb;AAAA,YACE,CAAC,YAAA,CAAa,UAAU,CAAC,GAAG,QAAA;AAAA,YAC5B,CAAC,YAAA,CAAa,UAAU,CAAC,GAAG,QAAA;AAAA,YAC5B,CAAC,YAAA,CAAa,OAAO,CAAC,GAAG,KAAA;AAAA,YACzB,CAAC,YAAA,CAAa,gBAAA,IAAoB,EAAE,CAAC,GAAG;AAAA,WAC1C;AAAA,UACA;AAAA,SACF;AAAA,QACA,GAAA;AAAA,QACC,GAAG,IAAA;AAAA,QAEJ,QAAA,EAAA;AAAA,0BAAAC,cAAA;AAAA,YAAC,OAAA;AAAA,YAAA;AAAA,cACC,iBAAe,QAAA,IAAY,MAAA;AAAA,cAC3B,kBAAA,EACED,SAAA;AAAA,gBACE,aAAA,KAAkB,MAAA,GACd,kBAAA,IAAA,IAAA,GAAA,MAAA,GAAA,kBAAA,CAAqB,kBAAA,CAAA,GACrB,MAAA;AAAA,gBACJ;AAAA,eACF,IAAK,MAAA;AAAA,cAEP,iBAAA,EACEA,SAAA;AAAA,gBACE,aAAA,KAAkB,MAAA,GACd,kBAAA,IAAA,IAAA,GAAA,MAAA,GAAA,kBAAA,CAAqB,iBAAA,CAAA,GACrB,MAAA;AAAA,gBACJ;AAAA,eACF,IAAK,MAAA;AAAA,cAEP,IAAA;AAAA,cACA,KAAA;AAAA,cACA,OAAA;AAAA,cACA,SAAA,EAAWA,SAAA,CAAK,YAAA,CAAa,OAAO,GAAG,cAAc,CAAA;AAAA,cACrD,oBAAA,EAAoB,aAAA;AAAA,cACpB,cAAA;AAAA,cACA,QAAA;AAAA,cACA,QAAA;AAAA,cACA,MAAA;AAAA,cACA,QAAA,EAAU,YAAA;AAAA,cACV,OAAA;AAAA,cACA,IAAA,EAAK,UAAA;AAAA,cACL,GAAA,EAAK,cAAA;AAAA,cACJ,GAAG;AAAA;AAAA,WACN;AAAA,0BACAC,cAAA;AAAA,YAACC,yBAAA;AAAA,YAAA;AAAA,cACC,OAAA;AAAA,cACA,QAAA;AAAA,cACA,aAAA;AAAA,cACA,gBAAA;AAAA,cACA;AAAA;AAAA,WACF;AAAA,UACC;AAAA;AAAA;AAAA,KACH;AAAA,EAEJ;AACF;;;;"}

package/dist-cjs/checkbox/CheckboxIcon.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = ".saltCheckboxIcon {\n  --checkbox-size: var(--salt-size-selectable);\n  width: var(--checkbox-size);\n  min-width: var(--checkbox-size);\n  height: var(--checkbox-size);\n  min-height: var(--checkbox-size);\n  border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-selectable-borderColor);\n  border-radius: var(--salt-palette-corner-weaker, 0);\n  color: var(--salt-selectable-foreground);\n  background: var(--salt-container-primary-background);\n  position: relative;\n  --saltIcon-size: 100%;\n  display: flex;\n  /* Using overflow:hidden here causes a thin white line */\n  clip-path: border-box;\n  box-sizing: border-box;\n}\n\n.saltCheckboxIcon-checked,\n.saltCheckbox:hover .saltCheckboxIcon-checked {\n  border-color: var(--salt-selectable-borderColor-selected);\n  color: var(--salt-selectable-foreground-selected);\n}\n\n.saltCheckbox:hover .saltCheckboxIcon,\n.saltCheckbox:hover .saltCheckboxIcon-indeterminate {\n  border-color: var(--salt-selectable-borderColor-hover);\n  color: var(--salt-selectable-foreground-hover);\n}\n\n.saltCheckboxIcon-checked.saltCheckboxIcon-indeterminate {\n  border-color: var(--salt-selectable-borderColor);\n  color: var(--salt-selectable-foreground);\n}\n\n.saltCheckboxIcon-disabled,\n.saltCheckbox:hover .saltCheckboxIcon-disabled,\n.saltCheckboxIcon-disabled.saltCheckboxIcon-indeterminate,\n.saltCheckbox:hover .saltCheckboxIcon-disabled.saltCheckboxIcon-indeterminate {\n  border-color: var(--salt-selectable-borderColor-disabled);\n  background: var(--salt-container-primary-background-disabled);\n  color: var(--salt-selectable-foreground-disabled);\n}\n\n.saltCheckboxIcon-checked.saltCheckboxIcon-disabled,\n.saltCheckbox:hover .saltCheckboxIcon-checked.saltCheckboxIcon-disabled {\n  border-color: var(--salt-selectable-borderColor-selectedDisabled);\n  color: var(--salt-selectable-foreground-selectedDisabled);\n}\n\n.saltCheckboxIcon-indeterminate::before {\n  content: \"\";\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  width: calc(var(--checkbox-size) - 6px);\n  height: 2px;\n  background: currentColor;\n  transform: translate(-50%, -50%);\n}\n\n.saltCheckboxIcon-error,\n.saltCheckbox:hover .saltCheckboxIcon-error {\n  color: var(--salt-status-error-foreground-decorative);\n  border-color: var(--salt-status-error-borderColor);\n  outline-color: var(--salt-status-error-foreground-decorative);\n}\n\n.saltCheckboxIcon-warning,\n.saltCheckbox:hover .saltCheckboxIcon-warning {\n  color: var(--salt-status-warning-foreground-decorative);\n  border-color: var(--salt-status-warning-borderColor);\n  outline-color: var(--salt-status-warning-foreground-decorative);\n}\n\n.saltCheckboxIcon-readOnly,\n.saltCheckbox:hover .saltCheckboxIcon-readOnly,\n.saltCheckbox-input:focus-visible + .saltCheckboxIcon-readOnly {\n  border-color: var(--salt-selectable-borderColor-readonly);\n  border-style: var(--salt-borderStyle-dashed);\n  color: var(--salt-content-primary-foreground);\n}\n\n.saltCheckboxIcon > svg {\n  position: absolute;\n  /* Ensure a gap doesn't appear when device scaling is used */\n  transform: scale(1.01);\n}\n";
+var css_248z = ".saltCheckboxIcon {\n  --checkbox-size: var(--salt-size-selectable);\n  width: var(--checkbox-size);\n  min-width: var(--checkbox-size);\n  height: var(--checkbox-size);\n  min-height: var(--checkbox-size);\n  border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-selectable-borderColor);\n  border-radius: var(--salt-palette-corner-weaker, 0);\n  color: var(--salt-selectable-foreground);\n  background: var(--salt-container-primary-background);\n  position: relative;\n  --saltIcon-size: 100%;\n  display: flex;\n  /* Using overflow:hidden here causes a thin white line */\n  clip-path: border-box;\n  box-sizing: border-box;\n}\n\n.saltCheckboxIcon-checked,\n.saltCheckbox:hover .saltCheckboxIcon-checked {\n  border-color: var(--salt-selectable-borderColor-selected);\n  color: var(--salt-selectable-foreground-selected);\n}\n\n.saltCheckbox:hover .saltCheckboxIcon,\n.saltCheckbox:hover .saltCheckboxIcon-indeterminate {\n  border-color: var(--salt-selectable-borderColor-hover);\n  color: var(--salt-selectable-foreground-hover);\n}\n\n.saltCheckboxIcon-checked.saltCheckboxIcon-indeterminate {\n  border-color: var(--salt-selectable-borderColor);\n  color: var(--salt-selectable-foreground);\n}\n\n.saltCheckboxIcon-disabled,\n.saltCheckbox:hover .saltCheckboxIcon-disabled,\n.saltCheckboxIcon-disabled.saltCheckboxIcon-indeterminate,\n.saltCheckbox:hover .saltCheckboxIcon-disabled.saltCheckboxIcon-indeterminate {\n  opacity: 0.4;\n\n  border-color: var(--salt-selectable-borderColor);\n  background: var(--salt-container-primary-background);\n  color: var(--salt-selectable-foreground);\n}\n\n.saltCheckboxIcon-checked.saltCheckboxIcon-disabled,\n.saltCheckbox:hover .saltCheckboxIcon-checked.saltCheckboxIcon-disabled {\n  border-color: var(--salt-selectable-borderColor-selected);\n  color: var(--salt-selectable-foreground-selected);\n}\n\n.saltCheckboxIcon-indeterminate::before {\n  content: \"\";\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  width: calc(var(--checkbox-size) - 6px);\n  height: 2px;\n  background: currentColor;\n  transform: translate(-50%, -50%);\n}\n\n.saltCheckboxIcon-error,\n.saltCheckbox:hover .saltCheckboxIcon-error {\n  color: var(--salt-status-error-foreground-decorative);\n  border-color: var(--salt-status-error-borderColor);\n  outline-color: var(--salt-status-error-foreground-decorative);\n}\n\n.saltCheckboxIcon-warning,\n.saltCheckbox:hover .saltCheckboxIcon-warning {\n  color: var(--salt-status-warning-foreground-decorative);\n  border-color: var(--salt-status-warning-borderColor);\n  outline-color: var(--salt-status-warning-foreground-decorative);\n}\n\n.saltCheckboxIcon-readOnly,\n.saltCheckbox:hover .saltCheckboxIcon-readOnly,\n.saltCheckbox-input:focus-visible + .saltCheckboxIcon-readOnly {\n  border-color: var(--salt-selectable-borderColor-readonly);\n  border-style: var(--salt-borderStyle-dashed);\n  color: var(--salt-content-primary-foreground);\n}\n\n.saltCheckboxIcon > svg {\n  position: absolute;\n  /* Ensure a gap doesn't appear when device scaling is used */\n  transform: scale(1.01);\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=CheckboxIcon.css.js.map

package/dist-cjs/dialog/DialogHeader.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = "/* Styles applied to the root element */\n.saltDialogHeader {\n  padding-bottom: var(--salt-spacing-300);\n  padding-left: var(--salt-spacing-300);\n  padding-right: var(--salt-spacing-300);\n  display: flex;\n  flex-direction: row;\n  gap: var(--salt-spacing-100);\n  box-sizing: border-box;\n}\n.saltDialogHeader-header {\n  margin: 0;\n}\n\n.saltDialogHeader-container {\n  flex-grow: 1;\n  margin: 0;\n  display: flex;\n  flex-direction: column;\n  gap: var(--salt-spacing-50);\n  padding-top: calc((var(--salt-size-base) - var(--salt-text-h2-lineHeight)) / 2);\n  align-items: flex-start;\n  min-width: 0;\n  word-break: break-word;\n}\n\n.saltDialogHeader-header > .saltText {\n  margin: 0;\n}\n\n.saltDialogHeader-actionsContainer {\n  align-self: flex-start;\n}\n\n/* Styles applied to the status indicator icon overriding its default size */\n.saltDialogHeader .saltStatusIndicator.saltIcon {\n  --icon-size: var(--salt-text-h2-lineHeight);\n  padding-top: calc((var(--salt-size-base) - var(--salt-text-h2-lineHeight)) / 2);\n}\n\n/* Styles applied to DialogHeader when accent={true} */\n.saltDialogHeader-withAccent {\n  position: relative;\n}\n\n.saltDialogHeader-withAccent::before {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  left: 0;\n  bottom: var(--salt-spacing-300);\n  width: var(--salt-size-bar);\n  background: var(--salt-accent-background);\n}\n";
+var css_248z = "/* Styles applied to the root element */\n.saltDialogHeader {\n  padding-bottom: var(--salt-spacing-300);\n  padding-left: var(--salt-spacing-300);\n  padding-right: var(--salt-spacing-300);\n  display: flex;\n  flex-direction: row;\n  gap: var(--salt-spacing-100);\n  box-sizing: border-box;\n}\n.saltDialogHeader-header {\n  margin: 0;\n}\n\n.saltDialogHeader-container {\n  flex-grow: 1;\n  margin: 0;\n  display: flex;\n  flex-direction: column;\n  gap: var(--salt-spacing-50);\n  padding-top: calc((var(--salt-size-base) - var(--salt-text-h2-lineHeight)) / 2);\n  align-items: flex-start;\n  min-width: 0;\n  word-break: break-word;\n}\n\n.saltDialogHeader-header > .saltText {\n  margin: 0;\n}\n\n.saltDialogHeader-actionsContainer {\n  align-self: flex-start;\n}\n\n/* Styles applied to the status indicator icon overriding its default size */\n.saltDialogHeader .saltStatusIndicator.saltIcon {\n  --icon-size: var(--salt-text-h2-lineHeight);\n  padding-top: calc((var(--salt-size-base) - var(--salt-text-h2-lineHeight)) / 2);\n}\n\n/* Styles applied to DialogHeader when accent={true} */\n.saltDialogHeader-withAccent {\n  position: relative;\n}\n\n.saltDialogHeader-withAccent::before {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  left: 0;\n  bottom: var(--salt-spacing-300);\n  width: var(--salt-size-bar);\n  background: var(--salt-sentiment-accent-background);\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=DialogHeader.css.js.map

package/dist-cjs/index.js

@@ -134,6 +134,9 @@ var ToastContent = require('./toast/ToastContent.js');
 var ToggleButton = require('./toggle-button/ToggleButton.js');
 var ToggleButtonGroup = require('./toggle-button-group/ToggleButtonGroup.js');
 var ToggleButtonGroupContext = require('./toggle-button-group/ToggleButtonGroupContext.js');
+var Toggletip = require('./toggletip/Toggletip.js');
+var ToggletipPanel = require('./toggletip/ToggletipPanel.js');
+var ToggletipTrigger = require('./toggletip/ToggletipTrigger.js');
 var Tooltip = require('./tooltip/Tooltip.js');
 var useTooltip = require('./tooltip/useTooltip.js');
 var capitalize = require('./utils/capitalize.js');
@@ -339,6 +342,9 @@ exports.ToastContent = ToastContent.ToastContent;
 exports.ToggleButton = ToggleButton.ToggleButton;
 exports.ToggleButtonGroup = ToggleButtonGroup.ToggleButtonGroup;
 exports.useToggleButtonGroup = ToggleButtonGroupContext.useToggleButtonGroup;
+exports.Toggletip = Toggletip.Toggletip;
+exports.ToggletipPanel = ToggletipPanel.ToggletipPanel;
+exports.ToggletipTrigger = ToggletipTrigger.ToggletipTrigger;
 exports.Tooltip = Tooltip.Tooltip;
 exports.useTooltip = useTooltip.useTooltip;
 exports.capitalize = capitalize.capitalize;

package/dist-cjs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}