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

Sign up to get free protection for your applications and to get access to all the features.
Files changed (241) hide show
  1. package/css/index-full-carbon.css +952 -143
  2. package/css/index-full-carbon.css.map +1 -1
  3. package/css/index-full-carbon.min.css +4 -2
  4. package/css/index-full-carbon.min.css.map +1 -1
  5. package/css/index-without-carbon-released-only.css +783 -19
  6. package/css/index-without-carbon-released-only.css.map +1 -1
  7. package/css/index-without-carbon-released-only.min.css +4 -2
  8. package/css/index-without-carbon-released-only.min.css.map +1 -1
  9. package/css/index-without-carbon.css +678 -77
  10. package/css/index-without-carbon.css.map +1 -1
  11. package/css/index-without-carbon.min.css +4 -2
  12. package/css/index-without-carbon.min.css.map +1 -1
  13. package/css/index.css +757 -92
  14. package/css/index.css.map +1 -1
  15. package/css/index.min.css +4 -2
  16. package/css/index.min.css.map +1 -1
  17. package/es/components/APIKeyModal/APIKeyModal.js +1 -1
  18. package/es/components/AddSelect/AddSelect.js +0 -3
  19. package/es/components/AddSelect/AddSelectBody.js +20 -3
  20. package/es/components/AddSelect/AddSelectBreadcrumbs.js +11 -3
  21. package/es/components/AddSelect/AddSelectColumn.js +5 -5
  22. package/es/components/AddSelect/AddSelectFilter.js +5 -4
  23. package/es/components/AddSelect/AddSelectList.js +61 -27
  24. package/es/components/AddSelect/AddSelectMetaPanel.js +1 -1
  25. package/es/components/AddSelect/AddSelectSort.js +1 -1
  26. package/es/components/BreadcrumbWithOverflow/BreadcrumbWithOverflow.js +4 -6
  27. package/es/components/Card/Card.js +16 -6
  28. package/es/components/Card/CardFooter.js +3 -1
  29. package/es/components/Card/CardHeader.js +20 -1
  30. package/es/components/ComboButton/ComboButton.js +1 -1
  31. package/es/components/DataSpreadsheet/DataSpreadsheet.js +63 -11
  32. package/es/components/DataSpreadsheet/DataSpreadsheetBody.js +2 -1
  33. package/es/components/DataSpreadsheet/DataSpreadsheetHeader.js +7 -0
  34. package/es/components/DataSpreadsheet/hooks/useMultipleKeyTracking.js +6 -5
  35. package/es/components/DataSpreadsheet/utils/handleCellDeletion.js +31 -0
  36. package/es/components/DataSpreadsheet/utils/handleMultipleKeys.js +1 -1
  37. package/es/components/Datagrid/Datagrid/Datagrid.js +10 -38
  38. package/es/components/Datagrid/Datagrid/DatagridContent.js +149 -0
  39. package/es/components/Datagrid/Datagrid/DatagridExpandedRow.js +9 -1
  40. package/es/components/Datagrid/Datagrid/DatagridRow.js +10 -2
  41. package/es/components/Datagrid/Datagrid/DatagridSelectAll.js +10 -3
  42. package/es/components/Datagrid/Datagrid/DatagridSelectAllWithToggle.js +13 -4
  43. package/es/components/Datagrid/Datagrid/DatagridToolbar.js +5 -4
  44. package/es/components/Datagrid/Datagrid/DraggableElement.js +6 -2
  45. package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/Actions.js +5 -45
  46. package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/ButtonWrapper.js +1 -1
  47. package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/Columns.js +35 -10
  48. package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/CustomizeColumnsModal.js +61 -24
  49. package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/ModalWrapper.js +3 -2
  50. package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditButton/InlineEditButton.js +60 -0
  51. package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditButton/index.js +1 -0
  52. package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditCell/InlineEditCell.js +534 -0
  53. package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditCell/index.js +1 -0
  54. package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditContext/InlineEditContext.js +112 -0
  55. package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditContext/getCellIdAsObject.js +27 -0
  56. package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditContext/index.js +1 -0
  57. package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditContext/returnUpdatedActiveCell.js +39 -0
  58. package/es/components/Datagrid/Datagrid/addons/InlineEdit/handleGridFocus.js +19 -0
  59. package/es/components/Datagrid/Datagrid/addons/InlineEdit/handleGridKeyPress.js +263 -0
  60. package/es/components/Datagrid/Datagrid/addons/InlineEdit/handleMultipleKeys.js +87 -0
  61. package/es/components/Datagrid/Datagrid/addons/RowSize/RowSizeDropdown.js +17 -14
  62. package/es/components/Datagrid/Datagrid/addons/RowSize/RowSizeRadioGroup.js +13 -36
  63. package/es/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/CustomizeColumnStory.js +0 -0
  64. package/es/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/LeftPanelStory.js +0 -0
  65. package/es/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/RowSizeDropdownStory.js +0 -0
  66. package/es/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/SelectAllWithToggleStory.js +0 -0
  67. package/es/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/StickyActionsColumnStory.js +0 -0
  68. package/es/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/common.js +0 -0
  69. package/es/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/index.js +0 -0
  70. package/es/components/Datagrid/index.js +3 -1
  71. package/es/components/Datagrid/useActionsColumn.js +28 -12
  72. package/es/components/Datagrid/useColumnOrder.js +8 -0
  73. package/es/components/Datagrid/useCustomizeColumns.js +5 -0
  74. package/es/components/Datagrid/useDefaultStringRenderer.js +4 -1
  75. package/es/components/Datagrid/useDisableSelectRows.js +6 -2
  76. package/es/components/Datagrid/useExpandedRow.js +0 -1
  77. package/es/components/Datagrid/useInlineEdit.js +71 -0
  78. package/es/components/Datagrid/useNestedRowExpander.js +42 -0
  79. package/es/components/Datagrid/useNestedRows.js +2 -2
  80. package/es/components/Datagrid/useRowExpander.js +1 -1
  81. package/es/components/Datagrid/useRowSize.js +17 -6
  82. package/es/components/Datagrid/useSelectAllToggle.js +17 -4
  83. package/es/components/Datagrid/useSelectRows.js +12 -2
  84. package/es/components/Datagrid/useSortableColumns.js +1 -1
  85. package/es/components/Datagrid/useStickyColumn.js +11 -0
  86. package/es/components/Datagrid/utils/DatagridActions.js +152 -0
  87. package/es/components/Datagrid/utils/DatagridPagination.js +33 -0
  88. package/es/components/Datagrid/utils/Wrapper.js +21 -0
  89. package/es/components/Datagrid/utils/getArgTypes.js +85 -0
  90. package/es/components/Datagrid/utils/getInlineEditColumns.js +153 -0
  91. package/es/components/Datagrid/utils/makeData.js +47 -2
  92. package/es/components/ExportModal/ExportModal.js +1 -1
  93. package/es/components/ImportModal/ImportModal.js +3 -3
  94. package/es/components/InlineEdit/InlineEdit.js +11 -9
  95. package/es/components/ModifiedTabs/ModifiedTabLabelNew.js +1 -1
  96. package/es/components/ModifiedTabs/ModifiedTabLabelWithClose.js +1 -1
  97. package/es/components/NotificationsPanel/NotificationsPanel.js +1 -1
  98. package/es/components/OptionsTile/OptionsTile.js +1 -1
  99. package/es/components/PageHeader/PageHeader.js +1 -1
  100. package/es/components/ProductiveCard/ProductiveCard.js +5 -0
  101. package/es/components/Saving/Saving.js +1 -1
  102. package/es/components/SidePanel/SidePanel.js +1 -1
  103. package/es/components/StatusIcon/StatusIcon.js +1 -1
  104. package/es/components/UserProfileImage/UserProfileImage.js +1 -1
  105. package/es/components/WebTerminal/WebTerminal.js +2 -2
  106. package/es/components/WebTerminal/WebTerminalContentWrapper.js +1 -1
  107. package/es/components/WebTerminal/hooks/index.js +6 -0
  108. package/es/components/WebTerminal/index.js +6 -0
  109. package/es/components/WebTerminal/preview-components/Navigation.js +7 -1
  110. package/es/components/WebTerminal/preview-components/documentationLinks.js +6 -0
  111. package/es/components/WebTerminal/preview-components/index.js +7 -0
  112. package/es/components/index.js +1 -1
  113. package/es/global/js/hooks/useClickOutside.js +1 -1
  114. package/es/global/js/package-settings.js +3 -3
  115. package/es/global/js/utils/rangeWithCallback.js +13 -0
  116. package/es/global/js/utils/story-helper.js +5 -1
  117. package/es/global/js/utils/uuidv4.spec.js +4 -0
  118. package/lib/components/APIKeyModal/APIKeyModal.js +4 -4
  119. package/lib/components/AddSelect/AddSelect.js +0 -4
  120. package/lib/components/AddSelect/AddSelectBody.js +20 -3
  121. package/lib/components/AddSelect/AddSelectBreadcrumbs.js +14 -3
  122. package/lib/components/AddSelect/AddSelectColumn.js +5 -5
  123. package/lib/components/AddSelect/AddSelectFilter.js +5 -4
  124. package/lib/components/AddSelect/AddSelectList.js +62 -28
  125. package/lib/components/AddSelect/AddSelectMetaPanel.js +2 -2
  126. package/lib/components/AddSelect/AddSelectSort.js +4 -4
  127. package/lib/components/BreadcrumbWithOverflow/BreadcrumbWithOverflow.js +6 -6
  128. package/lib/components/Card/Card.js +16 -6
  129. package/lib/components/Card/CardFooter.js +3 -1
  130. package/lib/components/Card/CardHeader.js +21 -1
  131. package/lib/components/ComboButton/ComboButton.js +3 -3
  132. package/lib/components/DataSpreadsheet/DataSpreadsheet.js +63 -10
  133. package/lib/components/DataSpreadsheet/DataSpreadsheetBody.js +2 -1
  134. package/lib/components/DataSpreadsheet/DataSpreadsheetHeader.js +7 -0
  135. package/lib/components/DataSpreadsheet/hooks/useMultipleKeyTracking.js +6 -5
  136. package/lib/components/DataSpreadsheet/utils/handleCellDeletion.js +42 -0
  137. package/lib/components/DataSpreadsheet/utils/handleMultipleKeys.js +1 -1
  138. package/lib/components/Datagrid/Datagrid/Datagrid.js +12 -45
  139. package/lib/components/Datagrid/Datagrid/DatagridContent.js +183 -0
  140. package/lib/components/Datagrid/Datagrid/DatagridExpandedRow.js +9 -1
  141. package/lib/components/Datagrid/Datagrid/DatagridRow.js +19 -2
  142. package/lib/components/Datagrid/Datagrid/DatagridSelectAll.js +12 -3
  143. package/lib/components/Datagrid/Datagrid/DatagridSelectAllWithToggle.js +16 -5
  144. package/lib/components/Datagrid/Datagrid/DatagridToolbar.js +6 -5
  145. package/lib/components/Datagrid/Datagrid/DraggableElement.js +7 -3
  146. package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/Actions.js +12 -47
  147. package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/ButtonWrapper.js +2 -2
  148. package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/Columns.js +47 -25
  149. package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/CustomizeColumnsModal.js +59 -23
  150. package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/ModalWrapper.js +3 -2
  151. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditButton/InlineEditButton.js +76 -0
  152. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditButton/index.js +13 -0
  153. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditCell/InlineEditCell.js +558 -0
  154. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditCell/index.js +13 -0
  155. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditContext/InlineEditContext.js +129 -0
  156. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditContext/getCellIdAsObject.js +36 -0
  157. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditContext/index.js +19 -0
  158. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditContext/returnUpdatedActiveCell.js +45 -0
  159. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/handleGridFocus.js +28 -0
  160. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/handleGridKeyPress.js +272 -0
  161. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/handleMultipleKeys.js +100 -0
  162. package/lib/components/Datagrid/Datagrid/addons/RowSize/RowSizeDropdown.js +17 -13
  163. package/lib/components/Datagrid/Datagrid/addons/RowSize/RowSizeRadioGroup.js +13 -35
  164. package/lib/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/CustomizeColumnStory.js +0 -0
  165. package/lib/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/LeftPanelStory.js +0 -0
  166. package/lib/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/RowSizeDropdownStory.js +0 -0
  167. package/lib/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/SelectAllWithToggleStory.js +0 -0
  168. package/lib/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/StickyActionsColumnStory.js +0 -0
  169. package/lib/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/common.js +0 -0
  170. package/lib/components/Datagrid/{Datagrid.stories-helpers → Datagrid.stories}/index.js +0 -0
  171. package/lib/components/Datagrid/index.js +17 -1
  172. package/lib/components/Datagrid/useActionsColumn.js +28 -13
  173. package/lib/components/Datagrid/useColumnOrder.js +17 -0
  174. package/lib/components/Datagrid/useCustomizeColumns.js +5 -0
  175. package/lib/components/Datagrid/useDefaultStringRenderer.js +5 -1
  176. package/lib/components/Datagrid/useDisableSelectRows.js +6 -2
  177. package/lib/components/Datagrid/useExpandedRow.js +0 -1
  178. package/lib/components/Datagrid/useInlineEdit.js +85 -0
  179. package/lib/components/Datagrid/useNestedRowExpander.js +57 -0
  180. package/lib/components/Datagrid/useNestedRows.js +3 -3
  181. package/lib/components/Datagrid/useRowExpander.js +3 -3
  182. package/lib/components/Datagrid/useRowSize.js +18 -13
  183. package/lib/components/Datagrid/useSelectAllToggle.js +18 -4
  184. package/lib/components/Datagrid/useSelectRows.js +12 -2
  185. package/lib/components/Datagrid/useSortableColumns.js +5 -5
  186. package/lib/components/Datagrid/useStickyColumn.js +11 -0
  187. package/lib/components/Datagrid/utils/DatagridActions.js +170 -0
  188. package/lib/components/Datagrid/utils/DatagridPagination.js +46 -0
  189. package/lib/components/Datagrid/utils/Wrapper.js +33 -0
  190. package/lib/components/Datagrid/utils/getArgTypes.js +93 -0
  191. package/lib/components/Datagrid/utils/getInlineEditColumns.js +168 -0
  192. package/lib/components/Datagrid/utils/makeData.js +48 -2
  193. package/lib/components/ExportModal/ExportModal.js +3 -3
  194. package/lib/components/ImportModal/ImportModal.js +4 -4
  195. package/lib/components/InlineEdit/InlineEdit.js +16 -14
  196. package/lib/components/ModifiedTabs/ModifiedTabLabelNew.js +2 -2
  197. package/lib/components/ModifiedTabs/ModifiedTabLabelWithClose.js +3 -3
  198. package/lib/components/NotificationsPanel/NotificationsPanel.js +8 -8
  199. package/lib/components/OptionsTile/OptionsTile.js +6 -6
  200. package/lib/components/PageHeader/PageHeader.js +2 -2
  201. package/lib/components/ProductiveCard/ProductiveCard.js +5 -0
  202. package/lib/components/Saving/Saving.js +5 -5
  203. package/lib/components/SidePanel/SidePanel.js +3 -3
  204. package/lib/components/StatusIcon/StatusIcon.js +45 -45
  205. package/lib/components/UserProfileImage/UserProfileImage.js +7 -7
  206. package/lib/components/WebTerminal/WebTerminal.js +3 -3
  207. package/lib/components/WebTerminal/hooks/index.js +6 -0
  208. package/lib/components/WebTerminal/preview-components/Navigation.js +10 -4
  209. package/lib/components/WebTerminal/preview-components/documentationLinks.js +6 -0
  210. package/lib/components/index.js +12 -0
  211. package/lib/global/js/hooks/useClickOutside.js +1 -1
  212. package/lib/global/js/package-settings.js +3 -3
  213. package/lib/global/js/utils/rangeWithCallback.js +22 -0
  214. package/lib/global/js/utils/story-helper.js +5 -1
  215. package/lib/global/js/utils/uuidv4.spec.js +4 -0
  216. package/package.json +15 -15
  217. package/scss/components/AddSelect/_add-select.scss +127 -28
  218. package/scss/components/Card/_card.scss +1 -0
  219. package/scss/components/Cascade/_cascade.scss +1 -1
  220. package/scss/components/CreateTearsheet/_create-tearsheet.scss +2 -0
  221. package/scss/components/Datagrid/_datagrid.scss +7 -0
  222. package/scss/components/Datagrid/_storybook-styles.scss +8 -5
  223. package/scss/components/Datagrid/styles/_datagrid.scss +38 -14
  224. package/scss/components/Datagrid/styles/_draggableElement.scss +26 -9
  225. package/scss/components/Datagrid/styles/_index.scss +1 -0
  226. package/scss/components/Datagrid/styles/_useActionsColumn.scss +14 -0
  227. package/scss/components/Datagrid/styles/_useExpandedRow.scss +37 -9
  228. package/scss/components/Datagrid/styles/_useInlineEdit.scss +404 -0
  229. package/scss/components/Datagrid/styles/_useNestedRows.scss +16 -1
  230. package/scss/components/Datagrid/styles/_useStickyColumn.scss +31 -2
  231. package/scss/components/Datagrid/styles/addons/_CustomizeColumnsModal.scss +45 -6
  232. package/scss/components/Datagrid/styles/addons/_RowSizeDropdown.scss +9 -1
  233. package/scss/components/InlineEdit/_inline-edit.scss +4 -2
  234. package/scss/components/NotificationsPanel/_notifications-panel.scss +3 -6
  235. package/scss/components/RemoveModal/_remove-modal.scss +0 -4
  236. package/scss/components/SidePanel/_side-panel.scss +3 -6
  237. package/scss/components/Tearsheet/_tearsheet.scss +2 -2
  238. package/scss/components/WebTerminal/_carbon-imports.scss +6 -0
  239. package/scss/components/WebTerminal/_index.scss +7 -0
  240. package/scss/components/WebTerminal/_storybook-styles.scss +7 -0
  241. package/scss/components/_index-released-only.scss +1 -0
@@ -2533,7 +2533,7 @@
2533
2533
  @media (prefers-reduced-motion: no-preference) {
2534
2534
  .c4p--cascade__element,
2535
2535
  .c4p--cascade__col {
2536
- /* stylelint-disable-next-line carbon/motion-duration-use -- Carbon animation duration defined above in $animationProps */
2536
+ /* stylelint-disable-next-line carbon/motion-duration-use, carbon/motion-easing-use -- Carbon animation duration defined above in $animationProps */
2537
2537
  animation: 240ms cubic-bezier(0.2, 0, 0.38, 0.9) 0s 1 fade;
2538
2538
  animation-fill-mode: forwards;
2539
2539
  opacity: 0;
@@ -2965,8 +2965,7 @@
2965
2965
  box-sizing: border-box;
2966
2966
  background-color: var(--cds-layer-01, #f4f4f4);
2967
2967
  color: var(--cds-text-primary, #161616);
2968
- transition: transform 240ms;
2969
- transition-timing-function: cubic-bezier(0.2, 0, 0.38, 0.9);
2968
+ transition: transform 240ms cubic-bezier(0.2, 0, 0.38, 0.9);
2970
2969
  }
2971
2970
  .c4p--side-panel__container.c4p--side-panel__container--xs {
2972
2971
  width: 16rem;
@@ -3382,8 +3381,7 @@
3382
3381
  padding: 0 1rem;
3383
3382
  margin-bottom: 0.5rem;
3384
3383
  background-color: var(--cds-layer-01, #f4f4f4);
3385
- transition: transform 150ms;
3386
- transition-timing-function: cubic-bezier(0.2, 0, 0.38, 0.9);
3384
+ transition: transform 150ms cubic-bezier(0.2, 0, 0.38, 0.9);
3387
3385
  }
3388
3386
  .c4p--side-panel__container .c4p--side-panel__action-toolbar .c4p--side-panel__action-toolbar-button {
3389
3387
  min-width: 2rem;
@@ -3514,8 +3512,7 @@
3514
3512
  width: 100%;
3515
3513
  height: 100%;
3516
3514
  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);
3515
+ transition: background-color 240ms cubic-bezier(0.2, 0, 0.38, 0.9);
3519
3516
  }
3520
3517
 
3521
3518
  .c4p--create-side-panel.c4p--side-panel__container .c4p--create-side-panel__content-text {
@@ -3662,7 +3659,7 @@
3662
3659
  /* stylelint-disable-next-line function-no-unknown */
3663
3660
  z-index: 9000;
3664
3661
  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);
3662
+ transition: visibility 0s linear, background-color 240ms cubic-bezier(0, 0, 0.3, 1), opacity 240ms cubic-bezier(0, 0, 0.3, 1);
3666
3663
  }
3667
3664
  @media (prefers-reduced-motion: reduce) {
3668
3665
  .c4p--tearsheet.is-visible {
@@ -4444,7 +4441,6 @@
4444
4441
 
4445
4442
  /* stylelint-disable max-nesting-depth */
4446
4443
  .c4p--add-select__selections.cds--structured-list {
4447
- border-top: 1px solid var(--cds-layer-accent-01, #e0e0e0);
4448
4444
  margin-bottom: 0;
4449
4445
  }
4450
4446
  .c4p--add-select__selections-wrapper {
@@ -4452,8 +4448,11 @@
4452
4448
  }
4453
4449
  .c4p--add-select__selections-cell-wrapper {
4454
4450
  display: flex;
4451
+ height: 3rem;
4455
4452
  align-items: center;
4456
4453
  justify-content: space-between;
4454
+ padding: 0 1rem;
4455
+ border-bottom: 1px solid var(--cds-layer-accent-01, #e0e0e0);
4457
4456
  }
4458
4457
  .c4p--add-select__selections-cell-title {
4459
4458
  display: block;
@@ -4467,17 +4466,20 @@
4467
4466
  display: block;
4468
4467
  color: var(--cds-text-secondary, #525252);
4469
4468
  }
4469
+ .c4p--add-select__selections-cell {
4470
+ display: flex;
4471
+ flex-direction: column;
4472
+ justify-content: center;
4473
+ }
4470
4474
  .c4p--add-select__selections-cell:hover .c4p--add-select__selections-hidden-hover {
4471
4475
  visibility: visible;
4472
4476
  }
4473
4477
  .c4p--add-select__selections-hidden-hover {
4474
4478
  visibility: hidden;
4475
4479
  }
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;
4480
+ .c4p--add-select__selections-row-selectedcds--structured-list-row {
4481
+ border-bottom: 1px solid var(--cds-layer-selected-01, #e0e0e0);
4482
+ background-color: var(--cds-layer-selected-01, #e0e0e0);
4481
4483
  }
4482
4484
  .c4p--add-select__selections-checkbox {
4483
4485
  display: flex;
@@ -4485,7 +4487,7 @@
4485
4487
  }
4486
4488
  .c4p--add-select__selections-checkbox-label-wrapper {
4487
4489
  display: flex;
4488
- margin-left: 0.5rem;
4490
+ margin-left: 1rem;
4489
4491
  }
4490
4492
  .c4p--add-select__selections-checkbox-label-text {
4491
4493
  display: flex;
@@ -4503,6 +4505,13 @@
4503
4505
  .c4p--add-select__selections-cell-icon {
4504
4506
  margin-right: 0.5rem;
4505
4507
  }
4508
+ .c4p--add-select__selections-row {
4509
+ border-left: 0.125rem solid transparent;
4510
+ }
4511
+ .c4p--add-select__selections-row-meta-selected {
4512
+ border-left: 0.125rem solid var(--cds-interactive, #0f62fe);
4513
+ background-color: var(--cds-layer-hover-01, #e8e8e8);
4514
+ }
4506
4515
 
4507
4516
  .c4p--add-select .c4p--add-select__selections-row:hover .c4p--add-select__selections-radio {
4508
4517
  color: var(--cds-interactive, #0f62fe);
@@ -4514,15 +4523,31 @@
4514
4523
  fill: currentColor;
4515
4524
  }
4516
4525
 
4526
+ .c4p--add-select cds--structured-list--selection .c4p--add-select__selections-row-selectedcds--structured-list-row:hover:not(cds--structured-list-row--header-row):not(cds--structured-list-row--selected) {
4527
+ border-bottom: 1px solid var(--cds-layer-accent-hover-01, #d1d1d1);
4528
+ background-color: var(--cds-layer-selected-hover-01, #d1d1d1);
4529
+ }
4530
+
4517
4531
  .c4p--add-select__sub-header {
4518
4532
  display: flex;
4519
4533
  align-items: flex-end;
4520
4534
  justify-content: space-between;
4521
4535
  }
4536
+ .c4p--add-select__sub-header-multi {
4537
+ padding: 0 1rem;
4538
+ }
4539
+
4540
+ .c4p--add-select cds--structured-list-row {
4541
+ border-bottom: 0;
4542
+ }
4543
+
4544
+ .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) {
4545
+ border-bottom: 0;
4546
+ }
4522
4547
 
4523
4548
  .c4p--add-select__sidebar-header {
4524
4549
  display: flex;
4525
- padding: 1.5rem 1rem 0.5rem 1rem;
4550
+ padding: 2rem 1rem 0.5rem 1rem;
4526
4551
  border-bottom: 1px solid var(--cds-layer-accent-01, #e0e0e0);
4527
4552
  }
4528
4553
  .c4p--add-select__sidebar-header .c4p--add-select__sidebar-title {
@@ -4548,7 +4573,7 @@
4548
4573
  }
4549
4574
 
4550
4575
  .c4p--add-select__sidebar-body {
4551
- padding: 1rem;
4576
+ padding: 0 1rem;
4552
4577
  }
4553
4578
 
4554
4579
  .c4p--add-select .c4p--add-select__sidebar-item-header {
@@ -4581,18 +4606,44 @@
4581
4606
  .c4p--add-select__columns {
4582
4607
  display: flex;
4583
4608
  flex-direction: row;
4609
+ flex-grow: 1;
4584
4610
  overflow-x: auto;
4585
4611
  }
4612
+ .c4p--add-select__columns .c4p--add-select__selections-checkbox-label-wrapper {
4613
+ margin-left: 0.5rem;
4614
+ }
4615
+ .c4p--add-select__columns .c4p--add-select__selections-rowcds--structured-list-row {
4616
+ border-left: 0;
4617
+ }
4618
+ .c4p--add-select__columns .c4p--add-select__selections .c4p--add-select__selections-cell {
4619
+ padding: 0;
4620
+ }
4621
+ .c4p--add-select__columns .c4p--add-select__selections-cell-wrapper {
4622
+ height: auto;
4623
+ padding: 0 0.5rem;
4624
+ }
4625
+ .c4p--add-select__columns .c4p--add-select__tag-container {
4626
+ padding: 0 0.5rem;
4627
+ margin-bottom: 0;
4628
+ }
4629
+ .c4p--add-select__columns .c4p--add-select__selections-wrapper-multi {
4630
+ padding: 0;
4631
+ }
4632
+ .c4p--add-select__columns .c4p--add-select__selectionscds--structured-list {
4633
+ border-top: 0;
4634
+ }
4586
4635
 
4587
- .c4p--add-select .c4p--add-select__columns .cds--structured-list-td {
4588
- height: 0;
4589
- padding: 0 !important;
4636
+ .c4p--add-select__selections-wrapper-multi .c4p--add-select__selections-cell {
4637
+ padding: 0 1rem;
4638
+ }
4639
+
4640
+ .c4p--add-select__selections-row:first-child .c4p--add-select__selections-cell-wrapper {
4641
+ border-top: 1px solid var(--cds-border-subtle-01, #e0e0e0);
4590
4642
  }
4591
4643
 
4592
4644
  .c4p--add-select__column {
4593
4645
  overflow: auto;
4594
- max-width: 15rem;
4595
- flex: 1 0 15rem;
4646
+ flex: 0 0 20rem;
4596
4647
  padding: 1rem;
4597
4648
  border-top: 1px solid var(--cds-border-subtle-01, #e0e0e0);
4598
4649
  border-right: 1px solid var(--cds-border-subtle-01, #e0e0e0);
@@ -4691,13 +4742,6 @@ button.c4p--add-select__global-filter-toggle--open {
4691
4742
  letter-spacing: var(--cds-productive-heading-01-letter-spacing, 0.16px);
4692
4743
  }
4693
4744
 
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
4745
  .c4p--add-select__meta-panel p.c4p--add-select__meta-panel-entry-body {
4702
4746
  font-size: var(--cds-body-short-01-font-size, 0.875rem);
4703
4747
  font-weight: var(--cds-body-short-01-font-weight, 400);
@@ -4710,8 +4754,7 @@ button.c4p--add-select__global-filter-toggle--open {
4710
4754
  }
4711
4755
 
4712
4756
  .c4p--add-select.c4p--tearsheet .c4p--tearsheet__influencer {
4713
- max-width: 29rem;
4714
- flex: 0 0 50%;
4757
+ flex-basis: 22.5rem;
4715
4758
  }
4716
4759
 
4717
4760
  .c4p--add-select.c4p--tearsheet .c4p--tearsheet__header-description {
@@ -4723,6 +4766,10 @@ button.c4p--add-select__global-filter-toggle--open {
4723
4766
  flex-direction: column;
4724
4767
  }
4725
4768
 
4769
+ .c4p--add-select.c4p--add-select__multi .c4p--action-set.cds--btn-set.c4p--action-set--max .c4p--action-set__action-button {
4770
+ max-width: 11.25rem;
4771
+ }
4772
+
4726
4773
  .c4p--add-select .c4p--add-select__items-label {
4727
4774
  font-size: var(--cds-productive-heading-01-font-size, 0.875rem);
4728
4775
  font-weight: var(--cds-productive-heading-01-font-weight, 600);
@@ -4763,6 +4810,33 @@ button.c4p--add-select__global-filter-toggle--open {
4763
4810
  padding-left: 0.5rem;
4764
4811
  }
4765
4812
 
4813
+ .c4p--add-select__multi .c4p--empty-state {
4814
+ max-width: 16rem;
4815
+ margin-top: 3rem;
4816
+ }
4817
+
4818
+ .c4p--add-select .cds--accordion__arrow {
4819
+ transform: rotate(0deg);
4820
+ }
4821
+
4822
+ .c4p--add-select .cds--accordion__item--active .cds--accordion__arrow {
4823
+ transform: rotate(90deg);
4824
+ }
4825
+
4826
+ .c4p--add-select cds--accordion--start cds--accordion__arrow {
4827
+ margin: 0 0 0 1rem;
4828
+ }
4829
+
4830
+ .c4p--add-select cds--accordion--start cds--accordion__title {
4831
+ margin: 0 1rem 0 0.5rem;
4832
+ }
4833
+
4834
+ .c4p--add-select cds--accordion__item--active cds--accordion__content {
4835
+ padding-top: 0;
4836
+ padding-bottom: 0;
4837
+ margin-top: 0.5rem;
4838
+ }
4839
+
4766
4840
  .cds--tooltip,
4767
4841
  .cds--overflow-menu-options {
4768
4842
  z-index: 9000;
@@ -4909,6 +4983,10 @@ button.c4p--add-select__global-filter-toggle--open {
4909
4983
  --cds-helper-text-01-font-size: 0.75rem;
4910
4984
  --cds-helper-text-01-line-height: 1.33333;
4911
4985
  --cds-helper-text-01-letter-spacing: 0.32px;
4986
+ --cds-helper-text-02-font-size: carbon--type-scale(2);
4987
+ --cds-helper-text-02-font-weight: carbon--font-weight("regular");
4988
+ --cds-helper-text-02-line-height: 1.28572;
4989
+ --cds-helper-text-02-letter-spacing: 0.16px;
4912
4990
  --cds-body-short-01-font-size: 0.875rem;
4913
4991
  --cds-body-short-01-font-weight: 400;
4914
4992
  --cds-body-short-01-line-height: 1.28572;
@@ -5147,8 +5225,7 @@ button.c4p--add-select__global-filter-toggle--open {
5147
5225
  max-height: 38.5rem;
5148
5226
  background-color: var(--cds-background, #ffffff);
5149
5227
  color: var(--cds-text-primary, #161616);
5150
- transition: transform 110ms;
5151
- transition-timing-function: cubic-bezier(0.2, 0, 0.38, 0.9);
5228
+ transition: transform 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
5152
5229
  }
5153
5230
  .c4p--notifications-panel__container .c4p--notifications-panel__header-container {
5154
5231
  position: sticky;
@@ -5222,8 +5299,7 @@ button.c4p--add-select__global-filter-toggle--open {
5222
5299
  background-color: var(--cds-background, #ffffff);
5223
5300
  cursor: pointer;
5224
5301
  text-align: left;
5225
- transition: background-color 240ms;
5226
- transition-timing-function: cubic-bezier(0.2, 0, 0.38, 0.9);
5302
+ transition: background-color 240ms cubic-bezier(0.2, 0, 0.38, 0.9);
5227
5303
  }
5228
5304
  .c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__notification-title {
5229
5305
  margin-bottom: 0.25rem;
@@ -5336,8 +5412,7 @@ button.c4p--add-select__global-filter-toggle--open {
5336
5412
  margin: 0 auto;
5337
5413
  background-color: var(--cds-layer-02, #ffffff);
5338
5414
  content: "";
5339
- transition: background-color 240ms;
5340
- transition-timing-function: cubic-bezier(0.2, 0, 0.38, 0.9);
5415
+ transition: background-color 240ms cubic-bezier(0.2, 0, 0.38, 0.9);
5341
5416
  }
5342
5417
  .c4p--notifications-panel__container .c4p--notifications-panel__notification-today:hover + .c4p--notifications-panel__notification-today:not(:first-of-type):before,
5343
5418
  .c4p--notifications-panel__container .c4p--notifications-panel__notification-yesterday:hover + .c4p--notifications-panel__notification-yesterday:not(:first-of-type):before,
@@ -7879,10 +7954,6 @@ button.c4p--add-select__global-filter-toggle--open {
7879
7954
  padding-right: 1rem;
7880
7955
  }
7881
7956
 
7882
- .c4p--remove-modal .cds--modal-close {
7883
- display: none;
7884
- }
7885
-
7886
7957
  .c4p--remove-modal__body {
7887
7958
  padding-right: 20%;
7888
7959
  margin-bottom: 1rem;
@@ -8685,6 +8756,10 @@ button.c4p--add-select__global-filter-toggle--open {
8685
8756
  --cds-helper-text-01-font-size: 0.75rem;
8686
8757
  --cds-helper-text-01-line-height: 1.33333;
8687
8758
  --cds-helper-text-01-letter-spacing: 0.32px;
8759
+ --cds-helper-text-02-font-size: carbon--type-scale(2);
8760
+ --cds-helper-text-02-font-weight: carbon--font-weight("regular");
8761
+ --cds-helper-text-02-line-height: 1.28572;
8762
+ --cds-helper-text-02-letter-spacing: 0.16px;
8688
8763
  --cds-body-short-01-font-size: 0.875rem;
8689
8764
  --cds-body-short-01-font-weight: 400;
8690
8765
  --cds-body-short-01-line-height: 1.28572;
@@ -9057,6 +9132,10 @@ button.c4p--add-select__global-filter-toggle--open {
9057
9132
  --cds-helper-text-01-font-size: 0.75rem;
9058
9133
  --cds-helper-text-01-line-height: 1.33333;
9059
9134
  --cds-helper-text-01-letter-spacing: 0.32px;
9135
+ --cds-helper-text-02-font-size: carbon--type-scale(2);
9136
+ --cds-helper-text-02-font-weight: carbon--font-weight("regular");
9137
+ --cds-helper-text-02-line-height: 1.28572;
9138
+ --cds-helper-text-02-letter-spacing: 0.16px;
9060
9139
  --cds-body-short-01-font-size: 0.875rem;
9061
9140
  --cds-body-short-01-font-weight: 400;
9062
9141
  --cds-body-short-01-line-height: 1.28572;
@@ -9818,7 +9897,9 @@ button.c4p--add-select__global-filter-toggle--open {
9818
9897
  display: inline-block;
9819
9898
  overflow: hidden;
9820
9899
  width: calc(100% - var(--c4p--inline-edit--toolbar-width) - 1rem);
9821
- max-width: calc(100% - var(--c4p--inline-edit--toolbar-width) - 1rem);
9900
+ max-width: calc(
9901
+ 100% - var(--c4p--inline-edit--toolbar-width) - 1rem
9902
+ );
9822
9903
  min-height: var(--c4p--inline-edit--size);
9823
9904
  /* stylelint-disable-next-line carbon/layout-token-use */
9824
9905
  margin-right: var(--c4p--inline-edit--toolbar-width);
@@ -10309,6 +10390,11 @@ button.c4p--add-select__global-filter-toggle--open {
10309
10390
  align-items: center;
10310
10391
  color: var(--cds-text-primary, #161616);
10311
10392
  }
10393
+ .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 {
10394
+ position: sticky;
10395
+ z-index: 1;
10396
+ left: 0;
10397
+ }
10312
10398
  .c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-center .c4p--datagrid__cell {
10313
10399
  align-items: center;
10314
10400
  padding-top: 0;
@@ -10325,6 +10411,11 @@ button.c4p--add-select__global-filter-toggle--open {
10325
10411
  align-items: center;
10326
10412
  padding-top: 0;
10327
10413
  }
10414
+ .c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-center td.cds--table-column-checkbox.c4p--datagrid__checkbox-cell-sticky-left,
10415
+ .c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-center th.cds--table-column-checkbox.c4p--datagrid__checkbox-cell-sticky-left {
10416
+ position: sticky;
10417
+ left: 0;
10418
+ }
10328
10419
  .c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-center .c4p--datagrid__checkbox-cell th.cds--table-column-checkbox {
10329
10420
  display: flex;
10330
10421
  height: 100%;
@@ -10384,9 +10475,12 @@ button.c4p--add-select__global-filter-toggle--open {
10384
10475
  height: 100%;
10385
10476
  overflow-x: auto;
10386
10477
  }
10387
- .c4p--datagrid__grid-container .c4p--datagrid__table-simple {
10388
- overflow: hidden;
10478
+ .c4p--datagrid__grid-container table.c4p--datagrid__table-simple {
10479
+ display: flex;
10480
+ overflow: auto;
10389
10481
  max-height: 100%;
10482
+ flex-direction: column;
10483
+ background-color: var(--cds-layer-01, #f4f4f4);
10390
10484
  }
10391
10485
  .c4p--datagrid__grid-container .c4p--datagrid__head {
10392
10486
  display: flex;
@@ -10417,6 +10511,12 @@ button.c4p--add-select__global-filter-toggle--open {
10417
10511
  text-overflow: ellipsis;
10418
10512
  white-space: nowrap;
10419
10513
  }
10514
+ .c4p--datagrid__grid-container .c4p--datagrid__defaultStringRenderer.c4p--datagrid__defaultStringRenderer--multiline {
10515
+ display: -webkit-box;
10516
+ -webkit-box-orient: vertical;
10517
+ -webkit-line-clamp: 2;
10518
+ white-space: initial;
10519
+ }
10420
10520
  .c4p--datagrid__grid-container .c4p--datagrid__expanded-row {
10421
10521
  display: flex;
10422
10522
  overflow: hidden;
@@ -10468,10 +10568,6 @@ button.c4p--add-select__global-filter-toggle--open {
10468
10568
  flex: 1 1 auto;
10469
10569
  }
10470
10570
 
10471
- .c4p--datagrid__with-pagination table tr:last-of-type > td {
10472
- border-bottom: none;
10473
- }
10474
-
10475
10571
  .c4p--datagrid__resizer {
10476
10572
  position: absolute;
10477
10573
  z-index: 1;
@@ -10511,6 +10607,12 @@ button.c4p--add-select__global-filter-toggle--open {
10511
10607
  .c4p--datagrid__head-hidden-select-all {
10512
10608
  padding-right: 2.5rem;
10513
10609
  }
10610
+ .c4p--datagrid__head-hidden-select-all.c4p--datagrid__select-all-sticky-left {
10611
+ position: sticky;
10612
+ z-index: 1;
10613
+ left: 0;
10614
+ background-color: var(--cds-layer-accent-01, #e0e0e0);
10615
+ }
10514
10616
 
10515
10617
  .c4p--datagrid__simple-body {
10516
10618
  position: relative;
@@ -10534,15 +10636,6 @@ button.c4p--add-select__global-filter-toggle--open {
10534
10636
  min-width: 0 !important;
10535
10637
  }
10536
10638
 
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
10639
  .c4p--datagrid__sticky.c4p--datagrid__simple-body {
10547
10640
  overflow: auto;
10548
10641
  }
@@ -10690,10 +10783,21 @@ button.c4p--add-select__global-filter-toggle--open {
10690
10783
  margin: 0;
10691
10784
  }
10692
10785
 
10786
+ .c4p--datagrid .c4p--button-menu {
10787
+ height: 3rem;
10788
+ }
10789
+
10790
+ .c4p--datagrid .c4p--datagrid__row-size-button {
10791
+ display: flex;
10792
+ width: 3rem;
10793
+ height: 3rem;
10794
+ justify-content: center;
10795
+ }
10796
+
10693
10797
  /*
10694
10798
  * Licensed Materials - Property of IBM
10695
10799
  * 5724-Q36
10696
- * (c) Copyright IBM Corp. 2020 - 2021
10800
+ * (c) Copyright IBM Corp. 2020 - 2022
10697
10801
  * US Government Users Restricted Rights - Use, duplication or disclosure
10698
10802
  * restricted by GSA ADP Schedule Contract with IBM Corp.
10699
10803
  */
@@ -10704,6 +10808,18 @@ button.c4p--add-select__global-filter-toggle--open {
10704
10808
  border-bottom: 1px solid var(--cds-layer-accent-01, #e0e0e0);
10705
10809
  }
10706
10810
 
10811
+ .c4p--datagrid .c4p--datagrid__expander-icon {
10812
+ transition: transform 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
10813
+ }
10814
+
10815
+ .c4p--datagrid .c4p--datagrid__expander-icon--open {
10816
+ transform: rotate(90deg);
10817
+ }
10818
+
10819
+ .c4p--datagrid__expanded-row .c4p--datagrid__carbon-row-expanded td:first-child {
10820
+ border-bottom: none;
10821
+ }
10822
+
10707
10823
  /*
10708
10824
  * Licensed Materials - Property of IBM
10709
10825
  * 5724-Q36
@@ -10832,14 +10948,36 @@ button.c4p--add-select__global-filter-toggle--open {
10832
10948
  /* stylelint-disable-next-line declaration-no-important */
10833
10949
  position: sticky !important;
10834
10950
  right: 0;
10835
- box-shadow: -2px 1px 3px var(--cds-overlay, rgba(22, 22, 22, 0.5));
10951
+ display: flex;
10952
+ align-items: center;
10953
+ border-left: 1px solid var(--cds-layer-accent-01, #e0e0e0);
10836
10954
  }
10837
10955
 
10838
10956
  .c4p--datagrid__right-sticky-column-header {
10839
10957
  /* stylelint-disable-next-line declaration-no-important */
10840
10958
  position: sticky !important;
10841
10959
  right: 0;
10842
- box-shadow: -2px 1px 3px var(--cds-overlay, rgba(22, 22, 22, 0.5));
10960
+ }
10961
+
10962
+ .c4p--datagrid__left-sticky-column-cell {
10963
+ /* stylelint-disable-next-line declaration-no-important */
10964
+ position: sticky !important;
10965
+ left: 0;
10966
+ display: flex;
10967
+ align-items: center;
10968
+ border-right: 1px solid var(--cds-layer-accent-01, #e0e0e0);
10969
+ }
10970
+
10971
+ .c4p--datagrid__left-sticky-column-header {
10972
+ /* stylelint-disable-next-line declaration-no-important */
10973
+ position: sticky !important;
10974
+ z-index: 1;
10975
+ left: 0;
10976
+ }
10977
+
10978
+ .c4p--datagrid__left-sticky-column-cell.c4p--datagrid__left-sticky-column-cell--with-extra-select-column,
10979
+ .c4p--datagrid__left-sticky-column-header.c4p--datagrid__left-sticky-column-header--with-extra-select-column {
10980
+ left: 2.5rem;
10843
10981
  }
10844
10982
 
10845
10983
  .c4p--datagrid__sticky-noShadow {
@@ -10855,6 +10993,12 @@ button.c4p--add-select__global-filter-toggle--open {
10855
10993
  right: 6px !important;
10856
10994
  }
10857
10995
 
10996
+ .c4p--datagrid__select-all-toggle-on.c4p--datagrid__select-all-sticky-left {
10997
+ position: sticky;
10998
+ z-index: 1;
10999
+ left: 0;
11000
+ }
11001
+
10858
11002
  /*
10859
11003
  * Licensed Materials - Property of IBM
10860
11004
  * 5724-Q36
@@ -10877,6 +11021,18 @@ button.c4p--add-select__global-filter-toggle--open {
10877
11021
  margin-bottom: 0.5rem;
10878
11022
  }
10879
11023
 
11024
+ .c4p--datagrid .c4p--datagrid__disabled-row-action-button {
11025
+ cursor: not-allowed;
11026
+ }
11027
+
11028
+ .c4p--datagrid .c4p--datagrid__disabled-row-action {
11029
+ pointer-events: none;
11030
+ }
11031
+
11032
+ .c4p--datagrid .c4p--datagrid__disabled-row-action svg {
11033
+ fill: var(--cds-layer-selected-disabled, #8d8d8d);
11034
+ }
11035
+
10880
11036
  /*
10881
11037
  * Licensed Materials - Property of IBM
10882
11038
  * 5724-Q36
@@ -10888,21 +11044,30 @@ button.c4p--add-select__global-filter-toggle--open {
10888
11044
  position: inherit;
10889
11045
  display: flex;
10890
11046
  flex-flow: column;
10891
- /* stylelint-disable-next-line declaration-no-important */
10892
- padding-top: 0 !important;
11047
+ padding: 0;
11048
+ margin: 0;
10893
11049
  }
10894
11050
 
10895
- .c4p--datagrid__customize-columns-checkbox {
11051
+ .c4p--datagrid__customize-columns-checkbox-wrapper {
11052
+ margin-bottom: 0;
11053
+ }
11054
+
11055
+ .c4p--datagrid__customize-columns-checkbox-wrapper {
10896
11056
  display: flex;
10897
11057
  justify-content: center;
10898
- /* stylelint-disable-next-line declaration-no-important */
10899
- margin-bottom: 0 !important;
10900
11058
  }
10901
11059
 
10902
11060
  .c4p--datagrid__customize-columns-modal--actions {
10903
11061
  display: flex;
11062
+ height: 3rem;
10904
11063
  flex-flow: row;
10905
- margin-bottom: 1.5rem;
11064
+ background-color: var(--cds-field-02, #ffffff);
11065
+ }
11066
+
11067
+ .c4p--datagrid__customize-columns-modal--actions input[role=searchbox] {
11068
+ height: 3rem;
11069
+ padding-left: 2.5rem;
11070
+ border-bottom: none;
10906
11071
  }
10907
11072
 
10908
11073
  .c4p--datagrid__customize-columns-modal--actions > button {
@@ -10910,6 +11075,7 @@ button.c4p--add-select__global-filter-toggle--open {
10910
11075
  }
10911
11076
 
10912
11077
  .c4p--datagrid__customize-columns-instructions {
11078
+ padding-left: 1rem;
10913
11079
  margin-bottom: 1.5rem;
10914
11080
  font-size: var(--cds-body-long-01-font-size, 0.875rem);
10915
11081
  font-weight: var(--cds-body-long-01-font-weight, 400);
@@ -10923,6 +11089,34 @@ button.c4p--add-select__global-filter-toggle--open {
10923
11089
  overflow: auto;
10924
11090
  }
10925
11091
 
11092
+ .c4p--datagrid__customize-columns-select-all {
11093
+ display: flex;
11094
+ height: 3rem;
11095
+ padding-left: 2.5rem;
11096
+ border-bottom: 1px solid var(--cds-layer-active);
11097
+ background-color: var(--cds-layer-01, #f4f4f4);
11098
+ }
11099
+
11100
+ .c4p--datagrid__customize-columns-select-all:hover {
11101
+ background-color: var(--cds-layer-hover-01, #e8e8e8);
11102
+ }
11103
+
11104
+ .c4p--datagrid__customize-columns-select-all-selected {
11105
+ display: flex;
11106
+ height: 3rem;
11107
+ padding-left: 2.5rem;
11108
+ border-bottom: 1px solid var(--cds-layer-active);
11109
+ background-color: var(--cds-layer-selected-01, #e0e0e0);
11110
+ }
11111
+
11112
+ .c4p--datagrid__customize-columns-select-all-selected:hover {
11113
+ background-color: var(--cds-background-selected-hover, rgba(141, 141, 141, 0.32));
11114
+ }
11115
+
11116
+ .c4p--datagrid .c4p--datagrid__customize-columns-modal .cds--modal-content {
11117
+ margin-bottom: 0;
11118
+ }
11119
+
10926
11120
  /*
10927
11121
  * Licensed Materials - Property of IBM
10928
11122
  * 5724-Q36
@@ -10931,7 +11125,6 @@ button.c4p--add-select__global-filter-toggle--open {
10931
11125
  * restricted by GSA ADP Schedule Contract with IBM Corp.
10932
11126
  */
10933
11127
  .c4p--datagrid__row-size-dropdown {
10934
- position: absolute;
10935
11128
  padding: 1rem;
10936
11129
  background-color: var(--cds-background, #ffffff);
10937
11130
  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 +11135,11 @@ button.c4p--add-select__global-filter-toggle--open {
10942
11135
  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
11136
  }
10944
11137
 
11138
+ .c4p--datagrid .cds--popover--bottom-right.c4p--datagrid__row-height-settings-popover .cds--popover-caret {
11139
+ /* stylelint-disable-next-line carbon/layout-token-use */
11140
+ left: -4px;
11141
+ }
11142
+
10945
11143
  /*
10946
11144
  * Licensed Materials - Property of IBM
10947
11145
  * 5724-Q36
@@ -10959,74 +11157,471 @@ td.c4p--datagrid__select-all-toggle-on {
10959
11157
  flex: 0 0 auto;
10960
11158
  }
10961
11159
 
10962
- th.c4p--datagrid__select-all-toggle-on {
10963
- display: flex;
10964
- align-items: center;
10965
- justify-content: center;
11160
+ th.c4p--datagrid__select-all-toggle-on {
11161
+ display: flex;
11162
+ align-items: center;
11163
+ justify-content: center;
11164
+ }
11165
+
11166
+ th.c4p--datagrid__select-all-toggle-on.button {
11167
+ margin-left: 0.125rem;
11168
+ }
11169
+
11170
+ /*
11171
+ * Licensed Materials - Property of IBM
11172
+ * 5724-Q36
11173
+ * (c) Copyright IBM Corp. 2022
11174
+ * US Government Users Restricted Rights - Use, duplication or disclosure
11175
+ * restricted by GSA ADP Schedule Contract with IBM Corp.
11176
+ */
11177
+ .c4p--datagrid .c4p--datagrid__expanded-row-content {
11178
+ position: relative;
11179
+ padding: 1rem 1rem 1.5rem 3rem;
11180
+ }
11181
+
11182
+ .c4p--datagrid .c4p--datagrid__expanded-row-content::before {
11183
+ position: absolute;
11184
+ /* stylelint-disable-next-line carbon/layout-token-use */
11185
+ top: -1px;
11186
+ right: 0;
11187
+ width: calc(100% - 3rem);
11188
+ height: 1px;
11189
+ background-color: var(--cds-layer-accent);
11190
+ content: "";
11191
+ }
11192
+
11193
+ .c4p--datagrid .c4p--datagrid__expanded-row-content::after {
11194
+ position: absolute;
11195
+ bottom: 0;
11196
+ left: 0;
11197
+ width: 100%;
11198
+ height: 1px;
11199
+ background-color: var(--cds-layer-accent);
11200
+ content: "";
11201
+ }
11202
+
11203
+ /*
11204
+ * Licensed Materials - Property of IBM
11205
+ * 5724-Q36
11206
+ * (c) Copyright IBM Corp. 2022
11207
+ * US Government Users Restricted Rights - Use, duplication or disclosure
11208
+ * restricted by GSA ADP Schedule Contract with IBM Corp.
11209
+ */
11210
+ .c4p--datagrid__draggable-handleStyle {
11211
+ display: flex;
11212
+ align-items: center;
11213
+ margin-right: 0.5rem;
11214
+ cursor: grab;
11215
+ }
11216
+
11217
+ .c4p--datagrid__draggable-handleStyle.disabled {
11218
+ pointer-events: none;
11219
+ }
11220
+
11221
+ svg.c4p--datagrid__draggable-handleStyle.disable {
11222
+ fill: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
11223
+ }
11224
+
11225
+ .c4p--datagrid__draggable-handleHolder {
11226
+ display: flex;
11227
+ height: 3rem;
11228
+ padding-left: 1rem;
11229
+ border-bottom: 1px solid var(--cds-layer-active);
11230
+ background-color: var(--cds-layer);
11231
+ }
11232
+
11233
+ .c4p--datagrid__draggable-handleHolder:hover {
11234
+ background-color: var(--cds-layer-hover);
11235
+ }
11236
+
11237
+ .c4p--datagrid__draggable-handleHolder-selected {
11238
+ display: flex;
11239
+ height: 3rem;
11240
+ padding-left: 1rem;
11241
+ border-bottom: 1px solid var(--cds-layer-active);
11242
+ background-color: var(--cds-layer-selected);
11243
+ }
11244
+
11245
+ .c4p--datagrid__draggable-handleHolder-selected:hover {
11246
+ background-color: var(--cds-layer-selected-hover-01, #d1d1d1);
11247
+ }
11248
+
11249
+ .c4p--datagrid__draggable-handleHolder-isOver {
11250
+ border: 2px dashed var(--cds-focus, #0f62fe);
11251
+ background-color: var(--cds-layer-selected-hover-01, #d1d1d1);
11252
+ }
11253
+
11254
+ .c4p--datagrid__draggable-handleHolder-droppable {
11255
+ display: flex;
11256
+ width: 100%;
11257
+ }
11258
+
11259
+ .c4p--datagrid__draggable-handleHolder-grabbed {
11260
+ background-color: var(--cds-highlight, #d0e2ff);
11261
+ color: var(--cds-text-primary, #161616);
11262
+ }
11263
+
11264
+ .c4p--datagrid__shared-ui--assistive-text {
11265
+ position: absolute;
11266
+ overflow: hidden;
11267
+ width: 0;
11268
+ height: 0;
11269
+ padding: 0;
11270
+ border: 0;
11271
+ clip: rect(0 0 0 0);
11272
+ text-transform: none;
11273
+ white-space: nowrap;
11274
+ }
11275
+
11276
+ /*
11277
+ * Licensed Materials - Property of IBM
11278
+ * 5724-Q36
11279
+ * (c) Copyright IBM Corp. 2021
11280
+ * US Government Users Restricted Rights - Use, duplication or disclosure
11281
+ * restricted by GSA ADP Schedule Contract with IBM Corp.
11282
+ */
11283
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xs .cds--text-input,
11284
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xs .cds--number input[type=number],
11285
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xs .c4p--datagrid__inline-edit--select .cds--list-box.cds--dropdown,
11286
+ .c4p--datagrid .c4p--datagrid__inline-edit--date.c4p--datagrid__inline-edit--date-xs .cds--date-picker__input {
11287
+ height: 1.5rem;
11288
+ }
11289
+
11290
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xs .cds--number__control-btn::before,
11291
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xs .cds--number__control-btn::after {
11292
+ height: calc(1.5rem - 0.25rem);
11293
+ }
11294
+
11295
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xs .c4p--datagrid__inline-edit--select .cds--list-box {
11296
+ max-height: none;
11297
+ }
11298
+
11299
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--sm .cds--text-input,
11300
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--sm .cds--number input[type=number],
11301
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--sm .c4p--datagrid__inline-edit--select .cds--list-box.cds--dropdown,
11302
+ .c4p--datagrid .c4p--datagrid__inline-edit--date.c4p--datagrid__inline-edit--date-sm .cds--date-picker__input {
11303
+ height: 2rem;
11304
+ }
11305
+
11306
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--sm .cds--number__control-btn::before,
11307
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--sm .cds--number__control-btn::after {
11308
+ height: calc(2rem - 0.25rem);
11309
+ }
11310
+
11311
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--sm .c4p--datagrid__inline-edit--select .cds--list-box {
11312
+ max-height: none;
11313
+ }
11314
+
11315
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--md .cds--text-input,
11316
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--md .cds--number input[type=number],
11317
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--md .c4p--datagrid__inline-edit--select .cds--list-box.cds--dropdown,
11318
+ .c4p--datagrid .c4p--datagrid__inline-edit--date.c4p--datagrid__inline-edit--date-md .cds--date-picker__input {
11319
+ height: 2.5rem;
11320
+ }
11321
+
11322
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--md .cds--number__control-btn::before,
11323
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--md .cds--number__control-btn::after {
11324
+ height: calc(2.5rem - 0.25rem);
11325
+ }
11326
+
11327
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--md .c4p--datagrid__inline-edit--select .cds--list-box {
11328
+ max-height: none;
11329
+ }
11330
+
11331
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--lg .cds--text-input,
11332
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--lg .cds--number input[type=number],
11333
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--lg .c4p--datagrid__inline-edit--select .cds--list-box.cds--dropdown,
11334
+ .c4p--datagrid .c4p--datagrid__inline-edit--date.c4p--datagrid__inline-edit--date-lg .cds--date-picker__input {
11335
+ height: 3rem;
11336
+ }
11337
+
11338
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--lg .cds--number__control-btn::before,
11339
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--lg .cds--number__control-btn::after {
11340
+ height: calc(3rem - 0.25rem);
11341
+ }
11342
+
11343
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--lg .c4p--datagrid__inline-edit--select .cds--list-box {
11344
+ max-height: none;
11345
+ }
11346
+
11347
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xl .cds--text-input,
11348
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xl .cds--number input[type=number],
11349
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xl .c4p--datagrid__inline-edit--select .cds--list-box.cds--dropdown,
11350
+ .c4p--datagrid .c4p--datagrid__inline-edit--date.c4p--datagrid__inline-edit--date-xl .cds--date-picker__input {
11351
+ height: 4rem;
11352
+ }
11353
+
11354
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xl .cds--number__control-btn::before,
11355
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xl .cds--number__control-btn::after {
11356
+ height: calc(4rem - 0.25rem);
11357
+ }
11358
+
11359
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--xl .c4p--datagrid__inline-edit--select .cds--list-box {
11360
+ max-height: none;
11361
+ }
11362
+
11363
+ .c4p--datagrid__inline-edit-cell {
11364
+ display: flex;
11365
+ height: 100%;
11366
+ align-items: center;
11367
+ }
11368
+
11369
+ .c4p--datagrid .c4p--inline-edit__after-input-elements {
11370
+ display: flex;
11371
+ align-items: center;
11372
+ }
11373
+
11374
+ .c4p--datagrid__inline-edit--outer-cell-button {
11375
+ width: 100%;
11376
+ height: calc(100% + 2px);
11377
+ }
11378
+
11379
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button {
11380
+ position: relative;
11381
+ display: flex;
11382
+ width: 100%;
11383
+ height: 100%;
11384
+ align-items: center;
11385
+ justify-content: space-between;
11386
+ padding-left: 1rem;
11387
+ color: var(--cds-text-secondary, #525252);
11388
+ cursor: pointer;
11389
+ outline: 0;
11390
+ }
11391
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button .c4p--datagrid__label-icon {
11392
+ height: 1rem;
11393
+ padding-right: 1rem;
11394
+ }
11395
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button.c4p--datagrid__inline-edit-button--non-edit {
11396
+ padding-left: 0;
11397
+ cursor: default;
11398
+ }
11399
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button .c4p--datagrid__inline-edit-button-icon {
11400
+ height: 1rem;
11401
+ fill: var(--cds-icon-secondary, #525252);
11402
+ }
11403
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button.c4p--datagrid__inline-edit-button--date {
11404
+ font-family: 'IBM Plex Mono', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', monospace;
11405
+ }
11406
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button.c4p--datagrid__inline-edit-button--selection {
11407
+ justify-content: flex-start;
11408
+ }
11409
+ .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) {
11410
+ /* stylelint-disable-next-line */
11411
+ }
11412
+ .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 {
11413
+ display: none;
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):hover .c4p--datagrid__inline-edit-button-icon {
11416
+ display: block;
11417
+ }
11418
+
11419
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button:not([data-disabled=true]):hover {
11420
+ background-color: var(--cds-layer-active);
11421
+ color: var(--cds-text-primary, #161616);
11422
+ }
11423
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button:not([data-disabled=true]):hover .c4p--datagrid__inline-edit-button-icon {
11424
+ fill: var(--cds-icon-primary, #161616);
11425
+ }
11426
+
11427
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button.c4p--datagrid__inline-edit-button--active:not([data-disabled=true]) {
11428
+ background-color: var(--cds-layer-active);
11429
+ color: var(--cds-text-primary, #161616);
11430
+ cursor: text;
11431
+ }
11432
+
11433
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button.c4p--datagrid__inline-edit-button--active {
11434
+ /* stylelint-disable-next-line carbon/theme-token-use */
11435
+ outline: 0.125rem solid var(--cds-focus, #0f62fe);
11436
+ outline-offset: calc(-1 * 0.125rem);
11437
+ }
11438
+ @media screen and (prefers-contrast) {
11439
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button.c4p--datagrid__inline-edit-button--active {
11440
+ outline-style: dotted;
11441
+ }
11442
+ }
11443
+
11444
+ .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) {
11445
+ color: var(--cds-button-disabled, #c6c6c6);
11446
+ cursor: not-allowed;
11447
+ }
11448
+
11449
+ .c4p--datagrid__inline-edit--outer-cell-button .c4p--datagrid__inline-edit-button .c4p--datagrid__inline-edit-button-label {
11450
+ overflow: hidden;
11451
+ padding-right: 1rem;
11452
+ text-overflow: ellipsis;
11453
+ white-space: nowrap;
11454
+ }
11455
+
11456
+ .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 {
11457
+ padding-right: 3rem;
11458
+ }
11459
+
11460
+ .c4p--datagrid__inline-edit--outer-cell-button .cds--text-input,
11461
+ .c4p--datagrid__inline-edit--outer-cell-button .cds--number input[type=number] {
11462
+ height: 3rem;
11463
+ }
11464
+
11465
+ .c4p--datagrid__inline-edit-button-icon {
11466
+ position: absolute;
11467
+ right: 1rem;
11468
+ }
11469
+
11470
+ .c4p--datagrid__table-with-inline-edit.cds--data-table .c4p--datagrid__cell-inline-edit {
11471
+ position: relative;
11472
+ padding: 0;
11473
+ }
11474
+ .c4p--datagrid__table-with-inline-edit.cds--data-table .c4p--datagrid__cell-inline-edit .c4p--datagrid__inline-edit-button--non-edit {
11475
+ padding-left: 1rem;
11476
+ }
11477
+ .c4p--datagrid__table-with-inline-edit.cds--data-table .c4p--datagrid__cell-inline-edit .cds--number input[type=number] {
11478
+ min-width: auto;
11479
+ padding-right: 1rem;
11480
+ }
11481
+
11482
+ .c4p--datagrid__inline-edit--select .c4p--datagrid__inline-edit--select-item {
11483
+ padding-bottom: 1rem;
11484
+ padding-left: 1rem;
11485
+ }
11486
+
11487
+ .c4p--datagrid__inline-edit--select.cds--dropdown,
11488
+ .c4p--datagrid__inline-edit--date .cds--date-picker {
11489
+ width: inherit;
11490
+ }
11491
+
11492
+ .c4p--datagrid__inline-edit--select.cds--dropdown,
11493
+ .c4p--datagrid__inline-edit--date .cds--date-picker.cds--date-picker--single .cds--date-picker__input {
11494
+ width: 100%;
11495
+ height: 3rem;
11496
+ max-height: none;
11497
+ }
11498
+
11499
+ .c4p--datagrid__inline-edit--date .cds--date-picker-container {
11500
+ width: inherit;
11501
+ }
11502
+
11503
+ .c4p--datagrid__inline-edit--date.cds--date-picker.cds--date-picker--single .cds--date-picker__input {
11504
+ overflow: hidden;
11505
+ width: 100%;
11506
+ max-width: none;
11507
+ padding-right: 2rem;
11508
+ text-overflow: ellipsis;
11509
+ white-space: nowrap;
11510
+ }
11511
+
11512
+ .c4p--datagrid .cds--data-table .c4p--datagrid__carbon-row-hover-active td {
11513
+ border-top-color: var(--cds-layer-hover);
11514
+ background-color: var(--cds-layer-hover);
11515
+ }
11516
+
11517
+ .c4p--datagrid .c4p--datagrid__grid-container-grid-active::before {
11518
+ position: absolute;
11519
+ z-index: 2;
11520
+ bottom: 0;
11521
+ left: 0;
11522
+ width: 2px;
11523
+ height: calc(100% - 50px);
11524
+ background-color: var(--cds-link-inverse, #78a9ff);
11525
+ content: "";
11526
+ }
11527
+
11528
+ .c4p--datagrid .c4p--datagrid__grid-container-grid-active::after {
11529
+ position: absolute;
11530
+ z-index: 2;
11531
+ right: 0;
11532
+ bottom: 0;
11533
+ width: 2px;
11534
+ height: calc(100% - 50px);
11535
+ background-color: var(--cds-link-inverse, #78a9ff);
11536
+ content: "";
11537
+ }
11538
+
11539
+ .c4p--datagrid .c4p--datagrid__grid-container-grid-active .c4p--datagrid__table-grid-active thead::before {
11540
+ position: absolute;
11541
+ z-index: 2;
11542
+ top: 0;
11543
+ right: 0;
11544
+ left: 0;
11545
+ width: var(--c4p--datagrid--grid-width);
11546
+ height: 2px;
11547
+ background-color: var(--cds-link-inverse, #78a9ff);
10966
11548
  }
10967
11549
 
10968
- th.c4p--datagrid__select-all-toggle-on.button {
10969
- margin-left: 0.125rem;
11550
+ .c4p--datagrid .c4p--datagrid__grid-container-grid-active.c4p--datagrid__grid-container-grid-active--without-toolbar::before,
11551
+ .c4p--datagrid .c4p--datagrid__grid-container-grid-active.c4p--datagrid__grid-container-grid-active--without-toolbar::after {
11552
+ height: calc(100% - 2px);
10970
11553
  }
10971
11554
 
10972
- .c4p--datagrid__expanded-row-content {
10973
- padding: 1rem 1rem 1.5rem 4rem;
11555
+ .c4p--datagrid .c4p--datagrid__grid-container-grid-active .c4p--datagrid__table-container {
11556
+ outline: 2px solid var(--cds-link-inverse, #78a9ff);
11557
+ outline-offset: -2px;
10974
11558
  }
10975
11559
 
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;
11560
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid [data-invalid] ~ .cds--form-requirement,
11561
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid [data-invalid] .cds--form-requirement {
11562
+ position: absolute;
11563
+ z-index: 3;
11564
+ top: calc(100% - 0.125rem);
11565
+ width: 100%;
11566
+ padding: 0.5rem 1.5rem 0.5rem 0.5rem;
11567
+ margin: 0;
11568
+ background-color: var(--cds-layer-01, #f4f4f4);
11569
+ outline: 0.125rem solid var(--cds-support-error, #da1e28);
11570
+ outline-offset: calc(-1 * 0.125rem);
10988
11571
  }
10989
11572
 
10990
- .c4p--datagrid__draggable-handleStyle.disabled {
10991
- pointer-events: none;
11573
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid .cds--list-box[data-invalid]:focus-within ~ .cds--form-requirement {
11574
+ outline: 0.125rem solid var(--cds-focus, #0f62fe);
10992
11575
  }
10993
11576
 
10994
- svg.c4p--datagrid__draggable-handleStyle.disable {
10995
- fill: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
11577
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid .cds--list-box__invalid-icon,
11578
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid .cds--text-input__invalid-icon,
11579
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid .cds--number__invalid {
11580
+ z-index: 4;
11581
+ top: calc(100% + 0.75rem + 0.125rem);
11582
+ right: 0.5rem;
10996
11583
  }
10997
11584
 
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);
11585
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid .cds--number__invalid {
11586
+ top: calc(100% + 0.25rem + 0.125rem);
11004
11587
  }
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);
11588
+
11589
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid .cds--form-requirement::before {
11590
+ position: absolute;
11591
+ top: 0;
11592
+ left: 0.125rem;
11593
+ width: calc(100% - (0.125rem * 2));
11594
+ height: 0.125rem;
11595
+ background-color: var(--cds-layer-01, #f4f4f4);
11596
+ content: "";
11008
11597
  }
11009
11598
 
11010
- .c4p--datagrid__draggable-handleHolder-droppable {
11011
- display: flex;
11012
- width: 100%;
11599
+ .c4p--datagrid__inline-edit--outer-cell-button--invalid .cds--form-requirement::after {
11600
+ position: absolute;
11601
+ top: 0.125rem;
11602
+ left: 0.5rem;
11603
+ width: calc(100% - (0.5rem * 2));
11604
+ height: 1px;
11605
+ background-color: var(--cds-layer-accent-01, #e0e0e0);
11606
+ content: "";
11013
11607
  }
11014
11608
 
11015
- .c4p--datagrid__draggable-handleHolder--grabbed {
11016
- background-color: var(--cds-highlight, #d0e2ff);
11017
- color: var(--cds-text-primary, #161616);
11609
+ .c4p--datagrid tbody tr:hover .c4p--datagrid__inline-edit--outer-cell-button--invalid .cds--form-requirement::before {
11610
+ background-color: var(--cds-layer-accent-01, #e0e0e0);
11611
+ }
11612
+ .c4p--datagrid tbody tr:hover .c4p--datagrid__inline-edit--outer-cell-button--invalid .cds--form-requirement::after {
11613
+ background-color: transparent;
11018
11614
  }
11019
11615
 
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;
11616
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid .cds--text-input:focus,
11617
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid .cds--number input[type=number]:focus,
11618
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid .cds--number input[type=number]:focus ~ .cds--number__controls .cds--number__control-btn:hover,
11619
+ .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid .cds--number__control-btn:focus {
11620
+ outline-color: var(--cds-support-error, #da1e28);
11621
+ }
11622
+
11623
+ .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 {
11624
+ background-color: var(--cds-support-error, #da1e28);
11030
11625
  }
11031
11626
 
11032
11627
  /*
@@ -11036,6 +11631,7 @@ svg.c4p--datagrid__draggable-handleStyle.disable {
11036
11631
  * US Government Users Restricted Rights - Use, duplication or disclosure
11037
11632
  * restricted by GSA ADP Schedule Contract with IBM Corp.
11038
11633
  */
11634
+ /* stylelint-disable max-nesting-depth */
11039
11635
  .c4p--datagrid__datagridWrap {
11040
11636
  display: block;
11041
11637
  width: 100%;
@@ -11043,6 +11639,10 @@ svg.c4p--datagrid__draggable-handleStyle.disable {
11043
11639
  .c4p--datagrid__datagridWrap :global(.cds--checkbox) {
11044
11640
  display: none;
11045
11641
  }
11642
+ .c4p--datagrid__datagridWrap .bx--overflow-menu-options > .c4p--datagrid__row-size-dropdown {
11643
+ left: 0.125rem;
11644
+ width: 112px;
11645
+ }
11046
11646
 
11047
11647
  .c4p--datagrid__datagridWrap .cds--overflow-menu-options > .c4p--datagrid__row-size-dropdown {
11048
11648
  left: 0.125rem;
@@ -12768,6 +13368,7 @@ svg.c4p--datagrid__draggable-handleStyle.disable {
12768
13368
  appearance: none;
12769
13369
  background: none;
12770
13370
  cursor: pointer;
13371
+ text-align: start;
12771
13372
  width: 100%;
12772
13373
  font-size: var(--cds-heading-compact-01-font-size, 0.875rem);
12773
13374
  font-weight: var(--cds-heading-compact-01-font-weight, 600);
@@ -13163,7 +13764,7 @@ a.cds--side-nav__link--current::before {
13163
13764
  /* stylelint-disable-next-line function-no-unknown */
13164
13765
  z-index: 9000;
13165
13766
  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);
13767
+ transition: visibility 0s linear, background-color 240ms cubic-bezier(0, 0, 0.3, 1), opacity 240ms cubic-bezier(0, 0, 0.3, 1);
13167
13768
  }
13168
13769
 
13169
13770
  @media (prefers-reduced-motion: reduce) {
@@ -15055,6 +15656,10 @@ em {
15055
15656
  --cds-button-secondary-hover: #5e5e5e;
15056
15657
  --cds-button-tertiary-hover: #f4f4f4;
15057
15658
  --cds-button-disabled: rgba(141, 141, 141, 0.3);
15659
+ --cds-notification-background-error: #393939;
15660
+ --cds-notification-background-success: #393939;
15661
+ --cds-notification-background-info: #393939;
15662
+ --cds-notification-background-warning: #393939;
15058
15663
  --cds-notification-action-tertiary-inverse: #0f62fe;
15059
15664
  --cds-notification-action-tertiary-inverse-active: #002d9c;
15060
15665
  --cds-notification-action-tertiary-inverse-hover: #0050e6;
@@ -15219,6 +15824,10 @@ em {
15219
15824
  --cds-button-secondary-hover: #5e5e5e;
15220
15825
  --cds-button-tertiary-hover: #f4f4f4;
15221
15826
  --cds-button-disabled: rgba(141, 141, 141, 0.3);
15827
+ --cds-notification-background-error: #262626;
15828
+ --cds-notification-background-success: #262626;
15829
+ --cds-notification-background-info: #262626;
15830
+ --cds-notification-background-warning: #262626;
15222
15831
  --cds-notification-action-tertiary-inverse: #0f62fe;
15223
15832
  --cds-notification-action-tertiary-inverse-active: #002d9c;
15224
15833
  --cds-notification-action-tertiary-inverse-hover: #0050e6;
@@ -15296,6 +15905,7 @@ em {
15296
15905
  appearance: none;
15297
15906
  background: none;
15298
15907
  cursor: pointer;
15908
+ text-align: start;
15299
15909
  width: 100%;
15300
15910
  position: relative;
15301
15911
  display: flex;
@@ -16399,12 +17009,61 @@ li.cds--accordion__item--disabled:last-of-type {
16399
17009
  margin-bottom: 0;
16400
17010
  }
16401
17011
 
16402
- .cds--label .cds--tooltip__trigger {
17012
+ .cds--label + .cds--tooltip {
17013
+ position: relative;
17014
+ top: 0.2rem;
17015
+ left: 0.5rem;
17016
+ }
17017
+
17018
+ .cds--label + .cds--tooltip .cds--tooltip__trigger {
17019
+ box-sizing: border-box;
17020
+ padding: 0;
17021
+ border: 0;
17022
+ margin: 0;
17023
+ font-family: inherit;
17024
+ font-size: 100%;
17025
+ vertical-align: baseline;
17026
+ display: inline-block;
17027
+ padding: 0;
17028
+ border: 0;
17029
+ appearance: none;
17030
+ background: none;
17031
+ cursor: pointer;
17032
+ text-align: start;
17033
+ width: 100%;
17034
+ display: flex;
17035
+ align-items: center;
17036
+ justify-content: center;
16403
17037
  font-size: var(--cds-label-01-font-size, 0.75rem);
16404
17038
  font-weight: var(--cds-label-01-font-weight, 400);
16405
17039
  line-height: var(--cds-label-01-line-height, 1.33333);
16406
17040
  letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
16407
17041
  }
17042
+ .cds--label + .cds--tooltip .cds--tooltip__trigger *,
17043
+ .cds--label + .cds--tooltip .cds--tooltip__trigger *::before,
17044
+ .cds--label + .cds--tooltip .cds--tooltip__trigger *::after {
17045
+ box-sizing: inherit;
17046
+ }
17047
+ .cds--label + .cds--tooltip .cds--tooltip__trigger::-moz-focus-inner {
17048
+ border: 0;
17049
+ }
17050
+
17051
+ .cds--label + .cds--tooltip .cds--tooltip__trigger:focus {
17052
+ outline: 1px solid var(--cds-focus, #0f62fe);
17053
+ }
17054
+
17055
+ .cds--label + .cds--tooltip .cds--tooltip__trigger svg {
17056
+ fill: var(--cds-icon-secondary, #525252);
17057
+ }
17058
+
17059
+ .cds--label + .cds--tooltip .cds--tooltip__trigger svg :hover {
17060
+ fill: var(--cds-icon-primary, #161616);
17061
+ }
17062
+
17063
+ .cds--label + .cds--toggletip {
17064
+ top: 0.2rem;
17065
+ left: 0.5rem;
17066
+ }
16408
17067
 
16409
17068
  .cds--label.cds--skeleton {
16410
17069
  position: relative;
@@ -16446,7 +17105,7 @@ input[data-invalid]:not(:focus),
16446
17105
  .cds--text-area__wrapper[data-invalid] > .cds--text-area--invalid:not(:focus),
16447
17106
  .cds--select-input__wrapper[data-invalid] .cds--select-input:not(:focus),
16448
17107
  .cds--list-box[data-invalid]:not(:focus),
16449
- .cds--combo-box[data-invalid] .cds--text-input:not(:focus) {
17108
+ .cds--combo-box[data-invalid]:not(.cds--multi-select--selected) .cds--text-input:not(:focus) {
16450
17109
  outline: 2px solid var(--cds-support-error, #da1e28);
16451
17110
  outline-offset: -2px;
16452
17111
  }
@@ -16457,7 +17116,7 @@ input[data-invalid]:not(:focus),
16457
17116
  .cds--text-area__wrapper[data-invalid] > .cds--text-area--invalid:not(:focus),
16458
17117
  .cds--select-input__wrapper[data-invalid] .cds--select-input:not(:focus),
16459
17118
  .cds--list-box[data-invalid]:not(:focus),
16460
- .cds--combo-box[data-invalid] .cds--text-input:not(:focus) {
17119
+ .cds--combo-box[data-invalid]:not(.cds--multi-select--selected) .cds--text-input:not(:focus) {
16461
17120
  outline-style: dotted;
16462
17121
  }
16463
17122
  }
@@ -16668,8 +17327,7 @@ fieldset[disabled] .cds--form__helper-text {
16668
17327
 
16669
17328
  .cds--checkbox:checked + .cds--checkbox-label::before,
16670
17329
  .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 {
17330
+ .cds--checkbox-label[data-contained-checkbox-state=true]::before {
16673
17331
  border: none;
16674
17332
  border-width: 1px;
16675
17333
  background-color: var(--cds-icon-primary, #161616);
@@ -16680,8 +17338,7 @@ fieldset[disabled] .cds--form__helper-text {
16680
17338
  transform: scale(1) rotate(-45deg) /*rtl:scale(1.2) rotate3d(.5, 1, 0, 158deg)*/;
16681
17339
  }
16682
17340
 
16683
- .cds--checkbox:indeterminate + .cds--checkbox-label::after,
16684
- .cds--checkbox-label[data-contained-checkbox-state=mixed]::after {
17341
+ .cds--checkbox:indeterminate + .cds--checkbox-label::after {
16685
17342
  top: 0.6875rem;
16686
17343
  width: 0.5rem;
16687
17344
  border-bottom: 2px solid var(--cds-icon-inverse, #ffffff);
@@ -16693,8 +17350,7 @@ fieldset[disabled] .cds--form__helper-text {
16693
17350
  .cds--checkbox-label__focus::before,
16694
17351
  .cds--checkbox:checked:focus + .cds--checkbox-label::before,
16695
17352
  .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 {
17353
+ .cds--checkbox:indeterminate:focus + .cds--checkbox-label::before {
16698
17354
  outline: 2px solid var(--cds-focus, #0f62fe);
16699
17355
  outline-offset: 1px;
16700
17356
  }
@@ -16712,8 +17368,7 @@ fieldset[disabled] .cds--form__helper-text {
16712
17368
 
16713
17369
  .cds--checkbox:checked:disabled + .cds--checkbox-label::before,
16714
17370
  .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 {
17371
+ .cds--checkbox-label[data-contained-checkbox-state=true][data-contained-checkbox-disabled=true]::before {
16717
17372
  background-color: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
16718
17373
  }
16719
17374
 
@@ -17192,6 +17847,9 @@ fieldset[disabled] .cds--form__helper-text {
17192
17847
  z-index: 1;
17193
17848
  top: 0.8125rem;
17194
17849
  left: 1rem;
17850
+ display: flex;
17851
+ height: 1rem;
17852
+ align-items: center;
17195
17853
  margin: 0;
17196
17854
  }
17197
17855
 
@@ -17210,12 +17868,12 @@ fieldset[disabled] .cds--form__helper-text {
17210
17868
  }
17211
17869
 
17212
17870
  .cds--form--fluid .cds--text-input--invalid,
17213
- .cds--form--fluid .cds--text-input--warn {
17871
+ .cds--form--fluid .cds--text-input--warning {
17214
17872
  border-bottom: none;
17215
17873
  }
17216
17874
 
17217
17875
  .cds--form--fluid .cds--text-input--invalid + .cds--text-input__divider,
17218
- .cds--form--fluid .cds--text-input--warn + .cds--text-input__divider {
17876
+ .cds--form--fluid .cds--text-input--warning + .cds--text-input__divider {
17219
17877
  display: block;
17220
17878
  border-style: solid;
17221
17879
  border-color: var(--cds-border-subtle);
@@ -17227,13 +17885,13 @@ fieldset[disabled] .cds--form__helper-text {
17227
17885
  top: 5rem;
17228
17886
  }
17229
17887
 
17230
- .cds--form--fluid .cds--text-input-wrapper--light {
17231
- background: var(--cds-field-02, #ffffff);
17888
+ .cds--form--fluid .cds--text-input__field-wrapper[data-invalid] > .cds--text-input--invalid,
17889
+ .cds--form--fluid .cds--text-input__field-wrapper--warning > .cds--text-input--warning {
17890
+ outline: none;
17232
17891
  }
17233
17892
 
17234
- .cds--form--fluid .cds--text-input__field-wrapper[data-invalid] > .cds--text-input--invalid {
17235
- outline: 2px solid transparent;
17236
- outline-offset: -2px;
17893
+ .cds--form--fluid .cds--text-input__field-wrapper--warning {
17894
+ border-bottom: 1px solid var(--cds-border-strong);
17237
17895
  }
17238
17896
 
17239
17897
  .cds--form--fluid .cds--text-input__field-wrapper[data-invalid]:not(:focus) {
@@ -17246,16 +17904,23 @@ fieldset[disabled] .cds--form__helper-text {
17246
17904
  }
17247
17905
  }
17248
17906
 
17249
- .cds--form--fluid .cds--text-input__field-wrapper[data-invalid] > .cds--text-input--invalid:focus {
17907
+ .cds--form--fluid .cds--text-input__field-wrapper[data-invalid]:focus-within,
17908
+ .cds--form--fluid .cds--text-input__field-wrapper--warning:focus-within {
17250
17909
  outline: 2px solid var(--cds-focus, #0f62fe);
17251
17910
  outline-offset: -2px;
17252
17911
  }
17253
17912
  @media screen and (prefers-contrast) {
17254
- .cds--form--fluid .cds--text-input__field-wrapper[data-invalid] > .cds--text-input--invalid:focus {
17913
+ .cds--form--fluid .cds--text-input__field-wrapper[data-invalid]:focus-within,
17914
+ .cds--form--fluid .cds--text-input__field-wrapper--warning:focus-within {
17255
17915
  outline-style: dotted;
17256
17916
  }
17257
17917
  }
17258
17918
 
17919
+ .cds--form--fluid .cds--text-input__field-wrapper[data-invalid] > .cds--text-input--invalid:focus,
17920
+ .cds--form--fluid .cds--text-input__field-wrapper--warning > .cds--text-input--warning:focus {
17921
+ outline: none;
17922
+ }
17923
+
17259
17924
  .cds--text-input-wrapper.cds--text-input-wrapper--inline {
17260
17925
  flex-flow: row wrap;
17261
17926
  }
@@ -17856,6 +18521,7 @@ fieldset[disabled] .cds--form__helper-text {
17856
18521
  appearance: none;
17857
18522
  background: none;
17858
18523
  cursor: pointer;
18524
+ text-align: start;
17859
18525
  width: 100%;
17860
18526
  position: relative;
17861
18527
  display: inline-flex;
@@ -17947,6 +18613,7 @@ fieldset[disabled] .cds--form__helper-text {
17947
18613
  appearance: none;
17948
18614
  background: none;
17949
18615
  cursor: pointer;
18616
+ text-align: start;
17950
18617
  position: absolute;
17951
18618
  right: 1rem;
17952
18619
  display: flex;
@@ -17991,6 +18658,7 @@ fieldset[disabled] .cds--form__helper-text {
17991
18658
  appearance: none;
17992
18659
  background: none;
17993
18660
  cursor: pointer;
18661
+ text-align: start;
17994
18662
  position: absolute;
17995
18663
  top: 50%;
17996
18664
  /* to preserve .5rem space between icons according to spec top/transform used to center the combobox clear selection icon in IE11 */
@@ -18646,6 +19314,16 @@ fieldset[disabled] .cds--form__helper-text {
18646
19314
  letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
18647
19315
  color: var(--cds-text-secondary, #525252);
18648
19316
  }
19317
+ @media (min-width: 42rem) {
19318
+ .cds--data-table-header__description {
19319
+ max-width: 50ch;
19320
+ }
19321
+ }
19322
+ @media (min-width: 66rem) {
19323
+ .cds--data-table-header__description {
19324
+ max-width: 80ch;
19325
+ }
19326
+ }
18649
19327
 
18650
19328
  .cds--data-table {
18651
19329
  width: 100%;
@@ -19445,6 +20123,7 @@ tr.cds--data-table--selected:last-of-type td {
19445
20123
  appearance: none;
19446
20124
  background: none;
19447
20125
  cursor: pointer;
20126
+ text-align: start;
19448
20127
  width: 100%;
19449
20128
  display: flex;
19450
20129
  width: 3rem;
@@ -19476,6 +20155,7 @@ tr.cds--data-table--selected:last-of-type td {
19476
20155
  appearance: none;
19477
20156
  background: none;
19478
20157
  cursor: pointer;
20158
+ text-align: start;
19479
20159
  width: 100%;
19480
20160
  display: flex;
19481
20161
  width: 3rem;
@@ -19973,6 +20653,7 @@ tr.cds--parent-row.cds--expandable-row.cds--expandable-row--hover td:first-of-ty
19973
20653
  appearance: none;
19974
20654
  background: none;
19975
20655
  cursor: pointer;
20656
+ text-align: start;
19976
20657
  display: inline-flex;
19977
20658
  width: 100%;
19978
20659
  height: calc(100% + 1px);
@@ -20277,6 +20958,7 @@ tr.cds--parent-row.cds--data-table--selected.cds--expandable-row--hover + tr[dat
20277
20958
  appearance: none;
20278
20959
  background: none;
20279
20960
  cursor: pointer;
20961
+ text-align: start;
20280
20962
  display: flex;
20281
20963
  width: 100%;
20282
20964
  min-height: 100%;
@@ -22212,6 +22894,106 @@ button.cds--dropdown-text:focus {
22212
22894
  }
22213
22895
 
22214
22896
  /* stylelint-enable */
22897
+ .cds--text-input--fluid.cds--text-input-wrapper {
22898
+ position: relative;
22899
+ height: 100%;
22900
+ background: var(--cds-field);
22901
+ transition: background-color 70ms cubic-bezier(0.2, 0, 0.38, 0.9), outline 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
22902
+ }
22903
+
22904
+ .cds--text-input--fluid .cds--label {
22905
+ position: absolute;
22906
+ z-index: 1;
22907
+ top: 0.8125rem;
22908
+ left: 1rem;
22909
+ display: flex;
22910
+ height: 1rem;
22911
+ align-items: center;
22912
+ margin: 0;
22913
+ }
22914
+
22915
+ .cds--text-input--fluid .cds--form__helper-text {
22916
+ display: none;
22917
+ }
22918
+
22919
+ .cds--text-input--fluid .cds--text-input {
22920
+ min-height: 4rem;
22921
+ padding: 2rem 1rem 0.8125rem;
22922
+ }
22923
+
22924
+ .cds--text-input__divider,
22925
+ .cds--text-input--fluid .cds--text-input__divider {
22926
+ display: none;
22927
+ }
22928
+
22929
+ .cds--text-input--fluid .cds--text-input__field-wrapper[data-invalid],
22930
+ .cds--text-input--fluid .cds--text-input__field-wrapper--warning {
22931
+ display: block;
22932
+ }
22933
+
22934
+ .cds--text-input--fluid input[data-invalid] {
22935
+ outline: none;
22936
+ }
22937
+
22938
+ .cds--text-input--fluid .cds--form-requirement {
22939
+ padding: 0.5rem 2.5rem 0.5rem 1rem;
22940
+ margin: 0;
22941
+ }
22942
+
22943
+ .cds--text-input--fluid .cds--text-input--invalid,
22944
+ .cds--text-input--fluid .cds--text-input--warning {
22945
+ border-bottom: none;
22946
+ }
22947
+
22948
+ .cds--text-input--fluid .cds--text-input--invalid + .cds--text-input__divider,
22949
+ .cds--text-input--fluid .cds--text-input--warning + .cds--text-input__divider {
22950
+ display: block;
22951
+ border-style: solid;
22952
+ border-color: var(--cds-border-subtle);
22953
+ border-bottom: none;
22954
+ margin: 0 1rem;
22955
+ }
22956
+
22957
+ .cds--text-input--fluid .cds--text-input__invalid-icon {
22958
+ top: 5rem;
22959
+ }
22960
+
22961
+ .cds--text-input--fluid .cds--text-input__field-wrapper[data-invalid] > .cds--text-input--invalid,
22962
+ .cds--text-input--fluid .cds--text-input__field-wrapper--warning > .cds--text-input--warning {
22963
+ outline: none;
22964
+ }
22965
+
22966
+ .cds--text-input--fluid .cds--text-input__field-wrapper--warning {
22967
+ border-bottom: 1px solid var(--cds-border-strong);
22968
+ }
22969
+
22970
+ .cds--text-input--fluid .cds--text-input__field-wrapper[data-invalid]:not(:focus) {
22971
+ outline: 2px solid var(--cds-support-error, #da1e28);
22972
+ outline-offset: -2px;
22973
+ }
22974
+ @media screen and (prefers-contrast) {
22975
+ .cds--text-input--fluid .cds--text-input__field-wrapper[data-invalid]:not(:focus) {
22976
+ outline-style: dotted;
22977
+ }
22978
+ }
22979
+
22980
+ .cds--text-input--fluid .cds--text-input__field-wrapper[data-invalid]:focus-within,
22981
+ .cds--text-input--fluid .cds--text-input__field-wrapper--warning:focus-within {
22982
+ outline: 2px solid var(--cds-focus, #0f62fe);
22983
+ outline-offset: -2px;
22984
+ }
22985
+ @media screen and (prefers-contrast) {
22986
+ .cds--text-input--fluid .cds--text-input__field-wrapper[data-invalid]:focus-within,
22987
+ .cds--text-input--fluid .cds--text-input__field-wrapper--warning:focus-within {
22988
+ outline-style: dotted;
22989
+ }
22990
+ }
22991
+
22992
+ .cds--text-input--fluid .cds--text-input__field-wrapper[data-invalid] > .cds--text-input--invalid:focus,
22993
+ .cds--text-input--fluid .cds--text-input__field-wrapper--warning > .cds--text-input--warning:focus {
22994
+ outline: none;
22995
+ }
22996
+
22215
22997
  @keyframes stroke {
22216
22998
  100% {
22217
22999
  stroke-dashoffset: 0;
@@ -22900,7 +23682,7 @@ button.cds--dropdown-text:focus {
22900
23682
  padding-left: 0;
22901
23683
  }
22902
23684
 
22903
- .cds--multi-select--filterable.cds--list-box--disabled:hover .cds--text-input {
23685
+ .cds--multi-select--filterable.cds--list-box--disabled:hover:not(.cds--multi-select--filterable) .cds--text-input {
22904
23686
  background-color: var(--cds-field);
22905
23687
  }
22906
23688
 
@@ -22914,6 +23696,10 @@ button.cds--dropdown-text:focus {
22914
23696
  background-color: transparent;
22915
23697
  }
22916
23698
 
23699
+ .cds--multi-select:not(.cds--list-box--expanded) .cds--list-box__menu {
23700
+ visibility: hidden;
23701
+ }
23702
+
22917
23703
  .cds--inline-notification {
22918
23704
  position: relative;
22919
23705
  display: flex;
@@ -24143,6 +24929,7 @@ button.cds--dropdown-text:focus {
24143
24929
  appearance: none;
24144
24930
  background: none;
24145
24931
  cursor: pointer;
24932
+ text-align: start;
24146
24933
  width: 100%;
24147
24934
  position: relative;
24148
24935
  display: inline-flex;
@@ -24484,6 +25271,7 @@ button.cds--dropdown-text:focus {
24484
25271
  appearance: none;
24485
25272
  background: none;
24486
25273
  cursor: pointer;
25274
+ text-align: start;
24487
25275
  width: 100%;
24488
25276
  outline: 2px solid transparent;
24489
25277
  outline-offset: -2px;
@@ -25611,6 +26399,7 @@ span.cds--pagination__text.cds--pagination__items-count {
25611
26399
  appearance: none;
25612
26400
  background: none;
25613
26401
  cursor: pointer;
26402
+ text-align: start;
25614
26403
  position: relative;
25615
26404
  display: block;
25616
26405
  min-width: 3rem;
@@ -25953,13 +26742,13 @@ span.cds--pagination__text.cds--pagination__items-count {
25953
26742
  .cds--popover--left-top .cds--popover-content {
25954
26743
  top: -50%;
25955
26744
  right: 100%;
25956
- transform: translate(calc(-1 * var(--cds-popover-offset, 0rem)), calc(-0.5 * var(--cds-popover-offset, 0rem) + 16px));
26745
+ transform: translate(calc(-1 * var(--cds-popover-offset, 0rem)), calc(-0.5 * var(--cds-popover-offset, 0rem)));
25957
26746
  }
25958
26747
 
25959
26748
  .cds--popover--left-bottom .cds--popover-content {
25960
26749
  right: 100%;
25961
26750
  bottom: -50%;
25962
- transform: translate(calc(-1 * var(--cds-popover-offset, 0rem)), calc(0.5 * var(--cds-popover-offset, 0rem) - 16px));
26751
+ transform: translate(calc(-1 * var(--cds-popover-offset, 0rem)), calc(0.5 * var(--cds-popover-offset, 0rem)));
25963
26752
  }
25964
26753
 
25965
26754
  .cds--popover--left .cds--popover-content::before,
@@ -26178,6 +26967,7 @@ span.cds--pagination__text.cds--pagination__items-count {
26178
26967
  appearance: none;
26179
26968
  background: none;
26180
26969
  cursor: pointer;
26970
+ text-align: start;
26181
26971
  width: 100%;
26182
26972
  border-bottom: 1px dotted var(--cds-border-strong);
26183
26973
  border-radius: 0;
@@ -26397,6 +27187,7 @@ span.cds--pagination__text.cds--pagination__items-count {
26397
27187
  appearance: none;
26398
27188
  background: none;
26399
27189
  cursor: pointer;
27190
+ text-align: start;
26400
27191
  width: 100%;
26401
27192
  display: flex;
26402
27193
  text-align: left;
@@ -26868,6 +27659,7 @@ span.cds--pagination__text.cds--pagination__items-count {
26868
27659
  appearance: none;
26869
27660
  background: none;
26870
27661
  cursor: pointer;
27662
+ text-align: start;
26871
27663
  outline: 2px solid transparent;
26872
27664
  outline-offset: -2px;
26873
27665
  position: absolute;
@@ -27805,6 +28597,7 @@ span.cds--pagination__text.cds--pagination__items-count {
27805
28597
  appearance: none;
27806
28598
  background: none;
27807
28599
  cursor: pointer;
28600
+ text-align: start;
27808
28601
  width: 100%;
27809
28602
  display: flex;
27810
28603
  width: 2.5rem;
@@ -27955,6 +28748,7 @@ span.cds--pagination__text.cds--pagination__items-count {
27955
28748
  appearance: none;
27956
28749
  background: none;
27957
28750
  cursor: pointer;
28751
+ text-align: start;
27958
28752
  outline: 2px solid transparent;
27959
28753
  outline-offset: -2px;
27960
28754
  font-size: var(--cds-body-compact-01-font-size, 0.875rem);
@@ -28473,6 +29267,7 @@ span.cds--pagination__text.cds--pagination__items-count {
28473
29267
  appearance: none;
28474
29268
  background: none;
28475
29269
  cursor: pointer;
29270
+ text-align: start;
28476
29271
  width: 100%;
28477
29272
  position: absolute;
28478
29273
  right: 0;
@@ -28735,6 +29530,7 @@ span.cds--pagination__text.cds--pagination__items-count {
28735
29530
  appearance: none;
28736
29531
  background: none;
28737
29532
  cursor: pointer;
29533
+ text-align: start;
28738
29534
  width: 100%;
28739
29535
  display: flex;
28740
29536
  align-items: center;
@@ -28856,7 +29652,7 @@ span.cds--pagination__text.cds--pagination__items-count {
28856
29652
  }
28857
29653
 
28858
29654
  .cds--toggle__button:focus + .cds--toggle__label .cds--toggle__switch,
28859
- .cds--toggle__button:active + .cds--toggle__label .cds--toggle__switch {
29655
+ .cds--toggle__button:not(:disabled):active + .cds--toggle__label .cds--toggle__switch {
28860
29656
  box-shadow: 0 0 0 1px var(--cds-focus-inset, #ffffff), 0 0 0 3px var(--cds-focus, #0f62fe);
28861
29657
  }
28862
29658
 
@@ -28931,7 +29727,7 @@ span.cds--pagination__text.cds--pagination__items-count {
28931
29727
 
28932
29728
  @media screen and (-ms-high-contrast: active), (forced-colors: active) {
28933
29729
  .cds--toggle__button:focus + .cds--toggle__label .cds--toggle__switch,
28934
- .cds--toggle__button:active + .cds--toggle__label .cds--toggle__switch {
29730
+ .cds--toggle__button:not(:disabled):active + .cds--toggle__label .cds--toggle__switch {
28935
29731
  color: Highlight;
28936
29732
  outline: 1px solid Highlight;
28937
29733
  }
@@ -28992,6 +29788,8 @@ span.cds--pagination__text.cds--pagination__items-count {
28992
29788
  min-height: 2rem;
28993
29789
  flex: 1;
28994
29790
  align-items: center;
29791
+ padding-top: 0.4375rem;
29792
+ padding-bottom: 0.4375rem;
28995
29793
  }
28996
29794
  .cds--tree-node__label:hover {
28997
29795
  background-color: var(--cds-layer-hover-01, #e8e8e8);
@@ -29026,7 +29824,10 @@ span.cds--pagination__text.cds--pagination__items-count {
29026
29824
  }
29027
29825
 
29028
29826
  .cds--tree-parent-node__toggle {
29029
- padding: 0;
29827
+ display: flex;
29828
+ align-items: center;
29829
+ align-self: flex-start;
29830
+ padding: 0.0625rem 0;
29030
29831
  border: 0;
29031
29832
  margin-right: 0.5rem;
29032
29833
  }
@@ -29050,6 +29851,8 @@ span.cds--pagination__text.cds--pagination__items-count {
29050
29851
  .cds--tree-node__icon {
29051
29852
  min-width: 1rem;
29052
29853
  min-height: 1rem;
29854
+ align-self: flex-start;
29855
+ margin-top: 0.0625rem;
29053
29856
  margin-right: 0.5rem;
29054
29857
  fill: var(--cds-icon-secondary, #525252);
29055
29858
  }
@@ -29082,6 +29885,8 @@ span.cds--pagination__text.cds--pagination__items-count {
29082
29885
 
29083
29886
  .cds--tree--xs .cds--tree-node__label {
29084
29887
  min-height: 1.5rem;
29888
+ padding-top: 0.25rem;
29889
+ padding-bottom: 0.25rem;
29085
29890
  }
29086
29891
 
29087
29892
  .cds--content {
@@ -29129,6 +29934,7 @@ span.cds--pagination__text.cds--pagination__items-count {
29129
29934
  appearance: none;
29130
29935
  background: none;
29131
29936
  cursor: pointer;
29937
+ text-align: start;
29132
29938
  width: 100%;
29133
29939
  display: inline-flex;
29134
29940
  width: 3rem;
@@ -29625,6 +30431,7 @@ a.cds--header__menu-item.cds--header__menu-item--current:focus {
29625
30431
  appearance: none;
29626
30432
  background: none;
29627
30433
  cursor: pointer;
30434
+ text-align: start;
29628
30435
  width: 100%;
29629
30436
  font-size: var(--cds-heading-compact-01-font-size, 0.875rem);
29630
30437
  font-weight: var(--cds-heading-compact-01-font-weight, 600);
@@ -30036,6 +30843,7 @@ a.cds--side-nav__link--current::before {
30036
30843
  appearance: none;
30037
30844
  background: none;
30038
30845
  cursor: pointer;
30846
+ text-align: start;
30039
30847
  width: 100%;
30040
30848
  display: inline-flex;
30041
30849
  width: 3rem;
@@ -30532,6 +31340,7 @@ a.cds--header__menu-item.cds--header__menu-item--current:focus {
30532
31340
  appearance: none;
30533
31341
  background: none;
30534
31342
  cursor: pointer;
31343
+ text-align: start;
30535
31344
  width: 100%;
30536
31345
  font-size: var(--cds-heading-compact-01-font-size, 0.875rem);
30537
31346
  font-weight: var(--cds-heading-compact-01-font-weight, 600);