@carbon/ibm-products 2.68.0 → 2.69.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (146) hide show
  1. package/css/carbon.css +382 -74
  2. package/css/carbon.css.map +1 -1
  3. package/css/index-full-carbon.css +524 -116
  4. package/css/index-full-carbon.css.map +1 -1
  5. package/css/index-full-carbon.min.css +1 -1
  6. package/css/index-full-carbon.min.css.map +1 -1
  7. package/css/index-without-carbon-released-only.css +126 -42
  8. package/css/index-without-carbon-released-only.css.map +1 -1
  9. package/css/index-without-carbon-released-only.min.css +1 -1
  10. package/css/index-without-carbon-released-only.min.css.map +1 -1
  11. package/css/index-without-carbon.css +142 -42
  12. package/css/index-without-carbon.css.map +1 -1
  13. package/css/index-without-carbon.min.css +1 -1
  14. package/css/index-without-carbon.min.css.map +1 -1
  15. package/css/index.css +185 -50
  16. package/css/index.css.map +1 -1
  17. package/css/index.min.css +1 -1
  18. package/css/index.min.css.map +1 -1
  19. package/es/_virtual/_commonjsHelpers.js +3 -1
  20. package/es/_virtual/index2.js +6 -2
  21. package/es/_virtual/index3.js +10 -0
  22. package/es/components/AddSelect/AddSelectColumn.js +41 -18
  23. package/es/components/AddSelect/AddSelectSort.js +15 -16
  24. package/es/components/AddSelect/types/index.d.ts +1 -1
  25. package/es/components/Card/Card.d.ts +2 -2
  26. package/es/components/Card/Card.js +7 -4
  27. package/es/components/Coachmark/Coachmark.d.ts +43 -0
  28. package/es/components/Coachmark/Coachmark.js +49 -33
  29. package/es/components/Coachmark/CoachmarkOverlay.js +6 -0
  30. package/es/components/Coachmark/index.d.ts +1 -0
  31. package/es/components/CoachmarkBeacon/CoachmarkBeacon.d.ts +11 -0
  32. package/es/components/CoachmarkBeacon/CoachmarkBeacon.js +19 -11
  33. package/es/components/CoachmarkButton/CoachmarkButton.js +7 -0
  34. package/es/components/CoachmarkOverlayElement/CoachmarkOverlayElement.js +6 -0
  35. package/es/components/CoachmarkOverlayElements/CoachmarkOverlayElements.js +7 -0
  36. package/es/components/Datagrid/Datagrid/DatagridContent.js +7 -5
  37. package/es/components/Datagrid/Datagrid/DatagridRow.d.ts +1 -1
  38. package/es/components/Datagrid/Datagrid/DatagridRow.js +4 -3
  39. package/es/components/Datagrid/Datagrid/DatagridToolbar.d.ts +1 -1
  40. package/es/components/Datagrid/Datagrid/DatagridToolbar.js +8 -7
  41. package/es/components/Datagrid/Datagrid/addons/InlineEdit/handleGridKeyPress.d.ts +2 -1
  42. package/es/components/Datagrid/Datagrid/addons/InlineEdit/handleGridKeyPress.js +4 -3
  43. package/es/components/Datagrid/Datagrid/addons/RowSize/RowSizeDropdown.js +4 -3
  44. package/es/components/Datagrid/useNestedRowExpander.js +4 -2
  45. package/es/components/Datagrid/useOnRowClick.d.ts +1 -1
  46. package/es/components/Datagrid/useOnRowClick.js +6 -4
  47. package/es/components/Datagrid/useRowExpander.js +4 -2
  48. package/es/components/Datagrid/useSelectRows.d.ts +1 -1
  49. package/es/components/Datagrid/useSelectRows.js +4 -3
  50. package/es/components/Datagrid/useSortableColumns.d.ts +1 -1
  51. package/es/components/Datagrid/useSortableColumns.js +6 -5
  52. package/es/components/EditInPlace/EditInPlace.d.ts +1 -1
  53. package/es/components/EditInPlace/EditInPlace.js +4 -3
  54. package/es/components/EmptyStates/EmptyStateContent.d.ts +30 -1
  55. package/es/components/EmptyStates/EmptyStateContent.js +2 -2
  56. package/es/components/ExportModal/ExportModal.js +7 -5
  57. package/es/components/FeatureFlags/index.d.ts +31 -12
  58. package/es/components/FeatureFlags/index.js +46 -15
  59. package/es/components/InterstitialScreen/InterstitialScreenBody.js +3 -2
  60. package/es/components/InterstitialScreen/InterstitialScreenFooter.js +5 -2
  61. package/es/components/InterstitialScreen/InterstitialScreenHeader.js +3 -1
  62. package/es/components/ProductiveCard/ProductiveCard.d.ts +1 -1
  63. package/es/components/ScrollGradient/ScrollGradient.js +9 -7
  64. package/es/components/SidePanel/SidePanel.js +74 -0
  65. package/es/components/SidePanel/constants.d.ts +14 -8
  66. package/es/components/SidePanel/constants.js +1 -1
  67. package/es/components/SidePanel/resizer/Resizer.d.ts +21 -0
  68. package/es/components/SidePanel/resizer/Resizer.js +271 -0
  69. package/es/components/TruncatedList/TruncatedList.d.ts +1 -1
  70. package/es/components/TruncatedList/TruncatedList.js +4 -3
  71. package/es/feature-flags.js +5 -1
  72. package/es/index.js +1 -0
  73. package/es/node_modules/@carbon/{icons-react/node_modules/@carbon/icon-helpers → icon-helpers}/es/index.js +3 -3
  74. package/es/node_modules/@carbon/icons-react/es/Icon.js +1 -1
  75. package/es/node_modules/@carbon/icons-react/es/generated/bucket-10.js +816 -808
  76. package/es/node_modules/@carbon/icons-react/es/generated/bucket-3.js +615 -637
  77. package/es/node_modules/lodash.debounce/index.js +367 -0
  78. package/es/node_modules/prop-types/index.js +1 -1
  79. package/es/settings.js +1 -4
  80. package/lib/_virtual/_commonjsHelpers.js +3 -0
  81. package/lib/_virtual/index2.js +8 -2
  82. package/lib/_virtual/index3.js +12 -0
  83. package/lib/components/AddSelect/AddSelectColumn.js +40 -17
  84. package/lib/components/AddSelect/AddSelectSort.js +13 -14
  85. package/lib/components/AddSelect/types/index.d.ts +1 -1
  86. package/lib/components/Card/Card.d.ts +2 -2
  87. package/lib/components/Card/Card.js +7 -4
  88. package/lib/components/Coachmark/Coachmark.d.ts +43 -0
  89. package/lib/components/Coachmark/Coachmark.js +50 -32
  90. package/lib/components/Coachmark/CoachmarkOverlay.js +6 -0
  91. package/lib/components/Coachmark/index.d.ts +1 -0
  92. package/lib/components/CoachmarkBeacon/CoachmarkBeacon.d.ts +11 -0
  93. package/lib/components/CoachmarkBeacon/CoachmarkBeacon.js +19 -11
  94. package/lib/components/CoachmarkButton/CoachmarkButton.js +7 -0
  95. package/lib/components/CoachmarkOverlayElement/CoachmarkOverlayElement.js +6 -0
  96. package/lib/components/CoachmarkOverlayElements/CoachmarkOverlayElements.js +7 -0
  97. package/lib/components/Datagrid/Datagrid/DatagridContent.js +5 -3
  98. package/lib/components/Datagrid/Datagrid/DatagridRow.d.ts +1 -1
  99. package/lib/components/Datagrid/Datagrid/DatagridRow.js +2 -1
  100. package/lib/components/Datagrid/Datagrid/DatagridToolbar.d.ts +1 -1
  101. package/lib/components/Datagrid/Datagrid/DatagridToolbar.js +6 -5
  102. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/handleGridKeyPress.d.ts +2 -1
  103. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/handleGridKeyPress.js +3 -2
  104. package/lib/components/Datagrid/Datagrid/addons/RowSize/RowSizeDropdown.js +2 -1
  105. package/lib/components/Datagrid/useNestedRowExpander.js +3 -1
  106. package/lib/components/Datagrid/useOnRowClick.d.ts +1 -1
  107. package/lib/components/Datagrid/useOnRowClick.js +5 -3
  108. package/lib/components/Datagrid/useRowExpander.js +3 -1
  109. package/lib/components/Datagrid/useSelectRows.d.ts +1 -1
  110. package/lib/components/Datagrid/useSelectRows.js +2 -1
  111. package/lib/components/Datagrid/useSortableColumns.d.ts +1 -1
  112. package/lib/components/Datagrid/useSortableColumns.js +4 -3
  113. package/lib/components/EditInPlace/EditInPlace.d.ts +1 -1
  114. package/lib/components/EditInPlace/EditInPlace.js +2 -1
  115. package/lib/components/EmptyStates/EmptyStateContent.d.ts +30 -1
  116. package/lib/components/EmptyStates/EmptyStateContent.js +2 -2
  117. package/lib/components/ExportModal/ExportModal.js +5 -3
  118. package/lib/components/FeatureFlags/index.d.ts +31 -12
  119. package/lib/components/FeatureFlags/index.js +46 -15
  120. package/lib/components/InterstitialScreen/InterstitialScreenBody.js +3 -2
  121. package/lib/components/InterstitialScreen/InterstitialScreenFooter.js +5 -2
  122. package/lib/components/InterstitialScreen/InterstitialScreenHeader.js +3 -1
  123. package/lib/components/ProductiveCard/ProductiveCard.d.ts +1 -1
  124. package/lib/components/ScrollGradient/ScrollGradient.js +8 -6
  125. package/lib/components/SidePanel/SidePanel.js +74 -0
  126. package/lib/components/SidePanel/constants.d.ts +14 -8
  127. package/lib/components/SidePanel/constants.js +1 -1
  128. package/lib/components/SidePanel/resizer/Resizer.d.ts +21 -0
  129. package/lib/components/SidePanel/resizer/Resizer.js +277 -0
  130. package/lib/components/TruncatedList/TruncatedList.d.ts +1 -1
  131. package/lib/components/TruncatedList/TruncatedList.js +2 -1
  132. package/lib/feature-flags.js +5 -1
  133. package/lib/index.js +1 -0
  134. package/lib/node_modules/@carbon/{icons-react/node_modules/@carbon/icon-helpers → icon-helpers}/es/index.js +3 -3
  135. package/lib/node_modules/@carbon/icons-react/es/Icon.js +1 -1
  136. package/lib/node_modules/@carbon/icons-react/es/generated/bucket-10.js +839 -831
  137. package/lib/node_modules/@carbon/icons-react/es/generated/bucket-3.js +621 -643
  138. package/lib/node_modules/lodash.debounce/index.js +369 -0
  139. package/lib/node_modules/prop-types/index.js +1 -1
  140. package/lib/settings.js +0 -4
  141. package/package.json +15 -15
  142. package/scss/components/AddSelect/_add-select.scss +12 -13
  143. package/scss/components/SidePanel/_side-panel-variables.scss +1 -5
  144. package/scss/components/SidePanel/_side-panel.scss +129 -12
  145. package/scss/global/decorators/_side-panel-decorator.scss +36 -8
  146. package/telemetry.yml +17 -0
package/css/carbon.css CHANGED
@@ -2443,6 +2443,7 @@ em {
2443
2443
  :root {
2444
2444
  --cds-layer: var(--cds-layer-01, #f4f4f4);
2445
2445
  --cds-layer-active: var(--cds-layer-active-01, #c6c6c6);
2446
+ --cds-layer-background: var(--cds-layer-background-01, #ffffff);
2446
2447
  --cds-layer-hover: var(--cds-layer-hover-01, #e8e8e8);
2447
2448
  --cds-layer-selected: var(--cds-layer-selected-01, #e0e0e0);
2448
2449
  --cds-layer-selected-hover: var(--cds-layer-selected-hover-01, #d1d1d1);
@@ -2460,6 +2461,7 @@ em {
2460
2461
  .cds--layer-one {
2461
2462
  --cds-layer: var(--cds-layer-01, #f4f4f4);
2462
2463
  --cds-layer-active: var(--cds-layer-active-01, #c6c6c6);
2464
+ --cds-layer-background: var(--cds-layer-background-01, #ffffff);
2463
2465
  --cds-layer-hover: var(--cds-layer-hover-01, #e8e8e8);
2464
2466
  --cds-layer-selected: var(--cds-layer-selected-01, #e0e0e0);
2465
2467
  --cds-layer-selected-hover: var(--cds-layer-selected-hover-01, #d1d1d1);
@@ -2477,6 +2479,7 @@ em {
2477
2479
  .cds--layer-two {
2478
2480
  --cds-layer: var(--cds-layer-02, #ffffff);
2479
2481
  --cds-layer-active: var(--cds-layer-active-02, #c6c6c6);
2482
+ --cds-layer-background: var(--cds-layer-background-02, #f4f4f4);
2480
2483
  --cds-layer-hover: var(--cds-layer-hover-02, #e8e8e8);
2481
2484
  --cds-layer-selected: var(--cds-layer-selected-02, #e0e0e0);
2482
2485
  --cds-layer-selected-hover: var(--cds-layer-selected-hover-02, #d1d1d1);
@@ -2494,6 +2497,7 @@ em {
2494
2497
  .cds--layer-three {
2495
2498
  --cds-layer: var(--cds-layer-03, #f4f4f4);
2496
2499
  --cds-layer-active: var(--cds-layer-active-03, #c6c6c6);
2500
+ --cds-layer-background: var(--cds-layer-background-03, #ffffff);
2497
2501
  --cds-layer-hover: var(--cds-layer-hover-03, #e8e8e8);
2498
2502
  --cds-layer-selected: var(--cds-layer-selected-03, #e0e0e0);
2499
2503
  --cds-layer-selected-hover: var(--cds-layer-selected-hover-03, #d1d1d1);
@@ -2508,6 +2512,18 @@ em {
2508
2512
  --cds-border-tile: var(--cds-border-tile-03, #c6c6c6);
2509
2513
  }
2510
2514
 
2515
+ .cds--layer-one.cds--layer__with-background {
2516
+ background-color: var(--cds-layer-background);
2517
+ }
2518
+
2519
+ .cds--layer-two.cds--layer__with-background {
2520
+ background-color: var(--cds-layer-background);
2521
+ }
2522
+
2523
+ .cds--layer-three.cds--layer__with-background {
2524
+ background-color: var(--cds-layer-background);
2525
+ }
2526
+
2511
2527
  .cds--layout--size-xs {
2512
2528
  --cds-layout-size-height-context: var(--cds-layout-size-height-xs, 1.5rem);
2513
2529
  --cds-layout-size-height: var(--cds-layout-size-height-context);
@@ -2757,6 +2773,9 @@ em {
2757
2773
  --cds-layer-active-01: #c6c6c6;
2758
2774
  --cds-layer-active-02: #c6c6c6;
2759
2775
  --cds-layer-active-03: #c6c6c6;
2776
+ --cds-layer-background-01: #ffffff;
2777
+ --cds-layer-background-02: #f4f4f4;
2778
+ --cds-layer-background-03: #ffffff;
2760
2779
  --cds-layer-hover-01: #e8e8e8;
2761
2780
  --cds-layer-hover-02: #e8e8e8;
2762
2781
  --cds-layer-hover-03: #e8e8e8;
@@ -2803,6 +2822,7 @@ em {
2803
2822
  --cds-toggle-off: #8d8d8d;
2804
2823
  --cds-layer: var(--cds-layer-01, #f4f4f4);
2805
2824
  --cds-layer-active: var(--cds-layer-active-01, #c6c6c6);
2825
+ --cds-layer-background: var(--cds-layer-background-01, #ffffff);
2806
2826
  --cds-layer-hover: var(--cds-layer-hover-01, #e8e8e8);
2807
2827
  --cds-layer-selected: var(--cds-layer-selected-01, #e0e0e0);
2808
2828
  --cds-layer-selected-hover: var(--cds-layer-selected-hover-01, #d1d1d1);
@@ -2889,6 +2909,9 @@ em {
2889
2909
  --cds-status-blue: #0043ce;
2890
2910
  --cds-status-purple: #8a3ffc;
2891
2911
  --cds-status-gray: #6f6f6f;
2912
+ --cds-content-switcher-background: #e0e0e0;
2913
+ --cds-content-switcher-background-hover: #d1d1d1;
2914
+ --cds-content-switcher-selected: #ffffff;
2892
2915
  }
2893
2916
 
2894
2917
  .cds--g10 {
@@ -2989,6 +3012,9 @@ em {
2989
3012
  --cds-layer-active-01: #c6c6c6;
2990
3013
  --cds-layer-active-02: #c6c6c6;
2991
3014
  --cds-layer-active-03: #c6c6c6;
3015
+ --cds-layer-background-01: #f4f4f4;
3016
+ --cds-layer-background-02: #ffffff;
3017
+ --cds-layer-background-03: #f4f4f4;
2992
3018
  --cds-layer-hover-01: #e8e8e8;
2993
3019
  --cds-layer-hover-02: #e8e8e8;
2994
3020
  --cds-layer-hover-03: #e8e8e8;
@@ -3035,6 +3061,7 @@ em {
3035
3061
  --cds-toggle-off: #8d8d8d;
3036
3062
  --cds-layer: var(--cds-layer-01, #f4f4f4);
3037
3063
  --cds-layer-active: var(--cds-layer-active-01, #c6c6c6);
3064
+ --cds-layer-background: var(--cds-layer-background-01, #ffffff);
3038
3065
  --cds-layer-hover: var(--cds-layer-hover-01, #e8e8e8);
3039
3066
  --cds-layer-selected: var(--cds-layer-selected-01, #e0e0e0);
3040
3067
  --cds-layer-selected-hover: var(--cds-layer-selected-hover-01, #d1d1d1);
@@ -3121,6 +3148,9 @@ em {
3121
3148
  --cds-status-blue: #0043ce;
3122
3149
  --cds-status-purple: #8a3ffc;
3123
3150
  --cds-status-gray: #6f6f6f;
3151
+ --cds-content-switcher-background: #e0e0e0;
3152
+ --cds-content-switcher-background-hover: #d1d1d1;
3153
+ --cds-content-switcher-selected: #ffffff;
3124
3154
  }
3125
3155
 
3126
3156
  .cds--g90 {
@@ -3221,6 +3251,9 @@ em {
3221
3251
  --cds-layer-active-01: #6f6f6f;
3222
3252
  --cds-layer-active-02: #8d8d8d;
3223
3253
  --cds-layer-active-03: #393939;
3254
+ --cds-layer-background-01: #262626;
3255
+ --cds-layer-background-02: #393939;
3256
+ --cds-layer-background-03: #525252;
3224
3257
  --cds-layer-hover-01: #474747;
3225
3258
  --cds-layer-hover-02: #636363;
3226
3259
  --cds-layer-hover-03: #5e5e5e;
@@ -3267,6 +3300,7 @@ em {
3267
3300
  --cds-toggle-off: #8d8d8d;
3268
3301
  --cds-layer: var(--cds-layer-01, #f4f4f4);
3269
3302
  --cds-layer-active: var(--cds-layer-active-01, #c6c6c6);
3303
+ --cds-layer-background: var(--cds-layer-background-01, #ffffff);
3270
3304
  --cds-layer-hover: var(--cds-layer-hover-01, #e8e8e8);
3271
3305
  --cds-layer-selected: var(--cds-layer-selected-01, #e0e0e0);
3272
3306
  --cds-layer-selected-hover: var(--cds-layer-selected-hover-01, #d1d1d1);
@@ -3352,6 +3386,9 @@ em {
3352
3386
  --cds-status-blue: #4589ff;
3353
3387
  --cds-status-purple: #a56eff;
3354
3388
  --cds-status-gray: #8d8d8d;
3389
+ --cds-content-switcher-background: rgba(0, 0, 0, 0);
3390
+ --cds-content-switcher-background-hover: rgba(141, 141, 141, 0.12);
3391
+ --cds-content-switcher-selected: rgba(141, 141, 141, 0.24);
3355
3392
  }
3356
3393
 
3357
3394
  .cds--g100 {
@@ -3452,6 +3489,9 @@ em {
3452
3489
  --cds-layer-active-01: #525252;
3453
3490
  --cds-layer-active-02: #6f6f6f;
3454
3491
  --cds-layer-active-03: #8d8d8d;
3492
+ --cds-layer-background-01: #161616;
3493
+ --cds-layer-background-02: #262626;
3494
+ --cds-layer-background-03: #393939;
3455
3495
  --cds-layer-hover-01: #333333;
3456
3496
  --cds-layer-hover-02: #474747;
3457
3497
  --cds-layer-hover-03: #636363;
@@ -3498,6 +3538,7 @@ em {
3498
3538
  --cds-toggle-off: #6f6f6f;
3499
3539
  --cds-layer: var(--cds-layer-01, #f4f4f4);
3500
3540
  --cds-layer-active: var(--cds-layer-active-01, #c6c6c6);
3541
+ --cds-layer-background: var(--cds-layer-background-01, #ffffff);
3501
3542
  --cds-layer-hover: var(--cds-layer-hover-01, #e8e8e8);
3502
3543
  --cds-layer-selected: var(--cds-layer-selected-01, #e0e0e0);
3503
3544
  --cds-layer-selected-hover: var(--cds-layer-selected-hover-01, #d1d1d1);
@@ -3583,6 +3624,9 @@ em {
3583
3624
  --cds-status-blue: #4589ff;
3584
3625
  --cds-status-purple: #a56eff;
3585
3626
  --cds-status-gray: #8d8d8d;
3627
+ --cds-content-switcher-background: rgba(0, 0, 0, 0);
3628
+ --cds-content-switcher-background-hover: rgba(141, 141, 141, 0.12);
3629
+ --cds-content-switcher-selected: rgba(141, 141, 141, 0.24);
3586
3630
  }
3587
3631
 
3588
3632
  .cds--accordion {
@@ -4490,6 +4534,7 @@ li.cds--accordion__item--disabled:last-of-type {
4490
4534
  letter-spacing: var(--cds-body-01-letter-spacing, 0.16px);
4491
4535
  padding: var(--cds-tooltip-padding-block, 1rem) var(--cds-tooltip-padding-inline, 1rem);
4492
4536
  max-inline-size: 18rem;
4537
+ overflow-wrap: break-word;
4493
4538
  }
4494
4539
 
4495
4540
  .cds--icon-tooltip {
@@ -6475,6 +6520,11 @@ a.cds--overflow-menu-options__btn::before {
6475
6520
  margin-inline-end: 0.25rem;
6476
6521
  }
6477
6522
 
6523
+ .cds--breadcrumb--sm .cds--breadcrumb-item .cds--link {
6524
+ justify-content: center;
6525
+ min-inline-size: 0.75rem;
6526
+ }
6527
+
6478
6528
  .cds--breadcrumb-item .cds--link:visited {
6479
6529
  color: var(--cds-link-primary, #0f62fe);
6480
6530
  }
@@ -8560,6 +8610,12 @@ fieldset[disabled] .cds--form__helper-text {
8560
8610
  .cds--btn.cds--text-input--password__visibility__toggle.cds--tooltip__trigger:focus svg {
8561
8611
  fill: var(--cds-icon-primary, #161616);
8562
8612
  }
8613
+ @media screen and (-ms-high-contrast: active), (forced-colors: active) {
8614
+ .cds--btn.cds--text-input--password__visibility__toggle.cds--tooltip__trigger:hover svg,
8615
+ .cds--btn.cds--text-input--password__visibility__toggle.cds--tooltip__trigger:focus svg {
8616
+ fill: ButtonText;
8617
+ }
8618
+ }
8563
8619
 
8564
8620
  .cds--text-input--invalid,
8565
8621
  .cds--text-input--warning {
@@ -11043,8 +11099,15 @@ fieldset[disabled] .cds--form__helper-text {
11043
11099
  --cds-layout-density-padding-inline-local: clamp(var(--cds-layout-density-padding-inline-min), var(--cds-layout-density-padding-inline, var(--cds-layout-density-padding-inline-normal)), var(--cds-layout-density-padding-inline-max));
11044
11100
  display: flex;
11045
11101
  justify-content: space-evenly;
11102
+ border-radius: 0.25rem;
11046
11103
  block-size: var(--cds-layout-size-height-local);
11047
11104
  inline-size: 100%;
11105
+ outline: 0.0625rem solid var(--cds-border-inverse, #161616);
11106
+ outline-offset: -0.0625rem;
11107
+ }
11108
+
11109
+ .cds--content-switcher:has(.cds--content-switcher-btn:disabled) {
11110
+ outline-color: var(--cds-border-disabled, #c6c6c6);
11048
11111
  }
11049
11112
 
11050
11113
  .cds--content-switcher-btn {
@@ -11066,7 +11129,6 @@ fieldset[disabled] .cds--form__helper-text {
11066
11129
  color: var(--cds-text-secondary, #525252);
11067
11130
  text-align: start;
11068
11131
  text-decoration: none;
11069
- transition: all 150ms cubic-bezier(0.2, 0, 0.38, 0.9);
11070
11132
  white-space: nowrap;
11071
11133
  }
11072
11134
  .cds--content-switcher-btn html {
@@ -11088,6 +11150,7 @@ fieldset[disabled] .cds--form__helper-text {
11088
11150
  .cds--content-switcher-btn::after {
11089
11151
  position: absolute;
11090
11152
  display: block;
11153
+ border-radius: 0.25rem;
11091
11154
  background-color: var(--cds-layer-selected-inverse, #161616);
11092
11155
  block-size: 100%;
11093
11156
  content: "";
@@ -11096,23 +11159,16 @@ fieldset[disabled] .cds--form__helper-text {
11096
11159
  inset-inline-start: 0;
11097
11160
  transform: scaleY(0);
11098
11161
  transform-origin: bottom;
11099
- transition: all 150ms cubic-bezier(0.2, 0, 0.38, 0.9);
11100
- }
11101
- @media (prefers-reduced-motion: reduce) {
11102
- .cds--content-switcher-btn::after {
11103
- transition: none;
11104
- }
11105
11162
  }
11106
11163
  .cds--content-switcher-btn:disabled::after {
11107
11164
  display: none;
11108
11165
  }
11109
11166
  .cds--content-switcher-btn:focus {
11110
- z-index: 3;
11111
- border-color: var(--cds-focus, #0f62fe);
11112
- box-shadow: inset 0 0 0 2px var(--cds-focus, #0f62fe), inset 0 0 0 3px var(--cds-focus-inset, #ffffff);
11167
+ border: 0;
11113
11168
  }
11114
11169
  .cds--content-switcher-btn:focus::after {
11115
- clip-path: inset(3px 3px 3px 3px);
11170
+ border-radius: 0.25rem;
11171
+ box-shadow: inset 0 0 0 2px var(--cds-focus, #0f62fe), inset 0 0 0 3px var(--cds-focus-inset, #ffffff);
11116
11172
  }
11117
11173
  .cds--content-switcher-btn:hover {
11118
11174
  color: var(--cds-text-primary, #161616);
@@ -11131,8 +11187,25 @@ fieldset[disabled] .cds--form__helper-text {
11131
11187
  .cds--content-switcher-btn:disabled:hover {
11132
11188
  cursor: not-allowed;
11133
11189
  }
11134
- .cds--content-switcher-btn:disabled:first-child, .cds--content-switcher-btn:disabled:last-child {
11135
- border-color: var(--cds-border-disabled, #c6c6c6);
11190
+
11191
+ .cds--content-switcher-btn:not(.cds--content-switcher--selected):focus::before {
11192
+ display: block;
11193
+ border-radius: 0.25rem;
11194
+ block-size: 100%;
11195
+ box-shadow: inset 0 0 0 0.125rem var(--cds-focus, #0f62fe);
11196
+ content: "";
11197
+ inline-size: 100%;
11198
+ }
11199
+ .cds--content-switcher-btn:not(.cds--content-switcher--selected):focus::after {
11200
+ background-color: var(--cds-focus-inset, #ffffff);
11201
+ transform: scaleY(1);
11202
+ }
11203
+ .cds--content-switcher-btn:not(.cds--content-switcher--selected):focus:hover::after {
11204
+ border-radius: 0;
11205
+ background-color: var(--cds-layer-hover);
11206
+ border-block-end: 0.0625rem solid var(--cds-border-inverse, #161616);
11207
+ border-block-start: 0.0625rem solid var(--cds-border-inverse, #161616);
11208
+ box-shadow: none;
11136
11209
  }
11137
11210
 
11138
11211
  .cds--content-switcher:not(.cds--content-switcher--icon-only) .cds--content-switcher-btn {
@@ -11143,22 +11216,20 @@ fieldset[disabled] .cds--form__helper-text {
11143
11216
 
11144
11217
  .cds--content-switcher:not(.cds--content-switcher--icon-only) .cds--content-switcher-btn:first-child {
11145
11218
  border-end-start-radius: 0.25rem;
11146
- border-inline-start: 0.0625rem solid var(--cds-border-inverse, #161616);
11147
11219
  border-start-start-radius: 0.25rem;
11220
+ box-shadow: inset 0.0625rem 0 0 0 var(--cds-border-inverse, #161616);
11148
11221
  }
11149
11222
  .cds--content-switcher:not(.cds--content-switcher--icon-only) .cds--content-switcher-btn:first-child:disabled {
11150
- border-color: var(--cds-border-disabled, #c6c6c6);
11151
- color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
11223
+ box-shadow: none;
11152
11224
  }
11153
11225
 
11154
11226
  .cds--content-switcher:not(.cds--content-switcher--icon-only) .cds--content-switcher-btn:last-child {
11155
11227
  border-end-end-radius: 0.25rem;
11156
- border-inline-end: 0.0625rem solid var(--cds-border-inverse, #161616);
11157
11228
  border-start-end-radius: 0.25rem;
11229
+ box-shadow: inset -0.0625rem 0 0 0 var(--cds-border-inverse, #161616);
11158
11230
  }
11159
11231
  .cds--content-switcher:not(.cds--content-switcher--icon-only) .cds--content-switcher-btn:last-child:disabled {
11160
- border-color: var(--cds-border-disabled, #c6c6c6);
11161
- color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
11232
+ box-shadow: none;
11162
11233
  }
11163
11234
 
11164
11235
  .cds--content-switcher .cds--content-switcher-btn.cds--content-switcher--selected,
@@ -11166,6 +11237,11 @@ fieldset[disabled] .cds--form__helper-text {
11166
11237
  .cds--content-switcher .cds--content-switcher-btn.cds--content-switcher--selected:last-child {
11167
11238
  border: 0;
11168
11239
  }
11240
+ .cds--content-switcher .cds--content-switcher-btn.cds--content-switcher--selected:disabled::before,
11241
+ .cds--content-switcher .cds--content-switcher-btn.cds--content-switcher--selected:first-child:disabled::before,
11242
+ .cds--content-switcher .cds--content-switcher-btn.cds--content-switcher--selected:last-child:disabled::before {
11243
+ display: none;
11244
+ }
11169
11245
 
11170
11246
  .cds--content-switcher-btn::before {
11171
11247
  position: absolute;
@@ -11179,7 +11255,7 @@ fieldset[disabled] .cds--form__helper-text {
11179
11255
  }
11180
11256
 
11181
11257
  .cds--content-switcher:not(.cds--content-switcher--icon-only) .cds--content-switcher-btn:first-of-type::before {
11182
- display: none;
11258
+ background-color: transparent;
11183
11259
  }
11184
11260
 
11185
11261
  .cds--content-switcher-btn:focus::before,
@@ -11203,7 +11279,6 @@ fieldset[disabled] .cds--form__helper-text {
11203
11279
 
11204
11280
  .cds--content-switcher__icon {
11205
11281
  fill: var(--cds-icon-secondary, #525252);
11206
- transition: fill 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
11207
11282
  }
11208
11283
 
11209
11284
  .cds--content-switcher__icon + span {
@@ -11223,13 +11298,36 @@ fieldset[disabled] .cds--form__helper-text {
11223
11298
  fill: var(--cds-icon-primary, #161616);
11224
11299
  }
11225
11300
 
11301
+ .cds--content-switcher-btn:focus:has(+ .cds--content-switcher-btn:not(.cds--content-switcher--selected):hover)::before,
11302
+ .cds--content-switcher-btn:not(.cds--content-switcher--selected):hover + .cds--content-switcher-btn:focus::before,
11303
+ .cds--content-switcher-btn:hover + .cds--content-switcher-btn.cds--content-switcher--selected::before,
11304
+ .cds--content-switcher-btn.cds--content-switcher--selected:has(+ .cds--content-switcher-btn:hover)::before {
11305
+ z-index: 0;
11306
+ border-radius: 0;
11307
+ block-size: 100%;
11308
+ border-block-end: 0.0625rem solid var(--cds-border-inverse, #161616);
11309
+ border-block-start: 0.0625rem solid var(--cds-border-inverse, #161616);
11310
+ box-shadow: inset 0 0 0 0.0625rem var(--cds-layer-hover);
11311
+ content: "";
11312
+ inline-size: 100%;
11313
+ }
11314
+ .cds--content-switcher-btn:focus:has(+ .cds--content-switcher-btn:not(.cds--content-switcher--selected):hover):not(.cds--content-switcher--selected)::after,
11315
+ .cds--content-switcher-btn:not(.cds--content-switcher--selected):hover + .cds--content-switcher-btn:focus:not(.cds--content-switcher--selected)::after,
11316
+ .cds--content-switcher-btn:hover + .cds--content-switcher-btn.cds--content-switcher--selected:not(.cds--content-switcher--selected)::after,
11317
+ .cds--content-switcher-btn.cds--content-switcher--selected:has(+ .cds--content-switcher-btn:hover):not(.cds--content-switcher--selected)::after {
11318
+ background-color: var(--cds-focus-inset, #ffffff);
11319
+ transform: scaleY(1);
11320
+ }
11321
+
11226
11322
  .cds--content-switcher-btn.cds--content-switcher--selected {
11227
11323
  z-index: 3;
11228
- background-color: var(--cds-layer-selected-inverse, #161616);
11229
11324
  color: var(--cds-text-inverse, #ffffff);
11230
11325
  }
11326
+ .cds--content-switcher-btn.cds--content-switcher--selected:hover {
11327
+ background-color: transparent;
11328
+ }
11231
11329
  .cds--content-switcher-btn.cds--content-switcher--selected:disabled {
11232
- background-color: var(--cds-layer-selected-disabled, #8d8d8d);
11330
+ background-color: var(--cds-button-disabled, #c6c6c6);
11233
11331
  color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
11234
11332
  }
11235
11333
  .cds--content-switcher-btn.cds--content-switcher--selected::after {
@@ -11249,28 +11347,37 @@ fieldset[disabled] .cds--form__helper-text {
11249
11347
 
11250
11348
  .cds--content-switcher--icon-only {
11251
11349
  justify-content: flex-start;
11350
+ inline-size: fit-content;
11351
+ }
11352
+
11353
+ .cds--content-switcher--icon-only .cds--content-switcher-btn {
11354
+ align-items: center;
11355
+ padding: 0;
11356
+ transition: none;
11357
+ }
11358
+ .cds--content-switcher--icon-only .cds--content-switcher-btn:focus {
11359
+ box-shadow: none;
11360
+ }
11361
+
11362
+ .cds--content-switcher--icon-only .cds--content-switcher-popover__wrapper:first-child .cds--content-switcher-btn:first-of-type::before {
11363
+ background-color: transparent;
11252
11364
  }
11253
11365
 
11254
11366
  .cds--content-switcher--icon-only .cds--content-switcher-popover__wrapper:first-child .cds--content-switcher-btn {
11255
11367
  border-end-start-radius: 0.25rem;
11256
- border-inline-start: 0.0625rem solid var(--cds-border-inverse, #161616);
11257
11368
  border-start-start-radius: 0.25rem;
11258
- }
11259
-
11260
- .cds--content-switcher--icon-only .cds--content-switcher-popover__wrapper:first-child .cds--content-switcher--selected[disabled],
11261
- .cds--content-switcher--icon-only .cds--content-switcher-popover__wrapper:last-child .cds--content-switcher--selected[disabled] {
11262
- border-color: var(--cds-layer-selected-disabled, #8d8d8d);
11369
+ box-shadow: inset 0.0625rem 0 0 0 var(--cds-border-inverse, #161616);
11263
11370
  }
11264
11371
 
11265
11372
  .cds--content-switcher--icon-only .cds--content-switcher-popover__wrapper:last-child .cds--content-switcher-btn {
11266
11373
  border-end-end-radius: 0.25rem;
11267
- border-inline-end: 0.0625rem solid var(--cds-border-inverse, #161616);
11268
11374
  border-start-end-radius: 0.25rem;
11375
+ box-shadow: inset -0.0625rem 0 0 0 var(--cds-border-inverse, #161616);
11269
11376
  }
11270
11377
 
11271
- .cds--content-switcher--icon-only .cds--content-switcher-popover__wrapper:last-child .cds--content-switcher-btn.cds--content-switcher--selected,
11272
- .cds--content-switcher--icon-only .cds--content-switcher-popover__wrapper:first-child .cds--content-switcher-btn.cds--content-switcher--selected {
11273
- border-color: var(--cds-background, #ffffff);
11378
+ .cds--content-switcher--icon-only .cds--content-switcher-popover__wrapper:first-child .cds--content-switcher-btn[disabled],
11379
+ .cds--content-switcher--icon-only .cds--content-switcher-popover__wrapper:last-child .cds--content-switcher-btn[disabled] {
11380
+ box-shadow: none;
11274
11381
  }
11275
11382
 
11276
11383
  .cds--content-switcher--lg .cds--content-switcher-btn {
@@ -11283,6 +11390,7 @@ fieldset[disabled] .cds--form__helper-text {
11283
11390
  }
11284
11391
 
11285
11392
  .cds--content-switcher--icon-only .cds--content-switcher-btn svg {
11393
+ z-index: 1;
11286
11394
  fill: var(--cds-icon-primary, #161616);
11287
11395
  }
11288
11396
 
@@ -11295,23 +11403,14 @@ fieldset[disabled] .cds--form__helper-text {
11295
11403
  block-size: 2rem;
11296
11404
  }
11297
11405
 
11298
- .cds--content-switcher--icon-only .cds--content-switcher-popover__wrapper:first-of-type .cds--content-switcher-btn::before {
11299
- display: none;
11300
- }
11301
-
11302
11406
  .cds--content-switcher-btn:focus::before,
11303
11407
  .cds--content-switcher-popover__wrapper:focus-within + .cds--content-switcher-popover__wrapper .cds--content-switcher-btn::before,
11304
- .cds--content-switcher-btn:hover::before,
11305
- .cds--content-switcher-popover__wrapper:not(.cds--content-switcher-popover--disabled):hover + .cds--content-switcher-popover__wrapper .cds--content-switcher-btn::before,
11408
+ .cds--content-switcher-popover__wrapper:not(.cds--content-switcher-popover--disabled):hover + .cds--content-switcher-popover__wrapper .cds--content-switcher-btn:not(.cds--content-switcher--selected):not(:focus)::before,
11306
11409
  .cds--content-switcher--selected::before,
11307
11410
  .cds--content-switcher-popover--selected + .cds--content-switcher-popover__wrapper .cds--content-switcher-btn::before {
11308
11411
  background-color: transparent;
11309
11412
  }
11310
11413
 
11311
- .cds--content-switcher--icon-only .cds--content-switcher-btn[disabled] {
11312
- border-color: var(--cds-border-inverse, #161616);
11313
- }
11314
-
11315
11414
  .cds--content-switcher--icon-only .cds--content-switcher-btn[disabled] svg {
11316
11415
  fill: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
11317
11416
  }
@@ -11325,6 +11424,190 @@ fieldset[disabled] .cds--form__helper-text {
11325
11424
  background-color: var(--cds-border-subtle);
11326
11425
  }
11327
11426
 
11427
+ .cds--content-switcher-popover__wrapper:has(+ .cds--content-switcher-popover__wrapper .cds--content-switcher-btn:not(.cds--content-switcher--selected):hover) .cds--content-switcher-btn:focus::before,
11428
+ .cds--content-switcher-popover__wrapper:not(.cds--content-switcher-popover--selected):hover + .cds--content-switcher-popover__wrapper .cds--content-switcher-btn:focus::before,
11429
+ .cds--content-switcher-popover__wrapper:hover + .cds--content-switcher-popover__wrapper .cds--content-switcher--selected::before,
11430
+ .cds--content-switcher-popover--selected:has(+ .cds--content-switcher-popover__wrapper .cds--content-switcher-btn:hover) .cds--content-switcher-btn::before {
11431
+ z-index: 0;
11432
+ border-radius: 0;
11433
+ block-size: 100%;
11434
+ border-block-end: 0.0625rem solid var(--cds-border-inverse, #161616);
11435
+ border-block-start: 0.0625rem solid var(--cds-border-inverse, #161616);
11436
+ box-shadow: inset 0 0 0 0.0625rem var(--cds-layer-hover);
11437
+ content: "";
11438
+ inline-size: 100%;
11439
+ }
11440
+ .cds--content-switcher-popover__wrapper:has(+ .cds--content-switcher-popover__wrapper .cds--content-switcher-btn:not(.cds--content-switcher--selected):hover) .cds--content-switcher-btn:focus:not(.cds--content-switcher--selected)::after,
11441
+ .cds--content-switcher-popover__wrapper:not(.cds--content-switcher-popover--selected):hover + .cds--content-switcher-popover__wrapper .cds--content-switcher-btn:focus:not(.cds--content-switcher--selected)::after,
11442
+ .cds--content-switcher-popover__wrapper:hover + .cds--content-switcher-popover__wrapper .cds--content-switcher--selected:not(.cds--content-switcher--selected)::after,
11443
+ .cds--content-switcher-popover--selected:has(+ .cds--content-switcher-popover__wrapper .cds--content-switcher-btn:hover) .cds--content-switcher-btn:not(.cds--content-switcher--selected)::after {
11444
+ background-color: var(--cds-focus-inset, #ffffff);
11445
+ transform: scaleY(1);
11446
+ }
11447
+
11448
+ .cds--content-switcher--low-contrast {
11449
+ background-color: var(--cds-content-switcher-background, #e0e0e0);
11450
+ outline-color: var(--cds-border-strong);
11451
+ }
11452
+
11453
+ .cds--content-switcher--low-contrast .cds--content-switcher-btn {
11454
+ border-color: var(--cds-border-strong);
11455
+ }
11456
+ .cds--content-switcher--low-contrast .cds--content-switcher-btn:hover, .cds--content-switcher--low-contrast .cds--content-switcher-btn:active {
11457
+ background-color: var(--cds-content-switcher-background-hover, #d1d1d1);
11458
+ }
11459
+ .cds--content-switcher--low-contrast .cds--content-switcher-btn::before {
11460
+ background-color: var(--cds-border-strong);
11461
+ }
11462
+ .cds--content-switcher--low-contrast .cds--content-switcher-btn::after {
11463
+ background-color: var(--cds-content-switcher-selected, #ffffff);
11464
+ }
11465
+ .cds--content-switcher--low-contrast .cds--content-switcher-btn:disabled {
11466
+ border-color: var(--cds-border-disabled, #c6c6c6);
11467
+ background-color: transparent;
11468
+ color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
11469
+ }
11470
+ .cds--content-switcher--low-contrast .cds--content-switcher-btn:disabled:hover {
11471
+ cursor: not-allowed;
11472
+ }
11473
+
11474
+ .cds--content-switcher--low-contrast .cds--content-switcher-btn:not(.cds--content-switcher--selected):focus::before {
11475
+ background: transparent;
11476
+ }
11477
+ .cds--content-switcher--low-contrast .cds--content-switcher-btn:not(.cds--content-switcher--selected):focus::after {
11478
+ background-color: var(--cds-content-switcher-background, #e0e0e0);
11479
+ box-shadow: inset 0 0 0 0.125rem var(--cds-focus, #0f62fe);
11480
+ }
11481
+ .cds--content-switcher--low-contrast .cds--content-switcher-btn:not(.cds--content-switcher--selected):focus:hover::after {
11482
+ border-color: var(--cds-border-strong);
11483
+ background-color: var(--cds-content-switcher-background-hover, #d1d1d1);
11484
+ box-shadow: none;
11485
+ }
11486
+
11487
+ .cds--content-switcher--low-contrast:not(.cds--content-switcher--icon-only) .cds--content-switcher-btn:first-child {
11488
+ box-shadow: inset 0.0625rem 0 0 0 var(--cds-border-strong);
11489
+ }
11490
+
11491
+ .cds--content-switcher--low-contrast:not(.cds--content-switcher--icon-only) .cds--content-switcher-btn:last-child {
11492
+ box-shadow: inset -0.0625rem 0 0 0 var(--cds-border-strong);
11493
+ }
11494
+
11495
+ .cds--content-switcher--low-contrast .cds--content-switcher-btn:focus:has(+ .cds--content-switcher-btn:not(.cds--content-switcher--selected):hover)::before,
11496
+ .cds--content-switcher--low-contrast .cds--content-switcher-btn:not(.cds--content-switcher--selected):hover + .cds--content-switcher-btn:focus::before,
11497
+ .cds--content-switcher--low-contrast .cds--content-switcher-btn:hover + .cds--content-switcher-btn.cds--content-switcher--selected::before,
11498
+ .cds--content-switcher--low-contrast .cds--content-switcher-btn.cds--content-switcher--selected:has(+ .cds--content-switcher-btn:hover)::before {
11499
+ border-color: var(--cds-border-strong);
11500
+ box-shadow: inset 0 0 0 0.0625rem var(--cds-content-switcher-background-hover, #d1d1d1);
11501
+ }
11502
+ .cds--content-switcher--low-contrast .cds--content-switcher-btn:focus:has(+ .cds--content-switcher-btn:not(.cds--content-switcher--selected):hover):not(.cds--content-switcher--selected)::after,
11503
+ .cds--content-switcher--low-contrast .cds--content-switcher-btn:not(.cds--content-switcher--selected):hover + .cds--content-switcher-btn:focus:not(.cds--content-switcher--selected)::after,
11504
+ .cds--content-switcher--low-contrast .cds--content-switcher-btn:hover + .cds--content-switcher-btn.cds--content-switcher--selected:not(.cds--content-switcher--selected)::after,
11505
+ .cds--content-switcher--low-contrast .cds--content-switcher-btn.cds--content-switcher--selected:has(+ .cds--content-switcher-btn:hover):not(.cds--content-switcher--selected)::after {
11506
+ background-color: var(--cds-content-switcher-background, #e0e0e0);
11507
+ }
11508
+
11509
+ .cds--content-switcher--low-contrast .cds--content-switcher-btn.cds--content-switcher--selected {
11510
+ font-size: var(--cds-heading-compact-01-font-size, 0.875rem);
11511
+ font-weight: var(--cds-heading-compact-01-font-weight, 600);
11512
+ line-height: var(--cds-heading-compact-01-line-height, 1.28572);
11513
+ letter-spacing: var(--cds-heading-compact-01-letter-spacing, 0.16px);
11514
+ color: var(--cds-text-primary, #161616);
11515
+ }
11516
+ .cds--content-switcher--low-contrast .cds--content-switcher-btn.cds--content-switcher--selected:hover {
11517
+ background-color: transparent;
11518
+ }
11519
+ .cds--content-switcher--low-contrast .cds--content-switcher-btn.cds--content-switcher--selected::after {
11520
+ border-radius: 0.25rem;
11521
+ background-color: var(--cds-content-switcher-selected, #ffffff);
11522
+ box-shadow: inset 0 0 0 0.0625rem var(--cds-border-inverse, #161616);
11523
+ }
11524
+ .cds--content-switcher--low-contrast .cds--content-switcher-btn.cds--content-switcher--selected:focus::after {
11525
+ box-shadow: inset 0 0 0 0.125rem var(--cds-focus, #0f62fe);
11526
+ }
11527
+ .cds--content-switcher--low-contrast .cds--content-switcher-btn.cds--content-switcher--selected:disabled {
11528
+ border: 0.0625rem solid var(--cds-border-disabled, #c6c6c6);
11529
+ border-radius: 0.25rem;
11530
+ background-color: var(--cds-content-switcher-selected, #ffffff);
11531
+ color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
11532
+ }
11533
+ .cds--content-switcher--low-contrast .cds--content-switcher-btn.cds--content-switcher--selected:disabled::before {
11534
+ background-color: transparent;
11535
+ }
11536
+
11537
+ .cds--content-switcher--low-contrast .cds--content-switcher-btn:focus::before,
11538
+ .cds--content-switcher--low-contrast .cds--content-switcher-btn:focus + .cds--content-switcher-btn::before,
11539
+ .cds--content-switcher--low-contrast .cds--content-switcher-btn:hover::before,
11540
+ .cds--content-switcher--low-contrast .cds--content-switcher-btn:hover + .cds--content-switcher-btn::before,
11541
+ .cds--content-switcher--low-contrast .cds--content-switcher--selected::before,
11542
+ .cds--content-switcher--low-contrast .cds--content-switcher--selected + .cds--content-switcher-btn::before {
11543
+ background-color: transparent;
11544
+ }
11545
+
11546
+ .cds--content-switcher--low-contrast .cds--content-switcher-btn:disabled::before,
11547
+ .cds--content-switcher--low-contrast .cds--content-switcher-btn:disabled:hover + .cds--content-switcher-btn:disabled::before {
11548
+ background-color: var(--cds-border-disabled, #c6c6c6);
11549
+ }
11550
+
11551
+ .cds--content-switcher--low-contrast .cds--content-switcher-btn.cds--content-switcher--selected:disabled + .cds--content-switcher-btn::before,
11552
+ .cds--content-switcher--low-contrast .cds--content-switcher-btn.cds--content-switcher--selected:disabled:hover + .cds--content-switcher-btn::before,
11553
+ .cds--content-switcher--low-contrast .cds--content-switcher-btn:disabled:hover + .cds--content-switcher-btn.cds--content-switcher--selected::before {
11554
+ background-color: transparent;
11555
+ }
11556
+
11557
+ .cds--content-switcher--low-contrast.cds--content-switcher--icon-only .cds--content-switcher-popover__wrapper:first-child .cds--content-switcher-btn:not([disabled]) {
11558
+ box-shadow: inset 0.0625rem 0 0 0 var(--cds-border-strong);
11559
+ }
11560
+
11561
+ .cds--content-switcher--low-contrast.cds--content-switcher--icon-only .cds--content-switcher-popover__wrapper:last-child .cds--content-switcher-btn:not([disabled]) {
11562
+ box-shadow: inset -0.0625rem 0 0 0 var(--cds-border-strong);
11563
+ }
11564
+
11565
+ .cds--content-switcher--low-contrast.cds--content-switcher--icon-only .cds--content-switcher-btn svg {
11566
+ fill: var(--cds-icon-secondary, #525252);
11567
+ }
11568
+
11569
+ .cds--content-switcher--low-contrast.cds--content-switcher--icon-only .cds--content-switcher-btn:hover svg {
11570
+ fill: var(--cds-icon-primary, #161616);
11571
+ }
11572
+
11573
+ .cds--content-switcher--low-contrast.cds--content-switcher--icon-only .cds--content-switcher-btn[disabled] svg {
11574
+ fill: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
11575
+ }
11576
+
11577
+ .cds--content-switcher--low-contrast.cds--content-switcher--icon-only .cds--content-switcher-btn.cds--content-switcher--selected svg {
11578
+ fill: var(--cds-icon-primary, #161616);
11579
+ }
11580
+
11581
+ .cds--content-switcher--low-contrast.cds--content-switcher--icon-only .cds--content-switcher-btn.cds--content-switcher--selected[disabled] svg {
11582
+ fill: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
11583
+ }
11584
+
11585
+ .cds--content-switcher--low-contrast.cds--content-switcher--icon-only .cds--content-switcher-btn.cds--content-switcher--selected:disabled {
11586
+ border-color: var(--cds-border-disabled, #c6c6c6);
11587
+ }
11588
+
11589
+ .cds--content-switcher--low-contrast .cds--content-switcher-btn:not(.cds--content-switcher__selected-hovered):focus::before,
11590
+ .cds--content-switcher--low-contrast .cds--content-switcher-popover__wrapper:focus-within + .cds--content-switcher-popover__wrapper .cds--content-switcher-btn::before,
11591
+ .cds--content-switcher--low-contrast .cds--content-switcher-popover__wrapper:not(.cds--content-switcher-popover--disabled):hover + .cds--content-switcher-popover__wrapper .cds--content-switcher-btn:not(.cds--content-switcher__selected-hovered)::before,
11592
+ .cds--content-switcher--low-contrast .cds--content-switcher--selected:not(.cds--content-switcher__selected-hovered)::before,
11593
+ .cds--content-switcher--low-contrast .cds--content-switcher-popover--selected + .cds--content-switcher-popover__wrapper .cds--content-switcher-btn::before {
11594
+ background-color: transparent;
11595
+ }
11596
+
11597
+ .cds--content-switcher--low-contrast .cds--content-switcher-popover__wrapper:has(+ .cds--content-switcher-popover__wrapper .cds--content-switcher-btn:not(.cds--content-switcher--selected):hover) .cds--content-switcher-btn:focus::before,
11598
+ .cds--content-switcher--low-contrast .cds--content-switcher-popover__wrapper:not(.cds--content-switcher-popover--selected):hover + .cds--content-switcher-popover__wrapper .cds--content-switcher-btn:focus::before,
11599
+ .cds--content-switcher--low-contrast .cds--content-switcher-popover__wrapper:hover + .cds--content-switcher-popover__wrapper .cds--content-switcher--selected::before,
11600
+ .cds--content-switcher--low-contrast .cds--content-switcher-popover--selected:has(+ .cds--content-switcher-popover__wrapper .cds--content-switcher-btn:hover) .cds--content-switcher-btn::before {
11601
+ border-color: var(--cds-border-strong);
11602
+ box-shadow: inset 0 0 0 0.0625rem var(--cds-content-switcher-background-hover, #d1d1d1);
11603
+ }
11604
+ .cds--content-switcher--low-contrast .cds--content-switcher-popover__wrapper:has(+ .cds--content-switcher-popover__wrapper .cds--content-switcher-btn:not(.cds--content-switcher--selected):hover) .cds--content-switcher-btn:focus:not(.cds--content-switcher--selected)::after,
11605
+ .cds--content-switcher--low-contrast .cds--content-switcher-popover__wrapper:not(.cds--content-switcher-popover--selected):hover + .cds--content-switcher-popover__wrapper .cds--content-switcher-btn:focus:not(.cds--content-switcher--selected)::after,
11606
+ .cds--content-switcher--low-contrast .cds--content-switcher-popover__wrapper:hover + .cds--content-switcher-popover__wrapper .cds--content-switcher--selected:not(.cds--content-switcher--selected)::after,
11607
+ .cds--content-switcher--low-contrast .cds--content-switcher-popover--selected:has(+ .cds--content-switcher-popover__wrapper .cds--content-switcher-btn:hover) .cds--content-switcher-btn:not(.cds--content-switcher--selected)::after {
11608
+ background-color: var(--cds-content-switcher-background, #e0e0e0);
11609
+ }
11610
+
11328
11611
  .cds--radio-button-group {
11329
11612
  box-sizing: border-box;
11330
11613
  padding: 0;
@@ -13664,25 +13947,6 @@ tr.cds--parent-row.cds--expandable-row.cds--expandable-row--hover td:first-of-ty
13664
13947
  inline-size: 2rem;
13665
13948
  }
13666
13949
 
13667
- tr.cds--parent-row.cds--expandable-row td.cds--table-expand + td::after {
13668
- position: absolute;
13669
- background-color: var(--cds-layer-accent);
13670
- block-size: 0.0625rem;
13671
- content: "";
13672
- inline-size: 0.5rem;
13673
- inset-block-end: -0.0625rem;
13674
- inset-inline-start: 0;
13675
- }
13676
-
13677
- tr.cds--parent-row.cds--expandable-row:hover td.cds--table-expand + td::after,
13678
- tr.cds--parent-row.cds--expandable-row.cds--expandable-row--hover td.cds--table-expand + td::after {
13679
- background-color: var(--cds-layer-hover);
13680
- }
13681
-
13682
- tr.cds--parent-row.cds--data-table--selected td.cds--table-expand + td::after {
13683
- display: none;
13684
- }
13685
-
13686
13950
  .cds--data-table--zebra tbody tr[data-parent-row]:nth-child(4n+3) td,
13687
13951
  .cds--data-table--zebra tbody tr[data-child-row]:nth-child(4n+4) td {
13688
13952
  border-block-end: 1px solid var(--cds-layer);
@@ -14136,6 +14400,12 @@ th .cds--table-sort__flex {
14136
14400
  margin-block-start: 0.8125rem;
14137
14401
  }
14138
14402
 
14403
+ .cds--table-sort__header .cds--ai-label,
14404
+ .cds--table-sort__header .cds--slug,
14405
+ .cds--table-sort__header .cds--table-header-label--decorator-inner {
14406
+ display: none;
14407
+ }
14408
+
14139
14409
  .cds--table-sort__header--slug .cds--table-sort__icon,
14140
14410
  .cds--table-sort__header--slug .cds--table-sort__icon-unsorted,
14141
14411
  .cds--table-sort__header--ai-label .cds--table-sort__icon,
@@ -14149,6 +14419,7 @@ th .cds--table-sort__flex {
14149
14419
  .cds--table-sort__header--ai-label .cds--slug,
14150
14420
  .cds--table-sort__header--decorator .cds--table-header-label--decorator-inner,
14151
14421
  .cds--table-sort__header--ai-label .cds--table-header-label--decorator-inner {
14422
+ display: block;
14152
14423
  margin-inline-end: 0.5rem;
14153
14424
  }
14154
14425
 
@@ -14990,6 +15261,7 @@ th .cds--table-sort__flex {
14990
15261
  padding: 0;
14991
15262
  border: none;
14992
15263
  background-color: var(--cds-layer);
15264
+ block-size: fit-content;
14993
15265
  color: var(--cds-text-primary, #161616);
14994
15266
  inline-size: 48rem;
14995
15267
  max-block-size: 50%;
@@ -15949,16 +16221,22 @@ button.cds--dropdown-text:focus {
15949
16221
  .cds--file__selected-file .cds--file-filename-container-wrap-invalid .cds--file-filename-tooltip {
15950
16222
  inline-size: -webkit-fill-available;
15951
16223
  padding-inline-start: 1rem;
16224
+ /* This is for targeting styles specific to firefox */
16225
+ /* https://sass-lang.com/documentation/breaking-changes/moz-document/ */
16226
+ /* stylelint-disable-next-line at-rule-no-vendor-prefix */
15952
16227
  }
15953
- @document url-prefix() {
16228
+ @-moz-document url-prefix() {
15954
16229
  .cds--file__selected-file .cds--file-filename-container-wrap-invalid .cds--file-filename-tooltip {
15955
16230
  inline-size: -moz-available;
15956
16231
  }
15957
16232
  }
15958
16233
  .cds--file__selected-file .cds--file-filename-tooltip {
15959
16234
  inline-size: -webkit-fill-available;
16235
+ /* This is for targeting styles specific to firefox */
16236
+ /* https://sass-lang.com/documentation/breaking-changes/moz-document/ */
16237
+ /* stylelint-disable-next-line at-rule-no-vendor-prefix */
15960
16238
  }
15961
- @document url-prefix() {
16239
+ @-moz-document url-prefix() {
15962
16240
  .cds--file__selected-file .cds--file-filename-tooltip {
15963
16241
  inline-size: -moz-available;
15964
16242
  }
@@ -15979,8 +16257,11 @@ button.cds--dropdown-text:focus {
15979
16257
  outline: inherit;
15980
16258
  text-overflow: ellipsis;
15981
16259
  white-space: nowrap;
16260
+ /* This is for targeting styles specific to firefox */
16261
+ /* https://sass-lang.com/documentation/breaking-changes/moz-document/ */
16262
+ /* stylelint-disable-next-line at-rule-no-vendor-prefix */
15982
16263
  }
15983
- @document url-prefix() {
16264
+ @-moz-document url-prefix() {
15984
16265
  .cds--file__selected-file .cds--file-filename-button {
15985
16266
  inline-size: -moz-available;
15986
16267
  }
@@ -19654,6 +19935,8 @@ optgroup.cds--select-optgroup:disabled,
19654
19935
  grid-column: 1/-1;
19655
19936
  grid-row: 1/1;
19656
19937
  margin-block-end: 0.5rem;
19938
+ max-block-size: 50vh;
19939
+ overflow-y: auto;
19657
19940
  padding-block-start: 1rem;
19658
19941
  padding-inline: 1rem 3rem;
19659
19942
  }
@@ -21033,13 +21316,17 @@ optgroup.cds--select-optgroup:disabled,
21033
21316
  }
21034
21317
 
21035
21318
  .cds--page-header__content__title-wrapper {
21036
- display: flex;
21037
- justify-content: space-between;
21319
+ display: grid;
21038
21320
  gap: 1rem;
21321
+ grid-template-columns: auto minmax(var(--pageheader-title-grid-width, 0), 1fr);
21322
+ margin-block-end: 1rem;
21323
+ min-block-size: 2.5rem;
21039
21324
  }
21040
21325
  @media (max-width: 41.98rem) {
21041
21326
  .cds--page-header__content__title-wrapper {
21327
+ display: flex;
21042
21328
  flex-direction: column;
21329
+ grid-gap: 1rem;
21043
21330
  }
21044
21331
  }
21045
21332
 
@@ -21053,6 +21340,10 @@ optgroup.cds--select-optgroup:disabled,
21053
21340
  display: flex;
21054
21341
  }
21055
21342
 
21343
+ .cds--page-header__content__title-container .cds--definition-term {
21344
+ border-block-end: none;
21345
+ }
21346
+
21056
21347
  .cds--page-header__content__contextual-actions {
21057
21348
  display: flex;
21058
21349
  }
@@ -21081,7 +21372,17 @@ optgroup.cds--select-optgroup:disabled,
21081
21372
 
21082
21373
  .cds--page-header__content__page-actions {
21083
21374
  display: flex;
21084
- gap: 1rem;
21375
+ justify-content: right;
21376
+ }
21377
+ @media (max-width: 41.98rem) {
21378
+ .cds--page-header__content__page-actions {
21379
+ justify-content: left;
21380
+ margin-block-start: 0;
21381
+ }
21382
+ }
21383
+
21384
+ .cds--page-header__content__page-actions .cds--menu-button__trigger:not(.cds--btn--ghost) {
21385
+ min-inline-size: 0;
21085
21386
  }
21086
21387
 
21087
21388
  .cds--page-header__content__subtitle {
@@ -21089,7 +21390,7 @@ optgroup.cds--select-optgroup:disabled,
21089
21390
  font-weight: var(--cds-productive-heading-03-font-weight, 400);
21090
21391
  line-height: var(--cds-productive-heading-03-line-height, 1.4);
21091
21392
  letter-spacing: var(--cds-productive-heading-03-letter-spacing, 0);
21092
- margin-block-start: 1rem;
21393
+ margin-block-end: 0.5rem;
21093
21394
  }
21094
21395
 
21095
21396
  .cds--page-header__content__body {
@@ -21105,14 +21406,21 @@ optgroup.cds--select-optgroup:disabled,
21105
21406
  margin-block-start: 1rem;
21106
21407
  }
21107
21408
 
21409
+ [data-hidden]:not([data-fixed]) {
21410
+ display: none;
21411
+ }
21412
+
21108
21413
  .cds--page-header__hero-image {
21109
21414
  display: flex;
21110
21415
  overflow: hidden;
21111
21416
  align-items: center;
21417
+ justify-content: end;
21112
21418
  block-size: 100%;
21113
21419
  }
21114
21420
 
21115
21421
  .cds--page-header__tab-bar {
21422
+ display: grid;
21423
+ padding: 0 1rem;
21116
21424
  border: 1px solid green; /* stylelint-disable-line */
21117
21425
  }
21118
21426
 
@@ -22019,6 +22327,8 @@ span.cds--pagination__text.cds--pagination__items-count {
22019
22327
 
22020
22328
  .cds--progress--space-equal .cds--progress-text {
22021
22329
  overflow: hidden;
22330
+ padding: 0.125rem;
22331
+ margin: -0.125rem;
22022
22332
  }
22023
22333
 
22024
22334
  .cds--progress-label {
@@ -24707,13 +25017,11 @@ span.cds--pagination__text.cds--pagination__items-count {
24707
25017
  .cds--toggle__button:focus + .cds--toggle__label .cds--toggle__switch::after,
24708
25018
  .cds--toggle:not(.cds--toggle--disabled):active .cds--toggle__switch::after {
24709
25019
  display: block;
24710
- border: 2px solid var(--cds-focus, #0f62fe);
24711
25020
  border-radius: 1rem;
24712
- block-size: calc(100% + 0.375rem);
25021
+ block-size: 100%;
24713
25022
  content: "";
24714
- inline-size: calc(100% + 0.375rem);
24715
- margin-block-start: -0.1875rem;
24716
- margin-inline-start: -0.1875rem;
25023
+ outline: 2px solid var(--cds-focus, #0f62fe);
25024
+ outline-offset: 1px;
24717
25025
  }
24718
25026
 
24719
25027
  .cds--toggle__switch--checked {