@carbon/ibm-products 1.61.1 → 1.62.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (144) hide show
  1. package/css/index-full-carbon.css +172 -70
  2. package/css/index-full-carbon.css.map +1 -1
  3. package/css/index-full-carbon.min.css +3 -3
  4. package/css/index-full-carbon.min.css.map +1 -1
  5. package/css/index-without-carbon-released-only.css +1768 -0
  6. package/css/index-without-carbon-released-only.css.map +1 -1
  7. package/css/index-without-carbon-released-only.min.css +3 -1
  8. package/css/index-without-carbon-released-only.min.css.map +1 -1
  9. package/css/index-without-carbon.css +172 -70
  10. package/css/index-without-carbon.css.map +1 -1
  11. package/css/index-without-carbon.min.css +3 -3
  12. package/css/index-without-carbon.min.css.map +1 -1
  13. package/css/index.css +172 -70
  14. package/css/index.css.map +1 -1
  15. package/css/index.min.css +3 -3
  16. package/css/index.min.css.map +1 -1
  17. package/es/components/Carousel/Carousel.js +194 -119
  18. package/es/components/Carousel/CarouselItem.js +8 -21
  19. package/es/components/Coachmark/Coachmark.js +17 -5
  20. package/es/components/Coachmark/CoachmarkDragbar.js +12 -5
  21. package/es/components/Coachmark/CoachmarkHeader.js +2 -1
  22. package/es/components/Coachmark/CoachmarkOverlay.js +105 -9
  23. package/es/components/CoachmarkBeacon/CoachmarkBeacon.js +5 -2
  24. package/es/components/CoachmarkFixed/CoachmarkFixed.js +26 -6
  25. package/es/components/CoachmarkOverlayElements/CoachmarkOverlayElements.js +34 -10
  26. package/es/components/CoachmarkStack/CoachmarkStack.js +19 -4
  27. package/es/components/CoachmarkStack/CoachmarkStackHome.js +45 -11
  28. package/es/components/Datagrid/Datagrid/DatagridContent.js +12 -9
  29. package/es/components/Datagrid/Datagrid/DatagridExpandedRow.js +6 -4
  30. package/es/components/Datagrid/Datagrid/DatagridHeaderRow.js +42 -25
  31. package/es/components/Datagrid/Datagrid/DatagridRefBody.js +4 -1
  32. package/es/components/Datagrid/Datagrid/DatagridRow.js +23 -11
  33. package/es/components/Datagrid/Datagrid/DatagridSelectAll.js +31 -12
  34. package/es/components/Datagrid/Datagrid/DatagridSimpleBody.js +4 -1
  35. package/es/components/Datagrid/Datagrid/DatagridToolbar.js +43 -23
  36. package/es/components/Datagrid/Datagrid/DatagridVirtualBody.js +18 -18
  37. package/es/components/Datagrid/Datagrid/addons/stateReducer.js +93 -14
  38. package/es/components/Datagrid/Datagrid.stories/StickyActionsColumnStory.js +1 -1
  39. package/es/components/Datagrid/useActionsColumn.js +9 -9
  40. package/es/components/Datagrid/useDatagrid.js +13 -1
  41. package/es/components/Datagrid/useExpandedRow.js +3 -6
  42. package/es/components/Datagrid/useFlexResize.js +19 -9
  43. package/es/components/Datagrid/useFocusRowExpander.js +40 -0
  44. package/es/components/Datagrid/useInfiniteScroll.js +10 -9
  45. package/es/components/Datagrid/useNestedRowExpander.js +9 -0
  46. package/es/components/Datagrid/useNestedRows.js +0 -4
  47. package/es/components/Datagrid/useOnRowClick.js +6 -7
  48. package/es/components/Datagrid/useParentDimensions.js +6 -6
  49. package/es/components/Datagrid/useResizeTable.js +7 -7
  50. package/es/components/Datagrid/useRowExpander.js +9 -0
  51. package/es/components/Datagrid/useSelectAllToggle.js +2 -2
  52. package/es/components/Datagrid/useSelectRows.js +52 -30
  53. package/es/components/Datagrid/useSkeletonRows.js +6 -6
  54. package/es/components/Datagrid/useSortableColumns.js +4 -5
  55. package/es/components/Datagrid/useStickyColumn.js +13 -6
  56. package/es/components/EmptyStates/ErrorEmptyState/ErrorEmptyState.js +1 -0
  57. package/es/components/EmptyStates/NoDataEmptyState/NoDataEmptyState.js +1 -0
  58. package/es/components/EmptyStates/NoTagsEmptyState/NoTagsEmptyState.js +1 -0
  59. package/es/components/EmptyStates/NotFoundEmptyState/NotFoundEmptyState.js +1 -0
  60. package/es/components/EmptyStates/NotificationsEmptyState/NotificationsEmptyState.js +1 -0
  61. package/es/components/EmptyStates/UnauthorizedEmptyState/UnauthorizedEmptyState.js +1 -0
  62. package/es/components/EmptyStates/assets/ErrorIllustration.js +6 -4
  63. package/es/components/EmptyStates/assets/NoDataIllustration.js +6 -4
  64. package/es/components/EmptyStates/assets/NoTagsIllustration.js +6 -4
  65. package/es/components/EmptyStates/assets/NotFoundIllustration.js +6 -4
  66. package/es/components/EmptyStates/assets/NotificationsIllustration.js +6 -4
  67. package/es/components/EmptyStates/assets/UnauthorizedIllustration.js +6 -4
  68. package/es/components/Guidebanner/Guidebanner.js +9 -12
  69. package/es/global/js/hooks/index.js +3 -2
  70. package/es/global/js/hooks/usePrefix.js +11 -0
  71. package/es/global/js/package-settings.js +1 -4
  72. package/lib/components/Carousel/Carousel.js +190 -114
  73. package/lib/components/Carousel/CarouselItem.js +9 -25
  74. package/lib/components/Coachmark/Coachmark.js +16 -4
  75. package/lib/components/Coachmark/CoachmarkDragbar.js +12 -5
  76. package/lib/components/Coachmark/CoachmarkHeader.js +2 -1
  77. package/lib/components/Coachmark/CoachmarkOverlay.js +105 -8
  78. package/lib/components/CoachmarkBeacon/CoachmarkBeacon.js +5 -2
  79. package/lib/components/CoachmarkFixed/CoachmarkFixed.js +25 -5
  80. package/lib/components/CoachmarkOverlayElements/CoachmarkOverlayElements.js +34 -10
  81. package/lib/components/CoachmarkStack/CoachmarkStack.js +18 -3
  82. package/lib/components/CoachmarkStack/CoachmarkStackHome.js +44 -10
  83. package/lib/components/Datagrid/Datagrid/DatagridContent.js +12 -9
  84. package/lib/components/Datagrid/Datagrid/DatagridExpandedRow.js +6 -4
  85. package/lib/components/Datagrid/Datagrid/DatagridHeaderRow.js +42 -32
  86. package/lib/components/Datagrid/Datagrid/DatagridRefBody.js +4 -1
  87. package/lib/components/Datagrid/Datagrid/DatagridRow.js +17 -4
  88. package/lib/components/Datagrid/Datagrid/DatagridSelectAll.js +25 -5
  89. package/lib/components/Datagrid/Datagrid/DatagridSimpleBody.js +4 -1
  90. package/lib/components/Datagrid/Datagrid/DatagridToolbar.js +43 -23
  91. package/lib/components/Datagrid/Datagrid/DatagridVirtualBody.js +12 -12
  92. package/lib/components/Datagrid/Datagrid/addons/stateReducer.js +96 -15
  93. package/lib/components/Datagrid/Datagrid.stories/StickyActionsColumnStory.js +1 -1
  94. package/lib/components/Datagrid/useActionsColumn.js +9 -12
  95. package/lib/components/Datagrid/useDatagrid.js +13 -1
  96. package/lib/components/Datagrid/useExpandedRow.js +2 -5
  97. package/lib/components/Datagrid/useFlexResize.js +19 -9
  98. package/lib/components/Datagrid/useFocusRowExpander.js +46 -0
  99. package/lib/components/Datagrid/useInfiniteScroll.js +9 -9
  100. package/lib/components/Datagrid/useNestedRowExpander.js +9 -0
  101. package/lib/components/Datagrid/useNestedRows.js +0 -4
  102. package/lib/components/Datagrid/useOnRowClick.js +6 -7
  103. package/lib/components/Datagrid/useParentDimensions.js +5 -6
  104. package/lib/components/Datagrid/useResizeTable.js +6 -7
  105. package/lib/components/Datagrid/useRowExpander.js +9 -0
  106. package/lib/components/Datagrid/useSelectAllToggle.js +2 -2
  107. package/lib/components/Datagrid/useSelectRows.js +46 -23
  108. package/lib/components/Datagrid/useSkeletonRows.js +6 -6
  109. package/lib/components/Datagrid/useSortableColumns.js +4 -5
  110. package/lib/components/Datagrid/useStickyColumn.js +8 -0
  111. package/lib/components/EmptyStates/ErrorEmptyState/ErrorEmptyState.js +1 -0
  112. package/lib/components/EmptyStates/NoDataEmptyState/NoDataEmptyState.js +1 -0
  113. package/lib/components/EmptyStates/NoTagsEmptyState/NoTagsEmptyState.js +1 -0
  114. package/lib/components/EmptyStates/NotFoundEmptyState/NotFoundEmptyState.js +1 -0
  115. package/lib/components/EmptyStates/NotificationsEmptyState/NotificationsEmptyState.js +1 -0
  116. package/lib/components/EmptyStates/UnauthorizedEmptyState/UnauthorizedEmptyState.js +1 -0
  117. package/lib/components/EmptyStates/assets/ErrorIllustration.js +6 -4
  118. package/lib/components/EmptyStates/assets/NoDataIllustration.js +6 -4
  119. package/lib/components/EmptyStates/assets/NoTagsIllustration.js +6 -4
  120. package/lib/components/EmptyStates/assets/NotFoundIllustration.js +6 -4
  121. package/lib/components/EmptyStates/assets/NotificationsIllustration.js +6 -4
  122. package/lib/components/EmptyStates/assets/UnauthorizedIllustration.js +6 -4
  123. package/lib/components/Guidebanner/Guidebanner.js +9 -12
  124. package/lib/global/js/hooks/index.js +8 -1
  125. package/lib/global/js/hooks/usePrefix.js +19 -0
  126. package/lib/global/js/package-settings.js +1 -4
  127. package/package.json +2 -2
  128. package/scss/components/Carousel/_carousel.scss +1 -2
  129. package/scss/components/Checklist/_checklist.scss +13 -25
  130. package/scss/components/Coachmark/styles/_coachmark-dragbar.scss +1 -45
  131. package/scss/components/Coachmark/styles/_coachmark-header.scss +0 -33
  132. package/scss/components/Coachmark/styles/_coachmark-overlay.scss +113 -5
  133. package/scss/components/Coachmark/styles/_coachmark-tagline.scss +18 -0
  134. package/scss/components/CoachmarkBeacon/_coachmark-beacon.scss +19 -1
  135. package/scss/components/CoachmarkOverlayElement/_coachmark-overlay-element.scss +2 -0
  136. package/scss/components/CoachmarkOverlayElements/_coachmark-overlay-elements.scss +1 -0
  137. package/scss/components/CoachmarkStack/_coachmark-stack.scss +3 -0
  138. package/scss/components/Datagrid/styles/_datagrid.scss +31 -5
  139. package/scss/components/Datagrid/styles/_useExpandedRow.scss +21 -0
  140. package/scss/components/Datagrid/styles/_useNestedRows.scss +1 -1
  141. package/scss/components/Datagrid/styles/addons/_RowSizeDropdown.scss +9 -0
  142. package/scss/components/_index-released-only.scss +1 -0
  143. package/es/components/Carousel/utils.js +0 -98
  144. package/lib/components/Carousel/utils.js +0 -108
package/css/index.css CHANGED
@@ -21100,34 +21100,34 @@ button.c4p--add-select__global-filter-toggle--open {
21100
21100
  align-items: center;
21101
21101
  padding-top: 0;
21102
21102
  }
21103
- .c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-center.c4p--datagrid__variable-row-height.bx--data-table--compact .c4p--datagrid__cell, .c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-center.c4p--datagrid__variable-row-height.bx--data-table--xs .c4p--datagrid__cell {
21103
+ .c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-center.c4p--datagrid__variable-row-height.bx--data-table--xs .c4p--datagrid__cell {
21104
21104
  padding-top: var(--cds-spacing-01, 0.125rem);
21105
21105
  padding-bottom: var(--cds-spacing-01, 0.125rem);
21106
21106
  }
21107
- .c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-center.c4p--datagrid__variable-row-height.bx--data-table--short .c4p--datagrid__cell, .c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-center.c4p--datagrid__variable-row-height.bx--data-table--sm .c4p--datagrid__cell, .c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-center.c4p--datagrid__variable-row-height.bx--data-table--md .c4p--datagrid__cell {
21107
+ .c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-center.c4p--datagrid__variable-row-height.bx--data-table--sm .c4p--datagrid__cell, .c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-center.c4p--datagrid__variable-row-height.bx--data-table--md .c4p--datagrid__cell {
21108
21108
  /* stylelint-disable-next-line carbon/layout-token-use */
21109
21109
  padding-top: 0.4375rem;
21110
21110
  /* stylelint-disable-next-line carbon/layout-token-use */
21111
21111
  padding-bottom: 0.375rem;
21112
21112
  }
21113
- .c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-center.c4p--datagrid__variable-row-height.bx--data-table--tall .c4p--datagrid__cell, .c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-center.c4p--datagrid__variable-row-height.bx--data-table--lg .c4p--datagrid__cell, .c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-center.c4p--datagrid__variable-row-height.bx--data-table--xl .c4p--datagrid__cell {
21113
+ .c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-center.c4p--datagrid__variable-row-height.bx--data-table--lg .c4p--datagrid__cell, .c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-center.c4p--datagrid__variable-row-height.bx--data-table--xl .c4p--datagrid__cell {
21114
21114
  padding-top: var(--cds-spacing-05, 1rem);
21115
21115
  padding-bottom: var(--cds-spacing-05, 1rem);
21116
21116
  }
21117
- .c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-top.bx--data-table--tall .c4p--datagrid__cell, .c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-top.bx--data-table--lg .c4p--datagrid__cell, .c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-top.bx--data-table--xl .c4p--datagrid__cell {
21117
+ .c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-top.bx--data-table--lg .c4p--datagrid__cell, .c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-top.bx--data-table--xl .c4p--datagrid__cell {
21118
21118
  padding-top: var(--cds-spacing-05, 1rem);
21119
21119
  }
21120
- .c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-top.bx--data-table--tall .bx--table-header-label, .c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-top.bx--data-table--lg .bx--table-header-label, .c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-top.bx--data-table--xl .bx--table-header-label {
21120
+ .c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-top.bx--data-table--lg .bx--table-header-label, .c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-top.bx--data-table--xl .bx--table-header-label {
21121
21121
  padding-top: var(--cds-spacing-05, 1rem);
21122
21122
  }
21123
- .c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-top.bx--data-table--tall .bx--table-column-checkbox, .c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-top.bx--data-table--lg .bx--table-column-checkbox, .c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-top.bx--data-table--xl .bx--table-column-checkbox {
21123
+ .c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-top.bx--data-table--lg .bx--table-column-checkbox, .c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-top.bx--data-table--xl .bx--table-column-checkbox {
21124
21124
  /* stylelint-disable-next-line carbon/layout-token-use */
21125
21125
  padding-top: 0.8125rem;
21126
21126
  }
21127
- .c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-top.c4p--datagrid__variable-row-height.bx--data-table--tall .c4p--datagrid__cell, .c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-top.c4p--datagrid__variable-row-height.bx--data-table--lg .c4p--datagrid__cell, .c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-top.c4p--datagrid__variable-row-height.bx--data-table--xl .c4p--datagrid__cell {
21127
+ .c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-top.c4p--datagrid__variable-row-height.bx--data-table--lg .c4p--datagrid__cell, .c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-top.c4p--datagrid__variable-row-height.bx--data-table--xl .c4p--datagrid__cell {
21128
21128
  padding-bottom: var(--cds-spacing-05, 1rem);
21129
21129
  }
21130
- .c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-top.c4p--datagrid__variable-row-height.bx--data-table--tall .bx--table-header-label, .c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-top.c4p--datagrid__variable-row-height.bx--data-table--lg .bx--table-header-label, .c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-top.c4p--datagrid__variable-row-height.bx--data-table--xl .bx--table-header-label {
21130
+ .c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-top.c4p--datagrid__variable-row-height.bx--data-table--lg .bx--table-header-label, .c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-top.c4p--datagrid__variable-row-height.bx--data-table--xl .bx--table-header-label {
21131
21131
  padding-bottom: var(--cds-spacing-05, 1rem);
21132
21132
  }
21133
21133
  .c4p--datagrid__grid-container table.c4p--datagrid__variable-row-height tr.c4p--datagrid__carbon-row {
@@ -21290,6 +21290,10 @@ button.c4p--add-select__global-filter-toggle--open {
21290
21290
  background-color: var(--cds-hover-selected-ui, #cacaca);
21291
21291
  }
21292
21292
 
21293
+ .c4p--datagrid__grid-container table.c4p--datagrid__table-simple.bx--data-table.c4p--datagrid__table-is-resizing {
21294
+ overflow-y: hidden;
21295
+ }
21296
+
21293
21297
  .c4p--datagrid__resizableColumn.c4p--datagrid__isResizing .c4p--datagrid__resizer {
21294
21298
  border-right: var(--cds-spacing-01, 0.125rem) solid var(--cds-hover-secondary, #4c4c4c);
21295
21299
  }
@@ -21305,6 +21309,20 @@ button.c4p--add-select__global-filter-toggle--open {
21305
21309
  background-color: var(--cds-hover-selected-ui, #cacaca);
21306
21310
  }
21307
21311
 
21312
+ .c4p--datagrid__header-actions-column:hover {
21313
+ background-color: var(--cds-layer-accent, #e0e0e0);
21314
+ }
21315
+
21316
+ .c4p--datagrid .c4p--datagrid__carbon-row .c4p--datagrid__actions-column-cell-non-sticky .bx--overflow-menu {
21317
+ opacity: 0;
21318
+ }
21319
+
21320
+ .c4p--datagrid .c4p--datagrid__carbon-row:hover .c4p--datagrid__actions-column-cell-non-sticky .bx--overflow-menu,
21321
+ .c4p--datagrid .c4p--datagrid__carbon-row .c4p--datagrid__actions-column-cell-non-sticky .bx--overflow-menu:focus,
21322
+ .c4p--datagrid .c4p--datagrid__carbon-row .c4p--datagrid__actions-column-cell-non-sticky .bx--overflow-menu[aria-expanded=true] {
21323
+ opacity: 1;
21324
+ }
21325
+
21308
21326
  .c4p--datagrid__head-hidden-select-all {
21309
21327
  padding-right: var(--cds-spacing-09, 3rem);
21310
21328
  }
@@ -21661,7 +21679,7 @@ button.c4p--add-select__global-filter-toggle--open {
21661
21679
  position: relative;
21662
21680
  }
21663
21681
 
21664
- .c4p--datagrid tr.c4p--datagrid__carbon-nested-row + :not(tr.c4p--datagrid__carbon-nested-row)::before {
21682
+ .c4p--datagrid tr.c4p--datagrid__carbon-nested-row + :not(tr.c4p--datagrid__carbon-nested-row)::after {
21665
21683
  position: absolute;
21666
21684
  /* stylelint-disable-next-line carbon/layout-token-use */
21667
21685
  top: -1px;
@@ -22002,6 +22020,11 @@ button.c4p--add-select__global-filter-toggle--open {
22002
22020
  background-color: var(--cds-ui-02, #ffffff);
22003
22021
  }
22004
22022
 
22023
+ .c4p--datagrid table.bx--data-table--xl.c4p--datagrid__vertical-align-center td.c4p--datagrid__expandable-row-cell,
22024
+ .c4p--datagrid table.bx--data-table--xl.c4p--datagrid__vertical-align-top td.c4p--datagrid__expandable-row-cell {
22025
+ padding-top: var(--cds-spacing-03, 0.5rem);
22026
+ }
22027
+
22005
22028
  /*
22006
22029
  * Licensed Materials - Property of IBM
22007
22030
  * 5724-Q36
@@ -22274,6 +22297,16 @@ th.c4p--datagrid__select-all-toggle-on.button {
22274
22297
  background: var(--cds-layer-hover, #e5e5e5);
22275
22298
  }
22276
22299
 
22300
+ .c4p--datagrid .bx--data-table tbody tr:hover td.c4p--datagrid__expanded-row-cell-wrapper,
22301
+ .c4p--datagrid .bx--data-table td.c4p--datagrid__expanded-row-cell-wrapper,
22302
+ .c4p--datagrid .bx--data-table .c4p--datagrid__carbon-row-expanded td.c4p--datagrid__expandable-row-cell {
22303
+ border: none;
22304
+ }
22305
+
22306
+ .c4p--datagrid .bx--data-table td.c4p--datagrid__expanded-row-cell-wrapper {
22307
+ padding: 0;
22308
+ }
22309
+
22277
22310
  .c4p--datagrid__draggable-handleStyle {
22278
22311
  display: flex;
22279
22312
  align-items: center;
@@ -23324,9 +23357,8 @@ th.c4p--datagrid__select-all-toggle-on.button {
23324
23357
  }
23325
23358
  .c4p--carousel__elements {
23326
23359
  display: flex;
23360
+ overflow: scroll;
23327
23361
  -ms-overflow-style: none;
23328
- overflow-x: scroll;
23329
- overflow-y: hidden;
23330
23362
  scroll-behavior: smooth;
23331
23363
  scroll-snap-type: x mandatory;
23332
23364
  scrollbar-width: none;
@@ -24978,64 +25010,16 @@ th.c4p--datagrid__select-all-toggle-on.button {
24978
25010
  color: var(--cds-link-01, #0f62fe);
24979
25011
  }
24980
25012
 
24981
- /* stylelint-disable declaration-no-important */
24982
25013
  .c4p--coachmark-dragbar {
24983
25014
  display: flex;
24984
25015
  }
24985
- .c4p--coachmark-dragbar__handle {
24986
- flex-grow: 1;
24987
- padding: var(--cds-spacing-03, 0.5rem) 0 0 var(--cds-spacing-03, 0.5rem);
24988
- border: 0;
24989
- background-color: transparent;
24990
- text-align: left;
24991
- }
24992
- .c4p--coachmark-dragbar__handle:hover {
24993
- cursor: move;
24994
- }
24995
- .c4p--coachmark-dragbar--close-btn {
24996
- width: var(--cds-spacing-07, 2rem);
24997
- height: var(--cds-spacing-07, 2rem);
24998
- margin-left: auto !important;
24999
- }
25000
- .c4p--coachmark-dragbar--close-btn svg > path {
25001
- margin: 0;
25002
- fill: var(--cds-inverse-01, #ffffff) !important;
25003
- }
25004
- .c4p--coachmark-dragbar--close-btn:hover {
25005
- background-color: var(--cds-inverse-hover-ui, #4c4c4c) !important;
25006
- }
25007
- .c4p--coachmark-dragbar__light c4p--coachmark-dragbar--close-btn:active {
25008
- background-color: var(--cds-active-secondary, #6f6f6f);
25009
- }
25010
- .c4p--coachmark-dragbar__dark c4p--coachmark-dragbar--close-btn:active {
25011
- background-color: var(--cds-button-tertiary-active, #002d9c);
25012
- }
25013
25016
  .c4p--coachmark-dragbar svg {
25014
25017
  color: var(--cds-inverse-01, #ffffff);
25015
25018
  }
25016
25019
 
25017
- /* stylelint-disable declaration-no-important */
25018
25020
  .c4p--coachmark-header {
25019
25021
  display: flex;
25020
25022
  }
25021
- .c4p--coachmark-header--close-btn {
25022
- width: var(--cds-spacing-07, 2rem);
25023
- height: var(--cds-spacing-07, 2rem);
25024
- margin-left: auto !important;
25025
- }
25026
- .c4p--coachmark-header--close-btn svg > path {
25027
- margin: 0;
25028
- fill: var(--cds-inverse-01, #ffffff) !important;
25029
- }
25030
- .c4p--coachmark-header--close-btn:hover {
25031
- background-color: var(--cds-inverse-hover-ui, #4c4c4c) !important;
25032
- }
25033
- .c4p--coachmark-header__light c4p--coachmark-header--close-btn:active {
25034
- background-color: var(--cds-active-secondary, #6f6f6f);
25035
- }
25036
- .c4p--coachmark-header__dark c4p--coachmark-header--close-btn:active {
25037
- background-color: var(--cds-button-tertiary-active, #002d9c);
25038
- }
25039
25023
 
25040
25024
  /* stylelint-disable carbon/layout-token-use */
25041
25025
  /* stylelint-disable carbon/theme-token-use */
@@ -25047,7 +25031,7 @@ th.c4p--datagrid__select-all-toggle-on.button {
25047
25031
  border-radius: var(--cds-spacing-01, 0.125rem);
25048
25032
  background-color: var(--cds-inverse-02, #393939);
25049
25033
  color: var(--cds-inverse-01, #ffffff);
25050
- /* ------------------ */
25034
+ visibility: hidden;
25051
25035
  }
25052
25036
  .c4p--coachmark-overlay--fixed {
25053
25037
  position: fixed;
@@ -25062,8 +25046,14 @@ th.c4p--datagrid__select-all-toggle-on.button {
25062
25046
  transition: none;
25063
25047
  }
25064
25048
  }
25049
+ .c4p--coachmark-overlay--is-dragmode {
25050
+ border-radius: 0;
25051
+ box-shadow: 0 0 0 var(--cds-spacing-02, 0.25rem) var(--cds-inverse-02, #393939);
25052
+ outline: var(--cds-spacing-01, 0.125rem) solid var(--cds-inverse-01, #ffffff);
25053
+ }
25065
25054
  .c4p--coachmark-overlay--is-visible {
25066
25055
  transform: translateY(0);
25056
+ visibility: visible;
25067
25057
  }
25068
25058
  .c4p--coachmark-overlay__caret {
25069
25059
  position: absolute;
@@ -25168,9 +25158,6 @@ th.c4p--datagrid__select-all-toggle-on.button {
25168
25158
  height: calc(var(--cds-spacing-07, 2rem) + var(--cds-spacing-12, 6rem));
25169
25159
  margin-bottom: var(--cds-spacing-05, 1rem);
25170
25160
  }
25171
- .c4p--coachmark-overlay__body {
25172
- padding: var(--cds-spacing-01, 0.125rem) var(--cds-spacing-05, 1rem) var(--cds-spacing-05, 1rem);
25173
- }
25174
25161
  .c4p--coachmark-overlay__body .bx--btn--ghost {
25175
25162
  color: var(--cds-inverse-link, #78a9ff);
25176
25163
  }
@@ -25195,6 +25182,45 @@ th.c4p--datagrid__select-all-toggle-on.button {
25195
25182
  letter-spacing: var(--cds-productive-heading-02-letter-spacing, 0);
25196
25183
  order: 1;
25197
25184
  }
25185
+ .c4p--coachmark-overlay__handle {
25186
+ position: relative;
25187
+ flex-grow: 1;
25188
+ padding: var(--cds-spacing-02, 0.25rem) 0 0 var(--cds-spacing-03, 0.5rem);
25189
+ border: 0;
25190
+ background-color: transparent;
25191
+ text-align: left;
25192
+ }
25193
+ .c4p--coachmark-overlay__handle::before {
25194
+ position: absolute;
25195
+ top: var(--cds-spacing-01, 0.125rem);
25196
+ left: var(--cds-spacing-01, 0.125rem);
25197
+ width: calc(var(--cds-spacing-06, 1.5rem) + var(--cds-spacing-01, 0.125rem));
25198
+ height: calc(var(--cds-spacing-06, 1.5rem) + var(--cds-spacing-01, 0.125rem));
25199
+ content: "";
25200
+ }
25201
+ .c4p--coachmark-overlay__handle:hover {
25202
+ cursor: move;
25203
+ }
25204
+ .c4p--coachmark-overlay__handle:focus {
25205
+ border: none;
25206
+ outline: none;
25207
+ }
25208
+ .c4p--coachmark-overlay__handle:focus::before {
25209
+ border: 1px solid var(--cds-inverse-01, #ffffff);
25210
+ outline: 1px solid #0f62fe;
25211
+ }
25212
+ .c4p--coachmark-overlay--close-btn {
25213
+ width: var(--cds-spacing-07, 2rem);
25214
+ height: var(--cds-spacing-07, 2rem);
25215
+ margin-left: auto !important;
25216
+ }
25217
+ .c4p--coachmark-overlay--close-btn svg > path {
25218
+ margin: 0;
25219
+ fill: var(--cds-inverse-01, #ffffff) !important;
25220
+ }
25221
+ .c4p--coachmark-overlay--close-btn:hover {
25222
+ background-color: var(--cds-inverse-hover-ui, #4c4c4c) !important;
25223
+ }
25198
25224
  .c4p--coachmark-overlay__footer {
25199
25225
  display: flex;
25200
25226
  align-items: center;
@@ -25212,12 +25238,35 @@ th.c4p--datagrid__select-all-toggle-on.button {
25212
25238
  .c4p--coachmark-overlay__light .c4p--coachmark-overlay__body .bx--link:focus {
25213
25239
  outline-color: var(--cds-text-04, #ffffff);
25214
25240
  }
25241
+ .c4p--coachmark-overlay__light .c4p--coachmark-overlay__body .bx--btn--ghost {
25242
+ border-color: transparent !important;
25243
+ border-radius: 0;
25244
+ outline: 1px solid transparent;
25245
+ }
25215
25246
  .c4p--coachmark-overlay__light .c4p--coachmark-overlay__body .bx--btn--ghost:hover {
25216
25247
  background-color: var(--cds-inverse-hover-ui, #4c4c4c);
25217
25248
  }
25218
25249
  .c4p--coachmark-overlay__light .c4p--coachmark-overlay__body .bx--btn--ghost:active {
25219
25250
  background-color: var(--cds-active-secondary, #6f6f6f);
25220
25251
  }
25252
+ .c4p--coachmark-overlay__light .c4p--coachmark-overlay__body .bx--btn--ghost:focus {
25253
+ box-shadow: inset 0 0 0 1px var(--cds-inverse-02, #393939), inset 0 0 0 var(--cds-spacing-01, 0.125rem) #ffffff;
25254
+ }
25255
+ .c4p--coachmark-overlay__light .c4p--coachmark-overlay__handle:focus::before {
25256
+ border: 1px solid #ffffff;
25257
+ outline: 1px solid transparent;
25258
+ }
25259
+ .c4p--coachmark-overlay__light .c4p--coachmark-overlay--close-btn {
25260
+ border-color: transparent !important;
25261
+ border-radius: 0;
25262
+ outline: 1px solid transparent;
25263
+ }
25264
+ .c4p--coachmark-overlay__light .c4p--coachmark-overlay--close-btn:active {
25265
+ background-color: var(--cds-active-secondary, #6f6f6f);
25266
+ }
25267
+ .c4p--coachmark-overlay__light .c4p--coachmark-overlay--close-btn:focus {
25268
+ box-shadow: inset 0 0 0 1px var(--cds-inverse-02, #393939), inset 0 0 0 var(--cds-spacing-01, 0.125rem) #ffffff;
25269
+ }
25221
25270
  .c4p--coachmark-overlay__dark .c4p--coachmark-overlay__body .bx--link {
25222
25271
  color: #0062fe;
25223
25272
  }
@@ -25235,6 +25284,9 @@ th.c4p--datagrid__select-all-toggle-on.button {
25235
25284
  background-color: var(--cds-button-primary-active, #002d9c);
25236
25285
  box-shadow: inset 0 0 0 var(--cds-spacing-01, 0.125rem) var(--cds-interactive-01, #0f62fe), inset 0 0 0 0.1875rem var(--cds-interactive-03, #0f62fe);
25237
25286
  }
25287
+ .c4p--coachmark-overlay__dark .c4p--coachmark-overlay__body .bx--btn--ghost {
25288
+ border-color: transparent;
25289
+ }
25238
25290
  .c4p--coachmark-overlay__dark .c4p--coachmark-overlay__body .bx--btn--ghost:hover {
25239
25291
  background-color: var(--cds-inverse-hover-ui, #4c4c4c);
25240
25292
  }
@@ -25242,7 +25294,20 @@ th.c4p--datagrid__select-all-toggle-on.button {
25242
25294
  background-color: var(--cds-button-tertiary-active, #002d9c);
25243
25295
  }
25244
25296
  .c4p--coachmark-overlay__dark .c4p--coachmark-overlay__body .bx--btn--ghost:focus {
25245
- box-shadow: inset 0 0 0 var(--cds-spacing-01, 0.125rem) var(--cds-interactive-01, #0f62fe), inset 0 0 0 0.1875rem var(--cds-interactive-03, #0f62fe);
25297
+ box-shadow: inset 0 0 0 1px #0f62fe, inset 0 0 0 var(--cds-spacing-01, 0.125rem) #ffffff;
25298
+ }
25299
+ .c4p--coachmark-overlay__dark .c4p--coachmark-overlay__handle:focus::before {
25300
+ border: 1px solid #ffffff;
25301
+ outline: 1px solid #0f62fe;
25302
+ }
25303
+ .c4p--coachmark-overlay__dark .c4p--coachmark-overlay--close-btn {
25304
+ border-color: transparent;
25305
+ }
25306
+ .c4p--coachmark-overlay__dark .c4p--coachmark-overlay--close-btn:focus {
25307
+ box-shadow: inset 0 0 0 1px #0f62fe, inset 0 0 0 var(--cds-spacing-01, 0.125rem) #ffffff;
25308
+ }
25309
+ .c4p--coachmark-overlay__dark .c4p--coachmark-overlay--close-btn:active {
25310
+ background-color: var(--cds-button-tertiary-active, #002d9c);
25246
25311
  }
25247
25312
  .c4p--coachmark-overlay .c4p--carousel__item {
25248
25313
  flex: 0 0 100% !important;
@@ -25319,6 +25384,10 @@ th.c4p--datagrid__select-all-toggle-on.button {
25319
25384
  line-height: var(--cds-body-short-01-line-height, 1.28572);
25320
25385
  letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
25321
25386
  }
25387
+ .c4p--coachmark-tagline__cta:focus {
25388
+ box-shadow: inset 0 0 0 3px #6929c4, inset 0 0 0 var(--cds-spacing-02, 0.25rem) #ffffff;
25389
+ outline: 1px solid transparent;
25390
+ }
25322
25391
  .c4p--coachmark-tagline__cta:hover {
25323
25392
  cursor: pointer !important;
25324
25393
  }
@@ -25328,8 +25397,17 @@ th.c4p--datagrid__select-all-toggle-on.button {
25328
25397
  .c4p--coachmark-tagline--close-btn {
25329
25398
  width: var(--cds-spacing-07, 2rem);
25330
25399
  height: var(--cds-spacing-07, 2rem);
25400
+ border-color: transparent !important;
25401
+ border-radius: 0;
25331
25402
  margin-left: auto !important;
25332
25403
  color: #ffffff;
25404
+ outline: 1px solid transparent;
25405
+ }
25406
+ .c4p--coachmark-tagline--close-btn:active {
25407
+ background-color: var(--cds-active-secondary, #6f6f6f);
25408
+ }
25409
+ .c4p--coachmark-tagline--close-btn:focus {
25410
+ box-shadow: inset 0 0 0 1px var(--cds-inverse-02, #393939), inset 0 0 0 var(--cds-spacing-01, 0.125rem) #ffffff !important;
25333
25411
  }
25334
25412
  .c4p--coachmark-tagline--close-btn svg > path {
25335
25413
  margin: 0;
@@ -25354,6 +25432,9 @@ th.c4p--datagrid__select-all-toggle-on.button {
25354
25432
  .c4p--coachmark-beacon {
25355
25433
  position: relative;
25356
25434
  }
25435
+ .c4p--coachmark-beacon-default .c4p--coachmark-beacon__target::before {
25436
+ display: none;
25437
+ }
25357
25438
  .c4p--coachmark-beacon-default .c4p--coachmark-beacon__target::after {
25358
25439
  position: absolute;
25359
25440
  top: calc(var(--cds-spacing-01, 0.125rem) + var(--cds-spacing-03, 0.5rem));
@@ -25364,6 +25445,20 @@ th.c4p--datagrid__select-all-toggle-on.button {
25364
25445
  background-color: #4589ff;
25365
25446
  content: "";
25366
25447
  }
25448
+ .c4p--coachmark-beacon-default .c4p--coachmark-beacon__target:focus {
25449
+ outline: transparent;
25450
+ }
25451
+ .c4p--coachmark-beacon-default .c4p--coachmark-beacon__target:focus::before {
25452
+ position: absolute;
25453
+ top: 7px;
25454
+ left: 7px;
25455
+ display: block;
25456
+ width: 18px;
25457
+ height: 18px;
25458
+ border-radius: 100%;
25459
+ content: "";
25460
+ outline: var(--cds-spacing-01, 0.125rem) var(--cds-focus, #0f62fe) solid;
25461
+ }
25367
25462
  .c4p--coachmark-beacon .c4p--coachmark-beacon__target {
25368
25463
  position: absolute;
25369
25464
  top: calc(-1 * var(--cds-spacing-05, 1rem));
@@ -25458,6 +25553,7 @@ th.c4p--datagrid__select-all-toggle-on.button {
25458
25553
  display: flex;
25459
25554
  align-items: center;
25460
25555
  justify-content: flex-end;
25556
+ padding: 0 var(--cds-spacing-05, 1rem) var(--cds-spacing-05, 1rem);
25461
25557
  }
25462
25558
  .c4p--coachmark-overlay-elements--controls-progress {
25463
25559
  margin-right: auto;
@@ -25467,6 +25563,9 @@ th.c4p--datagrid__select-all-toggle-on.button {
25467
25563
  letter-spacing: var(--cds-helper-text-01-letter-spacing, 0.32px);
25468
25564
  }
25469
25565
 
25566
+ .c4p--coachmark-overlay-element {
25567
+ padding: var(--cds-spacing-01, 0.125rem) var(--cds-spacing-05, 1rem) 0;
25568
+ }
25470
25569
  .c4p--coachmark-overlay-element__content {
25471
25570
  padding-bottom: var(--cds-spacing-05, 1rem);
25472
25571
  }
@@ -25498,6 +25597,7 @@ th.c4p--datagrid__select-all-toggle-on.button {
25498
25597
  right: var(--cds-spacing-05, 1rem);
25499
25598
  bottom: -100%;
25500
25599
  transform: translateY(100%);
25600
+ visibility: hidden;
25501
25601
  }
25502
25602
  .c4p--coachmark-stack-element--is-mounted {
25503
25603
  bottom: 0;
@@ -25512,6 +25612,7 @@ th.c4p--datagrid__select-all-toggle-on.button {
25512
25612
  .c4p--coachmark-stack-element--is-visible {
25513
25613
  opacity: 1;
25514
25614
  transform: translateY(0);
25615
+ visibility: visible;
25515
25616
  }
25516
25617
  .c4p--coachmark-stack-element--is-stacked {
25517
25618
  bottom: 0;
@@ -25519,6 +25620,7 @@ th.c4p--datagrid__select-all-toggle-on.button {
25519
25620
  pointer-events: none;
25520
25621
  transform: perspective(9rem) translate3d(0, calc(var(--cds-spacing-09, 3rem) * -1), calc(var(--cds-spacing-05, 1rem) * -1));
25521
25622
  transform-origin: top center;
25623
+ visibility: visible;
25522
25624
  }
25523
25625
  .c4p--coachmark-stack-element--is-stacked__light {
25524
25626
  background-color: #262626;
@@ -25699,6 +25801,7 @@ th.c4p--datagrid__select-all-toggle-on.button {
25699
25801
  .c4p--checklist__header {
25700
25802
  display: flex;
25701
25803
  padding: var(--cds-spacing-05, 1rem);
25804
+ border-top: 1px solid var(--cds-ui-03, #e0e0e0);
25702
25805
  background-color: var(--cds-ui-01, #f4f4f4);
25703
25806
  gap: var(--cds-spacing-03, 0.5rem);
25704
25807
  }
@@ -25801,9 +25904,6 @@ th.c4p--datagrid__select-all-toggle-on.button {
25801
25904
  color: var(--cds-text-primary, #161616);
25802
25905
  text-decoration: underline;
25803
25906
  }
25804
- .c4p--checklist__button--error {
25805
- color: var(--cds-text-error, #da1e28) !important;
25806
- }
25807
25907
  .c4p--checklist__content-outer {
25808
25908
  overflow: hidden;
25809
25909
  }
@@ -25848,13 +25948,15 @@ th.c4p--datagrid__select-all-toggle-on.button {
25848
25948
  .c4p--checklist__icon {
25849
25949
  /* stylelint-disable-next-line carbon/layout-token-use */
25850
25950
  margin: 0.0625rem var(--cds-spacing-03, 0.5rem) 0 0;
25951
+ }
25952
+ .c4p--checklist__icon--checked, .c4p--checklist__icon--indeterminate {
25851
25953
  color: var(--cds-link-01, #0f62fe);
25852
25954
  }
25853
25955
  .c4p--checklist__icon--error {
25854
25956
  color: var(--cds-support-error, #da1e28);
25855
25957
  }
25856
25958
  .c4p--checklist__icon--disabled {
25857
- color: var(--cds-disabled-03, #8d8d8d);
25959
+ color: var(--cds-disabled-02, #c6c6c6);
25858
25960
  }
25859
25961
  .c4p--checklist__label {
25860
25962
  font-size: var(--cds-body-short-01-font-size, 0.875rem);
@@ -25867,8 +25969,8 @@ th.c4p--datagrid__select-all-toggle-on.button {
25867
25969
  -webkit-line-clamp: 2;
25868
25970
  text-overflow: ellipsis;
25869
25971
  }
25870
- .c4p--checklist__label--checked, .c4p--checklist__label--disabled, .c4p--checklist__label--error {
25871
- color: var(--cds-disabled-03, #8d8d8d);
25972
+ .c4p--checklist__label--disabled {
25973
+ color: var(--cds-disabled-02, #c6c6c6);
25872
25974
  }
25873
25975
  .c4p--checklist__footer {
25874
25976
  display: -webkit-box;