@carbon/ibm-products 1.61.1 → 1.62.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (123) hide show
  1. package/css/index-full-carbon.css +156 -68
  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 +156 -68
  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 +156 -68
  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 +41 -25
  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 +50 -14
  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/useDatagrid.js +13 -1
  39. package/es/components/Datagrid/useFlexResize.js +19 -9
  40. package/es/components/Datagrid/useInfiniteScroll.js +10 -9
  41. package/es/components/Datagrid/useOnRowClick.js +6 -7
  42. package/es/components/Datagrid/useParentDimensions.js +6 -6
  43. package/es/components/Datagrid/useResizeTable.js +7 -7
  44. package/es/components/Datagrid/useSelectAllToggle.js +2 -2
  45. package/es/components/Datagrid/useSelectRows.js +31 -21
  46. package/es/components/Datagrid/useSkeletonRows.js +6 -6
  47. package/es/components/Datagrid/useSortableColumns.js +4 -5
  48. package/es/components/Datagrid/useStickyColumn.js +13 -6
  49. package/es/components/EmptyStates/ErrorEmptyState/ErrorEmptyState.js +1 -0
  50. package/es/components/EmptyStates/NoDataEmptyState/NoDataEmptyState.js +1 -0
  51. package/es/components/EmptyStates/NoTagsEmptyState/NoTagsEmptyState.js +1 -0
  52. package/es/components/EmptyStates/NotFoundEmptyState/NotFoundEmptyState.js +1 -0
  53. package/es/components/EmptyStates/NotificationsEmptyState/NotificationsEmptyState.js +1 -0
  54. package/es/components/EmptyStates/UnauthorizedEmptyState/UnauthorizedEmptyState.js +1 -0
  55. package/es/components/EmptyStates/assets/ErrorIllustration.js +6 -4
  56. package/es/components/EmptyStates/assets/NoDataIllustration.js +6 -4
  57. package/es/components/EmptyStates/assets/NoTagsIllustration.js +6 -4
  58. package/es/components/EmptyStates/assets/NotFoundIllustration.js +6 -4
  59. package/es/components/EmptyStates/assets/NotificationsIllustration.js +6 -4
  60. package/es/components/EmptyStates/assets/UnauthorizedIllustration.js +6 -4
  61. package/es/global/js/hooks/index.js +3 -2
  62. package/es/global/js/hooks/usePrefix.js +11 -0
  63. package/es/global/js/package-settings.js +1 -2
  64. package/lib/components/Coachmark/Coachmark.js +16 -4
  65. package/lib/components/Coachmark/CoachmarkDragbar.js +12 -5
  66. package/lib/components/Coachmark/CoachmarkHeader.js +2 -1
  67. package/lib/components/Coachmark/CoachmarkOverlay.js +105 -8
  68. package/lib/components/CoachmarkBeacon/CoachmarkBeacon.js +5 -2
  69. package/lib/components/CoachmarkFixed/CoachmarkFixed.js +25 -5
  70. package/lib/components/CoachmarkOverlayElements/CoachmarkOverlayElements.js +28 -3
  71. package/lib/components/CoachmarkStack/CoachmarkStack.js +18 -3
  72. package/lib/components/CoachmarkStack/CoachmarkStackHome.js +44 -10
  73. package/lib/components/Datagrid/Datagrid/DatagridContent.js +12 -9
  74. package/lib/components/Datagrid/Datagrid/DatagridExpandedRow.js +4 -4
  75. package/lib/components/Datagrid/Datagrid/DatagridHeaderRow.js +41 -32
  76. package/lib/components/Datagrid/Datagrid/DatagridRefBody.js +4 -1
  77. package/lib/components/Datagrid/Datagrid/DatagridRow.js +5 -2
  78. package/lib/components/Datagrid/Datagrid/DatagridSelectAll.js +6 -4
  79. package/lib/components/Datagrid/Datagrid/DatagridSimpleBody.js +4 -1
  80. package/lib/components/Datagrid/Datagrid/DatagridToolbar.js +29 -23
  81. package/lib/components/Datagrid/Datagrid/DatagridVirtualBody.js +12 -12
  82. package/lib/components/Datagrid/Datagrid/addons/stateReducer.js +52 -15
  83. package/lib/components/Datagrid/Datagrid.stories/StickyActionsColumnStory.js +1 -1
  84. package/lib/components/Datagrid/useActionsColumn.js +9 -12
  85. package/lib/components/Datagrid/useDatagrid.js +13 -1
  86. package/lib/components/Datagrid/useFlexResize.js +19 -9
  87. package/lib/components/Datagrid/useInfiniteScroll.js +9 -9
  88. package/lib/components/Datagrid/useOnRowClick.js +6 -7
  89. package/lib/components/Datagrid/useParentDimensions.js +5 -6
  90. package/lib/components/Datagrid/useResizeTable.js +6 -7
  91. package/lib/components/Datagrid/useSelectAllToggle.js +2 -2
  92. package/lib/components/Datagrid/useSelectRows.js +31 -21
  93. package/lib/components/Datagrid/useSkeletonRows.js +6 -6
  94. package/lib/components/Datagrid/useSortableColumns.js +4 -5
  95. package/lib/components/Datagrid/useStickyColumn.js +8 -0
  96. package/lib/components/EmptyStates/ErrorEmptyState/ErrorEmptyState.js +1 -0
  97. package/lib/components/EmptyStates/NoDataEmptyState/NoDataEmptyState.js +1 -0
  98. package/lib/components/EmptyStates/NoTagsEmptyState/NoTagsEmptyState.js +1 -0
  99. package/lib/components/EmptyStates/NotFoundEmptyState/NotFoundEmptyState.js +1 -0
  100. package/lib/components/EmptyStates/NotificationsEmptyState/NotificationsEmptyState.js +1 -0
  101. package/lib/components/EmptyStates/UnauthorizedEmptyState/UnauthorizedEmptyState.js +1 -0
  102. package/lib/components/EmptyStates/assets/ErrorIllustration.js +6 -4
  103. package/lib/components/EmptyStates/assets/NoDataIllustration.js +6 -4
  104. package/lib/components/EmptyStates/assets/NoTagsIllustration.js +6 -4
  105. package/lib/components/EmptyStates/assets/NotFoundIllustration.js +6 -4
  106. package/lib/components/EmptyStates/assets/NotificationsIllustration.js +6 -4
  107. package/lib/components/EmptyStates/assets/UnauthorizedIllustration.js +6 -4
  108. package/lib/global/js/hooks/index.js +8 -1
  109. package/lib/global/js/hooks/usePrefix.js +19 -0
  110. package/lib/global/js/package-settings.js +1 -2
  111. package/package.json +2 -2
  112. package/scss/components/Checklist/_checklist.scss +13 -25
  113. package/scss/components/Coachmark/styles/_coachmark-dragbar.scss +1 -45
  114. package/scss/components/Coachmark/styles/_coachmark-header.scss +0 -33
  115. package/scss/components/Coachmark/styles/_coachmark-overlay.scss +113 -5
  116. package/scss/components/Coachmark/styles/_coachmark-tagline.scss +18 -0
  117. package/scss/components/CoachmarkBeacon/_coachmark-beacon.scss +19 -1
  118. package/scss/components/CoachmarkOverlayElement/_coachmark-overlay-element.scss +2 -0
  119. package/scss/components/CoachmarkOverlayElements/_coachmark-overlay-elements.scss +1 -0
  120. package/scss/components/CoachmarkStack/_coachmark-stack.scss +3 -0
  121. package/scss/components/Datagrid/styles/_datagrid.scss +31 -5
  122. package/scss/components/Datagrid/styles/_useNestedRows.scss +1 -1
  123. 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,6 +11000,20 @@ th.c4p--datagrid__select-all-toggle-on.button {
10933
11000
  background-color: #4589ff;
10934
11001
  content: "";
10935
11002
  }
11003
+ .c4p--coachmark-beacon-default .c4p--coachmark-beacon__target:focus {
11004
+ outline: transparent;
11005
+ }
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;
11016
+ }
10936
11017
  .c4p--coachmark-beacon .c4p--coachmark-beacon__target {
10937
11018
  position: absolute;
10938
11019
  top: calc(-1 * var(--cds-spacing-05, 1rem));
@@ -11027,6 +11108,7 @@ th.c4p--datagrid__select-all-toggle-on.button {
11027
11108
  display: flex;
11028
11109
  align-items: center;
11029
11110
  justify-content: flex-end;
11111
+ padding: 0 var(--cds-spacing-05, 1rem) var(--cds-spacing-05, 1rem);
11030
11112
  }
11031
11113
  .c4p--coachmark-overlay-elements--controls-progress {
11032
11114
  margin-right: auto;
@@ -11036,6 +11118,9 @@ th.c4p--datagrid__select-all-toggle-on.button {
11036
11118
  letter-spacing: var(--cds-helper-text-01-letter-spacing, 0.32px);
11037
11119
  }
11038
11120
 
11121
+ .c4p--coachmark-overlay-element {
11122
+ padding: var(--cds-spacing-01, 0.125rem) var(--cds-spacing-05, 1rem) 0;
11123
+ }
11039
11124
  .c4p--coachmark-overlay-element__content {
11040
11125
  padding-bottom: var(--cds-spacing-05, 1rem);
11041
11126
  }
@@ -11067,6 +11152,7 @@ th.c4p--datagrid__select-all-toggle-on.button {
11067
11152
  right: var(--cds-spacing-05, 1rem);
11068
11153
  bottom: -100%;
11069
11154
  transform: translateY(100%);
11155
+ visibility: hidden;
11070
11156
  }
11071
11157
  .c4p--coachmark-stack-element--is-mounted {
11072
11158
  bottom: 0;
@@ -11081,6 +11167,7 @@ th.c4p--datagrid__select-all-toggle-on.button {
11081
11167
  .c4p--coachmark-stack-element--is-visible {
11082
11168
  opacity: 1;
11083
11169
  transform: translateY(0);
11170
+ visibility: visible;
11084
11171
  }
11085
11172
  .c4p--coachmark-stack-element--is-stacked {
11086
11173
  bottom: 0;
@@ -11088,6 +11175,7 @@ th.c4p--datagrid__select-all-toggle-on.button {
11088
11175
  pointer-events: none;
11089
11176
  transform: perspective(9rem) translate3d(0, calc(var(--cds-spacing-09, 3rem) * -1), calc(var(--cds-spacing-05, 1rem) * -1));
11090
11177
  transform-origin: top center;
11178
+ visibility: visible;
11091
11179
  }
11092
11180
  .c4p--coachmark-stack-element--is-stacked__light {
11093
11181
  background-color: #262626;
@@ -11268,6 +11356,7 @@ th.c4p--datagrid__select-all-toggle-on.button {
11268
11356
  .c4p--checklist__header {
11269
11357
  display: flex;
11270
11358
  padding: var(--cds-spacing-05, 1rem);
11359
+ border-top: 1px solid var(--cds-ui-03, #e0e0e0);
11271
11360
  background-color: var(--cds-ui-01, #f4f4f4);
11272
11361
  gap: var(--cds-spacing-03, 0.5rem);
11273
11362
  }
@@ -11370,9 +11459,6 @@ th.c4p--datagrid__select-all-toggle-on.button {
11370
11459
  color: var(--cds-text-primary, #161616);
11371
11460
  text-decoration: underline;
11372
11461
  }
11373
- .c4p--checklist__button--error {
11374
- color: var(--cds-text-error, #da1e28) !important;
11375
- }
11376
11462
  .c4p--checklist__content-outer {
11377
11463
  overflow: hidden;
11378
11464
  }
@@ -11417,13 +11503,15 @@ th.c4p--datagrid__select-all-toggle-on.button {
11417
11503
  .c4p--checklist__icon {
11418
11504
  /* stylelint-disable-next-line carbon/layout-token-use */
11419
11505
  margin: 0.0625rem var(--cds-spacing-03, 0.5rem) 0 0;
11506
+ }
11507
+ .c4p--checklist__icon--checked, .c4p--checklist__icon--indeterminate {
11420
11508
  color: var(--cds-link-01, #0f62fe);
11421
11509
  }
11422
11510
  .c4p--checklist__icon--error {
11423
11511
  color: var(--cds-support-error, #da1e28);
11424
11512
  }
11425
11513
  .c4p--checklist__icon--disabled {
11426
- color: var(--cds-disabled-03, #8d8d8d);
11514
+ color: var(--cds-disabled-02, #c6c6c6);
11427
11515
  }
11428
11516
  .c4p--checklist__label {
11429
11517
  font-size: var(--cds-body-short-01-font-size, 0.875rem);
@@ -11436,8 +11524,8 @@ th.c4p--datagrid__select-all-toggle-on.button {
11436
11524
  -webkit-line-clamp: 2;
11437
11525
  text-overflow: ellipsis;
11438
11526
  }
11439
- .c4p--checklist__label--checked, .c4p--checklist__label--disabled, .c4p--checklist__label--error {
11440
- color: var(--cds-disabled-03, #8d8d8d);
11527
+ .c4p--checklist__label--disabled {
11528
+ color: var(--cds-disabled-02, #c6c6c6);
11441
11529
  }
11442
11530
  .c4p--checklist__footer {
11443
11531
  display: -webkit-box;