@patternfly/patternfly 6.0.0-alpha.90 → 6.0.0-alpha.91

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 (259) hide show
  1. package/base/patternfly-common.css +10 -10
  2. package/base/patternfly-globals.css +3 -3
  3. package/base/patternfly-icons.css +1 -1
  4. package/base/patternfly-themes.css +53 -53
  5. package/base/patternfly-variables.css +236 -245
  6. package/base/tokens/_tokens-font.scss +0 -11
  7. package/components/AboutModalBox/about-modal-box.css +102 -102
  8. package/components/Accordion/accordion.css +118 -118
  9. package/components/ActionList/action-list.css +16 -16
  10. package/components/Alert/alert-group.css +50 -50
  11. package/components/Alert/alert.css +161 -161
  12. package/components/AppLauncher/app-launcher.css +167 -167
  13. package/components/Avatar/avatar.css +116 -116
  14. package/components/BackToTop/back-to-top.css +21 -21
  15. package/components/Backdrop/backdrop.css +9 -9
  16. package/components/BackgroundImage/background-image.css +15 -15
  17. package/components/Badge/badge.css +35 -35
  18. package/components/Banner/banner.css +114 -114
  19. package/components/Brand/brand.css +28 -28
  20. package/components/Breadcrumb/breadcrumb.css +62 -62
  21. package/components/Button/button.css +514 -514
  22. package/components/CalendarMonth/calendar-month.css +144 -144
  23. package/components/Card/card.css +230 -230
  24. package/components/Check/check.css +43 -43
  25. package/components/Chip/chip-group.css +60 -60
  26. package/components/Chip/chip.css +83 -83
  27. package/components/ClipboardCopy/clipboard-copy.css +71 -71
  28. package/components/CodeBlock/code-block.css +35 -35
  29. package/components/CodeEditor/code-editor.css +121 -121
  30. package/components/Content/content.css +216 -216
  31. package/components/ContextSelector/context-selector.css +251 -251
  32. package/components/DataList/data-list-grid.css +182 -182
  33. package/components/DataList/data-list.css +468 -468
  34. package/components/DatePicker/date-picker.css +35 -35
  35. package/components/DescriptionList/description-list-order.css +90 -90
  36. package/components/DescriptionList/description-list.css +193 -193
  37. package/components/Divider/divider.css +143 -143
  38. package/components/DragDrop/drag-drop.css +46 -46
  39. package/components/Drawer/drawer.css +474 -474
  40. package/components/Dropdown/dropdown.css +457 -457
  41. package/components/DualListSelector/dual-list-selector.css +199 -199
  42. package/components/EmptyState/empty-state.css +104 -104
  43. package/components/ExpandableSection/expandable-section.css +113 -113
  44. package/components/FileUpload/file-upload.css +32 -32
  45. package/components/Form/form.css +281 -281
  46. package/components/FormControl/form-control.css +197 -197
  47. package/components/HelperText/helper-text.css +51 -51
  48. package/components/Hint/hint.css +46 -46
  49. package/components/Icon/icon.css +218 -218
  50. package/components/InlineEdit/inline-edit.css +43 -43
  51. package/components/InputGroup/input-group.css +52 -52
  52. package/components/JumpLinks/jump-links.css +183 -183
  53. package/components/Label/label-group.css +86 -86
  54. package/components/Label/label.css +438 -438
  55. package/components/List/list.css +53 -53
  56. package/components/LogViewer/log-viewer.css +138 -138
  57. package/components/Login/login.css +139 -139
  58. package/components/Masthead/masthead.css +319 -319
  59. package/components/Menu/menu.css +415 -415
  60. package/components/MenuToggle/menu-toggle.css +275 -275
  61. package/components/ModalBox/modal-box.css +121 -121
  62. package/components/MultipleFileUpload/multiple-file-upload.css +163 -163
  63. package/components/Nav/nav.css +225 -225
  64. package/components/NotificationBadge/notification-badge.css +66 -66
  65. package/components/NotificationDrawer/notification-drawer.css +179 -179
  66. package/components/NumberInput/number-input.css +20 -20
  67. package/components/OptionsMenu/options-menu.css +190 -190
  68. package/components/OverflowMenu/overflow-menu.css +19 -19
  69. package/components/Page/page.css +598 -598
  70. package/components/Pagination/pagination.css +220 -220
  71. package/components/Panel/panel.css +72 -72
  72. package/components/Popover/popover.css +148 -148
  73. package/components/Progress/progress.css +80 -80
  74. package/components/ProgressStepper/progress-stepper.css +514 -514
  75. package/components/Radio/radio.css +44 -44
  76. package/components/Select/select.css +423 -423
  77. package/components/Sidebar/sidebar.css +166 -166
  78. package/components/SimpleList/simple-list.css +53 -53
  79. package/components/Skeleton/skeleton.css +112 -112
  80. package/components/SkipToContent/skip-to-content.css +8 -8
  81. package/components/Slider/slider.css +144 -144
  82. package/components/Spinner/spinner.css +36 -36
  83. package/components/Switch/switch.css +89 -89
  84. package/components/TabContent/tab-content.css +34 -34
  85. package/components/Table/table-grid.css +911 -911
  86. package/components/Table/table-scrollable.css +38 -38
  87. package/components/Table/table-tree-view.css +497 -497
  88. package/components/Table/table.css +660 -660
  89. package/components/Tabs/tabs.css +616 -616
  90. package/components/TextInputGroup/text-input-group.css +88 -88
  91. package/components/Tile/tile.css +68 -68
  92. package/components/Timestamp/timestamp.css +29 -29
  93. package/components/Title/title.css +87 -87
  94. package/components/ToggleGroup/toggle-group.css +86 -86
  95. package/components/Toolbar/toolbar.css +2279 -2279
  96. package/components/Tooltip/tooltip.css +85 -85
  97. package/components/TreeView/tree-view.css +363 -363
  98. package/components/Truncate/truncate.css +15 -15
  99. package/components/Wizard/wizard.css +272 -272
  100. package/docs/components/AboutModalBox/examples/AboutModalBox.md +11 -11
  101. package/docs/components/Accordion/examples/Accordion.md +188 -188
  102. package/docs/components/ActionList/examples/ActionList.md +55 -55
  103. package/docs/components/Alert/examples/Alert.md +222 -222
  104. package/docs/components/AppLauncher/deprecated/application-launcher.md +146 -146
  105. package/docs/components/Avatar/examples/Avatar.md +6 -6
  106. package/docs/components/BackToTop/examples/BackToTop.md +3 -3
  107. package/docs/components/Backdrop/examples/Backdrop.md +1 -1
  108. package/docs/components/BackgroundImage/examples/BackgroundImage.md +2 -2
  109. package/docs/components/Badge/examples/Badge.md +17 -17
  110. package/docs/components/Banner/examples/Banner.md +42 -42
  111. package/docs/components/Brand/examples/Brand.md +4 -4
  112. package/docs/components/Breadcrumb/examples/Breadcrumb.md +90 -90
  113. package/docs/components/Button/examples/Button.md +364 -364
  114. package/docs/components/CalendarMonth/examples/CalendarMonth.md +436 -436
  115. package/docs/components/Card/examples/Card.md +515 -515
  116. package/docs/components/Check/examples/Check.md +37 -37
  117. package/docs/components/Chip/examples/Chip.md +216 -216
  118. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +82 -82
  119. package/docs/components/CodeBlock/examples/CodeBlock.md +39 -39
  120. package/docs/components/CodeEditor/examples/CodeEditor.md +85 -85
  121. package/docs/components/Content/examples/Content.md +1 -1
  122. package/docs/components/ContextSelector/deprecated/context-selector.md +160 -160
  123. package/docs/components/DataList/examples/DataList.md +666 -666
  124. package/docs/components/DatePicker/examples/DatePicker.md +54 -54
  125. package/docs/components/DescriptionList/examples/DescriptionList.md +737 -737
  126. package/docs/components/Divider/examples/Divider.md +18 -18
  127. package/docs/components/DragDrop/examples/DragDrop.md +27 -27
  128. package/docs/components/Drawer/examples/Drawer.md +225 -225
  129. package/docs/components/Dropdown/deprecated/Dropdown.md +541 -541
  130. package/docs/components/DualListSelector/examples/DualListSelector.md +1012 -1012
  131. package/docs/components/EmptyState/examples/EmptyState.md +100 -100
  132. package/docs/components/ExpandableSection/examples/ExpandableSection.md +47 -47
  133. package/docs/components/FileUpload/examples/FileUpload.md +94 -94
  134. package/docs/components/Form/examples/Form.md +226 -226
  135. package/docs/components/FormControl/examples/FormControl.md +65 -65
  136. package/docs/components/HelperText/examples/HelperText.md +72 -72
  137. package/docs/components/Hint/examples/Hint.md +44 -44
  138. package/docs/components/Icon/examples/Icon.md +85 -85
  139. package/docs/components/InlineEdit/examples/InlineEdit.md +209 -209
  140. package/docs/components/InputGroup/examples/InputGroup.md +73 -73
  141. package/docs/components/JumpLinks/examples/JumpLinks.md +285 -285
  142. package/docs/components/Label/examples/Label.md +1717 -1717
  143. package/docs/components/List/examples/List.md +30 -30
  144. package/docs/components/LogViewer/examples/LogViewer.md +1785 -1785
  145. package/docs/components/Login/examples/Login.md +287 -287
  146. package/docs/components/Masthead/examples/masthead.md +39 -39
  147. package/docs/components/Menu/examples/Menu.md +2377 -2377
  148. package/docs/components/MenuToggle/examples/MenuToggle.md +242 -242
  149. package/docs/components/ModalBox/examples/ModalBox.md +119 -119
  150. package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +192 -192
  151. package/docs/components/Nav/examples/Navigation.md +856 -856
  152. package/docs/components/NotificationBadge/examples/NotificationBadge.md +42 -42
  153. package/docs/components/NotificationDrawer/examples/NotificationDrawer.md +659 -659
  154. package/docs/components/NumberInput/examples/NumberInput.md +127 -127
  155. package/docs/components/OptionsMenu/deprecated/options-menu.md +178 -178
  156. package/docs/components/OverflowMenu/examples/overflow-menu.md +97 -97
  157. package/docs/components/Page/deprecated/PageHeader.md +85 -85
  158. package/docs/components/Page/examples/Page.md +90 -90
  159. package/docs/components/Pagination/examples/Pagination.md +285 -285
  160. package/docs/components/Panel/examples/Panel.md +38 -38
  161. package/docs/components/Popover/examples/Popover.md +169 -169
  162. package/docs/components/Progress/examples/Progress.md +145 -145
  163. package/docs/components/ProgressStepper/examples/ProgressStepper.md +295 -295
  164. package/docs/components/Radio/examples/Radio.md +33 -33
  165. package/docs/components/Select/deprecated/Select.md +736 -736
  166. package/docs/components/Sidebar/examples/Sidebar.md +65 -65
  167. package/docs/components/SimpleList/examples/SimpleList.md +39 -39
  168. package/docs/components/Skeleton/examples/Skeleton.md +29 -29
  169. package/docs/components/SkipToContent/examples/SkipToContent.md +3 -3
  170. package/docs/components/Slider/examples/Slider.md +213 -213
  171. package/docs/components/Spinner/examples/Spinner.md +14 -14
  172. package/docs/components/Switch/examples/Switch.md +58 -58
  173. package/docs/components/TabContent/examples/TabContent.md +24 -24
  174. package/docs/components/Table/examples/Table.md +6982 -6982
  175. package/docs/components/Tabs/examples/Tabs.md +2114 -2114
  176. package/docs/components/TextInputGroup/examples/TextInputGroup.md +373 -373
  177. package/docs/components/Tile/examples/Tile.md +131 -131
  178. package/docs/components/Timestamp/examples/Timestamp.md +10 -10
  179. package/docs/components/Title/examples/Title.md +12 -12
  180. package/docs/components/ToggleGroup/examples/toggle-group.md +116 -116
  181. package/docs/components/Toolbar/examples/Toolbar.md +611 -611
  182. package/docs/components/Tooltip/examples/Tooltip.md +27 -27
  183. package/docs/components/TreeView/examples/TreeView.md +1166 -1166
  184. package/docs/components/Truncate/examples/Truncate.md +7 -7
  185. package/docs/components/Wizard/examples/Wizard.md +522 -522
  186. package/docs/demos/AboutModal/examples/AboutModal.md +106 -106
  187. package/docs/demos/Alert/examples/Alert.md +391 -391
  188. package/docs/demos/BackToTop/examples/BackToTop.md +175 -175
  189. package/docs/demos/Banner/examples/Banner.md +364 -364
  190. package/docs/demos/Button/examples/Button.md +50 -50
  191. package/docs/demos/Card/examples/Card.md +1054 -1054
  192. package/docs/demos/CardView/examples/CardView.md +378 -378
  193. package/docs/demos/ContextSelector/examples/ContextSelector.md +449 -449
  194. package/docs/demos/Dashboard/examples/Dashboard.md +541 -541
  195. package/docs/demos/DataList/examples/DataList.md +1148 -1148
  196. package/docs/demos/DescriptionList/examples/DescriptionList.md +544 -544
  197. package/docs/demos/Drawer/examples/Drawer.md +531 -531
  198. package/docs/demos/Form/examples/BasicForms.md +444 -444
  199. package/docs/demos/HelperText/examples/HelperText.md +51 -51
  200. package/docs/demos/JumpLinks/examples/JumpLinks.md +596 -596
  201. package/docs/demos/Masthead/examples/Masthead.md +763 -763
  202. package/docs/demos/Modal/examples/Modal.md +645 -645
  203. package/docs/demos/Nav/examples/Nav.md +649 -649
  204. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +1570 -1570
  205. package/docs/demos/Page/examples/Page.md +1330 -1330
  206. package/docs/demos/Page/examples/Penta.md +217 -217
  207. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +23 -23
  208. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +108 -108
  209. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +1890 -1890
  210. package/docs/demos/Skeleton/examples/Skeleton.md +176 -176
  211. package/docs/demos/Table/examples/Table.md +4580 -4580
  212. package/docs/demos/Tabs/examples/Tabs.md +1040 -1040
  213. package/docs/demos/Toolbar/examples/Toolbar.md +961 -961
  214. package/docs/demos/Wizard/examples/Wizard.md +1574 -1574
  215. package/docs/layouts/Bullseye/examples/Bullseye.md +2 -2
  216. package/docs/layouts/Flex/examples/Flex.md +290 -290
  217. package/docs/layouts/Gallery/examples/Gallery.md +48 -48
  218. package/docs/layouts/Grid/examples/Grid.md +121 -121
  219. package/docs/layouts/Level/examples/Level.md +11 -11
  220. package/docs/layouts/Split/examples/Split.md +23 -23
  221. package/docs/layouts/Stack/examples/Stack.md +8 -8
  222. package/docs/utilities/Accessibility/examples/Accessibility.md +3 -3
  223. package/docs/utilities/Alignment/examples/Alignment.md +4 -4
  224. package/docs/utilities/Display/examples/Display.md +16 -16
  225. package/docs/utilities/Flex/examples/Flex.md +53 -53
  226. package/docs/utilities/Float/examples/Float.md +2 -2
  227. package/docs/utilities/Spacing/examples/Spacing.md +16 -16
  228. package/layouts/Bullseye/bullseye.css +3 -3
  229. package/layouts/Flex/flex.css +1276 -1276
  230. package/layouts/Gallery/gallery.css +34 -34
  231. package/layouts/Grid/grid.css +531 -531
  232. package/layouts/Level/level.css +4 -4
  233. package/layouts/Split/split.css +6 -6
  234. package/layouts/Stack/stack.css +5 -5
  235. package/package.json +1 -1
  236. package/patternfly-addons.css +2989 -2989
  237. package/patternfly-base-no-globals-theme-dark-unversioned.css +269 -278
  238. package/patternfly-base-no-globals.css +284 -293
  239. package/patternfly-base-theme-dark-unversioned.css +271 -280
  240. package/patternfly-base.css +286 -295
  241. package/patternfly-charts-theme-dark-unversioned.css +66 -66
  242. package/patternfly-charts-theme-dark.css +66 -66
  243. package/patternfly-charts.css +320 -320
  244. package/patternfly-no-globals.css +20217 -20226
  245. package/patternfly-theme-dark-unversioned.css +20209 -20218
  246. package/patternfly.css +20219 -20228
  247. package/patternfly.min.css +1 -1
  248. package/patternfly.min.css.map +1 -1
  249. package/sass-utilities/_init.scss +1 -1
  250. package/utilities/Accessibility/accessibility.css +18 -18
  251. package/utilities/Alignment/alignment.css +24 -24
  252. package/utilities/BackgroundColor/BackgroundColor.css +252 -252
  253. package/utilities/BoxShadow/box-shadow.css +42 -42
  254. package/utilities/Display/display.css +54 -54
  255. package/utilities/Flex/flex.css +228 -228
  256. package/utilities/Float/float.css +12 -12
  257. package/utilities/Sizing/sizing.css +216 -216
  258. package/utilities/Spacing/spacing.css +1512 -1512
  259. package/utilities/Text/text.css +631 -631
package/docs/components/ProgressStepper/examples/ProgressStepper.md CHANGED
@@ -7,45 +7,45 @@ cssPrefix: pf-v5-c-progress-stepper
7
7
  ### Basic
8
8
 
9
9
  ```html
10
- <ol class="pf-v5-c-progress-stepper" role="list">
10
+ <ol class="pf-v6-c-progress-stepper" role="list">
11
11
  <li
12
- class="pf-v5-c-progress-stepper__step pf-m-success"
12
+ class="pf-v6-c-progress-stepper__step pf-m-success"
13
13
  role="listitem"
14
14
  aria-label="completed step,"
15
15
  >
16
- <div class="pf-v5-c-progress-stepper__step-connector">
17
- <span class="pf-v5-c-progress-stepper__step-icon">
16
+ <div class="pf-v6-c-progress-stepper__step-connector">
17
+ <span class="pf-v6-c-progress-stepper__step-icon">
18
18
  <i class="fas fa-check-circle" aria-hidden="true"></i>
19
19
  </span>
20
20
  </div>
21
- <div class="pf-v5-c-progress-stepper__step-main">
22
- <div class="pf-v5-c-progress-stepper__step-title">First step</div>
21
+ <div class="pf-v6-c-progress-stepper__step-main">
22
+ <div class="pf-v6-c-progress-stepper__step-title">First step</div>
23
23
  </div>
24
24
  </li>
25
25
  <li
26
- class="pf-v5-c-progress-stepper__step pf-m-current"
26
+ class="pf-v6-c-progress-stepper__step pf-m-current"
27
27
  role="listitem"
28
28
  aria-label="current step,in process step,"
29
29
  >
30
- <div class="pf-v5-c-progress-stepper__step-connector">
31
- <span class="pf-v5-c-progress-stepper__step-icon">
30
+ <div class="pf-v6-c-progress-stepper__step-connector">
31
+ <span class="pf-v6-c-progress-stepper__step-icon">
32
32
  <i class="pf-v5-pficon pf-v5-pficon-resources-full" aria-hidden="true"></i>
33
33
  </span>
34
34
  </div>
35
- <div class="pf-v5-c-progress-stepper__step-main">
36
- <div class="pf-v5-c-progress-stepper__step-title">Second step</div>
35
+ <div class="pf-v6-c-progress-stepper__step-main">
36
+ <div class="pf-v6-c-progress-stepper__step-title">Second step</div>
37
37
  </div>
38
38
  </li>
39
39
  <li
40
- class="pf-v5-c-progress-stepper__step pf-m-pending"
40
+ class="pf-v6-c-progress-stepper__step pf-m-pending"
41
41
  role="listitem"
42
42
  aria-label="pending step,"
43
43
  >
44
- <div class="pf-v5-c-progress-stepper__step-connector">
45
- <span class="pf-v5-c-progress-stepper__step-icon"></span>
44
+ <div class="pf-v6-c-progress-stepper__step-connector">
45
+ <span class="pf-v6-c-progress-stepper__step-icon"></span>
46
46
  </div>
47
- <div class="pf-v5-c-progress-stepper__step-main">
48
- <div class="pf-v5-c-progress-stepper__step-title">Third step</div>
47
+ <div class="pf-v6-c-progress-stepper__step-main">
48
+ <div class="pf-v6-c-progress-stepper__step-title">Third step</div>
49
49
  </div>
50
50
  </li>
51
51
  </ol>
@@ -55,53 +55,53 @@ cssPrefix: pf-v5-c-progress-stepper
55
55
  ### Basic with descriptions
56
56
 
57
57
  ```html
58
- <ol class="pf-v5-c-progress-stepper" role="list">
58
+ <ol class="pf-v6-c-progress-stepper" role="list">
59
59
  <li
60
- class="pf-v5-c-progress-stepper__step pf-m-success"
60
+ class="pf-v6-c-progress-stepper__step pf-m-success"
61
61
  role="listitem"
62
62
  aria-label="completed step,"
63
63
  >
64
- <div class="pf-v5-c-progress-stepper__step-connector">
65
- <span class="pf-v5-c-progress-stepper__step-icon">
64
+ <div class="pf-v6-c-progress-stepper__step-connector">
65
+ <span class="pf-v6-c-progress-stepper__step-icon">
66
66
  <i class="fas fa-check-circle" aria-hidden="true"></i>
67
67
  </span>
68
68
  </div>
69
- <div class="pf-v5-c-progress-stepper__step-main">
70
- <div class="pf-v5-c-progress-stepper__step-title">First step</div>
69
+ <div class="pf-v6-c-progress-stepper__step-main">
70
+ <div class="pf-v6-c-progress-stepper__step-title">First step</div>
71
71
  <div
72
- class="pf-v5-c-progress-stepper__step-description"
72
+ class="pf-v6-c-progress-stepper__step-description"
73
73
  >This is the first thing to happen</div>
74
74
  </div>
75
75
  </li>
76
76
  <li
77
- class="pf-v5-c-progress-stepper__step pf-m-current"
77
+ class="pf-v6-c-progress-stepper__step pf-m-current"
78
78
  role="listitem"
79
79
  aria-label="current step,in process step,"
80
80
  >
81
- <div class="pf-v5-c-progress-stepper__step-connector">
82
- <span class="pf-v5-c-progress-stepper__step-icon">
81
+ <div class="pf-v6-c-progress-stepper__step-connector">
82
+ <span class="pf-v6-c-progress-stepper__step-icon">
83
83
  <i class="pf-v5-pficon pf-v5-pficon-resources-full" aria-hidden="true"></i>
84
84
  </span>
85
85
  </div>
86
- <div class="pf-v5-c-progress-stepper__step-main">
87
- <div class="pf-v5-c-progress-stepper__step-title">Second step</div>
86
+ <div class="pf-v6-c-progress-stepper__step-main">
87
+ <div class="pf-v6-c-progress-stepper__step-title">Second step</div>
88
88
  <div
89
- class="pf-v5-c-progress-stepper__step-description"
89
+ class="pf-v6-c-progress-stepper__step-description"
90
90
  >This is the second thing to happen</div>
91
91
  </div>
92
92
  </li>
93
93
  <li
94
- class="pf-v5-c-progress-stepper__step pf-m-pending"
94
+ class="pf-v6-c-progress-stepper__step pf-m-pending"
95
95
  role="listitem"
96
96
  aria-label="pending step,"
97
97
  >
98
- <div class="pf-v5-c-progress-stepper__step-connector">
99
- <span class="pf-v5-c-progress-stepper__step-icon"></span>
98
+ <div class="pf-v6-c-progress-stepper__step-connector">
99
+ <span class="pf-v6-c-progress-stepper__step-icon"></span>
100
100
  </div>
101
- <div class="pf-v5-c-progress-stepper__step-main">
102
- <div class="pf-v5-c-progress-stepper__step-title">Third step</div>
101
+ <div class="pf-v6-c-progress-stepper__step-main">
102
+ <div class="pf-v6-c-progress-stepper__step-title">Third step</div>
103
103
  <div
104
- class="pf-v5-c-progress-stepper__step-description"
104
+ class="pf-v6-c-progress-stepper__step-description"
105
105
  >This is the last thing to happen</div>
106
106
  </div>
107
107
  </li>
@@ -113,55 +113,55 @@ cssPrefix: pf-v5-c-progress-stepper
113
113
 
114
114
  ```html
115
115
  <ol
116
- class="pf-v5-c-progress-stepper pf-m-vertical-on-lg pf-m-horizontal-on-2xl"
116
+ class="pf-v6-c-progress-stepper pf-m-vertical-on-lg pf-m-horizontal-on-2xl"
117
117
  role="list"
118
118
  >
119
119
  <li
120
- class="pf-v5-c-progress-stepper__step pf-m-success"
120
+ class="pf-v6-c-progress-stepper__step pf-m-success"
121
121
  role="listitem"
122
122
  aria-label="completed step,"
123
123
  >
124
- <div class="pf-v5-c-progress-stepper__step-connector">
125
- <span class="pf-v5-c-progress-stepper__step-icon">
124
+ <div class="pf-v6-c-progress-stepper__step-connector">
125
+ <span class="pf-v6-c-progress-stepper__step-icon">
126
126
  <i class="fas fa-check-circle" aria-hidden="true"></i>
127
127
  </span>
128
128
  </div>
129
- <div class="pf-v5-c-progress-stepper__step-main">
130
- <div class="pf-v5-c-progress-stepper__step-title">First step</div>
129
+ <div class="pf-v6-c-progress-stepper__step-main">
130
+ <div class="pf-v6-c-progress-stepper__step-title">First step</div>
131
131
  <div
132
- class="pf-v5-c-progress-stepper__step-description"
132
+ class="pf-v6-c-progress-stepper__step-description"
133
133
  >This is the first thing to happen</div>
134
134
  </div>
135
135
  </li>
136
136
  <li
137
- class="pf-v5-c-progress-stepper__step pf-m-current"
137
+ class="pf-v6-c-progress-stepper__step pf-m-current"
138
138
  role="listitem"
139
139
  aria-label="current step,in process step,"
140
140
  >
141
- <div class="pf-v5-c-progress-stepper__step-connector">
142
- <span class="pf-v5-c-progress-stepper__step-icon">
141
+ <div class="pf-v6-c-progress-stepper__step-connector">
142
+ <span class="pf-v6-c-progress-stepper__step-icon">
143
143
  <i class="pf-v5-pficon pf-v5-pficon-resources-full" aria-hidden="true"></i>
144
144
  </span>
145
145
  </div>
146
- <div class="pf-v5-c-progress-stepper__step-main">
147
- <div class="pf-v5-c-progress-stepper__step-title">Second step</div>
146
+ <div class="pf-v6-c-progress-stepper__step-main">
147
+ <div class="pf-v6-c-progress-stepper__step-title">Second step</div>
148
148
  <div
149
- class="pf-v5-c-progress-stepper__step-description"
149
+ class="pf-v6-c-progress-stepper__step-description"
150
150
  >This is the second thing to happen</div>
151
151
  </div>
152
152
  </li>
153
153
  <li
154
- class="pf-v5-c-progress-stepper__step pf-m-pending"
154
+ class="pf-v6-c-progress-stepper__step pf-m-pending"
155
155
  role="listitem"
156
156
  aria-label="pending step,"
157
157
  >
158
- <div class="pf-v5-c-progress-stepper__step-connector">
159
- <span class="pf-v5-c-progress-stepper__step-icon"></span>
158
+ <div class="pf-v6-c-progress-stepper__step-connector">
159
+ <span class="pf-v6-c-progress-stepper__step-icon"></span>
160
160
  </div>
161
- <div class="pf-v5-c-progress-stepper__step-main">
162
- <div class="pf-v5-c-progress-stepper__step-title">Third step</div>
161
+ <div class="pf-v6-c-progress-stepper__step-main">
162
+ <div class="pf-v6-c-progress-stepper__step-title">Third step</div>
163
163
  <div
164
- class="pf-v5-c-progress-stepper__step-description"
164
+ class="pf-v6-c-progress-stepper__step-description"
165
165
  >This is the last thing to happen</div>
166
166
  </div>
167
167
  </li>
@@ -172,53 +172,53 @@ cssPrefix: pf-v5-c-progress-stepper
172
172
  ### Center aligned with descriptions
173
173
 
174
174
  ```html
175
- <ol class="pf-v5-c-progress-stepper pf-m-center" role="list">
175
+ <ol class="pf-v6-c-progress-stepper pf-m-center" role="list">
176
176
  <li
177
- class="pf-v5-c-progress-stepper__step pf-m-success"
177
+ class="pf-v6-c-progress-stepper__step pf-m-success"
178
178
  role="listitem"
179
179
  aria-label="completed step,"
180
180
  >
181
- <div class="pf-v5-c-progress-stepper__step-connector">
182
- <span class="pf-v5-c-progress-stepper__step-icon">
181
+ <div class="pf-v6-c-progress-stepper__step-connector">
182
+ <span class="pf-v6-c-progress-stepper__step-icon">
183
183
  <i class="fas fa-check-circle" aria-hidden="true"></i>
184
184
  </span>
185
185
  </div>
186
- <div class="pf-v5-c-progress-stepper__step-main">
187
- <div class="pf-v5-c-progress-stepper__step-title">First step</div>
186
+ <div class="pf-v6-c-progress-stepper__step-main">
187
+ <div class="pf-v6-c-progress-stepper__step-title">First step</div>
188
188
  <div
189
- class="pf-v5-c-progress-stepper__step-description"
189
+ class="pf-v6-c-progress-stepper__step-description"
190
190
  >This is the first thing to happen</div>
191
191
  </div>
192
192
  </li>
193
193
  <li
194
- class="pf-v5-c-progress-stepper__step pf-m-current"
194
+ class="pf-v6-c-progress-stepper__step pf-m-current"
195
195
  role="listitem"
196
196
  aria-label="current step,in process step,"
197
197
  >
198
- <div class="pf-v5-c-progress-stepper__step-connector">
199
- <span class="pf-v5-c-progress-stepper__step-icon">
198
+ <div class="pf-v6-c-progress-stepper__step-connector">
199
+ <span class="pf-v6-c-progress-stepper__step-icon">
200
200
  <i class="pf-v5-pficon pf-v5-pficon-resources-full" aria-hidden="true"></i>
201
201
  </span>
202
202
  </div>
203
- <div class="pf-v5-c-progress-stepper__step-main">
204
- <div class="pf-v5-c-progress-stepper__step-title">Second step</div>
203
+ <div class="pf-v6-c-progress-stepper__step-main">
204
+ <div class="pf-v6-c-progress-stepper__step-title">Second step</div>
205
205
  <div
206
- class="pf-v5-c-progress-stepper__step-description"
206
+ class="pf-v6-c-progress-stepper__step-description"
207
207
  >This is the second thing to happen</div>
208
208
  </div>
209
209
  </li>
210
210
  <li
211
- class="pf-v5-c-progress-stepper__step pf-m-pending"
211
+ class="pf-v6-c-progress-stepper__step pf-m-pending"
212
212
  role="listitem"
213
213
  aria-label="pending step,"
214
214
  >
215
- <div class="pf-v5-c-progress-stepper__step-connector">
216
- <span class="pf-v5-c-progress-stepper__step-icon"></span>
215
+ <div class="pf-v6-c-progress-stepper__step-connector">
216
+ <span class="pf-v6-c-progress-stepper__step-icon"></span>
217
217
  </div>
218
- <div class="pf-v5-c-progress-stepper__step-main">
219
- <div class="pf-v5-c-progress-stepper__step-title">Third step</div>
218
+ <div class="pf-v6-c-progress-stepper__step-main">
219
+ <div class="pf-v6-c-progress-stepper__step-title">Third step</div>
220
220
  <div
221
- class="pf-v5-c-progress-stepper__step-description"
221
+ class="pf-v6-c-progress-stepper__step-description"
222
222
  >This is the last thing to happen</div>
223
223
  </div>
224
224
  </li>
@@ -229,53 +229,53 @@ cssPrefix: pf-v5-c-progress-stepper
229
229
  ### Center aligned, vertical
230
230
 
231
231
  ```html
232
- <ol class="pf-v5-c-progress-stepper pf-m-center pf-m-vertical" role="list">
232
+ <ol class="pf-v6-c-progress-stepper pf-m-center pf-m-vertical" role="list">
233
233
  <li
234
- class="pf-v5-c-progress-stepper__step pf-m-success"
234
+ class="pf-v6-c-progress-stepper__step pf-m-success"
235
235
  role="listitem"
236
236
  aria-label="completed step,"
237
237
  >
238
- <div class="pf-v5-c-progress-stepper__step-connector">
239
- <span class="pf-v5-c-progress-stepper__step-icon">
238
+ <div class="pf-v6-c-progress-stepper__step-connector">
239
+ <span class="pf-v6-c-progress-stepper__step-icon">
240
240
  <i class="fas fa-check-circle" aria-hidden="true"></i>
241
241
  </span>
242
242
  </div>
243
- <div class="pf-v5-c-progress-stepper__step-main">
244
- <div class="pf-v5-c-progress-stepper__step-title">First step</div>
243
+ <div class="pf-v6-c-progress-stepper__step-main">
244
+ <div class="pf-v6-c-progress-stepper__step-title">First step</div>
245
245
  <div
246
- class="pf-v5-c-progress-stepper__step-description"
246
+ class="pf-v6-c-progress-stepper__step-description"
247
247
  >This is the first thing to happen</div>
248
248
  </div>
249
249
  </li>
250
250
  <li
251
- class="pf-v5-c-progress-stepper__step pf-m-current"
251
+ class="pf-v6-c-progress-stepper__step pf-m-current"
252
252
  role="listitem"
253
253
  aria-label="current step,in process step,"
254
254
  >
255
- <div class="pf-v5-c-progress-stepper__step-connector">
256
- <span class="pf-v5-c-progress-stepper__step-icon">
255
+ <div class="pf-v6-c-progress-stepper__step-connector">
256
+ <span class="pf-v6-c-progress-stepper__step-icon">
257
257
  <i class="pf-v5-pficon pf-v5-pficon-resources-full" aria-hidden="true"></i>
258
258
  </span>
259
259
  </div>
260
- <div class="pf-v5-c-progress-stepper__step-main">
261
- <div class="pf-v5-c-progress-stepper__step-title">Second step</div>
260
+ <div class="pf-v6-c-progress-stepper__step-main">
261
+ <div class="pf-v6-c-progress-stepper__step-title">Second step</div>
262
262
  <div
263
- class="pf-v5-c-progress-stepper__step-description"
263
+ class="pf-v6-c-progress-stepper__step-description"
264
264
  >This is the second thing to happen</div>
265
265
  </div>
266
266
  </li>
267
267
  <li
268
- class="pf-v5-c-progress-stepper__step pf-m-pending"
268
+ class="pf-v6-c-progress-stepper__step pf-m-pending"
269
269
  role="listitem"
270
270
  aria-label="pending step,"
271
271
  >
272
- <div class="pf-v5-c-progress-stepper__step-connector">
273
- <span class="pf-v5-c-progress-stepper__step-icon"></span>
272
+ <div class="pf-v6-c-progress-stepper__step-connector">
273
+ <span class="pf-v6-c-progress-stepper__step-icon"></span>
274
274
  </div>
275
- <div class="pf-v5-c-progress-stepper__step-main">
276
- <div class="pf-v5-c-progress-stepper__step-title">Third step</div>
275
+ <div class="pf-v6-c-progress-stepper__step-main">
276
+ <div class="pf-v6-c-progress-stepper__step-title">Third step</div>
277
277
  <div
278
- class="pf-v5-c-progress-stepper__step-description"
278
+ class="pf-v6-c-progress-stepper__step-description"
279
279
  >This is the last thing to happen</div>
280
280
  </div>
281
281
  </li>
@@ -286,53 +286,53 @@ cssPrefix: pf-v5-c-progress-stepper
286
286
  ### Vertical with descriptions
287
287
 
288
288
  ```html
289
- <ol class="pf-v5-c-progress-stepper pf-m-vertical" role="list">
289
+ <ol class="pf-v6-c-progress-stepper pf-m-vertical" role="list">
290
290
  <li
291
- class="pf-v5-c-progress-stepper__step pf-m-success"
291
+ class="pf-v6-c-progress-stepper__step pf-m-success"
292
292
  role="listitem"
293
293
  aria-label="completed step,"
294
294
  >
295
- <div class="pf-v5-c-progress-stepper__step-connector">
296
- <span class="pf-v5-c-progress-stepper__step-icon">
295
+ <div class="pf-v6-c-progress-stepper__step-connector">
296
+ <span class="pf-v6-c-progress-stepper__step-icon">
297
297
  <i class="fas fa-check-circle" aria-hidden="true"></i>
298
298
  </span>
299
299
  </div>
300
- <div class="pf-v5-c-progress-stepper__step-main">
301
- <div class="pf-v5-c-progress-stepper__step-title">First step</div>
300
+ <div class="pf-v6-c-progress-stepper__step-main">
301
+ <div class="pf-v6-c-progress-stepper__step-title">First step</div>
302
302
  <div
303
- class="pf-v5-c-progress-stepper__step-description"
303
+ class="pf-v6-c-progress-stepper__step-description"
304
304
  >This is the first thing to happen</div>
305
305
  </div>
306
306
  </li>
307
307
  <li
308
- class="pf-v5-c-progress-stepper__step pf-m-current"
308
+ class="pf-v6-c-progress-stepper__step pf-m-current"
309
309
  role="listitem"
310
310
  aria-label="current step,in process step,"
311
311
  >
312
- <div class="pf-v5-c-progress-stepper__step-connector">
313
- <span class="pf-v5-c-progress-stepper__step-icon">
312
+ <div class="pf-v6-c-progress-stepper__step-connector">
313
+ <span class="pf-v6-c-progress-stepper__step-icon">
314
314
  <i class="pf-v5-pficon pf-v5-pficon-resources-full" aria-hidden="true"></i>
315
315
  </span>
316
316
  </div>
317
- <div class="pf-v5-c-progress-stepper__step-main">
318
- <div class="pf-v5-c-progress-stepper__step-title">Second step</div>
317
+ <div class="pf-v6-c-progress-stepper__step-main">
318
+ <div class="pf-v6-c-progress-stepper__step-title">Second step</div>
319
319
  <div
320
- class="pf-v5-c-progress-stepper__step-description"
320
+ class="pf-v6-c-progress-stepper__step-description"
321
321
  >This is the second thing to happen</div>
322
322
  </div>
323
323
  </li>
324
324
  <li
325
- class="pf-v5-c-progress-stepper__step pf-m-pending"
325
+ class="pf-v6-c-progress-stepper__step pf-m-pending"
326
326
  role="listitem"
327
327
  aria-label="pending step,"
328
328
  >
329
- <div class="pf-v5-c-progress-stepper__step-connector">
330
- <span class="pf-v5-c-progress-stepper__step-icon"></span>
329
+ <div class="pf-v6-c-progress-stepper__step-connector">
330
+ <span class="pf-v6-c-progress-stepper__step-icon"></span>
331
331
  </div>
332
- <div class="pf-v5-c-progress-stepper__step-main">
333
- <div class="pf-v5-c-progress-stepper__step-title">Third step</div>
332
+ <div class="pf-v6-c-progress-stepper__step-main">
333
+ <div class="pf-v6-c-progress-stepper__step-title">Third step</div>
334
334
  <div
335
- class="pf-v5-c-progress-stepper__step-description"
335
+ class="pf-v6-c-progress-stepper__step-description"
336
336
  >This is the last thing to happen</div>
337
337
  </div>
338
338
  </li>
@@ -343,53 +343,53 @@ cssPrefix: pf-v5-c-progress-stepper
343
343
  ### Compact
344
344
 
345
345
  ```html
346
- <ol class="pf-v5-c-progress-stepper pf-m-compact" role="list">
346
+ <ol class="pf-v6-c-progress-stepper pf-m-compact" role="list">
347
347
  <li
348
- class="pf-v5-c-progress-stepper__step pf-m-success"
348
+ class="pf-v6-c-progress-stepper__step pf-m-success"
349
349
  role="listitem"
350
350
  aria-label="completed step,"
351
351
  >
352
- <div class="pf-v5-c-progress-stepper__step-connector">
353
- <span class="pf-v5-c-progress-stepper__step-icon">
352
+ <div class="pf-v6-c-progress-stepper__step-connector">
353
+ <span class="pf-v6-c-progress-stepper__step-icon">
354
354
  <i class="fas fa-check-circle" aria-hidden="true"></i>
355
355
  </span>
356
356
  </div>
357
- <div class="pf-v5-c-progress-stepper__step-main">
358
- <div class="pf-v5-c-progress-stepper__step-title">First step</div>
357
+ <div class="pf-v6-c-progress-stepper__step-main">
358
+ <div class="pf-v6-c-progress-stepper__step-title">First step</div>
359
359
  <div
360
- class="pf-v5-c-progress-stepper__step-description"
360
+ class="pf-v6-c-progress-stepper__step-description"
361
361
  >This is the first thing to happen</div>
362
362
  </div>
363
363
  </li>
364
364
  <li
365
- class="pf-v5-c-progress-stepper__step pf-m-current"
365
+ class="pf-v6-c-progress-stepper__step pf-m-current"
366
366
  role="listitem"
367
367
  aria-label="current step,in process step,"
368
368
  >
369
- <div class="pf-v5-c-progress-stepper__step-connector">
370
- <span class="pf-v5-c-progress-stepper__step-icon">
369
+ <div class="pf-v6-c-progress-stepper__step-connector">
370
+ <span class="pf-v6-c-progress-stepper__step-icon">
371
371
  <i class="pf-v5-pficon pf-v5-pficon-resources-full" aria-hidden="true"></i>
372
372
  </span>
373
373
  </div>
374
- <div class="pf-v5-c-progress-stepper__step-main">
375
- <div class="pf-v5-c-progress-stepper__step-title">Second step</div>
374
+ <div class="pf-v6-c-progress-stepper__step-main">
375
+ <div class="pf-v6-c-progress-stepper__step-title">Second step</div>
376
376
  <div
377
- class="pf-v5-c-progress-stepper__step-description"
377
+ class="pf-v6-c-progress-stepper__step-description"
378
378
  >This is the second thing to happen</div>
379
379
  </div>
380
380
  </li>
381
381
  <li
382
- class="pf-v5-c-progress-stepper__step pf-m-pending"
382
+ class="pf-v6-c-progress-stepper__step pf-m-pending"
383
383
  role="listitem"
384
384
  aria-label="pending step,"
385
385
  >
386
- <div class="pf-v5-c-progress-stepper__step-connector">
387
- <span class="pf-v5-c-progress-stepper__step-icon"></span>
386
+ <div class="pf-v6-c-progress-stepper__step-connector">
387
+ <span class="pf-v6-c-progress-stepper__step-icon"></span>
388
388
  </div>
389
- <div class="pf-v5-c-progress-stepper__step-main">
390
- <div class="pf-v5-c-progress-stepper__step-title">Third step</div>
389
+ <div class="pf-v6-c-progress-stepper__step-main">
390
+ <div class="pf-v6-c-progress-stepper__step-title">Third step</div>
391
391
  <div
392
- class="pf-v5-c-progress-stepper__step-description"
392
+ class="pf-v6-c-progress-stepper__step-description"
393
393
  >This is the last thing to happen</div>
394
394
  </div>
395
395
  </li>
@@ -400,53 +400,53 @@ cssPrefix: pf-v5-c-progress-stepper
400
400
  ### Compact, vertical
401
401
 
402
402
  ```html
403
- <ol class="pf-v5-c-progress-stepper pf-m-vertical pf-m-compact" role="list">
403
+ <ol class="pf-v6-c-progress-stepper pf-m-vertical pf-m-compact" role="list">
404
404
  <li
405
- class="pf-v5-c-progress-stepper__step pf-m-success"
405
+ class="pf-v6-c-progress-stepper__step pf-m-success"
406
406
  role="listitem"
407
407
  aria-label="completed step,"
408
408
  >
409
- <div class="pf-v5-c-progress-stepper__step-connector">
410
- <span class="pf-v5-c-progress-stepper__step-icon">
409
+ <div class="pf-v6-c-progress-stepper__step-connector">
410
+ <span class="pf-v6-c-progress-stepper__step-icon">
411
411
  <i class="fas fa-check-circle" aria-hidden="true"></i>
412
412
  </span>
413
413
  </div>
414
- <div class="pf-v5-c-progress-stepper__step-main">
415
- <div class="pf-v5-c-progress-stepper__step-title">First step</div>
414
+ <div class="pf-v6-c-progress-stepper__step-main">
415
+ <div class="pf-v6-c-progress-stepper__step-title">First step</div>
416
416
  <div
417
- class="pf-v5-c-progress-stepper__step-description"
417
+ class="pf-v6-c-progress-stepper__step-description"
418
418
  >This is the first thing to happen</div>
419
419
  </div>
420
420
  </li>
421
421
  <li
422
- class="pf-v5-c-progress-stepper__step pf-m-current"
422
+ class="pf-v6-c-progress-stepper__step pf-m-current"
423
423
  role="listitem"
424
424
  aria-label="current step,in process step,"
425
425
  >
426
- <div class="pf-v5-c-progress-stepper__step-connector">
427
- <span class="pf-v5-c-progress-stepper__step-icon">
426
+ <div class="pf-v6-c-progress-stepper__step-connector">
427
+ <span class="pf-v6-c-progress-stepper__step-icon">
428
428
  <i class="pf-v5-pficon pf-v5-pficon-resources-full" aria-hidden="true"></i>
429
429
  </span>
430
430
  </div>
431
- <div class="pf-v5-c-progress-stepper__step-main">
432
- <div class="pf-v5-c-progress-stepper__step-title">Second step</div>
431
+ <div class="pf-v6-c-progress-stepper__step-main">
432
+ <div class="pf-v6-c-progress-stepper__step-title">Second step</div>
433
433
  <div
434
- class="pf-v5-c-progress-stepper__step-description"
434
+ class="pf-v6-c-progress-stepper__step-description"
435
435
  >This is the second thing to happen</div>
436
436
  </div>
437
437
  </li>
438
438
  <li
439
- class="pf-v5-c-progress-stepper__step pf-m-pending"
439
+ class="pf-v6-c-progress-stepper__step pf-m-pending"
440
440
  role="listitem"
441
441
  aria-label="pending step,"
442
442
  >
443
- <div class="pf-v5-c-progress-stepper__step-connector">
444
- <span class="pf-v5-c-progress-stepper__step-icon"></span>
443
+ <div class="pf-v6-c-progress-stepper__step-connector">
444
+ <span class="pf-v6-c-progress-stepper__step-icon"></span>
445
445
  </div>
446
- <div class="pf-v5-c-progress-stepper__step-main">
447
- <div class="pf-v5-c-progress-stepper__step-title">Third step</div>
446
+ <div class="pf-v6-c-progress-stepper__step-main">
447
+ <div class="pf-v6-c-progress-stepper__step-title">Third step</div>
448
448
  <div
449
- class="pf-v5-c-progress-stepper__step-description"
449
+ class="pf-v6-c-progress-stepper__step-description"
450
450
  >This is the last thing to happen</div>
451
451
  </div>
452
452
  </li>
@@ -458,55 +458,55 @@ cssPrefix: pf-v5-c-progress-stepper
458
458
 
459
459
  ```html
460
460
  <ol
461
- class="pf-v5-c-progress-stepper pf-m-vertical-on-lg pf-m-horizontal-on-xl pf-m-compact"
461
+ class="pf-v6-c-progress-stepper pf-m-vertical-on-lg pf-m-horizontal-on-xl pf-m-compact"
462
462
  role="list"
463
463
  >
464
464
  <li
465
- class="pf-v5-c-progress-stepper__step pf-m-success"
465
+ class="pf-v6-c-progress-stepper__step pf-m-success"
466
466
  role="listitem"
467
467
  aria-label="completed step,"
468
468
  >
469
- <div class="pf-v5-c-progress-stepper__step-connector">
470
- <span class="pf-v5-c-progress-stepper__step-icon">
469
+ <div class="pf-v6-c-progress-stepper__step-connector">
470
+ <span class="pf-v6-c-progress-stepper__step-icon">
471
471
  <i class="fas fa-check-circle" aria-hidden="true"></i>
472
472
  </span>
473
473
  </div>
474
- <div class="pf-v5-c-progress-stepper__step-main">
475
- <div class="pf-v5-c-progress-stepper__step-title">First step</div>
474
+ <div class="pf-v6-c-progress-stepper__step-main">
475
+ <div class="pf-v6-c-progress-stepper__step-title">First step</div>
476
476
  <div
477
- class="pf-v5-c-progress-stepper__step-description"
477
+ class="pf-v6-c-progress-stepper__step-description"
478
478
  >This is the first thing to happen</div>
479
479
  </div>
480
480
  </li>
481
481
  <li
482
- class="pf-v5-c-progress-stepper__step pf-m-current"
482
+ class="pf-v6-c-progress-stepper__step pf-m-current"
483
483
  role="listitem"
484
484
  aria-label="current step,in process step,"
485
485
  >
486
- <div class="pf-v5-c-progress-stepper__step-connector">
487
- <span class="pf-v5-c-progress-stepper__step-icon">
486
+ <div class="pf-v6-c-progress-stepper__step-connector">
487
+ <span class="pf-v6-c-progress-stepper__step-icon">
488
488
  <i class="pf-v5-pficon pf-v5-pficon-resources-full" aria-hidden="true"></i>
489
489
  </span>
490
490
  </div>
491
- <div class="pf-v5-c-progress-stepper__step-main">
492
- <div class="pf-v5-c-progress-stepper__step-title">Second step</div>
491
+ <div class="pf-v6-c-progress-stepper__step-main">
492
+ <div class="pf-v6-c-progress-stepper__step-title">Second step</div>
493
493
  <div
494
- class="pf-v5-c-progress-stepper__step-description"
494
+ class="pf-v6-c-progress-stepper__step-description"
495
495
  >This is the second thing to happen</div>
496
496
  </div>
497
497
  </li>
498
498
  <li
499
- class="pf-v5-c-progress-stepper__step pf-m-pending"
499
+ class="pf-v6-c-progress-stepper__step pf-m-pending"
500
500
  role="listitem"
501
501
  aria-label="pending step,"
502
502
  >
503
- <div class="pf-v5-c-progress-stepper__step-connector">
504
- <span class="pf-v5-c-progress-stepper__step-icon"></span>
503
+ <div class="pf-v6-c-progress-stepper__step-connector">
504
+ <span class="pf-v6-c-progress-stepper__step-icon"></span>
505
505
  </div>
506
- <div class="pf-v5-c-progress-stepper__step-main">
507
- <div class="pf-v5-c-progress-stepper__step-title">Third step</div>
506
+ <div class="pf-v6-c-progress-stepper__step-main">
507
+ <div class="pf-v6-c-progress-stepper__step-title">Third step</div>
508
508
  <div
509
- class="pf-v5-c-progress-stepper__step-description"
509
+ class="pf-v6-c-progress-stepper__step-description"
510
510
  >This is the last thing to happen</div>
511
511
  </div>
512
512
  </li>
@@ -518,55 +518,55 @@ cssPrefix: pf-v5-c-progress-stepper
518
518
 
519
519
  ```html
520
520
  <ol
521
- class="pf-v5-c-progress-stepper pf-m-center pf-m-vertical pf-m-compact"
521
+ class="pf-v6-c-progress-stepper pf-m-center pf-m-vertical pf-m-compact"
522
522
  role="list"
523
523
  >
524
524
  <li
525
- class="pf-v5-c-progress-stepper__step pf-m-success"
525
+ class="pf-v6-c-progress-stepper__step pf-m-success"
526
526
  role="listitem"
527
527
  aria-label="completed step,"
528
528
  >
529
- <div class="pf-v5-c-progress-stepper__step-connector">
530
- <span class="pf-v5-c-progress-stepper__step-icon">
529
+ <div class="pf-v6-c-progress-stepper__step-connector">
530
+ <span class="pf-v6-c-progress-stepper__step-icon">
531
531
  <i class="fas fa-check-circle" aria-hidden="true"></i>
532
532
  </span>
533
533
  </div>
534
- <div class="pf-v5-c-progress-stepper__step-main">
535
- <div class="pf-v5-c-progress-stepper__step-title">First step</div>
534
+ <div class="pf-v6-c-progress-stepper__step-main">
535
+ <div class="pf-v6-c-progress-stepper__step-title">First step</div>
536
536
  <div
537
- class="pf-v5-c-progress-stepper__step-description"
537
+ class="pf-v6-c-progress-stepper__step-description"
538
538
  >This is the first thing to happen</div>
539
539
  </div>
540
540
  </li>
541
541
  <li
542
- class="pf-v5-c-progress-stepper__step pf-m-current"
542
+ class="pf-v6-c-progress-stepper__step pf-m-current"
543
543
  role="listitem"
544
544
  aria-label="current step,in process step,"
545
545
  >
546
- <div class="pf-v5-c-progress-stepper__step-connector">
547
- <span class="pf-v5-c-progress-stepper__step-icon">
546
+ <div class="pf-v6-c-progress-stepper__step-connector">
547
+ <span class="pf-v6-c-progress-stepper__step-icon">
548
548
  <i class="pf-v5-pficon pf-v5-pficon-resources-full" aria-hidden="true"></i>
549
549
  </span>
550
550
  </div>
551
- <div class="pf-v5-c-progress-stepper__step-main">
552
- <div class="pf-v5-c-progress-stepper__step-title">Second step</div>
551
+ <div class="pf-v6-c-progress-stepper__step-main">
552
+ <div class="pf-v6-c-progress-stepper__step-title">Second step</div>
553
553
  <div
554
- class="pf-v5-c-progress-stepper__step-description"
554
+ class="pf-v6-c-progress-stepper__step-description"
555
555
  >This is the second thing to happen</div>
556
556
  </div>
557
557
  </li>
558
558
  <li
559
- class="pf-v5-c-progress-stepper__step pf-m-pending"
559
+ class="pf-v6-c-progress-stepper__step pf-m-pending"
560
560
  role="listitem"
561
561
  aria-label="pending step,"
562
562
  >
563
- <div class="pf-v5-c-progress-stepper__step-connector">
564
- <span class="pf-v5-c-progress-stepper__step-icon"></span>
563
+ <div class="pf-v6-c-progress-stepper__step-connector">
564
+ <span class="pf-v6-c-progress-stepper__step-icon"></span>
565
565
  </div>
566
- <div class="pf-v5-c-progress-stepper__step-main">
567
- <div class="pf-v5-c-progress-stepper__step-title">Third step</div>
566
+ <div class="pf-v6-c-progress-stepper__step-main">
567
+ <div class="pf-v6-c-progress-stepper__step-title">Third step</div>
568
568
  <div
569
- class="pf-v5-c-progress-stepper__step-description"
569
+ class="pf-v6-c-progress-stepper__step-description"
570
570
  >This is the last thing to happen</div>
571
571
  </div>
572
572
  </li>
@@ -577,53 +577,53 @@ cssPrefix: pf-v5-c-progress-stepper
577
577
  ### Compact, centered
578
578
 
579
579
  ```html
580
- <ol class="pf-v5-c-progress-stepper pf-m-center pf-m-compact" role="list">
580
+ <ol class="pf-v6-c-progress-stepper pf-m-center pf-m-compact" role="list">
581
581
  <li
582
- class="pf-v5-c-progress-stepper__step pf-m-success"
582
+ class="pf-v6-c-progress-stepper__step pf-m-success"
583
583
  role="listitem"
584
584
  aria-label="completed step,"
585
585
  >
586
- <div class="pf-v5-c-progress-stepper__step-connector">
587
- <span class="pf-v5-c-progress-stepper__step-icon">
586
+ <div class="pf-v6-c-progress-stepper__step-connector">
587
+ <span class="pf-v6-c-progress-stepper__step-icon">
588
588
  <i class="fas fa-check-circle" aria-hidden="true"></i>
589
589
  </span>
590
590
  </div>
591
- <div class="pf-v5-c-progress-stepper__step-main">
592
- <div class="pf-v5-c-progress-stepper__step-title">First step</div>
591
+ <div class="pf-v6-c-progress-stepper__step-main">
592
+ <div class="pf-v6-c-progress-stepper__step-title">First step</div>
593
593
  <div
594
- class="pf-v5-c-progress-stepper__step-description"
594
+ class="pf-v6-c-progress-stepper__step-description"
595
595
  >This is the first thing to happen</div>
596
596
  </div>
597
597
  </li>
598
598
  <li
599
- class="pf-v5-c-progress-stepper__step pf-m-current"
599
+ class="pf-v6-c-progress-stepper__step pf-m-current"
600
600
  role="listitem"
601
601
  aria-label="current step,in process step,"
602
602
  >
603
- <div class="pf-v5-c-progress-stepper__step-connector">
604
- <span class="pf-v5-c-progress-stepper__step-icon">
603
+ <div class="pf-v6-c-progress-stepper__step-connector">
604
+ <span class="pf-v6-c-progress-stepper__step-icon">
605
605
  <i class="pf-v5-pficon pf-v5-pficon-resources-full" aria-hidden="true"></i>
606
606
  </span>
607
607
  </div>
608
- <div class="pf-v5-c-progress-stepper__step-main">
609
- <div class="pf-v5-c-progress-stepper__step-title">Second step</div>
608
+ <div class="pf-v6-c-progress-stepper__step-main">
609
+ <div class="pf-v6-c-progress-stepper__step-title">Second step</div>
610
610
  <div
611
- class="pf-v5-c-progress-stepper__step-description"
611
+ class="pf-v6-c-progress-stepper__step-description"
612
612
  >This is the second thing to happen</div>
613
613
  </div>
614
614
  </li>
615
615
  <li
616
- class="pf-v5-c-progress-stepper__step pf-m-pending"
616
+ class="pf-v6-c-progress-stepper__step pf-m-pending"
617
617
  role="listitem"
618
618
  aria-label="pending step,"
619
619
  >
620
- <div class="pf-v5-c-progress-stepper__step-connector">
621
- <span class="pf-v5-c-progress-stepper__step-icon"></span>
620
+ <div class="pf-v6-c-progress-stepper__step-connector">
621
+ <span class="pf-v6-c-progress-stepper__step-icon"></span>
622
622
  </div>
623
- <div class="pf-v5-c-progress-stepper__step-main">
624
- <div class="pf-v5-c-progress-stepper__step-title">Third step</div>
623
+ <div class="pf-v6-c-progress-stepper__step-main">
624
+ <div class="pf-v6-c-progress-stepper__step-title">Third step</div>
625
625
  <div
626
- class="pf-v5-c-progress-stepper__step-description"
626
+ class="pf-v6-c-progress-stepper__step-description"
627
627
  >This is the last thing to happen</div>
628
628
  </div>
629
629
  </li>
@@ -634,73 +634,73 @@ cssPrefix: pf-v5-c-progress-stepper
634
634
  ### Basic with an issue
635
635
 
636
636
  ```html
637
- <ol class="pf-v5-c-progress-stepper" role="list">
637
+ <ol class="pf-v6-c-progress-stepper" role="list">
638
638
  <li
639
- class="pf-v5-c-progress-stepper__step pf-m-success"
639
+ class="pf-v6-c-progress-stepper__step pf-m-success"
640
640
  role="listitem"
641
641
  aria-label="completed step,"
642
642
  >
643
- <div class="pf-v5-c-progress-stepper__step-connector">
644
- <span class="pf-v5-c-progress-stepper__step-icon">
643
+ <div class="pf-v6-c-progress-stepper__step-connector">
644
+ <span class="pf-v6-c-progress-stepper__step-icon">
645
645
  <i class="fas fa-check-circle" aria-hidden="true"></i>
646
646
  </span>
647
647
  </div>
648
- <div class="pf-v5-c-progress-stepper__step-main">
649
- <div class="pf-v5-c-progress-stepper__step-title">First step</div>
648
+ <div class="pf-v6-c-progress-stepper__step-main">
649
+ <div class="pf-v6-c-progress-stepper__step-title">First step</div>
650
650
  </div>
651
651
  </li>
652
652
  <li
653
- class="pf-v5-c-progress-stepper__step pf-m-success"
653
+ class="pf-v6-c-progress-stepper__step pf-m-success"
654
654
  role="listitem"
655
655
  aria-label="completed step,"
656
656
  >
657
- <div class="pf-v5-c-progress-stepper__step-connector">
658
- <span class="pf-v5-c-progress-stepper__step-icon">
657
+ <div class="pf-v6-c-progress-stepper__step-connector">
658
+ <span class="pf-v6-c-progress-stepper__step-icon">
659
659
  <i class="fas fa-check-circle" aria-hidden="true"></i>
660
660
  </span>
661
661
  </div>
662
- <div class="pf-v5-c-progress-stepper__step-main">
663
- <div class="pf-v5-c-progress-stepper__step-title">Second step</div>
662
+ <div class="pf-v6-c-progress-stepper__step-main">
663
+ <div class="pf-v6-c-progress-stepper__step-title">Second step</div>
664
664
  </div>
665
665
  </li>
666
666
  <li
667
- class="pf-v5-c-progress-stepper__step pf-m-warning"
667
+ class="pf-v6-c-progress-stepper__step pf-m-warning"
668
668
  role="listitem"
669
669
  aria-label="step with issue,"
670
670
  >
671
- <div class="pf-v5-c-progress-stepper__step-connector">
672
- <span class="pf-v5-c-progress-stepper__step-icon">
671
+ <div class="pf-v6-c-progress-stepper__step-connector">
672
+ <span class="pf-v6-c-progress-stepper__step-icon">
673
673
  <i class="fas fa-exclamation-triangle" aria-hidden="true"></i>
674
674
  </span>
675
675
  </div>
676
- <div class="pf-v5-c-progress-stepper__step-main">
677
- <div class="pf-v5-c-progress-stepper__step-title">Third step</div>
676
+ <div class="pf-v6-c-progress-stepper__step-main">
677
+ <div class="pf-v6-c-progress-stepper__step-title">Third step</div>
678
678
  </div>
679
679
  </li>
680
680
  <li
681
- class="pf-v5-c-progress-stepper__step pf-m-current"
681
+ class="pf-v6-c-progress-stepper__step pf-m-current"
682
682
  role="listitem"
683
683
  aria-label="current step,in process step,"
684
684
  >
685
- <div class="pf-v5-c-progress-stepper__step-connector">
686
- <span class="pf-v5-c-progress-stepper__step-icon">
685
+ <div class="pf-v6-c-progress-stepper__step-connector">
686
+ <span class="pf-v6-c-progress-stepper__step-icon">
687
687
  <i class="pf-v5-pficon pf-v5-pficon-resources-full" aria-hidden="true"></i>
688
688
  </span>
689
689
  </div>
690
- <div class="pf-v5-c-progress-stepper__step-main">
691
- <div class="pf-v5-c-progress-stepper__step-title">Fourth step</div>
690
+ <div class="pf-v6-c-progress-stepper__step-main">
691
+ <div class="pf-v6-c-progress-stepper__step-title">Fourth step</div>
692
692
  </div>
693
693
  </li>
694
694
  <li
695
- class="pf-v5-c-progress-stepper__step pf-m-pending"
695
+ class="pf-v6-c-progress-stepper__step pf-m-pending"
696
696
  role="listitem"
697
697
  aria-label="pending step,"
698
698
  >
699
- <div class="pf-v5-c-progress-stepper__step-connector">
700
- <span class="pf-v5-c-progress-stepper__step-icon"></span>
699
+ <div class="pf-v6-c-progress-stepper__step-connector">
700
+ <span class="pf-v6-c-progress-stepper__step-icon"></span>
701
701
  </div>
702
- <div class="pf-v5-c-progress-stepper__step-main">
703
- <div class="pf-v5-c-progress-stepper__step-title">Fifth step</div>
702
+ <div class="pf-v6-c-progress-stepper__step-main">
703
+ <div class="pf-v6-c-progress-stepper__step-title">Fifth step</div>
704
704
  </div>
705
705
  </li>
706
706
  </ol>
@@ -710,73 +710,73 @@ cssPrefix: pf-v5-c-progress-stepper
710
710
  ### Basic with a failure
711
711
 
712
712
  ```html
713
- <ol class="pf-v5-c-progress-stepper" role="list">
713
+ <ol class="pf-v6-c-progress-stepper" role="list">
714
714
  <li
715
- class="pf-v5-c-progress-stepper__step pf-m-success"
715
+ class="pf-v6-c-progress-stepper__step pf-m-success"
716
716
  role="listitem"
717
717
  aria-label="completed step,"
718
718
  >
719
- <div class="pf-v5-c-progress-stepper__step-connector">
720
- <span class="pf-v5-c-progress-stepper__step-icon">
719
+ <div class="pf-v6-c-progress-stepper__step-connector">
720
+ <span class="pf-v6-c-progress-stepper__step-icon">
721
721
  <i class="fas fa-check-circle" aria-hidden="true"></i>
722
722
  </span>
723
723
  </div>
724
- <div class="pf-v5-c-progress-stepper__step-main">
725
- <div class="pf-v5-c-progress-stepper__step-title">First step</div>
724
+ <div class="pf-v6-c-progress-stepper__step-main">
725
+ <div class="pf-v6-c-progress-stepper__step-title">First step</div>
726
726
  </div>
727
727
  </li>
728
728
  <li
729
- class="pf-v5-c-progress-stepper__step pf-m-success"
729
+ class="pf-v6-c-progress-stepper__step pf-m-success"
730
730
  role="listitem"
731
731
  aria-label="completed step,"
732
732
  >
733
- <div class="pf-v5-c-progress-stepper__step-connector">
734
- <span class="pf-v5-c-progress-stepper__step-icon">
733
+ <div class="pf-v6-c-progress-stepper__step-connector">
734
+ <span class="pf-v6-c-progress-stepper__step-icon">
735
735
  <i class="fas fa-check-circle" aria-hidden="true"></i>
736
736
  </span>
737
737
  </div>
738
- <div class="pf-v5-c-progress-stepper__step-main">
739
- <div class="pf-v5-c-progress-stepper__step-title">Second step</div>
738
+ <div class="pf-v6-c-progress-stepper__step-main">
739
+ <div class="pf-v6-c-progress-stepper__step-title">Second step</div>
740
740
  </div>
741
741
  </li>
742
742
  <li
743
- class="pf-v5-c-progress-stepper__step pf-m-success"
743
+ class="pf-v6-c-progress-stepper__step pf-m-success"
744
744
  role="listitem"
745
745
  aria-label="completed step,"
746
746
  >
747
- <div class="pf-v5-c-progress-stepper__step-connector">
748
- <span class="pf-v5-c-progress-stepper__step-icon">
747
+ <div class="pf-v6-c-progress-stepper__step-connector">
748
+ <span class="pf-v6-c-progress-stepper__step-icon">
749
749
  <i class="fas fa-check-circle" aria-hidden="true"></i>
750
750
  </span>
751
751
  </div>
752
- <div class="pf-v5-c-progress-stepper__step-main">
753
- <div class="pf-v5-c-progress-stepper__step-title">Third step</div>
752
+ <div class="pf-v6-c-progress-stepper__step-main">
753
+ <div class="pf-v6-c-progress-stepper__step-title">Third step</div>
754
754
  </div>
755
755
  </li>
756
756
  <li
757
- class="pf-v5-c-progress-stepper__step pf-m-current pf-m-danger"
757
+ class="pf-v6-c-progress-stepper__step pf-m-current pf-m-danger"
758
758
  role="listitem"
759
759
  aria-label="current step,step with failure,"
760
760
  >
761
- <div class="pf-v5-c-progress-stepper__step-connector">
762
- <span class="pf-v5-c-progress-stepper__step-icon">
761
+ <div class="pf-v6-c-progress-stepper__step-connector">
762
+ <span class="pf-v6-c-progress-stepper__step-icon">
763
763
  <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
764
764
  </span>
765
765
  </div>
766
- <div class="pf-v5-c-progress-stepper__step-main">
767
- <div class="pf-v5-c-progress-stepper__step-title">Fourth step</div>
766
+ <div class="pf-v6-c-progress-stepper__step-main">
767
+ <div class="pf-v6-c-progress-stepper__step-title">Fourth step</div>
768
768
  </div>
769
769
  </li>
770
770
  <li
771
- class="pf-v5-c-progress-stepper__step pf-m-pending"
771
+ class="pf-v6-c-progress-stepper__step pf-m-pending"
772
772
  role="listitem"
773
773
  aria-label="pending step,"
774
774
  >
775
- <div class="pf-v5-c-progress-stepper__step-connector">
776
- <span class="pf-v5-c-progress-stepper__step-icon"></span>
775
+ <div class="pf-v6-c-progress-stepper__step-connector">
776
+ <span class="pf-v6-c-progress-stepper__step-icon"></span>
777
777
  </div>
778
- <div class="pf-v5-c-progress-stepper__step-main">
779
- <div class="pf-v5-c-progress-stepper__step-title">Fifth step</div>
778
+ <div class="pf-v6-c-progress-stepper__step-main">
779
+ <div class="pf-v6-c-progress-stepper__step-title">Fifth step</div>
780
780
  </div>
781
781
  </li>
782
782
  </ol>
@@ -786,47 +786,47 @@ cssPrefix: pf-v5-c-progress-stepper
786
786
  ### Basic with Patternfly icons
787
787
 
788
788
  ```html
789
- <ol class="pf-v5-c-progress-stepper" role="list">
789
+ <ol class="pf-v6-c-progress-stepper" role="list">
790
790
  <li
791
- class="pf-v5-c-progress-stepper__step pf-m-success"
791
+ class="pf-v6-c-progress-stepper__step pf-m-success"
792
792
  role="listitem"
793
793
  aria-label="completed step,"
794
794
  >
795
- <div class="pf-v5-c-progress-stepper__step-connector">
796
- <span class="pf-v5-c-progress-stepper__step-icon">
795
+ <div class="pf-v6-c-progress-stepper__step-connector">
796
+ <span class="pf-v6-c-progress-stepper__step-icon">
797
797
  <i class="fas fa-check-circle" aria-hidden="true"></i>
798
798
  </span>
799
799
  </div>
800
- <div class="pf-v5-c-progress-stepper__step-main">
801
- <div class="pf-v5-c-progress-stepper__step-title">Successful completion</div>
800
+ <div class="pf-v6-c-progress-stepper__step-main">
801
+ <div class="pf-v6-c-progress-stepper__step-title">Successful completion</div>
802
802
  </div>
803
803
  </li>
804
804
  <li
805
- class="pf-v5-c-progress-stepper__step pf-m-current"
805
+ class="pf-v6-c-progress-stepper__step pf-m-current"
806
806
  role="listitem"
807
807
  aria-label="current step,in process step,"
808
808
  >
809
- <div class="pf-v5-c-progress-stepper__step-connector">
810
- <span class="pf-v5-c-progress-stepper__step-icon">
809
+ <div class="pf-v6-c-progress-stepper__step-connector">
810
+ <span class="pf-v6-c-progress-stepper__step-icon">
811
811
  <i class="pf-v5-pficon pf-v5-pficon-in-progress" aria-hidden="true"></i>
812
812
  </span>
813
813
  </div>
814
- <div class="pf-v5-c-progress-stepper__step-main">
815
- <div class="pf-v5-c-progress-stepper__step-title">In process</div>
814
+ <div class="pf-v6-c-progress-stepper__step-main">
815
+ <div class="pf-v6-c-progress-stepper__step-title">In process</div>
816
816
  </div>
817
817
  </li>
818
818
  <li
819
- class="pf-v5-c-progress-stepper__step pf-m-pending"
819
+ class="pf-v6-c-progress-stepper__step pf-m-pending"
820
820
  role="listitem"
821
821
  aria-label="pending step,"
822
822
  >
823
- <div class="pf-v5-c-progress-stepper__step-connector">
824
- <span class="pf-v5-c-progress-stepper__step-icon">
823
+ <div class="pf-v6-c-progress-stepper__step-connector">
824
+ <span class="pf-v6-c-progress-stepper__step-icon">
825
825
  <i class="pf-v5-pficon pf-v5-pficon-pending" aria-hidden="true"></i>
826
826
  </span>
827
827
  </div>
828
- <div class="pf-v5-c-progress-stepper__step-main">
829
- <div class="pf-v5-c-progress-stepper__step-title">Pending</div>
828
+ <div class="pf-v6-c-progress-stepper__step-main">
829
+ <div class="pf-v6-c-progress-stepper__step-title">Pending</div>
830
830
  </div>
831
831
  </li>
832
832
  </ol>
@@ -836,68 +836,68 @@ cssPrefix: pf-v5-c-progress-stepper
836
836
  ### With help text
837
837
 
838
838
  ```html
839
- <ol class="pf-v5-c-progress-stepper" role="list">
839
+ <ol class="pf-v6-c-progress-stepper" role="list">
840
840
  <li
841
- class="pf-v5-c-progress-stepper__step pf-m-success"
841
+ class="pf-v6-c-progress-stepper__step pf-m-success"
842
842
  role="listitem"
843
843
  aria-label="completed step,"
844
844
  >
845
- <div class="pf-v5-c-progress-stepper__step-connector">
846
- <span class="pf-v5-c-progress-stepper__step-icon">
845
+ <div class="pf-v6-c-progress-stepper__step-connector">
846
+ <span class="pf-v6-c-progress-stepper__step-icon">
847
847
  <i class="fas fa-check-circle" aria-hidden="true"></i>
848
848
  </span>
849
849
  </div>
850
- <div class="pf-v5-c-progress-stepper__step-main">
850
+ <div class="pf-v6-c-progress-stepper__step-main">
851
851
  <button
852
- class="pf-v5-c-progress-stepper__step-title pf-m-help-text"
852
+ class="pf-v6-c-progress-stepper__step-title pf-m-help-text"
853
853
  type="button"
854
854
  >First step</button>
855
855
  </div>
856
856
  </li>
857
857
  <li
858
- class="pf-v5-c-progress-stepper__step pf-m-danger"
858
+ class="pf-v6-c-progress-stepper__step pf-m-danger"
859
859
  role="listitem"
860
860
  aria-label="step with failure,"
861
861
  >
862
- <div class="pf-v5-c-progress-stepper__step-connector">
863
- <span class="pf-v5-c-progress-stepper__step-icon">
862
+ <div class="pf-v6-c-progress-stepper__step-connector">
863
+ <span class="pf-v6-c-progress-stepper__step-icon">
864
864
  <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
865
865
  </span>
866
866
  </div>
867
- <div class="pf-v5-c-progress-stepper__step-main">
867
+ <div class="pf-v6-c-progress-stepper__step-main">
868
868
  <button
869
- class="pf-v5-c-progress-stepper__step-title pf-m-help-text"
869
+ class="pf-v6-c-progress-stepper__step-title pf-m-help-text"
870
870
  type="button"
871
871
  >Second step</button>
872
872
  </div>
873
873
  </li>
874
874
  <li
875
- class="pf-v5-c-progress-stepper__step pf-m-current"
875
+ class="pf-v6-c-progress-stepper__step pf-m-current"
876
876
  role="listitem"
877
877
  aria-label="current step,in process step,"
878
878
  >
879
- <div class="pf-v5-c-progress-stepper__step-connector">
880
- <span class="pf-v5-c-progress-stepper__step-icon">
879
+ <div class="pf-v6-c-progress-stepper__step-connector">
880
+ <span class="pf-v6-c-progress-stepper__step-icon">
881
881
  <i class="pf-v5-pficon pf-v5-pficon-resources-full" aria-hidden="true"></i>
882
882
  </span>
883
883
  </div>
884
- <div class="pf-v5-c-progress-stepper__step-main">
884
+ <div class="pf-v6-c-progress-stepper__step-main">
885
885
  <button
886
- class="pf-v5-c-progress-stepper__step-title pf-m-help-text"
886
+ class="pf-v6-c-progress-stepper__step-title pf-m-help-text"
887
887
  type="button"
888
888
  >Third step</button>
889
889
  </div>
890
890
  </li>
891
891
  <li
892
- class="pf-v5-c-progress-stepper__step pf-m-pending"
892
+ class="pf-v6-c-progress-stepper__step pf-m-pending"
893
893
  role="listitem"
894
894
  aria-label="pending step,"
895
895
  >
896
- <div class="pf-v5-c-progress-stepper__step-connector">
897
- <span class="pf-v5-c-progress-stepper__step-icon"></span>
896
+ <div class="pf-v6-c-progress-stepper__step-connector">
897
+ <span class="pf-v6-c-progress-stepper__step-icon"></span>
898
898
  </div>
899
- <div class="pf-v5-c-progress-stepper__step-main">
900
- <div class="pf-v5-c-progress-stepper__step-title">Fourth step</div>
899
+ <div class="pf-v6-c-progress-stepper__step-main">
900
+ <div class="pf-v6-c-progress-stepper__step-title">Fourth step</div>
901
901
  </div>
902
902
  </li>
903
903
  </ol>