@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/NotificationDrawer/examples/NotificationDrawer.md CHANGED
@@ -12,7 +12,8 @@ section: components
12
12
  <span class="pf-v6-c-button__text">Skip to content</span>
13
13
  </a>
14
14
  </div>
15
- <header class="pf-v6-c-masthead" id="-page-masthead">
15
+
16
+ <header class="pf-v6-c-masthead" id="-page-docked">
16
17
  <div class="pf-v6-c-masthead__main">
17
18
  <span class="pf-v6-c-masthead__toggle">
18
19
  <button
@@ -54,7 +55,7 @@ section: components
54
55
  y1="2.25860997e-13%"
55
56
  x2="32%"
56
57
  y2="100%"
57
- id="linearGradient--page-masthead"
58
+ id="linearGradient--page-docked"
58
59
  >
59
60
  <stop stop-color="#2B9AF3" offset="0%" />
60
61
  <stop
@@ -108,11 +109,11 @@ section: components
108
109
  />
109
110
  <path
110
111
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
111
- fill="url(#linearGradient--page-masthead)"
112
+ fill="url(#linearGradient--page-docked)"
112
113
  />
113
114
  <path
114
115
  d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z"
115
- fill="url(#linearGradient--page-masthead)"
116
+ fill="url(#linearGradient--page-docked)"
116
117
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
117
118
  />
118
119
  </g>
@@ -122,7 +123,7 @@ section: components
122
123
  </div>
123
124
  </div>
124
125
  <div class="pf-v6-c-masthead__content">
125
- <div class="pf-v6-c-toolbar pf-m-static" id="-page-masthead-toolbar">
126
+ <div class="pf-v6-c-toolbar pf-m-static" id="-page-docked-toolbar">
126
127
  <div class="pf-v6-c-toolbar__content">
127
128
  <div class="pf-v6-c-toolbar__content-section">
128
129
  <div
@@ -136,7 +137,19 @@ section: components
136
137
  aria-label="Notifications"
137
138
  >
138
139
  <span class="pf-v6-c-button__icon">
139
- <i class="pf-v6-pficon-bell" aria-hidden="true"></i>
140
+ <svg
141
+ class="pf-v6-svg"
142
+ viewBox="0 0 32 32"
143
+ fill="currentColor"
144
+ aria-hidden="true"
145
+ role="img"
146
+ width="1em"
147
+ height="1em"
148
+ >
149
+ <path
150
+ d="M28.75 22v3.5c0 .689-.561 1.25-1.25 1.25h-7.521c.005.084.021.166.021.25 0 2.206-1.794 4-4 4s-4-1.794-4-4c0-.084.016-.166.021-.25H4.5c-.689 0-1.25-.561-1.25-1.25V22a.75.75 0 0 1 .75-.75c1.24 0 2.25-1.009 2.25-2.25v-4c0-4.826 3.528-8.833 8.138-9.605A2.482 2.482 0 0 1 13.5 3.5C13.5 2.122 14.621 1 16 1s2.5 1.122 2.5 2.5c0 .761-.349 1.436-.888 1.895 4.61.772 8.138 4.779 8.138 9.605v4c0 1.241 1.01 2.25 2.25 2.25a.75.75 0 0 1 .75.75Z"
151
+ />
152
+ </svg>
140
153
  </span>
141
154
  </button>
142
155
  </div>
@@ -152,7 +165,19 @@ section: components
152
165
  aria-label="Application launcher"
153
166
  >
154
167
  <span class="pf-v6-c-menu-toggle__icon">
155
- <i class="fas fa-th" aria-hidden="true"></i>
168
+ <svg
169
+ class="pf-v6-svg"
170
+ viewBox="0 0 512 512"
171
+ fill="currentColor"
172
+ aria-hidden="true"
173
+ role="img"
174
+ width="1em"
175
+ height="1em"
176
+ >
177
+ <path
178
+ d="M149.333 56v80c0 13.255-10.745 24-24 24H24c-13.255 0-24-10.745-24-24V56c0-13.255 10.745-24 24-24h101.333c13.255 0 24 10.745 24 24zm181.334 240v-80c0-13.255-10.745-24-24-24H205.333c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24h101.333c13.256 0 24.001-10.745 24.001-24zm32-240v80c0 13.255 10.745 24 24 24H488c13.255 0 24-10.745 24-24V56c0-13.255-10.745-24-24-24H386.667c-13.255 0-24 10.745-24 24zm-32 80V56c0-13.255-10.745-24-24-24H205.333c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24h101.333c13.256 0 24.001-10.745 24.001-24zm-205.334 56H24c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24h101.333c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24zM0 376v80c0 13.255 10.745 24 24 24h101.333c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H24c-13.255 0-24 10.745-24 24zm386.667-56H488c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H386.667c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24zm0 160H488c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H386.667c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24zM181.333 376v80c0 13.255 10.745 24 24 24h101.333c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H205.333c-13.255 0-24 10.745-24 24z"
179
+ />
180
+ </svg>
156
181
  </span>
157
182
  </button>
158
183
  </div>
@@ -164,7 +189,19 @@ section: components
164
189
  aria-label="Settings"
165
190
  >
166
191
  <span class="pf-v6-c-menu-toggle__icon">
167
- <i class="fas fa-cog" aria-hidden="true"></i>
192
+ <svg
193
+ class="pf-v6-svg"
194
+ viewBox="0 0 32 32"
195
+ fill="currentColor"
196
+ aria-hidden="true"
197
+ role="img"
198
+ width="1em"
199
+ height="1em"
200
+ >
201
+ <path
202
+ d="M30.168 12.894a.5.5 0 0 0-.488-.394h-2.732a11.512 11.512 0 0 0-.729-1.769l1.931-1.93a.5.5 0 0 0 .066-.625 14.693 14.693 0 0 0-4.393-4.392.498.498 0 0 0-.624.067l-1.93 1.93a11.512 11.512 0 0 0-1.769-.729V2.319a.5.5 0 0 0-.395-.489 14.81 14.81 0 0 0-6.211 0 .5.5 0 0 0-.395.489v2.733c-.614.196-1.207.439-1.769.729L8.8 3.851a.498.498 0 0 0-.624-.067 14.714 14.714 0 0 0-4.393 4.392.5.5 0 0 0 .066.625l1.931 1.93a11.512 11.512 0 0 0-.729 1.769H2.319a.5.5 0 0 0-.488.394 14.652 14.652 0 0 0 0 6.212.5.5 0 0 0 .488.394h2.732c.196.615.44 1.207.729 1.769l-1.931 1.93a.5.5 0 0 0-.066.625 14.673 14.673 0 0 0 4.393 4.392.498.498 0 0 0 .624-.067l1.93-1.93c.562.289 1.154.533 1.769.729v2.733a.5.5 0 0 0 .395.489 14.686 14.686 0 0 0 6.21 0 .5.5 0 0 0 .395-.489v-2.733a11.454 11.454 0 0 0 1.769-.729l1.93 1.93a.5.5 0 0 0 .624.067 14.714 14.714 0 0 0 4.393-4.392.5.5 0 0 0-.066-.625l-1.931-1.93c.289-.562.533-1.154.729-1.769h2.732a.5.5 0 0 0 .488-.394 14.652 14.652 0 0 0 0-6.212ZM16 21.25c-2.895 0-5.25-2.355-5.25-5.25s2.355-5.25 5.25-5.25 5.25 2.355 5.25 5.25-2.355 5.25-5.25 5.25Z"
203
+ />
204
+ </svg>
168
205
  </span>
169
206
  </button>
170
207
  </div>
@@ -176,7 +213,19 @@ section: components
176
213
  aria-label="Help"
177
214
  >
178
215
  <span class="pf-v6-c-menu-toggle__icon">
179
- <i class="fas fa-question-circle" aria-hidden="true"></i>
216
+ <svg
217
+ class="pf-v6-svg"
218
+ viewBox="0 0 512 512"
219
+ fill="currentColor"
220
+ aria-hidden="true"
221
+ role="img"
222
+ width="1em"
223
+ height="1em"
224
+ >
225
+ <path
226
+ d="M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zM262.655 90c-54.497 0-89.255 22.957-116.549 63.758-3.536 5.286-2.353 12.415 2.715 16.258l34.699 26.31c5.205 3.947 12.621 3.008 16.665-2.122 17.864-22.658 30.113-35.797 57.303-35.797 20.429 0 45.698 13.148 45.698 32.958 0 14.976-12.363 22.667-32.534 33.976C247.128 238.528 216 254.941 216 296v4c0 6.627 5.373 12 12 12h56c6.627 0 12-5.373 12-12v-1.333c0-28.462 83.186-29.647 83.186-106.667 0-58.002-60.165-102-116.531-102zM256 338c-25.365 0-46 20.635-46 46 0 25.364 20.635 46 46 46s46-20.636 46-46c0-25.365-20.635-46-46-46z"
227
+ />
228
+ </svg>
180
229
  </span>
181
230
  </button>
182
231
  </div>
@@ -190,7 +239,19 @@ section: components
190
239
  aria-label="Actions"
191
240
  >
192
241
  <span class="pf-v6-c-menu-toggle__icon">
193
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
242
+ <svg
243
+ class="pf-v6-svg"
244
+ viewBox="0 0 32 32"
245
+ fill="currentColor"
246
+ aria-hidden="true"
247
+ role="img"
248
+ width="1em"
249
+ height="1em"
250
+ >
251
+ <path
252
+ 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"
253
+ />
254
+ </svg>
194
255
  </span>
195
256
  </button>
196
257
  </div>
@@ -201,40 +262,42 @@ section: components
201
262
  </div>
202
263
  </header>
203
264
  <div class="pf-v6-c-page__sidebar">
204
- <div class="pf-v6-c-page__sidebar-body">
205
- <nav class="pf-v6-c-nav" id="-page-primary-nav" aria-label="Global">
206
- <ul class="pf-v6-c-nav__list" role="list">
207
- <li class="pf-v6-c-nav__item">
208
- <a href="#" class="pf-v6-c-nav__link">
209
- <span class="pf-v6-c-nav__link-text">System panel</span>
210
- </a>
211
- </li>
212
- <li class="pf-v6-c-nav__item">
213
- <a
214
- href="#"
215
- class="pf-v6-c-nav__link pf-m-current"
216
- aria-current="page"
217
- >
218
- <span class="pf-v6-c-nav__link-text">Policy</span>
219
- </a>
220
- </li>
221
- <li class="pf-v6-c-nav__item">
222
- <a href="#" class="pf-v6-c-nav__link">
223
- <span class="pf-v6-c-nav__link-text">Authentication</span>
224
- </a>
225
- </li>
226
- <li class="pf-v6-c-nav__item">
227
- <a href="#" class="pf-v6-c-nav__link">
228
- <span class="pf-v6-c-nav__link-text">Network services</span>
229
- </a>
230
- </li>
231
- <li class="pf-v6-c-nav__item">
232
- <a href="#" class="pf-v6-c-nav__link">
233
- <span class="pf-v6-c-nav__link-text">Server</span>
234
- </a>
235
- </li>
236
- </ul>
237
- </nav>
265
+ <div class="pf-v6-c-page__sidebar-main">
266
+ <div class="pf-v6-c-page__sidebar-body">
267
+ <nav class="pf-v6-c-nav" id="-page-primary-nav" aria-label="Global">
268
+ <ul class="pf-v6-c-nav__list" role="list">
269
+ <li class="pf-v6-c-nav__item">
270
+ <a href="#" class="pf-v6-c-nav__link">
271
+ <span class="pf-v6-c-nav__link-text">System panel</span>
272
+ </a>
273
+ </li>
274
+ <li class="pf-v6-c-nav__item">
275
+ <a
276
+ href="#"
277
+ class="pf-v6-c-nav__link pf-m-current"
278
+ aria-current="page"
279
+ >
280
+ <span class="pf-v6-c-nav__link-text">Policy</span>
281
+ </a>
282
+ </li>
283
+ <li class="pf-v6-c-nav__item">
284
+ <a href="#" class="pf-v6-c-nav__link">
285
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
286
+ </a>
287
+ </li>
288
+ <li class="pf-v6-c-nav__item">
289
+ <a href="#" class="pf-v6-c-nav__link">
290
+ <span class="pf-v6-c-nav__link-text">Network services</span>
291
+ </a>
292
+ </li>
293
+ <li class="pf-v6-c-nav__item">
294
+ <a href="#" class="pf-v6-c-nav__link">
295
+ <span class="pf-v6-c-nav__link-text">Server</span>
296
+ </a>
297
+ </li>
298
+ </ul>
299
+ </nav>
300
+ </div>
238
301
  </div>
239
302
  </div>
240
303
  <div class="pf-v6-c-page__drawer">
@@ -255,7 +318,19 @@ section: components
255
318
  </li>
256
319
  <li class="pf-v6-c-breadcrumb__item">
257
320
  <span class="pf-v6-c-breadcrumb__item-divider">
258
- <i class="fas fa-angle-right" aria-hidden="true"></i>
321
+ <svg
322
+ class="pf-v6-svg"
323
+ viewBox="0 0 20 20"
324
+ fill="currentColor"
325
+ aria-hidden="true"
326
+ role="img"
327
+ width="1em"
328
+ height="1em"
329
+ >
330
+ <path
331
+ d="M14.35 8.94 6.71 1.29l-.02-.02c-.4-.38-1.03-.37-1.41.02-.38.4-.37 1.03.02 1.41l7.29 7.29-7.29 7.29a1.003 1.003 0 0 0 1.42 1.42l7.65-7.65c.59-.59.59-1.54 0-2.12Z"
332
+ />
333
+ </svg>
259
334
  </span>
260
335
 
261
336
  <a
@@ -265,7 +340,19 @@ section: components
265
340
  </li>
266
341
  <li class="pf-v6-c-breadcrumb__item">
267
342
  <span class="pf-v6-c-breadcrumb__item-divider">
268
- <i class="fas fa-angle-right" aria-hidden="true"></i>
343
+ <svg
344
+ class="pf-v6-svg"
345
+ viewBox="0 0 20 20"
346
+ fill="currentColor"
347
+ aria-hidden="true"
348
+ role="img"
349
+ width="1em"
350
+ height="1em"
351
+ >
352
+ <path
353
+ d="M14.35 8.94 6.71 1.29l-.02-.02c-.4-.38-1.03-.37-1.41.02-.38.4-.37 1.03.02 1.41l7.29 7.29-7.29 7.29a1.003 1.003 0 0 0 1.42 1.42l7.65-7.65c.59-.59.59-1.54 0-2.12Z"
354
+ />
355
+ </svg>
269
356
  </span>
270
357
 
271
358
  <a
@@ -275,7 +362,19 @@ section: components
275
362
  </li>
276
363
  <li class="pf-v6-c-breadcrumb__item">
277
364
  <span class="pf-v6-c-breadcrumb__item-divider">
278
- <i class="fas fa-angle-right" aria-hidden="true"></i>
365
+ <svg
366
+ class="pf-v6-svg"
367
+ viewBox="0 0 20 20"
368
+ fill="currentColor"
369
+ aria-hidden="true"
370
+ role="img"
371
+ width="1em"
372
+ height="1em"
373
+ >
374
+ <path
375
+ d="M14.35 8.94 6.71 1.29l-.02-.02c-.4-.38-1.03-.37-1.41.02-.38.4-.37 1.03.02 1.41l7.29 7.29-7.29 7.29a1.003 1.003 0 0 0 1.42 1.42l7.65-7.65c.59-.59.59-1.54 0-2.12Z"
376
+ />
377
+ </svg>
279
378
  </span>
280
379
 
281
380
  <a
@@ -288,9 +387,15 @@ section: components
288
387
  </nav>
289
388
  </div>
290
389
  </section>
291
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
390
+ <section
391
+ class="pf-v6-c-page__main-section pf-m-limit-width"
392
+ aria-labelledby="main-title"
393
+ >
292
394
  <div class="pf-v6-c-page__main-body">
293
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
395
+ <h1
396
+ class="pf-v6-c-content--h1 pf-m-page-title"
397
+ id="main-title"
398
+ >Main title</h1>
294
399
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
295
400
  </div>
296
401
  </section>
@@ -352,7 +457,19 @@ section: components
352
457
  id="drawer-demo-notification-drawer-basic-header-action"
353
458
  >
354
459
  <span class="pf-v6-c-menu-toggle__icon">
355
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
460
+ <svg
461
+ class="pf-v6-svg"
462
+ viewBox="0 0 32 32"
463
+ fill="currentColor"
464
+ aria-hidden="true"
465
+ role="img"
466
+ width="1em"
467
+ height="1em"
468
+ >
469
+ <path
470
+ 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"
471
+ />
472
+ </svg>
356
473
  </span>
357
474
  </button>
358
475
  </div>
@@ -366,7 +483,19 @@ section: components
366
483
  <span
367
484
  class="pf-v6-c-notification-drawer__list-item-header-icon"
368
485
  >
369
- <i class="fas fa-info-circle" aria-hidden="true"></i>
486
+ <svg
487
+ class="pf-v6-svg"
488
+ viewBox="0 0 32 32"
489
+ fill="currentColor"
490
+ aria-hidden="true"
491
+ role="img"
492
+ width="1em"
493
+ height="1em"
494
+ >
495
+ <path
496
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm1.5 22a1.5 1.5 0 1 1-3 0v-5.157l-.188.04a1.5 1.5 0 0 1-.625-2.934l1.956-.416c.112-.024.223-.032.333-.03l.024-.002a1.5 1.5 0 0 1 1.5 1.5v7Zm-.08-12.58c-.38.37-.89.58-1.42.58a1.998 1.998 0 0 1-1.851-2.76c.051-.13.11-.24.19-.35.07-.11.15-.21.25-.3.74-.75 2.08-.75 2.83 0 .09.09.17.19.24.3.08.11.14.22.189.35.05.12.09.24.11.37.03.13.04.26.04.39 0 .53-.21 1.04-.58 1.42Z"
497
+ />
498
+ </svg>
370
499
  </span>
371
500
  <h2
372
501
  class="pf-v6-c-notification-drawer__list-item-header-title"
@@ -385,7 +514,19 @@ section: components
385
514
  id="drawer-demo-notification-drawer-basic-menu-toggle-1"
386
515
  >
387
516
  <span class="pf-v6-c-menu-toggle__icon">
388
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
517
+ <svg
518
+ class="pf-v6-svg"
519
+ viewBox="0 0 32 32"
520
+ fill="currentColor"
521
+ aria-hidden="true"
522
+ role="img"
523
+ width="1em"
524
+ height="1em"
525
+ >
526
+ <path
527
+ 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"
528
+ />
529
+ </svg>
389
530
  </span>
390
531
  </button>
391
532
  </div>
@@ -404,7 +545,19 @@ section: components
404
545
  <span
405
546
  class="pf-v6-c-notification-drawer__list-item-header-icon"
406
547
  >
407
- <i class="fas fa-arrow-circle-up" aria-hidden="true"></i>
548
+ <svg
549
+ class="pf-v6-svg"
550
+ viewBox="0 0 32 32"
551
+ fill="currentColor"
552
+ aria-hidden="true"
553
+ role="img"
554
+ width="1em"
555
+ height="1em"
556
+ >
557
+ <path
558
+ d="M28.75 22v3.5c0 .689-.561 1.25-1.25 1.25h-7.521c.005.084.021.166.021.25 0 2.206-1.794 4-4 4s-4-1.794-4-4c0-.084.016-.166.021-.25H4.5c-.689 0-1.25-.561-1.25-1.25V22a.75.75 0 0 1 .75-.75c1.24 0 2.25-1.009 2.25-2.25v-4c0-4.826 3.528-8.833 8.138-9.605A2.482 2.482 0 0 1 13.5 3.5C13.5 2.122 14.621 1 16 1s2.5 1.122 2.5 2.5c0 .761-.349 1.436-.888 1.895 4.61.772 8.138 4.779 8.138 9.605v4c0 1.241 1.01 2.25 2.25 2.25a.75.75 0 0 1 .75.75Z"
559
+ />
560
+ </svg>
408
561
  </span>
409
562
  <h2
410
563
  class="pf-v6-c-notification-drawer__list-item-header-title"
@@ -423,7 +576,19 @@ section: components
423
576
  id="drawer-demo-notification-drawer-basic-menu-toggle-3"
424
577
  >
425
578
  <span class="pf-v6-c-menu-toggle__icon">
426
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
579
+ <svg
580
+ class="pf-v6-svg"
581
+ viewBox="0 0 32 32"
582
+ fill="currentColor"
583
+ aria-hidden="true"
584
+ role="img"
585
+ width="1em"
586
+ height="1em"
587
+ >
588
+ <path
589
+ 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"
590
+ />
591
+ </svg>
427
592
  </span>
428
593
  </button>
429
594
  </div>
@@ -442,7 +607,19 @@ section: components
442
607
  <span
443
608
  class="pf-v6-c-notification-drawer__list-item-header-icon"
444
609
  >
445
- <i class="fas fa-arrow-circle-up" aria-hidden="true"></i>
610
+ <svg
611
+ class="pf-v6-svg"
612
+ viewBox="0 0 32 32"
613
+ fill="currentColor"
614
+ aria-hidden="true"
615
+ role="img"
616
+ width="1em"
617
+ height="1em"
618
+ >
619
+ <path
620
+ d="M28.75 22v3.5c0 .689-.561 1.25-1.25 1.25h-7.521c.005.084.021.166.021.25 0 2.206-1.794 4-4 4s-4-1.794-4-4c0-.084.016-.166.021-.25H4.5c-.689 0-1.25-.561-1.25-1.25V22a.75.75 0 0 1 .75-.75c1.24 0 2.25-1.009 2.25-2.25v-4c0-4.826 3.528-8.833 8.138-9.605A2.482 2.482 0 0 1 13.5 3.5C13.5 2.122 14.621 1 16 1s2.5 1.122 2.5 2.5c0 .761-.349 1.436-.888 1.895 4.61.772 8.138 4.779 8.138 9.605v4c0 1.241 1.01 2.25 2.25 2.25a.75.75 0 0 1 .75.75Z"
621
+ />
622
+ </svg>
446
623
  </span>
447
624
  <h2
448
625
  class="pf-v6-c-notification-drawer__list-item-header-title"
@@ -461,7 +638,19 @@ section: components
461
638
  id="drawer-demo-notification-drawer-basic-menu-toggle-4"
462
639
  >
463
640
  <span class="pf-v6-c-menu-toggle__icon">
464
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
641
+ <svg
642
+ class="pf-v6-svg"
643
+ viewBox="0 0 32 32"
644
+ fill="currentColor"
645
+ aria-hidden="true"
646
+ role="img"
647
+ width="1em"
648
+ height="1em"
649
+ >
650
+ <path
651
+ 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"
652
+ />
653
+ </svg>
465
654
  </span>
466
655
  </button>
467
656
  </div>
@@ -479,10 +668,19 @@ section: components
479
668
  <span
480
669
  class="pf-v6-c-notification-drawer__list-item-header-icon"
481
670
  >
482
- <i
483
- class="fas fa-exclamation-triangle"
671
+ <svg
672
+ class="pf-v6-svg"
673
+ viewBox="0 0 32 32"
674
+ fill="currentColor"
484
675
  aria-hidden="true"
485
- ></i>
676
+ role="img"
677
+ width="1em"
678
+ height="1em"
679
+ >
680
+ <path
681
+ 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"
682
+ />
683
+ </svg>
486
684
  </span>
487
685
  <h2
488
686
  class="pf-v6-c-notification-drawer__list-item-header-title"
@@ -500,7 +698,19 @@ section: components
500
698
  id="drawer-demo-notification-drawer-basic-menu-toggle-5"
501
699
  >
502
700
  <span class="pf-v6-c-menu-toggle__icon">
503
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
701
+ <svg
702
+ class="pf-v6-svg"
703
+ viewBox="0 0 32 32"
704
+ fill="currentColor"
705
+ aria-hidden="true"
706
+ role="img"
707
+ width="1em"
708
+ height="1em"
709
+ >
710
+ <path
711
+ 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"
712
+ />
713
+ </svg>
504
714
  </span>
505
715
  </button>
506
716
  </div>
@@ -518,7 +728,19 @@ section: components
518
728
  <span
519
729
  class="pf-v6-c-notification-drawer__list-item-header-icon"
520
730
  >
521
- <i class="fas fa-check-circle" aria-hidden="true"></i>
731
+ <svg
732
+ class="pf-v6-svg"
733
+ viewBox="0 0 32 32"
734
+ fill="currentColor"
735
+ aria-hidden="true"
736
+ role="img"
737
+ width="1em"
738
+ height="1em"
739
+ >
740
+ <path
741
+ 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"
742
+ />
743
+ </svg>
522
744
  </span>
523
745
  <h2
524
746
  class="pf-v6-c-notification-drawer__list-item-header-title"
@@ -536,7 +758,19 @@ section: components
536
758
  id="drawer-demo-notification-drawer-basic-menu-toggle-6"
537
759
  >
538
760
  <span class="pf-v6-c-menu-toggle__icon">
539
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
761
+ <svg
762
+ class="pf-v6-svg"
763
+ viewBox="0 0 32 32"
764
+ fill="currentColor"
765
+ aria-hidden="true"
766
+ role="img"
767
+ width="1em"
768
+ height="1em"
769
+ >
770
+ <path
771
+ 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"
772
+ />
773
+ </svg>
540
774
  </span>
541
775
  </button>
542
776
  </div>
@@ -554,7 +788,19 @@ section: components
554
788
  <span
555
789
  class="pf-v6-c-notification-drawer__list-item-header-icon"
556
790
  >
557
- <i class="fas fa-check-circle" aria-hidden="true"></i>
791
+ <svg
792
+ class="pf-v6-svg"
793
+ viewBox="0 0 32 32"
794
+ fill="currentColor"
795
+ aria-hidden="true"
796
+ role="img"
797
+ width="1em"
798
+ height="1em"
799
+ >
800
+ <path
801
+ 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"
802
+ />
803
+ </svg>
558
804
  </span>
559
805
  <h2
560
806
  class="pf-v6-c-notification-drawer__list-item-header-title pf-m-truncate"
@@ -572,7 +818,19 @@ section: components
572
818
  id="drawer-demo-notification-drawer-basic-menu-toggle-7"
573
819
  >
574
820
  <span class="pf-v6-c-menu-toggle__icon">
575
- <i class="fas fa-ellipsis-v" 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="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"
832
+ />
833
+ </svg>
576
834
  </span>
577
835
  </button>
578
836
  </div>
@@ -590,7 +848,19 @@ section: components
590
848
  <span
591
849
  class="pf-v6-c-notification-drawer__list-item-header-icon"
592
850
  >
593
- <i class="fas fa-check-circle" aria-hidden="true"></i>
851
+ <svg
852
+ class="pf-v6-svg"
853
+ viewBox="0 0 32 32"
854
+ fill="currentColor"
855
+ aria-hidden="true"
856
+ role="img"
857
+ width="1em"
858
+ height="1em"
859
+ >
860
+ <path
861
+ 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"
862
+ />
863
+ </svg>
594
864
  </span>
595
865
  <h2
596
866
  class="pf-v6-c-notification-drawer__list-item-header-title pf-m-truncate"
@@ -609,7 +879,19 @@ section: components
609
879
  id="drawer-demo-notification-drawer-basic-menu-toggle-8"
610
880
  >
611
881
  <span class="pf-v6-c-menu-toggle__icon">
612
- <i class="fas fa-ellipsis-v" 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="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"
893
+ />
894
+ </svg>
613
895
  </span>
614
896
  </button>
615
897
  </div>
@@ -627,7 +909,19 @@ section: components
627
909
  <span
628
910
  class="pf-v6-c-notification-drawer__list-item-header-icon"
629
911
  >
630
- <i class="fas fa-check-circle" aria-hidden="true"></i>
912
+ <svg
913
+ class="pf-v6-svg"
914
+ viewBox="0 0 32 32"
915
+ fill="currentColor"
916
+ aria-hidden="true"
917
+ role="img"
918
+ width="1em"
919
+ height="1em"
920
+ >
921
+ <path
922
+ 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"
923
+ />
924
+ </svg>
631
925
  </span>
632
926
  <h2
633
927
  class="pf-v6-c-notification-drawer__list-item-header-title"
@@ -671,7 +965,8 @@ section: components
671
965
  <span class="pf-v6-c-button__text">Skip to content</span>
672
966
  </a>
673
967
  </div>
674
- <header class="pf-v6-c-masthead" id="-page-masthead">
968
+
969
+ <header class="pf-v6-c-masthead" id="-page-docked">
675
970
  <div class="pf-v6-c-masthead__main">
676
971
  <span class="pf-v6-c-masthead__toggle">
677
972
  <button
@@ -713,7 +1008,7 @@ section: components
713
1008
  y1="2.25860997e-13%"
714
1009
  x2="32%"
715
1010
  y2="100%"
716
- id="linearGradient--page-masthead"
1011
+ id="linearGradient--page-docked"
717
1012
  >
718
1013
  <stop stop-color="#2B9AF3" offset="0%" />
719
1014
  <stop
@@ -767,11 +1062,11 @@ section: components
767
1062
  />
768
1063
  <path
769
1064
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
770
- fill="url(#linearGradient--page-masthead)"
1065
+ fill="url(#linearGradient--page-docked)"
771
1066
  />
772
1067
  <path
773
1068
  d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z"
774
- fill="url(#linearGradient--page-masthead)"
1069
+ fill="url(#linearGradient--page-docked)"
775
1070
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
776
1071
  />
777
1072
  </g>
@@ -781,7 +1076,7 @@ section: components
781
1076
  </div>
782
1077
  </div>
783
1078
  <div class="pf-v6-c-masthead__content">
784
- <div class="pf-v6-c-toolbar pf-m-static" id="-page-masthead-toolbar">
1079
+ <div class="pf-v6-c-toolbar pf-m-static" id="-page-docked-toolbar">
785
1080
  <div class="pf-v6-c-toolbar__content">
786
1081
  <div class="pf-v6-c-toolbar__content-section">
787
1082
  <div
@@ -795,7 +1090,19 @@ section: components
795
1090
  aria-label="Notifications"
796
1091
  >
797
1092
  <span class="pf-v6-c-button__icon">
798
- <i class="pf-v6-pficon-bell" aria-hidden="true"></i>
1093
+ <svg
1094
+ class="pf-v6-svg"
1095
+ viewBox="0 0 32 32"
1096
+ fill="currentColor"
1097
+ aria-hidden="true"
1098
+ role="img"
1099
+ width="1em"
1100
+ height="1em"
1101
+ >
1102
+ <path
1103
+ d="M28.75 22v3.5c0 .689-.561 1.25-1.25 1.25h-7.521c.005.084.021.166.021.25 0 2.206-1.794 4-4 4s-4-1.794-4-4c0-.084.016-.166.021-.25H4.5c-.689 0-1.25-.561-1.25-1.25V22a.75.75 0 0 1 .75-.75c1.24 0 2.25-1.009 2.25-2.25v-4c0-4.826 3.528-8.833 8.138-9.605A2.482 2.482 0 0 1 13.5 3.5C13.5 2.122 14.621 1 16 1s2.5 1.122 2.5 2.5c0 .761-.349 1.436-.888 1.895 4.61.772 8.138 4.779 8.138 9.605v4c0 1.241 1.01 2.25 2.25 2.25a.75.75 0 0 1 .75.75Z"
1104
+ />
1105
+ </svg>
799
1106
  </span>
800
1107
  </button>
801
1108
  </div>
@@ -811,7 +1118,19 @@ section: components
811
1118
  aria-label="Application launcher"
812
1119
  >
813
1120
  <span class="pf-v6-c-menu-toggle__icon">
814
- <i class="fas fa-th" aria-hidden="true"></i>
1121
+ <svg
1122
+ class="pf-v6-svg"
1123
+ viewBox="0 0 512 512"
1124
+ fill="currentColor"
1125
+ aria-hidden="true"
1126
+ role="img"
1127
+ width="1em"
1128
+ height="1em"
1129
+ >
1130
+ <path
1131
+ d="M149.333 56v80c0 13.255-10.745 24-24 24H24c-13.255 0-24-10.745-24-24V56c0-13.255 10.745-24 24-24h101.333c13.255 0 24 10.745 24 24zm181.334 240v-80c0-13.255-10.745-24-24-24H205.333c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24h101.333c13.256 0 24.001-10.745 24.001-24zm32-240v80c0 13.255 10.745 24 24 24H488c13.255 0 24-10.745 24-24V56c0-13.255-10.745-24-24-24H386.667c-13.255 0-24 10.745-24 24zm-32 80V56c0-13.255-10.745-24-24-24H205.333c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24h101.333c13.256 0 24.001-10.745 24.001-24zm-205.334 56H24c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24h101.333c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24zM0 376v80c0 13.255 10.745 24 24 24h101.333c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H24c-13.255 0-24 10.745-24 24zm386.667-56H488c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H386.667c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24zm0 160H488c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H386.667c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24zM181.333 376v80c0 13.255 10.745 24 24 24h101.333c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H205.333c-13.255 0-24 10.745-24 24z"
1132
+ />
1133
+ </svg>
815
1134
  </span>
816
1135
  </button>
817
1136
  </div>
@@ -823,7 +1142,19 @@ section: components
823
1142
  aria-label="Settings"
824
1143
  >
825
1144
  <span class="pf-v6-c-menu-toggle__icon">
826
- <i class="fas fa-cog" aria-hidden="true"></i>
1145
+ <svg
1146
+ class="pf-v6-svg"
1147
+ viewBox="0 0 32 32"
1148
+ fill="currentColor"
1149
+ aria-hidden="true"
1150
+ role="img"
1151
+ width="1em"
1152
+ height="1em"
1153
+ >
1154
+ <path
1155
+ d="M30.168 12.894a.5.5 0 0 0-.488-.394h-2.732a11.512 11.512 0 0 0-.729-1.769l1.931-1.93a.5.5 0 0 0 .066-.625 14.693 14.693 0 0 0-4.393-4.392.498.498 0 0 0-.624.067l-1.93 1.93a11.512 11.512 0 0 0-1.769-.729V2.319a.5.5 0 0 0-.395-.489 14.81 14.81 0 0 0-6.211 0 .5.5 0 0 0-.395.489v2.733c-.614.196-1.207.439-1.769.729L8.8 3.851a.498.498 0 0 0-.624-.067 14.714 14.714 0 0 0-4.393 4.392.5.5 0 0 0 .066.625l1.931 1.93a11.512 11.512 0 0 0-.729 1.769H2.319a.5.5 0 0 0-.488.394 14.652 14.652 0 0 0 0 6.212.5.5 0 0 0 .488.394h2.732c.196.615.44 1.207.729 1.769l-1.931 1.93a.5.5 0 0 0-.066.625 14.673 14.673 0 0 0 4.393 4.392.498.498 0 0 0 .624-.067l1.93-1.93c.562.289 1.154.533 1.769.729v2.733a.5.5 0 0 0 .395.489 14.686 14.686 0 0 0 6.21 0 .5.5 0 0 0 .395-.489v-2.733a11.454 11.454 0 0 0 1.769-.729l1.93 1.93a.5.5 0 0 0 .624.067 14.714 14.714 0 0 0 4.393-4.392.5.5 0 0 0-.066-.625l-1.931-1.93c.289-.562.533-1.154.729-1.769h2.732a.5.5 0 0 0 .488-.394 14.652 14.652 0 0 0 0-6.212ZM16 21.25c-2.895 0-5.25-2.355-5.25-5.25s2.355-5.25 5.25-5.25 5.25 2.355 5.25 5.25-2.355 5.25-5.25 5.25Z"
1156
+ />
1157
+ </svg>
827
1158
  </span>
828
1159
  </button>
829
1160
  </div>
@@ -835,7 +1166,19 @@ section: components
835
1166
  aria-label="Help"
836
1167
  >
837
1168
  <span class="pf-v6-c-menu-toggle__icon">
838
- <i class="fas fa-question-circle" aria-hidden="true"></i>
1169
+ <svg
1170
+ class="pf-v6-svg"
1171
+ viewBox="0 0 512 512"
1172
+ fill="currentColor"
1173
+ aria-hidden="true"
1174
+ role="img"
1175
+ width="1em"
1176
+ height="1em"
1177
+ >
1178
+ <path
1179
+ d="M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zM262.655 90c-54.497 0-89.255 22.957-116.549 63.758-3.536 5.286-2.353 12.415 2.715 16.258l34.699 26.31c5.205 3.947 12.621 3.008 16.665-2.122 17.864-22.658 30.113-35.797 57.303-35.797 20.429 0 45.698 13.148 45.698 32.958 0 14.976-12.363 22.667-32.534 33.976C247.128 238.528 216 254.941 216 296v4c0 6.627 5.373 12 12 12h56c6.627 0 12-5.373 12-12v-1.333c0-28.462 83.186-29.647 83.186-106.667 0-58.002-60.165-102-116.531-102zM256 338c-25.365 0-46 20.635-46 46 0 25.364 20.635 46 46 46s46-20.636 46-46c0-25.365-20.635-46-46-46z"
1180
+ />
1181
+ </svg>
839
1182
  </span>
840
1183
  </button>
841
1184
  </div>
@@ -849,7 +1192,19 @@ section: components
849
1192
  aria-label="Actions"
850
1193
  >
851
1194
  <span class="pf-v6-c-menu-toggle__icon">
852
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1195
+ <svg
1196
+ class="pf-v6-svg"
1197
+ viewBox="0 0 32 32"
1198
+ fill="currentColor"
1199
+ aria-hidden="true"
1200
+ role="img"
1201
+ width="1em"
1202
+ height="1em"
1203
+ >
1204
+ <path
1205
+ 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"
1206
+ />
1207
+ </svg>
853
1208
  </span>
854
1209
  </button>
855
1210
  </div>
@@ -860,40 +1215,42 @@ section: components
860
1215
  </div>
861
1216
  </header>
862
1217
  <div class="pf-v6-c-page__sidebar">
863
- <div class="pf-v6-c-page__sidebar-body">
864
- <nav class="pf-v6-c-nav" id="-page-primary-nav" aria-label="Global">
865
- <ul class="pf-v6-c-nav__list" role="list">
866
- <li class="pf-v6-c-nav__item">
867
- <a href="#" class="pf-v6-c-nav__link">
868
- <span class="pf-v6-c-nav__link-text">System panel</span>
869
- </a>
870
- </li>
871
- <li class="pf-v6-c-nav__item">
872
- <a
873
- href="#"
874
- class="pf-v6-c-nav__link pf-m-current"
875
- aria-current="page"
876
- >
877
- <span class="pf-v6-c-nav__link-text">Policy</span>
878
- </a>
879
- </li>
880
- <li class="pf-v6-c-nav__item">
881
- <a href="#" class="pf-v6-c-nav__link">
882
- <span class="pf-v6-c-nav__link-text">Authentication</span>
883
- </a>
884
- </li>
885
- <li class="pf-v6-c-nav__item">
886
- <a href="#" class="pf-v6-c-nav__link">
887
- <span class="pf-v6-c-nav__link-text">Network services</span>
888
- </a>
889
- </li>
890
- <li class="pf-v6-c-nav__item">
891
- <a href="#" class="pf-v6-c-nav__link">
892
- <span class="pf-v6-c-nav__link-text">Server</span>
893
- </a>
894
- </li>
895
- </ul>
896
- </nav>
1218
+ <div class="pf-v6-c-page__sidebar-main">
1219
+ <div class="pf-v6-c-page__sidebar-body">
1220
+ <nav class="pf-v6-c-nav" id="-page-primary-nav" aria-label="Global">
1221
+ <ul class="pf-v6-c-nav__list" role="list">
1222
+ <li class="pf-v6-c-nav__item">
1223
+ <a href="#" class="pf-v6-c-nav__link">
1224
+ <span class="pf-v6-c-nav__link-text">System panel</span>
1225
+ </a>
1226
+ </li>
1227
+ <li class="pf-v6-c-nav__item">
1228
+ <a
1229
+ href="#"
1230
+ class="pf-v6-c-nav__link pf-m-current"
1231
+ aria-current="page"
1232
+ >
1233
+ <span class="pf-v6-c-nav__link-text">Policy</span>
1234
+ </a>
1235
+ </li>
1236
+ <li class="pf-v6-c-nav__item">
1237
+ <a href="#" class="pf-v6-c-nav__link">
1238
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
1239
+ </a>
1240
+ </li>
1241
+ <li class="pf-v6-c-nav__item">
1242
+ <a href="#" class="pf-v6-c-nav__link">
1243
+ <span class="pf-v6-c-nav__link-text">Network services</span>
1244
+ </a>
1245
+ </li>
1246
+ <li class="pf-v6-c-nav__item">
1247
+ <a href="#" class="pf-v6-c-nav__link">
1248
+ <span class="pf-v6-c-nav__link-text">Server</span>
1249
+ </a>
1250
+ </li>
1251
+ </ul>
1252
+ </nav>
1253
+ </div>
897
1254
  </div>
898
1255
  </div>
899
1256
  <div class="pf-v6-c-page__drawer">
@@ -914,7 +1271,19 @@ section: components
914
1271
  </li>
915
1272
  <li class="pf-v6-c-breadcrumb__item">
916
1273
  <span class="pf-v6-c-breadcrumb__item-divider">
917
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1274
+ <svg
1275
+ class="pf-v6-svg"
1276
+ viewBox="0 0 20 20"
1277
+ fill="currentColor"
1278
+ aria-hidden="true"
1279
+ role="img"
1280
+ width="1em"
1281
+ height="1em"
1282
+ >
1283
+ <path
1284
+ d="M14.35 8.94 6.71 1.29l-.02-.02c-.4-.38-1.03-.37-1.41.02-.38.4-.37 1.03.02 1.41l7.29 7.29-7.29 7.29a1.003 1.003 0 0 0 1.42 1.42l7.65-7.65c.59-.59.59-1.54 0-2.12Z"
1285
+ />
1286
+ </svg>
918
1287
  </span>
919
1288
 
920
1289
  <a
@@ -924,7 +1293,19 @@ section: components
924
1293
  </li>
925
1294
  <li class="pf-v6-c-breadcrumb__item">
926
1295
  <span class="pf-v6-c-breadcrumb__item-divider">
927
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1296
+ <svg
1297
+ class="pf-v6-svg"
1298
+ viewBox="0 0 20 20"
1299
+ fill="currentColor"
1300
+ aria-hidden="true"
1301
+ role="img"
1302
+ width="1em"
1303
+ height="1em"
1304
+ >
1305
+ <path
1306
+ d="M14.35 8.94 6.71 1.29l-.02-.02c-.4-.38-1.03-.37-1.41.02-.38.4-.37 1.03.02 1.41l7.29 7.29-7.29 7.29a1.003 1.003 0 0 0 1.42 1.42l7.65-7.65c.59-.59.59-1.54 0-2.12Z"
1307
+ />
1308
+ </svg>
928
1309
  </span>
929
1310
 
930
1311
  <a
@@ -934,7 +1315,19 @@ section: components
934
1315
  </li>
935
1316
  <li class="pf-v6-c-breadcrumb__item">
936
1317
  <span class="pf-v6-c-breadcrumb__item-divider">
937
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1318
+ <svg
1319
+ class="pf-v6-svg"
1320
+ viewBox="0 0 20 20"
1321
+ fill="currentColor"
1322
+ aria-hidden="true"
1323
+ role="img"
1324
+ width="1em"
1325
+ height="1em"
1326
+ >
1327
+ <path
1328
+ d="M14.35 8.94 6.71 1.29l-.02-.02c-.4-.38-1.03-.37-1.41.02-.38.4-.37 1.03.02 1.41l7.29 7.29-7.29 7.29a1.003 1.003 0 0 0 1.42 1.42l7.65-7.65c.59-.59.59-1.54 0-2.12Z"
1329
+ />
1330
+ </svg>
938
1331
  </span>
939
1332
 
940
1333
  <a
@@ -947,9 +1340,15 @@ section: components
947
1340
  </nav>
948
1341
  </div>
949
1342
  </section>
950
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
1343
+ <section
1344
+ class="pf-v6-c-page__main-section pf-m-limit-width"
1345
+ aria-labelledby="main-title"
1346
+ >
951
1347
  <div class="pf-v6-c-page__main-body">
952
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
1348
+ <h1
1349
+ class="pf-v6-c-content--h1 pf-m-page-title"
1350
+ id="main-title"
1351
+ >Main title</h1>
953
1352
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
954
1353
  </div>
955
1354
  </section>
@@ -1011,7 +1410,19 @@ section: components
1011
1410
  id="drawer-demo-notification-drawer-basic-header-action"
1012
1411
  >
1013
1412
  <span class="pf-v6-c-menu-toggle__icon">
1014
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1413
+ <svg
1414
+ class="pf-v6-svg"
1415
+ viewBox="0 0 32 32"
1416
+ fill="currentColor"
1417
+ aria-hidden="true"
1418
+ role="img"
1419
+ width="1em"
1420
+ height="1em"
1421
+ >
1422
+ <path
1423
+ 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"
1424
+ />
1425
+ </svg>
1015
1426
  </span>
1016
1427
  </button>
1017
1428
  </div>
@@ -1025,7 +1436,19 @@ section: components
1025
1436
  <span
1026
1437
  class="pf-v6-c-notification-drawer__list-item-header-icon"
1027
1438
  >
1028
- <i class="fas fa-info-circle" aria-hidden="true"></i>
1439
+ <svg
1440
+ class="pf-v6-svg"
1441
+ viewBox="0 0 32 32"
1442
+ fill="currentColor"
1443
+ aria-hidden="true"
1444
+ role="img"
1445
+ width="1em"
1446
+ height="1em"
1447
+ >
1448
+ <path
1449
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm1.5 22a1.5 1.5 0 1 1-3 0v-5.157l-.188.04a1.5 1.5 0 0 1-.625-2.934l1.956-.416c.112-.024.223-.032.333-.03l.024-.002a1.5 1.5 0 0 1 1.5 1.5v7Zm-.08-12.58c-.38.37-.89.58-1.42.58a1.998 1.998 0 0 1-1.851-2.76c.051-.13.11-.24.19-.35.07-.11.15-.21.25-.3.74-.75 2.08-.75 2.83 0 .09.09.17.19.24.3.08.11.14.22.189.35.05.12.09.24.11.37.03.13.04.26.04.39 0 .53-.21 1.04-.58 1.42Z"
1450
+ />
1451
+ </svg>
1029
1452
  </span>
1030
1453
  <h2
1031
1454
  class="pf-v6-c-notification-drawer__list-item-header-title"
@@ -1044,7 +1467,19 @@ section: components
1044
1467
  id="drawer-demo-notification-drawer-basic-menu-toggle-1"
1045
1468
  >
1046
1469
  <span class="pf-v6-c-menu-toggle__icon">
1047
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1470
+ <svg
1471
+ class="pf-v6-svg"
1472
+ viewBox="0 0 32 32"
1473
+ fill="currentColor"
1474
+ aria-hidden="true"
1475
+ role="img"
1476
+ width="1em"
1477
+ height="1em"
1478
+ >
1479
+ <path
1480
+ 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"
1481
+ />
1482
+ </svg>
1048
1483
  </span>
1049
1484
  </button>
1050
1485
  </div>
@@ -1063,7 +1498,19 @@ section: components
1063
1498
  <span
1064
1499
  class="pf-v6-c-notification-drawer__list-item-header-icon"
1065
1500
  >
1066
- <i class="fas fa-arrow-circle-up" aria-hidden="true"></i>
1501
+ <svg
1502
+ class="pf-v6-svg"
1503
+ viewBox="0 0 32 32"
1504
+ fill="currentColor"
1505
+ aria-hidden="true"
1506
+ role="img"
1507
+ width="1em"
1508
+ height="1em"
1509
+ >
1510
+ <path
1511
+ d="M28.75 22v3.5c0 .689-.561 1.25-1.25 1.25h-7.521c.005.084.021.166.021.25 0 2.206-1.794 4-4 4s-4-1.794-4-4c0-.084.016-.166.021-.25H4.5c-.689 0-1.25-.561-1.25-1.25V22a.75.75 0 0 1 .75-.75c1.24 0 2.25-1.009 2.25-2.25v-4c0-4.826 3.528-8.833 8.138-9.605A2.482 2.482 0 0 1 13.5 3.5C13.5 2.122 14.621 1 16 1s2.5 1.122 2.5 2.5c0 .761-.349 1.436-.888 1.895 4.61.772 8.138 4.779 8.138 9.605v4c0 1.241 1.01 2.25 2.25 2.25a.75.75 0 0 1 .75.75Z"
1512
+ />
1513
+ </svg>
1067
1514
  </span>
1068
1515
  <h2
1069
1516
  class="pf-v6-c-notification-drawer__list-item-header-title"
@@ -1082,7 +1529,19 @@ section: components
1082
1529
  id="drawer-demo-notification-drawer-basic-menu-toggle-3"
1083
1530
  >
1084
1531
  <span class="pf-v6-c-menu-toggle__icon">
1085
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
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="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"
1543
+ />
1544
+ </svg>
1086
1545
  </span>
1087
1546
  </button>
1088
1547
  </div>
@@ -1101,7 +1560,19 @@ section: components
1101
1560
  <span
1102
1561
  class="pf-v6-c-notification-drawer__list-item-header-icon"
1103
1562
  >
1104
- <i class="fas fa-arrow-circle-up" aria-hidden="true"></i>
1563
+ <svg
1564
+ class="pf-v6-svg"
1565
+ viewBox="0 0 32 32"
1566
+ fill="currentColor"
1567
+ aria-hidden="true"
1568
+ role="img"
1569
+ width="1em"
1570
+ height="1em"
1571
+ >
1572
+ <path
1573
+ d="M28.75 22v3.5c0 .689-.561 1.25-1.25 1.25h-7.521c.005.084.021.166.021.25 0 2.206-1.794 4-4 4s-4-1.794-4-4c0-.084.016-.166.021-.25H4.5c-.689 0-1.25-.561-1.25-1.25V22a.75.75 0 0 1 .75-.75c1.24 0 2.25-1.009 2.25-2.25v-4c0-4.826 3.528-8.833 8.138-9.605A2.482 2.482 0 0 1 13.5 3.5C13.5 2.122 14.621 1 16 1s2.5 1.122 2.5 2.5c0 .761-.349 1.436-.888 1.895 4.61.772 8.138 4.779 8.138 9.605v4c0 1.241 1.01 2.25 2.25 2.25a.75.75 0 0 1 .75.75Z"
1574
+ />
1575
+ </svg>
1105
1576
  </span>
1106
1577
  <h2
1107
1578
  class="pf-v6-c-notification-drawer__list-item-header-title"
@@ -1120,7 +1591,19 @@ section: components
1120
1591
  id="drawer-demo-notification-drawer-basic-menu-toggle-4"
1121
1592
  >
1122
1593
  <span class="pf-v6-c-menu-toggle__icon">
1123
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1594
+ <svg
1595
+ class="pf-v6-svg"
1596
+ viewBox="0 0 32 32"
1597
+ fill="currentColor"
1598
+ aria-hidden="true"
1599
+ role="img"
1600
+ width="1em"
1601
+ height="1em"
1602
+ >
1603
+ <path
1604
+ 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"
1605
+ />
1606
+ </svg>
1124
1607
  </span>
1125
1608
  </button>
1126
1609
  </div>
@@ -1138,10 +1621,19 @@ section: components
1138
1621
  <span
1139
1622
  class="pf-v6-c-notification-drawer__list-item-header-icon"
1140
1623
  >
1141
- <i
1142
- class="fas fa-exclamation-triangle"
1624
+ <svg
1625
+ class="pf-v6-svg"
1626
+ viewBox="0 0 32 32"
1627
+ fill="currentColor"
1143
1628
  aria-hidden="true"
1144
- ></i>
1629
+ role="img"
1630
+ width="1em"
1631
+ height="1em"
1632
+ >
1633
+ <path
1634
+ 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"
1635
+ />
1636
+ </svg>
1145
1637
  </span>
1146
1638
  <h2
1147
1639
  class="pf-v6-c-notification-drawer__list-item-header-title"
@@ -1159,7 +1651,19 @@ section: components
1159
1651
  id="drawer-demo-notification-drawer-basic-menu-toggle-5"
1160
1652
  >
1161
1653
  <span class="pf-v6-c-menu-toggle__icon">
1162
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1654
+ <svg
1655
+ class="pf-v6-svg"
1656
+ viewBox="0 0 32 32"
1657
+ fill="currentColor"
1658
+ aria-hidden="true"
1659
+ role="img"
1660
+ width="1em"
1661
+ height="1em"
1662
+ >
1663
+ <path
1664
+ 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"
1665
+ />
1666
+ </svg>
1163
1667
  </span>
1164
1668
  </button>
1165
1669
  </div>
@@ -1177,7 +1681,19 @@ section: components
1177
1681
  <span
1178
1682
  class="pf-v6-c-notification-drawer__list-item-header-icon"
1179
1683
  >
1180
- <i class="fas fa-check-circle" aria-hidden="true"></i>
1684
+ <svg
1685
+ class="pf-v6-svg"
1686
+ viewBox="0 0 32 32"
1687
+ fill="currentColor"
1688
+ aria-hidden="true"
1689
+ role="img"
1690
+ width="1em"
1691
+ height="1em"
1692
+ >
1693
+ <path
1694
+ 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"
1695
+ />
1696
+ </svg>
1181
1697
  </span>
1182
1698
  <h2
1183
1699
  class="pf-v6-c-notification-drawer__list-item-header-title"
@@ -1195,7 +1711,19 @@ section: components
1195
1711
  id="drawer-demo-notification-drawer-basic-menu-toggle-6"
1196
1712
  >
1197
1713
  <span class="pf-v6-c-menu-toggle__icon">
1198
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1714
+ <svg
1715
+ class="pf-v6-svg"
1716
+ viewBox="0 0 32 32"
1717
+ fill="currentColor"
1718
+ aria-hidden="true"
1719
+ role="img"
1720
+ width="1em"
1721
+ height="1em"
1722
+ >
1723
+ <path
1724
+ 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"
1725
+ />
1726
+ </svg>
1199
1727
  </span>
1200
1728
  </button>
1201
1729
  </div>
@@ -1213,7 +1741,19 @@ section: components
1213
1741
  <span
1214
1742
  class="pf-v6-c-notification-drawer__list-item-header-icon"
1215
1743
  >
1216
- <i class="fas fa-check-circle" aria-hidden="true"></i>
1744
+ <svg
1745
+ class="pf-v6-svg"
1746
+ viewBox="0 0 32 32"
1747
+ fill="currentColor"
1748
+ aria-hidden="true"
1749
+ role="img"
1750
+ width="1em"
1751
+ height="1em"
1752
+ >
1753
+ <path
1754
+ 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"
1755
+ />
1756
+ </svg>
1217
1757
  </span>
1218
1758
  <h2
1219
1759
  class="pf-v6-c-notification-drawer__list-item-header-title pf-m-truncate"
@@ -1231,7 +1771,19 @@ section: components
1231
1771
  id="drawer-demo-notification-drawer-basic-menu-toggle-7"
1232
1772
  >
1233
1773
  <span class="pf-v6-c-menu-toggle__icon">
1234
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1774
+ <svg
1775
+ class="pf-v6-svg"
1776
+ viewBox="0 0 32 32"
1777
+ fill="currentColor"
1778
+ aria-hidden="true"
1779
+ role="img"
1780
+ width="1em"
1781
+ height="1em"
1782
+ >
1783
+ <path
1784
+ 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"
1785
+ />
1786
+ </svg>
1235
1787
  </span>
1236
1788
  </button>
1237
1789
  </div>
@@ -1249,7 +1801,19 @@ section: components
1249
1801
  <span
1250
1802
  class="pf-v6-c-notification-drawer__list-item-header-icon"
1251
1803
  >
1252
- <i class="fas fa-check-circle" aria-hidden="true"></i>
1804
+ <svg
1805
+ class="pf-v6-svg"
1806
+ viewBox="0 0 32 32"
1807
+ fill="currentColor"
1808
+ aria-hidden="true"
1809
+ role="img"
1810
+ width="1em"
1811
+ height="1em"
1812
+ >
1813
+ <path
1814
+ 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"
1815
+ />
1816
+ </svg>
1253
1817
  </span>
1254
1818
  <h2
1255
1819
  class="pf-v6-c-notification-drawer__list-item-header-title pf-m-truncate"
@@ -1268,7 +1832,19 @@ section: components
1268
1832
  id="drawer-demo-notification-drawer-basic-menu-toggle-8"
1269
1833
  >
1270
1834
  <span class="pf-v6-c-menu-toggle__icon">
1271
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
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="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"
1846
+ />
1847
+ </svg>
1272
1848
  </span>
1273
1849
  </button>
1274
1850
  </div>
@@ -1286,7 +1862,19 @@ section: components
1286
1862
  <span
1287
1863
  class="pf-v6-c-notification-drawer__list-item-header-icon"
1288
1864
  >
1289
- <i class="fas fa-check-circle" aria-hidden="true"></i>
1865
+ <svg
1866
+ class="pf-v6-svg"
1867
+ viewBox="0 0 32 32"
1868
+ fill="currentColor"
1869
+ aria-hidden="true"
1870
+ role="img"
1871
+ width="1em"
1872
+ height="1em"
1873
+ >
1874
+ <path
1875
+ 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"
1876
+ />
1877
+ </svg>
1290
1878
  </span>
1291
1879
  <h2
1292
1880
  class="pf-v6-c-notification-drawer__list-item-header-title"
@@ -1330,7 +1918,8 @@ section: components
1330
1918
  <span class="pf-v6-c-button__text">Skip to content</span>
1331
1919
  </a>
1332
1920
  </div>
1333
- <header class="pf-v6-c-masthead" id="-page-masthead">
1921
+
1922
+ <header class="pf-v6-c-masthead" id="-page-docked">
1334
1923
  <div class="pf-v6-c-masthead__main">
1335
1924
  <span class="pf-v6-c-masthead__toggle">
1336
1925
  <button
@@ -1372,7 +1961,7 @@ section: components
1372
1961
  y1="2.25860997e-13%"
1373
1962
  x2="32%"
1374
1963
  y2="100%"
1375
- id="linearGradient--page-masthead"
1964
+ id="linearGradient--page-docked"
1376
1965
  >
1377
1966
  <stop stop-color="#2B9AF3" offset="0%" />
1378
1967
  <stop
@@ -1426,11 +2015,11 @@ section: components
1426
2015
  />
1427
2016
  <path
1428
2017
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
1429
- fill="url(#linearGradient--page-masthead)"
2018
+ fill="url(#linearGradient--page-docked)"
1430
2019
  />
1431
2020
  <path
1432
2021
  d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z"
1433
- fill="url(#linearGradient--page-masthead)"
2022
+ fill="url(#linearGradient--page-docked)"
1434
2023
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
1435
2024
  />
1436
2025
  </g>
@@ -1440,7 +2029,7 @@ section: components
1440
2029
  </div>
1441
2030
  </div>
1442
2031
  <div class="pf-v6-c-masthead__content">
1443
- <div class="pf-v6-c-toolbar pf-m-static" id="-page-masthead-toolbar">
2032
+ <div class="pf-v6-c-toolbar pf-m-static" id="-page-docked-toolbar">
1444
2033
  <div class="pf-v6-c-toolbar__content">
1445
2034
  <div class="pf-v6-c-toolbar__content-section">
1446
2035
  <div
@@ -1454,7 +2043,19 @@ section: components
1454
2043
  aria-label="Unread notifications"
1455
2044
  >
1456
2045
  <span class="pf-v6-c-button__icon">
1457
- <i class="pf-v6-pficon-bell" aria-hidden="true"></i>
2046
+ <svg
2047
+ class="pf-v6-svg"
2048
+ viewBox="0 0 32 32"
2049
+ fill="currentColor"
2050
+ aria-hidden="true"
2051
+ role="img"
2052
+ width="1em"
2053
+ height="1em"
2054
+ >
2055
+ <path
2056
+ d="M28.75 22v3.5c0 .689-.561 1.25-1.25 1.25h-7.521c.005.084.021.166.021.25 0 2.206-1.794 4-4 4s-4-1.794-4-4c0-.084.016-.166.021-.25H4.5c-.689 0-1.25-.561-1.25-1.25V22a.75.75 0 0 1 .75-.75c1.24 0 2.25-1.009 2.25-2.25v-4c0-4.826 3.528-8.833 8.138-9.605A2.482 2.482 0 0 1 13.5 3.5C13.5 2.122 14.621 1 16 1s2.5 1.122 2.5 2.5c0 .761-.349 1.436-.888 1.895 4.61.772 8.138 4.779 8.138 9.605v4c0 1.241 1.01 2.25 2.25 2.25a.75.75 0 0 1 .75.75Z"
2057
+ />
2058
+ </svg>
1458
2059
  </span>
1459
2060
  </button>
1460
2061
  </div>
@@ -1470,7 +2071,19 @@ section: components
1470
2071
  aria-label="Application launcher"
1471
2072
  >
1472
2073
  <span class="pf-v6-c-menu-toggle__icon">
1473
- <i class="fas fa-th" aria-hidden="true"></i>
2074
+ <svg
2075
+ class="pf-v6-svg"
2076
+ viewBox="0 0 512 512"
2077
+ fill="currentColor"
2078
+ aria-hidden="true"
2079
+ role="img"
2080
+ width="1em"
2081
+ height="1em"
2082
+ >
2083
+ <path
2084
+ d="M149.333 56v80c0 13.255-10.745 24-24 24H24c-13.255 0-24-10.745-24-24V56c0-13.255 10.745-24 24-24h101.333c13.255 0 24 10.745 24 24zm181.334 240v-80c0-13.255-10.745-24-24-24H205.333c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24h101.333c13.256 0 24.001-10.745 24.001-24zm32-240v80c0 13.255 10.745 24 24 24H488c13.255 0 24-10.745 24-24V56c0-13.255-10.745-24-24-24H386.667c-13.255 0-24 10.745-24 24zm-32 80V56c0-13.255-10.745-24-24-24H205.333c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24h101.333c13.256 0 24.001-10.745 24.001-24zm-205.334 56H24c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24h101.333c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24zM0 376v80c0 13.255 10.745 24 24 24h101.333c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H24c-13.255 0-24 10.745-24 24zm386.667-56H488c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H386.667c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24zm0 160H488c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H386.667c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24zM181.333 376v80c0 13.255 10.745 24 24 24h101.333c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H205.333c-13.255 0-24 10.745-24 24z"
2085
+ />
2086
+ </svg>
1474
2087
  </span>
1475
2088
  </button>
1476
2089
  </div>
@@ -1482,7 +2095,19 @@ section: components
1482
2095
  aria-label="Settings"
1483
2096
  >
1484
2097
  <span class="pf-v6-c-menu-toggle__icon">
1485
- <i class="fas fa-cog" aria-hidden="true"></i>
2098
+ <svg
2099
+ class="pf-v6-svg"
2100
+ viewBox="0 0 32 32"
2101
+ fill="currentColor"
2102
+ aria-hidden="true"
2103
+ role="img"
2104
+ width="1em"
2105
+ height="1em"
2106
+ >
2107
+ <path
2108
+ d="M30.168 12.894a.5.5 0 0 0-.488-.394h-2.732a11.512 11.512 0 0 0-.729-1.769l1.931-1.93a.5.5 0 0 0 .066-.625 14.693 14.693 0 0 0-4.393-4.392.498.498 0 0 0-.624.067l-1.93 1.93a11.512 11.512 0 0 0-1.769-.729V2.319a.5.5 0 0 0-.395-.489 14.81 14.81 0 0 0-6.211 0 .5.5 0 0 0-.395.489v2.733c-.614.196-1.207.439-1.769.729L8.8 3.851a.498.498 0 0 0-.624-.067 14.714 14.714 0 0 0-4.393 4.392.5.5 0 0 0 .066.625l1.931 1.93a11.512 11.512 0 0 0-.729 1.769H2.319a.5.5 0 0 0-.488.394 14.652 14.652 0 0 0 0 6.212.5.5 0 0 0 .488.394h2.732c.196.615.44 1.207.729 1.769l-1.931 1.93a.5.5 0 0 0-.066.625 14.673 14.673 0 0 0 4.393 4.392.498.498 0 0 0 .624-.067l1.93-1.93c.562.289 1.154.533 1.769.729v2.733a.5.5 0 0 0 .395.489 14.686 14.686 0 0 0 6.21 0 .5.5 0 0 0 .395-.489v-2.733a11.454 11.454 0 0 0 1.769-.729l1.93 1.93a.5.5 0 0 0 .624.067 14.714 14.714 0 0 0 4.393-4.392.5.5 0 0 0-.066-.625l-1.931-1.93c.289-.562.533-1.154.729-1.769h2.732a.5.5 0 0 0 .488-.394 14.652 14.652 0 0 0 0-6.212ZM16 21.25c-2.895 0-5.25-2.355-5.25-5.25s2.355-5.25 5.25-5.25 5.25 2.355 5.25 5.25-2.355 5.25-5.25 5.25Z"
2109
+ />
2110
+ </svg>
1486
2111
  </span>
1487
2112
  </button>
1488
2113
  </div>
@@ -1494,7 +2119,19 @@ section: components
1494
2119
  aria-label="Help"
1495
2120
  >
1496
2121
  <span class="pf-v6-c-menu-toggle__icon">
1497
- <i class="fas fa-question-circle" aria-hidden="true"></i>
2122
+ <svg
2123
+ class="pf-v6-svg"
2124
+ viewBox="0 0 512 512"
2125
+ fill="currentColor"
2126
+ aria-hidden="true"
2127
+ role="img"
2128
+ width="1em"
2129
+ height="1em"
2130
+ >
2131
+ <path
2132
+ d="M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zM262.655 90c-54.497 0-89.255 22.957-116.549 63.758-3.536 5.286-2.353 12.415 2.715 16.258l34.699 26.31c5.205 3.947 12.621 3.008 16.665-2.122 17.864-22.658 30.113-35.797 57.303-35.797 20.429 0 45.698 13.148 45.698 32.958 0 14.976-12.363 22.667-32.534 33.976C247.128 238.528 216 254.941 216 296v4c0 6.627 5.373 12 12 12h56c6.627 0 12-5.373 12-12v-1.333c0-28.462 83.186-29.647 83.186-106.667 0-58.002-60.165-102-116.531-102zM256 338c-25.365 0-46 20.635-46 46 0 25.364 20.635 46 46 46s46-20.636 46-46c0-25.365-20.635-46-46-46z"
2133
+ />
2134
+ </svg>
1498
2135
  </span>
1499
2136
  </button>
1500
2137
  </div>
@@ -1508,7 +2145,19 @@ section: components
1508
2145
  aria-label="Actions"
1509
2146
  >
1510
2147
  <span class="pf-v6-c-menu-toggle__icon">
1511
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
2148
+ <svg
2149
+ class="pf-v6-svg"
2150
+ viewBox="0 0 32 32"
2151
+ fill="currentColor"
2152
+ aria-hidden="true"
2153
+ role="img"
2154
+ width="1em"
2155
+ height="1em"
2156
+ >
2157
+ <path
2158
+ 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"
2159
+ />
2160
+ </svg>
1512
2161
  </span>
1513
2162
  </button>
1514
2163
  </div>
@@ -1519,40 +2168,42 @@ section: components
1519
2168
  </div>
1520
2169
  </header>
1521
2170
  <div class="pf-v6-c-page__sidebar">
1522
- <div class="pf-v6-c-page__sidebar-body">
1523
- <nav class="pf-v6-c-nav" id="-page-primary-nav" aria-label="Global">
1524
- <ul class="pf-v6-c-nav__list" role="list">
1525
- <li class="pf-v6-c-nav__item">
1526
- <a href="#" class="pf-v6-c-nav__link">
1527
- <span class="pf-v6-c-nav__link-text">System panel</span>
1528
- </a>
1529
- </li>
1530
- <li class="pf-v6-c-nav__item">
1531
- <a
1532
- href="#"
1533
- class="pf-v6-c-nav__link pf-m-current"
1534
- aria-current="page"
1535
- >
1536
- <span class="pf-v6-c-nav__link-text">Policy</span>
1537
- </a>
1538
- </li>
1539
- <li class="pf-v6-c-nav__item">
1540
- <a href="#" class="pf-v6-c-nav__link">
1541
- <span class="pf-v6-c-nav__link-text">Authentication</span>
1542
- </a>
1543
- </li>
1544
- <li class="pf-v6-c-nav__item">
1545
- <a href="#" class="pf-v6-c-nav__link">
1546
- <span class="pf-v6-c-nav__link-text">Network services</span>
1547
- </a>
1548
- </li>
1549
- <li class="pf-v6-c-nav__item">
1550
- <a href="#" class="pf-v6-c-nav__link">
1551
- <span class="pf-v6-c-nav__link-text">Server</span>
1552
- </a>
1553
- </li>
1554
- </ul>
1555
- </nav>
2171
+ <div class="pf-v6-c-page__sidebar-main">
2172
+ <div class="pf-v6-c-page__sidebar-body">
2173
+ <nav class="pf-v6-c-nav" id="-page-primary-nav" aria-label="Global">
2174
+ <ul class="pf-v6-c-nav__list" role="list">
2175
+ <li class="pf-v6-c-nav__item">
2176
+ <a href="#" class="pf-v6-c-nav__link">
2177
+ <span class="pf-v6-c-nav__link-text">System panel</span>
2178
+ </a>
2179
+ </li>
2180
+ <li class="pf-v6-c-nav__item">
2181
+ <a
2182
+ href="#"
2183
+ class="pf-v6-c-nav__link pf-m-current"
2184
+ aria-current="page"
2185
+ >
2186
+ <span class="pf-v6-c-nav__link-text">Policy</span>
2187
+ </a>
2188
+ </li>
2189
+ <li class="pf-v6-c-nav__item">
2190
+ <a href="#" class="pf-v6-c-nav__link">
2191
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
2192
+ </a>
2193
+ </li>
2194
+ <li class="pf-v6-c-nav__item">
2195
+ <a href="#" class="pf-v6-c-nav__link">
2196
+ <span class="pf-v6-c-nav__link-text">Network services</span>
2197
+ </a>
2198
+ </li>
2199
+ <li class="pf-v6-c-nav__item">
2200
+ <a href="#" class="pf-v6-c-nav__link">
2201
+ <span class="pf-v6-c-nav__link-text">Server</span>
2202
+ </a>
2203
+ </li>
2204
+ </ul>
2205
+ </nav>
2206
+ </div>
1556
2207
  </div>
1557
2208
  </div>
1558
2209
  <div class="pf-v6-c-page__drawer">
@@ -1573,7 +2224,19 @@ section: components
1573
2224
  </li>
1574
2225
  <li class="pf-v6-c-breadcrumb__item">
1575
2226
  <span class="pf-v6-c-breadcrumb__item-divider">
1576
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2227
+ <svg
2228
+ class="pf-v6-svg"
2229
+ viewBox="0 0 20 20"
2230
+ fill="currentColor"
2231
+ aria-hidden="true"
2232
+ role="img"
2233
+ width="1em"
2234
+ height="1em"
2235
+ >
2236
+ <path
2237
+ d="M14.35 8.94 6.71 1.29l-.02-.02c-.4-.38-1.03-.37-1.41.02-.38.4-.37 1.03.02 1.41l7.29 7.29-7.29 7.29a1.003 1.003 0 0 0 1.42 1.42l7.65-7.65c.59-.59.59-1.54 0-2.12Z"
2238
+ />
2239
+ </svg>
1577
2240
  </span>
1578
2241
 
1579
2242
  <a
@@ -1583,7 +2246,19 @@ section: components
1583
2246
  </li>
1584
2247
  <li class="pf-v6-c-breadcrumb__item">
1585
2248
  <span class="pf-v6-c-breadcrumb__item-divider">
1586
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2249
+ <svg
2250
+ class="pf-v6-svg"
2251
+ viewBox="0 0 20 20"
2252
+ fill="currentColor"
2253
+ aria-hidden="true"
2254
+ role="img"
2255
+ width="1em"
2256
+ height="1em"
2257
+ >
2258
+ <path
2259
+ d="M14.35 8.94 6.71 1.29l-.02-.02c-.4-.38-1.03-.37-1.41.02-.38.4-.37 1.03.02 1.41l7.29 7.29-7.29 7.29a1.003 1.003 0 0 0 1.42 1.42l7.65-7.65c.59-.59.59-1.54 0-2.12Z"
2260
+ />
2261
+ </svg>
1587
2262
  </span>
1588
2263
 
1589
2264
  <a
@@ -1593,7 +2268,19 @@ section: components
1593
2268
  </li>
1594
2269
  <li class="pf-v6-c-breadcrumb__item">
1595
2270
  <span class="pf-v6-c-breadcrumb__item-divider">
1596
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2271
+ <svg
2272
+ class="pf-v6-svg"
2273
+ viewBox="0 0 20 20"
2274
+ fill="currentColor"
2275
+ aria-hidden="true"
2276
+ role="img"
2277
+ width="1em"
2278
+ height="1em"
2279
+ >
2280
+ <path
2281
+ d="M14.35 8.94 6.71 1.29l-.02-.02c-.4-.38-1.03-.37-1.41.02-.38.4-.37 1.03.02 1.41l7.29 7.29-7.29 7.29a1.003 1.003 0 0 0 1.42 1.42l7.65-7.65c.59-.59.59-1.54 0-2.12Z"
2282
+ />
2283
+ </svg>
1597
2284
  </span>
1598
2285
 
1599
2286
  <a
@@ -1606,9 +2293,15 @@ section: components
1606
2293
  </nav>
1607
2294
  </div>
1608
2295
  </section>
1609
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
2296
+ <section
2297
+ class="pf-v6-c-page__main-section pf-m-limit-width"
2298
+ aria-labelledby="main-title"
2299
+ >
1610
2300
  <div class="pf-v6-c-page__main-body">
1611
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
2301
+ <h1
2302
+ class="pf-v6-c-content--h1 pf-m-page-title"
2303
+ id="main-title"
2304
+ >Main title</h1>
1612
2305
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
1613
2306
  </div>
1614
2307
  </section>
@@ -1670,7 +2363,19 @@ section: components
1670
2363
  id="drawer-demo-notification-drawer-basic-header-action"
1671
2364
  >
1672
2365
  <span class="pf-v6-c-menu-toggle__icon">
1673
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
2366
+ <svg
2367
+ class="pf-v6-svg"
2368
+ viewBox="0 0 32 32"
2369
+ fill="currentColor"
2370
+ aria-hidden="true"
2371
+ role="img"
2372
+ width="1em"
2373
+ height="1em"
2374
+ >
2375
+ <path
2376
+ 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"
2377
+ />
2378
+ </svg>
1674
2379
  </span>
1675
2380
  </button>
1676
2381
  </div>
@@ -1685,7 +2390,19 @@ section: components
1685
2390
  <span
1686
2391
  class="pf-v6-c-notification-drawer__list-item-header-icon"
1687
2392
  >
1688
- <i class="fas fa-info-circle" aria-hidden="true"></i>
2393
+ <svg
2394
+ class="pf-v6-svg"
2395
+ viewBox="0 0 32 32"
2396
+ fill="currentColor"
2397
+ aria-hidden="true"
2398
+ role="img"
2399
+ width="1em"
2400
+ height="1em"
2401
+ >
2402
+ <path
2403
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm1.5 22a1.5 1.5 0 1 1-3 0v-5.157l-.188.04a1.5 1.5 0 0 1-.625-2.934l1.956-.416c.112-.024.223-.032.333-.03l.024-.002a1.5 1.5 0 0 1 1.5 1.5v7Zm-.08-12.58c-.38.37-.89.58-1.42.58a1.998 1.998 0 0 1-1.851-2.76c.051-.13.11-.24.19-.35.07-.11.15-.21.25-.3.74-.75 2.08-.75 2.83 0 .09.09.17.19.24.3.08.11.14.22.189.35.05.12.09.24.11.37.03.13.04.26.04.39 0 .53-.21 1.04-.58 1.42Z"
2404
+ />
2405
+ </svg>
1689
2406
  </span>
1690
2407
  <h2
1691
2408
  class="pf-v6-c-notification-drawer__list-item-header-title"
@@ -1704,7 +2421,19 @@ section: components
1704
2421
  id="drawer-demo-notification-drawer-basic-menu-toggle-1"
1705
2422
  >
1706
2423
  <span class="pf-v6-c-menu-toggle__icon">
1707
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
2424
+ <svg
2425
+ class="pf-v6-svg"
2426
+ viewBox="0 0 32 32"
2427
+ fill="currentColor"
2428
+ aria-hidden="true"
2429
+ role="img"
2430
+ width="1em"
2431
+ height="1em"
2432
+ >
2433
+ <path
2434
+ 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"
2435
+ />
2436
+ </svg>
1708
2437
  </span>
1709
2438
  </button>
1710
2439
  </div>
@@ -1724,7 +2453,19 @@ section: components
1724
2453
  <span
1725
2454
  class="pf-v6-c-notification-drawer__list-item-header-icon"
1726
2455
  >
1727
- <i class="fas fa-arrow-circle-up" aria-hidden="true"></i>
2456
+ <svg
2457
+ class="pf-v6-svg"
2458
+ viewBox="0 0 32 32"
2459
+ fill="currentColor"
2460
+ aria-hidden="true"
2461
+ role="img"
2462
+ width="1em"
2463
+ height="1em"
2464
+ >
2465
+ <path
2466
+ d="M28.75 22v3.5c0 .689-.561 1.25-1.25 1.25h-7.521c.005.084.021.166.021.25 0 2.206-1.794 4-4 4s-4-1.794-4-4c0-.084.016-.166.021-.25H4.5c-.689 0-1.25-.561-1.25-1.25V22a.75.75 0 0 1 .75-.75c1.24 0 2.25-1.009 2.25-2.25v-4c0-4.826 3.528-8.833 8.138-9.605A2.482 2.482 0 0 1 13.5 3.5C13.5 2.122 14.621 1 16 1s2.5 1.122 2.5 2.5c0 .761-.349 1.436-.888 1.895 4.61.772 8.138 4.779 8.138 9.605v4c0 1.241 1.01 2.25 2.25 2.25a.75.75 0 0 1 .75.75Z"
2467
+ />
2468
+ </svg>
1728
2469
  </span>
1729
2470
  <h2
1730
2471
  class="pf-v6-c-notification-drawer__list-item-header-title"
@@ -1743,7 +2484,19 @@ section: components
1743
2484
  id="drawer-demo-notification-drawer-basic-menu-toggle-3"
1744
2485
  >
1745
2486
  <span class="pf-v6-c-menu-toggle__icon">
1746
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
2487
+ <svg
2488
+ class="pf-v6-svg"
2489
+ viewBox="0 0 32 32"
2490
+ fill="currentColor"
2491
+ aria-hidden="true"
2492
+ role="img"
2493
+ width="1em"
2494
+ height="1em"
2495
+ >
2496
+ <path
2497
+ 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"
2498
+ />
2499
+ </svg>
1747
2500
  </span>
1748
2501
  </button>
1749
2502
  </div>
@@ -1763,7 +2516,19 @@ section: components
1763
2516
  <span
1764
2517
  class="pf-v6-c-notification-drawer__list-item-header-icon"
1765
2518
  >
1766
- <i class="fas fa-arrow-circle-up" aria-hidden="true"></i>
2519
+ <svg
2520
+ class="pf-v6-svg"
2521
+ viewBox="0 0 32 32"
2522
+ fill="currentColor"
2523
+ aria-hidden="true"
2524
+ role="img"
2525
+ width="1em"
2526
+ height="1em"
2527
+ >
2528
+ <path
2529
+ d="M28.75 22v3.5c0 .689-.561 1.25-1.25 1.25h-7.521c.005.084.021.166.021.25 0 2.206-1.794 4-4 4s-4-1.794-4-4c0-.084.016-.166.021-.25H4.5c-.689 0-1.25-.561-1.25-1.25V22a.75.75 0 0 1 .75-.75c1.24 0 2.25-1.009 2.25-2.25v-4c0-4.826 3.528-8.833 8.138-9.605A2.482 2.482 0 0 1 13.5 3.5C13.5 2.122 14.621 1 16 1s2.5 1.122 2.5 2.5c0 .761-.349 1.436-.888 1.895 4.61.772 8.138 4.779 8.138 9.605v4c0 1.241 1.01 2.25 2.25 2.25a.75.75 0 0 1 .75.75Z"
2530
+ />
2531
+ </svg>
1767
2532
  </span>
1768
2533
  <h2
1769
2534
  class="pf-v6-c-notification-drawer__list-item-header-title"
@@ -1782,7 +2547,19 @@ section: components
1782
2547
  id="drawer-demo-notification-drawer-basic-menu-toggle-4"
1783
2548
  >
1784
2549
  <span class="pf-v6-c-menu-toggle__icon">
1785
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
2550
+ <svg
2551
+ class="pf-v6-svg"
2552
+ viewBox="0 0 32 32"
2553
+ fill="currentColor"
2554
+ aria-hidden="true"
2555
+ role="img"
2556
+ width="1em"
2557
+ height="1em"
2558
+ >
2559
+ <path
2560
+ 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"
2561
+ />
2562
+ </svg>
1786
2563
  </span>
1787
2564
  </button>
1788
2565
  </div>
@@ -1800,10 +2577,19 @@ section: components
1800
2577
  <span
1801
2578
  class="pf-v6-c-notification-drawer__list-item-header-icon"
1802
2579
  >
1803
- <i
1804
- class="fas fa-exclamation-triangle"
2580
+ <svg
2581
+ class="pf-v6-svg"
2582
+ viewBox="0 0 32 32"
2583
+ fill="currentColor"
1805
2584
  aria-hidden="true"
1806
- ></i>
2585
+ role="img"
2586
+ width="1em"
2587
+ height="1em"
2588
+ >
2589
+ <path
2590
+ 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"
2591
+ />
2592
+ </svg>
1807
2593
  </span>
1808
2594
  <h2
1809
2595
  class="pf-v6-c-notification-drawer__list-item-header-title"
@@ -1821,7 +2607,19 @@ section: components
1821
2607
  id="drawer-demo-notification-drawer-basic-menu-toggle-5"
1822
2608
  >
1823
2609
  <span class="pf-v6-c-menu-toggle__icon">
1824
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
2610
+ <svg
2611
+ class="pf-v6-svg"
2612
+ viewBox="0 0 32 32"
2613
+ fill="currentColor"
2614
+ aria-hidden="true"
2615
+ role="img"
2616
+ width="1em"
2617
+ height="1em"
2618
+ >
2619
+ <path
2620
+ 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"
2621
+ />
2622
+ </svg>
1825
2623
  </span>
1826
2624
  </button>
1827
2625
  </div>
@@ -1839,7 +2637,19 @@ section: components
1839
2637
  <span
1840
2638
  class="pf-v6-c-notification-drawer__list-item-header-icon"
1841
2639
  >
1842
- <i class="fas fa-check-circle" aria-hidden="true"></i>
2640
+ <svg
2641
+ class="pf-v6-svg"
2642
+ viewBox="0 0 32 32"
2643
+ fill="currentColor"
2644
+ aria-hidden="true"
2645
+ role="img"
2646
+ width="1em"
2647
+ height="1em"
2648
+ >
2649
+ <path
2650
+ 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"
2651
+ />
2652
+ </svg>
1843
2653
  </span>
1844
2654
  <h2
1845
2655
  class="pf-v6-c-notification-drawer__list-item-header-title"
@@ -1857,7 +2667,19 @@ section: components
1857
2667
  id="drawer-demo-notification-drawer-basic-menu-toggle-6"
1858
2668
  >
1859
2669
  <span class="pf-v6-c-menu-toggle__icon">
1860
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
2670
+ <svg
2671
+ class="pf-v6-svg"
2672
+ viewBox="0 0 32 32"
2673
+ fill="currentColor"
2674
+ aria-hidden="true"
2675
+ role="img"
2676
+ width="1em"
2677
+ height="1em"
2678
+ >
2679
+ <path
2680
+ 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"
2681
+ />
2682
+ </svg>
1861
2683
  </span>
1862
2684
  </button>
1863
2685
  </div>
@@ -1875,7 +2697,19 @@ section: components
1875
2697
  <span
1876
2698
  class="pf-v6-c-notification-drawer__list-item-header-icon"
1877
2699
  >
1878
- <i class="fas fa-check-circle" aria-hidden="true"></i>
2700
+ <svg
2701
+ class="pf-v6-svg"
2702
+ viewBox="0 0 32 32"
2703
+ fill="currentColor"
2704
+ aria-hidden="true"
2705
+ role="img"
2706
+ width="1em"
2707
+ height="1em"
2708
+ >
2709
+ <path
2710
+ 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"
2711
+ />
2712
+ </svg>
1879
2713
  </span>
1880
2714
  <h2
1881
2715
  class="pf-v6-c-notification-drawer__list-item-header-title pf-m-truncate"
@@ -1893,7 +2727,19 @@ section: components
1893
2727
  id="drawer-demo-notification-drawer-basic-menu-toggle-7"
1894
2728
  >
1895
2729
  <span class="pf-v6-c-menu-toggle__icon">
1896
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
2730
+ <svg
2731
+ class="pf-v6-svg"
2732
+ viewBox="0 0 32 32"
2733
+ fill="currentColor"
2734
+ aria-hidden="true"
2735
+ role="img"
2736
+ width="1em"
2737
+ height="1em"
2738
+ >
2739
+ <path
2740
+ 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"
2741
+ />
2742
+ </svg>
1897
2743
  </span>
1898
2744
  </button>
1899
2745
  </div>
@@ -1911,7 +2757,19 @@ section: components
1911
2757
  <span
1912
2758
  class="pf-v6-c-notification-drawer__list-item-header-icon"
1913
2759
  >
1914
- <i class="fas fa-check-circle" aria-hidden="true"></i>
2760
+ <svg
2761
+ class="pf-v6-svg"
2762
+ viewBox="0 0 32 32"
2763
+ fill="currentColor"
2764
+ aria-hidden="true"
2765
+ role="img"
2766
+ width="1em"
2767
+ height="1em"
2768
+ >
2769
+ <path
2770
+ 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"
2771
+ />
2772
+ </svg>
1915
2773
  </span>
1916
2774
  <h2
1917
2775
  class="pf-v6-c-notification-drawer__list-item-header-title pf-m-truncate"
@@ -1930,7 +2788,19 @@ section: components
1930
2788
  id="drawer-demo-notification-drawer-basic-menu-toggle-8"
1931
2789
  >
1932
2790
  <span class="pf-v6-c-menu-toggle__icon">
1933
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
2791
+ <svg
2792
+ class="pf-v6-svg"
2793
+ viewBox="0 0 32 32"
2794
+ fill="currentColor"
2795
+ aria-hidden="true"
2796
+ role="img"
2797
+ width="1em"
2798
+ height="1em"
2799
+ >
2800
+ <path
2801
+ 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"
2802
+ />
2803
+ </svg>
1934
2804
  </span>
1935
2805
  </button>
1936
2806
  </div>
@@ -1948,7 +2818,19 @@ section: components
1948
2818
  <span
1949
2819
  class="pf-v6-c-notification-drawer__list-item-header-icon"
1950
2820
  >
1951
- <i class="fas fa-check-circle" aria-hidden="true"></i>
2821
+ <svg
2822
+ class="pf-v6-svg"
2823
+ viewBox="0 0 32 32"
2824
+ fill="currentColor"
2825
+ aria-hidden="true"
2826
+ role="img"
2827
+ width="1em"
2828
+ height="1em"
2829
+ >
2830
+ <path
2831
+ 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"
2832
+ />
2833
+ </svg>
1952
2834
  </span>
1953
2835
  <h2
1954
2836
  class="pf-v6-c-notification-drawer__list-item-header-title"
@@ -1992,7 +2874,8 @@ section: components
1992
2874
  <span class="pf-v6-c-button__text">Skip to content</span>
1993
2875
  </a>
1994
2876
  </div>
1995
- <header class="pf-v6-c-masthead" id="-page-masthead">
2877
+
2878
+ <header class="pf-v6-c-masthead" id="-page-docked">
1996
2879
  <div class="pf-v6-c-masthead__main">
1997
2880
  <span class="pf-v6-c-masthead__toggle">
1998
2881
  <button
@@ -2034,7 +2917,7 @@ section: components
2034
2917
  y1="2.25860997e-13%"
2035
2918
  x2="32%"
2036
2919
  y2="100%"
2037
- id="linearGradient--page-masthead"
2920
+ id="linearGradient--page-docked"
2038
2921
  >
2039
2922
  <stop stop-color="#2B9AF3" offset="0%" />
2040
2923
  <stop
@@ -2088,11 +2971,11 @@ section: components
2088
2971
  />
2089
2972
  <path
2090
2973
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
2091
- fill="url(#linearGradient--page-masthead)"
2974
+ fill="url(#linearGradient--page-docked)"
2092
2975
  />
2093
2976
  <path
2094
2977
  d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z"
2095
- fill="url(#linearGradient--page-masthead)"
2978
+ fill="url(#linearGradient--page-docked)"
2096
2979
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
2097
2980
  />
2098
2981
  </g>
@@ -2102,7 +2985,7 @@ section: components
2102
2985
  </div>
2103
2986
  </div>
2104
2987
  <div class="pf-v6-c-masthead__content">
2105
- <div class="pf-v6-c-toolbar pf-m-static" id="-page-masthead-toolbar">
2988
+ <div class="pf-v6-c-toolbar pf-m-static" id="-page-docked-toolbar">
2106
2989
  <div class="pf-v6-c-toolbar__content">
2107
2990
  <div class="pf-v6-c-toolbar__content-section">
2108
2991
  <div
@@ -2116,7 +2999,19 @@ section: components
2116
2999
  aria-label="Attention notifications"
2117
3000
  >
2118
3001
  <span class="pf-v6-c-button__icon">
2119
- <i class="pf-v6-pficon-attention-bell" aria-hidden="true"></i>
3002
+ <svg
3003
+ class="pf-v6-svg"
3004
+ viewBox="0 0 32 32"
3005
+ fill="currentColor"
3006
+ aria-hidden="true"
3007
+ role="img"
3008
+ width="1em"
3009
+ height="1em"
3010
+ >
3011
+ <path
3012
+ d="M28 21c-1.103 0-2-.897-2-2v-4c0-4.884-3.523-8.955-8.159-9.823.405-.444.659-1.03.659-1.677C18.5 2.121 17.379 1 16 1s-2.5 1.121-2.5 2.5c0 .648.254 1.233.659 1.677C9.523 6.045 6 10.116 6 15v4c0 1.103-.897 2-2 2a1 1 0 0 0-1 1v3.5c0 .827.673 1.5 1.5 1.5H12c0 2.206 1.794 4 4 4s4-1.794 4-4h7.5c.827 0 1.5-.673 1.5-1.5V22a1 1 0 0 0-1-1ZM14.5 11a1.5 1.5 0 0 1 3 0v5a1.5 1.5 0 0 1-3 0v-5ZM16 24.014a2 2 0 1 1-.001-3.999A2 2 0 0 1 16 24.014Z"
3013
+ />
3014
+ </svg>
2120
3015
  </span>
2121
3016
  </button>
2122
3017
  </div>
@@ -2132,7 +3027,19 @@ section: components
2132
3027
  aria-label="Application launcher"
2133
3028
  >
2134
3029
  <span class="pf-v6-c-menu-toggle__icon">
2135
- <i class="fas fa-th" aria-hidden="true"></i>
3030
+ <svg
3031
+ class="pf-v6-svg"
3032
+ viewBox="0 0 512 512"
3033
+ fill="currentColor"
3034
+ aria-hidden="true"
3035
+ role="img"
3036
+ width="1em"
3037
+ height="1em"
3038
+ >
3039
+ <path
3040
+ d="M149.333 56v80c0 13.255-10.745 24-24 24H24c-13.255 0-24-10.745-24-24V56c0-13.255 10.745-24 24-24h101.333c13.255 0 24 10.745 24 24zm181.334 240v-80c0-13.255-10.745-24-24-24H205.333c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24h101.333c13.256 0 24.001-10.745 24.001-24zm32-240v80c0 13.255 10.745 24 24 24H488c13.255 0 24-10.745 24-24V56c0-13.255-10.745-24-24-24H386.667c-13.255 0-24 10.745-24 24zm-32 80V56c0-13.255-10.745-24-24-24H205.333c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24h101.333c13.256 0 24.001-10.745 24.001-24zm-205.334 56H24c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24h101.333c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24zM0 376v80c0 13.255 10.745 24 24 24h101.333c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H24c-13.255 0-24 10.745-24 24zm386.667-56H488c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H386.667c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24zm0 160H488c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H386.667c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24zM181.333 376v80c0 13.255 10.745 24 24 24h101.333c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H205.333c-13.255 0-24 10.745-24 24z"
3041
+ />
3042
+ </svg>
2136
3043
  </span>
2137
3044
  </button>
2138
3045
  </div>
@@ -2144,7 +3051,19 @@ section: components
2144
3051
  aria-label="Settings"
2145
3052
  >
2146
3053
  <span class="pf-v6-c-menu-toggle__icon">
2147
- <i class="fas fa-cog" aria-hidden="true"></i>
3054
+ <svg
3055
+ class="pf-v6-svg"
3056
+ viewBox="0 0 32 32"
3057
+ fill="currentColor"
3058
+ aria-hidden="true"
3059
+ role="img"
3060
+ width="1em"
3061
+ height="1em"
3062
+ >
3063
+ <path
3064
+ d="M30.168 12.894a.5.5 0 0 0-.488-.394h-2.732a11.512 11.512 0 0 0-.729-1.769l1.931-1.93a.5.5 0 0 0 .066-.625 14.693 14.693 0 0 0-4.393-4.392.498.498 0 0 0-.624.067l-1.93 1.93a11.512 11.512 0 0 0-1.769-.729V2.319a.5.5 0 0 0-.395-.489 14.81 14.81 0 0 0-6.211 0 .5.5 0 0 0-.395.489v2.733c-.614.196-1.207.439-1.769.729L8.8 3.851a.498.498 0 0 0-.624-.067 14.714 14.714 0 0 0-4.393 4.392.5.5 0 0 0 .066.625l1.931 1.93a11.512 11.512 0 0 0-.729 1.769H2.319a.5.5 0 0 0-.488.394 14.652 14.652 0 0 0 0 6.212.5.5 0 0 0 .488.394h2.732c.196.615.44 1.207.729 1.769l-1.931 1.93a.5.5 0 0 0-.066.625 14.673 14.673 0 0 0 4.393 4.392.498.498 0 0 0 .624-.067l1.93-1.93c.562.289 1.154.533 1.769.729v2.733a.5.5 0 0 0 .395.489 14.686 14.686 0 0 0 6.21 0 .5.5 0 0 0 .395-.489v-2.733a11.454 11.454 0 0 0 1.769-.729l1.93 1.93a.5.5 0 0 0 .624.067 14.714 14.714 0 0 0 4.393-4.392.5.5 0 0 0-.066-.625l-1.931-1.93c.289-.562.533-1.154.729-1.769h2.732a.5.5 0 0 0 .488-.394 14.652 14.652 0 0 0 0-6.212ZM16 21.25c-2.895 0-5.25-2.355-5.25-5.25s2.355-5.25 5.25-5.25 5.25 2.355 5.25 5.25-2.355 5.25-5.25 5.25Z"
3065
+ />
3066
+ </svg>
2148
3067
  </span>
2149
3068
  </button>
2150
3069
  </div>
@@ -2156,7 +3075,19 @@ section: components
2156
3075
  aria-label="Help"
2157
3076
  >
2158
3077
  <span class="pf-v6-c-menu-toggle__icon">
2159
- <i class="fas fa-question-circle" aria-hidden="true"></i>
3078
+ <svg
3079
+ class="pf-v6-svg"
3080
+ viewBox="0 0 512 512"
3081
+ fill="currentColor"
3082
+ aria-hidden="true"
3083
+ role="img"
3084
+ width="1em"
3085
+ height="1em"
3086
+ >
3087
+ <path
3088
+ d="M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zM262.655 90c-54.497 0-89.255 22.957-116.549 63.758-3.536 5.286-2.353 12.415 2.715 16.258l34.699 26.31c5.205 3.947 12.621 3.008 16.665-2.122 17.864-22.658 30.113-35.797 57.303-35.797 20.429 0 45.698 13.148 45.698 32.958 0 14.976-12.363 22.667-32.534 33.976C247.128 238.528 216 254.941 216 296v4c0 6.627 5.373 12 12 12h56c6.627 0 12-5.373 12-12v-1.333c0-28.462 83.186-29.647 83.186-106.667 0-58.002-60.165-102-116.531-102zM256 338c-25.365 0-46 20.635-46 46 0 25.364 20.635 46 46 46s46-20.636 46-46c0-25.365-20.635-46-46-46z"
3089
+ />
3090
+ </svg>
2160
3091
  </span>
2161
3092
  </button>
2162
3093
  </div>
@@ -2170,7 +3101,19 @@ section: components
2170
3101
  aria-label="Actions"
2171
3102
  >
2172
3103
  <span class="pf-v6-c-menu-toggle__icon">
2173
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
3104
+ <svg
3105
+ class="pf-v6-svg"
3106
+ viewBox="0 0 32 32"
3107
+ fill="currentColor"
3108
+ aria-hidden="true"
3109
+ role="img"
3110
+ width="1em"
3111
+ height="1em"
3112
+ >
3113
+ <path
3114
+ 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"
3115
+ />
3116
+ </svg>
2174
3117
  </span>
2175
3118
  </button>
2176
3119
  </div>
@@ -2181,40 +3124,42 @@ section: components
2181
3124
  </div>
2182
3125
  </header>
2183
3126
  <div class="pf-v6-c-page__sidebar">
2184
- <div class="pf-v6-c-page__sidebar-body">
2185
- <nav class="pf-v6-c-nav" id="-page-primary-nav" aria-label="Global">
2186
- <ul class="pf-v6-c-nav__list" role="list">
2187
- <li class="pf-v6-c-nav__item">
2188
- <a href="#" class="pf-v6-c-nav__link">
2189
- <span class="pf-v6-c-nav__link-text">System panel</span>
2190
- </a>
2191
- </li>
2192
- <li class="pf-v6-c-nav__item">
2193
- <a
2194
- href="#"
2195
- class="pf-v6-c-nav__link pf-m-current"
2196
- aria-current="page"
2197
- >
2198
- <span class="pf-v6-c-nav__link-text">Policy</span>
2199
- </a>
2200
- </li>
2201
- <li class="pf-v6-c-nav__item">
2202
- <a href="#" class="pf-v6-c-nav__link">
2203
- <span class="pf-v6-c-nav__link-text">Authentication</span>
2204
- </a>
2205
- </li>
2206
- <li class="pf-v6-c-nav__item">
2207
- <a href="#" class="pf-v6-c-nav__link">
2208
- <span class="pf-v6-c-nav__link-text">Network services</span>
2209
- </a>
2210
- </li>
2211
- <li class="pf-v6-c-nav__item">
2212
- <a href="#" class="pf-v6-c-nav__link">
2213
- <span class="pf-v6-c-nav__link-text">Server</span>
2214
- </a>
2215
- </li>
2216
- </ul>
2217
- </nav>
3127
+ <div class="pf-v6-c-page__sidebar-main">
3128
+ <div class="pf-v6-c-page__sidebar-body">
3129
+ <nav class="pf-v6-c-nav" id="-page-primary-nav" aria-label="Global">
3130
+ <ul class="pf-v6-c-nav__list" role="list">
3131
+ <li class="pf-v6-c-nav__item">
3132
+ <a href="#" class="pf-v6-c-nav__link">
3133
+ <span class="pf-v6-c-nav__link-text">System panel</span>
3134
+ </a>
3135
+ </li>
3136
+ <li class="pf-v6-c-nav__item">
3137
+ <a
3138
+ href="#"
3139
+ class="pf-v6-c-nav__link pf-m-current"
3140
+ aria-current="page"
3141
+ >
3142
+ <span class="pf-v6-c-nav__link-text">Policy</span>
3143
+ </a>
3144
+ </li>
3145
+ <li class="pf-v6-c-nav__item">
3146
+ <a href="#" class="pf-v6-c-nav__link">
3147
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
3148
+ </a>
3149
+ </li>
3150
+ <li class="pf-v6-c-nav__item">
3151
+ <a href="#" class="pf-v6-c-nav__link">
3152
+ <span class="pf-v6-c-nav__link-text">Network services</span>
3153
+ </a>
3154
+ </li>
3155
+ <li class="pf-v6-c-nav__item">
3156
+ <a href="#" class="pf-v6-c-nav__link">
3157
+ <span class="pf-v6-c-nav__link-text">Server</span>
3158
+ </a>
3159
+ </li>
3160
+ </ul>
3161
+ </nav>
3162
+ </div>
2218
3163
  </div>
2219
3164
  </div>
2220
3165
  <div class="pf-v6-c-page__drawer">
@@ -2235,7 +3180,19 @@ section: components
2235
3180
  </li>
2236
3181
  <li class="pf-v6-c-breadcrumb__item">
2237
3182
  <span class="pf-v6-c-breadcrumb__item-divider">
2238
- <i class="fas fa-angle-right" aria-hidden="true"></i>
3183
+ <svg
3184
+ class="pf-v6-svg"
3185
+ viewBox="0 0 20 20"
3186
+ fill="currentColor"
3187
+ aria-hidden="true"
3188
+ role="img"
3189
+ width="1em"
3190
+ height="1em"
3191
+ >
3192
+ <path
3193
+ d="M14.35 8.94 6.71 1.29l-.02-.02c-.4-.38-1.03-.37-1.41.02-.38.4-.37 1.03.02 1.41l7.29 7.29-7.29 7.29a1.003 1.003 0 0 0 1.42 1.42l7.65-7.65c.59-.59.59-1.54 0-2.12Z"
3194
+ />
3195
+ </svg>
2239
3196
  </span>
2240
3197
 
2241
3198
  <a
@@ -2245,7 +3202,19 @@ section: components
2245
3202
  </li>
2246
3203
  <li class="pf-v6-c-breadcrumb__item">
2247
3204
  <span class="pf-v6-c-breadcrumb__item-divider">
2248
- <i class="fas fa-angle-right" aria-hidden="true"></i>
3205
+ <svg
3206
+ class="pf-v6-svg"
3207
+ viewBox="0 0 20 20"
3208
+ fill="currentColor"
3209
+ aria-hidden="true"
3210
+ role="img"
3211
+ width="1em"
3212
+ height="1em"
3213
+ >
3214
+ <path
3215
+ d="M14.35 8.94 6.71 1.29l-.02-.02c-.4-.38-1.03-.37-1.41.02-.38.4-.37 1.03.02 1.41l7.29 7.29-7.29 7.29a1.003 1.003 0 0 0 1.42 1.42l7.65-7.65c.59-.59.59-1.54 0-2.12Z"
3216
+ />
3217
+ </svg>
2249
3218
  </span>
2250
3219
 
2251
3220
  <a
@@ -2255,7 +3224,19 @@ section: components
2255
3224
  </li>
2256
3225
  <li class="pf-v6-c-breadcrumb__item">
2257
3226
  <span class="pf-v6-c-breadcrumb__item-divider">
2258
- <i class="fas fa-angle-right" aria-hidden="true"></i>
3227
+ <svg
3228
+ class="pf-v6-svg"
3229
+ viewBox="0 0 20 20"
3230
+ fill="currentColor"
3231
+ aria-hidden="true"
3232
+ role="img"
3233
+ width="1em"
3234
+ height="1em"
3235
+ >
3236
+ <path
3237
+ d="M14.35 8.94 6.71 1.29l-.02-.02c-.4-.38-1.03-.37-1.41.02-.38.4-.37 1.03.02 1.41l7.29 7.29-7.29 7.29a1.003 1.003 0 0 0 1.42 1.42l7.65-7.65c.59-.59.59-1.54 0-2.12Z"
3238
+ />
3239
+ </svg>
2259
3240
  </span>
2260
3241
 
2261
3242
  <a
@@ -2268,9 +3249,15 @@ section: components
2268
3249
  </nav>
2269
3250
  </div>
2270
3251
  </section>
2271
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
3252
+ <section
3253
+ class="pf-v6-c-page__main-section pf-m-limit-width"
3254
+ aria-labelledby="main-title"
3255
+ >
2272
3256
  <div class="pf-v6-c-page__main-body">
2273
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
3257
+ <h1
3258
+ class="pf-v6-c-content--h1 pf-m-page-title"
3259
+ id="main-title"
3260
+ >Main title</h1>
2274
3261
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
2275
3262
  </div>
2276
3263
  </section>
@@ -2332,7 +3319,19 @@ section: components
2332
3319
  id="drawer-demo-notification-drawer-basic-header-action"
2333
3320
  >
2334
3321
  <span class="pf-v6-c-menu-toggle__icon">
2335
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
3322
+ <svg
3323
+ class="pf-v6-svg"
3324
+ viewBox="0 0 32 32"
3325
+ fill="currentColor"
3326
+ aria-hidden="true"
3327
+ role="img"
3328
+ width="1em"
3329
+ height="1em"
3330
+ >
3331
+ <path
3332
+ 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"
3333
+ />
3334
+ </svg>
2336
3335
  </span>
2337
3336
  </button>
2338
3337
  </div>
@@ -2347,7 +3346,19 @@ section: components
2347
3346
  <span
2348
3347
  class="pf-v6-c-notification-drawer__list-item-header-icon"
2349
3348
  >
2350
- <i class="fas fa-info-circle" aria-hidden="true"></i>
3349
+ <svg
3350
+ class="pf-v6-svg"
3351
+ viewBox="0 0 32 32"
3352
+ fill="currentColor"
3353
+ aria-hidden="true"
3354
+ role="img"
3355
+ width="1em"
3356
+ height="1em"
3357
+ >
3358
+ <path
3359
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm1.5 22a1.5 1.5 0 1 1-3 0v-5.157l-.188.04a1.5 1.5 0 0 1-.625-2.934l1.956-.416c.112-.024.223-.032.333-.03l.024-.002a1.5 1.5 0 0 1 1.5 1.5v7Zm-.08-12.58c-.38.37-.89.58-1.42.58a1.998 1.998 0 0 1-1.851-2.76c.051-.13.11-.24.19-.35.07-.11.15-.21.25-.3.74-.75 2.08-.75 2.83 0 .09.09.17.19.24.3.08.11.14.22.189.35.05.12.09.24.11.37.03.13.04.26.04.39 0 .53-.21 1.04-.58 1.42Z"
3360
+ />
3361
+ </svg>
2351
3362
  </span>
2352
3363
  <h2
2353
3364
  class="pf-v6-c-notification-drawer__list-item-header-title"
@@ -2366,7 +3377,19 @@ section: components
2366
3377
  id="drawer-demo-notification-drawer-basic-menu-toggle-1"
2367
3378
  >
2368
3379
  <span class="pf-v6-c-menu-toggle__icon">
2369
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
3380
+ <svg
3381
+ class="pf-v6-svg"
3382
+ viewBox="0 0 32 32"
3383
+ fill="currentColor"
3384
+ aria-hidden="true"
3385
+ role="img"
3386
+ width="1em"
3387
+ height="1em"
3388
+ >
3389
+ <path
3390
+ 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"
3391
+ />
3392
+ </svg>
2370
3393
  </span>
2371
3394
  </button>
2372
3395
  </div>
@@ -2386,7 +3409,19 @@ section: components
2386
3409
  <span
2387
3410
  class="pf-v6-c-notification-drawer__list-item-header-icon"
2388
3411
  >
2389
- <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
3412
+ <svg
3413
+ class="pf-v6-svg"
3414
+ viewBox="0 0 32 32"
3415
+ fill="currentColor"
3416
+ aria-hidden="true"
3417
+ role="img"
3418
+ width="1em"
3419
+ height="1em"
3420
+ >
3421
+ <path
3422
+ 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"
3423
+ />
3424
+ </svg>
2390
3425
  </span>
2391
3426
  <h2
2392
3427
  class="pf-v6-c-notification-drawer__list-item-header-title"
@@ -2420,7 +3455,19 @@ section: components
2420
3455
  <span
2421
3456
  class="pf-v6-c-notification-drawer__list-item-header-icon"
2422
3457
  >
2423
- <i class="fas fa-arrow-circle-up" aria-hidden="true"></i>
3458
+ <svg
3459
+ class="pf-v6-svg"
3460
+ viewBox="0 0 32 32"
3461
+ fill="currentColor"
3462
+ aria-hidden="true"
3463
+ role="img"
3464
+ width="1em"
3465
+ height="1em"
3466
+ >
3467
+ <path
3468
+ d="M28.75 22v3.5c0 .689-.561 1.25-1.25 1.25h-7.521c.005.084.021.166.021.25 0 2.206-1.794 4-4 4s-4-1.794-4-4c0-.084.016-.166.021-.25H4.5c-.689 0-1.25-.561-1.25-1.25V22a.75.75 0 0 1 .75-.75c1.24 0 2.25-1.009 2.25-2.25v-4c0-4.826 3.528-8.833 8.138-9.605A2.482 2.482 0 0 1 13.5 3.5C13.5 2.122 14.621 1 16 1s2.5 1.122 2.5 2.5c0 .761-.349 1.436-.888 1.895 4.61.772 8.138 4.779 8.138 9.605v4c0 1.241 1.01 2.25 2.25 2.25a.75.75 0 0 1 .75.75Z"
3469
+ />
3470
+ </svg>
2424
3471
  </span>
2425
3472
  <h2
2426
3473
  class="pf-v6-c-notification-drawer__list-item-header-title"
@@ -2439,7 +3486,19 @@ section: components
2439
3486
  id="drawer-demo-notification-drawer-basic-menu-toggle-4"
2440
3487
  >
2441
3488
  <span class="pf-v6-c-menu-toggle__icon">
2442
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
3489
+ <svg
3490
+ class="pf-v6-svg"
3491
+ viewBox="0 0 32 32"
3492
+ fill="currentColor"
3493
+ aria-hidden="true"
3494
+ role="img"
3495
+ width="1em"
3496
+ height="1em"
3497
+ >
3498
+ <path
3499
+ 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"
3500
+ />
3501
+ </svg>
2443
3502
  </span>
2444
3503
  </button>
2445
3504
  </div>
@@ -2457,10 +3516,19 @@ section: components
2457
3516
  <span
2458
3517
  class="pf-v6-c-notification-drawer__list-item-header-icon"
2459
3518
  >
2460
- <i
2461
- class="fas fa-exclamation-triangle"
3519
+ <svg
3520
+ class="pf-v6-svg"
3521
+ viewBox="0 0 32 32"
3522
+ fill="currentColor"
2462
3523
  aria-hidden="true"
2463
- ></i>
3524
+ role="img"
3525
+ width="1em"
3526
+ height="1em"
3527
+ >
3528
+ <path
3529
+ 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"
3530
+ />
3531
+ </svg>
2464
3532
  </span>
2465
3533
  <h2
2466
3534
  class="pf-v6-c-notification-drawer__list-item-header-title"
@@ -2478,7 +3546,19 @@ section: components
2478
3546
  id="drawer-demo-notification-drawer-basic-menu-toggle-5"
2479
3547
  >
2480
3548
  <span class="pf-v6-c-menu-toggle__icon">
2481
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
3549
+ <svg
3550
+ class="pf-v6-svg"
3551
+ viewBox="0 0 32 32"
3552
+ fill="currentColor"
3553
+ aria-hidden="true"
3554
+ role="img"
3555
+ width="1em"
3556
+ height="1em"
3557
+ >
3558
+ <path
3559
+ 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"
3560
+ />
3561
+ </svg>
2482
3562
  </span>
2483
3563
  </button>
2484
3564
  </div>
@@ -2496,7 +3576,19 @@ section: components
2496
3576
  <span
2497
3577
  class="pf-v6-c-notification-drawer__list-item-header-icon"
2498
3578
  >
2499
- <i class="fas fa-check-circle" aria-hidden="true"></i>
3579
+ <svg
3580
+ class="pf-v6-svg"
3581
+ viewBox="0 0 32 32"
3582
+ fill="currentColor"
3583
+ aria-hidden="true"
3584
+ role="img"
3585
+ width="1em"
3586
+ height="1em"
3587
+ >
3588
+ <path
3589
+ 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"
3590
+ />
3591
+ </svg>
2500
3592
  </span>
2501
3593
  <h2
2502
3594
  class="pf-v6-c-notification-drawer__list-item-header-title"
@@ -2514,7 +3606,19 @@ section: components
2514
3606
  id="drawer-demo-notification-drawer-basic-menu-toggle-6"
2515
3607
  >
2516
3608
  <span class="pf-v6-c-menu-toggle__icon">
2517
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
3609
+ <svg
3610
+ class="pf-v6-svg"
3611
+ viewBox="0 0 32 32"
3612
+ fill="currentColor"
3613
+ aria-hidden="true"
3614
+ role="img"
3615
+ width="1em"
3616
+ height="1em"
3617
+ >
3618
+ <path
3619
+ 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"
3620
+ />
3621
+ </svg>
2518
3622
  </span>
2519
3623
  </button>
2520
3624
  </div>
@@ -2532,7 +3636,19 @@ section: components
2532
3636
  <span
2533
3637
  class="pf-v6-c-notification-drawer__list-item-header-icon"
2534
3638
  >
2535
- <i class="fas fa-check-circle" aria-hidden="true"></i>
3639
+ <svg
3640
+ class="pf-v6-svg"
3641
+ viewBox="0 0 32 32"
3642
+ fill="currentColor"
3643
+ aria-hidden="true"
3644
+ role="img"
3645
+ width="1em"
3646
+ height="1em"
3647
+ >
3648
+ <path
3649
+ 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"
3650
+ />
3651
+ </svg>
2536
3652
  </span>
2537
3653
  <h2
2538
3654
  class="pf-v6-c-notification-drawer__list-item-header-title pf-m-truncate"
@@ -2550,7 +3666,19 @@ section: components
2550
3666
  id="drawer-demo-notification-drawer-basic-menu-toggle-7"
2551
3667
  >
2552
3668
  <span class="pf-v6-c-menu-toggle__icon">
2553
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
3669
+ <svg
3670
+ class="pf-v6-svg"
3671
+ viewBox="0 0 32 32"
3672
+ fill="currentColor"
3673
+ aria-hidden="true"
3674
+ role="img"
3675
+ width="1em"
3676
+ height="1em"
3677
+ >
3678
+ <path
3679
+ 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"
3680
+ />
3681
+ </svg>
2554
3682
  </span>
2555
3683
  </button>
2556
3684
  </div>
@@ -2568,7 +3696,19 @@ section: components
2568
3696
  <span
2569
3697
  class="pf-v6-c-notification-drawer__list-item-header-icon"
2570
3698
  >
2571
- <i class="fas fa-check-circle" aria-hidden="true"></i>
3699
+ <svg
3700
+ class="pf-v6-svg"
3701
+ viewBox="0 0 32 32"
3702
+ fill="currentColor"
3703
+ aria-hidden="true"
3704
+ role="img"
3705
+ width="1em"
3706
+ height="1em"
3707
+ >
3708
+ <path
3709
+ 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"
3710
+ />
3711
+ </svg>
2572
3712
  </span>
2573
3713
  <h2
2574
3714
  class="pf-v6-c-notification-drawer__list-item-header-title pf-m-truncate"
@@ -2587,7 +3727,19 @@ section: components
2587
3727
  id="drawer-demo-notification-drawer-basic-menu-toggle-8"
2588
3728
  >
2589
3729
  <span class="pf-v6-c-menu-toggle__icon">
2590
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
3730
+ <svg
3731
+ class="pf-v6-svg"
3732
+ viewBox="0 0 32 32"
3733
+ fill="currentColor"
3734
+ aria-hidden="true"
3735
+ role="img"
3736
+ width="1em"
3737
+ height="1em"
3738
+ >
3739
+ <path
3740
+ 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"
3741
+ />
3742
+ </svg>
2591
3743
  </span>
2592
3744
  </button>
2593
3745
  </div>
@@ -2605,7 +3757,19 @@ section: components
2605
3757
  <span
2606
3758
  class="pf-v6-c-notification-drawer__list-item-header-icon"
2607
3759
  >
2608
- <i class="fas fa-check-circle" aria-hidden="true"></i>
3760
+ <svg
3761
+ class="pf-v6-svg"
3762
+ viewBox="0 0 32 32"
3763
+ fill="currentColor"
3764
+ aria-hidden="true"
3765
+ role="img"
3766
+ width="1em"
3767
+ height="1em"
3768
+ >
3769
+ <path
3770
+ 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"
3771
+ />
3772
+ </svg>
2609
3773
  </span>
2610
3774
  <h2
2611
3775
  class="pf-v6-c-notification-drawer__list-item-header-title"
@@ -2649,7 +3813,8 @@ section: components
2649
3813
  <span class="pf-v6-c-button__text">Skip to content</span>
2650
3814
  </a>
2651
3815
  </div>
2652
- <header class="pf-v6-c-masthead" id="-page-masthead">
3816
+
3817
+ <header class="pf-v6-c-masthead" id="-page-docked">
2653
3818
  <div class="pf-v6-c-masthead__main">
2654
3819
  <span class="pf-v6-c-masthead__toggle">
2655
3820
  <button
@@ -2691,7 +3856,7 @@ section: components
2691
3856
  y1="2.25860997e-13%"
2692
3857
  x2="32%"
2693
3858
  y2="100%"
2694
- id="linearGradient--page-masthead"
3859
+ id="linearGradient--page-docked"
2695
3860
  >
2696
3861
  <stop stop-color="#2B9AF3" offset="0%" />
2697
3862
  <stop
@@ -2745,11 +3910,11 @@ section: components
2745
3910
  />
2746
3911
  <path
2747
3912
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
2748
- fill="url(#linearGradient--page-masthead)"
3913
+ fill="url(#linearGradient--page-docked)"
2749
3914
  />
2750
3915
  <path
2751
3916
  d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z"
2752
- fill="url(#linearGradient--page-masthead)"
3917
+ fill="url(#linearGradient--page-docked)"
2753
3918
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
2754
3919
  />
2755
3920
  </g>
@@ -2759,7 +3924,7 @@ section: components
2759
3924
  </div>
2760
3925
  </div>
2761
3926
  <div class="pf-v6-c-masthead__content">
2762
- <div class="pf-v6-c-toolbar pf-m-static" id="-page-masthead-toolbar">
3927
+ <div class="pf-v6-c-toolbar pf-m-static" id="-page-docked-toolbar">
2763
3928
  <div class="pf-v6-c-toolbar__content">
2764
3929
  <div class="pf-v6-c-toolbar__content-section">
2765
3930
  <div
@@ -2773,7 +3938,19 @@ section: components
2773
3938
  aria-label="Unread notifications"
2774
3939
  >
2775
3940
  <span class="pf-v6-c-button__icon">
2776
- <i class="pf-v6-pficon-bell" aria-hidden="true"></i>
3941
+ <svg
3942
+ class="pf-v6-svg"
3943
+ viewBox="0 0 32 32"
3944
+ fill="currentColor"
3945
+ aria-hidden="true"
3946
+ role="img"
3947
+ width="1em"
3948
+ height="1em"
3949
+ >
3950
+ <path
3951
+ d="M28.75 22v3.5c0 .689-.561 1.25-1.25 1.25h-7.521c.005.084.021.166.021.25 0 2.206-1.794 4-4 4s-4-1.794-4-4c0-.084.016-.166.021-.25H4.5c-.689 0-1.25-.561-1.25-1.25V22a.75.75 0 0 1 .75-.75c1.24 0 2.25-1.009 2.25-2.25v-4c0-4.826 3.528-8.833 8.138-9.605A2.482 2.482 0 0 1 13.5 3.5C13.5 2.122 14.621 1 16 1s2.5 1.122 2.5 2.5c0 .761-.349 1.436-.888 1.895 4.61.772 8.138 4.779 8.138 9.605v4c0 1.241 1.01 2.25 2.25 2.25a.75.75 0 0 1 .75.75Z"
3952
+ />
3953
+ </svg>
2777
3954
  </span>
2778
3955
  </button>
2779
3956
  </div>
@@ -2789,7 +3966,19 @@ section: components
2789
3966
  aria-label="Application launcher"
2790
3967
  >
2791
3968
  <span class="pf-v6-c-menu-toggle__icon">
2792
- <i class="fas fa-th" aria-hidden="true"></i>
3969
+ <svg
3970
+ class="pf-v6-svg"
3971
+ viewBox="0 0 512 512"
3972
+ fill="currentColor"
3973
+ aria-hidden="true"
3974
+ role="img"
3975
+ width="1em"
3976
+ height="1em"
3977
+ >
3978
+ <path
3979
+ d="M149.333 56v80c0 13.255-10.745 24-24 24H24c-13.255 0-24-10.745-24-24V56c0-13.255 10.745-24 24-24h101.333c13.255 0 24 10.745 24 24zm181.334 240v-80c0-13.255-10.745-24-24-24H205.333c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24h101.333c13.256 0 24.001-10.745 24.001-24zm32-240v80c0 13.255 10.745 24 24 24H488c13.255 0 24-10.745 24-24V56c0-13.255-10.745-24-24-24H386.667c-13.255 0-24 10.745-24 24zm-32 80V56c0-13.255-10.745-24-24-24H205.333c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24h101.333c13.256 0 24.001-10.745 24.001-24zm-205.334 56H24c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24h101.333c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24zM0 376v80c0 13.255 10.745 24 24 24h101.333c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H24c-13.255 0-24 10.745-24 24zm386.667-56H488c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H386.667c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24zm0 160H488c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H386.667c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24zM181.333 376v80c0 13.255 10.745 24 24 24h101.333c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H205.333c-13.255 0-24 10.745-24 24z"
3980
+ />
3981
+ </svg>
2793
3982
  </span>
2794
3983
  </button>
2795
3984
  </div>
@@ -2801,7 +3990,19 @@ section: components
2801
3990
  aria-label="Settings"
2802
3991
  >
2803
3992
  <span class="pf-v6-c-menu-toggle__icon">
2804
- <i class="fas fa-cog" aria-hidden="true"></i>
3993
+ <svg
3994
+ class="pf-v6-svg"
3995
+ viewBox="0 0 32 32"
3996
+ fill="currentColor"
3997
+ aria-hidden="true"
3998
+ role="img"
3999
+ width="1em"
4000
+ height="1em"
4001
+ >
4002
+ <path
4003
+ d="M30.168 12.894a.5.5 0 0 0-.488-.394h-2.732a11.512 11.512 0 0 0-.729-1.769l1.931-1.93a.5.5 0 0 0 .066-.625 14.693 14.693 0 0 0-4.393-4.392.498.498 0 0 0-.624.067l-1.93 1.93a11.512 11.512 0 0 0-1.769-.729V2.319a.5.5 0 0 0-.395-.489 14.81 14.81 0 0 0-6.211 0 .5.5 0 0 0-.395.489v2.733c-.614.196-1.207.439-1.769.729L8.8 3.851a.498.498 0 0 0-.624-.067 14.714 14.714 0 0 0-4.393 4.392.5.5 0 0 0 .066.625l1.931 1.93a11.512 11.512 0 0 0-.729 1.769H2.319a.5.5 0 0 0-.488.394 14.652 14.652 0 0 0 0 6.212.5.5 0 0 0 .488.394h2.732c.196.615.44 1.207.729 1.769l-1.931 1.93a.5.5 0 0 0-.066.625 14.673 14.673 0 0 0 4.393 4.392.498.498 0 0 0 .624-.067l1.93-1.93c.562.289 1.154.533 1.769.729v2.733a.5.5 0 0 0 .395.489 14.686 14.686 0 0 0 6.21 0 .5.5 0 0 0 .395-.489v-2.733a11.454 11.454 0 0 0 1.769-.729l1.93 1.93a.5.5 0 0 0 .624.067 14.714 14.714 0 0 0 4.393-4.392.5.5 0 0 0-.066-.625l-1.931-1.93c.289-.562.533-1.154.729-1.769h2.732a.5.5 0 0 0 .488-.394 14.652 14.652 0 0 0 0-6.212ZM16 21.25c-2.895 0-5.25-2.355-5.25-5.25s2.355-5.25 5.25-5.25 5.25 2.355 5.25 5.25-2.355 5.25-5.25 5.25Z"
4004
+ />
4005
+ </svg>
2805
4006
  </span>
2806
4007
  </button>
2807
4008
  </div>
@@ -2813,7 +4014,19 @@ section: components
2813
4014
  aria-label="Help"
2814
4015
  >
2815
4016
  <span class="pf-v6-c-menu-toggle__icon">
2816
- <i class="fas fa-question-circle" aria-hidden="true"></i>
4017
+ <svg
4018
+ class="pf-v6-svg"
4019
+ viewBox="0 0 512 512"
4020
+ fill="currentColor"
4021
+ aria-hidden="true"
4022
+ role="img"
4023
+ width="1em"
4024
+ height="1em"
4025
+ >
4026
+ <path
4027
+ d="M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zM262.655 90c-54.497 0-89.255 22.957-116.549 63.758-3.536 5.286-2.353 12.415 2.715 16.258l34.699 26.31c5.205 3.947 12.621 3.008 16.665-2.122 17.864-22.658 30.113-35.797 57.303-35.797 20.429 0 45.698 13.148 45.698 32.958 0 14.976-12.363 22.667-32.534 33.976C247.128 238.528 216 254.941 216 296v4c0 6.627 5.373 12 12 12h56c6.627 0 12-5.373 12-12v-1.333c0-28.462 83.186-29.647 83.186-106.667 0-58.002-60.165-102-116.531-102zM256 338c-25.365 0-46 20.635-46 46 0 25.364 20.635 46 46 46s46-20.636 46-46c0-25.365-20.635-46-46-46z"
4028
+ />
4029
+ </svg>
2817
4030
  </span>
2818
4031
  </button>
2819
4032
  </div>
@@ -2827,7 +4040,19 @@ section: components
2827
4040
  aria-label="Actions"
2828
4041
  >
2829
4042
  <span class="pf-v6-c-menu-toggle__icon">
2830
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
4043
+ <svg
4044
+ class="pf-v6-svg"
4045
+ viewBox="0 0 32 32"
4046
+ fill="currentColor"
4047
+ aria-hidden="true"
4048
+ role="img"
4049
+ width="1em"
4050
+ height="1em"
4051
+ >
4052
+ <path
4053
+ 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"
4054
+ />
4055
+ </svg>
2831
4056
  </span>
2832
4057
  </button>
2833
4058
  </div>
@@ -2838,40 +4063,42 @@ section: components
2838
4063
  </div>
2839
4064
  </header>
2840
4065
  <div class="pf-v6-c-page__sidebar">
2841
- <div class="pf-v6-c-page__sidebar-body">
2842
- <nav class="pf-v6-c-nav" id="-page-primary-nav" aria-label="Global">
2843
- <ul class="pf-v6-c-nav__list" role="list">
2844
- <li class="pf-v6-c-nav__item">
2845
- <a href="#" class="pf-v6-c-nav__link">
2846
- <span class="pf-v6-c-nav__link-text">System panel</span>
2847
- </a>
2848
- </li>
2849
- <li class="pf-v6-c-nav__item">
2850
- <a
2851
- href="#"
2852
- class="pf-v6-c-nav__link pf-m-current"
2853
- aria-current="page"
2854
- >
2855
- <span class="pf-v6-c-nav__link-text">Policy</span>
2856
- </a>
2857
- </li>
2858
- <li class="pf-v6-c-nav__item">
2859
- <a href="#" class="pf-v6-c-nav__link">
2860
- <span class="pf-v6-c-nav__link-text">Authentication</span>
2861
- </a>
2862
- </li>
2863
- <li class="pf-v6-c-nav__item">
2864
- <a href="#" class="pf-v6-c-nav__link">
2865
- <span class="pf-v6-c-nav__link-text">Network services</span>
2866
- </a>
2867
- </li>
2868
- <li class="pf-v6-c-nav__item">
2869
- <a href="#" class="pf-v6-c-nav__link">
2870
- <span class="pf-v6-c-nav__link-text">Server</span>
2871
- </a>
2872
- </li>
2873
- </ul>
2874
- </nav>
4066
+ <div class="pf-v6-c-page__sidebar-main">
4067
+ <div class="pf-v6-c-page__sidebar-body">
4068
+ <nav class="pf-v6-c-nav" id="-page-primary-nav" aria-label="Global">
4069
+ <ul class="pf-v6-c-nav__list" role="list">
4070
+ <li class="pf-v6-c-nav__item">
4071
+ <a href="#" class="pf-v6-c-nav__link">
4072
+ <span class="pf-v6-c-nav__link-text">System panel</span>
4073
+ </a>
4074
+ </li>
4075
+ <li class="pf-v6-c-nav__item">
4076
+ <a
4077
+ href="#"
4078
+ class="pf-v6-c-nav__link pf-m-current"
4079
+ aria-current="page"
4080
+ >
4081
+ <span class="pf-v6-c-nav__link-text">Policy</span>
4082
+ </a>
4083
+ </li>
4084
+ <li class="pf-v6-c-nav__item">
4085
+ <a href="#" class="pf-v6-c-nav__link">
4086
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
4087
+ </a>
4088
+ </li>
4089
+ <li class="pf-v6-c-nav__item">
4090
+ <a href="#" class="pf-v6-c-nav__link">
4091
+ <span class="pf-v6-c-nav__link-text">Network services</span>
4092
+ </a>
4093
+ </li>
4094
+ <li class="pf-v6-c-nav__item">
4095
+ <a href="#" class="pf-v6-c-nav__link">
4096
+ <span class="pf-v6-c-nav__link-text">Server</span>
4097
+ </a>
4098
+ </li>
4099
+ </ul>
4100
+ </nav>
4101
+ </div>
2875
4102
  </div>
2876
4103
  </div>
2877
4104
  <div class="pf-v6-c-page__drawer">
@@ -2892,7 +4119,19 @@ section: components
2892
4119
  </li>
2893
4120
  <li class="pf-v6-c-breadcrumb__item">
2894
4121
  <span class="pf-v6-c-breadcrumb__item-divider">
2895
- <i class="fas fa-angle-right" aria-hidden="true"></i>
4122
+ <svg
4123
+ class="pf-v6-svg"
4124
+ viewBox="0 0 20 20"
4125
+ fill="currentColor"
4126
+ aria-hidden="true"
4127
+ role="img"
4128
+ width="1em"
4129
+ height="1em"
4130
+ >
4131
+ <path
4132
+ d="M14.35 8.94 6.71 1.29l-.02-.02c-.4-.38-1.03-.37-1.41.02-.38.4-.37 1.03.02 1.41l7.29 7.29-7.29 7.29a1.003 1.003 0 0 0 1.42 1.42l7.65-7.65c.59-.59.59-1.54 0-2.12Z"
4133
+ />
4134
+ </svg>
2896
4135
  </span>
2897
4136
 
2898
4137
  <a
@@ -2902,7 +4141,19 @@ section: components
2902
4141
  </li>
2903
4142
  <li class="pf-v6-c-breadcrumb__item">
2904
4143
  <span class="pf-v6-c-breadcrumb__item-divider">
2905
- <i class="fas fa-angle-right" aria-hidden="true"></i>
4144
+ <svg
4145
+ class="pf-v6-svg"
4146
+ viewBox="0 0 20 20"
4147
+ fill="currentColor"
4148
+ aria-hidden="true"
4149
+ role="img"
4150
+ width="1em"
4151
+ height="1em"
4152
+ >
4153
+ <path
4154
+ d="M14.35 8.94 6.71 1.29l-.02-.02c-.4-.38-1.03-.37-1.41.02-.38.4-.37 1.03.02 1.41l7.29 7.29-7.29 7.29a1.003 1.003 0 0 0 1.42 1.42l7.65-7.65c.59-.59.59-1.54 0-2.12Z"
4155
+ />
4156
+ </svg>
2906
4157
  </span>
2907
4158
 
2908
4159
  <a
@@ -2912,7 +4163,19 @@ section: components
2912
4163
  </li>
2913
4164
  <li class="pf-v6-c-breadcrumb__item">
2914
4165
  <span class="pf-v6-c-breadcrumb__item-divider">
2915
- <i class="fas fa-angle-right" aria-hidden="true"></i>
4166
+ <svg
4167
+ class="pf-v6-svg"
4168
+ viewBox="0 0 20 20"
4169
+ fill="currentColor"
4170
+ aria-hidden="true"
4171
+ role="img"
4172
+ width="1em"
4173
+ height="1em"
4174
+ >
4175
+ <path
4176
+ d="M14.35 8.94 6.71 1.29l-.02-.02c-.4-.38-1.03-.37-1.41.02-.38.4-.37 1.03.02 1.41l7.29 7.29-7.29 7.29a1.003 1.003 0 0 0 1.42 1.42l7.65-7.65c.59-.59.59-1.54 0-2.12Z"
4177
+ />
4178
+ </svg>
2916
4179
  </span>
2917
4180
 
2918
4181
  <a
@@ -2925,9 +4188,15 @@ section: components
2925
4188
  </nav>
2926
4189
  </div>
2927
4190
  </section>
2928
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
4191
+ <section
4192
+ class="pf-v6-c-page__main-section pf-m-limit-width"
4193
+ aria-labelledby="main-title"
4194
+ >
2929
4195
  <div class="pf-v6-c-page__main-body">
2930
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
4196
+ <h1
4197
+ class="pf-v6-c-content--h1 pf-m-page-title"
4198
+ id="main-title"
4199
+ >Main title</h1>
2931
4200
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
2932
4201
  </div>
2933
4202
  </section>
@@ -2989,7 +4258,19 @@ section: components
2989
4258
  id="drawer-demo-notification-drawer-groups-header-action"
2990
4259
  >
2991
4260
  <span class="pf-v6-c-menu-toggle__icon">
2992
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
4261
+ <svg
4262
+ class="pf-v6-svg"
4263
+ viewBox="0 0 32 32"
4264
+ fill="currentColor"
4265
+ aria-hidden="true"
4266
+ role="img"
4267
+ width="1em"
4268
+ height="1em"
4269
+ >
4270
+ <path
4271
+ 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"
4272
+ />
4273
+ </svg>
2993
4274
  </span>
2994
4275
  </button>
2995
4276
  </div>
@@ -3013,7 +4294,19 @@ section: components
3013
4294
  <span
3014
4295
  class="pf-v6-c-notification-drawer__group-toggle-icon"
3015
4296
  >
3016
- <i class="fas fa-angle-right" aria-hidden="true"></i>
4297
+ <svg
4298
+ class="pf-v6-svg"
4299
+ viewBox="0 0 20 20"
4300
+ fill="currentColor"
4301
+ aria-hidden="true"
4302
+ role="img"
4303
+ width="1em"
4304
+ height="1em"
4305
+ >
4306
+ <path
4307
+ 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"
4308
+ />
4309
+ </svg>
3017
4310
  </span>
3018
4311
  </button>
3019
4312
  </h1>
@@ -3032,7 +4325,19 @@ section: components
3032
4325
  <span
3033
4326
  class="pf-v6-c-notification-drawer__list-item-header-icon"
3034
4327
  >
3035
- <i class="fas fa-info-circle" aria-hidden="true"></i>
4328
+ <svg
4329
+ class="pf-v6-svg"
4330
+ viewBox="0 0 32 32"
4331
+ fill="currentColor"
4332
+ aria-hidden="true"
4333
+ role="img"
4334
+ width="1em"
4335
+ height="1em"
4336
+ >
4337
+ <path
4338
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm1.5 22a1.5 1.5 0 1 1-3 0v-5.157l-.188.04a1.5 1.5 0 0 1-.625-2.934l1.956-.416c.112-.024.223-.032.333-.03l.024-.002a1.5 1.5 0 0 1 1.5 1.5v7Zm-.08-12.58c-.38.37-.89.58-1.42.58a1.998 1.998 0 0 1-1.851-2.76c.051-.13.11-.24.19-.35.07-.11.15-.21.25-.3.74-.75 2.08-.75 2.83 0 .09.09.17.19.24.3.08.11.14.22.189.35.05.12.09.24.11.37.03.13.04.26.04.39 0 .53-.21 1.04-.58 1.42Z"
4339
+ />
4340
+ </svg>
3036
4341
  </span>
3037
4342
  <h2
3038
4343
  class="pf-v6-c-notification-drawer__list-item-header-title"
@@ -3053,7 +4358,19 @@ section: components
3053
4358
  id="drawer-demo-notification-drawer-groups-group1-menu-toggle-1"
3054
4359
  >
3055
4360
  <span class="pf-v6-c-menu-toggle__icon">
3056
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
4361
+ <svg
4362
+ class="pf-v6-svg"
4363
+ viewBox="0 0 32 32"
4364
+ fill="currentColor"
4365
+ aria-hidden="true"
4366
+ role="img"
4367
+ width="1em"
4368
+ height="1em"
4369
+ >
4370
+ <path
4371
+ 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"
4372
+ />
4373
+ </svg>
3057
4374
  </span>
3058
4375
  </button>
3059
4376
  </div>
@@ -3075,10 +4392,19 @@ section: components
3075
4392
  <span
3076
4393
  class="pf-v6-c-notification-drawer__list-item-header-icon"
3077
4394
  >
3078
- <i
3079
- class="fas fa-arrow-circle-up"
4395
+ <svg
4396
+ class="pf-v6-svg"
4397
+ viewBox="0 0 32 32"
4398
+ fill="currentColor"
3080
4399
  aria-hidden="true"
3081
- ></i>
4400
+ role="img"
4401
+ width="1em"
4402
+ height="1em"
4403
+ >
4404
+ <path
4405
+ d="M28.75 22v3.5c0 .689-.561 1.25-1.25 1.25h-7.521c.005.084.021.166.021.25 0 2.206-1.794 4-4 4s-4-1.794-4-4c0-.084.016-.166.021-.25H4.5c-.689 0-1.25-.561-1.25-1.25V22a.75.75 0 0 1 .75-.75c1.24 0 2.25-1.009 2.25-2.25v-4c0-4.826 3.528-8.833 8.138-9.605A2.482 2.482 0 0 1 13.5 3.5C13.5 2.122 14.621 1 16 1s2.5 1.122 2.5 2.5c0 .761-.349 1.436-.888 1.895 4.61.772 8.138 4.779 8.138 9.605v4c0 1.241 1.01 2.25 2.25 2.25a.75.75 0 0 1 .75.75Z"
4406
+ />
4407
+ </svg>
3082
4408
  </span>
3083
4409
  <h2
3084
4410
  class="pf-v6-c-notification-drawer__list-item-header-title"
@@ -3101,7 +4427,19 @@ section: components
3101
4427
  id="drawer-demo-notification-drawer-groups-group1-menu-toggle-3"
3102
4428
  >
3103
4429
  <span class="pf-v6-c-menu-toggle__icon">
3104
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
4430
+ <svg
4431
+ class="pf-v6-svg"
4432
+ viewBox="0 0 32 32"
4433
+ fill="currentColor"
4434
+ aria-hidden="true"
4435
+ role="img"
4436
+ width="1em"
4437
+ height="1em"
4438
+ >
4439
+ <path
4440
+ 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"
4441
+ />
4442
+ </svg>
3105
4443
  </span>
3106
4444
  </button>
3107
4445
  </div>
@@ -3123,10 +4461,19 @@ section: components
3123
4461
  <span
3124
4462
  class="pf-v6-c-notification-drawer__list-item-header-icon"
3125
4463
  >
3126
- <i
3127
- class="fas fa-arrow-circle-up"
4464
+ <svg
4465
+ class="pf-v6-svg"
4466
+ viewBox="0 0 32 32"
4467
+ fill="currentColor"
3128
4468
  aria-hidden="true"
3129
- ></i>
4469
+ role="img"
4470
+ width="1em"
4471
+ height="1em"
4472
+ >
4473
+ <path
4474
+ d="M28.75 22v3.5c0 .689-.561 1.25-1.25 1.25h-7.521c.005.084.021.166.021.25 0 2.206-1.794 4-4 4s-4-1.794-4-4c0-.084.016-.166.021-.25H4.5c-.689 0-1.25-.561-1.25-1.25V22a.75.75 0 0 1 .75-.75c1.24 0 2.25-1.009 2.25-2.25v-4c0-4.826 3.528-8.833 8.138-9.605A2.482 2.482 0 0 1 13.5 3.5C13.5 2.122 14.621 1 16 1s2.5 1.122 2.5 2.5c0 .761-.349 1.436-.888 1.895 4.61.772 8.138 4.779 8.138 9.605v4c0 1.241 1.01 2.25 2.25 2.25a.75.75 0 0 1 .75.75Z"
4475
+ />
4476
+ </svg>
3130
4477
  </span>
3131
4478
  <h2
3132
4479
  class="pf-v6-c-notification-drawer__list-item-header-title"
@@ -3149,7 +4496,19 @@ section: components
3149
4496
  id="drawer-demo-notification-drawer-groups-group1-menu-toggle-4"
3150
4497
  >
3151
4498
  <span class="pf-v6-c-menu-toggle__icon">
3152
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
4499
+ <svg
4500
+ class="pf-v6-svg"
4501
+ viewBox="0 0 32 32"
4502
+ fill="currentColor"
4503
+ aria-hidden="true"
4504
+ role="img"
4505
+ width="1em"
4506
+ height="1em"
4507
+ >
4508
+ <path
4509
+ 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"
4510
+ />
4511
+ </svg>
3153
4512
  </span>
3154
4513
  </button>
3155
4514
  </div>
@@ -3169,10 +4528,19 @@ section: components
3169
4528
  <span
3170
4529
  class="pf-v6-c-notification-drawer__list-item-header-icon"
3171
4530
  >
3172
- <i
3173
- class="fas fa-exclamation-triangle"
4531
+ <svg
4532
+ class="pf-v6-svg"
4533
+ viewBox="0 0 32 32"
4534
+ fill="currentColor"
3174
4535
  aria-hidden="true"
3175
- ></i>
4536
+ role="img"
4537
+ width="1em"
4538
+ height="1em"
4539
+ >
4540
+ <path
4541
+ 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"
4542
+ />
4543
+ </svg>
3176
4544
  </span>
3177
4545
  <h2
3178
4546
  class="pf-v6-c-notification-drawer__list-item-header-title"
@@ -3194,7 +4562,19 @@ section: components
3194
4562
  id="drawer-demo-notification-drawer-groups-group1-menu-toggle-5"
3195
4563
  >
3196
4564
  <span class="pf-v6-c-menu-toggle__icon">
3197
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
4565
+ <svg
4566
+ class="pf-v6-svg"
4567
+ viewBox="0 0 32 32"
4568
+ fill="currentColor"
4569
+ aria-hidden="true"
4570
+ role="img"
4571
+ width="1em"
4572
+ height="1em"
4573
+ >
4574
+ <path
4575
+ 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"
4576
+ />
4577
+ </svg>
3198
4578
  </span>
3199
4579
  </button>
3200
4580
  </div>
@@ -3214,7 +4594,19 @@ section: components
3214
4594
  <span
3215
4595
  class="pf-v6-c-notification-drawer__list-item-header-icon"
3216
4596
  >
3217
- <i class="fas fa-check-circle" aria-hidden="true"></i>
4597
+ <svg
4598
+ class="pf-v6-svg"
4599
+ viewBox="0 0 32 32"
4600
+ fill="currentColor"
4601
+ aria-hidden="true"
4602
+ role="img"
4603
+ width="1em"
4604
+ height="1em"
4605
+ >
4606
+ <path
4607
+ 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"
4608
+ />
4609
+ </svg>
3218
4610
  </span>
3219
4611
  <h2
3220
4612
  class="pf-v6-c-notification-drawer__list-item-header-title"
@@ -3236,7 +4628,19 @@ section: components
3236
4628
  id="drawer-demo-notification-drawer-groups-group1-menu-toggle-6"
3237
4629
  >
3238
4630
  <span class="pf-v6-c-menu-toggle__icon">
3239
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
4631
+ <svg
4632
+ class="pf-v6-svg"
4633
+ viewBox="0 0 32 32"
4634
+ fill="currentColor"
4635
+ aria-hidden="true"
4636
+ role="img"
4637
+ width="1em"
4638
+ height="1em"
4639
+ >
4640
+ <path
4641
+ 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"
4642
+ />
4643
+ </svg>
3240
4644
  </span>
3241
4645
  </button>
3242
4646
  </div>
@@ -3256,7 +4660,19 @@ section: components
3256
4660
  <span
3257
4661
  class="pf-v6-c-notification-drawer__list-item-header-icon"
3258
4662
  >
3259
- <i class="fas fa-check-circle" aria-hidden="true"></i>
4663
+ <svg
4664
+ class="pf-v6-svg"
4665
+ viewBox="0 0 32 32"
4666
+ fill="currentColor"
4667
+ aria-hidden="true"
4668
+ role="img"
4669
+ width="1em"
4670
+ height="1em"
4671
+ >
4672
+ <path
4673
+ 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"
4674
+ />
4675
+ </svg>
3260
4676
  </span>
3261
4677
  <h2
3262
4678
  class="pf-v6-c-notification-drawer__list-item-header-title pf-m-truncate"
@@ -3278,7 +4694,19 @@ section: components
3278
4694
  id="drawer-demo-notification-drawer-groups-group1-menu-toggle-7"
3279
4695
  >
3280
4696
  <span class="pf-v6-c-menu-toggle__icon">
3281
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
4697
+ <svg
4698
+ class="pf-v6-svg"
4699
+ viewBox="0 0 32 32"
4700
+ fill="currentColor"
4701
+ aria-hidden="true"
4702
+ role="img"
4703
+ width="1em"
4704
+ height="1em"
4705
+ >
4706
+ <path
4707
+ 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"
4708
+ />
4709
+ </svg>
3282
4710
  </span>
3283
4711
  </button>
3284
4712
  </div>
@@ -3298,7 +4726,19 @@ section: components
3298
4726
  <span
3299
4727
  class="pf-v6-c-notification-drawer__list-item-header-icon"
3300
4728
  >
3301
- <i class="fas fa-check-circle" aria-hidden="true"></i>
4729
+ <svg
4730
+ class="pf-v6-svg"
4731
+ viewBox="0 0 32 32"
4732
+ fill="currentColor"
4733
+ aria-hidden="true"
4734
+ role="img"
4735
+ width="1em"
4736
+ height="1em"
4737
+ >
4738
+ <path
4739
+ 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"
4740
+ />
4741
+ </svg>
3302
4742
  </span>
3303
4743
  <h2
3304
4744
  class="pf-v6-c-notification-drawer__list-item-header-title pf-m-truncate"
@@ -3321,7 +4761,19 @@ section: components
3321
4761
  id="drawer-demo-notification-drawer-groups-group1-menu-toggle-8"
3322
4762
  >
3323
4763
  <span class="pf-v6-c-menu-toggle__icon">
3324
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
4764
+ <svg
4765
+ class="pf-v6-svg"
4766
+ viewBox="0 0 32 32"
4767
+ fill="currentColor"
4768
+ aria-hidden="true"
4769
+ role="img"
4770
+ width="1em"
4771
+ height="1em"
4772
+ >
4773
+ <path
4774
+ 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"
4775
+ />
4776
+ </svg>
3325
4777
  </span>
3326
4778
  </button>
3327
4779
  </div>
@@ -3341,7 +4793,19 @@ section: components
3341
4793
  <span
3342
4794
  class="pf-v6-c-notification-drawer__list-item-header-icon"
3343
4795
  >
3344
- <i class="fas fa-check-circle" aria-hidden="true"></i>
4796
+ <svg
4797
+ class="pf-v6-svg"
4798
+ viewBox="0 0 32 32"
4799
+ fill="currentColor"
4800
+ aria-hidden="true"
4801
+ role="img"
4802
+ width="1em"
4803
+ height="1em"
4804
+ >
4805
+ <path
4806
+ 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"
4807
+ />
4808
+ </svg>
3345
4809
  </span>
3346
4810
  <h2
3347
4811
  class="pf-v6-c-notification-drawer__list-item-header-title"
@@ -3390,7 +4854,19 @@ section: components
3390
4854
  <span
3391
4855
  class="pf-v6-c-notification-drawer__group-toggle-icon"
3392
4856
  >
3393
- <i class="fas fa-angle-right" aria-hidden="true"></i>
4857
+ <svg
4858
+ class="pf-v6-svg"
4859
+ viewBox="0 0 20 20"
4860
+ fill="currentColor"
4861
+ aria-hidden="true"
4862
+ role="img"
4863
+ width="1em"
4864
+ height="1em"
4865
+ >
4866
+ <path
4867
+ 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"
4868
+ />
4869
+ </svg>
3394
4870
  </span>
3395
4871
  </button>
3396
4872
  </h1>
@@ -3405,7 +4881,19 @@ section: components
3405
4881
  <span
3406
4882
  class="pf-v6-c-notification-drawer__list-item-header-icon"
3407
4883
  >
3408
- <i class="fas fa-info-circle" aria-hidden="true"></i>
4884
+ <svg
4885
+ class="pf-v6-svg"
4886
+ viewBox="0 0 32 32"
4887
+ fill="currentColor"
4888
+ aria-hidden="true"
4889
+ role="img"
4890
+ width="1em"
4891
+ height="1em"
4892
+ >
4893
+ <path
4894
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm1.5 22a1.5 1.5 0 1 1-3 0v-5.157l-.188.04a1.5 1.5 0 0 1-.625-2.934l1.956-.416c.112-.024.223-.032.333-.03l.024-.002a1.5 1.5 0 0 1 1.5 1.5v7Zm-.08-12.58c-.38.37-.89.58-1.42.58a1.998 1.998 0 0 1-1.851-2.76c.051-.13.11-.24.19-.35.07-.11.15-.21.25-.3.74-.75 2.08-.75 2.83 0 .09.09.17.19.24.3.08.11.14.22.189.35.05.12.09.24.11.37.03.13.04.26.04.39 0 .53-.21 1.04-.58 1.42Z"
4895
+ />
4896
+ </svg>
3409
4897
  </span>
3410
4898
  <h2
3411
4899
  class="pf-v6-c-notification-drawer__list-item-header-title"
@@ -3426,7 +4914,19 @@ section: components
3426
4914
  id="drawer-demo-notification-drawer-groups-group2-menu-toggle-1"
3427
4915
  >
3428
4916
  <span class="pf-v6-c-menu-toggle__icon">
3429
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
4917
+ <svg
4918
+ class="pf-v6-svg"
4919
+ viewBox="0 0 32 32"
4920
+ fill="currentColor"
4921
+ aria-hidden="true"
4922
+ role="img"
4923
+ width="1em"
4924
+ height="1em"
4925
+ >
4926
+ <path
4927
+ 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"
4928
+ />
4929
+ </svg>
3430
4930
  </span>
3431
4931
  </button>
3432
4932
  </div>
@@ -3448,10 +4948,19 @@ section: components
3448
4948
  <span
3449
4949
  class="pf-v6-c-notification-drawer__list-item-header-icon"
3450
4950
  >
3451
- <i
3452
- class="fas fa-arrow-circle-up"
4951
+ <svg
4952
+ class="pf-v6-svg"
4953
+ viewBox="0 0 32 32"
4954
+ fill="currentColor"
3453
4955
  aria-hidden="true"
3454
- ></i>
4956
+ role="img"
4957
+ width="1em"
4958
+ height="1em"
4959
+ >
4960
+ <path
4961
+ d="M28.75 22v3.5c0 .689-.561 1.25-1.25 1.25h-7.521c.005.084.021.166.021.25 0 2.206-1.794 4-4 4s-4-1.794-4-4c0-.084.016-.166.021-.25H4.5c-.689 0-1.25-.561-1.25-1.25V22a.75.75 0 0 1 .75-.75c1.24 0 2.25-1.009 2.25-2.25v-4c0-4.826 3.528-8.833 8.138-9.605A2.482 2.482 0 0 1 13.5 3.5C13.5 2.122 14.621 1 16 1s2.5 1.122 2.5 2.5c0 .761-.349 1.436-.888 1.895 4.61.772 8.138 4.779 8.138 9.605v4c0 1.241 1.01 2.25 2.25 2.25a.75.75 0 0 1 .75.75Z"
4962
+ />
4963
+ </svg>
3455
4964
  </span>
3456
4965
  <h2
3457
4966
  class="pf-v6-c-notification-drawer__list-item-header-title"
@@ -3474,7 +4983,19 @@ section: components
3474
4983
  id="drawer-demo-notification-drawer-groups-group2-menu-toggle-3"
3475
4984
  >
3476
4985
  <span class="pf-v6-c-menu-toggle__icon">
3477
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
4986
+ <svg
4987
+ class="pf-v6-svg"
4988
+ viewBox="0 0 32 32"
4989
+ fill="currentColor"
4990
+ aria-hidden="true"
4991
+ role="img"
4992
+ width="1em"
4993
+ height="1em"
4994
+ >
4995
+ <path
4996
+ 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"
4997
+ />
4998
+ </svg>
3478
4999
  </span>
3479
5000
  </button>
3480
5001
  </div>
@@ -3496,10 +5017,19 @@ section: components
3496
5017
  <span
3497
5018
  class="pf-v6-c-notification-drawer__list-item-header-icon"
3498
5019
  >
3499
- <i
3500
- class="fas fa-arrow-circle-up"
5020
+ <svg
5021
+ class="pf-v6-svg"
5022
+ viewBox="0 0 32 32"
5023
+ fill="currentColor"
3501
5024
  aria-hidden="true"
3502
- ></i>
5025
+ role="img"
5026
+ width="1em"
5027
+ height="1em"
5028
+ >
5029
+ <path
5030
+ d="M28.75 22v3.5c0 .689-.561 1.25-1.25 1.25h-7.521c.005.084.021.166.021.25 0 2.206-1.794 4-4 4s-4-1.794-4-4c0-.084.016-.166.021-.25H4.5c-.689 0-1.25-.561-1.25-1.25V22a.75.75 0 0 1 .75-.75c1.24 0 2.25-1.009 2.25-2.25v-4c0-4.826 3.528-8.833 8.138-9.605A2.482 2.482 0 0 1 13.5 3.5C13.5 2.122 14.621 1 16 1s2.5 1.122 2.5 2.5c0 .761-.349 1.436-.888 1.895 4.61.772 8.138 4.779 8.138 9.605v4c0 1.241 1.01 2.25 2.25 2.25a.75.75 0 0 1 .75.75Z"
5031
+ />
5032
+ </svg>
3503
5033
  </span>
3504
5034
  <h2
3505
5035
  class="pf-v6-c-notification-drawer__list-item-header-title"
@@ -3522,7 +5052,19 @@ section: components
3522
5052
  id="drawer-demo-notification-drawer-groups-group2-menu-toggle-4"
3523
5053
  >
3524
5054
  <span class="pf-v6-c-menu-toggle__icon">
3525
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
5055
+ <svg
5056
+ class="pf-v6-svg"
5057
+ viewBox="0 0 32 32"
5058
+ fill="currentColor"
5059
+ aria-hidden="true"
5060
+ role="img"
5061
+ width="1em"
5062
+ height="1em"
5063
+ >
5064
+ <path
5065
+ 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"
5066
+ />
5067
+ </svg>
3526
5068
  </span>
3527
5069
  </button>
3528
5070
  </div>
@@ -3542,10 +5084,19 @@ section: components
3542
5084
  <span
3543
5085
  class="pf-v6-c-notification-drawer__list-item-header-icon"
3544
5086
  >
3545
- <i
3546
- class="fas fa-exclamation-triangle"
5087
+ <svg
5088
+ class="pf-v6-svg"
5089
+ viewBox="0 0 32 32"
5090
+ fill="currentColor"
3547
5091
  aria-hidden="true"
3548
- ></i>
5092
+ role="img"
5093
+ width="1em"
5094
+ height="1em"
5095
+ >
5096
+ <path
5097
+ 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"
5098
+ />
5099
+ </svg>
3549
5100
  </span>
3550
5101
  <h2
3551
5102
  class="pf-v6-c-notification-drawer__list-item-header-title"
@@ -3567,7 +5118,19 @@ section: components
3567
5118
  id="drawer-demo-notification-drawer-groups-group2-menu-toggle-5"
3568
5119
  >
3569
5120
  <span class="pf-v6-c-menu-toggle__icon">
3570
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
5121
+ <svg
5122
+ class="pf-v6-svg"
5123
+ viewBox="0 0 32 32"
5124
+ fill="currentColor"
5125
+ aria-hidden="true"
5126
+ role="img"
5127
+ width="1em"
5128
+ height="1em"
5129
+ >
5130
+ <path
5131
+ 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"
5132
+ />
5133
+ </svg>
3571
5134
  </span>
3572
5135
  </button>
3573
5136
  </div>
@@ -3587,7 +5150,19 @@ section: components
3587
5150
  <span
3588
5151
  class="pf-v6-c-notification-drawer__list-item-header-icon"
3589
5152
  >
3590
- <i class="fas fa-check-circle" aria-hidden="true"></i>
5153
+ <svg
5154
+ class="pf-v6-svg"
5155
+ viewBox="0 0 32 32"
5156
+ fill="currentColor"
5157
+ aria-hidden="true"
5158
+ role="img"
5159
+ width="1em"
5160
+ height="1em"
5161
+ >
5162
+ <path
5163
+ 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"
5164
+ />
5165
+ </svg>
3591
5166
  </span>
3592
5167
  <h2
3593
5168
  class="pf-v6-c-notification-drawer__list-item-header-title"
@@ -3609,7 +5184,19 @@ section: components
3609
5184
  id="drawer-demo-notification-drawer-groups-group2-menu-toggle-6"
3610
5185
  >
3611
5186
  <span class="pf-v6-c-menu-toggle__icon">
3612
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
5187
+ <svg
5188
+ class="pf-v6-svg"
5189
+ viewBox="0 0 32 32"
5190
+ fill="currentColor"
5191
+ aria-hidden="true"
5192
+ role="img"
5193
+ width="1em"
5194
+ height="1em"
5195
+ >
5196
+ <path
5197
+ 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"
5198
+ />
5199
+ </svg>
3613
5200
  </span>
3614
5201
  </button>
3615
5202
  </div>
@@ -3629,7 +5216,19 @@ section: components
3629
5216
  <span
3630
5217
  class="pf-v6-c-notification-drawer__list-item-header-icon"
3631
5218
  >
3632
- <i class="fas fa-check-circle" aria-hidden="true"></i>
5219
+ <svg
5220
+ class="pf-v6-svg"
5221
+ viewBox="0 0 32 32"
5222
+ fill="currentColor"
5223
+ aria-hidden="true"
5224
+ role="img"
5225
+ width="1em"
5226
+ height="1em"
5227
+ >
5228
+ <path
5229
+ 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"
5230
+ />
5231
+ </svg>
3633
5232
  </span>
3634
5233
  <h2
3635
5234
  class="pf-v6-c-notification-drawer__list-item-header-title pf-m-truncate"
@@ -3651,7 +5250,19 @@ section: components
3651
5250
  id="drawer-demo-notification-drawer-groups-group2-menu-toggle-7"
3652
5251
  >
3653
5252
  <span class="pf-v6-c-menu-toggle__icon">
3654
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
5253
+ <svg
5254
+ class="pf-v6-svg"
5255
+ viewBox="0 0 32 32"
5256
+ fill="currentColor"
5257
+ aria-hidden="true"
5258
+ role="img"
5259
+ width="1em"
5260
+ height="1em"
5261
+ >
5262
+ <path
5263
+ 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"
5264
+ />
5265
+ </svg>
3655
5266
  </span>
3656
5267
  </button>
3657
5268
  </div>
@@ -3671,7 +5282,19 @@ section: components
3671
5282
  <span
3672
5283
  class="pf-v6-c-notification-drawer__list-item-header-icon"
3673
5284
  >
3674
- <i class="fas fa-check-circle" aria-hidden="true"></i>
5285
+ <svg
5286
+ class="pf-v6-svg"
5287
+ viewBox="0 0 32 32"
5288
+ fill="currentColor"
5289
+ aria-hidden="true"
5290
+ role="img"
5291
+ width="1em"
5292
+ height="1em"
5293
+ >
5294
+ <path
5295
+ 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"
5296
+ />
5297
+ </svg>
3675
5298
  </span>
3676
5299
  <h2
3677
5300
  class="pf-v6-c-notification-drawer__list-item-header-title pf-m-truncate"
@@ -3694,7 +5317,19 @@ section: components
3694
5317
  id="drawer-demo-notification-drawer-groups-group2-menu-toggle-8"
3695
5318
  >
3696
5319
  <span class="pf-v6-c-menu-toggle__icon">
3697
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
5320
+ <svg
5321
+ class="pf-v6-svg"
5322
+ viewBox="0 0 32 32"
5323
+ fill="currentColor"
5324
+ aria-hidden="true"
5325
+ role="img"
5326
+ width="1em"
5327
+ height="1em"
5328
+ >
5329
+ <path
5330
+ 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"
5331
+ />
5332
+ </svg>
3698
5333
  </span>
3699
5334
  </button>
3700
5335
  </div>
@@ -3714,7 +5349,19 @@ section: components
3714
5349
  <span
3715
5350
  class="pf-v6-c-notification-drawer__list-item-header-icon"
3716
5351
  >
3717
- <i class="fas fa-check-circle" aria-hidden="true"></i>
5352
+ <svg
5353
+ class="pf-v6-svg"
5354
+ viewBox="0 0 32 32"
5355
+ fill="currentColor"
5356
+ aria-hidden="true"
5357
+ role="img"
5358
+ width="1em"
5359
+ height="1em"
5360
+ >
5361
+ <path
5362
+ 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"
5363
+ />
5364
+ </svg>
3718
5365
  </span>
3719
5366
  <h2
3720
5367
  class="pf-v6-c-notification-drawer__list-item-header-title"
@@ -3761,7 +5408,19 @@ section: components
3761
5408
  <span
3762
5409
  class="pf-v6-c-notification-drawer__group-toggle-icon"
3763
5410
  >
3764
- <i class="fas fa-angle-right" aria-hidden="true"></i>
5411
+ <svg
5412
+ class="pf-v6-svg"
5413
+ viewBox="0 0 20 20"
5414
+ fill="currentColor"
5415
+ aria-hidden="true"
5416
+ role="img"
5417
+ width="1em"
5418
+ height="1em"
5419
+ >
5420
+ <path
5421
+ 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"
5422
+ />
5423
+ </svg>
3765
5424
  </span>
3766
5425
  </button>
3767
5426
  </h1>
@@ -3780,7 +5439,19 @@ section: components
3780
5439
  <span
3781
5440
  class="pf-v6-c-notification-drawer__list-item-header-icon"
3782
5441
  >
3783
- <i class="fas fa-info-circle" aria-hidden="true"></i>
5442
+ <svg
5443
+ class="pf-v6-svg"
5444
+ viewBox="0 0 32 32"
5445
+ fill="currentColor"
5446
+ aria-hidden="true"
5447
+ role="img"
5448
+ width="1em"
5449
+ height="1em"
5450
+ >
5451
+ <path
5452
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm1.5 22a1.5 1.5 0 1 1-3 0v-5.157l-.188.04a1.5 1.5 0 0 1-.625-2.934l1.956-.416c.112-.024.223-.032.333-.03l.024-.002a1.5 1.5 0 0 1 1.5 1.5v7Zm-.08-12.58c-.38.37-.89.58-1.42.58a1.998 1.998 0 0 1-1.851-2.76c.051-.13.11-.24.19-.35.07-.11.15-.21.25-.3.74-.75 2.08-.75 2.83 0 .09.09.17.19.24.3.08.11.14.22.189.35.05.12.09.24.11.37.03.13.04.26.04.39 0 .53-.21 1.04-.58 1.42Z"
5453
+ />
5454
+ </svg>
3784
5455
  </span>
3785
5456
  <h2
3786
5457
  class="pf-v6-c-notification-drawer__list-item-header-title"
@@ -3801,7 +5472,19 @@ section: components
3801
5472
  id="drawer-demo-notification-drawer-groups-group3-menu-toggle-1"
3802
5473
  >
3803
5474
  <span class="pf-v6-c-menu-toggle__icon">
3804
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
5475
+ <svg
5476
+ class="pf-v6-svg"
5477
+ viewBox="0 0 32 32"
5478
+ fill="currentColor"
5479
+ aria-hidden="true"
5480
+ role="img"
5481
+ width="1em"
5482
+ height="1em"
5483
+ >
5484
+ <path
5485
+ 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"
5486
+ />
5487
+ </svg>
3805
5488
  </span>
3806
5489
  </button>
3807
5490
  </div>
@@ -3823,10 +5506,19 @@ section: components
3823
5506
  <span
3824
5507
  class="pf-v6-c-notification-drawer__list-item-header-icon"
3825
5508
  >
3826
- <i
3827
- class="fas fa-arrow-circle-up"
5509
+ <svg
5510
+ class="pf-v6-svg"
5511
+ viewBox="0 0 32 32"
5512
+ fill="currentColor"
3828
5513
  aria-hidden="true"
3829
- ></i>
5514
+ role="img"
5515
+ width="1em"
5516
+ height="1em"
5517
+ >
5518
+ <path
5519
+ d="M28.75 22v3.5c0 .689-.561 1.25-1.25 1.25h-7.521c.005.084.021.166.021.25 0 2.206-1.794 4-4 4s-4-1.794-4-4c0-.084.016-.166.021-.25H4.5c-.689 0-1.25-.561-1.25-1.25V22a.75.75 0 0 1 .75-.75c1.24 0 2.25-1.009 2.25-2.25v-4c0-4.826 3.528-8.833 8.138-9.605A2.482 2.482 0 0 1 13.5 3.5C13.5 2.122 14.621 1 16 1s2.5 1.122 2.5 2.5c0 .761-.349 1.436-.888 1.895 4.61.772 8.138 4.779 8.138 9.605v4c0 1.241 1.01 2.25 2.25 2.25a.75.75 0 0 1 .75.75Z"
5520
+ />
5521
+ </svg>
3830
5522
  </span>
3831
5523
  <h2
3832
5524
  class="pf-v6-c-notification-drawer__list-item-header-title"
@@ -3849,7 +5541,19 @@ section: components
3849
5541
  id="drawer-demo-notification-drawer-groups-group3-menu-toggle-3"
3850
5542
  >
3851
5543
  <span class="pf-v6-c-menu-toggle__icon">
3852
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
5544
+ <svg
5545
+ class="pf-v6-svg"
5546
+ viewBox="0 0 32 32"
5547
+ fill="currentColor"
5548
+ aria-hidden="true"
5549
+ role="img"
5550
+ width="1em"
5551
+ height="1em"
5552
+ >
5553
+ <path
5554
+ 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"
5555
+ />
5556
+ </svg>
3853
5557
  </span>
3854
5558
  </button>
3855
5559
  </div>
@@ -3871,10 +5575,19 @@ section: components
3871
5575
  <span
3872
5576
  class="pf-v6-c-notification-drawer__list-item-header-icon"
3873
5577
  >
3874
- <i
3875
- class="fas fa-arrow-circle-up"
5578
+ <svg
5579
+ class="pf-v6-svg"
5580
+ viewBox="0 0 32 32"
5581
+ fill="currentColor"
3876
5582
  aria-hidden="true"
3877
- ></i>
5583
+ role="img"
5584
+ width="1em"
5585
+ height="1em"
5586
+ >
5587
+ <path
5588
+ d="M28.75 22v3.5c0 .689-.561 1.25-1.25 1.25h-7.521c.005.084.021.166.021.25 0 2.206-1.794 4-4 4s-4-1.794-4-4c0-.084.016-.166.021-.25H4.5c-.689 0-1.25-.561-1.25-1.25V22a.75.75 0 0 1 .75-.75c1.24 0 2.25-1.009 2.25-2.25v-4c0-4.826 3.528-8.833 8.138-9.605A2.482 2.482 0 0 1 13.5 3.5C13.5 2.122 14.621 1 16 1s2.5 1.122 2.5 2.5c0 .761-.349 1.436-.888 1.895 4.61.772 8.138 4.779 8.138 9.605v4c0 1.241 1.01 2.25 2.25 2.25a.75.75 0 0 1 .75.75Z"
5589
+ />
5590
+ </svg>
3878
5591
  </span>
3879
5592
  <h2
3880
5593
  class="pf-v6-c-notification-drawer__list-item-header-title"
@@ -3897,7 +5610,19 @@ section: components
3897
5610
  id="drawer-demo-notification-drawer-groups-group3-menu-toggle-4"
3898
5611
  >
3899
5612
  <span class="pf-v6-c-menu-toggle__icon">
3900
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
5613
+ <svg
5614
+ class="pf-v6-svg"
5615
+ viewBox="0 0 32 32"
5616
+ fill="currentColor"
5617
+ aria-hidden="true"
5618
+ role="img"
5619
+ width="1em"
5620
+ height="1em"
5621
+ >
5622
+ <path
5623
+ 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"
5624
+ />
5625
+ </svg>
3901
5626
  </span>
3902
5627
  </button>
3903
5628
  </div>
@@ -3917,10 +5642,19 @@ section: components
3917
5642
  <span
3918
5643
  class="pf-v6-c-notification-drawer__list-item-header-icon"
3919
5644
  >
3920
- <i
3921
- class="fas fa-exclamation-triangle"
5645
+ <svg
5646
+ class="pf-v6-svg"
5647
+ viewBox="0 0 32 32"
5648
+ fill="currentColor"
3922
5649
  aria-hidden="true"
3923
- ></i>
5650
+ role="img"
5651
+ width="1em"
5652
+ height="1em"
5653
+ >
5654
+ <path
5655
+ 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"
5656
+ />
5657
+ </svg>
3924
5658
  </span>
3925
5659
  <h2
3926
5660
  class="pf-v6-c-notification-drawer__list-item-header-title"
@@ -3942,7 +5676,19 @@ section: components
3942
5676
  id="drawer-demo-notification-drawer-groups-group3-menu-toggle-5"
3943
5677
  >
3944
5678
  <span class="pf-v6-c-menu-toggle__icon">
3945
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
5679
+ <svg
5680
+ class="pf-v6-svg"
5681
+ viewBox="0 0 32 32"
5682
+ fill="currentColor"
5683
+ aria-hidden="true"
5684
+ role="img"
5685
+ width="1em"
5686
+ height="1em"
5687
+ >
5688
+ <path
5689
+ 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"
5690
+ />
5691
+ </svg>
3946
5692
  </span>
3947
5693
  </button>
3948
5694
  </div>
@@ -3962,7 +5708,19 @@ section: components
3962
5708
  <span
3963
5709
  class="pf-v6-c-notification-drawer__list-item-header-icon"
3964
5710
  >
3965
- <i class="fas fa-check-circle" aria-hidden="true"></i>
5711
+ <svg
5712
+ class="pf-v6-svg"
5713
+ viewBox="0 0 32 32"
5714
+ fill="currentColor"
5715
+ aria-hidden="true"
5716
+ role="img"
5717
+ width="1em"
5718
+ height="1em"
5719
+ >
5720
+ <path
5721
+ 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"
5722
+ />
5723
+ </svg>
3966
5724
  </span>
3967
5725
  <h2
3968
5726
  class="pf-v6-c-notification-drawer__list-item-header-title"
@@ -3984,7 +5742,19 @@ section: components
3984
5742
  id="drawer-demo-notification-drawer-groups-group3-menu-toggle-6"
3985
5743
  >
3986
5744
  <span class="pf-v6-c-menu-toggle__icon">
3987
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
5745
+ <svg
5746
+ class="pf-v6-svg"
5747
+ viewBox="0 0 32 32"
5748
+ fill="currentColor"
5749
+ aria-hidden="true"
5750
+ role="img"
5751
+ width="1em"
5752
+ height="1em"
5753
+ >
5754
+ <path
5755
+ 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"
5756
+ />
5757
+ </svg>
3988
5758
  </span>
3989
5759
  </button>
3990
5760
  </div>
@@ -4004,7 +5774,19 @@ section: components
4004
5774
  <span
4005
5775
  class="pf-v6-c-notification-drawer__list-item-header-icon"
4006
5776
  >
4007
- <i class="fas fa-check-circle" aria-hidden="true"></i>
5777
+ <svg
5778
+ class="pf-v6-svg"
5779
+ viewBox="0 0 32 32"
5780
+ fill="currentColor"
5781
+ aria-hidden="true"
5782
+ role="img"
5783
+ width="1em"
5784
+ height="1em"
5785
+ >
5786
+ <path
5787
+ 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"
5788
+ />
5789
+ </svg>
4008
5790
  </span>
4009
5791
  <h2
4010
5792
  class="pf-v6-c-notification-drawer__list-item-header-title pf-m-truncate"
@@ -4026,7 +5808,19 @@ section: components
4026
5808
  id="drawer-demo-notification-drawer-groups-group3-menu-toggle-7"
4027
5809
  >
4028
5810
  <span class="pf-v6-c-menu-toggle__icon">
4029
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
5811
+ <svg
5812
+ class="pf-v6-svg"
5813
+ viewBox="0 0 32 32"
5814
+ fill="currentColor"
5815
+ aria-hidden="true"
5816
+ role="img"
5817
+ width="1em"
5818
+ height="1em"
5819
+ >
5820
+ <path
5821
+ 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"
5822
+ />
5823
+ </svg>
4030
5824
  </span>
4031
5825
  </button>
4032
5826
  </div>
@@ -4046,7 +5840,19 @@ section: components
4046
5840
  <span
4047
5841
  class="pf-v6-c-notification-drawer__list-item-header-icon"
4048
5842
  >
4049
- <i class="fas fa-check-circle" aria-hidden="true"></i>
5843
+ <svg
5844
+ class="pf-v6-svg"
5845
+ viewBox="0 0 32 32"
5846
+ fill="currentColor"
5847
+ aria-hidden="true"
5848
+ role="img"
5849
+ width="1em"
5850
+ height="1em"
5851
+ >
5852
+ <path
5853
+ 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"
5854
+ />
5855
+ </svg>
4050
5856
  </span>
4051
5857
  <h2
4052
5858
  class="pf-v6-c-notification-drawer__list-item-header-title pf-m-truncate"
@@ -4069,7 +5875,19 @@ section: components
4069
5875
  id="drawer-demo-notification-drawer-groups-group3-menu-toggle-8"
4070
5876
  >
4071
5877
  <span class="pf-v6-c-menu-toggle__icon">
4072
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
5878
+ <svg
5879
+ class="pf-v6-svg"
5880
+ viewBox="0 0 32 32"
5881
+ fill="currentColor"
5882
+ aria-hidden="true"
5883
+ role="img"
5884
+ width="1em"
5885
+ height="1em"
5886
+ >
5887
+ <path
5888
+ 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"
5889
+ />
5890
+ </svg>
4073
5891
  </span>
4074
5892
  </button>
4075
5893
  </div>
@@ -4089,7 +5907,19 @@ section: components
4089
5907
  <span
4090
5908
  class="pf-v6-c-notification-drawer__list-item-header-icon"
4091
5909
  >
4092
- <i class="fas fa-check-circle" aria-hidden="true"></i>
5910
+ <svg
5911
+ class="pf-v6-svg"
5912
+ viewBox="0 0 32 32"
5913
+ fill="currentColor"
5914
+ aria-hidden="true"
5915
+ role="img"
5916
+ width="1em"
5917
+ height="1em"
5918
+ >
5919
+ <path
5920
+ 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"
5921
+ />
5922
+ </svg>
4093
5923
  </span>
4094
5924
  <h2
4095
5925
  class="pf-v6-c-notification-drawer__list-item-header-title"
@@ -4136,7 +5966,19 @@ section: components
4136
5966
  <span
4137
5967
  class="pf-v6-c-notification-drawer__group-toggle-icon"
4138
5968
  >
4139
- <i class="fas fa-angle-right" aria-hidden="true"></i>
5969
+ <svg
5970
+ class="pf-v6-svg"
5971
+ viewBox="0 0 20 20"
5972
+ fill="currentColor"
5973
+ aria-hidden="true"
5974
+ role="img"
5975
+ width="1em"
5976
+ height="1em"
5977
+ >
5978
+ <path
5979
+ 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"
5980
+ />
5981
+ </svg>
4140
5982
  </span>
4141
5983
  </button>
4142
5984
  </h1>
@@ -4155,7 +5997,19 @@ section: components
4155
5997
  <span
4156
5998
  class="pf-v6-c-notification-drawer__list-item-header-icon"
4157
5999
  >
4158
- <i class="fas fa-info-circle" aria-hidden="true"></i>
6000
+ <svg
6001
+ class="pf-v6-svg"
6002
+ viewBox="0 0 32 32"
6003
+ fill="currentColor"
6004
+ aria-hidden="true"
6005
+ role="img"
6006
+ width="1em"
6007
+ height="1em"
6008
+ >
6009
+ <path
6010
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm1.5 22a1.5 1.5 0 1 1-3 0v-5.157l-.188.04a1.5 1.5 0 0 1-.625-2.934l1.956-.416c.112-.024.223-.032.333-.03l.024-.002a1.5 1.5 0 0 1 1.5 1.5v7Zm-.08-12.58c-.38.37-.89.58-1.42.58a1.998 1.998 0 0 1-1.851-2.76c.051-.13.11-.24.19-.35.07-.11.15-.21.25-.3.74-.75 2.08-.75 2.83 0 .09.09.17.19.24.3.08.11.14.22.189.35.05.12.09.24.11.37.03.13.04.26.04.39 0 .53-.21 1.04-.58 1.42Z"
6011
+ />
6012
+ </svg>
4159
6013
  </span>
4160
6014
  <h2
4161
6015
  class="pf-v6-c-notification-drawer__list-item-header-title"
@@ -4176,7 +6030,19 @@ section: components
4176
6030
  id="drawer-demo-notification-drawer-groups-group4-menu-toggle-1"
4177
6031
  >
4178
6032
  <span class="pf-v6-c-menu-toggle__icon">
4179
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
6033
+ <svg
6034
+ class="pf-v6-svg"
6035
+ viewBox="0 0 32 32"
6036
+ fill="currentColor"
6037
+ aria-hidden="true"
6038
+ role="img"
6039
+ width="1em"
6040
+ height="1em"
6041
+ >
6042
+ <path
6043
+ 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"
6044
+ />
6045
+ </svg>
4180
6046
  </span>
4181
6047
  </button>
4182
6048
  </div>
@@ -4198,10 +6064,19 @@ section: components
4198
6064
  <span
4199
6065
  class="pf-v6-c-notification-drawer__list-item-header-icon"
4200
6066
  >
4201
- <i
4202
- class="fas fa-arrow-circle-up"
6067
+ <svg
6068
+ class="pf-v6-svg"
6069
+ viewBox="0 0 32 32"
6070
+ fill="currentColor"
4203
6071
  aria-hidden="true"
4204
- ></i>
6072
+ role="img"
6073
+ width="1em"
6074
+ height="1em"
6075
+ >
6076
+ <path
6077
+ d="M28.75 22v3.5c0 .689-.561 1.25-1.25 1.25h-7.521c.005.084.021.166.021.25 0 2.206-1.794 4-4 4s-4-1.794-4-4c0-.084.016-.166.021-.25H4.5c-.689 0-1.25-.561-1.25-1.25V22a.75.75 0 0 1 .75-.75c1.24 0 2.25-1.009 2.25-2.25v-4c0-4.826 3.528-8.833 8.138-9.605A2.482 2.482 0 0 1 13.5 3.5C13.5 2.122 14.621 1 16 1s2.5 1.122 2.5 2.5c0 .761-.349 1.436-.888 1.895 4.61.772 8.138 4.779 8.138 9.605v4c0 1.241 1.01 2.25 2.25 2.25a.75.75 0 0 1 .75.75Z"
6078
+ />
6079
+ </svg>
4205
6080
  </span>
4206
6081
  <h2
4207
6082
  class="pf-v6-c-notification-drawer__list-item-header-title"
@@ -4224,7 +6099,19 @@ section: components
4224
6099
  id="drawer-demo-notification-drawer-groups-group4-menu-toggle-3"
4225
6100
  >
4226
6101
  <span class="pf-v6-c-menu-toggle__icon">
4227
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
6102
+ <svg
6103
+ class="pf-v6-svg"
6104
+ viewBox="0 0 32 32"
6105
+ fill="currentColor"
6106
+ aria-hidden="true"
6107
+ role="img"
6108
+ width="1em"
6109
+ height="1em"
6110
+ >
6111
+ <path
6112
+ 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"
6113
+ />
6114
+ </svg>
4228
6115
  </span>
4229
6116
  </button>
4230
6117
  </div>
@@ -4246,10 +6133,19 @@ section: components
4246
6133
  <span
4247
6134
  class="pf-v6-c-notification-drawer__list-item-header-icon"
4248
6135
  >
4249
- <i
4250
- class="fas fa-arrow-circle-up"
6136
+ <svg
6137
+ class="pf-v6-svg"
6138
+ viewBox="0 0 32 32"
6139
+ fill="currentColor"
4251
6140
  aria-hidden="true"
4252
- ></i>
6141
+ role="img"
6142
+ width="1em"
6143
+ height="1em"
6144
+ >
6145
+ <path
6146
+ d="M28.75 22v3.5c0 .689-.561 1.25-1.25 1.25h-7.521c.005.084.021.166.021.25 0 2.206-1.794 4-4 4s-4-1.794-4-4c0-.084.016-.166.021-.25H4.5c-.689 0-1.25-.561-1.25-1.25V22a.75.75 0 0 1 .75-.75c1.24 0 2.25-1.009 2.25-2.25v-4c0-4.826 3.528-8.833 8.138-9.605A2.482 2.482 0 0 1 13.5 3.5C13.5 2.122 14.621 1 16 1s2.5 1.122 2.5 2.5c0 .761-.349 1.436-.888 1.895 4.61.772 8.138 4.779 8.138 9.605v4c0 1.241 1.01 2.25 2.25 2.25a.75.75 0 0 1 .75.75Z"
6147
+ />
6148
+ </svg>
4253
6149
  </span>
4254
6150
  <h2
4255
6151
  class="pf-v6-c-notification-drawer__list-item-header-title"
@@ -4272,7 +6168,19 @@ section: components
4272
6168
  id="drawer-demo-notification-drawer-groups-group4-menu-toggle-4"
4273
6169
  >
4274
6170
  <span class="pf-v6-c-menu-toggle__icon">
4275
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
6171
+ <svg
6172
+ class="pf-v6-svg"
6173
+ viewBox="0 0 32 32"
6174
+ fill="currentColor"
6175
+ aria-hidden="true"
6176
+ role="img"
6177
+ width="1em"
6178
+ height="1em"
6179
+ >
6180
+ <path
6181
+ 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"
6182
+ />
6183
+ </svg>
4276
6184
  </span>
4277
6185
  </button>
4278
6186
  </div>
@@ -4292,10 +6200,19 @@ section: components
4292
6200
  <span
4293
6201
  class="pf-v6-c-notification-drawer__list-item-header-icon"
4294
6202
  >
4295
- <i
4296
- class="fas fa-exclamation-triangle"
6203
+ <svg
6204
+ class="pf-v6-svg"
6205
+ viewBox="0 0 32 32"
6206
+ fill="currentColor"
4297
6207
  aria-hidden="true"
4298
- ></i>
6208
+ role="img"
6209
+ width="1em"
6210
+ height="1em"
6211
+ >
6212
+ <path
6213
+ 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"
6214
+ />
6215
+ </svg>
4299
6216
  </span>
4300
6217
  <h2
4301
6218
  class="pf-v6-c-notification-drawer__list-item-header-title"
@@ -4317,7 +6234,19 @@ section: components
4317
6234
  id="drawer-demo-notification-drawer-groups-group4-menu-toggle-5"
4318
6235
  >
4319
6236
  <span class="pf-v6-c-menu-toggle__icon">
4320
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
6237
+ <svg
6238
+ class="pf-v6-svg"
6239
+ viewBox="0 0 32 32"
6240
+ fill="currentColor"
6241
+ aria-hidden="true"
6242
+ role="img"
6243
+ width="1em"
6244
+ height="1em"
6245
+ >
6246
+ <path
6247
+ 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"
6248
+ />
6249
+ </svg>
4321
6250
  </span>
4322
6251
  </button>
4323
6252
  </div>
@@ -4337,7 +6266,19 @@ section: components
4337
6266
  <span
4338
6267
  class="pf-v6-c-notification-drawer__list-item-header-icon"
4339
6268
  >
4340
- <i class="fas fa-check-circle" aria-hidden="true"></i>
6269
+ <svg
6270
+ class="pf-v6-svg"
6271
+ viewBox="0 0 32 32"
6272
+ fill="currentColor"
6273
+ aria-hidden="true"
6274
+ role="img"
6275
+ width="1em"
6276
+ height="1em"
6277
+ >
6278
+ <path
6279
+ 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"
6280
+ />
6281
+ </svg>
4341
6282
  </span>
4342
6283
  <h2
4343
6284
  class="pf-v6-c-notification-drawer__list-item-header-title"
@@ -4359,7 +6300,19 @@ section: components
4359
6300
  id="drawer-demo-notification-drawer-groups-group4-menu-toggle-6"
4360
6301
  >
4361
6302
  <span class="pf-v6-c-menu-toggle__icon">
4362
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
6303
+ <svg
6304
+ class="pf-v6-svg"
6305
+ viewBox="0 0 32 32"
6306
+ fill="currentColor"
6307
+ aria-hidden="true"
6308
+ role="img"
6309
+ width="1em"
6310
+ height="1em"
6311
+ >
6312
+ <path
6313
+ 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"
6314
+ />
6315
+ </svg>
4363
6316
  </span>
4364
6317
  </button>
4365
6318
  </div>
@@ -4379,7 +6332,19 @@ section: components
4379
6332
  <span
4380
6333
  class="pf-v6-c-notification-drawer__list-item-header-icon"
4381
6334
  >
4382
- <i class="fas fa-check-circle" aria-hidden="true"></i>
6335
+ <svg
6336
+ class="pf-v6-svg"
6337
+ viewBox="0 0 32 32"
6338
+ fill="currentColor"
6339
+ aria-hidden="true"
6340
+ role="img"
6341
+ width="1em"
6342
+ height="1em"
6343
+ >
6344
+ <path
6345
+ 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"
6346
+ />
6347
+ </svg>
4383
6348
  </span>
4384
6349
  <h2
4385
6350
  class="pf-v6-c-notification-drawer__list-item-header-title pf-m-truncate"
@@ -4401,7 +6366,19 @@ section: components
4401
6366
  id="drawer-demo-notification-drawer-groups-group4-menu-toggle-7"
4402
6367
  >
4403
6368
  <span class="pf-v6-c-menu-toggle__icon">
4404
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
6369
+ <svg
6370
+ class="pf-v6-svg"
6371
+ viewBox="0 0 32 32"
6372
+ fill="currentColor"
6373
+ aria-hidden="true"
6374
+ role="img"
6375
+ width="1em"
6376
+ height="1em"
6377
+ >
6378
+ <path
6379
+ 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"
6380
+ />
6381
+ </svg>
4405
6382
  </span>
4406
6383
  </button>
4407
6384
  </div>
@@ -4421,7 +6398,19 @@ section: components
4421
6398
  <span
4422
6399
  class="pf-v6-c-notification-drawer__list-item-header-icon"
4423
6400
  >
4424
- <i class="fas fa-check-circle" aria-hidden="true"></i>
6401
+ <svg
6402
+ class="pf-v6-svg"
6403
+ viewBox="0 0 32 32"
6404
+ fill="currentColor"
6405
+ aria-hidden="true"
6406
+ role="img"
6407
+ width="1em"
6408
+ height="1em"
6409
+ >
6410
+ <path
6411
+ 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"
6412
+ />
6413
+ </svg>
4425
6414
  </span>
4426
6415
  <h2
4427
6416
  class="pf-v6-c-notification-drawer__list-item-header-title pf-m-truncate"
@@ -4444,7 +6433,19 @@ section: components
4444
6433
  id="drawer-demo-notification-drawer-groups-group4-menu-toggle-8"
4445
6434
  >
4446
6435
  <span class="pf-v6-c-menu-toggle__icon">
4447
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
6436
+ <svg
6437
+ class="pf-v6-svg"
6438
+ viewBox="0 0 32 32"
6439
+ fill="currentColor"
6440
+ aria-hidden="true"
6441
+ role="img"
6442
+ width="1em"
6443
+ height="1em"
6444
+ >
6445
+ <path
6446
+ 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"
6447
+ />
6448
+ </svg>
4448
6449
  </span>
4449
6450
  </button>
4450
6451
  </div>
@@ -4464,7 +6465,19 @@ section: components
4464
6465
  <span
4465
6466
  class="pf-v6-c-notification-drawer__list-item-header-icon"
4466
6467
  >
4467
- <i class="fas fa-check-circle" aria-hidden="true"></i>
6468
+ <svg
6469
+ class="pf-v6-svg"
6470
+ viewBox="0 0 32 32"
6471
+ fill="currentColor"
6472
+ aria-hidden="true"
6473
+ role="img"
6474
+ width="1em"
6475
+ height="1em"
6476
+ >
6477
+ <path
6478
+ 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"
6479
+ />
6480
+ </svg>
4468
6481
  </span>
4469
6482
  <h2
4470
6483
  class="pf-v6-c-notification-drawer__list-item-header-title"