@carbon/ibm-products 2.0.0-rc.1 → 2.0.0-rc.10

Sign up to get free protection for your applications and to get access to all the features.
Files changed (331) hide show
  1. package/README.md +2 -2
  2. package/css/index-full-carbon.css +1187 -325
  3. package/css/index-full-carbon.css.map +1 -1
  4. package/css/index-full-carbon.min.css +6 -8
  5. package/css/index-full-carbon.min.css.map +1 -1
  6. package/css/index-without-carbon-released-only.css +789 -171
  7. package/css/index-without-carbon-released-only.css.map +1 -1
  8. package/css/index-without-carbon-released-only.min.css +4 -8
  9. package/css/index-without-carbon-released-only.min.css.map +1 -1
  10. package/css/index-without-carbon.css +1068 -414
  11. package/css/index-without-carbon.css.map +1 -1
  12. package/css/index-without-carbon.min.css +6 -8
  13. package/css/index-without-carbon.min.css.map +1 -1
  14. package/css/index.css +981 -267
  15. package/css/index.css.map +1 -1
  16. package/css/index.min.css +6 -8
  17. package/css/index.min.css.map +1 -1
  18. package/es/components/APIKeyModal/APIKeyModal.js +1 -1
  19. package/es/components/ActionBar/ActionBarOverflowItems.js +1 -0
  20. package/es/components/ActionSet/ActionSet.js +7 -3
  21. package/es/components/AddSelect/AddSelect.js +6 -6
  22. package/es/components/AddSelect/AddSelectBody.js +72 -31
  23. package/es/components/AddSelect/AddSelectBreadcrumbs.js +12 -4
  24. package/es/components/AddSelect/AddSelectColumn.js +8 -8
  25. package/es/components/AddSelect/AddSelectFilter.js +10 -7
  26. package/es/components/AddSelect/AddSelectList.js +64 -29
  27. package/es/components/AddSelect/AddSelectMetaPanel.js +7 -1
  28. package/es/components/AddSelect/AddSelectSidebar.js +5 -2
  29. package/es/components/AddSelect/AddSelectSort.js +2 -2
  30. package/es/components/AddSelect/add-select-utils.js +9 -2
  31. package/es/components/AddSelect/hooks/useItemSort.js +6 -0
  32. package/es/components/AddSelect/hooks/useParentSelect.js +6 -0
  33. package/es/components/AddSelect/hooks/usePath.js +15 -1
  34. package/es/components/AddSelect/index.js +1 -1
  35. package/es/components/BreadcrumbWithOverflow/BreadcrumbWithOverflow.js +4 -6
  36. package/es/components/Card/Card.js +16 -6
  37. package/es/components/Card/CardFooter.js +3 -1
  38. package/es/components/Card/CardHeader.js +20 -1
  39. package/es/components/ComboButton/ComboButton.js +1 -1
  40. package/es/components/CreateFullPage/CreateFullPage.js +4 -1
  41. package/es/components/CreateTearsheet/CreateTearsheet.js +8 -1
  42. package/es/components/CreateTearsheetNarrow/CreateTearsheetNarrow.js +2 -2
  43. package/es/components/DataSpreadsheet/DataSpreadsheet.js +64 -11
  44. package/es/components/DataSpreadsheet/DataSpreadsheetBody.js +2 -1
  45. package/es/components/DataSpreadsheet/DataSpreadsheetHeader.js +7 -0
  46. package/es/components/DataSpreadsheet/hooks/useMultipleKeyTracking.js +6 -5
  47. package/es/components/DataSpreadsheet/utils/handleCellDeletion.js +40 -0
  48. package/es/components/DataSpreadsheet/utils/handleMultipleKeys.js +1 -1
  49. package/es/components/Datagrid/Datagrid/Datagrid.js +10 -38
  50. package/es/components/Datagrid/Datagrid/DatagridContent.js +154 -0
  51. package/es/components/Datagrid/Datagrid/DatagridExpandedRow.js +9 -1
  52. package/es/components/Datagrid/Datagrid/DatagridRow.js +53 -6
  53. package/es/components/Datagrid/Datagrid/DatagridSelectAll.js +10 -3
  54. package/es/components/Datagrid/Datagrid/DatagridSelectAllWithToggle.js +13 -4
  55. package/es/components/Datagrid/Datagrid/DatagridToolbar.js +9 -6
  56. package/es/components/Datagrid/Datagrid/DatagridVirtualBody.js +2 -1
  57. package/es/components/Datagrid/Datagrid/DraggableElement.js +6 -2
  58. package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/Actions.js +5 -45
  59. package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/ButtonWrapper.js +4 -1
  60. package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/Columns.js +36 -10
  61. package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/CustomizeColumnsModal.js +62 -26
  62. package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/ModalWrapper.js +3 -2
  63. package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditButton/InlineEditButton.js +60 -0
  64. package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditButton/index.js +1 -0
  65. package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditCell/InlineEditCell.js +537 -0
  66. package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditCell/index.js +1 -0
  67. package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditContext/InlineEditContext.js +112 -0
  68. package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditContext/getCellIdAsObject.js +27 -0
  69. package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditContext/index.js +1 -0
  70. package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditContext/returnUpdatedActiveCell.js +39 -0
  71. package/es/components/Datagrid/Datagrid/addons/InlineEdit/handleGridFocus.js +19 -0
  72. package/es/components/Datagrid/Datagrid/addons/InlineEdit/handleGridKeyPress.js +263 -0
  73. package/es/components/Datagrid/Datagrid/addons/InlineEdit/handleMultipleKeys.js +87 -0
  74. package/es/components/Datagrid/Datagrid/addons/RowSize/RowSizeDropdown.js +17 -14
  75. package/es/components/Datagrid/Datagrid/addons/RowSize/RowSizeRadioGroup.js +13 -36
  76. package/es/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/CustomizeColumnStory.js +0 -0
  77. package/es/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/LeftPanelStory.js +0 -0
  78. package/es/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/RowSizeDropdownStory.js +0 -0
  79. package/es/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/SelectAllWithToggleStory.js +0 -0
  80. package/es/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/StickyActionsColumnStory.js +0 -0
  81. package/es/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/common.js +0 -0
  82. package/es/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/index.js +0 -0
  83. package/es/components/Datagrid/index.js +3 -1
  84. package/es/components/Datagrid/useActionsColumn.js +28 -12
  85. package/es/components/Datagrid/useColumnOrder.js +8 -0
  86. package/es/components/Datagrid/useCustomizeColumns.js +5 -0
  87. package/es/components/Datagrid/useDefaultStringRenderer.js +4 -1
  88. package/es/components/Datagrid/useDisableSelectRows.js +6 -2
  89. package/es/components/Datagrid/useExpandedRow.js +0 -1
  90. package/es/components/Datagrid/useInfiniteScroll.js +5 -2
  91. package/es/components/Datagrid/useInlineEdit.js +71 -0
  92. package/es/components/Datagrid/useNestedRowExpander.js +47 -0
  93. package/es/components/Datagrid/useNestedRows.js +16 -4
  94. package/es/components/Datagrid/useRowExpander.js +12 -4
  95. package/es/components/Datagrid/useRowSize.js +17 -6
  96. package/es/components/Datagrid/useSelectAllToggle.js +17 -4
  97. package/es/components/Datagrid/useSelectRows.js +12 -2
  98. package/es/components/Datagrid/useSortableColumns.js +1 -1
  99. package/es/components/Datagrid/useStickyColumn.js +11 -0
  100. package/es/components/Datagrid/utils/DatagridActions.js +236 -0
  101. package/es/components/Datagrid/utils/DatagridPagination.js +33 -0
  102. package/es/components/Datagrid/utils/Wrapper.js +21 -0
  103. package/es/components/Datagrid/utils/getArgTypes.js +89 -0
  104. package/es/components/Datagrid/utils/getInlineEditColumns.js +153 -0
  105. package/es/components/Datagrid/utils/makeData.js +47 -2
  106. package/es/components/EditUpdateCards/EditUpdateCards.js +144 -0
  107. package/es/components/EditUpdateCards/index.js +7 -0
  108. package/es/components/ExportModal/ExportModal.js +1 -1
  109. package/es/components/ImportModal/ImportModal.js +3 -3
  110. package/es/components/InlineEdit/InlineEdit.js +28 -426
  111. package/es/components/InlineEditV1/InlineEditV1.js +447 -0
  112. package/es/components/InlineEditV1/index.js +7 -0
  113. package/es/components/InlineEditV2/InlineEditV2.js +289 -0
  114. package/es/components/InlineEditV2/index.js +7 -0
  115. package/es/components/ModifiedTabs/ModifiedTabLabelNew.js +1 -1
  116. package/es/components/ModifiedTabs/ModifiedTabLabelWithClose.js +1 -1
  117. package/es/components/MultiAddSelect/MultiAddSelect.js +14 -7
  118. package/es/components/MultiAddSelect/index.js +6 -0
  119. package/es/components/NotificationsPanel/NotificationsPanel.js +1 -1
  120. package/es/components/OptionsTile/OptionsTile.js +29 -13
  121. package/es/components/PageHeader/PageHeader.js +4 -4
  122. package/es/components/PageHeader/PageHeaderTitle.js +1 -1
  123. package/es/components/ProductiveCard/ProductiveCard.js +5 -0
  124. package/es/components/RemoveModal/RemoveModal.js +20 -3
  125. package/es/components/Saving/Saving.js +1 -1
  126. package/es/components/SidePanel/SidePanel.js +45 -52
  127. package/es/components/SidePanel/motion/variants.js +45 -0
  128. package/es/components/SingleAddSelect/SingleAddSelect.js +6 -0
  129. package/es/components/SingleAddSelect/index.js +6 -0
  130. package/es/components/StatusIcon/StatusIcon.js +1 -1
  131. package/es/components/UserProfileImage/UserProfileImage.js +1 -1
  132. package/es/components/WebTerminal/WebTerminal.js +2 -2
  133. package/es/components/WebTerminal/WebTerminalContentWrapper.js +1 -1
  134. package/es/components/WebTerminal/hooks/index.js +6 -0
  135. package/es/components/WebTerminal/index.js +6 -0
  136. package/es/components/WebTerminal/preview-components/Navigation.js +7 -1
  137. package/es/components/WebTerminal/preview-components/documentationLinks.js +6 -0
  138. package/es/components/WebTerminal/preview-components/index.js +7 -0
  139. package/es/components/index.js +3 -2
  140. package/es/global/js/hooks/index.js +2 -1
  141. package/es/global/js/hooks/useClickOutside.js +1 -1
  142. package/es/global/js/hooks/useControllableState.js +83 -0
  143. package/es/global/js/hooks/useResetCreateComponent.js +6 -2
  144. package/es/global/js/package-settings.js +7 -4
  145. package/es/global/js/utils/getBezierValues.js +20 -0
  146. package/es/global/js/utils/getNumberOfHiddenSteps.js +19 -0
  147. package/es/global/js/utils/motionConstants.js +45 -0
  148. package/es/global/js/utils/rangeWithCallback.js +13 -0
  149. package/es/global/js/utils/story-helper.js +5 -1
  150. package/es/global/js/utils/uuidv4.spec.js +4 -0
  151. package/lib/components/APIKeyModal/APIKeyModal.js +4 -4
  152. package/lib/components/ActionBar/ActionBarOverflowItems.js +1 -0
  153. package/lib/components/ActionSet/ActionSet.js +7 -3
  154. package/lib/components/AddSelect/AddSelect.js +5 -6
  155. package/lib/components/AddSelect/AddSelectBody.js +67 -30
  156. package/lib/components/AddSelect/AddSelectBreadcrumbs.js +15 -4
  157. package/lib/components/AddSelect/AddSelectColumn.js +7 -7
  158. package/lib/components/AddSelect/AddSelectFilter.js +9 -6
  159. package/lib/components/AddSelect/AddSelectList.js +65 -30
  160. package/lib/components/AddSelect/AddSelectMetaPanel.js +8 -2
  161. package/lib/components/AddSelect/AddSelectSidebar.js +4 -1
  162. package/lib/components/AddSelect/AddSelectSort.js +5 -5
  163. package/lib/components/AddSelect/add-select-utils.js +9 -2
  164. package/lib/components/AddSelect/hooks/useItemSort.js +6 -0
  165. package/lib/components/AddSelect/hooks/useParentSelect.js +6 -0
  166. package/lib/components/AddSelect/hooks/usePath.js +9 -1
  167. package/lib/components/BreadcrumbWithOverflow/BreadcrumbWithOverflow.js +6 -6
  168. package/lib/components/Card/Card.js +16 -6
  169. package/lib/components/Card/CardFooter.js +3 -1
  170. package/lib/components/Card/CardHeader.js +21 -1
  171. package/lib/components/ComboButton/ComboButton.js +3 -3
  172. package/lib/components/CreateFullPage/CreateFullPage.js +4 -1
  173. package/lib/components/CreateTearsheet/CreateTearsheet.js +9 -1
  174. package/lib/components/CreateTearsheetNarrow/CreateTearsheetNarrow.js +2 -2
  175. package/lib/components/DataSpreadsheet/DataSpreadsheet.js +64 -10
  176. package/lib/components/DataSpreadsheet/DataSpreadsheetBody.js +2 -1
  177. package/lib/components/DataSpreadsheet/DataSpreadsheetHeader.js +7 -0
  178. package/lib/components/DataSpreadsheet/hooks/useMultipleKeyTracking.js +6 -5
  179. package/lib/components/DataSpreadsheet/utils/handleCellDeletion.js +51 -0
  180. package/lib/components/DataSpreadsheet/utils/handleMultipleKeys.js +1 -1
  181. package/lib/components/Datagrid/Datagrid/Datagrid.js +12 -45
  182. package/lib/components/Datagrid/Datagrid/DatagridContent.js +188 -0
  183. package/lib/components/Datagrid/Datagrid/DatagridExpandedRow.js +9 -1
  184. package/lib/components/Datagrid/Datagrid/DatagridRow.js +63 -6
  185. package/lib/components/Datagrid/Datagrid/DatagridSelectAll.js +12 -3
  186. package/lib/components/Datagrid/Datagrid/DatagridSelectAllWithToggle.js +16 -5
  187. package/lib/components/Datagrid/Datagrid/DatagridToolbar.js +10 -7
  188. package/lib/components/Datagrid/Datagrid/DatagridVirtualBody.js +2 -1
  189. package/lib/components/Datagrid/Datagrid/DraggableElement.js +7 -3
  190. package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/Actions.js +12 -47
  191. package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/ButtonWrapper.js +5 -2
  192. package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/Columns.js +48 -25
  193. package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/CustomizeColumnsModal.js +60 -25
  194. package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/ModalWrapper.js +3 -2
  195. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditButton/InlineEditButton.js +76 -0
  196. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditButton/index.js +13 -0
  197. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditCell/InlineEditCell.js +562 -0
  198. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditCell/index.js +13 -0
  199. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditContext/InlineEditContext.js +129 -0
  200. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditContext/getCellIdAsObject.js +36 -0
  201. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditContext/index.js +19 -0
  202. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditContext/returnUpdatedActiveCell.js +45 -0
  203. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/handleGridFocus.js +28 -0
  204. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/handleGridKeyPress.js +272 -0
  205. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/handleMultipleKeys.js +100 -0
  206. package/lib/components/Datagrid/Datagrid/addons/RowSize/RowSizeDropdown.js +17 -13
  207. package/lib/components/Datagrid/Datagrid/addons/RowSize/RowSizeRadioGroup.js +13 -35
  208. package/lib/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/CustomizeColumnStory.js +0 -0
  209. package/lib/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/LeftPanelStory.js +0 -0
  210. package/lib/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/RowSizeDropdownStory.js +0 -0
  211. package/lib/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/SelectAllWithToggleStory.js +0 -0
  212. package/lib/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/StickyActionsColumnStory.js +0 -0
  213. package/lib/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/common.js +0 -0
  214. package/lib/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/index.js +0 -0
  215. package/lib/components/Datagrid/index.js +17 -1
  216. package/lib/components/Datagrid/useActionsColumn.js +28 -13
  217. package/lib/components/Datagrid/useColumnOrder.js +17 -0
  218. package/lib/components/Datagrid/useCustomizeColumns.js +5 -0
  219. package/lib/components/Datagrid/useDefaultStringRenderer.js +5 -1
  220. package/lib/components/Datagrid/useDisableSelectRows.js +6 -2
  221. package/lib/components/Datagrid/useExpandedRow.js +0 -1
  222. package/lib/components/Datagrid/useInfiniteScroll.js +5 -2
  223. package/lib/components/Datagrid/useInlineEdit.js +85 -0
  224. package/lib/components/Datagrid/useNestedRowExpander.js +63 -0
  225. package/lib/components/Datagrid/useNestedRows.js +17 -4
  226. package/lib/components/Datagrid/useRowExpander.js +17 -5
  227. package/lib/components/Datagrid/useRowSize.js +18 -13
  228. package/lib/components/Datagrid/useSelectAllToggle.js +18 -4
  229. package/lib/components/Datagrid/useSelectRows.js +12 -2
  230. package/lib/components/Datagrid/useSortableColumns.js +5 -5
  231. package/lib/components/Datagrid/useStickyColumn.js +11 -0
  232. package/lib/components/Datagrid/utils/DatagridActions.js +260 -0
  233. package/lib/components/Datagrid/utils/DatagridPagination.js +46 -0
  234. package/lib/components/Datagrid/utils/Wrapper.js +33 -0
  235. package/lib/components/Datagrid/utils/getArgTypes.js +97 -0
  236. package/lib/components/Datagrid/utils/getInlineEditColumns.js +168 -0
  237. package/lib/components/Datagrid/utils/makeData.js +48 -2
  238. package/lib/components/EditUpdateCards/EditUpdateCards.js +152 -0
  239. package/lib/components/EditUpdateCards/index.js +13 -0
  240. package/lib/components/ExportModal/ExportModal.js +3 -3
  241. package/lib/components/ImportModal/ImportModal.js +4 -4
  242. package/lib/components/InlineEdit/InlineEdit.js +27 -426
  243. package/lib/components/InlineEditV1/InlineEditV1.js +464 -0
  244. package/lib/components/InlineEditV1/index.js +13 -0
  245. package/lib/components/InlineEditV2/InlineEditV2.js +309 -0
  246. package/lib/components/InlineEditV2/index.js +13 -0
  247. package/lib/components/ModifiedTabs/ModifiedTabLabelNew.js +2 -2
  248. package/lib/components/ModifiedTabs/ModifiedTabLabelWithClose.js +3 -3
  249. package/lib/components/MultiAddSelect/MultiAddSelect.js +14 -7
  250. package/lib/components/NotificationsPanel/NotificationsPanel.js +8 -8
  251. package/lib/components/OptionsTile/OptionsTile.js +34 -17
  252. package/lib/components/PageHeader/PageHeader.js +5 -5
  253. package/lib/components/PageHeader/PageHeaderTitle.js +1 -1
  254. package/lib/components/ProductiveCard/ProductiveCard.js +5 -0
  255. package/lib/components/RemoveModal/RemoveModal.js +20 -3
  256. package/lib/components/Saving/Saving.js +5 -5
  257. package/lib/components/SidePanel/SidePanel.js +48 -53
  258. package/lib/components/SidePanel/motion/variants.js +55 -0
  259. package/lib/components/SingleAddSelect/SingleAddSelect.js +6 -0
  260. package/lib/components/StatusIcon/StatusIcon.js +45 -45
  261. package/lib/components/UserProfileImage/UserProfileImage.js +7 -7
  262. package/lib/components/WebTerminal/WebTerminal.js +3 -3
  263. package/lib/components/WebTerminal/hooks/index.js +6 -0
  264. package/lib/components/WebTerminal/preview-components/Navigation.js +10 -4
  265. package/lib/components/WebTerminal/preview-components/documentationLinks.js +6 -0
  266. package/lib/components/index.js +21 -1
  267. package/lib/global/js/hooks/index.js +9 -1
  268. package/lib/global/js/hooks/useClickOutside.js +1 -1
  269. package/lib/global/js/hooks/useControllableState.js +94 -0
  270. package/lib/global/js/hooks/useResetCreateComponent.js +7 -2
  271. package/lib/global/js/package-settings.js +7 -4
  272. package/lib/global/js/utils/getBezierValues.js +29 -0
  273. package/lib/global/js/utils/getNumberOfHiddenSteps.js +28 -0
  274. package/lib/global/js/utils/motionConstants.js +55 -0
  275. package/lib/global/js/utils/rangeWithCallback.js +22 -0
  276. package/lib/global/js/utils/story-helper.js +5 -1
  277. package/lib/global/js/utils/uuidv4.spec.js +4 -0
  278. package/package.json +18 -16
  279. package/scss/components/ActionSet/_action-set.scss +9 -4
  280. package/scss/components/AddSelect/_add-select.scss +132 -34
  281. package/scss/components/AddSelect/_index.scss +1 -1
  282. package/scss/components/AddSelect/_storybook-styles.scss +1 -1
  283. package/scss/components/Card/_card.scss +1 -0
  284. package/scss/components/Cascade/_cascade.scss +1 -1
  285. package/scss/components/CreateTearsheet/_create-tearsheet.scss +2 -0
  286. package/scss/components/Datagrid/_datagrid.scss +7 -0
  287. package/scss/components/Datagrid/_storybook-styles.scss +17 -5
  288. package/scss/components/Datagrid/styles/_datagrid.scss +87 -18
  289. package/scss/components/Datagrid/styles/_draggableElement.scss +26 -9
  290. package/scss/components/Datagrid/styles/_index.scss +1 -0
  291. package/scss/components/Datagrid/styles/_useActionsColumn.scss +14 -0
  292. package/scss/components/Datagrid/styles/_useExpandedRow.scss +57 -11
  293. package/scss/components/Datagrid/styles/_useInlineEdit.scss +419 -0
  294. package/scss/components/Datagrid/styles/_useNestedRows.scss +33 -1
  295. package/scss/components/Datagrid/styles/_useStickyColumn.scss +31 -2
  296. package/scss/components/Datagrid/styles/addons/_CustomizeColumnsModal.scss +47 -6
  297. package/scss/components/Datagrid/styles/addons/_RowSizeDropdown.scss +9 -1
  298. package/scss/components/EditUpdateCards/_carbon-imports.scss +9 -0
  299. package/scss/components/EditUpdateCards/_edit-update-cards.scss +85 -0
  300. package/scss/components/EditUpdateCards/_index-with-carbon.scss +9 -0
  301. package/scss/components/EditUpdateCards/_index.scss +8 -0
  302. package/scss/components/EditUpdateCards/_storybook-styles.scss +55 -0
  303. package/scss/components/{InlineEdit → InlineEditV1}/_carbon-imports.scss +0 -0
  304. package/scss/components/{InlineEdit → InlineEditV1}/_index-with-carbon.scss +1 -1
  305. package/scss/components/{InlineEdit → InlineEditV1}/_index.scss +1 -1
  306. package/scss/components/{InlineEdit/_inline-edit.scss → InlineEditV1/_inline-edit-v1.scss} +4 -2
  307. package/scss/components/{InlineEdit → InlineEditV1}/_storybook-styles.scss +0 -0
  308. package/scss/components/InlineEditV2/_carbon-imports.scss +9 -0
  309. package/scss/components/InlineEditV2/_index-with-carbon.scss +9 -0
  310. package/scss/components/InlineEditV2/_index.scss +10 -0
  311. package/scss/components/InlineEditV2/_inline-edit-v2.scss +83 -0
  312. package/scss/components/InlineEditV2/_storybook-styles.scss +9 -0
  313. package/scss/components/MultiAddSelect/_multi-add-select.scss +7 -0
  314. package/scss/components/MultiAddSelect/_storybook-styles.scss +1 -1
  315. package/scss/components/NotificationsPanel/_notifications-panel.scss +3 -6
  316. package/scss/components/RemoveModal/_remove-modal.scss +0 -4
  317. package/scss/components/SidePanel/_side-panel.scss +3 -82
  318. package/scss/components/SidePanel/_storybook-styles.scss +6 -1
  319. package/scss/components/SingleAddSelect/_carbon-imports.scss +1 -1
  320. package/scss/components/SingleAddSelect/_index-with-carbon.scss +1 -1
  321. package/scss/components/SingleAddSelect/_index.scss +7 -0
  322. package/scss/components/SingleAddSelect/_single-add-select.scss +7 -0
  323. package/scss/components/SingleAddSelect/_storybook-styles.scss +1 -1
  324. package/scss/components/Tearsheet/_tearsheet.scss +2 -2
  325. package/scss/components/WebTerminal/_carbon-imports.scss +6 -0
  326. package/scss/components/WebTerminal/_index.scss +7 -0
  327. package/scss/components/WebTerminal/_storybook-styles.scss +7 -0
  328. package/scss/components/_index-released-only-with-carbon.scss +1 -1
  329. package/scss/components/_index-released-only.scss +2 -1
  330. package/scss/components/_index-with-carbon.scss +3 -1
  331. package/scss/components/_index.scss +3 -1
@@ -963,14 +963,17 @@
963
963
  font-weight: var(--cds-body-short-01-font-weight, 400);
964
964
  line-height: var(--cds-body-short-01-line-height, 1.28572);
965
965
  letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
966
- height: 4rem;
967
966
  align-items: center;
967
+ margin: 0;
968
+ }
969
+ .c4p--action-set .c4p--action-set__action-button.c4p--action-set__action-button--expressive {
970
+ height: 4rem;
968
971
  padding-top: 1rem;
969
972
  padding-bottom: 2rem;
970
- margin: 0;
971
973
  }
972
974
 
973
- .c4p--action-set.cds--btn-set .c4p--action-set__action-button.cds--btn.cds--btn--expressive {
975
+ .c4p--action-set.cds--btn-set .c4p--action-set__action-button.cds--btn.cds--btn--expressive,
976
+ .c4p--action-set.cds--btn-set .c4p--action-set__action-button.cds--btn {
974
977
  max-width: none;
975
978
  }
976
979
 
@@ -2533,7 +2536,7 @@
2533
2536
  @media (prefers-reduced-motion: no-preference) {
2534
2537
  .c4p--cascade__element,
2535
2538
  .c4p--cascade__col {
2536
- /* stylelint-disable-next-line carbon/motion-duration-use -- Carbon animation duration defined above in $animationProps */
2539
+ /* stylelint-disable-next-line carbon/motion-duration-use, carbon/motion-easing-use -- Carbon animation duration defined above in $animationProps */
2537
2540
  animation: 240ms cubic-bezier(0.2, 0, 0.38, 0.9) 0s 1 fade;
2538
2541
  animation-fill-mode: forwards;
2539
2542
  opacity: 0;
@@ -2926,26 +2929,6 @@
2926
2929
  margin-bottom: 0;
2927
2930
  }
2928
2931
 
2929
- @keyframes side-panel-exit-left {
2930
- 0% {
2931
- opacity: 1;
2932
- transform: translateX(0);
2933
- }
2934
- 100% {
2935
- opacity: 0;
2936
- transform: translateX(calc(-1 * 30rem));
2937
- }
2938
- }
2939
- @keyframes side-panel-exit-right {
2940
- 0% {
2941
- opacity: 1;
2942
- transform: translateX(0);
2943
- }
2944
- 100% {
2945
- opacity: 0;
2946
- transform: translateX(30rem);
2947
- }
2948
- }
2949
2932
  .c4p--side-panel__container {
2950
2933
  --c4p--side-panel--subtitle-opacity: 1;
2951
2934
  --c4p--side-panel--title-container-height: 0;
@@ -2965,8 +2948,6 @@
2965
2948
  box-sizing: border-box;
2966
2949
  background-color: var(--cds-layer-01, #f4f4f4);
2967
2950
  color: var(--cds-text-primary, #161616);
2968
- transition: transform 240ms;
2969
- transition-timing-function: cubic-bezier(0.2, 0, 0.38, 0.9);
2970
2951
  }
2971
2952
  .c4p--side-panel__container.c4p--side-panel__container--xs {
2972
2953
  width: 16rem;
@@ -2980,37 +2961,13 @@
2980
2961
  max-width: 100%;
2981
2962
  }
2982
2963
  .c4p--side-panel__container.c4p--side-panel__container-right-placement.c4p--side-panel__container--xs {
2983
- width: 16rem;
2984
- max-width: 100%;
2985
2964
  right: 0;
2986
2965
  border-left: 1px solid var(--cds-border-subtle-02, #e0e0e0);
2987
2966
  }
2988
- @keyframes side-panel-entrance-right {
2989
- 0% {
2990
- opacity: 0;
2991
- transform: translateX(16rem);
2992
- }
2993
- 100% {
2994
- opacity: 1;
2995
- transform: translateX(0);
2996
- }
2997
- }
2998
2967
  .c4p--side-panel__container.c4p--side-panel__container-left-placement.c4p--side-panel__container--xs {
2999
- width: 16rem;
3000
- max-width: 100%;
3001
2968
  left: 0;
3002
2969
  border-right: 1px solid var(--cds-border-subtle-02, #e0e0e0);
3003
2970
  }
3004
- @keyframes side-panel-entrance-left {
3005
- 0% {
3006
- opacity: 0;
3007
- transform: translateX(-16rem);
3008
- }
3009
- 100% {
3010
- opacity: 1;
3011
- transform: translateX(0);
3012
- }
3013
- }
3014
2971
  .c4p--side-panel__container.c4p--side-panel__container--sm {
3015
2972
  width: 20rem;
3016
2973
  max-width: 100%;
@@ -3023,37 +2980,13 @@
3023
2980
  max-width: 100%;
3024
2981
  }
3025
2982
  .c4p--side-panel__container.c4p--side-panel__container-right-placement.c4p--side-panel__container--sm {
3026
- width: 20rem;
3027
- max-width: 100%;
3028
2983
  right: 0;
3029
2984
  border-left: 1px solid var(--cds-border-subtle-02, #e0e0e0);
3030
2985
  }
3031
- @keyframes side-panel-entrance-right {
3032
- 0% {
3033
- opacity: 0;
3034
- transform: translateX(20rem);
3035
- }
3036
- 100% {
3037
- opacity: 1;
3038
- transform: translateX(0);
3039
- }
3040
- }
3041
2986
  .c4p--side-panel__container.c4p--side-panel__container-left-placement.c4p--side-panel__container--sm {
3042
- width: 20rem;
3043
- max-width: 100%;
3044
2987
  left: 0;
3045
2988
  border-right: 1px solid var(--cds-border-subtle-02, #e0e0e0);
3046
2989
  }
3047
- @keyframes side-panel-entrance-left {
3048
- 0% {
3049
- opacity: 0;
3050
- transform: translateX(-20rem);
3051
- }
3052
- 100% {
3053
- opacity: 1;
3054
- transform: translateX(0);
3055
- }
3056
- }
3057
2990
  .c4p--side-panel__container.c4p--side-panel__container--md {
3058
2991
  width: 30rem;
3059
2992
  max-width: 100%;
@@ -3066,37 +2999,13 @@
3066
2999
  max-width: 100%;
3067
3000
  }
3068
3001
  .c4p--side-panel__container.c4p--side-panel__container-right-placement.c4p--side-panel__container--md {
3069
- width: 30rem;
3070
- max-width: 100%;
3071
3002
  right: 0;
3072
3003
  border-left: 1px solid var(--cds-border-subtle-02, #e0e0e0);
3073
3004
  }
3074
- @keyframes side-panel-entrance-right {
3075
- 0% {
3076
- opacity: 0;
3077
- transform: translateX(30rem);
3078
- }
3079
- 100% {
3080
- opacity: 1;
3081
- transform: translateX(0);
3082
- }
3083
- }
3084
3005
  .c4p--side-panel__container.c4p--side-panel__container-left-placement.c4p--side-panel__container--md {
3085
- width: 30rem;
3086
- max-width: 100%;
3087
3006
  left: 0;
3088
3007
  border-right: 1px solid var(--cds-border-subtle-02, #e0e0e0);
3089
3008
  }
3090
- @keyframes side-panel-entrance-left {
3091
- 0% {
3092
- opacity: 0;
3093
- transform: translateX(-30rem);
3094
- }
3095
- 100% {
3096
- opacity: 1;
3097
- transform: translateX(0);
3098
- }
3099
- }
3100
3009
  .c4p--side-panel__container.c4p--side-panel__container--lg {
3101
3010
  width: 40rem;
3102
3011
  max-width: 100%;
@@ -3109,37 +3018,13 @@
3109
3018
  max-width: 100%;
3110
3019
  }
3111
3020
  .c4p--side-panel__container.c4p--side-panel__container-right-placement.c4p--side-panel__container--lg {
3112
- width: 40rem;
3113
- max-width: 100%;
3114
3021
  right: 0;
3115
3022
  border-left: 1px solid var(--cds-border-subtle-02, #e0e0e0);
3116
3023
  }
3117
- @keyframes side-panel-entrance-right {
3118
- 0% {
3119
- opacity: 0;
3120
- transform: translateX(40rem);
3121
- }
3122
- 100% {
3123
- opacity: 1;
3124
- transform: translateX(0);
3125
- }
3126
- }
3127
3024
  .c4p--side-panel__container.c4p--side-panel__container-left-placement.c4p--side-panel__container--lg {
3128
- width: 40rem;
3129
- max-width: 100%;
3130
3025
  left: 0;
3131
3026
  border-right: 1px solid var(--cds-border-subtle-02, #e0e0e0);
3132
3027
  }
3133
- @keyframes side-panel-entrance-left {
3134
- 0% {
3135
- opacity: 0;
3136
- transform: translateX(-40rem);
3137
- }
3138
- 100% {
3139
- opacity: 1;
3140
- transform: translateX(0);
3141
- }
3142
- }
3143
3028
  .c4p--side-panel__container.c4p--side-panel__container--2xl {
3144
3029
  width: 75%;
3145
3030
  max-width: 100%;
@@ -3152,37 +3037,13 @@
3152
3037
  max-width: 100%;
3153
3038
  }
3154
3039
  .c4p--side-panel__container.c4p--side-panel__container-right-placement.c4p--side-panel__container--2xl {
3155
- width: 75%;
3156
- max-width: 100%;
3157
3040
  right: 0;
3158
3041
  border-left: 1px solid var(--cds-border-subtle-02, #e0e0e0);
3159
3042
  }
3160
- @keyframes side-panel-entrance-right {
3161
- 0% {
3162
- opacity: 0;
3163
- transform: translateX(75%);
3164
- }
3165
- 100% {
3166
- opacity: 1;
3167
- transform: translateX(0);
3168
- }
3169
- }
3170
3043
  .c4p--side-panel__container.c4p--side-panel__container-left-placement.c4p--side-panel__container--2xl {
3171
- width: 75%;
3172
- max-width: 100%;
3173
3044
  left: 0;
3174
3045
  border-right: 1px solid var(--cds-border-subtle-02, #e0e0e0);
3175
3046
  }
3176
- @keyframes side-panel-entrance-left {
3177
- 0% {
3178
- opacity: 0;
3179
- transform: translateX(-75%);
3180
- }
3181
- 100% {
3182
- opacity: 1;
3183
- transform: translateX(0);
3184
- }
3185
- }
3186
3047
  .c4p--side-panel__container.c4p--side-panel__container-with-action-toolbar.c4p--side-panel__with-condensed-header .c4p--side-panel__title-container {
3187
3048
  /* stylelint-disable-next-line max-nesting-depth */
3188
3049
  }
@@ -3315,10 +3176,7 @@
3315
3176
  .c4p--side-panel__container .c4p--side-panel__subtitle-text.c4p--side-panel__subtitle-text-no-animation {
3316
3177
  position: fixed;
3317
3178
  z-index: 2;
3318
- top: calc(
3319
- var(--c4p--side-panel--title-text-height) +
3320
- var(--c4p--side-panel--label-text-height) + 3rem
3321
- );
3179
+ top: calc(var(--c4p--side-panel--title-text-height) + var(--c4p--side-panel--label-text-height));
3322
3180
  background-color: var(--cds-layer-01, #f4f4f4);
3323
3181
  }
3324
3182
  .c4p--side-panel__container .c4p--side-panel__subtitle-text.c4p--side-panel__subtitle-text-no-animation.c4p--side-panel__subtitle-text-is-animating {
@@ -3333,7 +3191,6 @@
3333
3191
  }
3334
3192
  .c4p--side-panel__container .c4p--side-panel__title-container.c4p--side-panel__title-container--no-title-animation {
3335
3193
  position: fixed;
3336
- top: 3rem;
3337
3194
  height: calc(var(--c4p--side-panel--title-text-height) + var(--c4p--side-panel--label-text-height));
3338
3195
  }
3339
3196
  .c4p--side-panel__container .c4p--side-panel__inner-content {
@@ -3354,10 +3211,7 @@
3354
3211
  }
3355
3212
  .c4p--side-panel__container .c4p--side-panel__action-toolbar.c4p--side-panel__action-toolbar-no-animation {
3356
3213
  position: fixed;
3357
- top: calc(
3358
- var(--c4p--side-panel--title-text-height) +
3359
- var(--c4p--side-panel--subtitle-container-height) + 3rem
3360
- );
3214
+ top: calc(var(--c4p--side-panel--title-text-height) + var(--c4p--side-panel--subtitle-container-height));
3361
3215
  width: 100%;
3362
3216
  border-bottom: 1px solid var(--cds-layer-active-01, #c6c6c6);
3363
3217
  }
@@ -3382,8 +3236,7 @@
3382
3236
  padding: 0 1rem;
3383
3237
  margin-bottom: 0.5rem;
3384
3238
  background-color: var(--cds-layer-01, #f4f4f4);
3385
- transition: transform 150ms;
3386
- transition-timing-function: cubic-bezier(0.2, 0, 0.38, 0.9);
3239
+ transition: transform 150ms cubic-bezier(0.2, 0, 0.38, 0.9);
3387
3240
  }
3388
3241
  .c4p--side-panel__container .c4p--side-panel__action-toolbar .c4p--side-panel__action-toolbar-button {
3389
3242
  min-width: 2rem;
@@ -3514,8 +3367,6 @@
3514
3367
  width: 100%;
3515
3368
  height: 100%;
3516
3369
  background-color: var(--cds-overlay, rgba(22, 22, 22, 0.5));
3517
- transition: background-color 240ms;
3518
- transition-timing-function: cubic-bezier(0.2, 0, 0.38, 0.9);
3519
3370
  }
3520
3371
 
3521
3372
  .c4p--create-side-panel.c4p--side-panel__container .c4p--create-side-panel__content-text {
@@ -3662,7 +3513,7 @@
3662
3513
  /* stylelint-disable-next-line function-no-unknown */
3663
3514
  z-index: 9000;
3664
3515
  align-items: flex-end;
3665
- transition: visibility 0 linear, background-color 240ms cubic-bezier(0, 0, 0.3, 1), opacity 240ms cubic-bezier(0, 0, 0.3, 1);
3516
+ transition: visibility 0s linear, background-color 240ms cubic-bezier(0, 0, 0.3, 1), opacity 240ms cubic-bezier(0, 0, 0.3, 1);
3666
3517
  }
3667
3518
  @media (prefers-reduced-motion: reduce) {
3668
3519
  .c4p--tearsheet.is-visible {
@@ -4444,7 +4295,6 @@
4444
4295
 
4445
4296
  /* stylelint-disable max-nesting-depth */
4446
4297
  .c4p--add-select__selections.cds--structured-list {
4447
- border-top: 1px solid var(--cds-layer-accent-01, #e0e0e0);
4448
4298
  margin-bottom: 0;
4449
4299
  }
4450
4300
  .c4p--add-select__selections-wrapper {
@@ -4452,8 +4302,11 @@
4452
4302
  }
4453
4303
  .c4p--add-select__selections-cell-wrapper {
4454
4304
  display: flex;
4305
+ height: 3rem;
4455
4306
  align-items: center;
4456
4307
  justify-content: space-between;
4308
+ padding: 0 1rem;
4309
+ border-bottom: 1px solid var(--cds-layer-accent-01, #e0e0e0);
4457
4310
  }
4458
4311
  .c4p--add-select__selections-cell-title {
4459
4312
  display: block;
@@ -4467,17 +4320,21 @@
4467
4320
  display: block;
4468
4321
  color: var(--cds-text-secondary, #525252);
4469
4322
  }
4470
- .c4p--add-select__selections-cell:hover .c4p--add-select__selections-hidden-hover {
4323
+ .c4p--add-select__selections-cell {
4324
+ display: flex;
4325
+ flex-direction: column;
4326
+ justify-content: center;
4327
+ }
4328
+ .c4p--add-select__selections-cell:hover .c4p--add-select__selections-hidden-hover,
4329
+ .c4p--add-select__selections .cds--structured-list-row:focus-within .c4p--add-select__selections-hidden-hover {
4471
4330
  visibility: visible;
4472
4331
  }
4473
4332
  .c4p--add-select__selections-hidden-hover {
4474
4333
  visibility: hidden;
4475
4334
  }
4476
- .c4p--add-select__selections-row-selected {
4477
- background: #e5e5e5;
4478
- }
4479
- .c4p--add-select__selections-row-selected .c4p--add-select__selections-hidden-hover {
4480
- visibility: visible;
4335
+ .c4p--add-select__selections-row--selected.cds--structured-list-row {
4336
+ border-bottom: 1px solid var(--cds-layer-selected-01, #e0e0e0);
4337
+ background-color: var(--cds-layer-selected-01, #e0e0e0);
4481
4338
  }
4482
4339
  .c4p--add-select__selections-checkbox {
4483
4340
  display: flex;
@@ -4485,7 +4342,7 @@
4485
4342
  }
4486
4343
  .c4p--add-select__selections-checkbox-label-wrapper {
4487
4344
  display: flex;
4488
- margin-left: 0.5rem;
4345
+ margin-left: 1rem;
4489
4346
  }
4490
4347
  .c4p--add-select__selections-checkbox-label-text {
4491
4348
  display: flex;
@@ -4503,6 +4360,13 @@
4503
4360
  .c4p--add-select__selections-cell-icon {
4504
4361
  margin-right: 0.5rem;
4505
4362
  }
4363
+ .c4p--add-select__selections-row {
4364
+ border-left: 0.125rem solid transparent;
4365
+ }
4366
+ .c4p--add-select__selections-row-meta--selected {
4367
+ border-left: 0.125rem solid var(--cds-interactive, #0f62fe);
4368
+ background-color: var(--cds-layer-hover-01, #e8e8e8);
4369
+ }
4506
4370
 
4507
4371
  .c4p--add-select .c4p--add-select__selections-row:hover .c4p--add-select__selections-radio {
4508
4372
  color: var(--cds-interactive, #0f62fe);
@@ -4519,10 +4383,21 @@
4519
4383
  align-items: flex-end;
4520
4384
  justify-content: space-between;
4521
4385
  }
4386
+ .c4p--add-select__sub-header-multi {
4387
+ padding: 0 1rem;
4388
+ }
4389
+
4390
+ .c4p--add-select .cds--structured-list-row {
4391
+ border-bottom: 0;
4392
+ }
4393
+
4394
+ .c4p--add-select .cds--structured-list--selection .cds--structured-list-row:hover:not(.cds--structured-list-row--header-row):not(.cds--structured-list-row--selected) {
4395
+ border-bottom: 0;
4396
+ }
4522
4397
 
4523
4398
  .c4p--add-select__sidebar-header {
4524
4399
  display: flex;
4525
- padding: 1.5rem 1rem 0.5rem 1rem;
4400
+ padding: 2rem 1rem 0.5rem 1rem;
4526
4401
  border-bottom: 1px solid var(--cds-layer-accent-01, #e0e0e0);
4527
4402
  }
4528
4403
  .c4p--add-select__sidebar-header .c4p--add-select__sidebar-title {
@@ -4548,7 +4423,7 @@
4548
4423
  }
4549
4424
 
4550
4425
  .c4p--add-select__sidebar-body {
4551
- padding: 1rem;
4426
+ padding: 0 1rem;
4552
4427
  }
4553
4428
 
4554
4429
  .c4p--add-select .c4p--add-select__sidebar-item-header {
@@ -4581,18 +4456,44 @@
4581
4456
  .c4p--add-select__columns {
4582
4457
  display: flex;
4583
4458
  flex-direction: row;
4459
+ flex-grow: 1;
4584
4460
  overflow-x: auto;
4585
4461
  }
4462
+ .c4p--add-select__columns .c4p--add-select__selections-checkbox-label-wrapper {
4463
+ margin-left: 0.5rem;
4464
+ }
4465
+ .c4p--add-select__columns .c4p--add-select__selections-row.cds--structured-list-row {
4466
+ border-left: 0;
4467
+ }
4468
+ .c4p--add-select__columns .c4p--add-select__selections .c4p--add-select__selections-cell {
4469
+ padding: 0;
4470
+ }
4471
+ .c4p--add-select__columns .c4p--add-select__selections-cell-wrapper {
4472
+ height: auto;
4473
+ padding: 0 0.5rem;
4474
+ }
4475
+ .c4p--add-select__columns .c4p--add-select__tags {
4476
+ padding: 0 0.5rem;
4477
+ margin-bottom: 0;
4478
+ }
4479
+ .c4p--add-select__columns .c4p--add-select__selections-wrapper-multi {
4480
+ padding: 0;
4481
+ }
4482
+ .c4p--add-select__columns .c4p--add-select__selections.cds--structured-list {
4483
+ border-top: 0;
4484
+ }
4586
4485
 
4587
- .c4p--add-select .c4p--add-select__columns .cds--structured-list-td {
4588
- height: 0;
4589
- padding: 0 !important;
4486
+ .c4p--add-select__selections-wrapper-multi .c4p--add-select__selections-cell {
4487
+ padding: 0 1rem;
4488
+ }
4489
+
4490
+ .c4p--add-select__selections-row:first-child .c4p--add-select__selections-cell-wrapper {
4491
+ border-top: 1px solid var(--cds-border-subtle-01, #e0e0e0);
4590
4492
  }
4591
4493
 
4592
4494
  .c4p--add-select__column {
4593
4495
  overflow: auto;
4594
- max-width: 15rem;
4595
- flex: 1 0 15rem;
4496
+ flex: 0 0 20rem;
4596
4497
  padding: 1rem;
4597
4498
  border-top: 1px solid var(--cds-border-subtle-01, #e0e0e0);
4598
4499
  border-right: 1px solid var(--cds-border-subtle-01, #e0e0e0);
@@ -4610,13 +4511,13 @@
4610
4511
  border-bottom: 1px solid var(--cds-border-strong-01, #8d8d8d);
4611
4512
  }
4612
4513
 
4613
- .c4p--add-select__tag-container {
4514
+ .c4p--add-select__tags {
4614
4515
  display: flex;
4615
4516
  align-items: center;
4616
4517
  margin-top: 1rem;
4617
4518
  margin-bottom: 0.5rem;
4618
4519
  }
4619
- .c4p--add-select__tag-container-label {
4520
+ .c4p--add-select__tags-label {
4620
4521
  margin-right: 0.5rem;
4621
4522
  }
4622
4523
 
@@ -4691,13 +4592,6 @@ button.c4p--add-select__global-filter-toggle--open {
4691
4592
  letter-spacing: var(--cds-productive-heading-01-letter-spacing, 0.16px);
4692
4593
  }
4693
4594
 
4694
- .c4p--add-select .cds--structured-list-td {
4695
- height: 3rem;
4696
- padding-top: 0;
4697
- padding-bottom: 0;
4698
- vertical-align: middle;
4699
- }
4700
-
4701
4595
  .c4p--add-select__meta-panel p.c4p--add-select__meta-panel-entry-body {
4702
4596
  font-size: var(--cds-body-short-01-font-size, 0.875rem);
4703
4597
  font-weight: var(--cds-body-short-01-font-weight, 400);
@@ -4705,13 +4599,16 @@ button.c4p--add-select__global-filter-toggle--open {
4705
4599
  letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
4706
4600
  }
4707
4601
 
4708
- .c4p--add-select__tag-container .cds--tag {
4602
+ .c4p--add-select__selections .cds--list-box__menu {
4603
+ left: auto;
4604
+ }
4605
+
4606
+ .c4p--add-select__tags .cds--tag {
4709
4607
  margin: 0;
4710
4608
  }
4711
4609
 
4712
4610
  .c4p--add-select.c4p--tearsheet .c4p--tearsheet__influencer {
4713
- max-width: 29rem;
4714
- flex: 0 0 50%;
4611
+ flex-basis: 22.5rem;
4715
4612
  }
4716
4613
 
4717
4614
  .c4p--add-select.c4p--tearsheet .c4p--tearsheet__header-description {
@@ -4723,6 +4620,10 @@ button.c4p--add-select__global-filter-toggle--open {
4723
4620
  flex-direction: column;
4724
4621
  }
4725
4622
 
4623
+ .c4p--add-select.c4p--add-select__multi .c4p--action-set.cds--btn-set.c4p--action-set--max .c4p--action-set__action-button {
4624
+ max-width: 11.25rem;
4625
+ }
4626
+
4726
4627
  .c4p--add-select .c4p--add-select__items-label {
4727
4628
  font-size: var(--cds-productive-heading-01-font-size, 0.875rem);
4728
4629
  font-weight: var(--cds-productive-heading-01-font-weight, 600);
@@ -4763,8 +4664,35 @@ button.c4p--add-select__global-filter-toggle--open {
4763
4664
  padding-left: 0.5rem;
4764
4665
  }
4765
4666
 
4766
- .cds--tooltip,
4767
- .cds--overflow-menu-options {
4667
+ .c4p--add-select__multi .c4p--empty-state {
4668
+ max-width: 16rem;
4669
+ margin-top: 3rem;
4670
+ }
4671
+
4672
+ .c4p--add-select .cds--accordion__arrow {
4673
+ transform: rotate(0deg);
4674
+ }
4675
+
4676
+ .c4p--add-select .cds--accordion__item--active .cds--accordion__arrow {
4677
+ transform: rotate(90deg);
4678
+ }
4679
+
4680
+ .c4p--add-select .cds--accordion--start .cds--accordion__arrow {
4681
+ margin: 0 0 0 1rem;
4682
+ }
4683
+
4684
+ .c4p--add-select .cds--accordion--start .cds--accordion__title {
4685
+ margin: 0 1rem 0 0.5rem;
4686
+ }
4687
+
4688
+ .c4p--add-select .cds--accordion__item--active .cds--accordion__content {
4689
+ padding-top: 0;
4690
+ padding-bottom: 0;
4691
+ margin-top: 0.5rem;
4692
+ }
4693
+
4694
+ .c4p--add-select .cds--tooltip,
4695
+ .c4p--add-select .cds--overflow-menu-options {
4768
4696
  z-index: 9000;
4769
4697
  }
4770
4698
 
@@ -4909,6 +4837,10 @@ button.c4p--add-select__global-filter-toggle--open {
4909
4837
  --cds-helper-text-01-font-size: 0.75rem;
4910
4838
  --cds-helper-text-01-line-height: 1.33333;
4911
4839
  --cds-helper-text-01-letter-spacing: 0.32px;
4840
+ --cds-helper-text-02-font-size: carbon--type-scale(2);
4841
+ --cds-helper-text-02-font-weight: carbon--font-weight("regular");
4842
+ --cds-helper-text-02-line-height: 1.28572;
4843
+ --cds-helper-text-02-letter-spacing: 0.16px;
4912
4844
  --cds-body-short-01-font-size: 0.875rem;
4913
4845
  --cds-body-short-01-font-weight: 400;
4914
4846
  --cds-body-short-01-line-height: 1.28572;
@@ -5147,8 +5079,7 @@ button.c4p--add-select__global-filter-toggle--open {
5147
5079
  max-height: 38.5rem;
5148
5080
  background-color: var(--cds-background, #ffffff);
5149
5081
  color: var(--cds-text-primary, #161616);
5150
- transition: transform 110ms;
5151
- transition-timing-function: cubic-bezier(0.2, 0, 0.38, 0.9);
5082
+ transition: transform 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
5152
5083
  }
5153
5084
  .c4p--notifications-panel__container .c4p--notifications-panel__header-container {
5154
5085
  position: sticky;
@@ -5222,8 +5153,7 @@ button.c4p--add-select__global-filter-toggle--open {
5222
5153
  background-color: var(--cds-background, #ffffff);
5223
5154
  cursor: pointer;
5224
5155
  text-align: left;
5225
- transition: background-color 240ms;
5226
- transition-timing-function: cubic-bezier(0.2, 0, 0.38, 0.9);
5156
+ transition: background-color 240ms cubic-bezier(0.2, 0, 0.38, 0.9);
5227
5157
  }
5228
5158
  .c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__notification-title {
5229
5159
  margin-bottom: 0.25rem;
@@ -5336,8 +5266,7 @@ button.c4p--add-select__global-filter-toggle--open {
5336
5266
  margin: 0 auto;
5337
5267
  background-color: var(--cds-layer-02, #ffffff);
5338
5268
  content: "";
5339
- transition: background-color 240ms;
5340
- transition-timing-function: cubic-bezier(0.2, 0, 0.38, 0.9);
5269
+ transition: background-color 240ms cubic-bezier(0.2, 0, 0.38, 0.9);
5341
5270
  }
5342
5271
  .c4p--notifications-panel__container .c4p--notifications-panel__notification-today:hover + .c4p--notifications-panel__notification-today:not(:first-of-type):before,
5343
5272
  .c4p--notifications-panel__container .c4p--notifications-panel__notification-yesterday:hover + .c4p--notifications-panel__notification-yesterday:not(:first-of-type):before,
@@ -7879,10 +7808,6 @@ button.c4p--add-select__global-filter-toggle--open {
7879
7808
  padding-right: 1rem;
7880
7809
  }
7881
7810
 
7882
- .c4p--remove-modal .cds--modal-close {
7883
- display: none;
7884
- }
7885
-
7886
7811
  .c4p--remove-modal__body {
7887
7812
  padding-right: 20%;
7888
7813
  margin-bottom: 1rem;
@@ -8685,6 +8610,10 @@ button.c4p--add-select__global-filter-toggle--open {
8685
8610
  --cds-helper-text-01-font-size: 0.75rem;
8686
8611
  --cds-helper-text-01-line-height: 1.33333;
8687
8612
  --cds-helper-text-01-letter-spacing: 0.32px;
8613
+ --cds-helper-text-02-font-size: carbon--type-scale(2);
8614
+ --cds-helper-text-02-font-weight: carbon--font-weight("regular");
8615
+ --cds-helper-text-02-line-height: 1.28572;
8616
+ --cds-helper-text-02-letter-spacing: 0.16px;
8688
8617
  --cds-body-short-01-font-size: 0.875rem;
8689
8618
  --cds-body-short-01-font-weight: 400;
8690
8619
  --cds-body-short-01-line-height: 1.28572;
@@ -9057,6 +8986,10 @@ button.c4p--add-select__global-filter-toggle--open {
9057
8986
  --cds-helper-text-01-font-size: 0.75rem;
9058
8987
  --cds-helper-text-01-line-height: 1.33333;
9059
8988
  --cds-helper-text-01-letter-spacing: 0.32px;
8989
+ --cds-helper-text-02-font-size: carbon--type-scale(2);
8990
+ --cds-helper-text-02-font-weight: carbon--font-weight("regular");
8991
+ --cds-helper-text-02-line-height: 1.28572;
8992
+ --cds-helper-text-02-letter-spacing: 0.16px;
9060
8993
  --cds-body-short-01-font-size: 0.875rem;
9061
8994
  --cds-body-short-01-font-weight: 400;
9062
8995
  --cds-body-short-01-line-height: 1.28572;
@@ -9818,7 +9751,9 @@ button.c4p--add-select__global-filter-toggle--open {
9818
9751
  display: inline-block;
9819
9752
  overflow: hidden;
9820
9753
  width: calc(100% - var(--c4p--inline-edit--toolbar-width) - 1rem);
9821
- max-width: calc(100% - var(--c4p--inline-edit--toolbar-width) - 1rem);
9754
+ max-width: calc(
9755
+ 100% - var(--c4p--inline-edit--toolbar-width) - 1rem
9756
+ );
9822
9757
  min-height: var(--c4p--inline-edit--size);
9823
9758
  /* stylelint-disable-next-line carbon/layout-token-use */
9824
9759
  margin-right: var(--c4p--inline-edit--toolbar-width);
@@ -10021,31 +9956,99 @@ button.c4p--add-select__global-filter-toggle--open {
10021
9956
  color: var(--cds-support-error, #da1e28);
10022
9957
  }
10023
9958
 
10024
- .c4p--data-spreadsheet {
10025
- --c4p--data-spreadsheet--total-width: 0;
10026
- display: inline-block;
10027
- border-spacing: 0;
10028
- /* stylelint-disable-next-line max-nesting-depth */
9959
+ .c4p--inline-edit-v2 {
9960
+ display: flex;
9961
+ align-items: center;
9962
+ background: transparent;
9963
+ cursor: pointer;
10029
9964
  }
10030
- .c4p--data-spreadsheet.c4p--data-spreadsheet__container-has-focus {
10031
- outline: 2px solid var(--cds-link-inverse, #78a9ff);
9965
+
9966
+ .c4p--inline-edit-v2-readonly {
9967
+ cursor: not-allowed;
10032
9968
  }
10033
- .c4p--data-spreadsheet .c4p--data-spreadsheet__header--container {
10034
- position: relative;
9969
+
9970
+ .c4p--inline-edit-v2:hover {
9971
+ background: var(--cds-field-01, #f4f4f4);
10035
9972
  }
10036
- .c4p--data-spreadsheet .c4p--data-spreadsheet__tr :last-child .c4p--data-spreadsheet__body--td .c4p--data-spreadsheet__td {
10037
- border-bottom: 0;
9973
+
9974
+ .c4p--inline-edit-v2:hover .c4p--inline-edit-v2__btn-edit {
9975
+ visibility: visible;
10038
9976
  }
10039
- .c4p--data-spreadsheet .c4p--data-spreadsheet__th,
10040
- .c4p--data-spreadsheet .c4p--data-spreadsheet__td {
10041
- font-size: var(--cds-body-short-01-font-size, 0.875rem);
10042
- font-weight: var(--cds-body-short-01-font-weight, 400);
10043
- line-height: var(--cds-body-short-01-line-height, 1.28572);
10044
- letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
10045
- width: 100%;
10046
- height: 100%;
10047
- padding: 0 0.5rem;
10048
- border: 0;
9977
+
9978
+ .c4p--inline-edit-v2__btn-edit {
9979
+ visibility: hidden;
9980
+ }
9981
+
9982
+ .c4p--inline-edit-v2-focused {
9983
+ background: var(--cds-field-01, #f4f4f4);
9984
+ outline: 2px solid var(--cds-focus, #0f62fe);
9985
+ }
9986
+
9987
+ .c4p--inline-edit-v2__text-input {
9988
+ flex: 1;
9989
+ }
9990
+
9991
+ .c4p--inline-edit-v2__text-input-label {
9992
+ display: none;
9993
+ }
9994
+
9995
+ .c4p--inline-edit-v2__warning-icon {
9996
+ /* stylelint-disable-next-line carbon/layout-token-use */
9997
+ margin-right: 0.4375rem;
9998
+ color: var(--cds-support-error, #da1e28);
9999
+ }
10000
+
10001
+ .c4p--inline-edit-v2__warning-text {
10002
+ font-size: var(--cds-label-01-font-size, 0.75rem);
10003
+ font-weight: var(--cds-label-01-font-weight, 400);
10004
+ line-height: var(--cds-label-01-line-height, 1.33333);
10005
+ letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
10006
+ margin-top: 0.5rem;
10007
+ color: var(--cds-support-error, #da1e28);
10008
+ }
10009
+
10010
+ .c4p--inline-edit-v2__text-input.cds--text-input {
10011
+ border: none;
10012
+ background: transparent;
10013
+ cursor: pointer;
10014
+ outline: none;
10015
+ }
10016
+
10017
+ .c4p--inline-edit-v2-readonly .c4p--inline-edit-v2__text-input.cds--text-input,
10018
+ .c4p--inline-edit-v2-readonly .cds--btn.cds--btn--icon-only.cds--tooltip__trigger {
10019
+ cursor: not-allowed;
10020
+ }
10021
+
10022
+ .c4p--inline-edit-v2__text-input.cds--text-input:focus,
10023
+ .c4p--inline-edit-v2__text-input.cds--text-input:active {
10024
+ outline: none;
10025
+ }
10026
+
10027
+ .c4p--data-spreadsheet {
10028
+ --c4p--data-spreadsheet--total-width: 0;
10029
+ display: inline-block;
10030
+ border-spacing: 0;
10031
+ /* stylelint-disable-next-line max-nesting-depth */
10032
+ }
10033
+ .c4p--data-spreadsheet.c4p--data-spreadsheet__container-has-focus {
10034
+ outline: 2px solid var(--cds-link-inverse, #78a9ff);
10035
+ }
10036
+ .c4p--data-spreadsheet .c4p--data-spreadsheet__header--container {
10037
+ position: relative;
10038
+ }
10039
+ .c4p--data-spreadsheet .c4p--data-spreadsheet__tr :last-child .c4p--data-spreadsheet__body--td .c4p--data-spreadsheet__td {
10040
+ border-bottom: 0;
10041
+ }
10042
+ .c4p--data-spreadsheet .c4p--data-spreadsheet__th,
10043
+ .c4p--data-spreadsheet .c4p--data-spreadsheet__td {
10044
+ font-size: var(--cds-body-short-01-font-size, 0.875rem);
10045
+ font-weight: var(--cds-body-short-01-font-weight, 400);
10046
+ line-height: var(--cds-body-short-01-line-height, 1.28572);
10047
+ letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
10048
+ width: 100%;
10049
+ height: 100%;
10050
+ padding: 0 0.5rem;
10051
+ border: 0;
10049
10052
  margin: 0;
10050
10053
  color: var(--cds-text-primary, #161616);
10051
10054
  font-family: inherit;
@@ -10309,6 +10312,11 @@ button.c4p--add-select__global-filter-toggle--open {
10309
10312
  align-items: center;
10310
10313
  color: var(--cds-text-primary, #161616);
10311
10314
  }
10315
+ .c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-center .c4p--datagrid__head .c4p--datagrid__head-select-all.c4p--datagrid__checkbox-cell.c4p--datagrid__checkbox-cell-sticky-left {
10316
+ position: sticky;
10317
+ z-index: 1;
10318
+ left: 0;
10319
+ }
10312
10320
  .c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-center .c4p--datagrid__cell {
10313
10321
  align-items: center;
10314
10322
  padding-top: 0;
@@ -10325,6 +10333,11 @@ button.c4p--add-select__global-filter-toggle--open {
10325
10333
  align-items: center;
10326
10334
  padding-top: 0;
10327
10335
  }
10336
+ .c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-center td.cds--table-column-checkbox.c4p--datagrid__checkbox-cell-sticky-left,
10337
+ .c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-center th.cds--table-column-checkbox.c4p--datagrid__checkbox-cell-sticky-left {
10338
+ position: sticky;
10339
+ left: 0;
10340
+ }
10328
10341
  .c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-center .c4p--datagrid__checkbox-cell th.cds--table-column-checkbox {
10329
10342
  display: flex;
10330
10343
  height: 100%;
@@ -10384,9 +10397,12 @@ button.c4p--add-select__global-filter-toggle--open {
10384
10397
  height: 100%;
10385
10398
  overflow-x: auto;
10386
10399
  }
10387
- .c4p--datagrid__grid-container .c4p--datagrid__table-simple {
10388
- overflow: hidden;
10400
+ .c4p--datagrid__grid-container table.c4p--datagrid__table-simple {
10401
+ display: flex;
10402
+ overflow: auto;
10389
10403
  max-height: 100%;
10404
+ flex-direction: column;
10405
+ background-color: var(--cds-layer-01, #f4f4f4);
10390
10406
  }
10391
10407
  .c4p--datagrid__grid-container .c4p--datagrid__head {
10392
10408
  display: flex;
@@ -10417,6 +10433,12 @@ button.c4p--add-select__global-filter-toggle--open {
10417
10433
  text-overflow: ellipsis;
10418
10434
  white-space: nowrap;
10419
10435
  }
10436
+ .c4p--datagrid__grid-container .c4p--datagrid__defaultStringRenderer.c4p--datagrid__defaultStringRenderer--multiline {
10437
+ display: -webkit-box;
10438
+ -webkit-box-orient: vertical;
10439
+ -webkit-line-clamp: 2;
10440
+ white-space: initial;
10441
+ }
10420
10442
  .c4p--datagrid__grid-container .c4p--datagrid__expanded-row {
10421
10443
  display: flex;
10422
10444
  overflow: hidden;
@@ -10468,10 +10490,6 @@ button.c4p--add-select__global-filter-toggle--open {
10468
10490
  flex: 1 1 auto;
10469
10491
  }
10470
10492
 
10471
- .c4p--datagrid__with-pagination table tr:last-of-type > td {
10472
- border-bottom: none;
10473
- }
10474
-
10475
10493
  .c4p--datagrid__resizer {
10476
10494
  position: absolute;
10477
10495
  z-index: 1;
@@ -10511,6 +10529,12 @@ button.c4p--add-select__global-filter-toggle--open {
10511
10529
  .c4p--datagrid__head-hidden-select-all {
10512
10530
  padding-right: 2.5rem;
10513
10531
  }
10532
+ .c4p--datagrid__head-hidden-select-all.c4p--datagrid__select-all-sticky-left {
10533
+ position: sticky;
10534
+ z-index: 1;
10535
+ left: 0;
10536
+ background-color: var(--cds-layer-accent-01, #e0e0e0);
10537
+ }
10514
10538
 
10515
10539
  .c4p--datagrid__simple-body {
10516
10540
  position: relative;
@@ -10534,15 +10558,6 @@ button.c4p--add-select__global-filter-toggle--open {
10534
10558
  min-width: 0 !important;
10535
10559
  }
10536
10560
 
10537
- .c4p--datagrid__table-simple::-webkit-scrollbar {
10538
- width: 6px;
10539
- background-color: var(--cds-background, #ffffff);
10540
- }
10541
-
10542
- .c4p--datagrid__table-simple::-webkit-scrollbar-thumb {
10543
- background-color: var(--cds-text-placeholder, rgba(22, 22, 22, 0.4));
10544
- }
10545
-
10546
10561
  .c4p--datagrid__sticky.c4p--datagrid__simple-body {
10547
10562
  overflow: auto;
10548
10563
  }
@@ -10604,8 +10619,22 @@ button.c4p--add-select__global-filter-toggle--open {
10604
10619
  max-height: 100%;
10605
10620
  }
10606
10621
 
10607
- .c4p--datagrid__carbon-row-expanded.c4p--datagrid__carbon-row-expanded-hover-active ~ .c4p--datagrid__carbon-nested-row {
10608
- border-left: 1px solid var(--cds-button-primary, #0f62fe);
10622
+ .c4p--datagrid__carbon-row-expanded {
10623
+ position: relative;
10624
+ }
10625
+ .c4p--datagrid__carbon-row-expanded.c4p--datagrid__carbon-row-expanded-hover-active::before {
10626
+ position: absolute;
10627
+ z-index: 2;
10628
+ /* stylelint-disable-next-line carbon/layout-token-use */
10629
+ top: var(--c4p--datagrid--row-height);
10630
+ /* stylelint-disable-next-line carbon/layout-token-use */
10631
+ left: calc(
10632
+ var(--c4p--datagrid--indicator-offset-amount) + 1rem
10633
+ );
10634
+ width: 1px;
10635
+ height: var(--c4p--datagrid--indicator-height);
10636
+ border-left: 1px solid var(--cds-background-brand, #0f62fe);
10637
+ content: "";
10609
10638
  }
10610
10639
 
10611
10640
  .c4p--datagrid .cds--data-table-header {
@@ -10690,10 +10719,53 @@ button.c4p--add-select__global-filter-toggle--open {
10690
10719
  margin: 0;
10691
10720
  }
10692
10721
 
10722
+ .c4p--datagrid .c4p--button-menu {
10723
+ height: 3rem;
10724
+ }
10725
+
10726
+ .c4p--datagrid .c4p--datagrid__row-size-button {
10727
+ display: flex;
10728
+ width: 3rem;
10729
+ height: 3rem;
10730
+ justify-content: center;
10731
+ }
10732
+
10733
+ .cds--body--with-modal-open .c4p--datagrid__grid-container {
10734
+ overflow: hidden;
10735
+ height: 100vh;
10736
+ }
10737
+
10738
+ .c4p--datagrid .cds--modal {
10739
+ width: 100%;
10740
+ }
10741
+
10742
+ .cds--overflow-menu.c4p--datagrid__toolbar-menu__trigger {
10743
+ flex-shrink: 0;
10744
+ background-color: var(--cds-interactive, #0f62fe);
10745
+ }
10746
+
10747
+ .cds--overflow-menu.c4p--datagrid__toolbar-menu__trigger svg {
10748
+ fill: var(--cds-background, #ffffff);
10749
+ }
10750
+
10751
+ .cds--overflow-menu.c4p--datagrid__toolbar-menu__trigger:hover,
10752
+ .cds--overflow-menu.c4p--datagrid__toolbar-menu__trigger.cds--overflow-menu--open:hover,
10753
+ .cds--overflow-menu.c4p--datagrid__toolbar-menu__trigger.cds--overflow-menu--open {
10754
+ background-color: var(--cds-button-primary-hover, #0050e6);
10755
+ }
10756
+
10757
+ .c4p--datagrid__toolbar-options.cds--overflow-menu-options::after {
10758
+ background-color: transparent;
10759
+ }
10760
+
10761
+ .c4p--datagrid__mobile-toolbar-modal .cds--modal-container {
10762
+ position: absolute;
10763
+ }
10764
+
10693
10765
  /*
10694
10766
  * Licensed Materials - Property of IBM
10695
10767
  * 5724-Q36
10696
- * (c) Copyright IBM Corp. 2020 - 2021
10768
+ * (c) Copyright IBM Corp. 2020 - 2022
10697
10769
  * US Government Users Restricted Rights - Use, duplication or disclosure
10698
10770
  * restricted by GSA ADP Schedule Contract with IBM Corp.
10699
10771
  */
@@ -10704,6 +10776,33 @@ button.c4p--add-select__global-filter-toggle--open {
10704
10776
  border-bottom: 1px solid var(--cds-layer-accent-01, #e0e0e0);
10705
10777
  }
10706
10778
 
10779
+ .c4p--datagrid .c4p--datagrid__expander-icon {
10780
+ transition: transform 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
10781
+ }
10782
+
10783
+ .c4p--datagrid .c4p--datagrid__expander-icon--open {
10784
+ transform: rotate(90deg);
10785
+ }
10786
+
10787
+ .c4p--datagrid__expanded-row .c4p--datagrid__carbon-row-expanded td:first-child {
10788
+ border-bottom: none;
10789
+ }
10790
+
10791
+ .c4p--datagrid .c4p--datagrid__carbon-row-expandable {
10792
+ position: relative;
10793
+ }
10794
+
10795
+ .c4p--datagrid tr.c4p--datagrid__carbon-nested-row + :not(tr.c4p--datagrid__carbon-nested-row)::before {
10796
+ position: absolute;
10797
+ /* stylelint-disable-next-line carbon/layout-token-use */
10798
+ top: -1px;
10799
+ left: 0;
10800
+ width: 100%;
10801
+ height: 1px;
10802
+ background-color: var(--cds-border-subtle);
10803
+ content: "";
10804
+ }
10805
+
10707
10806
  /*
10708
10807
  * Licensed Materials - Property of IBM
10709
10808
  * 5724-Q36
@@ -10832,14 +10931,36 @@ button.c4p--add-select__global-filter-toggle--open {
10832
10931
  /* stylelint-disable-next-line declaration-no-important */
10833
10932
  position: sticky !important;
10834
10933
  right: 0;
10835
- box-shadow: -2px 1px 3px var(--cds-overlay, rgba(22, 22, 22, 0.5));
10934
+ display: flex;
10935
+ align-items: center;
10936
+ border-left: 1px solid var(--cds-layer-accent-01, #e0e0e0);
10836
10937
  }
10837
10938
 
10838
10939
  .c4p--datagrid__right-sticky-column-header {
10839
10940
  /* stylelint-disable-next-line declaration-no-important */
10840
10941
  position: sticky !important;
10841
10942
  right: 0;
10842
- box-shadow: -2px 1px 3px var(--cds-overlay, rgba(22, 22, 22, 0.5));
10943
+ }
10944
+
10945
+ .c4p--datagrid__left-sticky-column-cell {
10946
+ /* stylelint-disable-next-line declaration-no-important */
10947
+ position: sticky !important;
10948
+ left: 0;
10949
+ display: flex;
10950
+ align-items: center;
10951
+ border-right: 1px solid var(--cds-layer-accent-01, #e0e0e0);
10952
+ }
10953
+
10954
+ .c4p--datagrid__left-sticky-column-header {
10955
+ /* stylelint-disable-next-line declaration-no-important */
10956
+ position: sticky !important;
10957
+ z-index: 1;
10958
+ left: 0;
10959
+ }
10960
+
10961
+ .c4p--datagrid__left-sticky-column-cell.c4p--datagrid__left-sticky-column-cell--with-extra-select-column,
10962
+ .c4p--datagrid__left-sticky-column-header.c4p--datagrid__left-sticky-column-header--with-extra-select-column {
10963
+ left: 2.5rem;
10843
10964
  }
10844
10965
 
10845
10966
  .c4p--datagrid__sticky-noShadow {
@@ -10855,6 +10976,12 @@ button.c4p--add-select__global-filter-toggle--open {
10855
10976
  right: 6px !important;
10856
10977
  }
10857
10978
 
10979
+ .c4p--datagrid__select-all-toggle-on.c4p--datagrid__select-all-sticky-left {
10980
+ position: sticky;
10981
+ z-index: 1;
10982
+ left: 0;
10983
+ }
10984
+
10858
10985
  /*
10859
10986
  * Licensed Materials - Property of IBM
10860
10987
  * 5724-Q36
@@ -10877,6 +11004,18 @@ button.c4p--add-select__global-filter-toggle--open {
10877
11004
  margin-bottom: 0.5rem;
10878
11005
  }
10879
11006
 
11007
+ .c4p--datagrid .c4p--datagrid__disabled-row-action-button {
11008
+ cursor: not-allowed;
11009
+ }
11010
+
11011
+ .c4p--datagrid .c4p--datagrid__disabled-row-action {
11012
+ pointer-events: none;
11013
+ }
11014
+
11015
+ .c4p--datagrid .c4p--datagrid__disabled-row-action svg {
11016
+ fill: var(--cds-layer-selected-disabled, #8d8d8d);
11017
+ }
11018
+
10880
11019
  /*
10881
11020
  * Licensed Materials - Property of IBM
10882
11021
  * 5724-Q36
@@ -10888,21 +11027,30 @@ button.c4p--add-select__global-filter-toggle--open {
10888
11027
  position: inherit;
10889
11028
  display: flex;
10890
11029
  flex-flow: column;
10891
- /* stylelint-disable-next-line declaration-no-important */
10892
- padding-top: 0 !important;
11030
+ padding: 0;
11031
+ margin: 0;
10893
11032
  }
10894
11033
 
10895
- .c4p--datagrid__customize-columns-checkbox {
11034
+ .c4p--datagrid__customize-columns-checkbox-wrapper {
11035
+ margin-bottom: 0;
11036
+ }
11037
+
11038
+ .c4p--datagrid__customize-columns-checkbox-wrapper {
10896
11039
  display: flex;
10897
11040
  justify-content: center;
10898
- /* stylelint-disable-next-line declaration-no-important */
10899
- margin-bottom: 0 !important;
10900
11041
  }
10901
11042
 
10902
11043
  .c4p--datagrid__customize-columns-modal--actions {
10903
11044
  display: flex;
11045
+ height: 3rem;
10904
11046
  flex-flow: row;
10905
- margin-bottom: 1.5rem;
11047
+ background-color: var(--cds-field-02, #ffffff);
11048
+ }
11049
+
11050
+ .c4p--datagrid__customize-columns-modal--actions input[role=searchbox] {
11051
+ height: 3rem;
11052
+ padding-left: 2.5rem;
11053
+ border-bottom: none;
10906
11054
  }
10907
11055
 
10908
11056
  .c4p--datagrid__customize-columns-modal--actions > button {
@@ -10910,6 +11058,7 @@ button.c4p--add-select__global-filter-toggle--open {
10910
11058
  }
10911
11059
 
10912
11060
  .c4p--datagrid__customize-columns-instructions {
11061
+ padding-left: 1rem;
10913
11062
  margin-bottom: 1.5rem;
10914
11063
  font-size: var(--cds-body-long-01-font-size, 0.875rem);
10915
11064
  font-weight: var(--cds-body-long-01-font-weight, 400);
@@ -10923,6 +11072,36 @@ button.c4p--add-select__global-filter-toggle--open {
10923
11072
  overflow: auto;
10924
11073
  }
10925
11074
 
11075
+ .c4p--datagrid__customize-columns-select-all {
11076
+ display: flex;
11077
+ height: 3rem;
11078
+ align-items: center;
11079
+ padding-left: 2.5rem;
11080
+ border-bottom: 1px solid var(--cds-layer-active);
11081
+ background-color: var(--cds-layer-01, #f4f4f4);
11082
+ }
11083
+
11084
+ .c4p--datagrid__customize-columns-select-all:hover {
11085
+ background-color: var(--cds-layer-hover-01, #e8e8e8);
11086
+ }
11087
+
11088
+ .c4p--datagrid__customize-columns-select-all-selected {
11089
+ display: flex;
11090
+ height: 3rem;
11091
+ align-items: center;
11092
+ padding-left: 2.5rem;
11093
+ border-bottom: 1px solid var(--cds-layer-active);
11094
+ background-color: var(--cds-layer-selected-01, #e0e0e0);
11095
+ }
11096
+
11097
+ .c4p--datagrid__customize-columns-select-all-selected:hover {
11098
+ background-color: var(--cds-background-selected-hover, rgba(141, 141, 141, 0.32));
11099
+ }
11100
+
11101
+ .c4p--datagrid .c4p--datagrid__customize-columns-modal .cds--modal-content {
11102
+ margin-bottom: 0;
11103
+ }
11104
+
10926
11105
  /*
10927
11106
  * Licensed Materials - Property of IBM
10928
11107
  * 5724-Q36
@@ -10931,7 +11110,6 @@ button.c4p--add-select__global-filter-toggle--open {
10931
11110
  * restricted by GSA ADP Schedule Contract with IBM Corp.
10932
11111
  */
10933
11112
  .c4p--datagrid__row-size-dropdown {
10934
- position: absolute;
10935
11113
  padding: 1rem;
10936
11114
  background-color: var(--cds-background, #ffffff);
10937
11115
  box-shadow: 1px 4px 8px -3px var(--cds-overlay, rgba(22, 22, 22, 0.5)), -1px 6px 8px -5px var(--cds-overlay, rgba(22, 22, 22, 0.5));
@@ -10942,6 +11120,11 @@ button.c4p--add-select__global-filter-toggle--open {
10942
11120
  box-shadow: 1px 4px 8px -3px var(--cds-overlay, rgba(22, 22, 22, 0.5)), -1px 6px 8px -5px var(--cds-overlay, rgba(22, 22, 22, 0.5));
10943
11121
  }
10944
11122
 
11123
+ .c4p--datagrid .cds--popover--bottom-right.c4p--datagrid__row-height-settings-popover .cds--popover-caret {
11124
+ /* stylelint-disable-next-line carbon/layout-token-use */
11125
+ left: -4px;
11126
+ }
11127
+
10945
11128
  /*
10946
11129
  * Licensed Materials - Property of IBM
10947
11130
  * 5724-Q36
@@ -10965,68 +11148,490 @@ th.c4p--datagrid__select-all-toggle-on {
10965
11148
  justify-content: center;
10966
11149
  }
10967
11150
 
10968
- th.c4p--datagrid__select-all-toggle-on.button {
10969
- margin-left: 0.125rem;
11151
+ th.c4p--datagrid__select-all-toggle-on.button {
11152
+ margin-left: 0.125rem;
11153
+ }
11154
+
11155
+ /*
11156
+ * Licensed Materials - Property of IBM
11157
+ * 5724-Q36
11158
+ * (c) Copyright IBM Corp. 2022
11159
+ * US Government Users Restricted Rights - Use, duplication or disclosure
11160
+ * restricted by GSA ADP Schedule Contract with IBM Corp.
11161
+ */
11162
+ .c4p--datagrid .c4p--datagrid__expanded-row-content {
11163
+ position: relative;
11164
+ padding: 1rem 1rem 1.5rem 3rem;
11165
+ }
11166
+
11167
+ .c4p--datagrid .c4p--datagrid__expanded-row-content::before {
11168
+ position: absolute;
11169
+ /* stylelint-disable-next-line carbon/layout-token-use */
11170
+ top: -1px;
11171
+ right: 0;
11172
+ width: calc(100% - 3rem);
11173
+ height: 1px;
11174
+ background-color: var(--cds-layer-accent);
11175
+ content: "";
11176
+ }
11177
+
11178
+ .c4p--datagrid .c4p--datagrid__expanded-row-content::after {
11179
+ position: absolute;
11180
+ bottom: 0;
11181
+ left: 0;
11182
+ width: 100%;
11183
+ height: 1px;
11184
+ background-color: var(--cds-layer-accent);
11185
+ content: "";
11186
+ }
11187
+
11188
+ .c4p--datagrid__carbon-row.c4p--datagrid__carbon-row-expandable .c4p--datagrid__cell.c4p--datagrid__expandable-row-cell {
11189
+ padding: 0.5rem;
11190
+ padding-right: 0;
11191
+ }
11192
+
11193
+ .c4p--datagrid__row-expander.cds--btn {
11194
+ display: flex;
11195
+ width: 2rem;
11196
+ height: 2rem;
11197
+ min-height: 2rem;
11198
+ justify-content: center;
11199
+ padding: 0;
11200
+ }
11201
+ .c4p--datagrid__row-expander.cds--btn .c4p--datagrid__row-expander--icon {
11202
+ fill: var(--cds-layer-selected-inverse, #161616);
11203
+ }
11204
+
11205
+ /*
11206
+ * Licensed Materials - Property of IBM
11207
+ * 5724-Q36
11208
+ * (c) Copyright IBM Corp. 2022
11209
+ * US Government Users Restricted Rights - Use, duplication or disclosure
11210
+ * restricted by GSA ADP Schedule Contract with IBM Corp.
11211
+ */
11212
+ .c4p--datagrid__draggable-handleStyle {
11213
+ display: flex;
11214
+ align-items: center;
11215
+ margin-right: 0.5rem;
11216
+ cursor: grab;
11217
+ }
11218
+
11219
+ .c4p--datagrid__draggable-handleStyle.disabled {
11220
+ pointer-events: none;
11221
+ }
11222
+
11223
+ svg.c4p--datagrid__draggable-handleStyle.disable {
11224
+ fill: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
11225
+ }
11226
+
11227
+ .c4p--datagrid__draggable-handleHolder {
11228
+ display: flex;
11229
+ height: 3rem;
11230
+ padding-left: 1rem;
11231
+ border-bottom: 1px solid var(--cds-layer-active);
11232
+ background-color: var(--cds-layer);
11233
+ }
11234
+
11235
+ .c4p--datagrid__draggable-handleHolder:hover {
11236
+ background-color: var(--cds-layer-hover);
11237
+ }
11238
+
11239
+ .c4p--datagrid__draggable-handleHolder-selected {
11240
+ display: flex;
11241
+ height: 3rem;
11242
+ padding-left: 1rem;
11243
+ border-bottom: 1px solid var(--cds-layer-active);
11244
+ background-color: var(--cds-layer-selected);
11245
+ }
11246
+
11247
+ .c4p--datagrid__draggable-handleHolder-selected:hover {
11248
+ background-color: var(--cds-layer-selected-hover-01, #d1d1d1);
11249
+ }
11250
+
11251
+ .c4p--datagrid__draggable-handleHolder-isOver {
11252
+ border: 2px dashed var(--cds-focus, #0f62fe);
11253
+ background-color: var(--cds-layer-selected-hover-01, #d1d1d1);
11254
+ }
11255
+
11256
+ .c4p--datagrid__draggable-handleHolder-droppable {
11257
+ display: flex;
11258
+ width: 100%;
11259
+ }
11260
+
11261
+ .c4p--datagrid__draggable-handleHolder-grabbed {
11262
+ background-color: var(--cds-highlight, #d0e2ff);
11263
+ color: var(--cds-text-primary, #161616);
11264
+ }
11265
+
11266
+ .c4p--datagrid__shared-ui--assistive-text {
11267
+ position: absolute;
11268
+ overflow: hidden;
11269
+ width: 0;
11270
+ height: 0;
11271
+ padding: 0;
11272
+ border: 0;
11273
+ clip: rect(0 0 0 0);
11274
+ text-transform: none;
11275
+ white-space: nowrap;
11276
+ }
11277
+
11278
+ /*
11279
+ * Licensed Materials - Property of IBM
11280
+ * 5724-Q36
11281
+ * (c) Copyright IBM Corp. 2021
11282
+ * US Government Users Restricted Rights - Use, duplication or disclosure
11283
+ * restricted by GSA ADP Schedule Contract with IBM Corp.
11284
+ */
11285
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xs .cds--text-input,
11286
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xs .cds--number input[type=number],
11287
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xs .c4p--datagrid__inline-edit--select .cds--list-box.cds--dropdown,
11288
+ .c4p--datagrid .c4p--datagrid__inline-edit--date.c4p--datagrid__inline-edit--date-xs .cds--date-picker__input {
11289
+ height: 1.5rem;
11290
+ }
11291
+
11292
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xs .cds--number__control-btn::before,
11293
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xs .cds--number__control-btn::after {
11294
+ height: calc(1.5rem - 0.25rem);
11295
+ }
11296
+
11297
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xs .c4p--datagrid__inline-edit--select .cds--list-box {
11298
+ max-height: none;
11299
+ }
11300
+
11301
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--sm .cds--text-input,
11302
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--sm .cds--number input[type=number],
11303
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--sm .c4p--datagrid__inline-edit--select .cds--list-box.cds--dropdown,
11304
+ .c4p--datagrid .c4p--datagrid__inline-edit--date.c4p--datagrid__inline-edit--date-sm .cds--date-picker__input {
11305
+ height: 2rem;
11306
+ }
11307
+
11308
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--sm .cds--number__control-btn::before,
11309
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--sm .cds--number__control-btn::after {
11310
+ height: calc(2rem - 0.25rem);
11311
+ }
11312
+
11313
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--sm .c4p--datagrid__inline-edit--select .cds--list-box {
11314
+ max-height: none;
11315
+ }
11316
+
11317
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--md .cds--text-input,
11318
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--md .cds--number input[type=number],
11319
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--md .c4p--datagrid__inline-edit--select .cds--list-box.cds--dropdown,
11320
+ .c4p--datagrid .c4p--datagrid__inline-edit--date.c4p--datagrid__inline-edit--date-md .cds--date-picker__input {
11321
+ height: 2.5rem;
11322
+ }
11323
+
11324
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--md .cds--number__control-btn::before,
11325
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--md .cds--number__control-btn::after {
11326
+ height: calc(2.5rem - 0.25rem);
11327
+ }
11328
+
11329
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--md .c4p--datagrid__inline-edit--select .cds--list-box {
11330
+ max-height: none;
11331
+ }
11332
+
11333
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--lg .cds--text-input,
11334
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--lg .cds--number input[type=number],
11335
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--lg .c4p--datagrid__inline-edit--select .cds--list-box.cds--dropdown,
11336
+ .c4p--datagrid .c4p--datagrid__inline-edit--date.c4p--datagrid__inline-edit--date-lg .cds--date-picker__input {
11337
+ height: 3rem;
11338
+ }
11339
+
11340
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--lg .cds--number__control-btn::before,
11341
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--lg .cds--number__control-btn::after {
11342
+ height: calc(3rem - 0.25rem);
11343
+ }
11344
+
11345
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--lg .c4p--datagrid__inline-edit--select .cds--list-box {
11346
+ max-height: none;
11347
+ }
11348
+
11349
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xl .cds--text-input,
11350
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xl .cds--number input[type=number],
11351
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xl .c4p--datagrid__inline-edit--select .cds--list-box.cds--dropdown,
11352
+ .c4p--datagrid .c4p--datagrid__inline-edit--date.c4p--datagrid__inline-edit--date-xl .cds--date-picker__input {
11353
+ height: 4rem;
11354
+ }
11355
+
11356
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xl .cds--number__control-btn::before,
11357
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xl .cds--number__control-btn::after {
11358
+ height: calc(4rem - 0.25rem);
11359
+ }
11360
+
11361
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xl .c4p--datagrid__inline-edit--select .cds--list-box {
11362
+ max-height: none;
11363
+ }
11364
+
11365
+ .c4p--datagrid {
11366
+ --c4p--datagrid--grid-header-height: 0;
11367
+ }
11368
+
11369
+ .c4p--datagrid__inline-edit-cell {
11370
+ display: flex;
11371
+ height: 100%;
11372
+ align-items: center;
11373
+ }
11374
+
11375
+ .c4p--datagrid .c4p--inline-edit__after-input-elements {
11376
+ display: flex;
11377
+ align-items: center;
11378
+ }
11379
+
11380
+ .c4p--datagrid__inline-edit--outer-cell-button {
11381
+ width: 100%;
11382
+ height: calc(100% + 2px);
11383
+ }
11384
+
11385
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button {
11386
+ position: relative;
11387
+ display: flex;
11388
+ width: 100%;
11389
+ height: 100%;
11390
+ align-items: center;
11391
+ justify-content: space-between;
11392
+ padding-left: 1rem;
11393
+ color: var(--cds-text-secondary, #525252);
11394
+ cursor: pointer;
11395
+ outline: 0;
11396
+ }
11397
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button .c4p--datagrid__label-icon {
11398
+ height: 1rem;
11399
+ padding-right: 1rem;
11400
+ }
11401
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button.c4p--datagrid__inline-edit-button--non-edit {
11402
+ padding-left: 0;
11403
+ cursor: default;
11404
+ }
11405
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button .c4p--datagrid__inline-edit-button-icon {
11406
+ height: 1rem;
11407
+ fill: var(--cds-icon-secondary, #525252);
11408
+ }
11409
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button.c4p--datagrid__inline-edit-button--date {
11410
+ font-family: 'IBM Plex Mono', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', monospace;
11411
+ }
11412
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button.c4p--datagrid__inline-edit-button--selection {
11413
+ justify-content: flex-start;
11414
+ }
11415
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button:not(.c4p--datagrid__inline-edit-button--edit-less-than-half-of-total-cols) {
11416
+ /* stylelint-disable-next-line */
11417
+ }
11418
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button:not(.c4p--datagrid__inline-edit-button--edit-less-than-half-of-total-cols) .c4p--datagrid__inline-edit-button-icon {
11419
+ display: none;
11420
+ }
11421
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button:not(.c4p--datagrid__inline-edit-button--edit-less-than-half-of-total-cols):hover .c4p--datagrid__inline-edit-button-icon {
11422
+ display: block;
11423
+ }
11424
+
11425
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button:not([data-disabled=true]):hover {
11426
+ background-color: var(--cds-layer-active);
11427
+ color: var(--cds-text-primary, #161616);
11428
+ }
11429
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button:not([data-disabled=true]):hover .c4p--datagrid__inline-edit-button-icon {
11430
+ fill: var(--cds-icon-primary, #161616);
11431
+ }
11432
+
11433
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button.c4p--datagrid__inline-edit-button--active:not([data-disabled=true]) {
11434
+ background-color: var(--cds-layer-active);
11435
+ color: var(--cds-text-primary, #161616);
11436
+ cursor: text;
11437
+ }
11438
+
11439
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button.c4p--datagrid__inline-edit-button--active {
11440
+ /* stylelint-disable-next-line carbon/theme-token-use */
11441
+ outline: 0.125rem solid var(--cds-focus, #0f62fe);
11442
+ outline-offset: calc(-1 * 0.125rem);
11443
+ }
11444
+ @media screen and (prefers-contrast) {
11445
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button.c4p--datagrid__inline-edit-button--active {
11446
+ outline-style: dotted;
11447
+ }
11448
+ }
11449
+
11450
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button--disabled:not(.c4p--datagrid__inline-edit-button--edit-less-than-half-of-total-cols) {
11451
+ color: var(--cds-button-disabled, #c6c6c6);
11452
+ cursor: not-allowed;
11453
+ }
11454
+
11455
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button .c4p--datagrid__inline-edit-button-label {
11456
+ overflow: hidden;
11457
+ padding-right: 1rem;
11458
+ text-overflow: ellipsis;
11459
+ white-space: nowrap;
11460
+ }
11461
+
11462
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button .c4p--datagrid__inline-edit-button-label.c4p--datagrid__inline-edit-button-label-with-icon {
11463
+ padding-right: 3rem;
11464
+ }
11465
+
11466
+ .c4p--datagrid__inline-edit--outer-cell-button .cds--text-input,
11467
+ .c4p--datagrid__inline-edit--outer-cell-button .cds--number input[type=number] {
11468
+ height: 3rem;
11469
+ }
11470
+
11471
+ .c4p--datagrid__inline-edit-button-icon {
11472
+ position: absolute;
11473
+ right: 1rem;
11474
+ }
11475
+
11476
+ .c4p--datagrid__table-with-inline-edit.cds--data-table .c4p--datagrid__cell-inline-edit {
11477
+ position: relative;
11478
+ padding: 0;
11479
+ }
11480
+ .c4p--datagrid__table-with-inline-edit.cds--data-table .c4p--datagrid__cell-inline-edit .c4p--datagrid__inline-edit-button--non-edit {
11481
+ padding-left: 1rem;
11482
+ }
11483
+ .c4p--datagrid__table-with-inline-edit.cds--data-table .c4p--datagrid__cell-inline-edit .cds--number input[type=number] {
11484
+ min-width: auto;
11485
+ padding-right: 1rem;
11486
+ }
11487
+
11488
+ .c4p--datagrid__inline-edit--select .c4p--datagrid__inline-edit--select-item {
11489
+ padding-bottom: 1rem;
11490
+ padding-left: 1rem;
11491
+ }
11492
+
11493
+ .c4p--datagrid__inline-edit--select.cds--dropdown,
11494
+ .c4p--datagrid__inline-edit--date .cds--date-picker {
11495
+ width: inherit;
11496
+ }
11497
+
11498
+ .c4p--datagrid__inline-edit--select.cds--dropdown,
11499
+ .c4p--datagrid__inline-edit--date .cds--date-picker.cds--date-picker--single .cds--date-picker__input {
11500
+ width: 100%;
11501
+ height: 3rem;
11502
+ max-height: none;
11503
+ }
11504
+
11505
+ .c4p--datagrid__inline-edit--date .cds--date-picker-container {
11506
+ width: inherit;
11507
+ }
11508
+
11509
+ .c4p--datagrid__inline-edit--date.cds--date-picker.cds--date-picker--single .cds--date-picker__input {
11510
+ overflow: hidden;
11511
+ width: 100%;
11512
+ max-width: none;
11513
+ padding-right: 2rem;
11514
+ text-overflow: ellipsis;
11515
+ white-space: nowrap;
11516
+ }
11517
+
11518
+ .c4p--datagrid .cds--data-table .c4p--datagrid__carbon-row-hover-active td {
11519
+ border-top-color: var(--cds-layer-hover);
11520
+ background-color: var(--cds-layer-hover);
11521
+ }
11522
+
11523
+ .c4p--datagrid .c4p--datagrid__grid-container-grid-active::before {
11524
+ position: absolute;
11525
+ z-index: 2;
11526
+ bottom: 0;
11527
+ left: 0;
11528
+ width: 2px;
11529
+ height: calc(100% - 50px - var(--c4p--datagrid--grid-header-height));
11530
+ background-color: var(--cds-link-inverse, #78a9ff);
11531
+ content: "";
11532
+ }
11533
+
11534
+ .c4p--datagrid .c4p--datagrid__grid-container-grid-active::after {
11535
+ position: absolute;
11536
+ z-index: 2;
11537
+ right: 0;
11538
+ bottom: 0;
11539
+ width: 2px;
11540
+ height: calc(100% - 50px - var(--c4p--datagrid--grid-header-height));
11541
+ background-color: var(--cds-link-inverse, #78a9ff);
11542
+ content: "";
11543
+ }
11544
+
11545
+ .c4p--datagrid .c4p--datagrid__grid-container-grid-active .cds--data-table-content::before {
11546
+ position: absolute;
11547
+ z-index: 2;
11548
+ top: 0;
11549
+ right: 0;
11550
+ left: 0;
11551
+ width: var(--c4p--datagrid--grid-width);
11552
+ height: 2px;
11553
+ background-color: var(--cds-link-inverse, #78a9ff);
11554
+ }
11555
+
11556
+ .c4p--datagrid .c4p--datagrid__grid-container-grid-active.c4p--datagrid__grid-container-grid-active--without-toolbar::before,
11557
+ .c4p--datagrid .c4p--datagrid__grid-container-grid-active.c4p--datagrid__grid-container-grid-active--without-toolbar::after {
11558
+ height: calc(100% - 2px - var(--c4p--datagrid--grid-header-height));
11559
+ }
11560
+
11561
+ .c4p--datagrid .c4p--datagrid__grid-container-grid-active .c4p--datagrid__table-container {
11562
+ outline: 2px solid var(--cds-link-inverse, #78a9ff);
11563
+ outline-offset: -2px;
11564
+ }
11565
+
11566
+ .c4p--datagrid .c4p--datagrid__grid-container-inline-edit .c4p--datagrid__table-container {
11567
+ padding-top: 0.125rem;
11568
+ }
11569
+
11570
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid [data-invalid] ~ .cds--form-requirement,
11571
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid [data-invalid] .cds--form-requirement {
11572
+ position: absolute;
11573
+ z-index: 3;
11574
+ top: calc(100% - 0.125rem);
11575
+ width: 100%;
11576
+ padding: 0.5rem 1.5rem 0.5rem 0.5rem;
11577
+ margin: 0;
11578
+ background-color: var(--cds-layer-01, #f4f4f4);
11579
+ outline: 0.125rem solid var(--cds-support-error, #da1e28);
11580
+ outline-offset: calc(-1 * 0.125rem);
11581
+ }
11582
+
11583
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid .cds--list-box[data-invalid]:focus-within ~ .cds--form-requirement {
11584
+ outline: 0.125rem solid var(--cds-focus, #0f62fe);
10970
11585
  }
10971
11586
 
10972
- .c4p--datagrid__expanded-row-content {
10973
- padding: 1rem 1rem 1.5rem 4rem;
11587
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid .cds--list-box__invalid-icon,
11588
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid .cds--text-input__invalid-icon,
11589
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid .cds--number__invalid {
11590
+ z-index: 4;
11591
+ top: calc(100% + 0.75rem + 0.125rem);
11592
+ right: 0.5rem;
10974
11593
  }
10975
11594
 
10976
- /*
10977
- * Licensed Materials - Property of IBM
10978
- * 5724-Q36
10979
- * (c) Copyright IBM Corp. 2022
10980
- * US Government Users Restricted Rights - Use, duplication or disclosure
10981
- * restricted by GSA ADP Schedule Contract with IBM Corp.
10982
- */
10983
- .c4p--datagrid__draggable-handleStyle {
10984
- display: flex;
10985
- align-items: center;
10986
- margin-right: 0.5rem;
10987
- cursor: grab;
11595
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid .cds--number__invalid {
11596
+ top: calc(100% + 0.25rem + 0.125rem);
10988
11597
  }
10989
11598
 
10990
- .c4p--datagrid__draggable-handleStyle.disabled {
10991
- pointer-events: none;
11599
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid .cds--form-requirement::before {
11600
+ position: absolute;
11601
+ top: 0;
11602
+ left: 0.125rem;
11603
+ width: calc(100% - (0.125rem * 2));
11604
+ height: 0.125rem;
11605
+ background-color: var(--cds-layer-01, #f4f4f4);
11606
+ content: "";
10992
11607
  }
10993
11608
 
10994
- svg.c4p--datagrid__draggable-handleStyle.disable {
10995
- fill: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
11609
+ .c4p--datagrid__inline-edit--outer-cell-button--invalid .cds--form-requirement::after {
11610
+ position: absolute;
11611
+ top: 0.125rem;
11612
+ left: 0.5rem;
11613
+ width: calc(100% - (0.5rem * 2));
11614
+ height: 1px;
11615
+ background-color: var(--cds-layer-accent-01, #e0e0e0);
11616
+ content: "";
10996
11617
  }
10997
11618
 
10998
- .c4p--datagrid__draggable-handleHolder {
10999
- display: flex;
11000
- height: 2rem;
11001
- padding-left: 0.25rem;
11002
- margin-bottom: 0.5rem;
11003
- background: var(--cds-layer-02, #ffffff);
11004
- }
11005
- .c4p--datagrid__draggable-handleHolder.c4p--datagrid__draggable-handleHolder-isOver {
11006
- border: 2px dashed var(--cds-focus, #0f62fe);
11007
- background-color: var(--cds-highlight, #d0e2ff);
11619
+ .c4p--datagrid tbody tr:hover .c4p--datagrid__inline-edit--outer-cell-button--invalid .cds--form-requirement::before {
11620
+ background-color: var(--cds-layer-accent-01, #e0e0e0);
11008
11621
  }
11009
-
11010
- .c4p--datagrid__draggable-handleHolder-droppable {
11011
- display: flex;
11012
- width: 100%;
11622
+ .c4p--datagrid tbody tr:hover .c4p--datagrid__inline-edit--outer-cell-button--invalid .cds--form-requirement::after {
11623
+ background-color: transparent;
11013
11624
  }
11014
11625
 
11015
- .c4p--datagrid__draggable-handleHolder--grabbed {
11016
- background-color: var(--cds-highlight, #d0e2ff);
11017
- color: var(--cds-text-primary, #161616);
11626
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid .cds--text-input:focus,
11627
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid .cds--number input[type=number]:focus,
11628
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid .cds--number input[type=number]:focus ~ .cds--number__controls .cds--number__control-btn:hover,
11629
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid .cds--number__control-btn:focus {
11630
+ outline-color: var(--cds-support-error, #da1e28);
11018
11631
  }
11019
11632
 
11020
- .c4p--datagrid__shared-ui--assistive-text {
11021
- position: absolute;
11022
- overflow: hidden;
11023
- width: 0;
11024
- height: 0;
11025
- padding: 0;
11026
- border: 0;
11027
- clip: rect(0 0 0 0);
11028
- text-transform: none;
11029
- white-space: nowrap;
11633
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid .cds--number input[type=number][data-invalid]:focus ~ .cds--number__controls .cds--number__control-btn.up-icon::after {
11634
+ background-color: var(--cds-support-error, #da1e28);
11030
11635
  }
11031
11636
 
11032
11637
  /*
@@ -11036,6 +11641,7 @@ svg.c4p--datagrid__draggable-handleStyle.disable {
11036
11641
  * US Government Users Restricted Rights - Use, duplication or disclosure
11037
11642
  * restricted by GSA ADP Schedule Contract with IBM Corp.
11038
11643
  */
11644
+ /* stylelint-disable max-nesting-depth */
11039
11645
  .c4p--datagrid__datagridWrap {
11040
11646
  display: block;
11041
11647
  width: 100%;
@@ -11043,6 +11649,10 @@ svg.c4p--datagrid__draggable-handleStyle.disable {
11043
11649
  .c4p--datagrid__datagridWrap :global(.cds--checkbox) {
11044
11650
  display: none;
11045
11651
  }
11652
+ .c4p--datagrid__datagridWrap .bx--overflow-menu-options > .c4p--datagrid__row-size-dropdown {
11653
+ left: 0.125rem;
11654
+ width: 112px;
11655
+ }
11046
11656
 
11047
11657
  .c4p--datagrid__datagridWrap .cds--overflow-menu-options > .c4p--datagrid__row-size-dropdown {
11048
11658
  left: 0.125rem;
@@ -12768,6 +13378,7 @@ svg.c4p--datagrid__draggable-handleStyle.disable {
12768
13378
  appearance: none;
12769
13379
  background: none;
12770
13380
  cursor: pointer;
13381
+ text-align: start;
12771
13382
  width: 100%;
12772
13383
  font-size: var(--cds-heading-compact-01-font-size, 0.875rem);
12773
13384
  font-weight: var(--cds-heading-compact-01-font-weight, 600);
@@ -13095,14 +13706,18 @@ a.cds--side-nav__link--current::before {
13095
13706
  font-weight: var(--cds-body-short-01-font-weight, 400);
13096
13707
  line-height: var(--cds-body-short-01-line-height, 1.28572);
13097
13708
  letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
13098
- height: 4rem;
13099
13709
  align-items: center;
13710
+ margin: 0;
13711
+ }
13712
+
13713
+ .c4p--action-set .c4p--action-set__action-button.c4p--action-set__action-button--expressive {
13714
+ height: 4rem;
13100
13715
  padding-top: 1rem;
13101
13716
  padding-bottom: 2rem;
13102
- margin: 0;
13103
13717
  }
13104
13718
 
13105
- .c4p--action-set.cds--btn-set .c4p--action-set__action-button.cds--btn.cds--btn--expressive {
13719
+ .c4p--action-set.cds--btn-set .c4p--action-set__action-button.cds--btn.cds--btn--expressive,
13720
+ .c4p--action-set.cds--btn-set .c4p--action-set__action-button.cds--btn {
13106
13721
  max-width: none;
13107
13722
  }
13108
13723
 
@@ -13163,7 +13778,7 @@ a.cds--side-nav__link--current::before {
13163
13778
  /* stylelint-disable-next-line function-no-unknown */
13164
13779
  z-index: 9000;
13165
13780
  align-items: flex-end;
13166
- transition: visibility 0 linear, background-color 240ms cubic-bezier(0, 0, 0.3, 1), opacity 240ms cubic-bezier(0, 0, 0.3, 1);
13781
+ transition: visibility 0s linear, background-color 240ms cubic-bezier(0, 0, 0.3, 1), opacity 240ms cubic-bezier(0, 0, 0.3, 1);
13167
13782
  }
13168
13783
 
13169
13784
  @media (prefers-reduced-motion: reduce) {
@@ -13581,6 +14196,45 @@ a.cds--side-nav__link--current::before {
13581
14196
  margin-bottom: 1rem;
13582
14197
  }
13583
14198
 
14199
+ /* stylelint-disable max-nesting-depth */
14200
+ .c4p--edit-update-cards#c4p--edit-update-cards--edit {
14201
+ /* Used id for overriding the SVG path fill */
14202
+ }
14203
+ .c4p--edit-update-cards#c4p--edit-update-cards--edit .c4p--card__header button:hover,
14204
+ .c4p--edit-update-cards#c4p--edit-update-cards--edit .c4p--card__footer button:hover {
14205
+ background-color: #0050e6;
14206
+ }
14207
+ .c4p--edit-update-cards#c4p--edit-update-cards--edit .c4p--card__header button:focus,
14208
+ .c4p--edit-update-cards#c4p--edit-update-cards--edit .c4p--card__footer button:focus {
14209
+ box-shadow: none;
14210
+ }
14211
+ .c4p--edit-update-cards#c4p--edit-update-cards--edit .c4p--card__header button svg path,
14212
+ .c4p--edit-update-cards#c4p--edit-update-cards--edit .c4p--card__footer button svg path {
14213
+ fill: #ffffff;
14214
+ }
14215
+ .c4p--edit-update-cards#c4p--edit-update-cards--edit .c4p--card__header button.c4p--loading:hover,
14216
+ .c4p--edit-update-cards#c4p--edit-update-cards--edit .c4p--card__footer button.c4p--loading:hover {
14217
+ background-color: transparent;
14218
+ }
14219
+ .c4p--edit-update-cards#c4p--edit-update-cards--edit .c4p--card__footer {
14220
+ background-color: #0f62fe;
14221
+ color: #ffffff;
14222
+ }
14223
+ .c4p--edit-update-cards#c4p--edit-update-cards--edit .c4p--loading {
14224
+ animation-duration: 700ms;
14225
+ animation-fill-mode: forwards;
14226
+ animation-iteration-count: infinite;
14227
+ animation-name: rotate;
14228
+ animation-timing-function: cubic-bezier(0.2, 0, 0.38, 0.9);
14229
+ }
14230
+ .c4p--edit-update-cards#c4p--edit-update-cards--edit .c4p--loading:hover {
14231
+ background-color: transparent;
14232
+ }
14233
+ .c4p--edit-update-cards:not(.c4p--edit-update-cards__actions-bottom)#c4p--edit-update-cards--edit .c4p--card__header {
14234
+ background-color: #0f62fe;
14235
+ color: #ffffff;
14236
+ }
14237
+
13584
14238
  html,
13585
14239
  body,
13586
14240
  div,
@@ -15055,6 +15709,10 @@ em {
15055
15709
  --cds-button-secondary-hover: #5e5e5e;
15056
15710
  --cds-button-tertiary-hover: #f4f4f4;
15057
15711
  --cds-button-disabled: rgba(141, 141, 141, 0.3);
15712
+ --cds-notification-background-error: #393939;
15713
+ --cds-notification-background-success: #393939;
15714
+ --cds-notification-background-info: #393939;
15715
+ --cds-notification-background-warning: #393939;
15058
15716
  --cds-notification-action-tertiary-inverse: #0f62fe;
15059
15717
  --cds-notification-action-tertiary-inverse-active: #002d9c;
15060
15718
  --cds-notification-action-tertiary-inverse-hover: #0050e6;
@@ -15219,6 +15877,10 @@ em {
15219
15877
  --cds-button-secondary-hover: #5e5e5e;
15220
15878
  --cds-button-tertiary-hover: #f4f4f4;
15221
15879
  --cds-button-disabled: rgba(141, 141, 141, 0.3);
15880
+ --cds-notification-background-error: #262626;
15881
+ --cds-notification-background-success: #262626;
15882
+ --cds-notification-background-info: #262626;
15883
+ --cds-notification-background-warning: #262626;
15222
15884
  --cds-notification-action-tertiary-inverse: #0f62fe;
15223
15885
  --cds-notification-action-tertiary-inverse-active: #002d9c;
15224
15886
  --cds-notification-action-tertiary-inverse-hover: #0050e6;
@@ -15296,6 +15958,7 @@ em {
15296
15958
  appearance: none;
15297
15959
  background: none;
15298
15960
  cursor: pointer;
15961
+ text-align: start;
15299
15962
  width: 100%;
15300
15963
  position: relative;
15301
15964
  display: flex;
@@ -16399,12 +17062,61 @@ li.cds--accordion__item--disabled:last-of-type {
16399
17062
  margin-bottom: 0;
16400
17063
  }
16401
17064
 
16402
- .cds--label .cds--tooltip__trigger {
17065
+ .cds--label + .cds--tooltip {
17066
+ position: relative;
17067
+ top: 0.2rem;
17068
+ left: 0.5rem;
17069
+ }
17070
+
17071
+ .cds--label + .cds--tooltip .cds--tooltip__trigger {
17072
+ box-sizing: border-box;
17073
+ padding: 0;
17074
+ border: 0;
17075
+ margin: 0;
17076
+ font-family: inherit;
17077
+ font-size: 100%;
17078
+ vertical-align: baseline;
17079
+ display: inline-block;
17080
+ padding: 0;
17081
+ border: 0;
17082
+ appearance: none;
17083
+ background: none;
17084
+ cursor: pointer;
17085
+ text-align: start;
17086
+ width: 100%;
17087
+ display: flex;
17088
+ align-items: center;
17089
+ justify-content: center;
16403
17090
  font-size: var(--cds-label-01-font-size, 0.75rem);
16404
17091
  font-weight: var(--cds-label-01-font-weight, 400);
16405
17092
  line-height: var(--cds-label-01-line-height, 1.33333);
16406
17093
  letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
16407
17094
  }
17095
+ .cds--label + .cds--tooltip .cds--tooltip__trigger *,
17096
+ .cds--label + .cds--tooltip .cds--tooltip__trigger *::before,
17097
+ .cds--label + .cds--tooltip .cds--tooltip__trigger *::after {
17098
+ box-sizing: inherit;
17099
+ }
17100
+ .cds--label + .cds--tooltip .cds--tooltip__trigger::-moz-focus-inner {
17101
+ border: 0;
17102
+ }
17103
+
17104
+ .cds--label + .cds--tooltip .cds--tooltip__trigger:focus {
17105
+ outline: 1px solid var(--cds-focus, #0f62fe);
17106
+ }
17107
+
17108
+ .cds--label + .cds--tooltip .cds--tooltip__trigger svg {
17109
+ fill: var(--cds-icon-secondary, #525252);
17110
+ }
17111
+
17112
+ .cds--label + .cds--tooltip .cds--tooltip__trigger svg :hover {
17113
+ fill: var(--cds-icon-primary, #161616);
17114
+ }
17115
+
17116
+ .cds--label + .cds--toggletip {
17117
+ top: 0.2rem;
17118
+ left: 0.5rem;
17119
+ }
16408
17120
 
16409
17121
  .cds--label.cds--skeleton {
16410
17122
  position: relative;
@@ -16446,7 +17158,7 @@ input[data-invalid]:not(:focus),
16446
17158
  .cds--text-area__wrapper[data-invalid] > .cds--text-area--invalid:not(:focus),
16447
17159
  .cds--select-input__wrapper[data-invalid] .cds--select-input:not(:focus),
16448
17160
  .cds--list-box[data-invalid]:not(:focus),
16449
- .cds--combo-box[data-invalid] .cds--text-input:not(:focus) {
17161
+ .cds--combo-box[data-invalid]:not(.cds--multi-select--selected) .cds--text-input:not(:focus) {
16450
17162
  outline: 2px solid var(--cds-support-error, #da1e28);
16451
17163
  outline-offset: -2px;
16452
17164
  }
@@ -16457,7 +17169,7 @@ input[data-invalid]:not(:focus),
16457
17169
  .cds--text-area__wrapper[data-invalid] > .cds--text-area--invalid:not(:focus),
16458
17170
  .cds--select-input__wrapper[data-invalid] .cds--select-input:not(:focus),
16459
17171
  .cds--list-box[data-invalid]:not(:focus),
16460
- .cds--combo-box[data-invalid] .cds--text-input:not(:focus) {
17172
+ .cds--combo-box[data-invalid]:not(.cds--multi-select--selected) .cds--text-input:not(:focus) {
16461
17173
  outline-style: dotted;
16462
17174
  }
16463
17175
  }
@@ -16668,8 +17380,7 @@ fieldset[disabled] .cds--form__helper-text {
16668
17380
 
16669
17381
  .cds--checkbox:checked + .cds--checkbox-label::before,
16670
17382
  .cds--checkbox:indeterminate + .cds--checkbox-label::before,
16671
- .cds--checkbox-label[data-contained-checkbox-state=true]::before,
16672
- .cds--checkbox-label[data-contained-checkbox-state=mixed]::before {
17383
+ .cds--checkbox-label[data-contained-checkbox-state=true]::before {
16673
17384
  border: none;
16674
17385
  border-width: 1px;
16675
17386
  background-color: var(--cds-icon-primary, #161616);
@@ -16680,8 +17391,7 @@ fieldset[disabled] .cds--form__helper-text {
16680
17391
  transform: scale(1) rotate(-45deg) /*rtl:scale(1.2) rotate3d(.5, 1, 0, 158deg)*/;
16681
17392
  }
16682
17393
 
16683
- .cds--checkbox:indeterminate + .cds--checkbox-label::after,
16684
- .cds--checkbox-label[data-contained-checkbox-state=mixed]::after {
17394
+ .cds--checkbox:indeterminate + .cds--checkbox-label::after {
16685
17395
  top: 0.6875rem;
16686
17396
  width: 0.5rem;
16687
17397
  border-bottom: 2px solid var(--cds-icon-inverse, #ffffff);
@@ -16693,8 +17403,7 @@ fieldset[disabled] .cds--form__helper-text {
16693
17403
  .cds--checkbox-label__focus::before,
16694
17404
  .cds--checkbox:checked:focus + .cds--checkbox-label::before,
16695
17405
  .cds--checkbox-label[data-contained-checkbox-state=true].cds--checkbox-label__focus::before,
16696
- .cds--checkbox:indeterminate:focus + .cds--checkbox-label::before,
16697
- .cds--checkbox-label[data-contained-checkbox-state=mixed].cds--checkbox-label__focus::before {
17406
+ .cds--checkbox:indeterminate:focus + .cds--checkbox-label::before {
16698
17407
  outline: 2px solid var(--cds-focus, #0f62fe);
16699
17408
  outline-offset: 1px;
16700
17409
  }
@@ -16712,8 +17421,7 @@ fieldset[disabled] .cds--form__helper-text {
16712
17421
 
16713
17422
  .cds--checkbox:checked:disabled + .cds--checkbox-label::before,
16714
17423
  .cds--checkbox:indeterminate:disabled + .cds--checkbox-label::before,
16715
- .cds--checkbox-label[data-contained-checkbox-state=true][data-contained-checkbox-disabled=true]::before,
16716
- .cds--checkbox-label[data-contained-checkbox-state=mixed][data-contained-checkbox-disabled=true]::before {
17424
+ .cds--checkbox-label[data-contained-checkbox-state=true][data-contained-checkbox-disabled=true]::before {
16717
17425
  background-color: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
16718
17426
  }
16719
17427
 
@@ -17192,6 +17900,9 @@ fieldset[disabled] .cds--form__helper-text {
17192
17900
  z-index: 1;
17193
17901
  top: 0.8125rem;
17194
17902
  left: 1rem;
17903
+ display: flex;
17904
+ height: 1rem;
17905
+ align-items: center;
17195
17906
  margin: 0;
17196
17907
  }
17197
17908
 
@@ -17210,12 +17921,12 @@ fieldset[disabled] .cds--form__helper-text {
17210
17921
  }
17211
17922
 
17212
17923
  .cds--form--fluid .cds--text-input--invalid,
17213
- .cds--form--fluid .cds--text-input--warn {
17924
+ .cds--form--fluid .cds--text-input--warning {
17214
17925
  border-bottom: none;
17215
17926
  }
17216
17927
 
17217
17928
  .cds--form--fluid .cds--text-input--invalid + .cds--text-input__divider,
17218
- .cds--form--fluid .cds--text-input--warn + .cds--text-input__divider {
17929
+ .cds--form--fluid .cds--text-input--warning + .cds--text-input__divider {
17219
17930
  display: block;
17220
17931
  border-style: solid;
17221
17932
  border-color: var(--cds-border-subtle);
@@ -17227,13 +17938,13 @@ fieldset[disabled] .cds--form__helper-text {
17227
17938
  top: 5rem;
17228
17939
  }
17229
17940
 
17230
- .cds--form--fluid .cds--text-input-wrapper--light {
17231
- background: var(--cds-field-02, #ffffff);
17941
+ .cds--form--fluid .cds--text-input__field-wrapper[data-invalid] > .cds--text-input--invalid,
17942
+ .cds--form--fluid .cds--text-input__field-wrapper--warning > .cds--text-input--warning {
17943
+ outline: none;
17232
17944
  }
17233
17945
 
17234
- .cds--form--fluid .cds--text-input__field-wrapper[data-invalid] > .cds--text-input--invalid {
17235
- outline: 2px solid transparent;
17236
- outline-offset: -2px;
17946
+ .cds--form--fluid .cds--text-input__field-wrapper--warning {
17947
+ border-bottom: 1px solid var(--cds-border-strong);
17237
17948
  }
17238
17949
 
17239
17950
  .cds--form--fluid .cds--text-input__field-wrapper[data-invalid]:not(:focus) {
@@ -17246,16 +17957,23 @@ fieldset[disabled] .cds--form__helper-text {
17246
17957
  }
17247
17958
  }
17248
17959
 
17249
- .cds--form--fluid .cds--text-input__field-wrapper[data-invalid] > .cds--text-input--invalid:focus {
17960
+ .cds--form--fluid .cds--text-input__field-wrapper[data-invalid]:focus-within,
17961
+ .cds--form--fluid .cds--text-input__field-wrapper--warning:focus-within {
17250
17962
  outline: 2px solid var(--cds-focus, #0f62fe);
17251
17963
  outline-offset: -2px;
17252
17964
  }
17253
17965
  @media screen and (prefers-contrast) {
17254
- .cds--form--fluid .cds--text-input__field-wrapper[data-invalid] > .cds--text-input--invalid:focus {
17966
+ .cds--form--fluid .cds--text-input__field-wrapper[data-invalid]:focus-within,
17967
+ .cds--form--fluid .cds--text-input__field-wrapper--warning:focus-within {
17255
17968
  outline-style: dotted;
17256
17969
  }
17257
17970
  }
17258
17971
 
17972
+ .cds--form--fluid .cds--text-input__field-wrapper[data-invalid] > .cds--text-input--invalid:focus,
17973
+ .cds--form--fluid .cds--text-input__field-wrapper--warning > .cds--text-input--warning:focus {
17974
+ outline: none;
17975
+ }
17976
+
17259
17977
  .cds--text-input-wrapper.cds--text-input-wrapper--inline {
17260
17978
  flex-flow: row wrap;
17261
17979
  }
@@ -17856,6 +18574,7 @@ fieldset[disabled] .cds--form__helper-text {
17856
18574
  appearance: none;
17857
18575
  background: none;
17858
18576
  cursor: pointer;
18577
+ text-align: start;
17859
18578
  width: 100%;
17860
18579
  position: relative;
17861
18580
  display: inline-flex;
@@ -17947,6 +18666,7 @@ fieldset[disabled] .cds--form__helper-text {
17947
18666
  appearance: none;
17948
18667
  background: none;
17949
18668
  cursor: pointer;
18669
+ text-align: start;
17950
18670
  position: absolute;
17951
18671
  right: 1rem;
17952
18672
  display: flex;
@@ -17991,6 +18711,7 @@ fieldset[disabled] .cds--form__helper-text {
17991
18711
  appearance: none;
17992
18712
  background: none;
17993
18713
  cursor: pointer;
18714
+ text-align: start;
17994
18715
  position: absolute;
17995
18716
  top: 50%;
17996
18717
  /* to preserve .5rem space between icons according to spec top/transform used to center the combobox clear selection icon in IE11 */
@@ -18646,6 +19367,16 @@ fieldset[disabled] .cds--form__helper-text {
18646
19367
  letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
18647
19368
  color: var(--cds-text-secondary, #525252);
18648
19369
  }
19370
+ @media (min-width: 42rem) {
19371
+ .cds--data-table-header__description {
19372
+ max-width: 50ch;
19373
+ }
19374
+ }
19375
+ @media (min-width: 66rem) {
19376
+ .cds--data-table-header__description {
19377
+ max-width: 80ch;
19378
+ }
19379
+ }
18649
19380
 
18650
19381
  .cds--data-table {
18651
19382
  width: 100%;
@@ -19445,6 +20176,7 @@ tr.cds--data-table--selected:last-of-type td {
19445
20176
  appearance: none;
19446
20177
  background: none;
19447
20178
  cursor: pointer;
20179
+ text-align: start;
19448
20180
  width: 100%;
19449
20181
  display: flex;
19450
20182
  width: 3rem;
@@ -19476,6 +20208,7 @@ tr.cds--data-table--selected:last-of-type td {
19476
20208
  appearance: none;
19477
20209
  background: none;
19478
20210
  cursor: pointer;
20211
+ text-align: start;
19479
20212
  width: 100%;
19480
20213
  display: flex;
19481
20214
  width: 3rem;
@@ -19973,6 +20706,7 @@ tr.cds--parent-row.cds--expandable-row.cds--expandable-row--hover td:first-of-ty
19973
20706
  appearance: none;
19974
20707
  background: none;
19975
20708
  cursor: pointer;
20709
+ text-align: start;
19976
20710
  display: inline-flex;
19977
20711
  width: 100%;
19978
20712
  height: calc(100% + 1px);
@@ -20277,6 +21011,7 @@ tr.cds--parent-row.cds--data-table--selected.cds--expandable-row--hover + tr[dat
20277
21011
  appearance: none;
20278
21012
  background: none;
20279
21013
  cursor: pointer;
21014
+ text-align: start;
20280
21015
  display: flex;
20281
21016
  width: 100%;
20282
21017
  min-height: 100%;
@@ -22212,6 +22947,106 @@ button.cds--dropdown-text:focus {
22212
22947
  }
22213
22948
 
22214
22949
  /* stylelint-enable */
22950
+ .cds--text-input--fluid.cds--text-input-wrapper {
22951
+ position: relative;
22952
+ height: 100%;
22953
+ background: var(--cds-field);
22954
+ transition: background-color 70ms cubic-bezier(0.2, 0, 0.38, 0.9), outline 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
22955
+ }
22956
+
22957
+ .cds--text-input--fluid .cds--label {
22958
+ position: absolute;
22959
+ z-index: 1;
22960
+ top: 0.8125rem;
22961
+ left: 1rem;
22962
+ display: flex;
22963
+ height: 1rem;
22964
+ align-items: center;
22965
+ margin: 0;
22966
+ }
22967
+
22968
+ .cds--text-input--fluid .cds--form__helper-text {
22969
+ display: none;
22970
+ }
22971
+
22972
+ .cds--text-input--fluid .cds--text-input {
22973
+ min-height: 4rem;
22974
+ padding: 2rem 1rem 0.8125rem;
22975
+ }
22976
+
22977
+ .cds--text-input__divider,
22978
+ .cds--text-input--fluid .cds--text-input__divider {
22979
+ display: none;
22980
+ }
22981
+
22982
+ .cds--text-input--fluid .cds--text-input__field-wrapper[data-invalid],
22983
+ .cds--text-input--fluid .cds--text-input__field-wrapper--warning {
22984
+ display: block;
22985
+ }
22986
+
22987
+ .cds--text-input--fluid input[data-invalid] {
22988
+ outline: none;
22989
+ }
22990
+
22991
+ .cds--text-input--fluid .cds--form-requirement {
22992
+ padding: 0.5rem 2.5rem 0.5rem 1rem;
22993
+ margin: 0;
22994
+ }
22995
+
22996
+ .cds--text-input--fluid .cds--text-input--invalid,
22997
+ .cds--text-input--fluid .cds--text-input--warning {
22998
+ border-bottom: none;
22999
+ }
23000
+
23001
+ .cds--text-input--fluid .cds--text-input--invalid + .cds--text-input__divider,
23002
+ .cds--text-input--fluid .cds--text-input--warning + .cds--text-input__divider {
23003
+ display: block;
23004
+ border-style: solid;
23005
+ border-color: var(--cds-border-subtle);
23006
+ border-bottom: none;
23007
+ margin: 0 1rem;
23008
+ }
23009
+
23010
+ .cds--text-input--fluid .cds--text-input__invalid-icon {
23011
+ top: 5rem;
23012
+ }
23013
+
23014
+ .cds--text-input--fluid .cds--text-input__field-wrapper[data-invalid] > .cds--text-input--invalid,
23015
+ .cds--text-input--fluid .cds--text-input__field-wrapper--warning > .cds--text-input--warning {
23016
+ outline: none;
23017
+ }
23018
+
23019
+ .cds--text-input--fluid .cds--text-input__field-wrapper--warning {
23020
+ border-bottom: 1px solid var(--cds-border-strong);
23021
+ }
23022
+
23023
+ .cds--text-input--fluid .cds--text-input__field-wrapper[data-invalid]:not(:focus) {
23024
+ outline: 2px solid var(--cds-support-error, #da1e28);
23025
+ outline-offset: -2px;
23026
+ }
23027
+ @media screen and (prefers-contrast) {
23028
+ .cds--text-input--fluid .cds--text-input__field-wrapper[data-invalid]:not(:focus) {
23029
+ outline-style: dotted;
23030
+ }
23031
+ }
23032
+
23033
+ .cds--text-input--fluid .cds--text-input__field-wrapper[data-invalid]:focus-within,
23034
+ .cds--text-input--fluid .cds--text-input__field-wrapper--warning:focus-within {
23035
+ outline: 2px solid var(--cds-focus, #0f62fe);
23036
+ outline-offset: -2px;
23037
+ }
23038
+ @media screen and (prefers-contrast) {
23039
+ .cds--text-input--fluid .cds--text-input__field-wrapper[data-invalid]:focus-within,
23040
+ .cds--text-input--fluid .cds--text-input__field-wrapper--warning:focus-within {
23041
+ outline-style: dotted;
23042
+ }
23043
+ }
23044
+
23045
+ .cds--text-input--fluid .cds--text-input__field-wrapper[data-invalid] > .cds--text-input--invalid:focus,
23046
+ .cds--text-input--fluid .cds--text-input__field-wrapper--warning > .cds--text-input--warning:focus {
23047
+ outline: none;
23048
+ }
23049
+
22215
23050
  @keyframes stroke {
22216
23051
  100% {
22217
23052
  stroke-dashoffset: 0;
@@ -22900,7 +23735,7 @@ button.cds--dropdown-text:focus {
22900
23735
  padding-left: 0;
22901
23736
  }
22902
23737
 
22903
- .cds--multi-select--filterable.cds--list-box--disabled:hover .cds--text-input {
23738
+ .cds--multi-select--filterable.cds--list-box--disabled:hover:not(.cds--multi-select--filterable) .cds--text-input {
22904
23739
  background-color: var(--cds-field);
22905
23740
  }
22906
23741
 
@@ -22914,6 +23749,10 @@ button.cds--dropdown-text:focus {
22914
23749
  background-color: transparent;
22915
23750
  }
22916
23751
 
23752
+ .cds--multi-select:not(.cds--list-box--expanded) .cds--list-box__menu {
23753
+ visibility: hidden;
23754
+ }
23755
+
22917
23756
  .cds--inline-notification {
22918
23757
  position: relative;
22919
23758
  display: flex;
@@ -24143,6 +24982,7 @@ button.cds--dropdown-text:focus {
24143
24982
  appearance: none;
24144
24983
  background: none;
24145
24984
  cursor: pointer;
24985
+ text-align: start;
24146
24986
  width: 100%;
24147
24987
  position: relative;
24148
24988
  display: inline-flex;
@@ -24484,6 +25324,7 @@ button.cds--dropdown-text:focus {
24484
25324
  appearance: none;
24485
25325
  background: none;
24486
25326
  cursor: pointer;
25327
+ text-align: start;
24487
25328
  width: 100%;
24488
25329
  outline: 2px solid transparent;
24489
25330
  outline-offset: -2px;
@@ -25611,6 +26452,7 @@ span.cds--pagination__text.cds--pagination__items-count {
25611
26452
  appearance: none;
25612
26453
  background: none;
25613
26454
  cursor: pointer;
26455
+ text-align: start;
25614
26456
  position: relative;
25615
26457
  display: block;
25616
26458
  min-width: 3rem;
@@ -25953,13 +26795,13 @@ span.cds--pagination__text.cds--pagination__items-count {
25953
26795
  .cds--popover--left-top .cds--popover-content {
25954
26796
  top: -50%;
25955
26797
  right: 100%;
25956
- transform: translate(calc(-1 * var(--cds-popover-offset, 0rem)), calc(-0.5 * var(--cds-popover-offset, 0rem) + 16px));
26798
+ transform: translate(calc(-1 * var(--cds-popover-offset, 0rem)), calc(-0.5 * var(--cds-popover-offset, 0rem)));
25957
26799
  }
25958
26800
 
25959
26801
  .cds--popover--left-bottom .cds--popover-content {
25960
26802
  right: 100%;
25961
26803
  bottom: -50%;
25962
- transform: translate(calc(-1 * var(--cds-popover-offset, 0rem)), calc(0.5 * var(--cds-popover-offset, 0rem) - 16px));
26804
+ transform: translate(calc(-1 * var(--cds-popover-offset, 0rem)), calc(0.5 * var(--cds-popover-offset, 0rem)));
25963
26805
  }
25964
26806
 
25965
26807
  .cds--popover--left .cds--popover-content::before,
@@ -26178,6 +27020,7 @@ span.cds--pagination__text.cds--pagination__items-count {
26178
27020
  appearance: none;
26179
27021
  background: none;
26180
27022
  cursor: pointer;
27023
+ text-align: start;
26181
27024
  width: 100%;
26182
27025
  border-bottom: 1px dotted var(--cds-border-strong);
26183
27026
  border-radius: 0;
@@ -26397,6 +27240,7 @@ span.cds--pagination__text.cds--pagination__items-count {
26397
27240
  appearance: none;
26398
27241
  background: none;
26399
27242
  cursor: pointer;
27243
+ text-align: start;
26400
27244
  width: 100%;
26401
27245
  display: flex;
26402
27246
  text-align: left;
@@ -26868,6 +27712,7 @@ span.cds--pagination__text.cds--pagination__items-count {
26868
27712
  appearance: none;
26869
27713
  background: none;
26870
27714
  cursor: pointer;
27715
+ text-align: start;
26871
27716
  outline: 2px solid transparent;
26872
27717
  outline-offset: -2px;
26873
27718
  position: absolute;
@@ -27805,6 +28650,7 @@ span.cds--pagination__text.cds--pagination__items-count {
27805
28650
  appearance: none;
27806
28651
  background: none;
27807
28652
  cursor: pointer;
28653
+ text-align: start;
27808
28654
  width: 100%;
27809
28655
  display: flex;
27810
28656
  width: 2.5rem;
@@ -27955,6 +28801,7 @@ span.cds--pagination__text.cds--pagination__items-count {
27955
28801
  appearance: none;
27956
28802
  background: none;
27957
28803
  cursor: pointer;
28804
+ text-align: start;
27958
28805
  outline: 2px solid transparent;
27959
28806
  outline-offset: -2px;
27960
28807
  font-size: var(--cds-body-compact-01-font-size, 0.875rem);
@@ -28473,6 +29320,7 @@ span.cds--pagination__text.cds--pagination__items-count {
28473
29320
  appearance: none;
28474
29321
  background: none;
28475
29322
  cursor: pointer;
29323
+ text-align: start;
28476
29324
  width: 100%;
28477
29325
  position: absolute;
28478
29326
  right: 0;
@@ -28735,6 +29583,7 @@ span.cds--pagination__text.cds--pagination__items-count {
28735
29583
  appearance: none;
28736
29584
  background: none;
28737
29585
  cursor: pointer;
29586
+ text-align: start;
28738
29587
  width: 100%;
28739
29588
  display: flex;
28740
29589
  align-items: center;
@@ -28856,7 +29705,7 @@ span.cds--pagination__text.cds--pagination__items-count {
28856
29705
  }
28857
29706
 
28858
29707
  .cds--toggle__button:focus + .cds--toggle__label .cds--toggle__switch,
28859
- .cds--toggle__button:active + .cds--toggle__label .cds--toggle__switch {
29708
+ .cds--toggle__button:not(:disabled):active + .cds--toggle__label .cds--toggle__switch {
28860
29709
  box-shadow: 0 0 0 1px var(--cds-focus-inset, #ffffff), 0 0 0 3px var(--cds-focus, #0f62fe);
28861
29710
  }
28862
29711
 
@@ -28931,7 +29780,7 @@ span.cds--pagination__text.cds--pagination__items-count {
28931
29780
 
28932
29781
  @media screen and (-ms-high-contrast: active), (forced-colors: active) {
28933
29782
  .cds--toggle__button:focus + .cds--toggle__label .cds--toggle__switch,
28934
- .cds--toggle__button:active + .cds--toggle__label .cds--toggle__switch {
29783
+ .cds--toggle__button:not(:disabled):active + .cds--toggle__label .cds--toggle__switch {
28935
29784
  color: Highlight;
28936
29785
  outline: 1px solid Highlight;
28937
29786
  }
@@ -28992,6 +29841,8 @@ span.cds--pagination__text.cds--pagination__items-count {
28992
29841
  min-height: 2rem;
28993
29842
  flex: 1;
28994
29843
  align-items: center;
29844
+ padding-top: 0.4375rem;
29845
+ padding-bottom: 0.4375rem;
28995
29846
  }
28996
29847
  .cds--tree-node__label:hover {
28997
29848
  background-color: var(--cds-layer-hover-01, #e8e8e8);
@@ -29026,7 +29877,10 @@ span.cds--pagination__text.cds--pagination__items-count {
29026
29877
  }
29027
29878
 
29028
29879
  .cds--tree-parent-node__toggle {
29029
- padding: 0;
29880
+ display: flex;
29881
+ align-items: center;
29882
+ align-self: flex-start;
29883
+ padding: 0.0625rem 0;
29030
29884
  border: 0;
29031
29885
  margin-right: 0.5rem;
29032
29886
  }
@@ -29050,6 +29904,8 @@ span.cds--pagination__text.cds--pagination__items-count {
29050
29904
  .cds--tree-node__icon {
29051
29905
  min-width: 1rem;
29052
29906
  min-height: 1rem;
29907
+ align-self: flex-start;
29908
+ margin-top: 0.0625rem;
29053
29909
  margin-right: 0.5rem;
29054
29910
  fill: var(--cds-icon-secondary, #525252);
29055
29911
  }
@@ -29082,6 +29938,8 @@ span.cds--pagination__text.cds--pagination__items-count {
29082
29938
 
29083
29939
  .cds--tree--xs .cds--tree-node__label {
29084
29940
  min-height: 1.5rem;
29941
+ padding-top: 0.25rem;
29942
+ padding-bottom: 0.25rem;
29085
29943
  }
29086
29944
 
29087
29945
  .cds--content {
@@ -29129,6 +29987,7 @@ span.cds--pagination__text.cds--pagination__items-count {
29129
29987
  appearance: none;
29130
29988
  background: none;
29131
29989
  cursor: pointer;
29990
+ text-align: start;
29132
29991
  width: 100%;
29133
29992
  display: inline-flex;
29134
29993
  width: 3rem;
@@ -29625,6 +30484,7 @@ a.cds--header__menu-item.cds--header__menu-item--current:focus {
29625
30484
  appearance: none;
29626
30485
  background: none;
29627
30486
  cursor: pointer;
30487
+ text-align: start;
29628
30488
  width: 100%;
29629
30489
  font-size: var(--cds-heading-compact-01-font-size, 0.875rem);
29630
30490
  font-weight: var(--cds-heading-compact-01-font-weight, 600);
@@ -30036,6 +30896,7 @@ a.cds--side-nav__link--current::before {
30036
30896
  appearance: none;
30037
30897
  background: none;
30038
30898
  cursor: pointer;
30899
+ text-align: start;
30039
30900
  width: 100%;
30040
30901
  display: inline-flex;
30041
30902
  width: 3rem;
@@ -30532,6 +31393,7 @@ a.cds--header__menu-item.cds--header__menu-item--current:focus {
30532
31393
  appearance: none;
30533
31394
  background: none;
30534
31395
  cursor: pointer;
31396
+ text-align: start;
30535
31397
  width: 100%;
30536
31398
  font-size: var(--cds-heading-compact-01-font-size, 0.875rem);
30537
31399
  font-weight: var(--cds-heading-compact-01-font-weight, 600);