@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/Page/examples/Page.md CHANGED
@@ -15,7 +15,8 @@ wrapperTag: div
15
15
  <span class="pf-v6-c-button__text">Skip to content</span>
16
16
  </a>
17
17
  </div>
18
- <header class="pf-v6-c-masthead" id="page-demo-basic-masthead">
18
+
19
+ <header class="pf-v6-c-masthead" id="page-demo-basic-docked">
19
20
  <div class="pf-v6-c-masthead__main">
20
21
  <span class="pf-v6-c-masthead__toggle">
21
22
  <button
@@ -57,7 +58,7 @@ wrapperTag: div
57
58
  y1="2.25860997e-13%"
58
59
  x2="32%"
59
60
  y2="100%"
60
- id="linearGradient-page-demo-basic-masthead"
61
+ id="linearGradient-page-demo-basic-docked"
61
62
  >
62
63
  <stop stop-color="#2B9AF3" offset="0%" />
63
64
  <stop
@@ -111,11 +112,11 @@ wrapperTag: div
111
112
  />
112
113
  <path
113
114
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
114
- fill="url(#linearGradient-page-demo-basic-masthead)"
115
+ fill="url(#linearGradient-page-demo-basic-docked)"
115
116
  />
116
117
  <path
117
118
  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"
118
- fill="url(#linearGradient-page-demo-basic-masthead)"
119
+ fill="url(#linearGradient-page-demo-basic-docked)"
119
120
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
120
121
  />
121
122
  </g>
@@ -127,7 +128,7 @@ wrapperTag: div
127
128
  <div class="pf-v6-c-masthead__content">
128
129
  <div
129
130
  class="pf-v6-c-toolbar pf-m-static"
130
- id="page-demo-basic-masthead-toolbar"
131
+ id="page-demo-basic-docked-toolbar"
131
132
  >
132
133
  <div class="pf-v6-c-toolbar__content">
133
134
  <div class="pf-v6-c-toolbar__content-section">
@@ -145,7 +146,19 @@ wrapperTag: div
145
146
  aria-label="Application launcher"
146
147
  >
147
148
  <span class="pf-v6-c-menu-toggle__icon">
148
- <i class="fas fa-th" aria-hidden="true"></i>
149
+ <svg
150
+ class="pf-v6-svg"
151
+ viewBox="0 0 512 512"
152
+ fill="currentColor"
153
+ aria-hidden="true"
154
+ role="img"
155
+ width="1em"
156
+ height="1em"
157
+ >
158
+ <path
159
+ 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"
160
+ />
161
+ </svg>
149
162
  </span>
150
163
  </button>
151
164
  </div>
@@ -157,7 +170,19 @@ wrapperTag: div
157
170
  aria-label="Settings"
158
171
  >
159
172
  <span class="pf-v6-c-menu-toggle__icon">
160
- <i class="fas fa-cog" aria-hidden="true"></i>
173
+ <svg
174
+ class="pf-v6-svg"
175
+ viewBox="0 0 32 32"
176
+ fill="currentColor"
177
+ aria-hidden="true"
178
+ role="img"
179
+ width="1em"
180
+ height="1em"
181
+ >
182
+ <path
183
+ 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"
184
+ />
185
+ </svg>
161
186
  </span>
162
187
  </button>
163
188
  </div>
@@ -169,7 +194,19 @@ wrapperTag: div
169
194
  aria-label="Help"
170
195
  >
171
196
  <span class="pf-v6-c-menu-toggle__icon">
172
- <i class="fas fa-question-circle" aria-hidden="true"></i>
197
+ <svg
198
+ class="pf-v6-svg"
199
+ viewBox="0 0 512 512"
200
+ fill="currentColor"
201
+ aria-hidden="true"
202
+ role="img"
203
+ width="1em"
204
+ height="1em"
205
+ >
206
+ <path
207
+ 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"
208
+ />
209
+ </svg>
173
210
  </span>
174
211
  </button>
175
212
  </div>
@@ -183,7 +220,19 @@ wrapperTag: div
183
220
  aria-label="Actions"
184
221
  >
185
222
  <span class="pf-v6-c-menu-toggle__icon">
186
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
223
+ <svg
224
+ class="pf-v6-svg"
225
+ viewBox="0 0 32 32"
226
+ fill="currentColor"
227
+ aria-hidden="true"
228
+ role="img"
229
+ width="1em"
230
+ height="1em"
231
+ >
232
+ <path
233
+ 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"
234
+ />
235
+ </svg>
187
236
  </span>
188
237
  </button>
189
238
  </div>
@@ -194,44 +243,46 @@ wrapperTag: div
194
243
  </div>
195
244
  </header>
196
245
  <div class="pf-v6-c-page__sidebar">
197
- <div class="pf-v6-c-page__sidebar-body">
198
- <nav
199
- class="pf-v6-c-nav"
200
- id="page-demo-basic-primary-nav"
201
- aria-label="Global"
202
- >
203
- <ul class="pf-v6-c-nav__list" role="list">
204
- <li class="pf-v6-c-nav__item">
205
- <a href="#" class="pf-v6-c-nav__link">
206
- <span class="pf-v6-c-nav__link-text">System panel</span>
207
- </a>
208
- </li>
209
- <li class="pf-v6-c-nav__item">
210
- <a
211
- href="#"
212
- class="pf-v6-c-nav__link pf-m-current"
213
- aria-current="page"
214
- >
215
- <span class="pf-v6-c-nav__link-text">Policy</span>
216
- </a>
217
- </li>
218
- <li class="pf-v6-c-nav__item">
219
- <a href="#" class="pf-v6-c-nav__link">
220
- <span class="pf-v6-c-nav__link-text">Authentication</span>
221
- </a>
222
- </li>
223
- <li class="pf-v6-c-nav__item">
224
- <a href="#" class="pf-v6-c-nav__link">
225
- <span class="pf-v6-c-nav__link-text">Network services</span>
226
- </a>
227
- </li>
228
- <li class="pf-v6-c-nav__item">
229
- <a href="#" class="pf-v6-c-nav__link">
230
- <span class="pf-v6-c-nav__link-text">Server</span>
231
- </a>
232
- </li>
233
- </ul>
234
- </nav>
246
+ <div class="pf-v6-c-page__sidebar-main">
247
+ <div class="pf-v6-c-page__sidebar-body">
248
+ <nav
249
+ class="pf-v6-c-nav"
250
+ id="page-demo-basic-primary-nav"
251
+ aria-label="Global"
252
+ >
253
+ <ul class="pf-v6-c-nav__list" role="list">
254
+ <li class="pf-v6-c-nav__item">
255
+ <a href="#" class="pf-v6-c-nav__link">
256
+ <span class="pf-v6-c-nav__link-text">System panel</span>
257
+ </a>
258
+ </li>
259
+ <li class="pf-v6-c-nav__item">
260
+ <a
261
+ href="#"
262
+ class="pf-v6-c-nav__link pf-m-current"
263
+ aria-current="page"
264
+ >
265
+ <span class="pf-v6-c-nav__link-text">Policy</span>
266
+ </a>
267
+ </li>
268
+ <li class="pf-v6-c-nav__item">
269
+ <a href="#" class="pf-v6-c-nav__link">
270
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
271
+ </a>
272
+ </li>
273
+ <li class="pf-v6-c-nav__item">
274
+ <a href="#" class="pf-v6-c-nav__link">
275
+ <span class="pf-v6-c-nav__link-text">Network services</span>
276
+ </a>
277
+ </li>
278
+ <li class="pf-v6-c-nav__item">
279
+ <a href="#" class="pf-v6-c-nav__link">
280
+ <span class="pf-v6-c-nav__link-text">Server</span>
281
+ </a>
282
+ </li>
283
+ </ul>
284
+ </nav>
285
+ </div>
235
286
  </div>
236
287
  </div>
237
288
  <div class="pf-v6-c-page__main-container" tabindex="-1">
@@ -249,21 +300,57 @@ wrapperTag: div
249
300
  </li>
250
301
  <li class="pf-v6-c-breadcrumb__item">
251
302
  <span class="pf-v6-c-breadcrumb__item-divider">
252
- <i class="fas fa-angle-right" aria-hidden="true"></i>
303
+ <svg
304
+ class="pf-v6-svg"
305
+ viewBox="0 0 20 20"
306
+ fill="currentColor"
307
+ aria-hidden="true"
308
+ role="img"
309
+ width="1em"
310
+ height="1em"
311
+ >
312
+ <path
313
+ 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"
314
+ />
315
+ </svg>
253
316
  </span>
254
317
 
255
318
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
256
319
  </li>
257
320
  <li class="pf-v6-c-breadcrumb__item">
258
321
  <span class="pf-v6-c-breadcrumb__item-divider">
259
- <i class="fas fa-angle-right" aria-hidden="true"></i>
322
+ <svg
323
+ class="pf-v6-svg"
324
+ viewBox="0 0 20 20"
325
+ fill="currentColor"
326
+ aria-hidden="true"
327
+ role="img"
328
+ width="1em"
329
+ height="1em"
330
+ >
331
+ <path
332
+ d="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"
333
+ />
334
+ </svg>
260
335
  </span>
261
336
 
262
337
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
263
338
  </li>
264
339
  <li class="pf-v6-c-breadcrumb__item">
265
340
  <span class="pf-v6-c-breadcrumb__item-divider">
266
- <i class="fas fa-angle-right" aria-hidden="true"></i>
341
+ <svg
342
+ class="pf-v6-svg"
343
+ viewBox="0 0 20 20"
344
+ fill="currentColor"
345
+ aria-hidden="true"
346
+ role="img"
347
+ width="1em"
348
+ height="1em"
349
+ >
350
+ <path
351
+ 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"
352
+ />
353
+ </svg>
267
354
  </span>
268
355
 
269
356
  <a
@@ -276,9 +363,15 @@ wrapperTag: div
276
363
  </nav>
277
364
  </div>
278
365
  </section>
279
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
366
+ <section
367
+ class="pf-v6-c-page__main-section pf-m-limit-width"
368
+ aria-labelledby="main-title"
369
+ >
280
370
  <div class="pf-v6-c-page__main-body">
281
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
371
+ <h1
372
+ class="pf-v6-c-content--h1 pf-m-page-title"
373
+ id="main-title"
374
+ >Main title</h1>
282
375
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
283
376
  </div>
284
377
  </section>
@@ -336,9 +429,10 @@ wrapperTag: div
336
429
  <span class="pf-v6-c-button__text">Skip to content</span>
337
430
  </a>
338
431
  </div>
432
+
339
433
  <header
340
434
  class="pf-v6-c-masthead"
341
- id="multiple-sidebar-body-elements-demo-masthead"
435
+ id="multiple-sidebar-body-elements-demo-docked"
342
436
  >
343
437
  <div class="pf-v6-c-masthead__main">
344
438
  <span class="pf-v6-c-masthead__toggle">
@@ -381,7 +475,7 @@ wrapperTag: div
381
475
  y1="2.25860997e-13%"
382
476
  x2="32%"
383
477
  y2="100%"
384
- id="linearGradient-multiple-sidebar-body-elements-demo-masthead"
478
+ id="linearGradient-multiple-sidebar-body-elements-demo-docked"
385
479
  >
386
480
  <stop stop-color="#2B9AF3" offset="0%" />
387
481
  <stop
@@ -435,11 +529,11 @@ wrapperTag: div
435
529
  />
436
530
  <path
437
531
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
438
- fill="url(#linearGradient-multiple-sidebar-body-elements-demo-masthead)"
532
+ fill="url(#linearGradient-multiple-sidebar-body-elements-demo-docked)"
439
533
  />
440
534
  <path
441
535
  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"
442
- fill="url(#linearGradient-multiple-sidebar-body-elements-demo-masthead)"
536
+ fill="url(#linearGradient-multiple-sidebar-body-elements-demo-docked)"
443
537
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
444
538
  />
445
539
  </g>
@@ -451,7 +545,7 @@ wrapperTag: div
451
545
  <div class="pf-v6-c-masthead__content">
452
546
  <div
453
547
  class="pf-v6-c-toolbar pf-m-static"
454
- id="multiple-sidebar-body-elements-demo-masthead-toolbar"
548
+ id="multiple-sidebar-body-elements-demo-docked-toolbar"
455
549
  >
456
550
  <div class="pf-v6-c-toolbar__content">
457
551
  <div class="pf-v6-c-toolbar__content-section">
@@ -469,7 +563,19 @@ wrapperTag: div
469
563
  aria-label="Application launcher"
470
564
  >
471
565
  <span class="pf-v6-c-menu-toggle__icon">
472
- <i class="fas fa-th" aria-hidden="true"></i>
566
+ <svg
567
+ class="pf-v6-svg"
568
+ viewBox="0 0 512 512"
569
+ fill="currentColor"
570
+ aria-hidden="true"
571
+ role="img"
572
+ width="1em"
573
+ height="1em"
574
+ >
575
+ <path
576
+ 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"
577
+ />
578
+ </svg>
473
579
  </span>
474
580
  </button>
475
581
  </div>
@@ -481,7 +587,19 @@ wrapperTag: div
481
587
  aria-label="Settings"
482
588
  >
483
589
  <span class="pf-v6-c-menu-toggle__icon">
484
- <i class="fas fa-cog" aria-hidden="true"></i>
590
+ <svg
591
+ class="pf-v6-svg"
592
+ viewBox="0 0 32 32"
593
+ fill="currentColor"
594
+ aria-hidden="true"
595
+ role="img"
596
+ width="1em"
597
+ height="1em"
598
+ >
599
+ <path
600
+ 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"
601
+ />
602
+ </svg>
485
603
  </span>
486
604
  </button>
487
605
  </div>
@@ -493,7 +611,19 @@ wrapperTag: div
493
611
  aria-label="Help"
494
612
  >
495
613
  <span class="pf-v6-c-menu-toggle__icon">
496
- <i class="fas fa-question-circle" aria-hidden="true"></i>
614
+ <svg
615
+ class="pf-v6-svg"
616
+ viewBox="0 0 512 512"
617
+ fill="currentColor"
618
+ aria-hidden="true"
619
+ role="img"
620
+ width="1em"
621
+ height="1em"
622
+ >
623
+ <path
624
+ 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"
625
+ />
626
+ </svg>
497
627
  </span>
498
628
  </button>
499
629
  </div>
@@ -507,7 +637,19 @@ wrapperTag: div
507
637
  aria-label="Actions"
508
638
  >
509
639
  <span class="pf-v6-c-menu-toggle__icon">
510
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
640
+ <svg
641
+ class="pf-v6-svg"
642
+ viewBox="0 0 32 32"
643
+ fill="currentColor"
644
+ aria-hidden="true"
645
+ role="img"
646
+ width="1em"
647
+ height="1em"
648
+ >
649
+ <path
650
+ 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"
651
+ />
652
+ </svg>
511
653
  </span>
512
654
  </button>
513
655
  </div>
@@ -518,58 +660,60 @@ wrapperTag: div
518
660
  </div>
519
661
  </header>
520
662
  <div class="pf-v6-c-page__sidebar pf-m-expanded">
521
- <div class="pf-v6-c-page__sidebar-body pf-m-page-insets">
522
- <div class="pf-v6-c-content">
523
- <p>Custom sidebar content</p>
663
+ <div class="pf-v6-c-page__sidebar-main">
664
+ <div class="pf-v6-c-page__sidebar-body pf-m-page-insets">
665
+ <div class="pf-v6-c-content">
666
+ <p>Custom sidebar content</p>
667
+ </div>
524
668
  </div>
525
- </div>
526
- <div class="pf-v6-c-page__sidebar-body">
527
- <nav
528
- class="pf-v6-c-nav"
529
- id="multiple-sidebar-body-elements-demo-primary-nav"
530
- aria-label="Global"
531
- >
532
- <ul class="pf-v6-c-nav__list" role="list">
533
- <li class="pf-v6-c-nav__item">
534
- <a href="#" class="pf-v6-c-nav__link">
535
- <span class="pf-v6-c-nav__link-text">System panel</span>
536
- </a>
537
- </li>
538
- <li class="pf-v6-c-nav__item">
539
- <a
540
- href="#"
541
- class="pf-v6-c-nav__link pf-m-current"
542
- aria-current="page"
543
- >
544
- <span class="pf-v6-c-nav__link-text">Policy</span>
545
- </a>
546
- </li>
547
- <li class="pf-v6-c-nav__item">
548
- <a href="#" class="pf-v6-c-nav__link">
549
- <span class="pf-v6-c-nav__link-text">Authentication</span>
550
- </a>
551
- </li>
552
- <li class="pf-v6-c-nav__item">
553
- <a href="#" class="pf-v6-c-nav__link">
554
- <span class="pf-v6-c-nav__link-text">Network services</span>
555
- </a>
556
- </li>
557
- <li class="pf-v6-c-nav__item">
558
- <a href="#" class="pf-v6-c-nav__link">
559
- <span class="pf-v6-c-nav__link-text">Server</span>
560
- </a>
561
- </li>
562
- </ul>
563
- </nav>
564
- </div>
565
- <div class="pf-v6-c-page__sidebar-body pf-m-fill pf-m-page-insets">
566
- <div class="pf-v6-c-content">
567
- <p>Custom sidebar content</p>
669
+ <div class="pf-v6-c-page__sidebar-body">
670
+ <nav
671
+ class="pf-v6-c-nav"
672
+ id="multiple-sidebar-body-elements-demo-primary-nav"
673
+ aria-label="Global"
674
+ >
675
+ <ul class="pf-v6-c-nav__list" role="list">
676
+ <li class="pf-v6-c-nav__item">
677
+ <a href="#" class="pf-v6-c-nav__link">
678
+ <span class="pf-v6-c-nav__link-text">System panel</span>
679
+ </a>
680
+ </li>
681
+ <li class="pf-v6-c-nav__item">
682
+ <a
683
+ href="#"
684
+ class="pf-v6-c-nav__link pf-m-current"
685
+ aria-current="page"
686
+ >
687
+ <span class="pf-v6-c-nav__link-text">Policy</span>
688
+ </a>
689
+ </li>
690
+ <li class="pf-v6-c-nav__item">
691
+ <a href="#" class="pf-v6-c-nav__link">
692
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
693
+ </a>
694
+ </li>
695
+ <li class="pf-v6-c-nav__item">
696
+ <a href="#" class="pf-v6-c-nav__link">
697
+ <span class="pf-v6-c-nav__link-text">Network services</span>
698
+ </a>
699
+ </li>
700
+ <li class="pf-v6-c-nav__item">
701
+ <a href="#" class="pf-v6-c-nav__link">
702
+ <span class="pf-v6-c-nav__link-text">Server</span>
703
+ </a>
704
+ </li>
705
+ </ul>
706
+ </nav>
568
707
  </div>
569
- </div>
570
- <div class="pf-v6-c-page__sidebar-body pf-m-no-fill pf-m-page-insets">
571
- <div class="pf-v6-c-content">
572
- <p>&copy;&nbsp;Copyright</p>
708
+ <div class="pf-v6-c-page__sidebar-body pf-m-fill pf-m-page-insets">
709
+ <div class="pf-v6-c-content">
710
+ <p>Custom sidebar content</p>
711
+ </div>
712
+ </div>
713
+ <div class="pf-v6-c-page__sidebar-body pf-m-no-fill pf-m-page-insets">
714
+ <div class="pf-v6-c-content">
715
+ <p>&copy;&nbsp;Copyright</p>
716
+ </div>
573
717
  </div>
574
718
  </div>
575
719
  </div>
@@ -588,21 +732,57 @@ wrapperTag: div
588
732
  </li>
589
733
  <li class="pf-v6-c-breadcrumb__item">
590
734
  <span class="pf-v6-c-breadcrumb__item-divider">
591
- <i class="fas fa-angle-right" aria-hidden="true"></i>
735
+ <svg
736
+ class="pf-v6-svg"
737
+ viewBox="0 0 20 20"
738
+ fill="currentColor"
739
+ aria-hidden="true"
740
+ role="img"
741
+ width="1em"
742
+ height="1em"
743
+ >
744
+ <path
745
+ 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"
746
+ />
747
+ </svg>
592
748
  </span>
593
749
 
594
750
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
595
751
  </li>
596
752
  <li class="pf-v6-c-breadcrumb__item">
597
753
  <span class="pf-v6-c-breadcrumb__item-divider">
598
- <i class="fas fa-angle-right" aria-hidden="true"></i>
754
+ <svg
755
+ class="pf-v6-svg"
756
+ viewBox="0 0 20 20"
757
+ fill="currentColor"
758
+ aria-hidden="true"
759
+ role="img"
760
+ width="1em"
761
+ height="1em"
762
+ >
763
+ <path
764
+ 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"
765
+ />
766
+ </svg>
599
767
  </span>
600
768
 
601
769
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
602
770
  </li>
603
771
  <li class="pf-v6-c-breadcrumb__item">
604
772
  <span class="pf-v6-c-breadcrumb__item-divider">
605
- <i class="fas fa-angle-right" aria-hidden="true"></i>
773
+ <svg
774
+ class="pf-v6-svg"
775
+ viewBox="0 0 20 20"
776
+ fill="currentColor"
777
+ aria-hidden="true"
778
+ role="img"
779
+ width="1em"
780
+ height="1em"
781
+ >
782
+ <path
783
+ 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"
784
+ />
785
+ </svg>
606
786
  </span>
607
787
 
608
788
  <a
@@ -615,9 +795,15 @@ wrapperTag: div
615
795
  </nav>
616
796
  </div>
617
797
  </section>
618
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
798
+ <section
799
+ class="pf-v6-c-page__main-section pf-m-limit-width"
800
+ aria-labelledby="main-title"
801
+ >
619
802
  <div class="pf-v6-c-page__main-body">
620
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
803
+ <h1
804
+ class="pf-v6-c-content--h1 pf-m-page-title"
805
+ id="main-title"
806
+ >Main title</h1>
621
807
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
622
808
  </div>
623
809
  </section>
@@ -675,9 +861,10 @@ wrapperTag: div
675
861
  <span class="pf-v6-c-button__text">Skip to content</span>
676
862
  </a>
677
863
  </div>
864
+
678
865
  <header
679
866
  class="pf-v6-c-masthead"
680
- id="page-demo-sticky-top-horizontal-subnav-masthead"
867
+ id="page-demo-sticky-top-horizontal-subnav-docked"
681
868
  >
682
869
  <div class="pf-v6-c-masthead__main">
683
870
  <span class="pf-v6-c-masthead__toggle">
@@ -720,7 +907,7 @@ wrapperTag: div
720
907
  y1="2.25860997e-13%"
721
908
  x2="32%"
722
909
  y2="100%"
723
- id="linearGradient-page-demo-sticky-top-horizontal-subnav-masthead"
910
+ id="linearGradient-page-demo-sticky-top-horizontal-subnav-docked"
724
911
  >
725
912
  <stop stop-color="#2B9AF3" offset="0%" />
726
913
  <stop
@@ -774,11 +961,11 @@ wrapperTag: div
774
961
  />
775
962
  <path
776
963
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
777
- fill="url(#linearGradient-page-demo-sticky-top-horizontal-subnav-masthead)"
964
+ fill="url(#linearGradient-page-demo-sticky-top-horizontal-subnav-docked)"
778
965
  />
779
966
  <path
780
967
  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"
781
- fill="url(#linearGradient-page-demo-sticky-top-horizontal-subnav-masthead)"
968
+ fill="url(#linearGradient-page-demo-sticky-top-horizontal-subnav-docked)"
782
969
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
783
970
  />
784
971
  </g>
@@ -790,7 +977,7 @@ wrapperTag: div
790
977
  <div class="pf-v6-c-masthead__content">
791
978
  <div
792
979
  class="pf-v6-c-toolbar pf-m-static"
793
- id="page-demo-sticky-top-horizontal-subnav-masthead-toolbar"
980
+ id="page-demo-sticky-top-horizontal-subnav-docked-toolbar"
794
981
  >
795
982
  <div class="pf-v6-c-toolbar__content">
796
983
  <div class="pf-v6-c-toolbar__content-section">
@@ -808,7 +995,19 @@ wrapperTag: div
808
995
  aria-label="Application launcher"
809
996
  >
810
997
  <span class="pf-v6-c-menu-toggle__icon">
811
- <i class="fas fa-th" aria-hidden="true"></i>
998
+ <svg
999
+ class="pf-v6-svg"
1000
+ viewBox="0 0 512 512"
1001
+ fill="currentColor"
1002
+ aria-hidden="true"
1003
+ role="img"
1004
+ width="1em"
1005
+ height="1em"
1006
+ >
1007
+ <path
1008
+ 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"
1009
+ />
1010
+ </svg>
812
1011
  </span>
813
1012
  </button>
814
1013
  </div>
@@ -820,7 +1019,19 @@ wrapperTag: div
820
1019
  aria-label="Settings"
821
1020
  >
822
1021
  <span class="pf-v6-c-menu-toggle__icon">
823
- <i class="fas fa-cog" aria-hidden="true"></i>
1022
+ <svg
1023
+ class="pf-v6-svg"
1024
+ viewBox="0 0 32 32"
1025
+ fill="currentColor"
1026
+ aria-hidden="true"
1027
+ role="img"
1028
+ width="1em"
1029
+ height="1em"
1030
+ >
1031
+ <path
1032
+ d="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"
1033
+ />
1034
+ </svg>
824
1035
  </span>
825
1036
  </button>
826
1037
  </div>
@@ -832,7 +1043,19 @@ wrapperTag: div
832
1043
  aria-label="Help"
833
1044
  >
834
1045
  <span class="pf-v6-c-menu-toggle__icon">
835
- <i class="fas fa-question-circle" aria-hidden="true"></i>
1046
+ <svg
1047
+ class="pf-v6-svg"
1048
+ viewBox="0 0 512 512"
1049
+ fill="currentColor"
1050
+ aria-hidden="true"
1051
+ role="img"
1052
+ width="1em"
1053
+ height="1em"
1054
+ >
1055
+ <path
1056
+ 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"
1057
+ />
1058
+ </svg>
836
1059
  </span>
837
1060
  </button>
838
1061
  </div>
@@ -846,7 +1069,19 @@ wrapperTag: div
846
1069
  aria-label="Actions"
847
1070
  >
848
1071
  <span class="pf-v6-c-menu-toggle__icon">
849
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1072
+ <svg
1073
+ class="pf-v6-svg"
1074
+ viewBox="0 0 32 32"
1075
+ fill="currentColor"
1076
+ aria-hidden="true"
1077
+ role="img"
1078
+ width="1em"
1079
+ height="1em"
1080
+ >
1081
+ <path
1082
+ d="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"
1083
+ />
1084
+ </svg>
850
1085
  </span>
851
1086
  </button>
852
1087
  </div>
@@ -857,44 +1092,46 @@ wrapperTag: div
857
1092
  </div>
858
1093
  </header>
859
1094
  <div class="pf-v6-c-page__sidebar">
860
- <div class="pf-v6-c-page__sidebar-body">
861
- <nav
862
- class="pf-v6-c-nav"
863
- id="page-demo-sticky-top-horizontal-subnav-primary-nav"
864
- aria-label="Global"
865
- >
866
- <ul class="pf-v6-c-nav__list" role="list">
867
- <li class="pf-v6-c-nav__item">
868
- <a href="#" class="pf-v6-c-nav__link">
869
- <span class="pf-v6-c-nav__link-text">System panel</span>
870
- </a>
871
- </li>
872
- <li class="pf-v6-c-nav__item">
873
- <a
874
- href="#"
875
- class="pf-v6-c-nav__link pf-m-current"
876
- aria-current="page"
877
- >
878
- <span class="pf-v6-c-nav__link-text">Policy</span>
879
- </a>
880
- </li>
881
- <li class="pf-v6-c-nav__item">
882
- <a href="#" class="pf-v6-c-nav__link">
883
- <span class="pf-v6-c-nav__link-text">Authentication</span>
884
- </a>
885
- </li>
886
- <li class="pf-v6-c-nav__item">
887
- <a href="#" class="pf-v6-c-nav__link">
888
- <span class="pf-v6-c-nav__link-text">Network services</span>
889
- </a>
890
- </li>
891
- <li class="pf-v6-c-nav__item">
892
- <a href="#" class="pf-v6-c-nav__link">
893
- <span class="pf-v6-c-nav__link-text">Server</span>
894
- </a>
895
- </li>
896
- </ul>
897
- </nav>
1095
+ <div class="pf-v6-c-page__sidebar-main">
1096
+ <div class="pf-v6-c-page__sidebar-body">
1097
+ <nav
1098
+ class="pf-v6-c-nav"
1099
+ id="page-demo-sticky-top-horizontal-subnav-primary-nav"
1100
+ aria-label="Global"
1101
+ >
1102
+ <ul class="pf-v6-c-nav__list" role="list">
1103
+ <li class="pf-v6-c-nav__item">
1104
+ <a href="#" class="pf-v6-c-nav__link">
1105
+ <span class="pf-v6-c-nav__link-text">System panel</span>
1106
+ </a>
1107
+ </li>
1108
+ <li class="pf-v6-c-nav__item">
1109
+ <a
1110
+ href="#"
1111
+ class="pf-v6-c-nav__link pf-m-current"
1112
+ aria-current="page"
1113
+ >
1114
+ <span class="pf-v6-c-nav__link-text">Policy</span>
1115
+ </a>
1116
+ </li>
1117
+ <li class="pf-v6-c-nav__item">
1118
+ <a href="#" class="pf-v6-c-nav__link">
1119
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
1120
+ </a>
1121
+ </li>
1122
+ <li class="pf-v6-c-nav__item">
1123
+ <a href="#" class="pf-v6-c-nav__link">
1124
+ <span class="pf-v6-c-nav__link-text">Network services</span>
1125
+ </a>
1126
+ </li>
1127
+ <li class="pf-v6-c-nav__item">
1128
+ <a href="#" class="pf-v6-c-nav__link">
1129
+ <span class="pf-v6-c-nav__link-text">Server</span>
1130
+ </a>
1131
+ </li>
1132
+ </ul>
1133
+ </nav>
1134
+ </div>
898
1135
  </div>
899
1136
  </div>
900
1137
  <div class="pf-v6-c-page__main-container" tabindex="-1">
@@ -939,21 +1176,57 @@ wrapperTag: div
939
1176
  </li>
940
1177
  <li class="pf-v6-c-breadcrumb__item">
941
1178
  <span class="pf-v6-c-breadcrumb__item-divider">
942
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1179
+ <svg
1180
+ class="pf-v6-svg"
1181
+ viewBox="0 0 20 20"
1182
+ fill="currentColor"
1183
+ aria-hidden="true"
1184
+ role="img"
1185
+ width="1em"
1186
+ height="1em"
1187
+ >
1188
+ <path
1189
+ 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"
1190
+ />
1191
+ </svg>
943
1192
  </span>
944
1193
 
945
1194
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
946
1195
  </li>
947
1196
  <li class="pf-v6-c-breadcrumb__item">
948
1197
  <span class="pf-v6-c-breadcrumb__item-divider">
949
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1198
+ <svg
1199
+ class="pf-v6-svg"
1200
+ viewBox="0 0 20 20"
1201
+ fill="currentColor"
1202
+ aria-hidden="true"
1203
+ role="img"
1204
+ width="1em"
1205
+ height="1em"
1206
+ >
1207
+ <path
1208
+ 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"
1209
+ />
1210
+ </svg>
950
1211
  </span>
951
1212
 
952
1213
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
953
1214
  </li>
954
1215
  <li class="pf-v6-c-breadcrumb__item">
955
1216
  <span class="pf-v6-c-breadcrumb__item-divider">
956
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1217
+ <svg
1218
+ class="pf-v6-svg"
1219
+ viewBox="0 0 20 20"
1220
+ fill="currentColor"
1221
+ aria-hidden="true"
1222
+ role="img"
1223
+ width="1em"
1224
+ height="1em"
1225
+ >
1226
+ <path
1227
+ 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"
1228
+ />
1229
+ </svg>
957
1230
  </span>
958
1231
 
959
1232
  <a
@@ -966,9 +1239,15 @@ wrapperTag: div
966
1239
  </nav>
967
1240
  </div>
968
1241
  </section>
969
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
1242
+ <section
1243
+ class="pf-v6-c-page__main-section pf-m-limit-width"
1244
+ aria-labelledby="main-title"
1245
+ >
970
1246
  <div class="pf-v6-c-page__main-body">
971
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
1247
+ <h1
1248
+ class="pf-v6-c-content--h1 pf-m-page-title"
1249
+ id="main-title"
1250
+ >Main title</h1>
972
1251
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
973
1252
  </div>
974
1253
  </section>
@@ -1146,10 +1425,8 @@ wrapperTag: div
1146
1425
  <span class="pf-v6-c-button__text">Skip to content</span>
1147
1426
  </a>
1148
1427
  </div>
1149
- <header
1150
- class="pf-v6-c-masthead"
1151
- id="page-demo-sticky-top-breadcrumb-masthead"
1152
- >
1428
+
1429
+ <header class="pf-v6-c-masthead" id="page-demo-sticky-top-breadcrumb-docked">
1153
1430
  <div class="pf-v6-c-masthead__main">
1154
1431
  <span class="pf-v6-c-masthead__toggle">
1155
1432
  <button
@@ -1191,7 +1468,7 @@ wrapperTag: div
1191
1468
  y1="2.25860997e-13%"
1192
1469
  x2="32%"
1193
1470
  y2="100%"
1194
- id="linearGradient-page-demo-sticky-top-breadcrumb-masthead"
1471
+ id="linearGradient-page-demo-sticky-top-breadcrumb-docked"
1195
1472
  >
1196
1473
  <stop stop-color="#2B9AF3" offset="0%" />
1197
1474
  <stop
@@ -1245,11 +1522,11 @@ wrapperTag: div
1245
1522
  />
1246
1523
  <path
1247
1524
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
1248
- fill="url(#linearGradient-page-demo-sticky-top-breadcrumb-masthead)"
1525
+ fill="url(#linearGradient-page-demo-sticky-top-breadcrumb-docked)"
1249
1526
  />
1250
1527
  <path
1251
1528
  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"
1252
- fill="url(#linearGradient-page-demo-sticky-top-breadcrumb-masthead)"
1529
+ fill="url(#linearGradient-page-demo-sticky-top-breadcrumb-docked)"
1253
1530
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
1254
1531
  />
1255
1532
  </g>
@@ -1261,7 +1538,7 @@ wrapperTag: div
1261
1538
  <div class="pf-v6-c-masthead__content">
1262
1539
  <div
1263
1540
  class="pf-v6-c-toolbar pf-m-static"
1264
- id="page-demo-sticky-top-breadcrumb-masthead-toolbar"
1541
+ id="page-demo-sticky-top-breadcrumb-docked-toolbar"
1265
1542
  >
1266
1543
  <div class="pf-v6-c-toolbar__content">
1267
1544
  <div class="pf-v6-c-toolbar__content-section">
@@ -1279,7 +1556,19 @@ wrapperTag: div
1279
1556
  aria-label="Application launcher"
1280
1557
  >
1281
1558
  <span class="pf-v6-c-menu-toggle__icon">
1282
- <i class="fas fa-th" aria-hidden="true"></i>
1559
+ <svg
1560
+ class="pf-v6-svg"
1561
+ viewBox="0 0 512 512"
1562
+ fill="currentColor"
1563
+ aria-hidden="true"
1564
+ role="img"
1565
+ width="1em"
1566
+ height="1em"
1567
+ >
1568
+ <path
1569
+ 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"
1570
+ />
1571
+ </svg>
1283
1572
  </span>
1284
1573
  </button>
1285
1574
  </div>
@@ -1291,7 +1580,19 @@ wrapperTag: div
1291
1580
  aria-label="Settings"
1292
1581
  >
1293
1582
  <span class="pf-v6-c-menu-toggle__icon">
1294
- <i class="fas fa-cog" aria-hidden="true"></i>
1583
+ <svg
1584
+ class="pf-v6-svg"
1585
+ viewBox="0 0 32 32"
1586
+ fill="currentColor"
1587
+ aria-hidden="true"
1588
+ role="img"
1589
+ width="1em"
1590
+ height="1em"
1591
+ >
1592
+ <path
1593
+ 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"
1594
+ />
1595
+ </svg>
1295
1596
  </span>
1296
1597
  </button>
1297
1598
  </div>
@@ -1303,7 +1604,19 @@ wrapperTag: div
1303
1604
  aria-label="Help"
1304
1605
  >
1305
1606
  <span class="pf-v6-c-menu-toggle__icon">
1306
- <i class="fas fa-question-circle" aria-hidden="true"></i>
1607
+ <svg
1608
+ class="pf-v6-svg"
1609
+ viewBox="0 0 512 512"
1610
+ fill="currentColor"
1611
+ aria-hidden="true"
1612
+ role="img"
1613
+ width="1em"
1614
+ height="1em"
1615
+ >
1616
+ <path
1617
+ 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"
1618
+ />
1619
+ </svg>
1307
1620
  </span>
1308
1621
  </button>
1309
1622
  </div>
@@ -1317,7 +1630,19 @@ wrapperTag: div
1317
1630
  aria-label="Actions"
1318
1631
  >
1319
1632
  <span class="pf-v6-c-menu-toggle__icon">
1320
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1633
+ <svg
1634
+ class="pf-v6-svg"
1635
+ viewBox="0 0 32 32"
1636
+ fill="currentColor"
1637
+ aria-hidden="true"
1638
+ role="img"
1639
+ width="1em"
1640
+ height="1em"
1641
+ >
1642
+ <path
1643
+ 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"
1644
+ />
1645
+ </svg>
1321
1646
  </span>
1322
1647
  </button>
1323
1648
  </div>
@@ -1328,44 +1653,46 @@ wrapperTag: div
1328
1653
  </div>
1329
1654
  </header>
1330
1655
  <div class="pf-v6-c-page__sidebar">
1331
- <div class="pf-v6-c-page__sidebar-body">
1332
- <nav
1333
- class="pf-v6-c-nav"
1334
- id="page-demo-sticky-top-breadcrumb-primary-nav"
1335
- aria-label="Global"
1336
- >
1337
- <ul class="pf-v6-c-nav__list" role="list">
1338
- <li class="pf-v6-c-nav__item">
1339
- <a href="#" class="pf-v6-c-nav__link">
1340
- <span class="pf-v6-c-nav__link-text">System panel</span>
1341
- </a>
1342
- </li>
1343
- <li class="pf-v6-c-nav__item">
1344
- <a
1345
- href="#"
1346
- class="pf-v6-c-nav__link pf-m-current"
1347
- aria-current="page"
1348
- >
1349
- <span class="pf-v6-c-nav__link-text">Policy</span>
1350
- </a>
1351
- </li>
1352
- <li class="pf-v6-c-nav__item">
1353
- <a href="#" class="pf-v6-c-nav__link">
1354
- <span class="pf-v6-c-nav__link-text">Authentication</span>
1355
- </a>
1356
- </li>
1357
- <li class="pf-v6-c-nav__item">
1358
- <a href="#" class="pf-v6-c-nav__link">
1359
- <span class="pf-v6-c-nav__link-text">Network services</span>
1360
- </a>
1361
- </li>
1362
- <li class="pf-v6-c-nav__item">
1363
- <a href="#" class="pf-v6-c-nav__link">
1364
- <span class="pf-v6-c-nav__link-text">Server</span>
1365
- </a>
1366
- </li>
1367
- </ul>
1368
- </nav>
1656
+ <div class="pf-v6-c-page__sidebar-main">
1657
+ <div class="pf-v6-c-page__sidebar-body">
1658
+ <nav
1659
+ class="pf-v6-c-nav"
1660
+ id="page-demo-sticky-top-breadcrumb-primary-nav"
1661
+ aria-label="Global"
1662
+ >
1663
+ <ul class="pf-v6-c-nav__list" role="list">
1664
+ <li class="pf-v6-c-nav__item">
1665
+ <a href="#" class="pf-v6-c-nav__link">
1666
+ <span class="pf-v6-c-nav__link-text">System panel</span>
1667
+ </a>
1668
+ </li>
1669
+ <li class="pf-v6-c-nav__item">
1670
+ <a
1671
+ href="#"
1672
+ class="pf-v6-c-nav__link pf-m-current"
1673
+ aria-current="page"
1674
+ >
1675
+ <span class="pf-v6-c-nav__link-text">Policy</span>
1676
+ </a>
1677
+ </li>
1678
+ <li class="pf-v6-c-nav__item">
1679
+ <a href="#" class="pf-v6-c-nav__link">
1680
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
1681
+ </a>
1682
+ </li>
1683
+ <li class="pf-v6-c-nav__item">
1684
+ <a href="#" class="pf-v6-c-nav__link">
1685
+ <span class="pf-v6-c-nav__link-text">Network services</span>
1686
+ </a>
1687
+ </li>
1688
+ <li class="pf-v6-c-nav__item">
1689
+ <a href="#" class="pf-v6-c-nav__link">
1690
+ <span class="pf-v6-c-nav__link-text">Server</span>
1691
+ </a>
1692
+ </li>
1693
+ </ul>
1694
+ </nav>
1695
+ </div>
1369
1696
  </div>
1370
1697
  </div>
1371
1698
  <div class="pf-v6-c-page__main-container" tabindex="-1">
@@ -1385,21 +1712,57 @@ wrapperTag: div
1385
1712
  </li>
1386
1713
  <li class="pf-v6-c-breadcrumb__item">
1387
1714
  <span class="pf-v6-c-breadcrumb__item-divider">
1388
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1715
+ <svg
1716
+ class="pf-v6-svg"
1717
+ viewBox="0 0 20 20"
1718
+ fill="currentColor"
1719
+ aria-hidden="true"
1720
+ role="img"
1721
+ width="1em"
1722
+ height="1em"
1723
+ >
1724
+ <path
1725
+ 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"
1726
+ />
1727
+ </svg>
1389
1728
  </span>
1390
1729
 
1391
1730
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1392
1731
  </li>
1393
1732
  <li class="pf-v6-c-breadcrumb__item">
1394
1733
  <span class="pf-v6-c-breadcrumb__item-divider">
1395
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1734
+ <svg
1735
+ class="pf-v6-svg"
1736
+ viewBox="0 0 20 20"
1737
+ fill="currentColor"
1738
+ aria-hidden="true"
1739
+ role="img"
1740
+ width="1em"
1741
+ height="1em"
1742
+ >
1743
+ <path
1744
+ 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"
1745
+ />
1746
+ </svg>
1396
1747
  </span>
1397
1748
 
1398
1749
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1399
1750
  </li>
1400
1751
  <li class="pf-v6-c-breadcrumb__item">
1401
1752
  <span class="pf-v6-c-breadcrumb__item-divider">
1402
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1753
+ <svg
1754
+ class="pf-v6-svg"
1755
+ viewBox="0 0 20 20"
1756
+ fill="currentColor"
1757
+ aria-hidden="true"
1758
+ role="img"
1759
+ width="1em"
1760
+ height="1em"
1761
+ >
1762
+ <path
1763
+ d="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"
1764
+ />
1765
+ </svg>
1403
1766
  </span>
1404
1767
 
1405
1768
  <a
@@ -1412,9 +1775,15 @@ wrapperTag: div
1412
1775
  </nav>
1413
1776
  </div>
1414
1777
  </section>
1415
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
1778
+ <section
1779
+ class="pf-v6-c-page__main-section pf-m-limit-width"
1780
+ aria-labelledby="main-title"
1781
+ >
1416
1782
  <div class="pf-v6-c-page__main-body">
1417
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
1783
+ <h1
1784
+ class="pf-v6-c-content--h1 pf-m-page-title"
1785
+ id="main-title"
1786
+ >Main title</h1>
1418
1787
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
1419
1788
  </div>
1420
1789
  </section>
@@ -1592,10 +1961,8 @@ wrapperTag: div
1592
1961
  <span class="pf-v6-c-button__text">Skip to content</span>
1593
1962
  </a>
1594
1963
  </div>
1595
- <header
1596
- class="pf-v6-c-masthead"
1597
- id="page-demo-sticky-top-breadcrumb-masthead"
1598
- >
1964
+
1965
+ <header class="pf-v6-c-masthead" id="page-demo-sticky-top-breadcrumb-docked">
1599
1966
  <div class="pf-v6-c-masthead__main">
1600
1967
  <span class="pf-v6-c-masthead__toggle">
1601
1968
  <button
@@ -1637,7 +2004,7 @@ wrapperTag: div
1637
2004
  y1="2.25860997e-13%"
1638
2005
  x2="32%"
1639
2006
  y2="100%"
1640
- id="linearGradient-page-demo-sticky-top-breadcrumb-masthead"
2007
+ id="linearGradient-page-demo-sticky-top-breadcrumb-docked"
1641
2008
  >
1642
2009
  <stop stop-color="#2B9AF3" offset="0%" />
1643
2010
  <stop
@@ -1691,11 +2058,11 @@ wrapperTag: div
1691
2058
  />
1692
2059
  <path
1693
2060
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
1694
- fill="url(#linearGradient-page-demo-sticky-top-breadcrumb-masthead)"
2061
+ fill="url(#linearGradient-page-demo-sticky-top-breadcrumb-docked)"
1695
2062
  />
1696
2063
  <path
1697
2064
  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"
1698
- fill="url(#linearGradient-page-demo-sticky-top-breadcrumb-masthead)"
2065
+ fill="url(#linearGradient-page-demo-sticky-top-breadcrumb-docked)"
1699
2066
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
1700
2067
  />
1701
2068
  </g>
@@ -1707,7 +2074,7 @@ wrapperTag: div
1707
2074
  <div class="pf-v6-c-masthead__content">
1708
2075
  <div
1709
2076
  class="pf-v6-c-toolbar pf-m-static"
1710
- id="page-demo-sticky-top-breadcrumb-masthead-toolbar"
2077
+ id="page-demo-sticky-top-breadcrumb-docked-toolbar"
1711
2078
  >
1712
2079
  <div class="pf-v6-c-toolbar__content">
1713
2080
  <div class="pf-v6-c-toolbar__content-section">
@@ -1725,7 +2092,19 @@ wrapperTag: div
1725
2092
  aria-label="Application launcher"
1726
2093
  >
1727
2094
  <span class="pf-v6-c-menu-toggle__icon">
1728
- <i class="fas fa-th" aria-hidden="true"></i>
2095
+ <svg
2096
+ class="pf-v6-svg"
2097
+ viewBox="0 0 512 512"
2098
+ fill="currentColor"
2099
+ aria-hidden="true"
2100
+ role="img"
2101
+ width="1em"
2102
+ height="1em"
2103
+ >
2104
+ <path
2105
+ 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"
2106
+ />
2107
+ </svg>
1729
2108
  </span>
1730
2109
  </button>
1731
2110
  </div>
@@ -1737,7 +2116,19 @@ wrapperTag: div
1737
2116
  aria-label="Settings"
1738
2117
  >
1739
2118
  <span class="pf-v6-c-menu-toggle__icon">
1740
- <i class="fas fa-cog" aria-hidden="true"></i>
2119
+ <svg
2120
+ class="pf-v6-svg"
2121
+ viewBox="0 0 32 32"
2122
+ fill="currentColor"
2123
+ aria-hidden="true"
2124
+ role="img"
2125
+ width="1em"
2126
+ height="1em"
2127
+ >
2128
+ <path
2129
+ 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"
2130
+ />
2131
+ </svg>
1741
2132
  </span>
1742
2133
  </button>
1743
2134
  </div>
@@ -1749,7 +2140,19 @@ wrapperTag: div
1749
2140
  aria-label="Help"
1750
2141
  >
1751
2142
  <span class="pf-v6-c-menu-toggle__icon">
1752
- <i class="fas fa-question-circle" aria-hidden="true"></i>
2143
+ <svg
2144
+ class="pf-v6-svg"
2145
+ viewBox="0 0 512 512"
2146
+ fill="currentColor"
2147
+ aria-hidden="true"
2148
+ role="img"
2149
+ width="1em"
2150
+ height="1em"
2151
+ >
2152
+ <path
2153
+ 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"
2154
+ />
2155
+ </svg>
1753
2156
  </span>
1754
2157
  </button>
1755
2158
  </div>
@@ -1763,7 +2166,19 @@ wrapperTag: div
1763
2166
  aria-label="Actions"
1764
2167
  >
1765
2168
  <span class="pf-v6-c-menu-toggle__icon">
1766
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
2169
+ <svg
2170
+ class="pf-v6-svg"
2171
+ viewBox="0 0 32 32"
2172
+ fill="currentColor"
2173
+ aria-hidden="true"
2174
+ role="img"
2175
+ width="1em"
2176
+ height="1em"
2177
+ >
2178
+ <path
2179
+ 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"
2180
+ />
2181
+ </svg>
1767
2182
  </span>
1768
2183
  </button>
1769
2184
  </div>
@@ -1774,44 +2189,46 @@ wrapperTag: div
1774
2189
  </div>
1775
2190
  </header>
1776
2191
  <div class="pf-v6-c-page__sidebar">
1777
- <div class="pf-v6-c-page__sidebar-body">
1778
- <nav
1779
- class="pf-v6-c-nav"
1780
- id="page-demo-sticky-top-breadcrumb-primary-nav"
1781
- aria-label="Global"
1782
- >
1783
- <ul class="pf-v6-c-nav__list" role="list">
1784
- <li class="pf-v6-c-nav__item">
1785
- <a href="#" class="pf-v6-c-nav__link">
1786
- <span class="pf-v6-c-nav__link-text">System panel</span>
1787
- </a>
1788
- </li>
1789
- <li class="pf-v6-c-nav__item">
1790
- <a
1791
- href="#"
1792
- class="pf-v6-c-nav__link pf-m-current"
1793
- aria-current="page"
1794
- >
1795
- <span class="pf-v6-c-nav__link-text">Policy</span>
1796
- </a>
1797
- </li>
1798
- <li class="pf-v6-c-nav__item">
1799
- <a href="#" class="pf-v6-c-nav__link">
1800
- <span class="pf-v6-c-nav__link-text">Authentication</span>
1801
- </a>
1802
- </li>
1803
- <li class="pf-v6-c-nav__item">
1804
- <a href="#" class="pf-v6-c-nav__link">
1805
- <span class="pf-v6-c-nav__link-text">Network services</span>
1806
- </a>
1807
- </li>
1808
- <li class="pf-v6-c-nav__item">
1809
- <a href="#" class="pf-v6-c-nav__link">
1810
- <span class="pf-v6-c-nav__link-text">Server</span>
1811
- </a>
1812
- </li>
1813
- </ul>
1814
- </nav>
2192
+ <div class="pf-v6-c-page__sidebar-main">
2193
+ <div class="pf-v6-c-page__sidebar-body">
2194
+ <nav
2195
+ class="pf-v6-c-nav"
2196
+ id="page-demo-sticky-top-breadcrumb-primary-nav"
2197
+ aria-label="Global"
2198
+ >
2199
+ <ul class="pf-v6-c-nav__list" role="list">
2200
+ <li class="pf-v6-c-nav__item">
2201
+ <a href="#" class="pf-v6-c-nav__link">
2202
+ <span class="pf-v6-c-nav__link-text">System panel</span>
2203
+ </a>
2204
+ </li>
2205
+ <li class="pf-v6-c-nav__item">
2206
+ <a
2207
+ href="#"
2208
+ class="pf-v6-c-nav__link pf-m-current"
2209
+ aria-current="page"
2210
+ >
2211
+ <span class="pf-v6-c-nav__link-text">Policy</span>
2212
+ </a>
2213
+ </li>
2214
+ <li class="pf-v6-c-nav__item">
2215
+ <a href="#" class="pf-v6-c-nav__link">
2216
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
2217
+ </a>
2218
+ </li>
2219
+ <li class="pf-v6-c-nav__item">
2220
+ <a href="#" class="pf-v6-c-nav__link">
2221
+ <span class="pf-v6-c-nav__link-text">Network services</span>
2222
+ </a>
2223
+ </li>
2224
+ <li class="pf-v6-c-nav__item">
2225
+ <a href="#" class="pf-v6-c-nav__link">
2226
+ <span class="pf-v6-c-nav__link-text">Server</span>
2227
+ </a>
2228
+ </li>
2229
+ </ul>
2230
+ </nav>
2231
+ </div>
1815
2232
  </div>
1816
2233
  </div>
1817
2234
  <div class="pf-v6-c-page__main-container" tabindex="-1">
@@ -1831,21 +2248,57 @@ wrapperTag: div
1831
2248
  </li>
1832
2249
  <li class="pf-v6-c-breadcrumb__item">
1833
2250
  <span class="pf-v6-c-breadcrumb__item-divider">
1834
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2251
+ <svg
2252
+ class="pf-v6-svg"
2253
+ viewBox="0 0 20 20"
2254
+ fill="currentColor"
2255
+ aria-hidden="true"
2256
+ role="img"
2257
+ width="1em"
2258
+ height="1em"
2259
+ >
2260
+ <path
2261
+ 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"
2262
+ />
2263
+ </svg>
1835
2264
  </span>
1836
2265
 
1837
2266
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1838
2267
  </li>
1839
2268
  <li class="pf-v6-c-breadcrumb__item">
1840
2269
  <span class="pf-v6-c-breadcrumb__item-divider">
1841
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2270
+ <svg
2271
+ class="pf-v6-svg"
2272
+ viewBox="0 0 20 20"
2273
+ fill="currentColor"
2274
+ aria-hidden="true"
2275
+ role="img"
2276
+ width="1em"
2277
+ height="1em"
2278
+ >
2279
+ <path
2280
+ 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"
2281
+ />
2282
+ </svg>
1842
2283
  </span>
1843
2284
 
1844
2285
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1845
2286
  </li>
1846
2287
  <li class="pf-v6-c-breadcrumb__item">
1847
2288
  <span class="pf-v6-c-breadcrumb__item-divider">
1848
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2289
+ <svg
2290
+ class="pf-v6-svg"
2291
+ viewBox="0 0 20 20"
2292
+ fill="currentColor"
2293
+ aria-hidden="true"
2294
+ role="img"
2295
+ width="1em"
2296
+ height="1em"
2297
+ >
2298
+ <path
2299
+ 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"
2300
+ />
2301
+ </svg>
1849
2302
  </span>
1850
2303
 
1851
2304
  <a
@@ -1858,9 +2311,15 @@ wrapperTag: div
1858
2311
  </nav>
1859
2312
  </div>
1860
2313
  </section>
1861
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
2314
+ <section
2315
+ class="pf-v6-c-page__main-section pf-m-limit-width"
2316
+ aria-labelledby="main-title"
2317
+ >
1862
2318
  <div class="pf-v6-c-page__main-body">
1863
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
2319
+ <h1
2320
+ class="pf-v6-c-content--h1 pf-m-page-title"
2321
+ id="main-title"
2322
+ >Main title</h1>
1864
2323
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
1865
2324
  </div>
1866
2325
  </section>
@@ -2038,9 +2497,10 @@ wrapperTag: div
2038
2497
  <span class="pf-v6-c-button__text">Skip to content</span>
2039
2498
  </a>
2040
2499
  </div>
2500
+
2041
2501
  <header
2042
2502
  class="pf-v6-c-masthead"
2043
- id="page-demo-sticky-top-section-group-masthead"
2503
+ id="page-demo-sticky-top-section-group-docked"
2044
2504
  >
2045
2505
  <div class="pf-v6-c-masthead__main">
2046
2506
  <span class="pf-v6-c-masthead__toggle">
@@ -2083,7 +2543,7 @@ wrapperTag: div
2083
2543
  y1="2.25860997e-13%"
2084
2544
  x2="32%"
2085
2545
  y2="100%"
2086
- id="linearGradient-page-demo-sticky-top-section-group-masthead"
2546
+ id="linearGradient-page-demo-sticky-top-section-group-docked"
2087
2547
  >
2088
2548
  <stop stop-color="#2B9AF3" offset="0%" />
2089
2549
  <stop
@@ -2137,11 +2597,11 @@ wrapperTag: div
2137
2597
  />
2138
2598
  <path
2139
2599
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
2140
- fill="url(#linearGradient-page-demo-sticky-top-section-group-masthead)"
2600
+ fill="url(#linearGradient-page-demo-sticky-top-section-group-docked)"
2141
2601
  />
2142
2602
  <path
2143
2603
  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"
2144
- fill="url(#linearGradient-page-demo-sticky-top-section-group-masthead)"
2604
+ fill="url(#linearGradient-page-demo-sticky-top-section-group-docked)"
2145
2605
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
2146
2606
  />
2147
2607
  </g>
@@ -2153,7 +2613,7 @@ wrapperTag: div
2153
2613
  <div class="pf-v6-c-masthead__content">
2154
2614
  <div
2155
2615
  class="pf-v6-c-toolbar pf-m-static"
2156
- id="page-demo-sticky-top-section-group-masthead-toolbar"
2616
+ id="page-demo-sticky-top-section-group-docked-toolbar"
2157
2617
  >
2158
2618
  <div class="pf-v6-c-toolbar__content">
2159
2619
  <div class="pf-v6-c-toolbar__content-section">
@@ -2171,7 +2631,19 @@ wrapperTag: div
2171
2631
  aria-label="Application launcher"
2172
2632
  >
2173
2633
  <span class="pf-v6-c-menu-toggle__icon">
2174
- <i class="fas fa-th" aria-hidden="true"></i>
2634
+ <svg
2635
+ class="pf-v6-svg"
2636
+ viewBox="0 0 512 512"
2637
+ fill="currentColor"
2638
+ aria-hidden="true"
2639
+ role="img"
2640
+ width="1em"
2641
+ height="1em"
2642
+ >
2643
+ <path
2644
+ 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"
2645
+ />
2646
+ </svg>
2175
2647
  </span>
2176
2648
  </button>
2177
2649
  </div>
@@ -2183,7 +2655,19 @@ wrapperTag: div
2183
2655
  aria-label="Settings"
2184
2656
  >
2185
2657
  <span class="pf-v6-c-menu-toggle__icon">
2186
- <i class="fas fa-cog" aria-hidden="true"></i>
2658
+ <svg
2659
+ class="pf-v6-svg"
2660
+ viewBox="0 0 32 32"
2661
+ fill="currentColor"
2662
+ aria-hidden="true"
2663
+ role="img"
2664
+ width="1em"
2665
+ height="1em"
2666
+ >
2667
+ <path
2668
+ 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"
2669
+ />
2670
+ </svg>
2187
2671
  </span>
2188
2672
  </button>
2189
2673
  </div>
@@ -2195,7 +2679,19 @@ wrapperTag: div
2195
2679
  aria-label="Help"
2196
2680
  >
2197
2681
  <span class="pf-v6-c-menu-toggle__icon">
2198
- <i class="fas fa-question-circle" aria-hidden="true"></i>
2682
+ <svg
2683
+ class="pf-v6-svg"
2684
+ viewBox="0 0 512 512"
2685
+ fill="currentColor"
2686
+ aria-hidden="true"
2687
+ role="img"
2688
+ width="1em"
2689
+ height="1em"
2690
+ >
2691
+ <path
2692
+ 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"
2693
+ />
2694
+ </svg>
2199
2695
  </span>
2200
2696
  </button>
2201
2697
  </div>
@@ -2209,7 +2705,19 @@ wrapperTag: div
2209
2705
  aria-label="Actions"
2210
2706
  >
2211
2707
  <span class="pf-v6-c-menu-toggle__icon">
2212
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
2708
+ <svg
2709
+ class="pf-v6-svg"
2710
+ viewBox="0 0 32 32"
2711
+ fill="currentColor"
2712
+ aria-hidden="true"
2713
+ role="img"
2714
+ width="1em"
2715
+ height="1em"
2716
+ >
2717
+ <path
2718
+ 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"
2719
+ />
2720
+ </svg>
2213
2721
  </span>
2214
2722
  </button>
2215
2723
  </div>
@@ -2220,44 +2728,46 @@ wrapperTag: div
2220
2728
  </div>
2221
2729
  </header>
2222
2730
  <div class="pf-v6-c-page__sidebar">
2223
- <div class="pf-v6-c-page__sidebar-body">
2224
- <nav
2225
- class="pf-v6-c-nav"
2226
- id="page-demo-sticky-top-section-group-primary-nav"
2227
- aria-label="Global"
2228
- >
2229
- <ul class="pf-v6-c-nav__list" role="list">
2230
- <li class="pf-v6-c-nav__item">
2231
- <a href="#" class="pf-v6-c-nav__link">
2232
- <span class="pf-v6-c-nav__link-text">System panel</span>
2233
- </a>
2234
- </li>
2235
- <li class="pf-v6-c-nav__item">
2236
- <a
2237
- href="#"
2238
- class="pf-v6-c-nav__link pf-m-current"
2239
- aria-current="page"
2240
- >
2241
- <span class="pf-v6-c-nav__link-text">Policy</span>
2242
- </a>
2243
- </li>
2244
- <li class="pf-v6-c-nav__item">
2245
- <a href="#" class="pf-v6-c-nav__link">
2246
- <span class="pf-v6-c-nav__link-text">Authentication</span>
2247
- </a>
2248
- </li>
2249
- <li class="pf-v6-c-nav__item">
2250
- <a href="#" class="pf-v6-c-nav__link">
2251
- <span class="pf-v6-c-nav__link-text">Network services</span>
2252
- </a>
2253
- </li>
2254
- <li class="pf-v6-c-nav__item">
2255
- <a href="#" class="pf-v6-c-nav__link">
2256
- <span class="pf-v6-c-nav__link-text">Server</span>
2257
- </a>
2258
- </li>
2259
- </ul>
2260
- </nav>
2731
+ <div class="pf-v6-c-page__sidebar-main">
2732
+ <div class="pf-v6-c-page__sidebar-body">
2733
+ <nav
2734
+ class="pf-v6-c-nav"
2735
+ id="page-demo-sticky-top-section-group-primary-nav"
2736
+ aria-label="Global"
2737
+ >
2738
+ <ul class="pf-v6-c-nav__list" role="list">
2739
+ <li class="pf-v6-c-nav__item">
2740
+ <a href="#" class="pf-v6-c-nav__link">
2741
+ <span class="pf-v6-c-nav__link-text">System panel</span>
2742
+ </a>
2743
+ </li>
2744
+ <li class="pf-v6-c-nav__item">
2745
+ <a
2746
+ href="#"
2747
+ class="pf-v6-c-nav__link pf-m-current"
2748
+ aria-current="page"
2749
+ >
2750
+ <span class="pf-v6-c-nav__link-text">Policy</span>
2751
+ </a>
2752
+ </li>
2753
+ <li class="pf-v6-c-nav__item">
2754
+ <a href="#" class="pf-v6-c-nav__link">
2755
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
2756
+ </a>
2757
+ </li>
2758
+ <li class="pf-v6-c-nav__item">
2759
+ <a href="#" class="pf-v6-c-nav__link">
2760
+ <span class="pf-v6-c-nav__link-text">Network services</span>
2761
+ </a>
2762
+ </li>
2763
+ <li class="pf-v6-c-nav__item">
2764
+ <a href="#" class="pf-v6-c-nav__link">
2765
+ <span class="pf-v6-c-nav__link-text">Server</span>
2766
+ </a>
2767
+ </li>
2768
+ </ul>
2769
+ </nav>
2770
+ </div>
2261
2771
  </div>
2262
2772
  </div>
2263
2773
  <div class="pf-v6-c-page__main-container" tabindex="-1">
@@ -2276,21 +2786,57 @@ wrapperTag: div
2276
2786
  </li>
2277
2787
  <li class="pf-v6-c-breadcrumb__item">
2278
2788
  <span class="pf-v6-c-breadcrumb__item-divider">
2279
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2789
+ <svg
2790
+ class="pf-v6-svg"
2791
+ viewBox="0 0 20 20"
2792
+ fill="currentColor"
2793
+ aria-hidden="true"
2794
+ role="img"
2795
+ width="1em"
2796
+ height="1em"
2797
+ >
2798
+ <path
2799
+ 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"
2800
+ />
2801
+ </svg>
2280
2802
  </span>
2281
2803
 
2282
2804
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
2283
2805
  </li>
2284
2806
  <li class="pf-v6-c-breadcrumb__item">
2285
2807
  <span class="pf-v6-c-breadcrumb__item-divider">
2286
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2808
+ <svg
2809
+ class="pf-v6-svg"
2810
+ viewBox="0 0 20 20"
2811
+ fill="currentColor"
2812
+ aria-hidden="true"
2813
+ role="img"
2814
+ width="1em"
2815
+ height="1em"
2816
+ >
2817
+ <path
2818
+ 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"
2819
+ />
2820
+ </svg>
2287
2821
  </span>
2288
2822
 
2289
2823
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
2290
2824
  </li>
2291
2825
  <li class="pf-v6-c-breadcrumb__item">
2292
2826
  <span class="pf-v6-c-breadcrumb__item-divider">
2293
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2827
+ <svg
2828
+ class="pf-v6-svg"
2829
+ viewBox="0 0 20 20"
2830
+ fill="currentColor"
2831
+ aria-hidden="true"
2832
+ role="img"
2833
+ width="1em"
2834
+ height="1em"
2835
+ >
2836
+ <path
2837
+ 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"
2838
+ />
2839
+ </svg>
2294
2840
  </span>
2295
2841
 
2296
2842
  <a
@@ -2303,9 +2849,15 @@ wrapperTag: div
2303
2849
  </nav>
2304
2850
  </div>
2305
2851
  </section>
2306
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
2852
+ <section
2853
+ class="pf-v6-c-page__main-section pf-m-limit-width"
2854
+ aria-labelledby="main-title"
2855
+ >
2307
2856
  <div class="pf-v6-c-page__main-body">
2308
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
2857
+ <h1
2858
+ class="pf-v6-c-content--h1 pf-m-page-title"
2859
+ id="main-title"
2860
+ >Main title</h1>
2309
2861
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
2310
2862
  </div>
2311
2863
  </section>
@@ -2484,10 +3036,8 @@ wrapperTag: div
2484
3036
  <span class="pf-v6-c-button__text">Skip to content</span>
2485
3037
  </a>
2486
3038
  </div>
2487
- <header
2488
- class="pf-v6-c-masthead"
2489
- id="page-demo-sticky-section-bottom-masthead"
2490
- >
3039
+
3040
+ <header class="pf-v6-c-masthead" id="page-demo-sticky-section-bottom-docked">
2491
3041
  <div class="pf-v6-c-masthead__main">
2492
3042
  <span class="pf-v6-c-masthead__toggle">
2493
3043
  <button
@@ -2529,7 +3079,7 @@ wrapperTag: div
2529
3079
  y1="2.25860997e-13%"
2530
3080
  x2="32%"
2531
3081
  y2="100%"
2532
- id="linearGradient-page-demo-sticky-section-bottom-masthead"
3082
+ id="linearGradient-page-demo-sticky-section-bottom-docked"
2533
3083
  >
2534
3084
  <stop stop-color="#2B9AF3" offset="0%" />
2535
3085
  <stop
@@ -2583,11 +3133,11 @@ wrapperTag: div
2583
3133
  />
2584
3134
  <path
2585
3135
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
2586
- fill="url(#linearGradient-page-demo-sticky-section-bottom-masthead)"
3136
+ fill="url(#linearGradient-page-demo-sticky-section-bottom-docked)"
2587
3137
  />
2588
3138
  <path
2589
3139
  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"
2590
- fill="url(#linearGradient-page-demo-sticky-section-bottom-masthead)"
3140
+ fill="url(#linearGradient-page-demo-sticky-section-bottom-docked)"
2591
3141
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
2592
3142
  />
2593
3143
  </g>
@@ -2599,7 +3149,7 @@ wrapperTag: div
2599
3149
  <div class="pf-v6-c-masthead__content">
2600
3150
  <div
2601
3151
  class="pf-v6-c-toolbar pf-m-static"
2602
- id="page-demo-sticky-section-bottom-masthead-toolbar"
3152
+ id="page-demo-sticky-section-bottom-docked-toolbar"
2603
3153
  >
2604
3154
  <div class="pf-v6-c-toolbar__content">
2605
3155
  <div class="pf-v6-c-toolbar__content-section">
@@ -2617,7 +3167,19 @@ wrapperTag: div
2617
3167
  aria-label="Application launcher"
2618
3168
  >
2619
3169
  <span class="pf-v6-c-menu-toggle__icon">
2620
- <i class="fas fa-th" aria-hidden="true"></i>
3170
+ <svg
3171
+ class="pf-v6-svg"
3172
+ viewBox="0 0 512 512"
3173
+ fill="currentColor"
3174
+ aria-hidden="true"
3175
+ role="img"
3176
+ width="1em"
3177
+ height="1em"
3178
+ >
3179
+ <path
3180
+ 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"
3181
+ />
3182
+ </svg>
2621
3183
  </span>
2622
3184
  </button>
2623
3185
  </div>
@@ -2629,7 +3191,19 @@ wrapperTag: div
2629
3191
  aria-label="Settings"
2630
3192
  >
2631
3193
  <span class="pf-v6-c-menu-toggle__icon">
2632
- <i class="fas fa-cog" aria-hidden="true"></i>
3194
+ <svg
3195
+ class="pf-v6-svg"
3196
+ viewBox="0 0 32 32"
3197
+ fill="currentColor"
3198
+ aria-hidden="true"
3199
+ role="img"
3200
+ width="1em"
3201
+ height="1em"
3202
+ >
3203
+ <path
3204
+ 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"
3205
+ />
3206
+ </svg>
2633
3207
  </span>
2634
3208
  </button>
2635
3209
  </div>
@@ -2641,7 +3215,19 @@ wrapperTag: div
2641
3215
  aria-label="Help"
2642
3216
  >
2643
3217
  <span class="pf-v6-c-menu-toggle__icon">
2644
- <i class="fas fa-question-circle" aria-hidden="true"></i>
3218
+ <svg
3219
+ class="pf-v6-svg"
3220
+ viewBox="0 0 512 512"
3221
+ fill="currentColor"
3222
+ aria-hidden="true"
3223
+ role="img"
3224
+ width="1em"
3225
+ height="1em"
3226
+ >
3227
+ <path
3228
+ 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"
3229
+ />
3230
+ </svg>
2645
3231
  </span>
2646
3232
  </button>
2647
3233
  </div>
@@ -2655,7 +3241,19 @@ wrapperTag: div
2655
3241
  aria-label="Actions"
2656
3242
  >
2657
3243
  <span class="pf-v6-c-menu-toggle__icon">
2658
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
3244
+ <svg
3245
+ class="pf-v6-svg"
3246
+ viewBox="0 0 32 32"
3247
+ fill="currentColor"
3248
+ aria-hidden="true"
3249
+ role="img"
3250
+ width="1em"
3251
+ height="1em"
3252
+ >
3253
+ <path
3254
+ 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"
3255
+ />
3256
+ </svg>
2659
3257
  </span>
2660
3258
  </button>
2661
3259
  </div>
@@ -2666,44 +3264,46 @@ wrapperTag: div
2666
3264
  </div>
2667
3265
  </header>
2668
3266
  <div class="pf-v6-c-page__sidebar">
2669
- <div class="pf-v6-c-page__sidebar-body">
2670
- <nav
2671
- class="pf-v6-c-nav"
2672
- id="page-demo-sticky-section-bottom-primary-nav"
2673
- aria-label="Global"
2674
- >
2675
- <ul class="pf-v6-c-nav__list" role="list">
2676
- <li class="pf-v6-c-nav__item">
2677
- <a href="#" class="pf-v6-c-nav__link">
2678
- <span class="pf-v6-c-nav__link-text">System panel</span>
2679
- </a>
2680
- </li>
2681
- <li class="pf-v6-c-nav__item">
2682
- <a
2683
- href="#"
2684
- class="pf-v6-c-nav__link pf-m-current"
2685
- aria-current="page"
2686
- >
2687
- <span class="pf-v6-c-nav__link-text">Policy</span>
2688
- </a>
2689
- </li>
2690
- <li class="pf-v6-c-nav__item">
2691
- <a href="#" class="pf-v6-c-nav__link">
2692
- <span class="pf-v6-c-nav__link-text">Authentication</span>
2693
- </a>
2694
- </li>
2695
- <li class="pf-v6-c-nav__item">
2696
- <a href="#" class="pf-v6-c-nav__link">
2697
- <span class="pf-v6-c-nav__link-text">Network services</span>
2698
- </a>
2699
- </li>
2700
- <li class="pf-v6-c-nav__item">
2701
- <a href="#" class="pf-v6-c-nav__link">
2702
- <span class="pf-v6-c-nav__link-text">Server</span>
2703
- </a>
2704
- </li>
2705
- </ul>
2706
- </nav>
3267
+ <div class="pf-v6-c-page__sidebar-main">
3268
+ <div class="pf-v6-c-page__sidebar-body">
3269
+ <nav
3270
+ class="pf-v6-c-nav"
3271
+ id="page-demo-sticky-section-bottom-primary-nav"
3272
+ aria-label="Global"
3273
+ >
3274
+ <ul class="pf-v6-c-nav__list" role="list">
3275
+ <li class="pf-v6-c-nav__item">
3276
+ <a href="#" class="pf-v6-c-nav__link">
3277
+ <span class="pf-v6-c-nav__link-text">System panel</span>
3278
+ </a>
3279
+ </li>
3280
+ <li class="pf-v6-c-nav__item">
3281
+ <a
3282
+ href="#"
3283
+ class="pf-v6-c-nav__link pf-m-current"
3284
+ aria-current="page"
3285
+ >
3286
+ <span class="pf-v6-c-nav__link-text">Policy</span>
3287
+ </a>
3288
+ </li>
3289
+ <li class="pf-v6-c-nav__item">
3290
+ <a href="#" class="pf-v6-c-nav__link">
3291
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
3292
+ </a>
3293
+ </li>
3294
+ <li class="pf-v6-c-nav__item">
3295
+ <a href="#" class="pf-v6-c-nav__link">
3296
+ <span class="pf-v6-c-nav__link-text">Network services</span>
3297
+ </a>
3298
+ </li>
3299
+ <li class="pf-v6-c-nav__item">
3300
+ <a href="#" class="pf-v6-c-nav__link">
3301
+ <span class="pf-v6-c-nav__link-text">Server</span>
3302
+ </a>
3303
+ </li>
3304
+ </ul>
3305
+ </nav>
3306
+ </div>
2707
3307
  </div>
2708
3308
  </div>
2709
3309
  <div class="pf-v6-c-page__main-container" tabindex="-1">
@@ -2721,21 +3321,57 @@ wrapperTag: div
2721
3321
  </li>
2722
3322
  <li class="pf-v6-c-breadcrumb__item">
2723
3323
  <span class="pf-v6-c-breadcrumb__item-divider">
2724
- <i class="fas fa-angle-right" aria-hidden="true"></i>
3324
+ <svg
3325
+ class="pf-v6-svg"
3326
+ viewBox="0 0 20 20"
3327
+ fill="currentColor"
3328
+ aria-hidden="true"
3329
+ role="img"
3330
+ width="1em"
3331
+ height="1em"
3332
+ >
3333
+ <path
3334
+ 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"
3335
+ />
3336
+ </svg>
2725
3337
  </span>
2726
3338
 
2727
3339
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
2728
3340
  </li>
2729
3341
  <li class="pf-v6-c-breadcrumb__item">
2730
3342
  <span class="pf-v6-c-breadcrumb__item-divider">
2731
- <i class="fas fa-angle-right" aria-hidden="true"></i>
3343
+ <svg
3344
+ class="pf-v6-svg"
3345
+ viewBox="0 0 20 20"
3346
+ fill="currentColor"
3347
+ aria-hidden="true"
3348
+ role="img"
3349
+ width="1em"
3350
+ height="1em"
3351
+ >
3352
+ <path
3353
+ 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"
3354
+ />
3355
+ </svg>
2732
3356
  </span>
2733
3357
 
2734
3358
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
2735
3359
  </li>
2736
3360
  <li class="pf-v6-c-breadcrumb__item">
2737
3361
  <span class="pf-v6-c-breadcrumb__item-divider">
2738
- <i class="fas fa-angle-right" aria-hidden="true"></i>
3362
+ <svg
3363
+ class="pf-v6-svg"
3364
+ viewBox="0 0 20 20"
3365
+ fill="currentColor"
3366
+ aria-hidden="true"
3367
+ role="img"
3368
+ width="1em"
3369
+ height="1em"
3370
+ >
3371
+ <path
3372
+ 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"
3373
+ />
3374
+ </svg>
2739
3375
  </span>
2740
3376
 
2741
3377
  <a
@@ -2748,9 +3384,15 @@ wrapperTag: div
2748
3384
  </nav>
2749
3385
  </div>
2750
3386
  </section>
2751
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
3387
+ <section
3388
+ class="pf-v6-c-page__main-section pf-m-limit-width"
3389
+ aria-labelledby="main-title"
3390
+ >
2752
3391
  <div class="pf-v6-c-page__main-body">
2753
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
3392
+ <h1
3393
+ class="pf-v6-c-content--h1 pf-m-page-title"
3394
+ id="main-title"
3395
+ >Main title</h1>
2754
3396
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
2755
3397
  </div>
2756
3398
  </section>
@@ -2935,7 +3577,8 @@ wrapperTag: div
2935
3577
  <span class="pf-v6-c-button__text">Skip to content</span>
2936
3578
  </a>
2937
3579
  </div>
2938
- <header class="pf-v6-c-masthead" id="page-demo-overflow-scroll-masthead">
3580
+
3581
+ <header class="pf-v6-c-masthead" id="page-demo-overflow-scroll-docked">
2939
3582
  <div class="pf-v6-c-masthead__main">
2940
3583
  <span class="pf-v6-c-masthead__toggle">
2941
3584
  <button
@@ -2977,7 +3620,7 @@ wrapperTag: div
2977
3620
  y1="2.25860997e-13%"
2978
3621
  x2="32%"
2979
3622
  y2="100%"
2980
- id="linearGradient-page-demo-overflow-scroll-masthead"
3623
+ id="linearGradient-page-demo-overflow-scroll-docked"
2981
3624
  >
2982
3625
  <stop stop-color="#2B9AF3" offset="0%" />
2983
3626
  <stop
@@ -3031,11 +3674,11 @@ wrapperTag: div
3031
3674
  />
3032
3675
  <path
3033
3676
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
3034
- fill="url(#linearGradient-page-demo-overflow-scroll-masthead)"
3677
+ fill="url(#linearGradient-page-demo-overflow-scroll-docked)"
3035
3678
  />
3036
3679
  <path
3037
3680
  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"
3038
- fill="url(#linearGradient-page-demo-overflow-scroll-masthead)"
3681
+ fill="url(#linearGradient-page-demo-overflow-scroll-docked)"
3039
3682
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
3040
3683
  />
3041
3684
  </g>
@@ -3047,7 +3690,7 @@ wrapperTag: div
3047
3690
  <div class="pf-v6-c-masthead__content">
3048
3691
  <div
3049
3692
  class="pf-v6-c-toolbar pf-m-static"
3050
- id="page-demo-overflow-scroll-masthead-toolbar"
3693
+ id="page-demo-overflow-scroll-docked-toolbar"
3051
3694
  >
3052
3695
  <div class="pf-v6-c-toolbar__content">
3053
3696
  <div class="pf-v6-c-toolbar__content-section">
@@ -3065,7 +3708,19 @@ wrapperTag: div
3065
3708
  aria-label="Application launcher"
3066
3709
  >
3067
3710
  <span class="pf-v6-c-menu-toggle__icon">
3068
- <i class="fas fa-th" aria-hidden="true"></i>
3711
+ <svg
3712
+ class="pf-v6-svg"
3713
+ viewBox="0 0 512 512"
3714
+ fill="currentColor"
3715
+ aria-hidden="true"
3716
+ role="img"
3717
+ width="1em"
3718
+ height="1em"
3719
+ >
3720
+ <path
3721
+ 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"
3722
+ />
3723
+ </svg>
3069
3724
  </span>
3070
3725
  </button>
3071
3726
  </div>
@@ -3077,7 +3732,19 @@ wrapperTag: div
3077
3732
  aria-label="Settings"
3078
3733
  >
3079
3734
  <span class="pf-v6-c-menu-toggle__icon">
3080
- <i class="fas fa-cog" aria-hidden="true"></i>
3735
+ <svg
3736
+ class="pf-v6-svg"
3737
+ viewBox="0 0 32 32"
3738
+ fill="currentColor"
3739
+ aria-hidden="true"
3740
+ role="img"
3741
+ width="1em"
3742
+ height="1em"
3743
+ >
3744
+ <path
3745
+ 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"
3746
+ />
3747
+ </svg>
3081
3748
  </span>
3082
3749
  </button>
3083
3750
  </div>
@@ -3089,7 +3756,19 @@ wrapperTag: div
3089
3756
  aria-label="Help"
3090
3757
  >
3091
3758
  <span class="pf-v6-c-menu-toggle__icon">
3092
- <i class="fas fa-question-circle" aria-hidden="true"></i>
3759
+ <svg
3760
+ class="pf-v6-svg"
3761
+ viewBox="0 0 512 512"
3762
+ fill="currentColor"
3763
+ aria-hidden="true"
3764
+ role="img"
3765
+ width="1em"
3766
+ height="1em"
3767
+ >
3768
+ <path
3769
+ 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"
3770
+ />
3771
+ </svg>
3093
3772
  </span>
3094
3773
  </button>
3095
3774
  </div>
@@ -3103,7 +3782,19 @@ wrapperTag: div
3103
3782
  aria-label="Actions"
3104
3783
  >
3105
3784
  <span class="pf-v6-c-menu-toggle__icon">
3106
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
3785
+ <svg
3786
+ class="pf-v6-svg"
3787
+ viewBox="0 0 32 32"
3788
+ fill="currentColor"
3789
+ aria-hidden="true"
3790
+ role="img"
3791
+ width="1em"
3792
+ height="1em"
3793
+ >
3794
+ <path
3795
+ 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"
3796
+ />
3797
+ </svg>
3107
3798
  </span>
3108
3799
  </button>
3109
3800
  </div>
@@ -3114,44 +3805,46 @@ wrapperTag: div
3114
3805
  </div>
3115
3806
  </header>
3116
3807
  <div class="pf-v6-c-page__sidebar">
3117
- <div class="pf-v6-c-page__sidebar-body">
3118
- <nav
3119
- class="pf-v6-c-nav"
3120
- id="page-demo-overflow-scroll-primary-nav"
3121
- aria-label="Global"
3122
- >
3123
- <ul class="pf-v6-c-nav__list" role="list">
3124
- <li class="pf-v6-c-nav__item">
3125
- <a href="#" class="pf-v6-c-nav__link">
3126
- <span class="pf-v6-c-nav__link-text">System panel</span>
3127
- </a>
3128
- </li>
3129
- <li class="pf-v6-c-nav__item">
3130
- <a
3131
- href="#"
3132
- class="pf-v6-c-nav__link pf-m-current"
3133
- aria-current="page"
3134
- >
3135
- <span class="pf-v6-c-nav__link-text">Policy</span>
3136
- </a>
3137
- </li>
3138
- <li class="pf-v6-c-nav__item">
3139
- <a href="#" class="pf-v6-c-nav__link">
3140
- <span class="pf-v6-c-nav__link-text">Authentication</span>
3141
- </a>
3142
- </li>
3143
- <li class="pf-v6-c-nav__item">
3144
- <a href="#" class="pf-v6-c-nav__link">
3145
- <span class="pf-v6-c-nav__link-text">Network services</span>
3146
- </a>
3147
- </li>
3148
- <li class="pf-v6-c-nav__item">
3149
- <a href="#" class="pf-v6-c-nav__link">
3150
- <span class="pf-v6-c-nav__link-text">Server</span>
3151
- </a>
3152
- </li>
3153
- </ul>
3154
- </nav>
3808
+ <div class="pf-v6-c-page__sidebar-main">
3809
+ <div class="pf-v6-c-page__sidebar-body">
3810
+ <nav
3811
+ class="pf-v6-c-nav"
3812
+ id="page-demo-overflow-scroll-primary-nav"
3813
+ aria-label="Global"
3814
+ >
3815
+ <ul class="pf-v6-c-nav__list" role="list">
3816
+ <li class="pf-v6-c-nav__item">
3817
+ <a href="#" class="pf-v6-c-nav__link">
3818
+ <span class="pf-v6-c-nav__link-text">System panel</span>
3819
+ </a>
3820
+ </li>
3821
+ <li class="pf-v6-c-nav__item">
3822
+ <a
3823
+ href="#"
3824
+ class="pf-v6-c-nav__link pf-m-current"
3825
+ aria-current="page"
3826
+ >
3827
+ <span class="pf-v6-c-nav__link-text">Policy</span>
3828
+ </a>
3829
+ </li>
3830
+ <li class="pf-v6-c-nav__item">
3831
+ <a href="#" class="pf-v6-c-nav__link">
3832
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
3833
+ </a>
3834
+ </li>
3835
+ <li class="pf-v6-c-nav__item">
3836
+ <a href="#" class="pf-v6-c-nav__link">
3837
+ <span class="pf-v6-c-nav__link-text">Network services</span>
3838
+ </a>
3839
+ </li>
3840
+ <li class="pf-v6-c-nav__item">
3841
+ <a href="#" class="pf-v6-c-nav__link">
3842
+ <span class="pf-v6-c-nav__link-text">Server</span>
3843
+ </a>
3844
+ </li>
3845
+ </ul>
3846
+ </nav>
3847
+ </div>
3155
3848
  </div>
3156
3849
  </div>
3157
3850
  <div class="pf-v6-c-page__main-container" tabindex="-1">
@@ -3169,21 +3862,57 @@ wrapperTag: div
3169
3862
  </li>
3170
3863
  <li class="pf-v6-c-breadcrumb__item">
3171
3864
  <span class="pf-v6-c-breadcrumb__item-divider">
3172
- <i class="fas fa-angle-right" aria-hidden="true"></i>
3865
+ <svg
3866
+ class="pf-v6-svg"
3867
+ viewBox="0 0 20 20"
3868
+ fill="currentColor"
3869
+ aria-hidden="true"
3870
+ role="img"
3871
+ width="1em"
3872
+ height="1em"
3873
+ >
3874
+ <path
3875
+ 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"
3876
+ />
3877
+ </svg>
3173
3878
  </span>
3174
3879
 
3175
3880
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
3176
3881
  </li>
3177
3882
  <li class="pf-v6-c-breadcrumb__item">
3178
3883
  <span class="pf-v6-c-breadcrumb__item-divider">
3179
- <i class="fas fa-angle-right" aria-hidden="true"></i>
3884
+ <svg
3885
+ class="pf-v6-svg"
3886
+ viewBox="0 0 20 20"
3887
+ fill="currentColor"
3888
+ aria-hidden="true"
3889
+ role="img"
3890
+ width="1em"
3891
+ height="1em"
3892
+ >
3893
+ <path
3894
+ 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"
3895
+ />
3896
+ </svg>
3180
3897
  </span>
3181
3898
 
3182
3899
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
3183
3900
  </li>
3184
3901
  <li class="pf-v6-c-breadcrumb__item">
3185
3902
  <span class="pf-v6-c-breadcrumb__item-divider">
3186
- <i class="fas fa-angle-right" aria-hidden="true"></i>
3903
+ <svg
3904
+ class="pf-v6-svg"
3905
+ viewBox="0 0 20 20"
3906
+ fill="currentColor"
3907
+ aria-hidden="true"
3908
+ role="img"
3909
+ width="1em"
3910
+ height="1em"
3911
+ >
3912
+ <path
3913
+ 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"
3914
+ />
3915
+ </svg>
3187
3916
  </span>
3188
3917
 
3189
3918
  <a
@@ -3198,9 +3927,13 @@ wrapperTag: div
3198
3927
  </section>
3199
3928
  <section
3200
3929
  class="pf-v6-c-page__main-section pf-m-limit-width pf-m-shadow-bottom"
3930
+ aria-labelledby="main-title"
3201
3931
  >
3202
3932
  <div class="pf-v6-c-page__main-body">
3203
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
3933
+ <h1
3934
+ class="pf-v6-c-content--h1 pf-m-page-title"
3935
+ id="main-title"
3936
+ >Main title</h1>
3204
3937
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
3205
3938
  </div>
3206
3939
  </section>
@@ -3388,7 +4121,8 @@ wrapperTag: div
3388
4121
  <span class="pf-v6-c-button__text">Skip to content</span>
3389
4122
  </a>
3390
4123
  </div>
3391
- <header class="pf-v6-c-masthead" id="page-demo-centered-section-masthead">
4124
+
4125
+ <header class="pf-v6-c-masthead" id="page-demo-centered-section-docked">
3392
4126
  <div class="pf-v6-c-masthead__main">
3393
4127
  <span class="pf-v6-c-masthead__toggle">
3394
4128
  <button
@@ -3430,7 +4164,7 @@ wrapperTag: div
3430
4164
  y1="2.25860997e-13%"
3431
4165
  x2="32%"
3432
4166
  y2="100%"
3433
- id="linearGradient-page-demo-centered-section-masthead"
4167
+ id="linearGradient-page-demo-centered-section-docked"
3434
4168
  >
3435
4169
  <stop stop-color="#2B9AF3" offset="0%" />
3436
4170
  <stop
@@ -3484,11 +4218,11 @@ wrapperTag: div
3484
4218
  />
3485
4219
  <path
3486
4220
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
3487
- fill="url(#linearGradient-page-demo-centered-section-masthead)"
4221
+ fill="url(#linearGradient-page-demo-centered-section-docked)"
3488
4222
  />
3489
4223
  <path
3490
4224
  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"
3491
- fill="url(#linearGradient-page-demo-centered-section-masthead)"
4225
+ fill="url(#linearGradient-page-demo-centered-section-docked)"
3492
4226
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
3493
4227
  />
3494
4228
  </g>
@@ -3500,7 +4234,7 @@ wrapperTag: div
3500
4234
  <div class="pf-v6-c-masthead__content">
3501
4235
  <div
3502
4236
  class="pf-v6-c-toolbar pf-m-static"
3503
- id="page-demo-centered-section-masthead-toolbar"
4237
+ id="page-demo-centered-section-docked-toolbar"
3504
4238
  >
3505
4239
  <div class="pf-v6-c-toolbar__content">
3506
4240
  <div class="pf-v6-c-toolbar__content-section">
@@ -3518,7 +4252,19 @@ wrapperTag: div
3518
4252
  aria-label="Application launcher"
3519
4253
  >
3520
4254
  <span class="pf-v6-c-menu-toggle__icon">
3521
- <i class="fas fa-th" aria-hidden="true"></i>
4255
+ <svg
4256
+ class="pf-v6-svg"
4257
+ viewBox="0 0 512 512"
4258
+ fill="currentColor"
4259
+ aria-hidden="true"
4260
+ role="img"
4261
+ width="1em"
4262
+ height="1em"
4263
+ >
4264
+ <path
4265
+ 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"
4266
+ />
4267
+ </svg>
3522
4268
  </span>
3523
4269
  </button>
3524
4270
  </div>
@@ -3530,7 +4276,19 @@ wrapperTag: div
3530
4276
  aria-label="Settings"
3531
4277
  >
3532
4278
  <span class="pf-v6-c-menu-toggle__icon">
3533
- <i class="fas fa-cog" aria-hidden="true"></i>
4279
+ <svg
4280
+ class="pf-v6-svg"
4281
+ viewBox="0 0 32 32"
4282
+ fill="currentColor"
4283
+ aria-hidden="true"
4284
+ role="img"
4285
+ width="1em"
4286
+ height="1em"
4287
+ >
4288
+ <path
4289
+ 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"
4290
+ />
4291
+ </svg>
3534
4292
  </span>
3535
4293
  </button>
3536
4294
  </div>
@@ -3542,7 +4300,19 @@ wrapperTag: div
3542
4300
  aria-label="Help"
3543
4301
  >
3544
4302
  <span class="pf-v6-c-menu-toggle__icon">
3545
- <i class="fas fa-question-circle" aria-hidden="true"></i>
4303
+ <svg
4304
+ class="pf-v6-svg"
4305
+ viewBox="0 0 512 512"
4306
+ fill="currentColor"
4307
+ aria-hidden="true"
4308
+ role="img"
4309
+ width="1em"
4310
+ height="1em"
4311
+ >
4312
+ <path
4313
+ 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"
4314
+ />
4315
+ </svg>
3546
4316
  </span>
3547
4317
  </button>
3548
4318
  </div>
@@ -3556,7 +4326,19 @@ wrapperTag: div
3556
4326
  aria-label="Actions"
3557
4327
  >
3558
4328
  <span class="pf-v6-c-menu-toggle__icon">
3559
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
4329
+ <svg
4330
+ class="pf-v6-svg"
4331
+ viewBox="0 0 32 32"
4332
+ fill="currentColor"
4333
+ aria-hidden="true"
4334
+ role="img"
4335
+ width="1em"
4336
+ height="1em"
4337
+ >
4338
+ <path
4339
+ 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"
4340
+ />
4341
+ </svg>
3560
4342
  </span>
3561
4343
  </button>
3562
4344
  </div>
@@ -3567,44 +4349,46 @@ wrapperTag: div
3567
4349
  </div>
3568
4350
  </header>
3569
4351
  <div class="pf-v6-c-page__sidebar">
3570
- <div class="pf-v6-c-page__sidebar-body">
3571
- <nav
3572
- class="pf-v6-c-nav"
3573
- id="page-demo-centered-section-primary-nav"
3574
- aria-label="Global"
3575
- >
3576
- <ul class="pf-v6-c-nav__list" role="list">
3577
- <li class="pf-v6-c-nav__item">
3578
- <a href="#" class="pf-v6-c-nav__link">
3579
- <span class="pf-v6-c-nav__link-text">System panel</span>
3580
- </a>
3581
- </li>
3582
- <li class="pf-v6-c-nav__item">
3583
- <a
3584
- href="#"
3585
- class="pf-v6-c-nav__link pf-m-current"
3586
- aria-current="page"
3587
- >
3588
- <span class="pf-v6-c-nav__link-text">Policy</span>
3589
- </a>
3590
- </li>
3591
- <li class="pf-v6-c-nav__item">
3592
- <a href="#" class="pf-v6-c-nav__link">
3593
- <span class="pf-v6-c-nav__link-text">Authentication</span>
3594
- </a>
3595
- </li>
3596
- <li class="pf-v6-c-nav__item">
3597
- <a href="#" class="pf-v6-c-nav__link">
3598
- <span class="pf-v6-c-nav__link-text">Network services</span>
3599
- </a>
3600
- </li>
3601
- <li class="pf-v6-c-nav__item">
3602
- <a href="#" class="pf-v6-c-nav__link">
3603
- <span class="pf-v6-c-nav__link-text">Server</span>
3604
- </a>
3605
- </li>
3606
- </ul>
3607
- </nav>
4352
+ <div class="pf-v6-c-page__sidebar-main">
4353
+ <div class="pf-v6-c-page__sidebar-body">
4354
+ <nav
4355
+ class="pf-v6-c-nav"
4356
+ id="page-demo-centered-section-primary-nav"
4357
+ aria-label="Global"
4358
+ >
4359
+ <ul class="pf-v6-c-nav__list" role="list">
4360
+ <li class="pf-v6-c-nav__item">
4361
+ <a href="#" class="pf-v6-c-nav__link">
4362
+ <span class="pf-v6-c-nav__link-text">System panel</span>
4363
+ </a>
4364
+ </li>
4365
+ <li class="pf-v6-c-nav__item">
4366
+ <a
4367
+ href="#"
4368
+ class="pf-v6-c-nav__link pf-m-current"
4369
+ aria-current="page"
4370
+ >
4371
+ <span class="pf-v6-c-nav__link-text">Policy</span>
4372
+ </a>
4373
+ </li>
4374
+ <li class="pf-v6-c-nav__item">
4375
+ <a href="#" class="pf-v6-c-nav__link">
4376
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
4377
+ </a>
4378
+ </li>
4379
+ <li class="pf-v6-c-nav__item">
4380
+ <a href="#" class="pf-v6-c-nav__link">
4381
+ <span class="pf-v6-c-nav__link-text">Network services</span>
4382
+ </a>
4383
+ </li>
4384
+ <li class="pf-v6-c-nav__item">
4385
+ <a href="#" class="pf-v6-c-nav__link">
4386
+ <span class="pf-v6-c-nav__link-text">Server</span>
4387
+ </a>
4388
+ </li>
4389
+ </ul>
4390
+ </nav>
4391
+ </div>
3608
4392
  </div>
3609
4393
  </div>
3610
4394
  <div class="pf-v6-c-page__main-container" tabindex="-1">
@@ -3615,10 +4399,11 @@ wrapperTag: div
3615
4399
  >
3616
4400
  <section
3617
4401
  class="pf-v6-c-page__main-section pf-m-limit-width pf-m-align-center"
4402
+ aria-labelledby="centered-page-sections-title"
3618
4403
  >
3619
4404
  <div class="pf-v6-c-page__main-body">
3620
4405
  <div class="pf-v6-c-content">
3621
- <h1>Centering page sections</h1>
4406
+ <h1 id="centered-page-sections-title">Centering page sections</h1>
3622
4407
  <p>
3623
4408
  When a width limited page section is wider than the value of
3624
4409
  <code>--pf-v6-c-page--section--m-limit-width--MaxWidth</code>, the section will be centered in the main section.
@@ -3630,6 +4415,7 @@ wrapperTag: div
3630
4415
  <hr class="pf-v6-c-divider" />
3631
4416
  <section
3632
4417
  class="pf-v6-c-page__main-section pf-m-limit-width pf-m-align-center"
4418
+ aria-label="Gallery cards section"
3633
4419
  >
3634
4420
  <div class="pf-v6-c-page__main-body">
3635
4421
  <div class="pf-v6-l-gallery pf-m-gutter">
@@ -3669,6 +4455,7 @@ wrapperTag: div
3669
4455
  <hr class="pf-v6-c-divider" />
3670
4456
  <section
3671
4457
  class="pf-v6-c-page__main-section pf-m-limit-width pf-m-align-center pf-v6-u-text-align-center"
4458
+ aria-label="Centered text section"
3672
4459
  >
3673
4460
  <div class="pf-v6-c-page__main-body">
3674
4461
  <div class="pf-v6-c-card">
@@ -3699,7 +4486,8 @@ wrapperTag: div
3699
4486
  <span class="pf-v6-c-button__text">Skip to content</span>
3700
4487
  </a>
3701
4488
  </div>
3702
- <header class="pf-v6-c-masthead" id="page-context-selector-masthead">
4489
+
4490
+ <header class="pf-v6-c-masthead" id="page-context-selector-docked">
3703
4491
  <div class="pf-v6-c-masthead__main">
3704
4492
  <span class="pf-v6-c-masthead__toggle">
3705
4493
  <button
@@ -3741,7 +4529,7 @@ wrapperTag: div
3741
4529
  y1="2.25860997e-13%"
3742
4530
  x2="32%"
3743
4531
  y2="100%"
3744
- id="linearGradient-page-context-selector-masthead"
4532
+ id="linearGradient-page-context-selector-docked"
3745
4533
  >
3746
4534
  <stop stop-color="#2B9AF3" offset="0%" />
3747
4535
  <stop
@@ -3795,11 +4583,11 @@ wrapperTag: div
3795
4583
  />
3796
4584
  <path
3797
4585
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
3798
- fill="url(#linearGradient-page-context-selector-masthead)"
4586
+ fill="url(#linearGradient-page-context-selector-docked)"
3799
4587
  />
3800
4588
  <path
3801
4589
  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"
3802
- fill="url(#linearGradient-page-context-selector-masthead)"
4590
+ fill="url(#linearGradient-page-context-selector-docked)"
3803
4591
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
3804
4592
  />
3805
4593
  </g>
@@ -3811,7 +4599,7 @@ wrapperTag: div
3811
4599
  <div class="pf-v6-c-masthead__content">
3812
4600
  <div
3813
4601
  class="pf-v6-c-toolbar pf-m-static"
3814
- id="page-context-selector-masthead-toolbar"
4602
+ id="page-context-selector-docked-toolbar"
3815
4603
  >
3816
4604
  <div class="pf-v6-c-toolbar__content">
3817
4605
  <div class="pf-v6-c-toolbar__content-section">
@@ -3829,7 +4617,19 @@ wrapperTag: div
3829
4617
  aria-label="Application launcher"
3830
4618
  >
3831
4619
  <span class="pf-v6-c-menu-toggle__icon">
3832
- <i class="fas fa-th" aria-hidden="true"></i>
4620
+ <svg
4621
+ class="pf-v6-svg"
4622
+ viewBox="0 0 512 512"
4623
+ fill="currentColor"
4624
+ aria-hidden="true"
4625
+ role="img"
4626
+ width="1em"
4627
+ height="1em"
4628
+ >
4629
+ <path
4630
+ 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"
4631
+ />
4632
+ </svg>
3833
4633
  </span>
3834
4634
  </button>
3835
4635
  </div>
@@ -3841,7 +4641,19 @@ wrapperTag: div
3841
4641
  aria-label="Settings"
3842
4642
  >
3843
4643
  <span class="pf-v6-c-menu-toggle__icon">
3844
- <i class="fas fa-cog" aria-hidden="true"></i>
4644
+ <svg
4645
+ class="pf-v6-svg"
4646
+ viewBox="0 0 32 32"
4647
+ fill="currentColor"
4648
+ aria-hidden="true"
4649
+ role="img"
4650
+ width="1em"
4651
+ height="1em"
4652
+ >
4653
+ <path
4654
+ 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"
4655
+ />
4656
+ </svg>
3845
4657
  </span>
3846
4658
  </button>
3847
4659
  </div>
@@ -3853,7 +4665,19 @@ wrapperTag: div
3853
4665
  aria-label="Help"
3854
4666
  >
3855
4667
  <span class="pf-v6-c-menu-toggle__icon">
3856
- <i class="fas fa-question-circle" aria-hidden="true"></i>
4668
+ <svg
4669
+ class="pf-v6-svg"
4670
+ viewBox="0 0 512 512"
4671
+ fill="currentColor"
4672
+ aria-hidden="true"
4673
+ role="img"
4674
+ width="1em"
4675
+ height="1em"
4676
+ >
4677
+ <path
4678
+ 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"
4679
+ />
4680
+ </svg>
3857
4681
  </span>
3858
4682
  </button>
3859
4683
  </div>
@@ -3867,7 +4691,19 @@ wrapperTag: div
3867
4691
  aria-label="Actions"
3868
4692
  >
3869
4693
  <span class="pf-v6-c-menu-toggle__icon">
3870
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
4694
+ <svg
4695
+ class="pf-v6-svg"
4696
+ viewBox="0 0 32 32"
4697
+ fill="currentColor"
4698
+ aria-hidden="true"
4699
+ role="img"
4700
+ width="1em"
4701
+ height="1em"
4702
+ >
4703
+ <path
4704
+ 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"
4705
+ />
4706
+ </svg>
3871
4707
  </span>
3872
4708
  </button>
3873
4709
  </div>
@@ -3878,61 +4714,87 @@ wrapperTag: div
3878
4714
  </div>
3879
4715
  </header>
3880
4716
  <div class="pf-v6-c-page__sidebar">
3881
- <div class="pf-v6-c-page__sidebar-body pf-m-context-selector">
3882
- <button
3883
- class="pf-v6-c-menu-toggle pf-m-full-width"
3884
- type="button"
3885
- aria-expanded="false"
3886
- >
3887
- <span class="pf-v6-c-menu-toggle__icon">
3888
- <i class="fas fa-cogs fa-fw" aria-hidden="true"></i>
3889
- </span>
3890
- <span class="pf-v6-c-menu-toggle__text">Administrator</span>
3891
- <span class="pf-v6-c-menu-toggle__controls">
3892
- <span class="pf-v6-c-menu-toggle__toggle-icon">
3893
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
3894
- </span>
3895
- </span>
3896
- </button>
3897
- </div>
3898
- <div class="pf-v6-c-page__sidebar-body">
3899
- <nav
3900
- class="pf-v6-c-nav"
3901
- id="page-context-selector-primary-nav"
3902
- aria-label="Global"
3903
- >
3904
- <ul class="pf-v6-c-nav__list" role="list">
3905
- <li class="pf-v6-c-nav__item">
3906
- <a href="#" class="pf-v6-c-nav__link">
3907
- <span class="pf-v6-c-nav__link-text">System panel</span>
3908
- </a>
3909
- </li>
3910
- <li class="pf-v6-c-nav__item">
3911
- <a
3912
- href="#"
3913
- class="pf-v6-c-nav__link pf-m-current"
3914
- aria-current="page"
4717
+ <div class="pf-v6-c-page__sidebar-main">
4718
+ <div class="pf-v6-c-page__sidebar-body pf-m-context-selector">
4719
+ <button
4720
+ class="pf-v6-c-menu-toggle pf-m-full-width"
4721
+ type="button"
4722
+ aria-expanded="false"
4723
+ >
4724
+ <span class="pf-v6-c-menu-toggle__icon">
4725
+ <svg
4726
+ class="pf-v6-svg"
4727
+ viewBox="0 0 640 512"
4728
+ fill="currentColor"
4729
+ aria-hidden="true"
4730
+ role="img"
4731
+ width="1em"
4732
+ height="1em"
3915
4733
  >
3916
- <span class="pf-v6-c-nav__link-text">Policy</span>
3917
- </a>
3918
- </li>
3919
- <li class="pf-v6-c-nav__item">
3920
- <a href="#" class="pf-v6-c-nav__link">
3921
- <span class="pf-v6-c-nav__link-text">Authentication</span>
3922
- </a>
3923
- </li>
3924
- <li class="pf-v6-c-nav__item">
3925
- <a href="#" class="pf-v6-c-nav__link">
3926
- <span class="pf-v6-c-nav__link-text">Network services</span>
3927
- </a>
3928
- </li>
3929
- <li class="pf-v6-c-nav__item">
3930
- <a href="#" class="pf-v6-c-nav__link">
3931
- <span class="pf-v6-c-nav__link-text">Server</span>
3932
- </a>
3933
- </li>
3934
- </ul>
3935
- </nav>
4734
+ <path
4735
+ d="M512.1 191l-8.2 14.3c-3 5.3-9.4 7.5-15.1 5.4-11.8-4.4-22.6-10.7-32.1-18.6-4.6-3.8-5.8-10.5-2.8-15.7l8.2-14.3c-6.9-8-12.3-17.3-15.9-27.4h-16.5c-6 0-11.2-4.3-12.2-10.3-2-12-2.1-24.6 0-37.1 1-6 6.2-10.4 12.2-10.4h16.5c3.6-10.1 9-19.4 15.9-27.4l-8.2-14.3c-3-5.2-1.9-11.9 2.8-15.7 9.5-7.9 20.4-14.2 32.1-18.6 5.7-2.1 12.1.1 15.1 5.4l8.2 14.3c10.5-1.9 21.2-1.9 31.7 0L552 6.3c3-5.3 9.4-7.5 15.1-5.4 11.8 4.4 22.6 10.7 32.1 18.6 4.6 3.8 5.8 10.5 2.8 15.7l-8.2 14.3c6.9 8 12.3 17.3 15.9 27.4h16.5c6 0 11.2 4.3 12.2 10.3 2 12 2.1 24.6 0 37.1-1 6-6.2 10.4-12.2 10.4h-16.5c-3.6 10.1-9 19.4-15.9 27.4l8.2 14.3c3 5.2 1.9 11.9-2.8 15.7-9.5 7.9-20.4 14.2-32.1 18.6-5.7 2.1-12.1-.1-15.1-5.4l-8.2-14.3c-10.4 1.9-21.2 1.9-31.7 0zm-10.5-58.8c38.5 29.6 82.4-14.3 52.8-52.8-38.5-29.7-82.4 14.3-52.8 52.8zM386.3 286.1l33.7 16.8c10.1 5.8 14.5 18.1 10.5 29.1-8.9 24.2-26.4 46.4-42.6 65.8-7.4 8.9-20.2 11.1-30.3 5.3l-29.1-16.8c-16 13.7-34.6 24.6-54.9 31.7v33.6c0 11.6-8.3 21.6-19.7 23.6-24.6 4.2-50.4 4.4-75.9 0-11.5-2-20-11.9-20-23.6V418c-20.3-7.2-38.9-18-54.9-31.7L74 403c-10 5.8-22.9 3.6-30.3-5.3-16.2-19.4-33.3-41.6-42.2-65.7-4-10.9.4-23.2 10.5-29.1l33.3-16.8c-3.9-20.9-3.9-42.4 0-63.4L12 205.8c-10.1-5.8-14.6-18.1-10.5-29 8.9-24.2 26-46.4 42.2-65.8 7.4-8.9 20.2-11.1 30.3-5.3l29.1 16.8c16-13.7 34.6-24.6 54.9-31.7V57.1c0-11.5 8.2-21.5 19.6-23.5 24.6-4.2 50.5-4.4 76-.1 11.5 2 20 11.9 20 23.6v33.6c20.3 7.2 38.9 18 54.9 31.7l29.1-16.8c10-5.8 22.9-3.6 30.3 5.3 16.2 19.4 33.2 41.6 42.1 65.8 4 10.9.1 23.2-10 29.1l-33.7 16.8c3.9 21 3.9 42.5 0 63.5zm-117.6 21.1c59.2-77-28.7-164.9-105.7-105.7-59.2 77 28.7 164.9 105.7 105.7zm243.4 182.7l-8.2 14.3c-3 5.3-9.4 7.5-15.1 5.4-11.8-4.4-22.6-10.7-32.1-18.6-4.6-3.8-5.8-10.5-2.8-15.7l8.2-14.3c-6.9-8-12.3-17.3-15.9-27.4h-16.5c-6 0-11.2-4.3-12.2-10.3-2-12-2.1-24.6 0-37.1 1-6 6.2-10.4 12.2-10.4h16.5c3.6-10.1 9-19.4 15.9-27.4l-8.2-14.3c-3-5.2-1.9-11.9 2.8-15.7 9.5-7.9 20.4-14.2 32.1-18.6 5.7-2.1 12.1.1 15.1 5.4l8.2 14.3c10.5-1.9 21.2-1.9 31.7 0l8.2-14.3c3-5.3 9.4-7.5 15.1-5.4 11.8 4.4 22.6 10.7 32.1 18.6 4.6 3.8 5.8 10.5 2.8 15.7l-8.2 14.3c6.9 8 12.3 17.3 15.9 27.4h16.5c6 0 11.2 4.3 12.2 10.3 2 12 2.1 24.6 0 37.1-1 6-6.2 10.4-12.2 10.4h-16.5c-3.6 10.1-9 19.4-15.9 27.4l8.2 14.3c3 5.2 1.9 11.9-2.8 15.7-9.5 7.9-20.4 14.2-32.1 18.6-5.7 2.1-12.1-.1-15.1-5.4l-8.2-14.3c-10.4 1.9-21.2 1.9-31.7 0zM501.6 431c38.5 29.6 82.4-14.3 52.8-52.8-38.5-29.6-82.4 14.3-52.8 52.8z"
4736
+ />
4737
+ </svg>
4738
+ </span>
4739
+ <span class="pf-v6-c-menu-toggle__text">Administrator</span>
4740
+ <span class="pf-v6-c-menu-toggle__controls">
4741
+ <span class="pf-v6-c-menu-toggle__toggle-icon">
4742
+ <svg
4743
+ class="pf-v6-svg"
4744
+ viewBox="0 0 20 20"
4745
+ fill="currentColor"
4746
+ aria-hidden="true"
4747
+ role="img"
4748
+ width="1em"
4749
+ height="1em"
4750
+ >
4751
+ <path
4752
+ d="M18.92 5.62C18.77 5.25 18.4 5 18 5H2a1.003 1.003 0 0 0-.71 1.71l7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65c.29-.29.37-.72.22-1.09Z"
4753
+ />
4754
+ </svg>
4755
+ </span>
4756
+ </span>
4757
+ </button>
4758
+ </div>
4759
+ <div class="pf-v6-c-page__sidebar-body">
4760
+ <nav
4761
+ class="pf-v6-c-nav"
4762
+ id="page-context-selector-primary-nav"
4763
+ aria-label="Global"
4764
+ >
4765
+ <ul class="pf-v6-c-nav__list" role="list">
4766
+ <li class="pf-v6-c-nav__item">
4767
+ <a href="#" class="pf-v6-c-nav__link">
4768
+ <span class="pf-v6-c-nav__link-text">System panel</span>
4769
+ </a>
4770
+ </li>
4771
+ <li class="pf-v6-c-nav__item">
4772
+ <a
4773
+ href="#"
4774
+ class="pf-v6-c-nav__link pf-m-current"
4775
+ aria-current="page"
4776
+ >
4777
+ <span class="pf-v6-c-nav__link-text">Policy</span>
4778
+ </a>
4779
+ </li>
4780
+ <li class="pf-v6-c-nav__item">
4781
+ <a href="#" class="pf-v6-c-nav__link">
4782
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
4783
+ </a>
4784
+ </li>
4785
+ <li class="pf-v6-c-nav__item">
4786
+ <a href="#" class="pf-v6-c-nav__link">
4787
+ <span class="pf-v6-c-nav__link-text">Network services</span>
4788
+ </a>
4789
+ </li>
4790
+ <li class="pf-v6-c-nav__item">
4791
+ <a href="#" class="pf-v6-c-nav__link">
4792
+ <span class="pf-v6-c-nav__link-text">Server</span>
4793
+ </a>
4794
+ </li>
4795
+ </ul>
4796
+ </nav>
4797
+ </div>
3936
4798
  </div>
3937
4799
  </div>
3938
4800
  <div class="pf-v6-c-page__main-container" tabindex="-1">
@@ -3950,21 +4812,57 @@ wrapperTag: div
3950
4812
  </li>
3951
4813
  <li class="pf-v6-c-breadcrumb__item">
3952
4814
  <span class="pf-v6-c-breadcrumb__item-divider">
3953
- <i class="fas fa-angle-right" aria-hidden="true"></i>
4815
+ <svg
4816
+ class="pf-v6-svg"
4817
+ viewBox="0 0 20 20"
4818
+ fill="currentColor"
4819
+ aria-hidden="true"
4820
+ role="img"
4821
+ width="1em"
4822
+ height="1em"
4823
+ >
4824
+ <path
4825
+ 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"
4826
+ />
4827
+ </svg>
3954
4828
  </span>
3955
4829
 
3956
4830
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
3957
4831
  </li>
3958
4832
  <li class="pf-v6-c-breadcrumb__item">
3959
4833
  <span class="pf-v6-c-breadcrumb__item-divider">
3960
- <i class="fas fa-angle-right" aria-hidden="true"></i>
4834
+ <svg
4835
+ class="pf-v6-svg"
4836
+ viewBox="0 0 20 20"
4837
+ fill="currentColor"
4838
+ aria-hidden="true"
4839
+ role="img"
4840
+ width="1em"
4841
+ height="1em"
4842
+ >
4843
+ <path
4844
+ 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"
4845
+ />
4846
+ </svg>
3961
4847
  </span>
3962
4848
 
3963
4849
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
3964
4850
  </li>
3965
4851
  <li class="pf-v6-c-breadcrumb__item">
3966
4852
  <span class="pf-v6-c-breadcrumb__item-divider">
3967
- <i class="fas fa-angle-right" aria-hidden="true"></i>
4853
+ <svg
4854
+ class="pf-v6-svg"
4855
+ viewBox="0 0 20 20"
4856
+ fill="currentColor"
4857
+ aria-hidden="true"
4858
+ role="img"
4859
+ width="1em"
4860
+ height="1em"
4861
+ >
4862
+ <path
4863
+ 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"
4864
+ />
4865
+ </svg>
3968
4866
  </span>
3969
4867
 
3970
4868
  <a
@@ -3977,9 +4875,15 @@ wrapperTag: div
3977
4875
  </nav>
3978
4876
  </div>
3979
4877
  </section>
3980
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
4878
+ <section
4879
+ class="pf-v6-c-page__main-section pf-m-limit-width"
4880
+ aria-labelledby="main-title"
4881
+ >
3981
4882
  <div class="pf-v6-c-page__main-body">
3982
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
4883
+ <h1
4884
+ class="pf-v6-c-content--h1 pf-m-page-title"
4885
+ id="main-title"
4886
+ >Main title</h1>
3983
4887
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
3984
4888
  </div>
3985
4889
  </section>
@@ -4037,7 +4941,8 @@ wrapperTag: div
4037
4941
  <span class="pf-v6-c-button__text">Skip to content</span>
4038
4942
  </a>
4039
4943
  </div>
4040
- <header class="pf-v6-c-masthead" id="page-context-selector-expanded-masthead">
4944
+
4945
+ <header class="pf-v6-c-masthead" id="page-context-selector-expanded-docked">
4041
4946
  <div class="pf-v6-c-masthead__main">
4042
4947
  <span class="pf-v6-c-masthead__toggle">
4043
4948
  <button
@@ -4079,7 +4984,7 @@ wrapperTag: div
4079
4984
  y1="2.25860997e-13%"
4080
4985
  x2="32%"
4081
4986
  y2="100%"
4082
- id="linearGradient-page-context-selector-expanded-masthead"
4987
+ id="linearGradient-page-context-selector-expanded-docked"
4083
4988
  >
4084
4989
  <stop stop-color="#2B9AF3" offset="0%" />
4085
4990
  <stop
@@ -4133,11 +5038,11 @@ wrapperTag: div
4133
5038
  />
4134
5039
  <path
4135
5040
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
4136
- fill="url(#linearGradient-page-context-selector-expanded-masthead)"
5041
+ fill="url(#linearGradient-page-context-selector-expanded-docked)"
4137
5042
  />
4138
5043
  <path
4139
5044
  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"
4140
- fill="url(#linearGradient-page-context-selector-expanded-masthead)"
5045
+ fill="url(#linearGradient-page-context-selector-expanded-docked)"
4141
5046
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
4142
5047
  />
4143
5048
  </g>
@@ -4149,7 +5054,7 @@ wrapperTag: div
4149
5054
  <div class="pf-v6-c-masthead__content">
4150
5055
  <div
4151
5056
  class="pf-v6-c-toolbar pf-m-static"
4152
- id="page-context-selector-expanded-masthead-toolbar"
5057
+ id="page-context-selector-expanded-docked-toolbar"
4153
5058
  >
4154
5059
  <div class="pf-v6-c-toolbar__content">
4155
5060
  <div class="pf-v6-c-toolbar__content-section">
@@ -4167,7 +5072,19 @@ wrapperTag: div
4167
5072
  aria-label="Application launcher"
4168
5073
  >
4169
5074
  <span class="pf-v6-c-menu-toggle__icon">
4170
- <i class="fas fa-th" aria-hidden="true"></i>
5075
+ <svg
5076
+ class="pf-v6-svg"
5077
+ viewBox="0 0 512 512"
5078
+ fill="currentColor"
5079
+ aria-hidden="true"
5080
+ role="img"
5081
+ width="1em"
5082
+ height="1em"
5083
+ >
5084
+ <path
5085
+ 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"
5086
+ />
5087
+ </svg>
4171
5088
  </span>
4172
5089
  </button>
4173
5090
  </div>
@@ -4179,7 +5096,19 @@ wrapperTag: div
4179
5096
  aria-label="Settings"
4180
5097
  >
4181
5098
  <span class="pf-v6-c-menu-toggle__icon">
4182
- <i class="fas fa-cog" aria-hidden="true"></i>
5099
+ <svg
5100
+ class="pf-v6-svg"
5101
+ viewBox="0 0 32 32"
5102
+ fill="currentColor"
5103
+ aria-hidden="true"
5104
+ role="img"
5105
+ width="1em"
5106
+ height="1em"
5107
+ >
5108
+ <path
5109
+ 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"
5110
+ />
5111
+ </svg>
4183
5112
  </span>
4184
5113
  </button>
4185
5114
  </div>
@@ -4191,7 +5120,19 @@ wrapperTag: div
4191
5120
  aria-label="Help"
4192
5121
  >
4193
5122
  <span class="pf-v6-c-menu-toggle__icon">
4194
- <i class="fas fa-question-circle" aria-hidden="true"></i>
5123
+ <svg
5124
+ class="pf-v6-svg"
5125
+ viewBox="0 0 512 512"
5126
+ fill="currentColor"
5127
+ aria-hidden="true"
5128
+ role="img"
5129
+ width="1em"
5130
+ height="1em"
5131
+ >
5132
+ <path
5133
+ 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"
5134
+ />
5135
+ </svg>
4195
5136
  </span>
4196
5137
  </button>
4197
5138
  </div>
@@ -4205,7 +5146,19 @@ wrapperTag: div
4205
5146
  aria-label="Actions"
4206
5147
  >
4207
5148
  <span class="pf-v6-c-menu-toggle__icon">
4208
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
5149
+ <svg
5150
+ class="pf-v6-svg"
5151
+ viewBox="0 0 32 32"
5152
+ fill="currentColor"
5153
+ aria-hidden="true"
5154
+ role="img"
5155
+ width="1em"
5156
+ height="1em"
5157
+ >
5158
+ <path
5159
+ 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"
5160
+ />
5161
+ </svg>
4209
5162
  </span>
4210
5163
  </button>
4211
5164
  </div>
@@ -4216,98 +5169,148 @@ wrapperTag: div
4216
5169
  </div>
4217
5170
  </header>
4218
5171
  <div class="pf-v6-c-page__sidebar">
4219
- <div class="pf-v6-c-page__sidebar-body pf-m-context-selector">
4220
- <button
4221
- class="pf-v6-c-menu-toggle pf-m-full-width pf-m-expanded"
4222
- type="button"
4223
- aria-expanded="true"
4224
- >
4225
- <span class="pf-v6-c-menu-toggle__icon">
4226
- <i class="fas fa-cogs fa-fw" aria-hidden="true"></i>
4227
- </span>
4228
- <span class="pf-v6-c-menu-toggle__text">Administrator</span>
4229
- <span class="pf-v6-c-menu-toggle__controls">
4230
- <span class="pf-v6-c-menu-toggle__toggle-icon">
4231
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
5172
+ <div class="pf-v6-c-page__sidebar-main">
5173
+ <div class="pf-v6-c-page__sidebar-body pf-m-context-selector">
5174
+ <button
5175
+ class="pf-v6-c-menu-toggle pf-m-full-width pf-m-expanded"
5176
+ type="button"
5177
+ aria-expanded="true"
5178
+ >
5179
+ <span class="pf-v6-c-menu-toggle__icon">
5180
+ <svg
5181
+ class="pf-v6-svg"
5182
+ viewBox="0 0 640 512"
5183
+ fill="currentColor"
5184
+ aria-hidden="true"
5185
+ role="img"
5186
+ width="1em"
5187
+ height="1em"
5188
+ >
5189
+ <path
5190
+ d="M512.1 191l-8.2 14.3c-3 5.3-9.4 7.5-15.1 5.4-11.8-4.4-22.6-10.7-32.1-18.6-4.6-3.8-5.8-10.5-2.8-15.7l8.2-14.3c-6.9-8-12.3-17.3-15.9-27.4h-16.5c-6 0-11.2-4.3-12.2-10.3-2-12-2.1-24.6 0-37.1 1-6 6.2-10.4 12.2-10.4h16.5c3.6-10.1 9-19.4 15.9-27.4l-8.2-14.3c-3-5.2-1.9-11.9 2.8-15.7 9.5-7.9 20.4-14.2 32.1-18.6 5.7-2.1 12.1.1 15.1 5.4l8.2 14.3c10.5-1.9 21.2-1.9 31.7 0L552 6.3c3-5.3 9.4-7.5 15.1-5.4 11.8 4.4 22.6 10.7 32.1 18.6 4.6 3.8 5.8 10.5 2.8 15.7l-8.2 14.3c6.9 8 12.3 17.3 15.9 27.4h16.5c6 0 11.2 4.3 12.2 10.3 2 12 2.1 24.6 0 37.1-1 6-6.2 10.4-12.2 10.4h-16.5c-3.6 10.1-9 19.4-15.9 27.4l8.2 14.3c3 5.2 1.9 11.9-2.8 15.7-9.5 7.9-20.4 14.2-32.1 18.6-5.7 2.1-12.1-.1-15.1-5.4l-8.2-14.3c-10.4 1.9-21.2 1.9-31.7 0zm-10.5-58.8c38.5 29.6 82.4-14.3 52.8-52.8-38.5-29.7-82.4 14.3-52.8 52.8zM386.3 286.1l33.7 16.8c10.1 5.8 14.5 18.1 10.5 29.1-8.9 24.2-26.4 46.4-42.6 65.8-7.4 8.9-20.2 11.1-30.3 5.3l-29.1-16.8c-16 13.7-34.6 24.6-54.9 31.7v33.6c0 11.6-8.3 21.6-19.7 23.6-24.6 4.2-50.4 4.4-75.9 0-11.5-2-20-11.9-20-23.6V418c-20.3-7.2-38.9-18-54.9-31.7L74 403c-10 5.8-22.9 3.6-30.3-5.3-16.2-19.4-33.3-41.6-42.2-65.7-4-10.9.4-23.2 10.5-29.1l33.3-16.8c-3.9-20.9-3.9-42.4 0-63.4L12 205.8c-10.1-5.8-14.6-18.1-10.5-29 8.9-24.2 26-46.4 42.2-65.8 7.4-8.9 20.2-11.1 30.3-5.3l29.1 16.8c16-13.7 34.6-24.6 54.9-31.7V57.1c0-11.5 8.2-21.5 19.6-23.5 24.6-4.2 50.5-4.4 76-.1 11.5 2 20 11.9 20 23.6v33.6c20.3 7.2 38.9 18 54.9 31.7l29.1-16.8c10-5.8 22.9-3.6 30.3 5.3 16.2 19.4 33.2 41.6 42.1 65.8 4 10.9.1 23.2-10 29.1l-33.7 16.8c3.9 21 3.9 42.5 0 63.5zm-117.6 21.1c59.2-77-28.7-164.9-105.7-105.7-59.2 77 28.7 164.9 105.7 105.7zm243.4 182.7l-8.2 14.3c-3 5.3-9.4 7.5-15.1 5.4-11.8-4.4-22.6-10.7-32.1-18.6-4.6-3.8-5.8-10.5-2.8-15.7l8.2-14.3c-6.9-8-12.3-17.3-15.9-27.4h-16.5c-6 0-11.2-4.3-12.2-10.3-2-12-2.1-24.6 0-37.1 1-6 6.2-10.4 12.2-10.4h16.5c3.6-10.1 9-19.4 15.9-27.4l-8.2-14.3c-3-5.2-1.9-11.9 2.8-15.7 9.5-7.9 20.4-14.2 32.1-18.6 5.7-2.1 12.1.1 15.1 5.4l8.2 14.3c10.5-1.9 21.2-1.9 31.7 0l8.2-14.3c3-5.3 9.4-7.5 15.1-5.4 11.8 4.4 22.6 10.7 32.1 18.6 4.6 3.8 5.8 10.5 2.8 15.7l-8.2 14.3c6.9 8 12.3 17.3 15.9 27.4h16.5c6 0 11.2 4.3 12.2 10.3 2 12 2.1 24.6 0 37.1-1 6-6.2 10.4-12.2 10.4h-16.5c-3.6 10.1-9 19.4-15.9 27.4l8.2 14.3c3 5.2 1.9 11.9-2.8 15.7-9.5 7.9-20.4 14.2-32.1 18.6-5.7 2.1-12.1-.1-15.1-5.4l-8.2-14.3c-10.4 1.9-21.2 1.9-31.7 0zM501.6 431c38.5 29.6 82.4-14.3 52.8-52.8-38.5-29.6-82.4 14.3-52.8 52.8z"
5191
+ />
5192
+ </svg>
5193
+ </span>
5194
+ <span class="pf-v6-c-menu-toggle__text">Administrator</span>
5195
+ <span class="pf-v6-c-menu-toggle__controls">
5196
+ <span class="pf-v6-c-menu-toggle__toggle-icon">
5197
+ <svg
5198
+ class="pf-v6-svg"
5199
+ viewBox="0 0 20 20"
5200
+ fill="currentColor"
5201
+ aria-hidden="true"
5202
+ role="img"
5203
+ width="1em"
5204
+ height="1em"
5205
+ >
5206
+ <path
5207
+ d="M18.92 5.62C18.77 5.25 18.4 5 18 5H2a1.003 1.003 0 0 0-.71 1.71l7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65c.29-.29.37-.72.22-1.09Z"
5208
+ />
5209
+ </svg>
5210
+ </span>
4232
5211
  </span>
4233
- </span>
4234
- </button>
4235
- <div class="pf-v6-c-menu">
4236
- <div class="pf-v6-c-menu__content">
4237
- <ul class="pf-v6-c-menu__list" role="menu">
4238
- <li class="pf-v6-c-menu__list-item" role="none">
4239
- <button class="pf-v6-c-menu__item" type="button" role="menuitem">
4240
- <span class="pf-v6-c-menu__item-main">
4241
- <span class="pf-v6-c-menu__item-icon">
4242
- <i class="fas fa-fw fa-cogs" aria-hidden="true"></i>
5212
+ </button>
5213
+ <div class="pf-v6-c-menu">
5214
+ <div class="pf-v6-c-menu__content">
5215
+ <ul class="pf-v6-c-menu__list" role="menu">
5216
+ <li class="pf-v6-c-menu__list-item" role="none">
5217
+ <button
5218
+ class="pf-v6-c-menu__item"
5219
+ type="button"
5220
+ role="menuitem"
5221
+ >
5222
+ <span class="pf-v6-c-menu__item-main">
5223
+ <span class="pf-v6-c-menu__item-icon">
5224
+ <svg
5225
+ class="pf-v6-svg"
5226
+ viewBox="0 0 640 512"
5227
+ fill="currentColor"
5228
+ aria-hidden="true"
5229
+ role="img"
5230
+ width="1em"
5231
+ height="1em"
5232
+ >
5233
+ <path
5234
+ d="M512.1 191l-8.2 14.3c-3 5.3-9.4 7.5-15.1 5.4-11.8-4.4-22.6-10.7-32.1-18.6-4.6-3.8-5.8-10.5-2.8-15.7l8.2-14.3c-6.9-8-12.3-17.3-15.9-27.4h-16.5c-6 0-11.2-4.3-12.2-10.3-2-12-2.1-24.6 0-37.1 1-6 6.2-10.4 12.2-10.4h16.5c3.6-10.1 9-19.4 15.9-27.4l-8.2-14.3c-3-5.2-1.9-11.9 2.8-15.7 9.5-7.9 20.4-14.2 32.1-18.6 5.7-2.1 12.1.1 15.1 5.4l8.2 14.3c10.5-1.9 21.2-1.9 31.7 0L552 6.3c3-5.3 9.4-7.5 15.1-5.4 11.8 4.4 22.6 10.7 32.1 18.6 4.6 3.8 5.8 10.5 2.8 15.7l-8.2 14.3c6.9 8 12.3 17.3 15.9 27.4h16.5c6 0 11.2 4.3 12.2 10.3 2 12 2.1 24.6 0 37.1-1 6-6.2 10.4-12.2 10.4h-16.5c-3.6 10.1-9 19.4-15.9 27.4l8.2 14.3c3 5.2 1.9 11.9-2.8 15.7-9.5 7.9-20.4 14.2-32.1 18.6-5.7 2.1-12.1-.1-15.1-5.4l-8.2-14.3c-10.4 1.9-21.2 1.9-31.7 0zm-10.5-58.8c38.5 29.6 82.4-14.3 52.8-52.8-38.5-29.7-82.4 14.3-52.8 52.8zM386.3 286.1l33.7 16.8c10.1 5.8 14.5 18.1 10.5 29.1-8.9 24.2-26.4 46.4-42.6 65.8-7.4 8.9-20.2 11.1-30.3 5.3l-29.1-16.8c-16 13.7-34.6 24.6-54.9 31.7v33.6c0 11.6-8.3 21.6-19.7 23.6-24.6 4.2-50.4 4.4-75.9 0-11.5-2-20-11.9-20-23.6V418c-20.3-7.2-38.9-18-54.9-31.7L74 403c-10 5.8-22.9 3.6-30.3-5.3-16.2-19.4-33.3-41.6-42.2-65.7-4-10.9.4-23.2 10.5-29.1l33.3-16.8c-3.9-20.9-3.9-42.4 0-63.4L12 205.8c-10.1-5.8-14.6-18.1-10.5-29 8.9-24.2 26-46.4 42.2-65.8 7.4-8.9 20.2-11.1 30.3-5.3l29.1 16.8c16-13.7 34.6-24.6 54.9-31.7V57.1c0-11.5 8.2-21.5 19.6-23.5 24.6-4.2 50.5-4.4 76-.1 11.5 2 20 11.9 20 23.6v33.6c20.3 7.2 38.9 18 54.9 31.7l29.1-16.8c10-5.8 22.9-3.6 30.3 5.3 16.2 19.4 33.2 41.6 42.1 65.8 4 10.9.1 23.2-10 29.1l-33.7 16.8c3.9 21 3.9 42.5 0 63.5zm-117.6 21.1c59.2-77-28.7-164.9-105.7-105.7-59.2 77 28.7 164.9 105.7 105.7zm243.4 182.7l-8.2 14.3c-3 5.3-9.4 7.5-15.1 5.4-11.8-4.4-22.6-10.7-32.1-18.6-4.6-3.8-5.8-10.5-2.8-15.7l8.2-14.3c-6.9-8-12.3-17.3-15.9-27.4h-16.5c-6 0-11.2-4.3-12.2-10.3-2-12-2.1-24.6 0-37.1 1-6 6.2-10.4 12.2-10.4h16.5c3.6-10.1 9-19.4 15.9-27.4l-8.2-14.3c-3-5.2-1.9-11.9 2.8-15.7 9.5-7.9 20.4-14.2 32.1-18.6 5.7-2.1 12.1.1 15.1 5.4l8.2 14.3c10.5-1.9 21.2-1.9 31.7 0l8.2-14.3c3-5.3 9.4-7.5 15.1-5.4 11.8 4.4 22.6 10.7 32.1 18.6 4.6 3.8 5.8 10.5 2.8 15.7l-8.2 14.3c6.9 8 12.3 17.3 15.9 27.4h16.5c6 0 11.2 4.3 12.2 10.3 2 12 2.1 24.6 0 37.1-1 6-6.2 10.4-12.2 10.4h-16.5c-3.6 10.1-9 19.4-15.9 27.4l8.2 14.3c3 5.2 1.9 11.9-2.8 15.7-9.5 7.9-20.4 14.2-32.1 18.6-5.7 2.1-12.1-.1-15.1-5.4l-8.2-14.3c-10.4 1.9-21.2 1.9-31.7 0zM501.6 431c38.5 29.6 82.4-14.3 52.8-52.8-38.5-29.6-82.4 14.3-52.8 52.8z"
5235
+ />
5236
+ </svg>
5237
+ </span>
5238
+ <span class="pf-v6-c-menu__item-text">Administrator</span>
4243
5239
  </span>
4244
- <span class="pf-v6-c-menu__item-text">Administrator</span>
4245
- </span>
4246
- </button>
4247
- </li>
4248
- <li class="pf-v6-c-menu__list-item" role="none">
4249
- <button class="pf-v6-c-menu__item" type="button" role="menuitem">
4250
- <span class="pf-v6-c-menu__item-main">
4251
- <span class="pf-v6-c-menu__item-icon">
4252
- <i class="fas fa-fw fa-code" aria-hidden="true"></i>
5240
+ </button>
5241
+ </li>
5242
+ <li class="pf-v6-c-menu__list-item" role="none">
5243
+ <button
5244
+ class="pf-v6-c-menu__item"
5245
+ type="button"
5246
+ role="menuitem"
5247
+ >
5248
+ <span class="pf-v6-c-menu__item-main">
5249
+ <span class="pf-v6-c-menu__item-icon">
5250
+ <i class="fas fa-fw fa-code" aria-hidden="true"></i>
5251
+ </span>
5252
+ <span class="pf-v6-c-menu__item-text">Developer</span>
4253
5253
  </span>
4254
- <span class="pf-v6-c-menu__item-text">Developer</span>
4255
- </span>
4256
- </button>
4257
- </li>
4258
- <li class="pf-v6-c-menu__list-item" role="none">
4259
- <button class="pf-v6-c-menu__item" type="button" role="menuitem">
4260
- <span class="pf-v6-c-menu__item-main">
4261
- <span class="pf-v6-c-menu__item-icon">
4262
- <i class="fas fa-fw fa-cube" aria-hidden="true"></i>
5254
+ </button>
5255
+ </li>
5256
+ <li class="pf-v6-c-menu__list-item" role="none">
5257
+ <button
5258
+ class="pf-v6-c-menu__item"
5259
+ type="button"
5260
+ role="menuitem"
5261
+ >
5262
+ <span class="pf-v6-c-menu__item-main">
5263
+ <span class="pf-v6-c-menu__item-icon">
5264
+ <i class="fas fa-fw fa-cube" aria-hidden="true"></i>
5265
+ </span>
5266
+ <span class="pf-v6-c-menu__item-text">User</span>
4263
5267
  </span>
4264
- <span class="pf-v6-c-menu__item-text">User</span>
4265
- </span>
4266
- </button>
5268
+ </button>
5269
+ </li>
5270
+ </ul>
5271
+ </div>
5272
+ </div>
5273
+ </div>
5274
+ <div class="pf-v6-c-page__sidebar-body">
5275
+ <nav
5276
+ class="pf-v6-c-nav"
5277
+ id="page-context-selector-expanded-primary-nav"
5278
+ aria-label="Global"
5279
+ >
5280
+ <ul class="pf-v6-c-nav__list" role="list">
5281
+ <li class="pf-v6-c-nav__item">
5282
+ <a href="#" class="pf-v6-c-nav__link">
5283
+ <span class="pf-v6-c-nav__link-text">System panel</span>
5284
+ </a>
5285
+ </li>
5286
+ <li class="pf-v6-c-nav__item">
5287
+ <a
5288
+ href="#"
5289
+ class="pf-v6-c-nav__link pf-m-current"
5290
+ aria-current="page"
5291
+ >
5292
+ <span class="pf-v6-c-nav__link-text">Policy</span>
5293
+ </a>
5294
+ </li>
5295
+ <li class="pf-v6-c-nav__item">
5296
+ <a href="#" class="pf-v6-c-nav__link">
5297
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
5298
+ </a>
5299
+ </li>
5300
+ <li class="pf-v6-c-nav__item">
5301
+ <a href="#" class="pf-v6-c-nav__link">
5302
+ <span class="pf-v6-c-nav__link-text">Network services</span>
5303
+ </a>
5304
+ </li>
5305
+ <li class="pf-v6-c-nav__item">
5306
+ <a href="#" class="pf-v6-c-nav__link">
5307
+ <span class="pf-v6-c-nav__link-text">Server</span>
5308
+ </a>
4267
5309
  </li>
4268
5310
  </ul>
4269
- </div>
5311
+ </nav>
4270
5312
  </div>
4271
5313
  </div>
4272
- <div class="pf-v6-c-page__sidebar-body">
4273
- <nav
4274
- class="pf-v6-c-nav"
4275
- id="page-context-selector-expanded-primary-nav"
4276
- aria-label="Global"
4277
- >
4278
- <ul class="pf-v6-c-nav__list" role="list">
4279
- <li class="pf-v6-c-nav__item">
4280
- <a href="#" class="pf-v6-c-nav__link">
4281
- <span class="pf-v6-c-nav__link-text">System panel</span>
4282
- </a>
4283
- </li>
4284
- <li class="pf-v6-c-nav__item">
4285
- <a
4286
- href="#"
4287
- class="pf-v6-c-nav__link pf-m-current"
4288
- aria-current="page"
4289
- >
4290
- <span class="pf-v6-c-nav__link-text">Policy</span>
4291
- </a>
4292
- </li>
4293
- <li class="pf-v6-c-nav__item">
4294
- <a href="#" class="pf-v6-c-nav__link">
4295
- <span class="pf-v6-c-nav__link-text">Authentication</span>
4296
- </a>
4297
- </li>
4298
- <li class="pf-v6-c-nav__item">
4299
- <a href="#" class="pf-v6-c-nav__link">
4300
- <span class="pf-v6-c-nav__link-text">Network services</span>
4301
- </a>
4302
- </li>
4303
- <li class="pf-v6-c-nav__item">
4304
- <a href="#" class="pf-v6-c-nav__link">
4305
- <span class="pf-v6-c-nav__link-text">Server</span>
4306
- </a>
4307
- </li>
4308
- </ul>
4309
- </nav>
4310
- </div>
4311
5314
  </div>
4312
5315
  <div class="pf-v6-c-page__main-container" tabindex="-1">
4313
5316
  <main
@@ -4324,21 +5327,57 @@ wrapperTag: div
4324
5327
  </li>
4325
5328
  <li class="pf-v6-c-breadcrumb__item">
4326
5329
  <span class="pf-v6-c-breadcrumb__item-divider">
4327
- <i class="fas fa-angle-right" aria-hidden="true"></i>
5330
+ <svg
5331
+ class="pf-v6-svg"
5332
+ viewBox="0 0 20 20"
5333
+ fill="currentColor"
5334
+ aria-hidden="true"
5335
+ role="img"
5336
+ width="1em"
5337
+ height="1em"
5338
+ >
5339
+ <path
5340
+ 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"
5341
+ />
5342
+ </svg>
4328
5343
  </span>
4329
5344
 
4330
5345
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
4331
5346
  </li>
4332
5347
  <li class="pf-v6-c-breadcrumb__item">
4333
5348
  <span class="pf-v6-c-breadcrumb__item-divider">
4334
- <i class="fas fa-angle-right" aria-hidden="true"></i>
5349
+ <svg
5350
+ class="pf-v6-svg"
5351
+ viewBox="0 0 20 20"
5352
+ fill="currentColor"
5353
+ aria-hidden="true"
5354
+ role="img"
5355
+ width="1em"
5356
+ height="1em"
5357
+ >
5358
+ <path
5359
+ 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"
5360
+ />
5361
+ </svg>
4335
5362
  </span>
4336
5363
 
4337
5364
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
4338
5365
  </li>
4339
5366
  <li class="pf-v6-c-breadcrumb__item">
4340
5367
  <span class="pf-v6-c-breadcrumb__item-divider">
4341
- <i class="fas fa-angle-right" aria-hidden="true"></i>
5368
+ <svg
5369
+ class="pf-v6-svg"
5370
+ viewBox="0 0 20 20"
5371
+ fill="currentColor"
5372
+ aria-hidden="true"
5373
+ role="img"
5374
+ width="1em"
5375
+ height="1em"
5376
+ >
5377
+ <path
5378
+ 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"
5379
+ />
5380
+ </svg>
4342
5381
  </span>
4343
5382
 
4344
5383
  <a
@@ -4351,9 +5390,15 @@ wrapperTag: div
4351
5390
  </nav>
4352
5391
  </div>
4353
5392
  </section>
4354
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
5393
+ <section
5394
+ class="pf-v6-c-page__main-section pf-m-limit-width"
5395
+ aria-labelledby="main-title"
5396
+ >
4355
5397
  <div class="pf-v6-c-page__main-body">
4356
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
5398
+ <h1
5399
+ class="pf-v6-c-content--h1 pf-m-page-title"
5400
+ id="main-title"
5401
+ >Main title</h1>
4357
5402
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
4358
5403
  </div>
4359
5404
  </section>
@@ -4411,7 +5456,8 @@ wrapperTag: div
4411
5456
  <span class="pf-v6-c-button__text">Skip to content</span>
4412
5457
  </a>
4413
5458
  </div>
4414
- <header class="pf-v6-c-masthead" id="page-demo-sidebar-collapsed-masthead">
5459
+
5460
+ <header class="pf-v6-c-masthead" id="page-demo-sidebar-collapsed-docked">
4415
5461
  <div class="pf-v6-c-masthead__main">
4416
5462
  <span class="pf-v6-c-masthead__toggle">
4417
5463
  <button
@@ -4453,7 +5499,7 @@ wrapperTag: div
4453
5499
  y1="2.25860997e-13%"
4454
5500
  x2="32%"
4455
5501
  y2="100%"
4456
- id="linearGradient-page-demo-sidebar-collapsed-masthead"
5502
+ id="linearGradient-page-demo-sidebar-collapsed-docked"
4457
5503
  >
4458
5504
  <stop stop-color="#2B9AF3" offset="0%" />
4459
5505
  <stop
@@ -4507,11 +5553,11 @@ wrapperTag: div
4507
5553
  />
4508
5554
  <path
4509
5555
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
4510
- fill="url(#linearGradient-page-demo-sidebar-collapsed-masthead)"
5556
+ fill="url(#linearGradient-page-demo-sidebar-collapsed-docked)"
4511
5557
  />
4512
5558
  <path
4513
5559
  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"
4514
- fill="url(#linearGradient-page-demo-sidebar-collapsed-masthead)"
5560
+ fill="url(#linearGradient-page-demo-sidebar-collapsed-docked)"
4515
5561
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
4516
5562
  />
4517
5563
  </g>
@@ -4523,7 +5569,7 @@ wrapperTag: div
4523
5569
  <div class="pf-v6-c-masthead__content">
4524
5570
  <div
4525
5571
  class="pf-v6-c-toolbar pf-m-static"
4526
- id="page-demo-sidebar-collapsed-masthead-toolbar"
5572
+ id="page-demo-sidebar-collapsed-docked-toolbar"
4527
5573
  >
4528
5574
  <div class="pf-v6-c-toolbar__content">
4529
5575
  <div class="pf-v6-c-toolbar__content-section">
@@ -4541,7 +5587,19 @@ wrapperTag: div
4541
5587
  aria-label="Application launcher"
4542
5588
  >
4543
5589
  <span class="pf-v6-c-menu-toggle__icon">
4544
- <i class="fas fa-th" aria-hidden="true"></i>
5590
+ <svg
5591
+ class="pf-v6-svg"
5592
+ viewBox="0 0 512 512"
5593
+ fill="currentColor"
5594
+ aria-hidden="true"
5595
+ role="img"
5596
+ width="1em"
5597
+ height="1em"
5598
+ >
5599
+ <path
5600
+ 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"
5601
+ />
5602
+ </svg>
4545
5603
  </span>
4546
5604
  </button>
4547
5605
  </div>
@@ -4553,7 +5611,19 @@ wrapperTag: div
4553
5611
  aria-label="Settings"
4554
5612
  >
4555
5613
  <span class="pf-v6-c-menu-toggle__icon">
4556
- <i class="fas fa-cog" aria-hidden="true"></i>
5614
+ <svg
5615
+ class="pf-v6-svg"
5616
+ viewBox="0 0 32 32"
5617
+ fill="currentColor"
5618
+ aria-hidden="true"
5619
+ role="img"
5620
+ width="1em"
5621
+ height="1em"
5622
+ >
5623
+ <path
5624
+ 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"
5625
+ />
5626
+ </svg>
4557
5627
  </span>
4558
5628
  </button>
4559
5629
  </div>
@@ -4565,7 +5635,19 @@ wrapperTag: div
4565
5635
  aria-label="Help"
4566
5636
  >
4567
5637
  <span class="pf-v6-c-menu-toggle__icon">
4568
- <i class="fas fa-question-circle" aria-hidden="true"></i>
5638
+ <svg
5639
+ class="pf-v6-svg"
5640
+ viewBox="0 0 512 512"
5641
+ fill="currentColor"
5642
+ aria-hidden="true"
5643
+ role="img"
5644
+ width="1em"
5645
+ height="1em"
5646
+ >
5647
+ <path
5648
+ 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"
5649
+ />
5650
+ </svg>
4569
5651
  </span>
4570
5652
  </button>
4571
5653
  </div>
@@ -4579,7 +5661,19 @@ wrapperTag: div
4579
5661
  aria-label="Actions"
4580
5662
  >
4581
5663
  <span class="pf-v6-c-menu-toggle__icon">
4582
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
5664
+ <svg
5665
+ class="pf-v6-svg"
5666
+ viewBox="0 0 32 32"
5667
+ fill="currentColor"
5668
+ aria-hidden="true"
5669
+ role="img"
5670
+ width="1em"
5671
+ height="1em"
5672
+ >
5673
+ <path
5674
+ 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"
5675
+ />
5676
+ </svg>
4583
5677
  </span>
4584
5678
  </button>
4585
5679
  </div>
@@ -4590,44 +5684,46 @@ wrapperTag: div
4590
5684
  </div>
4591
5685
  </header>
4592
5686
  <div class="pf-v6-c-page__sidebar pf-m-collapsed">
4593
- <div class="pf-v6-c-page__sidebar-body">
4594
- <nav
4595
- class="pf-v6-c-nav"
4596
- id="page-demo-sidebar-collapsed-primary-nav"
4597
- aria-label="Global"
4598
- >
4599
- <ul class="pf-v6-c-nav__list" role="list">
4600
- <li class="pf-v6-c-nav__item">
4601
- <a href="#" class="pf-v6-c-nav__link">
4602
- <span class="pf-v6-c-nav__link-text">System panel</span>
4603
- </a>
4604
- </li>
4605
- <li class="pf-v6-c-nav__item">
4606
- <a
4607
- href="#"
4608
- class="pf-v6-c-nav__link pf-m-current"
4609
- aria-current="page"
4610
- >
4611
- <span class="pf-v6-c-nav__link-text">Policy</span>
4612
- </a>
4613
- </li>
4614
- <li class="pf-v6-c-nav__item">
4615
- <a href="#" class="pf-v6-c-nav__link">
4616
- <span class="pf-v6-c-nav__link-text">Authentication</span>
4617
- </a>
4618
- </li>
4619
- <li class="pf-v6-c-nav__item">
4620
- <a href="#" class="pf-v6-c-nav__link">
4621
- <span class="pf-v6-c-nav__link-text">Network services</span>
4622
- </a>
4623
- </li>
4624
- <li class="pf-v6-c-nav__item">
4625
- <a href="#" class="pf-v6-c-nav__link">
4626
- <span class="pf-v6-c-nav__link-text">Server</span>
4627
- </a>
4628
- </li>
4629
- </ul>
4630
- </nav>
5687
+ <div class="pf-v6-c-page__sidebar-main">
5688
+ <div class="pf-v6-c-page__sidebar-body">
5689
+ <nav
5690
+ class="pf-v6-c-nav"
5691
+ id="page-demo-sidebar-collapsed-primary-nav"
5692
+ aria-label="Global"
5693
+ >
5694
+ <ul class="pf-v6-c-nav__list" role="list">
5695
+ <li class="pf-v6-c-nav__item">
5696
+ <a href="#" class="pf-v6-c-nav__link">
5697
+ <span class="pf-v6-c-nav__link-text">System panel</span>
5698
+ </a>
5699
+ </li>
5700
+ <li class="pf-v6-c-nav__item">
5701
+ <a
5702
+ href="#"
5703
+ class="pf-v6-c-nav__link pf-m-current"
5704
+ aria-current="page"
5705
+ >
5706
+ <span class="pf-v6-c-nav__link-text">Policy</span>
5707
+ </a>
5708
+ </li>
5709
+ <li class="pf-v6-c-nav__item">
5710
+ <a href="#" class="pf-v6-c-nav__link">
5711
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
5712
+ </a>
5713
+ </li>
5714
+ <li class="pf-v6-c-nav__item">
5715
+ <a href="#" class="pf-v6-c-nav__link">
5716
+ <span class="pf-v6-c-nav__link-text">Network services</span>
5717
+ </a>
5718
+ </li>
5719
+ <li class="pf-v6-c-nav__item">
5720
+ <a href="#" class="pf-v6-c-nav__link">
5721
+ <span class="pf-v6-c-nav__link-text">Server</span>
5722
+ </a>
5723
+ </li>
5724
+ </ul>
5725
+ </nav>
5726
+ </div>
4631
5727
  </div>
4632
5728
  </div>
4633
5729
  <div class="pf-v6-c-page__main-container" tabindex="-1">
@@ -4645,21 +5741,57 @@ wrapperTag: div
4645
5741
  </li>
4646
5742
  <li class="pf-v6-c-breadcrumb__item">
4647
5743
  <span class="pf-v6-c-breadcrumb__item-divider">
4648
- <i class="fas fa-angle-right" aria-hidden="true"></i>
5744
+ <svg
5745
+ class="pf-v6-svg"
5746
+ viewBox="0 0 20 20"
5747
+ fill="currentColor"
5748
+ aria-hidden="true"
5749
+ role="img"
5750
+ width="1em"
5751
+ height="1em"
5752
+ >
5753
+ <path
5754
+ 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"
5755
+ />
5756
+ </svg>
4649
5757
  </span>
4650
5758
 
4651
5759
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
4652
5760
  </li>
4653
5761
  <li class="pf-v6-c-breadcrumb__item">
4654
5762
  <span class="pf-v6-c-breadcrumb__item-divider">
4655
- <i class="fas fa-angle-right" aria-hidden="true"></i>
5763
+ <svg
5764
+ class="pf-v6-svg"
5765
+ viewBox="0 0 20 20"
5766
+ fill="currentColor"
5767
+ aria-hidden="true"
5768
+ role="img"
5769
+ width="1em"
5770
+ height="1em"
5771
+ >
5772
+ <path
5773
+ 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"
5774
+ />
5775
+ </svg>
4656
5776
  </span>
4657
5777
 
4658
5778
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
4659
5779
  </li>
4660
5780
  <li class="pf-v6-c-breadcrumb__item">
4661
5781
  <span class="pf-v6-c-breadcrumb__item-divider">
4662
- <i class="fas fa-angle-right" aria-hidden="true"></i>
5782
+ <svg
5783
+ class="pf-v6-svg"
5784
+ viewBox="0 0 20 20"
5785
+ fill="currentColor"
5786
+ aria-hidden="true"
5787
+ role="img"
5788
+ width="1em"
5789
+ height="1em"
5790
+ >
5791
+ <path
5792
+ 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"
5793
+ />
5794
+ </svg>
4663
5795
  </span>
4664
5796
 
4665
5797
  <a
@@ -4672,9 +5804,15 @@ wrapperTag: div
4672
5804
  </nav>
4673
5805
  </div>
4674
5806
  </section>
4675
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
5807
+ <section
5808
+ class="pf-v6-c-page__main-section pf-m-limit-width"
5809
+ aria-labelledby="main-title"
5810
+ >
4676
5811
  <div class="pf-v6-c-page__main-body">
4677
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
5812
+ <h1
5813
+ class="pf-v6-c-content--h1 pf-m-page-title"
5814
+ id="main-title"
5815
+ >Main title</h1>
4678
5816
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
4679
5817
  </div>
4680
5818
  </section>
@@ -4732,7 +5870,8 @@ wrapperTag: div
4732
5870
  <span class="pf-v6-c-button__text">Skip to content</span>
4733
5871
  </a>
4734
5872
  </div>
4735
- <header class="pf-v6-c-masthead" id="page-demo-sidebar-expanded-masthead">
5873
+
5874
+ <header class="pf-v6-c-masthead" id="page-demo-sidebar-expanded-docked">
4736
5875
  <div class="pf-v6-c-masthead__main">
4737
5876
  <span class="pf-v6-c-masthead__toggle">
4738
5877
  <button
@@ -4774,7 +5913,7 @@ wrapperTag: div
4774
5913
  y1="2.25860997e-13%"
4775
5914
  x2="32%"
4776
5915
  y2="100%"
4777
- id="linearGradient-page-demo-sidebar-expanded-masthead"
5916
+ id="linearGradient-page-demo-sidebar-expanded-docked"
4778
5917
  >
4779
5918
  <stop stop-color="#2B9AF3" offset="0%" />
4780
5919
  <stop
@@ -4828,11 +5967,11 @@ wrapperTag: div
4828
5967
  />
4829
5968
  <path
4830
5969
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
4831
- fill="url(#linearGradient-page-demo-sidebar-expanded-masthead)"
5970
+ fill="url(#linearGradient-page-demo-sidebar-expanded-docked)"
4832
5971
  />
4833
5972
  <path
4834
5973
  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"
4835
- fill="url(#linearGradient-page-demo-sidebar-expanded-masthead)"
5974
+ fill="url(#linearGradient-page-demo-sidebar-expanded-docked)"
4836
5975
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
4837
5976
  />
4838
5977
  </g>
@@ -4844,7 +5983,7 @@ wrapperTag: div
4844
5983
  <div class="pf-v6-c-masthead__content">
4845
5984
  <div
4846
5985
  class="pf-v6-c-toolbar pf-m-static"
4847
- id="page-demo-sidebar-expanded-masthead-toolbar"
5986
+ id="page-demo-sidebar-expanded-docked-toolbar"
4848
5987
  >
4849
5988
  <div class="pf-v6-c-toolbar__content">
4850
5989
  <div class="pf-v6-c-toolbar__content-section">
@@ -4862,7 +6001,19 @@ wrapperTag: div
4862
6001
  aria-label="Application launcher"
4863
6002
  >
4864
6003
  <span class="pf-v6-c-menu-toggle__icon">
4865
- <i class="fas fa-th" aria-hidden="true"></i>
6004
+ <svg
6005
+ class="pf-v6-svg"
6006
+ viewBox="0 0 512 512"
6007
+ fill="currentColor"
6008
+ aria-hidden="true"
6009
+ role="img"
6010
+ width="1em"
6011
+ height="1em"
6012
+ >
6013
+ <path
6014
+ 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"
6015
+ />
6016
+ </svg>
4866
6017
  </span>
4867
6018
  </button>
4868
6019
  </div>
@@ -4874,7 +6025,19 @@ wrapperTag: div
4874
6025
  aria-label="Settings"
4875
6026
  >
4876
6027
  <span class="pf-v6-c-menu-toggle__icon">
4877
- <i class="fas fa-cog" aria-hidden="true"></i>
6028
+ <svg
6029
+ class="pf-v6-svg"
6030
+ viewBox="0 0 32 32"
6031
+ fill="currentColor"
6032
+ aria-hidden="true"
6033
+ role="img"
6034
+ width="1em"
6035
+ height="1em"
6036
+ >
6037
+ <path
6038
+ 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"
6039
+ />
6040
+ </svg>
4878
6041
  </span>
4879
6042
  </button>
4880
6043
  </div>
@@ -4886,7 +6049,19 @@ wrapperTag: div
4886
6049
  aria-label="Help"
4887
6050
  >
4888
6051
  <span class="pf-v6-c-menu-toggle__icon">
4889
- <i class="fas fa-question-circle" aria-hidden="true"></i>
6052
+ <svg
6053
+ class="pf-v6-svg"
6054
+ viewBox="0 0 512 512"
6055
+ fill="currentColor"
6056
+ aria-hidden="true"
6057
+ role="img"
6058
+ width="1em"
6059
+ height="1em"
6060
+ >
6061
+ <path
6062
+ 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"
6063
+ />
6064
+ </svg>
4890
6065
  </span>
4891
6066
  </button>
4892
6067
  </div>
@@ -4900,7 +6075,19 @@ wrapperTag: div
4900
6075
  aria-label="Actions"
4901
6076
  >
4902
6077
  <span class="pf-v6-c-menu-toggle__icon">
4903
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
6078
+ <svg
6079
+ class="pf-v6-svg"
6080
+ viewBox="0 0 32 32"
6081
+ fill="currentColor"
6082
+ aria-hidden="true"
6083
+ role="img"
6084
+ width="1em"
6085
+ height="1em"
6086
+ >
6087
+ <path
6088
+ 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"
6089
+ />
6090
+ </svg>
4904
6091
  </span>
4905
6092
  </button>
4906
6093
  </div>
@@ -4911,44 +6098,46 @@ wrapperTag: div
4911
6098
  </div>
4912
6099
  </header>
4913
6100
  <div class="pf-v6-c-page__sidebar pf-m-expanded">
4914
- <div class="pf-v6-c-page__sidebar-body">
4915
- <nav
4916
- class="pf-v6-c-nav"
4917
- id="page-demo-sidebar-expanded-primary-nav"
4918
- aria-label="Global"
4919
- >
4920
- <ul class="pf-v6-c-nav__list" role="list">
4921
- <li class="pf-v6-c-nav__item">
4922
- <a href="#" class="pf-v6-c-nav__link">
4923
- <span class="pf-v6-c-nav__link-text">System panel</span>
4924
- </a>
4925
- </li>
4926
- <li class="pf-v6-c-nav__item">
4927
- <a
4928
- href="#"
4929
- class="pf-v6-c-nav__link pf-m-current"
4930
- aria-current="page"
4931
- >
4932
- <span class="pf-v6-c-nav__link-text">Policy</span>
4933
- </a>
4934
- </li>
4935
- <li class="pf-v6-c-nav__item">
4936
- <a href="#" class="pf-v6-c-nav__link">
4937
- <span class="pf-v6-c-nav__link-text">Authentication</span>
4938
- </a>
4939
- </li>
4940
- <li class="pf-v6-c-nav__item">
4941
- <a href="#" class="pf-v6-c-nav__link">
4942
- <span class="pf-v6-c-nav__link-text">Network services</span>
4943
- </a>
4944
- </li>
4945
- <li class="pf-v6-c-nav__item">
4946
- <a href="#" class="pf-v6-c-nav__link">
4947
- <span class="pf-v6-c-nav__link-text">Server</span>
4948
- </a>
4949
- </li>
4950
- </ul>
4951
- </nav>
6101
+ <div class="pf-v6-c-page__sidebar-main">
6102
+ <div class="pf-v6-c-page__sidebar-body">
6103
+ <nav
6104
+ class="pf-v6-c-nav"
6105
+ id="page-demo-sidebar-expanded-primary-nav"
6106
+ aria-label="Global"
6107
+ >
6108
+ <ul class="pf-v6-c-nav__list" role="list">
6109
+ <li class="pf-v6-c-nav__item">
6110
+ <a href="#" class="pf-v6-c-nav__link">
6111
+ <span class="pf-v6-c-nav__link-text">System panel</span>
6112
+ </a>
6113
+ </li>
6114
+ <li class="pf-v6-c-nav__item">
6115
+ <a
6116
+ href="#"
6117
+ class="pf-v6-c-nav__link pf-m-current"
6118
+ aria-current="page"
6119
+ >
6120
+ <span class="pf-v6-c-nav__link-text">Policy</span>
6121
+ </a>
6122
+ </li>
6123
+ <li class="pf-v6-c-nav__item">
6124
+ <a href="#" class="pf-v6-c-nav__link">
6125
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
6126
+ </a>
6127
+ </li>
6128
+ <li class="pf-v6-c-nav__item">
6129
+ <a href="#" class="pf-v6-c-nav__link">
6130
+ <span class="pf-v6-c-nav__link-text">Network services</span>
6131
+ </a>
6132
+ </li>
6133
+ <li class="pf-v6-c-nav__item">
6134
+ <a href="#" class="pf-v6-c-nav__link">
6135
+ <span class="pf-v6-c-nav__link-text">Server</span>
6136
+ </a>
6137
+ </li>
6138
+ </ul>
6139
+ </nav>
6140
+ </div>
4952
6141
  </div>
4953
6142
  </div>
4954
6143
  <div class="pf-v6-c-page__main-container" tabindex="-1">
@@ -4966,21 +6155,57 @@ wrapperTag: div
4966
6155
  </li>
4967
6156
  <li class="pf-v6-c-breadcrumb__item">
4968
6157
  <span class="pf-v6-c-breadcrumb__item-divider">
4969
- <i class="fas fa-angle-right" aria-hidden="true"></i>
6158
+ <svg
6159
+ class="pf-v6-svg"
6160
+ viewBox="0 0 20 20"
6161
+ fill="currentColor"
6162
+ aria-hidden="true"
6163
+ role="img"
6164
+ width="1em"
6165
+ height="1em"
6166
+ >
6167
+ <path
6168
+ 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"
6169
+ />
6170
+ </svg>
4970
6171
  </span>
4971
6172
 
4972
6173
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
4973
6174
  </li>
4974
6175
  <li class="pf-v6-c-breadcrumb__item">
4975
6176
  <span class="pf-v6-c-breadcrumb__item-divider">
4976
- <i class="fas fa-angle-right" aria-hidden="true"></i>
6177
+ <svg
6178
+ class="pf-v6-svg"
6179
+ viewBox="0 0 20 20"
6180
+ fill="currentColor"
6181
+ aria-hidden="true"
6182
+ role="img"
6183
+ width="1em"
6184
+ height="1em"
6185
+ >
6186
+ <path
6187
+ 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"
6188
+ />
6189
+ </svg>
4977
6190
  </span>
4978
6191
 
4979
6192
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
4980
6193
  </li>
4981
6194
  <li class="pf-v6-c-breadcrumb__item">
4982
6195
  <span class="pf-v6-c-breadcrumb__item-divider">
4983
- <i class="fas fa-angle-right" aria-hidden="true"></i>
6196
+ <svg
6197
+ class="pf-v6-svg"
6198
+ viewBox="0 0 20 20"
6199
+ fill="currentColor"
6200
+ aria-hidden="true"
6201
+ role="img"
6202
+ width="1em"
6203
+ height="1em"
6204
+ >
6205
+ <path
6206
+ 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"
6207
+ />
6208
+ </svg>
4984
6209
  </span>
4985
6210
 
4986
6211
  <a
@@ -4993,9 +6218,15 @@ wrapperTag: div
4993
6218
  </nav>
4994
6219
  </div>
4995
6220
  </section>
4996
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
6221
+ <section
6222
+ class="pf-v6-c-page__main-section pf-m-limit-width"
6223
+ aria-labelledby="main-title"
6224
+ >
4997
6225
  <div class="pf-v6-c-page__main-body">
4998
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
6226
+ <h1
6227
+ class="pf-v6-c-content--h1 pf-m-page-title"
6228
+ id="main-title"
6229
+ >Main title</h1>
4999
6230
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
5000
6231
  </div>
5001
6232
  </section>
@@ -5053,7 +6284,8 @@ wrapperTag: div
5053
6284
  <span class="pf-v6-c-button__text">Skip to content</span>
5054
6285
  </a>
5055
6286
  </div>
5056
- <header class="pf-v6-c-masthead" id="page-demo-no-sidebar-masthead">
6287
+
6288
+ <header class="pf-v6-c-masthead" id="page-demo-no-sidebar-docked">
5057
6289
  <div class="pf-v6-c-masthead__main">
5058
6290
  <span class="pf-v6-c-masthead__toggle">
5059
6291
  <button
@@ -5095,7 +6327,7 @@ wrapperTag: div
5095
6327
  y1="2.25860997e-13%"
5096
6328
  x2="32%"
5097
6329
  y2="100%"
5098
- id="linearGradient-page-demo-no-sidebar-masthead"
6330
+ id="linearGradient-page-demo-no-sidebar-docked"
5099
6331
  >
5100
6332
  <stop stop-color="#2B9AF3" offset="0%" />
5101
6333
  <stop
@@ -5149,11 +6381,11 @@ wrapperTag: div
5149
6381
  />
5150
6382
  <path
5151
6383
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
5152
- fill="url(#linearGradient-page-demo-no-sidebar-masthead)"
6384
+ fill="url(#linearGradient-page-demo-no-sidebar-docked)"
5153
6385
  />
5154
6386
  <path
5155
6387
  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"
5156
- fill="url(#linearGradient-page-demo-no-sidebar-masthead)"
6388
+ fill="url(#linearGradient-page-demo-no-sidebar-docked)"
5157
6389
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
5158
6390
  />
5159
6391
  </g>
@@ -5165,7 +6397,7 @@ wrapperTag: div
5165
6397
  <div class="pf-v6-c-masthead__content">
5166
6398
  <div
5167
6399
  class="pf-v6-c-toolbar pf-m-static"
5168
- id="page-demo-no-sidebar-masthead-toolbar"
6400
+ id="page-demo-no-sidebar-docked-toolbar"
5169
6401
  >
5170
6402
  <div class="pf-v6-c-toolbar__content">
5171
6403
  <div class="pf-v6-c-toolbar__content-section">
@@ -5183,7 +6415,19 @@ wrapperTag: div
5183
6415
  aria-label="Application launcher"
5184
6416
  >
5185
6417
  <span class="pf-v6-c-menu-toggle__icon">
5186
- <i class="fas fa-th" aria-hidden="true"></i>
6418
+ <svg
6419
+ class="pf-v6-svg"
6420
+ viewBox="0 0 512 512"
6421
+ fill="currentColor"
6422
+ aria-hidden="true"
6423
+ role="img"
6424
+ width="1em"
6425
+ height="1em"
6426
+ >
6427
+ <path
6428
+ 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"
6429
+ />
6430
+ </svg>
5187
6431
  </span>
5188
6432
  </button>
5189
6433
  </div>
@@ -5195,7 +6439,19 @@ wrapperTag: div
5195
6439
  aria-label="Settings"
5196
6440
  >
5197
6441
  <span class="pf-v6-c-menu-toggle__icon">
5198
- <i class="fas fa-cog" aria-hidden="true"></i>
6442
+ <svg
6443
+ class="pf-v6-svg"
6444
+ viewBox="0 0 32 32"
6445
+ fill="currentColor"
6446
+ aria-hidden="true"
6447
+ role="img"
6448
+ width="1em"
6449
+ height="1em"
6450
+ >
6451
+ <path
6452
+ 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"
6453
+ />
6454
+ </svg>
5199
6455
  </span>
5200
6456
  </button>
5201
6457
  </div>
@@ -5207,7 +6463,19 @@ wrapperTag: div
5207
6463
  aria-label="Help"
5208
6464
  >
5209
6465
  <span class="pf-v6-c-menu-toggle__icon">
5210
- <i class="fas fa-question-circle" aria-hidden="true"></i>
6466
+ <svg
6467
+ class="pf-v6-svg"
6468
+ viewBox="0 0 512 512"
6469
+ fill="currentColor"
6470
+ aria-hidden="true"
6471
+ role="img"
6472
+ width="1em"
6473
+ height="1em"
6474
+ >
6475
+ <path
6476
+ 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"
6477
+ />
6478
+ </svg>
5211
6479
  </span>
5212
6480
  </button>
5213
6481
  </div>
@@ -5221,7 +6489,19 @@ wrapperTag: div
5221
6489
  aria-label="Actions"
5222
6490
  >
5223
6491
  <span class="pf-v6-c-menu-toggle__icon">
5224
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
6492
+ <svg
6493
+ class="pf-v6-svg"
6494
+ viewBox="0 0 32 32"
6495
+ fill="currentColor"
6496
+ aria-hidden="true"
6497
+ role="img"
6498
+ width="1em"
6499
+ height="1em"
6500
+ >
6501
+ <path
6502
+ 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"
6503
+ />
6504
+ </svg>
5225
6505
  </span>
5226
6506
  </button>
5227
6507
  </div>
@@ -5246,21 +6526,57 @@ wrapperTag: div
5246
6526
  </li>
5247
6527
  <li class="pf-v6-c-breadcrumb__item">
5248
6528
  <span class="pf-v6-c-breadcrumb__item-divider">
5249
- <i class="fas fa-angle-right" aria-hidden="true"></i>
6529
+ <svg
6530
+ class="pf-v6-svg"
6531
+ viewBox="0 0 20 20"
6532
+ fill="currentColor"
6533
+ aria-hidden="true"
6534
+ role="img"
6535
+ width="1em"
6536
+ height="1em"
6537
+ >
6538
+ <path
6539
+ 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"
6540
+ />
6541
+ </svg>
5250
6542
  </span>
5251
6543
 
5252
6544
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
5253
6545
  </li>
5254
6546
  <li class="pf-v6-c-breadcrumb__item">
5255
6547
  <span class="pf-v6-c-breadcrumb__item-divider">
5256
- <i class="fas fa-angle-right" aria-hidden="true"></i>
6548
+ <svg
6549
+ class="pf-v6-svg"
6550
+ viewBox="0 0 20 20"
6551
+ fill="currentColor"
6552
+ aria-hidden="true"
6553
+ role="img"
6554
+ width="1em"
6555
+ height="1em"
6556
+ >
6557
+ <path
6558
+ 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"
6559
+ />
6560
+ </svg>
5257
6561
  </span>
5258
6562
 
5259
6563
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
5260
6564
  </li>
5261
6565
  <li class="pf-v6-c-breadcrumb__item">
5262
6566
  <span class="pf-v6-c-breadcrumb__item-divider">
5263
- <i class="fas fa-angle-right" aria-hidden="true"></i>
6567
+ <svg
6568
+ class="pf-v6-svg"
6569
+ viewBox="0 0 20 20"
6570
+ fill="currentColor"
6571
+ aria-hidden="true"
6572
+ role="img"
6573
+ width="1em"
6574
+ height="1em"
6575
+ >
6576
+ <path
6577
+ 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"
6578
+ />
6579
+ </svg>
5264
6580
  </span>
5265
6581
 
5266
6582
  <a
@@ -5273,9 +6589,15 @@ wrapperTag: div
5273
6589
  </nav>
5274
6590
  </div>
5275
6591
  </section>
5276
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
6592
+ <section
6593
+ class="pf-v6-c-page__main-section pf-m-limit-width"
6594
+ aria-labelledby="main-title"
6595
+ >
5277
6596
  <div class="pf-v6-c-page__main-body">
5278
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
6597
+ <h1
6598
+ class="pf-v6-c-content--h1 pf-m-page-title"
6599
+ id="main-title"
6600
+ >Main title</h1>
5279
6601
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
5280
6602
  </div>
5281
6603
  </section>
@@ -5340,21 +6662,57 @@ wrapperTag: div
5340
6662
  </li>
5341
6663
  <li class="pf-v6-c-breadcrumb__item">
5342
6664
  <span class="pf-v6-c-breadcrumb__item-divider">
5343
- <i class="fas fa-angle-right" aria-hidden="true"></i>
6665
+ <svg
6666
+ class="pf-v6-svg"
6667
+ viewBox="0 0 20 20"
6668
+ fill="currentColor"
6669
+ aria-hidden="true"
6670
+ role="img"
6671
+ width="1em"
6672
+ height="1em"
6673
+ >
6674
+ <path
6675
+ 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"
6676
+ />
6677
+ </svg>
5344
6678
  </span>
5345
6679
 
5346
6680
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
5347
6681
  </li>
5348
6682
  <li class="pf-v6-c-breadcrumb__item">
5349
6683
  <span class="pf-v6-c-breadcrumb__item-divider">
5350
- <i class="fas fa-angle-right" aria-hidden="true"></i>
6684
+ <svg
6685
+ class="pf-v6-svg"
6686
+ viewBox="0 0 20 20"
6687
+ fill="currentColor"
6688
+ aria-hidden="true"
6689
+ role="img"
6690
+ width="1em"
6691
+ height="1em"
6692
+ >
6693
+ <path
6694
+ 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"
6695
+ />
6696
+ </svg>
5351
6697
  </span>
5352
6698
 
5353
6699
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
5354
6700
  </li>
5355
6701
  <li class="pf-v6-c-breadcrumb__item">
5356
6702
  <span class="pf-v6-c-breadcrumb__item-divider">
5357
- <i class="fas fa-angle-right" aria-hidden="true"></i>
6703
+ <svg
6704
+ class="pf-v6-svg"
6705
+ viewBox="0 0 20 20"
6706
+ fill="currentColor"
6707
+ aria-hidden="true"
6708
+ role="img"
6709
+ width="1em"
6710
+ height="1em"
6711
+ >
6712
+ <path
6713
+ 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"
6714
+ />
6715
+ </svg>
5358
6716
  </span>
5359
6717
 
5360
6718
  <a
@@ -5367,9 +6725,15 @@ wrapperTag: div
5367
6725
  </nav>
5368
6726
  </div>
5369
6727
  </section>
5370
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
6728
+ <section
6729
+ class="pf-v6-c-page__main-section pf-m-limit-width"
6730
+ aria-labelledby="main-title"
6731
+ >
5371
6732
  <div class="pf-v6-c-page__main-body">
5372
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
6733
+ <h1
6734
+ class="pf-v6-c-content--h1 pf-m-page-title"
6735
+ id="main-title"
6736
+ >Main title</h1>
5373
6737
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
5374
6738
  </div>
5375
6739
  </section>