@carbon/ibm-products 2.20.0 → 2.22.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (134) hide show
  1. package/README.md +8 -5
  2. package/css/index-full-carbon.css +548 -253
  3. package/css/index-full-carbon.css.map +1 -1
  4. package/css/index-full-carbon.min.css +1 -1
  5. package/css/index-full-carbon.min.css.map +1 -1
  6. package/css/index-without-carbon-released-only.css +208 -177
  7. package/css/index-without-carbon-released-only.css.map +1 -1
  8. package/css/index-without-carbon-released-only.min.css +1 -1
  9. package/css/index-without-carbon-released-only.min.css.map +1 -1
  10. package/css/index-without-carbon.css +252 -189
  11. package/css/index-without-carbon.css.map +1 -1
  12. package/css/index-without-carbon.min.css +1 -1
  13. package/css/index-without-carbon.min.css.map +1 -1
  14. package/css/index.css +233 -193
  15. package/css/index.css.map +1 -1
  16. package/css/index.min.css +1 -1
  17. package/css/index.min.css.map +1 -1
  18. package/es/components/ActionSet/ActionSet.js +3 -4
  19. package/es/components/AddSelect/AddSelectBody.js +2 -2
  20. package/es/components/AddSelect/AddSelectRow.js +2 -2
  21. package/es/components/Card/Card.js +1 -2
  22. package/es/components/Card/CardHeader.js +1 -2
  23. package/es/components/CreateFullPage/CreateFullPageStep.js +1 -2
  24. package/es/components/CreateTearsheet/CreateTearsheetStep.js +1 -2
  25. package/es/components/DataSpreadsheet/DataSpreadsheet.js +1 -2
  26. package/es/components/DataSpreadsheet/DataSpreadsheetBody.js +1 -2
  27. package/es/components/DataSpreadsheet/DataSpreadsheetHeader.js +1 -2
  28. package/es/components/Datagrid/Datagrid/DatagridContent.js +10 -10
  29. package/es/components/Datagrid/Datagrid/DatagridHeaderRow.js +6 -11
  30. package/es/components/Datagrid/Datagrid/DatagridRow.js +15 -11
  31. package/es/components/Datagrid/Datagrid/DraggableElement.js +1 -2
  32. package/es/components/Datagrid/Datagrid/addons/Filtering/FilterFlyout.js +21 -11
  33. package/es/components/Datagrid/Datagrid/addons/Filtering/FilterPanel.js +22 -12
  34. package/es/components/Datagrid/Datagrid/addons/Filtering/hooks/useFilters.js +31 -74
  35. package/es/components/Datagrid/Datagrid/addons/Filtering/hooks/useShouldDisableButtons.js +2 -3
  36. package/es/components/Datagrid/Datagrid/addons/Filtering/utils.js +1 -5
  37. package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditButton/InlineEditButton.js +2 -3
  38. package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditCell/InlineEditCell.js +2 -2
  39. package/es/components/Datagrid/useActionsColumn.js +1 -2
  40. package/es/components/Datagrid/useDefaultStringRenderer.js +1 -2
  41. package/es/components/Datagrid/useFiltering.js +1 -0
  42. package/es/components/Datagrid/useNestedRowExpander.js +1 -2
  43. package/es/components/Datagrid/useNestedRows.js +49 -33
  44. package/es/components/Datagrid/useOnRowClick.js +1 -1
  45. package/es/components/Datagrid/useRowIsMouseOver.js +3 -1
  46. package/es/components/Datagrid/useSelectRows.js +1 -2
  47. package/es/components/Datagrid/useSortableColumns.js +1 -2
  48. package/es/components/Datagrid/useStickyColumn.js +3 -4
  49. package/es/components/Datagrid/utils/filterPropsForTesting.js +149 -0
  50. package/es/components/DelimitedList/DelimitedList.docs-page.js +15 -0
  51. package/es/components/DelimitedList/DelimitedList.js +73 -0
  52. package/es/components/DelimitedList/index.js +8 -0
  53. package/es/components/EditInPlace/EditInPlace.js +1 -2
  54. package/es/components/EditTearsheet/EditTearsheetForm.js +1 -2
  55. package/es/components/FilterSummary/FilterSummary.js +15 -12
  56. package/es/components/NotificationsPanel/NotificationsPanel.js +2 -3
  57. package/es/components/PageHeader/PageHeader.js +9 -11
  58. package/es/components/Saving/Saving.js +6 -6
  59. package/es/components/SidePanel/SidePanel.js +147 -191
  60. package/es/components/TagSet/TagSet.js +21 -5
  61. package/es/components/TagSet/TagSetOverflow.js +14 -10
  62. package/es/components/Tearsheet/Tearsheet.js +5 -0
  63. package/es/components/Tearsheet/TearsheetNarrow.js +5 -0
  64. package/es/components/Tearsheet/TearsheetShell.js +9 -9
  65. package/es/components/WebTerminal/WebTerminal.js +1 -2
  66. package/es/components/index.js +2 -1
  67. package/es/global/js/hooks/useResizeObserver.js +5 -2
  68. package/es/global/js/package-settings.js +1 -0
  69. package/lib/components/ActionSet/ActionSet.js +3 -4
  70. package/lib/components/AddSelect/AddSelectBody.js +2 -2
  71. package/lib/components/AddSelect/AddSelectRow.js +2 -2
  72. package/lib/components/Card/Card.js +1 -2
  73. package/lib/components/Card/CardHeader.js +1 -2
  74. package/lib/components/CreateFullPage/CreateFullPageStep.js +1 -2
  75. package/lib/components/CreateTearsheet/CreateTearsheetStep.js +1 -2
  76. package/lib/components/DataSpreadsheet/DataSpreadsheet.js +1 -2
  77. package/lib/components/DataSpreadsheet/DataSpreadsheetBody.js +1 -2
  78. package/lib/components/DataSpreadsheet/DataSpreadsheetHeader.js +1 -2
  79. package/lib/components/Datagrid/Datagrid/DatagridContent.js +10 -10
  80. package/lib/components/Datagrid/Datagrid/DatagridHeaderRow.js +6 -11
  81. package/lib/components/Datagrid/Datagrid/DatagridRow.js +15 -11
  82. package/lib/components/Datagrid/Datagrid/DraggableElement.js +1 -2
  83. package/lib/components/Datagrid/Datagrid/addons/Filtering/FilterFlyout.js +21 -11
  84. package/lib/components/Datagrid/Datagrid/addons/Filtering/FilterPanel.js +22 -12
  85. package/lib/components/Datagrid/Datagrid/addons/Filtering/hooks/useFilters.js +31 -74
  86. package/lib/components/Datagrid/Datagrid/addons/Filtering/hooks/useShouldDisableButtons.js +2 -3
  87. package/lib/components/Datagrid/Datagrid/addons/Filtering/utils.js +1 -5
  88. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditButton/InlineEditButton.js +2 -3
  89. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditCell/InlineEditCell.js +2 -2
  90. package/lib/components/Datagrid/useActionsColumn.js +1 -2
  91. package/lib/components/Datagrid/useDefaultStringRenderer.js +1 -2
  92. package/lib/components/Datagrid/useFiltering.js +1 -0
  93. package/lib/components/Datagrid/useNestedRowExpander.js +1 -2
  94. package/lib/components/Datagrid/useNestedRows.js +49 -33
  95. package/lib/components/Datagrid/useOnRowClick.js +1 -1
  96. package/lib/components/Datagrid/useRowIsMouseOver.js +3 -1
  97. package/lib/components/Datagrid/useSelectRows.js +1 -2
  98. package/lib/components/Datagrid/useSortableColumns.js +1 -2
  99. package/lib/components/Datagrid/useStickyColumn.js +3 -4
  100. package/lib/components/Datagrid/utils/filterPropsForTesting.js +156 -0
  101. package/lib/components/DelimitedList/DelimitedList.docs-page.js +25 -0
  102. package/lib/components/DelimitedList/DelimitedList.js +78 -0
  103. package/lib/components/DelimitedList/index.js +12 -0
  104. package/lib/components/EditInPlace/EditInPlace.js +1 -2
  105. package/lib/components/EditTearsheet/EditTearsheetForm.js +1 -2
  106. package/lib/components/FilterSummary/FilterSummary.js +15 -12
  107. package/lib/components/NotificationsPanel/NotificationsPanel.js +2 -3
  108. package/lib/components/PageHeader/PageHeader.js +9 -11
  109. package/lib/components/Saving/Saving.js +6 -6
  110. package/lib/components/SidePanel/SidePanel.js +147 -191
  111. package/lib/components/TagSet/TagSet.js +21 -5
  112. package/lib/components/TagSet/TagSetOverflow.js +13 -9
  113. package/lib/components/Tearsheet/Tearsheet.js +5 -0
  114. package/lib/components/Tearsheet/TearsheetNarrow.js +5 -0
  115. package/lib/components/Tearsheet/TearsheetShell.js +9 -9
  116. package/lib/components/WebTerminal/WebTerminal.js +1 -2
  117. package/lib/components/index.js +8 -1
  118. package/lib/global/js/hooks/useResizeObserver.js +5 -2
  119. package/lib/global/js/package-settings.js +1 -0
  120. package/package.json +9 -8
  121. package/scss/components/Datagrid/_datagrid.scss +4 -0
  122. package/scss/components/Datagrid/styles/_datagrid.scss +9 -1
  123. package/scss/components/Datagrid/styles/_useStickyColumn.scss +2 -0
  124. package/scss/components/DelimitedList/_carbon-imports.scss +9 -0
  125. package/scss/components/DelimitedList/_delimited-list.scss +27 -0
  126. package/scss/components/DelimitedList/_index-with-carbon.scss +9 -0
  127. package/scss/components/DelimitedList/_index.scss +8 -0
  128. package/scss/components/Saving/_saving.scss +6 -0
  129. package/scss/components/SidePanel/_side-panel-variables.scss +5 -1
  130. package/scss/components/SidePanel/_side-panel.scss +158 -186
  131. package/scss/components/TagSet/_tag-set.scss +4 -1
  132. package/scss/components/_index-with-carbon.scss +1 -0
  133. package/scss/components/_index.scss +1 -0
  134. package/telemetry.yml +790 -0
@@ -2153,6 +2153,10 @@ p.c4p--about-modal__copyright-text:first-child {
2153
2153
  margin-bottom: 0;
2154
2154
  }
2155
2155
 
2156
+ /* One or two values
2157
+ * - width (first value)
2158
+ * - min-width (optional second value)
2159
+ */
2156
2160
  @keyframes hide-feedback {
2157
2161
  0% {
2158
2162
  opacity: 1;
@@ -2379,76 +2383,90 @@ p.c4p--about-modal__copyright-text:first-child {
2379
2383
  white-space: nowrap;
2380
2384
  }
2381
2385
 
2386
+ .c4p--side-panel--scrolls {
2387
+ overflow: auto;
2388
+ overflow-x: hidden;
2389
+ }
2390
+
2382
2391
  .c4p--side-panel__container {
2383
- --c4p--side-panel--subtitle-opacity: 1;
2384
- --c4p--side-panel--title-container-height: 0;
2385
- --c4p--side-panel--title-text-height: 0;
2386
- --c4p--side-panel--subtitle-container-height: 0;
2387
- --c4p--side-panel--action-bar-container-height: 0;
2388
- --c4p--side-panel--divider-opacity: 0;
2389
- --c4p--side-panel--title-y-position: 0;
2390
- --c4p--side-panel--content-bottom-padding: 4rem;
2391
- --c4p--side-panel--collapsed-title-y-position: 1rem;
2392
- --c4p--side-panel--label-text-height: 0;
2393
- --c4p--side-panel--title-padding-right: 3rem;
2392
+ --c4p--side-panel--title-stop: 1rem;
2393
+ --c4p--side-panel--scroll-animation-progress: 0;
2394
+ --c4p--side-panel--title-padding-right: 2rem;
2395
+ --c4p--side-panel--actions-height: 4rem;
2394
2396
  position: fixed;
2395
2397
  z-index: 9000;
2396
2398
  top: 3rem;
2399
+ display: grid;
2397
2400
  height: calc(100% - 3rem);
2398
2401
  box-sizing: border-box;
2399
2402
  background-color: var(--cds-layer-01, #f4f4f4);
2400
2403
  color: var(--cds-text-primary, #161616);
2404
+ grid-template-rows: 1fr auto; /* titles and content */
2401
2405
  }
2402
2406
  .c4p--side-panel__container.c4p--side-panel__container--xs {
2407
+ /* any value is single value list */
2403
2408
  width: 16rem;
2404
2409
  max-width: 100%;
2405
2410
  }
2406
- .c4p--side-panel__container.c4p--side-panel__container--xs .c4p--side-panel__title-container.c4p--side-panel__title-container--no-title-animation,
2407
- .c4p--side-panel__container.c4p--side-panel__container--xs .c4p--side-panel__subtitle-text.c4p--side-panel__subtitle-text-no-animation,
2408
- .c4p--side-panel__container.c4p--side-panel__container--xs .c4p--side-panel__action-toolbar.c4p--side-panel__action-toolbar-no-animation {
2411
+ .c4p--side-panel__container.c4p--side-panel__container--xs .c4p--side-panel__header.c4p--side-panel__header--no-title-animation,
2412
+ .c4p--side-panel__container.c4p--side-panel__container--xs .c4p--side-panel__header--no-title-animation .c4p--side-panel__subtitle-text {
2413
+ /* any value is single value list */
2409
2414
  width: 16rem;
2410
2415
  max-width: 100%;
2411
2416
  }
2412
2417
  .c4p--side-panel__container.c4p--side-panel__container--sm {
2418
+ /* any value is single value list */
2413
2419
  width: 20rem;
2414
2420
  max-width: 100%;
2415
2421
  }
2416
- .c4p--side-panel__container.c4p--side-panel__container--sm .c4p--side-panel__title-container.c4p--side-panel__title-container--no-title-animation,
2417
- .c4p--side-panel__container.c4p--side-panel__container--sm .c4p--side-panel__subtitle-text.c4p--side-panel__subtitle-text-no-animation,
2418
- .c4p--side-panel__container.c4p--side-panel__container--sm .c4p--side-panel__action-toolbar.c4p--side-panel__action-toolbar-no-animation {
2422
+ .c4p--side-panel__container.c4p--side-panel__container--sm .c4p--side-panel__header.c4p--side-panel__header--no-title-animation,
2423
+ .c4p--side-panel__container.c4p--side-panel__container--sm .c4p--side-panel__header--no-title-animation .c4p--side-panel__subtitle-text {
2424
+ /* any value is single value list */
2419
2425
  width: 20rem;
2420
2426
  max-width: 100%;
2421
2427
  }
2422
2428
  .c4p--side-panel__container.c4p--side-panel__container--md {
2429
+ /* any value is single value list */
2423
2430
  width: 30rem;
2424
2431
  max-width: 100%;
2425
2432
  }
2426
- .c4p--side-panel__container.c4p--side-panel__container--md .c4p--side-panel__title-container.c4p--side-panel__title-container--no-title-animation,
2427
- .c4p--side-panel__container.c4p--side-panel__container--md .c4p--side-panel__subtitle-text.c4p--side-panel__subtitle-text-no-animation,
2428
- .c4p--side-panel__container.c4p--side-panel__container--md .c4p--side-panel__action-toolbar.c4p--side-panel__action-toolbar-no-animation {
2433
+ .c4p--side-panel__container.c4p--side-panel__container--md .c4p--side-panel__header.c4p--side-panel__header--no-title-animation,
2434
+ .c4p--side-panel__container.c4p--side-panel__container--md .c4p--side-panel__header--no-title-animation .c4p--side-panel__subtitle-text {
2435
+ /* any value is single value list */
2429
2436
  width: 30rem;
2430
2437
  max-width: 100%;
2431
2438
  }
2432
2439
  .c4p--side-panel__container.c4p--side-panel__container--lg {
2440
+ /* any value is single value list */
2433
2441
  width: 40rem;
2434
2442
  max-width: 100%;
2435
2443
  }
2436
- .c4p--side-panel__container.c4p--side-panel__container--lg .c4p--side-panel__title-container.c4p--side-panel__title-container--no-title-animation,
2437
- .c4p--side-panel__container.c4p--side-panel__container--lg .c4p--side-panel__subtitle-text.c4p--side-panel__subtitle-text-no-animation,
2438
- .c4p--side-panel__container.c4p--side-panel__container--lg .c4p--side-panel__action-toolbar.c4p--side-panel__action-toolbar-no-animation {
2444
+ .c4p--side-panel__container.c4p--side-panel__container--lg .c4p--side-panel__header.c4p--side-panel__header--no-title-animation,
2445
+ .c4p--side-panel__container.c4p--side-panel__container--lg .c4p--side-panel__header--no-title-animation .c4p--side-panel__subtitle-text {
2446
+ /* any value is single value list */
2439
2447
  width: 40rem;
2440
2448
  max-width: 100%;
2441
2449
  }
2442
2450
  .c4p--side-panel__container.c4p--side-panel__container--2xl {
2443
- width: 75%;
2451
+ /* any value is single value list */
2452
+ width: 40rem;
2453
+ min-width: 75%;
2444
2454
  max-width: 100%;
2445
2455
  }
2446
- .c4p--side-panel__container.c4p--side-panel__container--2xl .c4p--side-panel__title-container.c4p--side-panel__title-container--no-title-animation,
2447
- .c4p--side-panel__container.c4p--side-panel__container--2xl .c4p--side-panel__subtitle-text.c4p--side-panel__subtitle-text-no-animation,
2448
- .c4p--side-panel__container.c4p--side-panel__container--2xl .c4p--side-panel__action-toolbar.c4p--side-panel__action-toolbar-no-animation {
2449
- width: 75%;
2456
+ .c4p--side-panel__container.c4p--side-panel__container--2xl .c4p--side-panel__header.c4p--side-panel__header--no-title-animation,
2457
+ .c4p--side-panel__container.c4p--side-panel__container--2xl .c4p--side-panel__header--no-title-animation .c4p--side-panel__subtitle-text {
2458
+ /* any value is single value list */
2459
+ width: 40rem;
2460
+ min-width: 75%;
2450
2461
  max-width: 100%;
2451
2462
  }
2463
+ .c4p--side-panel__container:not(:has(.c4p--side-panel__animated-scroll-wrapper)), .c4p--side-panel__container.c4p--side-panel__container--has-no-animated-scroll-wrapper {
2464
+ /* if the title does not scroll then we have a child scrolling section. */
2465
+ grid-template-rows: auto 1fr auto; /* titles content actions */
2466
+ }
2467
+ .c4p--side-panel__container.c4p--side-panel__container--condensed-actions {
2468
+ --c4p--side-panel--actions-height: 3rem;
2469
+ }
2452
2470
  .c4p--side-panel__container .c4p--side-panel__actions-container {
2453
2471
  width: 100%;
2454
2472
  }
@@ -2460,43 +2478,30 @@ p.c4p--about-modal__copyright-text:first-child {
2460
2478
  left: 0;
2461
2479
  border-right: 1px solid var(--cds-border-subtle-02, #e0e0e0);
2462
2480
  }
2463
- .c4p--side-panel__container.c4p--side-panel__container-with-action-toolbar.c4p--side-panel__with-condensed-header .c4p--side-panel__title-container {
2464
- /* stylelint-disable-next-line max-nesting-depth */
2465
- }
2466
- .c4p--side-panel__container.c4p--side-panel__container-with-action-toolbar.c4p--side-panel__with-condensed-header .c4p--side-panel__title-container::before {
2467
- content: none;
2468
- }
2469
- .c4p--side-panel__container.c4p--side-panel__container-with-action-toolbar.c4p--side-panel__with-condensed-header .c4p--side-panel__action-toolbar {
2470
- /* stylelint-disable-next-line max-nesting-depth */
2471
- }
2472
- .c4p--side-panel__container.c4p--side-panel__container-with-action-toolbar.c4p--side-panel__with-condensed-header .c4p--side-panel__action-toolbar::before {
2473
- position: absolute;
2474
- bottom: 0;
2475
- left: 0;
2476
- width: 100%;
2477
- height: 1px;
2478
- background-color: var(--cds-border-subtle-02, #e0e0e0);
2479
- content: "";
2480
- opacity: var(--c4p--side-panel--divider-opacity);
2481
- }
2482
- .c4p--side-panel__container.c4p--side-panel__container-without-overlay {
2481
+ .c4p--side-panel__container.c4p--side-panel__container--slide-in, .c4p--side-panel__container.c4p--side-panel__container:not(:has(+ .c4p--side-panel__overlay)), .c4p--side-panel__container.c4p--side-panel__container--has-no-overlay {
2483
2482
  box-shadow: 0 0.125rem 0.25rem var(--cds-overlay, rgba(22, 22, 22, 0.5));
2484
2483
  }
2485
- .c4p--side-panel__container .c4p--side-panel__title-container {
2484
+ .c4p--side-panel__container .c4p--side-panel__header {
2485
+ --c4p--side-panel--title-padding-bottom: 1rem;
2486
2486
  position: sticky;
2487
2487
  z-index: 4;
2488
- top: 0;
2489
- padding: 1rem 1rem 0.5rem 1rem;
2488
+ /* stylelint-disable-next-line carbon/layout-token-use */
2489
+ top: calc(-1px * var(--c4p--side-panel--scroll-animation-distance));
2490
+ padding: 1rem;
2491
+ padding-bottom: 0;
2490
2492
  background-color: var(--cds-layer-01, #f4f4f4);
2491
2493
  /* stylelint-disable-next-line max-nesting-depth */
2492
2494
  }
2493
- .c4p--side-panel__container .c4p--side-panel__title-container:has(.c4p--side-panel__navigation-back-button) {
2495
+ .c4p--side-panel__container .c4p--side-panel__header:has(.c4p--side-panel__subtitle-text), .c4p--side-panel__container .c4p--side-panel__header.c4p--side-panel__header--has-subtitle {
2496
+ --c4p--side-panel--title-padding-bottom: 0.5rem;
2497
+ }
2498
+ .c4p--side-panel__container .c4p--side-panel__header:has(.c4p--side-panel__navigation-back-button), .c4p--side-panel__container .c4p--side-panel__header.c4p--side-panel__header--has-navigation-back {
2494
2499
  padding-top: 2rem;
2495
2500
  }
2496
- .c4p--side-panel__container .c4p--side-panel__title-container:has(.c4p--side-panel__navigation-back-button.cds--btn--md) {
2501
+ .c4p--side-panel__container .c4p--side-panel__header:has(.c4p--side-panel__navigation-back-button.cds--btn--md), .c4p--side-panel__container .c4p--side-panel__header.c4p--side-panel__header--has-navigation-back.cds--btn--md {
2497
2502
  padding-top: 2.5rem;
2498
2503
  }
2499
- .c4p--side-panel__container .c4p--side-panel__title-container::before {
2504
+ .c4p--side-panel__container .c4p--side-panel__header::before {
2500
2505
  position: absolute;
2501
2506
  bottom: 0;
2502
2507
  left: 0;
@@ -2504,47 +2509,56 @@ p.c4p--about-modal__copyright-text:first-child {
2504
2509
  height: 1px;
2505
2510
  background-color: var(--cds-border-subtle-02, #e0e0e0);
2506
2511
  content: "";
2507
- opacity: var(--c4p--side-panel--divider-opacity);
2512
+ opacity: var(--c4p--side-panel--scroll-animation-progress);
2513
+ z-index: 9;
2514
+ }
2515
+ .c4p--side-panel__container .c4p--side-panel__header.c4p--side-panel__header--no-title-animation {
2516
+ position: relative;
2517
+ top: 0;
2518
+ }
2519
+ .c4p--side-panel__container .c4p--side-panel__header.c4p--side-panel__header--no-title-animation::before {
2520
+ opacity: 1;
2508
2521
  }
2509
- .c4p--side-panel__container .c4p--side-panel__title-container.c4p--side-panel__title-container--reduced-motion {
2522
+ .c4p--side-panel__container .c4p--side-panel__header.c4p--side-panel__header--reduced-motion {
2510
2523
  z-index: 5;
2511
2524
  border-bottom: 1px solid var(--cds-border-subtle-02, #e0e0e0);
2512
2525
  margin-bottom: 1rem;
2513
2526
  }
2514
- .c4p--side-panel__container .c4p--side-panel__title-container.c4p--side-panel__title-container--reduced-motion.c4p--side-panel__title-container--no-title-animation {
2527
+ .c4p--side-panel__container .c4p--side-panel__header.c4p--side-panel__header--reduced-motion.c4p--side-panel__header--no-title-animation {
2515
2528
  border-bottom: 0;
2516
2529
  margin-bottom: 0;
2517
2530
  }
2518
- .c4p--side-panel__container .c4p--side-panel__title-container.c4p--side-panel__on-detail-step .c4p--side-panel__collapsed-title-text {
2519
- top: 2rem;
2520
- }
2521
- .c4p--side-panel__container .c4p--side-panel__title-container.c4p--side-panel__on-detail-step .c4p--side-panel__navigation-back-button.cds--btn--md ~ .c4p--side-panel__collapsed-title-text {
2522
- top: 2.5rem;
2531
+ .c4p--side-panel__container .c4p--side-panel__header.c4p--side-panel--on-detail-step .c4p--side-panel__collapsed-title-text {
2532
+ top: 1rem;
2523
2533
  }
2524
- .c4p--side-panel__container .c4p--side-panel__title-container.c4p--side-panel__title-container-without-title {
2525
- padding: 0;
2534
+ .c4p--side-panel__container .c4p--side-panel__header.c4p--side-panel--on-detail-step .c4p--side-panel__navigation-back-button.cds--btn--md ~ .c4p--side-panel__collapsed-title-text {
2535
+ top: 1.5rem;
2526
2536
  }
2527
- .c4p--side-panel__container .c4p--side-panel__title-container.c4p--side-panel__title-container-without-title.c4p--side-panel__on-detail-step-without-title {
2537
+ .c4p--side-panel__container .c4p--side-panel__header.c4p--side-panel--on-detail-step:not(:has(.c4p--side-panel__title-text)) {
2528
2538
  height: calc(2.5rem + 0.25rem);
2529
2539
  padding: 1rem 1rem 0.5rem 1rem;
2530
2540
  }
2531
- .c4p--side-panel__container .c4p--side-panel__title-container.c4p--side-panel__title-container-without-title::before {
2541
+ .c4p--side-panel__container .c4p--side-panel__header:not(:has(.c4p--side-panel__title-text))::before, .c4p--side-panel__container .c4p--side-panel__header.c4p--side-panel__header--has-no-title::before {
2532
2542
  background-color: transparent;
2533
2543
  }
2534
- .c4p--side-panel__container.c4p--side-panel__container--has-slug {
2535
- --c4p--side-panel--title-padding-right: 6rem;
2544
+ .c4p--side-panel__container.c4p--side-panel__container:has(.c4p--side-panel__action-toolbar), .c4p--side-panel__container.c4p--side-panel__container--has-action-toolbar, .c4p--side-panel__container.c4p--side-panel__container--has-slug {
2545
+ --c4p--side-panel--title-padding-right: 4rem;
2536
2546
  }
2537
- .c4p--side-panel__container.c4p--side-panel__container-is-animating {
2538
- pointer-events: none;
2539
- }
2540
- .c4p--side-panel__container.c4p--side-panel__container-is-animating .c4p--side-panel__title-container.c4p--side-panel__title-container--no-title-animation {
2541
- top: 0;
2547
+ .c4p--side-panel__container.c4p--side-panel__container:has(.c4p--side-panel__action-toolbar).c4p--side-panel__container--has-slug, .c4p--side-panel__container.c4p--side-panel__container--has-action-toolbar.c4p--side-panel__container--has-slug {
2548
+ --c4p--side-panel--title-padding-right: 5rem;
2542
2549
  }
2543
- .c4p--side-panel__container.c4p--side-panel__container-is-animating .c4p--side-panel__subtitle-text.c4p--side-panel__subtitle-text-no-animation {
2544
- top: var(--c4p--side-panel--title-text-height);
2550
+ .c4p--side-panel__container .c4p--side-panel__animated-scroll-wrapper {
2551
+ display: grid;
2552
+ grid-template-rows: auto 1fr;
2545
2553
  }
2546
- .c4p--side-panel__container.c4p--side-panel__container-is-animating .c4p--side-panel__action-toolbar.c4p--side-panel__action-toolbar-no-animation {
2547
- top: calc(var(--c4p--side-panel--title-text-height) + var(--c4p--side-panel--subtitle-container-height));
2554
+ .c4p--side-panel__container .c4p--side-panel__title {
2555
+ position: sticky;
2556
+ z-index: 4;
2557
+ /* stylelint-disable-next-line carbon/layout-token-use */
2558
+ top: var(--c4p--side-panel--title-stop);
2559
+ /* border-bottom used instead of padding which wrapped text shows through */
2560
+ border-bottom: var(--c4p--side-panel--title-padding-bottom) solid transparent;
2561
+ background-color: var(--cds-layer-01, #f4f4f4);
2548
2562
  }
2549
2563
  .c4p--side-panel__container .c4p--side-panel__title-text {
2550
2564
  font-size: var(--cds-heading-03-font-size, 1.25rem);
@@ -2557,12 +2571,14 @@ p.c4p--about-modal__copyright-text:first-child {
2557
2571
  padding-right: var(--c4p--side-panel--title-padding-right);
2558
2572
  -webkit-box-orient: vertical;
2559
2573
  -webkit-line-clamp: 2;
2560
- position: inherit;
2561
- z-index: 4;
2562
- margin-bottom: calc(-1 * var(--c4p--side-panel--label-text-height));
2563
- background-color: var(--cds-layer-01, #f4f4f4);
2564
- opacity: var(--c4p--side-panel--subtitle-opacity);
2565
- transform: translateY(var(--c4p--side-panel--title-y-position));
2574
+ opacity: calc(1 - var(--c4p--side-panel--scroll-animation-progress));
2575
+ }
2576
+ .c4p--side-panel__container .c4p--side-panel__title--no-label .c4p--side-panel__title-text {
2577
+ /* stylelint-disable-next-line carbon/layout-token-use */
2578
+ transform: translateY(calc(-1 * 1rem * var(--c4p--side-panel--scroll-animation-progress)));
2579
+ }
2580
+ .c4p--side-panel__container .c4p--side-panel__header--no-title-animation .c4p--side-panel__title-text {
2581
+ position: static;
2566
2582
  }
2567
2583
  .c4p--side-panel__container .c4p--side-panel__label-text {
2568
2584
  font-size: var(--cds-label-01-font-size, 0.75rem);
@@ -2571,9 +2587,8 @@ p.c4p--about-modal__copyright-text:first-child {
2571
2587
  letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
2572
2588
  overflow: hidden;
2573
2589
  padding-right: var(--c4p--side-panel--title-padding-right);
2574
- opacity: var(--c4p--side-panel--subtitle-opacity);
2590
+ opacity: calc(1 - var(--c4p--side-panel--scroll-animation-progress));
2575
2591
  text-overflow: ellipsis;
2576
- transform: translateY(var(--c4p--side-panel--title-y-position));
2577
2592
  white-space: nowrap;
2578
2593
  }
2579
2594
  .c4p--side-panel__container .c4p--side-panel__collapsed-title-text {
@@ -2588,9 +2603,13 @@ p.c4p--about-modal__copyright-text:first-child {
2588
2603
  -webkit-box-orient: vertical;
2589
2604
  -webkit-line-clamp: 2;
2590
2605
  position: absolute;
2591
- top: 1rem;
2592
- opacity: var(--c4p--side-panel--divider-opacity);
2593
- transform: translateY(var(--c4p--side-panel--collapsed-title-y-position));
2606
+ /* stylelint-disable-next-line carbon/layout-token-use */
2607
+ top: 0;
2608
+ opacity: var(--c4p--side-panel--scroll-animation-progress);
2609
+ }
2610
+ .c4p--side-panel__container .c4p--side-panel__title--no-label .c4p--side-panel__collapsed-title-text {
2611
+ /* stylelint-disable-next-line carbon/layout-token-use */
2612
+ transform: translateY(calc(1rem * (1 - var(--c4p--side-panel--scroll-animation-progress))));
2594
2613
  }
2595
2614
  .c4p--side-panel__container .c4p--side-panel__subtitle-text {
2596
2615
  font-size: var(--cds-body-compact-01-font-size, 0.875rem);
@@ -2598,75 +2617,41 @@ p.c4p--about-modal__copyright-text:first-child {
2598
2617
  line-height: var(--cds-body-compact-01-line-height, 1.28572);
2599
2618
  letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
2600
2619
  overflow: hidden;
2601
- padding: 0 3rem 1rem 1rem;
2620
+ padding-right: var(--c4p--side-panel--title-padding-right);
2621
+ padding-bottom: 1rem;
2602
2622
  -webkit-box-orient: vertical;
2603
2623
  -webkit-line-clamp: 3;
2604
- opacity: var(--c4p--side-panel--subtitle-opacity);
2624
+ opacity: calc(1 - var(--c4p--side-panel--scroll-animation-progress));
2605
2625
  }
2606
- .c4p--side-panel__container .c4p--side-panel__subtitle-text.c4p--side-panel__subtitle-text-no-animation {
2607
- position: fixed;
2626
+ .c4p--side-panel__container .c4p--side-panel__header--no-title-animation .c4p--side-panel__subtitle-text {
2608
2627
  z-index: 2;
2609
- top: calc(var(--c4p--side-panel--title-text-height) + var(--c4p--side-panel--label-text-height));
2610
2628
  background-color: var(--cds-layer-01, #f4f4f4);
2611
2629
  }
2612
- .c4p--side-panel__container .c4p--side-panel__subtitle-text.c4p--side-panel__subtitle-text-no-animation.c4p--side-panel__subtitle-text-is-animating {
2613
- top: var(--c4p--side-panel--title-text-height);
2614
- }
2615
- .c4p--side-panel__container .c4p--side-panel__subtitle-text.c4p--side-panel__subtitle-without-title {
2630
+ .c4p--side-panel__container .c4p--side-panel__title-text + .c4p--side-panel__subtitle-text {
2616
2631
  padding-top: 1rem;
2617
- padding-right: 3rem;
2618
- }
2619
- .c4p--side-panel__container .c4p--side-panel__title-container.c4p--side-panel__title-container--no-title-animation.c4p--side-panel__title-container-is-animating {
2620
- top: 0;
2621
- }
2622
- .c4p--side-panel__container .c4p--side-panel__title-container.c4p--side-panel__title-container--no-title-animation {
2623
- position: fixed;
2624
- height: calc(var(--c4p--side-panel--title-text-height) + var(--c4p--side-panel--label-text-height));
2625
2632
  }
2626
2633
  .c4p--side-panel__container .c4p--side-panel__inner-content {
2627
- overflow: auto;
2628
- height: calc(100vh - 3rem);
2629
- margin-top: calc(var(--c4p--side-panel--title-text-height) + var(--c4p--side-panel--subtitle-container-height) + var(--c4p--side-panel--action-bar-container-height) + var(--c4p--side-panel--label-text-height));
2630
- overflow-x: hidden;
2634
+ padding: 1rem;
2635
+ padding-top: 0;
2631
2636
  }
2632
- .c4p--side-panel__container.c4p--side-panel__container--has-slug .c4p--side-panel__inner-content {
2633
- background-image: linear-gradient(0deg, var(--cds-ai-gradient-start-01, rgba(242, 244, 248, 0.5)) 0%, var(--cds-ai-gradient-end, rgba(255, 255, 255, 0)) 33%, transparent 100%), linear-gradient(0deg, var(--cds-ai-gradient-start-02, rgba(237, 245, 255, 0.5)) 0%, var(--cds-ai-gradient-end, rgba(255, 255, 255, 0)) 33%, transparent 100%);
2637
+ .c4p--side-panel__container .c4p--side-panel__header:has(.c4p--side-panel__action-toolbar) + .c4p--side-panel__inner-content,
2638
+ .c4p--side-panel__container .c4p--side-panel__header--has-action-toolbar + .c4p--side-panel__inner-content {
2639
+ padding-top: 0.5rem;
2634
2640
  }
2635
- .c4p--side-panel__container .c4p--side-panel__inner-content-with-actions {
2636
- height: calc(100vh - (var(--c4p--side-panel--content-bottom-padding) + 2rem));
2641
+ .c4p--side-panel__container.c4p--side-panel__container--has-slug .c4p--side-panel__inner-content {
2642
+ background-image: linear-gradient(0deg, 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%);
2643
+ border-block-end-color: var(--cds-ai-border-strong, #4589ff);
2637
2644
  }
2638
- .c4p--side-panel__container .c4p--side-panel__inner-content.c4p--side-panel__static-inner-content {
2639
- height: calc(100vh - (var(--c4p--side-panel--title-text-height) + var(--c4p--side-panel--subtitle-container-height) + var(--c4p--side-panel--action-bar-container-height)) + -1 * (3rem + 4rem));
2645
+ .c4p--side-panel__container .c4p--side-panel__inner-content.c4p--side-panel__inner-content--static {
2640
2646
  padding-top: 1rem;
2641
2647
  }
2642
- .c4p--side-panel__container .c4p--side-panel__inner-content.c4p--side-panel__static-inner-content-no-actions {
2643
- height: calc(100vh - (var(--c4p--side-panel--title-text-height) + var(--c4p--side-panel--subtitle-container-height) + var(--c4p--side-panel--action-bar-container-height) + var(--c4p--side-panel--label-text-height)));
2644
- }
2645
- .c4p--side-panel__container .c4p--side-panel__action-toolbar.c4p--side-panel__action-toolbar-no-animation {
2646
- position: fixed;
2647
- top: calc(var(--c4p--side-panel--title-text-height) + var(--c4p--side-panel--subtitle-container-height));
2648
- width: 100%;
2649
- border-bottom: 1px solid var(--cds-layer-active-01, #c6c6c6);
2650
- }
2651
- .c4p--side-panel__container .c4p--side-panel__action-toolbar.c4p--side-panel__action-toolbar-no-animation + .c4p--side-panel__body-content {
2652
- margin-top: calc(var(--c4p--side-panel--title-text-height) + var(--c4p--side-panel--subtitle-container-height) + 3rem);
2653
- }
2654
- .c4p--side-panel__container .c4p--side-panel__subtitle-text.c4p--side-panel__subtitle-text-no-animation.c4p--side-panel__subtitle-text-no-animation-no-action-toolbar {
2655
- border-bottom: 1px solid var(--cds-layer-active-01, #c6c6c6);
2656
- margin-bottom: 1rem;
2657
- }
2658
2648
  .c4p--side-panel__container .c4p--side-panel__action-toolbar {
2659
2649
  position: sticky;
2660
2650
  z-index: 4;
2661
- /* stylelint-disable-next-line carbon/layout-token-use */
2662
- top: var(--c4p--side-panel--title-height);
2663
2651
  display: flex;
2664
2652
  align-items: center;
2665
2653
  justify-content: flex-start;
2666
- padding: 0 1rem;
2667
- margin-bottom: 0.5rem;
2668
2654
  background-color: var(--cds-layer-01, #f4f4f4);
2669
- transition: transform 150ms cubic-bezier(0.2, 0, 0.38, 0.9);
2670
2655
  }
2671
2656
  .c4p--side-panel__container .c4p--side-panel__action-toolbar-leading-button {
2672
2657
  margin-right: 0.5rem;
@@ -2698,21 +2683,13 @@ p.c4p--about-modal__copyright-text:first-child {
2698
2683
  }
2699
2684
  .c4p--side-panel__container .c4p--side-panel__slug-and-close {
2700
2685
  position: fixed;
2701
- z-index: 5;
2686
+ z-index: 10; /* must be higher than title container border bottom */
2702
2687
  top: 0;
2703
2688
  right: 0;
2704
2689
  display: flex;
2705
2690
  }
2706
- .c4p--side-panel__container .c4p--side-panel__body-content {
2707
- padding: 1rem;
2708
- padding-top: 0;
2709
- }
2710
- .c4p--side-panel__container.c4p--side-panel__container-is-animating .c4p--side-panel__actions-container.c4p--action-set--2xl {
2711
- width: 100%;
2712
- max-width: 100%;
2713
- }
2714
2691
  .c4p--side-panel__container .c4p--side-panel__actions-container {
2715
- position: fixed;
2692
+ position: sticky;
2716
2693
  bottom: 0;
2717
2694
  border-top: 1px solid var(--cds-border-subtle-02, #e0e0e0);
2718
2695
  background-color: var(--cds-layer-01, #f4f4f4);
@@ -2732,13 +2709,11 @@ p.c4p--about-modal__copyright-text:first-child {
2732
2709
  width: 25%;
2733
2710
  }
2734
2711
  }
2735
- .c4p--side-panel__container .c4p--side-panel__actions-container .c4p--action-set__action-button {
2736
- height: 4rem;
2737
- }
2738
- .c4p--side-panel__container .c4p--side-panel__actions-container.c4p--side-panel__actions-container-condensed .c4p--action-set__action-button {
2739
- height: 3rem;
2712
+ .c4p--side-panel__container .c4p--side-panel__actions-container .c4p--action-set__action-button.c4p--action-set__action-button {
2713
+ height: var(--c4p--side-panel--actions-height);
2740
2714
  }
2741
2715
  .c4p--side-panel__container.c4p--side-panel__container.c4p--side-panel__container--xs .c4p--side-panel__actions-container.c4p--action-set--sm {
2716
+ /* any value is single value list */
2742
2717
  width: 16rem;
2743
2718
  max-width: 100%;
2744
2719
  }
@@ -2853,14 +2828,14 @@ p.c4p--about-modal__copyright-text:first-child {
2853
2828
  }
2854
2829
 
2855
2830
  .c4p--create-side-panel.c4p--side-panel__container--2xl .c4p--side-panel__title-text {
2856
- width: calc(75% - 1rem);
2857
- padding-right: calc(75% * 0.2 - 1rem);
2831
+ width: calc(40rem 75% - 1rem);
2832
+ padding-right: calc(40rem 75% * 0.2 - 1rem);
2858
2833
  margin-bottom: 0.25rem;
2859
2834
  }
2860
2835
 
2861
2836
  .c4p--create-side-panel.c4p--side-panel__container--2xl .c4p--side-panel__subtitle-text {
2862
- width: calc(75% - 1rem);
2863
- padding-right: calc(75% * 0.2 - 1rem);
2837
+ width: calc(40rem 75% - 1rem);
2838
+ padding-right: calc(40rem 75% * 0.2 - 1rem);
2864
2839
  padding-bottom: 1rem;
2865
2840
  border-bottom: 1px solid var(--cds-layer-accent-01, #e0e0e0);
2866
2841
  color: var(--cds-text-secondary, #525252);
@@ -3552,7 +3527,7 @@ p.c4p--about-modal__copyright-text:first-child {
3552
3527
  }
3553
3528
 
3554
3529
  .c4p--card .cds--slug {
3555
- background: linear-gradient(0deg, var(--cds-slug-callout-aura-start, rgba(237, 245, 255, 0.6)) 0%, var(--cds-slug-callout-aura-end, rgba(255, 255, 255, 0)) 50%, transparent 50%), linear-gradient(180deg, var(--cds-slug-callout-gradient-top, rgba(244, 244, 244, 0.85)) 0%, var(--cds-slug-callout-gradient-bottom, rgba(224, 224, 224, 0.85)) 100%) rgba(0, 0, 0, 0.01);
3530
+ 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;
3556
3531
  position: absolute;
3557
3532
  top: 1rem;
3558
3533
  right: 1rem;
@@ -3581,7 +3556,7 @@ p.c4p--about-modal__copyright-text:first-child {
3581
3556
  }
3582
3557
 
3583
3558
  .c4p--card--has-slug {
3584
- background: linear-gradient(0deg, var(--cds-slug-callout-aura-start, rgba(237, 245, 255, 0.6)) 0%, var(--cds-slug-callout-aura-end, rgba(255, 255, 255, 0)) 50%, transparent 50%), linear-gradient(180deg, var(--cds-slug-callout-gradient-top, rgba(244, 244, 244, 0.85)) 0%, var(--cds-slug-callout-gradient-bottom, rgba(224, 224, 224, 0.85)) 100%) rgba(0, 0, 0, 0.01);
3559
+ 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;
3585
3560
  border: 1px solid var(--cds-border-tile);
3586
3561
  }
3587
3562
 
@@ -4189,9 +4164,16 @@ button.c4p--add-select__global-filter-toggle--open {
4189
4164
  }
4190
4165
  }
4191
4166
  .c4p--notifications-panel__container {
4167
+ --cds-ai-aura-end: rgba(0, 0, 0, 0);
4168
+ --cds-ai-aura-start: rgba(69, 137, 255, 0.1);
4169
+ --cds-ai-border-end: rgba(166, 200, 255, 0.24);
4170
+ --cds-ai-border-start: #4589ff;
4171
+ --cds-ai-border-strong: #78a9ff;
4172
+ --cds-ai-drop-shadow: rgba(15, 98, 254, 0.32);
4192
4173
  --cds-ai-gradient-end: rgba(38, 38, 38, 0);
4193
4174
  --cds-ai-gradient-start-01: rgba(208, 226, 255, 0.2);
4194
4175
  --cds-ai-gradient-start-02: transparent;
4176
+ --cds-ai-inner-shadow: rgba(69, 137, 255, 0.2);
4195
4177
  --cds-background: #161616;
4196
4178
  --cds-background-active: rgba(141, 141, 141, 0.4);
4197
4179
  --cds-background-brand: #0f62fe;
@@ -4207,11 +4189,11 @@ button.c4p--add-select__global-filter-toggle--open {
4207
4189
  --cds-border-strong-02: #8d8d8d;
4208
4190
  --cds-border-strong-03: #a8a8a8;
4209
4191
  --cds-border-subtle-00: #393939;
4210
- --cds-border-subtle-01: #393939;
4211
- --cds-border-subtle-02: #525252;
4192
+ --cds-border-subtle-01: #525252;
4193
+ --cds-border-subtle-02: #6f6f6f;
4212
4194
  --cds-border-subtle-03: #6f6f6f;
4213
- --cds-border-subtle-selected-01: #525252;
4214
- --cds-border-subtle-selected-02: #6f6f6f;
4195
+ --cds-border-subtle-selected-01: #6f6f6f;
4196
+ --cds-border-subtle-selected-02: #8d8d8d;
4215
4197
  --cds-border-subtle-selected-03: #8d8d8d;
4216
4198
  --cds-border-tile-01: #525252;
4217
4199
  --cds-border-tile-02: #6f6f6f;
@@ -4273,20 +4255,26 @@ button.c4p--add-select__global-filter-toggle--open {
4273
4255
  --cds-skeleton-element: #393939;
4274
4256
  --cds-slug-background: #c6c6c6;
4275
4257
  --cds-slug-background-hover: #e0e0e0;
4276
- --cds-slug-callout-aura-end: rgba(22, 22, 22, 0);
4258
+ --cds-slug-callout-aura-end: rgba(0, 0, 0, 0);
4277
4259
  --cds-slug-callout-aura-end-hover-01: rgba(22, 22, 22, 0);
4278
4260
  --cds-slug-callout-aura-end-hover-02: transparent;
4279
4261
  --cds-slug-callout-aura-end-selected: rgba(22, 22, 22, 0);
4280
- --cds-slug-callout-aura-start: rgba(208, 226, 255, 0.2);
4262
+ --cds-slug-callout-aura-start: rgba(69, 137, 255, 0.1);
4281
4263
  --cds-slug-callout-aura-start-hover-01: rgba(184, 211, 255, 0.3);
4282
4264
  --cds-slug-callout-aura-start-hover-02: transparent;
4283
4265
  --cds-slug-callout-aura-start-selected: rgba(208, 226, 255, 0.2);
4266
+ --cds-slug-callout-caret-bottom: #3d4655;
4267
+ --cds-slug-callout-caret-bottom-background: #213250;
4268
+ --cds-slug-callout-caret-bottom-background-actions: #192436;
4269
+ --cds-slug-callout-caret-center: #3f68af;
4284
4270
  --cds-slug-callout-gradient-bottom: rgba(38, 38, 38, 0.85);
4285
4271
  --cds-slug-callout-gradient-bottom-hover: rgba(71, 71, 71, 0.55);
4286
4272
  --cds-slug-callout-gradient-bottom-selected: rgba(71, 71, 71, 0.85);
4287
4273
  --cds-slug-callout-gradient-top: rgba(22, 22, 22, 0.85);
4288
4274
  --cds-slug-callout-gradient-top-hover: rgba(57, 57, 57, 0.55);
4289
4275
  --cds-slug-callout-gradient-top-selected: rgba(57, 57, 57, 0.85);
4276
+ --cds-slug-callout-shadow-outer-01: rgba(0, 45, 156, 0.25);
4277
+ --cds-slug-callout-shadow-outer-02: rgba(0, 0, 0, 0.65);
4290
4278
  --cds-slug-gradient: #8d8d8d linear-gradient(135deg, #f4f4f4 0%, rgba(255, 255, 255, 0) 100%);
4291
4279
  --cds-slug-gradient-hover: #a8a8a8 linear-gradient(135deg, #ffffff 0%, rgba(255, 255, 255, 0) 100%);
4292
4280
  --cds-slug-hollow-hover: #b5b5b5;
@@ -6478,7 +6466,9 @@ button.c4p--add-select__global-filter-toggle--open {
6478
6466
  .c4p--tag-set-overflow__tagset-popover .c4p--tag-set-overflow__tag-list {
6479
6467
  display: flex;
6480
6468
  flex-direction: column;
6481
- margin-bottom: 0.5rem;
6469
+ }
6470
+ .c4p--tag-set-overflow__tagset-popover .c4p--tag-set-overflow__show-all-tags-link {
6471
+ margin-top: 0.5rem;
6482
6472
  }
6483
6473
  .c4p--tag-set-overflow__tagset-popover .c4p--tag-set-overflow__tag-item.c4p--tag-set-overflow__tag-item--tag .cds--tag {
6484
6474
  background-color: var(--cds-background-inverse-hover, #474747);
@@ -7164,6 +7154,10 @@ button.c4p--add-select__global-filter-toggle--open {
7164
7154
  display: flex;
7165
7155
  }
7166
7156
 
7157
+ .c4p--saving__buttons .cds--btn .cds--inline-loading {
7158
+ min-block-size: auto;
7159
+ }
7160
+
7167
7161
  @keyframes rotating {
7168
7162
  0% {
7169
7163
  transform: scaleY(-1) rotate(360deg);
@@ -7830,9 +7824,16 @@ button.c4p--add-select__global-filter-toggle--open {
7830
7824
  despite of which carbon theme the user has.
7831
7825
  */
7832
7826
  .c4p--web-terminal {
7827
+ --cds-ai-aura-end: rgba(0, 0, 0, 0);
7828
+ --cds-ai-aura-start: rgba(69, 137, 255, 0.1);
7829
+ --cds-ai-border-end: rgba(166, 200, 255, 0.24);
7830
+ --cds-ai-border-start: #4589ff;
7831
+ --cds-ai-border-strong: #78a9ff;
7832
+ --cds-ai-drop-shadow: rgba(15, 98, 254, 0.32);
7833
7833
  --cds-ai-gradient-end: rgba(38, 38, 38, 0);
7834
7834
  --cds-ai-gradient-start-01: rgba(208, 226, 255, 0.2);
7835
7835
  --cds-ai-gradient-start-02: transparent;
7836
+ --cds-ai-inner-shadow: rgba(69, 137, 255, 0.2);
7836
7837
  --cds-background: #262626;
7837
7838
  --cds-background-active: rgba(141, 141, 141, 0.4);
7838
7839
  --cds-background-brand: #0f62fe;
@@ -7848,11 +7849,11 @@ button.c4p--add-select__global-filter-toggle--open {
7848
7849
  --cds-border-strong-02: #a8a8a8;
7849
7850
  --cds-border-strong-03: #c6c6c6;
7850
7851
  --cds-border-subtle-00: #525252;
7851
- --cds-border-subtle-01: #525252;
7852
- --cds-border-subtle-02: #6f6f6f;
7852
+ --cds-border-subtle-01: #6f6f6f;
7853
+ --cds-border-subtle-02: #8d8d8d;
7853
7854
  --cds-border-subtle-03: #8d8d8d;
7854
- --cds-border-subtle-selected-01: #6f6f6f;
7855
- --cds-border-subtle-selected-02: #8d8d8d;
7855
+ --cds-border-subtle-selected-01: #8d8d8d;
7856
+ --cds-border-subtle-selected-02: #a8a8a8;
7856
7857
  --cds-border-subtle-selected-03: #a8a8a8;
7857
7858
  --cds-border-tile-01: #6f6f6f;
7858
7859
  --cds-border-tile-02: #8d8d8d;
@@ -7914,20 +7915,26 @@ button.c4p--add-select__global-filter-toggle--open {
7914
7915
  --cds-skeleton-element: #525252;
7915
7916
  --cds-slug-background: #c6c6c6;
7916
7917
  --cds-slug-background-hover: #e0e0e0;
7917
- --cds-slug-callout-aura-end: rgba(22, 22, 22, 0);
7918
+ --cds-slug-callout-aura-end: rgba(0, 0, 0, 0);
7918
7919
  --cds-slug-callout-aura-end-hover-01: rgba(22, 22, 22, 0);
7919
7920
  --cds-slug-callout-aura-end-hover-02: transparent;
7920
7921
  --cds-slug-callout-aura-end-selected: rgba(22, 22, 22, 0);
7921
- --cds-slug-callout-aura-start: rgba(208, 226, 255, 0.2);
7922
+ --cds-slug-callout-aura-start: rgba(69, 137, 255, 0.1);
7922
7923
  --cds-slug-callout-aura-start-hover-01: rgba(184, 211, 255, 0.3);
7923
7924
  --cds-slug-callout-aura-start-hover-02: transparent;
7924
7925
  --cds-slug-callout-aura-start-selected: rgba(208, 226, 255, 0.2);
7926
+ --cds-slug-callout-caret-bottom: #465060;
7927
+ --cds-slug-callout-caret-bottom-background: #2d3f5c;
7928
+ --cds-slug-callout-caret-bottom-background-actions: #253042;
7929
+ --cds-slug-callout-caret-center: #456fb5;
7925
7930
  --cds-slug-callout-gradient-bottom: rgba(38, 38, 38, 0.85);
7926
7931
  --cds-slug-callout-gradient-bottom-hover: rgba(71, 71, 71, 0.55);
7927
7932
  --cds-slug-callout-gradient-bottom-selected: rgba(71, 71, 71, 0.85);
7928
7933
  --cds-slug-callout-gradient-top: rgba(22, 22, 22, 0.85);
7929
7934
  --cds-slug-callout-gradient-top-hover: rgba(57, 57, 57, 0.55);
7930
7935
  --cds-slug-callout-gradient-top-selected: rgba(57, 57, 57, 0.85);
7936
+ --cds-slug-callout-shadow-outer-01: rgba(0, 45, 156, 0.25);
7937
+ --cds-slug-callout-shadow-outer-02: rgba(0, 0, 0, 0.65);
7931
7938
  --cds-slug-gradient: #8d8d8d linear-gradient(135deg, #f4f4f4 0%, rgba(255, 255, 255, 0) 100%);
7932
7939
  --cds-slug-gradient-hover: #a8a8a8 linear-gradient(135deg, #ffffff 0%, rgba(255, 255, 255, 0) 100%);
7933
7940
  --cds-slug-hollow-hover: #b5b5b5;
@@ -8244,9 +8251,16 @@ button.c4p--add-select__global-filter-toggle--open {
8244
8251
  }
8245
8252
 
8246
8253
  .c4p--web-terminal__documentation-overflow {
8254
+ --cds-ai-aura-end: rgba(0, 0, 0, 0);
8255
+ --cds-ai-aura-start: rgba(69, 137, 255, 0.1);
8256
+ --cds-ai-border-end: rgba(166, 200, 255, 0.24);
8257
+ --cds-ai-border-start: #4589ff;
8258
+ --cds-ai-border-strong: #78a9ff;
8259
+ --cds-ai-drop-shadow: rgba(15, 98, 254, 0.32);
8247
8260
  --cds-ai-gradient-end: rgba(38, 38, 38, 0);
8248
8261
  --cds-ai-gradient-start-01: rgba(208, 226, 255, 0.2);
8249
8262
  --cds-ai-gradient-start-02: transparent;
8263
+ --cds-ai-inner-shadow: rgba(69, 137, 255, 0.2);
8250
8264
  --cds-background: #161616;
8251
8265
  --cds-background-active: rgba(141, 141, 141, 0.4);
8252
8266
  --cds-background-brand: #0f62fe;
@@ -8262,11 +8276,11 @@ button.c4p--add-select__global-filter-toggle--open {
8262
8276
  --cds-border-strong-02: #8d8d8d;
8263
8277
  --cds-border-strong-03: #a8a8a8;
8264
8278
  --cds-border-subtle-00: #393939;
8265
- --cds-border-subtle-01: #393939;
8266
- --cds-border-subtle-02: #525252;
8279
+ --cds-border-subtle-01: #525252;
8280
+ --cds-border-subtle-02: #6f6f6f;
8267
8281
  --cds-border-subtle-03: #6f6f6f;
8268
- --cds-border-subtle-selected-01: #525252;
8269
- --cds-border-subtle-selected-02: #6f6f6f;
8282
+ --cds-border-subtle-selected-01: #6f6f6f;
8283
+ --cds-border-subtle-selected-02: #8d8d8d;
8270
8284
  --cds-border-subtle-selected-03: #8d8d8d;
8271
8285
  --cds-border-tile-01: #525252;
8272
8286
  --cds-border-tile-02: #6f6f6f;
@@ -8328,20 +8342,26 @@ button.c4p--add-select__global-filter-toggle--open {
8328
8342
  --cds-skeleton-element: #393939;
8329
8343
  --cds-slug-background: #c6c6c6;
8330
8344
  --cds-slug-background-hover: #e0e0e0;
8331
- --cds-slug-callout-aura-end: rgba(22, 22, 22, 0);
8345
+ --cds-slug-callout-aura-end: rgba(0, 0, 0, 0);
8332
8346
  --cds-slug-callout-aura-end-hover-01: rgba(22, 22, 22, 0);
8333
8347
  --cds-slug-callout-aura-end-hover-02: transparent;
8334
8348
  --cds-slug-callout-aura-end-selected: rgba(22, 22, 22, 0);
8335
- --cds-slug-callout-aura-start: rgba(208, 226, 255, 0.2);
8349
+ --cds-slug-callout-aura-start: rgba(69, 137, 255, 0.1);
8336
8350
  --cds-slug-callout-aura-start-hover-01: rgba(184, 211, 255, 0.3);
8337
8351
  --cds-slug-callout-aura-start-hover-02: transparent;
8338
8352
  --cds-slug-callout-aura-start-selected: rgba(208, 226, 255, 0.2);
8353
+ --cds-slug-callout-caret-bottom: #3d4655;
8354
+ --cds-slug-callout-caret-bottom-background: #213250;
8355
+ --cds-slug-callout-caret-bottom-background-actions: #192436;
8356
+ --cds-slug-callout-caret-center: #3f68af;
8339
8357
  --cds-slug-callout-gradient-bottom: rgba(38, 38, 38, 0.85);
8340
8358
  --cds-slug-callout-gradient-bottom-hover: rgba(71, 71, 71, 0.55);
8341
8359
  --cds-slug-callout-gradient-bottom-selected: rgba(71, 71, 71, 0.85);
8342
8360
  --cds-slug-callout-gradient-top: rgba(22, 22, 22, 0.85);
8343
8361
  --cds-slug-callout-gradient-top-hover: rgba(57, 57, 57, 0.55);
8344
8362
  --cds-slug-callout-gradient-top-selected: rgba(57, 57, 57, 0.85);
8363
+ --cds-slug-callout-shadow-outer-01: rgba(0, 45, 156, 0.25);
8364
+ --cds-slug-callout-shadow-outer-02: rgba(0, 0, 0, 0.65);
8345
8365
  --cds-slug-gradient: #8d8d8d linear-gradient(135deg, #f4f4f4 0%, rgba(255, 255, 255, 0) 100%);
8346
8366
  --cds-slug-gradient-hover: #a8a8a8 linear-gradient(135deg, #ffffff 0%, rgba(255, 255, 255, 0) 100%);
8347
8367
  --cds-slug-hollow-hover: #b5b5b5;
@@ -9546,6 +9566,7 @@ button.c4p--add-select__global-filter-toggle--open {
9546
9566
  position: sticky;
9547
9567
  z-index: 1;
9548
9568
  left: 0;
9569
+ background-color: var(--cds-layer-01, #f4f4f4);
9549
9570
  }
9550
9571
  .c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-center .c4p--datagrid__cell {
9551
9572
  align-items: center;
@@ -9567,6 +9588,7 @@ button.c4p--add-select__global-filter-toggle--open {
9567
9588
  .c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-center th.cds--table-column-checkbox.c4p--datagrid__checkbox-cell-sticky-left {
9568
9589
  position: sticky;
9569
9590
  left: 0;
9591
+ background-color: var(--cds-layer-01, #f4f4f4);
9570
9592
  }
9571
9593
  .c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-center .c4p--datagrid__checkbox-cell th.cds--table-column-checkbox {
9572
9594
  display: flex;
@@ -9643,6 +9665,9 @@ button.c4p--add-select__global-filter-toggle--open {
9643
9665
  height: 100%;
9644
9666
  overflow-x: auto;
9645
9667
  }
9668
+ .c4p--datagrid__grid-container .c4p--datagrid-filter-panel + .c4p--datagrid__table-container-inner .cds--data-table-content {
9669
+ height: fit-content;
9670
+ }
9646
9671
  .c4p--datagrid__grid-container table.c4p--datagrid__table-simple {
9647
9672
  display: flex;
9648
9673
  overflow: auto;
@@ -9780,7 +9805,7 @@ button.c4p--add-select__global-filter-toggle--open {
9780
9805
  }
9781
9806
 
9782
9807
  .c4p--datagrid__resizableColumn:hover {
9783
- background-color: var(--cds-background-selected-hover, rgba(141, 141, 141, 0.32));
9808
+ background-color: var(--cds-layer-selected-hover);
9784
9809
  }
9785
9810
  .c4p--datagrid__resizableColumn:hover .c4p--datagrid__resizer {
9786
9811
  border-right: 0.125rem solid var(--cds-border-strong-01, #8d8d8d);
@@ -10327,6 +10352,7 @@ button.c4p--add-select__global-filter-toggle--open {
10327
10352
  display: flex;
10328
10353
  align-items: center;
10329
10354
  border-left: 1px solid var(--cds-layer-active-02, #c6c6c6);
10355
+ background-color: var(--cds-layer-01, #f4f4f4);
10330
10356
  }
10331
10357
 
10332
10358
  .c4p--datagrid__right-sticky-column-header {
@@ -10342,6 +10368,7 @@ button.c4p--add-select__global-filter-toggle--open {
10342
10368
  display: flex;
10343
10369
  align-items: center;
10344
10370
  border-right: 1px solid var(--cds-layer-active-02, #c6c6c6);
10371
+ background-color: var(--cds-layer-01, #f4f4f4);
10345
10372
  }
10346
10373
 
10347
10374
  .c4p--datagrid__left-sticky-column-header {
@@ -11336,6 +11363,10 @@ th.c4p--datagrid__select-all-toggle-on.button {
11336
11363
  min-width: auto;
11337
11364
  }
11338
11365
 
11366
+ .c4p--datagrid .cds--pagination {
11367
+ background-color: var(--cds-layer-02, #ffffff);
11368
+ }
11369
+
11339
11370
  :root {
11340
11371
  --cds-grid-gutter: 2rem;
11341
11372
  --cds-grid-columns: 4;
@@ -14475,9 +14506,16 @@ a.cds--side-nav__link--current::before {
14475
14506
  /* stylelint-disable function-no-unknown */
14476
14507
  /* stylelint-disable max-nesting-depth */
14477
14508
  .c4p--guidebanner {
14509
+ --cds-ai-aura-end: rgba(0, 0, 0, 0);
14510
+ --cds-ai-aura-start: rgba(69, 137, 255, 0.1);
14511
+ --cds-ai-border-end: rgba(166, 200, 255, 0.24);
14512
+ --cds-ai-border-start: #4589ff;
14513
+ --cds-ai-border-strong: #78a9ff;
14514
+ --cds-ai-drop-shadow: rgba(15, 98, 254, 0.32);
14478
14515
  --cds-ai-gradient-end: rgba(38, 38, 38, 0);
14479
14516
  --cds-ai-gradient-start-01: rgba(208, 226, 255, 0.2);
14480
14517
  --cds-ai-gradient-start-02: transparent;
14518
+ --cds-ai-inner-shadow: rgba(69, 137, 255, 0.2);
14481
14519
  --cds-background: #161616;
14482
14520
  --cds-background-active: rgba(141, 141, 141, 0.4);
14483
14521
  --cds-background-brand: #0f62fe;
@@ -14493,11 +14531,11 @@ a.cds--side-nav__link--current::before {
14493
14531
  --cds-border-strong-02: #8d8d8d;
14494
14532
  --cds-border-strong-03: #a8a8a8;
14495
14533
  --cds-border-subtle-00: #393939;
14496
- --cds-border-subtle-01: #393939;
14497
- --cds-border-subtle-02: #525252;
14534
+ --cds-border-subtle-01: #525252;
14535
+ --cds-border-subtle-02: #6f6f6f;
14498
14536
  --cds-border-subtle-03: #6f6f6f;
14499
- --cds-border-subtle-selected-01: #525252;
14500
- --cds-border-subtle-selected-02: #6f6f6f;
14537
+ --cds-border-subtle-selected-01: #6f6f6f;
14538
+ --cds-border-subtle-selected-02: #8d8d8d;
14501
14539
  --cds-border-subtle-selected-03: #8d8d8d;
14502
14540
  --cds-border-tile-01: #525252;
14503
14541
  --cds-border-tile-02: #6f6f6f;
@@ -14559,20 +14597,26 @@ a.cds--side-nav__link--current::before {
14559
14597
  --cds-skeleton-element: #393939;
14560
14598
  --cds-slug-background: #c6c6c6;
14561
14599
  --cds-slug-background-hover: #e0e0e0;
14562
- --cds-slug-callout-aura-end: rgba(22, 22, 22, 0);
14600
+ --cds-slug-callout-aura-end: rgba(0, 0, 0, 0);
14563
14601
  --cds-slug-callout-aura-end-hover-01: rgba(22, 22, 22, 0);
14564
14602
  --cds-slug-callout-aura-end-hover-02: transparent;
14565
14603
  --cds-slug-callout-aura-end-selected: rgba(22, 22, 22, 0);
14566
- --cds-slug-callout-aura-start: rgba(208, 226, 255, 0.2);
14604
+ --cds-slug-callout-aura-start: rgba(69, 137, 255, 0.1);
14567
14605
  --cds-slug-callout-aura-start-hover-01: rgba(184, 211, 255, 0.3);
14568
14606
  --cds-slug-callout-aura-start-hover-02: transparent;
14569
14607
  --cds-slug-callout-aura-start-selected: rgba(208, 226, 255, 0.2);
14608
+ --cds-slug-callout-caret-bottom: #3d4655;
14609
+ --cds-slug-callout-caret-bottom-background: #213250;
14610
+ --cds-slug-callout-caret-bottom-background-actions: #192436;
14611
+ --cds-slug-callout-caret-center: #3f68af;
14570
14612
  --cds-slug-callout-gradient-bottom: rgba(38, 38, 38, 0.85);
14571
14613
  --cds-slug-callout-gradient-bottom-hover: rgba(71, 71, 71, 0.55);
14572
14614
  --cds-slug-callout-gradient-bottom-selected: rgba(71, 71, 71, 0.85);
14573
14615
  --cds-slug-callout-gradient-top: rgba(22, 22, 22, 0.85);
14574
14616
  --cds-slug-callout-gradient-top-hover: rgba(57, 57, 57, 0.55);
14575
14617
  --cds-slug-callout-gradient-top-selected: rgba(57, 57, 57, 0.85);
14618
+ --cds-slug-callout-shadow-outer-01: rgba(0, 45, 156, 0.25);
14619
+ --cds-slug-callout-shadow-outer-02: rgba(0, 0, 0, 0.65);
14576
14620
  --cds-slug-gradient: #8d8d8d linear-gradient(135deg, #f4f4f4 0%, rgba(255, 255, 255, 0) 100%);
14577
14621
  --cds-slug-gradient-hover: #a8a8a8 linear-gradient(135deg, #ffffff 0%, rgba(255, 255, 255, 0) 100%);
14578
14622
  --cds-slug-hollow-hover: #b5b5b5;
@@ -15263,9 +15307,16 @@ a.cds--side-nav__link--current::before {
15263
15307
  }
15264
15308
  }
15265
15309
  .c4p--non-linear-reading__dark {
15310
+ --cds-ai-aura-end: rgba(0, 0, 0, 0);
15311
+ --cds-ai-aura-start: rgba(69, 137, 255, 0.1);
15312
+ --cds-ai-border-end: rgba(166, 200, 255, 0.24);
15313
+ --cds-ai-border-start: #4589ff;
15314
+ --cds-ai-border-strong: #78a9ff;
15315
+ --cds-ai-drop-shadow: rgba(15, 98, 254, 0.32);
15266
15316
  --cds-ai-gradient-end: rgba(38, 38, 38, 0);
15267
15317
  --cds-ai-gradient-start-01: rgba(208, 226, 255, 0.2);
15268
15318
  --cds-ai-gradient-start-02: transparent;
15319
+ --cds-ai-inner-shadow: rgba(69, 137, 255, 0.2);
15269
15320
  --cds-background: #161616;
15270
15321
  --cds-background-active: rgba(141, 141, 141, 0.4);
15271
15322
  --cds-background-brand: #0f62fe;
@@ -15281,11 +15332,11 @@ a.cds--side-nav__link--current::before {
15281
15332
  --cds-border-strong-02: #8d8d8d;
15282
15333
  --cds-border-strong-03: #a8a8a8;
15283
15334
  --cds-border-subtle-00: #393939;
15284
- --cds-border-subtle-01: #393939;
15285
- --cds-border-subtle-02: #525252;
15335
+ --cds-border-subtle-01: #525252;
15336
+ --cds-border-subtle-02: #6f6f6f;
15286
15337
  --cds-border-subtle-03: #6f6f6f;
15287
- --cds-border-subtle-selected-01: #525252;
15288
- --cds-border-subtle-selected-02: #6f6f6f;
15338
+ --cds-border-subtle-selected-01: #6f6f6f;
15339
+ --cds-border-subtle-selected-02: #8d8d8d;
15289
15340
  --cds-border-subtle-selected-03: #8d8d8d;
15290
15341
  --cds-border-tile-01: #525252;
15291
15342
  --cds-border-tile-02: #6f6f6f;
@@ -15347,20 +15398,26 @@ a.cds--side-nav__link--current::before {
15347
15398
  --cds-skeleton-element: #393939;
15348
15399
  --cds-slug-background: #c6c6c6;
15349
15400
  --cds-slug-background-hover: #e0e0e0;
15350
- --cds-slug-callout-aura-end: rgba(22, 22, 22, 0);
15401
+ --cds-slug-callout-aura-end: rgba(0, 0, 0, 0);
15351
15402
  --cds-slug-callout-aura-end-hover-01: rgba(22, 22, 22, 0);
15352
15403
  --cds-slug-callout-aura-end-hover-02: transparent;
15353
15404
  --cds-slug-callout-aura-end-selected: rgba(22, 22, 22, 0);
15354
- --cds-slug-callout-aura-start: rgba(208, 226, 255, 0.2);
15405
+ --cds-slug-callout-aura-start: rgba(69, 137, 255, 0.1);
15355
15406
  --cds-slug-callout-aura-start-hover-01: rgba(184, 211, 255, 0.3);
15356
15407
  --cds-slug-callout-aura-start-hover-02: transparent;
15357
15408
  --cds-slug-callout-aura-start-selected: rgba(208, 226, 255, 0.2);
15409
+ --cds-slug-callout-caret-bottom: #3d4655;
15410
+ --cds-slug-callout-caret-bottom-background: #213250;
15411
+ --cds-slug-callout-caret-bottom-background-actions: #192436;
15412
+ --cds-slug-callout-caret-center: #3f68af;
15358
15413
  --cds-slug-callout-gradient-bottom: rgba(38, 38, 38, 0.85);
15359
15414
  --cds-slug-callout-gradient-bottom-hover: rgba(71, 71, 71, 0.55);
15360
15415
  --cds-slug-callout-gradient-bottom-selected: rgba(71, 71, 71, 0.85);
15361
15416
  --cds-slug-callout-gradient-top: rgba(22, 22, 22, 0.85);
15362
15417
  --cds-slug-callout-gradient-top-hover: rgba(57, 57, 57, 0.55);
15363
15418
  --cds-slug-callout-gradient-top-selected: rgba(57, 57, 57, 0.85);
15419
+ --cds-slug-callout-shadow-outer-01: rgba(0, 45, 156, 0.25);
15420
+ --cds-slug-callout-shadow-outer-02: rgba(0, 0, 0, 0.65);
15364
15421
  --cds-slug-gradient: #8d8d8d linear-gradient(135deg, #f4f4f4 0%, rgba(255, 255, 255, 0) 100%);
15365
15422
  --cds-slug-gradient-hover: #a8a8a8 linear-gradient(135deg, #ffffff 0%, rgba(255, 255, 255, 0) 100%);
15366
15423
  --cds-slug-hollow-hover: #b5b5b5;
@@ -15736,6 +15793,12 @@ a.cds--side-nav__link--current::before {
15736
15793
  display: none;
15737
15794
  }
15738
15795
 
15796
+ .c4p--delimited-list-truncate {
15797
+ overflow: hidden;
15798
+ text-overflow: ellipsis;
15799
+ white-space: nowrap;
15800
+ }
15801
+
15739
15802
  html,
15740
15803
  body,
15741
15804
  div,
@@ -16760,9 +16823,16 @@ em {
16760
16823
  .cds--white {
16761
16824
  background-color: var(--cds-background);
16762
16825
  color: var(--cds-text-primary);
16826
+ --cds-ai-aura-end: rgba(255, 255, 255, 0);
16827
+ --cds-ai-aura-start: rgba(69, 137, 255, 0.1);
16828
+ --cds-ai-border-end: #d0e2ff;
16829
+ --cds-ai-border-start: #78a9ff;
16830
+ --cds-ai-border-strong: #4589ff;
16831
+ --cds-ai-drop-shadow: rgba(15, 98, 254, 0.32);
16763
16832
  --cds-ai-gradient-end: rgba(255, 255, 255, 0);
16764
16833
  --cds-ai-gradient-start-01: rgba(242, 244, 248, 0.5);
16765
16834
  --cds-ai-gradient-start-02: rgba(237, 245, 255, 0.5);
16835
+ --cds-ai-inner-shadow: rgba(69, 137, 255, 0.2);
16766
16836
  --cds-background: #ffffff;
16767
16837
  --cds-background-active: rgba(141, 141, 141, 0.5);
16768
16838
  --cds-background-brand: #0f62fe;
@@ -16848,16 +16918,22 @@ em {
16848
16918
  --cds-slug-callout-aura-end-hover-01: rgba(255, 255, 255, 0);
16849
16919
  --cds-slug-callout-aura-end-hover-02: rgba(255, 255, 255, 0);
16850
16920
  --cds-slug-callout-aura-end-selected: rgba(255, 255, 255, 0);
16851
- --cds-slug-callout-aura-start: rgba(237, 245, 255, 0.6);
16921
+ --cds-slug-callout-aura-start: rgba(69, 137, 255, 0.1);
16852
16922
  --cds-slug-callout-aura-start-hover-01: rgba(255, 255, 255, 0.5);
16853
16923
  --cds-slug-callout-aura-start-hover-02: rgba(208, 226, 255, 0.5);
16854
16924
  --cds-slug-callout-aura-start-selected: rgba(237, 245, 255, 0.6);
16925
+ --cds-slug-callout-caret-bottom: #d0e2ff;
16926
+ --cds-slug-callout-caret-bottom-background: #d5e5ff;
16927
+ --cds-slug-callout-caret-bottom-background-actions: #dae5f8;
16928
+ --cds-slug-callout-caret-center: #a7c7ff;
16855
16929
  --cds-slug-callout-gradient-bottom: rgba(224, 224, 224, 0.85);
16856
16930
  --cds-slug-callout-gradient-bottom-hover: rgba(209, 209, 209, 0.55);
16857
16931
  --cds-slug-callout-gradient-bottom-selected: rgba(209, 209, 209, 0.85);
16858
16932
  --cds-slug-callout-gradient-top: rgba(244, 244, 244, 0.85);
16859
16933
  --cds-slug-callout-gradient-top-hover: rgba(224, 224, 224, 0.55);
16860
16934
  --cds-slug-callout-gradient-top-selected: rgba(224, 224, 224, 0.85);
16935
+ --cds-slug-callout-shadow-outer-01: rgba(0, 67, 206, 0.25);
16936
+ --cds-slug-callout-shadow-outer-02: rgba(0, 0, 0, 0.1);
16861
16937
  --cds-slug-hollow-hover: #474747;
16862
16938
  --cds-support-caution-major: #ff832b;
16863
16939
  --cds-support-caution-minor: #f1c21b;
@@ -16954,9 +17030,16 @@ em {
16954
17030
  .cds--g10 {
16955
17031
  background-color: var(--cds-background);
16956
17032
  color: var(--cds-text-primary);
17033
+ --cds-ai-aura-end: rgba(255, 255, 255, 0);
17034
+ --cds-ai-aura-start: rgba(69, 137, 255, 0.1);
17035
+ --cds-ai-border-end: #d0e2ff;
17036
+ --cds-ai-border-start: #78a9ff;
17037
+ --cds-ai-border-strong: #4589ff;
17038
+ --cds-ai-drop-shadow: rgba(15, 98, 254, 0.32);
16957
17039
  --cds-ai-gradient-end: rgba(255, 255, 255, 0);
16958
17040
  --cds-ai-gradient-start-01: rgba(242, 244, 248, 0.5);
16959
17041
  --cds-ai-gradient-start-02: rgba(237, 245, 255, 0.5);
17042
+ --cds-ai-inner-shadow: rgba(69, 137, 255, 0.2);
16960
17043
  --cds-background: #f4f4f4;
16961
17044
  --cds-background-active: rgba(141, 141, 141, 0.5);
16962
17045
  --cds-background-brand: #0f62fe;
@@ -17042,16 +17125,22 @@ em {
17042
17125
  --cds-slug-callout-aura-end-hover-01: rgba(255, 255, 255, 0);
17043
17126
  --cds-slug-callout-aura-end-hover-02: rgba(255, 255, 255, 0);
17044
17127
  --cds-slug-callout-aura-end-selected: rgba(255, 255, 255, 0);
17045
- --cds-slug-callout-aura-start: rgba(237, 245, 255, 0.6);
17128
+ --cds-slug-callout-aura-start: rgba(69, 137, 255, 0.1);
17046
17129
  --cds-slug-callout-aura-start-hover-01: rgba(255, 255, 255, 0.5);
17047
17130
  --cds-slug-callout-aura-start-hover-02: rgba(208, 226, 255, 0.5);
17048
17131
  --cds-slug-callout-aura-start-selected: rgba(237, 245, 255, 0.6);
17132
+ --cds-slug-callout-caret-bottom: #d0e2ff;
17133
+ --cds-slug-callout-caret-bottom-background: #ccdbf8;
17134
+ --cds-slug-callout-caret-bottom-background-actions: #d2dcee;
17135
+ --cds-slug-callout-caret-center: #a7c7ff;
17049
17136
  --cds-slug-callout-gradient-bottom: rgba(224, 224, 224, 0.85);
17050
17137
  --cds-slug-callout-gradient-bottom-hover: rgba(209, 209, 209, 0.55);
17051
17138
  --cds-slug-callout-gradient-bottom-selected: rgba(209, 209, 209, 0.85);
17052
17139
  --cds-slug-callout-gradient-top: rgba(244, 244, 244, 0.85);
17053
17140
  --cds-slug-callout-gradient-top-hover: rgba(224, 224, 224, 0.55);
17054
17141
  --cds-slug-callout-gradient-top-selected: rgba(224, 224, 224, 0.85);
17142
+ --cds-slug-callout-shadow-outer-01: rgba(0, 67, 206, 0.25);
17143
+ --cds-slug-callout-shadow-outer-02: rgba(0, 0, 0, 0.1);
17055
17144
  --cds-slug-hollow-hover: #474747;
17056
17145
  --cds-support-caution-major: #ff832b;
17057
17146
  --cds-support-caution-minor: #f1c21b;
@@ -17148,8 +17237,15 @@ em {
17148
17237
  .cds--g90 {
17149
17238
  background-color: var(--cds-background);
17150
17239
  color: var(--cds-text-primary);
17240
+ --cds-ai-aura-end: rgba(0, 0, 0, 0);
17241
+ --cds-ai-aura-start: rgba(69, 137, 255, 0.1);
17242
+ --cds-ai-border-end: rgba(166, 200, 255, 0.24);
17243
+ --cds-ai-border-start: #4589ff;
17244
+ --cds-ai-border-strong: #78a9ff;
17245
+ --cds-ai-drop-shadow: rgba(15, 98, 254, 0.32);
17151
17246
  --cds-ai-gradient-end: rgba(38, 38, 38, 0);
17152
17247
  --cds-ai-gradient-start-01: rgba(208, 226, 255, 0.2);
17248
+ --cds-ai-inner-shadow: rgba(69, 137, 255, 0.2);
17153
17249
  --cds-background: #262626;
17154
17250
  --cds-background-active: rgba(141, 141, 141, 0.4);
17155
17251
  --cds-background-brand: #0f62fe;
@@ -17165,11 +17261,11 @@ em {
17165
17261
  --cds-border-strong-02: #a8a8a8;
17166
17262
  --cds-border-strong-03: #c6c6c6;
17167
17263
  --cds-border-subtle-00: #525252;
17168
- --cds-border-subtle-01: #525252;
17169
- --cds-border-subtle-02: #6f6f6f;
17264
+ --cds-border-subtle-01: #6f6f6f;
17265
+ --cds-border-subtle-02: #8d8d8d;
17170
17266
  --cds-border-subtle-03: #8d8d8d;
17171
- --cds-border-subtle-selected-01: #6f6f6f;
17172
- --cds-border-subtle-selected-02: #8d8d8d;
17267
+ --cds-border-subtle-selected-01: #8d8d8d;
17268
+ --cds-border-subtle-selected-02: #a8a8a8;
17173
17269
  --cds-border-subtle-selected-03: #a8a8a8;
17174
17270
  --cds-border-tile-01: #6f6f6f;
17175
17271
  --cds-border-tile-02: #8d8d8d;
@@ -17231,18 +17327,24 @@ em {
17231
17327
  --cds-skeleton-element: #525252;
17232
17328
  --cds-slug-background: #c6c6c6;
17233
17329
  --cds-slug-background-hover: #e0e0e0;
17234
- --cds-slug-callout-aura-end: rgba(22, 22, 22, 0);
17330
+ --cds-slug-callout-aura-end: rgba(0, 0, 0, 0);
17235
17331
  --cds-slug-callout-aura-end-hover-01: rgba(22, 22, 22, 0);
17236
17332
  --cds-slug-callout-aura-end-selected: rgba(22, 22, 22, 0);
17237
- --cds-slug-callout-aura-start: rgba(208, 226, 255, 0.2);
17333
+ --cds-slug-callout-aura-start: rgba(69, 137, 255, 0.1);
17238
17334
  --cds-slug-callout-aura-start-hover-01: rgba(184, 211, 255, 0.3);
17239
17335
  --cds-slug-callout-aura-start-selected: rgba(208, 226, 255, 0.2);
17336
+ --cds-slug-callout-caret-bottom: #465060;
17337
+ --cds-slug-callout-caret-bottom-background: #2d3f5c;
17338
+ --cds-slug-callout-caret-bottom-background-actions: #253042;
17339
+ --cds-slug-callout-caret-center: #456fb5;
17240
17340
  --cds-slug-callout-gradient-bottom: rgba(38, 38, 38, 0.85);
17241
17341
  --cds-slug-callout-gradient-bottom-hover: rgba(71, 71, 71, 0.55);
17242
17342
  --cds-slug-callout-gradient-bottom-selected: rgba(71, 71, 71, 0.85);
17243
17343
  --cds-slug-callout-gradient-top: rgba(22, 22, 22, 0.85);
17244
17344
  --cds-slug-callout-gradient-top-hover: rgba(57, 57, 57, 0.55);
17245
17345
  --cds-slug-callout-gradient-top-selected: rgba(57, 57, 57, 0.85);
17346
+ --cds-slug-callout-shadow-outer-01: rgba(0, 45, 156, 0.25);
17347
+ --cds-slug-callout-shadow-outer-02: rgba(0, 0, 0, 0.65);
17246
17348
  --cds-slug-hollow-hover: #b5b5b5;
17247
17349
  --cds-support-caution-major: #ff832b;
17248
17350
  --cds-support-caution-minor: #f1c21b;
@@ -17338,8 +17440,15 @@ em {
17338
17440
  .cds--g100 {
17339
17441
  background-color: var(--cds-background);
17340
17442
  color: var(--cds-text-primary);
17443
+ --cds-ai-aura-end: rgba(0, 0, 0, 0);
17444
+ --cds-ai-aura-start: rgba(69, 137, 255, 0.1);
17445
+ --cds-ai-border-end: rgba(166, 200, 255, 0.24);
17446
+ --cds-ai-border-start: #4589ff;
17447
+ --cds-ai-border-strong: #78a9ff;
17448
+ --cds-ai-drop-shadow: rgba(15, 98, 254, 0.32);
17341
17449
  --cds-ai-gradient-end: rgba(38, 38, 38, 0);
17342
17450
  --cds-ai-gradient-start-01: rgba(208, 226, 255, 0.2);
17451
+ --cds-ai-inner-shadow: rgba(69, 137, 255, 0.2);
17343
17452
  --cds-background: #161616;
17344
17453
  --cds-background-active: rgba(141, 141, 141, 0.4);
17345
17454
  --cds-background-brand: #0f62fe;
@@ -17355,11 +17464,11 @@ em {
17355
17464
  --cds-border-strong-02: #8d8d8d;
17356
17465
  --cds-border-strong-03: #a8a8a8;
17357
17466
  --cds-border-subtle-00: #393939;
17358
- --cds-border-subtle-01: #393939;
17359
- --cds-border-subtle-02: #525252;
17467
+ --cds-border-subtle-01: #525252;
17468
+ --cds-border-subtle-02: #6f6f6f;
17360
17469
  --cds-border-subtle-03: #6f6f6f;
17361
- --cds-border-subtle-selected-01: #525252;
17362
- --cds-border-subtle-selected-02: #6f6f6f;
17470
+ --cds-border-subtle-selected-01: #6f6f6f;
17471
+ --cds-border-subtle-selected-02: #8d8d8d;
17363
17472
  --cds-border-subtle-selected-03: #8d8d8d;
17364
17473
  --cds-border-tile-01: #525252;
17365
17474
  --cds-border-tile-02: #6f6f6f;
@@ -17421,18 +17530,24 @@ em {
17421
17530
  --cds-skeleton-element: #393939;
17422
17531
  --cds-slug-background: #c6c6c6;
17423
17532
  --cds-slug-background-hover: #e0e0e0;
17424
- --cds-slug-callout-aura-end: rgba(22, 22, 22, 0);
17533
+ --cds-slug-callout-aura-end: rgba(0, 0, 0, 0);
17425
17534
  --cds-slug-callout-aura-end-hover-01: rgba(22, 22, 22, 0);
17426
17535
  --cds-slug-callout-aura-end-selected: rgba(22, 22, 22, 0);
17427
- --cds-slug-callout-aura-start: rgba(208, 226, 255, 0.2);
17536
+ --cds-slug-callout-aura-start: rgba(69, 137, 255, 0.1);
17428
17537
  --cds-slug-callout-aura-start-hover-01: rgba(184, 211, 255, 0.3);
17429
17538
  --cds-slug-callout-aura-start-selected: rgba(208, 226, 255, 0.2);
17539
+ --cds-slug-callout-caret-bottom: #3d4655;
17540
+ --cds-slug-callout-caret-bottom-background: #213250;
17541
+ --cds-slug-callout-caret-bottom-background-actions: #192436;
17542
+ --cds-slug-callout-caret-center: #3f68af;
17430
17543
  --cds-slug-callout-gradient-bottom: rgba(38, 38, 38, 0.85);
17431
17544
  --cds-slug-callout-gradient-bottom-hover: rgba(71, 71, 71, 0.55);
17432
17545
  --cds-slug-callout-gradient-bottom-selected: rgba(71, 71, 71, 0.85);
17433
17546
  --cds-slug-callout-gradient-top: rgba(22, 22, 22, 0.85);
17434
17547
  --cds-slug-callout-gradient-top-hover: rgba(57, 57, 57, 0.55);
17435
17548
  --cds-slug-callout-gradient-top-selected: rgba(57, 57, 57, 0.85);
17549
+ --cds-slug-callout-shadow-outer-01: rgba(0, 45, 156, 0.25);
17550
+ --cds-slug-callout-shadow-outer-02: rgba(0, 0, 0, 0.65);
17436
17551
  --cds-slug-hollow-hover: #b5b5b5;
17437
17552
  --cds-support-caution-major: #ff832b;
17438
17553
  --cds-support-caution-minor: #f1c21b;
@@ -17661,6 +17776,7 @@ li.cds--accordion__item--disabled:last-of-type {
17661
17776
  }
17662
17777
 
17663
17778
  .cds--accordion__wrapper {
17779
+ overflow: hidden;
17664
17780
  padding: 0;
17665
17781
  max-block-size: 0;
17666
17782
  opacity: 0;
@@ -17669,7 +17785,6 @@ li.cds--accordion__item--disabled:last-of-type {
17669
17785
  }
17670
17786
 
17671
17787
  .cds--accordion__content {
17672
- overflow: hidden;
17673
17788
  padding-inline: var(--cds-layout-density-padding-inline-local);
17674
17789
  }
17675
17790
  @media (min-width: 480px) {
@@ -17714,6 +17829,7 @@ li.cds--accordion__item--disabled:last-of-type {
17714
17829
  overflow: visible;
17715
17830
  }
17716
17831
  .cds--accordion__item--active .cds--accordion__wrapper {
17832
+ overflow: visible;
17717
17833
  max-block-size: fit-content;
17718
17834
  opacity: 1;
17719
17835
  padding-block: 0.5rem;
@@ -18085,15 +18201,15 @@ li.cds--accordion__item--disabled:last-of-type {
18085
18201
  }
18086
18202
 
18087
18203
  .cds--popover--left-top > .cds--popover > .cds--popover-content {
18088
- inset-block-start: -50%;
18204
+ inset-block-start: 50%;
18089
18205
  inset-inline-end: 100%;
18090
- transform: translate(calc(-1 * var(--cds-popover-offset, 0rem)), calc(-0.5 * var(--cds-popover-offset, 0rem) + 16px));
18206
+ transform: translate(calc(-1 * var(--cds-popover-offset, 0rem)), calc(-0.5 * var(--cds-popover-offset, 0rem) - 16px));
18091
18207
  }
18092
18208
 
18093
18209
  .cds--popover--left-bottom > .cds--popover > .cds--popover-content {
18094
- inset-block-end: -50%;
18210
+ inset-block-end: 50%;
18095
18211
  inset-inline-end: 100%;
18096
- transform: translate(calc(-1 * var(--cds-popover-offset, 0rem)), calc(0.5 * var(--cds-popover-offset, 0rem) - 16px));
18212
+ transform: translate(calc(-1 * var(--cds-popover-offset, 0rem)), calc(0.5 * var(--cds-popover-offset, 0rem) + 16px));
18097
18213
  }
18098
18214
 
18099
18215
  [dir=rtl] .cds--popover--left > .cds--popover > .cds--popover-content,
@@ -21355,8 +21471,9 @@ fieldset[disabled] .cds--form__helper-text {
21355
21471
  transform: translateY(-50%);
21356
21472
  }
21357
21473
 
21358
- .cds--text-input__field-wrapper--slug .cds--text-input {
21359
- background-image: linear-gradient(270deg, var(--cds-ai-gradient-start-01, rgba(242, 244, 248, 0.5)) 0%, var(--cds-ai-gradient-end, rgba(255, 255, 255, 0)) 33%, transparent 100%), linear-gradient(270deg, var(--cds-ai-gradient-start-02, rgba(237, 245, 255, 0.5)) 0%, var(--cds-ai-gradient-end, rgba(255, 255, 255, 0)) 33%, transparent 100%);
21474
+ .cds--text-input__field-wrapper--slug .cds--text-input:not(:has(~ .cds--slug--revert)) {
21475
+ background-image: linear-gradient(0deg, 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%);
21476
+ border-block-end-color: var(--cds-ai-border-strong, #4589ff);
21360
21477
  padding-inline-end: 2.5rem;
21361
21478
  }
21362
21479
 
@@ -22556,8 +22673,13 @@ fieldset[disabled] .cds--form__helper-text {
22556
22673
  transform: translateY(-50%);
22557
22674
  }
22558
22675
 
22559
- .cds--list-box__wrapper--slug .cds--list-box {
22560
- background-image: linear-gradient(270deg, var(--cds-ai-gradient-start-01, rgba(242, 244, 248, 0.5)) 0%, var(--cds-ai-gradient-end, rgba(255, 255, 255, 0)) 33%, transparent 100%), linear-gradient(270deg, var(--cds-ai-gradient-start-02, rgba(237, 245, 255, 0.5)) 0%, var(--cds-ai-gradient-end, rgba(255, 255, 255, 0)) 33%, transparent 100%);
22676
+ .cds--list-box__wrapper--slug .cds--list-box:not(:has(.cds--slug--revert)) {
22677
+ background-image: linear-gradient(0deg, 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%);
22678
+ border-block-end-color: var(--cds-ai-border-strong, #4589ff);
22679
+ }
22680
+
22681
+ .cds--list-box__wrapper--slug .cds--list-box input[role=combobox] {
22682
+ border-block-end-color: transparent;
22561
22683
  }
22562
22684
 
22563
22685
  .cds--list-box__wrapper--slug .cds--list-box__field,
@@ -23475,6 +23597,7 @@ fieldset[disabled] .cds--form__helper-text {
23475
23597
  font-weight: var(--cds-body-compact-01-font-weight, 400);
23476
23598
  line-height: var(--cds-body-compact-01-line-height, 1.28572);
23477
23599
  letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
23600
+ flex: 1;
23478
23601
  }
23479
23602
 
23480
23603
  .cds--radio-button__appearance {
@@ -24409,13 +24532,15 @@ tr.cds--data-table--selected:last-of-type td {
24409
24532
  }
24410
24533
 
24411
24534
  .cds--data-table tbody tr:has(> .cds--table-column-slug--active) {
24412
- background-image: linear-gradient(90deg, var(--cds-ai-gradient-start-01, rgba(242, 244, 248, 0.5)) 0%, var(--cds-ai-gradient-end, rgba(255, 255, 255, 0)) 50%, transparent 100%), linear-gradient(90deg, var(--cds-ai-gradient-start-02, rgba(237, 245, 255, 0.5)) 0%, var(--cds-ai-gradient-end, rgba(255, 255, 255, 0)) 50%, transparent 100%);
24535
+ 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%);
24536
+ border-block-end-color: var(--cds-ai-border-strong, #4589ff);
24413
24537
  background-attachment: fixed;
24414
24538
  }
24415
24539
 
24416
24540
  .cds--data-table thead th.cds--table-sort__header--slug .cds--table-sort,
24417
24541
  .cds--data-table thead th:has(> .cds--table-header-label--slug) {
24418
- background-image: linear-gradient(180deg, var(--cds-ai-gradient-start-01, rgba(242, 244, 248, 0.5)) 0%, var(--cds-ai-gradient-end, rgba(255, 255, 255, 0)) 100%, transparent 100%), linear-gradient(180deg, var(--cds-ai-gradient-start-02, rgba(237, 245, 255, 0.5)) 0%, var(--cds-ai-gradient-end, rgba(255, 255, 255, 0)) 100%, transparent 100%);
24542
+ 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%);
24543
+ border-block-end-color: var(--cds-ai-border-strong, #4589ff);
24419
24544
  }
24420
24545
 
24421
24546
  .cds--table-column-slug .cds--slug {
@@ -26859,8 +26984,9 @@ th .cds--table-sort__flex {
26859
26984
  transform: translateY(-50%);
26860
26985
  }
26861
26986
 
26862
- .cds--date-picker-input__wrapper--slug .cds--date-picker__input {
26863
- background-image: linear-gradient(270deg, var(--cds-ai-gradient-start-01, rgba(242, 244, 248, 0.5)) 0%, var(--cds-ai-gradient-end, rgba(255, 255, 255, 0)) 33%, transparent 100%), linear-gradient(270deg, var(--cds-ai-gradient-start-02, rgba(237, 245, 255, 0.5)) 0%, var(--cds-ai-gradient-end, rgba(255, 255, 255, 0)) 33%, transparent 100%);
26987
+ .cds--date-picker-input__wrapper--slug .cds--date-picker__input:not(:has(~ .cds--slug--revert)) {
26988
+ background-image: linear-gradient(0deg, 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%);
26989
+ border-block-end-color: var(--cds-ai-border-strong, #4589ff);
26864
26990
  padding-inline-end: 4rem;
26865
26991
  }
26866
26992
 
@@ -28579,8 +28705,13 @@ button.cds--dropdown-text:focus {
28579
28705
  inset-block-start: 2.6875rem;
28580
28706
  }
28581
28707
 
28582
- .cds--date-picker--fluid .cds--date-picker-input__wrapper--slug {
28583
- background-image: linear-gradient(270deg, var(--cds-ai-gradient-start-01, rgba(242, 244, 248, 0.5)) 0%, var(--cds-ai-gradient-end, rgba(255, 255, 255, 0)) 33%, transparent 100%), linear-gradient(270deg, var(--cds-ai-gradient-start-02, rgba(237, 245, 255, 0.5)) 0%, var(--cds-ai-gradient-end, rgba(255, 255, 255, 0)) 33%, transparent 100%);
28708
+ .cds--date-picker--fluid .cds--date-picker-input__wrapper--slug:not(:has(~ .cds--slug--revert)) {
28709
+ background-image: linear-gradient(0deg, 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%);
28710
+ border-block-end-color: var(--cds-ai-border-strong, #4589ff);
28711
+ }
28712
+
28713
+ .cds--date-picker--fluid .cds--date-picker-input__wrapper--slug .cds--date-picker__input:not(.cds--date-picker__input--invalid) {
28714
+ border-block-end-color: var(--cds-ai-border-strong, #4589ff);
28584
28715
  }
28585
28716
 
28586
28717
  .cds--date-picker--fluid .cds--date-picker-input__wrapper--slug .cds--date-picker__input,
@@ -29080,6 +29211,11 @@ button.cds--dropdown-text:focus {
29080
29211
  }
29081
29212
 
29082
29213
  .cds--number--nosteppers input[type=number] {
29214
+ padding-inline-end: 0;
29215
+ }
29216
+
29217
+ .cds--number--nosteppers input[type=number][data-invalid],
29218
+ .cds--number--nosteppers .cds--number__input-wrapper--warning input[type=number] {
29083
29219
  padding-inline-end: 3rem;
29084
29220
  }
29085
29221
 
@@ -29126,12 +29262,17 @@ button.cds--dropdown-text:focus {
29126
29262
  padding-inline-end: 9rem;
29127
29263
  }
29128
29264
 
29129
- .cds--number__input-wrapper--slug input[type=number],
29265
+ .cds--number__input-wrapper--slug input[type=number]:not(:has(~ .cds--slug--revert)),
29130
29266
  .cds--number__input-wrapper--slug input[type=number]:disabled {
29131
- background-image: linear-gradient(270deg, var(--cds-ai-gradient-start-01, rgba(242, 244, 248, 0.5)) 0%, var(--cds-ai-gradient-end, rgba(255, 255, 255, 0)) 33%, transparent 100%), linear-gradient(270deg, var(--cds-ai-gradient-start-02, rgba(237, 245, 255, 0.5)) 0%, var(--cds-ai-gradient-end, rgba(255, 255, 255, 0)) 33%, transparent 100%);
29267
+ background-image: linear-gradient(0deg, 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%);
29268
+ border-block-end-color: var(--cds-ai-border-strong, #4589ff);
29132
29269
  padding-inline-end: 7rem;
29133
29270
  }
29134
29271
 
29272
+ .cds--number__input-wrapper--slug .cds--number__control-btn {
29273
+ border-block-end-color: var(--cds-ai-border-strong, #4589ff);
29274
+ }
29275
+
29135
29276
  .cds--number.cds--skeleton {
29136
29277
  position: relative;
29137
29278
  padding: 0;
@@ -29383,8 +29524,9 @@ button.cds--dropdown-text:focus {
29383
29524
  padding-inline-end: 7.5rem;
29384
29525
  }
29385
29526
 
29386
- .cds--number-input--fluid .cds--number__input-wrapper--slug {
29387
- background-image: linear-gradient(270deg, var(--cds-ai-gradient-start-01, rgba(242, 244, 248, 0.5)) 0%, var(--cds-ai-gradient-end, rgba(255, 255, 255, 0)) 33%, transparent 100%), linear-gradient(270deg, var(--cds-ai-gradient-start-02, rgba(237, 245, 255, 0.5)) 0%, var(--cds-ai-gradient-end, rgba(255, 255, 255, 0)) 33%, transparent 100%);
29527
+ .cds--number-input--fluid .cds--number__input-wrapper--slug:not(:has(~ .cds--slug--revert)) {
29528
+ background-image: linear-gradient(0deg, 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%);
29529
+ border-block-end-color: var(--cds-ai-border-strong, #4589ff);
29388
29530
  }
29389
29531
 
29390
29532
  .cds--search--fluid {
@@ -29759,8 +29901,9 @@ optgroup.cds--select-optgroup:disabled,
29759
29901
  transform: translateY(-50%);
29760
29902
  }
29761
29903
 
29762
- .cds--select--slug .cds--select-input {
29763
- background-image: linear-gradient(270deg, var(--cds-ai-gradient-start-01, rgba(242, 244, 248, 0.5)) 0%, var(--cds-ai-gradient-end, rgba(255, 255, 255, 0)) 33%, transparent 100%), linear-gradient(270deg, var(--cds-ai-gradient-start-02, rgba(237, 245, 255, 0.5)) 0%, var(--cds-ai-gradient-end, rgba(255, 255, 255, 0)) 33%, transparent 100%);
29904
+ .cds--select--slug .cds--select-input:not(:has(~ .cds--slug--revert)) {
29905
+ background-image: linear-gradient(0deg, 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%);
29906
+ border-block-end-color: var(--cds-ai-border-strong, #4589ff);
29764
29907
  padding-inline-end: 4rem;
29765
29908
  }
29766
29909
 
@@ -30057,8 +30200,9 @@ optgroup.cds--select-optgroup:disabled,
30057
30200
  transform: translate(0);
30058
30201
  }
30059
30202
 
30060
- .cds--text-area__wrapper--slug .cds--text-area {
30061
- background-image: linear-gradient(270deg, var(--cds-ai-gradient-start-01, rgba(242, 244, 248, 0.5)) 0%, var(--cds-ai-gradient-end, rgba(255, 255, 255, 0)) 33%, transparent 100%), linear-gradient(270deg, var(--cds-ai-gradient-start-02, rgba(237, 245, 255, 0.5)) 0%, var(--cds-ai-gradient-end, rgba(255, 255, 255, 0)) 33%, transparent 100%);
30203
+ .cds--text-area__wrapper--slug .cds--text-area:not(:has(~ .cds--slug--revert)) {
30204
+ background-image: linear-gradient(0deg, 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%);
30205
+ border-block-end-color: var(--cds-ai-border-strong, #4589ff);
30062
30206
  padding-inline-end: 2.5rem;
30063
30207
  }
30064
30208
 
@@ -30279,8 +30423,9 @@ optgroup.cds--select-optgroup:disabled,
30279
30423
  inline-size: 80%;
30280
30424
  }
30281
30425
 
30282
- .cds--text-area--fluid .cds--text-area__wrapper--slug {
30283
- background-image: linear-gradient(270deg, var(--cds-ai-gradient-start-01, rgba(242, 244, 248, 0.5)) 0%, var(--cds-ai-gradient-end, rgba(255, 255, 255, 0)) 33%, transparent 100%), linear-gradient(270deg, var(--cds-ai-gradient-start-02, rgba(237, 245, 255, 0.5)) 0%, var(--cds-ai-gradient-end, rgba(255, 255, 255, 0)) 33%, transparent 100%);
30426
+ .cds--text-area--fluid .cds--text-area__wrapper--slug:not(:has(~ .cds--slug--revert)) {
30427
+ background-image: linear-gradient(0deg, 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%);
30428
+ border-block-end-color: var(--cds-ai-border-strong, #4589ff);
30284
30429
  }
30285
30430
 
30286
30431
  .cds--text-area--fluid .cds--text-area__wrapper--slug .cds--text-area--invalid ~ .cds--slug,
@@ -31199,18 +31344,19 @@ optgroup.cds--select-optgroup:disabled,
31199
31344
  align-items: flex-start;
31200
31345
  }
31201
31346
 
31202
- .cds--modal-close {
31347
+ .cds--modal-close-button {
31203
31348
  position: absolute;
31204
- z-index: 2;
31205
- overflow: hidden;
31349
+ inset-block-start: 0;
31350
+ inset-inline-end: 0;
31351
+ }
31352
+
31353
+ .cds--modal-close {
31206
31354
  padding: 0.75rem;
31207
31355
  border: 2px solid transparent;
31208
31356
  background-color: transparent;
31209
31357
  block-size: 3rem;
31210
31358
  cursor: pointer;
31211
31359
  inline-size: 3rem;
31212
- inset-block-start: 0;
31213
- inset-inline-end: 0;
31214
31360
  transition: background-color 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
31215
31361
  }
31216
31362
  .cds--modal-close:hover {
@@ -31246,12 +31392,12 @@ optgroup.cds--select-optgroup:disabled,
31246
31392
  }
31247
31393
 
31248
31394
  .cds--modal--slug .cds--modal-container {
31249
- background: linear-gradient(0deg, var(--cds-slug-callout-aura-start, rgba(237, 245, 255, 0.6)) 0%, var(--cds-slug-callout-aura-end, rgba(255, 255, 255, 0)) 50%, transparent 50%), linear-gradient(180deg, var(--cds-slug-callout-gradient-top, rgba(244, 244, 244, 0.85)) 0%, var(--cds-slug-callout-gradient-bottom, rgba(224, 224, 224, 0.85)) 100%) rgba(0, 0, 0, 0.01);
31395
+ 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;
31250
31396
  background-color: var(--cds-layer);
31251
31397
  }
31252
31398
 
31253
31399
  .cds--modal--slug .cds--modal-container:has(.cds--btn-set:not(.cds--modal-footer--three-button) > button:not(:only-child)) {
31254
- background: linear-gradient(0deg, var(--cds-slug-callout-aura-start, rgba(237, 245, 255, 0.6)) calc(0% + 64px), var(--cds-slug-callout-aura-end, rgba(255, 255, 255, 0)) 50%, transparent 50%), linear-gradient(180deg, var(--cds-slug-callout-gradient-top, rgba(244, 244, 244, 0.85)) calc(0% + 64px), var(--cds-slug-callout-gradient-bottom, rgba(224, 224, 224, 0.85)) 100%) rgba(0, 0, 0, 0.01);
31400
+ 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;
31255
31401
  background-color: var(--cds-layer);
31256
31402
  }
31257
31403
 
@@ -31261,8 +31407,8 @@ optgroup.cds--select-optgroup:disabled,
31261
31407
  inset-inline-end: 0;
31262
31408
  }
31263
31409
 
31264
- .cds--modal-header > .cds--slug:has(+ .cds--modal-close),
31265
- .cds--modal-header > .cds--modal-close ~ .cds--slug,
31410
+ .cds--modal-header > .cds--slug:has(+ .cds--modal-close-button),
31411
+ .cds--modal-header > .cds--modal-close-button ~ .cds--slug,
31266
31412
  .cds--modal--slug .cds--modal-container-body > .cds--slug {
31267
31413
  inset-inline-end: 3rem;
31268
31414
  }
@@ -33542,7 +33688,7 @@ span.cds--pagination__text.cds--pagination__items-count {
33542
33688
 
33543
33689
  .cds--progress--vertical .cds--progress-optional {
33544
33690
  position: static;
33545
- margin: auto 0;
33691
+ margin: 0 0 auto;
33546
33692
  inline-size: 100%;
33547
33693
  }
33548
33694
 
@@ -34435,32 +34581,181 @@ span.cds--pagination__text.cds--pagination__items-count {
34435
34581
  }
34436
34582
 
34437
34583
  .cds--slug.cds--slug--enabled .cds--slug-content {
34438
- background: linear-gradient(0deg, var(--cds-slug-callout-aura-start, rgba(237, 245, 255, 0.6)) 0%, var(--cds-slug-callout-aura-end, rgba(255, 255, 255, 0)) 50%, transparent 50%), linear-gradient(180deg, var(--cds-slug-callout-gradient-top, rgba(244, 244, 244, 0.85)) 0%, var(--cds-slug-callout-gradient-bottom, rgba(224, 224, 224, 0.85)) 100%) rgba(0, 0, 0, 0.01);
34439
- border: 1px solid var(--cds-border-subtle);
34440
- border-radius: 16px;
34441
- backdrop-filter: blur(25px);
34442
- box-shadow: -45px 45px 100px rgba(0, 0, 0, 0.2);
34584
+ 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;
34585
+ border: 1px solid transparent;
34586
+ border-radius: 0.5rem;
34587
+ 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));
34443
34588
  color: var(--cds-text-primary, #161616);
34444
34589
  min-inline-size: 17.5rem;
34445
34590
  }
34446
34591
 
34447
34592
  .cds--slug.cds--slug--enabled > .cds--toggletip > .cds--popover > .cds--popover-caret {
34448
- background: var(--cds-border-subtle);
34593
+ background: transparent;
34594
+ clip-path: none;
34595
+ }
34596
+
34597
+ .cds--slug.cds--slug--enabled > .cds--toggletip:is(.cds--popover--top,
34598
+ .cds--popover--top-right,
34599
+ .cds--popover--top-left,
34600
+ .cds--popover--bottom,
34601
+ .cds--popover--bottom-right,
34602
+ .cds--popover--bottom-left,
34603
+ .cds--popover--left,
34604
+ .cds--popover--left-top,
34605
+ .cds--popover--left-bottom,
34606
+ .cds--popover--right,
34607
+ .cds--popover--right-top,
34608
+ .cds--popover--right-bottom) > .cds--popover > .cds--popover-caret::before {
34609
+ position: absolute;
34610
+ display: block;
34611
+ border: 1px solid var(--cds-ai-border-start, #78a9ff);
34612
+ background: var(--cds-background, #ffffff);
34613
+ block-size: 0.75rem;
34614
+ clip-path: polygon(98% 0, 0 0, -52% 150%) border-box;
34615
+ content: "";
34616
+ inline-size: 0.75rem;
34617
+ transform: rotate(45deg);
34618
+ }
34619
+
34620
+ .cds--slug.cds--slug--enabled > .cds--toggletip:is(.cds--popover--top,
34621
+ .cds--popover--top-right,
34622
+ .cds--popover--top-left,
34623
+ .cds--popover--bottom,
34624
+ .cds--popover--bottom-right,
34625
+ .cds--popover--bottom-left,
34626
+ .cds--popover--left,
34627
+ .cds--popover--left-top,
34628
+ .cds--popover--left-bottom,
34629
+ .cds--popover--right,
34630
+ .cds--popover--right-top,
34631
+ .cds--popover--right-bottom) > .cds--popover > .cds--popover-caret::after {
34632
+ position: absolute;
34633
+ display: block;
34634
+ background: var(--cds-background, #ffffff);
34635
+ block-size: 0.875rem;
34636
+ content: "";
34637
+ inline-size: 0.125rem;
34638
+ }
34639
+
34640
+ .cds--slug.cds--slug--enabled > .cds--toggletip:is(.cds--popover--top,
34641
+ .cds--popover--top-right,
34642
+ .cds--popover--top-left) > .cds--popover > .cds--popover-caret::before {
34643
+ inset-block-end: 0.0625rem;
34644
+ transform: rotate(-135deg);
34645
+ }
34646
+ .cds--slug.cds--slug--enabled > .cds--toggletip:is(.cds--popover--top,
34647
+ .cds--popover--top-right,
34648
+ .cds--popover--top-left) > .cds--popover > .cds--popover-caret::after {
34649
+ background: var(--cds-slug-callout-caret-bottom-background, #d5e5ff);
34650
+ block-size: 0.125rem;
34651
+ border-end-end-radius: 50%;
34652
+ border-end-start-radius: 50%;
34653
+ inline-size: 0.875rem;
34654
+ inset-block-start: -0.125rem;
34655
+ inset-inline-start: -0.0625rem;
34656
+ }
34657
+
34658
+ .cds--slug.cds--slug--enabled > .cds--toggletip:is(.cds--popover--top,
34659
+ .cds--popover--top-right,
34660
+ .cds--popover--top-left) > .cds--popover > .cds--slug-content--with-actions + .cds--popover-caret::after {
34661
+ display: none;
34662
+ }
34663
+
34664
+ .cds--slug.cds--slug--enabled > .cds--toggletip:is(.cds--popover--right,
34665
+ .cds--popover--right-bottom,
34666
+ .cds--popover--right-top) > .cds--popover > .cds--popover-caret::before {
34667
+ inset-inline-start: 0.0625rem;
34668
+ transform: rotate(-45deg);
34669
+ }
34670
+ .cds--slug.cds--slug--enabled > .cds--toggletip:is(.cds--popover--right,
34671
+ .cds--popover--right-bottom,
34672
+ .cds--popover--right-top) > .cds--popover > .cds--popover-caret::after {
34673
+ border-end-start-radius: 50%;
34674
+ border-start-start-radius: 50%;
34675
+ inset-block-start: -0.0625rem;
34676
+ inset-inline-start: 0.375rem;
34677
+ }
34678
+
34679
+ .cds--slug.cds--slug--enabled > .cds--toggletip:is(.cds--popover--bottom,
34680
+ .cds--popover--bottom-left,
34681
+ .cds--popover--bottom-right) > .cds--popover > .cds--popover-caret::before {
34682
+ inset-block-start: 0.0625rem;
34683
+ transform: rotate(45deg);
34684
+ }
34685
+ .cds--slug.cds--slug--enabled > .cds--toggletip:is(.cds--popover--bottom,
34686
+ .cds--popover--bottom-left,
34687
+ .cds--popover--bottom-right) > .cds--popover > .cds--popover-caret::after {
34688
+ block-size: 0.125rem;
34689
+ border-start-end-radius: 50%;
34690
+ border-start-start-radius: 50%;
34691
+ inline-size: 0.875rem;
34692
+ inset-block-end: -0.15625rem;
34693
+ inset-inline-start: -0.0625rem;
34694
+ }
34695
+
34696
+ .cds--slug.cds--slug--enabled > .cds--toggletip:is(.cds--popover--left,
34697
+ .cds--popover--left-bottom,
34698
+ .cds--popover--left-top) > .cds--popover > .cds--popover-caret::before {
34699
+ inset-inline-end: 0.0625rem;
34700
+ transform: rotate(135deg);
34701
+ }
34702
+ .cds--slug.cds--slug--enabled > .cds--toggletip:is(.cds--popover--left,
34703
+ .cds--popover--left-bottom,
34704
+ .cds--popover--left-top) > .cds--popover > .cds--popover-caret::after {
34705
+ border-end-end-radius: 50%;
34706
+ border-start-end-radius: 50%;
34707
+ inset-block-start: -0.0625rem;
34708
+ inset-inline-start: -0.125rem;
34709
+ }
34710
+
34711
+ .cds--slug.cds--slug--enabled > .cds--toggletip:is(.cds--popover--left-bottom,
34712
+ .cds--popover--right-bottom) > .cds--popover > .cds--popover-caret::after {
34713
+ background: transparent;
34714
+ }
34715
+
34716
+ .cds--slug.cds--slug--enabled > .cds--toggletip:is(.cds--popover--left-bottom,
34717
+ .cds--popover--right-bottom,
34718
+ .cds--popover--top,
34719
+ .cds--popover--top-right,
34720
+ .cds--popover--top-left) > .cds--popover > .cds--popover-caret::before {
34721
+ border-color: var(--cds-slug-callout-caret-bottom, #d0e2ff);
34722
+ background: var(--cds-slug-callout-caret-bottom-background, #d5e5ff);
34723
+ }
34724
+
34725
+ .cds--slug.cds--slug--enabled > .cds--toggletip:is(.cds--popover--left-bottom,
34726
+ .cds--popover--right-bottom,
34727
+ .cds--popover--top,
34728
+ .cds--popover--top-right,
34729
+ .cds--popover--top-left) > .cds--popover:has(.cds--slug-content--with-actions) > .cds--popover-caret::before {
34730
+ background: var(--cds-slug-callout-caret-bottom-background-actions, #dae5f8);
34731
+ }
34732
+
34733
+ .cds--slug.cds--slug--enabled > .cds--toggletip:is(.cds--popover--left,
34734
+ .cds--popover--right) > .cds--popover > .cds--popover-caret::before {
34735
+ border-color: var(--cds-slug-callout-caret-center, #a7c7ff);
34449
34736
  }
34450
34737
 
34451
34738
  .cds--slug.cds--slug--enabled .cds--toggletip-content {
34452
- max-inline-size: 20.875rem;
34453
34739
  padding-block-end: 5rem;
34454
- padding-block-start: 2rem;
34455
- padding-inline: 2rem;
34740
+ padding-block-start: 1.5rem;
34741
+ padding-inline: 1.5rem;
34742
+ }
34743
+
34744
+ .cds--slug.cds--slug--enabled .cds--slug-content--with-actions .cds--toggletip-content {
34745
+ max-inline-size: 20.875rem;
34746
+ }
34747
+
34748
+ .cds--slug.cds--slug--enabled .cds--slug-content:not(.cds--slug-content--with-actions) .cds--toggletip-content {
34749
+ max-inline-size: 20rem;
34456
34750
  }
34457
34751
 
34458
34752
  .cds--slug.cds--slug--enabled .cds--slug-actions {
34459
34753
  position: absolute;
34460
34754
  justify-content: flex-end;
34461
- background: var(--cds-layer-accent);
34462
- border-end-end-radius: 0.9375rem;
34463
- border-end-start-radius: 0.9375rem;
34755
+ backdrop-filter: blur(85px);
34756
+ background: rgba(0, 0, 0, 0.01);
34757
+ border-end-end-radius: 0.5rem;
34758
+ border-end-start-radius: 0.5rem;
34464
34759
  column-gap: 0;
34465
34760
  inline-size: 100%;
34466
34761
  inset-block-end: 0;
@@ -34474,7 +34769,7 @@ span.cds--pagination__text.cds--pagination__items-count {
34474
34769
 
34475
34770
  .cds--slug.cds--slug--enabled .cds--slug-actions .cds--btn--primary {
34476
34771
  order: 1;
34477
- border-end-end-radius: 1rem;
34772
+ border-end-end-radius: 0.4375rem;
34478
34773
  }
34479
34774
 
34480
34775
  .cds--slug.cds--slug--revert {
@@ -35685,12 +35980,12 @@ span.cds--pagination__text.cds--pagination__items-count {
35685
35980
  }
35686
35981
 
35687
35982
  .cds--tile--slug.cds--tile {
35688
- background: linear-gradient(0deg, var(--cds-slug-callout-aura-start, rgba(237, 245, 255, 0.6)) 0%, var(--cds-slug-callout-aura-end, rgba(255, 255, 255, 0)) 50%, transparent 50%), linear-gradient(180deg, var(--cds-slug-callout-gradient-top, rgba(244, 244, 244, 0.85)) 0%, var(--cds-slug-callout-gradient-bottom, rgba(224, 224, 224, 0.85)) 100%) rgba(0, 0, 0, 0.01);
35983
+ 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;
35689
35984
  border: 1px solid var(--cds-border-tile);
35690
35985
  }
35691
35986
 
35692
35987
  .cds--tile--slug.cds--tile--expandable:hover {
35693
- background: linear-gradient(0deg, var(--cds-slug-callout-aura-start, rgba(237, 245, 255, 0.6)) 0%, var(--cds-slug-callout-aura-end, rgba(255, 255, 255, 0)) 50%, transparent 50%), linear-gradient(180deg, var(--cds-slug-callout-gradient-top, rgba(244, 244, 244, 0.85)) 0%, var(--cds-slug-callout-gradient-bottom, rgba(224, 224, 224, 0.85)) 100%) rgba(0, 0, 0, 0.01);
35988
+ 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;
35694
35989
  }
35695
35990
 
35696
35991
  .cds--tile--slug.cds--tile--selectable::before,