@carbon/ibm-products 2.27.0 → 2.28.0-alpha.4

Sign up to get free protection for your applications and to get access to all the features.
Files changed (333) hide show
  1. package/css/index-full-carbon.css +192 -116
  2. package/css/index-full-carbon.css.map +1 -1
  3. package/css/index-full-carbon.min.css +1 -1
  4. package/css/index-full-carbon.min.css.map +1 -1
  5. package/css/index-without-carbon-released-only.css +56 -11
  6. package/css/index-without-carbon-released-only.css.map +1 -1
  7. package/css/index-without-carbon-released-only.min.css +1 -1
  8. package/css/index-without-carbon-released-only.min.css.map +1 -1
  9. package/css/index-without-carbon.css +192 -116
  10. package/css/index-without-carbon.css.map +1 -1
  11. package/css/index-without-carbon.min.css +1 -1
  12. package/css/index-without-carbon.min.css.map +1 -1
  13. package/css/index.css +180 -112
  14. package/css/index.css.map +1 -1
  15. package/css/index.min.css +1 -1
  16. package/css/index.min.css.map +1 -1
  17. package/es/_virtual/index.js +2 -2
  18. package/es/components/APIKeyModal/APIKeyModal.js +1 -1
  19. package/es/components/AboutModal/AboutModal.js +1 -1
  20. package/es/components/ActionBar/ActionBar.js +1 -1
  21. package/es/components/ActionBar/ActionBarItem.js +1 -1
  22. package/es/components/ActionBar/ActionBarOverflowItems.js +1 -1
  23. package/es/components/ActionSet/ActionSet.js +1 -1
  24. package/es/components/AddSelect/AddSelectBody.js +1 -1
  25. package/es/components/AddSelect/AddSelectBreadcrumbs.js +1 -1
  26. package/es/components/AddSelect/AddSelectFilter.js +1 -1
  27. package/es/components/AddSelect/AddSelectList.js +1 -1
  28. package/es/components/AddSelect/AddSelectRow.js +1 -1
  29. package/es/components/BigNumbers/BigNumbers.js +1 -1
  30. package/es/components/BreadcrumbWithOverflow/BreadcrumbWithOverflow.js +1 -1
  31. package/es/components/ButtonSetWithOverflow/ButtonSetWithOverflow.js +1 -1
  32. package/es/components/Card/Card.js +1 -1
  33. package/es/components/Card/CardFooter.js +1 -1
  34. package/es/components/Card/CardHeader.js +1 -1
  35. package/es/components/Carousel/Carousel.js +1 -1
  36. package/es/components/Carousel/CarouselItem.js +1 -1
  37. package/es/components/Cascade/Cascade.js +1 -1
  38. package/es/components/Checklist/Checklist.js +1 -1
  39. package/es/components/Checklist/ChecklistChart.js +1 -1
  40. package/es/components/Checklist/ChecklistIcon.js +1 -1
  41. package/es/components/Coachmark/Coachmark.js +1 -1
  42. package/es/components/Coachmark/CoachmarkDragbar.js +1 -1
  43. package/es/components/Coachmark/CoachmarkHeader.js +1 -1
  44. package/es/components/Coachmark/CoachmarkOverlay.js +1 -1
  45. package/es/components/Coachmark/CoachmarkTagline.js +1 -1
  46. package/es/components/CoachmarkBeacon/CoachmarkBeacon.js +1 -1
  47. package/es/components/CoachmarkButton/CoachmarkButton.js +1 -1
  48. package/es/components/CoachmarkFixed/CoachmarkFixed.js +1 -1
  49. package/es/components/CoachmarkOverlayElement/CoachmarkOverlayElement.js +1 -1
  50. package/es/components/CoachmarkOverlayElements/CoachmarkOverlayElements.js +1 -1
  51. package/es/components/CoachmarkStack/CoachmarkStack.js +1 -1
  52. package/es/components/CoachmarkStack/CoachmarkStackHome.js +1 -1
  53. package/es/components/ComboButton/ComboButton.js +1 -1
  54. package/es/components/CreateFullPage/CreateFullPage.js +1 -1
  55. package/es/components/CreateFullPage/CreateFullPageStep.js +1 -1
  56. package/es/components/CreateInfluencer/CreateInfluencer.js +1 -1
  57. package/es/components/CreateModal/CreateModal.js +1 -1
  58. package/es/components/CreateSidePanel/CreateSidePanel.js +1 -1
  59. package/es/components/CreateTearsheet/CreateTearsheet.js +8 -2
  60. package/es/components/CreateTearsheet/CreateTearsheetDivider.js +1 -1
  61. package/es/components/CreateTearsheet/CreateTearsheetStep.js +1 -1
  62. package/es/components/CreateTearsheetNarrow/CreateTearsheetNarrow.js +1 -1
  63. package/es/components/DataSpreadsheet/DataSpreadsheet.js +1 -1
  64. package/es/components/DataSpreadsheet/DataSpreadsheetBody.js +1 -1
  65. package/es/components/DataSpreadsheet/DataSpreadsheetHeader.js +1 -1
  66. package/es/components/Datagrid/Datagrid/Datagrid.js +1 -1
  67. package/es/components/Datagrid/Datagrid/DatagridContent.js +1 -1
  68. package/es/components/Datagrid/Datagrid/DatagridExpandedRow.js +8 -4
  69. package/es/components/Datagrid/Datagrid/DatagridHeaderRow.js +1 -1
  70. package/es/components/Datagrid/Datagrid/DatagridRefBody.js +1 -1
  71. package/es/components/Datagrid/Datagrid/DatagridRow.js +19 -15
  72. package/es/components/Datagrid/Datagrid/DatagridSelectAll.js +1 -1
  73. package/es/components/Datagrid/Datagrid/DatagridSelectAllWithToggle.js +1 -1
  74. package/es/components/Datagrid/Datagrid/DatagridSimpleBody.js +1 -1
  75. package/es/components/Datagrid/Datagrid/DatagridToolbar.js +1 -1
  76. package/es/components/Datagrid/Datagrid/DraggableElement.js +1 -1
  77. package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/Columns.js +1 -1
  78. package/es/components/Datagrid/Datagrid/addons/Filtering/FilterFlyout.js +1 -1
  79. package/es/components/Datagrid/Datagrid/addons/Filtering/FilterPanel.js +1 -1
  80. package/es/components/Datagrid/Datagrid/addons/Filtering/FilterProvider.js +8 -8
  81. package/es/components/Datagrid/Datagrid/addons/Filtering/constants.d.ts +1 -0
  82. package/es/components/Datagrid/Datagrid/addons/Filtering/constants.js +2 -1
  83. package/es/components/Datagrid/Datagrid/addons/Filtering/hooks/useFilters.js +68 -4
  84. package/es/components/Datagrid/Datagrid/addons/Filtering/utils.js +12 -1
  85. package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditButton/InlineEditButton.js +1 -1
  86. package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditCell/InlineEditCell.js +1 -1
  87. package/es/components/Datagrid/Datagrid/addons/RowSize/RowSizeDropdown.js +1 -1
  88. package/es/components/Datagrid/useActionsColumn.js +1 -1
  89. package/es/components/Datagrid/useColumnCenterAlign.js +1 -1
  90. package/es/components/Datagrid/useColumnRightAlign.js +1 -1
  91. package/es/components/Datagrid/useDefaultStringRenderer.js +1 -1
  92. package/es/components/Datagrid/useFiltering.js +48 -47
  93. package/es/components/Datagrid/useFloatingScroll.js +1 -1
  94. package/es/components/Datagrid/useInlineEdit.js +1 -1
  95. package/es/components/Datagrid/useNestedRowExpander.js +1 -1
  96. package/es/components/Datagrid/useNestedRows.js +1 -1
  97. package/es/components/Datagrid/useRowExpander.js +1 -1
  98. package/es/components/Datagrid/useSelectAllToggle.js +1 -1
  99. package/es/components/Datagrid/useSelectRows.js +2 -2
  100. package/es/components/Datagrid/useSortableColumns.js +1 -1
  101. package/es/components/Datagrid/useStickyColumn.js +1 -1
  102. package/es/components/DelimitedList/DelimitedList.js +1 -1
  103. package/es/components/EditFullPage/EditFullPage.js +1 -1
  104. package/es/components/EditInPlace/EditInPlace.js +1 -1
  105. package/es/components/EditSidePanel/EditSidePanel.js +1 -1
  106. package/es/components/EditTearsheet/EditTearsheet.js +1 -1
  107. package/es/components/EditTearsheet/EditTearsheetForm.js +1 -1
  108. package/es/components/EditTearsheetNarrow/EditTearsheetNarrow.js +1 -1
  109. package/es/components/EditUpdateCards/EditUpdateCards.js +1 -1
  110. package/es/components/EmptyStates/EmptyState.js +1 -1
  111. package/es/components/EmptyStates/EmptyStateContent.js +1 -1
  112. package/es/components/EmptyStates/EmptyStateV2.js +1 -1
  113. package/es/components/EmptyStates/ErrorEmptyState/ErrorEmptyState.js +1 -1
  114. package/es/components/EmptyStates/NoDataEmptyState/NoDataEmptyState.js +1 -1
  115. package/es/components/EmptyStates/NoTagsEmptyState/NoTagsEmptyState.js +1 -1
  116. package/es/components/EmptyStates/NotFoundEmptyState/NotFoundEmptyState.js +1 -1
  117. package/es/components/EmptyStates/NotificationsEmptyState/NotificationsEmptyState.js +1 -1
  118. package/es/components/EmptyStates/UnauthorizedEmptyState/UnauthorizedEmptyState.js +1 -1
  119. package/es/components/EmptyStates/assets/ErrorIllustration.js +1 -1
  120. package/es/components/EmptyStates/assets/NoDataIllustration.js +1 -1
  121. package/es/components/EmptyStates/assets/NoTagsIllustration.js +1 -1
  122. package/es/components/EmptyStates/assets/NotFoundIllustration.js +1 -1
  123. package/es/components/EmptyStates/assets/NotificationsIllustration.js +1 -1
  124. package/es/components/EmptyStates/assets/UnauthorizedIllustration.js +1 -1
  125. package/es/components/ExportModal/ExportModal.js +1 -1
  126. package/es/components/FilterSummary/FilterSummary.js +1 -1
  127. package/es/components/FullPageError/FullPageError.js +1 -1
  128. package/es/components/Guidebanner/Guidebanner.js +1 -1
  129. package/es/components/Guidebanner/GuidebannerElement.js +1 -1
  130. package/es/components/Guidebanner/GuidebannerElementButton.js +1 -1
  131. package/es/components/Guidebanner/GuidebannerElementLink.js +1 -1
  132. package/es/components/HTTPErrors/HTTPError403/HTTPError403.js +1 -1
  133. package/es/components/HTTPErrors/HTTPError404/HTTPError404.js +1 -1
  134. package/es/components/HTTPErrors/HTTPErrorOther/HTTPErrorOther.js +1 -1
  135. package/es/components/ImportModal/ImportModal.js +1 -1
  136. package/es/components/InlineTip/InlineTip.js +1 -1
  137. package/es/components/InlineTip/InlineTipButton.js +1 -1
  138. package/es/components/InlineTip/InlineTipLink.js +1 -1
  139. package/es/components/InterstitialScreen/InterstitialScreen.js +1 -1
  140. package/es/components/InterstitialScreenView/InterstitialScreenView.js +1 -1
  141. package/es/components/InterstitialScreenViewModule/InterstitialScreenViewModule.js +1 -1
  142. package/es/components/NonLinearReading/NonLinearReading.js +1 -1
  143. package/es/components/NotificationsPanel/NotificationsPanel.js +1 -1
  144. package/es/components/OptionsTile/OptionsTile.js +1 -1
  145. package/es/components/PageHeader/PageHeader.js +1 -1
  146. package/es/components/PageHeader/PageHeaderTitle.js +1 -1
  147. package/es/components/PageHeader/PageHeaderUtils.js +1 -1
  148. package/es/components/RemoveModal/RemoveModal.js +1 -1
  149. package/es/components/Saving/Saving.js +1 -1
  150. package/es/components/SearchBar/SearchBar.js +1 -1
  151. package/es/components/SidePanel/SidePanel.js +1 -1
  152. package/es/components/SimpleHeader/SimpleHeader.js +1 -1
  153. package/es/components/StatusIcon/StatusIcon.js +1 -1
  154. package/es/components/SteppedAnimatedMedia/SteppedAnimatedMedia.js +1 -1
  155. package/es/components/StringFormatter/StringFormatter.js +1 -1
  156. package/es/components/TagSet/TagSet.js +1 -1
  157. package/es/components/TagSet/TagSetModal.js +1 -1
  158. package/es/components/TagSet/TagSetOverflow.js +1 -1
  159. package/es/components/Tearsheet/TearsheetShell.js +4 -5
  160. package/es/components/Toolbar/Toolbar.js +1 -1
  161. package/es/components/Toolbar/ToolbarButton.js +1 -1
  162. package/es/components/Toolbar/ToolbarGroup.js +1 -1
  163. package/es/components/TooltipTrigger/TooltipTrigger.js +1 -1
  164. package/es/components/TruncatedList/TruncatedList.js +1 -1
  165. package/es/components/UserAvatar/UserAvatar.js +1 -1
  166. package/es/components/UserProfileImage/UserProfileImage.js +1 -1
  167. package/es/components/WebTerminal/WebTerminal.js +1 -1
  168. package/es/components/WebTerminal/WebTerminalContentWrapper.js +1 -1
  169. package/es/components/_Canary/Canary.js +1 -1
  170. package/es/node_modules/prop-types/index.js +1 -1
  171. package/lib/_virtual/index.js +2 -2
  172. package/lib/components/APIKeyModal/APIKeyModal.js +50 -49
  173. package/lib/components/AboutModal/AboutModal.js +17 -16
  174. package/lib/components/ActionBar/ActionBar.js +16 -15
  175. package/lib/components/ActionBar/ActionBarItem.js +8 -7
  176. package/lib/components/ActionBar/ActionBarOverflowItems.js +9 -8
  177. package/lib/components/ActionSet/ActionSet.js +4 -3
  178. package/lib/components/AddSelect/AddSelectBody.js +67 -66
  179. package/lib/components/AddSelect/AddSelectBreadcrumbs.js +7 -6
  180. package/lib/components/AddSelect/AddSelectFilter.js +19 -18
  181. package/lib/components/AddSelect/AddSelectList.js +7 -6
  182. package/lib/components/AddSelect/AddSelectRow.js +33 -32
  183. package/lib/components/BigNumbers/BigNumbers.js +23 -22
  184. package/lib/components/BreadcrumbWithOverflow/BreadcrumbWithOverflow.js +20 -19
  185. package/lib/components/ButtonSetWithOverflow/ButtonSetWithOverflow.js +3 -2
  186. package/lib/components/Card/Card.js +5 -4
  187. package/lib/components/Card/CardFooter.js +22 -21
  188. package/lib/components/Card/CardHeader.js +27 -26
  189. package/lib/components/Carousel/Carousel.js +13 -12
  190. package/lib/components/Carousel/CarouselItem.js +6 -5
  191. package/lib/components/Cascade/Cascade.js +9 -8
  192. package/lib/components/Checklist/Checklist.js +33 -32
  193. package/lib/components/Checklist/ChecklistChart.js +7 -6
  194. package/lib/components/Checklist/ChecklistIcon.js +7 -6
  195. package/lib/components/Coachmark/Coachmark.js +21 -20
  196. package/lib/components/Coachmark/CoachmarkDragbar.js +10 -9
  197. package/lib/components/Coachmark/CoachmarkHeader.js +8 -7
  198. package/lib/components/Coachmark/CoachmarkOverlay.js +10 -9
  199. package/lib/components/Coachmark/CoachmarkTagline.js +8 -7
  200. package/lib/components/CoachmarkBeacon/CoachmarkBeacon.js +7 -6
  201. package/lib/components/CoachmarkButton/CoachmarkButton.js +6 -5
  202. package/lib/components/CoachmarkFixed/CoachmarkFixed.js +11 -10
  203. package/lib/components/CoachmarkOverlayElement/CoachmarkOverlayElement.js +8 -7
  204. package/lib/components/CoachmarkOverlayElements/CoachmarkOverlayElements.js +16 -15
  205. package/lib/components/CoachmarkStack/CoachmarkStack.js +20 -19
  206. package/lib/components/CoachmarkStack/CoachmarkStackHome.js +17 -16
  207. package/lib/components/ComboButton/ComboButton.js +7 -6
  208. package/lib/components/CreateFullPage/CreateFullPage.js +29 -28
  209. package/lib/components/CreateFullPage/CreateFullPageStep.js +18 -17
  210. package/lib/components/CreateInfluencer/CreateInfluencer.js +13 -12
  211. package/lib/components/CreateModal/CreateModal.js +16 -15
  212. package/lib/components/CreateSidePanel/CreateSidePanel.js +21 -20
  213. package/lib/components/CreateTearsheet/CreateTearsheet.js +27 -20
  214. package/lib/components/CreateTearsheet/CreateTearsheetDivider.js +5 -4
  215. package/lib/components/CreateTearsheet/CreateTearsheetStep.js +19 -18
  216. package/lib/components/CreateTearsheetNarrow/CreateTearsheetNarrow.js +21 -20
  217. package/lib/components/DataSpreadsheet/DataSpreadsheet.js +22 -21
  218. package/lib/components/DataSpreadsheet/DataSpreadsheetBody.js +56 -55
  219. package/lib/components/DataSpreadsheet/DataSpreadsheetHeader.js +39 -38
  220. package/lib/components/Datagrid/Datagrid/Datagrid.js +7 -6
  221. package/lib/components/Datagrid/Datagrid/DatagridContent.js +32 -31
  222. package/lib/components/Datagrid/Datagrid/DatagridExpandedRow.js +8 -3
  223. package/lib/components/Datagrid/Datagrid/DatagridHeaderRow.js +6 -5
  224. package/lib/components/Datagrid/Datagrid/DatagridRefBody.js +3 -2
  225. package/lib/components/Datagrid/Datagrid/DatagridRow.js +20 -15
  226. package/lib/components/Datagrid/Datagrid/DatagridSelectAll.js +4 -3
  227. package/lib/components/Datagrid/Datagrid/DatagridSelectAllWithToggle.js +14 -13
  228. package/lib/components/Datagrid/Datagrid/DatagridSimpleBody.js +3 -2
  229. package/lib/components/Datagrid/Datagrid/DatagridToolbar.js +6 -5
  230. package/lib/components/Datagrid/Datagrid/DraggableElement.js +13 -12
  231. package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/Columns.js +15 -14
  232. package/lib/components/Datagrid/Datagrid/addons/Filtering/FilterFlyout.js +25 -24
  233. package/lib/components/Datagrid/Datagrid/addons/Filtering/FilterPanel.js +27 -26
  234. package/lib/components/Datagrid/Datagrid/addons/Filtering/FilterProvider.js +7 -7
  235. package/lib/components/Datagrid/Datagrid/addons/Filtering/constants.d.ts +1 -0
  236. package/lib/components/Datagrid/Datagrid/addons/Filtering/constants.js +2 -0
  237. package/lib/components/Datagrid/Datagrid/addons/Filtering/hooks/useFilters.js +65 -1
  238. package/lib/components/Datagrid/Datagrid/addons/Filtering/utils.js +11 -0
  239. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditButton/InlineEditButton.js +15 -14
  240. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditCell/InlineEditCell.js +20 -19
  241. package/lib/components/Datagrid/Datagrid/addons/RowSize/RowSizeDropdown.js +9 -8
  242. package/lib/components/Datagrid/useActionsColumn.js +7 -6
  243. package/lib/components/Datagrid/useColumnCenterAlign.js +3 -2
  244. package/lib/components/Datagrid/useColumnRightAlign.js +3 -2
  245. package/lib/components/Datagrid/useDefaultStringRenderer.js +4 -3
  246. package/lib/components/Datagrid/useFiltering.js +46 -45
  247. package/lib/components/Datagrid/useFloatingScroll.js +6 -2
  248. package/lib/components/Datagrid/useInlineEdit.js +4 -3
  249. package/lib/components/Datagrid/useNestedRowExpander.js +4 -3
  250. package/lib/components/Datagrid/useNestedRows.js +6 -2
  251. package/lib/components/Datagrid/useRowExpander.js +3 -2
  252. package/lib/components/Datagrid/useSelectAllToggle.js +3 -2
  253. package/lib/components/Datagrid/useSelectRows.js +5 -4
  254. package/lib/components/Datagrid/useSortableColumns.js +3 -2
  255. package/lib/components/Datagrid/useStickyColumn.js +4 -3
  256. package/lib/components/DelimitedList/DelimitedList.js +8 -7
  257. package/lib/components/EditFullPage/EditFullPage.js +6 -5
  258. package/lib/components/EditInPlace/EditInPlace.js +23 -22
  259. package/lib/components/EditSidePanel/EditSidePanel.js +23 -22
  260. package/lib/components/EditTearsheet/EditTearsheet.js +18 -17
  261. package/lib/components/EditTearsheet/EditTearsheetForm.js +11 -10
  262. package/lib/components/EditTearsheetNarrow/EditTearsheetNarrow.js +6 -5
  263. package/lib/components/EditUpdateCards/EditUpdateCards.js +31 -30
  264. package/lib/components/EmptyStates/EmptyState.js +20 -19
  265. package/lib/components/EmptyStates/EmptyStateContent.js +16 -15
  266. package/lib/components/EmptyStates/EmptyStateV2.js +20 -19
  267. package/lib/components/EmptyStates/ErrorEmptyState/ErrorEmptyState.js +18 -17
  268. package/lib/components/EmptyStates/NoDataEmptyState/NoDataEmptyState.js +18 -17
  269. package/lib/components/EmptyStates/NoTagsEmptyState/NoTagsEmptyState.js +18 -17
  270. package/lib/components/EmptyStates/NotFoundEmptyState/NotFoundEmptyState.js +18 -17
  271. package/lib/components/EmptyStates/NotificationsEmptyState/NotificationsEmptyState.js +18 -17
  272. package/lib/components/EmptyStates/UnauthorizedEmptyState/UnauthorizedEmptyState.js +18 -17
  273. package/lib/components/EmptyStates/assets/ErrorIllustration.js +7 -6
  274. package/lib/components/EmptyStates/assets/NoDataIllustration.js +7 -6
  275. package/lib/components/EmptyStates/assets/NoTagsIllustration.js +7 -6
  276. package/lib/components/EmptyStates/assets/NotFoundIllustration.js +7 -6
  277. package/lib/components/EmptyStates/assets/NotificationsIllustration.js +7 -6
  278. package/lib/components/EmptyStates/assets/UnauthorizedIllustration.js +7 -6
  279. package/lib/components/ExportModal/ExportModal.js +30 -29
  280. package/lib/components/FilterSummary/FilterSummary.js +13 -12
  281. package/lib/components/FullPageError/FullPageError.js +13 -12
  282. package/lib/components/Guidebanner/Guidebanner.js +20 -19
  283. package/lib/components/Guidebanner/GuidebannerElement.js +8 -7
  284. package/lib/components/Guidebanner/GuidebannerElementButton.js +8 -7
  285. package/lib/components/Guidebanner/GuidebannerElementLink.js +6 -5
  286. package/lib/components/HTTPErrors/HTTPError403/HTTPError403.js +11 -10
  287. package/lib/components/HTTPErrors/HTTPError404/HTTPError404.js +11 -10
  288. package/lib/components/HTTPErrors/HTTPErrorOther/HTTPErrorOther.js +11 -10
  289. package/lib/components/ImportModal/ImportModal.js +32 -31
  290. package/lib/components/InlineTip/InlineTip.js +21 -20
  291. package/lib/components/InlineTip/InlineTipButton.js +6 -5
  292. package/lib/components/InlineTip/InlineTipLink.js +6 -5
  293. package/lib/components/InterstitialScreen/InterstitialScreen.js +13 -12
  294. package/lib/components/InterstitialScreenView/InterstitialScreenView.js +7 -6
  295. package/lib/components/InterstitialScreenViewModule/InterstitialScreenViewModule.js +7 -6
  296. package/lib/components/NonLinearReading/NonLinearReading.js +9 -8
  297. package/lib/components/NotificationsPanel/NotificationsPanel.js +59 -58
  298. package/lib/components/OptionsTile/OptionsTile.js +21 -20
  299. package/lib/components/PageHeader/PageHeader.js +74 -73
  300. package/lib/components/PageHeader/PageHeaderTitle.js +21 -20
  301. package/lib/components/PageHeader/PageHeaderUtils.js +3 -2
  302. package/lib/components/RemoveModal/RemoveModal.js +22 -21
  303. package/lib/components/Saving/Saving.js +18 -17
  304. package/lib/components/SearchBar/SearchBar.js +20 -19
  305. package/lib/components/SidePanel/SidePanel.js +47 -46
  306. package/lib/components/SimpleHeader/SimpleHeader.js +17 -16
  307. package/lib/components/StatusIcon/StatusIcon.js +9 -8
  308. package/lib/components/SteppedAnimatedMedia/SteppedAnimatedMedia.js +7 -6
  309. package/lib/components/StringFormatter/StringFormatter.js +11 -10
  310. package/lib/components/TagSet/TagSet.js +21 -20
  311. package/lib/components/TagSet/TagSetModal.js +13 -12
  312. package/lib/components/TagSet/TagSetOverflow.js +18 -17
  313. package/lib/components/Tearsheet/TearsheetShell.js +35 -35
  314. package/lib/components/Toolbar/Toolbar.js +7 -6
  315. package/lib/components/Toolbar/ToolbarButton.js +9 -8
  316. package/lib/components/Toolbar/ToolbarGroup.js +6 -5
  317. package/lib/components/TooltipTrigger/TooltipTrigger.js +6 -5
  318. package/lib/components/TruncatedList/TruncatedList.js +14 -13
  319. package/lib/components/UserAvatar/UserAvatar.js +3 -2
  320. package/lib/components/UserProfileImage/UserProfileImage.js +3 -2
  321. package/lib/components/WebTerminal/WebTerminal.js +14 -13
  322. package/lib/components/WebTerminal/WebTerminalContentWrapper.js +5 -4
  323. package/lib/components/_Canary/Canary.js +6 -5
  324. package/lib/node_modules/prop-types/index.js +1 -1
  325. package/package.json +6 -5
  326. package/scss/components/BreadcrumbWithOverflow/_breadcrumb-with-overflow.scss +0 -1
  327. package/scss/components/Datagrid/styles/_datagrid.scss +61 -4
  328. package/scss/components/SidePanel/_side-panel.scss +8 -1
  329. package/scss/components/Tearsheet/_tearsheet.scss +4 -5
  330. package/es/_virtual/index2.js +0 -10
  331. package/es/node_modules/classnames/index.js +0 -70
  332. package/lib/_virtual/index2.js +0 -14
  333. package/lib/node_modules/classnames/index.js +0 -74
@@ -2962,6 +2962,9 @@ em {
2962
2962
  --cds-ai-gradient-start-01: rgba(242, 244, 248, 0.5);
2963
2963
  --cds-ai-gradient-start-02: rgba(237, 245, 255, 0.5);
2964
2964
  --cds-ai-inner-shadow: rgba(69, 137, 255, 0.2);
2965
+ --cds-ai-overlay: rgba(0, 17, 65, 0.5);
2966
+ --cds-ai-skeleton-background: #b8d3ff;
2967
+ --cds-ai-skeleton-element-background: #001141;
2965
2968
  --cds-background: #ffffff;
2966
2969
  --cds-background-active: rgba(141, 141, 141, 0.5);
2967
2970
  --cds-background-brand: #0f62fe;
@@ -3182,6 +3185,9 @@ em {
3182
3185
  --cds-ai-gradient-start-01: rgba(242, 244, 248, 0.5);
3183
3186
  --cds-ai-gradient-start-02: rgba(237, 245, 255, 0.5);
3184
3187
  --cds-ai-inner-shadow: rgba(69, 137, 255, 0.2);
3188
+ --cds-ai-overlay: rgba(0, 17, 65, 0.5);
3189
+ --cds-ai-skeleton-background: #b8d3ff;
3190
+ --cds-ai-skeleton-element-background: #001141;
3185
3191
  --cds-background: #f4f4f4;
3186
3192
  --cds-background-active: rgba(141, 141, 141, 0.5);
3187
3193
  --cds-background-brand: #0f62fe;
@@ -3401,6 +3407,9 @@ em {
3401
3407
  --cds-ai-gradient-end: rgba(38, 38, 38, 0);
3402
3408
  --cds-ai-gradient-start-01: rgba(208, 226, 255, 0.2);
3403
3409
  --cds-ai-inner-shadow: rgba(69, 137, 255, 0.2);
3410
+ --cds-ai-overlay: rgba(0, 17, 65, 0.5);
3411
+ --cds-ai-skeleton-background: #0053ff;
3412
+ --cds-ai-skeleton-element-background: #001141;
3404
3413
  --cds-background: #262626;
3405
3414
  --cds-background-active: rgba(141, 141, 141, 0.4);
3406
3415
  --cds-background-brand: #0f62fe;
@@ -3617,6 +3626,9 @@ em {
3617
3626
  --cds-ai-gradient-end: rgba(38, 38, 38, 0);
3618
3627
  --cds-ai-gradient-start-01: rgba(208, 226, 255, 0.2);
3619
3628
  --cds-ai-inner-shadow: rgba(69, 137, 255, 0.2);
3629
+ --cds-ai-overlay: rgba(0, 17, 65, 0.5);
3630
+ --cds-ai-skeleton-background: #0053ff;
3631
+ --cds-ai-skeleton-element-background: #001141;
3620
3632
  --cds-background: #161616;
3621
3633
  --cds-background-active: rgba(141, 141, 141, 0.4);
3622
3634
  --cds-background-brand: #0f62fe;
@@ -4122,7 +4134,7 @@ li.cds--accordion__item--disabled:last-of-type {
4122
4134
  padding-block-start: 100%;
4123
4135
  }
4124
4136
 
4125
- @keyframes hide-feedback {
4137
+ @keyframes cds--hide-feedback {
4126
4138
  0% {
4127
4139
  opacity: 1;
4128
4140
  visibility: inherit;
@@ -4132,7 +4144,7 @@ li.cds--accordion__item--disabled:last-of-type {
4132
4144
  visibility: hidden;
4133
4145
  }
4134
4146
  }
4135
- @keyframes show-feedback {
4147
+ @keyframes cds--show-feedback {
4136
4148
  0% {
4137
4149
  opacity: 0;
4138
4150
  visibility: hidden;
@@ -4142,7 +4154,7 @@ li.cds--accordion__item--disabled:last-of-type {
4142
4154
  visibility: inherit;
4143
4155
  }
4144
4156
  }
4145
- @keyframes skeleton {
4157
+ @keyframes cds--skeleton {
4146
4158
  0% {
4147
4159
  opacity: 0.3;
4148
4160
  transform: scaleX(0);
@@ -5041,7 +5053,7 @@ li.cds--accordion__item--disabled:last-of-type {
5041
5053
  }
5042
5054
  .cds--btn.cds--skeleton::before {
5043
5055
  position: absolute;
5044
- animation: 3000ms ease-in-out skeleton infinite;
5056
+ animation: 3000ms ease-in-out cds--skeleton infinite;
5045
5057
  background: var(--cds-skeleton-element, #c6c6c6);
5046
5058
  block-size: 100%;
5047
5059
  content: "";
@@ -5674,7 +5686,7 @@ a.cds--overflow-menu-options__btn::before {
5674
5686
  }
5675
5687
  .cds--breadcrumb.cds--skeleton .cds--link::before {
5676
5688
  position: absolute;
5677
- animation: 3000ms ease-in-out skeleton infinite;
5689
+ animation: 3000ms ease-in-out cds--skeleton infinite;
5678
5690
  background: var(--cds-skeleton-element, #c6c6c6);
5679
5691
  block-size: 100%;
5680
5692
  content: "";
@@ -6011,7 +6023,7 @@ textarea:-webkit-autofill:focus {
6011
6023
  }
6012
6024
  .cds--label.cds--skeleton::before {
6013
6025
  position: absolute;
6014
- animation: 3000ms ease-in-out skeleton infinite;
6026
+ animation: 3000ms ease-in-out cds--skeleton infinite;
6015
6027
  background: var(--cds-skeleton-element, #c6c6c6);
6016
6028
  block-size: 100%;
6017
6029
  content: "";
@@ -6430,7 +6442,7 @@ fieldset[disabled] .cds--form__helper-text {
6430
6442
  }
6431
6443
  .cds--checkbox-label-text.cds--skeleton::before {
6432
6444
  position: absolute;
6433
- animation: 3000ms ease-in-out skeleton infinite;
6445
+ animation: 3000ms ease-in-out cds--skeleton infinite;
6434
6446
  background: var(--cds-skeleton-element, #c6c6c6);
6435
6447
  block-size: 100%;
6436
6448
  content: "";
@@ -6575,10 +6587,10 @@ fieldset[disabled] .cds--form__helper-text {
6575
6587
  border: none;
6576
6588
  }
6577
6589
  .cds--copy-btn.cds--copy-btn--animating.cds--copy-btn--fade-out::before, .cds--copy-btn.cds--copy-btn--animating.cds--copy-btn--fade-out .cds--copy-btn__feedback {
6578
- animation: 110ms cubic-bezier(0.2, 0, 0.38, 0.9) hide-feedback;
6590
+ animation: 110ms cubic-bezier(0.2, 0, 0.38, 0.9) cds--hide-feedback;
6579
6591
  }
6580
6592
  .cds--copy-btn.cds--copy-btn--animating.cds--copy-btn--fade-in::before, .cds--copy-btn.cds--copy-btn--animating.cds--copy-btn--fade-in .cds--copy-btn__feedback {
6581
- animation: 110ms cubic-bezier(0.2, 0, 0.38, 0.9) show-feedback;
6593
+ animation: 110ms cubic-bezier(0.2, 0, 0.38, 0.9) cds--show-feedback;
6582
6594
  }
6583
6595
 
6584
6596
  .cds--copy-btn svg {
@@ -6731,12 +6743,12 @@ fieldset[disabled] .cds--form__helper-text {
6731
6743
 
6732
6744
  .cds--snippet--inline.cds--copy-btn--animating.cds--copy-btn--fade-out::before,
6733
6745
  .cds--snippet--inline.cds--copy-btn--animating.cds--copy-btn--fade-out .cds--copy-btn__feedback {
6734
- animation: 110ms cubic-bezier(0.2, 0, 0.38, 0.9) hide-feedback;
6746
+ animation: 110ms cubic-bezier(0.2, 0, 0.38, 0.9) cds--hide-feedback;
6735
6747
  }
6736
6748
 
6737
6749
  .cds--snippet--inline.cds--copy-btn--animating.cds--copy-btn--fade-in::before,
6738
6750
  .cds--snippet--inline.cds--copy-btn--animating.cds--copy-btn--fade-in .cds--copy-btn__feedback {
6739
- animation: 110ms cubic-bezier(0.2, 0, 0.38, 0.9) show-feedback;
6751
+ animation: 110ms cubic-bezier(0.2, 0, 0.38, 0.9) cds--show-feedback;
6740
6752
  }
6741
6753
 
6742
6754
  .cds--snippet--inline code {
@@ -7165,7 +7177,7 @@ fieldset[disabled] .cds--form__helper-text {
7165
7177
  }
7166
7178
  .cds--snippet.cds--skeleton span::before {
7167
7179
  position: absolute;
7168
- animation: 3000ms ease-in-out skeleton infinite;
7180
+ animation: 3000ms ease-in-out cds--skeleton infinite;
7169
7181
  background: var(--cds-skeleton-element, #c6c6c6);
7170
7182
  block-size: 100%;
7171
7183
  content: "";
@@ -7427,7 +7439,7 @@ fieldset[disabled] .cds--form__helper-text {
7427
7439
  .cds--text-input--password__visibility.cds--tooltip--visible::before, .cds--text-input--password__visibility.cds--tooltip--visible::after, .cds--text-input--password__visibility:hover::before, .cds--text-input--password__visibility:hover::after, .cds--text-input--password__visibility:focus::before, .cds--text-input--password__visibility:focus::after {
7428
7440
  opacity: 1;
7429
7441
  }
7430
- @keyframes tooltip-fade {
7442
+ @keyframes cds--tooltip-fade {
7431
7443
  from {
7432
7444
  opacity: 0;
7433
7445
  }
@@ -7447,7 +7459,7 @@ fieldset[disabled] .cds--form__helper-text {
7447
7459
  .cds--text-input--password__visibility.cds--tooltip--visible + .cds--assistive-text, .cds--text-input--password__visibility.cds--tooltip--visible.cds--tooltip--a11y::before, .cds--text-input--password__visibility:hover .cds--assistive-text,
7448
7460
  .cds--text-input--password__visibility:hover + .cds--assistive-text, .cds--text-input--password__visibility:hover.cds--tooltip--a11y::before, .cds--text-input--password__visibility:focus .cds--assistive-text,
7449
7461
  .cds--text-input--password__visibility:focus + .cds--assistive-text, .cds--text-input--password__visibility:focus.cds--tooltip--a11y::before {
7450
- animation: tooltip-fade 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
7462
+ animation: cds--tooltip-fade 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
7451
7463
  }
7452
7464
  .cds--text-input--password__visibility.cds--tooltip--hidden .cds--assistive-text, .cds--text-input--password__visibility.cds--tooltip--hidden + .cds--assistive-text {
7453
7465
  overflow: hidden;
@@ -7624,7 +7636,7 @@ fieldset[disabled] .cds--form__helper-text {
7624
7636
  }
7625
7637
  .cds--skeleton.cds--text-input::before {
7626
7638
  position: absolute;
7627
- animation: 3000ms ease-in-out skeleton infinite;
7639
+ animation: 3000ms ease-in-out cds--skeleton infinite;
7628
7640
  background: var(--cds-skeleton-element, #c6c6c6);
7629
7641
  block-size: 100%;
7630
7642
  content: "";
@@ -8107,7 +8119,7 @@ fieldset[disabled] .cds--form__helper-text {
8107
8119
  }
8108
8120
  .cds--tag.cds--skeleton::before {
8109
8121
  position: absolute;
8110
- animation: 3000ms ease-in-out skeleton infinite;
8122
+ animation: 3000ms ease-in-out cds--skeleton infinite;
8111
8123
  background: var(--cds-skeleton-element, #c6c6c6);
8112
8124
  block-size: 100%;
8113
8125
  content: "";
@@ -10084,7 +10096,7 @@ fieldset[disabled] .cds--form__helper-text {
10084
10096
  }
10085
10097
  .cds--radio-button__label.cds--skeleton::before {
10086
10098
  position: absolute;
10087
- animation: 3000ms ease-in-out skeleton infinite;
10099
+ animation: 3000ms ease-in-out cds--skeleton infinite;
10088
10100
  background: var(--cds-skeleton-element, #c6c6c6);
10089
10101
  block-size: 100%;
10090
10102
  content: "";
@@ -11305,7 +11317,7 @@ tr.cds--parent-row:not(.cds--expandable-row):not(:first-of-type) td.cds--table-c
11305
11317
  .cds--search--md.cds--skeleton .cds--search-input::before,
11306
11318
  .cds--search--sm.cds--skeleton .cds--search-input::before {
11307
11319
  position: absolute;
11308
- animation: 3000ms ease-in-out skeleton infinite;
11320
+ animation: 3000ms ease-in-out cds--skeleton infinite;
11309
11321
  background: var(--cds-skeleton-element, #c6c6c6);
11310
11322
  block-size: 100%;
11311
11323
  content: "";
@@ -12347,7 +12359,7 @@ tr.cds--parent-row.cds--data-table--selected.cds--expandable-row--hover + tr[dat
12347
12359
  .cds--data-table.cds--skeleton th span::before,
12348
12360
  .cds--data-table.cds--skeleton td span::before {
12349
12361
  position: absolute;
12350
- animation: 3000ms ease-in-out skeleton infinite;
12362
+ animation: 3000ms ease-in-out cds--skeleton infinite;
12351
12363
  background: var(--cds-skeleton-element, #c6c6c6);
12352
12364
  block-size: 100%;
12353
12365
  content: "";
@@ -12400,7 +12412,7 @@ tr.cds--parent-row.cds--data-table--selected.cds--expandable-row--hover + tr[dat
12400
12412
  }
12401
12413
  .cds--data-table-container.cds--skeleton .cds--data-table-header__title::before {
12402
12414
  position: absolute;
12403
- animation: 3000ms ease-in-out skeleton infinite;
12415
+ animation: 3000ms ease-in-out cds--skeleton infinite;
12404
12416
  background: var(--cds-skeleton-element, #c6c6c6);
12405
12417
  block-size: 100%;
12406
12418
  content: "";
@@ -12431,7 +12443,7 @@ tr.cds--parent-row.cds--data-table--selected.cds--expandable-row--hover + tr[dat
12431
12443
  }
12432
12444
  .cds--data-table-container.cds--skeleton .cds--data-table-header__description::before {
12433
12445
  position: absolute;
12434
- animation: 3000ms ease-in-out skeleton infinite;
12446
+ animation: 3000ms ease-in-out cds--skeleton infinite;
12435
12447
  background: var(--cds-skeleton-element, #c6c6c6);
12436
12448
  block-size: 100%;
12437
12449
  content: "";
@@ -13429,7 +13441,7 @@ th .cds--table-sort__flex {
13429
13441
  .cds--date-picker.cds--skeleton input::before,
13430
13442
  .cds--date-picker__input.cds--skeleton::before {
13431
13443
  position: absolute;
13432
- animation: 3000ms ease-in-out skeleton infinite;
13444
+ animation: 3000ms ease-in-out cds--skeleton infinite;
13433
13445
  background: var(--cds-skeleton-element, #c6c6c6);
13434
13446
  block-size: 100%;
13435
13447
  content: "";
@@ -13464,7 +13476,7 @@ th .cds--table-sort__flex {
13464
13476
  }
13465
13477
  .cds--date-picker.cds--skeleton .cds--label::before {
13466
13478
  position: absolute;
13467
- animation: 3000ms ease-in-out skeleton infinite;
13479
+ animation: 3000ms ease-in-out cds--skeleton infinite;
13468
13480
  background: var(--cds-skeleton-element, #c6c6c6);
13469
13481
  block-size: 100%;
13470
13482
  content: "";
@@ -13934,7 +13946,7 @@ button.cds--dropdown-text:focus {
13934
13946
  .cds--dropdown-v2.cds--skeleton::before,
13935
13947
  .cds--dropdown.cds--skeleton::before {
13936
13948
  position: absolute;
13937
- animation: 3000ms ease-in-out skeleton infinite;
13949
+ animation: 3000ms ease-in-out cds--skeleton infinite;
13938
13950
  background: var(--cds-skeleton-element, #c6c6c6);
13939
13951
  block-size: 100%;
13940
13952
  content: "";
@@ -13992,7 +14004,7 @@ button.cds--dropdown-text:focus {
13992
14004
  animation-duration: 690ms;
13993
14005
  animation-fill-mode: forwards;
13994
14006
  animation-iteration-count: infinite;
13995
- animation-name: rotate;
14007
+ animation-name: cds--rotate;
13996
14008
  animation-timing-function: linear;
13997
14009
  block-size: 5.5rem;
13998
14010
  inline-size: 5.5rem;
@@ -14004,7 +14016,7 @@ button.cds--dropdown-text:focus {
14004
14016
  }
14005
14017
  .cds--loading svg circle {
14006
14018
  animation-duration: 10ms;
14007
- animation-name: init-stroke;
14019
+ animation-name: cds--init-stroke;
14008
14020
  animation-timing-function: cubic-bezier(0.5, 0, 0.1, 1);
14009
14021
  }
14010
14022
  @media screen and (prefers-reduced-motion: reduce) {
@@ -14033,13 +14045,13 @@ button.cds--dropdown-text:focus {
14033
14045
  }
14034
14046
 
14035
14047
  .cds--loading--stop {
14036
- animation: rotate-end-p1 700ms cubic-bezier(0, 0, 0.25, 1) forwards, rotate-end-p2 700ms cubic-bezier(0, 0, 0.25, 1) 700ms forwards;
14048
+ animation: cds--rotate-end-p1 700ms cubic-bezier(0, 0, 0.25, 1) forwards, cds--rotate-end-p2 700ms cubic-bezier(0, 0, 0.25, 1) 700ms forwards;
14037
14049
  }
14038
14050
  .cds--loading--stop svg circle {
14039
14051
  animation-delay: 700ms;
14040
14052
  animation-duration: 700ms;
14041
14053
  animation-fill-mode: forwards;
14042
- animation-name: stroke-end;
14054
+ animation-name: cds--stroke-end;
14043
14055
  animation-timing-function: cubic-bezier(0, 0, 0.25, 1);
14044
14056
  }
14045
14057
  @media screen and (prefers-reduced-motion: reduce) {
@@ -14092,7 +14104,7 @@ button.cds--dropdown-text:focus {
14092
14104
  display: none;
14093
14105
  }
14094
14106
 
14095
- @keyframes rotate {
14107
+ @keyframes cds--rotate {
14096
14108
  0% {
14097
14109
  transform: rotate(0deg);
14098
14110
  }
@@ -14100,18 +14112,18 @@ button.cds--dropdown-text:focus {
14100
14112
  transform: rotate(360deg);
14101
14113
  }
14102
14114
  }
14103
- @keyframes rotate-end-p1 {
14115
+ @keyframes cds--rotate-end-p1 {
14104
14116
  100% {
14105
14117
  transform: rotate(360deg);
14106
14118
  }
14107
14119
  }
14108
- @keyframes rotate-end-p2 {
14120
+ @keyframes cds--rotate-end-p2 {
14109
14121
  100% {
14110
14122
  transform: rotate(-360deg);
14111
14123
  }
14112
14124
  }
14113
14125
  /* Stroke animations */
14114
- @keyframes init-stroke {
14126
+ @keyframes cds--init-stroke {
14115
14127
  0% {
14116
14128
  stroke-dashoffset: 276.4608;
14117
14129
  }
@@ -14119,7 +14131,7 @@ button.cds--dropdown-text:focus {
14119
14131
  stroke-dashoffset: 52.527552;
14120
14132
  }
14121
14133
  }
14122
- @keyframes stroke-end {
14134
+ @keyframes cds--stroke-end {
14123
14135
  0% {
14124
14136
  stroke-dashoffset: 52.527552;
14125
14137
  }
@@ -15699,7 +15711,7 @@ button.cds--dropdown-text:focus {
15699
15711
  }
15700
15712
  .cds--number.cds--skeleton::before {
15701
15713
  position: absolute;
15702
- animation: 3000ms ease-in-out skeleton infinite;
15714
+ animation: 3000ms ease-in-out cds--skeleton infinite;
15703
15715
  background: var(--cds-skeleton-element, #c6c6c6);
15704
15716
  block-size: 100%;
15705
15717
  content: "";
@@ -16286,7 +16298,7 @@ optgroup.cds--select-optgroup:disabled,
16286
16298
  }
16287
16299
  .cds--select.cds--skeleton::before {
16288
16300
  position: absolute;
16289
- animation: 3000ms ease-in-out skeleton infinite;
16301
+ animation: 3000ms ease-in-out cds--skeleton infinite;
16290
16302
  background: var(--cds-skeleton-element, #c6c6c6);
16291
16303
  block-size: 100%;
16292
16304
  content: "";
@@ -16647,7 +16659,7 @@ optgroup.cds--select-optgroup:disabled,
16647
16659
  }
16648
16660
  .cds--text-area.cds--skeleton::before {
16649
16661
  position: absolute;
16650
- animation: 3000ms ease-in-out skeleton infinite;
16662
+ animation: 3000ms ease-in-out cds--skeleton infinite;
16651
16663
  background: var(--cds-skeleton-element, #c6c6c6);
16652
16664
  block-size: 100%;
16653
16665
  content: "";
@@ -17186,7 +17198,7 @@ optgroup.cds--select-optgroup:disabled,
17186
17198
  inline-size: 50%;
17187
17199
  }
17188
17200
 
17189
- @keyframes stroke {
17201
+ @keyframes prefix--stroke {
17190
17202
  100% {
17191
17203
  stroke-dashoffset: 0;
17192
17204
  }
@@ -17229,7 +17241,7 @@ optgroup.cds--select-optgroup:disabled,
17229
17241
  .cds--inline-loading__checkmark {
17230
17242
  animation-duration: 250ms;
17231
17243
  animation-fill-mode: forwards;
17232
- animation-name: stroke;
17244
+ animation-name: cds--stroke;
17233
17245
  fill: none;
17234
17246
  stroke: var(--cds-interactive, #0f62fe);
17235
17247
  stroke-dasharray: 12;
@@ -17695,52 +17707,13 @@ optgroup.cds--select-optgroup:disabled,
17695
17707
 
17696
17708
  .cds--modal-scroll-content {
17697
17709
  border-block-end: 2px solid transparent;
17710
+ mask-image: linear-gradient(to bottom, var(--cds-layer) calc(100% - 80px), transparent calc(100% - 48px), transparent 100%), linear-gradient(to left, var(--cds-layer) 0, 16px, transparent 16px), linear-gradient(to right, var(--cds-layer) 0, 2px, transparent 2px), linear-gradient(to top, var(--cds-layer) 0, 2px, transparent 2px);
17698
17711
  }
17699
17712
 
17700
17713
  .cds--modal-scroll-content > *:last-child {
17701
17714
  padding-block-end: 1.5rem;
17702
17715
  }
17703
17716
 
17704
- .cds--modal-content--overflow-indicator {
17705
- position: absolute;
17706
- background: var(--cds-layer);
17707
- block-size: 3rem;
17708
- grid-column: 1/-1;
17709
- grid-row: 2/-2;
17710
- inline-size: calc(100% - 1rem);
17711
- inset-block-end: 0;
17712
- inset-inline-start: 0;
17713
- pointer-events: none;
17714
- }
17715
- .cds--modal-content--overflow-indicator::before {
17716
- position: absolute;
17717
- background-image: linear-gradient(to bottom, transparent, var(--cds-layer));
17718
- block-size: 2rem;
17719
- content: "";
17720
- inline-size: 100%;
17721
- inset-block-start: -32px;
17722
- pointer-events: none;
17723
- }
17724
-
17725
- @media not all and (min-resolution >= 0.001dpcm) {
17726
- @supports (-webkit-appearance: none) and (stroke-color: transparent) {
17727
- .cds--modal-content--overflow-indicator {
17728
- background-image: linear-gradient(to bottom, rgba(var(--cds-layer), 0), var(--cds-layer));
17729
- }
17730
- }
17731
- }
17732
- .cds--modal-content:focus ~ .cds--modal-content--overflow-indicator {
17733
- margin: 0 2px 2px;
17734
- }
17735
-
17736
- @media screen and (-ms-high-contrast: active) {
17737
- .cds--modal-scroll-content > *:last-child {
17738
- padding-block-end: 0;
17739
- }
17740
- .cds--modal-content--overflow-indicator {
17741
- display: none;
17742
- }
17743
- }
17744
17717
  .cds--modal-footer {
17745
17718
  display: flex;
17746
17719
  justify-content: flex-end;
@@ -17812,14 +17785,20 @@ optgroup.cds--select-optgroup:disabled,
17812
17785
  margin: 0;
17813
17786
  }
17814
17787
 
17788
+ .cds--modal--slug.cds--modal {
17789
+ background-color: var(--cds-ai-overlay, rgba(0, 17, 65, 0.5));
17790
+ }
17791
+
17815
17792
  .cds--modal--slug .cds--modal-container {
17816
- background: linear-gradient(to top, var(--cds-ai-aura-start, rgba(69, 137, 255, 0.1)) 0%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%) padding-box, linear-gradient(to top, var(--cds-background, var(--cds-background, #ffffff)), var(--cds-background, var(--cds-background, #ffffff))) padding-box, linear-gradient(to bottom, var(--cds-ai-border-start, #78a9ff), var(--cds-ai-border-end, #d0e2ff)) border-box, linear-gradient(to top, var(--cds-background, var(--cds-background, #ffffff)), var(--cds-background, var(--cds-background, #ffffff))) border-box;
17793
+ background: linear-gradient(to top, var(--cds-layer, var(--cds-background, #ffffff)) 0%, var(--cds-ai-aura-start, rgba(69, 137, 255, 0.1)) 0%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%) padding-box, linear-gradient(to top, var(--cds-layer, var(--cds-background, #ffffff)), var(--cds-layer, var(--cds-background, #ffffff))) padding-box, linear-gradient(to bottom, var(--cds-ai-border-start, #78a9ff), var(--cds-ai-border-end, #d0e2ff)) border-box, linear-gradient(to top, var(--cds-layer, var(--cds-background, #ffffff)), var(--cds-layer, var(--cds-background, #ffffff))) border-box;
17794
+ border: 1px solid transparent;
17817
17795
  background-color: var(--cds-layer);
17796
+ box-shadow: inset 0 -80px 70px -65px var(--cds-ai-inner-shadow, rgba(69, 137, 255, 0.2)), 0 4px 10px 2px var(--cds-ai-drop-shadow, rgba(15, 98, 254, 0.32));
17818
17797
  }
17819
17798
 
17820
- .cds--modal--slug .cds--modal-container:has(.cds--btn-set:not(.cds--modal-footer--three-button) > button:not(:only-child)) {
17821
- background: linear-gradient(to top, var(--cds-ai-aura-start, rgba(69, 137, 255, 0.1)) calc(0% + 64px), var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%) padding-box, linear-gradient(to top, var(--cds-background, var(--cds-background, #ffffff)), var(--cds-background, var(--cds-background, #ffffff))) padding-box, linear-gradient(to bottom, var(--cds-ai-border-start, #78a9ff), var(--cds-ai-border-end, #d0e2ff)) border-box, linear-gradient(to top, var(--cds-background, var(--cds-background, #ffffff)), var(--cds-background, var(--cds-background, #ffffff))) border-box;
17822
- background-color: var(--cds-layer);
17799
+ .cds--modal--slug .cds--modal-container:has(.cds--modal-footer) {
17800
+ background: linear-gradient(to top, var(--cds-layer, var(--cds-background, #ffffff)) calc(0% + 64px), var(--cds-ai-aura-start, rgba(69, 137, 255, 0.1)) calc(0% + 64px), var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%) padding-box, linear-gradient(to top, var(--cds-layer, var(--cds-background, #ffffff)), var(--cds-layer, var(--cds-background, #ffffff))) padding-box, linear-gradient(to bottom, var(--cds-ai-border-start, #78a9ff), var(--cds-ai-border-end, #d0e2ff)) border-box, linear-gradient(to top, var(--cds-layer, var(--cds-background, #ffffff)), var(--cds-layer, var(--cds-background, #ffffff))) border-box;
17801
+ box-shadow: inset 0 -80px 0 -16px var(--cds-layer), inset 0 -160px 70px -65px var(--cds-ai-inner-shadow, rgba(69, 137, 255, 0.2)), 0 4px 10px 2px var(--cds-ai-drop-shadow, rgba(15, 98, 254, 0.32));
17823
17802
  }
17824
17803
 
17825
17804
  .cds--modal--slug .cds--slug {
@@ -17828,13 +17807,22 @@ optgroup.cds--select-optgroup:disabled,
17828
17807
  inset-inline-end: 0;
17829
17808
  }
17830
17809
 
17810
+ .cds--modal--slug .cds--modal-content.cds--modal-scroll-content {
17811
+ mask-image: linear-gradient(to bottom, var(--cds-layer) calc(100% - 80px), transparent calc(100% - 48px), transparent 100%), linear-gradient(to left, var(--cds-layer) 0, 16px, transparent 16px), linear-gradient(to right, var(--cds-layer) 0, 2px, transparent 2px), linear-gradient(to top, var(--cds-layer) 0, 2px, transparent 2px);
17812
+ }
17813
+
17831
17814
  .cds--modal-header > .cds--slug:has(+ .cds--modal-close-button),
17832
17815
  .cds--modal-header > .cds--modal-close-button ~ .cds--slug,
17833
17816
  .cds--modal--slug .cds--modal-container-body > .cds--slug {
17834
17817
  inset-inline-end: 3rem;
17835
17818
  }
17836
17819
 
17837
- /* stylelint-disable */
17820
+ .cds--modal--slug .cds--modal-content--overflow-indicator::before,
17821
+ .cds--modal--slug .cds--modal-content--overflow-indicator {
17822
+ display: none;
17823
+ }
17824
+
17825
+ /* stylelint-disable no-duplicate-selectors */
17838
17826
  @media screen and (-ms-high-contrast: active), (forced-colors: active) {
17839
17827
  .cds--modal-close__icon {
17840
17828
  fill: ButtonText;
@@ -17848,7 +17836,7 @@ optgroup.cds--select-optgroup:disabled,
17848
17836
  }
17849
17837
  }
17850
17838
 
17851
- /* stylelint-enable */
17839
+ /* stylelint-enable no-duplicate-selectors */
17852
17840
  .cds--inline-notification {
17853
17841
  position: relative;
17854
17842
  display: flex;
@@ -19677,7 +19665,7 @@ span.cds--pagination__text.cds--pagination__items-count {
19677
19665
  position: absolute;
19678
19666
  animation-duration: 1400ms;
19679
19667
  animation-iteration-count: infinite;
19680
- animation-name: progress-bar-indeterminate;
19668
+ animation-name: cds--progress-bar-indeterminate;
19681
19669
  animation-timing-function: linear;
19682
19670
  background-image: linear-gradient(90deg, var(--cds-interactive, #0f62fe) 12.5%, transparent 12.5%);
19683
19671
  background-position-x: 0%;
@@ -19687,7 +19675,7 @@ span.cds--pagination__text.cds--pagination__items-count {
19687
19675
  }
19688
19676
 
19689
19677
  [dir=rtl] .cds--progress-bar--indeterminate .cds--progress-bar__track::after {
19690
- animation-name: progress-bar-indeterminate-rtl;
19678
+ animation-name: cds--progress-bar-indeterminate-rtl;
19691
19679
  }
19692
19680
 
19693
19681
  .cds--progress-bar__helper-text {
@@ -19740,7 +19728,7 @@ span.cds--pagination__text.cds--pagination__items-count {
19740
19728
  margin-inline-end: 0;
19741
19729
  }
19742
19730
 
19743
- @keyframes progress-bar-indeterminate {
19731
+ @keyframes cds--progress-bar-indeterminate {
19744
19732
  0% {
19745
19733
  background-position-x: 25%;
19746
19734
  }
@@ -19748,7 +19736,7 @@ span.cds--pagination__text.cds--pagination__items-count {
19748
19736
  background-position-x: -105%;
19749
19737
  }
19750
19738
  }
19751
- @keyframes progress-bar-indeterminate-rtl {
19739
+ @keyframes cds--progress-bar-indeterminate-rtl {
19752
19740
  0% {
19753
19741
  background-position-x: -105%;
19754
19742
  }
@@ -20052,7 +20040,7 @@ span.cds--pagination__text.cds--pagination__items-count {
20052
20040
  }
20053
20041
  .cds--progress.cds--skeleton .cds--progress-label::before {
20054
20042
  position: absolute;
20055
- animation: 3000ms ease-in-out skeleton infinite;
20043
+ animation: 3000ms ease-in-out cds--skeleton infinite;
20056
20044
  background: var(--cds-skeleton-element, #c6c6c6);
20057
20045
  block-size: 100%;
20058
20046
  content: "";
@@ -20121,6 +20109,14 @@ span.cds--pagination__text.cds--pagination__items-count {
20121
20109
  inset-inline-start: 0;
20122
20110
  }
20123
20111
 
20112
+ @keyframes ai-skeleton-animation {
20113
+ 0% {
20114
+ transform: translateX(-100%);
20115
+ }
20116
+ 100% {
20117
+ transform: translateX(100%);
20118
+ }
20119
+ }
20124
20120
  .cds--icon--skeleton {
20125
20121
  position: relative;
20126
20122
  padding: 0;
@@ -20139,7 +20135,7 @@ span.cds--pagination__text.cds--pagination__items-count {
20139
20135
  }
20140
20136
  .cds--icon--skeleton::before {
20141
20137
  position: absolute;
20142
- animation: 3000ms ease-in-out skeleton infinite;
20138
+ animation: 3000ms ease-in-out cds--skeleton infinite;
20143
20139
  background: var(--cds-skeleton-element, #c6c6c6);
20144
20140
  block-size: 100%;
20145
20141
  content: "";
@@ -20169,7 +20165,7 @@ span.cds--pagination__text.cds--pagination__items-count {
20169
20165
  }
20170
20166
  .cds--skeleton__placeholder::before {
20171
20167
  position: absolute;
20172
- animation: 3000ms ease-in-out skeleton infinite;
20168
+ animation: 3000ms ease-in-out cds--skeleton infinite;
20173
20169
  background: var(--cds-skeleton-element, #c6c6c6);
20174
20170
  block-size: 100%;
20175
20171
  content: "";
@@ -20200,7 +20196,7 @@ span.cds--pagination__text.cds--pagination__items-count {
20200
20196
  }
20201
20197
  .cds--skeleton__text::before {
20202
20198
  position: absolute;
20203
- animation: 3000ms ease-in-out skeleton infinite;
20199
+ animation: 3000ms ease-in-out cds--skeleton infinite;
20204
20200
  background: var(--cds-skeleton-element, #c6c6c6);
20205
20201
  block-size: 100%;
20206
20202
  content: "";
@@ -20217,6 +20213,37 @@ span.cds--pagination__text.cds--pagination__items-count {
20217
20213
  block-size: 1.5rem;
20218
20214
  }
20219
20215
 
20216
+ .cds--skeleton__text--ai,
20217
+ .cds--skeleton__placeholder--ai,
20218
+ .cds--skeleton__icon--ai {
20219
+ overflow: hidden;
20220
+ background: var(--cds-ai-skeleton-background, #b8d3ff);
20221
+ }
20222
+
20223
+ .cds--skeleton__text--ai::before,
20224
+ .cds--skeleton__placeholder--ai::before,
20225
+ .cds--skeleton__icon--ai::before {
20226
+ animation: 1250ms ease-in-out ai-skeleton-animation infinite;
20227
+ background: linear-gradient(to right, rgba(0, 17, 65, 0) 0%, rgba(0, 17, 65, 0.5) 50%, rgba(0, 17, 65, 0) 100%);
20228
+ }
20229
+
20230
+ .cds--skeleton__placeholder--ai::before,
20231
+ .cds--skeleton__icon--ai::before {
20232
+ inline-size: 200%;
20233
+ }
20234
+
20235
+ .cds--skeleton__placeholder--ai {
20236
+ border-radius: 0.5rem;
20237
+ }
20238
+
20239
+ .cds--skeleton__text--ai {
20240
+ border-radius: 1rem;
20241
+ }
20242
+
20243
+ .cds--skeleton__icon--ai {
20244
+ border-radius: 0.125rem;
20245
+ }
20246
+
20220
20247
  .cds--slider-container {
20221
20248
  position: relative;
20222
20249
  display: flex;
@@ -20588,7 +20615,7 @@ span.cds--pagination__text.cds--pagination__items-count {
20588
20615
  }
20589
20616
  .cds--slider-container.cds--skeleton .cds--slider__range-label::before {
20590
20617
  position: absolute;
20591
- animation: 3000ms ease-in-out skeleton infinite;
20618
+ animation: 3000ms ease-in-out cds--skeleton infinite;
20592
20619
  background: var(--cds-skeleton-element, #c6c6c6);
20593
20620
  block-size: 100%;
20594
20621
  content: "";
@@ -21002,7 +21029,7 @@ span.cds--pagination__text.cds--pagination__items-count {
21002
21029
  }
21003
21030
 
21004
21031
  .cds--slug.cds--slug--enabled .cds--slug-content {
21005
- background: linear-gradient(to top, var(--cds-ai-aura-start, rgba(69, 137, 255, 0.1)) 0%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%) padding-box, linear-gradient(to top, var(--cds-background, var(--cds-background, #ffffff)), var(--cds-background, var(--cds-background, #ffffff))) padding-box, linear-gradient(to bottom, var(--cds-ai-border-start, #78a9ff), var(--cds-ai-border-end, #d0e2ff)) border-box, linear-gradient(to top, var(--cds-background, var(--cds-background, #ffffff)), var(--cds-background, var(--cds-background, #ffffff))) border-box;
21032
+ background: linear-gradient(to top, var(--cds-background, var(--cds-background, #ffffff)) 0%, var(--cds-ai-aura-start, rgba(69, 137, 255, 0.1)) 0%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%) padding-box, linear-gradient(to top, var(--cds-background, var(--cds-background, #ffffff)), var(--cds-background, var(--cds-background, #ffffff))) padding-box, linear-gradient(to bottom, var(--cds-ai-border-start, #78a9ff), var(--cds-ai-border-end, #d0e2ff)) border-box, linear-gradient(to top, var(--cds-background, var(--cds-background, #ffffff)), var(--cds-background, var(--cds-background, #ffffff))) border-box;
21006
21033
  border: 1px solid transparent;
21007
21034
  border-radius: 0.5rem;
21008
21035
  box-shadow: inset 0 -80px 70px -65px var(--cds-ai-inner-shadow, rgba(69, 137, 255, 0.2)), -40px 30px 100px -25px var(--cds-slug-callout-shadow-outer-01, rgba(0, 67, 206, 0.25)), -60px 80px 60px -45px var(--cds-slug-callout-shadow-outer-02, rgba(0, 0, 0, 0.1));
@@ -21474,7 +21501,7 @@ span.cds--pagination__text.cds--pagination__items-count {
21474
21501
  }
21475
21502
  .cds--structured-list.cds--skeleton span::before {
21476
21503
  position: absolute;
21477
- animation: 3000ms ease-in-out skeleton infinite;
21504
+ animation: 3000ms ease-in-out cds--skeleton infinite;
21478
21505
  background: var(--cds-skeleton-element, #c6c6c6);
21479
21506
  block-size: 100%;
21480
21507
  content: "";
@@ -21984,7 +22011,7 @@ span.cds--pagination__text.cds--pagination__items-count {
21984
22011
  }
21985
22012
  .cds--tabs.cds--skeleton .cds--tabs__nav-link span::before {
21986
22013
  position: absolute;
21987
- animation: 3000ms ease-in-out skeleton infinite;
22014
+ animation: 3000ms ease-in-out cds--skeleton infinite;
21988
22015
  background: var(--cds-skeleton-element, #c6c6c6);
21989
22016
  block-size: 100%;
21990
22017
  content: "";
@@ -22286,10 +22313,6 @@ span.cds--pagination__text.cds--pagination__items-count {
22286
22313
  }
22287
22314
  }
22288
22315
 
22289
- .cds--tile-content__above-the-fold {
22290
- display: block;
22291
- }
22292
-
22293
22316
  .cds--tile-content__below-the-fold {
22294
22317
  display: block;
22295
22318
  opacity: 0;
@@ -22397,13 +22420,13 @@ span.cds--pagination__text.cds--pagination__items-count {
22397
22420
  }
22398
22421
 
22399
22422
  .cds--tile--slug.cds--tile {
22400
- background: linear-gradient(to top, var(--cds-ai-aura-start, rgba(69, 137, 255, 0.1)) 0%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%) padding-box, linear-gradient(to top, var(--cds-layer, var(--cds-background, #ffffff)), var(--cds-layer, var(--cds-background, #ffffff))) padding-box, linear-gradient(to bottom, var(--cds-ai-border-start, #78a9ff), var(--cds-ai-border-end, #d0e2ff)) border-box, linear-gradient(to top, var(--cds-layer, var(--cds-background, #ffffff)), var(--cds-layer, var(--cds-background, #ffffff))) border-box;
22423
+ background: linear-gradient(to top, var(--cds-layer, var(--cds-background, #ffffff)) 0%, var(--cds-ai-aura-start, rgba(69, 137, 255, 0.1)) 0%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%) padding-box, linear-gradient(to top, var(--cds-layer, var(--cds-background, #ffffff)), var(--cds-layer, var(--cds-background, #ffffff))) padding-box, linear-gradient(to bottom, var(--cds-ai-border-start, #78a9ff), var(--cds-ai-border-end, #d0e2ff)) border-box, linear-gradient(to top, var(--cds-layer, var(--cds-background, #ffffff)), var(--cds-layer, var(--cds-background, #ffffff))) border-box;
22401
22424
  border: 1px solid transparent;
22402
22425
  box-shadow: inset 0 -80px 70px -65px var(--cds-ai-inner-shadow, rgba(69, 137, 255, 0.2)), 0 4px 10px 2px var(--cds-ai-drop-shadow, rgba(15, 98, 254, 0.32));
22403
22426
  }
22404
22427
 
22405
22428
  .cds--tile--slug.cds--tile--expandable:hover {
22406
- background: linear-gradient(to top, var(--cds-ai-aura-start, rgba(69, 137, 255, 0.1)) 0%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%) padding-box, linear-gradient(to top, var(--cds-layer, var(--cds-background, #ffffff)), var(--cds-layer, var(--cds-background, #ffffff))) padding-box, linear-gradient(to bottom, var(--cds-ai-border-start, #78a9ff), var(--cds-ai-border-end, #d0e2ff)) border-box, linear-gradient(to top, var(--cds-layer, var(--cds-background, #ffffff)), var(--cds-layer, var(--cds-background, #ffffff))) border-box;
22429
+ background: linear-gradient(to top, var(--cds-layer, var(--cds-background, #ffffff)) 0%, var(--cds-ai-aura-start, rgba(69, 137, 255, 0.1)) 0%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%) padding-box, linear-gradient(to top, var(--cds-layer, var(--cds-background, #ffffff)), var(--cds-layer, var(--cds-background, #ffffff))) padding-box, linear-gradient(to bottom, var(--cds-ai-border-start, #78a9ff), var(--cds-ai-border-end, #d0e2ff)) border-box, linear-gradient(to top, var(--cds-layer, var(--cds-background, #ffffff)), var(--cds-layer, var(--cds-background, #ffffff))) border-box;
22407
22430
  }
22408
22431
 
22409
22432
  .cds--tile--slug.cds--tile--selectable::before,
@@ -22779,7 +22802,7 @@ span.cds--pagination__text.cds--pagination__items-count {
22779
22802
  }
22780
22803
  .cds--toggle--skeleton .cds--toggle__skeleton-circle::before {
22781
22804
  position: absolute;
22782
- animation: 3000ms ease-in-out skeleton infinite;
22805
+ animation: 3000ms ease-in-out cds--skeleton infinite;
22783
22806
  background: var(--cds-skeleton-element, #c6c6c6);
22784
22807
  block-size: 100%;
22785
22808
  content: "";
@@ -22810,7 +22833,7 @@ span.cds--pagination__text.cds--pagination__items-count {
22810
22833
  }
22811
22834
  .cds--toggle--skeleton .cds--toggle__skeleton-rectangle::before {
22812
22835
  position: absolute;
22813
- animation: 3000ms ease-in-out skeleton infinite;
22836
+ animation: 3000ms ease-in-out cds--skeleton infinite;
22814
22837
  background: var(--cds-skeleton-element, #c6c6c6);
22815
22838
  block-size: 100%;
22816
22839
  content: "";
@@ -26328,7 +26351,8 @@ a.cds--side-nav__link--current::before {
26328
26351
  padding-top: 0.5rem;
26329
26352
  }
26330
26353
  .c4p--side-panel.c4p--side-panel--has-slug .c4p--side-panel--scrolls {
26331
- background: linear-gradient(to top, var(--cds-ai-aura-start, rgba(69, 137, 255, 0.1)) 0%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%) padding-box, linear-gradient(to top, var(--cds-layer, var(--cds-background, #ffffff)), var(--cds-layer, var(--cds-background, #ffffff))) padding-box, linear-gradient(to bottom, var(--cds-ai-border-start, #78a9ff), var(--cds-ai-border-end, #d0e2ff)) border-box, linear-gradient(to top, var(--cds-layer, var(--cds-background, #ffffff)), var(--cds-layer, var(--cds-background, #ffffff))) border-box;
26354
+ background: linear-gradient(to top, var(--cds-layer, var(--cds-background, #ffffff)) 0%, var(--cds-ai-aura-start, rgba(69, 137, 255, 0.1)) 0%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%) padding-box, linear-gradient(to top, var(--cds-layer, var(--cds-background, #ffffff)), var(--cds-layer, var(--cds-background, #ffffff))) padding-box, linear-gradient(to bottom, var(--cds-ai-border-start, #78a9ff), var(--cds-ai-border-end, #d0e2ff)) border-box, linear-gradient(to top, var(--cds-layer, var(--cds-background, #ffffff)), var(--cds-layer, var(--cds-background, #ffffff))) border-box;
26355
+ box-shadow: inset 0 -80px 70px -65px var(--cds-ai-inner-shadow, rgba(69, 137, 255, 0.2)), 0 4px 10px 2px var(--cds-ai-drop-shadow, rgba(15, 98, 254, 0.32));
26332
26356
  }
26333
26357
  .c4p--side-panel .c4p--side-panel__inner-content.c4p--side-panel--scrolls {
26334
26358
  padding-top: 1rem;
@@ -26455,6 +26479,11 @@ a.cds--side-nav__link--current::before {
26455
26479
  inset: 0;
26456
26480
  }
26457
26481
 
26482
+ .c4p--side-panel--has-slug + .c4p--side-panel__overlay {
26483
+ /* stylelint-disable-next-line carbon/theme-token-use */
26484
+ background-color: var(--cds-ai-overlay, rgba(0, 17, 65, 0.5));
26485
+ }
26486
+
26458
26487
  .c4p--create-side-panel.c4p--side-panel .c4p--create-side-panel__content-text {
26459
26488
  padding-right: calc(20% - 1rem);
26460
26489
  }
@@ -26535,6 +26564,7 @@ a.cds--side-nav__link--current::before {
26535
26564
  }
26536
26565
  .c4p--tearsheet.c4p--tearsheet.c4p--tearsheet.c4p--tearsheet.c4p--tearsheet--has-slug .c4p--tearsheet__container {
26537
26566
  border: 1px solid transparent;
26567
+ border-bottom: 0;
26538
26568
  /* override carbon ai removing background gradient */
26539
26569
  background: linear-gradient(to top, var(--cds-layer), var(--cds-layer)) padding-box, linear-gradient(to bottom, var(--cds-ai-border-start, #78a9ff), var(--cds-ai-border-end, #d0e2ff)) border-box, linear-gradient(to top, var(--cds-layer), var(--cds-layer)) border-box;
26540
26570
  box-shadow: 0 4px 10px 2px var(--cds-ai-drop-shadow, rgba(15, 98, 254, 0.32));
@@ -26694,7 +26724,8 @@ a.cds--side-nav__link--current::before {
26694
26724
  flex-grow: 1;
26695
26725
  }
26696
26726
  .c4p--tearsheet.c4p--tearsheet--has-slug .c4p--tearsheet__main {
26697
- background: linear-gradient(to top, var(--cds-ai-aura-start, rgba(69, 137, 255, 0.1)) 0%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%) padding-box, linear-gradient(to top, var(--cds-background, var(--cds-background, #ffffff)), var(--cds-background, var(--cds-background, #ffffff))) padding-box, linear-gradient(to bottom, var(--cds-ai-border-start, #78a9ff), var(--cds-ai-border-end, #d0e2ff)) border-box, linear-gradient(to top, var(--cds-background, var(--cds-background, #ffffff)), var(--cds-background, var(--cds-background, #ffffff))) border-box;
26727
+ background: linear-gradient(to top, var(--cds-background, var(--cds-background, #ffffff)) 0%, var(--cds-ai-aura-start, rgba(69, 137, 255, 0.1)) 0%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%) padding-box, linear-gradient(to top, var(--cds-background, var(--cds-background, #ffffff)), var(--cds-background, var(--cds-background, #ffffff))) padding-box, linear-gradient(to bottom, var(--cds-ai-border-start, #78a9ff), var(--cds-ai-border-end, #d0e2ff)) border-box, linear-gradient(to top, var(--cds-background, var(--cds-background, #ffffff)), var(--cds-background, var(--cds-background, #ffffff))) border-box;
26728
+ box-shadow: inset 0 -80px 70px -65px var(--cds-ai-inner-shadow, rgba(69, 137, 255, 0.2));
26698
26729
  }
26699
26730
  .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__content .cds--pagination,
26700
26731
  .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__content .cds--pagination__control-buttons,
@@ -27166,7 +27197,7 @@ a.cds--side-nav__link--current::before {
27166
27197
  }
27167
27198
 
27168
27199
  .c4p--card--has-slug {
27169
- background: linear-gradient(to top, var(--cds-ai-aura-start, rgba(69, 137, 255, 0.1)) 0%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%) padding-box, linear-gradient(to top, var(--cds-layer, var(--cds-background, #ffffff)), var(--cds-layer, var(--cds-background, #ffffff))) padding-box, linear-gradient(to bottom, var(--cds-ai-border-start, #78a9ff), var(--cds-ai-border-end, #d0e2ff)) border-box, linear-gradient(to top, var(--cds-layer, var(--cds-background, #ffffff)), var(--cds-layer, var(--cds-background, #ffffff))) border-box;
27200
+ background: linear-gradient(to top, var(--cds-layer, var(--cds-background, #ffffff)) 0%, var(--cds-ai-aura-start, rgba(69, 137, 255, 0.1)) 0%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%) padding-box, linear-gradient(to top, var(--cds-layer, var(--cds-background, #ffffff)), var(--cds-layer, var(--cds-background, #ffffff))) padding-box, linear-gradient(to bottom, var(--cds-ai-border-start, #78a9ff), var(--cds-ai-border-end, #d0e2ff)) border-box, linear-gradient(to top, var(--cds-layer, var(--cds-background, #ffffff)), var(--cds-layer, var(--cds-background, #ffffff))) border-box;
27170
27201
  border: 1px solid transparent;
27171
27202
  box-shadow: inset 0 -80px 70px -65px var(--cds-ai-inner-shadow, rgba(69, 137, 255, 0.2)), 0 4px 10px 2px var(--cds-ai-drop-shadow, rgba(15, 98, 254, 0.32));
27172
27203
  }
@@ -27808,6 +27839,9 @@ button.c4p--add-select__global-filter-toggle--open {
27808
27839
  --cds-ai-gradient-start-01: rgba(208, 226, 255, 0.2);
27809
27840
  --cds-ai-gradient-start-02: transparent;
27810
27841
  --cds-ai-inner-shadow: rgba(69, 137, 255, 0.2);
27842
+ --cds-ai-overlay: rgba(0, 17, 65, 0.5);
27843
+ --cds-ai-skeleton-background: #0053ff;
27844
+ --cds-ai-skeleton-element-background: #001141;
27811
27845
  --cds-background: #161616;
27812
27846
  --cds-background-active: rgba(141, 141, 141, 0.4);
27813
27847
  --cds-background-brand: #0f62fe;
@@ -31535,6 +31569,9 @@ button.c4p--add-select__global-filter-toggle--open {
31535
31569
  --cds-ai-gradient-start-01: rgba(208, 226, 255, 0.2);
31536
31570
  --cds-ai-gradient-start-02: transparent;
31537
31571
  --cds-ai-inner-shadow: rgba(69, 137, 255, 0.2);
31572
+ --cds-ai-overlay: rgba(0, 17, 65, 0.5);
31573
+ --cds-ai-skeleton-background: #0053ff;
31574
+ --cds-ai-skeleton-element-background: #001141;
31538
31575
  --cds-background: #262626;
31539
31576
  --cds-background-active: rgba(141, 141, 141, 0.4);
31540
31577
  --cds-background-brand: #0f62fe;
@@ -32030,6 +32067,9 @@ button.c4p--add-select__global-filter-toggle--open {
32030
32067
  --cds-ai-gradient-start-01: rgba(208, 226, 255, 0.2);
32031
32068
  --cds-ai-gradient-start-02: transparent;
32032
32069
  --cds-ai-inner-shadow: rgba(69, 137, 255, 0.2);
32070
+ --cds-ai-overlay: rgba(0, 17, 65, 0.5);
32071
+ --cds-ai-skeleton-background: #0053ff;
32072
+ --cds-ai-skeleton-element-background: #001141;
32033
32073
  --cds-background: #161616;
32034
32074
  --cds-background-active: rgba(141, 141, 141, 0.4);
32035
32075
  --cds-background-brand: #0f62fe;
@@ -33457,16 +33497,41 @@ button.c4p--add-select__global-filter-toggle--open {
33457
33497
  }
33458
33498
 
33459
33499
  .c4p--datagrid th.c4p--datagrid__with-slug {
33460
- background-image: linear-gradient(180deg, var(--cds-ai-inner-shadow, rgba(69, 137, 255, 0.2)) 0%, 15%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 100%, transparent 100%);
33461
- border-block-end-color: var(--cds-ai-border-strong, #4589ff);
33500
+ /* stylelint-disable-next-line carbon/theme-token-use */
33501
+ box-shadow: inset 0 1px var(--cds-ai-border-strong, #4589ff);
33462
33502
  }
33463
33503
 
33464
- .c4p--datagrid .cds--data-table tbody tr:has(> .c4p--datagrid__table-row-ai-enabled) {
33465
- background-image: linear-gradient(90deg, var(--cds-ai-inner-shadow, rgba(69, 137, 255, 0.2)) 0%, 15%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%, transparent 100%);
33466
- border-block-end-color: var(--cds-ai-border-strong, #4589ff);
33504
+ .c4p--datagrid th.c4p--datagrid__with-slug,
33505
+ .c4p--datagrid td.c4p--datagrid__slug--cell {
33506
+ background: linear-gradient(to right, var(--cds-ai-aura-start-table, rgba(69, 137, 255, 0.15)) 0%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%, transparent 50%);
33507
+ }
33508
+
33509
+ .c4p--datagrid .cds--data-table tbody tr.c4p--datagrid__slug--row,
33510
+ .c4p--datagrid .cds--data-table tbody tr.c4p--datagrid__slug--row + .c4p--datagrid__expanded-row {
33511
+ background: linear-gradient(to right, var(--cds-ai-aura-start-table, rgba(69, 137, 255, 0.15)) 0%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%, transparent 50%);
33467
33512
  background-attachment: fixed;
33468
33513
  }
33469
33514
 
33515
+ .c4p--datagrid .cds--data-table tbody tr.c4p--datagrid__slug--row {
33516
+ /* stylelint-disable-next-line carbon/theme-token-use */
33517
+ box-shadow: inset 1px 0 var(--cds-ai-border-strong, #4589ff);
33518
+ }
33519
+
33520
+ .c4p--datagrid .cds--data-table tbody tr.c4p--datagrid__slug--row:hover,
33521
+ .c4p--datagrid .cds--data-table tbody tr.c4p--datagrid__slug--row.cds--data-table--selected:hover,
33522
+ .c4p--datagrid .cds--data-table tbody tr.c4p--datagrid__slug--row.c4p--datagrid__carbon-row-expanded:hover + .c4p--datagrid__expanded-row,
33523
+ .c4p--datagrid .cds--data-table tbody tr.c4p--datagrid__expandable-row--hover.c4p--datagrid__slug--row {
33524
+ background: linear-gradient(to right, var(--cds-ai-aura-hover-start, rgba(69, 137, 255, 0.4)) 0%, 15%, var(--cds-ai-aura-hover-end, rgba(255, 255, 255, 0)) 50%), var(--cds-ai-aura-hover-background, #edf5ff);
33525
+ }
33526
+
33527
+ .c4p--datagrid .cds--data-table tbody tr.c4p--datagrid__expandable-row--hover.c4p--datagrid__slug--row td {
33528
+ background-color: transparent;
33529
+ }
33530
+
33531
+ .c4p--datagrid .cds--data-table tbody tr.c4p--datagrid__slug--row.cds--data-table--selected {
33532
+ background: linear-gradient(to right, var(--cds-ai-inner-shadow, rgba(69, 137, 255, 0.2)) 0%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%, transparent 50%), var(--cds-layer-selected);
33533
+ }
33534
+
33470
33535
  .c4p--datagrid th.c4p--datagrid__with-slug .cds--slug {
33471
33536
  margin-left: 0.5rem;
33472
33537
  }
@@ -34006,6 +34071,9 @@ button.c4p--add-select__global-filter-toggle--open {
34006
34071
  display: flex;
34007
34072
  align-items: center;
34008
34073
  }
34074
+ .c4p--datagrid .c4p--datagrid__table-row-ai-enabled.c4p--datagrid__slug--expanded {
34075
+ border: none;
34076
+ }
34009
34077
 
34010
34078
  .c4p--datagrid .c4p--datagrid__table-row-ai-spacer,
34011
34079
  .c4p--datagrid .c4p--datagrid__table-row-ai-enabled {
@@ -36702,7 +36770,7 @@ th.c4p--datagrid__select-all-toggle-on.button {
36702
36770
  white-space: nowrap;
36703
36771
  }
36704
36772
 
36705
- @keyframes hide-feedback {
36773
+ @keyframes cds--hide-feedback {
36706
36774
  0% {
36707
36775
  opacity: 1;
36708
36776
  visibility: inherit;
@@ -36712,7 +36780,7 @@ th.c4p--datagrid__select-all-toggle-on.button {
36712
36780
  visibility: hidden;
36713
36781
  }
36714
36782
  }
36715
- @keyframes show-feedback {
36783
+ @keyframes cds--show-feedback {
36716
36784
  0% {
36717
36785
  opacity: 0;
36718
36786
  visibility: hidden;
@@ -36722,7 +36790,7 @@ th.c4p--datagrid__select-all-toggle-on.button {
36722
36790
  visibility: inherit;
36723
36791
  }
36724
36792
  }
36725
- @keyframes skeleton {
36793
+ @keyframes cds--skeleton {
36726
36794
  0% {
36727
36795
  opacity: 0.3;
36728
36796
  transform: scaleX(0);
@@ -37611,6 +37679,7 @@ a.cds--side-nav__link--current::before {
37611
37679
 
37612
37680
  .c4p--tearsheet.c4p--tearsheet.c4p--tearsheet.c4p--tearsheet.c4p--tearsheet--has-slug .c4p--tearsheet__container {
37613
37681
  border: 1px solid transparent;
37682
+ border-bottom: 0;
37614
37683
  /* override carbon ai removing background gradient */
37615
37684
  background: linear-gradient(to top, var(--cds-layer), var(--cds-layer)) padding-box, linear-gradient(to bottom, var(--cds-ai-border-start, #78a9ff), var(--cds-ai-border-end, #d0e2ff)) border-box, linear-gradient(to top, var(--cds-layer), var(--cds-layer)) border-box;
37616
37685
  box-shadow: 0 4px 10px 2px var(--cds-ai-drop-shadow, rgba(15, 98, 254, 0.32));
@@ -37807,7 +37876,8 @@ a.cds--side-nav__link--current::before {
37807
37876
  }
37808
37877
 
37809
37878
  .c4p--tearsheet.c4p--tearsheet--has-slug .c4p--tearsheet__main {
37810
- background: linear-gradient(to top, var(--cds-ai-aura-start, rgba(69, 137, 255, 0.1)) 0%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%) padding-box, linear-gradient(to top, var(--cds-background, var(--cds-background, #ffffff)), var(--cds-background, var(--cds-background, #ffffff))) padding-box, linear-gradient(to bottom, var(--cds-ai-border-start, #78a9ff), var(--cds-ai-border-end, #d0e2ff)) border-box, linear-gradient(to top, var(--cds-background, var(--cds-background, #ffffff)), var(--cds-background, var(--cds-background, #ffffff))) border-box;
37879
+ background: linear-gradient(to top, var(--cds-background, var(--cds-background, #ffffff)) 0%, var(--cds-ai-aura-start, rgba(69, 137, 255, 0.1)) 0%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%) padding-box, linear-gradient(to top, var(--cds-background, var(--cds-background, #ffffff)), var(--cds-background, var(--cds-background, #ffffff))) padding-box, linear-gradient(to bottom, var(--cds-ai-border-start, #78a9ff), var(--cds-ai-border-end, #d0e2ff)) border-box, linear-gradient(to top, var(--cds-background, var(--cds-background, #ffffff)), var(--cds-background, var(--cds-background, #ffffff))) border-box;
37880
+ box-shadow: inset 0 -80px 70px -65px var(--cds-ai-inner-shadow, rgba(69, 137, 255, 0.2));
37811
37881
  }
37812
37882
 
37813
37883
  .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__content .cds--pagination,
@@ -38377,6 +38447,9 @@ a.cds--side-nav__link--current::before {
38377
38447
  --cds-ai-gradient-start-01: rgba(208, 226, 255, 0.2);
38378
38448
  --cds-ai-gradient-start-02: transparent;
38379
38449
  --cds-ai-inner-shadow: rgba(69, 137, 255, 0.2);
38450
+ --cds-ai-overlay: rgba(0, 17, 65, 0.5);
38451
+ --cds-ai-skeleton-background: #0053ff;
38452
+ --cds-ai-skeleton-element-background: #001141;
38380
38453
  --cds-background: #161616;
38381
38454
  --cds-background-active: rgba(141, 141, 141, 0.4);
38382
38455
  --cds-background-brand: #0f62fe;
@@ -39246,6 +39319,9 @@ a.cds--side-nav__link--current::before {
39246
39319
  --cds-ai-gradient-start-01: rgba(208, 226, 255, 0.2);
39247
39320
  --cds-ai-gradient-start-02: transparent;
39248
39321
  --cds-ai-inner-shadow: rgba(69, 137, 255, 0.2);
39322
+ --cds-ai-overlay: rgba(0, 17, 65, 0.5);
39323
+ --cds-ai-skeleton-background: #0053ff;
39324
+ --cds-ai-skeleton-element-background: #001141;
39249
39325
  --cds-background: #161616;
39250
39326
  --cds-background-active: rgba(141, 141, 141, 0.4);
39251
39327
  --cds-background-brand: #0f62fe;