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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (410) hide show
  1. package/README.md +2 -2
  2. package/assets/fontawesome/_variables.scss +2 -1
  3. package/assets/images/Felt-Bkg-Generic-Dark.svg +82 -0
  4. package/assets/images/Felt-Bkg-Generic-Light.svg +82 -0
  5. package/assets/images/PF-Bkg-Generic-Dark.svg +76 -0
  6. package/assets/images/PF-Bkg-Generic-Light.svg +74 -0
  7. package/assets/images/RHAiExperienceIcon.svg +27 -0
  8. package/assets/images/RHAutomationsLogo.svg +96 -0
  9. package/assets/images/RHServerStackIcon.svg +16 -0
  10. package/assets/images/compass--hero-bg.png +0 -0
  11. package/assets/images/compass--rh-wallpaper-dark.png +0 -0
  12. package/assets/images/compass--rh-wallpaper-light.png +0 -0
  13. package/assets/images/compass--wallpaper-dark.jpg +0 -0
  14. package/assets/images/compass--wallpaper-dark.png +0 -0
  15. package/assets/images/compass--wallpaper-light.jpg +0 -0
  16. package/assets/images/compass--wallpaper-light.png +0 -0
  17. package/assets/images/glass-brand-dark.jpg +0 -0
  18. package/assets/images/glass-brand-dark.png +0 -0
  19. package/assets/images/glass-brand-light.jpg +0 -0
  20. package/assets/images/glass-brand-light.png +0 -0
  21. package/base/normalize.scss +7 -0
  22. package/base/patternfly-common.css +50 -0
  23. package/base/patternfly-common.scss +59 -0
  24. package/base/patternfly-svg-icons.css +17 -0
  25. package/base/patternfly-svg-icons.scss +20 -0
  26. package/base/patternfly-variables.css +926 -513
  27. package/base/patternfly-variables.scss +46 -4
  28. package/base/tokens/tokens-dark.scss +56 -8
  29. package/base/tokens/tokens-default.scss +69 -14
  30. package/base/tokens/tokens-glass-dark.scss +26 -0
  31. package/base/tokens/tokens-glass.scss +22 -0
  32. package/base/tokens/tokens-local.scss +17 -0
  33. package/base/tokens/tokens-palette.scss +3 -1
  34. package/base/tokens/tokens-redhat-dark.scss +21 -0
  35. package/base/tokens/tokens-redhat-glass-dark.scss +40 -0
  36. package/base/tokens/tokens-redhat-glass.scss +30 -0
  37. package/base/tokens/tokens-redhat-highcontrast-dark.scss +50 -0
  38. package/base/tokens/tokens-redhat-highcontrast.scss +128 -0
  39. package/base/tokens/tokens-redhat.scss +15 -0
  40. package/components/AboutModalBox/about-modal-box.css +36 -26
  41. package/components/Accordion/accordion.css +26 -14
  42. package/components/Accordion/accordion.scss +12 -2
  43. package/components/ActionList/action-list.css +2 -0
  44. package/components/ActionList/action-list.scss +2 -0
  45. package/components/Alert/alert.css +7 -5
  46. package/components/Alert/alert.scss +2 -1
  47. package/components/Avatar/avatar.css +12 -4
  48. package/components/BackgroundImage/background-image.css +6 -3
  49. package/components/Banner/banner.css +12 -6
  50. package/components/Banner/banner.scss +7 -0
  51. package/components/Brand/brand.css +3 -1
  52. package/components/Breadcrumb/breadcrumb.css +10 -5
  53. package/components/Breadcrumb/breadcrumb.scss +6 -2
  54. package/components/Button/button.css +173 -71
  55. package/components/Button/button.scss +188 -72
  56. package/components/CalendarMonth/calendar-month.css +4 -3
  57. package/components/Card/card.css +51 -15
  58. package/components/Card/card.scss +65 -9
  59. package/components/ClipboardCopy/clipboard-copy.css +14 -7
  60. package/components/ClipboardCopy/clipboard-copy.scss +13 -4
  61. package/components/CodeEditor/code-editor.css +2 -2
  62. package/components/CodeEditor/code-editor.scss +2 -2
  63. package/components/Compass/compass.css +399 -0
  64. package/components/Compass/compass.scss +413 -0
  65. package/components/DataList/data-list.css +30 -23
  66. package/components/DataList/data-list.scss +3 -2
  67. package/components/DescriptionList/description-list-order.scss +5 -1
  68. package/components/DescriptionList/description-list.css +7 -5
  69. package/components/DescriptionList/description-list.scss +5 -1
  70. package/components/Divider/divider.css +7 -5
  71. package/components/Drawer/drawer.css +224 -75
  72. package/components/Drawer/drawer.scss +194 -27
  73. package/components/DualListSelector/dual-list-selector.css +18 -12
  74. package/components/DualListSelector/dual-list-selector.scss +1 -1
  75. package/components/ExpandableSection/expandable-section.css +21 -16
  76. package/components/ExpandableSection/expandable-section.scss +6 -3
  77. package/components/Form/form.css +2 -2
  78. package/components/Form/form.scss +2 -2
  79. package/components/FormControl/form-control.css +3 -3
  80. package/components/FormControl/form-control.scss +3 -3
  81. package/components/Hero/hero.css +74 -0
  82. package/components/Hero/hero.scss +86 -0
  83. package/components/JumpLinks/jump-links.css +16 -5
  84. package/components/JumpLinks/jump-links.scss +17 -3
  85. package/components/Label/label-group.css +2 -2
  86. package/components/Label/label-group.scss +2 -2
  87. package/components/Label/label.css +4 -3
  88. package/components/Login/login.css +58 -40
  89. package/components/Login/login.scss +7 -3
  90. package/components/Masthead/masthead.css +111 -16
  91. package/components/Masthead/masthead.scss +111 -1
  92. package/components/Menu/menu.css +49 -33
  93. package/components/Menu/menu.scss +26 -19
  94. package/components/MenuToggle/menu-toggle.css +35 -8
  95. package/components/MenuToggle/menu-toggle.scss +42 -8
  96. package/components/ModalBox/modal-box.css +9 -7
  97. package/components/ModalBox/modal-box.scss +2 -2
  98. package/components/Nav/nav.css +82 -11
  99. package/components/Nav/nav.scss +85 -5
  100. package/components/NotificationDrawer/notification-drawer.css +19 -9
  101. package/components/NotificationDrawer/notification-drawer.scss +14 -5
  102. package/components/OverflowMenu/overflow-menu.css +16 -0
  103. package/components/OverflowMenu/overflow-menu.scss +20 -1
  104. package/components/Page/page.css +421 -32
  105. package/components/Page/page.scss +397 -15
  106. package/components/Pagination/pagination.css +56 -4
  107. package/components/Pagination/pagination.scss +71 -6
  108. package/components/Panel/panel.css +41 -3
  109. package/components/Panel/panel.scss +56 -3
  110. package/components/Progress/progress.css +3 -1
  111. package/components/Progress/progress.scss +3 -1
  112. package/components/ProgressStepper/progress-stepper.scss +5 -1
  113. package/components/Sidebar/sidebar.css +1 -1
  114. package/components/Sidebar/sidebar.scss +7 -3
  115. package/components/Skeleton/skeleton.css +16 -15
  116. package/components/Slider/slider.css +32 -18
  117. package/components/Switch/switch.css +4 -2
  118. package/components/Switch/switch.scss +1 -1
  119. package/components/Table/table-grid.css +28 -36
  120. package/components/Table/table-grid.scss +4 -4
  121. package/components/Table/table-scrollable.css +1 -1
  122. package/components/Table/table-scrollable.scss +1 -1
  123. package/components/Table/table-tree-view.css +4 -2
  124. package/components/Table/table.css +104 -57
  125. package/components/Table/table.scss +92 -37
  126. package/components/Tabs/tabs.css +39 -33
  127. package/components/Tabs/tabs.scss +38 -26
  128. package/components/TextInputGroup/text-input-group.css +2 -2
  129. package/components/TextInputGroup/text-input-group.scss +2 -2
  130. package/components/ToggleGroup/toggle-group.css +44 -19
  131. package/components/ToggleGroup/toggle-group.scss +51 -22
  132. package/components/Toolbar/toolbar.css +195 -16
  133. package/components/Toolbar/toolbar.scss +89 -9
  134. package/components/TreeView/tree-view.css +45 -14
  135. package/components/TreeView/tree-view.scss +32 -1
  136. package/components/Wizard/wizard.css +41 -19
  137. package/components/Wizard/wizard.scss +26 -6
  138. package/components/_index.css +2740 -829
  139. package/components/_index.scss +3 -1
  140. package/docs/components/AboutModalBox/examples/AboutModalBox.md +13 -1
  141. package/docs/components/Accordion/examples/Accordion.md +392 -30
  142. package/docs/components/ActionList/examples/ActionList.md +143 -11
  143. package/docs/components/Alert/examples/Alert.md +678 -54
  144. package/docs/components/Avatar/examples/Avatar.md +4 -4
  145. package/docs/components/BackToTop/examples/BackToTop.md +13 -1
  146. package/docs/components/Banner/examples/Banner.md +196 -5
  147. package/docs/components/Brand/examples/Brand.md +2 -2
  148. package/docs/components/Breadcrumb/examples/Breadcrumb.md +313 -26
  149. package/docs/components/Button/examples/Button.md +2829 -333
  150. package/docs/components/CalendarMonth/examples/CalendarMonth.md +156 -12
  151. package/docs/components/Card/examples/Card.md +335 -12
  152. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +293 -28
  153. package/docs/components/CodeBlock/examples/CodeBlock.md +104 -8
  154. package/docs/components/CodeEditor/examples/CodeEditor.md +234 -18
  155. package/docs/components/Compass/examples/Compass.css +8 -0
  156. package/docs/components/Compass/examples/Compass.md +109 -0
  157. package/docs/components/DataList/examples/DataList.md +468 -78
  158. package/docs/components/DatePicker/examples/DatePicker.md +78 -6
  159. package/docs/components/DescriptionList/examples/DescriptionList.md +327 -27
  160. package/docs/components/Divider/examples/Divider.md +2 -2
  161. package/docs/components/DragDrop/examples/DragDrop.css +1 -1
  162. package/docs/components/Drawer/examples/Drawer.md +415 -35
  163. package/docs/components/DualListSelector/examples/DualListSelector.md +1247 -161
  164. package/docs/components/EmptyState/examples/EmptyState.md +78 -6
  165. package/docs/components/ExpandableSection/examples/ExpandableSection.md +91 -7
  166. package/docs/components/Form/examples/Form.md +78 -6
  167. package/docs/components/Hero/examples/Hero.md +25 -0
  168. package/docs/components/Hint/examples/Hint.md +39 -3
  169. package/docs/components/Icon/examples/Icon.md +105 -9
  170. package/docs/components/InlineEdit/examples/InlineEdit.md +338 -26
  171. package/docs/components/InputGroup/examples/InputGroup.md +40 -4
  172. package/docs/components/JumpLinks/examples/JumpLinks.md +54 -6
  173. package/docs/components/Label/examples/Label.md +2834 -218
  174. package/docs/components/Login/examples/Login.md +39 -3
  175. package/docs/components/Masthead/examples/masthead.md +80 -1
  176. package/docs/components/Menu/examples/Menu.md +1679 -133
  177. package/docs/components/MenuToggle/examples/MenuToggle.md +1514 -118
  178. package/docs/components/ModalBox/examples/ModalBox.md +289 -25
  179. package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +156 -12
  180. package/docs/components/Nav/examples/Navigation.md +898 -62
  181. package/docs/components/NotificationDrawer/examples/NotificationDrawer.md +1079 -83
  182. package/docs/components/OverflowMenu/examples/overflow-menu.css +6 -3
  183. package/docs/components/OverflowMenu/examples/overflow-menu.md +164 -11
  184. package/docs/components/Page/examples/Page.md +211 -25
  185. package/docs/components/Pagination/examples/Pagination.md +1291 -80
  186. package/docs/components/Panel/examples/Panel.css +3 -0
  187. package/docs/components/Panel/examples/Panel.md +71 -4
  188. package/docs/components/Popover/examples/Popover.md +286 -22
  189. package/docs/components/Progress/examples/Progress.md +91 -7
  190. package/docs/components/ProgressStepper/examples/ProgressStepper.md +275 -23
  191. package/docs/components/Sidebar/examples/Sidebar.md +1 -1
  192. package/docs/components/Slider/examples/Slider.md +52 -4
  193. package/docs/components/Table/examples/Table.css +2 -1
  194. package/docs/components/Table/examples/Table.md +7543 -653
  195. package/docs/components/Tabs/examples/Tabs.md +5734 -471
  196. package/docs/components/TextInputGroup/examples/TextInputGroup.md +600 -48
  197. package/docs/components/ToggleGroup/examples/toggle-group.md +261 -15
  198. package/docs/components/Toolbar/examples/Toolbar.css +1 -1
  199. package/docs/components/Toolbar/examples/Toolbar.md +1145 -88
  200. package/docs/components/TreeView/examples/TreeView.md +1390 -130
  201. package/docs/components/Wizard/examples/Wizard.md +828 -73
  202. package/docs/demos/AboutModal/examples/AboutModal.md +158 -53
  203. package/docs/demos/Alert/examples/Alert.md +539 -164
  204. package/docs/demos/BackToTop/examples/BackToTop.md +158 -53
  205. package/docs/demos/Banner/examples/Banner.md +290 -104
  206. package/docs/demos/Button/examples/Button.md +13 -1
  207. package/docs/demos/Card/examples/Card.md +1041 -134
  208. package/docs/demos/CardView/examples/CardView.md +570 -171
  209. package/docs/demos/Compass/examples/Compass.md +10005 -0
  210. package/docs/demos/Dashboard/examples/Dashboard.md +745 -177
  211. package/docs/demos/DataList/examples/DataList.md +1301 -292
  212. package/docs/demos/DescriptionList/examples/DescriptionList.md +472 -160
  213. package/docs/demos/Drawer/examples/Drawer.md +718 -262
  214. package/docs/demos/Form/examples/BasicForms.md +273 -21
  215. package/docs/demos/JumpLinks/examples/JumpLinks.md +862 -319
  216. package/docs/demos/Masthead/examples/Masthead.md +1119 -489
  217. package/docs/demos/Modal/examples/Modal.md +948 -321
  218. package/docs/demos/Nav/examples/Nav.md +3449 -499
  219. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +2418 -405
  220. package/docs/demos/Page/examples/Page.md +2137 -773
  221. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +13 -1
  222. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +52 -4
  223. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +1913 -504
  224. package/docs/demos/Skeleton/examples/Skeleton.md +145 -52
  225. package/docs/demos/Table/examples/Table.md +11807 -2275
  226. package/docs/demos/Tabs/examples/Tabs.md +1117 -337
  227. package/docs/demos/Toolbar/examples/Toolbar.md +1818 -286
  228. package/docs/demos/Wizard/examples/Wizard.md +1705 -526
  229. package/docs/layouts/Bullseye/examples/Bullseye.css +2 -2
  230. package/docs/layouts/Bullseye/examples/Bullseye.md +2 -1
  231. package/docs/layouts/Flex/examples/Flex.css +3 -3
  232. package/docs/layouts/Flex/examples/Flex.md +3 -2
  233. package/docs/layouts/Gallery/examples/Gallery.css +2 -2
  234. package/docs/layouts/Gallery/examples/Gallery.md +4 -3
  235. package/docs/layouts/Grid/examples/Grid.css +1 -1
  236. package/docs/layouts/Grid/examples/Grid.md +6 -5
  237. package/docs/layouts/Level/examples/Level.css +3 -3
  238. package/docs/layouts/Level/examples/Level.md +2 -1
  239. package/docs/layouts/Split/examples/Split.css +1 -1
  240. package/docs/layouts/Split/examples/Split.md +2 -1
  241. package/docs/layouts/Stack/examples/Stack.css +3 -3
  242. package/docs/layouts/Stack/examples/Stack.md +2 -1
  243. package/docs/utilities/Accessibility/examples/Accessibility.md +3 -2
  244. package/docs/utilities/Alignment/examples/Alignment.css +4 -4
  245. package/docs/utilities/Alignment/examples/Alignment.md +3 -2
  246. package/docs/utilities/BackgroundColor/examples/BackgroundColor.md +5 -4
  247. package/docs/utilities/BoxShadow/examples/box-shadow.css +2 -2
  248. package/docs/utilities/BoxShadow/examples/box-shadow.md +2 -1
  249. package/docs/utilities/Display/examples/Display.css +1 -1
  250. package/docs/utilities/Display/examples/Display.md +3 -2
  251. package/docs/utilities/Flex/examples/Flex.css +7 -7
  252. package/docs/utilities/Flex/examples/Flex.md +3 -2
  253. package/docs/utilities/Float/examples/Float.css +2 -2
  254. package/docs/utilities/Float/examples/Float.md +3 -2
  255. package/docs/utilities/Sizing/examples/Sizing.md +8 -7
  256. package/docs/utilities/Spacing/examples/Spacing.css +2 -2
  257. package/docs/utilities/Spacing/examples/Spacing.md +3 -2
  258. package/docs/utilities/Text/examples/Text.md +5 -4
  259. package/icons/PfIcons/add-circle-o.svg +4 -0
  260. package/icons/PfIcons/ansible-tower.svg +4 -0
  261. package/icons/PfIcons/applications.svg +4 -0
  262. package/icons/PfIcons/arrow.svg +4 -0
  263. package/icons/PfIcons/asleep.svg +4 -0
  264. package/icons/PfIcons/attention-bell.svg +4 -0
  265. package/icons/PfIcons/automation.svg +4 -0
  266. package/icons/PfIcons/bell.svg +4 -0
  267. package/icons/PfIcons/blueprint.svg +4 -0
  268. package/icons/PfIcons/build.svg +4 -0
  269. package/icons/PfIcons/builder-image.svg +4 -0
  270. package/icons/PfIcons/bundle.svg +4 -0
  271. package/icons/PfIcons/catalog.svg +4 -0
  272. package/icons/PfIcons/chat.svg +4 -0
  273. package/icons/PfIcons/close.svg +4 -0
  274. package/icons/PfIcons/cloud-security.svg +4 -0
  275. package/icons/PfIcons/cloud-tenant.svg +4 -0
  276. package/icons/PfIcons/cluster.svg +4 -0
  277. package/icons/PfIcons/connected.svg +4 -0
  278. package/icons/PfIcons/container-node.svg +4 -0
  279. package/icons/PfIcons/cpu.svg +4 -0
  280. package/icons/PfIcons/critical-risk.svg +4 -0
  281. package/icons/PfIcons/data-processor.svg +4 -0
  282. package/icons/PfIcons/data-sink.svg +4 -0
  283. package/icons/PfIcons/data-source.svg +4 -0
  284. package/icons/PfIcons/degraded.svg +4 -0
  285. package/icons/PfIcons/disconnected.svg +4 -0
  286. package/icons/PfIcons/domain.svg +4 -0
  287. package/icons/PfIcons/edit.svg +4 -0
  288. package/icons/PfIcons/enhancement.svg +4 -0
  289. package/icons/PfIcons/enterprise.svg +4 -0
  290. package/icons/PfIcons/equalizer.svg +4 -0
  291. package/icons/PfIcons/error-circle-o.svg +4 -0
  292. package/icons/PfIcons/export.svg +4 -0
  293. package/icons/PfIcons/filter.svg +4 -0
  294. package/icons/PfIcons/flavor.svg +4 -0
  295. package/icons/PfIcons/folder-close.svg +4 -0
  296. package/icons/PfIcons/folder-open.svg +4 -0
  297. package/icons/PfIcons/globe-route.svg +4 -0
  298. package/icons/PfIcons/help.svg +4 -0
  299. package/icons/PfIcons/history.svg +4 -0
  300. package/icons/PfIcons/home.svg +4 -0
  301. package/icons/PfIcons/import.svg +4 -0
  302. package/icons/PfIcons/in-progress.svg +4 -0
  303. package/icons/PfIcons/info.svg +4 -0
  304. package/icons/PfIcons/infrastructure.svg +4 -0
  305. package/icons/PfIcons/integration.svg +4 -0
  306. package/icons/PfIcons/key.svg +4 -0
  307. package/icons/PfIcons/locked.svg +4 -0
  308. package/icons/PfIcons/maintenance.svg +4 -0
  309. package/icons/PfIcons/memory.svg +4 -0
  310. package/icons/PfIcons/messages.svg +4 -0
  311. package/icons/PfIcons/middleware.svg +4 -0
  312. package/icons/PfIcons/migration.svg +4 -0
  313. package/icons/PfIcons/module.svg +4 -0
  314. package/icons/PfIcons/monitoring.svg +4 -0
  315. package/icons/PfIcons/multicluster.svg +4 -0
  316. package/icons/PfIcons/namespaces.svg +4 -0
  317. package/icons/PfIcons/network.svg +4 -0
  318. package/icons/PfIcons/new-process.svg +4 -0
  319. package/icons/PfIcons/not-started.svg +4 -0
  320. package/icons/PfIcons/off.svg +4 -0
  321. package/icons/PfIcons/ok.svg +4 -0
  322. package/icons/PfIcons/on-running.svg +4 -0
  323. package/icons/PfIcons/on.svg +4 -0
  324. package/icons/PfIcons/open-drawer-right.svg +4 -0
  325. package/icons/PfIcons/openshift.svg +4 -0
  326. package/icons/PfIcons/openstack.svg +4 -0
  327. package/icons/PfIcons/optimize.svg +4 -0
  328. package/icons/PfIcons/orders.svg +4 -0
  329. package/icons/PfIcons/os-image.svg +4 -0
  330. package/icons/PfIcons/package.svg +4 -0
  331. package/icons/PfIcons/panel-close.svg +4 -0
  332. package/icons/PfIcons/panel-open.svg +4 -0
  333. package/icons/PfIcons/paused.svg +4 -0
  334. package/icons/PfIcons/pending.svg +4 -0
  335. package/icons/PfIcons/pficon-dragdrop.svg +4 -0
  336. package/icons/PfIcons/pficon-history.svg +4 -0
  337. package/icons/PfIcons/pficon-network-range.svg +4 -0
  338. package/icons/PfIcons/pficon-satellite.svg +4 -0
  339. package/icons/PfIcons/pficon-sort-common-asc.svg +4 -0
  340. package/icons/PfIcons/pficon-sort-common-desc.svg +4 -0
  341. package/icons/PfIcons/pficon-template.svg +4 -0
  342. package/icons/PfIcons/pficon-vcenter.svg +4 -0
  343. package/icons/PfIcons/plugged.svg +4 -0
  344. package/icons/PfIcons/port.svg +4 -0
  345. package/icons/PfIcons/print.svg +4 -0
  346. package/icons/PfIcons/private.svg +4 -0
  347. package/icons/PfIcons/process-automation.svg +4 -0
  348. package/icons/PfIcons/project.svg +4 -0
  349. package/icons/PfIcons/rebalance.svg +4 -0
  350. package/icons/PfIcons/rebooting.svg +4 -0
  351. package/icons/PfIcons/regions.svg +4 -0
  352. package/icons/PfIcons/registry.svg +4 -0
  353. package/icons/PfIcons/remove2.svg +4 -0
  354. package/icons/PfIcons/replicator.svg +4 -0
  355. package/icons/PfIcons/repository.svg +4 -0
  356. package/icons/PfIcons/resource-pool.svg +4 -0
  357. package/icons/PfIcons/resources-almost-empty.svg +4 -0
  358. package/icons/PfIcons/resources-almost-full.svg +4 -0
  359. package/icons/PfIcons/resources-empty.svg +4 -0
  360. package/icons/PfIcons/resources-full.svg +4 -0
  361. package/icons/PfIcons/running.svg +4 -0
  362. package/icons/PfIcons/save.svg +4 -0
  363. package/icons/PfIcons/screen.svg +4 -0
  364. package/icons/PfIcons/security.svg +4 -0
  365. package/icons/PfIcons/server-group.svg +4 -0
  366. package/icons/PfIcons/server.svg +4 -0
  367. package/icons/PfIcons/service-catalog.svg +4 -0
  368. package/icons/PfIcons/service.svg +4 -0
  369. package/icons/PfIcons/services.svg +4 -0
  370. package/icons/PfIcons/severity-critical.svg +4 -0
  371. package/icons/PfIcons/severity-important.svg +4 -0
  372. package/icons/PfIcons/severity-minor.svg +4 -0
  373. package/icons/PfIcons/severity-moderate.svg +4 -0
  374. package/icons/PfIcons/severity-none.svg +4 -0
  375. package/icons/PfIcons/severity-undefined.svg +4 -0
  376. package/icons/PfIcons/spinner.svg +4 -0
  377. package/icons/PfIcons/spinner2.svg +4 -0
  378. package/icons/PfIcons/storage-domain.svg +4 -0
  379. package/icons/PfIcons/task.svg +4 -0
  380. package/icons/PfIcons/tenant.svg +4 -0
  381. package/icons/PfIcons/thumb-tack.svg +4 -0
  382. package/icons/PfIcons/topology.svg +4 -0
  383. package/icons/PfIcons/treeview.svg +4 -0
  384. package/icons/PfIcons/trend-down.svg +4 -0
  385. package/icons/PfIcons/trend-up.svg +4 -0
  386. package/icons/PfIcons/unknown.svg +4 -0
  387. package/icons/PfIcons/unlocked.svg +4 -0
  388. package/icons/PfIcons/unplugged.svg +4 -0
  389. package/icons/PfIcons/user.svg +4 -0
  390. package/icons/PfIcons/users.svg +4 -0
  391. package/icons/PfIcons/virtual-machine.svg +4 -0
  392. package/icons/PfIcons/volume.svg +4 -0
  393. package/icons/PfIcons/warning-triangle.svg +4 -0
  394. package/icons/PfIcons/zone.svg +4 -0
  395. package/layouts/Flex/flex.scss +83 -19
  396. package/layouts/Gallery/gallery.css +6 -2
  397. package/layouts/_index.css +6 -2
  398. package/package.json +55 -17
  399. package/patternfly-base-no-globals.css +969 -489
  400. package/patternfly-base.css +976 -489
  401. package/patternfly-charts.css +3 -3
  402. package/patternfly-no-globals.css +3623 -1194
  403. package/patternfly.css +3630 -1194
  404. package/patternfly.min.css +1 -1
  405. package/patternfly.min.css.map +1 -1
  406. package/patternfly.scss +48 -0
  407. package/sass-utilities/functions.scss +32 -25
  408. package/sass-utilities/mixins.scss +54 -23
  409. package/sass-utilities/namespaces-components.scss +6 -0
  410. package/sass-utilities/scss-variables.scss +3 -0
package/docs/components/Toolbar/examples/Toolbar.md CHANGED
@@ -14,8 +14,8 @@ Toolbar relies on groups (`.pf-v6-c-toolbar__group`) and items (`.pf-v6-c-toolba
14
14
  | -- | -- | -- |
15
15
  | `.pf-v6-c-toolbar__group` | `--pf-v6-c-toolbar__group--ColumnGap` | `16px` |
16
16
  | `.pf-v6-c-toolbar__item` | `--pf-v6-c-toolbar__item--ColumnGap` | `16px` |
17
- | `.pf-m-[column/row]-gap-[none/sm/md/lg/xl/2xl]{-on-[breakpoint]}` | `.pf-v6-c-toolbar__content-section`, `.pf-v6-c-toolbar__group`, `.pf-v6-c-toolbar__item` | Modifies toolbar group or item spacing at optional [breakpoint](/tokens/all-patternfly-tokens). |
18
- | `.pf-m-gap-[none/sm/md/lg/xl/2xl]{-on-[breakpoint]}` | `.pf-v6-c-toolbar__content-section`, `.pf-v6-c-toolbar__group`, `.pf-v6-c-toolbar__item` | Modifies both column gap and row gap for toolbar group or item spacing at optional [breakpoint](/tokens/all-patternfly-tokens). |
17
+ | `.pf-m-[column/row]-gap-[none/sm/md/lg/xl/2xl]{-on-[breakpoint]}` | `.pf-v6-c-toolbar__content-section`, `.pf-v6-c-toolbar__group`, `.pf-v6-c-toolbar__item` | Modifies toolbar group or item spacing at optional [breakpoint](/foundations-and-styles/design-tokens/all-design-tokens). |
18
+ | `.pf-m-gap-[none/sm/md/lg/xl/2xl]{-on-[breakpoint]}` | `.pf-v6-c-toolbar__content-section`, `.pf-v6-c-toolbar__group`, `.pf-v6-c-toolbar__item` | Modifies both column gap and row gap for toolbar group or item spacing at optional [breakpoint](/foundations-and-styles/design-tokens/all-design-tokens). |
19
19
 
20
20
  ### Toolbar item types
21
21
 
@@ -28,6 +28,8 @@ Toolbar relies on groups (`.pf-v6-c-toolbar__group`) and items (`.pf-v6-c-toolba
28
28
  | Class | Applied to | Outcome |
29
29
  | -- | -- | -- |
30
30
  | `.pf-m-[hidden/visible]` | `.pf-v6-c-toolbar > *` | Modifies toolbar element to be hidden/visible. |
31
+ | `.pf-m-[hidden/visible]{-on-[breakpoint]}` | `.pf-v6-c-toolbar__content-section`, `.pf-v6-c-toolbar__group`, `.pf-v6-c-toolbar__item` | Modifies toolbar elements to be hidden/visible on an option breakpoint. |
32
+ | `.pf-m-[hidden/visible]{-on-[breakpoint]}-height` | `.pf-v6-c-toolbar__content-section`, `.pf-v6-c-toolbar__group`, `.pf-v6-c-toolbar__item` | Modifies toolbar elements to be hidden/visible on an option height breakpoint. Primarily for use with vertical toolbars. |
31
33
  | `.pf-m-flex-grow` | `.pf-v6-c-toolbar__group`, `.pf-v6-c-toolbar__item` | Modifies toolbar element to `flex-grow: 1`, allowing it to consume available main-axis space. |
32
34
  | `.pf-m-align-[start/end]` | `.pf-v6-c-toolbar__group`, `.pf-v6-c-toolbar__item` | Modifies toolbar [main axis](https://developer.mozilla.org/en-US/docs/Glossary/Main_Axis) element alignment. |
33
35
  | `.pf-m-align-items-[stretch/baseline/start/center/end]` | `.pf-v6-c-toolbar__content-section`, `.pf-v6-c-toolbar__group`, `.pf-v6-c-toolbar__item` | Modifies toolbar element [cross axis](https://developer.mozilla.org/en-US/docs/Glossary/Cross_Axis) child alignment. |
@@ -37,7 +39,7 @@ Toolbar relies on groups (`.pf-v6-c-toolbar__group`) and items (`.pf-v6-c-toolba
37
39
 
38
40
  Several components in the following examples do not include functional and/or accessibility specifications (for example `.pf-v6-c-select`, `.pf-v6-c-options-menu`). Rather, `.pf-v6-c-toolbar` focuses on functionality and accessibility specifications that apply to it only.
39
41
 
40
- **Available [breakpoints](/tokens/all-patternfly-tokens) are: `-on-sm`, `-on-md`, `-on-lg`, `-on-xl`, and `-on-2xl`.**
42
+ **Available [breakpoints](/foundations-and-styles/design-tokens/all-design-tokens) are: `-on-sm`, `-on-md`, `-on-lg`, `-on-xl`, and `-on-2xl`.**
41
43
 
42
44
  ## Examples
43
45
 
@@ -181,8 +183,8 @@ Several components in the following examples do not include functional and/or ac
181
183
 
182
184
  | Class | Applied to | Outcome |
183
185
  | -- | -- | -- |
184
- | `--pf-v6-c-toolbar__item--Width: {width}` | `.pf-v6-c-toolbar__item` | Modifies the width value of a toolbar item at optional [breakpoint](/tokens/all-patternfly-tokens). |
185
- | `--pf-v6-c-toolbar__item--MinWidth: {width}` | `.pf-v6-c-toolbar__item` | Modifies the min width value of a toolbar item at optional [breakpoint](/tokens/all-patternfly-tokens). |
186
+ | `--pf-v6-c-toolbar__item--Width: {width}` | `.pf-v6-c-toolbar__item` | Modifies the width value of a toolbar item at optional [breakpoint](/foundations-and-styles/design-tokens/all-design-tokens). |
187
+ | `--pf-v6-c-toolbar__item--MinWidth: {width}` | `.pf-v6-c-toolbar__item` | Modifies the min width value of a toolbar item at optional [breakpoint](/foundations-and-styles/design-tokens/all-design-tokens). |
186
188
 
187
189
  ## Group types
188
190
 
@@ -202,7 +204,19 @@ Several components in the following examples do not include functional and/or ac
202
204
  <span class="pf-v6-c-menu-toggle__text">Status</span>
203
205
  <span class="pf-v6-c-menu-toggle__controls">
204
206
  <span class="pf-v6-c-menu-toggle__toggle-icon">
205
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
207
+ <svg
208
+ class="pf-v6-svg"
209
+ viewBox="0 0 20 20"
210
+ fill="currentColor"
211
+ aria-hidden="true"
212
+ role="img"
213
+ width="1em"
214
+ height="1em"
215
+ >
216
+ <path
217
+ d="M18.92 5.62C18.77 5.25 18.4 5 18 5H2a1.003 1.003 0 0 0-.71 1.71l7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65c.29-.29.37-.72.22-1.09Z"
218
+ />
219
+ </svg>
206
220
  </span>
207
221
  </span>
208
222
  </button>
@@ -217,7 +231,19 @@ Several components in the following examples do not include functional and/or ac
217
231
  <span class="pf-v6-c-menu-toggle__text">Risk</span>
218
232
  <span class="pf-v6-c-menu-toggle__controls">
219
233
  <span class="pf-v6-c-menu-toggle__toggle-icon">
220
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
234
+ <svg
235
+ class="pf-v6-svg"
236
+ viewBox="0 0 20 20"
237
+ fill="currentColor"
238
+ aria-hidden="true"
239
+ role="img"
240
+ width="1em"
241
+ height="1em"
242
+ >
243
+ <path
244
+ d="M18.92 5.62C18.77 5.25 18.4 5 18 5H2a1.003 1.003 0 0 0-.71 1.71l7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65c.29-.29.37-.72.22-1.09Z"
245
+ />
246
+ </svg>
221
247
  </span>
222
248
  </span>
223
249
  </button>
@@ -245,7 +271,19 @@ Several components in the following examples do not include functional and/or ac
245
271
  <span class="pf-v6-c-menu-toggle__text">Name</span>
246
272
  <span class="pf-v6-c-menu-toggle__controls">
247
273
  <span class="pf-v6-c-menu-toggle__toggle-icon">
248
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
274
+ <svg
275
+ class="pf-v6-svg"
276
+ viewBox="0 0 20 20"
277
+ fill="currentColor"
278
+ aria-hidden="true"
279
+ role="img"
280
+ width="1em"
281
+ height="1em"
282
+ >
283
+ <path
284
+ d="M18.92 5.62C18.77 5.25 18.4 5 18 5H2a1.003 1.003 0 0 0-.71 1.71l7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65c.29-.29.37-.72.22-1.09Z"
285
+ />
286
+ </svg>
249
287
  </span>
250
288
  </span>
251
289
  </button>
@@ -281,7 +319,19 @@ Several components in the following examples do not include functional and/or ac
281
319
  <span class="pf-v6-c-menu-toggle__text">Status</span>
282
320
  <span class="pf-v6-c-menu-toggle__controls">
283
321
  <span class="pf-v6-c-menu-toggle__toggle-icon">
284
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
322
+ <svg
323
+ class="pf-v6-svg"
324
+ viewBox="0 0 20 20"
325
+ fill="currentColor"
326
+ aria-hidden="true"
327
+ role="img"
328
+ width="1em"
329
+ height="1em"
330
+ >
331
+ <path
332
+ d="M18.92 5.62C18.77 5.25 18.4 5 18 5H2a1.003 1.003 0 0 0-.71 1.71l7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65c.29-.29.37-.72.22-1.09Z"
333
+ />
334
+ </svg>
285
335
  </span>
286
336
  </span>
287
337
  </button>
@@ -328,7 +378,19 @@ Several components in the following examples do not include functional and/or ac
328
378
  aria-label="Column view"
329
379
  >
330
380
  <span class="pf-v6-c-button__icon">
331
- <i class="fas fa-columns" aria-hidden="true"></i>
381
+ <svg
382
+ class="pf-v6-svg"
383
+ viewBox="0 0 512 512"
384
+ fill="currentColor"
385
+ aria-hidden="true"
386
+ role="img"
387
+ width="1em"
388
+ height="1em"
389
+ >
390
+ <path
391
+ d="M464 32H48C21.49 32 0 53.49 0 80v352c0 26.51 21.49 48 48 48h416c26.51 0 48-21.49 48-48V80c0-26.51-21.49-48-48-48zM224 416H64V160h160v256zm224 0H288V160h160v256z"
392
+ />
393
+ </svg>
332
394
  </span>
333
395
  </button>
334
396
  </div>
@@ -339,7 +401,19 @@ Several components in the following examples do not include functional and/or ac
339
401
  aria-label="Expand"
340
402
  >
341
403
  <span class="pf-v6-c-button__icon">
342
- <i class="fas fa-expand" aria-hidden="true"></i>
404
+ <svg
405
+ class="pf-v6-svg"
406
+ viewBox="0 0 448 512"
407
+ fill="currentColor"
408
+ aria-hidden="true"
409
+ role="img"
410
+ width="1em"
411
+ height="1em"
412
+ >
413
+ <path
414
+ d="M0 180V56c0-13.3 10.7-24 24-24h124c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12H64v84c0 6.6-5.4 12-12 12H12c-6.6 0-12-5.4-12-12zM288 44v40c0 6.6 5.4 12 12 12h84v84c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12V56c0-13.3-10.7-24-24-24H300c-6.6 0-12 5.4-12 12zm148 276h-40c-6.6 0-12 5.4-12 12v84h-84c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h124c13.3 0 24-10.7 24-24V332c0-6.6-5.4-12-12-12zM160 468v-40c0-6.6-5.4-12-12-12H64v-84c0-6.6-5.4-12-12-12H12c-6.6 0-12 5.4-12 12v124c0 13.3 10.7 24 24 24h124c6.6 0 12-5.4 12-12z"
415
+ />
416
+ </svg>
343
417
  </span>
344
418
  </button>
345
419
  </div>
@@ -350,7 +424,19 @@ Several components in the following examples do not include functional and/or ac
350
424
  aria-label="Settings"
351
425
  >
352
426
  <span class="pf-v6-c-button__icon">
353
- <i class="fas fa-cog" aria-hidden="true"></i>
427
+ <svg
428
+ class="pf-v6-svg"
429
+ viewBox="0 0 32 32"
430
+ fill="currentColor"
431
+ aria-hidden="true"
432
+ role="img"
433
+ width="1em"
434
+ height="1em"
435
+ >
436
+ <path
437
+ d="M30.168 12.894a.5.5 0 0 0-.488-.394h-2.732a11.512 11.512 0 0 0-.729-1.769l1.931-1.93a.5.5 0 0 0 .066-.625 14.693 14.693 0 0 0-4.393-4.392.498.498 0 0 0-.624.067l-1.93 1.93a11.512 11.512 0 0 0-1.769-.729V2.319a.5.5 0 0 0-.395-.489 14.81 14.81 0 0 0-6.211 0 .5.5 0 0 0-.395.489v2.733c-.614.196-1.207.439-1.769.729L8.8 3.851a.498.498 0 0 0-.624-.067 14.714 14.714 0 0 0-4.393 4.392.5.5 0 0 0 .066.625l1.931 1.93a11.512 11.512 0 0 0-.729 1.769H2.319a.5.5 0 0 0-.488.394 14.652 14.652 0 0 0 0 6.212.5.5 0 0 0 .488.394h2.732c.196.615.44 1.207.729 1.769l-1.931 1.93a.5.5 0 0 0-.066.625 14.673 14.673 0 0 0 4.393 4.392.498.498 0 0 0 .624-.067l1.93-1.93c.562.289 1.154.533 1.769.729v2.733a.5.5 0 0 0 .395.489 14.686 14.686 0 0 0 6.21 0 .5.5 0 0 0 .395-.489v-2.733a11.454 11.454 0 0 0 1.769-.729l1.93 1.93a.5.5 0 0 0 .624.067 14.714 14.714 0 0 0 4.393-4.392.5.5 0 0 0-.066-.625l-1.931-1.93c.289-.562.533-1.154.729-1.769h2.732a.5.5 0 0 0 .488-.394 14.652 14.652 0 0 0 0-6.212ZM16 21.25c-2.895 0-5.25-2.355-5.25-5.25s2.355-5.25 5.25-5.25 5.25 2.355 5.25 5.25-2.355 5.25-5.25 5.25Z"
438
+ />
439
+ </svg>
354
440
  </span>
355
441
  </button>
356
442
  </div>
@@ -419,7 +505,19 @@ Several components in the following examples do not include functional and/or ac
419
505
  id="toolbar-group-label-group-label-group-statusremove-label-one"
420
506
  >
421
507
  <span class="pf-v6-c-button__icon">
422
- <i class="fas fa-times" aria-hidden="true"></i>
508
+ <svg
509
+ class="pf-v6-svg"
510
+ viewBox="0 0 20 20"
511
+ fill="currentColor"
512
+ aria-hidden="true"
513
+ role="img"
514
+ width="1em"
515
+ height="1em"
516
+ >
517
+ <path
518
+ 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"
519
+ />
520
+ </svg>
423
521
  </span>
424
522
  </button>
425
523
  </span>
@@ -444,7 +542,19 @@ Several components in the following examples do not include functional and/or ac
444
542
  id="toolbar-group-label-group-label-group-statusremove-label-two"
445
543
  >
446
544
  <span class="pf-v6-c-button__icon">
447
- <i class="fas fa-times" aria-hidden="true"></i>
545
+ <svg
546
+ class="pf-v6-svg"
547
+ viewBox="0 0 20 20"
548
+ fill="currentColor"
549
+ aria-hidden="true"
550
+ role="img"
551
+ width="1em"
552
+ height="1em"
553
+ >
554
+ <path
555
+ 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"
556
+ />
557
+ </svg>
448
558
  </span>
449
559
  </button>
450
560
  </span>
@@ -469,7 +579,19 @@ Several components in the following examples do not include functional and/or ac
469
579
  id="toolbar-group-label-group-label-group-statusremove-label-three"
470
580
  >
471
581
  <span class="pf-v6-c-button__icon">
472
- <i class="fas fa-times" aria-hidden="true"></i>
582
+ <svg
583
+ class="pf-v6-svg"
584
+ viewBox="0 0 20 20"
585
+ fill="currentColor"
586
+ aria-hidden="true"
587
+ role="img"
588
+ width="1em"
589
+ height="1em"
590
+ >
591
+ <path
592
+ 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"
593
+ />
594
+ </svg>
473
595
  </span>
474
596
  </button>
475
597
  </span>
@@ -511,7 +633,19 @@ Several components in the following examples do not include functional and/or ac
511
633
  id="toolbar-group-label-group-label-group-riskremove-label-one"
512
634
  >
513
635
  <span class="pf-v6-c-button__icon">
514
- <i class="fas fa-times" aria-hidden="true"></i>
636
+ <svg
637
+ class="pf-v6-svg"
638
+ viewBox="0 0 20 20"
639
+ fill="currentColor"
640
+ aria-hidden="true"
641
+ role="img"
642
+ width="1em"
643
+ height="1em"
644
+ >
645
+ <path
646
+ 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"
647
+ />
648
+ </svg>
515
649
  </span>
516
650
  </button>
517
651
  </span>
@@ -536,7 +670,19 @@ Several components in the following examples do not include functional and/or ac
536
670
  id="toolbar-group-label-group-label-group-riskremove-label-two"
537
671
  >
538
672
  <span class="pf-v6-c-button__icon">
539
- <i class="fas fa-times" aria-hidden="true"></i>
673
+ <svg
674
+ class="pf-v6-svg"
675
+ viewBox="0 0 20 20"
676
+ fill="currentColor"
677
+ aria-hidden="true"
678
+ role="img"
679
+ width="1em"
680
+ height="1em"
681
+ >
682
+ <path
683
+ 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"
684
+ />
685
+ </svg>
540
686
  </span>
541
687
  </button>
542
688
  </span>
@@ -561,7 +707,19 @@ Several components in the following examples do not include functional and/or ac
561
707
  id="toolbar-group-label-group-label-group-riskremove-label-three"
562
708
  >
563
709
  <span class="pf-v6-c-button__icon">
564
- <i class="fas fa-times" aria-hidden="true"></i>
710
+ <svg
711
+ class="pf-v6-svg"
712
+ viewBox="0 0 20 20"
713
+ fill="currentColor"
714
+ aria-hidden="true"
715
+ role="img"
716
+ width="1em"
717
+ height="1em"
718
+ >
719
+ <path
720
+ 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"
721
+ />
722
+ </svg>
565
723
  </span>
566
724
  </button>
567
725
  </span>
@@ -596,7 +754,19 @@ Several components in the following examples do not include functional and/or ac
596
754
  aria-controls="toolbar-toggle-group-on-mobile-expandable-content"
597
755
  >
598
756
  <span class="pf-v6-c-menu-toggle__icon">
599
- <i class="fas fa-filter" aria-hidden="true"></i>
757
+ <svg
758
+ class="pf-v6-svg"
759
+ viewBox="0 0 32 32"
760
+ fill="currentColor"
761
+ aria-hidden="true"
762
+ role="img"
763
+ width="1em"
764
+ height="1em"
765
+ >
766
+ <path
767
+ d="M29.875 3.5V7a.876.876 0 0 1-.256.619l-9.744 9.744v10.638a.875.875 0 0 1-.599.83l-6 2a.876.876 0 0 1-.788-.12.874.874 0 0 1-.363-.71V17.363L2.381 7.619A.876.876 0 0 1 2.125 7V3.5c0-.758.617-1.375 1.375-1.375h25c.758 0 1.375.617 1.375 1.375Z"
768
+ />
769
+ </svg>
600
770
  </span>
601
771
  </button>
602
772
  </div>
@@ -616,7 +786,19 @@ Several components in the following examples do not include functional and/or ac
616
786
  <span class="pf-v6-c-menu-toggle__text">Name</span>
617
787
  <span class="pf-v6-c-menu-toggle__controls">
618
788
  <span class="pf-v6-c-menu-toggle__toggle-icon">
619
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
789
+ <svg
790
+ class="pf-v6-svg"
791
+ viewBox="0 0 20 20"
792
+ fill="currentColor"
793
+ aria-hidden="true"
794
+ role="img"
795
+ width="1em"
796
+ height="1em"
797
+ >
798
+ <path
799
+ d="M18.92 5.62C18.77 5.25 18.4 5 18 5H2a1.003 1.003 0 0 0-.71 1.71l7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65c.29-.29.37-.72.22-1.09Z"
800
+ />
801
+ </svg>
620
802
  </span>
621
803
  </span>
622
804
  </button>
@@ -653,7 +835,19 @@ Several components in the following examples do not include functional and/or ac
653
835
  <span class="pf-v6-c-menu-toggle__text">Status</span>
654
836
  <span class="pf-v6-c-menu-toggle__controls">
655
837
  <span class="pf-v6-c-menu-toggle__toggle-icon">
656
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
838
+ <svg
839
+ class="pf-v6-svg"
840
+ viewBox="0 0 20 20"
841
+ fill="currentColor"
842
+ aria-hidden="true"
843
+ role="img"
844
+ width="1em"
845
+ height="1em"
846
+ >
847
+ <path
848
+ d="M18.92 5.62C18.77 5.25 18.4 5 18 5H2a1.003 1.003 0 0 0-.71 1.71l7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65c.29-.29.37-.72.22-1.09Z"
849
+ />
850
+ </svg>
657
851
  </span>
658
852
  </span>
659
853
  </button>
@@ -668,7 +862,19 @@ Several components in the following examples do not include functional and/or ac
668
862
  <span class="pf-v6-c-menu-toggle__text">Risk</span>
669
863
  <span class="pf-v6-c-menu-toggle__controls">
670
864
  <span class="pf-v6-c-menu-toggle__toggle-icon">
671
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
865
+ <svg
866
+ class="pf-v6-svg"
867
+ viewBox="0 0 20 20"
868
+ fill="currentColor"
869
+ aria-hidden="true"
870
+ role="img"
871
+ width="1em"
872
+ height="1em"
873
+ >
874
+ <path
875
+ d="M18.92 5.62C18.77 5.25 18.4 5 18 5H2a1.003 1.003 0 0 0-.71 1.71l7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65c.29-.29.37-.72.22-1.09Z"
876
+ />
877
+ </svg>
672
878
  </span>
673
879
  </span>
674
880
  </button>
@@ -697,7 +903,19 @@ Several components in the following examples do not include functional and/or ac
697
903
  <span class="pf-v6-c-menu-toggle__text">Name</span>
698
904
  <span class="pf-v6-c-menu-toggle__controls">
699
905
  <span class="pf-v6-c-menu-toggle__toggle-icon">
700
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
906
+ <svg
907
+ class="pf-v6-svg"
908
+ viewBox="0 0 20 20"
909
+ fill="currentColor"
910
+ aria-hidden="true"
911
+ role="img"
912
+ width="1em"
913
+ height="1em"
914
+ >
915
+ <path
916
+ d="M18.92 5.62C18.77 5.25 18.4 5 18 5H2a1.003 1.003 0 0 0-.71 1.71l7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65c.29-.29.37-.72.22-1.09Z"
917
+ />
918
+ </svg>
701
919
  </span>
702
920
  </span>
703
921
  </button>
@@ -734,7 +952,19 @@ Several components in the following examples do not include functional and/or ac
734
952
  <span class="pf-v6-c-menu-toggle__text">Status</span>
735
953
  <span class="pf-v6-c-menu-toggle__controls">
736
954
  <span class="pf-v6-c-menu-toggle__toggle-icon">
737
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
955
+ <svg
956
+ class="pf-v6-svg"
957
+ viewBox="0 0 20 20"
958
+ fill="currentColor"
959
+ aria-hidden="true"
960
+ role="img"
961
+ width="1em"
962
+ height="1em"
963
+ >
964
+ <path
965
+ d="M18.92 5.62C18.77 5.25 18.4 5 18 5H2a1.003 1.003 0 0 0-.71 1.71l7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65c.29-.29.37-.72.22-1.09Z"
966
+ />
967
+ </svg>
738
968
  </span>
739
969
  </span>
740
970
  </button>
@@ -749,7 +979,19 @@ Several components in the following examples do not include functional and/or ac
749
979
  <span class="pf-v6-c-menu-toggle__text">Risk</span>
750
980
  <span class="pf-v6-c-menu-toggle__controls">
751
981
  <span class="pf-v6-c-menu-toggle__toggle-icon">
752
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
982
+ <svg
983
+ class="pf-v6-svg"
984
+ viewBox="0 0 20 20"
985
+ fill="currentColor"
986
+ aria-hidden="true"
987
+ role="img"
988
+ width="1em"
989
+ height="1em"
990
+ >
991
+ <path
992
+ d="M18.92 5.62C18.77 5.25 18.4 5 18 5H2a1.003 1.003 0 0 0-.71 1.71l7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65c.29-.29.37-.72.22-1.09Z"
993
+ />
994
+ </svg>
753
995
  </span>
754
996
  </span>
755
997
  </button>
@@ -777,7 +1019,19 @@ Several components in the following examples do not include functional and/or ac
777
1019
  aria-controls="toolbar-toggle-group-desktop-expandable-content"
778
1020
  >
779
1021
  <span class="pf-v6-c-menu-toggle__icon">
780
- <i class="fas fa-filter" aria-hidden="true"></i>
1022
+ <svg
1023
+ class="pf-v6-svg"
1024
+ viewBox="0 0 32 32"
1025
+ fill="currentColor"
1026
+ aria-hidden="true"
1027
+ role="img"
1028
+ width="1em"
1029
+ height="1em"
1030
+ >
1031
+ <path
1032
+ d="M29.875 3.5V7a.876.876 0 0 1-.256.619l-9.744 9.744v10.638a.875.875 0 0 1-.599.83l-6 2a.876.876 0 0 1-.788-.12.874.874 0 0 1-.363-.71V17.363L2.381 7.619A.876.876 0 0 1 2.125 7V3.5c0-.758.617-1.375 1.375-1.375h25c.758 0 1.375.617 1.375 1.375Z"
1033
+ />
1034
+ </svg>
781
1035
  </span>
782
1036
  </button>
783
1037
  </div>
@@ -797,7 +1051,19 @@ Several components in the following examples do not include functional and/or ac
797
1051
  <span class="pf-v6-c-menu-toggle__text">Name</span>
798
1052
  <span class="pf-v6-c-menu-toggle__controls">
799
1053
  <span class="pf-v6-c-menu-toggle__toggle-icon">
800
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
1054
+ <svg
1055
+ class="pf-v6-svg"
1056
+ viewBox="0 0 20 20"
1057
+ fill="currentColor"
1058
+ aria-hidden="true"
1059
+ role="img"
1060
+ width="1em"
1061
+ height="1em"
1062
+ >
1063
+ <path
1064
+ d="M18.92 5.62C18.77 5.25 18.4 5 18 5H2a1.003 1.003 0 0 0-.71 1.71l7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65c.29-.29.37-.72.22-1.09Z"
1065
+ />
1066
+ </svg>
801
1067
  </span>
802
1068
  </span>
803
1069
  </button>
@@ -836,7 +1102,19 @@ Several components in the following examples do not include functional and/or ac
836
1102
  <span class="pf-v6-c-menu-toggle__text">Status</span>
837
1103
  <span class="pf-v6-c-menu-toggle__controls">
838
1104
  <span class="pf-v6-c-menu-toggle__toggle-icon">
839
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
1105
+ <svg
1106
+ class="pf-v6-svg"
1107
+ viewBox="0 0 20 20"
1108
+ fill="currentColor"
1109
+ aria-hidden="true"
1110
+ role="img"
1111
+ width="1em"
1112
+ height="1em"
1113
+ >
1114
+ <path
1115
+ d="M18.92 5.62C18.77 5.25 18.4 5 18 5H2a1.003 1.003 0 0 0-.71 1.71l7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65c.29-.29.37-.72.22-1.09Z"
1116
+ />
1117
+ </svg>
840
1118
  </span>
841
1119
  </span>
842
1120
  </button>
@@ -851,7 +1129,19 @@ Several components in the following examples do not include functional and/or ac
851
1129
  <span class="pf-v6-c-menu-toggle__text">Risk</span>
852
1130
  <span class="pf-v6-c-menu-toggle__controls">
853
1131
  <span class="pf-v6-c-menu-toggle__toggle-icon">
854
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
1132
+ <svg
1133
+ class="pf-v6-svg"
1134
+ viewBox="0 0 20 20"
1135
+ fill="currentColor"
1136
+ aria-hidden="true"
1137
+ role="img"
1138
+ width="1em"
1139
+ height="1em"
1140
+ >
1141
+ <path
1142
+ d="M18.92 5.62C18.77 5.25 18.4 5 18 5H2a1.003 1.003 0 0 0-.71 1.71l7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65c.29-.29.37-.72.22-1.09Z"
1143
+ />
1144
+ </svg>
855
1145
  </span>
856
1146
  </span>
857
1147
  </button>
@@ -881,7 +1171,19 @@ Several components in the following examples do not include functional and/or ac
881
1171
  <span class="pf-v6-c-menu-toggle__text">Name</span>
882
1172
  <span class="pf-v6-c-menu-toggle__controls">
883
1173
  <span class="pf-v6-c-menu-toggle__toggle-icon">
884
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
1174
+ <svg
1175
+ class="pf-v6-svg"
1176
+ viewBox="0 0 20 20"
1177
+ fill="currentColor"
1178
+ aria-hidden="true"
1179
+ role="img"
1180
+ width="1em"
1181
+ height="1em"
1182
+ >
1183
+ <path
1184
+ d="M18.92 5.62C18.77 5.25 18.4 5 18 5H2a1.003 1.003 0 0 0-.71 1.71l7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65c.29-.29.37-.72.22-1.09Z"
1185
+ />
1186
+ </svg>
885
1187
  </span>
886
1188
  </span>
887
1189
  </button>
@@ -918,7 +1220,19 @@ Several components in the following examples do not include functional and/or ac
918
1220
  <span class="pf-v6-c-menu-toggle__text">Status</span>
919
1221
  <span class="pf-v6-c-menu-toggle__controls">
920
1222
  <span class="pf-v6-c-menu-toggle__toggle-icon">
921
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
1223
+ <svg
1224
+ class="pf-v6-svg"
1225
+ viewBox="0 0 20 20"
1226
+ fill="currentColor"
1227
+ aria-hidden="true"
1228
+ role="img"
1229
+ width="1em"
1230
+ height="1em"
1231
+ >
1232
+ <path
1233
+ d="M18.92 5.62C18.77 5.25 18.4 5 18 5H2a1.003 1.003 0 0 0-.71 1.71l7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65c.29-.29.37-.72.22-1.09Z"
1234
+ />
1235
+ </svg>
922
1236
  </span>
923
1237
  </span>
924
1238
  </button>
@@ -933,7 +1247,19 @@ Several components in the following examples do not include functional and/or ac
933
1247
  <span class="pf-v6-c-menu-toggle__text">Risk</span>
934
1248
  <span class="pf-v6-c-menu-toggle__controls">
935
1249
  <span class="pf-v6-c-menu-toggle__toggle-icon">
936
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
1250
+ <svg
1251
+ class="pf-v6-svg"
1252
+ viewBox="0 0 20 20"
1253
+ fill="currentColor"
1254
+ aria-hidden="true"
1255
+ role="img"
1256
+ width="1em"
1257
+ height="1em"
1258
+ >
1259
+ <path
1260
+ d="M18.92 5.62C18.77 5.25 18.4 5 18 5H2a1.003 1.003 0 0 0-.71 1.71l7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65c.29-.29.37-.72.22-1.09Z"
1261
+ />
1262
+ </svg>
937
1263
  </span>
938
1264
  </span>
939
1265
  </button>
@@ -1014,7 +1340,19 @@ Several components in the following examples do not include functional and/or ac
1014
1340
  >
1015
1341
  <span class="pf-v6-c-menu-toggle__controls">
1016
1342
  <span class="pf-v6-c-menu-toggle__toggle-icon">
1017
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
1343
+ <svg
1344
+ class="pf-v6-svg"
1345
+ viewBox="0 0 20 20"
1346
+ fill="currentColor"
1347
+ aria-hidden="true"
1348
+ role="img"
1349
+ width="1em"
1350
+ height="1em"
1351
+ >
1352
+ <path
1353
+ d="M18.92 5.62C18.77 5.25 18.4 5 18 5H2a1.003 1.003 0 0 0-.71 1.71l7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65c.29-.29.37-.72.22-1.09Z"
1354
+ />
1355
+ </svg>
1018
1356
  </span>
1019
1357
  </span>
1020
1358
  </button>
@@ -1031,7 +1369,19 @@ Several components in the following examples do not include functional and/or ac
1031
1369
  aria-controls="toolbar-selected-filters-toggle-group-collapsed-example-expandable-content"
1032
1370
  >
1033
1371
  <span class="pf-v6-c-menu-toggle__icon">
1034
- <i class="fas fa-filter" aria-hidden="true"></i>
1372
+ <svg
1373
+ class="pf-v6-svg"
1374
+ viewBox="0 0 32 32"
1375
+ fill="currentColor"
1376
+ aria-hidden="true"
1377
+ role="img"
1378
+ width="1em"
1379
+ height="1em"
1380
+ >
1381
+ <path
1382
+ d="M29.875 3.5V7a.876.876 0 0 1-.256.619l-9.744 9.744v10.638a.875.875 0 0 1-.599.83l-6 2a.876.876 0 0 1-.788-.12.874.874 0 0 1-.363-.71V17.363L2.381 7.619A.876.876 0 0 1 2.125 7V3.5c0-.758.617-1.375 1.375-1.375h25c.758 0 1.375.617 1.375 1.375Z"
1383
+ />
1384
+ </svg>
1035
1385
  </span>
1036
1386
  </button>
1037
1387
  </div>
@@ -1051,7 +1401,19 @@ Several components in the following examples do not include functional and/or ac
1051
1401
  <span class="pf-v6-c-menu-toggle__text">Name</span>
1052
1402
  <span class="pf-v6-c-menu-toggle__controls">
1053
1403
  <span class="pf-v6-c-menu-toggle__toggle-icon">
1054
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
1404
+ <svg
1405
+ class="pf-v6-svg"
1406
+ viewBox="0 0 20 20"
1407
+ fill="currentColor"
1408
+ aria-hidden="true"
1409
+ role="img"
1410
+ width="1em"
1411
+ height="1em"
1412
+ >
1413
+ <path
1414
+ d="M18.92 5.62C18.77 5.25 18.4 5 18 5H2a1.003 1.003 0 0 0-.71 1.71l7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65c.29-.29.37-.72.22-1.09Z"
1415
+ />
1416
+ </svg>
1055
1417
  </span>
1056
1418
  </span>
1057
1419
  </button>
@@ -1088,7 +1450,19 @@ Several components in the following examples do not include functional and/or ac
1088
1450
  <span class="pf-v6-c-menu-toggle__text">Status</span>
1089
1451
  <span class="pf-v6-c-menu-toggle__controls">
1090
1452
  <span class="pf-v6-c-menu-toggle__toggle-icon">
1091
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
1453
+ <svg
1454
+ class="pf-v6-svg"
1455
+ viewBox="0 0 20 20"
1456
+ fill="currentColor"
1457
+ aria-hidden="true"
1458
+ role="img"
1459
+ width="1em"
1460
+ height="1em"
1461
+ >
1462
+ <path
1463
+ d="M18.92 5.62C18.77 5.25 18.4 5 18 5H2a1.003 1.003 0 0 0-.71 1.71l7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65c.29-.29.37-.72.22-1.09Z"
1464
+ />
1465
+ </svg>
1092
1466
  </span>
1093
1467
  </span>
1094
1468
  </button>
@@ -1103,7 +1477,19 @@ Several components in the following examples do not include functional and/or ac
1103
1477
  <span class="pf-v6-c-menu-toggle__text">Risk</span>
1104
1478
  <span class="pf-v6-c-menu-toggle__controls">
1105
1479
  <span class="pf-v6-c-menu-toggle__toggle-icon">
1106
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
1480
+ <svg
1481
+ class="pf-v6-svg"
1482
+ viewBox="0 0 20 20"
1483
+ fill="currentColor"
1484
+ aria-hidden="true"
1485
+ role="img"
1486
+ width="1em"
1487
+ height="1em"
1488
+ >
1489
+ <path
1490
+ d="M18.92 5.62C18.77 5.25 18.4 5 18 5H2a1.003 1.003 0 0 0-.71 1.71l7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65c.29-.29.37-.72.22-1.09Z"
1491
+ />
1492
+ </svg>
1107
1493
  </span>
1108
1494
  </span>
1109
1495
  </button>
@@ -1186,7 +1572,19 @@ Several components in the following examples do not include functional and/or ac
1186
1572
  >
1187
1573
  <span class="pf-v6-c-menu-toggle__controls">
1188
1574
  <span class="pf-v6-c-menu-toggle__toggle-icon">
1189
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
1575
+ <svg
1576
+ class="pf-v6-svg"
1577
+ viewBox="0 0 20 20"
1578
+ fill="currentColor"
1579
+ aria-hidden="true"
1580
+ role="img"
1581
+ width="1em"
1582
+ height="1em"
1583
+ >
1584
+ <path
1585
+ d="M18.92 5.62C18.77 5.25 18.4 5 18 5H2a1.003 1.003 0 0 0-.71 1.71l7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65c.29-.29.37-.72.22-1.09Z"
1586
+ />
1587
+ </svg>
1190
1588
  </span>
1191
1589
  </span>
1192
1590
  </button>
@@ -1203,7 +1601,19 @@ Several components in the following examples do not include functional and/or ac
1203
1601
  aria-controls="toolbar-selected-filters-toggle-group-expanded-example-expandable-content"
1204
1602
  >
1205
1603
  <span class="pf-v6-c-menu-toggle__icon">
1206
- <i class="fas fa-filter" aria-hidden="true"></i>
1604
+ <svg
1605
+ class="pf-v6-svg"
1606
+ viewBox="0 0 32 32"
1607
+ fill="currentColor"
1608
+ aria-hidden="true"
1609
+ role="img"
1610
+ width="1em"
1611
+ height="1em"
1612
+ >
1613
+ <path
1614
+ d="M29.875 3.5V7a.876.876 0 0 1-.256.619l-9.744 9.744v10.638a.875.875 0 0 1-.599.83l-6 2a.876.876 0 0 1-.788-.12.874.874 0 0 1-.363-.71V17.363L2.381 7.619A.876.876 0 0 1 2.125 7V3.5c0-.758.617-1.375 1.375-1.375h25c.758 0 1.375.617 1.375 1.375Z"
1615
+ />
1616
+ </svg>
1207
1617
  </span>
1208
1618
  </button>
1209
1619
  </div>
@@ -1223,7 +1633,19 @@ Several components in the following examples do not include functional and/or ac
1223
1633
  <span class="pf-v6-c-menu-toggle__text">Name</span>
1224
1634
  <span class="pf-v6-c-menu-toggle__controls">
1225
1635
  <span class="pf-v6-c-menu-toggle__toggle-icon">
1226
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
1636
+ <svg
1637
+ class="pf-v6-svg"
1638
+ viewBox="0 0 20 20"
1639
+ fill="currentColor"
1640
+ aria-hidden="true"
1641
+ role="img"
1642
+ width="1em"
1643
+ height="1em"
1644
+ >
1645
+ <path
1646
+ d="M18.92 5.62C18.77 5.25 18.4 5 18 5H2a1.003 1.003 0 0 0-.71 1.71l7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65c.29-.29.37-.72.22-1.09Z"
1647
+ />
1648
+ </svg>
1227
1649
  </span>
1228
1650
  </span>
1229
1651
  </button>
@@ -1260,7 +1682,19 @@ Several components in the following examples do not include functional and/or ac
1260
1682
  <span class="pf-v6-c-menu-toggle__text">Status</span>
1261
1683
  <span class="pf-v6-c-menu-toggle__controls">
1262
1684
  <span class="pf-v6-c-menu-toggle__toggle-icon">
1263
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
1685
+ <svg
1686
+ class="pf-v6-svg"
1687
+ viewBox="0 0 20 20"
1688
+ fill="currentColor"
1689
+ aria-hidden="true"
1690
+ role="img"
1691
+ width="1em"
1692
+ height="1em"
1693
+ >
1694
+ <path
1695
+ d="M18.92 5.62C18.77 5.25 18.4 5 18 5H2a1.003 1.003 0 0 0-.71 1.71l7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65c.29-.29.37-.72.22-1.09Z"
1696
+ />
1697
+ </svg>
1264
1698
  </span>
1265
1699
  </span>
1266
1700
  </button>
@@ -1275,7 +1709,19 @@ Several components in the following examples do not include functional and/or ac
1275
1709
  <span class="pf-v6-c-menu-toggle__text">Risk</span>
1276
1710
  <span class="pf-v6-c-menu-toggle__controls">
1277
1711
  <span class="pf-v6-c-menu-toggle__toggle-icon">
1278
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
1712
+ <svg
1713
+ class="pf-v6-svg"
1714
+ viewBox="0 0 20 20"
1715
+ fill="currentColor"
1716
+ aria-hidden="true"
1717
+ role="img"
1718
+ width="1em"
1719
+ height="1em"
1720
+ >
1721
+ <path
1722
+ d="M18.92 5.62C18.77 5.25 18.4 5 18 5H2a1.003 1.003 0 0 0-.71 1.71l7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65c.29-.29.37-.72.22-1.09Z"
1723
+ />
1724
+ </svg>
1279
1725
  </span>
1280
1726
  </span>
1281
1727
  </button>
@@ -1304,7 +1750,19 @@ Several components in the following examples do not include functional and/or ac
1304
1750
  <span class="pf-v6-c-menu-toggle__text">Name</span>
1305
1751
  <span class="pf-v6-c-menu-toggle__controls">
1306
1752
  <span class="pf-v6-c-menu-toggle__toggle-icon">
1307
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
1753
+ <svg
1754
+ class="pf-v6-svg"
1755
+ viewBox="0 0 20 20"
1756
+ fill="currentColor"
1757
+ aria-hidden="true"
1758
+ role="img"
1759
+ width="1em"
1760
+ height="1em"
1761
+ >
1762
+ <path
1763
+ d="M18.92 5.62C18.77 5.25 18.4 5 18 5H2a1.003 1.003 0 0 0-.71 1.71l7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65c.29-.29.37-.72.22-1.09Z"
1764
+ />
1765
+ </svg>
1308
1766
  </span>
1309
1767
  </span>
1310
1768
  </button>
@@ -1341,7 +1799,19 @@ Several components in the following examples do not include functional and/or ac
1341
1799
  <span class="pf-v6-c-menu-toggle__text">Status</span>
1342
1800
  <span class="pf-v6-c-menu-toggle__controls">
1343
1801
  <span class="pf-v6-c-menu-toggle__toggle-icon">
1344
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
1802
+ <svg
1803
+ class="pf-v6-svg"
1804
+ viewBox="0 0 20 20"
1805
+ fill="currentColor"
1806
+ aria-hidden="true"
1807
+ role="img"
1808
+ width="1em"
1809
+ height="1em"
1810
+ >
1811
+ <path
1812
+ d="M18.92 5.62C18.77 5.25 18.4 5 18 5H2a1.003 1.003 0 0 0-.71 1.71l7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65c.29-.29.37-.72.22-1.09Z"
1813
+ />
1814
+ </svg>
1345
1815
  </span>
1346
1816
  </span>
1347
1817
  </button>
@@ -1356,7 +1826,19 @@ Several components in the following examples do not include functional and/or ac
1356
1826
  <span class="pf-v6-c-menu-toggle__text">Risk</span>
1357
1827
  <span class="pf-v6-c-menu-toggle__controls">
1358
1828
  <span class="pf-v6-c-menu-toggle__toggle-icon">
1359
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
1829
+ <svg
1830
+ class="pf-v6-svg"
1831
+ viewBox="0 0 20 20"
1832
+ fill="currentColor"
1833
+ aria-hidden="true"
1834
+ role="img"
1835
+ width="1em"
1836
+ height="1em"
1837
+ >
1838
+ <path
1839
+ d="M18.92 5.62C18.77 5.25 18.4 5 18 5H2a1.003 1.003 0 0 0-.71 1.71l7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65c.29-.29.37-.72.22-1.09Z"
1840
+ />
1841
+ </svg>
1360
1842
  </span>
1361
1843
  </span>
1362
1844
  </button>
@@ -1396,7 +1878,19 @@ Several components in the following examples do not include functional and/or ac
1396
1878
  id="toolbar-selected-filters-toggle-group-expanded-example-label-group-statusremove-label-one"
1397
1879
  >
1398
1880
  <span class="pf-v6-c-button__icon">
1399
- <i class="fas fa-times" aria-hidden="true"></i>
1881
+ <svg
1882
+ class="pf-v6-svg"
1883
+ viewBox="0 0 20 20"
1884
+ fill="currentColor"
1885
+ aria-hidden="true"
1886
+ role="img"
1887
+ width="1em"
1888
+ height="1em"
1889
+ >
1890
+ <path
1891
+ 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"
1892
+ />
1893
+ </svg>
1400
1894
  </span>
1401
1895
  </button>
1402
1896
  </span>
@@ -1421,7 +1915,19 @@ Several components in the following examples do not include functional and/or ac
1421
1915
  id="toolbar-selected-filters-toggle-group-expanded-example-label-group-statusremove-label-two"
1422
1916
  >
1423
1917
  <span class="pf-v6-c-button__icon">
1424
- <i class="fas fa-times" aria-hidden="true"></i>
1918
+ <svg
1919
+ class="pf-v6-svg"
1920
+ viewBox="0 0 20 20"
1921
+ fill="currentColor"
1922
+ aria-hidden="true"
1923
+ role="img"
1924
+ width="1em"
1925
+ height="1em"
1926
+ >
1927
+ <path
1928
+ 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"
1929
+ />
1930
+ </svg>
1425
1931
  </span>
1426
1932
  </button>
1427
1933
  </span>
@@ -1446,7 +1952,19 @@ Several components in the following examples do not include functional and/or ac
1446
1952
  id="toolbar-selected-filters-toggle-group-expanded-example-label-group-statusremove-label-three"
1447
1953
  >
1448
1954
  <span class="pf-v6-c-button__icon">
1449
- <i class="fas fa-times" aria-hidden="true"></i>
1955
+ <svg
1956
+ class="pf-v6-svg"
1957
+ viewBox="0 0 20 20"
1958
+ fill="currentColor"
1959
+ aria-hidden="true"
1960
+ role="img"
1961
+ width="1em"
1962
+ height="1em"
1963
+ >
1964
+ <path
1965
+ 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"
1966
+ />
1967
+ </svg>
1450
1968
  </span>
1451
1969
  </button>
1452
1970
  </span>
@@ -1488,7 +2006,19 @@ Several components in the following examples do not include functional and/or ac
1488
2006
  id="toolbar-selected-filters-toggle-group-expanded-example-label-group-riskremove-label-one"
1489
2007
  >
1490
2008
  <span class="pf-v6-c-button__icon">
1491
- <i class="fas fa-times" aria-hidden="true"></i>
2009
+ <svg
2010
+ class="pf-v6-svg"
2011
+ viewBox="0 0 20 20"
2012
+ fill="currentColor"
2013
+ aria-hidden="true"
2014
+ role="img"
2015
+ width="1em"
2016
+ height="1em"
2017
+ >
2018
+ <path
2019
+ 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"
2020
+ />
2021
+ </svg>
1492
2022
  </span>
1493
2023
  </button>
1494
2024
  </span>
@@ -1513,7 +2043,19 @@ Several components in the following examples do not include functional and/or ac
1513
2043
  id="toolbar-selected-filters-toggle-group-expanded-example-label-group-riskremove-label-two"
1514
2044
  >
1515
2045
  <span class="pf-v6-c-button__icon">
1516
- <i class="fas fa-times" aria-hidden="true"></i>
2046
+ <svg
2047
+ class="pf-v6-svg"
2048
+ viewBox="0 0 20 20"
2049
+ fill="currentColor"
2050
+ aria-hidden="true"
2051
+ role="img"
2052
+ width="1em"
2053
+ height="1em"
2054
+ >
2055
+ <path
2056
+ 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"
2057
+ />
2058
+ </svg>
1517
2059
  </span>
1518
2060
  </button>
1519
2061
  </span>
@@ -1538,7 +2080,19 @@ Several components in the following examples do not include functional and/or ac
1538
2080
  id="toolbar-selected-filters-toggle-group-expanded-example-label-group-riskremove-label-three"
1539
2081
  >
1540
2082
  <span class="pf-v6-c-button__icon">
1541
- <i class="fas fa-times" aria-hidden="true"></i>
2083
+ <svg
2084
+ class="pf-v6-svg"
2085
+ viewBox="0 0 20 20"
2086
+ fill="currentColor"
2087
+ aria-hidden="true"
2088
+ role="img"
2089
+ width="1em"
2090
+ height="1em"
2091
+ >
2092
+ <path
2093
+ 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"
2094
+ />
2095
+ </svg>
1542
2096
  </span>
1543
2097
  </button>
1544
2098
  </span>
@@ -1603,7 +2157,19 @@ Several components in the following examples do not include functional and/or ac
1603
2157
  >
1604
2158
  <span class="pf-v6-c-menu-toggle__controls">
1605
2159
  <span class="pf-v6-c-menu-toggle__toggle-icon">
1606
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
2160
+ <svg
2161
+ class="pf-v6-svg"
2162
+ viewBox="0 0 20 20"
2163
+ fill="currentColor"
2164
+ aria-hidden="true"
2165
+ role="img"
2166
+ width="1em"
2167
+ height="1em"
2168
+ >
2169
+ <path
2170
+ d="M18.92 5.62C18.77 5.25 18.4 5 18 5H2a1.003 1.003 0 0 0-.71 1.71l7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65c.29-.29.37-.72.22-1.09Z"
2171
+ />
2172
+ </svg>
1607
2173
  </span>
1608
2174
  </span>
1609
2175
  </button>
@@ -1621,7 +2187,19 @@ Several components in the following examples do not include functional and/or ac
1621
2187
  <span class="pf-v6-c-menu-toggle__text">Status</span>
1622
2188
  <span class="pf-v6-c-menu-toggle__controls">
1623
2189
  <span class="pf-v6-c-menu-toggle__toggle-icon">
1624
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
2190
+ <svg
2191
+ class="pf-v6-svg"
2192
+ viewBox="0 0 20 20"
2193
+ fill="currentColor"
2194
+ aria-hidden="true"
2195
+ role="img"
2196
+ width="1em"
2197
+ height="1em"
2198
+ >
2199
+ <path
2200
+ d="M18.92 5.62C18.77 5.25 18.4 5 18 5H2a1.003 1.003 0 0 0-.71 1.71l7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65c.29-.29.37-.72.22-1.09Z"
2201
+ />
2202
+ </svg>
1625
2203
  </span>
1626
2204
  </span>
1627
2205
  </button>
@@ -1636,7 +2214,19 @@ Several components in the following examples do not include functional and/or ac
1636
2214
  <span class="pf-v6-c-menu-toggle__text">Risk</span>
1637
2215
  <span class="pf-v6-c-menu-toggle__controls">
1638
2216
  <span class="pf-v6-c-menu-toggle__toggle-icon">
1639
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
2217
+ <svg
2218
+ class="pf-v6-svg"
2219
+ viewBox="0 0 20 20"
2220
+ fill="currentColor"
2221
+ aria-hidden="true"
2222
+ role="img"
2223
+ width="1em"
2224
+ height="1em"
2225
+ >
2226
+ <path
2227
+ d="M18.92 5.62C18.77 5.25 18.4 5 18 5H2a1.003 1.003 0 0 0-.71 1.71l7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65c.29-.29.37-.72.22-1.09Z"
2228
+ />
2229
+ </svg>
1640
2230
  </span>
1641
2231
  </span>
1642
2232
  </button>
@@ -1671,7 +2261,19 @@ Several components in the following examples do not include functional and/or ac
1671
2261
  id="toolbar-selected-filters-example-overflow-toggle"
1672
2262
  >
1673
2263
  <span class="pf-v6-c-menu-toggle__icon">
1674
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
2264
+ <svg
2265
+ class="pf-v6-svg"
2266
+ viewBox="0 0 32 32"
2267
+ fill="currentColor"
2268
+ aria-hidden="true"
2269
+ role="img"
2270
+ width="1em"
2271
+ height="1em"
2272
+ >
2273
+ <path
2274
+ d="M12.25 5c0-2.068 1.683-3.75 3.75-3.75S19.75 2.932 19.75 5 18.067 8.75 16 8.75 12.25 7.068 12.25 5ZM16 12.25c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Zm0 11c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Z"
2275
+ />
2276
+ </svg>
1675
2277
  </span>
1676
2278
  </button>
1677
2279
  </div>
@@ -1713,7 +2315,19 @@ Several components in the following examples do not include functional and/or ac
1713
2315
  id="toolbar-selected-filters-example-label-group-statusremove-label-one"
1714
2316
  >
1715
2317
  <span class="pf-v6-c-button__icon">
1716
- <i class="fas fa-times" aria-hidden="true"></i>
2318
+ <svg
2319
+ class="pf-v6-svg"
2320
+ viewBox="0 0 20 20"
2321
+ fill="currentColor"
2322
+ aria-hidden="true"
2323
+ role="img"
2324
+ width="1em"
2325
+ height="1em"
2326
+ >
2327
+ <path
2328
+ 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"
2329
+ />
2330
+ </svg>
1717
2331
  </span>
1718
2332
  </button>
1719
2333
  </span>
@@ -1738,7 +2352,19 @@ Several components in the following examples do not include functional and/or ac
1738
2352
  id="toolbar-selected-filters-example-label-group-statusremove-label-two"
1739
2353
  >
1740
2354
  <span class="pf-v6-c-button__icon">
1741
- <i class="fas fa-times" aria-hidden="true"></i>
2355
+ <svg
2356
+ class="pf-v6-svg"
2357
+ viewBox="0 0 20 20"
2358
+ fill="currentColor"
2359
+ aria-hidden="true"
2360
+ role="img"
2361
+ width="1em"
2362
+ height="1em"
2363
+ >
2364
+ <path
2365
+ 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"
2366
+ />
2367
+ </svg>
1742
2368
  </span>
1743
2369
  </button>
1744
2370
  </span>
@@ -1763,7 +2389,19 @@ Several components in the following examples do not include functional and/or ac
1763
2389
  id="toolbar-selected-filters-example-label-group-statusremove-label-three"
1764
2390
  >
1765
2391
  <span class="pf-v6-c-button__icon">
1766
- <i class="fas fa-times" aria-hidden="true"></i>
2392
+ <svg
2393
+ class="pf-v6-svg"
2394
+ viewBox="0 0 20 20"
2395
+ fill="currentColor"
2396
+ aria-hidden="true"
2397
+ role="img"
2398
+ width="1em"
2399
+ height="1em"
2400
+ >
2401
+ <path
2402
+ 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"
2403
+ />
2404
+ </svg>
1767
2405
  </span>
1768
2406
  </button>
1769
2407
  </span>
@@ -1805,7 +2443,19 @@ Several components in the following examples do not include functional and/or ac
1805
2443
  id="toolbar-selected-filters-example-label-group-riskremove-label-one"
1806
2444
  >
1807
2445
  <span class="pf-v6-c-button__icon">
1808
- <i class="fas fa-times" aria-hidden="true"></i>
2446
+ <svg
2447
+ class="pf-v6-svg"
2448
+ viewBox="0 0 20 20"
2449
+ fill="currentColor"
2450
+ aria-hidden="true"
2451
+ role="img"
2452
+ width="1em"
2453
+ height="1em"
2454
+ >
2455
+ <path
2456
+ 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"
2457
+ />
2458
+ </svg>
1809
2459
  </span>
1810
2460
  </button>
1811
2461
  </span>
@@ -1830,7 +2480,19 @@ Several components in the following examples do not include functional and/or ac
1830
2480
  id="toolbar-selected-filters-example-label-group-riskremove-label-two"
1831
2481
  >
1832
2482
  <span class="pf-v6-c-button__icon">
1833
- <i class="fas fa-times" aria-hidden="true"></i>
2483
+ <svg
2484
+ class="pf-v6-svg"
2485
+ viewBox="0 0 20 20"
2486
+ fill="currentColor"
2487
+ aria-hidden="true"
2488
+ role="img"
2489
+ width="1em"
2490
+ height="1em"
2491
+ >
2492
+ <path
2493
+ 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"
2494
+ />
2495
+ </svg>
1834
2496
  </span>
1835
2497
  </button>
1836
2498
  </span>
@@ -1855,7 +2517,19 @@ Several components in the following examples do not include functional and/or ac
1855
2517
  id="toolbar-selected-filters-example-label-group-riskremove-label-three"
1856
2518
  >
1857
2519
  <span class="pf-v6-c-button__icon">
1858
- <i class="fas fa-times" aria-hidden="true"></i>
2520
+ <svg
2521
+ class="pf-v6-svg"
2522
+ viewBox="0 0 20 20"
2523
+ fill="currentColor"
2524
+ aria-hidden="true"
2525
+ role="img"
2526
+ width="1em"
2527
+ height="1em"
2528
+ >
2529
+ <path
2530
+ 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"
2531
+ />
2532
+ </svg>
1859
2533
  </span>
1860
2534
  </button>
1861
2535
  </span>
@@ -1923,7 +2597,19 @@ Several components in the following examples do not include functional and/or ac
1923
2597
  id="toolbar-stacked-example-overflow-toggle"
1924
2598
  >
1925
2599
  <span class="pf-v6-c-menu-toggle__icon">
1926
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
2600
+ <svg
2601
+ class="pf-v6-svg"
2602
+ viewBox="0 0 32 32"
2603
+ fill="currentColor"
2604
+ aria-hidden="true"
2605
+ role="img"
2606
+ width="1em"
2607
+ height="1em"
2608
+ >
2609
+ <path
2610
+ d="M12.25 5c0-2.068 1.683-3.75 3.75-3.75S19.75 2.932 19.75 5 18.067 8.75 16 8.75 12.25 7.068 12.25 5ZM16 12.25c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Zm0 11c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Z"
2611
+ />
2612
+ </svg>
1927
2613
  </span>
1928
2614
  </button>
1929
2615
  </div>
@@ -1961,7 +2647,19 @@ Several components in the following examples do not include functional and/or ac
1961
2647
  >
1962
2648
  <span class="pf-v6-c-menu-toggle__controls">
1963
2649
  <span class="pf-v6-c-menu-toggle__toggle-icon">
1964
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
2650
+ <svg
2651
+ class="pf-v6-svg"
2652
+ viewBox="0 0 20 20"
2653
+ fill="currentColor"
2654
+ aria-hidden="true"
2655
+ role="img"
2656
+ width="1em"
2657
+ height="1em"
2658
+ >
2659
+ <path
2660
+ d="M18.92 5.62C18.77 5.25 18.4 5 18 5H2a1.003 1.003 0 0 0-.71 1.71l7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65c.29-.29.37-.72.22-1.09Z"
2661
+ />
2662
+ </svg>
1965
2663
  </span>
1966
2664
  </span>
1967
2665
  </button>
@@ -1975,7 +2673,6 @@ Several components in the following examples do not include functional and/or ac
1975
2673
  class="pf-v6-c-menu-toggle pf-m-text pf-m-plain"
1976
2674
  type="button"
1977
2675
  aria-expanded="false"
1978
- aria-label="Menu toggle"
1979
2676
  id="toolbar-stacked-example-pagination-menu-toggle"
1980
2677
  >
1981
2678
  <span class="pf-v6-c-menu-toggle__text">
@@ -1984,7 +2681,19 @@ Several components in the following examples do not include functional and/or ac
1984
2681
  </span>
1985
2682
  <span class="pf-v6-c-menu-toggle__controls">
1986
2683
  <span class="pf-v6-c-menu-toggle__toggle-icon">
1987
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
2684
+ <svg
2685
+ class="pf-v6-svg"
2686
+ viewBox="0 0 20 20"
2687
+ fill="currentColor"
2688
+ aria-hidden="true"
2689
+ role="img"
2690
+ width="1em"
2691
+ height="1em"
2692
+ >
2693
+ <path
2694
+ d="M18.92 5.62C18.77 5.25 18.4 5 18 5H2a1.003 1.003 0 0 0-.71 1.71l7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65c.29-.29.37-.72.22-1.09Z"
2695
+ />
2696
+ </svg>
1988
2697
  </span>
1989
2698
  </span>
1990
2699
  </button>
@@ -1999,7 +2708,19 @@ Several components in the following examples do not include functional and/or ac
1999
2708
  disabled
2000
2709
  >
2001
2710
  <span class="pf-v6-c-button__icon">
2002
- <i class="fas fa-angle-double-left" aria-hidden="true"></i>
2711
+ <svg
2712
+ class="pf-v6-svg"
2713
+ viewBox="0 0 448 512"
2714
+ fill="currentColor"
2715
+ aria-hidden="true"
2716
+ role="img"
2717
+ width="1em"
2718
+ height="1em"
2719
+ >
2720
+ <path
2721
+ d="M223.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L319.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L393.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34zm-192 34l136 136c9.4 9.4 24.6 9.4 33.9 0l22.6-22.6c9.4-9.4 9.4-24.6 0-33.9L127.9 256l96.4-96.4c9.4-9.4 9.4-24.6 0-33.9L201.7 103c-9.4-9.4-24.6-9.4-33.9 0l-136 136c-9.5 9.4-9.5 24.6-.1 34z"
2722
+ />
2723
+ </svg>
2003
2724
  </span>
2004
2725
  </button>
2005
2726
  </div>
@@ -2011,7 +2732,19 @@ Several components in the following examples do not include functional and/or ac
2011
2732
  disabled
2012
2733
  >
2013
2734
  <span class="pf-v6-c-button__icon">
2014
- <i class="fas fa-angle-left" aria-hidden="true"></i>
2735
+ <svg
2736
+ class="pf-v6-svg"
2737
+ viewBox="0 0 256 512"
2738
+ fill="currentColor"
2739
+ aria-hidden="true"
2740
+ role="img"
2741
+ width="1em"
2742
+ height="1em"
2743
+ >
2744
+ <path
2745
+ d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"
2746
+ />
2747
+ </svg>
2015
2748
  </span>
2016
2749
  </button>
2017
2750
  </div>
@@ -2038,7 +2771,19 @@ Several components in the following examples do not include functional and/or ac
2038
2771
  aria-label="Go to next page"
2039
2772
  >
2040
2773
  <span class="pf-v6-c-button__icon">
2041
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2774
+ <svg
2775
+ class="pf-v6-svg"
2776
+ viewBox="0 0 256 512"
2777
+ fill="currentColor"
2778
+ aria-hidden="true"
2779
+ role="img"
2780
+ width="1em"
2781
+ height="1em"
2782
+ >
2783
+ <path
2784
+ d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
2785
+ />
2786
+ </svg>
2042
2787
  </span>
2043
2788
  </button>
2044
2789
  </div>
@@ -2049,7 +2794,19 @@ Several components in the following examples do not include functional and/or ac
2049
2794
  aria-label="Go to last page"
2050
2795
  >
2051
2796
  <span class="pf-v6-c-button__icon">
2052
- <i class="fas fa-angle-double-right" aria-hidden="true"></i>
2797
+ <svg
2798
+ class="pf-v6-svg"
2799
+ viewBox="0 0 448 512"
2800
+ fill="currentColor"
2801
+ aria-hidden="true"
2802
+ role="img"
2803
+ width="1em"
2804
+ height="1em"
2805
+ >
2806
+ <path
2807
+ d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34zm192-34l-136-136c-9.4-9.4-24.6-9.4-33.9 0l-22.6 22.6c-9.4 9.4-9.4 24.6 0 33.9l96.4 96.4-96.4 96.4c-9.4 9.4-9.4 24.6 0 33.9l22.6 22.6c9.4 9.4 24.6 9.4 33.9 0l136-136c9.4-9.2 9.4-24.4 0-33.8z"
2808
+ />
2809
+ </svg>
2053
2810
  </span>
2054
2811
  </button>
2055
2812
  </div>
@@ -2078,7 +2835,19 @@ Several components in the following examples do not include functional and/or ac
2078
2835
  aria-controls="toolbar-stacked-collapsed-example-expandable-content"
2079
2836
  >
2080
2837
  <span class="pf-v6-c-menu-toggle__icon">
2081
- <i class="fas fa-filter" aria-hidden="true"></i>
2838
+ <svg
2839
+ class="pf-v6-svg"
2840
+ viewBox="0 0 32 32"
2841
+ fill="currentColor"
2842
+ aria-hidden="true"
2843
+ role="img"
2844
+ width="1em"
2845
+ height="1em"
2846
+ >
2847
+ <path
2848
+ d="M29.875 3.5V7a.876.876 0 0 1-.256.619l-9.744 9.744v10.638a.875.875 0 0 1-.599.83l-6 2a.876.876 0 0 1-.788-.12.874.874 0 0 1-.363-.71V17.363L2.381 7.619A.876.876 0 0 1 2.125 7V3.5c0-.758.617-1.375 1.375-1.375h25c.758 0 1.375.617 1.375 1.375Z"
2849
+ />
2850
+ </svg>
2082
2851
  </span>
2083
2852
  </button>
2084
2853
  </div>
@@ -2098,7 +2867,19 @@ Several components in the following examples do not include functional and/or ac
2098
2867
  <span class="pf-v6-c-menu-toggle__text">Name</span>
2099
2868
  <span class="pf-v6-c-menu-toggle__controls">
2100
2869
  <span class="pf-v6-c-menu-toggle__toggle-icon">
2101
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
2870
+ <svg
2871
+ class="pf-v6-svg"
2872
+ viewBox="0 0 20 20"
2873
+ fill="currentColor"
2874
+ aria-hidden="true"
2875
+ role="img"
2876
+ width="1em"
2877
+ height="1em"
2878
+ >
2879
+ <path
2880
+ d="M18.92 5.62C18.77 5.25 18.4 5 18 5H2a1.003 1.003 0 0 0-.71 1.71l7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65c.29-.29.37-.72.22-1.09Z"
2881
+ />
2882
+ </svg>
2102
2883
  </span>
2103
2884
  </span>
2104
2885
  </button>
@@ -2135,7 +2916,19 @@ Several components in the following examples do not include functional and/or ac
2135
2916
  <span class="pf-v6-c-menu-toggle__text">Status</span>
2136
2917
  <span class="pf-v6-c-menu-toggle__controls">
2137
2918
  <span class="pf-v6-c-menu-toggle__toggle-icon">
2138
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
2919
+ <svg
2920
+ class="pf-v6-svg"
2921
+ viewBox="0 0 20 20"
2922
+ fill="currentColor"
2923
+ aria-hidden="true"
2924
+ role="img"
2925
+ width="1em"
2926
+ height="1em"
2927
+ >
2928
+ <path
2929
+ d="M18.92 5.62C18.77 5.25 18.4 5 18 5H2a1.003 1.003 0 0 0-.71 1.71l7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65c.29-.29.37-.72.22-1.09Z"
2930
+ />
2931
+ </svg>
2139
2932
  </span>
2140
2933
  </span>
2141
2934
  </button>
@@ -2150,7 +2943,19 @@ Several components in the following examples do not include functional and/or ac
2150
2943
  <span class="pf-v6-c-menu-toggle__text">Risk</span>
2151
2944
  <span class="pf-v6-c-menu-toggle__controls">
2152
2945
  <span class="pf-v6-c-menu-toggle__toggle-icon">
2153
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
2946
+ <svg
2947
+ class="pf-v6-svg"
2948
+ viewBox="0 0 20 20"
2949
+ fill="currentColor"
2950
+ aria-hidden="true"
2951
+ role="img"
2952
+ width="1em"
2953
+ height="1em"
2954
+ >
2955
+ <path
2956
+ d="M18.92 5.62C18.77 5.25 18.4 5 18 5H2a1.003 1.003 0 0 0-.71 1.71l7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65c.29-.29.37-.72.22-1.09Z"
2957
+ />
2958
+ </svg>
2154
2959
  </span>
2155
2960
  </span>
2156
2961
  </button>
@@ -2196,7 +3001,19 @@ Several components in the following examples do not include functional and/or ac
2196
3001
  id="toolbar-stacked-collapsed-example-label-group-statusremove-label-one"
2197
3002
  >
2198
3003
  <span class="pf-v6-c-button__icon">
2199
- <i class="fas fa-times" aria-hidden="true"></i>
3004
+ <svg
3005
+ class="pf-v6-svg"
3006
+ viewBox="0 0 20 20"
3007
+ fill="currentColor"
3008
+ aria-hidden="true"
3009
+ role="img"
3010
+ width="1em"
3011
+ height="1em"
3012
+ >
3013
+ <path
3014
+ 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"
3015
+ />
3016
+ </svg>
2200
3017
  </span>
2201
3018
  </button>
2202
3019
  </span>
@@ -2221,7 +3038,19 @@ Several components in the following examples do not include functional and/or ac
2221
3038
  id="toolbar-stacked-collapsed-example-label-group-statusremove-label-two"
2222
3039
  >
2223
3040
  <span class="pf-v6-c-button__icon">
2224
- <i class="fas fa-times" aria-hidden="true"></i>
3041
+ <svg
3042
+ class="pf-v6-svg"
3043
+ viewBox="0 0 20 20"
3044
+ fill="currentColor"
3045
+ aria-hidden="true"
3046
+ role="img"
3047
+ width="1em"
3048
+ height="1em"
3049
+ >
3050
+ <path
3051
+ 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"
3052
+ />
3053
+ </svg>
2225
3054
  </span>
2226
3055
  </button>
2227
3056
  </span>
@@ -2246,7 +3075,19 @@ Several components in the following examples do not include functional and/or ac
2246
3075
  id="toolbar-stacked-collapsed-example-label-group-statusremove-label-three"
2247
3076
  >
2248
3077
  <span class="pf-v6-c-button__icon">
2249
- <i class="fas fa-times" aria-hidden="true"></i>
3078
+ <svg
3079
+ class="pf-v6-svg"
3080
+ viewBox="0 0 20 20"
3081
+ fill="currentColor"
3082
+ aria-hidden="true"
3083
+ role="img"
3084
+ width="1em"
3085
+ height="1em"
3086
+ >
3087
+ <path
3088
+ 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"
3089
+ />
3090
+ </svg>
2250
3091
  </span>
2251
3092
  </button>
2252
3093
  </span>
@@ -2288,7 +3129,19 @@ Several components in the following examples do not include functional and/or ac
2288
3129
  id="toolbar-stacked-collapsed-example-label-group-riskremove-label-one"
2289
3130
  >
2290
3131
  <span class="pf-v6-c-button__icon">
2291
- <i class="fas fa-times" aria-hidden="true"></i>
3132
+ <svg
3133
+ class="pf-v6-svg"
3134
+ viewBox="0 0 20 20"
3135
+ fill="currentColor"
3136
+ aria-hidden="true"
3137
+ role="img"
3138
+ width="1em"
3139
+ height="1em"
3140
+ >
3141
+ <path
3142
+ 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"
3143
+ />
3144
+ </svg>
2292
3145
  </span>
2293
3146
  </button>
2294
3147
  </span>
@@ -2313,7 +3166,19 @@ Several components in the following examples do not include functional and/or ac
2313
3166
  id="toolbar-stacked-collapsed-example-label-group-riskremove-label-two"
2314
3167
  >
2315
3168
  <span class="pf-v6-c-button__icon">
2316
- <i class="fas fa-times" aria-hidden="true"></i>
3169
+ <svg
3170
+ class="pf-v6-svg"
3171
+ viewBox="0 0 20 20"
3172
+ fill="currentColor"
3173
+ aria-hidden="true"
3174
+ role="img"
3175
+ width="1em"
3176
+ height="1em"
3177
+ >
3178
+ <path
3179
+ 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"
3180
+ />
3181
+ </svg>
2317
3182
  </span>
2318
3183
  </button>
2319
3184
  </span>
@@ -2338,7 +3203,19 @@ Several components in the following examples do not include functional and/or ac
2338
3203
  id="toolbar-stacked-collapsed-example-label-group-riskremove-label-three"
2339
3204
  >
2340
3205
  <span class="pf-v6-c-button__icon">
2341
- <i class="fas fa-times" aria-hidden="true"></i>
3206
+ <svg
3207
+ class="pf-v6-svg"
3208
+ viewBox="0 0 20 20"
3209
+ fill="currentColor"
3210
+ aria-hidden="true"
3211
+ role="img"
3212
+ width="1em"
3213
+ height="1em"
3214
+ >
3215
+ <path
3216
+ 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"
3217
+ />
3218
+ </svg>
2342
3219
  </span>
2343
3220
  </button>
2344
3221
  </span>
@@ -2382,7 +3259,19 @@ Several components in the following examples do not include functional and/or ac
2382
3259
  >
2383
3260
  <span class="pf-v6-c-menu-toggle__controls">
2384
3261
  <span class="pf-v6-c-menu-toggle__toggle-icon">
2385
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
3262
+ <svg
3263
+ class="pf-v6-svg"
3264
+ viewBox="0 0 20 20"
3265
+ fill="currentColor"
3266
+ aria-hidden="true"
3267
+ role="img"
3268
+ width="1em"
3269
+ height="1em"
3270
+ >
3271
+ <path
3272
+ d="M18.92 5.62C18.77 5.25 18.4 5 18 5H2a1.003 1.003 0 0 0-.71 1.71l7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65c.29-.29.37-.72.22-1.09Z"
3273
+ />
3274
+ </svg>
2386
3275
  </span>
2387
3276
  </span>
2388
3277
  </button>
@@ -2396,7 +3285,6 @@ Several components in the following examples do not include functional and/or ac
2396
3285
  class="pf-v6-c-menu-toggle pf-m-text pf-m-plain"
2397
3286
  type="button"
2398
3287
  aria-expanded="false"
2399
- aria-label="Menu toggle"
2400
3288
  id="toolbar-stacked-collapsed-example-pagination-menu-toggle"
2401
3289
  >
2402
3290
  <span class="pf-v6-c-menu-toggle__text">
@@ -2405,7 +3293,19 @@ Several components in the following examples do not include functional and/or ac
2405
3293
  </span>
2406
3294
  <span class="pf-v6-c-menu-toggle__controls">
2407
3295
  <span class="pf-v6-c-menu-toggle__toggle-icon">
2408
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
3296
+ <svg
3297
+ class="pf-v6-svg"
3298
+ viewBox="0 0 20 20"
3299
+ fill="currentColor"
3300
+ aria-hidden="true"
3301
+ role="img"
3302
+ width="1em"
3303
+ height="1em"
3304
+ >
3305
+ <path
3306
+ d="M18.92 5.62C18.77 5.25 18.4 5 18 5H2a1.003 1.003 0 0 0-.71 1.71l7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65c.29-.29.37-.72.22-1.09Z"
3307
+ />
3308
+ </svg>
2409
3309
  </span>
2410
3310
  </span>
2411
3311
  </button>
@@ -2420,7 +3320,19 @@ Several components in the following examples do not include functional and/or ac
2420
3320
  disabled
2421
3321
  >
2422
3322
  <span class="pf-v6-c-button__icon">
2423
- <i class="fas fa-angle-double-left" aria-hidden="true"></i>
3323
+ <svg
3324
+ class="pf-v6-svg"
3325
+ viewBox="0 0 448 512"
3326
+ fill="currentColor"
3327
+ aria-hidden="true"
3328
+ role="img"
3329
+ width="1em"
3330
+ height="1em"
3331
+ >
3332
+ <path
3333
+ d="M223.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L319.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L393.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34zm-192 34l136 136c9.4 9.4 24.6 9.4 33.9 0l22.6-22.6c9.4-9.4 9.4-24.6 0-33.9L127.9 256l96.4-96.4c9.4-9.4 9.4-24.6 0-33.9L201.7 103c-9.4-9.4-24.6-9.4-33.9 0l-136 136c-9.5 9.4-9.5 24.6-.1 34z"
3334
+ />
3335
+ </svg>
2424
3336
  </span>
2425
3337
  </button>
2426
3338
  </div>
@@ -2432,7 +3344,19 @@ Several components in the following examples do not include functional and/or ac
2432
3344
  disabled
2433
3345
  >
2434
3346
  <span class="pf-v6-c-button__icon">
2435
- <i class="fas fa-angle-left" aria-hidden="true"></i>
3347
+ <svg
3348
+ class="pf-v6-svg"
3349
+ viewBox="0 0 256 512"
3350
+ fill="currentColor"
3351
+ aria-hidden="true"
3352
+ role="img"
3353
+ width="1em"
3354
+ height="1em"
3355
+ >
3356
+ <path
3357
+ d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"
3358
+ />
3359
+ </svg>
2436
3360
  </span>
2437
3361
  </button>
2438
3362
  </div>
@@ -2459,7 +3383,19 @@ Several components in the following examples do not include functional and/or ac
2459
3383
  aria-label="Go to next page"
2460
3384
  >
2461
3385
  <span class="pf-v6-c-button__icon">
2462
- <i class="fas fa-angle-right" aria-hidden="true"></i>
3386
+ <svg
3387
+ class="pf-v6-svg"
3388
+ viewBox="0 0 256 512"
3389
+ fill="currentColor"
3390
+ aria-hidden="true"
3391
+ role="img"
3392
+ width="1em"
3393
+ height="1em"
3394
+ >
3395
+ <path
3396
+ d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
3397
+ />
3398
+ </svg>
2463
3399
  </span>
2464
3400
  </button>
2465
3401
  </div>
@@ -2470,7 +3406,19 @@ Several components in the following examples do not include functional and/or ac
2470
3406
  aria-label="Go to last page"
2471
3407
  >
2472
3408
  <span class="pf-v6-c-button__icon">
2473
- <i class="fas fa-angle-double-right" aria-hidden="true"></i>
3409
+ <svg
3410
+ class="pf-v6-svg"
3411
+ viewBox="0 0 448 512"
3412
+ fill="currentColor"
3413
+ aria-hidden="true"
3414
+ role="img"
3415
+ width="1em"
3416
+ height="1em"
3417
+ >
3418
+ <path
3419
+ d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34zm192-34l-136-136c-9.4-9.4-24.6-9.4-33.9 0l-22.6 22.6c-9.4 9.4-9.4 24.6 0 33.9l96.4 96.4-96.4 96.4c-9.4 9.4-9.4 24.6 0 33.9l22.6 22.6c9.4 9.4 24.6 9.4 33.9 0l136-136c9.4-9.2 9.4-24.4 0-33.8z"
3420
+ />
3421
+ </svg>
2474
3422
  </span>
2475
3423
  </button>
2476
3424
  </div>
@@ -2612,6 +3560,114 @@ Etiam nulla lacus, porttitor vel volutpat et, malesuada id nunc. Suspendisse por
2612
3560
 
2613
3561
  ```
2614
3562
 
3563
+ ### Dynamic sticky toolbar
3564
+
3565
+ This example shows the use of `.pf-m-sticky-base` and `.pf-m-sticky-stuck`. `.pf-m-sticky-stuck` can be applied dynamically as the page has scrolled to only show sticky styles when the toolbar is "stuck" and floating above the content.
3566
+
3567
+ ```html
3568
+ <div
3569
+ class="pf-v6-c-toolbar pf-m-sticky-base pf-m-sticky-stuck"
3570
+ id="toolbar-sticky-stuck-example"
3571
+ >
3572
+ <div class="pf-v6-c-toolbar__content">
3573
+ <div class="pf-v6-c-toolbar__content-section">
3574
+ <div class="pf-v6-c-toolbar__item">Item</div>
3575
+ <div class="pf-v6-c-toolbar__item">Item</div>
3576
+ <div class="pf-v6-c-toolbar__item">Item</div>
3577
+ <hr class="pf-v6-c-divider pf-m-vertical" />
3578
+
3579
+ <div class="pf-v6-c-toolbar__group">
3580
+ <div class="pf-v6-c-toolbar__item">Item</div>
3581
+ <div class="pf-v6-c-toolbar__item">Item</div>
3582
+ <div class="pf-v6-c-toolbar__item">Item</div>
3583
+ </div>
3584
+
3585
+ <hr class="pf-v6-c-divider pf-m-vertical" />
3586
+ <div class="pf-v6-c-toolbar__item">Item</div>
3587
+ <div class="pf-v6-c-toolbar__item">Item</div>
3588
+ <div class="pf-v6-c-toolbar__item">Item</div>
3589
+ </div>
3590
+ </div>
3591
+ </div>
3592
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempor mattis massa dignissim blandit. Mauris pellentesque nisi a erat ultricies, mollis auctor nulla volutpat. Donec eu nisl magna. Donec nisi nulla, blandit et mauris in, lobortis elementum neque. Nunc pharetra eleifend purus, in commodo nisl accumsan in. Vestibulum feugiat nisl eu venenatis feugiat. Morbi ornare velit vitae tellus sollicitudin, sed ornare neque sagittis. Proin sodales, libero et vestibulum luctus, nunc mi euismod dui, vel accumsan lacus odio vel nibh. Etiam at mattis purus, sit amet vestibulum metus. Maecenas feugiat condimentum ligula eget hendrerit. Nullam eleifend convallis sodales. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nullam rhoncus consectetur enim, at interdum mi tincidunt eget. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
3593
+ <br />
3594
+ <br />
3595
+ Maecenas vel sollicitudin ipsum, pulvinar pharetra magna. Aenean vel ipsum vel purus malesuada sagittis eget ac odio. Nullam vitae diam mollis, consectetur est vitae, sodales diam. Vivamus eu lectus quis mi maximus porta. Praesent erat sapien, vestibulum nec libero non, tincidunt congue mauris. Pellentesque vitae imperdiet mi. Nulla in ipsum neque. Cras a quam ut sem venenatis euismod non at tortor. Mauris porta purus augue, ut pharetra elit varius at. Vestibulum fringilla ligula ac leo tristique, porta venenatis nibh convallis.
3596
+ <br />
3597
+ <br />
3598
+ Vestibulum vel orci mattis magna tristique suscipit. In vel tellus tempor, consectetur mi at, pellentesque enim. Cras venenatis tellus eget velit porttitor, sit amet malesuada tortor venenatis. Maecenas vitae augue ac orci volutpat gravida. In fermentum, orci eget tincidunt lobortis, turpis orci porta nibh, cursus dignissim lectus sapien at felis. Nulla facilisi. Aenean lectus justo, pellentesque sed nulla ut, pulvinar pellentesque tortor. Ut tempus euismod dolor gravida rhoncus. Quisque sed lorem sit amet erat tincidunt aliquet quis in nulla. Maecenas arcu erat, hendrerit a dui eget, convallis pharetra sapien. Nunc tellus enim, dictum eu egestas vel, ultrices eget est. Etiam quis vehicula sem. Nulla facilisi. Donec ante ipsum, fringilla iaculis ex a, tincidunt lobortis mi.
3599
+ <br />
3600
+ <br />
3601
+ Etiam nulla lacus, porttitor vel volutpat et, malesuada id nunc. Suspendisse porttitor sem quis ante consequat, vitae commodo nulla ultricies. Nulla fermentum ipsum ac dolor elementum, eu luctus ex condimentum. Sed sed arcu aliquam, porta metus in, sollicitudin felis. Sed faucibus lacus consectetur orci ultricies laoreet. Morbi sed lectus dictum sem tempor porta. Donec ut diam tempor, venenatis erat vitae, accumsan diam. Etiam sed purus eget lacus vehicula iaculis non euismod dolor. Quisque ultricies eget est in semper.
3602
+ <br />
3603
+ <br />Fusce tristique nulla id vestibulum maximus. Morbi sit amet nisi nec orci pulvinar interdum. Duis convallis, nunc vel pharetra blandit, urna neque eleifend nunc, maximus faucibus tellus nisl a velit. Aliquam quis turpis tempor nisi ultricies fermentum at et ipsum. Pellentesque vel tincidunt nisl. Donec elit ante, sodales ac ultrices vitae, egestas ut magna. Nulla sollicitudin ornare mi, a porttitor sem fermentum vitae. Praesent maximus fringilla gravida. Sed ultricies turpis ut lacus sodales, et aliquet risus accumsan. Pellentesque lacus sapien, cursus vitae nulla vel, bibendum tristique risus.
3604
+
3605
+ ```
3606
+
3607
+ ### Vertical
3608
+
3609
+ ```html isBeta
3610
+ <div class="pf-v6-c-toolbar pf-m-vertical" id="toolbar-vertical-example">
3611
+ <div class="pf-v6-c-toolbar__content">
3612
+ <div class="pf-v6-c-toolbar__content-section">
3613
+ <div class="pf-v6-c-toolbar__item">Item</div>
3614
+ <div class="pf-v6-c-toolbar__item">Item</div>
3615
+ <div class="pf-v6-c-toolbar__item">Item</div>
3616
+ <hr class="pf-v6-c-divider" />
3617
+
3618
+ <div class="pf-v6-c-toolbar__group">
3619
+ <div class="pf-v6-c-toolbar__item">Item</div>
3620
+ <div class="pf-v6-c-toolbar__item">Item</div>
3621
+ <div class="pf-v6-c-toolbar__item">Item</div>
3622
+ </div>
3623
+
3624
+ <hr class="pf-v6-c-divider" />
3625
+ <div class="pf-v6-c-toolbar__item">Item</div>
3626
+ <div class="pf-v6-c-toolbar__item">Item</div>
3627
+ <div class="pf-v6-c-toolbar__item">Item</div>
3628
+ </div>
3629
+ </div>
3630
+ </div>
3631
+
3632
+ ```
3633
+
3634
+ ### Vertical with height visibility breakpoints
3635
+
3636
+ Visibility can be set per breakpoint to show or hide items and groups based on viewport height.
3637
+
3638
+ ```html isBeta
3639
+ <div
3640
+ class="pf-v6-c-toolbar pf-m-vertical"
3641
+ id="toolbar-vertical-height-toggle-example"
3642
+ >
3643
+ <div class="pf-v6-c-toolbar__content">
3644
+ <div class="pf-v6-c-toolbar__content-section">
3645
+ <div class="pf-v6-c-toolbar__item">Item</div>
3646
+ <div class="pf-v6-c-toolbar__item">Item</div>
3647
+ <div class="pf-v6-c-toolbar__item">Item</div>
3648
+ <hr class="pf-v6-c-divider" />
3649
+
3650
+ <div class="pf-v6-c-toolbar__group">
3651
+ <div class="pf-v6-c-toolbar__item">Item</div>
3652
+ <div class="pf-v6-c-toolbar__item">Item</div>
3653
+ <div
3654
+ class="pf-v6-c-toolbar__item pf-m-hidden pf-m-visible-on-md-height"
3655
+ >Item (hidden below md)</div>
3656
+ </div>
3657
+
3658
+ <hr class="pf-v6-c-divider" />
3659
+
3660
+ <div class="pf-v6-c-toolbar__group pf-m-hidden pf-m-visible-on-lg-height">
3661
+ <div class="pf-v6-c-toolbar__item">Item (hidden below lg)</div>
3662
+ <div class="pf-v6-c-toolbar__item">Item (hidden below lg)</div>
3663
+ <div class="pf-v6-c-toolbar__item">Item (hidden below lg)</div>
3664
+ </div>
3665
+ </div>
3666
+ </div>
3667
+ </div>
3668
+
3669
+ ```
3670
+
2615
3671
  ## Documentation
2616
3672
 
2617
3673
  ### Overview
@@ -2636,6 +3692,7 @@ As the toolbar component is a hybrid layout and component, some of its elements
2636
3692
  | `.pf-m-secondary` | `.pf-v6-c-toolbar` | Modifies toolbar to have secondary background color. |
2637
3693
  | `.pf-m-no-padding` | `.pf-v6-c-toolbar` | Modifies toolbar to have no padding. |
2638
3694
  | `.pf-m-no-background` | `.pf-v6-c-toolbar` | Modifies toolbar to have no background color. |
3695
+ | `.pf-m-vertical` | `.pf-v6-c-toolbar` | Modifies toolbar for a vertical layout. |
2639
3696
  | `.pf-m-expanded` | `.pf-v6-c-toolbar__expandable-content` | Modifies expandable content section for the expanded state. |
2640
3697
  | `.pf-m-expanded` | `.pf-v6-c-toolbar__item.pf-m-expand-all` | Modifies an expand all button for the expanded state. |
2641
3698
  | `.pf-m-action-group` | `.pf-v6-c-toolbar__group` | Initiates action group spacing. |
@@ -2674,5 +3731,5 @@ As the toolbar component is a hybrid layout and component, some of its elements
2674
3731
 
2675
3732
  | Class | Applied to | Outcome |
2676
3733
  | -- | -- | -- |
2677
- | `.pf-m-[column/row]-gap-[none/sm/md/lg/xl/2xl]` | `.pf-v6-c-toolbar__group`, `.pf-v6-c-toolbar__item` | Modifies toolbar group or item spacing at optional [breakpoint](/tokens/all-patternfly-tokens). |
2678
- | `.pf-m-gap-[none/sm/md/lg/xl/2xl]` | `.pf-v6-c-toolbar__group`, `.pf-v6-c-toolbar__item` | Modifies both column and row gap for toolbar group or item spacing at optional [breakpoint](/tokens/all-patternfly-tokens). |
3734
+ | `.pf-m-[column/row]-gap-[none/sm/md/lg/xl/2xl]` | `.pf-v6-c-toolbar__group`, `.pf-v6-c-toolbar__item` | Modifies toolbar group or item spacing at optional [breakpoint](/foundations-and-styles/design-tokens/all-design-tokens). |
3735
+ | `.pf-m-gap-[none/sm/md/lg/xl/2xl]` | `.pf-v6-c-toolbar__group`, `.pf-v6-c-toolbar__item` | Modifies both column and row gap for toolbar group or item spacing at optional [breakpoint](/foundations-and-styles/design-tokens/all-design-tokens). |