@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/demos/JumpLinks/examples/JumpLinks.md CHANGED
@@ -15,9 +15,10 @@ section: components
15
15
  <span class="pf-v6-c-button__text">Skip to content</span>
16
16
  </a>
17
17
  </div>
18
+
18
19
  <header
19
20
  class="pf-v6-c-masthead"
20
- id="jump-links-collapsed-mobile-example-masthead"
21
+ id="jump-links-collapsed-mobile-example-docked"
21
22
  >
22
23
  <div class="pf-v6-c-masthead__main">
23
24
  <span class="pf-v6-c-masthead__toggle">
@@ -60,7 +61,7 @@ section: components
60
61
  y1="2.25860997e-13%"
61
62
  x2="32%"
62
63
  y2="100%"
63
- id="linearGradient-jump-links-collapsed-mobile-example-masthead"
64
+ id="linearGradient-jump-links-collapsed-mobile-example-docked"
64
65
  >
65
66
  <stop stop-color="#2B9AF3" offset="0%" />
66
67
  <stop
@@ -114,11 +115,11 @@ section: components
114
115
  />
115
116
  <path
116
117
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
117
- fill="url(#linearGradient-jump-links-collapsed-mobile-example-masthead)"
118
+ fill="url(#linearGradient-jump-links-collapsed-mobile-example-docked)"
118
119
  />
119
120
  <path
120
121
  d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z"
121
- fill="url(#linearGradient-jump-links-collapsed-mobile-example-masthead)"
122
+ fill="url(#linearGradient-jump-links-collapsed-mobile-example-docked)"
122
123
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
123
124
  />
124
125
  </g>
@@ -130,7 +131,7 @@ section: components
130
131
  <div class="pf-v6-c-masthead__content">
131
132
  <div
132
133
  class="pf-v6-c-toolbar pf-m-static"
133
- id="jump-links-collapsed-mobile-example-masthead-toolbar"
134
+ id="jump-links-collapsed-mobile-example-docked-toolbar"
134
135
  >
135
136
  <div class="pf-v6-c-toolbar__content">
136
137
  <div class="pf-v6-c-toolbar__content-section">
@@ -148,7 +149,19 @@ section: components
148
149
  aria-label="Application launcher"
149
150
  >
150
151
  <span class="pf-v6-c-menu-toggle__icon">
151
- <i class="fas fa-th" aria-hidden="true"></i>
152
+ <svg
153
+ class="pf-v6-svg"
154
+ viewBox="0 0 512 512"
155
+ fill="currentColor"
156
+ aria-hidden="true"
157
+ role="img"
158
+ width="1em"
159
+ height="1em"
160
+ >
161
+ <path
162
+ d="M149.333 56v80c0 13.255-10.745 24-24 24H24c-13.255 0-24-10.745-24-24V56c0-13.255 10.745-24 24-24h101.333c13.255 0 24 10.745 24 24zm181.334 240v-80c0-13.255-10.745-24-24-24H205.333c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24h101.333c13.256 0 24.001-10.745 24.001-24zm32-240v80c0 13.255 10.745 24 24 24H488c13.255 0 24-10.745 24-24V56c0-13.255-10.745-24-24-24H386.667c-13.255 0-24 10.745-24 24zm-32 80V56c0-13.255-10.745-24-24-24H205.333c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24h101.333c13.256 0 24.001-10.745 24.001-24zm-205.334 56H24c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24h101.333c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24zM0 376v80c0 13.255 10.745 24 24 24h101.333c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H24c-13.255 0-24 10.745-24 24zm386.667-56H488c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H386.667c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24zm0 160H488c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H386.667c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24zM181.333 376v80c0 13.255 10.745 24 24 24h101.333c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H205.333c-13.255 0-24 10.745-24 24z"
163
+ />
164
+ </svg>
152
165
  </span>
153
166
  </button>
154
167
  </div>
@@ -160,7 +173,19 @@ section: components
160
173
  aria-label="Settings"
161
174
  >
162
175
  <span class="pf-v6-c-menu-toggle__icon">
163
- <i class="fas fa-cog" aria-hidden="true"></i>
176
+ <svg
177
+ class="pf-v6-svg"
178
+ viewBox="0 0 32 32"
179
+ fill="currentColor"
180
+ aria-hidden="true"
181
+ role="img"
182
+ width="1em"
183
+ height="1em"
184
+ >
185
+ <path
186
+ 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"
187
+ />
188
+ </svg>
164
189
  </span>
165
190
  </button>
166
191
  </div>
@@ -172,7 +197,19 @@ section: components
172
197
  aria-label="Help"
173
198
  >
174
199
  <span class="pf-v6-c-menu-toggle__icon">
175
- <i class="fas fa-question-circle" aria-hidden="true"></i>
200
+ <svg
201
+ class="pf-v6-svg"
202
+ viewBox="0 0 512 512"
203
+ fill="currentColor"
204
+ aria-hidden="true"
205
+ role="img"
206
+ width="1em"
207
+ height="1em"
208
+ >
209
+ <path
210
+ d="M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zM262.655 90c-54.497 0-89.255 22.957-116.549 63.758-3.536 5.286-2.353 12.415 2.715 16.258l34.699 26.31c5.205 3.947 12.621 3.008 16.665-2.122 17.864-22.658 30.113-35.797 57.303-35.797 20.429 0 45.698 13.148 45.698 32.958 0 14.976-12.363 22.667-32.534 33.976C247.128 238.528 216 254.941 216 296v4c0 6.627 5.373 12 12 12h56c6.627 0 12-5.373 12-12v-1.333c0-28.462 83.186-29.647 83.186-106.667 0-58.002-60.165-102-116.531-102zM256 338c-25.365 0-46 20.635-46 46 0 25.364 20.635 46 46 46s46-20.636 46-46c0-25.365-20.635-46-46-46z"
211
+ />
212
+ </svg>
176
213
  </span>
177
214
  </button>
178
215
  </div>
@@ -186,7 +223,19 @@ section: components
186
223
  aria-label="Actions"
187
224
  >
188
225
  <span class="pf-v6-c-menu-toggle__icon">
189
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
226
+ <svg
227
+ class="pf-v6-svg"
228
+ viewBox="0 0 32 32"
229
+ fill="currentColor"
230
+ aria-hidden="true"
231
+ role="img"
232
+ width="1em"
233
+ height="1em"
234
+ >
235
+ <path
236
+ 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"
237
+ />
238
+ </svg>
190
239
  </span>
191
240
  </button>
192
241
  </div>
@@ -197,44 +246,46 @@ section: components
197
246
  </div>
198
247
  </header>
199
248
  <div class="pf-v6-c-page__sidebar">
200
- <div class="pf-v6-c-page__sidebar-body">
201
- <nav
202
- class="pf-v6-c-nav"
203
- id="jump-links-collapsed-mobile-example-primary-nav"
204
- aria-label="Global"
205
- >
206
- <ul class="pf-v6-c-nav__list" role="list">
207
- <li class="pf-v6-c-nav__item">
208
- <a href="#" class="pf-v6-c-nav__link">
209
- <span class="pf-v6-c-nav__link-text">System panel</span>
210
- </a>
211
- </li>
212
- <li class="pf-v6-c-nav__item">
213
- <a
214
- href="#"
215
- class="pf-v6-c-nav__link pf-m-current"
216
- aria-current="page"
217
- >
218
- <span class="pf-v6-c-nav__link-text">Policy</span>
219
- </a>
220
- </li>
221
- <li class="pf-v6-c-nav__item">
222
- <a href="#" class="pf-v6-c-nav__link">
223
- <span class="pf-v6-c-nav__link-text">Authentication</span>
224
- </a>
225
- </li>
226
- <li class="pf-v6-c-nav__item">
227
- <a href="#" class="pf-v6-c-nav__link">
228
- <span class="pf-v6-c-nav__link-text">Network services</span>
229
- </a>
230
- </li>
231
- <li class="pf-v6-c-nav__item">
232
- <a href="#" class="pf-v6-c-nav__link">
233
- <span class="pf-v6-c-nav__link-text">Server</span>
234
- </a>
235
- </li>
236
- </ul>
237
- </nav>
249
+ <div class="pf-v6-c-page__sidebar-main">
250
+ <div class="pf-v6-c-page__sidebar-body">
251
+ <nav
252
+ class="pf-v6-c-nav"
253
+ id="jump-links-collapsed-mobile-example-primary-nav"
254
+ aria-label="Global"
255
+ >
256
+ <ul class="pf-v6-c-nav__list" role="list">
257
+ <li class="pf-v6-c-nav__item">
258
+ <a href="#" class="pf-v6-c-nav__link">
259
+ <span class="pf-v6-c-nav__link-text">System panel</span>
260
+ </a>
261
+ </li>
262
+ <li class="pf-v6-c-nav__item">
263
+ <a
264
+ href="#"
265
+ class="pf-v6-c-nav__link pf-m-current"
266
+ aria-current="page"
267
+ >
268
+ <span class="pf-v6-c-nav__link-text">Policy</span>
269
+ </a>
270
+ </li>
271
+ <li class="pf-v6-c-nav__item">
272
+ <a href="#" class="pf-v6-c-nav__link">
273
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
274
+ </a>
275
+ </li>
276
+ <li class="pf-v6-c-nav__item">
277
+ <a href="#" class="pf-v6-c-nav__link">
278
+ <span class="pf-v6-c-nav__link-text">Network services</span>
279
+ </a>
280
+ </li>
281
+ <li class="pf-v6-c-nav__item">
282
+ <a href="#" class="pf-v6-c-nav__link">
283
+ <span class="pf-v6-c-nav__link-text">Server</span>
284
+ </a>
285
+ </li>
286
+ </ul>
287
+ </nav>
288
+ </div>
238
289
  </div>
239
290
  </div>
240
291
  <div class="pf-v6-c-page__main-container" tabindex="-1">
@@ -252,21 +303,57 @@ section: components
252
303
  </li>
253
304
  <li class="pf-v6-c-breadcrumb__item">
254
305
  <span class="pf-v6-c-breadcrumb__item-divider">
255
- <i class="fas fa-angle-right" aria-hidden="true"></i>
306
+ <svg
307
+ class="pf-v6-svg"
308
+ viewBox="0 0 20 20"
309
+ fill="currentColor"
310
+ aria-hidden="true"
311
+ role="img"
312
+ width="1em"
313
+ height="1em"
314
+ >
315
+ <path
316
+ 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"
317
+ />
318
+ </svg>
256
319
  </span>
257
320
 
258
321
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
259
322
  </li>
260
323
  <li class="pf-v6-c-breadcrumb__item">
261
324
  <span class="pf-v6-c-breadcrumb__item-divider">
262
- <i class="fas fa-angle-right" aria-hidden="true"></i>
325
+ <svg
326
+ class="pf-v6-svg"
327
+ viewBox="0 0 20 20"
328
+ fill="currentColor"
329
+ aria-hidden="true"
330
+ role="img"
331
+ width="1em"
332
+ height="1em"
333
+ >
334
+ <path
335
+ 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"
336
+ />
337
+ </svg>
263
338
  </span>
264
339
 
265
340
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
266
341
  </li>
267
342
  <li class="pf-v6-c-breadcrumb__item">
268
343
  <span class="pf-v6-c-breadcrumb__item-divider">
269
- <i class="fas fa-angle-right" aria-hidden="true"></i>
344
+ <svg
345
+ class="pf-v6-svg"
346
+ viewBox="0 0 20 20"
347
+ fill="currentColor"
348
+ aria-hidden="true"
349
+ role="img"
350
+ width="1em"
351
+ height="1em"
352
+ >
353
+ <path
354
+ 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"
355
+ />
356
+ </svg>
270
357
  </span>
271
358
 
272
359
  <a
@@ -279,9 +366,15 @@ section: components
279
366
  </nav>
280
367
  </div>
281
368
  </section>
282
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
369
+ <section
370
+ class="pf-v6-c-page__main-section pf-m-limit-width"
371
+ aria-labelledby="main-title"
372
+ >
283
373
  <div class="pf-v6-c-page__main-body">
284
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
374
+ <h1
375
+ class="pf-v6-c-content--h1 pf-m-page-title"
376
+ id="main-title"
377
+ >Main title</h1>
285
378
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
286
379
  </div>
287
380
  </section>
@@ -304,10 +397,19 @@ section: components
304
397
  >
305
398
  <span class="pf-v6-c-button__icon pf-m-start">
306
399
  <span class="pf-v6-c-jump-links__toggle-icon">
307
- <i
308
- class="fas fa-angle-right"
400
+ <svg
401
+ class="pf-v6-svg"
402
+ viewBox="0 0 20 20"
403
+ fill="currentColor"
309
404
  aria-hidden="true"
310
- ></i>
405
+ role="img"
406
+ width="1em"
407
+ height="1em"
408
+ >
409
+ <path
410
+ 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"
411
+ />
412
+ </svg>
311
413
  </span>
312
414
  </span>
313
415
  <span class="pf-v6-c-button__text">Jump to section</span>
@@ -449,9 +551,10 @@ section: components
449
551
  <span class="pf-v6-c-button__text">Skip to content</span>
450
552
  </a>
451
553
  </div>
554
+
452
555
  <header
453
556
  class="pf-v6-c-masthead"
454
- id="jump-links-vertical-expanded-mobile-example-masthead"
557
+ id="jump-links-vertical-expanded-mobile-example-docked"
455
558
  >
456
559
  <div class="pf-v6-c-masthead__main">
457
560
  <span class="pf-v6-c-masthead__toggle">
@@ -494,7 +597,7 @@ section: components
494
597
  y1="2.25860997e-13%"
495
598
  x2="32%"
496
599
  y2="100%"
497
- id="linearGradient-jump-links-vertical-expanded-mobile-example-masthead"
600
+ id="linearGradient-jump-links-vertical-expanded-mobile-example-docked"
498
601
  >
499
602
  <stop stop-color="#2B9AF3" offset="0%" />
500
603
  <stop
@@ -548,11 +651,11 @@ section: components
548
651
  />
549
652
  <path
550
653
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
551
- fill="url(#linearGradient-jump-links-vertical-expanded-mobile-example-masthead)"
654
+ fill="url(#linearGradient-jump-links-vertical-expanded-mobile-example-docked)"
552
655
  />
553
656
  <path
554
657
  d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z"
555
- fill="url(#linearGradient-jump-links-vertical-expanded-mobile-example-masthead)"
658
+ fill="url(#linearGradient-jump-links-vertical-expanded-mobile-example-docked)"
556
659
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
557
660
  />
558
661
  </g>
@@ -564,7 +667,7 @@ section: components
564
667
  <div class="pf-v6-c-masthead__content">
565
668
  <div
566
669
  class="pf-v6-c-toolbar pf-m-static"
567
- id="jump-links-vertical-expanded-mobile-example-masthead-toolbar"
670
+ id="jump-links-vertical-expanded-mobile-example-docked-toolbar"
568
671
  >
569
672
  <div class="pf-v6-c-toolbar__content">
570
673
  <div class="pf-v6-c-toolbar__content-section">
@@ -582,7 +685,19 @@ section: components
582
685
  aria-label="Application launcher"
583
686
  >
584
687
  <span class="pf-v6-c-menu-toggle__icon">
585
- <i class="fas fa-th" aria-hidden="true"></i>
688
+ <svg
689
+ class="pf-v6-svg"
690
+ viewBox="0 0 512 512"
691
+ fill="currentColor"
692
+ aria-hidden="true"
693
+ role="img"
694
+ width="1em"
695
+ height="1em"
696
+ >
697
+ <path
698
+ d="M149.333 56v80c0 13.255-10.745 24-24 24H24c-13.255 0-24-10.745-24-24V56c0-13.255 10.745-24 24-24h101.333c13.255 0 24 10.745 24 24zm181.334 240v-80c0-13.255-10.745-24-24-24H205.333c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24h101.333c13.256 0 24.001-10.745 24.001-24zm32-240v80c0 13.255 10.745 24 24 24H488c13.255 0 24-10.745 24-24V56c0-13.255-10.745-24-24-24H386.667c-13.255 0-24 10.745-24 24zm-32 80V56c0-13.255-10.745-24-24-24H205.333c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24h101.333c13.256 0 24.001-10.745 24.001-24zm-205.334 56H24c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24h101.333c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24zM0 376v80c0 13.255 10.745 24 24 24h101.333c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H24c-13.255 0-24 10.745-24 24zm386.667-56H488c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H386.667c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24zm0 160H488c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H386.667c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24zM181.333 376v80c0 13.255 10.745 24 24 24h101.333c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H205.333c-13.255 0-24 10.745-24 24z"
699
+ />
700
+ </svg>
586
701
  </span>
587
702
  </button>
588
703
  </div>
@@ -594,7 +709,19 @@ section: components
594
709
  aria-label="Settings"
595
710
  >
596
711
  <span class="pf-v6-c-menu-toggle__icon">
597
- <i class="fas fa-cog" aria-hidden="true"></i>
712
+ <svg
713
+ class="pf-v6-svg"
714
+ viewBox="0 0 32 32"
715
+ fill="currentColor"
716
+ aria-hidden="true"
717
+ role="img"
718
+ width="1em"
719
+ height="1em"
720
+ >
721
+ <path
722
+ 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"
723
+ />
724
+ </svg>
598
725
  </span>
599
726
  </button>
600
727
  </div>
@@ -606,7 +733,19 @@ section: components
606
733
  aria-label="Help"
607
734
  >
608
735
  <span class="pf-v6-c-menu-toggle__icon">
609
- <i class="fas fa-question-circle" aria-hidden="true"></i>
736
+ <svg
737
+ class="pf-v6-svg"
738
+ viewBox="0 0 512 512"
739
+ fill="currentColor"
740
+ aria-hidden="true"
741
+ role="img"
742
+ width="1em"
743
+ height="1em"
744
+ >
745
+ <path
746
+ d="M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zM262.655 90c-54.497 0-89.255 22.957-116.549 63.758-3.536 5.286-2.353 12.415 2.715 16.258l34.699 26.31c5.205 3.947 12.621 3.008 16.665-2.122 17.864-22.658 30.113-35.797 57.303-35.797 20.429 0 45.698 13.148 45.698 32.958 0 14.976-12.363 22.667-32.534 33.976C247.128 238.528 216 254.941 216 296v4c0 6.627 5.373 12 12 12h56c6.627 0 12-5.373 12-12v-1.333c0-28.462 83.186-29.647 83.186-106.667 0-58.002-60.165-102-116.531-102zM256 338c-25.365 0-46 20.635-46 46 0 25.364 20.635 46 46 46s46-20.636 46-46c0-25.365-20.635-46-46-46z"
747
+ />
748
+ </svg>
610
749
  </span>
611
750
  </button>
612
751
  </div>
@@ -620,7 +759,19 @@ section: components
620
759
  aria-label="Actions"
621
760
  >
622
761
  <span class="pf-v6-c-menu-toggle__icon">
623
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
762
+ <svg
763
+ class="pf-v6-svg"
764
+ viewBox="0 0 32 32"
765
+ fill="currentColor"
766
+ aria-hidden="true"
767
+ role="img"
768
+ width="1em"
769
+ height="1em"
770
+ >
771
+ <path
772
+ 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"
773
+ />
774
+ </svg>
624
775
  </span>
625
776
  </button>
626
777
  </div>
@@ -631,44 +782,46 @@ section: components
631
782
  </div>
632
783
  </header>
633
784
  <div class="pf-v6-c-page__sidebar">
634
- <div class="pf-v6-c-page__sidebar-body">
635
- <nav
636
- class="pf-v6-c-nav"
637
- id="jump-links-vertical-expanded-mobile-example-primary-nav"
638
- aria-label="Global"
639
- >
640
- <ul class="pf-v6-c-nav__list" role="list">
641
- <li class="pf-v6-c-nav__item">
642
- <a href="#" class="pf-v6-c-nav__link">
643
- <span class="pf-v6-c-nav__link-text">System panel</span>
644
- </a>
645
- </li>
646
- <li class="pf-v6-c-nav__item">
647
- <a
648
- href="#"
649
- class="pf-v6-c-nav__link pf-m-current"
650
- aria-current="page"
651
- >
652
- <span class="pf-v6-c-nav__link-text">Policy</span>
653
- </a>
654
- </li>
655
- <li class="pf-v6-c-nav__item">
656
- <a href="#" class="pf-v6-c-nav__link">
657
- <span class="pf-v6-c-nav__link-text">Authentication</span>
658
- </a>
659
- </li>
660
- <li class="pf-v6-c-nav__item">
661
- <a href="#" class="pf-v6-c-nav__link">
662
- <span class="pf-v6-c-nav__link-text">Network services</span>
663
- </a>
664
- </li>
665
- <li class="pf-v6-c-nav__item">
666
- <a href="#" class="pf-v6-c-nav__link">
667
- <span class="pf-v6-c-nav__link-text">Server</span>
668
- </a>
669
- </li>
670
- </ul>
671
- </nav>
785
+ <div class="pf-v6-c-page__sidebar-main">
786
+ <div class="pf-v6-c-page__sidebar-body">
787
+ <nav
788
+ class="pf-v6-c-nav"
789
+ id="jump-links-vertical-expanded-mobile-example-primary-nav"
790
+ aria-label="Global"
791
+ >
792
+ <ul class="pf-v6-c-nav__list" role="list">
793
+ <li class="pf-v6-c-nav__item">
794
+ <a href="#" class="pf-v6-c-nav__link">
795
+ <span class="pf-v6-c-nav__link-text">System panel</span>
796
+ </a>
797
+ </li>
798
+ <li class="pf-v6-c-nav__item">
799
+ <a
800
+ href="#"
801
+ class="pf-v6-c-nav__link pf-m-current"
802
+ aria-current="page"
803
+ >
804
+ <span class="pf-v6-c-nav__link-text">Policy</span>
805
+ </a>
806
+ </li>
807
+ <li class="pf-v6-c-nav__item">
808
+ <a href="#" class="pf-v6-c-nav__link">
809
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
810
+ </a>
811
+ </li>
812
+ <li class="pf-v6-c-nav__item">
813
+ <a href="#" class="pf-v6-c-nav__link">
814
+ <span class="pf-v6-c-nav__link-text">Network services</span>
815
+ </a>
816
+ </li>
817
+ <li class="pf-v6-c-nav__item">
818
+ <a href="#" class="pf-v6-c-nav__link">
819
+ <span class="pf-v6-c-nav__link-text">Server</span>
820
+ </a>
821
+ </li>
822
+ </ul>
823
+ </nav>
824
+ </div>
672
825
  </div>
673
826
  </div>
674
827
  <div class="pf-v6-c-page__main-container" tabindex="-1">
@@ -686,21 +839,57 @@ section: components
686
839
  </li>
687
840
  <li class="pf-v6-c-breadcrumb__item">
688
841
  <span class="pf-v6-c-breadcrumb__item-divider">
689
- <i class="fas fa-angle-right" aria-hidden="true"></i>
842
+ <svg
843
+ class="pf-v6-svg"
844
+ viewBox="0 0 20 20"
845
+ fill="currentColor"
846
+ aria-hidden="true"
847
+ role="img"
848
+ width="1em"
849
+ height="1em"
850
+ >
851
+ <path
852
+ 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"
853
+ />
854
+ </svg>
690
855
  </span>
691
856
 
692
857
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
693
858
  </li>
694
859
  <li class="pf-v6-c-breadcrumb__item">
695
860
  <span class="pf-v6-c-breadcrumb__item-divider">
696
- <i class="fas fa-angle-right" aria-hidden="true"></i>
861
+ <svg
862
+ class="pf-v6-svg"
863
+ viewBox="0 0 20 20"
864
+ fill="currentColor"
865
+ aria-hidden="true"
866
+ role="img"
867
+ width="1em"
868
+ height="1em"
869
+ >
870
+ <path
871
+ 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"
872
+ />
873
+ </svg>
697
874
  </span>
698
875
 
699
876
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
700
877
  </li>
701
878
  <li class="pf-v6-c-breadcrumb__item">
702
879
  <span class="pf-v6-c-breadcrumb__item-divider">
703
- <i class="fas fa-angle-right" 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="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"
891
+ />
892
+ </svg>
704
893
  </span>
705
894
 
706
895
  <a
@@ -713,9 +902,15 @@ section: components
713
902
  </nav>
714
903
  </div>
715
904
  </section>
716
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
905
+ <section
906
+ class="pf-v6-c-page__main-section pf-m-limit-width"
907
+ aria-labelledby="main-title"
908
+ >
717
909
  <div class="pf-v6-c-page__main-body">
718
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
910
+ <h1
911
+ class="pf-v6-c-content--h1 pf-m-page-title"
912
+ id="main-title"
913
+ >Main title</h1>
719
914
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
720
915
  </div>
721
916
  </section>
@@ -738,10 +933,19 @@ section: components
738
933
  >
739
934
  <span class="pf-v6-c-button__icon pf-m-start">
740
935
  <span class="pf-v6-c-jump-links__toggle-icon">
741
- <i
742
- class="fas fa-angle-right"
936
+ <svg
937
+ class="pf-v6-svg"
938
+ viewBox="0 0 20 20"
939
+ fill="currentColor"
743
940
  aria-hidden="true"
744
- ></i>
941
+ role="img"
942
+ width="1em"
943
+ height="1em"
944
+ >
945
+ <path
946
+ 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"
947
+ />
948
+ </svg>
745
949
  </span>
746
950
  </span>
747
951
  <span class="pf-v6-c-button__text">Jump to section</span>
@@ -883,9 +1087,10 @@ section: components
883
1087
  <span class="pf-v6-c-button__text">Skip to content</span>
884
1088
  </a>
885
1089
  </div>
1090
+
886
1091
  <header
887
1092
  class="pf-v6-c-masthead"
888
- id="jump-links-vertical-toggle-text-mobile-example-masthead"
1093
+ id="jump-links-vertical-toggle-text-mobile-example-docked"
889
1094
  >
890
1095
  <div class="pf-v6-c-masthead__main">
891
1096
  <span class="pf-v6-c-masthead__toggle">
@@ -928,7 +1133,7 @@ section: components
928
1133
  y1="2.25860997e-13%"
929
1134
  x2="32%"
930
1135
  y2="100%"
931
- id="linearGradient-jump-links-vertical-toggle-text-mobile-example-masthead"
1136
+ id="linearGradient-jump-links-vertical-toggle-text-mobile-example-docked"
932
1137
  >
933
1138
  <stop stop-color="#2B9AF3" offset="0%" />
934
1139
  <stop
@@ -982,11 +1187,11 @@ section: components
982
1187
  />
983
1188
  <path
984
1189
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
985
- fill="url(#linearGradient-jump-links-vertical-toggle-text-mobile-example-masthead)"
1190
+ fill="url(#linearGradient-jump-links-vertical-toggle-text-mobile-example-docked)"
986
1191
  />
987
1192
  <path
988
1193
  d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z"
989
- fill="url(#linearGradient-jump-links-vertical-toggle-text-mobile-example-masthead)"
1194
+ fill="url(#linearGradient-jump-links-vertical-toggle-text-mobile-example-docked)"
990
1195
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
991
1196
  />
992
1197
  </g>
@@ -998,7 +1203,7 @@ section: components
998
1203
  <div class="pf-v6-c-masthead__content">
999
1204
  <div
1000
1205
  class="pf-v6-c-toolbar pf-m-static"
1001
- id="jump-links-vertical-toggle-text-mobile-example-masthead-toolbar"
1206
+ id="jump-links-vertical-toggle-text-mobile-example-docked-toolbar"
1002
1207
  >
1003
1208
  <div class="pf-v6-c-toolbar__content">
1004
1209
  <div class="pf-v6-c-toolbar__content-section">
@@ -1016,7 +1221,19 @@ section: components
1016
1221
  aria-label="Application launcher"
1017
1222
  >
1018
1223
  <span class="pf-v6-c-menu-toggle__icon">
1019
- <i class="fas fa-th" aria-hidden="true"></i>
1224
+ <svg
1225
+ class="pf-v6-svg"
1226
+ viewBox="0 0 512 512"
1227
+ fill="currentColor"
1228
+ aria-hidden="true"
1229
+ role="img"
1230
+ width="1em"
1231
+ height="1em"
1232
+ >
1233
+ <path
1234
+ d="M149.333 56v80c0 13.255-10.745 24-24 24H24c-13.255 0-24-10.745-24-24V56c0-13.255 10.745-24 24-24h101.333c13.255 0 24 10.745 24 24zm181.334 240v-80c0-13.255-10.745-24-24-24H205.333c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24h101.333c13.256 0 24.001-10.745 24.001-24zm32-240v80c0 13.255 10.745 24 24 24H488c13.255 0 24-10.745 24-24V56c0-13.255-10.745-24-24-24H386.667c-13.255 0-24 10.745-24 24zm-32 80V56c0-13.255-10.745-24-24-24H205.333c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24h101.333c13.256 0 24.001-10.745 24.001-24zm-205.334 56H24c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24h101.333c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24zM0 376v80c0 13.255 10.745 24 24 24h101.333c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H24c-13.255 0-24 10.745-24 24zm386.667-56H488c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H386.667c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24zm0 160H488c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H386.667c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24zM181.333 376v80c0 13.255 10.745 24 24 24h101.333c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H205.333c-13.255 0-24 10.745-24 24z"
1235
+ />
1236
+ </svg>
1020
1237
  </span>
1021
1238
  </button>
1022
1239
  </div>
@@ -1028,7 +1245,19 @@ section: components
1028
1245
  aria-label="Settings"
1029
1246
  >
1030
1247
  <span class="pf-v6-c-menu-toggle__icon">
1031
- <i class="fas fa-cog" aria-hidden="true"></i>
1248
+ <svg
1249
+ class="pf-v6-svg"
1250
+ viewBox="0 0 32 32"
1251
+ fill="currentColor"
1252
+ aria-hidden="true"
1253
+ role="img"
1254
+ width="1em"
1255
+ height="1em"
1256
+ >
1257
+ <path
1258
+ 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"
1259
+ />
1260
+ </svg>
1032
1261
  </span>
1033
1262
  </button>
1034
1263
  </div>
@@ -1040,7 +1269,19 @@ section: components
1040
1269
  aria-label="Help"
1041
1270
  >
1042
1271
  <span class="pf-v6-c-menu-toggle__icon">
1043
- <i class="fas fa-question-circle" aria-hidden="true"></i>
1272
+ <svg
1273
+ class="pf-v6-svg"
1274
+ viewBox="0 0 512 512"
1275
+ fill="currentColor"
1276
+ aria-hidden="true"
1277
+ role="img"
1278
+ width="1em"
1279
+ height="1em"
1280
+ >
1281
+ <path
1282
+ d="M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zM262.655 90c-54.497 0-89.255 22.957-116.549 63.758-3.536 5.286-2.353 12.415 2.715 16.258l34.699 26.31c5.205 3.947 12.621 3.008 16.665-2.122 17.864-22.658 30.113-35.797 57.303-35.797 20.429 0 45.698 13.148 45.698 32.958 0 14.976-12.363 22.667-32.534 33.976C247.128 238.528 216 254.941 216 296v4c0 6.627 5.373 12 12 12h56c6.627 0 12-5.373 12-12v-1.333c0-28.462 83.186-29.647 83.186-106.667 0-58.002-60.165-102-116.531-102zM256 338c-25.365 0-46 20.635-46 46 0 25.364 20.635 46 46 46s46-20.636 46-46c0-25.365-20.635-46-46-46z"
1283
+ />
1284
+ </svg>
1044
1285
  </span>
1045
1286
  </button>
1046
1287
  </div>
@@ -1054,7 +1295,19 @@ section: components
1054
1295
  aria-label="Actions"
1055
1296
  >
1056
1297
  <span class="pf-v6-c-menu-toggle__icon">
1057
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1298
+ <svg
1299
+ class="pf-v6-svg"
1300
+ viewBox="0 0 32 32"
1301
+ fill="currentColor"
1302
+ aria-hidden="true"
1303
+ role="img"
1304
+ width="1em"
1305
+ height="1em"
1306
+ >
1307
+ <path
1308
+ 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"
1309
+ />
1310
+ </svg>
1058
1311
  </span>
1059
1312
  </button>
1060
1313
  </div>
@@ -1065,44 +1318,46 @@ section: components
1065
1318
  </div>
1066
1319
  </header>
1067
1320
  <div class="pf-v6-c-page__sidebar">
1068
- <div class="pf-v6-c-page__sidebar-body">
1069
- <nav
1070
- class="pf-v6-c-nav"
1071
- id="jump-links-vertical-toggle-text-mobile-example-primary-nav"
1072
- aria-label="Global"
1073
- >
1074
- <ul class="pf-v6-c-nav__list" role="list">
1075
- <li class="pf-v6-c-nav__item">
1076
- <a href="#" class="pf-v6-c-nav__link">
1077
- <span class="pf-v6-c-nav__link-text">System panel</span>
1078
- </a>
1079
- </li>
1080
- <li class="pf-v6-c-nav__item">
1081
- <a
1082
- href="#"
1083
- class="pf-v6-c-nav__link pf-m-current"
1084
- aria-current="page"
1085
- >
1086
- <span class="pf-v6-c-nav__link-text">Policy</span>
1087
- </a>
1088
- </li>
1089
- <li class="pf-v6-c-nav__item">
1090
- <a href="#" class="pf-v6-c-nav__link">
1091
- <span class="pf-v6-c-nav__link-text">Authentication</span>
1092
- </a>
1093
- </li>
1094
- <li class="pf-v6-c-nav__item">
1095
- <a href="#" class="pf-v6-c-nav__link">
1096
- <span class="pf-v6-c-nav__link-text">Network services</span>
1097
- </a>
1098
- </li>
1099
- <li class="pf-v6-c-nav__item">
1100
- <a href="#" class="pf-v6-c-nav__link">
1101
- <span class="pf-v6-c-nav__link-text">Server</span>
1102
- </a>
1103
- </li>
1104
- </ul>
1105
- </nav>
1321
+ <div class="pf-v6-c-page__sidebar-main">
1322
+ <div class="pf-v6-c-page__sidebar-body">
1323
+ <nav
1324
+ class="pf-v6-c-nav"
1325
+ id="jump-links-vertical-toggle-text-mobile-example-primary-nav"
1326
+ aria-label="Global"
1327
+ >
1328
+ <ul class="pf-v6-c-nav__list" role="list">
1329
+ <li class="pf-v6-c-nav__item">
1330
+ <a href="#" class="pf-v6-c-nav__link">
1331
+ <span class="pf-v6-c-nav__link-text">System panel</span>
1332
+ </a>
1333
+ </li>
1334
+ <li class="pf-v6-c-nav__item">
1335
+ <a
1336
+ href="#"
1337
+ class="pf-v6-c-nav__link pf-m-current"
1338
+ aria-current="page"
1339
+ >
1340
+ <span class="pf-v6-c-nav__link-text">Policy</span>
1341
+ </a>
1342
+ </li>
1343
+ <li class="pf-v6-c-nav__item">
1344
+ <a href="#" class="pf-v6-c-nav__link">
1345
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
1346
+ </a>
1347
+ </li>
1348
+ <li class="pf-v6-c-nav__item">
1349
+ <a href="#" class="pf-v6-c-nav__link">
1350
+ <span class="pf-v6-c-nav__link-text">Network services</span>
1351
+ </a>
1352
+ </li>
1353
+ <li class="pf-v6-c-nav__item">
1354
+ <a href="#" class="pf-v6-c-nav__link">
1355
+ <span class="pf-v6-c-nav__link-text">Server</span>
1356
+ </a>
1357
+ </li>
1358
+ </ul>
1359
+ </nav>
1360
+ </div>
1106
1361
  </div>
1107
1362
  </div>
1108
1363
  <div class="pf-v6-c-page__main-container" tabindex="-1">
@@ -1120,21 +1375,57 @@ section: components
1120
1375
  </li>
1121
1376
  <li class="pf-v6-c-breadcrumb__item">
1122
1377
  <span class="pf-v6-c-breadcrumb__item-divider">
1123
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1378
+ <svg
1379
+ class="pf-v6-svg"
1380
+ viewBox="0 0 20 20"
1381
+ fill="currentColor"
1382
+ aria-hidden="true"
1383
+ role="img"
1384
+ width="1em"
1385
+ height="1em"
1386
+ >
1387
+ <path
1388
+ 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"
1389
+ />
1390
+ </svg>
1124
1391
  </span>
1125
1392
 
1126
1393
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1127
1394
  </li>
1128
1395
  <li class="pf-v6-c-breadcrumb__item">
1129
1396
  <span class="pf-v6-c-breadcrumb__item-divider">
1130
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1397
+ <svg
1398
+ class="pf-v6-svg"
1399
+ viewBox="0 0 20 20"
1400
+ fill="currentColor"
1401
+ aria-hidden="true"
1402
+ role="img"
1403
+ width="1em"
1404
+ height="1em"
1405
+ >
1406
+ <path
1407
+ 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"
1408
+ />
1409
+ </svg>
1131
1410
  </span>
1132
1411
 
1133
1412
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1134
1413
  </li>
1135
1414
  <li class="pf-v6-c-breadcrumb__item">
1136
1415
  <span class="pf-v6-c-breadcrumb__item-divider">
1137
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1416
+ <svg
1417
+ class="pf-v6-svg"
1418
+ viewBox="0 0 20 20"
1419
+ fill="currentColor"
1420
+ aria-hidden="true"
1421
+ role="img"
1422
+ width="1em"
1423
+ height="1em"
1424
+ >
1425
+ <path
1426
+ 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"
1427
+ />
1428
+ </svg>
1138
1429
  </span>
1139
1430
 
1140
1431
  <a
@@ -1147,9 +1438,15 @@ section: components
1147
1438
  </nav>
1148
1439
  </div>
1149
1440
  </section>
1150
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
1441
+ <section
1442
+ class="pf-v6-c-page__main-section pf-m-limit-width"
1443
+ aria-labelledby="main-title"
1444
+ >
1151
1445
  <div class="pf-v6-c-page__main-body">
1152
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
1446
+ <h1
1447
+ class="pf-v6-c-content--h1 pf-m-page-title"
1448
+ id="main-title"
1449
+ >Main title</h1>
1153
1450
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
1154
1451
  </div>
1155
1452
  </section>
@@ -1172,10 +1469,19 @@ section: components
1172
1469
  >
1173
1470
  <span class="pf-v6-c-button__icon pf-m-start">
1174
1471
  <span class="pf-v6-c-jump-links__toggle-icon">
1175
- <i
1176
- class="fas fa-angle-right"
1472
+ <svg
1473
+ class="pf-v6-svg"
1474
+ viewBox="0 0 20 20"
1475
+ fill="currentColor"
1177
1476
  aria-hidden="true"
1178
- ></i>
1477
+ role="img"
1478
+ width="1em"
1479
+ height="1em"
1480
+ >
1481
+ <path
1482
+ 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"
1483
+ />
1484
+ </svg>
1179
1485
  </span>
1180
1486
  </span>
1181
1487
  <span class="pf-v6-c-button__text">Jump to section</span>
@@ -1317,7 +1623,8 @@ section: components
1317
1623
  <span class="pf-v6-c-button__text">Skip to content</span>
1318
1624
  </a>
1319
1625
  </div>
1320
- <header class="pf-v6-c-masthead" id="jump-links-horizontal-example-masthead">
1626
+
1627
+ <header class="pf-v6-c-masthead" id="jump-links-horizontal-example-docked">
1321
1628
  <div class="pf-v6-c-masthead__main">
1322
1629
  <span class="pf-v6-c-masthead__toggle">
1323
1630
  <button
@@ -1359,7 +1666,7 @@ section: components
1359
1666
  y1="2.25860997e-13%"
1360
1667
  x2="32%"
1361
1668
  y2="100%"
1362
- id="linearGradient-jump-links-horizontal-example-masthead"
1669
+ id="linearGradient-jump-links-horizontal-example-docked"
1363
1670
  >
1364
1671
  <stop stop-color="#2B9AF3" offset="0%" />
1365
1672
  <stop
@@ -1413,11 +1720,11 @@ section: components
1413
1720
  />
1414
1721
  <path
1415
1722
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
1416
- fill="url(#linearGradient-jump-links-horizontal-example-masthead)"
1723
+ fill="url(#linearGradient-jump-links-horizontal-example-docked)"
1417
1724
  />
1418
1725
  <path
1419
1726
  d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z"
1420
- fill="url(#linearGradient-jump-links-horizontal-example-masthead)"
1727
+ fill="url(#linearGradient-jump-links-horizontal-example-docked)"
1421
1728
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
1422
1729
  />
1423
1730
  </g>
@@ -1429,7 +1736,7 @@ section: components
1429
1736
  <div class="pf-v6-c-masthead__content">
1430
1737
  <div
1431
1738
  class="pf-v6-c-toolbar pf-m-static"
1432
- id="jump-links-horizontal-example-masthead-toolbar"
1739
+ id="jump-links-horizontal-example-docked-toolbar"
1433
1740
  >
1434
1741
  <div class="pf-v6-c-toolbar__content">
1435
1742
  <div class="pf-v6-c-toolbar__content-section">
@@ -1447,7 +1754,19 @@ section: components
1447
1754
  aria-label="Application launcher"
1448
1755
  >
1449
1756
  <span class="pf-v6-c-menu-toggle__icon">
1450
- <i class="fas fa-th" aria-hidden="true"></i>
1757
+ <svg
1758
+ class="pf-v6-svg"
1759
+ viewBox="0 0 512 512"
1760
+ fill="currentColor"
1761
+ aria-hidden="true"
1762
+ role="img"
1763
+ width="1em"
1764
+ height="1em"
1765
+ >
1766
+ <path
1767
+ d="M149.333 56v80c0 13.255-10.745 24-24 24H24c-13.255 0-24-10.745-24-24V56c0-13.255 10.745-24 24-24h101.333c13.255 0 24 10.745 24 24zm181.334 240v-80c0-13.255-10.745-24-24-24H205.333c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24h101.333c13.256 0 24.001-10.745 24.001-24zm32-240v80c0 13.255 10.745 24 24 24H488c13.255 0 24-10.745 24-24V56c0-13.255-10.745-24-24-24H386.667c-13.255 0-24 10.745-24 24zm-32 80V56c0-13.255-10.745-24-24-24H205.333c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24h101.333c13.256 0 24.001-10.745 24.001-24zm-205.334 56H24c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24h101.333c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24zM0 376v80c0 13.255 10.745 24 24 24h101.333c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H24c-13.255 0-24 10.745-24 24zm386.667-56H488c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H386.667c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24zm0 160H488c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H386.667c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24zM181.333 376v80c0 13.255 10.745 24 24 24h101.333c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H205.333c-13.255 0-24 10.745-24 24z"
1768
+ />
1769
+ </svg>
1451
1770
  </span>
1452
1771
  </button>
1453
1772
  </div>
@@ -1459,7 +1778,19 @@ section: components
1459
1778
  aria-label="Settings"
1460
1779
  >
1461
1780
  <span class="pf-v6-c-menu-toggle__icon">
1462
- <i class="fas fa-cog" aria-hidden="true"></i>
1781
+ <svg
1782
+ class="pf-v6-svg"
1783
+ viewBox="0 0 32 32"
1784
+ fill="currentColor"
1785
+ aria-hidden="true"
1786
+ role="img"
1787
+ width="1em"
1788
+ height="1em"
1789
+ >
1790
+ <path
1791
+ 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"
1792
+ />
1793
+ </svg>
1463
1794
  </span>
1464
1795
  </button>
1465
1796
  </div>
@@ -1471,7 +1802,19 @@ section: components
1471
1802
  aria-label="Help"
1472
1803
  >
1473
1804
  <span class="pf-v6-c-menu-toggle__icon">
1474
- <i class="fas fa-question-circle" aria-hidden="true"></i>
1805
+ <svg
1806
+ class="pf-v6-svg"
1807
+ viewBox="0 0 512 512"
1808
+ fill="currentColor"
1809
+ aria-hidden="true"
1810
+ role="img"
1811
+ width="1em"
1812
+ height="1em"
1813
+ >
1814
+ <path
1815
+ d="M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zM262.655 90c-54.497 0-89.255 22.957-116.549 63.758-3.536 5.286-2.353 12.415 2.715 16.258l34.699 26.31c5.205 3.947 12.621 3.008 16.665-2.122 17.864-22.658 30.113-35.797 57.303-35.797 20.429 0 45.698 13.148 45.698 32.958 0 14.976-12.363 22.667-32.534 33.976C247.128 238.528 216 254.941 216 296v4c0 6.627 5.373 12 12 12h56c6.627 0 12-5.373 12-12v-1.333c0-28.462 83.186-29.647 83.186-106.667 0-58.002-60.165-102-116.531-102zM256 338c-25.365 0-46 20.635-46 46 0 25.364 20.635 46 46 46s46-20.636 46-46c0-25.365-20.635-46-46-46z"
1816
+ />
1817
+ </svg>
1475
1818
  </span>
1476
1819
  </button>
1477
1820
  </div>
@@ -1485,7 +1828,19 @@ section: components
1485
1828
  aria-label="Actions"
1486
1829
  >
1487
1830
  <span class="pf-v6-c-menu-toggle__icon">
1488
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1831
+ <svg
1832
+ class="pf-v6-svg"
1833
+ viewBox="0 0 32 32"
1834
+ fill="currentColor"
1835
+ aria-hidden="true"
1836
+ role="img"
1837
+ width="1em"
1838
+ height="1em"
1839
+ >
1840
+ <path
1841
+ 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"
1842
+ />
1843
+ </svg>
1489
1844
  </span>
1490
1845
  </button>
1491
1846
  </div>
@@ -1496,44 +1851,46 @@ section: components
1496
1851
  </div>
1497
1852
  </header>
1498
1853
  <div class="pf-v6-c-page__sidebar">
1499
- <div class="pf-v6-c-page__sidebar-body">
1500
- <nav
1501
- class="pf-v6-c-nav"
1502
- id="jump-links-horizontal-example-primary-nav"
1503
- aria-label="Global"
1504
- >
1505
- <ul class="pf-v6-c-nav__list" role="list">
1506
- <li class="pf-v6-c-nav__item">
1507
- <a href="#" class="pf-v6-c-nav__link">
1508
- <span class="pf-v6-c-nav__link-text">System panel</span>
1509
- </a>
1510
- </li>
1511
- <li class="pf-v6-c-nav__item">
1512
- <a
1513
- href="#"
1514
- class="pf-v6-c-nav__link pf-m-current"
1515
- aria-current="page"
1516
- >
1517
- <span class="pf-v6-c-nav__link-text">Policy</span>
1518
- </a>
1519
- </li>
1520
- <li class="pf-v6-c-nav__item">
1521
- <a href="#" class="pf-v6-c-nav__link">
1522
- <span class="pf-v6-c-nav__link-text">Authentication</span>
1523
- </a>
1524
- </li>
1525
- <li class="pf-v6-c-nav__item">
1526
- <a href="#" class="pf-v6-c-nav__link">
1527
- <span class="pf-v6-c-nav__link-text">Network services</span>
1528
- </a>
1529
- </li>
1530
- <li class="pf-v6-c-nav__item">
1531
- <a href="#" class="pf-v6-c-nav__link">
1532
- <span class="pf-v6-c-nav__link-text">Server</span>
1533
- </a>
1534
- </li>
1535
- </ul>
1536
- </nav>
1854
+ <div class="pf-v6-c-page__sidebar-main">
1855
+ <div class="pf-v6-c-page__sidebar-body">
1856
+ <nav
1857
+ class="pf-v6-c-nav"
1858
+ id="jump-links-horizontal-example-primary-nav"
1859
+ aria-label="Global"
1860
+ >
1861
+ <ul class="pf-v6-c-nav__list" role="list">
1862
+ <li class="pf-v6-c-nav__item">
1863
+ <a href="#" class="pf-v6-c-nav__link">
1864
+ <span class="pf-v6-c-nav__link-text">System panel</span>
1865
+ </a>
1866
+ </li>
1867
+ <li class="pf-v6-c-nav__item">
1868
+ <a
1869
+ href="#"
1870
+ class="pf-v6-c-nav__link pf-m-current"
1871
+ aria-current="page"
1872
+ >
1873
+ <span class="pf-v6-c-nav__link-text">Policy</span>
1874
+ </a>
1875
+ </li>
1876
+ <li class="pf-v6-c-nav__item">
1877
+ <a href="#" class="pf-v6-c-nav__link">
1878
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
1879
+ </a>
1880
+ </li>
1881
+ <li class="pf-v6-c-nav__item">
1882
+ <a href="#" class="pf-v6-c-nav__link">
1883
+ <span class="pf-v6-c-nav__link-text">Network services</span>
1884
+ </a>
1885
+ </li>
1886
+ <li class="pf-v6-c-nav__item">
1887
+ <a href="#" class="pf-v6-c-nav__link">
1888
+ <span class="pf-v6-c-nav__link-text">Server</span>
1889
+ </a>
1890
+ </li>
1891
+ </ul>
1892
+ </nav>
1893
+ </div>
1537
1894
  </div>
1538
1895
  </div>
1539
1896
  <div class="pf-v6-c-page__main-container" tabindex="-1">
@@ -1551,21 +1908,57 @@ section: components
1551
1908
  </li>
1552
1909
  <li class="pf-v6-c-breadcrumb__item">
1553
1910
  <span class="pf-v6-c-breadcrumb__item-divider">
1554
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1911
+ <svg
1912
+ class="pf-v6-svg"
1913
+ viewBox="0 0 20 20"
1914
+ fill="currentColor"
1915
+ aria-hidden="true"
1916
+ role="img"
1917
+ width="1em"
1918
+ height="1em"
1919
+ >
1920
+ <path
1921
+ 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"
1922
+ />
1923
+ </svg>
1555
1924
  </span>
1556
1925
 
1557
1926
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1558
1927
  </li>
1559
1928
  <li class="pf-v6-c-breadcrumb__item">
1560
1929
  <span class="pf-v6-c-breadcrumb__item-divider">
1561
- <i class="fas fa-angle-right" aria-hidden="true"></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>
1562
1943
  </span>
1563
1944
 
1564
1945
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1565
1946
  </li>
1566
1947
  <li class="pf-v6-c-breadcrumb__item">
1567
1948
  <span class="pf-v6-c-breadcrumb__item-divider">
1568
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1949
+ <svg
1950
+ class="pf-v6-svg"
1951
+ viewBox="0 0 20 20"
1952
+ fill="currentColor"
1953
+ aria-hidden="true"
1954
+ role="img"
1955
+ width="1em"
1956
+ height="1em"
1957
+ >
1958
+ <path
1959
+ 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"
1960
+ />
1961
+ </svg>
1569
1962
  </span>
1570
1963
 
1571
1964
  <a
@@ -1578,9 +1971,15 @@ section: components
1578
1971
  </nav>
1579
1972
  </div>
1580
1973
  </section>
1581
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
1974
+ <section
1975
+ class="pf-v6-c-page__main-section pf-m-limit-width"
1976
+ aria-labelledby="main-title"
1977
+ >
1582
1978
  <div class="pf-v6-c-page__main-body">
1583
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
1979
+ <h1
1980
+ class="pf-v6-c-content--h1 pf-m-page-title"
1981
+ id="main-title"
1982
+ >Main title</h1>
1584
1983
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
1585
1984
  </div>
1586
1985
  </section>
@@ -1694,7 +2093,8 @@ section: components
1694
2093
  <span class="pf-v6-c-button__text">Skip to content</span>
1695
2094
  </a>
1696
2095
  </div>
1697
- <header class="pf-v6-c-masthead" id="jump-links-drawer-masthead">
2096
+
2097
+ <header class="pf-v6-c-masthead" id="jump-links-drawer-docked">
1698
2098
  <div class="pf-v6-c-masthead__main">
1699
2099
  <span class="pf-v6-c-masthead__toggle">
1700
2100
  <button
@@ -1736,7 +2136,7 @@ section: components
1736
2136
  y1="2.25860997e-13%"
1737
2137
  x2="32%"
1738
2138
  y2="100%"
1739
- id="linearGradient-jump-links-drawer-masthead"
2139
+ id="linearGradient-jump-links-drawer-docked"
1740
2140
  >
1741
2141
  <stop stop-color="#2B9AF3" offset="0%" />
1742
2142
  <stop
@@ -1790,11 +2190,11 @@ section: components
1790
2190
  />
1791
2191
  <path
1792
2192
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
1793
- fill="url(#linearGradient-jump-links-drawer-masthead)"
2193
+ fill="url(#linearGradient-jump-links-drawer-docked)"
1794
2194
  />
1795
2195
  <path
1796
2196
  d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z"
1797
- fill="url(#linearGradient-jump-links-drawer-masthead)"
2197
+ fill="url(#linearGradient-jump-links-drawer-docked)"
1798
2198
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
1799
2199
  />
1800
2200
  </g>
@@ -1806,7 +2206,7 @@ section: components
1806
2206
  <div class="pf-v6-c-masthead__content">
1807
2207
  <div
1808
2208
  class="pf-v6-c-toolbar pf-m-static"
1809
- id="jump-links-drawer-masthead-toolbar"
2209
+ id="jump-links-drawer-docked-toolbar"
1810
2210
  >
1811
2211
  <div class="pf-v6-c-toolbar__content">
1812
2212
  <div class="pf-v6-c-toolbar__content-section">
@@ -1824,7 +2224,19 @@ section: components
1824
2224
  aria-label="Application launcher"
1825
2225
  >
1826
2226
  <span class="pf-v6-c-menu-toggle__icon">
1827
- <i class="fas fa-th" aria-hidden="true"></i>
2227
+ <svg
2228
+ class="pf-v6-svg"
2229
+ viewBox="0 0 512 512"
2230
+ fill="currentColor"
2231
+ aria-hidden="true"
2232
+ role="img"
2233
+ width="1em"
2234
+ height="1em"
2235
+ >
2236
+ <path
2237
+ d="M149.333 56v80c0 13.255-10.745 24-24 24H24c-13.255 0-24-10.745-24-24V56c0-13.255 10.745-24 24-24h101.333c13.255 0 24 10.745 24 24zm181.334 240v-80c0-13.255-10.745-24-24-24H205.333c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24h101.333c13.256 0 24.001-10.745 24.001-24zm32-240v80c0 13.255 10.745 24 24 24H488c13.255 0 24-10.745 24-24V56c0-13.255-10.745-24-24-24H386.667c-13.255 0-24 10.745-24 24zm-32 80V56c0-13.255-10.745-24-24-24H205.333c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24h101.333c13.256 0 24.001-10.745 24.001-24zm-205.334 56H24c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24h101.333c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24zM0 376v80c0 13.255 10.745 24 24 24h101.333c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H24c-13.255 0-24 10.745-24 24zm386.667-56H488c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H386.667c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24zm0 160H488c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H386.667c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24zM181.333 376v80c0 13.255 10.745 24 24 24h101.333c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H205.333c-13.255 0-24 10.745-24 24z"
2238
+ />
2239
+ </svg>
1828
2240
  </span>
1829
2241
  </button>
1830
2242
  </div>
@@ -1836,7 +2248,19 @@ section: components
1836
2248
  aria-label="Settings"
1837
2249
  >
1838
2250
  <span class="pf-v6-c-menu-toggle__icon">
1839
- <i class="fas fa-cog" aria-hidden="true"></i>
2251
+ <svg
2252
+ class="pf-v6-svg"
2253
+ viewBox="0 0 32 32"
2254
+ fill="currentColor"
2255
+ aria-hidden="true"
2256
+ role="img"
2257
+ width="1em"
2258
+ height="1em"
2259
+ >
2260
+ <path
2261
+ 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"
2262
+ />
2263
+ </svg>
1840
2264
  </span>
1841
2265
  </button>
1842
2266
  </div>
@@ -1848,7 +2272,19 @@ section: components
1848
2272
  aria-label="Help"
1849
2273
  >
1850
2274
  <span class="pf-v6-c-menu-toggle__icon">
1851
- <i class="fas fa-question-circle" aria-hidden="true"></i>
2275
+ <svg
2276
+ class="pf-v6-svg"
2277
+ viewBox="0 0 512 512"
2278
+ fill="currentColor"
2279
+ aria-hidden="true"
2280
+ role="img"
2281
+ width="1em"
2282
+ height="1em"
2283
+ >
2284
+ <path
2285
+ d="M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zM262.655 90c-54.497 0-89.255 22.957-116.549 63.758-3.536 5.286-2.353 12.415 2.715 16.258l34.699 26.31c5.205 3.947 12.621 3.008 16.665-2.122 17.864-22.658 30.113-35.797 57.303-35.797 20.429 0 45.698 13.148 45.698 32.958 0 14.976-12.363 22.667-32.534 33.976C247.128 238.528 216 254.941 216 296v4c0 6.627 5.373 12 12 12h56c6.627 0 12-5.373 12-12v-1.333c0-28.462 83.186-29.647 83.186-106.667 0-58.002-60.165-102-116.531-102zM256 338c-25.365 0-46 20.635-46 46 0 25.364 20.635 46 46 46s46-20.636 46-46c0-25.365-20.635-46-46-46z"
2286
+ />
2287
+ </svg>
1852
2288
  </span>
1853
2289
  </button>
1854
2290
  </div>
@@ -1862,7 +2298,19 @@ section: components
1862
2298
  aria-label="Actions"
1863
2299
  >
1864
2300
  <span class="pf-v6-c-menu-toggle__icon">
1865
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
2301
+ <svg
2302
+ class="pf-v6-svg"
2303
+ viewBox="0 0 32 32"
2304
+ fill="currentColor"
2305
+ aria-hidden="true"
2306
+ role="img"
2307
+ width="1em"
2308
+ height="1em"
2309
+ >
2310
+ <path
2311
+ 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"
2312
+ />
2313
+ </svg>
1866
2314
  </span>
1867
2315
  </button>
1868
2316
  </div>
@@ -1873,44 +2321,46 @@ section: components
1873
2321
  </div>
1874
2322
  </header>
1875
2323
  <div class="pf-v6-c-page__sidebar">
1876
- <div class="pf-v6-c-page__sidebar-body">
1877
- <nav
1878
- class="pf-v6-c-nav"
1879
- id="jump-links-drawer-primary-nav"
1880
- aria-label="Global"
1881
- >
1882
- <ul class="pf-v6-c-nav__list" role="list">
1883
- <li class="pf-v6-c-nav__item">
1884
- <a href="#" class="pf-v6-c-nav__link">
1885
- <span class="pf-v6-c-nav__link-text">System panel</span>
1886
- </a>
1887
- </li>
1888
- <li class="pf-v6-c-nav__item">
1889
- <a
1890
- href="#"
1891
- class="pf-v6-c-nav__link pf-m-current"
1892
- aria-current="page"
1893
- >
1894
- <span class="pf-v6-c-nav__link-text">Policy</span>
1895
- </a>
1896
- </li>
1897
- <li class="pf-v6-c-nav__item">
1898
- <a href="#" class="pf-v6-c-nav__link">
1899
- <span class="pf-v6-c-nav__link-text">Authentication</span>
1900
- </a>
1901
- </li>
1902
- <li class="pf-v6-c-nav__item">
1903
- <a href="#" class="pf-v6-c-nav__link">
1904
- <span class="pf-v6-c-nav__link-text">Network services</span>
1905
- </a>
1906
- </li>
1907
- <li class="pf-v6-c-nav__item">
1908
- <a href="#" class="pf-v6-c-nav__link">
1909
- <span class="pf-v6-c-nav__link-text">Server</span>
1910
- </a>
1911
- </li>
1912
- </ul>
1913
- </nav>
2324
+ <div class="pf-v6-c-page__sidebar-main">
2325
+ <div class="pf-v6-c-page__sidebar-body">
2326
+ <nav
2327
+ class="pf-v6-c-nav"
2328
+ id="jump-links-drawer-primary-nav"
2329
+ aria-label="Global"
2330
+ >
2331
+ <ul class="pf-v6-c-nav__list" role="list">
2332
+ <li class="pf-v6-c-nav__item">
2333
+ <a href="#" class="pf-v6-c-nav__link">
2334
+ <span class="pf-v6-c-nav__link-text">System panel</span>
2335
+ </a>
2336
+ </li>
2337
+ <li class="pf-v6-c-nav__item">
2338
+ <a
2339
+ href="#"
2340
+ class="pf-v6-c-nav__link pf-m-current"
2341
+ aria-current="page"
2342
+ >
2343
+ <span class="pf-v6-c-nav__link-text">Policy</span>
2344
+ </a>
2345
+ </li>
2346
+ <li class="pf-v6-c-nav__item">
2347
+ <a href="#" class="pf-v6-c-nav__link">
2348
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
2349
+ </a>
2350
+ </li>
2351
+ <li class="pf-v6-c-nav__item">
2352
+ <a href="#" class="pf-v6-c-nav__link">
2353
+ <span class="pf-v6-c-nav__link-text">Network services</span>
2354
+ </a>
2355
+ </li>
2356
+ <li class="pf-v6-c-nav__item">
2357
+ <a href="#" class="pf-v6-c-nav__link">
2358
+ <span class="pf-v6-c-nav__link-text">Server</span>
2359
+ </a>
2360
+ </li>
2361
+ </ul>
2362
+ </nav>
2363
+ </div>
1914
2364
  </div>
1915
2365
  </div>
1916
2366
  <div class="pf-v6-c-page__main-container" tabindex="-1">
@@ -1943,10 +2393,19 @@ section: components
1943
2393
  >
1944
2394
  <span class="pf-v6-c-button__icon pf-m-start">
1945
2395
  <span class="pf-v6-c-jump-links__toggle-icon">
1946
- <i
1947
- class="fas fa-angle-right"
2396
+ <svg
2397
+ class="pf-v6-svg"
2398
+ viewBox="0 0 20 20"
2399
+ fill="currentColor"
1948
2400
  aria-hidden="true"
1949
- ></i>
2401
+ role="img"
2402
+ width="1em"
2403
+ height="1em"
2404
+ >
2405
+ <path
2406
+ 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"
2407
+ />
2408
+ </svg>
1950
2409
  </span>
1951
2410
  </span>
1952
2411
  <span
@@ -2085,7 +2544,19 @@ section: components
2085
2544
  aria-label="Close drawer panel"
2086
2545
  >
2087
2546
  <span class="pf-v6-c-button__icon">
2088
- <i class="fas fa-times" aria-hidden="true"></i>
2547
+ <svg
2548
+ class="pf-v6-svg"
2549
+ viewBox="0 0 20 20"
2550
+ fill="currentColor"
2551
+ aria-hidden="true"
2552
+ role="img"
2553
+ width="1em"
2554
+ height="1em"
2555
+ >
2556
+ <path
2557
+ 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"
2558
+ />
2559
+ </svg>
2089
2560
  </span>
2090
2561
  </button>
2091
2562
  </div>
@@ -2116,7 +2587,8 @@ section: components
2116
2587
  <span class="pf-v6-c-button__text">Skip to content</span>
2117
2588
  </a>
2118
2589
  </div>
2119
- <header class="pf-v6-c-masthead" id="jump-links-drawer-expanded-masthead">
2590
+
2591
+ <header class="pf-v6-c-masthead" id="jump-links-drawer-expanded-docked">
2120
2592
  <div class="pf-v6-c-masthead__main">
2121
2593
  <span class="pf-v6-c-masthead__toggle">
2122
2594
  <button
@@ -2158,7 +2630,7 @@ section: components
2158
2630
  y1="2.25860997e-13%"
2159
2631
  x2="32%"
2160
2632
  y2="100%"
2161
- id="linearGradient-jump-links-drawer-expanded-masthead"
2633
+ id="linearGradient-jump-links-drawer-expanded-docked"
2162
2634
  >
2163
2635
  <stop stop-color="#2B9AF3" offset="0%" />
2164
2636
  <stop
@@ -2212,11 +2684,11 @@ section: components
2212
2684
  />
2213
2685
  <path
2214
2686
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
2215
- fill="url(#linearGradient-jump-links-drawer-expanded-masthead)"
2687
+ fill="url(#linearGradient-jump-links-drawer-expanded-docked)"
2216
2688
  />
2217
2689
  <path
2218
2690
  d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z"
2219
- fill="url(#linearGradient-jump-links-drawer-expanded-masthead)"
2691
+ fill="url(#linearGradient-jump-links-drawer-expanded-docked)"
2220
2692
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
2221
2693
  />
2222
2694
  </g>
@@ -2228,7 +2700,7 @@ section: components
2228
2700
  <div class="pf-v6-c-masthead__content">
2229
2701
  <div
2230
2702
  class="pf-v6-c-toolbar pf-m-static"
2231
- id="jump-links-drawer-expanded-masthead-toolbar"
2703
+ id="jump-links-drawer-expanded-docked-toolbar"
2232
2704
  >
2233
2705
  <div class="pf-v6-c-toolbar__content">
2234
2706
  <div class="pf-v6-c-toolbar__content-section">
@@ -2246,7 +2718,19 @@ section: components
2246
2718
  aria-label="Application launcher"
2247
2719
  >
2248
2720
  <span class="pf-v6-c-menu-toggle__icon">
2249
- <i class="fas fa-th" aria-hidden="true"></i>
2721
+ <svg
2722
+ class="pf-v6-svg"
2723
+ viewBox="0 0 512 512"
2724
+ fill="currentColor"
2725
+ aria-hidden="true"
2726
+ role="img"
2727
+ width="1em"
2728
+ height="1em"
2729
+ >
2730
+ <path
2731
+ d="M149.333 56v80c0 13.255-10.745 24-24 24H24c-13.255 0-24-10.745-24-24V56c0-13.255 10.745-24 24-24h101.333c13.255 0 24 10.745 24 24zm181.334 240v-80c0-13.255-10.745-24-24-24H205.333c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24h101.333c13.256 0 24.001-10.745 24.001-24zm32-240v80c0 13.255 10.745 24 24 24H488c13.255 0 24-10.745 24-24V56c0-13.255-10.745-24-24-24H386.667c-13.255 0-24 10.745-24 24zm-32 80V56c0-13.255-10.745-24-24-24H205.333c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24h101.333c13.256 0 24.001-10.745 24.001-24zm-205.334 56H24c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24h101.333c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24zM0 376v80c0 13.255 10.745 24 24 24h101.333c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H24c-13.255 0-24 10.745-24 24zm386.667-56H488c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H386.667c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24zm0 160H488c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H386.667c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24zM181.333 376v80c0 13.255 10.745 24 24 24h101.333c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H205.333c-13.255 0-24 10.745-24 24z"
2732
+ />
2733
+ </svg>
2250
2734
  </span>
2251
2735
  </button>
2252
2736
  </div>
@@ -2258,7 +2742,19 @@ section: components
2258
2742
  aria-label="Settings"
2259
2743
  >
2260
2744
  <span class="pf-v6-c-menu-toggle__icon">
2261
- <i class="fas fa-cog" aria-hidden="true"></i>
2745
+ <svg
2746
+ class="pf-v6-svg"
2747
+ viewBox="0 0 32 32"
2748
+ fill="currentColor"
2749
+ aria-hidden="true"
2750
+ role="img"
2751
+ width="1em"
2752
+ height="1em"
2753
+ >
2754
+ <path
2755
+ 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"
2756
+ />
2757
+ </svg>
2262
2758
  </span>
2263
2759
  </button>
2264
2760
  </div>
@@ -2270,7 +2766,19 @@ section: components
2270
2766
  aria-label="Help"
2271
2767
  >
2272
2768
  <span class="pf-v6-c-menu-toggle__icon">
2273
- <i class="fas fa-question-circle" aria-hidden="true"></i>
2769
+ <svg
2770
+ class="pf-v6-svg"
2771
+ viewBox="0 0 512 512"
2772
+ fill="currentColor"
2773
+ aria-hidden="true"
2774
+ role="img"
2775
+ width="1em"
2776
+ height="1em"
2777
+ >
2778
+ <path
2779
+ d="M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zM262.655 90c-54.497 0-89.255 22.957-116.549 63.758-3.536 5.286-2.353 12.415 2.715 16.258l34.699 26.31c5.205 3.947 12.621 3.008 16.665-2.122 17.864-22.658 30.113-35.797 57.303-35.797 20.429 0 45.698 13.148 45.698 32.958 0 14.976-12.363 22.667-32.534 33.976C247.128 238.528 216 254.941 216 296v4c0 6.627 5.373 12 12 12h56c6.627 0 12-5.373 12-12v-1.333c0-28.462 83.186-29.647 83.186-106.667 0-58.002-60.165-102-116.531-102zM256 338c-25.365 0-46 20.635-46 46 0 25.364 20.635 46 46 46s46-20.636 46-46c0-25.365-20.635-46-46-46z"
2780
+ />
2781
+ </svg>
2274
2782
  </span>
2275
2783
  </button>
2276
2784
  </div>
@@ -2284,7 +2792,19 @@ section: components
2284
2792
  aria-label="Actions"
2285
2793
  >
2286
2794
  <span class="pf-v6-c-menu-toggle__icon">
2287
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
2795
+ <svg
2796
+ class="pf-v6-svg"
2797
+ viewBox="0 0 32 32"
2798
+ fill="currentColor"
2799
+ aria-hidden="true"
2800
+ role="img"
2801
+ width="1em"
2802
+ height="1em"
2803
+ >
2804
+ <path
2805
+ 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"
2806
+ />
2807
+ </svg>
2288
2808
  </span>
2289
2809
  </button>
2290
2810
  </div>
@@ -2295,44 +2815,46 @@ section: components
2295
2815
  </div>
2296
2816
  </header>
2297
2817
  <div class="pf-v6-c-page__sidebar">
2298
- <div class="pf-v6-c-page__sidebar-body">
2299
- <nav
2300
- class="pf-v6-c-nav"
2301
- id="jump-links-drawer-expanded-primary-nav"
2302
- aria-label="Global"
2303
- >
2304
- <ul class="pf-v6-c-nav__list" role="list">
2305
- <li class="pf-v6-c-nav__item">
2306
- <a href="#" class="pf-v6-c-nav__link">
2307
- <span class="pf-v6-c-nav__link-text">System panel</span>
2308
- </a>
2309
- </li>
2310
- <li class="pf-v6-c-nav__item">
2311
- <a
2312
- href="#"
2313
- class="pf-v6-c-nav__link pf-m-current"
2314
- aria-current="page"
2315
- >
2316
- <span class="pf-v6-c-nav__link-text">Policy</span>
2317
- </a>
2318
- </li>
2319
- <li class="pf-v6-c-nav__item">
2320
- <a href="#" class="pf-v6-c-nav__link">
2321
- <span class="pf-v6-c-nav__link-text">Authentication</span>
2322
- </a>
2323
- </li>
2324
- <li class="pf-v6-c-nav__item">
2325
- <a href="#" class="pf-v6-c-nav__link">
2326
- <span class="pf-v6-c-nav__link-text">Network services</span>
2327
- </a>
2328
- </li>
2329
- <li class="pf-v6-c-nav__item">
2330
- <a href="#" class="pf-v6-c-nav__link">
2331
- <span class="pf-v6-c-nav__link-text">Server</span>
2332
- </a>
2333
- </li>
2334
- </ul>
2335
- </nav>
2818
+ <div class="pf-v6-c-page__sidebar-main">
2819
+ <div class="pf-v6-c-page__sidebar-body">
2820
+ <nav
2821
+ class="pf-v6-c-nav"
2822
+ id="jump-links-drawer-expanded-primary-nav"
2823
+ aria-label="Global"
2824
+ >
2825
+ <ul class="pf-v6-c-nav__list" role="list">
2826
+ <li class="pf-v6-c-nav__item">
2827
+ <a href="#" class="pf-v6-c-nav__link">
2828
+ <span class="pf-v6-c-nav__link-text">System panel</span>
2829
+ </a>
2830
+ </li>
2831
+ <li class="pf-v6-c-nav__item">
2832
+ <a
2833
+ href="#"
2834
+ class="pf-v6-c-nav__link pf-m-current"
2835
+ aria-current="page"
2836
+ >
2837
+ <span class="pf-v6-c-nav__link-text">Policy</span>
2838
+ </a>
2839
+ </li>
2840
+ <li class="pf-v6-c-nav__item">
2841
+ <a href="#" class="pf-v6-c-nav__link">
2842
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
2843
+ </a>
2844
+ </li>
2845
+ <li class="pf-v6-c-nav__item">
2846
+ <a href="#" class="pf-v6-c-nav__link">
2847
+ <span class="pf-v6-c-nav__link-text">Network services</span>
2848
+ </a>
2849
+ </li>
2850
+ <li class="pf-v6-c-nav__item">
2851
+ <a href="#" class="pf-v6-c-nav__link">
2852
+ <span class="pf-v6-c-nav__link-text">Server</span>
2853
+ </a>
2854
+ </li>
2855
+ </ul>
2856
+ </nav>
2857
+ </div>
2336
2858
  </div>
2337
2859
  </div>
2338
2860
  <div class="pf-v6-c-page__main-container" tabindex="-1">
@@ -2365,10 +2887,19 @@ section: components
2365
2887
  >
2366
2888
  <span class="pf-v6-c-button__icon pf-m-start">
2367
2889
  <span class="pf-v6-c-jump-links__toggle-icon">
2368
- <i
2369
- class="fas fa-angle-right"
2890
+ <svg
2891
+ class="pf-v6-svg"
2892
+ viewBox="0 0 20 20"
2893
+ fill="currentColor"
2370
2894
  aria-hidden="true"
2371
- ></i>
2895
+ role="img"
2896
+ width="1em"
2897
+ height="1em"
2898
+ >
2899
+ <path
2900
+ 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"
2901
+ />
2902
+ </svg>
2372
2903
  </span>
2373
2904
  </span>
2374
2905
  <span
@@ -2507,7 +3038,19 @@ section: components
2507
3038
  aria-label="Close drawer panel"
2508
3039
  >
2509
3040
  <span class="pf-v6-c-button__icon">
2510
- <i class="fas fa-times" aria-hidden="true"></i>
3041
+ <svg
3042
+ class="pf-v6-svg"
3043
+ viewBox="0 0 20 20"
3044
+ fill="currentColor"
3045
+ aria-hidden="true"
3046
+ role="img"
3047
+ width="1em"
3048
+ height="1em"
3049
+ >
3050
+ <path
3051
+ d="M17.8 16.2 11.59 10l6.21-6.21c.42-.46.39-1.17-.07-1.59-.43-.4-1.09-.4-1.52 0l-6.2 6.2-6.22-6.19c-.44-.44-1.15-.44-1.59 0-.44.44-.44 1.15 0 1.59l6.2 6.21-6.2 6.2c-.42.46-.39 1.17.07 1.59.43.4 1.09.4 1.52 0L10 11.59l6.2 6.2c.44.44 1.15.44 1.59 0 .44-.45.44-1.16 0-1.6Z"
3052
+ />
3053
+ </svg>
2511
3054
  </span>
2512
3055
  </button>
2513
3056
  </div>