@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/Alert/examples/Alert.md CHANGED
@@ -9,7 +9,19 @@ cssPrefix: ['pf-v6-c-alert','pf-v6-c-alert-group']
9
9
  ```html
10
10
  <div class="pf-v6-c-alert pf-m-custom" aria-label="Custom alert">
11
11
  <div class="pf-v6-c-alert__icon">
12
- <i class="fas fa-fw fa-bell" aria-hidden="true"></i>
12
+ <svg
13
+ class="pf-v6-svg"
14
+ viewBox="0 0 32 32"
15
+ fill="currentColor"
16
+ aria-hidden="true"
17
+ role="img"
18
+ width="1em"
19
+ height="1em"
20
+ >
21
+ <path
22
+ 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"
23
+ />
24
+ </svg>
13
25
  </div>
14
26
  <p class="pf-v6-c-alert__title">
15
27
  <span class="pf-v6-screen-reader">Custom alert:</span>
@@ -19,7 +31,19 @@ cssPrefix: ['pf-v6-c-alert','pf-v6-c-alert-group']
19
31
  <br />
20
32
  <div class="pf-v6-c-alert pf-m-info" aria-label="Information alert">
21
33
  <div class="pf-v6-c-alert__icon">
22
- <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
34
+ <svg
35
+ class="pf-v6-svg"
36
+ viewBox="0 0 32 32"
37
+ fill="currentColor"
38
+ aria-hidden="true"
39
+ role="img"
40
+ width="1em"
41
+ height="1em"
42
+ >
43
+ <path
44
+ 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"
45
+ />
46
+ </svg>
23
47
  </div>
24
48
  <p class="pf-v6-c-alert__title">
25
49
  <span class="pf-v6-screen-reader">Info alert:</span>
@@ -29,7 +53,19 @@ cssPrefix: ['pf-v6-c-alert','pf-v6-c-alert-group']
29
53
  <br />
30
54
  <div class="pf-v6-c-alert pf-m-success" aria-label="Success alert">
31
55
  <div class="pf-v6-c-alert__icon">
32
- <i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
56
+ <svg
57
+ class="pf-v6-svg"
58
+ viewBox="0 0 32 32"
59
+ fill="currentColor"
60
+ aria-hidden="true"
61
+ role="img"
62
+ width="1em"
63
+ height="1em"
64
+ >
65
+ <path
66
+ 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"
67
+ />
68
+ </svg>
33
69
  </div>
34
70
  <p class="pf-v6-c-alert__title">
35
71
  <span class="pf-v6-screen-reader">Success alert:</span>
@@ -39,7 +75,19 @@ cssPrefix: ['pf-v6-c-alert','pf-v6-c-alert-group']
39
75
  <br />
40
76
  <div class="pf-v6-c-alert pf-m-warning" aria-label="Warning alert">
41
77
  <div class="pf-v6-c-alert__icon">
42
- <i class="fas fa-fw fa-exclamation-triangle" aria-hidden="true"></i>
78
+ <svg
79
+ class="pf-v6-svg"
80
+ viewBox="0 0 32 32"
81
+ fill="currentColor"
82
+ aria-hidden="true"
83
+ role="img"
84
+ width="1em"
85
+ height="1em"
86
+ >
87
+ <path
88
+ 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"
89
+ />
90
+ </svg>
43
91
  </div>
44
92
  <p class="pf-v6-c-alert__title">
45
93
  <span class="pf-v6-screen-reader">Warning alert:</span>
@@ -49,7 +97,19 @@ cssPrefix: ['pf-v6-c-alert','pf-v6-c-alert-group']
49
97
  <br />
50
98
  <div class="pf-v6-c-alert pf-m-danger" aria-label="Danger alert">
51
99
  <div class="pf-v6-c-alert__icon">
52
- <i class="fas fa-fw fa-exclamation-circle" 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="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm-1.5 8a1.5 1.5 0 1 1 3 0v7a1.5 1.5 0 1 1-3 0V9ZM16 25.001a2 2 0 1 1-.001-3.999A2 2 0 0 1 16 25.001Z"
111
+ />
112
+ </svg>
53
113
  </div>
54
114
  <p class="pf-v6-c-alert__title">
55
115
  <span class="pf-v6-screen-reader">Danger alert:</span>
@@ -64,7 +124,19 @@ cssPrefix: ['pf-v6-c-alert','pf-v6-c-alert-group']
64
124
  ```html
65
125
  <div class="pf-v6-c-alert pf-m-success" aria-label="Success alert">
66
126
  <div class="pf-v6-c-alert__icon">
67
- <i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
127
+ <svg
128
+ class="pf-v6-svg"
129
+ viewBox="0 0 32 32"
130
+ fill="currentColor"
131
+ aria-hidden="true"
132
+ role="img"
133
+ width="1em"
134
+ height="1em"
135
+ >
136
+ <path
137
+ 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"
138
+ />
139
+ </svg>
68
140
  </div>
69
141
  <p class="pf-v6-c-alert__title">
70
142
  <span class="pf-v6-screen-reader">Success alert:</span>
@@ -77,7 +149,19 @@ cssPrefix: ['pf-v6-c-alert','pf-v6-c-alert-group']
77
149
  aria-label="Close success alert: Success alert title"
78
150
  >
79
151
  <span class="pf-v6-c-button__icon">
80
- <i class="fas fa-times" aria-hidden="true"></i>
152
+ <svg
153
+ class="pf-v6-svg"
154
+ viewBox="0 0 20 20"
155
+ fill="currentColor"
156
+ aria-hidden="true"
157
+ role="img"
158
+ width="1em"
159
+ height="1em"
160
+ >
161
+ <path
162
+ 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"
163
+ />
164
+ </svg>
81
165
  </span>
82
166
  </button>
83
167
  </div>
@@ -96,7 +180,19 @@ cssPrefix: ['pf-v6-c-alert','pf-v6-c-alert-group']
96
180
  <br />
97
181
  <div class="pf-v6-c-alert pf-m-success" aria-label="Success alert">
98
182
  <div class="pf-v6-c-alert__icon">
99
- <i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
183
+ <svg
184
+ class="pf-v6-svg"
185
+ viewBox="0 0 32 32"
186
+ fill="currentColor"
187
+ aria-hidden="true"
188
+ role="img"
189
+ width="1em"
190
+ height="1em"
191
+ >
192
+ <path
193
+ 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"
194
+ />
195
+ </svg>
100
196
  </div>
101
197
  <p class="pf-v6-c-alert__title">
102
198
  <span class="pf-v6-screen-reader">Success alert:</span>
@@ -109,7 +205,19 @@ cssPrefix: ['pf-v6-c-alert','pf-v6-c-alert-group']
109
205
  aria-label="Close success alert: Success alert title"
110
206
  >
111
207
  <span class="pf-v6-c-button__icon">
112
- <i class="fas fa-times" aria-hidden="true"></i>
208
+ <svg
209
+ class="pf-v6-svg"
210
+ viewBox="0 0 20 20"
211
+ fill="currentColor"
212
+ aria-hidden="true"
213
+ role="img"
214
+ width="1em"
215
+ height="1em"
216
+ >
217
+ <path
218
+ 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"
219
+ />
220
+ </svg>
113
221
  </span>
114
222
  </button>
115
223
  </div>
@@ -123,7 +231,19 @@ cssPrefix: ['pf-v6-c-alert','pf-v6-c-alert-group']
123
231
  <br />
124
232
  <div class="pf-v6-c-alert pf-m-success" aria-label="Success alert">
125
233
  <div class="pf-v6-c-alert__icon">
126
- <i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
234
+ <svg
235
+ class="pf-v6-svg"
236
+ viewBox="0 0 32 32"
237
+ fill="currentColor"
238
+ aria-hidden="true"
239
+ role="img"
240
+ width="1em"
241
+ height="1em"
242
+ >
243
+ <path
244
+ 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"
245
+ />
246
+ </svg>
127
247
  </div>
128
248
  <p class="pf-v6-c-alert__title">
129
249
  <span class="pf-v6-screen-reader">Success alert:</span>
@@ -136,7 +256,19 @@ cssPrefix: ['pf-v6-c-alert','pf-v6-c-alert-group']
136
256
  aria-label="Close success alert: Success alert title"
137
257
  >
138
258
  <span class="pf-v6-c-button__icon">
139
- <i class="fas fa-times" aria-hidden="true"></i>
259
+ <svg
260
+ class="pf-v6-svg"
261
+ viewBox="0 0 20 20"
262
+ fill="currentColor"
263
+ aria-hidden="true"
264
+ role="img"
265
+ width="1em"
266
+ height="1em"
267
+ >
268
+ <path
269
+ 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"
270
+ />
271
+ </svg>
140
272
  </span>
141
273
  </button>
142
274
  </div>
@@ -152,7 +284,19 @@ cssPrefix: ['pf-v6-c-alert','pf-v6-c-alert-group']
152
284
  <br />
153
285
  <div class="pf-v6-c-alert pf-m-success" aria-label="Success alert">
154
286
  <div class="pf-v6-c-alert__icon">
155
- <i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
287
+ <svg
288
+ class="pf-v6-svg"
289
+ viewBox="0 0 32 32"
290
+ fill="currentColor"
291
+ aria-hidden="true"
292
+ role="img"
293
+ width="1em"
294
+ height="1em"
295
+ >
296
+ <path
297
+ 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"
298
+ />
299
+ </svg>
156
300
  </div>
157
301
  <p class="pf-v6-c-alert__title">
158
302
  <span class="pf-v6-screen-reader">Success alert:</span>
@@ -165,7 +309,19 @@ cssPrefix: ['pf-v6-c-alert','pf-v6-c-alert-group']
165
309
  aria-label="Close success alert: Success alert title"
166
310
  >
167
311
  <span class="pf-v6-c-button__icon">
168
- <i class="fas fa-times" aria-hidden="true"></i>
312
+ <svg
313
+ class="pf-v6-svg"
314
+ viewBox="0 0 20 20"
315
+ fill="currentColor"
316
+ aria-hidden="true"
317
+ role="img"
318
+ width="1em"
319
+ height="1em"
320
+ >
321
+ <path
322
+ 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"
323
+ />
324
+ </svg>
169
325
  </span>
170
326
  </button>
171
327
  </div>
@@ -173,7 +329,19 @@ cssPrefix: ['pf-v6-c-alert','pf-v6-c-alert-group']
173
329
  <br />
174
330
  <div class="pf-v6-c-alert pf-m-success" aria-label="Success alert">
175
331
  <div class="pf-v6-c-alert__icon">
176
- <i class="fas fa-fw 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>
177
345
  </div>
178
346
  <p class="pf-v6-c-alert__title">
179
347
  <span class="pf-v6-screen-reader">Success alert:</span>
@@ -186,7 +354,19 @@ cssPrefix: ['pf-v6-c-alert','pf-v6-c-alert-group']
186
354
  aria-label="Success alert with title truncation"
187
355
  >
188
356
  <div class="pf-v6-c-alert__icon">
189
- <i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
357
+ <svg
358
+ class="pf-v6-svg"
359
+ viewBox="0 0 32 32"
360
+ fill="currentColor"
361
+ aria-hidden="true"
362
+ role="img"
363
+ width="1em"
364
+ height="1em"
365
+ >
366
+ <path
367
+ 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"
368
+ />
369
+ </svg>
190
370
  </div>
191
371
  <p class="pf-v6-c-alert__title pf-m-truncate">
192
372
  <span class="pf-v6-screen-reader">Success alert:</span>
@@ -202,7 +382,19 @@ cssPrefix: ['pf-v6-c-alert','pf-v6-c-alert-group']
202
382
  aria-label="Success alert with title truncation at 2 lines"
203
383
  >
204
384
  <div class="pf-v6-c-alert__icon">
205
- <i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
385
+ <svg
386
+ class="pf-v6-svg"
387
+ viewBox="0 0 32 32"
388
+ fill="currentColor"
389
+ aria-hidden="true"
390
+ role="img"
391
+ width="1em"
392
+ height="1em"
393
+ >
394
+ <path
395
+ 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"
396
+ />
397
+ </svg>
206
398
  </div>
207
399
  <p
208
400
  class="pf-v6-c-alert__title pf-m-truncate"
@@ -226,7 +418,19 @@ cssPrefix: ['pf-v6-c-alert','pf-v6-c-alert-group']
226
418
  aria-label="Inline custom alert"
227
419
  >
228
420
  <div class="pf-v6-c-alert__icon">
229
- <i class="fas fa-fw fa-bell" aria-hidden="true"></i>
421
+ <svg
422
+ class="pf-v6-svg"
423
+ viewBox="0 0 32 32"
424
+ fill="currentColor"
425
+ aria-hidden="true"
426
+ role="img"
427
+ width="1em"
428
+ height="1em"
429
+ >
430
+ <path
431
+ 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"
432
+ />
433
+ </svg>
230
434
  </div>
231
435
  <p class="pf-v6-c-alert__title">
232
436
  <span class="pf-v6-screen-reader">Custom inline alert:</span>
@@ -239,7 +443,19 @@ cssPrefix: ['pf-v6-c-alert','pf-v6-c-alert-group']
239
443
  aria-label="Inline information alert"
240
444
  >
241
445
  <div class="pf-v6-c-alert__icon">
242
- <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
446
+ <svg
447
+ class="pf-v6-svg"
448
+ viewBox="0 0 32 32"
449
+ fill="currentColor"
450
+ aria-hidden="true"
451
+ role="img"
452
+ width="1em"
453
+ height="1em"
454
+ >
455
+ <path
456
+ 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"
457
+ />
458
+ </svg>
243
459
  </div>
244
460
  <p class="pf-v6-c-alert__title">
245
461
  <span class="pf-v6-screen-reader">Info alert:</span>
@@ -252,7 +468,19 @@ cssPrefix: ['pf-v6-c-alert','pf-v6-c-alert-group']
252
468
  aria-label="Inline success alert"
253
469
  >
254
470
  <div class="pf-v6-c-alert__icon">
255
- <i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
471
+ <svg
472
+ class="pf-v6-svg"
473
+ viewBox="0 0 32 32"
474
+ fill="currentColor"
475
+ aria-hidden="true"
476
+ role="img"
477
+ width="1em"
478
+ height="1em"
479
+ >
480
+ <path
481
+ 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"
482
+ />
483
+ </svg>
256
484
  </div>
257
485
  <p class="pf-v6-c-alert__title">
258
486
  <span class="pf-v6-screen-reader">Success alert:</span>
@@ -265,7 +493,19 @@ cssPrefix: ['pf-v6-c-alert','pf-v6-c-alert-group']
265
493
  aria-label="Inline warning alert"
266
494
  >
267
495
  <div class="pf-v6-c-alert__icon">
268
- <i class="fas fa-fw fa-exclamation-triangle" aria-hidden="true"></i>
496
+ <svg
497
+ class="pf-v6-svg"
498
+ viewBox="0 0 32 32"
499
+ fill="currentColor"
500
+ aria-hidden="true"
501
+ role="img"
502
+ width="1em"
503
+ height="1em"
504
+ >
505
+ <path
506
+ 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"
507
+ />
508
+ </svg>
269
509
  </div>
270
510
  <p class="pf-v6-c-alert__title">
271
511
  <span class="pf-v6-screen-reader">Warning alert:</span>
@@ -278,7 +518,19 @@ cssPrefix: ['pf-v6-c-alert','pf-v6-c-alert-group']
278
518
  aria-label="Inline danger alert"
279
519
  >
280
520
  <div class="pf-v6-c-alert__icon">
281
- <i class="fas fa-fw fa-exclamation-circle" aria-hidden="true"></i>
521
+ <svg
522
+ class="pf-v6-svg"
523
+ viewBox="0 0 32 32"
524
+ fill="currentColor"
525
+ aria-hidden="true"
526
+ role="img"
527
+ width="1em"
528
+ height="1em"
529
+ >
530
+ <path
531
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm-1.5 8a1.5 1.5 0 1 1 3 0v7a1.5 1.5 0 1 1-3 0V9ZM16 25.001a2 2 0 1 1-.001-3.999A2 2 0 0 1 16 25.001Z"
532
+ />
533
+ </svg>
282
534
  </div>
283
535
  <p class="pf-v6-c-alert__title">
284
536
  <span class="pf-v6-screen-reader">Danger alert:</span>
@@ -293,7 +545,19 @@ cssPrefix: ['pf-v6-c-alert','pf-v6-c-alert-group']
293
545
  ```html
294
546
  <div class="pf-v6-c-alert pf-m-success pf-m-inline" aria-label="Success alert">
295
547
  <div class="pf-v6-c-alert__icon">
296
- <i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
548
+ <svg
549
+ class="pf-v6-svg"
550
+ viewBox="0 0 32 32"
551
+ fill="currentColor"
552
+ aria-hidden="true"
553
+ role="img"
554
+ width="1em"
555
+ height="1em"
556
+ >
557
+ <path
558
+ d="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"
559
+ />
560
+ </svg>
297
561
  </div>
298
562
  <p class="pf-v6-c-alert__title">
299
563
  <span class="pf-v6-screen-reader">Success alert:</span>
@@ -306,7 +570,19 @@ cssPrefix: ['pf-v6-c-alert','pf-v6-c-alert-group']
306
570
  aria-label="Close success alert: Success alert title"
307
571
  >
308
572
  <span class="pf-v6-c-button__icon">
309
- <i class="fas fa-times" aria-hidden="true"></i>
573
+ <svg
574
+ class="pf-v6-svg"
575
+ viewBox="0 0 20 20"
576
+ fill="currentColor"
577
+ aria-hidden="true"
578
+ role="img"
579
+ width="1em"
580
+ height="1em"
581
+ >
582
+ <path
583
+ 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"
584
+ />
585
+ </svg>
310
586
  </span>
311
587
  </button>
312
588
  </div>
@@ -325,7 +601,19 @@ cssPrefix: ['pf-v6-c-alert','pf-v6-c-alert-group']
325
601
  <br />
326
602
  <div class="pf-v6-c-alert pf-m-success pf-m-inline" aria-label="Success alert">
327
603
  <div class="pf-v6-c-alert__icon">
328
- <i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
604
+ <svg
605
+ class="pf-v6-svg"
606
+ viewBox="0 0 32 32"
607
+ fill="currentColor"
608
+ aria-hidden="true"
609
+ role="img"
610
+ width="1em"
611
+ height="1em"
612
+ >
613
+ <path
614
+ 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"
615
+ />
616
+ </svg>
329
617
  </div>
330
618
  <p class="pf-v6-c-alert__title">
331
619
  <span class="pf-v6-screen-reader">Success alert:</span>
@@ -338,7 +626,19 @@ cssPrefix: ['pf-v6-c-alert','pf-v6-c-alert-group']
338
626
  aria-label="Close success alert: Success alert title"
339
627
  >
340
628
  <span class="pf-v6-c-button__icon">
341
- <i class="fas fa-times" aria-hidden="true"></i>
629
+ <svg
630
+ class="pf-v6-svg"
631
+ viewBox="0 0 20 20"
632
+ fill="currentColor"
633
+ aria-hidden="true"
634
+ role="img"
635
+ width="1em"
636
+ height="1em"
637
+ >
638
+ <path
639
+ 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"
640
+ />
641
+ </svg>
342
642
  </span>
343
643
  </button>
344
644
  </div>
@@ -352,7 +652,19 @@ cssPrefix: ['pf-v6-c-alert','pf-v6-c-alert-group']
352
652
  <br />
353
653
  <div class="pf-v6-c-alert pf-m-success pf-m-inline" aria-label="Success alert">
354
654
  <div class="pf-v6-c-alert__icon">
355
- <i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
655
+ <svg
656
+ class="pf-v6-svg"
657
+ viewBox="0 0 32 32"
658
+ fill="currentColor"
659
+ aria-hidden="true"
660
+ role="img"
661
+ width="1em"
662
+ height="1em"
663
+ >
664
+ <path
665
+ 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"
666
+ />
667
+ </svg>
356
668
  </div>
357
669
  <p class="pf-v6-c-alert__title">
358
670
  <span class="pf-v6-screen-reader">Success alert:</span>
@@ -365,7 +677,19 @@ cssPrefix: ['pf-v6-c-alert','pf-v6-c-alert-group']
365
677
  aria-label="Close success alert: Success alert title"
366
678
  >
367
679
  <span class="pf-v6-c-button__icon">
368
- <i class="fas fa-times" aria-hidden="true"></i>
680
+ <svg
681
+ class="pf-v6-svg"
682
+ viewBox="0 0 20 20"
683
+ fill="currentColor"
684
+ aria-hidden="true"
685
+ role="img"
686
+ width="1em"
687
+ height="1em"
688
+ >
689
+ <path
690
+ 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"
691
+ />
692
+ </svg>
369
693
  </span>
370
694
  </button>
371
695
  </div>
@@ -381,7 +705,19 @@ cssPrefix: ['pf-v6-c-alert','pf-v6-c-alert-group']
381
705
  <br />
382
706
  <div class="pf-v6-c-alert pf-m-success pf-m-inline" aria-label="Success alert">
383
707
  <div class="pf-v6-c-alert__icon">
384
- <i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
708
+ <svg
709
+ class="pf-v6-svg"
710
+ viewBox="0 0 32 32"
711
+ fill="currentColor"
712
+ aria-hidden="true"
713
+ role="img"
714
+ width="1em"
715
+ height="1em"
716
+ >
717
+ <path
718
+ 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"
719
+ />
720
+ </svg>
385
721
  </div>
386
722
  <p class="pf-v6-c-alert__title">
387
723
  <span class="pf-v6-screen-reader">Success alert:</span>
@@ -396,7 +732,19 @@ cssPrefix: ['pf-v6-c-alert','pf-v6-c-alert-group']
396
732
  ```html
397
733
  <div class="pf-v6-c-alert pf-m-success" aria-label="Success alert">
398
734
  <div class="pf-v6-c-alert__icon">
399
- <i class="fas fa-fw fa-cog" aria-hidden="true"></i>
735
+ <svg
736
+ class="pf-v6-svg"
737
+ viewBox="0 0 512 512"
738
+ fill="currentColor"
739
+ aria-hidden="true"
740
+ role="img"
741
+ width="1em"
742
+ height="1em"
743
+ >
744
+ <path
745
+ d="M487.4 315.7l-42.6-24.6c4.3-23.2 4.3-47 0-70.2l42.6-24.6c4.9-2.8 7.1-8.6 5.5-14-11.1-35.6-30-67.8-54.7-94.6-3.8-4.1-10-5.1-14.8-2.3L380.8 110c-17.9-15.4-38.5-27.3-60.8-35.1V25.8c0-5.6-3.9-10.5-9.4-11.7-36.7-8.2-74.3-7.8-109.2 0-5.5 1.2-9.4 6.1-9.4 11.7V75c-22.2 7.9-42.8 19.8-60.8 35.1L88.7 85.5c-4.9-2.8-11-1.9-14.8 2.3-24.7 26.7-43.6 58.9-54.7 94.6-1.7 5.4.6 11.2 5.5 14L67.3 221c-4.3 23.2-4.3 47 0 70.2l-42.6 24.6c-4.9 2.8-7.1 8.6-5.5 14 11.1 35.6 30 67.8 54.7 94.6 3.8 4.1 10 5.1 14.8 2.3l42.6-24.6c17.9 15.4 38.5 27.3 60.8 35.1v49.2c0 5.6 3.9 10.5 9.4 11.7 36.7 8.2 74.3 7.8 109.2 0 5.5-1.2 9.4-6.1 9.4-11.7v-49.2c22.2-7.9 42.8-19.8 60.8-35.1l42.6 24.6c4.9 2.8 11 1.9 14.8-2.3 24.7-26.7 43.6-58.9 54.7-94.6 1.5-5.5-.7-11.3-5.6-14.1zM256 336c-44.1 0-80-35.9-80-80s35.9-80 80-80 80 35.9 80 80-35.9 80-80 80z"
746
+ />
747
+ </svg>
400
748
  </div>
401
749
  <p class="pf-v6-c-alert__title">
402
750
  <span class="pf-v6-screen-reader">Success alert:</span>
@@ -406,7 +754,19 @@ cssPrefix: ['pf-v6-c-alert','pf-v6-c-alert-group']
406
754
  <br />
407
755
  <div class="pf-v6-c-alert pf-m-success pf-m-inline" aria-label="Success alert">
408
756
  <div class="pf-v6-c-alert__icon">
409
- <i class="fas fa-fw fa-cog" aria-hidden="true"></i>
757
+ <svg
758
+ class="pf-v6-svg"
759
+ viewBox="0 0 512 512"
760
+ fill="currentColor"
761
+ aria-hidden="true"
762
+ role="img"
763
+ width="1em"
764
+ height="1em"
765
+ >
766
+ <path
767
+ d="M487.4 315.7l-42.6-24.6c4.3-23.2 4.3-47 0-70.2l42.6-24.6c4.9-2.8 7.1-8.6 5.5-14-11.1-35.6-30-67.8-54.7-94.6-3.8-4.1-10-5.1-14.8-2.3L380.8 110c-17.9-15.4-38.5-27.3-60.8-35.1V25.8c0-5.6-3.9-10.5-9.4-11.7-36.7-8.2-74.3-7.8-109.2 0-5.5 1.2-9.4 6.1-9.4 11.7V75c-22.2 7.9-42.8 19.8-60.8 35.1L88.7 85.5c-4.9-2.8-11-1.9-14.8 2.3-24.7 26.7-43.6 58.9-54.7 94.6-1.7 5.4.6 11.2 5.5 14L67.3 221c-4.3 23.2-4.3 47 0 70.2l-42.6 24.6c-4.9 2.8-7.1 8.6-5.5 14 11.1 35.6 30 67.8 54.7 94.6 3.8 4.1 10 5.1 14.8 2.3l42.6-24.6c17.9 15.4 38.5 27.3 60.8 35.1v49.2c0 5.6 3.9 10.5 9.4 11.7 36.7 8.2 74.3 7.8 109.2 0 5.5-1.2 9.4-6.1 9.4-11.7v-49.2c22.2-7.9 42.8-19.8 60.8-35.1l42.6 24.6c4.9 2.8 11 1.9 14.8-2.3 24.7-26.7 43.6-58.9 54.7-94.6 1.5-5.5-.7-11.3-5.6-14.1zM256 336c-44.1 0-80-35.9-80-80s35.9-80 80-80 80 35.9 80 80-35.9 80-80 80z"
768
+ />
769
+ </svg>
410
770
  </div>
411
771
  <p class="pf-v6-c-alert__title">
412
772
  <span class="pf-v6-screen-reader">Success alert:</span>
@@ -424,7 +784,19 @@ cssPrefix: ['pf-v6-c-alert','pf-v6-c-alert-group']
424
784
  aria-label="Success alert"
425
785
  >
426
786
  <div class="pf-v6-c-alert__icon">
427
- <i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
787
+ <svg
788
+ class="pf-v6-svg"
789
+ viewBox="0 0 32 32"
790
+ fill="currentColor"
791
+ aria-hidden="true"
792
+ role="img"
793
+ width="1em"
794
+ height="1em"
795
+ >
796
+ <path
797
+ 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"
798
+ />
799
+ </svg>
428
800
  </div>
429
801
  <p class="pf-v6-c-alert__title">
430
802
  <span class="pf-v6-screen-reader">Success alert:</span>
@@ -452,13 +824,37 @@ cssPrefix: ['pf-v6-c-alert','pf-v6-c-alert-group']
452
824
  >
453
825
  <span class="pf-v6-c-button__icon">
454
826
  <span class="pf-v6-c-alert__toggle-icon">
455
- <i class="fas fa-angle-right" aria-hidden="true"></i>
827
+ <svg
828
+ class="pf-v6-svg"
829
+ viewBox="0 0 20 20"
830
+ fill="currentColor"
831
+ aria-hidden="true"
832
+ role="img"
833
+ width="1em"
834
+ height="1em"
835
+ >
836
+ <path
837
+ 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"
838
+ />
839
+ </svg>
456
840
  </span>
457
841
  </span>
458
842
  </button>
459
843
  </div>
460
844
  <div class="pf-v6-c-alert__icon">
461
- <i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
845
+ <svg
846
+ class="pf-v6-svg"
847
+ viewBox="0 0 32 32"
848
+ fill="currentColor"
849
+ aria-hidden="true"
850
+ role="img"
851
+ width="1em"
852
+ height="1em"
853
+ >
854
+ <path
855
+ 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"
856
+ />
857
+ </svg>
462
858
  </div>
463
859
  <p class="pf-v6-c-alert__title" id="alert-expandable-example-1-title">
464
860
  <span class="pf-v6-screen-reader">Success alert:</span>
@@ -471,7 +867,19 @@ cssPrefix: ['pf-v6-c-alert','pf-v6-c-alert-group']
471
867
  aria-label="Close success alert: Success alert title"
472
868
  >
473
869
  <span class="pf-v6-c-button__icon">
474
- <i class="fas fa-times" aria-hidden="true"></i>
870
+ <svg
871
+ class="pf-v6-svg"
872
+ viewBox="0 0 20 20"
873
+ fill="currentColor"
874
+ aria-hidden="true"
875
+ role="img"
876
+ width="1em"
877
+ height="1em"
878
+ >
879
+ <path
880
+ 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"
881
+ />
882
+ </svg>
475
883
  </span>
476
884
  </button>
477
885
  </div>
@@ -503,13 +911,37 @@ cssPrefix: ['pf-v6-c-alert','pf-v6-c-alert-group']
503
911
  >
504
912
  <span class="pf-v6-c-button__icon">
505
913
  <span class="pf-v6-c-alert__toggle-icon">
506
- <i class="fas fa-angle-right" aria-hidden="true"></i>
914
+ <svg
915
+ class="pf-v6-svg"
916
+ viewBox="0 0 20 20"
917
+ fill="currentColor"
918
+ aria-hidden="true"
919
+ role="img"
920
+ width="1em"
921
+ height="1em"
922
+ >
923
+ <path
924
+ 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"
925
+ />
926
+ </svg>
507
927
  </span>
508
928
  </span>
509
929
  </button>
510
930
  </div>
511
931
  <div class="pf-v6-c-alert__icon">
512
- <i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
932
+ <svg
933
+ class="pf-v6-svg"
934
+ viewBox="0 0 32 32"
935
+ fill="currentColor"
936
+ aria-hidden="true"
937
+ role="img"
938
+ width="1em"
939
+ height="1em"
940
+ >
941
+ <path
942
+ 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"
943
+ />
944
+ </svg>
513
945
  </div>
514
946
  <p class="pf-v6-c-alert__title" id="alert-expandable-example-2-title">
515
947
  <span class="pf-v6-screen-reader">Success alert:</span>
@@ -522,7 +954,19 @@ cssPrefix: ['pf-v6-c-alert','pf-v6-c-alert-group']
522
954
  aria-label="Close success alert: Success alert title"
523
955
  >
524
956
  <span class="pf-v6-c-button__icon">
525
- <i class="fas fa-times" aria-hidden="true"></i>
957
+ <svg
958
+ class="pf-v6-svg"
959
+ viewBox="0 0 20 20"
960
+ fill="currentColor"
961
+ aria-hidden="true"
962
+ role="img"
963
+ width="1em"
964
+ height="1em"
965
+ >
966
+ <path
967
+ 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"
968
+ />
969
+ </svg>
526
970
  </span>
527
971
  </button>
528
972
  </div>
@@ -554,13 +998,37 @@ cssPrefix: ['pf-v6-c-alert','pf-v6-c-alert-group']
554
998
  >
555
999
  <span class="pf-v6-c-button__icon">
556
1000
  <span class="pf-v6-c-alert__toggle-icon">
557
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1001
+ <svg
1002
+ class="pf-v6-svg"
1003
+ viewBox="0 0 20 20"
1004
+ fill="currentColor"
1005
+ aria-hidden="true"
1006
+ role="img"
1007
+ width="1em"
1008
+ height="1em"
1009
+ >
1010
+ <path
1011
+ 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"
1012
+ />
1013
+ </svg>
558
1014
  </span>
559
1015
  </span>
560
1016
  </button>
561
1017
  </div>
562
1018
  <div class="pf-v6-c-alert__icon">
563
- <i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
1019
+ <svg
1020
+ class="pf-v6-svg"
1021
+ viewBox="0 0 32 32"
1022
+ fill="currentColor"
1023
+ aria-hidden="true"
1024
+ role="img"
1025
+ width="1em"
1026
+ height="1em"
1027
+ >
1028
+ <path
1029
+ 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"
1030
+ />
1031
+ </svg>
564
1032
  </div>
565
1033
  <p class="pf-v6-c-alert__title" id="alert-expandable-example-3-title">
566
1034
  <span class="pf-v6-screen-reader">Success alert:</span>
@@ -573,7 +1041,19 @@ cssPrefix: ['pf-v6-c-alert','pf-v6-c-alert-group']
573
1041
  aria-label="Close success alert: Success alert title"
574
1042
  >
575
1043
  <span class="pf-v6-c-button__icon">
576
- <i class="fas fa-times" aria-hidden="true"></i>
1044
+ <svg
1045
+ class="pf-v6-svg"
1046
+ viewBox="0 0 20 20"
1047
+ fill="currentColor"
1048
+ aria-hidden="true"
1049
+ role="img"
1050
+ width="1em"
1051
+ height="1em"
1052
+ >
1053
+ <path
1054
+ 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"
1055
+ />
1056
+ </svg>
577
1057
  </span>
578
1058
  </button>
579
1059
  </div>
@@ -605,13 +1085,37 @@ cssPrefix: ['pf-v6-c-alert','pf-v6-c-alert-group']
605
1085
  >
606
1086
  <span class="pf-v6-c-button__icon">
607
1087
  <span class="pf-v6-c-alert__toggle-icon">
608
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1088
+ <svg
1089
+ class="pf-v6-svg"
1090
+ viewBox="0 0 20 20"
1091
+ fill="currentColor"
1092
+ aria-hidden="true"
1093
+ role="img"
1094
+ width="1em"
1095
+ height="1em"
1096
+ >
1097
+ <path
1098
+ 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"
1099
+ />
1100
+ </svg>
609
1101
  </span>
610
1102
  </span>
611
1103
  </button>
612
1104
  </div>
613
1105
  <div class="pf-v6-c-alert__icon">
614
- <i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
1106
+ <svg
1107
+ class="pf-v6-svg"
1108
+ viewBox="0 0 32 32"
1109
+ fill="currentColor"
1110
+ aria-hidden="true"
1111
+ role="img"
1112
+ width="1em"
1113
+ height="1em"
1114
+ >
1115
+ <path
1116
+ 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"
1117
+ />
1118
+ </svg>
615
1119
  </div>
616
1120
  <p class="pf-v6-c-alert__title" id="alert-expandable-example-4-title">
617
1121
  <span class="pf-v6-screen-reader">Success alert:</span>
@@ -624,7 +1128,19 @@ cssPrefix: ['pf-v6-c-alert','pf-v6-c-alert-group']
624
1128
  aria-label="Close success alert: Success alert title"
625
1129
  >
626
1130
  <span class="pf-v6-c-button__icon">
627
- <i class="fas fa-times" aria-hidden="true"></i>
1131
+ <svg
1132
+ class="pf-v6-svg"
1133
+ viewBox="0 0 20 20"
1134
+ fill="currentColor"
1135
+ aria-hidden="true"
1136
+ role="img"
1137
+ width="1em"
1138
+ height="1em"
1139
+ >
1140
+ <path
1141
+ 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"
1142
+ />
1143
+ </svg>
628
1144
  </span>
629
1145
  </button>
630
1146
  </div>
@@ -657,7 +1173,19 @@ An alert group is optional when only one static alert is needed. It becomes requ
657
1173
  aria-label="Success alert"
658
1174
  >
659
1175
  <div class="pf-v6-c-alert__icon">
660
- <i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
1176
+ <svg
1177
+ class="pf-v6-svg"
1178
+ viewBox="0 0 32 32"
1179
+ fill="currentColor"
1180
+ aria-hidden="true"
1181
+ role="img"
1182
+ width="1em"
1183
+ height="1em"
1184
+ >
1185
+ <path
1186
+ 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"
1187
+ />
1188
+ </svg>
661
1189
  </div>
662
1190
  <p class="pf-v6-c-alert__title">
663
1191
  <span class="pf-v6-screen-reader">Success alert:</span>
@@ -672,7 +1200,19 @@ An alert group is optional when only one static alert is needed. It becomes requ
672
1200
  aria-label="Danger alert"
673
1201
  >
674
1202
  <div class="pf-v6-c-alert__icon">
675
- <i class="fas fa-fw fa-exclamation-circle" aria-hidden="true"></i>
1203
+ <svg
1204
+ class="pf-v6-svg"
1205
+ viewBox="0 0 32 32"
1206
+ fill="currentColor"
1207
+ aria-hidden="true"
1208
+ role="img"
1209
+ width="1em"
1210
+ height="1em"
1211
+ >
1212
+ <path
1213
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm-1.5 8a1.5 1.5 0 1 1 3 0v7a1.5 1.5 0 1 1-3 0V9ZM16 25.001a2 2 0 1 1-.001-3.999A2 2 0 0 1 16 25.001Z"
1214
+ />
1215
+ </svg>
676
1216
  </div>
677
1217
  <p class="pf-v6-c-alert__title">
678
1218
  <span class="pf-v6-screen-reader">Danger alert:</span>
@@ -687,7 +1227,19 @@ An alert group is optional when only one static alert is needed. It becomes requ
687
1227
  aria-label="Information alert"
688
1228
  >
689
1229
  <div class="pf-v6-c-alert__icon">
690
- <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
1230
+ <svg
1231
+ class="pf-v6-svg"
1232
+ viewBox="0 0 32 32"
1233
+ fill="currentColor"
1234
+ aria-hidden="true"
1235
+ role="img"
1236
+ width="1em"
1237
+ height="1em"
1238
+ >
1239
+ <path
1240
+ 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"
1241
+ />
1242
+ </svg>
691
1243
  </div>
692
1244
  <p class="pf-v6-c-alert__title">
693
1245
  <span class="pf-v6-screen-reader">Info alert:</span>
@@ -723,7 +1275,19 @@ For sighted users, interactive elements can be included in this message in one o
723
1275
  <li class="pf-v6-c-alert-group__item">
724
1276
  <div class="pf-v6-c-alert pf-m-success" aria-label="Success toast alert">
725
1277
  <div class="pf-v6-c-alert__icon">
726
- <i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
1278
+ <svg
1279
+ class="pf-v6-svg"
1280
+ viewBox="0 0 32 32"
1281
+ fill="currentColor"
1282
+ aria-hidden="true"
1283
+ role="img"
1284
+ width="1em"
1285
+ height="1em"
1286
+ >
1287
+ <path
1288
+ 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"
1289
+ />
1290
+ </svg>
727
1291
  </div>
728
1292
  <p class="pf-v6-c-alert__title" id="alert_one_title">
729
1293
  <span class="pf-v6-screen-reader">Success alert:</span>
@@ -742,7 +1306,19 @@ For sighted users, interactive elements can be included in this message in one o
742
1306
  aria-label="Close success alert: Success alert title"
743
1307
  >
744
1308
  <span class="pf-v6-c-button__icon">
745
- <i class="fas fa-times" aria-hidden="true"></i>
1309
+ <svg
1310
+ class="pf-v6-svg"
1311
+ viewBox="0 0 20 20"
1312
+ fill="currentColor"
1313
+ aria-hidden="true"
1314
+ role="img"
1315
+ width="1em"
1316
+ height="1em"
1317
+ >
1318
+ <path
1319
+ 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"
1320
+ />
1321
+ </svg>
746
1322
  </span>
747
1323
  </button>
748
1324
  </div>
@@ -752,7 +1328,19 @@ For sighted users, interactive elements can be included in this message in one o
752
1328
  <li class="pf-v6-c-alert-group__item">
753
1329
  <div class="pf-v6-c-alert pf-m-danger" aria-label="Danger toast alert">
754
1330
  <div class="pf-v6-c-alert__icon">
755
- <i class="fas fa-fw fa-exclamation-circle" aria-hidden="true"></i>
1331
+ <svg
1332
+ class="pf-v6-svg"
1333
+ viewBox="0 0 32 32"
1334
+ fill="currentColor"
1335
+ aria-hidden="true"
1336
+ role="img"
1337
+ width="1em"
1338
+ height="1em"
1339
+ >
1340
+ <path
1341
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm-1.5 8a1.5 1.5 0 1 1 3 0v7a1.5 1.5 0 1 1-3 0V9ZM16 25.001a2 2 0 1 1-.001-3.999A2 2 0 0 1 16 25.001Z"
1342
+ />
1343
+ </svg>
756
1344
  </div>
757
1345
  <p class="pf-v6-c-alert__title" id="alert_two_title">
758
1346
  <span class="pf-v6-screen-reader">Danger alert:</span>
@@ -762,10 +1350,22 @@ For sighted users, interactive elements can be included in this message in one o
762
1350
  <button
763
1351
  class="pf-v6-c-button pf-m-plain"
764
1352
  type="button"
765
- aria-label="Close success alert: Success alert title"
1353
+ aria-label="Close danger alert: Danger alert title"
766
1354
  >
767
1355
  <span class="pf-v6-c-button__icon">
768
- <i class="fas fa-times" aria-hidden="true"></i>
1356
+ <svg
1357
+ class="pf-v6-svg"
1358
+ viewBox="0 0 20 20"
1359
+ fill="currentColor"
1360
+ aria-hidden="true"
1361
+ role="img"
1362
+ width="1em"
1363
+ height="1em"
1364
+ >
1365
+ <path
1366
+ 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"
1367
+ />
1368
+ </svg>
769
1369
  </span>
770
1370
  </button>
771
1371
  </div>
@@ -775,7 +1375,19 @@ For sighted users, interactive elements can be included in this message in one o
775
1375
  <li class="pf-v6-c-alert-group__item">
776
1376
  <div class="pf-v6-c-alert pf-m-info" aria-label="Information toast alert">
777
1377
  <div class="pf-v6-c-alert__icon">
778
- <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
1378
+ <svg
1379
+ class="pf-v6-svg"
1380
+ viewBox="0 0 32 32"
1381
+ fill="currentColor"
1382
+ aria-hidden="true"
1383
+ role="img"
1384
+ width="1em"
1385
+ height="1em"
1386
+ >
1387
+ <path
1388
+ 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"
1389
+ />
1390
+ </svg>
779
1391
  </div>
780
1392
  <p class="pf-v6-c-alert__title" id="alert_three_title">
781
1393
  <span class="pf-v6-screen-reader">Info alert:</span>
@@ -791,10 +1403,22 @@ For sighted users, interactive elements can be included in this message in one o
791
1403
  <button
792
1404
  class="pf-v6-c-button pf-m-plain"
793
1405
  type="button"
794
- aria-label="Close success alert: Success alert title"
1406
+ aria-label="Close info alert: Info alert title"
795
1407
  >
796
1408
  <span class="pf-v6-c-button__icon">
797
- <i class="fas fa-times" aria-hidden="true"></i>
1409
+ <svg
1410
+ class="pf-v6-svg"
1411
+ viewBox="0 0 20 20"
1412
+ fill="currentColor"
1413
+ aria-hidden="true"
1414
+ role="img"
1415
+ width="1em"
1416
+ height="1em"
1417
+ >
1418
+ <path
1419
+ 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"
1420
+ />
1421
+ </svg>
798
1422
  </span>
799
1423
  </button>
800
1424
  </div>