@carbon/ibm-products 2.94.0 → 2.95.0-rc.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 (252) hide show
  1. package/css/carbon.css +92 -103
  2. package/css/carbon.css.map +1 -1
  3. package/css/index-full-carbon.css +605 -186
  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 +43 -7
  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 +513 -83
  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 +308 -178
  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/components/APIKeyModal/APIKeyModal.d.ts +3 -0
  20. package/es/components/APIKeyModal/APIKeyModal.d.ts.map +1 -1
  21. package/es/components/APIKeyModal/APIKeyModal.js +8 -0
  22. package/es/components/AddSelect/next/AddSelect.d.ts +7 -9
  23. package/es/components/AddSelect/next/AddSelect.d.ts.map +1 -1
  24. package/es/components/AddSelect/next/AddSelect.js +0 -2
  25. package/es/components/AddSelect/next/AddSelectBody.d.ts +4 -0
  26. package/es/components/AddSelect/next/AddSelectBody.d.ts.map +1 -1
  27. package/es/components/AddSelect/next/AddSelectBody.js +80 -4
  28. package/es/components/AddSelect/next/AddSelectColumn.d.ts +1 -1
  29. package/es/components/AddSelect/next/AddSelectRow.d.ts +6 -0
  30. package/es/components/AddSelect/next/AddSelectRow.d.ts.map +1 -1
  31. package/es/components/AddSelect/next/AddSelectRow.js +10 -3
  32. package/es/components/AddSelect/next/AddSelectSelectionSummaryItem.d.ts.map +1 -1
  33. package/es/components/AddSelect/next/AddSelectSelectionSummaryItem.js +5 -3
  34. package/es/components/AddSelect/next/index.d.ts +0 -1
  35. package/es/components/AddSelect/next/index.d.ts.map +1 -1
  36. package/es/components/BigNumber/BigNumber.d.ts +1 -1
  37. package/es/components/BigNumber/BigNumber.d.ts.map +1 -1
  38. package/es/components/BigNumber/BigNumber.js +2 -2
  39. package/es/components/Card/next/Card.d.ts +87 -11
  40. package/es/components/Card/next/Card.d.ts.map +1 -1
  41. package/es/components/Card/next/Card.js +62 -8
  42. package/es/components/Card/next/Card.types.d.ts +13 -0
  43. package/es/components/Card/next/Card.types.d.ts.map +1 -1
  44. package/es/components/Card/next/CardAction.d.ts +43 -0
  45. package/es/components/Card/next/CardAction.d.ts.map +1 -0
  46. package/es/components/Card/next/CardAction.js +51 -0
  47. package/es/components/Card/next/CardActions.d.ts +46 -0
  48. package/es/components/Card/next/CardActions.d.ts.map +1 -0
  49. package/es/components/Card/next/CardActions.js +107 -0
  50. package/es/components/Card/next/CardCaption.d.ts +46 -0
  51. package/es/components/Card/next/CardCaption.d.ts.map +1 -0
  52. package/es/components/Card/next/CardCaption.js +52 -0
  53. package/es/components/Card/next/CardContext.js +12 -2
  54. package/es/components/Card/next/CardFooter.d.ts.map +1 -1
  55. package/es/components/Card/next/CardHeader.d.ts.map +1 -1
  56. package/es/components/Card/next/CardHeader.js +25 -2
  57. package/es/components/Card/next/CardHeaderMedia.d.ts +33 -0
  58. package/es/components/Card/next/CardHeaderMedia.d.ts.map +1 -0
  59. package/es/components/Card/next/CardHeaderMedia.js +44 -0
  60. package/es/components/Card/next/CardLabel.d.ts +46 -0
  61. package/es/components/Card/next/CardLabel.d.ts.map +1 -0
  62. package/es/components/Card/next/CardLabel.js +52 -0
  63. package/es/components/Card/next/CardMedia.d.ts +39 -0
  64. package/es/components/Card/next/CardMedia.d.ts.map +1 -0
  65. package/es/components/Card/next/CardMedia.js +50 -0
  66. package/es/components/Card/next/CardTitle.d.ts +82 -0
  67. package/es/components/Card/next/CardTitle.d.ts.map +1 -0
  68. package/es/components/Card/next/CardTitle.js +77 -0
  69. package/es/components/Card/next/CardTitleMedia.d.ts +24 -0
  70. package/es/components/Card/next/CardTitleMedia.d.ts.map +1 -0
  71. package/es/components/Card/next/CardTitleMedia.js +48 -0
  72. package/es/components/Card/next/index.d.ts +2 -3
  73. package/es/components/Card/next/index.d.ts.map +1 -1
  74. package/es/components/Card/next/index.js +17 -5
  75. package/es/components/Coachmark/next/Coachmark/Coachmark.d.ts +9 -3
  76. package/es/components/Coachmark/next/Coachmark/Coachmark.d.ts.map +1 -1
  77. package/es/components/Coachmark/next/Coachmark/Coachmark.js +6 -13
  78. package/es/components/Coachmark/next/Coachmark/CoachmarkContent.d.ts +1 -1
  79. package/es/components/Coachmark/next/Coachmark/CoachmarkContent.d.ts.map +1 -1
  80. package/es/components/Coachmark/next/Coachmark/CoachmarkContent.js +16 -32
  81. package/es/components/Coachmark/next/Coachmark/context.d.ts +2 -2
  82. package/es/components/Coachmark/next/Coachmark/context.d.ts.map +1 -1
  83. package/es/components/Coachmark/next/Coachmark/context.js +1 -2
  84. package/es/components/ExportModal/ExportModal.d.ts +1 -0
  85. package/es/components/ExportModal/ExportModal.d.ts.map +1 -1
  86. package/es/components/ExportModal/ExportModal.js +6 -0
  87. package/es/components/ImportModal/ImportModal.d.ts +3 -0
  88. package/es/components/ImportModal/ImportModal.d.ts.map +1 -1
  89. package/es/components/ImportModal/ImportModal.js +8 -0
  90. package/es/components/PageHeader/PageHeader.d.ts +6 -0
  91. package/es/components/PageHeader/PageHeader.d.ts.map +1 -1
  92. package/es/components/PageHeader/PageHeader.js +11 -0
  93. package/es/components/Tearsheet/next/StackContext.d.ts +2 -2
  94. package/es/components/Tearsheet/next/StackContext.d.ts.map +1 -1
  95. package/es/components/Tearsheet/next/Tearsheet.d.ts +30 -28
  96. package/es/components/Tearsheet/next/Tearsheet.d.ts.map +1 -1
  97. package/es/components/Tearsheet/next/Tearsheet.js +4 -2
  98. package/es/components/Tearsheet/next/TearsheetBody.d.ts +20 -14
  99. package/es/components/Tearsheet/next/TearsheetBody.d.ts.map +1 -1
  100. package/es/components/Tearsheet/next/TearsheetBody.js +4 -0
  101. package/es/components/Tearsheet/next/TearsheetHeader.d.ts +15 -14
  102. package/es/components/Tearsheet/next/TearsheetHeader.d.ts.map +1 -1
  103. package/es/components/Tearsheet/next/TearsheetHeader.js +14 -7
  104. package/es/components/Tearsheet/next/TearsheetHeaderActions.d.ts +10 -6
  105. package/es/components/Tearsheet/next/TearsheetHeaderActions.d.ts.map +1 -1
  106. package/es/components/Tearsheet/next/TearsheetHeaderActions.js +6 -3
  107. package/es/components/Tearsheet/next/TearsheetHeaderContent.d.ts.map +1 -1
  108. package/es/components/Tearsheet/next/TearsheetHeaderContent.js +7 -4
  109. package/es/components/Tearsheet/next/_story-assets/StepTearsheet.d.ts +7 -1
  110. package/es/components/Tearsheet/next/_story-assets/StepTearsheet.d.ts.map +1 -1
  111. package/es/components/Tearsheet/next/context.d.ts +2 -1
  112. package/es/components/Tearsheet/next/context.d.ts.map +1 -1
  113. package/es/components/index.d.ts +1 -1
  114. package/es/components/index.d.ts.map +1 -1
  115. package/es/node_modules/@carbon/icons-react/es/generated/bucket-11.js +283 -294
  116. package/es/node_modules/@carbon/icons-react/es/generated/bucket-3.js +25 -41
  117. package/es/node_modules/@carbon/icons-react/es/{iconPropTypes-BElKp6Sn.js → iconPropTypes-CdMBxq3Y.js} +1 -1
  118. package/lib/components/APIKeyModal/APIKeyModal.d.ts +3 -0
  119. package/lib/components/APIKeyModal/APIKeyModal.d.ts.map +1 -1
  120. package/lib/components/APIKeyModal/APIKeyModal.js +8 -0
  121. package/lib/components/AddSelect/next/AddSelect.d.ts +7 -9
  122. package/lib/components/AddSelect/next/AddSelect.d.ts.map +1 -1
  123. package/lib/components/AddSelect/next/AddSelect.js +0 -2
  124. package/lib/components/AddSelect/next/AddSelectBody.d.ts +4 -0
  125. package/lib/components/AddSelect/next/AddSelectBody.d.ts.map +1 -1
  126. package/lib/components/AddSelect/next/AddSelectBody.js +78 -2
  127. package/lib/components/AddSelect/next/AddSelectColumn.d.ts +1 -1
  128. package/lib/components/AddSelect/next/AddSelectRow.d.ts +6 -0
  129. package/lib/components/AddSelect/next/AddSelectRow.d.ts.map +1 -1
  130. package/lib/components/AddSelect/next/AddSelectRow.js +9 -2
  131. package/lib/components/AddSelect/next/AddSelectSelectionSummaryItem.d.ts.map +1 -1
  132. package/lib/components/AddSelect/next/AddSelectSelectionSummaryItem.js +5 -3
  133. package/lib/components/AddSelect/next/index.d.ts +0 -1
  134. package/lib/components/AddSelect/next/index.d.ts.map +1 -1
  135. package/lib/components/BigNumber/BigNumber.d.ts +1 -1
  136. package/lib/components/BigNumber/BigNumber.d.ts.map +1 -1
  137. package/lib/components/BigNumber/BigNumber.js +2 -2
  138. package/lib/components/Card/next/Card.d.ts +87 -11
  139. package/lib/components/Card/next/Card.d.ts.map +1 -1
  140. package/lib/components/Card/next/Card.js +61 -11
  141. package/lib/components/Card/next/Card.types.d.ts +13 -0
  142. package/lib/components/Card/next/Card.types.d.ts.map +1 -1
  143. package/lib/components/Card/next/CardAction.d.ts +43 -0
  144. package/lib/components/Card/next/CardAction.d.ts.map +1 -0
  145. package/lib/components/Card/next/CardAction.js +53 -0
  146. package/lib/components/Card/next/CardActions.d.ts +46 -0
  147. package/lib/components/Card/next/CardActions.d.ts.map +1 -0
  148. package/lib/components/Card/next/CardActions.js +109 -0
  149. package/lib/components/Card/next/CardCaption.d.ts +46 -0
  150. package/lib/components/Card/next/CardCaption.d.ts.map +1 -0
  151. package/lib/components/Card/next/CardCaption.js +54 -0
  152. package/lib/components/Card/next/CardContext.js +13 -1
  153. package/lib/components/Card/next/CardFooter.d.ts.map +1 -1
  154. package/lib/components/Card/next/CardHeader.d.ts.map +1 -1
  155. package/lib/components/Card/next/CardHeader.js +24 -1
  156. package/lib/components/Card/next/CardHeaderMedia.d.ts +33 -0
  157. package/lib/components/Card/next/CardHeaderMedia.d.ts.map +1 -0
  158. package/lib/components/Card/next/CardHeaderMedia.js +46 -0
  159. package/lib/components/Card/next/CardLabel.d.ts +46 -0
  160. package/lib/components/Card/next/CardLabel.d.ts.map +1 -0
  161. package/lib/components/Card/next/CardLabel.js +54 -0
  162. package/lib/components/Card/next/CardMedia.d.ts +39 -0
  163. package/lib/components/Card/next/CardMedia.d.ts.map +1 -0
  164. package/lib/components/Card/next/CardMedia.js +52 -0
  165. package/lib/components/Card/next/CardTitle.d.ts +82 -0
  166. package/lib/components/Card/next/CardTitle.d.ts.map +1 -0
  167. package/lib/components/Card/next/CardTitle.js +79 -0
  168. package/lib/components/Card/next/CardTitleMedia.d.ts +24 -0
  169. package/lib/components/Card/next/CardTitleMedia.d.ts.map +1 -0
  170. package/lib/components/Card/next/CardTitleMedia.js +50 -0
  171. package/lib/components/Card/next/index.d.ts +2 -3
  172. package/lib/components/Card/next/index.d.ts.map +1 -1
  173. package/lib/components/Card/next/index.js +16 -4
  174. package/lib/components/Coachmark/next/Coachmark/Coachmark.d.ts +9 -3
  175. package/lib/components/Coachmark/next/Coachmark/Coachmark.d.ts.map +1 -1
  176. package/lib/components/Coachmark/next/Coachmark/Coachmark.js +6 -13
  177. package/lib/components/Coachmark/next/Coachmark/CoachmarkContent.d.ts +1 -1
  178. package/lib/components/Coachmark/next/Coachmark/CoachmarkContent.d.ts.map +1 -1
  179. package/lib/components/Coachmark/next/Coachmark/CoachmarkContent.js +16 -32
  180. package/lib/components/Coachmark/next/Coachmark/context.d.ts +2 -2
  181. package/lib/components/Coachmark/next/Coachmark/context.d.ts.map +1 -1
  182. package/lib/components/Coachmark/next/Coachmark/context.js +1 -2
  183. package/lib/components/ExportModal/ExportModal.d.ts +1 -0
  184. package/lib/components/ExportModal/ExportModal.d.ts.map +1 -1
  185. package/lib/components/ExportModal/ExportModal.js +6 -0
  186. package/lib/components/ImportModal/ImportModal.d.ts +3 -0
  187. package/lib/components/ImportModal/ImportModal.d.ts.map +1 -1
  188. package/lib/components/ImportModal/ImportModal.js +8 -0
  189. package/lib/components/PageHeader/PageHeader.d.ts +6 -0
  190. package/lib/components/PageHeader/PageHeader.d.ts.map +1 -1
  191. package/lib/components/PageHeader/PageHeader.js +11 -0
  192. package/lib/components/Tearsheet/next/StackContext.d.ts +2 -2
  193. package/lib/components/Tearsheet/next/StackContext.d.ts.map +1 -1
  194. package/lib/components/Tearsheet/next/Tearsheet.d.ts +30 -28
  195. package/lib/components/Tearsheet/next/Tearsheet.d.ts.map +1 -1
  196. package/lib/components/Tearsheet/next/Tearsheet.js +4 -2
  197. package/lib/components/Tearsheet/next/TearsheetBody.d.ts +20 -14
  198. package/lib/components/Tearsheet/next/TearsheetBody.d.ts.map +1 -1
  199. package/lib/components/Tearsheet/next/TearsheetBody.js +4 -0
  200. package/lib/components/Tearsheet/next/TearsheetHeader.d.ts +15 -14
  201. package/lib/components/Tearsheet/next/TearsheetHeader.d.ts.map +1 -1
  202. package/lib/components/Tearsheet/next/TearsheetHeader.js +14 -7
  203. package/lib/components/Tearsheet/next/TearsheetHeaderActions.d.ts +10 -6
  204. package/lib/components/Tearsheet/next/TearsheetHeaderActions.d.ts.map +1 -1
  205. package/lib/components/Tearsheet/next/TearsheetHeaderActions.js +4 -1
  206. package/lib/components/Tearsheet/next/TearsheetHeaderContent.d.ts.map +1 -1
  207. package/lib/components/Tearsheet/next/TearsheetHeaderContent.js +7 -4
  208. package/lib/components/Tearsheet/next/_story-assets/StepTearsheet.d.ts +7 -1
  209. package/lib/components/Tearsheet/next/_story-assets/StepTearsheet.d.ts.map +1 -1
  210. package/lib/components/Tearsheet/next/context.d.ts +2 -1
  211. package/lib/components/Tearsheet/next/context.d.ts.map +1 -1
  212. package/lib/components/index.d.ts +1 -1
  213. package/lib/components/index.d.ts.map +1 -1
  214. package/lib/node_modules/@carbon/icons-react/lib/{Icon-2zUDcllO.js → Icon.js} +8 -37
  215. package/lib/node_modules/@carbon/icons-react/lib/generated/bucket-0.js +133 -131
  216. package/lib/node_modules/@carbon/icons-react/lib/generated/bucket-1.js +140 -138
  217. package/lib/node_modules/@carbon/icons-react/lib/generated/bucket-10.js +393 -403
  218. package/lib/node_modules/@carbon/icons-react/lib/generated/bucket-11.js +417 -426
  219. package/lib/node_modules/@carbon/icons-react/lib/generated/bucket-12.js +447 -441
  220. package/lib/node_modules/@carbon/icons-react/lib/generated/bucket-13.js +449 -470
  221. package/lib/node_modules/@carbon/icons-react/lib/generated/bucket-14.js +487 -456
  222. package/lib/node_modules/@carbon/icons-react/lib/generated/bucket-15.js +550 -548
  223. package/lib/node_modules/@carbon/icons-react/lib/generated/bucket-16.js +680 -733
  224. package/lib/node_modules/@carbon/icons-react/lib/generated/bucket-17.js +810 -828
  225. package/lib/node_modules/@carbon/icons-react/lib/generated/bucket-18.js +754 -670
  226. package/lib/node_modules/@carbon/icons-react/lib/generated/bucket-19.js +622 -726
  227. package/lib/node_modules/@carbon/icons-react/lib/generated/bucket-2.js +150 -148
  228. package/lib/node_modules/@carbon/icons-react/lib/generated/bucket-20.js +752 -752
  229. package/lib/node_modules/@carbon/icons-react/lib/generated/bucket-21.js +724 -55
  230. package/lib/node_modules/@carbon/icons-react/lib/generated/bucket-3.js +176 -190
  231. package/lib/node_modules/@carbon/icons-react/lib/generated/bucket-4.js +198 -180
  232. package/lib/node_modules/@carbon/icons-react/lib/generated/bucket-5.js +217 -227
  233. package/lib/node_modules/@carbon/icons-react/lib/generated/bucket-6.js +270 -335
  234. package/lib/node_modules/@carbon/icons-react/lib/generated/bucket-7.js +405 -339
  235. package/lib/node_modules/@carbon/icons-react/lib/generated/bucket-8.js +400 -577
  236. package/lib/node_modules/@carbon/icons-react/lib/generated/bucket-9.js +578 -388
  237. package/lib/node_modules/@carbon/icons-react/lib/{iconPropTypes-DaTOKOBs.js → iconPropTypes-Dkz7B3UR.js} +6 -6
  238. package/lib/node_modules/@carbon/icons-react/lib/index.js +465 -423
  239. package/lib/node_modules/@carbon/icons-react/lib/rolldown-runtime-DyAcNxqs.js +51 -0
  240. package/package.json +18 -18
  241. package/scss/components/AboutModal/_about-modal.scss +12 -3
  242. package/scss/components/AddSelect/_add-select_next.scss +238 -99
  243. package/scss/components/BigNumber/_big-number.scss +4 -0
  244. package/scss/components/Card/_card-next.scss +394 -8
  245. package/scss/components/Tearsheet/_tearsheet_next.scss +38 -4
  246. package/telemetry.yml +24 -18
  247. package/es/components/AddSelect/next/AddSelectContent.d.ts +0 -26
  248. package/es/components/AddSelect/next/AddSelectContent.d.ts.map +0 -1
  249. package/es/components/AddSelect/next/AddSelectContent.js +0 -113
  250. package/lib/components/AddSelect/next/AddSelectContent.d.ts +0 -26
  251. package/lib/components/AddSelect/next/AddSelectContent.d.ts.map +0 -1
  252. package/lib/components/AddSelect/next/AddSelectContent.js +0 -115
@@ -101,9 +101,17 @@
101
101
  }
102
102
 
103
103
  .c4p--about-modal .c4p--about-modal__links-container a + a {
104
- border-inline-start: 1px solid var(--cds-border-strong-01, #8d8d8d);
105
- margin-inline-start: 0.5rem;
106
- padding-inline-start: 0.5rem;
104
+ position: relative;
105
+ margin-inline-start: 1rem;
106
+ }
107
+ .c4p--about-modal .c4p--about-modal__links-container a + a::before {
108
+ position: absolute;
109
+ background-color: var(--cds-border-strong-01, #8d8d8d);
110
+ block-size: 1lh;
111
+ content: "";
112
+ inline-size: 1px;
113
+ inset-block-start: 0;
114
+ inset-inline-start: -0.5rem;
107
115
  }
108
116
 
109
117
  .c4p--about-modal .c4p--about-modal__content,
@@ -613,8 +621,10 @@ button.c4p--add-select__global-filter-toggle--open {
613
621
  }
614
622
 
615
623
  .c4p--add-select__next__header {
616
- padding: 1rem;
617
624
  border-block-end: 1px solid var(--cds-border-subtle-01, #c6c6c6);
625
+ padding-block-end: 0.5rem;
626
+ padding-block-start: 1rem;
627
+ padding-inline: 1rem;
618
628
  }
619
629
 
620
630
  .c4p--add-select__next__search {
@@ -647,12 +657,12 @@ button.c4p--add-select__global-filter-toggle--open {
647
657
  }
648
658
 
649
659
  .c4p--add-select__next__tags-label {
650
- font-size: var(--cds-body-compact-01-font-size, 0.875rem);
651
- font-weight: var(--cds-body-compact-01-font-weight, 400);
652
- line-height: var(--cds-body-compact-01-line-height, 1.28572);
653
- letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
660
+ font-size: var(--cds-heading-compact-02-font-size, 1rem);
661
+ font-weight: var(--cds-heading-compact-02-font-weight, 600);
662
+ line-height: var(--cds-heading-compact-02-line-height, 1.375);
663
+ letter-spacing: var(--cds-heading-compact-02-letter-spacing, 0);
654
664
  margin: 0;
655
- color: var(--cds-text-secondary, #525252);
665
+ color: var(--cds-text-primary, #161616);
656
666
  }
657
667
 
658
668
  .c4p--add-select__next__sub-header-actions {
@@ -663,12 +673,15 @@ button.c4p--add-select__global-filter-toggle--open {
663
673
  }
664
674
 
665
675
  .c4p--add-select__next__content {
676
+ display: flex;
666
677
  overflow: auto;
667
678
  flex: 1;
679
+ flex-direction: column;
668
680
  }
669
681
 
670
682
  .c4p--add-select__next-list {
671
683
  display: flex;
684
+ flex: 1;
672
685
  flex-direction: column;
673
686
  overflow-y: auto;
674
687
  }
@@ -687,9 +700,12 @@ button.c4p--add-select__global-filter-toggle--open {
687
700
  }
688
701
  .c4p--add-select__next-list-body--horizontal {
689
702
  flex-direction: row;
703
+ align-items: stretch;
704
+ block-size: 100%;
690
705
  }
691
706
  .c4p--add-select__next-list-body--horizontal .c4p--add-select__next-column {
692
- padding: 1rem;
707
+ padding-block: 1rem;
708
+ padding-inline: 1rem;
693
709
  }
694
710
 
695
711
  .c4p--add-select__next-row {
@@ -707,42 +723,69 @@ button.c4p--add-select__global-filter-toggle--open {
707
723
  .c4p--add-select__next-row--selected {
708
724
  background-color: var(--cds-layer-selected-01, #e0e0e0);
709
725
  }
726
+ .c4p--add-select__next-row--selected .c4p--add-select__next-row__cell-wrapper {
727
+ border-block-end-color: var(--cds-border-subtle-selected-01, #c6c6c6);
728
+ }
710
729
  .c4p--add-select__next-row--disabled {
711
730
  cursor: not-allowed;
712
- opacity: 0.5;
731
+ }
732
+ .c4p--add-select__next-row--disabled .c4p--add-select__next-row__title,
733
+ .c4p--add-select__next-row--disabled .c4p--add-select__next-row__subtitle {
734
+ color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
735
+ }
736
+ .c4p--add-select__next-row--disabled .c4p--add-select__next-row__icon svg,
737
+ .c4p--add-select__next-row--disabled .c4p--add-select__next-row__view-item-panel svg,
738
+ .c4p--add-select__next-row--disabled .c4p--add-select__next-row__nav-indicator svg {
739
+ fill: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
713
740
  }
714
741
  .c4p--add-select__next-row:hover:not(.c4p--add-select__next-row--disabled) {
715
742
  background: var(--cds-layer-hover-01, #e8e8e8);
716
743
  }
717
744
  .c4p--add-select__next-row:hover:not(.c4p--add-select__next-row--disabled) .c4p--add-select__next-row__title {
718
- color: var(--cds-interactive, #0f62fe);
745
+ color: var(--cds-link-primary, #0f62fe);
719
746
  }
747
+ .c4p--add-select__next-row:hover:not(.c4p--add-select__next-row--disabled) .c4p--add-select__next-row__view-item-panel svg,
720
748
  .c4p--add-select__next-row:hover:not(.c4p--add-select__next-row--disabled) .c4p--add-select__next-row__nav-indicator svg {
721
- color: var(--cds-interactive, #0f62fe);
749
+ fill: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
750
+ }
751
+ .c4p--add-select__next-row--selected:hover:not(.c4p--add-select__next-row--disabled) {
752
+ background: var(--cds-layer-selected-hover-01, #d1d1d1);
753
+ }
754
+ .c4p--add-select__next-row--selected:hover:not(.c4p--add-select__next-row--disabled) .c4p--add-select__next-row__title {
755
+ color: var(--cds-text-primary, #161616);
756
+ }
757
+ .c4p--add-select__next-row--selected:hover:not(.c4p--add-select__next-row--disabled) .c4p--add-select__next-row__view-item-panel svg,
758
+ .c4p--add-select__next-row--selected:hover:not(.c4p--add-select__next-row--disabled) .c4p--add-select__next-row__nav-indicator svg {
759
+ fill: var(--cds-icon-primary, #161616);
722
760
  }
723
761
  .c4p--add-select__next-row__cell {
724
762
  display: flex;
725
763
  flex: 1;
726
764
  flex-direction: column;
727
- justify-content: center;
728
765
  }
729
766
  .c4p--add-select__next-row__cell-wrapper {
730
767
  display: flex;
731
768
  align-items: center;
732
769
  justify-content: space-between;
733
- padding: 0 1rem;
734
- block-size: 3rem;
735
- border-block-end: 1px solid var(--cds-layer-accent-01, #e0e0e0);
770
+ border-block-end: 1px solid var(--cds-border-subtle-01, #c6c6c6);
771
+ min-block-size: 3rem;
772
+ padding-block: 0.5rem;
773
+ padding-inline: 1rem;
736
774
  }
737
775
  .c4p--add-select__next-row__content {
738
776
  display: flex;
739
777
  flex: 1;
740
778
  align-items: center;
779
+ align-self: center;
741
780
  }
742
781
  .c4p--add-select__next-row__checkbox {
743
782
  flex: none;
783
+ align-self: center;
744
784
  margin-inline-end: 1rem;
745
785
  }
786
+ .c4p--add-select__next-row__radio {
787
+ align-self: center;
788
+ }
746
789
  .c4p--add-select__next-row__radio .cds--radio-button__appearance {
747
790
  margin-inline-end: 0;
748
791
  }
@@ -765,10 +808,9 @@ button.c4p--add-select__global-filter-toggle--open {
765
808
  color: var(--cds-text-primary, #161616);
766
809
  }
767
810
  .c4p--add-select__next-row__subtitle {
768
- font-size: var(--cds-label-01-font-size, 0.75rem);
769
- font-weight: var(--cds-label-01-font-weight, 400);
770
- line-height: var(--cds-label-01-line-height, 1.33333);
771
- letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
811
+ font-size: var(--cds-helper-text-01-font-size, 0.75rem);
812
+ line-height: var(--cds-helper-text-01-line-height, 1.33333);
813
+ letter-spacing: var(--cds-helper-text-01-letter-spacing, 0.32px);
772
814
  display: block;
773
815
  color: var(--cds-text-secondary, #525252);
774
816
  }
@@ -789,14 +831,14 @@ button.c4p--add-select__global-filter-toggle--open {
789
831
  display: flex;
790
832
  align-items: center;
791
833
  justify-content: center;
792
- padding: 0.25rem;
793
- border-radius: 0.25rem;
794
834
  cursor: pointer;
795
835
  margin-inline-start: 0.5rem;
836
+ padding-block: 0.25rem;
837
+ padding-inline: 0.25rem;
796
838
  transition: none;
797
839
  }
798
840
  .c4p--add-select__next-row__nav-indicator:hover {
799
- background-color: var(--cds-layer-hover-01, #e8e8e8);
841
+ background-color: var(--cds-background-hover, rgba(141, 141, 141, 0.12));
800
842
  }
801
843
  .c4p--add-select__next-row__nav-indicator:focus {
802
844
  outline: 0.125rem solid var(--cds-focus, #0f62fe);
@@ -810,14 +852,14 @@ button.c4p--add-select__global-filter-toggle--open {
810
852
  display: flex;
811
853
  align-items: center;
812
854
  justify-content: center;
813
- padding: 0.25rem;
814
- border-radius: 0.25rem;
815
855
  cursor: pointer;
816
856
  margin-inline-start: 0.5rem;
857
+ padding-block: 0.25rem;
858
+ padding-inline: 0.25rem;
817
859
  transition: background-color 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
818
860
  }
819
861
  .c4p--add-select__next-row__nav-indicator:hover {
820
- background-color: var(--cds-layer-hover-01, #e8e8e8);
862
+ background-color: var(--cds-background-hover, rgba(141, 141, 141, 0.12));
821
863
  }
822
864
  .c4p--add-select__next-row__nav-indicator:focus {
823
865
  outline: 0.125rem solid var(--cds-focus, #0f62fe);
@@ -826,6 +868,33 @@ button.c4p--add-select__global-filter-toggle--open {
826
868
  .c4p--add-select__next-row__nav-indicator svg {
827
869
  fill: var(--cds-icon-primary, #161616);
828
870
  }
871
+ .c4p--add-select__next-row--skeleton {
872
+ cursor: default;
873
+ pointer-events: none;
874
+ }
875
+ .c4p--add-select__next-row--skeleton:hover {
876
+ background: none;
877
+ }
878
+ .c4p--add-select__next-row--skeleton .c4p--add-select__next-row__skeleton-control {
879
+ flex: none;
880
+ border-radius: 0.125rem;
881
+ background-color: var(--cds-skeleton-element, #c6c6c6);
882
+ block-size: 1rem;
883
+ inline-size: 1rem;
884
+ margin-inline-end: 1rem;
885
+ }
886
+ .c4p--add-select__next-row--skeleton .c4p--add-select__next-row__icon .cds--icon--skeleton {
887
+ border-radius: 50%;
888
+ block-size: 2rem;
889
+ inline-size: 2rem;
890
+ }
891
+ .c4p--add-select__next-row--skeleton .c4p--add-select__next-row__icon .cds--icon--skeleton::before {
892
+ border-radius: 50%;
893
+ animation: none;
894
+ }
895
+ .c4p--add-select__next-row--skeleton .c4p--add-select__next-row__skeleton-title {
896
+ margin-block-end: 0;
897
+ }
829
898
 
830
899
  .c4p--add-select__next-column {
831
900
  display: flex;
@@ -833,13 +902,14 @@ button.c4p--add-select__global-filter-toggle--open {
833
902
  block-size: 100%;
834
903
  border-inline-end: 1px solid var(--cds-border-subtle-01, #c6c6c6);
835
904
  min-inline-size: 300px;
905
+ padding-block: 1rem;
906
+ padding-inline: 1rem;
836
907
  }
837
908
  .c4p--add-select__next-column:last-child {
838
909
  border-inline-end: none;
839
910
  }
840
- .c4p--add-select__next-column__search {
841
- padding: 1rem;
842
- padding-block-end: 0;
911
+ .c4p--add-select__next-list-body--horizontal .c4p--add-select__next-column:last-child {
912
+ border-inline-end: 1px solid var(--cds-border-subtle-01, #c6c6c6);
843
913
  }
844
914
  .c4p--add-select__next-column__search--with-actions {
845
915
  display: flex;
@@ -853,8 +923,9 @@ button.c4p--add-select__global-filter-toggle--open {
853
923
  align-items: flex-end;
854
924
  }
855
925
  .c4p--add-select__next-column__search-bar {
856
- padding: 1rem;
857
926
  padding-block-end: 0;
927
+ padding-block-start: 1rem;
928
+ padding-inline: 1rem;
858
929
  }
859
930
  .c4p--add-select__next-column__search-wrapper {
860
931
  display: flex;
@@ -873,7 +944,8 @@ button.c4p--add-select__global-filter-toggle--open {
873
944
  flex: none;
874
945
  }
875
946
  .c4p--add-select__next-column__filter-popover {
876
- padding: 1rem;
947
+ padding-block: 1rem;
948
+ padding-inline: 1rem;
877
949
  }
878
950
  .c4p--add-select__next-column__filter-popover .cds--checkbox-wrapper {
879
951
  margin-block-end: 0.5rem;
@@ -884,8 +956,9 @@ button.c4p--add-select__global-filter-toggle--open {
884
956
  .c4p--add-select__next-column__header {
885
957
  display: flex;
886
958
  align-items: center;
887
- padding: 1rem;
888
959
  border-block-end: 1px solid var(--cds-border-subtle-01, #c6c6c6);
960
+ padding-block: 1rem;
961
+ padding-inline: 1rem;
889
962
  }
890
963
  .c4p--add-select__next-column__select-all .cds--checkbox-label {
891
964
  display: flex;
@@ -904,12 +977,10 @@ button.c4p--add-select__global-filter-toggle--open {
904
977
  gap: 0.5rem;
905
978
  }
906
979
  .c4p--add-select__next-column__title {
907
- font-size: var(--cds-body-compact-01-font-size, 0.875rem);
908
- font-weight: var(--cds-body-compact-01-font-weight, 400);
909
- line-height: var(--cds-body-compact-01-line-height, 1.28572);
910
- letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
911
- color: var(--cds-text-secondary, #525252);
912
- font-weight: 600;
980
+ font-size: var(--cds-heading-compact-01-font-size, 0.875rem);
981
+ font-weight: var(--cds-heading-compact-01-font-weight, 600);
982
+ line-height: var(--cds-heading-compact-01-line-height, 1.28572);
983
+ letter-spacing: var(--cds-heading-compact-01-letter-spacing, 0.16px);
913
984
  }
914
985
  .c4p--add-select__next-column__rows {
915
986
  display: flex;
@@ -940,11 +1011,12 @@ button.c4p--add-select__global-filter-toggle--open {
940
1011
  font-weight: var(--cds-body-compact-01-font-weight, 400);
941
1012
  line-height: var(--cds-body-compact-01-line-height, 1.28572);
942
1013
  letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
943
- padding: 0;
944
1014
  border: none;
945
1015
  background: none;
946
1016
  color: var(--cds-link-primary, #0f62fe);
947
1017
  cursor: pointer;
1018
+ padding-block: 0;
1019
+ padding-inline: 0;
948
1020
  text-decoration: none;
949
1021
  }
950
1022
  .c4p--add-select__next__breadcrumb-button:hover {
@@ -978,8 +1050,10 @@ button.c4p--add-select__global-filter-toggle--open {
978
1050
  .c4p--add-select__next__selection-summary-header {
979
1051
  display: flex;
980
1052
  align-items: center;
981
- padding: 2rem 1rem 0.5rem 1rem;
982
1053
  border-block-end: 1px solid var(--cds-layer-accent-01, #e0e0e0);
1054
+ padding-block-end: 0.5rem;
1055
+ padding-block-start: 1.5rem;
1056
+ padding-inline: 1rem;
983
1057
  }
984
1058
  .c4p--add-select__next__selection-summary-title {
985
1059
  font-size: var(--cds-heading-compact-02-font-size, 1rem);
@@ -995,32 +1069,59 @@ button.c4p--add-select__global-filter-toggle--open {
995
1069
  margin-inline-start: auto;
996
1070
  }
997
1071
  .c4p--add-select__next__selection-summary-item-default {
998
- padding: 1rem 0;
999
- border-block-end: 1px solid var(--cds-layer-accent-01, #e0e0e0);
1072
+ border-block-end: 1px solid var(--cds-border-subtle-01, #c6c6c6);
1073
+ padding-block: 0.75rem;
1074
+ padding-inline: 1rem;
1000
1075
  }
1001
1076
  .c4p--add-select__next__selection-summary-item-default-title {
1077
+ font-size: var(--cds-body-compact-01-font-size, 0.875rem);
1078
+ font-weight: var(--cds-body-compact-01-font-weight, 400);
1079
+ line-height: var(--cds-body-compact-01-line-height, 1.28572);
1080
+ letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
1002
1081
  color: var(--cds-text-primary, #161616);
1003
1082
  }
1004
1083
  .c4p--add-select__next__selection-summary-item-default-subtitle {
1005
- font-size: var(--cds-label-01-font-size, 0.75rem);
1006
- font-weight: var(--cds-label-01-font-weight, 400);
1007
- line-height: var(--cds-label-01-line-height, 1.33333);
1008
- letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
1084
+ font-size: var(--cds-body-01-font-size, 0.875rem);
1085
+ font-weight: var(--cds-body-01-font-weight, 400);
1086
+ line-height: var(--cds-body-01-line-height, 1.42857);
1087
+ letter-spacing: var(--cds-body-01-letter-spacing, 0.16px);
1009
1088
  color: var(--cds-text-secondary, #525252);
1010
1089
  }
1011
1090
 
1012
1091
  .c4p--add-select__next__selection-summary-item {
1013
1092
  position: relative;
1093
+ background-color: var(--cds-layer-01, #f4f4f4);
1094
+ border-block-end: 1px solid var(--cds-border-subtle-01, #c6c6c6);
1095
+ }
1096
+ .c4p--add-select__next__selection-summary-item:hover {
1097
+ background-color: var(--cds-layer-hover-01, #e8e8e8);
1098
+ }
1099
+ .c4p--add-select__next__selection-summary-item--accordion .cds--accordion__item, .c4p--add-select__next__selection-summary-item--accordion .cds--accordion__item:last-child {
1100
+ border-block-end: none;
1101
+ border-block-start: none;
1102
+ }
1103
+ .c4p--add-select__next__selection-summary-item--accordion .cds--accordion__heading {
1104
+ min-block-size: unset;
1105
+ padding-block: 0.75rem;
1106
+ padding-inline-end: 1rem;
1014
1107
  }
1015
1108
  .c4p--add-select__next__selection-summary-item--default .c4p--add-select__next__selection-summary-item-title-wrapper {
1016
1109
  display: flex;
1017
1110
  align-items: center;
1018
1111
  justify-content: space-between;
1019
- padding: 1rem;
1112
+ padding-block: 0.75rem;
1113
+ padding-inline: 1rem;
1020
1114
  }
1021
1115
  .c4p--add-select__next__selection-summary-item--default .c4p--add-select__next__selection-summary-item-content {
1116
+ padding-block-end: 0.75rem;
1022
1117
  padding-inline: 1rem;
1023
1118
  }
1119
+ .c4p--add-select__next__selection-summary-item--default .c4p--add-select__next__selection-summary-item-title {
1120
+ font-size: var(--cds-heading-compact-01-font-size, 0.875rem);
1121
+ font-weight: var(--cds-heading-compact-01-font-weight, 600);
1122
+ line-height: var(--cds-heading-compact-01-line-height, 1.28572);
1123
+ letter-spacing: var(--cds-heading-compact-01-letter-spacing, 0.16px);
1124
+ }
1024
1125
  .c4p--add-select__next__selection-summary-item-title-wrapper {
1025
1126
  display: flex;
1026
1127
  align-items: center;
@@ -1030,13 +1131,17 @@ button.c4p--add-select__global-filter-toggle--open {
1030
1131
  flex: 1;
1031
1132
  }
1032
1133
  .c4p--add-select__next__selection-summary-item-title {
1134
+ font-size: var(--cds-body-compact-01-font-size, 0.875rem);
1135
+ font-weight: var(--cds-body-compact-01-font-weight, 400);
1136
+ line-height: var(--cds-body-compact-01-line-height, 1.28572);
1137
+ letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
1033
1138
  color: var(--cds-text-primary, #161616);
1034
1139
  }
1035
1140
  .c4p--add-select__next__selection-summary-item-subtitle {
1036
- font-size: var(--cds-label-01-font-size, 0.75rem);
1037
- font-weight: var(--cds-label-01-font-weight, 400);
1038
- line-height: var(--cds-label-01-line-height, 1.33333);
1039
- letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
1141
+ font-size: var(--cds-body-01-font-size, 0.875rem);
1142
+ font-weight: var(--cds-body-01-font-weight, 400);
1143
+ line-height: var(--cds-body-01-line-height, 1.42857);
1144
+ letter-spacing: var(--cds-body-01-letter-spacing, 0.16px);
1040
1145
  color: var(--cds-text-secondary, #525252);
1041
1146
  }
1042
1147
  .c4p--add-select__next__selection-summary-item-entry {
@@ -1061,15 +1166,14 @@ button.c4p--add-select__global-filter-toggle--open {
1061
1166
  display: inline-flex;
1062
1167
  align-items: center;
1063
1168
  justify-content: center;
1064
- padding-inline-start: 1rem;
1169
+ padding-inline-start: 0.5rem;
1065
1170
  }
1066
1171
  .c4p--add-select__next__selection-summary-item--accordion .c4p--add-select__next__selection-summary-item-remove-button-container {
1067
1172
  position: absolute;
1068
- inset-inline-end: 0;
1069
- }
1070
- .c4p--add-select__next__selection-summary-item--simple .c4p--add-select__next__selection-summary-item-remove-button-container {
1071
- position: relative;
1072
- margin-inline-start: auto;
1173
+ inset-block-start: 50%;
1174
+ inset-inline-end: 1rem;
1175
+ padding-inline-start: 0;
1176
+ transform: translateY(-50%);
1073
1177
  }
1074
1178
  .c4p--add-select__next__selection-summary-item-remove-button {
1075
1179
  opacity: 0;
@@ -1084,41 +1188,50 @@ button.c4p--add-select__global-filter-toggle--open {
1084
1188
  opacity: 1;
1085
1189
  }
1086
1190
  .c4p--add-select__next__selection-summary-item-content {
1087
- margin-block-start: 0.5rem;
1191
+ margin-block-start: 0;
1088
1192
  }
1089
1193
 
1090
1194
  .c4p--add-select__next__selection-summary .cds--accordion__arrow {
1091
- transform: rotate(0deg);
1195
+ transform: rotate(90deg);
1092
1196
  }
1093
1197
  .c4p--add-select__next__selection-summary .cds--accordion__item--active .cds--accordion__arrow {
1094
- transform: rotate(90deg);
1198
+ transform: rotate(-90deg);
1095
1199
  }
1096
1200
  .c4p--add-select__next__selection-summary .cds--accordion--start .cds--accordion__arrow {
1097
- margin: 0 0 0 1rem;
1201
+ margin-block: 0;
1202
+ margin-inline-end: 0;
1203
+ margin-inline-start: 1rem;
1098
1204
  }
1099
1205
  .c4p--add-select__next__selection-summary .cds--accordion--start .cds--accordion__title {
1100
- margin: 0 1rem 0 0.5rem;
1206
+ margin-inline-end: 0;
1207
+ margin-inline-start: 0.5rem;
1101
1208
  padding-inline-end: 2rem;
1102
1209
  }
1103
1210
  .c4p--add-select__next__selection-summary .cds--accordion__item--active .cds--accordion__content {
1104
- margin-block-start: 0.5rem;
1105
- padding-block: 0;
1211
+ margin-block-start: 0;
1212
+ padding-block: 1rem;
1213
+ padding-inline: 1rem;
1106
1214
  }
1107
1215
 
1108
- .c4p--add-select__next__item-summary-panel {
1109
- padding: 1rem;
1110
- }
1111
1216
  .c4p--add-select__next__item-summary-panel-header {
1112
1217
  display: flex;
1113
1218
  align-items: center;
1114
1219
  justify-content: space-between;
1115
- margin-block-end: 1rem;
1220
+ border-block-end: 1px solid var(--cds-layer-accent-01, #e0e0e0);
1221
+ gap: 0.5rem;
1222
+ padding-block-end: 0.5rem;
1223
+ padding-block-start: 2rem;
1224
+ padding-inline: 1rem;
1116
1225
  }
1117
1226
  .c4p--add-select__next__item-summary-panel-title {
1118
- font-size: var(--cds-heading-03-font-size, 1.25rem);
1119
- font-weight: var(--cds-heading-03-font-weight, 400);
1120
- line-height: var(--cds-heading-03-line-height, 1.4);
1121
- letter-spacing: var(--cds-heading-03-letter-spacing, 0);
1227
+ font-size: var(--cds-heading-compact-02-font-size, 1rem);
1228
+ font-weight: var(--cds-heading-compact-02-font-weight, 600);
1229
+ line-height: var(--cds-heading-compact-02-line-height, 1.375);
1230
+ letter-spacing: var(--cds-heading-compact-02-letter-spacing, 0);
1231
+ }
1232
+ .c4p--add-select__next__item-summary-panel-body {
1233
+ padding-block: 1rem;
1234
+ padding-inline: 1rem;
1122
1235
  }
1123
1236
  .c4p--add-select__next__item-summary-panel-entry {
1124
1237
  margin-block-end: 1rem;
@@ -1625,6 +1738,7 @@ button.c4p--add-select__global-filter-toggle--open {
1625
1738
  .c4p--card-next {
1626
1739
  position: relative;
1627
1740
  border: 1px solid var(--cds-border-subtle-01, #c6c6c6);
1741
+ border-radius: 0;
1628
1742
  background-color: var(--cds-layer-01, #f4f4f4);
1629
1743
  color: var(--cds-text-primary, #161616);
1630
1744
  }
@@ -1658,10 +1772,10 @@ button.c4p--add-select__global-filter-toggle--open {
1658
1772
  }
1659
1773
 
1660
1774
  .c4p--card-next__header {
1775
+ position: relative;
1661
1776
  display: flex;
1662
1777
  flex-direction: column;
1663
- padding: 1rem;
1664
- gap: 0.5rem;
1778
+ gap: 0.125rem;
1665
1779
  }
1666
1780
 
1667
1781
  .c4p--card-next__body {
@@ -1669,17 +1783,301 @@ button.c4p--add-select__global-filter-toggle--open {
1669
1783
  font-weight: var(--cds-body-compact-01-font-weight, 400);
1670
1784
  line-height: var(--cds-body-compact-01-line-height, 1.28572);
1671
1785
  letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
1672
- padding: 1rem;
1673
- padding-block-start: 0;
1786
+ margin-block: 1rem;
1787
+ margin-block-start: 0;
1788
+ margin-inline: 1rem;
1789
+ }
1790
+
1791
+ .c4p--card-next > .c4p--card-next__body:first-child {
1792
+ margin-block-start: 1rem;
1674
1793
  }
1675
1794
 
1676
1795
  .c4p--card-next__footer {
1677
1796
  display: flex;
1678
1797
  align-items: center;
1679
- justify-content: flex-end;
1680
1798
  padding: 1rem;
1799
+ }
1800
+
1801
+ .c4p--card-next__footer:has(> .c4p--card-next__action) {
1802
+ overflow: hidden;
1803
+ padding: 0;
1804
+ border-block-start: 1px solid var(--cds-border-subtle);
1805
+ gap: 1px;
1806
+ }
1807
+
1808
+ .c4p--card-next__footer > .c4p--card-next__action:not(:has(.cds--btn--icon-only)) {
1809
+ flex: 1 0 0;
1810
+ min-inline-size: 0;
1811
+ }
1812
+ .c4p--card-next__footer > .c4p--card-next__action:not(:has(.cds--btn--icon-only)) > .cds--btn,
1813
+ .c4p--card-next__footer > .c4p--card-next__action:not(:has(.cds--btn--icon-only)) > * > .cds--btn {
1814
+ inline-size: 100%;
1815
+ max-inline-size: none;
1816
+ }
1817
+
1818
+ .c4p--card-next__footer > .c4p--card-next__action:has(.cds--btn--icon-only) {
1819
+ flex: 0 0 auto;
1820
+ margin-inline-start: auto;
1821
+ }
1822
+
1823
+ .c4p--card-next__footer > .c4p--card-next__action:has(.cds--btn--icon-only) + .c4p--card-next__action:has(.cds--btn--icon-only) {
1824
+ margin-inline-start: 0;
1825
+ }
1826
+
1827
+ .c4p--card-next__action {
1828
+ display: inline-flex;
1829
+ }
1830
+
1831
+ .c4p--card-next__header-media {
1832
+ display: flex;
1833
+ flex-shrink: 0;
1834
+ align-items: flex-start;
1835
+ justify-content: flex-start;
1836
+ block-size: auto;
1837
+ inline-size: auto;
1838
+ margin-block-end: 1rem;
1839
+ margin-block-start: 1rem;
1840
+ margin-inline-end: 1rem;
1841
+ margin-inline-start: 1rem;
1842
+ max-block-size: 4rem;
1843
+ }
1844
+
1845
+ .c4p--card-next__header > .c4p--card-next__header-media:not(:first-child) {
1846
+ margin-inline-start: 1rem;
1847
+ }
1848
+
1849
+ .c4p--card-next__header:has(> .c4p--card-next__header-media:first-child + .c4p--card-next__actions) > .c4p--card-next__header-media:first-child {
1850
+ margin-inline-end: 0;
1851
+ }
1852
+ .c4p--card-next__header:has(> .c4p--card-next__header-media:first-child + .c4p--card-next__actions) > .c4p--card-next__actions {
1853
+ margin-inline-start: auto;
1854
+ }
1855
+
1856
+ .c4p--card-next__media {
1857
+ inline-size: 100%;
1858
+ }
1859
+
1860
+ .c4p--card-next__label {
1861
+ font-size: var(--cds-label-01-font-size, 0.75rem);
1862
+ font-weight: var(--cds-label-01-font-weight, 400);
1863
+ line-height: var(--cds-label-01-line-height, 1.33333);
1864
+ letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
1865
+ color: var(--cds-text-secondary, #525252);
1866
+ margin-block-start: 1rem;
1867
+ margin-inline: 1rem;
1868
+ }
1869
+ .c4p--card-next__label--truncate {
1870
+ overflow: hidden;
1871
+ text-overflow: ellipsis;
1872
+ white-space: nowrap;
1873
+ }
1874
+
1875
+ .c4p--card-next__title-content > .c4p--card-next__label {
1876
+ margin-inline: 0;
1877
+ }
1878
+
1879
+ .c4p--card-next__title {
1880
+ color: var(--cds-text-primary, #161616);
1881
+ margin-inline: 1rem;
1882
+ }
1883
+ .c4p--card-next__title--truncate {
1884
+ overflow: hidden;
1885
+ text-overflow: ellipsis;
1886
+ white-space: nowrap;
1887
+ }
1888
+ .c4p--card-next__title--truncate-multi {
1889
+ display: -webkit-box;
1890
+ overflow: hidden;
1891
+ -webkit-box-orient: vertical;
1892
+ text-overflow: ellipsis;
1893
+ }
1894
+
1895
+ .c4p--card-next__title-content > .c4p--card-next__title {
1896
+ margin-inline: 0;
1897
+ }
1898
+
1899
+ .c4p--card-next__title-media {
1900
+ display: flex;
1901
+ flex-shrink: 0;
1902
+ align-items: center;
1903
+ justify-content: center;
1904
+ margin-block-start: 1rem;
1905
+ margin-inline-start: 1rem;
1906
+ max-block-size: 4rem;
1907
+ }
1908
+
1909
+ .c4p--card-next__header-content {
1910
+ display: flex;
1911
+ flex: 1;
1912
+ flex-direction: row;
1913
+ align-items: flex-start;
1914
+ gap: 1rem;
1915
+ min-inline-size: 0;
1916
+ }
1917
+
1918
+ .c4p--card-next__title-content {
1919
+ display: flex;
1920
+ flex: 1;
1921
+ flex-direction: column;
1922
+ gap: 0.125rem;
1923
+ min-inline-size: 0;
1924
+ padding-inline-end: 1rem;
1925
+ }
1926
+
1927
+ .c4p--card-next--expressive .c4p--card-next__title {
1928
+ font-size: var(--cds-heading-03-font-size, 1.25rem);
1929
+ font-weight: var(--cds-heading-03-font-weight, 400);
1930
+ line-height: var(--cds-heading-03-line-height, 1.4);
1931
+ letter-spacing: var(--cds-heading-03-letter-spacing, 0);
1932
+ }
1933
+
1934
+ .c4p--card-next--productive .c4p--card-next__title {
1935
+ font-size: var(--cds-heading-compact-02-font-size, 1rem);
1936
+ font-weight: var(--cds-heading-compact-02-font-weight, 600);
1937
+ line-height: var(--cds-heading-compact-02-line-height, 1.375);
1938
+ letter-spacing: var(--cds-heading-compact-02-letter-spacing, 0);
1939
+ }
1940
+
1941
+ .c4p--card-next__title--with-start-icon {
1942
+ display: flex;
1943
+ align-items: flex-start;
1681
1944
  gap: 0.5rem;
1682
- padding-block-start: 0;
1945
+ }
1946
+
1947
+ .c4p--card-next__title--with-end-icon {
1948
+ display: block;
1949
+ }
1950
+
1951
+ .c4p--card-next__title-start-icon {
1952
+ display: flex;
1953
+ flex-shrink: 0;
1954
+ margin-block: 0.125rem;
1955
+ }
1956
+
1957
+ .c4p--card-next__title-end-icon {
1958
+ display: inline-flex;
1959
+ align-items: center;
1960
+ margin-inline-start: 0.5rem;
1961
+ vertical-align: middle;
1962
+ }
1963
+
1964
+ .c4p--card-next__header > .c4p--card-next__title:first-child,
1965
+ .c4p--card-next__header > .c4p--card-next__header-media:first-child + .c4p--card-next__title,
1966
+ .c4p--card-next__header > .c4p--card-next__media:first-child + .c4p--card-next__title,
1967
+ .c4p--card-next__title-content > .c4p--card-next__title:first-child {
1968
+ margin-block-start: 1rem;
1969
+ }
1970
+
1971
+ .c4p--card-next__header > .c4p--card-next__title:last-child,
1972
+ .c4p--card-next__title-content > .c4p--card-next__title:last-child,
1973
+ .c4p--card-next__title:not(:has(+ .c4p--card-next__caption)) {
1974
+ margin-block-end: 1rem;
1975
+ }
1976
+
1977
+ .c4p--card-next__caption {
1978
+ font-size: var(--cds-label-01-font-size, 0.75rem);
1979
+ font-weight: var(--cds-label-01-font-weight, 400);
1980
+ line-height: var(--cds-label-01-line-height, 1.33333);
1981
+ letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
1982
+ color: var(--cds-text-secondary, #525252);
1983
+ margin-block-end: 1rem;
1984
+ margin-inline: 1rem;
1985
+ }
1986
+ .c4p--card-next__caption--truncate {
1987
+ overflow: hidden;
1988
+ text-overflow: ellipsis;
1989
+ white-space: nowrap;
1990
+ }
1991
+
1992
+ .c4p--card-next__title-content > .c4p--card-next__caption {
1993
+ margin-inline: 0;
1994
+ }
1995
+
1996
+ .c4p--card-next__actions {
1997
+ position: absolute;
1998
+ display: inline-flex;
1999
+ align-items: center;
2000
+ justify-content: flex-end;
2001
+ block-size: 2rem;
2002
+ gap: 0.25rem;
2003
+ inline-size: 50%;
2004
+ inset-block-start: 0.5rem;
2005
+ inset-inline-end: 0.5rem;
2006
+ max-inline-size: 50%;
2007
+ }
2008
+
2009
+ .c4p--card-next__header:has(> .c4p--card-next__header-media:first-child) .c4p--card-next__actions {
2010
+ margin-block-end: 2rem;
2011
+ }
2012
+
2013
+ .c4p--card-next__action {
2014
+ display: inline-flex;
2015
+ }
2016
+
2017
+ .c4p--card-next--has-ai-label {
2018
+ background: linear-gradient(to top, var(--cds-layer, var(--cds-ai-popover-background, #ffffff)) 0%, var(--cds-ai-aura-start, rgba(69, 137, 255, 0.1)) 0%, 15%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%) padding-box, linear-gradient(to top, var(--cds-layer, var(--cds-ai-popover-background, #ffffff)), var(--cds-layer, var(--cds-ai-popover-background, #ffffff))) padding-box, linear-gradient(to bottom, var(--cds-ai-border-start, rgba(166, 200, 255, 0.64)), var(--cds-ai-border-end, #78a9ff)) border-box, linear-gradient(to top, var(--cds-layer, var(--cds-ai-popover-background, #ffffff)), var(--cds-layer, var(--cds-ai-popover-background, #ffffff))) border-box;
2019
+ border: 1px solid transparent;
2020
+ box-shadow: inset 0 -80px 70px -65px var(--cds-ai-inner-shadow, rgba(69, 137, 255, 0.1)), 0 4px 10px 2px var(--cds-ai-drop-shadow, rgba(15, 98, 254, 0.1));
2021
+ }
2022
+
2023
+ .c4p--card-next__decorator {
2024
+ position: absolute;
2025
+ z-index: 1;
2026
+ display: flex;
2027
+ align-items: center;
2028
+ block-size: 2rem;
2029
+ inset-block-start: 0.5rem;
2030
+ inset-inline-end: 0.5rem;
2031
+ }
2032
+
2033
+ .c4p--card-next--has-ai-label .c4p--card-next__title {
2034
+ padding-inline-end: 3rem;
2035
+ }
2036
+
2037
+ .c4p--card-next--has-ai-label:has(.c4p--card-next__actions) .c4p--card-next__title {
2038
+ padding-inline-end: 10rem;
2039
+ }
2040
+
2041
+ .c4p--card-next--has-ai-label .c4p--card-next__label {
2042
+ padding-inline-end: 3rem;
2043
+ }
2044
+
2045
+ .c4p--card-next--has-ai-label:has(.c4p--card-next__actions) .c4p--card-next__label {
2046
+ padding-inline-end: 10rem;
2047
+ }
2048
+
2049
+ .c4p--card-next--has-ai-label .c4p--card-next__caption {
2050
+ padding-inline-end: 3rem;
2051
+ }
2052
+
2053
+ .c4p--card-next--has-ai-label:has(.c4p--card-next__actions) .c4p--card-next__caption {
2054
+ padding-inline-end: 10rem;
2055
+ }
2056
+
2057
+ .c4p--card-next--has-ai-label .c4p--card-next__actions {
2058
+ inset-inline-end: 2.5rem;
2059
+ }
2060
+
2061
+ .c4p--card-next--has-ai-label .c4p--card-next__header > .c4p--card-next__title:not(:has(+ .c4p--card-next__caption)) {
2062
+ margin-block-end: 1rem;
2063
+ }
2064
+
2065
+ .c4p--card-next__clickable.c4p--card-next--has-ai-label::before {
2066
+ background: linear-gradient(to top, var(--cds-ai-aura-hover-start, rgba(69, 137, 255, 0.32)) 0%, 15%, var(--cds-ai-aura-hover-end, rgba(255, 255, 255, 0)) 50%) padding-box, linear-gradient(to top, var(--cds-ai-aura-hover-background, #edf5ff), var(--cds-ai-aura-hover-background, #edf5ff)) padding-box, linear-gradient(to bottom, var(--cds-ai-border-start, rgba(166, 200, 255, 0.64)), var(--cds-ai-border-end, #78a9ff)) border-box, linear-gradient(to top, var(--cds-ai-aura-hover-background, #edf5ff), var(--cds-ai-aura-hover-background, #edf5ff)) border-box;
2067
+ position: absolute;
2068
+ display: block;
2069
+ block-size: 100%;
2070
+ box-shadow: inset 0 -80px 70px -65px var(--cds-ai-inner-shadow, rgba(69, 137, 255, 0.1));
2071
+ content: "";
2072
+ inline-size: 100%;
2073
+ inset-block-start: 0;
2074
+ inset-inline-start: 0;
2075
+ opacity: 0;
2076
+ transition: opacity 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
2077
+ }
2078
+
2079
+ .c4p--card-next__clickable.c4p--card-next--has-ai-label:hover::before {
2080
+ opacity: 1;
1683
2081
  }
1684
2082
 
1685
2083
  @keyframes fade {
@@ -8514,7 +8912,6 @@ button.c4p--add-select__global-filter-toggle--open {
8514
8912
  max-block-size: 50vh;
8515
8913
  opacity: 1;
8516
8914
  transition: max-block-size 240ms cubic-bezier(0, 0, 0.3, 1), opacity 240ms cubic-bezier(0, 0, 0.3, 1), margin 240ms cubic-bezier(0, 0, 0.3, 1), padding 240ms cubic-bezier(0, 0, 0.3, 1);
8517
- visibility: hidden;
8518
8915
  }
8519
8916
  .c4p--tearsheet__next .c4p--tearsheet__next__header .c4p--tearsheet__next__header-actions,
8520
8917
  .c4p--tearsheet__next .c4p--tearsheet__next__header .c4p--tearsheet__next__header-content-wrapper .c4p--tearsheet__next__header-content *:not(.c4p--tearsheet__next__content__title-wrapper,
@@ -8522,8 +8919,11 @@ button.c4p--add-select__global-filter-toggle--open {
8522
8919
  opacity: 1;
8523
8920
  transition: all 240ms cubic-bezier(0, 0, 0.3, 1), opacity 240ms cubic-bezier(0, 0, 0.3, 1);
8524
8921
  }
8922
+ .c4p--tearsheet__next .cds--modal-close {
8923
+ transition: all 240ms ease;
8924
+ }
8525
8925
  .c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed {
8526
- padding-block-start: 0.75rem;
8926
+ padding-block-start: 0;
8527
8927
  transition: padding 240ms cubic-bezier(0, 0, 0.3, 1);
8528
8928
  }
8529
8929
  .c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed > *:not(.c4p--tearsheet__next__navigation-bar,
@@ -8556,6 +8956,7 @@ button.c4p--add-select__global-filter-toggle--open {
8556
8956
  line-height: var(--cds-label-02-line-height, 1.28572);
8557
8957
  letter-spacing: var(--cds-label-02-letter-spacing, 0.16px);
8558
8958
  align-items: center;
8959
+ gap: 0.5rem;
8559
8960
  margin-block-start: 0.25rem;
8560
8961
  transition: all 240ms cubic-bezier(0, 0, 0.3, 1);
8561
8962
  }
@@ -8572,8 +8973,21 @@ button.c4p--add-select__global-filter-toggle--open {
8572
8973
  align-self: center;
8573
8974
  margin-block-end: 0;
8574
8975
  }
8976
+ .c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed .cds--modal-close {
8977
+ block-size: 2.5rem;
8978
+ inline-size: 2.5rem;
8979
+ transition: all 240ms ease;
8980
+ }
8981
+ .c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed .c4p--tearsheet__next__decorator {
8982
+ inset-block-start: 0.5rem;
8983
+ }
8984
+ .c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed .c4p--tearsheet__next__header-title {
8985
+ block-size: 2.5rem;
8986
+ }
8575
8987
  .c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed .c4p--tearsheet__next__content__header-actions {
8576
- margin-block-start: -0.125rem;
8988
+ block-size: 1.5rem;
8989
+ margin-block-start: 0.5rem;
8990
+ transition: all 240ms ease;
8577
8991
  }
8578
8992
  @media (max-width: 41.98rem) {
8579
8993
  .c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed .c4p--tearsheet__next__header-actions {
@@ -8590,7 +9004,6 @@ button.c4p--add-select__global-filter-toggle--open {
8590
9004
  }
8591
9005
  .c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed .c4p--tearsheet__next__header-content-wrapper {
8592
9006
  min-block-size: 2.5rem;
8593
- padding-block-end: 0.75rem;
8594
9007
  }
8595
9008
  .c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed .c4p--tearsheet__next__navigation-bar::before {
8596
9009
  position: absolute;
@@ -8787,6 +9200,9 @@ button.c4p--add-select__global-filter-toggle--open {
8787
9200
  .c4p--tearsheet__next__body > *:only-child {
8788
9201
  grid-column: 1/-1;
8789
9202
  }
9203
+ .c4p--tearsheet__next__body .cds--tab-content {
9204
+ padding: 0;
9205
+ }
8790
9206
 
8791
9207
  .c4p--tearsheet__next__footer {
8792
9208
  overflow: hidden;
@@ -8869,6 +9285,16 @@ button.c4p--add-select__global-filter-toggle--open {
8869
9285
  min-block-size: 0;
8870
9286
  }
8871
9287
 
9288
+ .c4p--tearsheet__next--narrow .c4p--tearsheet__next__container {
9289
+ inline-size: 480px;
9290
+ max-inline-size: 480px;
9291
+ }
9292
+ @media (width <= 480px) {
9293
+ .c4p--tearsheet__next--narrow .c4p--tearsheet__next__container {
9294
+ inline-size: 100%;
9295
+ max-inline-size: 100%;
9296
+ }
9297
+ }
8872
9298
  .c4p--tearsheet__next--narrow .c4p--tearsheet__next__header {
8873
9299
  padding-inline: 1rem;
8874
9300
  }
@@ -15079,6 +15505,10 @@ th.c4p--datagrid__select-all-toggle-on.button {
15079
15505
  display: none;
15080
15506
  }
15081
15507
 
15508
+ .c4p--big-number {
15509
+ margin: 0;
15510
+ }
15511
+
15082
15512
  .c4p--big-number__label {
15083
15513
  font-size: var(--cds-label-01-font-size, 0.75rem);
15084
15514
  font-weight: var(--cds-label-01-font-weight, 400);
@@ -23666,11 +24096,13 @@ em {
23666
24096
  border-block-end: 1px solid var(--cds-border-subtle);
23667
24097
  }
23668
24098
 
23669
- .cds--accordion__item:not(.cds--accordion__item--active):hover, .cds--accordion__item:not(.cds--accordion__item--active):hover + .cds--accordion__item {
23670
- border-block-start-color: var(--cds-layer-hover);
23671
- }
23672
- .cds--accordion__item:not(.cds--accordion__item--active):last-child:hover {
23673
- border-block-end-color: var(--cds-layer-hover);
24099
+ @media (any-hover: hover) {
24100
+ .cds--accordion__item:not(.cds--accordion__item--active):hover, .cds--accordion__item:not(.cds--accordion__item--active):hover + .cds--accordion__item {
24101
+ border-block-start-color: var(--cds-layer-hover);
24102
+ }
24103
+ .cds--accordion__item:not(.cds--accordion__item--active):last-child:hover {
24104
+ border-block-end-color: var(--cds-layer-hover);
24105
+ }
23674
24106
  }
23675
24107
 
23676
24108
  .cds--accordion__heading {
@@ -23712,9 +24144,11 @@ em {
23712
24144
  min-block-size: var(--cds-layout-size-height-local);
23713
24145
  padding-inline-end: var(--cds-layout-density-padding-inline-local);
23714
24146
  }
23715
- .cds--accordion__heading:hover {
23716
- background-color: var(--cds-layer-hover);
23717
- outline: none;
24147
+ @media (any-hover: hover) {
24148
+ .cds--accordion__heading:hover {
24149
+ background-color: var(--cds-layer-hover);
24150
+ outline: none;
24151
+ }
23718
24152
  }
23719
24153
  .cds--accordion__heading:focus {
23720
24154
  position: relative;
@@ -23738,10 +24172,11 @@ em {
23738
24172
  fill: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
23739
24173
  }
23740
24174
 
23741
- .cds--accordion__heading[disabled]:hover::before {
23742
- background-color: transparent;
24175
+ @media (any-hover: hover) {
24176
+ .cds--accordion__heading[disabled]:hover::before {
24177
+ background-color: transparent;
24178
+ }
23743
24179
  }
23744
-
23745
24180
  .cds--accordion__item--disabled,
23746
24181
  .cds--accordion__item--disabled + .cds--accordion__item {
23747
24182
  border-block-start: 1px solid var(--cds-border-subtle);
@@ -23860,7 +24295,7 @@ li.cds--accordion__item--disabled:last-of-type {
23860
24295
  position: relative;
23861
24296
  border-color: transparent;
23862
24297
  }
23863
- .cds--accordion--flush .cds--accordion__item:last-child, .cds--accordion--flush .cds--accordion__item:hover, .cds--accordion--flush .cds--accordion__item:last-child:hover, .cds--accordion--flush .cds--accordion__item:hover + .cds--accordion__item {
24298
+ .cds--accordion--flush .cds--accordion__item:last-child {
23864
24299
  border-color: transparent;
23865
24300
  }
23866
24301
  .cds--accordion--flush .cds--accordion__item::before, .cds--accordion--flush .cds--accordion__item::after {
@@ -23886,35 +24321,45 @@ li.cds--accordion__item--disabled:last-of-type {
23886
24321
  inset-block-end: -1px;
23887
24322
  }
23888
24323
 
23889
- .cds--accordion--flush .cds--accordion__heading:hover {
23890
- position: relative;
23891
- z-index: 1;
24324
+ @media (any-hover: hover) {
24325
+ .cds--accordion--flush .cds--accordion__item:hover,
24326
+ .cds--accordion--flush .cds--accordion__item:last-child:hover,
24327
+ .cds--accordion--flush .cds--accordion__item:hover + .cds--accordion__item {
24328
+ border-color: transparent;
24329
+ }
23892
24330
  }
23893
- .cds--accordion--flush .cds--accordion__heading:hover::before, .cds--accordion--flush .cds--accordion__heading:hover::after {
23894
- position: absolute;
23895
- display: block;
23896
- background: var(--cds-layer-hover);
23897
- block-size: 1px;
23898
- content: "";
23899
- inline-size: 100%;
23900
- inset-inline-start: 0;
23901
- transition: background cubic-bezier(0.2, 0, 0.38, 0.9) 110ms;
24331
+ @media (any-hover: hover) {
24332
+ .cds--accordion--flush .cds--accordion__heading:hover {
24333
+ position: relative;
24334
+ z-index: 1;
24335
+ }
24336
+ .cds--accordion--flush .cds--accordion__heading:hover::before, .cds--accordion--flush .cds--accordion__heading:hover::after {
24337
+ position: absolute;
24338
+ display: block;
24339
+ background: var(--cds-layer-hover);
24340
+ block-size: 1px;
24341
+ content: "";
24342
+ inline-size: 100%;
24343
+ inset-inline-start: 0;
24344
+ transition: background cubic-bezier(0.2, 0, 0.38, 0.9) 110ms;
24345
+ }
23902
24346
  }
23903
- @media screen and (prefers-reduced-motion: reduce) {
24347
+ @media screen and (any-hover: hover) and (prefers-reduced-motion: reduce) {
23904
24348
  .cds--accordion--flush .cds--accordion__heading:hover::before, .cds--accordion--flush .cds--accordion__heading:hover::after {
23905
24349
  transition: none;
23906
24350
  }
23907
24351
  }
23908
- .cds--accordion--flush .cds--accordion__heading:hover::before {
23909
- inset-block-start: -1px;
23910
- }
23911
- .cds--accordion--flush .cds--accordion__heading:hover::after {
23912
- inset-block-end: -1px;
23913
- }
23914
- .cds--accordion--flush .cds--accordion__heading:hover:focus::after, .cds--accordion--flush .cds--accordion__heading:hover:focus::before {
23915
- background: none;
24352
+ @media (any-hover: hover) {
24353
+ .cds--accordion--flush .cds--accordion__heading:hover::before {
24354
+ inset-block-start: -1px;
24355
+ }
24356
+ .cds--accordion--flush .cds--accordion__heading:hover::after {
24357
+ inset-block-end: -1px;
24358
+ }
24359
+ .cds--accordion--flush .cds--accordion__heading:hover:focus::after, .cds--accordion--flush .cds--accordion__heading:hover:focus::before {
24360
+ background: none;
24361
+ }
23916
24362
  }
23917
-
23918
24363
  .cds--accordion.cds--skeleton .cds--accordion__heading,
23919
24364
  .cds--accordion.cds--skeleton .cds--accordion__button {
23920
24365
  cursor: default;
@@ -23925,17 +24370,25 @@ li.cds--accordion__item--disabled:last-of-type {
23925
24370
  fill: var(--cds-icon-primary, #161616);
23926
24371
  pointer-events: none;
23927
24372
  }
23928
- .cds--accordion.cds--skeleton .cds--accordion__arrow:hover, .cds--accordion.cds--skeleton .cds--accordion__arrow:focus, .cds--accordion.cds--skeleton .cds--accordion__arrow:active {
24373
+ .cds--accordion.cds--skeleton .cds--accordion__arrow:focus, .cds--accordion.cds--skeleton .cds--accordion__arrow:active {
23929
24374
  border: none;
23930
24375
  cursor: default;
23931
24376
  outline: none;
23932
24377
  }
23933
24378
 
23934
- .cds--accordion.cds--skeleton .cds--accordion__heading:hover::before,
23935
- .cds--accordion.cds--skeleton .cds--accordion__heading:hover {
23936
- background-color: transparent;
24379
+ @media (any-hover: hover) {
24380
+ .cds--accordion.cds--skeleton .cds--accordion__arrow:hover {
24381
+ border: none;
24382
+ cursor: default;
24383
+ outline: none;
24384
+ }
24385
+ }
24386
+ @media (any-hover: hover) {
24387
+ .cds--accordion.cds--skeleton .cds--accordion__heading:hover::before,
24388
+ .cds--accordion.cds--skeleton .cds--accordion__heading:hover {
24389
+ background-color: transparent;
24390
+ }
23937
24391
  }
23938
-
23939
24392
  .cds--accordion--end.cds--skeleton .cds--accordion__arrow {
23940
24393
  margin-inline-start: 1rem;
23941
24394
  }
@@ -24764,8 +25217,10 @@ li.cds--accordion__item--disabled:last-of-type {
24764
25217
  outline-style: dotted;
24765
25218
  }
24766
25219
  }
24767
- .cds--popover--tab-tip__button:hover {
24768
- background-color: var(--cds-layer-hover);
25220
+ @media (any-hover: hover) {
25221
+ .cds--popover--tab-tip__button:hover {
25222
+ background-color: var(--cds-layer-hover);
25223
+ }
24769
25224
  }
24770
25225
  .cds--popover--tab-tip__button svg {
24771
25226
  fill: var(--cds-icon-primary, #161616);
@@ -27172,7 +27627,7 @@ a.cds--overflow-menu-options__btn::before {
27172
27627
  font-weight: var(--cds-body-compact-01-font-weight, 400);
27173
27628
  line-height: var(--cds-body-compact-01-line-height, 1.28572);
27174
27629
  letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
27175
- display: inline;
27630
+ display: inline-flex;
27176
27631
  color: var(--cds-link-text-color, var(--cds-link-primary, #0f62fe));
27177
27632
  outline: none;
27178
27633
  text-decoration: none;
@@ -27244,12 +27699,10 @@ a.cds--overflow-menu-options__btn::before {
27244
27699
  text-decoration: none;
27245
27700
  }
27246
27701
 
27247
- .cds--link.cds--link--visited,
27248
27702
  .cds--link.cds--link--visited:visited {
27249
27703
  color: var(--cds-link-visited-text-color, var(--cds-link-visited, #8a3ffc));
27250
27704
  }
27251
27705
 
27252
- .cds--link.cds--link--visited:hover,
27253
27706
  .cds--link.cds--link--visited:visited:hover {
27254
27707
  color: var(--cds-link-hover-text-color, var(--cds-link-primary-hover, #0043ce));
27255
27708
  }
@@ -27278,6 +27731,10 @@ a.cds--overflow-menu-options__btn::before {
27278
27731
  letter-spacing: var(--cds-body-compact-02-letter-spacing, 0);
27279
27732
  }
27280
27733
 
27734
+ .cds--link--icon {
27735
+ display: inline-block;
27736
+ }
27737
+
27281
27738
  .cds--link__icon {
27282
27739
  display: inline-flex;
27283
27740
  align-items: center;
@@ -30097,15 +30554,16 @@ fieldset[disabled] .cds--form__helper-text {
30097
30554
  font-weight: 600;
30098
30555
  }
30099
30556
  .cds--list-box {
30557
+ --cds-layout-size-height-local: clamp(max(var(--cds-layout-size-height-min), var(--cds-layout-size-height-xs)), var(--cds-layout-size-height, var(--cds-layout-size-height-md)), min(var(--cds-layout-size-height-max), var(--cds-layout-size-height-lg)));
30100
30558
  position: relative;
30101
30559
  border: none;
30102
30560
  background-color: var(--cds-field);
30103
- block-size: 2.5rem;
30561
+ block-size: var(--cds-layout-size-height-local);
30104
30562
  border-block-end: 1px solid var(--cds-border-strong);
30105
30563
  color: var(--cds-text-primary, #161616);
30106
30564
  cursor: pointer;
30107
30565
  inline-size: 100%;
30108
- max-block-size: 2.5rem;
30566
+ max-block-size: var(--cds-layout-size-height-local);
30109
30567
  transition: all 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
30110
30568
  }
30111
30569
  .cds--list-box:hover {
@@ -30116,16 +30574,6 @@ fieldset[disabled] .cds--form__helper-text {
30116
30574
  cursor: default;
30117
30575
  }
30118
30576
 
30119
- .cds--list-box--lg {
30120
- block-size: 3rem;
30121
- max-block-size: 3rem;
30122
- }
30123
-
30124
- .cds--list-box--sm {
30125
- block-size: 2rem;
30126
- max-block-size: 2rem;
30127
- }
30128
-
30129
30577
  .cds--list-box--expanded {
30130
30578
  border-block-end-color: var(--cds-border-subtle-01, #c6c6c6);
30131
30579
  }
@@ -30599,15 +31047,7 @@ fieldset[disabled] .cds--form__helper-text {
30599
31047
 
30600
31048
  .cds--list-box--expanded .cds--list-box__menu {
30601
31049
  display: block;
30602
- max-block-size: 13.75rem;
30603
- }
30604
-
30605
- .cds--list-box--expanded.cds--list-box--lg .cds--list-box__menu {
30606
- max-block-size: 16.5rem;
30607
- }
30608
-
30609
- .cds--list-box--expanded.cds--list-box--sm .cds--list-box__menu {
30610
- max-block-size: 11rem;
31050
+ max-block-size: calc(var(--cds-layout-size-height-local) * 5.5);
30611
31051
  }
30612
31052
 
30613
31053
  .cds--list-box__menu-item {
@@ -30616,7 +31056,7 @@ fieldset[disabled] .cds--form__helper-text {
30616
31056
  line-height: var(--cds-body-compact-01-line-height, 1.28572);
30617
31057
  letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
30618
31058
  position: relative;
30619
- block-size: 2.5rem;
31059
+ block-size: var(--cds-layout-size-height-local);
30620
31060
  color: var(--cds-text-secondary, #525252);
30621
31061
  cursor: pointer;
30622
31062
  transition: background 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
@@ -30633,14 +31073,6 @@ fieldset[disabled] .cds--form__helper-text {
30633
31073
  background-color: var(--cds-layer-hover);
30634
31074
  }
30635
31075
 
30636
- .cds--list-box--sm .cds--list-box__menu-item {
30637
- block-size: 2rem;
30638
- }
30639
-
30640
- .cds--list-box--lg .cds--list-box__menu-item {
30641
- block-size: 3rem;
30642
- }
30643
-
30644
31076
  .cds--list-box--disabled .cds--list-box__menu-item:hover {
30645
31077
  background-color: transparent;
30646
31078
  }
@@ -30708,9 +31140,9 @@ fieldset[disabled] .cds--form__helper-text {
30708
31140
  outline-offset: -2px;
30709
31141
  display: block;
30710
31142
  overflow: hidden;
30711
- padding: 0.6875rem 0;
31143
+ padding: calc((var(--cds-layout-size-height-local) - 1rem) / 2 - 1px) 0;
30712
31144
  margin: 0 1rem;
30713
- block-size: 2.5rem;
31145
+ block-size: var(--cds-layout-size-height-local);
30714
31146
  border-block-end: 1px solid transparent;
30715
31147
  border-block-start: 1px solid transparent;
30716
31148
  border-block-start-color: var(--cds-border-subtle-01, #c6c6c6);
@@ -30733,7 +31165,7 @@ fieldset[disabled] .cds--form__helper-text {
30733
31165
  }
30734
31166
  }
30735
31167
  .cds--list-box__menu-item__option:focus {
30736
- padding: 0.6875rem 1rem;
31168
+ padding: calc((var(--cds-layout-size-height-local) - 1rem) / 2) 1rem;
30737
31169
  border-color: transparent;
30738
31170
  margin: 0;
30739
31171
  }
@@ -30742,16 +31174,6 @@ fieldset[disabled] .cds--form__helper-text {
30742
31174
  color: var(--cds-text-primary, #161616);
30743
31175
  }
30744
31176
 
30745
- .cds--list-box--sm .cds--list-box__menu-item__option {
30746
- block-size: 2rem;
30747
- padding-block: 0.4375rem 0.4375rem;
30748
- }
30749
-
30750
- .cds--list-box--lg .cds--list-box__menu-item__option {
30751
- block-size: 3rem;
30752
- padding-block: 0.9375rem 0.9375rem;
30753
- }
30754
-
30755
31177
  .cds--list-box--disabled .cds--list-box__menu-item:hover .cds--list-box__menu-item__option,
30756
31178
  .cds--list-box--disabled .cds--list-box__menu-item__option {
30757
31179
  color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
@@ -30876,19 +31298,7 @@ fieldset[disabled] .cds--form__helper-text {
30876
31298
  }
30877
31299
 
30878
31300
  .cds--list-box--up .cds--list-box__menu {
30879
- inset-block-end: 2.5rem;
30880
- }
30881
-
30882
- .cds--list-box--up.cds--dropdown--sm .cds--list-box__menu,
30883
- .cds--list-box--up.cds--list-box--sm .cds--list-box__menu,
30884
- .cds--list-box--up .cds--list-box--sm .cds--list-box__menu {
30885
- inset-block-end: 2rem;
30886
- }
30887
-
30888
- .cds--list-box--up.cds--dropdown--lg .cds--list-box__menu,
30889
- .cds--list-box--up.cds--list-box--lg .cds--list-box__menu,
30890
- .cds--list-box--up .cds--list-box--lg .cds--list-box__menu {
30891
- inset-block-end: 3rem;
31301
+ inset-block-end: var(--cds-layout-size-height-local);
30892
31302
  }
30893
31303
 
30894
31304
  .cds--list-box .cds--text-input {
@@ -37881,6 +38291,10 @@ button.cds--dropdown-text:focus {
37881
38291
  inline-size: 100%;
37882
38292
  }
37883
38293
 
38294
+ .cds--multi-select .cds--list-box__field {
38295
+ block-size: 100%;
38296
+ }
38297
+
37884
38298
  .cds--multi-select .cds--list-box__field:focus {
37885
38299
  outline: 2px solid transparent;
37886
38300
  outline-offset: -2px;
@@ -37900,7 +38314,7 @@ button.cds--dropdown-text:focus {
37900
38314
  }
37901
38315
 
37902
38316
  .cds--multi-select.cds--multi-select--selectall .cds--list-box__menu-item:first-child .cds--list-box__menu-item__option {
37903
- padding: 0.6875rem 1rem;
38317
+ padding: calc((var(--cds-layout-size-height-local) - 1lh) / 2 - 1px) 1rem;
37904
38318
  margin: 0;
37905
38319
  border-block-end: 1px solid var(--cds-border-subtle-01, #c6c6c6);
37906
38320
  }
@@ -40653,7 +41067,7 @@ optgroup.cds--select-optgroup:disabled,
40653
41067
  }
40654
41068
 
40655
41069
  .cds--menu-button__container {
40656
- display: contents;
41070
+ display: inline-flex;
40657
41071
  }
40658
41072
 
40659
41073
  .cds--menu-button__trigger:not(.cds--btn--ghost) {
@@ -44676,6 +45090,10 @@ span.cds--pagination__text.cds--pagination__items-count {
44676
45090
  white-space: normal;
44677
45091
  }
44678
45092
 
45093
+ .cds--tabs.cds--tabs--vertical.cds--layout--size-sm .cds--tabs__nav-link .cds--tabs__nav-item-label {
45094
+ -webkit-line-clamp: 1;
45095
+ }
45096
+
44679
45097
  .cds--tabs,
44680
45098
  .cds--tab-content {
44681
45099
  --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));
@@ -44732,6 +45150,7 @@ span.cds--pagination__text.cds--pagination__items-count {
44732
45150
  display: none;
44733
45151
  }
44734
45152
  .cds--tabs.cds--tabs--vertical {
45153
+ --cds-layout-size-height-local: clamp(max(var(--cds-layout-size-height-min), var(--cds-layout-size-height-sm)), var(--cds-layout-size-height, var(--cds-layout-size-height-xl)), min(var(--cds-layout-size-height-max), var(--cds-layout-size-height-xl)));
44735
45154
  background: var(--cds-layer);
44736
45155
  box-shadow: inset -1px 0 var(--cds-border-subtle);
44737
45156
  grid-column: span 2;
@@ -44950,7 +45369,7 @@ span.cds--pagination__text.cds--pagination__items-count {
44950
45369
  .cds--tabs.cds--tabs--vertical .cds--tabs__nav-item {
44951
45370
  flex: none;
44952
45371
  background-color: var(--cds-layer-01, #f4f4f4);
44953
- block-size: 4rem;
45372
+ block-size: var(--cds-layout-size-height-local);
44954
45373
  border-block-end: 1px solid var(--cds-border-subtle);
44955
45374
  border-inline-end: 1px solid var(--cds-border-subtle);
44956
45375
  box-shadow: inset 3px 0 0 0 var(--cds-border-subtle);