@carbon/ibm-products 2.0.0-rc.20 → 2.0.0-rc.22

Sign up to get free protection for your applications and to get access to all the features.
Files changed (59) hide show
  1. package/README.md +17 -0
  2. package/css/index-full-carbon.css +4933 -3007
  3. package/css/index-full-carbon.css.map +1 -1
  4. package/css/index-full-carbon.min.css +6 -4
  5. package/css/index-full-carbon.min.css.map +1 -1
  6. package/css/index-without-carbon-released-only.css +59 -32
  7. package/css/index-without-carbon-released-only.css.map +1 -1
  8. package/css/index-without-carbon-released-only.min.css +3 -3
  9. package/css/index-without-carbon-released-only.min.css.map +1 -1
  10. package/css/index-without-carbon.css +121 -63
  11. package/css/index-without-carbon.css.map +1 -1
  12. package/css/index-without-carbon.min.css +6 -4
  13. package/css/index-without-carbon.min.css.map +1 -1
  14. package/css/index.css +280 -101
  15. package/css/index.css.map +1 -1
  16. package/css/index.min.css +6 -4
  17. package/css/index.min.css.map +1 -1
  18. package/es/components/Card/CardFooter.js +2 -2
  19. package/es/components/Datagrid/Datagrid/DatagridContent.js +2 -2
  20. package/es/components/Datagrid/Datagrid/DatagridRow.js +42 -11
  21. package/es/components/Datagrid/Datagrid/DatagridSelectAll.js +20 -4
  22. package/es/components/Datagrid/Datagrid/DatagridSelectAllWithToggle.js +18 -2
  23. package/es/components/Datagrid/Datagrid/addons/Filtering/FilterFlyout.js +19 -247
  24. package/es/components/Datagrid/Datagrid/addons/Filtering/FilterPanel.js +41 -285
  25. package/es/components/Datagrid/Datagrid/addons/Filtering/FilterProvider.js +4 -4
  26. package/es/components/Datagrid/Datagrid/addons/Filtering/hooks/index.js +1 -0
  27. package/es/components/Datagrid/Datagrid/addons/Filtering/hooks/useFilters.js +310 -0
  28. package/es/components/Datagrid/Datagrid/addons/Filtering/utils.js +6 -6
  29. package/es/components/Datagrid/useActionsColumn.js +29 -1
  30. package/es/components/Datagrid/useDefaultStringRenderer.js +1 -1
  31. package/es/components/Datagrid/useNestedRows.js +2 -4
  32. package/es/components/Datagrid/useSelectAllToggle.js +18 -2
  33. package/es/components/Datagrid/useSelectRows.js +19 -2
  34. package/es/components/Datagrid/useStickyColumn.js +22 -5
  35. package/es/components/Datagrid/utils/DatagridActions.js +2 -2
  36. package/lib/components/Card/CardFooter.js +2 -2
  37. package/lib/components/Datagrid/Datagrid/DatagridContent.js +2 -2
  38. package/lib/components/Datagrid/Datagrid/DatagridRow.js +42 -11
  39. package/lib/components/Datagrid/Datagrid/DatagridSelectAll.js +27 -3
  40. package/lib/components/Datagrid/Datagrid/DatagridSelectAllWithToggle.js +17 -1
  41. package/lib/components/Datagrid/Datagrid/addons/Filtering/FilterFlyout.js +22 -243
  42. package/lib/components/Datagrid/Datagrid/addons/Filtering/FilterPanel.js +47 -284
  43. package/lib/components/Datagrid/Datagrid/addons/Filtering/FilterProvider.js +4 -4
  44. package/lib/components/Datagrid/Datagrid/addons/Filtering/hooks/index.js +8 -0
  45. package/lib/components/Datagrid/Datagrid/addons/Filtering/hooks/useFilters.js +325 -0
  46. package/lib/components/Datagrid/Datagrid/addons/Filtering/utils.js +5 -5
  47. package/lib/components/Datagrid/useActionsColumn.js +30 -1
  48. package/lib/components/Datagrid/useDefaultStringRenderer.js +1 -1
  49. package/lib/components/Datagrid/useNestedRows.js +2 -4
  50. package/lib/components/Datagrid/useSelectAllToggle.js +25 -2
  51. package/lib/components/Datagrid/useSelectRows.js +26 -2
  52. package/lib/components/Datagrid/useStickyColumn.js +22 -4
  53. package/lib/components/Datagrid/utils/DatagridActions.js +2 -2
  54. package/package.json +8 -8
  55. package/scss/components/Datagrid/styles/_datagrid.scss +27 -7
  56. package/scss/components/Datagrid/styles/_useNestedRows.scss +19 -0
  57. package/scss/components/Datagrid/styles/_useSelectAllToggle.scss +12 -8
  58. package/scss/components/Datagrid/styles/_useStickyColumn.scss +3 -3
  59. package/scss/components/OptionsTile/_options-tile.scss +10 -3
package/css/index.css CHANGED
@@ -211,6 +211,7 @@
211
211
  }
212
212
 
213
213
  .cds--snippet--disabled .cds--snippet-btn--expand:hover,
214
+ .cds--snippet--disabled .cds--copy-btn,
214
215
  .cds--snippet--disabled .cds--copy-btn:hover {
215
216
  background-color: var(--cds-layer);
216
217
  color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
@@ -455,13 +456,13 @@
455
456
  overflow-x: auto;
456
457
  }
457
458
 
458
- .cds--snippet--multi .cds--snippet-container pre::after {
459
+ .cds--snippet--multi.cds--snippet--has-right-overflow .cds--snippet-container pre::after {
459
460
  position: absolute;
460
461
  top: 0;
461
462
  right: 0;
462
463
  width: 1rem;
463
464
  height: 100%;
464
- background-image: linear-gradient(to right, rgba(var(--cds-layer), 0), var(--cds-layer));
465
+ background-image: linear-gradient(to right, transparent, var(--cds-layer));
465
466
  content: "";
466
467
  }
467
468
 
@@ -1041,7 +1042,7 @@
1041
1042
  color: var(--cds-text-on-color, #ffffff);
1042
1043
  }
1043
1044
  .cds--btn--danger:hover {
1044
- background-color: var(--cds-button-danger-hover, #b81922);
1045
+ background-color: var(--cds-button-danger-hover, #b81921);
1045
1046
  }
1046
1047
  .cds--btn--danger:focus {
1047
1048
  border-color: var(--cds-button-focus-color, var(--cds-focus, #0f62fe));
@@ -1065,7 +1066,7 @@
1065
1066
  color: var(--cds-button-danger-secondary, #da1e28);
1066
1067
  }
1067
1068
  .cds--btn--danger--tertiary:hover {
1068
- background-color: var(--cds-button-danger-hover, #b81922);
1069
+ background-color: var(--cds-button-danger-hover, #b81921);
1069
1070
  }
1070
1071
  .cds--btn--danger--tertiary:focus {
1071
1072
  border-color: var(--cds-button-focus-color, var(--cds-focus, #0f62fe));
@@ -1079,7 +1080,7 @@
1079
1080
  fill: currentColor;
1080
1081
  }
1081
1082
  .cds--btn--danger--tertiary:hover {
1082
- border-color: var(--cds-button-danger-hover, #b81922);
1083
+ border-color: var(--cds-button-danger-hover, #b81921);
1083
1084
  color: var(--cds-text-on-color, #ffffff);
1084
1085
  }
1085
1086
  .cds--btn--danger--tertiary:focus {
@@ -1105,7 +1106,7 @@
1105
1106
  padding: calc(0.875rem - 3px) 16px;
1106
1107
  }
1107
1108
  .cds--btn--danger--ghost:hover {
1108
- background-color: var(--cds-button-danger-hover, #b81922);
1109
+ background-color: var(--cds-button-danger-hover, #b81921);
1109
1110
  }
1110
1111
  .cds--btn--danger--ghost:focus {
1111
1112
  border-color: var(--cds-button-focus-color, var(--cds-focus, #0f62fe));
@@ -1310,9 +1311,14 @@
1310
1311
  .cds--modal .cds--dropdown-list,
1311
1312
  .cds--modal .cds--number input[type=number],
1312
1313
  .cds--modal .cds--date-picker__input,
1313
- .cds--modal .cds--multi-select {
1314
+ .cds--modal .cds--multi-select,
1315
+ .cds--modal .cds--number__control-btn::before,
1316
+ .cds--modal .cds--number__control-btn::after {
1314
1317
  background-color: var(--cds-field-02, #ffffff);
1315
1318
  }
1319
+ .cds--modal .cds--number__rule-divider {
1320
+ background-color: var(--cds-border-subtle-02, #e0e0e0);
1321
+ }
1316
1322
 
1317
1323
  .cds--modal.is-visible .cds--modal-container {
1318
1324
  transform: translate3d(0, 0, 0);
@@ -1385,7 +1391,7 @@
1385
1391
  }
1386
1392
  }
1387
1393
 
1388
- .cds--modal-content p,
1394
+ .cds--modal-content > p,
1389
1395
  .cds--modal-content__regular-content {
1390
1396
  font-size: var(--cds-body-01-font-size, 0.875rem);
1391
1397
  font-weight: var(--cds-body-01-font-weight, 400);
@@ -1427,7 +1433,7 @@
1427
1433
  .cds--modal-container--xs .cds--modal-content__regular-content {
1428
1434
  padding-right: 1rem;
1429
1435
  }
1430
- .cds--modal-container--xs .cds--modal-content p {
1436
+ .cds--modal-container--xs .cds--modal-content > p {
1431
1437
  padding-right: 0;
1432
1438
  }
1433
1439
  @media (min-width: 42rem) {
@@ -1450,7 +1456,7 @@
1450
1456
  .cds--modal-container--sm .cds--modal-content__regular-content {
1451
1457
  padding-right: 1rem;
1452
1458
  }
1453
- .cds--modal-container--sm .cds--modal-content p {
1459
+ .cds--modal-container--sm .cds--modal-content > p {
1454
1460
  padding-right: 0;
1455
1461
  }
1456
1462
  @media (min-width: 42rem) {
@@ -1463,7 +1469,7 @@
1463
1469
  width: 42%;
1464
1470
  max-height: 72%;
1465
1471
  }
1466
- .cds--modal-container--sm .cds--modal-content p,
1472
+ .cds--modal-container--sm .cds--modal-content > p,
1467
1473
  .cds--modal-container--sm .cds--modal-content__regular-content {
1468
1474
  padding-right: 20%;
1469
1475
  }
@@ -1587,11 +1593,16 @@
1587
1593
  overflow: hidden;
1588
1594
  }
1589
1595
 
1590
- .cds--body--with-modal-open .cds--tooltip,
1591
- .cds--body--with-modal-open .cds--overflow-menu-options {
1596
+ .cds--body--with-modal-open .cds--modal .cds--tooltip,
1597
+ .cds--body--with-modal-open .cds--modal .cds--overflow-menu-options {
1592
1598
  z-index: 9000;
1593
1599
  }
1594
1600
 
1601
+ .cds--modal-container--full-width .cds--modal-content {
1602
+ padding: 0;
1603
+ margin: 0;
1604
+ }
1605
+
1595
1606
  /* stylelint-disable */
1596
1607
  @media screen and (-ms-high-contrast: active), (forced-colors: active) {
1597
1608
  .cds--modal-close__icon {
@@ -1607,6 +1618,16 @@
1607
1618
  }
1608
1619
 
1609
1620
  /* stylelint-enable */
1621
+ input:-webkit-autofill,
1622
+ input:-webkit-autofill:hover,
1623
+ input:-webkit-autofill:focus,
1624
+ textarea:-webkit-autofill,
1625
+ textarea:-webkit-autofill:hover,
1626
+ textarea:-webkit-autofill:focus {
1627
+ box-shadow: 0 0 0 1000px var(--cds-field) inset;
1628
+ -webkit-text-fill-color: var(--cds-text-primary, #161616);
1629
+ }
1630
+
1610
1631
  .cds--fieldset html {
1611
1632
  font-size: 100%;
1612
1633
  }
@@ -1664,6 +1685,13 @@
1664
1685
  font-weight: 600;
1665
1686
  }
1666
1687
 
1688
+ .cds--label .cds--toggletip-label {
1689
+ font-size: var(--cds-label-01-font-size, 0.75rem);
1690
+ font-weight: var(--cds-label-01-font-weight, 400);
1691
+ line-height: var(--cds-label-01-line-height, 1.33333);
1692
+ letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
1693
+ }
1694
+
1667
1695
  .cds--label--no-margin {
1668
1696
  margin-bottom: 0;
1669
1697
  }
@@ -1755,7 +1783,7 @@
1755
1783
  }
1756
1784
 
1757
1785
  input[type=number] {
1758
- font-family: carbon--font-family("mono");
1786
+ font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif;
1759
1787
  }
1760
1788
 
1761
1789
  input[data-invalid]:not(:focus),
@@ -1966,16 +1994,12 @@ fieldset[disabled] .cds--form__helper-text {
1966
1994
  width: 100%;
1967
1995
  }
1968
1996
 
1969
- .cds--text-input__invalid-icon,
1970
- .cds--text-input__readonly-icon {
1997
+ .cds--text-input__invalid-icon {
1971
1998
  position: absolute;
1972
1999
  top: 50%;
1973
2000
  right: 1rem;
1974
- transform: translateY(-50%);
1975
- }
1976
-
1977
- .cds--text-input__invalid-icon {
1978
2001
  fill: var(--cds-support-error, #da1e28);
2002
+ transform: translateY(-50%);
1979
2003
  }
1980
2004
 
1981
2005
  .cds--text-input__invalid-icon--warning {
@@ -2224,8 +2248,7 @@ fieldset[disabled] .cds--form__helper-text {
2224
2248
  }
2225
2249
 
2226
2250
  .cds--text-input--invalid,
2227
- .cds--text-input--warning,
2228
- .cds--text-input-wrapper--readonly .cds--text-input {
2251
+ .cds--text-input--warning {
2229
2252
  padding-right: 2.5rem;
2230
2253
  }
2231
2254
 
@@ -2241,14 +2264,28 @@ fieldset[disabled] .cds--form__helper-text {
2241
2264
  right: 2.5rem;
2242
2265
  }
2243
2266
 
2244
- .cds--text-input:disabled + .cds--text-input--password__visibility__toggle.cds--tooltip__trigger svg {
2267
+ .cds--text-input:disabled ~ .cds--text-input--password__visibility__toggle.cds--tooltip__trigger {
2245
2268
  cursor: not-allowed;
2269
+ }
2270
+
2271
+ .cds--text-input:disabled ~ .cds--text-input--password__visibility__toggle.cds--tooltip__trigger svg {
2246
2272
  fill: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
2247
2273
  }
2248
- .cds--text-input:disabled + .cds--text-input--password__visibility__toggle.cds--tooltip__trigger svg:hover {
2274
+ .cds--text-input:disabled ~ .cds--text-input--password__visibility__toggle.cds--tooltip__trigger svg:hover {
2249
2275
  fill: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
2250
2276
  }
2251
2277
 
2278
+ .cds--text-input__counter-alert {
2279
+ position: absolute;
2280
+ overflow: hidden;
2281
+ width: 1px;
2282
+ height: 1px;
2283
+ padding: 0;
2284
+ border: 0;
2285
+ margin: -1px;
2286
+ clip: rect(0, 0, 0, 0);
2287
+ }
2288
+
2252
2289
  .cds--text-input:disabled {
2253
2290
  outline: 2px solid transparent;
2254
2291
  outline-offset: -2px;
@@ -2439,6 +2476,17 @@ fieldset[disabled] .cds--form__helper-text {
2439
2476
  flex-direction: column;
2440
2477
  }
2441
2478
 
2479
+ .cds--text-input-wrapper--inline .cds--form-requirement {
2480
+ display: block;
2481
+ overflow: visible;
2482
+ max-height: 12.5rem;
2483
+ font-weight: 400;
2484
+ }
2485
+
2486
+ .cds--text-input-wrapper--inline--invalid .cds--form-requirement {
2487
+ color: var(--cds-text-error, #da1e28);
2488
+ }
2489
+
2442
2490
  .cds--form--fluid .cds--text-input-wrapper--readonly,
2443
2491
  .cds--text-input-wrapper--readonly .cds--text-input {
2444
2492
  background: transparent;
@@ -2451,6 +2499,15 @@ fieldset[disabled] .cds--form__helper-text {
2451
2499
  }
2452
2500
  }
2453
2501
 
2502
+ .cds--text-input__label-wrapper {
2503
+ display: flex;
2504
+ width: 100%;
2505
+ justify-content: space-between;
2506
+ }
2507
+ .cds--text-input__label-wrapper .cds--text-input__label-counter {
2508
+ align-self: end;
2509
+ }
2510
+
2454
2511
  @keyframes stroke {
2455
2512
  100% {
2456
2513
  stroke-dashoffset: 0;
@@ -2480,7 +2537,7 @@ fieldset[disabled] .cds--form__helper-text {
2480
2537
  }
2481
2538
 
2482
2539
  .cds--inline-loading__checkmark-container {
2483
- fill: var(--cds-support-success, #198038);
2540
+ fill: var(--cds-support-success, #24a148);
2484
2541
  }
2485
2542
  .cds--inline-loading__checkmark-container.cds--inline-loading__svg {
2486
2543
  position: absolute;
@@ -2820,6 +2877,9 @@ fieldset[disabled] .cds--form__helper-text {
2820
2877
  border-bottom: 0;
2821
2878
  line-height: calc(3rem - (0.5rem * 2));
2822
2879
  }
2880
+ .cds--tabs.cds--tabs__icon--default .cds--tab--list, .cds--tabs.cds--tabs__icon--lg .cds--tab--list {
2881
+ overflow-x: visible;
2882
+ }
2823
2883
  .cds--tabs .cds--tabs__nav-item--icon, .cds--tabs.cds--tabs--contained .cds--tabs__nav-item--icon {
2824
2884
  display: flex;
2825
2885
  width: var(--cds-icon-tab-size, 2.5rem);
@@ -3240,7 +3300,7 @@ fieldset[disabled] .cds--form__helper-text {
3240
3300
  }
3241
3301
  .cds--overflow-menu:hover,
3242
3302
  .cds--overflow-menu__trigger:hover {
3243
- background-color: var(--cds-background-hover, rgba(141, 141, 141, 0.12));
3303
+ background-color: var(--cds-layer-hover);
3244
3304
  }
3245
3305
 
3246
3306
  .cds--overflow-menu--sm {
@@ -3284,6 +3344,10 @@ fieldset[disabled] .cds--form__helper-text {
3284
3344
  fill: var(--cds-icon-primary, #161616);
3285
3345
  }
3286
3346
 
3347
+ .cds--overflow-menu__wrapper {
3348
+ line-height: 0;
3349
+ }
3350
+
3287
3351
  .cds--overflow-menu-options {
3288
3352
  box-shadow: 0 2px 6px var(--cds-shadow, rgba(0, 0, 0, 0.3));
3289
3353
  position: absolute;
@@ -3525,7 +3589,7 @@ a.cds--overflow-menu-options__btn::before {
3525
3589
 
3526
3590
  .cds--overflow-menu-options__option--disabled .cds--overflow-menu-options__btn {
3527
3591
  color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
3528
- pointer-events: none;
3592
+ cursor: not-allowed;
3529
3593
  }
3530
3594
  .cds--overflow-menu-options__option--disabled .cds--overflow-menu-options__btn:hover, .cds--overflow-menu-options__option--disabled .cds--overflow-menu-options__btn:active, .cds--overflow-menu-options__option--disabled .cds--overflow-menu-options__btn:focus {
3531
3595
  outline: 2px solid transparent;
@@ -5138,7 +5202,7 @@ a.cds--overflow-menu-options__btn::before {
5138
5202
  .security--combo-button .security--combo-button__overflow-menu {
5139
5203
  width: 3rem;
5140
5204
  height: auto;
5141
- border-left: 0.125rem solid var(--cds-border-subtle-01, #e0e0e0);
5205
+ border-left: 0.125rem solid var(--cds-border-subtle-01, #c6c6c6);
5142
5206
  background-color: var(--cds-background-brand, #0f62fe);
5143
5207
  }
5144
5208
 
@@ -5318,6 +5382,10 @@ a.cds--overflow-menu-options__btn::before {
5318
5382
  fill: var(--cds-interactive, #0f62fe);
5319
5383
  }
5320
5384
 
5385
+ .cds--progress--space-equal .cds--progress-text {
5386
+ overflow: hidden;
5387
+ }
5388
+
5321
5389
  .cds--progress-label {
5322
5390
  font-size: var(--cds-body-compact-01-font-size, 0.875rem);
5323
5391
  font-weight: var(--cds-body-compact-01-font-weight, 400);
@@ -5343,19 +5411,20 @@ a.cds--overflow-menu-options__btn::before {
5343
5411
  cursor: pointer;
5344
5412
  }
5345
5413
 
5346
- .cds--progress-label:focus {
5347
- box-shadow: 0 0.1875rem 0 0 var(--cds-link-primary, #0f62fe);
5348
- color: var(--cds-link-primary, #0f62fe);
5349
- outline: none;
5350
- }
5351
-
5352
5414
  .cds--progress--space-equal .cds--progress-label {
5353
5415
  max-width: 100%;
5354
5416
  margin-right: 0.75rem;
5355
5417
  }
5356
5418
 
5419
+ .cds--progress-step-button:not(.cds--progress-step-button--unclickable):focus {
5420
+ outline: none;
5421
+ }
5422
+ .cds--progress-step-button:not(.cds--progress-step-button--unclickable):focus-visible .cds--progress-label {
5423
+ color: var(--cds-focus, #0f62fe);
5424
+ outline: 0.0625rem solid var(--cds-focus, #0f62fe);
5425
+ }
5357
5426
  .cds--progress-step-button:not(.cds--progress-step-button--unclickable) .cds--progress-label:active {
5358
- box-shadow: 0 0.1875rem 0 0 var(--cds-text-primary, #161616);
5427
+ box-shadow: 0 0.0625rem 0 0 var(--cds-text-primary, #161616);
5359
5428
  color: var(--cds-text-primary, #161616);
5360
5429
  }
5361
5430
 
@@ -5487,11 +5556,6 @@ a.cds--overflow-menu-options__btn::before {
5487
5556
  color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
5488
5557
  cursor: not-allowed;
5489
5558
  }
5490
- .cds--progress-step--disabled .cds--progress-label:focus,
5491
- .cds--progress-step--disabled .cds--progress-label:active {
5492
- box-shadow: none;
5493
- outline: none;
5494
- }
5495
5559
  .cds--progress-step--disabled .cds--progress-line {
5496
5560
  cursor: not-allowed;
5497
5561
  }
@@ -5534,6 +5598,10 @@ a.cds--overflow-menu-options__btn::before {
5534
5598
  }
5535
5599
  }
5536
5600
 
5601
+ .cds--progress.cds--progress--vertical.cds--skeleton .cds--progress-label {
5602
+ margin-top: 0.0625rem;
5603
+ }
5604
+
5537
5605
  .cds--progress--vertical {
5538
5606
  display: flex;
5539
5607
  flex-direction: column;
@@ -5587,6 +5655,7 @@ a.cds--overflow-menu-options__btn::before {
5587
5655
  }
5588
5656
 
5589
5657
  .cds--toggle {
5658
+ display: inline-block;
5590
5659
  user-select: none;
5591
5660
  }
5592
5661
 
@@ -5617,7 +5686,7 @@ a.cds--overflow-menu-options__btn::before {
5617
5686
  }
5618
5687
 
5619
5688
  .cds--toggle__appearance {
5620
- display: grid;
5689
+ display: inline-grid;
5621
5690
  align-items: center;
5622
5691
  column-gap: 0.5rem;
5623
5692
  cursor: pointer;
@@ -5650,12 +5719,13 @@ a.cds--overflow-menu-options__btn::before {
5650
5719
  }
5651
5720
 
5652
5721
  .cds--toggle__button:focus + .cds--toggle__label .cds--toggle__switch,
5653
- .cds--toggle__button:not(:disabled):active + .cds--toggle__label .cds--toggle__switch {
5722
+ .cds--toggle__button:not(:disabled):active + .cds--toggle__label .cds--toggle__switch,
5723
+ .cds--toggle:active .cds--toggle__switch {
5654
5724
  box-shadow: 0 0 0 1px var(--cds-focus-inset, #ffffff), 0 0 0 3px var(--cds-focus, #0f62fe);
5655
5725
  }
5656
5726
 
5657
5727
  .cds--toggle__switch--checked {
5658
- background-color: var(--cds-support-success, #198038);
5728
+ background-color: var(--cds-support-success, #24a148);
5659
5729
  }
5660
5730
  .cds--toggle__switch--checked::before {
5661
5731
  transform: translateX(1.5rem);
@@ -5688,7 +5758,7 @@ a.cds--overflow-menu-options__btn::before {
5688
5758
  right: 0.3125rem;
5689
5759
  width: 0.375rem;
5690
5760
  height: 0.3125rem;
5691
- fill: var(--cds-support-success, #198038);
5761
+ fill: var(--cds-support-success, #24a148);
5692
5762
  visibility: hidden;
5693
5763
  }
5694
5764
 
@@ -5716,6 +5786,31 @@ a.cds--overflow-menu-options__btn::before {
5716
5786
  fill: var(--cds-button-disabled, #c6c6c6);
5717
5787
  }
5718
5788
 
5789
+ .cds--toggle--readonly .cds--toggle__appearance {
5790
+ cursor: default;
5791
+ }
5792
+
5793
+ .cds--toggle--readonly .cds--toggle__switch {
5794
+ border: 1px solid var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
5795
+ background-color: transparent;
5796
+ }
5797
+ .cds--toggle--readonly .cds--toggle__switch::before {
5798
+ top: 0.125rem;
5799
+ left: 0.125rem;
5800
+ background-color: var(--cds-text-primary, #161616);
5801
+ }
5802
+
5803
+ .cds--toggle--readonly .cds--toggle__check {
5804
+ top: 0.3125rem;
5805
+ right: 0.25rem;
5806
+ fill: var(--cds-background, #ffffff);
5807
+ }
5808
+
5809
+ .cds--toggle--readonly .cds--toggle__text {
5810
+ cursor: text;
5811
+ user-select: text;
5812
+ }
5813
+
5719
5814
  @media screen and (-ms-high-contrast: active), (forced-colors: active) {
5720
5815
  .cds--toggle__switch,
5721
5816
  .cds--toggle__switch::before {
@@ -5725,7 +5820,8 @@ a.cds--overflow-menu-options__btn::before {
5725
5820
 
5726
5821
  @media screen and (-ms-high-contrast: active), (forced-colors: active) {
5727
5822
  .cds--toggle__button:focus + .cds--toggle__label .cds--toggle__switch,
5728
- .cds--toggle__button:not(:disabled):active + .cds--toggle__label .cds--toggle__switch {
5823
+ .cds--toggle__button:not(:disabled):active + .cds--toggle__label .cds--toggle__switch,
5824
+ .cds--toggle:active .cds--toggle__switch {
5729
5825
  color: Highlight;
5730
5826
  outline: 1px solid Highlight;
5731
5827
  }
@@ -5894,7 +5990,7 @@ a.cds--overflow-menu-options__btn::before {
5894
5990
  top: 0;
5895
5991
  height: min-content;
5896
5992
  padding-top: 0;
5897
- border-right: 1px solid var(--cds-border-subtle-01, #e0e0e0);
5993
+ border-right: 1px solid var(--cds-border-subtle-01, #c6c6c6);
5898
5994
  background-color: transparent;
5899
5995
  grid-row: 1;
5900
5996
  overflow-x: auto;
@@ -6669,12 +6765,12 @@ a.cds--overflow-menu-options__btn::before {
6669
6765
  }
6670
6766
  .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__header {
6671
6767
  padding: 1.5rem 2rem;
6672
- border-bottom: 1px solid var(--cds-border-subtle-01, #e0e0e0);
6768
+ border-bottom: 1px solid var(--cds-border-subtle-01, #c6c6c6);
6673
6769
  margin: 0;
6674
6770
  }
6675
6771
  .c4p--tearsheet.c4p--tearsheet--narrow .c4p--tearsheet__header {
6676
6772
  padding: 1rem;
6677
- border-bottom: 1px solid var(--cds-border-subtle-01, #e0e0e0);
6773
+ border-bottom: 1px solid var(--cds-border-subtle-01, #c6c6c6);
6678
6774
  margin: 0;
6679
6775
  }
6680
6776
  .c4p--tearsheet .c4p--tearsheet__header-content {
@@ -6745,7 +6841,7 @@ a.cds--overflow-menu-options__btn::before {
6745
6841
  }
6746
6842
  .c4p--tearsheet .c4p--tearsheet__influencer {
6747
6843
  flex: 0 0 257px;
6748
- border-right: 1px solid var(--cds-border-subtle-01, #e0e0e0);
6844
+ border-right: 1px solid var(--cds-border-subtle-01, #c6c6c6);
6749
6845
  overflow-y: auto;
6750
6846
  }
6751
6847
  .c4p--tearsheet .c4p--tearsheet__influencer.c4p--tearsheet__influencer p {
@@ -6768,7 +6864,7 @@ a.cds--overflow-menu-options__btn::before {
6768
6864
  }
6769
6865
  .c4p--tearsheet .c4p--tearsheet__main .c4p--tearsheet__influencer {
6770
6866
  border-right: none;
6771
- border-left: 1px solid var(--cds-border-subtle-01, #e0e0e0);
6867
+ border-left: 1px solid var(--cds-border-subtle-01, #c6c6c6);
6772
6868
  }
6773
6869
  .c4p--tearsheet .c4p--tearsheet__content {
6774
6870
  overflow: auto;
@@ -6810,7 +6906,7 @@ a.cds--overflow-menu-options__btn::before {
6810
6906
  .c4p--tearsheet .c4p--tearsheet__buttons {
6811
6907
  display: inline-flex;
6812
6908
  min-width: 100%;
6813
- border-top: 1px solid var(--cds-border-subtle-01, #e0e0e0);
6909
+ border-top: 1px solid var(--cds-border-subtle-01, #c6c6c6);
6814
6910
  }
6815
6911
  .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__buttons {
6816
6912
  background: var(--cds-background, #ffffff);
@@ -7052,6 +7148,7 @@ a.cds--overflow-menu-options__btn::before {
7052
7148
  }
7053
7149
 
7054
7150
  .cds--link.cds--link--inline {
7151
+ display: inline;
7055
7152
  text-decoration: underline;
7056
7153
  }
7057
7154
  .cds--link.cds--link--inline:focus, .cds--link.cds--link--inline:visited {
@@ -7240,6 +7337,7 @@ a.cds--overflow-menu-options__btn::before {
7240
7337
  @media screen and (-ms-high-contrast: active), (forced-colors: active) {
7241
7338
  .cds--radio-button:checked + .cds--radio-button__label .cds--radio-button__appearance::before {
7242
7339
  fill: ButtonText;
7340
+ background-color: ButtonText;
7243
7341
  }
7244
7342
  }
7245
7343
 
@@ -7257,6 +7355,19 @@ a.cds--overflow-menu-options__btn::before {
7257
7355
  background-color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
7258
7356
  }
7259
7357
 
7358
+ .cds--radio-button-group--readonly .cds--radio-button + .cds--radio-button__label .cds--radio-button__appearance {
7359
+ border-color: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
7360
+ }
7361
+
7362
+ .cds--radio-button-group--readonly .cds--radio-button__label {
7363
+ cursor: default;
7364
+ }
7365
+
7366
+ .cds--radio-button-group--readonly .cds--radio-button__label-text {
7367
+ cursor: text;
7368
+ user-select: text;
7369
+ }
7370
+
7260
7371
  .cds--radio-button:focus + .cds--radio-button__label .cds--radio-button__appearance {
7261
7372
  outline: 2px solid var(--cds-focus, #0f62fe);
7262
7373
  outline-offset: 1.5px;
@@ -7808,6 +7919,10 @@ a.cds--overflow-menu-options__btn::before {
7808
7919
  color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
7809
7920
  }
7810
7921
 
7922
+ .cds--file-container--drop {
7923
+ width: 100%;
7924
+ }
7925
+
7811
7926
  .cds--file-btn ~ .cds--file-container {
7812
7927
  margin-top: 1.5rem;
7813
7928
  }
@@ -7959,7 +8074,6 @@ a.cds--overflow-menu-options__btn::before {
7959
8074
  }
7960
8075
 
7961
8076
  .cds--file__state-container .cds--file-complete {
7962
- cursor: pointer;
7963
8077
  fill: var(--cds-interactive, #0f62fe);
7964
8078
  }
7965
8079
  .cds--file__state-container .cds--file-complete:focus {
@@ -8388,15 +8502,15 @@ a.cds--overflow-menu-options__btn::before {
8388
8502
  }
8389
8503
 
8390
8504
  .c4p--add-select__selections-row:first-child .c4p--add-select__selections-cell-wrapper {
8391
- border-top: 1px solid var(--cds-border-subtle-01, #e0e0e0);
8505
+ border-top: 1px solid var(--cds-border-subtle-01, #c6c6c6);
8392
8506
  }
8393
8507
 
8394
8508
  .c4p--add-select__column {
8395
8509
  overflow: auto;
8396
8510
  flex: 0 0 20rem;
8397
8511
  padding: 1rem;
8398
- border-top: 1px solid var(--cds-border-subtle-01, #e0e0e0);
8399
- border-right: 1px solid var(--cds-border-subtle-01, #e0e0e0);
8512
+ border-top: 1px solid var(--cds-border-subtle-01, #c6c6c6);
8513
+ border-right: 1px solid var(--cds-border-subtle-01, #c6c6c6);
8400
8514
  }
8401
8515
  .c4p--add-select__column-search-bar {
8402
8516
  display: flex;
@@ -8638,6 +8752,9 @@ button.c4p--add-select__global-filter-toggle--open {
8638
8752
  --cds-border-subtle-selected-01: #525252;
8639
8753
  --cds-border-subtle-selected-02: #6f6f6f;
8640
8754
  --cds-border-subtle-selected-03: #8d8d8d;
8755
+ --cds-border-tile-01: #525252;
8756
+ --cds-border-tile-02: #6f6f6f;
8757
+ --cds-border-tile-03: #8d8d8d;
8641
8758
  --cds-field-01: #262626;
8642
8759
  --cds-field-02: #393939;
8643
8760
  --cds-field-03: #525252;
@@ -8649,6 +8766,7 @@ button.c4p--add-select__global-filter-toggle--open {
8649
8766
  --cds-focus-inverse: #0f62fe;
8650
8767
  --cds-highlight: #002d9c;
8651
8768
  --cds-icon-disabled: rgba(244, 244, 244, 0.25);
8769
+ --cds-icon-interactive: #ffffff;
8652
8770
  --cds-icon-inverse: #161616;
8653
8771
  --cds-icon-on-color: #ffffff;
8654
8772
  --cds-icon-on-color-disabled: rgba(255, 255, 255, 0.25);
@@ -8734,6 +8852,10 @@ button.c4p--add-select__global-filter-toggle--open {
8734
8852
  --cds-label-01-font-weight: 400;
8735
8853
  --cds-label-01-line-height: 1.33333;
8736
8854
  --cds-label-01-letter-spacing: 0.32px;
8855
+ --cds-label-02-font-size: 0.875rem;
8856
+ --cds-label-02-font-weight: 400;
8857
+ --cds-label-02-line-height: 1.28572;
8858
+ --cds-label-02-letter-spacing: 0.16px;
8737
8859
  --cds-helper-text-01-font-size: 0.75rem;
8738
8860
  --cds-helper-text-01-line-height: 1.33333;
8739
8861
  --cds-helper-text-01-letter-spacing: 0.32px;
@@ -8795,11 +8917,11 @@ button.c4p--add-select__global-filter-toggle--open {
8795
8917
  --cds-productive-heading-05-font-weight: 400;
8796
8918
  --cds-productive-heading-05-line-height: 1.25;
8797
8919
  --cds-productive-heading-05-letter-spacing: 0;
8798
- --cds-productive-heading-06-font-size: 2rem;
8920
+ --cds-productive-heading-06-font-size: 2.625rem;
8799
8921
  --cds-productive-heading-06-font-weight: 300;
8800
8922
  --cds-productive-heading-06-line-height: 1.199;
8801
8923
  --cds-productive-heading-06-letter-spacing: 0;
8802
- --cds-productive-heading-07-font-size: 2.625rem;
8924
+ --cds-productive-heading-07-font-size: 3.375rem;
8803
8925
  --cds-productive-heading-07-font-weight: 300;
8804
8926
  --cds-productive-heading-07-line-height: 1.19;
8805
8927
  --cds-productive-heading-07-letter-spacing: 0;
@@ -8854,7 +8976,7 @@ button.c4p--add-select__global-filter-toggle--open {
8854
8976
  --cds-display-03-line-height: 1.19;
8855
8977
  --cds-display-03-letter-spacing: 0;
8856
8978
  --cds-display-04-font-size: 2.625rem;
8857
- --cds-display-04-font-weight: 600;
8979
+ --cds-display-04-font-weight: 300;
8858
8980
  --cds-display-04-line-height: 1.19;
8859
8981
  --cds-display-04-letter-spacing: 0;
8860
8982
  --cds-legal-01-font-size: 0.75rem;
@@ -8901,11 +9023,11 @@ button.c4p--add-select__global-filter-toggle--open {
8901
9023
  --cds-heading-05-font-weight: 400;
8902
9024
  --cds-heading-05-line-height: 1.25;
8903
9025
  --cds-heading-05-letter-spacing: 0;
8904
- --cds-heading-06-font-size: 2rem;
9026
+ --cds-heading-06-font-size: 2.625rem;
8905
9027
  --cds-heading-06-font-weight: 300;
8906
9028
  --cds-heading-06-line-height: 1.199;
8907
9029
  --cds-heading-06-letter-spacing: 0;
8908
- --cds-heading-07-font-size: 2.625rem;
9030
+ --cds-heading-07-font-size: 3.375rem;
8909
9031
  --cds-heading-07-font-weight: 300;
8910
9032
  --cds-heading-07-line-height: 1.19;
8911
9033
  --cds-heading-07-letter-spacing: 0;
@@ -8952,7 +9074,7 @@ button.c4p--add-select__global-filter-toggle--open {
8952
9074
  --cds-fluid-display-03-line-height: 1.19;
8953
9075
  --cds-fluid-display-03-letter-spacing: 0;
8954
9076
  --cds-fluid-display-04-font-size: 2.625rem;
8955
- --cds-fluid-display-04-font-weight: 600;
9077
+ --cds-fluid-display-04-font-weight: 300;
8956
9078
  --cds-fluid-display-04-line-height: 1.19;
8957
9079
  --cds-fluid-display-04-letter-spacing: 0;
8958
9080
  --cds-button-separator: #161616;
@@ -8980,9 +9102,10 @@ button.c4p--add-select__global-filter-toggle--open {
8980
9102
  --cds-layer-accent-active: var(--cds-layer-accent-active-01, #a8a8a8);
8981
9103
  --cds-field: var(--cds-field-01, #f4f4f4);
8982
9104
  --cds-field-hover: var(--cds-field-hover-01, #e8e8e8);
8983
- --cds-border-subtle: var(--cds-border-subtle-01, #e0e0e0);
9105
+ --cds-border-subtle: var(--cds-border-subtle-01, #c6c6c6);
8984
9106
  --cds-border-subtle-selected: var(--cds-border-subtle-selected-01, #c6c6c6);
8985
9107
  --cds-border-strong: var(--cds-border-strong-01, #8d8d8d);
9108
+ --cds-border-tile: var(--cds-border-tile-01, #c6c6c6);
8986
9109
  position: fixed;
8987
9110
  z-index: 2;
8988
9111
  top: 3rem;
@@ -9094,7 +9217,7 @@ button.c4p--add-select__global-filter-toggle--open {
9094
9217
  fill: var(--cds-support-error, #da1e28);
9095
9218
  }
9096
9219
  .c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__notification-status-icon.c4p--notifications-panel__notification-status-icon-success {
9097
- fill: var(--cds-support-success, #198038);
9220
+ fill: var(--cds-support-success, #24a148);
9098
9221
  }
9099
9222
  .c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__notification-status-icon.c4p--notifications-panel__notification-status-icon-warning {
9100
9223
  fill: var(--cds-support-warning, #f1c21b);
@@ -9403,6 +9526,12 @@ button.c4p--add-select__global-filter-toggle--open {
9403
9526
  }
9404
9527
  }
9405
9528
 
9529
+ .cds--breadcrumb .cds--overflow-menu.cds--btn--icon-only {
9530
+ min-height: 1.125rem;
9531
+ padding-right: 0;
9532
+ padding-left: 0;
9533
+ }
9534
+
9406
9535
  .cds--icon--skeleton {
9407
9536
  position: relative;
9408
9537
  padding: 0;
@@ -12253,7 +12382,7 @@ button.c4p--add-select__global-filter-toggle--open {
12253
12382
  .c4p--card__productive .c4p--card__footer {
12254
12383
  align-items: center;
12255
12384
  justify-content: space-between;
12256
- border-top: 1px solid var(--cds-border-subtle-01, #e0e0e0);
12385
+ border-top: 1px solid var(--cds-border-subtle-01, #c6c6c6);
12257
12386
  }
12258
12387
  .c4p--card__productive .c4p--card__footer-no-button {
12259
12388
  justify-content: flex-end;
@@ -13317,6 +13446,7 @@ button.c4p--add-select__global-filter-toggle--open {
13317
13446
 
13318
13447
  .cds--popover {
13319
13448
  position: absolute;
13449
+ z-index: 6000;
13320
13450
  top: 0;
13321
13451
  right: 0;
13322
13452
  bottom: 0;
@@ -13489,13 +13619,13 @@ button.c4p--add-select__global-filter-toggle--open {
13489
13619
  .cds--popover--left-top .cds--popover-content {
13490
13620
  top: -50%;
13491
13621
  right: 100%;
13492
- transform: translate(calc(-1 * var(--cds-popover-offset, 0rem)), calc(-0.5 * var(--cds-popover-offset, 0rem)));
13622
+ transform: translate(calc(-1 * var(--cds-popover-offset, 0rem)), calc(-0.5 * var(--cds-popover-offset, 0rem) + 16px));
13493
13623
  }
13494
13624
 
13495
13625
  .cds--popover--left-bottom .cds--popover-content {
13496
13626
  right: 100%;
13497
13627
  bottom: -50%;
13498
- transform: translate(calc(-1 * var(--cds-popover-offset, 0rem)), calc(0.5 * var(--cds-popover-offset, 0rem)));
13628
+ transform: translate(calc(-1 * var(--cds-popover-offset, 0rem)), calc(0.5 * var(--cds-popover-offset, 0rem) - 16px));
13499
13629
  }
13500
13630
 
13501
13631
  .cds--popover--left .cds--popover-content::before,
@@ -13542,8 +13672,8 @@ button.c4p--add-select__global-filter-toggle--open {
13542
13672
 
13543
13673
  .c4p--toolbar__group {
13544
13674
  display: flex;
13545
- border-right: 1px solid var(--cds-border-subtle-01, #e0e0e0);
13546
- border-bottom: 1px solid var(--cds-border-subtle-01, #e0e0e0);
13675
+ border-right: 1px solid var(--cds-border-subtle-01, #c6c6c6);
13676
+ border-bottom: 1px solid var(--cds-border-subtle-01, #c6c6c6);
13547
13677
  }
13548
13678
 
13549
13679
  .c4p--toolbar--vertical > .c4p--toolbar__group,
@@ -13617,6 +13747,9 @@ button.c4p--add-select__global-filter-toggle--open {
13617
13747
  --cds-border-subtle-selected-01: #6f6f6f;
13618
13748
  --cds-border-subtle-selected-02: #8d8d8d;
13619
13749
  --cds-border-subtle-selected-03: #a8a8a8;
13750
+ --cds-border-tile-01: #6f6f6f;
13751
+ --cds-border-tile-02: #8d8d8d;
13752
+ --cds-border-tile-03: #a8a8a8;
13620
13753
  --cds-field-01: #393939;
13621
13754
  --cds-field-02: #525252;
13622
13755
  --cds-field-03: #6f6f6f;
@@ -13628,6 +13761,7 @@ button.c4p--add-select__global-filter-toggle--open {
13628
13761
  --cds-focus-inverse: #0f62fe;
13629
13762
  --cds-highlight: #0043ce;
13630
13763
  --cds-icon-disabled: rgba(244, 244, 244, 0.25);
13764
+ --cds-icon-interactive: #ffffff;
13631
13765
  --cds-icon-inverse: #161616;
13632
13766
  --cds-icon-on-color: #ffffff;
13633
13767
  --cds-icon-on-color-disabled: rgba(255, 255, 255, 0.25);
@@ -13713,6 +13847,10 @@ button.c4p--add-select__global-filter-toggle--open {
13713
13847
  --cds-label-01-font-weight: 400;
13714
13848
  --cds-label-01-line-height: 1.33333;
13715
13849
  --cds-label-01-letter-spacing: 0.32px;
13850
+ --cds-label-02-font-size: 0.875rem;
13851
+ --cds-label-02-font-weight: 400;
13852
+ --cds-label-02-line-height: 1.28572;
13853
+ --cds-label-02-letter-spacing: 0.16px;
13716
13854
  --cds-helper-text-01-font-size: 0.75rem;
13717
13855
  --cds-helper-text-01-line-height: 1.33333;
13718
13856
  --cds-helper-text-01-letter-spacing: 0.32px;
@@ -13774,11 +13912,11 @@ button.c4p--add-select__global-filter-toggle--open {
13774
13912
  --cds-productive-heading-05-font-weight: 400;
13775
13913
  --cds-productive-heading-05-line-height: 1.25;
13776
13914
  --cds-productive-heading-05-letter-spacing: 0;
13777
- --cds-productive-heading-06-font-size: 2rem;
13915
+ --cds-productive-heading-06-font-size: 2.625rem;
13778
13916
  --cds-productive-heading-06-font-weight: 300;
13779
13917
  --cds-productive-heading-06-line-height: 1.199;
13780
13918
  --cds-productive-heading-06-letter-spacing: 0;
13781
- --cds-productive-heading-07-font-size: 2.625rem;
13919
+ --cds-productive-heading-07-font-size: 3.375rem;
13782
13920
  --cds-productive-heading-07-font-weight: 300;
13783
13921
  --cds-productive-heading-07-line-height: 1.19;
13784
13922
  --cds-productive-heading-07-letter-spacing: 0;
@@ -13833,7 +13971,7 @@ button.c4p--add-select__global-filter-toggle--open {
13833
13971
  --cds-display-03-line-height: 1.19;
13834
13972
  --cds-display-03-letter-spacing: 0;
13835
13973
  --cds-display-04-font-size: 2.625rem;
13836
- --cds-display-04-font-weight: 600;
13974
+ --cds-display-04-font-weight: 300;
13837
13975
  --cds-display-04-line-height: 1.19;
13838
13976
  --cds-display-04-letter-spacing: 0;
13839
13977
  --cds-legal-01-font-size: 0.75rem;
@@ -13880,11 +14018,11 @@ button.c4p--add-select__global-filter-toggle--open {
13880
14018
  --cds-heading-05-font-weight: 400;
13881
14019
  --cds-heading-05-line-height: 1.25;
13882
14020
  --cds-heading-05-letter-spacing: 0;
13883
- --cds-heading-06-font-size: 2rem;
14021
+ --cds-heading-06-font-size: 2.625rem;
13884
14022
  --cds-heading-06-font-weight: 300;
13885
14023
  --cds-heading-06-line-height: 1.199;
13886
14024
  --cds-heading-06-letter-spacing: 0;
13887
- --cds-heading-07-font-size: 2.625rem;
14025
+ --cds-heading-07-font-size: 3.375rem;
13888
14026
  --cds-heading-07-font-weight: 300;
13889
14027
  --cds-heading-07-line-height: 1.19;
13890
14028
  --cds-heading-07-letter-spacing: 0;
@@ -13931,7 +14069,7 @@ button.c4p--add-select__global-filter-toggle--open {
13931
14069
  --cds-fluid-display-03-line-height: 1.19;
13932
14070
  --cds-fluid-display-03-letter-spacing: 0;
13933
14071
  --cds-fluid-display-04-font-size: 2.625rem;
13934
- --cds-fluid-display-04-font-weight: 600;
14072
+ --cds-fluid-display-04-font-weight: 300;
13935
14073
  --cds-fluid-display-04-line-height: 1.19;
13936
14074
  --cds-fluid-display-04-letter-spacing: 0;
13937
14075
  --cds-button-separator: #161616;
@@ -13989,9 +14127,10 @@ button.c4p--add-select__global-filter-toggle--open {
13989
14127
  --cds-layer-accent-active: var(--cds-layer-accent-active-01, #a8a8a8);
13990
14128
  --cds-field: var(--cds-field-01, #f4f4f4);
13991
14129
  --cds-field-hover: var(--cds-field-hover-01, #e8e8e8);
13992
- --cds-border-subtle: var(--cds-border-subtle-01, #e0e0e0);
14130
+ --cds-border-subtle: var(--cds-border-subtle-01, #c6c6c6);
13993
14131
  --cds-border-subtle-selected: var(--cds-border-subtle-selected-01, #c6c6c6);
13994
14132
  --cds-border-strong: var(--cds-border-strong-01, #8d8d8d);
14133
+ --cds-border-tile: var(--cds-border-tile-01, #c6c6c6);
13995
14134
  position: fixed;
13996
14135
  top: 3rem;
13997
14136
  right: 0;
@@ -14038,6 +14177,9 @@ button.c4p--add-select__global-filter-toggle--open {
14038
14177
  --cds-border-subtle-selected-01: #525252;
14039
14178
  --cds-border-subtle-selected-02: #6f6f6f;
14040
14179
  --cds-border-subtle-selected-03: #8d8d8d;
14180
+ --cds-border-tile-01: #525252;
14181
+ --cds-border-tile-02: #6f6f6f;
14182
+ --cds-border-tile-03: #8d8d8d;
14041
14183
  --cds-field-01: #262626;
14042
14184
  --cds-field-02: #393939;
14043
14185
  --cds-field-03: #525252;
@@ -14049,6 +14191,7 @@ button.c4p--add-select__global-filter-toggle--open {
14049
14191
  --cds-focus-inverse: #0f62fe;
14050
14192
  --cds-highlight: #002d9c;
14051
14193
  --cds-icon-disabled: rgba(244, 244, 244, 0.25);
14194
+ --cds-icon-interactive: #ffffff;
14052
14195
  --cds-icon-inverse: #161616;
14053
14196
  --cds-icon-on-color: #ffffff;
14054
14197
  --cds-icon-on-color-disabled: rgba(255, 255, 255, 0.25);
@@ -14134,6 +14277,10 @@ button.c4p--add-select__global-filter-toggle--open {
14134
14277
  --cds-label-01-font-weight: 400;
14135
14278
  --cds-label-01-line-height: 1.33333;
14136
14279
  --cds-label-01-letter-spacing: 0.32px;
14280
+ --cds-label-02-font-size: 0.875rem;
14281
+ --cds-label-02-font-weight: 400;
14282
+ --cds-label-02-line-height: 1.28572;
14283
+ --cds-label-02-letter-spacing: 0.16px;
14137
14284
  --cds-helper-text-01-font-size: 0.75rem;
14138
14285
  --cds-helper-text-01-line-height: 1.33333;
14139
14286
  --cds-helper-text-01-letter-spacing: 0.32px;
@@ -14195,11 +14342,11 @@ button.c4p--add-select__global-filter-toggle--open {
14195
14342
  --cds-productive-heading-05-font-weight: 400;
14196
14343
  --cds-productive-heading-05-line-height: 1.25;
14197
14344
  --cds-productive-heading-05-letter-spacing: 0;
14198
- --cds-productive-heading-06-font-size: 2rem;
14345
+ --cds-productive-heading-06-font-size: 2.625rem;
14199
14346
  --cds-productive-heading-06-font-weight: 300;
14200
14347
  --cds-productive-heading-06-line-height: 1.199;
14201
14348
  --cds-productive-heading-06-letter-spacing: 0;
14202
- --cds-productive-heading-07-font-size: 2.625rem;
14349
+ --cds-productive-heading-07-font-size: 3.375rem;
14203
14350
  --cds-productive-heading-07-font-weight: 300;
14204
14351
  --cds-productive-heading-07-line-height: 1.19;
14205
14352
  --cds-productive-heading-07-letter-spacing: 0;
@@ -14254,7 +14401,7 @@ button.c4p--add-select__global-filter-toggle--open {
14254
14401
  --cds-display-03-line-height: 1.19;
14255
14402
  --cds-display-03-letter-spacing: 0;
14256
14403
  --cds-display-04-font-size: 2.625rem;
14257
- --cds-display-04-font-weight: 600;
14404
+ --cds-display-04-font-weight: 300;
14258
14405
  --cds-display-04-line-height: 1.19;
14259
14406
  --cds-display-04-letter-spacing: 0;
14260
14407
  --cds-legal-01-font-size: 0.75rem;
@@ -14301,11 +14448,11 @@ button.c4p--add-select__global-filter-toggle--open {
14301
14448
  --cds-heading-05-font-weight: 400;
14302
14449
  --cds-heading-05-line-height: 1.25;
14303
14450
  --cds-heading-05-letter-spacing: 0;
14304
- --cds-heading-06-font-size: 2rem;
14451
+ --cds-heading-06-font-size: 2.625rem;
14305
14452
  --cds-heading-06-font-weight: 300;
14306
14453
  --cds-heading-06-line-height: 1.199;
14307
14454
  --cds-heading-06-letter-spacing: 0;
14308
- --cds-heading-07-font-size: 2.625rem;
14455
+ --cds-heading-07-font-size: 3.375rem;
14309
14456
  --cds-heading-07-font-weight: 300;
14310
14457
  --cds-heading-07-line-height: 1.19;
14311
14458
  --cds-heading-07-letter-spacing: 0;
@@ -14352,7 +14499,7 @@ button.c4p--add-select__global-filter-toggle--open {
14352
14499
  --cds-fluid-display-03-line-height: 1.19;
14353
14500
  --cds-fluid-display-03-letter-spacing: 0;
14354
14501
  --cds-fluid-display-04-font-size: 2.625rem;
14355
- --cds-fluid-display-04-font-weight: 600;
14502
+ --cds-fluid-display-04-font-weight: 300;
14356
14503
  --cds-fluid-display-04-line-height: 1.19;
14357
14504
  --cds-fluid-display-04-letter-spacing: 0;
14358
14505
  --cds-button-separator: #161616;
@@ -14410,9 +14557,10 @@ button.c4p--add-select__global-filter-toggle--open {
14410
14557
  --cds-layer-accent-active: var(--cds-layer-accent-active-01, #a8a8a8);
14411
14558
  --cds-field: var(--cds-field-01, #f4f4f4);
14412
14559
  --cds-field-hover: var(--cds-field-hover-01, #e8e8e8);
14413
- --cds-border-subtle: var(--cds-border-subtle-01, #e0e0e0);
14560
+ --cds-border-subtle: var(--cds-border-subtle-01, #c6c6c6);
14414
14561
  --cds-border-subtle-selected: var(--cds-border-subtle-selected-01, #c6c6c6);
14415
14562
  --cds-border-strong: var(--cds-border-strong-01, #8d8d8d);
14563
+ --cds-border-tile: var(--cds-border-tile-01, #c6c6c6);
14416
14564
  }
14417
14565
 
14418
14566
  .c4p--web-terminal__body {
@@ -14688,12 +14836,19 @@ button.c4p--add-select__global-filter-toggle--open {
14688
14836
  }
14689
14837
 
14690
14838
  .c4p--options-tile {
14691
- border-bottom: 1px solid var(--cds-border-subtle-01, #e0e0e0);
14692
- background-color: var(--cds-layer-01, #f4f4f4);
14839
+ position: relative;
14840
+ border-bottom: 1px solid var(--cds-border-subtle);
14841
+ background-color: var(--cds-layer);
14693
14842
  }
14694
14843
 
14695
14844
  .c4p--options-tile__toggle-container {
14696
- position: relative;
14845
+ position: absolute;
14846
+ top: 0;
14847
+ right: 0;
14848
+ bottom: 0;
14849
+ width: calc(
14850
+ 1rem + 2rem + 1rem
14851
+ );
14697
14852
  }
14698
14853
 
14699
14854
  .c4p--options-tile__toggle {
@@ -15286,8 +15441,8 @@ button.c4p--add-select__global-filter-toggle--open {
15286
15441
  justify-content: flex-end;
15287
15442
  }
15288
15443
  .c4p--data-spreadsheet .c4p--data-spreadsheet__td {
15289
- border-right: 1px solid var(--cds-border-subtle-01, #e0e0e0);
15290
- border-bottom: 1px solid var(--cds-border-subtle-01, #e0e0e0);
15444
+ border-right: 1px solid var(--cds-border-subtle-01, #c6c6c6);
15445
+ border-bottom: 1px solid var(--cds-border-subtle-01, #c6c6c6);
15291
15446
  overflow: hidden;
15292
15447
  margin: 0;
15293
15448
  background-color: var(--cds-field-01, #f4f4f4);
@@ -15359,8 +15514,8 @@ button.c4p--add-select__global-filter-toggle--open {
15359
15514
  font-weight: var(--cds-body-short-01-font-weight, 400);
15360
15515
  line-height: var(--cds-body-short-01-line-height, 1.28572);
15361
15516
  letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
15362
- border-right: 1px solid var(--cds-border-subtle-01, #e0e0e0);
15363
- border-bottom: 1px solid var(--cds-border-subtle-01, #e0e0e0);
15517
+ border-right: 1px solid var(--cds-border-subtle-01, #c6c6c6);
15518
+ border-bottom: 1px solid var(--cds-border-subtle-01, #c6c6c6);
15364
15519
  position: absolute;
15365
15520
  z-index: 3;
15366
15521
  display: none;
@@ -15659,7 +15814,9 @@ button.c4p--add-select__global-filter-toggle--open {
15659
15814
  .c4p--datagrid__grid-container td.cds--table-column-checkbox,
15660
15815
  .c4p--datagrid__grid-container th.cds--table-column-checkbox {
15661
15816
  /* stylelint-disable-next-line declaration-no-important */
15662
- padding-right: 1.5rem !important;
15817
+ width: 3rem !important;
15818
+ /* stylelint-disable-next-line declaration-no-important */
15819
+ padding-right: 1rem !important;
15663
15820
  }
15664
15821
 
15665
15822
  .c4p--datagrid__empty-state .c4p--datagrid__table-simple {
@@ -15723,7 +15880,7 @@ button.c4p--add-select__global-filter-toggle--open {
15723
15880
  }
15724
15881
 
15725
15882
  .c4p--datagrid__head-hidden-select-all {
15726
- padding-right: 2.5rem;
15883
+ padding-right: 3rem;
15727
15884
  }
15728
15885
  .c4p--datagrid__head-hidden-select-all.c4p--datagrid__select-all-sticky-left {
15729
15886
  position: sticky;
@@ -15764,6 +15921,13 @@ button.c4p--add-select__global-filter-toggle--open {
15764
15921
  width: 100% !important;
15765
15922
  }
15766
15923
 
15924
+ .c4p--datagrid__sticky thead {
15925
+ display: flex;
15926
+ }
15927
+ .c4p--datagrid__sticky thead tr.c4p--datagrid__sticky {
15928
+ width: auto;
15929
+ }
15930
+
15767
15931
  .c4p--datagrid__displayFlex {
15768
15932
  position: relative;
15769
15933
  display: flex;
@@ -15799,6 +15963,9 @@ button.c4p--add-select__global-filter-toggle--open {
15799
15963
  .c4p--datagrid__datagridWithPanel .c4p--datagrid__table-container .c4p--datagrid__filter-summary {
15800
15964
  border-bottom: 1px solid var(--cds-layer-03, #f4f4f4);
15801
15965
  }
15966
+ .c4p--datagrid__datagridWithPanel .c4p--datagrid__table-container {
15967
+ overflow: hidden;
15968
+ }
15802
15969
  .c4p--datagrid__datagridWithPanel .c4p--datagrid__table-simple {
15803
15970
  height: 100%;
15804
15971
  }
@@ -15826,7 +15993,7 @@ button.c4p--add-select__global-filter-toggle--open {
15826
15993
  );
15827
15994
  width: 1px;
15828
15995
  height: var(--c4p--datagrid--indicator-height);
15829
- border-left: 1px solid var(--cds-background-brand, #0f62fe);
15996
+ border-left: 1px solid var(--cds-border-subtle-selected-01, #c6c6c6);
15830
15997
  content: "";
15831
15998
  }
15832
15999
 
@@ -15843,7 +16010,9 @@ button.c4p--add-select__global-filter-toggle--open {
15843
16010
  padding-bottom: 1rem;
15844
16011
  }
15845
16012
  .c4p--datagrid__dense-header .c4p--datagrid__table-toolbar {
16013
+ display: flex;
15846
16014
  flex: 1 0 auto;
16015
+ align-items: flex-end;
15847
16016
  }
15848
16017
  .c4p--datagrid__dense-header .cds--table-toolbar {
15849
16018
  background: transparent;
@@ -15851,9 +16020,6 @@ button.c4p--add-select__global-filter-toggle--open {
15851
16020
  .c4p--datagrid__dense-header .cds__table-container {
15852
16021
  flex: 1 1 100%;
15853
16022
  }
15854
- .c4p--datagrid__dense-header .cds--table-toolbar {
15855
- padding-top: 2rem;
15856
- }
15857
16023
  .c4p--datagrid__dense-header .c4p--datagrid__toolbar-divider {
15858
16024
  position: relative;
15859
16025
  }
@@ -15863,7 +16029,7 @@ button.c4p--add-select__global-filter-toggle--open {
15863
16029
  left: 0;
15864
16030
  width: 1px;
15865
16031
  height: 1rem;
15866
- border-left: 1px solid var(--cds-border-subtle-01, #e0e0e0);
16032
+ border-left: 1px solid var(--cds-border-subtle-01, #c6c6c6);
15867
16033
  content: "";
15868
16034
  transform: translateY(-50%);
15869
16035
  }
@@ -16028,6 +16194,19 @@ button.c4p--add-select__global-filter-toggle--open {
16028
16194
  content: "";
16029
16195
  }
16030
16196
 
16197
+ .c4p--datagrid tr.c4p--datagrid__carbon-nested-row td:first-child:empty,
16198
+ .c4p--datagrid tr.c4p--datagrid__carbon-nested-row .c4p--datagrid__expandable-row-cell {
16199
+ border-bottom: none;
16200
+ }
16201
+
16202
+ .cds--data-table td.c4p--datagrid__expandable-row-cell {
16203
+ padding-left: 0.5rem;
16204
+ }
16205
+
16206
+ .c4p--datagrid__carbon-row-expanded .c4p--datagrid__expandable-row-cell {
16207
+ border-bottom: none;
16208
+ }
16209
+
16031
16210
  /*
16032
16211
  * Licensed Materials - Property of IBM
16033
16212
  * 5724-Q36
@@ -16164,7 +16343,7 @@ button.c4p--add-select__global-filter-toggle--open {
16164
16343
  right: 0;
16165
16344
  display: flex;
16166
16345
  align-items: center;
16167
- border-left: 1px solid var(--cds-layer-accent-01, #e0e0e0);
16346
+ border-left: 1px solid var(--cds-layer-active-02, #c6c6c6);
16168
16347
  }
16169
16348
 
16170
16349
  .c4p--datagrid__right-sticky-column-header {
@@ -16179,7 +16358,7 @@ button.c4p--add-select__global-filter-toggle--open {
16179
16358
  left: 0;
16180
16359
  display: flex;
16181
16360
  align-items: center;
16182
- border-right: 1px solid var(--cds-layer-accent-01, #e0e0e0);
16361
+ border-right: 1px solid var(--cds-layer-active-02, #c6c6c6);
16183
16362
  }
16184
16363
 
16185
16364
  .c4p--datagrid__left-sticky-column-header {
@@ -16191,7 +16370,7 @@ button.c4p--add-select__global-filter-toggle--open {
16191
16370
 
16192
16371
  .c4p--datagrid__left-sticky-column-cell.c4p--datagrid__left-sticky-column-cell--with-extra-select-column,
16193
16372
  .c4p--datagrid__left-sticky-column-header.c4p--datagrid__left-sticky-column-header--with-extra-select-column {
16194
- left: 2.5rem;
16373
+ left: 3rem;
16195
16374
  }
16196
16375
 
16197
16376
  .c4p--datagrid__sticky-noShadow {
@@ -16519,8 +16698,8 @@ button.c4p--add-select__global-filter-toggle--open {
16519
16698
  * US Government Users Restricted Rights - Use, duplication or disclosure
16520
16699
  * restricted by GSA ADP Schedule Contract with IBM Corp.
16521
16700
  */
16522
- th.c4p--datagrid__select-all-toggle-on,
16523
- td.c4p--datagrid__select-all-toggle-on {
16701
+ .c4p--datagrid__grid-container th.c4p--datagrid__select-all-toggle-on,
16702
+ .c4p--datagrid__grid-container td.c4p--datagrid__select-all-toggle-on {
16524
16703
  /* stylelint-disable-next-line declaration-no-important */
16525
16704
  width: 4.5rem !important;
16526
16705
  /* stylelint-disable-next-line declaration-no-important */