@patternfly/patternfly 6.0.0-alpha.121 → 6.0.0-alpha.123

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 (175) hide show
  1. package/base/patternfly-variables.css +9 -22
  2. package/base/patternfly-variables.scss +11 -5
  3. package/base/tokens/_index.scss +1 -0
  4. package/base/tokens/tokens-charts-dark.scss +169 -0
  5. package/base/tokens/tokens-charts.scss +75 -65
  6. package/base/tokens/tokens-dark.scss +4 -5
  7. package/base/tokens/tokens-default.scss +10 -11
  8. package/base/tokens/tokens-font.scss +1 -1
  9. package/base/tokens/tokens-palette.scss +4 -5
  10. package/components/AboutModalBox/about-modal-box.css +54 -54
  11. package/components/AboutModalBox/about-modal-box.scss +54 -54
  12. package/components/Accordion/accordion.css +39 -39
  13. package/components/Accordion/accordion.scss +39 -39
  14. package/components/Alert/alert-group.css +15 -15
  15. package/components/Alert/alert-group.scss +15 -15
  16. package/components/Alert/alert.css +46 -46
  17. package/components/Alert/alert.scss +46 -46
  18. package/components/AppLauncher/app-launcher.css +58 -58
  19. package/components/AppLauncher/app-launcher.scss +58 -58
  20. package/components/BackToTop/back-to-top.css +14 -14
  21. package/components/BackToTop/back-to-top.scss +14 -14
  22. package/components/Badge/badge.css +6 -6
  23. package/components/Badge/badge.scss +6 -6
  24. package/components/Banner/banner.css +12 -12
  25. package/components/Banner/banner.scss +12 -12
  26. package/components/Breadcrumb/breadcrumb.css +12 -12
  27. package/components/Breadcrumb/breadcrumb.scss +12 -12
  28. package/components/Button/button.css +93 -93
  29. package/components/Button/button.scss +93 -93
  30. package/components/CalendarMonth/calendar-month.css +42 -42
  31. package/components/CalendarMonth/calendar-month.scss +42 -42
  32. package/components/Card/card.css +59 -59
  33. package/components/Card/card.scss +59 -59
  34. package/components/Check/check.css +2 -2
  35. package/components/Check/check.scss +2 -2
  36. package/components/Chip/chip-group.css +20 -20
  37. package/components/Chip/chip-group.scss +20 -20
  38. package/components/Chip/chip.css +26 -26
  39. package/components/Chip/chip.scss +26 -26
  40. package/components/ClipboardCopy/clipboard-copy.css +36 -36
  41. package/components/ClipboardCopy/clipboard-copy.scss +36 -36
  42. package/components/CodeBlock/code-block.css +19 -19
  43. package/components/CodeBlock/code-block.scss +19 -19
  44. package/components/CodeEditor/code-editor.css +33 -33
  45. package/components/CodeEditor/code-editor.scss +33 -33
  46. package/components/Content/content.css +65 -65
  47. package/components/Content/content.scss +65 -65
  48. package/components/ContextSelector/context-selector.css +145 -145
  49. package/components/ContextSelector/context-selector.scss +145 -145
  50. package/components/DataList/data-list-grid.css +98 -98
  51. package/components/DataList/data-list-grid.scss +14 -14
  52. package/components/DataList/data-list.css +233 -233
  53. package/components/DataList/data-list.scss +135 -135
  54. package/components/DatePicker/date-picker.css +14 -14
  55. package/components/DatePicker/date-picker.scss +14 -14
  56. package/components/DescriptionList/description-list.css +6 -6
  57. package/components/DescriptionList/description-list.scss +6 -6
  58. package/components/Drawer/drawer.css +84 -84
  59. package/components/Drawer/drawer.scss +84 -84
  60. package/components/Dropdown/dropdown.css +126 -126
  61. package/components/Dropdown/dropdown.scss +126 -126
  62. package/components/DualListSelector/dual-list-selector.css +59 -58
  63. package/components/DualListSelector/dual-list-selector.scss +41 -40
  64. package/components/EmptyState/empty-state.css +32 -32
  65. package/components/EmptyState/empty-state.scss +32 -32
  66. package/components/ExpandableSection/expandable-section.css +48 -48
  67. package/components/ExpandableSection/expandable-section.scss +48 -48
  68. package/components/Form/form.css +106 -106
  69. package/components/Form/form.scss +88 -88
  70. package/components/FormControl/form-control.css +44 -44
  71. package/components/FormControl/form-control.scss +44 -44
  72. package/components/HelperText/helper-text.css +2 -2
  73. package/components/HelperText/helper-text.scss +2 -2
  74. package/components/Hint/hint.css +16 -16
  75. package/components/Hint/hint.scss +16 -16
  76. package/components/InlineEdit/inline-edit.css +10 -10
  77. package/components/InlineEdit/inline-edit.scss +10 -10
  78. package/components/InputGroup/input-group.css +16 -16
  79. package/components/InputGroup/input-group.scss +16 -16
  80. package/components/JumpLinks/jump-links.css +75 -75
  81. package/components/JumpLinks/jump-links.scss +75 -75
  82. package/components/Label/label-group.css +26 -26
  83. package/components/Label/label-group.scss +26 -26
  84. package/components/Label/label.css +30 -30
  85. package/components/Label/label.scss +30 -30
  86. package/components/List/list.css +27 -27
  87. package/components/List/list.scss +27 -27
  88. package/components/LogViewer/log-viewer.css +36 -36
  89. package/components/LogViewer/log-viewer.scss +37 -37
  90. package/components/Login/login.css +88 -88
  91. package/components/Login/login.scss +88 -88
  92. package/components/Menu/menu.css +20 -20
  93. package/components/Menu/menu.scss +20 -20
  94. package/components/MenuToggle/menu-toggle.css +58 -58
  95. package/components/MenuToggle/menu-toggle.scss +58 -58
  96. package/components/ModalBox/modal-box.css +39 -39
  97. package/components/ModalBox/modal-box.scss +39 -39
  98. package/components/MultipleFileUpload/multiple-file-upload.css +32 -32
  99. package/components/MultipleFileUpload/multiple-file-upload.scss +32 -32
  100. package/components/NotificationBadge/notification-badge.css +16 -16
  101. package/components/NotificationBadge/notification-badge.scss +16 -16
  102. package/components/NotificationDrawer/notification-drawer.css +41 -41
  103. package/components/NotificationDrawer/notification-drawer.scss +41 -41
  104. package/components/NumberInput/number-input.css +2 -2
  105. package/components/NumberInput/number-input.scss +2 -2
  106. package/components/OptionsMenu/options-menu.css +79 -79
  107. package/components/OptionsMenu/options-menu.scss +79 -79
  108. package/components/Page/page.css +181 -181
  109. package/components/Page/page.scss +131 -131
  110. package/components/Pagination/pagination.css +24 -24
  111. package/components/Pagination/pagination.scss +24 -24
  112. package/components/Panel/panel.css +24 -24
  113. package/components/Panel/panel.scss +24 -24
  114. package/components/Popover/popover.css +48 -48
  115. package/components/Popover/popover.scss +48 -48
  116. package/components/Progress/progress.css +4 -4
  117. package/components/Progress/progress.scss +4 -4
  118. package/components/ProgressStepper/progress-stepper.css +225 -225
  119. package/components/ProgressStepper/progress-stepper.scss +93 -93
  120. package/components/Radio/radio.css +6 -6
  121. package/components/Radio/radio.scss +6 -6
  122. package/components/Select/select.css +171 -171
  123. package/components/Select/select.scss +171 -171
  124. package/components/Sidebar/sidebar.css +44 -44
  125. package/components/Sidebar/sidebar.scss +44 -44
  126. package/components/SimpleList/simple-list.css +18 -18
  127. package/components/SimpleList/simple-list.scss +18 -18
  128. package/components/Skeleton/skeleton.css +4 -4
  129. package/components/Skeleton/skeleton.scss +4 -4
  130. package/components/SkipToContent/skip-to-content.css +4 -4
  131. package/components/SkipToContent/skip-to-content.scss +4 -4
  132. package/components/Slider/slider.css +25 -25
  133. package/components/Slider/slider.scss +25 -25
  134. package/components/Switch/switch.css +4 -4
  135. package/components/Switch/switch.scss +4 -4
  136. package/components/TabContent/tab-content.css +24 -24
  137. package/components/TabContent/tab-content.scss +24 -24
  138. package/components/Table/table-grid.css +404 -404
  139. package/components/Table/table-grid.scss +116 -116
  140. package/components/Table/table-scrollable.css +16 -16
  141. package/components/Table/table-scrollable.scss +16 -16
  142. package/components/Table/table-tree-view.css +251 -251
  143. package/components/Table/table-tree-view.scss +59 -59
  144. package/components/Table/table.css +122 -122
  145. package/components/Table/table.scss +122 -122
  146. package/components/Tabs/tabs.css +118 -118
  147. package/components/Tabs/tabs.scss +118 -118
  148. package/components/TextInputGroup/text-input-group.css +26 -26
  149. package/components/TextInputGroup/text-input-group.scss +26 -26
  150. package/components/Tile/tile.css +13 -13
  151. package/components/Tile/tile.scss +13 -13
  152. package/components/ToggleGroup/toggle-group.css +28 -28
  153. package/components/ToggleGroup/toggle-group.scss +28 -28
  154. package/components/Tooltip/tooltip.css +26 -26
  155. package/components/Tooltip/tooltip.scss +26 -26
  156. package/components/TreeView/tree-view.css +181 -181
  157. package/components/TreeView/tree-view.scss +122 -122
  158. package/components/Wizard/wizard.css +158 -119
  159. package/components/Wizard/wizard.scss +176 -126
  160. package/components/_index.css +4310 -4270
  161. package/docs/components/Drawer/examples/Drawer.md +1 -1
  162. package/docs/components/Slider/examples/Slider.md +39 -39
  163. package/docs/components/Table/examples/Table.md +20 -20
  164. package/docs/components/Wizard/examples/Wizard.md +827 -91
  165. package/docs/demos/Card/examples/Card.css +2 -2
  166. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +4 -44
  167. package/docs/demos/Table/examples/Table.md +20 -20
  168. package/docs/demos/Wizard/examples/Wizard.md +356 -198
  169. package/package.json +1 -1
  170. package/patternfly-base-no-globals.css +9 -22
  171. package/patternfly-base.css +9 -22
  172. package/patternfly-no-globals.css +4319 -4292
  173. package/patternfly.css +4319 -4292
  174. package/patternfly.min.css +1 -1
  175. package/patternfly.min.css.map +1 -1
package/docs/components/Wizard/examples/Wizard.md CHANGED
@@ -51,7 +51,11 @@ wrapperTag: div
51
51
  <nav class="pf-v6-c-wizard__nav" aria-label="Steps">
52
52
  <ol class="pf-v6-c-wizard__nav-list" role="list">
53
53
  <li class="pf-v6-c-wizard__nav-item">
54
- <button class="pf-v6-c-wizard__nav-link" type="button">Information</button>
54
+ <button class="pf-v6-c-wizard__nav-link" type="button">
55
+ <span class="pf-v6-c-wizard__nav-link-main">
56
+ <span class="pf-v6-c-wizard__nav-link-text">Information</span>
57
+ </span>
58
+ </button>
55
59
  </li>
56
60
  <li class="pf-v6-c-wizard__nav-item pf-m-expandable pf-m-expanded">
57
61
  <button
@@ -59,38 +63,56 @@ wrapperTag: div
59
63
  type="button"
60
64
  aria-expanded="true"
61
65
  >
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>
66
+ <span class="pf-v6-c-wizard__nav-link-main">
67
+ <span class="pf-v6-c-wizard__nav-link-text">Configuration</span>
68
+ <span class="pf-v6-c-wizard__nav-link-toggle">
69
+ <span class="pf-v6-c-wizard__nav-link-toggle-icon">
70
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
71
+ </span>
66
72
  </span>
67
73
  </span>
68
74
  </button>
69
75
  <ol class="pf-v6-c-wizard__nav-list" role="list">
70
76
  <li class="pf-v6-c-wizard__nav-item">
71
- <button class="pf-v6-c-wizard__nav-link" type="button">Substep A</button>
77
+ <button class="pf-v6-c-wizard__nav-link" type="button">
78
+ <span class="pf-v6-c-wizard__nav-link-main">
79
+ <span class="pf-v6-c-wizard__nav-link-text">Substep A</span>
80
+ </span>
81
+ </button>
72
82
  </li>
73
83
  <li class="pf-v6-c-wizard__nav-item">
74
84
  <button
75
85
  class="pf-v6-c-wizard__nav-link pf-m-current"
76
86
  type="button"
77
87
  aria-current="page"
78
- >Substep B</button>
88
+ >
89
+ <span class="pf-v6-c-wizard__nav-link-main">
90
+ <span class="pf-v6-c-wizard__nav-link-text">Substep B</span>
91
+ </span>
92
+ </button>
79
93
  </li>
80
94
  <li class="pf-v6-c-wizard__nav-item">
81
- <button class="pf-v6-c-wizard__nav-link" type="button">Substep C</button>
95
+ <button class="pf-v6-c-wizard__nav-link" type="button">
96
+ <span class="pf-v6-c-wizard__nav-link-main">
97
+ <span class="pf-v6-c-wizard__nav-link-text">Substep C</span>
98
+ </span>
99
+ </button>
82
100
  </li>
83
101
  </ol>
84
102
  </li>
85
103
  <li class="pf-v6-c-wizard__nav-item">
86
- <button class="pf-v6-c-wizard__nav-link" type="button">Additional</button>
104
+ <button class="pf-v6-c-wizard__nav-link" type="button">
105
+ <span class="pf-v6-c-wizard__nav-link-main">
106
+ <span class="pf-v6-c-wizard__nav-link-text">Additional</span>
107
+ </span>
108
+ </button>
87
109
  </li>
88
110
  <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>
111
+ <button class="pf-v6-c-wizard__nav-link" type="button" disabled>
112
+ <span class="pf-v6-c-wizard__nav-link-main">
113
+ <span class="pf-v6-c-wizard__nav-link-text">Review</span>
114
+ </span>
115
+ </button>
94
116
  </li>
95
117
  </ol>
96
118
  </nav>
@@ -297,7 +319,11 @@ wrapperTag: div
297
319
  <nav class="pf-v6-c-wizard__nav pf-m-expanded" aria-label="Steps">
298
320
  <ol class="pf-v6-c-wizard__nav-list" role="list">
299
321
  <li class="pf-v6-c-wizard__nav-item">
300
- <button class="pf-v6-c-wizard__nav-link" type="button">Information</button>
322
+ <button class="pf-v6-c-wizard__nav-link" type="button">
323
+ <span class="pf-v6-c-wizard__nav-link-main">
324
+ <span class="pf-v6-c-wizard__nav-link-text">Information</span>
325
+ </span>
326
+ </button>
301
327
  </li>
302
328
  <li class="pf-v6-c-wizard__nav-item pf-m-expandable pf-m-expanded">
303
329
  <button
@@ -305,38 +331,56 @@ wrapperTag: div
305
331
  type="button"
306
332
  aria-expanded="true"
307
333
  >
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>
334
+ <span class="pf-v6-c-wizard__nav-link-main">
335
+ <span class="pf-v6-c-wizard__nav-link-text">Configuration</span>
336
+ <span class="pf-v6-c-wizard__nav-link-toggle">
337
+ <span class="pf-v6-c-wizard__nav-link-toggle-icon">
338
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
339
+ </span>
312
340
  </span>
313
341
  </span>
314
342
  </button>
315
343
  <ol class="pf-v6-c-wizard__nav-list" role="list">
316
344
  <li class="pf-v6-c-wizard__nav-item">
317
- <button class="pf-v6-c-wizard__nav-link" type="button">Substep A</button>
345
+ <button class="pf-v6-c-wizard__nav-link" type="button">
346
+ <span class="pf-v6-c-wizard__nav-link-main">
347
+ <span class="pf-v6-c-wizard__nav-link-text">Substep A</span>
348
+ </span>
349
+ </button>
318
350
  </li>
319
351
  <li class="pf-v6-c-wizard__nav-item">
320
352
  <button
321
353
  class="pf-v6-c-wizard__nav-link pf-m-current"
322
354
  type="button"
323
355
  aria-current="page"
324
- >Substep B</button>
356
+ >
357
+ <span class="pf-v6-c-wizard__nav-link-main">
358
+ <span class="pf-v6-c-wizard__nav-link-text">Substep B</span>
359
+ </span>
360
+ </button>
325
361
  </li>
326
362
  <li class="pf-v6-c-wizard__nav-item">
327
- <button class="pf-v6-c-wizard__nav-link" type="button">Substep C</button>
363
+ <button class="pf-v6-c-wizard__nav-link" type="button">
364
+ <span class="pf-v6-c-wizard__nav-link-main">
365
+ <span class="pf-v6-c-wizard__nav-link-text">Substep C</span>
366
+ </span>
367
+ </button>
328
368
  </li>
329
369
  </ol>
330
370
  </li>
331
371
  <li class="pf-v6-c-wizard__nav-item">
332
- <button class="pf-v6-c-wizard__nav-link" type="button">Additional</button>
372
+ <button class="pf-v6-c-wizard__nav-link" type="button">
373
+ <span class="pf-v6-c-wizard__nav-link-main">
374
+ <span class="pf-v6-c-wizard__nav-link-text">Additional</span>
375
+ </span>
376
+ </button>
333
377
  </li>
334
378
  <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>
379
+ <button class="pf-v6-c-wizard__nav-link" type="button" disabled>
380
+ <span class="pf-v6-c-wizard__nav-link-main">
381
+ <span class="pf-v6-c-wizard__nav-link-text">Review</span>
382
+ </span>
383
+ </button>
340
384
  </li>
341
385
  </ol>
342
386
  </nav>
@@ -344,7 +388,10 @@ wrapperTag: div
344
388
  <div class="pf-v6-c-wizard__main-body">
345
389
  <form class="pf-v6-c-form pf-m-limit-width" novalidate>
346
390
  <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">
391
+ <div class="pf-v6-c-form__group-label"><label
392
+ class="pf-v6-c-form__label"
393
+ for="wizard-nav-expanded-form-field1"
394
+ >
348
395
  <span class="pf-v6-c-form__label-text">Field 1</span>&nbsp;<span
349
396
  class="pf-v6-c-form__label-required"
350
397
  aria-hidden="true"
@@ -352,12 +399,19 @@ wrapperTag: div
352
399
  </div>
353
400
  <div class="pf-v6-c-form__group-control">
354
401
  <span class="pf-v6-c-form-control">
355
- <input type="text" id="-form-field1" name="-form-field1" />
402
+ <input
403
+ type="text"
404
+ id="wizard-nav-expanded-form-field1"
405
+ name="wizard-nav-expanded-form-field1"
406
+ />
356
407
  </span>
357
408
  </div>
358
409
  </div>
359
410
  <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">
411
+ <div class="pf-v6-c-form__group-label"><label
412
+ class="pf-v6-c-form__label"
413
+ for="wizard-nav-expanded-form-field2"
414
+ >
361
415
  <span class="pf-v6-c-form__label-text">Field 2</span>&nbsp;<span
362
416
  class="pf-v6-c-form__label-required"
363
417
  aria-hidden="true"
@@ -365,12 +419,19 @@ wrapperTag: div
365
419
  </div>
366
420
  <div class="pf-v6-c-form__group-control">
367
421
  <span class="pf-v6-c-form-control">
368
- <input type="text" id="-form-field2" name="-form-field2" />
422
+ <input
423
+ type="text"
424
+ id="wizard-nav-expanded-form-field2"
425
+ name="wizard-nav-expanded-form-field2"
426
+ />
369
427
  </span>
370
428
  </div>
371
429
  </div>
372
430
  <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">
431
+ <div class="pf-v6-c-form__group-label"><label
432
+ class="pf-v6-c-form__label"
433
+ for="wizard-nav-expanded-form-field3"
434
+ >
374
435
  <span class="pf-v6-c-form__label-text">Field 3</span>&nbsp;<span
375
436
  class="pf-v6-c-form__label-required"
376
437
  aria-hidden="true"
@@ -378,12 +439,19 @@ wrapperTag: div
378
439
  </div>
379
440
  <div class="pf-v6-c-form__group-control">
380
441
  <span class="pf-v6-c-form-control">
381
- <input type="text" id="-form-field3" name="-form-field3" />
442
+ <input
443
+ type="text"
444
+ id="wizard-nav-expanded-form-field3"
445
+ name="wizard-nav-expanded-form-field3"
446
+ />
382
447
  </span>
383
448
  </div>
384
449
  </div>
385
450
  <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">
451
+ <div class="pf-v6-c-form__group-label"><label
452
+ class="pf-v6-c-form__label"
453
+ for="wizard-nav-expanded-form-field4"
454
+ >
387
455
  <span class="pf-v6-c-form__label-text">Field 4</span>&nbsp;<span
388
456
  class="pf-v6-c-form__label-required"
389
457
  aria-hidden="true"
@@ -391,12 +459,19 @@ wrapperTag: div
391
459
  </div>
392
460
  <div class="pf-v6-c-form__group-control">
393
461
  <span class="pf-v6-c-form-control">
394
- <input type="text" id="-form-field4" name="-form-field4" />
462
+ <input
463
+ type="text"
464
+ id="wizard-nav-expanded-form-field4"
465
+ name="wizard-nav-expanded-form-field4"
466
+ />
395
467
  </span>
396
468
  </div>
397
469
  </div>
398
470
  <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">
471
+ <div class="pf-v6-c-form__group-label"><label
472
+ class="pf-v6-c-form__label"
473
+ for="wizard-nav-expanded-form-field5"
474
+ >
400
475
  <span class="pf-v6-c-form__label-text">Field 5</span>&nbsp;<span
401
476
  class="pf-v6-c-form__label-required"
402
477
  aria-hidden="true"
@@ -404,12 +479,19 @@ wrapperTag: div
404
479
  </div>
405
480
  <div class="pf-v6-c-form__group-control">
406
481
  <span class="pf-v6-c-form-control">
407
- <input type="text" id="-form-field5" name="-form-field5" />
482
+ <input
483
+ type="text"
484
+ id="wizard-nav-expanded-form-field5"
485
+ name="wizard-nav-expanded-form-field5"
486
+ />
408
487
  </span>
409
488
  </div>
410
489
  </div>
411
490
  <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">
491
+ <div class="pf-v6-c-form__group-label"><label
492
+ class="pf-v6-c-form__label"
493
+ for="wizard-nav-expanded-form-field6"
494
+ >
413
495
  <span class="pf-v6-c-form__label-text">Field 6</span>&nbsp;<span
414
496
  class="pf-v6-c-form__label-required"
415
497
  aria-hidden="true"
@@ -417,12 +499,19 @@ wrapperTag: div
417
499
  </div>
418
500
  <div class="pf-v6-c-form__group-control">
419
501
  <span class="pf-v6-c-form-control">
420
- <input type="text" id="-form-field6" name="-form-field6" />
502
+ <input
503
+ type="text"
504
+ id="wizard-nav-expanded-form-field6"
505
+ name="wizard-nav-expanded-form-field6"
506
+ />
421
507
  </span>
422
508
  </div>
423
509
  </div>
424
510
  <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">
511
+ <div class="pf-v6-c-form__group-label"><label
512
+ class="pf-v6-c-form__label"
513
+ for="wizard-nav-expanded-form-field7"
514
+ >
426
515
  <span class="pf-v6-c-form__label-text">Field 7</span>&nbsp;<span
427
516
  class="pf-v6-c-form__label-required"
428
517
  aria-hidden="true"
@@ -430,7 +519,11 @@ wrapperTag: div
430
519
  </div>
431
520
  <div class="pf-v6-c-form__group-control">
432
521
  <span class="pf-v6-c-form-control">
433
- <input type="text" id="-form-field7" name="-form-field7" />
522
+ <input
523
+ type="text"
524
+ id="wizard-nav-expanded-form-field7"
525
+ name="wizard-nav-expanded-form-field7"
526
+ />
434
527
  </span>
435
528
  </div>
436
529
  </div>
@@ -494,7 +587,11 @@ wrapperTag: div
494
587
  <nav class="pf-v6-c-wizard__nav" aria-label="Steps">
495
588
  <ol class="pf-v6-c-wizard__nav-list" role="list">
496
589
  <li class="pf-v6-c-wizard__nav-item">
497
- <button class="pf-v6-c-wizard__nav-link" type="button">Information</button>
590
+ <button class="pf-v6-c-wizard__nav-link" type="button">
591
+ <span class="pf-v6-c-wizard__nav-link-main">
592
+ <span class="pf-v6-c-wizard__nav-link-text">Information</span>
593
+ </span>
594
+ </button>
498
595
  </li>
499
596
  <li class="pf-v6-c-wizard__nav-item pf-m-expandable pf-m-expanded">
500
597
  <button
@@ -502,38 +599,56 @@ wrapperTag: div
502
599
  type="button"
503
600
  aria-expanded="true"
504
601
  >
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>
602
+ <span class="pf-v6-c-wizard__nav-link-main">
603
+ <span class="pf-v6-c-wizard__nav-link-text">Configuration</span>
604
+ <span class="pf-v6-c-wizard__nav-link-toggle">
605
+ <span class="pf-v6-c-wizard__nav-link-toggle-icon">
606
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
607
+ </span>
509
608
  </span>
510
609
  </span>
511
610
  </button>
512
611
  <ol class="pf-v6-c-wizard__nav-list" role="list">
513
612
  <li class="pf-v6-c-wizard__nav-item">
514
- <button class="pf-v6-c-wizard__nav-link" type="button">Substep A</button>
613
+ <button class="pf-v6-c-wizard__nav-link" type="button">
614
+ <span class="pf-v6-c-wizard__nav-link-main">
615
+ <span class="pf-v6-c-wizard__nav-link-text">Substep A</span>
616
+ </span>
617
+ </button>
515
618
  </li>
516
619
  <li class="pf-v6-c-wizard__nav-item">
517
620
  <button
518
621
  class="pf-v6-c-wizard__nav-link pf-m-current"
519
622
  type="button"
520
623
  aria-current="page"
521
- >Substep B</button>
624
+ >
625
+ <span class="pf-v6-c-wizard__nav-link-main">
626
+ <span class="pf-v6-c-wizard__nav-link-text">Substep B</span>
627
+ </span>
628
+ </button>
522
629
  </li>
523
630
  <li class="pf-v6-c-wizard__nav-item">
524
- <button class="pf-v6-c-wizard__nav-link" type="button">Substep C</button>
631
+ <button class="pf-v6-c-wizard__nav-link" type="button">
632
+ <span class="pf-v6-c-wizard__nav-link-main">
633
+ <span class="pf-v6-c-wizard__nav-link-text">Substep C</span>
634
+ </span>
635
+ </button>
525
636
  </li>
526
637
  </ol>
527
638
  </li>
528
639
  <li class="pf-v6-c-wizard__nav-item">
529
- <button class="pf-v6-c-wizard__nav-link" type="button">Additional</button>
640
+ <button class="pf-v6-c-wizard__nav-link" type="button">
641
+ <span class="pf-v6-c-wizard__nav-link-main">
642
+ <span class="pf-v6-c-wizard__nav-link-text">Additional</span>
643
+ </span>
644
+ </button>
530
645
  </li>
531
646
  <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>
647
+ <button class="pf-v6-c-wizard__nav-link" type="button" disabled>
648
+ <span class="pf-v6-c-wizard__nav-link-main">
649
+ <span class="pf-v6-c-wizard__nav-link-text">Review</span>
650
+ </span>
651
+ </button>
537
652
  </li>
538
653
  </ol>
539
654
  </nav>
@@ -771,7 +886,11 @@ wrapperTag: div
771
886
  class="pf-v6-c-wizard__nav-link pf-m-current"
772
887
  type="button"
773
888
  aria-current="page"
774
- >Information</button>
889
+ >
890
+ <span class="pf-v6-c-wizard__nav-link-main">
891
+ <span class="pf-v6-c-wizard__nav-link-text">Information</span>
892
+ </span>
893
+ </button>
775
894
  </li>
776
895
  <li class="pf-v6-c-wizard__nav-item pf-m-expandable">
777
896
  <button
@@ -779,34 +898,52 @@ wrapperTag: div
779
898
  type="button"
780
899
  aria-expanded="false"
781
900
  >
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>
901
+ <span class="pf-v6-c-wizard__nav-link-main">
902
+ <span class="pf-v6-c-wizard__nav-link-text">Configuration</span>
903
+ <span class="pf-v6-c-wizard__nav-link-toggle">
904
+ <span class="pf-v6-c-wizard__nav-link-toggle-icon">
905
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
906
+ </span>
786
907
  </span>
787
908
  </span>
788
909
  </button>
789
910
  <ol class="pf-v6-c-wizard__nav-list" role="list">
790
911
  <li class="pf-v6-c-wizard__nav-item">
791
- <button class="pf-v6-c-wizard__nav-link" type="button">Substep A</button>
912
+ <button class="pf-v6-c-wizard__nav-link" type="button">
913
+ <span class="pf-v6-c-wizard__nav-link-main">
914
+ <span class="pf-v6-c-wizard__nav-link-text">Substep A</span>
915
+ </span>
916
+ </button>
792
917
  </li>
793
918
  <li class="pf-v6-c-wizard__nav-item">
794
- <button class="pf-v6-c-wizard__nav-link" type="button">Substep B</button>
919
+ <button class="pf-v6-c-wizard__nav-link" type="button">
920
+ <span class="pf-v6-c-wizard__nav-link-main">
921
+ <span class="pf-v6-c-wizard__nav-link-text">Substep B</span>
922
+ </span>
923
+ </button>
795
924
  </li>
796
925
  <li class="pf-v6-c-wizard__nav-item">
797
- <button class="pf-v6-c-wizard__nav-link" type="button">Substep C</button>
926
+ <button class="pf-v6-c-wizard__nav-link" type="button">
927
+ <span class="pf-v6-c-wizard__nav-link-main">
928
+ <span class="pf-v6-c-wizard__nav-link-text">Substep C</span>
929
+ </span>
930
+ </button>
798
931
  </li>
799
932
  </ol>
800
933
  </li>
801
934
  <li class="pf-v6-c-wizard__nav-item">
802
- <button class="pf-v6-c-wizard__nav-link" type="button">Additional</button>
935
+ <button class="pf-v6-c-wizard__nav-link" type="button">
936
+ <span class="pf-v6-c-wizard__nav-link-main">
937
+ <span class="pf-v6-c-wizard__nav-link-text">Additional</span>
938
+ </span>
939
+ </button>
803
940
  </li>
804
941
  <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>
942
+ <button class="pf-v6-c-wizard__nav-link" type="button" disabled>
943
+ <span class="pf-v6-c-wizard__nav-link-main">
944
+ <span class="pf-v6-c-wizard__nav-link-text">Review</span>
945
+ </span>
946
+ </button>
810
947
  </li>
811
948
  </ol>
812
949
  </nav>
@@ -1013,7 +1150,11 @@ wrapperTag: div
1013
1150
  <nav class="pf-v6-c-wizard__nav" aria-label="Steps">
1014
1151
  <ol class="pf-v6-c-wizard__nav-list" role="list">
1015
1152
  <li class="pf-v6-c-wizard__nav-item">
1016
- <button class="pf-v6-c-wizard__nav-link" type="button">Information</button>
1153
+ <button class="pf-v6-c-wizard__nav-link" type="button">
1154
+ <span class="pf-v6-c-wizard__nav-link-main">
1155
+ <span class="pf-v6-c-wizard__nav-link-text">Information</span>
1156
+ </span>
1157
+ </button>
1017
1158
  </li>
1018
1159
  <li class="pf-v6-c-wizard__nav-item pf-m-expandable pf-m-expanded">
1019
1160
  <button
@@ -1021,38 +1162,56 @@ wrapperTag: div
1021
1162
  type="button"
1022
1163
  aria-expanded="true"
1023
1164
  >
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>
1165
+ <span class="pf-v6-c-wizard__nav-link-main">
1166
+ <span class="pf-v6-c-wizard__nav-link-text">Configuration</span>
1167
+ <span class="pf-v6-c-wizard__nav-link-toggle">
1168
+ <span class="pf-v6-c-wizard__nav-link-toggle-icon">
1169
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
1170
+ </span>
1028
1171
  </span>
1029
1172
  </span>
1030
1173
  </button>
1031
1174
  <ol class="pf-v6-c-wizard__nav-list" role="list">
1032
1175
  <li class="pf-v6-c-wizard__nav-item">
1033
- <button class="pf-v6-c-wizard__nav-link" type="button">Substep A</button>
1176
+ <button class="pf-v6-c-wizard__nav-link" type="button">
1177
+ <span class="pf-v6-c-wizard__nav-link-main">
1178
+ <span class="pf-v6-c-wizard__nav-link-text">Substep A</span>
1179
+ </span>
1180
+ </button>
1034
1181
  </li>
1035
1182
  <li class="pf-v6-c-wizard__nav-item">
1036
1183
  <button
1037
1184
  class="pf-v6-c-wizard__nav-link pf-m-current"
1038
1185
  type="button"
1039
1186
  aria-current="page"
1040
- >Substep B</button>
1187
+ >
1188
+ <span class="pf-v6-c-wizard__nav-link-main">
1189
+ <span class="pf-v6-c-wizard__nav-link-text">Substep B</span>
1190
+ </span>
1191
+ </button>
1041
1192
  </li>
1042
1193
  <li class="pf-v6-c-wizard__nav-item">
1043
- <button class="pf-v6-c-wizard__nav-link" type="button">Substep C</button>
1194
+ <button class="pf-v6-c-wizard__nav-link" type="button">
1195
+ <span class="pf-v6-c-wizard__nav-link-main">
1196
+ <span class="pf-v6-c-wizard__nav-link-text">Substep C</span>
1197
+ </span>
1198
+ </button>
1044
1199
  </li>
1045
1200
  </ol>
1046
1201
  </li>
1047
1202
  <li class="pf-v6-c-wizard__nav-item">
1048
- <button class="pf-v6-c-wizard__nav-link" type="button">Additional</button>
1203
+ <button class="pf-v6-c-wizard__nav-link" type="button">
1204
+ <span class="pf-v6-c-wizard__nav-link-main">
1205
+ <span class="pf-v6-c-wizard__nav-link-text">Additional</span>
1206
+ </span>
1207
+ </button>
1049
1208
  </li>
1050
1209
  <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>
1210
+ <button class="pf-v6-c-wizard__nav-link" type="button" disabled>
1211
+ <span class="pf-v6-c-wizard__nav-link-main">
1212
+ <span class="pf-v6-c-wizard__nav-link-text">Review</span>
1213
+ </span>
1214
+ </button>
1056
1215
  </li>
1057
1216
  </ol>
1058
1217
  </nav>
@@ -1259,27 +1418,55 @@ wrapperTag: div
1259
1418
  <nav class="pf-v6-c-wizard__nav" aria-label="Steps">
1260
1419
  <ol class="pf-v6-c-wizard__nav-list" role="list">
1261
1420
  <li class="pf-v6-c-wizard__nav-item">
1262
- <button class="pf-v6-c-wizard__nav-link" type="button">Information</button>
1421
+ <button class="pf-v6-c-wizard__nav-link" type="button">
1422
+ <span class="pf-v6-c-wizard__nav-link-main">
1423
+ <span class="pf-v6-c-wizard__nav-link-text">Information</span>
1424
+ </span>
1425
+ </button>
1263
1426
  </li>
1264
1427
  <li class="pf-v6-c-wizard__nav-item">
1265
- <button class="pf-v6-c-wizard__nav-link" type="button">Configuration</button>
1428
+ <button class="pf-v6-c-wizard__nav-link" type="button">
1429
+ <span class="pf-v6-c-wizard__nav-link-main">
1430
+ <span class="pf-v6-c-wizard__nav-link-text">Configuration</span>
1431
+ </span>
1432
+ </button>
1266
1433
  <ol class="pf-v6-c-wizard__nav-list" role="list">
1267
1434
  <li class="pf-v6-c-wizard__nav-item">
1268
- <button class="pf-v6-c-wizard__nav-link" type="button">Substep A</button>
1435
+ <button class="pf-v6-c-wizard__nav-link" type="button">
1436
+ <span class="pf-v6-c-wizard__nav-link-main">
1437
+ <span class="pf-v6-c-wizard__nav-link-text">Substep A</span>
1438
+ </span>
1439
+ </button>
1269
1440
  </li>
1270
1441
  <li class="pf-v6-c-wizard__nav-item">
1271
- <button class="pf-v6-c-wizard__nav-link" type="button">Substep B</button>
1442
+ <button class="pf-v6-c-wizard__nav-link" type="button">
1443
+ <span class="pf-v6-c-wizard__nav-link-main">
1444
+ <span class="pf-v6-c-wizard__nav-link-text">Substep B</span>
1445
+ </span>
1446
+ </button>
1272
1447
  </li>
1273
1448
  <li class="pf-v6-c-wizard__nav-item">
1274
- <button class="pf-v6-c-wizard__nav-link" type="button">Substep C</button>
1449
+ <button class="pf-v6-c-wizard__nav-link" type="button">
1450
+ <span class="pf-v6-c-wizard__nav-link-main">
1451
+ <span class="pf-v6-c-wizard__nav-link-text">Substep C</span>
1452
+ </span>
1453
+ </button>
1275
1454
  </li>
1276
1455
  </ol>
1277
1456
  </li>
1278
1457
  <li class="pf-v6-c-wizard__nav-item">
1279
- <button class="pf-v6-c-wizard__nav-link" type="button">Additional</button>
1458
+ <button class="pf-v6-c-wizard__nav-link" type="button">
1459
+ <span class="pf-v6-c-wizard__nav-link-main">
1460
+ <span class="pf-v6-c-wizard__nav-link-text">Additional</span>
1461
+ </span>
1462
+ </button>
1280
1463
  </li>
1281
1464
  <li class="pf-v6-c-wizard__nav-item">
1282
- <button class="pf-v6-c-wizard__nav-link" type="button">Review</button>
1465
+ <button class="pf-v6-c-wizard__nav-link" type="button">
1466
+ <span class="pf-v6-c-wizard__nav-link-main">
1467
+ <span class="pf-v6-c-wizard__nav-link-text">Review</span>
1468
+ </span>
1469
+ </button>
1283
1470
  </li>
1284
1471
  </ol>
1285
1472
  </nav>
@@ -1346,6 +1533,552 @@ wrapperTag: div
1346
1533
 
1347
1534
  ```
1348
1535
 
1536
+ ### Error on step
1537
+
1538
+ ```html isFullscreen
1539
+ <div class="pf-v6-c-wizard">
1540
+ <div class="pf-v6-c-wizard__header">
1541
+ <div class="pf-v6-c-wizard__close">
1542
+ <button
1543
+ class="pf-v6-c-button pf-m-plain"
1544
+ type="button"
1545
+ aria-label="Close"
1546
+ >
1547
+ <i class="fas fa-times" aria-hidden="true"></i>
1548
+ </button>
1549
+ </div>
1550
+ <div class="pf-v6-c-wizard__title">
1551
+ <h1 class="pf-v6-c-wizard__title-text">Wizard title</h1>
1552
+ </div>
1553
+ <div class="pf-v6-c-wizard__description">Here is where the description goes</div>
1554
+ </div>
1555
+ <button
1556
+ aria-label="Wizard Header Toggle"
1557
+ class="pf-v6-c-wizard__toggle"
1558
+ aria-expanded="false"
1559
+ >
1560
+ <span class="pf-v6-c-wizard__toggle-list">
1561
+ <span class="pf-v6-c-wizard__toggle-list-item pf-m-danger">
1562
+ <span class="pf-v6-c-wizard__toggle-status-icon">
1563
+ <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
1564
+ </span>
1565
+ Configuration
1566
+ <i
1567
+ class="fas fa-angle-right pf-v6-c-wizard__toggle-separator"
1568
+ aria-hidden="true"
1569
+ ></i>
1570
+ </span>
1571
+ <span class="pf-v6-c-wizard__toggle-list-item">Substep B</span>
1572
+ </span>
1573
+ <span class="pf-v6-c-wizard__toggle-icon">
1574
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
1575
+ </span>
1576
+ </button>
1577
+ <div class="pf-v6-c-wizard__outer-wrap">
1578
+ <div class="pf-v6-c-wizard__inner-wrap">
1579
+ <nav class="pf-v6-c-wizard__nav" aria-label="Steps">
1580
+ <ol class="pf-v6-c-wizard__nav-list" role="list">
1581
+ <li class="pf-v6-c-wizard__nav-item">
1582
+ <button class="pf-v6-c-wizard__nav-link" type="button">
1583
+ <span class="pf-v6-c-wizard__nav-link-main">
1584
+ <span class="pf-v6-c-wizard__nav-link-text">Information</span>
1585
+ </span>
1586
+ </button>
1587
+ </li>
1588
+ <li class="pf-v6-c-wizard__nav-item pf-m-expandable pf-m-expanded">
1589
+ <button
1590
+ class="pf-v6-c-wizard__nav-link pf-m-danger pf-m-current"
1591
+ type="button"
1592
+ aria-expanded="true"
1593
+ >
1594
+ <span class="pf-v6-c-wizard__nav-link-status-icon">
1595
+ <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
1596
+ </span>
1597
+ <span class="pf-v6-c-wizard__nav-link-main">
1598
+ <span class="pf-v6-c-wizard__nav-link-text">Configuration</span>
1599
+ <span class="pf-v6-c-wizard__nav-link-toggle">
1600
+ <span class="pf-v6-c-wizard__nav-link-toggle-icon">
1601
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
1602
+ </span>
1603
+ </span>
1604
+ </span>
1605
+ </button>
1606
+ <ol class="pf-v6-c-wizard__nav-list" role="list">
1607
+ <li class="pf-v6-c-wizard__nav-item">
1608
+ <button class="pf-v6-c-wizard__nav-link" type="button">
1609
+ <span class="pf-v6-c-wizard__nav-link-main">
1610
+ <span class="pf-v6-c-wizard__nav-link-text">Substep A</span>
1611
+ </span>
1612
+ </button>
1613
+ </li>
1614
+ <li class="pf-v6-c-wizard__nav-item">
1615
+ <button
1616
+ class="pf-v6-c-wizard__nav-link pf-m-current"
1617
+ type="button"
1618
+ aria-current="page"
1619
+ >
1620
+ <span class="pf-v6-c-wizard__nav-link-main">
1621
+ <span class="pf-v6-c-wizard__nav-link-text">Substep B</span>
1622
+ </span>
1623
+ </button>
1624
+ </li>
1625
+ <li class="pf-v6-c-wizard__nav-item">
1626
+ <button class="pf-v6-c-wizard__nav-link" type="button">
1627
+ <span class="pf-v6-c-wizard__nav-link-main">
1628
+ <span class="pf-v6-c-wizard__nav-link-text">Substep C</span>
1629
+ </span>
1630
+ </button>
1631
+ </li>
1632
+ </ol>
1633
+ </li>
1634
+ <li class="pf-v6-c-wizard__nav-item">
1635
+ <button class="pf-v6-c-wizard__nav-link" type="button">
1636
+ <span class="pf-v6-c-wizard__nav-link-main">
1637
+ <span class="pf-v6-c-wizard__nav-link-text">Additional</span>
1638
+ </span>
1639
+ </button>
1640
+ </li>
1641
+ <li class="pf-v6-c-wizard__nav-item">
1642
+ <button class="pf-v6-c-wizard__nav-link" type="button" disabled>
1643
+ <span class="pf-v6-c-wizard__nav-link-main">
1644
+ <span class="pf-v6-c-wizard__nav-link-text">Review</span>
1645
+ </span>
1646
+ </button>
1647
+ </li>
1648
+ </ol>
1649
+ </nav>
1650
+ <main class="pf-v6-c-wizard__main" tabindex="0">
1651
+ <div class="pf-v6-c-wizard__main-body">
1652
+ <form class="pf-v6-c-form pf-m-limit-width" novalidate>
1653
+ <div class="pf-v6-c-form__group">
1654
+ <div class="pf-v6-c-form__group-label"><label
1655
+ class="pf-v6-c-form__label"
1656
+ for="wizard-error-on-step-form-field1"
1657
+ >
1658
+ <span class="pf-v6-c-form__label-text">Field 1</span>&nbsp;<span
1659
+ class="pf-v6-c-form__label-required"
1660
+ aria-hidden="true"
1661
+ >&#42;</span></label>
1662
+ </div>
1663
+ <div class="pf-v6-c-form__group-control">
1664
+ <span class="pf-v6-c-form-control">
1665
+ <input
1666
+ type="text"
1667
+ id="wizard-error-on-step-form-field1"
1668
+ name="wizard-error-on-step-form-field1"
1669
+ />
1670
+ </span>
1671
+ </div>
1672
+ </div>
1673
+ <div class="pf-v6-c-form__group">
1674
+ <div class="pf-v6-c-form__group-label"><label
1675
+ class="pf-v6-c-form__label"
1676
+ for="wizard-error-on-step-form-field2"
1677
+ >
1678
+ <span class="pf-v6-c-form__label-text">Field 2</span>&nbsp;<span
1679
+ class="pf-v6-c-form__label-required"
1680
+ aria-hidden="true"
1681
+ >&#42;</span></label>
1682
+ </div>
1683
+ <div class="pf-v6-c-form__group-control">
1684
+ <span class="pf-v6-c-form-control">
1685
+ <input
1686
+ type="text"
1687
+ id="wizard-error-on-step-form-field2"
1688
+ name="wizard-error-on-step-form-field2"
1689
+ />
1690
+ </span>
1691
+ </div>
1692
+ </div>
1693
+ <div class="pf-v6-c-form__group">
1694
+ <div class="pf-v6-c-form__group-label"><label
1695
+ class="pf-v6-c-form__label"
1696
+ for="wizard-error-on-step-form-field3"
1697
+ >
1698
+ <span class="pf-v6-c-form__label-text">Field 3</span>&nbsp;<span
1699
+ class="pf-v6-c-form__label-required"
1700
+ aria-hidden="true"
1701
+ >&#42;</span></label>
1702
+ </div>
1703
+ <div class="pf-v6-c-form__group-control">
1704
+ <span class="pf-v6-c-form-control">
1705
+ <input
1706
+ type="text"
1707
+ id="wizard-error-on-step-form-field3"
1708
+ name="wizard-error-on-step-form-field3"
1709
+ />
1710
+ </span>
1711
+ </div>
1712
+ </div>
1713
+ <div class="pf-v6-c-form__group">
1714
+ <div class="pf-v6-c-form__group-label"><label
1715
+ class="pf-v6-c-form__label"
1716
+ for="wizard-error-on-step-form-field4"
1717
+ >
1718
+ <span class="pf-v6-c-form__label-text">Field 4</span>&nbsp;<span
1719
+ class="pf-v6-c-form__label-required"
1720
+ aria-hidden="true"
1721
+ >&#42;</span></label>
1722
+ </div>
1723
+ <div class="pf-v6-c-form__group-control">
1724
+ <span class="pf-v6-c-form-control">
1725
+ <input
1726
+ type="text"
1727
+ id="wizard-error-on-step-form-field4"
1728
+ name="wizard-error-on-step-form-field4"
1729
+ />
1730
+ </span>
1731
+ </div>
1732
+ </div>
1733
+ <div class="pf-v6-c-form__group">
1734
+ <div class="pf-v6-c-form__group-label"><label
1735
+ class="pf-v6-c-form__label"
1736
+ for="wizard-error-on-step-form-field5"
1737
+ >
1738
+ <span class="pf-v6-c-form__label-text">Field 5</span>&nbsp;<span
1739
+ class="pf-v6-c-form__label-required"
1740
+ aria-hidden="true"
1741
+ >&#42;</span></label>
1742
+ </div>
1743
+ <div class="pf-v6-c-form__group-control">
1744
+ <span class="pf-v6-c-form-control">
1745
+ <input
1746
+ type="text"
1747
+ id="wizard-error-on-step-form-field5"
1748
+ name="wizard-error-on-step-form-field5"
1749
+ />
1750
+ </span>
1751
+ </div>
1752
+ </div>
1753
+ <div class="pf-v6-c-form__group">
1754
+ <div class="pf-v6-c-form__group-label"><label
1755
+ class="pf-v6-c-form__label"
1756
+ for="wizard-error-on-step-form-field6"
1757
+ >
1758
+ <span class="pf-v6-c-form__label-text">Field 6</span>&nbsp;<span
1759
+ class="pf-v6-c-form__label-required"
1760
+ aria-hidden="true"
1761
+ >&#42;</span></label>
1762
+ </div>
1763
+ <div class="pf-v6-c-form__group-control">
1764
+ <span class="pf-v6-c-form-control">
1765
+ <input
1766
+ type="text"
1767
+ id="wizard-error-on-step-form-field6"
1768
+ name="wizard-error-on-step-form-field6"
1769
+ />
1770
+ </span>
1771
+ </div>
1772
+ </div>
1773
+ <div class="pf-v6-c-form__group">
1774
+ <div class="pf-v6-c-form__group-label"><label
1775
+ class="pf-v6-c-form__label"
1776
+ for="wizard-error-on-step-form-field7"
1777
+ >
1778
+ <span class="pf-v6-c-form__label-text">Field 7</span>&nbsp;<span
1779
+ class="pf-v6-c-form__label-required"
1780
+ aria-hidden="true"
1781
+ >&#42;</span></label>
1782
+ </div>
1783
+ <div class="pf-v6-c-form__group-control">
1784
+ <span class="pf-v6-c-form-control">
1785
+ <input
1786
+ type="text"
1787
+ id="wizard-error-on-step-form-field7"
1788
+ name="wizard-error-on-step-form-field7"
1789
+ />
1790
+ </span>
1791
+ </div>
1792
+ </div>
1793
+ </form>
1794
+ </div>
1795
+ </main>
1796
+ </div>
1797
+ <footer class="pf-v6-c-wizard__footer">
1798
+ <button class="pf-v6-c-button pf-m-secondary" type="button">Back</button>
1799
+ <button class="pf-v6-c-button pf-m-primary" type="submit">Next</button>
1800
+ <div class="pf-v6-c-wizard__footer-cancel">
1801
+ <button class="pf-v6-c-button pf-m-link" type="button">Cancel</button>
1802
+ </div>
1803
+ </footer>
1804
+ </div>
1805
+ </div>
1806
+
1807
+ ```
1808
+
1809
+ ### Nav expanded with error (mobile)
1810
+
1811
+ ```html isFullscreen
1812
+ <div class="pf-v6-c-wizard">
1813
+ <div class="pf-v6-c-wizard__header">
1814
+ <div class="pf-v6-c-wizard__close">
1815
+ <button
1816
+ class="pf-v6-c-button pf-m-plain"
1817
+ type="button"
1818
+ aria-label="Close"
1819
+ >
1820
+ <i class="fas fa-times" aria-hidden="true"></i>
1821
+ </button>
1822
+ </div>
1823
+ <div class="pf-v6-c-wizard__title">
1824
+ <h1 class="pf-v6-c-wizard__title-text">Wizard title</h1>
1825
+ </div>
1826
+ <div class="pf-v6-c-wizard__description">Here is where the description goes</div>
1827
+ </div>
1828
+ <button
1829
+ aria-label="Wizard Header Toggle"
1830
+ class="pf-v6-c-wizard__toggle pf-m-expanded"
1831
+ aria-expanded="true"
1832
+ >
1833
+ <span class="pf-v6-c-wizard__toggle-list">
1834
+ <span class="pf-v6-c-wizard__toggle-list-item pf-m-danger">
1835
+ <span class="pf-v6-c-wizard__toggle-status-icon">
1836
+ <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
1837
+ </span>
1838
+ Configuration
1839
+ <i
1840
+ class="fas fa-angle-right pf-v6-c-wizard__toggle-separator"
1841
+ aria-hidden="true"
1842
+ ></i>
1843
+ </span>
1844
+ <span class="pf-v6-c-wizard__toggle-list-item">Substep B</span>
1845
+ </span>
1846
+ <span class="pf-v6-c-wizard__toggle-icon">
1847
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
1848
+ </span>
1849
+ </button>
1850
+ <div class="pf-v6-c-wizard__outer-wrap">
1851
+ <div class="pf-v6-c-wizard__inner-wrap">
1852
+ <nav class="pf-v6-c-wizard__nav pf-m-expanded" aria-label="Steps">
1853
+ <ol class="pf-v6-c-wizard__nav-list" role="list">
1854
+ <li class="pf-v6-c-wizard__nav-item">
1855
+ <button class="pf-v6-c-wizard__nav-link" type="button">
1856
+ <span class="pf-v6-c-wizard__nav-link-main">
1857
+ <span class="pf-v6-c-wizard__nav-link-text">Information</span>
1858
+ </span>
1859
+ </button>
1860
+ </li>
1861
+ <li class="pf-v6-c-wizard__nav-item pf-m-expandable pf-m-expanded">
1862
+ <button
1863
+ class="pf-v6-c-wizard__nav-link pf-m-danger pf-m-current"
1864
+ type="button"
1865
+ aria-expanded="true"
1866
+ >
1867
+ <span class="pf-v6-c-wizard__nav-link-status-icon">
1868
+ <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
1869
+ </span>
1870
+ <span class="pf-v6-c-wizard__nav-link-main">
1871
+ <span class="pf-v6-c-wizard__nav-link-text">Configuration</span>
1872
+ <span class="pf-v6-c-wizard__nav-link-toggle">
1873
+ <span class="pf-v6-c-wizard__nav-link-toggle-icon">
1874
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
1875
+ </span>
1876
+ </span>
1877
+ </span>
1878
+ </button>
1879
+ <ol class="pf-v6-c-wizard__nav-list" role="list">
1880
+ <li class="pf-v6-c-wizard__nav-item">
1881
+ <button class="pf-v6-c-wizard__nav-link" type="button">
1882
+ <span class="pf-v6-c-wizard__nav-link-main">
1883
+ <span class="pf-v6-c-wizard__nav-link-text">Substep A</span>
1884
+ </span>
1885
+ </button>
1886
+ </li>
1887
+ <li class="pf-v6-c-wizard__nav-item">
1888
+ <button
1889
+ class="pf-v6-c-wizard__nav-link pf-m-current"
1890
+ type="button"
1891
+ aria-current="page"
1892
+ >
1893
+ <span class="pf-v6-c-wizard__nav-link-main">
1894
+ <span class="pf-v6-c-wizard__nav-link-text">Substep B</span>
1895
+ </span>
1896
+ </button>
1897
+ </li>
1898
+ <li class="pf-v6-c-wizard__nav-item">
1899
+ <button class="pf-v6-c-wizard__nav-link" type="button">
1900
+ <span class="pf-v6-c-wizard__nav-link-main">
1901
+ <span class="pf-v6-c-wizard__nav-link-text">Substep C</span>
1902
+ </span>
1903
+ </button>
1904
+ </li>
1905
+ </ol>
1906
+ </li>
1907
+ <li class="pf-v6-c-wizard__nav-item">
1908
+ <button class="pf-v6-c-wizard__nav-link" type="button">
1909
+ <span class="pf-v6-c-wizard__nav-link-main">
1910
+ <span class="pf-v6-c-wizard__nav-link-text">Additional</span>
1911
+ </span>
1912
+ </button>
1913
+ </li>
1914
+ <li class="pf-v6-c-wizard__nav-item">
1915
+ <button class="pf-v6-c-wizard__nav-link" type="button" disabled>
1916
+ <span class="pf-v6-c-wizard__nav-link-main">
1917
+ <span class="pf-v6-c-wizard__nav-link-text">Review</span>
1918
+ </span>
1919
+ </button>
1920
+ </li>
1921
+ </ol>
1922
+ </nav>
1923
+ <main class="pf-v6-c-wizard__main" tabindex="0">
1924
+ <div class="pf-v6-c-wizard__main-body">
1925
+ <form class="pf-v6-c-form pf-m-limit-width" novalidate>
1926
+ <div class="pf-v6-c-form__group">
1927
+ <div class="pf-v6-c-form__group-label"><label
1928
+ class="pf-v6-c-form__label"
1929
+ for="wizard-nav-expanded-error-mobile-form-field1"
1930
+ >
1931
+ <span class="pf-v6-c-form__label-text">Field 1</span>&nbsp;<span
1932
+ class="pf-v6-c-form__label-required"
1933
+ aria-hidden="true"
1934
+ >&#42;</span></label>
1935
+ </div>
1936
+ <div class="pf-v6-c-form__group-control">
1937
+ <span class="pf-v6-c-form-control">
1938
+ <input
1939
+ type="text"
1940
+ id="wizard-nav-expanded-error-mobile-form-field1"
1941
+ name="wizard-nav-expanded-error-mobile-form-field1"
1942
+ />
1943
+ </span>
1944
+ </div>
1945
+ </div>
1946
+ <div class="pf-v6-c-form__group">
1947
+ <div class="pf-v6-c-form__group-label"><label
1948
+ class="pf-v6-c-form__label"
1949
+ for="wizard-nav-expanded-error-mobile-form-field2"
1950
+ >
1951
+ <span class="pf-v6-c-form__label-text">Field 2</span>&nbsp;<span
1952
+ class="pf-v6-c-form__label-required"
1953
+ aria-hidden="true"
1954
+ >&#42;</span></label>
1955
+ </div>
1956
+ <div class="pf-v6-c-form__group-control">
1957
+ <span class="pf-v6-c-form-control">
1958
+ <input
1959
+ type="text"
1960
+ id="wizard-nav-expanded-error-mobile-form-field2"
1961
+ name="wizard-nav-expanded-error-mobile-form-field2"
1962
+ />
1963
+ </span>
1964
+ </div>
1965
+ </div>
1966
+ <div class="pf-v6-c-form__group">
1967
+ <div class="pf-v6-c-form__group-label"><label
1968
+ class="pf-v6-c-form__label"
1969
+ for="wizard-nav-expanded-error-mobile-form-field3"
1970
+ >
1971
+ <span class="pf-v6-c-form__label-text">Field 3</span>&nbsp;<span
1972
+ class="pf-v6-c-form__label-required"
1973
+ aria-hidden="true"
1974
+ >&#42;</span></label>
1975
+ </div>
1976
+ <div class="pf-v6-c-form__group-control">
1977
+ <span class="pf-v6-c-form-control">
1978
+ <input
1979
+ type="text"
1980
+ id="wizard-nav-expanded-error-mobile-form-field3"
1981
+ name="wizard-nav-expanded-error-mobile-form-field3"
1982
+ />
1983
+ </span>
1984
+ </div>
1985
+ </div>
1986
+ <div class="pf-v6-c-form__group">
1987
+ <div class="pf-v6-c-form__group-label"><label
1988
+ class="pf-v6-c-form__label"
1989
+ for="wizard-nav-expanded-error-mobile-form-field4"
1990
+ >
1991
+ <span class="pf-v6-c-form__label-text">Field 4</span>&nbsp;<span
1992
+ class="pf-v6-c-form__label-required"
1993
+ aria-hidden="true"
1994
+ >&#42;</span></label>
1995
+ </div>
1996
+ <div class="pf-v6-c-form__group-control">
1997
+ <span class="pf-v6-c-form-control">
1998
+ <input
1999
+ type="text"
2000
+ id="wizard-nav-expanded-error-mobile-form-field4"
2001
+ name="wizard-nav-expanded-error-mobile-form-field4"
2002
+ />
2003
+ </span>
2004
+ </div>
2005
+ </div>
2006
+ <div class="pf-v6-c-form__group">
2007
+ <div class="pf-v6-c-form__group-label"><label
2008
+ class="pf-v6-c-form__label"
2009
+ for="wizard-nav-expanded-error-mobile-form-field5"
2010
+ >
2011
+ <span class="pf-v6-c-form__label-text">Field 5</span>&nbsp;<span
2012
+ class="pf-v6-c-form__label-required"
2013
+ aria-hidden="true"
2014
+ >&#42;</span></label>
2015
+ </div>
2016
+ <div class="pf-v6-c-form__group-control">
2017
+ <span class="pf-v6-c-form-control">
2018
+ <input
2019
+ type="text"
2020
+ id="wizard-nav-expanded-error-mobile-form-field5"
2021
+ name="wizard-nav-expanded-error-mobile-form-field5"
2022
+ />
2023
+ </span>
2024
+ </div>
2025
+ </div>
2026
+ <div class="pf-v6-c-form__group">
2027
+ <div class="pf-v6-c-form__group-label"><label
2028
+ class="pf-v6-c-form__label"
2029
+ for="wizard-nav-expanded-error-mobile-form-field6"
2030
+ >
2031
+ <span class="pf-v6-c-form__label-text">Field 6</span>&nbsp;<span
2032
+ class="pf-v6-c-form__label-required"
2033
+ aria-hidden="true"
2034
+ >&#42;</span></label>
2035
+ </div>
2036
+ <div class="pf-v6-c-form__group-control">
2037
+ <span class="pf-v6-c-form-control">
2038
+ <input
2039
+ type="text"
2040
+ id="wizard-nav-expanded-error-mobile-form-field6"
2041
+ name="wizard-nav-expanded-error-mobile-form-field6"
2042
+ />
2043
+ </span>
2044
+ </div>
2045
+ </div>
2046
+ <div class="pf-v6-c-form__group">
2047
+ <div class="pf-v6-c-form__group-label"><label
2048
+ class="pf-v6-c-form__label"
2049
+ for="wizard-nav-expanded-error-mobile-form-field7"
2050
+ >
2051
+ <span class="pf-v6-c-form__label-text">Field 7</span>&nbsp;<span
2052
+ class="pf-v6-c-form__label-required"
2053
+ aria-hidden="true"
2054
+ >&#42;</span></label>
2055
+ </div>
2056
+ <div class="pf-v6-c-form__group-control">
2057
+ <span class="pf-v6-c-form-control">
2058
+ <input
2059
+ type="text"
2060
+ id="wizard-nav-expanded-error-mobile-form-field7"
2061
+ name="wizard-nav-expanded-error-mobile-form-field7"
2062
+ />
2063
+ </span>
2064
+ </div>
2065
+ </div>
2066
+ </form>
2067
+ </div>
2068
+ </main>
2069
+ </div>
2070
+ <footer class="pf-v6-c-wizard__footer">
2071
+ <button class="pf-v6-c-button pf-m-secondary" type="button">Back</button>
2072
+ <button class="pf-v6-c-button pf-m-primary" type="submit">Next</button>
2073
+ <div class="pf-v6-c-wizard__footer-cancel">
2074
+ <button class="pf-v6-c-button pf-m-link" type="button">Cancel</button>
2075
+ </div>
2076
+ </footer>
2077
+ </div>
2078
+ </div>
2079
+
2080
+ ```
2081
+
1349
2082
  ## Documentation
1350
2083
 
1351
2084
  ### Accessibility
@@ -1387,7 +2120,9 @@ wrapperTag: div
1387
2120
  | `.pf-v6-c-wizard__nav-list` | `<ol>` | Initiates a list of steps. **Required** |
1388
2121
  | `.pf-v6-c-wizard__nav-item` | `<li>` | Initiates a step list item. **Required** |
1389
2122
  | `.pf-v6-c-wizard__nav-link` | `<a>`, `<button>` | Initiates a step link. **Required** |
2123
+ | `.pf-v6-c-wizard__nav-link-main` | `<span>` | Initiates main link container. **Required** |
1390
2124
  | `.pf-v6-c-wizard__nav-link-text` | `<span>` | Initiates the link text container. **Required when nav item is expandable** |
2125
+ | `.pf-v6-c-wizard__nav-link-status-icon` | `<span>` | Initiates the status icon container. |
1391
2126
  | `.pf-v6-c-wizard__nav-link-toggle` | `<span>` | Initiates the toggle container. **Required when nav item is expandable** |
1392
2127
  | `.pf-v6-c-wizard__nav-link-toggle-icon` | `<span>` | Initiates the toggle icon container. **Required when nav item is expandable** |
1393
2128
  | `.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 +2135,5 @@ wrapperTag: div
1400
2135
  | `.pf-m-expanded` | `.pf-v6-c-wizard__nav-item` | Modifies a nav item for the expanded state. |
1401
2136
  | `.pf-m-current` | `.pf-v6-c-wizard__nav-link` | Modifies a step link for the current state. **Required** |
1402
2137
  | `.pf-m-disabled` | `.pf-v6-c-wizard__nav-link` | Modifies a step link for the disabled state. |
2138
+ | `.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
2139
  | `.pf-m-no-padding` | `.pf-v6-c-wizard__main-body` | Modifies the main container body to remove the padding. |