@carbon/ibm-products 2.26.0 → 2.27.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (109) hide show
  1. package/css/index-full-carbon.css +517 -56
  2. package/css/index-full-carbon.css.map +1 -1
  3. package/css/index-full-carbon.min.css +1 -1
  4. package/css/index-full-carbon.min.css.map +1 -1
  5. package/css/index-without-carbon-released-only.css +32 -14
  6. package/css/index-without-carbon-released-only.css.map +1 -1
  7. package/css/index-without-carbon-released-only.min.css +1 -1
  8. package/css/index-without-carbon-released-only.min.css.map +1 -1
  9. package/css/index-without-carbon.css +517 -56
  10. package/css/index-without-carbon.css.map +1 -1
  11. package/css/index-without-carbon.min.css +1 -1
  12. package/css/index-without-carbon.min.css.map +1 -1
  13. package/css/index.css +488 -48
  14. package/css/index.css.map +1 -1
  15. package/css/index.min.css +1 -1
  16. package/css/index.min.css.map +1 -1
  17. package/es/components/BigNumbers/BigNumbers.d.ts +11 -0
  18. package/es/components/BigNumbers/BigNumbers.js +238 -0
  19. package/es/components/BigNumbers/constants.d.ts +13 -0
  20. package/es/components/BigNumbers/constants.js +67 -0
  21. package/es/components/BigNumbers/index.d.ts +1 -0
  22. package/es/components/DataSpreadsheet/DataSpreadsheetBody.js +4 -3
  23. package/es/components/DataSpreadsheet/DataSpreadsheetHeader.js +3 -2
  24. package/es/components/DataSpreadsheet/utils/checkForHoldingKey.d.ts +1 -0
  25. package/es/components/DataSpreadsheet/utils/checkForHoldingKey.js +17 -0
  26. package/es/components/Datagrid/Datagrid/Datagrid.js +9 -2
  27. package/es/components/Datagrid/Datagrid/DatagridContent.d.ts +3 -1
  28. package/es/components/Datagrid/Datagrid/DatagridContent.js +6 -2
  29. package/es/components/Datagrid/Datagrid/DatagridHeaderRow.js +8 -4
  30. package/es/components/Datagrid/Datagrid/DatagridToolbar.d.ts +10 -1
  31. package/es/components/Datagrid/Datagrid/DatagridToolbar.js +21 -4
  32. package/es/components/Datagrid/Datagrid/addons/Filtering/FilterProvider.js +32 -9
  33. package/es/components/Datagrid/Datagrid/addons/Filtering/constants.d.ts +3 -1
  34. package/es/components/Datagrid/Datagrid/addons/Filtering/constants.js +4 -1
  35. package/es/components/Datagrid/Datagrid/addons/Filtering/hooks/useFilters.js +35 -3
  36. package/es/components/Datagrid/Datagrid/addons/stateReducer.js +1 -1
  37. package/es/components/Datagrid/useSelectAllToggle.js +5 -3
  38. package/es/components/SidePanel/SidePanel.js +13 -6
  39. package/es/components/SidePanel/motion/variants.d.ts +39 -12
  40. package/es/components/SidePanel/motion/variants.js +42 -11
  41. package/es/components/StringFormatter/StringFormatter.d.ts +6 -0
  42. package/es/components/StringFormatter/StringFormatter.js +79 -0
  43. package/es/components/StringFormatter/index.d.ts +1 -0
  44. package/es/components/StringFormatter/utils/enums.d.ts +14 -0
  45. package/es/components/StringFormatter/utils/enums.js +23 -0
  46. package/es/components/Tearsheet/TearsheetShell.js +10 -4
  47. package/es/components/UserAvatar/UserAvatar.js +58 -42
  48. package/es/components/index.d.ts +2 -0
  49. package/es/global/js/hooks/index.d.ts +1 -0
  50. package/es/global/js/hooks/useIsomorphicEffect.d.ts +2 -0
  51. package/es/global/js/hooks/useIsomorphicEffect.js +14 -0
  52. package/es/global/js/package-settings.d.ts +2 -0
  53. package/es/global/js/package-settings.js +2 -0
  54. package/es/index.js +2 -0
  55. package/es/settings.d.ts +2 -0
  56. package/lib/components/BigNumbers/BigNumbers.d.ts +11 -0
  57. package/lib/components/BigNumbers/BigNumbers.js +244 -0
  58. package/lib/components/BigNumbers/constants.d.ts +13 -0
  59. package/lib/components/BigNumbers/constants.js +76 -0
  60. package/lib/components/BigNumbers/index.d.ts +1 -0
  61. package/lib/components/DataSpreadsheet/DataSpreadsheetBody.js +4 -3
  62. package/lib/components/DataSpreadsheet/DataSpreadsheetHeader.js +3 -2
  63. package/lib/components/DataSpreadsheet/utils/checkForHoldingKey.d.ts +1 -0
  64. package/lib/components/DataSpreadsheet/utils/checkForHoldingKey.js +21 -0
  65. package/lib/components/Datagrid/Datagrid/Datagrid.js +9 -2
  66. package/lib/components/Datagrid/Datagrid/DatagridContent.d.ts +3 -1
  67. package/lib/components/Datagrid/Datagrid/DatagridContent.js +6 -2
  68. package/lib/components/Datagrid/Datagrid/DatagridHeaderRow.js +8 -4
  69. package/lib/components/Datagrid/Datagrid/DatagridToolbar.d.ts +10 -1
  70. package/lib/components/Datagrid/Datagrid/DatagridToolbar.js +20 -3
  71. package/lib/components/Datagrid/Datagrid/addons/Filtering/FilterProvider.js +30 -7
  72. package/lib/components/Datagrid/Datagrid/addons/Filtering/constants.d.ts +3 -1
  73. package/lib/components/Datagrid/Datagrid/addons/Filtering/constants.js +4 -0
  74. package/lib/components/Datagrid/Datagrid/addons/Filtering/hooks/useFilters.js +33 -1
  75. package/lib/components/Datagrid/Datagrid/addons/stateReducer.js +1 -1
  76. package/lib/components/Datagrid/useSelectAllToggle.js +4 -2
  77. package/lib/components/SidePanel/SidePanel.js +11 -4
  78. package/lib/components/SidePanel/motion/variants.d.ts +39 -12
  79. package/lib/components/SidePanel/motion/variants.js +42 -10
  80. package/lib/components/StringFormatter/StringFormatter.d.ts +6 -0
  81. package/lib/components/StringFormatter/StringFormatter.js +85 -0
  82. package/lib/components/StringFormatter/index.d.ts +1 -0
  83. package/lib/components/StringFormatter/utils/enums.d.ts +14 -0
  84. package/lib/components/StringFormatter/utils/enums.js +27 -0
  85. package/lib/components/Tearsheet/TearsheetShell.js +10 -4
  86. package/lib/components/UserAvatar/UserAvatar.js +58 -42
  87. package/lib/components/index.d.ts +2 -0
  88. package/lib/global/js/hooks/index.d.ts +1 -0
  89. package/lib/global/js/hooks/useIsomorphicEffect.d.ts +2 -0
  90. package/lib/global/js/hooks/useIsomorphicEffect.js +18 -0
  91. package/lib/global/js/package-settings.d.ts +2 -0
  92. package/lib/global/js/package-settings.js +2 -0
  93. package/lib/index.js +10 -0
  94. package/lib/settings.d.ts +2 -0
  95. package/package.json +7 -7
  96. package/scss/components/BigNumbers/_big-numbers.scss +151 -0
  97. package/scss/components/BigNumbers/_carbon-imports.scss +11 -0
  98. package/scss/components/BigNumbers/_index-with-carbon.scss +9 -0
  99. package/scss/components/BigNumbers/_index.scss +8 -0
  100. package/scss/components/FullPageError/_full-page-error.scss +2 -2
  101. package/scss/components/SidePanel/_side-panel.scss +1 -1
  102. package/scss/components/StringFormatter/_carbon-imports.scss +10 -0
  103. package/scss/components/StringFormatter/_index-with-carbon.scss +9 -0
  104. package/scss/components/StringFormatter/_index.scss +8 -0
  105. package/scss/components/StringFormatter/_string-formatter.scss +97 -0
  106. package/scss/components/Tearsheet/_tearsheet.scss +34 -2
  107. package/scss/components/UserAvatar/_user-avatar.scss +40 -0
  108. package/scss/components/_index-with-carbon.scss +2 -0
  109. package/scss/components/_index.scss +2 -0
@@ -2953,6 +2953,7 @@ em {
2953
2953
  --cds-ai-aura-hover-end: rgba(255, 255, 255, 0);
2954
2954
  --cds-ai-aura-hover-start: rgba(69, 137, 255, 0.4);
2955
2955
  --cds-ai-aura-start: rgba(69, 137, 255, 0.1);
2956
+ --cds-ai-aura-start-table: rgba(69, 137, 255, 0.15);
2956
2957
  --cds-ai-border-end: #d0e2ff;
2957
2958
  --cds-ai-border-start: #78a9ff;
2958
2959
  --cds-ai-border-strong: #4589ff;
@@ -2985,9 +2986,9 @@ em {
2985
2986
  --cds-border-tile-01: #c6c6c6;
2986
2987
  --cds-border-tile-02: #a8a8a8;
2987
2988
  --cds-border-tile-03: #c6c6c6;
2988
- --cds-chat-avatar-agent: #161616;
2989
- --cds-chat-avatar-bot: #0f62fe;
2990
- --cds-chat-avatar-user: #161616;
2989
+ --cds-chat-avatar-agent: #393939;
2990
+ --cds-chat-avatar-bot: #6f6f6f;
2991
+ --cds-chat-avatar-user: #0f62fe;
2991
2992
  --cds-chat-bubble-agent: #ffffff;
2992
2993
  --cds-chat-bubble-agent-border: #e0e0e0;
2993
2994
  --cds-chat-bubble-user: #e0e0e0;
@@ -3172,6 +3173,7 @@ em {
3172
3173
  --cds-ai-aura-hover-end: rgba(255, 255, 255, 0);
3173
3174
  --cds-ai-aura-hover-start: rgba(69, 137, 255, 0.4);
3174
3175
  --cds-ai-aura-start: rgba(69, 137, 255, 0.1);
3176
+ --cds-ai-aura-start-table: rgba(69, 137, 255, 0.15);
3175
3177
  --cds-ai-border-end: #d0e2ff;
3176
3178
  --cds-ai-border-start: #78a9ff;
3177
3179
  --cds-ai-border-strong: #4589ff;
@@ -3204,9 +3206,9 @@ em {
3204
3206
  --cds-border-tile-01: #a8a8a8;
3205
3207
  --cds-border-tile-02: #c6c6c6;
3206
3208
  --cds-border-tile-03: #a8a8a8;
3207
- --cds-chat-avatar-agent: #161616;
3208
- --cds-chat-avatar-bot: #0f62fe;
3209
- --cds-chat-avatar-user: #161616;
3209
+ --cds-chat-avatar-agent: #393939;
3210
+ --cds-chat-avatar-bot: #6f6f6f;
3211
+ --cds-chat-avatar-user: #0f62fe;
3210
3212
  --cds-chat-bubble-agent: #ffffff;
3211
3213
  --cds-chat-bubble-agent-border: #e0e0e0;
3212
3214
  --cds-chat-bubble-user: #e0e0e0;
@@ -3391,6 +3393,7 @@ em {
3391
3393
  --cds-ai-aura-hover-end: rgba(0, 0, 0, 0);
3392
3394
  --cds-ai-aura-hover-start: rgba(69, 137, 255, 0.4);
3393
3395
  --cds-ai-aura-start: rgba(69, 137, 255, 0.1);
3396
+ --cds-ai-aura-start-table: rgba(69, 137, 255, 0.15);
3394
3397
  --cds-ai-border-end: rgba(166, 200, 255, 0.24);
3395
3398
  --cds-ai-border-start: #4589ff;
3396
3399
  --cds-ai-border-strong: #78a9ff;
@@ -3422,9 +3425,9 @@ em {
3422
3425
  --cds-border-tile-01: #6f6f6f;
3423
3426
  --cds-border-tile-02: #8d8d8d;
3424
3427
  --cds-border-tile-03: #a8a8a8;
3425
- --cds-chat-avatar-agent: #f4f4f4;
3426
- --cds-chat-avatar-bot: #4589ff;
3427
- --cds-chat-avatar-user: #f4f4f4;
3428
+ --cds-chat-avatar-agent: #c6c6c6;
3429
+ --cds-chat-avatar-bot: #8d8d8d;
3430
+ --cds-chat-avatar-user: #4589ff;
3428
3431
  --cds-chat-bubble-agent: #262626;
3429
3432
  --cds-chat-bubble-agent-border: #525252;
3430
3433
  --cds-chat-bubble-user: #393939;
@@ -3606,6 +3609,7 @@ em {
3606
3609
  --cds-ai-aura-hover-end: rgba(0, 0, 0, 0);
3607
3610
  --cds-ai-aura-hover-start: rgba(69, 137, 255, 0.4);
3608
3611
  --cds-ai-aura-start: rgba(69, 137, 255, 0.1);
3612
+ --cds-ai-aura-start-table: rgba(69, 137, 255, 0.15);
3609
3613
  --cds-ai-border-end: rgba(166, 200, 255, 0.24);
3610
3614
  --cds-ai-border-start: #4589ff;
3611
3615
  --cds-ai-border-strong: #78a9ff;
@@ -3637,9 +3641,9 @@ em {
3637
3641
  --cds-border-tile-01: #525252;
3638
3642
  --cds-border-tile-02: #6f6f6f;
3639
3643
  --cds-border-tile-03: #8d8d8d;
3640
- --cds-chat-avatar-agent: #f4f4f4;
3641
- --cds-chat-avatar-bot: #4589ff;
3642
- --cds-chat-avatar-user: #f4f4f4;
3644
+ --cds-chat-avatar-agent: #c6c6c6;
3645
+ --cds-chat-avatar-bot: #8d8d8d;
3646
+ --cds-chat-avatar-user: #4589ff;
3643
3647
  --cds-chat-bubble-agent: #262626;
3644
3648
  --cds-chat-bubble-agent-border: #525252;
3645
3649
  --cds-chat-bubble-user: #393939;
@@ -5509,6 +5513,14 @@ a.cds--overflow-menu-options__btn::before {
5509
5513
  }
5510
5514
 
5511
5515
  /*stylelint-enable */
5516
+ .cds--overflow-menu__top-start {
5517
+ transform: translate(0, calc(-100% - var(--cds-popover-offset, 2.5rem)));
5518
+ }
5519
+
5520
+ .cds--overflow-menu__top-end {
5521
+ transform: translate(0, calc(-100% - var(--cds-popover-offset, 2.5rem)));
5522
+ }
5523
+
5512
5524
  .cds--breadcrumb {
5513
5525
  box-sizing: border-box;
5514
5526
  padding: 0;
@@ -5796,6 +5808,60 @@ a.cds--overflow-menu-options__btn::before {
5796
5808
  margin-inline-start: 0.5rem;
5797
5809
  }
5798
5810
 
5811
+ .cds--chat-btn {
5812
+ border-radius: 1.5rem;
5813
+ }
5814
+
5815
+ .cds--chat-btn.cds--btn--md {
5816
+ border-radius: 1.25rem;
5817
+ }
5818
+
5819
+ .cds--chat-btn.cds--btn--sm {
5820
+ border-radius: 1rem;
5821
+ }
5822
+
5823
+ .cds--chat-btn--quick-action {
5824
+ align-items: center;
5825
+ border: 1px solid var(--cds-link-primary, #0f62fe);
5826
+ }
5827
+
5828
+ .cds--chat-btn--quick-action:hover:not(:active):not([disabled]) {
5829
+ border-color: transparent;
5830
+ background: var(--cds-background-hover, rgba(141, 141, 141, 0.12));
5831
+ }
5832
+
5833
+ .cds--chat-btn--quick-action.cds--btn--ghost:focus {
5834
+ border-color: var(--cds-focus, #0f62fe);
5835
+ box-shadow: inset 0 0 0 1px var(--cds-focus, #0f62fe);
5836
+ }
5837
+
5838
+ .cds--chat-btn--quick-action.cds--btn--ghost:hover:focus {
5839
+ border-color: var(--cds-focus, #0f62fe);
5840
+ box-shadow: inset 0 0 0 1px var(--cds-focus-inset, #ffffff);
5841
+ }
5842
+
5843
+ .cds--chat-btn--quick-action[disabled],
5844
+ .cds--chat-btn--quick-action[disabled]:hover {
5845
+ border-color: var(--cds-button-disabled, #c6c6c6);
5846
+ color: var(--cds-button-disabled, #c6c6c6);
5847
+ }
5848
+
5849
+ .cds--chat-btn--quick-action--selected,
5850
+ .cds--chat-btn--quick-action--selected[disabled],
5851
+ .cds--chat-btn--quick-action--selected[disabled]:hover {
5852
+ border-color: transparent;
5853
+ background: var(--cds-background-selected, rgba(141, 141, 141, 0.2));
5854
+ color: var(--cds-text-secondary, #525252);
5855
+ }
5856
+
5857
+ .cds--chat-btn--quick-action--selected:hover {
5858
+ color: var(--cds-text-secondary, #525252);
5859
+ }
5860
+
5861
+ .cds--chat-btn.cds--skeleton {
5862
+ overflow: hidden;
5863
+ }
5864
+
5799
5865
  input:-webkit-autofill,
5800
5866
  input:-webkit-autofill:hover,
5801
5867
  input:-webkit-autofill:focus,
@@ -9223,19 +9289,28 @@ fieldset[disabled] .cds--form__helper-text {
9223
9289
  }
9224
9290
 
9225
9291
  .cds--combo-button__container--sm .cds--combo-button__primary-action {
9226
- min-inline-size: 9.9375rem;
9292
+ min-inline-size: 7.9375rem;
9227
9293
  }
9228
9294
 
9229
9295
  .cds--combo-button__container--md .cds--combo-button__primary-action {
9230
- min-inline-size: 9.4375rem;
9296
+ min-inline-size: 7.4375rem;
9231
9297
  }
9232
9298
 
9233
9299
  .cds--combo-button__container--lg .cds--combo-button__primary-action {
9234
- min-inline-size: 8.9375rem;
9300
+ min-inline-size: 6.9375rem;
9235
9301
  }
9236
9302
 
9237
9303
  .cds--combo-button__primary-action .cds--btn {
9238
9304
  inline-size: 100%;
9305
+ max-inline-size: 14.9375rem;
9306
+ min-inline-size: 6.9375rem;
9307
+ }
9308
+
9309
+ .cds--combo-button__primary-action button {
9310
+ display: block;
9311
+ overflow: hidden;
9312
+ text-overflow: ellipsis;
9313
+ white-space: nowrap;
9239
9314
  }
9240
9315
 
9241
9316
  .cds--combo-button__trigger svg {
@@ -9246,6 +9321,18 @@ fieldset[disabled] .cds--form__helper-text {
9246
9321
  transform: rotate(180deg);
9247
9322
  }
9248
9323
 
9324
+ .cds--combo-button__top {
9325
+ transform: translate(0, calc(-100% - var(--cds-popover-offset, 3rem)));
9326
+ }
9327
+
9328
+ .cds--combo-button__top-start {
9329
+ transform: translate(0, calc(-100% - var(--cds-popover-offset, 3rem)));
9330
+ }
9331
+
9332
+ .cds--combo-button__top-end {
9333
+ transform: translate(0, calc(-100% - var(--cds-popover-offset, 3rem)));
9334
+ }
9335
+
9249
9336
  .cds--contained-list {
9250
9337
  --cds-layout-size-height-local: clamp(max(var(--cds-layout-size-height-min), var(--cds-layout-size-height-sm)), var(--cds-layout-size-height, var(--cds-layout-size-height-lg)), min(var(--cds-layout-size-height-max), var(--cds-layout-size-height-xl)));
9251
9338
  --cds-layout-density-padding-inline-local: clamp(var(--cds-layout-density-padding-inline-min), var(--cds-layout-density-padding-inline, var(--cds-layout-density-padding-inline-normal)), var(--cds-layout-density-padding-inline-max));
@@ -10784,20 +10871,67 @@ tr.cds--data-table--selected:last-of-type td {
10784
10871
  padding-inline-end: 0;
10785
10872
  }
10786
10873
 
10787
- .cds--data-table tbody tr:has(> .cds--table-column-slug--active) {
10788
- background-image: linear-gradient(90deg, var(--cds-ai-inner-shadow, rgba(69, 137, 255, 0.2)) 0%, 15%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%, transparent 100%);
10789
- border-block-end-color: var(--cds-ai-border-strong, #4589ff);
10874
+ tr.cds--data-table--slug-row,
10875
+ tr.cds--data-table--slug-row + .cds--expandable-row {
10876
+ background: linear-gradient(to right, var(--cds-ai-aura-start-table, rgba(69, 137, 255, 0.15)) 0%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%, transparent 50%);
10790
10877
  background-attachment: fixed;
10791
10878
  }
10792
10879
 
10880
+ .cds--data-table--slug-row {
10881
+ box-shadow: inset 1px 0 var(--cds-ai-border-strong, #4589ff);
10882
+ }
10883
+
10884
+ .cds--data-table tbody tr.cds--data-table--slug-row:hover td,
10885
+ tr.cds--data-table--slug-row.cds--expandable-row:hover + .cds--expandable-row[data-child-row] td,
10886
+ tr.cds--data-table--slug-row.cds--expandable-row--hover + .cds--expandable-row[data-child-row]:hover > td,
10887
+ tr.cds--data-table--slug-row.cds--expandable-row--hover > td,
10888
+ tr.cds--data-table--selected.cds--data-table--slug-row.cds--expandable-row + tr.cds--expandable-row[data-child-row] > td,
10889
+ tr.cds--data-table--slug-row.cds--parent-row.cds--data-table--selected.cds--expandable-row:hover td,
10890
+ tr.cds--data-table--slug-row.cds--parent-row.cds--data-table--selected.cds--expandable-row:hover td:first-of-type,
10891
+ tr.cds--data-table--slug-row.cds--parent-row.cds--data-table--selected:not(.cds--expandable-row):hover > td,
10892
+ tr.cds--data-table--slug-row.cds--parent-row.cds--data-table--selected.cds--expandable-row:hover + tr[data-child-row] > td,
10893
+ tr.cds--data-table--slug-row.cds--parent-row.cds--data-table--selected.cds--expandable-row--hover > td,
10894
+ tr.cds--data-table--slug-row.cds--parent-row.cds--data-table--selected.cds--expandable-row--hover > td:first-of-type {
10895
+ background-color: transparent;
10896
+ }
10897
+
10898
+ .cds--data-table tbody tr.cds--data-table--slug-row:hover,
10899
+ tr.cds--data-table--slug-row:hover + .cds--expandable-row[data-child-row],
10900
+ tr.cds--expandable-row--hover + .cds--expandable-row[data-child-row]:hover,
10901
+ tr.cds--expandable-row--hover.cds--data-table--slug-row,
10902
+ tr.cds--data-table--selected.cds--parent-row.cds--expandable-row--hover.cds--data-table--slug-row {
10903
+ background: linear-gradient(to right, var(--cds-ai-aura-hover-start, rgba(69, 137, 255, 0.4)) 0%, 15%, var(--cds-ai-aura-hover-end, rgba(255, 255, 255, 0)) 50%), var(--cds-ai-aura-hover-background, #edf5ff);
10904
+ }
10905
+
10906
+ tr.cds--parent-row.cds--data-table--selected.cds--data-table--slug-row,
10907
+ .cds--data-table--selected.cds--data-table--slug-row,
10908
+ tr.cds--data-table--selected.cds--data-table--slug-row + .cds--expandable-row {
10909
+ background: linear-gradient(to right, var(--cds-ai-inner-shadow, rgba(69, 137, 255, 0.2)) 0%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%, transparent 50%), var(--cds-layer-selected);
10910
+ }
10911
+
10912
+ tr.cds--data-table--slug-row.cds--data-table--selected td,
10913
+ tr.cds--data-table--slug-row.cds--data-table--selected:hover td,
10914
+ tbody tr.cds--data-table--slug-row:hover td,
10915
+ tr.cds--data-table--slug-row.cds--parent-row.cds--data-table--selected.cds--expandable-row:hover td:not(.cds--table-expand):not(.cds--table-column-checkbox):not(.cds--table-column-slug) {
10916
+ border-block-end-color: var(--cds-border-subtle);
10917
+ }
10918
+
10919
+ tr.cds--expandable-row.cds--data-table--selected.cds--data-table--slug-row[data-parent-row] > td:not(.cds--table-expand):not(.cds--table-column-checkbox):not(.cds--table-column-slug) {
10920
+ border-block-end: 1px solid var(--cds-layer-selected);
10921
+ }
10922
+
10923
+ tr.cds--parent-row.cds--data-table--slug-row.cds--expandable-row:hover td:first-of-type {
10924
+ border-block-end: 1px solid transparent;
10925
+ }
10926
+
10793
10927
  .cds--data-table thead th.cds--table-sort__header--slug .cds--table-sort,
10794
10928
  .cds--data-table thead th:has(> .cds--table-header-label--slug) {
10795
- background-image: linear-gradient(180deg, var(--cds-ai-inner-shadow, rgba(69, 137, 255, 0.2)) 0%, 15%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 100%, transparent 100%);
10796
- border-block-end-color: var(--cds-ai-border-strong, #4589ff);
10929
+ background: linear-gradient(to right, var(--cds-ai-aura-start-table, rgba(69, 137, 255, 0.15)) 0%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%, transparent 50%);
10797
10930
  }
10798
10931
 
10799
10932
  .cds--table-column-slug .cds--slug {
10800
10933
  position: absolute;
10934
+ z-index: 2;
10801
10935
  transform: translateY(-50%);
10802
10936
  }
10803
10937
 
@@ -10811,10 +10945,24 @@ th .cds--table-header-label.cds--table-header-label--slug {
10811
10945
  }
10812
10946
 
10813
10947
  th .cds--table-header-label.cds--table-header-label--slug .cds--slug {
10814
- margin-inline-start: 0.5rem;
10948
+ margin-inline-start: auto;
10949
+ }
10950
+
10951
+ th.cds--table-sort__header--slug,
10952
+ th:has(.cds--table-header-label--slug) {
10953
+ box-shadow: inset 0 1px var(--cds-ai-border-strong, #4589ff);
10954
+ }
10955
+
10956
+ td.cds--table-cell--column-slug {
10957
+ background: linear-gradient(to right, var(--cds-ai-aura-start-table, rgba(69, 137, 255, 0.15)) 0%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%, transparent 50%);
10958
+ }
10959
+
10960
+ tr.cds--parent-row:not(.cds--expandable-row):not(:first-of-type) td.cds--table-cell--column-slug {
10961
+ border-block-start: linear-gradient(to right, var(--cds-ai-aura-start-table, rgba(69, 137, 255, 0.15)) 0%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%, transparent 50%);
10815
10962
  }
10816
10963
 
10817
10964
  @media screen and (-ms-high-contrast: active), (forced-colors: active) {
10965
+ tr.cds--parent-row:not(.cds--expandable-row):not(:first-of-type) td.cds--table-cell--column-slug,
10818
10966
  .cds--data-table-content {
10819
10967
  outline: 1px solid transparent;
10820
10968
  }
@@ -11855,17 +12003,19 @@ tr.cds--parent-row.cds--expandable-row + tr[data-child-row] td {
11855
12003
  transition: padding-bottom 150ms cubic-bezier(0.2, 0, 0.38, 0.9), transform 150ms cubic-bezier(0.2, 0, 0.38, 0.9);
11856
12004
  }
11857
12005
 
11858
- tbody:has(> tr.cds--parent-row--slug) > tr.cds--expandable-row[data-child-row] td,
12006
+ tbody:has(> tr.cds--data-table--slug-row) > tr.cds--expandable-row[data-child-row] td,
11859
12007
  tbody:has(td.cds--table-column-checkbox) > tr.cds--expandable-row[data-child-row] td {
11860
12008
  padding-inline-start: 5.5rem;
11861
12009
  }
11862
12010
 
11863
- tbody:has(> tr.cds--parent-row--slug):has(td.cds--table-column-checkbox) > tr.cds--expandable-row[data-child-row] td {
12011
+ tbody:has(> tr.cds--data-table--slug-row):has(td.cds--table-column-checkbox) > tr.cds--expandable-row[data-child-row] td {
11864
12012
  padding-inline-start: 7.5rem;
11865
12013
  }
11866
12014
 
11867
12015
  tr.cds--parent-row.cds--expandable-row + tr[data-child-row] td .cds--child-row-inner-container {
11868
12016
  max-block-size: 100%;
12017
+ padding-block: 1rem;
12018
+ padding-block-end: 1.5rem;
11869
12019
  }
11870
12020
 
11871
12021
  .cds--parent-row.cds--expandable-row > td,
@@ -12151,8 +12301,8 @@ tr.cds--parent-row.cds--data-table--selected.cds--expandable-row--hover + tr[dat
12151
12301
  border-block-end: 1px solid transparent;
12152
12302
  }
12153
12303
 
12154
- .cds--parent-row--slug td,
12155
- .cds--data-table tr.cds--parent-row--slug:hover td {
12304
+ .cds--data-table--slug-row td,
12305
+ .cds--data-table tr.cds--data-table--slug-row:hover td {
12156
12306
  border-block-start: 1px solid transparent;
12157
12307
  }
12158
12308
 
@@ -12499,9 +12649,14 @@ th .cds--table-sort__flex {
12499
12649
  margin-block-start: 0.8125rem;
12500
12650
  }
12501
12651
 
12652
+ .cds--table-sort__header--slug .cds--table-sort__icon,
12653
+ .cds--table-sort__header--slug .cds--table-sort__icon-unsorted {
12654
+ margin-inline-end: 0.5rem;
12655
+ margin-inline-start: auto;
12656
+ }
12657
+
12502
12658
  .cds--table-sort__header--slug .cds--slug {
12503
- margin-inline-end: auto;
12504
- margin-inline-start: 0.5rem;
12659
+ margin-inline-end: 0.5rem;
12505
12660
  }
12506
12661
 
12507
12662
  @media screen and (-ms-high-contrast: active), (forced-colors: active) {
@@ -14053,6 +14208,7 @@ button.cds--dropdown-text:focus {
14053
14208
  color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
14054
14209
  cursor: no-drop;
14055
14210
  text-decoration: none;
14211
+ transition: none;
14056
14212
  }
14057
14213
  .cds--file-browse-btn--disabled:hover, .cds--file-browse-btn--disabled:focus {
14058
14214
  color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
@@ -17227,6 +17383,18 @@ optgroup.cds--select-optgroup:disabled,
17227
17383
  transform: rotate(180deg);
17228
17384
  }
17229
17385
 
17386
+ .cds--menu-button__top {
17387
+ transform: translate(0, calc(-100% - var(--cds-popover-offset, 3rem)));
17388
+ }
17389
+
17390
+ .cds--menu-button__top-start {
17391
+ transform: translate(0, calc(-100% - var(--cds-popover-offset, 3rem)));
17392
+ }
17393
+
17394
+ .cds--menu-button__top-end {
17395
+ transform: translate(0, calc(-100% - var(--cds-popover-offset, 3rem)));
17396
+ }
17397
+
17230
17398
  .cds--modal {
17231
17399
  position: fixed;
17232
17400
  z-index: 9000;
@@ -17645,12 +17813,12 @@ optgroup.cds--select-optgroup:disabled,
17645
17813
  }
17646
17814
 
17647
17815
  .cds--modal--slug .cds--modal-container {
17648
- background: linear-gradient(to top, var(--cds-ai-aura-start, rgba(69, 137, 255, 0.1)) 0%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%) padding-box, linear-gradient(to top, var(--cds-background, #ffffff), var(--cds-background, #ffffff)) padding-box, linear-gradient(to bottom, var(--cds-ai-border-start, #78a9ff), var(--cds-ai-border-end, #d0e2ff)) border-box, linear-gradient(to top, var(--cds-background, #ffffff), var(--cds-background, #ffffff)) border-box;
17816
+ background: linear-gradient(to top, var(--cds-ai-aura-start, rgba(69, 137, 255, 0.1)) 0%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%) padding-box, linear-gradient(to top, var(--cds-background, var(--cds-background, #ffffff)), var(--cds-background, var(--cds-background, #ffffff))) padding-box, linear-gradient(to bottom, var(--cds-ai-border-start, #78a9ff), var(--cds-ai-border-end, #d0e2ff)) border-box, linear-gradient(to top, var(--cds-background, var(--cds-background, #ffffff)), var(--cds-background, var(--cds-background, #ffffff))) border-box;
17649
17817
  background-color: var(--cds-layer);
17650
17818
  }
17651
17819
 
17652
17820
  .cds--modal--slug .cds--modal-container:has(.cds--btn-set:not(.cds--modal-footer--three-button) > button:not(:only-child)) {
17653
- background: linear-gradient(to top, var(--cds-ai-aura-start, rgba(69, 137, 255, 0.1)) calc(0% + 64px), var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%) padding-box, linear-gradient(to top, var(--cds-background, #ffffff), var(--cds-background, #ffffff)) padding-box, linear-gradient(to bottom, var(--cds-ai-border-start, #78a9ff), var(--cds-ai-border-end, #d0e2ff)) border-box, linear-gradient(to top, var(--cds-background, #ffffff), var(--cds-background, #ffffff)) border-box;
17821
+ background: linear-gradient(to top, var(--cds-ai-aura-start, rgba(69, 137, 255, 0.1)) calc(0% + 64px), var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%) padding-box, linear-gradient(to top, var(--cds-background, var(--cds-background, #ffffff)), var(--cds-background, var(--cds-background, #ffffff))) padding-box, linear-gradient(to bottom, var(--cds-ai-border-start, #78a9ff), var(--cds-ai-border-end, #d0e2ff)) border-box, linear-gradient(to top, var(--cds-background, var(--cds-background, #ffffff)), var(--cds-background, var(--cds-background, #ffffff))) border-box;
17654
17822
  background-color: var(--cds-layer);
17655
17823
  }
17656
17824
 
@@ -20834,7 +21002,7 @@ span.cds--pagination__text.cds--pagination__items-count {
20834
21002
  }
20835
21003
 
20836
21004
  .cds--slug.cds--slug--enabled .cds--slug-content {
20837
- background: linear-gradient(to top, var(--cds-ai-aura-start, rgba(69, 137, 255, 0.1)) 0%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%) padding-box, linear-gradient(to top, var(--cds-background, #ffffff), var(--cds-background, #ffffff)) padding-box, linear-gradient(to bottom, var(--cds-ai-border-start, #78a9ff), var(--cds-ai-border-end, #d0e2ff)) border-box, linear-gradient(to top, var(--cds-background, #ffffff), var(--cds-background, #ffffff)) border-box;
21005
+ background: linear-gradient(to top, var(--cds-ai-aura-start, rgba(69, 137, 255, 0.1)) 0%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%) padding-box, linear-gradient(to top, var(--cds-background, var(--cds-background, #ffffff)), var(--cds-background, var(--cds-background, #ffffff))) padding-box, linear-gradient(to bottom, var(--cds-ai-border-start, #78a9ff), var(--cds-ai-border-end, #d0e2ff)) border-box, linear-gradient(to top, var(--cds-background, var(--cds-background, #ffffff)), var(--cds-background, var(--cds-background, #ffffff))) border-box;
20838
21006
  border: 1px solid transparent;
20839
21007
  border-radius: 0.5rem;
20840
21008
  box-shadow: inset 0 -80px 70px -65px var(--cds-ai-inner-shadow, rgba(69, 137, 255, 0.2)), -40px 30px 100px -25px var(--cds-slug-callout-shadow-outer-01, rgba(0, 67, 206, 0.25)), -60px 80px 60px -45px var(--cds-slug-callout-shadow-outer-02, rgba(0, 0, 0, 0.1));
@@ -22229,13 +22397,13 @@ span.cds--pagination__text.cds--pagination__items-count {
22229
22397
  }
22230
22398
 
22231
22399
  .cds--tile--slug.cds--tile {
22232
- background: linear-gradient(to top, var(--cds-ai-aura-start, rgba(69, 137, 255, 0.1)) 0%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%) padding-box, linear-gradient(to top, var(--cds-layer), var(--cds-layer)) padding-box, linear-gradient(to bottom, var(--cds-ai-border-start, #78a9ff), var(--cds-ai-border-end, #d0e2ff)) border-box, linear-gradient(to top, var(--cds-layer), var(--cds-layer)) border-box;
22400
+ background: linear-gradient(to top, var(--cds-ai-aura-start, rgba(69, 137, 255, 0.1)) 0%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%) padding-box, linear-gradient(to top, var(--cds-layer, var(--cds-background, #ffffff)), var(--cds-layer, var(--cds-background, #ffffff))) padding-box, linear-gradient(to bottom, var(--cds-ai-border-start, #78a9ff), var(--cds-ai-border-end, #d0e2ff)) border-box, linear-gradient(to top, var(--cds-layer, var(--cds-background, #ffffff)), var(--cds-layer, var(--cds-background, #ffffff))) border-box;
22233
22401
  border: 1px solid transparent;
22234
22402
  box-shadow: inset 0 -80px 70px -65px var(--cds-ai-inner-shadow, rgba(69, 137, 255, 0.2)), 0 4px 10px 2px var(--cds-ai-drop-shadow, rgba(15, 98, 254, 0.32));
22235
22403
  }
22236
22404
 
22237
22405
  .cds--tile--slug.cds--tile--expandable:hover {
22238
- background: linear-gradient(to top, var(--cds-ai-aura-start, rgba(69, 137, 255, 0.1)) 0%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%) padding-box, linear-gradient(to top, var(--cds-layer), var(--cds-layer)) padding-box, linear-gradient(to bottom, var(--cds-ai-border-start, #78a9ff), var(--cds-ai-border-end, #d0e2ff)) border-box, linear-gradient(to top, var(--cds-layer), var(--cds-layer)) border-box;
22406
+ background: linear-gradient(to top, var(--cds-ai-aura-start, rgba(69, 137, 255, 0.1)) 0%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%) padding-box, linear-gradient(to top, var(--cds-layer, var(--cds-background, #ffffff)), var(--cds-layer, var(--cds-background, #ffffff))) padding-box, linear-gradient(to bottom, var(--cds-ai-border-start, #78a9ff), var(--cds-ai-border-end, #d0e2ff)) border-box, linear-gradient(to top, var(--cds-layer, var(--cds-background, #ffffff)), var(--cds-layer, var(--cds-background, #ffffff))) border-box;
22239
22407
  }
22240
22408
 
22241
22409
  .cds--tile--slug.cds--tile--selectable::before,
@@ -26160,7 +26328,7 @@ a.cds--side-nav__link--current::before {
26160
26328
  padding-top: 0.5rem;
26161
26329
  }
26162
26330
  .c4p--side-panel.c4p--side-panel--has-slug .c4p--side-panel--scrolls {
26163
- background: linear-gradient(to top, var(--cds-ai-aura-start, rgba(69, 137, 255, 0.1)) 0%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%) padding-box, linear-gradient(to top, var(--cds-layer), var(--cds-layer)) padding-box, linear-gradient(to bottom, var(--cds-ai-border-start, #78a9ff), var(--cds-ai-border-end, #d0e2ff)) border-box, linear-gradient(to top, var(--cds-layer), var(--cds-layer)) border-box;
26331
+ background: linear-gradient(to top, var(--cds-ai-aura-start, rgba(69, 137, 255, 0.1)) 0%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%) padding-box, linear-gradient(to top, var(--cds-layer, var(--cds-background, #ffffff)), var(--cds-layer, var(--cds-background, #ffffff))) padding-box, linear-gradient(to bottom, var(--cds-ai-border-start, #78a9ff), var(--cds-ai-border-end, #d0e2ff)) border-box, linear-gradient(to top, var(--cds-layer, var(--cds-background, #ffffff)), var(--cds-layer, var(--cds-background, #ffffff))) border-box;
26164
26332
  }
26165
26333
  .c4p--side-panel .c4p--side-panel__inner-content.c4p--side-panel--scrolls {
26166
26334
  padding-top: 1rem;
@@ -26202,7 +26370,7 @@ a.cds--side-nav__link--current::before {
26202
26370
  height: 2.5rem;
26203
26371
  }
26204
26372
  .c4p--side-panel .c4p--side-panel__slug-and-close {
26205
- position: fixed;
26373
+ position: absolute;
26206
26374
  z-index: 10; /* must be higher than title container border bottom */
26207
26375
  top: 0;
26208
26376
  right: 0;
@@ -26365,6 +26533,12 @@ a.cds--side-nav__link--current::before {
26365
26533
  max-height: calc(100% - 3rem);
26366
26534
  transform: translate3d(0, min(95vh, 500px), 0);
26367
26535
  }
26536
+ .c4p--tearsheet.c4p--tearsheet.c4p--tearsheet.c4p--tearsheet.c4p--tearsheet--has-slug .c4p--tearsheet__container {
26537
+ border: 1px solid transparent;
26538
+ /* override carbon ai removing background gradient */
26539
+ background: linear-gradient(to top, var(--cds-layer), var(--cds-layer)) padding-box, linear-gradient(to bottom, var(--cds-ai-border-start, #78a9ff), var(--cds-ai-border-end, #d0e2ff)) border-box, linear-gradient(to top, var(--cds-layer), var(--cds-layer)) border-box;
26540
+ box-shadow: 0 4px 10px 2px var(--cds-ai-drop-shadow, rgba(15, 98, 254, 0.32));
26541
+ }
26368
26542
  .c4p--tearsheet.c4p--tearsheet.c4p--tearsheet .c4p--tearsheet__container {
26369
26543
  transition: transform 240ms cubic-bezier(0, 0, 0.3, 1), max-height 240ms cubic-bezier(0, 0, 0.3, 1);
26370
26544
  }
@@ -26462,8 +26636,11 @@ a.cds--side-nav__link--current::before {
26462
26636
  .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__header.c4p--tearsheet__header--with-nav {
26463
26637
  padding: 1.5rem 2rem 0;
26464
26638
  }
26465
- .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__header.c4p--tearsheet__header--with-close-icon {
26466
- padding-right: 4rem;
26639
+ .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__header.c4p--tearsheet__header--with-close-icon, .c4p--tearsheet.c4p--tearsheet--has-slug .c4p--tearsheet__header.c4p--tearsheet__header {
26640
+ padding-right: 5rem;
26641
+ }
26642
+ .c4p--tearsheet.c4p--tearsheet--wide.c4p--tearsheet--has-slug .c4p--tearsheet__header.c4p--tearsheet__header--with-close-icon {
26643
+ margin-right: 3rem;
26467
26644
  }
26468
26645
  .c4p--tearsheet.c4p--tearsheet--narrow .c4p--tearsheet__header-description {
26469
26646
  max-width: 80%;
@@ -26516,6 +26693,9 @@ a.cds--side-nav__link--current::before {
26516
26693
  overflow: auto;
26517
26694
  flex-grow: 1;
26518
26695
  }
26696
+ .c4p--tearsheet.c4p--tearsheet--has-slug .c4p--tearsheet__main {
26697
+ background: linear-gradient(to top, var(--cds-ai-aura-start, rgba(69, 137, 255, 0.1)) 0%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%) padding-box, linear-gradient(to top, var(--cds-background, var(--cds-background, #ffffff)), var(--cds-background, var(--cds-background, #ffffff))) padding-box, linear-gradient(to bottom, var(--cds-ai-border-start, #78a9ff), var(--cds-ai-border-end, #d0e2ff)) border-box, linear-gradient(to top, var(--cds-background, var(--cds-background, #ffffff)), var(--cds-background, var(--cds-background, #ffffff))) border-box;
26698
+ }
26519
26699
  .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__content .cds--pagination,
26520
26700
  .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__content .cds--pagination__control-buttons,
26521
26701
  .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__content .cds--text-input,
@@ -26554,6 +26734,9 @@ a.cds--side-nav__link--current::before {
26554
26734
  .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__buttons {
26555
26735
  background: var(--cds-background, #ffffff);
26556
26736
  }
26737
+ .c4p--tearsheet.c4p--tearsheet--has-slug:not(.c4p--tearsheet--has-close) .cds--slug {
26738
+ inset-inline-end: 0;
26739
+ }
26557
26740
 
26558
26741
  @keyframes step-content-entrance {
26559
26742
  0% {
@@ -26983,7 +27166,7 @@ a.cds--side-nav__link--current::before {
26983
27166
  }
26984
27167
 
26985
27168
  .c4p--card--has-slug {
26986
- background: linear-gradient(to top, var(--cds-ai-aura-start, rgba(69, 137, 255, 0.1)) 0%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%) padding-box, linear-gradient(to top, var(--cds-layer), var(--cds-layer)) padding-box, linear-gradient(to bottom, var(--cds-ai-border-start, #78a9ff), var(--cds-ai-border-end, #d0e2ff)) border-box, linear-gradient(to top, var(--cds-layer), var(--cds-layer)) border-box;
27169
+ background: linear-gradient(to top, var(--cds-ai-aura-start, rgba(69, 137, 255, 0.1)) 0%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%) padding-box, linear-gradient(to top, var(--cds-layer, var(--cds-background, #ffffff)), var(--cds-layer, var(--cds-background, #ffffff))) padding-box, linear-gradient(to bottom, var(--cds-ai-border-start, #78a9ff), var(--cds-ai-border-end, #d0e2ff)) border-box, linear-gradient(to top, var(--cds-layer, var(--cds-background, #ffffff)), var(--cds-layer, var(--cds-background, #ffffff))) border-box;
26987
27170
  border: 1px solid transparent;
26988
27171
  box-shadow: inset 0 -80px 70px -65px var(--cds-ai-inner-shadow, rgba(69, 137, 255, 0.2)), 0 4px 10px 2px var(--cds-ai-drop-shadow, rgba(15, 98, 254, 0.32));
26989
27172
  }
@@ -27616,6 +27799,7 @@ button.c4p--add-select__global-filter-toggle--open {
27616
27799
  --cds-ai-aura-hover-end: rgba(0, 0, 0, 0);
27617
27800
  --cds-ai-aura-hover-start: rgba(69, 137, 255, 0.4);
27618
27801
  --cds-ai-aura-start: rgba(69, 137, 255, 0.1);
27802
+ --cds-ai-aura-start-table: rgba(69, 137, 255, 0.15);
27619
27803
  --cds-ai-border-end: rgba(166, 200, 255, 0.24);
27620
27804
  --cds-ai-border-start: #4589ff;
27621
27805
  --cds-ai-border-strong: #78a9ff;
@@ -27648,9 +27832,9 @@ button.c4p--add-select__global-filter-toggle--open {
27648
27832
  --cds-border-tile-01: #525252;
27649
27833
  --cds-border-tile-02: #6f6f6f;
27650
27834
  --cds-border-tile-03: #8d8d8d;
27651
- --cds-chat-avatar-agent: #f4f4f4;
27652
- --cds-chat-avatar-bot: #4589ff;
27653
- --cds-chat-avatar-user: #f4f4f4;
27835
+ --cds-chat-avatar-agent: #c6c6c6;
27836
+ --cds-chat-avatar-bot: #8d8d8d;
27837
+ --cds-chat-avatar-user: #4589ff;
27654
27838
  --cds-chat-bubble-agent: #262626;
27655
27839
  --cds-chat-bubble-agent-border: #525252;
27656
27840
  --cds-chat-bubble-user: #393939;
@@ -31342,6 +31526,7 @@ button.c4p--add-select__global-filter-toggle--open {
31342
31526
  --cds-ai-aura-hover-end: rgba(0, 0, 0, 0);
31343
31527
  --cds-ai-aura-hover-start: rgba(69, 137, 255, 0.4);
31344
31528
  --cds-ai-aura-start: rgba(69, 137, 255, 0.1);
31529
+ --cds-ai-aura-start-table: rgba(69, 137, 255, 0.15);
31345
31530
  --cds-ai-border-end: rgba(166, 200, 255, 0.24);
31346
31531
  --cds-ai-border-start: #4589ff;
31347
31532
  --cds-ai-border-strong: #78a9ff;
@@ -31374,9 +31559,9 @@ button.c4p--add-select__global-filter-toggle--open {
31374
31559
  --cds-border-tile-01: #6f6f6f;
31375
31560
  --cds-border-tile-02: #8d8d8d;
31376
31561
  --cds-border-tile-03: #a8a8a8;
31377
- --cds-chat-avatar-agent: #f4f4f4;
31378
- --cds-chat-avatar-bot: #4589ff;
31379
- --cds-chat-avatar-user: #f4f4f4;
31562
+ --cds-chat-avatar-agent: #c6c6c6;
31563
+ --cds-chat-avatar-bot: #8d8d8d;
31564
+ --cds-chat-avatar-user: #4589ff;
31380
31565
  --cds-chat-bubble-agent: #262626;
31381
31566
  --cds-chat-bubble-agent-border: #525252;
31382
31567
  --cds-chat-bubble-user: #393939;
@@ -31836,6 +32021,7 @@ button.c4p--add-select__global-filter-toggle--open {
31836
32021
  --cds-ai-aura-hover-end: rgba(0, 0, 0, 0);
31837
32022
  --cds-ai-aura-hover-start: rgba(69, 137, 255, 0.4);
31838
32023
  --cds-ai-aura-start: rgba(69, 137, 255, 0.1);
32024
+ --cds-ai-aura-start-table: rgba(69, 137, 255, 0.15);
31839
32025
  --cds-ai-border-end: rgba(166, 200, 255, 0.24);
31840
32026
  --cds-ai-border-start: #4589ff;
31841
32027
  --cds-ai-border-strong: #78a9ff;
@@ -31868,9 +32054,9 @@ button.c4p--add-select__global-filter-toggle--open {
31868
32054
  --cds-border-tile-01: #525252;
31869
32055
  --cds-border-tile-02: #6f6f6f;
31870
32056
  --cds-border-tile-03: #8d8d8d;
31871
- --cds-chat-avatar-agent: #f4f4f4;
31872
- --cds-chat-avatar-bot: #4589ff;
31873
- --cds-chat-avatar-user: #f4f4f4;
32057
+ --cds-chat-avatar-agent: #c6c6c6;
32058
+ --cds-chat-avatar-bot: #8d8d8d;
32059
+ --cds-chat-avatar-user: #4589ff;
31874
32060
  --cds-chat-bubble-agent: #262626;
31875
32061
  --cds-chat-bubble-agent-border: #525252;
31876
32062
  --cds-chat-bubble-user: #393939;
@@ -37423,6 +37609,13 @@ a.cds--side-nav__link--current::before {
37423
37609
  transform: translate3d(0, min(95vh, 500px), 0);
37424
37610
  }
37425
37611
 
37612
+ .c4p--tearsheet.c4p--tearsheet.c4p--tearsheet.c4p--tearsheet.c4p--tearsheet--has-slug .c4p--tearsheet__container {
37613
+ border: 1px solid transparent;
37614
+ /* override carbon ai removing background gradient */
37615
+ background: linear-gradient(to top, var(--cds-layer), var(--cds-layer)) padding-box, linear-gradient(to bottom, var(--cds-ai-border-start, #78a9ff), var(--cds-ai-border-end, #d0e2ff)) border-box, linear-gradient(to top, var(--cds-layer), var(--cds-layer)) border-box;
37616
+ box-shadow: 0 4px 10px 2px var(--cds-ai-drop-shadow, rgba(15, 98, 254, 0.32));
37617
+ }
37618
+
37426
37619
  .c4p--tearsheet.c4p--tearsheet.c4p--tearsheet .c4p--tearsheet__container {
37427
37620
  transition: transform 240ms cubic-bezier(0, 0, 0.3, 1), max-height 240ms cubic-bezier(0, 0, 0.3, 1);
37428
37621
  }
@@ -37542,8 +37735,12 @@ a.cds--side-nav__link--current::before {
37542
37735
  padding: 1.5rem 2rem 0;
37543
37736
  }
37544
37737
 
37545
- .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__header.c4p--tearsheet__header--with-close-icon {
37546
- padding-right: 4rem;
37738
+ .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__header.c4p--tearsheet__header--with-close-icon, .c4p--tearsheet.c4p--tearsheet--has-slug .c4p--tearsheet__header.c4p--tearsheet__header {
37739
+ padding-right: 5rem;
37740
+ }
37741
+
37742
+ .c4p--tearsheet.c4p--tearsheet--wide.c4p--tearsheet--has-slug .c4p--tearsheet__header.c4p--tearsheet__header--with-close-icon {
37743
+ margin-right: 3rem;
37547
37744
  }
37548
37745
 
37549
37746
  .c4p--tearsheet.c4p--tearsheet--narrow .c4p--tearsheet__header-description {
@@ -37609,6 +37806,10 @@ a.cds--side-nav__link--current::before {
37609
37806
  flex-grow: 1;
37610
37807
  }
37611
37808
 
37809
+ .c4p--tearsheet.c4p--tearsheet--has-slug .c4p--tearsheet__main {
37810
+ background: linear-gradient(to top, var(--cds-ai-aura-start, rgba(69, 137, 255, 0.1)) 0%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%) padding-box, linear-gradient(to top, var(--cds-background, var(--cds-background, #ffffff)), var(--cds-background, var(--cds-background, #ffffff))) padding-box, linear-gradient(to bottom, var(--cds-ai-border-start, #78a9ff), var(--cds-ai-border-end, #d0e2ff)) border-box, linear-gradient(to top, var(--cds-background, var(--cds-background, #ffffff)), var(--cds-background, var(--cds-background, #ffffff))) border-box;
37811
+ }
37812
+
37612
37813
  .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__content .cds--pagination,
37613
37814
  .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__content .cds--pagination__control-buttons,
37614
37815
  .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__content .cds--text-input,
@@ -37653,6 +37854,10 @@ a.cds--side-nav__link--current::before {
37653
37854
  background: var(--cds-background, #ffffff);
37654
37855
  }
37655
37856
 
37857
+ .c4p--tearsheet.c4p--tearsheet--has-slug:not(.c4p--tearsheet--has-close) .cds--slug {
37858
+ inset-inline-end: 0;
37859
+ }
37860
+
37656
37861
  @keyframes influencer-menu-entrance {
37657
37862
  0% {
37658
37863
  opacity: 0;
@@ -38163,6 +38368,7 @@ a.cds--side-nav__link--current::before {
38163
38368
  --cds-ai-aura-hover-end: rgba(0, 0, 0, 0);
38164
38369
  --cds-ai-aura-hover-start: rgba(69, 137, 255, 0.4);
38165
38370
  --cds-ai-aura-start: rgba(69, 137, 255, 0.1);
38371
+ --cds-ai-aura-start-table: rgba(69, 137, 255, 0.15);
38166
38372
  --cds-ai-border-end: rgba(166, 200, 255, 0.24);
38167
38373
  --cds-ai-border-start: #4589ff;
38168
38374
  --cds-ai-border-strong: #78a9ff;
@@ -38195,9 +38401,9 @@ a.cds--side-nav__link--current::before {
38195
38401
  --cds-border-tile-01: #525252;
38196
38402
  --cds-border-tile-02: #6f6f6f;
38197
38403
  --cds-border-tile-03: #8d8d8d;
38198
- --cds-chat-avatar-agent: #f4f4f4;
38199
- --cds-chat-avatar-bot: #4589ff;
38200
- --cds-chat-avatar-user: #f4f4f4;
38404
+ --cds-chat-avatar-agent: #c6c6c6;
38405
+ --cds-chat-avatar-bot: #8d8d8d;
38406
+ --cds-chat-avatar-user: #4589ff;
38201
38407
  --cds-chat-bubble-agent: #262626;
38202
38408
  --cds-chat-bubble-agent-border: #525252;
38203
38409
  --cds-chat-bubble-user: #393939;
@@ -39031,6 +39237,7 @@ a.cds--side-nav__link--current::before {
39031
39237
  --cds-ai-aura-hover-end: rgba(0, 0, 0, 0);
39032
39238
  --cds-ai-aura-hover-start: rgba(69, 137, 255, 0.4);
39033
39239
  --cds-ai-aura-start: rgba(69, 137, 255, 0.1);
39240
+ --cds-ai-aura-start-table: rgba(69, 137, 255, 0.15);
39034
39241
  --cds-ai-border-end: rgba(166, 200, 255, 0.24);
39035
39242
  --cds-ai-border-start: #4589ff;
39036
39243
  --cds-ai-border-strong: #78a9ff;
@@ -39063,9 +39270,9 @@ a.cds--side-nav__link--current::before {
39063
39270
  --cds-border-tile-01: #525252;
39064
39271
  --cds-border-tile-02: #6f6f6f;
39065
39272
  --cds-border-tile-03: #8d8d8d;
39066
- --cds-chat-avatar-agent: #f4f4f4;
39067
- --cds-chat-avatar-bot: #4589ff;
39068
- --cds-chat-avatar-user: #f4f4f4;
39273
+ --cds-chat-avatar-agent: #c6c6c6;
39274
+ --cds-chat-avatar-bot: #8d8d8d;
39275
+ --cds-chat-avatar-user: #4589ff;
39069
39276
  --cds-chat-bubble-agent: #262626;
39070
39277
  --cds-chat-bubble-agent-border: #525252;
39071
39278
  --cds-chat-bubble-user: #393939;
@@ -39579,6 +39786,157 @@ a.cds--side-nav__link--current::before {
39579
39786
  display: none;
39580
39787
  }
39581
39788
 
39789
+ .c4p--big-numbers__label {
39790
+ font-size: var(--cds-label-01-font-size, 0.75rem);
39791
+ font-weight: var(--cds-label-01-font-weight, 400);
39792
+ line-height: var(--cds-label-01-line-height, 1.33333);
39793
+ letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
39794
+ display: block;
39795
+ margin: 0;
39796
+ color: var(--cds-text-secondary, #525252);
39797
+ }
39798
+
39799
+ .c4p--big-numbers__value {
39800
+ font-size: var(--cds-heading-04-font-size, 1.75rem);
39801
+ font-weight: var(--cds-heading-04-font-weight, 400);
39802
+ line-height: var(--cds-heading-04-line-height, 1.28572);
39803
+ letter-spacing: var(--cds-heading-04-letter-spacing, 0);
39804
+ margin-bottom: 0;
39805
+ }
39806
+
39807
+ .c4p--big-numbers__total {
39808
+ font-size: var(--cds-body-compact-01-font-size, 0.875rem);
39809
+ font-weight: var(--cds-body-compact-01-font-weight, 400);
39810
+ line-height: var(--cds-body-compact-01-line-height, 1.28572);
39811
+ letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
39812
+ }
39813
+
39814
+ .c4p--big-numbers__total,
39815
+ .c4p--big-numbers__percentage-mark {
39816
+ margin-top: auto;
39817
+ margin-bottom: 0.25rem;
39818
+ }
39819
+
39820
+ .c4p--big-numbers__info {
39821
+ vertical-align: top;
39822
+ }
39823
+
39824
+ .c4p--big-numbers__trend {
39825
+ margin-top: 0.5rem;
39826
+ vertical-align: top;
39827
+ }
39828
+
39829
+ .c4p--big-numbers__row {
39830
+ display: flex;
39831
+ }
39832
+
39833
+ .c4p--big-numbers__info {
39834
+ padding-left: 0.5rem;
39835
+ }
39836
+
39837
+ .c4p--big-numbers__percentage {
39838
+ font-size: var(--cds-heading-04-font-size, 1.75rem);
39839
+ font-weight: var(--cds-heading-04-font-weight, 400);
39840
+ line-height: var(--cds-heading-04-line-height, 1.28572);
39841
+ letter-spacing: var(--cds-heading-04-letter-spacing, 0);
39842
+ }
39843
+
39844
+ .c4p--big-numbers__percentage-mark {
39845
+ font-size: var(--cds-body-compact-01-font-size, 0.875rem);
39846
+ font-weight: var(--cds-body-compact-01-font-weight, 400);
39847
+ line-height: var(--cds-body-compact-01-line-height, 1.28572);
39848
+ letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
39849
+ }
39850
+
39851
+ .c4p--big-numbers--lg .c4p--big-numbers__value,
39852
+ .c4p--big-numbers--lg .c4p--big-numbers__percentage {
39853
+ font-size: var(--cds-heading-06-font-size, 2.625rem);
39854
+ font-weight: var(--cds-heading-06-font-weight, 300);
39855
+ line-height: var(--cds-heading-06-line-height, 1.199);
39856
+ letter-spacing: var(--cds-heading-06-letter-spacing, 0);
39857
+ }
39858
+
39859
+ .c4p--big-numbers--lg .c4p--big-numbers__total,
39860
+ .c4p--big-numbers--lg .c4p--big-numbers__percentage-mark {
39861
+ font-size: var(--cds-heading-03-font-size, 1.25rem);
39862
+ font-weight: var(--cds-heading-03-font-weight, 400);
39863
+ line-height: var(--cds-heading-03-line-height, 1.4);
39864
+ letter-spacing: var(--cds-heading-03-letter-spacing, 0);
39865
+ }
39866
+
39867
+ .c4p--big-numbers--xl .c4p--big-numbers__label {
39868
+ font-size: var(--cds-body-compact-01-font-size, 0.875rem);
39869
+ font-weight: var(--cds-body-compact-01-font-weight, 400);
39870
+ line-height: var(--cds-body-compact-01-line-height, 1.28572);
39871
+ letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
39872
+ }
39873
+
39874
+ .c4p--big-numbers--xl .c4p--big-numbers__value,
39875
+ .c4p--big-numbers--xl .c4p--big-numbers__percentage {
39876
+ font-size: var(--cds-heading-07-font-size, 3.375rem);
39877
+ font-weight: var(--cds-heading-07-font-weight, 300);
39878
+ line-height: var(--cds-heading-07-line-height, 1.19);
39879
+ letter-spacing: var(--cds-heading-07-letter-spacing, 0);
39880
+ }
39881
+
39882
+ .c4p--big-numbers--xl .c4p--big-numbers__total,
39883
+ .c4p--big-numbers--xl .c4p--big-numbers__percentage-mark {
39884
+ font-size: var(--cds-heading-04-font-size, 1.75rem);
39885
+ font-weight: var(--cds-heading-04-font-weight, 400);
39886
+ line-height: var(--cds-heading-04-line-height, 1.28572);
39887
+ letter-spacing: var(--cds-heading-04-letter-spacing, 0);
39888
+ }
39889
+
39890
+ .c4p--big-numbers--xl .c4p--big-numbers__trend {
39891
+ margin-top: 0.75rem;
39892
+ }
39893
+
39894
+ .c4p--big-numbers-skeleton {
39895
+ width: 4rem;
39896
+ }
39897
+
39898
+ .c4p--big-numbers-skeleton__label {
39899
+ height: 0.75rem;
39900
+ margin-top: 0;
39901
+ margin-bottom: 0.5rem;
39902
+ }
39903
+
39904
+ .c4p--big-numbers-skeleton__value {
39905
+ /* stylelint-disable-next-line declaration-no-important */
39906
+ height: 2.5rem !important;
39907
+ margin: 0;
39908
+ }
39909
+
39910
+ .c4p--big-numbers-skeleton--lg {
39911
+ width: 5rem;
39912
+ }
39913
+
39914
+ .c4p--big-numbers-skeleton--xl {
39915
+ width: 6rem;
39916
+ }
39917
+
39918
+ .c4p--big-numbers-skeleton.c4p--big-numbers-skeleton--lg .c4p--big-numbers-skeleton__label {
39919
+ height: 0.75rem;
39920
+ }
39921
+
39922
+ .c4p--big-numbers-skeleton.c4p--big-numbers-skeleton--lg .c4p--big-numbers-skeleton__value {
39923
+ /* stylelint-disable-next-line declaration-no-important */
39924
+ height: 3rem !important;
39925
+ }
39926
+
39927
+ .c4p--big-numbers-skeleton.c4p--big-numbers-skeleton--xl .c4p--big-numbers-skeleton__label {
39928
+ height: 0.75rem;
39929
+ }
39930
+
39931
+ .c4p--big-numbers-skeleton.c4p--big-numbers-skeleton--xl .c4p--big-numbers-skeleton__value {
39932
+ /* stylelint-disable-next-line declaration-no-important */
39933
+ height: 4rem !important;
39934
+ }
39935
+
39936
+ .c4p--big-numbers .c4p--big-numbers__tooltip-trigger:focus {
39937
+ outline: 1px solid var(--cds-focus, #0f62fe);
39938
+ }
39939
+
39582
39940
  .c4p--truncated-list__list {
39583
39941
  /* stylelint-disable-next-line carbon/motion-duration-use */
39584
39942
  transition: height 240ms cubic-bezier(0.2, 0, 1, 0.9);
@@ -39879,11 +40237,11 @@ a.cds--side-nav__link--current::before {
39879
40237
  .c4p--full-page-error__error-svg-container {
39880
40238
  display: flex;
39881
40239
  height: 100%;
39882
- margin: 0.5rem 0.5rem 5rem 0.5rem;
40240
+ padding: 0.5rem 0.5rem 5rem 0.5rem;
39883
40241
  }
39884
40242
  @media (min-width: 42rem) {
39885
40243
  .c4p--full-page-error__error-svg-container {
39886
- margin: auto 0.5rem 5rem 0.5rem;
40244
+ padding: auto 0.5rem 5rem 0.5rem;
39887
40245
  }
39888
40246
  }
39889
40247
 
@@ -39962,6 +40320,68 @@ a.cds--side-nav__link--current::before {
39962
40320
  position: absolute;
39963
40321
  }
39964
40322
 
40323
+ .c4p--string-formatter {
40324
+ display: inline-block;
40325
+ text-align: left;
40326
+ }
40327
+
40328
+ .c4p--string-formatter--content {
40329
+ display: inline-block;
40330
+ text-align: left;
40331
+ }
40332
+
40333
+ .c4p--string-formatter--truncate {
40334
+ display: -webkit-box;
40335
+ overflow: hidden;
40336
+ max-width: 80ch;
40337
+ -webkit-box-orient: vertical;
40338
+ -webkit-line-clamp: 1;
40339
+ }
40340
+
40341
+ .c4p--string-formatter__tooltip > button {
40342
+ border-width: 0;
40343
+ color: currentColor;
40344
+ font-size: inherit;
40345
+ font-weight: inherit;
40346
+ line-height: inherit;
40347
+ }
40348
+
40349
+ .cds--popover {
40350
+ max-width: 1rem;
40351
+ margin: 0 auto;
40352
+ }
40353
+
40354
+ .c4p--string-formatter .cds--popover-content {
40355
+ max-inline-size: 20rem;
40356
+ }
40357
+
40358
+ .c4p--string-formatter .cds--popover--left .cds--popover,
40359
+ .c4p--string-formatter .cds--popover--left-bottom .cds--popover,
40360
+ .c4p--string-formatter .cds--popover--left-top .cds--popover {
40361
+ margin: 0;
40362
+ }
40363
+
40364
+ .c4p--string-formatter .cds--popover--right .cds--popover,
40365
+ .c4p--string-formatter .cds--popover--right-bottom .cds--popover,
40366
+ .c4p--string-formatter .cds--popover--right-top .cds--popover {
40367
+ margin-right: 0;
40368
+ margin-left: auto;
40369
+ }
40370
+
40371
+ .c4p--string-formatter .cds--popover--top .cds--popover-caret,
40372
+ .c4p--string-formatter .cds--popover--top-left .cds--popover-caret,
40373
+ .c4p--string-formatter .cds--popover--top-right .cds--popover-caret {
40374
+ /* stylelint-disable-next-line declaration-no-important */
40375
+ inset-block-start: -1px !important;
40376
+ }
40377
+
40378
+ .c4p--string-formatter .cds--popover--bottom .cds--popover-caret,
40379
+ .c4p--string-formatter .cds--popover--bottom-left .cds--popover-caret,
40380
+ .c4p--string-formatter .cds--popover--bottom-right .cds--popover-caret {
40381
+ /* stylelint-disable-next-line declaration-no-important */
40382
+ inset-block-end: -1px !important;
40383
+ }
40384
+
39965
40385
  .c4p--user-avatar {
39966
40386
  position: relative;
39967
40387
  display: flex;
@@ -39971,10 +40391,15 @@ a.cds--side-nav__link--current::before {
39971
40391
  justify-content: center;
39972
40392
  border: 0.5px solid transparent;
39973
40393
  border-radius: 100%;
40394
+ color: var(--cds-text-inverse, #ffffff);
39974
40395
  outline: none;
39975
40396
  outline-offset: 3px;
39976
40397
  }
39977
40398
 
40399
+ .c4p--user-avatar svg {
40400
+ color: var(--cds-icon-inverse, #ffffff);
40401
+ }
40402
+
39978
40403
  .c4p--user-avatar__tooltip:focus-within .c4p--user-avatar {
39979
40404
  outline: 2px solid var(--cds-focus, #0f62fe);
39980
40405
  }
@@ -39987,4 +40412,40 @@ a.cds--side-nav__link--current::before {
39987
40412
  background-color: #0072c3;
39988
40413
  }
39989
40414
 
40415
+ .c4p--user-avatar--xl {
40416
+ width: 4rem;
40417
+ height: 4rem;
40418
+ font-size: var(--cds-heading-04-font-size, 1.75rem);
40419
+ font-weight: var(--cds-heading-04-font-weight, 400);
40420
+ line-height: var(--cds-heading-04-line-height, 1.28572);
40421
+ letter-spacing: var(--cds-heading-04-letter-spacing, 0);
40422
+ }
40423
+
40424
+ .c4p--user-avatar--lg {
40425
+ width: 3rem;
40426
+ height: 3rem;
40427
+ font-size: var(--cds-heading-03-font-size, 1.25rem);
40428
+ font-weight: var(--cds-heading-03-font-weight, 400);
40429
+ line-height: var(--cds-heading-03-line-height, 1.4);
40430
+ letter-spacing: var(--cds-heading-03-letter-spacing, 0);
40431
+ }
40432
+
40433
+ .c4p--user-avatar--md {
40434
+ width: 2rem;
40435
+ height: 2rem;
40436
+ font-size: var(--cds-body-compact-01-font-size, 0.875rem);
40437
+ font-weight: var(--cds-body-compact-01-font-weight, 400);
40438
+ line-height: var(--cds-body-compact-01-line-height, 1.28572);
40439
+ letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
40440
+ }
40441
+
40442
+ .c4p--user-avatar--sm {
40443
+ width: 1.5rem;
40444
+ height: 1.5rem;
40445
+ font-size: var(--cds-label-01-font-size, 0.75rem);
40446
+ font-weight: var(--cds-label-01-font-weight, 400);
40447
+ line-height: var(--cds-label-01-line-height, 1.33333);
40448
+ letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
40449
+ }
40450
+
39990
40451
  /*# sourceMappingURL=index-full-carbon.css.map */