@patternfly/patternfly 6.5.0-prerelease.8 → 6.5.0-prerelease.81

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 (410) hide show
  1. package/README.md +2 -2
  2. package/assets/fontawesome/_variables.scss +2 -1
  3. package/assets/images/Felt-Bkg-Generic-Dark.svg +82 -0
  4. package/assets/images/Felt-Bkg-Generic-Light.svg +82 -0
  5. package/assets/images/PF-Bkg-Generic-Dark.svg +76 -0
  6. package/assets/images/PF-Bkg-Generic-Light.svg +74 -0
  7. package/assets/images/RHAiExperienceIcon.svg +27 -0
  8. package/assets/images/RHAutomationsLogo.svg +96 -0
  9. package/assets/images/RHServerStackIcon.svg +16 -0
  10. package/assets/images/compass--hero-bg.png +0 -0
  11. package/assets/images/compass--rh-wallpaper-dark.png +0 -0
  12. package/assets/images/compass--rh-wallpaper-light.png +0 -0
  13. package/assets/images/compass--wallpaper-dark.jpg +0 -0
  14. package/assets/images/compass--wallpaper-dark.png +0 -0
  15. package/assets/images/compass--wallpaper-light.jpg +0 -0
  16. package/assets/images/compass--wallpaper-light.png +0 -0
  17. package/assets/images/glass-brand-dark.jpg +0 -0
  18. package/assets/images/glass-brand-dark.png +0 -0
  19. package/assets/images/glass-brand-light.jpg +0 -0
  20. package/assets/images/glass-brand-light.png +0 -0
  21. package/base/normalize.scss +7 -0
  22. package/base/patternfly-common.css +50 -0
  23. package/base/patternfly-common.scss +59 -0
  24. package/base/patternfly-svg-icons.css +17 -0
  25. package/base/patternfly-svg-icons.scss +20 -0
  26. package/base/patternfly-variables.css +926 -513
  27. package/base/patternfly-variables.scss +46 -4
  28. package/base/tokens/tokens-dark.scss +56 -8
  29. package/base/tokens/tokens-default.scss +69 -14
  30. package/base/tokens/tokens-glass-dark.scss +26 -0
  31. package/base/tokens/tokens-glass.scss +22 -0
  32. package/base/tokens/tokens-local.scss +17 -0
  33. package/base/tokens/tokens-palette.scss +3 -1
  34. package/base/tokens/tokens-redhat-dark.scss +21 -0
  35. package/base/tokens/tokens-redhat-glass-dark.scss +40 -0
  36. package/base/tokens/tokens-redhat-glass.scss +30 -0
  37. package/base/tokens/tokens-redhat-highcontrast-dark.scss +50 -0
  38. package/base/tokens/tokens-redhat-highcontrast.scss +128 -0
  39. package/base/tokens/tokens-redhat.scss +15 -0
  40. package/components/AboutModalBox/about-modal-box.css +36 -26
  41. package/components/Accordion/accordion.css +26 -14
  42. package/components/Accordion/accordion.scss +12 -2
  43. package/components/ActionList/action-list.css +2 -0
  44. package/components/ActionList/action-list.scss +2 -0
  45. package/components/Alert/alert.css +7 -5
  46. package/components/Alert/alert.scss +2 -1
  47. package/components/Avatar/avatar.css +12 -4
  48. package/components/BackgroundImage/background-image.css +6 -3
  49. package/components/Banner/banner.css +12 -6
  50. package/components/Banner/banner.scss +7 -0
  51. package/components/Brand/brand.css +3 -1
  52. package/components/Breadcrumb/breadcrumb.css +10 -5
  53. package/components/Breadcrumb/breadcrumb.scss +6 -2
  54. package/components/Button/button.css +173 -71
  55. package/components/Button/button.scss +188 -72
  56. package/components/CalendarMonth/calendar-month.css +4 -3
  57. package/components/Card/card.css +51 -15
  58. package/components/Card/card.scss +65 -9
  59. package/components/ClipboardCopy/clipboard-copy.css +14 -7
  60. package/components/ClipboardCopy/clipboard-copy.scss +13 -4
  61. package/components/CodeEditor/code-editor.css +2 -2
  62. package/components/CodeEditor/code-editor.scss +2 -2
  63. package/components/Compass/compass.css +399 -0
  64. package/components/Compass/compass.scss +413 -0
  65. package/components/DataList/data-list.css +30 -23
  66. package/components/DataList/data-list.scss +3 -2
  67. package/components/DescriptionList/description-list-order.scss +5 -1
  68. package/components/DescriptionList/description-list.css +7 -5
  69. package/components/DescriptionList/description-list.scss +5 -1
  70. package/components/Divider/divider.css +7 -5
  71. package/components/Drawer/drawer.css +224 -75
  72. package/components/Drawer/drawer.scss +194 -27
  73. package/components/DualListSelector/dual-list-selector.css +18 -12
  74. package/components/DualListSelector/dual-list-selector.scss +1 -1
  75. package/components/ExpandableSection/expandable-section.css +21 -16
  76. package/components/ExpandableSection/expandable-section.scss +6 -3
  77. package/components/Form/form.css +2 -2
  78. package/components/Form/form.scss +2 -2
  79. package/components/FormControl/form-control.css +3 -3
  80. package/components/FormControl/form-control.scss +3 -3
  81. package/components/Hero/hero.css +74 -0
  82. package/components/Hero/hero.scss +86 -0
  83. package/components/JumpLinks/jump-links.css +16 -5
  84. package/components/JumpLinks/jump-links.scss +17 -3
  85. package/components/Label/label-group.css +2 -2
  86. package/components/Label/label-group.scss +2 -2
  87. package/components/Label/label.css +4 -3
  88. package/components/Login/login.css +58 -40
  89. package/components/Login/login.scss +7 -3
  90. package/components/Masthead/masthead.css +111 -16
  91. package/components/Masthead/masthead.scss +111 -1
  92. package/components/Menu/menu.css +49 -33
  93. package/components/Menu/menu.scss +26 -19
  94. package/components/MenuToggle/menu-toggle.css +35 -8
  95. package/components/MenuToggle/menu-toggle.scss +42 -8
  96. package/components/ModalBox/modal-box.css +9 -7
  97. package/components/ModalBox/modal-box.scss +2 -2
  98. package/components/Nav/nav.css +82 -11
  99. package/components/Nav/nav.scss +85 -5
  100. package/components/NotificationDrawer/notification-drawer.css +19 -9
  101. package/components/NotificationDrawer/notification-drawer.scss +14 -5
  102. package/components/OverflowMenu/overflow-menu.css +16 -0
  103. package/components/OverflowMenu/overflow-menu.scss +20 -1
  104. package/components/Page/page.css +421 -32
  105. package/components/Page/page.scss +397 -15
  106. package/components/Pagination/pagination.css +56 -4
  107. package/components/Pagination/pagination.scss +71 -6
  108. package/components/Panel/panel.css +41 -3
  109. package/components/Panel/panel.scss +56 -3
  110. package/components/Progress/progress.css +3 -1
  111. package/components/Progress/progress.scss +3 -1
  112. package/components/ProgressStepper/progress-stepper.scss +5 -1
  113. package/components/Sidebar/sidebar.css +1 -1
  114. package/components/Sidebar/sidebar.scss +7 -3
  115. package/components/Skeleton/skeleton.css +16 -15
  116. package/components/Slider/slider.css +32 -18
  117. package/components/Switch/switch.css +4 -2
  118. package/components/Switch/switch.scss +1 -1
  119. package/components/Table/table-grid.css +28 -36
  120. package/components/Table/table-grid.scss +4 -4
  121. package/components/Table/table-scrollable.css +1 -1
  122. package/components/Table/table-scrollable.scss +1 -1
  123. package/components/Table/table-tree-view.css +4 -2
  124. package/components/Table/table.css +104 -57
  125. package/components/Table/table.scss +92 -37
  126. package/components/Tabs/tabs.css +39 -33
  127. package/components/Tabs/tabs.scss +38 -26
  128. package/components/TextInputGroup/text-input-group.css +2 -2
  129. package/components/TextInputGroup/text-input-group.scss +2 -2
  130. package/components/ToggleGroup/toggle-group.css +44 -19
  131. package/components/ToggleGroup/toggle-group.scss +51 -22
  132. package/components/Toolbar/toolbar.css +195 -16
  133. package/components/Toolbar/toolbar.scss +89 -9
  134. package/components/TreeView/tree-view.css +45 -14
  135. package/components/TreeView/tree-view.scss +32 -1
  136. package/components/Wizard/wizard.css +41 -19
  137. package/components/Wizard/wizard.scss +26 -6
  138. package/components/_index.css +2740 -829
  139. package/components/_index.scss +3 -1
  140. package/docs/components/AboutModalBox/examples/AboutModalBox.md +13 -1
  141. package/docs/components/Accordion/examples/Accordion.md +392 -30
  142. package/docs/components/ActionList/examples/ActionList.md +143 -11
  143. package/docs/components/Alert/examples/Alert.md +678 -54
  144. package/docs/components/Avatar/examples/Avatar.md +4 -4
  145. package/docs/components/BackToTop/examples/BackToTop.md +13 -1
  146. package/docs/components/Banner/examples/Banner.md +196 -5
  147. package/docs/components/Brand/examples/Brand.md +2 -2
  148. package/docs/components/Breadcrumb/examples/Breadcrumb.md +313 -26
  149. package/docs/components/Button/examples/Button.md +2829 -333
  150. package/docs/components/CalendarMonth/examples/CalendarMonth.md +156 -12
  151. package/docs/components/Card/examples/Card.md +335 -12
  152. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +293 -28
  153. package/docs/components/CodeBlock/examples/CodeBlock.md +104 -8
  154. package/docs/components/CodeEditor/examples/CodeEditor.md +234 -18
  155. package/docs/components/Compass/examples/Compass.css +8 -0
  156. package/docs/components/Compass/examples/Compass.md +109 -0
  157. package/docs/components/DataList/examples/DataList.md +468 -78
  158. package/docs/components/DatePicker/examples/DatePicker.md +78 -6
  159. package/docs/components/DescriptionList/examples/DescriptionList.md +327 -27
  160. package/docs/components/Divider/examples/Divider.md +2 -2
  161. package/docs/components/DragDrop/examples/DragDrop.css +1 -1
  162. package/docs/components/Drawer/examples/Drawer.md +415 -35
  163. package/docs/components/DualListSelector/examples/DualListSelector.md +1247 -161
  164. package/docs/components/EmptyState/examples/EmptyState.md +78 -6
  165. package/docs/components/ExpandableSection/examples/ExpandableSection.md +91 -7
  166. package/docs/components/Form/examples/Form.md +78 -6
  167. package/docs/components/Hero/examples/Hero.md +25 -0
  168. package/docs/components/Hint/examples/Hint.md +39 -3
  169. package/docs/components/Icon/examples/Icon.md +105 -9
  170. package/docs/components/InlineEdit/examples/InlineEdit.md +338 -26
  171. package/docs/components/InputGroup/examples/InputGroup.md +40 -4
  172. package/docs/components/JumpLinks/examples/JumpLinks.md +54 -6
  173. package/docs/components/Label/examples/Label.md +2834 -218
  174. package/docs/components/Login/examples/Login.md +39 -3
  175. package/docs/components/Masthead/examples/masthead.md +80 -1
  176. package/docs/components/Menu/examples/Menu.md +1679 -133
  177. package/docs/components/MenuToggle/examples/MenuToggle.md +1514 -118
  178. package/docs/components/ModalBox/examples/ModalBox.md +289 -25
  179. package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +156 -12
  180. package/docs/components/Nav/examples/Navigation.md +898 -62
  181. package/docs/components/NotificationDrawer/examples/NotificationDrawer.md +1079 -83
  182. package/docs/components/OverflowMenu/examples/overflow-menu.css +6 -3
  183. package/docs/components/OverflowMenu/examples/overflow-menu.md +164 -11
  184. package/docs/components/Page/examples/Page.md +211 -25
  185. package/docs/components/Pagination/examples/Pagination.md +1291 -80
  186. package/docs/components/Panel/examples/Panel.css +3 -0
  187. package/docs/components/Panel/examples/Panel.md +71 -4
  188. package/docs/components/Popover/examples/Popover.md +286 -22
  189. package/docs/components/Progress/examples/Progress.md +91 -7
  190. package/docs/components/ProgressStepper/examples/ProgressStepper.md +275 -23
  191. package/docs/components/Sidebar/examples/Sidebar.md +1 -1
  192. package/docs/components/Slider/examples/Slider.md +52 -4
  193. package/docs/components/Table/examples/Table.css +2 -1
  194. package/docs/components/Table/examples/Table.md +7543 -653
  195. package/docs/components/Tabs/examples/Tabs.md +5734 -471
  196. package/docs/components/TextInputGroup/examples/TextInputGroup.md +600 -48
  197. package/docs/components/ToggleGroup/examples/toggle-group.md +261 -15
  198. package/docs/components/Toolbar/examples/Toolbar.css +1 -1
  199. package/docs/components/Toolbar/examples/Toolbar.md +1145 -88
  200. package/docs/components/TreeView/examples/TreeView.md +1390 -130
  201. package/docs/components/Wizard/examples/Wizard.md +828 -73
  202. package/docs/demos/AboutModal/examples/AboutModal.md +158 -53
  203. package/docs/demos/Alert/examples/Alert.md +539 -164
  204. package/docs/demos/BackToTop/examples/BackToTop.md +158 -53
  205. package/docs/demos/Banner/examples/Banner.md +290 -104
  206. package/docs/demos/Button/examples/Button.md +13 -1
  207. package/docs/demos/Card/examples/Card.md +1041 -134
  208. package/docs/demos/CardView/examples/CardView.md +570 -171
  209. package/docs/demos/Compass/examples/Compass.md +10005 -0
  210. package/docs/demos/Dashboard/examples/Dashboard.md +745 -177
  211. package/docs/demos/DataList/examples/DataList.md +1301 -292
  212. package/docs/demos/DescriptionList/examples/DescriptionList.md +472 -160
  213. package/docs/demos/Drawer/examples/Drawer.md +718 -262
  214. package/docs/demos/Form/examples/BasicForms.md +273 -21
  215. package/docs/demos/JumpLinks/examples/JumpLinks.md +862 -319
  216. package/docs/demos/Masthead/examples/Masthead.md +1119 -489
  217. package/docs/demos/Modal/examples/Modal.md +948 -321
  218. package/docs/demos/Nav/examples/Nav.md +3449 -499
  219. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +2418 -405
  220. package/docs/demos/Page/examples/Page.md +2137 -773
  221. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +13 -1
  222. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +52 -4
  223. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +1913 -504
  224. package/docs/demos/Skeleton/examples/Skeleton.md +145 -52
  225. package/docs/demos/Table/examples/Table.md +11807 -2275
  226. package/docs/demos/Tabs/examples/Tabs.md +1117 -337
  227. package/docs/demos/Toolbar/examples/Toolbar.md +1818 -286
  228. package/docs/demos/Wizard/examples/Wizard.md +1705 -526
  229. package/docs/layouts/Bullseye/examples/Bullseye.css +2 -2
  230. package/docs/layouts/Bullseye/examples/Bullseye.md +2 -1
  231. package/docs/layouts/Flex/examples/Flex.css +3 -3
  232. package/docs/layouts/Flex/examples/Flex.md +3 -2
  233. package/docs/layouts/Gallery/examples/Gallery.css +2 -2
  234. package/docs/layouts/Gallery/examples/Gallery.md +4 -3
  235. package/docs/layouts/Grid/examples/Grid.css +1 -1
  236. package/docs/layouts/Grid/examples/Grid.md +6 -5
  237. package/docs/layouts/Level/examples/Level.css +3 -3
  238. package/docs/layouts/Level/examples/Level.md +2 -1
  239. package/docs/layouts/Split/examples/Split.css +1 -1
  240. package/docs/layouts/Split/examples/Split.md +2 -1
  241. package/docs/layouts/Stack/examples/Stack.css +3 -3
  242. package/docs/layouts/Stack/examples/Stack.md +2 -1
  243. package/docs/utilities/Accessibility/examples/Accessibility.md +3 -2
  244. package/docs/utilities/Alignment/examples/Alignment.css +4 -4
  245. package/docs/utilities/Alignment/examples/Alignment.md +3 -2
  246. package/docs/utilities/BackgroundColor/examples/BackgroundColor.md +5 -4
  247. package/docs/utilities/BoxShadow/examples/box-shadow.css +2 -2
  248. package/docs/utilities/BoxShadow/examples/box-shadow.md +2 -1
  249. package/docs/utilities/Display/examples/Display.css +1 -1
  250. package/docs/utilities/Display/examples/Display.md +3 -2
  251. package/docs/utilities/Flex/examples/Flex.css +7 -7
  252. package/docs/utilities/Flex/examples/Flex.md +3 -2
  253. package/docs/utilities/Float/examples/Float.css +2 -2
  254. package/docs/utilities/Float/examples/Float.md +3 -2
  255. package/docs/utilities/Sizing/examples/Sizing.md +8 -7
  256. package/docs/utilities/Spacing/examples/Spacing.css +2 -2
  257. package/docs/utilities/Spacing/examples/Spacing.md +3 -2
  258. package/docs/utilities/Text/examples/Text.md +5 -4
  259. package/icons/PfIcons/add-circle-o.svg +4 -0
  260. package/icons/PfIcons/ansible-tower.svg +4 -0
  261. package/icons/PfIcons/applications.svg +4 -0
  262. package/icons/PfIcons/arrow.svg +4 -0
  263. package/icons/PfIcons/asleep.svg +4 -0
  264. package/icons/PfIcons/attention-bell.svg +4 -0
  265. package/icons/PfIcons/automation.svg +4 -0
  266. package/icons/PfIcons/bell.svg +4 -0
  267. package/icons/PfIcons/blueprint.svg +4 -0
  268. package/icons/PfIcons/build.svg +4 -0
  269. package/icons/PfIcons/builder-image.svg +4 -0
  270. package/icons/PfIcons/bundle.svg +4 -0
  271. package/icons/PfIcons/catalog.svg +4 -0
  272. package/icons/PfIcons/chat.svg +4 -0
  273. package/icons/PfIcons/close.svg +4 -0
  274. package/icons/PfIcons/cloud-security.svg +4 -0
  275. package/icons/PfIcons/cloud-tenant.svg +4 -0
  276. package/icons/PfIcons/cluster.svg +4 -0
  277. package/icons/PfIcons/connected.svg +4 -0
  278. package/icons/PfIcons/container-node.svg +4 -0
  279. package/icons/PfIcons/cpu.svg +4 -0
  280. package/icons/PfIcons/critical-risk.svg +4 -0
  281. package/icons/PfIcons/data-processor.svg +4 -0
  282. package/icons/PfIcons/data-sink.svg +4 -0
  283. package/icons/PfIcons/data-source.svg +4 -0
  284. package/icons/PfIcons/degraded.svg +4 -0
  285. package/icons/PfIcons/disconnected.svg +4 -0
  286. package/icons/PfIcons/domain.svg +4 -0
  287. package/icons/PfIcons/edit.svg +4 -0
  288. package/icons/PfIcons/enhancement.svg +4 -0
  289. package/icons/PfIcons/enterprise.svg +4 -0
  290. package/icons/PfIcons/equalizer.svg +4 -0
  291. package/icons/PfIcons/error-circle-o.svg +4 -0
  292. package/icons/PfIcons/export.svg +4 -0
  293. package/icons/PfIcons/filter.svg +4 -0
  294. package/icons/PfIcons/flavor.svg +4 -0
  295. package/icons/PfIcons/folder-close.svg +4 -0
  296. package/icons/PfIcons/folder-open.svg +4 -0
  297. package/icons/PfIcons/globe-route.svg +4 -0
  298. package/icons/PfIcons/help.svg +4 -0
  299. package/icons/PfIcons/history.svg +4 -0
  300. package/icons/PfIcons/home.svg +4 -0
  301. package/icons/PfIcons/import.svg +4 -0
  302. package/icons/PfIcons/in-progress.svg +4 -0
  303. package/icons/PfIcons/info.svg +4 -0
  304. package/icons/PfIcons/infrastructure.svg +4 -0
  305. package/icons/PfIcons/integration.svg +4 -0
  306. package/icons/PfIcons/key.svg +4 -0
  307. package/icons/PfIcons/locked.svg +4 -0
  308. package/icons/PfIcons/maintenance.svg +4 -0
  309. package/icons/PfIcons/memory.svg +4 -0
  310. package/icons/PfIcons/messages.svg +4 -0
  311. package/icons/PfIcons/middleware.svg +4 -0
  312. package/icons/PfIcons/migration.svg +4 -0
  313. package/icons/PfIcons/module.svg +4 -0
  314. package/icons/PfIcons/monitoring.svg +4 -0
  315. package/icons/PfIcons/multicluster.svg +4 -0
  316. package/icons/PfIcons/namespaces.svg +4 -0
  317. package/icons/PfIcons/network.svg +4 -0
  318. package/icons/PfIcons/new-process.svg +4 -0
  319. package/icons/PfIcons/not-started.svg +4 -0
  320. package/icons/PfIcons/off.svg +4 -0
  321. package/icons/PfIcons/ok.svg +4 -0
  322. package/icons/PfIcons/on-running.svg +4 -0
  323. package/icons/PfIcons/on.svg +4 -0
  324. package/icons/PfIcons/open-drawer-right.svg +4 -0
  325. package/icons/PfIcons/openshift.svg +4 -0
  326. package/icons/PfIcons/openstack.svg +4 -0
  327. package/icons/PfIcons/optimize.svg +4 -0
  328. package/icons/PfIcons/orders.svg +4 -0
  329. package/icons/PfIcons/os-image.svg +4 -0
  330. package/icons/PfIcons/package.svg +4 -0
  331. package/icons/PfIcons/panel-close.svg +4 -0
  332. package/icons/PfIcons/panel-open.svg +4 -0
  333. package/icons/PfIcons/paused.svg +4 -0
  334. package/icons/PfIcons/pending.svg +4 -0
  335. package/icons/PfIcons/pficon-dragdrop.svg +4 -0
  336. package/icons/PfIcons/pficon-history.svg +4 -0
  337. package/icons/PfIcons/pficon-network-range.svg +4 -0
  338. package/icons/PfIcons/pficon-satellite.svg +4 -0
  339. package/icons/PfIcons/pficon-sort-common-asc.svg +4 -0
  340. package/icons/PfIcons/pficon-sort-common-desc.svg +4 -0
  341. package/icons/PfIcons/pficon-template.svg +4 -0
  342. package/icons/PfIcons/pficon-vcenter.svg +4 -0
  343. package/icons/PfIcons/plugged.svg +4 -0
  344. package/icons/PfIcons/port.svg +4 -0
  345. package/icons/PfIcons/print.svg +4 -0
  346. package/icons/PfIcons/private.svg +4 -0
  347. package/icons/PfIcons/process-automation.svg +4 -0
  348. package/icons/PfIcons/project.svg +4 -0
  349. package/icons/PfIcons/rebalance.svg +4 -0
  350. package/icons/PfIcons/rebooting.svg +4 -0
  351. package/icons/PfIcons/regions.svg +4 -0
  352. package/icons/PfIcons/registry.svg +4 -0
  353. package/icons/PfIcons/remove2.svg +4 -0
  354. package/icons/PfIcons/replicator.svg +4 -0
  355. package/icons/PfIcons/repository.svg +4 -0
  356. package/icons/PfIcons/resource-pool.svg +4 -0
  357. package/icons/PfIcons/resources-almost-empty.svg +4 -0
  358. package/icons/PfIcons/resources-almost-full.svg +4 -0
  359. package/icons/PfIcons/resources-empty.svg +4 -0
  360. package/icons/PfIcons/resources-full.svg +4 -0
  361. package/icons/PfIcons/running.svg +4 -0
  362. package/icons/PfIcons/save.svg +4 -0
  363. package/icons/PfIcons/screen.svg +4 -0
  364. package/icons/PfIcons/security.svg +4 -0
  365. package/icons/PfIcons/server-group.svg +4 -0
  366. package/icons/PfIcons/server.svg +4 -0
  367. package/icons/PfIcons/service-catalog.svg +4 -0
  368. package/icons/PfIcons/service.svg +4 -0
  369. package/icons/PfIcons/services.svg +4 -0
  370. package/icons/PfIcons/severity-critical.svg +4 -0
  371. package/icons/PfIcons/severity-important.svg +4 -0
  372. package/icons/PfIcons/severity-minor.svg +4 -0
  373. package/icons/PfIcons/severity-moderate.svg +4 -0
  374. package/icons/PfIcons/severity-none.svg +4 -0
  375. package/icons/PfIcons/severity-undefined.svg +4 -0
  376. package/icons/PfIcons/spinner.svg +4 -0
  377. package/icons/PfIcons/spinner2.svg +4 -0
  378. package/icons/PfIcons/storage-domain.svg +4 -0
  379. package/icons/PfIcons/task.svg +4 -0
  380. package/icons/PfIcons/tenant.svg +4 -0
  381. package/icons/PfIcons/thumb-tack.svg +4 -0
  382. package/icons/PfIcons/topology.svg +4 -0
  383. package/icons/PfIcons/treeview.svg +4 -0
  384. package/icons/PfIcons/trend-down.svg +4 -0
  385. package/icons/PfIcons/trend-up.svg +4 -0
  386. package/icons/PfIcons/unknown.svg +4 -0
  387. package/icons/PfIcons/unlocked.svg +4 -0
  388. package/icons/PfIcons/unplugged.svg +4 -0
  389. package/icons/PfIcons/user.svg +4 -0
  390. package/icons/PfIcons/users.svg +4 -0
  391. package/icons/PfIcons/virtual-machine.svg +4 -0
  392. package/icons/PfIcons/volume.svg +4 -0
  393. package/icons/PfIcons/warning-triangle.svg +4 -0
  394. package/icons/PfIcons/zone.svg +4 -0
  395. package/layouts/Flex/flex.scss +83 -19
  396. package/layouts/Gallery/gallery.css +6 -2
  397. package/layouts/_index.css +6 -2
  398. package/package.json +55 -17
  399. package/patternfly-base-no-globals.css +969 -489
  400. package/patternfly-base.css +976 -489
  401. package/patternfly-charts.css +3 -3
  402. package/patternfly-no-globals.css +3623 -1194
  403. package/patternfly.css +3630 -1194
  404. package/patternfly.min.css +1 -1
  405. package/patternfly.min.css.map +1 -1
  406. package/patternfly.scss +48 -0
  407. package/sass-utilities/functions.scss +32 -25
  408. package/sass-utilities/mixins.scss +54 -23
  409. package/sass-utilities/namespaces-components.scss +6 -0
  410. package/sass-utilities/scss-variables.scss +3 -0
package/docs/demos/Card/examples/Card.md CHANGED
@@ -21,7 +21,19 @@ wrapperTag: div
21
21
  >
22
22
  <span class="pf-v6-c-button__icon pf-m-start">
23
23
  <span class="pf-v6-c-card__header-toggle-icon">
24
- <i class="fas fa-angle-right" aria-hidden="true"></i>
24
+ <svg
25
+ class="pf-v6-svg"
26
+ viewBox="0 0 20 20"
27
+ fill="currentColor"
28
+ aria-hidden="true"
29
+ role="img"
30
+ width="1em"
31
+ height="1em"
32
+ >
33
+ <path
34
+ d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
35
+ />
36
+ </svg>
25
37
  </span>
26
38
  </span>
27
39
  </button>
@@ -35,7 +47,19 @@ wrapperTag: div
35
47
  id="card-demo-horizontal-grid-collapsed-example-dropdown-kebab-right-aligned"
36
48
  >
37
49
  <span class="pf-v6-c-menu-toggle__icon">
38
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
50
+ <svg
51
+ class="pf-v6-svg"
52
+ viewBox="0 0 32 32"
53
+ fill="currentColor"
54
+ aria-hidden="true"
55
+ role="img"
56
+ width="1em"
57
+ height="1em"
58
+ >
59
+ <path
60
+ d="M12.25 5c0-2.068 1.683-3.75 3.75-3.75S19.75 2.932 19.75 5 18.067 8.75 16 8.75 12.25 7.068 12.25 5ZM16 12.25c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Zm0 11c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Z"
61
+ />
62
+ </svg>
39
63
  </span>
40
64
  </button>
41
65
  </div>
@@ -122,7 +146,19 @@ wrapperTag: div
122
146
  >
123
147
  <span class="pf-v6-c-button__icon pf-m-start">
124
148
  <span class="pf-v6-c-card__header-toggle-icon">
125
- <i class="fas fa-angle-right" aria-hidden="true"></i>
149
+ <svg
150
+ class="pf-v6-svg"
151
+ viewBox="0 0 20 20"
152
+ fill="currentColor"
153
+ aria-hidden="true"
154
+ role="img"
155
+ width="1em"
156
+ height="1em"
157
+ >
158
+ <path
159
+ d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
160
+ />
161
+ </svg>
126
162
  </span>
127
163
  </span>
128
164
  </button>
@@ -136,7 +172,19 @@ wrapperTag: div
136
172
  id="card-demo-horizontal-grid-expanded-example-dropdown-kebab-right-aligned"
137
173
  >
138
174
  <span class="pf-v6-c-menu-toggle__icon">
139
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
175
+ <svg
176
+ class="pf-v6-svg"
177
+ viewBox="0 0 32 32"
178
+ fill="currentColor"
179
+ aria-hidden="true"
180
+ role="img"
181
+ width="1em"
182
+ height="1em"
183
+ >
184
+ <path
185
+ d="M12.25 5c0-2.068 1.683-3.75 3.75-3.75S19.75 2.932 19.75 5 18.067 8.75 16 8.75 12.25 7.068 12.25 5ZM16 12.25c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Zm0 11c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Z"
186
+ />
187
+ </svg>
140
188
  </span>
141
189
  </button>
142
190
  </div>
@@ -184,7 +232,19 @@ wrapperTag: div
184
232
  <a class="pf-v6-c-button pf-m-inline pf-m-link" href="#">
185
233
  <span class="pf-v6-c-button__text">View all set up cluster steps</span>
186
234
  <span class="pf-v6-c-button__icon pf-m-end">
187
- <i class="fas fa-arrow-right" aria-hidden="true"></i>
235
+ <svg
236
+ class="pf-v6-svg"
237
+ viewBox="0 0 448 512"
238
+ fill="currentColor"
239
+ aria-hidden="true"
240
+ role="img"
241
+ width="1em"
242
+ height="1em"
243
+ >
244
+ <path
245
+ d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"
246
+ />
247
+ </svg>
188
248
  </span>
189
249
  </a>
190
250
  </div>
@@ -215,7 +275,19 @@ wrapperTag: div
215
275
  <a class="pf-v6-c-button pf-m-inline pf-m-link" href="#">
216
276
  <span class="pf-v6-c-button__text">View all guided tours</span>
217
277
  <span class="pf-v6-c-button__icon pf-m-end">
218
- <i class="fas fa-arrow-right" aria-hidden="true"></i>
278
+ <svg
279
+ class="pf-v6-svg"
280
+ viewBox="0 0 448 512"
281
+ fill="currentColor"
282
+ aria-hidden="true"
283
+ role="img"
284
+ width="1em"
285
+ height="1em"
286
+ >
287
+ <path
288
+ d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"
289
+ />
290
+ </svg>
219
291
  </span>
220
292
  </a>
221
293
  </div>
@@ -249,7 +321,19 @@ wrapperTag: div
249
321
  <a class="pf-v6-c-button pf-m-inline pf-m-link" href="#">
250
322
  <span class="pf-v6-c-button__text">View all quick starts</span>
251
323
  <span class="pf-v6-c-button__icon pf-m-end">
252
- <i class="fas fa-arrow-right" aria-hidden="true"></i>
324
+ <svg
325
+ class="pf-v6-svg"
326
+ viewBox="0 0 448 512"
327
+ fill="currentColor"
328
+ aria-hidden="true"
329
+ role="img"
330
+ width="1em"
331
+ height="1em"
332
+ >
333
+ <path
334
+ d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"
335
+ />
336
+ </svg>
253
337
  </span>
254
338
  </a>
255
339
  </div>
@@ -275,7 +359,19 @@ wrapperTag: div
275
359
  <li>
276
360
  <a href="#">
277
361
  OpenShift 4.5: Top Tasks
278
- <i class="fas fa-external-link-alt" aria-hidden="true"></i>
362
+ <svg
363
+ class="pf-v6-svg"
364
+ viewBox="0 0 32 32"
365
+ fill="currentColor"
366
+ aria-hidden="true"
367
+ role="img"
368
+ width="1em"
369
+ height="1em"
370
+ >
371
+ <path
372
+ d="M30 21v7.5c0 .827-.673 1.5-1.5 1.5h-25c-.827 0-1.5-.673-1.5-1.5v-25C2 2.673 2.673 2 3.5 2H11a1 1 0 1 1 0 2H4v24h24v-7a1 1 0 1 1 2 0ZM28.5 2H18a1 1 0 1 0 0 2h8.586L13.293 17.293a.999.999 0 1 0 1.414 1.414L28 5.414V14a1 1 0 1 0 2 0V3.5c0-.827-.673-1.5-1.5-1.5Z"
373
+ />
374
+ </svg>
279
375
  </a>
280
376
  </li>
281
377
  <li>
@@ -286,7 +382,19 @@ wrapperTag: div
286
382
  <a class="pf-v6-c-button pf-m-inline pf-m-link" href="#">
287
383
  <span class="pf-v6-c-button__text">View all learning resources</span>
288
384
  <span class="pf-v6-c-button__icon pf-m-end">
289
- <i class="fas fa-arrow-right" aria-hidden="true"></i>
385
+ <svg
386
+ class="pf-v6-svg"
387
+ viewBox="0 0 448 512"
388
+ fill="currentColor"
389
+ aria-hidden="true"
390
+ role="img"
391
+ width="1em"
392
+ height="1em"
393
+ >
394
+ <path
395
+ d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"
396
+ />
397
+ </svg>
290
398
  </span>
291
399
  </a>
292
400
  </div>
@@ -446,7 +554,19 @@ wrapperTag: div
446
554
  <div class="pf-v6-c-card__body">
447
555
  <span class="pf-v6-c-icon pf-m-inline">
448
556
  <span class="pf-v6-c-icon__content pf-m-success">
449
- <i class="fas fa-check-circle" aria-hidden="true"></i>
557
+ <svg
558
+ class="pf-v6-svg"
559
+ viewBox="0 0 32 32"
560
+ fill="currentColor"
561
+ aria-hidden="true"
562
+ role="img"
563
+ width="1em"
564
+ height="1em"
565
+ >
566
+ <path
567
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm7.795 11.795-8.646 8.646c-.317.317-.733.475-1.149.475s-.832-.158-1.149-.475l-4.646-4.646a1.126 1.126 0 0 1 1.591-1.591l4.205 4.205 8.205-8.205a1.126 1.126 0 0 1 1.591 1.591Z"
568
+ />
569
+ </svg>
450
570
  </span>
451
571
  </span>
452
572
  </div>
@@ -458,7 +578,19 @@ wrapperTag: div
458
578
  <div class="pf-v6-c-card__body">
459
579
  <span class="pf-v6-c-icon pf-m-inline">
460
580
  <span class="pf-v6-c-icon__content pf-m-warning">
461
- <i class="fas fa-exclamation-triangle" aria-hidden="true"></i>
581
+ <svg
582
+ class="pf-v6-svg"
583
+ viewBox="0 0 32 32"
584
+ fill="currentColor"
585
+ aria-hidden="true"
586
+ role="img"
587
+ width="1em"
588
+ height="1em"
589
+ >
590
+ <path
591
+ d="m31.874 28.514-15.011-27a1.001 1.001 0 0 0-1.748 0l-15.011 27A1 1 0 0 0 .978 30H31a1 1 0 0 0 .874-1.486ZM14.5 12a1.5 1.5 0 0 1 3 0v5a1.5 1.5 0 0 1-3 0v-5ZM16 26.001a2 2 0 1 1-.001-3.999A2 2 0 0 1 16 26.001Z"
592
+ />
593
+ </svg>
462
594
  </span>
463
595
  </span>
464
596
  </div>
@@ -470,7 +602,19 @@ wrapperTag: div
470
602
  <div class="pf-v6-c-card__body">
471
603
  <span class="pf-v6-c-icon pf-m-inline">
472
604
  <span class="pf-v6-c-icon__content pf-m-danger">
473
- <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
605
+ <svg
606
+ class="pf-v6-svg"
607
+ viewBox="0 0 32 32"
608
+ fill="currentColor"
609
+ aria-hidden="true"
610
+ role="img"
611
+ width="1em"
612
+ height="1em"
613
+ >
614
+ <path
615
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm-1.5 8a1.5 1.5 0 1 1 3 0v7a1.5 1.5 0 1 1-3 0V9ZM16 25.001a2 2 0 1 1-.001-3.999A2 2 0 0 1 16 25.001Z"
616
+ />
617
+ </svg>
474
618
  </span>
475
619
  </span>
476
620
  </div>
@@ -489,7 +633,19 @@ wrapperTag: div
489
633
  <div class="pf-v6-l-flex__item">
490
634
  <span class="pf-v6-c-icon pf-m-inline">
491
635
  <span class="pf-v6-c-icon__content pf-m-success">
492
- <i class="fas fa-check-circle" aria-hidden="true"></i>
636
+ <svg
637
+ class="pf-v6-svg"
638
+ viewBox="0 0 32 32"
639
+ fill="currentColor"
640
+ aria-hidden="true"
641
+ role="img"
642
+ width="1em"
643
+ height="1em"
644
+ >
645
+ <path
646
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm7.795 11.795-8.646 8.646c-.317.317-.733.475-1.149.475s-.832-.158-1.149-.475l-4.646-4.646a1.126 1.126 0 0 1 1.591-1.591l4.205 4.205 8.205-8.205a1.126 1.126 0 0 1 1.591 1.591Z"
647
+ />
648
+ </svg>
493
649
  </span>
494
650
  </span>
495
651
  </div>
@@ -502,7 +658,19 @@ wrapperTag: div
502
658
  <div class="pf-v6-l-flex__item">
503
659
  <span class="pf-v6-c-icon pf-m-inline">
504
660
  <span class="pf-v6-c-icon__content pf-m-warning">
505
- <i class="fas fa-exclamation-triangle" aria-hidden="true"></i>
661
+ <svg
662
+ class="pf-v6-svg"
663
+ viewBox="0 0 32 32"
664
+ fill="currentColor"
665
+ aria-hidden="true"
666
+ role="img"
667
+ width="1em"
668
+ height="1em"
669
+ >
670
+ <path
671
+ d="m31.874 28.514-15.011-27a1.001 1.001 0 0 0-1.748 0l-15.011 27A1 1 0 0 0 .978 30H31a1 1 0 0 0 .874-1.486ZM14.5 12a1.5 1.5 0 0 1 3 0v5a1.5 1.5 0 0 1-3 0v-5ZM16 26.001a2 2 0 1 1-.001-3.999A2 2 0 0 1 16 26.001Z"
672
+ />
673
+ </svg>
506
674
  </span>
507
675
  </span>
508
676
  </div>
@@ -523,7 +691,19 @@ wrapperTag: div
523
691
  <div class="pf-v6-l-flex__item">
524
692
  <span class="pf-v6-c-icon pf-m-inline">
525
693
  <span class="pf-v6-c-icon__content pf-m-success">
526
- <i class="fas fa-check-circle" aria-hidden="true"></i>
694
+ <svg
695
+ class="pf-v6-svg"
696
+ viewBox="0 0 32 32"
697
+ fill="currentColor"
698
+ aria-hidden="true"
699
+ role="img"
700
+ width="1em"
701
+ height="1em"
702
+ >
703
+ <path
704
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm7.795 11.795-8.646 8.646c-.317.317-.733.475-1.149.475s-.832-.158-1.149-.475l-4.646-4.646a1.126 1.126 0 0 1 1.591-1.591l4.205 4.205 8.205-8.205a1.126 1.126 0 0 1 1.591 1.591Z"
705
+ />
706
+ </svg>
527
707
  </span>
528
708
  </span>
529
709
  </div>
@@ -536,7 +716,19 @@ wrapperTag: div
536
716
  <div class="pf-v6-l-flex__item">
537
717
  <span class="pf-v6-c-icon pf-m-inline">
538
718
  <span class="pf-v6-c-icon__content pf-m-danger">
539
- <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
719
+ <svg
720
+ class="pf-v6-svg"
721
+ viewBox="0 0 32 32"
722
+ fill="currentColor"
723
+ aria-hidden="true"
724
+ role="img"
725
+ width="1em"
726
+ height="1em"
727
+ >
728
+ <path
729
+ d="m31.874 28.514-15.011-27a1.001 1.001 0 0 0-1.748 0l-15.011 27A1 1 0 0 0 .978 30H31a1 1 0 0 0 .874-1.486ZM14.5 12a1.5 1.5 0 0 1 3 0v5a1.5 1.5 0 0 1-3 0v-5ZM16 26.001a2 2 0 1 1-.001-3.999A2 2 0 0 1 16 26.001Z"
730
+ />
731
+ </svg>
540
732
  </span>
541
733
  </span>
542
734
  </div>
@@ -557,7 +749,19 @@ wrapperTag: div
557
749
  <div class="pf-v6-l-flex__item">
558
750
  <span class="pf-v6-c-icon pf-m-inline">
559
751
  <span class="pf-v6-c-icon__content pf-m-warning">
560
- <i class="fas fa-exclamation-triangle" aria-hidden="true"></i>
752
+ <svg
753
+ class="pf-v6-svg"
754
+ viewBox="0 0 32 32"
755
+ fill="currentColor"
756
+ aria-hidden="true"
757
+ role="img"
758
+ width="1em"
759
+ height="1em"
760
+ >
761
+ <path
762
+ d="m31.874 28.514-15.011-27a1.001 1.001 0 0 0-1.748 0l-15.011 27A1 1 0 0 0 .978 30H31a1 1 0 0 0 .874-1.486ZM14.5 12a1.5 1.5 0 0 1 3 0v5a1.5 1.5 0 0 1-3 0v-5ZM16 26.001a2 2 0 1 1-.001-3.999A2 2 0 0 1 16 26.001Z"
763
+ />
764
+ </svg>
561
765
  </span>
562
766
  </span>
563
767
  </div>
@@ -570,7 +774,19 @@ wrapperTag: div
570
774
  <div class="pf-v6-l-flex__item">
571
775
  <span class="pf-v6-c-icon pf-m-inline">
572
776
  <span class="pf-v6-c-icon__content pf-m-danger">
573
- <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
777
+ <svg
778
+ class="pf-v6-svg"
779
+ viewBox="0 0 32 32"
780
+ fill="currentColor"
781
+ aria-hidden="true"
782
+ role="img"
783
+ width="1em"
784
+ height="1em"
785
+ >
786
+ <path
787
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm-1.5 8a1.5 1.5 0 1 1 3 0v7a1.5 1.5 0 1 1-3 0V9ZM16 25.001a2 2 0 1 1-.001-3.999A2 2 0 0 1 16 25.001Z"
788
+ />
789
+ </svg>
574
790
  </span>
575
791
  </span>
576
792
  </div>
@@ -602,7 +818,19 @@ wrapperTag: div
602
818
  <div class="pf-v6-l-flex__item">
603
819
  <span class="pf-v6-c-icon pf-m-inline">
604
820
  <span class="pf-v6-c-icon__content pf-m-danger">
605
- <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
821
+ <svg
822
+ class="pf-v6-svg"
823
+ viewBox="0 0 32 32"
824
+ fill="currentColor"
825
+ aria-hidden="true"
826
+ role="img"
827
+ width="1em"
828
+ height="1em"
829
+ >
830
+ <path
831
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm-1.5 8a1.5 1.5 0 1 1 3 0v7a1.5 1.5 0 1 1-3 0V9ZM16 25.001a2 2 0 1 1-.001-3.999A2 2 0 0 1 16 25.001Z"
832
+ />
833
+ </svg>
606
834
  </span>
607
835
  </span>
608
836
  </div>
@@ -615,7 +843,19 @@ wrapperTag: div
615
843
  <div class="pf-v6-l-flex__item">
616
844
  <span class="pf-v6-c-icon pf-m-inline">
617
845
  <span class="pf-v6-c-icon__content pf-m-warning">
618
- <i class="fas fa-exclamation-triangle" aria-hidden="true"></i>
846
+ <svg
847
+ class="pf-v6-svg"
848
+ viewBox="0 0 32 32"
849
+ fill="currentColor"
850
+ aria-hidden="true"
851
+ role="img"
852
+ width="1em"
853
+ height="1em"
854
+ >
855
+ <path
856
+ d="m31.874 28.514-15.011-27a1.001 1.001 0 0 0-1.748 0l-15.011 27A1 1 0 0 0 .978 30H31a1 1 0 0 0 .874-1.486ZM14.5 12a1.5 1.5 0 0 1 3 0v5a1.5 1.5 0 0 1-3 0v-5ZM16 26.001a2 2 0 1 1-.001-3.999A2 2 0 0 1 16 26.001Z"
857
+ />
858
+ </svg>
619
859
  </span>
620
860
  </span>
621
861
  </div>
@@ -639,7 +879,19 @@ wrapperTag: div
639
879
  <div class="pf-v6-l-flex__item">
640
880
  <span class="pf-v6-c-icon pf-m-inline">
641
881
  <span class="pf-v6-c-icon__content pf-m-success">
642
- <i class="fas fa-check-circle" aria-hidden="true"></i>
882
+ <svg
883
+ class="pf-v6-svg"
884
+ viewBox="0 0 32 32"
885
+ fill="currentColor"
886
+ aria-hidden="true"
887
+ role="img"
888
+ width="1em"
889
+ height="1em"
890
+ >
891
+ <path
892
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm7.795 11.795-8.646 8.646c-.317.317-.733.475-1.149.475s-.832-.158-1.149-.475l-4.646-4.646a1.126 1.126 0 0 1 1.591-1.591l4.205 4.205 8.205-8.205a1.126 1.126 0 0 1 1.591 1.591Z"
893
+ />
894
+ </svg>
643
895
  </span>
644
896
  </span>
645
897
  </div>
@@ -652,7 +904,19 @@ wrapperTag: div
652
904
  <div class="pf-v6-l-flex__item">
653
905
  <span class="pf-v6-c-icon pf-m-inline">
654
906
  <span class="pf-v6-c-icon__content pf-m-warning">
655
- <i class="fas fa-exclamation-triangle" aria-hidden="true"></i>
907
+ <svg
908
+ class="pf-v6-svg"
909
+ viewBox="0 0 32 32"
910
+ fill="currentColor"
911
+ aria-hidden="true"
912
+ role="img"
913
+ width="1em"
914
+ height="1em"
915
+ >
916
+ <path
917
+ d="m31.874 28.514-15.011-27a1.001 1.001 0 0 0-1.748 0l-15.011 27A1 1 0 0 0 .978 30H31a1 1 0 0 0 .874-1.486ZM14.5 12a1.5 1.5 0 0 1 3 0v5a1.5 1.5 0 0 1-3 0v-5ZM16 26.001a2 2 0 1 1-.001-3.999A2 2 0 0 1 16 26.001Z"
918
+ />
919
+ </svg>
656
920
  </span>
657
921
  </span>
658
922
  </div>
@@ -676,7 +940,19 @@ wrapperTag: div
676
940
  <div class="pf-v6-l-flex__item">
677
941
  <span class="pf-v6-c-icon pf-m-inline">
678
942
  <span class="pf-v6-c-icon__content pf-m-warning">
679
- <i class="fas fa-exclamation-triangle" aria-hidden="true"></i>
943
+ <svg
944
+ class="pf-v6-svg"
945
+ viewBox="0 0 32 32"
946
+ fill="currentColor"
947
+ aria-hidden="true"
948
+ role="img"
949
+ width="1em"
950
+ height="1em"
951
+ >
952
+ <path
953
+ d="m31.874 28.514-15.011-27a1.001 1.001 0 0 0-1.748 0l-15.011 27A1 1 0 0 0 .978 30H31a1 1 0 0 0 .874-1.486ZM14.5 12a1.5 1.5 0 0 1 3 0v5a1.5 1.5 0 0 1-3 0v-5ZM16 26.001a2 2 0 1 1-.001-3.999A2 2 0 0 1 16 26.001Z"
954
+ />
955
+ </svg>
680
956
  </span>
681
957
  </span>
682
958
  </div>
@@ -689,7 +965,19 @@ wrapperTag: div
689
965
  <div class="pf-v6-l-flex__item">
690
966
  <span class="pf-v6-c-icon pf-m-inline">
691
967
  <span class="pf-v6-c-icon__content pf-m-danger">
692
- <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
968
+ <svg
969
+ class="pf-v6-svg"
970
+ viewBox="0 0 32 32"
971
+ fill="currentColor"
972
+ aria-hidden="true"
973
+ role="img"
974
+ width="1em"
975
+ height="1em"
976
+ >
977
+ <path
978
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm-1.5 8a1.5 1.5 0 1 1 3 0v7a1.5 1.5 0 1 1-3 0V9ZM16 25.001a2 2 0 1 1-.001-3.999A2 2 0 0 1 16 25.001Z"
979
+ />
980
+ </svg>
693
981
  </span>
694
982
  </span>
695
983
  </div>
@@ -717,13 +1005,23 @@ wrapperTag: div
717
1005
  </div>
718
1006
  </div>
719
1007
  <div class="pf-v6-c-card__body">
720
- <div class="pf-v6-c-tabs pf-m-fill" role="region" id="status-tabs">
721
- <ul class="pf-v6-c-tabs__list" role="tablist">
1008
+ <div
1009
+ class="pf-v6-c-tabs pf-m-fill"
1010
+ aria-label="Status, tabbed card example"
1011
+ role="region"
1012
+ id="status-tabs"
1013
+ >
1014
+ <ul
1015
+ class="pf-v6-c-tabs__list"
1016
+ role="tablist"
1017
+ aria-label="Status, tabbed card example"
1018
+ >
722
1019
  <li class="pf-v6-c-tabs__item pf-m-current" role="presentation">
723
1020
  <button
724
1021
  type="button"
725
1022
  class="pf-v6-c-tabs__link"
726
1023
  role="tab"
1024
+ aria-selected="true"
727
1025
  id="status-tabs-object-1-link"
728
1026
  >
729
1027
  <span class="pf-v6-c-tabs__item-text">Object 1</span>
@@ -734,6 +1032,7 @@ wrapperTag: div
734
1032
  type="button"
735
1033
  class="pf-v6-c-tabs__link"
736
1034
  role="tab"
1035
+ aria-selected="false"
737
1036
  id="status-tabs-object-2-link"
738
1037
  >
739
1038
  <span class="pf-v6-c-tabs__item-text">Object 2</span>
@@ -744,6 +1043,7 @@ wrapperTag: div
744
1043
  type="button"
745
1044
  class="pf-v6-c-tabs__link"
746
1045
  role="tab"
1046
+ aria-selected="false"
747
1047
  id="status-tabs-object-3-link"
748
1048
  >
749
1049
  <span class="pf-v6-c-tabs__item-text">Object 3</span>
@@ -806,7 +1106,19 @@ wrapperTag: div
806
1106
  <div class="pf-v6-l-flex__item">
807
1107
  <span class="pf-v6-c-icon pf-m-inline">
808
1108
  <span class="pf-v6-c-icon__content pf-m-success">
809
- <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
1109
+ <svg
1110
+ class="pf-v6-svg"
1111
+ viewBox="0 0 32 32"
1112
+ fill="currentColor"
1113
+ aria-hidden="true"
1114
+ role="img"
1115
+ width="1em"
1116
+ height="1em"
1117
+ >
1118
+ <path
1119
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm-1.5 8a1.5 1.5 0 1 1 3 0v7a1.5 1.5 0 1 1-3 0V9ZM16 25.001a2 2 0 1 1-.001-3.999A2 2 0 0 1 16 25.001Z"
1120
+ />
1121
+ </svg>
810
1122
  </span>
811
1123
  </span>
812
1124
  </div>
@@ -867,7 +1179,19 @@ wrapperTag: div
867
1179
  <div class="pf-v6-l-flex__item">
868
1180
  <span class="pf-v6-c-icon pf-m-inline">
869
1181
  <span class="pf-v6-c-icon__content pf-m-success">
870
- <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
1182
+ <svg
1183
+ class="pf-v6-svg"
1184
+ viewBox="0 0 32 32"
1185
+ fill="currentColor"
1186
+ aria-hidden="true"
1187
+ role="img"
1188
+ width="1em"
1189
+ height="1em"
1190
+ >
1191
+ <path
1192
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm-1.5 8a1.5 1.5 0 1 1 3 0v7a1.5 1.5 0 1 1-3 0V9ZM16 25.001a2 2 0 1 1-.001-3.999A2 2 0 0 1 16 25.001Z"
1193
+ />
1194
+ </svg>
871
1195
  </span>
872
1196
  </span>
873
1197
  </div>
@@ -926,10 +1250,23 @@ wrapperTag: div
926
1250
  <div class="pf-v6-l-grid__item">
927
1251
  <div class="pf-v6-l-flex pf-m-space-items-sm">
928
1252
  <div class="pf-v6-l-flex__item">
929
- <i
930
- class="fas fa-check-circle pf-v6-u-success-color-100"
931
- aria-hidden="true"
932
- ></i>
1253
+ <span class="pf-v6-c-icon">
1254
+ <span class="pf-v6-c-icon__content pf-m-success">
1255
+ <svg
1256
+ class="pf-v6-svg"
1257
+ viewBox="0 0 32 32"
1258
+ fill="currentColor"
1259
+ aria-hidden="true"
1260
+ role="img"
1261
+ width="1em"
1262
+ height="1em"
1263
+ >
1264
+ <path
1265
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm7.795 11.795-8.646 8.646c-.317.317-.733.475-1.149.475s-.832-.158-1.149-.475l-4.646-4.646a1.126 1.126 0 0 1 1.591-1.591l4.205 4.205 8.205-8.205a1.126 1.126 0 0 1 1.591 1.591Z"
1266
+ />
1267
+ </svg>
1268
+ </span>
1269
+ </span>
933
1270
  </div>
934
1271
  <div class="pf-v6-l-flex__item">
935
1272
  <span>Cluster</span>
@@ -939,10 +1276,23 @@ wrapperTag: div
939
1276
  <div class="pf-v6-l-grid__item">
940
1277
  <div class="pf-v6-l-flex pf-m-space-items-sm">
941
1278
  <div class="pf-v6-l-flex__item">
942
- <i
943
- class="fas fa-exclamation-circle pf-v6-u-danger-color-100"
944
- aria-hidden="true"
945
- ></i>
1279
+ <span class="pf-v6-c-icon">
1280
+ <span class="pf-v6-c-icon__content pf-m-danger">
1281
+ <svg
1282
+ class="pf-v6-svg"
1283
+ viewBox="0 0 32 32"
1284
+ fill="currentColor"
1285
+ aria-hidden="true"
1286
+ role="img"
1287
+ width="1em"
1288
+ height="1em"
1289
+ >
1290
+ <path
1291
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm-1.5 8a1.5 1.5 0 1 1 3 0v7a1.5 1.5 0 1 1-3 0V9ZM16 25.001a2 2 0 1 1-.001-3.999A2 2 0 0 1 16 25.001Z"
1292
+ />
1293
+ </svg>
1294
+ </span>
1295
+ </span>
946
1296
  </div>
947
1297
  <div class="pf-v6-l-flex__item">
948
1298
  <span class="popover-parent">
@@ -954,10 +1304,23 @@ wrapperTag: div
954
1304
  <div class="pf-v6-l-grid__item">
955
1305
  <div class="pf-v6-l-flex pf-m-space-items-sm">
956
1306
  <div class="pf-v6-l-flex__item">
957
- <i
958
- class="fas fa-exclamation-circle pf-v6-u-danger-color-100"
959
- aria-hidden="true"
960
- ></i>
1307
+ <span class="pf-v6-c-icon">
1308
+ <span class="pf-v6-c-icon__content pf-m-danger">
1309
+ <svg
1310
+ class="pf-v6-svg"
1311
+ viewBox="0 0 32 32"
1312
+ fill="currentColor"
1313
+ aria-hidden="true"
1314
+ role="img"
1315
+ width="1em"
1316
+ height="1em"
1317
+ >
1318
+ <path
1319
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm-1.5 8a1.5 1.5 0 1 1 3 0v7a1.5 1.5 0 1 1-3 0V9ZM16 25.001a2 2 0 1 1-.001-3.999A2 2 0 0 1 16 25.001Z"
1320
+ />
1321
+ </svg>
1322
+ </span>
1323
+ </span>
961
1324
  </div>
962
1325
  <div class="pf-v6-l-flex pf-m-column pf-m-space-items-none">
963
1326
  <div class="pf-v6-l-flex__item">
@@ -972,10 +1335,23 @@ wrapperTag: div
972
1335
  <div class="pf-v6-l-grid__item">
973
1336
  <div class="pf-v6-l-flex pf-m-space-items-sm">
974
1337
  <div class="pf-v6-l-flex__item">
975
- <i
976
- class="fas fa-check-circle pf-v6-u-success-color-100"
977
- aria-hidden="true"
978
- ></i>
1338
+ <span class="pf-v6-c-icon">
1339
+ <span class="pf-v6-c-icon__content pf-m-success">
1340
+ <svg
1341
+ class="pf-v6-svg"
1342
+ viewBox="0 0 32 32"
1343
+ fill="currentColor"
1344
+ aria-hidden="true"
1345
+ role="img"
1346
+ width="1em"
1347
+ height="1em"
1348
+ >
1349
+ <path
1350
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm7.795 11.795-8.646 8.646c-.317.317-.733.475-1.149.475s-.832-.158-1.149-.475l-4.646-4.646a1.126 1.126 0 0 1 1.591-1.591l4.205 4.205 8.205-8.205a1.126 1.126 0 0 1 1.591 1.591Z"
1351
+ />
1352
+ </svg>
1353
+ </span>
1354
+ </span>
979
1355
  </div>
980
1356
  <div class="pf-v6-l-flex pf-m-column pf-m-space-items-none">
981
1357
  <div class="pf-v6-l-flex__item">
@@ -1055,7 +1431,19 @@ wrapperTag: div
1055
1431
  </div>
1056
1432
  </div>
1057
1433
  <span class="pf-v6-c-notification-drawer__group-toggle-icon">
1058
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1434
+ <svg
1435
+ class="pf-v6-svg"
1436
+ viewBox="0 0 20 20"
1437
+ fill="currentColor"
1438
+ aria-hidden="true"
1439
+ role="img"
1440
+ width="1em"
1441
+ height="1em"
1442
+ >
1443
+ <path
1444
+ d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
1445
+ />
1446
+ </svg>
1059
1447
  </span>
1060
1448
  </button>
1061
1449
  <ul class="pf-v6-c-notification-drawer__list" role="list" hidden>
@@ -1065,7 +1453,19 @@ wrapperTag: div
1065
1453
  >
1066
1454
  <div class="pf-v6-c-notification-drawer__list-item-header">
1067
1455
  <span class="pf-v6-c-notification-drawer__list-item-header-icon">
1068
- <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
1456
+ <svg
1457
+ class="pf-v6-svg"
1458
+ viewBox="0 0 32 32"
1459
+ fill="currentColor"
1460
+ aria-hidden="true"
1461
+ role="img"
1462
+ width="1em"
1463
+ height="1em"
1464
+ >
1465
+ <path
1466
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm-1.5 8a1.5 1.5 0 1 1 3 0v7a1.5 1.5 0 1 1-3 0V9ZM16 25.001a2 2 0 1 1-.001-3.999A2 2 0 0 1 16 25.001Z"
1467
+ />
1468
+ </svg>
1069
1469
  </span>
1070
1470
  <h2 class="pf-v6-c-notification-drawer__list-item-header-title">
1071
1471
  <span class="pf-v6-screen-reader">Danger notification:</span>
@@ -1082,7 +1482,19 @@ wrapperTag: div
1082
1482
  >
1083
1483
  <div class="pf-v6-c-notification-drawer__list-item-header">
1084
1484
  <span class="pf-v6-c-notification-drawer__list-item-header-icon">
1085
- <i class="fas fa-exclamation-triangle" aria-hidden="true"></i>
1485
+ <svg
1486
+ class="pf-v6-svg"
1487
+ viewBox="0 0 32 32"
1488
+ fill="currentColor"
1489
+ aria-hidden="true"
1490
+ role="img"
1491
+ width="1em"
1492
+ height="1em"
1493
+ >
1494
+ <path
1495
+ d="m31.874 28.514-15.011-27a1.001 1.001 0 0 0-1.748 0l-15.011 27A1 1 0 0 0 .978 30H31a1 1 0 0 0 .874-1.486ZM14.5 12a1.5 1.5 0 0 1 3 0v5a1.5 1.5 0 0 1-3 0v-5ZM16 26.001a2 2 0 1 1-.001-3.999A2 2 0 0 1 16 26.001Z"
1496
+ />
1497
+ </svg>
1086
1498
  </span>
1087
1499
  <h2 class="pf-v6-c-notification-drawer__list-item-header-title">
1088
1500
  <span class="pf-v6-screen-reader">Warning notification:</span>
@@ -1115,10 +1527,23 @@ wrapperTag: div
1115
1527
  <div class="pf-v6-l-grid__item">
1116
1528
  <div class="pf-v6-l-flex pf-m-space-items-sm">
1117
1529
  <div class="pf-v6-l-flex__item">
1118
- <i
1119
- class="fas fa-check-circle pf-v6-u-success-color-100"
1120
- aria-hidden="true"
1121
- ></i>
1530
+ <span class="pf-v6-c-icon">
1531
+ <span class="pf-v6-c-icon__content pf-m-success">
1532
+ <svg
1533
+ class="pf-v6-svg"
1534
+ viewBox="0 0 32 32"
1535
+ fill="currentColor"
1536
+ aria-hidden="true"
1537
+ role="img"
1538
+ width="1em"
1539
+ height="1em"
1540
+ >
1541
+ <path
1542
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm7.795 11.795-8.646 8.646c-.317.317-.733.475-1.149.475s-.832-.158-1.149-.475l-4.646-4.646a1.126 1.126 0 0 1 1.591-1.591l4.205 4.205 8.205-8.205a1.126 1.126 0 0 1 1.591 1.591Z"
1543
+ />
1544
+ </svg>
1545
+ </span>
1546
+ </span>
1122
1547
  </div>
1123
1548
  <div class="pf-v6-l-flex__item">
1124
1549
  <span>Cluster</span>
@@ -1128,10 +1553,23 @@ wrapperTag: div
1128
1553
  <div class="pf-v6-l-grid__item">
1129
1554
  <div class="pf-v6-l-flex pf-m-space-items-sm">
1130
1555
  <div class="pf-v6-l-flex__item">
1131
- <i
1132
- class="fas fa-exclamation-circle pf-v6-u-danger-color-100"
1133
- aria-hidden="true"
1134
- ></i>
1556
+ <span class="pf-v6-c-icon">
1557
+ <span class="pf-v6-c-icon__content pf-m-danger">
1558
+ <svg
1559
+ class="pf-v6-svg"
1560
+ viewBox="0 0 32 32"
1561
+ fill="currentColor"
1562
+ aria-hidden="true"
1563
+ role="img"
1564
+ width="1em"
1565
+ height="1em"
1566
+ >
1567
+ <path
1568
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm-1.5 8a1.5 1.5 0 1 1 3 0v7a1.5 1.5 0 1 1-3 0V9ZM16 25.001a2 2 0 1 1-.001-3.999A2 2 0 0 1 16 25.001Z"
1569
+ />
1570
+ </svg>
1571
+ </span>
1572
+ </span>
1135
1573
  </div>
1136
1574
  <div class="pf-v6-l-flex__item">
1137
1575
  <span class="popover-parent">
@@ -1143,10 +1581,23 @@ wrapperTag: div
1143
1581
  <div class="pf-v6-l-grid__item">
1144
1582
  <div class="pf-v6-l-flex pf-m-space-items-sm">
1145
1583
  <div class="pf-v6-l-flex__item">
1146
- <i
1147
- class="fas fa-exclamation-circle pf-v6-u-danger-color-100"
1148
- aria-hidden="true"
1149
- ></i>
1584
+ <span class="pf-v6-c-icon">
1585
+ <span class="pf-v6-c-icon__content pf-m-danger">
1586
+ <svg
1587
+ class="pf-v6-svg"
1588
+ viewBox="0 0 32 32"
1589
+ fill="currentColor"
1590
+ aria-hidden="true"
1591
+ role="img"
1592
+ width="1em"
1593
+ height="1em"
1594
+ >
1595
+ <path
1596
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm-1.5 8a1.5 1.5 0 1 1 3 0v7a1.5 1.5 0 1 1-3 0V9ZM16 25.001a2 2 0 1 1-.001-3.999A2 2 0 0 1 16 25.001Z"
1597
+ />
1598
+ </svg>
1599
+ </span>
1600
+ </span>
1150
1601
  </div>
1151
1602
  <div class="pf-v6-l-flex pf-m-column pf-m-space-items-none">
1152
1603
  <div class="pf-v6-l-flex__item">
@@ -1161,10 +1612,23 @@ wrapperTag: div
1161
1612
  <div class="pf-v6-l-grid__item">
1162
1613
  <div class="pf-v6-l-flex pf-m-space-items-sm">
1163
1614
  <div class="pf-v6-l-flex__item">
1164
- <i
1165
- class="fas fa-check-circle pf-v6-u-success-color-100"
1166
- aria-hidden="true"
1167
- ></i>
1615
+ <span class="pf-v6-c-icon">
1616
+ <span class="pf-v6-c-icon__content pf-m-success">
1617
+ <svg
1618
+ class="pf-v6-svg"
1619
+ viewBox="0 0 32 32"
1620
+ fill="currentColor"
1621
+ aria-hidden="true"
1622
+ role="img"
1623
+ width="1em"
1624
+ height="1em"
1625
+ >
1626
+ <path
1627
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm7.795 11.795-8.646 8.646c-.317.317-.733.475-1.149.475s-.832-.158-1.149-.475l-4.646-4.646a1.126 1.126 0 0 1 1.591-1.591l4.205 4.205 8.205-8.205a1.126 1.126 0 0 1 1.591 1.591Z"
1628
+ />
1629
+ </svg>
1630
+ </span>
1631
+ </span>
1168
1632
  </div>
1169
1633
  <div class="pf-v6-l-flex pf-m-column pf-m-space-items-none">
1170
1634
  <div class="pf-v6-l-flex__item">
@@ -1244,7 +1708,19 @@ wrapperTag: div
1244
1708
  </div>
1245
1709
  </div>
1246
1710
  <span class="pf-v6-c-notification-drawer__group-toggle-icon">
1247
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1711
+ <svg
1712
+ class="pf-v6-svg"
1713
+ viewBox="0 0 20 20"
1714
+ fill="currentColor"
1715
+ aria-hidden="true"
1716
+ role="img"
1717
+ width="1em"
1718
+ height="1em"
1719
+ >
1720
+ <path
1721
+ d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
1722
+ />
1723
+ </svg>
1248
1724
  </span>
1249
1725
  </button>
1250
1726
  <ul class="pf-v6-c-notification-drawer__list" role="list">
@@ -1254,7 +1730,19 @@ wrapperTag: div
1254
1730
  >
1255
1731
  <div class="pf-v6-c-notification-drawer__list-item-header">
1256
1732
  <span class="pf-v6-c-notification-drawer__list-item-header-icon">
1257
- <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
1733
+ <svg
1734
+ class="pf-v6-svg"
1735
+ viewBox="0 0 32 32"
1736
+ fill="currentColor"
1737
+ aria-hidden="true"
1738
+ role="img"
1739
+ width="1em"
1740
+ height="1em"
1741
+ >
1742
+ <path
1743
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm-1.5 8a1.5 1.5 0 1 1 3 0v7a1.5 1.5 0 1 1-3 0V9ZM16 25.001a2 2 0 1 1-.001-3.999A2 2 0 0 1 16 25.001Z"
1744
+ />
1745
+ </svg>
1258
1746
  </span>
1259
1747
  <h2 class="pf-v6-c-notification-drawer__list-item-header-title">
1260
1748
  <span class="pf-v6-screen-reader">Danger notification:</span>
@@ -1271,7 +1759,19 @@ wrapperTag: div
1271
1759
  >
1272
1760
  <div class="pf-v6-c-notification-drawer__list-item-header">
1273
1761
  <span class="pf-v6-c-notification-drawer__list-item-header-icon">
1274
- <i class="fas fa-exclamation-triangle" aria-hidden="true"></i>
1762
+ <svg
1763
+ class="pf-v6-svg"
1764
+ viewBox="0 0 32 32"
1765
+ fill="currentColor"
1766
+ aria-hidden="true"
1767
+ role="img"
1768
+ width="1em"
1769
+ height="1em"
1770
+ >
1771
+ <path
1772
+ d="m31.874 28.514-15.011-27a1.001 1.001 0 0 0-1.748 0l-15.011 27A1 1 0 0 0 .978 30H31a1 1 0 0 0 .874-1.486ZM14.5 12a1.5 1.5 0 0 1 3 0v5a1.5 1.5 0 0 1-3 0v-5ZM16 26.001a2 2 0 1 1-.001-3.999A2 2 0 0 1 16 26.001Z"
1773
+ />
1774
+ </svg>
1275
1775
  </span>
1276
1776
  <h2 class="pf-v6-c-notification-drawer__list-item-header-title">
1277
1777
  <span class="pf-v6-screen-reader">Warning notification:</span>
@@ -1304,10 +1804,23 @@ wrapperTag: div
1304
1804
  <div class="pf-v6-l-grid__item">
1305
1805
  <div class="pf-v6-l-flex pf-m-space-items-sm">
1306
1806
  <div class="pf-v6-l-flex__item">
1307
- <i
1308
- class="fas fa-check-circle pf-v6-u-success-color-100"
1309
- aria-hidden="true"
1310
- ></i>
1807
+ <span class="pf-v6-c-icon">
1808
+ <span class="pf-v6-c-icon__content pf-m-success">
1809
+ <svg
1810
+ class="pf-v6-svg"
1811
+ viewBox="0 0 32 32"
1812
+ fill="currentColor"
1813
+ aria-hidden="true"
1814
+ role="img"
1815
+ width="1em"
1816
+ height="1em"
1817
+ >
1818
+ <path
1819
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm7.795 11.795-8.646 8.646c-.317.317-.733.475-1.149.475s-.832-.158-1.149-.475l-4.646-4.646a1.126 1.126 0 0 1 1.591-1.591l4.205 4.205 8.205-8.205a1.126 1.126 0 0 1 1.591 1.591Z"
1820
+ />
1821
+ </svg>
1822
+ </span>
1823
+ </span>
1311
1824
  </div>
1312
1825
  <div class="pf-v6-l-flex__item">
1313
1826
  <span>Cluster</span>
@@ -1317,10 +1830,23 @@ wrapperTag: div
1317
1830
  <div class="pf-v6-l-grid__item">
1318
1831
  <div class="pf-v6-l-flex pf-m-space-items-sm">
1319
1832
  <div class="pf-v6-l-flex__item">
1320
- <i
1321
- class="fas fa-exclamation-circle pf-v6-u-danger-color-100"
1322
- aria-hidden="true"
1323
- ></i>
1833
+ <span class="pf-v6-c-icon">
1834
+ <span class="pf-v6-c-icon__content pf-m-danger">
1835
+ <svg
1836
+ class="pf-v6-svg"
1837
+ viewBox="0 0 32 32"
1838
+ fill="currentColor"
1839
+ aria-hidden="true"
1840
+ role="img"
1841
+ width="1em"
1842
+ height="1em"
1843
+ >
1844
+ <path
1845
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm-1.5 8a1.5 1.5 0 1 1 3 0v7a1.5 1.5 0 1 1-3 0V9ZM16 25.001a2 2 0 1 1-.001-3.999A2 2 0 0 1 16 25.001Z"
1846
+ />
1847
+ </svg>
1848
+ </span>
1849
+ </span>
1324
1850
  </div>
1325
1851
  <div class="pf-v6-l-flex__item">
1326
1852
  <span class="popover-parent">
@@ -1342,7 +1868,19 @@ wrapperTag: div
1342
1868
  aria-label="Close"
1343
1869
  >
1344
1870
  <span class="pf-v6-c-button__icon">
1345
- <i class="fas fa-times" aria-hidden="true"></i>
1871
+ <svg
1872
+ class="pf-v6-svg"
1873
+ viewBox="0 0 20 20"
1874
+ fill="currentColor"
1875
+ aria-hidden="true"
1876
+ role="img"
1877
+ width="1em"
1878
+ height="1em"
1879
+ >
1880
+ <path
1881
+ d="M17.8 16.2 11.59 10l6.21-6.21c.42-.46.39-1.17-.07-1.59-.43-.4-1.09-.4-1.52 0l-6.2 6.2-6.22-6.19c-.44-.44-1.15-.44-1.59 0-.44.44-.44 1.15 0 1.59l6.2 6.21-6.2 6.2c-.42.46-.39 1.17.07 1.59.43.4 1.09.4 1.52 0L10 11.59l6.2 6.2c.44.44 1.15.44 1.59 0 .44-.45.44-1.16 0-1.6Z"
1882
+ />
1883
+ </svg>
1346
1884
  </span>
1347
1885
  </button>
1348
1886
  </div>
@@ -1403,10 +1941,19 @@ wrapperTag: div
1403
1941
  >
1404
1942
  <span class="pf-v6-c-button__icon">
1405
1943
  <div class="pf-v6-c-table__toggle-icon">
1406
- <i
1407
- class="fas fa-angle-down"
1944
+ <svg
1945
+ class="pf-v6-svg"
1946
+ viewBox="0 0 20 20"
1947
+ fill="currentColor"
1408
1948
  aria-hidden="true"
1409
- ></i>
1949
+ role="img"
1950
+ width="1em"
1951
+ height="1em"
1952
+ >
1953
+ <path
1954
+ d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
1955
+ />
1956
+ </svg>
1410
1957
  </div>
1411
1958
  </span>
1412
1959
  </button>
@@ -1427,10 +1974,23 @@ wrapperTag: div
1427
1974
  >
1428
1975
  <span class="pf-v6-c-table__text">
1429
1976
  20%&nbsp;
1430
- <i
1431
- class="fas fa-exclamation-circle pf-v6-u-danger-color-200"
1432
- aria-hidden="true"
1433
- ></i>
1977
+ <span class="pf-v6-c-icon">
1978
+ <span class="pf-v6-c-icon__content pf-m-danger">
1979
+ <svg
1980
+ class="pf-v6-svg"
1981
+ viewBox="0 0 32 32"
1982
+ fill="currentColor"
1983
+ aria-hidden="true"
1984
+ role="img"
1985
+ width="1em"
1986
+ height="1em"
1987
+ >
1988
+ <path
1989
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm-1.5 8a1.5 1.5 0 1 1 3 0v7a1.5 1.5 0 1 1-3 0V9ZM16 25.001a2 2 0 1 1-.001-3.999A2 2 0 0 1 16 25.001Z"
1990
+ />
1991
+ </svg>
1992
+ </span>
1993
+ </span>
1434
1994
  </span>
1435
1995
  </td>
1436
1996
  </tr>
@@ -1451,10 +2011,19 @@ wrapperTag: div
1451
2011
  aria-label="Inline danger alert"
1452
2012
  >
1453
2013
  <div class="pf-v6-c-alert__icon">
1454
- <i
1455
- class="fas fa-fw fa-exclamation-circle"
2014
+ <svg
2015
+ class="pf-v6-svg"
2016
+ viewBox="0 0 512 512"
2017
+ fill="currentColor"
1456
2018
  aria-hidden="true"
1457
- ></i>
2019
+ role="img"
2020
+ width="1em"
2021
+ height="1em"
2022
+ >
2023
+ <path
2024
+ d="M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zm-248 50c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"
2025
+ />
2026
+ </svg>
1458
2027
  </div>
1459
2028
  <p class="pf-v6-c-alert__title">
1460
2029
  <span
@@ -1485,10 +2054,19 @@ wrapperTag: div
1485
2054
  >
1486
2055
  <span class="pf-v6-c-button__icon">
1487
2056
  <div class="pf-v6-c-table__toggle-icon">
1488
- <i
1489
- class="fas fa-angle-down"
2057
+ <svg
2058
+ class="pf-v6-svg"
2059
+ viewBox="0 0 20 20"
2060
+ fill="currentColor"
1490
2061
  aria-hidden="true"
1491
- ></i>
2062
+ role="img"
2063
+ width="1em"
2064
+ height="1em"
2065
+ >
2066
+ <path
2067
+ d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
2068
+ />
2069
+ </svg>
1492
2070
  </div>
1493
2071
  </span>
1494
2072
  </button>
@@ -1511,10 +2089,25 @@ wrapperTag: div
1511
2089
  >
1512
2090
  <span class="pf-v6-c-table__text">
1513
2091
  100%&nbsp;
1514
- <i
1515
- class="fas fa-check-circle pf-v6-u-success-color-200"
1516
- aria-hidden="true"
1517
- ></i>
2092
+ <span class="pf-v6-c-icon">
2093
+ <span
2094
+ class="pf-v6-c-icon__content pf-m-success"
2095
+ >
2096
+ <svg
2097
+ class="pf-v6-svg"
2098
+ viewBox="0 0 32 32"
2099
+ fill="currentColor"
2100
+ aria-hidden="true"
2101
+ role="img"
2102
+ width="1em"
2103
+ height="1em"
2104
+ >
2105
+ <path
2106
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm7.795 11.795-8.646 8.646c-.317.317-.733.475-1.149.475s-.832-.158-1.149-.475l-4.646-4.646a1.126 1.126 0 0 1 1.591-1.591l4.205 4.205 8.205-8.205a1.126 1.126 0 0 1 1.591 1.591Z"
2107
+ />
2108
+ </svg>
2109
+ </span>
2110
+ </span>
1518
2111
  </span>
1519
2112
  </td>
1520
2113
  </tr>
@@ -1553,10 +2146,19 @@ wrapperTag: div
1553
2146
  >
1554
2147
  <span class="pf-v6-c-button__icon">
1555
2148
  <div class="pf-v6-c-table__toggle-icon">
1556
- <i
1557
- class="fas fa-angle-down"
2149
+ <svg
2150
+ class="pf-v6-svg"
2151
+ viewBox="0 0 20 20"
2152
+ fill="currentColor"
1558
2153
  aria-hidden="true"
1559
- ></i>
2154
+ role="img"
2155
+ width="1em"
2156
+ height="1em"
2157
+ >
2158
+ <path
2159
+ d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
2160
+ />
2161
+ </svg>
1560
2162
  </div>
1561
2163
  </span>
1562
2164
  </button>
@@ -1577,10 +2179,25 @@ wrapperTag: div
1577
2179
  >
1578
2180
  <span class="pf-v6-c-table__text">
1579
2181
  100%&nbsp;
1580
- <i
1581
- class="fas fa-check-circle pf-v6-u-success-color-200"
1582
- aria-hidden="true"
1583
- ></i>
2182
+ <span class="pf-v6-c-icon">
2183
+ <span
2184
+ class="pf-v6-c-icon__content pf-m-success"
2185
+ >
2186
+ <svg
2187
+ class="pf-v6-svg"
2188
+ viewBox="0 0 32 32"
2189
+ fill="currentColor"
2190
+ aria-hidden="true"
2191
+ role="img"
2192
+ width="1em"
2193
+ height="1em"
2194
+ >
2195
+ <path
2196
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm7.795 11.795-8.646 8.646c-.317.317-.733.475-1.149.475s-.832-.158-1.149-.475l-4.646-4.646a1.126 1.126 0 0 1 1.591-1.591l4.205 4.205 8.205-8.205a1.126 1.126 0 0 1 1.591 1.591Z"
2197
+ />
2198
+ </svg>
2199
+ </span>
2200
+ </span>
1584
2201
  </span>
1585
2202
  </td>
1586
2203
  </tr>
@@ -1619,10 +2236,19 @@ wrapperTag: div
1619
2236
  >
1620
2237
  <span class="pf-v6-c-button__icon">
1621
2238
  <div class="pf-v6-c-table__toggle-icon">
1622
- <i
1623
- class="fas fa-angle-down"
2239
+ <svg
2240
+ class="pf-v6-svg"
2241
+ viewBox="0 0 20 20"
2242
+ fill="currentColor"
1624
2243
  aria-hidden="true"
1625
- ></i>
2244
+ role="img"
2245
+ width="1em"
2246
+ height="1em"
2247
+ >
2248
+ <path
2249
+ d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
2250
+ />
2251
+ </svg>
1626
2252
  </div>
1627
2253
  </span>
1628
2254
  </button>
@@ -1643,10 +2269,25 @@ wrapperTag: div
1643
2269
  >
1644
2270
  <span class="pf-v6-c-table__text">
1645
2271
  91%&nbsp;
1646
- <i
1647
- class="fas fa-check-circle pf-v6-u-success-color-200"
1648
- aria-hidden="true"
1649
- ></i>
2272
+ <span class="pf-v6-c-icon">
2273
+ <span
2274
+ class="pf-v6-c-icon__content pf-m-success"
2275
+ >
2276
+ <svg
2277
+ class="pf-v6-svg"
2278
+ viewBox="0 0 32 32"
2279
+ fill="currentColor"
2280
+ aria-hidden="true"
2281
+ role="img"
2282
+ width="1em"
2283
+ height="1em"
2284
+ >
2285
+ <path
2286
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm7.795 11.795-8.646 8.646c-.317.317-.733.475-1.149.475s-.832-.158-1.149-.475l-4.646-4.646a1.126 1.126 0 0 1 1.591-1.591l4.205 4.205 8.205-8.205a1.126 1.126 0 0 1 1.591 1.591Z"
2287
+ />
2288
+ </svg>
2289
+ </span>
2290
+ </span>
1650
2291
  </span>
1651
2292
  </td>
1652
2293
  </tr>
@@ -1678,10 +2319,23 @@ wrapperTag: div
1678
2319
  <div class="pf-v6-l-grid__item">
1679
2320
  <div class="pf-v6-l-flex pf-m-space-items-sm">
1680
2321
  <div class="pf-v6-l-flex__item">
1681
- <i
1682
- class="fas fa-exclamation-circle pf-v6-u-danger-color-100"
1683
- aria-hidden="true"
1684
- ></i>
2322
+ <span class="pf-v6-c-icon">
2323
+ <span class="pf-v6-c-icon__content pf-m-danger">
2324
+ <svg
2325
+ class="pf-v6-svg"
2326
+ viewBox="0 0 32 32"
2327
+ fill="currentColor"
2328
+ aria-hidden="true"
2329
+ role="img"
2330
+ width="1em"
2331
+ height="1em"
2332
+ >
2333
+ <path
2334
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm-1.5 8a1.5 1.5 0 1 1 3 0v7a1.5 1.5 0 1 1-3 0V9ZM16 25.001a2 2 0 1 1-.001-3.999A2 2 0 0 1 16 25.001Z"
2335
+ />
2336
+ </svg>
2337
+ </span>
2338
+ </span>
1685
2339
  </div>
1686
2340
  <div class="pf-v6-l-flex pf-m-column pf-m-space-items-none">
1687
2341
  <div class="pf-v6-l-flex__item">
@@ -1696,10 +2350,23 @@ wrapperTag: div
1696
2350
  <div class="pf-v6-l-grid__item">
1697
2351
  <div class="pf-v6-l-flex pf-m-space-items-sm">
1698
2352
  <div class="pf-v6-l-flex__item">
1699
- <i
1700
- class="fas fa-check-circle pf-v6-u-success-color-100"
1701
- aria-hidden="true"
1702
- ></i>
2353
+ <span class="pf-v6-c-icon">
2354
+ <span class="pf-v6-c-icon__content pf-m-success">
2355
+ <svg
2356
+ class="pf-v6-svg"
2357
+ viewBox="0 0 32 32"
2358
+ fill="currentColor"
2359
+ aria-hidden="true"
2360
+ role="img"
2361
+ width="1em"
2362
+ height="1em"
2363
+ >
2364
+ <path
2365
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm7.795 11.795-8.646 8.646c-.317.317-.733.475-1.149.475s-.832-.158-1.149-.475l-4.646-4.646a1.126 1.126 0 0 1 1.591-1.591l4.205 4.205 8.205-8.205a1.126 1.126 0 0 1 1.591 1.591Z"
2366
+ />
2367
+ </svg>
2368
+ </span>
2369
+ </span>
1703
2370
  </div>
1704
2371
  <div class="pf-v6-l-flex pf-m-column pf-m-space-items-none">
1705
2372
  <div class="pf-v6-l-flex__item">
@@ -1779,7 +2446,19 @@ wrapperTag: div
1779
2446
  </div>
1780
2447
  </div>
1781
2448
  <span class="pf-v6-c-notification-drawer__group-toggle-icon">
1782
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2449
+ <svg
2450
+ class="pf-v6-svg"
2451
+ viewBox="0 0 20 20"
2452
+ fill="currentColor"
2453
+ aria-hidden="true"
2454
+ role="img"
2455
+ width="1em"
2456
+ height="1em"
2457
+ >
2458
+ <path
2459
+ d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
2460
+ />
2461
+ </svg>
1783
2462
  </span>
1784
2463
  </button>
1785
2464
  <ul class="pf-v6-c-notification-drawer__list" role="list">
@@ -1789,7 +2468,19 @@ wrapperTag: div
1789
2468
  >
1790
2469
  <div class="pf-v6-c-notification-drawer__list-item-header">
1791
2470
  <span class="pf-v6-c-notification-drawer__list-item-header-icon">
1792
- <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
2471
+ <svg
2472
+ class="pf-v6-svg"
2473
+ viewBox="0 0 32 32"
2474
+ fill="currentColor"
2475
+ aria-hidden="true"
2476
+ role="img"
2477
+ width="1em"
2478
+ height="1em"
2479
+ >
2480
+ <path
2481
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm-1.5 8a1.5 1.5 0 1 1 3 0v7a1.5 1.5 0 1 1-3 0V9ZM16 25.001a2 2 0 1 1-.001-3.999A2 2 0 0 1 16 25.001Z"
2482
+ />
2483
+ </svg>
1793
2484
  </span>
1794
2485
  <h2 class="pf-v6-c-notification-drawer__list-item-header-title">
1795
2486
  <span class="pf-v6-screen-reader">Danger notification:</span>
@@ -1806,7 +2497,19 @@ wrapperTag: div
1806
2497
  >
1807
2498
  <div class="pf-v6-c-notification-drawer__list-item-header">
1808
2499
  <span class="pf-v6-c-notification-drawer__list-item-header-icon">
1809
- <i class="fas fa-exclamation-triangle" aria-hidden="true"></i>
2500
+ <svg
2501
+ class="pf-v6-svg"
2502
+ viewBox="0 0 32 32"
2503
+ fill="currentColor"
2504
+ aria-hidden="true"
2505
+ role="img"
2506
+ width="1em"
2507
+ height="1em"
2508
+ >
2509
+ <path
2510
+ d="m31.874 28.514-15.011-27a1.001 1.001 0 0 0-1.748 0l-15.011 27A1 1 0 0 0 .978 30H31a1 1 0 0 0 .874-1.486ZM14.5 12a1.5 1.5 0 0 1 3 0v5a1.5 1.5 0 0 1-3 0v-5ZM16 26.001a2 2 0 1 1-.001-3.999A2 2 0 0 1 16 26.001Z"
2511
+ />
2512
+ </svg>
1810
2513
  </span>
1811
2514
  <h2 class="pf-v6-c-notification-drawer__list-item-header-title">
1812
2515
  <span class="pf-v6-screen-reader">Warning notification:</span>
@@ -1939,7 +2642,19 @@ wrapperTag: div
1939
2642
  <span class="pf-v6-c-menu-toggle__text">Filter</span>
1940
2643
  <span class="pf-v6-c-menu-toggle__controls">
1941
2644
  <span class="pf-v6-c-menu-toggle__toggle-icon">
1942
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
2645
+ <svg
2646
+ class="pf-v6-svg"
2647
+ viewBox="0 0 20 20"
2648
+ fill="currentColor"
2649
+ aria-hidden="true"
2650
+ role="img"
2651
+ width="1em"
2652
+ height="1em"
2653
+ >
2654
+ <path
2655
+ d="M18.92 5.62C18.77 5.25 18.4 5 18 5H2a1.003 1.003 0 0 0-.71 1.71l7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65c.29-.29.37-.72.22-1.09Z"
2656
+ />
2657
+ </svg>
1943
2658
  </span>
1944
2659
  </span>
1945
2660
  </button>
@@ -1951,7 +2666,19 @@ wrapperTag: div
1951
2666
  <div class="pf-v6-l-flex pf-m-space-items-sm">
1952
2667
  <span class="pf-v6-c-icon pf-m-inline">
1953
2668
  <span class="pf-v6-c-icon__content pf-m-danger">
1954
- <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
2669
+ <svg
2670
+ class="pf-v6-svg"
2671
+ viewBox="0 0 32 32"
2672
+ fill="currentColor"
2673
+ aria-hidden="true"
2674
+ role="img"
2675
+ width="1em"
2676
+ height="1em"
2677
+ >
2678
+ <path
2679
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm-1.5 8a1.5 1.5 0 1 1 3 0v7a1.5 1.5 0 1 1-3 0V9ZM16 25.001a2 2 0 1 1-.001-3.999A2 2 0 0 1 16 25.001Z"
2680
+ />
2681
+ </svg>
1955
2682
  </span>
1956
2683
  </span>
1957
2684
  <a hfer="#">25 incidents detected</a>
@@ -2022,7 +2749,19 @@ wrapperTag: div
2022
2749
  >
2023
2750
  <span class="pf-v6-c-button__icon pf-m-start">
2024
2751
  <span class="pf-v6-c-card__header-toggle-icon">
2025
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2752
+ <svg
2753
+ class="pf-v6-svg"
2754
+ viewBox="0 0 20 20"
2755
+ fill="currentColor"
2756
+ aria-hidden="true"
2757
+ role="img"
2758
+ width="1em"
2759
+ height="1em"
2760
+ >
2761
+ <path
2762
+ d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
2763
+ />
2764
+ </svg>
2026
2765
  </span>
2027
2766
  </span>
2028
2767
  </button>
@@ -2135,7 +2874,19 @@ wrapperTag: div
2135
2874
  >
2136
2875
  <span class="pf-v6-c-button__icon pf-m-start">
2137
2876
  <span class="pf-v6-c-card__header-toggle-icon">
2138
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2877
+ <svg
2878
+ class="pf-v6-svg"
2879
+ viewBox="0 0 20 20"
2880
+ fill="currentColor"
2881
+ aria-hidden="true"
2882
+ role="img"
2883
+ width="1em"
2884
+ height="1em"
2885
+ >
2886
+ <path
2887
+ d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
2888
+ />
2889
+ </svg>
2139
2890
  </span>
2140
2891
  </span>
2141
2892
  </button>
@@ -2165,7 +2916,19 @@ wrapperTag: div
2165
2916
  >
2166
2917
  <span class="pf-v6-c-button__icon pf-m-start">
2167
2918
  <span class="pf-v6-c-card__header-toggle-icon">
2168
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2919
+ <svg
2920
+ class="pf-v6-svg"
2921
+ viewBox="0 0 20 20"
2922
+ fill="currentColor"
2923
+ aria-hidden="true"
2924
+ role="img"
2925
+ width="1em"
2926
+ height="1em"
2927
+ >
2928
+ <path
2929
+ d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
2930
+ />
2931
+ </svg>
2169
2932
  </span>
2170
2933
  </span>
2171
2934
  </button>
@@ -2210,7 +2973,19 @@ wrapperTag: div
2210
2973
  >
2211
2974
  <span class="pf-v6-c-button__icon pf-m-start">
2212
2975
  <span class="pf-v6-c-card__header-toggle-icon">
2213
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2976
+ <svg
2977
+ class="pf-v6-svg"
2978
+ viewBox="0 0 20 20"
2979
+ fill="currentColor"
2980
+ aria-hidden="true"
2981
+ role="img"
2982
+ width="1em"
2983
+ height="1em"
2984
+ >
2985
+ <path
2986
+ d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
2987
+ />
2988
+ </svg>
2214
2989
  </span>
2215
2990
  </span>
2216
2991
  </button>
@@ -2320,7 +3095,19 @@ wrapperTag: div
2320
3095
  >
2321
3096
  <span class="pf-v6-c-button__icon pf-m-start">
2322
3097
  <span class="pf-v6-c-card__header-toggle-icon">
2323
- <i class="fas fa-angle-right" aria-hidden="true"></i>
3098
+ <svg
3099
+ class="pf-v6-svg"
3100
+ viewBox="0 0 20 20"
3101
+ fill="currentColor"
3102
+ aria-hidden="true"
3103
+ role="img"
3104
+ width="1em"
3105
+ height="1em"
3106
+ >
3107
+ <path
3108
+ d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
3109
+ />
3110
+ </svg>
2324
3111
  </span>
2325
3112
  </span>
2326
3113
  </button>
@@ -2347,7 +3134,19 @@ wrapperTag: div
2347
3134
  >
2348
3135
  <span class="pf-v6-c-button__icon pf-m-start">
2349
3136
  <span class="pf-v6-c-card__header-toggle-icon">
2350
- <i class="fas fa-angle-right" aria-hidden="true"></i>
3137
+ <svg
3138
+ class="pf-v6-svg"
3139
+ viewBox="0 0 20 20"
3140
+ fill="currentColor"
3141
+ aria-hidden="true"
3142
+ role="img"
3143
+ width="1em"
3144
+ height="1em"
3145
+ >
3146
+ <path
3147
+ d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
3148
+ />
3149
+ </svg>
2351
3150
  </span>
2352
3151
  </span>
2353
3152
  </button>
@@ -2387,7 +3186,19 @@ wrapperTag: div
2387
3186
  >
2388
3187
  <span class="pf-v6-c-accordion__toggle-text">CPU 1</span>
2389
3188
  <span class="pf-v6-c-accordion__toggle-icon">
2390
- <i class="fas fa-angle-right" aria-hidden="true"></i>
3189
+ <svg
3190
+ class="pf-v6-svg"
3191
+ viewBox="0 0 20 20"
3192
+ fill="currentColor"
3193
+ aria-hidden="true"
3194
+ role="img"
3195
+ width="1em"
3196
+ height="1em"
3197
+ >
3198
+ <path
3199
+ d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
3200
+ />
3201
+ </svg>
2391
3202
  </span>
2392
3203
  </button>
2393
3204
  </h3>
@@ -2483,7 +3294,19 @@ wrapperTag: div
2483
3294
  >
2484
3295
  <span class="pf-v6-c-accordion__toggle-text">CPU 2</span>
2485
3296
  <span class="pf-v6-c-accordion__toggle-icon">
2486
- <i class="fas fa-angle-right" aria-hidden="true"></i>
3297
+ <svg
3298
+ class="pf-v6-svg"
3299
+ viewBox="0 0 20 20"
3300
+ fill="currentColor"
3301
+ aria-hidden="true"
3302
+ role="img"
3303
+ width="1em"
3304
+ height="1em"
3305
+ >
3306
+ <path
3307
+ d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
3308
+ />
3309
+ </svg>
2487
3310
  </span>
2488
3311
  </button>
2489
3312
  </h3>
@@ -2577,7 +3400,19 @@ wrapperTag: div
2577
3400
  >
2578
3401
  <span class="pf-v6-c-accordion__toggle-text">CPU 3</span>
2579
3402
  <span class="pf-v6-c-accordion__toggle-icon">
2580
- <i class="fas fa-angle-right" aria-hidden="true"></i>
3403
+ <svg
3404
+ class="pf-v6-svg"
3405
+ viewBox="0 0 20 20"
3406
+ fill="currentColor"
3407
+ aria-hidden="true"
3408
+ role="img"
3409
+ width="1em"
3410
+ height="1em"
3411
+ >
3412
+ <path
3413
+ d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
3414
+ />
3415
+ </svg>
2581
3416
  </span>
2582
3417
  </button>
2583
3418
  </h3>
@@ -2700,7 +3535,19 @@ wrapperTag: div
2700
3535
  <span class="pf-v6-c-menu-toggle__text">Filter</span>
2701
3536
  <span class="pf-v6-c-menu-toggle__controls">
2702
3537
  <span class="pf-v6-c-menu-toggle__toggle-icon">
2703
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
3538
+ <svg
3539
+ class="pf-v6-svg"
3540
+ viewBox="0 0 20 20"
3541
+ fill="currentColor"
3542
+ aria-hidden="true"
3543
+ role="img"
3544
+ width="1em"
3545
+ height="1em"
3546
+ >
3547
+ <path
3548
+ d="M18.92 5.62C18.77 5.25 18.4 5 18 5H2a1.003 1.003 0 0 0-.71 1.71l7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65c.29-.29.37-.72.22-1.09Z"
3549
+ />
3550
+ </svg>
2704
3551
  </span>
2705
3552
  </span>
2706
3553
  </button>
@@ -2777,7 +3624,19 @@ wrapperTag: div
2777
3624
  <span class="pf-v6-c-menu-toggle__text">Most recent</span>
2778
3625
  <span class="pf-v6-c-menu-toggle__controls">
2779
3626
  <span class="pf-v6-c-menu-toggle__toggle-icon">
2780
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
3627
+ <svg
3628
+ class="pf-v6-svg"
3629
+ viewBox="0 0 20 20"
3630
+ fill="currentColor"
3631
+ aria-hidden="true"
3632
+ role="img"
3633
+ width="1em"
3634
+ height="1em"
3635
+ >
3636
+ <path
3637
+ d="M18.92 5.62C18.77 5.25 18.4 5 18 5H2a1.003 1.003 0 0 0-.71 1.71l7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65c.29-.29.37-.72.22-1.09Z"
3638
+ />
3639
+ </svg>
2781
3640
  </span>
2782
3641
  </span>
2783
3642
  </button>
@@ -2900,7 +3759,19 @@ wrapperTag: div
2900
3759
  <span class="pf-v6-c-menu-toggle__text">Status</span>
2901
3760
  <span class="pf-v6-c-menu-toggle__controls">
2902
3761
  <span class="pf-v6-c-menu-toggle__toggle-icon">
2903
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
3762
+ <svg
3763
+ class="pf-v6-svg"
3764
+ viewBox="0 0 20 20"
3765
+ fill="currentColor"
3766
+ aria-hidden="true"
3767
+ role="img"
3768
+ width="1em"
3769
+ height="1em"
3770
+ >
3771
+ <path
3772
+ d="M18.92 5.62C18.77 5.25 18.4 5 18 5H2a1.003 1.003 0 0 0-.71 1.71l7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65c.29-.29.37-.72.22-1.09Z"
3773
+ />
3774
+ </svg>
2904
3775
  </span>
2905
3776
  </span>
2906
3777
  </button>
@@ -2923,7 +3794,19 @@ wrapperTag: div
2923
3794
  <div class="pf-v6-l-flex__item">
2924
3795
  <span class="pf-v6-c-icon pf-m-inline">
2925
3796
  <span class="pf-v6-c-icon__content pf-m-danger">
2926
- <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
3797
+ <svg
3798
+ class="pf-v6-svg"
3799
+ viewBox="0 0 32 32"
3800
+ fill="currentColor"
3801
+ aria-hidden="true"
3802
+ role="img"
3803
+ width="1em"
3804
+ height="1em"
3805
+ >
3806
+ <path
3807
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm-1.5 8a1.5 1.5 0 1 1 3 0v7a1.5 1.5 0 1 1-3 0V9ZM16 25.001a2 2 0 1 1-.001-3.999A2 2 0 0 1 16 25.001Z"
3808
+ />
3809
+ </svg>
2927
3810
  </span>
2928
3811
  </span>
2929
3812
  </div>
@@ -2952,7 +3835,19 @@ wrapperTag: div
2952
3835
  <div class="pf-v6-l-flex__item">
2953
3836
  <span class="pf-v6-c-icon pf-m-inline">
2954
3837
  <span class="pf-v6-c-icon__content pf-m-success">
2955
- <i class="fas fa-check-circle" aria-hidden="true"></i>
3838
+ <svg
3839
+ class="pf-v6-svg"
3840
+ viewBox="0 0 32 32"
3841
+ fill="currentColor"
3842
+ aria-hidden="true"
3843
+ role="img"
3844
+ width="1em"
3845
+ height="1em"
3846
+ >
3847
+ <path
3848
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm7.795 11.795-8.646 8.646c-.317.317-.733.475-1.149.475s-.832-.158-1.149-.475l-4.646-4.646a1.126 1.126 0 0 1 1.591-1.591l4.205 4.205 8.205-8.205a1.126 1.126 0 0 1 1.591 1.591Z"
3849
+ />
3850
+ </svg>
2956
3851
  </span>
2957
3852
  </span>
2958
3853
  </div>
@@ -3019,7 +3914,19 @@ wrapperTag: div
3019
3914
  <div class="pf-v6-l-flex__item">
3020
3915
  <span class="pf-v6-c-icon pf-m-inline">
3021
3916
  <span class="pf-v6-c-icon__content pf-m-success">
3022
- <i class="fas fa-check-circle" aria-hidden="true"></i>
3917
+ <svg
3918
+ class="pf-v6-svg"
3919
+ viewBox="0 0 32 32"
3920
+ fill="currentColor"
3921
+ aria-hidden="true"
3922
+ role="img"
3923
+ width="1em"
3924
+ height="1em"
3925
+ >
3926
+ <path
3927
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm7.795 11.795-8.646 8.646c-.317.317-.733.475-1.149.475s-.832-.158-1.149-.475l-4.646-4.646a1.126 1.126 0 0 1 1.591-1.591l4.205 4.205 8.205-8.205a1.126 1.126 0 0 1 1.591 1.591Z"
3928
+ />
3929
+ </svg>
3023
3930
  </span>
3024
3931
  </span>
3025
3932
  </div>