@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
@@ -6669,34 +6669,34 @@ button.c4p--add-select__global-filter-toggle--open {
6669
6669
  align-items: center;
6670
6670
  padding-top: 0;
6671
6671
  }
6672
- .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 {
6672
+ .c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-center.c4p--datagrid__variable-row-height.bx--data-table--xs .c4p--datagrid__cell {
6673
6673
  padding-top: var(--cds-spacing-01, 0.125rem);
6674
6674
  padding-bottom: var(--cds-spacing-01, 0.125rem);
6675
6675
  }
6676
- .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 {
6676
+ .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 {
6677
6677
  /* stylelint-disable-next-line carbon/layout-token-use */
6678
6678
  padding-top: 0.4375rem;
6679
6679
  /* stylelint-disable-next-line carbon/layout-token-use */
6680
6680
  padding-bottom: 0.375rem;
6681
6681
  }
6682
- .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 {
6682
+ .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 {
6683
6683
  padding-top: var(--cds-spacing-05, 1rem);
6684
6684
  padding-bottom: var(--cds-spacing-05, 1rem);
6685
6685
  }
6686
- .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 {
6686
+ .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 {
6687
6687
  padding-top: var(--cds-spacing-05, 1rem);
6688
6688
  }
6689
- .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 {
6689
+ .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 {
6690
6690
  padding-top: var(--cds-spacing-05, 1rem);
6691
6691
  }
6692
- .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 {
6692
+ .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 {
6693
6693
  /* stylelint-disable-next-line carbon/layout-token-use */
6694
6694
  padding-top: 0.8125rem;
6695
6695
  }
6696
- .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 {
6696
+ .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 {
6697
6697
  padding-bottom: var(--cds-spacing-05, 1rem);
6698
6698
  }
6699
- .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 {
6699
+ .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 {
6700
6700
  padding-bottom: var(--cds-spacing-05, 1rem);
6701
6701
  }
6702
6702
  .c4p--datagrid__grid-container table.c4p--datagrid__variable-row-height tr.c4p--datagrid__carbon-row {
@@ -6859,6 +6859,10 @@ button.c4p--add-select__global-filter-toggle--open {
6859
6859
  background-color: var(--cds-hover-selected-ui, #cacaca);
6860
6860
  }
6861
6861
 
6862
+ .c4p--datagrid__grid-container table.c4p--datagrid__table-simple.bx--data-table.c4p--datagrid__table-is-resizing {
6863
+ overflow-y: hidden;
6864
+ }
6865
+
6862
6866
  .c4p--datagrid__resizableColumn.c4p--datagrid__isResizing .c4p--datagrid__resizer {
6863
6867
  border-right: var(--cds-spacing-01, 0.125rem) solid var(--cds-hover-secondary, #4c4c4c);
6864
6868
  }
@@ -6874,6 +6878,20 @@ button.c4p--add-select__global-filter-toggle--open {
6874
6878
  background-color: var(--cds-hover-selected-ui, #cacaca);
6875
6879
  }
6876
6880
 
6881
+ .c4p--datagrid__header-actions-column:hover {
6882
+ background-color: var(--cds-layer-accent, #e0e0e0);
6883
+ }
6884
+
6885
+ .c4p--datagrid .c4p--datagrid__carbon-row .c4p--datagrid__actions-column-cell-non-sticky .bx--overflow-menu {
6886
+ opacity: 0;
6887
+ }
6888
+
6889
+ .c4p--datagrid .c4p--datagrid__carbon-row:hover .c4p--datagrid__actions-column-cell-non-sticky .bx--overflow-menu,
6890
+ .c4p--datagrid .c4p--datagrid__carbon-row .c4p--datagrid__actions-column-cell-non-sticky .bx--overflow-menu:focus,
6891
+ .c4p--datagrid .c4p--datagrid__carbon-row .c4p--datagrid__actions-column-cell-non-sticky .bx--overflow-menu[aria-expanded=true] {
6892
+ opacity: 1;
6893
+ }
6894
+
6877
6895
  .c4p--datagrid__head-hidden-select-all {
6878
6896
  padding-right: var(--cds-spacing-09, 3rem);
6879
6897
  }
@@ -7230,7 +7248,7 @@ button.c4p--add-select__global-filter-toggle--open {
7230
7248
  position: relative;
7231
7249
  }
7232
7250
 
7233
- .c4p--datagrid tr.c4p--datagrid__carbon-nested-row + :not(tr.c4p--datagrid__carbon-nested-row)::before {
7251
+ .c4p--datagrid tr.c4p--datagrid__carbon-nested-row + :not(tr.c4p--datagrid__carbon-nested-row)::after {
7234
7252
  position: absolute;
7235
7253
  /* stylelint-disable-next-line carbon/layout-token-use */
7236
7254
  top: -1px;
@@ -7571,6 +7589,11 @@ button.c4p--add-select__global-filter-toggle--open {
7571
7589
  background-color: var(--cds-ui-02, #ffffff);
7572
7590
  }
7573
7591
 
7592
+ .c4p--datagrid table.bx--data-table--xl.c4p--datagrid__vertical-align-center td.c4p--datagrid__expandable-row-cell,
7593
+ .c4p--datagrid table.bx--data-table--xl.c4p--datagrid__vertical-align-top td.c4p--datagrid__expandable-row-cell {
7594
+ padding-top: var(--cds-spacing-03, 0.5rem);
7595
+ }
7596
+
7574
7597
  /*
7575
7598
  * Licensed Materials - Property of IBM
7576
7599
  * 5724-Q36
@@ -7843,6 +7866,16 @@ th.c4p--datagrid__select-all-toggle-on.button {
7843
7866
  background: var(--cds-layer-hover, #e5e5e5);
7844
7867
  }
7845
7868
 
7869
+ .c4p--datagrid .bx--data-table tbody tr:hover td.c4p--datagrid__expanded-row-cell-wrapper,
7870
+ .c4p--datagrid .bx--data-table td.c4p--datagrid__expanded-row-cell-wrapper,
7871
+ .c4p--datagrid .bx--data-table .c4p--datagrid__carbon-row-expanded td.c4p--datagrid__expandable-row-cell {
7872
+ border: none;
7873
+ }
7874
+
7875
+ .c4p--datagrid .bx--data-table td.c4p--datagrid__expanded-row-cell-wrapper {
7876
+ padding: 0;
7877
+ }
7878
+
7846
7879
  .c4p--datagrid__draggable-handleStyle {
7847
7880
  display: flex;
7848
7881
  align-items: center;
@@ -8893,9 +8926,8 @@ th.c4p--datagrid__select-all-toggle-on.button {
8893
8926
  }
8894
8927
  .c4p--carousel__elements {
8895
8928
  display: flex;
8929
+ overflow: scroll;
8896
8930
  -ms-overflow-style: none;
8897
- overflow-x: scroll;
8898
- overflow-y: hidden;
8899
8931
  scroll-behavior: smooth;
8900
8932
  scroll-snap-type: x mandatory;
8901
8933
  scrollbar-width: none;
@@ -10547,64 +10579,16 @@ th.c4p--datagrid__select-all-toggle-on.button {
10547
10579
  color: var(--cds-link-01, #0f62fe);
10548
10580
  }
10549
10581
 
10550
- /* stylelint-disable declaration-no-important */
10551
10582
  .c4p--coachmark-dragbar {
10552
10583
  display: flex;
10553
10584
  }
10554
- .c4p--coachmark-dragbar__handle {
10555
- flex-grow: 1;
10556
- padding: var(--cds-spacing-03, 0.5rem) 0 0 var(--cds-spacing-03, 0.5rem);
10557
- border: 0;
10558
- background-color: transparent;
10559
- text-align: left;
10560
- }
10561
- .c4p--coachmark-dragbar__handle:hover {
10562
- cursor: move;
10563
- }
10564
- .c4p--coachmark-dragbar--close-btn {
10565
- width: var(--cds-spacing-07, 2rem);
10566
- height: var(--cds-spacing-07, 2rem);
10567
- margin-left: auto !important;
10568
- }
10569
- .c4p--coachmark-dragbar--close-btn svg > path {
10570
- margin: 0;
10571
- fill: var(--cds-inverse-01, #ffffff) !important;
10572
- }
10573
- .c4p--coachmark-dragbar--close-btn:hover {
10574
- background-color: var(--cds-inverse-hover-ui, #4c4c4c) !important;
10575
- }
10576
- .c4p--coachmark-dragbar__light c4p--coachmark-dragbar--close-btn:active {
10577
- background-color: var(--cds-active-secondary, #6f6f6f);
10578
- }
10579
- .c4p--coachmark-dragbar__dark c4p--coachmark-dragbar--close-btn:active {
10580
- background-color: var(--cds-button-tertiary-active, #002d9c);
10581
- }
10582
10585
  .c4p--coachmark-dragbar svg {
10583
10586
  color: var(--cds-inverse-01, #ffffff);
10584
10587
  }
10585
10588
 
10586
- /* stylelint-disable declaration-no-important */
10587
10589
  .c4p--coachmark-header {
10588
10590
  display: flex;
10589
10591
  }
10590
- .c4p--coachmark-header--close-btn {
10591
- width: var(--cds-spacing-07, 2rem);
10592
- height: var(--cds-spacing-07, 2rem);
10593
- margin-left: auto !important;
10594
- }
10595
- .c4p--coachmark-header--close-btn svg > path {
10596
- margin: 0;
10597
- fill: var(--cds-inverse-01, #ffffff) !important;
10598
- }
10599
- .c4p--coachmark-header--close-btn:hover {
10600
- background-color: var(--cds-inverse-hover-ui, #4c4c4c) !important;
10601
- }
10602
- .c4p--coachmark-header__light c4p--coachmark-header--close-btn:active {
10603
- background-color: var(--cds-active-secondary, #6f6f6f);
10604
- }
10605
- .c4p--coachmark-header__dark c4p--coachmark-header--close-btn:active {
10606
- background-color: var(--cds-button-tertiary-active, #002d9c);
10607
- }
10608
10592
 
10609
10593
  /* stylelint-disable carbon/layout-token-use */
10610
10594
  /* stylelint-disable carbon/theme-token-use */
@@ -10616,7 +10600,7 @@ th.c4p--datagrid__select-all-toggle-on.button {
10616
10600
  border-radius: var(--cds-spacing-01, 0.125rem);
10617
10601
  background-color: var(--cds-inverse-02, #393939);
10618
10602
  color: var(--cds-inverse-01, #ffffff);
10619
- /* ------------------ */
10603
+ visibility: hidden;
10620
10604
  }
10621
10605
  .c4p--coachmark-overlay--fixed {
10622
10606
  position: fixed;
@@ -10631,8 +10615,14 @@ th.c4p--datagrid__select-all-toggle-on.button {
10631
10615
  transition: none;
10632
10616
  }
10633
10617
  }
10618
+ .c4p--coachmark-overlay--is-dragmode {
10619
+ border-radius: 0;
10620
+ box-shadow: 0 0 0 var(--cds-spacing-02, 0.25rem) var(--cds-inverse-02, #393939);
10621
+ outline: var(--cds-spacing-01, 0.125rem) solid var(--cds-inverse-01, #ffffff);
10622
+ }
10634
10623
  .c4p--coachmark-overlay--is-visible {
10635
10624
  transform: translateY(0);
10625
+ visibility: visible;
10636
10626
  }
10637
10627
  .c4p--coachmark-overlay__caret {
10638
10628
  position: absolute;
@@ -10737,9 +10727,6 @@ th.c4p--datagrid__select-all-toggle-on.button {
10737
10727
  height: calc(var(--cds-spacing-07, 2rem) + var(--cds-spacing-12, 6rem));
10738
10728
  margin-bottom: var(--cds-spacing-05, 1rem);
10739
10729
  }
10740
- .c4p--coachmark-overlay__body {
10741
- padding: var(--cds-spacing-01, 0.125rem) var(--cds-spacing-05, 1rem) var(--cds-spacing-05, 1rem);
10742
- }
10743
10730
  .c4p--coachmark-overlay__body .bx--btn--ghost {
10744
10731
  color: var(--cds-inverse-link, #78a9ff);
10745
10732
  }
@@ -10764,6 +10751,45 @@ th.c4p--datagrid__select-all-toggle-on.button {
10764
10751
  letter-spacing: var(--cds-productive-heading-02-letter-spacing, 0);
10765
10752
  order: 1;
10766
10753
  }
10754
+ .c4p--coachmark-overlay__handle {
10755
+ position: relative;
10756
+ flex-grow: 1;
10757
+ padding: var(--cds-spacing-02, 0.25rem) 0 0 var(--cds-spacing-03, 0.5rem);
10758
+ border: 0;
10759
+ background-color: transparent;
10760
+ text-align: left;
10761
+ }
10762
+ .c4p--coachmark-overlay__handle::before {
10763
+ position: absolute;
10764
+ top: var(--cds-spacing-01, 0.125rem);
10765
+ left: var(--cds-spacing-01, 0.125rem);
10766
+ width: calc(var(--cds-spacing-06, 1.5rem) + var(--cds-spacing-01, 0.125rem));
10767
+ height: calc(var(--cds-spacing-06, 1.5rem) + var(--cds-spacing-01, 0.125rem));
10768
+ content: "";
10769
+ }
10770
+ .c4p--coachmark-overlay__handle:hover {
10771
+ cursor: move;
10772
+ }
10773
+ .c4p--coachmark-overlay__handle:focus {
10774
+ border: none;
10775
+ outline: none;
10776
+ }
10777
+ .c4p--coachmark-overlay__handle:focus::before {
10778
+ border: 1px solid var(--cds-inverse-01, #ffffff);
10779
+ outline: 1px solid #0f62fe;
10780
+ }
10781
+ .c4p--coachmark-overlay--close-btn {
10782
+ width: var(--cds-spacing-07, 2rem);
10783
+ height: var(--cds-spacing-07, 2rem);
10784
+ margin-left: auto !important;
10785
+ }
10786
+ .c4p--coachmark-overlay--close-btn svg > path {
10787
+ margin: 0;
10788
+ fill: var(--cds-inverse-01, #ffffff) !important;
10789
+ }
10790
+ .c4p--coachmark-overlay--close-btn:hover {
10791
+ background-color: var(--cds-inverse-hover-ui, #4c4c4c) !important;
10792
+ }
10767
10793
  .c4p--coachmark-overlay__footer {
10768
10794
  display: flex;
10769
10795
  align-items: center;
@@ -10781,12 +10807,35 @@ th.c4p--datagrid__select-all-toggle-on.button {
10781
10807
  .c4p--coachmark-overlay__light .c4p--coachmark-overlay__body .bx--link:focus {
10782
10808
  outline-color: var(--cds-text-04, #ffffff);
10783
10809
  }
10810
+ .c4p--coachmark-overlay__light .c4p--coachmark-overlay__body .bx--btn--ghost {
10811
+ border-color: transparent !important;
10812
+ border-radius: 0;
10813
+ outline: 1px solid transparent;
10814
+ }
10784
10815
  .c4p--coachmark-overlay__light .c4p--coachmark-overlay__body .bx--btn--ghost:hover {
10785
10816
  background-color: var(--cds-inverse-hover-ui, #4c4c4c);
10786
10817
  }
10787
10818
  .c4p--coachmark-overlay__light .c4p--coachmark-overlay__body .bx--btn--ghost:active {
10788
10819
  background-color: var(--cds-active-secondary, #6f6f6f);
10789
10820
  }
10821
+ .c4p--coachmark-overlay__light .c4p--coachmark-overlay__body .bx--btn--ghost:focus {
10822
+ box-shadow: inset 0 0 0 1px var(--cds-inverse-02, #393939), inset 0 0 0 var(--cds-spacing-01, 0.125rem) #ffffff;
10823
+ }
10824
+ .c4p--coachmark-overlay__light .c4p--coachmark-overlay__handle:focus::before {
10825
+ border: 1px solid #ffffff;
10826
+ outline: 1px solid transparent;
10827
+ }
10828
+ .c4p--coachmark-overlay__light .c4p--coachmark-overlay--close-btn {
10829
+ border-color: transparent !important;
10830
+ border-radius: 0;
10831
+ outline: 1px solid transparent;
10832
+ }
10833
+ .c4p--coachmark-overlay__light .c4p--coachmark-overlay--close-btn:active {
10834
+ background-color: var(--cds-active-secondary, #6f6f6f);
10835
+ }
10836
+ .c4p--coachmark-overlay__light .c4p--coachmark-overlay--close-btn:focus {
10837
+ box-shadow: inset 0 0 0 1px var(--cds-inverse-02, #393939), inset 0 0 0 var(--cds-spacing-01, 0.125rem) #ffffff;
10838
+ }
10790
10839
  .c4p--coachmark-overlay__dark .c4p--coachmark-overlay__body .bx--link {
10791
10840
  color: #0062fe;
10792
10841
  }
@@ -10804,6 +10853,9 @@ th.c4p--datagrid__select-all-toggle-on.button {
10804
10853
  background-color: var(--cds-button-primary-active, #002d9c);
10805
10854
  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);
10806
10855
  }
10856
+ .c4p--coachmark-overlay__dark .c4p--coachmark-overlay__body .bx--btn--ghost {
10857
+ border-color: transparent;
10858
+ }
10807
10859
  .c4p--coachmark-overlay__dark .c4p--coachmark-overlay__body .bx--btn--ghost:hover {
10808
10860
  background-color: var(--cds-inverse-hover-ui, #4c4c4c);
10809
10861
  }
@@ -10811,7 +10863,20 @@ th.c4p--datagrid__select-all-toggle-on.button {
10811
10863
  background-color: var(--cds-button-tertiary-active, #002d9c);
10812
10864
  }
10813
10865
  .c4p--coachmark-overlay__dark .c4p--coachmark-overlay__body .bx--btn--ghost:focus {
10814
- 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);
10866
+ box-shadow: inset 0 0 0 1px #0f62fe, inset 0 0 0 var(--cds-spacing-01, 0.125rem) #ffffff;
10867
+ }
10868
+ .c4p--coachmark-overlay__dark .c4p--coachmark-overlay__handle:focus::before {
10869
+ border: 1px solid #ffffff;
10870
+ outline: 1px solid #0f62fe;
10871
+ }
10872
+ .c4p--coachmark-overlay__dark .c4p--coachmark-overlay--close-btn {
10873
+ border-color: transparent;
10874
+ }
10875
+ .c4p--coachmark-overlay__dark .c4p--coachmark-overlay--close-btn:focus {
10876
+ box-shadow: inset 0 0 0 1px #0f62fe, inset 0 0 0 var(--cds-spacing-01, 0.125rem) #ffffff;
10877
+ }
10878
+ .c4p--coachmark-overlay__dark .c4p--coachmark-overlay--close-btn:active {
10879
+ background-color: var(--cds-button-tertiary-active, #002d9c);
10815
10880
  }
10816
10881
  .c4p--coachmark-overlay .c4p--carousel__item {
10817
10882
  flex: 0 0 100% !important;
@@ -10888,6 +10953,10 @@ th.c4p--datagrid__select-all-toggle-on.button {
10888
10953
  line-height: var(--cds-body-short-01-line-height, 1.28572);
10889
10954
  letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
10890
10955
  }
10956
+ .c4p--coachmark-tagline__cta:focus {
10957
+ box-shadow: inset 0 0 0 3px #6929c4, inset 0 0 0 var(--cds-spacing-02, 0.25rem) #ffffff;
10958
+ outline: 1px solid transparent;
10959
+ }
10891
10960
  .c4p--coachmark-tagline__cta:hover {
10892
10961
  cursor: pointer !important;
10893
10962
  }
@@ -10897,8 +10966,17 @@ th.c4p--datagrid__select-all-toggle-on.button {
10897
10966
  .c4p--coachmark-tagline--close-btn {
10898
10967
  width: var(--cds-spacing-07, 2rem);
10899
10968
  height: var(--cds-spacing-07, 2rem);
10969
+ border-color: transparent !important;
10970
+ border-radius: 0;
10900
10971
  margin-left: auto !important;
10901
10972
  color: #ffffff;
10973
+ outline: 1px solid transparent;
10974
+ }
10975
+ .c4p--coachmark-tagline--close-btn:active {
10976
+ background-color: var(--cds-active-secondary, #6f6f6f);
10977
+ }
10978
+ .c4p--coachmark-tagline--close-btn:focus {
10979
+ box-shadow: inset 0 0 0 1px var(--cds-inverse-02, #393939), inset 0 0 0 var(--cds-spacing-01, 0.125rem) #ffffff !important;
10902
10980
  }
10903
10981
  .c4p--coachmark-tagline--close-btn svg > path {
10904
10982
  margin: 0;
@@ -10923,6 +11001,9 @@ th.c4p--datagrid__select-all-toggle-on.button {
10923
11001
  .c4p--coachmark-beacon {
10924
11002
  position: relative;
10925
11003
  }
11004
+ .c4p--coachmark-beacon-default .c4p--coachmark-beacon__target::before {
11005
+ display: none;
11006
+ }
10926
11007
  .c4p--coachmark-beacon-default .c4p--coachmark-beacon__target::after {
10927
11008
  position: absolute;
10928
11009
  top: calc(var(--cds-spacing-01, 0.125rem) + var(--cds-spacing-03, 0.5rem));
@@ -10933,6 +11014,20 @@ th.c4p--datagrid__select-all-toggle-on.button {
10933
11014
  background-color: #4589ff;
10934
11015
  content: "";
10935
11016
  }
11017
+ .c4p--coachmark-beacon-default .c4p--coachmark-beacon__target:focus {
11018
+ outline: transparent;
11019
+ }
11020
+ .c4p--coachmark-beacon-default .c4p--coachmark-beacon__target:focus::before {
11021
+ position: absolute;
11022
+ top: 7px;
11023
+ left: 7px;
11024
+ display: block;
11025
+ width: 18px;
11026
+ height: 18px;
11027
+ border-radius: 100%;
11028
+ content: "";
11029
+ outline: var(--cds-spacing-01, 0.125rem) var(--cds-focus, #0f62fe) solid;
11030
+ }
10936
11031
  .c4p--coachmark-beacon .c4p--coachmark-beacon__target {
10937
11032
  position: absolute;
10938
11033
  top: calc(-1 * var(--cds-spacing-05, 1rem));
@@ -11027,6 +11122,7 @@ th.c4p--datagrid__select-all-toggle-on.button {
11027
11122
  display: flex;
11028
11123
  align-items: center;
11029
11124
  justify-content: flex-end;
11125
+ padding: 0 var(--cds-spacing-05, 1rem) var(--cds-spacing-05, 1rem);
11030
11126
  }
11031
11127
  .c4p--coachmark-overlay-elements--controls-progress {
11032
11128
  margin-right: auto;
@@ -11036,6 +11132,9 @@ th.c4p--datagrid__select-all-toggle-on.button {
11036
11132
  letter-spacing: var(--cds-helper-text-01-letter-spacing, 0.32px);
11037
11133
  }
11038
11134
 
11135
+ .c4p--coachmark-overlay-element {
11136
+ padding: var(--cds-spacing-01, 0.125rem) var(--cds-spacing-05, 1rem) 0;
11137
+ }
11039
11138
  .c4p--coachmark-overlay-element__content {
11040
11139
  padding-bottom: var(--cds-spacing-05, 1rem);
11041
11140
  }
@@ -11067,6 +11166,7 @@ th.c4p--datagrid__select-all-toggle-on.button {
11067
11166
  right: var(--cds-spacing-05, 1rem);
11068
11167
  bottom: -100%;
11069
11168
  transform: translateY(100%);
11169
+ visibility: hidden;
11070
11170
  }
11071
11171
  .c4p--coachmark-stack-element--is-mounted {
11072
11172
  bottom: 0;
@@ -11081,6 +11181,7 @@ th.c4p--datagrid__select-all-toggle-on.button {
11081
11181
  .c4p--coachmark-stack-element--is-visible {
11082
11182
  opacity: 1;
11083
11183
  transform: translateY(0);
11184
+ visibility: visible;
11084
11185
  }
11085
11186
  .c4p--coachmark-stack-element--is-stacked {
11086
11187
  bottom: 0;
@@ -11088,6 +11189,7 @@ th.c4p--datagrid__select-all-toggle-on.button {
11088
11189
  pointer-events: none;
11089
11190
  transform: perspective(9rem) translate3d(0, calc(var(--cds-spacing-09, 3rem) * -1), calc(var(--cds-spacing-05, 1rem) * -1));
11090
11191
  transform-origin: top center;
11192
+ visibility: visible;
11091
11193
  }
11092
11194
  .c4p--coachmark-stack-element--is-stacked__light {
11093
11195
  background-color: #262626;
@@ -11268,6 +11370,7 @@ th.c4p--datagrid__select-all-toggle-on.button {
11268
11370
  .c4p--checklist__header {
11269
11371
  display: flex;
11270
11372
  padding: var(--cds-spacing-05, 1rem);
11373
+ border-top: 1px solid var(--cds-ui-03, #e0e0e0);
11271
11374
  background-color: var(--cds-ui-01, #f4f4f4);
11272
11375
  gap: var(--cds-spacing-03, 0.5rem);
11273
11376
  }
@@ -11370,9 +11473,6 @@ th.c4p--datagrid__select-all-toggle-on.button {
11370
11473
  color: var(--cds-text-primary, #161616);
11371
11474
  text-decoration: underline;
11372
11475
  }
11373
- .c4p--checklist__button--error {
11374
- color: var(--cds-text-error, #da1e28) !important;
11375
- }
11376
11476
  .c4p--checklist__content-outer {
11377
11477
  overflow: hidden;
11378
11478
  }
@@ -11417,13 +11517,15 @@ th.c4p--datagrid__select-all-toggle-on.button {
11417
11517
  .c4p--checklist__icon {
11418
11518
  /* stylelint-disable-next-line carbon/layout-token-use */
11419
11519
  margin: 0.0625rem var(--cds-spacing-03, 0.5rem) 0 0;
11520
+ }
11521
+ .c4p--checklist__icon--checked, .c4p--checklist__icon--indeterminate {
11420
11522
  color: var(--cds-link-01, #0f62fe);
11421
11523
  }
11422
11524
  .c4p--checklist__icon--error {
11423
11525
  color: var(--cds-support-error, #da1e28);
11424
11526
  }
11425
11527
  .c4p--checklist__icon--disabled {
11426
- color: var(--cds-disabled-03, #8d8d8d);
11528
+ color: var(--cds-disabled-02, #c6c6c6);
11427
11529
  }
11428
11530
  .c4p--checklist__label {
11429
11531
  font-size: var(--cds-body-short-01-font-size, 0.875rem);
@@ -11436,8 +11538,8 @@ th.c4p--datagrid__select-all-toggle-on.button {
11436
11538
  -webkit-line-clamp: 2;
11437
11539
  text-overflow: ellipsis;
11438
11540
  }
11439
- .c4p--checklist__label--checked, .c4p--checklist__label--disabled, .c4p--checklist__label--error {
11440
- color: var(--cds-disabled-03, #8d8d8d);
11541
+ .c4p--checklist__label--disabled {
11542
+ color: var(--cds-disabled-02, #c6c6c6);
11441
11543
  }
11442
11544
  .c4p--checklist__footer {
11443
11545
  display: -webkit-box;