@patternfly/patternfly 6.5.0-prerelease.6 → 6.5.0-prerelease.61

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 (392) hide show
  1. package/README.md +1 -1
  2. package/assets/fontawesome/_variables.scss +2 -1
  3. package/assets/images/RHAiExperienceIcon.svg +27 -0
  4. package/assets/images/RHAutomationsLogo.svg +96 -0
  5. package/assets/images/RHServerStackIcon.svg +16 -0
  6. package/assets/images/compass--hero-bg.png +0 -0
  7. package/assets/images/compass--rh-wallpaper-dark.png +0 -0
  8. package/assets/images/compass--rh-wallpaper-light.png +0 -0
  9. package/assets/images/compass--wallpaper-dark.jpg +0 -0
  10. package/assets/images/compass--wallpaper-dark.png +0 -0
  11. package/assets/images/compass--wallpaper-light.jpg +0 -0
  12. package/assets/images/compass--wallpaper-light.png +0 -0
  13. package/assets/images/glass-brand-dark.jpg +0 -0
  14. package/assets/images/glass-brand-dark.png +0 -0
  15. package/assets/images/glass-brand-light.jpg +0 -0
  16. package/assets/images/glass-brand-light.png +0 -0
  17. package/base/normalize.scss +7 -0
  18. package/base/patternfly-common.css +50 -0
  19. package/base/patternfly-common.scss +59 -0
  20. package/base/patternfly-svg-icons.css +11 -0
  21. package/base/patternfly-svg-icons.scss +14 -0
  22. package/base/patternfly-variables.css +926 -513
  23. package/base/patternfly-variables.scss +46 -4
  24. package/base/tokens/tokens-dark.scss +56 -8
  25. package/base/tokens/tokens-default.scss +69 -14
  26. package/base/tokens/tokens-glass-dark.scss +26 -0
  27. package/base/tokens/tokens-glass.scss +22 -0
  28. package/base/tokens/tokens-local.scss +17 -0
  29. package/base/tokens/tokens-palette.scss +3 -1
  30. package/base/tokens/tokens-redhat-dark.scss +21 -0
  31. package/base/tokens/tokens-redhat-glass-dark.scss +40 -0
  32. package/base/tokens/tokens-redhat-glass.scss +30 -0
  33. package/base/tokens/tokens-redhat-highcontrast-dark.scss +50 -0
  34. package/base/tokens/tokens-redhat-highcontrast.scss +128 -0
  35. package/base/tokens/tokens-redhat.scss +15 -0
  36. package/components/AboutModalBox/about-modal-box.css +36 -26
  37. package/components/Accordion/accordion.css +27 -14
  38. package/components/Accordion/accordion.scss +12 -2
  39. package/components/ActionList/action-list.css +2 -0
  40. package/components/ActionList/action-list.scss +2 -0
  41. package/components/Alert/alert.css +7 -5
  42. package/components/Alert/alert.scss +2 -1
  43. package/components/Avatar/avatar.css +12 -4
  44. package/components/BackgroundImage/background-image.css +6 -3
  45. package/components/Banner/banner.css +8 -6
  46. package/components/Brand/brand.css +3 -1
  47. package/components/Breadcrumb/breadcrumb.css +4 -3
  48. package/components/Button/button.css +121 -30
  49. package/components/Button/button.scss +131 -26
  50. package/components/CalendarMonth/calendar-month.css +4 -3
  51. package/components/Card/card.css +51 -13
  52. package/components/Card/card.scss +61 -8
  53. package/components/ClipboardCopy/clipboard-copy.css +7 -6
  54. package/components/ClipboardCopy/clipboard-copy.scss +3 -3
  55. package/components/CodeEditor/code-editor.css +1 -1
  56. package/components/CodeEditor/code-editor.scss +1 -1
  57. package/components/Compass/compass.css +320 -0
  58. package/components/Compass/compass.scss +350 -0
  59. package/components/DataList/data-list.css +34 -23
  60. package/components/DataList/data-list.scss +8 -2
  61. package/components/DescriptionList/description-list-order.scss +5 -1
  62. package/components/DescriptionList/description-list.css +7 -5
  63. package/components/DescriptionList/description-list.scss +5 -1
  64. package/components/Divider/divider.css +7 -5
  65. package/components/Drawer/drawer.css +222 -73
  66. package/components/Drawer/drawer.scss +191 -26
  67. package/components/DualListSelector/dual-list-selector.css +18 -12
  68. package/components/DualListSelector/dual-list-selector.scss +1 -1
  69. package/components/ExpandableSection/expandable-section.css +21 -16
  70. package/components/ExpandableSection/expandable-section.scss +6 -3
  71. package/components/Form/form.css +2 -2
  72. package/components/Form/form.scss +2 -2
  73. package/components/FormControl/form-control.css +3 -3
  74. package/components/FormControl/form-control.scss +3 -3
  75. package/components/Hero/hero.css +74 -0
  76. package/components/Hero/hero.scss +86 -0
  77. package/components/JumpLinks/jump-links.css +16 -5
  78. package/components/JumpLinks/jump-links.scss +17 -3
  79. package/components/Label/label-group.css +2 -2
  80. package/components/Label/label-group.scss +2 -2
  81. package/components/Label/label.css +4 -3
  82. package/components/Login/login.css +58 -40
  83. package/components/Login/login.scss +7 -3
  84. package/components/Masthead/masthead.css +112 -16
  85. package/components/Masthead/masthead.scss +112 -1
  86. package/components/Menu/menu.css +23 -14
  87. package/components/MenuToggle/menu-toggle.css +26 -3
  88. package/components/MenuToggle/menu-toggle.scss +30 -3
  89. package/components/ModalBox/modal-box.css +9 -7
  90. package/components/ModalBox/modal-box.scss +2 -2
  91. package/components/Nav/nav.css +82 -11
  92. package/components/Nav/nav.scss +85 -5
  93. package/components/NotificationDrawer/notification-drawer.css +19 -9
  94. package/components/NotificationDrawer/notification-drawer.scss +14 -5
  95. package/components/Page/page.css +214 -29
  96. package/components/Page/page.scss +228 -13
  97. package/components/Pagination/pagination.scss +5 -1
  98. package/components/Panel/panel.css +14 -0
  99. package/components/Panel/panel.scss +18 -0
  100. package/components/Progress/progress.css +3 -1
  101. package/components/Progress/progress.scss +3 -1
  102. package/components/ProgressStepper/progress-stepper.scss +5 -1
  103. package/components/Sidebar/sidebar.css +1 -1
  104. package/components/Sidebar/sidebar.scss +7 -3
  105. package/components/Skeleton/skeleton.css +16 -15
  106. package/components/Slider/slider.css +32 -18
  107. package/components/Switch/switch.css +4 -2
  108. package/components/Switch/switch.scss +1 -1
  109. package/components/Table/table-grid.css +28 -36
  110. package/components/Table/table-grid.scss +4 -4
  111. package/components/Table/table-tree-view.css +4 -2
  112. package/components/Table/table.css +45 -36
  113. package/components/Table/table.scss +15 -11
  114. package/components/Tabs/tabs.css +51 -33
  115. package/components/Tabs/tabs.scss +54 -26
  116. package/components/TextInputGroup/text-input-group.css +2 -2
  117. package/components/TextInputGroup/text-input-group.scss +2 -2
  118. package/components/ToggleGroup/toggle-group.css +34 -17
  119. package/components/ToggleGroup/toggle-group.scss +36 -20
  120. package/components/Toolbar/toolbar.css +47 -15
  121. package/components/Toolbar/toolbar.scss +34 -6
  122. package/components/TreeView/tree-view.css +45 -14
  123. package/components/TreeView/tree-view.scss +32 -1
  124. package/components/Wizard/wizard.css +41 -19
  125. package/components/Wizard/wizard.scss +26 -6
  126. package/components/_index.css +2047 -721
  127. package/components/_index.scss +3 -1
  128. package/docs/components/AboutModalBox/examples/AboutModalBox.md +13 -1
  129. package/docs/components/Accordion/examples/Accordion.md +392 -30
  130. package/docs/components/ActionList/examples/ActionList.md +143 -11
  131. package/docs/components/Alert/examples/Alert.md +678 -54
  132. package/docs/components/Avatar/examples/Avatar.md +4 -4
  133. package/docs/components/BackToTop/examples/BackToTop.md +13 -1
  134. package/docs/components/Banner/examples/Banner.md +65 -5
  135. package/docs/components/Brand/examples/Brand.md +2 -2
  136. package/docs/components/Breadcrumb/examples/Breadcrumb.md +299 -24
  137. package/docs/components/Button/examples/Button.md +2362 -163
  138. package/docs/components/CalendarMonth/examples/CalendarMonth.md +104 -8
  139. package/docs/components/Card/examples/Card.md +207 -4
  140. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +286 -22
  141. package/docs/components/CodeBlock/examples/CodeBlock.md +104 -8
  142. package/docs/components/CodeEditor/examples/CodeEditor.md +195 -15
  143. package/docs/components/Compass/examples/Compass.css +17 -0
  144. package/docs/components/Compass/examples/Compass.md +119 -0
  145. package/docs/components/DataList/examples/DataList.md +406 -205
  146. package/docs/components/DatePicker/examples/DatePicker.md +78 -6
  147. package/docs/components/DescriptionList/examples/DescriptionList.md +327 -27
  148. package/docs/components/Divider/examples/Divider.md +2 -2
  149. package/docs/components/DragDrop/examples/DragDrop.css +1 -1
  150. package/docs/components/Drawer/examples/Drawer.md +355 -35
  151. package/docs/components/DualListSelector/examples/DualListSelector.md +1013 -143
  152. package/docs/components/ExpandableSection/examples/ExpandableSection.md +91 -7
  153. package/docs/components/Form/examples/Form.md +78 -6
  154. package/docs/components/Hero/examples/Hero.md +25 -0
  155. package/docs/components/Icon/examples/Icon.md +92 -8
  156. package/docs/components/InlineEdit/examples/InlineEdit.md +312 -24
  157. package/docs/components/InputGroup/examples/InputGroup.md +27 -3
  158. package/docs/components/JumpLinks/examples/JumpLinks.md +54 -6
  159. package/docs/components/Label/examples/Label.md +2834 -218
  160. package/docs/components/Login/examples/Login.md +26 -2
  161. package/docs/components/Masthead/examples/masthead.md +80 -1
  162. package/docs/components/Menu/examples/Menu.md +1458 -116
  163. package/docs/components/MenuToggle/examples/MenuToggle.md +14 -5
  164. package/docs/components/ModalBox/examples/ModalBox.md +289 -25
  165. package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +156 -12
  166. package/docs/components/Nav/examples/Navigation.md +798 -58
  167. package/docs/components/NotificationDrawer/examples/NotificationDrawer.md +598 -46
  168. package/docs/components/OverflowMenu/examples/overflow-menu.md +78 -6
  169. package/docs/components/Page/examples/Page.md +72 -11
  170. package/docs/components/Pagination/examples/Pagination.md +627 -64
  171. package/docs/components/Panel/examples/Panel.md +12 -0
  172. package/docs/components/Popover/examples/Popover.md +286 -22
  173. package/docs/components/Progress/examples/Progress.md +91 -7
  174. package/docs/components/ProgressStepper/examples/ProgressStepper.md +275 -23
  175. package/docs/components/Sidebar/examples/Sidebar.md +1 -1
  176. package/docs/components/Slider/examples/Slider.md +52 -4
  177. package/docs/components/Table/examples/Table.md +876 -70
  178. package/docs/components/Tabs/examples/Tabs.md +5908 -457
  179. package/docs/components/TextInputGroup/examples/TextInputGroup.md +600 -48
  180. package/docs/components/ToggleGroup/examples/toggle-group.md +195 -15
  181. package/docs/components/Toolbar/examples/Toolbar.md +490 -44
  182. package/docs/components/TreeView/examples/TreeView.md +1390 -130
  183. package/docs/components/Wizard/examples/Wizard.md +815 -72
  184. package/docs/demos/AboutModal/examples/AboutModal.md +98 -47
  185. package/docs/demos/Alert/examples/Alert.md +359 -146
  186. package/docs/demos/BackToTop/examples/BackToTop.md +98 -47
  187. package/docs/demos/Banner/examples/Banner.md +170 -92
  188. package/docs/demos/Button/examples/Button.md +13 -1
  189. package/docs/demos/Card/examples/Card.md +963 -128
  190. package/docs/demos/CardView/examples/CardView.md +435 -252
  191. package/docs/demos/Compass/examples/Compass.md +5930 -0
  192. package/docs/demos/Dashboard/examples/Dashboard.md +648 -164
  193. package/docs/demos/DataList/examples/DataList.md +730 -225
  194. package/docs/demos/DescriptionList/examples/DescriptionList.md +279 -141
  195. package/docs/demos/Drawer/examples/Drawer.md +421 -235
  196. package/docs/demos/Form/examples/BasicForms.md +273 -21
  197. package/docs/demos/JumpLinks/examples/JumpLinks.md +518 -287
  198. package/docs/demos/Masthead/examples/Masthead.md +787 -451
  199. package/docs/demos/Modal/examples/Modal.md +588 -285
  200. package/docs/demos/Nav/examples/Nav.md +2913 -493
  201. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +1273 -310
  202. package/docs/demos/Page/examples/Page.md +1236 -689
  203. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +13 -1
  204. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +52 -4
  205. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +978 -385
  206. package/docs/demos/Skeleton/examples/Skeleton.md +85 -46
  207. package/docs/demos/Table/examples/Table.md +4531 -838
  208. package/docs/demos/Tabs/examples/Tabs.md +653 -293
  209. package/docs/demos/Toolbar/examples/Toolbar.md +584 -136
  210. package/docs/demos/Wizard/examples/Wizard.md +1165 -472
  211. package/docs/layouts/Bullseye/examples/Bullseye.css +2 -2
  212. package/docs/layouts/Bullseye/examples/Bullseye.md +2 -1
  213. package/docs/layouts/Flex/examples/Flex.css +3 -3
  214. package/docs/layouts/Flex/examples/Flex.md +3 -2
  215. package/docs/layouts/Gallery/examples/Gallery.css +2 -2
  216. package/docs/layouts/Gallery/examples/Gallery.md +4 -3
  217. package/docs/layouts/Grid/examples/Grid.css +1 -1
  218. package/docs/layouts/Grid/examples/Grid.md +6 -5
  219. package/docs/layouts/Level/examples/Level.css +3 -3
  220. package/docs/layouts/Level/examples/Level.md +2 -1
  221. package/docs/layouts/Split/examples/Split.css +1 -1
  222. package/docs/layouts/Split/examples/Split.md +2 -1
  223. package/docs/layouts/Stack/examples/Stack.css +3 -3
  224. package/docs/layouts/Stack/examples/Stack.md +2 -1
  225. package/docs/utilities/Accessibility/examples/Accessibility.md +3 -2
  226. package/docs/utilities/Alignment/examples/Alignment.css +4 -4
  227. package/docs/utilities/Alignment/examples/Alignment.md +3 -2
  228. package/docs/utilities/BackgroundColor/examples/BackgroundColor.md +5 -4
  229. package/docs/utilities/BoxShadow/examples/box-shadow.css +2 -2
  230. package/docs/utilities/BoxShadow/examples/box-shadow.md +2 -1
  231. package/docs/utilities/Display/examples/Display.css +1 -1
  232. package/docs/utilities/Display/examples/Display.md +3 -2
  233. package/docs/utilities/Flex/examples/Flex.css +7 -7
  234. package/docs/utilities/Flex/examples/Flex.md +3 -2
  235. package/docs/utilities/Float/examples/Float.css +2 -2
  236. package/docs/utilities/Float/examples/Float.md +3 -2
  237. package/docs/utilities/Sizing/examples/Sizing.md +8 -7
  238. package/docs/utilities/Spacing/examples/Spacing.css +2 -2
  239. package/docs/utilities/Spacing/examples/Spacing.md +3 -2
  240. package/docs/utilities/Text/examples/Text.md +5 -4
  241. package/icons/PfIcons/add-circle-o.svg +4 -0
  242. package/icons/PfIcons/ansible-tower.svg +4 -0
  243. package/icons/PfIcons/applications.svg +4 -0
  244. package/icons/PfIcons/arrow.svg +4 -0
  245. package/icons/PfIcons/asleep.svg +4 -0
  246. package/icons/PfIcons/attention-bell.svg +4 -0
  247. package/icons/PfIcons/automation.svg +4 -0
  248. package/icons/PfIcons/bell.svg +4 -0
  249. package/icons/PfIcons/blueprint.svg +4 -0
  250. package/icons/PfIcons/build.svg +4 -0
  251. package/icons/PfIcons/builder-image.svg +4 -0
  252. package/icons/PfIcons/bundle.svg +4 -0
  253. package/icons/PfIcons/catalog.svg +4 -0
  254. package/icons/PfIcons/chat.svg +4 -0
  255. package/icons/PfIcons/close.svg +4 -0
  256. package/icons/PfIcons/cloud-security.svg +4 -0
  257. package/icons/PfIcons/cloud-tenant.svg +4 -0
  258. package/icons/PfIcons/cluster.svg +4 -0
  259. package/icons/PfIcons/connected.svg +4 -0
  260. package/icons/PfIcons/container-node.svg +4 -0
  261. package/icons/PfIcons/cpu.svg +4 -0
  262. package/icons/PfIcons/critical-risk.svg +4 -0
  263. package/icons/PfIcons/data-processor.svg +4 -0
  264. package/icons/PfIcons/data-sink.svg +4 -0
  265. package/icons/PfIcons/data-source.svg +4 -0
  266. package/icons/PfIcons/degraded.svg +4 -0
  267. package/icons/PfIcons/disconnected.svg +4 -0
  268. package/icons/PfIcons/domain.svg +4 -0
  269. package/icons/PfIcons/edit.svg +4 -0
  270. package/icons/PfIcons/enhancement.svg +4 -0
  271. package/icons/PfIcons/enterprise.svg +4 -0
  272. package/icons/PfIcons/equalizer.svg +4 -0
  273. package/icons/PfIcons/error-circle-o.svg +4 -0
  274. package/icons/PfIcons/export.svg +4 -0
  275. package/icons/PfIcons/filter.svg +4 -0
  276. package/icons/PfIcons/flavor.svg +4 -0
  277. package/icons/PfIcons/folder-close.svg +4 -0
  278. package/icons/PfIcons/folder-open.svg +4 -0
  279. package/icons/PfIcons/globe-route.svg +4 -0
  280. package/icons/PfIcons/help.svg +4 -0
  281. package/icons/PfIcons/history.svg +4 -0
  282. package/icons/PfIcons/home.svg +4 -0
  283. package/icons/PfIcons/import.svg +4 -0
  284. package/icons/PfIcons/in-progress.svg +4 -0
  285. package/icons/PfIcons/info.svg +4 -0
  286. package/icons/PfIcons/infrastructure.svg +4 -0
  287. package/icons/PfIcons/integration.svg +4 -0
  288. package/icons/PfIcons/key.svg +4 -0
  289. package/icons/PfIcons/locked.svg +4 -0
  290. package/icons/PfIcons/maintenance.svg +4 -0
  291. package/icons/PfIcons/memory.svg +4 -0
  292. package/icons/PfIcons/messages.svg +4 -0
  293. package/icons/PfIcons/middleware.svg +4 -0
  294. package/icons/PfIcons/migration.svg +4 -0
  295. package/icons/PfIcons/module.svg +4 -0
  296. package/icons/PfIcons/monitoring.svg +4 -0
  297. package/icons/PfIcons/multicluster.svg +4 -0
  298. package/icons/PfIcons/namespaces.svg +4 -0
  299. package/icons/PfIcons/network.svg +4 -0
  300. package/icons/PfIcons/new-process.svg +4 -0
  301. package/icons/PfIcons/not-started.svg +4 -0
  302. package/icons/PfIcons/off.svg +4 -0
  303. package/icons/PfIcons/ok.svg +4 -0
  304. package/icons/PfIcons/on-running.svg +4 -0
  305. package/icons/PfIcons/on.svg +4 -0
  306. package/icons/PfIcons/open-drawer-right.svg +4 -0
  307. package/icons/PfIcons/openshift.svg +4 -0
  308. package/icons/PfIcons/openstack.svg +4 -0
  309. package/icons/PfIcons/optimize.svg +4 -0
  310. package/icons/PfIcons/orders.svg +4 -0
  311. package/icons/PfIcons/os-image.svg +4 -0
  312. package/icons/PfIcons/package.svg +4 -0
  313. package/icons/PfIcons/panel-close.svg +4 -0
  314. package/icons/PfIcons/panel-open.svg +4 -0
  315. package/icons/PfIcons/paused.svg +4 -0
  316. package/icons/PfIcons/pending.svg +4 -0
  317. package/icons/PfIcons/pficon-dragdrop.svg +4 -0
  318. package/icons/PfIcons/pficon-history.svg +4 -0
  319. package/icons/PfIcons/pficon-network-range.svg +4 -0
  320. package/icons/PfIcons/pficon-satellite.svg +4 -0
  321. package/icons/PfIcons/pficon-sort-common-asc.svg +4 -0
  322. package/icons/PfIcons/pficon-sort-common-desc.svg +4 -0
  323. package/icons/PfIcons/pficon-template.svg +4 -0
  324. package/icons/PfIcons/pficon-vcenter.svg +4 -0
  325. package/icons/PfIcons/plugged.svg +4 -0
  326. package/icons/PfIcons/port.svg +4 -0
  327. package/icons/PfIcons/print.svg +4 -0
  328. package/icons/PfIcons/private.svg +4 -0
  329. package/icons/PfIcons/process-automation.svg +4 -0
  330. package/icons/PfIcons/project.svg +4 -0
  331. package/icons/PfIcons/rebalance.svg +4 -0
  332. package/icons/PfIcons/rebooting.svg +4 -0
  333. package/icons/PfIcons/regions.svg +4 -0
  334. package/icons/PfIcons/registry.svg +4 -0
  335. package/icons/PfIcons/remove2.svg +4 -0
  336. package/icons/PfIcons/replicator.svg +4 -0
  337. package/icons/PfIcons/repository.svg +4 -0
  338. package/icons/PfIcons/resource-pool.svg +4 -0
  339. package/icons/PfIcons/resources-almost-empty.svg +4 -0
  340. package/icons/PfIcons/resources-almost-full.svg +4 -0
  341. package/icons/PfIcons/resources-empty.svg +4 -0
  342. package/icons/PfIcons/resources-full.svg +4 -0
  343. package/icons/PfIcons/running.svg +4 -0
  344. package/icons/PfIcons/save.svg +4 -0
  345. package/icons/PfIcons/screen.svg +4 -0
  346. package/icons/PfIcons/security.svg +4 -0
  347. package/icons/PfIcons/server-group.svg +4 -0
  348. package/icons/PfIcons/server.svg +4 -0
  349. package/icons/PfIcons/service-catalog.svg +4 -0
  350. package/icons/PfIcons/service.svg +4 -0
  351. package/icons/PfIcons/services.svg +4 -0
  352. package/icons/PfIcons/severity-critical.svg +4 -0
  353. package/icons/PfIcons/severity-important.svg +4 -0
  354. package/icons/PfIcons/severity-minor.svg +4 -0
  355. package/icons/PfIcons/severity-moderate.svg +4 -0
  356. package/icons/PfIcons/severity-none.svg +4 -0
  357. package/icons/PfIcons/severity-undefined.svg +4 -0
  358. package/icons/PfIcons/spinner.svg +4 -0
  359. package/icons/PfIcons/spinner2.svg +4 -0
  360. package/icons/PfIcons/storage-domain.svg +4 -0
  361. package/icons/PfIcons/task.svg +4 -0
  362. package/icons/PfIcons/tenant.svg +4 -0
  363. package/icons/PfIcons/thumb-tack.svg +4 -0
  364. package/icons/PfIcons/topology.svg +4 -0
  365. package/icons/PfIcons/treeview.svg +4 -0
  366. package/icons/PfIcons/trend-down.svg +4 -0
  367. package/icons/PfIcons/trend-up.svg +4 -0
  368. package/icons/PfIcons/unknown.svg +4 -0
  369. package/icons/PfIcons/unlocked.svg +4 -0
  370. package/icons/PfIcons/unplugged.svg +4 -0
  371. package/icons/PfIcons/user.svg +4 -0
  372. package/icons/PfIcons/users.svg +4 -0
  373. package/icons/PfIcons/virtual-machine.svg +4 -0
  374. package/icons/PfIcons/volume.svg +4 -0
  375. package/icons/PfIcons/warning-triangle.svg +4 -0
  376. package/icons/PfIcons/zone.svg +4 -0
  377. package/layouts/Flex/flex.scss +83 -19
  378. package/layouts/Gallery/gallery.css +6 -2
  379. package/layouts/_index.css +6 -2
  380. package/package.json +34 -16
  381. package/patternfly-base-no-globals.css +965 -491
  382. package/patternfly-base.css +972 -491
  383. package/patternfly-charts.css +3 -3
  384. package/patternfly-no-globals.css +2908 -1087
  385. package/patternfly.css +2915 -1087
  386. package/patternfly.min.css +1 -1
  387. package/patternfly.min.css.map +1 -1
  388. package/patternfly.scss +27 -0
  389. package/sass-utilities/functions.scss +32 -25
  390. package/sass-utilities/mixins.scss +36 -20
  391. package/sass-utilities/namespaces-components.scss +6 -0
  392. 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>
@@ -122,7 +134,19 @@ wrapperTag: div
122
134
  >
123
135
  <span class="pf-v6-c-button__icon pf-m-start">
124
136
  <span class="pf-v6-c-card__header-toggle-icon">
125
- <i class="fas fa-angle-right" aria-hidden="true"></i>
137
+ <svg
138
+ class="pf-v6-svg"
139
+ viewBox="0 0 20 20"
140
+ fill="currentColor"
141
+ aria-hidden="true"
142
+ role="img"
143
+ width="1em"
144
+ height="1em"
145
+ >
146
+ <path
147
+ 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"
148
+ />
149
+ </svg>
126
150
  </span>
127
151
  </span>
128
152
  </button>
@@ -184,7 +208,19 @@ wrapperTag: div
184
208
  <a class="pf-v6-c-button pf-m-inline pf-m-link" href="#">
185
209
  <span class="pf-v6-c-button__text">View all set up cluster steps</span>
186
210
  <span class="pf-v6-c-button__icon pf-m-end">
187
- <i class="fas fa-arrow-right" aria-hidden="true"></i>
211
+ <svg
212
+ class="pf-v6-svg"
213
+ viewBox="0 0 448 512"
214
+ fill="currentColor"
215
+ aria-hidden="true"
216
+ role="img"
217
+ width="1em"
218
+ height="1em"
219
+ >
220
+ <path
221
+ 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"
222
+ />
223
+ </svg>
188
224
  </span>
189
225
  </a>
190
226
  </div>
@@ -215,7 +251,19 @@ wrapperTag: div
215
251
  <a class="pf-v6-c-button pf-m-inline pf-m-link" href="#">
216
252
  <span class="pf-v6-c-button__text">View all guided tours</span>
217
253
  <span class="pf-v6-c-button__icon pf-m-end">
218
- <i class="fas fa-arrow-right" aria-hidden="true"></i>
254
+ <svg
255
+ class="pf-v6-svg"
256
+ viewBox="0 0 448 512"
257
+ fill="currentColor"
258
+ aria-hidden="true"
259
+ role="img"
260
+ width="1em"
261
+ height="1em"
262
+ >
263
+ <path
264
+ 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"
265
+ />
266
+ </svg>
219
267
  </span>
220
268
  </a>
221
269
  </div>
@@ -249,7 +297,19 @@ wrapperTag: div
249
297
  <a class="pf-v6-c-button pf-m-inline pf-m-link" href="#">
250
298
  <span class="pf-v6-c-button__text">View all quick starts</span>
251
299
  <span class="pf-v6-c-button__icon pf-m-end">
252
- <i class="fas fa-arrow-right" aria-hidden="true"></i>
300
+ <svg
301
+ class="pf-v6-svg"
302
+ viewBox="0 0 448 512"
303
+ fill="currentColor"
304
+ aria-hidden="true"
305
+ role="img"
306
+ width="1em"
307
+ height="1em"
308
+ >
309
+ <path
310
+ 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"
311
+ />
312
+ </svg>
253
313
  </span>
254
314
  </a>
255
315
  </div>
@@ -275,7 +335,19 @@ wrapperTag: div
275
335
  <li>
276
336
  <a href="#">
277
337
  OpenShift 4.5: Top Tasks
278
- <i class="fas fa-external-link-alt" aria-hidden="true"></i>
338
+ <svg
339
+ class="pf-v6-svg"
340
+ viewBox="0 0 32 32"
341
+ fill="currentColor"
342
+ aria-hidden="true"
343
+ role="img"
344
+ width="1em"
345
+ height="1em"
346
+ >
347
+ <path
348
+ 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"
349
+ />
350
+ </svg>
279
351
  </a>
280
352
  </li>
281
353
  <li>
@@ -286,7 +358,19 @@ wrapperTag: div
286
358
  <a class="pf-v6-c-button pf-m-inline pf-m-link" href="#">
287
359
  <span class="pf-v6-c-button__text">View all learning resources</span>
288
360
  <span class="pf-v6-c-button__icon pf-m-end">
289
- <i class="fas fa-arrow-right" aria-hidden="true"></i>
361
+ <svg
362
+ class="pf-v6-svg"
363
+ viewBox="0 0 448 512"
364
+ fill="currentColor"
365
+ aria-hidden="true"
366
+ role="img"
367
+ width="1em"
368
+ height="1em"
369
+ >
370
+ <path
371
+ 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"
372
+ />
373
+ </svg>
290
374
  </span>
291
375
  </a>
292
376
  </div>
@@ -446,7 +530,19 @@ wrapperTag: div
446
530
  <div class="pf-v6-c-card__body">
447
531
  <span class="pf-v6-c-icon pf-m-inline">
448
532
  <span class="pf-v6-c-icon__content pf-m-success">
449
- <i class="fas fa-check-circle" aria-hidden="true"></i>
533
+ <svg
534
+ class="pf-v6-svg"
535
+ viewBox="0 0 32 32"
536
+ fill="currentColor"
537
+ aria-hidden="true"
538
+ role="img"
539
+ width="1em"
540
+ height="1em"
541
+ >
542
+ <path
543
+ 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"
544
+ />
545
+ </svg>
450
546
  </span>
451
547
  </span>
452
548
  </div>
@@ -458,7 +554,19 @@ wrapperTag: div
458
554
  <div class="pf-v6-c-card__body">
459
555
  <span class="pf-v6-c-icon pf-m-inline">
460
556
  <span class="pf-v6-c-icon__content pf-m-warning">
461
- <i class="fas fa-exclamation-triangle" 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="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"
568
+ />
569
+ </svg>
462
570
  </span>
463
571
  </span>
464
572
  </div>
@@ -470,7 +578,19 @@ wrapperTag: div
470
578
  <div class="pf-v6-c-card__body">
471
579
  <span class="pf-v6-c-icon pf-m-inline">
472
580
  <span class="pf-v6-c-icon__content pf-m-danger">
473
- <i class="fas fa-exclamation-circle" 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="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"
592
+ />
593
+ </svg>
474
594
  </span>
475
595
  </span>
476
596
  </div>
@@ -489,7 +609,19 @@ wrapperTag: div
489
609
  <div class="pf-v6-l-flex__item">
490
610
  <span class="pf-v6-c-icon pf-m-inline">
491
611
  <span class="pf-v6-c-icon__content pf-m-success">
492
- <i class="fas fa-check-circle" aria-hidden="true"></i>
612
+ <svg
613
+ class="pf-v6-svg"
614
+ viewBox="0 0 32 32"
615
+ fill="currentColor"
616
+ aria-hidden="true"
617
+ role="img"
618
+ width="1em"
619
+ height="1em"
620
+ >
621
+ <path
622
+ 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"
623
+ />
624
+ </svg>
493
625
  </span>
494
626
  </span>
495
627
  </div>
@@ -502,7 +634,19 @@ wrapperTag: div
502
634
  <div class="pf-v6-l-flex__item">
503
635
  <span class="pf-v6-c-icon pf-m-inline">
504
636
  <span class="pf-v6-c-icon__content pf-m-warning">
505
- <i class="fas fa-exclamation-triangle" aria-hidden="true"></i>
637
+ <svg
638
+ class="pf-v6-svg"
639
+ viewBox="0 0 32 32"
640
+ fill="currentColor"
641
+ aria-hidden="true"
642
+ role="img"
643
+ width="1em"
644
+ height="1em"
645
+ >
646
+ <path
647
+ 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"
648
+ />
649
+ </svg>
506
650
  </span>
507
651
  </span>
508
652
  </div>
@@ -523,7 +667,19 @@ wrapperTag: div
523
667
  <div class="pf-v6-l-flex__item">
524
668
  <span class="pf-v6-c-icon pf-m-inline">
525
669
  <span class="pf-v6-c-icon__content pf-m-success">
526
- <i class="fas fa-check-circle" aria-hidden="true"></i>
670
+ <svg
671
+ class="pf-v6-svg"
672
+ viewBox="0 0 32 32"
673
+ fill="currentColor"
674
+ aria-hidden="true"
675
+ role="img"
676
+ width="1em"
677
+ height="1em"
678
+ >
679
+ <path
680
+ 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"
681
+ />
682
+ </svg>
527
683
  </span>
528
684
  </span>
529
685
  </div>
@@ -536,7 +692,19 @@ wrapperTag: div
536
692
  <div class="pf-v6-l-flex__item">
537
693
  <span class="pf-v6-c-icon pf-m-inline">
538
694
  <span class="pf-v6-c-icon__content pf-m-danger">
539
- <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
695
+ <svg
696
+ class="pf-v6-svg"
697
+ viewBox="0 0 32 32"
698
+ fill="currentColor"
699
+ aria-hidden="true"
700
+ role="img"
701
+ width="1em"
702
+ height="1em"
703
+ >
704
+ <path
705
+ 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"
706
+ />
707
+ </svg>
540
708
  </span>
541
709
  </span>
542
710
  </div>
@@ -557,7 +725,19 @@ wrapperTag: div
557
725
  <div class="pf-v6-l-flex__item">
558
726
  <span class="pf-v6-c-icon pf-m-inline">
559
727
  <span class="pf-v6-c-icon__content pf-m-warning">
560
- <i class="fas fa-exclamation-triangle" aria-hidden="true"></i>
728
+ <svg
729
+ class="pf-v6-svg"
730
+ viewBox="0 0 32 32"
731
+ fill="currentColor"
732
+ aria-hidden="true"
733
+ role="img"
734
+ width="1em"
735
+ height="1em"
736
+ >
737
+ <path
738
+ 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"
739
+ />
740
+ </svg>
561
741
  </span>
562
742
  </span>
563
743
  </div>
@@ -570,7 +750,19 @@ wrapperTag: div
570
750
  <div class="pf-v6-l-flex__item">
571
751
  <span class="pf-v6-c-icon pf-m-inline">
572
752
  <span class="pf-v6-c-icon__content pf-m-danger">
573
- <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
753
+ <svg
754
+ class="pf-v6-svg"
755
+ viewBox="0 0 32 32"
756
+ fill="currentColor"
757
+ aria-hidden="true"
758
+ role="img"
759
+ width="1em"
760
+ height="1em"
761
+ >
762
+ <path
763
+ 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"
764
+ />
765
+ </svg>
574
766
  </span>
575
767
  </span>
576
768
  </div>
@@ -602,7 +794,19 @@ wrapperTag: div
602
794
  <div class="pf-v6-l-flex__item">
603
795
  <span class="pf-v6-c-icon pf-m-inline">
604
796
  <span class="pf-v6-c-icon__content pf-m-danger">
605
- <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
797
+ <svg
798
+ class="pf-v6-svg"
799
+ viewBox="0 0 32 32"
800
+ fill="currentColor"
801
+ aria-hidden="true"
802
+ role="img"
803
+ width="1em"
804
+ height="1em"
805
+ >
806
+ <path
807
+ 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"
808
+ />
809
+ </svg>
606
810
  </span>
607
811
  </span>
608
812
  </div>
@@ -615,7 +819,19 @@ wrapperTag: div
615
819
  <div class="pf-v6-l-flex__item">
616
820
  <span class="pf-v6-c-icon pf-m-inline">
617
821
  <span class="pf-v6-c-icon__content pf-m-warning">
618
- <i class="fas fa-exclamation-triangle" aria-hidden="true"></i>
822
+ <svg
823
+ class="pf-v6-svg"
824
+ viewBox="0 0 32 32"
825
+ fill="currentColor"
826
+ aria-hidden="true"
827
+ role="img"
828
+ width="1em"
829
+ height="1em"
830
+ >
831
+ <path
832
+ 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"
833
+ />
834
+ </svg>
619
835
  </span>
620
836
  </span>
621
837
  </div>
@@ -639,7 +855,19 @@ wrapperTag: div
639
855
  <div class="pf-v6-l-flex__item">
640
856
  <span class="pf-v6-c-icon pf-m-inline">
641
857
  <span class="pf-v6-c-icon__content pf-m-success">
642
- <i class="fas fa-check-circle" aria-hidden="true"></i>
858
+ <svg
859
+ class="pf-v6-svg"
860
+ viewBox="0 0 32 32"
861
+ fill="currentColor"
862
+ aria-hidden="true"
863
+ role="img"
864
+ width="1em"
865
+ height="1em"
866
+ >
867
+ <path
868
+ 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"
869
+ />
870
+ </svg>
643
871
  </span>
644
872
  </span>
645
873
  </div>
@@ -652,7 +880,19 @@ wrapperTag: div
652
880
  <div class="pf-v6-l-flex__item">
653
881
  <span class="pf-v6-c-icon pf-m-inline">
654
882
  <span class="pf-v6-c-icon__content pf-m-warning">
655
- <i class="fas fa-exclamation-triangle" aria-hidden="true"></i>
883
+ <svg
884
+ class="pf-v6-svg"
885
+ viewBox="0 0 32 32"
886
+ fill="currentColor"
887
+ aria-hidden="true"
888
+ role="img"
889
+ width="1em"
890
+ height="1em"
891
+ >
892
+ <path
893
+ 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"
894
+ />
895
+ </svg>
656
896
  </span>
657
897
  </span>
658
898
  </div>
@@ -676,7 +916,19 @@ wrapperTag: div
676
916
  <div class="pf-v6-l-flex__item">
677
917
  <span class="pf-v6-c-icon pf-m-inline">
678
918
  <span class="pf-v6-c-icon__content pf-m-warning">
679
- <i class="fas fa-exclamation-triangle" aria-hidden="true"></i>
919
+ <svg
920
+ class="pf-v6-svg"
921
+ viewBox="0 0 32 32"
922
+ fill="currentColor"
923
+ aria-hidden="true"
924
+ role="img"
925
+ width="1em"
926
+ height="1em"
927
+ >
928
+ <path
929
+ 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"
930
+ />
931
+ </svg>
680
932
  </span>
681
933
  </span>
682
934
  </div>
@@ -689,7 +941,19 @@ wrapperTag: div
689
941
  <div class="pf-v6-l-flex__item">
690
942
  <span class="pf-v6-c-icon pf-m-inline">
691
943
  <span class="pf-v6-c-icon__content pf-m-danger">
692
- <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
944
+ <svg
945
+ class="pf-v6-svg"
946
+ viewBox="0 0 32 32"
947
+ fill="currentColor"
948
+ aria-hidden="true"
949
+ role="img"
950
+ width="1em"
951
+ height="1em"
952
+ >
953
+ <path
954
+ 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"
955
+ />
956
+ </svg>
693
957
  </span>
694
958
  </span>
695
959
  </div>
@@ -717,13 +981,23 @@ wrapperTag: div
717
981
  </div>
718
982
  </div>
719
983
  <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">
984
+ <div
985
+ class="pf-v6-c-tabs pf-m-fill"
986
+ aria-label="Status, tabbed card example"
987
+ role="region"
988
+ id="status-tabs"
989
+ >
990
+ <ul
991
+ class="pf-v6-c-tabs__list"
992
+ role="tablist"
993
+ aria-label="Status, tabbed card example"
994
+ >
722
995
  <li class="pf-v6-c-tabs__item pf-m-current" role="presentation">
723
996
  <button
724
997
  type="button"
725
998
  class="pf-v6-c-tabs__link"
726
999
  role="tab"
1000
+ aria-selected="true"
727
1001
  id="status-tabs-object-1-link"
728
1002
  >
729
1003
  <span class="pf-v6-c-tabs__item-text">Object 1</span>
@@ -734,6 +1008,7 @@ wrapperTag: div
734
1008
  type="button"
735
1009
  class="pf-v6-c-tabs__link"
736
1010
  role="tab"
1011
+ aria-selected="false"
737
1012
  id="status-tabs-object-2-link"
738
1013
  >
739
1014
  <span class="pf-v6-c-tabs__item-text">Object 2</span>
@@ -744,6 +1019,7 @@ wrapperTag: div
744
1019
  type="button"
745
1020
  class="pf-v6-c-tabs__link"
746
1021
  role="tab"
1022
+ aria-selected="false"
747
1023
  id="status-tabs-object-3-link"
748
1024
  >
749
1025
  <span class="pf-v6-c-tabs__item-text">Object 3</span>
@@ -806,7 +1082,19 @@ wrapperTag: div
806
1082
  <div class="pf-v6-l-flex__item">
807
1083
  <span class="pf-v6-c-icon pf-m-inline">
808
1084
  <span class="pf-v6-c-icon__content pf-m-success">
809
- <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
1085
+ <svg
1086
+ class="pf-v6-svg"
1087
+ viewBox="0 0 32 32"
1088
+ fill="currentColor"
1089
+ aria-hidden="true"
1090
+ role="img"
1091
+ width="1em"
1092
+ height="1em"
1093
+ >
1094
+ <path
1095
+ 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"
1096
+ />
1097
+ </svg>
810
1098
  </span>
811
1099
  </span>
812
1100
  </div>
@@ -867,7 +1155,19 @@ wrapperTag: div
867
1155
  <div class="pf-v6-l-flex__item">
868
1156
  <span class="pf-v6-c-icon pf-m-inline">
869
1157
  <span class="pf-v6-c-icon__content pf-m-success">
870
- <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
1158
+ <svg
1159
+ class="pf-v6-svg"
1160
+ viewBox="0 0 32 32"
1161
+ fill="currentColor"
1162
+ aria-hidden="true"
1163
+ role="img"
1164
+ width="1em"
1165
+ height="1em"
1166
+ >
1167
+ <path
1168
+ 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"
1169
+ />
1170
+ </svg>
871
1171
  </span>
872
1172
  </span>
873
1173
  </div>
@@ -926,10 +1226,23 @@ wrapperTag: div
926
1226
  <div class="pf-v6-l-grid__item">
927
1227
  <div class="pf-v6-l-flex pf-m-space-items-sm">
928
1228
  <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>
1229
+ <span class="pf-v6-c-icon">
1230
+ <span class="pf-v6-c-icon__content pf-m-success">
1231
+ <svg
1232
+ class="pf-v6-svg"
1233
+ viewBox="0 0 32 32"
1234
+ fill="currentColor"
1235
+ aria-hidden="true"
1236
+ role="img"
1237
+ width="1em"
1238
+ height="1em"
1239
+ >
1240
+ <path
1241
+ 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"
1242
+ />
1243
+ </svg>
1244
+ </span>
1245
+ </span>
933
1246
  </div>
934
1247
  <div class="pf-v6-l-flex__item">
935
1248
  <span>Cluster</span>
@@ -939,10 +1252,23 @@ wrapperTag: div
939
1252
  <div class="pf-v6-l-grid__item">
940
1253
  <div class="pf-v6-l-flex pf-m-space-items-sm">
941
1254
  <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>
1255
+ <span class="pf-v6-c-icon">
1256
+ <span class="pf-v6-c-icon__content pf-m-danger">
1257
+ <svg
1258
+ class="pf-v6-svg"
1259
+ viewBox="0 0 32 32"
1260
+ fill="currentColor"
1261
+ aria-hidden="true"
1262
+ role="img"
1263
+ width="1em"
1264
+ height="1em"
1265
+ >
1266
+ <path
1267
+ 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"
1268
+ />
1269
+ </svg>
1270
+ </span>
1271
+ </span>
946
1272
  </div>
947
1273
  <div class="pf-v6-l-flex__item">
948
1274
  <span class="popover-parent">
@@ -954,10 +1280,23 @@ wrapperTag: div
954
1280
  <div class="pf-v6-l-grid__item">
955
1281
  <div class="pf-v6-l-flex pf-m-space-items-sm">
956
1282
  <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>
1283
+ <span class="pf-v6-c-icon">
1284
+ <span class="pf-v6-c-icon__content pf-m-danger">
1285
+ <svg
1286
+ class="pf-v6-svg"
1287
+ viewBox="0 0 32 32"
1288
+ fill="currentColor"
1289
+ aria-hidden="true"
1290
+ role="img"
1291
+ width="1em"
1292
+ height="1em"
1293
+ >
1294
+ <path
1295
+ 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"
1296
+ />
1297
+ </svg>
1298
+ </span>
1299
+ </span>
961
1300
  </div>
962
1301
  <div class="pf-v6-l-flex pf-m-column pf-m-space-items-none">
963
1302
  <div class="pf-v6-l-flex__item">
@@ -972,10 +1311,23 @@ wrapperTag: div
972
1311
  <div class="pf-v6-l-grid__item">
973
1312
  <div class="pf-v6-l-flex pf-m-space-items-sm">
974
1313
  <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>
1314
+ <span class="pf-v6-c-icon">
1315
+ <span class="pf-v6-c-icon__content pf-m-success">
1316
+ <svg
1317
+ class="pf-v6-svg"
1318
+ viewBox="0 0 32 32"
1319
+ fill="currentColor"
1320
+ aria-hidden="true"
1321
+ role="img"
1322
+ width="1em"
1323
+ height="1em"
1324
+ >
1325
+ <path
1326
+ 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"
1327
+ />
1328
+ </svg>
1329
+ </span>
1330
+ </span>
979
1331
  </div>
980
1332
  <div class="pf-v6-l-flex pf-m-column pf-m-space-items-none">
981
1333
  <div class="pf-v6-l-flex__item">
@@ -1055,7 +1407,19 @@ wrapperTag: div
1055
1407
  </div>
1056
1408
  </div>
1057
1409
  <span class="pf-v6-c-notification-drawer__group-toggle-icon">
1058
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1410
+ <svg
1411
+ class="pf-v6-svg"
1412
+ viewBox="0 0 20 20"
1413
+ fill="currentColor"
1414
+ aria-hidden="true"
1415
+ role="img"
1416
+ width="1em"
1417
+ height="1em"
1418
+ >
1419
+ <path
1420
+ 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"
1421
+ />
1422
+ </svg>
1059
1423
  </span>
1060
1424
  </button>
1061
1425
  <ul class="pf-v6-c-notification-drawer__list" role="list" hidden>
@@ -1065,7 +1429,19 @@ wrapperTag: div
1065
1429
  >
1066
1430
  <div class="pf-v6-c-notification-drawer__list-item-header">
1067
1431
  <span class="pf-v6-c-notification-drawer__list-item-header-icon">
1068
- <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
1432
+ <svg
1433
+ class="pf-v6-svg"
1434
+ viewBox="0 0 32 32"
1435
+ fill="currentColor"
1436
+ aria-hidden="true"
1437
+ role="img"
1438
+ width="1em"
1439
+ height="1em"
1440
+ >
1441
+ <path
1442
+ 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"
1443
+ />
1444
+ </svg>
1069
1445
  </span>
1070
1446
  <h2 class="pf-v6-c-notification-drawer__list-item-header-title">
1071
1447
  <span class="pf-v6-screen-reader">Danger notification:</span>
@@ -1082,7 +1458,19 @@ wrapperTag: div
1082
1458
  >
1083
1459
  <div class="pf-v6-c-notification-drawer__list-item-header">
1084
1460
  <span class="pf-v6-c-notification-drawer__list-item-header-icon">
1085
- <i class="fas fa-exclamation-triangle" aria-hidden="true"></i>
1461
+ <svg
1462
+ class="pf-v6-svg"
1463
+ viewBox="0 0 32 32"
1464
+ fill="currentColor"
1465
+ aria-hidden="true"
1466
+ role="img"
1467
+ width="1em"
1468
+ height="1em"
1469
+ >
1470
+ <path
1471
+ 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"
1472
+ />
1473
+ </svg>
1086
1474
  </span>
1087
1475
  <h2 class="pf-v6-c-notification-drawer__list-item-header-title">
1088
1476
  <span class="pf-v6-screen-reader">Warning notification:</span>
@@ -1115,10 +1503,23 @@ wrapperTag: div
1115
1503
  <div class="pf-v6-l-grid__item">
1116
1504
  <div class="pf-v6-l-flex pf-m-space-items-sm">
1117
1505
  <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>
1506
+ <span class="pf-v6-c-icon">
1507
+ <span class="pf-v6-c-icon__content pf-m-success">
1508
+ <svg
1509
+ class="pf-v6-svg"
1510
+ viewBox="0 0 32 32"
1511
+ fill="currentColor"
1512
+ aria-hidden="true"
1513
+ role="img"
1514
+ width="1em"
1515
+ height="1em"
1516
+ >
1517
+ <path
1518
+ 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"
1519
+ />
1520
+ </svg>
1521
+ </span>
1522
+ </span>
1122
1523
  </div>
1123
1524
  <div class="pf-v6-l-flex__item">
1124
1525
  <span>Cluster</span>
@@ -1128,10 +1529,23 @@ wrapperTag: div
1128
1529
  <div class="pf-v6-l-grid__item">
1129
1530
  <div class="pf-v6-l-flex pf-m-space-items-sm">
1130
1531
  <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>
1532
+ <span class="pf-v6-c-icon">
1533
+ <span class="pf-v6-c-icon__content pf-m-danger">
1534
+ <svg
1535
+ class="pf-v6-svg"
1536
+ viewBox="0 0 32 32"
1537
+ fill="currentColor"
1538
+ aria-hidden="true"
1539
+ role="img"
1540
+ width="1em"
1541
+ height="1em"
1542
+ >
1543
+ <path
1544
+ 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"
1545
+ />
1546
+ </svg>
1547
+ </span>
1548
+ </span>
1135
1549
  </div>
1136
1550
  <div class="pf-v6-l-flex__item">
1137
1551
  <span class="popover-parent">
@@ -1143,10 +1557,23 @@ wrapperTag: div
1143
1557
  <div class="pf-v6-l-grid__item">
1144
1558
  <div class="pf-v6-l-flex pf-m-space-items-sm">
1145
1559
  <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>
1560
+ <span class="pf-v6-c-icon">
1561
+ <span class="pf-v6-c-icon__content pf-m-danger">
1562
+ <svg
1563
+ class="pf-v6-svg"
1564
+ viewBox="0 0 32 32"
1565
+ fill="currentColor"
1566
+ aria-hidden="true"
1567
+ role="img"
1568
+ width="1em"
1569
+ height="1em"
1570
+ >
1571
+ <path
1572
+ 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"
1573
+ />
1574
+ </svg>
1575
+ </span>
1576
+ </span>
1150
1577
  </div>
1151
1578
  <div class="pf-v6-l-flex pf-m-column pf-m-space-items-none">
1152
1579
  <div class="pf-v6-l-flex__item">
@@ -1161,10 +1588,23 @@ wrapperTag: div
1161
1588
  <div class="pf-v6-l-grid__item">
1162
1589
  <div class="pf-v6-l-flex pf-m-space-items-sm">
1163
1590
  <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>
1591
+ <span class="pf-v6-c-icon">
1592
+ <span class="pf-v6-c-icon__content pf-m-success">
1593
+ <svg
1594
+ class="pf-v6-svg"
1595
+ viewBox="0 0 32 32"
1596
+ fill="currentColor"
1597
+ aria-hidden="true"
1598
+ role="img"
1599
+ width="1em"
1600
+ height="1em"
1601
+ >
1602
+ <path
1603
+ 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"
1604
+ />
1605
+ </svg>
1606
+ </span>
1607
+ </span>
1168
1608
  </div>
1169
1609
  <div class="pf-v6-l-flex pf-m-column pf-m-space-items-none">
1170
1610
  <div class="pf-v6-l-flex__item">
@@ -1244,7 +1684,19 @@ wrapperTag: div
1244
1684
  </div>
1245
1685
  </div>
1246
1686
  <span class="pf-v6-c-notification-drawer__group-toggle-icon">
1247
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1687
+ <svg
1688
+ class="pf-v6-svg"
1689
+ viewBox="0 0 20 20"
1690
+ fill="currentColor"
1691
+ aria-hidden="true"
1692
+ role="img"
1693
+ width="1em"
1694
+ height="1em"
1695
+ >
1696
+ <path
1697
+ 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"
1698
+ />
1699
+ </svg>
1248
1700
  </span>
1249
1701
  </button>
1250
1702
  <ul class="pf-v6-c-notification-drawer__list" role="list">
@@ -1254,7 +1706,19 @@ wrapperTag: div
1254
1706
  >
1255
1707
  <div class="pf-v6-c-notification-drawer__list-item-header">
1256
1708
  <span class="pf-v6-c-notification-drawer__list-item-header-icon">
1257
- <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
1709
+ <svg
1710
+ class="pf-v6-svg"
1711
+ viewBox="0 0 32 32"
1712
+ fill="currentColor"
1713
+ aria-hidden="true"
1714
+ role="img"
1715
+ width="1em"
1716
+ height="1em"
1717
+ >
1718
+ <path
1719
+ 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"
1720
+ />
1721
+ </svg>
1258
1722
  </span>
1259
1723
  <h2 class="pf-v6-c-notification-drawer__list-item-header-title">
1260
1724
  <span class="pf-v6-screen-reader">Danger notification:</span>
@@ -1271,7 +1735,19 @@ wrapperTag: div
1271
1735
  >
1272
1736
  <div class="pf-v6-c-notification-drawer__list-item-header">
1273
1737
  <span class="pf-v6-c-notification-drawer__list-item-header-icon">
1274
- <i class="fas fa-exclamation-triangle" aria-hidden="true"></i>
1738
+ <svg
1739
+ class="pf-v6-svg"
1740
+ viewBox="0 0 32 32"
1741
+ fill="currentColor"
1742
+ aria-hidden="true"
1743
+ role="img"
1744
+ width="1em"
1745
+ height="1em"
1746
+ >
1747
+ <path
1748
+ 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"
1749
+ />
1750
+ </svg>
1275
1751
  </span>
1276
1752
  <h2 class="pf-v6-c-notification-drawer__list-item-header-title">
1277
1753
  <span class="pf-v6-screen-reader">Warning notification:</span>
@@ -1304,10 +1780,23 @@ wrapperTag: div
1304
1780
  <div class="pf-v6-l-grid__item">
1305
1781
  <div class="pf-v6-l-flex pf-m-space-items-sm">
1306
1782
  <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>
1783
+ <span class="pf-v6-c-icon">
1784
+ <span class="pf-v6-c-icon__content pf-m-success">
1785
+ <svg
1786
+ class="pf-v6-svg"
1787
+ viewBox="0 0 32 32"
1788
+ fill="currentColor"
1789
+ aria-hidden="true"
1790
+ role="img"
1791
+ width="1em"
1792
+ height="1em"
1793
+ >
1794
+ <path
1795
+ 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"
1796
+ />
1797
+ </svg>
1798
+ </span>
1799
+ </span>
1311
1800
  </div>
1312
1801
  <div class="pf-v6-l-flex__item">
1313
1802
  <span>Cluster</span>
@@ -1317,10 +1806,23 @@ wrapperTag: div
1317
1806
  <div class="pf-v6-l-grid__item">
1318
1807
  <div class="pf-v6-l-flex pf-m-space-items-sm">
1319
1808
  <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>
1809
+ <span class="pf-v6-c-icon">
1810
+ <span class="pf-v6-c-icon__content pf-m-danger">
1811
+ <svg
1812
+ class="pf-v6-svg"
1813
+ viewBox="0 0 32 32"
1814
+ fill="currentColor"
1815
+ aria-hidden="true"
1816
+ role="img"
1817
+ width="1em"
1818
+ height="1em"
1819
+ >
1820
+ <path
1821
+ 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"
1822
+ />
1823
+ </svg>
1824
+ </span>
1825
+ </span>
1324
1826
  </div>
1325
1827
  <div class="pf-v6-l-flex__item">
1326
1828
  <span class="popover-parent">
@@ -1342,7 +1844,19 @@ wrapperTag: div
1342
1844
  aria-label="Close"
1343
1845
  >
1344
1846
  <span class="pf-v6-c-button__icon">
1345
- <i class="fas fa-times" aria-hidden="true"></i>
1847
+ <svg
1848
+ class="pf-v6-svg"
1849
+ viewBox="0 0 20 20"
1850
+ fill="currentColor"
1851
+ aria-hidden="true"
1852
+ role="img"
1853
+ width="1em"
1854
+ height="1em"
1855
+ >
1856
+ <path
1857
+ 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"
1858
+ />
1859
+ </svg>
1346
1860
  </span>
1347
1861
  </button>
1348
1862
  </div>
@@ -1403,10 +1917,19 @@ wrapperTag: div
1403
1917
  >
1404
1918
  <span class="pf-v6-c-button__icon">
1405
1919
  <div class="pf-v6-c-table__toggle-icon">
1406
- <i
1407
- class="fas fa-angle-down"
1920
+ <svg
1921
+ class="pf-v6-svg"
1922
+ viewBox="0 0 20 20"
1923
+ fill="currentColor"
1408
1924
  aria-hidden="true"
1409
- ></i>
1925
+ role="img"
1926
+ width="1em"
1927
+ height="1em"
1928
+ >
1929
+ <path
1930
+ 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"
1931
+ />
1932
+ </svg>
1410
1933
  </div>
1411
1934
  </span>
1412
1935
  </button>
@@ -1427,10 +1950,23 @@ wrapperTag: div
1427
1950
  >
1428
1951
  <span class="pf-v6-c-table__text">
1429
1952
  20%&nbsp;
1430
- <i
1431
- class="fas fa-exclamation-circle pf-v6-u-danger-color-200"
1432
- aria-hidden="true"
1433
- ></i>
1953
+ <span class="pf-v6-c-icon">
1954
+ <span class="pf-v6-c-icon__content pf-m-danger">
1955
+ <svg
1956
+ class="pf-v6-svg"
1957
+ viewBox="0 0 32 32"
1958
+ fill="currentColor"
1959
+ aria-hidden="true"
1960
+ role="img"
1961
+ width="1em"
1962
+ height="1em"
1963
+ >
1964
+ <path
1965
+ 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"
1966
+ />
1967
+ </svg>
1968
+ </span>
1969
+ </span>
1434
1970
  </span>
1435
1971
  </td>
1436
1972
  </tr>
@@ -1451,10 +1987,19 @@ wrapperTag: div
1451
1987
  aria-label="Inline danger alert"
1452
1988
  >
1453
1989
  <div class="pf-v6-c-alert__icon">
1454
- <i
1455
- class="fas fa-fw fa-exclamation-circle"
1990
+ <svg
1991
+ class="pf-v6-svg"
1992
+ viewBox="0 0 512 512"
1993
+ fill="currentColor"
1456
1994
  aria-hidden="true"
1457
- ></i>
1995
+ role="img"
1996
+ width="1em"
1997
+ height="1em"
1998
+ >
1999
+ <path
2000
+ 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"
2001
+ />
2002
+ </svg>
1458
2003
  </div>
1459
2004
  <p class="pf-v6-c-alert__title">
1460
2005
  <span
@@ -1485,10 +2030,19 @@ wrapperTag: div
1485
2030
  >
1486
2031
  <span class="pf-v6-c-button__icon">
1487
2032
  <div class="pf-v6-c-table__toggle-icon">
1488
- <i
1489
- class="fas fa-angle-down"
2033
+ <svg
2034
+ class="pf-v6-svg"
2035
+ viewBox="0 0 20 20"
2036
+ fill="currentColor"
1490
2037
  aria-hidden="true"
1491
- ></i>
2038
+ role="img"
2039
+ width="1em"
2040
+ height="1em"
2041
+ >
2042
+ <path
2043
+ 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"
2044
+ />
2045
+ </svg>
1492
2046
  </div>
1493
2047
  </span>
1494
2048
  </button>
@@ -1511,10 +2065,25 @@ wrapperTag: div
1511
2065
  >
1512
2066
  <span class="pf-v6-c-table__text">
1513
2067
  100%&nbsp;
1514
- <i
1515
- class="fas fa-check-circle pf-v6-u-success-color-200"
1516
- aria-hidden="true"
1517
- ></i>
2068
+ <span class="pf-v6-c-icon">
2069
+ <span
2070
+ class="pf-v6-c-icon__content pf-m-success"
2071
+ >
2072
+ <svg
2073
+ class="pf-v6-svg"
2074
+ viewBox="0 0 32 32"
2075
+ fill="currentColor"
2076
+ aria-hidden="true"
2077
+ role="img"
2078
+ width="1em"
2079
+ height="1em"
2080
+ >
2081
+ <path
2082
+ 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"
2083
+ />
2084
+ </svg>
2085
+ </span>
2086
+ </span>
1518
2087
  </span>
1519
2088
  </td>
1520
2089
  </tr>
@@ -1553,10 +2122,19 @@ wrapperTag: div
1553
2122
  >
1554
2123
  <span class="pf-v6-c-button__icon">
1555
2124
  <div class="pf-v6-c-table__toggle-icon">
1556
- <i
1557
- class="fas fa-angle-down"
2125
+ <svg
2126
+ class="pf-v6-svg"
2127
+ viewBox="0 0 20 20"
2128
+ fill="currentColor"
1558
2129
  aria-hidden="true"
1559
- ></i>
2130
+ role="img"
2131
+ width="1em"
2132
+ height="1em"
2133
+ >
2134
+ <path
2135
+ 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"
2136
+ />
2137
+ </svg>
1560
2138
  </div>
1561
2139
  </span>
1562
2140
  </button>
@@ -1577,10 +2155,25 @@ wrapperTag: div
1577
2155
  >
1578
2156
  <span class="pf-v6-c-table__text">
1579
2157
  100%&nbsp;
1580
- <i
1581
- class="fas fa-check-circle pf-v6-u-success-color-200"
1582
- aria-hidden="true"
1583
- ></i>
2158
+ <span class="pf-v6-c-icon">
2159
+ <span
2160
+ class="pf-v6-c-icon__content pf-m-success"
2161
+ >
2162
+ <svg
2163
+ class="pf-v6-svg"
2164
+ viewBox="0 0 32 32"
2165
+ fill="currentColor"
2166
+ aria-hidden="true"
2167
+ role="img"
2168
+ width="1em"
2169
+ height="1em"
2170
+ >
2171
+ <path
2172
+ 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"
2173
+ />
2174
+ </svg>
2175
+ </span>
2176
+ </span>
1584
2177
  </span>
1585
2178
  </td>
1586
2179
  </tr>
@@ -1619,10 +2212,19 @@ wrapperTag: div
1619
2212
  >
1620
2213
  <span class="pf-v6-c-button__icon">
1621
2214
  <div class="pf-v6-c-table__toggle-icon">
1622
- <i
1623
- class="fas fa-angle-down"
2215
+ <svg
2216
+ class="pf-v6-svg"
2217
+ viewBox="0 0 20 20"
2218
+ fill="currentColor"
1624
2219
  aria-hidden="true"
1625
- ></i>
2220
+ role="img"
2221
+ width="1em"
2222
+ height="1em"
2223
+ >
2224
+ <path
2225
+ 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"
2226
+ />
2227
+ </svg>
1626
2228
  </div>
1627
2229
  </span>
1628
2230
  </button>
@@ -1643,10 +2245,25 @@ wrapperTag: div
1643
2245
  >
1644
2246
  <span class="pf-v6-c-table__text">
1645
2247
  91%&nbsp;
1646
- <i
1647
- class="fas fa-check-circle pf-v6-u-success-color-200"
1648
- aria-hidden="true"
1649
- ></i>
2248
+ <span class="pf-v6-c-icon">
2249
+ <span
2250
+ class="pf-v6-c-icon__content pf-m-success"
2251
+ >
2252
+ <svg
2253
+ class="pf-v6-svg"
2254
+ viewBox="0 0 32 32"
2255
+ fill="currentColor"
2256
+ aria-hidden="true"
2257
+ role="img"
2258
+ width="1em"
2259
+ height="1em"
2260
+ >
2261
+ <path
2262
+ 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"
2263
+ />
2264
+ </svg>
2265
+ </span>
2266
+ </span>
1650
2267
  </span>
1651
2268
  </td>
1652
2269
  </tr>
@@ -1678,10 +2295,23 @@ wrapperTag: div
1678
2295
  <div class="pf-v6-l-grid__item">
1679
2296
  <div class="pf-v6-l-flex pf-m-space-items-sm">
1680
2297
  <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>
2298
+ <span class="pf-v6-c-icon">
2299
+ <span class="pf-v6-c-icon__content pf-m-danger">
2300
+ <svg
2301
+ class="pf-v6-svg"
2302
+ viewBox="0 0 32 32"
2303
+ fill="currentColor"
2304
+ aria-hidden="true"
2305
+ role="img"
2306
+ width="1em"
2307
+ height="1em"
2308
+ >
2309
+ <path
2310
+ 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"
2311
+ />
2312
+ </svg>
2313
+ </span>
2314
+ </span>
1685
2315
  </div>
1686
2316
  <div class="pf-v6-l-flex pf-m-column pf-m-space-items-none">
1687
2317
  <div class="pf-v6-l-flex__item">
@@ -1696,10 +2326,23 @@ wrapperTag: div
1696
2326
  <div class="pf-v6-l-grid__item">
1697
2327
  <div class="pf-v6-l-flex pf-m-space-items-sm">
1698
2328
  <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>
2329
+ <span class="pf-v6-c-icon">
2330
+ <span class="pf-v6-c-icon__content pf-m-success">
2331
+ <svg
2332
+ class="pf-v6-svg"
2333
+ viewBox="0 0 32 32"
2334
+ fill="currentColor"
2335
+ aria-hidden="true"
2336
+ role="img"
2337
+ width="1em"
2338
+ height="1em"
2339
+ >
2340
+ <path
2341
+ 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"
2342
+ />
2343
+ </svg>
2344
+ </span>
2345
+ </span>
1703
2346
  </div>
1704
2347
  <div class="pf-v6-l-flex pf-m-column pf-m-space-items-none">
1705
2348
  <div class="pf-v6-l-flex__item">
@@ -1779,7 +2422,19 @@ wrapperTag: div
1779
2422
  </div>
1780
2423
  </div>
1781
2424
  <span class="pf-v6-c-notification-drawer__group-toggle-icon">
1782
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2425
+ <svg
2426
+ class="pf-v6-svg"
2427
+ viewBox="0 0 20 20"
2428
+ fill="currentColor"
2429
+ aria-hidden="true"
2430
+ role="img"
2431
+ width="1em"
2432
+ height="1em"
2433
+ >
2434
+ <path
2435
+ 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"
2436
+ />
2437
+ </svg>
1783
2438
  </span>
1784
2439
  </button>
1785
2440
  <ul class="pf-v6-c-notification-drawer__list" role="list">
@@ -1789,7 +2444,19 @@ wrapperTag: div
1789
2444
  >
1790
2445
  <div class="pf-v6-c-notification-drawer__list-item-header">
1791
2446
  <span class="pf-v6-c-notification-drawer__list-item-header-icon">
1792
- <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
2447
+ <svg
2448
+ class="pf-v6-svg"
2449
+ viewBox="0 0 32 32"
2450
+ fill="currentColor"
2451
+ aria-hidden="true"
2452
+ role="img"
2453
+ width="1em"
2454
+ height="1em"
2455
+ >
2456
+ <path
2457
+ 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"
2458
+ />
2459
+ </svg>
1793
2460
  </span>
1794
2461
  <h2 class="pf-v6-c-notification-drawer__list-item-header-title">
1795
2462
  <span class="pf-v6-screen-reader">Danger notification:</span>
@@ -1806,7 +2473,19 @@ wrapperTag: div
1806
2473
  >
1807
2474
  <div class="pf-v6-c-notification-drawer__list-item-header">
1808
2475
  <span class="pf-v6-c-notification-drawer__list-item-header-icon">
1809
- <i class="fas fa-exclamation-triangle" aria-hidden="true"></i>
2476
+ <svg
2477
+ class="pf-v6-svg"
2478
+ viewBox="0 0 32 32"
2479
+ fill="currentColor"
2480
+ aria-hidden="true"
2481
+ role="img"
2482
+ width="1em"
2483
+ height="1em"
2484
+ >
2485
+ <path
2486
+ 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"
2487
+ />
2488
+ </svg>
1810
2489
  </span>
1811
2490
  <h2 class="pf-v6-c-notification-drawer__list-item-header-title">
1812
2491
  <span class="pf-v6-screen-reader">Warning notification:</span>
@@ -1951,7 +2630,19 @@ wrapperTag: div
1951
2630
  <div class="pf-v6-l-flex pf-m-space-items-sm">
1952
2631
  <span class="pf-v6-c-icon pf-m-inline">
1953
2632
  <span class="pf-v6-c-icon__content pf-m-danger">
1954
- <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
2633
+ <svg
2634
+ class="pf-v6-svg"
2635
+ viewBox="0 0 32 32"
2636
+ fill="currentColor"
2637
+ aria-hidden="true"
2638
+ role="img"
2639
+ width="1em"
2640
+ height="1em"
2641
+ >
2642
+ <path
2643
+ 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"
2644
+ />
2645
+ </svg>
1955
2646
  </span>
1956
2647
  </span>
1957
2648
  <a hfer="#">25 incidents detected</a>
@@ -2022,7 +2713,19 @@ wrapperTag: div
2022
2713
  >
2023
2714
  <span class="pf-v6-c-button__icon pf-m-start">
2024
2715
  <span class="pf-v6-c-card__header-toggle-icon">
2025
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2716
+ <svg
2717
+ class="pf-v6-svg"
2718
+ viewBox="0 0 20 20"
2719
+ fill="currentColor"
2720
+ aria-hidden="true"
2721
+ role="img"
2722
+ width="1em"
2723
+ height="1em"
2724
+ >
2725
+ <path
2726
+ 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"
2727
+ />
2728
+ </svg>
2026
2729
  </span>
2027
2730
  </span>
2028
2731
  </button>
@@ -2135,7 +2838,19 @@ wrapperTag: div
2135
2838
  >
2136
2839
  <span class="pf-v6-c-button__icon pf-m-start">
2137
2840
  <span class="pf-v6-c-card__header-toggle-icon">
2138
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2841
+ <svg
2842
+ class="pf-v6-svg"
2843
+ viewBox="0 0 20 20"
2844
+ fill="currentColor"
2845
+ aria-hidden="true"
2846
+ role="img"
2847
+ width="1em"
2848
+ height="1em"
2849
+ >
2850
+ <path
2851
+ 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"
2852
+ />
2853
+ </svg>
2139
2854
  </span>
2140
2855
  </span>
2141
2856
  </button>
@@ -2165,7 +2880,19 @@ wrapperTag: div
2165
2880
  >
2166
2881
  <span class="pf-v6-c-button__icon pf-m-start">
2167
2882
  <span class="pf-v6-c-card__header-toggle-icon">
2168
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2883
+ <svg
2884
+ class="pf-v6-svg"
2885
+ viewBox="0 0 20 20"
2886
+ fill="currentColor"
2887
+ aria-hidden="true"
2888
+ role="img"
2889
+ width="1em"
2890
+ height="1em"
2891
+ >
2892
+ <path
2893
+ 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"
2894
+ />
2895
+ </svg>
2169
2896
  </span>
2170
2897
  </span>
2171
2898
  </button>
@@ -2210,7 +2937,19 @@ wrapperTag: div
2210
2937
  >
2211
2938
  <span class="pf-v6-c-button__icon pf-m-start">
2212
2939
  <span class="pf-v6-c-card__header-toggle-icon">
2213
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2940
+ <svg
2941
+ class="pf-v6-svg"
2942
+ viewBox="0 0 20 20"
2943
+ fill="currentColor"
2944
+ aria-hidden="true"
2945
+ role="img"
2946
+ width="1em"
2947
+ height="1em"
2948
+ >
2949
+ <path
2950
+ 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"
2951
+ />
2952
+ </svg>
2214
2953
  </span>
2215
2954
  </span>
2216
2955
  </button>
@@ -2320,7 +3059,19 @@ wrapperTag: div
2320
3059
  >
2321
3060
  <span class="pf-v6-c-button__icon pf-m-start">
2322
3061
  <span class="pf-v6-c-card__header-toggle-icon">
2323
- <i class="fas fa-angle-right" aria-hidden="true"></i>
3062
+ <svg
3063
+ class="pf-v6-svg"
3064
+ viewBox="0 0 20 20"
3065
+ fill="currentColor"
3066
+ aria-hidden="true"
3067
+ role="img"
3068
+ width="1em"
3069
+ height="1em"
3070
+ >
3071
+ <path
3072
+ 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"
3073
+ />
3074
+ </svg>
2324
3075
  </span>
2325
3076
  </span>
2326
3077
  </button>
@@ -2347,7 +3098,19 @@ wrapperTag: div
2347
3098
  >
2348
3099
  <span class="pf-v6-c-button__icon pf-m-start">
2349
3100
  <span class="pf-v6-c-card__header-toggle-icon">
2350
- <i class="fas fa-angle-right" aria-hidden="true"></i>
3101
+ <svg
3102
+ class="pf-v6-svg"
3103
+ viewBox="0 0 20 20"
3104
+ fill="currentColor"
3105
+ aria-hidden="true"
3106
+ role="img"
3107
+ width="1em"
3108
+ height="1em"
3109
+ >
3110
+ <path
3111
+ 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"
3112
+ />
3113
+ </svg>
2351
3114
  </span>
2352
3115
  </span>
2353
3116
  </button>
@@ -2387,7 +3150,19 @@ wrapperTag: div
2387
3150
  >
2388
3151
  <span class="pf-v6-c-accordion__toggle-text">CPU 1</span>
2389
3152
  <span class="pf-v6-c-accordion__toggle-icon">
2390
- <i class="fas fa-angle-right" aria-hidden="true"></i>
3153
+ <svg
3154
+ class="pf-v6-svg"
3155
+ viewBox="0 0 20 20"
3156
+ fill="currentColor"
3157
+ aria-hidden="true"
3158
+ role="img"
3159
+ width="1em"
3160
+ height="1em"
3161
+ >
3162
+ <path
3163
+ 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"
3164
+ />
3165
+ </svg>
2391
3166
  </span>
2392
3167
  </button>
2393
3168
  </h3>
@@ -2483,7 +3258,19 @@ wrapperTag: div
2483
3258
  >
2484
3259
  <span class="pf-v6-c-accordion__toggle-text">CPU 2</span>
2485
3260
  <span class="pf-v6-c-accordion__toggle-icon">
2486
- <i class="fas fa-angle-right" aria-hidden="true"></i>
3261
+ <svg
3262
+ class="pf-v6-svg"
3263
+ viewBox="0 0 20 20"
3264
+ fill="currentColor"
3265
+ aria-hidden="true"
3266
+ role="img"
3267
+ width="1em"
3268
+ height="1em"
3269
+ >
3270
+ <path
3271
+ 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"
3272
+ />
3273
+ </svg>
2487
3274
  </span>
2488
3275
  </button>
2489
3276
  </h3>
@@ -2577,7 +3364,19 @@ wrapperTag: div
2577
3364
  >
2578
3365
  <span class="pf-v6-c-accordion__toggle-text">CPU 3</span>
2579
3366
  <span class="pf-v6-c-accordion__toggle-icon">
2580
- <i class="fas fa-angle-right" aria-hidden="true"></i>
3367
+ <svg
3368
+ class="pf-v6-svg"
3369
+ viewBox="0 0 20 20"
3370
+ fill="currentColor"
3371
+ aria-hidden="true"
3372
+ role="img"
3373
+ width="1em"
3374
+ height="1em"
3375
+ >
3376
+ <path
3377
+ 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"
3378
+ />
3379
+ </svg>
2581
3380
  </span>
2582
3381
  </button>
2583
3382
  </h3>
@@ -2923,7 +3722,19 @@ wrapperTag: div
2923
3722
  <div class="pf-v6-l-flex__item">
2924
3723
  <span class="pf-v6-c-icon pf-m-inline">
2925
3724
  <span class="pf-v6-c-icon__content pf-m-danger">
2926
- <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
3725
+ <svg
3726
+ class="pf-v6-svg"
3727
+ viewBox="0 0 32 32"
3728
+ fill="currentColor"
3729
+ aria-hidden="true"
3730
+ role="img"
3731
+ width="1em"
3732
+ height="1em"
3733
+ >
3734
+ <path
3735
+ 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"
3736
+ />
3737
+ </svg>
2927
3738
  </span>
2928
3739
  </span>
2929
3740
  </div>
@@ -2952,7 +3763,19 @@ wrapperTag: div
2952
3763
  <div class="pf-v6-l-flex__item">
2953
3764
  <span class="pf-v6-c-icon pf-m-inline">
2954
3765
  <span class="pf-v6-c-icon__content pf-m-success">
2955
- <i class="fas fa-check-circle" aria-hidden="true"></i>
3766
+ <svg
3767
+ class="pf-v6-svg"
3768
+ viewBox="0 0 32 32"
3769
+ fill="currentColor"
3770
+ aria-hidden="true"
3771
+ role="img"
3772
+ width="1em"
3773
+ height="1em"
3774
+ >
3775
+ <path
3776
+ 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"
3777
+ />
3778
+ </svg>
2956
3779
  </span>
2957
3780
  </span>
2958
3781
  </div>
@@ -3019,7 +3842,19 @@ wrapperTag: div
3019
3842
  <div class="pf-v6-l-flex__item">
3020
3843
  <span class="pf-v6-c-icon pf-m-inline">
3021
3844
  <span class="pf-v6-c-icon__content pf-m-success">
3022
- <i class="fas fa-check-circle" aria-hidden="true"></i>
3845
+ <svg
3846
+ class="pf-v6-svg"
3847
+ viewBox="0 0 32 32"
3848
+ fill="currentColor"
3849
+ aria-hidden="true"
3850
+ role="img"
3851
+ width="1em"
3852
+ height="1em"
3853
+ >
3854
+ <path
3855
+ 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"
3856
+ />
3857
+ </svg>
3023
3858
  </span>
3024
3859
  </span>
3025
3860
  </div>