@carbon/ibm-products 1.61.0 → 1.62.0

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 +154 -79
  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 +1753 -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 +154 -79
  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 +154 -79
  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/Coachmark/Coachmark.js +17 -5
  18. package/es/components/Coachmark/CoachmarkDragbar.js +12 -5
  19. package/es/components/Coachmark/CoachmarkHeader.js +2 -1
  20. package/es/components/Coachmark/CoachmarkOverlay.js +105 -9
  21. package/es/components/CoachmarkBeacon/CoachmarkBeacon.js +5 -2
  22. package/es/components/CoachmarkFixed/CoachmarkFixed.js +26 -6
  23. package/es/components/CoachmarkOverlayElements/CoachmarkOverlayElements.js +28 -3
  24. package/es/components/CoachmarkStack/CoachmarkStack.js +19 -4
  25. package/es/components/CoachmarkStack/CoachmarkStackHome.js +45 -11
  26. package/es/components/Datagrid/Datagrid/DatagridContent.js +12 -9
  27. package/es/components/Datagrid/Datagrid/DatagridExpandedRow.js +4 -4
  28. package/es/components/Datagrid/Datagrid/DatagridHeaderRow.js +45 -73
  29. package/es/components/Datagrid/Datagrid/DatagridRefBody.js +4 -1
  30. package/es/components/Datagrid/Datagrid/DatagridRow.js +5 -2
  31. package/es/components/Datagrid/Datagrid/DatagridSelectAll.js +12 -11
  32. package/es/components/Datagrid/Datagrid/DatagridSimpleBody.js +4 -1
  33. package/es/components/Datagrid/Datagrid/DatagridToolbar.js +29 -23
  34. package/es/components/Datagrid/Datagrid/DatagridVirtualBody.js +18 -18
  35. package/es/components/Datagrid/Datagrid/addons/stateReducer.js +73 -24
  36. package/es/components/Datagrid/Datagrid.stories/StickyActionsColumnStory.js +1 -1
  37. package/es/components/Datagrid/useActionsColumn.js +9 -9
  38. package/es/components/Datagrid/useColumnCenterAlign.js +6 -6
  39. package/es/components/Datagrid/useColumnRightAlign.js +6 -6
  40. package/es/components/Datagrid/useDatagrid.js +13 -1
  41. package/es/components/Datagrid/useFlexResize.js +19 -9
  42. package/es/components/Datagrid/useInfiniteScroll.js +10 -9
  43. package/es/components/Datagrid/useNestedRowExpander.js +10 -1
  44. package/es/components/Datagrid/useOnRowClick.js +6 -7
  45. package/es/components/Datagrid/useParentDimensions.js +6 -6
  46. package/es/components/Datagrid/useResizeTable.js +7 -7
  47. package/es/components/Datagrid/useRowExpander.js +11 -1
  48. package/es/components/Datagrid/useSelectAllToggle.js +2 -2
  49. package/es/components/Datagrid/useSelectRows.js +31 -21
  50. package/es/components/Datagrid/useSkeletonRows.js +6 -6
  51. package/es/components/Datagrid/useSortableColumns.js +5 -6
  52. package/es/components/Datagrid/useStickyColumn.js +13 -6
  53. package/es/components/EmptyStates/ErrorEmptyState/ErrorEmptyState.js +1 -0
  54. package/es/components/EmptyStates/NoDataEmptyState/NoDataEmptyState.js +1 -0
  55. package/es/components/EmptyStates/NoTagsEmptyState/NoTagsEmptyState.js +1 -0
  56. package/es/components/EmptyStates/NotFoundEmptyState/NotFoundEmptyState.js +1 -0
  57. package/es/components/EmptyStates/NotificationsEmptyState/NotificationsEmptyState.js +1 -0
  58. package/es/components/EmptyStates/UnauthorizedEmptyState/UnauthorizedEmptyState.js +1 -0
  59. package/es/components/EmptyStates/assets/ErrorIllustration.js +6 -4
  60. package/es/components/EmptyStates/assets/NoDataIllustration.js +6 -4
  61. package/es/components/EmptyStates/assets/NoTagsIllustration.js +6 -4
  62. package/es/components/EmptyStates/assets/NotFoundIllustration.js +6 -4
  63. package/es/components/EmptyStates/assets/NotificationsIllustration.js +6 -4
  64. package/es/components/EmptyStates/assets/UnauthorizedIllustration.js +6 -4
  65. package/es/components/Guidebanner/Guidebanner.js +3 -3
  66. package/es/components/Guidebanner/GuidebannerElement.js +9 -3
  67. package/es/components/Guidebanner/GuidebannerElementButton.js +9 -4
  68. package/es/components/Guidebanner/GuidebannerElementLink.js +9 -3
  69. package/es/components/InlineTip/InlineTipButton.js +7 -0
  70. package/es/components/InlineTip/InlineTipLink.js +7 -0
  71. package/es/components/index.js +2 -2
  72. package/es/global/js/hooks/index.js +3 -2
  73. package/es/global/js/hooks/usePrefix.js +11 -0
  74. package/es/global/js/package-settings.js +6 -2
  75. package/lib/components/Coachmark/Coachmark.js +16 -4
  76. package/lib/components/Coachmark/CoachmarkDragbar.js +12 -5
  77. package/lib/components/Coachmark/CoachmarkHeader.js +2 -1
  78. package/lib/components/Coachmark/CoachmarkOverlay.js +105 -8
  79. package/lib/components/CoachmarkBeacon/CoachmarkBeacon.js +5 -2
  80. package/lib/components/CoachmarkFixed/CoachmarkFixed.js +25 -5
  81. package/lib/components/CoachmarkOverlayElements/CoachmarkOverlayElements.js +28 -3
  82. package/lib/components/CoachmarkStack/CoachmarkStack.js +18 -3
  83. package/lib/components/CoachmarkStack/CoachmarkStackHome.js +44 -10
  84. package/lib/components/Datagrid/Datagrid/DatagridContent.js +12 -9
  85. package/lib/components/Datagrid/Datagrid/DatagridExpandedRow.js +4 -4
  86. package/lib/components/Datagrid/Datagrid/DatagridHeaderRow.js +44 -80
  87. package/lib/components/Datagrid/Datagrid/DatagridRefBody.js +4 -1
  88. package/lib/components/Datagrid/Datagrid/DatagridRow.js +5 -2
  89. package/lib/components/Datagrid/Datagrid/DatagridSelectAll.js +6 -4
  90. package/lib/components/Datagrid/Datagrid/DatagridSimpleBody.js +4 -1
  91. package/lib/components/Datagrid/Datagrid/DatagridToolbar.js +29 -23
  92. package/lib/components/Datagrid/Datagrid/DatagridVirtualBody.js +12 -12
  93. package/lib/components/Datagrid/Datagrid/addons/stateReducer.js +75 -33
  94. package/lib/components/Datagrid/Datagrid.stories/StickyActionsColumnStory.js +1 -1
  95. package/lib/components/Datagrid/useActionsColumn.js +9 -12
  96. package/lib/components/Datagrid/useDatagrid.js +13 -1
  97. package/lib/components/Datagrid/useFlexResize.js +19 -9
  98. package/lib/components/Datagrid/useInfiniteScroll.js +9 -9
  99. package/lib/components/Datagrid/useNestedRowExpander.js +10 -9
  100. package/lib/components/Datagrid/useOnRowClick.js +6 -7
  101. package/lib/components/Datagrid/useParentDimensions.js +5 -6
  102. package/lib/components/Datagrid/useResizeTable.js +6 -7
  103. package/lib/components/Datagrid/useRowExpander.js +11 -9
  104. package/lib/components/Datagrid/useSelectAllToggle.js +2 -2
  105. package/lib/components/Datagrid/useSelectRows.js +31 -21
  106. package/lib/components/Datagrid/useSkeletonRows.js +6 -6
  107. package/lib/components/Datagrid/useSortableColumns.js +5 -6
  108. package/lib/components/Datagrid/useStickyColumn.js +8 -0
  109. package/lib/components/EmptyStates/ErrorEmptyState/ErrorEmptyState.js +1 -0
  110. package/lib/components/EmptyStates/NoDataEmptyState/NoDataEmptyState.js +1 -0
  111. package/lib/components/EmptyStates/NoTagsEmptyState/NoTagsEmptyState.js +1 -0
  112. package/lib/components/EmptyStates/NotFoundEmptyState/NotFoundEmptyState.js +1 -0
  113. package/lib/components/EmptyStates/NotificationsEmptyState/NotificationsEmptyState.js +1 -0
  114. package/lib/components/EmptyStates/UnauthorizedEmptyState/UnauthorizedEmptyState.js +1 -0
  115. package/lib/components/EmptyStates/assets/ErrorIllustration.js +6 -4
  116. package/lib/components/EmptyStates/assets/NoDataIllustration.js +6 -4
  117. package/lib/components/EmptyStates/assets/NoTagsIllustration.js +6 -4
  118. package/lib/components/EmptyStates/assets/NotFoundIllustration.js +6 -4
  119. package/lib/components/EmptyStates/assets/NotificationsIllustration.js +6 -4
  120. package/lib/components/EmptyStates/assets/UnauthorizedIllustration.js +6 -4
  121. package/lib/components/Guidebanner/Guidebanner.js +3 -3
  122. package/lib/components/Guidebanner/GuidebannerElement.js +8 -1
  123. package/lib/components/Guidebanner/GuidebannerElementButton.js +8 -1
  124. package/lib/components/Guidebanner/GuidebannerElementLink.js +8 -1
  125. package/lib/components/InlineTip/InlineTipButton.js +8 -1
  126. package/lib/components/InlineTip/InlineTipLink.js +8 -1
  127. package/lib/components/index.js +30 -0
  128. package/lib/global/js/hooks/index.js +8 -1
  129. package/lib/global/js/hooks/usePrefix.js +19 -0
  130. package/lib/global/js/package-settings.js +6 -2
  131. package/package.json +2 -2
  132. package/scss/components/Checklist/_checklist.scss +13 -25
  133. package/scss/components/Coachmark/styles/_coachmark-dragbar.scss +1 -45
  134. package/scss/components/Coachmark/styles/_coachmark-header.scss +0 -33
  135. package/scss/components/Coachmark/styles/_coachmark-overlay.scss +113 -5
  136. package/scss/components/Coachmark/styles/_coachmark-tagline.scss +18 -0
  137. package/scss/components/CoachmarkBeacon/_coachmark-beacon.scss +16 -13
  138. package/scss/components/CoachmarkOverlayElement/_coachmark-overlay-element.scss +2 -0
  139. package/scss/components/CoachmarkOverlayElements/_coachmark-overlay-elements.scss +1 -0
  140. package/scss/components/CoachmarkStack/_coachmark-stack.scss +3 -0
  141. package/scss/components/Datagrid/_storybook-styles.scss +15 -0
  142. package/scss/components/Datagrid/styles/_datagrid.scss +31 -5
  143. package/scss/components/Datagrid/styles/_useNestedRows.scss +1 -1
  144. package/scss/components/_index-released-only.scss +1 -0
@@ -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;
@@ -10547,64 +10565,16 @@ th.c4p--datagrid__select-all-toggle-on.button {
10547
10565
  color: var(--cds-link-01, #0f62fe);
10548
10566
  }
10549
10567
 
10550
- /* stylelint-disable declaration-no-important */
10551
10568
  .c4p--coachmark-dragbar {
10552
10569
  display: flex;
10553
10570
  }
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
10571
  .c4p--coachmark-dragbar svg {
10583
10572
  color: var(--cds-inverse-01, #ffffff);
10584
10573
  }
10585
10574
 
10586
- /* stylelint-disable declaration-no-important */
10587
10575
  .c4p--coachmark-header {
10588
10576
  display: flex;
10589
10577
  }
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
10578
 
10609
10579
  /* stylelint-disable carbon/layout-token-use */
10610
10580
  /* stylelint-disable carbon/theme-token-use */
@@ -10616,7 +10586,7 @@ th.c4p--datagrid__select-all-toggle-on.button {
10616
10586
  border-radius: var(--cds-spacing-01, 0.125rem);
10617
10587
  background-color: var(--cds-inverse-02, #393939);
10618
10588
  color: var(--cds-inverse-01, #ffffff);
10619
- /* ------------------ */
10589
+ visibility: hidden;
10620
10590
  }
10621
10591
  .c4p--coachmark-overlay--fixed {
10622
10592
  position: fixed;
@@ -10631,8 +10601,14 @@ th.c4p--datagrid__select-all-toggle-on.button {
10631
10601
  transition: none;
10632
10602
  }
10633
10603
  }
10604
+ .c4p--coachmark-overlay--is-dragmode {
10605
+ border-radius: 0;
10606
+ box-shadow: 0 0 0 var(--cds-spacing-02, 0.25rem) var(--cds-inverse-02, #393939);
10607
+ outline: var(--cds-spacing-01, 0.125rem) solid var(--cds-inverse-01, #ffffff);
10608
+ }
10634
10609
  .c4p--coachmark-overlay--is-visible {
10635
10610
  transform: translateY(0);
10611
+ visibility: visible;
10636
10612
  }
10637
10613
  .c4p--coachmark-overlay__caret {
10638
10614
  position: absolute;
@@ -10737,9 +10713,6 @@ th.c4p--datagrid__select-all-toggle-on.button {
10737
10713
  height: calc(var(--cds-spacing-07, 2rem) + var(--cds-spacing-12, 6rem));
10738
10714
  margin-bottom: var(--cds-spacing-05, 1rem);
10739
10715
  }
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
10716
  .c4p--coachmark-overlay__body .bx--btn--ghost {
10744
10717
  color: var(--cds-inverse-link, #78a9ff);
10745
10718
  }
@@ -10764,6 +10737,45 @@ th.c4p--datagrid__select-all-toggle-on.button {
10764
10737
  letter-spacing: var(--cds-productive-heading-02-letter-spacing, 0);
10765
10738
  order: 1;
10766
10739
  }
10740
+ .c4p--coachmark-overlay__handle {
10741
+ position: relative;
10742
+ flex-grow: 1;
10743
+ padding: var(--cds-spacing-02, 0.25rem) 0 0 var(--cds-spacing-03, 0.5rem);
10744
+ border: 0;
10745
+ background-color: transparent;
10746
+ text-align: left;
10747
+ }
10748
+ .c4p--coachmark-overlay__handle::before {
10749
+ position: absolute;
10750
+ top: var(--cds-spacing-01, 0.125rem);
10751
+ left: var(--cds-spacing-01, 0.125rem);
10752
+ width: calc(var(--cds-spacing-06, 1.5rem) + var(--cds-spacing-01, 0.125rem));
10753
+ height: calc(var(--cds-spacing-06, 1.5rem) + var(--cds-spacing-01, 0.125rem));
10754
+ content: "";
10755
+ }
10756
+ .c4p--coachmark-overlay__handle:hover {
10757
+ cursor: move;
10758
+ }
10759
+ .c4p--coachmark-overlay__handle:focus {
10760
+ border: none;
10761
+ outline: none;
10762
+ }
10763
+ .c4p--coachmark-overlay__handle:focus::before {
10764
+ border: 1px solid var(--cds-inverse-01, #ffffff);
10765
+ outline: 1px solid #0f62fe;
10766
+ }
10767
+ .c4p--coachmark-overlay--close-btn {
10768
+ width: var(--cds-spacing-07, 2rem);
10769
+ height: var(--cds-spacing-07, 2rem);
10770
+ margin-left: auto !important;
10771
+ }
10772
+ .c4p--coachmark-overlay--close-btn svg > path {
10773
+ margin: 0;
10774
+ fill: var(--cds-inverse-01, #ffffff) !important;
10775
+ }
10776
+ .c4p--coachmark-overlay--close-btn:hover {
10777
+ background-color: var(--cds-inverse-hover-ui, #4c4c4c) !important;
10778
+ }
10767
10779
  .c4p--coachmark-overlay__footer {
10768
10780
  display: flex;
10769
10781
  align-items: center;
@@ -10781,12 +10793,35 @@ th.c4p--datagrid__select-all-toggle-on.button {
10781
10793
  .c4p--coachmark-overlay__light .c4p--coachmark-overlay__body .bx--link:focus {
10782
10794
  outline-color: var(--cds-text-04, #ffffff);
10783
10795
  }
10796
+ .c4p--coachmark-overlay__light .c4p--coachmark-overlay__body .bx--btn--ghost {
10797
+ border-color: transparent !important;
10798
+ border-radius: 0;
10799
+ outline: 1px solid transparent;
10800
+ }
10784
10801
  .c4p--coachmark-overlay__light .c4p--coachmark-overlay__body .bx--btn--ghost:hover {
10785
10802
  background-color: var(--cds-inverse-hover-ui, #4c4c4c);
10786
10803
  }
10787
10804
  .c4p--coachmark-overlay__light .c4p--coachmark-overlay__body .bx--btn--ghost:active {
10788
10805
  background-color: var(--cds-active-secondary, #6f6f6f);
10789
10806
  }
10807
+ .c4p--coachmark-overlay__light .c4p--coachmark-overlay__body .bx--btn--ghost:focus {
10808
+ box-shadow: inset 0 0 0 1px var(--cds-inverse-02, #393939), inset 0 0 0 var(--cds-spacing-01, 0.125rem) #ffffff;
10809
+ }
10810
+ .c4p--coachmark-overlay__light .c4p--coachmark-overlay__handle:focus::before {
10811
+ border: 1px solid #ffffff;
10812
+ outline: 1px solid transparent;
10813
+ }
10814
+ .c4p--coachmark-overlay__light .c4p--coachmark-overlay--close-btn {
10815
+ border-color: transparent !important;
10816
+ border-radius: 0;
10817
+ outline: 1px solid transparent;
10818
+ }
10819
+ .c4p--coachmark-overlay__light .c4p--coachmark-overlay--close-btn:active {
10820
+ background-color: var(--cds-active-secondary, #6f6f6f);
10821
+ }
10822
+ .c4p--coachmark-overlay__light .c4p--coachmark-overlay--close-btn:focus {
10823
+ box-shadow: inset 0 0 0 1px var(--cds-inverse-02, #393939), inset 0 0 0 var(--cds-spacing-01, 0.125rem) #ffffff;
10824
+ }
10790
10825
  .c4p--coachmark-overlay__dark .c4p--coachmark-overlay__body .bx--link {
10791
10826
  color: #0062fe;
10792
10827
  }
@@ -10804,6 +10839,9 @@ th.c4p--datagrid__select-all-toggle-on.button {
10804
10839
  background-color: var(--cds-button-primary-active, #002d9c);
10805
10840
  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
10841
  }
10842
+ .c4p--coachmark-overlay__dark .c4p--coachmark-overlay__body .bx--btn--ghost {
10843
+ border-color: transparent;
10844
+ }
10807
10845
  .c4p--coachmark-overlay__dark .c4p--coachmark-overlay__body .bx--btn--ghost:hover {
10808
10846
  background-color: var(--cds-inverse-hover-ui, #4c4c4c);
10809
10847
  }
@@ -10811,7 +10849,20 @@ th.c4p--datagrid__select-all-toggle-on.button {
10811
10849
  background-color: var(--cds-button-tertiary-active, #002d9c);
10812
10850
  }
10813
10851
  .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);
10852
+ box-shadow: inset 0 0 0 1px #0f62fe, inset 0 0 0 var(--cds-spacing-01, 0.125rem) #ffffff;
10853
+ }
10854
+ .c4p--coachmark-overlay__dark .c4p--coachmark-overlay__handle:focus::before {
10855
+ border: 1px solid #ffffff;
10856
+ outline: 1px solid #0f62fe;
10857
+ }
10858
+ .c4p--coachmark-overlay__dark .c4p--coachmark-overlay--close-btn {
10859
+ border-color: transparent;
10860
+ }
10861
+ .c4p--coachmark-overlay__dark .c4p--coachmark-overlay--close-btn:focus {
10862
+ box-shadow: inset 0 0 0 1px #0f62fe, inset 0 0 0 var(--cds-spacing-01, 0.125rem) #ffffff;
10863
+ }
10864
+ .c4p--coachmark-overlay__dark .c4p--coachmark-overlay--close-btn:active {
10865
+ background-color: var(--cds-button-tertiary-active, #002d9c);
10815
10866
  }
10816
10867
  .c4p--coachmark-overlay .c4p--carousel__item {
10817
10868
  flex: 0 0 100% !important;
@@ -10888,6 +10939,10 @@ th.c4p--datagrid__select-all-toggle-on.button {
10888
10939
  line-height: var(--cds-body-short-01-line-height, 1.28572);
10889
10940
  letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
10890
10941
  }
10942
+ .c4p--coachmark-tagline__cta:focus {
10943
+ box-shadow: inset 0 0 0 3px #6929c4, inset 0 0 0 var(--cds-spacing-02, 0.25rem) #ffffff;
10944
+ outline: 1px solid transparent;
10945
+ }
10891
10946
  .c4p--coachmark-tagline__cta:hover {
10892
10947
  cursor: pointer !important;
10893
10948
  }
@@ -10897,8 +10952,17 @@ th.c4p--datagrid__select-all-toggle-on.button {
10897
10952
  .c4p--coachmark-tagline--close-btn {
10898
10953
  width: var(--cds-spacing-07, 2rem);
10899
10954
  height: var(--cds-spacing-07, 2rem);
10955
+ border-color: transparent !important;
10956
+ border-radius: 0;
10900
10957
  margin-left: auto !important;
10901
10958
  color: #ffffff;
10959
+ outline: 1px solid transparent;
10960
+ }
10961
+ .c4p--coachmark-tagline--close-btn:active {
10962
+ background-color: var(--cds-active-secondary, #6f6f6f);
10963
+ }
10964
+ .c4p--coachmark-tagline--close-btn:focus {
10965
+ 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
10966
  }
10903
10967
  .c4p--coachmark-tagline--close-btn svg > path {
10904
10968
  margin: 0;
@@ -10923,6 +10987,9 @@ th.c4p--datagrid__select-all-toggle-on.button {
10923
10987
  .c4p--coachmark-beacon {
10924
10988
  position: relative;
10925
10989
  }
10990
+ .c4p--coachmark-beacon-default .c4p--coachmark-beacon__target::before {
10991
+ display: none;
10992
+ }
10926
10993
  .c4p--coachmark-beacon-default .c4p--coachmark-beacon__target::after {
10927
10994
  position: absolute;
10928
10995
  top: calc(var(--cds-spacing-01, 0.125rem) + var(--cds-spacing-03, 0.5rem));
@@ -10933,18 +11000,19 @@ th.c4p--datagrid__select-all-toggle-on.button {
10933
11000
  background-color: #4589ff;
10934
11001
  content: "";
10935
11002
  }
10936
- .c4p--coachmark-beacon-ring .c4p--coachmark-beacon__center {
10937
- -webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='80px' height='80px' viewBox='008080'><pathfill='white' stroke='none' d='M0,0m37-2a404001010Zm128a1212011-10Z'/></svg>");
10938
- mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='80px' height='80px' viewBox='008080'><pathfill='white' stroke='none' d='M0,0m37-2a404001010Zm128a1212011-10Z'/></svg>");
10939
- }
10940
- .c4p--coachmark-beacon-ring .c4p--coachmark-beacon__center circle {
10941
- /* stylelint-disable-next-line carbon/motion-easing-use */
10942
- animation: ring-ripple 2s infinite;
11003
+ .c4p--coachmark-beacon-default .c4p--coachmark-beacon__target:focus {
11004
+ outline: transparent;
10943
11005
  }
10944
- @media (prefers-reduced-motion) {
10945
- .c4p--coachmark-beacon-ring .c4p--coachmark-beacon__center circle {
10946
- animation: none;
10947
- }
11006
+ .c4p--coachmark-beacon-default .c4p--coachmark-beacon__target:focus::before {
11007
+ position: absolute;
11008
+ top: 7px;
11009
+ left: 7px;
11010
+ display: block;
11011
+ width: 18px;
11012
+ height: 18px;
11013
+ border-radius: 100%;
11014
+ content: "";
11015
+ outline: var(--cds-spacing-01, 0.125rem) var(--cds-focus, #0f62fe) solid;
10948
11016
  }
10949
11017
  .c4p--coachmark-beacon .c4p--coachmark-beacon__target {
10950
11018
  position: absolute;
@@ -11040,6 +11108,7 @@ th.c4p--datagrid__select-all-toggle-on.button {
11040
11108
  display: flex;
11041
11109
  align-items: center;
11042
11110
  justify-content: flex-end;
11111
+ padding: 0 var(--cds-spacing-05, 1rem) var(--cds-spacing-05, 1rem);
11043
11112
  }
11044
11113
  .c4p--coachmark-overlay-elements--controls-progress {
11045
11114
  margin-right: auto;
@@ -11049,6 +11118,9 @@ th.c4p--datagrid__select-all-toggle-on.button {
11049
11118
  letter-spacing: var(--cds-helper-text-01-letter-spacing, 0.32px);
11050
11119
  }
11051
11120
 
11121
+ .c4p--coachmark-overlay-element {
11122
+ padding: var(--cds-spacing-01, 0.125rem) var(--cds-spacing-05, 1rem) 0;
11123
+ }
11052
11124
  .c4p--coachmark-overlay-element__content {
11053
11125
  padding-bottom: var(--cds-spacing-05, 1rem);
11054
11126
  }
@@ -11080,6 +11152,7 @@ th.c4p--datagrid__select-all-toggle-on.button {
11080
11152
  right: var(--cds-spacing-05, 1rem);
11081
11153
  bottom: -100%;
11082
11154
  transform: translateY(100%);
11155
+ visibility: hidden;
11083
11156
  }
11084
11157
  .c4p--coachmark-stack-element--is-mounted {
11085
11158
  bottom: 0;
@@ -11094,6 +11167,7 @@ th.c4p--datagrid__select-all-toggle-on.button {
11094
11167
  .c4p--coachmark-stack-element--is-visible {
11095
11168
  opacity: 1;
11096
11169
  transform: translateY(0);
11170
+ visibility: visible;
11097
11171
  }
11098
11172
  .c4p--coachmark-stack-element--is-stacked {
11099
11173
  bottom: 0;
@@ -11101,6 +11175,7 @@ th.c4p--datagrid__select-all-toggle-on.button {
11101
11175
  pointer-events: none;
11102
11176
  transform: perspective(9rem) translate3d(0, calc(var(--cds-spacing-09, 3rem) * -1), calc(var(--cds-spacing-05, 1rem) * -1));
11103
11177
  transform-origin: top center;
11178
+ visibility: visible;
11104
11179
  }
11105
11180
  .c4p--coachmark-stack-element--is-stacked__light {
11106
11181
  background-color: #262626;
@@ -11281,6 +11356,7 @@ th.c4p--datagrid__select-all-toggle-on.button {
11281
11356
  .c4p--checklist__header {
11282
11357
  display: flex;
11283
11358
  padding: var(--cds-spacing-05, 1rem);
11359
+ border-top: 1px solid var(--cds-ui-03, #e0e0e0);
11284
11360
  background-color: var(--cds-ui-01, #f4f4f4);
11285
11361
  gap: var(--cds-spacing-03, 0.5rem);
11286
11362
  }
@@ -11383,9 +11459,6 @@ th.c4p--datagrid__select-all-toggle-on.button {
11383
11459
  color: var(--cds-text-primary, #161616);
11384
11460
  text-decoration: underline;
11385
11461
  }
11386
- .c4p--checklist__button--error {
11387
- color: var(--cds-text-error, #da1e28) !important;
11388
- }
11389
11462
  .c4p--checklist__content-outer {
11390
11463
  overflow: hidden;
11391
11464
  }
@@ -11430,13 +11503,15 @@ th.c4p--datagrid__select-all-toggle-on.button {
11430
11503
  .c4p--checklist__icon {
11431
11504
  /* stylelint-disable-next-line carbon/layout-token-use */
11432
11505
  margin: 0.0625rem var(--cds-spacing-03, 0.5rem) 0 0;
11506
+ }
11507
+ .c4p--checklist__icon--checked, .c4p--checklist__icon--indeterminate {
11433
11508
  color: var(--cds-link-01, #0f62fe);
11434
11509
  }
11435
11510
  .c4p--checklist__icon--error {
11436
11511
  color: var(--cds-support-error, #da1e28);
11437
11512
  }
11438
11513
  .c4p--checklist__icon--disabled {
11439
- color: var(--cds-disabled-03, #8d8d8d);
11514
+ color: var(--cds-disabled-02, #c6c6c6);
11440
11515
  }
11441
11516
  .c4p--checklist__label {
11442
11517
  font-size: var(--cds-body-short-01-font-size, 0.875rem);
@@ -11449,8 +11524,8 @@ th.c4p--datagrid__select-all-toggle-on.button {
11449
11524
  -webkit-line-clamp: 2;
11450
11525
  text-overflow: ellipsis;
11451
11526
  }
11452
- .c4p--checklist__label--checked, .c4p--checklist__label--disabled, .c4p--checklist__label--error {
11453
- color: var(--cds-disabled-03, #8d8d8d);
11527
+ .c4p--checklist__label--disabled {
11528
+ color: var(--cds-disabled-02, #c6c6c6);
11454
11529
  }
11455
11530
  .c4p--checklist__footer {
11456
11531
  display: -webkit-box;