@patternfly/patternfly 6.5.0-prerelease.6 → 6.5.0-prerelease.60

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 (392) hide show
  1. package/README.md +1 -1
  2. package/assets/fontawesome/_variables.scss +2 -1
  3. package/assets/images/RHAiExperienceIcon.svg +27 -0
  4. package/assets/images/RHAutomationsLogo.svg +96 -0
  5. package/assets/images/RHServerStackIcon.svg +16 -0
  6. package/assets/images/compass--hero-bg.png +0 -0
  7. package/assets/images/compass--rh-wallpaper-dark.png +0 -0
  8. package/assets/images/compass--rh-wallpaper-light.png +0 -0
  9. package/assets/images/compass--wallpaper-dark.jpg +0 -0
  10. package/assets/images/compass--wallpaper-dark.png +0 -0
  11. package/assets/images/compass--wallpaper-light.jpg +0 -0
  12. package/assets/images/compass--wallpaper-light.png +0 -0
  13. package/assets/images/glass-brand-dark.jpg +0 -0
  14. package/assets/images/glass-brand-dark.png +0 -0
  15. package/assets/images/glass-brand-light.jpg +0 -0
  16. package/assets/images/glass-brand-light.png +0 -0
  17. package/base/normalize.scss +7 -0
  18. package/base/patternfly-common.css +50 -0
  19. package/base/patternfly-common.scss +59 -0
  20. package/base/patternfly-svg-icons.css +11 -0
  21. package/base/patternfly-svg-icons.scss +14 -0
  22. package/base/patternfly-variables.css +926 -513
  23. package/base/patternfly-variables.scss +46 -4
  24. package/base/tokens/tokens-dark.scss +56 -8
  25. package/base/tokens/tokens-default.scss +69 -14
  26. package/base/tokens/tokens-glass-dark.scss +26 -0
  27. package/base/tokens/tokens-glass.scss +22 -0
  28. package/base/tokens/tokens-local.scss +17 -0
  29. package/base/tokens/tokens-palette.scss +3 -1
  30. package/base/tokens/tokens-redhat-dark.scss +21 -0
  31. package/base/tokens/tokens-redhat-glass-dark.scss +40 -0
  32. package/base/tokens/tokens-redhat-glass.scss +30 -0
  33. package/base/tokens/tokens-redhat-highcontrast-dark.scss +50 -0
  34. package/base/tokens/tokens-redhat-highcontrast.scss +128 -0
  35. package/base/tokens/tokens-redhat.scss +15 -0
  36. package/components/AboutModalBox/about-modal-box.css +36 -26
  37. package/components/Accordion/accordion.css +27 -14
  38. package/components/Accordion/accordion.scss +12 -2
  39. package/components/ActionList/action-list.css +2 -0
  40. package/components/ActionList/action-list.scss +2 -0
  41. package/components/Alert/alert.css +7 -5
  42. package/components/Alert/alert.scss +2 -1
  43. package/components/Avatar/avatar.css +12 -4
  44. package/components/BackgroundImage/background-image.css +6 -3
  45. package/components/Banner/banner.css +8 -6
  46. package/components/Brand/brand.css +3 -1
  47. package/components/Breadcrumb/breadcrumb.css +4 -3
  48. package/components/Button/button.css +121 -30
  49. package/components/Button/button.scss +131 -26
  50. package/components/CalendarMonth/calendar-month.css +4 -3
  51. package/components/Card/card.css +51 -13
  52. package/components/Card/card.scss +61 -8
  53. package/components/ClipboardCopy/clipboard-copy.css +7 -6
  54. package/components/ClipboardCopy/clipboard-copy.scss +3 -3
  55. package/components/CodeEditor/code-editor.css +1 -1
  56. package/components/CodeEditor/code-editor.scss +1 -1
  57. package/components/Compass/compass.css +320 -0
  58. package/components/Compass/compass.scss +350 -0
  59. package/components/DataList/data-list.css +34 -23
  60. package/components/DataList/data-list.scss +8 -2
  61. package/components/DescriptionList/description-list-order.scss +5 -1
  62. package/components/DescriptionList/description-list.css +7 -5
  63. package/components/DescriptionList/description-list.scss +5 -1
  64. package/components/Divider/divider.css +7 -5
  65. package/components/Drawer/drawer.css +115 -56
  66. package/components/Drawer/drawer.scss +82 -9
  67. package/components/DualListSelector/dual-list-selector.css +18 -12
  68. package/components/DualListSelector/dual-list-selector.scss +1 -1
  69. package/components/ExpandableSection/expandable-section.css +21 -16
  70. package/components/ExpandableSection/expandable-section.scss +6 -3
  71. package/components/Form/form.css +2 -2
  72. package/components/Form/form.scss +2 -2
  73. package/components/FormControl/form-control.css +3 -3
  74. package/components/FormControl/form-control.scss +3 -3
  75. package/components/Hero/hero.css +74 -0
  76. package/components/Hero/hero.scss +86 -0
  77. package/components/JumpLinks/jump-links.css +16 -5
  78. package/components/JumpLinks/jump-links.scss +17 -3
  79. package/components/Label/label-group.css +2 -2
  80. package/components/Label/label-group.scss +2 -2
  81. package/components/Label/label.css +4 -3
  82. package/components/Login/login.css +58 -40
  83. package/components/Login/login.scss +7 -3
  84. package/components/Masthead/masthead.css +112 -16
  85. package/components/Masthead/masthead.scss +112 -1
  86. package/components/Menu/menu.css +23 -14
  87. package/components/MenuToggle/menu-toggle.css +26 -3
  88. package/components/MenuToggle/menu-toggle.scss +30 -3
  89. package/components/ModalBox/modal-box.css +9 -7
  90. package/components/ModalBox/modal-box.scss +2 -2
  91. package/components/Nav/nav.css +82 -11
  92. package/components/Nav/nav.scss +85 -5
  93. package/components/NotificationDrawer/notification-drawer.css +19 -9
  94. package/components/NotificationDrawer/notification-drawer.scss +14 -5
  95. package/components/Page/page.css +214 -29
  96. package/components/Page/page.scss +228 -13
  97. package/components/Pagination/pagination.scss +5 -1
  98. package/components/Panel/panel.css +14 -0
  99. package/components/Panel/panel.scss +18 -0
  100. package/components/Progress/progress.css +3 -1
  101. package/components/Progress/progress.scss +3 -1
  102. package/components/ProgressStepper/progress-stepper.scss +5 -1
  103. package/components/Sidebar/sidebar.css +1 -1
  104. package/components/Sidebar/sidebar.scss +7 -3
  105. package/components/Skeleton/skeleton.css +16 -15
  106. package/components/Slider/slider.css +32 -18
  107. package/components/Switch/switch.css +4 -2
  108. package/components/Switch/switch.scss +1 -1
  109. package/components/Table/table-grid.css +28 -36
  110. package/components/Table/table-grid.scss +4 -4
  111. package/components/Table/table-tree-view.css +4 -2
  112. package/components/Table/table.css +45 -36
  113. package/components/Table/table.scss +15 -11
  114. package/components/Tabs/tabs.css +51 -33
  115. package/components/Tabs/tabs.scss +54 -26
  116. package/components/TextInputGroup/text-input-group.css +2 -2
  117. package/components/TextInputGroup/text-input-group.scss +2 -2
  118. package/components/ToggleGroup/toggle-group.css +34 -17
  119. package/components/ToggleGroup/toggle-group.scss +36 -20
  120. package/components/Toolbar/toolbar.css +47 -15
  121. package/components/Toolbar/toolbar.scss +34 -6
  122. package/components/TreeView/tree-view.css +45 -14
  123. package/components/TreeView/tree-view.scss +32 -1
  124. package/components/Wizard/wizard.css +41 -19
  125. package/components/Wizard/wizard.scss +26 -6
  126. package/components/_index.css +1936 -700
  127. package/components/_index.scss +3 -1
  128. package/docs/components/AboutModalBox/examples/AboutModalBox.md +13 -1
  129. package/docs/components/Accordion/examples/Accordion.md +392 -30
  130. package/docs/components/ActionList/examples/ActionList.md +143 -11
  131. package/docs/components/Alert/examples/Alert.md +678 -54
  132. package/docs/components/Avatar/examples/Avatar.md +4 -4
  133. package/docs/components/BackToTop/examples/BackToTop.md +13 -1
  134. package/docs/components/Banner/examples/Banner.md +65 -5
  135. package/docs/components/Brand/examples/Brand.md +2 -2
  136. package/docs/components/Breadcrumb/examples/Breadcrumb.md +299 -24
  137. package/docs/components/Button/examples/Button.md +2362 -163
  138. package/docs/components/CalendarMonth/examples/CalendarMonth.md +104 -8
  139. package/docs/components/Card/examples/Card.md +207 -4
  140. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +286 -22
  141. package/docs/components/CodeBlock/examples/CodeBlock.md +104 -8
  142. package/docs/components/CodeEditor/examples/CodeEditor.md +195 -15
  143. package/docs/components/Compass/examples/Compass.css +17 -0
  144. package/docs/components/Compass/examples/Compass.md +119 -0
  145. package/docs/components/DataList/examples/DataList.md +406 -205
  146. package/docs/components/DatePicker/examples/DatePicker.md +78 -6
  147. package/docs/components/DescriptionList/examples/DescriptionList.md +327 -27
  148. package/docs/components/Divider/examples/Divider.md +2 -2
  149. package/docs/components/DragDrop/examples/DragDrop.css +1 -1
  150. package/docs/components/Drawer/examples/Drawer.md +355 -35
  151. package/docs/components/DualListSelector/examples/DualListSelector.md +1013 -143
  152. package/docs/components/ExpandableSection/examples/ExpandableSection.md +91 -7
  153. package/docs/components/Form/examples/Form.md +78 -6
  154. package/docs/components/Hero/examples/Hero.md +25 -0
  155. package/docs/components/Icon/examples/Icon.md +92 -8
  156. package/docs/components/InlineEdit/examples/InlineEdit.md +312 -24
  157. package/docs/components/InputGroup/examples/InputGroup.md +27 -3
  158. package/docs/components/JumpLinks/examples/JumpLinks.md +54 -6
  159. package/docs/components/Label/examples/Label.md +2834 -218
  160. package/docs/components/Login/examples/Login.md +26 -2
  161. package/docs/components/Masthead/examples/masthead.md +80 -1
  162. package/docs/components/Menu/examples/Menu.md +1458 -116
  163. package/docs/components/MenuToggle/examples/MenuToggle.md +14 -5
  164. package/docs/components/ModalBox/examples/ModalBox.md +289 -25
  165. package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +156 -12
  166. package/docs/components/Nav/examples/Navigation.md +798 -58
  167. package/docs/components/NotificationDrawer/examples/NotificationDrawer.md +598 -46
  168. package/docs/components/OverflowMenu/examples/overflow-menu.md +78 -6
  169. package/docs/components/Page/examples/Page.md +72 -11
  170. package/docs/components/Pagination/examples/Pagination.md +627 -64
  171. package/docs/components/Panel/examples/Panel.md +12 -0
  172. package/docs/components/Popover/examples/Popover.md +286 -22
  173. package/docs/components/Progress/examples/Progress.md +91 -7
  174. package/docs/components/ProgressStepper/examples/ProgressStepper.md +275 -23
  175. package/docs/components/Sidebar/examples/Sidebar.md +1 -1
  176. package/docs/components/Slider/examples/Slider.md +52 -4
  177. package/docs/components/Table/examples/Table.md +876 -70
  178. package/docs/components/Tabs/examples/Tabs.md +5908 -457
  179. package/docs/components/TextInputGroup/examples/TextInputGroup.md +600 -48
  180. package/docs/components/ToggleGroup/examples/toggle-group.md +195 -15
  181. package/docs/components/Toolbar/examples/Toolbar.md +490 -44
  182. package/docs/components/TreeView/examples/TreeView.md +1390 -130
  183. package/docs/components/Wizard/examples/Wizard.md +815 -72
  184. package/docs/demos/AboutModal/examples/AboutModal.md +98 -47
  185. package/docs/demos/Alert/examples/Alert.md +359 -146
  186. package/docs/demos/BackToTop/examples/BackToTop.md +98 -47
  187. package/docs/demos/Banner/examples/Banner.md +170 -92
  188. package/docs/demos/Button/examples/Button.md +13 -1
  189. package/docs/demos/Card/examples/Card.md +963 -128
  190. package/docs/demos/CardView/examples/CardView.md +435 -252
  191. package/docs/demos/Compass/examples/Compass.md +5930 -0
  192. package/docs/demos/Dashboard/examples/Dashboard.md +648 -164
  193. package/docs/demos/DataList/examples/DataList.md +730 -225
  194. package/docs/demos/DescriptionList/examples/DescriptionList.md +279 -141
  195. package/docs/demos/Drawer/examples/Drawer.md +421 -235
  196. package/docs/demos/Form/examples/BasicForms.md +273 -21
  197. package/docs/demos/JumpLinks/examples/JumpLinks.md +518 -287
  198. package/docs/demos/Masthead/examples/Masthead.md +787 -451
  199. package/docs/demos/Modal/examples/Modal.md +588 -285
  200. package/docs/demos/Nav/examples/Nav.md +2913 -493
  201. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +1273 -310
  202. package/docs/demos/Page/examples/Page.md +1236 -689
  203. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +13 -1
  204. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +52 -4
  205. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +978 -385
  206. package/docs/demos/Skeleton/examples/Skeleton.md +85 -46
  207. package/docs/demos/Table/examples/Table.md +4531 -838
  208. package/docs/demos/Tabs/examples/Tabs.md +653 -293
  209. package/docs/demos/Toolbar/examples/Toolbar.md +584 -136
  210. package/docs/demos/Wizard/examples/Wizard.md +1165 -472
  211. package/docs/layouts/Bullseye/examples/Bullseye.css +2 -2
  212. package/docs/layouts/Bullseye/examples/Bullseye.md +2 -1
  213. package/docs/layouts/Flex/examples/Flex.css +3 -3
  214. package/docs/layouts/Flex/examples/Flex.md +3 -2
  215. package/docs/layouts/Gallery/examples/Gallery.css +2 -2
  216. package/docs/layouts/Gallery/examples/Gallery.md +4 -3
  217. package/docs/layouts/Grid/examples/Grid.css +1 -1
  218. package/docs/layouts/Grid/examples/Grid.md +6 -5
  219. package/docs/layouts/Level/examples/Level.css +3 -3
  220. package/docs/layouts/Level/examples/Level.md +2 -1
  221. package/docs/layouts/Split/examples/Split.css +1 -1
  222. package/docs/layouts/Split/examples/Split.md +2 -1
  223. package/docs/layouts/Stack/examples/Stack.css +3 -3
  224. package/docs/layouts/Stack/examples/Stack.md +2 -1
  225. package/docs/utilities/Accessibility/examples/Accessibility.md +3 -2
  226. package/docs/utilities/Alignment/examples/Alignment.css +4 -4
  227. package/docs/utilities/Alignment/examples/Alignment.md +3 -2
  228. package/docs/utilities/BackgroundColor/examples/BackgroundColor.md +5 -4
  229. package/docs/utilities/BoxShadow/examples/box-shadow.css +2 -2
  230. package/docs/utilities/BoxShadow/examples/box-shadow.md +2 -1
  231. package/docs/utilities/Display/examples/Display.css +1 -1
  232. package/docs/utilities/Display/examples/Display.md +3 -2
  233. package/docs/utilities/Flex/examples/Flex.css +7 -7
  234. package/docs/utilities/Flex/examples/Flex.md +3 -2
  235. package/docs/utilities/Float/examples/Float.css +2 -2
  236. package/docs/utilities/Float/examples/Float.md +3 -2
  237. package/docs/utilities/Sizing/examples/Sizing.md +8 -7
  238. package/docs/utilities/Spacing/examples/Spacing.css +2 -2
  239. package/docs/utilities/Spacing/examples/Spacing.md +3 -2
  240. package/docs/utilities/Text/examples/Text.md +5 -4
  241. package/icons/PfIcons/add-circle-o.svg +4 -0
  242. package/icons/PfIcons/ansible-tower.svg +4 -0
  243. package/icons/PfIcons/applications.svg +4 -0
  244. package/icons/PfIcons/arrow.svg +4 -0
  245. package/icons/PfIcons/asleep.svg +4 -0
  246. package/icons/PfIcons/attention-bell.svg +4 -0
  247. package/icons/PfIcons/automation.svg +4 -0
  248. package/icons/PfIcons/bell.svg +4 -0
  249. package/icons/PfIcons/blueprint.svg +4 -0
  250. package/icons/PfIcons/build.svg +4 -0
  251. package/icons/PfIcons/builder-image.svg +4 -0
  252. package/icons/PfIcons/bundle.svg +4 -0
  253. package/icons/PfIcons/catalog.svg +4 -0
  254. package/icons/PfIcons/chat.svg +4 -0
  255. package/icons/PfIcons/close.svg +4 -0
  256. package/icons/PfIcons/cloud-security.svg +4 -0
  257. package/icons/PfIcons/cloud-tenant.svg +4 -0
  258. package/icons/PfIcons/cluster.svg +4 -0
  259. package/icons/PfIcons/connected.svg +4 -0
  260. package/icons/PfIcons/container-node.svg +4 -0
  261. package/icons/PfIcons/cpu.svg +4 -0
  262. package/icons/PfIcons/critical-risk.svg +4 -0
  263. package/icons/PfIcons/data-processor.svg +4 -0
  264. package/icons/PfIcons/data-sink.svg +4 -0
  265. package/icons/PfIcons/data-source.svg +4 -0
  266. package/icons/PfIcons/degraded.svg +4 -0
  267. package/icons/PfIcons/disconnected.svg +4 -0
  268. package/icons/PfIcons/domain.svg +4 -0
  269. package/icons/PfIcons/edit.svg +4 -0
  270. package/icons/PfIcons/enhancement.svg +4 -0
  271. package/icons/PfIcons/enterprise.svg +4 -0
  272. package/icons/PfIcons/equalizer.svg +4 -0
  273. package/icons/PfIcons/error-circle-o.svg +4 -0
  274. package/icons/PfIcons/export.svg +4 -0
  275. package/icons/PfIcons/filter.svg +4 -0
  276. package/icons/PfIcons/flavor.svg +4 -0
  277. package/icons/PfIcons/folder-close.svg +4 -0
  278. package/icons/PfIcons/folder-open.svg +4 -0
  279. package/icons/PfIcons/globe-route.svg +4 -0
  280. package/icons/PfIcons/help.svg +4 -0
  281. package/icons/PfIcons/history.svg +4 -0
  282. package/icons/PfIcons/home.svg +4 -0
  283. package/icons/PfIcons/import.svg +4 -0
  284. package/icons/PfIcons/in-progress.svg +4 -0
  285. package/icons/PfIcons/info.svg +4 -0
  286. package/icons/PfIcons/infrastructure.svg +4 -0
  287. package/icons/PfIcons/integration.svg +4 -0
  288. package/icons/PfIcons/key.svg +4 -0
  289. package/icons/PfIcons/locked.svg +4 -0
  290. package/icons/PfIcons/maintenance.svg +4 -0
  291. package/icons/PfIcons/memory.svg +4 -0
  292. package/icons/PfIcons/messages.svg +4 -0
  293. package/icons/PfIcons/middleware.svg +4 -0
  294. package/icons/PfIcons/migration.svg +4 -0
  295. package/icons/PfIcons/module.svg +4 -0
  296. package/icons/PfIcons/monitoring.svg +4 -0
  297. package/icons/PfIcons/multicluster.svg +4 -0
  298. package/icons/PfIcons/namespaces.svg +4 -0
  299. package/icons/PfIcons/network.svg +4 -0
  300. package/icons/PfIcons/new-process.svg +4 -0
  301. package/icons/PfIcons/not-started.svg +4 -0
  302. package/icons/PfIcons/off.svg +4 -0
  303. package/icons/PfIcons/ok.svg +4 -0
  304. package/icons/PfIcons/on-running.svg +4 -0
  305. package/icons/PfIcons/on.svg +4 -0
  306. package/icons/PfIcons/open-drawer-right.svg +4 -0
  307. package/icons/PfIcons/openshift.svg +4 -0
  308. package/icons/PfIcons/openstack.svg +4 -0
  309. package/icons/PfIcons/optimize.svg +4 -0
  310. package/icons/PfIcons/orders.svg +4 -0
  311. package/icons/PfIcons/os-image.svg +4 -0
  312. package/icons/PfIcons/package.svg +4 -0
  313. package/icons/PfIcons/panel-close.svg +4 -0
  314. package/icons/PfIcons/panel-open.svg +4 -0
  315. package/icons/PfIcons/paused.svg +4 -0
  316. package/icons/PfIcons/pending.svg +4 -0
  317. package/icons/PfIcons/pficon-dragdrop.svg +4 -0
  318. package/icons/PfIcons/pficon-history.svg +4 -0
  319. package/icons/PfIcons/pficon-network-range.svg +4 -0
  320. package/icons/PfIcons/pficon-satellite.svg +4 -0
  321. package/icons/PfIcons/pficon-sort-common-asc.svg +4 -0
  322. package/icons/PfIcons/pficon-sort-common-desc.svg +4 -0
  323. package/icons/PfIcons/pficon-template.svg +4 -0
  324. package/icons/PfIcons/pficon-vcenter.svg +4 -0
  325. package/icons/PfIcons/plugged.svg +4 -0
  326. package/icons/PfIcons/port.svg +4 -0
  327. package/icons/PfIcons/print.svg +4 -0
  328. package/icons/PfIcons/private.svg +4 -0
  329. package/icons/PfIcons/process-automation.svg +4 -0
  330. package/icons/PfIcons/project.svg +4 -0
  331. package/icons/PfIcons/rebalance.svg +4 -0
  332. package/icons/PfIcons/rebooting.svg +4 -0
  333. package/icons/PfIcons/regions.svg +4 -0
  334. package/icons/PfIcons/registry.svg +4 -0
  335. package/icons/PfIcons/remove2.svg +4 -0
  336. package/icons/PfIcons/replicator.svg +4 -0
  337. package/icons/PfIcons/repository.svg +4 -0
  338. package/icons/PfIcons/resource-pool.svg +4 -0
  339. package/icons/PfIcons/resources-almost-empty.svg +4 -0
  340. package/icons/PfIcons/resources-almost-full.svg +4 -0
  341. package/icons/PfIcons/resources-empty.svg +4 -0
  342. package/icons/PfIcons/resources-full.svg +4 -0
  343. package/icons/PfIcons/running.svg +4 -0
  344. package/icons/PfIcons/save.svg +4 -0
  345. package/icons/PfIcons/screen.svg +4 -0
  346. package/icons/PfIcons/security.svg +4 -0
  347. package/icons/PfIcons/server-group.svg +4 -0
  348. package/icons/PfIcons/server.svg +4 -0
  349. package/icons/PfIcons/service-catalog.svg +4 -0
  350. package/icons/PfIcons/service.svg +4 -0
  351. package/icons/PfIcons/services.svg +4 -0
  352. package/icons/PfIcons/severity-critical.svg +4 -0
  353. package/icons/PfIcons/severity-important.svg +4 -0
  354. package/icons/PfIcons/severity-minor.svg +4 -0
  355. package/icons/PfIcons/severity-moderate.svg +4 -0
  356. package/icons/PfIcons/severity-none.svg +4 -0
  357. package/icons/PfIcons/severity-undefined.svg +4 -0
  358. package/icons/PfIcons/spinner.svg +4 -0
  359. package/icons/PfIcons/spinner2.svg +4 -0
  360. package/icons/PfIcons/storage-domain.svg +4 -0
  361. package/icons/PfIcons/task.svg +4 -0
  362. package/icons/PfIcons/tenant.svg +4 -0
  363. package/icons/PfIcons/thumb-tack.svg +4 -0
  364. package/icons/PfIcons/topology.svg +4 -0
  365. package/icons/PfIcons/treeview.svg +4 -0
  366. package/icons/PfIcons/trend-down.svg +4 -0
  367. package/icons/PfIcons/trend-up.svg +4 -0
  368. package/icons/PfIcons/unknown.svg +4 -0
  369. package/icons/PfIcons/unlocked.svg +4 -0
  370. package/icons/PfIcons/unplugged.svg +4 -0
  371. package/icons/PfIcons/user.svg +4 -0
  372. package/icons/PfIcons/users.svg +4 -0
  373. package/icons/PfIcons/virtual-machine.svg +4 -0
  374. package/icons/PfIcons/volume.svg +4 -0
  375. package/icons/PfIcons/warning-triangle.svg +4 -0
  376. package/icons/PfIcons/zone.svg +4 -0
  377. package/layouts/Flex/flex.scss +83 -19
  378. package/layouts/Gallery/gallery.css +6 -2
  379. package/layouts/_index.css +6 -2
  380. package/package.json +34 -16
  381. package/patternfly-base-no-globals.css +965 -491
  382. package/patternfly-base.css +972 -491
  383. package/patternfly-charts.css +3 -3
  384. package/patternfly-no-globals.css +2801 -1070
  385. package/patternfly.css +2808 -1070
  386. package/patternfly.min.css +1 -1
  387. package/patternfly.min.css.map +1 -1
  388. package/patternfly.scss +27 -0
  389. package/sass-utilities/functions.scss +32 -25
  390. package/sass-utilities/mixins.scss +36 -20
  391. package/sass-utilities/namespaces-components.scss +6 -0
  392. 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">
@@ -194,44 +195,46 @@ wrapperTag: div
194
195
  </div>
195
196
  </header>
196
197
  <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>
198
+ <div class="pf-v6-c-page__sidebar-main">
199
+ <div class="pf-v6-c-page__sidebar-body">
200
+ <nav
201
+ class="pf-v6-c-nav"
202
+ id="page-demo-basic-primary-nav"
203
+ aria-label="Global"
204
+ >
205
+ <ul class="pf-v6-c-nav__list" role="list">
206
+ <li class="pf-v6-c-nav__item">
207
+ <a href="#" class="pf-v6-c-nav__link">
208
+ <span class="pf-v6-c-nav__link-text">System panel</span>
209
+ </a>
210
+ </li>
211
+ <li class="pf-v6-c-nav__item">
212
+ <a
213
+ href="#"
214
+ class="pf-v6-c-nav__link pf-m-current"
215
+ aria-current="page"
216
+ >
217
+ <span class="pf-v6-c-nav__link-text">Policy</span>
218
+ </a>
219
+ </li>
220
+ <li class="pf-v6-c-nav__item">
221
+ <a href="#" class="pf-v6-c-nav__link">
222
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
223
+ </a>
224
+ </li>
225
+ <li class="pf-v6-c-nav__item">
226
+ <a href="#" class="pf-v6-c-nav__link">
227
+ <span class="pf-v6-c-nav__link-text">Network services</span>
228
+ </a>
229
+ </li>
230
+ <li class="pf-v6-c-nav__item">
231
+ <a href="#" class="pf-v6-c-nav__link">
232
+ <span class="pf-v6-c-nav__link-text">Server</span>
233
+ </a>
234
+ </li>
235
+ </ul>
236
+ </nav>
237
+ </div>
235
238
  </div>
236
239
  </div>
237
240
  <div class="pf-v6-c-page__main-container" tabindex="-1">
@@ -249,21 +252,57 @@ wrapperTag: div
249
252
  </li>
250
253
  <li class="pf-v6-c-breadcrumb__item">
251
254
  <span class="pf-v6-c-breadcrumb__item-divider">
252
- <i class="fas fa-angle-right" aria-hidden="true"></i>
255
+ <svg
256
+ class="pf-v6-svg"
257
+ viewBox="0 0 20 20"
258
+ fill="currentColor"
259
+ aria-hidden="true"
260
+ role="img"
261
+ width="1em"
262
+ height="1em"
263
+ >
264
+ <path
265
+ 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"
266
+ />
267
+ </svg>
253
268
  </span>
254
269
 
255
270
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
256
271
  </li>
257
272
  <li class="pf-v6-c-breadcrumb__item">
258
273
  <span class="pf-v6-c-breadcrumb__item-divider">
259
- <i class="fas fa-angle-right" aria-hidden="true"></i>
274
+ <svg
275
+ class="pf-v6-svg"
276
+ viewBox="0 0 20 20"
277
+ fill="currentColor"
278
+ aria-hidden="true"
279
+ role="img"
280
+ width="1em"
281
+ height="1em"
282
+ >
283
+ <path
284
+ d="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"
285
+ />
286
+ </svg>
260
287
  </span>
261
288
 
262
289
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
263
290
  </li>
264
291
  <li class="pf-v6-c-breadcrumb__item">
265
292
  <span class="pf-v6-c-breadcrumb__item-divider">
266
- <i class="fas fa-angle-right" aria-hidden="true"></i>
293
+ <svg
294
+ class="pf-v6-svg"
295
+ viewBox="0 0 20 20"
296
+ fill="currentColor"
297
+ aria-hidden="true"
298
+ role="img"
299
+ width="1em"
300
+ height="1em"
301
+ >
302
+ <path
303
+ 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"
304
+ />
305
+ </svg>
267
306
  </span>
268
307
 
269
308
  <a
@@ -336,9 +375,10 @@ wrapperTag: div
336
375
  <span class="pf-v6-c-button__text">Skip to content</span>
337
376
  </a>
338
377
  </div>
378
+
339
379
  <header
340
380
  class="pf-v6-c-masthead"
341
- id="multiple-sidebar-body-elements-demo-masthead"
381
+ id="multiple-sidebar-body-elements-demo-docked"
342
382
  >
343
383
  <div class="pf-v6-c-masthead__main">
344
384
  <span class="pf-v6-c-masthead__toggle">
@@ -381,7 +421,7 @@ wrapperTag: div
381
421
  y1="2.25860997e-13%"
382
422
  x2="32%"
383
423
  y2="100%"
384
- id="linearGradient-multiple-sidebar-body-elements-demo-masthead"
424
+ id="linearGradient-multiple-sidebar-body-elements-demo-docked"
385
425
  >
386
426
  <stop stop-color="#2B9AF3" offset="0%" />
387
427
  <stop
@@ -435,11 +475,11 @@ wrapperTag: div
435
475
  />
436
476
  <path
437
477
  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)"
478
+ fill="url(#linearGradient-multiple-sidebar-body-elements-demo-docked)"
439
479
  />
440
480
  <path
441
481
  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)"
482
+ fill="url(#linearGradient-multiple-sidebar-body-elements-demo-docked)"
443
483
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
444
484
  />
445
485
  </g>
@@ -451,7 +491,7 @@ wrapperTag: div
451
491
  <div class="pf-v6-c-masthead__content">
452
492
  <div
453
493
  class="pf-v6-c-toolbar pf-m-static"
454
- id="multiple-sidebar-body-elements-demo-masthead-toolbar"
494
+ id="multiple-sidebar-body-elements-demo-docked-toolbar"
455
495
  >
456
496
  <div class="pf-v6-c-toolbar__content">
457
497
  <div class="pf-v6-c-toolbar__content-section">
@@ -518,58 +558,60 @@ wrapperTag: div
518
558
  </div>
519
559
  </header>
520
560
  <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>
561
+ <div class="pf-v6-c-page__sidebar-main">
562
+ <div class="pf-v6-c-page__sidebar-body pf-m-page-insets">
563
+ <div class="pf-v6-c-content">
564
+ <p>Custom sidebar content</p>
565
+ </div>
524
566
  </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>
567
+ <div class="pf-v6-c-page__sidebar-body">
568
+ <nav
569
+ class="pf-v6-c-nav"
570
+ id="multiple-sidebar-body-elements-demo-primary-nav"
571
+ aria-label="Global"
572
+ >
573
+ <ul class="pf-v6-c-nav__list" role="list">
574
+ <li class="pf-v6-c-nav__item">
575
+ <a href="#" class="pf-v6-c-nav__link">
576
+ <span class="pf-v6-c-nav__link-text">System panel</span>
577
+ </a>
578
+ </li>
579
+ <li class="pf-v6-c-nav__item">
580
+ <a
581
+ href="#"
582
+ class="pf-v6-c-nav__link pf-m-current"
583
+ aria-current="page"
584
+ >
585
+ <span class="pf-v6-c-nav__link-text">Policy</span>
586
+ </a>
587
+ </li>
588
+ <li class="pf-v6-c-nav__item">
589
+ <a href="#" class="pf-v6-c-nav__link">
590
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
591
+ </a>
592
+ </li>
593
+ <li class="pf-v6-c-nav__item">
594
+ <a href="#" class="pf-v6-c-nav__link">
595
+ <span class="pf-v6-c-nav__link-text">Network services</span>
596
+ </a>
597
+ </li>
598
+ <li class="pf-v6-c-nav__item">
599
+ <a href="#" class="pf-v6-c-nav__link">
600
+ <span class="pf-v6-c-nav__link-text">Server</span>
601
+ </a>
602
+ </li>
603
+ </ul>
604
+ </nav>
568
605
  </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>
606
+ <div class="pf-v6-c-page__sidebar-body pf-m-fill pf-m-page-insets">
607
+ <div class="pf-v6-c-content">
608
+ <p>Custom sidebar content</p>
609
+ </div>
610
+ </div>
611
+ <div class="pf-v6-c-page__sidebar-body pf-m-no-fill pf-m-page-insets">
612
+ <div class="pf-v6-c-content">
613
+ <p>&copy;&nbsp;Copyright</p>
614
+ </div>
573
615
  </div>
574
616
  </div>
575
617
  </div>
@@ -588,21 +630,57 @@ wrapperTag: div
588
630
  </li>
589
631
  <li class="pf-v6-c-breadcrumb__item">
590
632
  <span class="pf-v6-c-breadcrumb__item-divider">
591
- <i class="fas fa-angle-right" aria-hidden="true"></i>
633
+ <svg
634
+ class="pf-v6-svg"
635
+ viewBox="0 0 20 20"
636
+ fill="currentColor"
637
+ aria-hidden="true"
638
+ role="img"
639
+ width="1em"
640
+ height="1em"
641
+ >
642
+ <path
643
+ 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"
644
+ />
645
+ </svg>
592
646
  </span>
593
647
 
594
648
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
595
649
  </li>
596
650
  <li class="pf-v6-c-breadcrumb__item">
597
651
  <span class="pf-v6-c-breadcrumb__item-divider">
598
- <i class="fas fa-angle-right" aria-hidden="true"></i>
652
+ <svg
653
+ class="pf-v6-svg"
654
+ viewBox="0 0 20 20"
655
+ fill="currentColor"
656
+ aria-hidden="true"
657
+ role="img"
658
+ width="1em"
659
+ height="1em"
660
+ >
661
+ <path
662
+ 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"
663
+ />
664
+ </svg>
599
665
  </span>
600
666
 
601
667
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
602
668
  </li>
603
669
  <li class="pf-v6-c-breadcrumb__item">
604
670
  <span class="pf-v6-c-breadcrumb__item-divider">
605
- <i class="fas fa-angle-right" aria-hidden="true"></i>
671
+ <svg
672
+ class="pf-v6-svg"
673
+ viewBox="0 0 20 20"
674
+ fill="currentColor"
675
+ aria-hidden="true"
676
+ role="img"
677
+ width="1em"
678
+ height="1em"
679
+ >
680
+ <path
681
+ 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"
682
+ />
683
+ </svg>
606
684
  </span>
607
685
 
608
686
  <a
@@ -675,9 +753,10 @@ wrapperTag: div
675
753
  <span class="pf-v6-c-button__text">Skip to content</span>
676
754
  </a>
677
755
  </div>
756
+
678
757
  <header
679
758
  class="pf-v6-c-masthead"
680
- id="page-demo-sticky-top-horizontal-subnav-masthead"
759
+ id="page-demo-sticky-top-horizontal-subnav-docked"
681
760
  >
682
761
  <div class="pf-v6-c-masthead__main">
683
762
  <span class="pf-v6-c-masthead__toggle">
@@ -720,7 +799,7 @@ wrapperTag: div
720
799
  y1="2.25860997e-13%"
721
800
  x2="32%"
722
801
  y2="100%"
723
- id="linearGradient-page-demo-sticky-top-horizontal-subnav-masthead"
802
+ id="linearGradient-page-demo-sticky-top-horizontal-subnav-docked"
724
803
  >
725
804
  <stop stop-color="#2B9AF3" offset="0%" />
726
805
  <stop
@@ -774,11 +853,11 @@ wrapperTag: div
774
853
  />
775
854
  <path
776
855
  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)"
856
+ fill="url(#linearGradient-page-demo-sticky-top-horizontal-subnav-docked)"
778
857
  />
779
858
  <path
780
859
  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)"
860
+ fill="url(#linearGradient-page-demo-sticky-top-horizontal-subnav-docked)"
782
861
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
783
862
  />
784
863
  </g>
@@ -790,7 +869,7 @@ wrapperTag: div
790
869
  <div class="pf-v6-c-masthead__content">
791
870
  <div
792
871
  class="pf-v6-c-toolbar pf-m-static"
793
- id="page-demo-sticky-top-horizontal-subnav-masthead-toolbar"
872
+ id="page-demo-sticky-top-horizontal-subnav-docked-toolbar"
794
873
  >
795
874
  <div class="pf-v6-c-toolbar__content">
796
875
  <div class="pf-v6-c-toolbar__content-section">
@@ -857,44 +936,46 @@ wrapperTag: div
857
936
  </div>
858
937
  </header>
859
938
  <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>
939
+ <div class="pf-v6-c-page__sidebar-main">
940
+ <div class="pf-v6-c-page__sidebar-body">
941
+ <nav
942
+ class="pf-v6-c-nav"
943
+ id="page-demo-sticky-top-horizontal-subnav-primary-nav"
944
+ aria-label="Global"
945
+ >
946
+ <ul class="pf-v6-c-nav__list" role="list">
947
+ <li class="pf-v6-c-nav__item">
948
+ <a href="#" class="pf-v6-c-nav__link">
949
+ <span class="pf-v6-c-nav__link-text">System panel</span>
950
+ </a>
951
+ </li>
952
+ <li class="pf-v6-c-nav__item">
953
+ <a
954
+ href="#"
955
+ class="pf-v6-c-nav__link pf-m-current"
956
+ aria-current="page"
957
+ >
958
+ <span class="pf-v6-c-nav__link-text">Policy</span>
959
+ </a>
960
+ </li>
961
+ <li class="pf-v6-c-nav__item">
962
+ <a href="#" class="pf-v6-c-nav__link">
963
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
964
+ </a>
965
+ </li>
966
+ <li class="pf-v6-c-nav__item">
967
+ <a href="#" class="pf-v6-c-nav__link">
968
+ <span class="pf-v6-c-nav__link-text">Network services</span>
969
+ </a>
970
+ </li>
971
+ <li class="pf-v6-c-nav__item">
972
+ <a href="#" class="pf-v6-c-nav__link">
973
+ <span class="pf-v6-c-nav__link-text">Server</span>
974
+ </a>
975
+ </li>
976
+ </ul>
977
+ </nav>
978
+ </div>
898
979
  </div>
899
980
  </div>
900
981
  <div class="pf-v6-c-page__main-container" tabindex="-1">
@@ -939,21 +1020,57 @@ wrapperTag: div
939
1020
  </li>
940
1021
  <li class="pf-v6-c-breadcrumb__item">
941
1022
  <span class="pf-v6-c-breadcrumb__item-divider">
942
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1023
+ <svg
1024
+ class="pf-v6-svg"
1025
+ viewBox="0 0 20 20"
1026
+ fill="currentColor"
1027
+ aria-hidden="true"
1028
+ role="img"
1029
+ width="1em"
1030
+ height="1em"
1031
+ >
1032
+ <path
1033
+ 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"
1034
+ />
1035
+ </svg>
943
1036
  </span>
944
1037
 
945
1038
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
946
1039
  </li>
947
1040
  <li class="pf-v6-c-breadcrumb__item">
948
1041
  <span class="pf-v6-c-breadcrumb__item-divider">
949
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1042
+ <svg
1043
+ class="pf-v6-svg"
1044
+ viewBox="0 0 20 20"
1045
+ fill="currentColor"
1046
+ aria-hidden="true"
1047
+ role="img"
1048
+ width="1em"
1049
+ height="1em"
1050
+ >
1051
+ <path
1052
+ 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"
1053
+ />
1054
+ </svg>
950
1055
  </span>
951
1056
 
952
1057
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
953
1058
  </li>
954
1059
  <li class="pf-v6-c-breadcrumb__item">
955
1060
  <span class="pf-v6-c-breadcrumb__item-divider">
956
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1061
+ <svg
1062
+ class="pf-v6-svg"
1063
+ viewBox="0 0 20 20"
1064
+ fill="currentColor"
1065
+ aria-hidden="true"
1066
+ role="img"
1067
+ width="1em"
1068
+ height="1em"
1069
+ >
1070
+ <path
1071
+ 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"
1072
+ />
1073
+ </svg>
957
1074
  </span>
958
1075
 
959
1076
  <a
@@ -1146,10 +1263,8 @@ wrapperTag: div
1146
1263
  <span class="pf-v6-c-button__text">Skip to content</span>
1147
1264
  </a>
1148
1265
  </div>
1149
- <header
1150
- class="pf-v6-c-masthead"
1151
- id="page-demo-sticky-top-breadcrumb-masthead"
1152
- >
1266
+
1267
+ <header class="pf-v6-c-masthead" id="page-demo-sticky-top-breadcrumb-docked">
1153
1268
  <div class="pf-v6-c-masthead__main">
1154
1269
  <span class="pf-v6-c-masthead__toggle">
1155
1270
  <button
@@ -1191,7 +1306,7 @@ wrapperTag: div
1191
1306
  y1="2.25860997e-13%"
1192
1307
  x2="32%"
1193
1308
  y2="100%"
1194
- id="linearGradient-page-demo-sticky-top-breadcrumb-masthead"
1309
+ id="linearGradient-page-demo-sticky-top-breadcrumb-docked"
1195
1310
  >
1196
1311
  <stop stop-color="#2B9AF3" offset="0%" />
1197
1312
  <stop
@@ -1245,11 +1360,11 @@ wrapperTag: div
1245
1360
  />
1246
1361
  <path
1247
1362
  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)"
1363
+ fill="url(#linearGradient-page-demo-sticky-top-breadcrumb-docked)"
1249
1364
  />
1250
1365
  <path
1251
1366
  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)"
1367
+ fill="url(#linearGradient-page-demo-sticky-top-breadcrumb-docked)"
1253
1368
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
1254
1369
  />
1255
1370
  </g>
@@ -1261,7 +1376,7 @@ wrapperTag: div
1261
1376
  <div class="pf-v6-c-masthead__content">
1262
1377
  <div
1263
1378
  class="pf-v6-c-toolbar pf-m-static"
1264
- id="page-demo-sticky-top-breadcrumb-masthead-toolbar"
1379
+ id="page-demo-sticky-top-breadcrumb-docked-toolbar"
1265
1380
  >
1266
1381
  <div class="pf-v6-c-toolbar__content">
1267
1382
  <div class="pf-v6-c-toolbar__content-section">
@@ -1328,44 +1443,46 @@ wrapperTag: div
1328
1443
  </div>
1329
1444
  </header>
1330
1445
  <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>
1446
+ <div class="pf-v6-c-page__sidebar-main">
1447
+ <div class="pf-v6-c-page__sidebar-body">
1448
+ <nav
1449
+ class="pf-v6-c-nav"
1450
+ id="page-demo-sticky-top-breadcrumb-primary-nav"
1451
+ aria-label="Global"
1452
+ >
1453
+ <ul class="pf-v6-c-nav__list" role="list">
1454
+ <li class="pf-v6-c-nav__item">
1455
+ <a href="#" class="pf-v6-c-nav__link">
1456
+ <span class="pf-v6-c-nav__link-text">System panel</span>
1457
+ </a>
1458
+ </li>
1459
+ <li class="pf-v6-c-nav__item">
1460
+ <a
1461
+ href="#"
1462
+ class="pf-v6-c-nav__link pf-m-current"
1463
+ aria-current="page"
1464
+ >
1465
+ <span class="pf-v6-c-nav__link-text">Policy</span>
1466
+ </a>
1467
+ </li>
1468
+ <li class="pf-v6-c-nav__item">
1469
+ <a href="#" class="pf-v6-c-nav__link">
1470
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
1471
+ </a>
1472
+ </li>
1473
+ <li class="pf-v6-c-nav__item">
1474
+ <a href="#" class="pf-v6-c-nav__link">
1475
+ <span class="pf-v6-c-nav__link-text">Network services</span>
1476
+ </a>
1477
+ </li>
1478
+ <li class="pf-v6-c-nav__item">
1479
+ <a href="#" class="pf-v6-c-nav__link">
1480
+ <span class="pf-v6-c-nav__link-text">Server</span>
1481
+ </a>
1482
+ </li>
1483
+ </ul>
1484
+ </nav>
1485
+ </div>
1369
1486
  </div>
1370
1487
  </div>
1371
1488
  <div class="pf-v6-c-page__main-container" tabindex="-1">
@@ -1385,21 +1502,57 @@ wrapperTag: div
1385
1502
  </li>
1386
1503
  <li class="pf-v6-c-breadcrumb__item">
1387
1504
  <span class="pf-v6-c-breadcrumb__item-divider">
1388
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1505
+ <svg
1506
+ class="pf-v6-svg"
1507
+ viewBox="0 0 20 20"
1508
+ fill="currentColor"
1509
+ aria-hidden="true"
1510
+ role="img"
1511
+ width="1em"
1512
+ height="1em"
1513
+ >
1514
+ <path
1515
+ 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"
1516
+ />
1517
+ </svg>
1389
1518
  </span>
1390
1519
 
1391
1520
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1392
1521
  </li>
1393
1522
  <li class="pf-v6-c-breadcrumb__item">
1394
1523
  <span class="pf-v6-c-breadcrumb__item-divider">
1395
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1524
+ <svg
1525
+ class="pf-v6-svg"
1526
+ viewBox="0 0 20 20"
1527
+ fill="currentColor"
1528
+ aria-hidden="true"
1529
+ role="img"
1530
+ width="1em"
1531
+ height="1em"
1532
+ >
1533
+ <path
1534
+ 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"
1535
+ />
1536
+ </svg>
1396
1537
  </span>
1397
1538
 
1398
1539
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1399
1540
  </li>
1400
1541
  <li class="pf-v6-c-breadcrumb__item">
1401
1542
  <span class="pf-v6-c-breadcrumb__item-divider">
1402
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1543
+ <svg
1544
+ class="pf-v6-svg"
1545
+ viewBox="0 0 20 20"
1546
+ fill="currentColor"
1547
+ aria-hidden="true"
1548
+ role="img"
1549
+ width="1em"
1550
+ height="1em"
1551
+ >
1552
+ <path
1553
+ 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"
1554
+ />
1555
+ </svg>
1403
1556
  </span>
1404
1557
 
1405
1558
  <a
@@ -1592,10 +1745,8 @@ wrapperTag: div
1592
1745
  <span class="pf-v6-c-button__text">Skip to content</span>
1593
1746
  </a>
1594
1747
  </div>
1595
- <header
1596
- class="pf-v6-c-masthead"
1597
- id="page-demo-sticky-top-breadcrumb-masthead"
1598
- >
1748
+
1749
+ <header class="pf-v6-c-masthead" id="page-demo-sticky-top-breadcrumb-docked">
1599
1750
  <div class="pf-v6-c-masthead__main">
1600
1751
  <span class="pf-v6-c-masthead__toggle">
1601
1752
  <button
@@ -1637,7 +1788,7 @@ wrapperTag: div
1637
1788
  y1="2.25860997e-13%"
1638
1789
  x2="32%"
1639
1790
  y2="100%"
1640
- id="linearGradient-page-demo-sticky-top-breadcrumb-masthead"
1791
+ id="linearGradient-page-demo-sticky-top-breadcrumb-docked"
1641
1792
  >
1642
1793
  <stop stop-color="#2B9AF3" offset="0%" />
1643
1794
  <stop
@@ -1691,11 +1842,11 @@ wrapperTag: div
1691
1842
  />
1692
1843
  <path
1693
1844
  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)"
1845
+ fill="url(#linearGradient-page-demo-sticky-top-breadcrumb-docked)"
1695
1846
  />
1696
1847
  <path
1697
1848
  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)"
1849
+ fill="url(#linearGradient-page-demo-sticky-top-breadcrumb-docked)"
1699
1850
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
1700
1851
  />
1701
1852
  </g>
@@ -1707,7 +1858,7 @@ wrapperTag: div
1707
1858
  <div class="pf-v6-c-masthead__content">
1708
1859
  <div
1709
1860
  class="pf-v6-c-toolbar pf-m-static"
1710
- id="page-demo-sticky-top-breadcrumb-masthead-toolbar"
1861
+ id="page-demo-sticky-top-breadcrumb-docked-toolbar"
1711
1862
  >
1712
1863
  <div class="pf-v6-c-toolbar__content">
1713
1864
  <div class="pf-v6-c-toolbar__content-section">
@@ -1774,44 +1925,46 @@ wrapperTag: div
1774
1925
  </div>
1775
1926
  </header>
1776
1927
  <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>
1928
+ <div class="pf-v6-c-page__sidebar-main">
1929
+ <div class="pf-v6-c-page__sidebar-body">
1930
+ <nav
1931
+ class="pf-v6-c-nav"
1932
+ id="page-demo-sticky-top-breadcrumb-primary-nav"
1933
+ aria-label="Global"
1934
+ >
1935
+ <ul class="pf-v6-c-nav__list" role="list">
1936
+ <li class="pf-v6-c-nav__item">
1937
+ <a href="#" class="pf-v6-c-nav__link">
1938
+ <span class="pf-v6-c-nav__link-text">System panel</span>
1939
+ </a>
1940
+ </li>
1941
+ <li class="pf-v6-c-nav__item">
1942
+ <a
1943
+ href="#"
1944
+ class="pf-v6-c-nav__link pf-m-current"
1945
+ aria-current="page"
1946
+ >
1947
+ <span class="pf-v6-c-nav__link-text">Policy</span>
1948
+ </a>
1949
+ </li>
1950
+ <li class="pf-v6-c-nav__item">
1951
+ <a href="#" class="pf-v6-c-nav__link">
1952
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
1953
+ </a>
1954
+ </li>
1955
+ <li class="pf-v6-c-nav__item">
1956
+ <a href="#" class="pf-v6-c-nav__link">
1957
+ <span class="pf-v6-c-nav__link-text">Network services</span>
1958
+ </a>
1959
+ </li>
1960
+ <li class="pf-v6-c-nav__item">
1961
+ <a href="#" class="pf-v6-c-nav__link">
1962
+ <span class="pf-v6-c-nav__link-text">Server</span>
1963
+ </a>
1964
+ </li>
1965
+ </ul>
1966
+ </nav>
1967
+ </div>
1815
1968
  </div>
1816
1969
  </div>
1817
1970
  <div class="pf-v6-c-page__main-container" tabindex="-1">
@@ -1831,21 +1984,57 @@ wrapperTag: div
1831
1984
  </li>
1832
1985
  <li class="pf-v6-c-breadcrumb__item">
1833
1986
  <span class="pf-v6-c-breadcrumb__item-divider">
1834
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1987
+ <svg
1988
+ class="pf-v6-svg"
1989
+ viewBox="0 0 20 20"
1990
+ fill="currentColor"
1991
+ aria-hidden="true"
1992
+ role="img"
1993
+ width="1em"
1994
+ height="1em"
1995
+ >
1996
+ <path
1997
+ 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"
1998
+ />
1999
+ </svg>
1835
2000
  </span>
1836
2001
 
1837
2002
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1838
2003
  </li>
1839
2004
  <li class="pf-v6-c-breadcrumb__item">
1840
2005
  <span class="pf-v6-c-breadcrumb__item-divider">
1841
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2006
+ <svg
2007
+ class="pf-v6-svg"
2008
+ viewBox="0 0 20 20"
2009
+ fill="currentColor"
2010
+ aria-hidden="true"
2011
+ role="img"
2012
+ width="1em"
2013
+ height="1em"
2014
+ >
2015
+ <path
2016
+ 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"
2017
+ />
2018
+ </svg>
1842
2019
  </span>
1843
2020
 
1844
2021
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1845
2022
  </li>
1846
2023
  <li class="pf-v6-c-breadcrumb__item">
1847
2024
  <span class="pf-v6-c-breadcrumb__item-divider">
1848
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2025
+ <svg
2026
+ class="pf-v6-svg"
2027
+ viewBox="0 0 20 20"
2028
+ fill="currentColor"
2029
+ aria-hidden="true"
2030
+ role="img"
2031
+ width="1em"
2032
+ height="1em"
2033
+ >
2034
+ <path
2035
+ 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"
2036
+ />
2037
+ </svg>
1849
2038
  </span>
1850
2039
 
1851
2040
  <a
@@ -2038,9 +2227,10 @@ wrapperTag: div
2038
2227
  <span class="pf-v6-c-button__text">Skip to content</span>
2039
2228
  </a>
2040
2229
  </div>
2230
+
2041
2231
  <header
2042
2232
  class="pf-v6-c-masthead"
2043
- id="page-demo-sticky-top-section-group-masthead"
2233
+ id="page-demo-sticky-top-section-group-docked"
2044
2234
  >
2045
2235
  <div class="pf-v6-c-masthead__main">
2046
2236
  <span class="pf-v6-c-masthead__toggle">
@@ -2083,7 +2273,7 @@ wrapperTag: div
2083
2273
  y1="2.25860997e-13%"
2084
2274
  x2="32%"
2085
2275
  y2="100%"
2086
- id="linearGradient-page-demo-sticky-top-section-group-masthead"
2276
+ id="linearGradient-page-demo-sticky-top-section-group-docked"
2087
2277
  >
2088
2278
  <stop stop-color="#2B9AF3" offset="0%" />
2089
2279
  <stop
@@ -2137,11 +2327,11 @@ wrapperTag: div
2137
2327
  />
2138
2328
  <path
2139
2329
  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)"
2330
+ fill="url(#linearGradient-page-demo-sticky-top-section-group-docked)"
2141
2331
  />
2142
2332
  <path
2143
2333
  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)"
2334
+ fill="url(#linearGradient-page-demo-sticky-top-section-group-docked)"
2145
2335
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
2146
2336
  />
2147
2337
  </g>
@@ -2153,7 +2343,7 @@ wrapperTag: div
2153
2343
  <div class="pf-v6-c-masthead__content">
2154
2344
  <div
2155
2345
  class="pf-v6-c-toolbar pf-m-static"
2156
- id="page-demo-sticky-top-section-group-masthead-toolbar"
2346
+ id="page-demo-sticky-top-section-group-docked-toolbar"
2157
2347
  >
2158
2348
  <div class="pf-v6-c-toolbar__content">
2159
2349
  <div class="pf-v6-c-toolbar__content-section">
@@ -2220,44 +2410,46 @@ wrapperTag: div
2220
2410
  </div>
2221
2411
  </header>
2222
2412
  <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>
2413
+ <div class="pf-v6-c-page__sidebar-main">
2414
+ <div class="pf-v6-c-page__sidebar-body">
2415
+ <nav
2416
+ class="pf-v6-c-nav"
2417
+ id="page-demo-sticky-top-section-group-primary-nav"
2418
+ aria-label="Global"
2419
+ >
2420
+ <ul class="pf-v6-c-nav__list" role="list">
2421
+ <li class="pf-v6-c-nav__item">
2422
+ <a href="#" class="pf-v6-c-nav__link">
2423
+ <span class="pf-v6-c-nav__link-text">System panel</span>
2424
+ </a>
2425
+ </li>
2426
+ <li class="pf-v6-c-nav__item">
2427
+ <a
2428
+ href="#"
2429
+ class="pf-v6-c-nav__link pf-m-current"
2430
+ aria-current="page"
2431
+ >
2432
+ <span class="pf-v6-c-nav__link-text">Policy</span>
2433
+ </a>
2434
+ </li>
2435
+ <li class="pf-v6-c-nav__item">
2436
+ <a href="#" class="pf-v6-c-nav__link">
2437
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
2438
+ </a>
2439
+ </li>
2440
+ <li class="pf-v6-c-nav__item">
2441
+ <a href="#" class="pf-v6-c-nav__link">
2442
+ <span class="pf-v6-c-nav__link-text">Network services</span>
2443
+ </a>
2444
+ </li>
2445
+ <li class="pf-v6-c-nav__item">
2446
+ <a href="#" class="pf-v6-c-nav__link">
2447
+ <span class="pf-v6-c-nav__link-text">Server</span>
2448
+ </a>
2449
+ </li>
2450
+ </ul>
2451
+ </nav>
2452
+ </div>
2261
2453
  </div>
2262
2454
  </div>
2263
2455
  <div class="pf-v6-c-page__main-container" tabindex="-1">
@@ -2276,21 +2468,57 @@ wrapperTag: div
2276
2468
  </li>
2277
2469
  <li class="pf-v6-c-breadcrumb__item">
2278
2470
  <span class="pf-v6-c-breadcrumb__item-divider">
2279
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2471
+ <svg
2472
+ class="pf-v6-svg"
2473
+ viewBox="0 0 20 20"
2474
+ fill="currentColor"
2475
+ aria-hidden="true"
2476
+ role="img"
2477
+ width="1em"
2478
+ height="1em"
2479
+ >
2480
+ <path
2481
+ 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"
2482
+ />
2483
+ </svg>
2280
2484
  </span>
2281
2485
 
2282
2486
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
2283
2487
  </li>
2284
2488
  <li class="pf-v6-c-breadcrumb__item">
2285
2489
  <span class="pf-v6-c-breadcrumb__item-divider">
2286
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2490
+ <svg
2491
+ class="pf-v6-svg"
2492
+ viewBox="0 0 20 20"
2493
+ fill="currentColor"
2494
+ aria-hidden="true"
2495
+ role="img"
2496
+ width="1em"
2497
+ height="1em"
2498
+ >
2499
+ <path
2500
+ 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"
2501
+ />
2502
+ </svg>
2287
2503
  </span>
2288
2504
 
2289
2505
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
2290
2506
  </li>
2291
2507
  <li class="pf-v6-c-breadcrumb__item">
2292
2508
  <span class="pf-v6-c-breadcrumb__item-divider">
2293
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2509
+ <svg
2510
+ class="pf-v6-svg"
2511
+ viewBox="0 0 20 20"
2512
+ fill="currentColor"
2513
+ aria-hidden="true"
2514
+ role="img"
2515
+ width="1em"
2516
+ height="1em"
2517
+ >
2518
+ <path
2519
+ 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"
2520
+ />
2521
+ </svg>
2294
2522
  </span>
2295
2523
 
2296
2524
  <a
@@ -2484,10 +2712,8 @@ wrapperTag: div
2484
2712
  <span class="pf-v6-c-button__text">Skip to content</span>
2485
2713
  </a>
2486
2714
  </div>
2487
- <header
2488
- class="pf-v6-c-masthead"
2489
- id="page-demo-sticky-section-bottom-masthead"
2490
- >
2715
+
2716
+ <header class="pf-v6-c-masthead" id="page-demo-sticky-section-bottom-docked">
2491
2717
  <div class="pf-v6-c-masthead__main">
2492
2718
  <span class="pf-v6-c-masthead__toggle">
2493
2719
  <button
@@ -2529,7 +2755,7 @@ wrapperTag: div
2529
2755
  y1="2.25860997e-13%"
2530
2756
  x2="32%"
2531
2757
  y2="100%"
2532
- id="linearGradient-page-demo-sticky-section-bottom-masthead"
2758
+ id="linearGradient-page-demo-sticky-section-bottom-docked"
2533
2759
  >
2534
2760
  <stop stop-color="#2B9AF3" offset="0%" />
2535
2761
  <stop
@@ -2583,11 +2809,11 @@ wrapperTag: div
2583
2809
  />
2584
2810
  <path
2585
2811
  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)"
2812
+ fill="url(#linearGradient-page-demo-sticky-section-bottom-docked)"
2587
2813
  />
2588
2814
  <path
2589
2815
  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)"
2816
+ fill="url(#linearGradient-page-demo-sticky-section-bottom-docked)"
2591
2817
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
2592
2818
  />
2593
2819
  </g>
@@ -2599,7 +2825,7 @@ wrapperTag: div
2599
2825
  <div class="pf-v6-c-masthead__content">
2600
2826
  <div
2601
2827
  class="pf-v6-c-toolbar pf-m-static"
2602
- id="page-demo-sticky-section-bottom-masthead-toolbar"
2828
+ id="page-demo-sticky-section-bottom-docked-toolbar"
2603
2829
  >
2604
2830
  <div class="pf-v6-c-toolbar__content">
2605
2831
  <div class="pf-v6-c-toolbar__content-section">
@@ -2666,44 +2892,46 @@ wrapperTag: div
2666
2892
  </div>
2667
2893
  </header>
2668
2894
  <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>
2895
+ <div class="pf-v6-c-page__sidebar-main">
2896
+ <div class="pf-v6-c-page__sidebar-body">
2897
+ <nav
2898
+ class="pf-v6-c-nav"
2899
+ id="page-demo-sticky-section-bottom-primary-nav"
2900
+ aria-label="Global"
2901
+ >
2902
+ <ul class="pf-v6-c-nav__list" role="list">
2903
+ <li class="pf-v6-c-nav__item">
2904
+ <a href="#" class="pf-v6-c-nav__link">
2905
+ <span class="pf-v6-c-nav__link-text">System panel</span>
2906
+ </a>
2907
+ </li>
2908
+ <li class="pf-v6-c-nav__item">
2909
+ <a
2910
+ href="#"
2911
+ class="pf-v6-c-nav__link pf-m-current"
2912
+ aria-current="page"
2913
+ >
2914
+ <span class="pf-v6-c-nav__link-text">Policy</span>
2915
+ </a>
2916
+ </li>
2917
+ <li class="pf-v6-c-nav__item">
2918
+ <a href="#" class="pf-v6-c-nav__link">
2919
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
2920
+ </a>
2921
+ </li>
2922
+ <li class="pf-v6-c-nav__item">
2923
+ <a href="#" class="pf-v6-c-nav__link">
2924
+ <span class="pf-v6-c-nav__link-text">Network services</span>
2925
+ </a>
2926
+ </li>
2927
+ <li class="pf-v6-c-nav__item">
2928
+ <a href="#" class="pf-v6-c-nav__link">
2929
+ <span class="pf-v6-c-nav__link-text">Server</span>
2930
+ </a>
2931
+ </li>
2932
+ </ul>
2933
+ </nav>
2934
+ </div>
2707
2935
  </div>
2708
2936
  </div>
2709
2937
  <div class="pf-v6-c-page__main-container" tabindex="-1">
@@ -2721,21 +2949,57 @@ wrapperTag: div
2721
2949
  </li>
2722
2950
  <li class="pf-v6-c-breadcrumb__item">
2723
2951
  <span class="pf-v6-c-breadcrumb__item-divider">
2724
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2952
+ <svg
2953
+ class="pf-v6-svg"
2954
+ viewBox="0 0 20 20"
2955
+ fill="currentColor"
2956
+ aria-hidden="true"
2957
+ role="img"
2958
+ width="1em"
2959
+ height="1em"
2960
+ >
2961
+ <path
2962
+ 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"
2963
+ />
2964
+ </svg>
2725
2965
  </span>
2726
2966
 
2727
2967
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
2728
2968
  </li>
2729
2969
  <li class="pf-v6-c-breadcrumb__item">
2730
2970
  <span class="pf-v6-c-breadcrumb__item-divider">
2731
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2971
+ <svg
2972
+ class="pf-v6-svg"
2973
+ viewBox="0 0 20 20"
2974
+ fill="currentColor"
2975
+ aria-hidden="true"
2976
+ role="img"
2977
+ width="1em"
2978
+ height="1em"
2979
+ >
2980
+ <path
2981
+ 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"
2982
+ />
2983
+ </svg>
2732
2984
  </span>
2733
2985
 
2734
2986
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
2735
2987
  </li>
2736
2988
  <li class="pf-v6-c-breadcrumb__item">
2737
2989
  <span class="pf-v6-c-breadcrumb__item-divider">
2738
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2990
+ <svg
2991
+ class="pf-v6-svg"
2992
+ viewBox="0 0 20 20"
2993
+ fill="currentColor"
2994
+ aria-hidden="true"
2995
+ role="img"
2996
+ width="1em"
2997
+ height="1em"
2998
+ >
2999
+ <path
3000
+ 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"
3001
+ />
3002
+ </svg>
2739
3003
  </span>
2740
3004
 
2741
3005
  <a
@@ -2935,7 +3199,8 @@ wrapperTag: div
2935
3199
  <span class="pf-v6-c-button__text">Skip to content</span>
2936
3200
  </a>
2937
3201
  </div>
2938
- <header class="pf-v6-c-masthead" id="page-demo-overflow-scroll-masthead">
3202
+
3203
+ <header class="pf-v6-c-masthead" id="page-demo-overflow-scroll-docked">
2939
3204
  <div class="pf-v6-c-masthead__main">
2940
3205
  <span class="pf-v6-c-masthead__toggle">
2941
3206
  <button
@@ -2977,7 +3242,7 @@ wrapperTag: div
2977
3242
  y1="2.25860997e-13%"
2978
3243
  x2="32%"
2979
3244
  y2="100%"
2980
- id="linearGradient-page-demo-overflow-scroll-masthead"
3245
+ id="linearGradient-page-demo-overflow-scroll-docked"
2981
3246
  >
2982
3247
  <stop stop-color="#2B9AF3" offset="0%" />
2983
3248
  <stop
@@ -3031,11 +3296,11 @@ wrapperTag: div
3031
3296
  />
3032
3297
  <path
3033
3298
  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)"
3299
+ fill="url(#linearGradient-page-demo-overflow-scroll-docked)"
3035
3300
  />
3036
3301
  <path
3037
3302
  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)"
3303
+ fill="url(#linearGradient-page-demo-overflow-scroll-docked)"
3039
3304
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
3040
3305
  />
3041
3306
  </g>
@@ -3047,7 +3312,7 @@ wrapperTag: div
3047
3312
  <div class="pf-v6-c-masthead__content">
3048
3313
  <div
3049
3314
  class="pf-v6-c-toolbar pf-m-static"
3050
- id="page-demo-overflow-scroll-masthead-toolbar"
3315
+ id="page-demo-overflow-scroll-docked-toolbar"
3051
3316
  >
3052
3317
  <div class="pf-v6-c-toolbar__content">
3053
3318
  <div class="pf-v6-c-toolbar__content-section">
@@ -3114,44 +3379,46 @@ wrapperTag: div
3114
3379
  </div>
3115
3380
  </header>
3116
3381
  <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>
3382
+ <div class="pf-v6-c-page__sidebar-main">
3383
+ <div class="pf-v6-c-page__sidebar-body">
3384
+ <nav
3385
+ class="pf-v6-c-nav"
3386
+ id="page-demo-overflow-scroll-primary-nav"
3387
+ aria-label="Global"
3388
+ >
3389
+ <ul class="pf-v6-c-nav__list" role="list">
3390
+ <li class="pf-v6-c-nav__item">
3391
+ <a href="#" class="pf-v6-c-nav__link">
3392
+ <span class="pf-v6-c-nav__link-text">System panel</span>
3393
+ </a>
3394
+ </li>
3395
+ <li class="pf-v6-c-nav__item">
3396
+ <a
3397
+ href="#"
3398
+ class="pf-v6-c-nav__link pf-m-current"
3399
+ aria-current="page"
3400
+ >
3401
+ <span class="pf-v6-c-nav__link-text">Policy</span>
3402
+ </a>
3403
+ </li>
3404
+ <li class="pf-v6-c-nav__item">
3405
+ <a href="#" class="pf-v6-c-nav__link">
3406
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
3407
+ </a>
3408
+ </li>
3409
+ <li class="pf-v6-c-nav__item">
3410
+ <a href="#" class="pf-v6-c-nav__link">
3411
+ <span class="pf-v6-c-nav__link-text">Network services</span>
3412
+ </a>
3413
+ </li>
3414
+ <li class="pf-v6-c-nav__item">
3415
+ <a href="#" class="pf-v6-c-nav__link">
3416
+ <span class="pf-v6-c-nav__link-text">Server</span>
3417
+ </a>
3418
+ </li>
3419
+ </ul>
3420
+ </nav>
3421
+ </div>
3155
3422
  </div>
3156
3423
  </div>
3157
3424
  <div class="pf-v6-c-page__main-container" tabindex="-1">
@@ -3169,21 +3436,57 @@ wrapperTag: div
3169
3436
  </li>
3170
3437
  <li class="pf-v6-c-breadcrumb__item">
3171
3438
  <span class="pf-v6-c-breadcrumb__item-divider">
3172
- <i class="fas fa-angle-right" aria-hidden="true"></i>
3439
+ <svg
3440
+ class="pf-v6-svg"
3441
+ viewBox="0 0 20 20"
3442
+ fill="currentColor"
3443
+ aria-hidden="true"
3444
+ role="img"
3445
+ width="1em"
3446
+ height="1em"
3447
+ >
3448
+ <path
3449
+ 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"
3450
+ />
3451
+ </svg>
3173
3452
  </span>
3174
3453
 
3175
3454
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
3176
3455
  </li>
3177
3456
  <li class="pf-v6-c-breadcrumb__item">
3178
3457
  <span class="pf-v6-c-breadcrumb__item-divider">
3179
- <i class="fas fa-angle-right" aria-hidden="true"></i>
3458
+ <svg
3459
+ class="pf-v6-svg"
3460
+ viewBox="0 0 20 20"
3461
+ fill="currentColor"
3462
+ aria-hidden="true"
3463
+ role="img"
3464
+ width="1em"
3465
+ height="1em"
3466
+ >
3467
+ <path
3468
+ 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"
3469
+ />
3470
+ </svg>
3180
3471
  </span>
3181
3472
 
3182
3473
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
3183
3474
  </li>
3184
3475
  <li class="pf-v6-c-breadcrumb__item">
3185
3476
  <span class="pf-v6-c-breadcrumb__item-divider">
3186
- <i class="fas fa-angle-right" aria-hidden="true"></i>
3477
+ <svg
3478
+ class="pf-v6-svg"
3479
+ viewBox="0 0 20 20"
3480
+ fill="currentColor"
3481
+ aria-hidden="true"
3482
+ role="img"
3483
+ width="1em"
3484
+ height="1em"
3485
+ >
3486
+ <path
3487
+ 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"
3488
+ />
3489
+ </svg>
3187
3490
  </span>
3188
3491
 
3189
3492
  <a
@@ -3388,7 +3691,8 @@ wrapperTag: div
3388
3691
  <span class="pf-v6-c-button__text">Skip to content</span>
3389
3692
  </a>
3390
3693
  </div>
3391
- <header class="pf-v6-c-masthead" id="page-demo-centered-section-masthead">
3694
+
3695
+ <header class="pf-v6-c-masthead" id="page-demo-centered-section-docked">
3392
3696
  <div class="pf-v6-c-masthead__main">
3393
3697
  <span class="pf-v6-c-masthead__toggle">
3394
3698
  <button
@@ -3430,7 +3734,7 @@ wrapperTag: div
3430
3734
  y1="2.25860997e-13%"
3431
3735
  x2="32%"
3432
3736
  y2="100%"
3433
- id="linearGradient-page-demo-centered-section-masthead"
3737
+ id="linearGradient-page-demo-centered-section-docked"
3434
3738
  >
3435
3739
  <stop stop-color="#2B9AF3" offset="0%" />
3436
3740
  <stop
@@ -3484,11 +3788,11 @@ wrapperTag: div
3484
3788
  />
3485
3789
  <path
3486
3790
  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)"
3791
+ fill="url(#linearGradient-page-demo-centered-section-docked)"
3488
3792
  />
3489
3793
  <path
3490
3794
  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)"
3795
+ fill="url(#linearGradient-page-demo-centered-section-docked)"
3492
3796
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
3493
3797
  />
3494
3798
  </g>
@@ -3500,7 +3804,7 @@ wrapperTag: div
3500
3804
  <div class="pf-v6-c-masthead__content">
3501
3805
  <div
3502
3806
  class="pf-v6-c-toolbar pf-m-static"
3503
- id="page-demo-centered-section-masthead-toolbar"
3807
+ id="page-demo-centered-section-docked-toolbar"
3504
3808
  >
3505
3809
  <div class="pf-v6-c-toolbar__content">
3506
3810
  <div class="pf-v6-c-toolbar__content-section">
@@ -3567,44 +3871,46 @@ wrapperTag: div
3567
3871
  </div>
3568
3872
  </header>
3569
3873
  <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>
3874
+ <div class="pf-v6-c-page__sidebar-main">
3875
+ <div class="pf-v6-c-page__sidebar-body">
3876
+ <nav
3877
+ class="pf-v6-c-nav"
3878
+ id="page-demo-centered-section-primary-nav"
3879
+ aria-label="Global"
3880
+ >
3881
+ <ul class="pf-v6-c-nav__list" role="list">
3882
+ <li class="pf-v6-c-nav__item">
3883
+ <a href="#" class="pf-v6-c-nav__link">
3884
+ <span class="pf-v6-c-nav__link-text">System panel</span>
3885
+ </a>
3886
+ </li>
3887
+ <li class="pf-v6-c-nav__item">
3888
+ <a
3889
+ href="#"
3890
+ class="pf-v6-c-nav__link pf-m-current"
3891
+ aria-current="page"
3892
+ >
3893
+ <span class="pf-v6-c-nav__link-text">Policy</span>
3894
+ </a>
3895
+ </li>
3896
+ <li class="pf-v6-c-nav__item">
3897
+ <a href="#" class="pf-v6-c-nav__link">
3898
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
3899
+ </a>
3900
+ </li>
3901
+ <li class="pf-v6-c-nav__item">
3902
+ <a href="#" class="pf-v6-c-nav__link">
3903
+ <span class="pf-v6-c-nav__link-text">Network services</span>
3904
+ </a>
3905
+ </li>
3906
+ <li class="pf-v6-c-nav__item">
3907
+ <a href="#" class="pf-v6-c-nav__link">
3908
+ <span class="pf-v6-c-nav__link-text">Server</span>
3909
+ </a>
3910
+ </li>
3911
+ </ul>
3912
+ </nav>
3913
+ </div>
3608
3914
  </div>
3609
3915
  </div>
3610
3916
  <div class="pf-v6-c-page__main-container" tabindex="-1">
@@ -3699,7 +4005,8 @@ wrapperTag: div
3699
4005
  <span class="pf-v6-c-button__text">Skip to content</span>
3700
4006
  </a>
3701
4007
  </div>
3702
- <header class="pf-v6-c-masthead" id="page-context-selector-masthead">
4008
+
4009
+ <header class="pf-v6-c-masthead" id="page-context-selector-docked">
3703
4010
  <div class="pf-v6-c-masthead__main">
3704
4011
  <span class="pf-v6-c-masthead__toggle">
3705
4012
  <button
@@ -3741,7 +4048,7 @@ wrapperTag: div
3741
4048
  y1="2.25860997e-13%"
3742
4049
  x2="32%"
3743
4050
  y2="100%"
3744
- id="linearGradient-page-context-selector-masthead"
4051
+ id="linearGradient-page-context-selector-docked"
3745
4052
  >
3746
4053
  <stop stop-color="#2B9AF3" offset="0%" />
3747
4054
  <stop
@@ -3795,11 +4102,11 @@ wrapperTag: div
3795
4102
  />
3796
4103
  <path
3797
4104
  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)"
4105
+ fill="url(#linearGradient-page-context-selector-docked)"
3799
4106
  />
3800
4107
  <path
3801
4108
  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)"
4109
+ fill="url(#linearGradient-page-context-selector-docked)"
3803
4110
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
3804
4111
  />
3805
4112
  </g>
@@ -3811,7 +4118,7 @@ wrapperTag: div
3811
4118
  <div class="pf-v6-c-masthead__content">
3812
4119
  <div
3813
4120
  class="pf-v6-c-toolbar pf-m-static"
3814
- id="page-context-selector-masthead-toolbar"
4121
+ id="page-context-selector-docked-toolbar"
3815
4122
  >
3816
4123
  <div class="pf-v6-c-toolbar__content">
3817
4124
  <div class="pf-v6-c-toolbar__content-section">
@@ -3878,61 +4185,63 @@ wrapperTag: div
3878
4185
  </div>
3879
4186
  </header>
3880
4187
  <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>
4188
+ <div class="pf-v6-c-page__sidebar-main">
4189
+ <div class="pf-v6-c-page__sidebar-body pf-m-context-selector">
4190
+ <button
4191
+ class="pf-v6-c-menu-toggle pf-m-full-width"
4192
+ type="button"
4193
+ aria-expanded="false"
4194
+ >
4195
+ <span class="pf-v6-c-menu-toggle__icon">
4196
+ <i class="fas fa-cogs" aria-hidden="true"></i>
3894
4197
  </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"
3915
- >
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>
4198
+ <span class="pf-v6-c-menu-toggle__text">Administrator</span>
4199
+ <span class="pf-v6-c-menu-toggle__controls">
4200
+ <span class="pf-v6-c-menu-toggle__toggle-icon">
4201
+ <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
4202
+ </span>
4203
+ </span>
4204
+ </button>
4205
+ </div>
4206
+ <div class="pf-v6-c-page__sidebar-body">
4207
+ <nav
4208
+ class="pf-v6-c-nav"
4209
+ id="page-context-selector-primary-nav"
4210
+ aria-label="Global"
4211
+ >
4212
+ <ul class="pf-v6-c-nav__list" role="list">
4213
+ <li class="pf-v6-c-nav__item">
4214
+ <a href="#" class="pf-v6-c-nav__link">
4215
+ <span class="pf-v6-c-nav__link-text">System panel</span>
4216
+ </a>
4217
+ </li>
4218
+ <li class="pf-v6-c-nav__item">
4219
+ <a
4220
+ href="#"
4221
+ class="pf-v6-c-nav__link pf-m-current"
4222
+ aria-current="page"
4223
+ >
4224
+ <span class="pf-v6-c-nav__link-text">Policy</span>
4225
+ </a>
4226
+ </li>
4227
+ <li class="pf-v6-c-nav__item">
4228
+ <a href="#" class="pf-v6-c-nav__link">
4229
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
4230
+ </a>
4231
+ </li>
4232
+ <li class="pf-v6-c-nav__item">
4233
+ <a href="#" class="pf-v6-c-nav__link">
4234
+ <span class="pf-v6-c-nav__link-text">Network services</span>
4235
+ </a>
4236
+ </li>
4237
+ <li class="pf-v6-c-nav__item">
4238
+ <a href="#" class="pf-v6-c-nav__link">
4239
+ <span class="pf-v6-c-nav__link-text">Server</span>
4240
+ </a>
4241
+ </li>
4242
+ </ul>
4243
+ </nav>
4244
+ </div>
3936
4245
  </div>
3937
4246
  </div>
3938
4247
  <div class="pf-v6-c-page__main-container" tabindex="-1">
@@ -3950,21 +4259,57 @@ wrapperTag: div
3950
4259
  </li>
3951
4260
  <li class="pf-v6-c-breadcrumb__item">
3952
4261
  <span class="pf-v6-c-breadcrumb__item-divider">
3953
- <i class="fas fa-angle-right" aria-hidden="true"></i>
4262
+ <svg
4263
+ class="pf-v6-svg"
4264
+ viewBox="0 0 20 20"
4265
+ fill="currentColor"
4266
+ aria-hidden="true"
4267
+ role="img"
4268
+ width="1em"
4269
+ height="1em"
4270
+ >
4271
+ <path
4272
+ 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"
4273
+ />
4274
+ </svg>
3954
4275
  </span>
3955
4276
 
3956
4277
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
3957
4278
  </li>
3958
4279
  <li class="pf-v6-c-breadcrumb__item">
3959
4280
  <span class="pf-v6-c-breadcrumb__item-divider">
3960
- <i class="fas fa-angle-right" aria-hidden="true"></i>
4281
+ <svg
4282
+ class="pf-v6-svg"
4283
+ viewBox="0 0 20 20"
4284
+ fill="currentColor"
4285
+ aria-hidden="true"
4286
+ role="img"
4287
+ width="1em"
4288
+ height="1em"
4289
+ >
4290
+ <path
4291
+ 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"
4292
+ />
4293
+ </svg>
3961
4294
  </span>
3962
4295
 
3963
4296
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
3964
4297
  </li>
3965
4298
  <li class="pf-v6-c-breadcrumb__item">
3966
4299
  <span class="pf-v6-c-breadcrumb__item-divider">
3967
- <i class="fas fa-angle-right" aria-hidden="true"></i>
4300
+ <svg
4301
+ class="pf-v6-svg"
4302
+ viewBox="0 0 20 20"
4303
+ fill="currentColor"
4304
+ aria-hidden="true"
4305
+ role="img"
4306
+ width="1em"
4307
+ height="1em"
4308
+ >
4309
+ <path
4310
+ 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"
4311
+ />
4312
+ </svg>
3968
4313
  </span>
3969
4314
 
3970
4315
  <a
@@ -4037,7 +4382,8 @@ wrapperTag: div
4037
4382
  <span class="pf-v6-c-button__text">Skip to content</span>
4038
4383
  </a>
4039
4384
  </div>
4040
- <header class="pf-v6-c-masthead" id="page-context-selector-expanded-masthead">
4385
+
4386
+ <header class="pf-v6-c-masthead" id="page-context-selector-expanded-docked">
4041
4387
  <div class="pf-v6-c-masthead__main">
4042
4388
  <span class="pf-v6-c-masthead__toggle">
4043
4389
  <button
@@ -4079,7 +4425,7 @@ wrapperTag: div
4079
4425
  y1="2.25860997e-13%"
4080
4426
  x2="32%"
4081
4427
  y2="100%"
4082
- id="linearGradient-page-context-selector-expanded-masthead"
4428
+ id="linearGradient-page-context-selector-expanded-docked"
4083
4429
  >
4084
4430
  <stop stop-color="#2B9AF3" offset="0%" />
4085
4431
  <stop
@@ -4133,11 +4479,11 @@ wrapperTag: div
4133
4479
  />
4134
4480
  <path
4135
4481
  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)"
4482
+ fill="url(#linearGradient-page-context-selector-expanded-docked)"
4137
4483
  />
4138
4484
  <path
4139
4485
  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)"
4486
+ fill="url(#linearGradient-page-context-selector-expanded-docked)"
4141
4487
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
4142
4488
  />
4143
4489
  </g>
@@ -4149,7 +4495,7 @@ wrapperTag: div
4149
4495
  <div class="pf-v6-c-masthead__content">
4150
4496
  <div
4151
4497
  class="pf-v6-c-toolbar pf-m-static"
4152
- id="page-context-selector-expanded-masthead-toolbar"
4498
+ id="page-context-selector-expanded-docked-toolbar"
4153
4499
  >
4154
4500
  <div class="pf-v6-c-toolbar__content">
4155
4501
  <div class="pf-v6-c-toolbar__content-section">
@@ -4216,98 +4562,112 @@ wrapperTag: div
4216
4562
  </div>
4217
4563
  </header>
4218
4564
  <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>
4565
+ <div class="pf-v6-c-page__sidebar-main">
4566
+ <div class="pf-v6-c-page__sidebar-body pf-m-context-selector">
4567
+ <button
4568
+ class="pf-v6-c-menu-toggle pf-m-full-width pf-m-expanded"
4569
+ type="button"
4570
+ aria-expanded="true"
4571
+ >
4572
+ <span class="pf-v6-c-menu-toggle__icon">
4573
+ <i class="fas fa-cogs" aria-hidden="true"></i>
4232
4574
  </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>
4575
+ <span class="pf-v6-c-menu-toggle__text">Administrator</span>
4576
+ <span class="pf-v6-c-menu-toggle__controls">
4577
+ <span class="pf-v6-c-menu-toggle__toggle-icon">
4578
+ <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
4579
+ </span>
4580
+ </span>
4581
+ </button>
4582
+ <div class="pf-v6-c-menu">
4583
+ <div class="pf-v6-c-menu__content">
4584
+ <ul class="pf-v6-c-menu__list" role="menu">
4585
+ <li class="pf-v6-c-menu__list-item" role="none">
4586
+ <button
4587
+ class="pf-v6-c-menu__item"
4588
+ type="button"
4589
+ role="menuitem"
4590
+ >
4591
+ <span class="pf-v6-c-menu__item-main">
4592
+ <span class="pf-v6-c-menu__item-icon">
4593
+ <i class="fas fa-fw fa-cogs" aria-hidden="true"></i>
4594
+ </span>
4595
+ <span class="pf-v6-c-menu__item-text">Administrator</span>
4243
4596
  </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>
4597
+ </button>
4598
+ </li>
4599
+ <li class="pf-v6-c-menu__list-item" role="none">
4600
+ <button
4601
+ class="pf-v6-c-menu__item"
4602
+ type="button"
4603
+ role="menuitem"
4604
+ >
4605
+ <span class="pf-v6-c-menu__item-main">
4606
+ <span class="pf-v6-c-menu__item-icon">
4607
+ <i class="fas fa-fw fa-code" aria-hidden="true"></i>
4608
+ </span>
4609
+ <span class="pf-v6-c-menu__item-text">Developer</span>
4253
4610
  </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>
4611
+ </button>
4612
+ </li>
4613
+ <li class="pf-v6-c-menu__list-item" role="none">
4614
+ <button
4615
+ class="pf-v6-c-menu__item"
4616
+ type="button"
4617
+ role="menuitem"
4618
+ >
4619
+ <span class="pf-v6-c-menu__item-main">
4620
+ <span class="pf-v6-c-menu__item-icon">
4621
+ <i class="fas fa-fw fa-cube" aria-hidden="true"></i>
4622
+ </span>
4623
+ <span class="pf-v6-c-menu__item-text">User</span>
4263
4624
  </span>
4264
- <span class="pf-v6-c-menu__item-text">User</span>
4265
- </span>
4266
- </button>
4625
+ </button>
4626
+ </li>
4627
+ </ul>
4628
+ </div>
4629
+ </div>
4630
+ </div>
4631
+ <div class="pf-v6-c-page__sidebar-body">
4632
+ <nav
4633
+ class="pf-v6-c-nav"
4634
+ id="page-context-selector-expanded-primary-nav"
4635
+ aria-label="Global"
4636
+ >
4637
+ <ul class="pf-v6-c-nav__list" role="list">
4638
+ <li class="pf-v6-c-nav__item">
4639
+ <a href="#" class="pf-v6-c-nav__link">
4640
+ <span class="pf-v6-c-nav__link-text">System panel</span>
4641
+ </a>
4642
+ </li>
4643
+ <li class="pf-v6-c-nav__item">
4644
+ <a
4645
+ href="#"
4646
+ class="pf-v6-c-nav__link pf-m-current"
4647
+ aria-current="page"
4648
+ >
4649
+ <span class="pf-v6-c-nav__link-text">Policy</span>
4650
+ </a>
4651
+ </li>
4652
+ <li class="pf-v6-c-nav__item">
4653
+ <a href="#" class="pf-v6-c-nav__link">
4654
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
4655
+ </a>
4656
+ </li>
4657
+ <li class="pf-v6-c-nav__item">
4658
+ <a href="#" class="pf-v6-c-nav__link">
4659
+ <span class="pf-v6-c-nav__link-text">Network services</span>
4660
+ </a>
4661
+ </li>
4662
+ <li class="pf-v6-c-nav__item">
4663
+ <a href="#" class="pf-v6-c-nav__link">
4664
+ <span class="pf-v6-c-nav__link-text">Server</span>
4665
+ </a>
4267
4666
  </li>
4268
4667
  </ul>
4269
- </div>
4668
+ </nav>
4270
4669
  </div>
4271
4670
  </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
4671
  </div>
4312
4672
  <div class="pf-v6-c-page__main-container" tabindex="-1">
4313
4673
  <main
@@ -4324,21 +4684,57 @@ wrapperTag: div
4324
4684
  </li>
4325
4685
  <li class="pf-v6-c-breadcrumb__item">
4326
4686
  <span class="pf-v6-c-breadcrumb__item-divider">
4327
- <i class="fas fa-angle-right" aria-hidden="true"></i>
4687
+ <svg
4688
+ class="pf-v6-svg"
4689
+ viewBox="0 0 20 20"
4690
+ fill="currentColor"
4691
+ aria-hidden="true"
4692
+ role="img"
4693
+ width="1em"
4694
+ height="1em"
4695
+ >
4696
+ <path
4697
+ 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"
4698
+ />
4699
+ </svg>
4328
4700
  </span>
4329
4701
 
4330
4702
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
4331
4703
  </li>
4332
4704
  <li class="pf-v6-c-breadcrumb__item">
4333
4705
  <span class="pf-v6-c-breadcrumb__item-divider">
4334
- <i class="fas fa-angle-right" aria-hidden="true"></i>
4706
+ <svg
4707
+ class="pf-v6-svg"
4708
+ viewBox="0 0 20 20"
4709
+ fill="currentColor"
4710
+ aria-hidden="true"
4711
+ role="img"
4712
+ width="1em"
4713
+ height="1em"
4714
+ >
4715
+ <path
4716
+ 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"
4717
+ />
4718
+ </svg>
4335
4719
  </span>
4336
4720
 
4337
4721
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
4338
4722
  </li>
4339
4723
  <li class="pf-v6-c-breadcrumb__item">
4340
4724
  <span class="pf-v6-c-breadcrumb__item-divider">
4341
- <i class="fas fa-angle-right" aria-hidden="true"></i>
4725
+ <svg
4726
+ class="pf-v6-svg"
4727
+ viewBox="0 0 20 20"
4728
+ fill="currentColor"
4729
+ aria-hidden="true"
4730
+ role="img"
4731
+ width="1em"
4732
+ height="1em"
4733
+ >
4734
+ <path
4735
+ 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"
4736
+ />
4737
+ </svg>
4342
4738
  </span>
4343
4739
 
4344
4740
  <a
@@ -4411,7 +4807,8 @@ wrapperTag: div
4411
4807
  <span class="pf-v6-c-button__text">Skip to content</span>
4412
4808
  </a>
4413
4809
  </div>
4414
- <header class="pf-v6-c-masthead" id="page-demo-sidebar-collapsed-masthead">
4810
+
4811
+ <header class="pf-v6-c-masthead" id="page-demo-sidebar-collapsed-docked">
4415
4812
  <div class="pf-v6-c-masthead__main">
4416
4813
  <span class="pf-v6-c-masthead__toggle">
4417
4814
  <button
@@ -4453,7 +4850,7 @@ wrapperTag: div
4453
4850
  y1="2.25860997e-13%"
4454
4851
  x2="32%"
4455
4852
  y2="100%"
4456
- id="linearGradient-page-demo-sidebar-collapsed-masthead"
4853
+ id="linearGradient-page-demo-sidebar-collapsed-docked"
4457
4854
  >
4458
4855
  <stop stop-color="#2B9AF3" offset="0%" />
4459
4856
  <stop
@@ -4507,11 +4904,11 @@ wrapperTag: div
4507
4904
  />
4508
4905
  <path
4509
4906
  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)"
4907
+ fill="url(#linearGradient-page-demo-sidebar-collapsed-docked)"
4511
4908
  />
4512
4909
  <path
4513
4910
  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)"
4911
+ fill="url(#linearGradient-page-demo-sidebar-collapsed-docked)"
4515
4912
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
4516
4913
  />
4517
4914
  </g>
@@ -4523,7 +4920,7 @@ wrapperTag: div
4523
4920
  <div class="pf-v6-c-masthead__content">
4524
4921
  <div
4525
4922
  class="pf-v6-c-toolbar pf-m-static"
4526
- id="page-demo-sidebar-collapsed-masthead-toolbar"
4923
+ id="page-demo-sidebar-collapsed-docked-toolbar"
4527
4924
  >
4528
4925
  <div class="pf-v6-c-toolbar__content">
4529
4926
  <div class="pf-v6-c-toolbar__content-section">
@@ -4590,44 +4987,46 @@ wrapperTag: div
4590
4987
  </div>
4591
4988
  </header>
4592
4989
  <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>
4990
+ <div class="pf-v6-c-page__sidebar-main">
4991
+ <div class="pf-v6-c-page__sidebar-body">
4992
+ <nav
4993
+ class="pf-v6-c-nav"
4994
+ id="page-demo-sidebar-collapsed-primary-nav"
4995
+ aria-label="Global"
4996
+ >
4997
+ <ul class="pf-v6-c-nav__list" role="list">
4998
+ <li class="pf-v6-c-nav__item">
4999
+ <a href="#" class="pf-v6-c-nav__link">
5000
+ <span class="pf-v6-c-nav__link-text">System panel</span>
5001
+ </a>
5002
+ </li>
5003
+ <li class="pf-v6-c-nav__item">
5004
+ <a
5005
+ href="#"
5006
+ class="pf-v6-c-nav__link pf-m-current"
5007
+ aria-current="page"
5008
+ >
5009
+ <span class="pf-v6-c-nav__link-text">Policy</span>
5010
+ </a>
5011
+ </li>
5012
+ <li class="pf-v6-c-nav__item">
5013
+ <a href="#" class="pf-v6-c-nav__link">
5014
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
5015
+ </a>
5016
+ </li>
5017
+ <li class="pf-v6-c-nav__item">
5018
+ <a href="#" class="pf-v6-c-nav__link">
5019
+ <span class="pf-v6-c-nav__link-text">Network services</span>
5020
+ </a>
5021
+ </li>
5022
+ <li class="pf-v6-c-nav__item">
5023
+ <a href="#" class="pf-v6-c-nav__link">
5024
+ <span class="pf-v6-c-nav__link-text">Server</span>
5025
+ </a>
5026
+ </li>
5027
+ </ul>
5028
+ </nav>
5029
+ </div>
4631
5030
  </div>
4632
5031
  </div>
4633
5032
  <div class="pf-v6-c-page__main-container" tabindex="-1">
@@ -4645,21 +5044,57 @@ wrapperTag: div
4645
5044
  </li>
4646
5045
  <li class="pf-v6-c-breadcrumb__item">
4647
5046
  <span class="pf-v6-c-breadcrumb__item-divider">
4648
- <i class="fas fa-angle-right" aria-hidden="true"></i>
5047
+ <svg
5048
+ class="pf-v6-svg"
5049
+ viewBox="0 0 20 20"
5050
+ fill="currentColor"
5051
+ aria-hidden="true"
5052
+ role="img"
5053
+ width="1em"
5054
+ height="1em"
5055
+ >
5056
+ <path
5057
+ 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"
5058
+ />
5059
+ </svg>
4649
5060
  </span>
4650
5061
 
4651
5062
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
4652
5063
  </li>
4653
5064
  <li class="pf-v6-c-breadcrumb__item">
4654
5065
  <span class="pf-v6-c-breadcrumb__item-divider">
4655
- <i class="fas fa-angle-right" aria-hidden="true"></i>
5066
+ <svg
5067
+ class="pf-v6-svg"
5068
+ viewBox="0 0 20 20"
5069
+ fill="currentColor"
5070
+ aria-hidden="true"
5071
+ role="img"
5072
+ width="1em"
5073
+ height="1em"
5074
+ >
5075
+ <path
5076
+ 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"
5077
+ />
5078
+ </svg>
4656
5079
  </span>
4657
5080
 
4658
5081
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
4659
5082
  </li>
4660
5083
  <li class="pf-v6-c-breadcrumb__item">
4661
5084
  <span class="pf-v6-c-breadcrumb__item-divider">
4662
- <i class="fas fa-angle-right" aria-hidden="true"></i>
5085
+ <svg
5086
+ class="pf-v6-svg"
5087
+ viewBox="0 0 20 20"
5088
+ fill="currentColor"
5089
+ aria-hidden="true"
5090
+ role="img"
5091
+ width="1em"
5092
+ height="1em"
5093
+ >
5094
+ <path
5095
+ 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"
5096
+ />
5097
+ </svg>
4663
5098
  </span>
4664
5099
 
4665
5100
  <a
@@ -4732,7 +5167,8 @@ wrapperTag: div
4732
5167
  <span class="pf-v6-c-button__text">Skip to content</span>
4733
5168
  </a>
4734
5169
  </div>
4735
- <header class="pf-v6-c-masthead" id="page-demo-sidebar-expanded-masthead">
5170
+
5171
+ <header class="pf-v6-c-masthead" id="page-demo-sidebar-expanded-docked">
4736
5172
  <div class="pf-v6-c-masthead__main">
4737
5173
  <span class="pf-v6-c-masthead__toggle">
4738
5174
  <button
@@ -4774,7 +5210,7 @@ wrapperTag: div
4774
5210
  y1="2.25860997e-13%"
4775
5211
  x2="32%"
4776
5212
  y2="100%"
4777
- id="linearGradient-page-demo-sidebar-expanded-masthead"
5213
+ id="linearGradient-page-demo-sidebar-expanded-docked"
4778
5214
  >
4779
5215
  <stop stop-color="#2B9AF3" offset="0%" />
4780
5216
  <stop
@@ -4828,11 +5264,11 @@ wrapperTag: div
4828
5264
  />
4829
5265
  <path
4830
5266
  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)"
5267
+ fill="url(#linearGradient-page-demo-sidebar-expanded-docked)"
4832
5268
  />
4833
5269
  <path
4834
5270
  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)"
5271
+ fill="url(#linearGradient-page-demo-sidebar-expanded-docked)"
4836
5272
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
4837
5273
  />
4838
5274
  </g>
@@ -4844,7 +5280,7 @@ wrapperTag: div
4844
5280
  <div class="pf-v6-c-masthead__content">
4845
5281
  <div
4846
5282
  class="pf-v6-c-toolbar pf-m-static"
4847
- id="page-demo-sidebar-expanded-masthead-toolbar"
5283
+ id="page-demo-sidebar-expanded-docked-toolbar"
4848
5284
  >
4849
5285
  <div class="pf-v6-c-toolbar__content">
4850
5286
  <div class="pf-v6-c-toolbar__content-section">
@@ -4911,44 +5347,46 @@ wrapperTag: div
4911
5347
  </div>
4912
5348
  </header>
4913
5349
  <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>
5350
+ <div class="pf-v6-c-page__sidebar-main">
5351
+ <div class="pf-v6-c-page__sidebar-body">
5352
+ <nav
5353
+ class="pf-v6-c-nav"
5354
+ id="page-demo-sidebar-expanded-primary-nav"
5355
+ aria-label="Global"
5356
+ >
5357
+ <ul class="pf-v6-c-nav__list" role="list">
5358
+ <li class="pf-v6-c-nav__item">
5359
+ <a href="#" class="pf-v6-c-nav__link">
5360
+ <span class="pf-v6-c-nav__link-text">System panel</span>
5361
+ </a>
5362
+ </li>
5363
+ <li class="pf-v6-c-nav__item">
5364
+ <a
5365
+ href="#"
5366
+ class="pf-v6-c-nav__link pf-m-current"
5367
+ aria-current="page"
5368
+ >
5369
+ <span class="pf-v6-c-nav__link-text">Policy</span>
5370
+ </a>
5371
+ </li>
5372
+ <li class="pf-v6-c-nav__item">
5373
+ <a href="#" class="pf-v6-c-nav__link">
5374
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
5375
+ </a>
5376
+ </li>
5377
+ <li class="pf-v6-c-nav__item">
5378
+ <a href="#" class="pf-v6-c-nav__link">
5379
+ <span class="pf-v6-c-nav__link-text">Network services</span>
5380
+ </a>
5381
+ </li>
5382
+ <li class="pf-v6-c-nav__item">
5383
+ <a href="#" class="pf-v6-c-nav__link">
5384
+ <span class="pf-v6-c-nav__link-text">Server</span>
5385
+ </a>
5386
+ </li>
5387
+ </ul>
5388
+ </nav>
5389
+ </div>
4952
5390
  </div>
4953
5391
  </div>
4954
5392
  <div class="pf-v6-c-page__main-container" tabindex="-1">
@@ -4966,21 +5404,57 @@ wrapperTag: div
4966
5404
  </li>
4967
5405
  <li class="pf-v6-c-breadcrumb__item">
4968
5406
  <span class="pf-v6-c-breadcrumb__item-divider">
4969
- <i class="fas fa-angle-right" aria-hidden="true"></i>
5407
+ <svg
5408
+ class="pf-v6-svg"
5409
+ viewBox="0 0 20 20"
5410
+ fill="currentColor"
5411
+ aria-hidden="true"
5412
+ role="img"
5413
+ width="1em"
5414
+ height="1em"
5415
+ >
5416
+ <path
5417
+ 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"
5418
+ />
5419
+ </svg>
4970
5420
  </span>
4971
5421
 
4972
5422
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
4973
5423
  </li>
4974
5424
  <li class="pf-v6-c-breadcrumb__item">
4975
5425
  <span class="pf-v6-c-breadcrumb__item-divider">
4976
- <i class="fas fa-angle-right" aria-hidden="true"></i>
5426
+ <svg
5427
+ class="pf-v6-svg"
5428
+ viewBox="0 0 20 20"
5429
+ fill="currentColor"
5430
+ aria-hidden="true"
5431
+ role="img"
5432
+ width="1em"
5433
+ height="1em"
5434
+ >
5435
+ <path
5436
+ 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"
5437
+ />
5438
+ </svg>
4977
5439
  </span>
4978
5440
 
4979
5441
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
4980
5442
  </li>
4981
5443
  <li class="pf-v6-c-breadcrumb__item">
4982
5444
  <span class="pf-v6-c-breadcrumb__item-divider">
4983
- <i class="fas fa-angle-right" aria-hidden="true"></i>
5445
+ <svg
5446
+ class="pf-v6-svg"
5447
+ viewBox="0 0 20 20"
5448
+ fill="currentColor"
5449
+ aria-hidden="true"
5450
+ role="img"
5451
+ width="1em"
5452
+ height="1em"
5453
+ >
5454
+ <path
5455
+ 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"
5456
+ />
5457
+ </svg>
4984
5458
  </span>
4985
5459
 
4986
5460
  <a
@@ -5053,7 +5527,8 @@ wrapperTag: div
5053
5527
  <span class="pf-v6-c-button__text">Skip to content</span>
5054
5528
  </a>
5055
5529
  </div>
5056
- <header class="pf-v6-c-masthead" id="page-demo-no-sidebar-masthead">
5530
+
5531
+ <header class="pf-v6-c-masthead" id="page-demo-no-sidebar-docked">
5057
5532
  <div class="pf-v6-c-masthead__main">
5058
5533
  <span class="pf-v6-c-masthead__toggle">
5059
5534
  <button
@@ -5095,7 +5570,7 @@ wrapperTag: div
5095
5570
  y1="2.25860997e-13%"
5096
5571
  x2="32%"
5097
5572
  y2="100%"
5098
- id="linearGradient-page-demo-no-sidebar-masthead"
5573
+ id="linearGradient-page-demo-no-sidebar-docked"
5099
5574
  >
5100
5575
  <stop stop-color="#2B9AF3" offset="0%" />
5101
5576
  <stop
@@ -5149,11 +5624,11 @@ wrapperTag: div
5149
5624
  />
5150
5625
  <path
5151
5626
  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)"
5627
+ fill="url(#linearGradient-page-demo-no-sidebar-docked)"
5153
5628
  />
5154
5629
  <path
5155
5630
  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)"
5631
+ fill="url(#linearGradient-page-demo-no-sidebar-docked)"
5157
5632
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
5158
5633
  />
5159
5634
  </g>
@@ -5165,7 +5640,7 @@ wrapperTag: div
5165
5640
  <div class="pf-v6-c-masthead__content">
5166
5641
  <div
5167
5642
  class="pf-v6-c-toolbar pf-m-static"
5168
- id="page-demo-no-sidebar-masthead-toolbar"
5643
+ id="page-demo-no-sidebar-docked-toolbar"
5169
5644
  >
5170
5645
  <div class="pf-v6-c-toolbar__content">
5171
5646
  <div class="pf-v6-c-toolbar__content-section">
@@ -5246,21 +5721,57 @@ wrapperTag: div
5246
5721
  </li>
5247
5722
  <li class="pf-v6-c-breadcrumb__item">
5248
5723
  <span class="pf-v6-c-breadcrumb__item-divider">
5249
- <i class="fas fa-angle-right" aria-hidden="true"></i>
5724
+ <svg
5725
+ class="pf-v6-svg"
5726
+ viewBox="0 0 20 20"
5727
+ fill="currentColor"
5728
+ aria-hidden="true"
5729
+ role="img"
5730
+ width="1em"
5731
+ height="1em"
5732
+ >
5733
+ <path
5734
+ 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"
5735
+ />
5736
+ </svg>
5250
5737
  </span>
5251
5738
 
5252
5739
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
5253
5740
  </li>
5254
5741
  <li class="pf-v6-c-breadcrumb__item">
5255
5742
  <span class="pf-v6-c-breadcrumb__item-divider">
5256
- <i class="fas fa-angle-right" aria-hidden="true"></i>
5743
+ <svg
5744
+ class="pf-v6-svg"
5745
+ viewBox="0 0 20 20"
5746
+ fill="currentColor"
5747
+ aria-hidden="true"
5748
+ role="img"
5749
+ width="1em"
5750
+ height="1em"
5751
+ >
5752
+ <path
5753
+ 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"
5754
+ />
5755
+ </svg>
5257
5756
  </span>
5258
5757
 
5259
5758
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
5260
5759
  </li>
5261
5760
  <li class="pf-v6-c-breadcrumb__item">
5262
5761
  <span class="pf-v6-c-breadcrumb__item-divider">
5263
- <i class="fas fa-angle-right" aria-hidden="true"></i>
5762
+ <svg
5763
+ class="pf-v6-svg"
5764
+ viewBox="0 0 20 20"
5765
+ fill="currentColor"
5766
+ aria-hidden="true"
5767
+ role="img"
5768
+ width="1em"
5769
+ height="1em"
5770
+ >
5771
+ <path
5772
+ 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"
5773
+ />
5774
+ </svg>
5264
5775
  </span>
5265
5776
 
5266
5777
  <a
@@ -5340,21 +5851,57 @@ wrapperTag: div
5340
5851
  </li>
5341
5852
  <li class="pf-v6-c-breadcrumb__item">
5342
5853
  <span class="pf-v6-c-breadcrumb__item-divider">
5343
- <i class="fas fa-angle-right" aria-hidden="true"></i>
5854
+ <svg
5855
+ class="pf-v6-svg"
5856
+ viewBox="0 0 20 20"
5857
+ fill="currentColor"
5858
+ aria-hidden="true"
5859
+ role="img"
5860
+ width="1em"
5861
+ height="1em"
5862
+ >
5863
+ <path
5864
+ 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"
5865
+ />
5866
+ </svg>
5344
5867
  </span>
5345
5868
 
5346
5869
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
5347
5870
  </li>
5348
5871
  <li class="pf-v6-c-breadcrumb__item">
5349
5872
  <span class="pf-v6-c-breadcrumb__item-divider">
5350
- <i class="fas fa-angle-right" aria-hidden="true"></i>
5873
+ <svg
5874
+ class="pf-v6-svg"
5875
+ viewBox="0 0 20 20"
5876
+ fill="currentColor"
5877
+ aria-hidden="true"
5878
+ role="img"
5879
+ width="1em"
5880
+ height="1em"
5881
+ >
5882
+ <path
5883
+ 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"
5884
+ />
5885
+ </svg>
5351
5886
  </span>
5352
5887
 
5353
5888
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
5354
5889
  </li>
5355
5890
  <li class="pf-v6-c-breadcrumb__item">
5356
5891
  <span class="pf-v6-c-breadcrumb__item-divider">
5357
- <i class="fas fa-angle-right" aria-hidden="true"></i>
5892
+ <svg
5893
+ class="pf-v6-svg"
5894
+ viewBox="0 0 20 20"
5895
+ fill="currentColor"
5896
+ aria-hidden="true"
5897
+ role="img"
5898
+ width="1em"
5899
+ height="1em"
5900
+ >
5901
+ <path
5902
+ 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"
5903
+ />
5904
+ </svg>
5358
5905
  </span>
5359
5906
 
5360
5907
  <a