@patternfly/patternfly 6.5.0-prerelease.5 → 6.5.0-prerelease.50

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 (376) hide show
  1. package/README.md +1 -1
  2. package/assets/fontawesome/_variables.scss +2 -1
  3. package/assets/images/RHAiExperienceIcon.svg +27 -0
  4. package/assets/images/RHAutomationsLogo.svg +96 -0
  5. package/assets/images/RHServerStackIcon.svg +16 -0
  6. package/assets/images/compass--hero-bg.png +0 -0
  7. package/assets/images/compass--rh-wallpaper-dark.png +0 -0
  8. package/assets/images/compass--rh-wallpaper-light.png +0 -0
  9. package/assets/images/compass--wallpaper-dark.png +0 -0
  10. package/assets/images/compass--wallpaper-light.png +0 -0
  11. package/base/normalize.scss +7 -0
  12. package/base/patternfly-common.css +50 -0
  13. package/base/patternfly-common.scss +59 -0
  14. package/base/patternfly-svg-icons.css +11 -0
  15. package/base/patternfly-svg-icons.scss +14 -0
  16. package/base/patternfly-variables.css +345 -14
  17. package/base/patternfly-variables.scss +40 -0
  18. package/base/tokens/tokens-dark.scss +51 -3
  19. package/base/tokens/tokens-default.scss +67 -13
  20. package/base/tokens/tokens-glass-dark.scss +9 -0
  21. package/base/tokens/tokens-glass.scss +9 -0
  22. package/base/tokens/tokens-local.scss +16 -0
  23. package/base/tokens/tokens-palette.scss +3 -1
  24. package/base/tokens/tokens-redhat-dark.scss +14 -0
  25. package/base/tokens/tokens-redhat-glass-dark.scss +16 -0
  26. package/base/tokens/tokens-redhat-glass.scss +15 -0
  27. package/base/tokens/tokens-redhat-highcontrast-dark.scss +47 -0
  28. package/base/tokens/tokens-redhat-highcontrast.scss +127 -0
  29. package/base/tokens/tokens-redhat.scss +15 -0
  30. package/components/AboutModalBox/about-modal-box.css +36 -26
  31. package/components/Accordion/accordion.css +17 -14
  32. package/components/Accordion/accordion.scss +1 -2
  33. package/components/ActionList/action-list.css +2 -0
  34. package/components/ActionList/action-list.scss +2 -0
  35. package/components/Alert/alert.css +7 -5
  36. package/components/Alert/alert.scss +2 -1
  37. package/components/Avatar/avatar.css +12 -4
  38. package/components/BackgroundImage/background-image.css +6 -3
  39. package/components/Banner/banner.css +8 -6
  40. package/components/Brand/brand.css +3 -1
  41. package/components/Breadcrumb/breadcrumb.css +4 -3
  42. package/components/Button/button.css +117 -14
  43. package/components/Button/button.scss +127 -10
  44. package/components/CalendarMonth/calendar-month.css +4 -3
  45. package/components/Card/card.css +20 -7
  46. package/components/Card/card.scss +16 -2
  47. package/components/ClipboardCopy/clipboard-copy.css +7 -6
  48. package/components/ClipboardCopy/clipboard-copy.scss +3 -3
  49. package/components/CodeEditor/code-editor.css +1 -1
  50. package/components/CodeEditor/code-editor.scss +1 -1
  51. package/components/Compass/compass.css +320 -0
  52. package/components/Compass/compass.scss +350 -0
  53. package/components/DataList/data-list.css +34 -23
  54. package/components/DataList/data-list.scss +7 -2
  55. package/components/DescriptionList/description-list-order.scss +5 -1
  56. package/components/DescriptionList/description-list.css +7 -5
  57. package/components/DescriptionList/description-list.scss +5 -1
  58. package/components/Divider/divider.css +7 -5
  59. package/components/Drawer/drawer.css +110 -56
  60. package/components/Drawer/drawer.scss +69 -9
  61. package/components/DualListSelector/dual-list-selector.css +18 -12
  62. package/components/DualListSelector/dual-list-selector.scss +1 -1
  63. package/components/ExpandableSection/expandable-section.css +21 -16
  64. package/components/ExpandableSection/expandable-section.scss +6 -3
  65. package/components/Form/form.css +2 -2
  66. package/components/Form/form.scss +2 -2
  67. package/components/FormControl/form-control.css +3 -3
  68. package/components/FormControl/form-control.scss +3 -3
  69. package/components/Hero/hero.css +74 -0
  70. package/components/Hero/hero.scss +86 -0
  71. package/components/JumpLinks/jump-links.css +5 -4
  72. package/components/JumpLinks/jump-links.scss +6 -2
  73. package/components/Label/label-group.css +2 -2
  74. package/components/Label/label-group.scss +2 -2
  75. package/components/Label/label.css +4 -3
  76. package/components/Login/login.css +51 -37
  77. package/components/Masthead/masthead.css +70 -16
  78. package/components/Masthead/masthead.scss +54 -1
  79. package/components/Menu/menu.css +23 -14
  80. package/components/MenuToggle/menu-toggle.css +5 -1
  81. package/components/MenuToggle/menu-toggle.scss +6 -1
  82. package/components/ModalBox/modal-box.css +9 -7
  83. package/components/ModalBox/modal-box.scss +2 -2
  84. package/components/Nav/nav.css +74 -11
  85. package/components/Nav/nav.scss +77 -5
  86. package/components/NotificationDrawer/notification-drawer.css +19 -9
  87. package/components/NotificationDrawer/notification-drawer.scss +14 -5
  88. package/components/Page/page.css +55 -29
  89. package/components/Page/page.scss +44 -5
  90. package/components/Pagination/pagination.scss +5 -1
  91. package/components/ProgressStepper/progress-stepper.scss +5 -1
  92. package/components/Sidebar/sidebar.css +1 -1
  93. package/components/Sidebar/sidebar.scss +7 -3
  94. package/components/Skeleton/skeleton.css +16 -15
  95. package/components/Slider/slider.css +32 -18
  96. package/components/Switch/switch.css +4 -2
  97. package/components/Switch/switch.scss +1 -1
  98. package/components/Table/table-grid.css +28 -36
  99. package/components/Table/table-grid.scss +4 -4
  100. package/components/Table/table-tree-view.css +4 -2
  101. package/components/Table/table.css +33 -29
  102. package/components/Table/table.scss +2 -2
  103. package/components/Tabs/tabs.css +35 -18
  104. package/components/Tabs/tabs.scss +35 -7
  105. package/components/TextInputGroup/text-input-group.css +2 -2
  106. package/components/TextInputGroup/text-input-group.scss +2 -2
  107. package/components/ToggleGroup/toggle-group.css +34 -17
  108. package/components/ToggleGroup/toggle-group.scss +36 -20
  109. package/components/Toolbar/toolbar.css +47 -15
  110. package/components/Toolbar/toolbar.scss +34 -6
  111. package/components/TreeView/tree-view.css +45 -14
  112. package/components/TreeView/tree-view.scss +32 -1
  113. package/components/Wizard/wizard.css +21 -17
  114. package/components/Wizard/wizard.scss +4 -4
  115. package/components/_index.css +1602 -676
  116. package/components/_index.scss +3 -1
  117. package/docs/components/AboutModalBox/examples/AboutModalBox.md +13 -1
  118. package/docs/components/Accordion/examples/Accordion.md +390 -30
  119. package/docs/components/ActionList/examples/ActionList.md +143 -11
  120. package/docs/components/Alert/examples/Alert.md +678 -54
  121. package/docs/components/Avatar/examples/Avatar.md +4 -4
  122. package/docs/components/BackToTop/examples/BackToTop.md +13 -1
  123. package/docs/components/Banner/examples/Banner.md +65 -5
  124. package/docs/components/Brand/examples/Brand.md +2 -2
  125. package/docs/components/Breadcrumb/examples/Breadcrumb.md +299 -23
  126. package/docs/components/Button/examples/Button.md +2217 -241
  127. package/docs/components/CalendarMonth/examples/CalendarMonth.md +104 -8
  128. package/docs/components/Card/examples/Card.md +206 -4
  129. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +286 -22
  130. package/docs/components/CodeBlock/examples/CodeBlock.md +104 -8
  131. package/docs/components/CodeEditor/examples/CodeEditor.md +195 -15
  132. package/docs/components/Compass/examples/Compass.css +17 -0
  133. package/docs/components/Compass/examples/Compass.md +119 -0
  134. package/docs/components/DataList/examples/DataList.md +405 -205
  135. package/docs/components/DatePicker/examples/DatePicker.md +78 -6
  136. package/docs/components/DescriptionList/examples/DescriptionList.md +327 -27
  137. package/docs/components/Divider/examples/Divider.md +2 -2
  138. package/docs/components/Drawer/examples/Drawer.md +353 -35
  139. package/docs/components/DualListSelector/examples/DualListSelector.md +1013 -143
  140. package/docs/components/ExpandableSection/examples/ExpandableSection.md +91 -7
  141. package/docs/components/Form/examples/Form.md +78 -6
  142. package/docs/components/Hero/examples/Hero.md +25 -0
  143. package/docs/components/Icon/examples/Icon.md +92 -8
  144. package/docs/components/InlineEdit/examples/InlineEdit.md +312 -24
  145. package/docs/components/InputGroup/examples/InputGroup.md +27 -3
  146. package/docs/components/JumpLinks/examples/JumpLinks.md +54 -6
  147. package/docs/components/Label/examples/Label.md +2834 -218
  148. package/docs/components/Login/examples/Login.md +26 -2
  149. package/docs/components/Masthead/examples/masthead.md +80 -1
  150. package/docs/components/Menu/examples/Menu.md +1458 -114
  151. package/docs/components/MenuToggle/examples/MenuToggle.md +53 -1
  152. package/docs/components/ModalBox/examples/ModalBox.md +287 -23
  153. package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +156 -12
  154. package/docs/components/Nav/examples/Navigation.md +798 -58
  155. package/docs/components/NotificationDrawer/examples/NotificationDrawer.md +598 -46
  156. package/docs/components/OverflowMenu/examples/overflow-menu.md +78 -6
  157. package/docs/components/Page/examples/Page.md +51 -2
  158. package/docs/components/Pagination/examples/Pagination.md +627 -51
  159. package/docs/components/Popover/examples/Popover.md +286 -22
  160. package/docs/components/ProgressStepper/examples/ProgressStepper.md +275 -23
  161. package/docs/components/Sidebar/examples/Sidebar.md +1 -1
  162. package/docs/components/Slider/examples/Slider.md +52 -4
  163. package/docs/components/Table/examples/Table.md +875 -70
  164. package/docs/components/Tabs/examples/Tabs.md +4127 -320
  165. package/docs/components/TextInputGroup/examples/TextInputGroup.md +600 -48
  166. package/docs/components/ToggleGroup/examples/toggle-group.md +195 -15
  167. package/docs/components/Toolbar/examples/Toolbar.md +490 -42
  168. package/docs/components/TreeView/examples/TreeView.md +1390 -130
  169. package/docs/components/Wizard/examples/Wizard.md +492 -72
  170. package/docs/demos/AboutModal/examples/AboutModal.md +57 -9
  171. package/docs/demos/Alert/examples/Alert.md +236 -32
  172. package/docs/demos/BackToTop/examples/BackToTop.md +57 -9
  173. package/docs/demos/Banner/examples/Banner.md +88 -16
  174. package/docs/demos/Button/examples/Button.md +13 -1
  175. package/docs/demos/Card/examples/Card.md +399 -42
  176. package/docs/demos/CardView/examples/CardView.md +161 -17
  177. package/docs/demos/Compass/examples/Compass.md +6836 -0
  178. package/docs/demos/Dashboard/examples/Dashboard.md +173 -26
  179. package/docs/demos/DataList/examples/DataList.md +566 -65
  180. package/docs/demos/DescriptionList/examples/DescriptionList.md +156 -27
  181. package/docs/demos/Drawer/examples/Drawer.md +216 -45
  182. package/docs/demos/Form/examples/BasicForms.md +273 -21
  183. package/docs/demos/JumpLinks/examples/JumpLinks.md +272 -59
  184. package/docs/demos/Masthead/examples/Masthead.md +458 -89
  185. package/docs/demos/Modal/examples/Modal.md +342 -57
  186. package/docs/demos/Nav/examples/Nav.md +660 -87
  187. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +1088 -140
  188. package/docs/demos/Page/examples/Page.md +618 -123
  189. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +13 -1
  190. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +52 -4
  191. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +691 -113
  192. package/docs/demos/Skeleton/examples/Skeleton.md +44 -8
  193. package/docs/demos/Table/examples/Table.md +3924 -256
  194. package/docs/demos/Tabs/examples/Tabs.md +407 -65
  195. package/docs/demos/Toolbar/examples/Toolbar.md +502 -52
  196. package/docs/demos/Wizard/examples/Wizard.md +796 -130
  197. package/docs/layouts/Bullseye/examples/Bullseye.css +2 -2
  198. package/docs/layouts/Bullseye/examples/Bullseye.md +2 -1
  199. package/docs/layouts/Flex/examples/Flex.css +3 -3
  200. package/docs/layouts/Flex/examples/Flex.md +3 -2
  201. package/docs/layouts/Gallery/examples/Gallery.css +2 -2
  202. package/docs/layouts/Gallery/examples/Gallery.md +4 -3
  203. package/docs/layouts/Grid/examples/Grid.css +1 -1
  204. package/docs/layouts/Grid/examples/Grid.md +6 -5
  205. package/docs/layouts/Level/examples/Level.css +3 -3
  206. package/docs/layouts/Level/examples/Level.md +2 -1
  207. package/docs/layouts/Split/examples/Split.css +1 -1
  208. package/docs/layouts/Split/examples/Split.md +2 -1
  209. package/docs/layouts/Stack/examples/Stack.css +3 -3
  210. package/docs/layouts/Stack/examples/Stack.md +2 -1
  211. package/docs/utilities/Accessibility/examples/Accessibility.md +3 -2
  212. package/docs/utilities/Alignment/examples/Alignment.css +4 -4
  213. package/docs/utilities/Alignment/examples/Alignment.md +3 -2
  214. package/docs/utilities/BackgroundColor/examples/BackgroundColor.md +5 -4
  215. package/docs/utilities/BoxShadow/examples/box-shadow.css +2 -2
  216. package/docs/utilities/BoxShadow/examples/box-shadow.md +2 -1
  217. package/docs/utilities/Display/examples/Display.css +1 -1
  218. package/docs/utilities/Display/examples/Display.md +3 -2
  219. package/docs/utilities/Flex/examples/Flex.css +7 -7
  220. package/docs/utilities/Flex/examples/Flex.md +3 -2
  221. package/docs/utilities/Float/examples/Float.css +2 -2
  222. package/docs/utilities/Float/examples/Float.md +3 -2
  223. package/docs/utilities/Sizing/examples/Sizing.md +8 -7
  224. package/docs/utilities/Spacing/examples/Spacing.css +2 -2
  225. package/docs/utilities/Spacing/examples/Spacing.md +3 -2
  226. package/docs/utilities/Text/examples/Text.md +5 -4
  227. package/icons/PfIcons/add-circle-o.svg +4 -0
  228. package/icons/PfIcons/ansible-tower.svg +4 -0
  229. package/icons/PfIcons/applications.svg +4 -0
  230. package/icons/PfIcons/arrow.svg +4 -0
  231. package/icons/PfIcons/asleep.svg +4 -0
  232. package/icons/PfIcons/attention-bell.svg +4 -0
  233. package/icons/PfIcons/automation.svg +4 -0
  234. package/icons/PfIcons/bell.svg +4 -0
  235. package/icons/PfIcons/blueprint.svg +4 -0
  236. package/icons/PfIcons/build.svg +4 -0
  237. package/icons/PfIcons/builder-image.svg +4 -0
  238. package/icons/PfIcons/bundle.svg +4 -0
  239. package/icons/PfIcons/catalog.svg +4 -0
  240. package/icons/PfIcons/chat.svg +4 -0
  241. package/icons/PfIcons/close.svg +4 -0
  242. package/icons/PfIcons/cloud-security.svg +4 -0
  243. package/icons/PfIcons/cloud-tenant.svg +4 -0
  244. package/icons/PfIcons/cluster.svg +4 -0
  245. package/icons/PfIcons/connected.svg +4 -0
  246. package/icons/PfIcons/container-node.svg +4 -0
  247. package/icons/PfIcons/cpu.svg +4 -0
  248. package/icons/PfIcons/critical-risk.svg +4 -0
  249. package/icons/PfIcons/data-processor.svg +4 -0
  250. package/icons/PfIcons/data-sink.svg +4 -0
  251. package/icons/PfIcons/data-source.svg +4 -0
  252. package/icons/PfIcons/degraded.svg +4 -0
  253. package/icons/PfIcons/disconnected.svg +4 -0
  254. package/icons/PfIcons/domain.svg +4 -0
  255. package/icons/PfIcons/edit.svg +4 -0
  256. package/icons/PfIcons/enhancement.svg +4 -0
  257. package/icons/PfIcons/enterprise.svg +4 -0
  258. package/icons/PfIcons/equalizer.svg +4 -0
  259. package/icons/PfIcons/error-circle-o.svg +4 -0
  260. package/icons/PfIcons/export.svg +4 -0
  261. package/icons/PfIcons/filter.svg +4 -0
  262. package/icons/PfIcons/flavor.svg +4 -0
  263. package/icons/PfIcons/folder-close.svg +4 -0
  264. package/icons/PfIcons/folder-open.svg +4 -0
  265. package/icons/PfIcons/globe-route.svg +4 -0
  266. package/icons/PfIcons/help.svg +4 -0
  267. package/icons/PfIcons/history.svg +4 -0
  268. package/icons/PfIcons/home.svg +4 -0
  269. package/icons/PfIcons/import.svg +4 -0
  270. package/icons/PfIcons/in-progress.svg +4 -0
  271. package/icons/PfIcons/info.svg +4 -0
  272. package/icons/PfIcons/infrastructure.svg +4 -0
  273. package/icons/PfIcons/integration.svg +4 -0
  274. package/icons/PfIcons/key.svg +4 -0
  275. package/icons/PfIcons/locked.svg +4 -0
  276. package/icons/PfIcons/maintenance.svg +4 -0
  277. package/icons/PfIcons/memory.svg +4 -0
  278. package/icons/PfIcons/messages.svg +4 -0
  279. package/icons/PfIcons/middleware.svg +4 -0
  280. package/icons/PfIcons/migration.svg +4 -0
  281. package/icons/PfIcons/module.svg +4 -0
  282. package/icons/PfIcons/monitoring.svg +4 -0
  283. package/icons/PfIcons/multicluster.svg +4 -0
  284. package/icons/PfIcons/namespaces.svg +4 -0
  285. package/icons/PfIcons/network.svg +4 -0
  286. package/icons/PfIcons/new-process.svg +4 -0
  287. package/icons/PfIcons/not-started.svg +4 -0
  288. package/icons/PfIcons/off.svg +4 -0
  289. package/icons/PfIcons/ok.svg +4 -0
  290. package/icons/PfIcons/on-running.svg +4 -0
  291. package/icons/PfIcons/on.svg +4 -0
  292. package/icons/PfIcons/open-drawer-right.svg +4 -0
  293. package/icons/PfIcons/openshift.svg +4 -0
  294. package/icons/PfIcons/openstack.svg +4 -0
  295. package/icons/PfIcons/optimize.svg +4 -0
  296. package/icons/PfIcons/orders.svg +4 -0
  297. package/icons/PfIcons/os-image.svg +4 -0
  298. package/icons/PfIcons/package.svg +4 -0
  299. package/icons/PfIcons/panel-close.svg +4 -0
  300. package/icons/PfIcons/panel-open.svg +4 -0
  301. package/icons/PfIcons/paused.svg +4 -0
  302. package/icons/PfIcons/pending.svg +4 -0
  303. package/icons/PfIcons/pficon-dragdrop.svg +4 -0
  304. package/icons/PfIcons/pficon-history.svg +4 -0
  305. package/icons/PfIcons/pficon-network-range.svg +4 -0
  306. package/icons/PfIcons/pficon-satellite.svg +4 -0
  307. package/icons/PfIcons/pficon-sort-common-asc.svg +4 -0
  308. package/icons/PfIcons/pficon-sort-common-desc.svg +4 -0
  309. package/icons/PfIcons/pficon-template.svg +4 -0
  310. package/icons/PfIcons/pficon-vcenter.svg +4 -0
  311. package/icons/PfIcons/plugged.svg +4 -0
  312. package/icons/PfIcons/port.svg +4 -0
  313. package/icons/PfIcons/print.svg +4 -0
  314. package/icons/PfIcons/private.svg +4 -0
  315. package/icons/PfIcons/process-automation.svg +4 -0
  316. package/icons/PfIcons/project.svg +4 -0
  317. package/icons/PfIcons/rebalance.svg +4 -0
  318. package/icons/PfIcons/rebooting.svg +4 -0
  319. package/icons/PfIcons/regions.svg +4 -0
  320. package/icons/PfIcons/registry.svg +4 -0
  321. package/icons/PfIcons/remove2.svg +4 -0
  322. package/icons/PfIcons/replicator.svg +4 -0
  323. package/icons/PfIcons/repository.svg +4 -0
  324. package/icons/PfIcons/resource-pool.svg +4 -0
  325. package/icons/PfIcons/resources-almost-empty.svg +4 -0
  326. package/icons/PfIcons/resources-almost-full.svg +4 -0
  327. package/icons/PfIcons/resources-empty.svg +4 -0
  328. package/icons/PfIcons/resources-full.svg +4 -0
  329. package/icons/PfIcons/running.svg +4 -0
  330. package/icons/PfIcons/save.svg +4 -0
  331. package/icons/PfIcons/screen.svg +4 -0
  332. package/icons/PfIcons/security.svg +4 -0
  333. package/icons/PfIcons/server-group.svg +4 -0
  334. package/icons/PfIcons/server.svg +4 -0
  335. package/icons/PfIcons/service-catalog.svg +4 -0
  336. package/icons/PfIcons/service.svg +4 -0
  337. package/icons/PfIcons/services.svg +4 -0
  338. package/icons/PfIcons/severity-critical.svg +4 -0
  339. package/icons/PfIcons/severity-important.svg +4 -0
  340. package/icons/PfIcons/severity-minor.svg +4 -0
  341. package/icons/PfIcons/severity-moderate.svg +4 -0
  342. package/icons/PfIcons/severity-none.svg +4 -0
  343. package/icons/PfIcons/severity-undefined.svg +4 -0
  344. package/icons/PfIcons/spinner.svg +4 -0
  345. package/icons/PfIcons/spinner2.svg +4 -0
  346. package/icons/PfIcons/storage-domain.svg +4 -0
  347. package/icons/PfIcons/task.svg +4 -0
  348. package/icons/PfIcons/tenant.svg +4 -0
  349. package/icons/PfIcons/thumb-tack.svg +4 -0
  350. package/icons/PfIcons/topology.svg +4 -0
  351. package/icons/PfIcons/treeview.svg +4 -0
  352. package/icons/PfIcons/trend-down.svg +4 -0
  353. package/icons/PfIcons/trend-up.svg +4 -0
  354. package/icons/PfIcons/unknown.svg +4 -0
  355. package/icons/PfIcons/unlocked.svg +4 -0
  356. package/icons/PfIcons/unplugged.svg +4 -0
  357. package/icons/PfIcons/user.svg +4 -0
  358. package/icons/PfIcons/users.svg +4 -0
  359. package/icons/PfIcons/virtual-machine.svg +4 -0
  360. package/icons/PfIcons/volume.svg +4 -0
  361. package/icons/PfIcons/warning-triangle.svg +4 -0
  362. package/icons/PfIcons/zone.svg +4 -0
  363. package/layouts/Flex/flex.scss +83 -19
  364. package/layouts/Gallery/gallery.css +6 -2
  365. package/layouts/_index.css +6 -2
  366. package/package.json +34 -16
  367. package/patternfly-base-no-globals.css +406 -14
  368. package/patternfly-base.css +413 -14
  369. package/patternfly-charts.css +3 -3
  370. package/patternfly-no-globals.css +1947 -625
  371. package/patternfly.css +1954 -625
  372. package/patternfly.min.css +1 -1
  373. package/patternfly.min.css.map +1 -1
  374. package/sass-utilities/functions.scss +32 -25
  375. package/sass-utilities/mixins.scss +36 -20
  376. package/sass-utilities/namespaces-components.scss +6 -0
package/docs/demos/Wizard/examples/Wizard.md CHANGED
@@ -16,7 +16,7 @@ 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
+ <header class="pf-v6-c-masthead" id="wizard-basic-example-docked">
20
20
  <div class="pf-v6-c-masthead__main">
21
21
  <span class="pf-v6-c-masthead__toggle">
22
22
  <button
@@ -58,7 +58,7 @@ wrapperTag: div
58
58
  y1="2.25860997e-13%"
59
59
  x2="32%"
60
60
  y2="100%"
61
- id="linearGradient-wizard-basic-example-masthead"
61
+ id="linearGradient-wizard-basic-example-docked"
62
62
  >
63
63
  <stop stop-color="#2B9AF3" offset="0%" />
64
64
  <stop
@@ -112,11 +112,11 @@ wrapperTag: div
112
112
  />
113
113
  <path
114
114
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
115
- fill="url(#linearGradient-wizard-basic-example-masthead)"
115
+ fill="url(#linearGradient-wizard-basic-example-docked)"
116
116
  />
117
117
  <path
118
118
  d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z"
119
- fill="url(#linearGradient-wizard-basic-example-masthead)"
119
+ fill="url(#linearGradient-wizard-basic-example-docked)"
120
120
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
121
121
  />
122
122
  </g>
@@ -128,7 +128,7 @@ wrapperTag: div
128
128
  <div class="pf-v6-c-masthead__content">
129
129
  <div
130
130
  class="pf-v6-c-toolbar pf-m-static"
131
- id="wizard-basic-example-masthead-toolbar"
131
+ id="wizard-basic-example-docked-toolbar"
132
132
  >
133
133
  <div class="pf-v6-c-toolbar__content">
134
134
  <div class="pf-v6-c-toolbar__content-section">
@@ -250,21 +250,57 @@ wrapperTag: div
250
250
  </li>
251
251
  <li class="pf-v6-c-breadcrumb__item">
252
252
  <span class="pf-v6-c-breadcrumb__item-divider">
253
- <i class="fas fa-angle-right" aria-hidden="true"></i>
253
+ <svg
254
+ class="pf-v6-svg"
255
+ viewBox="0 0 20 20"
256
+ fill="currentColor"
257
+ aria-hidden="true"
258
+ role="img"
259
+ width="1em"
260
+ height="1em"
261
+ >
262
+ <path
263
+ 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"
264
+ />
265
+ </svg>
254
266
  </span>
255
267
 
256
268
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
257
269
  </li>
258
270
  <li class="pf-v6-c-breadcrumb__item">
259
271
  <span class="pf-v6-c-breadcrumb__item-divider">
260
- <i class="fas fa-angle-right" aria-hidden="true"></i>
272
+ <svg
273
+ class="pf-v6-svg"
274
+ viewBox="0 0 20 20"
275
+ fill="currentColor"
276
+ aria-hidden="true"
277
+ role="img"
278
+ width="1em"
279
+ height="1em"
280
+ >
281
+ <path
282
+ 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"
283
+ />
284
+ </svg>
261
285
  </span>
262
286
 
263
287
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
264
288
  </li>
265
289
  <li class="pf-v6-c-breadcrumb__item">
266
290
  <span class="pf-v6-c-breadcrumb__item-divider">
267
- <i class="fas fa-angle-right" aria-hidden="true"></i>
291
+ <svg
292
+ class="pf-v6-svg"
293
+ viewBox="0 0 20 20"
294
+ fill="currentColor"
295
+ aria-hidden="true"
296
+ role="img"
297
+ width="1em"
298
+ height="1em"
299
+ >
300
+ <path
301
+ 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"
302
+ />
303
+ </svg>
268
304
  </span>
269
305
 
270
306
  <a
@@ -339,7 +375,19 @@ wrapperTag: div
339
375
  aria-label="Close"
340
376
  >
341
377
  <span class="pf-v6-c-button__icon">
342
- <i class="fas fa-times" aria-hidden="true"></i>
378
+ <svg
379
+ class="pf-v6-svg"
380
+ viewBox="0 0 20 20"
381
+ fill="currentColor"
382
+ aria-hidden="true"
383
+ role="img"
384
+ width="1em"
385
+ height="1em"
386
+ >
387
+ <path
388
+ 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"
389
+ />
390
+ </svg>
343
391
  </span>
344
392
  </button>
345
393
  </div>
@@ -359,10 +407,23 @@ wrapperTag: div
359
407
  <span class="pf-v6-c-wizard__toggle-list-item">
360
408
  <span class="pf-v6-c-wizard__toggle-num">2</span>
361
409
  Configuration
362
- <i
363
- class="fas fa-angle-right pf-v6-c-wizard__toggle-separator"
364
- aria-hidden="true"
365
- ></i>
410
+ <span
411
+ class="pf-v6-c-wizard__toggle-separator"
412
+ >
413
+ <svg
414
+ class="pf-v6-svg"
415
+ viewBox="0 0 20 20"
416
+ fill="currentColor"
417
+ aria-hidden="true"
418
+ role="img"
419
+ width="1em"
420
+ height="1em"
421
+ >
422
+ <path
423
+ 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"
424
+ />
425
+ </svg>
426
+ </span>
366
427
  </span>
367
428
  <span class="pf-v6-c-wizard__toggle-list-item">Substep B</span>
368
429
  </span>
@@ -393,7 +454,19 @@ wrapperTag: div
393
454
  <span class="pf-v6-c-wizard__nav-link-text">Configuration</span>
394
455
  <span class="pf-v6-c-wizard__nav-link-toggle">
395
456
  <span class="pf-v6-c-wizard__nav-link-toggle-icon">
396
- <i class="fas fa-angle-right" aria-hidden="true"></i>
457
+ <svg
458
+ class="pf-v6-svg"
459
+ viewBox="0 0 20 20"
460
+ fill="currentColor"
461
+ aria-hidden="true"
462
+ role="img"
463
+ width="1em"
464
+ height="1em"
465
+ >
466
+ <path
467
+ 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"
468
+ />
469
+ </svg>
397
470
  </span>
398
471
  </span>
399
472
  </span>
@@ -637,7 +710,7 @@ wrapperTag: div
637
710
  <span class="pf-v6-c-button__text">Skip to content</span>
638
711
  </a>
639
712
  </div>
640
- <header class="pf-v6-c-masthead" id="wizard-nav-expanded-example-masthead">
713
+ <header class="pf-v6-c-masthead" id="wizard-nav-expanded-example-docked">
641
714
  <div class="pf-v6-c-masthead__main">
642
715
  <span class="pf-v6-c-masthead__toggle">
643
716
  <button
@@ -679,7 +752,7 @@ wrapperTag: div
679
752
  y1="2.25860997e-13%"
680
753
  x2="32%"
681
754
  y2="100%"
682
- id="linearGradient-wizard-nav-expanded-example-masthead"
755
+ id="linearGradient-wizard-nav-expanded-example-docked"
683
756
  >
684
757
  <stop stop-color="#2B9AF3" offset="0%" />
685
758
  <stop
@@ -733,11 +806,11 @@ wrapperTag: div
733
806
  />
734
807
  <path
735
808
  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)"
809
+ fill="url(#linearGradient-wizard-nav-expanded-example-docked)"
737
810
  />
738
811
  <path
739
812
  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)"
813
+ fill="url(#linearGradient-wizard-nav-expanded-example-docked)"
741
814
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
742
815
  />
743
816
  </g>
@@ -749,7 +822,7 @@ wrapperTag: div
749
822
  <div class="pf-v6-c-masthead__content">
750
823
  <div
751
824
  class="pf-v6-c-toolbar pf-m-static"
752
- id="wizard-nav-expanded-example-masthead-toolbar"
825
+ id="wizard-nav-expanded-example-docked-toolbar"
753
826
  >
754
827
  <div class="pf-v6-c-toolbar__content">
755
828
  <div class="pf-v6-c-toolbar__content-section">
@@ -871,21 +944,57 @@ wrapperTag: div
871
944
  </li>
872
945
  <li class="pf-v6-c-breadcrumb__item">
873
946
  <span class="pf-v6-c-breadcrumb__item-divider">
874
- <i class="fas fa-angle-right" aria-hidden="true"></i>
947
+ <svg
948
+ class="pf-v6-svg"
949
+ viewBox="0 0 20 20"
950
+ fill="currentColor"
951
+ aria-hidden="true"
952
+ role="img"
953
+ width="1em"
954
+ height="1em"
955
+ >
956
+ <path
957
+ 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"
958
+ />
959
+ </svg>
875
960
  </span>
876
961
 
877
962
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
878
963
  </li>
879
964
  <li class="pf-v6-c-breadcrumb__item">
880
965
  <span class="pf-v6-c-breadcrumb__item-divider">
881
- <i class="fas fa-angle-right" aria-hidden="true"></i>
966
+ <svg
967
+ class="pf-v6-svg"
968
+ viewBox="0 0 20 20"
969
+ fill="currentColor"
970
+ aria-hidden="true"
971
+ role="img"
972
+ width="1em"
973
+ height="1em"
974
+ >
975
+ <path
976
+ 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"
977
+ />
978
+ </svg>
882
979
  </span>
883
980
 
884
981
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
885
982
  </li>
886
983
  <li class="pf-v6-c-breadcrumb__item">
887
984
  <span class="pf-v6-c-breadcrumb__item-divider">
888
- <i class="fas fa-angle-right" aria-hidden="true"></i>
985
+ <svg
986
+ class="pf-v6-svg"
987
+ viewBox="0 0 20 20"
988
+ fill="currentColor"
989
+ aria-hidden="true"
990
+ role="img"
991
+ width="1em"
992
+ height="1em"
993
+ >
994
+ <path
995
+ 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"
996
+ />
997
+ </svg>
889
998
  </span>
890
999
 
891
1000
  <a
@@ -960,7 +1069,19 @@ wrapperTag: div
960
1069
  aria-label="Close"
961
1070
  >
962
1071
  <span class="pf-v6-c-button__icon">
963
- <i class="fas fa-times" aria-hidden="true"></i>
1072
+ <svg
1073
+ class="pf-v6-svg"
1074
+ viewBox="0 0 20 20"
1075
+ fill="currentColor"
1076
+ aria-hidden="true"
1077
+ role="img"
1078
+ width="1em"
1079
+ height="1em"
1080
+ >
1081
+ <path
1082
+ 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"
1083
+ />
1084
+ </svg>
964
1085
  </span>
965
1086
  </button>
966
1087
  </div>
@@ -980,10 +1101,23 @@ wrapperTag: div
980
1101
  <span class="pf-v6-c-wizard__toggle-list-item">
981
1102
  <span class="pf-v6-c-wizard__toggle-num">2</span>
982
1103
  Configuration
983
- <i
984
- class="fas fa-angle-right pf-v6-c-wizard__toggle-separator"
985
- aria-hidden="true"
986
- ></i>
1104
+ <span
1105
+ class="pf-v6-c-wizard__toggle-separator"
1106
+ >
1107
+ <svg
1108
+ class="pf-v6-svg"
1109
+ viewBox="0 0 20 20"
1110
+ fill="currentColor"
1111
+ aria-hidden="true"
1112
+ role="img"
1113
+ width="1em"
1114
+ height="1em"
1115
+ >
1116
+ <path
1117
+ 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"
1118
+ />
1119
+ </svg>
1120
+ </span>
987
1121
  </span>
988
1122
  <span class="pf-v6-c-wizard__toggle-list-item">Substep B</span>
989
1123
  </span>
@@ -1014,7 +1148,19 @@ wrapperTag: div
1014
1148
  <span class="pf-v6-c-wizard__nav-link-text">Configuration</span>
1015
1149
  <span class="pf-v6-c-wizard__nav-link-toggle">
1016
1150
  <span class="pf-v6-c-wizard__nav-link-toggle-icon">
1017
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1151
+ <svg
1152
+ class="pf-v6-svg"
1153
+ viewBox="0 0 20 20"
1154
+ fill="currentColor"
1155
+ aria-hidden="true"
1156
+ role="img"
1157
+ width="1em"
1158
+ height="1em"
1159
+ >
1160
+ <path
1161
+ 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"
1162
+ />
1163
+ </svg>
1018
1164
  </span>
1019
1165
  </span>
1020
1166
  </span>
@@ -1239,7 +1385,7 @@ wrapperTag: div
1239
1385
  </div>
1240
1386
  <header
1241
1387
  class="pf-v6-c-masthead"
1242
- id="wizard-with-drawer-closed-example-masthead"
1388
+ id="wizard-with-drawer-closed-example-docked"
1243
1389
  >
1244
1390
  <div class="pf-v6-c-masthead__main">
1245
1391
  <span class="pf-v6-c-masthead__toggle">
@@ -1282,7 +1428,7 @@ wrapperTag: div
1282
1428
  y1="2.25860997e-13%"
1283
1429
  x2="32%"
1284
1430
  y2="100%"
1285
- id="linearGradient-wizard-with-drawer-closed-example-masthead"
1431
+ id="linearGradient-wizard-with-drawer-closed-example-docked"
1286
1432
  >
1287
1433
  <stop stop-color="#2B9AF3" offset="0%" />
1288
1434
  <stop
@@ -1336,11 +1482,11 @@ wrapperTag: div
1336
1482
  />
1337
1483
  <path
1338
1484
  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)"
1485
+ fill="url(#linearGradient-wizard-with-drawer-closed-example-docked)"
1340
1486
  />
1341
1487
  <path
1342
1488
  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)"
1489
+ fill="url(#linearGradient-wizard-with-drawer-closed-example-docked)"
1344
1490
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
1345
1491
  />
1346
1492
  </g>
@@ -1352,7 +1498,7 @@ wrapperTag: div
1352
1498
  <div class="pf-v6-c-masthead__content">
1353
1499
  <div
1354
1500
  class="pf-v6-c-toolbar pf-m-static"
1355
- id="wizard-with-drawer-closed-example-masthead-toolbar"
1501
+ id="wizard-with-drawer-closed-example-docked-toolbar"
1356
1502
  >
1357
1503
  <div class="pf-v6-c-toolbar__content">
1358
1504
  <div class="pf-v6-c-toolbar__content-section">
@@ -1474,21 +1620,57 @@ wrapperTag: div
1474
1620
  </li>
1475
1621
  <li class="pf-v6-c-breadcrumb__item">
1476
1622
  <span class="pf-v6-c-breadcrumb__item-divider">
1477
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1623
+ <svg
1624
+ class="pf-v6-svg"
1625
+ viewBox="0 0 20 20"
1626
+ fill="currentColor"
1627
+ aria-hidden="true"
1628
+ role="img"
1629
+ width="1em"
1630
+ height="1em"
1631
+ >
1632
+ <path
1633
+ 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"
1634
+ />
1635
+ </svg>
1478
1636
  </span>
1479
1637
 
1480
1638
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1481
1639
  </li>
1482
1640
  <li class="pf-v6-c-breadcrumb__item">
1483
1641
  <span class="pf-v6-c-breadcrumb__item-divider">
1484
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1642
+ <svg
1643
+ class="pf-v6-svg"
1644
+ viewBox="0 0 20 20"
1645
+ fill="currentColor"
1646
+ aria-hidden="true"
1647
+ role="img"
1648
+ width="1em"
1649
+ height="1em"
1650
+ >
1651
+ <path
1652
+ 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"
1653
+ />
1654
+ </svg>
1485
1655
  </span>
1486
1656
 
1487
1657
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1488
1658
  </li>
1489
1659
  <li class="pf-v6-c-breadcrumb__item">
1490
1660
  <span class="pf-v6-c-breadcrumb__item-divider">
1491
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1661
+ <svg
1662
+ class="pf-v6-svg"
1663
+ viewBox="0 0 20 20"
1664
+ fill="currentColor"
1665
+ aria-hidden="true"
1666
+ role="img"
1667
+ width="1em"
1668
+ height="1em"
1669
+ >
1670
+ <path
1671
+ 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"
1672
+ />
1673
+ </svg>
1492
1674
  </span>
1493
1675
 
1494
1676
  <a
@@ -1563,7 +1745,19 @@ wrapperTag: div
1563
1745
  aria-label="Close"
1564
1746
  >
1565
1747
  <span class="pf-v6-c-button__icon">
1566
- <i class="fas fa-times" aria-hidden="true"></i>
1748
+ <svg
1749
+ class="pf-v6-svg"
1750
+ viewBox="0 0 20 20"
1751
+ fill="currentColor"
1752
+ aria-hidden="true"
1753
+ role="img"
1754
+ width="1em"
1755
+ height="1em"
1756
+ >
1757
+ <path
1758
+ 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"
1759
+ />
1760
+ </svg>
1567
1761
  </span>
1568
1762
  </button>
1569
1763
  </div>
@@ -1583,10 +1777,23 @@ wrapperTag: div
1583
1777
  <span class="pf-v6-c-wizard__toggle-list-item">
1584
1778
  <span class="pf-v6-c-wizard__toggle-num">2</span>
1585
1779
  Configuration
1586
- <i
1587
- class="fas fa-angle-right pf-v6-c-wizard__toggle-separator"
1588
- aria-hidden="true"
1589
- ></i>
1780
+ <span
1781
+ class="pf-v6-c-wizard__toggle-separator"
1782
+ >
1783
+ <svg
1784
+ class="pf-v6-svg"
1785
+ viewBox="0 0 20 20"
1786
+ fill="currentColor"
1787
+ aria-hidden="true"
1788
+ role="img"
1789
+ width="1em"
1790
+ height="1em"
1791
+ >
1792
+ <path
1793
+ 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"
1794
+ />
1795
+ </svg>
1796
+ </span>
1590
1797
  </span>
1591
1798
  <span class="pf-v6-c-wizard__toggle-list-item">Substep B</span>
1592
1799
  </span>
@@ -1617,7 +1824,19 @@ wrapperTag: div
1617
1824
  <span class="pf-v6-c-wizard__nav-link-text">Configuration</span>
1618
1825
  <span class="pf-v6-c-wizard__nav-link-toggle">
1619
1826
  <span class="pf-v6-c-wizard__nav-link-toggle-icon">
1620
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1827
+ <svg
1828
+ class="pf-v6-svg"
1829
+ viewBox="0 0 20 20"
1830
+ fill="currentColor"
1831
+ aria-hidden="true"
1832
+ role="img"
1833
+ width="1em"
1834
+ height="1em"
1835
+ >
1836
+ <path
1837
+ 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"
1838
+ />
1839
+ </svg>
1621
1840
  </span>
1622
1841
  </span>
1623
1842
  </span>
@@ -1838,7 +2057,19 @@ wrapperTag: div
1838
2057
  aria-label="Close drawer panel"
1839
2058
  >
1840
2059
  <span class="pf-v6-c-button__icon">
1841
- <i class="fas fa-times" aria-hidden="true"></i>
2060
+ <svg
2061
+ class="pf-v6-svg"
2062
+ viewBox="0 0 20 20"
2063
+ fill="currentColor"
2064
+ aria-hidden="true"
2065
+ role="img"
2066
+ width="1em"
2067
+ height="1em"
2068
+ >
2069
+ <path
2070
+ 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"
2071
+ />
2072
+ </svg>
1842
2073
  </span>
1843
2074
  </button>
1844
2075
  </div>
@@ -1926,7 +2157,7 @@ wrapperTag: div
1926
2157
  </div>
1927
2158
  <header
1928
2159
  class="pf-v6-c-masthead"
1929
- id="wizard-with-drawer-expanded-example-masthead"
2160
+ id="wizard-with-drawer-expanded-example-docked"
1930
2161
  >
1931
2162
  <div class="pf-v6-c-masthead__main">
1932
2163
  <span class="pf-v6-c-masthead__toggle">
@@ -1969,7 +2200,7 @@ wrapperTag: div
1969
2200
  y1="2.25860997e-13%"
1970
2201
  x2="32%"
1971
2202
  y2="100%"
1972
- id="linearGradient-wizard-with-drawer-expanded-example-masthead"
2203
+ id="linearGradient-wizard-with-drawer-expanded-example-docked"
1973
2204
  >
1974
2205
  <stop stop-color="#2B9AF3" offset="0%" />
1975
2206
  <stop
@@ -2023,11 +2254,11 @@ wrapperTag: div
2023
2254
  />
2024
2255
  <path
2025
2256
  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)"
2257
+ fill="url(#linearGradient-wizard-with-drawer-expanded-example-docked)"
2027
2258
  />
2028
2259
  <path
2029
2260
  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)"
2261
+ fill="url(#linearGradient-wizard-with-drawer-expanded-example-docked)"
2031
2262
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
2032
2263
  />
2033
2264
  </g>
@@ -2039,7 +2270,7 @@ wrapperTag: div
2039
2270
  <div class="pf-v6-c-masthead__content">
2040
2271
  <div
2041
2272
  class="pf-v6-c-toolbar pf-m-static"
2042
- id="wizard-with-drawer-expanded-example-masthead-toolbar"
2273
+ id="wizard-with-drawer-expanded-example-docked-toolbar"
2043
2274
  >
2044
2275
  <div class="pf-v6-c-toolbar__content">
2045
2276
  <div class="pf-v6-c-toolbar__content-section">
@@ -2161,21 +2392,57 @@ wrapperTag: div
2161
2392
  </li>
2162
2393
  <li class="pf-v6-c-breadcrumb__item">
2163
2394
  <span class="pf-v6-c-breadcrumb__item-divider">
2164
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2395
+ <svg
2396
+ class="pf-v6-svg"
2397
+ viewBox="0 0 20 20"
2398
+ fill="currentColor"
2399
+ aria-hidden="true"
2400
+ role="img"
2401
+ width="1em"
2402
+ height="1em"
2403
+ >
2404
+ <path
2405
+ 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"
2406
+ />
2407
+ </svg>
2165
2408
  </span>
2166
2409
 
2167
2410
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
2168
2411
  </li>
2169
2412
  <li class="pf-v6-c-breadcrumb__item">
2170
2413
  <span class="pf-v6-c-breadcrumb__item-divider">
2171
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2414
+ <svg
2415
+ class="pf-v6-svg"
2416
+ viewBox="0 0 20 20"
2417
+ fill="currentColor"
2418
+ aria-hidden="true"
2419
+ role="img"
2420
+ width="1em"
2421
+ height="1em"
2422
+ >
2423
+ <path
2424
+ 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"
2425
+ />
2426
+ </svg>
2172
2427
  </span>
2173
2428
 
2174
2429
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
2175
2430
  </li>
2176
2431
  <li class="pf-v6-c-breadcrumb__item">
2177
2432
  <span class="pf-v6-c-breadcrumb__item-divider">
2178
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2433
+ <svg
2434
+ class="pf-v6-svg"
2435
+ viewBox="0 0 20 20"
2436
+ fill="currentColor"
2437
+ aria-hidden="true"
2438
+ role="img"
2439
+ width="1em"
2440
+ height="1em"
2441
+ >
2442
+ <path
2443
+ 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"
2444
+ />
2445
+ </svg>
2179
2446
  </span>
2180
2447
 
2181
2448
  <a
@@ -2250,7 +2517,19 @@ wrapperTag: div
2250
2517
  aria-label="Close"
2251
2518
  >
2252
2519
  <span class="pf-v6-c-button__icon">
2253
- <i class="fas fa-times" aria-hidden="true"></i>
2520
+ <svg
2521
+ class="pf-v6-svg"
2522
+ viewBox="0 0 20 20"
2523
+ fill="currentColor"
2524
+ aria-hidden="true"
2525
+ role="img"
2526
+ width="1em"
2527
+ height="1em"
2528
+ >
2529
+ <path
2530
+ 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"
2531
+ />
2532
+ </svg>
2254
2533
  </span>
2255
2534
  </button>
2256
2535
  </div>
@@ -2270,10 +2549,23 @@ wrapperTag: div
2270
2549
  <span class="pf-v6-c-wizard__toggle-list-item">
2271
2550
  <span class="pf-v6-c-wizard__toggle-num">2</span>
2272
2551
  Configuration
2273
- <i
2274
- class="fas fa-angle-right pf-v6-c-wizard__toggle-separator"
2275
- aria-hidden="true"
2276
- ></i>
2552
+ <span
2553
+ class="pf-v6-c-wizard__toggle-separator"
2554
+ >
2555
+ <svg
2556
+ class="pf-v6-svg"
2557
+ viewBox="0 0 20 20"
2558
+ fill="currentColor"
2559
+ aria-hidden="true"
2560
+ role="img"
2561
+ width="1em"
2562
+ height="1em"
2563
+ >
2564
+ <path
2565
+ 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"
2566
+ />
2567
+ </svg>
2568
+ </span>
2277
2569
  </span>
2278
2570
  <span class="pf-v6-c-wizard__toggle-list-item">Substep B</span>
2279
2571
  </span>
@@ -2304,7 +2596,19 @@ wrapperTag: div
2304
2596
  <span class="pf-v6-c-wizard__nav-link-text">Configuration</span>
2305
2597
  <span class="pf-v6-c-wizard__nav-link-toggle">
2306
2598
  <span class="pf-v6-c-wizard__nav-link-toggle-icon">
2307
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2599
+ <svg
2600
+ class="pf-v6-svg"
2601
+ viewBox="0 0 20 20"
2602
+ fill="currentColor"
2603
+ aria-hidden="true"
2604
+ role="img"
2605
+ width="1em"
2606
+ height="1em"
2607
+ >
2608
+ <path
2609
+ 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"
2610
+ />
2611
+ </svg>
2308
2612
  </span>
2309
2613
  </span>
2310
2614
  </span>
@@ -2525,7 +2829,19 @@ wrapperTag: div
2525
2829
  aria-label="Close drawer panel"
2526
2830
  >
2527
2831
  <span class="pf-v6-c-button__icon">
2528
- <i class="fas fa-times" aria-hidden="true"></i>
2832
+ <svg
2833
+ class="pf-v6-svg"
2834
+ viewBox="0 0 20 20"
2835
+ fill="currentColor"
2836
+ aria-hidden="true"
2837
+ role="img"
2838
+ width="1em"
2839
+ height="1em"
2840
+ >
2841
+ <path
2842
+ 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"
2843
+ />
2844
+ </svg>
2529
2845
  </span>
2530
2846
  </button>
2531
2847
  </div>
@@ -2610,10 +2926,7 @@ wrapperTag: div
2610
2926
  <span class="pf-v6-c-button__text">Skip to content</span>
2611
2927
  </a>
2612
2928
  </div>
2613
- <header
2614
- class="pf-v6-c-masthead"
2615
- id="wizard-with-drawer-info-example-masthead"
2616
- >
2929
+ <header class="pf-v6-c-masthead" id="wizard-with-drawer-info-example-docked">
2617
2930
  <div class="pf-v6-c-masthead__main">
2618
2931
  <span class="pf-v6-c-masthead__toggle">
2619
2932
  <button
@@ -2655,7 +2968,7 @@ wrapperTag: div
2655
2968
  y1="2.25860997e-13%"
2656
2969
  x2="32%"
2657
2970
  y2="100%"
2658
- id="linearGradient-wizard-with-drawer-info-example-masthead"
2971
+ id="linearGradient-wizard-with-drawer-info-example-docked"
2659
2972
  >
2660
2973
  <stop stop-color="#2B9AF3" offset="0%" />
2661
2974
  <stop
@@ -2709,11 +3022,11 @@ wrapperTag: div
2709
3022
  />
2710
3023
  <path
2711
3024
  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)"
3025
+ fill="url(#linearGradient-wizard-with-drawer-info-example-docked)"
2713
3026
  />
2714
3027
  <path
2715
3028
  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)"
3029
+ fill="url(#linearGradient-wizard-with-drawer-info-example-docked)"
2717
3030
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
2718
3031
  />
2719
3032
  </g>
@@ -2725,7 +3038,7 @@ wrapperTag: div
2725
3038
  <div class="pf-v6-c-masthead__content">
2726
3039
  <div
2727
3040
  class="pf-v6-c-toolbar pf-m-static"
2728
- id="wizard-with-drawer-info-example-masthead-toolbar"
3041
+ id="wizard-with-drawer-info-example-docked-toolbar"
2729
3042
  >
2730
3043
  <div class="pf-v6-c-toolbar__content">
2731
3044
  <div class="pf-v6-c-toolbar__content-section">
@@ -2847,21 +3160,57 @@ wrapperTag: div
2847
3160
  </li>
2848
3161
  <li class="pf-v6-c-breadcrumb__item">
2849
3162
  <span class="pf-v6-c-breadcrumb__item-divider">
2850
- <i class="fas fa-angle-right" aria-hidden="true"></i>
3163
+ <svg
3164
+ class="pf-v6-svg"
3165
+ viewBox="0 0 20 20"
3166
+ fill="currentColor"
3167
+ aria-hidden="true"
3168
+ role="img"
3169
+ width="1em"
3170
+ height="1em"
3171
+ >
3172
+ <path
3173
+ 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"
3174
+ />
3175
+ </svg>
2851
3176
  </span>
2852
3177
 
2853
3178
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
2854
3179
  </li>
2855
3180
  <li class="pf-v6-c-breadcrumb__item">
2856
3181
  <span class="pf-v6-c-breadcrumb__item-divider">
2857
- <i class="fas fa-angle-right" aria-hidden="true"></i>
3182
+ <svg
3183
+ class="pf-v6-svg"
3184
+ viewBox="0 0 20 20"
3185
+ fill="currentColor"
3186
+ aria-hidden="true"
3187
+ role="img"
3188
+ width="1em"
3189
+ height="1em"
3190
+ >
3191
+ <path
3192
+ 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"
3193
+ />
3194
+ </svg>
2858
3195
  </span>
2859
3196
 
2860
3197
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
2861
3198
  </li>
2862
3199
  <li class="pf-v6-c-breadcrumb__item">
2863
3200
  <span class="pf-v6-c-breadcrumb__item-divider">
2864
- <i class="fas fa-angle-right" aria-hidden="true"></i>
3201
+ <svg
3202
+ class="pf-v6-svg"
3203
+ viewBox="0 0 20 20"
3204
+ fill="currentColor"
3205
+ aria-hidden="true"
3206
+ role="img"
3207
+ width="1em"
3208
+ height="1em"
3209
+ >
3210
+ <path
3211
+ 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"
3212
+ />
3213
+ </svg>
2865
3214
  </span>
2866
3215
 
2867
3216
  <a
@@ -2936,7 +3285,19 @@ wrapperTag: div
2936
3285
  aria-label="Close"
2937
3286
  >
2938
3287
  <span class="pf-v6-c-button__icon">
2939
- <i class="fas fa-times" aria-hidden="true"></i>
3288
+ <svg
3289
+ class="pf-v6-svg"
3290
+ viewBox="0 0 20 20"
3291
+ fill="currentColor"
3292
+ aria-hidden="true"
3293
+ role="img"
3294
+ width="1em"
3295
+ height="1em"
3296
+ >
3297
+ <path
3298
+ 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"
3299
+ />
3300
+ </svg>
2940
3301
  </span>
2941
3302
  </button>
2942
3303
  </div>
@@ -2956,10 +3317,23 @@ wrapperTag: div
2956
3317
  <span class="pf-v6-c-wizard__toggle-list-item">
2957
3318
  <span class="pf-v6-c-wizard__toggle-num">2</span>
2958
3319
  Configuration
2959
- <i
2960
- class="fas fa-angle-right pf-v6-c-wizard__toggle-separator"
2961
- aria-hidden="true"
2962
- ></i>
3320
+ <span
3321
+ class="pf-v6-c-wizard__toggle-separator"
3322
+ >
3323
+ <svg
3324
+ class="pf-v6-svg"
3325
+ viewBox="0 0 20 20"
3326
+ fill="currentColor"
3327
+ aria-hidden="true"
3328
+ role="img"
3329
+ width="1em"
3330
+ height="1em"
3331
+ >
3332
+ <path
3333
+ 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"
3334
+ />
3335
+ </svg>
3336
+ </span>
2963
3337
  </span>
2964
3338
  <span class="pf-v6-c-wizard__toggle-list-item">Substep B</span>
2965
3339
  </span>
@@ -2990,7 +3364,19 @@ wrapperTag: div
2990
3364
  <span class="pf-v6-c-wizard__nav-link-text">Configuration</span>
2991
3365
  <span class="pf-v6-c-wizard__nav-link-toggle">
2992
3366
  <span class="pf-v6-c-wizard__nav-link-toggle-icon">
2993
- <i class="fas fa-angle-right" aria-hidden="true"></i>
3367
+ <svg
3368
+ class="pf-v6-svg"
3369
+ viewBox="0 0 20 20"
3370
+ fill="currentColor"
3371
+ aria-hidden="true"
3372
+ role="img"
3373
+ width="1em"
3374
+ height="1em"
3375
+ >
3376
+ <path
3377
+ 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"
3378
+ />
3379
+ </svg>
2994
3380
  </span>
2995
3381
  </span>
2996
3382
  </span>
@@ -3085,7 +3471,19 @@ wrapperTag: div
3085
3471
  aria-label="Close drawer panel"
3086
3472
  >
3087
3473
  <span class="pf-v6-c-button__icon">
3088
- <i class="fas fa-times" aria-hidden="true"></i>
3474
+ <svg
3475
+ class="pf-v6-svg"
3476
+ viewBox="0 0 20 20"
3477
+ fill="currentColor"
3478
+ aria-hidden="true"
3479
+ role="img"
3480
+ width="1em"
3481
+ height="1em"
3482
+ >
3483
+ <path
3484
+ 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"
3485
+ />
3486
+ </svg>
3089
3487
  </span>
3090
3488
  </button>
3091
3489
  </div>
@@ -3171,7 +3569,7 @@ wrapperTag: div
3171
3569
  <span class="pf-v6-c-button__text">Skip to content</span>
3172
3570
  </a>
3173
3571
  </div>
3174
- <header class="pf-v6-c-masthead" id="wizard-in-page-example-masthead">
3572
+ <header class="pf-v6-c-masthead" id="wizard-in-page-example-docked">
3175
3573
  <div class="pf-v6-c-masthead__main">
3176
3574
  <span class="pf-v6-c-masthead__toggle">
3177
3575
  <button
@@ -3213,7 +3611,7 @@ wrapperTag: div
3213
3611
  y1="2.25860997e-13%"
3214
3612
  x2="32%"
3215
3613
  y2="100%"
3216
- id="linearGradient-wizard-in-page-example-masthead"
3614
+ id="linearGradient-wizard-in-page-example-docked"
3217
3615
  >
3218
3616
  <stop stop-color="#2B9AF3" offset="0%" />
3219
3617
  <stop
@@ -3267,11 +3665,11 @@ wrapperTag: div
3267
3665
  />
3268
3666
  <path
3269
3667
  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)"
3668
+ fill="url(#linearGradient-wizard-in-page-example-docked)"
3271
3669
  />
3272
3670
  <path
3273
3671
  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)"
3672
+ fill="url(#linearGradient-wizard-in-page-example-docked)"
3275
3673
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
3276
3674
  />
3277
3675
  </g>
@@ -3283,7 +3681,7 @@ wrapperTag: div
3283
3681
  <div class="pf-v6-c-masthead__content">
3284
3682
  <div
3285
3683
  class="pf-v6-c-toolbar pf-m-static"
3286
- id="wizard-in-page-example-masthead-toolbar"
3684
+ id="wizard-in-page-example-docked-toolbar"
3287
3685
  >
3288
3686
  <div class="pf-v6-c-toolbar__content">
3289
3687
  <div class="pf-v6-c-toolbar__content-section">
@@ -3405,21 +3803,57 @@ wrapperTag: div
3405
3803
  </li>
3406
3804
  <li class="pf-v6-c-breadcrumb__item">
3407
3805
  <span class="pf-v6-c-breadcrumb__item-divider">
3408
- <i class="fas fa-angle-right" aria-hidden="true"></i>
3806
+ <svg
3807
+ class="pf-v6-svg"
3808
+ viewBox="0 0 20 20"
3809
+ fill="currentColor"
3810
+ aria-hidden="true"
3811
+ role="img"
3812
+ width="1em"
3813
+ height="1em"
3814
+ >
3815
+ <path
3816
+ 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"
3817
+ />
3818
+ </svg>
3409
3819
  </span>
3410
3820
 
3411
3821
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
3412
3822
  </li>
3413
3823
  <li class="pf-v6-c-breadcrumb__item">
3414
3824
  <span class="pf-v6-c-breadcrumb__item-divider">
3415
- <i class="fas fa-angle-right" aria-hidden="true"></i>
3825
+ <svg
3826
+ class="pf-v6-svg"
3827
+ viewBox="0 0 20 20"
3828
+ fill="currentColor"
3829
+ aria-hidden="true"
3830
+ role="img"
3831
+ width="1em"
3832
+ height="1em"
3833
+ >
3834
+ <path
3835
+ 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"
3836
+ />
3837
+ </svg>
3416
3838
  </span>
3417
3839
 
3418
3840
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
3419
3841
  </li>
3420
3842
  <li class="pf-v6-c-breadcrumb__item">
3421
3843
  <span class="pf-v6-c-breadcrumb__item-divider">
3422
- <i class="fas fa-angle-right" aria-hidden="true"></i>
3844
+ <svg
3845
+ class="pf-v6-svg"
3846
+ viewBox="0 0 20 20"
3847
+ fill="currentColor"
3848
+ aria-hidden="true"
3849
+ role="img"
3850
+ width="1em"
3851
+ height="1em"
3852
+ >
3853
+ <path
3854
+ 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"
3855
+ />
3856
+ </svg>
3423
3857
  </span>
3424
3858
 
3425
3859
  <a
@@ -3449,10 +3883,23 @@ wrapperTag: div
3449
3883
  <span class="pf-v6-c-wizard__toggle-list-item">
3450
3884
  <span class="pf-v6-c-wizard__toggle-num">2</span>
3451
3885
  Configuration
3452
- <i
3453
- class="fas fa-angle-right pf-v6-c-wizard__toggle-separator"
3454
- aria-hidden="true"
3455
- ></i>
3886
+ <span
3887
+ class="pf-v6-c-wizard__toggle-separator"
3888
+ >
3889
+ <svg
3890
+ class="pf-v6-svg"
3891
+ viewBox="0 0 20 20"
3892
+ fill="currentColor"
3893
+ aria-hidden="true"
3894
+ role="img"
3895
+ width="1em"
3896
+ height="1em"
3897
+ >
3898
+ <path
3899
+ 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"
3900
+ />
3901
+ </svg>
3902
+ </span>
3456
3903
  </span>
3457
3904
  <span class="pf-v6-c-wizard__toggle-list-item">Substep B</span>
3458
3905
  </span>
@@ -3485,7 +3932,19 @@ wrapperTag: div
3485
3932
  >Configuration</span>
3486
3933
  <span class="pf-v6-c-wizard__nav-link-toggle">
3487
3934
  <span class="pf-v6-c-wizard__nav-link-toggle-icon">
3488
- <i class="fas fa-angle-right" aria-hidden="true"></i>
3935
+ <svg
3936
+ class="pf-v6-svg"
3937
+ viewBox="0 0 20 20"
3938
+ fill="currentColor"
3939
+ aria-hidden="true"
3940
+ role="img"
3941
+ width="1em"
3942
+ height="1em"
3943
+ >
3944
+ <path
3945
+ 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"
3946
+ />
3947
+ </svg>
3489
3948
  </span>
3490
3949
  </span>
3491
3950
  </span>
@@ -3736,7 +4195,7 @@ wrapperTag: div
3736
4195
  <span class="pf-v6-c-button__text">Skip to content</span>
3737
4196
  </a>
3738
4197
  </div>
3739
- <header class="pf-v6-c-masthead" id="in-page-nav-expanded-example-masthead">
4198
+ <header class="pf-v6-c-masthead" id="in-page-nav-expanded-example-docked">
3740
4199
  <div class="pf-v6-c-masthead__main">
3741
4200
  <span class="pf-v6-c-masthead__toggle">
3742
4201
  <button
@@ -3778,7 +4237,7 @@ wrapperTag: div
3778
4237
  y1="2.25860997e-13%"
3779
4238
  x2="32%"
3780
4239
  y2="100%"
3781
- id="linearGradient-in-page-nav-expanded-example-masthead"
4240
+ id="linearGradient-in-page-nav-expanded-example-docked"
3782
4241
  >
3783
4242
  <stop stop-color="#2B9AF3" offset="0%" />
3784
4243
  <stop
@@ -3832,11 +4291,11 @@ wrapperTag: div
3832
4291
  />
3833
4292
  <path
3834
4293
  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)"
4294
+ fill="url(#linearGradient-in-page-nav-expanded-example-docked)"
3836
4295
  />
3837
4296
  <path
3838
4297
  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)"
4298
+ fill="url(#linearGradient-in-page-nav-expanded-example-docked)"
3840
4299
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
3841
4300
  />
3842
4301
  </g>
@@ -3848,7 +4307,7 @@ wrapperTag: div
3848
4307
  <div class="pf-v6-c-masthead__content">
3849
4308
  <div
3850
4309
  class="pf-v6-c-toolbar pf-m-static"
3851
- id="in-page-nav-expanded-example-masthead-toolbar"
4310
+ id="in-page-nav-expanded-example-docked-toolbar"
3852
4311
  >
3853
4312
  <div class="pf-v6-c-toolbar__content">
3854
4313
  <div class="pf-v6-c-toolbar__content-section">
@@ -3970,21 +4429,57 @@ wrapperTag: div
3970
4429
  </li>
3971
4430
  <li class="pf-v6-c-breadcrumb__item">
3972
4431
  <span class="pf-v6-c-breadcrumb__item-divider">
3973
- <i class="fas fa-angle-right" aria-hidden="true"></i>
4432
+ <svg
4433
+ class="pf-v6-svg"
4434
+ viewBox="0 0 20 20"
4435
+ fill="currentColor"
4436
+ aria-hidden="true"
4437
+ role="img"
4438
+ width="1em"
4439
+ height="1em"
4440
+ >
4441
+ <path
4442
+ 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"
4443
+ />
4444
+ </svg>
3974
4445
  </span>
3975
4446
 
3976
4447
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
3977
4448
  </li>
3978
4449
  <li class="pf-v6-c-breadcrumb__item">
3979
4450
  <span class="pf-v6-c-breadcrumb__item-divider">
3980
- <i class="fas fa-angle-right" aria-hidden="true"></i>
4451
+ <svg
4452
+ class="pf-v6-svg"
4453
+ viewBox="0 0 20 20"
4454
+ fill="currentColor"
4455
+ aria-hidden="true"
4456
+ role="img"
4457
+ width="1em"
4458
+ height="1em"
4459
+ >
4460
+ <path
4461
+ 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"
4462
+ />
4463
+ </svg>
3981
4464
  </span>
3982
4465
 
3983
4466
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
3984
4467
  </li>
3985
4468
  <li class="pf-v6-c-breadcrumb__item">
3986
4469
  <span class="pf-v6-c-breadcrumb__item-divider">
3987
- <i class="fas fa-angle-right" aria-hidden="true"></i>
4470
+ <svg
4471
+ class="pf-v6-svg"
4472
+ viewBox="0 0 20 20"
4473
+ fill="currentColor"
4474
+ aria-hidden="true"
4475
+ role="img"
4476
+ width="1em"
4477
+ height="1em"
4478
+ >
4479
+ <path
4480
+ 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"
4481
+ />
4482
+ </svg>
3988
4483
  </span>
3989
4484
 
3990
4485
  <a
@@ -4014,10 +4509,23 @@ wrapperTag: div
4014
4509
  <span class="pf-v6-c-wizard__toggle-list-item">
4015
4510
  <span class="pf-v6-c-wizard__toggle-num">2</span>
4016
4511
  Configuration
4017
- <i
4018
- class="fas fa-angle-right pf-v6-c-wizard__toggle-separator"
4019
- aria-hidden="true"
4020
- ></i>
4512
+ <span
4513
+ class="pf-v6-c-wizard__toggle-separator"
4514
+ >
4515
+ <svg
4516
+ class="pf-v6-svg"
4517
+ viewBox="0 0 20 20"
4518
+ fill="currentColor"
4519
+ aria-hidden="true"
4520
+ role="img"
4521
+ width="1em"
4522
+ height="1em"
4523
+ >
4524
+ <path
4525
+ 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"
4526
+ />
4527
+ </svg>
4528
+ </span>
4021
4529
  </span>
4022
4530
  <span class="pf-v6-c-wizard__toggle-list-item">Substep B</span>
4023
4531
  </span>
@@ -4050,7 +4558,19 @@ wrapperTag: div
4050
4558
  >Configuration</span>
4051
4559
  <span class="pf-v6-c-wizard__nav-link-toggle">
4052
4560
  <span class="pf-v6-c-wizard__nav-link-toggle-icon">
4053
- <i class="fas fa-angle-right" aria-hidden="true"></i>
4561
+ <svg
4562
+ class="pf-v6-svg"
4563
+ viewBox="0 0 20 20"
4564
+ fill="currentColor"
4565
+ aria-hidden="true"
4566
+ role="img"
4567
+ width="1em"
4568
+ height="1em"
4569
+ >
4570
+ <path
4571
+ 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"
4572
+ />
4573
+ </svg>
4054
4574
  </span>
4055
4575
  </span>
4056
4576
  </span>
@@ -4282,7 +4802,7 @@ wrapperTag: div
4282
4802
  </div>
4283
4803
  <header
4284
4804
  class="pf-v6-c-masthead"
4285
- id="wizard-with-drawer-in-page-example-masthead"
4805
+ id="wizard-with-drawer-in-page-example-docked"
4286
4806
  >
4287
4807
  <div class="pf-v6-c-masthead__main">
4288
4808
  <span class="pf-v6-c-masthead__toggle">
@@ -4325,7 +4845,7 @@ wrapperTag: div
4325
4845
  y1="2.25860997e-13%"
4326
4846
  x2="32%"
4327
4847
  y2="100%"
4328
- id="linearGradient-wizard-with-drawer-in-page-example-masthead"
4848
+ id="linearGradient-wizard-with-drawer-in-page-example-docked"
4329
4849
  >
4330
4850
  <stop stop-color="#2B9AF3" offset="0%" />
4331
4851
  <stop
@@ -4379,11 +4899,11 @@ wrapperTag: div
4379
4899
  />
4380
4900
  <path
4381
4901
  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)"
4902
+ fill="url(#linearGradient-wizard-with-drawer-in-page-example-docked)"
4383
4903
  />
4384
4904
  <path
4385
4905
  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)"
4906
+ fill="url(#linearGradient-wizard-with-drawer-in-page-example-docked)"
4387
4907
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
4388
4908
  />
4389
4909
  </g>
@@ -4395,7 +4915,7 @@ wrapperTag: div
4395
4915
  <div class="pf-v6-c-masthead__content">
4396
4916
  <div
4397
4917
  class="pf-v6-c-toolbar pf-m-static"
4398
- id="wizard-with-drawer-in-page-example-masthead-toolbar"
4918
+ id="wizard-with-drawer-in-page-example-docked-toolbar"
4399
4919
  >
4400
4920
  <div class="pf-v6-c-toolbar__content">
4401
4921
  <div class="pf-v6-c-toolbar__content-section">
@@ -4517,21 +5037,57 @@ wrapperTag: div
4517
5037
  </li>
4518
5038
  <li class="pf-v6-c-breadcrumb__item">
4519
5039
  <span class="pf-v6-c-breadcrumb__item-divider">
4520
- <i class="fas fa-angle-right" aria-hidden="true"></i>
5040
+ <svg
5041
+ class="pf-v6-svg"
5042
+ viewBox="0 0 20 20"
5043
+ fill="currentColor"
5044
+ aria-hidden="true"
5045
+ role="img"
5046
+ width="1em"
5047
+ height="1em"
5048
+ >
5049
+ <path
5050
+ 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"
5051
+ />
5052
+ </svg>
4521
5053
  </span>
4522
5054
 
4523
5055
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
4524
5056
  </li>
4525
5057
  <li class="pf-v6-c-breadcrumb__item">
4526
5058
  <span class="pf-v6-c-breadcrumb__item-divider">
4527
- <i class="fas fa-angle-right" aria-hidden="true"></i>
5059
+ <svg
5060
+ class="pf-v6-svg"
5061
+ viewBox="0 0 20 20"
5062
+ fill="currentColor"
5063
+ aria-hidden="true"
5064
+ role="img"
5065
+ width="1em"
5066
+ height="1em"
5067
+ >
5068
+ <path
5069
+ 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"
5070
+ />
5071
+ </svg>
4528
5072
  </span>
4529
5073
 
4530
5074
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
4531
5075
  </li>
4532
5076
  <li class="pf-v6-c-breadcrumb__item">
4533
5077
  <span class="pf-v6-c-breadcrumb__item-divider">
4534
- <i class="fas fa-angle-right" aria-hidden="true"></i>
5078
+ <svg
5079
+ class="pf-v6-svg"
5080
+ viewBox="0 0 20 20"
5081
+ fill="currentColor"
5082
+ aria-hidden="true"
5083
+ role="img"
5084
+ width="1em"
5085
+ height="1em"
5086
+ >
5087
+ <path
5088
+ 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"
5089
+ />
5090
+ </svg>
4535
5091
  </span>
4536
5092
 
4537
5093
  <a
@@ -4561,10 +5117,23 @@ wrapperTag: div
4561
5117
  <span class="pf-v6-c-wizard__toggle-list-item">
4562
5118
  <span class="pf-v6-c-wizard__toggle-num">2</span>
4563
5119
  Configuration
4564
- <i
4565
- class="fas fa-angle-right pf-v6-c-wizard__toggle-separator"
4566
- aria-hidden="true"
4567
- ></i>
5120
+ <span
5121
+ class="pf-v6-c-wizard__toggle-separator"
5122
+ >
5123
+ <svg
5124
+ class="pf-v6-svg"
5125
+ viewBox="0 0 20 20"
5126
+ fill="currentColor"
5127
+ aria-hidden="true"
5128
+ role="img"
5129
+ width="1em"
5130
+ height="1em"
5131
+ >
5132
+ <path
5133
+ 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"
5134
+ />
5135
+ </svg>
5136
+ </span>
4568
5137
  </span>
4569
5138
  <span class="pf-v6-c-wizard__toggle-list-item">Substep B</span>
4570
5139
  </span>
@@ -4597,7 +5166,19 @@ wrapperTag: div
4597
5166
  >Configuration</span>
4598
5167
  <span class="pf-v6-c-wizard__nav-link-toggle">
4599
5168
  <span class="pf-v6-c-wizard__nav-link-toggle-icon">
4600
- <i class="fas fa-angle-right" aria-hidden="true"></i>
5169
+ <svg
5170
+ class="pf-v6-svg"
5171
+ viewBox="0 0 20 20"
5172
+ fill="currentColor"
5173
+ aria-hidden="true"
5174
+ role="img"
5175
+ width="1em"
5176
+ height="1em"
5177
+ >
5178
+ <path
5179
+ 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"
5180
+ />
5181
+ </svg>
4601
5182
  </span>
4602
5183
  </span>
4603
5184
  </span>
@@ -4819,7 +5400,19 @@ wrapperTag: div
4819
5400
  aria-label="Close drawer panel"
4820
5401
  >
4821
5402
  <span class="pf-v6-c-button__icon">
4822
- <i class="fas fa-times" aria-hidden="true"></i>
5403
+ <svg
5404
+ class="pf-v6-svg"
5405
+ viewBox="0 0 20 20"
5406
+ fill="currentColor"
5407
+ aria-hidden="true"
5408
+ role="img"
5409
+ width="1em"
5410
+ height="1em"
5411
+ >
5412
+ <path
5413
+ 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"
5414
+ />
5415
+ </svg>
4823
5416
  </span>
4824
5417
  </button>
4825
5418
  </div>
@@ -4900,7 +5493,7 @@ wrapperTag: div
4900
5493
  </div>
4901
5494
  <header
4902
5495
  class="pf-v6-c-masthead"
4903
- id="wizard-with-drawer-in-page-expanded-example-masthead"
5496
+ id="wizard-with-drawer-in-page-expanded-example-docked"
4904
5497
  >
4905
5498
  <div class="pf-v6-c-masthead__main">
4906
5499
  <span class="pf-v6-c-masthead__toggle">
@@ -4943,7 +5536,7 @@ wrapperTag: div
4943
5536
  y1="2.25860997e-13%"
4944
5537
  x2="32%"
4945
5538
  y2="100%"
4946
- id="linearGradient-wizard-with-drawer-in-page-expanded-example-masthead"
5539
+ id="linearGradient-wizard-with-drawer-in-page-expanded-example-docked"
4947
5540
  >
4948
5541
  <stop stop-color="#2B9AF3" offset="0%" />
4949
5542
  <stop
@@ -4997,11 +5590,11 @@ wrapperTag: div
4997
5590
  />
4998
5591
  <path
4999
5592
  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)"
5593
+ fill="url(#linearGradient-wizard-with-drawer-in-page-expanded-example-docked)"
5001
5594
  />
5002
5595
  <path
5003
5596
  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)"
5597
+ fill="url(#linearGradient-wizard-with-drawer-in-page-expanded-example-docked)"
5005
5598
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
5006
5599
  />
5007
5600
  </g>
@@ -5013,7 +5606,7 @@ wrapperTag: div
5013
5606
  <div class="pf-v6-c-masthead__content">
5014
5607
  <div
5015
5608
  class="pf-v6-c-toolbar pf-m-static"
5016
- id="wizard-with-drawer-in-page-expanded-example-masthead-toolbar"
5609
+ id="wizard-with-drawer-in-page-expanded-example-docked-toolbar"
5017
5610
  >
5018
5611
  <div class="pf-v6-c-toolbar__content">
5019
5612
  <div class="pf-v6-c-toolbar__content-section">
@@ -5135,21 +5728,57 @@ wrapperTag: div
5135
5728
  </li>
5136
5729
  <li class="pf-v6-c-breadcrumb__item">
5137
5730
  <span class="pf-v6-c-breadcrumb__item-divider">
5138
- <i class="fas fa-angle-right" aria-hidden="true"></i>
5731
+ <svg
5732
+ class="pf-v6-svg"
5733
+ viewBox="0 0 20 20"
5734
+ fill="currentColor"
5735
+ aria-hidden="true"
5736
+ role="img"
5737
+ width="1em"
5738
+ height="1em"
5739
+ >
5740
+ <path
5741
+ 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"
5742
+ />
5743
+ </svg>
5139
5744
  </span>
5140
5745
 
5141
5746
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
5142
5747
  </li>
5143
5748
  <li class="pf-v6-c-breadcrumb__item">
5144
5749
  <span class="pf-v6-c-breadcrumb__item-divider">
5145
- <i class="fas fa-angle-right" aria-hidden="true"></i>
5750
+ <svg
5751
+ class="pf-v6-svg"
5752
+ viewBox="0 0 20 20"
5753
+ fill="currentColor"
5754
+ aria-hidden="true"
5755
+ role="img"
5756
+ width="1em"
5757
+ height="1em"
5758
+ >
5759
+ <path
5760
+ 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"
5761
+ />
5762
+ </svg>
5146
5763
  </span>
5147
5764
 
5148
5765
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
5149
5766
  </li>
5150
5767
  <li class="pf-v6-c-breadcrumb__item">
5151
5768
  <span class="pf-v6-c-breadcrumb__item-divider">
5152
- <i class="fas fa-angle-right" aria-hidden="true"></i>
5769
+ <svg
5770
+ class="pf-v6-svg"
5771
+ viewBox="0 0 20 20"
5772
+ fill="currentColor"
5773
+ aria-hidden="true"
5774
+ role="img"
5775
+ width="1em"
5776
+ height="1em"
5777
+ >
5778
+ <path
5779
+ 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"
5780
+ />
5781
+ </svg>
5153
5782
  </span>
5154
5783
 
5155
5784
  <a
@@ -5179,10 +5808,23 @@ wrapperTag: div
5179
5808
  <span class="pf-v6-c-wizard__toggle-list-item">
5180
5809
  <span class="pf-v6-c-wizard__toggle-num">2</span>
5181
5810
  Configuration
5182
- <i
5183
- class="fas fa-angle-right pf-v6-c-wizard__toggle-separator"
5184
- aria-hidden="true"
5185
- ></i>
5811
+ <span
5812
+ class="pf-v6-c-wizard__toggle-separator"
5813
+ >
5814
+ <svg
5815
+ class="pf-v6-svg"
5816
+ viewBox="0 0 20 20"
5817
+ fill="currentColor"
5818
+ aria-hidden="true"
5819
+ role="img"
5820
+ width="1em"
5821
+ height="1em"
5822
+ >
5823
+ <path
5824
+ 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"
5825
+ />
5826
+ </svg>
5827
+ </span>
5186
5828
  </span>
5187
5829
  <span class="pf-v6-c-wizard__toggle-list-item">Substep B</span>
5188
5830
  </span>
@@ -5215,7 +5857,19 @@ wrapperTag: div
5215
5857
  >Configuration</span>
5216
5858
  <span class="pf-v6-c-wizard__nav-link-toggle">
5217
5859
  <span class="pf-v6-c-wizard__nav-link-toggle-icon">
5218
- <i class="fas fa-angle-right" aria-hidden="true"></i>
5860
+ <svg
5861
+ class="pf-v6-svg"
5862
+ viewBox="0 0 20 20"
5863
+ fill="currentColor"
5864
+ aria-hidden="true"
5865
+ role="img"
5866
+ width="1em"
5867
+ height="1em"
5868
+ >
5869
+ <path
5870
+ 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"
5871
+ />
5872
+ </svg>
5219
5873
  </span>
5220
5874
  </span>
5221
5875
  </span>
@@ -5437,7 +6091,19 @@ wrapperTag: div
5437
6091
  aria-label="Close drawer panel"
5438
6092
  >
5439
6093
  <span class="pf-v6-c-button__icon">
5440
- <i class="fas fa-times" aria-hidden="true"></i>
6094
+ <svg
6095
+ class="pf-v6-svg"
6096
+ viewBox="0 0 20 20"
6097
+ fill="currentColor"
6098
+ aria-hidden="true"
6099
+ role="img"
6100
+ width="1em"
6101
+ height="1em"
6102
+ >
6103
+ <path
6104
+ 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"
6105
+ />
6106
+ </svg>
5441
6107
  </span>
5442
6108
  </button>
5443
6109
  </div>