@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/MenuToggle/examples/MenuToggle.md CHANGED
@@ -14,7 +14,19 @@ cssPrefix: pf-v6-c-menu-toggle
14
14
  <span class="pf-v6-c-menu-toggle__text">Collapsed</span>
15
15
  <span class="pf-v6-c-menu-toggle__controls">
16
16
  <span class="pf-v6-c-menu-toggle__toggle-icon">
17
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
17
+ <svg
18
+ class="pf-v6-svg"
19
+ viewBox="0 0 20 20"
20
+ fill="currentColor"
21
+ aria-hidden="true"
22
+ role="img"
23
+ width="1em"
24
+ height="1em"
25
+ >
26
+ <path
27
+ 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"
28
+ />
29
+ </svg>
18
30
  </span>
19
31
  </span>
20
32
  </button>
@@ -32,7 +44,19 @@ cssPrefix: pf-v6-c-menu-toggle
32
44
  <span class="pf-v6-c-menu-toggle__text">Expanded</span>
33
45
  <span class="pf-v6-c-menu-toggle__controls">
34
46
  <span class="pf-v6-c-menu-toggle__toggle-icon">
35
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
47
+ <svg
48
+ class="pf-v6-svg"
49
+ viewBox="0 0 20 20"
50
+ fill="currentColor"
51
+ aria-hidden="true"
52
+ role="img"
53
+ width="1em"
54
+ height="1em"
55
+ >
56
+ <path
57
+ 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"
58
+ />
59
+ </svg>
36
60
  </span>
37
61
  </span>
38
62
  </button>
@@ -51,7 +75,19 @@ cssPrefix: pf-v6-c-menu-toggle
51
75
  <span class="pf-v6-c-menu-toggle__text">Disabled</span>
52
76
  <span class="pf-v6-c-menu-toggle__controls">
53
77
  <span class="pf-v6-c-menu-toggle__toggle-icon">
54
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
78
+ <svg
79
+ class="pf-v6-svg"
80
+ viewBox="0 0 20 20"
81
+ fill="currentColor"
82
+ aria-hidden="true"
83
+ role="img"
84
+ width="1em"
85
+ height="1em"
86
+ >
87
+ <path
88
+ 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"
89
+ />
90
+ </svg>
55
91
  </span>
56
92
  </span>
57
93
  </button>
@@ -68,7 +104,19 @@ cssPrefix: pf-v6-c-menu-toggle
68
104
  </span>
69
105
  <span class="pf-v6-c-menu-toggle__controls">
70
106
  <span class="pf-v6-c-menu-toggle__toggle-icon">
71
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
107
+ <svg
108
+ class="pf-v6-svg"
109
+ viewBox="0 0 20 20"
110
+ fill="currentColor"
111
+ aria-hidden="true"
112
+ role="img"
113
+ width="1em"
114
+ height="1em"
115
+ >
116
+ <path
117
+ 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"
118
+ />
119
+ </svg>
72
120
  </span>
73
121
  </span>
74
122
  </button>
@@ -78,7 +126,6 @@ cssPrefix: pf-v6-c-menu-toggle
78
126
  class="pf-v6-c-menu-toggle pf-m-text pf-m-small pf-m-plain"
79
127
  type="button"
80
128
  aria-expanded="false"
81
- aria-label="Menu toggle"
82
129
  >
83
130
  <span class="pf-v6-c-menu-toggle__count">
84
131
  <span class="pf-v6-c-badge pf-m-unread">
@@ -88,7 +135,19 @@ cssPrefix: pf-v6-c-menu-toggle
88
135
  </span>
89
136
  <span class="pf-v6-c-menu-toggle__controls">
90
137
  <span class="pf-v6-c-menu-toggle__toggle-icon">
91
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
138
+ <svg
139
+ class="pf-v6-svg"
140
+ viewBox="0 0 20 20"
141
+ fill="currentColor"
142
+ aria-hidden="true"
143
+ role="img"
144
+ width="1em"
145
+ height="1em"
146
+ >
147
+ <path
148
+ 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"
149
+ />
150
+ </svg>
92
151
  </span>
93
152
  </span>
94
153
  </button>
@@ -106,7 +165,19 @@ cssPrefix: pf-v6-c-menu-toggle
106
165
  <span class="pf-v6-c-menu-toggle__text">Collapsed</span>
107
166
  <span class="pf-v6-c-menu-toggle__controls">
108
167
  <span class="pf-v6-c-menu-toggle__toggle-icon">
109
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
168
+ <svg
169
+ class="pf-v6-svg"
170
+ viewBox="0 0 20 20"
171
+ fill="currentColor"
172
+ aria-hidden="true"
173
+ role="img"
174
+ width="1em"
175
+ height="1em"
176
+ >
177
+ <path
178
+ 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"
179
+ />
180
+ </svg>
110
181
  </span>
111
182
  </span>
112
183
  </button>
@@ -118,12 +189,36 @@ cssPrefix: pf-v6-c-menu-toggle
118
189
  aria-expanded="false"
119
190
  >
120
191
  <span class="pf-v6-c-menu-toggle__icon">
121
- <i class="fas fa-cog" aria-hidden="true"></i>
192
+ <svg
193
+ class="pf-v6-svg"
194
+ viewBox="0 0 32 32"
195
+ fill="currentColor"
196
+ aria-hidden="true"
197
+ role="img"
198
+ width="1em"
199
+ height="1em"
200
+ >
201
+ <path
202
+ d="M30.168 12.894a.5.5 0 0 0-.488-.394h-2.732a11.512 11.512 0 0 0-.729-1.769l1.931-1.93a.5.5 0 0 0 .066-.625 14.693 14.693 0 0 0-4.393-4.392.498.498 0 0 0-.624.067l-1.93 1.93a11.512 11.512 0 0 0-1.769-.729V2.319a.5.5 0 0 0-.395-.489 14.81 14.81 0 0 0-6.211 0 .5.5 0 0 0-.395.489v2.733c-.614.196-1.207.439-1.769.729L8.8 3.851a.498.498 0 0 0-.624-.067 14.714 14.714 0 0 0-4.393 4.392.5.5 0 0 0 .066.625l1.931 1.93a11.512 11.512 0 0 0-.729 1.769H2.319a.5.5 0 0 0-.488.394 14.652 14.652 0 0 0 0 6.212.5.5 0 0 0 .488.394h2.732c.196.615.44 1.207.729 1.769l-1.931 1.93a.5.5 0 0 0-.066.625 14.673 14.673 0 0 0 4.393 4.392.498.498 0 0 0 .624-.067l1.93-1.93c.562.289 1.154.533 1.769.729v2.733a.5.5 0 0 0 .395.489 14.686 14.686 0 0 0 6.21 0 .5.5 0 0 0 .395-.489v-2.733a11.454 11.454 0 0 0 1.769-.729l1.93 1.93a.5.5 0 0 0 .624.067 14.714 14.714 0 0 0 4.393-4.392.5.5 0 0 0-.066-.625l-1.931-1.93c.289-.562.533-1.154.729-1.769h2.732a.5.5 0 0 0 .488-.394 14.652 14.652 0 0 0 0-6.212ZM16 21.25c-2.895 0-5.25-2.355-5.25-5.25s2.355-5.25 5.25-5.25 5.25 2.355 5.25 5.25-2.355 5.25-5.25 5.25Z"
203
+ />
204
+ </svg>
122
205
  </span>
123
206
  <span class="pf-v6-c-menu-toggle__text">Icon</span>
124
207
  <span class="pf-v6-c-menu-toggle__controls">
125
208
  <span class="pf-v6-c-menu-toggle__toggle-icon">
126
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
209
+ <svg
210
+ class="pf-v6-svg"
211
+ viewBox="0 0 20 20"
212
+ fill="currentColor"
213
+ aria-hidden="true"
214
+ role="img"
215
+ width="1em"
216
+ height="1em"
217
+ >
218
+ <path
219
+ 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"
220
+ />
221
+ </svg>
127
222
  </span>
128
223
  </span>
129
224
  </button>
@@ -137,7 +232,19 @@ cssPrefix: pf-v6-c-menu-toggle
137
232
  <span class="pf-v6-c-menu-toggle__text">Expanded</span>
138
233
  <span class="pf-v6-c-menu-toggle__controls">
139
234
  <span class="pf-v6-c-menu-toggle__toggle-icon">
140
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
235
+ <svg
236
+ class="pf-v6-svg"
237
+ viewBox="0 0 20 20"
238
+ fill="currentColor"
239
+ aria-hidden="true"
240
+ role="img"
241
+ width="1em"
242
+ height="1em"
243
+ >
244
+ <path
245
+ 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"
246
+ />
247
+ </svg>
141
248
  </span>
142
249
  </span>
143
250
  </button>
@@ -152,7 +259,19 @@ cssPrefix: pf-v6-c-menu-toggle
152
259
  <span class="pf-v6-c-menu-toggle__text">Disabled</span>
153
260
  <span class="pf-v6-c-menu-toggle__controls">
154
261
  <span class="pf-v6-c-menu-toggle__toggle-icon">
155
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
262
+ <svg
263
+ class="pf-v6-svg"
264
+ viewBox="0 0 20 20"
265
+ fill="currentColor"
266
+ aria-hidden="true"
267
+ role="img"
268
+ width="1em"
269
+ height="1em"
270
+ >
271
+ <path
272
+ 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"
273
+ />
274
+ </svg>
156
275
  </span>
157
276
  </span>
158
277
  </button>
@@ -170,7 +289,19 @@ cssPrefix: pf-v6-c-menu-toggle
170
289
  <span class="pf-v6-c-menu-toggle__text">Collapsed</span>
171
290
  <span class="pf-v6-c-menu-toggle__controls">
172
291
  <span class="pf-v6-c-menu-toggle__toggle-icon">
173
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
292
+ <svg
293
+ class="pf-v6-svg"
294
+ viewBox="0 0 20 20"
295
+ fill="currentColor"
296
+ aria-hidden="true"
297
+ role="img"
298
+ width="1em"
299
+ height="1em"
300
+ >
301
+ <path
302
+ 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"
303
+ />
304
+ </svg>
174
305
  </span>
175
306
  </span>
176
307
  </button>
@@ -182,12 +313,36 @@ cssPrefix: pf-v6-c-menu-toggle
182
313
  aria-expanded="false"
183
314
  >
184
315
  <span class="pf-v6-c-menu-toggle__icon">
185
- <i class="fas fa-cog" aria-hidden="true"></i>
316
+ <svg
317
+ class="pf-v6-svg"
318
+ viewBox="0 0 32 32"
319
+ fill="currentColor"
320
+ aria-hidden="true"
321
+ role="img"
322
+ width="1em"
323
+ height="1em"
324
+ >
325
+ <path
326
+ 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"
327
+ />
328
+ </svg>
186
329
  </span>
187
330
  <span class="pf-v6-c-menu-toggle__text">Icon</span>
188
331
  <span class="pf-v6-c-menu-toggle__controls">
189
332
  <span class="pf-v6-c-menu-toggle__toggle-icon">
190
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
333
+ <svg
334
+ class="pf-v6-svg"
335
+ viewBox="0 0 20 20"
336
+ fill="currentColor"
337
+ aria-hidden="true"
338
+ role="img"
339
+ width="1em"
340
+ height="1em"
341
+ >
342
+ <path
343
+ 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"
344
+ />
345
+ </svg>
191
346
  </span>
192
347
  </span>
193
348
  </button>
@@ -201,7 +356,19 @@ cssPrefix: pf-v6-c-menu-toggle
201
356
  <span class="pf-v6-c-menu-toggle__text">Expanded</span>
202
357
  <span class="pf-v6-c-menu-toggle__controls">
203
358
  <span class="pf-v6-c-menu-toggle__toggle-icon">
204
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
359
+ <svg
360
+ class="pf-v6-svg"
361
+ viewBox="0 0 20 20"
362
+ fill="currentColor"
363
+ aria-hidden="true"
364
+ role="img"
365
+ width="1em"
366
+ height="1em"
367
+ >
368
+ <path
369
+ 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"
370
+ />
371
+ </svg>
205
372
  </span>
206
373
  </span>
207
374
  </button>
@@ -216,7 +383,19 @@ cssPrefix: pf-v6-c-menu-toggle
216
383
  <span class="pf-v6-c-menu-toggle__text">Disabled</span>
217
384
  <span class="pf-v6-c-menu-toggle__controls">
218
385
  <span class="pf-v6-c-menu-toggle__toggle-icon">
219
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
386
+ <svg
387
+ class="pf-v6-svg"
388
+ viewBox="0 0 20 20"
389
+ fill="currentColor"
390
+ aria-hidden="true"
391
+ role="img"
392
+ width="1em"
393
+ height="1em"
394
+ >
395
+ <path
396
+ 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"
397
+ />
398
+ </svg>
220
399
  </span>
221
400
  </span>
222
401
  </button>
@@ -233,7 +412,19 @@ cssPrefix: pf-v6-c-menu-toggle
233
412
  aria-label="Actions"
234
413
  >
235
414
  <span class="pf-v6-c-menu-toggle__icon">
236
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
415
+ <svg
416
+ class="pf-v6-svg"
417
+ viewBox="0 0 32 32"
418
+ fill="currentColor"
419
+ aria-hidden="true"
420
+ role="img"
421
+ width="1em"
422
+ height="1em"
423
+ >
424
+ <path
425
+ 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"
426
+ />
427
+ </svg>
237
428
  </span>
238
429
  </button>
239
430
  &nbsp;
@@ -244,7 +435,19 @@ cssPrefix: pf-v6-c-menu-toggle
244
435
  aria-label="Actions"
245
436
  >
246
437
  <span class="pf-v6-c-menu-toggle__icon">
247
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
438
+ <svg
439
+ class="pf-v6-svg"
440
+ viewBox="0 0 32 32"
441
+ fill="currentColor"
442
+ aria-hidden="true"
443
+ role="img"
444
+ width="1em"
445
+ height="1em"
446
+ >
447
+ <path
448
+ 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"
449
+ />
450
+ </svg>
248
451
  </span>
249
452
  </button>
250
453
  &nbsp;
@@ -256,7 +459,19 @@ cssPrefix: pf-v6-c-menu-toggle
256
459
  aria-label="Actions"
257
460
  >
258
461
  <span class="pf-v6-c-menu-toggle__icon">
259
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
462
+ <svg
463
+ class="pf-v6-svg"
464
+ viewBox="0 0 32 32"
465
+ fill="currentColor"
466
+ aria-hidden="true"
467
+ role="img"
468
+ width="1em"
469
+ height="1em"
470
+ >
471
+ <path
472
+ 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"
473
+ />
474
+ </svg>
260
475
  </span>
261
476
  </button>
262
477
 
@@ -272,7 +487,19 @@ cssPrefix: pf-v6-c-menu-toggle
272
487
  aria-label="Circle styled actions"
273
488
  >
274
489
  <span class="pf-v6-c-menu-toggle__icon">
275
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
490
+ <svg
491
+ class="pf-v6-svg"
492
+ viewBox="0 0 32 32"
493
+ fill="currentColor"
494
+ aria-hidden="true"
495
+ role="img"
496
+ width="1em"
497
+ height="1em"
498
+ >
499
+ <path
500
+ 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"
501
+ />
502
+ </svg>
276
503
  </span>
277
504
  </button>
278
505
  &nbsp;
@@ -283,7 +510,19 @@ cssPrefix: pf-v6-c-menu-toggle
283
510
  aria-label="Circle and expanded styled actions"
284
511
  >
285
512
  <span class="pf-v6-c-menu-toggle__icon">
286
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
513
+ <svg
514
+ class="pf-v6-svg"
515
+ viewBox="0 0 32 32"
516
+ fill="currentColor"
517
+ aria-hidden="true"
518
+ role="img"
519
+ width="1em"
520
+ height="1em"
521
+ >
522
+ <path
523
+ 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"
524
+ />
525
+ </svg>
287
526
  </span>
288
527
  </button>
289
528
  &nbsp;
@@ -295,7 +534,19 @@ cssPrefix: pf-v6-c-menu-toggle
295
534
  aria-label="Circle and disabled styled actions"
296
535
  >
297
536
  <span class="pf-v6-c-menu-toggle__icon">
298
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
537
+ <svg
538
+ class="pf-v6-svg"
539
+ viewBox="0 0 32 32"
540
+ fill="currentColor"
541
+ aria-hidden="true"
542
+ role="img"
543
+ width="1em"
544
+ height="1em"
545
+ >
546
+ <path
547
+ 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"
548
+ />
549
+ </svg>
299
550
  </span>
300
551
  </button>
301
552
 
@@ -308,12 +559,23 @@ cssPrefix: pf-v6-c-menu-toggle
308
559
  class="pf-v6-c-menu-toggle pf-m-text pf-m-plain"
309
560
  type="button"
310
561
  aria-expanded="false"
311
- aria-label="Menu toggle"
312
562
  >
313
563
  <span class="pf-v6-c-menu-toggle__text">Custom text</span>
314
564
  <span class="pf-v6-c-menu-toggle__controls">
315
565
  <span class="pf-v6-c-menu-toggle__toggle-icon">
316
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
566
+ <svg
567
+ class="pf-v6-svg"
568
+ viewBox="0 0 20 20"
569
+ fill="currentColor"
570
+ aria-hidden="true"
571
+ role="img"
572
+ width="1em"
573
+ height="1em"
574
+ >
575
+ <path
576
+ 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"
577
+ />
578
+ </svg>
317
579
  </span>
318
580
  </span>
319
581
  </button>
@@ -323,12 +585,23 @@ cssPrefix: pf-v6-c-menu-toggle
323
585
  class="pf-v6-c-menu-toggle pf-m-expanded pf-m-text pf-m-plain"
324
586
  type="button"
325
587
  aria-expanded="true"
326
- aria-label="Menu toggle"
327
588
  >
328
589
  <span class="pf-v6-c-menu-toggle__text">Custom text</span>
329
590
  <span class="pf-v6-c-menu-toggle__controls">
330
591
  <span class="pf-v6-c-menu-toggle__toggle-icon">
331
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
592
+ <svg
593
+ class="pf-v6-svg"
594
+ viewBox="0 0 20 20"
595
+ fill="currentColor"
596
+ aria-hidden="true"
597
+ role="img"
598
+ width="1em"
599
+ height="1em"
600
+ >
601
+ <path
602
+ 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"
603
+ />
604
+ </svg>
332
605
  </span>
333
606
  </span>
334
607
  </button>
@@ -339,12 +612,23 @@ cssPrefix: pf-v6-c-menu-toggle
339
612
  type="button"
340
613
  aria-expanded="false"
341
614
  disabled
342
- aria-label="Menu toggle"
343
615
  >
344
616
  <span class="pf-v6-c-menu-toggle__text">Disabled</span>
345
617
  <span class="pf-v6-c-menu-toggle__controls">
346
618
  <span class="pf-v6-c-menu-toggle__toggle-icon">
347
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
619
+ <svg
620
+ class="pf-v6-svg"
621
+ viewBox="0 0 20 20"
622
+ fill="currentColor"
623
+ aria-hidden="true"
624
+ role="img"
625
+ width="1em"
626
+ height="1em"
627
+ >
628
+ <path
629
+ 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"
630
+ />
631
+ </svg>
348
632
  </span>
349
633
  </span>
350
634
  </button>
@@ -362,7 +646,19 @@ cssPrefix: pf-v6-c-menu-toggle
362
646
  <span class="pf-v6-c-menu-toggle__text">Collapsed</span>
363
647
  <span class="pf-v6-c-menu-toggle__controls">
364
648
  <span class="pf-v6-c-menu-toggle__toggle-icon">
365
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
649
+ <svg
650
+ class="pf-v6-svg"
651
+ viewBox="0 0 20 20"
652
+ fill="currentColor"
653
+ aria-hidden="true"
654
+ role="img"
655
+ width="1em"
656
+ height="1em"
657
+ >
658
+ <path
659
+ 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"
660
+ />
661
+ </svg>
366
662
  </span>
367
663
  </span>
368
664
  </button>
@@ -375,7 +671,19 @@ cssPrefix: pf-v6-c-menu-toggle
375
671
  <span class="pf-v6-c-menu-toggle__text">Expanded</span>
376
672
  <span class="pf-v6-c-menu-toggle__controls">
377
673
  <span class="pf-v6-c-menu-toggle__toggle-icon">
378
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
674
+ <svg
675
+ class="pf-v6-svg"
676
+ viewBox="0 0 20 20"
677
+ fill="currentColor"
678
+ aria-hidden="true"
679
+ role="img"
680
+ width="1em"
681
+ height="1em"
682
+ >
683
+ <path
684
+ 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"
685
+ />
686
+ </svg>
379
687
  </span>
380
688
  </span>
381
689
  </button>
@@ -389,7 +697,19 @@ cssPrefix: pf-v6-c-menu-toggle
389
697
  <span class="pf-v6-c-menu-toggle__text">Disabled</span>
390
698
  <span class="pf-v6-c-menu-toggle__controls">
391
699
  <span class="pf-v6-c-menu-toggle__toggle-icon">
392
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
700
+ <svg
701
+ class="pf-v6-svg"
702
+ viewBox="0 0 20 20"
703
+ fill="currentColor"
704
+ aria-hidden="true"
705
+ role="img"
706
+ width="1em"
707
+ height="1em"
708
+ >
709
+ <path
710
+ 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"
711
+ />
712
+ </svg>
393
713
  </span>
394
714
  </span>
395
715
  </button>
@@ -403,7 +723,19 @@ cssPrefix: pf-v6-c-menu-toggle
403
723
  <span class="pf-v6-c-menu-toggle__text">Collapsed</span>
404
724
  <span class="pf-v6-c-menu-toggle__controls">
405
725
  <span class="pf-v6-c-menu-toggle__toggle-icon">
406
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
726
+ <svg
727
+ class="pf-v6-svg"
728
+ viewBox="0 0 20 20"
729
+ fill="currentColor"
730
+ aria-hidden="true"
731
+ role="img"
732
+ width="1em"
733
+ height="1em"
734
+ >
735
+ <path
736
+ 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"
737
+ />
738
+ </svg>
407
739
  </span>
408
740
  </span>
409
741
  </button>
@@ -416,7 +748,19 @@ cssPrefix: pf-v6-c-menu-toggle
416
748
  <span class="pf-v6-c-menu-toggle__text">Expanded</span>
417
749
  <span class="pf-v6-c-menu-toggle__controls">
418
750
  <span class="pf-v6-c-menu-toggle__toggle-icon">
419
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
751
+ <svg
752
+ class="pf-v6-svg"
753
+ viewBox="0 0 20 20"
754
+ fill="currentColor"
755
+ aria-hidden="true"
756
+ role="img"
757
+ width="1em"
758
+ height="1em"
759
+ >
760
+ <path
761
+ 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"
762
+ />
763
+ </svg>
420
764
  </span>
421
765
  </span>
422
766
  </button>
@@ -430,7 +774,19 @@ cssPrefix: pf-v6-c-menu-toggle
430
774
  <span class="pf-v6-c-menu-toggle__text">Disabled</span>
431
775
  <span class="pf-v6-c-menu-toggle__controls">
432
776
  <span class="pf-v6-c-menu-toggle__toggle-icon">
433
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
777
+ <svg
778
+ class="pf-v6-svg"
779
+ viewBox="0 0 20 20"
780
+ fill="currentColor"
781
+ aria-hidden="true"
782
+ role="img"
783
+ width="1em"
784
+ height="1em"
785
+ >
786
+ <path
787
+ 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"
788
+ />
789
+ </svg>
434
790
  </span>
435
791
  </span>
436
792
  </button>
@@ -444,7 +800,19 @@ cssPrefix: pf-v6-c-menu-toggle
444
800
  <span class="pf-v6-c-menu-toggle__text">Collapsed</span>
445
801
  <span class="pf-v6-c-menu-toggle__controls">
446
802
  <span class="pf-v6-c-menu-toggle__toggle-icon">
447
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
803
+ <svg
804
+ class="pf-v6-svg"
805
+ viewBox="0 0 20 20"
806
+ fill="currentColor"
807
+ aria-hidden="true"
808
+ role="img"
809
+ width="1em"
810
+ height="1em"
811
+ >
812
+ <path
813
+ 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"
814
+ />
815
+ </svg>
448
816
  </span>
449
817
  </span>
450
818
  </button>
@@ -457,7 +825,19 @@ cssPrefix: pf-v6-c-menu-toggle
457
825
  <span class="pf-v6-c-menu-toggle__text">Expanded</span>
458
826
  <span class="pf-v6-c-menu-toggle__controls">
459
827
  <span class="pf-v6-c-menu-toggle__toggle-icon">
460
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
828
+ <svg
829
+ class="pf-v6-svg"
830
+ viewBox="0 0 20 20"
831
+ fill="currentColor"
832
+ aria-hidden="true"
833
+ role="img"
834
+ width="1em"
835
+ height="1em"
836
+ >
837
+ <path
838
+ 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"
839
+ />
840
+ </svg>
461
841
  </span>
462
842
  </span>
463
843
  </button>
@@ -471,7 +851,19 @@ cssPrefix: pf-v6-c-menu-toggle
471
851
  <span class="pf-v6-c-menu-toggle__text">Disabled</span>
472
852
  <span class="pf-v6-c-menu-toggle__controls">
473
853
  <span class="pf-v6-c-menu-toggle__toggle-icon">
474
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
854
+ <svg
855
+ class="pf-v6-svg"
856
+ viewBox="0 0 20 20"
857
+ fill="currentColor"
858
+ aria-hidden="true"
859
+ role="img"
860
+ width="1em"
861
+ height="1em"
862
+ >
863
+ <path
864
+ 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"
865
+ />
866
+ </svg>
475
867
  </span>
476
868
  </span>
477
869
  </button>
@@ -485,7 +877,19 @@ cssPrefix: pf-v6-c-menu-toggle
485
877
  <span class="pf-v6-c-menu-toggle__text">Collapsed</span>
486
878
  <span class="pf-v6-c-menu-toggle__controls">
487
879
  <span class="pf-v6-c-menu-toggle__toggle-icon">
488
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
880
+ <svg
881
+ class="pf-v6-svg"
882
+ viewBox="0 0 20 20"
883
+ fill="currentColor"
884
+ aria-hidden="true"
885
+ role="img"
886
+ width="1em"
887
+ height="1em"
888
+ >
889
+ <path
890
+ 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"
891
+ />
892
+ </svg>
489
893
  </span>
490
894
  </span>
491
895
  </button>
@@ -498,7 +902,19 @@ cssPrefix: pf-v6-c-menu-toggle
498
902
  <span class="pf-v6-c-menu-toggle__text">Expanded</span>
499
903
  <span class="pf-v6-c-menu-toggle__controls">
500
904
  <span class="pf-v6-c-menu-toggle__toggle-icon">
501
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
905
+ <svg
906
+ class="pf-v6-svg"
907
+ viewBox="0 0 20 20"
908
+ fill="currentColor"
909
+ aria-hidden="true"
910
+ role="img"
911
+ width="1em"
912
+ height="1em"
913
+ >
914
+ <path
915
+ 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"
916
+ />
917
+ </svg>
502
918
  </span>
503
919
  </span>
504
920
  </button>
@@ -512,7 +928,19 @@ cssPrefix: pf-v6-c-menu-toggle
512
928
  <span class="pf-v6-c-menu-toggle__text">Disabled</span>
513
929
  <span class="pf-v6-c-menu-toggle__controls">
514
930
  <span class="pf-v6-c-menu-toggle__toggle-icon">
515
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
931
+ <svg
932
+ class="pf-v6-svg"
933
+ viewBox="0 0 20 20"
934
+ fill="currentColor"
935
+ aria-hidden="true"
936
+ role="img"
937
+ width="1em"
938
+ height="1em"
939
+ >
940
+ <path
941
+ 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"
942
+ />
943
+ </svg>
516
944
  </span>
517
945
  </span>
518
946
  </button>
@@ -525,7 +953,19 @@ cssPrefix: pf-v6-c-menu-toggle
525
953
  aria-label="Actions"
526
954
  >
527
955
  <span class="pf-v6-c-menu-toggle__icon">
528
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
956
+ <svg
957
+ class="pf-v6-svg"
958
+ viewBox="0 0 32 32"
959
+ fill="currentColor"
960
+ aria-hidden="true"
961
+ role="img"
962
+ width="1em"
963
+ height="1em"
964
+ >
965
+ <path
966
+ 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"
967
+ />
968
+ </svg>
529
969
  </span>
530
970
  </button>
531
971
  &nbsp;
@@ -536,7 +976,19 @@ cssPrefix: pf-v6-c-menu-toggle
536
976
  aria-label="Actions"
537
977
  >
538
978
  <span class="pf-v6-c-menu-toggle__icon">
539
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
979
+ <svg
980
+ class="pf-v6-svg"
981
+ viewBox="0 0 32 32"
982
+ fill="currentColor"
983
+ aria-hidden="true"
984
+ role="img"
985
+ width="1em"
986
+ height="1em"
987
+ >
988
+ <path
989
+ 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"
990
+ />
991
+ </svg>
540
992
  </span>
541
993
  </button>
542
994
  &nbsp;
@@ -548,7 +1000,19 @@ cssPrefix: pf-v6-c-menu-toggle
548
1000
  aria-label="Actions"
549
1001
  >
550
1002
  <span class="pf-v6-c-menu-toggle__icon">
551
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1003
+ <svg
1004
+ class="pf-v6-svg"
1005
+ viewBox="0 0 32 32"
1006
+ fill="currentColor"
1007
+ aria-hidden="true"
1008
+ role="img"
1009
+ width="1em"
1010
+ height="1em"
1011
+ >
1012
+ <path
1013
+ 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"
1014
+ />
1015
+ </svg>
552
1016
  </span>
553
1017
  </button>
554
1018
 
@@ -563,12 +1027,36 @@ cssPrefix: pf-v6-c-menu-toggle
563
1027
  aria-expanded="false"
564
1028
  >
565
1029
  <span class="pf-v6-c-menu-toggle__icon">
566
- <i class="fas fa-cog" aria-hidden="true"></i>
1030
+ <svg
1031
+ class="pf-v6-svg"
1032
+ viewBox="0 0 32 32"
1033
+ fill="currentColor"
1034
+ aria-hidden="true"
1035
+ role="img"
1036
+ width="1em"
1037
+ height="1em"
1038
+ >
1039
+ <path
1040
+ 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"
1041
+ />
1042
+ </svg>
567
1043
  </span>
568
1044
  <span class="pf-v6-c-menu-toggle__text">Icon</span>
569
1045
  <span class="pf-v6-c-menu-toggle__controls">
570
1046
  <span class="pf-v6-c-menu-toggle__toggle-icon">
571
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
1047
+ <svg
1048
+ class="pf-v6-svg"
1049
+ viewBox="0 0 20 20"
1050
+ fill="currentColor"
1051
+ aria-hidden="true"
1052
+ role="img"
1053
+ width="1em"
1054
+ height="1em"
1055
+ >
1056
+ <path
1057
+ 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"
1058
+ />
1059
+ </svg>
572
1060
  </span>
573
1061
  </span>
574
1062
  </button>
@@ -581,12 +1069,36 @@ cssPrefix: pf-v6-c-menu-toggle
581
1069
  disabled
582
1070
  >
583
1071
  <span class="pf-v6-c-menu-toggle__icon">
584
- <i class="fas fa-cog" aria-hidden="true"></i>
1072
+ <svg
1073
+ class="pf-v6-svg"
1074
+ viewBox="0 0 32 32"
1075
+ fill="currentColor"
1076
+ aria-hidden="true"
1077
+ role="img"
1078
+ width="1em"
1079
+ height="1em"
1080
+ >
1081
+ <path
1082
+ d="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"
1083
+ />
1084
+ </svg>
585
1085
  </span>
586
1086
  <span class="pf-v6-c-menu-toggle__text">Icon</span>
587
1087
  <span class="pf-v6-c-menu-toggle__controls">
588
1088
  <span class="pf-v6-c-menu-toggle__toggle-icon">
589
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
1089
+ <svg
1090
+ class="pf-v6-svg"
1091
+ viewBox="0 0 20 20"
1092
+ fill="currentColor"
1093
+ aria-hidden="true"
1094
+ role="img"
1095
+ width="1em"
1096
+ height="1em"
1097
+ >
1098
+ <path
1099
+ 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"
1100
+ />
1101
+ </svg>
590
1102
  </span>
591
1103
  </span>
592
1104
  </button>
@@ -607,7 +1119,19 @@ cssPrefix: pf-v6-c-menu-toggle
607
1119
  <span class="pf-v6-c-menu-toggle__text">Ned Username</span>
608
1120
  <span class="pf-v6-c-menu-toggle__controls">
609
1121
  <span class="pf-v6-c-menu-toggle__toggle-icon">
610
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
1122
+ <svg
1123
+ class="pf-v6-svg"
1124
+ viewBox="0 0 20 20"
1125
+ fill="currentColor"
1126
+ aria-hidden="true"
1127
+ role="img"
1128
+ width="1em"
1129
+ height="1em"
1130
+ >
1131
+ <path
1132
+ 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"
1133
+ />
1134
+ </svg>
611
1135
  </span>
612
1136
  </span>
613
1137
  </button>
@@ -628,7 +1152,19 @@ cssPrefix: pf-v6-c-menu-toggle
628
1152
  <span class="pf-v6-c-menu-toggle__text">Ned Username</span>
629
1153
  <span class="pf-v6-c-menu-toggle__controls">
630
1154
  <span class="pf-v6-c-menu-toggle__toggle-icon">
631
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
1155
+ <svg
1156
+ class="pf-v6-svg"
1157
+ viewBox="0 0 20 20"
1158
+ fill="currentColor"
1159
+ aria-hidden="true"
1160
+ role="img"
1161
+ width="1em"
1162
+ height="1em"
1163
+ >
1164
+ <path
1165
+ 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"
1166
+ />
1167
+ </svg>
632
1168
  </span>
633
1169
  </span>
634
1170
  </button>
@@ -650,7 +1186,19 @@ cssPrefix: pf-v6-c-menu-toggle
650
1186
  <span class="pf-v6-c-menu-toggle__text">Ned Username</span>
651
1187
  <span class="pf-v6-c-menu-toggle__controls">
652
1188
  <span class="pf-v6-c-menu-toggle__toggle-icon">
653
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
1189
+ <svg
1190
+ class="pf-v6-svg"
1191
+ viewBox="0 0 20 20"
1192
+ fill="currentColor"
1193
+ aria-hidden="true"
1194
+ role="img"
1195
+ width="1em"
1196
+ height="1em"
1197
+ >
1198
+ <path
1199
+ 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"
1200
+ />
1201
+ </svg>
654
1202
  </span>
655
1203
  </span>
656
1204
  </button>
@@ -668,7 +1216,19 @@ cssPrefix: pf-v6-c-menu-toggle
668
1216
  <span class="pf-v6-c-menu-toggle__text">Full height</span>
669
1217
  <span class="pf-v6-c-menu-toggle__controls">
670
1218
  <span class="pf-v6-c-menu-toggle__toggle-icon">
671
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
1219
+ <svg
1220
+ class="pf-v6-svg"
1221
+ viewBox="0 0 20 20"
1222
+ fill="currentColor"
1223
+ aria-hidden="true"
1224
+ role="img"
1225
+ width="1em"
1226
+ height="1em"
1227
+ >
1228
+ <path
1229
+ 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"
1230
+ />
1231
+ </svg>
672
1232
  </span>
673
1233
  </span>
674
1234
  </button>
@@ -686,7 +1246,49 @@ cssPrefix: pf-v6-c-menu-toggle
686
1246
  <span class="pf-v6-c-menu-toggle__text">Full width</span>
687
1247
  <span class="pf-v6-c-menu-toggle__controls">
688
1248
  <span class="pf-v6-c-menu-toggle__toggle-icon">
689
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
1249
+ <svg
1250
+ class="pf-v6-svg"
1251
+ viewBox="0 0 20 20"
1252
+ fill="currentColor"
1253
+ aria-hidden="true"
1254
+ role="img"
1255
+ width="1em"
1256
+ height="1em"
1257
+ >
1258
+ <path
1259
+ 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"
1260
+ />
1261
+ </svg>
1262
+ </span>
1263
+ </span>
1264
+ </button>
1265
+
1266
+ ```
1267
+
1268
+ ### Form
1269
+
1270
+ ```html
1271
+ <button
1272
+ class="pf-v6-c-menu-toggle pf-m-form"
1273
+ type="button"
1274
+ aria-expanded="false"
1275
+ >
1276
+ <span class="pf-v6-c-menu-toggle__text">Select option</span>
1277
+ <span class="pf-v6-c-menu-toggle__controls">
1278
+ <span class="pf-v6-c-menu-toggle__toggle-icon">
1279
+ <svg
1280
+ class="pf-v6-svg"
1281
+ viewBox="0 0 20 20"
1282
+ fill="currentColor"
1283
+ aria-hidden="true"
1284
+ role="img"
1285
+ width="1em"
1286
+ height="1em"
1287
+ >
1288
+ <path
1289
+ 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"
1290
+ />
1291
+ </svg>
690
1292
  </span>
691
1293
  </span>
692
1294
  </button>
@@ -718,7 +1320,19 @@ cssPrefix: pf-v6-c-menu-toggle
718
1320
  aria-label="Clear input"
719
1321
  >
720
1322
  <span class="pf-v6-c-button__icon">
721
- <i class="fas fa-times fa-fw" aria-hidden="true"></i>
1323
+ <svg
1324
+ class="pf-v6-svg"
1325
+ viewBox="0 0 20 20"
1326
+ fill="currentColor"
1327
+ aria-hidden="true"
1328
+ role="img"
1329
+ width="1em"
1330
+ height="1em"
1331
+ >
1332
+ <path
1333
+ 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"
1334
+ />
1335
+ </svg>
722
1336
  </span>
723
1337
  </button>
724
1338
  </div>
@@ -732,7 +1346,19 @@ cssPrefix: pf-v6-c-menu-toggle
732
1346
  >
733
1347
  <span class="pf-v6-c-menu-toggle__controls">
734
1348
  <span class="pf-v6-c-menu-toggle__toggle-icon">
735
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
1349
+ <svg
1350
+ class="pf-v6-svg"
1351
+ viewBox="0 0 20 20"
1352
+ fill="currentColor"
1353
+ aria-hidden="true"
1354
+ role="img"
1355
+ width="1em"
1356
+ height="1em"
1357
+ >
1358
+ <path
1359
+ 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"
1360
+ />
1361
+ </svg>
736
1362
  </span>
737
1363
  </span>
738
1364
  </button>
@@ -751,10 +1377,34 @@ cssPrefix: pf-v6-c-menu-toggle
751
1377
  <span class="pf-v6-c-menu-toggle__text">Success</span>
752
1378
  <span class="pf-v6-c-menu-toggle__controls">
753
1379
  <span class="pf-v6-c-menu-toggle__status-icon">
754
- <i class="fas fa-check-circle" aria-hidden="true"></i>
1380
+ <svg
1381
+ class="pf-v6-svg"
1382
+ viewBox="0 0 32 32"
1383
+ fill="currentColor"
1384
+ aria-hidden="true"
1385
+ role="img"
1386
+ width="1em"
1387
+ height="1em"
1388
+ >
1389
+ <path
1390
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm7.795 11.795-8.646 8.646c-.317.317-.733.475-1.149.475s-.832-.158-1.149-.475l-4.646-4.646a1.126 1.126 0 0 1 1.591-1.591l4.205 4.205 8.205-8.205a1.126 1.126 0 0 1 1.591 1.591Z"
1391
+ />
1392
+ </svg>
755
1393
  </span>
756
1394
  <span class="pf-v6-c-menu-toggle__toggle-icon">
757
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
1395
+ <svg
1396
+ class="pf-v6-svg"
1397
+ viewBox="0 0 20 20"
1398
+ fill="currentColor"
1399
+ aria-hidden="true"
1400
+ role="img"
1401
+ width="1em"
1402
+ height="1em"
1403
+ >
1404
+ <path
1405
+ 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"
1406
+ />
1407
+ </svg>
758
1408
  </span>
759
1409
  </span>
760
1410
  </button>
@@ -770,10 +1420,34 @@ cssPrefix: pf-v6-c-menu-toggle
770
1420
  <span class="pf-v6-c-menu-toggle__text">Warning</span>
771
1421
  <span class="pf-v6-c-menu-toggle__controls">
772
1422
  <span class="pf-v6-c-menu-toggle__status-icon">
773
- <i class="fas fa-exclamation-triangle" aria-hidden="true"></i>
1423
+ <svg
1424
+ class="pf-v6-svg"
1425
+ viewBox="0 0 32 32"
1426
+ fill="currentColor"
1427
+ aria-hidden="true"
1428
+ role="img"
1429
+ width="1em"
1430
+ height="1em"
1431
+ >
1432
+ <path
1433
+ d="m31.874 28.514-15.011-27a1.001 1.001 0 0 0-1.748 0l-15.011 27A1 1 0 0 0 .978 30H31a1 1 0 0 0 .874-1.486ZM14.5 12a1.5 1.5 0 0 1 3 0v5a1.5 1.5 0 0 1-3 0v-5ZM16 26.001a2 2 0 1 1-.001-3.999A2 2 0 0 1 16 26.001Z"
1434
+ />
1435
+ </svg>
774
1436
  </span>
775
1437
  <span class="pf-v6-c-menu-toggle__toggle-icon">
776
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
1438
+ <svg
1439
+ class="pf-v6-svg"
1440
+ viewBox="0 0 20 20"
1441
+ fill="currentColor"
1442
+ aria-hidden="true"
1443
+ role="img"
1444
+ width="1em"
1445
+ height="1em"
1446
+ >
1447
+ <path
1448
+ 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"
1449
+ />
1450
+ </svg>
777
1451
  </span>
778
1452
  </span>
779
1453
  </button>
@@ -789,10 +1463,34 @@ cssPrefix: pf-v6-c-menu-toggle
789
1463
  <span class="pf-v6-c-menu-toggle__text">Danger</span>
790
1464
  <span class="pf-v6-c-menu-toggle__controls">
791
1465
  <span class="pf-v6-c-menu-toggle__status-icon">
792
- <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
1466
+ <svg
1467
+ class="pf-v6-svg"
1468
+ viewBox="0 0 32 32"
1469
+ fill="currentColor"
1470
+ aria-hidden="true"
1471
+ role="img"
1472
+ width="1em"
1473
+ height="1em"
1474
+ >
1475
+ <path
1476
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm-1.5 8a1.5 1.5 0 1 1 3 0v7a1.5 1.5 0 1 1-3 0V9ZM16 25.001a2 2 0 1 1-.001-3.999A2 2 0 0 1 16 25.001Z"
1477
+ />
1478
+ </svg>
793
1479
  </span>
794
1480
  <span class="pf-v6-c-menu-toggle__toggle-icon">
795
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
1481
+ <svg
1482
+ class="pf-v6-svg"
1483
+ viewBox="0 0 20 20"
1484
+ fill="currentColor"
1485
+ aria-hidden="true"
1486
+ role="img"
1487
+ width="1em"
1488
+ height="1em"
1489
+ >
1490
+ <path
1491
+ 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"
1492
+ />
1493
+ </svg>
796
1494
  </span>
797
1495
  </span>
798
1496
  </button>
@@ -810,7 +1508,19 @@ cssPrefix: pf-v6-c-menu-toggle
810
1508
  <span class="pf-v6-c-menu-toggle__text">Placeholder text</span>
811
1509
  <span class="pf-v6-c-menu-toggle__controls">
812
1510
  <span class="pf-v6-c-menu-toggle__toggle-icon">
813
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
1511
+ <svg
1512
+ class="pf-v6-svg"
1513
+ viewBox="0 0 20 20"
1514
+ fill="currentColor"
1515
+ aria-hidden="true"
1516
+ role="img"
1517
+ width="1em"
1518
+ height="1em"
1519
+ >
1520
+ <path
1521
+ 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"
1522
+ />
1523
+ </svg>
814
1524
  </span>
815
1525
  </span>
816
1526
  </button>
@@ -836,7 +1546,19 @@ Shown with default, primary, and secondary styling
836
1546
  >
837
1547
  <span class="pf-v6-c-menu-toggle__controls">
838
1548
  <span class="pf-v6-c-menu-toggle__toggle-icon">
839
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
1549
+ <svg
1550
+ class="pf-v6-svg"
1551
+ viewBox="0 0 20 20"
1552
+ fill="currentColor"
1553
+ aria-hidden="true"
1554
+ role="img"
1555
+ width="1em"
1556
+ height="1em"
1557
+ >
1558
+ <path
1559
+ 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"
1560
+ />
1561
+ </svg>
840
1562
  </span>
841
1563
  </span>
842
1564
  </button>
@@ -856,7 +1578,19 @@ Shown with default, primary, and secondary styling
856
1578
  >
857
1579
  <span class="pf-v6-c-menu-toggle__controls">
858
1580
  <span class="pf-v6-c-menu-toggle__toggle-icon">
859
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
1581
+ <svg
1582
+ class="pf-v6-svg"
1583
+ viewBox="0 0 20 20"
1584
+ fill="currentColor"
1585
+ aria-hidden="true"
1586
+ role="img"
1587
+ width="1em"
1588
+ height="1em"
1589
+ >
1590
+ <path
1591
+ 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"
1592
+ />
1593
+ </svg>
860
1594
  </span>
861
1595
  </span>
862
1596
  </button>
@@ -877,7 +1611,19 @@ Shown with default, primary, and secondary styling
877
1611
  >
878
1612
  <span class="pf-v6-c-menu-toggle__controls">
879
1613
  <span class="pf-v6-c-menu-toggle__toggle-icon">
880
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
1614
+ <svg
1615
+ class="pf-v6-svg"
1616
+ viewBox="0 0 20 20"
1617
+ fill="currentColor"
1618
+ aria-hidden="true"
1619
+ role="img"
1620
+ width="1em"
1621
+ height="1em"
1622
+ >
1623
+ <path
1624
+ 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"
1625
+ />
1626
+ </svg>
881
1627
  </span>
882
1628
  </span>
883
1629
  </button>
@@ -900,7 +1646,19 @@ Shown with default, primary, and secondary styling
900
1646
  >
901
1647
  <span class="pf-v6-c-menu-toggle__controls">
902
1648
  <span class="pf-v6-c-menu-toggle__toggle-icon">
903
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
1649
+ <svg
1650
+ class="pf-v6-svg"
1651
+ viewBox="0 0 20 20"
1652
+ fill="currentColor"
1653
+ aria-hidden="true"
1654
+ role="img"
1655
+ width="1em"
1656
+ height="1em"
1657
+ >
1658
+ <path
1659
+ 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"
1660
+ />
1661
+ </svg>
904
1662
  </span>
905
1663
  </span>
906
1664
  </button>
@@ -920,7 +1678,19 @@ Shown with default, primary, and secondary styling
920
1678
  >
921
1679
  <span class="pf-v6-c-menu-toggle__controls">
922
1680
  <span class="pf-v6-c-menu-toggle__toggle-icon">
923
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
1681
+ <svg
1682
+ class="pf-v6-svg"
1683
+ viewBox="0 0 20 20"
1684
+ fill="currentColor"
1685
+ aria-hidden="true"
1686
+ role="img"
1687
+ width="1em"
1688
+ height="1em"
1689
+ >
1690
+ <path
1691
+ 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"
1692
+ />
1693
+ </svg>
924
1694
  </span>
925
1695
  </span>
926
1696
  </button>
@@ -941,7 +1711,19 @@ Shown with default, primary, and secondary styling
941
1711
  >
942
1712
  <span class="pf-v6-c-menu-toggle__controls">
943
1713
  <span class="pf-v6-c-menu-toggle__toggle-icon">
944
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
1714
+ <svg
1715
+ class="pf-v6-svg"
1716
+ viewBox="0 0 20 20"
1717
+ fill="currentColor"
1718
+ aria-hidden="true"
1719
+ role="img"
1720
+ width="1em"
1721
+ height="1em"
1722
+ >
1723
+ <path
1724
+ 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"
1725
+ />
1726
+ </svg>
945
1727
  </span>
946
1728
  </span>
947
1729
  </button>
@@ -964,7 +1746,19 @@ Shown with default, primary, and secondary styling
964
1746
  >
965
1747
  <span class="pf-v6-c-menu-toggle__controls">
966
1748
  <span class="pf-v6-c-menu-toggle__toggle-icon">
967
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
1749
+ <svg
1750
+ class="pf-v6-svg"
1751
+ viewBox="0 0 20 20"
1752
+ fill="currentColor"
1753
+ aria-hidden="true"
1754
+ role="img"
1755
+ width="1em"
1756
+ height="1em"
1757
+ >
1758
+ <path
1759
+ 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"
1760
+ />
1761
+ </svg>
968
1762
  </span>
969
1763
  </span>
970
1764
  </button>
@@ -984,7 +1778,19 @@ Shown with default, primary, and secondary styling
984
1778
  >
985
1779
  <span class="pf-v6-c-menu-toggle__controls">
986
1780
  <span class="pf-v6-c-menu-toggle__toggle-icon">
987
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
1781
+ <svg
1782
+ class="pf-v6-svg"
1783
+ viewBox="0 0 20 20"
1784
+ fill="currentColor"
1785
+ aria-hidden="true"
1786
+ role="img"
1787
+ width="1em"
1788
+ height="1em"
1789
+ >
1790
+ <path
1791
+ 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"
1792
+ />
1793
+ </svg>
988
1794
  </span>
989
1795
  </span>
990
1796
  </button>
@@ -1005,7 +1811,19 @@ Shown with default, primary, and secondary styling
1005
1811
  >
1006
1812
  <span class="pf-v6-c-menu-toggle__controls">
1007
1813
  <span class="pf-v6-c-menu-toggle__toggle-icon">
1008
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
1814
+ <svg
1815
+ class="pf-v6-svg"
1816
+ viewBox="0 0 20 20"
1817
+ fill="currentColor"
1818
+ aria-hidden="true"
1819
+ role="img"
1820
+ width="1em"
1821
+ height="1em"
1822
+ >
1823
+ <path
1824
+ 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"
1825
+ />
1826
+ </svg>
1009
1827
  </span>
1010
1828
  </span>
1011
1829
  </button>
@@ -1040,7 +1858,19 @@ Shown with default, primary, and secondary styling
1040
1858
  >
1041
1859
  <span class="pf-v6-c-menu-toggle__controls">
1042
1860
  <span class="pf-v6-c-menu-toggle__toggle-icon">
1043
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
1861
+ <svg
1862
+ class="pf-v6-svg"
1863
+ viewBox="0 0 20 20"
1864
+ fill="currentColor"
1865
+ aria-hidden="true"
1866
+ role="img"
1867
+ width="1em"
1868
+ height="1em"
1869
+ >
1870
+ <path
1871
+ 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"
1872
+ />
1873
+ </svg>
1044
1874
  </span>
1045
1875
  </span>
1046
1876
  </button>
@@ -1068,7 +1898,19 @@ Shown with default, primary, and secondary styling
1068
1898
  >
1069
1899
  <span class="pf-v6-c-menu-toggle__controls">
1070
1900
  <span class="pf-v6-c-menu-toggle__toggle-icon">
1071
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
1901
+ <svg
1902
+ class="pf-v6-svg"
1903
+ viewBox="0 0 20 20"
1904
+ fill="currentColor"
1905
+ aria-hidden="true"
1906
+ role="img"
1907
+ width="1em"
1908
+ height="1em"
1909
+ >
1910
+ <path
1911
+ 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"
1912
+ />
1913
+ </svg>
1072
1914
  </span>
1073
1915
  </span>
1074
1916
  </button>
@@ -1098,7 +1940,19 @@ Shown with default, primary, and secondary styling
1098
1940
  >
1099
1941
  <span class="pf-v6-c-menu-toggle__controls">
1100
1942
  <span class="pf-v6-c-menu-toggle__toggle-icon">
1101
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
1943
+ <svg
1944
+ class="pf-v6-svg"
1945
+ viewBox="0 0 20 20"
1946
+ fill="currentColor"
1947
+ aria-hidden="true"
1948
+ role="img"
1949
+ width="1em"
1950
+ height="1em"
1951
+ >
1952
+ <path
1953
+ 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"
1954
+ />
1955
+ </svg>
1102
1956
  </span>
1103
1957
  </span>
1104
1958
  </button>
@@ -1129,7 +1983,19 @@ Shown with default, primary, and secondary styling
1129
1983
  >
1130
1984
  <span class="pf-v6-c-menu-toggle__controls">
1131
1985
  <span class="pf-v6-c-menu-toggle__toggle-icon">
1132
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
1986
+ <svg
1987
+ class="pf-v6-svg"
1988
+ viewBox="0 0 20 20"
1989
+ fill="currentColor"
1990
+ aria-hidden="true"
1991
+ role="img"
1992
+ width="1em"
1993
+ height="1em"
1994
+ >
1995
+ <path
1996
+ 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"
1997
+ />
1998
+ </svg>
1133
1999
  </span>
1134
2000
  </span>
1135
2001
  </button>
@@ -1157,7 +2023,19 @@ Shown with default, primary, and secondary styling
1157
2023
  >
1158
2024
  <span class="pf-v6-c-menu-toggle__controls">
1159
2025
  <span class="pf-v6-c-menu-toggle__toggle-icon">
1160
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
2026
+ <svg
2027
+ class="pf-v6-svg"
2028
+ viewBox="0 0 20 20"
2029
+ fill="currentColor"
2030
+ aria-hidden="true"
2031
+ role="img"
2032
+ width="1em"
2033
+ height="1em"
2034
+ >
2035
+ <path
2036
+ 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"
2037
+ />
2038
+ </svg>
1161
2039
  </span>
1162
2040
  </span>
1163
2041
  </button>
@@ -1187,7 +2065,19 @@ Shown with default, primary, and secondary styling
1187
2065
  >
1188
2066
  <span class="pf-v6-c-menu-toggle__controls">
1189
2067
  <span class="pf-v6-c-menu-toggle__toggle-icon">
1190
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
2068
+ <svg
2069
+ class="pf-v6-svg"
2070
+ viewBox="0 0 20 20"
2071
+ fill="currentColor"
2072
+ aria-hidden="true"
2073
+ role="img"
2074
+ width="1em"
2075
+ height="1em"
2076
+ >
2077
+ <path
2078
+ 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"
2079
+ />
2080
+ </svg>
1191
2081
  </span>
1192
2082
  </span>
1193
2083
  </button>
@@ -1218,7 +2108,19 @@ Shown with default, primary, and secondary styling
1218
2108
  >
1219
2109
  <span class="pf-v6-c-menu-toggle__controls">
1220
2110
  <span class="pf-v6-c-menu-toggle__toggle-icon">
1221
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
2111
+ <svg
2112
+ class="pf-v6-svg"
2113
+ viewBox="0 0 20 20"
2114
+ fill="currentColor"
2115
+ aria-hidden="true"
2116
+ role="img"
2117
+ width="1em"
2118
+ height="1em"
2119
+ >
2120
+ <path
2121
+ 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"
2122
+ />
2123
+ </svg>
1222
2124
  </span>
1223
2125
  </span>
1224
2126
  </button>
@@ -1246,7 +2148,19 @@ Shown with default, primary, and secondary styling
1246
2148
  >
1247
2149
  <span class="pf-v6-c-menu-toggle__controls">
1248
2150
  <span class="pf-v6-c-menu-toggle__toggle-icon">
1249
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
2151
+ <svg
2152
+ class="pf-v6-svg"
2153
+ viewBox="0 0 20 20"
2154
+ fill="currentColor"
2155
+ aria-hidden="true"
2156
+ role="img"
2157
+ width="1em"
2158
+ height="1em"
2159
+ >
2160
+ <path
2161
+ 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"
2162
+ />
2163
+ </svg>
1250
2164
  </span>
1251
2165
  </span>
1252
2166
  </button>
@@ -1276,7 +2190,19 @@ Shown with default, primary, and secondary styling
1276
2190
  >
1277
2191
  <span class="pf-v6-c-menu-toggle__controls">
1278
2192
  <span class="pf-v6-c-menu-toggle__toggle-icon">
1279
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
2193
+ <svg
2194
+ class="pf-v6-svg"
2195
+ viewBox="0 0 20 20"
2196
+ fill="currentColor"
2197
+ aria-hidden="true"
2198
+ role="img"
2199
+ width="1em"
2200
+ height="1em"
2201
+ >
2202
+ <path
2203
+ 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"
2204
+ />
2205
+ </svg>
1280
2206
  </span>
1281
2207
  </span>
1282
2208
  </button>
@@ -1315,7 +2241,19 @@ Shown with default, primary, and secondary styling
1315
2241
  >
1316
2242
  <span class="pf-v6-c-menu-toggle__controls">
1317
2243
  <span class="pf-v6-c-menu-toggle__toggle-icon">
1318
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
2244
+ <svg
2245
+ class="pf-v6-svg"
2246
+ viewBox="0 0 20 20"
2247
+ fill="currentColor"
2248
+ aria-hidden="true"
2249
+ role="img"
2250
+ width="1em"
2251
+ height="1em"
2252
+ >
2253
+ <path
2254
+ 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"
2255
+ />
2256
+ </svg>
1319
2257
  </span>
1320
2258
  </span>
1321
2259
  </button>
@@ -1346,7 +2284,19 @@ Shown with default, primary, and secondary styling
1346
2284
  >
1347
2285
  <span class="pf-v6-c-menu-toggle__controls">
1348
2286
  <span class="pf-v6-c-menu-toggle__toggle-icon">
1349
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
2287
+ <svg
2288
+ class="pf-v6-svg"
2289
+ viewBox="0 0 20 20"
2290
+ fill="currentColor"
2291
+ aria-hidden="true"
2292
+ role="img"
2293
+ width="1em"
2294
+ height="1em"
2295
+ >
2296
+ <path
2297
+ 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"
2298
+ />
2299
+ </svg>
1350
2300
  </span>
1351
2301
  </span>
1352
2302
  </button>
@@ -1379,7 +2329,19 @@ Shown with default, primary, and secondary styling
1379
2329
  >
1380
2330
  <span class="pf-v6-c-menu-toggle__controls">
1381
2331
  <span class="pf-v6-c-menu-toggle__toggle-icon">
1382
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
2332
+ <svg
2333
+ class="pf-v6-svg"
2334
+ viewBox="0 0 20 20"
2335
+ fill="currentColor"
2336
+ aria-hidden="true"
2337
+ role="img"
2338
+ width="1em"
2339
+ height="1em"
2340
+ >
2341
+ <path
2342
+ 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"
2343
+ />
2344
+ </svg>
1383
2345
  </span>
1384
2346
  </span>
1385
2347
  </button>
@@ -1413,7 +2375,19 @@ Shown with default, primary, and secondary styling
1413
2375
  >
1414
2376
  <span class="pf-v6-c-menu-toggle__controls">
1415
2377
  <span class="pf-v6-c-menu-toggle__toggle-icon">
1416
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
2378
+ <svg
2379
+ class="pf-v6-svg"
2380
+ viewBox="0 0 20 20"
2381
+ fill="currentColor"
2382
+ aria-hidden="true"
2383
+ role="img"
2384
+ width="1em"
2385
+ height="1em"
2386
+ >
2387
+ <path
2388
+ 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"
2389
+ />
2390
+ </svg>
1417
2391
  </span>
1418
2392
  </span>
1419
2393
  </button>
@@ -1444,7 +2418,19 @@ Shown with default, primary, and secondary styling
1444
2418
  >
1445
2419
  <span class="pf-v6-c-menu-toggle__controls">
1446
2420
  <span class="pf-v6-c-menu-toggle__toggle-icon">
1447
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
2421
+ <svg
2422
+ class="pf-v6-svg"
2423
+ viewBox="0 0 20 20"
2424
+ fill="currentColor"
2425
+ aria-hidden="true"
2426
+ role="img"
2427
+ width="1em"
2428
+ height="1em"
2429
+ >
2430
+ <path
2431
+ 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"
2432
+ />
2433
+ </svg>
1448
2434
  </span>
1449
2435
  </span>
1450
2436
  </button>
@@ -1477,7 +2463,19 @@ Shown with default, primary, and secondary styling
1477
2463
  >
1478
2464
  <span class="pf-v6-c-menu-toggle__controls">
1479
2465
  <span class="pf-v6-c-menu-toggle__toggle-icon">
1480
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
2466
+ <svg
2467
+ class="pf-v6-svg"
2468
+ viewBox="0 0 20 20"
2469
+ fill="currentColor"
2470
+ aria-hidden="true"
2471
+ role="img"
2472
+ width="1em"
2473
+ height="1em"
2474
+ >
2475
+ <path
2476
+ 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"
2477
+ />
2478
+ </svg>
1481
2479
  </span>
1482
2480
  </span>
1483
2481
  </button>
@@ -1511,7 +2509,19 @@ Shown with default, primary, and secondary styling
1511
2509
  >
1512
2510
  <span class="pf-v6-c-menu-toggle__controls">
1513
2511
  <span class="pf-v6-c-menu-toggle__toggle-icon">
1514
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
2512
+ <svg
2513
+ class="pf-v6-svg"
2514
+ viewBox="0 0 20 20"
2515
+ fill="currentColor"
2516
+ aria-hidden="true"
2517
+ role="img"
2518
+ width="1em"
2519
+ height="1em"
2520
+ >
2521
+ <path
2522
+ 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"
2523
+ />
2524
+ </svg>
1515
2525
  </span>
1516
2526
  </span>
1517
2527
  </button>
@@ -1542,7 +2552,19 @@ Shown with default, primary, and secondary styling
1542
2552
  >
1543
2553
  <span class="pf-v6-c-menu-toggle__controls">
1544
2554
  <span class="pf-v6-c-menu-toggle__toggle-icon">
1545
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
2555
+ <svg
2556
+ class="pf-v6-svg"
2557
+ viewBox="0 0 20 20"
2558
+ fill="currentColor"
2559
+ aria-hidden="true"
2560
+ role="img"
2561
+ width="1em"
2562
+ height="1em"
2563
+ >
2564
+ <path
2565
+ 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"
2566
+ />
2567
+ </svg>
1546
2568
  </span>
1547
2569
  </span>
1548
2570
  </button>
@@ -1575,7 +2597,19 @@ Shown with default, primary, and secondary styling
1575
2597
  >
1576
2598
  <span class="pf-v6-c-menu-toggle__controls">
1577
2599
  <span class="pf-v6-c-menu-toggle__toggle-icon">
1578
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
2600
+ <svg
2601
+ class="pf-v6-svg"
2602
+ viewBox="0 0 20 20"
2603
+ fill="currentColor"
2604
+ aria-hidden="true"
2605
+ role="img"
2606
+ width="1em"
2607
+ height="1em"
2608
+ >
2609
+ <path
2610
+ 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"
2611
+ />
2612
+ </svg>
1579
2613
  </span>
1580
2614
  </span>
1581
2615
  </button>
@@ -1612,7 +2646,19 @@ Shown with default, primary, and secondary styling
1612
2646
  <span class="pf-v6-c-menu-toggle__text">Toggle button text</span>
1613
2647
  <span class="pf-v6-c-menu-toggle__controls">
1614
2648
  <span class="pf-v6-c-menu-toggle__toggle-icon">
1615
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
2649
+ <svg
2650
+ class="pf-v6-svg"
2651
+ viewBox="0 0 20 20"
2652
+ fill="currentColor"
2653
+ aria-hidden="true"
2654
+ role="img"
2655
+ width="1em"
2656
+ height="1em"
2657
+ >
2658
+ <path
2659
+ 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"
2660
+ />
2661
+ </svg>
1616
2662
  </span>
1617
2663
  </span>
1618
2664
  </button>
@@ -1640,7 +2686,19 @@ Shown with default, primary, and secondary styling
1640
2686
  <span class="pf-v6-c-menu-toggle__text">Toggle button text</span>
1641
2687
  <span class="pf-v6-c-menu-toggle__controls">
1642
2688
  <span class="pf-v6-c-menu-toggle__toggle-icon">
1643
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
2689
+ <svg
2690
+ class="pf-v6-svg"
2691
+ viewBox="0 0 20 20"
2692
+ fill="currentColor"
2693
+ aria-hidden="true"
2694
+ role="img"
2695
+ width="1em"
2696
+ height="1em"
2697
+ >
2698
+ <path
2699
+ 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"
2700
+ />
2701
+ </svg>
1644
2702
  </span>
1645
2703
  </span>
1646
2704
  </button>
@@ -1670,7 +2728,19 @@ Shown with default, primary, and secondary styling
1670
2728
  <span class="pf-v6-c-menu-toggle__text">Toggle button text</span>
1671
2729
  <span class="pf-v6-c-menu-toggle__controls">
1672
2730
  <span class="pf-v6-c-menu-toggle__toggle-icon">
1673
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
2731
+ <svg
2732
+ class="pf-v6-svg"
2733
+ viewBox="0 0 20 20"
2734
+ fill="currentColor"
2735
+ aria-hidden="true"
2736
+ role="img"
2737
+ width="1em"
2738
+ height="1em"
2739
+ >
2740
+ <path
2741
+ 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"
2742
+ />
2743
+ </svg>
1674
2744
  </span>
1675
2745
  </span>
1676
2746
  </button>
@@ -1702,7 +2772,19 @@ Shown with default, primary, and secondary styling
1702
2772
  <span class="pf-v6-c-menu-toggle__text">Toggle button text</span>
1703
2773
  <span class="pf-v6-c-menu-toggle__controls">
1704
2774
  <span class="pf-v6-c-menu-toggle__toggle-icon">
1705
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
2775
+ <svg
2776
+ class="pf-v6-svg"
2777
+ viewBox="0 0 20 20"
2778
+ fill="currentColor"
2779
+ aria-hidden="true"
2780
+ role="img"
2781
+ width="1em"
2782
+ height="1em"
2783
+ >
2784
+ <path
2785
+ 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"
2786
+ />
2787
+ </svg>
1706
2788
  </span>
1707
2789
  </span>
1708
2790
  </button>
@@ -1730,7 +2812,19 @@ Shown with default, primary, and secondary styling
1730
2812
  <span class="pf-v6-c-menu-toggle__text">Toggle button text</span>
1731
2813
  <span class="pf-v6-c-menu-toggle__controls">
1732
2814
  <span class="pf-v6-c-menu-toggle__toggle-icon">
1733
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
2815
+ <svg
2816
+ class="pf-v6-svg"
2817
+ viewBox="0 0 20 20"
2818
+ fill="currentColor"
2819
+ aria-hidden="true"
2820
+ role="img"
2821
+ width="1em"
2822
+ height="1em"
2823
+ >
2824
+ <path
2825
+ 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"
2826
+ />
2827
+ </svg>
1734
2828
  </span>
1735
2829
  </span>
1736
2830
  </button>
@@ -1760,7 +2854,19 @@ Shown with default, primary, and secondary styling
1760
2854
  <span class="pf-v6-c-menu-toggle__text">Toggle button text</span>
1761
2855
  <span class="pf-v6-c-menu-toggle__controls">
1762
2856
  <span class="pf-v6-c-menu-toggle__toggle-icon">
1763
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
2857
+ <svg
2858
+ class="pf-v6-svg"
2859
+ viewBox="0 0 20 20"
2860
+ fill="currentColor"
2861
+ aria-hidden="true"
2862
+ role="img"
2863
+ width="1em"
2864
+ height="1em"
2865
+ >
2866
+ <path
2867
+ 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"
2868
+ />
2869
+ </svg>
1764
2870
  </span>
1765
2871
  </span>
1766
2872
  </button>
@@ -1792,7 +2898,19 @@ Shown with default, primary, and secondary styling
1792
2898
  <span class="pf-v6-c-menu-toggle__text">Toggle button text</span>
1793
2899
  <span class="pf-v6-c-menu-toggle__controls">
1794
2900
  <span class="pf-v6-c-menu-toggle__toggle-icon">
1795
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
2901
+ <svg
2902
+ class="pf-v6-svg"
2903
+ viewBox="0 0 20 20"
2904
+ fill="currentColor"
2905
+ aria-hidden="true"
2906
+ role="img"
2907
+ width="1em"
2908
+ height="1em"
2909
+ >
2910
+ <path
2911
+ 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"
2912
+ />
2913
+ </svg>
1796
2914
  </span>
1797
2915
  </span>
1798
2916
  </button>
@@ -1820,7 +2938,19 @@ Shown with default, primary, and secondary styling
1820
2938
  <span class="pf-v6-c-menu-toggle__text">Toggle button text</span>
1821
2939
  <span class="pf-v6-c-menu-toggle__controls">
1822
2940
  <span class="pf-v6-c-menu-toggle__toggle-icon">
1823
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
2941
+ <svg
2942
+ class="pf-v6-svg"
2943
+ viewBox="0 0 20 20"
2944
+ fill="currentColor"
2945
+ aria-hidden="true"
2946
+ role="img"
2947
+ width="1em"
2948
+ height="1em"
2949
+ >
2950
+ <path
2951
+ 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"
2952
+ />
2953
+ </svg>
1824
2954
  </span>
1825
2955
  </span>
1826
2956
  </button>
@@ -1850,7 +2980,19 @@ Shown with default, primary, and secondary styling
1850
2980
  <span class="pf-v6-c-menu-toggle__text">Toggle button text</span>
1851
2981
  <span class="pf-v6-c-menu-toggle__controls">
1852
2982
  <span class="pf-v6-c-menu-toggle__toggle-icon">
1853
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
2983
+ <svg
2984
+ class="pf-v6-svg"
2985
+ viewBox="0 0 20 20"
2986
+ fill="currentColor"
2987
+ aria-hidden="true"
2988
+ role="img"
2989
+ width="1em"
2990
+ height="1em"
2991
+ >
2992
+ <path
2993
+ 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"
2994
+ />
2995
+ </svg>
1854
2996
  </span>
1855
2997
  </span>
1856
2998
  </button>
@@ -1885,12 +3027,36 @@ Shown with default, primary, and secondary styling
1885
3027
  aria-label="Menu toggle"
1886
3028
  >
1887
3029
  <span class="pf-v6-c-menu-toggle__icon">
1888
- <i class="fas fa-cog" aria-hidden="true"></i>
3030
+ <svg
3031
+ class="pf-v6-svg"
3032
+ viewBox="0 0 32 32"
3033
+ fill="currentColor"
3034
+ aria-hidden="true"
3035
+ role="img"
3036
+ width="1em"
3037
+ height="1em"
3038
+ >
3039
+ <path
3040
+ 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"
3041
+ />
3042
+ </svg>
1889
3043
  </span>
1890
3044
  <span class="pf-v6-c-menu-toggle__text">Icon</span>
1891
3045
  <span class="pf-v6-c-menu-toggle__controls">
1892
3046
  <span class="pf-v6-c-menu-toggle__toggle-icon">
1893
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
3047
+ <svg
3048
+ class="pf-v6-svg"
3049
+ viewBox="0 0 20 20"
3050
+ fill="currentColor"
3051
+ aria-hidden="true"
3052
+ role="img"
3053
+ width="1em"
3054
+ height="1em"
3055
+ >
3056
+ <path
3057
+ 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"
3058
+ />
3059
+ </svg>
1894
3060
  </span>
1895
3061
  </span>
1896
3062
  </button>
@@ -1916,12 +3082,36 @@ Shown with default, primary, and secondary styling
1916
3082
  aria-label="Menu toggle"
1917
3083
  >
1918
3084
  <span class="pf-v6-c-menu-toggle__icon">
1919
- <i class="fas fa-cog" aria-hidden="true"></i>
3085
+ <svg
3086
+ class="pf-v6-svg"
3087
+ viewBox="0 0 32 32"
3088
+ fill="currentColor"
3089
+ aria-hidden="true"
3090
+ role="img"
3091
+ width="1em"
3092
+ height="1em"
3093
+ >
3094
+ <path
3095
+ 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"
3096
+ />
3097
+ </svg>
1920
3098
  </span>
1921
3099
  <span class="pf-v6-c-menu-toggle__text">Icon</span>
1922
3100
  <span class="pf-v6-c-menu-toggle__controls">
1923
3101
  <span class="pf-v6-c-menu-toggle__toggle-icon">
1924
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
3102
+ <svg
3103
+ class="pf-v6-svg"
3104
+ viewBox="0 0 20 20"
3105
+ fill="currentColor"
3106
+ aria-hidden="true"
3107
+ role="img"
3108
+ width="1em"
3109
+ height="1em"
3110
+ >
3111
+ <path
3112
+ 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"
3113
+ />
3114
+ </svg>
1925
3115
  </span>
1926
3116
  </span>
1927
3117
  </button>
@@ -1949,12 +3139,36 @@ Shown with default, primary, and secondary styling
1949
3139
  disabled
1950
3140
  >
1951
3141
  <span class="pf-v6-c-menu-toggle__icon">
1952
- <i class="fas fa-cog" aria-hidden="true"></i>
3142
+ <svg
3143
+ class="pf-v6-svg"
3144
+ viewBox="0 0 32 32"
3145
+ fill="currentColor"
3146
+ aria-hidden="true"
3147
+ role="img"
3148
+ width="1em"
3149
+ height="1em"
3150
+ >
3151
+ <path
3152
+ 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"
3153
+ />
3154
+ </svg>
1953
3155
  </span>
1954
3156
  <span class="pf-v6-c-menu-toggle__text">Icon</span>
1955
3157
  <span class="pf-v6-c-menu-toggle__controls">
1956
3158
  <span class="pf-v6-c-menu-toggle__toggle-icon">
1957
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
3159
+ <svg
3160
+ class="pf-v6-svg"
3161
+ viewBox="0 0 20 20"
3162
+ fill="currentColor"
3163
+ aria-hidden="true"
3164
+ role="img"
3165
+ width="1em"
3166
+ height="1em"
3167
+ >
3168
+ <path
3169
+ 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"
3170
+ />
3171
+ </svg>
1958
3172
  </span>
1959
3173
  </span>
1960
3174
  </button>
@@ -1984,12 +3198,36 @@ Shown with default, primary, and secondary styling
1984
3198
  aria-label="Menu toggle"
1985
3199
  >
1986
3200
  <span class="pf-v6-c-menu-toggle__icon">
1987
- <i class="fas fa-cog" aria-hidden="true"></i>
3201
+ <svg
3202
+ class="pf-v6-svg"
3203
+ viewBox="0 0 32 32"
3204
+ fill="currentColor"
3205
+ aria-hidden="true"
3206
+ role="img"
3207
+ width="1em"
3208
+ height="1em"
3209
+ >
3210
+ <path
3211
+ 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"
3212
+ />
3213
+ </svg>
1988
3214
  </span>
1989
3215
  <span class="pf-v6-c-menu-toggle__text">Icon</span>
1990
3216
  <span class="pf-v6-c-menu-toggle__controls">
1991
3217
  <span class="pf-v6-c-menu-toggle__toggle-icon">
1992
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
3218
+ <svg
3219
+ class="pf-v6-svg"
3220
+ viewBox="0 0 20 20"
3221
+ fill="currentColor"
3222
+ aria-hidden="true"
3223
+ role="img"
3224
+ width="1em"
3225
+ height="1em"
3226
+ >
3227
+ <path
3228
+ 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"
3229
+ />
3230
+ </svg>
1993
3231
  </span>
1994
3232
  </span>
1995
3233
  </button>
@@ -2015,12 +3253,36 @@ Shown with default, primary, and secondary styling
2015
3253
  aria-label="Menu toggle"
2016
3254
  >
2017
3255
  <span class="pf-v6-c-menu-toggle__icon">
2018
- <i class="fas fa-cog" aria-hidden="true"></i>
3256
+ <svg
3257
+ class="pf-v6-svg"
3258
+ viewBox="0 0 32 32"
3259
+ fill="currentColor"
3260
+ aria-hidden="true"
3261
+ role="img"
3262
+ width="1em"
3263
+ height="1em"
3264
+ >
3265
+ <path
3266
+ 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"
3267
+ />
3268
+ </svg>
2019
3269
  </span>
2020
3270
  <span class="pf-v6-c-menu-toggle__text">Icon</span>
2021
3271
  <span class="pf-v6-c-menu-toggle__controls">
2022
3272
  <span class="pf-v6-c-menu-toggle__toggle-icon">
2023
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
3273
+ <svg
3274
+ class="pf-v6-svg"
3275
+ viewBox="0 0 20 20"
3276
+ fill="currentColor"
3277
+ aria-hidden="true"
3278
+ role="img"
3279
+ width="1em"
3280
+ height="1em"
3281
+ >
3282
+ <path
3283
+ 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"
3284
+ />
3285
+ </svg>
2024
3286
  </span>
2025
3287
  </span>
2026
3288
  </button>
@@ -2048,12 +3310,36 @@ Shown with default, primary, and secondary styling
2048
3310
  disabled
2049
3311
  >
2050
3312
  <span class="pf-v6-c-menu-toggle__icon">
2051
- <i class="fas fa-cog" aria-hidden="true"></i>
3313
+ <svg
3314
+ class="pf-v6-svg"
3315
+ viewBox="0 0 32 32"
3316
+ fill="currentColor"
3317
+ aria-hidden="true"
3318
+ role="img"
3319
+ width="1em"
3320
+ height="1em"
3321
+ >
3322
+ <path
3323
+ 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"
3324
+ />
3325
+ </svg>
2052
3326
  </span>
2053
3327
  <span class="pf-v6-c-menu-toggle__text">Icon</span>
2054
3328
  <span class="pf-v6-c-menu-toggle__controls">
2055
3329
  <span class="pf-v6-c-menu-toggle__toggle-icon">
2056
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
3330
+ <svg
3331
+ class="pf-v6-svg"
3332
+ viewBox="0 0 20 20"
3333
+ fill="currentColor"
3334
+ aria-hidden="true"
3335
+ role="img"
3336
+ width="1em"
3337
+ height="1em"
3338
+ >
3339
+ <path
3340
+ 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"
3341
+ />
3342
+ </svg>
2057
3343
  </span>
2058
3344
  </span>
2059
3345
  </button>
@@ -2083,12 +3369,36 @@ Shown with default, primary, and secondary styling
2083
3369
  aria-label="Menu toggle"
2084
3370
  >
2085
3371
  <span class="pf-v6-c-menu-toggle__icon">
2086
- <i class="fas fa-cog" aria-hidden="true"></i>
3372
+ <svg
3373
+ class="pf-v6-svg"
3374
+ viewBox="0 0 32 32"
3375
+ fill="currentColor"
3376
+ aria-hidden="true"
3377
+ role="img"
3378
+ width="1em"
3379
+ height="1em"
3380
+ >
3381
+ <path
3382
+ 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"
3383
+ />
3384
+ </svg>
2087
3385
  </span>
2088
3386
  <span class="pf-v6-c-menu-toggle__text">Icon</span>
2089
3387
  <span class="pf-v6-c-menu-toggle__controls">
2090
3388
  <span class="pf-v6-c-menu-toggle__toggle-icon">
2091
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
3389
+ <svg
3390
+ class="pf-v6-svg"
3391
+ viewBox="0 0 20 20"
3392
+ fill="currentColor"
3393
+ aria-hidden="true"
3394
+ role="img"
3395
+ width="1em"
3396
+ height="1em"
3397
+ >
3398
+ <path
3399
+ 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"
3400
+ />
3401
+ </svg>
2092
3402
  </span>
2093
3403
  </span>
2094
3404
  </button>
@@ -2114,12 +3424,36 @@ Shown with default, primary, and secondary styling
2114
3424
  aria-label="Menu toggle"
2115
3425
  >
2116
3426
  <span class="pf-v6-c-menu-toggle__icon">
2117
- <i class="fas fa-cog" aria-hidden="true"></i>
3427
+ <svg
3428
+ class="pf-v6-svg"
3429
+ viewBox="0 0 32 32"
3430
+ fill="currentColor"
3431
+ aria-hidden="true"
3432
+ role="img"
3433
+ width="1em"
3434
+ height="1em"
3435
+ >
3436
+ <path
3437
+ 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"
3438
+ />
3439
+ </svg>
2118
3440
  </span>
2119
3441
  <span class="pf-v6-c-menu-toggle__text">Icon</span>
2120
3442
  <span class="pf-v6-c-menu-toggle__controls">
2121
3443
  <span class="pf-v6-c-menu-toggle__toggle-icon">
2122
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
3444
+ <svg
3445
+ class="pf-v6-svg"
3446
+ viewBox="0 0 20 20"
3447
+ fill="currentColor"
3448
+ aria-hidden="true"
3449
+ role="img"
3450
+ width="1em"
3451
+ height="1em"
3452
+ >
3453
+ <path
3454
+ 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"
3455
+ />
3456
+ </svg>
2123
3457
  </span>
2124
3458
  </span>
2125
3459
  </button>
@@ -2147,12 +3481,36 @@ Shown with default, primary, and secondary styling
2147
3481
  disabled
2148
3482
  >
2149
3483
  <span class="pf-v6-c-menu-toggle__icon">
2150
- <i class="fas fa-cog" aria-hidden="true"></i>
3484
+ <svg
3485
+ class="pf-v6-svg"
3486
+ viewBox="0 0 32 32"
3487
+ fill="currentColor"
3488
+ aria-hidden="true"
3489
+ role="img"
3490
+ width="1em"
3491
+ height="1em"
3492
+ >
3493
+ <path
3494
+ 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"
3495
+ />
3496
+ </svg>
2151
3497
  </span>
2152
3498
  <span class="pf-v6-c-menu-toggle__text">Icon</span>
2153
3499
  <span class="pf-v6-c-menu-toggle__controls">
2154
3500
  <span class="pf-v6-c-menu-toggle__toggle-icon">
2155
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
3501
+ <svg
3502
+ class="pf-v6-svg"
3503
+ viewBox="0 0 20 20"
3504
+ fill="currentColor"
3505
+ aria-hidden="true"
3506
+ role="img"
3507
+ width="1em"
3508
+ height="1em"
3509
+ >
3510
+ <path
3511
+ 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"
3512
+ />
3513
+ </svg>
2156
3514
  </span>
2157
3515
  </span>
2158
3516
  </button>
@@ -2170,7 +3528,19 @@ Shown with default, primary, and secondary styling
2170
3528
  aria-label="Settings"
2171
3529
  >
2172
3530
  <span class="pf-v6-c-menu-toggle__icon">
2173
- <i class="fas fa-cog" aria-hidden="true"></i>
3531
+ <svg
3532
+ class="pf-v6-svg"
3533
+ viewBox="0 0 32 32"
3534
+ fill="currentColor"
3535
+ aria-hidden="true"
3536
+ role="img"
3537
+ width="1em"
3538
+ height="1em"
3539
+ >
3540
+ <path
3541
+ 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"
3542
+ />
3543
+ </svg>
2174
3544
  </span>
2175
3545
  </button>
2176
3546
 
@@ -2181,7 +3551,19 @@ Shown with default, primary, and secondary styling
2181
3551
  aria-label="Settings"
2182
3552
  >
2183
3553
  <span class="pf-v6-c-menu-toggle__icon">
2184
- <i class="fas fa-cog" aria-hidden="true"></i>
3554
+ <svg
3555
+ class="pf-v6-svg"
3556
+ viewBox="0 0 32 32"
3557
+ fill="currentColor"
3558
+ aria-hidden="true"
3559
+ role="img"
3560
+ width="1em"
3561
+ height="1em"
3562
+ >
3563
+ <path
3564
+ 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"
3565
+ />
3566
+ </svg>
2185
3567
  </span>
2186
3568
  </button>
2187
3569
 
@@ -2193,7 +3575,19 @@ Shown with default, primary, and secondary styling
2193
3575
  aria-label="Settings"
2194
3576
  >
2195
3577
  <span class="pf-v6-c-menu-toggle__icon">
2196
- <i class="fas fa-cog" aria-hidden="true"></i>
3578
+ <svg
3579
+ class="pf-v6-svg"
3580
+ viewBox="0 0 32 32"
3581
+ fill="currentColor"
3582
+ aria-hidden="true"
3583
+ role="img"
3584
+ width="1em"
3585
+ height="1em"
3586
+ >
3587
+ <path
3588
+ 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"
3589
+ />
3590
+ </svg>
2197
3591
  </span>
2198
3592
  </button>
2199
3593
 
@@ -2232,7 +3626,9 @@ Shown with default, primary, and secondary styling
2232
3626
  | `.pf-m-expanded` | `.pf-v6-c-menu-toggle` | Modifies the menu toggle component for the expanded state. |
2233
3627
  | `.pf-m-full-height` | `.pf-v6-c-menu-toggle` | Modifies the menu toggle component to full height of parent. |
2234
3628
  | `.pf-m-full-width` | `.pf-v6-c-menu-toggle` | Modifies the menu toggle component to full width of parent. |
3629
+ | `.pf-m-form` | `.pf-v6-c-menu-toggle` | Modifies the menu toggle for use in forms with form element border radius. |
2235
3630
  | `.pf-m-success` | `.pf-v6-c-menu-toggle` | Modifies the menu toggle component for the success state. |
2236
3631
  | `.pf-m-warning` | `.pf-v6-c-menu-toggle` | Modifies the menu toggle component for the warning state. |
2237
3632
  | `.pf-m-danger` | `.pf-v6-c-menu-toggle` | Modifies the menu toggle component for the danger state. |
2238
3633
  | `.pf-m-placeholder` | `.pf-v6-c-menu-toggle` | Modifies the menu toggle text for placeholder styles. |
3634
+ | `.pf-m-text-expanded` | `.pf-v6-c-menu-toggle` | Modifies a dock menu toggle to show its text. |