@patternfly/patternfly 6.0.0-alpha.99 → 6.0.0-prerelease.2

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 (501) hide show
  1. package/README.md +1 -2
  2. package/assets/fontawesome/_animated.scss +1 -0
  3. package/assets/fontawesome/_bordered-pulled.scss +1 -0
  4. package/assets/fontawesome/_core.scss +2 -0
  5. package/assets/fontawesome/_fixed-width.scss +2 -0
  6. package/assets/fontawesome/_icons.scss +1 -0
  7. package/assets/fontawesome/_index.scss +12 -0
  8. package/assets/fontawesome/_larger.scss +4 -2
  9. package/assets/fontawesome/_list.scss +4 -2
  10. package/assets/fontawesome/_rotated-flipped.scss +2 -0
  11. package/assets/fontawesome/_screen-reader.scss +1 -0
  12. package/assets/fontawesome/_stacked.scss +3 -1
  13. package/assets/fontawesome/_variables.scss +3 -2
  14. package/assets/fontawesome/fontawesome.scss +12 -12
  15. package/assets/icons/iconUnicodes.json +6 -0
  16. package/assets/images/img_avatar-dark.svg +22 -16
  17. package/assets/images/img_avatar-light.svg +25 -18
  18. package/assets/images/pf-background.svg +21 -21
  19. package/assets/images/pf_logo.svg +11 -11
  20. package/assets/images/pf_logo_white.svg +16 -17
  21. package/assets/pficon/pf-v6-pficon.woff2 +0 -0
  22. package/assets/pficon/pficon.scss +310 -271
  23. package/base/_index.scss +10 -0
  24. package/base/{_globals.scss → normalize.scss} +15 -48
  25. package/base/patternfly-common.css +14 -0
  26. package/base/patternfly-common.scss +68 -2
  27. package/base/patternfly-fa-icons.css +1 -1
  28. package/base/patternfly-fa-icons.scss +35 -2
  29. package/base/patternfly-fonts.css +10 -80
  30. package/base/patternfly-fonts.scss +49 -2
  31. package/base/patternfly-pf-icons.css +158 -134
  32. package/base/patternfly-pf-icons.scss +1 -2
  33. package/base/patternfly-svg-icons.css +5 -0
  34. package/base/{_svg-icons.scss → patternfly-svg-icons.scss} +2 -0
  35. package/base/patternfly-variables.css +1082 -1206
  36. package/base/patternfly-variables.scss +20 -2
  37. package/base/reset.scss +33 -0
  38. package/base/tokens/_index.scss +6 -0
  39. package/base/tokens/tokens-charts-dark.scss +173 -0
  40. package/base/tokens/{_tokens-charts.scss → tokens-charts.scss} +162 -148
  41. package/base/tokens/{_tokens-dark.scss → tokens-dark.scss} +307 -294
  42. package/base/tokens/{_tokens-default.scss → tokens-default.scss} +574 -447
  43. package/base/tokens/{_tokens-font.scss → tokens-local.scss} +13 -34
  44. package/base/tokens/{_tokens-palette.scss → tokens-palette.scss} +69 -70
  45. package/components/AboutModalBox/about-modal-box.css +86 -81
  46. package/components/AboutModalBox/about-modal-box.scss +80 -82
  47. package/components/Accordion/accordion.css +44 -43
  48. package/components/Accordion/accordion.scss +52 -52
  49. package/components/ActionList/action-list.css +6 -5
  50. package/components/ActionList/action-list.scss +7 -5
  51. package/components/Alert/alert-group.css +72 -19
  52. package/components/Alert/alert-group.scss +105 -18
  53. package/components/Alert/alert.css +52 -59
  54. package/components/Alert/alert.scss +56 -65
  55. package/components/Avatar/avatar.css +42 -41
  56. package/components/Avatar/avatar.scss +8 -7
  57. package/components/BackToTop/back-to-top.css +19 -17
  58. package/components/BackToTop/back-to-top.scss +17 -17
  59. package/components/Backdrop/backdrop.css +1 -1
  60. package/components/Backdrop/backdrop.scss +3 -4
  61. package/components/BackgroundImage/background-image.scss +3 -4
  62. package/components/Badge/badge.css +29 -7
  63. package/components/Badge/badge.scss +33 -9
  64. package/components/Banner/banner.css +30 -37
  65. package/components/Banner/banner.scss +30 -43
  66. package/components/Brand/brand.css +14 -10
  67. package/components/Brand/brand.scss +8 -5
  68. package/components/Breadcrumb/breadcrumb.css +23 -24
  69. package/components/Breadcrumb/breadcrumb.scss +25 -28
  70. package/components/Button/button.css +150 -128
  71. package/components/Button/button.scss +155 -130
  72. package/components/CalendarMonth/calendar-month.css +46 -46
  73. package/components/CalendarMonth/calendar-month.scss +49 -50
  74. package/components/Card/card.css +110 -93
  75. package/components/Card/card.scss +118 -92
  76. package/components/Check/check.css +5 -5
  77. package/components/Check/check.scss +7 -8
  78. package/components/ClipboardCopy/clipboard-copy.css +33 -41
  79. package/components/ClipboardCopy/clipboard-copy.scss +35 -44
  80. package/components/CodeBlock/code-block.css +21 -20
  81. package/components/CodeBlock/code-block.scss +21 -21
  82. package/components/CodeEditor/code-editor.css +35 -34
  83. package/components/CodeEditor/code-editor.scss +35 -35
  84. package/components/Content/content.css +167 -153
  85. package/components/Content/content.scss +204 -145
  86. package/components/DataList/data-list-grid.css +117 -117
  87. package/components/DataList/data-list-grid.scss +22 -20
  88. package/components/DataList/data-list.css +308 -312
  89. package/components/DataList/data-list.scss +145 -152
  90. package/components/DatePicker/date-picker.css +17 -17
  91. package/components/DatePicker/date-picker.scss +17 -18
  92. package/components/DescriptionList/description-list-order.css +5 -5
  93. package/components/DescriptionList/description-list-order.scss +3 -1
  94. package/components/DescriptionList/description-list.css +46 -44
  95. package/components/DescriptionList/description-list.scss +26 -31
  96. package/components/Divider/divider.css +104 -107
  97. package/components/Divider/divider.scss +19 -19
  98. package/components/DragDrop/drag-drop.css +4 -2
  99. package/components/DragDrop/drag-drop.scss +3 -3
  100. package/components/Drawer/drawer.css +115 -114
  101. package/components/Drawer/drawer.scss +136 -134
  102. package/components/DualListSelector/dual-list-selector.css +64 -61
  103. package/components/DualListSelector/dual-list-selector.scss +54 -51
  104. package/components/EmptyState/empty-state.css +38 -37
  105. package/components/EmptyState/empty-state.scss +39 -39
  106. package/components/ExpandableSection/expandable-section.css +27 -86
  107. package/components/ExpandableSection/expandable-section.scss +32 -101
  108. package/components/FileUpload/file-upload.css +2 -2
  109. package/components/FileUpload/file-upload.scss +2 -3
  110. package/components/Form/form.css +173 -115
  111. package/components/Form/form.scss +117 -103
  112. package/components/FormControl/form-control.css +57 -57
  113. package/components/FormControl/form-control.scss +69 -67
  114. package/components/HelperText/helper-text.css +5 -4
  115. package/components/HelperText/helper-text.scss +8 -6
  116. package/components/Hint/hint.css +25 -25
  117. package/components/Hint/hint.scss +25 -27
  118. package/components/Icon/icon.css +10 -10
  119. package/components/Icon/icon.scss +11 -12
  120. package/components/InlineEdit/inline-edit.css +12 -12
  121. package/components/InlineEdit/inline-edit.scss +12 -13
  122. package/components/InputGroup/input-group.css +16 -16
  123. package/components/InputGroup/input-group.scss +18 -19
  124. package/components/JumpLinks/jump-links.css +80 -96
  125. package/components/JumpLinks/jump-links.scss +80 -100
  126. package/components/Label/label-group.css +28 -28
  127. package/components/Label/label-group.scss +29 -30
  128. package/components/Label/label.css +102 -87
  129. package/components/Label/label.scss +113 -94
  130. package/components/List/list.css +44 -47
  131. package/components/List/list.scss +51 -58
  132. package/components/Login/login.css +122 -118
  133. package/components/Login/login.scss +105 -112
  134. package/components/Masthead/masthead.css +273 -175
  135. package/components/Masthead/masthead.scss +102 -68
  136. package/components/Menu/menu.css +151 -95
  137. package/components/Menu/menu.scss +59 -40
  138. package/components/MenuToggle/menu-toggle.css +129 -108
  139. package/components/MenuToggle/menu-toggle.scss +150 -128
  140. package/components/ModalBox/modal-box.css +53 -45
  141. package/components/ModalBox/modal-box.scss +52 -46
  142. package/components/MultipleFileUpload/multiple-file-upload.css +37 -37
  143. package/components/MultipleFileUpload/multiple-file-upload.scss +38 -39
  144. package/components/Nav/nav.css +33 -9
  145. package/components/Nav/nav.scss +46 -13
  146. package/components/NotificationDrawer/notification-drawer.css +50 -51
  147. package/components/NotificationDrawer/notification-drawer.scss +58 -57
  148. package/components/NumberInput/number-input.css +7 -11
  149. package/components/NumberInput/number-input.scss +5 -7
  150. package/components/OverflowMenu/overflow-menu.css +2 -1
  151. package/components/OverflowMenu/overflow-menu.scss +3 -1
  152. package/components/Page/page.css +175 -519
  153. package/components/Page/page.scss +155 -386
  154. package/components/Pagination/pagination.css +82 -79
  155. package/components/Pagination/pagination.scss +43 -40
  156. package/components/Panel/panel.css +33 -30
  157. package/components/Panel/panel.scss +35 -33
  158. package/components/Popover/popover.css +54 -52
  159. package/components/Popover/popover.scss +55 -54
  160. package/components/Progress/progress.css +8 -4
  161. package/components/Progress/progress.scss +14 -11
  162. package/components/ProgressStepper/progress-stepper.css +246 -245
  163. package/components/ProgressStepper/progress-stepper.scss +118 -118
  164. package/components/Radio/radio.css +7 -7
  165. package/components/Radio/radio.scss +9 -10
  166. package/components/Sidebar/sidebar.css +139 -139
  167. package/components/Sidebar/sidebar.scss +61 -61
  168. package/components/SimpleList/simple-list.css +21 -20
  169. package/components/SimpleList/simple-list.scss +22 -23
  170. package/components/Skeleton/skeleton.css +4 -4
  171. package/components/Skeleton/skeleton.scss +7 -8
  172. package/components/SkipToContent/skip-to-content.css +7 -6
  173. package/components/SkipToContent/skip-to-content.scss +7 -7
  174. package/components/Slider/slider.css +31 -31
  175. package/components/Slider/slider.scss +54 -55
  176. package/components/Spinner/spinner.scss +4 -5
  177. package/components/Switch/switch.css +4 -10
  178. package/components/Switch/switch.scss +8 -17
  179. package/components/TabContent/tab-content.css +25 -25
  180. package/components/TabContent/tab-content.scss +28 -28
  181. package/components/Table/table-grid.css +434 -508
  182. package/components/Table/table-grid.scss +131 -150
  183. package/components/Table/table-scrollable.css +31 -34
  184. package/components/Table/table-scrollable.scss +44 -41
  185. package/components/Table/table-tree-view.css +287 -279
  186. package/components/Table/table-tree-view.scss +84 -84
  187. package/components/Table/table.css +316 -279
  188. package/components/Table/table.scss +346 -301
  189. package/components/Tabs/tabs.css +215 -240
  190. package/components/Tabs/tabs.scss +130 -162
  191. package/components/TextInputGroup/text-input-group.css +122 -64
  192. package/components/TextInputGroup/text-input-group.scss +144 -87
  193. package/components/Tile/tile.css +15 -15
  194. package/components/Tile/tile.scss +16 -17
  195. package/components/Timestamp/timestamp.css +13 -19
  196. package/components/Timestamp/timestamp.scss +16 -22
  197. package/components/Title/title.css +14 -13
  198. package/components/Title/title.scss +15 -15
  199. package/components/ToggleGroup/toggle-group.css +37 -37
  200. package/components/ToggleGroup/toggle-group.scss +38 -41
  201. package/components/Toolbar/toolbar.css +547 -1431
  202. package/components/Toolbar/toolbar.scss +159 -123
  203. package/components/Tooltip/tooltip.css +28 -27
  204. package/components/Tooltip/tooltip.scss +31 -30
  205. package/components/TreeView/tree-view.css +184 -184
  206. package/components/TreeView/tree-view.scss +133 -133
  207. package/components/Truncate/truncate.css +2 -2
  208. package/components/Truncate/truncate.scss +7 -8
  209. package/components/Wizard/wizard.css +190 -154
  210. package/components/Wizard/wizard.scss +211 -165
  211. package/components/_index.css +22378 -0
  212. package/components/_index.scss +82 -0
  213. package/docs/components/AboutModalBox/examples/AboutModalBox.md +3 -1
  214. package/docs/components/Accordion/examples/Accordion.md +1 -1
  215. package/docs/components/ActionList/examples/ActionList.md +64 -24
  216. package/docs/components/Alert/examples/Alert.md +116 -74
  217. package/docs/components/BackToTop/examples/BackToTop.md +1 -1
  218. package/docs/components/Badge/examples/Badge.md +6 -16
  219. package/docs/components/Banner/examples/Banner.md +16 -10
  220. package/docs/components/Brand/examples/Brand.md +2 -2
  221. package/docs/components/Breadcrumb/examples/Breadcrumb.md +19 -59
  222. package/docs/components/Button/examples/Button.md +537 -368
  223. package/docs/components/CalendarMonth/examples/CalendarMonth.md +24 -8
  224. package/docs/components/Card/examples/Card.md +372 -658
  225. package/docs/components/Check/examples/Check.md +10 -15
  226. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +92 -47
  227. package/docs/components/CodeBlock/examples/CodeBlock.md +51 -28
  228. package/docs/components/CodeEditor/examples/CodeEditor.md +41 -22
  229. package/docs/components/Content/examples/Content.md +600 -60
  230. package/docs/components/DataList/examples/DataList.md +291 -1028
  231. package/docs/components/DatePicker/examples/DatePicker.md +18 -6
  232. package/docs/components/DescriptionList/examples/DescriptionList.md +80 -55
  233. package/docs/components/Drawer/examples/Drawer.md +60 -21
  234. package/docs/components/DualListSelector/examples/DualListSelector.md +364 -996
  235. package/docs/components/EmptyState/examples/EmptyState.md +123 -53
  236. package/docs/components/ExpandableSection/examples/ExpandableSection.md +96 -91
  237. package/docs/components/FileUpload/examples/FileUpload.md +42 -14
  238. package/docs/components/Form/examples/Form.md +100 -26
  239. package/docs/components/Hint/examples/Hint.md +54 -164
  240. package/docs/components/InlineEdit/examples/InlineEdit.md +132 -45
  241. package/docs/components/InputGroup/examples/InputGroup.md +38 -62
  242. package/docs/components/JumpLinks/examples/JumpLinks.md +189 -72
  243. package/docs/components/Label/examples/Label.md +2577 -406
  244. package/docs/components/Login/examples/Login.md +372 -334
  245. package/docs/components/Masthead/examples/masthead.md +515 -484
  246. package/docs/components/Menu/examples/Menu.md +77 -138
  247. package/docs/components/MenuToggle/examples/MenuToggle.md +289 -39
  248. package/docs/components/ModalBox/examples/ModalBox.md +158 -100
  249. package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +137 -97
  250. package/docs/components/Nav/examples/Navigation.css +2 -7
  251. package/docs/components/Nav/examples/Navigation.md +337 -270
  252. package/docs/components/NotificationDrawer/examples/NotificationDrawer.md +515 -2076
  253. package/docs/components/NumberInput/examples/NumberInput.md +96 -48
  254. package/docs/components/OverflowMenu/examples/overflow-menu.css +4 -28
  255. package/docs/components/OverflowMenu/examples/overflow-menu.md +104 -159
  256. package/docs/components/Page/examples/Page.css +5 -9
  257. package/docs/components/Page/examples/Page.md +254 -181
  258. package/docs/components/Pagination/examples/Pagination.md +336 -756
  259. package/docs/components/Panel/examples/Panel.md +3 -2
  260. package/docs/components/Popover/examples/Popover.md +60 -15
  261. package/docs/components/ProgressStepper/examples/ProgressStepper.md +15 -15
  262. package/docs/components/Sidebar/examples/Sidebar.css +4 -2
  263. package/docs/components/Sidebar/examples/Sidebar.md +3 -3
  264. package/docs/components/Skeleton/examples/Skeleton.css +1 -1
  265. package/docs/components/SkipToContent/examples/SkipToContent.md +3 -1
  266. package/docs/components/Slider/examples/Slider.md +53 -45
  267. package/docs/components/Spinner/examples/Spinner.md +1 -1
  268. package/docs/components/Switch/examples/Switch.md +33 -148
  269. package/docs/components/Table/examples/Table.css +11 -6
  270. package/docs/components/Table/examples/Table.md +5302 -2464
  271. package/docs/components/Tabs/examples/Tabs.md +1267 -607
  272. package/docs/components/TextInputGroup/examples/TextInputGroup.css +8 -3
  273. package/docs/components/TextInputGroup/examples/TextInputGroup.md +469 -278
  274. package/docs/components/Tile/examples/Tile.css +5 -5
  275. package/docs/components/Timestamp/examples/Timestamp.md +7 -1
  276. package/docs/components/ToggleGroup/examples/toggle-group.md +1 -3
  277. package/docs/components/Toolbar/examples/Toolbar.css +50 -39
  278. package/docs/components/Toolbar/examples/Toolbar.md +1562 -1200
  279. package/docs/components/Tooltip/examples/Tooltip.css +1 -1
  280. package/docs/components/TreeView/examples/TreeView.md +627 -49
  281. package/docs/components/Truncate/examples/Truncate.css +1 -2
  282. package/docs/components/Wizard/examples/Wizard.md +1595 -126
  283. package/docs/demos/AboutModal/examples/AboutModal.md +191 -198
  284. package/docs/demos/Alert/examples/Alert.md +924 -909
  285. package/docs/demos/BackToTop/examples/BackToTop.md +318 -327
  286. package/docs/demos/Banner/examples/Banner.md +641 -659
  287. package/docs/demos/Button/examples/Button.md +8 -8
  288. package/docs/demos/Card/examples/Card.css +6 -6
  289. package/docs/demos/Card/examples/Card.md +419 -606
  290. package/docs/demos/CardView/examples/CardView.md +822 -1435
  291. package/docs/demos/Dashboard/examples/Dashboard.md +1308 -1442
  292. package/docs/demos/DataList/examples/DataList.md +3210 -3424
  293. package/docs/demos/DescriptionList/examples/DescriptionList.md +899 -937
  294. package/docs/demos/Drawer/examples/Drawer.md +1165 -1176
  295. package/docs/demos/Form/examples/BasicForms.md +153 -88
  296. package/docs/demos/JumpLinks/examples/JumpLinks.md +1710 -1602
  297. package/docs/demos/Masthead/examples/Masthead.md +1719 -1583
  298. package/docs/demos/Modal/examples/Modal.md +1231 -1235
  299. package/docs/demos/Nav/examples/Nav.md +1216 -1230
  300. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +1910 -4577
  301. package/docs/demos/Page/examples/Page.css +11 -0
  302. package/docs/demos/Page/examples/Page.md +3753 -2540
  303. package/docs/demos/Panel/Panel.md +88 -0
  304. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +9 -3
  305. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +16 -48
  306. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +5150 -6255
  307. package/docs/demos/Skeleton/examples/Skeleton.md +297 -304
  308. package/docs/demos/Table/examples/Table.md +14272 -15154
  309. package/docs/demos/Tabs/examples/Tabs.md +2821 -2891
  310. package/docs/demos/Toolbar/examples/Toolbar.css +10 -18
  311. package/docs/demos/Toolbar/examples/Toolbar.md +2487 -2663
  312. package/docs/demos/Wizard/examples/Wizard.md +3021 -2784
  313. package/docs/layouts/Bullseye/examples/Bullseye.css +4 -4
  314. package/docs/layouts/Flex/examples/Flex.css +4 -4
  315. package/docs/layouts/Flex/examples/Flex.md +50 -50
  316. package/docs/layouts/Gallery/examples/Gallery.css +4 -4
  317. package/docs/layouts/Gallery/examples/Gallery.md +6 -6
  318. package/docs/layouts/Grid/examples/Grid.css +3 -3
  319. package/docs/layouts/Grid/examples/Grid.md +33 -33
  320. package/docs/layouts/Level/examples/Level.css +5 -5
  321. package/docs/layouts/Split/examples/Split.css +4 -4
  322. package/docs/layouts/Stack/examples/Stack.css +5 -5
  323. package/docs/utilities/Accessibility/examples/Accessibility.md +2 -2
  324. package/docs/utilities/Alignment/examples/Alignment.css +6 -6
  325. package/docs/utilities/Alignment/examples/Alignment.md +5 -5
  326. package/docs/utilities/BackgroundColor/examples/BackgroundColor.md +7 -67
  327. package/docs/utilities/BoxShadow/examples/box-shadow.css +11 -11
  328. package/docs/utilities/BoxShadow/examples/box-shadow.md +15 -38
  329. package/docs/utilities/Display/examples/Display.css +3 -10
  330. package/docs/utilities/Display/examples/Display.md +21 -12
  331. package/docs/utilities/Flex/examples/Flex.css +7 -7
  332. package/docs/utilities/Flex/examples/Flex.md +82 -40
  333. package/docs/utilities/Float/examples/Float.css +5 -5
  334. package/docs/utilities/Float/examples/Float.md +6 -6
  335. package/docs/utilities/Sizing/examples/Sizing.css +6 -6
  336. package/docs/utilities/Sizing/examples/Sizing.md +60 -60
  337. package/docs/utilities/Spacing/examples/Spacing.css +3 -3
  338. package/docs/utilities/Spacing/examples/Spacing.md +37 -37
  339. package/docs/utilities/Text/examples/Text.md +78 -77
  340. package/icons/pficons.mjs +6 -0
  341. package/layouts/Bullseye/bullseye.css +4 -0
  342. package/layouts/Bullseye/bullseye.scss +5 -1
  343. package/layouts/Flex/flex.css +241 -237
  344. package/layouts/Flex/flex.scss +48 -44
  345. package/layouts/Gallery/gallery.css +15 -11
  346. package/layouts/Gallery/gallery.scss +9 -5
  347. package/layouts/Grid/grid.css +20 -16
  348. package/layouts/Grid/grid.scss +12 -8
  349. package/layouts/Level/level.css +5 -1
  350. package/layouts/Level/level.scss +6 -2
  351. package/layouts/Split/split.css +5 -1
  352. package/layouts/Split/split.scss +6 -2
  353. package/layouts/Stack/stack.css +5 -1
  354. package/layouts/Stack/stack.scss +6 -2
  355. package/layouts/_index.css +3461 -0
  356. package/layouts/_index.scss +8 -0
  357. package/package.json +39 -39
  358. package/patternfly-addons.css +2071 -2648
  359. package/patternfly-addons.scss +2 -12
  360. package/patternfly-base-no-globals.css +1429 -1645
  361. package/patternfly-base-no-globals.scss +5 -3
  362. package/patternfly-base.css +1511 -1723
  363. package/patternfly-base.scss +2 -6
  364. package/patternfly-charts.css +579 -240
  365. package/patternfly-charts.scss +352 -337
  366. package/patternfly-no-globals.css +19895 -23410
  367. package/patternfly-no-globals.scss +5 -4
  368. package/patternfly.css +19999 -23510
  369. package/patternfly.min.css +1 -1
  370. package/patternfly.min.css.map +1 -1
  371. package/patternfly.scss +3 -4
  372. package/sass-utilities/_index.scss +6 -0
  373. package/sass-utilities/functions.scss +25 -25
  374. package/sass-utilities/{_init.scss → init.scss} +6 -6
  375. package/sass-utilities/mixins.scss +108 -72
  376. package/sass-utilities/{component-namespaces.scss → namespaces-components.scss} +3 -27
  377. package/sass-utilities/{layout-namespaces.scss → namespaces-layouts.scss} +3 -1
  378. package/sass-utilities/scss-variables.scss +49 -261
  379. package/utilities/Accessibility/accessibility.css +15 -15
  380. package/utilities/Accessibility/accessibility.scss +8 -6
  381. package/utilities/Alignment/alignment.css +29 -29
  382. package/utilities/Alignment/alignment.scss +6 -4
  383. package/utilities/BackgroundColor/background-color.css +67 -0
  384. package/utilities/BackgroundColor/background-color.scss +16 -0
  385. package/utilities/BoxShadow/box-shadow.css +15 -39
  386. package/utilities/BoxShadow/box-shadow.scss +19 -28
  387. package/utilities/Display/display.css +43 -5
  388. package/utilities/Display/display.scss +7 -4
  389. package/utilities/Flex/flex.css +50 -50
  390. package/utilities/Flex/flex.scss +21 -20
  391. package/utilities/Float/float.css +29 -29
  392. package/utilities/Float/float.scss +6 -6
  393. package/utilities/Sizing/sizing.css +58 -58
  394. package/utilities/Sizing/sizing.scss +23 -21
  395. package/utilities/Spacing/spacing.css +1372 -1372
  396. package/utilities/Spacing/spacing.scss +6 -6
  397. package/utilities/Text/text.css +419 -662
  398. package/utilities/Text/text.scss +81 -107
  399. package/utilities/_index.css +7815 -0
  400. package/utilities/_index.scss +10 -0
  401. package/assets/images/pf-logo-small.svg +0 -23
  402. package/assets/images/pf_logo_white.hbs +0 -35
  403. package/assets/images/pfbg-icon.svg +0 -1
  404. package/assets/pficon/pf-v5-pficon.woff2 +0 -0
  405. package/base/_base.scss +0 -2
  406. package/base/_chart-globals.scss +0 -415
  407. package/base/_common.scss +0 -50
  408. package/base/_fa-icons.scss +0 -33
  409. package/base/_fonts.scss +0 -136
  410. package/base/_icons.scss +0 -3
  411. package/base/_pficons.scss +0 -2
  412. package/base/_themes.scss +0 -43
  413. package/base/_variables.scss +0 -299
  414. package/base/patternfly-globals.css +0 -120
  415. package/base/patternfly-globals.scss +0 -2
  416. package/base/patternfly-icons.css +0 -4728
  417. package/base/patternfly-icons.scss +0 -2
  418. package/base/patternfly-themes.css +0 -82
  419. package/base/patternfly-themes.scss +0 -2
  420. package/base/themes/dark/_chart-globals.scss +0 -42
  421. package/base/themes/dark/_globals.scss +0 -5
  422. package/base/tokens/_workspace-overrides.scss +0 -7
  423. package/components/AppLauncher/app-launcher.css +0 -244
  424. package/components/AppLauncher/app-launcher.scss +0 -308
  425. package/components/AppLauncher/themes/dark/app-launcher.scss +0 -13
  426. package/components/Chip/chip-group.css +0 -93
  427. package/components/Chip/chip-group.scss +0 -98
  428. package/components/Chip/chip.css +0 -122
  429. package/components/Chip/chip.scss +0 -140
  430. package/components/Chip/themes/dark/chip.scss +0 -9
  431. package/components/ContextSelector/context-selector.css +0 -336
  432. package/components/ContextSelector/context-selector.scss +0 -384
  433. package/components/ContextSelector/themes/dark/context-selector.scss +0 -24
  434. package/components/Dropdown/dropdown.css +0 -686
  435. package/components/Dropdown/dropdown.scss +0 -820
  436. package/components/Dropdown/themes/dark/dropdown.scss +0 -32
  437. package/components/LogViewer/log-viewer.css +0 -197
  438. package/components/LogViewer/log-viewer.scss +0 -226
  439. package/components/LogViewer/themes/dark/log-viewer.scss +0 -7
  440. package/components/NotificationBadge/notification-badge.css +0 -87
  441. package/components/NotificationBadge/notification-badge.scss +0 -108
  442. package/components/OptionsMenu/options-menu.css +0 -279
  443. package/components/OptionsMenu/options-menu.scss +0 -332
  444. package/components/OptionsMenu/themes/dark/options-menu.scss +0 -21
  445. package/components/Select/select.css +0 -599
  446. package/components/Select/select.scss +0 -713
  447. package/components/Select/themes/dark/select.scss +0 -23
  448. package/components/_all.scss +0 -91
  449. package/docs/components/AppLauncher/deprecated/application-launcher.css +0 -25
  450. package/docs/components/AppLauncher/deprecated/application-launcher.md +0 -792
  451. package/docs/components/Breadcrumb/examples/Breadcrumb.css +0 -3
  452. package/docs/components/Chip/examples/Chip.md +0 -846
  453. package/docs/components/ContextSelector/deprecated/context-selector.css +0 -7
  454. package/docs/components/ContextSelector/deprecated/context-selector.md +0 -909
  455. package/docs/components/Dropdown/deprecated/Dropdown.css +0 -64
  456. package/docs/components/Dropdown/deprecated/Dropdown.md +0 -2920
  457. package/docs/components/LogViewer/examples/LogViewer.css +0 -17
  458. package/docs/components/LogViewer/examples/LogViewer.md +0 -5936
  459. package/docs/components/NotificationBadge/examples/NotificationBadge.md +0 -222
  460. package/docs/components/OptionsMenu/deprecated/options-menu.css +0 -25
  461. package/docs/components/OptionsMenu/deprecated/options-menu.md +0 -1014
  462. package/docs/components/Page/deprecated/PageHeader.css +0 -17
  463. package/docs/components/Page/deprecated/PageHeader.md +0 -261
  464. package/docs/components/Pagination/examples/Pagination.css +0 -3
  465. package/docs/components/Select/deprecated/Select.css +0 -56
  466. package/docs/components/Select/deprecated/Select.md +0 -3525
  467. package/docs/components/Tabs/examples/Tabs.css +0 -10
  468. package/docs/components/ToggleGroup/examples/toggle-group.css +0 -4
  469. package/docs/demos/ContextSelector/examples/ContextSelector.md +0 -1712
  470. package/docs/demos/Page/examples/Penta.md +0 -821
  471. package/docs/utilities/Text/examples/Text.css +0 -0
  472. package/layouts/_all.scss +0 -7
  473. package/patternfly-base-no-globals-theme-dark-unversioned.css +0 -6276
  474. package/patternfly-base-no-globals-theme-dark-unversioned.scss +0 -11
  475. package/patternfly-base-theme-dark-unversioned.css +0 -6393
  476. package/patternfly-base-theme-dark-unversioned.scss +0 -5
  477. package/patternfly-charts-theme-dark-unversioned.css +0 -70
  478. package/patternfly-charts-theme-dark-unversioned.scss +0 -8
  479. package/patternfly-charts-theme-dark.css +0 -70
  480. package/patternfly-charts-theme-dark.scss +0 -8
  481. package/patternfly-theme-dark-unversioned.css +0 -35533
  482. package/patternfly-theme-dark-unversioned.scss +0 -6
  483. package/patternfly-theme-dark.css +0 -0
  484. package/patternfly-theme-dark.scss +0 -1
  485. package/sass-utilities/_all.scss +0 -9
  486. package/sass-utilities/colors.scss +0 -82
  487. package/sass-utilities/div.import.scss +0 -3
  488. package/sass-utilities/div.scss +0 -4
  489. package/sass-utilities/placeholders.scss +0 -72
  490. package/sass-utilities/themes/dark/_all.scss +0 -4
  491. package/sass-utilities/themes/dark/colors.scss +0 -16
  492. package/sass-utilities/themes/dark/mixins.scss +0 -7
  493. package/sass-utilities/themes/dark/placeholders.scss +0 -5
  494. package/sass-utilities/themes/dark/scss-variables.scss +0 -92
  495. package/themes/dark/_patternfly-charts-theme-dark.scss +0 -98
  496. package/utilities/BackgroundColor/BackgroundColor.css +0 -414
  497. package/utilities/BackgroundColor/BackgroundColor.scss +0 -64
  498. package/utilities/BackgroundColor/themes/dark/BackgroundColor.css +0 -0
  499. package/utilities/BackgroundColor/themes/dark/BackgroundColor.scss +0 -25
  500. package/utilities/Text/themes/dark/text.css +0 -0
  501. package/utilities/Text/themes/dark/text.scss +0 -33
package/docs/components/Wizard/examples/Wizard.md CHANGED
@@ -18,7 +18,9 @@ wrapperTag: div
18
18
  type="button"
19
19
  aria-label="Close"
20
20
  >
21
- <i class="fas fa-times" aria-hidden="true"></i>
21
+ <span class="pf-v6-c-button__icon">
22
+ <i class="fas fa-times" aria-hidden="true"></i>
23
+ </span>
22
24
  </button>
23
25
  </div>
24
26
  <div class="pf-v6-c-wizard__title">
@@ -51,7 +53,11 @@ wrapperTag: div
51
53
  <nav class="pf-v6-c-wizard__nav" aria-label="Steps">
52
54
  <ol class="pf-v6-c-wizard__nav-list" role="list">
53
55
  <li class="pf-v6-c-wizard__nav-item">
54
- <button class="pf-v6-c-wizard__nav-link" type="button">Information</button>
56
+ <button class="pf-v6-c-wizard__nav-link" type="button">
57
+ <span class="pf-v6-c-wizard__nav-link-main">
58
+ <span class="pf-v6-c-wizard__nav-link-text">Information</span>
59
+ </span>
60
+ </button>
55
61
  </li>
56
62
  <li class="pf-v6-c-wizard__nav-item pf-m-expandable pf-m-expanded">
57
63
  <button
@@ -59,38 +65,56 @@ wrapperTag: div
59
65
  type="button"
60
66
  aria-expanded="true"
61
67
  >
62
- <span class="pf-v6-c-wizard__nav-link-text">Configuration</span>
63
- <span class="pf-v6-c-wizard__nav-link-toggle">
64
- <span class="pf-v6-c-wizard__nav-link-toggle-icon">
65
- <i class="fas fa-angle-right" aria-hidden="true"></i>
68
+ <span class="pf-v6-c-wizard__nav-link-main">
69
+ <span class="pf-v6-c-wizard__nav-link-text">Configuration</span>
70
+ <span class="pf-v6-c-wizard__nav-link-toggle">
71
+ <span class="pf-v6-c-wizard__nav-link-toggle-icon">
72
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
73
+ </span>
66
74
  </span>
67
75
  </span>
68
76
  </button>
69
77
  <ol class="pf-v6-c-wizard__nav-list" role="list">
70
78
  <li class="pf-v6-c-wizard__nav-item">
71
- <button class="pf-v6-c-wizard__nav-link" type="button">Substep A</button>
79
+ <button class="pf-v6-c-wizard__nav-link" type="button">
80
+ <span class="pf-v6-c-wizard__nav-link-main">
81
+ <span class="pf-v6-c-wizard__nav-link-text">Substep A</span>
82
+ </span>
83
+ </button>
72
84
  </li>
73
85
  <li class="pf-v6-c-wizard__nav-item">
74
86
  <button
75
87
  class="pf-v6-c-wizard__nav-link pf-m-current"
76
88
  type="button"
77
89
  aria-current="page"
78
- >Substep B</button>
90
+ >
91
+ <span class="pf-v6-c-wizard__nav-link-main">
92
+ <span class="pf-v6-c-wizard__nav-link-text">Substep B</span>
93
+ </span>
94
+ </button>
79
95
  </li>
80
96
  <li class="pf-v6-c-wizard__nav-item">
81
- <button class="pf-v6-c-wizard__nav-link" type="button">Substep C</button>
97
+ <button class="pf-v6-c-wizard__nav-link" type="button">
98
+ <span class="pf-v6-c-wizard__nav-link-main">
99
+ <span class="pf-v6-c-wizard__nav-link-text">Substep C</span>
100
+ </span>
101
+ </button>
82
102
  </li>
83
103
  </ol>
84
104
  </li>
85
105
  <li class="pf-v6-c-wizard__nav-item">
86
- <button class="pf-v6-c-wizard__nav-link" type="button">Additional</button>
106
+ <button class="pf-v6-c-wizard__nav-link" type="button">
107
+ <span class="pf-v6-c-wizard__nav-link-main">
108
+ <span class="pf-v6-c-wizard__nav-link-text">Additional</span>
109
+ </span>
110
+ </button>
87
111
  </li>
88
112
  <li class="pf-v6-c-wizard__nav-item">
89
- <button
90
- class="pf-v6-c-wizard__nav-link"
91
- type="button"
92
- disabled
93
- >Review</button>
113
+ <button class="pf-v6-c-wizard__nav-link" type="button" disabled>
114
+ <span class="pf-v6-c-wizard__nav-link-main">
115
+ <span class="pf-v6-c-wizard__nav-link-text">Review</span>
116
+ </span>
117
+ </button>
94
118
  </li>
95
119
  </ol>
96
120
  </nav>
@@ -242,10 +266,26 @@ wrapperTag: div
242
266
  </main>
243
267
  </div>
244
268
  <footer class="pf-v6-c-wizard__footer">
245
- <button class="pf-v6-c-button pf-m-secondary" type="button">Back</button>
246
- <button class="pf-v6-c-button pf-m-primary" type="submit">Next</button>
247
- <div class="pf-v6-c-wizard__footer-cancel">
248
- <button class="pf-v6-c-button pf-m-link" type="button">Cancel</button>
269
+ <div class="pf-v6-c-action-list">
270
+ <div class="pf-v6-c-action-list__group">
271
+ <div class="pf-v6-c-action-list__item">
272
+ <button class="pf-v6-c-button pf-m-secondary" type="button">
273
+ <span class="pf-v6-c-button__text">Back</span>
274
+ </button>
275
+ </div>
276
+ <div class="pf-v6-c-action-list__item">
277
+ <button class="pf-v6-c-button pf-m-primary" type="button">
278
+ <span class="pf-v6-c-button__text">Next</span>
279
+ </button>
280
+ </div>
281
+ </div>
282
+ <div class="pf-v6-c-action-list__group">
283
+ <div class="pf-v6-c-action-list__item">
284
+ <button class="pf-v6-c-button pf-m-link" type="button">
285
+ <span class="pf-v6-c-button__text">Cancel</span>
286
+ </button>
287
+ </div>
288
+ </div>
249
289
  </div>
250
290
  </footer>
251
291
  </div>
@@ -264,7 +304,9 @@ wrapperTag: div
264
304
  type="button"
265
305
  aria-label="Close"
266
306
  >
267
- <i class="fas fa-times" aria-hidden="true"></i>
307
+ <span class="pf-v6-c-button__icon">
308
+ <i class="fas fa-times" aria-hidden="true"></i>
309
+ </span>
268
310
  </button>
269
311
  </div>
270
312
  <div class="pf-v6-c-wizard__title">
@@ -297,7 +339,11 @@ wrapperTag: div
297
339
  <nav class="pf-v6-c-wizard__nav pf-m-expanded" aria-label="Steps">
298
340
  <ol class="pf-v6-c-wizard__nav-list" role="list">
299
341
  <li class="pf-v6-c-wizard__nav-item">
300
- <button class="pf-v6-c-wizard__nav-link" type="button">Information</button>
342
+ <button class="pf-v6-c-wizard__nav-link" type="button">
343
+ <span class="pf-v6-c-wizard__nav-link-main">
344
+ <span class="pf-v6-c-wizard__nav-link-text">Information</span>
345
+ </span>
346
+ </button>
301
347
  </li>
302
348
  <li class="pf-v6-c-wizard__nav-item pf-m-expandable pf-m-expanded">
303
349
  <button
@@ -305,38 +351,56 @@ wrapperTag: div
305
351
  type="button"
306
352
  aria-expanded="true"
307
353
  >
308
- <span class="pf-v6-c-wizard__nav-link-text">Configuration</span>
309
- <span class="pf-v6-c-wizard__nav-link-toggle">
310
- <span class="pf-v6-c-wizard__nav-link-toggle-icon">
311
- <i class="fas fa-angle-right" aria-hidden="true"></i>
354
+ <span class="pf-v6-c-wizard__nav-link-main">
355
+ <span class="pf-v6-c-wizard__nav-link-text">Configuration</span>
356
+ <span class="pf-v6-c-wizard__nav-link-toggle">
357
+ <span class="pf-v6-c-wizard__nav-link-toggle-icon">
358
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
359
+ </span>
312
360
  </span>
313
361
  </span>
314
362
  </button>
315
363
  <ol class="pf-v6-c-wizard__nav-list" role="list">
316
364
  <li class="pf-v6-c-wizard__nav-item">
317
- <button class="pf-v6-c-wizard__nav-link" type="button">Substep A</button>
365
+ <button class="pf-v6-c-wizard__nav-link" type="button">
366
+ <span class="pf-v6-c-wizard__nav-link-main">
367
+ <span class="pf-v6-c-wizard__nav-link-text">Substep A</span>
368
+ </span>
369
+ </button>
318
370
  </li>
319
371
  <li class="pf-v6-c-wizard__nav-item">
320
372
  <button
321
373
  class="pf-v6-c-wizard__nav-link pf-m-current"
322
374
  type="button"
323
375
  aria-current="page"
324
- >Substep B</button>
376
+ >
377
+ <span class="pf-v6-c-wizard__nav-link-main">
378
+ <span class="pf-v6-c-wizard__nav-link-text">Substep B</span>
379
+ </span>
380
+ </button>
325
381
  </li>
326
382
  <li class="pf-v6-c-wizard__nav-item">
327
- <button class="pf-v6-c-wizard__nav-link" type="button">Substep C</button>
383
+ <button class="pf-v6-c-wizard__nav-link" type="button">
384
+ <span class="pf-v6-c-wizard__nav-link-main">
385
+ <span class="pf-v6-c-wizard__nav-link-text">Substep C</span>
386
+ </span>
387
+ </button>
328
388
  </li>
329
389
  </ol>
330
390
  </li>
331
391
  <li class="pf-v6-c-wizard__nav-item">
332
- <button class="pf-v6-c-wizard__nav-link" type="button">Additional</button>
392
+ <button class="pf-v6-c-wizard__nav-link" type="button">
393
+ <span class="pf-v6-c-wizard__nav-link-main">
394
+ <span class="pf-v6-c-wizard__nav-link-text">Additional</span>
395
+ </span>
396
+ </button>
333
397
  </li>
334
398
  <li class="pf-v6-c-wizard__nav-item">
335
- <button
336
- class="pf-v6-c-wizard__nav-link"
337
- type="button"
338
- disabled
339
- >Review</button>
399
+ <button class="pf-v6-c-wizard__nav-link" type="button" disabled>
400
+ <span class="pf-v6-c-wizard__nav-link-main">
401
+ <span class="pf-v6-c-wizard__nav-link-text">Review</span>
402
+ </span>
403
+ </button>
340
404
  </li>
341
405
  </ol>
342
406
  </nav>
@@ -344,7 +408,10 @@ wrapperTag: div
344
408
  <div class="pf-v6-c-wizard__main-body">
345
409
  <form class="pf-v6-c-form pf-m-limit-width" novalidate>
346
410
  <div class="pf-v6-c-form__group">
347
- <div class="pf-v6-c-form__group-label"><label class="pf-v6-c-form__label" for="-form-field1">
411
+ <div class="pf-v6-c-form__group-label"><label
412
+ class="pf-v6-c-form__label"
413
+ for="wizard-nav-expanded-form-field1"
414
+ >
348
415
  <span class="pf-v6-c-form__label-text">Field 1</span>&nbsp;<span
349
416
  class="pf-v6-c-form__label-required"
350
417
  aria-hidden="true"
@@ -352,12 +419,19 @@ wrapperTag: div
352
419
  </div>
353
420
  <div class="pf-v6-c-form__group-control">
354
421
  <span class="pf-v6-c-form-control">
355
- <input type="text" id="-form-field1" name="-form-field1" />
422
+ <input
423
+ type="text"
424
+ id="wizard-nav-expanded-form-field1"
425
+ name="wizard-nav-expanded-form-field1"
426
+ />
356
427
  </span>
357
428
  </div>
358
429
  </div>
359
430
  <div class="pf-v6-c-form__group">
360
- <div class="pf-v6-c-form__group-label"><label class="pf-v6-c-form__label" for="-form-field2">
431
+ <div class="pf-v6-c-form__group-label"><label
432
+ class="pf-v6-c-form__label"
433
+ for="wizard-nav-expanded-form-field2"
434
+ >
361
435
  <span class="pf-v6-c-form__label-text">Field 2</span>&nbsp;<span
362
436
  class="pf-v6-c-form__label-required"
363
437
  aria-hidden="true"
@@ -365,12 +439,19 @@ wrapperTag: div
365
439
  </div>
366
440
  <div class="pf-v6-c-form__group-control">
367
441
  <span class="pf-v6-c-form-control">
368
- <input type="text" id="-form-field2" name="-form-field2" />
442
+ <input
443
+ type="text"
444
+ id="wizard-nav-expanded-form-field2"
445
+ name="wizard-nav-expanded-form-field2"
446
+ />
369
447
  </span>
370
448
  </div>
371
449
  </div>
372
450
  <div class="pf-v6-c-form__group">
373
- <div class="pf-v6-c-form__group-label"><label class="pf-v6-c-form__label" for="-form-field3">
451
+ <div class="pf-v6-c-form__group-label"><label
452
+ class="pf-v6-c-form__label"
453
+ for="wizard-nav-expanded-form-field3"
454
+ >
374
455
  <span class="pf-v6-c-form__label-text">Field 3</span>&nbsp;<span
375
456
  class="pf-v6-c-form__label-required"
376
457
  aria-hidden="true"
@@ -378,12 +459,19 @@ wrapperTag: div
378
459
  </div>
379
460
  <div class="pf-v6-c-form__group-control">
380
461
  <span class="pf-v6-c-form-control">
381
- <input type="text" id="-form-field3" name="-form-field3" />
462
+ <input
463
+ type="text"
464
+ id="wizard-nav-expanded-form-field3"
465
+ name="wizard-nav-expanded-form-field3"
466
+ />
382
467
  </span>
383
468
  </div>
384
469
  </div>
385
470
  <div class="pf-v6-c-form__group">
386
- <div class="pf-v6-c-form__group-label"><label class="pf-v6-c-form__label" for="-form-field4">
471
+ <div class="pf-v6-c-form__group-label"><label
472
+ class="pf-v6-c-form__label"
473
+ for="wizard-nav-expanded-form-field4"
474
+ >
387
475
  <span class="pf-v6-c-form__label-text">Field 4</span>&nbsp;<span
388
476
  class="pf-v6-c-form__label-required"
389
477
  aria-hidden="true"
@@ -391,12 +479,19 @@ wrapperTag: div
391
479
  </div>
392
480
  <div class="pf-v6-c-form__group-control">
393
481
  <span class="pf-v6-c-form-control">
394
- <input type="text" id="-form-field4" name="-form-field4" />
482
+ <input
483
+ type="text"
484
+ id="wizard-nav-expanded-form-field4"
485
+ name="wizard-nav-expanded-form-field4"
486
+ />
395
487
  </span>
396
488
  </div>
397
489
  </div>
398
490
  <div class="pf-v6-c-form__group">
399
- <div class="pf-v6-c-form__group-label"><label class="pf-v6-c-form__label" for="-form-field5">
491
+ <div class="pf-v6-c-form__group-label"><label
492
+ class="pf-v6-c-form__label"
493
+ for="wizard-nav-expanded-form-field5"
494
+ >
400
495
  <span class="pf-v6-c-form__label-text">Field 5</span>&nbsp;<span
401
496
  class="pf-v6-c-form__label-required"
402
497
  aria-hidden="true"
@@ -404,12 +499,19 @@ wrapperTag: div
404
499
  </div>
405
500
  <div class="pf-v6-c-form__group-control">
406
501
  <span class="pf-v6-c-form-control">
407
- <input type="text" id="-form-field5" name="-form-field5" />
502
+ <input
503
+ type="text"
504
+ id="wizard-nav-expanded-form-field5"
505
+ name="wizard-nav-expanded-form-field5"
506
+ />
408
507
  </span>
409
508
  </div>
410
509
  </div>
411
510
  <div class="pf-v6-c-form__group">
412
- <div class="pf-v6-c-form__group-label"><label class="pf-v6-c-form__label" for="-form-field6">
511
+ <div class="pf-v6-c-form__group-label"><label
512
+ class="pf-v6-c-form__label"
513
+ for="wizard-nav-expanded-form-field6"
514
+ >
413
515
  <span class="pf-v6-c-form__label-text">Field 6</span>&nbsp;<span
414
516
  class="pf-v6-c-form__label-required"
415
517
  aria-hidden="true"
@@ -417,12 +519,19 @@ wrapperTag: div
417
519
  </div>
418
520
  <div class="pf-v6-c-form__group-control">
419
521
  <span class="pf-v6-c-form-control">
420
- <input type="text" id="-form-field6" name="-form-field6" />
522
+ <input
523
+ type="text"
524
+ id="wizard-nav-expanded-form-field6"
525
+ name="wizard-nav-expanded-form-field6"
526
+ />
421
527
  </span>
422
528
  </div>
423
529
  </div>
424
530
  <div class="pf-v6-c-form__group">
425
- <div class="pf-v6-c-form__group-label"><label class="pf-v6-c-form__label" for="-form-field7">
531
+ <div class="pf-v6-c-form__group-label"><label
532
+ class="pf-v6-c-form__label"
533
+ for="wizard-nav-expanded-form-field7"
534
+ >
426
535
  <span class="pf-v6-c-form__label-text">Field 7</span>&nbsp;<span
427
536
  class="pf-v6-c-form__label-required"
428
537
  aria-hidden="true"
@@ -430,7 +539,11 @@ wrapperTag: div
430
539
  </div>
431
540
  <div class="pf-v6-c-form__group-control">
432
541
  <span class="pf-v6-c-form-control">
433
- <input type="text" id="-form-field7" name="-form-field7" />
542
+ <input
543
+ type="text"
544
+ id="wizard-nav-expanded-form-field7"
545
+ name="wizard-nav-expanded-form-field7"
546
+ />
434
547
  </span>
435
548
  </div>
436
549
  </div>
@@ -439,10 +552,26 @@ wrapperTag: div
439
552
  </main>
440
553
  </div>
441
554
  <footer class="pf-v6-c-wizard__footer">
442
- <button class="pf-v6-c-button pf-m-secondary" type="button">Back</button>
443
- <button class="pf-v6-c-button pf-m-primary" type="submit">Next</button>
444
- <div class="pf-v6-c-wizard__footer-cancel">
445
- <button class="pf-v6-c-button pf-m-link" type="button">Cancel</button>
555
+ <div class="pf-v6-c-action-list">
556
+ <div class="pf-v6-c-action-list__group">
557
+ <div class="pf-v6-c-action-list__item">
558
+ <button class="pf-v6-c-button pf-m-secondary" type="button">
559
+ <span class="pf-v6-c-button__text">Back</span>
560
+ </button>
561
+ </div>
562
+ <div class="pf-v6-c-action-list__item">
563
+ <button class="pf-v6-c-button pf-m-primary" type="button">
564
+ <span class="pf-v6-c-button__text">Next</span>
565
+ </button>
566
+ </div>
567
+ </div>
568
+ <div class="pf-v6-c-action-list__group">
569
+ <div class="pf-v6-c-action-list__item">
570
+ <button class="pf-v6-c-button pf-m-link" type="button">
571
+ <span class="pf-v6-c-button__text">Cancel</span>
572
+ </button>
573
+ </div>
574
+ </div>
446
575
  </div>
447
576
  </footer>
448
577
  </div>
@@ -461,7 +590,9 @@ wrapperTag: div
461
590
  type="button"
462
591
  aria-label="Close"
463
592
  >
464
- <i class="fas fa-times" aria-hidden="true"></i>
593
+ <span class="pf-v6-c-button__icon">
594
+ <i class="fas fa-times" aria-hidden="true"></i>
595
+ </span>
465
596
  </button>
466
597
  </div>
467
598
  <div class="pf-v6-c-wizard__title">
@@ -494,7 +625,11 @@ wrapperTag: div
494
625
  <nav class="pf-v6-c-wizard__nav" aria-label="Steps">
495
626
  <ol class="pf-v6-c-wizard__nav-list" role="list">
496
627
  <li class="pf-v6-c-wizard__nav-item">
497
- <button class="pf-v6-c-wizard__nav-link" type="button">Information</button>
628
+ <button class="pf-v6-c-wizard__nav-link" type="button">
629
+ <span class="pf-v6-c-wizard__nav-link-main">
630
+ <span class="pf-v6-c-wizard__nav-link-text">Information</span>
631
+ </span>
632
+ </button>
498
633
  </li>
499
634
  <li class="pf-v6-c-wizard__nav-item pf-m-expandable pf-m-expanded">
500
635
  <button
@@ -502,38 +637,56 @@ wrapperTag: div
502
637
  type="button"
503
638
  aria-expanded="true"
504
639
  >
505
- <span class="pf-v6-c-wizard__nav-link-text">Configuration</span>
506
- <span class="pf-v6-c-wizard__nav-link-toggle">
507
- <span class="pf-v6-c-wizard__nav-link-toggle-icon">
508
- <i class="fas fa-angle-right" aria-hidden="true"></i>
640
+ <span class="pf-v6-c-wizard__nav-link-main">
641
+ <span class="pf-v6-c-wizard__nav-link-text">Configuration</span>
642
+ <span class="pf-v6-c-wizard__nav-link-toggle">
643
+ <span class="pf-v6-c-wizard__nav-link-toggle-icon">
644
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
645
+ </span>
509
646
  </span>
510
647
  </span>
511
648
  </button>
512
649
  <ol class="pf-v6-c-wizard__nav-list" role="list">
513
650
  <li class="pf-v6-c-wizard__nav-item">
514
- <button class="pf-v6-c-wizard__nav-link" type="button">Substep A</button>
651
+ <button class="pf-v6-c-wizard__nav-link" type="button">
652
+ <span class="pf-v6-c-wizard__nav-link-main">
653
+ <span class="pf-v6-c-wizard__nav-link-text">Substep A</span>
654
+ </span>
655
+ </button>
515
656
  </li>
516
657
  <li class="pf-v6-c-wizard__nav-item">
517
658
  <button
518
659
  class="pf-v6-c-wizard__nav-link pf-m-current"
519
660
  type="button"
520
661
  aria-current="page"
521
- >Substep B</button>
662
+ >
663
+ <span class="pf-v6-c-wizard__nav-link-main">
664
+ <span class="pf-v6-c-wizard__nav-link-text">Substep B</span>
665
+ </span>
666
+ </button>
522
667
  </li>
523
668
  <li class="pf-v6-c-wizard__nav-item">
524
- <button class="pf-v6-c-wizard__nav-link" type="button">Substep C</button>
669
+ <button class="pf-v6-c-wizard__nav-link" type="button">
670
+ <span class="pf-v6-c-wizard__nav-link-main">
671
+ <span class="pf-v6-c-wizard__nav-link-text">Substep C</span>
672
+ </span>
673
+ </button>
525
674
  </li>
526
675
  </ol>
527
676
  </li>
528
677
  <li class="pf-v6-c-wizard__nav-item">
529
- <button class="pf-v6-c-wizard__nav-link" type="button">Additional</button>
678
+ <button class="pf-v6-c-wizard__nav-link" type="button">
679
+ <span class="pf-v6-c-wizard__nav-link-main">
680
+ <span class="pf-v6-c-wizard__nav-link-text">Additional</span>
681
+ </span>
682
+ </button>
530
683
  </li>
531
684
  <li class="pf-v6-c-wizard__nav-item">
532
- <button
533
- class="pf-v6-c-wizard__nav-link"
534
- type="button"
535
- disabled
536
- >Review</button>
685
+ <button class="pf-v6-c-wizard__nav-link" type="button" disabled>
686
+ <span class="pf-v6-c-wizard__nav-link-main">
687
+ <span class="pf-v6-c-wizard__nav-link-text">Review</span>
688
+ </span>
689
+ </button>
537
690
  </li>
538
691
  </ol>
539
692
  </nav>
@@ -543,9 +696,11 @@ wrapperTag: div
543
696
  <div class="pf-v6-c-drawer__content">
544
697
  <div class="pf-v6-c-wizard__main-body">
545
698
  <button
546
- class="pf-v6-c-button pf-v6-u-hidden pf-m-link pf-m-inline pf-v5-u-float-right pf-v5-u-ml-md"
699
+ class="pf-v6-c-button pf-v6-u-hidden pf-v6-u-float-right pf-v6-u-ml-md pf-m-inline pf-m-link"
547
700
  type="button"
548
- >Open drawer</button>
701
+ >
702
+ <span class="pf-v6-c-button__text">Open drawer</span>
703
+ </button>
549
704
  <form class="pf-v6-c-form pf-m-limit-width" novalidate>
550
705
  <div class="pf-v6-c-form__group">
551
706
  <div class="pf-v6-c-form__group-label"><label
@@ -690,7 +845,7 @@ wrapperTag: div
690
845
  </form>
691
846
  </div>
692
847
  </div>
693
- <div class="pf-v6-c-drawer__panel pf-m-light-200 pf-m-width-33">
848
+ <div class="pf-v6-c-drawer__panel pf-m-width-33">
694
849
  <div class="pf-v6-c-drawer__body">
695
850
  <div class="pf-v6-c-drawer__head">
696
851
  <div class="pf-v6-c-drawer__actions">
@@ -700,7 +855,9 @@ wrapperTag: div
700
855
  type="button"
701
856
  aria-label="Close drawer panel"
702
857
  >
703
- <i class="fas fa-times" aria-hidden="true"></i>
858
+ <span class="pf-v6-c-button__icon">
859
+ <i class="fas fa-times" aria-hidden="true"></i>
860
+ </span>
704
861
  </button>
705
862
  </div>
706
863
  </div>drawer-panel
@@ -709,10 +866,26 @@ wrapperTag: div
709
866
  </div>
710
867
  </div>
711
868
  <footer class="pf-v6-c-wizard__footer">
712
- <button class="pf-v6-c-button pf-m-secondary" type="button">Back</button>
713
- <button class="pf-v6-c-button pf-m-primary" type="submit">Next</button>
714
- <div class="pf-v6-c-wizard__footer-cancel">
715
- <button class="pf-v6-c-button pf-m-link" type="button">Cancel</button>
869
+ <div class="pf-v6-c-action-list">
870
+ <div class="pf-v6-c-action-list__group">
871
+ <div class="pf-v6-c-action-list__item">
872
+ <button class="pf-v6-c-button pf-m-secondary" type="button">
873
+ <span class="pf-v6-c-button__text">Back</span>
874
+ </button>
875
+ </div>
876
+ <div class="pf-v6-c-action-list__item">
877
+ <button class="pf-v6-c-button pf-m-primary" type="button">
878
+ <span class="pf-v6-c-button__text">Next</span>
879
+ </button>
880
+ </div>
881
+ </div>
882
+ <div class="pf-v6-c-action-list__group">
883
+ <div class="pf-v6-c-action-list__item">
884
+ <button class="pf-v6-c-button pf-m-link" type="button">
885
+ <span class="pf-v6-c-button__text">Cancel</span>
886
+ </button>
887
+ </div>
888
+ </div>
716
889
  </div>
717
890
  </footer>
718
891
  </div>
@@ -734,7 +907,9 @@ wrapperTag: div
734
907
  type="button"
735
908
  aria-label="Close"
736
909
  >
737
- <i class="fas fa-times" aria-hidden="true"></i>
910
+ <span class="pf-v6-c-button__icon">
911
+ <i class="fas fa-times" aria-hidden="true"></i>
912
+ </span>
738
913
  </button>
739
914
  </div>
740
915
  <div class="pf-v6-c-wizard__title">
@@ -771,7 +946,11 @@ wrapperTag: div
771
946
  class="pf-v6-c-wizard__nav-link pf-m-current"
772
947
  type="button"
773
948
  aria-current="page"
774
- >Information</button>
949
+ >
950
+ <span class="pf-v6-c-wizard__nav-link-main">
951
+ <span class="pf-v6-c-wizard__nav-link-text">Information</span>
952
+ </span>
953
+ </button>
775
954
  </li>
776
955
  <li class="pf-v6-c-wizard__nav-item pf-m-expandable">
777
956
  <button
@@ -779,34 +958,52 @@ wrapperTag: div
779
958
  type="button"
780
959
  aria-expanded="false"
781
960
  >
782
- <span class="pf-v6-c-wizard__nav-link-text">Configuration</span>
783
- <span class="pf-v6-c-wizard__nav-link-toggle">
784
- <span class="pf-v6-c-wizard__nav-link-toggle-icon">
785
- <i class="fas fa-angle-right" aria-hidden="true"></i>
961
+ <span class="pf-v6-c-wizard__nav-link-main">
962
+ <span class="pf-v6-c-wizard__nav-link-text">Configuration</span>
963
+ <span class="pf-v6-c-wizard__nav-link-toggle">
964
+ <span class="pf-v6-c-wizard__nav-link-toggle-icon">
965
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
966
+ </span>
786
967
  </span>
787
968
  </span>
788
969
  </button>
789
970
  <ol class="pf-v6-c-wizard__nav-list" role="list">
790
971
  <li class="pf-v6-c-wizard__nav-item">
791
- <button class="pf-v6-c-wizard__nav-link" type="button">Substep A</button>
972
+ <button class="pf-v6-c-wizard__nav-link" type="button">
973
+ <span class="pf-v6-c-wizard__nav-link-main">
974
+ <span class="pf-v6-c-wizard__nav-link-text">Substep A</span>
975
+ </span>
976
+ </button>
792
977
  </li>
793
978
  <li class="pf-v6-c-wizard__nav-item">
794
- <button class="pf-v6-c-wizard__nav-link" type="button">Substep B</button>
979
+ <button class="pf-v6-c-wizard__nav-link" type="button">
980
+ <span class="pf-v6-c-wizard__nav-link-main">
981
+ <span class="pf-v6-c-wizard__nav-link-text">Substep B</span>
982
+ </span>
983
+ </button>
795
984
  </li>
796
985
  <li class="pf-v6-c-wizard__nav-item">
797
- <button class="pf-v6-c-wizard__nav-link" type="button">Substep C</button>
986
+ <button class="pf-v6-c-wizard__nav-link" type="button">
987
+ <span class="pf-v6-c-wizard__nav-link-main">
988
+ <span class="pf-v6-c-wizard__nav-link-text">Substep C</span>
989
+ </span>
990
+ </button>
798
991
  </li>
799
992
  </ol>
800
993
  </li>
801
994
  <li class="pf-v6-c-wizard__nav-item">
802
- <button class="pf-v6-c-wizard__nav-link" type="button">Additional</button>
995
+ <button class="pf-v6-c-wizard__nav-link" type="button">
996
+ <span class="pf-v6-c-wizard__nav-link-main">
997
+ <span class="pf-v6-c-wizard__nav-link-text">Additional</span>
998
+ </span>
999
+ </button>
803
1000
  </li>
804
1001
  <li class="pf-v6-c-wizard__nav-item">
805
- <button
806
- class="pf-v6-c-wizard__nav-link"
807
- type="button"
808
- disabled
809
- >Review</button>
1002
+ <button class="pf-v6-c-wizard__nav-link" type="button" disabled>
1003
+ <span class="pf-v6-c-wizard__nav-link-main">
1004
+ <span class="pf-v6-c-wizard__nav-link-text">Review</span>
1005
+ </span>
1006
+ </button>
810
1007
  </li>
811
1008
  </ol>
812
1009
  </nav>
@@ -958,10 +1155,26 @@ wrapperTag: div
958
1155
  </main>
959
1156
  </div>
960
1157
  <footer class="pf-v6-c-wizard__footer">
961
- <button class="pf-v6-c-button pf-m-secondary" type="button">Back</button>
962
- <button class="pf-v6-c-button pf-m-primary" type="submit">Next</button>
963
- <div class="pf-v6-c-wizard__footer-cancel">
964
- <button class="pf-v6-c-button pf-m-link" type="button">Cancel</button>
1158
+ <div class="pf-v6-c-action-list">
1159
+ <div class="pf-v6-c-action-list__group">
1160
+ <div class="pf-v6-c-action-list__item">
1161
+ <button class="pf-v6-c-button pf-m-secondary" type="button">
1162
+ <span class="pf-v6-c-button__text">Back</span>
1163
+ </button>
1164
+ </div>
1165
+ <div class="pf-v6-c-action-list__item">
1166
+ <button class="pf-v6-c-button pf-m-primary" type="button">
1167
+ <span class="pf-v6-c-button__text">Next</span>
1168
+ </button>
1169
+ </div>
1170
+ </div>
1171
+ <div class="pf-v6-c-action-list__group">
1172
+ <div class="pf-v6-c-action-list__item">
1173
+ <button class="pf-v6-c-button pf-m-link" type="button">
1174
+ <span class="pf-v6-c-button__text">Cancel</span>
1175
+ </button>
1176
+ </div>
1177
+ </div>
965
1178
  </div>
966
1179
  </footer>
967
1180
  </div>
@@ -980,7 +1193,9 @@ wrapperTag: div
980
1193
  type="button"
981
1194
  aria-label="Close"
982
1195
  >
983
- <i class="fas fa-times" aria-hidden="true"></i>
1196
+ <span class="pf-v6-c-button__icon">
1197
+ <i class="fas fa-times" aria-hidden="true"></i>
1198
+ </span>
984
1199
  </button>
985
1200
  </div>
986
1201
  <div class="pf-v6-c-wizard__title">
@@ -1013,7 +1228,11 @@ wrapperTag: div
1013
1228
  <nav class="pf-v6-c-wizard__nav" aria-label="Steps">
1014
1229
  <ol class="pf-v6-c-wizard__nav-list" role="list">
1015
1230
  <li class="pf-v6-c-wizard__nav-item">
1016
- <button class="pf-v6-c-wizard__nav-link" type="button">Information</button>
1231
+ <button class="pf-v6-c-wizard__nav-link" type="button">
1232
+ <span class="pf-v6-c-wizard__nav-link-main">
1233
+ <span class="pf-v6-c-wizard__nav-link-text">Information</span>
1234
+ </span>
1235
+ </button>
1017
1236
  </li>
1018
1237
  <li class="pf-v6-c-wizard__nav-item pf-m-expandable pf-m-expanded">
1019
1238
  <button
@@ -1021,38 +1240,56 @@ wrapperTag: div
1021
1240
  type="button"
1022
1241
  aria-expanded="true"
1023
1242
  >
1024
- <span class="pf-v6-c-wizard__nav-link-text">Configuration</span>
1025
- <span class="pf-v6-c-wizard__nav-link-toggle">
1026
- <span class="pf-v6-c-wizard__nav-link-toggle-icon">
1027
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1243
+ <span class="pf-v6-c-wizard__nav-link-main">
1244
+ <span class="pf-v6-c-wizard__nav-link-text">Configuration</span>
1245
+ <span class="pf-v6-c-wizard__nav-link-toggle">
1246
+ <span class="pf-v6-c-wizard__nav-link-toggle-icon">
1247
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
1248
+ </span>
1028
1249
  </span>
1029
1250
  </span>
1030
1251
  </button>
1031
1252
  <ol class="pf-v6-c-wizard__nav-list" role="list">
1032
1253
  <li class="pf-v6-c-wizard__nav-item">
1033
- <button class="pf-v6-c-wizard__nav-link" type="button">Substep A</button>
1254
+ <button class="pf-v6-c-wizard__nav-link" type="button">
1255
+ <span class="pf-v6-c-wizard__nav-link-main">
1256
+ <span class="pf-v6-c-wizard__nav-link-text">Substep A</span>
1257
+ </span>
1258
+ </button>
1034
1259
  </li>
1035
1260
  <li class="pf-v6-c-wizard__nav-item">
1036
1261
  <button
1037
1262
  class="pf-v6-c-wizard__nav-link pf-m-current"
1038
1263
  type="button"
1039
1264
  aria-current="page"
1040
- >Substep B</button>
1265
+ >
1266
+ <span class="pf-v6-c-wizard__nav-link-main">
1267
+ <span class="pf-v6-c-wizard__nav-link-text">Substep B</span>
1268
+ </span>
1269
+ </button>
1041
1270
  </li>
1042
1271
  <li class="pf-v6-c-wizard__nav-item">
1043
- <button class="pf-v6-c-wizard__nav-link" type="button">Substep C</button>
1272
+ <button class="pf-v6-c-wizard__nav-link" type="button">
1273
+ <span class="pf-v6-c-wizard__nav-link-main">
1274
+ <span class="pf-v6-c-wizard__nav-link-text">Substep C</span>
1275
+ </span>
1276
+ </button>
1044
1277
  </li>
1045
1278
  </ol>
1046
1279
  </li>
1047
1280
  <li class="pf-v6-c-wizard__nav-item">
1048
- <button class="pf-v6-c-wizard__nav-link" type="button">Additional</button>
1281
+ <button class="pf-v6-c-wizard__nav-link" type="button">
1282
+ <span class="pf-v6-c-wizard__nav-link-main">
1283
+ <span class="pf-v6-c-wizard__nav-link-text">Additional</span>
1284
+ </span>
1285
+ </button>
1049
1286
  </li>
1050
1287
  <li class="pf-v6-c-wizard__nav-item">
1051
- <button
1052
- class="pf-v6-c-wizard__nav-link"
1053
- type="button"
1054
- disabled
1055
- >Review</button>
1288
+ <button class="pf-v6-c-wizard__nav-link" type="button" disabled>
1289
+ <span class="pf-v6-c-wizard__nav-link-main">
1290
+ <span class="pf-v6-c-wizard__nav-link-text">Review</span>
1291
+ </span>
1292
+ </button>
1056
1293
  </li>
1057
1294
  </ol>
1058
1295
  </nav>
@@ -1204,10 +1441,26 @@ wrapperTag: div
1204
1441
  </main>
1205
1442
  </div>
1206
1443
  <footer class="pf-v6-c-wizard__footer">
1207
- <button class="pf-v6-c-button pf-m-secondary" type="button">Back</button>
1208
- <button class="pf-v6-c-button pf-m-primary" type="submit">Next</button>
1209
- <div class="pf-v6-c-wizard__footer-cancel">
1210
- <button class="pf-v6-c-button pf-m-link" type="button">Cancel</button>
1444
+ <div class="pf-v6-c-action-list">
1445
+ <div class="pf-v6-c-action-list__group">
1446
+ <div class="pf-v6-c-action-list__item">
1447
+ <button class="pf-v6-c-button pf-m-secondary" type="button">
1448
+ <span class="pf-v6-c-button__text">Back</span>
1449
+ </button>
1450
+ </div>
1451
+ <div class="pf-v6-c-action-list__item">
1452
+ <button class="pf-v6-c-button pf-m-primary" type="button">
1453
+ <span class="pf-v6-c-button__text">Next</span>
1454
+ </button>
1455
+ </div>
1456
+ </div>
1457
+ <div class="pf-v6-c-action-list__group">
1458
+ <div class="pf-v6-c-action-list__item">
1459
+ <button class="pf-v6-c-button pf-m-link" type="button">
1460
+ <span class="pf-v6-c-button__text">Cancel</span>
1461
+ </button>
1462
+ </div>
1463
+ </div>
1211
1464
  </div>
1212
1465
  </footer>
1213
1466
  </div>
@@ -1226,7 +1479,9 @@ wrapperTag: div
1226
1479
  type="button"
1227
1480
  aria-label="Close"
1228
1481
  >
1229
- <i class="fas fa-times" aria-hidden="true"></i>
1482
+ <span class="pf-v6-c-button__icon">
1483
+ <i class="fas fa-times" aria-hidden="true"></i>
1484
+ </span>
1230
1485
  </button>
1231
1486
  </div>
1232
1487
  <div class="pf-v6-c-wizard__title">
@@ -1259,27 +1514,55 @@ wrapperTag: div
1259
1514
  <nav class="pf-v6-c-wizard__nav" aria-label="Steps">
1260
1515
  <ol class="pf-v6-c-wizard__nav-list" role="list">
1261
1516
  <li class="pf-v6-c-wizard__nav-item">
1262
- <button class="pf-v6-c-wizard__nav-link" type="button">Information</button>
1517
+ <button class="pf-v6-c-wizard__nav-link" type="button">
1518
+ <span class="pf-v6-c-wizard__nav-link-main">
1519
+ <span class="pf-v6-c-wizard__nav-link-text">Information</span>
1520
+ </span>
1521
+ </button>
1263
1522
  </li>
1264
1523
  <li class="pf-v6-c-wizard__nav-item">
1265
- <button class="pf-v6-c-wizard__nav-link" type="button">Configuration</button>
1524
+ <button class="pf-v6-c-wizard__nav-link" type="button">
1525
+ <span class="pf-v6-c-wizard__nav-link-main">
1526
+ <span class="pf-v6-c-wizard__nav-link-text">Configuration</span>
1527
+ </span>
1528
+ </button>
1266
1529
  <ol class="pf-v6-c-wizard__nav-list" role="list">
1267
1530
  <li class="pf-v6-c-wizard__nav-item">
1268
- <button class="pf-v6-c-wizard__nav-link" type="button">Substep A</button>
1531
+ <button class="pf-v6-c-wizard__nav-link" type="button">
1532
+ <span class="pf-v6-c-wizard__nav-link-main">
1533
+ <span class="pf-v6-c-wizard__nav-link-text">Substep A</span>
1534
+ </span>
1535
+ </button>
1269
1536
  </li>
1270
1537
  <li class="pf-v6-c-wizard__nav-item">
1271
- <button class="pf-v6-c-wizard__nav-link" type="button">Substep B</button>
1538
+ <button class="pf-v6-c-wizard__nav-link" type="button">
1539
+ <span class="pf-v6-c-wizard__nav-link-main">
1540
+ <span class="pf-v6-c-wizard__nav-link-text">Substep B</span>
1541
+ </span>
1542
+ </button>
1272
1543
  </li>
1273
1544
  <li class="pf-v6-c-wizard__nav-item">
1274
- <button class="pf-v6-c-wizard__nav-link" type="button">Substep C</button>
1545
+ <button class="pf-v6-c-wizard__nav-link" type="button">
1546
+ <span class="pf-v6-c-wizard__nav-link-main">
1547
+ <span class="pf-v6-c-wizard__nav-link-text">Substep C</span>
1548
+ </span>
1549
+ </button>
1275
1550
  </li>
1276
1551
  </ol>
1277
1552
  </li>
1278
1553
  <li class="pf-v6-c-wizard__nav-item">
1279
- <button class="pf-v6-c-wizard__nav-link" type="button">Additional</button>
1554
+ <button class="pf-v6-c-wizard__nav-link" type="button">
1555
+ <span class="pf-v6-c-wizard__nav-link-main">
1556
+ <span class="pf-v6-c-wizard__nav-link-text">Additional</span>
1557
+ </span>
1558
+ </button>
1280
1559
  </li>
1281
1560
  <li class="pf-v6-c-wizard__nav-item">
1282
- <button class="pf-v6-c-wizard__nav-link" type="button">Review</button>
1561
+ <button class="pf-v6-c-wizard__nav-link" type="button">
1562
+ <span class="pf-v6-c-wizard__nav-link-main">
1563
+ <span class="pf-v6-c-wizard__nav-link-text">Review</span>
1564
+ </span>
1565
+ </button>
1283
1566
  </li>
1284
1567
  </ol>
1285
1568
  </nav>
@@ -1327,7 +1610,9 @@ wrapperTag: div
1327
1610
  <div
1328
1611
  class="pf-v6-c-empty-state__body"
1329
1612
  >Description can be used to further elaborate on the validation step, or give the user a better idea of how long the process will take.</div>
1330
- <button class="pf-v6-c-button pf-m-link" type="button">Cancel</button>
1613
+ <button class="pf-v6-c-button pf-m-link" type="button">
1614
+ <span class="pf-v6-c-button__text">Cancel</span>
1615
+ </button>
1331
1616
  </div>
1332
1617
  </div>
1333
1618
  </div>
@@ -1335,10 +1620,1190 @@ wrapperTag: div
1335
1620
  </main>
1336
1621
  </div>
1337
1622
  <footer class="pf-v6-c-wizard__footer">
1338
- <button class="pf-v6-c-button pf-m-secondary" type="button">Back</button>
1339
- <button class="pf-v6-c-button pf-m-primary" type="submit">Next</button>
1340
- <div class="pf-v6-c-wizard__footer-cancel">
1341
- <button class="pf-v6-c-button pf-m-link" type="button">Cancel</button>
1623
+ <div class="pf-v6-c-action-list">
1624
+ <div class="pf-v6-c-action-list__group">
1625
+ <div class="pf-v6-c-action-list__item">
1626
+ <button class="pf-v6-c-button pf-m-secondary" type="button">
1627
+ <span class="pf-v6-c-button__text">Back</span>
1628
+ </button>
1629
+ </div>
1630
+ <div class="pf-v6-c-action-list__item">
1631
+ <button class="pf-v6-c-button pf-m-primary" type="button">
1632
+ <span class="pf-v6-c-button__text">Next</span>
1633
+ </button>
1634
+ </div>
1635
+ </div>
1636
+ <div class="pf-v6-c-action-list__group">
1637
+ <div class="pf-v6-c-action-list__item">
1638
+ <button class="pf-v6-c-button pf-m-link" type="button">
1639
+ <span class="pf-v6-c-button__text">Cancel</span>
1640
+ </button>
1641
+ </div>
1642
+ </div>
1643
+ </div>
1644
+ </footer>
1645
+ </div>
1646
+ </div>
1647
+
1648
+ ```
1649
+
1650
+ ### Error on step
1651
+
1652
+ ```html isFullscreen
1653
+ <div class="pf-v6-c-wizard">
1654
+ <div class="pf-v6-c-wizard__header">
1655
+ <div class="pf-v6-c-wizard__close">
1656
+ <button
1657
+ class="pf-v6-c-button pf-m-plain"
1658
+ type="button"
1659
+ aria-label="Close"
1660
+ >
1661
+ <span class="pf-v6-c-button__icon">
1662
+ <i class="fas fa-times" aria-hidden="true"></i>
1663
+ </span>
1664
+ </button>
1665
+ </div>
1666
+ <div class="pf-v6-c-wizard__title">
1667
+ <h1 class="pf-v6-c-wizard__title-text">Wizard title</h1>
1668
+ </div>
1669
+ <div class="pf-v6-c-wizard__description">Here is where the description goes</div>
1670
+ </div>
1671
+ <button
1672
+ aria-label="Wizard Header Toggle"
1673
+ class="pf-v6-c-wizard__toggle"
1674
+ aria-expanded="false"
1675
+ >
1676
+ <span class="pf-v6-c-wizard__toggle-list">
1677
+ <span class="pf-v6-c-wizard__toggle-list-item pf-m-danger">
1678
+ <span class="pf-v6-c-wizard__toggle-status-icon">
1679
+ <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
1680
+ </span>
1681
+ Configuration
1682
+ <i
1683
+ class="fas fa-angle-right pf-v6-c-wizard__toggle-separator"
1684
+ aria-hidden="true"
1685
+ ></i>
1686
+ </span>
1687
+ <span class="pf-v6-c-wizard__toggle-list-item">Substep B</span>
1688
+ </span>
1689
+ <span class="pf-v6-c-wizard__toggle-icon">
1690
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
1691
+ </span>
1692
+ </button>
1693
+ <div class="pf-v6-c-wizard__outer-wrap">
1694
+ <div class="pf-v6-c-wizard__inner-wrap">
1695
+ <nav class="pf-v6-c-wizard__nav" aria-label="Steps">
1696
+ <ol class="pf-v6-c-wizard__nav-list" role="list">
1697
+ <li class="pf-v6-c-wizard__nav-item">
1698
+ <button class="pf-v6-c-wizard__nav-link" type="button">
1699
+ <span class="pf-v6-c-wizard__nav-link-main">
1700
+ <span class="pf-v6-c-wizard__nav-link-text">Information</span>
1701
+ </span>
1702
+ </button>
1703
+ </li>
1704
+ <li class="pf-v6-c-wizard__nav-item pf-m-expandable pf-m-expanded">
1705
+ <button
1706
+ class="pf-v6-c-wizard__nav-link pf-m-danger pf-m-current"
1707
+ type="button"
1708
+ aria-expanded="true"
1709
+ >
1710
+ <span class="pf-v6-c-wizard__nav-link-status-icon">
1711
+ <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
1712
+ </span>
1713
+ <span class="pf-v6-c-wizard__nav-link-main">
1714
+ <span class="pf-v6-c-wizard__nav-link-text">Configuration</span>
1715
+ <span class="pf-v6-c-wizard__nav-link-toggle">
1716
+ <span class="pf-v6-c-wizard__nav-link-toggle-icon">
1717
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
1718
+ </span>
1719
+ </span>
1720
+ </span>
1721
+ </button>
1722
+ <ol class="pf-v6-c-wizard__nav-list" role="list">
1723
+ <li class="pf-v6-c-wizard__nav-item">
1724
+ <button class="pf-v6-c-wizard__nav-link" type="button">
1725
+ <span class="pf-v6-c-wizard__nav-link-main">
1726
+ <span class="pf-v6-c-wizard__nav-link-text">Substep A</span>
1727
+ </span>
1728
+ </button>
1729
+ </li>
1730
+ <li class="pf-v6-c-wizard__nav-item">
1731
+ <button
1732
+ class="pf-v6-c-wizard__nav-link pf-m-current"
1733
+ type="button"
1734
+ aria-current="page"
1735
+ >
1736
+ <span class="pf-v6-c-wizard__nav-link-main">
1737
+ <span class="pf-v6-c-wizard__nav-link-text">Substep B</span>
1738
+ </span>
1739
+ </button>
1740
+ </li>
1741
+ <li class="pf-v6-c-wizard__nav-item">
1742
+ <button class="pf-v6-c-wizard__nav-link" type="button">
1743
+ <span class="pf-v6-c-wizard__nav-link-main">
1744
+ <span class="pf-v6-c-wizard__nav-link-text">Substep C</span>
1745
+ </span>
1746
+ </button>
1747
+ </li>
1748
+ </ol>
1749
+ </li>
1750
+ <li class="pf-v6-c-wizard__nav-item">
1751
+ <button class="pf-v6-c-wizard__nav-link" type="button">
1752
+ <span class="pf-v6-c-wizard__nav-link-main">
1753
+ <span class="pf-v6-c-wizard__nav-link-text">Additional</span>
1754
+ </span>
1755
+ </button>
1756
+ </li>
1757
+ <li class="pf-v6-c-wizard__nav-item">
1758
+ <button class="pf-v6-c-wizard__nav-link" type="button" disabled>
1759
+ <span class="pf-v6-c-wizard__nav-link-main">
1760
+ <span class="pf-v6-c-wizard__nav-link-text">Review</span>
1761
+ </span>
1762
+ </button>
1763
+ </li>
1764
+ </ol>
1765
+ </nav>
1766
+ <main class="pf-v6-c-wizard__main" tabindex="0">
1767
+ <div class="pf-v6-c-wizard__main-body">
1768
+ <form class="pf-v6-c-form pf-m-limit-width" novalidate>
1769
+ <div class="pf-v6-c-form__group">
1770
+ <div class="pf-v6-c-form__group-label"><label
1771
+ class="pf-v6-c-form__label"
1772
+ for="wizard-error-on-step-example-form-field1"
1773
+ >
1774
+ <span class="pf-v6-c-form__label-text">Field 1</span>&nbsp;<span
1775
+ class="pf-v6-c-form__label-required"
1776
+ aria-hidden="true"
1777
+ >&#42;</span></label>
1778
+ </div>
1779
+ <div class="pf-v6-c-form__group-control">
1780
+ <span class="pf-v6-c-form-control">
1781
+ <input
1782
+ type="text"
1783
+ id="wizard-error-on-step-example-form-field1"
1784
+ name="wizard-error-on-step-example-form-field1"
1785
+ />
1786
+ </span>
1787
+ </div>
1788
+ </div>
1789
+ <div class="pf-v6-c-form__group">
1790
+ <div class="pf-v6-c-form__group-label"><label
1791
+ class="pf-v6-c-form__label"
1792
+ for="wizard-error-on-step-example-form-field2"
1793
+ >
1794
+ <span class="pf-v6-c-form__label-text">Field 2</span>&nbsp;<span
1795
+ class="pf-v6-c-form__label-required"
1796
+ aria-hidden="true"
1797
+ >&#42;</span></label>
1798
+ </div>
1799
+ <div class="pf-v6-c-form__group-control">
1800
+ <span class="pf-v6-c-form-control">
1801
+ <input
1802
+ type="text"
1803
+ id="wizard-error-on-step-example-form-field2"
1804
+ name="wizard-error-on-step-example-form-field2"
1805
+ />
1806
+ </span>
1807
+ </div>
1808
+ </div>
1809
+ <div class="pf-v6-c-form__group">
1810
+ <div class="pf-v6-c-form__group-label"><label
1811
+ class="pf-v6-c-form__label"
1812
+ for="wizard-error-on-step-example-form-field3"
1813
+ >
1814
+ <span class="pf-v6-c-form__label-text">Field 3</span>&nbsp;<span
1815
+ class="pf-v6-c-form__label-required"
1816
+ aria-hidden="true"
1817
+ >&#42;</span></label>
1818
+ </div>
1819
+ <div class="pf-v6-c-form__group-control">
1820
+ <span class="pf-v6-c-form-control">
1821
+ <input
1822
+ type="text"
1823
+ id="wizard-error-on-step-example-form-field3"
1824
+ name="wizard-error-on-step-example-form-field3"
1825
+ />
1826
+ </span>
1827
+ </div>
1828
+ </div>
1829
+ <div class="pf-v6-c-form__group">
1830
+ <div class="pf-v6-c-form__group-label"><label
1831
+ class="pf-v6-c-form__label"
1832
+ for="wizard-error-on-step-example-form-field4"
1833
+ >
1834
+ <span class="pf-v6-c-form__label-text">Field 4</span>&nbsp;<span
1835
+ class="pf-v6-c-form__label-required"
1836
+ aria-hidden="true"
1837
+ >&#42;</span></label>
1838
+ </div>
1839
+ <div class="pf-v6-c-form__group-control">
1840
+ <span class="pf-v6-c-form-control">
1841
+ <input
1842
+ type="text"
1843
+ id="wizard-error-on-step-example-form-field4"
1844
+ name="wizard-error-on-step-example-form-field4"
1845
+ />
1846
+ </span>
1847
+ </div>
1848
+ </div>
1849
+ <div class="pf-v6-c-form__group">
1850
+ <div class="pf-v6-c-form__group-label"><label
1851
+ class="pf-v6-c-form__label"
1852
+ for="wizard-error-on-step-example-form-field5"
1853
+ >
1854
+ <span class="pf-v6-c-form__label-text">Field 5</span>&nbsp;<span
1855
+ class="pf-v6-c-form__label-required"
1856
+ aria-hidden="true"
1857
+ >&#42;</span></label>
1858
+ </div>
1859
+ <div class="pf-v6-c-form__group-control">
1860
+ <span class="pf-v6-c-form-control">
1861
+ <input
1862
+ type="text"
1863
+ id="wizard-error-on-step-example-form-field5"
1864
+ name="wizard-error-on-step-example-form-field5"
1865
+ />
1866
+ </span>
1867
+ </div>
1868
+ </div>
1869
+ <div class="pf-v6-c-form__group">
1870
+ <div class="pf-v6-c-form__group-label"><label
1871
+ class="pf-v6-c-form__label"
1872
+ for="wizard-error-on-step-example-form-field6"
1873
+ >
1874
+ <span class="pf-v6-c-form__label-text">Field 6</span>&nbsp;<span
1875
+ class="pf-v6-c-form__label-required"
1876
+ aria-hidden="true"
1877
+ >&#42;</span></label>
1878
+ </div>
1879
+ <div class="pf-v6-c-form__group-control">
1880
+ <span class="pf-v6-c-form-control">
1881
+ <input
1882
+ type="text"
1883
+ id="wizard-error-on-step-example-form-field6"
1884
+ name="wizard-error-on-step-example-form-field6"
1885
+ />
1886
+ </span>
1887
+ </div>
1888
+ </div>
1889
+ <div class="pf-v6-c-form__group">
1890
+ <div class="pf-v6-c-form__group-label"><label
1891
+ class="pf-v6-c-form__label"
1892
+ for="wizard-error-on-step-example-form-field7"
1893
+ >
1894
+ <span class="pf-v6-c-form__label-text">Field 7</span>&nbsp;<span
1895
+ class="pf-v6-c-form__label-required"
1896
+ aria-hidden="true"
1897
+ >&#42;</span></label>
1898
+ </div>
1899
+ <div class="pf-v6-c-form__group-control">
1900
+ <span class="pf-v6-c-form-control">
1901
+ <input
1902
+ type="text"
1903
+ id="wizard-error-on-step-example-form-field7"
1904
+ name="wizard-error-on-step-example-form-field7"
1905
+ />
1906
+ </span>
1907
+ </div>
1908
+ </div>
1909
+ </form>
1910
+ </div>
1911
+ </main>
1912
+ </div>
1913
+ <footer class="pf-v6-c-wizard__footer">
1914
+ <div class="pf-v6-c-action-list">
1915
+ <div class="pf-v6-c-action-list__group">
1916
+ <div class="pf-v6-c-action-list__item">
1917
+ <button class="pf-v6-c-button pf-m-secondary" type="button">
1918
+ <span class="pf-v6-c-button__text">Back</span>
1919
+ </button>
1920
+ </div>
1921
+ <div class="pf-v6-c-action-list__item">
1922
+ <button class="pf-v6-c-button pf-m-primary" type="button">
1923
+ <span class="pf-v6-c-button__text">Next</span>
1924
+ </button>
1925
+ </div>
1926
+ </div>
1927
+ <div class="pf-v6-c-action-list__group">
1928
+ <div class="pf-v6-c-action-list__item">
1929
+ <button class="pf-v6-c-button pf-m-link" type="button">
1930
+ <span class="pf-v6-c-button__text">Cancel</span>
1931
+ </button>
1932
+ </div>
1933
+ </div>
1934
+ </div>
1935
+ </footer>
1936
+ </div>
1937
+ </div>
1938
+
1939
+ ```
1940
+
1941
+ ### Nav expanded with error (mobile)
1942
+
1943
+ ```html isFullscreen
1944
+ <div class="pf-v6-c-wizard">
1945
+ <div class="pf-v6-c-wizard__header">
1946
+ <div class="pf-v6-c-wizard__close">
1947
+ <button
1948
+ class="pf-v6-c-button pf-m-plain"
1949
+ type="button"
1950
+ aria-label="Close"
1951
+ >
1952
+ <span class="pf-v6-c-button__icon">
1953
+ <i class="fas fa-times" aria-hidden="true"></i>
1954
+ </span>
1955
+ </button>
1956
+ </div>
1957
+ <div class="pf-v6-c-wizard__title">
1958
+ <h1 class="pf-v6-c-wizard__title-text">Wizard title</h1>
1959
+ </div>
1960
+ <div class="pf-v6-c-wizard__description">Here is where the description goes</div>
1961
+ </div>
1962
+ <button
1963
+ aria-label="Wizard Header Toggle"
1964
+ class="pf-v6-c-wizard__toggle pf-m-expanded"
1965
+ aria-expanded="true"
1966
+ >
1967
+ <span class="pf-v6-c-wizard__toggle-list">
1968
+ <span class="pf-v6-c-wizard__toggle-list-item pf-m-danger">
1969
+ <span class="pf-v6-c-wizard__toggle-status-icon">
1970
+ <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
1971
+ </span>
1972
+ Configuration
1973
+ <i
1974
+ class="fas fa-angle-right pf-v6-c-wizard__toggle-separator"
1975
+ aria-hidden="true"
1976
+ ></i>
1977
+ </span>
1978
+ <span class="pf-v6-c-wizard__toggle-list-item">Substep B</span>
1979
+ </span>
1980
+ <span class="pf-v6-c-wizard__toggle-icon">
1981
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
1982
+ </span>
1983
+ </button>
1984
+ <div class="pf-v6-c-wizard__outer-wrap">
1985
+ <div class="pf-v6-c-wizard__inner-wrap">
1986
+ <nav class="pf-v6-c-wizard__nav pf-m-expanded" aria-label="Steps">
1987
+ <ol class="pf-v6-c-wizard__nav-list" role="list">
1988
+ <li class="pf-v6-c-wizard__nav-item">
1989
+ <button class="pf-v6-c-wizard__nav-link" type="button">
1990
+ <span class="pf-v6-c-wizard__nav-link-main">
1991
+ <span class="pf-v6-c-wizard__nav-link-text">Information</span>
1992
+ </span>
1993
+ </button>
1994
+ </li>
1995
+ <li class="pf-v6-c-wizard__nav-item pf-m-expandable pf-m-expanded">
1996
+ <button
1997
+ class="pf-v6-c-wizard__nav-link pf-m-danger pf-m-current"
1998
+ type="button"
1999
+ aria-expanded="true"
2000
+ >
2001
+ <span class="pf-v6-c-wizard__nav-link-status-icon">
2002
+ <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
2003
+ </span>
2004
+ <span class="pf-v6-c-wizard__nav-link-main">
2005
+ <span class="pf-v6-c-wizard__nav-link-text">Configuration</span>
2006
+ <span class="pf-v6-c-wizard__nav-link-toggle">
2007
+ <span class="pf-v6-c-wizard__nav-link-toggle-icon">
2008
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
2009
+ </span>
2010
+ </span>
2011
+ </span>
2012
+ </button>
2013
+ <ol class="pf-v6-c-wizard__nav-list" role="list">
2014
+ <li class="pf-v6-c-wizard__nav-item">
2015
+ <button class="pf-v6-c-wizard__nav-link" type="button">
2016
+ <span class="pf-v6-c-wizard__nav-link-main">
2017
+ <span class="pf-v6-c-wizard__nav-link-text">Substep A</span>
2018
+ </span>
2019
+ </button>
2020
+ </li>
2021
+ <li class="pf-v6-c-wizard__nav-item">
2022
+ <button
2023
+ class="pf-v6-c-wizard__nav-link pf-m-current"
2024
+ type="button"
2025
+ aria-current="page"
2026
+ >
2027
+ <span class="pf-v6-c-wizard__nav-link-main">
2028
+ <span class="pf-v6-c-wizard__nav-link-text">Substep B</span>
2029
+ </span>
2030
+ </button>
2031
+ </li>
2032
+ <li class="pf-v6-c-wizard__nav-item">
2033
+ <button class="pf-v6-c-wizard__nav-link" type="button">
2034
+ <span class="pf-v6-c-wizard__nav-link-main">
2035
+ <span class="pf-v6-c-wizard__nav-link-text">Substep C</span>
2036
+ </span>
2037
+ </button>
2038
+ </li>
2039
+ </ol>
2040
+ </li>
2041
+ <li class="pf-v6-c-wizard__nav-item">
2042
+ <button class="pf-v6-c-wizard__nav-link" type="button">
2043
+ <span class="pf-v6-c-wizard__nav-link-main">
2044
+ <span class="pf-v6-c-wizard__nav-link-text">Additional</span>
2045
+ </span>
2046
+ </button>
2047
+ </li>
2048
+ <li class="pf-v6-c-wizard__nav-item">
2049
+ <button class="pf-v6-c-wizard__nav-link" type="button" disabled>
2050
+ <span class="pf-v6-c-wizard__nav-link-main">
2051
+ <span class="pf-v6-c-wizard__nav-link-text">Review</span>
2052
+ </span>
2053
+ </button>
2054
+ </li>
2055
+ </ol>
2056
+ </nav>
2057
+ <main class="pf-v6-c-wizard__main" tabindex="0">
2058
+ <div class="pf-v6-c-wizard__main-body">
2059
+ <form class="pf-v6-c-form pf-m-limit-width" novalidate>
2060
+ <div class="pf-v6-c-form__group">
2061
+ <div class="pf-v6-c-form__group-label"><label
2062
+ class="pf-v6-c-form__label"
2063
+ for="wizard-error-on-step-nav-expanded-example-form-field1"
2064
+ >
2065
+ <span class="pf-v6-c-form__label-text">Field 1</span>&nbsp;<span
2066
+ class="pf-v6-c-form__label-required"
2067
+ aria-hidden="true"
2068
+ >&#42;</span></label>
2069
+ </div>
2070
+ <div class="pf-v6-c-form__group-control">
2071
+ <span class="pf-v6-c-form-control">
2072
+ <input
2073
+ type="text"
2074
+ id="wizard-error-on-step-nav-expanded-example-form-field1"
2075
+ name="wizard-error-on-step-nav-expanded-example-form-field1"
2076
+ />
2077
+ </span>
2078
+ </div>
2079
+ </div>
2080
+ <div class="pf-v6-c-form__group">
2081
+ <div class="pf-v6-c-form__group-label"><label
2082
+ class="pf-v6-c-form__label"
2083
+ for="wizard-error-on-step-nav-expanded-example-form-field2"
2084
+ >
2085
+ <span class="pf-v6-c-form__label-text">Field 2</span>&nbsp;<span
2086
+ class="pf-v6-c-form__label-required"
2087
+ aria-hidden="true"
2088
+ >&#42;</span></label>
2089
+ </div>
2090
+ <div class="pf-v6-c-form__group-control">
2091
+ <span class="pf-v6-c-form-control">
2092
+ <input
2093
+ type="text"
2094
+ id="wizard-error-on-step-nav-expanded-example-form-field2"
2095
+ name="wizard-error-on-step-nav-expanded-example-form-field2"
2096
+ />
2097
+ </span>
2098
+ </div>
2099
+ </div>
2100
+ <div class="pf-v6-c-form__group">
2101
+ <div class="pf-v6-c-form__group-label"><label
2102
+ class="pf-v6-c-form__label"
2103
+ for="wizard-error-on-step-nav-expanded-example-form-field3"
2104
+ >
2105
+ <span class="pf-v6-c-form__label-text">Field 3</span>&nbsp;<span
2106
+ class="pf-v6-c-form__label-required"
2107
+ aria-hidden="true"
2108
+ >&#42;</span></label>
2109
+ </div>
2110
+ <div class="pf-v6-c-form__group-control">
2111
+ <span class="pf-v6-c-form-control">
2112
+ <input
2113
+ type="text"
2114
+ id="wizard-error-on-step-nav-expanded-example-form-field3"
2115
+ name="wizard-error-on-step-nav-expanded-example-form-field3"
2116
+ />
2117
+ </span>
2118
+ </div>
2119
+ </div>
2120
+ <div class="pf-v6-c-form__group">
2121
+ <div class="pf-v6-c-form__group-label"><label
2122
+ class="pf-v6-c-form__label"
2123
+ for="wizard-error-on-step-nav-expanded-example-form-field4"
2124
+ >
2125
+ <span class="pf-v6-c-form__label-text">Field 4</span>&nbsp;<span
2126
+ class="pf-v6-c-form__label-required"
2127
+ aria-hidden="true"
2128
+ >&#42;</span></label>
2129
+ </div>
2130
+ <div class="pf-v6-c-form__group-control">
2131
+ <span class="pf-v6-c-form-control">
2132
+ <input
2133
+ type="text"
2134
+ id="wizard-error-on-step-nav-expanded-example-form-field4"
2135
+ name="wizard-error-on-step-nav-expanded-example-form-field4"
2136
+ />
2137
+ </span>
2138
+ </div>
2139
+ </div>
2140
+ <div class="pf-v6-c-form__group">
2141
+ <div class="pf-v6-c-form__group-label"><label
2142
+ class="pf-v6-c-form__label"
2143
+ for="wizard-error-on-step-nav-expanded-example-form-field5"
2144
+ >
2145
+ <span class="pf-v6-c-form__label-text">Field 5</span>&nbsp;<span
2146
+ class="pf-v6-c-form__label-required"
2147
+ aria-hidden="true"
2148
+ >&#42;</span></label>
2149
+ </div>
2150
+ <div class="pf-v6-c-form__group-control">
2151
+ <span class="pf-v6-c-form-control">
2152
+ <input
2153
+ type="text"
2154
+ id="wizard-error-on-step-nav-expanded-example-form-field5"
2155
+ name="wizard-error-on-step-nav-expanded-example-form-field5"
2156
+ />
2157
+ </span>
2158
+ </div>
2159
+ </div>
2160
+ <div class="pf-v6-c-form__group">
2161
+ <div class="pf-v6-c-form__group-label"><label
2162
+ class="pf-v6-c-form__label"
2163
+ for="wizard-error-on-step-nav-expanded-example-form-field6"
2164
+ >
2165
+ <span class="pf-v6-c-form__label-text">Field 6</span>&nbsp;<span
2166
+ class="pf-v6-c-form__label-required"
2167
+ aria-hidden="true"
2168
+ >&#42;</span></label>
2169
+ </div>
2170
+ <div class="pf-v6-c-form__group-control">
2171
+ <span class="pf-v6-c-form-control">
2172
+ <input
2173
+ type="text"
2174
+ id="wizard-error-on-step-nav-expanded-example-form-field6"
2175
+ name="wizard-error-on-step-nav-expanded-example-form-field6"
2176
+ />
2177
+ </span>
2178
+ </div>
2179
+ </div>
2180
+ <div class="pf-v6-c-form__group">
2181
+ <div class="pf-v6-c-form__group-label"><label
2182
+ class="pf-v6-c-form__label"
2183
+ for="wizard-error-on-step-nav-expanded-example-form-field7"
2184
+ >
2185
+ <span class="pf-v6-c-form__label-text">Field 7</span>&nbsp;<span
2186
+ class="pf-v6-c-form__label-required"
2187
+ aria-hidden="true"
2188
+ >&#42;</span></label>
2189
+ </div>
2190
+ <div class="pf-v6-c-form__group-control">
2191
+ <span class="pf-v6-c-form-control">
2192
+ <input
2193
+ type="text"
2194
+ id="wizard-error-on-step-nav-expanded-example-form-field7"
2195
+ name="wizard-error-on-step-nav-expanded-example-form-field7"
2196
+ />
2197
+ </span>
2198
+ </div>
2199
+ </div>
2200
+ </form>
2201
+ </div>
2202
+ </main>
2203
+ </div>
2204
+ <footer class="pf-v6-c-wizard__footer">
2205
+ <div class="pf-v6-c-action-list">
2206
+ <div class="pf-v6-c-action-list__group">
2207
+ <div class="pf-v6-c-action-list__item">
2208
+ <button class="pf-v6-c-button pf-m-secondary" type="button">
2209
+ <span class="pf-v6-c-button__text">Back</span>
2210
+ </button>
2211
+ </div>
2212
+ <div class="pf-v6-c-action-list__item">
2213
+ <button class="pf-v6-c-button pf-m-primary" type="button">
2214
+ <span class="pf-v6-c-button__text">Next</span>
2215
+ </button>
2216
+ </div>
2217
+ </div>
2218
+ <div class="pf-v6-c-action-list__group">
2219
+ <div class="pf-v6-c-action-list__item">
2220
+ <button class="pf-v6-c-button pf-m-link" type="button">
2221
+ <span class="pf-v6-c-button__text">Cancel</span>
2222
+ </button>
2223
+ </div>
2224
+ </div>
2225
+ </div>
2226
+ </footer>
2227
+ </div>
2228
+ </div>
2229
+
2230
+ ```
2231
+
2232
+ ### Success on step
2233
+
2234
+ ```html isFullscreen
2235
+ <div class="pf-v6-c-wizard">
2236
+ <div class="pf-v6-c-wizard__header">
2237
+ <div class="pf-v6-c-wizard__close">
2238
+ <button
2239
+ class="pf-v6-c-button pf-m-plain"
2240
+ type="button"
2241
+ aria-label="Close"
2242
+ >
2243
+ <span class="pf-v6-c-button__icon">
2244
+ <i class="fas fa-times" aria-hidden="true"></i>
2245
+ </span>
2246
+ </button>
2247
+ </div>
2248
+ <div class="pf-v6-c-wizard__title">
2249
+ <h1 class="pf-v6-c-wizard__title-text">Wizard title</h1>
2250
+ </div>
2251
+ <div class="pf-v6-c-wizard__description">Here is where the description goes</div>
2252
+ </div>
2253
+ <button
2254
+ aria-label="Wizard Header Toggle"
2255
+ class="pf-v6-c-wizard__toggle"
2256
+ aria-expanded="false"
2257
+ >
2258
+ <span class="pf-v6-c-wizard__toggle-list">
2259
+ <span class="pf-v6-c-wizard__toggle-list-item pf-m-success">
2260
+ <span class="pf-v6-c-wizard__toggle-status-icon">
2261
+ <i class="fas fa-check-circle" aria-hidden="true"></i>
2262
+ </span>
2263
+ Configuration
2264
+ <i
2265
+ class="fas fa-angle-right pf-v6-c-wizard__toggle-separator"
2266
+ aria-hidden="true"
2267
+ ></i>
2268
+ </span>
2269
+ <span class="pf-v6-c-wizard__toggle-list-item">Substep B</span>
2270
+ </span>
2271
+ <span class="pf-v6-c-wizard__toggle-icon">
2272
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
2273
+ </span>
2274
+ </button>
2275
+ <div class="pf-v6-c-wizard__outer-wrap">
2276
+ <div class="pf-v6-c-wizard__inner-wrap">
2277
+ <nav class="pf-v6-c-wizard__nav" aria-label="Steps">
2278
+ <ol class="pf-v6-c-wizard__nav-list" role="list">
2279
+ <li class="pf-v6-c-wizard__nav-item">
2280
+ <button class="pf-v6-c-wizard__nav-link" type="button">
2281
+ <span class="pf-v6-c-wizard__nav-link-main">
2282
+ <span class="pf-v6-c-wizard__nav-link-text">Information</span>
2283
+ </span>
2284
+ </button>
2285
+ </li>
2286
+ <li class="pf-v6-c-wizard__nav-item pf-m-expandable pf-m-expanded">
2287
+ <button
2288
+ class="pf-v6-c-wizard__nav-link pf-m-success pf-m-current"
2289
+ type="button"
2290
+ aria-expanded="true"
2291
+ >
2292
+ <span class="pf-v6-c-wizard__nav-link-status-icon">
2293
+ <i class="fas fa-check-circle" aria-hidden="true"></i>
2294
+ </span>
2295
+ <span class="pf-v6-c-wizard__nav-link-main">
2296
+ <span class="pf-v6-c-wizard__nav-link-text">Configuration</span>
2297
+ <span class="pf-v6-c-wizard__nav-link-toggle">
2298
+ <span class="pf-v6-c-wizard__nav-link-toggle-icon">
2299
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
2300
+ </span>
2301
+ </span>
2302
+ </span>
2303
+ </button>
2304
+ <ol class="pf-v6-c-wizard__nav-list" role="list">
2305
+ <li class="pf-v6-c-wizard__nav-item">
2306
+ <button class="pf-v6-c-wizard__nav-link" type="button">
2307
+ <span class="pf-v6-c-wizard__nav-link-main">
2308
+ <span class="pf-v6-c-wizard__nav-link-text">Substep A</span>
2309
+ </span>
2310
+ </button>
2311
+ </li>
2312
+ <li class="pf-v6-c-wizard__nav-item">
2313
+ <button
2314
+ class="pf-v6-c-wizard__nav-link pf-m-current"
2315
+ type="button"
2316
+ aria-current="page"
2317
+ >
2318
+ <span class="pf-v6-c-wizard__nav-link-main">
2319
+ <span class="pf-v6-c-wizard__nav-link-text">Substep B</span>
2320
+ </span>
2321
+ </button>
2322
+ </li>
2323
+ <li class="pf-v6-c-wizard__nav-item">
2324
+ <button class="pf-v6-c-wizard__nav-link" type="button">
2325
+ <span class="pf-v6-c-wizard__nav-link-main">
2326
+ <span class="pf-v6-c-wizard__nav-link-text">Substep C</span>
2327
+ </span>
2328
+ </button>
2329
+ </li>
2330
+ </ol>
2331
+ </li>
2332
+ <li class="pf-v6-c-wizard__nav-item">
2333
+ <button class="pf-v6-c-wizard__nav-link" type="button">
2334
+ <span class="pf-v6-c-wizard__nav-link-main">
2335
+ <span class="pf-v6-c-wizard__nav-link-text">Additional</span>
2336
+ </span>
2337
+ </button>
2338
+ </li>
2339
+ <li class="pf-v6-c-wizard__nav-item">
2340
+ <button class="pf-v6-c-wizard__nav-link" type="button" disabled>
2341
+ <span class="pf-v6-c-wizard__nav-link-main">
2342
+ <span class="pf-v6-c-wizard__nav-link-text">Review</span>
2343
+ </span>
2344
+ </button>
2345
+ </li>
2346
+ </ol>
2347
+ </nav>
2348
+ <main class="pf-v6-c-wizard__main" tabindex="0">
2349
+ <div class="pf-v6-c-wizard__main-body">
2350
+ <form class="pf-v6-c-form pf-m-limit-width" novalidate>
2351
+ <div class="pf-v6-c-form__group">
2352
+ <div class="pf-v6-c-form__group-label"><label
2353
+ class="pf-v6-c-form__label"
2354
+ for="wizard-success-on-step-example-form-field1"
2355
+ >
2356
+ <span class="pf-v6-c-form__label-text">Field 1</span>&nbsp;<span
2357
+ class="pf-v6-c-form__label-required"
2358
+ aria-hidden="true"
2359
+ >&#42;</span></label>
2360
+ </div>
2361
+ <div class="pf-v6-c-form__group-control">
2362
+ <span class="pf-v6-c-form-control">
2363
+ <input
2364
+ type="text"
2365
+ id="wizard-success-on-step-example-form-field1"
2366
+ name="wizard-success-on-step-example-form-field1"
2367
+ />
2368
+ </span>
2369
+ </div>
2370
+ </div>
2371
+ <div class="pf-v6-c-form__group">
2372
+ <div class="pf-v6-c-form__group-label"><label
2373
+ class="pf-v6-c-form__label"
2374
+ for="wizard-success-on-step-example-form-field2"
2375
+ >
2376
+ <span class="pf-v6-c-form__label-text">Field 2</span>&nbsp;<span
2377
+ class="pf-v6-c-form__label-required"
2378
+ aria-hidden="true"
2379
+ >&#42;</span></label>
2380
+ </div>
2381
+ <div class="pf-v6-c-form__group-control">
2382
+ <span class="pf-v6-c-form-control">
2383
+ <input
2384
+ type="text"
2385
+ id="wizard-success-on-step-example-form-field2"
2386
+ name="wizard-success-on-step-example-form-field2"
2387
+ />
2388
+ </span>
2389
+ </div>
2390
+ </div>
2391
+ <div class="pf-v6-c-form__group">
2392
+ <div class="pf-v6-c-form__group-label"><label
2393
+ class="pf-v6-c-form__label"
2394
+ for="wizard-success-on-step-example-form-field3"
2395
+ >
2396
+ <span class="pf-v6-c-form__label-text">Field 3</span>&nbsp;<span
2397
+ class="pf-v6-c-form__label-required"
2398
+ aria-hidden="true"
2399
+ >&#42;</span></label>
2400
+ </div>
2401
+ <div class="pf-v6-c-form__group-control">
2402
+ <span class="pf-v6-c-form-control">
2403
+ <input
2404
+ type="text"
2405
+ id="wizard-success-on-step-example-form-field3"
2406
+ name="wizard-success-on-step-example-form-field3"
2407
+ />
2408
+ </span>
2409
+ </div>
2410
+ </div>
2411
+ <div class="pf-v6-c-form__group">
2412
+ <div class="pf-v6-c-form__group-label"><label
2413
+ class="pf-v6-c-form__label"
2414
+ for="wizard-success-on-step-example-form-field4"
2415
+ >
2416
+ <span class="pf-v6-c-form__label-text">Field 4</span>&nbsp;<span
2417
+ class="pf-v6-c-form__label-required"
2418
+ aria-hidden="true"
2419
+ >&#42;</span></label>
2420
+ </div>
2421
+ <div class="pf-v6-c-form__group-control">
2422
+ <span class="pf-v6-c-form-control">
2423
+ <input
2424
+ type="text"
2425
+ id="wizard-success-on-step-example-form-field4"
2426
+ name="wizard-success-on-step-example-form-field4"
2427
+ />
2428
+ </span>
2429
+ </div>
2430
+ </div>
2431
+ <div class="pf-v6-c-form__group">
2432
+ <div class="pf-v6-c-form__group-label"><label
2433
+ class="pf-v6-c-form__label"
2434
+ for="wizard-success-on-step-example-form-field5"
2435
+ >
2436
+ <span class="pf-v6-c-form__label-text">Field 5</span>&nbsp;<span
2437
+ class="pf-v6-c-form__label-required"
2438
+ aria-hidden="true"
2439
+ >&#42;</span></label>
2440
+ </div>
2441
+ <div class="pf-v6-c-form__group-control">
2442
+ <span class="pf-v6-c-form-control">
2443
+ <input
2444
+ type="text"
2445
+ id="wizard-success-on-step-example-form-field5"
2446
+ name="wizard-success-on-step-example-form-field5"
2447
+ />
2448
+ </span>
2449
+ </div>
2450
+ </div>
2451
+ <div class="pf-v6-c-form__group">
2452
+ <div class="pf-v6-c-form__group-label"><label
2453
+ class="pf-v6-c-form__label"
2454
+ for="wizard-success-on-step-example-form-field6"
2455
+ >
2456
+ <span class="pf-v6-c-form__label-text">Field 6</span>&nbsp;<span
2457
+ class="pf-v6-c-form__label-required"
2458
+ aria-hidden="true"
2459
+ >&#42;</span></label>
2460
+ </div>
2461
+ <div class="pf-v6-c-form__group-control">
2462
+ <span class="pf-v6-c-form-control">
2463
+ <input
2464
+ type="text"
2465
+ id="wizard-success-on-step-example-form-field6"
2466
+ name="wizard-success-on-step-example-form-field6"
2467
+ />
2468
+ </span>
2469
+ </div>
2470
+ </div>
2471
+ <div class="pf-v6-c-form__group">
2472
+ <div class="pf-v6-c-form__group-label"><label
2473
+ class="pf-v6-c-form__label"
2474
+ for="wizard-success-on-step-example-form-field7"
2475
+ >
2476
+ <span class="pf-v6-c-form__label-text">Field 7</span>&nbsp;<span
2477
+ class="pf-v6-c-form__label-required"
2478
+ aria-hidden="true"
2479
+ >&#42;</span></label>
2480
+ </div>
2481
+ <div class="pf-v6-c-form__group-control">
2482
+ <span class="pf-v6-c-form-control">
2483
+ <input
2484
+ type="text"
2485
+ id="wizard-success-on-step-example-form-field7"
2486
+ name="wizard-success-on-step-example-form-field7"
2487
+ />
2488
+ </span>
2489
+ </div>
2490
+ </div>
2491
+ </form>
2492
+ </div>
2493
+ </main>
2494
+ </div>
2495
+ <footer class="pf-v6-c-wizard__footer">
2496
+ <div class="pf-v6-c-action-list">
2497
+ <div class="pf-v6-c-action-list__group">
2498
+ <div class="pf-v6-c-action-list__item">
2499
+ <button class="pf-v6-c-button pf-m-secondary" type="button">
2500
+ <span class="pf-v6-c-button__text">Back</span>
2501
+ </button>
2502
+ </div>
2503
+ <div class="pf-v6-c-action-list__item">
2504
+ <button class="pf-v6-c-button pf-m-primary" type="button">
2505
+ <span class="pf-v6-c-button__text">Next</span>
2506
+ </button>
2507
+ </div>
2508
+ </div>
2509
+ <div class="pf-v6-c-action-list__group">
2510
+ <div class="pf-v6-c-action-list__item">
2511
+ <button class="pf-v6-c-button pf-m-link" type="button">
2512
+ <span class="pf-v6-c-button__text">Cancel</span>
2513
+ </button>
2514
+ </div>
2515
+ </div>
2516
+ </div>
2517
+ </footer>
2518
+ </div>
2519
+ </div>
2520
+
2521
+ ```
2522
+
2523
+ ### Nav expanded with success (mobile)
2524
+
2525
+ ```html isFullscreen
2526
+ <div class="pf-v6-c-wizard">
2527
+ <div class="pf-v6-c-wizard__header">
2528
+ <div class="pf-v6-c-wizard__close">
2529
+ <button
2530
+ class="pf-v6-c-button pf-m-plain"
2531
+ type="button"
2532
+ aria-label="Close"
2533
+ >
2534
+ <span class="pf-v6-c-button__icon">
2535
+ <i class="fas fa-times" aria-hidden="true"></i>
2536
+ </span>
2537
+ </button>
2538
+ </div>
2539
+ <div class="pf-v6-c-wizard__title">
2540
+ <h1 class="pf-v6-c-wizard__title-text">Wizard title</h1>
2541
+ </div>
2542
+ <div class="pf-v6-c-wizard__description">Here is where the description goes</div>
2543
+ </div>
2544
+ <button
2545
+ aria-label="Wizard Header Toggle"
2546
+ class="pf-v6-c-wizard__toggle pf-m-expanded"
2547
+ aria-expanded="true"
2548
+ >
2549
+ <span class="pf-v6-c-wizard__toggle-list">
2550
+ <span class="pf-v6-c-wizard__toggle-list-item pf-m-success">
2551
+ <span class="pf-v6-c-wizard__toggle-status-icon">
2552
+ <i class="fas fa-check-circle" aria-hidden="true"></i>
2553
+ </span>
2554
+ Configuration
2555
+ <i
2556
+ class="fas fa-angle-right pf-v6-c-wizard__toggle-separator"
2557
+ aria-hidden="true"
2558
+ ></i>
2559
+ </span>
2560
+ <span class="pf-v6-c-wizard__toggle-list-item">Substep B</span>
2561
+ </span>
2562
+ <span class="pf-v6-c-wizard__toggle-icon">
2563
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
2564
+ </span>
2565
+ </button>
2566
+ <div class="pf-v6-c-wizard__outer-wrap">
2567
+ <div class="pf-v6-c-wizard__inner-wrap">
2568
+ <nav class="pf-v6-c-wizard__nav pf-m-expanded" aria-label="Steps">
2569
+ <ol class="pf-v6-c-wizard__nav-list" role="list">
2570
+ <li class="pf-v6-c-wizard__nav-item">
2571
+ <button class="pf-v6-c-wizard__nav-link" type="button">
2572
+ <span class="pf-v6-c-wizard__nav-link-main">
2573
+ <span class="pf-v6-c-wizard__nav-link-text">Information</span>
2574
+ </span>
2575
+ </button>
2576
+ </li>
2577
+ <li class="pf-v6-c-wizard__nav-item pf-m-expandable pf-m-expanded">
2578
+ <button
2579
+ class="pf-v6-c-wizard__nav-link pf-m-success pf-m-current"
2580
+ type="button"
2581
+ aria-expanded="true"
2582
+ >
2583
+ <span class="pf-v6-c-wizard__nav-link-status-icon">
2584
+ <i class="fas fa-check-circle" aria-hidden="true"></i>
2585
+ </span>
2586
+ <span class="pf-v6-c-wizard__nav-link-main">
2587
+ <span class="pf-v6-c-wizard__nav-link-text">Configuration</span>
2588
+ <span class="pf-v6-c-wizard__nav-link-toggle">
2589
+ <span class="pf-v6-c-wizard__nav-link-toggle-icon">
2590
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
2591
+ </span>
2592
+ </span>
2593
+ </span>
2594
+ </button>
2595
+ <ol class="pf-v6-c-wizard__nav-list" role="list">
2596
+ <li class="pf-v6-c-wizard__nav-item">
2597
+ <button class="pf-v6-c-wizard__nav-link" type="button">
2598
+ <span class="pf-v6-c-wizard__nav-link-main">
2599
+ <span class="pf-v6-c-wizard__nav-link-text">Substep A</span>
2600
+ </span>
2601
+ </button>
2602
+ </li>
2603
+ <li class="pf-v6-c-wizard__nav-item">
2604
+ <button
2605
+ class="pf-v6-c-wizard__nav-link pf-m-current"
2606
+ type="button"
2607
+ aria-current="page"
2608
+ >
2609
+ <span class="pf-v6-c-wizard__nav-link-main">
2610
+ <span class="pf-v6-c-wizard__nav-link-text">Substep B</span>
2611
+ </span>
2612
+ </button>
2613
+ </li>
2614
+ <li class="pf-v6-c-wizard__nav-item">
2615
+ <button class="pf-v6-c-wizard__nav-link" type="button">
2616
+ <span class="pf-v6-c-wizard__nav-link-main">
2617
+ <span class="pf-v6-c-wizard__nav-link-text">Substep C</span>
2618
+ </span>
2619
+ </button>
2620
+ </li>
2621
+ </ol>
2622
+ </li>
2623
+ <li class="pf-v6-c-wizard__nav-item">
2624
+ <button class="pf-v6-c-wizard__nav-link" type="button">
2625
+ <span class="pf-v6-c-wizard__nav-link-main">
2626
+ <span class="pf-v6-c-wizard__nav-link-text">Additional</span>
2627
+ </span>
2628
+ </button>
2629
+ </li>
2630
+ <li class="pf-v6-c-wizard__nav-item">
2631
+ <button class="pf-v6-c-wizard__nav-link" type="button" disabled>
2632
+ <span class="pf-v6-c-wizard__nav-link-main">
2633
+ <span class="pf-v6-c-wizard__nav-link-text">Review</span>
2634
+ </span>
2635
+ </button>
2636
+ </li>
2637
+ </ol>
2638
+ </nav>
2639
+ <main class="pf-v6-c-wizard__main" tabindex="0">
2640
+ <div class="pf-v6-c-wizard__main-body">
2641
+ <form class="pf-v6-c-form pf-m-limit-width" novalidate>
2642
+ <div class="pf-v6-c-form__group">
2643
+ <div class="pf-v6-c-form__group-label"><label
2644
+ class="pf-v6-c-form__label"
2645
+ for="wizard-success-on-step-nav-expanded-example-form-field1"
2646
+ >
2647
+ <span class="pf-v6-c-form__label-text">Field 1</span>&nbsp;<span
2648
+ class="pf-v6-c-form__label-required"
2649
+ aria-hidden="true"
2650
+ >&#42;</span></label>
2651
+ </div>
2652
+ <div class="pf-v6-c-form__group-control">
2653
+ <span class="pf-v6-c-form-control">
2654
+ <input
2655
+ type="text"
2656
+ id="wizard-success-on-step-nav-expanded-example-form-field1"
2657
+ name="wizard-success-on-step-nav-expanded-example-form-field1"
2658
+ />
2659
+ </span>
2660
+ </div>
2661
+ </div>
2662
+ <div class="pf-v6-c-form__group">
2663
+ <div class="pf-v6-c-form__group-label"><label
2664
+ class="pf-v6-c-form__label"
2665
+ for="wizard-success-on-step-nav-expanded-example-form-field2"
2666
+ >
2667
+ <span class="pf-v6-c-form__label-text">Field 2</span>&nbsp;<span
2668
+ class="pf-v6-c-form__label-required"
2669
+ aria-hidden="true"
2670
+ >&#42;</span></label>
2671
+ </div>
2672
+ <div class="pf-v6-c-form__group-control">
2673
+ <span class="pf-v6-c-form-control">
2674
+ <input
2675
+ type="text"
2676
+ id="wizard-success-on-step-nav-expanded-example-form-field2"
2677
+ name="wizard-success-on-step-nav-expanded-example-form-field2"
2678
+ />
2679
+ </span>
2680
+ </div>
2681
+ </div>
2682
+ <div class="pf-v6-c-form__group">
2683
+ <div class="pf-v6-c-form__group-label"><label
2684
+ class="pf-v6-c-form__label"
2685
+ for="wizard-success-on-step-nav-expanded-example-form-field3"
2686
+ >
2687
+ <span class="pf-v6-c-form__label-text">Field 3</span>&nbsp;<span
2688
+ class="pf-v6-c-form__label-required"
2689
+ aria-hidden="true"
2690
+ >&#42;</span></label>
2691
+ </div>
2692
+ <div class="pf-v6-c-form__group-control">
2693
+ <span class="pf-v6-c-form-control">
2694
+ <input
2695
+ type="text"
2696
+ id="wizard-success-on-step-nav-expanded-example-form-field3"
2697
+ name="wizard-success-on-step-nav-expanded-example-form-field3"
2698
+ />
2699
+ </span>
2700
+ </div>
2701
+ </div>
2702
+ <div class="pf-v6-c-form__group">
2703
+ <div class="pf-v6-c-form__group-label"><label
2704
+ class="pf-v6-c-form__label"
2705
+ for="wizard-success-on-step-nav-expanded-example-form-field4"
2706
+ >
2707
+ <span class="pf-v6-c-form__label-text">Field 4</span>&nbsp;<span
2708
+ class="pf-v6-c-form__label-required"
2709
+ aria-hidden="true"
2710
+ >&#42;</span></label>
2711
+ </div>
2712
+ <div class="pf-v6-c-form__group-control">
2713
+ <span class="pf-v6-c-form-control">
2714
+ <input
2715
+ type="text"
2716
+ id="wizard-success-on-step-nav-expanded-example-form-field4"
2717
+ name="wizard-success-on-step-nav-expanded-example-form-field4"
2718
+ />
2719
+ </span>
2720
+ </div>
2721
+ </div>
2722
+ <div class="pf-v6-c-form__group">
2723
+ <div class="pf-v6-c-form__group-label"><label
2724
+ class="pf-v6-c-form__label"
2725
+ for="wizard-success-on-step-nav-expanded-example-form-field5"
2726
+ >
2727
+ <span class="pf-v6-c-form__label-text">Field 5</span>&nbsp;<span
2728
+ class="pf-v6-c-form__label-required"
2729
+ aria-hidden="true"
2730
+ >&#42;</span></label>
2731
+ </div>
2732
+ <div class="pf-v6-c-form__group-control">
2733
+ <span class="pf-v6-c-form-control">
2734
+ <input
2735
+ type="text"
2736
+ id="wizard-success-on-step-nav-expanded-example-form-field5"
2737
+ name="wizard-success-on-step-nav-expanded-example-form-field5"
2738
+ />
2739
+ </span>
2740
+ </div>
2741
+ </div>
2742
+ <div class="pf-v6-c-form__group">
2743
+ <div class="pf-v6-c-form__group-label"><label
2744
+ class="pf-v6-c-form__label"
2745
+ for="wizard-success-on-step-nav-expanded-example-form-field6"
2746
+ >
2747
+ <span class="pf-v6-c-form__label-text">Field 6</span>&nbsp;<span
2748
+ class="pf-v6-c-form__label-required"
2749
+ aria-hidden="true"
2750
+ >&#42;</span></label>
2751
+ </div>
2752
+ <div class="pf-v6-c-form__group-control">
2753
+ <span class="pf-v6-c-form-control">
2754
+ <input
2755
+ type="text"
2756
+ id="wizard-success-on-step-nav-expanded-example-form-field6"
2757
+ name="wizard-success-on-step-nav-expanded-example-form-field6"
2758
+ />
2759
+ </span>
2760
+ </div>
2761
+ </div>
2762
+ <div class="pf-v6-c-form__group">
2763
+ <div class="pf-v6-c-form__group-label"><label
2764
+ class="pf-v6-c-form__label"
2765
+ for="wizard-success-on-step-nav-expanded-example-form-field7"
2766
+ >
2767
+ <span class="pf-v6-c-form__label-text">Field 7</span>&nbsp;<span
2768
+ class="pf-v6-c-form__label-required"
2769
+ aria-hidden="true"
2770
+ >&#42;</span></label>
2771
+ </div>
2772
+ <div class="pf-v6-c-form__group-control">
2773
+ <span class="pf-v6-c-form-control">
2774
+ <input
2775
+ type="text"
2776
+ id="wizard-success-on-step-nav-expanded-example-form-field7"
2777
+ name="wizard-success-on-step-nav-expanded-example-form-field7"
2778
+ />
2779
+ </span>
2780
+ </div>
2781
+ </div>
2782
+ </form>
2783
+ </div>
2784
+ </main>
2785
+ </div>
2786
+ <footer class="pf-v6-c-wizard__footer">
2787
+ <div class="pf-v6-c-action-list">
2788
+ <div class="pf-v6-c-action-list__group">
2789
+ <div class="pf-v6-c-action-list__item">
2790
+ <button class="pf-v6-c-button pf-m-secondary" type="button">
2791
+ <span class="pf-v6-c-button__text">Back</span>
2792
+ </button>
2793
+ </div>
2794
+ <div class="pf-v6-c-action-list__item">
2795
+ <button class="pf-v6-c-button pf-m-primary" type="button">
2796
+ <span class="pf-v6-c-button__text">Next</span>
2797
+ </button>
2798
+ </div>
2799
+ </div>
2800
+ <div class="pf-v6-c-action-list__group">
2801
+ <div class="pf-v6-c-action-list__item">
2802
+ <button class="pf-v6-c-button pf-m-link" type="button">
2803
+ <span class="pf-v6-c-button__text">Cancel</span>
2804
+ </button>
2805
+ </div>
2806
+ </div>
1342
2807
  </div>
1343
2808
  </footer>
1344
2809
  </div>
@@ -1387,7 +2852,9 @@ wrapperTag: div
1387
2852
  | `.pf-v6-c-wizard__nav-list` | `<ol>` | Initiates a list of steps. **Required** |
1388
2853
  | `.pf-v6-c-wizard__nav-item` | `<li>` | Initiates a step list item. **Required** |
1389
2854
  | `.pf-v6-c-wizard__nav-link` | `<a>`, `<button>` | Initiates a step link. **Required** |
2855
+ | `.pf-v6-c-wizard__nav-link-main` | `<span>` | Initiates main link container. **Required** |
1390
2856
  | `.pf-v6-c-wizard__nav-link-text` | `<span>` | Initiates the link text container. **Required when nav item is expandable** |
2857
+ | `.pf-v6-c-wizard__nav-link-status-icon` | `<span>` | Initiates the status icon container. |
1391
2858
  | `.pf-v6-c-wizard__nav-link-toggle` | `<span>` | Initiates the toggle container. **Required when nav item is expandable** |
1392
2859
  | `.pf-v6-c-wizard__nav-link-toggle-icon` | `<span>` | Initiates the toggle icon container. **Required when nav item is expandable** |
1393
2860
  | `.pf-v6-c-wizard__main` | `<main>`, `<div>` | Initiates the main container. **Required** Note: use the `<main>` element when when there are no other `<main>` elements on the page.|
@@ -1400,4 +2867,6 @@ wrapperTag: div
1400
2867
  | `.pf-m-expanded` | `.pf-v6-c-wizard__nav-item` | Modifies a nav item for the expanded state. |
1401
2868
  | `.pf-m-current` | `.pf-v6-c-wizard__nav-link` | Modifies a step link for the current state. **Required** |
1402
2869
  | `.pf-m-disabled` | `.pf-v6-c-wizard__nav-link` | Modifies a step link for the disabled state. |
2870
+ | `.pf-m-success` | `.pf-v6-c-wizard__nav-link`, `.pf-v6-c-wizard__toggle-list-item` | Modifies a step link to indicate success status. |
2871
+ | `.pf-m-danger` | `.pf-v6-c-wizard__nav-link`, `.pf-v6-c-wizard__toggle-list-item` | Modifies a step link to indicate danger status. |
1403
2872
  | `.pf-m-no-padding` | `.pf-v6-c-wizard__main-body` | Modifies the main container body to remove the padding. |