@patternfly/patternfly 6.5.0-prerelease.5 → 6.5.0-prerelease.50

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 (376) hide show
  1. package/README.md +1 -1
  2. package/assets/fontawesome/_variables.scss +2 -1
  3. package/assets/images/RHAiExperienceIcon.svg +27 -0
  4. package/assets/images/RHAutomationsLogo.svg +96 -0
  5. package/assets/images/RHServerStackIcon.svg +16 -0
  6. package/assets/images/compass--hero-bg.png +0 -0
  7. package/assets/images/compass--rh-wallpaper-dark.png +0 -0
  8. package/assets/images/compass--rh-wallpaper-light.png +0 -0
  9. package/assets/images/compass--wallpaper-dark.png +0 -0
  10. package/assets/images/compass--wallpaper-light.png +0 -0
  11. package/base/normalize.scss +7 -0
  12. package/base/patternfly-common.css +50 -0
  13. package/base/patternfly-common.scss +59 -0
  14. package/base/patternfly-svg-icons.css +11 -0
  15. package/base/patternfly-svg-icons.scss +14 -0
  16. package/base/patternfly-variables.css +345 -14
  17. package/base/patternfly-variables.scss +40 -0
  18. package/base/tokens/tokens-dark.scss +51 -3
  19. package/base/tokens/tokens-default.scss +67 -13
  20. package/base/tokens/tokens-glass-dark.scss +9 -0
  21. package/base/tokens/tokens-glass.scss +9 -0
  22. package/base/tokens/tokens-local.scss +16 -0
  23. package/base/tokens/tokens-palette.scss +3 -1
  24. package/base/tokens/tokens-redhat-dark.scss +14 -0
  25. package/base/tokens/tokens-redhat-glass-dark.scss +16 -0
  26. package/base/tokens/tokens-redhat-glass.scss +15 -0
  27. package/base/tokens/tokens-redhat-highcontrast-dark.scss +47 -0
  28. package/base/tokens/tokens-redhat-highcontrast.scss +127 -0
  29. package/base/tokens/tokens-redhat.scss +15 -0
  30. package/components/AboutModalBox/about-modal-box.css +36 -26
  31. package/components/Accordion/accordion.css +17 -14
  32. package/components/Accordion/accordion.scss +1 -2
  33. package/components/ActionList/action-list.css +2 -0
  34. package/components/ActionList/action-list.scss +2 -0
  35. package/components/Alert/alert.css +7 -5
  36. package/components/Alert/alert.scss +2 -1
  37. package/components/Avatar/avatar.css +12 -4
  38. package/components/BackgroundImage/background-image.css +6 -3
  39. package/components/Banner/banner.css +8 -6
  40. package/components/Brand/brand.css +3 -1
  41. package/components/Breadcrumb/breadcrumb.css +4 -3
  42. package/components/Button/button.css +117 -14
  43. package/components/Button/button.scss +127 -10
  44. package/components/CalendarMonth/calendar-month.css +4 -3
  45. package/components/Card/card.css +20 -7
  46. package/components/Card/card.scss +16 -2
  47. package/components/ClipboardCopy/clipboard-copy.css +7 -6
  48. package/components/ClipboardCopy/clipboard-copy.scss +3 -3
  49. package/components/CodeEditor/code-editor.css +1 -1
  50. package/components/CodeEditor/code-editor.scss +1 -1
  51. package/components/Compass/compass.css +320 -0
  52. package/components/Compass/compass.scss +350 -0
  53. package/components/DataList/data-list.css +34 -23
  54. package/components/DataList/data-list.scss +7 -2
  55. package/components/DescriptionList/description-list-order.scss +5 -1
  56. package/components/DescriptionList/description-list.css +7 -5
  57. package/components/DescriptionList/description-list.scss +5 -1
  58. package/components/Divider/divider.css +7 -5
  59. package/components/Drawer/drawer.css +110 -56
  60. package/components/Drawer/drawer.scss +69 -9
  61. package/components/DualListSelector/dual-list-selector.css +18 -12
  62. package/components/DualListSelector/dual-list-selector.scss +1 -1
  63. package/components/ExpandableSection/expandable-section.css +21 -16
  64. package/components/ExpandableSection/expandable-section.scss +6 -3
  65. package/components/Form/form.css +2 -2
  66. package/components/Form/form.scss +2 -2
  67. package/components/FormControl/form-control.css +3 -3
  68. package/components/FormControl/form-control.scss +3 -3
  69. package/components/Hero/hero.css +74 -0
  70. package/components/Hero/hero.scss +86 -0
  71. package/components/JumpLinks/jump-links.css +5 -4
  72. package/components/JumpLinks/jump-links.scss +6 -2
  73. package/components/Label/label-group.css +2 -2
  74. package/components/Label/label-group.scss +2 -2
  75. package/components/Label/label.css +4 -3
  76. package/components/Login/login.css +51 -37
  77. package/components/Masthead/masthead.css +70 -16
  78. package/components/Masthead/masthead.scss +54 -1
  79. package/components/Menu/menu.css +23 -14
  80. package/components/MenuToggle/menu-toggle.css +5 -1
  81. package/components/MenuToggle/menu-toggle.scss +6 -1
  82. package/components/ModalBox/modal-box.css +9 -7
  83. package/components/ModalBox/modal-box.scss +2 -2
  84. package/components/Nav/nav.css +74 -11
  85. package/components/Nav/nav.scss +77 -5
  86. package/components/NotificationDrawer/notification-drawer.css +19 -9
  87. package/components/NotificationDrawer/notification-drawer.scss +14 -5
  88. package/components/Page/page.css +55 -29
  89. package/components/Page/page.scss +44 -5
  90. package/components/Pagination/pagination.scss +5 -1
  91. package/components/ProgressStepper/progress-stepper.scss +5 -1
  92. package/components/Sidebar/sidebar.css +1 -1
  93. package/components/Sidebar/sidebar.scss +7 -3
  94. package/components/Skeleton/skeleton.css +16 -15
  95. package/components/Slider/slider.css +32 -18
  96. package/components/Switch/switch.css +4 -2
  97. package/components/Switch/switch.scss +1 -1
  98. package/components/Table/table-grid.css +28 -36
  99. package/components/Table/table-grid.scss +4 -4
  100. package/components/Table/table-tree-view.css +4 -2
  101. package/components/Table/table.css +33 -29
  102. package/components/Table/table.scss +2 -2
  103. package/components/Tabs/tabs.css +35 -18
  104. package/components/Tabs/tabs.scss +35 -7
  105. package/components/TextInputGroup/text-input-group.css +2 -2
  106. package/components/TextInputGroup/text-input-group.scss +2 -2
  107. package/components/ToggleGroup/toggle-group.css +34 -17
  108. package/components/ToggleGroup/toggle-group.scss +36 -20
  109. package/components/Toolbar/toolbar.css +47 -15
  110. package/components/Toolbar/toolbar.scss +34 -6
  111. package/components/TreeView/tree-view.css +45 -14
  112. package/components/TreeView/tree-view.scss +32 -1
  113. package/components/Wizard/wizard.css +21 -17
  114. package/components/Wizard/wizard.scss +4 -4
  115. package/components/_index.css +1602 -676
  116. package/components/_index.scss +3 -1
  117. package/docs/components/AboutModalBox/examples/AboutModalBox.md +13 -1
  118. package/docs/components/Accordion/examples/Accordion.md +390 -30
  119. package/docs/components/ActionList/examples/ActionList.md +143 -11
  120. package/docs/components/Alert/examples/Alert.md +678 -54
  121. package/docs/components/Avatar/examples/Avatar.md +4 -4
  122. package/docs/components/BackToTop/examples/BackToTop.md +13 -1
  123. package/docs/components/Banner/examples/Banner.md +65 -5
  124. package/docs/components/Brand/examples/Brand.md +2 -2
  125. package/docs/components/Breadcrumb/examples/Breadcrumb.md +299 -23
  126. package/docs/components/Button/examples/Button.md +2217 -241
  127. package/docs/components/CalendarMonth/examples/CalendarMonth.md +104 -8
  128. package/docs/components/Card/examples/Card.md +206 -4
  129. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +286 -22
  130. package/docs/components/CodeBlock/examples/CodeBlock.md +104 -8
  131. package/docs/components/CodeEditor/examples/CodeEditor.md +195 -15
  132. package/docs/components/Compass/examples/Compass.css +17 -0
  133. package/docs/components/Compass/examples/Compass.md +119 -0
  134. package/docs/components/DataList/examples/DataList.md +405 -205
  135. package/docs/components/DatePicker/examples/DatePicker.md +78 -6
  136. package/docs/components/DescriptionList/examples/DescriptionList.md +327 -27
  137. package/docs/components/Divider/examples/Divider.md +2 -2
  138. package/docs/components/Drawer/examples/Drawer.md +353 -35
  139. package/docs/components/DualListSelector/examples/DualListSelector.md +1013 -143
  140. package/docs/components/ExpandableSection/examples/ExpandableSection.md +91 -7
  141. package/docs/components/Form/examples/Form.md +78 -6
  142. package/docs/components/Hero/examples/Hero.md +25 -0
  143. package/docs/components/Icon/examples/Icon.md +92 -8
  144. package/docs/components/InlineEdit/examples/InlineEdit.md +312 -24
  145. package/docs/components/InputGroup/examples/InputGroup.md +27 -3
  146. package/docs/components/JumpLinks/examples/JumpLinks.md +54 -6
  147. package/docs/components/Label/examples/Label.md +2834 -218
  148. package/docs/components/Login/examples/Login.md +26 -2
  149. package/docs/components/Masthead/examples/masthead.md +80 -1
  150. package/docs/components/Menu/examples/Menu.md +1458 -114
  151. package/docs/components/MenuToggle/examples/MenuToggle.md +53 -1
  152. package/docs/components/ModalBox/examples/ModalBox.md +287 -23
  153. package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +156 -12
  154. package/docs/components/Nav/examples/Navigation.md +798 -58
  155. package/docs/components/NotificationDrawer/examples/NotificationDrawer.md +598 -46
  156. package/docs/components/OverflowMenu/examples/overflow-menu.md +78 -6
  157. package/docs/components/Page/examples/Page.md +51 -2
  158. package/docs/components/Pagination/examples/Pagination.md +627 -51
  159. package/docs/components/Popover/examples/Popover.md +286 -22
  160. package/docs/components/ProgressStepper/examples/ProgressStepper.md +275 -23
  161. package/docs/components/Sidebar/examples/Sidebar.md +1 -1
  162. package/docs/components/Slider/examples/Slider.md +52 -4
  163. package/docs/components/Table/examples/Table.md +875 -70
  164. package/docs/components/Tabs/examples/Tabs.md +4127 -320
  165. package/docs/components/TextInputGroup/examples/TextInputGroup.md +600 -48
  166. package/docs/components/ToggleGroup/examples/toggle-group.md +195 -15
  167. package/docs/components/Toolbar/examples/Toolbar.md +490 -42
  168. package/docs/components/TreeView/examples/TreeView.md +1390 -130
  169. package/docs/components/Wizard/examples/Wizard.md +492 -72
  170. package/docs/demos/AboutModal/examples/AboutModal.md +57 -9
  171. package/docs/demos/Alert/examples/Alert.md +236 -32
  172. package/docs/demos/BackToTop/examples/BackToTop.md +57 -9
  173. package/docs/demos/Banner/examples/Banner.md +88 -16
  174. package/docs/demos/Button/examples/Button.md +13 -1
  175. package/docs/demos/Card/examples/Card.md +399 -42
  176. package/docs/demos/CardView/examples/CardView.md +161 -17
  177. package/docs/demos/Compass/examples/Compass.md +6836 -0
  178. package/docs/demos/Dashboard/examples/Dashboard.md +173 -26
  179. package/docs/demos/DataList/examples/DataList.md +566 -65
  180. package/docs/demos/DescriptionList/examples/DescriptionList.md +156 -27
  181. package/docs/demos/Drawer/examples/Drawer.md +216 -45
  182. package/docs/demos/Form/examples/BasicForms.md +273 -21
  183. package/docs/demos/JumpLinks/examples/JumpLinks.md +272 -59
  184. package/docs/demos/Masthead/examples/Masthead.md +458 -89
  185. package/docs/demos/Modal/examples/Modal.md +342 -57
  186. package/docs/demos/Nav/examples/Nav.md +660 -87
  187. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +1088 -140
  188. package/docs/demos/Page/examples/Page.md +618 -123
  189. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +13 -1
  190. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +52 -4
  191. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +691 -113
  192. package/docs/demos/Skeleton/examples/Skeleton.md +44 -8
  193. package/docs/demos/Table/examples/Table.md +3924 -256
  194. package/docs/demos/Tabs/examples/Tabs.md +407 -65
  195. package/docs/demos/Toolbar/examples/Toolbar.md +502 -52
  196. package/docs/demos/Wizard/examples/Wizard.md +796 -130
  197. package/docs/layouts/Bullseye/examples/Bullseye.css +2 -2
  198. package/docs/layouts/Bullseye/examples/Bullseye.md +2 -1
  199. package/docs/layouts/Flex/examples/Flex.css +3 -3
  200. package/docs/layouts/Flex/examples/Flex.md +3 -2
  201. package/docs/layouts/Gallery/examples/Gallery.css +2 -2
  202. package/docs/layouts/Gallery/examples/Gallery.md +4 -3
  203. package/docs/layouts/Grid/examples/Grid.css +1 -1
  204. package/docs/layouts/Grid/examples/Grid.md +6 -5
  205. package/docs/layouts/Level/examples/Level.css +3 -3
  206. package/docs/layouts/Level/examples/Level.md +2 -1
  207. package/docs/layouts/Split/examples/Split.css +1 -1
  208. package/docs/layouts/Split/examples/Split.md +2 -1
  209. package/docs/layouts/Stack/examples/Stack.css +3 -3
  210. package/docs/layouts/Stack/examples/Stack.md +2 -1
  211. package/docs/utilities/Accessibility/examples/Accessibility.md +3 -2
  212. package/docs/utilities/Alignment/examples/Alignment.css +4 -4
  213. package/docs/utilities/Alignment/examples/Alignment.md +3 -2
  214. package/docs/utilities/BackgroundColor/examples/BackgroundColor.md +5 -4
  215. package/docs/utilities/BoxShadow/examples/box-shadow.css +2 -2
  216. package/docs/utilities/BoxShadow/examples/box-shadow.md +2 -1
  217. package/docs/utilities/Display/examples/Display.css +1 -1
  218. package/docs/utilities/Display/examples/Display.md +3 -2
  219. package/docs/utilities/Flex/examples/Flex.css +7 -7
  220. package/docs/utilities/Flex/examples/Flex.md +3 -2
  221. package/docs/utilities/Float/examples/Float.css +2 -2
  222. package/docs/utilities/Float/examples/Float.md +3 -2
  223. package/docs/utilities/Sizing/examples/Sizing.md +8 -7
  224. package/docs/utilities/Spacing/examples/Spacing.css +2 -2
  225. package/docs/utilities/Spacing/examples/Spacing.md +3 -2
  226. package/docs/utilities/Text/examples/Text.md +5 -4
  227. package/icons/PfIcons/add-circle-o.svg +4 -0
  228. package/icons/PfIcons/ansible-tower.svg +4 -0
  229. package/icons/PfIcons/applications.svg +4 -0
  230. package/icons/PfIcons/arrow.svg +4 -0
  231. package/icons/PfIcons/asleep.svg +4 -0
  232. package/icons/PfIcons/attention-bell.svg +4 -0
  233. package/icons/PfIcons/automation.svg +4 -0
  234. package/icons/PfIcons/bell.svg +4 -0
  235. package/icons/PfIcons/blueprint.svg +4 -0
  236. package/icons/PfIcons/build.svg +4 -0
  237. package/icons/PfIcons/builder-image.svg +4 -0
  238. package/icons/PfIcons/bundle.svg +4 -0
  239. package/icons/PfIcons/catalog.svg +4 -0
  240. package/icons/PfIcons/chat.svg +4 -0
  241. package/icons/PfIcons/close.svg +4 -0
  242. package/icons/PfIcons/cloud-security.svg +4 -0
  243. package/icons/PfIcons/cloud-tenant.svg +4 -0
  244. package/icons/PfIcons/cluster.svg +4 -0
  245. package/icons/PfIcons/connected.svg +4 -0
  246. package/icons/PfIcons/container-node.svg +4 -0
  247. package/icons/PfIcons/cpu.svg +4 -0
  248. package/icons/PfIcons/critical-risk.svg +4 -0
  249. package/icons/PfIcons/data-processor.svg +4 -0
  250. package/icons/PfIcons/data-sink.svg +4 -0
  251. package/icons/PfIcons/data-source.svg +4 -0
  252. package/icons/PfIcons/degraded.svg +4 -0
  253. package/icons/PfIcons/disconnected.svg +4 -0
  254. package/icons/PfIcons/domain.svg +4 -0
  255. package/icons/PfIcons/edit.svg +4 -0
  256. package/icons/PfIcons/enhancement.svg +4 -0
  257. package/icons/PfIcons/enterprise.svg +4 -0
  258. package/icons/PfIcons/equalizer.svg +4 -0
  259. package/icons/PfIcons/error-circle-o.svg +4 -0
  260. package/icons/PfIcons/export.svg +4 -0
  261. package/icons/PfIcons/filter.svg +4 -0
  262. package/icons/PfIcons/flavor.svg +4 -0
  263. package/icons/PfIcons/folder-close.svg +4 -0
  264. package/icons/PfIcons/folder-open.svg +4 -0
  265. package/icons/PfIcons/globe-route.svg +4 -0
  266. package/icons/PfIcons/help.svg +4 -0
  267. package/icons/PfIcons/history.svg +4 -0
  268. package/icons/PfIcons/home.svg +4 -0
  269. package/icons/PfIcons/import.svg +4 -0
  270. package/icons/PfIcons/in-progress.svg +4 -0
  271. package/icons/PfIcons/info.svg +4 -0
  272. package/icons/PfIcons/infrastructure.svg +4 -0
  273. package/icons/PfIcons/integration.svg +4 -0
  274. package/icons/PfIcons/key.svg +4 -0
  275. package/icons/PfIcons/locked.svg +4 -0
  276. package/icons/PfIcons/maintenance.svg +4 -0
  277. package/icons/PfIcons/memory.svg +4 -0
  278. package/icons/PfIcons/messages.svg +4 -0
  279. package/icons/PfIcons/middleware.svg +4 -0
  280. package/icons/PfIcons/migration.svg +4 -0
  281. package/icons/PfIcons/module.svg +4 -0
  282. package/icons/PfIcons/monitoring.svg +4 -0
  283. package/icons/PfIcons/multicluster.svg +4 -0
  284. package/icons/PfIcons/namespaces.svg +4 -0
  285. package/icons/PfIcons/network.svg +4 -0
  286. package/icons/PfIcons/new-process.svg +4 -0
  287. package/icons/PfIcons/not-started.svg +4 -0
  288. package/icons/PfIcons/off.svg +4 -0
  289. package/icons/PfIcons/ok.svg +4 -0
  290. package/icons/PfIcons/on-running.svg +4 -0
  291. package/icons/PfIcons/on.svg +4 -0
  292. package/icons/PfIcons/open-drawer-right.svg +4 -0
  293. package/icons/PfIcons/openshift.svg +4 -0
  294. package/icons/PfIcons/openstack.svg +4 -0
  295. package/icons/PfIcons/optimize.svg +4 -0
  296. package/icons/PfIcons/orders.svg +4 -0
  297. package/icons/PfIcons/os-image.svg +4 -0
  298. package/icons/PfIcons/package.svg +4 -0
  299. package/icons/PfIcons/panel-close.svg +4 -0
  300. package/icons/PfIcons/panel-open.svg +4 -0
  301. package/icons/PfIcons/paused.svg +4 -0
  302. package/icons/PfIcons/pending.svg +4 -0
  303. package/icons/PfIcons/pficon-dragdrop.svg +4 -0
  304. package/icons/PfIcons/pficon-history.svg +4 -0
  305. package/icons/PfIcons/pficon-network-range.svg +4 -0
  306. package/icons/PfIcons/pficon-satellite.svg +4 -0
  307. package/icons/PfIcons/pficon-sort-common-asc.svg +4 -0
  308. package/icons/PfIcons/pficon-sort-common-desc.svg +4 -0
  309. package/icons/PfIcons/pficon-template.svg +4 -0
  310. package/icons/PfIcons/pficon-vcenter.svg +4 -0
  311. package/icons/PfIcons/plugged.svg +4 -0
  312. package/icons/PfIcons/port.svg +4 -0
  313. package/icons/PfIcons/print.svg +4 -0
  314. package/icons/PfIcons/private.svg +4 -0
  315. package/icons/PfIcons/process-automation.svg +4 -0
  316. package/icons/PfIcons/project.svg +4 -0
  317. package/icons/PfIcons/rebalance.svg +4 -0
  318. package/icons/PfIcons/rebooting.svg +4 -0
  319. package/icons/PfIcons/regions.svg +4 -0
  320. package/icons/PfIcons/registry.svg +4 -0
  321. package/icons/PfIcons/remove2.svg +4 -0
  322. package/icons/PfIcons/replicator.svg +4 -0
  323. package/icons/PfIcons/repository.svg +4 -0
  324. package/icons/PfIcons/resource-pool.svg +4 -0
  325. package/icons/PfIcons/resources-almost-empty.svg +4 -0
  326. package/icons/PfIcons/resources-almost-full.svg +4 -0
  327. package/icons/PfIcons/resources-empty.svg +4 -0
  328. package/icons/PfIcons/resources-full.svg +4 -0
  329. package/icons/PfIcons/running.svg +4 -0
  330. package/icons/PfIcons/save.svg +4 -0
  331. package/icons/PfIcons/screen.svg +4 -0
  332. package/icons/PfIcons/security.svg +4 -0
  333. package/icons/PfIcons/server-group.svg +4 -0
  334. package/icons/PfIcons/server.svg +4 -0
  335. package/icons/PfIcons/service-catalog.svg +4 -0
  336. package/icons/PfIcons/service.svg +4 -0
  337. package/icons/PfIcons/services.svg +4 -0
  338. package/icons/PfIcons/severity-critical.svg +4 -0
  339. package/icons/PfIcons/severity-important.svg +4 -0
  340. package/icons/PfIcons/severity-minor.svg +4 -0
  341. package/icons/PfIcons/severity-moderate.svg +4 -0
  342. package/icons/PfIcons/severity-none.svg +4 -0
  343. package/icons/PfIcons/severity-undefined.svg +4 -0
  344. package/icons/PfIcons/spinner.svg +4 -0
  345. package/icons/PfIcons/spinner2.svg +4 -0
  346. package/icons/PfIcons/storage-domain.svg +4 -0
  347. package/icons/PfIcons/task.svg +4 -0
  348. package/icons/PfIcons/tenant.svg +4 -0
  349. package/icons/PfIcons/thumb-tack.svg +4 -0
  350. package/icons/PfIcons/topology.svg +4 -0
  351. package/icons/PfIcons/treeview.svg +4 -0
  352. package/icons/PfIcons/trend-down.svg +4 -0
  353. package/icons/PfIcons/trend-up.svg +4 -0
  354. package/icons/PfIcons/unknown.svg +4 -0
  355. package/icons/PfIcons/unlocked.svg +4 -0
  356. package/icons/PfIcons/unplugged.svg +4 -0
  357. package/icons/PfIcons/user.svg +4 -0
  358. package/icons/PfIcons/users.svg +4 -0
  359. package/icons/PfIcons/virtual-machine.svg +4 -0
  360. package/icons/PfIcons/volume.svg +4 -0
  361. package/icons/PfIcons/warning-triangle.svg +4 -0
  362. package/icons/PfIcons/zone.svg +4 -0
  363. package/layouts/Flex/flex.scss +83 -19
  364. package/layouts/Gallery/gallery.css +6 -2
  365. package/layouts/_index.css +6 -2
  366. package/package.json +34 -16
  367. package/patternfly-base-no-globals.css +406 -14
  368. package/patternfly-base.css +413 -14
  369. package/patternfly-charts.css +3 -3
  370. package/patternfly-no-globals.css +1947 -625
  371. package/patternfly.css +1954 -625
  372. package/patternfly.min.css +1 -1
  373. package/patternfly.min.css.map +1 -1
  374. package/sass-utilities/functions.scss +32 -25
  375. package/sass-utilities/mixins.scss +36 -20
  376. package/sass-utilities/namespaces-components.scss +6 -0
package/docs/components/NotificationDrawer/examples/NotificationDrawer.md CHANGED
@@ -30,7 +30,19 @@ cssPrefix: pf-v6-c-notification-drawer
30
30
  aria-label="Close"
31
31
  >
32
32
  <span class="pf-v6-c-button__icon">
33
- <i class="fas fa-times" aria-hidden="true"></i>
33
+ <svg
34
+ class="pf-v6-svg"
35
+ viewBox="0 0 20 20"
36
+ fill="currentColor"
37
+ aria-hidden="true"
38
+ role="img"
39
+ width="1em"
40
+ height="1em"
41
+ >
42
+ <path
43
+ 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"
44
+ />
45
+ </svg>
34
46
  </span>
35
47
  </button>
36
48
  </div>
@@ -44,7 +56,19 @@ cssPrefix: pf-v6-c-notification-drawer
44
56
  >
45
57
  <div class="pf-v6-c-notification-drawer__list-item-header">
46
58
  <span class="pf-v6-c-notification-drawer__list-item-header-icon">
47
- <i class="fas fa-info-circle" aria-hidden="true"></i>
59
+ <svg
60
+ class="pf-v6-svg"
61
+ viewBox="0 0 32 32"
62
+ fill="currentColor"
63
+ aria-hidden="true"
64
+ role="img"
65
+ width="1em"
66
+ height="1em"
67
+ >
68
+ <path
69
+ 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"
70
+ />
71
+ </svg>
48
72
  </span>
49
73
  <h2 class="pf-v6-c-notification-drawer__list-item-header-title">
50
74
  <span class="pf-v6-screen-reader">Info notification:</span>
@@ -79,7 +103,19 @@ cssPrefix: pf-v6-c-notification-drawer
79
103
  >
80
104
  <div class="pf-v6-c-notification-drawer__list-item-header">
81
105
  <span class="pf-v6-c-notification-drawer__list-item-header-icon">
82
- <i class="fas fa-arrow-circle-up" aria-hidden="true"></i>
106
+ <svg
107
+ class="pf-v6-svg"
108
+ viewBox="0 0 32 32"
109
+ fill="currentColor"
110
+ aria-hidden="true"
111
+ role="img"
112
+ width="1em"
113
+ height="1em"
114
+ >
115
+ <path
116
+ 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"
117
+ />
118
+ </svg>
83
119
  </span>
84
120
  <h2 class="pf-v6-c-notification-drawer__list-item-header-title">
85
121
  <span class="pf-v6-screen-reader">Custom notification:</span>
@@ -114,7 +150,19 @@ cssPrefix: pf-v6-c-notification-drawer
114
150
  >
115
151
  <div class="pf-v6-c-notification-drawer__list-item-header">
116
152
  <span class="pf-v6-c-notification-drawer__list-item-header-icon">
117
- <i class="fas fa-arrow-circle-up" aria-hidden="true"></i>
153
+ <svg
154
+ class="pf-v6-svg"
155
+ viewBox="0 0 32 32"
156
+ fill="currentColor"
157
+ aria-hidden="true"
158
+ role="img"
159
+ width="1em"
160
+ height="1em"
161
+ >
162
+ <path
163
+ 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"
164
+ />
165
+ </svg>
118
166
  </span>
119
167
  <h2 class="pf-v6-c-notification-drawer__list-item-header-title">
120
168
  <span class="pf-v6-screen-reader">Custom notification:</span>
@@ -147,7 +195,19 @@ cssPrefix: pf-v6-c-notification-drawer
147
195
  >
148
196
  <div class="pf-v6-c-notification-drawer__list-item-header">
149
197
  <span class="pf-v6-c-notification-drawer__list-item-header-icon">
150
- <i class="fas fa-exclamation-triangle" aria-hidden="true"></i>
198
+ <svg
199
+ class="pf-v6-svg"
200
+ viewBox="0 0 32 32"
201
+ fill="currentColor"
202
+ aria-hidden="true"
203
+ role="img"
204
+ width="1em"
205
+ height="1em"
206
+ >
207
+ <path
208
+ 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"
209
+ />
210
+ </svg>
151
211
  </span>
152
212
  <h2 class="pf-v6-c-notification-drawer__list-item-header-title">
153
213
  <span class="pf-v6-screen-reader">Warning notification:</span>
@@ -179,7 +239,19 @@ cssPrefix: pf-v6-c-notification-drawer
179
239
  >
180
240
  <div class="pf-v6-c-notification-drawer__list-item-header">
181
241
  <span class="pf-v6-c-notification-drawer__list-item-header-icon">
182
- <i class="fas fa-check-circle" aria-hidden="true"></i>
242
+ <svg
243
+ class="pf-v6-svg"
244
+ viewBox="0 0 32 32"
245
+ fill="currentColor"
246
+ aria-hidden="true"
247
+ role="img"
248
+ width="1em"
249
+ height="1em"
250
+ >
251
+ <path
252
+ d="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"
253
+ />
254
+ </svg>
183
255
  </span>
184
256
  <h2 class="pf-v6-c-notification-drawer__list-item-header-title">
185
257
  <span class="pf-v6-screen-reader">Success notification:</span>
@@ -211,7 +283,19 @@ cssPrefix: pf-v6-c-notification-drawer
211
283
  >
212
284
  <div class="pf-v6-c-notification-drawer__list-item-header">
213
285
  <span class="pf-v6-c-notification-drawer__list-item-header-icon">
214
- <i class="fas fa-check-circle" aria-hidden="true"></i>
286
+ <svg
287
+ class="pf-v6-svg"
288
+ viewBox="0 0 32 32"
289
+ fill="currentColor"
290
+ aria-hidden="true"
291
+ role="img"
292
+ width="1em"
293
+ height="1em"
294
+ >
295
+ <path
296
+ 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"
297
+ />
298
+ </svg>
215
299
  </span>
216
300
  <h2
217
301
  class="pf-v6-c-notification-drawer__list-item-header-title pf-m-truncate"
@@ -245,7 +329,19 @@ cssPrefix: pf-v6-c-notification-drawer
245
329
  >
246
330
  <div class="pf-v6-c-notification-drawer__list-item-header">
247
331
  <span class="pf-v6-c-notification-drawer__list-item-header-icon">
248
- <i class="fas fa-check-circle" aria-hidden="true"></i>
332
+ <svg
333
+ class="pf-v6-svg"
334
+ viewBox="0 0 32 32"
335
+ fill="currentColor"
336
+ aria-hidden="true"
337
+ role="img"
338
+ width="1em"
339
+ height="1em"
340
+ >
341
+ <path
342
+ 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"
343
+ />
344
+ </svg>
249
345
  </span>
250
346
  <h2
251
347
  class="pf-v6-c-notification-drawer__list-item-header-title pf-m-truncate"
@@ -278,7 +374,19 @@ cssPrefix: pf-v6-c-notification-drawer
278
374
  <li class="pf-v6-c-notification-drawer__list-item pf-m-read pf-m-success">
279
375
  <div class="pf-v6-c-notification-drawer__list-item-header">
280
376
  <span class="pf-v6-c-notification-drawer__list-item-header-icon">
281
- <i class="fas fa-check-circle" aria-hidden="true"></i>
377
+ <svg
378
+ class="pf-v6-svg"
379
+ viewBox="0 0 32 32"
380
+ fill="currentColor"
381
+ aria-hidden="true"
382
+ role="img"
383
+ width="1em"
384
+ height="1em"
385
+ >
386
+ <path
387
+ 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"
388
+ />
389
+ </svg>
282
390
  </span>
283
391
  <h2 class="pf-v6-c-notification-drawer__list-item-header-title">
284
392
  <span class="pf-v6-screen-reader">Success notification:</span>
@@ -331,7 +439,19 @@ cssPrefix: pf-v6-c-notification-drawer
331
439
  aria-label="Close"
332
440
  >
333
441
  <span class="pf-v6-c-button__icon">
334
- <i class="fas fa-times" aria-hidden="true"></i>
442
+ <svg
443
+ class="pf-v6-svg"
444
+ viewBox="0 0 20 20"
445
+ fill="currentColor"
446
+ aria-hidden="true"
447
+ role="img"
448
+ width="1em"
449
+ height="1em"
450
+ >
451
+ <path
452
+ 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"
453
+ />
454
+ </svg>
335
455
  </span>
336
456
  </button>
337
457
  </div>
@@ -352,7 +472,19 @@ cssPrefix: pf-v6-c-notification-drawer
352
472
  <span class="pf-v6-c-badge pf-m-unread">2</span>
353
473
  </div>
354
474
  <span class="pf-v6-c-notification-drawer__group-toggle-icon">
355
- <i class="fas fa-angle-right" aria-hidden="true"></i>
475
+ <svg
476
+ class="pf-v6-svg"
477
+ viewBox="0 0 20 20"
478
+ fill="currentColor"
479
+ aria-hidden="true"
480
+ role="img"
481
+ width="1em"
482
+ height="1em"
483
+ >
484
+ <path
485
+ 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"
486
+ />
487
+ </svg>
356
488
  </span>
357
489
  </button>
358
490
  </h1>
@@ -363,7 +495,19 @@ cssPrefix: pf-v6-c-notification-drawer
363
495
  >
364
496
  <div class="pf-v6-c-notification-drawer__list-item-header">
365
497
  <span class="pf-v6-c-notification-drawer__list-item-header-icon">
366
- <i class="fas fa-info-circle" aria-hidden="true"></i>
498
+ <svg
499
+ class="pf-v6-svg"
500
+ viewBox="0 0 32 32"
501
+ fill="currentColor"
502
+ aria-hidden="true"
503
+ role="img"
504
+ width="1em"
505
+ height="1em"
506
+ >
507
+ <path
508
+ 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"
509
+ />
510
+ </svg>
367
511
  </span>
368
512
  <h2 class="pf-v6-c-notification-drawer__list-item-header-title">
369
513
  <span class="pf-v6-screen-reader">Info notification:</span>
@@ -398,7 +542,19 @@ cssPrefix: pf-v6-c-notification-drawer
398
542
  >
399
543
  <div class="pf-v6-c-notification-drawer__list-item-header">
400
544
  <span class="pf-v6-c-notification-drawer__list-item-header-icon">
401
- <i class="fas fa-arrow-circle-up" aria-hidden="true"></i>
545
+ <svg
546
+ class="pf-v6-svg"
547
+ viewBox="0 0 32 32"
548
+ fill="currentColor"
549
+ aria-hidden="true"
550
+ role="img"
551
+ width="1em"
552
+ height="1em"
553
+ >
554
+ <path
555
+ 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"
556
+ />
557
+ </svg>
402
558
  </span>
403
559
  <h2 class="pf-v6-c-notification-drawer__list-item-header-title">
404
560
  <span class="pf-v6-screen-reader">Custom notification:</span>
@@ -433,7 +589,19 @@ cssPrefix: pf-v6-c-notification-drawer
433
589
  >
434
590
  <div class="pf-v6-c-notification-drawer__list-item-header">
435
591
  <span class="pf-v6-c-notification-drawer__list-item-header-icon">
436
- <i class="fas fa-arrow-circle-up" aria-hidden="true"></i>
592
+ <svg
593
+ class="pf-v6-svg"
594
+ viewBox="0 0 32 32"
595
+ fill="currentColor"
596
+ aria-hidden="true"
597
+ role="img"
598
+ width="1em"
599
+ height="1em"
600
+ >
601
+ <path
602
+ 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"
603
+ />
604
+ </svg>
437
605
  </span>
438
606
  <h2 class="pf-v6-c-notification-drawer__list-item-header-title">
439
607
  <span class="pf-v6-screen-reader">Custom notification:</span>
@@ -466,7 +634,19 @@ cssPrefix: pf-v6-c-notification-drawer
466
634
  >
467
635
  <div class="pf-v6-c-notification-drawer__list-item-header">
468
636
  <span class="pf-v6-c-notification-drawer__list-item-header-icon">
469
- <i class="fas fa-exclamation-triangle" aria-hidden="true"></i>
637
+ <svg
638
+ class="pf-v6-svg"
639
+ viewBox="0 0 32 32"
640
+ fill="currentColor"
641
+ aria-hidden="true"
642
+ role="img"
643
+ width="1em"
644
+ height="1em"
645
+ >
646
+ <path
647
+ d="m31.874 28.514-15.011-27a1.001 1.001 0 0 0-1.748 0l-15.011 27A1 1 0 0 0 .978 30H31a1 1 0 0 0 .874-1.486ZM14.5 12a1.5 1.5 0 0 1 3 0v5a1.5 1.5 0 0 1-3 0v-5ZM16 26.001a2 2 0 1 1-.001-3.999A2 2 0 0 1 16 26.001Z"
648
+ />
649
+ </svg>
470
650
  </span>
471
651
  <h2 class="pf-v6-c-notification-drawer__list-item-header-title">
472
652
  <span class="pf-v6-screen-reader">Warning notification:</span>
@@ -498,7 +678,19 @@ cssPrefix: pf-v6-c-notification-drawer
498
678
  >
499
679
  <div class="pf-v6-c-notification-drawer__list-item-header">
500
680
  <span class="pf-v6-c-notification-drawer__list-item-header-icon">
501
- <i class="fas fa-check-circle" aria-hidden="true"></i>
681
+ <svg
682
+ class="pf-v6-svg"
683
+ viewBox="0 0 32 32"
684
+ fill="currentColor"
685
+ aria-hidden="true"
686
+ role="img"
687
+ width="1em"
688
+ height="1em"
689
+ >
690
+ <path
691
+ 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"
692
+ />
693
+ </svg>
502
694
  </span>
503
695
  <h2 class="pf-v6-c-notification-drawer__list-item-header-title">
504
696
  <span class="pf-v6-screen-reader">Success notification:</span>
@@ -530,7 +722,19 @@ cssPrefix: pf-v6-c-notification-drawer
530
722
  >
531
723
  <div class="pf-v6-c-notification-drawer__list-item-header">
532
724
  <span class="pf-v6-c-notification-drawer__list-item-header-icon">
533
- <i class="fas fa-check-circle" aria-hidden="true"></i>
725
+ <svg
726
+ class="pf-v6-svg"
727
+ viewBox="0 0 32 32"
728
+ fill="currentColor"
729
+ aria-hidden="true"
730
+ role="img"
731
+ width="1em"
732
+ height="1em"
733
+ >
734
+ <path
735
+ 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"
736
+ />
737
+ </svg>
534
738
  </span>
535
739
  <h2
536
740
  class="pf-v6-c-notification-drawer__list-item-header-title pf-m-truncate"
@@ -564,7 +768,19 @@ cssPrefix: pf-v6-c-notification-drawer
564
768
  >
565
769
  <div class="pf-v6-c-notification-drawer__list-item-header">
566
770
  <span class="pf-v6-c-notification-drawer__list-item-header-icon">
567
- <i class="fas fa-check-circle" aria-hidden="true"></i>
771
+ <svg
772
+ class="pf-v6-svg"
773
+ viewBox="0 0 32 32"
774
+ fill="currentColor"
775
+ aria-hidden="true"
776
+ role="img"
777
+ width="1em"
778
+ height="1em"
779
+ >
780
+ <path
781
+ 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"
782
+ />
783
+ </svg>
568
784
  </span>
569
785
  <h2
570
786
  class="pf-v6-c-notification-drawer__list-item-header-title pf-m-truncate"
@@ -599,7 +815,19 @@ cssPrefix: pf-v6-c-notification-drawer
599
815
  >
600
816
  <div class="pf-v6-c-notification-drawer__list-item-header">
601
817
  <span class="pf-v6-c-notification-drawer__list-item-header-icon">
602
- <i class="fas fa-check-circle" aria-hidden="true"></i>
818
+ <svg
819
+ class="pf-v6-svg"
820
+ viewBox="0 0 32 32"
821
+ fill="currentColor"
822
+ aria-hidden="true"
823
+ role="img"
824
+ width="1em"
825
+ height="1em"
826
+ >
827
+ <path
828
+ 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"
829
+ />
830
+ </svg>
603
831
  </span>
604
832
  <h2 class="pf-v6-c-notification-drawer__list-item-header-title">
605
833
  <span class="pf-v6-screen-reader">Success notification:</span>
@@ -635,7 +863,19 @@ cssPrefix: pf-v6-c-notification-drawer
635
863
  <span class="pf-v6-c-badge pf-m-unread">2</span>
636
864
  </div>
637
865
  <span class="pf-v6-c-notification-drawer__group-toggle-icon">
638
- <i class="fas fa-angle-right" aria-hidden="true"></i>
866
+ <svg
867
+ class="pf-v6-svg"
868
+ viewBox="0 0 20 20"
869
+ fill="currentColor"
870
+ aria-hidden="true"
871
+ role="img"
872
+ width="1em"
873
+ height="1em"
874
+ >
875
+ <path
876
+ 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"
877
+ />
878
+ </svg>
639
879
  </span>
640
880
  </button>
641
881
  </h1>
@@ -646,7 +886,19 @@ cssPrefix: pf-v6-c-notification-drawer
646
886
  >
647
887
  <div class="pf-v6-c-notification-drawer__list-item-header">
648
888
  <span class="pf-v6-c-notification-drawer__list-item-header-icon">
649
- <i class="fas fa-info-circle" aria-hidden="true"></i>
889
+ <svg
890
+ class="pf-v6-svg"
891
+ viewBox="0 0 32 32"
892
+ fill="currentColor"
893
+ aria-hidden="true"
894
+ role="img"
895
+ width="1em"
896
+ height="1em"
897
+ >
898
+ <path
899
+ 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"
900
+ />
901
+ </svg>
650
902
  </span>
651
903
  <h2 class="pf-v6-c-notification-drawer__list-item-header-title">
652
904
  <span class="pf-v6-screen-reader">Info notification:</span>
@@ -681,7 +933,19 @@ cssPrefix: pf-v6-c-notification-drawer
681
933
  >
682
934
  <div class="pf-v6-c-notification-drawer__list-item-header">
683
935
  <span class="pf-v6-c-notification-drawer__list-item-header-icon">
684
- <i class="fas fa-arrow-circle-up" aria-hidden="true"></i>
936
+ <svg
937
+ class="pf-v6-svg"
938
+ viewBox="0 0 32 32"
939
+ fill="currentColor"
940
+ aria-hidden="true"
941
+ role="img"
942
+ width="1em"
943
+ height="1em"
944
+ >
945
+ <path
946
+ 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"
947
+ />
948
+ </svg>
685
949
  </span>
686
950
  <h2 class="pf-v6-c-notification-drawer__list-item-header-title">
687
951
  <span class="pf-v6-screen-reader">Custom notification:</span>
@@ -716,7 +980,19 @@ cssPrefix: pf-v6-c-notification-drawer
716
980
  >
717
981
  <div class="pf-v6-c-notification-drawer__list-item-header">
718
982
  <span class="pf-v6-c-notification-drawer__list-item-header-icon">
719
- <i class="fas fa-arrow-circle-up" aria-hidden="true"></i>
983
+ <svg
984
+ class="pf-v6-svg"
985
+ viewBox="0 0 32 32"
986
+ fill="currentColor"
987
+ aria-hidden="true"
988
+ role="img"
989
+ width="1em"
990
+ height="1em"
991
+ >
992
+ <path
993
+ 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"
994
+ />
995
+ </svg>
720
996
  </span>
721
997
  <h2 class="pf-v6-c-notification-drawer__list-item-header-title">
722
998
  <span class="pf-v6-screen-reader">Custom notification:</span>
@@ -749,7 +1025,19 @@ cssPrefix: pf-v6-c-notification-drawer
749
1025
  >
750
1026
  <div class="pf-v6-c-notification-drawer__list-item-header">
751
1027
  <span class="pf-v6-c-notification-drawer__list-item-header-icon">
752
- <i class="fas fa-exclamation-triangle" aria-hidden="true"></i>
1028
+ <svg
1029
+ class="pf-v6-svg"
1030
+ viewBox="0 0 32 32"
1031
+ fill="currentColor"
1032
+ aria-hidden="true"
1033
+ role="img"
1034
+ width="1em"
1035
+ height="1em"
1036
+ >
1037
+ <path
1038
+ 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"
1039
+ />
1040
+ </svg>
753
1041
  </span>
754
1042
  <h2 class="pf-v6-c-notification-drawer__list-item-header-title">
755
1043
  <span class="pf-v6-screen-reader">Warning notification:</span>
@@ -781,7 +1069,19 @@ cssPrefix: pf-v6-c-notification-drawer
781
1069
  >
782
1070
  <div class="pf-v6-c-notification-drawer__list-item-header">
783
1071
  <span class="pf-v6-c-notification-drawer__list-item-header-icon">
784
- <i class="fas fa-check-circle" aria-hidden="true"></i>
1072
+ <svg
1073
+ class="pf-v6-svg"
1074
+ viewBox="0 0 32 32"
1075
+ fill="currentColor"
1076
+ aria-hidden="true"
1077
+ role="img"
1078
+ width="1em"
1079
+ height="1em"
1080
+ >
1081
+ <path
1082
+ 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"
1083
+ />
1084
+ </svg>
785
1085
  </span>
786
1086
  <h2 class="pf-v6-c-notification-drawer__list-item-header-title">
787
1087
  <span class="pf-v6-screen-reader">Success notification:</span>
@@ -813,7 +1113,19 @@ cssPrefix: pf-v6-c-notification-drawer
813
1113
  >
814
1114
  <div class="pf-v6-c-notification-drawer__list-item-header">
815
1115
  <span class="pf-v6-c-notification-drawer__list-item-header-icon">
816
- <i class="fas fa-check-circle" aria-hidden="true"></i>
1116
+ <svg
1117
+ class="pf-v6-svg"
1118
+ viewBox="0 0 32 32"
1119
+ fill="currentColor"
1120
+ aria-hidden="true"
1121
+ role="img"
1122
+ width="1em"
1123
+ height="1em"
1124
+ >
1125
+ <path
1126
+ 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"
1127
+ />
1128
+ </svg>
817
1129
  </span>
818
1130
  <h2
819
1131
  class="pf-v6-c-notification-drawer__list-item-header-title pf-m-truncate"
@@ -847,7 +1159,19 @@ cssPrefix: pf-v6-c-notification-drawer
847
1159
  >
848
1160
  <div class="pf-v6-c-notification-drawer__list-item-header">
849
1161
  <span class="pf-v6-c-notification-drawer__list-item-header-icon">
850
- <i class="fas fa-check-circle" aria-hidden="true"></i>
1162
+ <svg
1163
+ class="pf-v6-svg"
1164
+ viewBox="0 0 32 32"
1165
+ fill="currentColor"
1166
+ aria-hidden="true"
1167
+ role="img"
1168
+ width="1em"
1169
+ height="1em"
1170
+ >
1171
+ <path
1172
+ 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"
1173
+ />
1174
+ </svg>
851
1175
  </span>
852
1176
  <h2
853
1177
  class="pf-v6-c-notification-drawer__list-item-header-title pf-m-truncate"
@@ -882,7 +1206,19 @@ cssPrefix: pf-v6-c-notification-drawer
882
1206
  >
883
1207
  <div class="pf-v6-c-notification-drawer__list-item-header">
884
1208
  <span class="pf-v6-c-notification-drawer__list-item-header-icon">
885
- <i class="fas fa-check-circle" aria-hidden="true"></i>
1209
+ <svg
1210
+ class="pf-v6-svg"
1211
+ viewBox="0 0 32 32"
1212
+ fill="currentColor"
1213
+ aria-hidden="true"
1214
+ role="img"
1215
+ width="1em"
1216
+ height="1em"
1217
+ >
1218
+ <path
1219
+ 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"
1220
+ />
1221
+ </svg>
886
1222
  </span>
887
1223
  <h2 class="pf-v6-c-notification-drawer__list-item-header-title">
888
1224
  <span class="pf-v6-screen-reader">Success notification:</span>
@@ -918,7 +1254,19 @@ cssPrefix: pf-v6-c-notification-drawer
918
1254
  <span class="pf-v6-c-badge pf-m-unread">3</span>
919
1255
  </div>
920
1256
  <span class="pf-v6-c-notification-drawer__group-toggle-icon">
921
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1257
+ <svg
1258
+ class="pf-v6-svg"
1259
+ viewBox="0 0 20 20"
1260
+ fill="currentColor"
1261
+ aria-hidden="true"
1262
+ role="img"
1263
+ width="1em"
1264
+ height="1em"
1265
+ >
1266
+ <path
1267
+ 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"
1268
+ />
1269
+ </svg>
922
1270
  </span>
923
1271
  </button>
924
1272
  </h1>
@@ -929,7 +1277,19 @@ cssPrefix: pf-v6-c-notification-drawer
929
1277
  >
930
1278
  <div class="pf-v6-c-notification-drawer__list-item-header">
931
1279
  <span class="pf-v6-c-notification-drawer__list-item-header-icon">
932
- <i class="fas fa-info-circle" aria-hidden="true"></i>
1280
+ <svg
1281
+ class="pf-v6-svg"
1282
+ viewBox="0 0 32 32"
1283
+ fill="currentColor"
1284
+ aria-hidden="true"
1285
+ role="img"
1286
+ width="1em"
1287
+ height="1em"
1288
+ >
1289
+ <path
1290
+ 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"
1291
+ />
1292
+ </svg>
933
1293
  </span>
934
1294
  <h2 class="pf-v6-c-notification-drawer__list-item-header-title">
935
1295
  <span class="pf-v6-screen-reader">Info notification:</span>
@@ -964,7 +1324,19 @@ cssPrefix: pf-v6-c-notification-drawer
964
1324
  >
965
1325
  <div class="pf-v6-c-notification-drawer__list-item-header">
966
1326
  <span class="pf-v6-c-notification-drawer__list-item-header-icon">
967
- <i class="fas fa-arrow-circle-up" aria-hidden="true"></i>
1327
+ <svg
1328
+ class="pf-v6-svg"
1329
+ viewBox="0 0 32 32"
1330
+ fill="currentColor"
1331
+ aria-hidden="true"
1332
+ role="img"
1333
+ width="1em"
1334
+ height="1em"
1335
+ >
1336
+ <path
1337
+ 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"
1338
+ />
1339
+ </svg>
968
1340
  </span>
969
1341
  <h2 class="pf-v6-c-notification-drawer__list-item-header-title">
970
1342
  <span class="pf-v6-screen-reader">Custom notification:</span>
@@ -999,7 +1371,19 @@ cssPrefix: pf-v6-c-notification-drawer
999
1371
  >
1000
1372
  <div class="pf-v6-c-notification-drawer__list-item-header">
1001
1373
  <span class="pf-v6-c-notification-drawer__list-item-header-icon">
1002
- <i class="fas fa-arrow-circle-up" aria-hidden="true"></i>
1374
+ <svg
1375
+ class="pf-v6-svg"
1376
+ viewBox="0 0 32 32"
1377
+ fill="currentColor"
1378
+ aria-hidden="true"
1379
+ role="img"
1380
+ width="1em"
1381
+ height="1em"
1382
+ >
1383
+ <path
1384
+ 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"
1385
+ />
1386
+ </svg>
1003
1387
  </span>
1004
1388
  <h2 class="pf-v6-c-notification-drawer__list-item-header-title">
1005
1389
  <span class="pf-v6-screen-reader">Custom notification:</span>
@@ -1032,7 +1416,19 @@ cssPrefix: pf-v6-c-notification-drawer
1032
1416
  >
1033
1417
  <div class="pf-v6-c-notification-drawer__list-item-header">
1034
1418
  <span class="pf-v6-c-notification-drawer__list-item-header-icon">
1035
- <i class="fas fa-exclamation-triangle" aria-hidden="true"></i>
1419
+ <svg
1420
+ class="pf-v6-svg"
1421
+ viewBox="0 0 32 32"
1422
+ fill="currentColor"
1423
+ aria-hidden="true"
1424
+ role="img"
1425
+ width="1em"
1426
+ height="1em"
1427
+ >
1428
+ <path
1429
+ 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"
1430
+ />
1431
+ </svg>
1036
1432
  </span>
1037
1433
  <h2 class="pf-v6-c-notification-drawer__list-item-header-title">
1038
1434
  <span class="pf-v6-screen-reader">Warning notification:</span>
@@ -1064,7 +1460,19 @@ cssPrefix: pf-v6-c-notification-drawer
1064
1460
  >
1065
1461
  <div class="pf-v6-c-notification-drawer__list-item-header">
1066
1462
  <span class="pf-v6-c-notification-drawer__list-item-header-icon">
1067
- <i class="fas fa-check-circle" aria-hidden="true"></i>
1463
+ <svg
1464
+ class="pf-v6-svg"
1465
+ viewBox="0 0 32 32"
1466
+ fill="currentColor"
1467
+ aria-hidden="true"
1468
+ role="img"
1469
+ width="1em"
1470
+ height="1em"
1471
+ >
1472
+ <path
1473
+ 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"
1474
+ />
1475
+ </svg>
1068
1476
  </span>
1069
1477
  <h2 class="pf-v6-c-notification-drawer__list-item-header-title">
1070
1478
  <span class="pf-v6-screen-reader">Success notification:</span>
@@ -1096,7 +1504,19 @@ cssPrefix: pf-v6-c-notification-drawer
1096
1504
  >
1097
1505
  <div class="pf-v6-c-notification-drawer__list-item-header">
1098
1506
  <span class="pf-v6-c-notification-drawer__list-item-header-icon">
1099
- <i class="fas fa-check-circle" aria-hidden="true"></i>
1507
+ <svg
1508
+ class="pf-v6-svg"
1509
+ viewBox="0 0 32 32"
1510
+ fill="currentColor"
1511
+ aria-hidden="true"
1512
+ role="img"
1513
+ width="1em"
1514
+ height="1em"
1515
+ >
1516
+ <path
1517
+ 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"
1518
+ />
1519
+ </svg>
1100
1520
  </span>
1101
1521
  <h2
1102
1522
  class="pf-v6-c-notification-drawer__list-item-header-title pf-m-truncate"
@@ -1130,7 +1550,19 @@ cssPrefix: pf-v6-c-notification-drawer
1130
1550
  >
1131
1551
  <div class="pf-v6-c-notification-drawer__list-item-header">
1132
1552
  <span class="pf-v6-c-notification-drawer__list-item-header-icon">
1133
- <i class="fas fa-check-circle" aria-hidden="true"></i>
1553
+ <svg
1554
+ class="pf-v6-svg"
1555
+ viewBox="0 0 32 32"
1556
+ fill="currentColor"
1557
+ aria-hidden="true"
1558
+ role="img"
1559
+ width="1em"
1560
+ height="1em"
1561
+ >
1562
+ <path
1563
+ 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"
1564
+ />
1565
+ </svg>
1134
1566
  </span>
1135
1567
  <h2
1136
1568
  class="pf-v6-c-notification-drawer__list-item-header-title pf-m-truncate"
@@ -1165,7 +1597,19 @@ cssPrefix: pf-v6-c-notification-drawer
1165
1597
  >
1166
1598
  <div class="pf-v6-c-notification-drawer__list-item-header">
1167
1599
  <span class="pf-v6-c-notification-drawer__list-item-header-icon">
1168
- <i class="fas fa-check-circle" aria-hidden="true"></i>
1600
+ <svg
1601
+ class="pf-v6-svg"
1602
+ viewBox="0 0 32 32"
1603
+ fill="currentColor"
1604
+ aria-hidden="true"
1605
+ role="img"
1606
+ width="1em"
1607
+ height="1em"
1608
+ >
1609
+ <path
1610
+ 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"
1611
+ />
1612
+ </svg>
1169
1613
  </span>
1170
1614
  <h2 class="pf-v6-c-notification-drawer__list-item-header-title">
1171
1615
  <span class="pf-v6-screen-reader">Success notification:</span>
@@ -1201,7 +1645,19 @@ cssPrefix: pf-v6-c-notification-drawer
1201
1645
  <span class="pf-v6-c-badge pf-m-unread">2</span>
1202
1646
  </div>
1203
1647
  <span class="pf-v6-c-notification-drawer__group-toggle-icon">
1204
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1648
+ <svg
1649
+ class="pf-v6-svg"
1650
+ viewBox="0 0 20 20"
1651
+ fill="currentColor"
1652
+ aria-hidden="true"
1653
+ role="img"
1654
+ width="1em"
1655
+ height="1em"
1656
+ >
1657
+ <path
1658
+ 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"
1659
+ />
1660
+ </svg>
1205
1661
  </span>
1206
1662
  </button>
1207
1663
  </h1>
@@ -1212,7 +1668,19 @@ cssPrefix: pf-v6-c-notification-drawer
1212
1668
  >
1213
1669
  <div class="pf-v6-c-notification-drawer__list-item-header">
1214
1670
  <span class="pf-v6-c-notification-drawer__list-item-header-icon">
1215
- <i class="fas fa-info-circle" aria-hidden="true"></i>
1671
+ <svg
1672
+ class="pf-v6-svg"
1673
+ viewBox="0 0 32 32"
1674
+ fill="currentColor"
1675
+ aria-hidden="true"
1676
+ role="img"
1677
+ width="1em"
1678
+ height="1em"
1679
+ >
1680
+ <path
1681
+ 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"
1682
+ />
1683
+ </svg>
1216
1684
  </span>
1217
1685
  <h2 class="pf-v6-c-notification-drawer__list-item-header-title">
1218
1686
  <span class="pf-v6-screen-reader">Info notification:</span>
@@ -1247,7 +1715,19 @@ cssPrefix: pf-v6-c-notification-drawer
1247
1715
  >
1248
1716
  <div class="pf-v6-c-notification-drawer__list-item-header">
1249
1717
  <span class="pf-v6-c-notification-drawer__list-item-header-icon">
1250
- <i class="fas fa-arrow-circle-up" aria-hidden="true"></i>
1718
+ <svg
1719
+ class="pf-v6-svg"
1720
+ viewBox="0 0 32 32"
1721
+ fill="currentColor"
1722
+ aria-hidden="true"
1723
+ role="img"
1724
+ width="1em"
1725
+ height="1em"
1726
+ >
1727
+ <path
1728
+ 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"
1729
+ />
1730
+ </svg>
1251
1731
  </span>
1252
1732
  <h2 class="pf-v6-c-notification-drawer__list-item-header-title">
1253
1733
  <span class="pf-v6-screen-reader">Custom notification:</span>
@@ -1282,7 +1762,19 @@ cssPrefix: pf-v6-c-notification-drawer
1282
1762
  >
1283
1763
  <div class="pf-v6-c-notification-drawer__list-item-header">
1284
1764
  <span class="pf-v6-c-notification-drawer__list-item-header-icon">
1285
- <i class="fas fa-arrow-circle-up" aria-hidden="true"></i>
1765
+ <svg
1766
+ class="pf-v6-svg"
1767
+ viewBox="0 0 32 32"
1768
+ fill="currentColor"
1769
+ aria-hidden="true"
1770
+ role="img"
1771
+ width="1em"
1772
+ height="1em"
1773
+ >
1774
+ <path
1775
+ 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"
1776
+ />
1777
+ </svg>
1286
1778
  </span>
1287
1779
  <h2 class="pf-v6-c-notification-drawer__list-item-header-title">
1288
1780
  <span class="pf-v6-screen-reader">Custom notification:</span>
@@ -1315,7 +1807,19 @@ cssPrefix: pf-v6-c-notification-drawer
1315
1807
  >
1316
1808
  <div class="pf-v6-c-notification-drawer__list-item-header">
1317
1809
  <span class="pf-v6-c-notification-drawer__list-item-header-icon">
1318
- <i class="fas fa-exclamation-triangle" aria-hidden="true"></i>
1810
+ <svg
1811
+ class="pf-v6-svg"
1812
+ viewBox="0 0 32 32"
1813
+ fill="currentColor"
1814
+ aria-hidden="true"
1815
+ role="img"
1816
+ width="1em"
1817
+ height="1em"
1818
+ >
1819
+ <path
1820
+ 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"
1821
+ />
1822
+ </svg>
1319
1823
  </span>
1320
1824
  <h2 class="pf-v6-c-notification-drawer__list-item-header-title">
1321
1825
  <span class="pf-v6-screen-reader">Warning notification:</span>
@@ -1347,7 +1851,19 @@ cssPrefix: pf-v6-c-notification-drawer
1347
1851
  >
1348
1852
  <div class="pf-v6-c-notification-drawer__list-item-header">
1349
1853
  <span class="pf-v6-c-notification-drawer__list-item-header-icon">
1350
- <i class="fas fa-check-circle" aria-hidden="true"></i>
1854
+ <svg
1855
+ class="pf-v6-svg"
1856
+ viewBox="0 0 32 32"
1857
+ fill="currentColor"
1858
+ aria-hidden="true"
1859
+ role="img"
1860
+ width="1em"
1861
+ height="1em"
1862
+ >
1863
+ <path
1864
+ 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"
1865
+ />
1866
+ </svg>
1351
1867
  </span>
1352
1868
  <h2 class="pf-v6-c-notification-drawer__list-item-header-title">
1353
1869
  <span class="pf-v6-screen-reader">Success notification:</span>
@@ -1379,7 +1895,19 @@ cssPrefix: pf-v6-c-notification-drawer
1379
1895
  >
1380
1896
  <div class="pf-v6-c-notification-drawer__list-item-header">
1381
1897
  <span class="pf-v6-c-notification-drawer__list-item-header-icon">
1382
- <i class="fas fa-check-circle" aria-hidden="true"></i>
1898
+ <svg
1899
+ class="pf-v6-svg"
1900
+ viewBox="0 0 32 32"
1901
+ fill="currentColor"
1902
+ aria-hidden="true"
1903
+ role="img"
1904
+ width="1em"
1905
+ height="1em"
1906
+ >
1907
+ <path
1908
+ 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"
1909
+ />
1910
+ </svg>
1383
1911
  </span>
1384
1912
  <h2
1385
1913
  class="pf-v6-c-notification-drawer__list-item-header-title pf-m-truncate"
@@ -1413,7 +1941,19 @@ cssPrefix: pf-v6-c-notification-drawer
1413
1941
  >
1414
1942
  <div class="pf-v6-c-notification-drawer__list-item-header">
1415
1943
  <span class="pf-v6-c-notification-drawer__list-item-header-icon">
1416
- <i class="fas fa-check-circle" aria-hidden="true"></i>
1944
+ <svg
1945
+ class="pf-v6-svg"
1946
+ viewBox="0 0 32 32"
1947
+ fill="currentColor"
1948
+ aria-hidden="true"
1949
+ role="img"
1950
+ width="1em"
1951
+ height="1em"
1952
+ >
1953
+ <path
1954
+ 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"
1955
+ />
1956
+ </svg>
1417
1957
  </span>
1418
1958
  <h2
1419
1959
  class="pf-v6-c-notification-drawer__list-item-header-title pf-m-truncate"
@@ -1448,7 +1988,19 @@ cssPrefix: pf-v6-c-notification-drawer
1448
1988
  >
1449
1989
  <div class="pf-v6-c-notification-drawer__list-item-header">
1450
1990
  <span class="pf-v6-c-notification-drawer__list-item-header-icon">
1451
- <i class="fas fa-check-circle" aria-hidden="true"></i>
1991
+ <svg
1992
+ class="pf-v6-svg"
1993
+ viewBox="0 0 32 32"
1994
+ fill="currentColor"
1995
+ aria-hidden="true"
1996
+ role="img"
1997
+ width="1em"
1998
+ height="1em"
1999
+ >
2000
+ <path
2001
+ 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"
2002
+ />
2003
+ </svg>
1452
2004
  </span>
1453
2005
  <h2 class="pf-v6-c-notification-drawer__list-item-header-title">
1454
2006
  <span class="pf-v6-screen-reader">Success notification:</span>