@salt-ds/core 1.47.0 → 1.47.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (235) hide show
  1. package/CHANGELOG.md +13 -0
  2. package/css/salt-core.css +225 -213
  3. package/dist-cjs/accordion/Accordion.css.js +1 -1
  4. package/dist-cjs/accordion/AccordionGroup.css.js +1 -1
  5. package/dist-cjs/accordion/AccordionHeader.css.js +1 -1
  6. package/dist-cjs/banner/Banner.css.js +1 -1
  7. package/dist-cjs/border-item/BorderItem.js +33 -32
  8. package/dist-cjs/border-item/BorderItem.js.map +1 -1
  9. package/dist-cjs/border-layout/BorderLayout.js +3 -1
  10. package/dist-cjs/border-layout/BorderLayout.js.map +1 -1
  11. package/dist-cjs/button/Button.css.js +1 -1
  12. package/dist-cjs/button/Button.js +2 -1
  13. package/dist-cjs/button/Button.js.map +1 -1
  14. package/dist-cjs/card/Card.css.js +1 -1
  15. package/dist-cjs/checkbox/Checkbox.css.js +1 -1
  16. package/dist-cjs/checkbox/CheckboxIcon.css.js +1 -1
  17. package/dist-cjs/dialog/Dialog.css.js +1 -1
  18. package/dist-cjs/dialog/DialogContent.css.js +1 -1
  19. package/dist-cjs/divider/Divider.css.js +1 -1
  20. package/dist-cjs/dropdown/Dropdown.css.js +1 -1
  21. package/dist-cjs/file-drop-zone/FileDropZone.css.js +1 -1
  22. package/dist-cjs/flex-item/FlexItem.js +46 -48
  23. package/dist-cjs/flex-item/FlexItem.js.map +1 -1
  24. package/dist-cjs/flex-layout/FlexLayout.css.js +1 -1
  25. package/dist-cjs/flex-layout/FlexLayout.js +60 -62
  26. package/dist-cjs/flex-layout/FlexLayout.js.map +1 -1
  27. package/dist-cjs/flow-layout/FlowLayout.js +3 -5
  28. package/dist-cjs/flow-layout/FlowLayout.js.map +1 -1
  29. package/dist-cjs/grid-item/GridItem.js +51 -53
  30. package/dist-cjs/grid-item/GridItem.js.map +1 -1
  31. package/dist-cjs/grid-layout/GridLayout.js +49 -51
  32. package/dist-cjs/grid-layout/GridLayout.js.map +1 -1
  33. package/dist-cjs/input/Input.css.js +1 -1
  34. package/dist-cjs/interactable-card/InteractableCard.css.js +1 -1
  35. package/dist-cjs/link-card/LinkCard.css.js +1 -1
  36. package/dist-cjs/list-box/ListBox.css.js +1 -1
  37. package/dist-cjs/list-box/ListBox.js +5 -0
  38. package/dist-cjs/list-box/ListBox.js.map +1 -1
  39. package/dist-cjs/menu/MenuBase.js +1 -1
  40. package/dist-cjs/menu/MenuBase.js.map +1 -1
  41. package/dist-cjs/menu/MenuGroup.css.js +1 -1
  42. package/dist-cjs/menu/MenuItem.css.js +1 -1
  43. package/dist-cjs/menu/MenuPanel.css.js +1 -1
  44. package/dist-cjs/menu/MenuTrigger.js +32 -29
  45. package/dist-cjs/menu/MenuTrigger.js.map +1 -1
  46. package/dist-cjs/multiline-input/MultilineInput.css.js +1 -1
  47. package/dist-cjs/navigation-item/NavigationItem.css.js +1 -1
  48. package/dist-cjs/option/Option.css.js +1 -1
  49. package/dist-cjs/option/Option.js +1 -0
  50. package/dist-cjs/option/Option.js.map +1 -1
  51. package/dist-cjs/option/OptionGroup.css.js +1 -1
  52. package/dist-cjs/option/OptionList.css.js +1 -1
  53. package/dist-cjs/overlay/OverlayPanel.css.js +1 -1
  54. package/dist-cjs/overlay/OverlayPanelContent.css.js +1 -1
  55. package/dist-cjs/overlay/OverlayPanelContent.js +1 -1
  56. package/dist-cjs/overlay/OverlayPanelContent.js.map +1 -1
  57. package/dist-cjs/overlay/OverlayTrigger.js +17 -11
  58. package/dist-cjs/overlay/OverlayTrigger.js.map +1 -1
  59. package/dist-cjs/pagination/PageButton.css.js +1 -1
  60. package/dist-cjs/pill/Pill.css.js +1 -1
  61. package/dist-cjs/pill-input/PillInput.css.js +1 -1
  62. package/dist-cjs/pill-input/PillInput.js +5 -3
  63. package/dist-cjs/pill-input/PillInput.js.map +1 -1
  64. package/dist-cjs/progress/CircularProgress/CircularProgress.css.js +1 -1
  65. package/dist-cjs/progress/LinearProgress/LinearProgress.css.js +1 -1
  66. package/dist-cjs/radio-button/RadioButton.css.js +1 -1
  67. package/dist-cjs/radio-button/RadioButtonIcon.css.js +1 -1
  68. package/dist-cjs/segmented-button-group/SegmentedButtonGroup.css.js +1 -1
  69. package/dist-cjs/slider/internal/SliderThumb.css.js +1 -1
  70. package/dist-cjs/slider/internal/SliderTooltip.css.js +1 -1
  71. package/dist-cjs/slider/internal/SliderTrack.css.js +1 -1
  72. package/dist-cjs/spinner/Spinner.css.js +1 -1
  73. package/dist-cjs/split-layout/SplitLayout.js +2 -1
  74. package/dist-cjs/split-layout/SplitLayout.js.map +1 -1
  75. package/dist-cjs/stack-layout/StackLayout.css.js +1 -1
  76. package/dist-cjs/stack-layout/StackLayout.js +4 -2
  77. package/dist-cjs/stack-layout/StackLayout.js.map +1 -1
  78. package/dist-cjs/stepper/internal/StepConnector.css.js +1 -1
  79. package/dist-cjs/switch/Switch.css.js +1 -1
  80. package/dist-cjs/tag/Tag.css.js +1 -1
  81. package/dist-cjs/text/Text.js.map +1 -1
  82. package/dist-cjs/theme/Theme.js.map +1 -1
  83. package/dist-cjs/toast/Toast.css.js +1 -1
  84. package/dist-cjs/toggle-button/ToggleButton.css.js +1 -1
  85. package/dist-cjs/toggle-button-group/ToggleButtonGroup.css.js +1 -1
  86. package/dist-cjs/tooltip/Tooltip.css.js +1 -1
  87. package/dist-cjs/tooltip/Tooltip.js.map +1 -1
  88. package/dist-es/accordion/Accordion.css.js +1 -1
  89. package/dist-es/accordion/AccordionGroup.css.js +1 -1
  90. package/dist-es/accordion/AccordionHeader.css.js +1 -1
  91. package/dist-es/banner/Banner.css.js +1 -1
  92. package/dist-es/border-item/BorderItem.js +33 -32
  93. package/dist-es/border-item/BorderItem.js.map +1 -1
  94. package/dist-es/border-layout/BorderLayout.js +3 -1
  95. package/dist-es/border-layout/BorderLayout.js.map +1 -1
  96. package/dist-es/button/Button.css.js +1 -1
  97. package/dist-es/button/Button.js +2 -1
  98. package/dist-es/button/Button.js.map +1 -1
  99. package/dist-es/card/Card.css.js +1 -1
  100. package/dist-es/checkbox/Checkbox.css.js +1 -1
  101. package/dist-es/checkbox/CheckboxIcon.css.js +1 -1
  102. package/dist-es/dialog/Dialog.css.js +1 -1
  103. package/dist-es/dialog/DialogContent.css.js +1 -1
  104. package/dist-es/divider/Divider.css.js +1 -1
  105. package/dist-es/dropdown/Dropdown.css.js +1 -1
  106. package/dist-es/file-drop-zone/FileDropZone.css.js +1 -1
  107. package/dist-es/flex-item/FlexItem.js +46 -48
  108. package/dist-es/flex-item/FlexItem.js.map +1 -1
  109. package/dist-es/flex-layout/FlexLayout.css.js +1 -1
  110. package/dist-es/flex-layout/FlexLayout.js +60 -62
  111. package/dist-es/flex-layout/FlexLayout.js.map +1 -1
  112. package/dist-es/flow-layout/FlowLayout.js +3 -5
  113. package/dist-es/flow-layout/FlowLayout.js.map +1 -1
  114. package/dist-es/grid-item/GridItem.js +51 -53
  115. package/dist-es/grid-item/GridItem.js.map +1 -1
  116. package/dist-es/grid-layout/GridLayout.js +49 -51
  117. package/dist-es/grid-layout/GridLayout.js.map +1 -1
  118. package/dist-es/input/Input.css.js +1 -1
  119. package/dist-es/interactable-card/InteractableCard.css.js +1 -1
  120. package/dist-es/link-card/LinkCard.css.js +1 -1
  121. package/dist-es/list-box/ListBox.css.js +1 -1
  122. package/dist-es/list-box/ListBox.js +5 -0
  123. package/dist-es/list-box/ListBox.js.map +1 -1
  124. package/dist-es/menu/MenuBase.js +1 -1
  125. package/dist-es/menu/MenuBase.js.map +1 -1
  126. package/dist-es/menu/MenuGroup.css.js +1 -1
  127. package/dist-es/menu/MenuItem.css.js +1 -1
  128. package/dist-es/menu/MenuPanel.css.js +1 -1
  129. package/dist-es/menu/MenuTrigger.js +33 -30
  130. package/dist-es/menu/MenuTrigger.js.map +1 -1
  131. package/dist-es/multiline-input/MultilineInput.css.js +1 -1
  132. package/dist-es/navigation-item/NavigationItem.css.js +1 -1
  133. package/dist-es/option/Option.css.js +1 -1
  134. package/dist-es/option/Option.js +1 -0
  135. package/dist-es/option/Option.js.map +1 -1
  136. package/dist-es/option/OptionGroup.css.js +1 -1
  137. package/dist-es/option/OptionList.css.js +1 -1
  138. package/dist-es/overlay/OverlayPanel.css.js +1 -1
  139. package/dist-es/overlay/OverlayPanelContent.css.js +1 -1
  140. package/dist-es/overlay/OverlayPanelContent.js +1 -1
  141. package/dist-es/overlay/OverlayPanelContent.js.map +1 -1
  142. package/dist-es/overlay/OverlayTrigger.js +18 -12
  143. package/dist-es/overlay/OverlayTrigger.js.map +1 -1
  144. package/dist-es/pagination/PageButton.css.js +1 -1
  145. package/dist-es/pill/Pill.css.js +1 -1
  146. package/dist-es/pill-input/PillInput.css.js +1 -1
  147. package/dist-es/pill-input/PillInput.js +5 -3
  148. package/dist-es/pill-input/PillInput.js.map +1 -1
  149. package/dist-es/progress/CircularProgress/CircularProgress.css.js +1 -1
  150. package/dist-es/progress/LinearProgress/LinearProgress.css.js +1 -1
  151. package/dist-es/radio-button/RadioButton.css.js +1 -1
  152. package/dist-es/radio-button/RadioButtonIcon.css.js +1 -1
  153. package/dist-es/segmented-button-group/SegmentedButtonGroup.css.js +1 -1
  154. package/dist-es/slider/internal/SliderThumb.css.js +1 -1
  155. package/dist-es/slider/internal/SliderTooltip.css.js +1 -1
  156. package/dist-es/slider/internal/SliderTrack.css.js +1 -1
  157. package/dist-es/spinner/Spinner.css.js +1 -1
  158. package/dist-es/split-layout/SplitLayout.js +2 -1
  159. package/dist-es/split-layout/SplitLayout.js.map +1 -1
  160. package/dist-es/stack-layout/StackLayout.css.js +1 -1
  161. package/dist-es/stack-layout/StackLayout.js +4 -2
  162. package/dist-es/stack-layout/StackLayout.js.map +1 -1
  163. package/dist-es/stepper/internal/StepConnector.css.js +1 -1
  164. package/dist-es/switch/Switch.css.js +1 -1
  165. package/dist-es/tag/Tag.css.js +1 -1
  166. package/dist-es/text/Text.js.map +1 -1
  167. package/dist-es/theme/Theme.js.map +1 -1
  168. package/dist-es/toast/Toast.css.js +1 -1
  169. package/dist-es/toggle-button/ToggleButton.css.js +1 -1
  170. package/dist-es/toggle-button-group/ToggleButtonGroup.css.js +1 -1
  171. package/dist-es/tooltip/Tooltip.css.js +1 -1
  172. package/dist-es/tooltip/Tooltip.js.map +1 -1
  173. package/dist-types/aria-announcer/AriaAnnouncerContext.d.ts +2 -2
  174. package/dist-types/aria-announcer/useAriaAnnouncer.d.ts +2 -2
  175. package/dist-types/avatar/Avatar.d.ts +1 -1
  176. package/dist-types/border-item/BorderItem.d.ts +4 -4
  177. package/dist-types/border-layout/BorderLayout.d.ts +3 -3
  178. package/dist-types/breakpoints/BreakpointProvider.d.ts +1 -1
  179. package/dist-types/button/Button.d.ts +3 -3
  180. package/dist-types/combo-box/ComboBox.d.ts +3 -12
  181. package/dist-types/combo-box/useComboBox.d.ts +3 -3
  182. package/dist-types/dialog/DialogContext.d.ts +3 -2
  183. package/dist-types/dropdown/Dropdown.d.ts +3 -52
  184. package/dist-types/flex-item/FlexItem.d.ts +4 -4
  185. package/dist-types/flex-layout/FlexLayout.d.ts +7 -7
  186. package/dist-types/flow-layout/FlowLayout.d.ts +3 -3
  187. package/dist-types/form-field/FormField.d.ts +1 -1
  188. package/dist-types/form-field-context/FormFieldContext.d.ts +1 -1
  189. package/dist-types/grid-item/GridItem.d.ts +5 -5
  190. package/dist-types/grid-layout/GridLayout.d.ts +3 -3
  191. package/dist-types/interactable-card/InteractableCardGroupContext.d.ts +1 -1
  192. package/dist-types/list-box/ListBox.d.ts +3 -20
  193. package/dist-types/list-control/ListControlContext.d.ts +1 -1
  194. package/dist-types/list-control/ListControlState.d.ts +5 -5
  195. package/dist-types/menu/MenuContext.d.ts +1 -1
  196. package/dist-types/menu/MenuTrigger.d.ts +1 -1
  197. package/dist-types/overlay/OverlayContext.d.ts +1 -1
  198. package/dist-types/overlay/OverlayTrigger.d.ts +1 -1
  199. package/dist-types/pagination/usePagination.d.ts +1 -1
  200. package/dist-types/salt-provider/SaltProvider.d.ts +4 -4
  201. package/dist-types/semantic-icon-provider/SemanticIconProvider.d.ts +1 -1
  202. package/dist-types/slider/internal/useRangeSliderThumb.d.ts +1 -1
  203. package/dist-types/slider/internal/useSliderThumb.d.ts +1 -1
  204. package/dist-types/slider/internal/utils.d.ts +5 -5
  205. package/dist-types/spinner/Spinner.d.ts +2 -2
  206. package/dist-types/split-layout/SplitLayout.d.ts +3 -3
  207. package/dist-types/stack-layout/StackLayout.d.ts +3 -3
  208. package/dist-types/status-adornment/ErrorAdornment.d.ts +1 -1
  209. package/dist-types/status-adornment/StatusAdornment.d.ts +1 -1
  210. package/dist-types/status-adornment/SuccessAdornment.d.ts +1 -1
  211. package/dist-types/status-adornment/WarningAdornment.d.ts +1 -1
  212. package/dist-types/status-indicator/ValidationStatus.d.ts +1 -1
  213. package/dist-types/stepper/Step.d.ts +4 -4
  214. package/dist-types/stepper/Stepper.d.ts +1 -1
  215. package/dist-types/text/Text.d.ts +3 -3
  216. package/dist-types/theme/Accent.d.ts +2 -2
  217. package/dist-types/theme/ActionFont.d.ts +2 -2
  218. package/dist-types/theme/Corner.d.ts +2 -2
  219. package/dist-types/theme/Density.d.ts +1 -1
  220. package/dist-types/theme/HeadingFont.d.ts +2 -2
  221. package/dist-types/theme/Mode.d.ts +1 -1
  222. package/dist-types/theme/Theme.d.ts +3 -3
  223. package/dist-types/toggle-button-group/ToggleButtonGroupContext.d.ts +1 -1
  224. package/dist-types/tooltip/useAriaAnnounce.d.ts +1 -1
  225. package/dist-types/tooltip/useTooltip.d.ts +3 -3
  226. package/dist-types/types.d.ts +1 -1
  227. package/dist-types/utils/createChainedFunction.d.ts +1 -1
  228. package/dist-types/utils/inferElementType.d.ts +1 -1
  229. package/dist-types/utils/makePrefixer.d.ts +1 -1
  230. package/dist-types/utils/polymorphicTypes.d.ts +5 -5
  231. package/dist-types/utils/useFloatingUI/useFloatingUI.d.ts +3 -13
  232. package/dist-types/utils/useResponsiveProp.d.ts +2 -2
  233. package/dist-types/utils/useValueEffect.d.ts +1 -1
  234. package/dist-types/viewport/ViewportProvider.d.ts +1 -1
  235. package/package.json +1 -1
package/css/salt-core.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /* src/accordion/Accordion.css */
2
2
  .saltAccordion {
3
- border-top: var(--salt-size-border) var(--salt-separable-borderStyle) var(--salt-separable-tertiary-borderColor);
3
+ border-top: var(--salt-size-fixed-100) var(--salt-separable-borderStyle) var(--salt-separable-tertiary-borderColor);
4
4
  }
5
5
  .saltAccordion-error {
6
6
  border-top-color: var(--salt-status-error-borderColor);
@@ -17,7 +17,7 @@
17
17
 
18
18
  /* src/accordion/AccordionGroup.css */
19
19
  .saltAccordionGroup {
20
- border-bottom: var(--salt-size-border) var(--salt-separable-borderStyle) var(--salt-separable-tertiary-borderColor);
20
+ border-bottom: var(--salt-size-fixed-100) var(--salt-separable-borderStyle) var(--salt-separable-tertiary-borderColor);
21
21
  }
22
22
 
23
23
  /* src/accordion/AccordionHeader.css */
@@ -35,7 +35,7 @@
35
35
  color: var(--salt-content-primary-foreground);
36
36
  font-weight: var(--salt-text-fontWeight-strong);
37
37
  text-align: left;
38
- cursor: var(--salt-actionable-cursor-hover);
38
+ cursor: var(--salt-cursor-hover);
39
39
  box-sizing: border-box;
40
40
  -webkit-tap-highlight-color: transparent;
41
41
  }
@@ -76,7 +76,7 @@
76
76
  .saltAccordionHeader:disabled {
77
77
  background: transparent;
78
78
  color: var(--salt-content-primary-foreground-disabled);
79
- cursor: var(--salt-actionable-cursor-disabled);
79
+ cursor: var(--salt-cursor-disabled);
80
80
  }
81
81
 
82
82
  /* src/accordion/AccordionPanel.css */
@@ -286,7 +286,7 @@
286
286
  --banner-background: var(--salt-container-primary-background);
287
287
  background: var(--saltBanner-background, var(--banner-background));
288
288
  border-color: var(--saltBanner-borderColor, var(--banner-borderColor));
289
- border-width: var(--saltBanner-borderWidth, var(--salt-size-border));
289
+ border-width: var(--saltBanner-borderWidth, var(--salt-size-fixed-100));
290
290
  border-style: var(--saltBanner-borderStyle, var(--salt-container-borderStyle));
291
291
  border-radius: var(--saltBanner-borderRadius, var(--salt-palette-corner, 0));
292
292
  box-sizing: border-box;
@@ -355,15 +355,15 @@
355
355
 
356
356
  /* src/button/Button.css */
357
357
  .saltButton {
358
+ --button-borderWidth: var(--salt-size-fixed-100);
358
359
  align-items: var(--saltButton-alignItems, center);
359
360
  appearance: none;
360
361
  background: var(--saltButton-background, var(--button-background));
361
362
  border-color: var(--saltButton-borderColor, var(--button-borderColor, transparent));
362
363
  border-style: var(--saltButton-borderStyle, solid);
363
- border-width: var(--saltButton-borderWidth, var(--salt-size-border, 0));
364
+ border-width: var(--saltButton-borderWidth, var(--button-borderWidth));
364
365
  border-radius: var(--saltButton-borderRadius, var(--salt-palette-corner-weak, 0));
365
366
  color: var(--saltButton-text-color, var(--button-text-color));
366
- cursor: var(--saltButton-cursor, pointer);
367
367
  display: inline-flex;
368
368
  gap: var(--salt-spacing-50);
369
369
  justify-content: var(--saltButton-justifyContent, center);
@@ -372,7 +372,7 @@
372
372
  line-height: var(--saltButton-lineHeight, var(--salt-text-lineHeight));
373
373
  letter-spacing: var(--saltButton-letterSpacing, var(--salt-text-action-letterSpacing));
374
374
  text-transform: var(--saltButton-textTransform, var(--salt-text-action-textTransform));
375
- padding: 0 var(--saltButton-padding, calc(var(--salt-spacing-100) - var(--saltButton-borderWidth, var(--salt-size-border, 0))));
375
+ padding: 0 var(--saltButton-padding, calc(var(--salt-spacing-100) - var(--saltButton-borderWidth, var(--button-borderWidth))));
376
376
  margin: var(--saltButton-margin, 0);
377
377
  height: var(--saltButton-height, var(--salt-size-base));
378
378
  min-width: var(--saltButton-minWidth, unset);
@@ -399,17 +399,20 @@
399
399
  background: var(--saltButton-background-active-hover, var(--button-background));
400
400
  color: var(--saltButton-text-color-active-hover, var(--button-text-color));
401
401
  border-color: var(--saltButton-borderColor-hover, var(--button-borderColor-hover));
402
+ cursor: var(--salt-cursor-active);
402
403
  }
403
404
  .saltButton:hover {
404
405
  background: var(--saltButton-background-hover, var(--button-background-hover));
405
406
  color: var(--saltButton-text-color-hover, var(--button-text-color-hover));
406
407
  border-color: var(--saltButton-borderColor-hover, var(--button-borderColor-hover));
408
+ cursor: var(--salt-cursor-hover);
407
409
  }
408
410
  .saltButton:active,
409
411
  .saltButton.saltButton-active {
410
412
  background: var(--saltButton-background-active, var(--button-background-active));
411
413
  color: var(--saltButton-text-color-active, var(--button-text-color-active));
412
414
  border-color: var(--saltButton-borderColor-active, var(--button-borderColor-active));
415
+ cursor: var(--salt-cursor-active);
413
416
  }
414
417
  .saltButton[aria-expanded=true][aria-haspopup=menu],
415
418
  .saltButton[aria-expanded=true][aria-haspopup=dialog] {
@@ -425,7 +428,7 @@
425
428
  .saltButton-disabled:hover {
426
429
  background: var(--saltButton-background-disabled, var(--button-background-disabled));
427
430
  color: var(--saltButton-text-color-disabled, var(--button-text-color-disabled));
428
- cursor: var(--saltButton-cursor-disabled, var(--salt-actionable-cursor-disabled));
431
+ cursor: var(--saltButton-cursor-disabled, var(--salt-cursor-disabled));
429
432
  border-color: var(--saltButton-borderColor-disabled, var(--button-borderColor-disabled));
430
433
  }
431
434
  .saltButton-accented.saltButton-solid {
@@ -483,7 +486,7 @@
483
486
  --button-borderColor-hover: var(--salt-actionable-accented-borderColor);
484
487
  --button-borderColor-active: var(--salt-actionable-accented-borderColor);
485
488
  --button-borderColor-disabled: var(--salt-actionable-accented-borderColor);
486
- cursor: progress;
489
+ cursor: var(--salt-cursor-pending);
487
490
  }
488
491
  .saltButton-neutral.saltButton-solid {
489
492
  --button-text-color: var(--salt-actionable-bold-foreground);
@@ -540,7 +543,7 @@
540
543
  --button-borderColor-hover: var(--salt-actionable-borderColor);
541
544
  --button-borderColor-active: var(--salt-actionable-borderColor);
542
545
  --button-borderColor-disabled: var(--salt-actionable-borderColor);
543
- cursor: progress;
546
+ cursor: var(--salt-cursor-pending);
544
547
  }
545
548
  .saltButton-negative.saltButton-solid {
546
549
  --button-text-color: var(--salt-actionable-negative-bold-foreground);
@@ -597,7 +600,7 @@
597
600
  --button-borderColor-hover: var(--salt-actionable-negative-borderColor);
598
601
  --button-borderColor-active: var(--salt-actionable-negative-borderColor);
599
602
  --button-borderColor-disabled: var(--salt-actionable-negative-borderColor);
600
- cursor: progress;
603
+ cursor: var(--salt-cursor-pending);
601
604
  }
602
605
  .saltButton-positive.saltButton-solid {
603
606
  --button-text-color: var(--salt-actionable-positive-bold-foreground);
@@ -654,7 +657,7 @@
654
657
  --button-borderColor-hover: var(--salt-actionable-positive-borderColor);
655
658
  --button-borderColor-active: var(--salt-actionable-positive-borderColor);
656
659
  --button-borderColor-disabled: var(--salt-actionable-positive-borderColor);
657
- cursor: progress;
660
+ cursor: var(--salt-cursor-pending);
658
661
  }
659
662
  .saltButton-caution.saltButton-solid {
660
663
  --button-text-color: var(--salt-actionable-caution-bold-foreground);
@@ -711,7 +714,7 @@
711
714
  --button-borderColor-hover: var(--salt-actionable-caution-borderColor);
712
715
  --button-borderColor-active: var(--salt-actionable-caution-borderColor);
713
716
  --button-borderColor-disabled: var(--salt-actionable-caution-borderColor);
714
- cursor: progress;
717
+ cursor: var(--salt-cursor-pending);
715
718
  }
716
719
  .saltButton strong {
717
720
  font-weight: var(--salt-text-action-fontWeight-strong);
@@ -736,7 +739,7 @@
736
739
 
737
740
  /* src/card/Card.css */
738
741
  .saltCard {
739
- border-width: var(--saltCard-borderWidth, var(--salt-size-border));
742
+ border-width: var(--saltCard-borderWidth, var(--salt-size-fixed-100));
740
743
  border-style: var(--salt-container-borderStyle);
741
744
  padding: var(--saltCard-padding, var(--salt-spacing-200));
742
745
  position: relative;
@@ -769,27 +772,27 @@
769
772
  background-color: var(--saltCard-accent-color, var(--card-accent-color));
770
773
  }
771
774
  .saltCard-accentBottom::after {
772
- left: calc(-1 * var(--salt-size-border));
773
- bottom: calc(-1 * var(--salt-size-border));
775
+ left: calc(-1 * var(--salt-size-fixed-100));
776
+ bottom: calc(-1 * var(--salt-size-fixed-100));
774
777
  height: var(--salt-size-bar);
775
- width: calc(100% + calc(2 * var(--salt-size-border)));
778
+ width: calc(100% + var(--salt-size-fixed-200));
776
779
  }
777
780
  .saltCard-accentLeft::after {
778
- left: calc(-1 * var(--salt-size-border));
779
- top: calc(-1 * var(--salt-size-border));
780
- height: calc(100% + calc(2 * var(--salt-size-border)));
781
+ left: calc(-1 * var(--salt-size-fixed-100));
782
+ top: calc(-1 * var(--salt-size-fixed-100));
783
+ height: calc(100% + var(--salt-size-fixed-200));
781
784
  width: var(--salt-size-bar);
782
785
  }
783
786
  .saltCard-accentTop::after {
784
- left: calc(-1 * var(--salt-size-border));
785
- top: calc(-1 * var(--salt-size-border));
787
+ left: calc(-1 * var(--salt-size-fixed-100));
788
+ top: calc(-1 * var(--salt-size-fixed-100));
786
789
  height: var(--salt-size-bar);
787
- width: calc(100% + calc(2 * var(--salt-size-border)));
790
+ width: calc(100% + var(--salt-size-fixed-200));
788
791
  }
789
792
  .saltCard-accentRight::after {
790
- right: calc(-1 * var(--salt-size-border));
791
- top: calc(-1 * var(--salt-size-border));
792
- height: calc(100% + calc(2 * var(--salt-size-border)));
793
+ right: calc(-1 * var(--salt-size-fixed-100));
794
+ top: calc(-1 * var(--salt-size-fixed-100));
795
+ height: calc(100% + var(--salt-size-fixed-200));
793
796
  width: var(--salt-size-bar);
794
797
  }
795
798
  .saltCard-interactable {
@@ -799,7 +802,7 @@
799
802
  a:focus .saltCard-interactable,
800
803
  .saltCard-interactable:hover {
801
804
  box-shadow: var(--saltCard-boxShadow-hover, var(--salt-overlayable-shadow-hover));
802
- cursor: var(--saltCard-cursor-hover, var(--salt-selectable-cursor-hover));
805
+ cursor: var(--saltCard-cursor-hover, var(--salt-cursor-hover));
803
806
  border-color: var(--salt-actionable-accented-borderColor-hover);
804
807
  position: relative;
805
808
  }
@@ -825,7 +828,7 @@ a:focus .saltCard-interactable.saltCard-disabled,
825
828
  a:focus .saltCard-interactable.saltCard-disabled {
826
829
  border-color: var(--salt-container-primary-borderColor-disabled);
827
830
  color: var(--saltCard-color-disabled, var(--salt-content-primary-foreground-disabled));
828
- cursor: var(--saltCard-cursor-disabled, var(--salt-selectable-cursor-disabled));
831
+ cursor: var(--saltCard-cursor-disabled, var(--salt-cursor-disabled));
829
832
  outline: none;
830
833
  }
831
834
  .saltCard-disabled div {
@@ -837,7 +840,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
837
840
  display: inline-flex;
838
841
  gap: var(--salt-spacing-100);
839
842
  position: relative;
840
- cursor: var(--salt-selectable-cursor-hover);
843
+ cursor: var(--salt-cursor-hover);
841
844
  font-size: var(--salt-text-fontSize);
842
845
  line-height: var(--salt-text-lineHeight);
843
846
  font-family: var(--salt-text-fontFamily);
@@ -845,11 +848,11 @@ a:focus .saltCard-interactable.saltCard-disabled {
845
848
  }
846
849
  .saltCheckbox-disabled {
847
850
  color: var(--salt-content-primary-foreground-disabled);
848
- cursor: var(--salt-selectable-cursor-disabled);
851
+ cursor: var(--salt-cursor-disabled);
849
852
  }
850
853
  .saltCheckbox-readOnly {
851
854
  color: var(--salt-content-primary-foreground);
852
- cursor: var(--salt-selectable-cursor-readonly);
855
+ cursor: var(--salt-cursor-readonly);
853
856
  }
854
857
  .saltCheckbox-input,
855
858
  .saltCheckboxIcon {
@@ -920,7 +923,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
920
923
  min-width: var(--checkbox-size);
921
924
  height: var(--checkbox-size);
922
925
  min-height: var(--checkbox-size);
923
- border: var(--salt-size-border) var(--salt-selectable-borderStyle) var(--salt-selectable-borderColor);
926
+ border: var(--salt-size-fixed-100) var(--salt-selectable-borderStyle) var(--salt-selectable-borderColor);
924
927
  border-radius: var(--salt-palette-corner-weaker, 0);
925
928
  color: var(--salt-selectable-foreground);
926
929
  background: var(--salt-container-primary-background);
@@ -1011,7 +1014,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
1011
1014
  overflow-y: auto;
1012
1015
  z-index: var(--salt-zIndex-modal);
1013
1016
  height: min-content;
1014
- border: var(--salt-size-border) var(--salt-container-borderStyle) var(--salt-separable-tertiary-borderColor);
1017
+ border: var(--salt-size-fixed-100) var(--salt-container-borderStyle) var(--salt-separable-tertiary-borderColor);
1015
1018
  box-sizing: border-box;
1016
1019
  border-radius: var(--salt-palette-corner, 0);
1017
1020
  }
@@ -1127,7 +1130,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
1127
1130
  .saltDialogContent-scroll {
1128
1131
  margin-left: var(--salt-spacing-300);
1129
1132
  margin-right: var(--salt-spacing-300);
1130
- border-bottom: var(--salt-size-border) var(--salt-separable-borderStyle) var(--salt-separable-tertiary-borderColor);
1133
+ border-bottom: var(--salt-size-fixed-100) var(--salt-separable-borderStyle) var(--salt-separable-tertiary-borderColor);
1131
1134
  }
1132
1135
 
1133
1136
  /* src/dialog/DialogHeader.css */
@@ -1192,10 +1195,10 @@ a:focus .saltCard-interactable.saltCard-disabled {
1192
1195
  border: none;
1193
1196
  }
1194
1197
  .saltDivider-horizontal {
1195
- height: var(--salt-size-border);
1198
+ height: var(--salt-size-fixed-100);
1196
1199
  }
1197
1200
  .saltDivider-vertical {
1198
- width: var(--salt-size-border);
1201
+ width: var(--salt-size-fixed-100);
1199
1202
  height: auto;
1200
1203
  }
1201
1204
 
@@ -1285,9 +1288,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
1285
1288
  min-width: 4em;
1286
1289
  width: 100%;
1287
1290
  background: var(--dropdown-background);
1288
- cursor: var(--dropdown-cursor);
1289
1291
  min-height: var(--salt-size-base);
1290
- border: var(--dropdown-border);
1291
1292
  border-radius: var(--salt-palette-corner-weak, 0);
1292
1293
  display: inline-flex;
1293
1294
  align-items: center;
@@ -1302,11 +1303,11 @@ a:focus .saltCard-interactable.saltCard-disabled {
1302
1303
  overflow: hidden;
1303
1304
  }
1304
1305
  .saltDropdown:hover {
1305
- background: var(--saltDropdown-background-hover, var(--dropdown-background-hover));
1306
- cursor: var(--salt-selectable-cursor-hover);
1306
+ background: var(--dropdown-background-hover);
1307
+ cursor: var(--salt-cursor-hover);
1307
1308
  }
1308
1309
  .saltDropdown-bordered.saltDropdown {
1309
- border: var(--salt-size-border) var(--salt-editable-borderStyle) var(--dropdown-borderColor);
1310
+ border: var(--salt-size-fixed-100) var(--salt-editable-borderStyle) var(--dropdown-borderColor);
1310
1311
  }
1311
1312
  .saltDropdown-bordered.saltDropdown:hover {
1312
1313
  border-style: var(--salt-editable-borderStyle-hover);
@@ -1332,7 +1333,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
1332
1333
  bottom: 0;
1333
1334
  width: 100%;
1334
1335
  position: absolute;
1335
- border-bottom: var(--salt-size-border) var(--salt-editable-borderStyle) var(--dropdown-borderColor);
1336
+ border-bottom: var(--salt-size-fixed-100) var(--salt-editable-borderStyle) var(--dropdown-borderColor);
1336
1337
  }
1337
1338
  .saltDropdown:hover .saltDropdown-activationIndicator {
1338
1339
  border-bottom-style: var(--salt-editable-borderStyle-hover);
@@ -1340,7 +1341,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
1340
1341
  }
1341
1342
  .saltDropdown:focus .saltDropdown-activationIndicator,
1342
1343
  .saltDropdown:focus:hover .saltDropdown-activationIndicator {
1343
- border-bottom: var(--salt-size-border-strong) var(--salt-editable-borderStyle-active) var(--dropdown-borderColor-active);
1344
+ border-bottom: var(--salt-size-fixed-200) var(--salt-editable-borderStyle-active) var(--dropdown-borderColor-active);
1344
1345
  }
1345
1346
  .saltDropdown[aria-readonly=true] .saltDropdown-activationIndicator,
1346
1347
  .saltDropdown[aria-readonly=true]:hover .saltDropdown-activationIndicator {
@@ -1358,9 +1359,10 @@ a:focus .saltCard-interactable.saltCard-disabled {
1358
1359
  border-bottom-width: 0;
1359
1360
  }
1360
1361
  .saltDropdown-bordered.saltDropdown:focus .saltDropdown-activationIndicator {
1361
- border-bottom-width: calc(var(--salt-size-border-strong) - var(--salt-size-border));
1362
+ border-bottom-width: var(--salt-size-fixed-100);
1362
1363
  }
1363
1364
  .saltDropdown-primary {
1365
+ --dropdown-color: var(--salt-content-primary-foreground);
1364
1366
  --dropdown-background: var(--salt-editable-primary-background);
1365
1367
  --dropdown-background-active: var(--salt-editable-primary-background-active);
1366
1368
  --dropdown-background-hover: var(--salt-editable-primary-background-hover);
@@ -1372,6 +1374,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
1372
1374
  --dropdown-outlineColor: var(--salt-focused-outlineColor);
1373
1375
  }
1374
1376
  .saltDropdown-secondary {
1377
+ --dropdown-color: var(--salt-content-primary-foreground);
1375
1378
  --dropdown-background: var(--salt-editable-secondary-background);
1376
1379
  --dropdown-background-active: var(--salt-editable-secondary-background-active);
1377
1380
  --dropdown-background-hover: var(--salt-editable-secondary-background-active);
@@ -1383,6 +1386,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
1383
1386
  --dropdown-outlineColor: var(--salt-focused-outlineColor);
1384
1387
  }
1385
1388
  .saltDropdown-error {
1389
+ --dropdown-color: var(--salt-content-primary-foreground);
1386
1390
  --dropdown-background: var(--salt-status-error-background);
1387
1391
  --dropdown-background-active: var(--salt-status-error-background);
1388
1392
  --dropdown-background-hover: var(--salt-status-error-background);
@@ -1393,6 +1397,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
1393
1397
  --dropdown-outlineColor: var(--salt-status-error-borderColor);
1394
1398
  }
1395
1399
  .saltDropdown-warning {
1400
+ --dropdown-color: var(--salt-content-primary-foreground);
1396
1401
  --dropdown-background: var(--salt-status-warning-background);
1397
1402
  --dropdown-background-active: var(--salt-status-warning-background);
1398
1403
  --dropdown-background-hover: var(--salt-status-warning-background);
@@ -1403,6 +1408,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
1403
1408
  --dropdown-outlineColor: var(--salt-status-warning-borderColor);
1404
1409
  }
1405
1410
  .saltDropdown-success {
1411
+ --dropdown-color: var(--salt-content-primary-foreground);
1406
1412
  --dropdown-background: var(--salt-status-success-background);
1407
1413
  --dropdown-background-active: var(--salt-status-success-background);
1408
1414
  --dropdown-background-hover: var(--salt-status-success-background);
@@ -1415,17 +1421,17 @@ a:focus .saltCard-interactable.saltCard-disabled {
1415
1421
  .saltDropdown:focus,
1416
1422
  .saltDropdown:focus:hover {
1417
1423
  background: var(--dropdown-background-active);
1418
- cursor: var(--salt-selectable-cursor-hover);
1424
+ cursor: var(--salt-cursor-hover);
1419
1425
  outline: var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--dropdown-outlineColor);
1420
1426
  }
1421
1427
  .saltDropdown.saltDropdown[aria-readonly=true] {
1422
1428
  background: var(--dropdown-background-readonly);
1423
- cursor: var(--salt-selectable-cursor-readonly);
1429
+ cursor: var(--salt-cursor-readonly);
1424
1430
  }
1425
1431
  .saltDropdown.saltDropdown:disabled,
1426
1432
  .saltDropdown.saltDropdown:disabled:hover {
1427
1433
  background: var(--dropdown-background-disabled);
1428
- cursor: var(--salt-selectable-cursor-disabled);
1434
+ cursor: var(--salt-cursor-disabled);
1429
1435
  color: var(--salt-content-primary-foreground-disabled);
1430
1436
  }
1431
1437
  .saltDropdown-content {
@@ -1454,7 +1460,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
1454
1460
  text-align: center;
1455
1461
  align-items: center;
1456
1462
  justify-content: center;
1457
- border: var(--saltFileDropZone-border, var(--salt-size-border-strong) var(--salt-target-borderStyle) var(--salt-container-primary-borderColor));
1463
+ border: var(--saltFileDropZone-border, var(--salt-size-fixed-200) var(--salt-target-borderStyle) var(--salt-container-primary-borderColor));
1458
1464
  border-radius: var(--saltFileDropZone-borderRadius, var(--salt-palette-corner, 0));
1459
1465
  flex-direction: column;
1460
1466
  padding: var(--salt-spacing-200);
@@ -1467,21 +1473,21 @@ a:focus .saltCard-interactable.saltCard-disabled {
1467
1473
  }
1468
1474
  .saltFileDropZone-active {
1469
1475
  background: var(--salt-target-background-hover);
1470
- border: var(--salt-size-border-strong) var(--salt-target-borderStyle-hover) var(--salt-target-borderColor-hover);
1476
+ border: var(--salt-size-fixed-200) var(--salt-target-borderStyle-hover) var(--salt-target-borderColor-hover);
1471
1477
  }
1472
1478
  .saltFileDropZone-error {
1473
- border: var(--salt-size-border-strong) var(--salt-target-borderStyle) var(--salt-status-error-borderColor);
1479
+ border: var(--salt-size-fixed-200) var(--salt-target-borderStyle) var(--salt-status-error-borderColor);
1474
1480
  }
1475
1481
  .saltFileDropZone-success {
1476
- border: var(--salt-size-border-strong) var(--salt-target-borderStyle) var(--salt-status-success-borderColor);
1482
+ border: var(--salt-size-fixed-200) var(--salt-target-borderStyle) var(--salt-status-success-borderColor);
1477
1483
  }
1478
1484
  .saltFileDropZone .input-hidden {
1479
1485
  display: none;
1480
1486
  }
1481
1487
  .saltFileDropZone-disabled {
1482
1488
  background: var(--salt-container-primary-background-disabled);
1483
- border: var(--salt-size-border-strong) var(--salt-target-borderStyle) var(--salt-container-primary-borderColor-disabled);
1484
- cursor: var(--salt-target-cursor-disabled);
1489
+ border: var(--salt-size-fixed-200) var(--salt-target-borderStyle) var(--salt-container-primary-borderColor-disabled);
1490
+ cursor: var(--salt-cursor-disabled);
1485
1491
  color: var(--salt-content-primary-foreground-disabled);
1486
1492
  }
1487
1493
 
@@ -1512,7 +1518,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
1512
1518
  --flexLayout-wrap: nowrap;
1513
1519
  --flexLayout-justify: flex-start;
1514
1520
  --flexLayout-align: stretch;
1515
- --flexLayout-separator: var(--salt-size-border);
1521
+ --flexLayout-separator: var(--salt-size-fixed-100);
1516
1522
  }
1517
1523
  .saltFlexLayout {
1518
1524
  gap: var(--flexLayout-gap);
@@ -1723,10 +1729,10 @@ a:focus .saltCard-interactable.saltCard-disabled {
1723
1729
  }
1724
1730
  .saltInput:hover {
1725
1731
  background: var(--saltInput-background-hover, var(--input-background-hover));
1726
- cursor: var(--salt-editable-cursor-hover);
1732
+ cursor: var(--salt-cursor-text);
1727
1733
  }
1728
1734
  .saltInput-bordered.saltInput {
1729
- border: var(--salt-size-border) var(--salt-editable-borderStyle) var(--input-borderColor);
1735
+ border: var(--salt-size-fixed-100) var(--salt-editable-borderStyle) var(--input-borderColor);
1730
1736
  }
1731
1737
  .saltInput-bordered.saltInput:hover {
1732
1738
  border-style: var(--salt-editable-borderStyle-hover);
@@ -1752,7 +1758,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
1752
1758
  bottom: 0;
1753
1759
  width: 100%;
1754
1760
  position: absolute;
1755
- border-bottom: var(--salt-size-border) var(--salt-editable-borderStyle) var(--input-borderColor);
1761
+ border-bottom: var(--salt-size-fixed-100) var(--salt-editable-borderStyle) var(--input-borderColor);
1756
1762
  }
1757
1763
  .saltInput:hover .saltInput-activationIndicator {
1758
1764
  border-bottom-style: var(--salt-editable-borderStyle-hover);
@@ -1760,7 +1766,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
1760
1766
  }
1761
1767
  .saltInput-focused .saltInput-activationIndicator,
1762
1768
  .saltInput-focused:hover .saltInput-activationIndicator {
1763
- border-bottom: var(--salt-size-border-strong) var(--salt-editable-borderStyle-active) var(--input-borderColor-active);
1769
+ border-bottom: var(--salt-size-fixed-200) var(--salt-editable-borderStyle-active) var(--input-borderColor-active);
1764
1770
  }
1765
1771
  .saltInput-readOnly .saltInput-activationIndicator,
1766
1772
  .saltInput-readOnly:hover .saltInput-activationIndicator {
@@ -1778,7 +1784,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
1778
1784
  border-bottom-width: 0;
1779
1785
  }
1780
1786
  .saltInput-bordered.saltInput-focused .saltInput-activationIndicator {
1781
- border-bottom-width: calc(var(--salt-size-border-strong) - var(--salt-size-border));
1787
+ border-bottom-width: var(--salt-size-fixed-100);
1782
1788
  }
1783
1789
  .saltInput-primary {
1784
1790
  --input-background: var(--salt-editable-primary-background);
@@ -1835,17 +1841,17 @@ a:focus .saltCard-interactable.saltCard-disabled {
1835
1841
  .saltInput-focused,
1836
1842
  .saltInput-focused:hover {
1837
1843
  background: var(--saltInput-background-active, var(--input-background-active));
1838
- cursor: var(--salt-editable-cursor-active);
1844
+ cursor: var(--salt-cursor-text);
1839
1845
  outline: var(--saltInput-outline, var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--input-outlineColor));
1840
1846
  }
1841
1847
  .saltInput.saltInput-readOnly {
1842
1848
  background: var(--input-background-readonly);
1843
- cursor: var(--salt-editable-cursor-readonly);
1849
+ cursor: var(--salt-cursor-readonly);
1844
1850
  }
1845
1851
  .saltInput.saltInput-disabled,
1846
1852
  .saltInput.saltInput-disabled:hover {
1847
1853
  background: var(--input-background-disabled);
1848
- cursor: var(--salt-editable-cursor-disabled);
1854
+ cursor: var(--salt-cursor-disabled);
1849
1855
  color: var(--saltInput-color-disabled, var(--salt-content-primary-foreground-disabled));
1850
1856
  }
1851
1857
  .saltInput-startAdornmentContainer {
@@ -1877,7 +1883,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
1877
1883
  }
1878
1884
  .saltInput-startAdornmentContainer > .saltButton,
1879
1885
  .saltInput-endAdornmentContainer > .saltButton {
1880
- --saltButton-padding: calc(var(--salt-spacing-50) - var(--salt-size-border));
1886
+ --saltButton-padding: calc(var(--salt-spacing-50) - var(--button-borderWidth));
1881
1887
  --saltButton-height: calc(var(--salt-size-base) - var(--salt-spacing-100));
1882
1888
  --saltButton-borderRadius: var(--salt-palette-corner-weaker);
1883
1889
  }
@@ -1915,7 +1921,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
1915
1921
 
1916
1922
  /* src/interactable-card/InteractableCard.css */
1917
1923
  .saltInteractableCard {
1918
- border-width: var(--saltInteractableCard-borderWidth, var(--salt-size-border));
1924
+ border-width: var(--saltInteractableCard-borderWidth, var(--salt-size-fixed-100));
1919
1925
  border-style: var(--saltInteractableCard-borderStyle, var(--salt-container-borderStyle));
1920
1926
  border-radius: var(--saltInteractableCard-borderRadius, var(--salt-palette-corner, 0));
1921
1927
  box-shadow: var(--salt-overlayable-shadow);
@@ -1945,31 +1951,31 @@ a:focus .saltCard-interactable.saltCard-disabled {
1945
1951
  background-color: var(--saltInteractableCard-accent-color, var(--card-accent-color));
1946
1952
  }
1947
1953
  .saltInteractableCard-accentBottom::after {
1948
- left: calc(-1 * var(--salt-size-border));
1949
- bottom: calc(-1 * var(--salt-size-border));
1954
+ left: calc(-1 * var(--salt-size-fixed-100));
1955
+ bottom: calc(-1 * var(--salt-size-fixed-100));
1950
1956
  height: var(--salt-size-bar);
1951
- width: calc(100% + calc(2 * var(--salt-size-border)));
1957
+ width: calc(100% + var(--salt-size-fixed-200));
1952
1958
  }
1953
1959
  .saltInteractableCard-accentLeft::after {
1954
- left: calc(-1 * var(--salt-size-border));
1955
- top: calc(-1 * var(--salt-size-border));
1956
- height: calc(100% + calc(2 * var(--salt-size-border)));
1960
+ left: calc(-1 * var(--salt-size-fixed-100));
1961
+ top: calc(-1 * var(--salt-size-fixed-100));
1962
+ height: calc(100% + var(--salt-size-fixed-200));
1957
1963
  width: var(--salt-size-bar);
1958
1964
  }
1959
1965
  .saltInteractableCard-accentTop::after {
1960
- left: calc(-1 * var(--salt-size-border));
1961
- top: calc(-1 * var(--salt-size-border));
1966
+ left: calc(-1 * var(--salt-size-fixed-100));
1967
+ top: calc(-1 * var(--salt-size-fixed-100));
1962
1968
  height: var(--salt-size-bar);
1963
- width: calc(100% + calc(2 * var(--salt-size-border)));
1969
+ width: calc(100% + var(--salt-size-fixed-200));
1964
1970
  }
1965
1971
  .saltInteractableCard-accentRight::after {
1966
- right: calc(-1 * var(--salt-size-border));
1967
- top: calc(-1 * var(--salt-size-border));
1968
- height: calc(100% + calc(2 * var(--salt-size-border)));
1972
+ right: calc(-1 * var(--salt-size-fixed-100));
1973
+ top: calc(-1 * var(--salt-size-fixed-100));
1974
+ height: calc(100% + var(--salt-size-fixed-200));
1969
1975
  width: var(--salt-size-bar);
1970
1976
  }
1971
1977
  .saltInteractableCard:focus-visible {
1972
- cursor: var(--salt-selectable-cursor-hover);
1978
+ cursor: var(--salt-cursor-hover);
1973
1979
  box-shadow: var(--salt-overlayable-shadow-hover);
1974
1980
  color: var(--saltInteractableCard-color-focus, var(--salt-content-primary-foreground));
1975
1981
  outline-color: var(--salt-focused-outlineColor);
@@ -1979,19 +1985,19 @@ a:focus .saltCard-interactable.saltCard-disabled {
1979
1985
  }
1980
1986
  @media (hover: hover) {
1981
1987
  .saltInteractableCard:hover {
1982
- cursor: var(--salt-selectable-cursor-hover);
1988
+ cursor: var(--salt-cursor-hover);
1983
1989
  box-shadow: var(--salt-overlayable-shadow-hover);
1984
1990
  border-color: var(--salt-actionable-accented-borderColor-hover);
1985
1991
  }
1986
1992
  .saltInteractableCard-disabled:hover {
1987
- cursor: var(--salt-selectable-cursor-disabled);
1993
+ cursor: var(--salt-cursor-disabled);
1988
1994
  box-shadow: none;
1989
1995
  }
1990
1996
  }
1991
1997
  .saltInteractableCard-selected,
1992
1998
  .saltInteractableCard:active,
1993
1999
  .saltInteractableCard-active {
1994
- cursor: var(--salt-selectable-cursor-hover);
2000
+ cursor: var(--salt-cursor-hover);
1995
2001
  box-shadow: var(--salt-overlayable-shadow);
1996
2002
  border-color: var(--salt-actionable-accented-borderColor-active);
1997
2003
  }
@@ -2000,7 +2006,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
2000
2006
  .saltInteractableCard-disabled:active {
2001
2007
  box-shadow: none;
2002
2008
  color: var(--salt-content-primary-foreground-disabled);
2003
- cursor: var(--salt-selectable-cursor-disabled);
2009
+ cursor: var(--salt-cursor-disabled);
2004
2010
  outline: none;
2005
2011
  --card-accent-color: var(--salt-accent-background-disabled);
2006
2012
  }
@@ -2129,7 +2135,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
2129
2135
  .saltLinkCard {
2130
2136
  border-radius: var(--saltLinkCard-borderRadius, var(--salt-palette-corner, 0));
2131
2137
  border-style: var(--saltLinkCard-borderStyle, var(--salt-container-borderStyle));
2132
- border-width: var(--saltLinkCard-borderWidth, var(--salt-size-border));
2138
+ border-width: var(--saltLinkCard-borderWidth, var(--salt-size-fixed-100));
2133
2139
  box-shadow: var(--salt-overlayable-shadow);
2134
2140
  display: block;
2135
2141
  overflow: hidden;
@@ -2157,31 +2163,31 @@ a:focus .saltCard-interactable.saltCard-disabled {
2157
2163
  background-color: var(--saltLinkCard-accent-color, var(--linkCard-accent-color));
2158
2164
  }
2159
2165
  .saltLinkCard-accentBottom::after {
2160
- left: calc(-1 * var(--salt-size-border));
2161
- bottom: calc(-1 * var(--salt-size-border));
2166
+ left: calc(-1 * var(--salt-size-fixed-100));
2167
+ bottom: calc(-1 * var(--salt-size-fixed-100));
2162
2168
  height: var(--salt-size-bar);
2163
- width: calc(100% + calc(2 * var(--salt-size-border)));
2169
+ width: calc(100% + var(--salt-size-fixed-200));
2164
2170
  }
2165
2171
  .saltLinkCard-accentLeft::after {
2166
- left: calc(-1 * var(--salt-size-border));
2167
- top: calc(-1 * var(--salt-size-border));
2168
- height: calc(100% + calc(2 * var(--salt-size-border)));
2172
+ left: calc(-1 * var(--salt-size-fixed-100));
2173
+ top: calc(-1 * var(--salt-size-fixed-100));
2174
+ height: calc(100% + var(--salt-size-fixed-200));
2169
2175
  width: var(--salt-size-bar);
2170
2176
  }
2171
2177
  .saltLinkCard-accentTop::after {
2172
- left: calc(-1 * var(--salt-size-border));
2173
- top: calc(-1 * var(--salt-size-border));
2178
+ left: calc(-1 * var(--salt-size-fixed-100));
2179
+ top: calc(-1 * var(--salt-size-fixed-100));
2174
2180
  height: var(--salt-size-bar);
2175
- width: calc(100% + calc(2 * var(--salt-size-border)));
2181
+ width: calc(100% + var(--salt-size-fixed-200));
2176
2182
  }
2177
2183
  .saltLinkCard-accentRight::after {
2178
- right: calc(-1 * var(--salt-size-border));
2179
- top: calc(-1 * var(--salt-size-border));
2180
- height: calc(100% + calc(2 * var(--salt-size-border)));
2184
+ right: calc(-1 * var(--salt-size-fixed-100));
2185
+ top: calc(-1 * var(--salt-size-fixed-100));
2186
+ height: calc(100% + var(--salt-size-fixed-200));
2181
2187
  width: var(--salt-size-bar);
2182
2188
  }
2183
2189
  .saltLinkCard:focus-visible {
2184
- cursor: var(--salt-selectable-cursor-hover);
2190
+ cursor: var(--salt-cursor-hover);
2185
2191
  box-shadow: var(--salt-overlayable-shadow-hover);
2186
2192
  outline-color: var(--salt-focused-outlineColor);
2187
2193
  outline-style: var(--salt-focused-outlineStyle);
@@ -2191,13 +2197,13 @@ a:focus .saltCard-interactable.saltCard-disabled {
2191
2197
  }
2192
2198
  @media (hover: hover) {
2193
2199
  .saltLinkCard:hover {
2194
- cursor: var(--salt-selectable-cursor-hover);
2200
+ cursor: var(--salt-cursor-hover);
2195
2201
  box-shadow: var(--salt-overlayable-shadow-hover);
2196
2202
  border-color: var(--salt-actionable-accented-borderColor-hover);
2197
2203
  }
2198
2204
  }
2199
2205
  .saltLinkCard:active {
2200
- cursor: var(--salt-selectable-cursor-active);
2206
+ cursor: var(--salt-cursor-active);
2201
2207
  border-color: var(--salt-actionable-accented-borderColor-active);
2202
2208
  box-shadow: var(--salt-overlayable-shadow);
2203
2209
  }
@@ -2206,7 +2212,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
2206
2212
  .saltListBox {
2207
2213
  display: flex;
2208
2214
  flex-direction: column;
2209
- gap: var(--salt-size-border);
2215
+ gap: var(--salt-spacing-fixed-100);
2210
2216
  background: var(--salt-container-primary-background);
2211
2217
  overflow: auto;
2212
2218
  padding-top: 1px;
@@ -2217,7 +2223,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
2217
2223
  max-height: inherit;
2218
2224
  }
2219
2225
  .saltListBox-bordered {
2220
- border: var(--salt-size-border) var(--salt-container-borderStyle) var(--salt-container-primary-borderColor);
2226
+ border: var(--salt-size-fixed-100) var(--salt-container-borderStyle) var(--salt-container-primary-borderColor);
2221
2227
  border-radius: var(--salt-palette-corner, 0);
2222
2228
  }
2223
2229
  .saltListBox:focus-visible {
@@ -2239,7 +2245,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
2239
2245
  box-sizing: border-box;
2240
2246
  }
2241
2247
  .saltMenuGroup {
2242
- border-top: var(--salt-size-border) var(--salt-separable-borderStyle) var(--salt-separable-tertiary-borderColor);
2248
+ border-top: var(--salt-size-fixed-100) var(--salt-separable-borderStyle) var(--salt-separable-tertiary-borderColor);
2243
2249
  }
2244
2250
  .saltMenuGroup:first-of-type {
2245
2251
  border-top: 0;
@@ -2259,13 +2265,13 @@ a:focus .saltCard-interactable.saltCard-disabled {
2259
2265
  display: flex;
2260
2266
  gap: var(--salt-spacing-100);
2261
2267
  position: relative;
2262
- cursor: var(--salt-selectable-cursor-hover);
2268
+ cursor: var(--salt-cursor-hover);
2263
2269
  box-sizing: border-box;
2264
2270
  flex-shrink: 0;
2265
2271
  }
2266
2272
  .saltMenuItem:focus-visible {
2267
2273
  outline: var(--salt-focused-outline);
2268
- outline-offset: calc(var(--salt-size-border) * -2);
2274
+ outline-offset: calc(var(--salt-size-fixed-100) * -2);
2269
2275
  }
2270
2276
  .saltMenuItem:hover {
2271
2277
  outline: none;
@@ -2276,20 +2282,20 @@ a:focus .saltCard-interactable.saltCard-disabled {
2276
2282
  }
2277
2283
  .saltMenuItem:active {
2278
2284
  background: var(--salt-selectable-background-selected);
2279
- box-shadow: 0 calc(var(--salt-size-border) * -1) 0 0 var(--salt-selectable-borderColor-selected), 0 var(--salt-size-border) 0 0 var(--salt-selectable-borderColor-selected);
2285
+ box-shadow: 0 calc(var(--salt-size-fixed-100) * -1) 0 0 var(--salt-selectable-borderColor-selected), 0 var(--salt-size-fixed-100) 0 0 var(--salt-selectable-borderColor-selected);
2280
2286
  }
2281
2287
  .saltMenuItem[aria-disabled=true],
2282
2288
  .saltMenuItem[aria-disabled=true]:active {
2283
2289
  background: var(--salt-selectable-background-disabled);
2284
2290
  color: var(--salt-content-primary-foreground-disabled);
2285
- cursor: var(--salt-selectable-cursor-disabled);
2291
+ cursor: var(--salt-cursor-disabled);
2286
2292
  box-shadow: none;
2287
2293
  }
2288
2294
  .saltMenuItem-blurActive {
2289
2295
  z-index: var(--salt-zIndex-default);
2290
2296
  background: var(--salt-selectable-background-selected);
2291
- box-shadow: 0 calc(var(--salt-size-border) * -1) 0 0 var(--salt-selectable-borderColor-selected), 0 var(--salt-size-border) 0 0 var(--salt-selectable-borderColor-selected);
2292
- box-shadow: 0 calc(var(--salt-size-border) * -1) 0 0 var(--salt-selectable-borderColor-selected), 0 var(--salt-size-border) 0 0 var(--salt-selectable-borderColor-selected);
2297
+ box-shadow: 0 calc(var(--salt-size-fixed-100) * -1) 0 0 var(--salt-selectable-borderColor-selected), 0 var(--salt-size-fixed-100) 0 0 var(--salt-selectable-borderColor-selected);
2298
+ box-shadow: 0 calc(var(--salt-size-fixed-100) * -1) 0 0 var(--salt-selectable-borderColor-selected), 0 var(--salt-size-fixed-100) 0 0 var(--salt-selectable-borderColor-selected);
2293
2299
  }
2294
2300
  .saltMenuItem .saltIcon:not(.saltCheckboxIcon-icon) {
2295
2301
  min-height: var(--salt-text-lineHeight);
@@ -2301,7 +2307,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
2301
2307
  /* src/menu/MenuPanel.css */
2302
2308
  .saltMenuPanel {
2303
2309
  background: var(--salt-container-primary-background);
2304
- border: var(--salt-size-border) var(--salt-selectable-borderStyle-selected) var(--salt-selectable-borderColor-selected);
2310
+ border: var(--salt-size-fixed-100) var(--salt-selectable-borderStyle-selected) var(--salt-selectable-borderColor-selected);
2305
2311
  overflow: hidden;
2306
2312
  overflow-y: auto;
2307
2313
  min-width: 10em;
@@ -2314,7 +2320,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
2314
2320
  .saltMenuPanel-container {
2315
2321
  display: flex;
2316
2322
  flex-direction: column;
2317
- gap: var(--salt-size-border);
2323
+ gap: var(--salt-spacing-fixed-100);
2318
2324
  max-height: inherit;
2319
2325
  min-height: inherit;
2320
2326
  }
@@ -2345,10 +2351,10 @@ a:focus .saltCard-interactable.saltCard-disabled {
2345
2351
  }
2346
2352
  .saltMultilineInput:hover {
2347
2353
  background: var(--multilineInput-background-hover);
2348
- cursor: var(--salt-editable-cursor-hover);
2354
+ cursor: var(--salt-cursor-text);
2349
2355
  }
2350
2356
  .saltMultilineInput-bordered.saltMultilineInput {
2351
- border: var(--salt-size-border) var(--salt-editable-borderStyle) var(--multilineInput-borderColor);
2357
+ border: var(--salt-size-fixed-100) var(--salt-editable-borderStyle) var(--multilineInput-borderColor);
2352
2358
  }
2353
2359
  .saltMultilineInput-bordered.saltMultilineInput:hover {
2354
2360
  border-style: var(--salt-editable-borderStyle-hover);
@@ -2374,7 +2380,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
2374
2380
  bottom: 0;
2375
2381
  width: 100%;
2376
2382
  position: absolute;
2377
- border-bottom: var(--salt-size-border) var(--salt-editable-borderStyle) var(--multilineInput-borderColor);
2383
+ border-bottom: var(--salt-size-fixed-100) var(--salt-editable-borderStyle) var(--multilineInput-borderColor);
2378
2384
  }
2379
2385
  .saltMultilineInput:hover .saltMultilineInput-activationIndicator {
2380
2386
  border-bottom-style: var(--salt-editable-borderStyle-hover);
@@ -2382,7 +2388,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
2382
2388
  }
2383
2389
  .saltMultilineInput-focused .saltMultilineInput-activationIndicator,
2384
2390
  .saltMultilineInput-focused:hover .saltMultilineInput-activationIndicator {
2385
- border-bottom: var(--salt-size-border-strong) var(--salt-editable-borderStyle-active) var(--multilineInput-borderColor-active);
2391
+ border-bottom: var(--salt-size-fixed-200) var(--salt-editable-borderStyle-active) var(--multilineInput-borderColor-active);
2386
2392
  }
2387
2393
  .saltMultilineInput-readOnly .saltMultilineInput-activationIndicator,
2388
2394
  .saltMultilineInput-readOnly:hover .saltMultilineInput-activationIndicator {
@@ -2400,7 +2406,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
2400
2406
  border-bottom-width: 0;
2401
2407
  }
2402
2408
  .saltMultilineInput-bordered.saltMultilineInput-focused .saltMultilineInput-activationIndicator {
2403
- border-bottom-width: calc(var(--salt-size-border-strong) - var(--salt-size-border));
2409
+ border-bottom-width: var(--salt-size-fixed-100);
2404
2410
  }
2405
2411
  .saltMultilineInput-primary {
2406
2412
  --multilineInput-background: var(--salt-editable-primary-background);
@@ -2457,17 +2463,17 @@ a:focus .saltCard-interactable.saltCard-disabled {
2457
2463
  .saltMultilineInput-focused,
2458
2464
  .saltMultilineInput-focused:hover {
2459
2465
  background: var(--multilineInput-background-active);
2460
- cursor: var(--salt-editable-cursor-active);
2466
+ cursor: var(--salt-cursor-text);
2461
2467
  outline: var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--multilineInput-outlineColor);
2462
2468
  }
2463
2469
  .saltMultilineInput.saltMultilineInput-readOnly {
2464
2470
  background: var(--multilineInput-background-readonly);
2465
- cursor: var(--salt-editable-cursor-readonly);
2471
+ cursor: var(--salt-cursor-readonly);
2466
2472
  }
2467
2473
  .saltMultilineInput.saltMultilineInput-disabled,
2468
2474
  .saltMultilineInput.saltMultilineInput-disabled:hover {
2469
2475
  background: var(--input-background-disabled);
2470
- cursor: var(--salt-editable-cursor-disabled);
2476
+ cursor: var(--salt-cursor-disabled);
2471
2477
  color: var(--salt-content-primary-foreground-disabled);
2472
2478
  }
2473
2479
  .saltMultilineInput.saltMultilineInput-withAdornmentRow {
@@ -2512,7 +2518,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
2512
2518
  }
2513
2519
  .saltMultilineInput-startAdornmentContainer > .saltButton,
2514
2520
  .saltMultilineInput-endAdornmentContainer > .saltButton {
2515
- --saltButton-padding: calc(var(--salt-spacing-50) - var(--salt-size-border));
2521
+ --saltButton-padding: calc(var(--salt-spacing-50) - var(--button-borderWidth));
2516
2522
  --saltButton-height: calc(var(--salt-size-base) - var(--salt-spacing-100));
2517
2523
  --saltButton-borderRadius: var(--salt-palette-corner-weaker);
2518
2524
  }
@@ -2564,7 +2570,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
2564
2570
  font: inherit;
2565
2571
  color: inherit;
2566
2572
  text-decoration: none;
2567
- cursor: var(--salt-selectable-cursor-hover);
2573
+ cursor: var(--salt-cursor-hover);
2568
2574
  transition: all var(--salt-duration-instant) ease-in-out;
2569
2575
  box-sizing: border-box;
2570
2576
  }
@@ -2666,7 +2672,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
2666
2672
  display: flex;
2667
2673
  gap: var(--salt-spacing-100);
2668
2674
  position: relative;
2669
- cursor: var(--salt-selectable-cursor-hover);
2675
+ cursor: var(--salt-cursor-hover);
2670
2676
  box-sizing: border-box;
2671
2677
  flex-shrink: 0;
2672
2678
  }
@@ -2675,7 +2681,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
2675
2681
  }
2676
2682
  .saltOption-focusVisible {
2677
2683
  outline: var(--salt-focused-outline);
2678
- outline-offset: calc(var(--salt-size-border) * -2);
2684
+ outline-offset: calc(var(--salt-size-fixed-100) * -2);
2679
2685
  }
2680
2686
  .saltOption:hover {
2681
2687
  background: var(--salt-selectable-background-hover);
@@ -2684,13 +2690,13 @@ a:focus .saltCard-interactable.saltCard-disabled {
2684
2690
  z-index: var(--salt-zIndex-default);
2685
2691
  background: var(--salt-selectable-background-selected);
2686
2692
  box-shadow:
2687
- calc(var(--salt-size-border) * -2) 0 0 0 var(--salt-selectable-background-hover),
2688
- calc(var(--salt-size-border) * -1) 0 0 var(--salt-size-border) var(--salt-selectable-borderColor-selected),
2689
- 0 calc(var(--salt-size-border) * -1) 0 var(--salt-selectable-borderColor-selected);
2693
+ calc(var(--salt-size-fixed-100) * -2) 0 0 0 var(--salt-selectable-background-hover),
2694
+ calc(var(--salt-size-fixed-100) * -1) 0 0 var(--salt-size-fixed-100) var(--salt-selectable-borderColor-selected),
2695
+ 0 calc(var(--salt-size-fixed-100) * -1) 0 var(--salt-selectable-borderColor-selected);
2690
2696
  }
2691
2697
  .saltOption[aria-disabled=true] {
2692
2698
  color: var(--salt-content-primary-foreground-disabled);
2693
- cursor: var(--salt-selectable-cursor-disabled);
2699
+ cursor: var(--salt-cursor-disabled);
2694
2700
  }
2695
2701
  .saltOption .saltIcon:not(.saltCheckboxIcon-icon) {
2696
2702
  min-height: var(--salt-text-lineHeight);
@@ -2711,7 +2717,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
2711
2717
  box-sizing: border-box;
2712
2718
  }
2713
2719
  .saltOptionGroup {
2714
- border-top: var(--salt-size-border) var(--salt-separable-borderStyle) var(--salt-separable-tertiary-borderColor);
2720
+ border-top: var(--salt-size-fixed-100) var(--salt-separable-borderStyle) var(--salt-separable-tertiary-borderColor);
2715
2721
  }
2716
2722
  .saltOptionGroup:first-of-type {
2717
2723
  border-top: 0;
@@ -2720,7 +2726,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
2720
2726
  /* src/option/OptionList.css */
2721
2727
  .saltOptionList {
2722
2728
  background: var(--salt-container-primary-background);
2723
- border: var(--salt-size-border) var(--salt-selectable-borderStyle-selected) var(--salt-selectable-borderColor-selected);
2729
+ border: var(--salt-size-fixed-100) var(--salt-selectable-borderStyle-selected) var(--salt-selectable-borderColor-selected);
2724
2730
  border-radius: var(--salt-palette-corner, 0);
2725
2731
  overflow: hidden;
2726
2732
  overflow-y: auto;
@@ -2732,7 +2738,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
2732
2738
  .saltOptionList-container {
2733
2739
  display: flex;
2734
2740
  flex-direction: column;
2735
- gap: var(--salt-size-border);
2741
+ gap: var(--salt-spacing-fixed-100);
2736
2742
  max-height: inherit;
2737
2743
  min-height: inherit;
2738
2744
  }
@@ -2779,7 +2785,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
2779
2785
  line-height: var(--saltOverlay-lineHeight, var(--salt-text-lineHeight));
2780
2786
  border-color: var(--overlay-borderColor);
2781
2787
  border-style: var(--saltOverlay-borderStyle, var(--salt-container-borderStyle));
2782
- border-width: var(--saltOverlay-borderWidth, var(--salt-size-border));
2788
+ border-width: var(--saltOverlay-borderWidth, var(--salt-size-fixed-100));
2783
2789
  border-radius: var(--saltOverlay-borderRadius, var(--salt-palette-corner, 0));
2784
2790
  background: var(--overlay-background);
2785
2791
  box-shadow: var(--saltOverlay-boxShadow, var(--salt-overlayable-shadow-popout));
@@ -2812,12 +2818,12 @@ a:focus .saltCard-interactable.saltCard-disabled {
2812
2818
  }
2813
2819
  .saltOverlayPanelContent-overflow {
2814
2820
  padding-right: var(--salt-spacing-100);
2815
- border-top: var(--salt-size-border) var(--salt-separable-borderStyle) transparent;
2816
- border-bottom: var(--salt-size-border) var(--salt-separable-borderStyle) transparent;
2821
+ border-top: var(--salt-size-fixed-100) var(--salt-separable-borderStyle) transparent;
2822
+ border-bottom: var(--salt-size-fixed-100) var(--salt-separable-borderStyle) transparent;
2817
2823
  overflow-y: auto;
2818
2824
  }
2819
2825
  .saltOverlayPanelContent-overflow.saltOverlayPanelContent-scroll-top {
2820
- border-top: var(--salt-size-border) var(--salt-separable-borderStyle) var(--salt-separable-tertiary-borderColor);
2826
+ border-top: var(--salt-size-fixed-100) var(--salt-separable-borderStyle) var(--salt-separable-tertiary-borderColor);
2821
2827
  }
2822
2828
 
2823
2829
  /* src/pagination/CompactInput.css */
@@ -2876,7 +2882,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
2876
2882
  font-family: var(--salt-text-fontFamily);
2877
2883
  line-height: var(--salt-text-lineHeight);
2878
2884
  letter-spacing: var(--salt-text-letterSpacing);
2879
- cursor: var(--salt-selectable-cursor-hover);
2885
+ cursor: var(--salt-cursor-hover);
2880
2886
  border-radius: var(--salt-palette-corner-weak, 0);
2881
2887
  }
2882
2888
  .saltPageButton:hover,
@@ -2892,10 +2898,10 @@ a:focus .saltCard-interactable.saltCard-disabled {
2892
2898
  .saltPageButton:disabled {
2893
2899
  color: var(--salt-content-secondary-foreground);
2894
2900
  background: var(--salt-selectable-background);
2895
- cursor: var(--salt-editable-cursor-readonly);
2901
+ cursor: var(--salt-cursor-readonly);
2896
2902
  }
2897
2903
  .saltPageButton[aria-current=page] {
2898
- border: var(--salt-size-border) var(--salt-selectable-borderStyle) var(--salt-selectable-borderColor);
2904
+ border: var(--salt-size-fixed-100) var(--salt-selectable-borderStyle) var(--salt-selectable-borderColor);
2899
2905
  background: var(--salt-selectable-background-selected);
2900
2906
  }
2901
2907
  .saltPageButton-fixed {
@@ -2979,19 +2985,20 @@ a:focus .saltCard-interactable.saltCard-disabled {
2979
2985
 
2980
2986
  /* src/pill/Pill.css */
2981
2987
  .saltPill {
2988
+ --pill-borderWidth: var(--salt-size-fixed-100);
2982
2989
  appearance: none;
2983
2990
  display: inline-flex;
2984
2991
  align-items: center;
2985
2992
  background: var(--saltPill-background, var(--pill-background));
2986
2993
  border-radius: var(--salt-palette-corner-weaker, 0);
2987
2994
  border-style: solid;
2988
- border-width: var(--salt-size-border, 0);
2995
+ border-width: var(--pill-borderWidth);
2989
2996
  border-color: var(--pill-borderColor);
2990
2997
  height: calc(var(--salt-size-base) - var(--salt-spacing-100));
2991
2998
  min-height: var(--salt-text-minHeight);
2992
2999
  position: relative;
2993
3000
  gap: var(--salt-spacing-50);
2994
- padding: 0 calc(var(--salt-spacing-50) - var(--salt-size-border, 0));
3001
+ padding: 0 calc(var(--salt-spacing-50) - var(--pill-borderWidth));
2995
3002
  color: var(--saltPill-color, var(--pill-color));
2996
3003
  font-family: var(--salt-text-fontFamily);
2997
3004
  font-size: var(--salt-text-fontSize);
@@ -3005,7 +3012,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
3005
3012
  --pill-background: var(--salt-actionable-bold-background);
3006
3013
  --pill-color: var(--salt-actionable-bold-foreground);
3007
3014
  --pill-borderColor: var(--salt-actionable-bold-borderColor);
3008
- cursor: var(--salt-selectable-cursor-hover);
3015
+ cursor: var(--salt-cursor-hover);
3009
3016
  }
3010
3017
  .saltPill-clickable:hover,
3011
3018
  .saltPill-clickable:focus-visible {
@@ -3032,7 +3039,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
3032
3039
  --pill-color: var(--salt-actionable-bold-foreground-disabled);
3033
3040
  --pill-background: var(--salt-actionable-bold-background-disabled);
3034
3041
  --pill-borderColor: var(--salt-actionable-bold-borderColor-disabled);
3035
- cursor: var(--salt-actionable-cursor-disabled);
3042
+ cursor: var(--salt-cursor-disabled);
3036
3043
  }
3037
3044
 
3038
3045
  /* src/pill-input/PillInput.css */
@@ -3063,10 +3070,11 @@ a:focus .saltCard-interactable.saltCard-disabled {
3063
3070
  }
3064
3071
  .saltPillInput:hover {
3065
3072
  background: var(--saltPillInput-background-hover, var(--pillInput-background-hover));
3066
- cursor: var(--salt-editable-cursor-hover);
3073
+ cursor: var(--salt-cursor-text);
3067
3074
  }
3068
3075
  .saltPillInput-bordered.saltPillInput {
3069
- border: var(--salt-size-border) var(--salt-editable-borderStyle) var(--pillInput-borderColor);
3076
+ --pillInput-borderWidth: var(--salt-size-fixed-100);
3077
+ border: var(--pillInput-borderWidth) var(--salt-editable-borderStyle) var(--pillInput-borderColor);
3070
3078
  }
3071
3079
  .saltPillInput-bordered.saltPillInput:hover {
3072
3080
  border-style: var(--salt-editable-borderStyle-hover);
@@ -3074,7 +3082,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
3074
3082
  }
3075
3083
  .saltPillInput-bordered.saltPillInput-focused,
3076
3084
  .saltPillInput-bordered:active {
3077
- --pillInput-borderWidth: calc(var(--salt-editable-borderWidth-active) - var(--salt-size-border));
3085
+ --pillInput-borderWidth: calc(var(--salt-size-fixed-200) - var(--pillInput-borderWidth));
3078
3086
  }
3079
3087
  .saltPillInput-bordered.saltPillInput-focused,
3080
3088
  .saltPillInput-bordered.saltPillInput-focused:hover {
@@ -3096,7 +3104,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
3096
3104
  bottom: 0;
3097
3105
  width: 100%;
3098
3106
  position: absolute;
3099
- border-bottom: var(--salt-size-border) var(--salt-editable-borderStyle) var(--pillInput-borderColor);
3107
+ border-bottom: var(--salt-size-fixed-100) var(--salt-editable-borderStyle) var(--pillInput-borderColor);
3100
3108
  }
3101
3109
  .saltPillInput:hover .saltPillInput-activationIndicator {
3102
3110
  border-bottom-style: var(--salt-editable-borderStyle-hover);
@@ -3104,7 +3112,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
3104
3112
  }
3105
3113
  .saltPillInput-focused .saltPillInput-activationIndicator,
3106
3114
  .saltPillInput-focused:hover .saltPillInput-activationIndicator {
3107
- border-bottom: var(--salt-size-border-strong) var(--salt-editable-borderStyle-active) var(--pillInput-borderColor-active);
3115
+ border-bottom: var(--salt-size-fixed-200) var(--salt-editable-borderStyle-active) var(--pillInput-borderColor-active);
3108
3116
  }
3109
3117
  .saltPillInput-readOnly .saltPillInput-activationIndicator,
3110
3118
  .saltPillInput-readOnly:hover .saltPillInput-activationIndicator {
@@ -3122,7 +3130,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
3122
3130
  border-bottom-width: 0;
3123
3131
  }
3124
3132
  .saltPillInput-bordered.saltPillInput-focused .saltPillInput-activationIndicator {
3125
- border-bottom-width: calc(var(--salt-size-border-strong) - var(--salt-size-border));
3133
+ border-bottom-width: calc(var(--salt-size-fixed-200) - var(--pillInput-borderWidth));
3126
3134
  }
3127
3135
  .saltPillInput-primary {
3128
3136
  --pillInput-background: var(--salt-editable-primary-background);
@@ -3181,17 +3189,17 @@ a:focus .saltCard-interactable.saltCard-disabled {
3181
3189
  .saltPillInput-focused,
3182
3190
  .saltPillInput-focused:hover {
3183
3191
  background: var(--saltPillInput-background-active, var(--pillInput-background-active));
3184
- cursor: var(--salt-editable-cursor-active);
3192
+ cursor: var(--salt-cursor-text);
3185
3193
  outline: var(--saltPillInput-outline, var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--pillInput-outlineColor));
3186
3194
  }
3187
3195
  .saltPillInput.saltPillInput-readOnly {
3188
3196
  background: var(--pillInput-background-readonly);
3189
- cursor: var(--salt-editable-cursor-readonly);
3197
+ cursor: var(--salt-cursor-readonly);
3190
3198
  }
3191
3199
  .saltPillInput-disabled,
3192
3200
  .saltPillInput-disabled:hover {
3193
3201
  background: var(--pillInput-background-disabled);
3194
- cursor: var(--salt-editable-cursor-disabled);
3202
+ cursor: var(--salt-cursor-disabled);
3195
3203
  color: var(--saltPillInput-color-disabled, var(--salt-content-primary-foreground-disabled));
3196
3204
  }
3197
3205
  .saltPillInput-startAdornmentContainer {
@@ -3231,7 +3239,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
3231
3239
  }
3232
3240
  .saltPillInput-startAdornmentContainer > .saltButton,
3233
3241
  .saltPillInput-endAdornmentContainer > .saltButton {
3234
- --saltButton-padding: calc(var(--salt-spacing-50) - var(--salt-size-border));
3242
+ --saltButton-padding: calc(var(--salt-spacing-50) - var(--button-borderWidth));
3235
3243
  --saltButton-height: calc(var(--salt-size-base) - var(--salt-spacing-100));
3236
3244
  --saltButton-borderRadius: var(--salt-palette-corner-weaker);
3237
3245
  }
@@ -3248,10 +3256,10 @@ a:focus .saltCard-interactable.saltCard-disabled {
3248
3256
  box-sizing: border-box;
3249
3257
  }
3250
3258
  .saltPillInput-bordered > .saltPillInput-endAdornmentContainer {
3251
- padding-top: calc(var(--salt-spacing-50) - var(--salt-size-border));
3259
+ padding-top: calc(var(--salt-spacing-50) - var(--pillInput-borderWidth));
3252
3260
  }
3253
3261
  .saltPillInput-bordered > .saltPillInput-inputWrapper {
3254
- padding: calc(var(--salt-spacing-50) - var(--salt-size-border)) 0;
3262
+ padding: calc(var(--salt-spacing-50) - var(--pillInput-borderWidth)) 0;
3255
3263
  }
3256
3264
  .saltPillInput-pillList {
3257
3265
  display: contents;
@@ -3309,7 +3317,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
3309
3317
  .saltRadioButton {
3310
3318
  display: inline-flex;
3311
3319
  gap: var(--salt-spacing-100);
3312
- cursor: var(--salt-selectable-cursor-hover);
3320
+ cursor: var(--salt-cursor-hover);
3313
3321
  position: relative;
3314
3322
  font-size: var(--salt-text-fontSize);
3315
3323
  line-height: var(--salt-text-lineHeight);
@@ -3319,11 +3327,11 @@ a:focus .saltCard-interactable.saltCard-disabled {
3319
3327
  }
3320
3328
  .saltRadioButton-disabled {
3321
3329
  color: var(--salt-content-primary-foreground-disabled);
3322
- cursor: var(--salt-selectable-cursor-disabled);
3330
+ cursor: var(--salt-cursor-disabled);
3323
3331
  }
3324
3332
  .saltRadioButton-readOnly {
3325
3333
  color: var(--salt-content-primary-foreground);
3326
- cursor: var(--salt-selectable-cursor-readonly);
3334
+ cursor: var(--salt-cursor-readonly);
3327
3335
  }
3328
3336
  .saltRadioButton-input {
3329
3337
  cursor: inherit;
@@ -3398,7 +3406,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
3398
3406
  min-height: var(--radioButton-size);
3399
3407
  border-radius: 50%;
3400
3408
  position: relative;
3401
- border: var(--salt-size-border) var(--salt-selectable-borderStyle) var(--salt-selectable-borderColor);
3409
+ border: var(--salt-size-fixed-100) var(--salt-selectable-borderStyle) var(--salt-selectable-borderColor);
3402
3410
  color: var(--salt-selectable-foreground);
3403
3411
  background: var(--salt-container-primary-background);
3404
3412
  --saltIcon-size: 100%;
@@ -3481,25 +3489,25 @@ a:focus .saltCard-interactable.saltCard-disabled {
3481
3489
  display: flex;
3482
3490
  flex-direction: row;
3483
3491
  background: var(--button-background);
3484
- gap: var(--salt-size-border);
3492
+ gap: var(--salt-spacing-fixed-100);
3485
3493
  }
3486
3494
  .saltSegmentedButtonGroup > .saltButton:not(:last-of-type)::after {
3487
3495
  content: "";
3488
- width: var(--salt-size-border);
3496
+ width: var(--salt-spacing-fixed-100);
3489
3497
  position: absolute;
3490
3498
  background: var(--button-background);
3491
- right: calc(var(--salt-size-border) * -2);
3492
- top: calc(var(--salt-size-border) * -1);
3493
- bottom: calc(var(--salt-size-border) * -1);
3499
+ right: calc(var(--salt-size-fixed-100) * -2);
3500
+ top: calc(var(--salt-size-fixed-100) * -1);
3501
+ bottom: calc(var(--salt-size-fixed-100) * -1);
3494
3502
  }
3495
3503
  .saltSegmentedButtonGroup > .saltButton:not(:first-of-type)::before {
3496
3504
  content: "";
3497
- width: var(--salt-size-border);
3505
+ width: var(--salt-spacing-fixed-100);
3498
3506
  position: absolute;
3499
3507
  background: var(--salt-separable-primary-borderColor);
3500
- left: calc(var(--salt-size-border) * -2);
3501
- top: calc(var(--salt-size-border) * -1);
3502
- bottom: calc(var(--salt-size-border) * -1);
3508
+ left: calc(var(--salt-size-fixed-100) * -2);
3509
+ top: calc(var(--salt-size-fixed-100) * -1);
3510
+ bottom: calc(var(--salt-size-fixed-100) * -1);
3503
3511
  }
3504
3512
  .saltSegmentedButtonGroup > .saltButton:not(:first-of-type) {
3505
3513
  border-bottom-left-radius: 0;
@@ -3577,7 +3585,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
3577
3585
  width: calc(var(--salt-size-base) * 2);
3578
3586
  }
3579
3587
  .saltSpinner-small {
3580
- --spinner-strokeWidth: var(--salt-size-bar-small);
3588
+ --spinner-strokeWidth: var(--salt-size-fixed-200);
3581
3589
  height: var(--salt-size-icon);
3582
3590
  width: var(--salt-size-icon);
3583
3591
  }
@@ -3605,7 +3613,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
3605
3613
 
3606
3614
  /* src/stack-layout/StackLayout.css */
3607
3615
  .saltStackLayout {
3608
- --stackLayout-separator-weight: var(--salt-size-border, 1);
3616
+ --stackLayout-separator-weight: var(--salt-size-fixed-100, 1);
3609
3617
  }
3610
3618
  .saltStackLayout-separator > * {
3611
3619
  position: relative;
@@ -3760,7 +3768,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
3760
3768
  display: flex;
3761
3769
  gap: var(--salt-spacing-100);
3762
3770
  position: relative;
3763
- cursor: var(--salt-selectable-cursor-hover);
3771
+ cursor: var(--salt-cursor-hover);
3764
3772
  color: var(--salt-content-primary-foreground);
3765
3773
  font-family: var(--salt-text-fontFamily);
3766
3774
  font-size: var(--salt-text-fontSize);
@@ -3769,16 +3777,16 @@ a:focus .saltCard-interactable.saltCard-disabled {
3769
3777
  }
3770
3778
  .saltSwitch-disabled {
3771
3779
  color: var(--salt-content-primary-foreground-disabled);
3772
- cursor: var(--salt-selectable-cursor-disabled);
3780
+ cursor: var(--salt-cursor-disabled);
3773
3781
  }
3774
3782
  .saltSwitch-track {
3775
- border: var(--salt-size-border) var(--salt-selectable-borderStyle) var(--salt-selectable-borderColor);
3783
+ border: var(--salt-size-fixed-100) var(--salt-selectable-borderStyle) var(--salt-selectable-borderColor);
3776
3784
  --saltIcon-size: 100%;
3777
3785
  border-radius: var(--salt-palette-corner-weak, 0);
3778
3786
  display: flex;
3779
3787
  flex-shrink: 0;
3780
3788
  height: calc(var(--salt-size-base) - var(--salt-spacing-100));
3781
- width: calc((var(--salt-size-selectable) + var(--salt-spacing-25) + var(--salt-size-border)) * 2);
3789
+ width: calc((var(--salt-size-selectable) + var(--salt-spacing-25) + var(--salt-size-fixed-100)) * 2);
3782
3790
  align-items: center;
3783
3791
  color: var(--salt-selectable-foreground);
3784
3792
  background: var(--salt-container-primary-background);
@@ -3819,7 +3827,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
3819
3827
  height: var(--salt-size-selectable);
3820
3828
  background: currentColor;
3821
3829
  margin: var(--salt-spacing-25);
3822
- border: var(--salt-size-border) var(--salt-selectable-borderStyle) var(--salt-selectable-borderColor);
3830
+ border: var(--salt-size-fixed-100) var(--salt-selectable-borderStyle) var(--salt-selectable-borderColor);
3823
3831
  box-sizing: border-box;
3824
3832
  border-radius: var(--salt-palette-corner-weaker, 0);
3825
3833
  }
@@ -3848,7 +3856,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
3848
3856
  top: 0;
3849
3857
  z-index: var(--salt-zIndex-default);
3850
3858
  height: calc(var(--salt-size-base) - var(--salt-spacing-100));
3851
- width: calc((var(--salt-size-selectable) + var(--salt-spacing-25) + var(--salt-size-border)) * 2);
3859
+ width: calc((var(--salt-size-selectable) + var(--salt-spacing-25) + var(--salt-size-fixed-100)) * 2);
3852
3860
  }
3853
3861
  @media (prefers-reduced-motion) {
3854
3862
  .saltSwitch-input:focus-visible + .saltSwitch-track .saltSwitch-thumb,
@@ -3886,15 +3894,15 @@ a:focus .saltCard-interactable.saltCard-disabled {
3886
3894
  .saltTag-primary {
3887
3895
  background: var(--tag-primary-background, var(--salt-category-1-subtle-background));
3888
3896
  color: var(--tag-primary-foreground, var(--salt-category-1-subtle-foreground));
3889
- border: var(--salt-size-border) var(--salt-container-borderStyle) transparent;
3897
+ border: var(--salt-size-fixed-100) var(--salt-container-borderStyle) transparent;
3890
3898
  }
3891
3899
  .saltTag-bordered {
3892
- border: var(--salt-size-border) var(--salt-container-borderStyle) var(--tag-primary-borderColor, var(--salt-category-1-subtle-borderColor));
3900
+ border: var(--salt-size-fixed-100) var(--salt-container-borderStyle) var(--tag-primary-borderColor, var(--salt-category-1-subtle-borderColor));
3893
3901
  }
3894
3902
  .saltTag-secondary {
3895
3903
  background: var(--tag-secondary-background, var(--salt-category-1-bold-background));
3896
3904
  color: var(--tag-secondary-foreground, var(--salt-category-1-bold-foreground));
3897
- border: var(--salt-size-border) var(--salt-container-borderStyle) transparent;
3905
+ border: var(--salt-size-fixed-100) var(--salt-container-borderStyle) transparent;
3898
3906
  }
3899
3907
  .saltTag-category-1 {
3900
3908
  --tag-primary-background: var(--salt-category-1-subtle-background);
@@ -4265,7 +4273,7 @@ label.saltText small,
4265
4273
  --toast-iconColor: var(--salt-content-primary-foreground);
4266
4274
  background: var(--saltToast-background, var(--toast-background));
4267
4275
  border-color: var(--saltToast-borderColor, var(--toast-borderColor));
4268
- border-width: var(--saltToast-borderWidth, var(--salt-size-border));
4276
+ border-width: var(--saltToast-borderWidth, var(--salt-size-fixed-100));
4269
4277
  border-style: var(--saltToast-borderStyle, var(--salt-container-borderStyle));
4270
4278
  border-radius: var(--saltToast-borderRadius, var(--salt-palette-corner, 0));
4271
4279
  box-sizing: border-box;
@@ -4312,12 +4320,13 @@ label.saltText small,
4312
4320
 
4313
4321
  /* src/toggle-button/ToggleButton.css */
4314
4322
  .saltToggleButton {
4323
+ --toggleButton-borderWidth: var(--salt-size-fixed-100);
4315
4324
  align-items: center;
4316
4325
  appearance: none;
4317
4326
  background: var(--toggleButton-background);
4318
4327
  border-color: var(--toggleButton-borderColor, transparent);
4319
4328
  border-style: solid;
4320
- border-width: var(--salt-size-border, 0);
4329
+ border-width: var(--toggleButton-borderWidth);
4321
4330
  border-radius: var(--salt-palette-corner-weak, 0);
4322
4331
  box-sizing: border-box;
4323
4332
  color: var(--toggleButton-text-color);
@@ -4332,7 +4341,7 @@ label.saltText small,
4332
4341
  font-family: var(--salt-text-action-fontFamily);
4333
4342
  letter-spacing: var(--salt-text-action-letterSpacing);
4334
4343
  text-transform: var(--salt-text-action-textTransform);
4335
- padding: 0 calc(var(--salt-spacing-100) - var(--salt-size-border, 0));
4344
+ padding: 0 calc(var(--salt-spacing-100) - var(--toggleButton-borderWidth));
4336
4345
  margin: 0;
4337
4346
  min-width: unset;
4338
4347
  position: relative;
@@ -4361,13 +4370,13 @@ label.saltText small,
4361
4370
  .saltToggleButton[aria-pressed=true] {
4362
4371
  background: var(--toggleButton-background-selected);
4363
4372
  color: var(--toggleButton-text-color-selected);
4364
- cursor: var(--salt-actionable-cursor-active);
4373
+ cursor: var(--salt-cursor-active);
4365
4374
  border-color: var(--toggleButton-borderColor-selected);
4366
4375
  }
4367
4376
  .saltToggleButton[aria-disabled=true] {
4368
4377
  background: var(--toggleButton-background-disabled);
4369
4378
  color: var(--toggleButton-text-color-disabled);
4370
- cursor: var(--salt-actionable-cursor-disabled);
4379
+ cursor: var(--salt-cursor-disabled);
4371
4380
  border-color: var(--toggleButton-borderColor-disabled);
4372
4381
  }
4373
4382
  .saltToggleButton[aria-checked=true].saltToggleButton[aria-disabled=true],
@@ -4379,7 +4388,7 @@ label.saltText small,
4379
4388
  .saltToggleButton.saltToggleButton-readOnly {
4380
4389
  background: var(--toggleButton-background-readonly);
4381
4390
  color: var(--toggleButton-text-color-readonly);
4382
- cursor: var(--salt-actionable-cursor-disabled);
4391
+ cursor: var(--salt-cursor-disabled);
4383
4392
  border-color: var(--toggleButton-borderColor-readonly);
4384
4393
  }
4385
4394
  .saltToggleButton[aria-checked=true].saltToggleButton-readOnly,
@@ -4621,24 +4630,25 @@ label.saltText small,
4621
4630
 
4622
4631
  /* src/toggle-button-group/ToggleButtonGroup.css */
4623
4632
  .saltToggleButtonGroup {
4633
+ --toggleButtonGroup-borderWidth: var(--salt-size-fixed-100);
4624
4634
  display: flex;
4625
4635
  background: var(--salt-container-primary-background);
4626
- border: var(--salt-size-border) var(--salt-container-borderStyle) var(--salt-container-primary-borderColor);
4636
+ border: var(--toggleButtonGroup-borderWidth) var(--salt-container-borderStyle) var(--salt-container-primary-borderColor);
4627
4637
  border-radius: var(--salt-palette-corner-weak, 0);
4628
4638
  width: fit-content;
4629
4639
  gap: var(--salt-spacing-50);
4630
- padding: calc(var(--salt-spacing-50) - var(--salt-size-border));
4640
+ padding: calc(var(--salt-spacing-50) - var(--toggleButtonGroup-borderWidth));
4631
4641
  flex-direction: row;
4632
4642
  }
4633
4643
  .saltToggleButtonGroup-disabled {
4634
4644
  background: var(--salt-container-primary-background-disabled);
4635
4645
  border-color: var(--salt-container-primary-borderColor-disabled);
4636
- cursor: var(--salt-actionable-cursor-disabled);
4646
+ cursor: var(--salt-cursor-disabled);
4637
4647
  }
4638
4648
  .saltToggleButtonGroup-readOnly {
4639
4649
  background: var(--salt-container-primary-background);
4640
4650
  border-color: var(--salt-container-primary-borderColor);
4641
- cursor: var(--salt-actionable-cursor-disabled);
4651
+ cursor: var(--salt-cursor-disabled);
4642
4652
  }
4643
4653
  .saltToggleButtonGroup .saltToggleButton {
4644
4654
  border-radius: var(--salt-palette-corner-weaker, 0);
@@ -4659,14 +4669,15 @@ label.saltText small,
4659
4669
  --tooltip-zIndex: var(--saltTooltip-zIndex, var(--salt-zIndex-flyover));
4660
4670
  --tooltip-icon-marginTop: calc((var(--salt-text-lineHeight) - max(var(--salt-size-icon), 12px)) / 2);
4661
4671
  --tooltip-status-borderColor: var(--salt-container-primary-borderColor);
4662
- --tooltip-padding: calc(var(--salt-spacing-75) - var(--salt-size-border)) var(--salt-spacing-100);
4672
+ --tooltip-borderWidth: var(--salt-size-fixed-100);
4673
+ --tooltip-padding: calc(var(--salt-spacing-75) - var(--tooltip-borderWidth)) var(--salt-spacing-100);
4663
4674
  }
4664
4675
  .saltTooltip {
4665
4676
  box-sizing: border-box;
4666
4677
  background: var(--tooltip-background);
4667
4678
  border-color: var(--saltTooltip-borderColor, var(--tooltip-status-borderColor));
4668
4679
  border-style: var(--saltTooltip-borderStyle, var(--salt-container-borderStyle));
4669
- border-width: var(--saltTooltip-borderWidth, var(--salt-size-border));
4680
+ border-width: var(--saltTooltip-borderWidth, var(--tooltip-borderWidth));
4670
4681
  border-radius: var(--saltTooltip-borderRadius, var(--salt-palette-corner-weak, 0));
4671
4682
  box-shadow: var(--saltTooltip-shadow, var(--salt-overlayable-shadow-popout));
4672
4683
  color: var(--saltTooltip-text-color, var(--salt-content-primary-foreground));
@@ -4674,7 +4685,7 @@ label.saltText small,
4674
4685
  font-size: var(--saltTooltip-fontSize, var(--salt-text-fontSize));
4675
4686
  font-weight: var(--saltTooltip-fontWeight, var(--salt-text-fontWeight));
4676
4687
  line-height: var(--saltTooltip-lineHeight, var(--salt-text-lineHeight));
4677
- max-width: var(--saltTooltip-maxWidth, 230px);
4688
+ max-width: var(--saltTooltip-maxWidth, 60ch);
4678
4689
  padding: var(--saltTooltip-padding, var(--tooltip-padding));
4679
4690
  position: relative;
4680
4691
  text-align: var(--saltTooltip-textAlign, left);
@@ -4746,8 +4757,8 @@ label.saltText small,
4746
4757
  border-width: var(--salt-size-bar-strong);
4747
4758
  }
4748
4759
  .saltCircularProgress-bufferBorder {
4749
- border: solid var(--salt-size-border) var(--salt-accent-background);
4750
- outline: solid var(--salt-size-border) var(--salt-accent-background);
4760
+ border: solid var(--salt-size-fixed-100) var(--salt-accent-background);
4761
+ outline: solid var(--salt-size-fixed-100) var(--salt-accent-background);
4751
4762
  outline-offset: calc(var(--salt-size-bar-strong) * -1);
4752
4763
  }
4753
4764
  .saltCircularProgress-bufferBackground {
@@ -4800,7 +4811,7 @@ label.saltText small,
4800
4811
  background: var(--salt-accent-background);
4801
4812
  position: absolute;
4802
4813
  right: 0;
4803
- width: var(--salt-size-border);
4814
+ width: var(--salt-size-fixed-100);
4804
4815
  height: var(--salt-size-bar-strong);
4805
4816
  }
4806
4817
  .saltCircularProgress-bufferOverlayRight:before {
@@ -4836,9 +4847,9 @@ label.saltText small,
4836
4847
  .saltLinearProgress-buffer {
4837
4848
  width: 0;
4838
4849
  background: var(--salt-container-primary-background);
4839
- outline: solid var(--salt-size-border) var(--salt-accent-background);
4850
+ outline: solid var(--salt-size-fixed-100) var(--salt-accent-background);
4840
4851
  z-index: var(--salt-zIndex-default);
4841
- outline-offset: calc(var(--salt-size-border) * -1);
4852
+ outline-offset: calc(var(--salt-size-fixed-100) * -1);
4842
4853
  }
4843
4854
  .saltLinearProgress-bar {
4844
4855
  width: 100%;
@@ -4886,18 +4897,19 @@ label.saltText small,
4886
4897
  .saltSliderThumb {
4887
4898
  align-items: center;
4888
4899
  background: var(--salt-accent-borderColor);
4889
- cursor: var(--salt-selectable-cursor-hover);
4900
+ cursor: var(--salt-cursor-grab);
4890
4901
  display: flex;
4891
4902
  height: var(--salt-size-selectable);
4892
4903
  outline: none;
4893
4904
  position: absolute;
4894
4905
  top: calc(((var(--salt-size-selectable) - var(--salt-size-bar)) / 2) * -1);
4895
4906
  transform: translateX(-50%);
4896
- width: var(--salt-size-border-strong);
4907
+ width: var(--salt-size-fixed-200);
4897
4908
  touch-action: none;
4898
4909
  }
4899
4910
  .saltSliderThumb-disabled {
4900
4911
  background: var(--salt-accent-borderColor-disabled);
4912
+ cursor: var(--salt-cursor-disabled);
4901
4913
  pointer-events: none;
4902
4914
  }
4903
4915
  .saltSliderThumb-focusVisible {
@@ -4908,12 +4920,12 @@ label.saltText small,
4908
4920
  }
4909
4921
  .saltSliderThumb:active,
4910
4922
  .saltSliderThumb-dragging {
4911
- cursor: var(--draggable-grab-cursor-active);
4923
+ cursor: var(--salt-cursor-grab-active);
4912
4924
  }
4913
4925
  .saltSliderThumb-input {
4914
4926
  border: 0;
4915
4927
  appearance: none;
4916
- cursor: var(--salt-selectable-cursor-hover);
4928
+ cursor: var(--salt-cursor-grab);
4917
4929
  height: var(--salt-size-base);
4918
4930
  left: var(--slider-progressPercentage);
4919
4931
  margin: 0;
@@ -4946,7 +4958,7 @@ label.saltText small,
4946
4958
  background: var(--salt-container-primary-background);
4947
4959
  border-color: var(--salt-container-primary-borderColor);
4948
4960
  border-style: var(--saltTooltip-borderStyle, var(--salt-container-borderStyle));
4949
- border-width: var(--saltTooltip-borderWidth, var(--salt-size-border));
4961
+ border-width: var(--saltTooltip-borderWidth, var(--salt-size-fixed-100));
4950
4962
  border-radius: var(--saltTooltip-borderRadius, var(--salt-palette-corner-weak, 0));
4951
4963
  box-shadow: var(--saltTooltip-shadow, var(--salt-overlayable-shadow-popout));
4952
4964
  bottom: 50%;
@@ -4972,7 +4984,7 @@ label.saltText small,
4972
4984
  top: 100%;
4973
4985
  transform: translateX(-50%);
4974
4986
  stroke: var(--salt-container-primary-borderColor);
4975
- stroke-width: var(--salt-size-border);
4987
+ stroke-width: var(--salt-size-fixed-100);
4976
4988
  width: var(--salt-size-icon);
4977
4989
  }
4978
4990
  .saltSliderTooltip-text {
@@ -4995,7 +5007,7 @@ label.saltText small,
4995
5007
  margin-bottom: calc(var(--salt-size-base) / 2);
4996
5008
  }
4997
5009
  .saltSliderTrack-disabled {
4998
- cursor: var(--salt-selectable-cursor-disabled);
5010
+ cursor: var(--salt-cursor-disabled);
4999
5011
  }
5000
5012
  .saltSliderTrack-container {
5001
5013
  align-items: center;
@@ -5006,7 +5018,7 @@ label.saltText small,
5006
5018
  }
5007
5019
  .saltSliderTrack-wrapper {
5008
5020
  align-items: center;
5009
- cursor: var(--salt-selectable-cursor-hover);
5021
+ cursor: var(--salt-cursor-hover);
5010
5022
  display: flex;
5011
5023
  flex: 1;
5012
5024
  height: var(--salt-size-selectable);
@@ -5015,7 +5027,7 @@ label.saltText small,
5015
5027
  }
5016
5028
  .saltSliderTrack-disabled,
5017
5029
  .saltSliderTrack-disabled .saltSliderTrack-wrapper {
5018
- cursor: var(--salt-selectable-cursor-disabled);
5030
+ cursor: var(--salt-cursor-disabled);
5019
5031
  }
5020
5032
  .saltSliderTrack-disabled .saltSliderTrack-wrapper {
5021
5033
  pointer-events: none;
@@ -5037,7 +5049,7 @@ label.saltText small,
5037
5049
  background: var(--slider-track-fill);
5038
5050
  border-top-left-radius: var(--salt-palette-corner-weaker);
5039
5051
  border-bottom-left-radius: var(--salt-palette-corner-weaker);
5040
- width: calc(var(--slider-progressPercentage) - 1.5 * var(--salt-size-border-strong));
5052
+ width: calc(var(--slider-progressPercentage) - var(--salt-size-fixed-300));
5041
5053
  }
5042
5054
  .saltSliderTrack-hasMinTick.saltSliderTrack-rail::before {
5043
5055
  border-bottom-left-radius: unset;
@@ -5046,25 +5058,25 @@ label.saltText small,
5046
5058
  background: var(--slider-track-background);
5047
5059
  border-top-right-radius: var(--salt-palette-corner-weaker);
5048
5060
  border-bottom-right-radius: var(--salt-palette-corner-weaker);
5049
- width: calc(100% - var(--slider-progressPercentage) - 1.5 * var(--salt-size-border-strong));
5061
+ width: calc(100% - var(--slider-progressPercentage) - var(--salt-size-fixed-300));
5050
5062
  }
5051
5063
  .saltSliderTrack-hasMaxTick.saltSliderTrack-rail::after {
5052
5064
  border-bottom-right-radius: unset;
5053
5065
  }
5054
5066
  .saltSliderTrack-range .saltSliderTrack-rail::before {
5055
5067
  background: var(--slider-track-background);
5056
- width: calc(var(--slider-progressPercentageStart) - (var(--salt-size-border-strong) * 1.5));
5068
+ width: calc(var(--slider-progressPercentageStart) - var(--salt-size-fixed-300));
5057
5069
  }
5058
5070
  .saltSliderTrack-range .saltSliderTrack-rail::after {
5059
5071
  background: var(--slider-track-background);
5060
- width: calc(100% - var(--slider-progressPercentageEnd) - (var(--salt-size-border-strong) * 1.5));
5072
+ width: calc(100% - var(--slider-progressPercentageEnd) - var(--salt-size-fixed-300));
5061
5073
  }
5062
5074
  .saltSliderTrack-range .saltSliderTrack-rail .saltSliderTrack-fill {
5063
5075
  background: var(--slider-track-fill);
5064
5076
  height: 100%;
5065
- left: calc(var(--slider-progressPercentageStart) + 1.5 * var(--salt-size-border-strong));
5077
+ left: calc(var(--slider-progressPercentageStart) + var(--salt-size-fixed-300));
5066
5078
  position: absolute;
5067
- width: calc(var(--slider-progressPercentageEnd) - var(--slider-progressPercentageStart) - var(--salt-size-border-strong) * 3);
5079
+ width: calc(var(--slider-progressPercentageEnd) - var(--slider-progressPercentageStart) - var(--salt-size-fixed-600));
5068
5080
  }
5069
5081
  .saltSliderTrack-minLabel,
5070
5082
  .saltSliderTrack-maxLabel {
@@ -5072,7 +5084,7 @@ label.saltText small,
5072
5084
  }
5073
5085
  .saltSliderTrack-dragging,
5074
5086
  .saltSliderTrack-dragging .saltSliderTrack-wrapper {
5075
- cursor: var(--salt-draggable-grab-cursor-active);
5087
+ cursor: var(--salt-cursor-grab-active);
5076
5088
  }
5077
5089
  .saltSliderTrack-disabled {
5078
5090
  --slider-track-fill: var(--salt-accent-borderColor-disabled);
@@ -5088,7 +5100,7 @@ label.saltText small,
5088
5100
  height: var(--slider-tick-height);
5089
5101
  position: absolute;
5090
5102
  transform: translate(-50%);
5091
- width: var(--salt-size-border-strong);
5103
+ width: var(--salt-size-fixed-200);
5092
5104
  }
5093
5105
  .saltSliderTrack-withTicks .saltSliderTrack-tickHidden {
5094
5106
  visibility: hidden;
@@ -5150,7 +5162,7 @@ label.saltText small,
5150
5162
  top: calc(var(--step-icon-size) / 2);
5151
5163
  left: calc(50% + calc(var(--step-icon-size) / 2 + var(--salt-spacing-100)));
5152
5164
  right: calc(-50% + calc(var(--step-icon-size) / 2 + var(--salt-spacing-100)));
5153
- border-top-width: var(--salt-size-border-strong);
5165
+ border-top-width: var(--salt-size-fixed-200);
5154
5166
  border-top-style: var(--salt-track-borderStyle-incomplete);
5155
5167
  border-top-color: var(--salt-track-borderColor);
5156
5168
  }
@@ -5162,7 +5174,7 @@ label.saltText small,
5162
5174
  min-height: var(--salt-size-base);
5163
5175
  align-self: stretch;
5164
5176
  justify-self: center;
5165
- border-left-width: var(--salt-size-border-strong);
5177
+ border-left-width: var(--salt-size-fixed-200);
5166
5178
  border-left-style: var(--salt-track-borderStyle-incomplete);
5167
5179
  border-left-color: var(--salt-track-borderColor);
5168
5180
  }
@@ -5254,4 +5266,4 @@ label.saltText small,
5254
5266
  color: var(--salt-status-error-foreground-informative);
5255
5267
  }
5256
5268
 
5257
- /* src/54777b0d-1abe-491d-990e-59e0c5f969c0.css */
5269
+ /* src/d88b00e3-c3d1-4dc7-8745-7c39ccde27ab.css */