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