@salt-ds/lab 1.0.0-alpha.70 → 1.0.0-alpha.71

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 (280) hide show
  1. package/CHANGELOG.md +53 -0
  2. package/css/salt-lab.css +192 -302
  3. package/dist-cjs/app-header/AppHeader.css.js +1 -1
  4. package/dist-cjs/calendar/CalendarWeekHeader.css.js +1 -1
  5. package/dist-cjs/calendar/internal/CalendarDay.css.js +1 -1
  6. package/dist-cjs/calendar/internal/CalendarMonth.css.js +1 -1
  7. package/dist-cjs/cascading-menu/CascadingMenuItem.css.js +1 -1
  8. package/dist-cjs/color-chooser/ColorChooser.css.js +1 -1
  9. package/dist-cjs/color-chooser/ColorPicker.css.js +1 -1
  10. package/dist-cjs/color-chooser/HexInput.css.js +1 -1
  11. package/dist-cjs/color-chooser/RGBAInput.css.js +1 -1
  12. package/dist-cjs/color-chooser/Swatch.css.js +1 -1
  13. package/dist-cjs/combo-box/useCombobox.js.map +1 -1
  14. package/dist-cjs/common-hooks/selectionTypes.js.map +1 -1
  15. package/dist-cjs/common-hooks/useCollapsibleGroups.js.map +1 -1
  16. package/dist-cjs/common-hooks/useKeyboardNavigation.js.map +1 -1
  17. package/dist-cjs/common-hooks/useKeyboardNavigationPanel.js.map +1 -1
  18. package/dist-cjs/date-input/DateInput.css.js +1 -1
  19. package/dist-cjs/date-picker/DatePickerOverlay.css.js +1 -1
  20. package/dist-cjs/date-picker/DatePickerPanel.css.js +1 -1
  21. package/dist-cjs/form-field-legacy/FormFieldLegacy.css.js +1 -1
  22. package/dist-cjs/form-field-legacy/FormLabel.css.js +1 -1
  23. package/dist-cjs/index.js +0 -8
  24. package/dist-cjs/index.js.map +1 -1
  25. package/dist-cjs/input-legacy/InputLegacy.css.js +1 -1
  26. package/dist-cjs/list/List.css.js +1 -1
  27. package/dist-cjs/list/ListItem.css.js +1 -1
  28. package/dist-cjs/list/useList.js.map +1 -1
  29. package/dist-cjs/list-deprecated/List.css.js +1 -1
  30. package/dist-cjs/list-deprecated/ListItem.css.js +1 -1
  31. package/dist-cjs/list-next/ListItemNext.css.js +1 -1
  32. package/dist-cjs/list-next/ListNext.css.js +1 -1
  33. package/dist-cjs/logo/LogoSeparator.css.js +1 -1
  34. package/dist-cjs/number-input/NumberInput.css.js +1 -1
  35. package/dist-cjs/number-input/NumberInput.js +146 -79
  36. package/dist-cjs/number-input/NumberInput.js.map +1 -1
  37. package/dist-cjs/number-input/internal/useCaret.js +34 -0
  38. package/dist-cjs/number-input/internal/useCaret.js.map +1 -0
  39. package/dist-cjs/number-input/internal/utils.js +56 -14
  40. package/dist-cjs/number-input/internal/utils.js.map +1 -1
  41. package/dist-cjs/number-input/useNumberInput.js +34 -26
  42. package/dist-cjs/number-input/useNumberInput.js.map +1 -1
  43. package/dist-cjs/portal/Portal.js.map +1 -1
  44. package/dist-cjs/query-input/QueryInput.css.js +1 -1
  45. package/dist-cjs/responsive/OverflowReducer.js.map +1 -1
  46. package/dist-cjs/system-status/SystemStatus.css.js +1 -1
  47. package/dist-cjs/tabs/Tabstrip.css.js +1 -1
  48. package/dist-cjs/tabs/drag-drop/Draggable.css.js +1 -1
  49. package/dist-cjs/tabs-next/TabBar.css.js +1 -1
  50. package/dist-cjs/tabs-next/TabNext.css.js +1 -1
  51. package/dist-cjs/tabs-next/TabOverflowList.css.js +1 -1
  52. package/dist-cjs/tokenized-input/TokenizedInput.css.js +1 -1
  53. package/dist-cjs/tokenized-input-next/TokenizedInputNext.css.js +1 -1
  54. package/dist-cjs/toolbar/overflow-panel/OverflowPanel.css.js +1 -1
  55. package/dist-cjs/toolbar/overflow-panel/OverflowSeparator.css.js +1 -1
  56. package/dist-cjs/tree/useTree.js.map +1 -1
  57. package/dist-es/app-header/AppHeader.css.js +1 -1
  58. package/dist-es/calendar/CalendarWeekHeader.css.js +1 -1
  59. package/dist-es/calendar/internal/CalendarDay.css.js +1 -1
  60. package/dist-es/calendar/internal/CalendarMonth.css.js +1 -1
  61. package/dist-es/cascading-menu/CascadingMenuItem.css.js +1 -1
  62. package/dist-es/color-chooser/ColorChooser.css.js +1 -1
  63. package/dist-es/color-chooser/ColorPicker.css.js +1 -1
  64. package/dist-es/color-chooser/HexInput.css.js +1 -1
  65. package/dist-es/color-chooser/RGBAInput.css.js +1 -1
  66. package/dist-es/color-chooser/Swatch.css.js +1 -1
  67. package/dist-es/combo-box/useCombobox.js.map +1 -1
  68. package/dist-es/common-hooks/selectionTypes.js.map +1 -1
  69. package/dist-es/common-hooks/useCollapsibleGroups.js.map +1 -1
  70. package/dist-es/common-hooks/useKeyboardNavigation.js.map +1 -1
  71. package/dist-es/common-hooks/useKeyboardNavigationPanel.js.map +1 -1
  72. package/dist-es/date-input/DateInput.css.js +1 -1
  73. package/dist-es/date-picker/DatePickerOverlay.css.js +1 -1
  74. package/dist-es/date-picker/DatePickerPanel.css.js +1 -1
  75. package/dist-es/form-field-legacy/FormFieldLegacy.css.js +1 -1
  76. package/dist-es/form-field-legacy/FormLabel.css.js +1 -1
  77. package/dist-es/index.js +0 -4
  78. package/dist-es/index.js.map +1 -1
  79. package/dist-es/input-legacy/InputLegacy.css.js +1 -1
  80. package/dist-es/list/List.css.js +1 -1
  81. package/dist-es/list/ListItem.css.js +1 -1
  82. package/dist-es/list/useList.js.map +1 -1
  83. package/dist-es/list-deprecated/List.css.js +1 -1
  84. package/dist-es/list-deprecated/ListItem.css.js +1 -1
  85. package/dist-es/list-next/ListItemNext.css.js +1 -1
  86. package/dist-es/list-next/ListNext.css.js +1 -1
  87. package/dist-es/logo/LogoSeparator.css.js +1 -1
  88. package/dist-es/number-input/NumberInput.css.js +1 -1
  89. package/dist-es/number-input/NumberInput.js +149 -82
  90. package/dist-es/number-input/NumberInput.js.map +1 -1
  91. package/dist-es/number-input/internal/useCaret.js +32 -0
  92. package/dist-es/number-input/internal/useCaret.js.map +1 -0
  93. package/dist-es/number-input/internal/utils.js +52 -10
  94. package/dist-es/number-input/internal/utils.js.map +1 -1
  95. package/dist-es/number-input/useNumberInput.js +35 -27
  96. package/dist-es/number-input/useNumberInput.js.map +1 -1
  97. package/dist-es/portal/Portal.js.map +1 -1
  98. package/dist-es/query-input/QueryInput.css.js +1 -1
  99. package/dist-es/responsive/OverflowReducer.js.map +1 -1
  100. package/dist-es/system-status/SystemStatus.css.js +1 -1
  101. package/dist-es/tabs/Tabstrip.css.js +1 -1
  102. package/dist-es/tabs/drag-drop/Draggable.css.js +1 -1
  103. package/dist-es/tabs-next/TabBar.css.js +1 -1
  104. package/dist-es/tabs-next/TabNext.css.js +1 -1
  105. package/dist-es/tabs-next/TabOverflowList.css.js +1 -1
  106. package/dist-es/tokenized-input/TokenizedInput.css.js +1 -1
  107. package/dist-es/tokenized-input-next/TokenizedInputNext.css.js +1 -1
  108. package/dist-es/toolbar/overflow-panel/OverflowPanel.css.js +1 -1
  109. package/dist-es/toolbar/overflow-panel/OverflowSeparator.css.js +1 -1
  110. package/dist-es/tree/useTree.js.map +1 -1
  111. package/dist-types/app-header/AppHeader.d.ts +1 -1
  112. package/dist-types/button-bar/ButtonBar.d.ts +3 -3
  113. package/dist-types/calendar/Calendar.d.ts +1 -1
  114. package/dist-types/calendar/CalendarWeekHeader.d.ts +1 -1
  115. package/dist-types/calendar/useCalendar.d.ts +1 -1
  116. package/dist-types/calendar/useCalendarDay.d.ts +2 -1
  117. package/dist-types/calendar/useCalendarSelection.d.ts +5 -5
  118. package/dist-types/cascading-menu/internal/CascadingMenuAction.d.ts +2 -2
  119. package/dist-types/cascading-menu/internal/menuPositioning.d.ts +1 -1
  120. package/dist-types/cascading-menu/internal/stateUtils.d.ts +2 -2
  121. package/dist-types/cascading-menu/internal/useClickAway.d.ts +1 -1
  122. package/dist-types/cascading-menu/internal/useRefsManager.d.ts +1 -1
  123. package/dist-types/cascading-menu/internal/useStateReducer.d.ts +2 -2
  124. package/dist-types/cascading-menu/stateChangeTypes.d.ts +1 -1
  125. package/dist-types/color-chooser/Color.d.ts +1 -1
  126. package/dist-types/color-chooser/DictTabs.d.ts +1 -1
  127. package/dist-types/color-chooser/color-utils.d.ts +1 -1
  128. package/dist-types/combo-box/ComboBox.d.ts +3 -3
  129. package/dist-types/combo-box/useCombobox.d.ts +1 -1
  130. package/dist-types/combo-box-deprecated/ComboBoxDeprecated.d.ts +3 -3
  131. package/dist-types/combo-box-deprecated/filterHelpers.d.ts +1 -1
  132. package/dist-types/combo-box-deprecated/internal/DefaultComboBox.d.ts +1 -1
  133. package/dist-types/combo-box-deprecated/internal/MultiSelectComboBox.d.ts +1 -1
  134. package/dist-types/combo-box-deprecated/internal/useComboBox.d.ts +98 -97
  135. package/dist-types/combo-box-deprecated/internal/useMultiSelectComboBox.d.ts +214 -212
  136. package/dist-types/combo-box-deprecated/internal/usePopperStatus.d.ts +3 -3
  137. package/dist-types/common-hooks/collectionTypes.d.ts +3 -3
  138. package/dist-types/common-hooks/itemToString.d.ts +1 -1
  139. package/dist-types/common-hooks/navigationTypes.d.ts +4 -4
  140. package/dist-types/common-hooks/selectionTypes.d.ts +10 -10
  141. package/dist-types/common-hooks/useKeyboardNavigation.d.ts +1 -1
  142. package/dist-types/common-hooks/useSelection.d.ts +2 -2
  143. package/dist-types/common-hooks/utils/collection-item-utils.d.ts +2 -2
  144. package/dist-types/common-hooks/utils/filter-utils.d.ts +2 -2
  145. package/dist-types/contact-details/ContactAction.d.ts +1 -1
  146. package/dist-types/contact-details/ContactAvatar.d.ts +1 -1
  147. package/dist-types/contact-details/ContactDetails.d.ts +1 -1
  148. package/dist-types/date-input/DateInputRange.d.ts +2 -2
  149. package/dist-types/date-input/DateInputSingle.d.ts +1 -1
  150. package/dist-types/date-picker/DatePicker.d.ts +1 -1
  151. package/dist-types/date-picker/DatePickerActions.d.ts +1 -1
  152. package/dist-types/date-picker/DatePickerContext.d.ts +1 -1
  153. package/dist-types/date-picker/DatePickerOverlayProvider.d.ts +1 -1
  154. package/dist-types/date-picker/DatePickerRangeGridPanel.d.ts +1 -1
  155. package/dist-types/date-picker/DatePickerSingleGridPanel.d.ts +1 -1
  156. package/dist-types/date-picker/DatePickerSinglePanel.d.ts +1 -1
  157. package/dist-types/date-picker/useDatePicker.d.ts +1 -1
  158. package/dist-types/deck-layout/DeckLayout.d.ts +3 -3
  159. package/dist-types/dropdown/Dropdown.d.ts +3 -3
  160. package/dist-types/dropdown/DropdownBase.d.ts +1 -1
  161. package/dist-types/dropdown/dropdownTypes.d.ts +1 -1
  162. package/dist-types/dropdown/useClickAway.d.ts +1 -1
  163. package/dist-types/dropdown/useDropdown.d.ts +1 -1
  164. package/dist-types/focus-manager/internal/findAllTabbableElements.d.ts +1 -1
  165. package/dist-types/form-field-legacy/FormFieldLegacy.d.ts +5 -5
  166. package/dist-types/form-field-legacy/NecessityIndicator.d.ts +1 -1
  167. package/dist-types/form-field-legacy/StatusIndicator.d.ts +1 -1
  168. package/dist-types/formatted-input/FormattedInput.d.ts +1 -1
  169. package/dist-types/index.d.ts +0 -1
  170. package/dist-types/input-legacy/StaticInputAdornment.d.ts +1 -1
  171. package/dist-types/layer-layout/LayerLayout.d.ts +1 -1
  172. package/dist-types/list/List.d.ts +3 -3
  173. package/dist-types/list/ListItem.d.ts +1 -1
  174. package/dist-types/list/VirtualizedList.d.ts +3 -3
  175. package/dist-types/list/listTypes.d.ts +2 -2
  176. package/dist-types/list/useList.d.ts +1 -1
  177. package/dist-types/list/useVirtualization.d.ts +1 -1
  178. package/dist-types/list-deprecated/List.d.ts +2 -2
  179. package/dist-types/list-deprecated/ListBase.d.ts +2 -2
  180. package/dist-types/list-deprecated/ListItem.d.ts +1 -1
  181. package/dist-types/list-deprecated/ListItemContext.d.ts +1 -1
  182. package/dist-types/list-deprecated/ListProps.d.ts +5 -5
  183. package/dist-types/list-deprecated/itemToString.d.ts +1 -1
  184. package/dist-types/list-deprecated/useListItem.d.ts +2 -2
  185. package/dist-types/localization-provider/LocalizationProvider.d.ts +3 -3
  186. package/dist-types/logo/Logo.d.ts +1 -1
  187. package/dist-types/logo/LogoSeparator.d.ts +1 -1
  188. package/dist-types/number-input/NumberInput.d.ts +49 -27
  189. package/dist-types/number-input/internal/useCaret.d.ts +5 -0
  190. package/dist-types/number-input/internal/useInterval.d.ts +1 -1
  191. package/dist-types/number-input/internal/utils.d.ts +5 -5
  192. package/dist-types/number-input/useNumberInput.d.ts +11 -6
  193. package/dist-types/query-input/useQueryInput.d.ts +1 -1
  194. package/dist-types/responsive/OverflowReducer.d.ts +4 -4
  195. package/dist-types/responsive/overflowTypes.d.ts +20 -20
  196. package/dist-types/responsive/overflowUtils.d.ts +3 -3
  197. package/dist-types/responsive/useOverflowCollectionItems.d.ts +1 -1
  198. package/dist-types/responsive/useOverflowLayout.d.ts +1 -1
  199. package/dist-types/responsive/useResizeObserver.d.ts +2 -2
  200. package/dist-types/responsive/utils.d.ts +3 -3
  201. package/dist-types/tabs/Tab.d.ts +20 -19
  202. package/dist-types/tabs/Tabs.d.ts +1 -1
  203. package/dist-types/tabs/TabsTypes.d.ts +7 -7
  204. package/dist-types/tabs/drag-drop/Draggable.d.ts +2 -2
  205. package/dist-types/tabs/drag-drop/DropIndicator.d.ts +1 -1
  206. package/dist-types/tabs/drag-drop/drag-utils.d.ts +26 -22
  207. package/dist-types/tabs/drag-drop/dragDropTypes.d.ts +5 -5
  208. package/dist-types/tabs/drag-drop/useDragSpacers.d.ts +1 -1
  209. package/dist-types/tabs/useActivationIndicator.d.ts +1 -1
  210. package/dist-types/tabs/useEditableItem.d.ts +1 -1
  211. package/dist-types/tabs/useKeyboardNavigation.d.ts +1 -1
  212. package/dist-types/tabs/useSelection.d.ts +3 -3
  213. package/dist-types/tabs-next/hooks/useCollection.d.ts +1 -1
  214. package/dist-types/tokenized-input/TokenizedInput.d.ts +2 -2
  215. package/dist-types/tokenized-input/TokenizedInputBase.d.ts +5 -5
  216. package/dist-types/tokenized-input/internal/InputPill.d.ts +1 -1
  217. package/dist-types/tokenized-input/internal/isPlainObject.d.ts +1 -1
  218. package/dist-types/tokenized-input/useTokenizedInput.d.ts +1 -1
  219. package/dist-types/tokenized-input-next/TokenizedInputNext.d.ts +2 -2
  220. package/dist-types/tokenized-input-next/internal/InputPill.d.ts +1 -1
  221. package/dist-types/toolbar/ToolbarButton.d.ts +3 -3
  222. package/dist-types/toolbar/ToolbarProps.d.ts +1 -1
  223. package/dist-types/toolbar/TooltrayProps.d.ts +2 -2
  224. package/dist-types/toolbar/internal/ToolbarButtonRefsContext.d.ts +1 -1
  225. package/dist-types/toolbar/internal/renderTrayTools.d.ts +1 -1
  226. package/dist-types/tree/useTree.d.ts +1 -1
  227. package/dist-types/utils/forwardCallbackProps.d.ts +1 -1
  228. package/dist-types/utils/isEmail.d.ts +1 -1
  229. package/dist-types/utils/useClickOutside.d.ts +1 -1
  230. package/dist-types/utils/useSlideSelection.d.ts +1 -1
  231. package/dist-types/window/ElectronWindow.d.ts +1 -1
  232. package/dist-types/window/WindowContext.d.ts +4 -4
  233. package/package.json +2 -2
  234. package/dist-cjs/carousel/Carousel.css.js +0 -6
  235. package/dist-cjs/carousel/Carousel.css.js.map +0 -1
  236. package/dist-cjs/carousel/Carousel.js +0 -62
  237. package/dist-cjs/carousel/Carousel.js.map +0 -1
  238. package/dist-cjs/carousel/CarouselContext.js +0 -62
  239. package/dist-cjs/carousel/CarouselContext.js.map +0 -1
  240. package/dist-cjs/carousel/CarouselControls.css.js +0 -6
  241. package/dist-cjs/carousel/CarouselControls.css.js.map +0 -1
  242. package/dist-cjs/carousel/CarouselControls.js +0 -122
  243. package/dist-cjs/carousel/CarouselControls.js.map +0 -1
  244. package/dist-cjs/carousel/CarouselReducer.js +0 -77
  245. package/dist-cjs/carousel/CarouselReducer.js.map +0 -1
  246. package/dist-cjs/carousel/CarouselSlide.css.js +0 -6
  247. package/dist-cjs/carousel/CarouselSlide.css.js.map +0 -1
  248. package/dist-cjs/carousel/CarouselSlide.js +0 -110
  249. package/dist-cjs/carousel/CarouselSlide.js.map +0 -1
  250. package/dist-cjs/carousel/CarouselSlider.css.js +0 -6
  251. package/dist-cjs/carousel/CarouselSlider.css.js.map +0 -1
  252. package/dist-cjs/carousel/CarouselSlider.js +0 -93
  253. package/dist-cjs/carousel/CarouselSlider.js.map +0 -1
  254. package/dist-es/carousel/Carousel.css.js +0 -4
  255. package/dist-es/carousel/Carousel.css.js.map +0 -1
  256. package/dist-es/carousel/Carousel.js +0 -60
  257. package/dist-es/carousel/Carousel.js.map +0 -1
  258. package/dist-es/carousel/CarouselContext.js +0 -58
  259. package/dist-es/carousel/CarouselContext.js.map +0 -1
  260. package/dist-es/carousel/CarouselControls.css.js +0 -4
  261. package/dist-es/carousel/CarouselControls.css.js.map +0 -1
  262. package/dist-es/carousel/CarouselControls.js +0 -120
  263. package/dist-es/carousel/CarouselControls.js.map +0 -1
  264. package/dist-es/carousel/CarouselReducer.js +0 -75
  265. package/dist-es/carousel/CarouselReducer.js.map +0 -1
  266. package/dist-es/carousel/CarouselSlide.css.js +0 -4
  267. package/dist-es/carousel/CarouselSlide.css.js.map +0 -1
  268. package/dist-es/carousel/CarouselSlide.js +0 -108
  269. package/dist-es/carousel/CarouselSlide.js.map +0 -1
  270. package/dist-es/carousel/CarouselSlider.css.js +0 -4
  271. package/dist-es/carousel/CarouselSlider.css.js.map +0 -1
  272. package/dist-es/carousel/CarouselSlider.js +0 -91
  273. package/dist-es/carousel/CarouselSlider.js.map +0 -1
  274. package/dist-types/carousel/Carousel.d.ts +0 -23
  275. package/dist-types/carousel/CarouselContext.d.ts +0 -11
  276. package/dist-types/carousel/CarouselControls.d.ts +0 -26
  277. package/dist-types/carousel/CarouselReducer.d.ts +0 -30
  278. package/dist-types/carousel/CarouselSlide.d.ts +0 -32
  279. package/dist-types/carousel/CarouselSlider.d.ts +0 -13
  280. package/dist-types/carousel/index.d.ts +0 -4
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- var css_248z = ".salt-density-high {\n --formFieldLegacy-label-top-marginBottom: 2px;\n}\n.salt-density-medium {\n --formFieldLegacy-label-top-marginBottom: 2px;\n}\n.salt-density-low {\n --formFieldLegacy-label-top-marginBottom: 4px;\n}\n.salt-density-touch {\n --formFieldLegacy-label-top-marginBottom: 8px;\n}\n\n/* Style applied to the root element */\n.saltFormFieldLegacy {\n --formFieldLegacy-activationIndicator-color: var(--salt-editable-borderColor);\n --formFieldLegacy-activationIndicator-size: var(--salt-size-border);\n --formFieldLegacy-activationIndicator-style: var(--salt-editable-borderStyle);\n --formFieldLegacy-background: var(--salt-editable-primary-background);\n --formFieldLegacy-focused-outlineColor: var(--salt-focused-outlineColor);\n /* Set to 0 until helper text class provided */\n --formFieldLegacy-helperText-height: 0px;\n}\n\n.saltFormFieldLegacy-secondary.saltFormFieldLegacy {\n --formFieldLegacy-background: var(--salt-editable-secondary-background);\n}\n\n.saltFormFieldLegacy {\n border: 0;\n display: inline-grid;\n margin: var(--saltFormFieldLegacy-margin, 0);\n padding: 0;\n position: relative;\n min-width: 0;\n vertical-align: top;\n width: var(--saltFormFieldLegacy-width, auto);\n\n font-family: var(--salt-text-fontFamily);\n font-size: var(--saltFormFieldLegacy-fontSize, var(--salt-text-fontSize));\n font-weight: var(--salt-text-fontWeight);\n line-height: var(--salt-text-lineHeight);\n}\n\n/* Class applied to the root element on hover */\n.saltFormFieldLegacy:hover {\n --formFieldLegacy-activationIndicator-color: var(--salt-editable-borderColor-hover);\n --formFieldLegacy-activationIndicator-size: var(--salt-size-border);\n --formFieldLegacy-activationIndicator-style: var(--salt-editable-borderStyle-hover);\n\n --saltInputLegacy-cursor: var(--salt-editable-cursor-hover);\n}\n\n/* Class applied to the root element when focused */\n.saltFormFieldLegacy-focused,\n.saltFormFieldLegacy-lowFocused,\n.saltFormFieldLegacy.saltFormFieldLegacy-focused:hover,\n.saltFormFieldLegacy.saltFormFieldLegacy-lowFocused:hover {\n --formFieldLegacy-activationIndicator-color: var(--salt-editable-borderColor-active);\n --formFieldLegacy-activationIndicator-size: var(--salt-editable-borderWidth-active);\n --formFieldLegacy-activationIndicator-style: var(--salt-editable-borderStyle-active);\n\n --saltInputLegacy-cursor: var(--salt-editable-cursor-active);\n}\n\n/* Class applied when helper text is provided */\n.saltFormFieldLegacy-withHelperText {\n --formFieldLegacy-helperText-marginTop: var(--formFieldLegacy-helperText-marginTop-default);\n --formFieldLegacy-activationIndicator-offsetBottom: calc(var(--formFieldLegacy-helperText-marginTop) + var(--saltFormFieldLegacy-helperText-lineHeight, var(--formFieldLegacy-helperText-height)));\n}\n\n/* Class applied if `fullWidth={true}` and helper text is provided */\n.saltFormFieldLegacy-fullWidth.saltFormFieldLegacy-withHelperText {\n --formFieldLegacy-helperText-marginTop: var(--formFieldLegacy-helperText-marginTop-fullWidth);\n --formFieldLegacy-activationIndicator-offsetBottom: calc(\n var(--formFieldLegacy-helperText-marginTop-fullWidth) +\n var(--saltFormFieldLegacy-helperText-lineHeight, var(--formFieldLegacy-helperText-height))\n );\n}\n\n/* Class applied when helper text is provided */\n.saltFormFieldLegacy-withHelperText {\n --formFieldLegacy-helperText-fontSize: var(--saltFormFieldLegacy-helperText-fontSize, var(--salt-text-fontSize));\n --formFieldLegacy-helperText-baseHeight: calc(1.3 * var(--formFieldLegacy-helperText-fontSize));\n --formFieldLegacy-helperText-calculatedHeight: max(var(--salt-text-label-minHeight), var(--formFieldLegacy-helperText-baseHeight));\n --formFieldLegacy-helperText-height: calc(var(--formFieldLegacy-helperText-calculatedHeight) + var(--formFieldLegacy-helperText-marginTop));\n}\n\n/* Class applied to the root element if `fillWidth={true}` */\n.saltFormFieldLegacy-fullWidth {\n width: 100%;\n}\n\n/* Class applied to the root element if `disabled={true}` */\n.saltFormFieldLegacy-disabled {\n --formFieldLegacy-activationIndicator-color: var(--salt-editable-borderColor-disabled);\n --formFieldLegacy-activationIndicator-opacity: var(--salt-palette-opacity-disabled);\n --formFieldLegacy-activationIndicator-size: var(--salt-size-border);\n --formFieldLegacy-activationIndicator-style: var(--salt-editable-borderStyle-disabled);\n --formFieldLegacy-helperText-opacity: var(--salt-palette-opacity-disabled);\n\n --saltInputLegacy-cursor: var(--salt-editable-cursor-disabled);\n}\n\n/* Class applied to the root element on hover if `disabled={true}` */\n.saltFormFieldLegacy.saltFormFieldLegacy-disabled:hover {\n --formFieldLegacy-activationIndicator-color: var(--salt-editable-borderColor-disabled);\n --formFieldLegacy-activationIndicator-size: var(--salt-size-border);\n --formFieldLegacy-activationIndicator-style: var(--salt-editable-borderStyle-disabled);\n\n --saltInputLegacy-cursor: var(--salt-editable-cursor-disabled);\n}\n\n/* Class applied to the root element on warning state */\n.saltFormFieldLegacy.saltFormFieldLegacy-warning {\n --formFieldLegacy-focused-outlineColor: var(--salt-status-warning-borderColor);\n --formFieldLegacy-activationIndicator-color: var(--salt-status-warning-borderColor);\n}\n\n/* Class applied to the root element on warning state on hover */\n.saltFormFieldLegacy.saltFormFieldLegacy-warning:hover {\n --formFieldLegacy-activationIndicator-color: var(--salt-status-warning-borderColor);\n}\n\n/* Class applied to the root element on error state */\n.saltFormFieldLegacy.saltFormFieldLegacy-error {\n --formFieldLegacy-focused-outlineColor: var(--salt-status-error-borderColor);\n --formFieldLegacy-activationIndicator-color: var(--salt-status-error-borderColor);\n}\n\n/* Class applied to the root element on error state on hover */\n.saltFormFieldLegacy.saltFormFieldLegacy-error:hover {\n --formFieldLegacy-activationIndicator-color: var(--salt-status-error-borderColor);\n}\n\n/* Error state styling when `variant=\"secondary\"` */\n.saltFormFieldLegacy-secondary.saltFormFieldLegacy-error {\n --formFieldLegacy-background: var(--salt-status-error-background);\n}\n\n/* Warning state styling when `variant=\"secondary\"` */\n.saltFormFieldLegacy-secondary.saltFormFieldLegacy-warning {\n --formFieldLegacy-background: var(--salt-status-warning-background);\n}\n\n/* Class applied to the root element if `labelPlacement=\"left\"` */\n.saltFormFieldLegacy-labelLeft {\n --formFieldLegacy-label-marginTop: var(--salt-size-unit);\n --formFieldLegacy-label-paddingLeft: 0px;\n --formFieldLegacy-label-paddingRight: calc(0.75 * var(--salt-size-unit));\n\n align-self: start;\n grid-template-columns: auto 1fr;\n}\n\n/* Class applied to the root element if `labelPlacement=\"top\"` or labelPlacement omitted (default is 'top') */\n.saltFormFieldLegacy-labelTop {\n --formFieldLegacy-label-marginBottom: var(--formFieldLegacy-label-top-marginBottom);\n --formFieldLegacy-label-marginTop: 0;\n --formFieldLegacy-label-paddingLeft: var(--salt-size-unit);\n --formFieldLegacy-label-paddingRight: var(--salt-size-unit);\n /* Uses density invariant value unless helper text provided */\n --formFieldLegacy-background-offset-height: calc(var(--formFieldLegacy-helperText-marginTop, 0px) + var(--saltFormFieldLegacy-helperText-lineHeight, var(--formFieldLegacy-helperText-height)));\n\n background: linear-gradient(\n to top,\n transparent var(--formFieldLegacy-background-offset-height),\n var(--saltFormFieldLegacy-background, var(--formFieldLegacy-background)) var(--formFieldLegacy-background-offset-height)\n );\n}\n\n/* Class applied if `labelPlacement=\"top\"` and helper text is provided */\n.saltFormFieldLegacy-labelTop.saltFormFieldLegacy-withHelperText {\n /* Uses density aware value from FormHelperText */\n --formFieldLegacy-background-offset-height: var(--formFieldLegacy-helperText-background-offset-height);\n}\n\n.saltFormFieldLegacy > * {\n grid-column-start: 1;\n grid-column-end: 2;\n grid-row-start: 2;\n grid-row-end: 3;\n}\n\n.saltFormFieldLegacy-labelLeft > * {\n grid-row-start: 1;\n grid-row-end: 2;\n}\n\n.saltFormFieldLegacy > .saltFormLabel {\n grid-row-start: 1;\n grid-row-end: 2;\n}\n\n.saltFormFieldLegacy > .saltFormActivationIndicator {\n grid-row-start: 3;\n grid-row-end: 4;\n}\n\n.saltFormFieldLegacy > .saltFormHelperText {\n grid-row-start: 4;\n grid-row-end: 5;\n}\n\n.saltFormFieldLegacy-labelLeft > .saltFormLabel ~ * {\n grid-column-start: 2;\n grid-column-end: 2;\n}\n\n/* Class applied if `readOnly={true}\"` */\n.saltFormFieldLegacy-readOnly {\n --formFieldLegacy-activationIndicator-color: var(--salt-editable-borderColor-readonly);\n\n --saltInputLegacy-cursor: var(--salt-editable-cursor-readonly);\n}\n\n/* Class applied to the root element if `readOnly={true}\"` on hover */\n.saltFormFieldLegacy.saltFormFieldLegacy-readOnly:hover {\n --formFieldLegacy-activationIndicator-color: var(--salt-editable-borderColor-readonly);\n --formFieldLegacy-activationIndicator-size: var(--salt-size-border);\n --formFieldLegacy-activationIndicator-style: var(--salt-editable-borderStyle-readonly);\n\n --saltInputLegacy-cursor: var(--salt-editable-cursor-readonly);\n}\n\n/* Class applied on focus with `labelTop={true}` and no helper text provided */\n.saltFormFieldLegacy:not(.saltFormFieldLegacy-withHelperText):not(.saltFormFieldLegacy-labelLeft).saltFormFieldLegacy-focused:before {\n content: \" \";\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: var(--saltFormFieldLegacy-helperText-lineHeight, var(--formFieldLegacy-helperText-height, 0px));\n outline-color: var(--formFieldLegacy-focused-outlineColor);\n outline-style: var(--salt-focused-outlineStyle);\n outline-width: var(--salt-focused-outlineWidth);\n}\n\n/* Class applied on focus with `labelTop={true}` and helper text provided */\n.saltFormFieldLegacy-withHelperText:not(.saltFormFieldLegacy-labelLeft).saltFormFieldLegacy-focused:before {\n content: \" \";\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: var(--formFieldLegacy-helperText-height, 0px);\n outline-color: var(--formFieldLegacy-focused-outlineColor);\n outline-style: var(--salt-focused-outlineStyle);\n outline-width: var(--salt-focused-outlineWidth);\n}\n\n.saltFormFieldLegacy-labelLeft.saltFormFieldLegacy-focused:before {\n content: none;\n}\n\n/* Class applied on focus with `labelLeft={true}` */\n.saltFormFieldLegacy-labelLeft.saltFormFieldLegacy-focused > *:before {\n content: \" \";\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0px;\n outline-color: var(--formFieldLegacy-focused-outlineColor);\n outline-style: var(--salt-focused-outlineStyle);\n outline-width: var(--salt-focused-outlineWidth);\n z-index: -1;\n}\n\n.saltFormFieldLegacy-labelLeft.saltFormFieldLegacy-focused > :is(.saltFormActivationIndicator, .saltFormHelperText, .saltFormLabel):before {\n content: none;\n}\n\n.saltFormFieldLegacy-labelLeft.saltFormFieldLegacy-focused {\n outline: none;\n}\n\n.saltFormFieldLegacy-labelLeft.saltFormFieldLegacy-focused > :is(.saltFormFieldLegacy-activationIndicator, .saltFormFieldLegacy-helperText, .saltFormLabel):before {\n content: none;\n}\n\n.saltFormFieldLegacy-labelLeft.saltFormFieldLegacy-focused .saltFormLabel + * {\n outline: none;\n}\n\n.saltFormFieldLegacy-tertiary.saltFormFieldLegacy.saltFormFieldLegacy-labelLeft > .saltFormLabel ~ * {\n background: var(--saltFormFieldLegacy-background, var(--formFieldLegacy-background));\n}\n\n/* TODO: I don't think this is needed, but commenting until work on FF done\n.saltFormFieldLegacy-primary.saltFormFieldLegacy > :not(.saltFormLabel):first-child {\n background: var(--saltFormFieldLegacy-background, var(--formFieldLegacy-background));\n} */\n\n.saltFormFieldLegacy-labelLeft > .saltFormLabel ~ :not(.saltFormHelperText) {\n background: var(--saltFormFieldLegacy-background, var(--formFieldLegacy-background));\n}\n\n/* **Deprecated:** Tertiary variant no longer supported */\n.saltFormFieldLegacy-tertiary.saltFormFieldLegacy {\n --formFieldLegacy-background: var(--salt-editable-tertiary-background);\n}\n";
3
+ var css_248z = ".salt-density-high {\n --formFieldLegacy-label-top-marginBottom: 2px;\n}\n.salt-density-medium {\n --formFieldLegacy-label-top-marginBottom: 2px;\n}\n.salt-density-low {\n --formFieldLegacy-label-top-marginBottom: 4px;\n}\n.salt-density-touch {\n --formFieldLegacy-label-top-marginBottom: 8px;\n}\n\n/* Style applied to the root element */\n.saltFormFieldLegacy {\n --formFieldLegacy-activationIndicator-color: var(--salt-editable-borderColor);\n --formFieldLegacy-activationIndicator-size: var(--salt-size-fixed-100);\n --formFieldLegacy-activationIndicator-style: var(--salt-editable-borderStyle);\n --formFieldLegacy-background: var(--salt-editable-primary-background);\n --formFieldLegacy-focused-outlineColor: var(--salt-focused-outlineColor);\n /* Set to 0 until helper text class provided */\n --formFieldLegacy-helperText-height: 0px;\n}\n\n.saltFormFieldLegacy-secondary.saltFormFieldLegacy {\n --formFieldLegacy-background: var(--salt-editable-secondary-background);\n}\n\n.saltFormFieldLegacy {\n border: 0;\n display: inline-grid;\n margin: var(--saltFormFieldLegacy-margin, 0);\n padding: 0;\n position: relative;\n min-width: 0;\n vertical-align: top;\n width: var(--saltFormFieldLegacy-width, auto);\n\n font-family: var(--salt-text-fontFamily);\n font-size: var(--saltFormFieldLegacy-fontSize, var(--salt-text-fontSize));\n font-weight: var(--salt-text-fontWeight);\n line-height: var(--salt-text-lineHeight);\n}\n\n/* Class applied to the root element on hover */\n.saltFormFieldLegacy:hover {\n --formFieldLegacy-activationIndicator-color: var(--salt-editable-borderColor-hover);\n --formFieldLegacy-activationIndicator-size: var(--salt-size-fixed-100);\n --formFieldLegacy-activationIndicator-style: var(--salt-editable-borderStyle-hover);\n\n --saltInputLegacy-cursor: var(--salt-cursor-hover);\n}\n\n/* Class applied to the root element when focused */\n.saltFormFieldLegacy-focused,\n.saltFormFieldLegacy-lowFocused,\n.saltFormFieldLegacy.saltFormFieldLegacy-focused:hover,\n.saltFormFieldLegacy.saltFormFieldLegacy-lowFocused:hover {\n --formFieldLegacy-activationIndicator-color: var(--salt-editable-borderColor-active);\n --formFieldLegacy-activationIndicator-size: var(--salt-size-fixed-200);\n --formFieldLegacy-activationIndicator-style: var(--salt-editable-borderStyle-active);\n\n --saltInputLegacy-cursor: var(--salt-cursor-active);\n}\n\n/* Class applied when helper text is provided */\n.saltFormFieldLegacy-withHelperText {\n --formFieldLegacy-helperText-marginTop: var(--formFieldLegacy-helperText-marginTop-default);\n --formFieldLegacy-activationIndicator-offsetBottom: calc(var(--formFieldLegacy-helperText-marginTop) + var(--saltFormFieldLegacy-helperText-lineHeight, var(--formFieldLegacy-helperText-height)));\n}\n\n/* Class applied if `fullWidth={true}` and helper text is provided */\n.saltFormFieldLegacy-fullWidth.saltFormFieldLegacy-withHelperText {\n --formFieldLegacy-helperText-marginTop: var(--formFieldLegacy-helperText-marginTop-fullWidth);\n --formFieldLegacy-activationIndicator-offsetBottom: calc(\n var(--formFieldLegacy-helperText-marginTop-fullWidth) +\n var(--saltFormFieldLegacy-helperText-lineHeight, var(--formFieldLegacy-helperText-height))\n );\n}\n\n/* Class applied when helper text is provided */\n.saltFormFieldLegacy-withHelperText {\n --formFieldLegacy-helperText-fontSize: var(--saltFormFieldLegacy-helperText-fontSize, var(--salt-text-fontSize));\n --formFieldLegacy-helperText-baseHeight: calc(1.3 * var(--formFieldLegacy-helperText-fontSize));\n --formFieldLegacy-helperText-calculatedHeight: max(var(--salt-text-label-minHeight), var(--formFieldLegacy-helperText-baseHeight));\n --formFieldLegacy-helperText-height: calc(var(--formFieldLegacy-helperText-calculatedHeight) + var(--formFieldLegacy-helperText-marginTop));\n}\n\n/* Class applied to the root element if `fillWidth={true}` */\n.saltFormFieldLegacy-fullWidth {\n width: 100%;\n}\n\n/* Class applied to the root element if `disabled={true}` */\n.saltFormFieldLegacy-disabled {\n --formFieldLegacy-activationIndicator-color: var(--salt-editable-borderColor-disabled);\n --formFieldLegacy-activationIndicator-opacity: var(--salt-palette-opacity-disabled);\n --formFieldLegacy-activationIndicator-size: var(--salt-size-fixed-100);\n --formFieldLegacy-activationIndicator-style: var(--salt-editable-borderStyle-disabled);\n --formFieldLegacy-helperText-opacity: var(--salt-palette-opacity-disabled);\n\n --saltInputLegacy-cursor: var(--salt-cursor-disabled);\n}\n\n/* Class applied to the root element on hover if `disabled={true}` */\n.saltFormFieldLegacy.saltFormFieldLegacy-disabled:hover {\n --formFieldLegacy-activationIndicator-color: var(--salt-editable-borderColor-disabled);\n --formFieldLegacy-activationIndicator-size: var(--salt-size-fixed-100);\n --formFieldLegacy-activationIndicator-style: var(--salt-editable-borderStyle-disabled);\n\n --saltInputLegacy-cursor: var(--salt-cursor-disabled);\n}\n\n/* Class applied to the root element on warning state */\n.saltFormFieldLegacy.saltFormFieldLegacy-warning {\n --formFieldLegacy-focused-outlineColor: var(--salt-status-warning-borderColor);\n --formFieldLegacy-activationIndicator-color: var(--salt-status-warning-borderColor);\n}\n\n/* Class applied to the root element on warning state on hover */\n.saltFormFieldLegacy.saltFormFieldLegacy-warning:hover {\n --formFieldLegacy-activationIndicator-color: var(--salt-status-warning-borderColor);\n}\n\n/* Class applied to the root element on error state */\n.saltFormFieldLegacy.saltFormFieldLegacy-error {\n --formFieldLegacy-focused-outlineColor: var(--salt-status-error-borderColor);\n --formFieldLegacy-activationIndicator-color: var(--salt-status-error-borderColor);\n}\n\n/* Class applied to the root element on error state on hover */\n.saltFormFieldLegacy.saltFormFieldLegacy-error:hover {\n --formFieldLegacy-activationIndicator-color: var(--salt-status-error-borderColor);\n}\n\n/* Error state styling when `variant=\"secondary\"` */\n.saltFormFieldLegacy-secondary.saltFormFieldLegacy-error {\n --formFieldLegacy-background: var(--salt-status-error-background);\n}\n\n/* Warning state styling when `variant=\"secondary\"` */\n.saltFormFieldLegacy-secondary.saltFormFieldLegacy-warning {\n --formFieldLegacy-background: var(--salt-status-warning-background);\n}\n\n/* Class applied to the root element if `labelPlacement=\"left\"` */\n.saltFormFieldLegacy-labelLeft {\n --formFieldLegacy-label-marginTop: var(--salt-size-unit);\n --formFieldLegacy-label-paddingLeft: 0px;\n --formFieldLegacy-label-paddingRight: calc(0.75 * var(--salt-size-unit));\n\n align-self: start;\n grid-template-columns: auto 1fr;\n}\n\n/* Class applied to the root element if `labelPlacement=\"top\"` or labelPlacement omitted (default is 'top') */\n.saltFormFieldLegacy-labelTop {\n --formFieldLegacy-label-marginBottom: var(--formFieldLegacy-label-top-marginBottom);\n --formFieldLegacy-label-marginTop: 0;\n --formFieldLegacy-label-paddingLeft: var(--salt-size-unit);\n --formFieldLegacy-label-paddingRight: var(--salt-size-unit);\n /* Uses density invariant value unless helper text provided */\n --formFieldLegacy-background-offset-height: calc(var(--formFieldLegacy-helperText-marginTop, 0px) + var(--saltFormFieldLegacy-helperText-lineHeight, var(--formFieldLegacy-helperText-height)));\n\n background: linear-gradient(\n to top,\n transparent var(--formFieldLegacy-background-offset-height),\n var(--saltFormFieldLegacy-background, var(--formFieldLegacy-background)) var(--formFieldLegacy-background-offset-height)\n );\n}\n\n/* Class applied if `labelPlacement=\"top\"` and helper text is provided */\n.saltFormFieldLegacy-labelTop.saltFormFieldLegacy-withHelperText {\n /* Uses density aware value from FormHelperText */\n --formFieldLegacy-background-offset-height: var(--formFieldLegacy-helperText-background-offset-height);\n}\n\n.saltFormFieldLegacy > * {\n grid-column-start: 1;\n grid-column-end: 2;\n grid-row-start: 2;\n grid-row-end: 3;\n}\n\n.saltFormFieldLegacy-labelLeft > * {\n grid-row-start: 1;\n grid-row-end: 2;\n}\n\n.saltFormFieldLegacy > .saltFormLabel {\n grid-row-start: 1;\n grid-row-end: 2;\n}\n\n.saltFormFieldLegacy > .saltFormActivationIndicator {\n grid-row-start: 3;\n grid-row-end: 4;\n}\n\n.saltFormFieldLegacy > .saltFormHelperText {\n grid-row-start: 4;\n grid-row-end: 5;\n}\n\n.saltFormFieldLegacy-labelLeft > .saltFormLabel ~ * {\n grid-column-start: 2;\n grid-column-end: 2;\n}\n\n/* Class applied if `readOnly={true}\"` */\n.saltFormFieldLegacy-readOnly {\n --formFieldLegacy-activationIndicator-color: var(--salt-editable-borderColor-readonly);\n\n --saltInputLegacy-cursor: var(--salt-cursor-readonly);\n}\n\n/* Class applied to the root element if `readOnly={true}\"` on hover */\n.saltFormFieldLegacy.saltFormFieldLegacy-readOnly:hover {\n --formFieldLegacy-activationIndicator-color: var(--salt-editable-borderColor-readonly);\n --formFieldLegacy-activationIndicator-size: var(--salt-size-fixed-100);\n --formFieldLegacy-activationIndicator-style: var(--salt-editable-borderStyle-readonly);\n\n --saltInputLegacy-cursor: var(--salt-cursor-readonly);\n}\n\n/* Class applied on focus with `labelTop={true}` and no helper text provided */\n.saltFormFieldLegacy:not(.saltFormFieldLegacy-withHelperText):not(.saltFormFieldLegacy-labelLeft).saltFormFieldLegacy-focused:before {\n content: \" \";\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: var(--saltFormFieldLegacy-helperText-lineHeight, var(--formFieldLegacy-helperText-height, 0px));\n outline-color: var(--formFieldLegacy-focused-outlineColor);\n outline-style: var(--salt-focused-outlineStyle);\n outline-width: var(--salt-focused-outlineWidth);\n}\n\n/* Class applied on focus with `labelTop={true}` and helper text provided */\n.saltFormFieldLegacy-withHelperText:not(.saltFormFieldLegacy-labelLeft).saltFormFieldLegacy-focused:before {\n content: \" \";\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: var(--formFieldLegacy-helperText-height, 0px);\n outline-color: var(--formFieldLegacy-focused-outlineColor);\n outline-style: var(--salt-focused-outlineStyle);\n outline-width: var(--salt-focused-outlineWidth);\n}\n\n.saltFormFieldLegacy-labelLeft.saltFormFieldLegacy-focused:before {\n content: none;\n}\n\n/* Class applied on focus with `labelLeft={true}` */\n.saltFormFieldLegacy-labelLeft.saltFormFieldLegacy-focused > *:before {\n content: \" \";\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0px;\n outline-color: var(--formFieldLegacy-focused-outlineColor);\n outline-style: var(--salt-focused-outlineStyle);\n outline-width: var(--salt-focused-outlineWidth);\n z-index: -1;\n}\n\n.saltFormFieldLegacy-labelLeft.saltFormFieldLegacy-focused > :is(.saltFormActivationIndicator, .saltFormHelperText, .saltFormLabel):before {\n content: none;\n}\n\n.saltFormFieldLegacy-labelLeft.saltFormFieldLegacy-focused {\n outline: none;\n}\n\n.saltFormFieldLegacy-labelLeft.saltFormFieldLegacy-focused > :is(.saltFormFieldLegacy-activationIndicator, .saltFormFieldLegacy-helperText, .saltFormLabel):before {\n content: none;\n}\n\n.saltFormFieldLegacy-labelLeft.saltFormFieldLegacy-focused .saltFormLabel + * {\n outline: none;\n}\n\n.saltFormFieldLegacy-tertiary.saltFormFieldLegacy.saltFormFieldLegacy-labelLeft > .saltFormLabel ~ * {\n background: var(--saltFormFieldLegacy-background, var(--formFieldLegacy-background));\n}\n\n/* TODO: I don't think this is needed, but commenting until work on FF done\n.saltFormFieldLegacy-primary.saltFormFieldLegacy > :not(.saltFormLabel):first-child {\n background: var(--saltFormFieldLegacy-background, var(--formFieldLegacy-background));\n} */\n\n.saltFormFieldLegacy-labelLeft > .saltFormLabel ~ :not(.saltFormHelperText) {\n background: var(--saltFormFieldLegacy-background, var(--formFieldLegacy-background));\n}\n\n/* **Deprecated:** Tertiary variant no longer supported */\n.saltFormFieldLegacy-tertiary.saltFormFieldLegacy {\n --formFieldLegacy-background: var(--salt-editable-tertiary-background);\n}\n";
4
4
 
5
5
  module.exports = css_248z;
6
6
  //# sourceMappingURL=FormFieldLegacy.css.js.map
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- var css_248z = "/* Styles applied to root element */\n.salt-density-touch {\n --formFieldLegacy-label-default-top: 11px;\n --formFieldLegacy-label-left-top: 16px;\n --formFieldLegacy-label-minHeight: 16px;\n}\n.salt-density-low {\n --formFieldLegacy-label-default-top: 7px;\n --formFieldLegacy-label-left-top: 12px;\n}\n.salt-density-medium {\n --formFieldLegacy-label-default-top: 5px;\n --formFieldLegacy-label-left-top: 8px;\n}\n.salt-density-high {\n --formFieldLegacy-label-default-top: 3px;\n --formFieldLegacy-label-left-top: 4px;\n}\n\n.saltFormLabel {\n --formFieldLegacy-label-fontSize: var(--saltFormFieldLegacy-label-fontSize, var(--salt-text-label-fontSize));\n --formFieldLegacy-label-top: var(--formFieldLegacy-label-default-top);\n --formFieldLegacy-label-width: 100%;\n}\n\n.saltFormFieldLegacy-labelLeft .saltFormLabel {\n --formFieldLegacy-label-top: var(--formFieldLegacy-label-left-top);\n --formFieldLegacy-label-width: auto;\n}\n\n.saltFormLabel {\n align-items: center;\n color: var(--saltFormFieldLegacy-label-text-color, var(--salt-content-secondary-foreground));\n display: block;\n font-size: var(--formFieldLegacy-label-fontSize);\n margin-bottom: var(--saltFormFieldLegacy-label-marginBottom, var(--formFieldLegacy-label-marginBottom));\n min-height: var(--saltFormFieldLegacy-label-minHeight, var(--formFieldLegacy-label-minHeight, var(--salt-text-label-minHeight)));\n margin-top: var(--saltFormFieldLegacy-label-marginTop, 0px);\n line-height: var(--saltFormFieldLegacy-label-lineHeight, var(--salt-text-label-lineHeight));\n overflow: hidden;\n padding-left: var(--saltFormFieldLegacy-label-paddingLeft, var(--formFieldLegacy-label-paddingLeft));\n padding-right: var(--saltFormFieldLegacy-label-paddingRight, var(--formFieldLegacy-label-paddingRight));\n padding-top: var(--saltFormFieldLegacy-label-paddingTop, 0);\n padding-bottom: var(--saltFormFieldLegacy-label-paddingBottom, 0);\n text-overflow: ellipsis;\n top: var(--saltFormFieldLegacy-label-top, var(--formFieldLegacy-label-top));\n transform: translate(var(--saltFormFieldLegacy-label-transform-x, 0), var(--saltFormFieldLegacy-label-transform-y, var(--formFieldLegacy-label-top)));\n white-space: nowrap;\n width: var(--saltFormFieldLegacy-label-width, var(--formFieldLegacy-label-width, 100%));\n box-sizing: border-box;\n}\n\n.saltFormLabel ~ * {\n z-index: 1;\n}\n\n/* Styles applied when `disabled={true}` */\n.saltFormLabel-disabled {\n color: var(--saltFormFieldLegacy-label-text-color-disabled, var(--salt-content-secondary-foreground-disabled));\n cursor: var(--salt-editable-cursor-disabled);\n}\n\n/* Styles applied when displayedNecessity or necessityText provided */\n.saltFormLabel-necessityIndicator {\n font-style: var(--saltFormFieldLegacy-label-necessityIndicator-fontStyle, var(--salt-editable-help-fontStyle));\n margin-left: 1ch;\n}\n\n/* Styles applied if `hasStatusIndicator={true}` */\n.saltFormLabel-statusIndicator.saltIcon {\n margin-left: 6px;\n vertical-align: top;\n}\n";
3
+ var css_248z = "/* Styles applied to root element */\n.salt-density-touch {\n --formFieldLegacy-label-default-top: 11px;\n --formFieldLegacy-label-left-top: 16px;\n --formFieldLegacy-label-minHeight: 16px;\n}\n.salt-density-low {\n --formFieldLegacy-label-default-top: 7px;\n --formFieldLegacy-label-left-top: 12px;\n}\n.salt-density-medium {\n --formFieldLegacy-label-default-top: 5px;\n --formFieldLegacy-label-left-top: 8px;\n}\n.salt-density-high {\n --formFieldLegacy-label-default-top: 3px;\n --formFieldLegacy-label-left-top: 4px;\n}\n\n.saltFormLabel {\n --formFieldLegacy-label-fontSize: var(--saltFormFieldLegacy-label-fontSize, var(--salt-text-label-fontSize));\n --formFieldLegacy-label-top: var(--formFieldLegacy-label-default-top);\n --formFieldLegacy-label-width: 100%;\n}\n\n.saltFormFieldLegacy-labelLeft .saltFormLabel {\n --formFieldLegacy-label-top: var(--formFieldLegacy-label-left-top);\n --formFieldLegacy-label-width: auto;\n}\n\n.saltFormLabel {\n align-items: center;\n color: var(--saltFormFieldLegacy-label-text-color, var(--salt-content-secondary-foreground));\n display: block;\n font-size: var(--formFieldLegacy-label-fontSize);\n margin-bottom: var(--saltFormFieldLegacy-label-marginBottom, var(--formFieldLegacy-label-marginBottom));\n min-height: var(--saltFormFieldLegacy-label-minHeight, var(--formFieldLegacy-label-minHeight, var(--salt-text-label-minHeight)));\n margin-top: var(--saltFormFieldLegacy-label-marginTop, 0px);\n line-height: var(--saltFormFieldLegacy-label-lineHeight, var(--salt-text-label-lineHeight));\n overflow: hidden;\n padding-left: var(--saltFormFieldLegacy-label-paddingLeft, var(--formFieldLegacy-label-paddingLeft));\n padding-right: var(--saltFormFieldLegacy-label-paddingRight, var(--formFieldLegacy-label-paddingRight));\n padding-top: var(--saltFormFieldLegacy-label-paddingTop, 0);\n padding-bottom: var(--saltFormFieldLegacy-label-paddingBottom, 0);\n text-overflow: ellipsis;\n top: var(--saltFormFieldLegacy-label-top, var(--formFieldLegacy-label-top));\n transform: translate(var(--saltFormFieldLegacy-label-transform-x, 0), var(--saltFormFieldLegacy-label-transform-y, var(--formFieldLegacy-label-top)));\n white-space: nowrap;\n width: var(--saltFormFieldLegacy-label-width, var(--formFieldLegacy-label-width, 100%));\n box-sizing: border-box;\n}\n\n.saltFormLabel ~ * {\n z-index: 1;\n}\n\n/* Styles applied when `disabled={true}` */\n.saltFormLabel-disabled {\n color: var(--saltFormFieldLegacy-label-text-color-disabled, var(--salt-content-secondary-foreground-disabled));\n cursor: var(--salt-cursor-disabled);\n}\n\n/* Styles applied when displayedNecessity or necessityText provided */\n.saltFormLabel-necessityIndicator {\n font-style: var(--saltFormFieldLegacy-label-necessityIndicator-fontStyle, var(--salt-editable-help-fontStyle));\n margin-left: 1ch;\n}\n\n/* Styles applied if `hasStatusIndicator={true}` */\n.saltFormLabel-statusIndicator.saltIcon {\n margin-left: 6px;\n vertical-align: top;\n}\n";
4
4
 
5
5
  module.exports = css_248z;
6
6
  //# sourceMappingURL=FormLabel.css.js.map
package/dist-cjs/index.js CHANGED
@@ -33,10 +33,6 @@ var CalendarGrid = require('./calendar/CalendarGrid.js');
33
33
  var useCalendarDay = require('./calendar/useCalendarDay.js');
34
34
  var useCalendar = require('./calendar/useCalendar.js');
35
35
  var useCalendarSelection = require('./calendar/useCalendarSelection.js');
36
- var Carousel = require('./carousel/Carousel.js');
37
- var CarouselSlide = require('./carousel/CarouselSlide.js');
38
- var CarouselSlider = require('./carousel/CarouselSlider.js');
39
- var CarouselControls = require('./carousel/CarouselControls.js');
40
36
  var CascadingMenu = require('./cascading-menu/CascadingMenu.js');
41
37
  var ColorChooser = require('./color-chooser/ColorChooser.js');
42
38
  var Color = require('./color-chooser/Color.js');
@@ -190,10 +186,6 @@ exports.isMultipleDateSelection = useCalendarSelection.isMultipleDateSelection;
190
186
  exports.isSingleSelectionValueType = useCalendarSelection.isSingleSelectionValueType;
191
187
  exports.useCalendarSelection = useCalendarSelection.useCalendarSelection;
192
188
  exports.useCalendarSelectionDay = useCalendarSelection.useCalendarSelectionDay;
193
- exports.Carousel = Carousel.Carousel;
194
- exports.CarouselSlide = CarouselSlide.CarouselSlide;
195
- exports.CarouselSlider = CarouselSlider.CarouselSlider;
196
- exports.CarouselControls = CarouselControls.CarouselControls;
197
189
  exports.CascadingMenu = CascadingMenu.CascadingMenu;
198
190
  exports.ColorChooser = ColorChooser.ColorChooser;
199
191
  exports.Color = Color.Color;
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- var css_248z = "/* Styles applied to the root element dependent on density */\n.salt-density-touch {\n --inputLegacy-adornment-height: calc(var(--salt-size-base) + var(--salt-size-unit) * 0.5);\n --inputLegacy-button-inset: 4px;\n}\n.salt-density-low {\n --inputLegacy-adornment-height: calc(var(--salt-size-base) + var(--salt-size-unit) * 2 / 3);\n --inputLegacy-button-inset: 4px;\n}\n.salt-density-medium {\n --inputLegacy-adornment-height: calc(var(--salt-size-base) + var(--salt-size-unit) * 0.5);\n --inputLegacy-button-inset: 2px;\n}\n.salt-density-high {\n --inputLegacy-adornment-height: calc(var(--salt-size-base) + var(--salt-size-unit));\n --inputLegacy-button-inset: 2px;\n}\n\n/* Style applied to the root element */\n.saltInputLegacy {\n align-items: center;\n background: var(--saltInputLegacy-background, none);\n border: var(--saltInputLegacy-border, none);\n border-radius: var(--saltInputLegacy-borderRadius, 0);\n color: var(--saltInputLegacy-text-color, var(--salt-content-primary-foreground));\n cursor: var(--saltInputLegacy-cursor, default);\n display: inline-flex;\n font-family: var(--saltInputLegacy-fontFamily, var(--salt-text-fontFamily));\n font-size: var(--saltInputLegacy-fontSize, var(--salt-text-fontSize));\n height: var(--saltInputLegacy-height, var(--salt-size-base));\n line-height: var(--salt-text-lineHeight);\n min-height: var(--saltInputLegacy-minHeight, var(--salt-size-base));\n min-width: var(--saltInputLegacy-minWidth, 8em);\n padding: var(--saltInputLegacy-padding, 0 var(--salt-size-unit));\n position: var(--saltInputLegacy-position, relative);\n width: 100%;\n box-sizing: border-box;\n}\n\n/* Reset in the next class */\n.saltInputLegacy-input:focus {\n outline: none;\n}\n\n/* Pseudo-class applied to the root element when focused */\n.saltInputLegacy-focused {\n outline-style: var(--saltInputLegacy-focused-outlineStyle, var(--salt-focused-outlineStyle));\n outline-width: var(--saltInputLegacy-focused-outlineWidth, var(--salt-focused-outlineWidth));\n outline-color: var(--saltInputLegacy-focused-outlineColor, var(--salt-focused-outlineColor));\n outline-offset: var(--saltInputLegacy-focused-outlineOffset, var(--salt-focused-outlineOffset));\n}\n\n/* Style applied to selected input */\n.saltInputLegacy-input::selection {\n background-color: var(--saltInputLegacy-highlight-color, var(--salt-content-foreground-highlight));\n}\n\n/* Style applied to inner input component */\n.saltInputLegacy-input {\n background: var(--saltInputLegacy-background, none);\n border: none;\n box-sizing: content-box;\n color: inherit;\n display: block;\n flex: 1;\n font: inherit;\n letter-spacing: var(--saltInputLegacy-letterSpacing, 0);\n margin: 0;\n min-width: 0;\n overflow: hidden;\n padding: 0;\n height: 100%;\n width: 100%;\n}\n\n/* Style applied to input if `disabled={true}` */\n.saltInputLegacy-disabled .saltInputLegacy-input {\n cursor: var(--salt-editable-cursor-disabled);\n color: var(--saltInputLegacy-text-color-disabled, var(--salt-content-primary-foreground-disabled));\n}\n\n/* Style applied to adornment containers */\n.saltInputLegacy-suffixContainer,\n.saltInputLegacy-prefixContainer {\n display: flex;\n align-items: center;\n\n height: var(--inputLegacy-adornment-height);\n}\n\n/* Style applied to root element with start adornment */\n.saltInputLegacy-inputAdornedStart {\n padding-left: var(--saltInputLegacy-adornedStart-padding, 0);\n}\n\n/* Style applied to inner input element with start adornment */\n.saltInputLegacy-inputAdornedStart .saltInputLegacy-input {\n padding-left: var(--saltInputLegacy-adornedStart-input-padding, var(--salt-size-unit));\n}\n\n/* Style applied to root element with end adornment */\n.saltInputLegacy-inputAdornedEnd {\n padding-right: var(--saltInputLegacy-adornedEnd-padding, 0);\n}\n\n/* Style applied to inner input element with end adornment */\n.saltInputLegacy-inputAdornedEnd .saltInputLegacy-input {\n padding-right: var(--saltInputLegacy-adornedEnd-input-padding, var(--salt-size-unit));\n}\n\n/* Style applied to salt Button used within Input component adornments */\n.saltInputLegacy .saltInputLegacy-suffixContainer > .saltButton,\n.saltInputLegacy .saltInputLegacy-prefixContainer > .saltButton {\n height: calc(var(--saltButton-height, var(--salt-size-base)) - (var(--inputLegacy-button-inset) * 2));\n margin: var(--inputLegacy-button-inset);\n padding: 0 calc(var(--salt-size-unit) - var(--inputLegacy-button-inset));\n}\n\n/* Style applied if `textAlign={\"left\"}` */\n.saltInputLegacy-leftTextAlign .saltInputLegacy-input {\n text-align: left;\n}\n\n/* Style applied if `textAlign={\"center\"}` */\n.saltInputLegacy-centerTextAlign .saltInputLegacy-input {\n text-align: center;\n}\n\n/* Style applied if `textAlign={\"right\"}` */\n.saltInputLegacy-rightTextAlign .saltInputLegacy-input {\n text-align: right;\n}\n\n/* Style applied if `inFormField={true}` */\n.saltInputLegacy-formField {\n min-width: var(--saltFormFieldLegacy-input-minWidth, 0px);\n width: 100%;\n}\n";
3
+ var css_248z = "/* Styles applied to the root element dependent on density */\n.salt-density-touch {\n --inputLegacy-adornment-height: calc(var(--salt-size-base) + var(--salt-size-unit) * 0.5);\n --inputLegacy-button-inset: 4px;\n}\n.salt-density-low {\n --inputLegacy-adornment-height: calc(var(--salt-size-base) + var(--salt-size-unit) * 2 / 3);\n --inputLegacy-button-inset: 4px;\n}\n.salt-density-medium {\n --inputLegacy-adornment-height: calc(var(--salt-size-base) + var(--salt-size-unit) * 0.5);\n --inputLegacy-button-inset: 2px;\n}\n.salt-density-high {\n --inputLegacy-adornment-height: calc(var(--salt-size-base) + var(--salt-size-unit));\n --inputLegacy-button-inset: 2px;\n}\n\n/* Style applied to the root element */\n.saltInputLegacy {\n align-items: center;\n background: var(--saltInputLegacy-background, none);\n border: var(--saltInputLegacy-border, none);\n border-radius: var(--saltInputLegacy-borderRadius, 0);\n color: var(--saltInputLegacy-text-color, var(--salt-content-primary-foreground));\n cursor: var(--saltInputLegacy-cursor, default);\n display: inline-flex;\n font-family: var(--saltInputLegacy-fontFamily, var(--salt-text-fontFamily));\n font-size: var(--saltInputLegacy-fontSize, var(--salt-text-fontSize));\n height: var(--saltInputLegacy-height, var(--salt-size-base));\n line-height: var(--salt-text-lineHeight);\n min-height: var(--saltInputLegacy-minHeight, var(--salt-size-base));\n min-width: var(--saltInputLegacy-minWidth, 8em);\n padding: var(--saltInputLegacy-padding, 0 var(--salt-size-unit));\n position: var(--saltInputLegacy-position, relative);\n width: 100%;\n box-sizing: border-box;\n}\n\n/* Reset in the next class */\n.saltInputLegacy-input:focus {\n outline: none;\n}\n\n/* Pseudo-class applied to the root element when focused */\n.saltInputLegacy-focused {\n outline-style: var(--saltInputLegacy-focused-outlineStyle, var(--salt-focused-outlineStyle));\n outline-width: var(--saltInputLegacy-focused-outlineWidth, var(--salt-focused-outlineWidth));\n outline-color: var(--saltInputLegacy-focused-outlineColor, var(--salt-focused-outlineColor));\n outline-offset: var(--saltInputLegacy-focused-outlineOffset, var(--salt-focused-outlineOffset));\n}\n\n/* Style applied to selected input */\n.saltInputLegacy-input::selection {\n background-color: var(--saltInputLegacy-highlight-color, var(--salt-content-foreground-highlight));\n}\n\n/* Style applied to inner input component */\n.saltInputLegacy-input {\n background: var(--saltInputLegacy-background, none);\n border: none;\n box-sizing: content-box;\n color: inherit;\n display: block;\n flex: 1;\n font: inherit;\n letter-spacing: var(--saltInputLegacy-letterSpacing, 0);\n margin: 0;\n min-width: 0;\n overflow: hidden;\n padding: 0;\n height: 100%;\n width: 100%;\n}\n\n/* Style applied to input if `disabled={true}` */\n.saltInputLegacy-disabled .saltInputLegacy-input {\n cursor: var(--salt-cursor-disabled);\n color: var(--saltInputLegacy-text-color-disabled, var(--salt-content-primary-foreground-disabled));\n}\n\n/* Style applied to adornment containers */\n.saltInputLegacy-suffixContainer,\n.saltInputLegacy-prefixContainer {\n display: flex;\n align-items: center;\n\n height: var(--inputLegacy-adornment-height);\n}\n\n/* Style applied to root element with start adornment */\n.saltInputLegacy-inputAdornedStart {\n padding-left: var(--saltInputLegacy-adornedStart-padding, 0);\n}\n\n/* Style applied to inner input element with start adornment */\n.saltInputLegacy-inputAdornedStart .saltInputLegacy-input {\n padding-left: var(--saltInputLegacy-adornedStart-input-padding, var(--salt-size-unit));\n}\n\n/* Style applied to root element with end adornment */\n.saltInputLegacy-inputAdornedEnd {\n padding-right: var(--saltInputLegacy-adornedEnd-padding, 0);\n}\n\n/* Style applied to inner input element with end adornment */\n.saltInputLegacy-inputAdornedEnd .saltInputLegacy-input {\n padding-right: var(--saltInputLegacy-adornedEnd-input-padding, var(--salt-size-unit));\n}\n\n/* Style applied to salt Button used within Input component adornments */\n.saltInputLegacy .saltInputLegacy-suffixContainer > .saltButton,\n.saltInputLegacy .saltInputLegacy-prefixContainer > .saltButton {\n height: calc(var(--saltButton-height, var(--salt-size-base)) - (var(--inputLegacy-button-inset) * 2));\n margin: var(--inputLegacy-button-inset);\n padding: 0 calc(var(--salt-size-unit) - var(--inputLegacy-button-inset));\n}\n\n/* Style applied if `textAlign={\"left\"}` */\n.saltInputLegacy-leftTextAlign .saltInputLegacy-input {\n text-align: left;\n}\n\n/* Style applied if `textAlign={\"center\"}` */\n.saltInputLegacy-centerTextAlign .saltInputLegacy-input {\n text-align: center;\n}\n\n/* Style applied if `textAlign={\"right\"}` */\n.saltInputLegacy-rightTextAlign .saltInputLegacy-input {\n text-align: right;\n}\n\n/* Style applied if `inFormField={true}` */\n.saltInputLegacy-formField {\n min-width: var(--saltFormFieldLegacy-input-minWidth, 0px);\n width: 100%;\n}\n";
4
4
 
5
5
  module.exports = css_248z;
6
6
  //# sourceMappingURL=InputLegacy.css.js.map
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- var css_248z = ".saltList {\n --list-background: var(--salt-container-primary-background);\n --list-borderStyle: var(--salt-container-borderStyle);\n --list-borderWidth: var(--salt-size-border);\n --list-height: auto;\n --list-item-height: var(--salt-size-stackable);\n --list-item-gap: 0px;\n --list-maxHeight: 100%;\n\n background: var(--list-background);\n border-color: var(--salt-container-primary-borderColor);\n border-style: var(--list-borderStyle);\n border-width: var(--list-borderWidth);\n height: var(--saltList-height, var(--list-height));\n max-height: var(--list-maxHeight);\n outline: none;\n overflow-y: auto;\n position: relative;\n user-select: none;\n width: var(--saltList-width, auto);\n\n font-family: var(--salt-text-fontFamily);\n font-size: var(--salt-text-fontSize);\n font-weight: var(--salt-text-fontWeight);\n line-height: var(--salt-text-lineHeight);\n\n box-sizing: border-box;\n}\n\n.saltList-borderless {\n --list-borderStyle: none;\n}\n\n/* virtualised list */\n.saltList-viewport {\n --list-item-height: 30px;\n max-height: calc(var(--list-maxHeight) - 2 * var(--list-borderWidth));\n overflow: auto;\n}\n\n.saltListItemHeader {\n --saltList-item-background: var(--list-item-header-background);\n color: var(--list-item-header-color);\n}\n\n.saltListItemHeader[data-sticky=\"true\"] {\n --saltList-item-background: var(--list-background);\n position: sticky;\n top: 0;\n z-index: 1;\n}\n\n.saltList-collapsible .saltListItemHeader:after {\n border-width: var(--checkbox-borderWidth);\n border-color: var(--checkbox-borderColor);\n content: var(--list-item-header-twisty-content);\n -webkit-mask: var(--list-svg-chevron-down) center center / 12px 12px no-repeat;\n mask: var(--list-svg-chevron-down) center center / 12px 12px no-repeat;\n background: var(--list-item-header-twisty-color);\n height: 12px;\n left: var(--list-item-header-twisty-left);\n right: var(--list-item-header-twisty-right);\n margin-top: -8px;\n position: absolute;\n top: var(--list-item-header-twisty-top);\n transition: transform 0.3s;\n width: 12px;\n}\n.saltListItemHeader[aria-expanded=\"false\"]:after {\n transform: rotate(-90deg);\n}\n\n/* Selection */\n\n.saltList-scrollingContentContainer {\n box-sizing: inherit;\n position: relative;\n}\n\n.saltList-virtualized .saltListItem {\n line-height: 30px;\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n will-change: transform;\n}\n.saltList.saltFocusVisible:after {\n inset: 2px;\n}\n";
3
+ var css_248z = ".saltList {\n --list-background: var(--salt-container-primary-background);\n --list-borderStyle: var(--salt-container-borderStyle);\n --list-borderWidth: var(--salt-size-fixed-100);\n --list-height: auto;\n --list-item-height: var(--salt-size-stackable);\n --list-item-gap: 0px;\n --list-maxHeight: 100%;\n\n background: var(--list-background);\n border-color: var(--salt-container-primary-borderColor);\n border-style: var(--list-borderStyle);\n border-width: var(--list-borderWidth);\n height: var(--saltList-height, var(--list-height));\n max-height: var(--list-maxHeight);\n outline: none;\n overflow-y: auto;\n position: relative;\n user-select: none;\n width: var(--saltList-width, auto);\n\n font-family: var(--salt-text-fontFamily);\n font-size: var(--salt-text-fontSize);\n font-weight: var(--salt-text-fontWeight);\n line-height: var(--salt-text-lineHeight);\n\n box-sizing: border-box;\n}\n\n.saltList-borderless {\n --list-borderStyle: none;\n}\n\n/* virtualised list */\n.saltList-viewport {\n --list-item-height: 30px;\n max-height: calc(var(--list-maxHeight) - 2 * var(--list-borderWidth));\n overflow: auto;\n}\n\n.saltListItemHeader {\n --saltList-item-background: var(--list-item-header-background);\n color: var(--list-item-header-color);\n}\n\n.saltListItemHeader[data-sticky=\"true\"] {\n --saltList-item-background: var(--list-background);\n position: sticky;\n top: 0;\n z-index: 1;\n}\n\n.saltList-collapsible .saltListItemHeader:after {\n border-width: var(--checkbox-borderWidth);\n border-color: var(--checkbox-borderColor);\n content: var(--list-item-header-twisty-content);\n -webkit-mask: var(--list-svg-chevron-down) center center / 12px 12px no-repeat;\n mask: var(--list-svg-chevron-down) center center / 12px 12px no-repeat;\n background: var(--list-item-header-twisty-color);\n height: 12px;\n left: var(--list-item-header-twisty-left);\n right: var(--list-item-header-twisty-right);\n margin-top: -8px;\n position: absolute;\n top: var(--list-item-header-twisty-top);\n transition: transform 0.3s;\n width: 12px;\n}\n.saltListItemHeader[aria-expanded=\"false\"]:after {\n transform: rotate(-90deg);\n}\n\n/* Selection */\n\n.saltList-scrollingContentContainer {\n box-sizing: inherit;\n position: relative;\n}\n\n.saltList-virtualized .saltListItem {\n line-height: 30px;\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n will-change: transform;\n}\n.saltList.saltFocusVisible:after {\n inset: 2px;\n}\n";
4
4
 
5
5
  module.exports = css_248z;
6
6
  //# sourceMappingURL=List.css.js.map
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- var css_248z = ".saltListItem {\n /* Color */\n --list-item-text-color: var(--salt-content-primary-foreground);\n --list-item-background: var(--saltList-item-background, var(--salt-selectable-background));\n /* --list-item-selected-focus-outlineColor: var(--salt-color-white); TODO: Check token with design */\n --list-item-text-color-active: var(--salt-content-primary-foreground);\n --list-item-background-active: var(--salt-selectable-background-selected);\n --list-item-alignItems: center;\n}\n\n.saltListItem.saltHighlighted {\n --saltCheckbox-icon-stroke: var(--salt-selectable-borderColor-hover);\n --list-item-background: var(--salt-selectable-background-hover);\n}\n\n.saltListItemHeader {\n font-weight: var(--salt-text-fontWeight-strong); /* TODO: Check token with design */\n}\n\n.saltListItemHeader[data-sticky] {\n position: sticky;\n top: 0;\n z-index: 1;\n}\n\n.saltListItem {\n color: var(--list-item-text-color);\n cursor: var(--saltList-item-cursor, pointer);\n background: var(--saltList-item-background, var(--list-item-background));\n font-size: var(--salt-text-fontSize);\n text-align: var(--salt-text-textAlign);\n line-height: var(--salt-text-lineHeight);\n height: var(--saltList-item-height, var(--list-item-height, auto));\n /* Replaced border-bottom with margin. In design spec, the height of the items should not include gap */\n margin-bottom: var(--list-item-gap);\n padding: 0 var(--salt-size-unit);\n left: 0;\n right: 0;\n display: flex;\n position: relative;\n align-items: var(--list-item-alignItems);\n white-space: nowrap;\n}\n\n.saltListItem:last-child {\n margin-bottom: 0px;\n}\n\n.saltListItem-checkbox {\n --list-item-background-active: var(--salt-selectable-background);\n --list-item-text-color-active: var(--salt-content-primary-foreground);\n --list-item-text-padding: 0 0 0 var(--salt-size-unit);\n}\n\n.saltListItem[aria-selected=\"true\"]:not(.saltListItem-checkbox) {\n --list-item-background: var(--list-item-background-active);\n color: var(--list-item-text-color-active);\n}\n\n.saltListItem.saltDisabled {\n --list-item-text-color: var(--salt-content-primary-foreground-disabled);\n cursor: var(--salt-selectable-cursor-disabled);\n}\n\n.saltListItem.saltFocusVisible {\n outline-style: var(--salt-focused-outlineStyle);\n outline-width: var(--salt-focused-outlineWidth);\n outline-offset: -2px;\n outline-color: var(--salt-focused-outlineColor);\n}\n\n.saltListItem.saltFocusVisible:after {\n content: none;\n}\n\n.saltListItem[aria-selected=\"true\"]:not(.saltListItem-checkbox).saltFocusVisible {\n outline-color: var(--list-item-selected-focus-outlineColor);\n}\n\n.saltListItem-textWrapper {\n flex: 1;\n overflow: hidden;\n padding: var(--list-item-text-padding, 0px);\n white-space: nowrap;\n text-overflow: ellipsis;\n}\n\n.saltListItem-proxy {\n position: absolute !important;\n visibility: hidden;\n}\n";
3
+ var css_248z = ".saltListItem {\n /* Color */\n --list-item-text-color: var(--salt-content-primary-foreground);\n --list-item-background: var(--saltList-item-background, var(--salt-selectable-background));\n /* --list-item-selected-focus-outlineColor: var(--salt-color-white); TODO: Check token with design */\n --list-item-text-color-active: var(--salt-content-primary-foreground);\n --list-item-background-active: var(--salt-selectable-background-selected);\n --list-item-alignItems: center;\n}\n\n.saltListItem.saltHighlighted {\n --saltCheckbox-icon-stroke: var(--salt-selectable-borderColor-hover);\n --list-item-background: var(--salt-selectable-background-hover);\n}\n\n.saltListItemHeader {\n font-weight: var(--salt-text-fontWeight-strong); /* TODO: Check token with design */\n}\n\n.saltListItemHeader[data-sticky] {\n position: sticky;\n top: 0;\n z-index: 1;\n}\n\n.saltListItem {\n color: var(--list-item-text-color);\n cursor: var(--saltList-item-cursor, var(--salt-cursor-hover));\n background: var(--saltList-item-background, var(--list-item-background));\n font-size: var(--salt-text-fontSize);\n text-align: var(--salt-text-textAlign);\n line-height: var(--salt-text-lineHeight);\n height: var(--saltList-item-height, var(--list-item-height, auto));\n /* Replaced border-bottom with margin. In design spec, the height of the items should not include gap */\n margin-bottom: var(--list-item-gap);\n padding: 0 var(--salt-size-unit);\n left: 0;\n right: 0;\n display: flex;\n position: relative;\n align-items: var(--list-item-alignItems);\n white-space: nowrap;\n}\n\n.saltListItem:last-child {\n margin-bottom: 0px;\n}\n\n.saltListItem-checkbox {\n --list-item-background-active: var(--salt-selectable-background);\n --list-item-text-color-active: var(--salt-content-primary-foreground);\n --list-item-text-padding: 0 0 0 var(--salt-size-unit);\n}\n\n.saltListItem[aria-selected=\"true\"]:not(.saltListItem-checkbox) {\n --list-item-background: var(--list-item-background-active);\n color: var(--list-item-text-color-active);\n}\n\n.saltListItem.saltDisabled {\n --list-item-text-color: var(--salt-content-primary-foreground-disabled);\n cursor: var(--salt-cursor-disabled);\n}\n\n.saltListItem.saltFocusVisible {\n outline-style: var(--salt-focused-outlineStyle);\n outline-width: var(--salt-focused-outlineWidth);\n outline-offset: -2px;\n outline-color: var(--salt-focused-outlineColor);\n}\n\n.saltListItem.saltFocusVisible:after {\n content: none;\n}\n\n.saltListItem[aria-selected=\"true\"]:not(.saltListItem-checkbox).saltFocusVisible {\n outline-color: var(--list-item-selected-focus-outlineColor);\n}\n\n.saltListItem-textWrapper {\n flex: 1;\n overflow: hidden;\n padding: var(--list-item-text-padding, 0px);\n white-space: nowrap;\n text-overflow: ellipsis;\n}\n\n.saltListItem-proxy {\n position: absolute !important;\n visibility: hidden;\n}\n";
4
4
 
5
5
  module.exports = css_248z;
6
6
  //# sourceMappingURL=ListItem.css.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"useList.js","sources":["../src/list/useList.ts"],"sourcesContent":["import {\n type KeyboardEvent,\n type MouseEvent,\n isValidElement,\n useCallback,\n useRef,\n} from \"react\";\nimport {\n type CollectionItem,\n type ListHandlers,\n type SelectHandler,\n type SelectionChangeHandler,\n type SelectionStrategy,\n closestListItemIndex,\n type selectedType,\n useCollapsibleGroups,\n useKeyboardNavigation,\n useSelection,\n useTypeahead,\n useViewportTracking,\n} from \"../common-hooks\";\n\nimport type {\n ListControlProps,\n ListHookProps,\n ListHookResult,\n} from \"./listTypes\";\n\nexport const useList = <Item, Selection extends SelectionStrategy = \"default\">({\n collapsibleHeaders,\n collectionHook: dataHook,\n containerRef,\n contentRef,\n defaultHighlightedIndex,\n defaultSelected,\n disabled,\n disableAriaActiveDescendant,\n disableHighlightOnFocus,\n disableTypeToSelect,\n highlightedIndex: highlightedIndexProp,\n label = \"\",\n listHandlers: listHandlersProp,\n onSelect,\n onSelectionChange,\n onHighlight,\n onKeyboardNavigation,\n onKeyDown,\n restoreLastFocus,\n selected,\n selectionStrategy,\n selectionKeys,\n stickyHeaders,\n tabToSelect,\n}: ListHookProps<Item, Selection>): ListHookResult<Item, Selection> => {\n type selectedItem = selectedType<Item, Selection>;\n\n const lastSelection = useRef<typeof selected>(selected || defaultSelected);\n const handleKeyboardNavigation = (evt: KeyboardEvent, nextIndex: number) => {\n selectionHook.listHandlers.onKeyboardNavigation?.(evt, nextIndex);\n onKeyboardNavigation?.(evt, nextIndex);\n };\n\n // TODO where do these belong ?\n const handleSelect = useCallback<SelectHandler<CollectionItem<Item>>>(\n (evt, selectedItem) => {\n if (onSelect) {\n if (isValidElement(selectedItem.value)) {\n onSelect(evt, selectedItem.label as any);\n } else if (selectedItem.value !== null) {\n onSelect(evt, selectedItem.value);\n }\n }\n },\n [onSelect],\n );\n\n const handleSelectionChange = useCallback<\n SelectionChangeHandler<CollectionItem<Item>, Selection>\n >(\n (evt, selected) => {\n if (onSelectionChange) {\n onSelectionChange(\n evt,\n Array.isArray(selected)\n ? (selected.map((s) =>\n isValidElement(s.value) ? s.label : s.value,\n ) as selectedItem)\n : selected &&\n ((isValidElement(selected.value)\n ? selected.label\n : selected.value) as any),\n );\n }\n },\n [onSelectionChange],\n );\n\n const {\n highlightedIndex,\n listProps: {\n onKeyDown: navigationKeyDown,\n onMouseMove: navigationMouseMove,\n ...navigationControlProps\n },\n setHighlightedIndex,\n ...keyboardHook\n } = useKeyboardNavigation<Item, Selection>({\n containerRef,\n defaultHighlightedIndex,\n disableHighlightOnFocus,\n highlightedIndex: highlightedIndexProp,\n indexPositions: dataHook.data,\n label,\n onHighlight,\n onKeyboardNavigation: handleKeyboardNavigation,\n restoreLastFocus,\n selected: lastSelection.current,\n });\n\n const collapsibleHook = useCollapsibleGroups({\n collapsibleHeaders,\n highlightedIdx: highlightedIndex,\n collectionHook: dataHook,\n });\n\n const selectionHook = useSelection<Item, Selection>({\n defaultSelected,\n highlightedIdx: highlightedIndex,\n indexPositions: dataHook.data,\n label,\n onSelect: handleSelect,\n onSelectionChange: handleSelectionChange,\n selected,\n selectionStrategy,\n selectionKeys,\n tabToSelect,\n });\n\n const { onKeyDown: typeaheadOnKeyDown } = useTypeahead<Item>({\n disableTypeToSelect,\n highlightedIdx: highlightedIndex,\n highlightItemAtIndex: setHighlightedIndex,\n typeToNavigate: true,\n items: dataHook.data,\n });\n\n const handleKeyDown = useCallback(\n (evt: KeyboardEvent) => {\n if (!evt.defaultPrevented) {\n typeaheadOnKeyDown?.(evt);\n }\n // We still let the keyboard navigation hook process the event even\n // if it has been handled by the typeahead hook. That is so it can\n // correctly manage the focusVisible state.\n navigationKeyDown(evt);\n if (!evt.defaultPrevented) {\n selectionHook.listHandlers.onKeyDown?.(evt);\n }\n if (!evt.defaultPrevented) {\n collapsibleHook?.onKeyDown?.(evt);\n }\n\n if (!evt.defaultPrevented) {\n onKeyDown?.(evt);\n }\n },\n [\n collapsibleHook,\n navigationKeyDown,\n onKeyDown,\n selectionHook.listHandlers,\n typeaheadOnKeyDown,\n ],\n );\n\n // This is only appropriate when we are directly controlling a List,\n // not when a control is manipulating the list\n const { isScrolling, scrollIntoView } = useViewportTracking({\n containerRef,\n contentRef,\n highlightedIdx: highlightedIndex,\n indexPositions: dataHook.data,\n stickyHeaders,\n });\n\n const handleMouseMove = useCallback(\n (evt: MouseEvent) => {\n if (!isScrolling.current && !disabled) {\n navigationMouseMove();\n const idx = closestListItemIndex(evt.target as HTMLElement);\n if (idx !== highlightedIndex) {\n const item = dataHook.data[idx];\n if (!item || item.disabled) {\n setHighlightedIndex(-1);\n } else {\n setHighlightedIndex(idx);\n }\n }\n }\n },\n [\n isScrolling,\n disabled,\n setHighlightedIndex,\n navigationMouseMove,\n highlightedIndex,\n dataHook.data,\n ],\n );\n\n const getActiveDescendant = () =>\n highlightedIndex === undefined ||\n highlightedIndex === -1 ||\n disableAriaActiveDescendant\n ? undefined\n : dataHook.data[highlightedIndex]?.id;\n\n // We need this on reEntry for navigation hook to handle focus\n lastSelection.current = selectionHook.selected;\n\n // controlProps ?\n const listControlProps: ListControlProps = {\n \"aria-activedescendant\": getActiveDescendant(),\n onBlur: navigationControlProps.onBlur,\n onFocus: navigationControlProps.onFocus,\n onKeyDown: handleKeyDown,\n onMouseDownCapture: navigationControlProps.onMouseDownCapture,\n onMouseLeave: navigationControlProps.onMouseLeave,\n };\n\n const listHandlers: ListHandlers = listHandlersProp || {\n onClick: selectionHook.listHandlers.onClick,\n // MouseEnter would be much better for this. There is a bug in Cypress\n // wheby it emits spurious MouseEnter (and MouseOver) events around\n // keypress events, which break many tests.\n onMouseMove: handleMouseMove,\n };\n\n return {\n focusVisible: keyboardHook.focusVisible,\n controlledHighlighting: keyboardHook.controlledHighlighting,\n highlightedIndex,\n keyboardNavigation: keyboardHook.keyboardNavigation,\n listHandlers,\n listItemHeaderHandlers: collapsibleHook,\n listControlProps,\n scrollIntoView,\n selected: selectionHook.selected,\n setHighlightedIndex,\n setIgnoreFocus: keyboardHook.setIgnoreFocus,\n setSelected: selectionHook.setSelected,\n };\n};\n"],"names":["useRef","useCallback","isValidElement","selected","useKeyboardNavigation","useCollapsibleGroups","useSelection","useTypeahead","useViewportTracking","closestListItemIndex"],"mappings":"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"}
1
+ {"version":3,"file":"useList.js","sources":["../src/list/useList.ts"],"sourcesContent":["import {\n type KeyboardEvent,\n type MouseEvent,\n isValidElement,\n useCallback,\n useRef,\n} from \"react\";\nimport {\n type CollectionItem,\n type ListHandlers,\n type SelectHandler,\n type SelectionChangeHandler,\n type SelectionStrategy,\n closestListItemIndex,\n type selectedType,\n useCollapsibleGroups,\n useKeyboardNavigation,\n useSelection,\n useTypeahead,\n useViewportTracking,\n} from \"../common-hooks\";\n\nimport type {\n ListControlProps,\n ListHookProps,\n ListHookResult,\n} from \"./listTypes\";\n\nexport const useList = <Item, Selection extends SelectionStrategy = \"default\">({\n collapsibleHeaders,\n collectionHook: dataHook,\n containerRef,\n contentRef,\n defaultHighlightedIndex,\n defaultSelected,\n disabled,\n disableAriaActiveDescendant,\n disableHighlightOnFocus,\n disableTypeToSelect,\n highlightedIndex: highlightedIndexProp,\n label = \"\",\n listHandlers: listHandlersProp,\n onSelect,\n onSelectionChange,\n onHighlight,\n onKeyboardNavigation,\n onKeyDown,\n restoreLastFocus,\n selected,\n selectionStrategy,\n selectionKeys,\n stickyHeaders,\n tabToSelect,\n}: ListHookProps<Item, Selection>): ListHookResult<Item, Selection> => {\n type selectedItem = selectedType<Item, Selection>;\n\n const lastSelection = useRef<typeof selected>(selected || defaultSelected);\n const handleKeyboardNavigation = (\n evt: KeyboardEvent<HTMLElement>,\n nextIndex: number,\n ) => {\n selectionHook.listHandlers.onKeyboardNavigation?.(evt, nextIndex);\n onKeyboardNavigation?.(evt, nextIndex);\n };\n\n // TODO where do these belong ?\n const handleSelect = useCallback<SelectHandler<CollectionItem<Item>>>(\n (evt, selectedItem) => {\n if (onSelect) {\n if (isValidElement(selectedItem.value)) {\n onSelect(evt, selectedItem.label as any);\n } else if (selectedItem.value !== null) {\n onSelect(evt, selectedItem.value);\n }\n }\n },\n [onSelect],\n );\n\n const handleSelectionChange = useCallback<\n SelectionChangeHandler<CollectionItem<Item>, Selection>\n >(\n (evt, selected) => {\n if (onSelectionChange) {\n onSelectionChange(\n evt,\n Array.isArray(selected)\n ? (selected.map((s) =>\n isValidElement(s.value) ? s.label : s.value,\n ) as selectedItem)\n : selected &&\n ((isValidElement(selected.value)\n ? selected.label\n : selected.value) as any),\n );\n }\n },\n [onSelectionChange],\n );\n\n const {\n highlightedIndex,\n listProps: {\n onKeyDown: navigationKeyDown,\n onMouseMove: navigationMouseMove,\n ...navigationControlProps\n },\n setHighlightedIndex,\n ...keyboardHook\n } = useKeyboardNavigation<Item, Selection>({\n containerRef,\n defaultHighlightedIndex,\n disableHighlightOnFocus,\n highlightedIndex: highlightedIndexProp,\n indexPositions: dataHook.data,\n label,\n onHighlight,\n onKeyboardNavigation: handleKeyboardNavigation,\n restoreLastFocus,\n selected: lastSelection.current,\n });\n\n const collapsibleHook = useCollapsibleGroups({\n collapsibleHeaders,\n highlightedIdx: highlightedIndex,\n collectionHook: dataHook,\n });\n\n const selectionHook = useSelection<Item, Selection>({\n defaultSelected,\n highlightedIdx: highlightedIndex,\n indexPositions: dataHook.data,\n label,\n onSelect: handleSelect,\n onSelectionChange: handleSelectionChange,\n selected,\n selectionStrategy,\n selectionKeys,\n tabToSelect,\n });\n\n const { onKeyDown: typeaheadOnKeyDown } = useTypeahead<Item>({\n disableTypeToSelect,\n highlightedIdx: highlightedIndex,\n highlightItemAtIndex: setHighlightedIndex,\n typeToNavigate: true,\n items: dataHook.data,\n });\n\n const handleKeyDown = useCallback(\n (evt: KeyboardEvent<HTMLElement>) => {\n if (!evt.defaultPrevented) {\n typeaheadOnKeyDown?.(evt);\n }\n // We still let the keyboard navigation hook process the event even\n // if it has been handled by the typeahead hook. That is so it can\n // correctly manage the focusVisible state.\n navigationKeyDown(evt);\n if (!evt.defaultPrevented) {\n selectionHook.listHandlers.onKeyDown?.(evt);\n }\n if (!evt.defaultPrevented) {\n collapsibleHook?.onKeyDown?.(evt);\n }\n\n if (!evt.defaultPrevented) {\n onKeyDown?.(evt);\n }\n },\n [\n collapsibleHook,\n navigationKeyDown,\n onKeyDown,\n selectionHook.listHandlers,\n typeaheadOnKeyDown,\n ],\n );\n\n // This is only appropriate when we are directly controlling a List,\n // not when a control is manipulating the list\n const { isScrolling, scrollIntoView } = useViewportTracking({\n containerRef,\n contentRef,\n highlightedIdx: highlightedIndex,\n indexPositions: dataHook.data,\n stickyHeaders,\n });\n\n const handleMouseMove = useCallback(\n (evt: MouseEvent) => {\n if (!isScrolling.current && !disabled) {\n navigationMouseMove();\n const idx = closestListItemIndex(evt.target as HTMLElement);\n if (idx !== highlightedIndex) {\n const item = dataHook.data[idx];\n if (!item || item.disabled) {\n setHighlightedIndex(-1);\n } else {\n setHighlightedIndex(idx);\n }\n }\n }\n },\n [\n isScrolling,\n disabled,\n setHighlightedIndex,\n navigationMouseMove,\n highlightedIndex,\n dataHook.data,\n ],\n );\n\n const getActiveDescendant = () =>\n highlightedIndex === undefined ||\n highlightedIndex === -1 ||\n disableAriaActiveDescendant\n ? undefined\n : dataHook.data[highlightedIndex]?.id;\n\n // We need this on reEntry for navigation hook to handle focus\n lastSelection.current = selectionHook.selected;\n\n // controlProps ?\n const listControlProps: ListControlProps = {\n \"aria-activedescendant\": getActiveDescendant(),\n onBlur: navigationControlProps.onBlur,\n onFocus: navigationControlProps.onFocus,\n onKeyDown: handleKeyDown,\n onMouseDownCapture: navigationControlProps.onMouseDownCapture,\n onMouseLeave: navigationControlProps.onMouseLeave,\n };\n\n const listHandlers: ListHandlers = listHandlersProp || {\n onClick: selectionHook.listHandlers.onClick,\n // MouseEnter would be much better for this. There is a bug in Cypress\n // wheby it emits spurious MouseEnter (and MouseOver) events around\n // keypress events, which break many tests.\n onMouseMove: handleMouseMove,\n };\n\n return {\n focusVisible: keyboardHook.focusVisible,\n controlledHighlighting: keyboardHook.controlledHighlighting,\n highlightedIndex,\n keyboardNavigation: keyboardHook.keyboardNavigation,\n listHandlers,\n listItemHeaderHandlers: collapsibleHook,\n listControlProps,\n scrollIntoView,\n selected: selectionHook.selected,\n setHighlightedIndex,\n setIgnoreFocus: keyboardHook.setIgnoreFocus,\n setSelected: selectionHook.setSelected,\n };\n};\n"],"names":["useRef","useCallback","isValidElement","selected","useKeyboardNavigation","useCollapsibleGroups","useSelection","useTypeahead","useViewportTracking","closestListItemIndex"],"mappings":"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"}
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- var css_248z = "/* TODO: Should the outer most container being 'wrapper'? */\n.saltListDeprecated-wrapper {\n /* Color */\n --list-background: var(--salt-container-primary-background);\n /* Border */\n --list-borderColor: var(--salt-container-primary-borderColor);\n --list-borderStyle: var(--salt-container-borderStyle);\n --list-borderWidth: var(--salt-size-border);\n --list-borderRadius: 0;\n\n /* Text, Font */\n /* TODO: Do we necessary want to set this? Should rely on inheritance? */\n /* --list-fontFamily: var(--salt-typography-fontFamily); */\n\n /* Misc. */\n --list-boxShadow: none;\n --list-disabled-cursor: var(--salt-actionable-cursor-disabled);\n}\n\n.saltListDeprecated-wrapper {\n position: relative;\n}\n\n.saltListDeprecated {\n /* font-family: var(--list-fontFamily); */\n overflow-y: auto;\n}\n.saltListDeprecated:focus {\n outline: none;\n}\n\n.saltListDeprecated-wrapper:not(.saltListDeprecated-borderless) {\n border-color: var(--list-borderColor);\n border-style: var(--list-borderStyle);\n border-width: var(--list-borderWidth);\n border-radius: var(--list-borderRadius);\n}\n.saltListDeprecated-wrapper {\n background: var(--list-background);\n box-shadow: var(--list-boxShadow);\n position: relative;\n}\n\n.saltListDeprecated-borderless {\n border: none;\n}\n.saltListDeprecated-disabled {\n cursor: var(--list-disabled-cursor);\n /* TODO: Design: Check whether we want things behind the list to actually show through opacity */\n /* Or instead of using `opacity` in favor of dedicated color setting, on background, border-color, etc. */\n}\n";
3
+ var css_248z = "/* TODO: Should the outer most container being 'wrapper'? */\n.saltListDeprecated-wrapper {\n /* Color */\n --list-background: var(--salt-container-primary-background);\n /* Border */\n --list-borderColor: var(--salt-container-primary-borderColor);\n --list-borderStyle: var(--salt-container-borderStyle);\n --list-borderWidth: var(--salt-size-fixed-100);\n --list-borderRadius: 0;\n\n /* Text, Font */\n /* TODO: Do we necessary want to set this? Should rely on inheritance? */\n /* --list-fontFamily: var(--salt-typography-fontFamily); */\n\n /* Misc. */\n --list-boxShadow: none;\n --list-disabled-cursor: var(--salt-cursor-disabled);\n}\n\n.saltListDeprecated-wrapper {\n position: relative;\n}\n\n.saltListDeprecated {\n /* font-family: var(--list-fontFamily); */\n overflow-y: auto;\n}\n.saltListDeprecated:focus {\n outline: none;\n}\n\n.saltListDeprecated-wrapper:not(.saltListDeprecated-borderless) {\n border-color: var(--list-borderColor);\n border-style: var(--list-borderStyle);\n border-width: var(--list-borderWidth);\n border-radius: var(--list-borderRadius);\n}\n.saltListDeprecated-wrapper {\n background: var(--list-background);\n box-shadow: var(--list-boxShadow);\n position: relative;\n}\n\n.saltListDeprecated-borderless {\n border: none;\n}\n.saltListDeprecated-disabled {\n cursor: var(--list-disabled-cursor);\n /* TODO: Design: Check whether we want things behind the list to actually show through opacity */\n /* Or instead of using `opacity` in favor of dedicated color setting, on background, border-color, etc. */\n}\n";
4
4
 
5
5
  module.exports = css_248z;
6
6
  //# sourceMappingURL=List.css.js.map
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- var css_248z = ".saltListItemDeprecated {\n /* Color */\n --list-item-text-color: var(--salt-selectable-foreground);\n --list-item-background: var(--salt-selectable-background);\n --list-item-background-hover: var(--salt-selectable-background-hover);\n --list-item-selected-focus-outlineColor: var(--salt-accent-foreground); /* TODO: Check token with design */\n\n --list-item-text-color-active: var(--salt-selectable-foreground-selected);\n --list-item-background-active: var(--salt-selectable-background-selected);\n\n /* Text, Font */\n --list-item-textAlign: var(--salt-text-textAlign);\n --list-item-fontSize: var(--salt-text-fontSize);\n --list-item-lineHeight: var(--salt-text-lineHeight);\n\n /* Spacing */\n --list-item-padding: 0 var(--salt-size-unit);\n\n /* Misc. */\n --list-item-gap: 0px;\n --list-item-alignItems: center;\n --list-item-selectable-cursor: pointer;\n --list-item-cursor: default;\n\n --list-item-disabled-cursor: var(--salt-selectable-cursor-disabled);\n --list-item-disabled-regular-opacity: var(--salt-palette-opacity-disabled);\n}\n\n.saltListItemDeprecated {\n color: var(--list-item-text-color);\n background: var(--list-item-background);\n text-align: var(--list-item-textAlign);\n line-height: var(--list-item-lineHeight);\n font-size: var(--list-item-fontSize);\n padding: var(--list-item-padding);\n left: 0;\n right: 0;\n display: flex;\n position: relative;\n align-items: var(--list-item-alignItems);\n white-space: nowrap;\n}\n\n.saltListItemDeprecated {\n /* Replaced border-bottom with margin. In design spec, the height of the items should not include gap */\n margin-bottom: var(--list-item-gap);\n cursor: var(--list-item-selectable-cursor);\n}\n\n.saltListItemDeprecated:last-child {\n margin-bottom: 0px;\n}\n\n.saltListItemDeprecated.saltListItemDeprecated-highlighted:not(.saltListItemDeprecated-selected) {\n background: var(--list-item-background-hover);\n}\n\n.saltListItemDeprecated.saltListItemDeprecated-deselectable {\n cursor: var(--list-item-selectable-cursor);\n}\n\n.saltListItemDeprecated-textWrapper {\n flex: 1;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n}\n\n.saltListItemDeprecated-selected {\n color: var(--list-item-text-color-active);\n background: var(--list-item-background-active);\n cursor: var(--list-item-cursor);\n}\n\n.saltListItemDeprecated-disabled {\n cursor: var(--list-item-disabled-cursor);\n opacity: var(--list-item-disabled-regular-opacity);\n}\n\n.saltListItemDeprecated-focusVisible:after {\n top: 2px;\n left: 2px;\n right: 2px;\n bottom: 2px;\n content: \"\";\n position: absolute;\n\n outline-style: var(--salt-focused-outlineStyle);\n outline-width: var(--salt-focused-outlineWidth);\n outline-color: var(--salt-focused-outlineColor);\n outline-offset: var(--salt-focused-outlineOffset);\n}\n\n.saltListItemDeprecated-focusVisible.saltListItemDeprecated-selected:after {\n outline-color: var(--list-item-selected-focus-outlineColor);\n}\n";
3
+ var css_248z = ".saltListItemDeprecated {\n /* Color */\n --list-item-text-color: var(--salt-selectable-foreground);\n --list-item-background: var(--salt-selectable-background);\n --list-item-background-hover: var(--salt-selectable-background-hover);\n --list-item-selected-focus-outlineColor: var(--salt-accent-foreground); /* TODO: Check token with design */\n\n --list-item-text-color-active: var(--salt-selectable-foreground-selected);\n --list-item-background-active: var(--salt-selectable-background-selected);\n\n /* Text, Font */\n --list-item-textAlign: var(--salt-text-textAlign);\n --list-item-fontSize: var(--salt-text-fontSize);\n --list-item-lineHeight: var(--salt-text-lineHeight);\n\n /* Spacing */\n --list-item-padding: 0 var(--salt-size-unit);\n\n /* Misc. */\n --list-item-gap: 0px;\n --list-item-alignItems: center;\n --list-item-selectable-cursor: pointer;\n --list-item-cursor: default;\n\n --list-item-disabled-cursor: var(--salt-cursor-disabled);\n --list-item-disabled-regular-opacity: var(--salt-palette-opacity-disabled);\n}\n\n.saltListItemDeprecated {\n color: var(--list-item-text-color);\n background: var(--list-item-background);\n text-align: var(--list-item-textAlign);\n line-height: var(--list-item-lineHeight);\n font-size: var(--list-item-fontSize);\n padding: var(--list-item-padding);\n left: 0;\n right: 0;\n display: flex;\n position: relative;\n align-items: var(--list-item-alignItems);\n white-space: nowrap;\n}\n\n.saltListItemDeprecated {\n /* Replaced border-bottom with margin. In design spec, the height of the items should not include gap */\n margin-bottom: var(--list-item-gap);\n cursor: var(--list-item-selectable-cursor);\n}\n\n.saltListItemDeprecated:last-child {\n margin-bottom: 0px;\n}\n\n.saltListItemDeprecated.saltListItemDeprecated-highlighted:not(.saltListItemDeprecated-selected) {\n background: var(--list-item-background-hover);\n}\n\n.saltListItemDeprecated.saltListItemDeprecated-deselectable {\n cursor: var(--list-item-selectable-cursor);\n}\n\n.saltListItemDeprecated-textWrapper {\n flex: 1;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n}\n\n.saltListItemDeprecated-selected {\n color: var(--list-item-text-color-active);\n background: var(--list-item-background-active);\n cursor: var(--list-item-cursor);\n}\n\n.saltListItemDeprecated-disabled {\n cursor: var(--list-item-disabled-cursor);\n opacity: var(--list-item-disabled-regular-opacity);\n}\n\n.saltListItemDeprecated-focusVisible:after {\n top: 2px;\n left: 2px;\n right: 2px;\n bottom: 2px;\n content: \"\";\n position: absolute;\n\n outline-style: var(--salt-focused-outlineStyle);\n outline-width: var(--salt-focused-outlineWidth);\n outline-color: var(--salt-focused-outlineColor);\n outline-offset: var(--salt-focused-outlineOffset);\n}\n\n.saltListItemDeprecated-focusVisible.saltListItemDeprecated-selected:after {\n outline-color: var(--list-item-selected-focus-outlineColor);\n}\n";
4
4
 
5
5
  module.exports = css_248z;
6
6
  //# sourceMappingURL=ListItem.css.js.map
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- var css_248z = "/* Default variables applied to the root element */\n.saltListItemNext {\n --listNext-item-text-color: var(--salt-content-primary-foreground);\n --listNext-item-background: none;\n}\n\n.saltListItemNext {\n color: var(--listNext-item-text-color);\n background: var(--listNext-item-background);\n height: calc(var(--salt-size-base) + var(--salt-spacing-100));\n padding-left: var(--salt-spacing-100);\n padding-right: var(--salt-spacing-100);\n display: flex;\n gap: var(--salt-size-unit);\n position: relative;\n align-items: center;\n white-space: nowrap;\n margin-top: var(--salt-size-border);\n margin-bottom: var(--salt-size-border);\n border: var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) transparent;\n}\n\n/* Class applied to list item on focus using keyboard navigation only */\n.saltListItemNext-focused {\n border: var(--salt-focused-outline);\n}\n\n/* Active list item on focus using keyboard navigation */\n.saltListItemNext-highlighted:not([aria-disabled=\"true\"]) {\n --listNext-item-background: var(--salt-selectable-background-hover);\n cursor: var(--salt-selectable-cursor-hover);\n}\n\n.saltListItemNext[aria-selected=\"true\"] {\n outline: var(--salt-size-border) var(--salt-container-borderStyle) var(--salt-selectable-borderColor-selected);\n --listNext-item-background: var(--salt-selectable-background-selected);\n --saltIcon-color: var(--salt-selectable-foreground-selected);\n}\n\n/* Style applied to disabled items */\n.saltListItemNext[aria-disabled=\"true\"] {\n --listNext-item-text-color: var(--salt-content-primary-foreground-disabled);\n cursor: var(--salt-selectable-cursor-disabled);\n}\n.saltListItemNext[aria-disabled=\"true\"] .saltText {\n color: var(--listNext-item-text-color);\n}\n\n/* disabled list item when selected */\n.saltListItemNext[aria-disabled=\"true\"][aria-selected=\"true\"] {\n outline: var(--salt-size-border) var(--salt-container-borderStyle) var(--salt-selectable-borderColor-selectedDisabled);\n --listNext-item-background: var(--salt-selectable-background-selectedDisabled);\n}\n";
3
+ var css_248z = "/* Default variables applied to the root element */\n.saltListItemNext {\n --listNext-item-text-color: var(--salt-content-primary-foreground);\n --listNext-item-background: none;\n}\n\n.saltListItemNext {\n color: var(--listNext-item-text-color);\n background: var(--listNext-item-background);\n height: calc(var(--salt-size-base) + var(--salt-spacing-100));\n padding-left: var(--salt-spacing-100);\n padding-right: var(--salt-spacing-100);\n display: flex;\n gap: var(--salt-size-unit);\n position: relative;\n align-items: center;\n white-space: nowrap;\n margin-top: var(--salt-size-fixed-100);\n margin-bottom: var(--salt-size-fixed-100);\n border: var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) transparent;\n}\n\n/* Class applied to list item on focus using keyboard navigation only */\n.saltListItemNext-focused {\n border: var(--salt-focused-outline);\n}\n\n/* Active list item on focus using keyboard navigation */\n.saltListItemNext-highlighted:not([aria-disabled=\"true\"]) {\n --listNext-item-background: var(--salt-selectable-background-hover);\n cursor: var(--salt-cursor-hover);\n}\n\n.saltListItemNext[aria-selected=\"true\"] {\n outline: var(--salt-size-fixed-100) var(--salt-container-borderStyle) var(--salt-selectable-borderColor-selected);\n --listNext-item-background: var(--salt-selectable-background-selected);\n --saltIcon-color: var(--salt-selectable-foreground-selected);\n}\n\n/* Style applied to disabled items */\n.saltListItemNext[aria-disabled=\"true\"] {\n --listNext-item-text-color: var(--salt-content-primary-foreground-disabled);\n cursor: var(--salt-cursor-disabled);\n}\n.saltListItemNext[aria-disabled=\"true\"] .saltText {\n color: var(--listNext-item-text-color);\n}\n\n/* disabled list item when selected */\n.saltListItemNext[aria-disabled=\"true\"][aria-selected=\"true\"] {\n outline: var(--salt-size-fixed-100) var(--salt-container-borderStyle) var(--salt-selectable-borderColor-selectedDisabled);\n --listNext-item-background: var(--salt-selectable-background-selectedDisabled);\n}\n";
4
4
 
5
5
  module.exports = css_248z;
6
6
  //# sourceMappingURL=ListItemNext.css.js.map
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- var css_248z = "/* Style applied to the root element */\n.saltListNext {\n margin: 0;\n background: var(--salt-container-primary-background);\n border-color: var(--salt-container-primary-borderColor);\n border-style: var(--salt-container-borderStyle);\n border-width: var(--salt-size-border);\n height: 100%;\n outline: none;\n overflow-y: auto;\n overflow-x: hidden;\n position: relative;\n padding-inline-start: 0;\n box-sizing: content-box;\n\n font-family: var(--salt-text-fontFamily);\n font-size: var(--salt-text-fontSize);\n font-weight: var(--salt-text-fontWeight);\n line-height: var(--salt-text-lineHeight);\n}\n";
3
+ var css_248z = "/* Style applied to the root element */\n.saltListNext {\n margin: 0;\n background: var(--salt-container-primary-background);\n border-color: var(--salt-container-primary-borderColor);\n border-style: var(--salt-container-borderStyle);\n border-width: var(--salt-size-fixed-100);\n height: 100%;\n outline: none;\n overflow-y: auto;\n overflow-x: hidden;\n position: relative;\n padding-inline-start: 0;\n box-sizing: content-box;\n\n font-family: var(--salt-text-fontFamily);\n font-size: var(--salt-text-fontSize);\n font-weight: var(--salt-text-fontWeight);\n line-height: var(--salt-text-lineHeight);\n}\n";
4
4
 
5
5
  module.exports = css_248z;
6
6
  //# sourceMappingURL=ListNext.css.js.map
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- var css_248z = "/* Styles for LogoSeparator */\n.saltLogoSeparator {\n height: var(--salt-size-separator-height);\n border-right: var(--salt-size-border) var(--salt-separable-borderStyle) var(--salt-separable-primary-borderColor);\n}\n";
3
+ var css_248z = "/* Styles for LogoSeparator */\n.saltLogoSeparator {\n height: var(--salt-size-separator-height);\n border-right: var(--salt-size-fixed-100) var(--salt-separable-borderStyle) var(--salt-separable-primary-borderColor);\n}\n";
4
4
 
5
5
  module.exports = css_248z;
6
6
  //# sourceMappingURL=LogoSeparator.css.js.map
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- var css_248z = "/* Styles applied to number container */\n.saltNumberInput {\n --numberInput-border: none;\n --numberInput-borderColor: var(--salt-editable-borderColor);\n --numberInput-borderStyle: var(--salt-editable-borderStyle);\n --numberInput-outlineColor: var(--salt-focused-outlineColor);\n --numberInput-borderWidth: var(--salt-size-border);\n\n align-items: center;\n color: var(--salt-content-primary-foreground);\n display: inline-flex;\n font-family: var(--salt-text-fontFamily);\n font-size: var(--salt-text-fontSize);\n height: var(--salt-size-base);\n line-height: var(--salt-text-lineHeight);\n min-height: var(--salt-size-base);\n min-width: 4em;\n width: 100%;\n box-sizing: border-box;\n\n gap: var(--salt-spacing-50);\n}\n\n.saltNumberInput:hover {\n --numberInput-borderStyle: var(--salt-editable-borderStyle-hover);\n --numberInput-borderColor: var(--salt-editable-borderColor-hover);\n\n background: var(--numberInput-background-hover);\n cursor: var(--salt-editable-cursor-hover);\n}\n\n.saltNumberInput:active {\n --numberInput-borderColor: var(--salt-editable-borderColor-active);\n --numberInput-borderStyle: var(--salt-editable-borderStyle-active);\n --numberInput-borderWidth: var(--salt-editable-borderWidth-active);\n\n background: var(--numberInput-background-active);\n cursor: var(--salt-editable-cursor-active);\n}\n\n/* Class applied if `variant=\"primary\"` */\n.saltNumberInput-primary {\n --numberInput-background: var(--salt-editable-primary-background);\n --numberInput-background-active: var(--salt-editable-primary-background-active);\n --numberInput-background-hover: var(--salt-editable-primary-background-hover);\n --numberInput-background-disabled: var(--salt-editable-primary-background-disabled);\n --numberInput-background-readonly: var(--salt-editable-primary-background-readonly);\n}\n\n/* Class applied if `variant=\"secondary\"` */\n.saltNumberInput-secondary {\n --numberInput-background: var(--salt-editable-secondary-background);\n --numberInput-background-active: var(--salt-editable-secondary-background-active);\n --numberInput-background-hover: var(--salt-editable-secondary-background-active);\n --numberInput-background-disabled: var(--salt-editable-secondary-background-disabled);\n --numberInput-background-readonly: var(--salt-editable-secondary-background-readonly);\n}\n\n/* Style applied to input if `validationState=\"error\"` */\n.saltNumberInput-error,\n.saltNumberInput-error:hover {\n --numberInput-background: var(--salt-status-error-background);\n --numberInput-background-active: var(--salt-status-error-background);\n --numberInput-background-hover: var(--salt-status-error-background);\n --numberInput-borderColor: var(--salt-status-error-borderColor);\n --numberInput-outlineColor: var(--salt-status-error-borderColor);\n --numberInput-background-readonly: var(--salt-status-error-background);\n}\n\n/* Style applied to input if `validationState=\"warning\"` */\n.saltNumberInput-warning,\n.saltNumberInput-warning:hover {\n --numberInput-background: var(--salt-status-warning-background);\n --numberInput-background-active: var(--salt-status-warning-background);\n --numberInput-background-hover: var(--salt-status-warning-background);\n --numberInput-borderColor: var(--salt-status-warning-borderColor);\n --numberInput-outlineColor: var(--salt-status-warning-borderColor);\n --numberInput-background-readonly: var(--salt-status-warning-background);\n}\n\n/* Style applied to input if `validationState=\"success\"` */\n.saltNumberInput-success,\n.saltNumberInput-success:hover {\n --numberInput-background: var(--salt-status-success-background);\n --numberInput-background-active: var(--salt-status-success-background);\n --numberInput-background-hover: var(--salt-status-success-background);\n --numberInput-borderColor: var(--salt-status-success-borderColor);\n --numberInput-outlineColor: var(--salt-status-success-borderColor);\n --numberInput-background-readonly: var(--salt-status-success-background);\n}\n\n.saltNumberInput-inputContainer {\n display: flex;\n background: var(--numberInput-background);\n border-radius: var(--salt-palette-corner-weak, 0);\n border: var(--numberInput-border);\n box-sizing: border-box;\n height: var(--salt-size-base);\n min-height: var(--salt-size-base);\n overflow: hidden;\n padding-left: var(--salt-spacing-100);\n padding-right: var(--salt-spacing-100);\n position: relative;\n flex-grow: 1;\n}\n\n/* Style applied to inner input component */\n.saltNumberInput-input {\n background: none;\n border: none;\n box-sizing: content-box;\n color: inherit;\n cursor: inherit;\n display: block;\n flex: 1;\n font: inherit;\n height: 100%;\n letter-spacing: var(--saltNumberInput-letterSpacing, 0);\n margin: 0;\n min-width: 0;\n overflow: hidden;\n padding: 0;\n text-align: var(--numberInput-textAlign);\n width: 100%;\n}\n\n.saltNumberInput-input:focus {\n outline: none;\n}\n\n/* Style applied to selected input */\n.saltNumberInput-input::selection {\n background: var(--salt-content-foreground-highlight);\n}\n\n/* Style applied to placeholder text */\n.saltNumberInput-input::placeholder {\n color: var(--salt-content-secondary-foreground);\n font-weight: var(--salt-text-fontWeight-small);\n}\n\n/* Styling when focused */\n.saltNumberInput-focused {\n --numberInput-borderColor: var(--numberInput-outlineColor);\n --numberInput-borderWidth: var(--salt-editable-borderWidth-active);\n\n outline: var(--saltNumberInput-outline, var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--numberInput-outlineColor));\n}\n\n/* Style applied if `readOnly={true}` */\n.saltNumberInput-readOnly {\n --numberInput-borderColor: var(--salt-editable-borderColor-readonly);\n --numberInput-borderStyle: var(--salt-editable-borderStyle-readonly);\n --numberInput-borderWidth: var(--salt-size-border);\n\n background: var(--numberInput-background-readonly);\n cursor: var(--salt-editable-cursor-readonly);\n}\n\n/* Styling when focused if `disabled={true}` */\n.saltNumberInput-focused.saltNumberInput-disabled {\n --numberInput-borderWidth: var(--salt-size-border);\n outline: none;\n}\n\n/* Styling when focused if `readOnly={true}` */\n.saltNumberInput-focused.saltNumberInput-readOnly {\n --numberInput-borderWidth: var(--salt-size-border);\n}\n\n/* Style applied to selected input if `disabled={true}` */\n.saltNumberInput-disabled .saltNumberInput-input::selection {\n background: none;\n}\n\n/* Style applied to input if `disabled={true}` */\n.saltNumberInput-disabled,\n.saltNumberInput-disabled:hover,\n.saltNumberInput-disabled:active {\n --numberInput-borderColor: var(--salt-editable-borderColor-disabled);\n --numberInput-borderStyle: var(--salt-editable-borderStyle-disabled);\n --numberInput-borderWidth: var(--salt-size-border);\n\n background: var(--numberInput-background-disabled);\n cursor: var(--salt-editable-cursor-disabled);\n color: var(--saltNumberInput-color-disabled, var(--salt-content-primary-foreground-disabled));\n}\n\n.saltNumberInput-activationIndicator {\n left: 0;\n bottom: 0;\n width: 100%;\n position: absolute;\n border-bottom: var(--numberInput-borderWidth) var(--numberInput-borderStyle) var(--numberInput-borderColor);\n}\n\n/* Style applied if `bordered={true}` */\n.saltNumberInput-bordered {\n --numberInput-border: var(--salt-size-border) var(--salt-container-borderStyle) var(--numberInput-borderColor);\n --numberInput-borderWidth: 0;\n}\n\n/* Style applied if focused or active when `bordered={true}` */\n.saltNumberInput-bordered.saltNumberInput-focused,\n.saltNumberInput-bordered:active {\n --numberInput-borderWidth: var(--salt-editable-borderWidth-active);\n}\n\n/* Styling when focused if `disabled={true}` or `readOnly={true}` when `bordered={true}` */\n.saltNumberInput-bordered.saltNumberInput-readOnly,\n.saltNumberInput-bordered.saltNumberInput-disabled:hover {\n --numberInput-borderWidth: 0;\n}\n\n/* Style applied to start adornments */\n.saltNumberInput-startAdornmentContainer {\n align-items: center;\n display: inline-flex;\n padding-right: var(--salt-spacing-100);\n column-gap: var(--salt-spacing-100);\n}\n\n/* Style applied to end adornments */\n.saltNumberInput-endAdornmentContainer {\n align-items: center;\n display: inline-flex;\n padding-left: var(--salt-spacing-100);\n column-gap: var(--salt-spacing-100);\n}\n\n.saltNumberInput-readOnly .saltNumberInput-startAdornmentContainer {\n margin-left: var(--salt-spacing-50);\n}\n\n.saltNumberInput-startAdornmentContainer .saltButton ~ .saltButton {\n margin-left: calc(-1 * var(--salt-spacing-50));\n}\n\n.saltNumberInput-endAdornmentContainer .saltButton ~ .saltButton {\n margin-left: calc(-1 * var(--salt-spacing-50));\n}\n\n.saltNumberInput-startAdornmentContainer .saltButton:first-child {\n margin-left: calc(var(--salt-spacing-50) * -1);\n}\n\n.saltNumberInput-endAdornmentContainer .saltButton:last-child {\n margin-right: calc(var(--salt-spacing-50) * -1);\n}\n\n.saltNumberInput-startAdornmentContainer > .saltButton,\n.saltNumberInput-endAdornmentContainer > .saltButton {\n --saltButton-padding: calc(var(--salt-spacing-50) - var(--salt-size-border));\n --saltButton-height: calc(var(--salt-size-base) - var(--salt-spacing-100));\n --saltButton-borderRadius: var(--salt-palette-corner-weaker);\n}\n\n.saltNumberInput-inputTextAlignLeft {\n text-align: left;\n}\n\n.saltNumberInput-inputTextAlignCenter {\n text-align: center;\n}\n\n.saltNumberInput-inputTextAlignRight {\n text-align: right;\n}\n\n/* --- Buttons --- */\n\n/* Styles applied to number buttons container */\n.saltNumberInput-buttonContainer {\n --numberInput-buttonGap: var(--salt-size-border-strong);\n display: flex;\n flex-direction: column;\n gap: var(--numberInput-buttonGap);\n}\n\n/* Styles applied to number buttons */\n.saltNumberInput-numberButton {\n --saltButton-height: calc((var(--salt-size-base) - var(--numberInput-buttonGap)) * 0.5);\n --saltButton-width: var(--salt-size-base);\n}\n\n.saltNumberInput-numberButtonIncrement {\n --saltButton-borderRadius: var(--salt-palette-corner-weak, 0) var(--salt-palette-corner-weak, 0) 0 0;\n}\n.saltNumberInput-numberButtonDecrement {\n --saltButton-borderRadius: 0 0 var(--salt-palette-corner-weak, 0) var(--salt-palette-corner-weak, 0);\n}\n";
3
+ var css_248z = "/* Styles applied to number container */\n.saltNumberInput {\n --numberInput-border: var(--salt-size-fixed-100) var(--salt-container-borderStyle) var(--numberInput-borderColor);\n --numberInput-borderColor: var(--salt-editable-borderColor);\n --numberInput-borderStyle: var(--salt-editable-borderStyle);\n --numberInput-outlineColor: var(--salt-focused-outlineColor);\n --numberInput-borderWidth: var(--salt-size-fixed-100);\n --numberInput-outline: none;\n\n align-items: center;\n background: var(--numberInput-background);\n border-radius: var(--salt-palette-corner-weak, 0);\n box-sizing: border-box;\n color: var(--salt-content-primary-foreground);\n display: inline-flex;\n font-family: var(--salt-text-fontFamily);\n font-size: var(--salt-text-fontSize);\n gap: var(--salt-spacing-50);\n height: var(--salt-size-base);\n min-height: var(--salt-size-base);\n min-width: 4em;\n overflow: hidden;\n outline: var(--numberInput-outline);\n padding-left: var(--salt-spacing-100);\n padding-right: var(--salt-spacing-50);\n padding-top: var(--salt-spacing-50);\n padding-bottom: var(--salt-spacing-50);\n position: relative;\n width: 100%;\n}\n\n.saltNumberInput:hover {\n --numberInput-borderStyle: var(--salt-editable-borderStyle-hover);\n --numberInput-borderColor: var(--salt-editable-borderColor-hover);\n\n background: var(--numberInput-background-hover);\n cursor: var(--salt-cursor-text);\n}\n\n.saltNumberInput:active {\n --numberInput-borderColor: var(--salt-editable-borderColor-active);\n --numberInput-borderStyle: var(--salt-editable-borderStyle-active);\n --numberInput-borderWidth: var(--salt-size-fixed-200);\n\n background: var(--numberInput-background-active);\n}\n\n/* Class applied if `variant=\"primary\"` */\n.saltNumberInput-primary {\n --numberInput-background: var(--salt-editable-primary-background);\n --numberInput-background-active: var(--salt-editable-primary-background-active);\n --numberInput-background-hover: var(--salt-editable-primary-background-hover);\n --numberInput-background-disabled: var(--salt-editable-primary-background-disabled);\n --numberInput-background-readonly: var(--salt-editable-primary-background-readonly);\n}\n\n/* Class applied if `variant=\"secondary\"` */\n.saltNumberInput-secondary {\n --numberInput-background: var(--salt-editable-secondary-background);\n --numberInput-background-active: var(--salt-editable-secondary-background-active);\n --numberInput-background-hover: var(--salt-editable-secondary-background-active);\n --numberInput-background-disabled: var(--salt-editable-secondary-background-disabled);\n --numberInput-background-readonly: var(--salt-editable-secondary-background-readonly);\n}\n\n/* Style applied to input if `validationState=\"error\"` */\n.saltNumberInput-error,\n.saltNumberInput-error:hover {\n --numberInput-background: var(--salt-status-error-background);\n --numberInput-background-active: var(--salt-status-error-background);\n --numberInput-background-hover: var(--salt-status-error-background);\n --numberInput-borderColor: var(--salt-status-error-borderColor);\n --numberInput-outlineColor: var(--salt-status-error-borderColor);\n --numberInput-background-readonly: var(--salt-status-error-background);\n}\n\n/* Style applied to input if `validationState=\"warning\"` */\n.saltNumberInput-warning,\n.saltNumberInput-warning:hover {\n --numberInput-background: var(--salt-status-warning-background);\n --numberInput-background-active: var(--salt-status-warning-background);\n --numberInput-background-hover: var(--salt-status-warning-background);\n --numberInput-borderColor: var(--salt-status-warning-borderColor);\n --numberInput-outlineColor: var(--salt-status-warning-borderColor);\n --numberInput-background-readonly: var(--salt-status-warning-background);\n}\n\n/* Style applied to input if `validationState=\"success\"` */\n.saltNumberInput-success,\n.saltNumberInput-success:hover {\n --numberInput-background: var(--salt-status-success-background);\n --numberInput-background-active: var(--salt-status-success-background);\n --numberInput-background-hover: var(--salt-status-success-background);\n --numberInput-borderColor: var(--salt-status-success-borderColor);\n --numberInput-outlineColor: var(--salt-status-success-borderColor);\n --numberInput-background-readonly: var(--salt-status-success-background);\n}\n\n/* Style applied to inner input component */\n.saltNumberInput-input {\n background: none;\n border: none;\n box-sizing: content-box;\n color: inherit;\n cursor: inherit;\n display: block;\n flex: 1;\n font: inherit;\n letter-spacing: var(--salt-text-letterSpacing);\n line-height: var(--salt-text-lineHeight);\n margin: 0;\n min-width: 0;\n padding: 0;\n text-align: var(--numberInput-textAlign);\n width: 100%;\n}\n\n.saltNumberInput-input:focus {\n outline: none;\n}\n\n/* Style applied to selected input */\n.saltNumberInput-input::selection {\n background: var(--salt-content-foreground-highlight);\n}\n\n/* Style applied to placeholder text */\n.saltNumberInput-input::placeholder {\n color: var(--salt-content-secondary-foreground);\n font-weight: var(--salt-text-fontWeight-small);\n}\n\n/* Styling when focused */\n.saltNumberInput-focused {\n --numberInput-borderColor: var(--numberInput-outlineColor);\n --numberInput-borderWidth: var(--salt-size-fixed-200);\n\n outline: var(--saltNumberInput-outline, var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--numberInput-outlineColor));\n}\n\n/* Style applied if `bordered={true}` */\n.saltNumberInput-bordered {\n --numberInput-border: var(--salt-size-fixed-100) var(--salt-container-borderStyle) var(--numberInput-borderColor);\n --numberInput-borderWidth: 0;\n\n border: var(--numberInput-border);\n}\n\n/* Style applied if focused or active when `bordered={true}` */\n.saltNumberInput-bordered.saltNumberInput-focused,\n.saltNumberInput-bordered:active {\n --numberInput-borderWidth: var(--salt-size-fixed-200);\n}\n\n/* Styling when focused if `disabled={true}` or `readOnly={true}` when `bordered={true}` */\n.saltNumberInput-bordered.saltNumberInput-readOnly,\n.saltNumberInput-bordered.saltNumberInput-disabled:hover {\n --numberInput-borderWidth: 0;\n}\n\n/* Styling when focused and hovered when `bordered={true}` */\n.saltNumberInput-bordered.saltNumberInput-focused:hover {\n --numberInput-borderColor: var(--salt-editable-borderColor-active);\n}\n\n/* Style applied if `readOnly={true}` */\n.saltNumberInput-readOnly,\n.saltNumberInput-bordered.saltNumberInput-readOnly {\n --numberInput-borderColor: var(--salt-editable-borderColor-readonly);\n --numberInput-borderStyle: var(--salt-editable-borderStyle-readonly);\n --numberInput-borderWidth: var(--salt-size-fixed-100);\n\n background: var(--numberInput-background-readonly);\n cursor: var(--salt-cursor-readonly);\n}\n\n/* Styling when focused if `disabled={true}` */\n.saltNumberInput-focused.saltNumberInput-disabled {\n --numberInput-borderWidth: var(--salt-size-fixed-100);\n outline: none;\n}\n\n/* Styling when focused if `readOnly={true}` */\n.saltNumberInput-focused.saltNumberInput-readOnly {\n --numberInput-borderWidth: var(--salt-size-fixed-100);\n}\n\n.saltNumberInput:hover.saltNumberInput-readOnly {\n --numberInput-borderColor: var(--salt-editable-borderColor-readonly);\n}\n\n/* Style applied to selected input if `disabled={true}` */\n.saltNumberInput-disabled .saltNumberInput-input::selection {\n background: none;\n}\n\n/* Style applied to input if `disabled={true}` */\n.saltNumberInput-disabled,\n.saltNumberInput-disabled:hover,\n.saltNumberInput-disabled:active {\n --numberInput-borderColor: var(--salt-editable-borderColor-disabled);\n --numberInput-borderStyle: var(--salt-editable-borderStyle-disabled);\n --numberInput-borderWidth: var(--salt-size-fixed-100);\n\n background: var(--numberInput-background-disabled);\n cursor: var(--salt-cursor-disabled);\n color: var(--saltNumberInput-color-disabled, var(--salt-content-primary-foreground-disabled));\n}\n\n/* Style applied to start adornments */\n.saltNumberInput-startAdornmentContainer {\n align-items: center;\n display: inline-flex;\n padding-right: var(--salt-spacing-100);\n column-gap: var(--salt-spacing-100);\n}\n\n/* Style applied to end adornments */\n.saltNumberInput-endAdornmentContainer {\n align-items: center;\n display: inline-flex;\n padding-left: var(--salt-spacing-100);\n column-gap: var(--salt-spacing-100);\n}\n\n.saltNumberInput-startAdornmentContainer {\n margin-left: calc(var(--salt-spacing-50) * -1);\n}\n\n.saltNumberInput-startAdornmentContainer > .saltButton,\n.saltNumberInput-endAdornmentContainer > .saltButton {\n --saltButton-padding: calc(var(--salt-spacing-50) - var(--button-borderWidth));\n --saltButton-height: calc(var(--salt-size-base) - var(--salt-spacing-100));\n --saltButton-borderRadius: var(--salt-palette-corner-weaker);\n}\n\n.saltNumberInput-inputTextAlignLeft {\n --numberInput-textAlign: left;\n}\n\n.saltNumberInput-inputTextAlignCenter {\n --numberInput-textAlign: center;\n}\n\n.saltNumberInput-inputTextAlignRight {\n --numberInput-textAlign: right;\n}\n\n/* --- Buttons --- */\n\n/* Styles applied to number buttons container */\n.saltNumberInput-buttonContainer {\n --numberInput-buttonGap: var(--salt-spacing-fixed-200);\n display: flex;\n flex-direction: column;\n gap: var(--numberInput-buttonGap);\n justify-content: center;\n}\n\n.saltNumberInput-hiddenButtons .saltNumberInput-buttonContainer {\n display: none;\n}\n\n/* Styles applied to number buttons */\n.saltNumberInput-numberButton {\n --saltButton-height: calc((var(--salt-size-base) - (var(--salt-spacing-50) * 2) - var(--salt-size-fixed-200)) / 2);\n --saltButton-padding: calc(var(--salt-spacing-50) - var(--button-borderWidth));\n}\n\n.saltNumberInput-numberButtonIncrement {\n --saltButton-borderRadius: var(--salt-palette-corner-weaker, 0) var(--salt-palette-corner-weaker, 0) 0 0;\n}\n.saltNumberInput-numberButtonDecrement {\n --saltButton-borderRadius: 0 0 var(--salt-palette-corner-weaker, 0) var(--salt-palette-corner-weaker, 0);\n}\n\n.saltNumberInput-activationIndicator {\n left: 0;\n bottom: 0;\n width: 100%;\n position: absolute;\n border-bottom: var(--salt-size-fixed-100) var(--salt-editable-borderStyle) var(--numberInput-borderColor);\n}\n\n.saltNumberInput-focused .saltNumberInput-activationIndicator {\n border-bottom: var(--salt-size-fixed-200) var(--salt-editable-borderStyle-active) var(--salt-editable-borderColor-active);\n}\n\n.saltNumberInput-bordered.saltNumberInput-focused .saltNumberInput-activationIndicator {\n /* Activation indicator width minus the border from the number input. */\n border-bottom-width: var(--salt-size-fixed-100);\n}\n\n.saltNumberInput-bordered .saltNumberInput-activationIndicator,\n.saltNumberInput-readOnly.saltNumberInput-focused .saltNumberInput-activationIndicator {\n border-bottom-width: 0;\n}\n";
4
4
 
5
5
  module.exports = css_248z;
6
6
  //# sourceMappingURL=NumberInput.css.js.map