@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
@@ -21101,34 +21101,34 @@ button.c4p--add-select__global-filter-toggle--open {
21101
21101
  align-items: center;
21102
21102
  padding-top: 0;
21103
21103
  }
21104
- .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 {
21104
+ .c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-center.c4p--datagrid__variable-row-height.bx--data-table--xs .c4p--datagrid__cell {
21105
21105
  padding-top: var(--cds-spacing-01, 0.125rem);
21106
21106
  padding-bottom: var(--cds-spacing-01, 0.125rem);
21107
21107
  }
21108
- .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 {
21108
+ .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 {
21109
21109
  /* stylelint-disable-next-line carbon/layout-token-use */
21110
21110
  padding-top: 0.4375rem;
21111
21111
  /* stylelint-disable-next-line carbon/layout-token-use */
21112
21112
  padding-bottom: 0.375rem;
21113
21113
  }
21114
- .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 {
21114
+ .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 {
21115
21115
  padding-top: var(--cds-spacing-05, 1rem);
21116
21116
  padding-bottom: var(--cds-spacing-05, 1rem);
21117
21117
  }
21118
- .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 {
21118
+ .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 {
21119
21119
  padding-top: var(--cds-spacing-05, 1rem);
21120
21120
  }
21121
- .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 {
21121
+ .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 {
21122
21122
  padding-top: var(--cds-spacing-05, 1rem);
21123
21123
  }
21124
- .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 {
21124
+ .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 {
21125
21125
  /* stylelint-disable-next-line carbon/layout-token-use */
21126
21126
  padding-top: 0.8125rem;
21127
21127
  }
21128
- .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 {
21128
+ .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 {
21129
21129
  padding-bottom: var(--cds-spacing-05, 1rem);
21130
21130
  }
21131
- .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 {
21131
+ .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 {
21132
21132
  padding-bottom: var(--cds-spacing-05, 1rem);
21133
21133
  }
21134
21134
  .c4p--datagrid__grid-container table.c4p--datagrid__variable-row-height tr.c4p--datagrid__carbon-row {
@@ -21291,6 +21291,10 @@ button.c4p--add-select__global-filter-toggle--open {
21291
21291
  background-color: var(--cds-hover-selected-ui, #cacaca);
21292
21292
  }
21293
21293
 
21294
+ .c4p--datagrid__grid-container table.c4p--datagrid__table-simple.bx--data-table.c4p--datagrid__table-is-resizing {
21295
+ overflow-y: hidden;
21296
+ }
21297
+
21294
21298
  .c4p--datagrid__resizableColumn.c4p--datagrid__isResizing .c4p--datagrid__resizer {
21295
21299
  border-right: var(--cds-spacing-01, 0.125rem) solid var(--cds-hover-secondary, #4c4c4c);
21296
21300
  }
@@ -21306,6 +21310,20 @@ button.c4p--add-select__global-filter-toggle--open {
21306
21310
  background-color: var(--cds-hover-selected-ui, #cacaca);
21307
21311
  }
21308
21312
 
21313
+ .c4p--datagrid__header-actions-column:hover {
21314
+ background-color: var(--cds-layer-accent, #e0e0e0);
21315
+ }
21316
+
21317
+ .c4p--datagrid .c4p--datagrid__carbon-row .c4p--datagrid__actions-column-cell-non-sticky .bx--overflow-menu {
21318
+ opacity: 0;
21319
+ }
21320
+
21321
+ .c4p--datagrid .c4p--datagrid__carbon-row:hover .c4p--datagrid__actions-column-cell-non-sticky .bx--overflow-menu,
21322
+ .c4p--datagrid .c4p--datagrid__carbon-row .c4p--datagrid__actions-column-cell-non-sticky .bx--overflow-menu:focus,
21323
+ .c4p--datagrid .c4p--datagrid__carbon-row .c4p--datagrid__actions-column-cell-non-sticky .bx--overflow-menu[aria-expanded=true] {
21324
+ opacity: 1;
21325
+ }
21326
+
21309
21327
  .c4p--datagrid__head-hidden-select-all {
21310
21328
  padding-right: var(--cds-spacing-09, 3rem);
21311
21329
  }
@@ -21662,7 +21680,7 @@ button.c4p--add-select__global-filter-toggle--open {
21662
21680
  position: relative;
21663
21681
  }
21664
21682
 
21665
- .c4p--datagrid tr.c4p--datagrid__carbon-nested-row + :not(tr.c4p--datagrid__carbon-nested-row)::before {
21683
+ .c4p--datagrid tr.c4p--datagrid__carbon-nested-row + :not(tr.c4p--datagrid__carbon-nested-row)::after {
21666
21684
  position: absolute;
21667
21685
  /* stylelint-disable-next-line carbon/layout-token-use */
21668
21686
  top: -1px;
@@ -24979,64 +24997,16 @@ th.c4p--datagrid__select-all-toggle-on.button {
24979
24997
  color: var(--cds-link-01, #0f62fe);
24980
24998
  }
24981
24999
 
24982
- /* stylelint-disable declaration-no-important */
24983
25000
  .c4p--coachmark-dragbar {
24984
25001
  display: flex;
24985
25002
  }
24986
- .c4p--coachmark-dragbar__handle {
24987
- flex-grow: 1;
24988
- padding: var(--cds-spacing-03, 0.5rem) 0 0 var(--cds-spacing-03, 0.5rem);
24989
- border: 0;
24990
- background-color: transparent;
24991
- text-align: left;
24992
- }
24993
- .c4p--coachmark-dragbar__handle:hover {
24994
- cursor: move;
24995
- }
24996
- .c4p--coachmark-dragbar--close-btn {
24997
- width: var(--cds-spacing-07, 2rem);
24998
- height: var(--cds-spacing-07, 2rem);
24999
- margin-left: auto !important;
25000
- }
25001
- .c4p--coachmark-dragbar--close-btn svg > path {
25002
- margin: 0;
25003
- fill: var(--cds-inverse-01, #ffffff) !important;
25004
- }
25005
- .c4p--coachmark-dragbar--close-btn:hover {
25006
- background-color: var(--cds-inverse-hover-ui, #4c4c4c) !important;
25007
- }
25008
- .c4p--coachmark-dragbar__light c4p--coachmark-dragbar--close-btn:active {
25009
- background-color: var(--cds-active-secondary, #6f6f6f);
25010
- }
25011
- .c4p--coachmark-dragbar__dark c4p--coachmark-dragbar--close-btn:active {
25012
- background-color: var(--cds-button-tertiary-active, #002d9c);
25013
- }
25014
25003
  .c4p--coachmark-dragbar svg {
25015
25004
  color: var(--cds-inverse-01, #ffffff);
25016
25005
  }
25017
25006
 
25018
- /* stylelint-disable declaration-no-important */
25019
25007
  .c4p--coachmark-header {
25020
25008
  display: flex;
25021
25009
  }
25022
- .c4p--coachmark-header--close-btn {
25023
- width: var(--cds-spacing-07, 2rem);
25024
- height: var(--cds-spacing-07, 2rem);
25025
- margin-left: auto !important;
25026
- }
25027
- .c4p--coachmark-header--close-btn svg > path {
25028
- margin: 0;
25029
- fill: var(--cds-inverse-01, #ffffff) !important;
25030
- }
25031
- .c4p--coachmark-header--close-btn:hover {
25032
- background-color: var(--cds-inverse-hover-ui, #4c4c4c) !important;
25033
- }
25034
- .c4p--coachmark-header__light c4p--coachmark-header--close-btn:active {
25035
- background-color: var(--cds-active-secondary, #6f6f6f);
25036
- }
25037
- .c4p--coachmark-header__dark c4p--coachmark-header--close-btn:active {
25038
- background-color: var(--cds-button-tertiary-active, #002d9c);
25039
- }
25040
25010
 
25041
25011
  /* stylelint-disable carbon/layout-token-use */
25042
25012
  /* stylelint-disable carbon/theme-token-use */
@@ -25048,7 +25018,7 @@ th.c4p--datagrid__select-all-toggle-on.button {
25048
25018
  border-radius: var(--cds-spacing-01, 0.125rem);
25049
25019
  background-color: var(--cds-inverse-02, #393939);
25050
25020
  color: var(--cds-inverse-01, #ffffff);
25051
- /* ------------------ */
25021
+ visibility: hidden;
25052
25022
  }
25053
25023
  .c4p--coachmark-overlay--fixed {
25054
25024
  position: fixed;
@@ -25063,8 +25033,14 @@ th.c4p--datagrid__select-all-toggle-on.button {
25063
25033
  transition: none;
25064
25034
  }
25065
25035
  }
25036
+ .c4p--coachmark-overlay--is-dragmode {
25037
+ border-radius: 0;
25038
+ box-shadow: 0 0 0 var(--cds-spacing-02, 0.25rem) var(--cds-inverse-02, #393939);
25039
+ outline: var(--cds-spacing-01, 0.125rem) solid var(--cds-inverse-01, #ffffff);
25040
+ }
25066
25041
  .c4p--coachmark-overlay--is-visible {
25067
25042
  transform: translateY(0);
25043
+ visibility: visible;
25068
25044
  }
25069
25045
  .c4p--coachmark-overlay__caret {
25070
25046
  position: absolute;
@@ -25169,9 +25145,6 @@ th.c4p--datagrid__select-all-toggle-on.button {
25169
25145
  height: calc(var(--cds-spacing-07, 2rem) + var(--cds-spacing-12, 6rem));
25170
25146
  margin-bottom: var(--cds-spacing-05, 1rem);
25171
25147
  }
25172
- .c4p--coachmark-overlay__body {
25173
- padding: var(--cds-spacing-01, 0.125rem) var(--cds-spacing-05, 1rem) var(--cds-spacing-05, 1rem);
25174
- }
25175
25148
  .c4p--coachmark-overlay__body .bx--btn--ghost {
25176
25149
  color: var(--cds-inverse-link, #78a9ff);
25177
25150
  }
@@ -25196,6 +25169,45 @@ th.c4p--datagrid__select-all-toggle-on.button {
25196
25169
  letter-spacing: var(--cds-productive-heading-02-letter-spacing, 0);
25197
25170
  order: 1;
25198
25171
  }
25172
+ .c4p--coachmark-overlay__handle {
25173
+ position: relative;
25174
+ flex-grow: 1;
25175
+ padding: var(--cds-spacing-02, 0.25rem) 0 0 var(--cds-spacing-03, 0.5rem);
25176
+ border: 0;
25177
+ background-color: transparent;
25178
+ text-align: left;
25179
+ }
25180
+ .c4p--coachmark-overlay__handle::before {
25181
+ position: absolute;
25182
+ top: var(--cds-spacing-01, 0.125rem);
25183
+ left: var(--cds-spacing-01, 0.125rem);
25184
+ width: calc(var(--cds-spacing-06, 1.5rem) + var(--cds-spacing-01, 0.125rem));
25185
+ height: calc(var(--cds-spacing-06, 1.5rem) + var(--cds-spacing-01, 0.125rem));
25186
+ content: "";
25187
+ }
25188
+ .c4p--coachmark-overlay__handle:hover {
25189
+ cursor: move;
25190
+ }
25191
+ .c4p--coachmark-overlay__handle:focus {
25192
+ border: none;
25193
+ outline: none;
25194
+ }
25195
+ .c4p--coachmark-overlay__handle:focus::before {
25196
+ border: 1px solid var(--cds-inverse-01, #ffffff);
25197
+ outline: 1px solid #0f62fe;
25198
+ }
25199
+ .c4p--coachmark-overlay--close-btn {
25200
+ width: var(--cds-spacing-07, 2rem);
25201
+ height: var(--cds-spacing-07, 2rem);
25202
+ margin-left: auto !important;
25203
+ }
25204
+ .c4p--coachmark-overlay--close-btn svg > path {
25205
+ margin: 0;
25206
+ fill: var(--cds-inverse-01, #ffffff) !important;
25207
+ }
25208
+ .c4p--coachmark-overlay--close-btn:hover {
25209
+ background-color: var(--cds-inverse-hover-ui, #4c4c4c) !important;
25210
+ }
25199
25211
  .c4p--coachmark-overlay__footer {
25200
25212
  display: flex;
25201
25213
  align-items: center;
@@ -25213,12 +25225,35 @@ th.c4p--datagrid__select-all-toggle-on.button {
25213
25225
  .c4p--coachmark-overlay__light .c4p--coachmark-overlay__body .bx--link:focus {
25214
25226
  outline-color: var(--cds-text-04, #ffffff);
25215
25227
  }
25228
+ .c4p--coachmark-overlay__light .c4p--coachmark-overlay__body .bx--btn--ghost {
25229
+ border-color: transparent !important;
25230
+ border-radius: 0;
25231
+ outline: 1px solid transparent;
25232
+ }
25216
25233
  .c4p--coachmark-overlay__light .c4p--coachmark-overlay__body .bx--btn--ghost:hover {
25217
25234
  background-color: var(--cds-inverse-hover-ui, #4c4c4c);
25218
25235
  }
25219
25236
  .c4p--coachmark-overlay__light .c4p--coachmark-overlay__body .bx--btn--ghost:active {
25220
25237
  background-color: var(--cds-active-secondary, #6f6f6f);
25221
25238
  }
25239
+ .c4p--coachmark-overlay__light .c4p--coachmark-overlay__body .bx--btn--ghost:focus {
25240
+ box-shadow: inset 0 0 0 1px var(--cds-inverse-02, #393939), inset 0 0 0 var(--cds-spacing-01, 0.125rem) #ffffff;
25241
+ }
25242
+ .c4p--coachmark-overlay__light .c4p--coachmark-overlay__handle:focus::before {
25243
+ border: 1px solid #ffffff;
25244
+ outline: 1px solid transparent;
25245
+ }
25246
+ .c4p--coachmark-overlay__light .c4p--coachmark-overlay--close-btn {
25247
+ border-color: transparent !important;
25248
+ border-radius: 0;
25249
+ outline: 1px solid transparent;
25250
+ }
25251
+ .c4p--coachmark-overlay__light .c4p--coachmark-overlay--close-btn:active {
25252
+ background-color: var(--cds-active-secondary, #6f6f6f);
25253
+ }
25254
+ .c4p--coachmark-overlay__light .c4p--coachmark-overlay--close-btn:focus {
25255
+ box-shadow: inset 0 0 0 1px var(--cds-inverse-02, #393939), inset 0 0 0 var(--cds-spacing-01, 0.125rem) #ffffff;
25256
+ }
25222
25257
  .c4p--coachmark-overlay__dark .c4p--coachmark-overlay__body .bx--link {
25223
25258
  color: #0062fe;
25224
25259
  }
@@ -25236,6 +25271,9 @@ th.c4p--datagrid__select-all-toggle-on.button {
25236
25271
  background-color: var(--cds-button-primary-active, #002d9c);
25237
25272
  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);
25238
25273
  }
25274
+ .c4p--coachmark-overlay__dark .c4p--coachmark-overlay__body .bx--btn--ghost {
25275
+ border-color: transparent;
25276
+ }
25239
25277
  .c4p--coachmark-overlay__dark .c4p--coachmark-overlay__body .bx--btn--ghost:hover {
25240
25278
  background-color: var(--cds-inverse-hover-ui, #4c4c4c);
25241
25279
  }
@@ -25243,7 +25281,20 @@ th.c4p--datagrid__select-all-toggle-on.button {
25243
25281
  background-color: var(--cds-button-tertiary-active, #002d9c);
25244
25282
  }
25245
25283
  .c4p--coachmark-overlay__dark .c4p--coachmark-overlay__body .bx--btn--ghost:focus {
25246
- 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);
25284
+ box-shadow: inset 0 0 0 1px #0f62fe, inset 0 0 0 var(--cds-spacing-01, 0.125rem) #ffffff;
25285
+ }
25286
+ .c4p--coachmark-overlay__dark .c4p--coachmark-overlay__handle:focus::before {
25287
+ border: 1px solid #ffffff;
25288
+ outline: 1px solid #0f62fe;
25289
+ }
25290
+ .c4p--coachmark-overlay__dark .c4p--coachmark-overlay--close-btn {
25291
+ border-color: transparent;
25292
+ }
25293
+ .c4p--coachmark-overlay__dark .c4p--coachmark-overlay--close-btn:focus {
25294
+ box-shadow: inset 0 0 0 1px #0f62fe, inset 0 0 0 var(--cds-spacing-01, 0.125rem) #ffffff;
25295
+ }
25296
+ .c4p--coachmark-overlay__dark .c4p--coachmark-overlay--close-btn:active {
25297
+ background-color: var(--cds-button-tertiary-active, #002d9c);
25247
25298
  }
25248
25299
  .c4p--coachmark-overlay .c4p--carousel__item {
25249
25300
  flex: 0 0 100% !important;
@@ -25320,6 +25371,10 @@ th.c4p--datagrid__select-all-toggle-on.button {
25320
25371
  line-height: var(--cds-body-short-01-line-height, 1.28572);
25321
25372
  letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
25322
25373
  }
25374
+ .c4p--coachmark-tagline__cta:focus {
25375
+ box-shadow: inset 0 0 0 3px #6929c4, inset 0 0 0 var(--cds-spacing-02, 0.25rem) #ffffff;
25376
+ outline: 1px solid transparent;
25377
+ }
25323
25378
  .c4p--coachmark-tagline__cta:hover {
25324
25379
  cursor: pointer !important;
25325
25380
  }
@@ -25329,8 +25384,17 @@ th.c4p--datagrid__select-all-toggle-on.button {
25329
25384
  .c4p--coachmark-tagline--close-btn {
25330
25385
  width: var(--cds-spacing-07, 2rem);
25331
25386
  height: var(--cds-spacing-07, 2rem);
25387
+ border-color: transparent !important;
25388
+ border-radius: 0;
25332
25389
  margin-left: auto !important;
25333
25390
  color: #ffffff;
25391
+ outline: 1px solid transparent;
25392
+ }
25393
+ .c4p--coachmark-tagline--close-btn:active {
25394
+ background-color: var(--cds-active-secondary, #6f6f6f);
25395
+ }
25396
+ .c4p--coachmark-tagline--close-btn:focus {
25397
+ box-shadow: inset 0 0 0 1px var(--cds-inverse-02, #393939), inset 0 0 0 var(--cds-spacing-01, 0.125rem) #ffffff !important;
25334
25398
  }
25335
25399
  .c4p--coachmark-tagline--close-btn svg > path {
25336
25400
  margin: 0;
@@ -25355,6 +25419,9 @@ th.c4p--datagrid__select-all-toggle-on.button {
25355
25419
  .c4p--coachmark-beacon {
25356
25420
  position: relative;
25357
25421
  }
25422
+ .c4p--coachmark-beacon-default .c4p--coachmark-beacon__target::before {
25423
+ display: none;
25424
+ }
25358
25425
  .c4p--coachmark-beacon-default .c4p--coachmark-beacon__target::after {
25359
25426
  position: absolute;
25360
25427
  top: calc(var(--cds-spacing-01, 0.125rem) + var(--cds-spacing-03, 0.5rem));
@@ -25365,18 +25432,19 @@ th.c4p--datagrid__select-all-toggle-on.button {
25365
25432
  background-color: #4589ff;
25366
25433
  content: "";
25367
25434
  }
25368
- .c4p--coachmark-beacon-ring .c4p--coachmark-beacon__center {
25369
- -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>");
25370
- 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>");
25435
+ .c4p--coachmark-beacon-default .c4p--coachmark-beacon__target:focus {
25436
+ outline: transparent;
25371
25437
  }
25372
- .c4p--coachmark-beacon-ring .c4p--coachmark-beacon__center circle {
25373
- /* stylelint-disable-next-line carbon/motion-easing-use */
25374
- animation: ring-ripple 2s infinite;
25375
- }
25376
- @media (prefers-reduced-motion) {
25377
- .c4p--coachmark-beacon-ring .c4p--coachmark-beacon__center circle {
25378
- animation: none;
25379
- }
25438
+ .c4p--coachmark-beacon-default .c4p--coachmark-beacon__target:focus::before {
25439
+ position: absolute;
25440
+ top: 7px;
25441
+ left: 7px;
25442
+ display: block;
25443
+ width: 18px;
25444
+ height: 18px;
25445
+ border-radius: 100%;
25446
+ content: "";
25447
+ outline: var(--cds-spacing-01, 0.125rem) var(--cds-focus, #0f62fe) solid;
25380
25448
  }
25381
25449
  .c4p--coachmark-beacon .c4p--coachmark-beacon__target {
25382
25450
  position: absolute;
@@ -25472,6 +25540,7 @@ th.c4p--datagrid__select-all-toggle-on.button {
25472
25540
  display: flex;
25473
25541
  align-items: center;
25474
25542
  justify-content: flex-end;
25543
+ padding: 0 var(--cds-spacing-05, 1rem) var(--cds-spacing-05, 1rem);
25475
25544
  }
25476
25545
  .c4p--coachmark-overlay-elements--controls-progress {
25477
25546
  margin-right: auto;
@@ -25481,6 +25550,9 @@ th.c4p--datagrid__select-all-toggle-on.button {
25481
25550
  letter-spacing: var(--cds-helper-text-01-letter-spacing, 0.32px);
25482
25551
  }
25483
25552
 
25553
+ .c4p--coachmark-overlay-element {
25554
+ padding: var(--cds-spacing-01, 0.125rem) var(--cds-spacing-05, 1rem) 0;
25555
+ }
25484
25556
  .c4p--coachmark-overlay-element__content {
25485
25557
  padding-bottom: var(--cds-spacing-05, 1rem);
25486
25558
  }
@@ -25512,6 +25584,7 @@ th.c4p--datagrid__select-all-toggle-on.button {
25512
25584
  right: var(--cds-spacing-05, 1rem);
25513
25585
  bottom: -100%;
25514
25586
  transform: translateY(100%);
25587
+ visibility: hidden;
25515
25588
  }
25516
25589
  .c4p--coachmark-stack-element--is-mounted {
25517
25590
  bottom: 0;
@@ -25526,6 +25599,7 @@ th.c4p--datagrid__select-all-toggle-on.button {
25526
25599
  .c4p--coachmark-stack-element--is-visible {
25527
25600
  opacity: 1;
25528
25601
  transform: translateY(0);
25602
+ visibility: visible;
25529
25603
  }
25530
25604
  .c4p--coachmark-stack-element--is-stacked {
25531
25605
  bottom: 0;
@@ -25533,6 +25607,7 @@ th.c4p--datagrid__select-all-toggle-on.button {
25533
25607
  pointer-events: none;
25534
25608
  transform: perspective(9rem) translate3d(0, calc(var(--cds-spacing-09, 3rem) * -1), calc(var(--cds-spacing-05, 1rem) * -1));
25535
25609
  transform-origin: top center;
25610
+ visibility: visible;
25536
25611
  }
25537
25612
  .c4p--coachmark-stack-element--is-stacked__light {
25538
25613
  background-color: #262626;
@@ -25713,6 +25788,7 @@ th.c4p--datagrid__select-all-toggle-on.button {
25713
25788
  .c4p--checklist__header {
25714
25789
  display: flex;
25715
25790
  padding: var(--cds-spacing-05, 1rem);
25791
+ border-top: 1px solid var(--cds-ui-03, #e0e0e0);
25716
25792
  background-color: var(--cds-ui-01, #f4f4f4);
25717
25793
  gap: var(--cds-spacing-03, 0.5rem);
25718
25794
  }
@@ -25815,9 +25891,6 @@ th.c4p--datagrid__select-all-toggle-on.button {
25815
25891
  color: var(--cds-text-primary, #161616);
25816
25892
  text-decoration: underline;
25817
25893
  }
25818
- .c4p--checklist__button--error {
25819
- color: var(--cds-text-error, #da1e28) !important;
25820
- }
25821
25894
  .c4p--checklist__content-outer {
25822
25895
  overflow: hidden;
25823
25896
  }
@@ -25862,13 +25935,15 @@ th.c4p--datagrid__select-all-toggle-on.button {
25862
25935
  .c4p--checklist__icon {
25863
25936
  /* stylelint-disable-next-line carbon/layout-token-use */
25864
25937
  margin: 0.0625rem var(--cds-spacing-03, 0.5rem) 0 0;
25938
+ }
25939
+ .c4p--checklist__icon--checked, .c4p--checklist__icon--indeterminate {
25865
25940
  color: var(--cds-link-01, #0f62fe);
25866
25941
  }
25867
25942
  .c4p--checklist__icon--error {
25868
25943
  color: var(--cds-support-error, #da1e28);
25869
25944
  }
25870
25945
  .c4p--checklist__icon--disabled {
25871
- color: var(--cds-disabled-03, #8d8d8d);
25946
+ color: var(--cds-disabled-02, #c6c6c6);
25872
25947
  }
25873
25948
  .c4p--checklist__label {
25874
25949
  font-size: var(--cds-body-short-01-font-size, 0.875rem);
@@ -25881,8 +25956,8 @@ th.c4p--datagrid__select-all-toggle-on.button {
25881
25956
  -webkit-line-clamp: 2;
25882
25957
  text-overflow: ellipsis;
25883
25958
  }
25884
- .c4p--checklist__label--checked, .c4p--checklist__label--disabled, .c4p--checklist__label--error {
25885
- color: var(--cds-disabled-03, #8d8d8d);
25959
+ .c4p--checklist__label--disabled {
25960
+ color: var(--cds-disabled-02, #c6c6c6);
25886
25961
  }
25887
25962
  .c4p--checklist__footer {
25888
25963
  display: -webkit-box;