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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (410) hide show
  1. package/README.md +2 -2
  2. package/assets/fontawesome/_variables.scss +2 -1
  3. package/assets/images/Felt-Bkg-Generic-Dark.svg +82 -0
  4. package/assets/images/Felt-Bkg-Generic-Light.svg +82 -0
  5. package/assets/images/PF-Bkg-Generic-Dark.svg +76 -0
  6. package/assets/images/PF-Bkg-Generic-Light.svg +74 -0
  7. package/assets/images/RHAiExperienceIcon.svg +27 -0
  8. package/assets/images/RHAutomationsLogo.svg +96 -0
  9. package/assets/images/RHServerStackIcon.svg +16 -0
  10. package/assets/images/compass--hero-bg.png +0 -0
  11. package/assets/images/compass--rh-wallpaper-dark.png +0 -0
  12. package/assets/images/compass--rh-wallpaper-light.png +0 -0
  13. package/assets/images/compass--wallpaper-dark.jpg +0 -0
  14. package/assets/images/compass--wallpaper-dark.png +0 -0
  15. package/assets/images/compass--wallpaper-light.jpg +0 -0
  16. package/assets/images/compass--wallpaper-light.png +0 -0
  17. package/assets/images/glass-brand-dark.jpg +0 -0
  18. package/assets/images/glass-brand-dark.png +0 -0
  19. package/assets/images/glass-brand-light.jpg +0 -0
  20. package/assets/images/glass-brand-light.png +0 -0
  21. package/base/normalize.scss +7 -0
  22. package/base/patternfly-common.css +50 -0
  23. package/base/patternfly-common.scss +59 -0
  24. package/base/patternfly-svg-icons.css +17 -0
  25. package/base/patternfly-svg-icons.scss +20 -0
  26. package/base/patternfly-variables.css +926 -513
  27. package/base/patternfly-variables.scss +46 -4
  28. package/base/tokens/tokens-dark.scss +56 -8
  29. package/base/tokens/tokens-default.scss +69 -14
  30. package/base/tokens/tokens-glass-dark.scss +26 -0
  31. package/base/tokens/tokens-glass.scss +22 -0
  32. package/base/tokens/tokens-local.scss +17 -0
  33. package/base/tokens/tokens-palette.scss +3 -1
  34. package/base/tokens/tokens-redhat-dark.scss +21 -0
  35. package/base/tokens/tokens-redhat-glass-dark.scss +40 -0
  36. package/base/tokens/tokens-redhat-glass.scss +30 -0
  37. package/base/tokens/tokens-redhat-highcontrast-dark.scss +50 -0
  38. package/base/tokens/tokens-redhat-highcontrast.scss +128 -0
  39. package/base/tokens/tokens-redhat.scss +15 -0
  40. package/components/AboutModalBox/about-modal-box.css +36 -26
  41. package/components/Accordion/accordion.css +26 -14
  42. package/components/Accordion/accordion.scss +12 -2
  43. package/components/ActionList/action-list.css +2 -0
  44. package/components/ActionList/action-list.scss +2 -0
  45. package/components/Alert/alert.css +7 -5
  46. package/components/Alert/alert.scss +2 -1
  47. package/components/Avatar/avatar.css +12 -4
  48. package/components/BackgroundImage/background-image.css +6 -3
  49. package/components/Banner/banner.css +12 -6
  50. package/components/Banner/banner.scss +7 -0
  51. package/components/Brand/brand.css +3 -1
  52. package/components/Breadcrumb/breadcrumb.css +10 -5
  53. package/components/Breadcrumb/breadcrumb.scss +6 -2
  54. package/components/Button/button.css +173 -71
  55. package/components/Button/button.scss +188 -72
  56. package/components/CalendarMonth/calendar-month.css +4 -3
  57. package/components/Card/card.css +51 -15
  58. package/components/Card/card.scss +65 -9
  59. package/components/ClipboardCopy/clipboard-copy.css +14 -7
  60. package/components/ClipboardCopy/clipboard-copy.scss +13 -4
  61. package/components/CodeEditor/code-editor.css +2 -2
  62. package/components/CodeEditor/code-editor.scss +2 -2
  63. package/components/Compass/compass.css +399 -0
  64. package/components/Compass/compass.scss +413 -0
  65. package/components/DataList/data-list.css +30 -23
  66. package/components/DataList/data-list.scss +3 -2
  67. package/components/DescriptionList/description-list-order.scss +5 -1
  68. package/components/DescriptionList/description-list.css +7 -5
  69. package/components/DescriptionList/description-list.scss +5 -1
  70. package/components/Divider/divider.css +7 -5
  71. package/components/Drawer/drawer.css +224 -75
  72. package/components/Drawer/drawer.scss +194 -27
  73. package/components/DualListSelector/dual-list-selector.css +18 -12
  74. package/components/DualListSelector/dual-list-selector.scss +1 -1
  75. package/components/ExpandableSection/expandable-section.css +21 -16
  76. package/components/ExpandableSection/expandable-section.scss +6 -3
  77. package/components/Form/form.css +2 -2
  78. package/components/Form/form.scss +2 -2
  79. package/components/FormControl/form-control.css +3 -3
  80. package/components/FormControl/form-control.scss +3 -3
  81. package/components/Hero/hero.css +74 -0
  82. package/components/Hero/hero.scss +86 -0
  83. package/components/JumpLinks/jump-links.css +16 -5
  84. package/components/JumpLinks/jump-links.scss +17 -3
  85. package/components/Label/label-group.css +2 -2
  86. package/components/Label/label-group.scss +2 -2
  87. package/components/Label/label.css +4 -3
  88. package/components/Login/login.css +58 -40
  89. package/components/Login/login.scss +7 -3
  90. package/components/Masthead/masthead.css +111 -16
  91. package/components/Masthead/masthead.scss +111 -1
  92. package/components/Menu/menu.css +49 -33
  93. package/components/Menu/menu.scss +26 -19
  94. package/components/MenuToggle/menu-toggle.css +35 -8
  95. package/components/MenuToggle/menu-toggle.scss +42 -8
  96. package/components/ModalBox/modal-box.css +9 -7
  97. package/components/ModalBox/modal-box.scss +2 -2
  98. package/components/Nav/nav.css +82 -11
  99. package/components/Nav/nav.scss +85 -5
  100. package/components/NotificationDrawer/notification-drawer.css +19 -9
  101. package/components/NotificationDrawer/notification-drawer.scss +14 -5
  102. package/components/OverflowMenu/overflow-menu.css +16 -0
  103. package/components/OverflowMenu/overflow-menu.scss +20 -1
  104. package/components/Page/page.css +421 -32
  105. package/components/Page/page.scss +397 -15
  106. package/components/Pagination/pagination.css +56 -4
  107. package/components/Pagination/pagination.scss +71 -6
  108. package/components/Panel/panel.css +41 -3
  109. package/components/Panel/panel.scss +56 -3
  110. package/components/Progress/progress.css +3 -1
  111. package/components/Progress/progress.scss +3 -1
  112. package/components/ProgressStepper/progress-stepper.scss +5 -1
  113. package/components/Sidebar/sidebar.css +1 -1
  114. package/components/Sidebar/sidebar.scss +7 -3
  115. package/components/Skeleton/skeleton.css +16 -15
  116. package/components/Slider/slider.css +32 -18
  117. package/components/Switch/switch.css +4 -2
  118. package/components/Switch/switch.scss +1 -1
  119. package/components/Table/table-grid.css +28 -36
  120. package/components/Table/table-grid.scss +4 -4
  121. package/components/Table/table-scrollable.css +1 -1
  122. package/components/Table/table-scrollable.scss +1 -1
  123. package/components/Table/table-tree-view.css +4 -2
  124. package/components/Table/table.css +104 -57
  125. package/components/Table/table.scss +92 -37
  126. package/components/Tabs/tabs.css +39 -33
  127. package/components/Tabs/tabs.scss +38 -26
  128. package/components/TextInputGroup/text-input-group.css +2 -2
  129. package/components/TextInputGroup/text-input-group.scss +2 -2
  130. package/components/ToggleGroup/toggle-group.css +44 -19
  131. package/components/ToggleGroup/toggle-group.scss +51 -22
  132. package/components/Toolbar/toolbar.css +195 -16
  133. package/components/Toolbar/toolbar.scss +89 -9
  134. package/components/TreeView/tree-view.css +45 -14
  135. package/components/TreeView/tree-view.scss +32 -1
  136. package/components/Wizard/wizard.css +41 -19
  137. package/components/Wizard/wizard.scss +26 -6
  138. package/components/_index.css +2740 -829
  139. package/components/_index.scss +3 -1
  140. package/docs/components/AboutModalBox/examples/AboutModalBox.md +13 -1
  141. package/docs/components/Accordion/examples/Accordion.md +392 -30
  142. package/docs/components/ActionList/examples/ActionList.md +143 -11
  143. package/docs/components/Alert/examples/Alert.md +678 -54
  144. package/docs/components/Avatar/examples/Avatar.md +4 -4
  145. package/docs/components/BackToTop/examples/BackToTop.md +13 -1
  146. package/docs/components/Banner/examples/Banner.md +196 -5
  147. package/docs/components/Brand/examples/Brand.md +2 -2
  148. package/docs/components/Breadcrumb/examples/Breadcrumb.md +313 -26
  149. package/docs/components/Button/examples/Button.md +2829 -333
  150. package/docs/components/CalendarMonth/examples/CalendarMonth.md +156 -12
  151. package/docs/components/Card/examples/Card.md +335 -12
  152. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +293 -28
  153. package/docs/components/CodeBlock/examples/CodeBlock.md +104 -8
  154. package/docs/components/CodeEditor/examples/CodeEditor.md +234 -18
  155. package/docs/components/Compass/examples/Compass.css +8 -0
  156. package/docs/components/Compass/examples/Compass.md +109 -0
  157. package/docs/components/DataList/examples/DataList.md +468 -78
  158. package/docs/components/DatePicker/examples/DatePicker.md +78 -6
  159. package/docs/components/DescriptionList/examples/DescriptionList.md +327 -27
  160. package/docs/components/Divider/examples/Divider.md +2 -2
  161. package/docs/components/DragDrop/examples/DragDrop.css +1 -1
  162. package/docs/components/Drawer/examples/Drawer.md +415 -35
  163. package/docs/components/DualListSelector/examples/DualListSelector.md +1247 -161
  164. package/docs/components/EmptyState/examples/EmptyState.md +78 -6
  165. package/docs/components/ExpandableSection/examples/ExpandableSection.md +91 -7
  166. package/docs/components/Form/examples/Form.md +78 -6
  167. package/docs/components/Hero/examples/Hero.md +25 -0
  168. package/docs/components/Hint/examples/Hint.md +39 -3
  169. package/docs/components/Icon/examples/Icon.md +105 -9
  170. package/docs/components/InlineEdit/examples/InlineEdit.md +338 -26
  171. package/docs/components/InputGroup/examples/InputGroup.md +40 -4
  172. package/docs/components/JumpLinks/examples/JumpLinks.md +54 -6
  173. package/docs/components/Label/examples/Label.md +2834 -218
  174. package/docs/components/Login/examples/Login.md +39 -3
  175. package/docs/components/Masthead/examples/masthead.md +80 -1
  176. package/docs/components/Menu/examples/Menu.md +1679 -133
  177. package/docs/components/MenuToggle/examples/MenuToggle.md +1514 -118
  178. package/docs/components/ModalBox/examples/ModalBox.md +289 -25
  179. package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +156 -12
  180. package/docs/components/Nav/examples/Navigation.md +898 -62
  181. package/docs/components/NotificationDrawer/examples/NotificationDrawer.md +1079 -83
  182. package/docs/components/OverflowMenu/examples/overflow-menu.css +6 -3
  183. package/docs/components/OverflowMenu/examples/overflow-menu.md +164 -11
  184. package/docs/components/Page/examples/Page.md +211 -25
  185. package/docs/components/Pagination/examples/Pagination.md +1291 -80
  186. package/docs/components/Panel/examples/Panel.css +3 -0
  187. package/docs/components/Panel/examples/Panel.md +71 -4
  188. package/docs/components/Popover/examples/Popover.md +286 -22
  189. package/docs/components/Progress/examples/Progress.md +91 -7
  190. package/docs/components/ProgressStepper/examples/ProgressStepper.md +275 -23
  191. package/docs/components/Sidebar/examples/Sidebar.md +1 -1
  192. package/docs/components/Slider/examples/Slider.md +52 -4
  193. package/docs/components/Table/examples/Table.css +2 -1
  194. package/docs/components/Table/examples/Table.md +7543 -653
  195. package/docs/components/Tabs/examples/Tabs.md +5734 -471
  196. package/docs/components/TextInputGroup/examples/TextInputGroup.md +600 -48
  197. package/docs/components/ToggleGroup/examples/toggle-group.md +261 -15
  198. package/docs/components/Toolbar/examples/Toolbar.css +1 -1
  199. package/docs/components/Toolbar/examples/Toolbar.md +1145 -88
  200. package/docs/components/TreeView/examples/TreeView.md +1390 -130
  201. package/docs/components/Wizard/examples/Wizard.md +828 -73
  202. package/docs/demos/AboutModal/examples/AboutModal.md +158 -53
  203. package/docs/demos/Alert/examples/Alert.md +539 -164
  204. package/docs/demos/BackToTop/examples/BackToTop.md +158 -53
  205. package/docs/demos/Banner/examples/Banner.md +290 -104
  206. package/docs/demos/Button/examples/Button.md +13 -1
  207. package/docs/demos/Card/examples/Card.md +1041 -134
  208. package/docs/demos/CardView/examples/CardView.md +570 -171
  209. package/docs/demos/Compass/examples/Compass.md +10005 -0
  210. package/docs/demos/Dashboard/examples/Dashboard.md +745 -177
  211. package/docs/demos/DataList/examples/DataList.md +1301 -292
  212. package/docs/demos/DescriptionList/examples/DescriptionList.md +472 -160
  213. package/docs/demos/Drawer/examples/Drawer.md +718 -262
  214. package/docs/demos/Form/examples/BasicForms.md +273 -21
  215. package/docs/demos/JumpLinks/examples/JumpLinks.md +862 -319
  216. package/docs/demos/Masthead/examples/Masthead.md +1119 -489
  217. package/docs/demos/Modal/examples/Modal.md +948 -321
  218. package/docs/demos/Nav/examples/Nav.md +3449 -499
  219. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +2418 -405
  220. package/docs/demos/Page/examples/Page.md +2137 -773
  221. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +13 -1
  222. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +52 -4
  223. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +1913 -504
  224. package/docs/demos/Skeleton/examples/Skeleton.md +145 -52
  225. package/docs/demos/Table/examples/Table.md +11807 -2275
  226. package/docs/demos/Tabs/examples/Tabs.md +1117 -337
  227. package/docs/demos/Toolbar/examples/Toolbar.md +1818 -286
  228. package/docs/demos/Wizard/examples/Wizard.md +1705 -526
  229. package/docs/layouts/Bullseye/examples/Bullseye.css +2 -2
  230. package/docs/layouts/Bullseye/examples/Bullseye.md +2 -1
  231. package/docs/layouts/Flex/examples/Flex.css +3 -3
  232. package/docs/layouts/Flex/examples/Flex.md +3 -2
  233. package/docs/layouts/Gallery/examples/Gallery.css +2 -2
  234. package/docs/layouts/Gallery/examples/Gallery.md +4 -3
  235. package/docs/layouts/Grid/examples/Grid.css +1 -1
  236. package/docs/layouts/Grid/examples/Grid.md +6 -5
  237. package/docs/layouts/Level/examples/Level.css +3 -3
  238. package/docs/layouts/Level/examples/Level.md +2 -1
  239. package/docs/layouts/Split/examples/Split.css +1 -1
  240. package/docs/layouts/Split/examples/Split.md +2 -1
  241. package/docs/layouts/Stack/examples/Stack.css +3 -3
  242. package/docs/layouts/Stack/examples/Stack.md +2 -1
  243. package/docs/utilities/Accessibility/examples/Accessibility.md +3 -2
  244. package/docs/utilities/Alignment/examples/Alignment.css +4 -4
  245. package/docs/utilities/Alignment/examples/Alignment.md +3 -2
  246. package/docs/utilities/BackgroundColor/examples/BackgroundColor.md +5 -4
  247. package/docs/utilities/BoxShadow/examples/box-shadow.css +2 -2
  248. package/docs/utilities/BoxShadow/examples/box-shadow.md +2 -1
  249. package/docs/utilities/Display/examples/Display.css +1 -1
  250. package/docs/utilities/Display/examples/Display.md +3 -2
  251. package/docs/utilities/Flex/examples/Flex.css +7 -7
  252. package/docs/utilities/Flex/examples/Flex.md +3 -2
  253. package/docs/utilities/Float/examples/Float.css +2 -2
  254. package/docs/utilities/Float/examples/Float.md +3 -2
  255. package/docs/utilities/Sizing/examples/Sizing.md +8 -7
  256. package/docs/utilities/Spacing/examples/Spacing.css +2 -2
  257. package/docs/utilities/Spacing/examples/Spacing.md +3 -2
  258. package/docs/utilities/Text/examples/Text.md +5 -4
  259. package/icons/PfIcons/add-circle-o.svg +4 -0
  260. package/icons/PfIcons/ansible-tower.svg +4 -0
  261. package/icons/PfIcons/applications.svg +4 -0
  262. package/icons/PfIcons/arrow.svg +4 -0
  263. package/icons/PfIcons/asleep.svg +4 -0
  264. package/icons/PfIcons/attention-bell.svg +4 -0
  265. package/icons/PfIcons/automation.svg +4 -0
  266. package/icons/PfIcons/bell.svg +4 -0
  267. package/icons/PfIcons/blueprint.svg +4 -0
  268. package/icons/PfIcons/build.svg +4 -0
  269. package/icons/PfIcons/builder-image.svg +4 -0
  270. package/icons/PfIcons/bundle.svg +4 -0
  271. package/icons/PfIcons/catalog.svg +4 -0
  272. package/icons/PfIcons/chat.svg +4 -0
  273. package/icons/PfIcons/close.svg +4 -0
  274. package/icons/PfIcons/cloud-security.svg +4 -0
  275. package/icons/PfIcons/cloud-tenant.svg +4 -0
  276. package/icons/PfIcons/cluster.svg +4 -0
  277. package/icons/PfIcons/connected.svg +4 -0
  278. package/icons/PfIcons/container-node.svg +4 -0
  279. package/icons/PfIcons/cpu.svg +4 -0
  280. package/icons/PfIcons/critical-risk.svg +4 -0
  281. package/icons/PfIcons/data-processor.svg +4 -0
  282. package/icons/PfIcons/data-sink.svg +4 -0
  283. package/icons/PfIcons/data-source.svg +4 -0
  284. package/icons/PfIcons/degraded.svg +4 -0
  285. package/icons/PfIcons/disconnected.svg +4 -0
  286. package/icons/PfIcons/domain.svg +4 -0
  287. package/icons/PfIcons/edit.svg +4 -0
  288. package/icons/PfIcons/enhancement.svg +4 -0
  289. package/icons/PfIcons/enterprise.svg +4 -0
  290. package/icons/PfIcons/equalizer.svg +4 -0
  291. package/icons/PfIcons/error-circle-o.svg +4 -0
  292. package/icons/PfIcons/export.svg +4 -0
  293. package/icons/PfIcons/filter.svg +4 -0
  294. package/icons/PfIcons/flavor.svg +4 -0
  295. package/icons/PfIcons/folder-close.svg +4 -0
  296. package/icons/PfIcons/folder-open.svg +4 -0
  297. package/icons/PfIcons/globe-route.svg +4 -0
  298. package/icons/PfIcons/help.svg +4 -0
  299. package/icons/PfIcons/history.svg +4 -0
  300. package/icons/PfIcons/home.svg +4 -0
  301. package/icons/PfIcons/import.svg +4 -0
  302. package/icons/PfIcons/in-progress.svg +4 -0
  303. package/icons/PfIcons/info.svg +4 -0
  304. package/icons/PfIcons/infrastructure.svg +4 -0
  305. package/icons/PfIcons/integration.svg +4 -0
  306. package/icons/PfIcons/key.svg +4 -0
  307. package/icons/PfIcons/locked.svg +4 -0
  308. package/icons/PfIcons/maintenance.svg +4 -0
  309. package/icons/PfIcons/memory.svg +4 -0
  310. package/icons/PfIcons/messages.svg +4 -0
  311. package/icons/PfIcons/middleware.svg +4 -0
  312. package/icons/PfIcons/migration.svg +4 -0
  313. package/icons/PfIcons/module.svg +4 -0
  314. package/icons/PfIcons/monitoring.svg +4 -0
  315. package/icons/PfIcons/multicluster.svg +4 -0
  316. package/icons/PfIcons/namespaces.svg +4 -0
  317. package/icons/PfIcons/network.svg +4 -0
  318. package/icons/PfIcons/new-process.svg +4 -0
  319. package/icons/PfIcons/not-started.svg +4 -0
  320. package/icons/PfIcons/off.svg +4 -0
  321. package/icons/PfIcons/ok.svg +4 -0
  322. package/icons/PfIcons/on-running.svg +4 -0
  323. package/icons/PfIcons/on.svg +4 -0
  324. package/icons/PfIcons/open-drawer-right.svg +4 -0
  325. package/icons/PfIcons/openshift.svg +4 -0
  326. package/icons/PfIcons/openstack.svg +4 -0
  327. package/icons/PfIcons/optimize.svg +4 -0
  328. package/icons/PfIcons/orders.svg +4 -0
  329. package/icons/PfIcons/os-image.svg +4 -0
  330. package/icons/PfIcons/package.svg +4 -0
  331. package/icons/PfIcons/panel-close.svg +4 -0
  332. package/icons/PfIcons/panel-open.svg +4 -0
  333. package/icons/PfIcons/paused.svg +4 -0
  334. package/icons/PfIcons/pending.svg +4 -0
  335. package/icons/PfIcons/pficon-dragdrop.svg +4 -0
  336. package/icons/PfIcons/pficon-history.svg +4 -0
  337. package/icons/PfIcons/pficon-network-range.svg +4 -0
  338. package/icons/PfIcons/pficon-satellite.svg +4 -0
  339. package/icons/PfIcons/pficon-sort-common-asc.svg +4 -0
  340. package/icons/PfIcons/pficon-sort-common-desc.svg +4 -0
  341. package/icons/PfIcons/pficon-template.svg +4 -0
  342. package/icons/PfIcons/pficon-vcenter.svg +4 -0
  343. package/icons/PfIcons/plugged.svg +4 -0
  344. package/icons/PfIcons/port.svg +4 -0
  345. package/icons/PfIcons/print.svg +4 -0
  346. package/icons/PfIcons/private.svg +4 -0
  347. package/icons/PfIcons/process-automation.svg +4 -0
  348. package/icons/PfIcons/project.svg +4 -0
  349. package/icons/PfIcons/rebalance.svg +4 -0
  350. package/icons/PfIcons/rebooting.svg +4 -0
  351. package/icons/PfIcons/regions.svg +4 -0
  352. package/icons/PfIcons/registry.svg +4 -0
  353. package/icons/PfIcons/remove2.svg +4 -0
  354. package/icons/PfIcons/replicator.svg +4 -0
  355. package/icons/PfIcons/repository.svg +4 -0
  356. package/icons/PfIcons/resource-pool.svg +4 -0
  357. package/icons/PfIcons/resources-almost-empty.svg +4 -0
  358. package/icons/PfIcons/resources-almost-full.svg +4 -0
  359. package/icons/PfIcons/resources-empty.svg +4 -0
  360. package/icons/PfIcons/resources-full.svg +4 -0
  361. package/icons/PfIcons/running.svg +4 -0
  362. package/icons/PfIcons/save.svg +4 -0
  363. package/icons/PfIcons/screen.svg +4 -0
  364. package/icons/PfIcons/security.svg +4 -0
  365. package/icons/PfIcons/server-group.svg +4 -0
  366. package/icons/PfIcons/server.svg +4 -0
  367. package/icons/PfIcons/service-catalog.svg +4 -0
  368. package/icons/PfIcons/service.svg +4 -0
  369. package/icons/PfIcons/services.svg +4 -0
  370. package/icons/PfIcons/severity-critical.svg +4 -0
  371. package/icons/PfIcons/severity-important.svg +4 -0
  372. package/icons/PfIcons/severity-minor.svg +4 -0
  373. package/icons/PfIcons/severity-moderate.svg +4 -0
  374. package/icons/PfIcons/severity-none.svg +4 -0
  375. package/icons/PfIcons/severity-undefined.svg +4 -0
  376. package/icons/PfIcons/spinner.svg +4 -0
  377. package/icons/PfIcons/spinner2.svg +4 -0
  378. package/icons/PfIcons/storage-domain.svg +4 -0
  379. package/icons/PfIcons/task.svg +4 -0
  380. package/icons/PfIcons/tenant.svg +4 -0
  381. package/icons/PfIcons/thumb-tack.svg +4 -0
  382. package/icons/PfIcons/topology.svg +4 -0
  383. package/icons/PfIcons/treeview.svg +4 -0
  384. package/icons/PfIcons/trend-down.svg +4 -0
  385. package/icons/PfIcons/trend-up.svg +4 -0
  386. package/icons/PfIcons/unknown.svg +4 -0
  387. package/icons/PfIcons/unlocked.svg +4 -0
  388. package/icons/PfIcons/unplugged.svg +4 -0
  389. package/icons/PfIcons/user.svg +4 -0
  390. package/icons/PfIcons/users.svg +4 -0
  391. package/icons/PfIcons/virtual-machine.svg +4 -0
  392. package/icons/PfIcons/volume.svg +4 -0
  393. package/icons/PfIcons/warning-triangle.svg +4 -0
  394. package/icons/PfIcons/zone.svg +4 -0
  395. package/layouts/Flex/flex.scss +83 -19
  396. package/layouts/Gallery/gallery.css +6 -2
  397. package/layouts/_index.css +6 -2
  398. package/package.json +55 -17
  399. package/patternfly-base-no-globals.css +969 -489
  400. package/patternfly-base.css +976 -489
  401. package/patternfly-charts.css +3 -3
  402. package/patternfly-no-globals.css +3623 -1194
  403. package/patternfly.css +3630 -1194
  404. package/patternfly.min.css +1 -1
  405. package/patternfly.min.css.map +1 -1
  406. package/patternfly.scss +48 -0
  407. package/sass-utilities/functions.scss +32 -25
  408. package/sass-utilities/mixins.scss +54 -23
  409. package/sass-utilities/namespaces-components.scss +6 -0
  410. package/sass-utilities/scss-variables.scss +3 -0
package/docs/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>
@@ -1572,7 +1782,19 @@ wrapperTag: div
1572
1782
  <div class="pf-v6-c-empty-state pf-m-lg">
1573
1783
  <div class="pf-v6-c-empty-state__content">
1574
1784
  <div class="pf-v6-c-empty-state__icon">
1575
- <i class="fas fa- fa-cogs" aria-hidden="true"></i>
1785
+ <svg
1786
+ class="pf-v6-svg"
1787
+ viewBox="0 0 640 512"
1788
+ fill="currentColor"
1789
+ aria-hidden="true"
1790
+ role="img"
1791
+ width="1em"
1792
+ height="1em"
1793
+ >
1794
+ <path
1795
+ d="M512.1 191l-8.2 14.3c-3 5.3-9.4 7.5-15.1 5.4-11.8-4.4-22.6-10.7-32.1-18.6-4.6-3.8-5.8-10.5-2.8-15.7l8.2-14.3c-6.9-8-12.3-17.3-15.9-27.4h-16.5c-6 0-11.2-4.3-12.2-10.3-2-12-2.1-24.6 0-37.1 1-6 6.2-10.4 12.2-10.4h16.5c3.6-10.1 9-19.4 15.9-27.4l-8.2-14.3c-3-5.2-1.9-11.9 2.8-15.7 9.5-7.9 20.4-14.2 32.1-18.6 5.7-2.1 12.1.1 15.1 5.4l8.2 14.3c10.5-1.9 21.2-1.9 31.7 0L552 6.3c3-5.3 9.4-7.5 15.1-5.4 11.8 4.4 22.6 10.7 32.1 18.6 4.6 3.8 5.8 10.5 2.8 15.7l-8.2 14.3c6.9 8 12.3 17.3 15.9 27.4h16.5c6 0 11.2 4.3 12.2 10.3 2 12 2.1 24.6 0 37.1-1 6-6.2 10.4-12.2 10.4h-16.5c-3.6 10.1-9 19.4-15.9 27.4l8.2 14.3c3 5.2 1.9 11.9-2.8 15.7-9.5 7.9-20.4 14.2-32.1 18.6-5.7 2.1-12.1-.1-15.1-5.4l-8.2-14.3c-10.4 1.9-21.2 1.9-31.7 0zm-10.5-58.8c38.5 29.6 82.4-14.3 52.8-52.8-38.5-29.7-82.4 14.3-52.8 52.8zM386.3 286.1l33.7 16.8c10.1 5.8 14.5 18.1 10.5 29.1-8.9 24.2-26.4 46.4-42.6 65.8-7.4 8.9-20.2 11.1-30.3 5.3l-29.1-16.8c-16 13.7-34.6 24.6-54.9 31.7v33.6c0 11.6-8.3 21.6-19.7 23.6-24.6 4.2-50.4 4.4-75.9 0-11.5-2-20-11.9-20-23.6V418c-20.3-7.2-38.9-18-54.9-31.7L74 403c-10 5.8-22.9 3.6-30.3-5.3-16.2-19.4-33.3-41.6-42.2-65.7-4-10.9.4-23.2 10.5-29.1l33.3-16.8c-3.9-20.9-3.9-42.4 0-63.4L12 205.8c-10.1-5.8-14.6-18.1-10.5-29 8.9-24.2 26-46.4 42.2-65.8 7.4-8.9 20.2-11.1 30.3-5.3l29.1 16.8c16-13.7 34.6-24.6 54.9-31.7V57.1c0-11.5 8.2-21.5 19.6-23.5 24.6-4.2 50.5-4.4 76-.1 11.5 2 20 11.9 20 23.6v33.6c20.3 7.2 38.9 18 54.9 31.7l29.1-16.8c10-5.8 22.9-3.6 30.3 5.3 16.2 19.4 33.2 41.6 42.1 65.8 4 10.9.1 23.2-10 29.1l-33.7 16.8c3.9 21 3.9 42.5 0 63.5zm-117.6 21.1c59.2-77-28.7-164.9-105.7-105.7-59.2 77 28.7 164.9 105.7 105.7zm243.4 182.7l-8.2 14.3c-3 5.3-9.4 7.5-15.1 5.4-11.8-4.4-22.6-10.7-32.1-18.6-4.6-3.8-5.8-10.5-2.8-15.7l8.2-14.3c-6.9-8-12.3-17.3-15.9-27.4h-16.5c-6 0-11.2-4.3-12.2-10.3-2-12-2.1-24.6 0-37.1 1-6 6.2-10.4 12.2-10.4h16.5c3.6-10.1 9-19.4 15.9-27.4l-8.2-14.3c-3-5.2-1.9-11.9 2.8-15.7 9.5-7.9 20.4-14.2 32.1-18.6 5.7-2.1 12.1.1 15.1 5.4l8.2 14.3c10.5-1.9 21.2-1.9 31.7 0l8.2-14.3c3-5.3 9.4-7.5 15.1-5.4 11.8 4.4 22.6 10.7 32.1 18.6 4.6 3.8 5.8 10.5 2.8 15.7l-8.2 14.3c6.9 8 12.3 17.3 15.9 27.4h16.5c6 0 11.2 4.3 12.2 10.3 2 12 2.1 24.6 0 37.1-1 6-6.2 10.4-12.2 10.4h-16.5c-3.6 10.1-9 19.4-15.9 27.4l8.2 14.3c3 5.2 1.9 11.9-2.8 15.7-9.5 7.9-20.4 14.2-32.1 18.6-5.7 2.1-12.1-.1-15.1-5.4l-8.2-14.3c-10.4 1.9-21.2 1.9-31.7 0zM501.6 431c38.5 29.6 82.4-14.3 52.8-52.8-38.5-29.6-82.4 14.3-52.8 52.8z"
1796
+ />
1797
+ </svg>
1576
1798
  </div>
1577
1799
 
1578
1800
  <div
@@ -1659,7 +1881,19 @@ wrapperTag: div
1659
1881
  aria-label="Close"
1660
1882
  >
1661
1883
  <span class="pf-v6-c-button__icon">
1662
- <i class="fas fa-times" aria-hidden="true"></i>
1884
+ <svg
1885
+ class="pf-v6-svg"
1886
+ viewBox="0 0 20 20"
1887
+ fill="currentColor"
1888
+ aria-hidden="true"
1889
+ role="img"
1890
+ width="1em"
1891
+ height="1em"
1892
+ >
1893
+ <path
1894
+ 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"
1895
+ />
1896
+ </svg>
1663
1897
  </span>
1664
1898
  </button>
1665
1899
  </div>
@@ -1679,10 +1913,21 @@ wrapperTag: div
1679
1913
  <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
1680
1914
  </span>
1681
1915
  Configuration
1682
- <i
1683
- class="fas fa-angle-right pf-v6-c-wizard__toggle-separator"
1684
- aria-hidden="true"
1685
- ></i>
1916
+ <span class="pf-v6-c-wizard__toggle-separator">
1917
+ <svg
1918
+ class="pf-v6-svg"
1919
+ viewBox="0 0 20 20"
1920
+ fill="currentColor"
1921
+ aria-hidden="true"
1922
+ role="img"
1923
+ width="1em"
1924
+ height="1em"
1925
+ >
1926
+ <path
1927
+ 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"
1928
+ />
1929
+ </svg>
1930
+ </span>
1686
1931
  </span>
1687
1932
  <span class="pf-v6-c-wizard__toggle-list-item">Substep B</span>
1688
1933
  </span>
@@ -1714,7 +1959,19 @@ wrapperTag: div
1714
1959
  <span class="pf-v6-c-wizard__nav-link-text">Configuration</span>
1715
1960
  <span class="pf-v6-c-wizard__nav-link-toggle">
1716
1961
  <span class="pf-v6-c-wizard__nav-link-toggle-icon">
1717
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1962
+ <svg
1963
+ class="pf-v6-svg"
1964
+ viewBox="0 0 20 20"
1965
+ fill="currentColor"
1966
+ aria-hidden="true"
1967
+ role="img"
1968
+ width="1em"
1969
+ height="1em"
1970
+ >
1971
+ <path
1972
+ 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"
1973
+ />
1974
+ </svg>
1718
1975
  </span>
1719
1976
  </span>
1720
1977
  </span>
@@ -1950,7 +2207,19 @@ wrapperTag: div
1950
2207
  aria-label="Close"
1951
2208
  >
1952
2209
  <span class="pf-v6-c-button__icon">
1953
- <i class="fas fa-times" aria-hidden="true"></i>
2210
+ <svg
2211
+ class="pf-v6-svg"
2212
+ viewBox="0 0 20 20"
2213
+ fill="currentColor"
2214
+ aria-hidden="true"
2215
+ role="img"
2216
+ width="1em"
2217
+ height="1em"
2218
+ >
2219
+ <path
2220
+ 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"
2221
+ />
2222
+ </svg>
1954
2223
  </span>
1955
2224
  </button>
1956
2225
  </div>
@@ -1970,10 +2239,21 @@ wrapperTag: div
1970
2239
  <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
1971
2240
  </span>
1972
2241
  Configuration
1973
- <i
1974
- class="fas fa-angle-right pf-v6-c-wizard__toggle-separator"
1975
- aria-hidden="true"
1976
- ></i>
2242
+ <span class="pf-v6-c-wizard__toggle-separator">
2243
+ <svg
2244
+ class="pf-v6-svg"
2245
+ viewBox="0 0 20 20"
2246
+ fill="currentColor"
2247
+ aria-hidden="true"
2248
+ role="img"
2249
+ width="1em"
2250
+ height="1em"
2251
+ >
2252
+ <path
2253
+ 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"
2254
+ />
2255
+ </svg>
2256
+ </span>
1977
2257
  </span>
1978
2258
  <span class="pf-v6-c-wizard__toggle-list-item">Substep B</span>
1979
2259
  </span>
@@ -2005,7 +2285,19 @@ wrapperTag: div
2005
2285
  <span class="pf-v6-c-wizard__nav-link-text">Configuration</span>
2006
2286
  <span class="pf-v6-c-wizard__nav-link-toggle">
2007
2287
  <span class="pf-v6-c-wizard__nav-link-toggle-icon">
2008
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2288
+ <svg
2289
+ class="pf-v6-svg"
2290
+ viewBox="0 0 20 20"
2291
+ fill="currentColor"
2292
+ aria-hidden="true"
2293
+ role="img"
2294
+ width="1em"
2295
+ height="1em"
2296
+ >
2297
+ <path
2298
+ 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"
2299
+ />
2300
+ </svg>
2009
2301
  </span>
2010
2302
  </span>
2011
2303
  </span>
@@ -2241,7 +2533,19 @@ wrapperTag: div
2241
2533
  aria-label="Close"
2242
2534
  >
2243
2535
  <span class="pf-v6-c-button__icon">
2244
- <i class="fas fa-times" aria-hidden="true"></i>
2536
+ <svg
2537
+ class="pf-v6-svg"
2538
+ viewBox="0 0 20 20"
2539
+ fill="currentColor"
2540
+ aria-hidden="true"
2541
+ role="img"
2542
+ width="1em"
2543
+ height="1em"
2544
+ >
2545
+ <path
2546
+ 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"
2547
+ />
2548
+ </svg>
2245
2549
  </span>
2246
2550
  </button>
2247
2551
  </div>
@@ -2261,10 +2565,21 @@ wrapperTag: div
2261
2565
  <i class="fas fa-check-circle" aria-hidden="true"></i>
2262
2566
  </span>
2263
2567
  Configuration
2264
- <i
2265
- class="fas fa-angle-right pf-v6-c-wizard__toggle-separator"
2266
- aria-hidden="true"
2267
- ></i>
2568
+ <span class="pf-v6-c-wizard__toggle-separator">
2569
+ <svg
2570
+ class="pf-v6-svg"
2571
+ viewBox="0 0 20 20"
2572
+ fill="currentColor"
2573
+ aria-hidden="true"
2574
+ role="img"
2575
+ width="1em"
2576
+ height="1em"
2577
+ >
2578
+ <path
2579
+ 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"
2580
+ />
2581
+ </svg>
2582
+ </span>
2268
2583
  </span>
2269
2584
  <span class="pf-v6-c-wizard__toggle-list-item">Substep B</span>
2270
2585
  </span>
@@ -2296,7 +2611,19 @@ wrapperTag: div
2296
2611
  <span class="pf-v6-c-wizard__nav-link-text">Configuration</span>
2297
2612
  <span class="pf-v6-c-wizard__nav-link-toggle">
2298
2613
  <span class="pf-v6-c-wizard__nav-link-toggle-icon">
2299
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2614
+ <svg
2615
+ class="pf-v6-svg"
2616
+ viewBox="0 0 20 20"
2617
+ fill="currentColor"
2618
+ aria-hidden="true"
2619
+ role="img"
2620
+ width="1em"
2621
+ height="1em"
2622
+ >
2623
+ <path
2624
+ 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"
2625
+ />
2626
+ </svg>
2300
2627
  </span>
2301
2628
  </span>
2302
2629
  </span>
@@ -2532,7 +2859,19 @@ wrapperTag: div
2532
2859
  aria-label="Close"
2533
2860
  >
2534
2861
  <span class="pf-v6-c-button__icon">
2535
- <i class="fas fa-times" aria-hidden="true"></i>
2862
+ <svg
2863
+ class="pf-v6-svg"
2864
+ viewBox="0 0 20 20"
2865
+ fill="currentColor"
2866
+ aria-hidden="true"
2867
+ role="img"
2868
+ width="1em"
2869
+ height="1em"
2870
+ >
2871
+ <path
2872
+ 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"
2873
+ />
2874
+ </svg>
2536
2875
  </span>
2537
2876
  </button>
2538
2877
  </div>
@@ -2552,10 +2891,21 @@ wrapperTag: div
2552
2891
  <i class="fas fa-check-circle" aria-hidden="true"></i>
2553
2892
  </span>
2554
2893
  Configuration
2555
- <i
2556
- class="fas fa-angle-right pf-v6-c-wizard__toggle-separator"
2557
- aria-hidden="true"
2558
- ></i>
2894
+ <span class="pf-v6-c-wizard__toggle-separator">
2895
+ <svg
2896
+ class="pf-v6-svg"
2897
+ viewBox="0 0 20 20"
2898
+ fill="currentColor"
2899
+ aria-hidden="true"
2900
+ role="img"
2901
+ width="1em"
2902
+ height="1em"
2903
+ >
2904
+ <path
2905
+ 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"
2906
+ />
2907
+ </svg>
2908
+ </span>
2559
2909
  </span>
2560
2910
  <span class="pf-v6-c-wizard__toggle-list-item">Substep B</span>
2561
2911
  </span>
@@ -2587,7 +2937,19 @@ wrapperTag: div
2587
2937
  <span class="pf-v6-c-wizard__nav-link-text">Configuration</span>
2588
2938
  <span class="pf-v6-c-wizard__nav-link-toggle">
2589
2939
  <span class="pf-v6-c-wizard__nav-link-toggle-icon">
2590
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2940
+ <svg
2941
+ class="pf-v6-svg"
2942
+ viewBox="0 0 20 20"
2943
+ fill="currentColor"
2944
+ aria-hidden="true"
2945
+ role="img"
2946
+ width="1em"
2947
+ height="1em"
2948
+ >
2949
+ <path
2950
+ 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"
2951
+ />
2952
+ </svg>
2591
2953
  </span>
2592
2954
  </span>
2593
2955
  </span>
@@ -2823,7 +3185,19 @@ wrapperTag: div
2823
3185
  aria-label="Close"
2824
3186
  >
2825
3187
  <span class="pf-v6-c-button__icon">
2826
- <i class="fas fa-times" aria-hidden="true"></i>
3188
+ <svg
3189
+ class="pf-v6-svg"
3190
+ viewBox="0 0 20 20"
3191
+ fill="currentColor"
3192
+ aria-hidden="true"
3193
+ role="img"
3194
+ width="1em"
3195
+ height="1em"
3196
+ >
3197
+ <path
3198
+ 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"
3199
+ />
3200
+ </svg>
2827
3201
  </span>
2828
3202
  </button>
2829
3203
  </div>
@@ -2843,10 +3217,21 @@ wrapperTag: div
2843
3217
  <i class="fas fa-exclamation-triangle" aria-hidden="true"></i>
2844
3218
  </span>
2845
3219
  Configuration
2846
- <i
2847
- class="fas fa-angle-right pf-v6-c-wizard__toggle-separator"
2848
- aria-hidden="true"
2849
- ></i>
3220
+ <span class="pf-v6-c-wizard__toggle-separator">
3221
+ <svg
3222
+ class="pf-v6-svg"
3223
+ viewBox="0 0 20 20"
3224
+ fill="currentColor"
3225
+ aria-hidden="true"
3226
+ role="img"
3227
+ width="1em"
3228
+ height="1em"
3229
+ >
3230
+ <path
3231
+ 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"
3232
+ />
3233
+ </svg>
3234
+ </span>
2850
3235
  </span>
2851
3236
  <span class="pf-v6-c-wizard__toggle-list-item">Substep B</span>
2852
3237
  </span>
@@ -2878,7 +3263,19 @@ wrapperTag: div
2878
3263
  <span class="pf-v6-c-wizard__nav-link-text">Configuration</span>
2879
3264
  <span class="pf-v6-c-wizard__nav-link-toggle">
2880
3265
  <span class="pf-v6-c-wizard__nav-link-toggle-icon">
2881
- <i class="fas fa-angle-right" aria-hidden="true"></i>
3266
+ <svg
3267
+ class="pf-v6-svg"
3268
+ viewBox="0 0 20 20"
3269
+ fill="currentColor"
3270
+ aria-hidden="true"
3271
+ role="img"
3272
+ width="1em"
3273
+ height="1em"
3274
+ >
3275
+ <path
3276
+ 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"
3277
+ />
3278
+ </svg>
2882
3279
  </span>
2883
3280
  </span>
2884
3281
  </span>
@@ -3114,7 +3511,19 @@ wrapperTag: div
3114
3511
  aria-label="Close"
3115
3512
  >
3116
3513
  <span class="pf-v6-c-button__icon">
3117
- <i class="fas fa-times" aria-hidden="true"></i>
3514
+ <svg
3515
+ class="pf-v6-svg"
3516
+ viewBox="0 0 20 20"
3517
+ fill="currentColor"
3518
+ aria-hidden="true"
3519
+ role="img"
3520
+ width="1em"
3521
+ height="1em"
3522
+ >
3523
+ <path
3524
+ 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"
3525
+ />
3526
+ </svg>
3118
3527
  </span>
3119
3528
  </button>
3120
3529
  </div>
@@ -3134,10 +3543,21 @@ wrapperTag: div
3134
3543
  <i class="fas fa-exclamation-triangle" aria-hidden="true"></i>
3135
3544
  </span>
3136
3545
  Configuration
3137
- <i
3138
- class="fas fa-angle-right pf-v6-c-wizard__toggle-separator"
3139
- aria-hidden="true"
3140
- ></i>
3546
+ <span class="pf-v6-c-wizard__toggle-separator">
3547
+ <svg
3548
+ class="pf-v6-svg"
3549
+ viewBox="0 0 20 20"
3550
+ fill="currentColor"
3551
+ aria-hidden="true"
3552
+ role="img"
3553
+ width="1em"
3554
+ height="1em"
3555
+ >
3556
+ <path
3557
+ 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"
3558
+ />
3559
+ </svg>
3560
+ </span>
3141
3561
  </span>
3142
3562
  <span class="pf-v6-c-wizard__toggle-list-item">Substep B</span>
3143
3563
  </span>
@@ -3169,7 +3589,19 @@ wrapperTag: div
3169
3589
  <span class="pf-v6-c-wizard__nav-link-text">Configuration</span>
3170
3590
  <span class="pf-v6-c-wizard__nav-link-toggle">
3171
3591
  <span class="pf-v6-c-wizard__nav-link-toggle-icon">
3172
- <i class="fas fa-angle-right" aria-hidden="true"></i>
3592
+ <svg
3593
+ class="pf-v6-svg"
3594
+ viewBox="0 0 20 20"
3595
+ fill="currentColor"
3596
+ aria-hidden="true"
3597
+ role="img"
3598
+ width="1em"
3599
+ height="1em"
3600
+ >
3601
+ <path
3602
+ 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"
3603
+ />
3604
+ </svg>
3173
3605
  </span>
3174
3606
  </span>
3175
3607
  </span>
@@ -3393,6 +3825,327 @@ wrapperTag: div
3393
3825
 
3394
3826
  ```
3395
3827
 
3828
+ ### Plain
3829
+
3830
+ ```html isFullscreen
3831
+ <div class="pf-v6-c-wizard pf-m-plain">
3832
+ <div class="pf-v6-c-wizard__header">
3833
+ <div class="pf-v6-c-wizard__close">
3834
+ <button
3835
+ class="pf-v6-c-button pf-m-plain"
3836
+ type="button"
3837
+ aria-label="Close"
3838
+ >
3839
+ <span class="pf-v6-c-button__icon">
3840
+ <svg
3841
+ class="pf-v6-svg"
3842
+ viewBox="0 0 20 20"
3843
+ fill="currentColor"
3844
+ aria-hidden="true"
3845
+ role="img"
3846
+ width="1em"
3847
+ height="1em"
3848
+ >
3849
+ <path
3850
+ 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"
3851
+ />
3852
+ </svg>
3853
+ </span>
3854
+ </button>
3855
+ </div>
3856
+ <div class="pf-v6-c-wizard__title">
3857
+ <h1 class="pf-v6-c-wizard__title-text">Wizard title</h1>
3858
+ </div>
3859
+ <div class="pf-v6-c-wizard__description">Here is where the description goes</div>
3860
+ </div>
3861
+ <button
3862
+ aria-label="Wizard Header Toggle"
3863
+ class="pf-v6-c-wizard__toggle"
3864
+ aria-expanded="false"
3865
+ >
3866
+ <span class="pf-v6-c-wizard__toggle-list">
3867
+ <span class="pf-v6-c-wizard__toggle-list-item">
3868
+ <span class="pf-v6-c-wizard__toggle-num">2</span>
3869
+ Configuration
3870
+ <span class="pf-v6-c-wizard__toggle-separator">
3871
+ <svg
3872
+ class="pf-v6-svg"
3873
+ viewBox="0 0 20 20"
3874
+ fill="currentColor"
3875
+ aria-hidden="true"
3876
+ role="img"
3877
+ width="1em"
3878
+ height="1em"
3879
+ >
3880
+ <path
3881
+ 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"
3882
+ />
3883
+ </svg>
3884
+ </span>
3885
+ </span>
3886
+ <span class="pf-v6-c-wizard__toggle-list-item">Substep B</span>
3887
+ </span>
3888
+ <span class="pf-v6-c-wizard__toggle-icon">
3889
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
3890
+ </span>
3891
+ </button>
3892
+ <div class="pf-v6-c-wizard__outer-wrap">
3893
+ <div class="pf-v6-c-wizard__inner-wrap">
3894
+ <nav class="pf-v6-c-wizard__nav" aria-label="Steps">
3895
+ <ol class="pf-v6-c-wizard__nav-list" role="list">
3896
+ <li class="pf-v6-c-wizard__nav-item">
3897
+ <button class="pf-v6-c-wizard__nav-link" type="button">
3898
+ <span class="pf-v6-c-wizard__nav-link-main">
3899
+ <span class="pf-v6-c-wizard__nav-link-text">Information</span>
3900
+ </span>
3901
+ </button>
3902
+ </li>
3903
+ <li class="pf-v6-c-wizard__nav-item pf-m-expandable pf-m-expanded">
3904
+ <button
3905
+ class="pf-v6-c-wizard__nav-link pf-m-current"
3906
+ type="button"
3907
+ aria-expanded="true"
3908
+ >
3909
+ <span class="pf-v6-c-wizard__nav-link-main">
3910
+ <span class="pf-v6-c-wizard__nav-link-text">Configuration</span>
3911
+ <span class="pf-v6-c-wizard__nav-link-toggle">
3912
+ <span class="pf-v6-c-wizard__nav-link-toggle-icon">
3913
+ <svg
3914
+ class="pf-v6-svg"
3915
+ viewBox="0 0 20 20"
3916
+ fill="currentColor"
3917
+ aria-hidden="true"
3918
+ role="img"
3919
+ width="1em"
3920
+ height="1em"
3921
+ >
3922
+ <path
3923
+ 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"
3924
+ />
3925
+ </svg>
3926
+ </span>
3927
+ </span>
3928
+ </span>
3929
+ </button>
3930
+ <ol class="pf-v6-c-wizard__nav-list" role="list">
3931
+ <li class="pf-v6-c-wizard__nav-item">
3932
+ <button class="pf-v6-c-wizard__nav-link" type="button">
3933
+ <span class="pf-v6-c-wizard__nav-link-main">
3934
+ <span class="pf-v6-c-wizard__nav-link-text">Substep A</span>
3935
+ </span>
3936
+ </button>
3937
+ </li>
3938
+ <li class="pf-v6-c-wizard__nav-item">
3939
+ <button
3940
+ class="pf-v6-c-wizard__nav-link pf-m-current"
3941
+ type="button"
3942
+ aria-current="page"
3943
+ >
3944
+ <span class="pf-v6-c-wizard__nav-link-main">
3945
+ <span class="pf-v6-c-wizard__nav-link-text">Substep B</span>
3946
+ </span>
3947
+ </button>
3948
+ </li>
3949
+ <li class="pf-v6-c-wizard__nav-item">
3950
+ <button class="pf-v6-c-wizard__nav-link" type="button">
3951
+ <span class="pf-v6-c-wizard__nav-link-main">
3952
+ <span class="pf-v6-c-wizard__nav-link-text">Substep C</span>
3953
+ </span>
3954
+ </button>
3955
+ </li>
3956
+ </ol>
3957
+ </li>
3958
+ <li class="pf-v6-c-wizard__nav-item">
3959
+ <button class="pf-v6-c-wizard__nav-link" type="button">
3960
+ <span class="pf-v6-c-wizard__nav-link-main">
3961
+ <span class="pf-v6-c-wizard__nav-link-text">Additional</span>
3962
+ </span>
3963
+ </button>
3964
+ </li>
3965
+ <li class="pf-v6-c-wizard__nav-item">
3966
+ <button class="pf-v6-c-wizard__nav-link" type="button" disabled>
3967
+ <span class="pf-v6-c-wizard__nav-link-main">
3968
+ <span class="pf-v6-c-wizard__nav-link-text">Review</span>
3969
+ </span>
3970
+ </button>
3971
+ </li>
3972
+ </ol>
3973
+ </nav>
3974
+ <main class="pf-v6-c-wizard__main" tabindex="0">
3975
+ <div class="pf-v6-c-wizard__main-body">
3976
+ <form class="pf-v6-c-form pf-m-limit-width" novalidate>
3977
+ <div class="pf-v6-c-form__group">
3978
+ <div class="pf-v6-c-form__group-label"><label
3979
+ class="pf-v6-c-form__label"
3980
+ for="wizard-plain-header-form-field1"
3981
+ >
3982
+ <span class="pf-v6-c-form__label-text">Field 1</span>&nbsp;<span
3983
+ class="pf-v6-c-form__label-required"
3984
+ aria-hidden="true"
3985
+ >&#42;</span></label>
3986
+ </div>
3987
+ <div class="pf-v6-c-form__group-control">
3988
+ <span class="pf-v6-c-form-control">
3989
+ <input
3990
+ type="text"
3991
+ id="wizard-plain-header-form-field1"
3992
+ name="wizard-plain-header-form-field1"
3993
+ />
3994
+ </span>
3995
+ </div>
3996
+ </div>
3997
+ <div class="pf-v6-c-form__group">
3998
+ <div class="pf-v6-c-form__group-label"><label
3999
+ class="pf-v6-c-form__label"
4000
+ for="wizard-plain-header-form-field2"
4001
+ >
4002
+ <span class="pf-v6-c-form__label-text">Field 2</span>&nbsp;<span
4003
+ class="pf-v6-c-form__label-required"
4004
+ aria-hidden="true"
4005
+ >&#42;</span></label>
4006
+ </div>
4007
+ <div class="pf-v6-c-form__group-control">
4008
+ <span class="pf-v6-c-form-control">
4009
+ <input
4010
+ type="text"
4011
+ id="wizard-plain-header-form-field2"
4012
+ name="wizard-plain-header-form-field2"
4013
+ />
4014
+ </span>
4015
+ </div>
4016
+ </div>
4017
+ <div class="pf-v6-c-form__group">
4018
+ <div class="pf-v6-c-form__group-label"><label
4019
+ class="pf-v6-c-form__label"
4020
+ for="wizard-plain-header-form-field3"
4021
+ >
4022
+ <span class="pf-v6-c-form__label-text">Field 3</span>&nbsp;<span
4023
+ class="pf-v6-c-form__label-required"
4024
+ aria-hidden="true"
4025
+ >&#42;</span></label>
4026
+ </div>
4027
+ <div class="pf-v6-c-form__group-control">
4028
+ <span class="pf-v6-c-form-control">
4029
+ <input
4030
+ type="text"
4031
+ id="wizard-plain-header-form-field3"
4032
+ name="wizard-plain-header-form-field3"
4033
+ />
4034
+ </span>
4035
+ </div>
4036
+ </div>
4037
+ <div class="pf-v6-c-form__group">
4038
+ <div class="pf-v6-c-form__group-label"><label
4039
+ class="pf-v6-c-form__label"
4040
+ for="wizard-plain-header-form-field4"
4041
+ >
4042
+ <span class="pf-v6-c-form__label-text">Field 4</span>&nbsp;<span
4043
+ class="pf-v6-c-form__label-required"
4044
+ aria-hidden="true"
4045
+ >&#42;</span></label>
4046
+ </div>
4047
+ <div class="pf-v6-c-form__group-control">
4048
+ <span class="pf-v6-c-form-control">
4049
+ <input
4050
+ type="text"
4051
+ id="wizard-plain-header-form-field4"
4052
+ name="wizard-plain-header-form-field4"
4053
+ />
4054
+ </span>
4055
+ </div>
4056
+ </div>
4057
+ <div class="pf-v6-c-form__group">
4058
+ <div class="pf-v6-c-form__group-label"><label
4059
+ class="pf-v6-c-form__label"
4060
+ for="wizard-plain-header-form-field5"
4061
+ >
4062
+ <span class="pf-v6-c-form__label-text">Field 5</span>&nbsp;<span
4063
+ class="pf-v6-c-form__label-required"
4064
+ aria-hidden="true"
4065
+ >&#42;</span></label>
4066
+ </div>
4067
+ <div class="pf-v6-c-form__group-control">
4068
+ <span class="pf-v6-c-form-control">
4069
+ <input
4070
+ type="text"
4071
+ id="wizard-plain-header-form-field5"
4072
+ name="wizard-plain-header-form-field5"
4073
+ />
4074
+ </span>
4075
+ </div>
4076
+ </div>
4077
+ <div class="pf-v6-c-form__group">
4078
+ <div class="pf-v6-c-form__group-label"><label
4079
+ class="pf-v6-c-form__label"
4080
+ for="wizard-plain-header-form-field6"
4081
+ >
4082
+ <span class="pf-v6-c-form__label-text">Field 6</span>&nbsp;<span
4083
+ class="pf-v6-c-form__label-required"
4084
+ aria-hidden="true"
4085
+ >&#42;</span></label>
4086
+ </div>
4087
+ <div class="pf-v6-c-form__group-control">
4088
+ <span class="pf-v6-c-form-control">
4089
+ <input
4090
+ type="text"
4091
+ id="wizard-plain-header-form-field6"
4092
+ name="wizard-plain-header-form-field6"
4093
+ />
4094
+ </span>
4095
+ </div>
4096
+ </div>
4097
+ <div class="pf-v6-c-form__group">
4098
+ <div class="pf-v6-c-form__group-label"><label
4099
+ class="pf-v6-c-form__label"
4100
+ for="wizard-plain-header-form-field7"
4101
+ >
4102
+ <span class="pf-v6-c-form__label-text">Field 7</span>&nbsp;<span
4103
+ class="pf-v6-c-form__label-required"
4104
+ aria-hidden="true"
4105
+ >&#42;</span></label>
4106
+ </div>
4107
+ <div class="pf-v6-c-form__group-control">
4108
+ <span class="pf-v6-c-form-control">
4109
+ <input
4110
+ type="text"
4111
+ id="wizard-plain-header-form-field7"
4112
+ name="wizard-plain-header-form-field7"
4113
+ />
4114
+ </span>
4115
+ </div>
4116
+ </div>
4117
+ </form>
4118
+ </div>
4119
+ </main>
4120
+ </div>
4121
+ <footer class="pf-v6-c-wizard__footer">
4122
+ <div class="pf-v6-c-action-list">
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-secondary" type="button">
4126
+ <span class="pf-v6-c-button__text">Back</span>
4127
+ </button>
4128
+ </div>
4129
+ <div class="pf-v6-c-action-list__item">
4130
+ <button class="pf-v6-c-button pf-m-primary" type="button">
4131
+ <span class="pf-v6-c-button__text">Next</span>
4132
+ </button>
4133
+ </div>
4134
+ </div>
4135
+ <div class="pf-v6-c-action-list__group">
4136
+ <div class="pf-v6-c-action-list__item">
4137
+ <button class="pf-v6-c-button pf-m-link" type="button">
4138
+ <span class="pf-v6-c-button__text">Cancel</span>
4139
+ </button>
4140
+ </div>
4141
+ </div>
4142
+ </div>
4143
+ </footer>
4144
+ </div>
4145
+ </div>
4146
+
4147
+ ```
4148
+
3396
4149
  ## Documentation
3397
4150
 
3398
4151
  ### Accessibility
@@ -3445,6 +4198,8 @@ wrapperTag: div
3445
4198
  | `.pf-v6-c-wizard__footer-cancel` | `<div>` | Initiates the cancel button. **Required** |
3446
4199
  | `.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
4200
  | `.pf-m-finished` | `.pf-v6-c-wizard` | Modifies the wizard for the finished state. |
4201
+ | `.pf-m-plain` | `.pf-v6-c-wizard` | Modifies the wizard to have a transparent background. |
4202
+ | `.pf-m-no-plain-on-glass` | `.pf-v6-c-wizard` | Prevents the wizard from automatically applying plain styling when glass theme is enabled. |
3448
4203
  | `.pf-m-expandable` | `.pf-v6-c-wizard__nav-item` | Modifies a nav item for the expandable state. |
3449
4204
  | `.pf-m-expanded` | `.pf-v6-c-wizard__nav-item` | Modifies a nav item for the expanded state. |
3450
4205
  | `.pf-m-current` | `.pf-v6-c-wizard__nav-link` | Modifies a step link for the current state. **Required** |