@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/Wizard/examples/Wizard.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="wizard-basic-example-masthead">
19
+
20
+ <header class="pf-v6-c-masthead" id="wizard-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-wizard-basic-example-masthead"
62
+ id="linearGradient-wizard-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-wizard-basic-example-masthead)"
116
+ fill="url(#linearGradient-wizard-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-wizard-basic-example-masthead)"
120
+ fill="url(#linearGradient-wizard-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="wizard-basic-example-masthead-toolbar"
132
+ id="wizard-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">
@@ -195,44 +196,46 @@ wrapperTag: div
195
196
  </div>
196
197
  </header>
197
198
  <div class="pf-v6-c-page__sidebar">
198
- <div class="pf-v6-c-page__sidebar-body">
199
- <nav
200
- class="pf-v6-c-nav"
201
- id="wizard-basic-example-primary-nav"
202
- aria-label="Global"
203
- >
204
- <ul class="pf-v6-c-nav__list" role="list">
205
- <li class="pf-v6-c-nav__item">
206
- <a href="#" class="pf-v6-c-nav__link">
207
- <span class="pf-v6-c-nav__link-text">System panel</span>
208
- </a>
209
- </li>
210
- <li class="pf-v6-c-nav__item">
211
- <a
212
- href="#"
213
- class="pf-v6-c-nav__link pf-m-current"
214
- aria-current="page"
215
- >
216
- <span class="pf-v6-c-nav__link-text">Policy</span>
217
- </a>
218
- </li>
219
- <li class="pf-v6-c-nav__item">
220
- <a href="#" class="pf-v6-c-nav__link">
221
- <span class="pf-v6-c-nav__link-text">Authentication</span>
222
- </a>
223
- </li>
224
- <li class="pf-v6-c-nav__item">
225
- <a href="#" class="pf-v6-c-nav__link">
226
- <span class="pf-v6-c-nav__link-text">Network services</span>
227
- </a>
228
- </li>
229
- <li class="pf-v6-c-nav__item">
230
- <a href="#" class="pf-v6-c-nav__link">
231
- <span class="pf-v6-c-nav__link-text">Server</span>
232
- </a>
233
- </li>
234
- </ul>
235
- </nav>
199
+ <div class="pf-v6-c-page__sidebar-main">
200
+ <div class="pf-v6-c-page__sidebar-body">
201
+ <nav
202
+ class="pf-v6-c-nav"
203
+ id="wizard-basic-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>
238
+ </div>
236
239
  </div>
237
240
  </div>
238
241
  <div class="pf-v6-c-page__main-container" tabindex="-1">
@@ -250,21 +253,57 @@ wrapperTag: div
250
253
  </li>
251
254
  <li class="pf-v6-c-breadcrumb__item">
252
255
  <span class="pf-v6-c-breadcrumb__item-divider">
253
- <i class="fas fa-angle-right" aria-hidden="true"></i>
256
+ <svg
257
+ class="pf-v6-svg"
258
+ viewBox="0 0 20 20"
259
+ fill="currentColor"
260
+ aria-hidden="true"
261
+ role="img"
262
+ width="1em"
263
+ height="1em"
264
+ >
265
+ <path
266
+ 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"
267
+ />
268
+ </svg>
254
269
  </span>
255
270
 
256
271
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
257
272
  </li>
258
273
  <li class="pf-v6-c-breadcrumb__item">
259
274
  <span class="pf-v6-c-breadcrumb__item-divider">
260
- <i class="fas fa-angle-right" aria-hidden="true"></i>
275
+ <svg
276
+ class="pf-v6-svg"
277
+ viewBox="0 0 20 20"
278
+ fill="currentColor"
279
+ aria-hidden="true"
280
+ role="img"
281
+ width="1em"
282
+ height="1em"
283
+ >
284
+ <path
285
+ 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"
286
+ />
287
+ </svg>
261
288
  </span>
262
289
 
263
290
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
264
291
  </li>
265
292
  <li class="pf-v6-c-breadcrumb__item">
266
293
  <span class="pf-v6-c-breadcrumb__item-divider">
267
- <i class="fas fa-angle-right" aria-hidden="true"></i>
294
+ <svg
295
+ class="pf-v6-svg"
296
+ viewBox="0 0 20 20"
297
+ fill="currentColor"
298
+ aria-hidden="true"
299
+ role="img"
300
+ width="1em"
301
+ height="1em"
302
+ >
303
+ <path
304
+ 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"
305
+ />
306
+ </svg>
268
307
  </span>
269
308
 
270
309
  <a
@@ -339,7 +378,19 @@ wrapperTag: div
339
378
  aria-label="Close"
340
379
  >
341
380
  <span class="pf-v6-c-button__icon">
342
- <i class="fas fa-times" aria-hidden="true"></i>
381
+ <svg
382
+ class="pf-v6-svg"
383
+ viewBox="0 0 20 20"
384
+ fill="currentColor"
385
+ aria-hidden="true"
386
+ role="img"
387
+ width="1em"
388
+ height="1em"
389
+ >
390
+ <path
391
+ 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"
392
+ />
393
+ </svg>
343
394
  </span>
344
395
  </button>
345
396
  </div>
@@ -359,10 +410,23 @@ wrapperTag: div
359
410
  <span class="pf-v6-c-wizard__toggle-list-item">
360
411
  <span class="pf-v6-c-wizard__toggle-num">2</span>
361
412
  Configuration
362
- <i
363
- class="fas fa-angle-right pf-v6-c-wizard__toggle-separator"
364
- aria-hidden="true"
365
- ></i>
413
+ <span
414
+ class="pf-v6-c-wizard__toggle-separator"
415
+ >
416
+ <svg
417
+ class="pf-v6-svg"
418
+ viewBox="0 0 20 20"
419
+ fill="currentColor"
420
+ aria-hidden="true"
421
+ role="img"
422
+ width="1em"
423
+ height="1em"
424
+ >
425
+ <path
426
+ 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"
427
+ />
428
+ </svg>
429
+ </span>
366
430
  </span>
367
431
  <span class="pf-v6-c-wizard__toggle-list-item">Substep B</span>
368
432
  </span>
@@ -393,7 +457,19 @@ wrapperTag: div
393
457
  <span class="pf-v6-c-wizard__nav-link-text">Configuration</span>
394
458
  <span class="pf-v6-c-wizard__nav-link-toggle">
395
459
  <span class="pf-v6-c-wizard__nav-link-toggle-icon">
396
- <i class="fas fa-angle-right" aria-hidden="true"></i>
460
+ <svg
461
+ class="pf-v6-svg"
462
+ viewBox="0 0 20 20"
463
+ fill="currentColor"
464
+ aria-hidden="true"
465
+ role="img"
466
+ width="1em"
467
+ height="1em"
468
+ >
469
+ <path
470
+ 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"
471
+ />
472
+ </svg>
397
473
  </span>
398
474
  </span>
399
475
  </span>
@@ -637,7 +713,8 @@ wrapperTag: div
637
713
  <span class="pf-v6-c-button__text">Skip to content</span>
638
714
  </a>
639
715
  </div>
640
- <header class="pf-v6-c-masthead" id="wizard-nav-expanded-example-masthead">
716
+
717
+ <header class="pf-v6-c-masthead" id="wizard-nav-expanded-example-docked">
641
718
  <div class="pf-v6-c-masthead__main">
642
719
  <span class="pf-v6-c-masthead__toggle">
643
720
  <button
@@ -679,7 +756,7 @@ wrapperTag: div
679
756
  y1="2.25860997e-13%"
680
757
  x2="32%"
681
758
  y2="100%"
682
- id="linearGradient-wizard-nav-expanded-example-masthead"
759
+ id="linearGradient-wizard-nav-expanded-example-docked"
683
760
  >
684
761
  <stop stop-color="#2B9AF3" offset="0%" />
685
762
  <stop
@@ -733,11 +810,11 @@ wrapperTag: div
733
810
  />
734
811
  <path
735
812
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
736
- fill="url(#linearGradient-wizard-nav-expanded-example-masthead)"
813
+ fill="url(#linearGradient-wizard-nav-expanded-example-docked)"
737
814
  />
738
815
  <path
739
816
  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"
740
- fill="url(#linearGradient-wizard-nav-expanded-example-masthead)"
817
+ fill="url(#linearGradient-wizard-nav-expanded-example-docked)"
741
818
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
742
819
  />
743
820
  </g>
@@ -749,7 +826,7 @@ wrapperTag: div
749
826
  <div class="pf-v6-c-masthead__content">
750
827
  <div
751
828
  class="pf-v6-c-toolbar pf-m-static"
752
- id="wizard-nav-expanded-example-masthead-toolbar"
829
+ id="wizard-nav-expanded-example-docked-toolbar"
753
830
  >
754
831
  <div class="pf-v6-c-toolbar__content">
755
832
  <div class="pf-v6-c-toolbar__content-section">
@@ -816,44 +893,46 @@ wrapperTag: div
816
893
  </div>
817
894
  </header>
818
895
  <div class="pf-v6-c-page__sidebar">
819
- <div class="pf-v6-c-page__sidebar-body">
820
- <nav
821
- class="pf-v6-c-nav"
822
- id="wizard-nav-expanded-example-primary-nav"
823
- aria-label="Global"
824
- >
825
- <ul class="pf-v6-c-nav__list" role="list">
826
- <li class="pf-v6-c-nav__item">
827
- <a href="#" class="pf-v6-c-nav__link">
828
- <span class="pf-v6-c-nav__link-text">System panel</span>
829
- </a>
830
- </li>
831
- <li class="pf-v6-c-nav__item">
832
- <a
833
- href="#"
834
- class="pf-v6-c-nav__link pf-m-current"
835
- aria-current="page"
836
- >
837
- <span class="pf-v6-c-nav__link-text">Policy</span>
838
- </a>
839
- </li>
840
- <li class="pf-v6-c-nav__item">
841
- <a href="#" class="pf-v6-c-nav__link">
842
- <span class="pf-v6-c-nav__link-text">Authentication</span>
843
- </a>
844
- </li>
845
- <li class="pf-v6-c-nav__item">
846
- <a href="#" class="pf-v6-c-nav__link">
847
- <span class="pf-v6-c-nav__link-text">Network services</span>
848
- </a>
849
- </li>
850
- <li class="pf-v6-c-nav__item">
851
- <a href="#" class="pf-v6-c-nav__link">
852
- <span class="pf-v6-c-nav__link-text">Server</span>
853
- </a>
854
- </li>
855
- </ul>
856
- </nav>
896
+ <div class="pf-v6-c-page__sidebar-main">
897
+ <div class="pf-v6-c-page__sidebar-body">
898
+ <nav
899
+ class="pf-v6-c-nav"
900
+ id="wizard-nav-expanded-example-primary-nav"
901
+ aria-label="Global"
902
+ >
903
+ <ul class="pf-v6-c-nav__list" role="list">
904
+ <li class="pf-v6-c-nav__item">
905
+ <a href="#" class="pf-v6-c-nav__link">
906
+ <span class="pf-v6-c-nav__link-text">System panel</span>
907
+ </a>
908
+ </li>
909
+ <li class="pf-v6-c-nav__item">
910
+ <a
911
+ href="#"
912
+ class="pf-v6-c-nav__link pf-m-current"
913
+ aria-current="page"
914
+ >
915
+ <span class="pf-v6-c-nav__link-text">Policy</span>
916
+ </a>
917
+ </li>
918
+ <li class="pf-v6-c-nav__item">
919
+ <a href="#" class="pf-v6-c-nav__link">
920
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
921
+ </a>
922
+ </li>
923
+ <li class="pf-v6-c-nav__item">
924
+ <a href="#" class="pf-v6-c-nav__link">
925
+ <span class="pf-v6-c-nav__link-text">Network services</span>
926
+ </a>
927
+ </li>
928
+ <li class="pf-v6-c-nav__item">
929
+ <a href="#" class="pf-v6-c-nav__link">
930
+ <span class="pf-v6-c-nav__link-text">Server</span>
931
+ </a>
932
+ </li>
933
+ </ul>
934
+ </nav>
935
+ </div>
857
936
  </div>
858
937
  </div>
859
938
  <div class="pf-v6-c-page__main-container" tabindex="-1">
@@ -871,21 +950,57 @@ wrapperTag: div
871
950
  </li>
872
951
  <li class="pf-v6-c-breadcrumb__item">
873
952
  <span class="pf-v6-c-breadcrumb__item-divider">
874
- <i class="fas fa-angle-right" aria-hidden="true"></i>
953
+ <svg
954
+ class="pf-v6-svg"
955
+ viewBox="0 0 20 20"
956
+ fill="currentColor"
957
+ aria-hidden="true"
958
+ role="img"
959
+ width="1em"
960
+ height="1em"
961
+ >
962
+ <path
963
+ 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"
964
+ />
965
+ </svg>
875
966
  </span>
876
967
 
877
968
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
878
969
  </li>
879
970
  <li class="pf-v6-c-breadcrumb__item">
880
971
  <span class="pf-v6-c-breadcrumb__item-divider">
881
- <i class="fas fa-angle-right" aria-hidden="true"></i>
972
+ <svg
973
+ class="pf-v6-svg"
974
+ viewBox="0 0 20 20"
975
+ fill="currentColor"
976
+ aria-hidden="true"
977
+ role="img"
978
+ width="1em"
979
+ height="1em"
980
+ >
981
+ <path
982
+ 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"
983
+ />
984
+ </svg>
882
985
  </span>
883
986
 
884
987
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
885
988
  </li>
886
989
  <li class="pf-v6-c-breadcrumb__item">
887
990
  <span class="pf-v6-c-breadcrumb__item-divider">
888
- <i class="fas fa-angle-right" aria-hidden="true"></i>
991
+ <svg
992
+ class="pf-v6-svg"
993
+ viewBox="0 0 20 20"
994
+ fill="currentColor"
995
+ aria-hidden="true"
996
+ role="img"
997
+ width="1em"
998
+ height="1em"
999
+ >
1000
+ <path
1001
+ 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"
1002
+ />
1003
+ </svg>
889
1004
  </span>
890
1005
 
891
1006
  <a
@@ -960,7 +1075,19 @@ wrapperTag: div
960
1075
  aria-label="Close"
961
1076
  >
962
1077
  <span class="pf-v6-c-button__icon">
963
- <i class="fas fa-times" aria-hidden="true"></i>
1078
+ <svg
1079
+ class="pf-v6-svg"
1080
+ viewBox="0 0 20 20"
1081
+ fill="currentColor"
1082
+ aria-hidden="true"
1083
+ role="img"
1084
+ width="1em"
1085
+ height="1em"
1086
+ >
1087
+ <path
1088
+ 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"
1089
+ />
1090
+ </svg>
964
1091
  </span>
965
1092
  </button>
966
1093
  </div>
@@ -980,10 +1107,23 @@ wrapperTag: div
980
1107
  <span class="pf-v6-c-wizard__toggle-list-item">
981
1108
  <span class="pf-v6-c-wizard__toggle-num">2</span>
982
1109
  Configuration
983
- <i
984
- class="fas fa-angle-right pf-v6-c-wizard__toggle-separator"
985
- aria-hidden="true"
986
- ></i>
1110
+ <span
1111
+ class="pf-v6-c-wizard__toggle-separator"
1112
+ >
1113
+ <svg
1114
+ class="pf-v6-svg"
1115
+ viewBox="0 0 20 20"
1116
+ fill="currentColor"
1117
+ aria-hidden="true"
1118
+ role="img"
1119
+ width="1em"
1120
+ height="1em"
1121
+ >
1122
+ <path
1123
+ 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"
1124
+ />
1125
+ </svg>
1126
+ </span>
987
1127
  </span>
988
1128
  <span class="pf-v6-c-wizard__toggle-list-item">Substep B</span>
989
1129
  </span>
@@ -1014,7 +1154,19 @@ wrapperTag: div
1014
1154
  <span class="pf-v6-c-wizard__nav-link-text">Configuration</span>
1015
1155
  <span class="pf-v6-c-wizard__nav-link-toggle">
1016
1156
  <span class="pf-v6-c-wizard__nav-link-toggle-icon">
1017
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1157
+ <svg
1158
+ class="pf-v6-svg"
1159
+ viewBox="0 0 20 20"
1160
+ fill="currentColor"
1161
+ aria-hidden="true"
1162
+ role="img"
1163
+ width="1em"
1164
+ height="1em"
1165
+ >
1166
+ <path
1167
+ 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"
1168
+ />
1169
+ </svg>
1018
1170
  </span>
1019
1171
  </span>
1020
1172
  </span>
@@ -1237,9 +1389,10 @@ wrapperTag: div
1237
1389
  <span class="pf-v6-c-button__text">Skip to content</span>
1238
1390
  </a>
1239
1391
  </div>
1392
+
1240
1393
  <header
1241
1394
  class="pf-v6-c-masthead"
1242
- id="wizard-with-drawer-closed-example-masthead"
1395
+ id="wizard-with-drawer-closed-example-docked"
1243
1396
  >
1244
1397
  <div class="pf-v6-c-masthead__main">
1245
1398
  <span class="pf-v6-c-masthead__toggle">
@@ -1282,7 +1435,7 @@ wrapperTag: div
1282
1435
  y1="2.25860997e-13%"
1283
1436
  x2="32%"
1284
1437
  y2="100%"
1285
- id="linearGradient-wizard-with-drawer-closed-example-masthead"
1438
+ id="linearGradient-wizard-with-drawer-closed-example-docked"
1286
1439
  >
1287
1440
  <stop stop-color="#2B9AF3" offset="0%" />
1288
1441
  <stop
@@ -1336,11 +1489,11 @@ wrapperTag: div
1336
1489
  />
1337
1490
  <path
1338
1491
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
1339
- fill="url(#linearGradient-wizard-with-drawer-closed-example-masthead)"
1492
+ fill="url(#linearGradient-wizard-with-drawer-closed-example-docked)"
1340
1493
  />
1341
1494
  <path
1342
1495
  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"
1343
- fill="url(#linearGradient-wizard-with-drawer-closed-example-masthead)"
1496
+ fill="url(#linearGradient-wizard-with-drawer-closed-example-docked)"
1344
1497
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
1345
1498
  />
1346
1499
  </g>
@@ -1352,7 +1505,7 @@ wrapperTag: div
1352
1505
  <div class="pf-v6-c-masthead__content">
1353
1506
  <div
1354
1507
  class="pf-v6-c-toolbar pf-m-static"
1355
- id="wizard-with-drawer-closed-example-masthead-toolbar"
1508
+ id="wizard-with-drawer-closed-example-docked-toolbar"
1356
1509
  >
1357
1510
  <div class="pf-v6-c-toolbar__content">
1358
1511
  <div class="pf-v6-c-toolbar__content-section">
@@ -1419,44 +1572,46 @@ wrapperTag: div
1419
1572
  </div>
1420
1573
  </header>
1421
1574
  <div class="pf-v6-c-page__sidebar">
1422
- <div class="pf-v6-c-page__sidebar-body">
1423
- <nav
1424
- class="pf-v6-c-nav"
1425
- id="wizard-with-drawer-closed-example-primary-nav"
1426
- aria-label="Global"
1427
- >
1428
- <ul class="pf-v6-c-nav__list" role="list">
1429
- <li class="pf-v6-c-nav__item">
1430
- <a href="#" class="pf-v6-c-nav__link">
1431
- <span class="pf-v6-c-nav__link-text">System panel</span>
1432
- </a>
1433
- </li>
1434
- <li class="pf-v6-c-nav__item">
1435
- <a
1436
- href="#"
1437
- class="pf-v6-c-nav__link pf-m-current"
1438
- aria-current="page"
1439
- >
1440
- <span class="pf-v6-c-nav__link-text">Policy</span>
1441
- </a>
1442
- </li>
1443
- <li class="pf-v6-c-nav__item">
1444
- <a href="#" class="pf-v6-c-nav__link">
1445
- <span class="pf-v6-c-nav__link-text">Authentication</span>
1446
- </a>
1447
- </li>
1448
- <li class="pf-v6-c-nav__item">
1449
- <a href="#" class="pf-v6-c-nav__link">
1450
- <span class="pf-v6-c-nav__link-text">Network services</span>
1451
- </a>
1452
- </li>
1453
- <li class="pf-v6-c-nav__item">
1454
- <a href="#" class="pf-v6-c-nav__link">
1455
- <span class="pf-v6-c-nav__link-text">Server</span>
1456
- </a>
1457
- </li>
1458
- </ul>
1459
- </nav>
1575
+ <div class="pf-v6-c-page__sidebar-main">
1576
+ <div class="pf-v6-c-page__sidebar-body">
1577
+ <nav
1578
+ class="pf-v6-c-nav"
1579
+ id="wizard-with-drawer-closed-example-primary-nav"
1580
+ aria-label="Global"
1581
+ >
1582
+ <ul class="pf-v6-c-nav__list" role="list">
1583
+ <li class="pf-v6-c-nav__item">
1584
+ <a href="#" class="pf-v6-c-nav__link">
1585
+ <span class="pf-v6-c-nav__link-text">System panel</span>
1586
+ </a>
1587
+ </li>
1588
+ <li class="pf-v6-c-nav__item">
1589
+ <a
1590
+ href="#"
1591
+ class="pf-v6-c-nav__link pf-m-current"
1592
+ aria-current="page"
1593
+ >
1594
+ <span class="pf-v6-c-nav__link-text">Policy</span>
1595
+ </a>
1596
+ </li>
1597
+ <li class="pf-v6-c-nav__item">
1598
+ <a href="#" class="pf-v6-c-nav__link">
1599
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
1600
+ </a>
1601
+ </li>
1602
+ <li class="pf-v6-c-nav__item">
1603
+ <a href="#" class="pf-v6-c-nav__link">
1604
+ <span class="pf-v6-c-nav__link-text">Network services</span>
1605
+ </a>
1606
+ </li>
1607
+ <li class="pf-v6-c-nav__item">
1608
+ <a href="#" class="pf-v6-c-nav__link">
1609
+ <span class="pf-v6-c-nav__link-text">Server</span>
1610
+ </a>
1611
+ </li>
1612
+ </ul>
1613
+ </nav>
1614
+ </div>
1460
1615
  </div>
1461
1616
  </div>
1462
1617
  <div class="pf-v6-c-page__main-container" tabindex="-1">
@@ -1474,21 +1629,57 @@ wrapperTag: div
1474
1629
  </li>
1475
1630
  <li class="pf-v6-c-breadcrumb__item">
1476
1631
  <span class="pf-v6-c-breadcrumb__item-divider">
1477
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1632
+ <svg
1633
+ class="pf-v6-svg"
1634
+ viewBox="0 0 20 20"
1635
+ fill="currentColor"
1636
+ aria-hidden="true"
1637
+ role="img"
1638
+ width="1em"
1639
+ height="1em"
1640
+ >
1641
+ <path
1642
+ 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"
1643
+ />
1644
+ </svg>
1478
1645
  </span>
1479
1646
 
1480
1647
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1481
1648
  </li>
1482
1649
  <li class="pf-v6-c-breadcrumb__item">
1483
1650
  <span class="pf-v6-c-breadcrumb__item-divider">
1484
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1651
+ <svg
1652
+ class="pf-v6-svg"
1653
+ viewBox="0 0 20 20"
1654
+ fill="currentColor"
1655
+ aria-hidden="true"
1656
+ role="img"
1657
+ width="1em"
1658
+ height="1em"
1659
+ >
1660
+ <path
1661
+ 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"
1662
+ />
1663
+ </svg>
1485
1664
  </span>
1486
1665
 
1487
1666
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1488
1667
  </li>
1489
1668
  <li class="pf-v6-c-breadcrumb__item">
1490
1669
  <span class="pf-v6-c-breadcrumb__item-divider">
1491
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1670
+ <svg
1671
+ class="pf-v6-svg"
1672
+ viewBox="0 0 20 20"
1673
+ fill="currentColor"
1674
+ aria-hidden="true"
1675
+ role="img"
1676
+ width="1em"
1677
+ height="1em"
1678
+ >
1679
+ <path
1680
+ 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"
1681
+ />
1682
+ </svg>
1492
1683
  </span>
1493
1684
 
1494
1685
  <a
@@ -1563,7 +1754,19 @@ wrapperTag: div
1563
1754
  aria-label="Close"
1564
1755
  >
1565
1756
  <span class="pf-v6-c-button__icon">
1566
- <i class="fas fa-times" aria-hidden="true"></i>
1757
+ <svg
1758
+ class="pf-v6-svg"
1759
+ viewBox="0 0 20 20"
1760
+ fill="currentColor"
1761
+ aria-hidden="true"
1762
+ role="img"
1763
+ width="1em"
1764
+ height="1em"
1765
+ >
1766
+ <path
1767
+ 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"
1768
+ />
1769
+ </svg>
1567
1770
  </span>
1568
1771
  </button>
1569
1772
  </div>
@@ -1583,10 +1786,23 @@ wrapperTag: div
1583
1786
  <span class="pf-v6-c-wizard__toggle-list-item">
1584
1787
  <span class="pf-v6-c-wizard__toggle-num">2</span>
1585
1788
  Configuration
1586
- <i
1587
- class="fas fa-angle-right pf-v6-c-wizard__toggle-separator"
1588
- aria-hidden="true"
1589
- ></i>
1789
+ <span
1790
+ class="pf-v6-c-wizard__toggle-separator"
1791
+ >
1792
+ <svg
1793
+ class="pf-v6-svg"
1794
+ viewBox="0 0 20 20"
1795
+ fill="currentColor"
1796
+ aria-hidden="true"
1797
+ role="img"
1798
+ width="1em"
1799
+ height="1em"
1800
+ >
1801
+ <path
1802
+ 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"
1803
+ />
1804
+ </svg>
1805
+ </span>
1590
1806
  </span>
1591
1807
  <span class="pf-v6-c-wizard__toggle-list-item">Substep B</span>
1592
1808
  </span>
@@ -1617,7 +1833,19 @@ wrapperTag: div
1617
1833
  <span class="pf-v6-c-wizard__nav-link-text">Configuration</span>
1618
1834
  <span class="pf-v6-c-wizard__nav-link-toggle">
1619
1835
  <span class="pf-v6-c-wizard__nav-link-toggle-icon">
1620
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1836
+ <svg
1837
+ class="pf-v6-svg"
1838
+ viewBox="0 0 20 20"
1839
+ fill="currentColor"
1840
+ aria-hidden="true"
1841
+ role="img"
1842
+ width="1em"
1843
+ height="1em"
1844
+ >
1845
+ <path
1846
+ 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"
1847
+ />
1848
+ </svg>
1621
1849
  </span>
1622
1850
  </span>
1623
1851
  </span>
@@ -1838,7 +2066,19 @@ wrapperTag: div
1838
2066
  aria-label="Close drawer panel"
1839
2067
  >
1840
2068
  <span class="pf-v6-c-button__icon">
1841
- <i class="fas fa-times" aria-hidden="true"></i>
2069
+ <svg
2070
+ class="pf-v6-svg"
2071
+ viewBox="0 0 20 20"
2072
+ fill="currentColor"
2073
+ aria-hidden="true"
2074
+ role="img"
2075
+ width="1em"
2076
+ height="1em"
2077
+ >
2078
+ <path
2079
+ 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"
2080
+ />
2081
+ </svg>
1842
2082
  </span>
1843
2083
  </button>
1844
2084
  </div>
@@ -1924,9 +2164,10 @@ wrapperTag: div
1924
2164
  <span class="pf-v6-c-button__text">Skip to content</span>
1925
2165
  </a>
1926
2166
  </div>
2167
+
1927
2168
  <header
1928
2169
  class="pf-v6-c-masthead"
1929
- id="wizard-with-drawer-expanded-example-masthead"
2170
+ id="wizard-with-drawer-expanded-example-docked"
1930
2171
  >
1931
2172
  <div class="pf-v6-c-masthead__main">
1932
2173
  <span class="pf-v6-c-masthead__toggle">
@@ -1969,7 +2210,7 @@ wrapperTag: div
1969
2210
  y1="2.25860997e-13%"
1970
2211
  x2="32%"
1971
2212
  y2="100%"
1972
- id="linearGradient-wizard-with-drawer-expanded-example-masthead"
2213
+ id="linearGradient-wizard-with-drawer-expanded-example-docked"
1973
2214
  >
1974
2215
  <stop stop-color="#2B9AF3" offset="0%" />
1975
2216
  <stop
@@ -2023,11 +2264,11 @@ wrapperTag: div
2023
2264
  />
2024
2265
  <path
2025
2266
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
2026
- fill="url(#linearGradient-wizard-with-drawer-expanded-example-masthead)"
2267
+ fill="url(#linearGradient-wizard-with-drawer-expanded-example-docked)"
2027
2268
  />
2028
2269
  <path
2029
2270
  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"
2030
- fill="url(#linearGradient-wizard-with-drawer-expanded-example-masthead)"
2271
+ fill="url(#linearGradient-wizard-with-drawer-expanded-example-docked)"
2031
2272
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
2032
2273
  />
2033
2274
  </g>
@@ -2039,7 +2280,7 @@ wrapperTag: div
2039
2280
  <div class="pf-v6-c-masthead__content">
2040
2281
  <div
2041
2282
  class="pf-v6-c-toolbar pf-m-static"
2042
- id="wizard-with-drawer-expanded-example-masthead-toolbar"
2283
+ id="wizard-with-drawer-expanded-example-docked-toolbar"
2043
2284
  >
2044
2285
  <div class="pf-v6-c-toolbar__content">
2045
2286
  <div class="pf-v6-c-toolbar__content-section">
@@ -2106,44 +2347,46 @@ wrapperTag: div
2106
2347
  </div>
2107
2348
  </header>
2108
2349
  <div class="pf-v6-c-page__sidebar">
2109
- <div class="pf-v6-c-page__sidebar-body">
2110
- <nav
2111
- class="pf-v6-c-nav"
2112
- id="wizard-with-drawer-expanded-example-primary-nav"
2113
- aria-label="Global"
2114
- >
2115
- <ul class="pf-v6-c-nav__list" role="list">
2116
- <li class="pf-v6-c-nav__item">
2117
- <a href="#" class="pf-v6-c-nav__link">
2118
- <span class="pf-v6-c-nav__link-text">System panel</span>
2119
- </a>
2120
- </li>
2121
- <li class="pf-v6-c-nav__item">
2122
- <a
2123
- href="#"
2124
- class="pf-v6-c-nav__link pf-m-current"
2125
- aria-current="page"
2126
- >
2127
- <span class="pf-v6-c-nav__link-text">Policy</span>
2128
- </a>
2129
- </li>
2130
- <li class="pf-v6-c-nav__item">
2131
- <a href="#" class="pf-v6-c-nav__link">
2132
- <span class="pf-v6-c-nav__link-text">Authentication</span>
2133
- </a>
2134
- </li>
2135
- <li class="pf-v6-c-nav__item">
2136
- <a href="#" class="pf-v6-c-nav__link">
2137
- <span class="pf-v6-c-nav__link-text">Network services</span>
2138
- </a>
2139
- </li>
2140
- <li class="pf-v6-c-nav__item">
2141
- <a href="#" class="pf-v6-c-nav__link">
2142
- <span class="pf-v6-c-nav__link-text">Server</span>
2143
- </a>
2144
- </li>
2145
- </ul>
2146
- </nav>
2350
+ <div class="pf-v6-c-page__sidebar-main">
2351
+ <div class="pf-v6-c-page__sidebar-body">
2352
+ <nav
2353
+ class="pf-v6-c-nav"
2354
+ id="wizard-with-drawer-expanded-example-primary-nav"
2355
+ aria-label="Global"
2356
+ >
2357
+ <ul class="pf-v6-c-nav__list" role="list">
2358
+ <li class="pf-v6-c-nav__item">
2359
+ <a href="#" class="pf-v6-c-nav__link">
2360
+ <span class="pf-v6-c-nav__link-text">System panel</span>
2361
+ </a>
2362
+ </li>
2363
+ <li class="pf-v6-c-nav__item">
2364
+ <a
2365
+ href="#"
2366
+ class="pf-v6-c-nav__link pf-m-current"
2367
+ aria-current="page"
2368
+ >
2369
+ <span class="pf-v6-c-nav__link-text">Policy</span>
2370
+ </a>
2371
+ </li>
2372
+ <li class="pf-v6-c-nav__item">
2373
+ <a href="#" class="pf-v6-c-nav__link">
2374
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
2375
+ </a>
2376
+ </li>
2377
+ <li class="pf-v6-c-nav__item">
2378
+ <a href="#" class="pf-v6-c-nav__link">
2379
+ <span class="pf-v6-c-nav__link-text">Network services</span>
2380
+ </a>
2381
+ </li>
2382
+ <li class="pf-v6-c-nav__item">
2383
+ <a href="#" class="pf-v6-c-nav__link">
2384
+ <span class="pf-v6-c-nav__link-text">Server</span>
2385
+ </a>
2386
+ </li>
2387
+ </ul>
2388
+ </nav>
2389
+ </div>
2147
2390
  </div>
2148
2391
  </div>
2149
2392
  <div class="pf-v6-c-page__main-container" tabindex="-1">
@@ -2161,21 +2404,57 @@ wrapperTag: div
2161
2404
  </li>
2162
2405
  <li class="pf-v6-c-breadcrumb__item">
2163
2406
  <span class="pf-v6-c-breadcrumb__item-divider">
2164
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2407
+ <svg
2408
+ class="pf-v6-svg"
2409
+ viewBox="0 0 20 20"
2410
+ fill="currentColor"
2411
+ aria-hidden="true"
2412
+ role="img"
2413
+ width="1em"
2414
+ height="1em"
2415
+ >
2416
+ <path
2417
+ 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"
2418
+ />
2419
+ </svg>
2165
2420
  </span>
2166
2421
 
2167
2422
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
2168
2423
  </li>
2169
2424
  <li class="pf-v6-c-breadcrumb__item">
2170
2425
  <span class="pf-v6-c-breadcrumb__item-divider">
2171
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2426
+ <svg
2427
+ class="pf-v6-svg"
2428
+ viewBox="0 0 20 20"
2429
+ fill="currentColor"
2430
+ aria-hidden="true"
2431
+ role="img"
2432
+ width="1em"
2433
+ height="1em"
2434
+ >
2435
+ <path
2436
+ 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"
2437
+ />
2438
+ </svg>
2172
2439
  </span>
2173
2440
 
2174
2441
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
2175
2442
  </li>
2176
2443
  <li class="pf-v6-c-breadcrumb__item">
2177
2444
  <span class="pf-v6-c-breadcrumb__item-divider">
2178
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2445
+ <svg
2446
+ class="pf-v6-svg"
2447
+ viewBox="0 0 20 20"
2448
+ fill="currentColor"
2449
+ aria-hidden="true"
2450
+ role="img"
2451
+ width="1em"
2452
+ height="1em"
2453
+ >
2454
+ <path
2455
+ 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"
2456
+ />
2457
+ </svg>
2179
2458
  </span>
2180
2459
 
2181
2460
  <a
@@ -2250,7 +2529,19 @@ wrapperTag: div
2250
2529
  aria-label="Close"
2251
2530
  >
2252
2531
  <span class="pf-v6-c-button__icon">
2253
- <i class="fas fa-times" aria-hidden="true"></i>
2532
+ <svg
2533
+ class="pf-v6-svg"
2534
+ viewBox="0 0 20 20"
2535
+ fill="currentColor"
2536
+ aria-hidden="true"
2537
+ role="img"
2538
+ width="1em"
2539
+ height="1em"
2540
+ >
2541
+ <path
2542
+ 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"
2543
+ />
2544
+ </svg>
2254
2545
  </span>
2255
2546
  </button>
2256
2547
  </div>
@@ -2270,10 +2561,23 @@ wrapperTag: div
2270
2561
  <span class="pf-v6-c-wizard__toggle-list-item">
2271
2562
  <span class="pf-v6-c-wizard__toggle-num">2</span>
2272
2563
  Configuration
2273
- <i
2274
- class="fas fa-angle-right pf-v6-c-wizard__toggle-separator"
2275
- aria-hidden="true"
2276
- ></i>
2564
+ <span
2565
+ class="pf-v6-c-wizard__toggle-separator"
2566
+ >
2567
+ <svg
2568
+ class="pf-v6-svg"
2569
+ viewBox="0 0 20 20"
2570
+ fill="currentColor"
2571
+ aria-hidden="true"
2572
+ role="img"
2573
+ width="1em"
2574
+ height="1em"
2575
+ >
2576
+ <path
2577
+ 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"
2578
+ />
2579
+ </svg>
2580
+ </span>
2277
2581
  </span>
2278
2582
  <span class="pf-v6-c-wizard__toggle-list-item">Substep B</span>
2279
2583
  </span>
@@ -2304,7 +2608,19 @@ wrapperTag: div
2304
2608
  <span class="pf-v6-c-wizard__nav-link-text">Configuration</span>
2305
2609
  <span class="pf-v6-c-wizard__nav-link-toggle">
2306
2610
  <span class="pf-v6-c-wizard__nav-link-toggle-icon">
2307
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2611
+ <svg
2612
+ class="pf-v6-svg"
2613
+ viewBox="0 0 20 20"
2614
+ fill="currentColor"
2615
+ aria-hidden="true"
2616
+ role="img"
2617
+ width="1em"
2618
+ height="1em"
2619
+ >
2620
+ <path
2621
+ 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"
2622
+ />
2623
+ </svg>
2308
2624
  </span>
2309
2625
  </span>
2310
2626
  </span>
@@ -2525,7 +2841,19 @@ wrapperTag: div
2525
2841
  aria-label="Close drawer panel"
2526
2842
  >
2527
2843
  <span class="pf-v6-c-button__icon">
2528
- <i class="fas fa-times" aria-hidden="true"></i>
2844
+ <svg
2845
+ class="pf-v6-svg"
2846
+ viewBox="0 0 20 20"
2847
+ fill="currentColor"
2848
+ aria-hidden="true"
2849
+ role="img"
2850
+ width="1em"
2851
+ height="1em"
2852
+ >
2853
+ <path
2854
+ 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"
2855
+ />
2856
+ </svg>
2529
2857
  </span>
2530
2858
  </button>
2531
2859
  </div>
@@ -2610,10 +2938,8 @@ wrapperTag: div
2610
2938
  <span class="pf-v6-c-button__text">Skip to content</span>
2611
2939
  </a>
2612
2940
  </div>
2613
- <header
2614
- class="pf-v6-c-masthead"
2615
- id="wizard-with-drawer-info-example-masthead"
2616
- >
2941
+
2942
+ <header class="pf-v6-c-masthead" id="wizard-with-drawer-info-example-docked">
2617
2943
  <div class="pf-v6-c-masthead__main">
2618
2944
  <span class="pf-v6-c-masthead__toggle">
2619
2945
  <button
@@ -2655,7 +2981,7 @@ wrapperTag: div
2655
2981
  y1="2.25860997e-13%"
2656
2982
  x2="32%"
2657
2983
  y2="100%"
2658
- id="linearGradient-wizard-with-drawer-info-example-masthead"
2984
+ id="linearGradient-wizard-with-drawer-info-example-docked"
2659
2985
  >
2660
2986
  <stop stop-color="#2B9AF3" offset="0%" />
2661
2987
  <stop
@@ -2709,11 +3035,11 @@ wrapperTag: div
2709
3035
  />
2710
3036
  <path
2711
3037
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
2712
- fill="url(#linearGradient-wizard-with-drawer-info-example-masthead)"
3038
+ fill="url(#linearGradient-wizard-with-drawer-info-example-docked)"
2713
3039
  />
2714
3040
  <path
2715
3041
  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"
2716
- fill="url(#linearGradient-wizard-with-drawer-info-example-masthead)"
3042
+ fill="url(#linearGradient-wizard-with-drawer-info-example-docked)"
2717
3043
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
2718
3044
  />
2719
3045
  </g>
@@ -2725,7 +3051,7 @@ wrapperTag: div
2725
3051
  <div class="pf-v6-c-masthead__content">
2726
3052
  <div
2727
3053
  class="pf-v6-c-toolbar pf-m-static"
2728
- id="wizard-with-drawer-info-example-masthead-toolbar"
3054
+ id="wizard-with-drawer-info-example-docked-toolbar"
2729
3055
  >
2730
3056
  <div class="pf-v6-c-toolbar__content">
2731
3057
  <div class="pf-v6-c-toolbar__content-section">
@@ -2792,44 +3118,46 @@ wrapperTag: div
2792
3118
  </div>
2793
3119
  </header>
2794
3120
  <div class="pf-v6-c-page__sidebar">
2795
- <div class="pf-v6-c-page__sidebar-body">
2796
- <nav
2797
- class="pf-v6-c-nav"
2798
- id="wizard-with-drawer-info-example-primary-nav"
2799
- aria-label="Global"
2800
- >
2801
- <ul class="pf-v6-c-nav__list" role="list">
2802
- <li class="pf-v6-c-nav__item">
2803
- <a href="#" class="pf-v6-c-nav__link">
2804
- <span class="pf-v6-c-nav__link-text">System panel</span>
2805
- </a>
2806
- </li>
2807
- <li class="pf-v6-c-nav__item">
2808
- <a
2809
- href="#"
2810
- class="pf-v6-c-nav__link pf-m-current"
2811
- aria-current="page"
2812
- >
2813
- <span class="pf-v6-c-nav__link-text">Policy</span>
2814
- </a>
2815
- </li>
2816
- <li class="pf-v6-c-nav__item">
2817
- <a href="#" class="pf-v6-c-nav__link">
2818
- <span class="pf-v6-c-nav__link-text">Authentication</span>
2819
- </a>
2820
- </li>
2821
- <li class="pf-v6-c-nav__item">
2822
- <a href="#" class="pf-v6-c-nav__link">
2823
- <span class="pf-v6-c-nav__link-text">Network services</span>
2824
- </a>
2825
- </li>
2826
- <li class="pf-v6-c-nav__item">
2827
- <a href="#" class="pf-v6-c-nav__link">
2828
- <span class="pf-v6-c-nav__link-text">Server</span>
2829
- </a>
2830
- </li>
2831
- </ul>
2832
- </nav>
3121
+ <div class="pf-v6-c-page__sidebar-main">
3122
+ <div class="pf-v6-c-page__sidebar-body">
3123
+ <nav
3124
+ class="pf-v6-c-nav"
3125
+ id="wizard-with-drawer-info-example-primary-nav"
3126
+ aria-label="Global"
3127
+ >
3128
+ <ul class="pf-v6-c-nav__list" role="list">
3129
+ <li class="pf-v6-c-nav__item">
3130
+ <a href="#" class="pf-v6-c-nav__link">
3131
+ <span class="pf-v6-c-nav__link-text">System panel</span>
3132
+ </a>
3133
+ </li>
3134
+ <li class="pf-v6-c-nav__item">
3135
+ <a
3136
+ href="#"
3137
+ class="pf-v6-c-nav__link pf-m-current"
3138
+ aria-current="page"
3139
+ >
3140
+ <span class="pf-v6-c-nav__link-text">Policy</span>
3141
+ </a>
3142
+ </li>
3143
+ <li class="pf-v6-c-nav__item">
3144
+ <a href="#" class="pf-v6-c-nav__link">
3145
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
3146
+ </a>
3147
+ </li>
3148
+ <li class="pf-v6-c-nav__item">
3149
+ <a href="#" class="pf-v6-c-nav__link">
3150
+ <span class="pf-v6-c-nav__link-text">Network services</span>
3151
+ </a>
3152
+ </li>
3153
+ <li class="pf-v6-c-nav__item">
3154
+ <a href="#" class="pf-v6-c-nav__link">
3155
+ <span class="pf-v6-c-nav__link-text">Server</span>
3156
+ </a>
3157
+ </li>
3158
+ </ul>
3159
+ </nav>
3160
+ </div>
2833
3161
  </div>
2834
3162
  </div>
2835
3163
  <div class="pf-v6-c-page__main-container" tabindex="-1">
@@ -2847,21 +3175,57 @@ wrapperTag: div
2847
3175
  </li>
2848
3176
  <li class="pf-v6-c-breadcrumb__item">
2849
3177
  <span class="pf-v6-c-breadcrumb__item-divider">
2850
- <i class="fas fa-angle-right" aria-hidden="true"></i>
3178
+ <svg
3179
+ class="pf-v6-svg"
3180
+ viewBox="0 0 20 20"
3181
+ fill="currentColor"
3182
+ aria-hidden="true"
3183
+ role="img"
3184
+ width="1em"
3185
+ height="1em"
3186
+ >
3187
+ <path
3188
+ 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"
3189
+ />
3190
+ </svg>
2851
3191
  </span>
2852
3192
 
2853
3193
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
2854
3194
  </li>
2855
3195
  <li class="pf-v6-c-breadcrumb__item">
2856
3196
  <span class="pf-v6-c-breadcrumb__item-divider">
2857
- <i class="fas fa-angle-right" aria-hidden="true"></i>
3197
+ <svg
3198
+ class="pf-v6-svg"
3199
+ viewBox="0 0 20 20"
3200
+ fill="currentColor"
3201
+ aria-hidden="true"
3202
+ role="img"
3203
+ width="1em"
3204
+ height="1em"
3205
+ >
3206
+ <path
3207
+ 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"
3208
+ />
3209
+ </svg>
2858
3210
  </span>
2859
3211
 
2860
3212
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
2861
3213
  </li>
2862
3214
  <li class="pf-v6-c-breadcrumb__item">
2863
3215
  <span class="pf-v6-c-breadcrumb__item-divider">
2864
- <i class="fas fa-angle-right" aria-hidden="true"></i>
3216
+ <svg
3217
+ class="pf-v6-svg"
3218
+ viewBox="0 0 20 20"
3219
+ fill="currentColor"
3220
+ aria-hidden="true"
3221
+ role="img"
3222
+ width="1em"
3223
+ height="1em"
3224
+ >
3225
+ <path
3226
+ 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"
3227
+ />
3228
+ </svg>
2865
3229
  </span>
2866
3230
 
2867
3231
  <a
@@ -2936,7 +3300,19 @@ wrapperTag: div
2936
3300
  aria-label="Close"
2937
3301
  >
2938
3302
  <span class="pf-v6-c-button__icon">
2939
- <i class="fas fa-times" aria-hidden="true"></i>
3303
+ <svg
3304
+ class="pf-v6-svg"
3305
+ viewBox="0 0 20 20"
3306
+ fill="currentColor"
3307
+ aria-hidden="true"
3308
+ role="img"
3309
+ width="1em"
3310
+ height="1em"
3311
+ >
3312
+ <path
3313
+ 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"
3314
+ />
3315
+ </svg>
2940
3316
  </span>
2941
3317
  </button>
2942
3318
  </div>
@@ -2956,10 +3332,23 @@ wrapperTag: div
2956
3332
  <span class="pf-v6-c-wizard__toggle-list-item">
2957
3333
  <span class="pf-v6-c-wizard__toggle-num">2</span>
2958
3334
  Configuration
2959
- <i
2960
- class="fas fa-angle-right pf-v6-c-wizard__toggle-separator"
2961
- aria-hidden="true"
2962
- ></i>
3335
+ <span
3336
+ class="pf-v6-c-wizard__toggle-separator"
3337
+ >
3338
+ <svg
3339
+ class="pf-v6-svg"
3340
+ viewBox="0 0 20 20"
3341
+ fill="currentColor"
3342
+ aria-hidden="true"
3343
+ role="img"
3344
+ width="1em"
3345
+ height="1em"
3346
+ >
3347
+ <path
3348
+ 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"
3349
+ />
3350
+ </svg>
3351
+ </span>
2963
3352
  </span>
2964
3353
  <span class="pf-v6-c-wizard__toggle-list-item">Substep B</span>
2965
3354
  </span>
@@ -2990,7 +3379,19 @@ wrapperTag: div
2990
3379
  <span class="pf-v6-c-wizard__nav-link-text">Configuration</span>
2991
3380
  <span class="pf-v6-c-wizard__nav-link-toggle">
2992
3381
  <span class="pf-v6-c-wizard__nav-link-toggle-icon">
2993
- <i class="fas fa-angle-right" aria-hidden="true"></i>
3382
+ <svg
3383
+ class="pf-v6-svg"
3384
+ viewBox="0 0 20 20"
3385
+ fill="currentColor"
3386
+ aria-hidden="true"
3387
+ role="img"
3388
+ width="1em"
3389
+ height="1em"
3390
+ >
3391
+ <path
3392
+ 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"
3393
+ />
3394
+ </svg>
2994
3395
  </span>
2995
3396
  </span>
2996
3397
  </span>
@@ -3085,7 +3486,19 @@ wrapperTag: div
3085
3486
  aria-label="Close drawer panel"
3086
3487
  >
3087
3488
  <span class="pf-v6-c-button__icon">
3088
- <i class="fas fa-times" aria-hidden="true"></i>
3489
+ <svg
3490
+ class="pf-v6-svg"
3491
+ viewBox="0 0 20 20"
3492
+ fill="currentColor"
3493
+ aria-hidden="true"
3494
+ role="img"
3495
+ width="1em"
3496
+ height="1em"
3497
+ >
3498
+ <path
3499
+ 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"
3500
+ />
3501
+ </svg>
3089
3502
  </span>
3090
3503
  </button>
3091
3504
  </div>
@@ -3171,7 +3584,8 @@ wrapperTag: div
3171
3584
  <span class="pf-v6-c-button__text">Skip to content</span>
3172
3585
  </a>
3173
3586
  </div>
3174
- <header class="pf-v6-c-masthead" id="wizard-in-page-example-masthead">
3587
+
3588
+ <header class="pf-v6-c-masthead" id="wizard-in-page-example-docked">
3175
3589
  <div class="pf-v6-c-masthead__main">
3176
3590
  <span class="pf-v6-c-masthead__toggle">
3177
3591
  <button
@@ -3213,7 +3627,7 @@ wrapperTag: div
3213
3627
  y1="2.25860997e-13%"
3214
3628
  x2="32%"
3215
3629
  y2="100%"
3216
- id="linearGradient-wizard-in-page-example-masthead"
3630
+ id="linearGradient-wizard-in-page-example-docked"
3217
3631
  >
3218
3632
  <stop stop-color="#2B9AF3" offset="0%" />
3219
3633
  <stop
@@ -3267,11 +3681,11 @@ wrapperTag: div
3267
3681
  />
3268
3682
  <path
3269
3683
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
3270
- fill="url(#linearGradient-wizard-in-page-example-masthead)"
3684
+ fill="url(#linearGradient-wizard-in-page-example-docked)"
3271
3685
  />
3272
3686
  <path
3273
3687
  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"
3274
- fill="url(#linearGradient-wizard-in-page-example-masthead)"
3688
+ fill="url(#linearGradient-wizard-in-page-example-docked)"
3275
3689
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
3276
3690
  />
3277
3691
  </g>
@@ -3283,7 +3697,7 @@ wrapperTag: div
3283
3697
  <div class="pf-v6-c-masthead__content">
3284
3698
  <div
3285
3699
  class="pf-v6-c-toolbar pf-m-static"
3286
- id="wizard-in-page-example-masthead-toolbar"
3700
+ id="wizard-in-page-example-docked-toolbar"
3287
3701
  >
3288
3702
  <div class="pf-v6-c-toolbar__content">
3289
3703
  <div class="pf-v6-c-toolbar__content-section">
@@ -3350,44 +3764,46 @@ wrapperTag: div
3350
3764
  </div>
3351
3765
  </header>
3352
3766
  <div class="pf-v6-c-page__sidebar">
3353
- <div class="pf-v6-c-page__sidebar-body">
3354
- <nav
3355
- class="pf-v6-c-nav"
3356
- id="wizard-in-page-example-primary-nav"
3357
- aria-label="Global"
3358
- >
3359
- <ul class="pf-v6-c-nav__list" role="list">
3360
- <li class="pf-v6-c-nav__item">
3361
- <a href="#" class="pf-v6-c-nav__link">
3362
- <span class="pf-v6-c-nav__link-text">System panel</span>
3363
- </a>
3364
- </li>
3365
- <li class="pf-v6-c-nav__item">
3366
- <a
3367
- href="#"
3368
- class="pf-v6-c-nav__link pf-m-current"
3369
- aria-current="page"
3370
- >
3371
- <span class="pf-v6-c-nav__link-text">Policy</span>
3372
- </a>
3373
- </li>
3374
- <li class="pf-v6-c-nav__item">
3375
- <a href="#" class="pf-v6-c-nav__link">
3376
- <span class="pf-v6-c-nav__link-text">Authentication</span>
3377
- </a>
3378
- </li>
3379
- <li class="pf-v6-c-nav__item">
3380
- <a href="#" class="pf-v6-c-nav__link">
3381
- <span class="pf-v6-c-nav__link-text">Network services</span>
3382
- </a>
3383
- </li>
3384
- <li class="pf-v6-c-nav__item">
3385
- <a href="#" class="pf-v6-c-nav__link">
3386
- <span class="pf-v6-c-nav__link-text">Server</span>
3387
- </a>
3388
- </li>
3389
- </ul>
3390
- </nav>
3767
+ <div class="pf-v6-c-page__sidebar-main">
3768
+ <div class="pf-v6-c-page__sidebar-body">
3769
+ <nav
3770
+ class="pf-v6-c-nav"
3771
+ id="wizard-in-page-example-primary-nav"
3772
+ aria-label="Global"
3773
+ >
3774
+ <ul class="pf-v6-c-nav__list" role="list">
3775
+ <li class="pf-v6-c-nav__item">
3776
+ <a href="#" class="pf-v6-c-nav__link">
3777
+ <span class="pf-v6-c-nav__link-text">System panel</span>
3778
+ </a>
3779
+ </li>
3780
+ <li class="pf-v6-c-nav__item">
3781
+ <a
3782
+ href="#"
3783
+ class="pf-v6-c-nav__link pf-m-current"
3784
+ aria-current="page"
3785
+ >
3786
+ <span class="pf-v6-c-nav__link-text">Policy</span>
3787
+ </a>
3788
+ </li>
3789
+ <li class="pf-v6-c-nav__item">
3790
+ <a href="#" class="pf-v6-c-nav__link">
3791
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
3792
+ </a>
3793
+ </li>
3794
+ <li class="pf-v6-c-nav__item">
3795
+ <a href="#" class="pf-v6-c-nav__link">
3796
+ <span class="pf-v6-c-nav__link-text">Network services</span>
3797
+ </a>
3798
+ </li>
3799
+ <li class="pf-v6-c-nav__item">
3800
+ <a href="#" class="pf-v6-c-nav__link">
3801
+ <span class="pf-v6-c-nav__link-text">Server</span>
3802
+ </a>
3803
+ </li>
3804
+ </ul>
3805
+ </nav>
3806
+ </div>
3391
3807
  </div>
3392
3808
  </div>
3393
3809
  <div class="pf-v6-c-page__main-container" tabindex="-1">
@@ -3405,21 +3821,57 @@ wrapperTag: div
3405
3821
  </li>
3406
3822
  <li class="pf-v6-c-breadcrumb__item">
3407
3823
  <span class="pf-v6-c-breadcrumb__item-divider">
3408
- <i class="fas fa-angle-right" aria-hidden="true"></i>
3824
+ <svg
3825
+ class="pf-v6-svg"
3826
+ viewBox="0 0 20 20"
3827
+ fill="currentColor"
3828
+ aria-hidden="true"
3829
+ role="img"
3830
+ width="1em"
3831
+ height="1em"
3832
+ >
3833
+ <path
3834
+ 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"
3835
+ />
3836
+ </svg>
3409
3837
  </span>
3410
3838
 
3411
3839
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
3412
3840
  </li>
3413
3841
  <li class="pf-v6-c-breadcrumb__item">
3414
3842
  <span class="pf-v6-c-breadcrumb__item-divider">
3415
- <i class="fas fa-angle-right" aria-hidden="true"></i>
3843
+ <svg
3844
+ class="pf-v6-svg"
3845
+ viewBox="0 0 20 20"
3846
+ fill="currentColor"
3847
+ aria-hidden="true"
3848
+ role="img"
3849
+ width="1em"
3850
+ height="1em"
3851
+ >
3852
+ <path
3853
+ 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"
3854
+ />
3855
+ </svg>
3416
3856
  </span>
3417
3857
 
3418
3858
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
3419
3859
  </li>
3420
3860
  <li class="pf-v6-c-breadcrumb__item">
3421
3861
  <span class="pf-v6-c-breadcrumb__item-divider">
3422
- <i class="fas fa-angle-right" aria-hidden="true"></i>
3862
+ <svg
3863
+ class="pf-v6-svg"
3864
+ viewBox="0 0 20 20"
3865
+ fill="currentColor"
3866
+ aria-hidden="true"
3867
+ role="img"
3868
+ width="1em"
3869
+ height="1em"
3870
+ >
3871
+ <path
3872
+ 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"
3873
+ />
3874
+ </svg>
3423
3875
  </span>
3424
3876
 
3425
3877
  <a
@@ -3449,10 +3901,23 @@ wrapperTag: div
3449
3901
  <span class="pf-v6-c-wizard__toggle-list-item">
3450
3902
  <span class="pf-v6-c-wizard__toggle-num">2</span>
3451
3903
  Configuration
3452
- <i
3453
- class="fas fa-angle-right pf-v6-c-wizard__toggle-separator"
3454
- aria-hidden="true"
3455
- ></i>
3904
+ <span
3905
+ class="pf-v6-c-wizard__toggle-separator"
3906
+ >
3907
+ <svg
3908
+ class="pf-v6-svg"
3909
+ viewBox="0 0 20 20"
3910
+ fill="currentColor"
3911
+ aria-hidden="true"
3912
+ role="img"
3913
+ width="1em"
3914
+ height="1em"
3915
+ >
3916
+ <path
3917
+ 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"
3918
+ />
3919
+ </svg>
3920
+ </span>
3456
3921
  </span>
3457
3922
  <span class="pf-v6-c-wizard__toggle-list-item">Substep B</span>
3458
3923
  </span>
@@ -3485,7 +3950,19 @@ wrapperTag: div
3485
3950
  >Configuration</span>
3486
3951
  <span class="pf-v6-c-wizard__nav-link-toggle">
3487
3952
  <span class="pf-v6-c-wizard__nav-link-toggle-icon">
3488
- <i class="fas fa-angle-right" aria-hidden="true"></i>
3953
+ <svg
3954
+ class="pf-v6-svg"
3955
+ viewBox="0 0 20 20"
3956
+ fill="currentColor"
3957
+ aria-hidden="true"
3958
+ role="img"
3959
+ width="1em"
3960
+ height="1em"
3961
+ >
3962
+ <path
3963
+ 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"
3964
+ />
3965
+ </svg>
3489
3966
  </span>
3490
3967
  </span>
3491
3968
  </span>
@@ -3736,7 +4213,8 @@ wrapperTag: div
3736
4213
  <span class="pf-v6-c-button__text">Skip to content</span>
3737
4214
  </a>
3738
4215
  </div>
3739
- <header class="pf-v6-c-masthead" id="in-page-nav-expanded-example-masthead">
4216
+
4217
+ <header class="pf-v6-c-masthead" id="in-page-nav-expanded-example-docked">
3740
4218
  <div class="pf-v6-c-masthead__main">
3741
4219
  <span class="pf-v6-c-masthead__toggle">
3742
4220
  <button
@@ -3778,7 +4256,7 @@ wrapperTag: div
3778
4256
  y1="2.25860997e-13%"
3779
4257
  x2="32%"
3780
4258
  y2="100%"
3781
- id="linearGradient-in-page-nav-expanded-example-masthead"
4259
+ id="linearGradient-in-page-nav-expanded-example-docked"
3782
4260
  >
3783
4261
  <stop stop-color="#2B9AF3" offset="0%" />
3784
4262
  <stop
@@ -3832,11 +4310,11 @@ wrapperTag: div
3832
4310
  />
3833
4311
  <path
3834
4312
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
3835
- fill="url(#linearGradient-in-page-nav-expanded-example-masthead)"
4313
+ fill="url(#linearGradient-in-page-nav-expanded-example-docked)"
3836
4314
  />
3837
4315
  <path
3838
4316
  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"
3839
- fill="url(#linearGradient-in-page-nav-expanded-example-masthead)"
4317
+ fill="url(#linearGradient-in-page-nav-expanded-example-docked)"
3840
4318
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
3841
4319
  />
3842
4320
  </g>
@@ -3848,7 +4326,7 @@ wrapperTag: div
3848
4326
  <div class="pf-v6-c-masthead__content">
3849
4327
  <div
3850
4328
  class="pf-v6-c-toolbar pf-m-static"
3851
- id="in-page-nav-expanded-example-masthead-toolbar"
4329
+ id="in-page-nav-expanded-example-docked-toolbar"
3852
4330
  >
3853
4331
  <div class="pf-v6-c-toolbar__content">
3854
4332
  <div class="pf-v6-c-toolbar__content-section">
@@ -3915,44 +4393,46 @@ wrapperTag: div
3915
4393
  </div>
3916
4394
  </header>
3917
4395
  <div class="pf-v6-c-page__sidebar">
3918
- <div class="pf-v6-c-page__sidebar-body">
3919
- <nav
3920
- class="pf-v6-c-nav"
3921
- id="in-page-nav-expanded-example-primary-nav"
3922
- aria-label="Global"
3923
- >
3924
- <ul class="pf-v6-c-nav__list" role="list">
3925
- <li class="pf-v6-c-nav__item">
3926
- <a href="#" class="pf-v6-c-nav__link">
3927
- <span class="pf-v6-c-nav__link-text">System panel</span>
3928
- </a>
3929
- </li>
3930
- <li class="pf-v6-c-nav__item">
3931
- <a
3932
- href="#"
3933
- class="pf-v6-c-nav__link pf-m-current"
3934
- aria-current="page"
3935
- >
3936
- <span class="pf-v6-c-nav__link-text">Policy</span>
3937
- </a>
3938
- </li>
3939
- <li class="pf-v6-c-nav__item">
3940
- <a href="#" class="pf-v6-c-nav__link">
3941
- <span class="pf-v6-c-nav__link-text">Authentication</span>
3942
- </a>
3943
- </li>
3944
- <li class="pf-v6-c-nav__item">
3945
- <a href="#" class="pf-v6-c-nav__link">
3946
- <span class="pf-v6-c-nav__link-text">Network services</span>
3947
- </a>
3948
- </li>
3949
- <li class="pf-v6-c-nav__item">
3950
- <a href="#" class="pf-v6-c-nav__link">
3951
- <span class="pf-v6-c-nav__link-text">Server</span>
3952
- </a>
3953
- </li>
3954
- </ul>
3955
- </nav>
4396
+ <div class="pf-v6-c-page__sidebar-main">
4397
+ <div class="pf-v6-c-page__sidebar-body">
4398
+ <nav
4399
+ class="pf-v6-c-nav"
4400
+ id="in-page-nav-expanded-example-primary-nav"
4401
+ aria-label="Global"
4402
+ >
4403
+ <ul class="pf-v6-c-nav__list" role="list">
4404
+ <li class="pf-v6-c-nav__item">
4405
+ <a href="#" class="pf-v6-c-nav__link">
4406
+ <span class="pf-v6-c-nav__link-text">System panel</span>
4407
+ </a>
4408
+ </li>
4409
+ <li class="pf-v6-c-nav__item">
4410
+ <a
4411
+ href="#"
4412
+ class="pf-v6-c-nav__link pf-m-current"
4413
+ aria-current="page"
4414
+ >
4415
+ <span class="pf-v6-c-nav__link-text">Policy</span>
4416
+ </a>
4417
+ </li>
4418
+ <li class="pf-v6-c-nav__item">
4419
+ <a href="#" class="pf-v6-c-nav__link">
4420
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
4421
+ </a>
4422
+ </li>
4423
+ <li class="pf-v6-c-nav__item">
4424
+ <a href="#" class="pf-v6-c-nav__link">
4425
+ <span class="pf-v6-c-nav__link-text">Network services</span>
4426
+ </a>
4427
+ </li>
4428
+ <li class="pf-v6-c-nav__item">
4429
+ <a href="#" class="pf-v6-c-nav__link">
4430
+ <span class="pf-v6-c-nav__link-text">Server</span>
4431
+ </a>
4432
+ </li>
4433
+ </ul>
4434
+ </nav>
4435
+ </div>
3956
4436
  </div>
3957
4437
  </div>
3958
4438
  <div class="pf-v6-c-page__main-container" tabindex="-1">
@@ -3970,21 +4450,57 @@ wrapperTag: div
3970
4450
  </li>
3971
4451
  <li class="pf-v6-c-breadcrumb__item">
3972
4452
  <span class="pf-v6-c-breadcrumb__item-divider">
3973
- <i class="fas fa-angle-right" aria-hidden="true"></i>
4453
+ <svg
4454
+ class="pf-v6-svg"
4455
+ viewBox="0 0 20 20"
4456
+ fill="currentColor"
4457
+ aria-hidden="true"
4458
+ role="img"
4459
+ width="1em"
4460
+ height="1em"
4461
+ >
4462
+ <path
4463
+ 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"
4464
+ />
4465
+ </svg>
3974
4466
  </span>
3975
4467
 
3976
4468
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
3977
4469
  </li>
3978
4470
  <li class="pf-v6-c-breadcrumb__item">
3979
4471
  <span class="pf-v6-c-breadcrumb__item-divider">
3980
- <i class="fas fa-angle-right" aria-hidden="true"></i>
4472
+ <svg
4473
+ class="pf-v6-svg"
4474
+ viewBox="0 0 20 20"
4475
+ fill="currentColor"
4476
+ aria-hidden="true"
4477
+ role="img"
4478
+ width="1em"
4479
+ height="1em"
4480
+ >
4481
+ <path
4482
+ 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"
4483
+ />
4484
+ </svg>
3981
4485
  </span>
3982
4486
 
3983
4487
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
3984
4488
  </li>
3985
4489
  <li class="pf-v6-c-breadcrumb__item">
3986
4490
  <span class="pf-v6-c-breadcrumb__item-divider">
3987
- <i class="fas fa-angle-right" aria-hidden="true"></i>
4491
+ <svg
4492
+ class="pf-v6-svg"
4493
+ viewBox="0 0 20 20"
4494
+ fill="currentColor"
4495
+ aria-hidden="true"
4496
+ role="img"
4497
+ width="1em"
4498
+ height="1em"
4499
+ >
4500
+ <path
4501
+ 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"
4502
+ />
4503
+ </svg>
3988
4504
  </span>
3989
4505
 
3990
4506
  <a
@@ -4014,10 +4530,23 @@ wrapperTag: div
4014
4530
  <span class="pf-v6-c-wizard__toggle-list-item">
4015
4531
  <span class="pf-v6-c-wizard__toggle-num">2</span>
4016
4532
  Configuration
4017
- <i
4018
- class="fas fa-angle-right pf-v6-c-wizard__toggle-separator"
4019
- aria-hidden="true"
4020
- ></i>
4533
+ <span
4534
+ class="pf-v6-c-wizard__toggle-separator"
4535
+ >
4536
+ <svg
4537
+ class="pf-v6-svg"
4538
+ viewBox="0 0 20 20"
4539
+ fill="currentColor"
4540
+ aria-hidden="true"
4541
+ role="img"
4542
+ width="1em"
4543
+ height="1em"
4544
+ >
4545
+ <path
4546
+ 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"
4547
+ />
4548
+ </svg>
4549
+ </span>
4021
4550
  </span>
4022
4551
  <span class="pf-v6-c-wizard__toggle-list-item">Substep B</span>
4023
4552
  </span>
@@ -4050,7 +4579,19 @@ wrapperTag: div
4050
4579
  >Configuration</span>
4051
4580
  <span class="pf-v6-c-wizard__nav-link-toggle">
4052
4581
  <span class="pf-v6-c-wizard__nav-link-toggle-icon">
4053
- <i class="fas fa-angle-right" aria-hidden="true"></i>
4582
+ <svg
4583
+ class="pf-v6-svg"
4584
+ viewBox="0 0 20 20"
4585
+ fill="currentColor"
4586
+ aria-hidden="true"
4587
+ role="img"
4588
+ width="1em"
4589
+ height="1em"
4590
+ >
4591
+ <path
4592
+ 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"
4593
+ />
4594
+ </svg>
4054
4595
  </span>
4055
4596
  </span>
4056
4597
  </span>
@@ -4280,9 +4821,10 @@ wrapperTag: div
4280
4821
  <span class="pf-v6-c-button__text">Skip to content</span>
4281
4822
  </a>
4282
4823
  </div>
4824
+
4283
4825
  <header
4284
4826
  class="pf-v6-c-masthead"
4285
- id="wizard-with-drawer-in-page-example-masthead"
4827
+ id="wizard-with-drawer-in-page-example-docked"
4286
4828
  >
4287
4829
  <div class="pf-v6-c-masthead__main">
4288
4830
  <span class="pf-v6-c-masthead__toggle">
@@ -4325,7 +4867,7 @@ wrapperTag: div
4325
4867
  y1="2.25860997e-13%"
4326
4868
  x2="32%"
4327
4869
  y2="100%"
4328
- id="linearGradient-wizard-with-drawer-in-page-example-masthead"
4870
+ id="linearGradient-wizard-with-drawer-in-page-example-docked"
4329
4871
  >
4330
4872
  <stop stop-color="#2B9AF3" offset="0%" />
4331
4873
  <stop
@@ -4379,11 +4921,11 @@ wrapperTag: div
4379
4921
  />
4380
4922
  <path
4381
4923
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
4382
- fill="url(#linearGradient-wizard-with-drawer-in-page-example-masthead)"
4924
+ fill="url(#linearGradient-wizard-with-drawer-in-page-example-docked)"
4383
4925
  />
4384
4926
  <path
4385
4927
  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"
4386
- fill="url(#linearGradient-wizard-with-drawer-in-page-example-masthead)"
4928
+ fill="url(#linearGradient-wizard-with-drawer-in-page-example-docked)"
4387
4929
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
4388
4930
  />
4389
4931
  </g>
@@ -4395,7 +4937,7 @@ wrapperTag: div
4395
4937
  <div class="pf-v6-c-masthead__content">
4396
4938
  <div
4397
4939
  class="pf-v6-c-toolbar pf-m-static"
4398
- id="wizard-with-drawer-in-page-example-masthead-toolbar"
4940
+ id="wizard-with-drawer-in-page-example-docked-toolbar"
4399
4941
  >
4400
4942
  <div class="pf-v6-c-toolbar__content">
4401
4943
  <div class="pf-v6-c-toolbar__content-section">
@@ -4462,44 +5004,46 @@ wrapperTag: div
4462
5004
  </div>
4463
5005
  </header>
4464
5006
  <div class="pf-v6-c-page__sidebar">
4465
- <div class="pf-v6-c-page__sidebar-body">
4466
- <nav
4467
- class="pf-v6-c-nav"
4468
- id="wizard-with-drawer-in-page-example-primary-nav"
4469
- aria-label="Global"
4470
- >
4471
- <ul class="pf-v6-c-nav__list" role="list">
4472
- <li class="pf-v6-c-nav__item">
4473
- <a href="#" class="pf-v6-c-nav__link">
4474
- <span class="pf-v6-c-nav__link-text">System panel</span>
4475
- </a>
4476
- </li>
4477
- <li class="pf-v6-c-nav__item">
4478
- <a
4479
- href="#"
4480
- class="pf-v6-c-nav__link pf-m-current"
4481
- aria-current="page"
4482
- >
4483
- <span class="pf-v6-c-nav__link-text">Policy</span>
4484
- </a>
4485
- </li>
4486
- <li class="pf-v6-c-nav__item">
4487
- <a href="#" class="pf-v6-c-nav__link">
4488
- <span class="pf-v6-c-nav__link-text">Authentication</span>
4489
- </a>
4490
- </li>
4491
- <li class="pf-v6-c-nav__item">
4492
- <a href="#" class="pf-v6-c-nav__link">
4493
- <span class="pf-v6-c-nav__link-text">Network services</span>
4494
- </a>
4495
- </li>
4496
- <li class="pf-v6-c-nav__item">
4497
- <a href="#" class="pf-v6-c-nav__link">
4498
- <span class="pf-v6-c-nav__link-text">Server</span>
4499
- </a>
4500
- </li>
4501
- </ul>
4502
- </nav>
5007
+ <div class="pf-v6-c-page__sidebar-main">
5008
+ <div class="pf-v6-c-page__sidebar-body">
5009
+ <nav
5010
+ class="pf-v6-c-nav"
5011
+ id="wizard-with-drawer-in-page-example-primary-nav"
5012
+ aria-label="Global"
5013
+ >
5014
+ <ul class="pf-v6-c-nav__list" role="list">
5015
+ <li class="pf-v6-c-nav__item">
5016
+ <a href="#" class="pf-v6-c-nav__link">
5017
+ <span class="pf-v6-c-nav__link-text">System panel</span>
5018
+ </a>
5019
+ </li>
5020
+ <li class="pf-v6-c-nav__item">
5021
+ <a
5022
+ href="#"
5023
+ class="pf-v6-c-nav__link pf-m-current"
5024
+ aria-current="page"
5025
+ >
5026
+ <span class="pf-v6-c-nav__link-text">Policy</span>
5027
+ </a>
5028
+ </li>
5029
+ <li class="pf-v6-c-nav__item">
5030
+ <a href="#" class="pf-v6-c-nav__link">
5031
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
5032
+ </a>
5033
+ </li>
5034
+ <li class="pf-v6-c-nav__item">
5035
+ <a href="#" class="pf-v6-c-nav__link">
5036
+ <span class="pf-v6-c-nav__link-text">Network services</span>
5037
+ </a>
5038
+ </li>
5039
+ <li class="pf-v6-c-nav__item">
5040
+ <a href="#" class="pf-v6-c-nav__link">
5041
+ <span class="pf-v6-c-nav__link-text">Server</span>
5042
+ </a>
5043
+ </li>
5044
+ </ul>
5045
+ </nav>
5046
+ </div>
4503
5047
  </div>
4504
5048
  </div>
4505
5049
  <div class="pf-v6-c-page__main-container" tabindex="-1">
@@ -4517,21 +5061,57 @@ wrapperTag: div
4517
5061
  </li>
4518
5062
  <li class="pf-v6-c-breadcrumb__item">
4519
5063
  <span class="pf-v6-c-breadcrumb__item-divider">
4520
- <i class="fas fa-angle-right" aria-hidden="true"></i>
5064
+ <svg
5065
+ class="pf-v6-svg"
5066
+ viewBox="0 0 20 20"
5067
+ fill="currentColor"
5068
+ aria-hidden="true"
5069
+ role="img"
5070
+ width="1em"
5071
+ height="1em"
5072
+ >
5073
+ <path
5074
+ 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"
5075
+ />
5076
+ </svg>
4521
5077
  </span>
4522
5078
 
4523
5079
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
4524
5080
  </li>
4525
5081
  <li class="pf-v6-c-breadcrumb__item">
4526
5082
  <span class="pf-v6-c-breadcrumb__item-divider">
4527
- <i class="fas fa-angle-right" aria-hidden="true"></i>
5083
+ <svg
5084
+ class="pf-v6-svg"
5085
+ viewBox="0 0 20 20"
5086
+ fill="currentColor"
5087
+ aria-hidden="true"
5088
+ role="img"
5089
+ width="1em"
5090
+ height="1em"
5091
+ >
5092
+ <path
5093
+ 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"
5094
+ />
5095
+ </svg>
4528
5096
  </span>
4529
5097
 
4530
5098
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
4531
5099
  </li>
4532
5100
  <li class="pf-v6-c-breadcrumb__item">
4533
5101
  <span class="pf-v6-c-breadcrumb__item-divider">
4534
- <i class="fas fa-angle-right" aria-hidden="true"></i>
5102
+ <svg
5103
+ class="pf-v6-svg"
5104
+ viewBox="0 0 20 20"
5105
+ fill="currentColor"
5106
+ aria-hidden="true"
5107
+ role="img"
5108
+ width="1em"
5109
+ height="1em"
5110
+ >
5111
+ <path
5112
+ 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"
5113
+ />
5114
+ </svg>
4535
5115
  </span>
4536
5116
 
4537
5117
  <a
@@ -4561,10 +5141,23 @@ wrapperTag: div
4561
5141
  <span class="pf-v6-c-wizard__toggle-list-item">
4562
5142
  <span class="pf-v6-c-wizard__toggle-num">2</span>
4563
5143
  Configuration
4564
- <i
4565
- class="fas fa-angle-right pf-v6-c-wizard__toggle-separator"
4566
- aria-hidden="true"
4567
- ></i>
5144
+ <span
5145
+ class="pf-v6-c-wizard__toggle-separator"
5146
+ >
5147
+ <svg
5148
+ class="pf-v6-svg"
5149
+ viewBox="0 0 20 20"
5150
+ fill="currentColor"
5151
+ aria-hidden="true"
5152
+ role="img"
5153
+ width="1em"
5154
+ height="1em"
5155
+ >
5156
+ <path
5157
+ 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"
5158
+ />
5159
+ </svg>
5160
+ </span>
4568
5161
  </span>
4569
5162
  <span class="pf-v6-c-wizard__toggle-list-item">Substep B</span>
4570
5163
  </span>
@@ -4597,7 +5190,19 @@ wrapperTag: div
4597
5190
  >Configuration</span>
4598
5191
  <span class="pf-v6-c-wizard__nav-link-toggle">
4599
5192
  <span class="pf-v6-c-wizard__nav-link-toggle-icon">
4600
- <i class="fas fa-angle-right" aria-hidden="true"></i>
5193
+ <svg
5194
+ class="pf-v6-svg"
5195
+ viewBox="0 0 20 20"
5196
+ fill="currentColor"
5197
+ aria-hidden="true"
5198
+ role="img"
5199
+ width="1em"
5200
+ height="1em"
5201
+ >
5202
+ <path
5203
+ 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"
5204
+ />
5205
+ </svg>
4601
5206
  </span>
4602
5207
  </span>
4603
5208
  </span>
@@ -4819,7 +5424,19 @@ wrapperTag: div
4819
5424
  aria-label="Close drawer panel"
4820
5425
  >
4821
5426
  <span class="pf-v6-c-button__icon">
4822
- <i class="fas fa-times" aria-hidden="true"></i>
5427
+ <svg
5428
+ class="pf-v6-svg"
5429
+ viewBox="0 0 20 20"
5430
+ fill="currentColor"
5431
+ aria-hidden="true"
5432
+ role="img"
5433
+ width="1em"
5434
+ height="1em"
5435
+ >
5436
+ <path
5437
+ 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"
5438
+ />
5439
+ </svg>
4823
5440
  </span>
4824
5441
  </button>
4825
5442
  </div>
@@ -4898,9 +5515,10 @@ wrapperTag: div
4898
5515
  <span class="pf-v6-c-button__text">Skip to content</span>
4899
5516
  </a>
4900
5517
  </div>
5518
+
4901
5519
  <header
4902
5520
  class="pf-v6-c-masthead"
4903
- id="wizard-with-drawer-in-page-expanded-example-masthead"
5521
+ id="wizard-with-drawer-in-page-expanded-example-docked"
4904
5522
  >
4905
5523
  <div class="pf-v6-c-masthead__main">
4906
5524
  <span class="pf-v6-c-masthead__toggle">
@@ -4943,7 +5561,7 @@ wrapperTag: div
4943
5561
  y1="2.25860997e-13%"
4944
5562
  x2="32%"
4945
5563
  y2="100%"
4946
- id="linearGradient-wizard-with-drawer-in-page-expanded-example-masthead"
5564
+ id="linearGradient-wizard-with-drawer-in-page-expanded-example-docked"
4947
5565
  >
4948
5566
  <stop stop-color="#2B9AF3" offset="0%" />
4949
5567
  <stop
@@ -4997,11 +5615,11 @@ wrapperTag: div
4997
5615
  />
4998
5616
  <path
4999
5617
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
5000
- fill="url(#linearGradient-wizard-with-drawer-in-page-expanded-example-masthead)"
5618
+ fill="url(#linearGradient-wizard-with-drawer-in-page-expanded-example-docked)"
5001
5619
  />
5002
5620
  <path
5003
5621
  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"
5004
- fill="url(#linearGradient-wizard-with-drawer-in-page-expanded-example-masthead)"
5622
+ fill="url(#linearGradient-wizard-with-drawer-in-page-expanded-example-docked)"
5005
5623
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
5006
5624
  />
5007
5625
  </g>
@@ -5013,7 +5631,7 @@ wrapperTag: div
5013
5631
  <div class="pf-v6-c-masthead__content">
5014
5632
  <div
5015
5633
  class="pf-v6-c-toolbar pf-m-static"
5016
- id="wizard-with-drawer-in-page-expanded-example-masthead-toolbar"
5634
+ id="wizard-with-drawer-in-page-expanded-example-docked-toolbar"
5017
5635
  >
5018
5636
  <div class="pf-v6-c-toolbar__content">
5019
5637
  <div class="pf-v6-c-toolbar__content-section">
@@ -5080,44 +5698,46 @@ wrapperTag: div
5080
5698
  </div>
5081
5699
  </header>
5082
5700
  <div class="pf-v6-c-page__sidebar">
5083
- <div class="pf-v6-c-page__sidebar-body">
5084
- <nav
5085
- class="pf-v6-c-nav"
5086
- id="wizard-with-drawer-in-page-expanded-example-primary-nav"
5087
- aria-label="Global"
5088
- >
5089
- <ul class="pf-v6-c-nav__list" role="list">
5090
- <li class="pf-v6-c-nav__item">
5091
- <a href="#" class="pf-v6-c-nav__link">
5092
- <span class="pf-v6-c-nav__link-text">System panel</span>
5093
- </a>
5094
- </li>
5095
- <li class="pf-v6-c-nav__item">
5096
- <a
5097
- href="#"
5098
- class="pf-v6-c-nav__link pf-m-current"
5099
- aria-current="page"
5100
- >
5101
- <span class="pf-v6-c-nav__link-text">Policy</span>
5102
- </a>
5103
- </li>
5104
- <li class="pf-v6-c-nav__item">
5105
- <a href="#" class="pf-v6-c-nav__link">
5106
- <span class="pf-v6-c-nav__link-text">Authentication</span>
5107
- </a>
5108
- </li>
5109
- <li class="pf-v6-c-nav__item">
5110
- <a href="#" class="pf-v6-c-nav__link">
5111
- <span class="pf-v6-c-nav__link-text">Network services</span>
5112
- </a>
5113
- </li>
5114
- <li class="pf-v6-c-nav__item">
5115
- <a href="#" class="pf-v6-c-nav__link">
5116
- <span class="pf-v6-c-nav__link-text">Server</span>
5117
- </a>
5118
- </li>
5119
- </ul>
5120
- </nav>
5701
+ <div class="pf-v6-c-page__sidebar-main">
5702
+ <div class="pf-v6-c-page__sidebar-body">
5703
+ <nav
5704
+ class="pf-v6-c-nav"
5705
+ id="wizard-with-drawer-in-page-expanded-example-primary-nav"
5706
+ aria-label="Global"
5707
+ >
5708
+ <ul class="pf-v6-c-nav__list" role="list">
5709
+ <li class="pf-v6-c-nav__item">
5710
+ <a href="#" class="pf-v6-c-nav__link">
5711
+ <span class="pf-v6-c-nav__link-text">System panel</span>
5712
+ </a>
5713
+ </li>
5714
+ <li class="pf-v6-c-nav__item">
5715
+ <a
5716
+ href="#"
5717
+ class="pf-v6-c-nav__link pf-m-current"
5718
+ aria-current="page"
5719
+ >
5720
+ <span class="pf-v6-c-nav__link-text">Policy</span>
5721
+ </a>
5722
+ </li>
5723
+ <li class="pf-v6-c-nav__item">
5724
+ <a href="#" class="pf-v6-c-nav__link">
5725
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
5726
+ </a>
5727
+ </li>
5728
+ <li class="pf-v6-c-nav__item">
5729
+ <a href="#" class="pf-v6-c-nav__link">
5730
+ <span class="pf-v6-c-nav__link-text">Network services</span>
5731
+ </a>
5732
+ </li>
5733
+ <li class="pf-v6-c-nav__item">
5734
+ <a href="#" class="pf-v6-c-nav__link">
5735
+ <span class="pf-v6-c-nav__link-text">Server</span>
5736
+ </a>
5737
+ </li>
5738
+ </ul>
5739
+ </nav>
5740
+ </div>
5121
5741
  </div>
5122
5742
  </div>
5123
5743
  <div class="pf-v6-c-page__main-container" tabindex="-1">
@@ -5135,21 +5755,57 @@ wrapperTag: div
5135
5755
  </li>
5136
5756
  <li class="pf-v6-c-breadcrumb__item">
5137
5757
  <span class="pf-v6-c-breadcrumb__item-divider">
5138
- <i class="fas fa-angle-right" aria-hidden="true"></i>
5758
+ <svg
5759
+ class="pf-v6-svg"
5760
+ viewBox="0 0 20 20"
5761
+ fill="currentColor"
5762
+ aria-hidden="true"
5763
+ role="img"
5764
+ width="1em"
5765
+ height="1em"
5766
+ >
5767
+ <path
5768
+ 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"
5769
+ />
5770
+ </svg>
5139
5771
  </span>
5140
5772
 
5141
5773
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
5142
5774
  </li>
5143
5775
  <li class="pf-v6-c-breadcrumb__item">
5144
5776
  <span class="pf-v6-c-breadcrumb__item-divider">
5145
- <i class="fas fa-angle-right" aria-hidden="true"></i>
5777
+ <svg
5778
+ class="pf-v6-svg"
5779
+ viewBox="0 0 20 20"
5780
+ fill="currentColor"
5781
+ aria-hidden="true"
5782
+ role="img"
5783
+ width="1em"
5784
+ height="1em"
5785
+ >
5786
+ <path
5787
+ 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"
5788
+ />
5789
+ </svg>
5146
5790
  </span>
5147
5791
 
5148
5792
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
5149
5793
  </li>
5150
5794
  <li class="pf-v6-c-breadcrumb__item">
5151
5795
  <span class="pf-v6-c-breadcrumb__item-divider">
5152
- <i class="fas fa-angle-right" aria-hidden="true"></i>
5796
+ <svg
5797
+ class="pf-v6-svg"
5798
+ viewBox="0 0 20 20"
5799
+ fill="currentColor"
5800
+ aria-hidden="true"
5801
+ role="img"
5802
+ width="1em"
5803
+ height="1em"
5804
+ >
5805
+ <path
5806
+ 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"
5807
+ />
5808
+ </svg>
5153
5809
  </span>
5154
5810
 
5155
5811
  <a
@@ -5179,10 +5835,23 @@ wrapperTag: div
5179
5835
  <span class="pf-v6-c-wizard__toggle-list-item">
5180
5836
  <span class="pf-v6-c-wizard__toggle-num">2</span>
5181
5837
  Configuration
5182
- <i
5183
- class="fas fa-angle-right pf-v6-c-wizard__toggle-separator"
5184
- aria-hidden="true"
5185
- ></i>
5838
+ <span
5839
+ class="pf-v6-c-wizard__toggle-separator"
5840
+ >
5841
+ <svg
5842
+ class="pf-v6-svg"
5843
+ viewBox="0 0 20 20"
5844
+ fill="currentColor"
5845
+ aria-hidden="true"
5846
+ role="img"
5847
+ width="1em"
5848
+ height="1em"
5849
+ >
5850
+ <path
5851
+ 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"
5852
+ />
5853
+ </svg>
5854
+ </span>
5186
5855
  </span>
5187
5856
  <span class="pf-v6-c-wizard__toggle-list-item">Substep B</span>
5188
5857
  </span>
@@ -5215,7 +5884,19 @@ wrapperTag: div
5215
5884
  >Configuration</span>
5216
5885
  <span class="pf-v6-c-wizard__nav-link-toggle">
5217
5886
  <span class="pf-v6-c-wizard__nav-link-toggle-icon">
5218
- <i class="fas fa-angle-right" aria-hidden="true"></i>
5887
+ <svg
5888
+ class="pf-v6-svg"
5889
+ viewBox="0 0 20 20"
5890
+ fill="currentColor"
5891
+ aria-hidden="true"
5892
+ role="img"
5893
+ width="1em"
5894
+ height="1em"
5895
+ >
5896
+ <path
5897
+ 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"
5898
+ />
5899
+ </svg>
5219
5900
  </span>
5220
5901
  </span>
5221
5902
  </span>
@@ -5437,7 +6118,19 @@ wrapperTag: div
5437
6118
  aria-label="Close drawer panel"
5438
6119
  >
5439
6120
  <span class="pf-v6-c-button__icon">
5440
- <i class="fas fa-times" aria-hidden="true"></i>
6121
+ <svg
6122
+ class="pf-v6-svg"
6123
+ viewBox="0 0 20 20"
6124
+ fill="currentColor"
6125
+ aria-hidden="true"
6126
+ role="img"
6127
+ width="1em"
6128
+ height="1em"
6129
+ >
6130
+ <path
6131
+ 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"
6132
+ />
6133
+ </svg>
5441
6134
  </span>
5442
6135
  </button>
5443
6136
  </div>