@patternfly/patternfly 6.5.0-prerelease.8 → 6.5.0-prerelease.81

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (410) hide show
  1. package/README.md +2 -2
  2. package/assets/fontawesome/_variables.scss +2 -1
  3. package/assets/images/Felt-Bkg-Generic-Dark.svg +82 -0
  4. package/assets/images/Felt-Bkg-Generic-Light.svg +82 -0
  5. package/assets/images/PF-Bkg-Generic-Dark.svg +76 -0
  6. package/assets/images/PF-Bkg-Generic-Light.svg +74 -0
  7. package/assets/images/RHAiExperienceIcon.svg +27 -0
  8. package/assets/images/RHAutomationsLogo.svg +96 -0
  9. package/assets/images/RHServerStackIcon.svg +16 -0
  10. package/assets/images/compass--hero-bg.png +0 -0
  11. package/assets/images/compass--rh-wallpaper-dark.png +0 -0
  12. package/assets/images/compass--rh-wallpaper-light.png +0 -0
  13. package/assets/images/compass--wallpaper-dark.jpg +0 -0
  14. package/assets/images/compass--wallpaper-dark.png +0 -0
  15. package/assets/images/compass--wallpaper-light.jpg +0 -0
  16. package/assets/images/compass--wallpaper-light.png +0 -0
  17. package/assets/images/glass-brand-dark.jpg +0 -0
  18. package/assets/images/glass-brand-dark.png +0 -0
  19. package/assets/images/glass-brand-light.jpg +0 -0
  20. package/assets/images/glass-brand-light.png +0 -0
  21. package/base/normalize.scss +7 -0
  22. package/base/patternfly-common.css +50 -0
  23. package/base/patternfly-common.scss +59 -0
  24. package/base/patternfly-svg-icons.css +17 -0
  25. package/base/patternfly-svg-icons.scss +20 -0
  26. package/base/patternfly-variables.css +926 -513
  27. package/base/patternfly-variables.scss +46 -4
  28. package/base/tokens/tokens-dark.scss +56 -8
  29. package/base/tokens/tokens-default.scss +69 -14
  30. package/base/tokens/tokens-glass-dark.scss +26 -0
  31. package/base/tokens/tokens-glass.scss +22 -0
  32. package/base/tokens/tokens-local.scss +17 -0
  33. package/base/tokens/tokens-palette.scss +3 -1
  34. package/base/tokens/tokens-redhat-dark.scss +21 -0
  35. package/base/tokens/tokens-redhat-glass-dark.scss +40 -0
  36. package/base/tokens/tokens-redhat-glass.scss +30 -0
  37. package/base/tokens/tokens-redhat-highcontrast-dark.scss +50 -0
  38. package/base/tokens/tokens-redhat-highcontrast.scss +128 -0
  39. package/base/tokens/tokens-redhat.scss +15 -0
  40. package/components/AboutModalBox/about-modal-box.css +36 -26
  41. package/components/Accordion/accordion.css +26 -14
  42. package/components/Accordion/accordion.scss +12 -2
  43. package/components/ActionList/action-list.css +2 -0
  44. package/components/ActionList/action-list.scss +2 -0
  45. package/components/Alert/alert.css +7 -5
  46. package/components/Alert/alert.scss +2 -1
  47. package/components/Avatar/avatar.css +12 -4
  48. package/components/BackgroundImage/background-image.css +6 -3
  49. package/components/Banner/banner.css +12 -6
  50. package/components/Banner/banner.scss +7 -0
  51. package/components/Brand/brand.css +3 -1
  52. package/components/Breadcrumb/breadcrumb.css +10 -5
  53. package/components/Breadcrumb/breadcrumb.scss +6 -2
  54. package/components/Button/button.css +173 -71
  55. package/components/Button/button.scss +188 -72
  56. package/components/CalendarMonth/calendar-month.css +4 -3
  57. package/components/Card/card.css +51 -15
  58. package/components/Card/card.scss +65 -9
  59. package/components/ClipboardCopy/clipboard-copy.css +14 -7
  60. package/components/ClipboardCopy/clipboard-copy.scss +13 -4
  61. package/components/CodeEditor/code-editor.css +2 -2
  62. package/components/CodeEditor/code-editor.scss +2 -2
  63. package/components/Compass/compass.css +399 -0
  64. package/components/Compass/compass.scss +413 -0
  65. package/components/DataList/data-list.css +30 -23
  66. package/components/DataList/data-list.scss +3 -2
  67. package/components/DescriptionList/description-list-order.scss +5 -1
  68. package/components/DescriptionList/description-list.css +7 -5
  69. package/components/DescriptionList/description-list.scss +5 -1
  70. package/components/Divider/divider.css +7 -5
  71. package/components/Drawer/drawer.css +224 -75
  72. package/components/Drawer/drawer.scss +194 -27
  73. package/components/DualListSelector/dual-list-selector.css +18 -12
  74. package/components/DualListSelector/dual-list-selector.scss +1 -1
  75. package/components/ExpandableSection/expandable-section.css +21 -16
  76. package/components/ExpandableSection/expandable-section.scss +6 -3
  77. package/components/Form/form.css +2 -2
  78. package/components/Form/form.scss +2 -2
  79. package/components/FormControl/form-control.css +3 -3
  80. package/components/FormControl/form-control.scss +3 -3
  81. package/components/Hero/hero.css +74 -0
  82. package/components/Hero/hero.scss +86 -0
  83. package/components/JumpLinks/jump-links.css +16 -5
  84. package/components/JumpLinks/jump-links.scss +17 -3
  85. package/components/Label/label-group.css +2 -2
  86. package/components/Label/label-group.scss +2 -2
  87. package/components/Label/label.css +4 -3
  88. package/components/Login/login.css +58 -40
  89. package/components/Login/login.scss +7 -3
  90. package/components/Masthead/masthead.css +111 -16
  91. package/components/Masthead/masthead.scss +111 -1
  92. package/components/Menu/menu.css +49 -33
  93. package/components/Menu/menu.scss +26 -19
  94. package/components/MenuToggle/menu-toggle.css +35 -8
  95. package/components/MenuToggle/menu-toggle.scss +42 -8
  96. package/components/ModalBox/modal-box.css +9 -7
  97. package/components/ModalBox/modal-box.scss +2 -2
  98. package/components/Nav/nav.css +82 -11
  99. package/components/Nav/nav.scss +85 -5
  100. package/components/NotificationDrawer/notification-drawer.css +19 -9
  101. package/components/NotificationDrawer/notification-drawer.scss +14 -5
  102. package/components/OverflowMenu/overflow-menu.css +16 -0
  103. package/components/OverflowMenu/overflow-menu.scss +20 -1
  104. package/components/Page/page.css +421 -32
  105. package/components/Page/page.scss +397 -15
  106. package/components/Pagination/pagination.css +56 -4
  107. package/components/Pagination/pagination.scss +71 -6
  108. package/components/Panel/panel.css +41 -3
  109. package/components/Panel/panel.scss +56 -3
  110. package/components/Progress/progress.css +3 -1
  111. package/components/Progress/progress.scss +3 -1
  112. package/components/ProgressStepper/progress-stepper.scss +5 -1
  113. package/components/Sidebar/sidebar.css +1 -1
  114. package/components/Sidebar/sidebar.scss +7 -3
  115. package/components/Skeleton/skeleton.css +16 -15
  116. package/components/Slider/slider.css +32 -18
  117. package/components/Switch/switch.css +4 -2
  118. package/components/Switch/switch.scss +1 -1
  119. package/components/Table/table-grid.css +28 -36
  120. package/components/Table/table-grid.scss +4 -4
  121. package/components/Table/table-scrollable.css +1 -1
  122. package/components/Table/table-scrollable.scss +1 -1
  123. package/components/Table/table-tree-view.css +4 -2
  124. package/components/Table/table.css +104 -57
  125. package/components/Table/table.scss +92 -37
  126. package/components/Tabs/tabs.css +39 -33
  127. package/components/Tabs/tabs.scss +38 -26
  128. package/components/TextInputGroup/text-input-group.css +2 -2
  129. package/components/TextInputGroup/text-input-group.scss +2 -2
  130. package/components/ToggleGroup/toggle-group.css +44 -19
  131. package/components/ToggleGroup/toggle-group.scss +51 -22
  132. package/components/Toolbar/toolbar.css +195 -16
  133. package/components/Toolbar/toolbar.scss +89 -9
  134. package/components/TreeView/tree-view.css +45 -14
  135. package/components/TreeView/tree-view.scss +32 -1
  136. package/components/Wizard/wizard.css +41 -19
  137. package/components/Wizard/wizard.scss +26 -6
  138. package/components/_index.css +2740 -829
  139. package/components/_index.scss +3 -1
  140. package/docs/components/AboutModalBox/examples/AboutModalBox.md +13 -1
  141. package/docs/components/Accordion/examples/Accordion.md +392 -30
  142. package/docs/components/ActionList/examples/ActionList.md +143 -11
  143. package/docs/components/Alert/examples/Alert.md +678 -54
  144. package/docs/components/Avatar/examples/Avatar.md +4 -4
  145. package/docs/components/BackToTop/examples/BackToTop.md +13 -1
  146. package/docs/components/Banner/examples/Banner.md +196 -5
  147. package/docs/components/Brand/examples/Brand.md +2 -2
  148. package/docs/components/Breadcrumb/examples/Breadcrumb.md +313 -26
  149. package/docs/components/Button/examples/Button.md +2829 -333
  150. package/docs/components/CalendarMonth/examples/CalendarMonth.md +156 -12
  151. package/docs/components/Card/examples/Card.md +335 -12
  152. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +293 -28
  153. package/docs/components/CodeBlock/examples/CodeBlock.md +104 -8
  154. package/docs/components/CodeEditor/examples/CodeEditor.md +234 -18
  155. package/docs/components/Compass/examples/Compass.css +8 -0
  156. package/docs/components/Compass/examples/Compass.md +109 -0
  157. package/docs/components/DataList/examples/DataList.md +468 -78
  158. package/docs/components/DatePicker/examples/DatePicker.md +78 -6
  159. package/docs/components/DescriptionList/examples/DescriptionList.md +327 -27
  160. package/docs/components/Divider/examples/Divider.md +2 -2
  161. package/docs/components/DragDrop/examples/DragDrop.css +1 -1
  162. package/docs/components/Drawer/examples/Drawer.md +415 -35
  163. package/docs/components/DualListSelector/examples/DualListSelector.md +1247 -161
  164. package/docs/components/EmptyState/examples/EmptyState.md +78 -6
  165. package/docs/components/ExpandableSection/examples/ExpandableSection.md +91 -7
  166. package/docs/components/Form/examples/Form.md +78 -6
  167. package/docs/components/Hero/examples/Hero.md +25 -0
  168. package/docs/components/Hint/examples/Hint.md +39 -3
  169. package/docs/components/Icon/examples/Icon.md +105 -9
  170. package/docs/components/InlineEdit/examples/InlineEdit.md +338 -26
  171. package/docs/components/InputGroup/examples/InputGroup.md +40 -4
  172. package/docs/components/JumpLinks/examples/JumpLinks.md +54 -6
  173. package/docs/components/Label/examples/Label.md +2834 -218
  174. package/docs/components/Login/examples/Login.md +39 -3
  175. package/docs/components/Masthead/examples/masthead.md +80 -1
  176. package/docs/components/Menu/examples/Menu.md +1679 -133
  177. package/docs/components/MenuToggle/examples/MenuToggle.md +1514 -118
  178. package/docs/components/ModalBox/examples/ModalBox.md +289 -25
  179. package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +156 -12
  180. package/docs/components/Nav/examples/Navigation.md +898 -62
  181. package/docs/components/NotificationDrawer/examples/NotificationDrawer.md +1079 -83
  182. package/docs/components/OverflowMenu/examples/overflow-menu.css +6 -3
  183. package/docs/components/OverflowMenu/examples/overflow-menu.md +164 -11
  184. package/docs/components/Page/examples/Page.md +211 -25
  185. package/docs/components/Pagination/examples/Pagination.md +1291 -80
  186. package/docs/components/Panel/examples/Panel.css +3 -0
  187. package/docs/components/Panel/examples/Panel.md +71 -4
  188. package/docs/components/Popover/examples/Popover.md +286 -22
  189. package/docs/components/Progress/examples/Progress.md +91 -7
  190. package/docs/components/ProgressStepper/examples/ProgressStepper.md +275 -23
  191. package/docs/components/Sidebar/examples/Sidebar.md +1 -1
  192. package/docs/components/Slider/examples/Slider.md +52 -4
  193. package/docs/components/Table/examples/Table.css +2 -1
  194. package/docs/components/Table/examples/Table.md +7543 -653
  195. package/docs/components/Tabs/examples/Tabs.md +5734 -471
  196. package/docs/components/TextInputGroup/examples/TextInputGroup.md +600 -48
  197. package/docs/components/ToggleGroup/examples/toggle-group.md +261 -15
  198. package/docs/components/Toolbar/examples/Toolbar.css +1 -1
  199. package/docs/components/Toolbar/examples/Toolbar.md +1145 -88
  200. package/docs/components/TreeView/examples/TreeView.md +1390 -130
  201. package/docs/components/Wizard/examples/Wizard.md +828 -73
  202. package/docs/demos/AboutModal/examples/AboutModal.md +158 -53
  203. package/docs/demos/Alert/examples/Alert.md +539 -164
  204. package/docs/demos/BackToTop/examples/BackToTop.md +158 -53
  205. package/docs/demos/Banner/examples/Banner.md +290 -104
  206. package/docs/demos/Button/examples/Button.md +13 -1
  207. package/docs/demos/Card/examples/Card.md +1041 -134
  208. package/docs/demos/CardView/examples/CardView.md +570 -171
  209. package/docs/demos/Compass/examples/Compass.md +10005 -0
  210. package/docs/demos/Dashboard/examples/Dashboard.md +745 -177
  211. package/docs/demos/DataList/examples/DataList.md +1301 -292
  212. package/docs/demos/DescriptionList/examples/DescriptionList.md +472 -160
  213. package/docs/demos/Drawer/examples/Drawer.md +718 -262
  214. package/docs/demos/Form/examples/BasicForms.md +273 -21
  215. package/docs/demos/JumpLinks/examples/JumpLinks.md +862 -319
  216. package/docs/demos/Masthead/examples/Masthead.md +1119 -489
  217. package/docs/demos/Modal/examples/Modal.md +948 -321
  218. package/docs/demos/Nav/examples/Nav.md +3449 -499
  219. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +2418 -405
  220. package/docs/demos/Page/examples/Page.md +2137 -773
  221. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +13 -1
  222. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +52 -4
  223. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +1913 -504
  224. package/docs/demos/Skeleton/examples/Skeleton.md +145 -52
  225. package/docs/demos/Table/examples/Table.md +11807 -2275
  226. package/docs/demos/Tabs/examples/Tabs.md +1117 -337
  227. package/docs/demos/Toolbar/examples/Toolbar.md +1818 -286
  228. package/docs/demos/Wizard/examples/Wizard.md +1705 -526
  229. package/docs/layouts/Bullseye/examples/Bullseye.css +2 -2
  230. package/docs/layouts/Bullseye/examples/Bullseye.md +2 -1
  231. package/docs/layouts/Flex/examples/Flex.css +3 -3
  232. package/docs/layouts/Flex/examples/Flex.md +3 -2
  233. package/docs/layouts/Gallery/examples/Gallery.css +2 -2
  234. package/docs/layouts/Gallery/examples/Gallery.md +4 -3
  235. package/docs/layouts/Grid/examples/Grid.css +1 -1
  236. package/docs/layouts/Grid/examples/Grid.md +6 -5
  237. package/docs/layouts/Level/examples/Level.css +3 -3
  238. package/docs/layouts/Level/examples/Level.md +2 -1
  239. package/docs/layouts/Split/examples/Split.css +1 -1
  240. package/docs/layouts/Split/examples/Split.md +2 -1
  241. package/docs/layouts/Stack/examples/Stack.css +3 -3
  242. package/docs/layouts/Stack/examples/Stack.md +2 -1
  243. package/docs/utilities/Accessibility/examples/Accessibility.md +3 -2
  244. package/docs/utilities/Alignment/examples/Alignment.css +4 -4
  245. package/docs/utilities/Alignment/examples/Alignment.md +3 -2
  246. package/docs/utilities/BackgroundColor/examples/BackgroundColor.md +5 -4
  247. package/docs/utilities/BoxShadow/examples/box-shadow.css +2 -2
  248. package/docs/utilities/BoxShadow/examples/box-shadow.md +2 -1
  249. package/docs/utilities/Display/examples/Display.css +1 -1
  250. package/docs/utilities/Display/examples/Display.md +3 -2
  251. package/docs/utilities/Flex/examples/Flex.css +7 -7
  252. package/docs/utilities/Flex/examples/Flex.md +3 -2
  253. package/docs/utilities/Float/examples/Float.css +2 -2
  254. package/docs/utilities/Float/examples/Float.md +3 -2
  255. package/docs/utilities/Sizing/examples/Sizing.md +8 -7
  256. package/docs/utilities/Spacing/examples/Spacing.css +2 -2
  257. package/docs/utilities/Spacing/examples/Spacing.md +3 -2
  258. package/docs/utilities/Text/examples/Text.md +5 -4
  259. package/icons/PfIcons/add-circle-o.svg +4 -0
  260. package/icons/PfIcons/ansible-tower.svg +4 -0
  261. package/icons/PfIcons/applications.svg +4 -0
  262. package/icons/PfIcons/arrow.svg +4 -0
  263. package/icons/PfIcons/asleep.svg +4 -0
  264. package/icons/PfIcons/attention-bell.svg +4 -0
  265. package/icons/PfIcons/automation.svg +4 -0
  266. package/icons/PfIcons/bell.svg +4 -0
  267. package/icons/PfIcons/blueprint.svg +4 -0
  268. package/icons/PfIcons/build.svg +4 -0
  269. package/icons/PfIcons/builder-image.svg +4 -0
  270. package/icons/PfIcons/bundle.svg +4 -0
  271. package/icons/PfIcons/catalog.svg +4 -0
  272. package/icons/PfIcons/chat.svg +4 -0
  273. package/icons/PfIcons/close.svg +4 -0
  274. package/icons/PfIcons/cloud-security.svg +4 -0
  275. package/icons/PfIcons/cloud-tenant.svg +4 -0
  276. package/icons/PfIcons/cluster.svg +4 -0
  277. package/icons/PfIcons/connected.svg +4 -0
  278. package/icons/PfIcons/container-node.svg +4 -0
  279. package/icons/PfIcons/cpu.svg +4 -0
  280. package/icons/PfIcons/critical-risk.svg +4 -0
  281. package/icons/PfIcons/data-processor.svg +4 -0
  282. package/icons/PfIcons/data-sink.svg +4 -0
  283. package/icons/PfIcons/data-source.svg +4 -0
  284. package/icons/PfIcons/degraded.svg +4 -0
  285. package/icons/PfIcons/disconnected.svg +4 -0
  286. package/icons/PfIcons/domain.svg +4 -0
  287. package/icons/PfIcons/edit.svg +4 -0
  288. package/icons/PfIcons/enhancement.svg +4 -0
  289. package/icons/PfIcons/enterprise.svg +4 -0
  290. package/icons/PfIcons/equalizer.svg +4 -0
  291. package/icons/PfIcons/error-circle-o.svg +4 -0
  292. package/icons/PfIcons/export.svg +4 -0
  293. package/icons/PfIcons/filter.svg +4 -0
  294. package/icons/PfIcons/flavor.svg +4 -0
  295. package/icons/PfIcons/folder-close.svg +4 -0
  296. package/icons/PfIcons/folder-open.svg +4 -0
  297. package/icons/PfIcons/globe-route.svg +4 -0
  298. package/icons/PfIcons/help.svg +4 -0
  299. package/icons/PfIcons/history.svg +4 -0
  300. package/icons/PfIcons/home.svg +4 -0
  301. package/icons/PfIcons/import.svg +4 -0
  302. package/icons/PfIcons/in-progress.svg +4 -0
  303. package/icons/PfIcons/info.svg +4 -0
  304. package/icons/PfIcons/infrastructure.svg +4 -0
  305. package/icons/PfIcons/integration.svg +4 -0
  306. package/icons/PfIcons/key.svg +4 -0
  307. package/icons/PfIcons/locked.svg +4 -0
  308. package/icons/PfIcons/maintenance.svg +4 -0
  309. package/icons/PfIcons/memory.svg +4 -0
  310. package/icons/PfIcons/messages.svg +4 -0
  311. package/icons/PfIcons/middleware.svg +4 -0
  312. package/icons/PfIcons/migration.svg +4 -0
  313. package/icons/PfIcons/module.svg +4 -0
  314. package/icons/PfIcons/monitoring.svg +4 -0
  315. package/icons/PfIcons/multicluster.svg +4 -0
  316. package/icons/PfIcons/namespaces.svg +4 -0
  317. package/icons/PfIcons/network.svg +4 -0
  318. package/icons/PfIcons/new-process.svg +4 -0
  319. package/icons/PfIcons/not-started.svg +4 -0
  320. package/icons/PfIcons/off.svg +4 -0
  321. package/icons/PfIcons/ok.svg +4 -0
  322. package/icons/PfIcons/on-running.svg +4 -0
  323. package/icons/PfIcons/on.svg +4 -0
  324. package/icons/PfIcons/open-drawer-right.svg +4 -0
  325. package/icons/PfIcons/openshift.svg +4 -0
  326. package/icons/PfIcons/openstack.svg +4 -0
  327. package/icons/PfIcons/optimize.svg +4 -0
  328. package/icons/PfIcons/orders.svg +4 -0
  329. package/icons/PfIcons/os-image.svg +4 -0
  330. package/icons/PfIcons/package.svg +4 -0
  331. package/icons/PfIcons/panel-close.svg +4 -0
  332. package/icons/PfIcons/panel-open.svg +4 -0
  333. package/icons/PfIcons/paused.svg +4 -0
  334. package/icons/PfIcons/pending.svg +4 -0
  335. package/icons/PfIcons/pficon-dragdrop.svg +4 -0
  336. package/icons/PfIcons/pficon-history.svg +4 -0
  337. package/icons/PfIcons/pficon-network-range.svg +4 -0
  338. package/icons/PfIcons/pficon-satellite.svg +4 -0
  339. package/icons/PfIcons/pficon-sort-common-asc.svg +4 -0
  340. package/icons/PfIcons/pficon-sort-common-desc.svg +4 -0
  341. package/icons/PfIcons/pficon-template.svg +4 -0
  342. package/icons/PfIcons/pficon-vcenter.svg +4 -0
  343. package/icons/PfIcons/plugged.svg +4 -0
  344. package/icons/PfIcons/port.svg +4 -0
  345. package/icons/PfIcons/print.svg +4 -0
  346. package/icons/PfIcons/private.svg +4 -0
  347. package/icons/PfIcons/process-automation.svg +4 -0
  348. package/icons/PfIcons/project.svg +4 -0
  349. package/icons/PfIcons/rebalance.svg +4 -0
  350. package/icons/PfIcons/rebooting.svg +4 -0
  351. package/icons/PfIcons/regions.svg +4 -0
  352. package/icons/PfIcons/registry.svg +4 -0
  353. package/icons/PfIcons/remove2.svg +4 -0
  354. package/icons/PfIcons/replicator.svg +4 -0
  355. package/icons/PfIcons/repository.svg +4 -0
  356. package/icons/PfIcons/resource-pool.svg +4 -0
  357. package/icons/PfIcons/resources-almost-empty.svg +4 -0
  358. package/icons/PfIcons/resources-almost-full.svg +4 -0
  359. package/icons/PfIcons/resources-empty.svg +4 -0
  360. package/icons/PfIcons/resources-full.svg +4 -0
  361. package/icons/PfIcons/running.svg +4 -0
  362. package/icons/PfIcons/save.svg +4 -0
  363. package/icons/PfIcons/screen.svg +4 -0
  364. package/icons/PfIcons/security.svg +4 -0
  365. package/icons/PfIcons/server-group.svg +4 -0
  366. package/icons/PfIcons/server.svg +4 -0
  367. package/icons/PfIcons/service-catalog.svg +4 -0
  368. package/icons/PfIcons/service.svg +4 -0
  369. package/icons/PfIcons/services.svg +4 -0
  370. package/icons/PfIcons/severity-critical.svg +4 -0
  371. package/icons/PfIcons/severity-important.svg +4 -0
  372. package/icons/PfIcons/severity-minor.svg +4 -0
  373. package/icons/PfIcons/severity-moderate.svg +4 -0
  374. package/icons/PfIcons/severity-none.svg +4 -0
  375. package/icons/PfIcons/severity-undefined.svg +4 -0
  376. package/icons/PfIcons/spinner.svg +4 -0
  377. package/icons/PfIcons/spinner2.svg +4 -0
  378. package/icons/PfIcons/storage-domain.svg +4 -0
  379. package/icons/PfIcons/task.svg +4 -0
  380. package/icons/PfIcons/tenant.svg +4 -0
  381. package/icons/PfIcons/thumb-tack.svg +4 -0
  382. package/icons/PfIcons/topology.svg +4 -0
  383. package/icons/PfIcons/treeview.svg +4 -0
  384. package/icons/PfIcons/trend-down.svg +4 -0
  385. package/icons/PfIcons/trend-up.svg +4 -0
  386. package/icons/PfIcons/unknown.svg +4 -0
  387. package/icons/PfIcons/unlocked.svg +4 -0
  388. package/icons/PfIcons/unplugged.svg +4 -0
  389. package/icons/PfIcons/user.svg +4 -0
  390. package/icons/PfIcons/users.svg +4 -0
  391. package/icons/PfIcons/virtual-machine.svg +4 -0
  392. package/icons/PfIcons/volume.svg +4 -0
  393. package/icons/PfIcons/warning-triangle.svg +4 -0
  394. package/icons/PfIcons/zone.svg +4 -0
  395. package/layouts/Flex/flex.scss +83 -19
  396. package/layouts/Gallery/gallery.css +6 -2
  397. package/layouts/_index.css +6 -2
  398. package/package.json +55 -17
  399. package/patternfly-base-no-globals.css +969 -489
  400. package/patternfly-base.css +976 -489
  401. package/patternfly-charts.css +3 -3
  402. package/patternfly-no-globals.css +3623 -1194
  403. package/patternfly.css +3630 -1194
  404. package/patternfly.min.css +1 -1
  405. package/patternfly.min.css.map +1 -1
  406. package/patternfly.scss +48 -0
  407. package/sass-utilities/functions.scss +32 -25
  408. package/sass-utilities/mixins.scss +54 -23
  409. package/sass-utilities/namespaces-components.scss +6 -0
  410. package/sass-utilities/scss-variables.scss +3 -0
package/docs/demos/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">
@@ -146,7 +147,19 @@ wrapperTag: div
146
147
  aria-label="Application launcher"
147
148
  >
148
149
  <span class="pf-v6-c-menu-toggle__icon">
149
- <i class="fas fa-th" aria-hidden="true"></i>
150
+ <svg
151
+ class="pf-v6-svg"
152
+ viewBox="0 0 512 512"
153
+ fill="currentColor"
154
+ aria-hidden="true"
155
+ role="img"
156
+ width="1em"
157
+ height="1em"
158
+ >
159
+ <path
160
+ d="M149.333 56v80c0 13.255-10.745 24-24 24H24c-13.255 0-24-10.745-24-24V56c0-13.255 10.745-24 24-24h101.333c13.255 0 24 10.745 24 24zm181.334 240v-80c0-13.255-10.745-24-24-24H205.333c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24h101.333c13.256 0 24.001-10.745 24.001-24zm32-240v80c0 13.255 10.745 24 24 24H488c13.255 0 24-10.745 24-24V56c0-13.255-10.745-24-24-24H386.667c-13.255 0-24 10.745-24 24zm-32 80V56c0-13.255-10.745-24-24-24H205.333c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24h101.333c13.256 0 24.001-10.745 24.001-24zm-205.334 56H24c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24h101.333c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24zM0 376v80c0 13.255 10.745 24 24 24h101.333c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H24c-13.255 0-24 10.745-24 24zm386.667-56H488c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H386.667c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24zm0 160H488c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H386.667c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24zM181.333 376v80c0 13.255 10.745 24 24 24h101.333c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H205.333c-13.255 0-24 10.745-24 24z"
161
+ />
162
+ </svg>
150
163
  </span>
151
164
  </button>
152
165
  </div>
@@ -158,7 +171,19 @@ wrapperTag: div
158
171
  aria-label="Settings"
159
172
  >
160
173
  <span class="pf-v6-c-menu-toggle__icon">
161
- <i class="fas fa-cog" aria-hidden="true"></i>
174
+ <svg
175
+ class="pf-v6-svg"
176
+ viewBox="0 0 32 32"
177
+ fill="currentColor"
178
+ aria-hidden="true"
179
+ role="img"
180
+ width="1em"
181
+ height="1em"
182
+ >
183
+ <path
184
+ d="M30.168 12.894a.5.5 0 0 0-.488-.394h-2.732a11.512 11.512 0 0 0-.729-1.769l1.931-1.93a.5.5 0 0 0 .066-.625 14.693 14.693 0 0 0-4.393-4.392.498.498 0 0 0-.624.067l-1.93 1.93a11.512 11.512 0 0 0-1.769-.729V2.319a.5.5 0 0 0-.395-.489 14.81 14.81 0 0 0-6.211 0 .5.5 0 0 0-.395.489v2.733c-.614.196-1.207.439-1.769.729L8.8 3.851a.498.498 0 0 0-.624-.067 14.714 14.714 0 0 0-4.393 4.392.5.5 0 0 0 .066.625l1.931 1.93a11.512 11.512 0 0 0-.729 1.769H2.319a.5.5 0 0 0-.488.394 14.652 14.652 0 0 0 0 6.212.5.5 0 0 0 .488.394h2.732c.196.615.44 1.207.729 1.769l-1.931 1.93a.5.5 0 0 0-.066.625 14.673 14.673 0 0 0 4.393 4.392.498.498 0 0 0 .624-.067l1.93-1.93c.562.289 1.154.533 1.769.729v2.733a.5.5 0 0 0 .395.489 14.686 14.686 0 0 0 6.21 0 .5.5 0 0 0 .395-.489v-2.733a11.454 11.454 0 0 0 1.769-.729l1.93 1.93a.5.5 0 0 0 .624.067 14.714 14.714 0 0 0 4.393-4.392.5.5 0 0 0-.066-.625l-1.931-1.93c.289-.562.533-1.154.729-1.769h2.732a.5.5 0 0 0 .488-.394 14.652 14.652 0 0 0 0-6.212ZM16 21.25c-2.895 0-5.25-2.355-5.25-5.25s2.355-5.25 5.25-5.25 5.25 2.355 5.25 5.25-2.355 5.25-5.25 5.25Z"
185
+ />
186
+ </svg>
162
187
  </span>
163
188
  </button>
164
189
  </div>
@@ -170,7 +195,19 @@ wrapperTag: div
170
195
  aria-label="Help"
171
196
  >
172
197
  <span class="pf-v6-c-menu-toggle__icon">
173
- <i class="fas fa-question-circle" aria-hidden="true"></i>
198
+ <svg
199
+ class="pf-v6-svg"
200
+ viewBox="0 0 512 512"
201
+ fill="currentColor"
202
+ aria-hidden="true"
203
+ role="img"
204
+ width="1em"
205
+ height="1em"
206
+ >
207
+ <path
208
+ d="M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zM262.655 90c-54.497 0-89.255 22.957-116.549 63.758-3.536 5.286-2.353 12.415 2.715 16.258l34.699 26.31c5.205 3.947 12.621 3.008 16.665-2.122 17.864-22.658 30.113-35.797 57.303-35.797 20.429 0 45.698 13.148 45.698 32.958 0 14.976-12.363 22.667-32.534 33.976C247.128 238.528 216 254.941 216 296v4c0 6.627 5.373 12 12 12h56c6.627 0 12-5.373 12-12v-1.333c0-28.462 83.186-29.647 83.186-106.667 0-58.002-60.165-102-116.531-102zM256 338c-25.365 0-46 20.635-46 46 0 25.364 20.635 46 46 46s46-20.636 46-46c0-25.365-20.635-46-46-46z"
209
+ />
210
+ </svg>
174
211
  </span>
175
212
  </button>
176
213
  </div>
@@ -184,7 +221,19 @@ wrapperTag: div
184
221
  aria-label="Actions"
185
222
  >
186
223
  <span class="pf-v6-c-menu-toggle__icon">
187
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
224
+ <svg
225
+ class="pf-v6-svg"
226
+ viewBox="0 0 32 32"
227
+ fill="currentColor"
228
+ aria-hidden="true"
229
+ role="img"
230
+ width="1em"
231
+ height="1em"
232
+ >
233
+ <path
234
+ d="M12.25 5c0-2.068 1.683-3.75 3.75-3.75S19.75 2.932 19.75 5 18.067 8.75 16 8.75 12.25 7.068 12.25 5ZM16 12.25c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Zm0 11c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Z"
235
+ />
236
+ </svg>
188
237
  </span>
189
238
  </button>
190
239
  </div>
@@ -195,44 +244,46 @@ wrapperTag: div
195
244
  </div>
196
245
  </header>
197
246
  <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>
247
+ <div class="pf-v6-c-page__sidebar-main">
248
+ <div class="pf-v6-c-page__sidebar-body">
249
+ <nav
250
+ class="pf-v6-c-nav"
251
+ id="wizard-basic-example-primary-nav"
252
+ aria-label="Global"
253
+ >
254
+ <ul class="pf-v6-c-nav__list" role="list">
255
+ <li class="pf-v6-c-nav__item">
256
+ <a href="#" class="pf-v6-c-nav__link">
257
+ <span class="pf-v6-c-nav__link-text">System panel</span>
258
+ </a>
259
+ </li>
260
+ <li class="pf-v6-c-nav__item">
261
+ <a
262
+ href="#"
263
+ class="pf-v6-c-nav__link pf-m-current"
264
+ aria-current="page"
265
+ >
266
+ <span class="pf-v6-c-nav__link-text">Policy</span>
267
+ </a>
268
+ </li>
269
+ <li class="pf-v6-c-nav__item">
270
+ <a href="#" class="pf-v6-c-nav__link">
271
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
272
+ </a>
273
+ </li>
274
+ <li class="pf-v6-c-nav__item">
275
+ <a href="#" class="pf-v6-c-nav__link">
276
+ <span class="pf-v6-c-nav__link-text">Network services</span>
277
+ </a>
278
+ </li>
279
+ <li class="pf-v6-c-nav__item">
280
+ <a href="#" class="pf-v6-c-nav__link">
281
+ <span class="pf-v6-c-nav__link-text">Server</span>
282
+ </a>
283
+ </li>
284
+ </ul>
285
+ </nav>
286
+ </div>
236
287
  </div>
237
288
  </div>
238
289
  <div class="pf-v6-c-page__main-container" tabindex="-1">
@@ -250,21 +301,57 @@ wrapperTag: div
250
301
  </li>
251
302
  <li class="pf-v6-c-breadcrumb__item">
252
303
  <span class="pf-v6-c-breadcrumb__item-divider">
253
- <i class="fas fa-angle-right" aria-hidden="true"></i>
304
+ <svg
305
+ class="pf-v6-svg"
306
+ viewBox="0 0 20 20"
307
+ fill="currentColor"
308
+ aria-hidden="true"
309
+ role="img"
310
+ width="1em"
311
+ height="1em"
312
+ >
313
+ <path
314
+ 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"
315
+ />
316
+ </svg>
254
317
  </span>
255
318
 
256
319
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
257
320
  </li>
258
321
  <li class="pf-v6-c-breadcrumb__item">
259
322
  <span class="pf-v6-c-breadcrumb__item-divider">
260
- <i class="fas fa-angle-right" aria-hidden="true"></i>
323
+ <svg
324
+ class="pf-v6-svg"
325
+ viewBox="0 0 20 20"
326
+ fill="currentColor"
327
+ aria-hidden="true"
328
+ role="img"
329
+ width="1em"
330
+ height="1em"
331
+ >
332
+ <path
333
+ 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"
334
+ />
335
+ </svg>
261
336
  </span>
262
337
 
263
338
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
264
339
  </li>
265
340
  <li class="pf-v6-c-breadcrumb__item">
266
341
  <span class="pf-v6-c-breadcrumb__item-divider">
267
- <i class="fas fa-angle-right" aria-hidden="true"></i>
342
+ <svg
343
+ class="pf-v6-svg"
344
+ viewBox="0 0 20 20"
345
+ fill="currentColor"
346
+ aria-hidden="true"
347
+ role="img"
348
+ width="1em"
349
+ height="1em"
350
+ >
351
+ <path
352
+ 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"
353
+ />
354
+ </svg>
268
355
  </span>
269
356
 
270
357
  <a
@@ -277,9 +364,15 @@ wrapperTag: div
277
364
  </nav>
278
365
  </div>
279
366
  </section>
280
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
367
+ <section
368
+ class="pf-v6-c-page__main-section pf-m-limit-width"
369
+ aria-labelledby="main-title"
370
+ >
281
371
  <div class="pf-v6-c-page__main-body">
282
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
372
+ <h1
373
+ class="pf-v6-c-content--h1 pf-m-page-title"
374
+ id="main-title"
375
+ >Main title</h1>
283
376
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
284
377
  </div>
285
378
  </section>
@@ -339,7 +432,19 @@ wrapperTag: div
339
432
  aria-label="Close"
340
433
  >
341
434
  <span class="pf-v6-c-button__icon">
342
- <i class="fas fa-times" aria-hidden="true"></i>
435
+ <svg
436
+ class="pf-v6-svg"
437
+ viewBox="0 0 20 20"
438
+ fill="currentColor"
439
+ aria-hidden="true"
440
+ role="img"
441
+ width="1em"
442
+ height="1em"
443
+ >
444
+ <path
445
+ 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"
446
+ />
447
+ </svg>
343
448
  </span>
344
449
  </button>
345
450
  </div>
@@ -359,10 +464,23 @@ wrapperTag: div
359
464
  <span class="pf-v6-c-wizard__toggle-list-item">
360
465
  <span class="pf-v6-c-wizard__toggle-num">2</span>
361
466
  Configuration
362
- <i
363
- class="fas fa-angle-right pf-v6-c-wizard__toggle-separator"
364
- aria-hidden="true"
365
- ></i>
467
+ <span
468
+ class="pf-v6-c-wizard__toggle-separator"
469
+ >
470
+ <svg
471
+ class="pf-v6-svg"
472
+ viewBox="0 0 20 20"
473
+ fill="currentColor"
474
+ aria-hidden="true"
475
+ role="img"
476
+ width="1em"
477
+ height="1em"
478
+ >
479
+ <path
480
+ 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"
481
+ />
482
+ </svg>
483
+ </span>
366
484
  </span>
367
485
  <span class="pf-v6-c-wizard__toggle-list-item">Substep B</span>
368
486
  </span>
@@ -393,7 +511,19 @@ wrapperTag: div
393
511
  <span class="pf-v6-c-wizard__nav-link-text">Configuration</span>
394
512
  <span class="pf-v6-c-wizard__nav-link-toggle">
395
513
  <span class="pf-v6-c-wizard__nav-link-toggle-icon">
396
- <i class="fas fa-angle-right" aria-hidden="true"></i>
514
+ <svg
515
+ class="pf-v6-svg"
516
+ viewBox="0 0 20 20"
517
+ fill="currentColor"
518
+ aria-hidden="true"
519
+ role="img"
520
+ width="1em"
521
+ height="1em"
522
+ >
523
+ <path
524
+ 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"
525
+ />
526
+ </svg>
397
527
  </span>
398
528
  </span>
399
529
  </span>
@@ -637,7 +767,8 @@ wrapperTag: div
637
767
  <span class="pf-v6-c-button__text">Skip to content</span>
638
768
  </a>
639
769
  </div>
640
- <header class="pf-v6-c-masthead" id="wizard-nav-expanded-example-masthead">
770
+
771
+ <header class="pf-v6-c-masthead" id="wizard-nav-expanded-example-docked">
641
772
  <div class="pf-v6-c-masthead__main">
642
773
  <span class="pf-v6-c-masthead__toggle">
643
774
  <button
@@ -679,7 +810,7 @@ wrapperTag: div
679
810
  y1="2.25860997e-13%"
680
811
  x2="32%"
681
812
  y2="100%"
682
- id="linearGradient-wizard-nav-expanded-example-masthead"
813
+ id="linearGradient-wizard-nav-expanded-example-docked"
683
814
  >
684
815
  <stop stop-color="#2B9AF3" offset="0%" />
685
816
  <stop
@@ -733,11 +864,11 @@ wrapperTag: div
733
864
  />
734
865
  <path
735
866
  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)"
867
+ fill="url(#linearGradient-wizard-nav-expanded-example-docked)"
737
868
  />
738
869
  <path
739
870
  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)"
871
+ fill="url(#linearGradient-wizard-nav-expanded-example-docked)"
741
872
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
742
873
  />
743
874
  </g>
@@ -749,7 +880,7 @@ wrapperTag: div
749
880
  <div class="pf-v6-c-masthead__content">
750
881
  <div
751
882
  class="pf-v6-c-toolbar pf-m-static"
752
- id="wizard-nav-expanded-example-masthead-toolbar"
883
+ id="wizard-nav-expanded-example-docked-toolbar"
753
884
  >
754
885
  <div class="pf-v6-c-toolbar__content">
755
886
  <div class="pf-v6-c-toolbar__content-section">
@@ -767,7 +898,19 @@ wrapperTag: div
767
898
  aria-label="Application launcher"
768
899
  >
769
900
  <span class="pf-v6-c-menu-toggle__icon">
770
- <i class="fas fa-th" aria-hidden="true"></i>
901
+ <svg
902
+ class="pf-v6-svg"
903
+ viewBox="0 0 512 512"
904
+ fill="currentColor"
905
+ aria-hidden="true"
906
+ role="img"
907
+ width="1em"
908
+ height="1em"
909
+ >
910
+ <path
911
+ d="M149.333 56v80c0 13.255-10.745 24-24 24H24c-13.255 0-24-10.745-24-24V56c0-13.255 10.745-24 24-24h101.333c13.255 0 24 10.745 24 24zm181.334 240v-80c0-13.255-10.745-24-24-24H205.333c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24h101.333c13.256 0 24.001-10.745 24.001-24zm32-240v80c0 13.255 10.745 24 24 24H488c13.255 0 24-10.745 24-24V56c0-13.255-10.745-24-24-24H386.667c-13.255 0-24 10.745-24 24zm-32 80V56c0-13.255-10.745-24-24-24H205.333c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24h101.333c13.256 0 24.001-10.745 24.001-24zm-205.334 56H24c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24h101.333c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24zM0 376v80c0 13.255 10.745 24 24 24h101.333c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H24c-13.255 0-24 10.745-24 24zm386.667-56H488c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H386.667c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24zm0 160H488c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H386.667c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24zM181.333 376v80c0 13.255 10.745 24 24 24h101.333c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H205.333c-13.255 0-24 10.745-24 24z"
912
+ />
913
+ </svg>
771
914
  </span>
772
915
  </button>
773
916
  </div>
@@ -779,7 +922,19 @@ wrapperTag: div
779
922
  aria-label="Settings"
780
923
  >
781
924
  <span class="pf-v6-c-menu-toggle__icon">
782
- <i class="fas fa-cog" aria-hidden="true"></i>
925
+ <svg
926
+ class="pf-v6-svg"
927
+ viewBox="0 0 32 32"
928
+ fill="currentColor"
929
+ aria-hidden="true"
930
+ role="img"
931
+ width="1em"
932
+ height="1em"
933
+ >
934
+ <path
935
+ d="M30.168 12.894a.5.5 0 0 0-.488-.394h-2.732a11.512 11.512 0 0 0-.729-1.769l1.931-1.93a.5.5 0 0 0 .066-.625 14.693 14.693 0 0 0-4.393-4.392.498.498 0 0 0-.624.067l-1.93 1.93a11.512 11.512 0 0 0-1.769-.729V2.319a.5.5 0 0 0-.395-.489 14.81 14.81 0 0 0-6.211 0 .5.5 0 0 0-.395.489v2.733c-.614.196-1.207.439-1.769.729L8.8 3.851a.498.498 0 0 0-.624-.067 14.714 14.714 0 0 0-4.393 4.392.5.5 0 0 0 .066.625l1.931 1.93a11.512 11.512 0 0 0-.729 1.769H2.319a.5.5 0 0 0-.488.394 14.652 14.652 0 0 0 0 6.212.5.5 0 0 0 .488.394h2.732c.196.615.44 1.207.729 1.769l-1.931 1.93a.5.5 0 0 0-.066.625 14.673 14.673 0 0 0 4.393 4.392.498.498 0 0 0 .624-.067l1.93-1.93c.562.289 1.154.533 1.769.729v2.733a.5.5 0 0 0 .395.489 14.686 14.686 0 0 0 6.21 0 .5.5 0 0 0 .395-.489v-2.733a11.454 11.454 0 0 0 1.769-.729l1.93 1.93a.5.5 0 0 0 .624.067 14.714 14.714 0 0 0 4.393-4.392.5.5 0 0 0-.066-.625l-1.931-1.93c.289-.562.533-1.154.729-1.769h2.732a.5.5 0 0 0 .488-.394 14.652 14.652 0 0 0 0-6.212ZM16 21.25c-2.895 0-5.25-2.355-5.25-5.25s2.355-5.25 5.25-5.25 5.25 2.355 5.25 5.25-2.355 5.25-5.25 5.25Z"
936
+ />
937
+ </svg>
783
938
  </span>
784
939
  </button>
785
940
  </div>
@@ -791,7 +946,19 @@ wrapperTag: div
791
946
  aria-label="Help"
792
947
  >
793
948
  <span class="pf-v6-c-menu-toggle__icon">
794
- <i class="fas fa-question-circle" aria-hidden="true"></i>
949
+ <svg
950
+ class="pf-v6-svg"
951
+ viewBox="0 0 512 512"
952
+ fill="currentColor"
953
+ aria-hidden="true"
954
+ role="img"
955
+ width="1em"
956
+ height="1em"
957
+ >
958
+ <path
959
+ d="M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zM262.655 90c-54.497 0-89.255 22.957-116.549 63.758-3.536 5.286-2.353 12.415 2.715 16.258l34.699 26.31c5.205 3.947 12.621 3.008 16.665-2.122 17.864-22.658 30.113-35.797 57.303-35.797 20.429 0 45.698 13.148 45.698 32.958 0 14.976-12.363 22.667-32.534 33.976C247.128 238.528 216 254.941 216 296v4c0 6.627 5.373 12 12 12h56c6.627 0 12-5.373 12-12v-1.333c0-28.462 83.186-29.647 83.186-106.667 0-58.002-60.165-102-116.531-102zM256 338c-25.365 0-46 20.635-46 46 0 25.364 20.635 46 46 46s46-20.636 46-46c0-25.365-20.635-46-46-46z"
960
+ />
961
+ </svg>
795
962
  </span>
796
963
  </button>
797
964
  </div>
@@ -805,7 +972,19 @@ wrapperTag: div
805
972
  aria-label="Actions"
806
973
  >
807
974
  <span class="pf-v6-c-menu-toggle__icon">
808
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
975
+ <svg
976
+ class="pf-v6-svg"
977
+ viewBox="0 0 32 32"
978
+ fill="currentColor"
979
+ aria-hidden="true"
980
+ role="img"
981
+ width="1em"
982
+ height="1em"
983
+ >
984
+ <path
985
+ d="M12.25 5c0-2.068 1.683-3.75 3.75-3.75S19.75 2.932 19.75 5 18.067 8.75 16 8.75 12.25 7.068 12.25 5ZM16 12.25c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Zm0 11c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Z"
986
+ />
987
+ </svg>
809
988
  </span>
810
989
  </button>
811
990
  </div>
@@ -816,44 +995,46 @@ wrapperTag: div
816
995
  </div>
817
996
  </header>
818
997
  <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>
998
+ <div class="pf-v6-c-page__sidebar-main">
999
+ <div class="pf-v6-c-page__sidebar-body">
1000
+ <nav
1001
+ class="pf-v6-c-nav"
1002
+ id="wizard-nav-expanded-example-primary-nav"
1003
+ aria-label="Global"
1004
+ >
1005
+ <ul class="pf-v6-c-nav__list" role="list">
1006
+ <li class="pf-v6-c-nav__item">
1007
+ <a href="#" class="pf-v6-c-nav__link">
1008
+ <span class="pf-v6-c-nav__link-text">System panel</span>
1009
+ </a>
1010
+ </li>
1011
+ <li class="pf-v6-c-nav__item">
1012
+ <a
1013
+ href="#"
1014
+ class="pf-v6-c-nav__link pf-m-current"
1015
+ aria-current="page"
1016
+ >
1017
+ <span class="pf-v6-c-nav__link-text">Policy</span>
1018
+ </a>
1019
+ </li>
1020
+ <li class="pf-v6-c-nav__item">
1021
+ <a href="#" class="pf-v6-c-nav__link">
1022
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
1023
+ </a>
1024
+ </li>
1025
+ <li class="pf-v6-c-nav__item">
1026
+ <a href="#" class="pf-v6-c-nav__link">
1027
+ <span class="pf-v6-c-nav__link-text">Network services</span>
1028
+ </a>
1029
+ </li>
1030
+ <li class="pf-v6-c-nav__item">
1031
+ <a href="#" class="pf-v6-c-nav__link">
1032
+ <span class="pf-v6-c-nav__link-text">Server</span>
1033
+ </a>
1034
+ </li>
1035
+ </ul>
1036
+ </nav>
1037
+ </div>
857
1038
  </div>
858
1039
  </div>
859
1040
  <div class="pf-v6-c-page__main-container" tabindex="-1">
@@ -871,21 +1052,57 @@ wrapperTag: div
871
1052
  </li>
872
1053
  <li class="pf-v6-c-breadcrumb__item">
873
1054
  <span class="pf-v6-c-breadcrumb__item-divider">
874
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1055
+ <svg
1056
+ class="pf-v6-svg"
1057
+ viewBox="0 0 20 20"
1058
+ fill="currentColor"
1059
+ aria-hidden="true"
1060
+ role="img"
1061
+ width="1em"
1062
+ height="1em"
1063
+ >
1064
+ <path
1065
+ 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"
1066
+ />
1067
+ </svg>
875
1068
  </span>
876
1069
 
877
1070
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
878
1071
  </li>
879
1072
  <li class="pf-v6-c-breadcrumb__item">
880
1073
  <span class="pf-v6-c-breadcrumb__item-divider">
881
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1074
+ <svg
1075
+ class="pf-v6-svg"
1076
+ viewBox="0 0 20 20"
1077
+ fill="currentColor"
1078
+ aria-hidden="true"
1079
+ role="img"
1080
+ width="1em"
1081
+ height="1em"
1082
+ >
1083
+ <path
1084
+ 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"
1085
+ />
1086
+ </svg>
882
1087
  </span>
883
1088
 
884
1089
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
885
1090
  </li>
886
1091
  <li class="pf-v6-c-breadcrumb__item">
887
1092
  <span class="pf-v6-c-breadcrumb__item-divider">
888
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1093
+ <svg
1094
+ class="pf-v6-svg"
1095
+ viewBox="0 0 20 20"
1096
+ fill="currentColor"
1097
+ aria-hidden="true"
1098
+ role="img"
1099
+ width="1em"
1100
+ height="1em"
1101
+ >
1102
+ <path
1103
+ 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"
1104
+ />
1105
+ </svg>
889
1106
  </span>
890
1107
 
891
1108
  <a
@@ -898,9 +1115,15 @@ wrapperTag: div
898
1115
  </nav>
899
1116
  </div>
900
1117
  </section>
901
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
1118
+ <section
1119
+ class="pf-v6-c-page__main-section pf-m-limit-width"
1120
+ aria-labelledby="main-title"
1121
+ >
902
1122
  <div class="pf-v6-c-page__main-body">
903
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
1123
+ <h1
1124
+ class="pf-v6-c-content--h1 pf-m-page-title"
1125
+ id="main-title"
1126
+ >Main title</h1>
904
1127
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
905
1128
  </div>
906
1129
  </section>
@@ -960,7 +1183,19 @@ wrapperTag: div
960
1183
  aria-label="Close"
961
1184
  >
962
1185
  <span class="pf-v6-c-button__icon">
963
- <i class="fas fa-times" aria-hidden="true"></i>
1186
+ <svg
1187
+ class="pf-v6-svg"
1188
+ viewBox="0 0 20 20"
1189
+ fill="currentColor"
1190
+ aria-hidden="true"
1191
+ role="img"
1192
+ width="1em"
1193
+ height="1em"
1194
+ >
1195
+ <path
1196
+ 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"
1197
+ />
1198
+ </svg>
964
1199
  </span>
965
1200
  </button>
966
1201
  </div>
@@ -980,10 +1215,23 @@ wrapperTag: div
980
1215
  <span class="pf-v6-c-wizard__toggle-list-item">
981
1216
  <span class="pf-v6-c-wizard__toggle-num">2</span>
982
1217
  Configuration
983
- <i
984
- class="fas fa-angle-right pf-v6-c-wizard__toggle-separator"
985
- aria-hidden="true"
986
- ></i>
1218
+ <span
1219
+ class="pf-v6-c-wizard__toggle-separator"
1220
+ >
1221
+ <svg
1222
+ class="pf-v6-svg"
1223
+ viewBox="0 0 20 20"
1224
+ fill="currentColor"
1225
+ aria-hidden="true"
1226
+ role="img"
1227
+ width="1em"
1228
+ height="1em"
1229
+ >
1230
+ <path
1231
+ 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"
1232
+ />
1233
+ </svg>
1234
+ </span>
987
1235
  </span>
988
1236
  <span class="pf-v6-c-wizard__toggle-list-item">Substep B</span>
989
1237
  </span>
@@ -1014,7 +1262,19 @@ wrapperTag: div
1014
1262
  <span class="pf-v6-c-wizard__nav-link-text">Configuration</span>
1015
1263
  <span class="pf-v6-c-wizard__nav-link-toggle">
1016
1264
  <span class="pf-v6-c-wizard__nav-link-toggle-icon">
1017
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1265
+ <svg
1266
+ class="pf-v6-svg"
1267
+ viewBox="0 0 20 20"
1268
+ fill="currentColor"
1269
+ aria-hidden="true"
1270
+ role="img"
1271
+ width="1em"
1272
+ height="1em"
1273
+ >
1274
+ <path
1275
+ 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"
1276
+ />
1277
+ </svg>
1018
1278
  </span>
1019
1279
  </span>
1020
1280
  </span>
@@ -1237,9 +1497,10 @@ wrapperTag: div
1237
1497
  <span class="pf-v6-c-button__text">Skip to content</span>
1238
1498
  </a>
1239
1499
  </div>
1500
+
1240
1501
  <header
1241
1502
  class="pf-v6-c-masthead"
1242
- id="wizard-with-drawer-closed-example-masthead"
1503
+ id="wizard-with-drawer-closed-example-docked"
1243
1504
  >
1244
1505
  <div class="pf-v6-c-masthead__main">
1245
1506
  <span class="pf-v6-c-masthead__toggle">
@@ -1282,7 +1543,7 @@ wrapperTag: div
1282
1543
  y1="2.25860997e-13%"
1283
1544
  x2="32%"
1284
1545
  y2="100%"
1285
- id="linearGradient-wizard-with-drawer-closed-example-masthead"
1546
+ id="linearGradient-wizard-with-drawer-closed-example-docked"
1286
1547
  >
1287
1548
  <stop stop-color="#2B9AF3" offset="0%" />
1288
1549
  <stop
@@ -1336,11 +1597,11 @@ wrapperTag: div
1336
1597
  />
1337
1598
  <path
1338
1599
  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)"
1600
+ fill="url(#linearGradient-wizard-with-drawer-closed-example-docked)"
1340
1601
  />
1341
1602
  <path
1342
1603
  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)"
1604
+ fill="url(#linearGradient-wizard-with-drawer-closed-example-docked)"
1344
1605
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
1345
1606
  />
1346
1607
  </g>
@@ -1352,7 +1613,7 @@ wrapperTag: div
1352
1613
  <div class="pf-v6-c-masthead__content">
1353
1614
  <div
1354
1615
  class="pf-v6-c-toolbar pf-m-static"
1355
- id="wizard-with-drawer-closed-example-masthead-toolbar"
1616
+ id="wizard-with-drawer-closed-example-docked-toolbar"
1356
1617
  >
1357
1618
  <div class="pf-v6-c-toolbar__content">
1358
1619
  <div class="pf-v6-c-toolbar__content-section">
@@ -1370,7 +1631,19 @@ wrapperTag: div
1370
1631
  aria-label="Application launcher"
1371
1632
  >
1372
1633
  <span class="pf-v6-c-menu-toggle__icon">
1373
- <i class="fas fa-th" aria-hidden="true"></i>
1634
+ <svg
1635
+ class="pf-v6-svg"
1636
+ viewBox="0 0 512 512"
1637
+ fill="currentColor"
1638
+ aria-hidden="true"
1639
+ role="img"
1640
+ width="1em"
1641
+ height="1em"
1642
+ >
1643
+ <path
1644
+ d="M149.333 56v80c0 13.255-10.745 24-24 24H24c-13.255 0-24-10.745-24-24V56c0-13.255 10.745-24 24-24h101.333c13.255 0 24 10.745 24 24zm181.334 240v-80c0-13.255-10.745-24-24-24H205.333c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24h101.333c13.256 0 24.001-10.745 24.001-24zm32-240v80c0 13.255 10.745 24 24 24H488c13.255 0 24-10.745 24-24V56c0-13.255-10.745-24-24-24H386.667c-13.255 0-24 10.745-24 24zm-32 80V56c0-13.255-10.745-24-24-24H205.333c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24h101.333c13.256 0 24.001-10.745 24.001-24zm-205.334 56H24c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24h101.333c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24zM0 376v80c0 13.255 10.745 24 24 24h101.333c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H24c-13.255 0-24 10.745-24 24zm386.667-56H488c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H386.667c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24zm0 160H488c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H386.667c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24zM181.333 376v80c0 13.255 10.745 24 24 24h101.333c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H205.333c-13.255 0-24 10.745-24 24z"
1645
+ />
1646
+ </svg>
1374
1647
  </span>
1375
1648
  </button>
1376
1649
  </div>
@@ -1382,7 +1655,19 @@ wrapperTag: div
1382
1655
  aria-label="Settings"
1383
1656
  >
1384
1657
  <span class="pf-v6-c-menu-toggle__icon">
1385
- <i class="fas fa-cog" aria-hidden="true"></i>
1658
+ <svg
1659
+ class="pf-v6-svg"
1660
+ viewBox="0 0 32 32"
1661
+ fill="currentColor"
1662
+ aria-hidden="true"
1663
+ role="img"
1664
+ width="1em"
1665
+ height="1em"
1666
+ >
1667
+ <path
1668
+ d="M30.168 12.894a.5.5 0 0 0-.488-.394h-2.732a11.512 11.512 0 0 0-.729-1.769l1.931-1.93a.5.5 0 0 0 .066-.625 14.693 14.693 0 0 0-4.393-4.392.498.498 0 0 0-.624.067l-1.93 1.93a11.512 11.512 0 0 0-1.769-.729V2.319a.5.5 0 0 0-.395-.489 14.81 14.81 0 0 0-6.211 0 .5.5 0 0 0-.395.489v2.733c-.614.196-1.207.439-1.769.729L8.8 3.851a.498.498 0 0 0-.624-.067 14.714 14.714 0 0 0-4.393 4.392.5.5 0 0 0 .066.625l1.931 1.93a11.512 11.512 0 0 0-.729 1.769H2.319a.5.5 0 0 0-.488.394 14.652 14.652 0 0 0 0 6.212.5.5 0 0 0 .488.394h2.732c.196.615.44 1.207.729 1.769l-1.931 1.93a.5.5 0 0 0-.066.625 14.673 14.673 0 0 0 4.393 4.392.498.498 0 0 0 .624-.067l1.93-1.93c.562.289 1.154.533 1.769.729v2.733a.5.5 0 0 0 .395.489 14.686 14.686 0 0 0 6.21 0 .5.5 0 0 0 .395-.489v-2.733a11.454 11.454 0 0 0 1.769-.729l1.93 1.93a.5.5 0 0 0 .624.067 14.714 14.714 0 0 0 4.393-4.392.5.5 0 0 0-.066-.625l-1.931-1.93c.289-.562.533-1.154.729-1.769h2.732a.5.5 0 0 0 .488-.394 14.652 14.652 0 0 0 0-6.212ZM16 21.25c-2.895 0-5.25-2.355-5.25-5.25s2.355-5.25 5.25-5.25 5.25 2.355 5.25 5.25-2.355 5.25-5.25 5.25Z"
1669
+ />
1670
+ </svg>
1386
1671
  </span>
1387
1672
  </button>
1388
1673
  </div>
@@ -1394,7 +1679,19 @@ wrapperTag: div
1394
1679
  aria-label="Help"
1395
1680
  >
1396
1681
  <span class="pf-v6-c-menu-toggle__icon">
1397
- <i class="fas fa-question-circle" aria-hidden="true"></i>
1682
+ <svg
1683
+ class="pf-v6-svg"
1684
+ viewBox="0 0 512 512"
1685
+ fill="currentColor"
1686
+ aria-hidden="true"
1687
+ role="img"
1688
+ width="1em"
1689
+ height="1em"
1690
+ >
1691
+ <path
1692
+ d="M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zM262.655 90c-54.497 0-89.255 22.957-116.549 63.758-3.536 5.286-2.353 12.415 2.715 16.258l34.699 26.31c5.205 3.947 12.621 3.008 16.665-2.122 17.864-22.658 30.113-35.797 57.303-35.797 20.429 0 45.698 13.148 45.698 32.958 0 14.976-12.363 22.667-32.534 33.976C247.128 238.528 216 254.941 216 296v4c0 6.627 5.373 12 12 12h56c6.627 0 12-5.373 12-12v-1.333c0-28.462 83.186-29.647 83.186-106.667 0-58.002-60.165-102-116.531-102zM256 338c-25.365 0-46 20.635-46 46 0 25.364 20.635 46 46 46s46-20.636 46-46c0-25.365-20.635-46-46-46z"
1693
+ />
1694
+ </svg>
1398
1695
  </span>
1399
1696
  </button>
1400
1697
  </div>
@@ -1408,7 +1705,19 @@ wrapperTag: div
1408
1705
  aria-label="Actions"
1409
1706
  >
1410
1707
  <span class="pf-v6-c-menu-toggle__icon">
1411
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1708
+ <svg
1709
+ class="pf-v6-svg"
1710
+ viewBox="0 0 32 32"
1711
+ fill="currentColor"
1712
+ aria-hidden="true"
1713
+ role="img"
1714
+ width="1em"
1715
+ height="1em"
1716
+ >
1717
+ <path
1718
+ d="M12.25 5c0-2.068 1.683-3.75 3.75-3.75S19.75 2.932 19.75 5 18.067 8.75 16 8.75 12.25 7.068 12.25 5ZM16 12.25c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Zm0 11c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Z"
1719
+ />
1720
+ </svg>
1412
1721
  </span>
1413
1722
  </button>
1414
1723
  </div>
@@ -1419,44 +1728,46 @@ wrapperTag: div
1419
1728
  </div>
1420
1729
  </header>
1421
1730
  <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>
1731
+ <div class="pf-v6-c-page__sidebar-main">
1732
+ <div class="pf-v6-c-page__sidebar-body">
1733
+ <nav
1734
+ class="pf-v6-c-nav"
1735
+ id="wizard-with-drawer-closed-example-primary-nav"
1736
+ aria-label="Global"
1737
+ >
1738
+ <ul class="pf-v6-c-nav__list" role="list">
1739
+ <li class="pf-v6-c-nav__item">
1740
+ <a href="#" class="pf-v6-c-nav__link">
1741
+ <span class="pf-v6-c-nav__link-text">System panel</span>
1742
+ </a>
1743
+ </li>
1744
+ <li class="pf-v6-c-nav__item">
1745
+ <a
1746
+ href="#"
1747
+ class="pf-v6-c-nav__link pf-m-current"
1748
+ aria-current="page"
1749
+ >
1750
+ <span class="pf-v6-c-nav__link-text">Policy</span>
1751
+ </a>
1752
+ </li>
1753
+ <li class="pf-v6-c-nav__item">
1754
+ <a href="#" class="pf-v6-c-nav__link">
1755
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
1756
+ </a>
1757
+ </li>
1758
+ <li class="pf-v6-c-nav__item">
1759
+ <a href="#" class="pf-v6-c-nav__link">
1760
+ <span class="pf-v6-c-nav__link-text">Network services</span>
1761
+ </a>
1762
+ </li>
1763
+ <li class="pf-v6-c-nav__item">
1764
+ <a href="#" class="pf-v6-c-nav__link">
1765
+ <span class="pf-v6-c-nav__link-text">Server</span>
1766
+ </a>
1767
+ </li>
1768
+ </ul>
1769
+ </nav>
1770
+ </div>
1460
1771
  </div>
1461
1772
  </div>
1462
1773
  <div class="pf-v6-c-page__main-container" tabindex="-1">
@@ -1474,21 +1785,57 @@ wrapperTag: div
1474
1785
  </li>
1475
1786
  <li class="pf-v6-c-breadcrumb__item">
1476
1787
  <span class="pf-v6-c-breadcrumb__item-divider">
1477
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1788
+ <svg
1789
+ class="pf-v6-svg"
1790
+ viewBox="0 0 20 20"
1791
+ fill="currentColor"
1792
+ aria-hidden="true"
1793
+ role="img"
1794
+ width="1em"
1795
+ height="1em"
1796
+ >
1797
+ <path
1798
+ 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"
1799
+ />
1800
+ </svg>
1478
1801
  </span>
1479
1802
 
1480
1803
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1481
1804
  </li>
1482
1805
  <li class="pf-v6-c-breadcrumb__item">
1483
1806
  <span class="pf-v6-c-breadcrumb__item-divider">
1484
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1807
+ <svg
1808
+ class="pf-v6-svg"
1809
+ viewBox="0 0 20 20"
1810
+ fill="currentColor"
1811
+ aria-hidden="true"
1812
+ role="img"
1813
+ width="1em"
1814
+ height="1em"
1815
+ >
1816
+ <path
1817
+ 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"
1818
+ />
1819
+ </svg>
1485
1820
  </span>
1486
1821
 
1487
1822
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1488
1823
  </li>
1489
1824
  <li class="pf-v6-c-breadcrumb__item">
1490
1825
  <span class="pf-v6-c-breadcrumb__item-divider">
1491
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1826
+ <svg
1827
+ class="pf-v6-svg"
1828
+ viewBox="0 0 20 20"
1829
+ fill="currentColor"
1830
+ aria-hidden="true"
1831
+ role="img"
1832
+ width="1em"
1833
+ height="1em"
1834
+ >
1835
+ <path
1836
+ 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"
1837
+ />
1838
+ </svg>
1492
1839
  </span>
1493
1840
 
1494
1841
  <a
@@ -1501,9 +1848,15 @@ wrapperTag: div
1501
1848
  </nav>
1502
1849
  </div>
1503
1850
  </section>
1504
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
1851
+ <section
1852
+ class="pf-v6-c-page__main-section pf-m-limit-width"
1853
+ aria-labelledby="main-title"
1854
+ >
1505
1855
  <div class="pf-v6-c-page__main-body">
1506
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
1856
+ <h1
1857
+ class="pf-v6-c-content--h1 pf-m-page-title"
1858
+ id="main-title"
1859
+ >Main title</h1>
1507
1860
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
1508
1861
  </div>
1509
1862
  </section>
@@ -1563,7 +1916,19 @@ wrapperTag: div
1563
1916
  aria-label="Close"
1564
1917
  >
1565
1918
  <span class="pf-v6-c-button__icon">
1566
- <i class="fas fa-times" aria-hidden="true"></i>
1919
+ <svg
1920
+ class="pf-v6-svg"
1921
+ viewBox="0 0 20 20"
1922
+ fill="currentColor"
1923
+ aria-hidden="true"
1924
+ role="img"
1925
+ width="1em"
1926
+ height="1em"
1927
+ >
1928
+ <path
1929
+ 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"
1930
+ />
1931
+ </svg>
1567
1932
  </span>
1568
1933
  </button>
1569
1934
  </div>
@@ -1583,10 +1948,23 @@ wrapperTag: div
1583
1948
  <span class="pf-v6-c-wizard__toggle-list-item">
1584
1949
  <span class="pf-v6-c-wizard__toggle-num">2</span>
1585
1950
  Configuration
1586
- <i
1587
- class="fas fa-angle-right pf-v6-c-wizard__toggle-separator"
1588
- aria-hidden="true"
1589
- ></i>
1951
+ <span
1952
+ class="pf-v6-c-wizard__toggle-separator"
1953
+ >
1954
+ <svg
1955
+ class="pf-v6-svg"
1956
+ viewBox="0 0 20 20"
1957
+ fill="currentColor"
1958
+ aria-hidden="true"
1959
+ role="img"
1960
+ width="1em"
1961
+ height="1em"
1962
+ >
1963
+ <path
1964
+ 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"
1965
+ />
1966
+ </svg>
1967
+ </span>
1590
1968
  </span>
1591
1969
  <span class="pf-v6-c-wizard__toggle-list-item">Substep B</span>
1592
1970
  </span>
@@ -1617,7 +1995,19 @@ wrapperTag: div
1617
1995
  <span class="pf-v6-c-wizard__nav-link-text">Configuration</span>
1618
1996
  <span class="pf-v6-c-wizard__nav-link-toggle">
1619
1997
  <span class="pf-v6-c-wizard__nav-link-toggle-icon">
1620
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1998
+ <svg
1999
+ class="pf-v6-svg"
2000
+ viewBox="0 0 20 20"
2001
+ fill="currentColor"
2002
+ aria-hidden="true"
2003
+ role="img"
2004
+ width="1em"
2005
+ height="1em"
2006
+ >
2007
+ <path
2008
+ 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"
2009
+ />
2010
+ </svg>
1621
2011
  </span>
1622
2012
  </span>
1623
2013
  </span>
@@ -1838,7 +2228,19 @@ wrapperTag: div
1838
2228
  aria-label="Close drawer panel"
1839
2229
  >
1840
2230
  <span class="pf-v6-c-button__icon">
1841
- <i class="fas fa-times" aria-hidden="true"></i>
2231
+ <svg
2232
+ class="pf-v6-svg"
2233
+ viewBox="0 0 20 20"
2234
+ fill="currentColor"
2235
+ aria-hidden="true"
2236
+ role="img"
2237
+ width="1em"
2238
+ height="1em"
2239
+ >
2240
+ <path
2241
+ 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"
2242
+ />
2243
+ </svg>
1842
2244
  </span>
1843
2245
  </button>
1844
2246
  </div>
@@ -1924,9 +2326,10 @@ wrapperTag: div
1924
2326
  <span class="pf-v6-c-button__text">Skip to content</span>
1925
2327
  </a>
1926
2328
  </div>
2329
+
1927
2330
  <header
1928
2331
  class="pf-v6-c-masthead"
1929
- id="wizard-with-drawer-expanded-example-masthead"
2332
+ id="wizard-with-drawer-expanded-example-docked"
1930
2333
  >
1931
2334
  <div class="pf-v6-c-masthead__main">
1932
2335
  <span class="pf-v6-c-masthead__toggle">
@@ -1969,7 +2372,7 @@ wrapperTag: div
1969
2372
  y1="2.25860997e-13%"
1970
2373
  x2="32%"
1971
2374
  y2="100%"
1972
- id="linearGradient-wizard-with-drawer-expanded-example-masthead"
2375
+ id="linearGradient-wizard-with-drawer-expanded-example-docked"
1973
2376
  >
1974
2377
  <stop stop-color="#2B9AF3" offset="0%" />
1975
2378
  <stop
@@ -2023,11 +2426,11 @@ wrapperTag: div
2023
2426
  />
2024
2427
  <path
2025
2428
  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)"
2429
+ fill="url(#linearGradient-wizard-with-drawer-expanded-example-docked)"
2027
2430
  />
2028
2431
  <path
2029
2432
  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)"
2433
+ fill="url(#linearGradient-wizard-with-drawer-expanded-example-docked)"
2031
2434
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
2032
2435
  />
2033
2436
  </g>
@@ -2039,7 +2442,7 @@ wrapperTag: div
2039
2442
  <div class="pf-v6-c-masthead__content">
2040
2443
  <div
2041
2444
  class="pf-v6-c-toolbar pf-m-static"
2042
- id="wizard-with-drawer-expanded-example-masthead-toolbar"
2445
+ id="wizard-with-drawer-expanded-example-docked-toolbar"
2043
2446
  >
2044
2447
  <div class="pf-v6-c-toolbar__content">
2045
2448
  <div class="pf-v6-c-toolbar__content-section">
@@ -2057,7 +2460,19 @@ wrapperTag: div
2057
2460
  aria-label="Application launcher"
2058
2461
  >
2059
2462
  <span class="pf-v6-c-menu-toggle__icon">
2060
- <i class="fas fa-th" aria-hidden="true"></i>
2463
+ <svg
2464
+ class="pf-v6-svg"
2465
+ viewBox="0 0 512 512"
2466
+ fill="currentColor"
2467
+ aria-hidden="true"
2468
+ role="img"
2469
+ width="1em"
2470
+ height="1em"
2471
+ >
2472
+ <path
2473
+ d="M149.333 56v80c0 13.255-10.745 24-24 24H24c-13.255 0-24-10.745-24-24V56c0-13.255 10.745-24 24-24h101.333c13.255 0 24 10.745 24 24zm181.334 240v-80c0-13.255-10.745-24-24-24H205.333c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24h101.333c13.256 0 24.001-10.745 24.001-24zm32-240v80c0 13.255 10.745 24 24 24H488c13.255 0 24-10.745 24-24V56c0-13.255-10.745-24-24-24H386.667c-13.255 0-24 10.745-24 24zm-32 80V56c0-13.255-10.745-24-24-24H205.333c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24h101.333c13.256 0 24.001-10.745 24.001-24zm-205.334 56H24c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24h101.333c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24zM0 376v80c0 13.255 10.745 24 24 24h101.333c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H24c-13.255 0-24 10.745-24 24zm386.667-56H488c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H386.667c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24zm0 160H488c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H386.667c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24zM181.333 376v80c0 13.255 10.745 24 24 24h101.333c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H205.333c-13.255 0-24 10.745-24 24z"
2474
+ />
2475
+ </svg>
2061
2476
  </span>
2062
2477
  </button>
2063
2478
  </div>
@@ -2069,7 +2484,19 @@ wrapperTag: div
2069
2484
  aria-label="Settings"
2070
2485
  >
2071
2486
  <span class="pf-v6-c-menu-toggle__icon">
2072
- <i class="fas fa-cog" aria-hidden="true"></i>
2487
+ <svg
2488
+ class="pf-v6-svg"
2489
+ viewBox="0 0 32 32"
2490
+ fill="currentColor"
2491
+ aria-hidden="true"
2492
+ role="img"
2493
+ width="1em"
2494
+ height="1em"
2495
+ >
2496
+ <path
2497
+ d="M30.168 12.894a.5.5 0 0 0-.488-.394h-2.732a11.512 11.512 0 0 0-.729-1.769l1.931-1.93a.5.5 0 0 0 .066-.625 14.693 14.693 0 0 0-4.393-4.392.498.498 0 0 0-.624.067l-1.93 1.93a11.512 11.512 0 0 0-1.769-.729V2.319a.5.5 0 0 0-.395-.489 14.81 14.81 0 0 0-6.211 0 .5.5 0 0 0-.395.489v2.733c-.614.196-1.207.439-1.769.729L8.8 3.851a.498.498 0 0 0-.624-.067 14.714 14.714 0 0 0-4.393 4.392.5.5 0 0 0 .066.625l1.931 1.93a11.512 11.512 0 0 0-.729 1.769H2.319a.5.5 0 0 0-.488.394 14.652 14.652 0 0 0 0 6.212.5.5 0 0 0 .488.394h2.732c.196.615.44 1.207.729 1.769l-1.931 1.93a.5.5 0 0 0-.066.625 14.673 14.673 0 0 0 4.393 4.392.498.498 0 0 0 .624-.067l1.93-1.93c.562.289 1.154.533 1.769.729v2.733a.5.5 0 0 0 .395.489 14.686 14.686 0 0 0 6.21 0 .5.5 0 0 0 .395-.489v-2.733a11.454 11.454 0 0 0 1.769-.729l1.93 1.93a.5.5 0 0 0 .624.067 14.714 14.714 0 0 0 4.393-4.392.5.5 0 0 0-.066-.625l-1.931-1.93c.289-.562.533-1.154.729-1.769h2.732a.5.5 0 0 0 .488-.394 14.652 14.652 0 0 0 0-6.212ZM16 21.25c-2.895 0-5.25-2.355-5.25-5.25s2.355-5.25 5.25-5.25 5.25 2.355 5.25 5.25-2.355 5.25-5.25 5.25Z"
2498
+ />
2499
+ </svg>
2073
2500
  </span>
2074
2501
  </button>
2075
2502
  </div>
@@ -2081,7 +2508,19 @@ wrapperTag: div
2081
2508
  aria-label="Help"
2082
2509
  >
2083
2510
  <span class="pf-v6-c-menu-toggle__icon">
2084
- <i class="fas fa-question-circle" aria-hidden="true"></i>
2511
+ <svg
2512
+ class="pf-v6-svg"
2513
+ viewBox="0 0 512 512"
2514
+ fill="currentColor"
2515
+ aria-hidden="true"
2516
+ role="img"
2517
+ width="1em"
2518
+ height="1em"
2519
+ >
2520
+ <path
2521
+ d="M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zM262.655 90c-54.497 0-89.255 22.957-116.549 63.758-3.536 5.286-2.353 12.415 2.715 16.258l34.699 26.31c5.205 3.947 12.621 3.008 16.665-2.122 17.864-22.658 30.113-35.797 57.303-35.797 20.429 0 45.698 13.148 45.698 32.958 0 14.976-12.363 22.667-32.534 33.976C247.128 238.528 216 254.941 216 296v4c0 6.627 5.373 12 12 12h56c6.627 0 12-5.373 12-12v-1.333c0-28.462 83.186-29.647 83.186-106.667 0-58.002-60.165-102-116.531-102zM256 338c-25.365 0-46 20.635-46 46 0 25.364 20.635 46 46 46s46-20.636 46-46c0-25.365-20.635-46-46-46z"
2522
+ />
2523
+ </svg>
2085
2524
  </span>
2086
2525
  </button>
2087
2526
  </div>
@@ -2095,7 +2534,19 @@ wrapperTag: div
2095
2534
  aria-label="Actions"
2096
2535
  >
2097
2536
  <span class="pf-v6-c-menu-toggle__icon">
2098
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
2537
+ <svg
2538
+ class="pf-v6-svg"
2539
+ viewBox="0 0 32 32"
2540
+ fill="currentColor"
2541
+ aria-hidden="true"
2542
+ role="img"
2543
+ width="1em"
2544
+ height="1em"
2545
+ >
2546
+ <path
2547
+ d="M12.25 5c0-2.068 1.683-3.75 3.75-3.75S19.75 2.932 19.75 5 18.067 8.75 16 8.75 12.25 7.068 12.25 5ZM16 12.25c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Zm0 11c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Z"
2548
+ />
2549
+ </svg>
2099
2550
  </span>
2100
2551
  </button>
2101
2552
  </div>
@@ -2106,44 +2557,46 @@ wrapperTag: div
2106
2557
  </div>
2107
2558
  </header>
2108
2559
  <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>
2560
+ <div class="pf-v6-c-page__sidebar-main">
2561
+ <div class="pf-v6-c-page__sidebar-body">
2562
+ <nav
2563
+ class="pf-v6-c-nav"
2564
+ id="wizard-with-drawer-expanded-example-primary-nav"
2565
+ aria-label="Global"
2566
+ >
2567
+ <ul class="pf-v6-c-nav__list" role="list">
2568
+ <li class="pf-v6-c-nav__item">
2569
+ <a href="#" class="pf-v6-c-nav__link">
2570
+ <span class="pf-v6-c-nav__link-text">System panel</span>
2571
+ </a>
2572
+ </li>
2573
+ <li class="pf-v6-c-nav__item">
2574
+ <a
2575
+ href="#"
2576
+ class="pf-v6-c-nav__link pf-m-current"
2577
+ aria-current="page"
2578
+ >
2579
+ <span class="pf-v6-c-nav__link-text">Policy</span>
2580
+ </a>
2581
+ </li>
2582
+ <li class="pf-v6-c-nav__item">
2583
+ <a href="#" class="pf-v6-c-nav__link">
2584
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
2585
+ </a>
2586
+ </li>
2587
+ <li class="pf-v6-c-nav__item">
2588
+ <a href="#" class="pf-v6-c-nav__link">
2589
+ <span class="pf-v6-c-nav__link-text">Network services</span>
2590
+ </a>
2591
+ </li>
2592
+ <li class="pf-v6-c-nav__item">
2593
+ <a href="#" class="pf-v6-c-nav__link">
2594
+ <span class="pf-v6-c-nav__link-text">Server</span>
2595
+ </a>
2596
+ </li>
2597
+ </ul>
2598
+ </nav>
2599
+ </div>
2147
2600
  </div>
2148
2601
  </div>
2149
2602
  <div class="pf-v6-c-page__main-container" tabindex="-1">
@@ -2161,21 +2614,57 @@ wrapperTag: div
2161
2614
  </li>
2162
2615
  <li class="pf-v6-c-breadcrumb__item">
2163
2616
  <span class="pf-v6-c-breadcrumb__item-divider">
2164
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2617
+ <svg
2618
+ class="pf-v6-svg"
2619
+ viewBox="0 0 20 20"
2620
+ fill="currentColor"
2621
+ aria-hidden="true"
2622
+ role="img"
2623
+ width="1em"
2624
+ height="1em"
2625
+ >
2626
+ <path
2627
+ 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"
2628
+ />
2629
+ </svg>
2165
2630
  </span>
2166
2631
 
2167
2632
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
2168
2633
  </li>
2169
2634
  <li class="pf-v6-c-breadcrumb__item">
2170
2635
  <span class="pf-v6-c-breadcrumb__item-divider">
2171
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2636
+ <svg
2637
+ class="pf-v6-svg"
2638
+ viewBox="0 0 20 20"
2639
+ fill="currentColor"
2640
+ aria-hidden="true"
2641
+ role="img"
2642
+ width="1em"
2643
+ height="1em"
2644
+ >
2645
+ <path
2646
+ 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"
2647
+ />
2648
+ </svg>
2172
2649
  </span>
2173
2650
 
2174
2651
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
2175
2652
  </li>
2176
2653
  <li class="pf-v6-c-breadcrumb__item">
2177
2654
  <span class="pf-v6-c-breadcrumb__item-divider">
2178
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2655
+ <svg
2656
+ class="pf-v6-svg"
2657
+ viewBox="0 0 20 20"
2658
+ fill="currentColor"
2659
+ aria-hidden="true"
2660
+ role="img"
2661
+ width="1em"
2662
+ height="1em"
2663
+ >
2664
+ <path
2665
+ 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"
2666
+ />
2667
+ </svg>
2179
2668
  </span>
2180
2669
 
2181
2670
  <a
@@ -2188,9 +2677,15 @@ wrapperTag: div
2188
2677
  </nav>
2189
2678
  </div>
2190
2679
  </section>
2191
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
2680
+ <section
2681
+ class="pf-v6-c-page__main-section pf-m-limit-width"
2682
+ aria-labelledby="main-title"
2683
+ >
2192
2684
  <div class="pf-v6-c-page__main-body">
2193
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
2685
+ <h1
2686
+ class="pf-v6-c-content--h1 pf-m-page-title"
2687
+ id="main-title"
2688
+ >Main title</h1>
2194
2689
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
2195
2690
  </div>
2196
2691
  </section>
@@ -2250,7 +2745,19 @@ wrapperTag: div
2250
2745
  aria-label="Close"
2251
2746
  >
2252
2747
  <span class="pf-v6-c-button__icon">
2253
- <i class="fas fa-times" aria-hidden="true"></i>
2748
+ <svg
2749
+ class="pf-v6-svg"
2750
+ viewBox="0 0 20 20"
2751
+ fill="currentColor"
2752
+ aria-hidden="true"
2753
+ role="img"
2754
+ width="1em"
2755
+ height="1em"
2756
+ >
2757
+ <path
2758
+ 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"
2759
+ />
2760
+ </svg>
2254
2761
  </span>
2255
2762
  </button>
2256
2763
  </div>
@@ -2270,10 +2777,23 @@ wrapperTag: div
2270
2777
  <span class="pf-v6-c-wizard__toggle-list-item">
2271
2778
  <span class="pf-v6-c-wizard__toggle-num">2</span>
2272
2779
  Configuration
2273
- <i
2274
- class="fas fa-angle-right pf-v6-c-wizard__toggle-separator"
2275
- aria-hidden="true"
2276
- ></i>
2780
+ <span
2781
+ class="pf-v6-c-wizard__toggle-separator"
2782
+ >
2783
+ <svg
2784
+ class="pf-v6-svg"
2785
+ viewBox="0 0 20 20"
2786
+ fill="currentColor"
2787
+ aria-hidden="true"
2788
+ role="img"
2789
+ width="1em"
2790
+ height="1em"
2791
+ >
2792
+ <path
2793
+ 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"
2794
+ />
2795
+ </svg>
2796
+ </span>
2277
2797
  </span>
2278
2798
  <span class="pf-v6-c-wizard__toggle-list-item">Substep B</span>
2279
2799
  </span>
@@ -2304,7 +2824,19 @@ wrapperTag: div
2304
2824
  <span class="pf-v6-c-wizard__nav-link-text">Configuration</span>
2305
2825
  <span class="pf-v6-c-wizard__nav-link-toggle">
2306
2826
  <span class="pf-v6-c-wizard__nav-link-toggle-icon">
2307
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2827
+ <svg
2828
+ class="pf-v6-svg"
2829
+ viewBox="0 0 20 20"
2830
+ fill="currentColor"
2831
+ aria-hidden="true"
2832
+ role="img"
2833
+ width="1em"
2834
+ height="1em"
2835
+ >
2836
+ <path
2837
+ d="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"
2838
+ />
2839
+ </svg>
2308
2840
  </span>
2309
2841
  </span>
2310
2842
  </span>
@@ -2525,7 +3057,19 @@ wrapperTag: div
2525
3057
  aria-label="Close drawer panel"
2526
3058
  >
2527
3059
  <span class="pf-v6-c-button__icon">
2528
- <i class="fas fa-times" aria-hidden="true"></i>
3060
+ <svg
3061
+ class="pf-v6-svg"
3062
+ viewBox="0 0 20 20"
3063
+ fill="currentColor"
3064
+ aria-hidden="true"
3065
+ role="img"
3066
+ width="1em"
3067
+ height="1em"
3068
+ >
3069
+ <path
3070
+ 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"
3071
+ />
3072
+ </svg>
2529
3073
  </span>
2530
3074
  </button>
2531
3075
  </div>
@@ -2610,10 +3154,8 @@ wrapperTag: div
2610
3154
  <span class="pf-v6-c-button__text">Skip to content</span>
2611
3155
  </a>
2612
3156
  </div>
2613
- <header
2614
- class="pf-v6-c-masthead"
2615
- id="wizard-with-drawer-info-example-masthead"
2616
- >
3157
+
3158
+ <header class="pf-v6-c-masthead" id="wizard-with-drawer-info-example-docked">
2617
3159
  <div class="pf-v6-c-masthead__main">
2618
3160
  <span class="pf-v6-c-masthead__toggle">
2619
3161
  <button
@@ -2655,7 +3197,7 @@ wrapperTag: div
2655
3197
  y1="2.25860997e-13%"
2656
3198
  x2="32%"
2657
3199
  y2="100%"
2658
- id="linearGradient-wizard-with-drawer-info-example-masthead"
3200
+ id="linearGradient-wizard-with-drawer-info-example-docked"
2659
3201
  >
2660
3202
  <stop stop-color="#2B9AF3" offset="0%" />
2661
3203
  <stop
@@ -2709,11 +3251,11 @@ wrapperTag: div
2709
3251
  />
2710
3252
  <path
2711
3253
  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)"
3254
+ fill="url(#linearGradient-wizard-with-drawer-info-example-docked)"
2713
3255
  />
2714
3256
  <path
2715
3257
  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)"
3258
+ fill="url(#linearGradient-wizard-with-drawer-info-example-docked)"
2717
3259
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
2718
3260
  />
2719
3261
  </g>
@@ -2725,7 +3267,7 @@ wrapperTag: div
2725
3267
  <div class="pf-v6-c-masthead__content">
2726
3268
  <div
2727
3269
  class="pf-v6-c-toolbar pf-m-static"
2728
- id="wizard-with-drawer-info-example-masthead-toolbar"
3270
+ id="wizard-with-drawer-info-example-docked-toolbar"
2729
3271
  >
2730
3272
  <div class="pf-v6-c-toolbar__content">
2731
3273
  <div class="pf-v6-c-toolbar__content-section">
@@ -2743,7 +3285,19 @@ wrapperTag: div
2743
3285
  aria-label="Application launcher"
2744
3286
  >
2745
3287
  <span class="pf-v6-c-menu-toggle__icon">
2746
- <i class="fas fa-th" aria-hidden="true"></i>
3288
+ <svg
3289
+ class="pf-v6-svg"
3290
+ viewBox="0 0 512 512"
3291
+ fill="currentColor"
3292
+ aria-hidden="true"
3293
+ role="img"
3294
+ width="1em"
3295
+ height="1em"
3296
+ >
3297
+ <path
3298
+ d="M149.333 56v80c0 13.255-10.745 24-24 24H24c-13.255 0-24-10.745-24-24V56c0-13.255 10.745-24 24-24h101.333c13.255 0 24 10.745 24 24zm181.334 240v-80c0-13.255-10.745-24-24-24H205.333c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24h101.333c13.256 0 24.001-10.745 24.001-24zm32-240v80c0 13.255 10.745 24 24 24H488c13.255 0 24-10.745 24-24V56c0-13.255-10.745-24-24-24H386.667c-13.255 0-24 10.745-24 24zm-32 80V56c0-13.255-10.745-24-24-24H205.333c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24h101.333c13.256 0 24.001-10.745 24.001-24zm-205.334 56H24c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24h101.333c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24zM0 376v80c0 13.255 10.745 24 24 24h101.333c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H24c-13.255 0-24 10.745-24 24zm386.667-56H488c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H386.667c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24zm0 160H488c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H386.667c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24zM181.333 376v80c0 13.255 10.745 24 24 24h101.333c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H205.333c-13.255 0-24 10.745-24 24z"
3299
+ />
3300
+ </svg>
2747
3301
  </span>
2748
3302
  </button>
2749
3303
  </div>
@@ -2755,7 +3309,19 @@ wrapperTag: div
2755
3309
  aria-label="Settings"
2756
3310
  >
2757
3311
  <span class="pf-v6-c-menu-toggle__icon">
2758
- <i class="fas fa-cog" aria-hidden="true"></i>
3312
+ <svg
3313
+ class="pf-v6-svg"
3314
+ viewBox="0 0 32 32"
3315
+ fill="currentColor"
3316
+ aria-hidden="true"
3317
+ role="img"
3318
+ width="1em"
3319
+ height="1em"
3320
+ >
3321
+ <path
3322
+ d="M30.168 12.894a.5.5 0 0 0-.488-.394h-2.732a11.512 11.512 0 0 0-.729-1.769l1.931-1.93a.5.5 0 0 0 .066-.625 14.693 14.693 0 0 0-4.393-4.392.498.498 0 0 0-.624.067l-1.93 1.93a11.512 11.512 0 0 0-1.769-.729V2.319a.5.5 0 0 0-.395-.489 14.81 14.81 0 0 0-6.211 0 .5.5 0 0 0-.395.489v2.733c-.614.196-1.207.439-1.769.729L8.8 3.851a.498.498 0 0 0-.624-.067 14.714 14.714 0 0 0-4.393 4.392.5.5 0 0 0 .066.625l1.931 1.93a11.512 11.512 0 0 0-.729 1.769H2.319a.5.5 0 0 0-.488.394 14.652 14.652 0 0 0 0 6.212.5.5 0 0 0 .488.394h2.732c.196.615.44 1.207.729 1.769l-1.931 1.93a.5.5 0 0 0-.066.625 14.673 14.673 0 0 0 4.393 4.392.498.498 0 0 0 .624-.067l1.93-1.93c.562.289 1.154.533 1.769.729v2.733a.5.5 0 0 0 .395.489 14.686 14.686 0 0 0 6.21 0 .5.5 0 0 0 .395-.489v-2.733a11.454 11.454 0 0 0 1.769-.729l1.93 1.93a.5.5 0 0 0 .624.067 14.714 14.714 0 0 0 4.393-4.392.5.5 0 0 0-.066-.625l-1.931-1.93c.289-.562.533-1.154.729-1.769h2.732a.5.5 0 0 0 .488-.394 14.652 14.652 0 0 0 0-6.212ZM16 21.25c-2.895 0-5.25-2.355-5.25-5.25s2.355-5.25 5.25-5.25 5.25 2.355 5.25 5.25-2.355 5.25-5.25 5.25Z"
3323
+ />
3324
+ </svg>
2759
3325
  </span>
2760
3326
  </button>
2761
3327
  </div>
@@ -2767,7 +3333,19 @@ wrapperTag: div
2767
3333
  aria-label="Help"
2768
3334
  >
2769
3335
  <span class="pf-v6-c-menu-toggle__icon">
2770
- <i class="fas fa-question-circle" aria-hidden="true"></i>
3336
+ <svg
3337
+ class="pf-v6-svg"
3338
+ viewBox="0 0 512 512"
3339
+ fill="currentColor"
3340
+ aria-hidden="true"
3341
+ role="img"
3342
+ width="1em"
3343
+ height="1em"
3344
+ >
3345
+ <path
3346
+ d="M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zM262.655 90c-54.497 0-89.255 22.957-116.549 63.758-3.536 5.286-2.353 12.415 2.715 16.258l34.699 26.31c5.205 3.947 12.621 3.008 16.665-2.122 17.864-22.658 30.113-35.797 57.303-35.797 20.429 0 45.698 13.148 45.698 32.958 0 14.976-12.363 22.667-32.534 33.976C247.128 238.528 216 254.941 216 296v4c0 6.627 5.373 12 12 12h56c6.627 0 12-5.373 12-12v-1.333c0-28.462 83.186-29.647 83.186-106.667 0-58.002-60.165-102-116.531-102zM256 338c-25.365 0-46 20.635-46 46 0 25.364 20.635 46 46 46s46-20.636 46-46c0-25.365-20.635-46-46-46z"
3347
+ />
3348
+ </svg>
2771
3349
  </span>
2772
3350
  </button>
2773
3351
  </div>
@@ -2781,7 +3359,19 @@ wrapperTag: div
2781
3359
  aria-label="Actions"
2782
3360
  >
2783
3361
  <span class="pf-v6-c-menu-toggle__icon">
2784
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
3362
+ <svg
3363
+ class="pf-v6-svg"
3364
+ viewBox="0 0 32 32"
3365
+ fill="currentColor"
3366
+ aria-hidden="true"
3367
+ role="img"
3368
+ width="1em"
3369
+ height="1em"
3370
+ >
3371
+ <path
3372
+ d="M12.25 5c0-2.068 1.683-3.75 3.75-3.75S19.75 2.932 19.75 5 18.067 8.75 16 8.75 12.25 7.068 12.25 5ZM16 12.25c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Zm0 11c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Z"
3373
+ />
3374
+ </svg>
2785
3375
  </span>
2786
3376
  </button>
2787
3377
  </div>
@@ -2792,44 +3382,46 @@ wrapperTag: div
2792
3382
  </div>
2793
3383
  </header>
2794
3384
  <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>
3385
+ <div class="pf-v6-c-page__sidebar-main">
3386
+ <div class="pf-v6-c-page__sidebar-body">
3387
+ <nav
3388
+ class="pf-v6-c-nav"
3389
+ id="wizard-with-drawer-info-example-primary-nav"
3390
+ aria-label="Global"
3391
+ >
3392
+ <ul class="pf-v6-c-nav__list" role="list">
3393
+ <li class="pf-v6-c-nav__item">
3394
+ <a href="#" class="pf-v6-c-nav__link">
3395
+ <span class="pf-v6-c-nav__link-text">System panel</span>
3396
+ </a>
3397
+ </li>
3398
+ <li class="pf-v6-c-nav__item">
3399
+ <a
3400
+ href="#"
3401
+ class="pf-v6-c-nav__link pf-m-current"
3402
+ aria-current="page"
3403
+ >
3404
+ <span class="pf-v6-c-nav__link-text">Policy</span>
3405
+ </a>
3406
+ </li>
3407
+ <li class="pf-v6-c-nav__item">
3408
+ <a href="#" class="pf-v6-c-nav__link">
3409
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
3410
+ </a>
3411
+ </li>
3412
+ <li class="pf-v6-c-nav__item">
3413
+ <a href="#" class="pf-v6-c-nav__link">
3414
+ <span class="pf-v6-c-nav__link-text">Network services</span>
3415
+ </a>
3416
+ </li>
3417
+ <li class="pf-v6-c-nav__item">
3418
+ <a href="#" class="pf-v6-c-nav__link">
3419
+ <span class="pf-v6-c-nav__link-text">Server</span>
3420
+ </a>
3421
+ </li>
3422
+ </ul>
3423
+ </nav>
3424
+ </div>
2833
3425
  </div>
2834
3426
  </div>
2835
3427
  <div class="pf-v6-c-page__main-container" tabindex="-1">
@@ -2847,21 +3439,57 @@ wrapperTag: div
2847
3439
  </li>
2848
3440
  <li class="pf-v6-c-breadcrumb__item">
2849
3441
  <span class="pf-v6-c-breadcrumb__item-divider">
2850
- <i class="fas fa-angle-right" aria-hidden="true"></i>
3442
+ <svg
3443
+ class="pf-v6-svg"
3444
+ viewBox="0 0 20 20"
3445
+ fill="currentColor"
3446
+ aria-hidden="true"
3447
+ role="img"
3448
+ width="1em"
3449
+ height="1em"
3450
+ >
3451
+ <path
3452
+ 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"
3453
+ />
3454
+ </svg>
2851
3455
  </span>
2852
3456
 
2853
3457
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
2854
3458
  </li>
2855
3459
  <li class="pf-v6-c-breadcrumb__item">
2856
3460
  <span class="pf-v6-c-breadcrumb__item-divider">
2857
- <i class="fas fa-angle-right" aria-hidden="true"></i>
3461
+ <svg
3462
+ class="pf-v6-svg"
3463
+ viewBox="0 0 20 20"
3464
+ fill="currentColor"
3465
+ aria-hidden="true"
3466
+ role="img"
3467
+ width="1em"
3468
+ height="1em"
3469
+ >
3470
+ <path
3471
+ 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"
3472
+ />
3473
+ </svg>
2858
3474
  </span>
2859
3475
 
2860
3476
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
2861
3477
  </li>
2862
3478
  <li class="pf-v6-c-breadcrumb__item">
2863
3479
  <span class="pf-v6-c-breadcrumb__item-divider">
2864
- <i class="fas fa-angle-right" aria-hidden="true"></i>
3480
+ <svg
3481
+ class="pf-v6-svg"
3482
+ viewBox="0 0 20 20"
3483
+ fill="currentColor"
3484
+ aria-hidden="true"
3485
+ role="img"
3486
+ width="1em"
3487
+ height="1em"
3488
+ >
3489
+ <path
3490
+ 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"
3491
+ />
3492
+ </svg>
2865
3493
  </span>
2866
3494
 
2867
3495
  <a
@@ -2874,9 +3502,15 @@ wrapperTag: div
2874
3502
  </nav>
2875
3503
  </div>
2876
3504
  </section>
2877
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
3505
+ <section
3506
+ class="pf-v6-c-page__main-section pf-m-limit-width"
3507
+ aria-labelledby="main-title"
3508
+ >
2878
3509
  <div class="pf-v6-c-page__main-body">
2879
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
3510
+ <h1
3511
+ class="pf-v6-c-content--h1 pf-m-page-title"
3512
+ id="main-title"
3513
+ >Main title</h1>
2880
3514
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
2881
3515
  </div>
2882
3516
  </section>
@@ -2936,7 +3570,19 @@ wrapperTag: div
2936
3570
  aria-label="Close"
2937
3571
  >
2938
3572
  <span class="pf-v6-c-button__icon">
2939
- <i class="fas fa-times" aria-hidden="true"></i>
3573
+ <svg
3574
+ class="pf-v6-svg"
3575
+ viewBox="0 0 20 20"
3576
+ fill="currentColor"
3577
+ aria-hidden="true"
3578
+ role="img"
3579
+ width="1em"
3580
+ height="1em"
3581
+ >
3582
+ <path
3583
+ 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"
3584
+ />
3585
+ </svg>
2940
3586
  </span>
2941
3587
  </button>
2942
3588
  </div>
@@ -2956,10 +3602,23 @@ wrapperTag: div
2956
3602
  <span class="pf-v6-c-wizard__toggle-list-item">
2957
3603
  <span class="pf-v6-c-wizard__toggle-num">2</span>
2958
3604
  Configuration
2959
- <i
2960
- class="fas fa-angle-right pf-v6-c-wizard__toggle-separator"
2961
- aria-hidden="true"
2962
- ></i>
3605
+ <span
3606
+ class="pf-v6-c-wizard__toggle-separator"
3607
+ >
3608
+ <svg
3609
+ class="pf-v6-svg"
3610
+ viewBox="0 0 20 20"
3611
+ fill="currentColor"
3612
+ aria-hidden="true"
3613
+ role="img"
3614
+ width="1em"
3615
+ height="1em"
3616
+ >
3617
+ <path
3618
+ 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"
3619
+ />
3620
+ </svg>
3621
+ </span>
2963
3622
  </span>
2964
3623
  <span class="pf-v6-c-wizard__toggle-list-item">Substep B</span>
2965
3624
  </span>
@@ -2990,7 +3649,19 @@ wrapperTag: div
2990
3649
  <span class="pf-v6-c-wizard__nav-link-text">Configuration</span>
2991
3650
  <span class="pf-v6-c-wizard__nav-link-toggle">
2992
3651
  <span class="pf-v6-c-wizard__nav-link-toggle-icon">
2993
- <i class="fas fa-angle-right" aria-hidden="true"></i>
3652
+ <svg
3653
+ class="pf-v6-svg"
3654
+ viewBox="0 0 20 20"
3655
+ fill="currentColor"
3656
+ aria-hidden="true"
3657
+ role="img"
3658
+ width="1em"
3659
+ height="1em"
3660
+ >
3661
+ <path
3662
+ 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"
3663
+ />
3664
+ </svg>
2994
3665
  </span>
2995
3666
  </span>
2996
3667
  </span>
@@ -3085,7 +3756,19 @@ wrapperTag: div
3085
3756
  aria-label="Close drawer panel"
3086
3757
  >
3087
3758
  <span class="pf-v6-c-button__icon">
3088
- <i class="fas fa-times" aria-hidden="true"></i>
3759
+ <svg
3760
+ class="pf-v6-svg"
3761
+ viewBox="0 0 20 20"
3762
+ fill="currentColor"
3763
+ aria-hidden="true"
3764
+ role="img"
3765
+ width="1em"
3766
+ height="1em"
3767
+ >
3768
+ <path
3769
+ 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"
3770
+ />
3771
+ </svg>
3089
3772
  </span>
3090
3773
  </button>
3091
3774
  </div>
@@ -3171,7 +3854,8 @@ wrapperTag: div
3171
3854
  <span class="pf-v6-c-button__text">Skip to content</span>
3172
3855
  </a>
3173
3856
  </div>
3174
- <header class="pf-v6-c-masthead" id="wizard-in-page-example-masthead">
3857
+
3858
+ <header class="pf-v6-c-masthead" id="wizard-in-page-example-docked">
3175
3859
  <div class="pf-v6-c-masthead__main">
3176
3860
  <span class="pf-v6-c-masthead__toggle">
3177
3861
  <button
@@ -3213,7 +3897,7 @@ wrapperTag: div
3213
3897
  y1="2.25860997e-13%"
3214
3898
  x2="32%"
3215
3899
  y2="100%"
3216
- id="linearGradient-wizard-in-page-example-masthead"
3900
+ id="linearGradient-wizard-in-page-example-docked"
3217
3901
  >
3218
3902
  <stop stop-color="#2B9AF3" offset="0%" />
3219
3903
  <stop
@@ -3267,11 +3951,11 @@ wrapperTag: div
3267
3951
  />
3268
3952
  <path
3269
3953
  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)"
3954
+ fill="url(#linearGradient-wizard-in-page-example-docked)"
3271
3955
  />
3272
3956
  <path
3273
3957
  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)"
3958
+ fill="url(#linearGradient-wizard-in-page-example-docked)"
3275
3959
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
3276
3960
  />
3277
3961
  </g>
@@ -3283,7 +3967,7 @@ wrapperTag: div
3283
3967
  <div class="pf-v6-c-masthead__content">
3284
3968
  <div
3285
3969
  class="pf-v6-c-toolbar pf-m-static"
3286
- id="wizard-in-page-example-masthead-toolbar"
3970
+ id="wizard-in-page-example-docked-toolbar"
3287
3971
  >
3288
3972
  <div class="pf-v6-c-toolbar__content">
3289
3973
  <div class="pf-v6-c-toolbar__content-section">
@@ -3301,7 +3985,19 @@ wrapperTag: div
3301
3985
  aria-label="Application launcher"
3302
3986
  >
3303
3987
  <span class="pf-v6-c-menu-toggle__icon">
3304
- <i class="fas fa-th" aria-hidden="true"></i>
3988
+ <svg
3989
+ class="pf-v6-svg"
3990
+ viewBox="0 0 512 512"
3991
+ fill="currentColor"
3992
+ aria-hidden="true"
3993
+ role="img"
3994
+ width="1em"
3995
+ height="1em"
3996
+ >
3997
+ <path
3998
+ d="M149.333 56v80c0 13.255-10.745 24-24 24H24c-13.255 0-24-10.745-24-24V56c0-13.255 10.745-24 24-24h101.333c13.255 0 24 10.745 24 24zm181.334 240v-80c0-13.255-10.745-24-24-24H205.333c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24h101.333c13.256 0 24.001-10.745 24.001-24zm32-240v80c0 13.255 10.745 24 24 24H488c13.255 0 24-10.745 24-24V56c0-13.255-10.745-24-24-24H386.667c-13.255 0-24 10.745-24 24zm-32 80V56c0-13.255-10.745-24-24-24H205.333c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24h101.333c13.256 0 24.001-10.745 24.001-24zm-205.334 56H24c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24h101.333c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24zM0 376v80c0 13.255 10.745 24 24 24h101.333c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H24c-13.255 0-24 10.745-24 24zm386.667-56H488c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H386.667c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24zm0 160H488c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H386.667c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24zM181.333 376v80c0 13.255 10.745 24 24 24h101.333c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H205.333c-13.255 0-24 10.745-24 24z"
3999
+ />
4000
+ </svg>
3305
4001
  </span>
3306
4002
  </button>
3307
4003
  </div>
@@ -3313,7 +4009,19 @@ wrapperTag: div
3313
4009
  aria-label="Settings"
3314
4010
  >
3315
4011
  <span class="pf-v6-c-menu-toggle__icon">
3316
- <i class="fas fa-cog" aria-hidden="true"></i>
4012
+ <svg
4013
+ class="pf-v6-svg"
4014
+ viewBox="0 0 32 32"
4015
+ fill="currentColor"
4016
+ aria-hidden="true"
4017
+ role="img"
4018
+ width="1em"
4019
+ height="1em"
4020
+ >
4021
+ <path
4022
+ d="M30.168 12.894a.5.5 0 0 0-.488-.394h-2.732a11.512 11.512 0 0 0-.729-1.769l1.931-1.93a.5.5 0 0 0 .066-.625 14.693 14.693 0 0 0-4.393-4.392.498.498 0 0 0-.624.067l-1.93 1.93a11.512 11.512 0 0 0-1.769-.729V2.319a.5.5 0 0 0-.395-.489 14.81 14.81 0 0 0-6.211 0 .5.5 0 0 0-.395.489v2.733c-.614.196-1.207.439-1.769.729L8.8 3.851a.498.498 0 0 0-.624-.067 14.714 14.714 0 0 0-4.393 4.392.5.5 0 0 0 .066.625l1.931 1.93a11.512 11.512 0 0 0-.729 1.769H2.319a.5.5 0 0 0-.488.394 14.652 14.652 0 0 0 0 6.212.5.5 0 0 0 .488.394h2.732c.196.615.44 1.207.729 1.769l-1.931 1.93a.5.5 0 0 0-.066.625 14.673 14.673 0 0 0 4.393 4.392.498.498 0 0 0 .624-.067l1.93-1.93c.562.289 1.154.533 1.769.729v2.733a.5.5 0 0 0 .395.489 14.686 14.686 0 0 0 6.21 0 .5.5 0 0 0 .395-.489v-2.733a11.454 11.454 0 0 0 1.769-.729l1.93 1.93a.5.5 0 0 0 .624.067 14.714 14.714 0 0 0 4.393-4.392.5.5 0 0 0-.066-.625l-1.931-1.93c.289-.562.533-1.154.729-1.769h2.732a.5.5 0 0 0 .488-.394 14.652 14.652 0 0 0 0-6.212ZM16 21.25c-2.895 0-5.25-2.355-5.25-5.25s2.355-5.25 5.25-5.25 5.25 2.355 5.25 5.25-2.355 5.25-5.25 5.25Z"
4023
+ />
4024
+ </svg>
3317
4025
  </span>
3318
4026
  </button>
3319
4027
  </div>
@@ -3325,7 +4033,19 @@ wrapperTag: div
3325
4033
  aria-label="Help"
3326
4034
  >
3327
4035
  <span class="pf-v6-c-menu-toggle__icon">
3328
- <i class="fas fa-question-circle" aria-hidden="true"></i>
4036
+ <svg
4037
+ class="pf-v6-svg"
4038
+ viewBox="0 0 512 512"
4039
+ fill="currentColor"
4040
+ aria-hidden="true"
4041
+ role="img"
4042
+ width="1em"
4043
+ height="1em"
4044
+ >
4045
+ <path
4046
+ d="M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zM262.655 90c-54.497 0-89.255 22.957-116.549 63.758-3.536 5.286-2.353 12.415 2.715 16.258l34.699 26.31c5.205 3.947 12.621 3.008 16.665-2.122 17.864-22.658 30.113-35.797 57.303-35.797 20.429 0 45.698 13.148 45.698 32.958 0 14.976-12.363 22.667-32.534 33.976C247.128 238.528 216 254.941 216 296v4c0 6.627 5.373 12 12 12h56c6.627 0 12-5.373 12-12v-1.333c0-28.462 83.186-29.647 83.186-106.667 0-58.002-60.165-102-116.531-102zM256 338c-25.365 0-46 20.635-46 46 0 25.364 20.635 46 46 46s46-20.636 46-46c0-25.365-20.635-46-46-46z"
4047
+ />
4048
+ </svg>
3329
4049
  </span>
3330
4050
  </button>
3331
4051
  </div>
@@ -3339,7 +4059,19 @@ wrapperTag: div
3339
4059
  aria-label="Actions"
3340
4060
  >
3341
4061
  <span class="pf-v6-c-menu-toggle__icon">
3342
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
4062
+ <svg
4063
+ class="pf-v6-svg"
4064
+ viewBox="0 0 32 32"
4065
+ fill="currentColor"
4066
+ aria-hidden="true"
4067
+ role="img"
4068
+ width="1em"
4069
+ height="1em"
4070
+ >
4071
+ <path
4072
+ d="M12.25 5c0-2.068 1.683-3.75 3.75-3.75S19.75 2.932 19.75 5 18.067 8.75 16 8.75 12.25 7.068 12.25 5ZM16 12.25c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Zm0 11c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Z"
4073
+ />
4074
+ </svg>
3343
4075
  </span>
3344
4076
  </button>
3345
4077
  </div>
@@ -3350,44 +4082,46 @@ wrapperTag: div
3350
4082
  </div>
3351
4083
  </header>
3352
4084
  <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>
4085
+ <div class="pf-v6-c-page__sidebar-main">
4086
+ <div class="pf-v6-c-page__sidebar-body">
4087
+ <nav
4088
+ class="pf-v6-c-nav"
4089
+ id="wizard-in-page-example-primary-nav"
4090
+ aria-label="Global"
4091
+ >
4092
+ <ul class="pf-v6-c-nav__list" role="list">
4093
+ <li class="pf-v6-c-nav__item">
4094
+ <a href="#" class="pf-v6-c-nav__link">
4095
+ <span class="pf-v6-c-nav__link-text">System panel</span>
4096
+ </a>
4097
+ </li>
4098
+ <li class="pf-v6-c-nav__item">
4099
+ <a
4100
+ href="#"
4101
+ class="pf-v6-c-nav__link pf-m-current"
4102
+ aria-current="page"
4103
+ >
4104
+ <span class="pf-v6-c-nav__link-text">Policy</span>
4105
+ </a>
4106
+ </li>
4107
+ <li class="pf-v6-c-nav__item">
4108
+ <a href="#" class="pf-v6-c-nav__link">
4109
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
4110
+ </a>
4111
+ </li>
4112
+ <li class="pf-v6-c-nav__item">
4113
+ <a href="#" class="pf-v6-c-nav__link">
4114
+ <span class="pf-v6-c-nav__link-text">Network services</span>
4115
+ </a>
4116
+ </li>
4117
+ <li class="pf-v6-c-nav__item">
4118
+ <a href="#" class="pf-v6-c-nav__link">
4119
+ <span class="pf-v6-c-nav__link-text">Server</span>
4120
+ </a>
4121
+ </li>
4122
+ </ul>
4123
+ </nav>
4124
+ </div>
3391
4125
  </div>
3392
4126
  </div>
3393
4127
  <div class="pf-v6-c-page__main-container" tabindex="-1">
@@ -3405,21 +4139,57 @@ wrapperTag: div
3405
4139
  </li>
3406
4140
  <li class="pf-v6-c-breadcrumb__item">
3407
4141
  <span class="pf-v6-c-breadcrumb__item-divider">
3408
- <i class="fas fa-angle-right" aria-hidden="true"></i>
4142
+ <svg
4143
+ class="pf-v6-svg"
4144
+ viewBox="0 0 20 20"
4145
+ fill="currentColor"
4146
+ aria-hidden="true"
4147
+ role="img"
4148
+ width="1em"
4149
+ height="1em"
4150
+ >
4151
+ <path
4152
+ 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"
4153
+ />
4154
+ </svg>
3409
4155
  </span>
3410
4156
 
3411
4157
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
3412
4158
  </li>
3413
4159
  <li class="pf-v6-c-breadcrumb__item">
3414
4160
  <span class="pf-v6-c-breadcrumb__item-divider">
3415
- <i class="fas fa-angle-right" aria-hidden="true"></i>
4161
+ <svg
4162
+ class="pf-v6-svg"
4163
+ viewBox="0 0 20 20"
4164
+ fill="currentColor"
4165
+ aria-hidden="true"
4166
+ role="img"
4167
+ width="1em"
4168
+ height="1em"
4169
+ >
4170
+ <path
4171
+ 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"
4172
+ />
4173
+ </svg>
3416
4174
  </span>
3417
4175
 
3418
4176
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
3419
4177
  </li>
3420
4178
  <li class="pf-v6-c-breadcrumb__item">
3421
4179
  <span class="pf-v6-c-breadcrumb__item-divider">
3422
- <i class="fas fa-angle-right" aria-hidden="true"></i>
4180
+ <svg
4181
+ class="pf-v6-svg"
4182
+ viewBox="0 0 20 20"
4183
+ fill="currentColor"
4184
+ aria-hidden="true"
4185
+ role="img"
4186
+ width="1em"
4187
+ height="1em"
4188
+ >
4189
+ <path
4190
+ 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"
4191
+ />
4192
+ </svg>
3423
4193
  </span>
3424
4194
 
3425
4195
  <a
@@ -3432,9 +4202,15 @@ wrapperTag: div
3432
4202
  </nav>
3433
4203
  </div>
3434
4204
  </section>
3435
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
4205
+ <section
4206
+ class="pf-v6-c-page__main-section pf-m-limit-width"
4207
+ aria-labelledby="main-title"
4208
+ >
3436
4209
  <div class="pf-v6-c-page__main-body">
3437
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
4210
+ <h1
4211
+ class="pf-v6-c-content--h1 pf-m-page-title"
4212
+ id="main-title"
4213
+ >Main title</h1>
3438
4214
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
3439
4215
  </div>
3440
4216
  </section>
@@ -3449,10 +4225,23 @@ wrapperTag: div
3449
4225
  <span class="pf-v6-c-wizard__toggle-list-item">
3450
4226
  <span class="pf-v6-c-wizard__toggle-num">2</span>
3451
4227
  Configuration
3452
- <i
3453
- class="fas fa-angle-right pf-v6-c-wizard__toggle-separator"
3454
- aria-hidden="true"
3455
- ></i>
4228
+ <span
4229
+ class="pf-v6-c-wizard__toggle-separator"
4230
+ >
4231
+ <svg
4232
+ class="pf-v6-svg"
4233
+ viewBox="0 0 20 20"
4234
+ fill="currentColor"
4235
+ aria-hidden="true"
4236
+ role="img"
4237
+ width="1em"
4238
+ height="1em"
4239
+ >
4240
+ <path
4241
+ 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"
4242
+ />
4243
+ </svg>
4244
+ </span>
3456
4245
  </span>
3457
4246
  <span class="pf-v6-c-wizard__toggle-list-item">Substep B</span>
3458
4247
  </span>
@@ -3485,7 +4274,19 @@ wrapperTag: div
3485
4274
  >Configuration</span>
3486
4275
  <span class="pf-v6-c-wizard__nav-link-toggle">
3487
4276
  <span class="pf-v6-c-wizard__nav-link-toggle-icon">
3488
- <i class="fas fa-angle-right" aria-hidden="true"></i>
4277
+ <svg
4278
+ class="pf-v6-svg"
4279
+ viewBox="0 0 20 20"
4280
+ fill="currentColor"
4281
+ aria-hidden="true"
4282
+ role="img"
4283
+ width="1em"
4284
+ height="1em"
4285
+ >
4286
+ <path
4287
+ 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"
4288
+ />
4289
+ </svg>
3489
4290
  </span>
3490
4291
  </span>
3491
4292
  </span>
@@ -3736,7 +4537,8 @@ wrapperTag: div
3736
4537
  <span class="pf-v6-c-button__text">Skip to content</span>
3737
4538
  </a>
3738
4539
  </div>
3739
- <header class="pf-v6-c-masthead" id="in-page-nav-expanded-example-masthead">
4540
+
4541
+ <header class="pf-v6-c-masthead" id="in-page-nav-expanded-example-docked">
3740
4542
  <div class="pf-v6-c-masthead__main">
3741
4543
  <span class="pf-v6-c-masthead__toggle">
3742
4544
  <button
@@ -3778,7 +4580,7 @@ wrapperTag: div
3778
4580
  y1="2.25860997e-13%"
3779
4581
  x2="32%"
3780
4582
  y2="100%"
3781
- id="linearGradient-in-page-nav-expanded-example-masthead"
4583
+ id="linearGradient-in-page-nav-expanded-example-docked"
3782
4584
  >
3783
4585
  <stop stop-color="#2B9AF3" offset="0%" />
3784
4586
  <stop
@@ -3832,11 +4634,11 @@ wrapperTag: div
3832
4634
  />
3833
4635
  <path
3834
4636
  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)"
4637
+ fill="url(#linearGradient-in-page-nav-expanded-example-docked)"
3836
4638
  />
3837
4639
  <path
3838
4640
  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)"
4641
+ fill="url(#linearGradient-in-page-nav-expanded-example-docked)"
3840
4642
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
3841
4643
  />
3842
4644
  </g>
@@ -3848,7 +4650,7 @@ wrapperTag: div
3848
4650
  <div class="pf-v6-c-masthead__content">
3849
4651
  <div
3850
4652
  class="pf-v6-c-toolbar pf-m-static"
3851
- id="in-page-nav-expanded-example-masthead-toolbar"
4653
+ id="in-page-nav-expanded-example-docked-toolbar"
3852
4654
  >
3853
4655
  <div class="pf-v6-c-toolbar__content">
3854
4656
  <div class="pf-v6-c-toolbar__content-section">
@@ -3866,7 +4668,19 @@ wrapperTag: div
3866
4668
  aria-label="Application launcher"
3867
4669
  >
3868
4670
  <span class="pf-v6-c-menu-toggle__icon">
3869
- <i class="fas fa-th" aria-hidden="true"></i>
4671
+ <svg
4672
+ class="pf-v6-svg"
4673
+ viewBox="0 0 512 512"
4674
+ fill="currentColor"
4675
+ aria-hidden="true"
4676
+ role="img"
4677
+ width="1em"
4678
+ height="1em"
4679
+ >
4680
+ <path
4681
+ d="M149.333 56v80c0 13.255-10.745 24-24 24H24c-13.255 0-24-10.745-24-24V56c0-13.255 10.745-24 24-24h101.333c13.255 0 24 10.745 24 24zm181.334 240v-80c0-13.255-10.745-24-24-24H205.333c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24h101.333c13.256 0 24.001-10.745 24.001-24zm32-240v80c0 13.255 10.745 24 24 24H488c13.255 0 24-10.745 24-24V56c0-13.255-10.745-24-24-24H386.667c-13.255 0-24 10.745-24 24zm-32 80V56c0-13.255-10.745-24-24-24H205.333c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24h101.333c13.256 0 24.001-10.745 24.001-24zm-205.334 56H24c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24h101.333c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24zM0 376v80c0 13.255 10.745 24 24 24h101.333c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H24c-13.255 0-24 10.745-24 24zm386.667-56H488c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H386.667c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24zm0 160H488c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H386.667c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24zM181.333 376v80c0 13.255 10.745 24 24 24h101.333c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H205.333c-13.255 0-24 10.745-24 24z"
4682
+ />
4683
+ </svg>
3870
4684
  </span>
3871
4685
  </button>
3872
4686
  </div>
@@ -3878,7 +4692,19 @@ wrapperTag: div
3878
4692
  aria-label="Settings"
3879
4693
  >
3880
4694
  <span class="pf-v6-c-menu-toggle__icon">
3881
- <i class="fas fa-cog" aria-hidden="true"></i>
4695
+ <svg
4696
+ class="pf-v6-svg"
4697
+ viewBox="0 0 32 32"
4698
+ fill="currentColor"
4699
+ aria-hidden="true"
4700
+ role="img"
4701
+ width="1em"
4702
+ height="1em"
4703
+ >
4704
+ <path
4705
+ d="M30.168 12.894a.5.5 0 0 0-.488-.394h-2.732a11.512 11.512 0 0 0-.729-1.769l1.931-1.93a.5.5 0 0 0 .066-.625 14.693 14.693 0 0 0-4.393-4.392.498.498 0 0 0-.624.067l-1.93 1.93a11.512 11.512 0 0 0-1.769-.729V2.319a.5.5 0 0 0-.395-.489 14.81 14.81 0 0 0-6.211 0 .5.5 0 0 0-.395.489v2.733c-.614.196-1.207.439-1.769.729L8.8 3.851a.498.498 0 0 0-.624-.067 14.714 14.714 0 0 0-4.393 4.392.5.5 0 0 0 .066.625l1.931 1.93a11.512 11.512 0 0 0-.729 1.769H2.319a.5.5 0 0 0-.488.394 14.652 14.652 0 0 0 0 6.212.5.5 0 0 0 .488.394h2.732c.196.615.44 1.207.729 1.769l-1.931 1.93a.5.5 0 0 0-.066.625 14.673 14.673 0 0 0 4.393 4.392.498.498 0 0 0 .624-.067l1.93-1.93c.562.289 1.154.533 1.769.729v2.733a.5.5 0 0 0 .395.489 14.686 14.686 0 0 0 6.21 0 .5.5 0 0 0 .395-.489v-2.733a11.454 11.454 0 0 0 1.769-.729l1.93 1.93a.5.5 0 0 0 .624.067 14.714 14.714 0 0 0 4.393-4.392.5.5 0 0 0-.066-.625l-1.931-1.93c.289-.562.533-1.154.729-1.769h2.732a.5.5 0 0 0 .488-.394 14.652 14.652 0 0 0 0-6.212ZM16 21.25c-2.895 0-5.25-2.355-5.25-5.25s2.355-5.25 5.25-5.25 5.25 2.355 5.25 5.25-2.355 5.25-5.25 5.25Z"
4706
+ />
4707
+ </svg>
3882
4708
  </span>
3883
4709
  </button>
3884
4710
  </div>
@@ -3890,7 +4716,19 @@ wrapperTag: div
3890
4716
  aria-label="Help"
3891
4717
  >
3892
4718
  <span class="pf-v6-c-menu-toggle__icon">
3893
- <i class="fas fa-question-circle" aria-hidden="true"></i>
4719
+ <svg
4720
+ class="pf-v6-svg"
4721
+ viewBox="0 0 512 512"
4722
+ fill="currentColor"
4723
+ aria-hidden="true"
4724
+ role="img"
4725
+ width="1em"
4726
+ height="1em"
4727
+ >
4728
+ <path
4729
+ d="M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zM262.655 90c-54.497 0-89.255 22.957-116.549 63.758-3.536 5.286-2.353 12.415 2.715 16.258l34.699 26.31c5.205 3.947 12.621 3.008 16.665-2.122 17.864-22.658 30.113-35.797 57.303-35.797 20.429 0 45.698 13.148 45.698 32.958 0 14.976-12.363 22.667-32.534 33.976C247.128 238.528 216 254.941 216 296v4c0 6.627 5.373 12 12 12h56c6.627 0 12-5.373 12-12v-1.333c0-28.462 83.186-29.647 83.186-106.667 0-58.002-60.165-102-116.531-102zM256 338c-25.365 0-46 20.635-46 46 0 25.364 20.635 46 46 46s46-20.636 46-46c0-25.365-20.635-46-46-46z"
4730
+ />
4731
+ </svg>
3894
4732
  </span>
3895
4733
  </button>
3896
4734
  </div>
@@ -3904,7 +4742,19 @@ wrapperTag: div
3904
4742
  aria-label="Actions"
3905
4743
  >
3906
4744
  <span class="pf-v6-c-menu-toggle__icon">
3907
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
4745
+ <svg
4746
+ class="pf-v6-svg"
4747
+ viewBox="0 0 32 32"
4748
+ fill="currentColor"
4749
+ aria-hidden="true"
4750
+ role="img"
4751
+ width="1em"
4752
+ height="1em"
4753
+ >
4754
+ <path
4755
+ d="M12.25 5c0-2.068 1.683-3.75 3.75-3.75S19.75 2.932 19.75 5 18.067 8.75 16 8.75 12.25 7.068 12.25 5ZM16 12.25c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Zm0 11c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Z"
4756
+ />
4757
+ </svg>
3908
4758
  </span>
3909
4759
  </button>
3910
4760
  </div>
@@ -3915,44 +4765,46 @@ wrapperTag: div
3915
4765
  </div>
3916
4766
  </header>
3917
4767
  <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>
4768
+ <div class="pf-v6-c-page__sidebar-main">
4769
+ <div class="pf-v6-c-page__sidebar-body">
4770
+ <nav
4771
+ class="pf-v6-c-nav"
4772
+ id="in-page-nav-expanded-example-primary-nav"
4773
+ aria-label="Global"
4774
+ >
4775
+ <ul class="pf-v6-c-nav__list" role="list">
4776
+ <li class="pf-v6-c-nav__item">
4777
+ <a href="#" class="pf-v6-c-nav__link">
4778
+ <span class="pf-v6-c-nav__link-text">System panel</span>
4779
+ </a>
4780
+ </li>
4781
+ <li class="pf-v6-c-nav__item">
4782
+ <a
4783
+ href="#"
4784
+ class="pf-v6-c-nav__link pf-m-current"
4785
+ aria-current="page"
4786
+ >
4787
+ <span class="pf-v6-c-nav__link-text">Policy</span>
4788
+ </a>
4789
+ </li>
4790
+ <li class="pf-v6-c-nav__item">
4791
+ <a href="#" class="pf-v6-c-nav__link">
4792
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
4793
+ </a>
4794
+ </li>
4795
+ <li class="pf-v6-c-nav__item">
4796
+ <a href="#" class="pf-v6-c-nav__link">
4797
+ <span class="pf-v6-c-nav__link-text">Network services</span>
4798
+ </a>
4799
+ </li>
4800
+ <li class="pf-v6-c-nav__item">
4801
+ <a href="#" class="pf-v6-c-nav__link">
4802
+ <span class="pf-v6-c-nav__link-text">Server</span>
4803
+ </a>
4804
+ </li>
4805
+ </ul>
4806
+ </nav>
4807
+ </div>
3956
4808
  </div>
3957
4809
  </div>
3958
4810
  <div class="pf-v6-c-page__main-container" tabindex="-1">
@@ -3970,21 +4822,57 @@ wrapperTag: div
3970
4822
  </li>
3971
4823
  <li class="pf-v6-c-breadcrumb__item">
3972
4824
  <span class="pf-v6-c-breadcrumb__item-divider">
3973
- <i class="fas fa-angle-right" aria-hidden="true"></i>
4825
+ <svg
4826
+ class="pf-v6-svg"
4827
+ viewBox="0 0 20 20"
4828
+ fill="currentColor"
4829
+ aria-hidden="true"
4830
+ role="img"
4831
+ width="1em"
4832
+ height="1em"
4833
+ >
4834
+ <path
4835
+ 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"
4836
+ />
4837
+ </svg>
3974
4838
  </span>
3975
4839
 
3976
4840
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
3977
4841
  </li>
3978
4842
  <li class="pf-v6-c-breadcrumb__item">
3979
4843
  <span class="pf-v6-c-breadcrumb__item-divider">
3980
- <i class="fas fa-angle-right" aria-hidden="true"></i>
4844
+ <svg
4845
+ class="pf-v6-svg"
4846
+ viewBox="0 0 20 20"
4847
+ fill="currentColor"
4848
+ aria-hidden="true"
4849
+ role="img"
4850
+ width="1em"
4851
+ height="1em"
4852
+ >
4853
+ <path
4854
+ 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"
4855
+ />
4856
+ </svg>
3981
4857
  </span>
3982
4858
 
3983
4859
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
3984
4860
  </li>
3985
4861
  <li class="pf-v6-c-breadcrumb__item">
3986
4862
  <span class="pf-v6-c-breadcrumb__item-divider">
3987
- <i class="fas fa-angle-right" aria-hidden="true"></i>
4863
+ <svg
4864
+ class="pf-v6-svg"
4865
+ viewBox="0 0 20 20"
4866
+ fill="currentColor"
4867
+ aria-hidden="true"
4868
+ role="img"
4869
+ width="1em"
4870
+ height="1em"
4871
+ >
4872
+ <path
4873
+ 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"
4874
+ />
4875
+ </svg>
3988
4876
  </span>
3989
4877
 
3990
4878
  <a
@@ -3997,9 +4885,15 @@ wrapperTag: div
3997
4885
  </nav>
3998
4886
  </div>
3999
4887
  </section>
4000
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
4888
+ <section
4889
+ class="pf-v6-c-page__main-section pf-m-limit-width"
4890
+ aria-labelledby="main-title"
4891
+ >
4001
4892
  <div class="pf-v6-c-page__main-body">
4002
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
4893
+ <h1
4894
+ class="pf-v6-c-content--h1 pf-m-page-title"
4895
+ id="main-title"
4896
+ >Main title</h1>
4003
4897
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
4004
4898
  </div>
4005
4899
  </section>
@@ -4014,10 +4908,23 @@ wrapperTag: div
4014
4908
  <span class="pf-v6-c-wizard__toggle-list-item">
4015
4909
  <span class="pf-v6-c-wizard__toggle-num">2</span>
4016
4910
  Configuration
4017
- <i
4018
- class="fas fa-angle-right pf-v6-c-wizard__toggle-separator"
4019
- aria-hidden="true"
4020
- ></i>
4911
+ <span
4912
+ class="pf-v6-c-wizard__toggle-separator"
4913
+ >
4914
+ <svg
4915
+ class="pf-v6-svg"
4916
+ viewBox="0 0 20 20"
4917
+ fill="currentColor"
4918
+ aria-hidden="true"
4919
+ role="img"
4920
+ width="1em"
4921
+ height="1em"
4922
+ >
4923
+ <path
4924
+ 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"
4925
+ />
4926
+ </svg>
4927
+ </span>
4021
4928
  </span>
4022
4929
  <span class="pf-v6-c-wizard__toggle-list-item">Substep B</span>
4023
4930
  </span>
@@ -4050,7 +4957,19 @@ wrapperTag: div
4050
4957
  >Configuration</span>
4051
4958
  <span class="pf-v6-c-wizard__nav-link-toggle">
4052
4959
  <span class="pf-v6-c-wizard__nav-link-toggle-icon">
4053
- <i class="fas fa-angle-right" aria-hidden="true"></i>
4960
+ <svg
4961
+ class="pf-v6-svg"
4962
+ viewBox="0 0 20 20"
4963
+ fill="currentColor"
4964
+ aria-hidden="true"
4965
+ role="img"
4966
+ width="1em"
4967
+ height="1em"
4968
+ >
4969
+ <path
4970
+ 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"
4971
+ />
4972
+ </svg>
4054
4973
  </span>
4055
4974
  </span>
4056
4975
  </span>
@@ -4280,9 +5199,10 @@ wrapperTag: div
4280
5199
  <span class="pf-v6-c-button__text">Skip to content</span>
4281
5200
  </a>
4282
5201
  </div>
5202
+
4283
5203
  <header
4284
5204
  class="pf-v6-c-masthead"
4285
- id="wizard-with-drawer-in-page-example-masthead"
5205
+ id="wizard-with-drawer-in-page-example-docked"
4286
5206
  >
4287
5207
  <div class="pf-v6-c-masthead__main">
4288
5208
  <span class="pf-v6-c-masthead__toggle">
@@ -4325,7 +5245,7 @@ wrapperTag: div
4325
5245
  y1="2.25860997e-13%"
4326
5246
  x2="32%"
4327
5247
  y2="100%"
4328
- id="linearGradient-wizard-with-drawer-in-page-example-masthead"
5248
+ id="linearGradient-wizard-with-drawer-in-page-example-docked"
4329
5249
  >
4330
5250
  <stop stop-color="#2B9AF3" offset="0%" />
4331
5251
  <stop
@@ -4379,11 +5299,11 @@ wrapperTag: div
4379
5299
  />
4380
5300
  <path
4381
5301
  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)"
5302
+ fill="url(#linearGradient-wizard-with-drawer-in-page-example-docked)"
4383
5303
  />
4384
5304
  <path
4385
5305
  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)"
5306
+ fill="url(#linearGradient-wizard-with-drawer-in-page-example-docked)"
4387
5307
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
4388
5308
  />
4389
5309
  </g>
@@ -4395,7 +5315,7 @@ wrapperTag: div
4395
5315
  <div class="pf-v6-c-masthead__content">
4396
5316
  <div
4397
5317
  class="pf-v6-c-toolbar pf-m-static"
4398
- id="wizard-with-drawer-in-page-example-masthead-toolbar"
5318
+ id="wizard-with-drawer-in-page-example-docked-toolbar"
4399
5319
  >
4400
5320
  <div class="pf-v6-c-toolbar__content">
4401
5321
  <div class="pf-v6-c-toolbar__content-section">
@@ -4413,7 +5333,19 @@ wrapperTag: div
4413
5333
  aria-label="Application launcher"
4414
5334
  >
4415
5335
  <span class="pf-v6-c-menu-toggle__icon">
4416
- <i class="fas fa-th" aria-hidden="true"></i>
5336
+ <svg
5337
+ class="pf-v6-svg"
5338
+ viewBox="0 0 512 512"
5339
+ fill="currentColor"
5340
+ aria-hidden="true"
5341
+ role="img"
5342
+ width="1em"
5343
+ height="1em"
5344
+ >
5345
+ <path
5346
+ d="M149.333 56v80c0 13.255-10.745 24-24 24H24c-13.255 0-24-10.745-24-24V56c0-13.255 10.745-24 24-24h101.333c13.255 0 24 10.745 24 24zm181.334 240v-80c0-13.255-10.745-24-24-24H205.333c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24h101.333c13.256 0 24.001-10.745 24.001-24zm32-240v80c0 13.255 10.745 24 24 24H488c13.255 0 24-10.745 24-24V56c0-13.255-10.745-24-24-24H386.667c-13.255 0-24 10.745-24 24zm-32 80V56c0-13.255-10.745-24-24-24H205.333c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24h101.333c13.256 0 24.001-10.745 24.001-24zm-205.334 56H24c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24h101.333c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24zM0 376v80c0 13.255 10.745 24 24 24h101.333c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H24c-13.255 0-24 10.745-24 24zm386.667-56H488c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H386.667c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24zm0 160H488c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H386.667c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24zM181.333 376v80c0 13.255 10.745 24 24 24h101.333c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H205.333c-13.255 0-24 10.745-24 24z"
5347
+ />
5348
+ </svg>
4417
5349
  </span>
4418
5350
  </button>
4419
5351
  </div>
@@ -4425,7 +5357,19 @@ wrapperTag: div
4425
5357
  aria-label="Settings"
4426
5358
  >
4427
5359
  <span class="pf-v6-c-menu-toggle__icon">
4428
- <i class="fas fa-cog" aria-hidden="true"></i>
5360
+ <svg
5361
+ class="pf-v6-svg"
5362
+ viewBox="0 0 32 32"
5363
+ fill="currentColor"
5364
+ aria-hidden="true"
5365
+ role="img"
5366
+ width="1em"
5367
+ height="1em"
5368
+ >
5369
+ <path
5370
+ d="M30.168 12.894a.5.5 0 0 0-.488-.394h-2.732a11.512 11.512 0 0 0-.729-1.769l1.931-1.93a.5.5 0 0 0 .066-.625 14.693 14.693 0 0 0-4.393-4.392.498.498 0 0 0-.624.067l-1.93 1.93a11.512 11.512 0 0 0-1.769-.729V2.319a.5.5 0 0 0-.395-.489 14.81 14.81 0 0 0-6.211 0 .5.5 0 0 0-.395.489v2.733c-.614.196-1.207.439-1.769.729L8.8 3.851a.498.498 0 0 0-.624-.067 14.714 14.714 0 0 0-4.393 4.392.5.5 0 0 0 .066.625l1.931 1.93a11.512 11.512 0 0 0-.729 1.769H2.319a.5.5 0 0 0-.488.394 14.652 14.652 0 0 0 0 6.212.5.5 0 0 0 .488.394h2.732c.196.615.44 1.207.729 1.769l-1.931 1.93a.5.5 0 0 0-.066.625 14.673 14.673 0 0 0 4.393 4.392.498.498 0 0 0 .624-.067l1.93-1.93c.562.289 1.154.533 1.769.729v2.733a.5.5 0 0 0 .395.489 14.686 14.686 0 0 0 6.21 0 .5.5 0 0 0 .395-.489v-2.733a11.454 11.454 0 0 0 1.769-.729l1.93 1.93a.5.5 0 0 0 .624.067 14.714 14.714 0 0 0 4.393-4.392.5.5 0 0 0-.066-.625l-1.931-1.93c.289-.562.533-1.154.729-1.769h2.732a.5.5 0 0 0 .488-.394 14.652 14.652 0 0 0 0-6.212ZM16 21.25c-2.895 0-5.25-2.355-5.25-5.25s2.355-5.25 5.25-5.25 5.25 2.355 5.25 5.25-2.355 5.25-5.25 5.25Z"
5371
+ />
5372
+ </svg>
4429
5373
  </span>
4430
5374
  </button>
4431
5375
  </div>
@@ -4437,7 +5381,19 @@ wrapperTag: div
4437
5381
  aria-label="Help"
4438
5382
  >
4439
5383
  <span class="pf-v6-c-menu-toggle__icon">
4440
- <i class="fas fa-question-circle" aria-hidden="true"></i>
5384
+ <svg
5385
+ class="pf-v6-svg"
5386
+ viewBox="0 0 512 512"
5387
+ fill="currentColor"
5388
+ aria-hidden="true"
5389
+ role="img"
5390
+ width="1em"
5391
+ height="1em"
5392
+ >
5393
+ <path
5394
+ d="M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zM262.655 90c-54.497 0-89.255 22.957-116.549 63.758-3.536 5.286-2.353 12.415 2.715 16.258l34.699 26.31c5.205 3.947 12.621 3.008 16.665-2.122 17.864-22.658 30.113-35.797 57.303-35.797 20.429 0 45.698 13.148 45.698 32.958 0 14.976-12.363 22.667-32.534 33.976C247.128 238.528 216 254.941 216 296v4c0 6.627 5.373 12 12 12h56c6.627 0 12-5.373 12-12v-1.333c0-28.462 83.186-29.647 83.186-106.667 0-58.002-60.165-102-116.531-102zM256 338c-25.365 0-46 20.635-46 46 0 25.364 20.635 46 46 46s46-20.636 46-46c0-25.365-20.635-46-46-46z"
5395
+ />
5396
+ </svg>
4441
5397
  </span>
4442
5398
  </button>
4443
5399
  </div>
@@ -4451,7 +5407,19 @@ wrapperTag: div
4451
5407
  aria-label="Actions"
4452
5408
  >
4453
5409
  <span class="pf-v6-c-menu-toggle__icon">
4454
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
5410
+ <svg
5411
+ class="pf-v6-svg"
5412
+ viewBox="0 0 32 32"
5413
+ fill="currentColor"
5414
+ aria-hidden="true"
5415
+ role="img"
5416
+ width="1em"
5417
+ height="1em"
5418
+ >
5419
+ <path
5420
+ d="M12.25 5c0-2.068 1.683-3.75 3.75-3.75S19.75 2.932 19.75 5 18.067 8.75 16 8.75 12.25 7.068 12.25 5ZM16 12.25c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Zm0 11c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Z"
5421
+ />
5422
+ </svg>
4455
5423
  </span>
4456
5424
  </button>
4457
5425
  </div>
@@ -4462,44 +5430,46 @@ wrapperTag: div
4462
5430
  </div>
4463
5431
  </header>
4464
5432
  <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>
5433
+ <div class="pf-v6-c-page__sidebar-main">
5434
+ <div class="pf-v6-c-page__sidebar-body">
5435
+ <nav
5436
+ class="pf-v6-c-nav"
5437
+ id="wizard-with-drawer-in-page-example-primary-nav"
5438
+ aria-label="Global"
5439
+ >
5440
+ <ul class="pf-v6-c-nav__list" role="list">
5441
+ <li class="pf-v6-c-nav__item">
5442
+ <a href="#" class="pf-v6-c-nav__link">
5443
+ <span class="pf-v6-c-nav__link-text">System panel</span>
5444
+ </a>
5445
+ </li>
5446
+ <li class="pf-v6-c-nav__item">
5447
+ <a
5448
+ href="#"
5449
+ class="pf-v6-c-nav__link pf-m-current"
5450
+ aria-current="page"
5451
+ >
5452
+ <span class="pf-v6-c-nav__link-text">Policy</span>
5453
+ </a>
5454
+ </li>
5455
+ <li class="pf-v6-c-nav__item">
5456
+ <a href="#" class="pf-v6-c-nav__link">
5457
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
5458
+ </a>
5459
+ </li>
5460
+ <li class="pf-v6-c-nav__item">
5461
+ <a href="#" class="pf-v6-c-nav__link">
5462
+ <span class="pf-v6-c-nav__link-text">Network services</span>
5463
+ </a>
5464
+ </li>
5465
+ <li class="pf-v6-c-nav__item">
5466
+ <a href="#" class="pf-v6-c-nav__link">
5467
+ <span class="pf-v6-c-nav__link-text">Server</span>
5468
+ </a>
5469
+ </li>
5470
+ </ul>
5471
+ </nav>
5472
+ </div>
4503
5473
  </div>
4504
5474
  </div>
4505
5475
  <div class="pf-v6-c-page__main-container" tabindex="-1">
@@ -4517,21 +5487,57 @@ wrapperTag: div
4517
5487
  </li>
4518
5488
  <li class="pf-v6-c-breadcrumb__item">
4519
5489
  <span class="pf-v6-c-breadcrumb__item-divider">
4520
- <i class="fas fa-angle-right" aria-hidden="true"></i>
5490
+ <svg
5491
+ class="pf-v6-svg"
5492
+ viewBox="0 0 20 20"
5493
+ fill="currentColor"
5494
+ aria-hidden="true"
5495
+ role="img"
5496
+ width="1em"
5497
+ height="1em"
5498
+ >
5499
+ <path
5500
+ 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"
5501
+ />
5502
+ </svg>
4521
5503
  </span>
4522
5504
 
4523
5505
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
4524
5506
  </li>
4525
5507
  <li class="pf-v6-c-breadcrumb__item">
4526
5508
  <span class="pf-v6-c-breadcrumb__item-divider">
4527
- <i class="fas fa-angle-right" aria-hidden="true"></i>
5509
+ <svg
5510
+ class="pf-v6-svg"
5511
+ viewBox="0 0 20 20"
5512
+ fill="currentColor"
5513
+ aria-hidden="true"
5514
+ role="img"
5515
+ width="1em"
5516
+ height="1em"
5517
+ >
5518
+ <path
5519
+ 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"
5520
+ />
5521
+ </svg>
4528
5522
  </span>
4529
5523
 
4530
5524
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
4531
5525
  </li>
4532
5526
  <li class="pf-v6-c-breadcrumb__item">
4533
5527
  <span class="pf-v6-c-breadcrumb__item-divider">
4534
- <i class="fas fa-angle-right" aria-hidden="true"></i>
5528
+ <svg
5529
+ class="pf-v6-svg"
5530
+ viewBox="0 0 20 20"
5531
+ fill="currentColor"
5532
+ aria-hidden="true"
5533
+ role="img"
5534
+ width="1em"
5535
+ height="1em"
5536
+ >
5537
+ <path
5538
+ 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"
5539
+ />
5540
+ </svg>
4535
5541
  </span>
4536
5542
 
4537
5543
  <a
@@ -4544,9 +5550,15 @@ wrapperTag: div
4544
5550
  </nav>
4545
5551
  </div>
4546
5552
  </section>
4547
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
5553
+ <section
5554
+ class="pf-v6-c-page__main-section pf-m-limit-width"
5555
+ aria-labelledby="main-title"
5556
+ >
4548
5557
  <div class="pf-v6-c-page__main-body">
4549
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
5558
+ <h1
5559
+ class="pf-v6-c-content--h1 pf-m-page-title"
5560
+ id="main-title"
5561
+ >Main title</h1>
4550
5562
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
4551
5563
  </div>
4552
5564
  </section>
@@ -4561,10 +5573,23 @@ wrapperTag: div
4561
5573
  <span class="pf-v6-c-wizard__toggle-list-item">
4562
5574
  <span class="pf-v6-c-wizard__toggle-num">2</span>
4563
5575
  Configuration
4564
- <i
4565
- class="fas fa-angle-right pf-v6-c-wizard__toggle-separator"
4566
- aria-hidden="true"
4567
- ></i>
5576
+ <span
5577
+ class="pf-v6-c-wizard__toggle-separator"
5578
+ >
5579
+ <svg
5580
+ class="pf-v6-svg"
5581
+ viewBox="0 0 20 20"
5582
+ fill="currentColor"
5583
+ aria-hidden="true"
5584
+ role="img"
5585
+ width="1em"
5586
+ height="1em"
5587
+ >
5588
+ <path
5589
+ 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"
5590
+ />
5591
+ </svg>
5592
+ </span>
4568
5593
  </span>
4569
5594
  <span class="pf-v6-c-wizard__toggle-list-item">Substep B</span>
4570
5595
  </span>
@@ -4597,7 +5622,19 @@ wrapperTag: div
4597
5622
  >Configuration</span>
4598
5623
  <span class="pf-v6-c-wizard__nav-link-toggle">
4599
5624
  <span class="pf-v6-c-wizard__nav-link-toggle-icon">
4600
- <i class="fas fa-angle-right" aria-hidden="true"></i>
5625
+ <svg
5626
+ class="pf-v6-svg"
5627
+ viewBox="0 0 20 20"
5628
+ fill="currentColor"
5629
+ aria-hidden="true"
5630
+ role="img"
5631
+ width="1em"
5632
+ height="1em"
5633
+ >
5634
+ <path
5635
+ 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"
5636
+ />
5637
+ </svg>
4601
5638
  </span>
4602
5639
  </span>
4603
5640
  </span>
@@ -4819,7 +5856,19 @@ wrapperTag: div
4819
5856
  aria-label="Close drawer panel"
4820
5857
  >
4821
5858
  <span class="pf-v6-c-button__icon">
4822
- <i class="fas fa-times" aria-hidden="true"></i>
5859
+ <svg
5860
+ class="pf-v6-svg"
5861
+ viewBox="0 0 20 20"
5862
+ fill="currentColor"
5863
+ aria-hidden="true"
5864
+ role="img"
5865
+ width="1em"
5866
+ height="1em"
5867
+ >
5868
+ <path
5869
+ 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"
5870
+ />
5871
+ </svg>
4823
5872
  </span>
4824
5873
  </button>
4825
5874
  </div>
@@ -4898,9 +5947,10 @@ wrapperTag: div
4898
5947
  <span class="pf-v6-c-button__text">Skip to content</span>
4899
5948
  </a>
4900
5949
  </div>
5950
+
4901
5951
  <header
4902
5952
  class="pf-v6-c-masthead"
4903
- id="wizard-with-drawer-in-page-expanded-example-masthead"
5953
+ id="wizard-with-drawer-in-page-expanded-example-docked"
4904
5954
  >
4905
5955
  <div class="pf-v6-c-masthead__main">
4906
5956
  <span class="pf-v6-c-masthead__toggle">
@@ -4943,7 +5993,7 @@ wrapperTag: div
4943
5993
  y1="2.25860997e-13%"
4944
5994
  x2="32%"
4945
5995
  y2="100%"
4946
- id="linearGradient-wizard-with-drawer-in-page-expanded-example-masthead"
5996
+ id="linearGradient-wizard-with-drawer-in-page-expanded-example-docked"
4947
5997
  >
4948
5998
  <stop stop-color="#2B9AF3" offset="0%" />
4949
5999
  <stop
@@ -4997,11 +6047,11 @@ wrapperTag: div
4997
6047
  />
4998
6048
  <path
4999
6049
  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)"
6050
+ fill="url(#linearGradient-wizard-with-drawer-in-page-expanded-example-docked)"
5001
6051
  />
5002
6052
  <path
5003
6053
  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)"
6054
+ fill="url(#linearGradient-wizard-with-drawer-in-page-expanded-example-docked)"
5005
6055
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
5006
6056
  />
5007
6057
  </g>
@@ -5013,7 +6063,7 @@ wrapperTag: div
5013
6063
  <div class="pf-v6-c-masthead__content">
5014
6064
  <div
5015
6065
  class="pf-v6-c-toolbar pf-m-static"
5016
- id="wizard-with-drawer-in-page-expanded-example-masthead-toolbar"
6066
+ id="wizard-with-drawer-in-page-expanded-example-docked-toolbar"
5017
6067
  >
5018
6068
  <div class="pf-v6-c-toolbar__content">
5019
6069
  <div class="pf-v6-c-toolbar__content-section">
@@ -5031,7 +6081,19 @@ wrapperTag: div
5031
6081
  aria-label="Application launcher"
5032
6082
  >
5033
6083
  <span class="pf-v6-c-menu-toggle__icon">
5034
- <i class="fas fa-th" aria-hidden="true"></i>
6084
+ <svg
6085
+ class="pf-v6-svg"
6086
+ viewBox="0 0 512 512"
6087
+ fill="currentColor"
6088
+ aria-hidden="true"
6089
+ role="img"
6090
+ width="1em"
6091
+ height="1em"
6092
+ >
6093
+ <path
6094
+ d="M149.333 56v80c0 13.255-10.745 24-24 24H24c-13.255 0-24-10.745-24-24V56c0-13.255 10.745-24 24-24h101.333c13.255 0 24 10.745 24 24zm181.334 240v-80c0-13.255-10.745-24-24-24H205.333c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24h101.333c13.256 0 24.001-10.745 24.001-24zm32-240v80c0 13.255 10.745 24 24 24H488c13.255 0 24-10.745 24-24V56c0-13.255-10.745-24-24-24H386.667c-13.255 0-24 10.745-24 24zm-32 80V56c0-13.255-10.745-24-24-24H205.333c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24h101.333c13.256 0 24.001-10.745 24.001-24zm-205.334 56H24c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24h101.333c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24zM0 376v80c0 13.255 10.745 24 24 24h101.333c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H24c-13.255 0-24 10.745-24 24zm386.667-56H488c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H386.667c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24zm0 160H488c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H386.667c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24zM181.333 376v80c0 13.255 10.745 24 24 24h101.333c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H205.333c-13.255 0-24 10.745-24 24z"
6095
+ />
6096
+ </svg>
5035
6097
  </span>
5036
6098
  </button>
5037
6099
  </div>
@@ -5043,7 +6105,19 @@ wrapperTag: div
5043
6105
  aria-label="Settings"
5044
6106
  >
5045
6107
  <span class="pf-v6-c-menu-toggle__icon">
5046
- <i class="fas fa-cog" aria-hidden="true"></i>
6108
+ <svg
6109
+ class="pf-v6-svg"
6110
+ viewBox="0 0 32 32"
6111
+ fill="currentColor"
6112
+ aria-hidden="true"
6113
+ role="img"
6114
+ width="1em"
6115
+ height="1em"
6116
+ >
6117
+ <path
6118
+ d="M30.168 12.894a.5.5 0 0 0-.488-.394h-2.732a11.512 11.512 0 0 0-.729-1.769l1.931-1.93a.5.5 0 0 0 .066-.625 14.693 14.693 0 0 0-4.393-4.392.498.498 0 0 0-.624.067l-1.93 1.93a11.512 11.512 0 0 0-1.769-.729V2.319a.5.5 0 0 0-.395-.489 14.81 14.81 0 0 0-6.211 0 .5.5 0 0 0-.395.489v2.733c-.614.196-1.207.439-1.769.729L8.8 3.851a.498.498 0 0 0-.624-.067 14.714 14.714 0 0 0-4.393 4.392.5.5 0 0 0 .066.625l1.931 1.93a11.512 11.512 0 0 0-.729 1.769H2.319a.5.5 0 0 0-.488.394 14.652 14.652 0 0 0 0 6.212.5.5 0 0 0 .488.394h2.732c.196.615.44 1.207.729 1.769l-1.931 1.93a.5.5 0 0 0-.066.625 14.673 14.673 0 0 0 4.393 4.392.498.498 0 0 0 .624-.067l1.93-1.93c.562.289 1.154.533 1.769.729v2.733a.5.5 0 0 0 .395.489 14.686 14.686 0 0 0 6.21 0 .5.5 0 0 0 .395-.489v-2.733a11.454 11.454 0 0 0 1.769-.729l1.93 1.93a.5.5 0 0 0 .624.067 14.714 14.714 0 0 0 4.393-4.392.5.5 0 0 0-.066-.625l-1.931-1.93c.289-.562.533-1.154.729-1.769h2.732a.5.5 0 0 0 .488-.394 14.652 14.652 0 0 0 0-6.212ZM16 21.25c-2.895 0-5.25-2.355-5.25-5.25s2.355-5.25 5.25-5.25 5.25 2.355 5.25 5.25-2.355 5.25-5.25 5.25Z"
6119
+ />
6120
+ </svg>
5047
6121
  </span>
5048
6122
  </button>
5049
6123
  </div>
@@ -5055,7 +6129,19 @@ wrapperTag: div
5055
6129
  aria-label="Help"
5056
6130
  >
5057
6131
  <span class="pf-v6-c-menu-toggle__icon">
5058
- <i class="fas fa-question-circle" aria-hidden="true"></i>
6132
+ <svg
6133
+ class="pf-v6-svg"
6134
+ viewBox="0 0 512 512"
6135
+ fill="currentColor"
6136
+ aria-hidden="true"
6137
+ role="img"
6138
+ width="1em"
6139
+ height="1em"
6140
+ >
6141
+ <path
6142
+ d="M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zM262.655 90c-54.497 0-89.255 22.957-116.549 63.758-3.536 5.286-2.353 12.415 2.715 16.258l34.699 26.31c5.205 3.947 12.621 3.008 16.665-2.122 17.864-22.658 30.113-35.797 57.303-35.797 20.429 0 45.698 13.148 45.698 32.958 0 14.976-12.363 22.667-32.534 33.976C247.128 238.528 216 254.941 216 296v4c0 6.627 5.373 12 12 12h56c6.627 0 12-5.373 12-12v-1.333c0-28.462 83.186-29.647 83.186-106.667 0-58.002-60.165-102-116.531-102zM256 338c-25.365 0-46 20.635-46 46 0 25.364 20.635 46 46 46s46-20.636 46-46c0-25.365-20.635-46-46-46z"
6143
+ />
6144
+ </svg>
5059
6145
  </span>
5060
6146
  </button>
5061
6147
  </div>
@@ -5069,7 +6155,19 @@ wrapperTag: div
5069
6155
  aria-label="Actions"
5070
6156
  >
5071
6157
  <span class="pf-v6-c-menu-toggle__icon">
5072
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
6158
+ <svg
6159
+ class="pf-v6-svg"
6160
+ viewBox="0 0 32 32"
6161
+ fill="currentColor"
6162
+ aria-hidden="true"
6163
+ role="img"
6164
+ width="1em"
6165
+ height="1em"
6166
+ >
6167
+ <path
6168
+ d="M12.25 5c0-2.068 1.683-3.75 3.75-3.75S19.75 2.932 19.75 5 18.067 8.75 16 8.75 12.25 7.068 12.25 5ZM16 12.25c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Zm0 11c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Z"
6169
+ />
6170
+ </svg>
5073
6171
  </span>
5074
6172
  </button>
5075
6173
  </div>
@@ -5080,44 +6178,46 @@ wrapperTag: div
5080
6178
  </div>
5081
6179
  </header>
5082
6180
  <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>
6181
+ <div class="pf-v6-c-page__sidebar-main">
6182
+ <div class="pf-v6-c-page__sidebar-body">
6183
+ <nav
6184
+ class="pf-v6-c-nav"
6185
+ id="wizard-with-drawer-in-page-expanded-example-primary-nav"
6186
+ aria-label="Global"
6187
+ >
6188
+ <ul class="pf-v6-c-nav__list" role="list">
6189
+ <li class="pf-v6-c-nav__item">
6190
+ <a href="#" class="pf-v6-c-nav__link">
6191
+ <span class="pf-v6-c-nav__link-text">System panel</span>
6192
+ </a>
6193
+ </li>
6194
+ <li class="pf-v6-c-nav__item">
6195
+ <a
6196
+ href="#"
6197
+ class="pf-v6-c-nav__link pf-m-current"
6198
+ aria-current="page"
6199
+ >
6200
+ <span class="pf-v6-c-nav__link-text">Policy</span>
6201
+ </a>
6202
+ </li>
6203
+ <li class="pf-v6-c-nav__item">
6204
+ <a href="#" class="pf-v6-c-nav__link">
6205
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
6206
+ </a>
6207
+ </li>
6208
+ <li class="pf-v6-c-nav__item">
6209
+ <a href="#" class="pf-v6-c-nav__link">
6210
+ <span class="pf-v6-c-nav__link-text">Network services</span>
6211
+ </a>
6212
+ </li>
6213
+ <li class="pf-v6-c-nav__item">
6214
+ <a href="#" class="pf-v6-c-nav__link">
6215
+ <span class="pf-v6-c-nav__link-text">Server</span>
6216
+ </a>
6217
+ </li>
6218
+ </ul>
6219
+ </nav>
6220
+ </div>
5121
6221
  </div>
5122
6222
  </div>
5123
6223
  <div class="pf-v6-c-page__main-container" tabindex="-1">
@@ -5135,21 +6235,57 @@ wrapperTag: div
5135
6235
  </li>
5136
6236
  <li class="pf-v6-c-breadcrumb__item">
5137
6237
  <span class="pf-v6-c-breadcrumb__item-divider">
5138
- <i class="fas fa-angle-right" aria-hidden="true"></i>
6238
+ <svg
6239
+ class="pf-v6-svg"
6240
+ viewBox="0 0 20 20"
6241
+ fill="currentColor"
6242
+ aria-hidden="true"
6243
+ role="img"
6244
+ width="1em"
6245
+ height="1em"
6246
+ >
6247
+ <path
6248
+ 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"
6249
+ />
6250
+ </svg>
5139
6251
  </span>
5140
6252
 
5141
6253
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
5142
6254
  </li>
5143
6255
  <li class="pf-v6-c-breadcrumb__item">
5144
6256
  <span class="pf-v6-c-breadcrumb__item-divider">
5145
- <i class="fas fa-angle-right" aria-hidden="true"></i>
6257
+ <svg
6258
+ class="pf-v6-svg"
6259
+ viewBox="0 0 20 20"
6260
+ fill="currentColor"
6261
+ aria-hidden="true"
6262
+ role="img"
6263
+ width="1em"
6264
+ height="1em"
6265
+ >
6266
+ <path
6267
+ 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"
6268
+ />
6269
+ </svg>
5146
6270
  </span>
5147
6271
 
5148
6272
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
5149
6273
  </li>
5150
6274
  <li class="pf-v6-c-breadcrumb__item">
5151
6275
  <span class="pf-v6-c-breadcrumb__item-divider">
5152
- <i class="fas fa-angle-right" aria-hidden="true"></i>
6276
+ <svg
6277
+ class="pf-v6-svg"
6278
+ viewBox="0 0 20 20"
6279
+ fill="currentColor"
6280
+ aria-hidden="true"
6281
+ role="img"
6282
+ width="1em"
6283
+ height="1em"
6284
+ >
6285
+ <path
6286
+ 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"
6287
+ />
6288
+ </svg>
5153
6289
  </span>
5154
6290
 
5155
6291
  <a
@@ -5162,9 +6298,15 @@ wrapperTag: div
5162
6298
  </nav>
5163
6299
  </div>
5164
6300
  </section>
5165
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
6301
+ <section
6302
+ class="pf-v6-c-page__main-section pf-m-limit-width"
6303
+ aria-labelledby="main-title"
6304
+ >
5166
6305
  <div class="pf-v6-c-page__main-body">
5167
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
6306
+ <h1
6307
+ class="pf-v6-c-content--h1 pf-m-page-title"
6308
+ id="main-title"
6309
+ >Main title</h1>
5168
6310
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
5169
6311
  </div>
5170
6312
  </section>
@@ -5179,10 +6321,23 @@ wrapperTag: div
5179
6321
  <span class="pf-v6-c-wizard__toggle-list-item">
5180
6322
  <span class="pf-v6-c-wizard__toggle-num">2</span>
5181
6323
  Configuration
5182
- <i
5183
- class="fas fa-angle-right pf-v6-c-wizard__toggle-separator"
5184
- aria-hidden="true"
5185
- ></i>
6324
+ <span
6325
+ class="pf-v6-c-wizard__toggle-separator"
6326
+ >
6327
+ <svg
6328
+ class="pf-v6-svg"
6329
+ viewBox="0 0 20 20"
6330
+ fill="currentColor"
6331
+ aria-hidden="true"
6332
+ role="img"
6333
+ width="1em"
6334
+ height="1em"
6335
+ >
6336
+ <path
6337
+ 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"
6338
+ />
6339
+ </svg>
6340
+ </span>
5186
6341
  </span>
5187
6342
  <span class="pf-v6-c-wizard__toggle-list-item">Substep B</span>
5188
6343
  </span>
@@ -5215,7 +6370,19 @@ wrapperTag: div
5215
6370
  >Configuration</span>
5216
6371
  <span class="pf-v6-c-wizard__nav-link-toggle">
5217
6372
  <span class="pf-v6-c-wizard__nav-link-toggle-icon">
5218
- <i class="fas fa-angle-right" aria-hidden="true"></i>
6373
+ <svg
6374
+ class="pf-v6-svg"
6375
+ viewBox="0 0 20 20"
6376
+ fill="currentColor"
6377
+ aria-hidden="true"
6378
+ role="img"
6379
+ width="1em"
6380
+ height="1em"
6381
+ >
6382
+ <path
6383
+ 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"
6384
+ />
6385
+ </svg>
5219
6386
  </span>
5220
6387
  </span>
5221
6388
  </span>
@@ -5437,7 +6604,19 @@ wrapperTag: div
5437
6604
  aria-label="Close drawer panel"
5438
6605
  >
5439
6606
  <span class="pf-v6-c-button__icon">
5440
- <i class="fas fa-times" aria-hidden="true"></i>
6607
+ <svg
6608
+ class="pf-v6-svg"
6609
+ viewBox="0 0 20 20"
6610
+ fill="currentColor"
6611
+ aria-hidden="true"
6612
+ role="img"
6613
+ width="1em"
6614
+ height="1em"
6615
+ >
6616
+ <path
6617
+ 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"
6618
+ />
6619
+ </svg>
5441
6620
  </span>
5442
6621
  </button>
5443
6622
  </div>