@patternfly/patternfly 6.0.0-alpha.99 → 6.0.0-prerelease.2

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 (501) hide show
  1. package/README.md +1 -2
  2. package/assets/fontawesome/_animated.scss +1 -0
  3. package/assets/fontawesome/_bordered-pulled.scss +1 -0
  4. package/assets/fontawesome/_core.scss +2 -0
  5. package/assets/fontawesome/_fixed-width.scss +2 -0
  6. package/assets/fontawesome/_icons.scss +1 -0
  7. package/assets/fontawesome/_index.scss +12 -0
  8. package/assets/fontawesome/_larger.scss +4 -2
  9. package/assets/fontawesome/_list.scss +4 -2
  10. package/assets/fontawesome/_rotated-flipped.scss +2 -0
  11. package/assets/fontawesome/_screen-reader.scss +1 -0
  12. package/assets/fontawesome/_stacked.scss +3 -1
  13. package/assets/fontawesome/_variables.scss +3 -2
  14. package/assets/fontawesome/fontawesome.scss +12 -12
  15. package/assets/icons/iconUnicodes.json +6 -0
  16. package/assets/images/img_avatar-dark.svg +22 -16
  17. package/assets/images/img_avatar-light.svg +25 -18
  18. package/assets/images/pf-background.svg +21 -21
  19. package/assets/images/pf_logo.svg +11 -11
  20. package/assets/images/pf_logo_white.svg +16 -17
  21. package/assets/pficon/pf-v6-pficon.woff2 +0 -0
  22. package/assets/pficon/pficon.scss +310 -271
  23. package/base/_index.scss +10 -0
  24. package/base/{_globals.scss → normalize.scss} +15 -48
  25. package/base/patternfly-common.css +14 -0
  26. package/base/patternfly-common.scss +68 -2
  27. package/base/patternfly-fa-icons.css +1 -1
  28. package/base/patternfly-fa-icons.scss +35 -2
  29. package/base/patternfly-fonts.css +10 -80
  30. package/base/patternfly-fonts.scss +49 -2
  31. package/base/patternfly-pf-icons.css +158 -134
  32. package/base/patternfly-pf-icons.scss +1 -2
  33. package/base/patternfly-svg-icons.css +5 -0
  34. package/base/{_svg-icons.scss → patternfly-svg-icons.scss} +2 -0
  35. package/base/patternfly-variables.css +1082 -1206
  36. package/base/patternfly-variables.scss +20 -2
  37. package/base/reset.scss +33 -0
  38. package/base/tokens/_index.scss +6 -0
  39. package/base/tokens/tokens-charts-dark.scss +173 -0
  40. package/base/tokens/{_tokens-charts.scss → tokens-charts.scss} +162 -148
  41. package/base/tokens/{_tokens-dark.scss → tokens-dark.scss} +307 -294
  42. package/base/tokens/{_tokens-default.scss → tokens-default.scss} +574 -447
  43. package/base/tokens/{_tokens-font.scss → tokens-local.scss} +13 -34
  44. package/base/tokens/{_tokens-palette.scss → tokens-palette.scss} +69 -70
  45. package/components/AboutModalBox/about-modal-box.css +86 -81
  46. package/components/AboutModalBox/about-modal-box.scss +80 -82
  47. package/components/Accordion/accordion.css +44 -43
  48. package/components/Accordion/accordion.scss +52 -52
  49. package/components/ActionList/action-list.css +6 -5
  50. package/components/ActionList/action-list.scss +7 -5
  51. package/components/Alert/alert-group.css +72 -19
  52. package/components/Alert/alert-group.scss +105 -18
  53. package/components/Alert/alert.css +52 -59
  54. package/components/Alert/alert.scss +56 -65
  55. package/components/Avatar/avatar.css +42 -41
  56. package/components/Avatar/avatar.scss +8 -7
  57. package/components/BackToTop/back-to-top.css +19 -17
  58. package/components/BackToTop/back-to-top.scss +17 -17
  59. package/components/Backdrop/backdrop.css +1 -1
  60. package/components/Backdrop/backdrop.scss +3 -4
  61. package/components/BackgroundImage/background-image.scss +3 -4
  62. package/components/Badge/badge.css +29 -7
  63. package/components/Badge/badge.scss +33 -9
  64. package/components/Banner/banner.css +30 -37
  65. package/components/Banner/banner.scss +30 -43
  66. package/components/Brand/brand.css +14 -10
  67. package/components/Brand/brand.scss +8 -5
  68. package/components/Breadcrumb/breadcrumb.css +23 -24
  69. package/components/Breadcrumb/breadcrumb.scss +25 -28
  70. package/components/Button/button.css +150 -128
  71. package/components/Button/button.scss +155 -130
  72. package/components/CalendarMonth/calendar-month.css +46 -46
  73. package/components/CalendarMonth/calendar-month.scss +49 -50
  74. package/components/Card/card.css +110 -93
  75. package/components/Card/card.scss +118 -92
  76. package/components/Check/check.css +5 -5
  77. package/components/Check/check.scss +7 -8
  78. package/components/ClipboardCopy/clipboard-copy.css +33 -41
  79. package/components/ClipboardCopy/clipboard-copy.scss +35 -44
  80. package/components/CodeBlock/code-block.css +21 -20
  81. package/components/CodeBlock/code-block.scss +21 -21
  82. package/components/CodeEditor/code-editor.css +35 -34
  83. package/components/CodeEditor/code-editor.scss +35 -35
  84. package/components/Content/content.css +167 -153
  85. package/components/Content/content.scss +204 -145
  86. package/components/DataList/data-list-grid.css +117 -117
  87. package/components/DataList/data-list-grid.scss +22 -20
  88. package/components/DataList/data-list.css +308 -312
  89. package/components/DataList/data-list.scss +145 -152
  90. package/components/DatePicker/date-picker.css +17 -17
  91. package/components/DatePicker/date-picker.scss +17 -18
  92. package/components/DescriptionList/description-list-order.css +5 -5
  93. package/components/DescriptionList/description-list-order.scss +3 -1
  94. package/components/DescriptionList/description-list.css +46 -44
  95. package/components/DescriptionList/description-list.scss +26 -31
  96. package/components/Divider/divider.css +104 -107
  97. package/components/Divider/divider.scss +19 -19
  98. package/components/DragDrop/drag-drop.css +4 -2
  99. package/components/DragDrop/drag-drop.scss +3 -3
  100. package/components/Drawer/drawer.css +115 -114
  101. package/components/Drawer/drawer.scss +136 -134
  102. package/components/DualListSelector/dual-list-selector.css +64 -61
  103. package/components/DualListSelector/dual-list-selector.scss +54 -51
  104. package/components/EmptyState/empty-state.css +38 -37
  105. package/components/EmptyState/empty-state.scss +39 -39
  106. package/components/ExpandableSection/expandable-section.css +27 -86
  107. package/components/ExpandableSection/expandable-section.scss +32 -101
  108. package/components/FileUpload/file-upload.css +2 -2
  109. package/components/FileUpload/file-upload.scss +2 -3
  110. package/components/Form/form.css +173 -115
  111. package/components/Form/form.scss +117 -103
  112. package/components/FormControl/form-control.css +57 -57
  113. package/components/FormControl/form-control.scss +69 -67
  114. package/components/HelperText/helper-text.css +5 -4
  115. package/components/HelperText/helper-text.scss +8 -6
  116. package/components/Hint/hint.css +25 -25
  117. package/components/Hint/hint.scss +25 -27
  118. package/components/Icon/icon.css +10 -10
  119. package/components/Icon/icon.scss +11 -12
  120. package/components/InlineEdit/inline-edit.css +12 -12
  121. package/components/InlineEdit/inline-edit.scss +12 -13
  122. package/components/InputGroup/input-group.css +16 -16
  123. package/components/InputGroup/input-group.scss +18 -19
  124. package/components/JumpLinks/jump-links.css +80 -96
  125. package/components/JumpLinks/jump-links.scss +80 -100
  126. package/components/Label/label-group.css +28 -28
  127. package/components/Label/label-group.scss +29 -30
  128. package/components/Label/label.css +102 -87
  129. package/components/Label/label.scss +113 -94
  130. package/components/List/list.css +44 -47
  131. package/components/List/list.scss +51 -58
  132. package/components/Login/login.css +122 -118
  133. package/components/Login/login.scss +105 -112
  134. package/components/Masthead/masthead.css +273 -175
  135. package/components/Masthead/masthead.scss +102 -68
  136. package/components/Menu/menu.css +151 -95
  137. package/components/Menu/menu.scss +59 -40
  138. package/components/MenuToggle/menu-toggle.css +129 -108
  139. package/components/MenuToggle/menu-toggle.scss +150 -128
  140. package/components/ModalBox/modal-box.css +53 -45
  141. package/components/ModalBox/modal-box.scss +52 -46
  142. package/components/MultipleFileUpload/multiple-file-upload.css +37 -37
  143. package/components/MultipleFileUpload/multiple-file-upload.scss +38 -39
  144. package/components/Nav/nav.css +33 -9
  145. package/components/Nav/nav.scss +46 -13
  146. package/components/NotificationDrawer/notification-drawer.css +50 -51
  147. package/components/NotificationDrawer/notification-drawer.scss +58 -57
  148. package/components/NumberInput/number-input.css +7 -11
  149. package/components/NumberInput/number-input.scss +5 -7
  150. package/components/OverflowMenu/overflow-menu.css +2 -1
  151. package/components/OverflowMenu/overflow-menu.scss +3 -1
  152. package/components/Page/page.css +175 -519
  153. package/components/Page/page.scss +155 -386
  154. package/components/Pagination/pagination.css +82 -79
  155. package/components/Pagination/pagination.scss +43 -40
  156. package/components/Panel/panel.css +33 -30
  157. package/components/Panel/panel.scss +35 -33
  158. package/components/Popover/popover.css +54 -52
  159. package/components/Popover/popover.scss +55 -54
  160. package/components/Progress/progress.css +8 -4
  161. package/components/Progress/progress.scss +14 -11
  162. package/components/ProgressStepper/progress-stepper.css +246 -245
  163. package/components/ProgressStepper/progress-stepper.scss +118 -118
  164. package/components/Radio/radio.css +7 -7
  165. package/components/Radio/radio.scss +9 -10
  166. package/components/Sidebar/sidebar.css +139 -139
  167. package/components/Sidebar/sidebar.scss +61 -61
  168. package/components/SimpleList/simple-list.css +21 -20
  169. package/components/SimpleList/simple-list.scss +22 -23
  170. package/components/Skeleton/skeleton.css +4 -4
  171. package/components/Skeleton/skeleton.scss +7 -8
  172. package/components/SkipToContent/skip-to-content.css +7 -6
  173. package/components/SkipToContent/skip-to-content.scss +7 -7
  174. package/components/Slider/slider.css +31 -31
  175. package/components/Slider/slider.scss +54 -55
  176. package/components/Spinner/spinner.scss +4 -5
  177. package/components/Switch/switch.css +4 -10
  178. package/components/Switch/switch.scss +8 -17
  179. package/components/TabContent/tab-content.css +25 -25
  180. package/components/TabContent/tab-content.scss +28 -28
  181. package/components/Table/table-grid.css +434 -508
  182. package/components/Table/table-grid.scss +131 -150
  183. package/components/Table/table-scrollable.css +31 -34
  184. package/components/Table/table-scrollable.scss +44 -41
  185. package/components/Table/table-tree-view.css +287 -279
  186. package/components/Table/table-tree-view.scss +84 -84
  187. package/components/Table/table.css +316 -279
  188. package/components/Table/table.scss +346 -301
  189. package/components/Tabs/tabs.css +215 -240
  190. package/components/Tabs/tabs.scss +130 -162
  191. package/components/TextInputGroup/text-input-group.css +122 -64
  192. package/components/TextInputGroup/text-input-group.scss +144 -87
  193. package/components/Tile/tile.css +15 -15
  194. package/components/Tile/tile.scss +16 -17
  195. package/components/Timestamp/timestamp.css +13 -19
  196. package/components/Timestamp/timestamp.scss +16 -22
  197. package/components/Title/title.css +14 -13
  198. package/components/Title/title.scss +15 -15
  199. package/components/ToggleGroup/toggle-group.css +37 -37
  200. package/components/ToggleGroup/toggle-group.scss +38 -41
  201. package/components/Toolbar/toolbar.css +547 -1431
  202. package/components/Toolbar/toolbar.scss +159 -123
  203. package/components/Tooltip/tooltip.css +28 -27
  204. package/components/Tooltip/tooltip.scss +31 -30
  205. package/components/TreeView/tree-view.css +184 -184
  206. package/components/TreeView/tree-view.scss +133 -133
  207. package/components/Truncate/truncate.css +2 -2
  208. package/components/Truncate/truncate.scss +7 -8
  209. package/components/Wizard/wizard.css +190 -154
  210. package/components/Wizard/wizard.scss +211 -165
  211. package/components/_index.css +22378 -0
  212. package/components/_index.scss +82 -0
  213. package/docs/components/AboutModalBox/examples/AboutModalBox.md +3 -1
  214. package/docs/components/Accordion/examples/Accordion.md +1 -1
  215. package/docs/components/ActionList/examples/ActionList.md +64 -24
  216. package/docs/components/Alert/examples/Alert.md +116 -74
  217. package/docs/components/BackToTop/examples/BackToTop.md +1 -1
  218. package/docs/components/Badge/examples/Badge.md +6 -16
  219. package/docs/components/Banner/examples/Banner.md +16 -10
  220. package/docs/components/Brand/examples/Brand.md +2 -2
  221. package/docs/components/Breadcrumb/examples/Breadcrumb.md +19 -59
  222. package/docs/components/Button/examples/Button.md +537 -368
  223. package/docs/components/CalendarMonth/examples/CalendarMonth.md +24 -8
  224. package/docs/components/Card/examples/Card.md +372 -658
  225. package/docs/components/Check/examples/Check.md +10 -15
  226. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +92 -47
  227. package/docs/components/CodeBlock/examples/CodeBlock.md +51 -28
  228. package/docs/components/CodeEditor/examples/CodeEditor.md +41 -22
  229. package/docs/components/Content/examples/Content.md +600 -60
  230. package/docs/components/DataList/examples/DataList.md +291 -1028
  231. package/docs/components/DatePicker/examples/DatePicker.md +18 -6
  232. package/docs/components/DescriptionList/examples/DescriptionList.md +80 -55
  233. package/docs/components/Drawer/examples/Drawer.md +60 -21
  234. package/docs/components/DualListSelector/examples/DualListSelector.md +364 -996
  235. package/docs/components/EmptyState/examples/EmptyState.md +123 -53
  236. package/docs/components/ExpandableSection/examples/ExpandableSection.md +96 -91
  237. package/docs/components/FileUpload/examples/FileUpload.md +42 -14
  238. package/docs/components/Form/examples/Form.md +100 -26
  239. package/docs/components/Hint/examples/Hint.md +54 -164
  240. package/docs/components/InlineEdit/examples/InlineEdit.md +132 -45
  241. package/docs/components/InputGroup/examples/InputGroup.md +38 -62
  242. package/docs/components/JumpLinks/examples/JumpLinks.md +189 -72
  243. package/docs/components/Label/examples/Label.md +2577 -406
  244. package/docs/components/Login/examples/Login.md +372 -334
  245. package/docs/components/Masthead/examples/masthead.md +515 -484
  246. package/docs/components/Menu/examples/Menu.md +77 -138
  247. package/docs/components/MenuToggle/examples/MenuToggle.md +289 -39
  248. package/docs/components/ModalBox/examples/ModalBox.md +158 -100
  249. package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +137 -97
  250. package/docs/components/Nav/examples/Navigation.css +2 -7
  251. package/docs/components/Nav/examples/Navigation.md +337 -270
  252. package/docs/components/NotificationDrawer/examples/NotificationDrawer.md +515 -2076
  253. package/docs/components/NumberInput/examples/NumberInput.md +96 -48
  254. package/docs/components/OverflowMenu/examples/overflow-menu.css +4 -28
  255. package/docs/components/OverflowMenu/examples/overflow-menu.md +104 -159
  256. package/docs/components/Page/examples/Page.css +5 -9
  257. package/docs/components/Page/examples/Page.md +254 -181
  258. package/docs/components/Pagination/examples/Pagination.md +336 -756
  259. package/docs/components/Panel/examples/Panel.md +3 -2
  260. package/docs/components/Popover/examples/Popover.md +60 -15
  261. package/docs/components/ProgressStepper/examples/ProgressStepper.md +15 -15
  262. package/docs/components/Sidebar/examples/Sidebar.css +4 -2
  263. package/docs/components/Sidebar/examples/Sidebar.md +3 -3
  264. package/docs/components/Skeleton/examples/Skeleton.css +1 -1
  265. package/docs/components/SkipToContent/examples/SkipToContent.md +3 -1
  266. package/docs/components/Slider/examples/Slider.md +53 -45
  267. package/docs/components/Spinner/examples/Spinner.md +1 -1
  268. package/docs/components/Switch/examples/Switch.md +33 -148
  269. package/docs/components/Table/examples/Table.css +11 -6
  270. package/docs/components/Table/examples/Table.md +5302 -2464
  271. package/docs/components/Tabs/examples/Tabs.md +1267 -607
  272. package/docs/components/TextInputGroup/examples/TextInputGroup.css +8 -3
  273. package/docs/components/TextInputGroup/examples/TextInputGroup.md +469 -278
  274. package/docs/components/Tile/examples/Tile.css +5 -5
  275. package/docs/components/Timestamp/examples/Timestamp.md +7 -1
  276. package/docs/components/ToggleGroup/examples/toggle-group.md +1 -3
  277. package/docs/components/Toolbar/examples/Toolbar.css +50 -39
  278. package/docs/components/Toolbar/examples/Toolbar.md +1562 -1200
  279. package/docs/components/Tooltip/examples/Tooltip.css +1 -1
  280. package/docs/components/TreeView/examples/TreeView.md +627 -49
  281. package/docs/components/Truncate/examples/Truncate.css +1 -2
  282. package/docs/components/Wizard/examples/Wizard.md +1595 -126
  283. package/docs/demos/AboutModal/examples/AboutModal.md +191 -198
  284. package/docs/demos/Alert/examples/Alert.md +924 -909
  285. package/docs/demos/BackToTop/examples/BackToTop.md +318 -327
  286. package/docs/demos/Banner/examples/Banner.md +641 -659
  287. package/docs/demos/Button/examples/Button.md +8 -8
  288. package/docs/demos/Card/examples/Card.css +6 -6
  289. package/docs/demos/Card/examples/Card.md +419 -606
  290. package/docs/demos/CardView/examples/CardView.md +822 -1435
  291. package/docs/demos/Dashboard/examples/Dashboard.md +1308 -1442
  292. package/docs/demos/DataList/examples/DataList.md +3210 -3424
  293. package/docs/demos/DescriptionList/examples/DescriptionList.md +899 -937
  294. package/docs/demos/Drawer/examples/Drawer.md +1165 -1176
  295. package/docs/demos/Form/examples/BasicForms.md +153 -88
  296. package/docs/demos/JumpLinks/examples/JumpLinks.md +1710 -1602
  297. package/docs/demos/Masthead/examples/Masthead.md +1719 -1583
  298. package/docs/demos/Modal/examples/Modal.md +1231 -1235
  299. package/docs/demos/Nav/examples/Nav.md +1216 -1230
  300. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +1910 -4577
  301. package/docs/demos/Page/examples/Page.css +11 -0
  302. package/docs/demos/Page/examples/Page.md +3753 -2540
  303. package/docs/demos/Panel/Panel.md +88 -0
  304. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +9 -3
  305. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +16 -48
  306. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +5150 -6255
  307. package/docs/demos/Skeleton/examples/Skeleton.md +297 -304
  308. package/docs/demos/Table/examples/Table.md +14272 -15154
  309. package/docs/demos/Tabs/examples/Tabs.md +2821 -2891
  310. package/docs/demos/Toolbar/examples/Toolbar.css +10 -18
  311. package/docs/demos/Toolbar/examples/Toolbar.md +2487 -2663
  312. package/docs/demos/Wizard/examples/Wizard.md +3021 -2784
  313. package/docs/layouts/Bullseye/examples/Bullseye.css +4 -4
  314. package/docs/layouts/Flex/examples/Flex.css +4 -4
  315. package/docs/layouts/Flex/examples/Flex.md +50 -50
  316. package/docs/layouts/Gallery/examples/Gallery.css +4 -4
  317. package/docs/layouts/Gallery/examples/Gallery.md +6 -6
  318. package/docs/layouts/Grid/examples/Grid.css +3 -3
  319. package/docs/layouts/Grid/examples/Grid.md +33 -33
  320. package/docs/layouts/Level/examples/Level.css +5 -5
  321. package/docs/layouts/Split/examples/Split.css +4 -4
  322. package/docs/layouts/Stack/examples/Stack.css +5 -5
  323. package/docs/utilities/Accessibility/examples/Accessibility.md +2 -2
  324. package/docs/utilities/Alignment/examples/Alignment.css +6 -6
  325. package/docs/utilities/Alignment/examples/Alignment.md +5 -5
  326. package/docs/utilities/BackgroundColor/examples/BackgroundColor.md +7 -67
  327. package/docs/utilities/BoxShadow/examples/box-shadow.css +11 -11
  328. package/docs/utilities/BoxShadow/examples/box-shadow.md +15 -38
  329. package/docs/utilities/Display/examples/Display.css +3 -10
  330. package/docs/utilities/Display/examples/Display.md +21 -12
  331. package/docs/utilities/Flex/examples/Flex.css +7 -7
  332. package/docs/utilities/Flex/examples/Flex.md +82 -40
  333. package/docs/utilities/Float/examples/Float.css +5 -5
  334. package/docs/utilities/Float/examples/Float.md +6 -6
  335. package/docs/utilities/Sizing/examples/Sizing.css +6 -6
  336. package/docs/utilities/Sizing/examples/Sizing.md +60 -60
  337. package/docs/utilities/Spacing/examples/Spacing.css +3 -3
  338. package/docs/utilities/Spacing/examples/Spacing.md +37 -37
  339. package/docs/utilities/Text/examples/Text.md +78 -77
  340. package/icons/pficons.mjs +6 -0
  341. package/layouts/Bullseye/bullseye.css +4 -0
  342. package/layouts/Bullseye/bullseye.scss +5 -1
  343. package/layouts/Flex/flex.css +241 -237
  344. package/layouts/Flex/flex.scss +48 -44
  345. package/layouts/Gallery/gallery.css +15 -11
  346. package/layouts/Gallery/gallery.scss +9 -5
  347. package/layouts/Grid/grid.css +20 -16
  348. package/layouts/Grid/grid.scss +12 -8
  349. package/layouts/Level/level.css +5 -1
  350. package/layouts/Level/level.scss +6 -2
  351. package/layouts/Split/split.css +5 -1
  352. package/layouts/Split/split.scss +6 -2
  353. package/layouts/Stack/stack.css +5 -1
  354. package/layouts/Stack/stack.scss +6 -2
  355. package/layouts/_index.css +3461 -0
  356. package/layouts/_index.scss +8 -0
  357. package/package.json +39 -39
  358. package/patternfly-addons.css +2071 -2648
  359. package/patternfly-addons.scss +2 -12
  360. package/patternfly-base-no-globals.css +1429 -1645
  361. package/patternfly-base-no-globals.scss +5 -3
  362. package/patternfly-base.css +1511 -1723
  363. package/patternfly-base.scss +2 -6
  364. package/patternfly-charts.css +579 -240
  365. package/patternfly-charts.scss +352 -337
  366. package/patternfly-no-globals.css +19895 -23410
  367. package/patternfly-no-globals.scss +5 -4
  368. package/patternfly.css +19999 -23510
  369. package/patternfly.min.css +1 -1
  370. package/patternfly.min.css.map +1 -1
  371. package/patternfly.scss +3 -4
  372. package/sass-utilities/_index.scss +6 -0
  373. package/sass-utilities/functions.scss +25 -25
  374. package/sass-utilities/{_init.scss → init.scss} +6 -6
  375. package/sass-utilities/mixins.scss +108 -72
  376. package/sass-utilities/{component-namespaces.scss → namespaces-components.scss} +3 -27
  377. package/sass-utilities/{layout-namespaces.scss → namespaces-layouts.scss} +3 -1
  378. package/sass-utilities/scss-variables.scss +49 -261
  379. package/utilities/Accessibility/accessibility.css +15 -15
  380. package/utilities/Accessibility/accessibility.scss +8 -6
  381. package/utilities/Alignment/alignment.css +29 -29
  382. package/utilities/Alignment/alignment.scss +6 -4
  383. package/utilities/BackgroundColor/background-color.css +67 -0
  384. package/utilities/BackgroundColor/background-color.scss +16 -0
  385. package/utilities/BoxShadow/box-shadow.css +15 -39
  386. package/utilities/BoxShadow/box-shadow.scss +19 -28
  387. package/utilities/Display/display.css +43 -5
  388. package/utilities/Display/display.scss +7 -4
  389. package/utilities/Flex/flex.css +50 -50
  390. package/utilities/Flex/flex.scss +21 -20
  391. package/utilities/Float/float.css +29 -29
  392. package/utilities/Float/float.scss +6 -6
  393. package/utilities/Sizing/sizing.css +58 -58
  394. package/utilities/Sizing/sizing.scss +23 -21
  395. package/utilities/Spacing/spacing.css +1372 -1372
  396. package/utilities/Spacing/spacing.scss +6 -6
  397. package/utilities/Text/text.css +419 -662
  398. package/utilities/Text/text.scss +81 -107
  399. package/utilities/_index.css +7815 -0
  400. package/utilities/_index.scss +10 -0
  401. package/assets/images/pf-logo-small.svg +0 -23
  402. package/assets/images/pf_logo_white.hbs +0 -35
  403. package/assets/images/pfbg-icon.svg +0 -1
  404. package/assets/pficon/pf-v5-pficon.woff2 +0 -0
  405. package/base/_base.scss +0 -2
  406. package/base/_chart-globals.scss +0 -415
  407. package/base/_common.scss +0 -50
  408. package/base/_fa-icons.scss +0 -33
  409. package/base/_fonts.scss +0 -136
  410. package/base/_icons.scss +0 -3
  411. package/base/_pficons.scss +0 -2
  412. package/base/_themes.scss +0 -43
  413. package/base/_variables.scss +0 -299
  414. package/base/patternfly-globals.css +0 -120
  415. package/base/patternfly-globals.scss +0 -2
  416. package/base/patternfly-icons.css +0 -4728
  417. package/base/patternfly-icons.scss +0 -2
  418. package/base/patternfly-themes.css +0 -82
  419. package/base/patternfly-themes.scss +0 -2
  420. package/base/themes/dark/_chart-globals.scss +0 -42
  421. package/base/themes/dark/_globals.scss +0 -5
  422. package/base/tokens/_workspace-overrides.scss +0 -7
  423. package/components/AppLauncher/app-launcher.css +0 -244
  424. package/components/AppLauncher/app-launcher.scss +0 -308
  425. package/components/AppLauncher/themes/dark/app-launcher.scss +0 -13
  426. package/components/Chip/chip-group.css +0 -93
  427. package/components/Chip/chip-group.scss +0 -98
  428. package/components/Chip/chip.css +0 -122
  429. package/components/Chip/chip.scss +0 -140
  430. package/components/Chip/themes/dark/chip.scss +0 -9
  431. package/components/ContextSelector/context-selector.css +0 -336
  432. package/components/ContextSelector/context-selector.scss +0 -384
  433. package/components/ContextSelector/themes/dark/context-selector.scss +0 -24
  434. package/components/Dropdown/dropdown.css +0 -686
  435. package/components/Dropdown/dropdown.scss +0 -820
  436. package/components/Dropdown/themes/dark/dropdown.scss +0 -32
  437. package/components/LogViewer/log-viewer.css +0 -197
  438. package/components/LogViewer/log-viewer.scss +0 -226
  439. package/components/LogViewer/themes/dark/log-viewer.scss +0 -7
  440. package/components/NotificationBadge/notification-badge.css +0 -87
  441. package/components/NotificationBadge/notification-badge.scss +0 -108
  442. package/components/OptionsMenu/options-menu.css +0 -279
  443. package/components/OptionsMenu/options-menu.scss +0 -332
  444. package/components/OptionsMenu/themes/dark/options-menu.scss +0 -21
  445. package/components/Select/select.css +0 -599
  446. package/components/Select/select.scss +0 -713
  447. package/components/Select/themes/dark/select.scss +0 -23
  448. package/components/_all.scss +0 -91
  449. package/docs/components/AppLauncher/deprecated/application-launcher.css +0 -25
  450. package/docs/components/AppLauncher/deprecated/application-launcher.md +0 -792
  451. package/docs/components/Breadcrumb/examples/Breadcrumb.css +0 -3
  452. package/docs/components/Chip/examples/Chip.md +0 -846
  453. package/docs/components/ContextSelector/deprecated/context-selector.css +0 -7
  454. package/docs/components/ContextSelector/deprecated/context-selector.md +0 -909
  455. package/docs/components/Dropdown/deprecated/Dropdown.css +0 -64
  456. package/docs/components/Dropdown/deprecated/Dropdown.md +0 -2920
  457. package/docs/components/LogViewer/examples/LogViewer.css +0 -17
  458. package/docs/components/LogViewer/examples/LogViewer.md +0 -5936
  459. package/docs/components/NotificationBadge/examples/NotificationBadge.md +0 -222
  460. package/docs/components/OptionsMenu/deprecated/options-menu.css +0 -25
  461. package/docs/components/OptionsMenu/deprecated/options-menu.md +0 -1014
  462. package/docs/components/Page/deprecated/PageHeader.css +0 -17
  463. package/docs/components/Page/deprecated/PageHeader.md +0 -261
  464. package/docs/components/Pagination/examples/Pagination.css +0 -3
  465. package/docs/components/Select/deprecated/Select.css +0 -56
  466. package/docs/components/Select/deprecated/Select.md +0 -3525
  467. package/docs/components/Tabs/examples/Tabs.css +0 -10
  468. package/docs/components/ToggleGroup/examples/toggle-group.css +0 -4
  469. package/docs/demos/ContextSelector/examples/ContextSelector.md +0 -1712
  470. package/docs/demos/Page/examples/Penta.md +0 -821
  471. package/docs/utilities/Text/examples/Text.css +0 -0
  472. package/layouts/_all.scss +0 -7
  473. package/patternfly-base-no-globals-theme-dark-unversioned.css +0 -6276
  474. package/patternfly-base-no-globals-theme-dark-unversioned.scss +0 -11
  475. package/patternfly-base-theme-dark-unversioned.css +0 -6393
  476. package/patternfly-base-theme-dark-unversioned.scss +0 -5
  477. package/patternfly-charts-theme-dark-unversioned.css +0 -70
  478. package/patternfly-charts-theme-dark-unversioned.scss +0 -8
  479. package/patternfly-charts-theme-dark.css +0 -70
  480. package/patternfly-charts-theme-dark.scss +0 -8
  481. package/patternfly-theme-dark-unversioned.css +0 -35533
  482. package/patternfly-theme-dark-unversioned.scss +0 -6
  483. package/patternfly-theme-dark.css +0 -0
  484. package/patternfly-theme-dark.scss +0 -1
  485. package/sass-utilities/_all.scss +0 -9
  486. package/sass-utilities/colors.scss +0 -82
  487. package/sass-utilities/div.import.scss +0 -3
  488. package/sass-utilities/div.scss +0 -4
  489. package/sass-utilities/placeholders.scss +0 -72
  490. package/sass-utilities/themes/dark/_all.scss +0 -4
  491. package/sass-utilities/themes/dark/colors.scss +0 -16
  492. package/sass-utilities/themes/dark/mixins.scss +0 -7
  493. package/sass-utilities/themes/dark/placeholders.scss +0 -5
  494. package/sass-utilities/themes/dark/scss-variables.scss +0 -92
  495. package/themes/dark/_patternfly-charts-theme-dark.scss +0 -98
  496. package/utilities/BackgroundColor/BackgroundColor.css +0 -414
  497. package/utilities/BackgroundColor/BackgroundColor.scss +0 -64
  498. package/utilities/BackgroundColor/themes/dark/BackgroundColor.css +0 -0
  499. package/utilities/BackgroundColor/themes/dark/BackgroundColor.scss +0 -25
  500. package/utilities/Text/themes/dark/text.css +0 -0
  501. package/utilities/Text/themes/dark/text.scss +0 -33
package/docs/demos/Card/examples/Card.md CHANGED
@@ -14,70 +14,30 @@ wrapperTag: div
14
14
  <div class="pf-v6-c-card__header-toggle">
15
15
  <button
16
16
  class="pf-v6-c-button pf-m-plain"
17
- type="button"
18
- aria-label="Details"
19
17
  id="card-demo-horizontal-grid-collapsed-example-toggle"
18
+ type="button"
20
19
  aria-labelledby="card-demo-horizontal-grid-collapsed-example-title card-demo-horizontal-grid-collapsed-example-toggle"
20
+ aria-label="Details"
21
21
  >
22
- <span class="pf-v6-c-card__header-toggle-icon">
23
- <i class="fas fa-angle-right" aria-hidden="true"></i>
22
+ <span class="pf-v6-c-button__icon pf-m-start">
23
+ <span class="pf-v6-c-card__header-toggle-icon">
24
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
25
+ </span>
24
26
  </span>
25
27
  </button>
26
28
  </div>
27
29
  <div class="pf-v6-c-card__actions">
28
- <div class="pf-v6-c-dropdown">
29
- <button
30
- class="pf-v6-c-dropdown__toggle pf-m-plain"
31
- id="card-demo-horizontal-grid-collapsed-example-dropdown-kebab-right-aligned-button"
32
- aria-expanded="false"
33
- type="button"
34
- aria-label="Actions"
35
- >
30
+ <button
31
+ class="pf-v6-c-menu-toggle pf-m-plain"
32
+ type="button"
33
+ aria-expanded="false"
34
+ aria-label="Menu toggle"
35
+ id="card-demo-horizontal-grid-collapsed-example-dropdown-kebab-right-aligned"
36
+ >
37
+ <span class="pf-v6-c-menu-toggle__icon">
36
38
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
37
- </button>
38
- <ul
39
- class="pf-v6-c-dropdown__menu"
40
- aria-labelledby="card-demo-horizontal-grid-collapsed-example-dropdown-kebab-right-aligned-button"
41
- hidden
42
- role="menu"
43
- >
44
- <li role="none">
45
- <a class="pf-v6-c-dropdown__menu-item" role="menuitem" href="#">Link</a>
46
- </li>
47
- <li role="none">
48
- <button
49
- class="pf-v6-c-dropdown__menu-item"
50
- role="menuitem"
51
- type="button"
52
- >Action</button>
53
- </li>
54
- <li role="none">
55
- <a
56
- class="pf-v6-c-dropdown__menu-item pf-m-disabled"
57
- role="menuitem"
58
- href="#"
59
- aria-disabled="true"
60
- tabindex="-1"
61
- >Disabled link</a>
62
- </li>
63
- <li role="none">
64
- <button
65
- class="pf-v6-c-dropdown__menu-item"
66
- role="menuitem"
67
- type="button"
68
- disabled
69
- >Disabled action</button>
70
- </li>
71
- <li class="pf-v6-c-divider" role="separator"></li>
72
- <li role="none">
73
- <a
74
- class="pf-v6-c-dropdown__menu-item"
75
- role="menuitem"
76
- href="#"
77
- >Separated link</a>
78
- </li>
79
- </ul>
80
- </div>
39
+ </span>
40
+ </button>
81
41
  </div>
82
42
  <div class="pf-v6-c-card__header-main">
83
43
  <div class="pf-v6-l-split pf-m-gutter pf-m-wrap">
@@ -155,70 +115,30 @@ wrapperTag: div
155
115
  <div class="pf-v6-c-card__header-toggle">
156
116
  <button
157
117
  class="pf-v6-c-button pf-m-plain"
158
- type="button"
159
- aria-label="Details"
160
118
  id="card-demo-horizontal-grid-expanded-example-toggle"
119
+ type="button"
161
120
  aria-labelledby="card-demo-horizontal-grid-expanded-example-title card-demo-horizontal-grid-expanded-example-toggle"
121
+ aria-label="Details"
162
122
  >
163
- <span class="pf-v6-c-card__header-toggle-icon">
164
- <i class="fas fa-angle-right" aria-hidden="true"></i>
123
+ <span class="pf-v6-c-button__icon pf-m-start">
124
+ <span class="pf-v6-c-card__header-toggle-icon">
125
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
126
+ </span>
165
127
  </span>
166
128
  </button>
167
129
  </div>
168
130
  <div class="pf-v6-c-card__actions">
169
- <div class="pf-v6-c-dropdown">
170
- <button
171
- class="pf-v6-c-dropdown__toggle pf-m-plain"
172
- id="card-demo-horizontal-grid-expanded-example-dropdown-kebab-right-aligned-button"
173
- aria-expanded="false"
174
- type="button"
175
- aria-label="Actions"
176
- >
131
+ <button
132
+ class="pf-v6-c-menu-toggle pf-m-plain"
133
+ type="button"
134
+ aria-expanded="false"
135
+ aria-label="Menu toggle"
136
+ id="card-demo-horizontal-grid-expanded-example-dropdown-kebab-right-aligned"
137
+ >
138
+ <span class="pf-v6-c-menu-toggle__icon">
177
139
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
178
- </button>
179
- <ul
180
- class="pf-v6-c-dropdown__menu"
181
- aria-labelledby="card-demo-horizontal-grid-expanded-example-dropdown-kebab-right-aligned-button"
182
- hidden
183
- role="menu"
184
- >
185
- <li role="none">
186
- <a class="pf-v6-c-dropdown__menu-item" role="menuitem" href="#">Link</a>
187
- </li>
188
- <li role="none">
189
- <button
190
- class="pf-v6-c-dropdown__menu-item"
191
- role="menuitem"
192
- type="button"
193
- >Action</button>
194
- </li>
195
- <li role="none">
196
- <a
197
- class="pf-v6-c-dropdown__menu-item pf-m-disabled"
198
- role="menuitem"
199
- href="#"
200
- aria-disabled="true"
201
- tabindex="-1"
202
- >Disabled link</a>
203
- </li>
204
- <li role="none">
205
- <button
206
- class="pf-v6-c-dropdown__menu-item"
207
- role="menuitem"
208
- type="button"
209
- disabled
210
- >Disabled action</button>
211
- </li>
212
- <li class="pf-v6-c-divider" role="separator"></li>
213
- <li role="none">
214
- <a
215
- class="pf-v6-c-dropdown__menu-item"
216
- role="menuitem"
217
- href="#"
218
- >Separated link</a>
219
- </li>
220
- </ul>
221
- </div>
140
+ </span>
141
+ </button>
222
142
  </div>
223
143
  <div class="pf-v6-c-card__header-main">
224
144
  <div class="pf-v6-c-card__title">
@@ -261,16 +181,10 @@ wrapperTag: div
261
181
  </li>
262
182
  </ul>
263
183
  </div>
264
- <a class="pf-v6-c-button pf-m-link pf-m-inline" href="#">
265
- View all set up cluster steps
266
- <span
267
- class="pf-v6-c-button__icon pf-m-end"
268
- >
269
- <span class="pf-v6-c-icon pf-v5-m-mirror-inline-rtl">
270
- <span class="pf-v6-c-icon__content">
271
- <i class="fas fa-arrow-right" aria-hidden="true"></i>
272
- </span>
273
- </span>
184
+ <a class="pf-v6-c-button pf-m-inline pf-m-link" href="#">
185
+ <span class="pf-v6-c-button__text">View all set up cluster steps</span>
186
+ <span class="pf-v6-c-button__icon pf-m-end">
187
+ <i class="fas fa-arrow-right" aria-hidden="true"></i>
274
188
  </span>
275
189
  </a>
276
190
  </div>
@@ -298,14 +212,10 @@ wrapperTag: div
298
212
  </li>
299
213
  </ul>
300
214
  </div>
301
- <a class="pf-v6-c-button pf-m-link pf-m-inline" href="#">
302
- View all guided tours
215
+ <a class="pf-v6-c-button pf-m-inline pf-m-link" href="#">
216
+ <span class="pf-v6-c-button__text">View all guided tours</span>
303
217
  <span class="pf-v6-c-button__icon pf-m-end">
304
- <span class="pf-v6-c-icon pf-v5-m-mirror-inline-rtl">
305
- <span class="pf-v6-c-icon__content">
306
- <i class="fas fa-arrow-right" aria-hidden="true"></i>
307
- </span>
308
- </span>
218
+ <i class="fas fa-arrow-right" aria-hidden="true"></i>
309
219
  </span>
310
220
  </a>
311
221
  </div>
@@ -336,14 +246,10 @@ wrapperTag: div
336
246
  </li>
337
247
  </ul>
338
248
  </div>
339
- <a class="pf-v6-c-button pf-m-link pf-m-inline" href="#">
340
- View all quick starts
249
+ <a class="pf-v6-c-button pf-m-inline pf-m-link" href="#">
250
+ <span class="pf-v6-c-button__text">View all quick starts</span>
341
251
  <span class="pf-v6-c-button__icon pf-m-end">
342
- <span class="pf-v6-c-icon pf-v5-m-mirror-inline-rtl">
343
- <span class="pf-v6-c-icon__content">
344
- <i class="fas fa-arrow-right" aria-hidden="true"></i>
345
- </span>
346
- </span>
252
+ <i class="fas fa-arrow-right" aria-hidden="true"></i>
347
253
  </span>
348
254
  </a>
349
255
  </div>
@@ -377,16 +283,10 @@ wrapperTag: div
377
283
  </li>
378
284
  </ul>
379
285
  </div>
380
- <a class="pf-v6-c-button pf-m-link pf-m-inline" href="#">
381
- View all learning resources
382
- <span
383
- class="pf-v6-c-button__icon pf-m-end"
384
- >
385
- <span class="pf-v6-c-icon pf-v5-m-mirror-inline-rtl">
386
- <span class="pf-v6-c-icon__content">
387
- <i class="fas fa-arrow-right" aria-hidden="true"></i>
388
- </span>
389
- </span>
286
+ <a class="pf-v6-c-button pf-m-inline pf-m-link" href="#">
287
+ <span class="pf-v6-c-button__text">View all learning resources</span>
288
+ <span class="pf-v6-c-button__icon pf-m-end">
289
+ <i class="fas fa-arrow-right" aria-hidden="true"></i>
390
290
  </span>
391
291
  </a>
392
292
  </div>
@@ -400,11 +300,11 @@ wrapperTag: div
400
300
  ### Horizontal split
401
301
 
402
302
  ```html
403
- <div class="pf-v6-c-card pf-m-flat" id="card-demo-horizontal-split-example">
303
+ <div class="pf-v6-c-card" id="card-demo-horizontal-split-example">
404
304
  <div class="pf-v6-l-grid pf-m-all-6-col-on-md">
405
305
  <div
406
306
  class="pf-v6-l-grid__item"
407
- style="min-height: 200px; background: no-repeat bottom right / auto 75% url(/assets/images/pfbg-icon.svg) black;"
307
+ style="min-height: 200px; background: no-repeat bottom right / auto 75% url(/assets/images/pf-background.svg) black;"
408
308
  ></div>
409
309
  <div class="pf-v6-l-grid__item">
410
310
  <div class="pf-v6-c-card__title">
@@ -414,10 +314,9 @@ wrapperTag: div
414
314
  class="pf-v6-c-card__body"
415
315
  >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse arcu purus, lobortis nec euismod eu, tristique ut sapien. Nullam turpis lectus, aliquet sit amet volutpat eu, semper eget quam. Maecenas in tempus diam. Aenean interdum velit sed massa aliquet, sit amet malesuada nulla hendrerit. Aenean non faucibus odio. Etiam non metus turpis. Praesent sollicitudin elit neque, id ullamcorper nibh faucibus eget.</div>
416
316
  <div class="pf-v6-c-card__footer">
417
- <button
418
- class="pf-v6-c-button pf-m-tertiary"
419
- type="button"
420
- >Call to action</button>
317
+ <button class="pf-v6-c-button pf-m-tertiary" type="button">
318
+ <span class="pf-v6-c-button__text">Call to action</span>
319
+ </button>
421
320
  </div>
422
321
  </div>
423
322
  </div>
@@ -430,7 +329,7 @@ wrapperTag: div
430
329
  ```html
431
330
  <div
432
331
  class="pf-v6-l-gallery pf-m-gutter"
433
- style="--pf-v5-l-gallery--GridTemplateColumns--min: 260px;"
332
+ style="--pf-v6-l-gallery--GridTemplateColumns--min: 260px;"
434
333
  >
435
334
  <div class="pf-v6-c-card">
436
335
  <div class="pf-v6-c-card__title">
@@ -540,44 +439,47 @@ wrapperTag: div
540
439
  <div class="pf-v6-l-grid pf-m-gutter">
541
440
  <div class="pf-v6-l-grid__item">
542
441
  <div class="pf-v6-l-gallery pf-m-gutter">
543
- <div class="pf-v6-c-card pf-v5-u-text-align-center">
442
+ <div class="pf-v6-c-card pf-v6-u-text-align-center">
544
443
  <div class="pf-v6-c-card__title">
545
444
  <h2 class="pf-v6-c-card__title-text">5 Clusters</h2>
546
445
  </div>
547
446
  <div class="pf-v6-c-card__body">
548
- <i
549
- class="fas fa-check-circle pf-v5-u-success-color-100"
550
- aria-hidden="true"
551
- ></i>
447
+ <span class="pf-v6-c-icon">
448
+ <span class="pf-v6-c-icon__content pf-m-success">
449
+ <i class="fas fa-check-circle" aria-hidden="true"></i>
450
+ </span>
451
+ </span>
552
452
  </div>
553
453
  </div>
554
- <div class="pf-v6-c-card pf-v5-u-text-align-center">
454
+ <div class="pf-v6-c-card pf-v6-u-text-align-center">
555
455
  <div class="pf-v6-c-card__title">
556
456
  <h2 class="pf-v6-c-card__title-text">15 Clusters</h2>
557
457
  </div>
558
458
  <div class="pf-v6-c-card__body">
559
- <i
560
- class="fas fa-exclamation-triangle pf-v5-u-warning-color-100"
561
- aria-hidden="true"
562
- ></i>
459
+ <span class="pf-v6-c-icon">
460
+ <span class="pf-v6-c-icon__content pf-m-warning">
461
+ <i class="fas fa-exclamation-triangle" aria-hidden="true"></i>
462
+ </span>
463
+ </span>
563
464
  </div>
564
465
  </div>
565
- <div class="pf-v6-c-card pf-v5-u-text-align-center">
466
+ <div class="pf-v6-c-card pf-v6-u-text-align-center">
566
467
  <div class="pf-v6-c-card__title">
567
468
  <h2 class="pf-v6-c-card__title-text">3 Clusters</h2>
568
469
  </div>
569
470
  <div class="pf-v6-c-card__body">
570
- <i
571
- class="fas fa-times-circle pf-v5-u-danger-color-100"
572
- aria-hidden="true"
573
- ></i>
471
+ <span class="pf-v6-c-icon">
472
+ <span class="pf-v6-c-icon__content pf-m-danger">
473
+ <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
474
+ </span>
475
+ </span>
574
476
  </div>
575
477
  </div>
576
478
  </div>
577
479
  </div>
578
480
  <div class="pf-v6-l-grid__item">
579
481
  <div class="pf-v6-l-gallery pf-m-gutter">
580
- <div class="pf-v6-c-card pf-v5-u-text-align-center">
482
+ <div class="pf-v6-c-card pf-v6-u-text-align-center">
581
483
  <div class="pf-v6-c-card__title">
582
484
  <h2 class="pf-v6-c-card__title-text">10 Hosts</h2>
583
485
  </div>
@@ -585,10 +487,11 @@ wrapperTag: div
585
487
  <div class="pf-v6-l-flex pf-m-inline-flex pf-m-space-items-md">
586
488
  <div class="pf-v6-l-flex pf-m-space-items-sm">
587
489
  <div class="pf-v6-l-flex__item">
588
- <i
589
- class="fas fa-exclamation-circle pf-v5-u-success-color-100"
590
- aria-hidden="true"
591
- ></i>
490
+ <span class="pf-v6-c-icon">
491
+ <span class="pf-v6-c-icon__content pf-m-success">
492
+ <i class="fas fa-check-circle" aria-hidden="true"></i>
493
+ </span>
494
+ </span>
592
495
  </div>
593
496
  <div class="pf-v6-l-flex__item">
594
497
  <a href="#">2</a>
@@ -597,10 +500,11 @@ wrapperTag: div
597
500
  <hr class="pf-v6-c-divider pf-m-vertical" />
598
501
  <div class="pf-v6-l-flex pf-m-space-items-sm">
599
502
  <div class="pf-v6-l-flex__item">
600
- <i
601
- class="fas fa-exclamation-triangle pf-v5-u-warning-color-100"
602
- aria-hidden="true"
603
- ></i>
503
+ <span class="pf-v6-c-icon">
504
+ <span class="pf-v6-c-icon__content pf-m-warning">
505
+ <i class="fas fa-exclamation-triangle" aria-hidden="true"></i>
506
+ </span>
507
+ </span>
604
508
  </div>
605
509
  <div class="pf-v6-l-flex__item">
606
510
  <a href="#">1</a>
@@ -609,7 +513,7 @@ wrapperTag: div
609
513
  </div>
610
514
  </div>
611
515
  </div>
612
- <div class="pf-v6-c-card pf-v5-u-text-align-center">
516
+ <div class="pf-v6-c-card pf-v6-u-text-align-center">
613
517
  <div class="pf-v6-c-card__title">
614
518
  <h2 class="pf-v6-c-card__title-text">50 Hosts</h2>
615
519
  </div>
@@ -617,10 +521,11 @@ wrapperTag: div
617
521
  <div class="pf-v6-l-flex pf-m-inline-flex pf-m-space-items-md">
618
522
  <div class="pf-v6-l-flex pf-m-space-items-sm">
619
523
  <div class="pf-v6-l-flex__item">
620
- <i
621
- class="fas fa-check-circle pf-v5-u-success-color-100"
622
- aria-hidden="true"
623
- ></i>
524
+ <span class="pf-v6-c-icon">
525
+ <span class="pf-v6-c-icon__content pf-m-success">
526
+ <i class="fas fa-check-circle" aria-hidden="true"></i>
527
+ </span>
528
+ </span>
624
529
  </div>
625
530
  <div class="pf-v6-l-flex__item">
626
531
  <a href="#">5</a>
@@ -629,10 +534,11 @@ wrapperTag: div
629
534
  <hr class="pf-v6-c-divider pf-m-vertical" />
630
535
  <div class="pf-v6-l-flex pf-m-space-items-sm">
631
536
  <div class="pf-v6-l-flex__item">
632
- <i
633
- class="fas fa-times-circle pf-v5-u-danger-color-100"
634
- aria-hidden="true"
635
- ></i>
537
+ <span class="pf-v6-c-icon">
538
+ <span class="pf-v6-c-icon__content pf-m-danger">
539
+ <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
540
+ </span>
541
+ </span>
636
542
  </div>
637
543
  <div class="pf-v6-l-flex__item">
638
544
  <a href="#">12</a>
@@ -641,7 +547,7 @@ wrapperTag: div
641
547
  </div>
642
548
  </div>
643
549
  </div>
644
- <div class="pf-v6-c-card pf-v5-u-text-align-center">
550
+ <div class="pf-v6-c-card pf-v6-u-text-align-center">
645
551
  <div class="pf-v6-c-card__title">
646
552
  <h2 class="pf-v6-c-card__title-text">12 Hosts</h2>
647
553
  </div>
@@ -649,10 +555,11 @@ wrapperTag: div
649
555
  <div class="pf-v6-l-flex pf-m-inline-flex pf-m-space-items-md">
650
556
  <div class="pf-v6-l-flex pf-m-space-items-sm">
651
557
  <div class="pf-v6-l-flex__item">
652
- <i
653
- class="fas fa-exclamation-triangle pf-v5-u-warning-color-100"
654
- aria-hidden="true"
655
- ></i>
558
+ <span class="pf-v6-c-icon">
559
+ <span class="pf-v6-c-icon__content pf-m-warning">
560
+ <i class="fas fa-exclamation-triangle" aria-hidden="true"></i>
561
+ </span>
562
+ </span>
656
563
  </div>
657
564
  <div class="pf-v6-l-flex__item">
658
565
  <a href="#">2</a>
@@ -661,10 +568,11 @@ wrapperTag: div
661
568
  <hr class="pf-v6-c-divider pf-m-vertical" />
662
569
  <div class="pf-v6-l-flex pf-m-space-items-sm">
663
570
  <div class="pf-v6-l-flex__item">
664
- <i
665
- class="fas fa-times-circle pf-v5-u-danger-color-100"
666
- aria-hidden="true"
667
- ></i>
571
+ <span class="pf-v6-c-icon">
572
+ <span class="pf-v6-c-icon__content pf-m-danger">
573
+ <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
574
+ </span>
575
+ </span>
668
576
  </div>
669
577
  <div class="pf-v6-l-flex__item">
670
578
  <a href="#">7</a>
@@ -678,12 +586,12 @@ wrapperTag: div
678
586
  <div class="pf-v6-l-grid__item">
679
587
  <div
680
588
  class="pf-v6-l-gallery pf-m-gutter"
681
- style="--pf-v5-l-gallery--GridTemplateColumns--min: 260px;"
589
+ style="--pf-v6-l-gallery--GridTemplateColumns--min: 260px;"
682
590
  >
683
591
  <div class="pf-v6-c-card">
684
592
  <div class="pf-v6-c-card__title">
685
593
  <h2
686
- class="pf-v6-c-card__title-text pf-v5-u-text-align-center"
594
+ class="pf-v6-c-card__title-text pf-v6-u-text-align-center"
687
595
  >13 Hosts</h2>
688
596
  </div>
689
597
  <div class="pf-v6-c-card__body">
@@ -692,10 +600,11 @@ wrapperTag: div
692
600
  >
693
601
  <div class="pf-v6-l-flex pf-m-space-items-sm">
694
602
  <div class="pf-v6-l-flex__item">
695
- <i
696
- class="fas fa-times-circle pf-v5-u-danger-color-100"
697
- aria-hidden="true"
698
- ></i>
603
+ <span class="pf-v6-c-icon">
604
+ <span class="pf-v6-c-icon__content pf-m-danger">
605
+ <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
606
+ </span>
607
+ </span>
699
608
  </div>
700
609
  <div class="pf-v6-l-stack">
701
610
  <a href="#">2 errors</a>
@@ -704,10 +613,11 @@ wrapperTag: div
704
613
  </div>
705
614
  <div class="pf-v6-l-flex pf-m-space-items-sm">
706
615
  <div class="pf-v6-l-flex__item">
707
- <i
708
- class="fas fa-exclamation-triangle pf-v5-u-warning-color-100"
709
- aria-hidden="true"
710
- ></i>
616
+ <span class="pf-v6-c-icon">
617
+ <span class="pf-v6-c-icon__content pf-m-warning">
618
+ <i class="fas fa-exclamation-triangle" aria-hidden="true"></i>
619
+ </span>
620
+ </span>
711
621
  </div>
712
622
  <div class="pf-v6-l-stack">
713
623
  <a href="#">1 warnings</a>
@@ -718,7 +628,7 @@ wrapperTag: div
718
628
  </div>
719
629
  </div>
720
630
  <div class="pf-v6-c-card">
721
- <div class="pf-v6-c-card__title pf-v5-u-text-align-center">
631
+ <div class="pf-v6-c-card__title pf-v6-u-text-align-center">
722
632
  <h2 class="pf-v6-c-card__title-text">3 Hosts</h2>
723
633
  </div>
724
634
  <div class="pf-v6-c-card__body">
@@ -727,10 +637,11 @@ wrapperTag: div
727
637
  >
728
638
  <div class="pf-v6-l-flex pf-m-space-items-sm">
729
639
  <div class="pf-v6-l-flex__item">
730
- <i
731
- class="fas fa-check-circle pf-v5-u-success-color-100"
732
- aria-hidden="true"
733
- ></i>
640
+ <span class="pf-v6-c-icon">
641
+ <span class="pf-v6-c-icon__content pf-m-success">
642
+ <i class="fas fa-check-circle" aria-hidden="true"></i>
643
+ </span>
644
+ </span>
734
645
  </div>
735
646
  <div class="pf-v6-l-stack">
736
647
  <a href="#">2 successes</a>
@@ -739,10 +650,11 @@ wrapperTag: div
739
650
  </div>
740
651
  <div class="pf-v6-l-flex pf-m-space-items-sm">
741
652
  <div class="pf-v6-l-flex__item">
742
- <i
743
- class="fas fa-exclamation-triangle pf-v5-u-warning-color-100"
744
- aria-hidden="true"
745
- ></i>
653
+ <span class="pf-v6-c-icon">
654
+ <span class="pf-v6-c-icon__content pf-m-warning">
655
+ <i class="fas fa-exclamation-triangle" aria-hidden="true"></i>
656
+ </span>
657
+ </span>
746
658
  </div>
747
659
  <div class="pf-v6-l-stack">
748
660
  <a href="#">3 warnings</a>
@@ -753,7 +665,7 @@ wrapperTag: div
753
665
  </div>
754
666
  </div>
755
667
  <div class="pf-v6-c-card">
756
- <div class="pf-v6-c-card__title pf-v5-u-text-align-center">
668
+ <div class="pf-v6-c-card__title pf-v6-u-text-align-center">
757
669
  <h2 class="pf-v6-c-card__title-text">50 Hosts</h2>
758
670
  </div>
759
671
  <div class="pf-v6-c-card__body">
@@ -762,10 +674,11 @@ wrapperTag: div
762
674
  >
763
675
  <div class="pf-v6-l-flex pf-m-space-items-sm">
764
676
  <div class="pf-v6-l-flex__item">
765
- <i
766
- class="fas fa-exclamation-triangle pf-v5-u-warning-color-100"
767
- aria-hidden="true"
768
- ></i>
677
+ <span class="pf-v6-c-icon">
678
+ <span class="pf-v6-c-icon__content pf-m-warning">
679
+ <i class="fas fa-exclamation-triangle" aria-hidden="true"></i>
680
+ </span>
681
+ </span>
769
682
  </div>
770
683
  <div class="pf-v6-l-stack">
771
684
  <a href="#">7 warnings</a>
@@ -774,10 +687,11 @@ wrapperTag: div
774
687
  </div>
775
688
  <div class="pf-v6-l-flex pf-m-space-items-sm">
776
689
  <div class="pf-v6-l-flex__item">
777
- <i
778
- class="fas fa-times-circle pf-v5-u-danger-color-100"
779
- aria-hidden="true"
780
- ></i>
690
+ <span class="pf-v6-c-icon">
691
+ <span class="pf-v6-c-icon__content pf-m-danger">
692
+ <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
693
+ </span>
694
+ </span>
781
695
  </div>
782
696
  <div class="pf-v6-l-stack">
783
697
  <a href="#">1 error</a>
@@ -1117,7 +1031,7 @@ wrapperTag: div
1117
1031
  <span class="pf-v6-c-label__text">3</span>
1118
1032
  </span>
1119
1033
  </span>
1120
- <span class="pf-v6-c-label pf-m-cyan">
1034
+ <span class="pf-v6-c-label pf-m-teal">
1121
1035
  <span class="pf-v6-c-label__content">
1122
1036
  <span class="pf-v6-c-label__icon">
1123
1037
  <i class="fas fa-fw fa-bell" aria-hidden="true"></i>
@@ -1142,9 +1056,7 @@ wrapperTag: div
1142
1056
  <span class="pf-v6-c-notification-drawer__list-item-header-icon">
1143
1057
  <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
1144
1058
  </span>
1145
- <h2
1146
- class="pf-v6-c-notification-drawer__list-item-header-title pf-v5-u-danger-color-200"
1147
- >
1059
+ <h2 class="pf-v6-c-notification-drawer__list-item-header-title">
1148
1060
  <span class="pf-v6-screen-reader">Danger notification:</span>
1149
1061
  Critical alert regarding control plane
1150
1062
  </h2>
@@ -1161,9 +1073,7 @@ wrapperTag: div
1161
1073
  <span class="pf-v6-c-notification-drawer__list-item-header-icon">
1162
1074
  <i class="fas fa-exclamation-triangle" aria-hidden="true"></i>
1163
1075
  </span>
1164
- <h2
1165
- class="pf-v6-c-notification-drawer__list-item-header-title pf-v5-u-warning-color-200"
1166
- >
1076
+ <h2 class="pf-v6-c-notification-drawer__list-item-header-title">
1167
1077
  <span class="pf-v6-screen-reader">Warning notification:</span>
1168
1078
  Warning alert
1169
1079
  </h2>
@@ -1310,7 +1220,7 @@ wrapperTag: div
1310
1220
  <span class="pf-v6-c-label__text">3</span>
1311
1221
  </span>
1312
1222
  </span>
1313
- <span class="pf-v6-c-label pf-m-cyan">
1223
+ <span class="pf-v6-c-label pf-m-teal">
1314
1224
  <span class="pf-v6-c-label__content">
1315
1225
  <span class="pf-v6-c-label__icon">
1316
1226
  <i class="fas fa-fw fa-bell" aria-hidden="true"></i>
@@ -1335,9 +1245,7 @@ wrapperTag: div
1335
1245
  <span class="pf-v6-c-notification-drawer__list-item-header-icon">
1336
1246
  <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
1337
1247
  </span>
1338
- <h2
1339
- class="pf-v6-c-notification-drawer__list-item-header-title pf-v5-u-danger-color-200"
1340
- >
1248
+ <h2 class="pf-v6-c-notification-drawer__list-item-header-title">
1341
1249
  <span class="pf-v6-screen-reader">Danger notification:</span>
1342
1250
  Critical alert regarding control plane
1343
1251
  </h2>
@@ -1354,9 +1262,7 @@ wrapperTag: div
1354
1262
  <span class="pf-v6-c-notification-drawer__list-item-header-icon">
1355
1263
  <i class="fas fa-exclamation-triangle" aria-hidden="true"></i>
1356
1264
  </span>
1357
- <h2
1358
- class="pf-v6-c-notification-drawer__list-item-header-title pf-v5-u-warning-color-200"
1359
- >
1265
+ <h2 class="pf-v6-c-notification-drawer__list-item-header-title">
1360
1266
  <span class="pf-v6-screen-reader">Warning notification:</span>
1361
1267
  Warning alert
1362
1268
  </h2>
@@ -1414,7 +1320,7 @@ wrapperTag: div
1414
1320
  aria-modal="true"
1415
1321
  aria-labelledby="status-card-expanded-with-popover-example-popover-popover-right-header"
1416
1322
  aria-describedby="status-card-expanded-with-popover-example-popover-popover-right-body"
1417
- style="--pf-v5-c-popover--MinWidth: 400px;"
1323
+ style="--pf-v6-c-popover--MinWidth: 400px;"
1418
1324
  >
1419
1325
  <div class="pf-v6-c-popover__arrow"></div>
1420
1326
  <div class="pf-v6-c-popover__content">
@@ -1424,7 +1330,9 @@ wrapperTag: div
1424
1330
  type="button"
1425
1331
  aria-label="Close"
1426
1332
  >
1427
- <i class="fas fa-times" aria-hidden="true"></i>
1333
+ <span class="pf-v6-c-button__icon">
1334
+ <i class="fas fa-times" aria-hidden="true"></i>
1335
+ </span>
1428
1336
  </button>
1429
1337
  </div>
1430
1338
  <header class="pf-v6-c-popover__header">
@@ -1448,8 +1356,14 @@ wrapperTag: div
1448
1356
  id="status-card-expanded-with-popover-example-popover-table"
1449
1357
  >
1450
1358
  <thead class="pf-v6-c-table__thead">
1451
- <tr class="pf-v6-c-table__tr">
1452
- <td class="pf-v6-c-table__td"></td>
1359
+ <tr class="pf-v6-c-table__tr" [object Object]>
1360
+ <th
1361
+ class="pf-v6-c-table__th pf-v6-c-table__cell-empty"
1362
+ role="columnheader"
1363
+ scope="col"
1364
+ >
1365
+ <span class="pf-v6-screen-reader">Actions</span>
1366
+ </th>
1453
1367
 
1454
1368
  <th class="pf-v6-c-table__th" scope="col">Components</th>
1455
1369
 
@@ -1461,27 +1375,40 @@ wrapperTag: div
1461
1375
  </thead>
1462
1376
 
1463
1377
  <tbody class="pf-v6-c-table__tbody pf-m-expanded">
1464
- <tr class="pf-v6-c-table__tr pf-m-expanded">
1378
+ <tr
1379
+ class="pf-v6-c-table__tr pf-m-expanded"
1380
+ [object
1381
+ Object]
1382
+ >
1465
1383
  <td
1466
1384
  class="pf-v6-c-table__td pf-v6-c-table__toggle"
1467
- role="cell"
1385
+ aria-label="Row expansion"
1468
1386
  >
1469
1387
  <button
1470
1388
  class="pf-v6-c-button pf-m-expanded pf-m-plain"
1389
+ id="status-card-expanded-with-popover-example-popover-table-expandable-toggle-1"
1471
1390
  type="button"
1472
1391
  aria-expanded="true"
1392
+ aria-controls="status-card-expanded-with-popover-example-popover-table-content-1"
1393
+ aria-labelledby="status-card-expanded-with-popover-example-popover-table-node-1"
1473
1394
  aria-label="Toggle row"
1395
+ aria-describedby="true"
1474
1396
  >
1475
- <div class="pf-v6-c-table__toggle-icon">
1476
- <i class="fas fa-angle-down" aria-hidden="true"></i>
1477
- </div>
1397
+ <span class="pf-v6-c-button__icon">
1398
+ <div class="pf-v6-c-table__toggle-icon">
1399
+ <i
1400
+ class="fas fa-angle-down"
1401
+ aria-hidden="true"
1402
+ ></i>
1403
+ </div>
1404
+ </span>
1478
1405
  </button>
1479
1406
  </td>
1480
1407
 
1481
1408
  <td
1482
1409
  class="pf-v6-c-table__td"
1483
1410
  role="cell"
1484
- id="{{table--id}}-node1"
1411
+ id="status-card-expanded-with-popover-example-popover-table-node1"
1485
1412
  data-label="Branches"
1486
1413
  >
1487
1414
  <span class="pf-v6-c-table__text">API Servers</span>
@@ -1503,6 +1430,8 @@ wrapperTag: div
1503
1430
 
1504
1431
  <tr
1505
1432
  class="pf-v6-c-table__tr pf-v6-c-table__expandable-row pf-m-expanded"
1433
+ [object
1434
+ Object]
1506
1435
  >
1507
1436
  <td
1508
1437
  class="pf-v6-c-table__td"
@@ -1534,19 +1463,27 @@ wrapperTag: div
1534
1463
  </tbody>
1535
1464
 
1536
1465
  <tbody class="pf-v6-c-table__tbody">
1537
- <tr class="pf-v6-c-table__tr">
1466
+ <tr class="pf-v6-c-table__tr" [object Object]>
1538
1467
  <td
1539
1468
  class="pf-v6-c-table__td pf-v6-c-table__toggle"
1540
- role="cell"
1469
+ aria-label="Row expansion"
1541
1470
  >
1542
1471
  <button
1543
1472
  class="pf-v6-c-button pf-m-plain"
1473
+ id="status-card-expanded-with-popover-example-popover-table-expandable-toggle-2"
1544
1474
  type="button"
1475
+ aria-controls="status-card-expanded-with-popover-example-popover-table-content-2"
1476
+ aria-labelledby="status-card-expanded-with-popover-example-popover-table-node-2"
1545
1477
  aria-label="Toggle row"
1546
1478
  >
1547
- <div class="pf-v6-c-table__toggle-icon">
1548
- <i class="fas fa-angle-down" aria-hidden="true"></i>
1549
- </div>
1479
+ <span class="pf-v6-c-button__icon">
1480
+ <div class="pf-v6-c-table__toggle-icon">
1481
+ <i
1482
+ class="fas fa-angle-down"
1483
+ aria-hidden="true"
1484
+ ></i>
1485
+ </div>
1486
+ </span>
1550
1487
  </button>
1551
1488
  </td>
1552
1489
 
@@ -1577,6 +1514,8 @@ wrapperTag: div
1577
1514
 
1578
1515
  <tr
1579
1516
  class="pf-v6-c-table__tr pf-v6-c-table__expandable-row"
1517
+ [object
1518
+ Object]
1580
1519
  >
1581
1520
  <td
1582
1521
  class="pf-v6-c-table__td"
@@ -1592,19 +1531,27 @@ wrapperTag: div
1592
1531
  </tbody>
1593
1532
 
1594
1533
  <tbody class="pf-v6-c-table__tbody">
1595
- <tr class="pf-v6-c-table__tr">
1534
+ <tr class="pf-v6-c-table__tr" [object Object]>
1596
1535
  <td
1597
1536
  class="pf-v6-c-table__td pf-v6-c-table__toggle"
1598
- role="cell"
1537
+ aria-label="Row expansion"
1599
1538
  >
1600
1539
  <button
1601
1540
  class="pf-v6-c-button pf-m-plain"
1541
+ id="status-card-expanded-with-popover-example-popover-table-expandable-toggle-3"
1602
1542
  type="button"
1543
+ aria-controls="status-card-expanded-with-popover-example-popover-table-content-3"
1544
+ aria-labelledby="status-card-expanded-with-popover-example-popover-table-node-3"
1603
1545
  aria-label="Toggle row"
1604
1546
  >
1605
- <div class="pf-v6-c-table__toggle-icon">
1606
- <i class="fas fa-angle-down" aria-hidden="true"></i>
1607
- </div>
1547
+ <span class="pf-v6-c-button__icon">
1548
+ <div class="pf-v6-c-table__toggle-icon">
1549
+ <i
1550
+ class="fas fa-angle-down"
1551
+ aria-hidden="true"
1552
+ ></i>
1553
+ </div>
1554
+ </span>
1608
1555
  </button>
1609
1556
  </td>
1610
1557
 
@@ -1633,6 +1580,8 @@ wrapperTag: div
1633
1580
 
1634
1581
  <tr
1635
1582
  class="pf-v6-c-table__tr pf-v6-c-table__expandable-row"
1583
+ [object
1584
+ Object]
1636
1585
  >
1637
1586
  <td
1638
1587
  class="pf-v6-c-table__td"
@@ -1648,19 +1597,27 @@ wrapperTag: div
1648
1597
  </tbody>
1649
1598
 
1650
1599
  <tbody class="pf-v6-c-table__tbody">
1651
- <tr class="pf-v6-c-table__tr">
1600
+ <tr class="pf-v6-c-table__tr" [object Object]>
1652
1601
  <td
1653
1602
  class="pf-v6-c-table__td pf-v6-c-table__toggle"
1654
- role="cell"
1603
+ aria-label="Row expansion"
1655
1604
  >
1656
1605
  <button
1657
1606
  class="pf-v6-c-button pf-m-plain"
1607
+ id="status-card-expanded-with-popover-example-popover-table-expandable-toggle-4"
1658
1608
  type="button"
1609
+ aria-controls="status-card-expanded-with-popover-example-popover-table-content-4"
1610
+ aria-labelledby="status-card-expanded-with-popover-example-popover-table-node-4"
1659
1611
  aria-label="Toggle row"
1660
1612
  >
1661
- <div class="pf-v6-c-table__toggle-icon">
1662
- <i class="fas fa-angle-down" aria-hidden="true"></i>
1663
- </div>
1613
+ <span class="pf-v6-c-button__icon">
1614
+ <div class="pf-v6-c-table__toggle-icon">
1615
+ <i
1616
+ class="fas fa-angle-down"
1617
+ aria-hidden="true"
1618
+ ></i>
1619
+ </div>
1620
+ </span>
1664
1621
  </button>
1665
1622
  </td>
1666
1623
 
@@ -1689,6 +1646,8 @@ wrapperTag: div
1689
1646
 
1690
1647
  <tr
1691
1648
  class="pf-v6-c-table__tr pf-v6-c-table__expandable-row"
1649
+ [object
1650
+ Object]
1692
1651
  >
1693
1652
  <td
1694
1653
  class="pf-v6-c-table__td"
@@ -1801,7 +1760,7 @@ wrapperTag: div
1801
1760
  <span class="pf-v6-c-label__text">3</span>
1802
1761
  </span>
1803
1762
  </span>
1804
- <span class="pf-v6-c-label pf-m-cyan">
1763
+ <span class="pf-v6-c-label pf-m-teal">
1805
1764
  <span class="pf-v6-c-label__content">
1806
1765
  <span class="pf-v6-c-label__icon">
1807
1766
  <i class="fas fa-fw fa-bell" aria-hidden="true"></i>
@@ -1826,9 +1785,7 @@ wrapperTag: div
1826
1785
  <span class="pf-v6-c-notification-drawer__list-item-header-icon">
1827
1786
  <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
1828
1787
  </span>
1829
- <h2
1830
- class="pf-v6-c-notification-drawer__list-item-header-title pf-v5-u-danger-color-200"
1831
- >
1788
+ <h2 class="pf-v6-c-notification-drawer__list-item-header-title">
1832
1789
  <span class="pf-v6-screen-reader">Danger notification:</span>
1833
1790
  Critical alert regarding control plane
1834
1791
  </h2>
@@ -1845,9 +1802,7 @@ wrapperTag: div
1845
1802
  <span class="pf-v6-c-notification-drawer__list-item-header-icon">
1846
1803
  <i class="fas fa-exclamation-triangle" aria-hidden="true"></i>
1847
1804
  </span>
1848
- <h2
1849
- class="pf-v6-c-notification-drawer__list-item-header-title pf-v5-u-warning-color-200"
1850
- >
1805
+ <h2 class="pf-v6-c-notification-drawer__list-item-header-title">
1851
1806
  <span class="pf-v6-screen-reader">Warning notification:</span>
1852
1807
  Warning alert
1853
1808
  </h2>
@@ -1869,7 +1824,7 @@ wrapperTag: div
1869
1824
  ```html
1870
1825
  <div
1871
1826
  class="pf-v6-l-gallery pf-m-gutter"
1872
- style="--pf-v5-l-gallery--GridTemplateColumns--min: 360px;"
1827
+ style="--pf-v6-l-gallery--GridTemplateColumns--min: 360px;"
1873
1828
  >
1874
1829
  <div class="pf-v6-c-card" id="utilization-card-1-example">
1875
1830
  <div class="pf-v6-c-card__title" id="utilization-card-1-example-title1">
@@ -1913,7 +1868,7 @@ wrapperTag: div
1913
1868
  ```html
1914
1869
  <div
1915
1870
  class="pf-v6-l-gallery pf-m-gutter"
1916
- style="--pf-v5-l-gallery--GridTemplateColumns--min: 360px;"
1871
+ style="--pf-v6-l-gallery--GridTemplateColumns--min: 360px;"
1917
1872
  >
1918
1873
  <div class="pf-v6-c-card" id="utilization-card-2-example">
1919
1874
  <div class="pf-v6-c-card__title" id="utilization-card-2-example-title1">
@@ -1959,83 +1914,40 @@ wrapperTag: div
1959
1914
  <br />
1960
1915
  <div
1961
1916
  class="pf-v6-l-gallery pf-m-gutter"
1962
- style="--pf-v5-l-gallery--GridTemplateColumns--min: 360px;"
1917
+ style="--pf-v6-l-gallery--GridTemplateColumns--min: 360px;"
1963
1918
  >
1964
1919
  <div class="pf-v6-c-card" id="utilization-card-3-example">
1965
- <div class="pf-v6-c-card__header pf-v5-u-align-items-flex-start">
1920
+ <div class="pf-v6-c-card__header pf-v6-u-align-items-flex-start">
1966
1921
  <div class="pf-v6-c-card__header-main">
1967
1922
  <div class="pf-v6-c-card__title" id="utilization-card-3-example-title1">
1968
1923
  <h2 class="pf-v6-c-title pf-m-lg">Recommendations</h2>
1969
1924
  </div>
1970
1925
  </div>
1971
1926
  <div class="pf-v6-c-card__actions pf-m-no-offset">
1972
- <div class="pf-v6-c-select">
1973
- <span
1974
- id="utilization-card-3-example-select-dropdown-label"
1975
- hidden
1976
- >Choose one</span>
1977
-
1978
- <button
1979
- class="pf-v6-c-select__toggle pf-m-plain"
1980
- type="button"
1981
- id="utilization-card-3-example-select-dropdown-toggle"
1982
- aria-haspopup="true"
1983
- aria-expanded="false"
1984
- aria-labelledby="utilization-card-3-example-select-dropdown-label utilization-card-3-example-select-dropdown-toggle"
1985
- >
1986
- <div class="pf-v6-c-select__toggle-wrapper">
1987
- <span class="pf-v6-c-select__toggle-text">Filter</span>
1988
- </div>
1989
- <span class="pf-v6-c-select__toggle-arrow">
1927
+ <button
1928
+ class="pf-v6-c-menu-toggle pf-m-plain pf-m-text"
1929
+ type="button"
1930
+ aria-expanded="false"
1931
+ id="utilization-card-3-example-select-dropdown"
1932
+ >
1933
+ <span class="pf-v6-c-menu-toggle__text">Filter</span>
1934
+ <span class="pf-v6-c-menu-toggle__controls">
1935
+ <span class="pf-v6-c-menu-toggle__toggle-icon">
1990
1936
  <i class="fas fa-caret-down" aria-hidden="true"></i>
1991
1937
  </span>
1992
- </button>
1993
-
1994
- <ul
1995
- class="pf-v6-c-select__menu pf-m-align-right"
1996
- role="listbox"
1997
- aria-labelledby="utilization-card-3-example-select-dropdown-label"
1998
- hidden
1999
- >
2000
- <li role="presentation">
2001
- <button class="pf-v6-c-select__menu-item" role="option">Running</button>
2002
- </li>
2003
- <li role="presentation">
2004
- <button
2005
- class="pf-v6-c-select__menu-item pf-m-selected"
2006
- role="option"
2007
- aria-selected="true"
2008
- >
2009
- Stopped
2010
- <span class="pf-v6-c-select__menu-item-icon">
2011
- <i class="fas fa-check" aria-hidden="true"></i>
2012
- </span>
2013
- </button>
2014
- </li>
2015
- <li role="presentation">
2016
- <button class="pf-v6-c-select__menu-item" role="option">Down</button>
2017
- </li>
2018
- <li role="presentation">
2019
- <button class="pf-v6-c-select__menu-item" role="option">Degraded</button>
2020
- </li>
2021
- <li role="presentation">
2022
- <button
2023
- class="pf-v6-c-select__menu-item"
2024
- role="option"
2025
- >Needs maintenance</button>
2026
- </li>
2027
- </ul>
2028
- </div>
1938
+ </span>
1939
+ </button>
2029
1940
  </div>
2030
1941
  </div>
2031
1942
  <div class="pf-v6-c-card__body">
2032
1943
  <div class="pf-v6-l-flex pf-m-column">
2033
1944
  <span>System</span>
2034
1945
  <div class="pf-v6-l-flex pf-m-space-items-sm">
2035
- <i
2036
- class="fas fa-exclamation-circle pf-v5-u-danger-color-100"
2037
- aria-hidden="true"
2038
- ></i>
1946
+ <span class="pf-v6-c-icon">
1947
+ <span class="pf-v6-c-icon__content pf-m-danger">
1948
+ <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
1949
+ </span>
1950
+ </span>
2039
1951
  <a hfer="#">25 incidents detected</a>
2040
1952
  </div>
2041
1953
  <div class="ws-chart">
@@ -2056,7 +1968,7 @@ wrapperTag: div
2056
1968
  ```html
2057
1969
  <div
2058
1970
  class="pf-v6-l-gallery pf-m-gutter"
2059
- style="--pf-v5-l-gallery--GridTemplateColumns--min: 360px;"
1971
+ style="--pf-v6-l-gallery--GridTemplateColumns--min: 360px;"
2060
1972
  >
2061
1973
  <div class="pf-v6-c-card" id="utilization-card-4-example">
2062
1974
  <div class="pf-v6-c-card__title" id="utilization-card-4-example-title1">
@@ -2097,13 +2009,15 @@ wrapperTag: div
2097
2009
  <div class="pf-v6-c-card__header-toggle">
2098
2010
  <button
2099
2011
  class="pf-v6-c-button pf-m-plain"
2100
- type="button"
2101
- aria-label="Details"
2102
2012
  id="nested-cards-toggle-right-example-group-1-toggle"
2013
+ type="button"
2103
2014
  aria-labelledby="nested-cards-toggle-right-example-group-1-title nested-cards-toggle-right-example-group-1-toggle"
2015
+ aria-label="Details"
2104
2016
  >
2105
- <span class="pf-v6-c-card__header-toggle-icon">
2106
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2017
+ <span class="pf-v6-c-button__icon pf-m-start">
2018
+ <span class="pf-v6-c-card__header-toggle-icon">
2019
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
2020
+ </span>
2107
2021
  </span>
2108
2022
  </button>
2109
2023
  </div>
@@ -2112,7 +2026,7 @@ wrapperTag: div
2112
2026
  class="pf-v6-c-card__title"
2113
2027
  id="nested-cards-toggle-right-example-group-1-title"
2114
2028
  >
2115
- <h2 class="pf-v6-c-card__title-text pf-v5-u-font-weight-light">CPU 1</h2>
2029
+ <h2 class="pf-v6-c-card__title-text">CPU 1</h2>
2116
2030
  </div>
2117
2031
  </div>
2118
2032
  </div>
@@ -2122,13 +2036,13 @@ wrapperTag: div
2122
2036
  <div class="pf-v6-l-grid pf-m-gutter">
2123
2037
  <div class="pf-v6-l-grid__item pf-m-4-col-on-md">
2124
2038
  <div
2125
- class="pf-v6-l-flex pf-m-column-on-md pf-m-space-items-none-on-md pf-m-justify-content-center-on-md pf-v5-u-h-100-on-md"
2039
+ class="pf-v6-l-flex pf-m-column-on-md pf-m-space-items-none-on-md pf-m-justify-content-center-on-md pf-v6-u-h-100-on-md"
2126
2040
  >
2127
2041
  <div class="pf-v6-l-flex__item">
2128
2042
  <b>Temperature</b>
2129
2043
  </div>
2130
2044
  <hr
2131
- class="pf-v6-c-divider pf-m-vertical pf-m-inset-sm pf-v5-u-hidden-on-md"
2045
+ class="pf-v6-c-divider pf-m-vertical pf-m-inset-sm pf-v6-u-hidden-on-md"
2132
2046
  />
2133
2047
  <div class="pf-v6-l-flex__item">
2134
2048
  <span>64C</span>
@@ -2157,17 +2071,17 @@ wrapperTag: div
2157
2071
  </div>
2158
2072
  </div>
2159
2073
  </div>
2160
- <hr class="pf-v6-c-divider pf-v5-u-hidden-on-md" />
2074
+ <hr class="pf-v6-c-divider pf-v6-u-hidden-on-md" />
2161
2075
  <div class="pf-v6-l-grid pf-m-gutter">
2162
2076
  <div class="pf-v6-l-grid__item pf-m-4-col-on-md">
2163
2077
  <div
2164
- class="pf-v6-l-flex pf-m-column-on-md pf-m-space-items-none-on-md pf-m-justify-content-center-on-md pf-v5-u-h-100-on-md"
2078
+ class="pf-v6-l-flex pf-m-column-on-md pf-m-space-items-none-on-md pf-m-justify-content-center-on-md pf-v6-u-h-100-on-md"
2165
2079
  >
2166
2080
  <div class="pf-v6-l-flex__item">
2167
2081
  <b>Speed</b>
2168
2082
  </div>
2169
2083
  <hr
2170
- class="pf-v6-c-divider pf-m-vertical pf-m-inset-sm pf-v5-u-hidden-on-md"
2084
+ class="pf-v6-c-divider pf-m-vertical pf-m-inset-sm pf-v6-u-hidden-on-md"
2171
2085
  />
2172
2086
  <div class="pf-v6-l-flex__item">
2173
2087
  <span>2.3Ghz</span>
@@ -2208,13 +2122,15 @@ wrapperTag: div
2208
2122
  <div class="pf-v6-c-card__header-toggle">
2209
2123
  <button
2210
2124
  class="pf-v6-c-button pf-m-plain"
2211
- type="button"
2212
- aria-label="Details"
2213
2125
  id="nested-cards-toggle-right-example-group-2-toggle"
2126
+ type="button"
2214
2127
  aria-labelledby="nested-cards-toggle-right-example-group-2-title nested-cards-toggle-right-example-group-2-toggle"
2128
+ aria-label="Details"
2215
2129
  >
2216
- <span class="pf-v6-c-card__header-toggle-icon">
2217
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2130
+ <span class="pf-v6-c-button__icon pf-m-start">
2131
+ <span class="pf-v6-c-card__header-toggle-icon">
2132
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
2133
+ </span>
2218
2134
  </span>
2219
2135
  </button>
2220
2136
  </div>
@@ -2223,7 +2139,7 @@ wrapperTag: div
2223
2139
  class="pf-v6-c-card__title"
2224
2140
  id="nested-cards-toggle-right-example-group-2-title"
2225
2141
  >
2226
- <h2 class="pf-v6-c-card__title-text pf-v5-u-font-weight-light">CPU 2</h2>
2142
+ <h2 class="pf-v6-c-card__title-text">CPU 2</h2>
2227
2143
  </div>
2228
2144
  </div>
2229
2145
  </div>
@@ -2236,13 +2152,15 @@ wrapperTag: div
2236
2152
  <div class="pf-v6-c-card__header-toggle">
2237
2153
  <button
2238
2154
  class="pf-v6-c-button pf-m-plain"
2239
- type="button"
2240
- aria-label="Details"
2241
2155
  id="nested-cards-toggle-right-example-group-3-toggle"
2156
+ type="button"
2242
2157
  aria-labelledby="nested-cards-toggle-right-example-group-3-title nested-cards-toggle-right-example-group-3-toggle"
2158
+ aria-label="Details"
2243
2159
  >
2244
- <span class="pf-v6-c-card__header-toggle-icon">
2245
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2160
+ <span class="pf-v6-c-button__icon pf-m-start">
2161
+ <span class="pf-v6-c-card__header-toggle-icon">
2162
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
2163
+ </span>
2246
2164
  </span>
2247
2165
  </button>
2248
2166
  </div>
@@ -2251,7 +2169,7 @@ wrapperTag: div
2251
2169
  class="pf-v6-c-card__title"
2252
2170
  id="nested-cards-toggle-right-example-group-3-title&quot;"
2253
2171
  >
2254
- <h2 class="pf-v6-c-card__title-text pf-v5-u-font-weight-light">CPU 3</h2>
2172
+ <h2 class="pf-v6-c-card__title-text">CPU 3</h2>
2255
2173
  </div>
2256
2174
  </div>
2257
2175
  </div>
@@ -2279,13 +2197,15 @@ wrapperTag: div
2279
2197
  <div class="pf-v6-c-card__header-toggle">
2280
2198
  <button
2281
2199
  class="pf-v6-c-button pf-m-plain"
2282
- type="button"
2283
- aria-label="Details"
2284
2200
  id="nested-cards-example-group-1-toggle"
2201
+ type="button"
2285
2202
  aria-labelledby="nested-cards-example-group-1-title nested-cards-example-group-1-toggle"
2203
+ aria-label="Details"
2286
2204
  >
2287
- <span class="pf-v6-c-card__header-toggle-icon">
2288
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2205
+ <span class="pf-v6-c-button__icon pf-m-start">
2206
+ <span class="pf-v6-c-card__header-toggle-icon">
2207
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
2208
+ </span>
2289
2209
  </span>
2290
2210
  </button>
2291
2211
  </div>
@@ -2294,7 +2214,7 @@ wrapperTag: div
2294
2214
  class="pf-v6-c-card__title"
2295
2215
  id="nested-cards-example-group-1-title"
2296
2216
  >
2297
- <h2 class="pf-v6-c-card__title-text pf-v5-u-font-weight-light">CPU 1</h2>
2217
+ <h2 class="pf-v6-c-card__title-text">CPU 1</h2>
2298
2218
  </div>
2299
2219
  </div>
2300
2220
  </div>
@@ -2304,13 +2224,13 @@ wrapperTag: div
2304
2224
  <div class="pf-v6-l-grid pf-m-gutter">
2305
2225
  <div class="pf-v6-l-grid__item pf-m-4-col-on-md">
2306
2226
  <div
2307
- class="pf-v6-l-flex pf-m-column-on-md pf-m-space-items-none-on-md pf-m-justify-content-center-on-md pf-v5-u-h-100-on-md"
2227
+ class="pf-v6-l-flex pf-m-column-on-md pf-m-space-items-none-on-md pf-m-justify-content-center-on-md pf-v6-u-h-100-on-md"
2308
2228
  >
2309
2229
  <div class="pf-v6-l-flex__item">
2310
2230
  <b>Temperature</b>
2311
2231
  </div>
2312
2232
  <hr
2313
- class="pf-v6-c-divider pf-m-vertical pf-m-inset-sm pf-v5-u-hidden-on-md"
2233
+ class="pf-v6-c-divider pf-m-vertical pf-m-inset-sm pf-v6-u-hidden-on-md"
2314
2234
  />
2315
2235
  <div class="pf-v6-l-flex__item">
2316
2236
  <span>64C</span>
@@ -2339,17 +2259,17 @@ wrapperTag: div
2339
2259
  </div>
2340
2260
  </div>
2341
2261
  </div>
2342
- <hr class="pf-v6-c-divider pf-v5-u-hidden-on-md" />
2262
+ <hr class="pf-v6-c-divider pf-v6-u-hidden-on-md" />
2343
2263
  <div class="pf-v6-l-grid pf-m-gutter">
2344
2264
  <div class="pf-v6-l-grid__item pf-m-4-col-on-md">
2345
2265
  <div
2346
- class="pf-v6-l-flex pf-m-column-on-md pf-m-space-items-none-on-md pf-m-justify-content-center-on-md pf-v5-u-h-100-on-md"
2266
+ class="pf-v6-l-flex pf-m-column-on-md pf-m-space-items-none-on-md pf-m-justify-content-center-on-md pf-v6-u-h-100-on-md"
2347
2267
  >
2348
2268
  <div class="pf-v6-l-flex__item">
2349
2269
  <b>Speed</b>
2350
2270
  </div>
2351
2271
  <hr
2352
- class="pf-v6-c-divider pf-m-vertical pf-m-inset-sm pf-v5-u-hidden-on-md"
2272
+ class="pf-v6-c-divider pf-m-vertical pf-m-inset-sm pf-v6-u-hidden-on-md"
2353
2273
  />
2354
2274
  <div class="pf-v6-l-flex__item">
2355
2275
  <span>2.3Ghz</span>
@@ -2387,13 +2307,15 @@ wrapperTag: div
2387
2307
  <div class="pf-v6-c-card__header-toggle">
2388
2308
  <button
2389
2309
  class="pf-v6-c-button pf-m-plain"
2390
- type="button"
2391
- aria-label="Details"
2392
2310
  id="nested-cards-example-group-2-toggle"
2311
+ type="button"
2393
2312
  aria-labelledby="nested-cards-example-group-2-title nested-cards-example-group-2-toggle"
2313
+ aria-label="Details"
2394
2314
  >
2395
- <span class="pf-v6-c-card__header-toggle-icon">
2396
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2315
+ <span class="pf-v6-c-button__icon pf-m-start">
2316
+ <span class="pf-v6-c-card__header-toggle-icon">
2317
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
2318
+ </span>
2397
2319
  </span>
2398
2320
  </button>
2399
2321
  </div>
@@ -2402,7 +2324,7 @@ wrapperTag: div
2402
2324
  class="pf-v6-c-card__title"
2403
2325
  id="nested-cards-example-group-2-title"
2404
2326
  >
2405
- <h2 class="pf-v6-c-card__title-text pf-v5-u-font-weight-light">CPU 2</h2>
2327
+ <h2 class="pf-v6-c-card__title-text">CPU 2</h2>
2406
2328
  </div>
2407
2329
  </div>
2408
2330
  </div>
@@ -2412,13 +2334,15 @@ wrapperTag: div
2412
2334
  <div class="pf-v6-c-card__header-toggle">
2413
2335
  <button
2414
2336
  class="pf-v6-c-button pf-m-plain"
2415
- type="button"
2416
- aria-label="Details"
2417
2337
  id="nested-cards-example-group-3-toggle"
2338
+ type="button"
2418
2339
  aria-labelledby="nested-cards-example-group-3-title nested-cards-example-group-3-toggle"
2340
+ aria-label="Details"
2419
2341
  >
2420
- <span class="pf-v6-c-card__header-toggle-icon">
2421
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2342
+ <span class="pf-v6-c-button__icon pf-m-start">
2343
+ <span class="pf-v6-c-card__header-toggle-icon">
2344
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
2345
+ </span>
2422
2346
  </span>
2423
2347
  </button>
2424
2348
  </div>
@@ -2427,7 +2351,7 @@ wrapperTag: div
2427
2351
  class="pf-v6-c-card__title"
2428
2352
  id="nested-cards-example-group-3-title"
2429
2353
  >
2430
- <h2 class="pf-v6-c-card__title-text pf-v5-u-font-weight-light">CPU 3</h2>
2354
+ <h2 class="pf-v6-c-card__title-text">CPU 3</h2>
2431
2355
  </div>
2432
2356
  </div>
2433
2357
  </div>
@@ -2455,9 +2379,7 @@ wrapperTag: div
2455
2379
  type="button"
2456
2380
  aria-expanded="true"
2457
2381
  >
2458
- <span class="pf-v6-c-accordion__toggle-text">
2459
- <span class="pf-v5-u-font-weight-light">CPU 1</span>
2460
- </span>
2382
+ <span class="pf-v6-c-accordion__toggle-text">CPU 1</span>
2461
2383
  <span class="pf-v6-c-accordion__toggle-icon">
2462
2384
  <i class="fas fa-angle-right" aria-hidden="true"></i>
2463
2385
  </span>
@@ -2469,13 +2391,13 @@ wrapperTag: div
2469
2391
  <div class="pf-v6-l-grid pf-m-gutter">
2470
2392
  <div class="pf-v6-l-grid__item pf-m-4-col-on-md">
2471
2393
  <div
2472
- class="pf-v6-l-flex pf-m-column-on-md pf-m-space-items-none-on-md pf-m-justify-content-center-on-md pf-v5-u-h-100-on-md"
2394
+ class="pf-v6-l-flex pf-m-column-on-md pf-m-space-items-none-on-md pf-m-justify-content-center-on-md pf-v6-u-h-100-on-md"
2473
2395
  >
2474
2396
  <div class="pf-v6-l-flex__item">
2475
2397
  <b>Temperature</b>
2476
2398
  </div>
2477
2399
  <hr
2478
- class="pf-v6-c-divider pf-m-vertical pf-m-inset-sm pf-v5-u-hidden-on-md"
2400
+ class="pf-v6-c-divider pf-m-vertical pf-m-inset-sm pf-v6-u-hidden-on-md"
2479
2401
  />
2480
2402
  <div class="pf-v6-l-flex__item">
2481
2403
  <span>64C</span>
@@ -2504,17 +2426,17 @@ wrapperTag: div
2504
2426
  </div>
2505
2427
  </div>
2506
2428
  </div>
2507
- <hr class="pf-v6-c-divider pf-v5-u-hidden-on-md" />
2429
+ <hr class="pf-v6-c-divider pf-v6-u-hidden-on-md" />
2508
2430
  <div class="pf-v6-l-grid pf-m-gutter">
2509
2431
  <div class="pf-v6-l-grid__item pf-m-4-col-on-md">
2510
2432
  <div
2511
- class="pf-v6-l-flex pf-m-column-on-md pf-m-space-items-none-on-md pf-m-justify-content-center-on-md pf-v5-u-h-100-on-md"
2433
+ class="pf-v6-l-flex pf-m-column-on-md pf-m-space-items-none-on-md pf-m-justify-content-center-on-md pf-v6-u-h-100-on-md"
2512
2434
  >
2513
2435
  <div class="pf-v6-l-flex__item">
2514
2436
  <b>Speed</b>
2515
2437
  </div>
2516
2438
  <hr
2517
- class="pf-v6-c-divider pf-m-vertical pf-m-inset-sm pf-v5-u-hidden-on-md"
2439
+ class="pf-v6-c-divider pf-m-vertical pf-m-inset-sm pf-v6-u-hidden-on-md"
2518
2440
  />
2519
2441
  <div class="pf-v6-l-flex__item">
2520
2442
  <span>2.3Ghz</span>
@@ -2553,9 +2475,7 @@ wrapperTag: div
2553
2475
  type="button"
2554
2476
  aria-expanded="false"
2555
2477
  >
2556
- <span class="pf-v6-c-accordion__toggle-text">
2557
- <span class="pf-v5-u-font-weight-light">CPU 2</span>
2558
- </span>
2478
+ <span class="pf-v6-c-accordion__toggle-text">CPU 2</span>
2559
2479
  <span class="pf-v6-c-accordion__toggle-icon">
2560
2480
  <i class="fas fa-angle-right" aria-hidden="true"></i>
2561
2481
  </span>
@@ -2566,13 +2486,13 @@ wrapperTag: div
2566
2486
  <div class="pf-v6-l-grid pf-m-gutter">
2567
2487
  <div class="pf-v6-l-grid__item pf-m-4-col-on-md">
2568
2488
  <div
2569
- class="pf-v6-l-flex pf-m-column-on-md pf-m-space-items-none-on-md pf-m-justify-content-center-on-md pf-v5-u-h-100-on-md"
2489
+ class="pf-v6-l-flex pf-m-column-on-md pf-m-space-items-none-on-md pf-m-justify-content-center-on-md pf-v6-u-h-100-on-md"
2570
2490
  >
2571
2491
  <div class="pf-v6-l-flex__item">
2572
2492
  <b>Temperature</b>
2573
2493
  </div>
2574
2494
  <hr
2575
- class="pf-v6-c-divider pf-m-vertical pf-m-inset-sm pf-v5-u-hidden-on-md"
2495
+ class="pf-v6-c-divider pf-m-vertical pf-m-inset-sm pf-v6-u-hidden-on-md"
2576
2496
  />
2577
2497
  <div class="pf-v6-l-flex__item">
2578
2498
  <span>64C</span>
@@ -2601,17 +2521,17 @@ wrapperTag: div
2601
2521
  </div>
2602
2522
  </div>
2603
2523
  </div>
2604
- <hr class="pf-v6-c-divider pf-v5-u-hidden-on-md" />
2524
+ <hr class="pf-v6-c-divider pf-v6-u-hidden-on-md" />
2605
2525
  <div class="pf-v6-l-grid pf-m-gutter">
2606
2526
  <div class="pf-v6-l-grid__item pf-m-4-col-on-md">
2607
2527
  <div
2608
- class="pf-v6-l-flex pf-m-column-on-md pf-m-space-items-none-on-md pf-m-justify-content-center-on-md pf-v5-u-h-100-on-md"
2528
+ class="pf-v6-l-flex pf-m-column-on-md pf-m-space-items-none-on-md pf-m-justify-content-center-on-md pf-v6-u-h-100-on-md"
2609
2529
  >
2610
2530
  <div class="pf-v6-l-flex__item">
2611
2531
  <b>Speed</b>
2612
2532
  </div>
2613
2533
  <hr
2614
- class="pf-v6-c-divider pf-m-vertical pf-m-inset-sm pf-v5-u-hidden-on-md"
2534
+ class="pf-v6-c-divider pf-m-vertical pf-m-inset-sm pf-v6-u-hidden-on-md"
2615
2535
  />
2616
2536
  <div class="pf-v6-l-flex__item">
2617
2537
  <span>2.3Ghz</span>
@@ -2649,9 +2569,7 @@ wrapperTag: div
2649
2569
  type="button"
2650
2570
  aria-expanded="false"
2651
2571
  >
2652
- <span class="pf-v6-c-accordion__toggle-text">
2653
- <span class="pf-v5-u-font-weight-light">CPU 3</span>
2654
- </span>
2572
+ <span class="pf-v6-c-accordion__toggle-text">CPU 3</span>
2655
2573
  <span class="pf-v6-c-accordion__toggle-icon">
2656
2574
  <i class="fas fa-angle-right" aria-hidden="true"></i>
2657
2575
  </span>
@@ -2662,13 +2580,13 @@ wrapperTag: div
2662
2580
  <div class="pf-v6-l-grid pf-m-gutter">
2663
2581
  <div class="pf-v6-l-grid__item pf-m-4-col-on-md">
2664
2582
  <div
2665
- class="pf-v6-l-flex pf-m-column-on-md pf-m-space-items-none-on-md pf-m-justify-content-center-on-md pf-v5-u-h-100-on-md"
2583
+ class="pf-v6-l-flex pf-m-column-on-md pf-m-space-items-none-on-md pf-m-justify-content-center-on-md pf-v6-u-h-100-on-md"
2666
2584
  >
2667
2585
  <div class="pf-v6-l-flex__item">
2668
2586
  <b>Temperature</b>
2669
2587
  </div>
2670
2588
  <hr
2671
- class="pf-v6-c-divider pf-m-vertical pf-m-inset-sm pf-v5-u-hidden-on-md"
2589
+ class="pf-v6-c-divider pf-m-vertical pf-m-inset-sm pf-v6-u-hidden-on-md"
2672
2590
  />
2673
2591
  <div class="pf-v6-l-flex__item">
2674
2592
  <span>64C</span>
@@ -2697,17 +2615,17 @@ wrapperTag: div
2697
2615
  </div>
2698
2616
  </div>
2699
2617
  </div>
2700
- <hr class="pf-v6-c-divider pf-v5-u-hidden-on-md" />
2618
+ <hr class="pf-v6-c-divider pf-v6-u-hidden-on-md" />
2701
2619
  <div class="pf-v6-l-grid pf-m-gutter">
2702
2620
  <div class="pf-v6-l-grid__item pf-m-4-col-on-md">
2703
2621
  <div
2704
- class="pf-v6-l-flex pf-m-column-on-md pf-m-space-items-none-on-md pf-m-justify-content-center-on-md pf-v5-u-h-100-on-md"
2622
+ class="pf-v6-l-flex pf-m-column-on-md pf-m-space-items-none-on-md pf-m-justify-content-center-on-md pf-v6-u-h-100-on-md"
2705
2623
  >
2706
2624
  <div class="pf-v6-l-flex__item">
2707
2625
  <b>Speed</b>
2708
2626
  </div>
2709
2627
  <hr
2710
- class="pf-v6-c-divider pf-m-vertical pf-m-inset-sm pf-v5-u-hidden-on-md"
2628
+ class="pf-v6-c-divider pf-m-vertical pf-m-inset-sm pf-v6-u-hidden-on-md"
2711
2629
  />
2712
2630
  <div class="pf-v6-l-flex__item">
2713
2631
  <span>2.3Ghz</span>
@@ -2753,7 +2671,7 @@ wrapperTag: div
2753
2671
  <br />
2754
2672
  <div
2755
2673
  class="pf-v6-l-gallery pf-m-gutter"
2756
- style="--pf-v5-l-gallery--GridTemplateColumns--min: 360px;"
2674
+ style="--pf-v6-l-gallery--GridTemplateColumns--min: 360px;"
2757
2675
  >
2758
2676
  <div class="pf-v6-c-card" id="trend-card-1-example">
2759
2677
  <div class="pf-v6-c-card__header">
@@ -2761,69 +2679,25 @@ wrapperTag: div
2761
2679
  <div class="pf-v6-c-card__title" id="trend-card-1-example-title">
2762
2680
  <h1 class="pf-v6-c-title pf-m-2xl">1,050,765 IOPS</h1>
2763
2681
  </div>
2764
- <span class="pf-v5-u-color-200">Workload</span>
2682
+ <span>Workload</span>
2765
2683
  </div>
2766
2684
  <div
2767
2685
  class="pf-v6-c-card__actions pf-m-no-offset"
2768
2686
  style="padding-block-start: 1px;"
2769
2687
  >
2770
- <div class="pf-v6-c-select">
2771
- <span
2772
- id="trend-card-1-example-select-dropdown-label"
2773
- hidden
2774
- >Choose one</span>
2775
-
2776
- <button
2777
- class="pf-v6-c-select__toggle pf-m-plain"
2778
- type="button"
2779
- id="trend-card-1-example-select-dropdown-toggle"
2780
- aria-haspopup="true"
2781
- aria-expanded="false"
2782
- aria-labelledby="trend-card-1-example-select-dropdown-label trend-card-1-example-select-dropdown-toggle"
2783
- >
2784
- <div class="pf-v6-c-select__toggle-wrapper">
2785
- <span class="pf-v6-c-select__toggle-text">Filter</span>
2786
- </div>
2787
- <span class="pf-v6-c-select__toggle-arrow">
2688
+ <button
2689
+ class="pf-v6-c-menu-toggle pf-m-plain pf-m-text"
2690
+ type="button"
2691
+ aria-expanded="false"
2692
+ id="trend-card-1-example-select-dropdown"
2693
+ >
2694
+ <span class="pf-v6-c-menu-toggle__text">Filter</span>
2695
+ <span class="pf-v6-c-menu-toggle__controls">
2696
+ <span class="pf-v6-c-menu-toggle__toggle-icon">
2788
2697
  <i class="fas fa-caret-down" aria-hidden="true"></i>
2789
2698
  </span>
2790
- </button>
2791
-
2792
- <ul
2793
- class="pf-v6-c-select__menu pf-m-align-right"
2794
- role="listbox"
2795
- aria-labelledby="trend-card-1-example-select-dropdown-label"
2796
- hidden
2797
- >
2798
- <li role="presentation">
2799
- <button class="pf-v6-c-select__menu-item" role="option">Running</button>
2800
- </li>
2801
- <li role="presentation">
2802
- <button
2803
- class="pf-v6-c-select__menu-item pf-m-selected"
2804
- role="option"
2805
- aria-selected="true"
2806
- >
2807
- Stopped
2808
- <span class="pf-v6-c-select__menu-item-icon">
2809
- <i class="fas fa-check" aria-hidden="true"></i>
2810
- </span>
2811
- </button>
2812
- </li>
2813
- <li role="presentation">
2814
- <button class="pf-v6-c-select__menu-item" role="option">Down</button>
2815
- </li>
2816
- <li role="presentation">
2817
- <button class="pf-v6-c-select__menu-item" role="option">Degraded</button>
2818
- </li>
2819
- <li role="presentation">
2820
- <button
2821
- class="pf-v6-c-select__menu-item"
2822
- role="option"
2823
- >Needs maintenance</button>
2824
- </li>
2825
- </ul>
2826
- </div>
2699
+ </span>
2700
+ </button>
2827
2701
  </div>
2828
2702
  </div>
2829
2703
  <div class="pf-v6-c-card__body">
@@ -2841,7 +2715,7 @@ wrapperTag: div
2841
2715
  ```html
2842
2716
  <div
2843
2717
  class="pf-v6-l-gallery pf-m-gutter"
2844
- style="--pf-v5-l-gallery--GridTemplateColumns--min: 360px;"
2718
+ style="--pf-v6-l-gallery--GridTemplateColumns--min: 360px;"
2845
2719
  >
2846
2720
  <div class="pf-v6-c-card" id="trend-card-2-example">
2847
2721
  <div class="pf-v6-c-card__header">
@@ -2852,7 +2726,7 @@ wrapperTag: div
2852
2726
  <div class="pf-v6-c-card__title" id="trend-card-2-example-title">
2853
2727
  <h1 class="pf-v6-c-title pf-m-2xl">842 TB</h1>
2854
2728
  </div>
2855
- <span class="pf-v5-u-color-200">Storage capacity</span>
2729
+ <span>Storage capacity</span>
2856
2730
  </div>
2857
2731
  </div>
2858
2732
  <div class="pf-v6-l-flex__item pf-m-flex-1">
@@ -2883,68 +2757,24 @@ wrapperTag: div
2883
2757
  <br />
2884
2758
  <div
2885
2759
  class="pf-v6-l-gallery pf-m-gutter"
2886
- style="--pf-v5-l-gallery--GridTemplateColumns--min: 360px;"
2760
+ style="--pf-v6-l-gallery--GridTemplateColumns--min: 360px;"
2887
2761
  >
2888
2762
  <div class="pf-v6-c-card" id="card-log-view-example">
2889
- <div class="pf-v6-c-card__header pf-v5-u-align-items-flex-start">
2763
+ <div class="pf-v6-c-card__header pf-v6-u-align-items-flex-start">
2890
2764
  <div class="pf-v6-c-card__actions pf-m-no-offset">
2891
- <div class="pf-v6-c-select">
2892
- <span
2893
- id="card-log-view-example-select-dropdown-label"
2894
- hidden
2895
- >Choose one</span>
2896
-
2897
- <button
2898
- class="pf-v6-c-select__toggle pf-m-plain"
2899
- type="button"
2900
- id="card-log-view-example-select-dropdown-toggle"
2901
- aria-haspopup="true"
2902
- aria-expanded="false"
2903
- aria-labelledby="card-log-view-example-select-dropdown-label card-log-view-example-select-dropdown-toggle"
2904
- >
2905
- <div class="pf-v6-c-select__toggle-wrapper">
2906
- <span class="pf-v6-c-select__toggle-text">Most recent</span>
2907
- </div>
2908
- <span class="pf-v6-c-select__toggle-arrow">
2765
+ <button
2766
+ class="pf-v6-c-menu-toggle pf-m-plain pf-m-text"
2767
+ type="button"
2768
+ aria-expanded="false"
2769
+ id="card-log-view-example-select-dropdown"
2770
+ >
2771
+ <span class="pf-v6-c-menu-toggle__text">Most recent</span>
2772
+ <span class="pf-v6-c-menu-toggle__controls">
2773
+ <span class="pf-v6-c-menu-toggle__toggle-icon">
2909
2774
  <i class="fas fa-caret-down" aria-hidden="true"></i>
2910
2775
  </span>
2911
- </button>
2912
-
2913
- <ul
2914
- class="pf-v6-c-select__menu pf-m-align-right"
2915
- role="listbox"
2916
- aria-labelledby="card-log-view-example-select-dropdown-label"
2917
- hidden
2918
- >
2919
- <li role="presentation">
2920
- <button class="pf-v6-c-select__menu-item" role="option">Running</button>
2921
- </li>
2922
- <li role="presentation">
2923
- <button
2924
- class="pf-v6-c-select__menu-item pf-m-selected"
2925
- role="option"
2926
- aria-selected="true"
2927
- >
2928
- Stopped
2929
- <span class="pf-v6-c-select__menu-item-icon">
2930
- <i class="fas fa-check" aria-hidden="true"></i>
2931
- </span>
2932
- </button>
2933
- </li>
2934
- <li role="presentation">
2935
- <button class="pf-v6-c-select__menu-item" role="option">Down</button>
2936
- </li>
2937
- <li role="presentation">
2938
- <button class="pf-v6-c-select__menu-item" role="option">Degraded</button>
2939
- </li>
2940
- <li role="presentation">
2941
- <button
2942
- class="pf-v6-c-select__menu-item"
2943
- role="option"
2944
- >Needs maintenance</button>
2945
- </li>
2946
- </ul>
2947
- </div>
2776
+ </span>
2777
+ </button>
2948
2778
  </div>
2949
2779
  <div class="pf-v6-c-card__header-main">
2950
2780
  <div
@@ -2967,9 +2797,12 @@ wrapperTag: div
2967
2797
  </dd>
2968
2798
  <dd class="pf-v6-c-description-list__description">
2969
2799
  <div class="pf-v6-c-description-list__text">
2970
- <time
2971
- class="pf-v5-u-color-200 pf-v5-u-font-size-sm"
2972
- >Jun 17, 11:02 am</time>
2800
+ <span class="pf-v6-c-timestamp">
2801
+ <time
2802
+ class="pf-v6-c-timestamp__text"
2803
+ datetime="2019-01-21T21:38"
2804
+ >Thursday, 21 January 2019, 9:38 PM EST</time>
2805
+ </span>
2973
2806
  </div>
2974
2807
  </dd>
2975
2808
  </div>
@@ -2982,9 +2815,12 @@ wrapperTag: div
2982
2815
  </dd>
2983
2816
  <dd class="pf-v6-c-description-list__description">
2984
2817
  <div class="pf-v6-c-description-list__text">
2985
- <time
2986
- class="pf-v5-u-color-200 pf-v5-u-font-size-sm"
2987
- >Jun 17, 11:13 am</time>
2818
+ <span class="pf-v6-c-timestamp">
2819
+ <time
2820
+ class="pf-v6-c-timestamp__text"
2821
+ datetime="2019-01-21T21:34"
2822
+ >Thursday, 21 January 2019, 9:34 PM EST</time>
2823
+ </span>
2988
2824
  </div>
2989
2825
  </dd>
2990
2826
  </div>
@@ -2997,9 +2833,12 @@ wrapperTag: div
2997
2833
  </dd>
2998
2834
  <dd class="pf-v6-c-description-list__description">
2999
2835
  <div class="pf-v6-c-description-list__text">
3000
- <time
3001
- class="pf-v5-u-color-200 pf-v5-u-font-size-sm"
3002
- >Jun 17, 10:59 am</time>
2836
+ <span class="pf-v6-c-timestamp">
2837
+ <time
2838
+ class="pf-v6-c-timestamp__text"
2839
+ datetime="2019-01-20T21:14"
2840
+ >Thursday, 21 January 2019, 8:14 PM EST</time>
2841
+ </span>
3003
2842
  </div>
3004
2843
  </dd>
3005
2844
  </div>
@@ -3012,9 +2851,12 @@ wrapperTag: div
3012
2851
  </dd>
3013
2852
  <dd class="pf-v6-c-description-list__description">
3014
2853
  <div class="pf-v6-c-description-list__text">
3015
- <time
3016
- class="pf-v5-u-color-200 pf-v5-u-font-size-sm"
3017
- >Jun 17, 10:45 am</time>
2854
+ <span class="pf-v6-c-timestamp">
2855
+ <time
2856
+ class="pf-v6-c-timestamp__text"
2857
+ datetime="2019-01-21T19:18"
2858
+ >Thursday, 21 January 2019, 7:18 PM EST</time>
2859
+ </span>
3018
2860
  </div>
3019
2861
  </dd>
3020
2862
  </div>
@@ -3038,68 +2880,24 @@ wrapperTag: div
3038
2880
  <br />
3039
2881
  <div
3040
2882
  class="pf-v6-l-gallery pf-m-gutter"
3041
- style="--pf-v5-l-gallery--GridTemplateColumns--min: 360px;"
2883
+ style="--pf-v6-l-gallery--GridTemplateColumns--min: 360px;"
3042
2884
  >
3043
2885
  <div class="pf-v6-c-card" id="card-events-view-example">
3044
- <div class="pf-v6-c-card__header pf-v5-u-align-items-flex-start">
2886
+ <div class="pf-v6-c-card__header pf-v6-u-align-items-flex-start">
3045
2887
  <div class="pf-v6-c-card__actions pf-m-no-offset">
3046
- <div class="pf-v6-c-select">
3047
- <span
3048
- id="card-events-view-example-select-dropdown-label"
3049
- hidden
3050
- >Choose one</span>
3051
-
3052
- <button
3053
- class="pf-v6-c-select__toggle pf-m-plain"
3054
- type="button"
3055
- id="card-events-view-example-select-dropdown-toggle"
3056
- aria-haspopup="true"
3057
- aria-expanded="false"
3058
- aria-labelledby="card-events-view-example-select-dropdown-label card-events-view-example-select-dropdown-toggle"
3059
- >
3060
- <div class="pf-v6-c-select__toggle-wrapper">
3061
- <span class="pf-v6-c-select__toggle-text">Status</span>
3062
- </div>
3063
- <span class="pf-v6-c-select__toggle-arrow">
2888
+ <button
2889
+ class="pf-v6-c-menu-toggle pf-m-plain pf-m-text"
2890
+ type="button"
2891
+ aria-expanded="false"
2892
+ id="card-events-view-example-select-dropdown"
2893
+ >
2894
+ <span class="pf-v6-c-menu-toggle__text">Status</span>
2895
+ <span class="pf-v6-c-menu-toggle__controls">
2896
+ <span class="pf-v6-c-menu-toggle__toggle-icon">
3064
2897
  <i class="fas fa-caret-down" aria-hidden="true"></i>
3065
2898
  </span>
3066
- </button>
3067
-
3068
- <ul
3069
- class="pf-v6-c-select__menu pf-m-align-right"
3070
- role="listbox"
3071
- aria-labelledby="card-events-view-example-select-dropdown-label"
3072
- hidden
3073
- >
3074
- <li role="presentation">
3075
- <button class="pf-v6-c-select__menu-item" role="option">Running</button>
3076
- </li>
3077
- <li role="presentation">
3078
- <button
3079
- class="pf-v6-c-select__menu-item pf-m-selected"
3080
- role="option"
3081
- aria-selected="true"
3082
- >
3083
- Stopped
3084
- <span class="pf-v6-c-select__menu-item-icon">
3085
- <i class="fas fa-check" aria-hidden="true"></i>
3086
- </span>
3087
- </button>
3088
- </li>
3089
- <li role="presentation">
3090
- <button class="pf-v6-c-select__menu-item" role="option">Down</button>
3091
- </li>
3092
- <li role="presentation">
3093
- <button class="pf-v6-c-select__menu-item" role="option">Degraded</button>
3094
- </li>
3095
- <li role="presentation">
3096
- <button
3097
- class="pf-v6-c-select__menu-item"
3098
- role="option"
3099
- >Needs maintenance</button>
3100
- </li>
3101
- </ul>
3102
- </div>
2899
+ </span>
2900
+ </button>
3103
2901
  </div>
3104
2902
  <div class="pf-v6-c-card__header-main">
3105
2903
  <div
@@ -3117,10 +2915,11 @@ wrapperTag: div
3117
2915
  <dt class="pf-v6-c-description-list__term">
3118
2916
  <div class="pf-v6-l-flex pf-m-nowrap pf-m-space-items-sm">
3119
2917
  <div class="pf-v6-l-flex__item">
3120
- <i
3121
- class="fas fa-exclamation-circle pf-v5-u-danger-color-100"
3122
- aria-hidden="true"
3123
- ></i>
2918
+ <span class="pf-v6-c-icon">
2919
+ <span class="pf-v6-c-icon__content pf-m-danger">
2920
+ <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
2921
+ </span>
2922
+ </span>
3124
2923
  </div>
3125
2924
  <div class="pf-v6-l-flex__item">Readiness probe failed</div>
3126
2925
  </div>
@@ -3132,9 +2931,12 @@ wrapperTag: div
3132
2931
  </dd>
3133
2932
  <dd class="pf-v6-c-description-list__description">
3134
2933
  <div class="pf-v6-c-description-list__text">
3135
- <time
3136
- class="pf-v5-u-color-200 pf-v5-u-font-size-sm"
3137
- >Jun 17, 11:02 am</time>
2934
+ <span class="pf-v6-c-timestamp">
2935
+ <time
2936
+ class="pf-v6-c-timestamp__text"
2937
+ datetime="2019-01-21T21:38"
2938
+ >Thursday, 21 January 2019, 9:38 PM EST</time>
2939
+ </span>
3138
2940
  </div>
3139
2941
  </dd>
3140
2942
  </div>
@@ -3142,10 +2944,11 @@ wrapperTag: div
3142
2944
  <dt class="pf-v6-c-description-list__term">
3143
2945
  <div class="pf-v6-l-flex pf-m-nowrap pf-m-space-items-sm">
3144
2946
  <div class="pf-v6-l-flex__item">
3145
- <i
3146
- class="fas fa-check-circle pf-v5-u-success-color-100"
3147
- aria-hidden="true"
3148
- ></i>
2947
+ <span class="pf-v6-c-icon">
2948
+ <span class="pf-v6-c-icon__content pf-m-success">
2949
+ <i class="fas fa-check-circle" aria-hidden="true"></i>
2950
+ </span>
2951
+ </span>
3149
2952
  </div>
3150
2953
  <div class="pf-v6-l-flex__item">Successful assignment</div>
3151
2954
  </div>
@@ -3157,9 +2960,12 @@ wrapperTag: div
3157
2960
  </dd>
3158
2961
  <dd class="pf-v6-c-description-list__description">
3159
2962
  <div class="pf-v6-c-description-list__text">
3160
- <time
3161
- class="pf-v5-u-color-200 pf-v5-u-font-size-sm"
3162
- >Jun 17, 11:13 am</time>
2963
+ <span class="pf-v6-c-timestamp">
2964
+ <time
2965
+ class="pf-v6-c-timestamp__text"
2966
+ datetime="2019-01-21T21:34"
2967
+ >Thursday, 21 January 2019, 9:34 PM EST</time>
2968
+ </span>
3163
2969
  </div>
3164
2970
  </dd>
3165
2971
  </div>
@@ -3192,9 +2998,12 @@ wrapperTag: div
3192
2998
  </dd>
3193
2999
  <dd class="pf-v6-c-description-list__description">
3194
3000
  <div class="pf-v6-c-description-list__text">
3195
- <time
3196
- class="pf-v5-u-color-200 pf-v5-u-font-size-sm"
3197
- >Jun 17, 10:59 am</time>
3001
+ <span class="pf-v6-c-timestamp">
3002
+ <time
3003
+ class="pf-v6-c-timestamp__text"
3004
+ datetime="2019-01-21T20:14"
3005
+ >Thursday, 21 January 2019, 8:14 PM EST</time>
3006
+ </span>
3198
3007
  </div>
3199
3008
  </dd>
3200
3009
  </div>
@@ -3202,10 +3011,11 @@ wrapperTag: div
3202
3011
  <dt class="pf-v6-c-description-list__term">
3203
3012
  <div class="pf-v6-l-flex pf-m-nowrap pf-m-space-items-sm">
3204
3013
  <div class="pf-v6-l-flex__item">
3205
- <i
3206
- class="fas fa-check-circle pf-v5-u-success-color-100"
3207
- aria-hidden="true"
3208
- ></i>
3014
+ <span class="pf-v6-c-icon">
3015
+ <span class="pf-v6-c-icon__content pf-m-success">
3016
+ <i class="fas fa-check-circle" aria-hidden="true"></i>
3017
+ </span>
3018
+ </span>
3209
3019
  </div>
3210
3020
  <div class="pf-v6-l-flex__item">Created container</div>
3211
3021
  </div>
@@ -3217,9 +3027,12 @@ wrapperTag: div
3217
3027
  </dd>
3218
3028
  <dd class="pf-v6-c-description-list__description">
3219
3029
  <div class="pf-v6-c-description-list__text">
3220
- <time
3221
- class="pf-v5-u-color-200 pf-v5-u-font-size-sm"
3222
- >Jun 17, 10:45 am</time>
3030
+ <span class="pf-v6-c-timestamp">
3031
+ <time
3032
+ class="pf-v6-c-timestamp__text"
3033
+ datetime="2019-01-21T19:18"
3034
+ >Thursday, 21 January 2019, 7:18 PM EST</time>
3035
+ </span>
3223
3036
  </div>
3224
3037
  </dd>
3225
3038
  </div>