@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/JumpLinks/examples/JumpLinks.md CHANGED
@@ -15,9 +15,10 @@ section: components
15
15
  <span class="pf-v6-c-button__text">Skip to content</span>
16
16
  </a>
17
17
  </div>
18
+
18
19
  <header
19
20
  class="pf-v6-c-masthead"
20
- id="jump-links-collapsed-mobile-example-masthead"
21
+ id="jump-links-collapsed-mobile-example-docked"
21
22
  >
22
23
  <div class="pf-v6-c-masthead__main">
23
24
  <span class="pf-v6-c-masthead__toggle">
@@ -60,7 +61,7 @@ section: components
60
61
  y1="2.25860997e-13%"
61
62
  x2="32%"
62
63
  y2="100%"
63
- id="linearGradient-jump-links-collapsed-mobile-example-masthead"
64
+ id="linearGradient-jump-links-collapsed-mobile-example-docked"
64
65
  >
65
66
  <stop stop-color="#2B9AF3" offset="0%" />
66
67
  <stop
@@ -114,11 +115,11 @@ section: components
114
115
  />
115
116
  <path
116
117
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
117
- fill="url(#linearGradient-jump-links-collapsed-mobile-example-masthead)"
118
+ fill="url(#linearGradient-jump-links-collapsed-mobile-example-docked)"
118
119
  />
119
120
  <path
120
121
  d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z"
121
- fill="url(#linearGradient-jump-links-collapsed-mobile-example-masthead)"
122
+ fill="url(#linearGradient-jump-links-collapsed-mobile-example-docked)"
122
123
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
123
124
  />
124
125
  </g>
@@ -130,7 +131,7 @@ section: components
130
131
  <div class="pf-v6-c-masthead__content">
131
132
  <div
132
133
  class="pf-v6-c-toolbar pf-m-static"
133
- id="jump-links-collapsed-mobile-example-masthead-toolbar"
134
+ id="jump-links-collapsed-mobile-example-docked-toolbar"
134
135
  >
135
136
  <div class="pf-v6-c-toolbar__content">
136
137
  <div class="pf-v6-c-toolbar__content-section">
@@ -197,44 +198,46 @@ section: components
197
198
  </div>
198
199
  </header>
199
200
  <div class="pf-v6-c-page__sidebar">
200
- <div class="pf-v6-c-page__sidebar-body">
201
- <nav
202
- class="pf-v6-c-nav"
203
- id="jump-links-collapsed-mobile-example-primary-nav"
204
- aria-label="Global"
205
- >
206
- <ul class="pf-v6-c-nav__list" role="list">
207
- <li class="pf-v6-c-nav__item">
208
- <a href="#" class="pf-v6-c-nav__link">
209
- <span class="pf-v6-c-nav__link-text">System panel</span>
210
- </a>
211
- </li>
212
- <li class="pf-v6-c-nav__item">
213
- <a
214
- href="#"
215
- class="pf-v6-c-nav__link pf-m-current"
216
- aria-current="page"
217
- >
218
- <span class="pf-v6-c-nav__link-text">Policy</span>
219
- </a>
220
- </li>
221
- <li class="pf-v6-c-nav__item">
222
- <a href="#" class="pf-v6-c-nav__link">
223
- <span class="pf-v6-c-nav__link-text">Authentication</span>
224
- </a>
225
- </li>
226
- <li class="pf-v6-c-nav__item">
227
- <a href="#" class="pf-v6-c-nav__link">
228
- <span class="pf-v6-c-nav__link-text">Network services</span>
229
- </a>
230
- </li>
231
- <li class="pf-v6-c-nav__item">
232
- <a href="#" class="pf-v6-c-nav__link">
233
- <span class="pf-v6-c-nav__link-text">Server</span>
234
- </a>
235
- </li>
236
- </ul>
237
- </nav>
201
+ <div class="pf-v6-c-page__sidebar-main">
202
+ <div class="pf-v6-c-page__sidebar-body">
203
+ <nav
204
+ class="pf-v6-c-nav"
205
+ id="jump-links-collapsed-mobile-example-primary-nav"
206
+ aria-label="Global"
207
+ >
208
+ <ul class="pf-v6-c-nav__list" role="list">
209
+ <li class="pf-v6-c-nav__item">
210
+ <a href="#" class="pf-v6-c-nav__link">
211
+ <span class="pf-v6-c-nav__link-text">System panel</span>
212
+ </a>
213
+ </li>
214
+ <li class="pf-v6-c-nav__item">
215
+ <a
216
+ href="#"
217
+ class="pf-v6-c-nav__link pf-m-current"
218
+ aria-current="page"
219
+ >
220
+ <span class="pf-v6-c-nav__link-text">Policy</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">Authentication</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">Network services</span>
231
+ </a>
232
+ </li>
233
+ <li class="pf-v6-c-nav__item">
234
+ <a href="#" class="pf-v6-c-nav__link">
235
+ <span class="pf-v6-c-nav__link-text">Server</span>
236
+ </a>
237
+ </li>
238
+ </ul>
239
+ </nav>
240
+ </div>
238
241
  </div>
239
242
  </div>
240
243
  <div class="pf-v6-c-page__main-container" tabindex="-1">
@@ -252,21 +255,57 @@ section: components
252
255
  </li>
253
256
  <li class="pf-v6-c-breadcrumb__item">
254
257
  <span class="pf-v6-c-breadcrumb__item-divider">
255
- <i class="fas fa-angle-right" aria-hidden="true"></i>
258
+ <svg
259
+ class="pf-v6-svg"
260
+ viewBox="0 0 20 20"
261
+ fill="currentColor"
262
+ aria-hidden="true"
263
+ role="img"
264
+ width="1em"
265
+ height="1em"
266
+ >
267
+ <path
268
+ 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"
269
+ />
270
+ </svg>
256
271
  </span>
257
272
 
258
273
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
259
274
  </li>
260
275
  <li class="pf-v6-c-breadcrumb__item">
261
276
  <span class="pf-v6-c-breadcrumb__item-divider">
262
- <i class="fas fa-angle-right" aria-hidden="true"></i>
277
+ <svg
278
+ class="pf-v6-svg"
279
+ viewBox="0 0 20 20"
280
+ fill="currentColor"
281
+ aria-hidden="true"
282
+ role="img"
283
+ width="1em"
284
+ height="1em"
285
+ >
286
+ <path
287
+ 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"
288
+ />
289
+ </svg>
263
290
  </span>
264
291
 
265
292
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
266
293
  </li>
267
294
  <li class="pf-v6-c-breadcrumb__item">
268
295
  <span class="pf-v6-c-breadcrumb__item-divider">
269
- <i class="fas fa-angle-right" aria-hidden="true"></i>
296
+ <svg
297
+ class="pf-v6-svg"
298
+ viewBox="0 0 20 20"
299
+ fill="currentColor"
300
+ aria-hidden="true"
301
+ role="img"
302
+ width="1em"
303
+ height="1em"
304
+ >
305
+ <path
306
+ 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"
307
+ />
308
+ </svg>
270
309
  </span>
271
310
 
272
311
  <a
@@ -304,10 +343,19 @@ section: components
304
343
  >
305
344
  <span class="pf-v6-c-button__icon pf-m-start">
306
345
  <span class="pf-v6-c-jump-links__toggle-icon">
307
- <i
308
- class="fas fa-angle-right"
346
+ <svg
347
+ class="pf-v6-svg"
348
+ viewBox="0 0 20 20"
349
+ fill="currentColor"
309
350
  aria-hidden="true"
310
- ></i>
351
+ role="img"
352
+ width="1em"
353
+ height="1em"
354
+ >
355
+ <path
356
+ d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
357
+ />
358
+ </svg>
311
359
  </span>
312
360
  </span>
313
361
  <span class="pf-v6-c-button__text">Jump to section</span>
@@ -449,9 +497,10 @@ section: components
449
497
  <span class="pf-v6-c-button__text">Skip to content</span>
450
498
  </a>
451
499
  </div>
500
+
452
501
  <header
453
502
  class="pf-v6-c-masthead"
454
- id="jump-links-vertical-expanded-mobile-example-masthead"
503
+ id="jump-links-vertical-expanded-mobile-example-docked"
455
504
  >
456
505
  <div class="pf-v6-c-masthead__main">
457
506
  <span class="pf-v6-c-masthead__toggle">
@@ -494,7 +543,7 @@ section: components
494
543
  y1="2.25860997e-13%"
495
544
  x2="32%"
496
545
  y2="100%"
497
- id="linearGradient-jump-links-vertical-expanded-mobile-example-masthead"
546
+ id="linearGradient-jump-links-vertical-expanded-mobile-example-docked"
498
547
  >
499
548
  <stop stop-color="#2B9AF3" offset="0%" />
500
549
  <stop
@@ -548,11 +597,11 @@ section: components
548
597
  />
549
598
  <path
550
599
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
551
- fill="url(#linearGradient-jump-links-vertical-expanded-mobile-example-masthead)"
600
+ fill="url(#linearGradient-jump-links-vertical-expanded-mobile-example-docked)"
552
601
  />
553
602
  <path
554
603
  d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z"
555
- fill="url(#linearGradient-jump-links-vertical-expanded-mobile-example-masthead)"
604
+ fill="url(#linearGradient-jump-links-vertical-expanded-mobile-example-docked)"
556
605
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
557
606
  />
558
607
  </g>
@@ -564,7 +613,7 @@ section: components
564
613
  <div class="pf-v6-c-masthead__content">
565
614
  <div
566
615
  class="pf-v6-c-toolbar pf-m-static"
567
- id="jump-links-vertical-expanded-mobile-example-masthead-toolbar"
616
+ id="jump-links-vertical-expanded-mobile-example-docked-toolbar"
568
617
  >
569
618
  <div class="pf-v6-c-toolbar__content">
570
619
  <div class="pf-v6-c-toolbar__content-section">
@@ -631,44 +680,46 @@ section: components
631
680
  </div>
632
681
  </header>
633
682
  <div class="pf-v6-c-page__sidebar">
634
- <div class="pf-v6-c-page__sidebar-body">
635
- <nav
636
- class="pf-v6-c-nav"
637
- id="jump-links-vertical-expanded-mobile-example-primary-nav"
638
- aria-label="Global"
639
- >
640
- <ul class="pf-v6-c-nav__list" role="list">
641
- <li class="pf-v6-c-nav__item">
642
- <a href="#" class="pf-v6-c-nav__link">
643
- <span class="pf-v6-c-nav__link-text">System panel</span>
644
- </a>
645
- </li>
646
- <li class="pf-v6-c-nav__item">
647
- <a
648
- href="#"
649
- class="pf-v6-c-nav__link pf-m-current"
650
- aria-current="page"
651
- >
652
- <span class="pf-v6-c-nav__link-text">Policy</span>
653
- </a>
654
- </li>
655
- <li class="pf-v6-c-nav__item">
656
- <a href="#" class="pf-v6-c-nav__link">
657
- <span class="pf-v6-c-nav__link-text">Authentication</span>
658
- </a>
659
- </li>
660
- <li class="pf-v6-c-nav__item">
661
- <a href="#" class="pf-v6-c-nav__link">
662
- <span class="pf-v6-c-nav__link-text">Network services</span>
663
- </a>
664
- </li>
665
- <li class="pf-v6-c-nav__item">
666
- <a href="#" class="pf-v6-c-nav__link">
667
- <span class="pf-v6-c-nav__link-text">Server</span>
668
- </a>
669
- </li>
670
- </ul>
671
- </nav>
683
+ <div class="pf-v6-c-page__sidebar-main">
684
+ <div class="pf-v6-c-page__sidebar-body">
685
+ <nav
686
+ class="pf-v6-c-nav"
687
+ id="jump-links-vertical-expanded-mobile-example-primary-nav"
688
+ aria-label="Global"
689
+ >
690
+ <ul class="pf-v6-c-nav__list" role="list">
691
+ <li class="pf-v6-c-nav__item">
692
+ <a href="#" class="pf-v6-c-nav__link">
693
+ <span class="pf-v6-c-nav__link-text">System panel</span>
694
+ </a>
695
+ </li>
696
+ <li class="pf-v6-c-nav__item">
697
+ <a
698
+ href="#"
699
+ class="pf-v6-c-nav__link pf-m-current"
700
+ aria-current="page"
701
+ >
702
+ <span class="pf-v6-c-nav__link-text">Policy</span>
703
+ </a>
704
+ </li>
705
+ <li class="pf-v6-c-nav__item">
706
+ <a href="#" class="pf-v6-c-nav__link">
707
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
708
+ </a>
709
+ </li>
710
+ <li class="pf-v6-c-nav__item">
711
+ <a href="#" class="pf-v6-c-nav__link">
712
+ <span class="pf-v6-c-nav__link-text">Network services</span>
713
+ </a>
714
+ </li>
715
+ <li class="pf-v6-c-nav__item">
716
+ <a href="#" class="pf-v6-c-nav__link">
717
+ <span class="pf-v6-c-nav__link-text">Server</span>
718
+ </a>
719
+ </li>
720
+ </ul>
721
+ </nav>
722
+ </div>
672
723
  </div>
673
724
  </div>
674
725
  <div class="pf-v6-c-page__main-container" tabindex="-1">
@@ -686,21 +737,57 @@ section: components
686
737
  </li>
687
738
  <li class="pf-v6-c-breadcrumb__item">
688
739
  <span class="pf-v6-c-breadcrumb__item-divider">
689
- <i class="fas fa-angle-right" aria-hidden="true"></i>
740
+ <svg
741
+ class="pf-v6-svg"
742
+ viewBox="0 0 20 20"
743
+ fill="currentColor"
744
+ aria-hidden="true"
745
+ role="img"
746
+ width="1em"
747
+ height="1em"
748
+ >
749
+ <path
750
+ 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"
751
+ />
752
+ </svg>
690
753
  </span>
691
754
 
692
755
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
693
756
  </li>
694
757
  <li class="pf-v6-c-breadcrumb__item">
695
758
  <span class="pf-v6-c-breadcrumb__item-divider">
696
- <i class="fas fa-angle-right" aria-hidden="true"></i>
759
+ <svg
760
+ class="pf-v6-svg"
761
+ viewBox="0 0 20 20"
762
+ fill="currentColor"
763
+ aria-hidden="true"
764
+ role="img"
765
+ width="1em"
766
+ height="1em"
767
+ >
768
+ <path
769
+ 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"
770
+ />
771
+ </svg>
697
772
  </span>
698
773
 
699
774
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
700
775
  </li>
701
776
  <li class="pf-v6-c-breadcrumb__item">
702
777
  <span class="pf-v6-c-breadcrumb__item-divider">
703
- <i class="fas fa-angle-right" aria-hidden="true"></i>
778
+ <svg
779
+ class="pf-v6-svg"
780
+ viewBox="0 0 20 20"
781
+ fill="currentColor"
782
+ aria-hidden="true"
783
+ role="img"
784
+ width="1em"
785
+ height="1em"
786
+ >
787
+ <path
788
+ 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"
789
+ />
790
+ </svg>
704
791
  </span>
705
792
 
706
793
  <a
@@ -738,10 +825,19 @@ section: components
738
825
  >
739
826
  <span class="pf-v6-c-button__icon pf-m-start">
740
827
  <span class="pf-v6-c-jump-links__toggle-icon">
741
- <i
742
- class="fas fa-angle-right"
828
+ <svg
829
+ class="pf-v6-svg"
830
+ viewBox="0 0 20 20"
831
+ fill="currentColor"
743
832
  aria-hidden="true"
744
- ></i>
833
+ role="img"
834
+ width="1em"
835
+ height="1em"
836
+ >
837
+ <path
838
+ d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
839
+ />
840
+ </svg>
745
841
  </span>
746
842
  </span>
747
843
  <span class="pf-v6-c-button__text">Jump to section</span>
@@ -883,9 +979,10 @@ section: components
883
979
  <span class="pf-v6-c-button__text">Skip to content</span>
884
980
  </a>
885
981
  </div>
982
+
886
983
  <header
887
984
  class="pf-v6-c-masthead"
888
- id="jump-links-vertical-toggle-text-mobile-example-masthead"
985
+ id="jump-links-vertical-toggle-text-mobile-example-docked"
889
986
  >
890
987
  <div class="pf-v6-c-masthead__main">
891
988
  <span class="pf-v6-c-masthead__toggle">
@@ -928,7 +1025,7 @@ section: components
928
1025
  y1="2.25860997e-13%"
929
1026
  x2="32%"
930
1027
  y2="100%"
931
- id="linearGradient-jump-links-vertical-toggle-text-mobile-example-masthead"
1028
+ id="linearGradient-jump-links-vertical-toggle-text-mobile-example-docked"
932
1029
  >
933
1030
  <stop stop-color="#2B9AF3" offset="0%" />
934
1031
  <stop
@@ -982,11 +1079,11 @@ section: components
982
1079
  />
983
1080
  <path
984
1081
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
985
- fill="url(#linearGradient-jump-links-vertical-toggle-text-mobile-example-masthead)"
1082
+ fill="url(#linearGradient-jump-links-vertical-toggle-text-mobile-example-docked)"
986
1083
  />
987
1084
  <path
988
1085
  d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z"
989
- fill="url(#linearGradient-jump-links-vertical-toggle-text-mobile-example-masthead)"
1086
+ fill="url(#linearGradient-jump-links-vertical-toggle-text-mobile-example-docked)"
990
1087
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
991
1088
  />
992
1089
  </g>
@@ -998,7 +1095,7 @@ section: components
998
1095
  <div class="pf-v6-c-masthead__content">
999
1096
  <div
1000
1097
  class="pf-v6-c-toolbar pf-m-static"
1001
- id="jump-links-vertical-toggle-text-mobile-example-masthead-toolbar"
1098
+ id="jump-links-vertical-toggle-text-mobile-example-docked-toolbar"
1002
1099
  >
1003
1100
  <div class="pf-v6-c-toolbar__content">
1004
1101
  <div class="pf-v6-c-toolbar__content-section">
@@ -1065,44 +1162,46 @@ section: components
1065
1162
  </div>
1066
1163
  </header>
1067
1164
  <div class="pf-v6-c-page__sidebar">
1068
- <div class="pf-v6-c-page__sidebar-body">
1069
- <nav
1070
- class="pf-v6-c-nav"
1071
- id="jump-links-vertical-toggle-text-mobile-example-primary-nav"
1072
- aria-label="Global"
1073
- >
1074
- <ul class="pf-v6-c-nav__list" role="list">
1075
- <li class="pf-v6-c-nav__item">
1076
- <a href="#" class="pf-v6-c-nav__link">
1077
- <span class="pf-v6-c-nav__link-text">System panel</span>
1078
- </a>
1079
- </li>
1080
- <li class="pf-v6-c-nav__item">
1081
- <a
1082
- href="#"
1083
- class="pf-v6-c-nav__link pf-m-current"
1084
- aria-current="page"
1085
- >
1086
- <span class="pf-v6-c-nav__link-text">Policy</span>
1087
- </a>
1088
- </li>
1089
- <li class="pf-v6-c-nav__item">
1090
- <a href="#" class="pf-v6-c-nav__link">
1091
- <span class="pf-v6-c-nav__link-text">Authentication</span>
1092
- </a>
1093
- </li>
1094
- <li class="pf-v6-c-nav__item">
1095
- <a href="#" class="pf-v6-c-nav__link">
1096
- <span class="pf-v6-c-nav__link-text">Network services</span>
1097
- </a>
1098
- </li>
1099
- <li class="pf-v6-c-nav__item">
1100
- <a href="#" class="pf-v6-c-nav__link">
1101
- <span class="pf-v6-c-nav__link-text">Server</span>
1102
- </a>
1103
- </li>
1104
- </ul>
1105
- </nav>
1165
+ <div class="pf-v6-c-page__sidebar-main">
1166
+ <div class="pf-v6-c-page__sidebar-body">
1167
+ <nav
1168
+ class="pf-v6-c-nav"
1169
+ id="jump-links-vertical-toggle-text-mobile-example-primary-nav"
1170
+ aria-label="Global"
1171
+ >
1172
+ <ul class="pf-v6-c-nav__list" role="list">
1173
+ <li class="pf-v6-c-nav__item">
1174
+ <a href="#" class="pf-v6-c-nav__link">
1175
+ <span class="pf-v6-c-nav__link-text">System panel</span>
1176
+ </a>
1177
+ </li>
1178
+ <li class="pf-v6-c-nav__item">
1179
+ <a
1180
+ href="#"
1181
+ class="pf-v6-c-nav__link pf-m-current"
1182
+ aria-current="page"
1183
+ >
1184
+ <span class="pf-v6-c-nav__link-text">Policy</span>
1185
+ </a>
1186
+ </li>
1187
+ <li class="pf-v6-c-nav__item">
1188
+ <a href="#" class="pf-v6-c-nav__link">
1189
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
1190
+ </a>
1191
+ </li>
1192
+ <li class="pf-v6-c-nav__item">
1193
+ <a href="#" class="pf-v6-c-nav__link">
1194
+ <span class="pf-v6-c-nav__link-text">Network services</span>
1195
+ </a>
1196
+ </li>
1197
+ <li class="pf-v6-c-nav__item">
1198
+ <a href="#" class="pf-v6-c-nav__link">
1199
+ <span class="pf-v6-c-nav__link-text">Server</span>
1200
+ </a>
1201
+ </li>
1202
+ </ul>
1203
+ </nav>
1204
+ </div>
1106
1205
  </div>
1107
1206
  </div>
1108
1207
  <div class="pf-v6-c-page__main-container" tabindex="-1">
@@ -1120,21 +1219,57 @@ section: components
1120
1219
  </li>
1121
1220
  <li class="pf-v6-c-breadcrumb__item">
1122
1221
  <span class="pf-v6-c-breadcrumb__item-divider">
1123
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1222
+ <svg
1223
+ class="pf-v6-svg"
1224
+ viewBox="0 0 20 20"
1225
+ fill="currentColor"
1226
+ aria-hidden="true"
1227
+ role="img"
1228
+ width="1em"
1229
+ height="1em"
1230
+ >
1231
+ <path
1232
+ 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"
1233
+ />
1234
+ </svg>
1124
1235
  </span>
1125
1236
 
1126
1237
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1127
1238
  </li>
1128
1239
  <li class="pf-v6-c-breadcrumb__item">
1129
1240
  <span class="pf-v6-c-breadcrumb__item-divider">
1130
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1241
+ <svg
1242
+ class="pf-v6-svg"
1243
+ viewBox="0 0 20 20"
1244
+ fill="currentColor"
1245
+ aria-hidden="true"
1246
+ role="img"
1247
+ width="1em"
1248
+ height="1em"
1249
+ >
1250
+ <path
1251
+ 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"
1252
+ />
1253
+ </svg>
1131
1254
  </span>
1132
1255
 
1133
1256
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1134
1257
  </li>
1135
1258
  <li class="pf-v6-c-breadcrumb__item">
1136
1259
  <span class="pf-v6-c-breadcrumb__item-divider">
1137
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1260
+ <svg
1261
+ class="pf-v6-svg"
1262
+ viewBox="0 0 20 20"
1263
+ fill="currentColor"
1264
+ aria-hidden="true"
1265
+ role="img"
1266
+ width="1em"
1267
+ height="1em"
1268
+ >
1269
+ <path
1270
+ 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"
1271
+ />
1272
+ </svg>
1138
1273
  </span>
1139
1274
 
1140
1275
  <a
@@ -1172,10 +1307,19 @@ section: components
1172
1307
  >
1173
1308
  <span class="pf-v6-c-button__icon pf-m-start">
1174
1309
  <span class="pf-v6-c-jump-links__toggle-icon">
1175
- <i
1176
- class="fas fa-angle-right"
1310
+ <svg
1311
+ class="pf-v6-svg"
1312
+ viewBox="0 0 20 20"
1313
+ fill="currentColor"
1177
1314
  aria-hidden="true"
1178
- ></i>
1315
+ role="img"
1316
+ width="1em"
1317
+ height="1em"
1318
+ >
1319
+ <path
1320
+ d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
1321
+ />
1322
+ </svg>
1179
1323
  </span>
1180
1324
  </span>
1181
1325
  <span class="pf-v6-c-button__text">Jump to section</span>
@@ -1317,7 +1461,8 @@ section: components
1317
1461
  <span class="pf-v6-c-button__text">Skip to content</span>
1318
1462
  </a>
1319
1463
  </div>
1320
- <header class="pf-v6-c-masthead" id="jump-links-horizontal-example-masthead">
1464
+
1465
+ <header class="pf-v6-c-masthead" id="jump-links-horizontal-example-docked">
1321
1466
  <div class="pf-v6-c-masthead__main">
1322
1467
  <span class="pf-v6-c-masthead__toggle">
1323
1468
  <button
@@ -1359,7 +1504,7 @@ section: components
1359
1504
  y1="2.25860997e-13%"
1360
1505
  x2="32%"
1361
1506
  y2="100%"
1362
- id="linearGradient-jump-links-horizontal-example-masthead"
1507
+ id="linearGradient-jump-links-horizontal-example-docked"
1363
1508
  >
1364
1509
  <stop stop-color="#2B9AF3" offset="0%" />
1365
1510
  <stop
@@ -1413,11 +1558,11 @@ section: components
1413
1558
  />
1414
1559
  <path
1415
1560
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
1416
- fill="url(#linearGradient-jump-links-horizontal-example-masthead)"
1561
+ fill="url(#linearGradient-jump-links-horizontal-example-docked)"
1417
1562
  />
1418
1563
  <path
1419
1564
  d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z"
1420
- fill="url(#linearGradient-jump-links-horizontal-example-masthead)"
1565
+ fill="url(#linearGradient-jump-links-horizontal-example-docked)"
1421
1566
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
1422
1567
  />
1423
1568
  </g>
@@ -1429,7 +1574,7 @@ section: components
1429
1574
  <div class="pf-v6-c-masthead__content">
1430
1575
  <div
1431
1576
  class="pf-v6-c-toolbar pf-m-static"
1432
- id="jump-links-horizontal-example-masthead-toolbar"
1577
+ id="jump-links-horizontal-example-docked-toolbar"
1433
1578
  >
1434
1579
  <div class="pf-v6-c-toolbar__content">
1435
1580
  <div class="pf-v6-c-toolbar__content-section">
@@ -1496,44 +1641,46 @@ section: components
1496
1641
  </div>
1497
1642
  </header>
1498
1643
  <div class="pf-v6-c-page__sidebar">
1499
- <div class="pf-v6-c-page__sidebar-body">
1500
- <nav
1501
- class="pf-v6-c-nav"
1502
- id="jump-links-horizontal-example-primary-nav"
1503
- aria-label="Global"
1504
- >
1505
- <ul class="pf-v6-c-nav__list" role="list">
1506
- <li class="pf-v6-c-nav__item">
1507
- <a href="#" class="pf-v6-c-nav__link">
1508
- <span class="pf-v6-c-nav__link-text">System panel</span>
1509
- </a>
1510
- </li>
1511
- <li class="pf-v6-c-nav__item">
1512
- <a
1513
- href="#"
1514
- class="pf-v6-c-nav__link pf-m-current"
1515
- aria-current="page"
1516
- >
1517
- <span class="pf-v6-c-nav__link-text">Policy</span>
1518
- </a>
1519
- </li>
1520
- <li class="pf-v6-c-nav__item">
1521
- <a href="#" class="pf-v6-c-nav__link">
1522
- <span class="pf-v6-c-nav__link-text">Authentication</span>
1523
- </a>
1524
- </li>
1525
- <li class="pf-v6-c-nav__item">
1526
- <a href="#" class="pf-v6-c-nav__link">
1527
- <span class="pf-v6-c-nav__link-text">Network services</span>
1528
- </a>
1529
- </li>
1530
- <li class="pf-v6-c-nav__item">
1531
- <a href="#" class="pf-v6-c-nav__link">
1532
- <span class="pf-v6-c-nav__link-text">Server</span>
1533
- </a>
1534
- </li>
1535
- </ul>
1536
- </nav>
1644
+ <div class="pf-v6-c-page__sidebar-main">
1645
+ <div class="pf-v6-c-page__sidebar-body">
1646
+ <nav
1647
+ class="pf-v6-c-nav"
1648
+ id="jump-links-horizontal-example-primary-nav"
1649
+ aria-label="Global"
1650
+ >
1651
+ <ul class="pf-v6-c-nav__list" role="list">
1652
+ <li class="pf-v6-c-nav__item">
1653
+ <a href="#" class="pf-v6-c-nav__link">
1654
+ <span class="pf-v6-c-nav__link-text">System panel</span>
1655
+ </a>
1656
+ </li>
1657
+ <li class="pf-v6-c-nav__item">
1658
+ <a
1659
+ href="#"
1660
+ class="pf-v6-c-nav__link pf-m-current"
1661
+ aria-current="page"
1662
+ >
1663
+ <span class="pf-v6-c-nav__link-text">Policy</span>
1664
+ </a>
1665
+ </li>
1666
+ <li class="pf-v6-c-nav__item">
1667
+ <a href="#" class="pf-v6-c-nav__link">
1668
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
1669
+ </a>
1670
+ </li>
1671
+ <li class="pf-v6-c-nav__item">
1672
+ <a href="#" class="pf-v6-c-nav__link">
1673
+ <span class="pf-v6-c-nav__link-text">Network services</span>
1674
+ </a>
1675
+ </li>
1676
+ <li class="pf-v6-c-nav__item">
1677
+ <a href="#" class="pf-v6-c-nav__link">
1678
+ <span class="pf-v6-c-nav__link-text">Server</span>
1679
+ </a>
1680
+ </li>
1681
+ </ul>
1682
+ </nav>
1683
+ </div>
1537
1684
  </div>
1538
1685
  </div>
1539
1686
  <div class="pf-v6-c-page__main-container" tabindex="-1">
@@ -1551,21 +1698,57 @@ section: components
1551
1698
  </li>
1552
1699
  <li class="pf-v6-c-breadcrumb__item">
1553
1700
  <span class="pf-v6-c-breadcrumb__item-divider">
1554
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1701
+ <svg
1702
+ class="pf-v6-svg"
1703
+ viewBox="0 0 20 20"
1704
+ fill="currentColor"
1705
+ aria-hidden="true"
1706
+ role="img"
1707
+ width="1em"
1708
+ height="1em"
1709
+ >
1710
+ <path
1711
+ 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"
1712
+ />
1713
+ </svg>
1555
1714
  </span>
1556
1715
 
1557
1716
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1558
1717
  </li>
1559
1718
  <li class="pf-v6-c-breadcrumb__item">
1560
1719
  <span class="pf-v6-c-breadcrumb__item-divider">
1561
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1720
+ <svg
1721
+ class="pf-v6-svg"
1722
+ viewBox="0 0 20 20"
1723
+ fill="currentColor"
1724
+ aria-hidden="true"
1725
+ role="img"
1726
+ width="1em"
1727
+ height="1em"
1728
+ >
1729
+ <path
1730
+ 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"
1731
+ />
1732
+ </svg>
1562
1733
  </span>
1563
1734
 
1564
1735
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1565
1736
  </li>
1566
1737
  <li class="pf-v6-c-breadcrumb__item">
1567
1738
  <span class="pf-v6-c-breadcrumb__item-divider">
1568
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1739
+ <svg
1740
+ class="pf-v6-svg"
1741
+ viewBox="0 0 20 20"
1742
+ fill="currentColor"
1743
+ aria-hidden="true"
1744
+ role="img"
1745
+ width="1em"
1746
+ height="1em"
1747
+ >
1748
+ <path
1749
+ 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"
1750
+ />
1751
+ </svg>
1569
1752
  </span>
1570
1753
 
1571
1754
  <a
@@ -1694,7 +1877,8 @@ section: components
1694
1877
  <span class="pf-v6-c-button__text">Skip to content</span>
1695
1878
  </a>
1696
1879
  </div>
1697
- <header class="pf-v6-c-masthead" id="jump-links-drawer-masthead">
1880
+
1881
+ <header class="pf-v6-c-masthead" id="jump-links-drawer-docked">
1698
1882
  <div class="pf-v6-c-masthead__main">
1699
1883
  <span class="pf-v6-c-masthead__toggle">
1700
1884
  <button
@@ -1736,7 +1920,7 @@ section: components
1736
1920
  y1="2.25860997e-13%"
1737
1921
  x2="32%"
1738
1922
  y2="100%"
1739
- id="linearGradient-jump-links-drawer-masthead"
1923
+ id="linearGradient-jump-links-drawer-docked"
1740
1924
  >
1741
1925
  <stop stop-color="#2B9AF3" offset="0%" />
1742
1926
  <stop
@@ -1790,11 +1974,11 @@ section: components
1790
1974
  />
1791
1975
  <path
1792
1976
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
1793
- fill="url(#linearGradient-jump-links-drawer-masthead)"
1977
+ fill="url(#linearGradient-jump-links-drawer-docked)"
1794
1978
  />
1795
1979
  <path
1796
1980
  d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z"
1797
- fill="url(#linearGradient-jump-links-drawer-masthead)"
1981
+ fill="url(#linearGradient-jump-links-drawer-docked)"
1798
1982
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
1799
1983
  />
1800
1984
  </g>
@@ -1806,7 +1990,7 @@ section: components
1806
1990
  <div class="pf-v6-c-masthead__content">
1807
1991
  <div
1808
1992
  class="pf-v6-c-toolbar pf-m-static"
1809
- id="jump-links-drawer-masthead-toolbar"
1993
+ id="jump-links-drawer-docked-toolbar"
1810
1994
  >
1811
1995
  <div class="pf-v6-c-toolbar__content">
1812
1996
  <div class="pf-v6-c-toolbar__content-section">
@@ -1873,44 +2057,46 @@ section: components
1873
2057
  </div>
1874
2058
  </header>
1875
2059
  <div class="pf-v6-c-page__sidebar">
1876
- <div class="pf-v6-c-page__sidebar-body">
1877
- <nav
1878
- class="pf-v6-c-nav"
1879
- id="jump-links-drawer-primary-nav"
1880
- aria-label="Global"
1881
- >
1882
- <ul class="pf-v6-c-nav__list" role="list">
1883
- <li class="pf-v6-c-nav__item">
1884
- <a href="#" class="pf-v6-c-nav__link">
1885
- <span class="pf-v6-c-nav__link-text">System panel</span>
1886
- </a>
1887
- </li>
1888
- <li class="pf-v6-c-nav__item">
1889
- <a
1890
- href="#"
1891
- class="pf-v6-c-nav__link pf-m-current"
1892
- aria-current="page"
1893
- >
1894
- <span class="pf-v6-c-nav__link-text">Policy</span>
1895
- </a>
1896
- </li>
1897
- <li class="pf-v6-c-nav__item">
1898
- <a href="#" class="pf-v6-c-nav__link">
1899
- <span class="pf-v6-c-nav__link-text">Authentication</span>
1900
- </a>
1901
- </li>
1902
- <li class="pf-v6-c-nav__item">
1903
- <a href="#" class="pf-v6-c-nav__link">
1904
- <span class="pf-v6-c-nav__link-text">Network services</span>
1905
- </a>
1906
- </li>
1907
- <li class="pf-v6-c-nav__item">
1908
- <a href="#" class="pf-v6-c-nav__link">
1909
- <span class="pf-v6-c-nav__link-text">Server</span>
1910
- </a>
1911
- </li>
1912
- </ul>
1913
- </nav>
2060
+ <div class="pf-v6-c-page__sidebar-main">
2061
+ <div class="pf-v6-c-page__sidebar-body">
2062
+ <nav
2063
+ class="pf-v6-c-nav"
2064
+ id="jump-links-drawer-primary-nav"
2065
+ aria-label="Global"
2066
+ >
2067
+ <ul class="pf-v6-c-nav__list" role="list">
2068
+ <li class="pf-v6-c-nav__item">
2069
+ <a href="#" class="pf-v6-c-nav__link">
2070
+ <span class="pf-v6-c-nav__link-text">System panel</span>
2071
+ </a>
2072
+ </li>
2073
+ <li class="pf-v6-c-nav__item">
2074
+ <a
2075
+ href="#"
2076
+ class="pf-v6-c-nav__link pf-m-current"
2077
+ aria-current="page"
2078
+ >
2079
+ <span class="pf-v6-c-nav__link-text">Policy</span>
2080
+ </a>
2081
+ </li>
2082
+ <li class="pf-v6-c-nav__item">
2083
+ <a href="#" class="pf-v6-c-nav__link">
2084
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
2085
+ </a>
2086
+ </li>
2087
+ <li class="pf-v6-c-nav__item">
2088
+ <a href="#" class="pf-v6-c-nav__link">
2089
+ <span class="pf-v6-c-nav__link-text">Network services</span>
2090
+ </a>
2091
+ </li>
2092
+ <li class="pf-v6-c-nav__item">
2093
+ <a href="#" class="pf-v6-c-nav__link">
2094
+ <span class="pf-v6-c-nav__link-text">Server</span>
2095
+ </a>
2096
+ </li>
2097
+ </ul>
2098
+ </nav>
2099
+ </div>
1914
2100
  </div>
1915
2101
  </div>
1916
2102
  <div class="pf-v6-c-page__main-container" tabindex="-1">
@@ -1943,10 +2129,19 @@ section: components
1943
2129
  >
1944
2130
  <span class="pf-v6-c-button__icon pf-m-start">
1945
2131
  <span class="pf-v6-c-jump-links__toggle-icon">
1946
- <i
1947
- class="fas fa-angle-right"
2132
+ <svg
2133
+ class="pf-v6-svg"
2134
+ viewBox="0 0 20 20"
2135
+ fill="currentColor"
1948
2136
  aria-hidden="true"
1949
- ></i>
2137
+ role="img"
2138
+ width="1em"
2139
+ height="1em"
2140
+ >
2141
+ <path
2142
+ d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
2143
+ />
2144
+ </svg>
1950
2145
  </span>
1951
2146
  </span>
1952
2147
  <span
@@ -2085,7 +2280,19 @@ section: components
2085
2280
  aria-label="Close drawer panel"
2086
2281
  >
2087
2282
  <span class="pf-v6-c-button__icon">
2088
- <i class="fas fa-times" aria-hidden="true"></i>
2283
+ <svg
2284
+ class="pf-v6-svg"
2285
+ viewBox="0 0 20 20"
2286
+ fill="currentColor"
2287
+ aria-hidden="true"
2288
+ role="img"
2289
+ width="1em"
2290
+ height="1em"
2291
+ >
2292
+ <path
2293
+ 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"
2294
+ />
2295
+ </svg>
2089
2296
  </span>
2090
2297
  </button>
2091
2298
  </div>
@@ -2116,7 +2323,8 @@ section: components
2116
2323
  <span class="pf-v6-c-button__text">Skip to content</span>
2117
2324
  </a>
2118
2325
  </div>
2119
- <header class="pf-v6-c-masthead" id="jump-links-drawer-expanded-masthead">
2326
+
2327
+ <header class="pf-v6-c-masthead" id="jump-links-drawer-expanded-docked">
2120
2328
  <div class="pf-v6-c-masthead__main">
2121
2329
  <span class="pf-v6-c-masthead__toggle">
2122
2330
  <button
@@ -2158,7 +2366,7 @@ section: components
2158
2366
  y1="2.25860997e-13%"
2159
2367
  x2="32%"
2160
2368
  y2="100%"
2161
- id="linearGradient-jump-links-drawer-expanded-masthead"
2369
+ id="linearGradient-jump-links-drawer-expanded-docked"
2162
2370
  >
2163
2371
  <stop stop-color="#2B9AF3" offset="0%" />
2164
2372
  <stop
@@ -2212,11 +2420,11 @@ section: components
2212
2420
  />
2213
2421
  <path
2214
2422
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
2215
- fill="url(#linearGradient-jump-links-drawer-expanded-masthead)"
2423
+ fill="url(#linearGradient-jump-links-drawer-expanded-docked)"
2216
2424
  />
2217
2425
  <path
2218
2426
  d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z"
2219
- fill="url(#linearGradient-jump-links-drawer-expanded-masthead)"
2427
+ fill="url(#linearGradient-jump-links-drawer-expanded-docked)"
2220
2428
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
2221
2429
  />
2222
2430
  </g>
@@ -2228,7 +2436,7 @@ section: components
2228
2436
  <div class="pf-v6-c-masthead__content">
2229
2437
  <div
2230
2438
  class="pf-v6-c-toolbar pf-m-static"
2231
- id="jump-links-drawer-expanded-masthead-toolbar"
2439
+ id="jump-links-drawer-expanded-docked-toolbar"
2232
2440
  >
2233
2441
  <div class="pf-v6-c-toolbar__content">
2234
2442
  <div class="pf-v6-c-toolbar__content-section">
@@ -2295,44 +2503,46 @@ section: components
2295
2503
  </div>
2296
2504
  </header>
2297
2505
  <div class="pf-v6-c-page__sidebar">
2298
- <div class="pf-v6-c-page__sidebar-body">
2299
- <nav
2300
- class="pf-v6-c-nav"
2301
- id="jump-links-drawer-expanded-primary-nav"
2302
- aria-label="Global"
2303
- >
2304
- <ul class="pf-v6-c-nav__list" role="list">
2305
- <li class="pf-v6-c-nav__item">
2306
- <a href="#" class="pf-v6-c-nav__link">
2307
- <span class="pf-v6-c-nav__link-text">System panel</span>
2308
- </a>
2309
- </li>
2310
- <li class="pf-v6-c-nav__item">
2311
- <a
2312
- href="#"
2313
- class="pf-v6-c-nav__link pf-m-current"
2314
- aria-current="page"
2315
- >
2316
- <span class="pf-v6-c-nav__link-text">Policy</span>
2317
- </a>
2318
- </li>
2319
- <li class="pf-v6-c-nav__item">
2320
- <a href="#" class="pf-v6-c-nav__link">
2321
- <span class="pf-v6-c-nav__link-text">Authentication</span>
2322
- </a>
2323
- </li>
2324
- <li class="pf-v6-c-nav__item">
2325
- <a href="#" class="pf-v6-c-nav__link">
2326
- <span class="pf-v6-c-nav__link-text">Network services</span>
2327
- </a>
2328
- </li>
2329
- <li class="pf-v6-c-nav__item">
2330
- <a href="#" class="pf-v6-c-nav__link">
2331
- <span class="pf-v6-c-nav__link-text">Server</span>
2332
- </a>
2333
- </li>
2334
- </ul>
2335
- </nav>
2506
+ <div class="pf-v6-c-page__sidebar-main">
2507
+ <div class="pf-v6-c-page__sidebar-body">
2508
+ <nav
2509
+ class="pf-v6-c-nav"
2510
+ id="jump-links-drawer-expanded-primary-nav"
2511
+ aria-label="Global"
2512
+ >
2513
+ <ul class="pf-v6-c-nav__list" role="list">
2514
+ <li class="pf-v6-c-nav__item">
2515
+ <a href="#" class="pf-v6-c-nav__link">
2516
+ <span class="pf-v6-c-nav__link-text">System panel</span>
2517
+ </a>
2518
+ </li>
2519
+ <li class="pf-v6-c-nav__item">
2520
+ <a
2521
+ href="#"
2522
+ class="pf-v6-c-nav__link pf-m-current"
2523
+ aria-current="page"
2524
+ >
2525
+ <span class="pf-v6-c-nav__link-text">Policy</span>
2526
+ </a>
2527
+ </li>
2528
+ <li class="pf-v6-c-nav__item">
2529
+ <a href="#" class="pf-v6-c-nav__link">
2530
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
2531
+ </a>
2532
+ </li>
2533
+ <li class="pf-v6-c-nav__item">
2534
+ <a href="#" class="pf-v6-c-nav__link">
2535
+ <span class="pf-v6-c-nav__link-text">Network services</span>
2536
+ </a>
2537
+ </li>
2538
+ <li class="pf-v6-c-nav__item">
2539
+ <a href="#" class="pf-v6-c-nav__link">
2540
+ <span class="pf-v6-c-nav__link-text">Server</span>
2541
+ </a>
2542
+ </li>
2543
+ </ul>
2544
+ </nav>
2545
+ </div>
2336
2546
  </div>
2337
2547
  </div>
2338
2548
  <div class="pf-v6-c-page__main-container" tabindex="-1">
@@ -2365,10 +2575,19 @@ section: components
2365
2575
  >
2366
2576
  <span class="pf-v6-c-button__icon pf-m-start">
2367
2577
  <span class="pf-v6-c-jump-links__toggle-icon">
2368
- <i
2369
- class="fas fa-angle-right"
2578
+ <svg
2579
+ class="pf-v6-svg"
2580
+ viewBox="0 0 20 20"
2581
+ fill="currentColor"
2370
2582
  aria-hidden="true"
2371
- ></i>
2583
+ role="img"
2584
+ width="1em"
2585
+ height="1em"
2586
+ >
2587
+ <path
2588
+ d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
2589
+ />
2590
+ </svg>
2372
2591
  </span>
2373
2592
  </span>
2374
2593
  <span
@@ -2507,7 +2726,19 @@ section: components
2507
2726
  aria-label="Close drawer panel"
2508
2727
  >
2509
2728
  <span class="pf-v6-c-button__icon">
2510
- <i class="fas fa-times" aria-hidden="true"></i>
2729
+ <svg
2730
+ class="pf-v6-svg"
2731
+ viewBox="0 0 20 20"
2732
+ fill="currentColor"
2733
+ aria-hidden="true"
2734
+ role="img"
2735
+ width="1em"
2736
+ height="1em"
2737
+ >
2738
+ <path
2739
+ 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"
2740
+ />
2741
+ </svg>
2511
2742
  </span>
2512
2743
  </button>
2513
2744
  </div>