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

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 +222 -73
  66. package/components/Drawer/drawer.scss +191 -26
  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 +2047 -721
  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 +2908 -1087
  385. package/patternfly.css +2915 -1087
  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/Masthead/examples/Masthead.md CHANGED
@@ -16,7 +16,8 @@ wrapperTag: div
16
16
  <span class="pf-v6-c-button__text">Skip to content</span>
17
17
  </a>
18
18
  </div>
19
- <header class="pf-v6-c-masthead" id="masthead-basic-example-masthead">
19
+
20
+ <header class="pf-v6-c-masthead" id="masthead-basic-example-docked">
20
21
  <div class="pf-v6-c-masthead__main">
21
22
  <span class="pf-v6-c-masthead__toggle">
22
23
  <button
@@ -58,7 +59,7 @@ wrapperTag: div
58
59
  y1="2.25860997e-13%"
59
60
  x2="32%"
60
61
  y2="100%"
61
- id="linearGradient-masthead-basic-example-masthead"
62
+ id="linearGradient-masthead-basic-example-docked"
62
63
  >
63
64
  <stop stop-color="#2B9AF3" offset="0%" />
64
65
  <stop
@@ -112,11 +113,11 @@ wrapperTag: div
112
113
  />
113
114
  <path
114
115
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
115
- fill="url(#linearGradient-masthead-basic-example-masthead)"
116
+ fill="url(#linearGradient-masthead-basic-example-docked)"
116
117
  />
117
118
  <path
118
119
  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"
119
- fill="url(#linearGradient-masthead-basic-example-masthead)"
120
+ fill="url(#linearGradient-masthead-basic-example-docked)"
120
121
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
121
122
  />
122
123
  </g>
@@ -128,7 +129,7 @@ wrapperTag: div
128
129
  <div class="pf-v6-c-masthead__content">
129
130
  <div
130
131
  class="pf-v6-c-toolbar pf-m-static"
131
- id="masthead-basic-example-masthead-toolbar"
132
+ id="masthead-basic-example-docked-toolbar"
132
133
  >
133
134
  <div class="pf-v6-c-toolbar__content">
134
135
  <div class="pf-v6-c-toolbar__content-section">
@@ -152,44 +153,46 @@ wrapperTag: div
152
153
  </div>
153
154
  </header>
154
155
  <div class="pf-v6-c-page__sidebar">
155
- <div class="pf-v6-c-page__sidebar-body">
156
- <nav
157
- class="pf-v6-c-nav"
158
- id="masthead-basic-example-primary-nav"
159
- aria-label="Global"
160
- >
161
- <ul class="pf-v6-c-nav__list" role="list">
162
- <li class="pf-v6-c-nav__item">
163
- <a href="#" class="pf-v6-c-nav__link">
164
- <span class="pf-v6-c-nav__link-text">System panel</span>
165
- </a>
166
- </li>
167
- <li class="pf-v6-c-nav__item">
168
- <a
169
- href="#"
170
- class="pf-v6-c-nav__link pf-m-current"
171
- aria-current="page"
172
- >
173
- <span class="pf-v6-c-nav__link-text">Policy</span>
174
- </a>
175
- </li>
176
- <li class="pf-v6-c-nav__item">
177
- <a href="#" class="pf-v6-c-nav__link">
178
- <span class="pf-v6-c-nav__link-text">Authentication</span>
179
- </a>
180
- </li>
181
- <li class="pf-v6-c-nav__item">
182
- <a href="#" class="pf-v6-c-nav__link">
183
- <span class="pf-v6-c-nav__link-text">Network services</span>
184
- </a>
185
- </li>
186
- <li class="pf-v6-c-nav__item">
187
- <a href="#" class="pf-v6-c-nav__link">
188
- <span class="pf-v6-c-nav__link-text">Server</span>
189
- </a>
190
- </li>
191
- </ul>
192
- </nav>
156
+ <div class="pf-v6-c-page__sidebar-main">
157
+ <div class="pf-v6-c-page__sidebar-body">
158
+ <nav
159
+ class="pf-v6-c-nav"
160
+ id="masthead-basic-example-primary-nav"
161
+ aria-label="Global"
162
+ >
163
+ <ul class="pf-v6-c-nav__list" role="list">
164
+ <li class="pf-v6-c-nav__item">
165
+ <a href="#" class="pf-v6-c-nav__link">
166
+ <span class="pf-v6-c-nav__link-text">System panel</span>
167
+ </a>
168
+ </li>
169
+ <li class="pf-v6-c-nav__item">
170
+ <a
171
+ href="#"
172
+ class="pf-v6-c-nav__link pf-m-current"
173
+ aria-current="page"
174
+ >
175
+ <span class="pf-v6-c-nav__link-text">Policy</span>
176
+ </a>
177
+ </li>
178
+ <li class="pf-v6-c-nav__item">
179
+ <a href="#" class="pf-v6-c-nav__link">
180
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
181
+ </a>
182
+ </li>
183
+ <li class="pf-v6-c-nav__item">
184
+ <a href="#" class="pf-v6-c-nav__link">
185
+ <span class="pf-v6-c-nav__link-text">Network services</span>
186
+ </a>
187
+ </li>
188
+ <li class="pf-v6-c-nav__item">
189
+ <a href="#" class="pf-v6-c-nav__link">
190
+ <span class="pf-v6-c-nav__link-text">Server</span>
191
+ </a>
192
+ </li>
193
+ </ul>
194
+ </nav>
195
+ </div>
193
196
  </div>
194
197
  </div>
195
198
  <div class="pf-v6-c-page__main-container" tabindex="-1">
@@ -207,21 +210,57 @@ wrapperTag: div
207
210
  </li>
208
211
  <li class="pf-v6-c-breadcrumb__item">
209
212
  <span class="pf-v6-c-breadcrumb__item-divider">
210
- <i class="fas fa-angle-right" aria-hidden="true"></i>
213
+ <svg
214
+ class="pf-v6-svg"
215
+ viewBox="0 0 20 20"
216
+ fill="currentColor"
217
+ aria-hidden="true"
218
+ role="img"
219
+ width="1em"
220
+ height="1em"
221
+ >
222
+ <path
223
+ 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"
224
+ />
225
+ </svg>
211
226
  </span>
212
227
 
213
228
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
214
229
  </li>
215
230
  <li class="pf-v6-c-breadcrumb__item">
216
231
  <span class="pf-v6-c-breadcrumb__item-divider">
217
- <i class="fas fa-angle-right" aria-hidden="true"></i>
232
+ <svg
233
+ class="pf-v6-svg"
234
+ viewBox="0 0 20 20"
235
+ fill="currentColor"
236
+ aria-hidden="true"
237
+ role="img"
238
+ width="1em"
239
+ height="1em"
240
+ >
241
+ <path
242
+ 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"
243
+ />
244
+ </svg>
218
245
  </span>
219
246
 
220
247
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
221
248
  </li>
222
249
  <li class="pf-v6-c-breadcrumb__item">
223
250
  <span class="pf-v6-c-breadcrumb__item-divider">
224
- <i class="fas fa-angle-right" aria-hidden="true"></i>
251
+ <svg
252
+ class="pf-v6-svg"
253
+ viewBox="0 0 20 20"
254
+ fill="currentColor"
255
+ aria-hidden="true"
256
+ role="img"
257
+ width="1em"
258
+ height="1em"
259
+ >
260
+ <path
261
+ 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"
262
+ />
263
+ </svg>
225
264
  </span>
226
265
 
227
266
  <a
@@ -294,9 +333,10 @@ wrapperTag: div
294
333
  <span class="pf-v6-c-button__text">Skip to content</span>
295
334
  </a>
296
335
  </div>
336
+
297
337
  <header
298
338
  class="pf-v6-c-masthead"
299
- id="masthead-context-selecton-drilldown-example-masthead"
339
+ id="masthead-context-selecton-drilldown-example-docked"
300
340
  >
301
341
  <div class="pf-v6-c-masthead__main">
302
342
  <span class="pf-v6-c-masthead__toggle">
@@ -339,7 +379,7 @@ wrapperTag: div
339
379
  y1="2.25860997e-13%"
340
380
  x2="32%"
341
381
  y2="100%"
342
- id="linearGradient-masthead-context-selecton-drilldown-example-masthead"
382
+ id="linearGradient-masthead-context-selecton-drilldown-example-docked"
343
383
  >
344
384
  <stop stop-color="#2B9AF3" offset="0%" />
345
385
  <stop
@@ -393,11 +433,11 @@ wrapperTag: div
393
433
  />
394
434
  <path
395
435
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
396
- fill="url(#linearGradient-masthead-context-selecton-drilldown-example-masthead)"
436
+ fill="url(#linearGradient-masthead-context-selecton-drilldown-example-docked)"
397
437
  />
398
438
  <path
399
439
  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"
400
- fill="url(#linearGradient-masthead-context-selecton-drilldown-example-masthead)"
440
+ fill="url(#linearGradient-masthead-context-selecton-drilldown-example-docked)"
401
441
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
402
442
  />
403
443
  </g>
@@ -409,7 +449,7 @@ wrapperTag: div
409
449
  <div class="pf-v6-c-masthead__content">
410
450
  <div
411
451
  class="pf-v6-c-toolbar pf-m-static"
412
- id="masthead-context-selecton-drilldown-example-masthead-toolbar"
452
+ id="masthead-context-selecton-drilldown-example-docked-toolbar"
413
453
  >
414
454
  <div class="pf-v6-c-toolbar__content">
415
455
  <div class="pf-v6-c-toolbar__content-section">
@@ -462,44 +502,46 @@ wrapperTag: div
462
502
  </div>
463
503
  </header>
464
504
  <div class="pf-v6-c-page__sidebar">
465
- <div class="pf-v6-c-page__sidebar-body">
466
- <nav
467
- class="pf-v6-c-nav"
468
- id="masthead-context-selecton-drilldown-example-primary-nav"
469
- aria-label="Global"
470
- >
471
- <ul class="pf-v6-c-nav__list" role="list">
472
- <li class="pf-v6-c-nav__item">
473
- <a href="#" class="pf-v6-c-nav__link">
474
- <span class="pf-v6-c-nav__link-text">System panel</span>
475
- </a>
476
- </li>
477
- <li class="pf-v6-c-nav__item">
478
- <a
479
- href="#"
480
- class="pf-v6-c-nav__link pf-m-current"
481
- aria-current="page"
482
- >
483
- <span class="pf-v6-c-nav__link-text">Policy</span>
484
- </a>
485
- </li>
486
- <li class="pf-v6-c-nav__item">
487
- <a href="#" class="pf-v6-c-nav__link">
488
- <span class="pf-v6-c-nav__link-text">Authentication</span>
489
- </a>
490
- </li>
491
- <li class="pf-v6-c-nav__item">
492
- <a href="#" class="pf-v6-c-nav__link">
493
- <span class="pf-v6-c-nav__link-text">Network services</span>
494
- </a>
495
- </li>
496
- <li class="pf-v6-c-nav__item">
497
- <a href="#" class="pf-v6-c-nav__link">
498
- <span class="pf-v6-c-nav__link-text">Server</span>
499
- </a>
500
- </li>
501
- </ul>
502
- </nav>
505
+ <div class="pf-v6-c-page__sidebar-main">
506
+ <div class="pf-v6-c-page__sidebar-body">
507
+ <nav
508
+ class="pf-v6-c-nav"
509
+ id="masthead-context-selecton-drilldown-example-primary-nav"
510
+ aria-label="Global"
511
+ >
512
+ <ul class="pf-v6-c-nav__list" role="list">
513
+ <li class="pf-v6-c-nav__item">
514
+ <a href="#" class="pf-v6-c-nav__link">
515
+ <span class="pf-v6-c-nav__link-text">System panel</span>
516
+ </a>
517
+ </li>
518
+ <li class="pf-v6-c-nav__item">
519
+ <a
520
+ href="#"
521
+ class="pf-v6-c-nav__link pf-m-current"
522
+ aria-current="page"
523
+ >
524
+ <span class="pf-v6-c-nav__link-text">Policy</span>
525
+ </a>
526
+ </li>
527
+ <li class="pf-v6-c-nav__item">
528
+ <a href="#" class="pf-v6-c-nav__link">
529
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
530
+ </a>
531
+ </li>
532
+ <li class="pf-v6-c-nav__item">
533
+ <a href="#" class="pf-v6-c-nav__link">
534
+ <span class="pf-v6-c-nav__link-text">Network services</span>
535
+ </a>
536
+ </li>
537
+ <li class="pf-v6-c-nav__item">
538
+ <a href="#" class="pf-v6-c-nav__link">
539
+ <span class="pf-v6-c-nav__link-text">Server</span>
540
+ </a>
541
+ </li>
542
+ </ul>
543
+ </nav>
544
+ </div>
503
545
  </div>
504
546
  </div>
505
547
  <div class="pf-v6-c-page__main-container" tabindex="-1">
@@ -517,21 +559,57 @@ wrapperTag: div
517
559
  </li>
518
560
  <li class="pf-v6-c-breadcrumb__item">
519
561
  <span class="pf-v6-c-breadcrumb__item-divider">
520
- <i class="fas fa-angle-right" aria-hidden="true"></i>
562
+ <svg
563
+ class="pf-v6-svg"
564
+ viewBox="0 0 20 20"
565
+ fill="currentColor"
566
+ aria-hidden="true"
567
+ role="img"
568
+ width="1em"
569
+ height="1em"
570
+ >
571
+ <path
572
+ 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"
573
+ />
574
+ </svg>
521
575
  </span>
522
576
 
523
577
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
524
578
  </li>
525
579
  <li class="pf-v6-c-breadcrumb__item">
526
580
  <span class="pf-v6-c-breadcrumb__item-divider">
527
- <i class="fas fa-angle-right" aria-hidden="true"></i>
581
+ <svg
582
+ class="pf-v6-svg"
583
+ viewBox="0 0 20 20"
584
+ fill="currentColor"
585
+ aria-hidden="true"
586
+ role="img"
587
+ width="1em"
588
+ height="1em"
589
+ >
590
+ <path
591
+ 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"
592
+ />
593
+ </svg>
528
594
  </span>
529
595
 
530
596
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
531
597
  </li>
532
598
  <li class="pf-v6-c-breadcrumb__item">
533
599
  <span class="pf-v6-c-breadcrumb__item-divider">
534
- <i class="fas fa-angle-right" aria-hidden="true"></i>
600
+ <svg
601
+ class="pf-v6-svg"
602
+ viewBox="0 0 20 20"
603
+ fill="currentColor"
604
+ aria-hidden="true"
605
+ role="img"
606
+ width="1em"
607
+ height="1em"
608
+ >
609
+ <path
610
+ 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"
611
+ />
612
+ </svg>
535
613
  </span>
536
614
 
537
615
  <a
@@ -604,10 +682,8 @@ wrapperTag: div
604
682
  <span class="pf-v6-c-button__text">Skip to content</span>
605
683
  </a>
606
684
  </div>
607
- <header
608
- class="pf-v6-c-masthead"
609
- id="masthead-toolbar-filters-example-masthead"
610
- >
685
+
686
+ <header class="pf-v6-c-masthead" id="masthead-toolbar-filters-example-docked">
611
687
  <div class="pf-v6-c-masthead__main">
612
688
  <span class="pf-v6-c-masthead__toggle">
613
689
  <button
@@ -649,7 +725,7 @@ wrapperTag: div
649
725
  y1="2.25860997e-13%"
650
726
  x2="32%"
651
727
  y2="100%"
652
- id="linearGradient-masthead-toolbar-filters-example-masthead"
728
+ id="linearGradient-masthead-toolbar-filters-example-docked"
653
729
  >
654
730
  <stop stop-color="#2B9AF3" offset="0%" />
655
731
  <stop
@@ -703,11 +779,11 @@ wrapperTag: div
703
779
  />
704
780
  <path
705
781
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
706
- fill="url(#linearGradient-masthead-toolbar-filters-example-masthead)"
782
+ fill="url(#linearGradient-masthead-toolbar-filters-example-docked)"
707
783
  />
708
784
  <path
709
785
  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"
710
- fill="url(#linearGradient-masthead-toolbar-filters-example-masthead)"
786
+ fill="url(#linearGradient-masthead-toolbar-filters-example-docked)"
711
787
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
712
788
  />
713
789
  </g>
@@ -719,7 +795,7 @@ wrapperTag: div
719
795
  <div class="pf-v6-c-masthead__content">
720
796
  <div
721
797
  class="pf-v6-c-toolbar pf-m-static"
722
- id="masthead-toolbar-filters-example-masthead-toolbar"
798
+ id="masthead-toolbar-filters-example-docked-toolbar"
723
799
  >
724
800
  <div class="pf-v6-c-toolbar__content">
725
801
  <div class="pf-v6-c-toolbar__content-section">
@@ -732,7 +808,7 @@ wrapperTag: div
732
808
  type="button"
733
809
  aria-expanded="false"
734
810
  aria-label="Show filters"
735
- aria-controls="masthead-toolbar-filters-example-masthead-toolbar-expandable-content"
811
+ aria-controls="masthead-toolbar-filters-example-docked-toolbar-expandable-content"
736
812
  >
737
813
  <span class="pf-v6-c-menu-toggle__icon">
738
814
  <i class="fas fa-filter" aria-hidden="true"></i>
@@ -750,7 +826,7 @@ wrapperTag: div
750
826
  class="pf-v6-c-menu-toggle"
751
827
  type="button"
752
828
  aria-expanded="false"
753
- id="masthead-toolbar-filters-example-masthead-toolbar-search-filter-menu"
829
+ id="masthead-toolbar-filters-example-docked-toolbar-search-filter-menu"
754
830
  >
755
831
  <span class="pf-v6-c-menu-toggle__icon">
756
832
  <i class="fas fa-filter" aria-hidden="true"></i>
@@ -801,7 +877,7 @@ wrapperTag: div
801
877
 
802
878
  <div
803
879
  class="pf-v6-c-toolbar__expandable-content pf-m-hidden"
804
- id="masthead-toolbar-filters-example-masthead-toolbar-expandable-content"
880
+ id="masthead-toolbar-filters-example-docked-toolbar-expandable-content"
805
881
  hidden
806
882
  ></div>
807
883
  </div>
@@ -809,44 +885,46 @@ wrapperTag: div
809
885
  </div>
810
886
  </header>
811
887
  <div class="pf-v6-c-page__sidebar">
812
- <div class="pf-v6-c-page__sidebar-body">
813
- <nav
814
- class="pf-v6-c-nav"
815
- id="masthead-toolbar-filters-example-primary-nav"
816
- aria-label="Global"
817
- >
818
- <ul class="pf-v6-c-nav__list" role="list">
819
- <li class="pf-v6-c-nav__item">
820
- <a href="#" class="pf-v6-c-nav__link">
821
- <span class="pf-v6-c-nav__link-text">System panel</span>
822
- </a>
823
- </li>
824
- <li class="pf-v6-c-nav__item">
825
- <a
826
- href="#"
827
- class="pf-v6-c-nav__link pf-m-current"
828
- aria-current="page"
829
- >
830
- <span class="pf-v6-c-nav__link-text">Policy</span>
831
- </a>
832
- </li>
833
- <li class="pf-v6-c-nav__item">
834
- <a href="#" class="pf-v6-c-nav__link">
835
- <span class="pf-v6-c-nav__link-text">Authentication</span>
836
- </a>
837
- </li>
838
- <li class="pf-v6-c-nav__item">
839
- <a href="#" class="pf-v6-c-nav__link">
840
- <span class="pf-v6-c-nav__link-text">Network services</span>
841
- </a>
842
- </li>
843
- <li class="pf-v6-c-nav__item">
844
- <a href="#" class="pf-v6-c-nav__link">
845
- <span class="pf-v6-c-nav__link-text">Server</span>
846
- </a>
847
- </li>
848
- </ul>
849
- </nav>
888
+ <div class="pf-v6-c-page__sidebar-main">
889
+ <div class="pf-v6-c-page__sidebar-body">
890
+ <nav
891
+ class="pf-v6-c-nav"
892
+ id="masthead-toolbar-filters-example-primary-nav"
893
+ aria-label="Global"
894
+ >
895
+ <ul class="pf-v6-c-nav__list" role="list">
896
+ <li class="pf-v6-c-nav__item">
897
+ <a href="#" class="pf-v6-c-nav__link">
898
+ <span class="pf-v6-c-nav__link-text">System panel</span>
899
+ </a>
900
+ </li>
901
+ <li class="pf-v6-c-nav__item">
902
+ <a
903
+ href="#"
904
+ class="pf-v6-c-nav__link pf-m-current"
905
+ aria-current="page"
906
+ >
907
+ <span class="pf-v6-c-nav__link-text">Policy</span>
908
+ </a>
909
+ </li>
910
+ <li class="pf-v6-c-nav__item">
911
+ <a href="#" class="pf-v6-c-nav__link">
912
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
913
+ </a>
914
+ </li>
915
+ <li class="pf-v6-c-nav__item">
916
+ <a href="#" class="pf-v6-c-nav__link">
917
+ <span class="pf-v6-c-nav__link-text">Network services</span>
918
+ </a>
919
+ </li>
920
+ <li class="pf-v6-c-nav__item">
921
+ <a href="#" class="pf-v6-c-nav__link">
922
+ <span class="pf-v6-c-nav__link-text">Server</span>
923
+ </a>
924
+ </li>
925
+ </ul>
926
+ </nav>
927
+ </div>
850
928
  </div>
851
929
  </div>
852
930
  <div class="pf-v6-c-page__main-container" tabindex="-1">
@@ -864,21 +942,57 @@ wrapperTag: div
864
942
  </li>
865
943
  <li class="pf-v6-c-breadcrumb__item">
866
944
  <span class="pf-v6-c-breadcrumb__item-divider">
867
- <i class="fas fa-angle-right" aria-hidden="true"></i>
945
+ <svg
946
+ class="pf-v6-svg"
947
+ viewBox="0 0 20 20"
948
+ fill="currentColor"
949
+ aria-hidden="true"
950
+ role="img"
951
+ width="1em"
952
+ height="1em"
953
+ >
954
+ <path
955
+ 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"
956
+ />
957
+ </svg>
868
958
  </span>
869
959
 
870
960
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
871
961
  </li>
872
962
  <li class="pf-v6-c-breadcrumb__item">
873
963
  <span class="pf-v6-c-breadcrumb__item-divider">
874
- <i class="fas fa-angle-right" aria-hidden="true"></i>
964
+ <svg
965
+ class="pf-v6-svg"
966
+ viewBox="0 0 20 20"
967
+ fill="currentColor"
968
+ aria-hidden="true"
969
+ role="img"
970
+ width="1em"
971
+ height="1em"
972
+ >
973
+ <path
974
+ 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"
975
+ />
976
+ </svg>
875
977
  </span>
876
978
 
877
979
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
878
980
  </li>
879
981
  <li class="pf-v6-c-breadcrumb__item">
880
982
  <span class="pf-v6-c-breadcrumb__item-divider">
881
- <i class="fas fa-angle-right" aria-hidden="true"></i>
983
+ <svg
984
+ class="pf-v6-svg"
985
+ viewBox="0 0 20 20"
986
+ fill="currentColor"
987
+ aria-hidden="true"
988
+ role="img"
989
+ width="1em"
990
+ height="1em"
991
+ >
992
+ <path
993
+ 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"
994
+ />
995
+ </svg>
882
996
  </span>
883
997
 
884
998
  <a
@@ -951,9 +1065,10 @@ wrapperTag: div
951
1065
  <span class="pf-v6-c-button__text">Skip to content</span>
952
1066
  </a>
953
1067
  </div>
1068
+
954
1069
  <header
955
1070
  class="pf-v6-c-masthead"
956
- id="masthead-toggle-group-filters-example-masthead"
1071
+ id="masthead-toggle-group-filters-example-docked"
957
1072
  >
958
1073
  <div class="pf-v6-c-masthead__main">
959
1074
  <span class="pf-v6-c-masthead__toggle">
@@ -996,7 +1111,7 @@ wrapperTag: div
996
1111
  y1="2.25860997e-13%"
997
1112
  x2="32%"
998
1113
  y2="100%"
999
- id="linearGradient-masthead-toggle-group-filters-example-masthead"
1114
+ id="linearGradient-masthead-toggle-group-filters-example-docked"
1000
1115
  >
1001
1116
  <stop stop-color="#2B9AF3" offset="0%" />
1002
1117
  <stop
@@ -1050,11 +1165,11 @@ wrapperTag: div
1050
1165
  />
1051
1166
  <path
1052
1167
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
1053
- fill="url(#linearGradient-masthead-toggle-group-filters-example-masthead)"
1168
+ fill="url(#linearGradient-masthead-toggle-group-filters-example-docked)"
1054
1169
  />
1055
1170
  <path
1056
1171
  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"
1057
- fill="url(#linearGradient-masthead-toggle-group-filters-example-masthead)"
1172
+ fill="url(#linearGradient-masthead-toggle-group-filters-example-docked)"
1058
1173
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
1059
1174
  />
1060
1175
  </g>
@@ -1066,7 +1181,7 @@ wrapperTag: div
1066
1181
  <div class="pf-v6-c-masthead__content">
1067
1182
  <div
1068
1183
  class="pf-v6-c-toolbar pf-m-static"
1069
- id="masthead-toggle-group-filters-example-masthead-toolbar"
1184
+ id="masthead-toggle-group-filters-example-docked-toolbar"
1070
1185
  >
1071
1186
  <div class="pf-v6-c-toolbar__content">
1072
1187
  <div class="pf-v6-c-toolbar__content-section">
@@ -1079,7 +1194,7 @@ wrapperTag: div
1079
1194
  type="button"
1080
1195
  aria-expanded="false"
1081
1196
  aria-label="Show filters"
1082
- aria-controls="masthead-toggle-group-filters-example-masthead-toolbar-expandable-content"
1197
+ aria-controls="masthead-toggle-group-filters-example-docked-toolbar-expandable-content"
1083
1198
  >
1084
1199
  <span class="pf-v6-c-menu-toggle__icon">
1085
1200
  <i class="fas fa-filter" aria-hidden="true"></i>
@@ -1097,7 +1212,7 @@ wrapperTag: div
1097
1212
  class="pf-v6-c-menu-toggle"
1098
1213
  type="button"
1099
1214
  aria-expanded="false"
1100
- id="masthead-toggle-group-filters-example-masthead-toolbar-search-filter-menu"
1215
+ id="masthead-toggle-group-filters-example-docked-toolbar-search-filter-menu"
1101
1216
  >
1102
1217
  <span class="pf-v6-c-menu-toggle__icon">
1103
1218
  <i class="fas fa-filter" aria-hidden="true"></i>
@@ -1148,7 +1263,7 @@ wrapperTag: div
1148
1263
 
1149
1264
  <div
1150
1265
  class="pf-v6-c-toolbar__expandable-content pf-m-hidden"
1151
- id="masthead-toggle-group-filters-example-masthead-toolbar-expandable-content"
1266
+ id="masthead-toggle-group-filters-example-docked-toolbar-expandable-content"
1152
1267
  hidden
1153
1268
  ></div>
1154
1269
  </div>
@@ -1156,44 +1271,46 @@ wrapperTag: div
1156
1271
  </div>
1157
1272
  </header>
1158
1273
  <div class="pf-v6-c-page__sidebar">
1159
- <div class="pf-v6-c-page__sidebar-body">
1160
- <nav
1161
- class="pf-v6-c-nav"
1162
- id="masthead-toggle-group-filters-example-primary-nav"
1163
- aria-label="Global"
1164
- >
1165
- <ul class="pf-v6-c-nav__list" role="list">
1166
- <li class="pf-v6-c-nav__item">
1167
- <a href="#" class="pf-v6-c-nav__link">
1168
- <span class="pf-v6-c-nav__link-text">System panel</span>
1169
- </a>
1170
- </li>
1171
- <li class="pf-v6-c-nav__item">
1172
- <a
1173
- href="#"
1174
- class="pf-v6-c-nav__link pf-m-current"
1175
- aria-current="page"
1176
- >
1177
- <span class="pf-v6-c-nav__link-text">Policy</span>
1178
- </a>
1179
- </li>
1180
- <li class="pf-v6-c-nav__item">
1181
- <a href="#" class="pf-v6-c-nav__link">
1182
- <span class="pf-v6-c-nav__link-text">Authentication</span>
1183
- </a>
1184
- </li>
1185
- <li class="pf-v6-c-nav__item">
1186
- <a href="#" class="pf-v6-c-nav__link">
1187
- <span class="pf-v6-c-nav__link-text">Network services</span>
1188
- </a>
1189
- </li>
1190
- <li class="pf-v6-c-nav__item">
1191
- <a href="#" class="pf-v6-c-nav__link">
1192
- <span class="pf-v6-c-nav__link-text">Server</span>
1193
- </a>
1194
- </li>
1195
- </ul>
1196
- </nav>
1274
+ <div class="pf-v6-c-page__sidebar-main">
1275
+ <div class="pf-v6-c-page__sidebar-body">
1276
+ <nav
1277
+ class="pf-v6-c-nav"
1278
+ id="masthead-toggle-group-filters-example-primary-nav"
1279
+ aria-label="Global"
1280
+ >
1281
+ <ul class="pf-v6-c-nav__list" role="list">
1282
+ <li class="pf-v6-c-nav__item">
1283
+ <a href="#" class="pf-v6-c-nav__link">
1284
+ <span class="pf-v6-c-nav__link-text">System panel</span>
1285
+ </a>
1286
+ </li>
1287
+ <li class="pf-v6-c-nav__item">
1288
+ <a
1289
+ href="#"
1290
+ class="pf-v6-c-nav__link pf-m-current"
1291
+ aria-current="page"
1292
+ >
1293
+ <span class="pf-v6-c-nav__link-text">Policy</span>
1294
+ </a>
1295
+ </li>
1296
+ <li class="pf-v6-c-nav__item">
1297
+ <a href="#" class="pf-v6-c-nav__link">
1298
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
1299
+ </a>
1300
+ </li>
1301
+ <li class="pf-v6-c-nav__item">
1302
+ <a href="#" class="pf-v6-c-nav__link">
1303
+ <span class="pf-v6-c-nav__link-text">Network services</span>
1304
+ </a>
1305
+ </li>
1306
+ <li class="pf-v6-c-nav__item">
1307
+ <a href="#" class="pf-v6-c-nav__link">
1308
+ <span class="pf-v6-c-nav__link-text">Server</span>
1309
+ </a>
1310
+ </li>
1311
+ </ul>
1312
+ </nav>
1313
+ </div>
1197
1314
  </div>
1198
1315
  </div>
1199
1316
  <div class="pf-v6-c-page__main-container" tabindex="-1">
@@ -1211,21 +1328,57 @@ wrapperTag: div
1211
1328
  </li>
1212
1329
  <li class="pf-v6-c-breadcrumb__item">
1213
1330
  <span class="pf-v6-c-breadcrumb__item-divider">
1214
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1331
+ <svg
1332
+ class="pf-v6-svg"
1333
+ viewBox="0 0 20 20"
1334
+ fill="currentColor"
1335
+ aria-hidden="true"
1336
+ role="img"
1337
+ width="1em"
1338
+ height="1em"
1339
+ >
1340
+ <path
1341
+ 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"
1342
+ />
1343
+ </svg>
1215
1344
  </span>
1216
1345
 
1217
1346
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1218
1347
  </li>
1219
1348
  <li class="pf-v6-c-breadcrumb__item">
1220
1349
  <span class="pf-v6-c-breadcrumb__item-divider">
1221
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1350
+ <svg
1351
+ class="pf-v6-svg"
1352
+ viewBox="0 0 20 20"
1353
+ fill="currentColor"
1354
+ aria-hidden="true"
1355
+ role="img"
1356
+ width="1em"
1357
+ height="1em"
1358
+ >
1359
+ <path
1360
+ 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"
1361
+ />
1362
+ </svg>
1222
1363
  </span>
1223
1364
 
1224
1365
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1225
1366
  </li>
1226
1367
  <li class="pf-v6-c-breadcrumb__item">
1227
1368
  <span class="pf-v6-c-breadcrumb__item-divider">
1228
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1369
+ <svg
1370
+ class="pf-v6-svg"
1371
+ viewBox="0 0 20 20"
1372
+ fill="currentColor"
1373
+ aria-hidden="true"
1374
+ role="img"
1375
+ width="1em"
1376
+ height="1em"
1377
+ >
1378
+ <path
1379
+ 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"
1380
+ />
1381
+ </svg>
1229
1382
  </span>
1230
1383
 
1231
1384
  <a
@@ -1298,9 +1451,10 @@ wrapperTag: div
1298
1451
  <span class="pf-v6-c-button__text">Skip to content</span>
1299
1452
  </a>
1300
1453
  </div>
1454
+
1301
1455
  <header
1302
1456
  class="pf-v6-c-masthead"
1303
- id="masthead-expandable-search-example-masthead"
1457
+ id="masthead-expandable-search-example-docked"
1304
1458
  >
1305
1459
  <div class="pf-v6-c-masthead__main">
1306
1460
  <span class="pf-v6-c-masthead__toggle">
@@ -1343,7 +1497,7 @@ wrapperTag: div
1343
1497
  y1="2.25860997e-13%"
1344
1498
  x2="32%"
1345
1499
  y2="100%"
1346
- id="linearGradient-masthead-expandable-search-example-masthead"
1500
+ id="linearGradient-masthead-expandable-search-example-docked"
1347
1501
  >
1348
1502
  <stop stop-color="#2B9AF3" offset="0%" />
1349
1503
  <stop
@@ -1397,11 +1551,11 @@ wrapperTag: div
1397
1551
  />
1398
1552
  <path
1399
1553
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
1400
- fill="url(#linearGradient-masthead-expandable-search-example-masthead)"
1554
+ fill="url(#linearGradient-masthead-expandable-search-example-docked)"
1401
1555
  />
1402
1556
  <path
1403
1557
  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"
1404
- fill="url(#linearGradient-masthead-expandable-search-example-masthead)"
1558
+ fill="url(#linearGradient-masthead-expandable-search-example-docked)"
1405
1559
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
1406
1560
  />
1407
1561
  </g>
@@ -1413,7 +1567,7 @@ wrapperTag: div
1413
1567
  <div class="pf-v6-c-masthead__content">
1414
1568
  <div
1415
1569
  class="pf-v6-c-toolbar pf-m-static"
1416
- id="masthead-expandable-search-example-masthead-toolbar"
1570
+ id="masthead-expandable-search-example-docked-toolbar"
1417
1571
  >
1418
1572
  <div class="pf-v6-c-toolbar__content">
1419
1573
  <div class="pf-v6-c-toolbar__content-section">
@@ -1427,7 +1581,19 @@ wrapperTag: div
1427
1581
  aria-label="Open search"
1428
1582
  >
1429
1583
  <span class="pf-v6-c-button__icon">
1430
- <i class="fas fa-search fa-fw" aria-hidden="true"></i>
1584
+ <svg
1585
+ class="pf-v6-svg"
1586
+ viewBox="0 0 512 512"
1587
+ fill="currentColor"
1588
+ aria-hidden="true"
1589
+ role="img"
1590
+ width="1em"
1591
+ height="1em"
1592
+ >
1593
+ <path
1594
+ d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"
1595
+ />
1596
+ </svg>
1431
1597
  </span>
1432
1598
  </button>
1433
1599
  </div>
@@ -1440,44 +1606,46 @@ wrapperTag: div
1440
1606
  </div>
1441
1607
  </header>
1442
1608
  <div class="pf-v6-c-page__sidebar">
1443
- <div class="pf-v6-c-page__sidebar-body">
1444
- <nav
1445
- class="pf-v6-c-nav"
1446
- id="masthead-expandable-search-example-primary-nav"
1447
- aria-label="Global"
1448
- >
1449
- <ul class="pf-v6-c-nav__list" role="list">
1450
- <li class="pf-v6-c-nav__item">
1451
- <a href="#" class="pf-v6-c-nav__link">
1452
- <span class="pf-v6-c-nav__link-text">System panel</span>
1453
- </a>
1454
- </li>
1455
- <li class="pf-v6-c-nav__item">
1456
- <a
1457
- href="#"
1458
- class="pf-v6-c-nav__link pf-m-current"
1459
- aria-current="page"
1460
- >
1461
- <span class="pf-v6-c-nav__link-text">Policy</span>
1462
- </a>
1463
- </li>
1464
- <li class="pf-v6-c-nav__item">
1465
- <a href="#" class="pf-v6-c-nav__link">
1466
- <span class="pf-v6-c-nav__link-text">Authentication</span>
1467
- </a>
1468
- </li>
1469
- <li class="pf-v6-c-nav__item">
1470
- <a href="#" class="pf-v6-c-nav__link">
1471
- <span class="pf-v6-c-nav__link-text">Network services</span>
1472
- </a>
1473
- </li>
1474
- <li class="pf-v6-c-nav__item">
1475
- <a href="#" class="pf-v6-c-nav__link">
1476
- <span class="pf-v6-c-nav__link-text">Server</span>
1477
- </a>
1478
- </li>
1479
- </ul>
1480
- </nav>
1609
+ <div class="pf-v6-c-page__sidebar-main">
1610
+ <div class="pf-v6-c-page__sidebar-body">
1611
+ <nav
1612
+ class="pf-v6-c-nav"
1613
+ id="masthead-expandable-search-example-primary-nav"
1614
+ aria-label="Global"
1615
+ >
1616
+ <ul class="pf-v6-c-nav__list" role="list">
1617
+ <li class="pf-v6-c-nav__item">
1618
+ <a href="#" class="pf-v6-c-nav__link">
1619
+ <span class="pf-v6-c-nav__link-text">System panel</span>
1620
+ </a>
1621
+ </li>
1622
+ <li class="pf-v6-c-nav__item">
1623
+ <a
1624
+ href="#"
1625
+ class="pf-v6-c-nav__link pf-m-current"
1626
+ aria-current="page"
1627
+ >
1628
+ <span class="pf-v6-c-nav__link-text">Policy</span>
1629
+ </a>
1630
+ </li>
1631
+ <li class="pf-v6-c-nav__item">
1632
+ <a href="#" class="pf-v6-c-nav__link">
1633
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
1634
+ </a>
1635
+ </li>
1636
+ <li class="pf-v6-c-nav__item">
1637
+ <a href="#" class="pf-v6-c-nav__link">
1638
+ <span class="pf-v6-c-nav__link-text">Network services</span>
1639
+ </a>
1640
+ </li>
1641
+ <li class="pf-v6-c-nav__item">
1642
+ <a href="#" class="pf-v6-c-nav__link">
1643
+ <span class="pf-v6-c-nav__link-text">Server</span>
1644
+ </a>
1645
+ </li>
1646
+ </ul>
1647
+ </nav>
1648
+ </div>
1481
1649
  </div>
1482
1650
  </div>
1483
1651
  <div class="pf-v6-c-page__main-container" tabindex="-1">
@@ -1495,21 +1663,57 @@ wrapperTag: div
1495
1663
  </li>
1496
1664
  <li class="pf-v6-c-breadcrumb__item">
1497
1665
  <span class="pf-v6-c-breadcrumb__item-divider">
1498
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1666
+ <svg
1667
+ class="pf-v6-svg"
1668
+ viewBox="0 0 20 20"
1669
+ fill="currentColor"
1670
+ aria-hidden="true"
1671
+ role="img"
1672
+ width="1em"
1673
+ height="1em"
1674
+ >
1675
+ <path
1676
+ 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"
1677
+ />
1678
+ </svg>
1499
1679
  </span>
1500
1680
 
1501
1681
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1502
1682
  </li>
1503
1683
  <li class="pf-v6-c-breadcrumb__item">
1504
1684
  <span class="pf-v6-c-breadcrumb__item-divider">
1505
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1685
+ <svg
1686
+ class="pf-v6-svg"
1687
+ viewBox="0 0 20 20"
1688
+ fill="currentColor"
1689
+ aria-hidden="true"
1690
+ role="img"
1691
+ width="1em"
1692
+ height="1em"
1693
+ >
1694
+ <path
1695
+ 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"
1696
+ />
1697
+ </svg>
1506
1698
  </span>
1507
1699
 
1508
1700
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1509
1701
  </li>
1510
1702
  <li class="pf-v6-c-breadcrumb__item">
1511
1703
  <span class="pf-v6-c-breadcrumb__item-divider">
1512
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1704
+ <svg
1705
+ class="pf-v6-svg"
1706
+ viewBox="0 0 20 20"
1707
+ fill="currentColor"
1708
+ aria-hidden="true"
1709
+ role="img"
1710
+ width="1em"
1711
+ height="1em"
1712
+ >
1713
+ <path
1714
+ 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"
1715
+ />
1716
+ </svg>
1513
1717
  </span>
1514
1718
 
1515
1719
  <a
@@ -1582,9 +1786,10 @@ wrapperTag: div
1582
1786
  <span class="pf-v6-c-button__text">Skip to content</span>
1583
1787
  </a>
1584
1788
  </div>
1789
+
1585
1790
  <header
1586
1791
  class="pf-v6-c-masthead"
1587
- id="masthead-expandable-search-expanded-example-masthead"
1792
+ id="masthead-expandable-search-expanded-example-docked"
1588
1793
  >
1589
1794
  <div class="pf-v6-c-masthead__main">
1590
1795
  <span class="pf-v6-c-masthead__toggle">
@@ -1627,7 +1832,7 @@ wrapperTag: div
1627
1832
  y1="2.25860997e-13%"
1628
1833
  x2="32%"
1629
1834
  y2="100%"
1630
- id="linearGradient-masthead-expandable-search-expanded-example-masthead"
1835
+ id="linearGradient-masthead-expandable-search-expanded-example-docked"
1631
1836
  >
1632
1837
  <stop stop-color="#2B9AF3" offset="0%" />
1633
1838
  <stop
@@ -1681,11 +1886,11 @@ wrapperTag: div
1681
1886
  />
1682
1887
  <path
1683
1888
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
1684
- fill="url(#linearGradient-masthead-expandable-search-expanded-example-masthead)"
1889
+ fill="url(#linearGradient-masthead-expandable-search-expanded-example-docked)"
1685
1890
  />
1686
1891
  <path
1687
1892
  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"
1688
- fill="url(#linearGradient-masthead-expandable-search-expanded-example-masthead)"
1893
+ fill="url(#linearGradient-masthead-expandable-search-expanded-example-docked)"
1689
1894
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
1690
1895
  />
1691
1896
  </g>
@@ -1697,7 +1902,7 @@ wrapperTag: div
1697
1902
  <div class="pf-v6-c-masthead__content">
1698
1903
  <div
1699
1904
  class="pf-v6-c-toolbar pf-m-static"
1700
- id="masthead-expandable-search-expanded-example-masthead-toolbar"
1905
+ id="masthead-expandable-search-expanded-example-docked-toolbar"
1701
1906
  >
1702
1907
  <div class="pf-v6-c-toolbar__content">
1703
1908
  <div class="pf-v6-c-toolbar__content-section">
@@ -1729,7 +1934,19 @@ wrapperTag: div
1729
1934
  aria-label="Close"
1730
1935
  >
1731
1936
  <span class="pf-v6-c-button__icon">
1732
- <i class="fas fa-times" aria-hidden="true"></i>
1937
+ <svg
1938
+ class="pf-v6-svg"
1939
+ viewBox="0 0 20 20"
1940
+ fill="currentColor"
1941
+ aria-hidden="true"
1942
+ role="img"
1943
+ width="1em"
1944
+ height="1em"
1945
+ >
1946
+ <path
1947
+ d="M17.8 16.2 11.59 10l6.21-6.21c.42-.46.39-1.17-.07-1.59-.43-.4-1.09-.4-1.52 0l-6.2 6.2-6.22-6.19c-.44-.44-1.15-.44-1.59 0-.44.44-.44 1.15 0 1.59l6.2 6.21-6.2 6.2c-.42.46-.39 1.17.07 1.59.43.4 1.09.4 1.52 0L10 11.59l6.2 6.2c.44.44 1.15.44 1.59 0 .44-.45.44-1.16 0-1.6Z"
1948
+ />
1949
+ </svg>
1733
1950
  </span>
1734
1951
  </button>
1735
1952
  </div>
@@ -1742,44 +1959,46 @@ wrapperTag: div
1742
1959
  </div>
1743
1960
  </header>
1744
1961
  <div class="pf-v6-c-page__sidebar">
1745
- <div class="pf-v6-c-page__sidebar-body">
1746
- <nav
1747
- class="pf-v6-c-nav"
1748
- id="masthead-expandable-search-expanded-example-primary-nav"
1749
- aria-label="Global"
1750
- >
1751
- <ul class="pf-v6-c-nav__list" role="list">
1752
- <li class="pf-v6-c-nav__item">
1753
- <a href="#" class="pf-v6-c-nav__link">
1754
- <span class="pf-v6-c-nav__link-text">System panel</span>
1755
- </a>
1756
- </li>
1757
- <li class="pf-v6-c-nav__item">
1758
- <a
1759
- href="#"
1760
- class="pf-v6-c-nav__link pf-m-current"
1761
- aria-current="page"
1762
- >
1763
- <span class="pf-v6-c-nav__link-text">Policy</span>
1764
- </a>
1765
- </li>
1766
- <li class="pf-v6-c-nav__item">
1767
- <a href="#" class="pf-v6-c-nav__link">
1768
- <span class="pf-v6-c-nav__link-text">Authentication</span>
1769
- </a>
1770
- </li>
1771
- <li class="pf-v6-c-nav__item">
1772
- <a href="#" class="pf-v6-c-nav__link">
1773
- <span class="pf-v6-c-nav__link-text">Network services</span>
1774
- </a>
1775
- </li>
1776
- <li class="pf-v6-c-nav__item">
1777
- <a href="#" class="pf-v6-c-nav__link">
1778
- <span class="pf-v6-c-nav__link-text">Server</span>
1779
- </a>
1780
- </li>
1781
- </ul>
1782
- </nav>
1962
+ <div class="pf-v6-c-page__sidebar-main">
1963
+ <div class="pf-v6-c-page__sidebar-body">
1964
+ <nav
1965
+ class="pf-v6-c-nav"
1966
+ id="masthead-expandable-search-expanded-example-primary-nav"
1967
+ aria-label="Global"
1968
+ >
1969
+ <ul class="pf-v6-c-nav__list" role="list">
1970
+ <li class="pf-v6-c-nav__item">
1971
+ <a href="#" class="pf-v6-c-nav__link">
1972
+ <span class="pf-v6-c-nav__link-text">System panel</span>
1973
+ </a>
1974
+ </li>
1975
+ <li class="pf-v6-c-nav__item">
1976
+ <a
1977
+ href="#"
1978
+ class="pf-v6-c-nav__link pf-m-current"
1979
+ aria-current="page"
1980
+ >
1981
+ <span class="pf-v6-c-nav__link-text">Policy</span>
1982
+ </a>
1983
+ </li>
1984
+ <li class="pf-v6-c-nav__item">
1985
+ <a href="#" class="pf-v6-c-nav__link">
1986
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
1987
+ </a>
1988
+ </li>
1989
+ <li class="pf-v6-c-nav__item">
1990
+ <a href="#" class="pf-v6-c-nav__link">
1991
+ <span class="pf-v6-c-nav__link-text">Network services</span>
1992
+ </a>
1993
+ </li>
1994
+ <li class="pf-v6-c-nav__item">
1995
+ <a href="#" class="pf-v6-c-nav__link">
1996
+ <span class="pf-v6-c-nav__link-text">Server</span>
1997
+ </a>
1998
+ </li>
1999
+ </ul>
2000
+ </nav>
2001
+ </div>
1783
2002
  </div>
1784
2003
  </div>
1785
2004
  <div class="pf-v6-c-page__main-container" tabindex="-1">
@@ -1797,21 +2016,57 @@ wrapperTag: div
1797
2016
  </li>
1798
2017
  <li class="pf-v6-c-breadcrumb__item">
1799
2018
  <span class="pf-v6-c-breadcrumb__item-divider">
1800
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2019
+ <svg
2020
+ class="pf-v6-svg"
2021
+ viewBox="0 0 20 20"
2022
+ fill="currentColor"
2023
+ aria-hidden="true"
2024
+ role="img"
2025
+ width="1em"
2026
+ height="1em"
2027
+ >
2028
+ <path
2029
+ 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"
2030
+ />
2031
+ </svg>
1801
2032
  </span>
1802
2033
 
1803
2034
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1804
2035
  </li>
1805
2036
  <li class="pf-v6-c-breadcrumb__item">
1806
2037
  <span class="pf-v6-c-breadcrumb__item-divider">
1807
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2038
+ <svg
2039
+ class="pf-v6-svg"
2040
+ viewBox="0 0 20 20"
2041
+ fill="currentColor"
2042
+ aria-hidden="true"
2043
+ role="img"
2044
+ width="1em"
2045
+ height="1em"
2046
+ >
2047
+ <path
2048
+ 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"
2049
+ />
2050
+ </svg>
1808
2051
  </span>
1809
2052
 
1810
2053
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1811
2054
  </li>
1812
2055
  <li class="pf-v6-c-breadcrumb__item">
1813
2056
  <span class="pf-v6-c-breadcrumb__item-divider">
1814
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2057
+ <svg
2058
+ class="pf-v6-svg"
2059
+ viewBox="0 0 20 20"
2060
+ fill="currentColor"
2061
+ aria-hidden="true"
2062
+ role="img"
2063
+ width="1em"
2064
+ height="1em"
2065
+ >
2066
+ <path
2067
+ 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"
2068
+ />
2069
+ </svg>
1815
2070
  </span>
1816
2071
 
1817
2072
  <a
@@ -1884,9 +2139,10 @@ wrapperTag: div
1884
2139
  <span class="pf-v6-c-button__text">Skip to content</span>
1885
2140
  </a>
1886
2141
  </div>
2142
+
1887
2143
  <header
1888
2144
  class="pf-v6-c-masthead"
1889
- id="masthead-advanced-with-menu-example-masthead"
2145
+ id="masthead-advanced-with-menu-example-docked"
1890
2146
  >
1891
2147
  <div class="pf-v6-c-masthead__main">
1892
2148
  <span class="pf-v6-c-masthead__toggle">
@@ -1929,7 +2185,7 @@ wrapperTag: div
1929
2185
  y1="2.25860997e-13%"
1930
2186
  x2="32%"
1931
2187
  y2="100%"
1932
- id="linearGradient-masthead-advanced-with-menu-example-masthead"
2188
+ id="linearGradient-masthead-advanced-with-menu-example-docked"
1933
2189
  >
1934
2190
  <stop stop-color="#2B9AF3" offset="0%" />
1935
2191
  <stop
@@ -1983,11 +2239,11 @@ wrapperTag: div
1983
2239
  />
1984
2240
  <path
1985
2241
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
1986
- fill="url(#linearGradient-masthead-advanced-with-menu-example-masthead)"
2242
+ fill="url(#linearGradient-masthead-advanced-with-menu-example-docked)"
1987
2243
  />
1988
2244
  <path
1989
2245
  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"
1990
- fill="url(#linearGradient-masthead-advanced-with-menu-example-masthead)"
2246
+ fill="url(#linearGradient-masthead-advanced-with-menu-example-docked)"
1991
2247
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
1992
2248
  />
1993
2249
  </g>
@@ -1999,7 +2255,7 @@ wrapperTag: div
1999
2255
  <div class="pf-v6-c-masthead__content">
2000
2256
  <div
2001
2257
  class="pf-v6-c-toolbar pf-m-static"
2002
- id="masthead-advanced-with-menu-example-masthead-toolbar"
2258
+ id="masthead-advanced-with-menu-example-docked-toolbar"
2003
2259
  >
2004
2260
  <div class="pf-v6-c-toolbar__content">
2005
2261
  <div class="pf-v6-c-toolbar__content-section">
@@ -2066,44 +2322,46 @@ wrapperTag: div
2066
2322
  </div>
2067
2323
  </header>
2068
2324
  <div class="pf-v6-c-page__sidebar">
2069
- <div class="pf-v6-c-page__sidebar-body">
2070
- <nav
2071
- class="pf-v6-c-nav"
2072
- id="masthead-advanced-with-menu-example-primary-nav"
2073
- aria-label="Global"
2074
- >
2075
- <ul class="pf-v6-c-nav__list" role="list">
2076
- <li class="pf-v6-c-nav__item">
2077
- <a href="#" class="pf-v6-c-nav__link">
2078
- <span class="pf-v6-c-nav__link-text">System panel</span>
2079
- </a>
2080
- </li>
2081
- <li class="pf-v6-c-nav__item">
2082
- <a
2083
- href="#"
2084
- class="pf-v6-c-nav__link pf-m-current"
2085
- aria-current="page"
2086
- >
2087
- <span class="pf-v6-c-nav__link-text">Policy</span>
2088
- </a>
2089
- </li>
2090
- <li class="pf-v6-c-nav__item">
2091
- <a href="#" class="pf-v6-c-nav__link">
2092
- <span class="pf-v6-c-nav__link-text">Authentication</span>
2093
- </a>
2094
- </li>
2095
- <li class="pf-v6-c-nav__item">
2096
- <a href="#" class="pf-v6-c-nav__link">
2097
- <span class="pf-v6-c-nav__link-text">Network services</span>
2098
- </a>
2099
- </li>
2100
- <li class="pf-v6-c-nav__item">
2101
- <a href="#" class="pf-v6-c-nav__link">
2102
- <span class="pf-v6-c-nav__link-text">Server</span>
2103
- </a>
2104
- </li>
2105
- </ul>
2106
- </nav>
2325
+ <div class="pf-v6-c-page__sidebar-main">
2326
+ <div class="pf-v6-c-page__sidebar-body">
2327
+ <nav
2328
+ class="pf-v6-c-nav"
2329
+ id="masthead-advanced-with-menu-example-primary-nav"
2330
+ aria-label="Global"
2331
+ >
2332
+ <ul class="pf-v6-c-nav__list" role="list">
2333
+ <li class="pf-v6-c-nav__item">
2334
+ <a href="#" class="pf-v6-c-nav__link">
2335
+ <span class="pf-v6-c-nav__link-text">System panel</span>
2336
+ </a>
2337
+ </li>
2338
+ <li class="pf-v6-c-nav__item">
2339
+ <a
2340
+ href="#"
2341
+ class="pf-v6-c-nav__link pf-m-current"
2342
+ aria-current="page"
2343
+ >
2344
+ <span class="pf-v6-c-nav__link-text">Policy</span>
2345
+ </a>
2346
+ </li>
2347
+ <li class="pf-v6-c-nav__item">
2348
+ <a href="#" class="pf-v6-c-nav__link">
2349
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
2350
+ </a>
2351
+ </li>
2352
+ <li class="pf-v6-c-nav__item">
2353
+ <a href="#" class="pf-v6-c-nav__link">
2354
+ <span class="pf-v6-c-nav__link-text">Network services</span>
2355
+ </a>
2356
+ </li>
2357
+ <li class="pf-v6-c-nav__item">
2358
+ <a href="#" class="pf-v6-c-nav__link">
2359
+ <span class="pf-v6-c-nav__link-text">Server</span>
2360
+ </a>
2361
+ </li>
2362
+ </ul>
2363
+ </nav>
2364
+ </div>
2107
2365
  </div>
2108
2366
  </div>
2109
2367
  <div class="pf-v6-c-page__main-container" tabindex="-1">
@@ -2121,21 +2379,57 @@ wrapperTag: div
2121
2379
  </li>
2122
2380
  <li class="pf-v6-c-breadcrumb__item">
2123
2381
  <span class="pf-v6-c-breadcrumb__item-divider">
2124
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2382
+ <svg
2383
+ class="pf-v6-svg"
2384
+ viewBox="0 0 20 20"
2385
+ fill="currentColor"
2386
+ aria-hidden="true"
2387
+ role="img"
2388
+ width="1em"
2389
+ height="1em"
2390
+ >
2391
+ <path
2392
+ 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"
2393
+ />
2394
+ </svg>
2125
2395
  </span>
2126
2396
 
2127
2397
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
2128
2398
  </li>
2129
2399
  <li class="pf-v6-c-breadcrumb__item">
2130
2400
  <span class="pf-v6-c-breadcrumb__item-divider">
2131
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2401
+ <svg
2402
+ class="pf-v6-svg"
2403
+ viewBox="0 0 20 20"
2404
+ fill="currentColor"
2405
+ aria-hidden="true"
2406
+ role="img"
2407
+ width="1em"
2408
+ height="1em"
2409
+ >
2410
+ <path
2411
+ 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"
2412
+ />
2413
+ </svg>
2132
2414
  </span>
2133
2415
 
2134
2416
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
2135
2417
  </li>
2136
2418
  <li class="pf-v6-c-breadcrumb__item">
2137
2419
  <span class="pf-v6-c-breadcrumb__item-divider">
2138
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2420
+ <svg
2421
+ class="pf-v6-svg"
2422
+ viewBox="0 0 20 20"
2423
+ fill="currentColor"
2424
+ aria-hidden="true"
2425
+ role="img"
2426
+ width="1em"
2427
+ height="1em"
2428
+ >
2429
+ <path
2430
+ 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"
2431
+ />
2432
+ </svg>
2139
2433
  </span>
2140
2434
 
2141
2435
  <a
@@ -2208,7 +2502,8 @@ wrapperTag: div
2208
2502
  <span class="pf-v6-c-button__text">Skip to content</span>
2209
2503
  </a>
2210
2504
  </div>
2211
- <header class="pf-v6-c-masthead" id="masthead-horizontal-nav-masthead">
2505
+
2506
+ <header class="pf-v6-c-masthead" id="masthead-horizontal-nav-docked">
2212
2507
  <div class="pf-v6-c-masthead__main">
2213
2508
  <div class="pf-v6-c-masthead__brand">
2214
2509
  <a class="pf-v6-c-masthead__logo" href="#">
@@ -2220,7 +2515,7 @@ wrapperTag: div
2220
2515
  y1="2.25860997e-13%"
2221
2516
  x2="32%"
2222
2517
  y2="100%"
2223
- id="linearGradient-masthead-horizontal-nav-masthead"
2518
+ id="linearGradient-masthead-horizontal-nav-docked"
2224
2519
  >
2225
2520
  <stop stop-color="#2B9AF3" offset="0%" />
2226
2521
  <stop
@@ -2274,11 +2569,11 @@ wrapperTag: div
2274
2569
  />
2275
2570
  <path
2276
2571
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
2277
- fill="url(#linearGradient-masthead-horizontal-nav-masthead)"
2572
+ fill="url(#linearGradient-masthead-horizontal-nav-docked)"
2278
2573
  />
2279
2574
  <path
2280
2575
  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"
2281
- fill="url(#linearGradient-masthead-horizontal-nav-masthead)"
2576
+ fill="url(#linearGradient-masthead-horizontal-nav-docked)"
2282
2577
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
2283
2578
  />
2284
2579
  </g>
@@ -2290,7 +2585,7 @@ wrapperTag: div
2290
2585
  <div class="pf-v6-c-masthead__content">
2291
2586
  <div
2292
2587
  class="pf-v6-c-toolbar pf-m-static"
2293
- id="masthead-horizontal-nav-masthead-toolbar"
2588
+ id="masthead-horizontal-nav-docked-toolbar"
2294
2589
  >
2295
2590
  <div class="pf-v6-c-toolbar__content">
2296
2591
  <div class="pf-v6-c-toolbar__content-section">
@@ -2300,7 +2595,7 @@ wrapperTag: div
2300
2595
  >
2301
2596
  <nav
2302
2597
  class="pf-v6-c-nav pf-m-scrollable pf-m-horizontal"
2303
- id="masthead-horizontal-nav-masthead-horizontal-nav"
2598
+ id="masthead-horizontal-nav-docked-horizontal-nav"
2304
2599
  aria-label="Global"
2305
2600
  >
2306
2601
  <div class="pf-v6-c-nav__scroll-button">
@@ -2310,7 +2605,19 @@ wrapperTag: div
2310
2605
  aria-label="Scroll start"
2311
2606
  >
2312
2607
  <span class="pf-v6-c-button__icon">
2313
- <i class="fas fa-angle-left" aria-hidden="true"></i>
2608
+ <svg
2609
+ class="pf-v6-svg"
2610
+ viewBox="0 0 20 20"
2611
+ fill="currentColor"
2612
+ aria-hidden="true"
2613
+ role="img"
2614
+ width="1em"
2615
+ height="1em"
2616
+ >
2617
+ <path
2618
+ d="m6.41 10 7.29-7.29.02-.02c.38-.4.37-1.03-.02-1.41-.4-.38-1.03-.37-1.41.02L4.64 8.95a1.49 1.49 0 0 0 0 2.12l7.65 7.65c.19.19.44.29.71.29.27 0 .52-.11.71-.29a.996.996 0 0 0 0-1.41l-7.29-7.29Z"
2619
+ />
2620
+ </svg>
2314
2621
  </span>
2315
2622
  </button>
2316
2623
  </div>
@@ -2352,70 +2659,24 @@ wrapperTag: div
2352
2659
  aria-label="Scroll end"
2353
2660
  >
2354
2661
  <span class="pf-v6-c-button__icon">
2355
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2662
+ <svg
2663
+ class="pf-v6-svg"
2664
+ viewBox="0 0 20 20"
2665
+ fill="currentColor"
2666
+ aria-hidden="true"
2667
+ role="img"
2668
+ width="1em"
2669
+ height="1em"
2670
+ >
2671
+ <path
2672
+ 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"
2673
+ />
2674
+ </svg>
2356
2675
  </span>
2357
2676
  </button>
2358
2677
  </div>
2359
2678
  </nav>
2360
2679
  </div>
2361
-
2362
- <div
2363
- class="pf-v6-c-toolbar__group pf-m-align-end pf-m-spacer-none pf-m-spacer-md-on-md pf-m-action-group-plain"
2364
- >
2365
- <div
2366
- class="pf-v6-c-toolbar__group pf-m-hidden pf-m-visible-on-lg pf-m-action-group-plain"
2367
- >
2368
- <div class="pf-v6-c-toolbar__item">
2369
- <button
2370
- class="pf-v6-c-menu-toggle pf-m-plain"
2371
- type="button"
2372
- aria-expanded="false"
2373
- aria-label="Application launcher"
2374
- >
2375
- <span class="pf-v6-c-menu-toggle__icon">
2376
- <i class="fas fa-th" aria-hidden="true"></i>
2377
- </span>
2378
- </button>
2379
- </div>
2380
- <div class="pf-v6-c-toolbar__item">
2381
- <button
2382
- class="pf-v6-c-menu-toggle pf-m-settings pf-m-plain"
2383
- type="button"
2384
- aria-expanded="false"
2385
- aria-label="Settings"
2386
- >
2387
- <span class="pf-v6-c-menu-toggle__icon">
2388
- <i class="fas fa-cog" aria-hidden="true"></i>
2389
- </span>
2390
- </button>
2391
- </div>
2392
- <div class="pf-v6-c-toolbar__item">
2393
- <button
2394
- class="pf-v6-c-menu-toggle pf-m-plain"
2395
- type="button"
2396
- aria-expanded="false"
2397
- aria-label="Help"
2398
- >
2399
- <span class="pf-v6-c-menu-toggle__icon">
2400
- <i class="fas fa-question-circle" aria-hidden="true"></i>
2401
- </span>
2402
- </button>
2403
- </div>
2404
- </div>
2405
-
2406
- <div class="pf-v6-c-toolbar__item pf-m-hidden-on-lg">
2407
- <button
2408
- class="pf-v6-c-menu-toggle pf-m-plain"
2409
- type="button"
2410
- aria-expanded="false"
2411
- aria-label="Actions"
2412
- >
2413
- <span class="pf-v6-c-menu-toggle__icon">
2414
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
2415
- </span>
2416
- </button>
2417
- </div>
2418
- </div>
2419
2680
  </div>
2420
2681
  </div>
2421
2682
  </div>
@@ -2436,21 +2697,57 @@ wrapperTag: div
2436
2697
  </li>
2437
2698
  <li class="pf-v6-c-breadcrumb__item">
2438
2699
  <span class="pf-v6-c-breadcrumb__item-divider">
2439
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2700
+ <svg
2701
+ class="pf-v6-svg"
2702
+ viewBox="0 0 20 20"
2703
+ fill="currentColor"
2704
+ aria-hidden="true"
2705
+ role="img"
2706
+ width="1em"
2707
+ height="1em"
2708
+ >
2709
+ <path
2710
+ 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"
2711
+ />
2712
+ </svg>
2440
2713
  </span>
2441
2714
 
2442
2715
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
2443
2716
  </li>
2444
2717
  <li class="pf-v6-c-breadcrumb__item">
2445
2718
  <span class="pf-v6-c-breadcrumb__item-divider">
2446
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2719
+ <svg
2720
+ class="pf-v6-svg"
2721
+ viewBox="0 0 20 20"
2722
+ fill="currentColor"
2723
+ aria-hidden="true"
2724
+ role="img"
2725
+ width="1em"
2726
+ height="1em"
2727
+ >
2728
+ <path
2729
+ 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"
2730
+ />
2731
+ </svg>
2447
2732
  </span>
2448
2733
 
2449
2734
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
2450
2735
  </li>
2451
2736
  <li class="pf-v6-c-breadcrumb__item">
2452
2737
  <span class="pf-v6-c-breadcrumb__item-divider">
2453
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2738
+ <svg
2739
+ class="pf-v6-svg"
2740
+ viewBox="0 0 20 20"
2741
+ fill="currentColor"
2742
+ aria-hidden="true"
2743
+ role="img"
2744
+ width="1em"
2745
+ height="1em"
2746
+ >
2747
+ <path
2748
+ 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"
2749
+ />
2750
+ </svg>
2454
2751
  </span>
2455
2752
 
2456
2753
  <a
@@ -2528,9 +2825,10 @@ wrapperTag: div
2528
2825
  <span class="pf-v6-c-button__text">Skip to content</span>
2529
2826
  </a>
2530
2827
  </div>
2828
+
2531
2829
  <header
2532
2830
  class="pf-v6-c-masthead"
2533
- id="masthead-toggle-group-filters-expanded-mobile-example-masthead"
2831
+ id="masthead-toggle-group-filters-expanded-mobile-example-docked"
2534
2832
  >
2535
2833
  <div class="pf-v6-c-masthead__main">
2536
2834
  <span class="pf-v6-c-masthead__toggle">
@@ -2573,7 +2871,7 @@ wrapperTag: div
2573
2871
  y1="2.25860997e-13%"
2574
2872
  x2="32%"
2575
2873
  y2="100%"
2576
- id="linearGradient-masthead-toggle-group-filters-expanded-mobile-example-masthead"
2874
+ id="linearGradient-masthead-toggle-group-filters-expanded-mobile-example-docked"
2577
2875
  >
2578
2876
  <stop stop-color="#2B9AF3" offset="0%" />
2579
2877
  <stop
@@ -2627,11 +2925,11 @@ wrapperTag: div
2627
2925
  />
2628
2926
  <path
2629
2927
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
2630
- fill="url(#linearGradient-masthead-toggle-group-filters-expanded-mobile-example-masthead)"
2928
+ fill="url(#linearGradient-masthead-toggle-group-filters-expanded-mobile-example-docked)"
2631
2929
  />
2632
2930
  <path
2633
2931
  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"
2634
- fill="url(#linearGradient-masthead-toggle-group-filters-expanded-mobile-example-masthead)"
2932
+ fill="url(#linearGradient-masthead-toggle-group-filters-expanded-mobile-example-docked)"
2635
2933
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
2636
2934
  />
2637
2935
  </g>
@@ -2643,7 +2941,7 @@ wrapperTag: div
2643
2941
  <div class="pf-v6-c-masthead__content">
2644
2942
  <div
2645
2943
  class="pf-v6-c-toolbar pf-m-static"
2646
- id="masthead-toggle-group-filters-expanded-mobile-example-masthead-toolbar"
2944
+ id="masthead-toggle-group-filters-expanded-mobile-example-docked-toolbar"
2647
2945
  >
2648
2946
  <div class="pf-v6-c-toolbar__content">
2649
2947
  <div class="pf-v6-c-toolbar__content-section">
@@ -2656,7 +2954,7 @@ wrapperTag: div
2656
2954
  type="button"
2657
2955
  aria-expanded="false"
2658
2956
  aria-label="Show filters"
2659
- aria-controls="masthead-toggle-group-filters-expanded-mobile-example-masthead-toolbar-expandable-content"
2957
+ aria-controls="masthead-toggle-group-filters-expanded-mobile-example-docked-toolbar-expandable-content"
2660
2958
  >
2661
2959
  <span class="pf-v6-c-menu-toggle__icon">
2662
2960
  <i class="fas fa-filter" aria-hidden="true"></i>
@@ -2681,7 +2979,7 @@ wrapperTag: div
2681
2979
 
2682
2980
  <div
2683
2981
  class="pf-v6-c-toolbar__expandable-content pf-m-expanded"
2684
- id="masthead-toggle-group-filters-expanded-mobile-example-masthead-toolbar-expandable-content"
2982
+ id="masthead-toggle-group-filters-expanded-mobile-example-docked-toolbar-expandable-content"
2685
2983
  >
2686
2984
  <div class="pf-v6-c-toolbar__item pf-m-search-filter">
2687
2985
  <div
@@ -2694,7 +2992,7 @@ wrapperTag: div
2694
2992
  class="pf-v6-c-menu-toggle"
2695
2993
  type="button"
2696
2994
  aria-expanded="false"
2697
- id="masthead-toggle-group-filters-expanded-mobile-example-masthead-toolbar-search-filter-menu"
2995
+ id="masthead-toggle-group-filters-expanded-mobile-example-docked-toolbar-search-filter-menu"
2698
2996
  >
2699
2997
  <span class="pf-v6-c-menu-toggle__icon">
2700
2998
  <i class="fas fa-filter" aria-hidden="true"></i>
@@ -2733,44 +3031,46 @@ wrapperTag: div
2733
3031
  </div>
2734
3032
  </header>
2735
3033
  <div class="pf-v6-c-page__sidebar">
2736
- <div class="pf-v6-c-page__sidebar-body">
2737
- <nav
2738
- class="pf-v6-c-nav"
2739
- id="masthead-toggle-group-filters-expanded-mobile-example-primary-nav"
2740
- aria-label="Global"
2741
- >
2742
- <ul class="pf-v6-c-nav__list" role="list">
2743
- <li class="pf-v6-c-nav__item">
2744
- <a href="#" class="pf-v6-c-nav__link">
2745
- <span class="pf-v6-c-nav__link-text">System panel</span>
2746
- </a>
2747
- </li>
2748
- <li class="pf-v6-c-nav__item">
2749
- <a
2750
- href="#"
2751
- class="pf-v6-c-nav__link pf-m-current"
2752
- aria-current="page"
2753
- >
2754
- <span class="pf-v6-c-nav__link-text">Policy</span>
2755
- </a>
2756
- </li>
2757
- <li class="pf-v6-c-nav__item">
2758
- <a href="#" class="pf-v6-c-nav__link">
2759
- <span class="pf-v6-c-nav__link-text">Authentication</span>
2760
- </a>
2761
- </li>
2762
- <li class="pf-v6-c-nav__item">
2763
- <a href="#" class="pf-v6-c-nav__link">
2764
- <span class="pf-v6-c-nav__link-text">Network services</span>
2765
- </a>
2766
- </li>
2767
- <li class="pf-v6-c-nav__item">
2768
- <a href="#" class="pf-v6-c-nav__link">
2769
- <span class="pf-v6-c-nav__link-text">Server</span>
2770
- </a>
2771
- </li>
2772
- </ul>
2773
- </nav>
3034
+ <div class="pf-v6-c-page__sidebar-main">
3035
+ <div class="pf-v6-c-page__sidebar-body">
3036
+ <nav
3037
+ class="pf-v6-c-nav"
3038
+ id="masthead-toggle-group-filters-expanded-mobile-example-primary-nav"
3039
+ aria-label="Global"
3040
+ >
3041
+ <ul class="pf-v6-c-nav__list" role="list">
3042
+ <li class="pf-v6-c-nav__item">
3043
+ <a href="#" class="pf-v6-c-nav__link">
3044
+ <span class="pf-v6-c-nav__link-text">System panel</span>
3045
+ </a>
3046
+ </li>
3047
+ <li class="pf-v6-c-nav__item">
3048
+ <a
3049
+ href="#"
3050
+ class="pf-v6-c-nav__link pf-m-current"
3051
+ aria-current="page"
3052
+ >
3053
+ <span class="pf-v6-c-nav__link-text">Policy</span>
3054
+ </a>
3055
+ </li>
3056
+ <li class="pf-v6-c-nav__item">
3057
+ <a href="#" class="pf-v6-c-nav__link">
3058
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
3059
+ </a>
3060
+ </li>
3061
+ <li class="pf-v6-c-nav__item">
3062
+ <a href="#" class="pf-v6-c-nav__link">
3063
+ <span class="pf-v6-c-nav__link-text">Network services</span>
3064
+ </a>
3065
+ </li>
3066
+ <li class="pf-v6-c-nav__item">
3067
+ <a href="#" class="pf-v6-c-nav__link">
3068
+ <span class="pf-v6-c-nav__link-text">Server</span>
3069
+ </a>
3070
+ </li>
3071
+ </ul>
3072
+ </nav>
3073
+ </div>
2774
3074
  </div>
2775
3075
  </div>
2776
3076
  <div class="pf-v6-c-page__main-container" tabindex="-1">
@@ -2788,21 +3088,57 @@ wrapperTag: div
2788
3088
  </li>
2789
3089
  <li class="pf-v6-c-breadcrumb__item">
2790
3090
  <span class="pf-v6-c-breadcrumb__item-divider">
2791
- <i class="fas fa-angle-right" aria-hidden="true"></i>
3091
+ <svg
3092
+ class="pf-v6-svg"
3093
+ viewBox="0 0 20 20"
3094
+ fill="currentColor"
3095
+ aria-hidden="true"
3096
+ role="img"
3097
+ width="1em"
3098
+ height="1em"
3099
+ >
3100
+ <path
3101
+ 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"
3102
+ />
3103
+ </svg>
2792
3104
  </span>
2793
3105
 
2794
3106
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
2795
3107
  </li>
2796
3108
  <li class="pf-v6-c-breadcrumb__item">
2797
3109
  <span class="pf-v6-c-breadcrumb__item-divider">
2798
- <i class="fas fa-angle-right" aria-hidden="true"></i>
3110
+ <svg
3111
+ class="pf-v6-svg"
3112
+ viewBox="0 0 20 20"
3113
+ fill="currentColor"
3114
+ aria-hidden="true"
3115
+ role="img"
3116
+ width="1em"
3117
+ height="1em"
3118
+ >
3119
+ <path
3120
+ 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"
3121
+ />
3122
+ </svg>
2799
3123
  </span>
2800
3124
 
2801
3125
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
2802
3126
  </li>
2803
3127
  <li class="pf-v6-c-breadcrumb__item">
2804
3128
  <span class="pf-v6-c-breadcrumb__item-divider">
2805
- <i class="fas fa-angle-right" aria-hidden="true"></i>
3129
+ <svg
3130
+ class="pf-v6-svg"
3131
+ viewBox="0 0 20 20"
3132
+ fill="currentColor"
3133
+ aria-hidden="true"
3134
+ role="img"
3135
+ width="1em"
3136
+ height="1em"
3137
+ >
3138
+ <path
3139
+ 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"
3140
+ />
3141
+ </svg>
2806
3142
  </span>
2807
3143
 
2808
3144
  <a