@carbon/ibm-products 1.61.0 → 1.62.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
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;