@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
@@ -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;