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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (376) hide show
  1. package/README.md +1 -1
  2. package/assets/fontawesome/_variables.scss +2 -1
  3. package/assets/images/RHAiExperienceIcon.svg +27 -0
  4. package/assets/images/RHAutomationsLogo.svg +96 -0
  5. package/assets/images/RHServerStackIcon.svg +16 -0
  6. package/assets/images/compass--hero-bg.png +0 -0
  7. package/assets/images/compass--rh-wallpaper-dark.png +0 -0
  8. package/assets/images/compass--rh-wallpaper-light.png +0 -0
  9. package/assets/images/compass--wallpaper-dark.png +0 -0
  10. package/assets/images/compass--wallpaper-light.png +0 -0
  11. package/base/normalize.scss +7 -0
  12. package/base/patternfly-common.css +50 -0
  13. package/base/patternfly-common.scss +59 -0
  14. package/base/patternfly-svg-icons.css +11 -0
  15. package/base/patternfly-svg-icons.scss +14 -0
  16. package/base/patternfly-variables.css +345 -14
  17. package/base/patternfly-variables.scss +40 -0
  18. package/base/tokens/tokens-dark.scss +51 -3
  19. package/base/tokens/tokens-default.scss +67 -13
  20. package/base/tokens/tokens-glass-dark.scss +9 -0
  21. package/base/tokens/tokens-glass.scss +9 -0
  22. package/base/tokens/tokens-local.scss +16 -0
  23. package/base/tokens/tokens-palette.scss +3 -1
  24. package/base/tokens/tokens-redhat-dark.scss +14 -0
  25. package/base/tokens/tokens-redhat-glass-dark.scss +16 -0
  26. package/base/tokens/tokens-redhat-glass.scss +15 -0
  27. package/base/tokens/tokens-redhat-highcontrast-dark.scss +47 -0
  28. package/base/tokens/tokens-redhat-highcontrast.scss +127 -0
  29. package/base/tokens/tokens-redhat.scss +15 -0
  30. package/components/AboutModalBox/about-modal-box.css +36 -26
  31. package/components/Accordion/accordion.css +17 -14
  32. package/components/Accordion/accordion.scss +1 -2
  33. package/components/ActionList/action-list.css +2 -0
  34. package/components/ActionList/action-list.scss +2 -0
  35. package/components/Alert/alert.css +7 -5
  36. package/components/Alert/alert.scss +2 -1
  37. package/components/Avatar/avatar.css +12 -4
  38. package/components/BackgroundImage/background-image.css +6 -3
  39. package/components/Banner/banner.css +8 -6
  40. package/components/Brand/brand.css +3 -1
  41. package/components/Breadcrumb/breadcrumb.css +4 -3
  42. package/components/Button/button.css +117 -14
  43. package/components/Button/button.scss +127 -10
  44. package/components/CalendarMonth/calendar-month.css +4 -3
  45. package/components/Card/card.css +20 -7
  46. package/components/Card/card.scss +16 -2
  47. package/components/ClipboardCopy/clipboard-copy.css +7 -6
  48. package/components/ClipboardCopy/clipboard-copy.scss +3 -3
  49. package/components/CodeEditor/code-editor.css +1 -1
  50. package/components/CodeEditor/code-editor.scss +1 -1
  51. package/components/Compass/compass.css +320 -0
  52. package/components/Compass/compass.scss +350 -0
  53. package/components/DataList/data-list.css +34 -23
  54. package/components/DataList/data-list.scss +7 -2
  55. package/components/DescriptionList/description-list-order.scss +5 -1
  56. package/components/DescriptionList/description-list.css +7 -5
  57. package/components/DescriptionList/description-list.scss +5 -1
  58. package/components/Divider/divider.css +7 -5
  59. package/components/Drawer/drawer.css +110 -56
  60. package/components/Drawer/drawer.scss +69 -9
  61. package/components/DualListSelector/dual-list-selector.css +18 -12
  62. package/components/DualListSelector/dual-list-selector.scss +1 -1
  63. package/components/ExpandableSection/expandable-section.css +21 -16
  64. package/components/ExpandableSection/expandable-section.scss +6 -3
  65. package/components/Form/form.css +2 -2
  66. package/components/Form/form.scss +2 -2
  67. package/components/FormControl/form-control.css +3 -3
  68. package/components/FormControl/form-control.scss +3 -3
  69. package/components/Hero/hero.css +74 -0
  70. package/components/Hero/hero.scss +86 -0
  71. package/components/JumpLinks/jump-links.css +5 -4
  72. package/components/JumpLinks/jump-links.scss +6 -2
  73. package/components/Label/label-group.css +2 -2
  74. package/components/Label/label-group.scss +2 -2
  75. package/components/Label/label.css +4 -3
  76. package/components/Login/login.css +51 -37
  77. package/components/Masthead/masthead.css +70 -16
  78. package/components/Masthead/masthead.scss +54 -1
  79. package/components/Menu/menu.css +23 -14
  80. package/components/MenuToggle/menu-toggle.css +5 -1
  81. package/components/MenuToggle/menu-toggle.scss +6 -1
  82. package/components/ModalBox/modal-box.css +9 -7
  83. package/components/ModalBox/modal-box.scss +2 -2
  84. package/components/Nav/nav.css +74 -11
  85. package/components/Nav/nav.scss +77 -5
  86. package/components/NotificationDrawer/notification-drawer.css +19 -9
  87. package/components/NotificationDrawer/notification-drawer.scss +14 -5
  88. package/components/Page/page.css +55 -29
  89. package/components/Page/page.scss +44 -5
  90. package/components/Pagination/pagination.scss +5 -1
  91. package/components/ProgressStepper/progress-stepper.scss +5 -1
  92. package/components/Sidebar/sidebar.css +1 -1
  93. package/components/Sidebar/sidebar.scss +7 -3
  94. package/components/Skeleton/skeleton.css +16 -15
  95. package/components/Slider/slider.css +32 -18
  96. package/components/Switch/switch.css +4 -2
  97. package/components/Switch/switch.scss +1 -1
  98. package/components/Table/table-grid.css +28 -36
  99. package/components/Table/table-grid.scss +4 -4
  100. package/components/Table/table-tree-view.css +4 -2
  101. package/components/Table/table.css +33 -29
  102. package/components/Table/table.scss +2 -2
  103. package/components/Tabs/tabs.css +35 -18
  104. package/components/Tabs/tabs.scss +35 -7
  105. package/components/TextInputGroup/text-input-group.css +2 -2
  106. package/components/TextInputGroup/text-input-group.scss +2 -2
  107. package/components/ToggleGroup/toggle-group.css +34 -17
  108. package/components/ToggleGroup/toggle-group.scss +36 -20
  109. package/components/Toolbar/toolbar.css +47 -15
  110. package/components/Toolbar/toolbar.scss +34 -6
  111. package/components/TreeView/tree-view.css +45 -14
  112. package/components/TreeView/tree-view.scss +32 -1
  113. package/components/Wizard/wizard.css +21 -17
  114. package/components/Wizard/wizard.scss +4 -4
  115. package/components/_index.css +1602 -676
  116. package/components/_index.scss +3 -1
  117. package/docs/components/AboutModalBox/examples/AboutModalBox.md +13 -1
  118. package/docs/components/Accordion/examples/Accordion.md +390 -30
  119. package/docs/components/ActionList/examples/ActionList.md +143 -11
  120. package/docs/components/Alert/examples/Alert.md +678 -54
  121. package/docs/components/Avatar/examples/Avatar.md +4 -4
  122. package/docs/components/BackToTop/examples/BackToTop.md +13 -1
  123. package/docs/components/Banner/examples/Banner.md +65 -5
  124. package/docs/components/Brand/examples/Brand.md +2 -2
  125. package/docs/components/Breadcrumb/examples/Breadcrumb.md +299 -23
  126. package/docs/components/Button/examples/Button.md +2217 -241
  127. package/docs/components/CalendarMonth/examples/CalendarMonth.md +104 -8
  128. package/docs/components/Card/examples/Card.md +206 -4
  129. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +286 -22
  130. package/docs/components/CodeBlock/examples/CodeBlock.md +104 -8
  131. package/docs/components/CodeEditor/examples/CodeEditor.md +195 -15
  132. package/docs/components/Compass/examples/Compass.css +17 -0
  133. package/docs/components/Compass/examples/Compass.md +119 -0
  134. package/docs/components/DataList/examples/DataList.md +405 -205
  135. package/docs/components/DatePicker/examples/DatePicker.md +78 -6
  136. package/docs/components/DescriptionList/examples/DescriptionList.md +327 -27
  137. package/docs/components/Divider/examples/Divider.md +2 -2
  138. package/docs/components/Drawer/examples/Drawer.md +353 -35
  139. package/docs/components/DualListSelector/examples/DualListSelector.md +1013 -143
  140. package/docs/components/ExpandableSection/examples/ExpandableSection.md +91 -7
  141. package/docs/components/Form/examples/Form.md +78 -6
  142. package/docs/components/Hero/examples/Hero.md +25 -0
  143. package/docs/components/Icon/examples/Icon.md +92 -8
  144. package/docs/components/InlineEdit/examples/InlineEdit.md +312 -24
  145. package/docs/components/InputGroup/examples/InputGroup.md +27 -3
  146. package/docs/components/JumpLinks/examples/JumpLinks.md +54 -6
  147. package/docs/components/Label/examples/Label.md +2834 -218
  148. package/docs/components/Login/examples/Login.md +26 -2
  149. package/docs/components/Masthead/examples/masthead.md +80 -1
  150. package/docs/components/Menu/examples/Menu.md +1458 -114
  151. package/docs/components/MenuToggle/examples/MenuToggle.md +53 -1
  152. package/docs/components/ModalBox/examples/ModalBox.md +287 -23
  153. package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +156 -12
  154. package/docs/components/Nav/examples/Navigation.md +798 -58
  155. package/docs/components/NotificationDrawer/examples/NotificationDrawer.md +598 -46
  156. package/docs/components/OverflowMenu/examples/overflow-menu.md +78 -6
  157. package/docs/components/Page/examples/Page.md +51 -2
  158. package/docs/components/Pagination/examples/Pagination.md +627 -51
  159. package/docs/components/Popover/examples/Popover.md +286 -22
  160. package/docs/components/ProgressStepper/examples/ProgressStepper.md +275 -23
  161. package/docs/components/Sidebar/examples/Sidebar.md +1 -1
  162. package/docs/components/Slider/examples/Slider.md +52 -4
  163. package/docs/components/Table/examples/Table.md +875 -70
  164. package/docs/components/Tabs/examples/Tabs.md +4127 -320
  165. package/docs/components/TextInputGroup/examples/TextInputGroup.md +600 -48
  166. package/docs/components/ToggleGroup/examples/toggle-group.md +195 -15
  167. package/docs/components/Toolbar/examples/Toolbar.md +490 -42
  168. package/docs/components/TreeView/examples/TreeView.md +1390 -130
  169. package/docs/components/Wizard/examples/Wizard.md +492 -72
  170. package/docs/demos/AboutModal/examples/AboutModal.md +57 -9
  171. package/docs/demos/Alert/examples/Alert.md +236 -32
  172. package/docs/demos/BackToTop/examples/BackToTop.md +57 -9
  173. package/docs/demos/Banner/examples/Banner.md +88 -16
  174. package/docs/demos/Button/examples/Button.md +13 -1
  175. package/docs/demos/Card/examples/Card.md +399 -42
  176. package/docs/demos/CardView/examples/CardView.md +161 -17
  177. package/docs/demos/Compass/examples/Compass.md +6836 -0
  178. package/docs/demos/Dashboard/examples/Dashboard.md +173 -26
  179. package/docs/demos/DataList/examples/DataList.md +566 -65
  180. package/docs/demos/DescriptionList/examples/DescriptionList.md +156 -27
  181. package/docs/demos/Drawer/examples/Drawer.md +216 -45
  182. package/docs/demos/Form/examples/BasicForms.md +273 -21
  183. package/docs/demos/JumpLinks/examples/JumpLinks.md +272 -59
  184. package/docs/demos/Masthead/examples/Masthead.md +458 -89
  185. package/docs/demos/Modal/examples/Modal.md +342 -57
  186. package/docs/demos/Nav/examples/Nav.md +660 -87
  187. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +1088 -140
  188. package/docs/demos/Page/examples/Page.md +618 -123
  189. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +13 -1
  190. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +52 -4
  191. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +691 -113
  192. package/docs/demos/Skeleton/examples/Skeleton.md +44 -8
  193. package/docs/demos/Table/examples/Table.md +3924 -256
  194. package/docs/demos/Tabs/examples/Tabs.md +407 -65
  195. package/docs/demos/Toolbar/examples/Toolbar.md +502 -52
  196. package/docs/demos/Wizard/examples/Wizard.md +796 -130
  197. package/docs/layouts/Bullseye/examples/Bullseye.css +2 -2
  198. package/docs/layouts/Bullseye/examples/Bullseye.md +2 -1
  199. package/docs/layouts/Flex/examples/Flex.css +3 -3
  200. package/docs/layouts/Flex/examples/Flex.md +3 -2
  201. package/docs/layouts/Gallery/examples/Gallery.css +2 -2
  202. package/docs/layouts/Gallery/examples/Gallery.md +4 -3
  203. package/docs/layouts/Grid/examples/Grid.css +1 -1
  204. package/docs/layouts/Grid/examples/Grid.md +6 -5
  205. package/docs/layouts/Level/examples/Level.css +3 -3
  206. package/docs/layouts/Level/examples/Level.md +2 -1
  207. package/docs/layouts/Split/examples/Split.css +1 -1
  208. package/docs/layouts/Split/examples/Split.md +2 -1
  209. package/docs/layouts/Stack/examples/Stack.css +3 -3
  210. package/docs/layouts/Stack/examples/Stack.md +2 -1
  211. package/docs/utilities/Accessibility/examples/Accessibility.md +3 -2
  212. package/docs/utilities/Alignment/examples/Alignment.css +4 -4
  213. package/docs/utilities/Alignment/examples/Alignment.md +3 -2
  214. package/docs/utilities/BackgroundColor/examples/BackgroundColor.md +5 -4
  215. package/docs/utilities/BoxShadow/examples/box-shadow.css +2 -2
  216. package/docs/utilities/BoxShadow/examples/box-shadow.md +2 -1
  217. package/docs/utilities/Display/examples/Display.css +1 -1
  218. package/docs/utilities/Display/examples/Display.md +3 -2
  219. package/docs/utilities/Flex/examples/Flex.css +7 -7
  220. package/docs/utilities/Flex/examples/Flex.md +3 -2
  221. package/docs/utilities/Float/examples/Float.css +2 -2
  222. package/docs/utilities/Float/examples/Float.md +3 -2
  223. package/docs/utilities/Sizing/examples/Sizing.md +8 -7
  224. package/docs/utilities/Spacing/examples/Spacing.css +2 -2
  225. package/docs/utilities/Spacing/examples/Spacing.md +3 -2
  226. package/docs/utilities/Text/examples/Text.md +5 -4
  227. package/icons/PfIcons/add-circle-o.svg +4 -0
  228. package/icons/PfIcons/ansible-tower.svg +4 -0
  229. package/icons/PfIcons/applications.svg +4 -0
  230. package/icons/PfIcons/arrow.svg +4 -0
  231. package/icons/PfIcons/asleep.svg +4 -0
  232. package/icons/PfIcons/attention-bell.svg +4 -0
  233. package/icons/PfIcons/automation.svg +4 -0
  234. package/icons/PfIcons/bell.svg +4 -0
  235. package/icons/PfIcons/blueprint.svg +4 -0
  236. package/icons/PfIcons/build.svg +4 -0
  237. package/icons/PfIcons/builder-image.svg +4 -0
  238. package/icons/PfIcons/bundle.svg +4 -0
  239. package/icons/PfIcons/catalog.svg +4 -0
  240. package/icons/PfIcons/chat.svg +4 -0
  241. package/icons/PfIcons/close.svg +4 -0
  242. package/icons/PfIcons/cloud-security.svg +4 -0
  243. package/icons/PfIcons/cloud-tenant.svg +4 -0
  244. package/icons/PfIcons/cluster.svg +4 -0
  245. package/icons/PfIcons/connected.svg +4 -0
  246. package/icons/PfIcons/container-node.svg +4 -0
  247. package/icons/PfIcons/cpu.svg +4 -0
  248. package/icons/PfIcons/critical-risk.svg +4 -0
  249. package/icons/PfIcons/data-processor.svg +4 -0
  250. package/icons/PfIcons/data-sink.svg +4 -0
  251. package/icons/PfIcons/data-source.svg +4 -0
  252. package/icons/PfIcons/degraded.svg +4 -0
  253. package/icons/PfIcons/disconnected.svg +4 -0
  254. package/icons/PfIcons/domain.svg +4 -0
  255. package/icons/PfIcons/edit.svg +4 -0
  256. package/icons/PfIcons/enhancement.svg +4 -0
  257. package/icons/PfIcons/enterprise.svg +4 -0
  258. package/icons/PfIcons/equalizer.svg +4 -0
  259. package/icons/PfIcons/error-circle-o.svg +4 -0
  260. package/icons/PfIcons/export.svg +4 -0
  261. package/icons/PfIcons/filter.svg +4 -0
  262. package/icons/PfIcons/flavor.svg +4 -0
  263. package/icons/PfIcons/folder-close.svg +4 -0
  264. package/icons/PfIcons/folder-open.svg +4 -0
  265. package/icons/PfIcons/globe-route.svg +4 -0
  266. package/icons/PfIcons/help.svg +4 -0
  267. package/icons/PfIcons/history.svg +4 -0
  268. package/icons/PfIcons/home.svg +4 -0
  269. package/icons/PfIcons/import.svg +4 -0
  270. package/icons/PfIcons/in-progress.svg +4 -0
  271. package/icons/PfIcons/info.svg +4 -0
  272. package/icons/PfIcons/infrastructure.svg +4 -0
  273. package/icons/PfIcons/integration.svg +4 -0
  274. package/icons/PfIcons/key.svg +4 -0
  275. package/icons/PfIcons/locked.svg +4 -0
  276. package/icons/PfIcons/maintenance.svg +4 -0
  277. package/icons/PfIcons/memory.svg +4 -0
  278. package/icons/PfIcons/messages.svg +4 -0
  279. package/icons/PfIcons/middleware.svg +4 -0
  280. package/icons/PfIcons/migration.svg +4 -0
  281. package/icons/PfIcons/module.svg +4 -0
  282. package/icons/PfIcons/monitoring.svg +4 -0
  283. package/icons/PfIcons/multicluster.svg +4 -0
  284. package/icons/PfIcons/namespaces.svg +4 -0
  285. package/icons/PfIcons/network.svg +4 -0
  286. package/icons/PfIcons/new-process.svg +4 -0
  287. package/icons/PfIcons/not-started.svg +4 -0
  288. package/icons/PfIcons/off.svg +4 -0
  289. package/icons/PfIcons/ok.svg +4 -0
  290. package/icons/PfIcons/on-running.svg +4 -0
  291. package/icons/PfIcons/on.svg +4 -0
  292. package/icons/PfIcons/open-drawer-right.svg +4 -0
  293. package/icons/PfIcons/openshift.svg +4 -0
  294. package/icons/PfIcons/openstack.svg +4 -0
  295. package/icons/PfIcons/optimize.svg +4 -0
  296. package/icons/PfIcons/orders.svg +4 -0
  297. package/icons/PfIcons/os-image.svg +4 -0
  298. package/icons/PfIcons/package.svg +4 -0
  299. package/icons/PfIcons/panel-close.svg +4 -0
  300. package/icons/PfIcons/panel-open.svg +4 -0
  301. package/icons/PfIcons/paused.svg +4 -0
  302. package/icons/PfIcons/pending.svg +4 -0
  303. package/icons/PfIcons/pficon-dragdrop.svg +4 -0
  304. package/icons/PfIcons/pficon-history.svg +4 -0
  305. package/icons/PfIcons/pficon-network-range.svg +4 -0
  306. package/icons/PfIcons/pficon-satellite.svg +4 -0
  307. package/icons/PfIcons/pficon-sort-common-asc.svg +4 -0
  308. package/icons/PfIcons/pficon-sort-common-desc.svg +4 -0
  309. package/icons/PfIcons/pficon-template.svg +4 -0
  310. package/icons/PfIcons/pficon-vcenter.svg +4 -0
  311. package/icons/PfIcons/plugged.svg +4 -0
  312. package/icons/PfIcons/port.svg +4 -0
  313. package/icons/PfIcons/print.svg +4 -0
  314. package/icons/PfIcons/private.svg +4 -0
  315. package/icons/PfIcons/process-automation.svg +4 -0
  316. package/icons/PfIcons/project.svg +4 -0
  317. package/icons/PfIcons/rebalance.svg +4 -0
  318. package/icons/PfIcons/rebooting.svg +4 -0
  319. package/icons/PfIcons/regions.svg +4 -0
  320. package/icons/PfIcons/registry.svg +4 -0
  321. package/icons/PfIcons/remove2.svg +4 -0
  322. package/icons/PfIcons/replicator.svg +4 -0
  323. package/icons/PfIcons/repository.svg +4 -0
  324. package/icons/PfIcons/resource-pool.svg +4 -0
  325. package/icons/PfIcons/resources-almost-empty.svg +4 -0
  326. package/icons/PfIcons/resources-almost-full.svg +4 -0
  327. package/icons/PfIcons/resources-empty.svg +4 -0
  328. package/icons/PfIcons/resources-full.svg +4 -0
  329. package/icons/PfIcons/running.svg +4 -0
  330. package/icons/PfIcons/save.svg +4 -0
  331. package/icons/PfIcons/screen.svg +4 -0
  332. package/icons/PfIcons/security.svg +4 -0
  333. package/icons/PfIcons/server-group.svg +4 -0
  334. package/icons/PfIcons/server.svg +4 -0
  335. package/icons/PfIcons/service-catalog.svg +4 -0
  336. package/icons/PfIcons/service.svg +4 -0
  337. package/icons/PfIcons/services.svg +4 -0
  338. package/icons/PfIcons/severity-critical.svg +4 -0
  339. package/icons/PfIcons/severity-important.svg +4 -0
  340. package/icons/PfIcons/severity-minor.svg +4 -0
  341. package/icons/PfIcons/severity-moderate.svg +4 -0
  342. package/icons/PfIcons/severity-none.svg +4 -0
  343. package/icons/PfIcons/severity-undefined.svg +4 -0
  344. package/icons/PfIcons/spinner.svg +4 -0
  345. package/icons/PfIcons/spinner2.svg +4 -0
  346. package/icons/PfIcons/storage-domain.svg +4 -0
  347. package/icons/PfIcons/task.svg +4 -0
  348. package/icons/PfIcons/tenant.svg +4 -0
  349. package/icons/PfIcons/thumb-tack.svg +4 -0
  350. package/icons/PfIcons/topology.svg +4 -0
  351. package/icons/PfIcons/treeview.svg +4 -0
  352. package/icons/PfIcons/trend-down.svg +4 -0
  353. package/icons/PfIcons/trend-up.svg +4 -0
  354. package/icons/PfIcons/unknown.svg +4 -0
  355. package/icons/PfIcons/unlocked.svg +4 -0
  356. package/icons/PfIcons/unplugged.svg +4 -0
  357. package/icons/PfIcons/user.svg +4 -0
  358. package/icons/PfIcons/users.svg +4 -0
  359. package/icons/PfIcons/virtual-machine.svg +4 -0
  360. package/icons/PfIcons/volume.svg +4 -0
  361. package/icons/PfIcons/warning-triangle.svg +4 -0
  362. package/icons/PfIcons/zone.svg +4 -0
  363. package/layouts/Flex/flex.scss +83 -19
  364. package/layouts/Gallery/gallery.css +6 -2
  365. package/layouts/_index.css +6 -2
  366. package/package.json +34 -16
  367. package/patternfly-base-no-globals.css +406 -14
  368. package/patternfly-base.css +413 -14
  369. package/patternfly-charts.css +3 -3
  370. package/patternfly-no-globals.css +1947 -625
  371. package/patternfly.css +1954 -625
  372. package/patternfly.min.css +1 -1
  373. package/patternfly.min.css.map +1 -1
  374. package/sass-utilities/functions.scss +32 -25
  375. package/sass-utilities/mixins.scss +36 -20
  376. package/sass-utilities/namespaces-components.scss +6 -0
package/docs/components/Nav/examples/Navigation.md CHANGED
@@ -149,7 +149,19 @@ cssPrefix: pf-v6-c-nav
149
149
  >Link 1 (current and expanded example)</span>
150
150
  <span class="pf-v6-c-nav__toggle">
151
151
  <span class="pf-v6-c-nav__toggle-icon">
152
- <i class="fas fa-angle-right" aria-hidden="true"></i>
152
+ <svg
153
+ class="pf-v6-svg"
154
+ viewBox="0 0 20 20"
155
+ fill="currentColor"
156
+ aria-hidden="true"
157
+ role="img"
158
+ width="1em"
159
+ height="1em"
160
+ >
161
+ <path
162
+ d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
163
+ />
164
+ </svg>
153
165
  </span>
154
166
  </span>
155
167
  </button>
@@ -191,7 +203,19 @@ cssPrefix: pf-v6-c-nav
191
203
  >Link 2 (expanded, but not current example)</span>
192
204
  <span class="pf-v6-c-nav__toggle">
193
205
  <span class="pf-v6-c-nav__toggle-icon">
194
- <i class="fas fa-angle-right" aria-hidden="true"></i>
206
+ <svg
207
+ class="pf-v6-svg"
208
+ viewBox="0 0 20 20"
209
+ fill="currentColor"
210
+ aria-hidden="true"
211
+ role="img"
212
+ width="1em"
213
+ height="1em"
214
+ >
215
+ <path
216
+ d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
217
+ />
218
+ </svg>
195
219
  </span>
196
220
  </span>
197
221
  </button>
@@ -222,7 +246,19 @@ cssPrefix: pf-v6-c-nav
222
246
  <span class="pf-v6-c-nav__link-text">Link 3</span>
223
247
  <span class="pf-v6-c-nav__toggle">
224
248
  <span class="pf-v6-c-nav__toggle-icon">
225
- <i class="fas fa-angle-right" aria-hidden="true"></i>
249
+ <svg
250
+ class="pf-v6-svg"
251
+ viewBox="0 0 20 20"
252
+ fill="currentColor"
253
+ aria-hidden="true"
254
+ role="img"
255
+ width="1em"
256
+ height="1em"
257
+ >
258
+ <path
259
+ d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
260
+ />
261
+ </svg>
226
262
  </span>
227
263
  </span>
228
264
  </button>
@@ -261,7 +297,19 @@ cssPrefix: pf-v6-c-nav
261
297
  <span class="pf-v6-c-nav__link-text">Link 1</span>
262
298
  <span class="pf-v6-c-nav__toggle">
263
299
  <span class="pf-v6-c-nav__toggle-icon">
264
- <i class="fas fa-angle-right" aria-hidden="true"></i>
300
+ <svg
301
+ class="pf-v6-svg"
302
+ viewBox="0 0 20 20"
303
+ fill="currentColor"
304
+ aria-hidden="true"
305
+ role="img"
306
+ width="1em"
307
+ height="1em"
308
+ >
309
+ <path
310
+ d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
311
+ />
312
+ </svg>
265
313
  </span>
266
314
  </span>
267
315
  </button>
@@ -294,7 +342,19 @@ cssPrefix: pf-v6-c-nav
294
342
  <span class="pf-v6-c-nav__link-text">Link 2</span>
295
343
  <span class="pf-v6-c-nav__toggle">
296
344
  <span class="pf-v6-c-nav__toggle-icon">
297
- <i class="fas fa-angle-right" aria-hidden="true"></i>
345
+ <svg
346
+ class="pf-v6-svg"
347
+ viewBox="0 0 20 20"
348
+ fill="currentColor"
349
+ aria-hidden="true"
350
+ role="img"
351
+ width="1em"
352
+ height="1em"
353
+ >
354
+ <path
355
+ d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
356
+ />
357
+ </svg>
298
358
  </span>
299
359
  </span>
300
360
  </button>
@@ -339,7 +399,19 @@ cssPrefix: pf-v6-c-nav
339
399
  >Link 2 (expanded, but not current example)</span>
340
400
  <span class="pf-v6-c-nav__toggle">
341
401
  <span class="pf-v6-c-nav__toggle-icon">
342
- <i class="fas fa-angle-right" aria-hidden="true"></i>
402
+ <svg
403
+ class="pf-v6-svg"
404
+ viewBox="0 0 20 20"
405
+ fill="currentColor"
406
+ aria-hidden="true"
407
+ role="img"
408
+ width="1em"
409
+ height="1em"
410
+ >
411
+ <path
412
+ d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
413
+ />
414
+ </svg>
343
415
  </span>
344
416
  </span>
345
417
  </button>
@@ -369,7 +441,19 @@ cssPrefix: pf-v6-c-nav
369
441
  >Link 3 (current, but not expanded example)</span>
370
442
  <span class="pf-v6-c-nav__toggle">
371
443
  <span class="pf-v6-c-nav__toggle-icon">
372
- <i class="fas fa-angle-right" aria-hidden="true"></i>
444
+ <svg
445
+ class="pf-v6-svg"
446
+ viewBox="0 0 20 20"
447
+ fill="currentColor"
448
+ aria-hidden="true"
449
+ role="img"
450
+ width="1em"
451
+ height="1em"
452
+ >
453
+ <path
454
+ d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
455
+ />
456
+ </svg>
373
457
  </span>
374
458
  </span>
375
459
  </button>
@@ -436,7 +520,19 @@ cssPrefix: pf-v6-c-nav
436
520
  <span class="pf-v6-c-nav__link-text">Subscriptions</span>
437
521
  <span class="pf-v6-c-nav__toggle">
438
522
  <span class="pf-v6-c-nav__toggle-icon">
439
- <i class="fas fa-angle-right" aria-hidden="true"></i>
523
+ <svg
524
+ class="pf-v6-svg"
525
+ viewBox="0 0 20 20"
526
+ fill="currentColor"
527
+ aria-hidden="true"
528
+ role="img"
529
+ width="1em"
530
+ height="1em"
531
+ >
532
+ <path
533
+ d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
534
+ />
535
+ </svg>
440
536
  </span>
441
537
  </span>
442
538
  </button>
@@ -469,7 +565,19 @@ cssPrefix: pf-v6-c-nav
469
565
  <span class="pf-v6-c-nav__link-text">Cost management</span>
470
566
  <span class="pf-v6-c-nav__toggle">
471
567
  <span class="pf-v6-c-nav__toggle-icon">
472
- <i class="fas fa-angle-right" aria-hidden="true"></i>
568
+ <svg
569
+ class="pf-v6-svg"
570
+ viewBox="0 0 20 20"
571
+ fill="currentColor"
572
+ aria-hidden="true"
573
+ role="img"
574
+ width="1em"
575
+ height="1em"
576
+ >
577
+ <path
578
+ d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
579
+ />
580
+ </svg>
473
581
  </span>
474
582
  </span>
475
583
  </button>
@@ -497,7 +605,19 @@ cssPrefix: pf-v6-c-nav
497
605
  <span class="pf-v6-c-nav__link-text">Public clouds</span>
498
606
  <span class="pf-v6-c-nav__toggle">
499
607
  <span class="pf-v6-c-nav__toggle-icon">
500
- <i class="fas fa-angle-right" aria-hidden="true"></i>
608
+ <svg
609
+ class="pf-v6-svg"
610
+ viewBox="0 0 20 20"
611
+ fill="currentColor"
612
+ aria-hidden="true"
613
+ role="img"
614
+ width="1em"
615
+ height="1em"
616
+ >
617
+ <path
618
+ d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
619
+ />
620
+ </svg>
501
621
  </span>
502
622
  </span>
503
623
  </button>
@@ -584,7 +704,19 @@ cssPrefix: pf-v6-c-nav
584
704
  disabled
585
705
  >
586
706
  <span class="pf-v6-c-button__icon">
587
- <i class="fas fa-angle-left" aria-hidden="true"></i>
707
+ <svg
708
+ class="pf-v6-svg"
709
+ viewBox="0 0 20 20"
710
+ fill="currentColor"
711
+ aria-hidden="true"
712
+ role="img"
713
+ width="1em"
714
+ height="1em"
715
+ >
716
+ <path
717
+ d="m6.41 10 7.29-7.29.02-.02c.38-.4.37-1.03-.02-1.41-.4-.38-1.03-.37-1.41.02L4.64 8.95a1.49 1.49 0 0 0 0 2.12l7.65 7.65c.19.19.44.29.71.29.27 0 .52-.11.71-.29a.996.996 0 0 0 0-1.41l-7.29-7.29Z"
718
+ />
719
+ </svg>
588
720
  </span>
589
721
  </button>
590
722
  </div>
@@ -622,7 +754,19 @@ cssPrefix: pf-v6-c-nav
622
754
  aria-label="Scroll end"
623
755
  >
624
756
  <span class="pf-v6-c-button__icon">
625
- <i class="fas fa-angle-right" aria-hidden="true"></i>
757
+ <svg
758
+ class="pf-v6-svg"
759
+ viewBox="0 0 20 20"
760
+ fill="currentColor"
761
+ aria-hidden="true"
762
+ role="img"
763
+ width="1em"
764
+ height="1em"
765
+ >
766
+ <path
767
+ d="M14.35 8.94 6.71 1.29l-.02-.02c-.4-.38-1.03-.37-1.41.02-.38.4-.37 1.03.02 1.41l7.29 7.29-7.29 7.29a1.003 1.003 0 0 0 1.42 1.42l7.65-7.65c.59-.59.59-1.54 0-2.12Z"
768
+ />
769
+ </svg>
626
770
  </span>
627
771
  </button>
628
772
  </div>
@@ -670,7 +814,19 @@ cssPrefix: pf-v6-c-nav
670
814
  disabled
671
815
  >
672
816
  <span class="pf-v6-c-button__icon">
673
- <i class="fas fa-angle-left" aria-hidden="true"></i>
817
+ <svg
818
+ class="pf-v6-svg"
819
+ viewBox="0 0 20 20"
820
+ fill="currentColor"
821
+ aria-hidden="true"
822
+ role="img"
823
+ width="1em"
824
+ height="1em"
825
+ >
826
+ <path
827
+ d="m6.41 10 7.29-7.29.02-.02c.38-.4.37-1.03-.02-1.41-.4-.38-1.03-.37-1.41.02L4.64 8.95a1.49 1.49 0 0 0 0 2.12l7.65 7.65c.19.19.44.29.71.29.27 0 .52-.11.71-.29a.996.996 0 0 0 0-1.41l-7.29-7.29Z"
828
+ />
829
+ </svg>
674
830
  </span>
675
831
  </button>
676
832
  </div>
@@ -708,7 +864,19 @@ cssPrefix: pf-v6-c-nav
708
864
  aria-label="Scroll end"
709
865
  >
710
866
  <span class="pf-v6-c-button__icon">
711
- <i class="fas fa-angle-right" aria-hidden="true"></i>
867
+ <svg
868
+ class="pf-v6-svg"
869
+ viewBox="0 0 20 20"
870
+ fill="currentColor"
871
+ aria-hidden="true"
872
+ role="img"
873
+ width="1em"
874
+ height="1em"
875
+ >
876
+ <path
877
+ d="M14.35 8.94 6.71 1.29l-.02-.02c-.4-.38-1.03-.37-1.41.02-.38.4-.37 1.03.02 1.41l7.29 7.29-7.29 7.29a1.003 1.003 0 0 0 1.42 1.42l7.65-7.65c.59-.59.59-1.54 0-2.12Z"
878
+ />
879
+ </svg>
712
880
  </span>
713
881
  </button>
714
882
  </div>
@@ -747,7 +915,19 @@ cssPrefix: pf-v6-c-nav
747
915
  <span class="pf-v6-c-nav__link-text">Subscriptions</span>
748
916
  <span class="pf-v6-c-nav__toggle">
749
917
  <span class="pf-v6-c-nav__toggle-icon">
750
- <i class="fas fa-angle-right" aria-hidden="true"></i>
918
+ <svg
919
+ class="pf-v6-svg"
920
+ viewBox="0 0 20 20"
921
+ fill="currentColor"
922
+ aria-hidden="true"
923
+ role="img"
924
+ width="1em"
925
+ height="1em"
926
+ >
927
+ <path
928
+ d="M14.35 8.94 6.71 1.29l-.02-.02c-.4-.38-1.03-.37-1.41.02-.38.4-.37 1.03.02 1.41l7.29 7.29-7.29 7.29a1.003 1.003 0 0 0 1.42 1.42l7.65-7.65c.59-.59.59-1.54 0-2.12Z"
929
+ />
930
+ </svg>
751
931
  </span>
752
932
  </span>
753
933
  </a>
@@ -793,7 +973,19 @@ cssPrefix: pf-v6-c-nav
793
973
  <span class="pf-v6-c-menu__item-main">
794
974
  <span class="pf-v6-c-menu__item-text">Dedicated</span>
795
975
  <span class="pf-v6-c-menu__item-toggle-icon">
796
- <i class="fas fa-angle-right"></i>
976
+ <svg
977
+ class="pf-v6-svg"
978
+ viewBox="0 0 20 20"
979
+ fill="currentColor"
980
+ aria-hidden="true"
981
+ role="img"
982
+ width="1em"
983
+ height="1em"
984
+ >
985
+ <path
986
+ d="M14.35 8.94 6.71 1.29l-.02-.02c-.4-.38-1.03-.37-1.41.02-.38.4-.37 1.03.02 1.41l7.29 7.29-7.29 7.29a1.003 1.003 0 0 0 1.42 1.42l7.65-7.65c.59-.59.59-1.54 0-2.12Z"
987
+ />
988
+ </svg>
797
989
  </span>
798
990
  </span>
799
991
  </button>
@@ -885,7 +1077,19 @@ cssPrefix: pf-v6-c-nav
885
1077
  <span class="pf-v6-c-menu__item-main">
886
1078
  <span class="pf-v6-c-menu__item-text">Edit</span>
887
1079
  <span class="pf-v6-c-menu__item-toggle-icon">
888
- <i class="fas fa-angle-right"></i>
1080
+ <svg
1081
+ class="pf-v6-svg"
1082
+ viewBox="0 0 20 20"
1083
+ fill="currentColor"
1084
+ aria-hidden="true"
1085
+ role="img"
1086
+ width="1em"
1087
+ height="1em"
1088
+ >
1089
+ <path
1090
+ d="M14.35 8.94 6.71 1.29l-.02-.02c-.4-.38-1.03-.37-1.41.02-.38.4-.37 1.03.02 1.41l7.29 7.29-7.29 7.29a1.003 1.003 0 0 0 1.42 1.42l7.65-7.65c.59-.59.59-1.54 0-2.12Z"
1091
+ />
1092
+ </svg>
889
1093
  </span>
890
1094
  </span>
891
1095
  </button>
@@ -901,7 +1105,19 @@ cssPrefix: pf-v6-c-nav
901
1105
  >
902
1106
  <span class="pf-v6-c-menu__item-main">
903
1107
  <span class="pf-v6-c-menu__item-toggle-icon">
904
- <i class="fas fa-angle-left"></i>
1108
+ <svg
1109
+ class="pf-v6-svg"
1110
+ viewBox="0 0 20 20"
1111
+ fill="currentColor"
1112
+ aria-hidden="true"
1113
+ role="img"
1114
+ width="1em"
1115
+ height="1em"
1116
+ >
1117
+ <path
1118
+ d="m6.41 10 7.29-7.29.02-.02c.38-.4.37-1.03-.02-1.41-.4-.38-1.03-.37-1.41.02L4.64 8.95a1.49 1.49 0 0 0 0 2.12l7.65 7.65c.19.19.44.29.71.29.27 0 .52-.11.71-.29a.996.996 0 0 0 0-1.41l-7.29-7.29Z"
1119
+ />
1120
+ </svg>
905
1121
  </span>
906
1122
  <span class="pf-v6-c-menu__item-text">Edit</span>
907
1123
  </span>
@@ -917,7 +1133,19 @@ cssPrefix: pf-v6-c-nav
917
1133
  <span class="pf-v6-c-menu__item-main">
918
1134
  <span class="pf-v6-c-menu__item-text">Deployment</span>
919
1135
  <span class="pf-v6-c-menu__item-toggle-icon">
920
- <i class="fas fa-angle-right"></i>
1136
+ <svg
1137
+ class="pf-v6-svg"
1138
+ viewBox="0 0 20 20"
1139
+ fill="currentColor"
1140
+ aria-hidden="true"
1141
+ role="img"
1142
+ width="1em"
1143
+ height="1em"
1144
+ >
1145
+ <path
1146
+ d="M14.35 8.94 6.71 1.29l-.02-.02c-.4-.38-1.03-.37-1.41.02-.38.4-.37 1.03.02 1.41l7.29 7.29-7.29 7.29a1.003 1.003 0 0 0 1.42 1.42l7.65-7.65c.59-.59.59-1.54 0-2.12Z"
1147
+ />
1148
+ </svg>
921
1149
  </span>
922
1150
  </span>
923
1151
  </button>
@@ -936,7 +1164,19 @@ cssPrefix: pf-v6-c-nav
936
1164
  >
937
1165
  <span class="pf-v6-c-menu__item-main">
938
1166
  <span class="pf-v6-c-menu__item-toggle-icon">
939
- <i class="fas fa-angle-left"></i>
1167
+ <svg
1168
+ class="pf-v6-svg"
1169
+ viewBox="0 0 20 20"
1170
+ fill="currentColor"
1171
+ aria-hidden="true"
1172
+ role="img"
1173
+ width="1em"
1174
+ height="1em"
1175
+ >
1176
+ <path
1177
+ d="m6.41 10 7.29-7.29.02-.02c.38-.4.37-1.03-.02-1.41-.4-.38-1.03-.37-1.41.02L4.64 8.95a1.49 1.49 0 0 0 0 2.12l7.65 7.65c.19.19.44.29.71.29.27 0 .52-.11.71-.29a.996.996 0 0 0 0-1.41l-7.29-7.29Z"
1178
+ />
1179
+ </svg>
940
1180
  </span>
941
1181
  <span class="pf-v6-c-menu__item-text">Deployment</span>
942
1182
  </span>
@@ -987,7 +1227,19 @@ cssPrefix: pf-v6-c-nav
987
1227
  class="pf-v6-c-menu__item-text"
988
1228
  >Advanced settings</span>
989
1229
  <span class="pf-v6-c-menu__item-toggle-icon">
990
- <i class="fas fa-angle-right"></i>
1230
+ <svg
1231
+ class="pf-v6-svg"
1232
+ viewBox="0 0 20 20"
1233
+ fill="currentColor"
1234
+ aria-hidden="true"
1235
+ role="img"
1236
+ width="1em"
1237
+ height="1em"
1238
+ >
1239
+ <path
1240
+ d="M14.35 8.94 6.71 1.29l-.02-.02c-.4-.38-1.03-.37-1.41.02-.38.4-.37 1.03.02 1.41l7.29 7.29-7.29 7.29a1.003 1.003 0 0 0 1.42 1.42l7.65-7.65c.59-.59.59-1.54 0-2.12Z"
1241
+ />
1242
+ </svg>
991
1243
  </span>
992
1244
  </span>
993
1245
  </button>
@@ -1008,7 +1260,19 @@ cssPrefix: pf-v6-c-nav
1008
1260
  <span
1009
1261
  class="pf-v6-c-menu__item-toggle-icon"
1010
1262
  >
1011
- <i class="fas fa-angle-left"></i>
1263
+ <svg
1264
+ class="pf-v6-svg"
1265
+ viewBox="0 0 20 20"
1266
+ fill="currentColor"
1267
+ aria-hidden="true"
1268
+ role="img"
1269
+ width="1em"
1270
+ height="1em"
1271
+ >
1272
+ <path
1273
+ d="m6.41 10 7.29-7.29.02-.02c.38-.4.37-1.03-.02-1.41-.4-.38-1.03-.37-1.41.02L4.64 8.95a1.49 1.49 0 0 0 0 2.12l7.65 7.65c.19.19.44.29.71.29.27 0 .52-.11.71-.29a.996.996 0 0 0 0-1.41l-7.29-7.29Z"
1274
+ />
1275
+ </svg>
1012
1276
  </span>
1013
1277
  <span
1014
1278
  class="pf-v6-c-menu__item-text"
@@ -1073,7 +1337,19 @@ cssPrefix: pf-v6-c-nav
1073
1337
  <span class="pf-v6-c-menu__item-main">
1074
1338
  <span class="pf-v6-c-menu__item-text">RBAC</span>
1075
1339
  <span class="pf-v6-c-menu__item-toggle-icon">
1076
- <i class="fas fa-angle-right"></i>
1340
+ <svg
1341
+ class="pf-v6-svg"
1342
+ viewBox="0 0 20 20"
1343
+ fill="currentColor"
1344
+ aria-hidden="true"
1345
+ role="img"
1346
+ width="1em"
1347
+ height="1em"
1348
+ >
1349
+ <path
1350
+ d="M14.35 8.94 6.71 1.29l-.02-.02c-.4-.38-1.03-.37-1.41.02-.38.4-.37 1.03.02 1.41l7.29 7.29-7.29 7.29a1.003 1.003 0 0 0 1.42 1.42l7.65-7.65c.59-.59.59-1.54 0-2.12Z"
1351
+ />
1352
+ </svg>
1077
1353
  </span>
1078
1354
  </span>
1079
1355
  </button>
@@ -1091,7 +1367,19 @@ cssPrefix: pf-v6-c-nav
1091
1367
  >
1092
1368
  <span class="pf-v6-c-menu__item-main">
1093
1369
  <span class="pf-v6-c-menu__item-toggle-icon">
1094
- <i class="fas fa-angle-left"></i>
1370
+ <svg
1371
+ class="pf-v6-svg"
1372
+ viewBox="0 0 20 20"
1373
+ fill="currentColor"
1374
+ aria-hidden="true"
1375
+ role="img"
1376
+ width="1em"
1377
+ height="1em"
1378
+ >
1379
+ <path
1380
+ d="m6.41 10 7.29-7.29.02-.02c.38-.4.37-1.03-.02-1.41-.4-.38-1.03-.37-1.41.02L4.64 8.95a1.49 1.49 0 0 0 0 2.12l7.65 7.65c.19.19.44.29.71.29.27 0 .52-.11.71-.29a.996.996 0 0 0 0-1.41l-7.29-7.29Z"
1381
+ />
1382
+ </svg>
1095
1383
  </span>
1096
1384
  <span class="pf-v6-c-menu__item-text">RBAC</span>
1097
1385
  </span>
@@ -1161,7 +1449,19 @@ cssPrefix: pf-v6-c-nav
1161
1449
  <span class="pf-v6-c-menu__item-main">
1162
1450
  <span class="pf-v6-c-menu__item-text">Configuration</span>
1163
1451
  <span class="pf-v6-c-menu__item-toggle-icon">
1164
- <i class="fas fa-angle-right"></i>
1452
+ <svg
1453
+ class="pf-v6-svg"
1454
+ viewBox="0 0 20 20"
1455
+ fill="currentColor"
1456
+ aria-hidden="true"
1457
+ role="img"
1458
+ width="1em"
1459
+ height="1em"
1460
+ >
1461
+ <path
1462
+ d="M14.35 8.94 6.71 1.29l-.02-.02c-.4-.38-1.03-.37-1.41.02-.38.4-.37 1.03.02 1.41l7.29 7.29-7.29 7.29a1.003 1.003 0 0 0 1.42 1.42l7.65-7.65c.59-.59.59-1.54 0-2.12Z"
1463
+ />
1464
+ </svg>
1165
1465
  </span>
1166
1466
  </span>
1167
1467
  </button>
@@ -1176,7 +1476,19 @@ cssPrefix: pf-v6-c-nav
1176
1476
  >
1177
1477
  <span class="pf-v6-c-menu__item-main">
1178
1478
  <span class="pf-v6-c-menu__item-toggle-icon">
1179
- <i class="fas fa-angle-left"></i>
1479
+ <svg
1480
+ class="pf-v6-svg"
1481
+ viewBox="0 0 20 20"
1482
+ fill="currentColor"
1483
+ aria-hidden="true"
1484
+ role="img"
1485
+ width="1em"
1486
+ height="1em"
1487
+ >
1488
+ <path
1489
+ d="m6.41 10 7.29-7.29.02-.02c.38-.4.37-1.03-.02-1.41-.4-.38-1.03-.37-1.41.02L4.64 8.95a1.49 1.49 0 0 0 0 2.12l7.65 7.65c.19.19.44.29.71.29.27 0 .52-.11.71-.29a.996.996 0 0 0 0-1.41l-7.29-7.29Z"
1490
+ />
1491
+ </svg>
1180
1492
  </span>
1181
1493
  <span class="pf-v6-c-menu__item-text">Configuration</span>
1182
1494
  </span>
@@ -1192,7 +1504,19 @@ cssPrefix: pf-v6-c-nav
1192
1504
  <span class="pf-v6-c-menu__item-main">
1193
1505
  <span class="pf-v6-c-menu__item-text">Profile</span>
1194
1506
  <span class="pf-v6-c-menu__item-toggle-icon">
1195
- <i class="fas fa-angle-right"></i>
1507
+ <svg
1508
+ class="pf-v6-svg"
1509
+ viewBox="0 0 20 20"
1510
+ fill="currentColor"
1511
+ aria-hidden="true"
1512
+ role="img"
1513
+ width="1em"
1514
+ height="1em"
1515
+ >
1516
+ <path
1517
+ d="M14.35 8.94 6.71 1.29l-.02-.02c-.4-.38-1.03-.37-1.41.02-.38.4-.37 1.03.02 1.41l7.29 7.29-7.29 7.29a1.003 1.003 0 0 0 1.42 1.42l7.65-7.65c.59-.59.59-1.54 0-2.12Z"
1518
+ />
1519
+ </svg>
1196
1520
  </span>
1197
1521
  </span>
1198
1522
  </button>
@@ -1210,7 +1534,19 @@ cssPrefix: pf-v6-c-nav
1210
1534
  >
1211
1535
  <span class="pf-v6-c-menu__item-main">
1212
1536
  <span class="pf-v6-c-menu__item-toggle-icon">
1213
- <i class="fas fa-angle-left"></i>
1537
+ <svg
1538
+ class="pf-v6-svg"
1539
+ viewBox="0 0 20 20"
1540
+ fill="currentColor"
1541
+ aria-hidden="true"
1542
+ role="img"
1543
+ width="1em"
1544
+ height="1em"
1545
+ >
1546
+ <path
1547
+ d="m6.41 10 7.29-7.29.02-.02c.38-.4.37-1.03-.02-1.41-.4-.38-1.03-.37-1.41.02L4.64 8.95a1.49 1.49 0 0 0 0 2.12l7.65 7.65c.19.19.44.29.71.29.27 0 .52-.11.71-.29a.996.996 0 0 0 0-1.41l-7.29-7.29Z"
1548
+ />
1549
+ </svg>
1214
1550
  </span>
1215
1551
  <span class="pf-v6-c-menu__item-text">Profile</span>
1216
1552
  </span>
@@ -1298,7 +1634,19 @@ cssPrefix: pf-v6-c-nav
1298
1634
  <span class="pf-v6-c-menu__item-main">
1299
1635
  <span class="pf-v6-c-menu__item-text">Edit access settings</span>
1300
1636
  <span class="pf-v6-c-menu__item-toggle-icon">
1301
- <i class="fas fa-angle-right"></i>
1637
+ <svg
1638
+ class="pf-v6-svg"
1639
+ viewBox="0 0 20 20"
1640
+ fill="currentColor"
1641
+ aria-hidden="true"
1642
+ role="img"
1643
+ width="1em"
1644
+ height="1em"
1645
+ >
1646
+ <path
1647
+ d="M14.35 8.94 6.71 1.29l-.02-.02c-.4-.38-1.03-.37-1.41.02-.38.4-.37 1.03.02 1.41l7.29 7.29-7.29 7.29a1.003 1.003 0 0 0 1.42 1.42l7.65-7.65c.59-.59.59-1.54 0-2.12Z"
1648
+ />
1649
+ </svg>
1302
1650
  </span>
1303
1651
  </span>
1304
1652
  </button>
@@ -1316,7 +1664,19 @@ cssPrefix: pf-v6-c-nav
1316
1664
  >
1317
1665
  <span class="pf-v6-c-menu__item-main">
1318
1666
  <span class="pf-v6-c-menu__item-toggle-icon">
1319
- <i class="fas fa-angle-left"></i>
1667
+ <svg
1668
+ class="pf-v6-svg"
1669
+ viewBox="0 0 20 20"
1670
+ fill="currentColor"
1671
+ aria-hidden="true"
1672
+ role="img"
1673
+ width="1em"
1674
+ height="1em"
1675
+ >
1676
+ <path
1677
+ d="m6.41 10 7.29-7.29.02-.02c.38-.4.37-1.03-.02-1.41-.4-.38-1.03-.37-1.41.02L4.64 8.95a1.49 1.49 0 0 0 0 2.12l7.65 7.65c.19.19.44.29.71.29.27 0 .52-.11.71-.29a.996.996 0 0 0 0-1.41l-7.29-7.29Z"
1678
+ />
1679
+ </svg>
1320
1680
  </span>
1321
1681
  <span
1322
1682
  class="pf-v6-c-menu__item-text"
@@ -1417,7 +1777,19 @@ cssPrefix: pf-v6-c-nav
1417
1777
  <span class="pf-v6-c-menu__item-main">
1418
1778
  <span class="pf-v6-c-menu__item-text">Edit</span>
1419
1779
  <span class="pf-v6-c-menu__item-toggle-icon">
1420
- <i class="fas fa-angle-right"></i>
1780
+ <svg
1781
+ class="pf-v6-svg"
1782
+ viewBox="0 0 20 20"
1783
+ fill="currentColor"
1784
+ aria-hidden="true"
1785
+ role="img"
1786
+ width="1em"
1787
+ height="1em"
1788
+ >
1789
+ <path
1790
+ d="M14.35 8.94 6.71 1.29l-.02-.02c-.4-.38-1.03-.37-1.41.02-.38.4-.37 1.03.02 1.41l7.29 7.29-7.29 7.29a1.003 1.003 0 0 0 1.42 1.42l7.65-7.65c.59-.59.59-1.54 0-2.12Z"
1791
+ />
1792
+ </svg>
1421
1793
  </span>
1422
1794
  </span>
1423
1795
  </button>
@@ -1433,7 +1805,19 @@ cssPrefix: pf-v6-c-nav
1433
1805
  >
1434
1806
  <span class="pf-v6-c-menu__item-main">
1435
1807
  <span class="pf-v6-c-menu__item-toggle-icon">
1436
- <i class="fas fa-angle-left"></i>
1808
+ <svg
1809
+ class="pf-v6-svg"
1810
+ viewBox="0 0 20 20"
1811
+ fill="currentColor"
1812
+ aria-hidden="true"
1813
+ role="img"
1814
+ width="1em"
1815
+ height="1em"
1816
+ >
1817
+ <path
1818
+ d="m6.41 10 7.29-7.29.02-.02c.38-.4.37-1.03-.02-1.41-.4-.38-1.03-.37-1.41.02L4.64 8.95a1.49 1.49 0 0 0 0 2.12l7.65 7.65c.19.19.44.29.71.29.27 0 .52-.11.71-.29a.996.996 0 0 0 0-1.41l-7.29-7.29Z"
1819
+ />
1820
+ </svg>
1437
1821
  </span>
1438
1822
  <span class="pf-v6-c-menu__item-text">Edit</span>
1439
1823
  </span>
@@ -1449,7 +1833,19 @@ cssPrefix: pf-v6-c-nav
1449
1833
  <span class="pf-v6-c-menu__item-main">
1450
1834
  <span class="pf-v6-c-menu__item-text">Deployment</span>
1451
1835
  <span class="pf-v6-c-menu__item-toggle-icon">
1452
- <i class="fas fa-angle-right"></i>
1836
+ <svg
1837
+ class="pf-v6-svg"
1838
+ viewBox="0 0 20 20"
1839
+ fill="currentColor"
1840
+ aria-hidden="true"
1841
+ role="img"
1842
+ width="1em"
1843
+ height="1em"
1844
+ >
1845
+ <path
1846
+ d="M14.35 8.94 6.71 1.29l-.02-.02c-.4-.38-1.03-.37-1.41.02-.38.4-.37 1.03.02 1.41l7.29 7.29-7.29 7.29a1.003 1.003 0 0 0 1.42 1.42l7.65-7.65c.59-.59.59-1.54 0-2.12Z"
1847
+ />
1848
+ </svg>
1453
1849
  </span>
1454
1850
  </span>
1455
1851
  </button>
@@ -1468,7 +1864,19 @@ cssPrefix: pf-v6-c-nav
1468
1864
  >
1469
1865
  <span class="pf-v6-c-menu__item-main">
1470
1866
  <span class="pf-v6-c-menu__item-toggle-icon">
1471
- <i class="fas fa-angle-left"></i>
1867
+ <svg
1868
+ class="pf-v6-svg"
1869
+ viewBox="0 0 20 20"
1870
+ fill="currentColor"
1871
+ aria-hidden="true"
1872
+ role="img"
1873
+ width="1em"
1874
+ height="1em"
1875
+ >
1876
+ <path
1877
+ d="m6.41 10 7.29-7.29.02-.02c.38-.4.37-1.03-.02-1.41-.4-.38-1.03-.37-1.41.02L4.64 8.95a1.49 1.49 0 0 0 0 2.12l7.65 7.65c.19.19.44.29.71.29.27 0 .52-.11.71-.29a.996.996 0 0 0 0-1.41l-7.29-7.29Z"
1878
+ />
1879
+ </svg>
1472
1880
  </span>
1473
1881
  <span class="pf-v6-c-menu__item-text">Deployment</span>
1474
1882
  </span>
@@ -1519,7 +1927,19 @@ cssPrefix: pf-v6-c-nav
1519
1927
  class="pf-v6-c-menu__item-text"
1520
1928
  >Advanced settings</span>
1521
1929
  <span class="pf-v6-c-menu__item-toggle-icon">
1522
- <i class="fas fa-angle-right"></i>
1930
+ <svg
1931
+ class="pf-v6-svg"
1932
+ viewBox="0 0 20 20"
1933
+ fill="currentColor"
1934
+ aria-hidden="true"
1935
+ role="img"
1936
+ width="1em"
1937
+ height="1em"
1938
+ >
1939
+ <path
1940
+ d="M14.35 8.94 6.71 1.29l-.02-.02c-.4-.38-1.03-.37-1.41.02-.38.4-.37 1.03.02 1.41l7.29 7.29-7.29 7.29a1.003 1.003 0 0 0 1.42 1.42l7.65-7.65c.59-.59.59-1.54 0-2.12Z"
1941
+ />
1942
+ </svg>
1523
1943
  </span>
1524
1944
  </span>
1525
1945
  </button>
@@ -1540,7 +1960,19 @@ cssPrefix: pf-v6-c-nav
1540
1960
  <span
1541
1961
  class="pf-v6-c-menu__item-toggle-icon"
1542
1962
  >
1543
- <i class="fas fa-angle-left"></i>
1963
+ <svg
1964
+ class="pf-v6-svg"
1965
+ viewBox="0 0 20 20"
1966
+ fill="currentColor"
1967
+ aria-hidden="true"
1968
+ role="img"
1969
+ width="1em"
1970
+ height="1em"
1971
+ >
1972
+ <path
1973
+ d="m6.41 10 7.29-7.29.02-.02c.38-.4.37-1.03-.02-1.41-.4-.38-1.03-.37-1.41.02L4.64 8.95a1.49 1.49 0 0 0 0 2.12l7.65 7.65c.19.19.44.29.71.29.27 0 .52-.11.71-.29a.996.996 0 0 0 0-1.41l-7.29-7.29Z"
1974
+ />
1975
+ </svg>
1544
1976
  </span>
1545
1977
  <span
1546
1978
  class="pf-v6-c-menu__item-text"
@@ -1605,7 +2037,19 @@ cssPrefix: pf-v6-c-nav
1605
2037
  <span class="pf-v6-c-menu__item-main">
1606
2038
  <span class="pf-v6-c-menu__item-text">RBAC</span>
1607
2039
  <span class="pf-v6-c-menu__item-toggle-icon">
1608
- <i class="fas fa-angle-right"></i>
2040
+ <svg
2041
+ class="pf-v6-svg"
2042
+ viewBox="0 0 20 20"
2043
+ fill="currentColor"
2044
+ aria-hidden="true"
2045
+ role="img"
2046
+ width="1em"
2047
+ height="1em"
2048
+ >
2049
+ <path
2050
+ d="M14.35 8.94 6.71 1.29l-.02-.02c-.4-.38-1.03-.37-1.41.02-.38.4-.37 1.03.02 1.41l7.29 7.29-7.29 7.29a1.003 1.003 0 0 0 1.42 1.42l7.65-7.65c.59-.59.59-1.54 0-2.12Z"
2051
+ />
2052
+ </svg>
1609
2053
  </span>
1610
2054
  </span>
1611
2055
  </button>
@@ -1623,7 +2067,19 @@ cssPrefix: pf-v6-c-nav
1623
2067
  >
1624
2068
  <span class="pf-v6-c-menu__item-main">
1625
2069
  <span class="pf-v6-c-menu__item-toggle-icon">
1626
- <i class="fas fa-angle-left"></i>
2070
+ <svg
2071
+ class="pf-v6-svg"
2072
+ viewBox="0 0 20 20"
2073
+ fill="currentColor"
2074
+ aria-hidden="true"
2075
+ role="img"
2076
+ width="1em"
2077
+ height="1em"
2078
+ >
2079
+ <path
2080
+ d="m6.41 10 7.29-7.29.02-.02c.38-.4.37-1.03-.02-1.41-.4-.38-1.03-.37-1.41.02L4.64 8.95a1.49 1.49 0 0 0 0 2.12l7.65 7.65c.19.19.44.29.71.29.27 0 .52-.11.71-.29a.996.996 0 0 0 0-1.41l-7.29-7.29Z"
2081
+ />
2082
+ </svg>
1627
2083
  </span>
1628
2084
  <span class="pf-v6-c-menu__item-text">RBAC</span>
1629
2085
  </span>
@@ -1693,7 +2149,19 @@ cssPrefix: pf-v6-c-nav
1693
2149
  <span class="pf-v6-c-menu__item-main">
1694
2150
  <span class="pf-v6-c-menu__item-text">Configuration</span>
1695
2151
  <span class="pf-v6-c-menu__item-toggle-icon">
1696
- <i class="fas fa-angle-right"></i>
2152
+ <svg
2153
+ class="pf-v6-svg"
2154
+ viewBox="0 0 20 20"
2155
+ fill="currentColor"
2156
+ aria-hidden="true"
2157
+ role="img"
2158
+ width="1em"
2159
+ height="1em"
2160
+ >
2161
+ <path
2162
+ d="M14.35 8.94 6.71 1.29l-.02-.02c-.4-.38-1.03-.37-1.41.02-.38.4-.37 1.03.02 1.41l7.29 7.29-7.29 7.29a1.003 1.003 0 0 0 1.42 1.42l7.65-7.65c.59-.59.59-1.54 0-2.12Z"
2163
+ />
2164
+ </svg>
1697
2165
  </span>
1698
2166
  </span>
1699
2167
  </button>
@@ -1708,7 +2176,19 @@ cssPrefix: pf-v6-c-nav
1708
2176
  >
1709
2177
  <span class="pf-v6-c-menu__item-main">
1710
2178
  <span class="pf-v6-c-menu__item-toggle-icon">
1711
- <i class="fas fa-angle-left"></i>
2179
+ <svg
2180
+ class="pf-v6-svg"
2181
+ viewBox="0 0 20 20"
2182
+ fill="currentColor"
2183
+ aria-hidden="true"
2184
+ role="img"
2185
+ width="1em"
2186
+ height="1em"
2187
+ >
2188
+ <path
2189
+ d="m6.41 10 7.29-7.29.02-.02c.38-.4.37-1.03-.02-1.41-.4-.38-1.03-.37-1.41.02L4.64 8.95a1.49 1.49 0 0 0 0 2.12l7.65 7.65c.19.19.44.29.71.29.27 0 .52-.11.71-.29a.996.996 0 0 0 0-1.41l-7.29-7.29Z"
2190
+ />
2191
+ </svg>
1712
2192
  </span>
1713
2193
  <span class="pf-v6-c-menu__item-text">Configuration</span>
1714
2194
  </span>
@@ -1724,7 +2204,19 @@ cssPrefix: pf-v6-c-nav
1724
2204
  <span class="pf-v6-c-menu__item-main">
1725
2205
  <span class="pf-v6-c-menu__item-text">Profile</span>
1726
2206
  <span class="pf-v6-c-menu__item-toggle-icon">
1727
- <i class="fas fa-angle-right"></i>
2207
+ <svg
2208
+ class="pf-v6-svg"
2209
+ viewBox="0 0 20 20"
2210
+ fill="currentColor"
2211
+ aria-hidden="true"
2212
+ role="img"
2213
+ width="1em"
2214
+ height="1em"
2215
+ >
2216
+ <path
2217
+ d="M14.35 8.94 6.71 1.29l-.02-.02c-.4-.38-1.03-.37-1.41.02-.38.4-.37 1.03.02 1.41l7.29 7.29-7.29 7.29a1.003 1.003 0 0 0 1.42 1.42l7.65-7.65c.59-.59.59-1.54 0-2.12Z"
2218
+ />
2219
+ </svg>
1728
2220
  </span>
1729
2221
  </span>
1730
2222
  </button>
@@ -1742,7 +2234,19 @@ cssPrefix: pf-v6-c-nav
1742
2234
  >
1743
2235
  <span class="pf-v6-c-menu__item-main">
1744
2236
  <span class="pf-v6-c-menu__item-toggle-icon">
1745
- <i class="fas fa-angle-left"></i>
2237
+ <svg
2238
+ class="pf-v6-svg"
2239
+ viewBox="0 0 20 20"
2240
+ fill="currentColor"
2241
+ aria-hidden="true"
2242
+ role="img"
2243
+ width="1em"
2244
+ height="1em"
2245
+ >
2246
+ <path
2247
+ d="m6.41 10 7.29-7.29.02-.02c.38-.4.37-1.03-.02-1.41-.4-.38-1.03-.37-1.41.02L4.64 8.95a1.49 1.49 0 0 0 0 2.12l7.65 7.65c.19.19.44.29.71.29.27 0 .52-.11.71-.29a.996.996 0 0 0 0-1.41l-7.29-7.29Z"
2248
+ />
2249
+ </svg>
1746
2250
  </span>
1747
2251
  <span class="pf-v6-c-menu__item-text">Profile</span>
1748
2252
  </span>
@@ -1830,7 +2334,19 @@ cssPrefix: pf-v6-c-nav
1830
2334
  <span class="pf-v6-c-menu__item-main">
1831
2335
  <span class="pf-v6-c-menu__item-text">Edit access settings</span>
1832
2336
  <span class="pf-v6-c-menu__item-toggle-icon">
1833
- <i class="fas fa-angle-right"></i>
2337
+ <svg
2338
+ class="pf-v6-svg"
2339
+ viewBox="0 0 20 20"
2340
+ fill="currentColor"
2341
+ aria-hidden="true"
2342
+ role="img"
2343
+ width="1em"
2344
+ height="1em"
2345
+ >
2346
+ <path
2347
+ d="M14.35 8.94 6.71 1.29l-.02-.02c-.4-.38-1.03-.37-1.41.02-.38.4-.37 1.03.02 1.41l7.29 7.29-7.29 7.29a1.003 1.003 0 0 0 1.42 1.42l7.65-7.65c.59-.59.59-1.54 0-2.12Z"
2348
+ />
2349
+ </svg>
1834
2350
  </span>
1835
2351
  </span>
1836
2352
  </button>
@@ -1848,7 +2364,19 @@ cssPrefix: pf-v6-c-nav
1848
2364
  >
1849
2365
  <span class="pf-v6-c-menu__item-main">
1850
2366
  <span class="pf-v6-c-menu__item-toggle-icon">
1851
- <i class="fas fa-angle-left"></i>
2367
+ <svg
2368
+ class="pf-v6-svg"
2369
+ viewBox="0 0 20 20"
2370
+ fill="currentColor"
2371
+ aria-hidden="true"
2372
+ role="img"
2373
+ width="1em"
2374
+ height="1em"
2375
+ >
2376
+ <path
2377
+ d="m6.41 10 7.29-7.29.02-.02c.38-.4.37-1.03-.02-1.41-.4-.38-1.03-.37-1.41.02L4.64 8.95a1.49 1.49 0 0 0 0 2.12l7.65 7.65c.19.19.44.29.71.29.27 0 .52-.11.71-.29a.996.996 0 0 0 0-1.41l-7.29-7.29Z"
2378
+ />
2379
+ </svg>
1852
2380
  </span>
1853
2381
  <span
1854
2382
  class="pf-v6-c-menu__item-text"
@@ -1949,7 +2477,19 @@ cssPrefix: pf-v6-c-nav
1949
2477
  <span class="pf-v6-c-menu__item-main">
1950
2478
  <span class="pf-v6-c-menu__item-text">Edit</span>
1951
2479
  <span class="pf-v6-c-menu__item-toggle-icon">
1952
- <i class="fas fa-angle-right"></i>
2480
+ <svg
2481
+ class="pf-v6-svg"
2482
+ viewBox="0 0 20 20"
2483
+ fill="currentColor"
2484
+ aria-hidden="true"
2485
+ role="img"
2486
+ width="1em"
2487
+ height="1em"
2488
+ >
2489
+ <path
2490
+ d="M14.35 8.94 6.71 1.29l-.02-.02c-.4-.38-1.03-.37-1.41.02-.38.4-.37 1.03.02 1.41l7.29 7.29-7.29 7.29a1.003 1.003 0 0 0 1.42 1.42l7.65-7.65c.59-.59.59-1.54 0-2.12Z"
2491
+ />
2492
+ </svg>
1953
2493
  </span>
1954
2494
  </span>
1955
2495
  </button>
@@ -1965,7 +2505,19 @@ cssPrefix: pf-v6-c-nav
1965
2505
  >
1966
2506
  <span class="pf-v6-c-menu__item-main">
1967
2507
  <span class="pf-v6-c-menu__item-toggle-icon">
1968
- <i class="fas fa-angle-left"></i>
2508
+ <svg
2509
+ class="pf-v6-svg"
2510
+ viewBox="0 0 20 20"
2511
+ fill="currentColor"
2512
+ aria-hidden="true"
2513
+ role="img"
2514
+ width="1em"
2515
+ height="1em"
2516
+ >
2517
+ <path
2518
+ d="m6.41 10 7.29-7.29.02-.02c.38-.4.37-1.03-.02-1.41-.4-.38-1.03-.37-1.41.02L4.64 8.95a1.49 1.49 0 0 0 0 2.12l7.65 7.65c.19.19.44.29.71.29.27 0 .52-.11.71-.29a.996.996 0 0 0 0-1.41l-7.29-7.29Z"
2519
+ />
2520
+ </svg>
1969
2521
  </span>
1970
2522
  <span class="pf-v6-c-menu__item-text">Edit</span>
1971
2523
  </span>
@@ -1984,7 +2536,19 @@ cssPrefix: pf-v6-c-nav
1984
2536
  <span class="pf-v6-c-menu__item-main">
1985
2537
  <span class="pf-v6-c-menu__item-text">Deployment</span>
1986
2538
  <span class="pf-v6-c-menu__item-toggle-icon">
1987
- <i class="fas fa-angle-right"></i>
2539
+ <svg
2540
+ class="pf-v6-svg"
2541
+ viewBox="0 0 20 20"
2542
+ fill="currentColor"
2543
+ aria-hidden="true"
2544
+ role="img"
2545
+ width="1em"
2546
+ height="1em"
2547
+ >
2548
+ <path
2549
+ d="M14.35 8.94 6.71 1.29l-.02-.02c-.4-.38-1.03-.37-1.41.02-.38.4-.37 1.03.02 1.41l7.29 7.29-7.29 7.29a1.003 1.003 0 0 0 1.42 1.42l7.65-7.65c.59-.59.59-1.54 0-2.12Z"
2550
+ />
2551
+ </svg>
1988
2552
  </span>
1989
2553
  </span>
1990
2554
  </button>
@@ -2003,7 +2567,19 @@ cssPrefix: pf-v6-c-nav
2003
2567
  >
2004
2568
  <span class="pf-v6-c-menu__item-main">
2005
2569
  <span class="pf-v6-c-menu__item-toggle-icon">
2006
- <i class="fas fa-angle-left"></i>
2570
+ <svg
2571
+ class="pf-v6-svg"
2572
+ viewBox="0 0 20 20"
2573
+ fill="currentColor"
2574
+ aria-hidden="true"
2575
+ role="img"
2576
+ width="1em"
2577
+ height="1em"
2578
+ >
2579
+ <path
2580
+ d="m6.41 10 7.29-7.29.02-.02c.38-.4.37-1.03-.02-1.41-.4-.38-1.03-.37-1.41.02L4.64 8.95a1.49 1.49 0 0 0 0 2.12l7.65 7.65c.19.19.44.29.71.29.27 0 .52-.11.71-.29a.996.996 0 0 0 0-1.41l-7.29-7.29Z"
2581
+ />
2582
+ </svg>
2007
2583
  </span>
2008
2584
  <span class="pf-v6-c-menu__item-text">Deployment</span>
2009
2585
  </span>
@@ -2054,7 +2630,19 @@ cssPrefix: pf-v6-c-nav
2054
2630
  class="pf-v6-c-menu__item-text"
2055
2631
  >Advanced settings</span>
2056
2632
  <span class="pf-v6-c-menu__item-toggle-icon">
2057
- <i class="fas fa-angle-right"></i>
2633
+ <svg
2634
+ class="pf-v6-svg"
2635
+ viewBox="0 0 20 20"
2636
+ fill="currentColor"
2637
+ aria-hidden="true"
2638
+ role="img"
2639
+ width="1em"
2640
+ height="1em"
2641
+ >
2642
+ <path
2643
+ d="M14.35 8.94 6.71 1.29l-.02-.02c-.4-.38-1.03-.37-1.41.02-.38.4-.37 1.03.02 1.41l7.29 7.29-7.29 7.29a1.003 1.003 0 0 0 1.42 1.42l7.65-7.65c.59-.59.59-1.54 0-2.12Z"
2644
+ />
2645
+ </svg>
2058
2646
  </span>
2059
2647
  </span>
2060
2648
  </button>
@@ -2075,7 +2663,19 @@ cssPrefix: pf-v6-c-nav
2075
2663
  <span
2076
2664
  class="pf-v6-c-menu__item-toggle-icon"
2077
2665
  >
2078
- <i class="fas fa-angle-left"></i>
2666
+ <svg
2667
+ class="pf-v6-svg"
2668
+ viewBox="0 0 20 20"
2669
+ fill="currentColor"
2670
+ aria-hidden="true"
2671
+ role="img"
2672
+ width="1em"
2673
+ height="1em"
2674
+ >
2675
+ <path
2676
+ d="m6.41 10 7.29-7.29.02-.02c.38-.4.37-1.03-.02-1.41-.4-.38-1.03-.37-1.41.02L4.64 8.95a1.49 1.49 0 0 0 0 2.12l7.65 7.65c.19.19.44.29.71.29.27 0 .52-.11.71-.29a.996.996 0 0 0 0-1.41l-7.29-7.29Z"
2677
+ />
2678
+ </svg>
2079
2679
  </span>
2080
2680
  <span
2081
2681
  class="pf-v6-c-menu__item-text"
@@ -2140,7 +2740,19 @@ cssPrefix: pf-v6-c-nav
2140
2740
  <span class="pf-v6-c-menu__item-main">
2141
2741
  <span class="pf-v6-c-menu__item-text">RBAC</span>
2142
2742
  <span class="pf-v6-c-menu__item-toggle-icon">
2143
- <i class="fas fa-angle-right"></i>
2743
+ <svg
2744
+ class="pf-v6-svg"
2745
+ viewBox="0 0 20 20"
2746
+ fill="currentColor"
2747
+ aria-hidden="true"
2748
+ role="img"
2749
+ width="1em"
2750
+ height="1em"
2751
+ >
2752
+ <path
2753
+ d="M14.35 8.94 6.71 1.29l-.02-.02c-.4-.38-1.03-.37-1.41.02-.38.4-.37 1.03.02 1.41l7.29 7.29-7.29 7.29a1.003 1.003 0 0 0 1.42 1.42l7.65-7.65c.59-.59.59-1.54 0-2.12Z"
2754
+ />
2755
+ </svg>
2144
2756
  </span>
2145
2757
  </span>
2146
2758
  </button>
@@ -2158,7 +2770,19 @@ cssPrefix: pf-v6-c-nav
2158
2770
  >
2159
2771
  <span class="pf-v6-c-menu__item-main">
2160
2772
  <span class="pf-v6-c-menu__item-toggle-icon">
2161
- <i class="fas fa-angle-left"></i>
2773
+ <svg
2774
+ class="pf-v6-svg"
2775
+ viewBox="0 0 20 20"
2776
+ fill="currentColor"
2777
+ aria-hidden="true"
2778
+ role="img"
2779
+ width="1em"
2780
+ height="1em"
2781
+ >
2782
+ <path
2783
+ d="m6.41 10 7.29-7.29.02-.02c.38-.4.37-1.03-.02-1.41-.4-.38-1.03-.37-1.41.02L4.64 8.95a1.49 1.49 0 0 0 0 2.12l7.65 7.65c.19.19.44.29.71.29.27 0 .52-.11.71-.29a.996.996 0 0 0 0-1.41l-7.29-7.29Z"
2784
+ />
2785
+ </svg>
2162
2786
  </span>
2163
2787
  <span class="pf-v6-c-menu__item-text">RBAC</span>
2164
2788
  </span>
@@ -2228,7 +2852,19 @@ cssPrefix: pf-v6-c-nav
2228
2852
  <span class="pf-v6-c-menu__item-main">
2229
2853
  <span class="pf-v6-c-menu__item-text">Configuration</span>
2230
2854
  <span class="pf-v6-c-menu__item-toggle-icon">
2231
- <i class="fas fa-angle-right"></i>
2855
+ <svg
2856
+ class="pf-v6-svg"
2857
+ viewBox="0 0 20 20"
2858
+ fill="currentColor"
2859
+ aria-hidden="true"
2860
+ role="img"
2861
+ width="1em"
2862
+ height="1em"
2863
+ >
2864
+ <path
2865
+ d="M14.35 8.94 6.71 1.29l-.02-.02c-.4-.38-1.03-.37-1.41.02-.38.4-.37 1.03.02 1.41l7.29 7.29-7.29 7.29a1.003 1.003 0 0 0 1.42 1.42l7.65-7.65c.59-.59.59-1.54 0-2.12Z"
2866
+ />
2867
+ </svg>
2232
2868
  </span>
2233
2869
  </span>
2234
2870
  </button>
@@ -2243,7 +2879,19 @@ cssPrefix: pf-v6-c-nav
2243
2879
  >
2244
2880
  <span class="pf-v6-c-menu__item-main">
2245
2881
  <span class="pf-v6-c-menu__item-toggle-icon">
2246
- <i class="fas fa-angle-left"></i>
2882
+ <svg
2883
+ class="pf-v6-svg"
2884
+ viewBox="0 0 20 20"
2885
+ fill="currentColor"
2886
+ aria-hidden="true"
2887
+ role="img"
2888
+ width="1em"
2889
+ height="1em"
2890
+ >
2891
+ <path
2892
+ d="m6.41 10 7.29-7.29.02-.02c.38-.4.37-1.03-.02-1.41-.4-.38-1.03-.37-1.41.02L4.64 8.95a1.49 1.49 0 0 0 0 2.12l7.65 7.65c.19.19.44.29.71.29.27 0 .52-.11.71-.29a.996.996 0 0 0 0-1.41l-7.29-7.29Z"
2893
+ />
2894
+ </svg>
2247
2895
  </span>
2248
2896
  <span class="pf-v6-c-menu__item-text">Configuration</span>
2249
2897
  </span>
@@ -2259,7 +2907,19 @@ cssPrefix: pf-v6-c-nav
2259
2907
  <span class="pf-v6-c-menu__item-main">
2260
2908
  <span class="pf-v6-c-menu__item-text">Profile</span>
2261
2909
  <span class="pf-v6-c-menu__item-toggle-icon">
2262
- <i class="fas fa-angle-right"></i>
2910
+ <svg
2911
+ class="pf-v6-svg"
2912
+ viewBox="0 0 20 20"
2913
+ fill="currentColor"
2914
+ aria-hidden="true"
2915
+ role="img"
2916
+ width="1em"
2917
+ height="1em"
2918
+ >
2919
+ <path
2920
+ d="M14.35 8.94 6.71 1.29l-.02-.02c-.4-.38-1.03-.37-1.41.02-.38.4-.37 1.03.02 1.41l7.29 7.29-7.29 7.29a1.003 1.003 0 0 0 1.42 1.42l7.65-7.65c.59-.59.59-1.54 0-2.12Z"
2921
+ />
2922
+ </svg>
2263
2923
  </span>
2264
2924
  </span>
2265
2925
  </button>
@@ -2277,7 +2937,19 @@ cssPrefix: pf-v6-c-nav
2277
2937
  >
2278
2938
  <span class="pf-v6-c-menu__item-main">
2279
2939
  <span class="pf-v6-c-menu__item-toggle-icon">
2280
- <i class="fas fa-angle-left"></i>
2940
+ <svg
2941
+ class="pf-v6-svg"
2942
+ viewBox="0 0 20 20"
2943
+ fill="currentColor"
2944
+ aria-hidden="true"
2945
+ role="img"
2946
+ width="1em"
2947
+ height="1em"
2948
+ >
2949
+ <path
2950
+ d="m6.41 10 7.29-7.29.02-.02c.38-.4.37-1.03-.02-1.41-.4-.38-1.03-.37-1.41.02L4.64 8.95a1.49 1.49 0 0 0 0 2.12l7.65 7.65c.19.19.44.29.71.29.27 0 .52-.11.71-.29a.996.996 0 0 0 0-1.41l-7.29-7.29Z"
2951
+ />
2952
+ </svg>
2281
2953
  </span>
2282
2954
  <span class="pf-v6-c-menu__item-text">Profile</span>
2283
2955
  </span>
@@ -2365,7 +3037,19 @@ cssPrefix: pf-v6-c-nav
2365
3037
  <span class="pf-v6-c-menu__item-main">
2366
3038
  <span class="pf-v6-c-menu__item-text">Edit access settings</span>
2367
3039
  <span class="pf-v6-c-menu__item-toggle-icon">
2368
- <i class="fas fa-angle-right"></i>
3040
+ <svg
3041
+ class="pf-v6-svg"
3042
+ viewBox="0 0 20 20"
3043
+ fill="currentColor"
3044
+ aria-hidden="true"
3045
+ role="img"
3046
+ width="1em"
3047
+ height="1em"
3048
+ >
3049
+ <path
3050
+ d="M14.35 8.94 6.71 1.29l-.02-.02c-.4-.38-1.03-.37-1.41.02-.38.4-.37 1.03.02 1.41l7.29 7.29-7.29 7.29a1.003 1.003 0 0 0 1.42 1.42l7.65-7.65c.59-.59.59-1.54 0-2.12Z"
3051
+ />
3052
+ </svg>
2369
3053
  </span>
2370
3054
  </span>
2371
3055
  </button>
@@ -2383,7 +3067,19 @@ cssPrefix: pf-v6-c-nav
2383
3067
  >
2384
3068
  <span class="pf-v6-c-menu__item-main">
2385
3069
  <span class="pf-v6-c-menu__item-toggle-icon">
2386
- <i class="fas fa-angle-left"></i>
3070
+ <svg
3071
+ class="pf-v6-svg"
3072
+ viewBox="0 0 20 20"
3073
+ fill="currentColor"
3074
+ aria-hidden="true"
3075
+ role="img"
3076
+ width="1em"
3077
+ height="1em"
3078
+ >
3079
+ <path
3080
+ d="m6.41 10 7.29-7.29.02-.02c.38-.4.37-1.03-.02-1.41-.4-.38-1.03-.37-1.41.02L4.64 8.95a1.49 1.49 0 0 0 0 2.12l7.65 7.65c.19.19.44.29.71.29.27 0 .52-.11.71-.29a.996.996 0 0 0 0-1.41l-7.29-7.29Z"
3081
+ />
3082
+ </svg>
2387
3083
  </span>
2388
3084
  <span
2389
3085
  class="pf-v6-c-menu__item-text"
@@ -2474,6 +3170,49 @@ cssPrefix: pf-v6-c-nav
2474
3170
 
2475
3171
  ```
2476
3172
 
3173
+ ### Docked nav
3174
+
3175
+ ```html isBeta
3176
+ <nav class="pf-v6-c-nav pf-m-docked" aria-label="Global">
3177
+ <ul class="pf-v6-c-nav__list" role="list">
3178
+ <li class="pf-v6-c-nav__item">
3179
+ <a href="#" class="pf-v6-c-nav__link" aria-label="Cube">
3180
+ <span class="pf-v6-c-nav__link-icon">
3181
+ <i class="fas fa-fw fa-cube" aria-hidden="true"></i>
3182
+ </span>
3183
+ </a>
3184
+ </li>
3185
+ <li class="pf-v6-c-nav__item">
3186
+ <a
3187
+ href="#"
3188
+ class="pf-v6-c-nav__link pf-m-current"
3189
+ aria-current="page"
3190
+ aria-label="Folder"
3191
+ >
3192
+ <span class="pf-v6-c-nav__link-icon">
3193
+ <i class="fas fa-fw fa-folder" aria-hidden="true"></i>
3194
+ </span>
3195
+ </a>
3196
+ </li>
3197
+ <li class="pf-v6-c-nav__item">
3198
+ <a href="#" class="pf-v6-c-nav__link" aria-label="Cloud">
3199
+ <span class="pf-v6-c-nav__link-icon">
3200
+ <i class="fas fa-fw fa-cloud" aria-hidden="true"></i>
3201
+ </span>
3202
+ </a>
3203
+ </li>
3204
+ <li class="pf-v6-c-nav__item">
3205
+ <a href="#" class="pf-v6-c-nav__link" aria-label="Code">
3206
+ <span class="pf-v6-c-nav__link-icon">
3207
+ <i class="fas fa-fw fa-code" aria-hidden="true"></i>
3208
+ </span>
3209
+ </a>
3210
+ </li>
3211
+ </ul>
3212
+ </nav>
3213
+
3214
+ ```
3215
+
2477
3216
  ## Documentation
2478
3217
 
2479
3218
  ### Overview
@@ -2514,6 +3253,7 @@ The navigation system relies on several different sub-components:
2514
3253
  | `.pf-v6-c-nav__scroll-button` | `<button>` | Initiates a nav scroll button. **Required for horizontal navs** |
2515
3254
  | `.pf-m-horizontal` | `.pf-v6-c-nav` | Modifies nav for the horizontal variation. |
2516
3255
  | `.pf-m-horizontal-subnav` | `.pf-v6-c-nav` | Modifies nav for the horizontal subnav variation. |
3256
+ | `.pf-m-docked` | `.pf-v6-c-nav` | Modifies nav for the docked variation. |
2517
3257
  | `.pf-m-flyout` | `.pf-v6-c-nav__item` | Modifies nav item for the flyout variation. |
2518
3258
  | `.pf-m-scrollable` | `.pf-v6-c-nav` | Modifies nav for the scrollable state. |
2519
3259
  | `.pf-m-expanded` | `.pf-v6-c-nav__item` | Modifies for the expanded state. |