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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (392) hide show
  1. package/README.md +1 -1
  2. package/assets/fontawesome/_variables.scss +2 -1
  3. package/assets/images/RHAiExperienceIcon.svg +27 -0
  4. package/assets/images/RHAutomationsLogo.svg +96 -0
  5. package/assets/images/RHServerStackIcon.svg +16 -0
  6. package/assets/images/compass--hero-bg.png +0 -0
  7. package/assets/images/compass--rh-wallpaper-dark.png +0 -0
  8. package/assets/images/compass--rh-wallpaper-light.png +0 -0
  9. package/assets/images/compass--wallpaper-dark.jpg +0 -0
  10. package/assets/images/compass--wallpaper-dark.png +0 -0
  11. package/assets/images/compass--wallpaper-light.jpg +0 -0
  12. package/assets/images/compass--wallpaper-light.png +0 -0
  13. package/assets/images/glass-brand-dark.jpg +0 -0
  14. package/assets/images/glass-brand-dark.png +0 -0
  15. package/assets/images/glass-brand-light.jpg +0 -0
  16. package/assets/images/glass-brand-light.png +0 -0
  17. package/base/normalize.scss +7 -0
  18. package/base/patternfly-common.css +50 -0
  19. package/base/patternfly-common.scss +59 -0
  20. package/base/patternfly-svg-icons.css +11 -0
  21. package/base/patternfly-svg-icons.scss +14 -0
  22. package/base/patternfly-variables.css +926 -513
  23. package/base/patternfly-variables.scss +46 -4
  24. package/base/tokens/tokens-dark.scss +56 -8
  25. package/base/tokens/tokens-default.scss +69 -14
  26. package/base/tokens/tokens-glass-dark.scss +26 -0
  27. package/base/tokens/tokens-glass.scss +22 -0
  28. package/base/tokens/tokens-local.scss +17 -0
  29. package/base/tokens/tokens-palette.scss +3 -1
  30. package/base/tokens/tokens-redhat-dark.scss +21 -0
  31. package/base/tokens/tokens-redhat-glass-dark.scss +40 -0
  32. package/base/tokens/tokens-redhat-glass.scss +30 -0
  33. package/base/tokens/tokens-redhat-highcontrast-dark.scss +50 -0
  34. package/base/tokens/tokens-redhat-highcontrast.scss +128 -0
  35. package/base/tokens/tokens-redhat.scss +15 -0
  36. package/components/AboutModalBox/about-modal-box.css +36 -26
  37. package/components/Accordion/accordion.css +27 -14
  38. package/components/Accordion/accordion.scss +12 -2
  39. package/components/ActionList/action-list.css +2 -0
  40. package/components/ActionList/action-list.scss +2 -0
  41. package/components/Alert/alert.css +7 -5
  42. package/components/Alert/alert.scss +2 -1
  43. package/components/Avatar/avatar.css +12 -4
  44. package/components/BackgroundImage/background-image.css +6 -3
  45. package/components/Banner/banner.css +8 -6
  46. package/components/Brand/brand.css +3 -1
  47. package/components/Breadcrumb/breadcrumb.css +4 -3
  48. package/components/Button/button.css +121 -30
  49. package/components/Button/button.scss +131 -26
  50. package/components/CalendarMonth/calendar-month.css +4 -3
  51. package/components/Card/card.css +51 -13
  52. package/components/Card/card.scss +61 -8
  53. package/components/ClipboardCopy/clipboard-copy.css +7 -6
  54. package/components/ClipboardCopy/clipboard-copy.scss +3 -3
  55. package/components/CodeEditor/code-editor.css +1 -1
  56. package/components/CodeEditor/code-editor.scss +1 -1
  57. package/components/Compass/compass.css +320 -0
  58. package/components/Compass/compass.scss +350 -0
  59. package/components/DataList/data-list.css +34 -23
  60. package/components/DataList/data-list.scss +8 -2
  61. package/components/DescriptionList/description-list-order.scss +5 -1
  62. package/components/DescriptionList/description-list.css +7 -5
  63. package/components/DescriptionList/description-list.scss +5 -1
  64. package/components/Divider/divider.css +7 -5
  65. package/components/Drawer/drawer.css +222 -73
  66. package/components/Drawer/drawer.scss +191 -26
  67. package/components/DualListSelector/dual-list-selector.css +18 -12
  68. package/components/DualListSelector/dual-list-selector.scss +1 -1
  69. package/components/ExpandableSection/expandable-section.css +21 -16
  70. package/components/ExpandableSection/expandable-section.scss +6 -3
  71. package/components/Form/form.css +2 -2
  72. package/components/Form/form.scss +2 -2
  73. package/components/FormControl/form-control.css +3 -3
  74. package/components/FormControl/form-control.scss +3 -3
  75. package/components/Hero/hero.css +74 -0
  76. package/components/Hero/hero.scss +86 -0
  77. package/components/JumpLinks/jump-links.css +16 -5
  78. package/components/JumpLinks/jump-links.scss +17 -3
  79. package/components/Label/label-group.css +2 -2
  80. package/components/Label/label-group.scss +2 -2
  81. package/components/Label/label.css +4 -3
  82. package/components/Login/login.css +58 -40
  83. package/components/Login/login.scss +7 -3
  84. package/components/Masthead/masthead.css +112 -16
  85. package/components/Masthead/masthead.scss +112 -1
  86. package/components/Menu/menu.css +23 -14
  87. package/components/MenuToggle/menu-toggle.css +26 -3
  88. package/components/MenuToggle/menu-toggle.scss +30 -3
  89. package/components/ModalBox/modal-box.css +9 -7
  90. package/components/ModalBox/modal-box.scss +2 -2
  91. package/components/Nav/nav.css +82 -11
  92. package/components/Nav/nav.scss +85 -5
  93. package/components/NotificationDrawer/notification-drawer.css +19 -9
  94. package/components/NotificationDrawer/notification-drawer.scss +14 -5
  95. package/components/Page/page.css +214 -29
  96. package/components/Page/page.scss +228 -13
  97. package/components/Pagination/pagination.scss +5 -1
  98. package/components/Panel/panel.css +14 -0
  99. package/components/Panel/panel.scss +18 -0
  100. package/components/Progress/progress.css +3 -1
  101. package/components/Progress/progress.scss +3 -1
  102. package/components/ProgressStepper/progress-stepper.scss +5 -1
  103. package/components/Sidebar/sidebar.css +1 -1
  104. package/components/Sidebar/sidebar.scss +7 -3
  105. package/components/Skeleton/skeleton.css +16 -15
  106. package/components/Slider/slider.css +32 -18
  107. package/components/Switch/switch.css +4 -2
  108. package/components/Switch/switch.scss +1 -1
  109. package/components/Table/table-grid.css +28 -36
  110. package/components/Table/table-grid.scss +4 -4
  111. package/components/Table/table-tree-view.css +4 -2
  112. package/components/Table/table.css +45 -36
  113. package/components/Table/table.scss +15 -11
  114. package/components/Tabs/tabs.css +51 -33
  115. package/components/Tabs/tabs.scss +54 -26
  116. package/components/TextInputGroup/text-input-group.css +2 -2
  117. package/components/TextInputGroup/text-input-group.scss +2 -2
  118. package/components/ToggleGroup/toggle-group.css +34 -17
  119. package/components/ToggleGroup/toggle-group.scss +36 -20
  120. package/components/Toolbar/toolbar.css +47 -15
  121. package/components/Toolbar/toolbar.scss +34 -6
  122. package/components/TreeView/tree-view.css +45 -14
  123. package/components/TreeView/tree-view.scss +32 -1
  124. package/components/Wizard/wizard.css +41 -19
  125. package/components/Wizard/wizard.scss +26 -6
  126. package/components/_index.css +2047 -721
  127. package/components/_index.scss +3 -1
  128. package/docs/components/AboutModalBox/examples/AboutModalBox.md +13 -1
  129. package/docs/components/Accordion/examples/Accordion.md +392 -30
  130. package/docs/components/ActionList/examples/ActionList.md +143 -11
  131. package/docs/components/Alert/examples/Alert.md +678 -54
  132. package/docs/components/Avatar/examples/Avatar.md +4 -4
  133. package/docs/components/BackToTop/examples/BackToTop.md +13 -1
  134. package/docs/components/Banner/examples/Banner.md +65 -5
  135. package/docs/components/Brand/examples/Brand.md +2 -2
  136. package/docs/components/Breadcrumb/examples/Breadcrumb.md +299 -24
  137. package/docs/components/Button/examples/Button.md +2362 -163
  138. package/docs/components/CalendarMonth/examples/CalendarMonth.md +104 -8
  139. package/docs/components/Card/examples/Card.md +207 -4
  140. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +286 -22
  141. package/docs/components/CodeBlock/examples/CodeBlock.md +104 -8
  142. package/docs/components/CodeEditor/examples/CodeEditor.md +195 -15
  143. package/docs/components/Compass/examples/Compass.css +17 -0
  144. package/docs/components/Compass/examples/Compass.md +119 -0
  145. package/docs/components/DataList/examples/DataList.md +406 -205
  146. package/docs/components/DatePicker/examples/DatePicker.md +78 -6
  147. package/docs/components/DescriptionList/examples/DescriptionList.md +327 -27
  148. package/docs/components/Divider/examples/Divider.md +2 -2
  149. package/docs/components/DragDrop/examples/DragDrop.css +1 -1
  150. package/docs/components/Drawer/examples/Drawer.md +355 -35
  151. package/docs/components/DualListSelector/examples/DualListSelector.md +1013 -143
  152. package/docs/components/ExpandableSection/examples/ExpandableSection.md +91 -7
  153. package/docs/components/Form/examples/Form.md +78 -6
  154. package/docs/components/Hero/examples/Hero.md +25 -0
  155. package/docs/components/Icon/examples/Icon.md +92 -8
  156. package/docs/components/InlineEdit/examples/InlineEdit.md +312 -24
  157. package/docs/components/InputGroup/examples/InputGroup.md +27 -3
  158. package/docs/components/JumpLinks/examples/JumpLinks.md +54 -6
  159. package/docs/components/Label/examples/Label.md +2834 -218
  160. package/docs/components/Login/examples/Login.md +26 -2
  161. package/docs/components/Masthead/examples/masthead.md +80 -1
  162. package/docs/components/Menu/examples/Menu.md +1458 -116
  163. package/docs/components/MenuToggle/examples/MenuToggle.md +14 -5
  164. package/docs/components/ModalBox/examples/ModalBox.md +289 -25
  165. package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +156 -12
  166. package/docs/components/Nav/examples/Navigation.md +798 -58
  167. package/docs/components/NotificationDrawer/examples/NotificationDrawer.md +598 -46
  168. package/docs/components/OverflowMenu/examples/overflow-menu.md +78 -6
  169. package/docs/components/Page/examples/Page.md +72 -11
  170. package/docs/components/Pagination/examples/Pagination.md +627 -64
  171. package/docs/components/Panel/examples/Panel.md +12 -0
  172. package/docs/components/Popover/examples/Popover.md +286 -22
  173. package/docs/components/Progress/examples/Progress.md +91 -7
  174. package/docs/components/ProgressStepper/examples/ProgressStepper.md +275 -23
  175. package/docs/components/Sidebar/examples/Sidebar.md +1 -1
  176. package/docs/components/Slider/examples/Slider.md +52 -4
  177. package/docs/components/Table/examples/Table.md +876 -70
  178. package/docs/components/Tabs/examples/Tabs.md +5908 -457
  179. package/docs/components/TextInputGroup/examples/TextInputGroup.md +600 -48
  180. package/docs/components/ToggleGroup/examples/toggle-group.md +195 -15
  181. package/docs/components/Toolbar/examples/Toolbar.md +490 -44
  182. package/docs/components/TreeView/examples/TreeView.md +1390 -130
  183. package/docs/components/Wizard/examples/Wizard.md +815 -72
  184. package/docs/demos/AboutModal/examples/AboutModal.md +98 -47
  185. package/docs/demos/Alert/examples/Alert.md +359 -146
  186. package/docs/demos/BackToTop/examples/BackToTop.md +98 -47
  187. package/docs/demos/Banner/examples/Banner.md +170 -92
  188. package/docs/demos/Button/examples/Button.md +13 -1
  189. package/docs/demos/Card/examples/Card.md +963 -128
  190. package/docs/demos/CardView/examples/CardView.md +435 -252
  191. package/docs/demos/Compass/examples/Compass.md +5930 -0
  192. package/docs/demos/Dashboard/examples/Dashboard.md +648 -164
  193. package/docs/demos/DataList/examples/DataList.md +730 -225
  194. package/docs/demos/DescriptionList/examples/DescriptionList.md +279 -141
  195. package/docs/demos/Drawer/examples/Drawer.md +421 -235
  196. package/docs/demos/Form/examples/BasicForms.md +273 -21
  197. package/docs/demos/JumpLinks/examples/JumpLinks.md +518 -287
  198. package/docs/demos/Masthead/examples/Masthead.md +787 -451
  199. package/docs/demos/Modal/examples/Modal.md +588 -285
  200. package/docs/demos/Nav/examples/Nav.md +2913 -493
  201. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +1273 -310
  202. package/docs/demos/Page/examples/Page.md +1236 -689
  203. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +13 -1
  204. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +52 -4
  205. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +978 -385
  206. package/docs/demos/Skeleton/examples/Skeleton.md +85 -46
  207. package/docs/demos/Table/examples/Table.md +4531 -838
  208. package/docs/demos/Tabs/examples/Tabs.md +653 -293
  209. package/docs/demos/Toolbar/examples/Toolbar.md +584 -136
  210. package/docs/demos/Wizard/examples/Wizard.md +1165 -472
  211. package/docs/layouts/Bullseye/examples/Bullseye.css +2 -2
  212. package/docs/layouts/Bullseye/examples/Bullseye.md +2 -1
  213. package/docs/layouts/Flex/examples/Flex.css +3 -3
  214. package/docs/layouts/Flex/examples/Flex.md +3 -2
  215. package/docs/layouts/Gallery/examples/Gallery.css +2 -2
  216. package/docs/layouts/Gallery/examples/Gallery.md +4 -3
  217. package/docs/layouts/Grid/examples/Grid.css +1 -1
  218. package/docs/layouts/Grid/examples/Grid.md +6 -5
  219. package/docs/layouts/Level/examples/Level.css +3 -3
  220. package/docs/layouts/Level/examples/Level.md +2 -1
  221. package/docs/layouts/Split/examples/Split.css +1 -1
  222. package/docs/layouts/Split/examples/Split.md +2 -1
  223. package/docs/layouts/Stack/examples/Stack.css +3 -3
  224. package/docs/layouts/Stack/examples/Stack.md +2 -1
  225. package/docs/utilities/Accessibility/examples/Accessibility.md +3 -2
  226. package/docs/utilities/Alignment/examples/Alignment.css +4 -4
  227. package/docs/utilities/Alignment/examples/Alignment.md +3 -2
  228. package/docs/utilities/BackgroundColor/examples/BackgroundColor.md +5 -4
  229. package/docs/utilities/BoxShadow/examples/box-shadow.css +2 -2
  230. package/docs/utilities/BoxShadow/examples/box-shadow.md +2 -1
  231. package/docs/utilities/Display/examples/Display.css +1 -1
  232. package/docs/utilities/Display/examples/Display.md +3 -2
  233. package/docs/utilities/Flex/examples/Flex.css +7 -7
  234. package/docs/utilities/Flex/examples/Flex.md +3 -2
  235. package/docs/utilities/Float/examples/Float.css +2 -2
  236. package/docs/utilities/Float/examples/Float.md +3 -2
  237. package/docs/utilities/Sizing/examples/Sizing.md +8 -7
  238. package/docs/utilities/Spacing/examples/Spacing.css +2 -2
  239. package/docs/utilities/Spacing/examples/Spacing.md +3 -2
  240. package/docs/utilities/Text/examples/Text.md +5 -4
  241. package/icons/PfIcons/add-circle-o.svg +4 -0
  242. package/icons/PfIcons/ansible-tower.svg +4 -0
  243. package/icons/PfIcons/applications.svg +4 -0
  244. package/icons/PfIcons/arrow.svg +4 -0
  245. package/icons/PfIcons/asleep.svg +4 -0
  246. package/icons/PfIcons/attention-bell.svg +4 -0
  247. package/icons/PfIcons/automation.svg +4 -0
  248. package/icons/PfIcons/bell.svg +4 -0
  249. package/icons/PfIcons/blueprint.svg +4 -0
  250. package/icons/PfIcons/build.svg +4 -0
  251. package/icons/PfIcons/builder-image.svg +4 -0
  252. package/icons/PfIcons/bundle.svg +4 -0
  253. package/icons/PfIcons/catalog.svg +4 -0
  254. package/icons/PfIcons/chat.svg +4 -0
  255. package/icons/PfIcons/close.svg +4 -0
  256. package/icons/PfIcons/cloud-security.svg +4 -0
  257. package/icons/PfIcons/cloud-tenant.svg +4 -0
  258. package/icons/PfIcons/cluster.svg +4 -0
  259. package/icons/PfIcons/connected.svg +4 -0
  260. package/icons/PfIcons/container-node.svg +4 -0
  261. package/icons/PfIcons/cpu.svg +4 -0
  262. package/icons/PfIcons/critical-risk.svg +4 -0
  263. package/icons/PfIcons/data-processor.svg +4 -0
  264. package/icons/PfIcons/data-sink.svg +4 -0
  265. package/icons/PfIcons/data-source.svg +4 -0
  266. package/icons/PfIcons/degraded.svg +4 -0
  267. package/icons/PfIcons/disconnected.svg +4 -0
  268. package/icons/PfIcons/domain.svg +4 -0
  269. package/icons/PfIcons/edit.svg +4 -0
  270. package/icons/PfIcons/enhancement.svg +4 -0
  271. package/icons/PfIcons/enterprise.svg +4 -0
  272. package/icons/PfIcons/equalizer.svg +4 -0
  273. package/icons/PfIcons/error-circle-o.svg +4 -0
  274. package/icons/PfIcons/export.svg +4 -0
  275. package/icons/PfIcons/filter.svg +4 -0
  276. package/icons/PfIcons/flavor.svg +4 -0
  277. package/icons/PfIcons/folder-close.svg +4 -0
  278. package/icons/PfIcons/folder-open.svg +4 -0
  279. package/icons/PfIcons/globe-route.svg +4 -0
  280. package/icons/PfIcons/help.svg +4 -0
  281. package/icons/PfIcons/history.svg +4 -0
  282. package/icons/PfIcons/home.svg +4 -0
  283. package/icons/PfIcons/import.svg +4 -0
  284. package/icons/PfIcons/in-progress.svg +4 -0
  285. package/icons/PfIcons/info.svg +4 -0
  286. package/icons/PfIcons/infrastructure.svg +4 -0
  287. package/icons/PfIcons/integration.svg +4 -0
  288. package/icons/PfIcons/key.svg +4 -0
  289. package/icons/PfIcons/locked.svg +4 -0
  290. package/icons/PfIcons/maintenance.svg +4 -0
  291. package/icons/PfIcons/memory.svg +4 -0
  292. package/icons/PfIcons/messages.svg +4 -0
  293. package/icons/PfIcons/middleware.svg +4 -0
  294. package/icons/PfIcons/migration.svg +4 -0
  295. package/icons/PfIcons/module.svg +4 -0
  296. package/icons/PfIcons/monitoring.svg +4 -0
  297. package/icons/PfIcons/multicluster.svg +4 -0
  298. package/icons/PfIcons/namespaces.svg +4 -0
  299. package/icons/PfIcons/network.svg +4 -0
  300. package/icons/PfIcons/new-process.svg +4 -0
  301. package/icons/PfIcons/not-started.svg +4 -0
  302. package/icons/PfIcons/off.svg +4 -0
  303. package/icons/PfIcons/ok.svg +4 -0
  304. package/icons/PfIcons/on-running.svg +4 -0
  305. package/icons/PfIcons/on.svg +4 -0
  306. package/icons/PfIcons/open-drawer-right.svg +4 -0
  307. package/icons/PfIcons/openshift.svg +4 -0
  308. package/icons/PfIcons/openstack.svg +4 -0
  309. package/icons/PfIcons/optimize.svg +4 -0
  310. package/icons/PfIcons/orders.svg +4 -0
  311. package/icons/PfIcons/os-image.svg +4 -0
  312. package/icons/PfIcons/package.svg +4 -0
  313. package/icons/PfIcons/panel-close.svg +4 -0
  314. package/icons/PfIcons/panel-open.svg +4 -0
  315. package/icons/PfIcons/paused.svg +4 -0
  316. package/icons/PfIcons/pending.svg +4 -0
  317. package/icons/PfIcons/pficon-dragdrop.svg +4 -0
  318. package/icons/PfIcons/pficon-history.svg +4 -0
  319. package/icons/PfIcons/pficon-network-range.svg +4 -0
  320. package/icons/PfIcons/pficon-satellite.svg +4 -0
  321. package/icons/PfIcons/pficon-sort-common-asc.svg +4 -0
  322. package/icons/PfIcons/pficon-sort-common-desc.svg +4 -0
  323. package/icons/PfIcons/pficon-template.svg +4 -0
  324. package/icons/PfIcons/pficon-vcenter.svg +4 -0
  325. package/icons/PfIcons/plugged.svg +4 -0
  326. package/icons/PfIcons/port.svg +4 -0
  327. package/icons/PfIcons/print.svg +4 -0
  328. package/icons/PfIcons/private.svg +4 -0
  329. package/icons/PfIcons/process-automation.svg +4 -0
  330. package/icons/PfIcons/project.svg +4 -0
  331. package/icons/PfIcons/rebalance.svg +4 -0
  332. package/icons/PfIcons/rebooting.svg +4 -0
  333. package/icons/PfIcons/regions.svg +4 -0
  334. package/icons/PfIcons/registry.svg +4 -0
  335. package/icons/PfIcons/remove2.svg +4 -0
  336. package/icons/PfIcons/replicator.svg +4 -0
  337. package/icons/PfIcons/repository.svg +4 -0
  338. package/icons/PfIcons/resource-pool.svg +4 -0
  339. package/icons/PfIcons/resources-almost-empty.svg +4 -0
  340. package/icons/PfIcons/resources-almost-full.svg +4 -0
  341. package/icons/PfIcons/resources-empty.svg +4 -0
  342. package/icons/PfIcons/resources-full.svg +4 -0
  343. package/icons/PfIcons/running.svg +4 -0
  344. package/icons/PfIcons/save.svg +4 -0
  345. package/icons/PfIcons/screen.svg +4 -0
  346. package/icons/PfIcons/security.svg +4 -0
  347. package/icons/PfIcons/server-group.svg +4 -0
  348. package/icons/PfIcons/server.svg +4 -0
  349. package/icons/PfIcons/service-catalog.svg +4 -0
  350. package/icons/PfIcons/service.svg +4 -0
  351. package/icons/PfIcons/services.svg +4 -0
  352. package/icons/PfIcons/severity-critical.svg +4 -0
  353. package/icons/PfIcons/severity-important.svg +4 -0
  354. package/icons/PfIcons/severity-minor.svg +4 -0
  355. package/icons/PfIcons/severity-moderate.svg +4 -0
  356. package/icons/PfIcons/severity-none.svg +4 -0
  357. package/icons/PfIcons/severity-undefined.svg +4 -0
  358. package/icons/PfIcons/spinner.svg +4 -0
  359. package/icons/PfIcons/spinner2.svg +4 -0
  360. package/icons/PfIcons/storage-domain.svg +4 -0
  361. package/icons/PfIcons/task.svg +4 -0
  362. package/icons/PfIcons/tenant.svg +4 -0
  363. package/icons/PfIcons/thumb-tack.svg +4 -0
  364. package/icons/PfIcons/topology.svg +4 -0
  365. package/icons/PfIcons/treeview.svg +4 -0
  366. package/icons/PfIcons/trend-down.svg +4 -0
  367. package/icons/PfIcons/trend-up.svg +4 -0
  368. package/icons/PfIcons/unknown.svg +4 -0
  369. package/icons/PfIcons/unlocked.svg +4 -0
  370. package/icons/PfIcons/unplugged.svg +4 -0
  371. package/icons/PfIcons/user.svg +4 -0
  372. package/icons/PfIcons/users.svg +4 -0
  373. package/icons/PfIcons/virtual-machine.svg +4 -0
  374. package/icons/PfIcons/volume.svg +4 -0
  375. package/icons/PfIcons/warning-triangle.svg +4 -0
  376. package/icons/PfIcons/zone.svg +4 -0
  377. package/layouts/Flex/flex.scss +83 -19
  378. package/layouts/Gallery/gallery.css +6 -2
  379. package/layouts/_index.css +6 -2
  380. package/package.json +34 -16
  381. package/patternfly-base-no-globals.css +965 -491
  382. package/patternfly-base.css +972 -491
  383. package/patternfly-charts.css +3 -3
  384. package/patternfly-no-globals.css +2908 -1087
  385. package/patternfly.css +2915 -1087
  386. package/patternfly.min.css +1 -1
  387. package/patternfly.min.css.map +1 -1
  388. package/patternfly.scss +27 -0
  389. package/sass-utilities/functions.scss +32 -25
  390. package/sass-utilities/mixins.scss +36 -20
  391. package/sass-utilities/namespaces-components.scss +6 -0
  392. package/sass-utilities/scss-variables.scss +3 -0
package/docs/components/Wizard/examples/Wizard.md CHANGED
@@ -19,7 +19,19 @@ wrapperTag: div
19
19
  aria-label="Close"
20
20
  >
21
21
  <span class="pf-v6-c-button__icon">
22
- <i class="fas fa-times" aria-hidden="true"></i>
22
+ <svg
23
+ class="pf-v6-svg"
24
+ viewBox="0 0 20 20"
25
+ fill="currentColor"
26
+ aria-hidden="true"
27
+ role="img"
28
+ width="1em"
29
+ height="1em"
30
+ >
31
+ <path
32
+ 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"
33
+ />
34
+ </svg>
23
35
  </span>
24
36
  </button>
25
37
  </div>
@@ -37,10 +49,21 @@ wrapperTag: div
37
49
  <span class="pf-v6-c-wizard__toggle-list-item">
38
50
  <span class="pf-v6-c-wizard__toggle-num">2</span>
39
51
  Configuration
40
- <i
41
- class="fas fa-angle-right pf-v6-c-wizard__toggle-separator"
42
- aria-hidden="true"
43
- ></i>
52
+ <span class="pf-v6-c-wizard__toggle-separator">
53
+ <svg
54
+ class="pf-v6-svg"
55
+ viewBox="0 0 20 20"
56
+ fill="currentColor"
57
+ aria-hidden="true"
58
+ role="img"
59
+ width="1em"
60
+ height="1em"
61
+ >
62
+ <path
63
+ 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"
64
+ />
65
+ </svg>
66
+ </span>
44
67
  </span>
45
68
  <span class="pf-v6-c-wizard__toggle-list-item">Substep B</span>
46
69
  </span>
@@ -69,7 +92,19 @@ wrapperTag: div
69
92
  <span class="pf-v6-c-wizard__nav-link-text">Configuration</span>
70
93
  <span class="pf-v6-c-wizard__nav-link-toggle">
71
94
  <span class="pf-v6-c-wizard__nav-link-toggle-icon">
72
- <i class="fas fa-angle-right" aria-hidden="true"></i>
95
+ <svg
96
+ class="pf-v6-svg"
97
+ viewBox="0 0 20 20"
98
+ fill="currentColor"
99
+ aria-hidden="true"
100
+ role="img"
101
+ width="1em"
102
+ height="1em"
103
+ >
104
+ <path
105
+ 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"
106
+ />
107
+ </svg>
73
108
  </span>
74
109
  </span>
75
110
  </span>
@@ -305,7 +340,19 @@ wrapperTag: div
305
340
  aria-label="Close"
306
341
  >
307
342
  <span class="pf-v6-c-button__icon">
308
- <i class="fas fa-times" aria-hidden="true"></i>
343
+ <svg
344
+ class="pf-v6-svg"
345
+ viewBox="0 0 20 20"
346
+ fill="currentColor"
347
+ aria-hidden="true"
348
+ role="img"
349
+ width="1em"
350
+ height="1em"
351
+ >
352
+ <path
353
+ 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"
354
+ />
355
+ </svg>
309
356
  </span>
310
357
  </button>
311
358
  </div>
@@ -323,10 +370,21 @@ wrapperTag: div
323
370
  <span class="pf-v6-c-wizard__toggle-list-item">
324
371
  <span class="pf-v6-c-wizard__toggle-num">2</span>
325
372
  Configuration
326
- <i
327
- class="fas fa-angle-right pf-v6-c-wizard__toggle-separator"
328
- aria-hidden="true"
329
- ></i>
373
+ <span class="pf-v6-c-wizard__toggle-separator">
374
+ <svg
375
+ class="pf-v6-svg"
376
+ viewBox="0 0 20 20"
377
+ fill="currentColor"
378
+ aria-hidden="true"
379
+ role="img"
380
+ width="1em"
381
+ height="1em"
382
+ >
383
+ <path
384
+ 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"
385
+ />
386
+ </svg>
387
+ </span>
330
388
  </span>
331
389
  <span class="pf-v6-c-wizard__toggle-list-item">Substep B</span>
332
390
  </span>
@@ -355,7 +413,19 @@ wrapperTag: div
355
413
  <span class="pf-v6-c-wizard__nav-link-text">Configuration</span>
356
414
  <span class="pf-v6-c-wizard__nav-link-toggle">
357
415
  <span class="pf-v6-c-wizard__nav-link-toggle-icon">
358
- <i class="fas fa-angle-right" aria-hidden="true"></i>
416
+ <svg
417
+ class="pf-v6-svg"
418
+ viewBox="0 0 20 20"
419
+ fill="currentColor"
420
+ aria-hidden="true"
421
+ role="img"
422
+ width="1em"
423
+ height="1em"
424
+ >
425
+ <path
426
+ d="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"
427
+ />
428
+ </svg>
359
429
  </span>
360
430
  </span>
361
431
  </span>
@@ -591,7 +661,19 @@ wrapperTag: div
591
661
  aria-label="Close"
592
662
  >
593
663
  <span class="pf-v6-c-button__icon">
594
- <i class="fas fa-times" aria-hidden="true"></i>
664
+ <svg
665
+ class="pf-v6-svg"
666
+ viewBox="0 0 20 20"
667
+ fill="currentColor"
668
+ aria-hidden="true"
669
+ role="img"
670
+ width="1em"
671
+ height="1em"
672
+ >
673
+ <path
674
+ 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"
675
+ />
676
+ </svg>
595
677
  </span>
596
678
  </button>
597
679
  </div>
@@ -609,10 +691,21 @@ wrapperTag: div
609
691
  <span class="pf-v6-c-wizard__toggle-list-item">
610
692
  <span class="pf-v6-c-wizard__toggle-num">2</span>
611
693
  Configuration
612
- <i
613
- class="fas fa-angle-right pf-v6-c-wizard__toggle-separator"
614
- aria-hidden="true"
615
- ></i>
694
+ <span class="pf-v6-c-wizard__toggle-separator">
695
+ <svg
696
+ class="pf-v6-svg"
697
+ viewBox="0 0 20 20"
698
+ fill="currentColor"
699
+ aria-hidden="true"
700
+ role="img"
701
+ width="1em"
702
+ height="1em"
703
+ >
704
+ <path
705
+ 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"
706
+ />
707
+ </svg>
708
+ </span>
616
709
  </span>
617
710
  <span class="pf-v6-c-wizard__toggle-list-item">Substep B</span>
618
711
  </span>
@@ -641,7 +734,19 @@ wrapperTag: div
641
734
  <span class="pf-v6-c-wizard__nav-link-text">Configuration</span>
642
735
  <span class="pf-v6-c-wizard__nav-link-toggle">
643
736
  <span class="pf-v6-c-wizard__nav-link-toggle-icon">
644
- <i class="fas fa-angle-right" aria-hidden="true"></i>
737
+ <svg
738
+ class="pf-v6-svg"
739
+ viewBox="0 0 20 20"
740
+ fill="currentColor"
741
+ aria-hidden="true"
742
+ role="img"
743
+ width="1em"
744
+ height="1em"
745
+ >
746
+ <path
747
+ 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"
748
+ />
749
+ </svg>
645
750
  </span>
646
751
  </span>
647
752
  </span>
@@ -856,7 +961,19 @@ wrapperTag: div
856
961
  aria-label="Close drawer panel"
857
962
  >
858
963
  <span class="pf-v6-c-button__icon">
859
- <i class="fas fa-times" aria-hidden="true"></i>
964
+ <svg
965
+ class="pf-v6-svg"
966
+ viewBox="0 0 20 20"
967
+ fill="currentColor"
968
+ aria-hidden="true"
969
+ role="img"
970
+ width="1em"
971
+ height="1em"
972
+ >
973
+ <path
974
+ d="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"
975
+ />
976
+ </svg>
860
977
  </span>
861
978
  </button>
862
979
  </div>
@@ -908,7 +1025,19 @@ wrapperTag: div
908
1025
  aria-label="Close"
909
1026
  >
910
1027
  <span class="pf-v6-c-button__icon">
911
- <i class="fas fa-times" aria-hidden="true"></i>
1028
+ <svg
1029
+ class="pf-v6-svg"
1030
+ viewBox="0 0 20 20"
1031
+ fill="currentColor"
1032
+ aria-hidden="true"
1033
+ role="img"
1034
+ width="1em"
1035
+ height="1em"
1036
+ >
1037
+ <path
1038
+ 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"
1039
+ />
1040
+ </svg>
912
1041
  </span>
913
1042
  </button>
914
1043
  </div>
@@ -926,10 +1055,21 @@ wrapperTag: div
926
1055
  <span class="pf-v6-c-wizard__toggle-list-item">
927
1056
  <span class="pf-v6-c-wizard__toggle-num">2</span>
928
1057
  Configuration
929
- <i
930
- class="fas fa-angle-right pf-v6-c-wizard__toggle-separator"
931
- aria-hidden="true"
932
- ></i>
1058
+ <span class="pf-v6-c-wizard__toggle-separator">
1059
+ <svg
1060
+ class="pf-v6-svg"
1061
+ viewBox="0 0 20 20"
1062
+ fill="currentColor"
1063
+ aria-hidden="true"
1064
+ role="img"
1065
+ width="1em"
1066
+ height="1em"
1067
+ >
1068
+ <path
1069
+ 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"
1070
+ />
1071
+ </svg>
1072
+ </span>
933
1073
  </span>
934
1074
  <span class="pf-v6-c-wizard__toggle-list-item">Substep B</span>
935
1075
  </span>
@@ -962,7 +1102,19 @@ wrapperTag: div
962
1102
  <span class="pf-v6-c-wizard__nav-link-text">Configuration</span>
963
1103
  <span class="pf-v6-c-wizard__nav-link-toggle">
964
1104
  <span class="pf-v6-c-wizard__nav-link-toggle-icon">
965
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1105
+ <svg
1106
+ class="pf-v6-svg"
1107
+ viewBox="0 0 20 20"
1108
+ fill="currentColor"
1109
+ aria-hidden="true"
1110
+ role="img"
1111
+ width="1em"
1112
+ height="1em"
1113
+ >
1114
+ <path
1115
+ 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"
1116
+ />
1117
+ </svg>
966
1118
  </span>
967
1119
  </span>
968
1120
  </span>
@@ -1194,7 +1346,19 @@ wrapperTag: div
1194
1346
  aria-label="Close"
1195
1347
  >
1196
1348
  <span class="pf-v6-c-button__icon">
1197
- <i class="fas fa-times" aria-hidden="true"></i>
1349
+ <svg
1350
+ class="pf-v6-svg"
1351
+ viewBox="0 0 20 20"
1352
+ fill="currentColor"
1353
+ aria-hidden="true"
1354
+ role="img"
1355
+ width="1em"
1356
+ height="1em"
1357
+ >
1358
+ <path
1359
+ 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"
1360
+ />
1361
+ </svg>
1198
1362
  </span>
1199
1363
  </button>
1200
1364
  </div>
@@ -1212,10 +1376,21 @@ wrapperTag: div
1212
1376
  <span class="pf-v6-c-wizard__toggle-list-item">
1213
1377
  <span class="pf-v6-c-wizard__toggle-num">2</span>
1214
1378
  Configuration
1215
- <i
1216
- class="fas fa-angle-right pf-v6-c-wizard__toggle-separator"
1217
- aria-hidden="true"
1218
- ></i>
1379
+ <span class="pf-v6-c-wizard__toggle-separator">
1380
+ <svg
1381
+ class="pf-v6-svg"
1382
+ viewBox="0 0 20 20"
1383
+ fill="currentColor"
1384
+ aria-hidden="true"
1385
+ role="img"
1386
+ width="1em"
1387
+ height="1em"
1388
+ >
1389
+ <path
1390
+ 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"
1391
+ />
1392
+ </svg>
1393
+ </span>
1219
1394
  </span>
1220
1395
  <span class="pf-v6-c-wizard__toggle-list-item">Substep B</span>
1221
1396
  </span>
@@ -1244,7 +1419,19 @@ wrapperTag: div
1244
1419
  <span class="pf-v6-c-wizard__nav-link-text">Configuration</span>
1245
1420
  <span class="pf-v6-c-wizard__nav-link-toggle">
1246
1421
  <span class="pf-v6-c-wizard__nav-link-toggle-icon">
1247
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1422
+ <svg
1423
+ class="pf-v6-svg"
1424
+ viewBox="0 0 20 20"
1425
+ fill="currentColor"
1426
+ aria-hidden="true"
1427
+ role="img"
1428
+ width="1em"
1429
+ height="1em"
1430
+ >
1431
+ <path
1432
+ 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"
1433
+ />
1434
+ </svg>
1248
1435
  </span>
1249
1436
  </span>
1250
1437
  </span>
@@ -1480,7 +1667,19 @@ wrapperTag: div
1480
1667
  aria-label="Close"
1481
1668
  >
1482
1669
  <span class="pf-v6-c-button__icon">
1483
- <i class="fas fa-times" aria-hidden="true"></i>
1670
+ <svg
1671
+ class="pf-v6-svg"
1672
+ viewBox="0 0 20 20"
1673
+ fill="currentColor"
1674
+ aria-hidden="true"
1675
+ role="img"
1676
+ width="1em"
1677
+ height="1em"
1678
+ >
1679
+ <path
1680
+ d="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"
1681
+ />
1682
+ </svg>
1484
1683
  </span>
1485
1684
  </button>
1486
1685
  </div>
@@ -1498,10 +1697,21 @@ wrapperTag: div
1498
1697
  <span class="pf-v6-c-wizard__toggle-list-item">
1499
1698
  <span class="pf-v6-c-wizard__toggle-num">2</span>
1500
1699
  Configuration
1501
- <i
1502
- class="fas fa-angle-right pf-v6-c-wizard__toggle-separator"
1503
- aria-hidden="true"
1504
- ></i>
1700
+ <span class="pf-v6-c-wizard__toggle-separator">
1701
+ <svg
1702
+ class="pf-v6-svg"
1703
+ viewBox="0 0 20 20"
1704
+ fill="currentColor"
1705
+ aria-hidden="true"
1706
+ role="img"
1707
+ width="1em"
1708
+ height="1em"
1709
+ >
1710
+ <path
1711
+ d="M14.35 8.94 6.71 1.29l-.02-.02c-.4-.38-1.03-.37-1.41.02-.38.4-.37 1.03.02 1.41l7.29 7.29-7.29 7.29a1.003 1.003 0 0 0 1.42 1.42l7.65-7.65c.59-.59.59-1.54 0-2.12Z"
1712
+ />
1713
+ </svg>
1714
+ </span>
1505
1715
  </span>
1506
1716
  <span class="pf-v6-c-wizard__toggle-list-item">Substep B</span>
1507
1717
  </span>
@@ -1659,7 +1869,19 @@ wrapperTag: div
1659
1869
  aria-label="Close"
1660
1870
  >
1661
1871
  <span class="pf-v6-c-button__icon">
1662
- <i class="fas fa-times" aria-hidden="true"></i>
1872
+ <svg
1873
+ class="pf-v6-svg"
1874
+ viewBox="0 0 20 20"
1875
+ fill="currentColor"
1876
+ aria-hidden="true"
1877
+ role="img"
1878
+ width="1em"
1879
+ height="1em"
1880
+ >
1881
+ <path
1882
+ 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"
1883
+ />
1884
+ </svg>
1663
1885
  </span>
1664
1886
  </button>
1665
1887
  </div>
@@ -1679,10 +1901,21 @@ wrapperTag: div
1679
1901
  <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
1680
1902
  </span>
1681
1903
  Configuration
1682
- <i
1683
- class="fas fa-angle-right pf-v6-c-wizard__toggle-separator"
1684
- aria-hidden="true"
1685
- ></i>
1904
+ <span class="pf-v6-c-wizard__toggle-separator">
1905
+ <svg
1906
+ class="pf-v6-svg"
1907
+ viewBox="0 0 20 20"
1908
+ fill="currentColor"
1909
+ aria-hidden="true"
1910
+ role="img"
1911
+ width="1em"
1912
+ height="1em"
1913
+ >
1914
+ <path
1915
+ 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"
1916
+ />
1917
+ </svg>
1918
+ </span>
1686
1919
  </span>
1687
1920
  <span class="pf-v6-c-wizard__toggle-list-item">Substep B</span>
1688
1921
  </span>
@@ -1714,7 +1947,19 @@ wrapperTag: div
1714
1947
  <span class="pf-v6-c-wizard__nav-link-text">Configuration</span>
1715
1948
  <span class="pf-v6-c-wizard__nav-link-toggle">
1716
1949
  <span class="pf-v6-c-wizard__nav-link-toggle-icon">
1717
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1950
+ <svg
1951
+ class="pf-v6-svg"
1952
+ viewBox="0 0 20 20"
1953
+ fill="currentColor"
1954
+ aria-hidden="true"
1955
+ role="img"
1956
+ width="1em"
1957
+ height="1em"
1958
+ >
1959
+ <path
1960
+ 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"
1961
+ />
1962
+ </svg>
1718
1963
  </span>
1719
1964
  </span>
1720
1965
  </span>
@@ -1950,7 +2195,19 @@ wrapperTag: div
1950
2195
  aria-label="Close"
1951
2196
  >
1952
2197
  <span class="pf-v6-c-button__icon">
1953
- <i class="fas fa-times" aria-hidden="true"></i>
2198
+ <svg
2199
+ class="pf-v6-svg"
2200
+ viewBox="0 0 20 20"
2201
+ fill="currentColor"
2202
+ aria-hidden="true"
2203
+ role="img"
2204
+ width="1em"
2205
+ height="1em"
2206
+ >
2207
+ <path
2208
+ 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"
2209
+ />
2210
+ </svg>
1954
2211
  </span>
1955
2212
  </button>
1956
2213
  </div>
@@ -1970,10 +2227,21 @@ wrapperTag: div
1970
2227
  <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
1971
2228
  </span>
1972
2229
  Configuration
1973
- <i
1974
- class="fas fa-angle-right pf-v6-c-wizard__toggle-separator"
1975
- aria-hidden="true"
1976
- ></i>
2230
+ <span class="pf-v6-c-wizard__toggle-separator">
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="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"
2242
+ />
2243
+ </svg>
2244
+ </span>
1977
2245
  </span>
1978
2246
  <span class="pf-v6-c-wizard__toggle-list-item">Substep B</span>
1979
2247
  </span>
@@ -2005,7 +2273,19 @@ wrapperTag: div
2005
2273
  <span class="pf-v6-c-wizard__nav-link-text">Configuration</span>
2006
2274
  <span class="pf-v6-c-wizard__nav-link-toggle">
2007
2275
  <span class="pf-v6-c-wizard__nav-link-toggle-icon">
2008
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2276
+ <svg
2277
+ class="pf-v6-svg"
2278
+ viewBox="0 0 20 20"
2279
+ fill="currentColor"
2280
+ aria-hidden="true"
2281
+ role="img"
2282
+ width="1em"
2283
+ height="1em"
2284
+ >
2285
+ <path
2286
+ 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"
2287
+ />
2288
+ </svg>
2009
2289
  </span>
2010
2290
  </span>
2011
2291
  </span>
@@ -2241,7 +2521,19 @@ wrapperTag: div
2241
2521
  aria-label="Close"
2242
2522
  >
2243
2523
  <span class="pf-v6-c-button__icon">
2244
- <i class="fas fa-times" aria-hidden="true"></i>
2524
+ <svg
2525
+ class="pf-v6-svg"
2526
+ viewBox="0 0 20 20"
2527
+ fill="currentColor"
2528
+ aria-hidden="true"
2529
+ role="img"
2530
+ width="1em"
2531
+ height="1em"
2532
+ >
2533
+ <path
2534
+ 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"
2535
+ />
2536
+ </svg>
2245
2537
  </span>
2246
2538
  </button>
2247
2539
  </div>
@@ -2261,10 +2553,21 @@ wrapperTag: div
2261
2553
  <i class="fas fa-check-circle" aria-hidden="true"></i>
2262
2554
  </span>
2263
2555
  Configuration
2264
- <i
2265
- class="fas fa-angle-right pf-v6-c-wizard__toggle-separator"
2266
- aria-hidden="true"
2267
- ></i>
2556
+ <span class="pf-v6-c-wizard__toggle-separator">
2557
+ <svg
2558
+ class="pf-v6-svg"
2559
+ viewBox="0 0 20 20"
2560
+ fill="currentColor"
2561
+ aria-hidden="true"
2562
+ role="img"
2563
+ width="1em"
2564
+ height="1em"
2565
+ >
2566
+ <path
2567
+ 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"
2568
+ />
2569
+ </svg>
2570
+ </span>
2268
2571
  </span>
2269
2572
  <span class="pf-v6-c-wizard__toggle-list-item">Substep B</span>
2270
2573
  </span>
@@ -2296,7 +2599,19 @@ wrapperTag: div
2296
2599
  <span class="pf-v6-c-wizard__nav-link-text">Configuration</span>
2297
2600
  <span class="pf-v6-c-wizard__nav-link-toggle">
2298
2601
  <span class="pf-v6-c-wizard__nav-link-toggle-icon">
2299
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2602
+ <svg
2603
+ class="pf-v6-svg"
2604
+ viewBox="0 0 20 20"
2605
+ fill="currentColor"
2606
+ aria-hidden="true"
2607
+ role="img"
2608
+ width="1em"
2609
+ height="1em"
2610
+ >
2611
+ <path
2612
+ 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"
2613
+ />
2614
+ </svg>
2300
2615
  </span>
2301
2616
  </span>
2302
2617
  </span>
@@ -2532,7 +2847,19 @@ wrapperTag: div
2532
2847
  aria-label="Close"
2533
2848
  >
2534
2849
  <span class="pf-v6-c-button__icon">
2535
- <i class="fas fa-times" aria-hidden="true"></i>
2850
+ <svg
2851
+ class="pf-v6-svg"
2852
+ viewBox="0 0 20 20"
2853
+ fill="currentColor"
2854
+ aria-hidden="true"
2855
+ role="img"
2856
+ width="1em"
2857
+ height="1em"
2858
+ >
2859
+ <path
2860
+ 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"
2861
+ />
2862
+ </svg>
2536
2863
  </span>
2537
2864
  </button>
2538
2865
  </div>
@@ -2552,10 +2879,21 @@ wrapperTag: div
2552
2879
  <i class="fas fa-check-circle" aria-hidden="true"></i>
2553
2880
  </span>
2554
2881
  Configuration
2555
- <i
2556
- class="fas fa-angle-right pf-v6-c-wizard__toggle-separator"
2557
- aria-hidden="true"
2558
- ></i>
2882
+ <span class="pf-v6-c-wizard__toggle-separator">
2883
+ <svg
2884
+ class="pf-v6-svg"
2885
+ viewBox="0 0 20 20"
2886
+ fill="currentColor"
2887
+ aria-hidden="true"
2888
+ role="img"
2889
+ width="1em"
2890
+ height="1em"
2891
+ >
2892
+ <path
2893
+ 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"
2894
+ />
2895
+ </svg>
2896
+ </span>
2559
2897
  </span>
2560
2898
  <span class="pf-v6-c-wizard__toggle-list-item">Substep B</span>
2561
2899
  </span>
@@ -2587,7 +2925,19 @@ wrapperTag: div
2587
2925
  <span class="pf-v6-c-wizard__nav-link-text">Configuration</span>
2588
2926
  <span class="pf-v6-c-wizard__nav-link-toggle">
2589
2927
  <span class="pf-v6-c-wizard__nav-link-toggle-icon">
2590
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2928
+ <svg
2929
+ class="pf-v6-svg"
2930
+ viewBox="0 0 20 20"
2931
+ fill="currentColor"
2932
+ aria-hidden="true"
2933
+ role="img"
2934
+ width="1em"
2935
+ height="1em"
2936
+ >
2937
+ <path
2938
+ 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"
2939
+ />
2940
+ </svg>
2591
2941
  </span>
2592
2942
  </span>
2593
2943
  </span>
@@ -2823,7 +3173,19 @@ wrapperTag: div
2823
3173
  aria-label="Close"
2824
3174
  >
2825
3175
  <span class="pf-v6-c-button__icon">
2826
- <i class="fas fa-times" aria-hidden="true"></i>
3176
+ <svg
3177
+ class="pf-v6-svg"
3178
+ viewBox="0 0 20 20"
3179
+ fill="currentColor"
3180
+ aria-hidden="true"
3181
+ role="img"
3182
+ width="1em"
3183
+ height="1em"
3184
+ >
3185
+ <path
3186
+ 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"
3187
+ />
3188
+ </svg>
2827
3189
  </span>
2828
3190
  </button>
2829
3191
  </div>
@@ -2843,10 +3205,21 @@ wrapperTag: div
2843
3205
  <i class="fas fa-exclamation-triangle" aria-hidden="true"></i>
2844
3206
  </span>
2845
3207
  Configuration
2846
- <i
2847
- class="fas fa-angle-right pf-v6-c-wizard__toggle-separator"
2848
- aria-hidden="true"
2849
- ></i>
3208
+ <span class="pf-v6-c-wizard__toggle-separator">
3209
+ <svg
3210
+ class="pf-v6-svg"
3211
+ viewBox="0 0 20 20"
3212
+ fill="currentColor"
3213
+ aria-hidden="true"
3214
+ role="img"
3215
+ width="1em"
3216
+ height="1em"
3217
+ >
3218
+ <path
3219
+ 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"
3220
+ />
3221
+ </svg>
3222
+ </span>
2850
3223
  </span>
2851
3224
  <span class="pf-v6-c-wizard__toggle-list-item">Substep B</span>
2852
3225
  </span>
@@ -2878,7 +3251,19 @@ wrapperTag: div
2878
3251
  <span class="pf-v6-c-wizard__nav-link-text">Configuration</span>
2879
3252
  <span class="pf-v6-c-wizard__nav-link-toggle">
2880
3253
  <span class="pf-v6-c-wizard__nav-link-toggle-icon">
2881
- <i class="fas fa-angle-right" aria-hidden="true"></i>
3254
+ <svg
3255
+ class="pf-v6-svg"
3256
+ viewBox="0 0 20 20"
3257
+ fill="currentColor"
3258
+ aria-hidden="true"
3259
+ role="img"
3260
+ width="1em"
3261
+ height="1em"
3262
+ >
3263
+ <path
3264
+ 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"
3265
+ />
3266
+ </svg>
2882
3267
  </span>
2883
3268
  </span>
2884
3269
  </span>
@@ -3114,7 +3499,19 @@ wrapperTag: div
3114
3499
  aria-label="Close"
3115
3500
  >
3116
3501
  <span class="pf-v6-c-button__icon">
3117
- <i class="fas fa-times" aria-hidden="true"></i>
3502
+ <svg
3503
+ class="pf-v6-svg"
3504
+ viewBox="0 0 20 20"
3505
+ fill="currentColor"
3506
+ aria-hidden="true"
3507
+ role="img"
3508
+ width="1em"
3509
+ height="1em"
3510
+ >
3511
+ <path
3512
+ 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"
3513
+ />
3514
+ </svg>
3118
3515
  </span>
3119
3516
  </button>
3120
3517
  </div>
@@ -3134,10 +3531,21 @@ wrapperTag: div
3134
3531
  <i class="fas fa-exclamation-triangle" aria-hidden="true"></i>
3135
3532
  </span>
3136
3533
  Configuration
3137
- <i
3138
- class="fas fa-angle-right pf-v6-c-wizard__toggle-separator"
3139
- aria-hidden="true"
3140
- ></i>
3534
+ <span class="pf-v6-c-wizard__toggle-separator">
3535
+ <svg
3536
+ class="pf-v6-svg"
3537
+ viewBox="0 0 20 20"
3538
+ fill="currentColor"
3539
+ aria-hidden="true"
3540
+ role="img"
3541
+ width="1em"
3542
+ height="1em"
3543
+ >
3544
+ <path
3545
+ 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"
3546
+ />
3547
+ </svg>
3548
+ </span>
3141
3549
  </span>
3142
3550
  <span class="pf-v6-c-wizard__toggle-list-item">Substep B</span>
3143
3551
  </span>
@@ -3169,7 +3577,19 @@ wrapperTag: div
3169
3577
  <span class="pf-v6-c-wizard__nav-link-text">Configuration</span>
3170
3578
  <span class="pf-v6-c-wizard__nav-link-toggle">
3171
3579
  <span class="pf-v6-c-wizard__nav-link-toggle-icon">
3172
- <i class="fas fa-angle-right" aria-hidden="true"></i>
3580
+ <svg
3581
+ class="pf-v6-svg"
3582
+ viewBox="0 0 20 20"
3583
+ fill="currentColor"
3584
+ aria-hidden="true"
3585
+ role="img"
3586
+ width="1em"
3587
+ height="1em"
3588
+ >
3589
+ <path
3590
+ 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"
3591
+ />
3592
+ </svg>
3173
3593
  </span>
3174
3594
  </span>
3175
3595
  </span>
@@ -3393,6 +3813,327 @@ wrapperTag: div
3393
3813
 
3394
3814
  ```
3395
3815
 
3816
+ ### Plain
3817
+
3818
+ ```html isFullscreen
3819
+ <div class="pf-v6-c-wizard pf-m-plain">
3820
+ <div class="pf-v6-c-wizard__header">
3821
+ <div class="pf-v6-c-wizard__close">
3822
+ <button
3823
+ class="pf-v6-c-button pf-m-plain"
3824
+ type="button"
3825
+ aria-label="Close"
3826
+ >
3827
+ <span class="pf-v6-c-button__icon">
3828
+ <svg
3829
+ class="pf-v6-svg"
3830
+ viewBox="0 0 20 20"
3831
+ fill="currentColor"
3832
+ aria-hidden="true"
3833
+ role="img"
3834
+ width="1em"
3835
+ height="1em"
3836
+ >
3837
+ <path
3838
+ 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"
3839
+ />
3840
+ </svg>
3841
+ </span>
3842
+ </button>
3843
+ </div>
3844
+ <div class="pf-v6-c-wizard__title">
3845
+ <h1 class="pf-v6-c-wizard__title-text">Wizard title</h1>
3846
+ </div>
3847
+ <div class="pf-v6-c-wizard__description">Here is where the description goes</div>
3848
+ </div>
3849
+ <button
3850
+ aria-label="Wizard Header Toggle"
3851
+ class="pf-v6-c-wizard__toggle"
3852
+ aria-expanded="false"
3853
+ >
3854
+ <span class="pf-v6-c-wizard__toggle-list">
3855
+ <span class="pf-v6-c-wizard__toggle-list-item">
3856
+ <span class="pf-v6-c-wizard__toggle-num">2</span>
3857
+ Configuration
3858
+ <span class="pf-v6-c-wizard__toggle-separator">
3859
+ <svg
3860
+ class="pf-v6-svg"
3861
+ viewBox="0 0 20 20"
3862
+ fill="currentColor"
3863
+ aria-hidden="true"
3864
+ role="img"
3865
+ width="1em"
3866
+ height="1em"
3867
+ >
3868
+ <path
3869
+ 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"
3870
+ />
3871
+ </svg>
3872
+ </span>
3873
+ </span>
3874
+ <span class="pf-v6-c-wizard__toggle-list-item">Substep B</span>
3875
+ </span>
3876
+ <span class="pf-v6-c-wizard__toggle-icon">
3877
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
3878
+ </span>
3879
+ </button>
3880
+ <div class="pf-v6-c-wizard__outer-wrap">
3881
+ <div class="pf-v6-c-wizard__inner-wrap">
3882
+ <nav class="pf-v6-c-wizard__nav" aria-label="Steps">
3883
+ <ol class="pf-v6-c-wizard__nav-list" role="list">
3884
+ <li class="pf-v6-c-wizard__nav-item">
3885
+ <button class="pf-v6-c-wizard__nav-link" type="button">
3886
+ <span class="pf-v6-c-wizard__nav-link-main">
3887
+ <span class="pf-v6-c-wizard__nav-link-text">Information</span>
3888
+ </span>
3889
+ </button>
3890
+ </li>
3891
+ <li class="pf-v6-c-wizard__nav-item pf-m-expandable pf-m-expanded">
3892
+ <button
3893
+ class="pf-v6-c-wizard__nav-link pf-m-current"
3894
+ type="button"
3895
+ aria-expanded="true"
3896
+ >
3897
+ <span class="pf-v6-c-wizard__nav-link-main">
3898
+ <span class="pf-v6-c-wizard__nav-link-text">Configuration</span>
3899
+ <span class="pf-v6-c-wizard__nav-link-toggle">
3900
+ <span class="pf-v6-c-wizard__nav-link-toggle-icon">
3901
+ <svg
3902
+ class="pf-v6-svg"
3903
+ viewBox="0 0 20 20"
3904
+ fill="currentColor"
3905
+ aria-hidden="true"
3906
+ role="img"
3907
+ width="1em"
3908
+ height="1em"
3909
+ >
3910
+ <path
3911
+ 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"
3912
+ />
3913
+ </svg>
3914
+ </span>
3915
+ </span>
3916
+ </span>
3917
+ </button>
3918
+ <ol class="pf-v6-c-wizard__nav-list" role="list">
3919
+ <li class="pf-v6-c-wizard__nav-item">
3920
+ <button class="pf-v6-c-wizard__nav-link" type="button">
3921
+ <span class="pf-v6-c-wizard__nav-link-main">
3922
+ <span class="pf-v6-c-wizard__nav-link-text">Substep A</span>
3923
+ </span>
3924
+ </button>
3925
+ </li>
3926
+ <li class="pf-v6-c-wizard__nav-item">
3927
+ <button
3928
+ class="pf-v6-c-wizard__nav-link pf-m-current"
3929
+ type="button"
3930
+ aria-current="page"
3931
+ >
3932
+ <span class="pf-v6-c-wizard__nav-link-main">
3933
+ <span class="pf-v6-c-wizard__nav-link-text">Substep B</span>
3934
+ </span>
3935
+ </button>
3936
+ </li>
3937
+ <li class="pf-v6-c-wizard__nav-item">
3938
+ <button class="pf-v6-c-wizard__nav-link" type="button">
3939
+ <span class="pf-v6-c-wizard__nav-link-main">
3940
+ <span class="pf-v6-c-wizard__nav-link-text">Substep C</span>
3941
+ </span>
3942
+ </button>
3943
+ </li>
3944
+ </ol>
3945
+ </li>
3946
+ <li class="pf-v6-c-wizard__nav-item">
3947
+ <button class="pf-v6-c-wizard__nav-link" type="button">
3948
+ <span class="pf-v6-c-wizard__nav-link-main">
3949
+ <span class="pf-v6-c-wizard__nav-link-text">Additional</span>
3950
+ </span>
3951
+ </button>
3952
+ </li>
3953
+ <li class="pf-v6-c-wizard__nav-item">
3954
+ <button class="pf-v6-c-wizard__nav-link" type="button" disabled>
3955
+ <span class="pf-v6-c-wizard__nav-link-main">
3956
+ <span class="pf-v6-c-wizard__nav-link-text">Review</span>
3957
+ </span>
3958
+ </button>
3959
+ </li>
3960
+ </ol>
3961
+ </nav>
3962
+ <main class="pf-v6-c-wizard__main" tabindex="0">
3963
+ <div class="pf-v6-c-wizard__main-body">
3964
+ <form class="pf-v6-c-form pf-m-limit-width" novalidate>
3965
+ <div class="pf-v6-c-form__group">
3966
+ <div class="pf-v6-c-form__group-label"><label
3967
+ class="pf-v6-c-form__label"
3968
+ for="wizard-plain-header-form-field1"
3969
+ >
3970
+ <span class="pf-v6-c-form__label-text">Field 1</span>&nbsp;<span
3971
+ class="pf-v6-c-form__label-required"
3972
+ aria-hidden="true"
3973
+ >&#42;</span></label>
3974
+ </div>
3975
+ <div class="pf-v6-c-form__group-control">
3976
+ <span class="pf-v6-c-form-control">
3977
+ <input
3978
+ type="text"
3979
+ id="wizard-plain-header-form-field1"
3980
+ name="wizard-plain-header-form-field1"
3981
+ />
3982
+ </span>
3983
+ </div>
3984
+ </div>
3985
+ <div class="pf-v6-c-form__group">
3986
+ <div class="pf-v6-c-form__group-label"><label
3987
+ class="pf-v6-c-form__label"
3988
+ for="wizard-plain-header-form-field2"
3989
+ >
3990
+ <span class="pf-v6-c-form__label-text">Field 2</span>&nbsp;<span
3991
+ class="pf-v6-c-form__label-required"
3992
+ aria-hidden="true"
3993
+ >&#42;</span></label>
3994
+ </div>
3995
+ <div class="pf-v6-c-form__group-control">
3996
+ <span class="pf-v6-c-form-control">
3997
+ <input
3998
+ type="text"
3999
+ id="wizard-plain-header-form-field2"
4000
+ name="wizard-plain-header-form-field2"
4001
+ />
4002
+ </span>
4003
+ </div>
4004
+ </div>
4005
+ <div class="pf-v6-c-form__group">
4006
+ <div class="pf-v6-c-form__group-label"><label
4007
+ class="pf-v6-c-form__label"
4008
+ for="wizard-plain-header-form-field3"
4009
+ >
4010
+ <span class="pf-v6-c-form__label-text">Field 3</span>&nbsp;<span
4011
+ class="pf-v6-c-form__label-required"
4012
+ aria-hidden="true"
4013
+ >&#42;</span></label>
4014
+ </div>
4015
+ <div class="pf-v6-c-form__group-control">
4016
+ <span class="pf-v6-c-form-control">
4017
+ <input
4018
+ type="text"
4019
+ id="wizard-plain-header-form-field3"
4020
+ name="wizard-plain-header-form-field3"
4021
+ />
4022
+ </span>
4023
+ </div>
4024
+ </div>
4025
+ <div class="pf-v6-c-form__group">
4026
+ <div class="pf-v6-c-form__group-label"><label
4027
+ class="pf-v6-c-form__label"
4028
+ for="wizard-plain-header-form-field4"
4029
+ >
4030
+ <span class="pf-v6-c-form__label-text">Field 4</span>&nbsp;<span
4031
+ class="pf-v6-c-form__label-required"
4032
+ aria-hidden="true"
4033
+ >&#42;</span></label>
4034
+ </div>
4035
+ <div class="pf-v6-c-form__group-control">
4036
+ <span class="pf-v6-c-form-control">
4037
+ <input
4038
+ type="text"
4039
+ id="wizard-plain-header-form-field4"
4040
+ name="wizard-plain-header-form-field4"
4041
+ />
4042
+ </span>
4043
+ </div>
4044
+ </div>
4045
+ <div class="pf-v6-c-form__group">
4046
+ <div class="pf-v6-c-form__group-label"><label
4047
+ class="pf-v6-c-form__label"
4048
+ for="wizard-plain-header-form-field5"
4049
+ >
4050
+ <span class="pf-v6-c-form__label-text">Field 5</span>&nbsp;<span
4051
+ class="pf-v6-c-form__label-required"
4052
+ aria-hidden="true"
4053
+ >&#42;</span></label>
4054
+ </div>
4055
+ <div class="pf-v6-c-form__group-control">
4056
+ <span class="pf-v6-c-form-control">
4057
+ <input
4058
+ type="text"
4059
+ id="wizard-plain-header-form-field5"
4060
+ name="wizard-plain-header-form-field5"
4061
+ />
4062
+ </span>
4063
+ </div>
4064
+ </div>
4065
+ <div class="pf-v6-c-form__group">
4066
+ <div class="pf-v6-c-form__group-label"><label
4067
+ class="pf-v6-c-form__label"
4068
+ for="wizard-plain-header-form-field6"
4069
+ >
4070
+ <span class="pf-v6-c-form__label-text">Field 6</span>&nbsp;<span
4071
+ class="pf-v6-c-form__label-required"
4072
+ aria-hidden="true"
4073
+ >&#42;</span></label>
4074
+ </div>
4075
+ <div class="pf-v6-c-form__group-control">
4076
+ <span class="pf-v6-c-form-control">
4077
+ <input
4078
+ type="text"
4079
+ id="wizard-plain-header-form-field6"
4080
+ name="wizard-plain-header-form-field6"
4081
+ />
4082
+ </span>
4083
+ </div>
4084
+ </div>
4085
+ <div class="pf-v6-c-form__group">
4086
+ <div class="pf-v6-c-form__group-label"><label
4087
+ class="pf-v6-c-form__label"
4088
+ for="wizard-plain-header-form-field7"
4089
+ >
4090
+ <span class="pf-v6-c-form__label-text">Field 7</span>&nbsp;<span
4091
+ class="pf-v6-c-form__label-required"
4092
+ aria-hidden="true"
4093
+ >&#42;</span></label>
4094
+ </div>
4095
+ <div class="pf-v6-c-form__group-control">
4096
+ <span class="pf-v6-c-form-control">
4097
+ <input
4098
+ type="text"
4099
+ id="wizard-plain-header-form-field7"
4100
+ name="wizard-plain-header-form-field7"
4101
+ />
4102
+ </span>
4103
+ </div>
4104
+ </div>
4105
+ </form>
4106
+ </div>
4107
+ </main>
4108
+ </div>
4109
+ <footer class="pf-v6-c-wizard__footer">
4110
+ <div class="pf-v6-c-action-list">
4111
+ <div class="pf-v6-c-action-list__group">
4112
+ <div class="pf-v6-c-action-list__item">
4113
+ <button class="pf-v6-c-button pf-m-secondary" type="button">
4114
+ <span class="pf-v6-c-button__text">Back</span>
4115
+ </button>
4116
+ </div>
4117
+ <div class="pf-v6-c-action-list__item">
4118
+ <button class="pf-v6-c-button pf-m-primary" type="button">
4119
+ <span class="pf-v6-c-button__text">Next</span>
4120
+ </button>
4121
+ </div>
4122
+ </div>
4123
+ <div class="pf-v6-c-action-list__group">
4124
+ <div class="pf-v6-c-action-list__item">
4125
+ <button class="pf-v6-c-button pf-m-link" type="button">
4126
+ <span class="pf-v6-c-button__text">Cancel</span>
4127
+ </button>
4128
+ </div>
4129
+ </div>
4130
+ </div>
4131
+ </footer>
4132
+ </div>
4133
+ </div>
4134
+
4135
+ ```
4136
+
3396
4137
  ## Documentation
3397
4138
 
3398
4139
  ### Accessibility
@@ -3445,6 +4186,8 @@ wrapperTag: div
3445
4186
  | `.pf-v6-c-wizard__footer-cancel` | `<div>` | Initiates the cancel button. **Required** |
3446
4187
  | `.pf-m-expanded` | `.pf-v6-c-wizard__toggle`, `.pf-v6-c-wizard__nav` | Modifies the mobile steps toggle and steps menu for the expanded state. |
3447
4188
  | `.pf-m-finished` | `.pf-v6-c-wizard` | Modifies the wizard for the finished state. |
4189
+ | `.pf-m-plain` | `.pf-v6-c-wizard` | Modifies the wizard to have a transparent background. |
4190
+ | `.pf-m-no-plain-on-glass` | `.pf-v6-c-wizard` | Prevents the wizard from automatically applying plain styling when glass theme is enabled. |
3448
4191
  | `.pf-m-expandable` | `.pf-v6-c-wizard__nav-item` | Modifies a nav item for the expandable state. |
3449
4192
  | `.pf-m-expanded` | `.pf-v6-c-wizard__nav-item` | Modifies a nav item for the expanded state. |
3450
4193
  | `.pf-m-current` | `.pf-v6-c-wizard__nav-link` | Modifies a step link for the current state. **Required** |