@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
package/css/index.css CHANGED
@@ -2377,12 +2377,12 @@
2377
2377
  }
2378
2378
 
2379
2379
  .cds--modal--slug .cds--modal-container {
2380
- 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;
2380
+ 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;
2381
2381
  background-color: var(--cds-layer);
2382
2382
  }
2383
2383
 
2384
2384
  .cds--modal--slug .cds--modal-container:has(.cds--btn-set:not(.cds--modal-footer--three-button) > button:not(:only-child)) {
2385
- 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;
2385
+ 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;
2386
2386
  background-color: var(--cds-layer);
2387
2387
  }
2388
2388
 
@@ -4644,6 +4644,14 @@ a.cds--overflow-menu-options__btn::before {
4644
4644
  }
4645
4645
 
4646
4646
  /*stylelint-enable */
4647
+ .cds--overflow-menu__top-start {
4648
+ transform: translate(0, calc(-100% - var(--cds-popover-offset, 2.5rem)));
4649
+ }
4650
+
4651
+ .cds--overflow-menu__top-end {
4652
+ transform: translate(0, calc(-100% - var(--cds-popover-offset, 2.5rem)));
4653
+ }
4654
+
4647
4655
  .c4p--button-menu {
4648
4656
  min-width: 160px;
4649
4657
  }
@@ -7408,7 +7416,7 @@ a.cds--overflow-menu-options__btn::before {
7408
7416
  padding-top: 0.5rem;
7409
7417
  }
7410
7418
  .c4p--side-panel.c4p--side-panel--has-slug .c4p--side-panel--scrolls {
7411
- 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;
7419
+ 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;
7412
7420
  }
7413
7421
  .c4p--side-panel .c4p--side-panel__inner-content.c4p--side-panel--scrolls {
7414
7422
  padding-top: 1rem;
@@ -7450,7 +7458,7 @@ a.cds--overflow-menu-options__btn::before {
7450
7458
  height: 2.5rem;
7451
7459
  }
7452
7460
  .c4p--side-panel .c4p--side-panel__slug-and-close {
7453
- position: fixed;
7461
+ position: absolute;
7454
7462
  z-index: 10; /* must be higher than title container border bottom */
7455
7463
  top: 0;
7456
7464
  right: 0;
@@ -7613,6 +7621,12 @@ a.cds--overflow-menu-options__btn::before {
7613
7621
  max-height: calc(100% - 3rem);
7614
7622
  transform: translate3d(0, min(95vh, 500px), 0);
7615
7623
  }
7624
+ .c4p--tearsheet.c4p--tearsheet.c4p--tearsheet.c4p--tearsheet.c4p--tearsheet--has-slug .c4p--tearsheet__container {
7625
+ border: 1px solid transparent;
7626
+ /* override carbon ai removing background gradient */
7627
+ 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;
7628
+ box-shadow: 0 4px 10px 2px var(--cds-ai-drop-shadow, rgba(15, 98, 254, 0.32));
7629
+ }
7616
7630
  .c4p--tearsheet.c4p--tearsheet.c4p--tearsheet .c4p--tearsheet__container {
7617
7631
  transition: transform 240ms cubic-bezier(0, 0, 0.3, 1), max-height 240ms cubic-bezier(0, 0, 0.3, 1);
7618
7632
  }
@@ -7710,8 +7724,11 @@ a.cds--overflow-menu-options__btn::before {
7710
7724
  .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__header.c4p--tearsheet__header--with-nav {
7711
7725
  padding: 1.5rem 2rem 0;
7712
7726
  }
7713
- .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__header.c4p--tearsheet__header--with-close-icon {
7714
- padding-right: 4rem;
7727
+ .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 {
7728
+ padding-right: 5rem;
7729
+ }
7730
+ .c4p--tearsheet.c4p--tearsheet--wide.c4p--tearsheet--has-slug .c4p--tearsheet__header.c4p--tearsheet__header--with-close-icon {
7731
+ margin-right: 3rem;
7715
7732
  }
7716
7733
  .c4p--tearsheet.c4p--tearsheet--narrow .c4p--tearsheet__header-description {
7717
7734
  max-width: 80%;
@@ -7764,6 +7781,9 @@ a.cds--overflow-menu-options__btn::before {
7764
7781
  overflow: auto;
7765
7782
  flex-grow: 1;
7766
7783
  }
7784
+ .c4p--tearsheet.c4p--tearsheet--has-slug .c4p--tearsheet__main {
7785
+ 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;
7786
+ }
7767
7787
  .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__content .cds--pagination,
7768
7788
  .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__content .cds--pagination__control-buttons,
7769
7789
  .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__content .cds--text-input,
@@ -7802,6 +7822,9 @@ a.cds--overflow-menu-options__btn::before {
7802
7822
  .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__buttons {
7803
7823
  background: var(--cds-background, #ffffff);
7804
7824
  }
7825
+ .c4p--tearsheet.c4p--tearsheet--has-slug:not(.c4p--tearsheet--has-close) .cds--slug {
7826
+ inset-inline-end: 0;
7827
+ }
7805
7828
 
7806
7829
  @keyframes step-content-entrance {
7807
7830
  0% {
@@ -8623,7 +8646,7 @@ a.cds--overflow-menu-options__btn::before {
8623
8646
  }
8624
8647
 
8625
8648
  .c4p--card--has-slug {
8626
- 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;
8649
+ 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;
8627
8650
  border: 1px solid transparent;
8628
8651
  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));
8629
8652
  }
@@ -8814,6 +8837,7 @@ a.cds--overflow-menu-options__btn::before {
8814
8837
  color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
8815
8838
  cursor: no-drop;
8816
8839
  text-decoration: none;
8840
+ transition: none;
8817
8841
  }
8818
8842
  .cds--file-browse-btn--disabled:hover, .cds--file-browse-btn--disabled:focus {
8819
8843
  color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
@@ -9674,6 +9698,7 @@ button.c4p--add-select__global-filter-toggle--open {
9674
9698
  --cds-ai-aura-hover-end: rgba(0, 0, 0, 0);
9675
9699
  --cds-ai-aura-hover-start: rgba(69, 137, 255, 0.4);
9676
9700
  --cds-ai-aura-start: rgba(69, 137, 255, 0.1);
9701
+ --cds-ai-aura-start-table: rgba(69, 137, 255, 0.15);
9677
9702
  --cds-ai-border-end: rgba(166, 200, 255, 0.24);
9678
9703
  --cds-ai-border-start: #4589ff;
9679
9704
  --cds-ai-border-strong: #78a9ff;
@@ -9706,9 +9731,9 @@ button.c4p--add-select__global-filter-toggle--open {
9706
9731
  --cds-border-tile-01: #525252;
9707
9732
  --cds-border-tile-02: #6f6f6f;
9708
9733
  --cds-border-tile-03: #8d8d8d;
9709
- --cds-chat-avatar-agent: #f4f4f4;
9710
- --cds-chat-avatar-bot: #4589ff;
9711
- --cds-chat-avatar-user: #f4f4f4;
9734
+ --cds-chat-avatar-agent: #c6c6c6;
9735
+ --cds-chat-avatar-bot: #8d8d8d;
9736
+ --cds-chat-avatar-user: #4589ff;
9712
9737
  --cds-chat-bubble-agent: #262626;
9713
9738
  --cds-chat-bubble-agent-border: #525252;
9714
9739
  --cds-chat-bubble-user: #393939;
@@ -14395,6 +14420,7 @@ button.c4p--add-select__global-filter-toggle--open {
14395
14420
  --cds-ai-aura-hover-end: rgba(0, 0, 0, 0);
14396
14421
  --cds-ai-aura-hover-start: rgba(69, 137, 255, 0.4);
14397
14422
  --cds-ai-aura-start: rgba(69, 137, 255, 0.1);
14423
+ --cds-ai-aura-start-table: rgba(69, 137, 255, 0.15);
14398
14424
  --cds-ai-border-end: rgba(166, 200, 255, 0.24);
14399
14425
  --cds-ai-border-start: #4589ff;
14400
14426
  --cds-ai-border-strong: #78a9ff;
@@ -14427,9 +14453,9 @@ button.c4p--add-select__global-filter-toggle--open {
14427
14453
  --cds-border-tile-01: #6f6f6f;
14428
14454
  --cds-border-tile-02: #8d8d8d;
14429
14455
  --cds-border-tile-03: #a8a8a8;
14430
- --cds-chat-avatar-agent: #f4f4f4;
14431
- --cds-chat-avatar-bot: #4589ff;
14432
- --cds-chat-avatar-user: #f4f4f4;
14456
+ --cds-chat-avatar-agent: #c6c6c6;
14457
+ --cds-chat-avatar-bot: #8d8d8d;
14458
+ --cds-chat-avatar-user: #4589ff;
14433
14459
  --cds-chat-bubble-agent: #262626;
14434
14460
  --cds-chat-bubble-agent-border: #525252;
14435
14461
  --cds-chat-bubble-user: #393939;
@@ -14879,6 +14905,7 @@ button.c4p--add-select__global-filter-toggle--open {
14879
14905
  --cds-ai-aura-hover-end: rgba(0, 0, 0, 0);
14880
14906
  --cds-ai-aura-hover-start: rgba(69, 137, 255, 0.4);
14881
14907
  --cds-ai-aura-start: rgba(69, 137, 255, 0.1);
14908
+ --cds-ai-aura-start-table: rgba(69, 137, 255, 0.15);
14882
14909
  --cds-ai-border-end: rgba(166, 200, 255, 0.24);
14883
14910
  --cds-ai-border-start: #4589ff;
14884
14911
  --cds-ai-border-strong: #78a9ff;
@@ -14911,9 +14938,9 @@ button.c4p--add-select__global-filter-toggle--open {
14911
14938
  --cds-border-tile-01: #525252;
14912
14939
  --cds-border-tile-02: #6f6f6f;
14913
14940
  --cds-border-tile-03: #8d8d8d;
14914
- --cds-chat-avatar-agent: #f4f4f4;
14915
- --cds-chat-avatar-bot: #4589ff;
14916
- --cds-chat-avatar-user: #f4f4f4;
14941
+ --cds-chat-avatar-agent: #c6c6c6;
14942
+ --cds-chat-avatar-bot: #8d8d8d;
14943
+ --cds-chat-avatar-user: #4589ff;
14917
14944
  --cds-chat-bubble-agent: #262626;
14918
14945
  --cds-chat-bubble-agent-border: #525252;
14919
14946
  --cds-chat-bubble-user: #393939;
@@ -18131,6 +18158,157 @@ th.c4p--datagrid__select-all-toggle-on.button {
18131
18158
  color: #ffffff;
18132
18159
  }
18133
18160
 
18161
+ .c4p--big-numbers__label {
18162
+ font-size: var(--cds-label-01-font-size, 0.75rem);
18163
+ font-weight: var(--cds-label-01-font-weight, 400);
18164
+ line-height: var(--cds-label-01-line-height, 1.33333);
18165
+ letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
18166
+ display: block;
18167
+ margin: 0;
18168
+ color: var(--cds-text-secondary, #525252);
18169
+ }
18170
+
18171
+ .c4p--big-numbers__value {
18172
+ font-size: var(--cds-heading-04-font-size, 1.75rem);
18173
+ font-weight: var(--cds-heading-04-font-weight, 400);
18174
+ line-height: var(--cds-heading-04-line-height, 1.28572);
18175
+ letter-spacing: var(--cds-heading-04-letter-spacing, 0);
18176
+ margin-bottom: 0;
18177
+ }
18178
+
18179
+ .c4p--big-numbers__total {
18180
+ font-size: var(--cds-body-compact-01-font-size, 0.875rem);
18181
+ font-weight: var(--cds-body-compact-01-font-weight, 400);
18182
+ line-height: var(--cds-body-compact-01-line-height, 1.28572);
18183
+ letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
18184
+ }
18185
+
18186
+ .c4p--big-numbers__total,
18187
+ .c4p--big-numbers__percentage-mark {
18188
+ margin-top: auto;
18189
+ margin-bottom: 0.25rem;
18190
+ }
18191
+
18192
+ .c4p--big-numbers__info {
18193
+ vertical-align: top;
18194
+ }
18195
+
18196
+ .c4p--big-numbers__trend {
18197
+ margin-top: 0.5rem;
18198
+ vertical-align: top;
18199
+ }
18200
+
18201
+ .c4p--big-numbers__row {
18202
+ display: flex;
18203
+ }
18204
+
18205
+ .c4p--big-numbers__info {
18206
+ padding-left: 0.5rem;
18207
+ }
18208
+
18209
+ .c4p--big-numbers__percentage {
18210
+ font-size: var(--cds-heading-04-font-size, 1.75rem);
18211
+ font-weight: var(--cds-heading-04-font-weight, 400);
18212
+ line-height: var(--cds-heading-04-line-height, 1.28572);
18213
+ letter-spacing: var(--cds-heading-04-letter-spacing, 0);
18214
+ }
18215
+
18216
+ .c4p--big-numbers__percentage-mark {
18217
+ font-size: var(--cds-body-compact-01-font-size, 0.875rem);
18218
+ font-weight: var(--cds-body-compact-01-font-weight, 400);
18219
+ line-height: var(--cds-body-compact-01-line-height, 1.28572);
18220
+ letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
18221
+ }
18222
+
18223
+ .c4p--big-numbers--lg .c4p--big-numbers__value,
18224
+ .c4p--big-numbers--lg .c4p--big-numbers__percentage {
18225
+ font-size: var(--cds-heading-06-font-size, 2.625rem);
18226
+ font-weight: var(--cds-heading-06-font-weight, 300);
18227
+ line-height: var(--cds-heading-06-line-height, 1.199);
18228
+ letter-spacing: var(--cds-heading-06-letter-spacing, 0);
18229
+ }
18230
+
18231
+ .c4p--big-numbers--lg .c4p--big-numbers__total,
18232
+ .c4p--big-numbers--lg .c4p--big-numbers__percentage-mark {
18233
+ font-size: var(--cds-heading-03-font-size, 1.25rem);
18234
+ font-weight: var(--cds-heading-03-font-weight, 400);
18235
+ line-height: var(--cds-heading-03-line-height, 1.4);
18236
+ letter-spacing: var(--cds-heading-03-letter-spacing, 0);
18237
+ }
18238
+
18239
+ .c4p--big-numbers--xl .c4p--big-numbers__label {
18240
+ font-size: var(--cds-body-compact-01-font-size, 0.875rem);
18241
+ font-weight: var(--cds-body-compact-01-font-weight, 400);
18242
+ line-height: var(--cds-body-compact-01-line-height, 1.28572);
18243
+ letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
18244
+ }
18245
+
18246
+ .c4p--big-numbers--xl .c4p--big-numbers__value,
18247
+ .c4p--big-numbers--xl .c4p--big-numbers__percentage {
18248
+ font-size: var(--cds-heading-07-font-size, 3.375rem);
18249
+ font-weight: var(--cds-heading-07-font-weight, 300);
18250
+ line-height: var(--cds-heading-07-line-height, 1.19);
18251
+ letter-spacing: var(--cds-heading-07-letter-spacing, 0);
18252
+ }
18253
+
18254
+ .c4p--big-numbers--xl .c4p--big-numbers__total,
18255
+ .c4p--big-numbers--xl .c4p--big-numbers__percentage-mark {
18256
+ font-size: var(--cds-heading-04-font-size, 1.75rem);
18257
+ font-weight: var(--cds-heading-04-font-weight, 400);
18258
+ line-height: var(--cds-heading-04-line-height, 1.28572);
18259
+ letter-spacing: var(--cds-heading-04-letter-spacing, 0);
18260
+ }
18261
+
18262
+ .c4p--big-numbers--xl .c4p--big-numbers__trend {
18263
+ margin-top: 0.75rem;
18264
+ }
18265
+
18266
+ .c4p--big-numbers-skeleton {
18267
+ width: 4rem;
18268
+ }
18269
+
18270
+ .c4p--big-numbers-skeleton__label {
18271
+ height: 0.75rem;
18272
+ margin-top: 0;
18273
+ margin-bottom: 0.5rem;
18274
+ }
18275
+
18276
+ .c4p--big-numbers-skeleton__value {
18277
+ /* stylelint-disable-next-line declaration-no-important */
18278
+ height: 2.5rem !important;
18279
+ margin: 0;
18280
+ }
18281
+
18282
+ .c4p--big-numbers-skeleton--lg {
18283
+ width: 5rem;
18284
+ }
18285
+
18286
+ .c4p--big-numbers-skeleton--xl {
18287
+ width: 6rem;
18288
+ }
18289
+
18290
+ .c4p--big-numbers-skeleton.c4p--big-numbers-skeleton--lg .c4p--big-numbers-skeleton__label {
18291
+ height: 0.75rem;
18292
+ }
18293
+
18294
+ .c4p--big-numbers-skeleton.c4p--big-numbers-skeleton--lg .c4p--big-numbers-skeleton__value {
18295
+ /* stylelint-disable-next-line declaration-no-important */
18296
+ height: 3rem !important;
18297
+ }
18298
+
18299
+ .c4p--big-numbers-skeleton.c4p--big-numbers-skeleton--xl .c4p--big-numbers-skeleton__label {
18300
+ height: 0.75rem;
18301
+ }
18302
+
18303
+ .c4p--big-numbers-skeleton.c4p--big-numbers-skeleton--xl .c4p--big-numbers-skeleton__value {
18304
+ /* stylelint-disable-next-line declaration-no-important */
18305
+ height: 4rem !important;
18306
+ }
18307
+
18308
+ .c4p--big-numbers .c4p--big-numbers__tooltip-trigger:focus {
18309
+ outline: 1px solid var(--cds-focus, #0f62fe);
18310
+ }
18311
+
18134
18312
  .c4p--truncated-list__list {
18135
18313
  /* stylelint-disable-next-line carbon/motion-duration-use */
18136
18314
  transition: height 240ms cubic-bezier(0.2, 0, 1, 0.9);
@@ -19354,6 +19532,7 @@ em {
19354
19532
  --cds-ai-aura-hover-end: rgba(255, 255, 255, 0);
19355
19533
  --cds-ai-aura-hover-start: rgba(69, 137, 255, 0.4);
19356
19534
  --cds-ai-aura-start: rgba(69, 137, 255, 0.1);
19535
+ --cds-ai-aura-start-table: rgba(69, 137, 255, 0.15);
19357
19536
  --cds-ai-border-end: #d0e2ff;
19358
19537
  --cds-ai-border-start: #78a9ff;
19359
19538
  --cds-ai-border-strong: #4589ff;
@@ -19386,9 +19565,9 @@ em {
19386
19565
  --cds-border-tile-01: #c6c6c6;
19387
19566
  --cds-border-tile-02: #a8a8a8;
19388
19567
  --cds-border-tile-03: #c6c6c6;
19389
- --cds-chat-avatar-agent: #161616;
19390
- --cds-chat-avatar-bot: #0f62fe;
19391
- --cds-chat-avatar-user: #161616;
19568
+ --cds-chat-avatar-agent: #393939;
19569
+ --cds-chat-avatar-bot: #6f6f6f;
19570
+ --cds-chat-avatar-user: #0f62fe;
19392
19571
  --cds-chat-bubble-agent: #ffffff;
19393
19572
  --cds-chat-bubble-agent-border: #e0e0e0;
19394
19573
  --cds-chat-bubble-user: #e0e0e0;
@@ -19573,6 +19752,7 @@ em {
19573
19752
  --cds-ai-aura-hover-end: rgba(255, 255, 255, 0);
19574
19753
  --cds-ai-aura-hover-start: rgba(69, 137, 255, 0.4);
19575
19754
  --cds-ai-aura-start: rgba(69, 137, 255, 0.1);
19755
+ --cds-ai-aura-start-table: rgba(69, 137, 255, 0.15);
19576
19756
  --cds-ai-border-end: #d0e2ff;
19577
19757
  --cds-ai-border-start: #78a9ff;
19578
19758
  --cds-ai-border-strong: #4589ff;
@@ -19605,9 +19785,9 @@ em {
19605
19785
  --cds-border-tile-01: #a8a8a8;
19606
19786
  --cds-border-tile-02: #c6c6c6;
19607
19787
  --cds-border-tile-03: #a8a8a8;
19608
- --cds-chat-avatar-agent: #161616;
19609
- --cds-chat-avatar-bot: #0f62fe;
19610
- --cds-chat-avatar-user: #161616;
19788
+ --cds-chat-avatar-agent: #393939;
19789
+ --cds-chat-avatar-bot: #6f6f6f;
19790
+ --cds-chat-avatar-user: #0f62fe;
19611
19791
  --cds-chat-bubble-agent: #ffffff;
19612
19792
  --cds-chat-bubble-agent-border: #e0e0e0;
19613
19793
  --cds-chat-bubble-user: #e0e0e0;
@@ -19792,6 +19972,7 @@ em {
19792
19972
  --cds-ai-aura-hover-end: rgba(0, 0, 0, 0);
19793
19973
  --cds-ai-aura-hover-start: rgba(69, 137, 255, 0.4);
19794
19974
  --cds-ai-aura-start: rgba(69, 137, 255, 0.1);
19975
+ --cds-ai-aura-start-table: rgba(69, 137, 255, 0.15);
19795
19976
  --cds-ai-border-end: rgba(166, 200, 255, 0.24);
19796
19977
  --cds-ai-border-start: #4589ff;
19797
19978
  --cds-ai-border-strong: #78a9ff;
@@ -19823,9 +20004,9 @@ em {
19823
20004
  --cds-border-tile-01: #6f6f6f;
19824
20005
  --cds-border-tile-02: #8d8d8d;
19825
20006
  --cds-border-tile-03: #a8a8a8;
19826
- --cds-chat-avatar-agent: #f4f4f4;
19827
- --cds-chat-avatar-bot: #4589ff;
19828
- --cds-chat-avatar-user: #f4f4f4;
20007
+ --cds-chat-avatar-agent: #c6c6c6;
20008
+ --cds-chat-avatar-bot: #8d8d8d;
20009
+ --cds-chat-avatar-user: #4589ff;
19829
20010
  --cds-chat-bubble-agent: #262626;
19830
20011
  --cds-chat-bubble-agent-border: #525252;
19831
20012
  --cds-chat-bubble-user: #393939;
@@ -20007,6 +20188,7 @@ em {
20007
20188
  --cds-ai-aura-hover-end: rgba(0, 0, 0, 0);
20008
20189
  --cds-ai-aura-hover-start: rgba(69, 137, 255, 0.4);
20009
20190
  --cds-ai-aura-start: rgba(69, 137, 255, 0.1);
20191
+ --cds-ai-aura-start-table: rgba(69, 137, 255, 0.15);
20010
20192
  --cds-ai-border-end: rgba(166, 200, 255, 0.24);
20011
20193
  --cds-ai-border-start: #4589ff;
20012
20194
  --cds-ai-border-strong: #78a9ff;
@@ -20038,9 +20220,9 @@ em {
20038
20220
  --cds-border-tile-01: #525252;
20039
20221
  --cds-border-tile-02: #6f6f6f;
20040
20222
  --cds-border-tile-03: #8d8d8d;
20041
- --cds-chat-avatar-agent: #f4f4f4;
20042
- --cds-chat-avatar-bot: #4589ff;
20043
- --cds-chat-avatar-user: #f4f4f4;
20223
+ --cds-chat-avatar-agent: #c6c6c6;
20224
+ --cds-chat-avatar-bot: #8d8d8d;
20225
+ --cds-chat-avatar-user: #4589ff;
20044
20226
  --cds-chat-bubble-agent: #262626;
20045
20227
  --cds-chat-bubble-agent-border: #525252;
20046
20228
  --cds-chat-bubble-user: #393939;
@@ -20519,6 +20701,60 @@ li.cds--accordion__item--disabled:last-of-type {
20519
20701
  padding-block-start: 100%;
20520
20702
  }
20521
20703
 
20704
+ .cds--chat-btn {
20705
+ border-radius: 1.5rem;
20706
+ }
20707
+
20708
+ .cds--chat-btn.cds--btn--md {
20709
+ border-radius: 1.25rem;
20710
+ }
20711
+
20712
+ .cds--chat-btn.cds--btn--sm {
20713
+ border-radius: 1rem;
20714
+ }
20715
+
20716
+ .cds--chat-btn--quick-action {
20717
+ align-items: center;
20718
+ border: 1px solid var(--cds-link-primary, #0f62fe);
20719
+ }
20720
+
20721
+ .cds--chat-btn--quick-action:hover:not(:active):not([disabled]) {
20722
+ border-color: transparent;
20723
+ background: var(--cds-background-hover, rgba(141, 141, 141, 0.12));
20724
+ }
20725
+
20726
+ .cds--chat-btn--quick-action.cds--btn--ghost:focus {
20727
+ border-color: var(--cds-focus, #0f62fe);
20728
+ box-shadow: inset 0 0 0 1px var(--cds-focus, #0f62fe);
20729
+ }
20730
+
20731
+ .cds--chat-btn--quick-action.cds--btn--ghost:hover:focus {
20732
+ border-color: var(--cds-focus, #0f62fe);
20733
+ box-shadow: inset 0 0 0 1px var(--cds-focus-inset, #ffffff);
20734
+ }
20735
+
20736
+ .cds--chat-btn--quick-action[disabled],
20737
+ .cds--chat-btn--quick-action[disabled]:hover {
20738
+ border-color: var(--cds-button-disabled, #c6c6c6);
20739
+ color: var(--cds-button-disabled, #c6c6c6);
20740
+ }
20741
+
20742
+ .cds--chat-btn--quick-action--selected,
20743
+ .cds--chat-btn--quick-action--selected[disabled],
20744
+ .cds--chat-btn--quick-action--selected[disabled]:hover {
20745
+ border-color: transparent;
20746
+ background: var(--cds-background-selected, rgba(141, 141, 141, 0.2));
20747
+ color: var(--cds-text-secondary, #525252);
20748
+ }
20749
+
20750
+ .cds--chat-btn--quick-action--selected:hover {
20751
+ color: var(--cds-text-secondary, #525252);
20752
+ }
20753
+
20754
+ .cds--chat-btn.cds--skeleton {
20755
+ overflow: hidden;
20756
+ }
20757
+
20522
20758
  .cds--checkbox-group {
20523
20759
  box-sizing: border-box;
20524
20760
  padding: 0;
@@ -21958,19 +22194,28 @@ li.cds--accordion__item--disabled:last-of-type {
21958
22194
  }
21959
22195
 
21960
22196
  .cds--combo-button__container--sm .cds--combo-button__primary-action {
21961
- min-inline-size: 9.9375rem;
22197
+ min-inline-size: 7.9375rem;
21962
22198
  }
21963
22199
 
21964
22200
  .cds--combo-button__container--md .cds--combo-button__primary-action {
21965
- min-inline-size: 9.4375rem;
22201
+ min-inline-size: 7.4375rem;
21966
22202
  }
21967
22203
 
21968
22204
  .cds--combo-button__container--lg .cds--combo-button__primary-action {
21969
- min-inline-size: 8.9375rem;
22205
+ min-inline-size: 6.9375rem;
21970
22206
  }
21971
22207
 
21972
22208
  .cds--combo-button__primary-action .cds--btn {
21973
22209
  inline-size: 100%;
22210
+ max-inline-size: 14.9375rem;
22211
+ min-inline-size: 6.9375rem;
22212
+ }
22213
+
22214
+ .cds--combo-button__primary-action button {
22215
+ display: block;
22216
+ overflow: hidden;
22217
+ text-overflow: ellipsis;
22218
+ white-space: nowrap;
21974
22219
  }
21975
22220
 
21976
22221
  .cds--combo-button__trigger svg {
@@ -21981,6 +22226,18 @@ li.cds--accordion__item--disabled:last-of-type {
21981
22226
  transform: rotate(180deg);
21982
22227
  }
21983
22228
 
22229
+ .cds--combo-button__top {
22230
+ transform: translate(0, calc(-100% - var(--cds-popover-offset, 3rem)));
22231
+ }
22232
+
22233
+ .cds--combo-button__top-start {
22234
+ transform: translate(0, calc(-100% - var(--cds-popover-offset, 3rem)));
22235
+ }
22236
+
22237
+ .cds--combo-button__top-end {
22238
+ transform: translate(0, calc(-100% - var(--cds-popover-offset, 3rem)));
22239
+ }
22240
+
21984
22241
  .cds--contained-list {
21985
22242
  --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)));
21986
22243
  --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));
@@ -23242,20 +23499,67 @@ tr.cds--data-table--selected:last-of-type td {
23242
23499
  padding-inline-end: 0;
23243
23500
  }
23244
23501
 
23245
- .cds--data-table tbody tr:has(> .cds--table-column-slug--active) {
23246
- 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%);
23247
- border-block-end-color: var(--cds-ai-border-strong, #4589ff);
23502
+ tr.cds--data-table--slug-row,
23503
+ tr.cds--data-table--slug-row + .cds--expandable-row {
23504
+ 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%);
23248
23505
  background-attachment: fixed;
23249
23506
  }
23250
23507
 
23508
+ .cds--data-table--slug-row {
23509
+ box-shadow: inset 1px 0 var(--cds-ai-border-strong, #4589ff);
23510
+ }
23511
+
23512
+ .cds--data-table tbody tr.cds--data-table--slug-row:hover td,
23513
+ tr.cds--data-table--slug-row.cds--expandable-row:hover + .cds--expandable-row[data-child-row] td,
23514
+ tr.cds--data-table--slug-row.cds--expandable-row--hover + .cds--expandable-row[data-child-row]:hover > td,
23515
+ tr.cds--data-table--slug-row.cds--expandable-row--hover > td,
23516
+ tr.cds--data-table--selected.cds--data-table--slug-row.cds--expandable-row + tr.cds--expandable-row[data-child-row] > td,
23517
+ tr.cds--data-table--slug-row.cds--parent-row.cds--data-table--selected.cds--expandable-row:hover td,
23518
+ tr.cds--data-table--slug-row.cds--parent-row.cds--data-table--selected.cds--expandable-row:hover td:first-of-type,
23519
+ tr.cds--data-table--slug-row.cds--parent-row.cds--data-table--selected:not(.cds--expandable-row):hover > td,
23520
+ tr.cds--data-table--slug-row.cds--parent-row.cds--data-table--selected.cds--expandable-row:hover + tr[data-child-row] > td,
23521
+ tr.cds--data-table--slug-row.cds--parent-row.cds--data-table--selected.cds--expandable-row--hover > td,
23522
+ tr.cds--data-table--slug-row.cds--parent-row.cds--data-table--selected.cds--expandable-row--hover > td:first-of-type {
23523
+ background-color: transparent;
23524
+ }
23525
+
23526
+ .cds--data-table tbody tr.cds--data-table--slug-row:hover,
23527
+ tr.cds--data-table--slug-row:hover + .cds--expandable-row[data-child-row],
23528
+ tr.cds--expandable-row--hover + .cds--expandable-row[data-child-row]:hover,
23529
+ tr.cds--expandable-row--hover.cds--data-table--slug-row,
23530
+ tr.cds--data-table--selected.cds--parent-row.cds--expandable-row--hover.cds--data-table--slug-row {
23531
+ 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);
23532
+ }
23533
+
23534
+ tr.cds--parent-row.cds--data-table--selected.cds--data-table--slug-row,
23535
+ .cds--data-table--selected.cds--data-table--slug-row,
23536
+ tr.cds--data-table--selected.cds--data-table--slug-row + .cds--expandable-row {
23537
+ 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);
23538
+ }
23539
+
23540
+ tr.cds--data-table--slug-row.cds--data-table--selected td,
23541
+ tr.cds--data-table--slug-row.cds--data-table--selected:hover td,
23542
+ tbody tr.cds--data-table--slug-row:hover td,
23543
+ 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) {
23544
+ border-block-end-color: var(--cds-border-subtle);
23545
+ }
23546
+
23547
+ 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) {
23548
+ border-block-end: 1px solid var(--cds-layer-selected);
23549
+ }
23550
+
23551
+ tr.cds--parent-row.cds--data-table--slug-row.cds--expandable-row:hover td:first-of-type {
23552
+ border-block-end: 1px solid transparent;
23553
+ }
23554
+
23251
23555
  .cds--data-table thead th.cds--table-sort__header--slug .cds--table-sort,
23252
23556
  .cds--data-table thead th:has(> .cds--table-header-label--slug) {
23253
- 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%);
23254
- border-block-end-color: var(--cds-ai-border-strong, #4589ff);
23557
+ 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%);
23255
23558
  }
23256
23559
 
23257
23560
  .cds--table-column-slug .cds--slug {
23258
23561
  position: absolute;
23562
+ z-index: 2;
23259
23563
  transform: translateY(-50%);
23260
23564
  }
23261
23565
 
@@ -23269,10 +23573,24 @@ th .cds--table-header-label.cds--table-header-label--slug {
23269
23573
  }
23270
23574
 
23271
23575
  th .cds--table-header-label.cds--table-header-label--slug .cds--slug {
23272
- margin-inline-start: 0.5rem;
23576
+ margin-inline-start: auto;
23577
+ }
23578
+
23579
+ th.cds--table-sort__header--slug,
23580
+ th:has(.cds--table-header-label--slug) {
23581
+ box-shadow: inset 0 1px var(--cds-ai-border-strong, #4589ff);
23582
+ }
23583
+
23584
+ td.cds--table-cell--column-slug {
23585
+ 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%);
23586
+ }
23587
+
23588
+ tr.cds--parent-row:not(.cds--expandable-row):not(:first-of-type) td.cds--table-cell--column-slug {
23589
+ 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%);
23273
23590
  }
23274
23591
 
23275
23592
  @media screen and (-ms-high-contrast: active), (forced-colors: active) {
23593
+ tr.cds--parent-row:not(.cds--expandable-row):not(:first-of-type) td.cds--table-cell--column-slug,
23276
23594
  .cds--data-table-content {
23277
23595
  outline: 1px solid transparent;
23278
23596
  }
@@ -23890,17 +24208,19 @@ tr.cds--parent-row.cds--expandable-row + tr[data-child-row] td {
23890
24208
  transition: padding-bottom 150ms cubic-bezier(0.2, 0, 0.38, 0.9), transform 150ms cubic-bezier(0.2, 0, 0.38, 0.9);
23891
24209
  }
23892
24210
 
23893
- tbody:has(> tr.cds--parent-row--slug) > tr.cds--expandable-row[data-child-row] td,
24211
+ tbody:has(> tr.cds--data-table--slug-row) > tr.cds--expandable-row[data-child-row] td,
23894
24212
  tbody:has(td.cds--table-column-checkbox) > tr.cds--expandable-row[data-child-row] td {
23895
24213
  padding-inline-start: 5.5rem;
23896
24214
  }
23897
24215
 
23898
- tbody:has(> tr.cds--parent-row--slug):has(td.cds--table-column-checkbox) > tr.cds--expandable-row[data-child-row] td {
24216
+ tbody:has(> tr.cds--data-table--slug-row):has(td.cds--table-column-checkbox) > tr.cds--expandable-row[data-child-row] td {
23899
24217
  padding-inline-start: 7.5rem;
23900
24218
  }
23901
24219
 
23902
24220
  tr.cds--parent-row.cds--expandable-row + tr[data-child-row] td .cds--child-row-inner-container {
23903
24221
  max-block-size: 100%;
24222
+ padding-block: 1rem;
24223
+ padding-block-end: 1.5rem;
23904
24224
  }
23905
24225
 
23906
24226
  .cds--parent-row.cds--expandable-row > td,
@@ -24186,8 +24506,8 @@ tr.cds--parent-row.cds--data-table--selected.cds--expandable-row--hover + tr[dat
24186
24506
  border-block-end: 1px solid transparent;
24187
24507
  }
24188
24508
 
24189
- .cds--parent-row--slug td,
24190
- .cds--data-table tr.cds--parent-row--slug:hover td {
24509
+ .cds--data-table--slug-row td,
24510
+ .cds--data-table tr.cds--data-table--slug-row:hover td {
24191
24511
  border-block-start: 1px solid transparent;
24192
24512
  }
24193
24513
 
@@ -24534,9 +24854,14 @@ th .cds--table-sort__flex {
24534
24854
  margin-block-start: 0.8125rem;
24535
24855
  }
24536
24856
 
24857
+ .cds--table-sort__header--slug .cds--table-sort__icon,
24858
+ .cds--table-sort__header--slug .cds--table-sort__icon-unsorted {
24859
+ margin-inline-end: 0.5rem;
24860
+ margin-inline-start: auto;
24861
+ }
24862
+
24537
24863
  .cds--table-sort__header--slug .cds--slug {
24538
- margin-inline-end: auto;
24539
- margin-inline-start: 0.5rem;
24864
+ margin-inline-end: 0.5rem;
24540
24865
  }
24541
24866
 
24542
24867
  @media screen and (-ms-high-contrast: active), (forced-colors: active) {
@@ -28578,6 +28903,18 @@ optgroup.cds--select-optgroup:disabled,
28578
28903
  transform: rotate(180deg);
28579
28904
  }
28580
28905
 
28906
+ .cds--menu-button__top {
28907
+ transform: translate(0, calc(-100% - var(--cds-popover-offset, 3rem)));
28908
+ }
28909
+
28910
+ .cds--menu-button__top-start {
28911
+ transform: translate(0, calc(-100% - var(--cds-popover-offset, 3rem)));
28912
+ }
28913
+
28914
+ .cds--menu-button__top-end {
28915
+ transform: translate(0, calc(-100% - var(--cds-popover-offset, 3rem)));
28916
+ }
28917
+
28581
28918
  .cds--inline-notification {
28582
28919
  position: relative;
28583
28920
  display: flex;
@@ -31304,7 +31641,7 @@ span.cds--pagination__text.cds--pagination__items-count {
31304
31641
  }
31305
31642
 
31306
31643
  .cds--slug.cds--slug--enabled .cds--slug-content {
31307
- 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;
31644
+ 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;
31308
31645
  border: 1px solid transparent;
31309
31646
  border-radius: 0.5rem;
31310
31647
  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));
@@ -32188,13 +32525,13 @@ span.cds--pagination__text.cds--pagination__items-count {
32188
32525
  }
32189
32526
 
32190
32527
  .cds--tile--slug.cds--tile {
32191
- 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;
32528
+ 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;
32192
32529
  border: 1px solid transparent;
32193
32530
  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));
32194
32531
  }
32195
32532
 
32196
32533
  .cds--tile--slug.cds--tile--expandable:hover {
32197
- 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;
32534
+ 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;
32198
32535
  }
32199
32536
 
32200
32537
  .cds--tile--slug.cds--tile--selectable::before,
@@ -35305,11 +35642,11 @@ a.cds--side-nav__link--current::before {
35305
35642
  .c4p--full-page-error__error-svg-container {
35306
35643
  display: flex;
35307
35644
  height: 100%;
35308
- margin: 0.5rem 0.5rem 5rem 0.5rem;
35645
+ padding: 0.5rem 0.5rem 5rem 0.5rem;
35309
35646
  }
35310
35647
  @media (min-width: 42rem) {
35311
35648
  .c4p--full-page-error__error-svg-container {
35312
- margin: auto 0.5rem 5rem 0.5rem;
35649
+ padding: auto 0.5rem 5rem 0.5rem;
35313
35650
  }
35314
35651
  }
35315
35652
 
@@ -35388,6 +35725,68 @@ a.cds--side-nav__link--current::before {
35388
35725
  position: absolute;
35389
35726
  }
35390
35727
 
35728
+ .c4p--string-formatter {
35729
+ display: inline-block;
35730
+ text-align: left;
35731
+ }
35732
+
35733
+ .c4p--string-formatter--content {
35734
+ display: inline-block;
35735
+ text-align: left;
35736
+ }
35737
+
35738
+ .c4p--string-formatter--truncate {
35739
+ display: -webkit-box;
35740
+ overflow: hidden;
35741
+ max-width: 80ch;
35742
+ -webkit-box-orient: vertical;
35743
+ -webkit-line-clamp: 1;
35744
+ }
35745
+
35746
+ .c4p--string-formatter__tooltip > button {
35747
+ border-width: 0;
35748
+ color: currentColor;
35749
+ font-size: inherit;
35750
+ font-weight: inherit;
35751
+ line-height: inherit;
35752
+ }
35753
+
35754
+ .cds--popover {
35755
+ max-width: 1rem;
35756
+ margin: 0 auto;
35757
+ }
35758
+
35759
+ .c4p--string-formatter .cds--popover-content {
35760
+ max-inline-size: 20rem;
35761
+ }
35762
+
35763
+ .c4p--string-formatter .cds--popover--left .cds--popover,
35764
+ .c4p--string-formatter .cds--popover--left-bottom .cds--popover,
35765
+ .c4p--string-formatter .cds--popover--left-top .cds--popover {
35766
+ margin: 0;
35767
+ }
35768
+
35769
+ .c4p--string-formatter .cds--popover--right .cds--popover,
35770
+ .c4p--string-formatter .cds--popover--right-bottom .cds--popover,
35771
+ .c4p--string-formatter .cds--popover--right-top .cds--popover {
35772
+ margin-right: 0;
35773
+ margin-left: auto;
35774
+ }
35775
+
35776
+ .c4p--string-formatter .cds--popover--top .cds--popover-caret,
35777
+ .c4p--string-formatter .cds--popover--top-left .cds--popover-caret,
35778
+ .c4p--string-formatter .cds--popover--top-right .cds--popover-caret {
35779
+ /* stylelint-disable-next-line declaration-no-important */
35780
+ inset-block-start: -1px !important;
35781
+ }
35782
+
35783
+ .c4p--string-formatter .cds--popover--bottom .cds--popover-caret,
35784
+ .c4p--string-formatter .cds--popover--bottom-left .cds--popover-caret,
35785
+ .c4p--string-formatter .cds--popover--bottom-right .cds--popover-caret {
35786
+ /* stylelint-disable-next-line declaration-no-important */
35787
+ inset-block-end: -1px !important;
35788
+ }
35789
+
35391
35790
  .c4p--user-avatar {
35392
35791
  position: relative;
35393
35792
  display: flex;
@@ -35397,10 +35796,15 @@ a.cds--side-nav__link--current::before {
35397
35796
  justify-content: center;
35398
35797
  border: 0.5px solid transparent;
35399
35798
  border-radius: 100%;
35799
+ color: var(--cds-text-inverse, #ffffff);
35400
35800
  outline: none;
35401
35801
  outline-offset: 3px;
35402
35802
  }
35403
35803
 
35804
+ .c4p--user-avatar svg {
35805
+ color: var(--cds-icon-inverse, #ffffff);
35806
+ }
35807
+
35404
35808
  .c4p--user-avatar__tooltip:focus-within .c4p--user-avatar {
35405
35809
  outline: 2px solid var(--cds-focus, #0f62fe);
35406
35810
  }
@@ -35413,4 +35817,40 @@ a.cds--side-nav__link--current::before {
35413
35817
  background-color: #0072c3;
35414
35818
  }
35415
35819
 
35820
+ .c4p--user-avatar--xl {
35821
+ width: 4rem;
35822
+ height: 4rem;
35823
+ font-size: var(--cds-heading-04-font-size, 1.75rem);
35824
+ font-weight: var(--cds-heading-04-font-weight, 400);
35825
+ line-height: var(--cds-heading-04-line-height, 1.28572);
35826
+ letter-spacing: var(--cds-heading-04-letter-spacing, 0);
35827
+ }
35828
+
35829
+ .c4p--user-avatar--lg {
35830
+ width: 3rem;
35831
+ height: 3rem;
35832
+ font-size: var(--cds-heading-03-font-size, 1.25rem);
35833
+ font-weight: var(--cds-heading-03-font-weight, 400);
35834
+ line-height: var(--cds-heading-03-line-height, 1.4);
35835
+ letter-spacing: var(--cds-heading-03-letter-spacing, 0);
35836
+ }
35837
+
35838
+ .c4p--user-avatar--md {
35839
+ width: 2rem;
35840
+ height: 2rem;
35841
+ font-size: var(--cds-body-compact-01-font-size, 0.875rem);
35842
+ font-weight: var(--cds-body-compact-01-font-weight, 400);
35843
+ line-height: var(--cds-body-compact-01-line-height, 1.28572);
35844
+ letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
35845
+ }
35846
+
35847
+ .c4p--user-avatar--sm {
35848
+ width: 1.5rem;
35849
+ height: 1.5rem;
35850
+ font-size: var(--cds-label-01-font-size, 0.75rem);
35851
+ font-weight: var(--cds-label-01-font-weight, 400);
35852
+ line-height: var(--cds-label-01-line-height, 1.33333);
35853
+ letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
35854
+ }
35855
+
35416
35856
  /*# sourceMappingURL=index.css.map */