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

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 (409) 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 +8 -6
  50. package/components/Brand/brand.css +3 -1
  51. package/components/Breadcrumb/breadcrumb.css +10 -5
  52. package/components/Breadcrumb/breadcrumb.scss +6 -2
  53. package/components/Button/button.css +173 -71
  54. package/components/Button/button.scss +188 -72
  55. package/components/CalendarMonth/calendar-month.css +4 -3
  56. package/components/Card/card.css +51 -15
  57. package/components/Card/card.scss +65 -9
  58. package/components/ClipboardCopy/clipboard-copy.css +14 -7
  59. package/components/ClipboardCopy/clipboard-copy.scss +13 -4
  60. package/components/CodeEditor/code-editor.css +2 -2
  61. package/components/CodeEditor/code-editor.scss +2 -2
  62. package/components/Compass/compass.css +399 -0
  63. package/components/Compass/compass.scss +413 -0
  64. package/components/DataList/data-list.css +30 -23
  65. package/components/DataList/data-list.scss +3 -2
  66. package/components/DescriptionList/description-list-order.scss +5 -1
  67. package/components/DescriptionList/description-list.css +7 -5
  68. package/components/DescriptionList/description-list.scss +5 -1
  69. package/components/Divider/divider.css +7 -5
  70. package/components/Drawer/drawer.css +224 -75
  71. package/components/Drawer/drawer.scss +194 -27
  72. package/components/DualListSelector/dual-list-selector.css +18 -12
  73. package/components/DualListSelector/dual-list-selector.scss +1 -1
  74. package/components/ExpandableSection/expandable-section.css +21 -16
  75. package/components/ExpandableSection/expandable-section.scss +6 -3
  76. package/components/Form/form.css +2 -2
  77. package/components/Form/form.scss +2 -2
  78. package/components/FormControl/form-control.css +3 -3
  79. package/components/FormControl/form-control.scss +3 -3
  80. package/components/Hero/hero.css +74 -0
  81. package/components/Hero/hero.scss +86 -0
  82. package/components/JumpLinks/jump-links.css +16 -5
  83. package/components/JumpLinks/jump-links.scss +17 -3
  84. package/components/Label/label-group.css +2 -2
  85. package/components/Label/label-group.scss +2 -2
  86. package/components/Label/label.css +4 -3
  87. package/components/Login/login.css +58 -40
  88. package/components/Login/login.scss +7 -3
  89. package/components/Masthead/masthead.css +111 -16
  90. package/components/Masthead/masthead.scss +111 -1
  91. package/components/Menu/menu.css +49 -33
  92. package/components/Menu/menu.scss +26 -19
  93. package/components/MenuToggle/menu-toggle.css +35 -8
  94. package/components/MenuToggle/menu-toggle.scss +42 -8
  95. package/components/ModalBox/modal-box.css +9 -7
  96. package/components/ModalBox/modal-box.scss +2 -2
  97. package/components/Nav/nav.css +82 -11
  98. package/components/Nav/nav.scss +85 -5
  99. package/components/NotificationDrawer/notification-drawer.css +19 -9
  100. package/components/NotificationDrawer/notification-drawer.scss +14 -5
  101. package/components/OverflowMenu/overflow-menu.css +16 -0
  102. package/components/OverflowMenu/overflow-menu.scss +20 -1
  103. package/components/Page/page.css +421 -32
  104. package/components/Page/page.scss +397 -15
  105. package/components/Pagination/pagination.css +56 -4
  106. package/components/Pagination/pagination.scss +71 -6
  107. package/components/Panel/panel.css +41 -3
  108. package/components/Panel/panel.scss +56 -3
  109. package/components/Progress/progress.css +3 -1
  110. package/components/Progress/progress.scss +3 -1
  111. package/components/ProgressStepper/progress-stepper.scss +5 -1
  112. package/components/Sidebar/sidebar.css +1 -1
  113. package/components/Sidebar/sidebar.scss +7 -3
  114. package/components/Skeleton/skeleton.css +16 -15
  115. package/components/Slider/slider.css +32 -18
  116. package/components/Switch/switch.css +4 -2
  117. package/components/Switch/switch.scss +1 -1
  118. package/components/Table/table-grid.css +28 -36
  119. package/components/Table/table-grid.scss +4 -4
  120. package/components/Table/table-scrollable.css +1 -1
  121. package/components/Table/table-scrollable.scss +1 -1
  122. package/components/Table/table-tree-view.css +4 -2
  123. package/components/Table/table.css +104 -57
  124. package/components/Table/table.scss +92 -37
  125. package/components/Tabs/tabs.css +39 -33
  126. package/components/Tabs/tabs.scss +38 -26
  127. package/components/TextInputGroup/text-input-group.css +2 -2
  128. package/components/TextInputGroup/text-input-group.scss +2 -2
  129. package/components/ToggleGroup/toggle-group.css +44 -19
  130. package/components/ToggleGroup/toggle-group.scss +51 -22
  131. package/components/Toolbar/toolbar.css +195 -16
  132. package/components/Toolbar/toolbar.scss +89 -9
  133. package/components/TreeView/tree-view.css +45 -14
  134. package/components/TreeView/tree-view.scss +32 -1
  135. package/components/Wizard/wizard.css +41 -19
  136. package/components/Wizard/wizard.scss +26 -6
  137. package/components/_index.css +2737 -830
  138. package/components/_index.scss +3 -1
  139. package/docs/components/AboutModalBox/examples/AboutModalBox.md +13 -1
  140. package/docs/components/Accordion/examples/Accordion.md +392 -30
  141. package/docs/components/ActionList/examples/ActionList.md +143 -11
  142. package/docs/components/Alert/examples/Alert.md +678 -54
  143. package/docs/components/Avatar/examples/Avatar.md +4 -4
  144. package/docs/components/BackToTop/examples/BackToTop.md +13 -1
  145. package/docs/components/Banner/examples/Banner.md +65 -5
  146. package/docs/components/Brand/examples/Brand.md +2 -2
  147. package/docs/components/Breadcrumb/examples/Breadcrumb.md +313 -26
  148. package/docs/components/Button/examples/Button.md +2829 -333
  149. package/docs/components/CalendarMonth/examples/CalendarMonth.md +156 -12
  150. package/docs/components/Card/examples/Card.md +335 -12
  151. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +293 -28
  152. package/docs/components/CodeBlock/examples/CodeBlock.md +104 -8
  153. package/docs/components/CodeEditor/examples/CodeEditor.md +234 -18
  154. package/docs/components/Compass/examples/Compass.css +8 -0
  155. package/docs/components/Compass/examples/Compass.md +109 -0
  156. package/docs/components/DataList/examples/DataList.md +468 -78
  157. package/docs/components/DatePicker/examples/DatePicker.md +78 -6
  158. package/docs/components/DescriptionList/examples/DescriptionList.md +327 -27
  159. package/docs/components/Divider/examples/Divider.md +2 -2
  160. package/docs/components/DragDrop/examples/DragDrop.css +1 -1
  161. package/docs/components/Drawer/examples/Drawer.md +415 -35
  162. package/docs/components/DualListSelector/examples/DualListSelector.md +1247 -161
  163. package/docs/components/EmptyState/examples/EmptyState.md +78 -6
  164. package/docs/components/ExpandableSection/examples/ExpandableSection.md +91 -7
  165. package/docs/components/Form/examples/Form.md +78 -6
  166. package/docs/components/Hero/examples/Hero.md +25 -0
  167. package/docs/components/Hint/examples/Hint.md +39 -3
  168. package/docs/components/Icon/examples/Icon.md +105 -9
  169. package/docs/components/InlineEdit/examples/InlineEdit.md +338 -26
  170. package/docs/components/InputGroup/examples/InputGroup.md +40 -4
  171. package/docs/components/JumpLinks/examples/JumpLinks.md +54 -6
  172. package/docs/components/Label/examples/Label.md +2834 -218
  173. package/docs/components/Login/examples/Login.md +39 -3
  174. package/docs/components/Masthead/examples/masthead.md +80 -1
  175. package/docs/components/Menu/examples/Menu.md +1679 -133
  176. package/docs/components/MenuToggle/examples/MenuToggle.md +1514 -118
  177. package/docs/components/ModalBox/examples/ModalBox.md +289 -25
  178. package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +156 -12
  179. package/docs/components/Nav/examples/Navigation.md +898 -62
  180. package/docs/components/NotificationDrawer/examples/NotificationDrawer.md +1079 -83
  181. package/docs/components/OverflowMenu/examples/overflow-menu.css +6 -3
  182. package/docs/components/OverflowMenu/examples/overflow-menu.md +164 -11
  183. package/docs/components/Page/examples/Page.md +211 -25
  184. package/docs/components/Pagination/examples/Pagination.md +1291 -80
  185. package/docs/components/Panel/examples/Panel.css +3 -0
  186. package/docs/components/Panel/examples/Panel.md +71 -4
  187. package/docs/components/Popover/examples/Popover.md +286 -22
  188. package/docs/components/Progress/examples/Progress.md +91 -7
  189. package/docs/components/ProgressStepper/examples/ProgressStepper.md +275 -23
  190. package/docs/components/Sidebar/examples/Sidebar.md +1 -1
  191. package/docs/components/Slider/examples/Slider.md +52 -4
  192. package/docs/components/Table/examples/Table.css +2 -1
  193. package/docs/components/Table/examples/Table.md +7543 -653
  194. package/docs/components/Tabs/examples/Tabs.md +5734 -471
  195. package/docs/components/TextInputGroup/examples/TextInputGroup.md +600 -48
  196. package/docs/components/ToggleGroup/examples/toggle-group.md +261 -15
  197. package/docs/components/Toolbar/examples/Toolbar.css +1 -1
  198. package/docs/components/Toolbar/examples/Toolbar.md +1145 -88
  199. package/docs/components/TreeView/examples/TreeView.md +1390 -130
  200. package/docs/components/Wizard/examples/Wizard.md +828 -73
  201. package/docs/demos/AboutModal/examples/AboutModal.md +158 -53
  202. package/docs/demos/Alert/examples/Alert.md +539 -164
  203. package/docs/demos/BackToTop/examples/BackToTop.md +158 -53
  204. package/docs/demos/Banner/examples/Banner.md +290 -104
  205. package/docs/demos/Button/examples/Button.md +13 -1
  206. package/docs/demos/Card/examples/Card.md +1041 -134
  207. package/docs/demos/CardView/examples/CardView.md +570 -171
  208. package/docs/demos/Compass/examples/Compass.md +10005 -0
  209. package/docs/demos/Dashboard/examples/Dashboard.md +745 -177
  210. package/docs/demos/DataList/examples/DataList.md +1301 -292
  211. package/docs/demos/DescriptionList/examples/DescriptionList.md +472 -160
  212. package/docs/demos/Drawer/examples/Drawer.md +718 -262
  213. package/docs/demos/Form/examples/BasicForms.md +273 -21
  214. package/docs/demos/JumpLinks/examples/JumpLinks.md +862 -319
  215. package/docs/demos/Masthead/examples/Masthead.md +1119 -489
  216. package/docs/demos/Modal/examples/Modal.md +948 -321
  217. package/docs/demos/Nav/examples/Nav.md +3449 -499
  218. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +2418 -405
  219. package/docs/demos/Page/examples/Page.md +2137 -773
  220. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +13 -1
  221. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +52 -4
  222. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +1913 -504
  223. package/docs/demos/Skeleton/examples/Skeleton.md +145 -52
  224. package/docs/demos/Table/examples/Table.md +11807 -2275
  225. package/docs/demos/Tabs/examples/Tabs.md +1117 -337
  226. package/docs/demos/Toolbar/examples/Toolbar.md +1818 -286
  227. package/docs/demos/Wizard/examples/Wizard.md +1705 -526
  228. package/docs/layouts/Bullseye/examples/Bullseye.css +2 -2
  229. package/docs/layouts/Bullseye/examples/Bullseye.md +2 -1
  230. package/docs/layouts/Flex/examples/Flex.css +3 -3
  231. package/docs/layouts/Flex/examples/Flex.md +3 -2
  232. package/docs/layouts/Gallery/examples/Gallery.css +2 -2
  233. package/docs/layouts/Gallery/examples/Gallery.md +4 -3
  234. package/docs/layouts/Grid/examples/Grid.css +1 -1
  235. package/docs/layouts/Grid/examples/Grid.md +6 -5
  236. package/docs/layouts/Level/examples/Level.css +3 -3
  237. package/docs/layouts/Level/examples/Level.md +2 -1
  238. package/docs/layouts/Split/examples/Split.css +1 -1
  239. package/docs/layouts/Split/examples/Split.md +2 -1
  240. package/docs/layouts/Stack/examples/Stack.css +3 -3
  241. package/docs/layouts/Stack/examples/Stack.md +2 -1
  242. package/docs/utilities/Accessibility/examples/Accessibility.md +3 -2
  243. package/docs/utilities/Alignment/examples/Alignment.css +4 -4
  244. package/docs/utilities/Alignment/examples/Alignment.md +3 -2
  245. package/docs/utilities/BackgroundColor/examples/BackgroundColor.md +5 -4
  246. package/docs/utilities/BoxShadow/examples/box-shadow.css +2 -2
  247. package/docs/utilities/BoxShadow/examples/box-shadow.md +2 -1
  248. package/docs/utilities/Display/examples/Display.css +1 -1
  249. package/docs/utilities/Display/examples/Display.md +3 -2
  250. package/docs/utilities/Flex/examples/Flex.css +7 -7
  251. package/docs/utilities/Flex/examples/Flex.md +3 -2
  252. package/docs/utilities/Float/examples/Float.css +2 -2
  253. package/docs/utilities/Float/examples/Float.md +3 -2
  254. package/docs/utilities/Sizing/examples/Sizing.md +8 -7
  255. package/docs/utilities/Spacing/examples/Spacing.css +2 -2
  256. package/docs/utilities/Spacing/examples/Spacing.md +3 -2
  257. package/docs/utilities/Text/examples/Text.md +5 -4
  258. package/icons/PfIcons/add-circle-o.svg +4 -0
  259. package/icons/PfIcons/ansible-tower.svg +4 -0
  260. package/icons/PfIcons/applications.svg +4 -0
  261. package/icons/PfIcons/arrow.svg +4 -0
  262. package/icons/PfIcons/asleep.svg +4 -0
  263. package/icons/PfIcons/attention-bell.svg +4 -0
  264. package/icons/PfIcons/automation.svg +4 -0
  265. package/icons/PfIcons/bell.svg +4 -0
  266. package/icons/PfIcons/blueprint.svg +4 -0
  267. package/icons/PfIcons/build.svg +4 -0
  268. package/icons/PfIcons/builder-image.svg +4 -0
  269. package/icons/PfIcons/bundle.svg +4 -0
  270. package/icons/PfIcons/catalog.svg +4 -0
  271. package/icons/PfIcons/chat.svg +4 -0
  272. package/icons/PfIcons/close.svg +4 -0
  273. package/icons/PfIcons/cloud-security.svg +4 -0
  274. package/icons/PfIcons/cloud-tenant.svg +4 -0
  275. package/icons/PfIcons/cluster.svg +4 -0
  276. package/icons/PfIcons/connected.svg +4 -0
  277. package/icons/PfIcons/container-node.svg +4 -0
  278. package/icons/PfIcons/cpu.svg +4 -0
  279. package/icons/PfIcons/critical-risk.svg +4 -0
  280. package/icons/PfIcons/data-processor.svg +4 -0
  281. package/icons/PfIcons/data-sink.svg +4 -0
  282. package/icons/PfIcons/data-source.svg +4 -0
  283. package/icons/PfIcons/degraded.svg +4 -0
  284. package/icons/PfIcons/disconnected.svg +4 -0
  285. package/icons/PfIcons/domain.svg +4 -0
  286. package/icons/PfIcons/edit.svg +4 -0
  287. package/icons/PfIcons/enhancement.svg +4 -0
  288. package/icons/PfIcons/enterprise.svg +4 -0
  289. package/icons/PfIcons/equalizer.svg +4 -0
  290. package/icons/PfIcons/error-circle-o.svg +4 -0
  291. package/icons/PfIcons/export.svg +4 -0
  292. package/icons/PfIcons/filter.svg +4 -0
  293. package/icons/PfIcons/flavor.svg +4 -0
  294. package/icons/PfIcons/folder-close.svg +4 -0
  295. package/icons/PfIcons/folder-open.svg +4 -0
  296. package/icons/PfIcons/globe-route.svg +4 -0
  297. package/icons/PfIcons/help.svg +4 -0
  298. package/icons/PfIcons/history.svg +4 -0
  299. package/icons/PfIcons/home.svg +4 -0
  300. package/icons/PfIcons/import.svg +4 -0
  301. package/icons/PfIcons/in-progress.svg +4 -0
  302. package/icons/PfIcons/info.svg +4 -0
  303. package/icons/PfIcons/infrastructure.svg +4 -0
  304. package/icons/PfIcons/integration.svg +4 -0
  305. package/icons/PfIcons/key.svg +4 -0
  306. package/icons/PfIcons/locked.svg +4 -0
  307. package/icons/PfIcons/maintenance.svg +4 -0
  308. package/icons/PfIcons/memory.svg +4 -0
  309. package/icons/PfIcons/messages.svg +4 -0
  310. package/icons/PfIcons/middleware.svg +4 -0
  311. package/icons/PfIcons/migration.svg +4 -0
  312. package/icons/PfIcons/module.svg +4 -0
  313. package/icons/PfIcons/monitoring.svg +4 -0
  314. package/icons/PfIcons/multicluster.svg +4 -0
  315. package/icons/PfIcons/namespaces.svg +4 -0
  316. package/icons/PfIcons/network.svg +4 -0
  317. package/icons/PfIcons/new-process.svg +4 -0
  318. package/icons/PfIcons/not-started.svg +4 -0
  319. package/icons/PfIcons/off.svg +4 -0
  320. package/icons/PfIcons/ok.svg +4 -0
  321. package/icons/PfIcons/on-running.svg +4 -0
  322. package/icons/PfIcons/on.svg +4 -0
  323. package/icons/PfIcons/open-drawer-right.svg +4 -0
  324. package/icons/PfIcons/openshift.svg +4 -0
  325. package/icons/PfIcons/openstack.svg +4 -0
  326. package/icons/PfIcons/optimize.svg +4 -0
  327. package/icons/PfIcons/orders.svg +4 -0
  328. package/icons/PfIcons/os-image.svg +4 -0
  329. package/icons/PfIcons/package.svg +4 -0
  330. package/icons/PfIcons/panel-close.svg +4 -0
  331. package/icons/PfIcons/panel-open.svg +4 -0
  332. package/icons/PfIcons/paused.svg +4 -0
  333. package/icons/PfIcons/pending.svg +4 -0
  334. package/icons/PfIcons/pficon-dragdrop.svg +4 -0
  335. package/icons/PfIcons/pficon-history.svg +4 -0
  336. package/icons/PfIcons/pficon-network-range.svg +4 -0
  337. package/icons/PfIcons/pficon-satellite.svg +4 -0
  338. package/icons/PfIcons/pficon-sort-common-asc.svg +4 -0
  339. package/icons/PfIcons/pficon-sort-common-desc.svg +4 -0
  340. package/icons/PfIcons/pficon-template.svg +4 -0
  341. package/icons/PfIcons/pficon-vcenter.svg +4 -0
  342. package/icons/PfIcons/plugged.svg +4 -0
  343. package/icons/PfIcons/port.svg +4 -0
  344. package/icons/PfIcons/print.svg +4 -0
  345. package/icons/PfIcons/private.svg +4 -0
  346. package/icons/PfIcons/process-automation.svg +4 -0
  347. package/icons/PfIcons/project.svg +4 -0
  348. package/icons/PfIcons/rebalance.svg +4 -0
  349. package/icons/PfIcons/rebooting.svg +4 -0
  350. package/icons/PfIcons/regions.svg +4 -0
  351. package/icons/PfIcons/registry.svg +4 -0
  352. package/icons/PfIcons/remove2.svg +4 -0
  353. package/icons/PfIcons/replicator.svg +4 -0
  354. package/icons/PfIcons/repository.svg +4 -0
  355. package/icons/PfIcons/resource-pool.svg +4 -0
  356. package/icons/PfIcons/resources-almost-empty.svg +4 -0
  357. package/icons/PfIcons/resources-almost-full.svg +4 -0
  358. package/icons/PfIcons/resources-empty.svg +4 -0
  359. package/icons/PfIcons/resources-full.svg +4 -0
  360. package/icons/PfIcons/running.svg +4 -0
  361. package/icons/PfIcons/save.svg +4 -0
  362. package/icons/PfIcons/screen.svg +4 -0
  363. package/icons/PfIcons/security.svg +4 -0
  364. package/icons/PfIcons/server-group.svg +4 -0
  365. package/icons/PfIcons/server.svg +4 -0
  366. package/icons/PfIcons/service-catalog.svg +4 -0
  367. package/icons/PfIcons/service.svg +4 -0
  368. package/icons/PfIcons/services.svg +4 -0
  369. package/icons/PfIcons/severity-critical.svg +4 -0
  370. package/icons/PfIcons/severity-important.svg +4 -0
  371. package/icons/PfIcons/severity-minor.svg +4 -0
  372. package/icons/PfIcons/severity-moderate.svg +4 -0
  373. package/icons/PfIcons/severity-none.svg +4 -0
  374. package/icons/PfIcons/severity-undefined.svg +4 -0
  375. package/icons/PfIcons/spinner.svg +4 -0
  376. package/icons/PfIcons/spinner2.svg +4 -0
  377. package/icons/PfIcons/storage-domain.svg +4 -0
  378. package/icons/PfIcons/task.svg +4 -0
  379. package/icons/PfIcons/tenant.svg +4 -0
  380. package/icons/PfIcons/thumb-tack.svg +4 -0
  381. package/icons/PfIcons/topology.svg +4 -0
  382. package/icons/PfIcons/treeview.svg +4 -0
  383. package/icons/PfIcons/trend-down.svg +4 -0
  384. package/icons/PfIcons/trend-up.svg +4 -0
  385. package/icons/PfIcons/unknown.svg +4 -0
  386. package/icons/PfIcons/unlocked.svg +4 -0
  387. package/icons/PfIcons/unplugged.svg +4 -0
  388. package/icons/PfIcons/user.svg +4 -0
  389. package/icons/PfIcons/users.svg +4 -0
  390. package/icons/PfIcons/virtual-machine.svg +4 -0
  391. package/icons/PfIcons/volume.svg +4 -0
  392. package/icons/PfIcons/warning-triangle.svg +4 -0
  393. package/icons/PfIcons/zone.svg +4 -0
  394. package/layouts/Flex/flex.scss +83 -19
  395. package/layouts/Gallery/gallery.css +6 -2
  396. package/layouts/_index.css +6 -2
  397. package/package.json +55 -17
  398. package/patternfly-base-no-globals.css +969 -489
  399. package/patternfly-base.css +976 -489
  400. package/patternfly-charts.css +3 -3
  401. package/patternfly-no-globals.css +3619 -1194
  402. package/patternfly.css +3626 -1194
  403. package/patternfly.min.css +1 -1
  404. package/patternfly.min.css.map +1 -1
  405. package/patternfly.scss +48 -0
  406. package/sass-utilities/functions.scss +32 -25
  407. package/sass-utilities/mixins.scss +54 -23
  408. package/sass-utilities/namespaces-components.scss +6 -0
  409. package/sass-utilities/scss-variables.scss +3 -0
package/docs/components/NotificationDrawer/examples/NotificationDrawer.md CHANGED
@@ -20,7 +20,19 @@ cssPrefix: pf-v6-c-notification-drawer
20
20
  id="notification-drawer-basic-example-menu-toggle"
21
21
  >
22
22
  <span class="pf-v6-c-menu-toggle__icon">
23
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
23
+ <svg
24
+ class="pf-v6-svg"
25
+ viewBox="0 0 32 32"
26
+ fill="currentColor"
27
+ aria-hidden="true"
28
+ role="img"
29
+ width="1em"
30
+ height="1em"
31
+ >
32
+ <path
33
+ 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"
34
+ />
35
+ </svg>
24
36
  </span>
25
37
  </button>
26
38
  <div class="pf-v6-c-notification-drawer__header-action-close">
@@ -30,7 +42,19 @@ cssPrefix: pf-v6-c-notification-drawer
30
42
  aria-label="Close"
31
43
  >
32
44
  <span class="pf-v6-c-button__icon">
33
- <i class="fas fa-times" aria-hidden="true"></i>
45
+ <svg
46
+ class="pf-v6-svg"
47
+ viewBox="0 0 20 20"
48
+ fill="currentColor"
49
+ aria-hidden="true"
50
+ role="img"
51
+ width="1em"
52
+ height="1em"
53
+ >
54
+ <path
55
+ d="M17.8 16.2 11.59 10l6.21-6.21c.42-.46.39-1.17-.07-1.59-.43-.4-1.09-.4-1.52 0l-6.2 6.2-6.22-6.19c-.44-.44-1.15-.44-1.59 0-.44.44-.44 1.15 0 1.59l6.2 6.21-6.2 6.2c-.42.46-.39 1.17.07 1.59.43.4 1.09.4 1.52 0L10 11.59l6.2 6.2c.44.44 1.15.44 1.59 0 .44-.45.44-1.16 0-1.6Z"
56
+ />
57
+ </svg>
34
58
  </span>
35
59
  </button>
36
60
  </div>
@@ -44,7 +68,19 @@ cssPrefix: pf-v6-c-notification-drawer
44
68
  >
45
69
  <div class="pf-v6-c-notification-drawer__list-item-header">
46
70
  <span class="pf-v6-c-notification-drawer__list-item-header-icon">
47
- <i class="fas fa-info-circle" aria-hidden="true"></i>
71
+ <svg
72
+ class="pf-v6-svg"
73
+ viewBox="0 0 32 32"
74
+ fill="currentColor"
75
+ aria-hidden="true"
76
+ role="img"
77
+ width="1em"
78
+ height="1em"
79
+ >
80
+ <path
81
+ 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"
82
+ />
83
+ </svg>
48
84
  </span>
49
85
  <h2 class="pf-v6-c-notification-drawer__list-item-header-title">
50
86
  <span class="pf-v6-screen-reader">Info notification:</span>
@@ -61,7 +97,19 @@ cssPrefix: pf-v6-c-notification-drawer
61
97
  id="notification-drawer-basic-example-menu-toggle-1"
62
98
  >
63
99
  <span class="pf-v6-c-menu-toggle__icon">
64
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
100
+ <svg
101
+ class="pf-v6-svg"
102
+ viewBox="0 0 32 32"
103
+ fill="currentColor"
104
+ aria-hidden="true"
105
+ role="img"
106
+ width="1em"
107
+ height="1em"
108
+ >
109
+ <path
110
+ 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"
111
+ />
112
+ </svg>
65
113
  </span>
66
114
  </button>
67
115
  </div>
@@ -79,7 +127,19 @@ cssPrefix: pf-v6-c-notification-drawer
79
127
  >
80
128
  <div class="pf-v6-c-notification-drawer__list-item-header">
81
129
  <span class="pf-v6-c-notification-drawer__list-item-header-icon">
82
- <i class="fas fa-arrow-circle-up" aria-hidden="true"></i>
130
+ <svg
131
+ class="pf-v6-svg"
132
+ viewBox="0 0 32 32"
133
+ fill="currentColor"
134
+ aria-hidden="true"
135
+ role="img"
136
+ width="1em"
137
+ height="1em"
138
+ >
139
+ <path
140
+ 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"
141
+ />
142
+ </svg>
83
143
  </span>
84
144
  <h2 class="pf-v6-c-notification-drawer__list-item-header-title">
85
145
  <span class="pf-v6-screen-reader">Custom notification:</span>
@@ -96,7 +156,19 @@ cssPrefix: pf-v6-c-notification-drawer
96
156
  id="notification-drawer-basic-example-menu-toggle-3"
97
157
  >
98
158
  <span class="pf-v6-c-menu-toggle__icon">
99
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
159
+ <svg
160
+ class="pf-v6-svg"
161
+ viewBox="0 0 32 32"
162
+ fill="currentColor"
163
+ aria-hidden="true"
164
+ role="img"
165
+ width="1em"
166
+ height="1em"
167
+ >
168
+ <path
169
+ 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"
170
+ />
171
+ </svg>
100
172
  </span>
101
173
  </button>
102
174
  </div>
@@ -114,7 +186,19 @@ cssPrefix: pf-v6-c-notification-drawer
114
186
  >
115
187
  <div class="pf-v6-c-notification-drawer__list-item-header">
116
188
  <span class="pf-v6-c-notification-drawer__list-item-header-icon">
117
- <i class="fas fa-arrow-circle-up" aria-hidden="true"></i>
189
+ <svg
190
+ class="pf-v6-svg"
191
+ viewBox="0 0 32 32"
192
+ fill="currentColor"
193
+ aria-hidden="true"
194
+ role="img"
195
+ width="1em"
196
+ height="1em"
197
+ >
198
+ <path
199
+ 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"
200
+ />
201
+ </svg>
118
202
  </span>
119
203
  <h2 class="pf-v6-c-notification-drawer__list-item-header-title">
120
204
  <span class="pf-v6-screen-reader">Custom notification:</span>
@@ -131,7 +215,19 @@ cssPrefix: pf-v6-c-notification-drawer
131
215
  id="notification-drawer-basic-example-menu-toggle-4"
132
216
  >
133
217
  <span class="pf-v6-c-menu-toggle__icon">
134
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
218
+ <svg
219
+ class="pf-v6-svg"
220
+ viewBox="0 0 32 32"
221
+ fill="currentColor"
222
+ aria-hidden="true"
223
+ role="img"
224
+ width="1em"
225
+ height="1em"
226
+ >
227
+ <path
228
+ 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"
229
+ />
230
+ </svg>
135
231
  </span>
136
232
  </button>
137
233
  </div>
@@ -147,7 +243,19 @@ cssPrefix: pf-v6-c-notification-drawer
147
243
  >
148
244
  <div class="pf-v6-c-notification-drawer__list-item-header">
149
245
  <span class="pf-v6-c-notification-drawer__list-item-header-icon">
150
- <i class="fas fa-exclamation-triangle" aria-hidden="true"></i>
246
+ <svg
247
+ class="pf-v6-svg"
248
+ viewBox="0 0 32 32"
249
+ fill="currentColor"
250
+ aria-hidden="true"
251
+ role="img"
252
+ width="1em"
253
+ height="1em"
254
+ >
255
+ <path
256
+ 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"
257
+ />
258
+ </svg>
151
259
  </span>
152
260
  <h2 class="pf-v6-c-notification-drawer__list-item-header-title">
153
261
  <span class="pf-v6-screen-reader">Warning notification:</span>
@@ -163,7 +271,19 @@ cssPrefix: pf-v6-c-notification-drawer
163
271
  id="notification-drawer-basic-example-menu-toggle-5"
164
272
  >
165
273
  <span class="pf-v6-c-menu-toggle__icon">
166
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
274
+ <svg
275
+ class="pf-v6-svg"
276
+ viewBox="0 0 32 32"
277
+ fill="currentColor"
278
+ aria-hidden="true"
279
+ role="img"
280
+ width="1em"
281
+ height="1em"
282
+ >
283
+ <path
284
+ 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"
285
+ />
286
+ </svg>
167
287
  </span>
168
288
  </button>
169
289
  </div>
@@ -179,7 +299,19 @@ cssPrefix: pf-v6-c-notification-drawer
179
299
  >
180
300
  <div class="pf-v6-c-notification-drawer__list-item-header">
181
301
  <span class="pf-v6-c-notification-drawer__list-item-header-icon">
182
- <i class="fas fa-check-circle" aria-hidden="true"></i>
302
+ <svg
303
+ class="pf-v6-svg"
304
+ viewBox="0 0 32 32"
305
+ fill="currentColor"
306
+ aria-hidden="true"
307
+ role="img"
308
+ width="1em"
309
+ height="1em"
310
+ >
311
+ <path
312
+ 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"
313
+ />
314
+ </svg>
183
315
  </span>
184
316
  <h2 class="pf-v6-c-notification-drawer__list-item-header-title">
185
317
  <span class="pf-v6-screen-reader">Success notification:</span>
@@ -195,7 +327,19 @@ cssPrefix: pf-v6-c-notification-drawer
195
327
  id="notification-drawer-basic-example-menu-toggle-6"
196
328
  >
197
329
  <span class="pf-v6-c-menu-toggle__icon">
198
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
330
+ <svg
331
+ class="pf-v6-svg"
332
+ viewBox="0 0 32 32"
333
+ fill="currentColor"
334
+ aria-hidden="true"
335
+ role="img"
336
+ width="1em"
337
+ height="1em"
338
+ >
339
+ <path
340
+ 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"
341
+ />
342
+ </svg>
199
343
  </span>
200
344
  </button>
201
345
  </div>
@@ -211,7 +355,19 @@ cssPrefix: pf-v6-c-notification-drawer
211
355
  >
212
356
  <div class="pf-v6-c-notification-drawer__list-item-header">
213
357
  <span class="pf-v6-c-notification-drawer__list-item-header-icon">
214
- <i class="fas fa-check-circle" aria-hidden="true"></i>
358
+ <svg
359
+ class="pf-v6-svg"
360
+ viewBox="0 0 32 32"
361
+ fill="currentColor"
362
+ aria-hidden="true"
363
+ role="img"
364
+ width="1em"
365
+ height="1em"
366
+ >
367
+ <path
368
+ 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"
369
+ />
370
+ </svg>
215
371
  </span>
216
372
  <h2
217
373
  class="pf-v6-c-notification-drawer__list-item-header-title pf-m-truncate"
@@ -229,7 +385,19 @@ cssPrefix: pf-v6-c-notification-drawer
229
385
  id="notification-drawer-basic-example-menu-toggle-7"
230
386
  >
231
387
  <span class="pf-v6-c-menu-toggle__icon">
232
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
388
+ <svg
389
+ class="pf-v6-svg"
390
+ viewBox="0 0 32 32"
391
+ fill="currentColor"
392
+ aria-hidden="true"
393
+ role="img"
394
+ width="1em"
395
+ height="1em"
396
+ >
397
+ <path
398
+ 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"
399
+ />
400
+ </svg>
233
401
  </span>
234
402
  </button>
235
403
  </div>
@@ -245,7 +413,19 @@ cssPrefix: pf-v6-c-notification-drawer
245
413
  >
246
414
  <div class="pf-v6-c-notification-drawer__list-item-header">
247
415
  <span class="pf-v6-c-notification-drawer__list-item-header-icon">
248
- <i class="fas fa-check-circle" aria-hidden="true"></i>
416
+ <svg
417
+ class="pf-v6-svg"
418
+ viewBox="0 0 32 32"
419
+ fill="currentColor"
420
+ aria-hidden="true"
421
+ role="img"
422
+ width="1em"
423
+ height="1em"
424
+ >
425
+ <path
426
+ 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"
427
+ />
428
+ </svg>
249
429
  </span>
250
430
  <h2
251
431
  class="pf-v6-c-notification-drawer__list-item-header-title pf-m-truncate"
@@ -264,7 +444,19 @@ cssPrefix: pf-v6-c-notification-drawer
264
444
  id="notification-drawer-basic-example-menu-toggle-8"
265
445
  >
266
446
  <span class="pf-v6-c-menu-toggle__icon">
267
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
447
+ <svg
448
+ class="pf-v6-svg"
449
+ viewBox="0 0 32 32"
450
+ fill="currentColor"
451
+ aria-hidden="true"
452
+ role="img"
453
+ width="1em"
454
+ height="1em"
455
+ >
456
+ <path
457
+ 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"
458
+ />
459
+ </svg>
268
460
  </span>
269
461
  </button>
270
462
  </div>
@@ -278,7 +470,19 @@ cssPrefix: pf-v6-c-notification-drawer
278
470
  <li class="pf-v6-c-notification-drawer__list-item pf-m-read pf-m-success">
279
471
  <div class="pf-v6-c-notification-drawer__list-item-header">
280
472
  <span class="pf-v6-c-notification-drawer__list-item-header-icon">
281
- <i class="fas fa-check-circle" aria-hidden="true"></i>
473
+ <svg
474
+ class="pf-v6-svg"
475
+ viewBox="0 0 32 32"
476
+ fill="currentColor"
477
+ aria-hidden="true"
478
+ role="img"
479
+ width="1em"
480
+ height="1em"
481
+ >
482
+ <path
483
+ 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"
484
+ />
485
+ </svg>
282
486
  </span>
283
487
  <h2 class="pf-v6-c-notification-drawer__list-item-header-title">
284
488
  <span class="pf-v6-screen-reader">Success notification:</span>
@@ -321,7 +525,19 @@ cssPrefix: pf-v6-c-notification-drawer
321
525
  id="notification-drawer-groups-example-menu-toggle"
322
526
  >
323
527
  <span class="pf-v6-c-menu-toggle__icon">
324
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
528
+ <svg
529
+ class="pf-v6-svg"
530
+ viewBox="0 0 32 32"
531
+ fill="currentColor"
532
+ aria-hidden="true"
533
+ role="img"
534
+ width="1em"
535
+ height="1em"
536
+ >
537
+ <path
538
+ 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"
539
+ />
540
+ </svg>
325
541
  </span>
326
542
  </button>
327
543
  <div class="pf-v6-c-notification-drawer__header-action-close">
@@ -331,7 +547,19 @@ cssPrefix: pf-v6-c-notification-drawer
331
547
  aria-label="Close"
332
548
  >
333
549
  <span class="pf-v6-c-button__icon">
334
- <i class="fas fa-times" aria-hidden="true"></i>
550
+ <svg
551
+ class="pf-v6-svg"
552
+ viewBox="0 0 20 20"
553
+ fill="currentColor"
554
+ aria-hidden="true"
555
+ role="img"
556
+ width="1em"
557
+ height="1em"
558
+ >
559
+ <path
560
+ d="M17.8 16.2 11.59 10l6.21-6.21c.42-.46.39-1.17-.07-1.59-.43-.4-1.09-.4-1.52 0l-6.2 6.2-6.22-6.19c-.44-.44-1.15-.44-1.59 0-.44.44-.44 1.15 0 1.59l6.2 6.21-6.2 6.2c-.42.46-.39 1.17.07 1.59.43.4 1.09.4 1.52 0L10 11.59l6.2 6.2c.44.44 1.15.44 1.59 0 .44-.45.44-1.16 0-1.6Z"
561
+ />
562
+ </svg>
335
563
  </span>
336
564
  </button>
337
565
  </div>
@@ -352,7 +580,19 @@ cssPrefix: pf-v6-c-notification-drawer
352
580
  <span class="pf-v6-c-badge pf-m-unread">2</span>
353
581
  </div>
354
582
  <span class="pf-v6-c-notification-drawer__group-toggle-icon">
355
- <i class="fas fa-angle-right" aria-hidden="true"></i>
583
+ <svg
584
+ class="pf-v6-svg"
585
+ viewBox="0 0 20 20"
586
+ fill="currentColor"
587
+ aria-hidden="true"
588
+ role="img"
589
+ width="1em"
590
+ height="1em"
591
+ >
592
+ <path
593
+ 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"
594
+ />
595
+ </svg>
356
596
  </span>
357
597
  </button>
358
598
  </h1>
@@ -363,7 +603,19 @@ cssPrefix: pf-v6-c-notification-drawer
363
603
  >
364
604
  <div class="pf-v6-c-notification-drawer__list-item-header">
365
605
  <span class="pf-v6-c-notification-drawer__list-item-header-icon">
366
- <i class="fas fa-info-circle" aria-hidden="true"></i>
606
+ <svg
607
+ class="pf-v6-svg"
608
+ viewBox="0 0 32 32"
609
+ fill="currentColor"
610
+ aria-hidden="true"
611
+ role="img"
612
+ width="1em"
613
+ height="1em"
614
+ >
615
+ <path
616
+ 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"
617
+ />
618
+ </svg>
367
619
  </span>
368
620
  <h2 class="pf-v6-c-notification-drawer__list-item-header-title">
369
621
  <span class="pf-v6-screen-reader">Info notification:</span>
@@ -380,7 +632,19 @@ cssPrefix: pf-v6-c-notification-drawer
380
632
  id="notification-drawer-groups-example-group1-menu-toggle-1"
381
633
  >
382
634
  <span class="pf-v6-c-menu-toggle__icon">
383
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
635
+ <svg
636
+ class="pf-v6-svg"
637
+ viewBox="0 0 32 32"
638
+ fill="currentColor"
639
+ aria-hidden="true"
640
+ role="img"
641
+ width="1em"
642
+ height="1em"
643
+ >
644
+ <path
645
+ 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"
646
+ />
647
+ </svg>
384
648
  </span>
385
649
  </button>
386
650
  </div>
@@ -398,7 +662,19 @@ cssPrefix: pf-v6-c-notification-drawer
398
662
  >
399
663
  <div class="pf-v6-c-notification-drawer__list-item-header">
400
664
  <span class="pf-v6-c-notification-drawer__list-item-header-icon">
401
- <i class="fas fa-arrow-circle-up" aria-hidden="true"></i>
665
+ <svg
666
+ class="pf-v6-svg"
667
+ viewBox="0 0 32 32"
668
+ fill="currentColor"
669
+ aria-hidden="true"
670
+ role="img"
671
+ width="1em"
672
+ height="1em"
673
+ >
674
+ <path
675
+ 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"
676
+ />
677
+ </svg>
402
678
  </span>
403
679
  <h2 class="pf-v6-c-notification-drawer__list-item-header-title">
404
680
  <span class="pf-v6-screen-reader">Custom notification:</span>
@@ -415,7 +691,19 @@ cssPrefix: pf-v6-c-notification-drawer
415
691
  id="notification-drawer-groups-example-group1-menu-toggle-3"
416
692
  >
417
693
  <span class="pf-v6-c-menu-toggle__icon">
418
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
694
+ <svg
695
+ class="pf-v6-svg"
696
+ viewBox="0 0 32 32"
697
+ fill="currentColor"
698
+ aria-hidden="true"
699
+ role="img"
700
+ width="1em"
701
+ height="1em"
702
+ >
703
+ <path
704
+ d="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"
705
+ />
706
+ </svg>
419
707
  </span>
420
708
  </button>
421
709
  </div>
@@ -433,7 +721,19 @@ cssPrefix: pf-v6-c-notification-drawer
433
721
  >
434
722
  <div class="pf-v6-c-notification-drawer__list-item-header">
435
723
  <span class="pf-v6-c-notification-drawer__list-item-header-icon">
436
- <i class="fas fa-arrow-circle-up" aria-hidden="true"></i>
724
+ <svg
725
+ class="pf-v6-svg"
726
+ viewBox="0 0 32 32"
727
+ fill="currentColor"
728
+ aria-hidden="true"
729
+ role="img"
730
+ width="1em"
731
+ height="1em"
732
+ >
733
+ <path
734
+ 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"
735
+ />
736
+ </svg>
437
737
  </span>
438
738
  <h2 class="pf-v6-c-notification-drawer__list-item-header-title">
439
739
  <span class="pf-v6-screen-reader">Custom notification:</span>
@@ -450,7 +750,19 @@ cssPrefix: pf-v6-c-notification-drawer
450
750
  id="notification-drawer-groups-example-group1-menu-toggle-4"
451
751
  >
452
752
  <span class="pf-v6-c-menu-toggle__icon">
453
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
753
+ <svg
754
+ class="pf-v6-svg"
755
+ viewBox="0 0 32 32"
756
+ fill="currentColor"
757
+ aria-hidden="true"
758
+ role="img"
759
+ width="1em"
760
+ height="1em"
761
+ >
762
+ <path
763
+ d="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"
764
+ />
765
+ </svg>
454
766
  </span>
455
767
  </button>
456
768
  </div>
@@ -466,7 +778,19 @@ cssPrefix: pf-v6-c-notification-drawer
466
778
  >
467
779
  <div class="pf-v6-c-notification-drawer__list-item-header">
468
780
  <span class="pf-v6-c-notification-drawer__list-item-header-icon">
469
- <i class="fas fa-exclamation-triangle" aria-hidden="true"></i>
781
+ <svg
782
+ class="pf-v6-svg"
783
+ viewBox="0 0 32 32"
784
+ fill="currentColor"
785
+ aria-hidden="true"
786
+ role="img"
787
+ width="1em"
788
+ height="1em"
789
+ >
790
+ <path
791
+ 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"
792
+ />
793
+ </svg>
470
794
  </span>
471
795
  <h2 class="pf-v6-c-notification-drawer__list-item-header-title">
472
796
  <span class="pf-v6-screen-reader">Warning notification:</span>
@@ -482,7 +806,19 @@ cssPrefix: pf-v6-c-notification-drawer
482
806
  id="notification-drawer-groups-example-group1-menu-toggle-5"
483
807
  >
484
808
  <span class="pf-v6-c-menu-toggle__icon">
485
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
809
+ <svg
810
+ class="pf-v6-svg"
811
+ viewBox="0 0 32 32"
812
+ fill="currentColor"
813
+ aria-hidden="true"
814
+ role="img"
815
+ width="1em"
816
+ height="1em"
817
+ >
818
+ <path
819
+ 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"
820
+ />
821
+ </svg>
486
822
  </span>
487
823
  </button>
488
824
  </div>
@@ -498,7 +834,19 @@ cssPrefix: pf-v6-c-notification-drawer
498
834
  >
499
835
  <div class="pf-v6-c-notification-drawer__list-item-header">
500
836
  <span class="pf-v6-c-notification-drawer__list-item-header-icon">
501
- <i class="fas fa-check-circle" aria-hidden="true"></i>
837
+ <svg
838
+ class="pf-v6-svg"
839
+ viewBox="0 0 32 32"
840
+ fill="currentColor"
841
+ aria-hidden="true"
842
+ role="img"
843
+ width="1em"
844
+ height="1em"
845
+ >
846
+ <path
847
+ 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"
848
+ />
849
+ </svg>
502
850
  </span>
503
851
  <h2 class="pf-v6-c-notification-drawer__list-item-header-title">
504
852
  <span class="pf-v6-screen-reader">Success notification:</span>
@@ -514,7 +862,19 @@ cssPrefix: pf-v6-c-notification-drawer
514
862
  id="notification-drawer-groups-example-group1-menu-toggle-6"
515
863
  >
516
864
  <span class="pf-v6-c-menu-toggle__icon">
517
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
865
+ <svg
866
+ class="pf-v6-svg"
867
+ viewBox="0 0 32 32"
868
+ fill="currentColor"
869
+ aria-hidden="true"
870
+ role="img"
871
+ width="1em"
872
+ height="1em"
873
+ >
874
+ <path
875
+ 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"
876
+ />
877
+ </svg>
518
878
  </span>
519
879
  </button>
520
880
  </div>
@@ -530,7 +890,19 @@ cssPrefix: pf-v6-c-notification-drawer
530
890
  >
531
891
  <div class="pf-v6-c-notification-drawer__list-item-header">
532
892
  <span class="pf-v6-c-notification-drawer__list-item-header-icon">
533
- <i class="fas fa-check-circle" aria-hidden="true"></i>
893
+ <svg
894
+ class="pf-v6-svg"
895
+ viewBox="0 0 32 32"
896
+ fill="currentColor"
897
+ aria-hidden="true"
898
+ role="img"
899
+ width="1em"
900
+ height="1em"
901
+ >
902
+ <path
903
+ 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"
904
+ />
905
+ </svg>
534
906
  </span>
535
907
  <h2
536
908
  class="pf-v6-c-notification-drawer__list-item-header-title pf-m-truncate"
@@ -548,7 +920,19 @@ cssPrefix: pf-v6-c-notification-drawer
548
920
  id="notification-drawer-groups-example-group1-menu-toggle-7"
549
921
  >
550
922
  <span class="pf-v6-c-menu-toggle__icon">
551
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
923
+ <svg
924
+ class="pf-v6-svg"
925
+ viewBox="0 0 32 32"
926
+ fill="currentColor"
927
+ aria-hidden="true"
928
+ role="img"
929
+ width="1em"
930
+ height="1em"
931
+ >
932
+ <path
933
+ 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"
934
+ />
935
+ </svg>
552
936
  </span>
553
937
  </button>
554
938
  </div>
@@ -564,7 +948,19 @@ cssPrefix: pf-v6-c-notification-drawer
564
948
  >
565
949
  <div class="pf-v6-c-notification-drawer__list-item-header">
566
950
  <span class="pf-v6-c-notification-drawer__list-item-header-icon">
567
- <i class="fas fa-check-circle" aria-hidden="true"></i>
951
+ <svg
952
+ class="pf-v6-svg"
953
+ viewBox="0 0 32 32"
954
+ fill="currentColor"
955
+ aria-hidden="true"
956
+ role="img"
957
+ width="1em"
958
+ height="1em"
959
+ >
960
+ <path
961
+ 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"
962
+ />
963
+ </svg>
568
964
  </span>
569
965
  <h2
570
966
  class="pf-v6-c-notification-drawer__list-item-header-title pf-m-truncate"
@@ -583,7 +979,19 @@ cssPrefix: pf-v6-c-notification-drawer
583
979
  id="notification-drawer-groups-example-group1-menu-toggle-8"
584
980
  >
585
981
  <span class="pf-v6-c-menu-toggle__icon">
586
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
982
+ <svg
983
+ class="pf-v6-svg"
984
+ viewBox="0 0 32 32"
985
+ fill="currentColor"
986
+ aria-hidden="true"
987
+ role="img"
988
+ width="1em"
989
+ height="1em"
990
+ >
991
+ <path
992
+ 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"
993
+ />
994
+ </svg>
587
995
  </span>
588
996
  </button>
589
997
  </div>
@@ -599,7 +1007,19 @@ cssPrefix: pf-v6-c-notification-drawer
599
1007
  >
600
1008
  <div class="pf-v6-c-notification-drawer__list-item-header">
601
1009
  <span class="pf-v6-c-notification-drawer__list-item-header-icon">
602
- <i class="fas fa-check-circle" aria-hidden="true"></i>
1010
+ <svg
1011
+ class="pf-v6-svg"
1012
+ viewBox="0 0 32 32"
1013
+ fill="currentColor"
1014
+ aria-hidden="true"
1015
+ role="img"
1016
+ width="1em"
1017
+ height="1em"
1018
+ >
1019
+ <path
1020
+ 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"
1021
+ />
1022
+ </svg>
603
1023
  </span>
604
1024
  <h2 class="pf-v6-c-notification-drawer__list-item-header-title">
605
1025
  <span class="pf-v6-screen-reader">Success notification:</span>
@@ -635,7 +1055,19 @@ cssPrefix: pf-v6-c-notification-drawer
635
1055
  <span class="pf-v6-c-badge pf-m-unread">2</span>
636
1056
  </div>
637
1057
  <span class="pf-v6-c-notification-drawer__group-toggle-icon">
638
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1058
+ <svg
1059
+ class="pf-v6-svg"
1060
+ viewBox="0 0 20 20"
1061
+ fill="currentColor"
1062
+ aria-hidden="true"
1063
+ role="img"
1064
+ width="1em"
1065
+ height="1em"
1066
+ >
1067
+ <path
1068
+ 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"
1069
+ />
1070
+ </svg>
639
1071
  </span>
640
1072
  </button>
641
1073
  </h1>
@@ -646,7 +1078,19 @@ cssPrefix: pf-v6-c-notification-drawer
646
1078
  >
647
1079
  <div class="pf-v6-c-notification-drawer__list-item-header">
648
1080
  <span class="pf-v6-c-notification-drawer__list-item-header-icon">
649
- <i class="fas fa-info-circle" aria-hidden="true"></i>
1081
+ <svg
1082
+ class="pf-v6-svg"
1083
+ viewBox="0 0 32 32"
1084
+ fill="currentColor"
1085
+ aria-hidden="true"
1086
+ role="img"
1087
+ width="1em"
1088
+ height="1em"
1089
+ >
1090
+ <path
1091
+ 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"
1092
+ />
1093
+ </svg>
650
1094
  </span>
651
1095
  <h2 class="pf-v6-c-notification-drawer__list-item-header-title">
652
1096
  <span class="pf-v6-screen-reader">Info notification:</span>
@@ -663,7 +1107,19 @@ cssPrefix: pf-v6-c-notification-drawer
663
1107
  id="notification-drawer-groups-example-group2-menu-toggle-1"
664
1108
  >
665
1109
  <span class="pf-v6-c-menu-toggle__icon">
666
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1110
+ <svg
1111
+ class="pf-v6-svg"
1112
+ viewBox="0 0 32 32"
1113
+ fill="currentColor"
1114
+ aria-hidden="true"
1115
+ role="img"
1116
+ width="1em"
1117
+ height="1em"
1118
+ >
1119
+ <path
1120
+ 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"
1121
+ />
1122
+ </svg>
667
1123
  </span>
668
1124
  </button>
669
1125
  </div>
@@ -681,7 +1137,19 @@ cssPrefix: pf-v6-c-notification-drawer
681
1137
  >
682
1138
  <div class="pf-v6-c-notification-drawer__list-item-header">
683
1139
  <span class="pf-v6-c-notification-drawer__list-item-header-icon">
684
- <i class="fas fa-arrow-circle-up" aria-hidden="true"></i>
1140
+ <svg
1141
+ class="pf-v6-svg"
1142
+ viewBox="0 0 32 32"
1143
+ fill="currentColor"
1144
+ aria-hidden="true"
1145
+ role="img"
1146
+ width="1em"
1147
+ height="1em"
1148
+ >
1149
+ <path
1150
+ 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"
1151
+ />
1152
+ </svg>
685
1153
  </span>
686
1154
  <h2 class="pf-v6-c-notification-drawer__list-item-header-title">
687
1155
  <span class="pf-v6-screen-reader">Custom notification:</span>
@@ -698,7 +1166,19 @@ cssPrefix: pf-v6-c-notification-drawer
698
1166
  id="notification-drawer-groups-example-group2-menu-toggle-3"
699
1167
  >
700
1168
  <span class="pf-v6-c-menu-toggle__icon">
701
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1169
+ <svg
1170
+ class="pf-v6-svg"
1171
+ viewBox="0 0 32 32"
1172
+ fill="currentColor"
1173
+ aria-hidden="true"
1174
+ role="img"
1175
+ width="1em"
1176
+ height="1em"
1177
+ >
1178
+ <path
1179
+ 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"
1180
+ />
1181
+ </svg>
702
1182
  </span>
703
1183
  </button>
704
1184
  </div>
@@ -716,7 +1196,19 @@ cssPrefix: pf-v6-c-notification-drawer
716
1196
  >
717
1197
  <div class="pf-v6-c-notification-drawer__list-item-header">
718
1198
  <span class="pf-v6-c-notification-drawer__list-item-header-icon">
719
- <i class="fas fa-arrow-circle-up" aria-hidden="true"></i>
1199
+ <svg
1200
+ class="pf-v6-svg"
1201
+ viewBox="0 0 32 32"
1202
+ fill="currentColor"
1203
+ aria-hidden="true"
1204
+ role="img"
1205
+ width="1em"
1206
+ height="1em"
1207
+ >
1208
+ <path
1209
+ 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"
1210
+ />
1211
+ </svg>
720
1212
  </span>
721
1213
  <h2 class="pf-v6-c-notification-drawer__list-item-header-title">
722
1214
  <span class="pf-v6-screen-reader">Custom notification:</span>
@@ -733,7 +1225,19 @@ cssPrefix: pf-v6-c-notification-drawer
733
1225
  id="notification-drawer-groups-example-group2-menu-toggle-4"
734
1226
  >
735
1227
  <span class="pf-v6-c-menu-toggle__icon">
736
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1228
+ <svg
1229
+ class="pf-v6-svg"
1230
+ viewBox="0 0 32 32"
1231
+ fill="currentColor"
1232
+ aria-hidden="true"
1233
+ role="img"
1234
+ width="1em"
1235
+ height="1em"
1236
+ >
1237
+ <path
1238
+ 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"
1239
+ />
1240
+ </svg>
737
1241
  </span>
738
1242
  </button>
739
1243
  </div>
@@ -749,7 +1253,19 @@ cssPrefix: pf-v6-c-notification-drawer
749
1253
  >
750
1254
  <div class="pf-v6-c-notification-drawer__list-item-header">
751
1255
  <span class="pf-v6-c-notification-drawer__list-item-header-icon">
752
- <i class="fas fa-exclamation-triangle" aria-hidden="true"></i>
1256
+ <svg
1257
+ class="pf-v6-svg"
1258
+ viewBox="0 0 32 32"
1259
+ fill="currentColor"
1260
+ aria-hidden="true"
1261
+ role="img"
1262
+ width="1em"
1263
+ height="1em"
1264
+ >
1265
+ <path
1266
+ 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"
1267
+ />
1268
+ </svg>
753
1269
  </span>
754
1270
  <h2 class="pf-v6-c-notification-drawer__list-item-header-title">
755
1271
  <span class="pf-v6-screen-reader">Warning notification:</span>
@@ -765,7 +1281,19 @@ cssPrefix: pf-v6-c-notification-drawer
765
1281
  id="notification-drawer-groups-example-group2-menu-toggle-5"
766
1282
  >
767
1283
  <span class="pf-v6-c-menu-toggle__icon">
768
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1284
+ <svg
1285
+ class="pf-v6-svg"
1286
+ viewBox="0 0 32 32"
1287
+ fill="currentColor"
1288
+ aria-hidden="true"
1289
+ role="img"
1290
+ width="1em"
1291
+ height="1em"
1292
+ >
1293
+ <path
1294
+ 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"
1295
+ />
1296
+ </svg>
769
1297
  </span>
770
1298
  </button>
771
1299
  </div>
@@ -781,7 +1309,19 @@ cssPrefix: pf-v6-c-notification-drawer
781
1309
  >
782
1310
  <div class="pf-v6-c-notification-drawer__list-item-header">
783
1311
  <span class="pf-v6-c-notification-drawer__list-item-header-icon">
784
- <i class="fas fa-check-circle" aria-hidden="true"></i>
1312
+ <svg
1313
+ class="pf-v6-svg"
1314
+ viewBox="0 0 32 32"
1315
+ fill="currentColor"
1316
+ aria-hidden="true"
1317
+ role="img"
1318
+ width="1em"
1319
+ height="1em"
1320
+ >
1321
+ <path
1322
+ 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"
1323
+ />
1324
+ </svg>
785
1325
  </span>
786
1326
  <h2 class="pf-v6-c-notification-drawer__list-item-header-title">
787
1327
  <span class="pf-v6-screen-reader">Success notification:</span>
@@ -797,7 +1337,19 @@ cssPrefix: pf-v6-c-notification-drawer
797
1337
  id="notification-drawer-groups-example-group2-menu-toggle-6"
798
1338
  >
799
1339
  <span class="pf-v6-c-menu-toggle__icon">
800
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1340
+ <svg
1341
+ class="pf-v6-svg"
1342
+ viewBox="0 0 32 32"
1343
+ fill="currentColor"
1344
+ aria-hidden="true"
1345
+ role="img"
1346
+ width="1em"
1347
+ height="1em"
1348
+ >
1349
+ <path
1350
+ d="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"
1351
+ />
1352
+ </svg>
801
1353
  </span>
802
1354
  </button>
803
1355
  </div>
@@ -813,7 +1365,19 @@ cssPrefix: pf-v6-c-notification-drawer
813
1365
  >
814
1366
  <div class="pf-v6-c-notification-drawer__list-item-header">
815
1367
  <span class="pf-v6-c-notification-drawer__list-item-header-icon">
816
- <i class="fas fa-check-circle" aria-hidden="true"></i>
1368
+ <svg
1369
+ class="pf-v6-svg"
1370
+ viewBox="0 0 32 32"
1371
+ fill="currentColor"
1372
+ aria-hidden="true"
1373
+ role="img"
1374
+ width="1em"
1375
+ height="1em"
1376
+ >
1377
+ <path
1378
+ 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"
1379
+ />
1380
+ </svg>
817
1381
  </span>
818
1382
  <h2
819
1383
  class="pf-v6-c-notification-drawer__list-item-header-title pf-m-truncate"
@@ -831,7 +1395,19 @@ cssPrefix: pf-v6-c-notification-drawer
831
1395
  id="notification-drawer-groups-example-group2-menu-toggle-7"
832
1396
  >
833
1397
  <span class="pf-v6-c-menu-toggle__icon">
834
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1398
+ <svg
1399
+ class="pf-v6-svg"
1400
+ viewBox="0 0 32 32"
1401
+ fill="currentColor"
1402
+ aria-hidden="true"
1403
+ role="img"
1404
+ width="1em"
1405
+ height="1em"
1406
+ >
1407
+ <path
1408
+ 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"
1409
+ />
1410
+ </svg>
835
1411
  </span>
836
1412
  </button>
837
1413
  </div>
@@ -847,7 +1423,19 @@ cssPrefix: pf-v6-c-notification-drawer
847
1423
  >
848
1424
  <div class="pf-v6-c-notification-drawer__list-item-header">
849
1425
  <span class="pf-v6-c-notification-drawer__list-item-header-icon">
850
- <i class="fas fa-check-circle" aria-hidden="true"></i>
1426
+ <svg
1427
+ class="pf-v6-svg"
1428
+ viewBox="0 0 32 32"
1429
+ fill="currentColor"
1430
+ aria-hidden="true"
1431
+ role="img"
1432
+ width="1em"
1433
+ height="1em"
1434
+ >
1435
+ <path
1436
+ 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"
1437
+ />
1438
+ </svg>
851
1439
  </span>
852
1440
  <h2
853
1441
  class="pf-v6-c-notification-drawer__list-item-header-title pf-m-truncate"
@@ -866,7 +1454,19 @@ cssPrefix: pf-v6-c-notification-drawer
866
1454
  id="notification-drawer-groups-example-group2-menu-toggle-8"
867
1455
  >
868
1456
  <span class="pf-v6-c-menu-toggle__icon">
869
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1457
+ <svg
1458
+ class="pf-v6-svg"
1459
+ viewBox="0 0 32 32"
1460
+ fill="currentColor"
1461
+ aria-hidden="true"
1462
+ role="img"
1463
+ width="1em"
1464
+ height="1em"
1465
+ >
1466
+ <path
1467
+ 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"
1468
+ />
1469
+ </svg>
870
1470
  </span>
871
1471
  </button>
872
1472
  </div>
@@ -882,7 +1482,19 @@ cssPrefix: pf-v6-c-notification-drawer
882
1482
  >
883
1483
  <div class="pf-v6-c-notification-drawer__list-item-header">
884
1484
  <span class="pf-v6-c-notification-drawer__list-item-header-icon">
885
- <i class="fas fa-check-circle" aria-hidden="true"></i>
1485
+ <svg
1486
+ class="pf-v6-svg"
1487
+ viewBox="0 0 32 32"
1488
+ fill="currentColor"
1489
+ aria-hidden="true"
1490
+ role="img"
1491
+ width="1em"
1492
+ height="1em"
1493
+ >
1494
+ <path
1495
+ d="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"
1496
+ />
1497
+ </svg>
886
1498
  </span>
887
1499
  <h2 class="pf-v6-c-notification-drawer__list-item-header-title">
888
1500
  <span class="pf-v6-screen-reader">Success notification:</span>
@@ -918,7 +1530,19 @@ cssPrefix: pf-v6-c-notification-drawer
918
1530
  <span class="pf-v6-c-badge pf-m-unread">3</span>
919
1531
  </div>
920
1532
  <span class="pf-v6-c-notification-drawer__group-toggle-icon">
921
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1533
+ <svg
1534
+ class="pf-v6-svg"
1535
+ viewBox="0 0 20 20"
1536
+ fill="currentColor"
1537
+ aria-hidden="true"
1538
+ role="img"
1539
+ width="1em"
1540
+ height="1em"
1541
+ >
1542
+ <path
1543
+ 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"
1544
+ />
1545
+ </svg>
922
1546
  </span>
923
1547
  </button>
924
1548
  </h1>
@@ -929,7 +1553,19 @@ cssPrefix: pf-v6-c-notification-drawer
929
1553
  >
930
1554
  <div class="pf-v6-c-notification-drawer__list-item-header">
931
1555
  <span class="pf-v6-c-notification-drawer__list-item-header-icon">
932
- <i class="fas fa-info-circle" aria-hidden="true"></i>
1556
+ <svg
1557
+ class="pf-v6-svg"
1558
+ viewBox="0 0 32 32"
1559
+ fill="currentColor"
1560
+ aria-hidden="true"
1561
+ role="img"
1562
+ width="1em"
1563
+ height="1em"
1564
+ >
1565
+ <path
1566
+ 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"
1567
+ />
1568
+ </svg>
933
1569
  </span>
934
1570
  <h2 class="pf-v6-c-notification-drawer__list-item-header-title">
935
1571
  <span class="pf-v6-screen-reader">Info notification:</span>
@@ -946,7 +1582,19 @@ cssPrefix: pf-v6-c-notification-drawer
946
1582
  id="notification-drawer-groups-example-group3-menu-toggle-1"
947
1583
  >
948
1584
  <span class="pf-v6-c-menu-toggle__icon">
949
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1585
+ <svg
1586
+ class="pf-v6-svg"
1587
+ viewBox="0 0 32 32"
1588
+ fill="currentColor"
1589
+ aria-hidden="true"
1590
+ role="img"
1591
+ width="1em"
1592
+ height="1em"
1593
+ >
1594
+ <path
1595
+ 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"
1596
+ />
1597
+ </svg>
950
1598
  </span>
951
1599
  </button>
952
1600
  </div>
@@ -964,7 +1612,19 @@ cssPrefix: pf-v6-c-notification-drawer
964
1612
  >
965
1613
  <div class="pf-v6-c-notification-drawer__list-item-header">
966
1614
  <span class="pf-v6-c-notification-drawer__list-item-header-icon">
967
- <i class="fas fa-arrow-circle-up" aria-hidden="true"></i>
1615
+ <svg
1616
+ class="pf-v6-svg"
1617
+ viewBox="0 0 32 32"
1618
+ fill="currentColor"
1619
+ aria-hidden="true"
1620
+ role="img"
1621
+ width="1em"
1622
+ height="1em"
1623
+ >
1624
+ <path
1625
+ 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"
1626
+ />
1627
+ </svg>
968
1628
  </span>
969
1629
  <h2 class="pf-v6-c-notification-drawer__list-item-header-title">
970
1630
  <span class="pf-v6-screen-reader">Custom notification:</span>
@@ -981,7 +1641,19 @@ cssPrefix: pf-v6-c-notification-drawer
981
1641
  id="notification-drawer-groups-example-group3-menu-toggle-3"
982
1642
  >
983
1643
  <span class="pf-v6-c-menu-toggle__icon">
984
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1644
+ <svg
1645
+ class="pf-v6-svg"
1646
+ viewBox="0 0 32 32"
1647
+ fill="currentColor"
1648
+ aria-hidden="true"
1649
+ role="img"
1650
+ width="1em"
1651
+ height="1em"
1652
+ >
1653
+ <path
1654
+ 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"
1655
+ />
1656
+ </svg>
985
1657
  </span>
986
1658
  </button>
987
1659
  </div>
@@ -999,7 +1671,19 @@ cssPrefix: pf-v6-c-notification-drawer
999
1671
  >
1000
1672
  <div class="pf-v6-c-notification-drawer__list-item-header">
1001
1673
  <span class="pf-v6-c-notification-drawer__list-item-header-icon">
1002
- <i class="fas fa-arrow-circle-up" aria-hidden="true"></i>
1674
+ <svg
1675
+ class="pf-v6-svg"
1676
+ viewBox="0 0 32 32"
1677
+ fill="currentColor"
1678
+ aria-hidden="true"
1679
+ role="img"
1680
+ width="1em"
1681
+ height="1em"
1682
+ >
1683
+ <path
1684
+ 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"
1685
+ />
1686
+ </svg>
1003
1687
  </span>
1004
1688
  <h2 class="pf-v6-c-notification-drawer__list-item-header-title">
1005
1689
  <span class="pf-v6-screen-reader">Custom notification:</span>
@@ -1016,7 +1700,19 @@ cssPrefix: pf-v6-c-notification-drawer
1016
1700
  id="notification-drawer-groups-example-group3-menu-toggle-4"
1017
1701
  >
1018
1702
  <span class="pf-v6-c-menu-toggle__icon">
1019
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1703
+ <svg
1704
+ class="pf-v6-svg"
1705
+ viewBox="0 0 32 32"
1706
+ fill="currentColor"
1707
+ aria-hidden="true"
1708
+ role="img"
1709
+ width="1em"
1710
+ height="1em"
1711
+ >
1712
+ <path
1713
+ 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"
1714
+ />
1715
+ </svg>
1020
1716
  </span>
1021
1717
  </button>
1022
1718
  </div>
@@ -1032,7 +1728,19 @@ cssPrefix: pf-v6-c-notification-drawer
1032
1728
  >
1033
1729
  <div class="pf-v6-c-notification-drawer__list-item-header">
1034
1730
  <span class="pf-v6-c-notification-drawer__list-item-header-icon">
1035
- <i class="fas fa-exclamation-triangle" aria-hidden="true"></i>
1731
+ <svg
1732
+ class="pf-v6-svg"
1733
+ viewBox="0 0 32 32"
1734
+ fill="currentColor"
1735
+ aria-hidden="true"
1736
+ role="img"
1737
+ width="1em"
1738
+ height="1em"
1739
+ >
1740
+ <path
1741
+ 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"
1742
+ />
1743
+ </svg>
1036
1744
  </span>
1037
1745
  <h2 class="pf-v6-c-notification-drawer__list-item-header-title">
1038
1746
  <span class="pf-v6-screen-reader">Warning notification:</span>
@@ -1048,7 +1756,19 @@ cssPrefix: pf-v6-c-notification-drawer
1048
1756
  id="notification-drawer-groups-example-group3-menu-toggle-5"
1049
1757
  >
1050
1758
  <span class="pf-v6-c-menu-toggle__icon">
1051
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1759
+ <svg
1760
+ class="pf-v6-svg"
1761
+ viewBox="0 0 32 32"
1762
+ fill="currentColor"
1763
+ aria-hidden="true"
1764
+ role="img"
1765
+ width="1em"
1766
+ height="1em"
1767
+ >
1768
+ <path
1769
+ 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"
1770
+ />
1771
+ </svg>
1052
1772
  </span>
1053
1773
  </button>
1054
1774
  </div>
@@ -1064,7 +1784,19 @@ cssPrefix: pf-v6-c-notification-drawer
1064
1784
  >
1065
1785
  <div class="pf-v6-c-notification-drawer__list-item-header">
1066
1786
  <span class="pf-v6-c-notification-drawer__list-item-header-icon">
1067
- <i class="fas fa-check-circle" aria-hidden="true"></i>
1787
+ <svg
1788
+ class="pf-v6-svg"
1789
+ viewBox="0 0 32 32"
1790
+ fill="currentColor"
1791
+ aria-hidden="true"
1792
+ role="img"
1793
+ width="1em"
1794
+ height="1em"
1795
+ >
1796
+ <path
1797
+ 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"
1798
+ />
1799
+ </svg>
1068
1800
  </span>
1069
1801
  <h2 class="pf-v6-c-notification-drawer__list-item-header-title">
1070
1802
  <span class="pf-v6-screen-reader">Success notification:</span>
@@ -1080,7 +1812,19 @@ cssPrefix: pf-v6-c-notification-drawer
1080
1812
  id="notification-drawer-groups-example-group3-menu-toggle-6"
1081
1813
  >
1082
1814
  <span class="pf-v6-c-menu-toggle__icon">
1083
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1815
+ <svg
1816
+ class="pf-v6-svg"
1817
+ viewBox="0 0 32 32"
1818
+ fill="currentColor"
1819
+ aria-hidden="true"
1820
+ role="img"
1821
+ width="1em"
1822
+ height="1em"
1823
+ >
1824
+ <path
1825
+ 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"
1826
+ />
1827
+ </svg>
1084
1828
  </span>
1085
1829
  </button>
1086
1830
  </div>
@@ -1096,7 +1840,19 @@ cssPrefix: pf-v6-c-notification-drawer
1096
1840
  >
1097
1841
  <div class="pf-v6-c-notification-drawer__list-item-header">
1098
1842
  <span class="pf-v6-c-notification-drawer__list-item-header-icon">
1099
- <i class="fas fa-check-circle" aria-hidden="true"></i>
1843
+ <svg
1844
+ class="pf-v6-svg"
1845
+ viewBox="0 0 32 32"
1846
+ fill="currentColor"
1847
+ aria-hidden="true"
1848
+ role="img"
1849
+ width="1em"
1850
+ height="1em"
1851
+ >
1852
+ <path
1853
+ 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"
1854
+ />
1855
+ </svg>
1100
1856
  </span>
1101
1857
  <h2
1102
1858
  class="pf-v6-c-notification-drawer__list-item-header-title pf-m-truncate"
@@ -1114,7 +1870,19 @@ cssPrefix: pf-v6-c-notification-drawer
1114
1870
  id="notification-drawer-groups-example-group3-menu-toggle-7"
1115
1871
  >
1116
1872
  <span class="pf-v6-c-menu-toggle__icon">
1117
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1873
+ <svg
1874
+ class="pf-v6-svg"
1875
+ viewBox="0 0 32 32"
1876
+ fill="currentColor"
1877
+ aria-hidden="true"
1878
+ role="img"
1879
+ width="1em"
1880
+ height="1em"
1881
+ >
1882
+ <path
1883
+ 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"
1884
+ />
1885
+ </svg>
1118
1886
  </span>
1119
1887
  </button>
1120
1888
  </div>
@@ -1130,7 +1898,19 @@ cssPrefix: pf-v6-c-notification-drawer
1130
1898
  >
1131
1899
  <div class="pf-v6-c-notification-drawer__list-item-header">
1132
1900
  <span class="pf-v6-c-notification-drawer__list-item-header-icon">
1133
- <i class="fas fa-check-circle" aria-hidden="true"></i>
1901
+ <svg
1902
+ class="pf-v6-svg"
1903
+ viewBox="0 0 32 32"
1904
+ fill="currentColor"
1905
+ aria-hidden="true"
1906
+ role="img"
1907
+ width="1em"
1908
+ height="1em"
1909
+ >
1910
+ <path
1911
+ 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"
1912
+ />
1913
+ </svg>
1134
1914
  </span>
1135
1915
  <h2
1136
1916
  class="pf-v6-c-notification-drawer__list-item-header-title pf-m-truncate"
@@ -1149,7 +1929,19 @@ cssPrefix: pf-v6-c-notification-drawer
1149
1929
  id="notification-drawer-groups-example-group3-menu-toggle-8"
1150
1930
  >
1151
1931
  <span class="pf-v6-c-menu-toggle__icon">
1152
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1932
+ <svg
1933
+ class="pf-v6-svg"
1934
+ viewBox="0 0 32 32"
1935
+ fill="currentColor"
1936
+ aria-hidden="true"
1937
+ role="img"
1938
+ width="1em"
1939
+ height="1em"
1940
+ >
1941
+ <path
1942
+ 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"
1943
+ />
1944
+ </svg>
1153
1945
  </span>
1154
1946
  </button>
1155
1947
  </div>
@@ -1165,7 +1957,19 @@ cssPrefix: pf-v6-c-notification-drawer
1165
1957
  >
1166
1958
  <div class="pf-v6-c-notification-drawer__list-item-header">
1167
1959
  <span class="pf-v6-c-notification-drawer__list-item-header-icon">
1168
- <i class="fas fa-check-circle" aria-hidden="true"></i>
1960
+ <svg
1961
+ class="pf-v6-svg"
1962
+ viewBox="0 0 32 32"
1963
+ fill="currentColor"
1964
+ aria-hidden="true"
1965
+ role="img"
1966
+ width="1em"
1967
+ height="1em"
1968
+ >
1969
+ <path
1970
+ 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"
1971
+ />
1972
+ </svg>
1169
1973
  </span>
1170
1974
  <h2 class="pf-v6-c-notification-drawer__list-item-header-title">
1171
1975
  <span class="pf-v6-screen-reader">Success notification:</span>
@@ -1201,7 +2005,19 @@ cssPrefix: pf-v6-c-notification-drawer
1201
2005
  <span class="pf-v6-c-badge pf-m-unread">2</span>
1202
2006
  </div>
1203
2007
  <span class="pf-v6-c-notification-drawer__group-toggle-icon">
1204
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2008
+ <svg
2009
+ class="pf-v6-svg"
2010
+ viewBox="0 0 20 20"
2011
+ fill="currentColor"
2012
+ aria-hidden="true"
2013
+ role="img"
2014
+ width="1em"
2015
+ height="1em"
2016
+ >
2017
+ <path
2018
+ 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"
2019
+ />
2020
+ </svg>
1205
2021
  </span>
1206
2022
  </button>
1207
2023
  </h1>
@@ -1212,7 +2028,19 @@ cssPrefix: pf-v6-c-notification-drawer
1212
2028
  >
1213
2029
  <div class="pf-v6-c-notification-drawer__list-item-header">
1214
2030
  <span class="pf-v6-c-notification-drawer__list-item-header-icon">
1215
- <i class="fas fa-info-circle" aria-hidden="true"></i>
2031
+ <svg
2032
+ class="pf-v6-svg"
2033
+ viewBox="0 0 32 32"
2034
+ fill="currentColor"
2035
+ aria-hidden="true"
2036
+ role="img"
2037
+ width="1em"
2038
+ height="1em"
2039
+ >
2040
+ <path
2041
+ 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"
2042
+ />
2043
+ </svg>
1216
2044
  </span>
1217
2045
  <h2 class="pf-v6-c-notification-drawer__list-item-header-title">
1218
2046
  <span class="pf-v6-screen-reader">Info notification:</span>
@@ -1229,7 +2057,19 @@ cssPrefix: pf-v6-c-notification-drawer
1229
2057
  id="notification-drawer-groups-example-group4-menu-toggle-1"
1230
2058
  >
1231
2059
  <span class="pf-v6-c-menu-toggle__icon">
1232
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
2060
+ <svg
2061
+ class="pf-v6-svg"
2062
+ viewBox="0 0 32 32"
2063
+ fill="currentColor"
2064
+ aria-hidden="true"
2065
+ role="img"
2066
+ width="1em"
2067
+ height="1em"
2068
+ >
2069
+ <path
2070
+ 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"
2071
+ />
2072
+ </svg>
1233
2073
  </span>
1234
2074
  </button>
1235
2075
  </div>
@@ -1247,7 +2087,19 @@ cssPrefix: pf-v6-c-notification-drawer
1247
2087
  >
1248
2088
  <div class="pf-v6-c-notification-drawer__list-item-header">
1249
2089
  <span class="pf-v6-c-notification-drawer__list-item-header-icon">
1250
- <i class="fas fa-arrow-circle-up" aria-hidden="true"></i>
2090
+ <svg
2091
+ class="pf-v6-svg"
2092
+ viewBox="0 0 32 32"
2093
+ fill="currentColor"
2094
+ aria-hidden="true"
2095
+ role="img"
2096
+ width="1em"
2097
+ height="1em"
2098
+ >
2099
+ <path
2100
+ 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"
2101
+ />
2102
+ </svg>
1251
2103
  </span>
1252
2104
  <h2 class="pf-v6-c-notification-drawer__list-item-header-title">
1253
2105
  <span class="pf-v6-screen-reader">Custom notification:</span>
@@ -1264,7 +2116,19 @@ cssPrefix: pf-v6-c-notification-drawer
1264
2116
  id="notification-drawer-groups-example-group4-menu-toggle-3"
1265
2117
  >
1266
2118
  <span class="pf-v6-c-menu-toggle__icon">
1267
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
2119
+ <svg
2120
+ class="pf-v6-svg"
2121
+ viewBox="0 0 32 32"
2122
+ fill="currentColor"
2123
+ aria-hidden="true"
2124
+ role="img"
2125
+ width="1em"
2126
+ height="1em"
2127
+ >
2128
+ <path
2129
+ 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"
2130
+ />
2131
+ </svg>
1268
2132
  </span>
1269
2133
  </button>
1270
2134
  </div>
@@ -1282,7 +2146,19 @@ cssPrefix: pf-v6-c-notification-drawer
1282
2146
  >
1283
2147
  <div class="pf-v6-c-notification-drawer__list-item-header">
1284
2148
  <span class="pf-v6-c-notification-drawer__list-item-header-icon">
1285
- <i class="fas fa-arrow-circle-up" aria-hidden="true"></i>
2149
+ <svg
2150
+ class="pf-v6-svg"
2151
+ viewBox="0 0 32 32"
2152
+ fill="currentColor"
2153
+ aria-hidden="true"
2154
+ role="img"
2155
+ width="1em"
2156
+ height="1em"
2157
+ >
2158
+ <path
2159
+ 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"
2160
+ />
2161
+ </svg>
1286
2162
  </span>
1287
2163
  <h2 class="pf-v6-c-notification-drawer__list-item-header-title">
1288
2164
  <span class="pf-v6-screen-reader">Custom notification:</span>
@@ -1299,7 +2175,19 @@ cssPrefix: pf-v6-c-notification-drawer
1299
2175
  id="notification-drawer-groups-example-group4-menu-toggle-4"
1300
2176
  >
1301
2177
  <span class="pf-v6-c-menu-toggle__icon">
1302
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
2178
+ <svg
2179
+ class="pf-v6-svg"
2180
+ viewBox="0 0 32 32"
2181
+ fill="currentColor"
2182
+ aria-hidden="true"
2183
+ role="img"
2184
+ width="1em"
2185
+ height="1em"
2186
+ >
2187
+ <path
2188
+ 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"
2189
+ />
2190
+ </svg>
1303
2191
  </span>
1304
2192
  </button>
1305
2193
  </div>
@@ -1315,7 +2203,19 @@ cssPrefix: pf-v6-c-notification-drawer
1315
2203
  >
1316
2204
  <div class="pf-v6-c-notification-drawer__list-item-header">
1317
2205
  <span class="pf-v6-c-notification-drawer__list-item-header-icon">
1318
- <i class="fas fa-exclamation-triangle" aria-hidden="true"></i>
2206
+ <svg
2207
+ class="pf-v6-svg"
2208
+ viewBox="0 0 32 32"
2209
+ fill="currentColor"
2210
+ aria-hidden="true"
2211
+ role="img"
2212
+ width="1em"
2213
+ height="1em"
2214
+ >
2215
+ <path
2216
+ 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"
2217
+ />
2218
+ </svg>
1319
2219
  </span>
1320
2220
  <h2 class="pf-v6-c-notification-drawer__list-item-header-title">
1321
2221
  <span class="pf-v6-screen-reader">Warning notification:</span>
@@ -1331,7 +2231,19 @@ cssPrefix: pf-v6-c-notification-drawer
1331
2231
  id="notification-drawer-groups-example-group4-menu-toggle-5"
1332
2232
  >
1333
2233
  <span class="pf-v6-c-menu-toggle__icon">
1334
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
2234
+ <svg
2235
+ class="pf-v6-svg"
2236
+ viewBox="0 0 32 32"
2237
+ fill="currentColor"
2238
+ aria-hidden="true"
2239
+ role="img"
2240
+ width="1em"
2241
+ height="1em"
2242
+ >
2243
+ <path
2244
+ 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"
2245
+ />
2246
+ </svg>
1335
2247
  </span>
1336
2248
  </button>
1337
2249
  </div>
@@ -1347,7 +2259,19 @@ cssPrefix: pf-v6-c-notification-drawer
1347
2259
  >
1348
2260
  <div class="pf-v6-c-notification-drawer__list-item-header">
1349
2261
  <span class="pf-v6-c-notification-drawer__list-item-header-icon">
1350
- <i class="fas fa-check-circle" aria-hidden="true"></i>
2262
+ <svg
2263
+ class="pf-v6-svg"
2264
+ viewBox="0 0 32 32"
2265
+ fill="currentColor"
2266
+ aria-hidden="true"
2267
+ role="img"
2268
+ width="1em"
2269
+ height="1em"
2270
+ >
2271
+ <path
2272
+ 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"
2273
+ />
2274
+ </svg>
1351
2275
  </span>
1352
2276
  <h2 class="pf-v6-c-notification-drawer__list-item-header-title">
1353
2277
  <span class="pf-v6-screen-reader">Success notification:</span>
@@ -1363,7 +2287,19 @@ cssPrefix: pf-v6-c-notification-drawer
1363
2287
  id="notification-drawer-groups-example-group4-menu-toggle-6"
1364
2288
  >
1365
2289
  <span class="pf-v6-c-menu-toggle__icon">
1366
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
2290
+ <svg
2291
+ class="pf-v6-svg"
2292
+ viewBox="0 0 32 32"
2293
+ fill="currentColor"
2294
+ aria-hidden="true"
2295
+ role="img"
2296
+ width="1em"
2297
+ height="1em"
2298
+ >
2299
+ <path
2300
+ 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"
2301
+ />
2302
+ </svg>
1367
2303
  </span>
1368
2304
  </button>
1369
2305
  </div>
@@ -1379,7 +2315,19 @@ cssPrefix: pf-v6-c-notification-drawer
1379
2315
  >
1380
2316
  <div class="pf-v6-c-notification-drawer__list-item-header">
1381
2317
  <span class="pf-v6-c-notification-drawer__list-item-header-icon">
1382
- <i class="fas fa-check-circle" aria-hidden="true"></i>
2318
+ <svg
2319
+ class="pf-v6-svg"
2320
+ viewBox="0 0 32 32"
2321
+ fill="currentColor"
2322
+ aria-hidden="true"
2323
+ role="img"
2324
+ width="1em"
2325
+ height="1em"
2326
+ >
2327
+ <path
2328
+ 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"
2329
+ />
2330
+ </svg>
1383
2331
  </span>
1384
2332
  <h2
1385
2333
  class="pf-v6-c-notification-drawer__list-item-header-title pf-m-truncate"
@@ -1397,7 +2345,19 @@ cssPrefix: pf-v6-c-notification-drawer
1397
2345
  id="notification-drawer-groups-example-group4-menu-toggle-7"
1398
2346
  >
1399
2347
  <span class="pf-v6-c-menu-toggle__icon">
1400
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
2348
+ <svg
2349
+ class="pf-v6-svg"
2350
+ viewBox="0 0 32 32"
2351
+ fill="currentColor"
2352
+ aria-hidden="true"
2353
+ role="img"
2354
+ width="1em"
2355
+ height="1em"
2356
+ >
2357
+ <path
2358
+ 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"
2359
+ />
2360
+ </svg>
1401
2361
  </span>
1402
2362
  </button>
1403
2363
  </div>
@@ -1413,7 +2373,19 @@ cssPrefix: pf-v6-c-notification-drawer
1413
2373
  >
1414
2374
  <div class="pf-v6-c-notification-drawer__list-item-header">
1415
2375
  <span class="pf-v6-c-notification-drawer__list-item-header-icon">
1416
- <i class="fas fa-check-circle" aria-hidden="true"></i>
2376
+ <svg
2377
+ class="pf-v6-svg"
2378
+ viewBox="0 0 32 32"
2379
+ fill="currentColor"
2380
+ aria-hidden="true"
2381
+ role="img"
2382
+ width="1em"
2383
+ height="1em"
2384
+ >
2385
+ <path
2386
+ 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"
2387
+ />
2388
+ </svg>
1417
2389
  </span>
1418
2390
  <h2
1419
2391
  class="pf-v6-c-notification-drawer__list-item-header-title pf-m-truncate"
@@ -1432,7 +2404,19 @@ cssPrefix: pf-v6-c-notification-drawer
1432
2404
  id="notification-drawer-groups-example-group4-menu-toggle-8"
1433
2405
  >
1434
2406
  <span class="pf-v6-c-menu-toggle__icon">
1435
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
2407
+ <svg
2408
+ class="pf-v6-svg"
2409
+ viewBox="0 0 32 32"
2410
+ fill="currentColor"
2411
+ aria-hidden="true"
2412
+ role="img"
2413
+ width="1em"
2414
+ height="1em"
2415
+ >
2416
+ <path
2417
+ 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"
2418
+ />
2419
+ </svg>
1436
2420
  </span>
1437
2421
  </button>
1438
2422
  </div>
@@ -1448,7 +2432,19 @@ cssPrefix: pf-v6-c-notification-drawer
1448
2432
  >
1449
2433
  <div class="pf-v6-c-notification-drawer__list-item-header">
1450
2434
  <span class="pf-v6-c-notification-drawer__list-item-header-icon">
1451
- <i class="fas fa-check-circle" aria-hidden="true"></i>
2435
+ <svg
2436
+ class="pf-v6-svg"
2437
+ viewBox="0 0 32 32"
2438
+ fill="currentColor"
2439
+ aria-hidden="true"
2440
+ role="img"
2441
+ width="1em"
2442
+ height="1em"
2443
+ >
2444
+ <path
2445
+ 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"
2446
+ />
2447
+ </svg>
1452
2448
  </span>
1453
2449
  <h2 class="pf-v6-c-notification-drawer__list-item-header-title">
1454
2450
  <span class="pf-v6-screen-reader">Success notification:</span>