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

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 +5 -5
  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/Progress/examples/Progress.md CHANGED
@@ -7,23 +7,23 @@ cssPrefix: pf-v5-c-progress
7
7
  ### Simple
8
8
 
9
9
  ```html
10
- <div class="pf-v5-c-progress" id="progress-simple-example">
10
+ <div class="pf-v6-c-progress" id="progress-simple-example">
11
11
  <div
12
- class="pf-v5-c-progress__description"
12
+ class="pf-v6-c-progress__description"
13
13
  id="progress-simple-example-description"
14
14
  >Title</div>
15
- <div class="pf-v5-c-progress__status" aria-hidden="true">
16
- <span class="pf-v5-c-progress__measure">33%</span>
15
+ <div class="pf-v6-c-progress__status" aria-hidden="true">
16
+ <span class="pf-v6-c-progress__measure">33%</span>
17
17
  </div>
18
18
  <div
19
- class="pf-v5-c-progress__bar"
19
+ class="pf-v6-c-progress__bar"
20
20
  role="progressbar"
21
21
  aria-valuemin="0"
22
22
  aria-valuemax="100"
23
23
  aria-valuenow="33"
24
24
  aria-labelledby="progress-simple-example-description"
25
25
  >
26
- <div class="pf-v5-c-progress__indicator" style="width:33%;"></div>
26
+ <div class="pf-v6-c-progress__indicator" style="width:33%;"></div>
27
27
  </div>
28
28
  </div>
29
29
 
@@ -32,23 +32,23 @@ cssPrefix: pf-v5-c-progress
32
32
  ### Small
33
33
 
34
34
  ```html
35
- <div class="pf-v5-c-progress pf-m-sm" id="progress-sm-example">
35
+ <div class="pf-v6-c-progress pf-m-sm" id="progress-sm-example">
36
36
  <div
37
- class="pf-v5-c-progress__description"
37
+ class="pf-v6-c-progress__description"
38
38
  id="progress-sm-example-description"
39
39
  >Title</div>
40
- <div class="pf-v5-c-progress__status" aria-hidden="true">
41
- <span class="pf-v5-c-progress__measure">33%</span>
40
+ <div class="pf-v6-c-progress__status" aria-hidden="true">
41
+ <span class="pf-v6-c-progress__measure">33%</span>
42
42
  </div>
43
43
  <div
44
- class="pf-v5-c-progress__bar"
44
+ class="pf-v6-c-progress__bar"
45
45
  role="progressbar"
46
46
  aria-valuemin="0"
47
47
  aria-valuemax="100"
48
48
  aria-valuenow="33"
49
49
  aria-labelledby="progress-sm-example-description"
50
50
  >
51
- <div class="pf-v5-c-progress__indicator" style="width:33%;"></div>
51
+ <div class="pf-v6-c-progress__indicator" style="width:33%;"></div>
52
52
  </div>
53
53
  </div>
54
54
 
@@ -57,23 +57,23 @@ cssPrefix: pf-v5-c-progress
57
57
  ### Large
58
58
 
59
59
  ```html
60
- <div class="pf-v5-c-progress pf-m-lg" id="progress-lg-example">
60
+ <div class="pf-v6-c-progress pf-m-lg" id="progress-lg-example">
61
61
  <div
62
- class="pf-v5-c-progress__description"
62
+ class="pf-v6-c-progress__description"
63
63
  id="progress-lg-example-description"
64
64
  >Title</div>
65
- <div class="pf-v5-c-progress__status" aria-hidden="true">
66
- <span class="pf-v5-c-progress__measure">33%</span>
65
+ <div class="pf-v6-c-progress__status" aria-hidden="true">
66
+ <span class="pf-v6-c-progress__measure">33%</span>
67
67
  </div>
68
68
  <div
69
- class="pf-v5-c-progress__bar"
69
+ class="pf-v6-c-progress__bar"
70
70
  role="progressbar"
71
71
  aria-valuemin="0"
72
72
  aria-valuemax="100"
73
73
  aria-valuenow="33"
74
74
  aria-labelledby="progress-lg-example-description"
75
75
  >
76
- <div class="pf-v5-c-progress__indicator" style="width:33%;"></div>
76
+ <div class="pf-v6-c-progress__indicator" style="width:33%;"></div>
77
77
  </div>
78
78
  </div>
79
79
 
@@ -83,25 +83,25 @@ cssPrefix: pf-v5-c-progress
83
83
 
84
84
  ```html
85
85
  <div
86
- class="pf-v5-c-progress pf-m-outside pf-m-lg"
86
+ class="pf-v6-c-progress pf-m-outside pf-m-lg"
87
87
  id="progress-outside-example"
88
88
  >
89
89
  <div
90
- class="pf-v5-c-progress__description"
90
+ class="pf-v6-c-progress__description"
91
91
  id="progress-outside-example-description"
92
92
  >Title</div>
93
- <div class="pf-v5-c-progress__status" aria-hidden="true">
94
- <span class="pf-v5-c-progress__measure">33%</span>
93
+ <div class="pf-v6-c-progress__status" aria-hidden="true">
94
+ <span class="pf-v6-c-progress__measure">33%</span>
95
95
  </div>
96
96
  <div
97
- class="pf-v5-c-progress__bar"
97
+ class="pf-v6-c-progress__bar"
98
98
  role="progressbar"
99
99
  aria-valuemin="0"
100
100
  aria-valuemax="100"
101
101
  aria-valuenow="33"
102
102
  aria-labelledby="progress-outside-example-description"
103
103
  >
104
- <div class="pf-v5-c-progress__indicator" style="width:33%;"></div>
104
+ <div class="pf-v6-c-progress__indicator" style="width:33%;"></div>
105
105
  </div>
106
106
  </div>
107
107
 
@@ -110,22 +110,22 @@ cssPrefix: pf-v5-c-progress
110
110
  ### Inside
111
111
 
112
112
  ```html
113
- <div class="pf-v5-c-progress pf-m-lg pf-m-inside" id="progress-inside-example">
113
+ <div class="pf-v6-c-progress pf-m-lg pf-m-inside" id="progress-inside-example">
114
114
  <div
115
- class="pf-v5-c-progress__description"
115
+ class="pf-v6-c-progress__description"
116
116
  id="progress-inside-example-description"
117
117
  >Title</div>
118
- <div class="pf-v5-c-progress__status" aria-hidden="true"></div>
118
+ <div class="pf-v6-c-progress__status" aria-hidden="true"></div>
119
119
  <div
120
- class="pf-v5-c-progress__bar"
120
+ class="pf-v6-c-progress__bar"
121
121
  role="progressbar"
122
122
  aria-valuemin="0"
123
123
  aria-valuemax="100"
124
124
  aria-valuenow="33"
125
125
  aria-labelledby="progress-inside-example-description"
126
126
  >
127
- <div class="pf-v5-c-progress__indicator" style="width:33%;">
128
- <span class="pf-v5-c-progress__measure">33%</span>
127
+ <div class="pf-v6-c-progress__indicator" style="width:33%;">
128
+ <span class="pf-v6-c-progress__measure">33%</span>
129
129
  </div>
130
130
  </div>
131
131
  </div>
@@ -135,26 +135,26 @@ cssPrefix: pf-v5-c-progress
135
135
  ### Success
136
136
 
137
137
  ```html
138
- <div class="pf-v5-c-progress pf-m-success" id="progress-success-example">
138
+ <div class="pf-v6-c-progress pf-m-success" id="progress-success-example">
139
139
  <div
140
- class="pf-v5-c-progress__description"
140
+ class="pf-v6-c-progress__description"
141
141
  id="progress-success-example-description"
142
142
  >Title</div>
143
- <div class="pf-v5-c-progress__status" aria-hidden="true">
144
- <span class="pf-v5-c-progress__measure">100%</span>
145
- <span class="pf-v5-c-progress__status-icon">
143
+ <div class="pf-v6-c-progress__status" aria-hidden="true">
144
+ <span class="pf-v6-c-progress__measure">100%</span>
145
+ <span class="pf-v6-c-progress__status-icon">
146
146
  <i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
147
147
  </span>
148
148
  </div>
149
149
  <div
150
- class="pf-v5-c-progress__bar"
150
+ class="pf-v6-c-progress__bar"
151
151
  role="progressbar"
152
152
  aria-valuemin="0"
153
153
  aria-valuemax="100"
154
154
  aria-valuenow="100"
155
155
  aria-labelledby="progress-success-example-description"
156
156
  >
157
- <div class="pf-v5-c-progress__indicator" style="width:100%;"></div>
157
+ <div class="pf-v6-c-progress__indicator" style="width:100%;"></div>
158
158
  </div>
159
159
  </div>
160
160
 
@@ -163,26 +163,26 @@ cssPrefix: pf-v5-c-progress
163
163
  ### Warning
164
164
 
165
165
  ```html
166
- <div class="pf-v5-c-progress pf-m-warning" id="progress-warning-example">
166
+ <div class="pf-v6-c-progress pf-m-warning" id="progress-warning-example">
167
167
  <div
168
- class="pf-v5-c-progress__description"
168
+ class="pf-v6-c-progress__description"
169
169
  id="progress-warning-example-description"
170
170
  >Title</div>
171
- <div class="pf-v5-c-progress__status" aria-hidden="true">
172
- <span class="pf-v5-c-progress__measure">100%</span>
173
- <span class="pf-v5-c-progress__status-icon">
171
+ <div class="pf-v6-c-progress__status" aria-hidden="true">
172
+ <span class="pf-v6-c-progress__measure">100%</span>
173
+ <span class="pf-v6-c-progress__status-icon">
174
174
  <i class="fas fa-fw fa-exclamation-triangle" aria-hidden="true"></i>
175
175
  </span>
176
176
  </div>
177
177
  <div
178
- class="pf-v5-c-progress__bar"
178
+ class="pf-v6-c-progress__bar"
179
179
  role="progressbar"
180
180
  aria-valuemin="0"
181
181
  aria-valuemax="100"
182
182
  aria-valuenow="100"
183
183
  aria-labelledby="progress-warning-example-description"
184
184
  >
185
- <div class="pf-v5-c-progress__indicator" style="width:100%;"></div>
185
+ <div class="pf-v6-c-progress__indicator" style="width:100%;"></div>
186
186
  </div>
187
187
  </div>
188
188
 
@@ -191,26 +191,26 @@ cssPrefix: pf-v5-c-progress
191
191
  ### Failure
192
192
 
193
193
  ```html
194
- <div class="pf-v5-c-progress pf-m-danger" id="progress-failure-example">
194
+ <div class="pf-v6-c-progress pf-m-danger" id="progress-failure-example">
195
195
  <div
196
- class="pf-v5-c-progress__description"
196
+ class="pf-v6-c-progress__description"
197
197
  id="progress-failure-example-description"
198
198
  >Title</div>
199
- <div class="pf-v5-c-progress__status" aria-hidden="true">
200
- <span class="pf-v5-c-progress__measure">33%</span>
201
- <span class="pf-v5-c-progress__status-icon">
199
+ <div class="pf-v6-c-progress__status" aria-hidden="true">
200
+ <span class="pf-v6-c-progress__measure">33%</span>
201
+ <span class="pf-v6-c-progress__status-icon">
202
202
  <i class="fas fa-fw fa-times-circle" aria-hidden="true"></i>
203
203
  </span>
204
204
  </div>
205
205
  <div
206
- class="pf-v5-c-progress__bar"
206
+ class="pf-v6-c-progress__bar"
207
207
  role="progressbar"
208
208
  aria-valuemin="0"
209
209
  aria-valuemax="100"
210
210
  aria-valuenow="33"
211
211
  aria-labelledby="progress-failure-example-description"
212
212
  >
213
- <div class="pf-v5-c-progress__indicator" style="width:33%;"></div>
213
+ <div class="pf-v6-c-progress__indicator" style="width:33%;"></div>
214
214
  </div>
215
215
  </div>
216
216
 
@@ -220,28 +220,28 @@ cssPrefix: pf-v5-c-progress
220
220
 
221
221
  ```html
222
222
  <div
223
- class="pf-v5-c-progress pf-m-lg pf-m-inside pf-m-success"
223
+ class="pf-v6-c-progress pf-m-lg pf-m-inside pf-m-success"
224
224
  id="progress-inside-success-example"
225
225
  >
226
226
  <div
227
- class="pf-v5-c-progress__description"
227
+ class="pf-v6-c-progress__description"
228
228
  id="progress-inside-success-example-description"
229
229
  >Title</div>
230
- <div class="pf-v5-c-progress__status" aria-hidden="true">
231
- <span class="pf-v5-c-progress__status-icon">
230
+ <div class="pf-v6-c-progress__status" aria-hidden="true">
231
+ <span class="pf-v6-c-progress__status-icon">
232
232
  <i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
233
233
  </span>
234
234
  </div>
235
235
  <div
236
- class="pf-v5-c-progress__bar"
236
+ class="pf-v6-c-progress__bar"
237
237
  role="progressbar"
238
238
  aria-valuemin="0"
239
239
  aria-valuemax="100"
240
240
  aria-valuenow="100"
241
241
  aria-labelledby="progress-inside-success-example-description"
242
242
  >
243
- <div class="pf-v5-c-progress__indicator" style="width:100%;">
244
- <span class="pf-v5-c-progress__measure">100%</span>
243
+ <div class="pf-v6-c-progress__indicator" style="width:100%;">
244
+ <span class="pf-v6-c-progress__measure">100%</span>
245
245
  </div>
246
246
  </div>
247
247
  </div>
@@ -252,28 +252,28 @@ cssPrefix: pf-v5-c-progress
252
252
 
253
253
  ```html
254
254
  <div
255
- class="pf-v5-c-progress pf-m-lg pf-m-inside pf-m-warning"
255
+ class="pf-v6-c-progress pf-m-lg pf-m-inside pf-m-warning"
256
256
  id="progress-inside-warning-example"
257
257
  >
258
258
  <div
259
- class="pf-v5-c-progress__description"
259
+ class="pf-v6-c-progress__description"
260
260
  id="progress-inside-warning-example-description"
261
261
  >Title</div>
262
- <div class="pf-v5-c-progress__status" aria-hidden="true">
263
- <span class="pf-v5-c-progress__status-icon">
262
+ <div class="pf-v6-c-progress__status" aria-hidden="true">
263
+ <span class="pf-v6-c-progress__status-icon">
264
264
  <i class="fas fa-fw fa-exclamation-triangle" aria-hidden="true"></i>
265
265
  </span>
266
266
  </div>
267
267
  <div
268
- class="pf-v5-c-progress__bar"
268
+ class="pf-v6-c-progress__bar"
269
269
  role="progressbar"
270
270
  aria-valuemin="0"
271
271
  aria-valuemax="100"
272
272
  aria-valuenow="100"
273
273
  aria-labelledby="progress-inside-warning-example-description"
274
274
  >
275
- <div class="pf-v5-c-progress__indicator" style="width:100%;">
276
- <span class="pf-v5-c-progress__measure">100%</span>
275
+ <div class="pf-v6-c-progress__indicator" style="width:100%;">
276
+ <span class="pf-v6-c-progress__measure">100%</span>
277
277
  </div>
278
278
  </div>
279
279
  </div>
@@ -284,28 +284,28 @@ cssPrefix: pf-v5-c-progress
284
284
 
285
285
  ```html
286
286
  <div
287
- class="pf-v5-c-progress pf-m-outside pf-m-lg pf-m-danger"
287
+ class="pf-v6-c-progress pf-m-outside pf-m-lg pf-m-danger"
288
288
  id="progress-outside-failure-example"
289
289
  >
290
290
  <div
291
- class="pf-v5-c-progress__description"
291
+ class="pf-v6-c-progress__description"
292
292
  id="progress-outside-failure-example-description"
293
293
  >Title</div>
294
- <div class="pf-v5-c-progress__status" aria-hidden="true">
295
- <span class="pf-v5-c-progress__measure">33%</span>
296
- <span class="pf-v5-c-progress__status-icon">
294
+ <div class="pf-v6-c-progress__status" aria-hidden="true">
295
+ <span class="pf-v6-c-progress__measure">33%</span>
296
+ <span class="pf-v6-c-progress__status-icon">
297
297
  <i class="fas fa-fw fa-times-circle" aria-hidden="true"></i>
298
298
  </span>
299
299
  </div>
300
300
  <div
301
- class="pf-v5-c-progress__bar"
301
+ class="pf-v6-c-progress__bar"
302
302
  role="progressbar"
303
303
  aria-valuemin="0"
304
304
  aria-valuemax="100"
305
305
  aria-valuenow="33"
306
306
  aria-labelledby="progress-outside-failure-example-description"
307
307
  >
308
- <div class="pf-v5-c-progress__indicator" style="width:33%;"></div>
308
+ <div class="pf-v6-c-progress__indicator" style="width:33%;"></div>
309
309
  </div>
310
310
  </div>
311
311
 
@@ -315,125 +315,125 @@ cssPrefix: pf-v5-c-progress
315
315
 
316
316
  ```html
317
317
  <div
318
- class="pf-v5-c-progress pf-m-outside pf-m-lg"
318
+ class="pf-v6-c-progress pf-m-outside pf-m-lg"
319
319
  id="progress-outside-static-width-example"
320
320
  >
321
- <div class="pf-v5-c-progress__status" aria-hidden="true">
322
- <span class="pf-v5-c-progress__measure pf-m-static-width">1%</span>
321
+ <div class="pf-v6-c-progress__status" aria-hidden="true">
322
+ <span class="pf-v6-c-progress__measure pf-m-static-width">1%</span>
323
323
  </div>
324
324
  <div
325
- class="pf-v5-c-progress__bar"
325
+ class="pf-v6-c-progress__bar"
326
326
  role="progressbar"
327
327
  aria-valuemin="0"
328
328
  aria-valuemax="100"
329
329
  aria-valuenow="1"
330
330
  aria-label="Progress status"
331
331
  >
332
- <div class="pf-v5-c-progress__indicator" style="width:1%;"></div>
332
+ <div class="pf-v6-c-progress__indicator" style="width:1%;"></div>
333
333
  </div>
334
334
  </div>
335
335
  <br />
336
336
 
337
337
  <div
338
- class="pf-v5-c-progress pf-m-outside pf-m-lg"
338
+ class="pf-v6-c-progress pf-m-outside pf-m-lg"
339
339
  id="progress-outside-static-width-2-example"
340
340
  >
341
- <div class="pf-v5-c-progress__status" aria-hidden="true">
342
- <span class="pf-v5-c-progress__measure pf-m-static-width">50%</span>
341
+ <div class="pf-v6-c-progress__status" aria-hidden="true">
342
+ <span class="pf-v6-c-progress__measure pf-m-static-width">50%</span>
343
343
  </div>
344
344
  <div
345
- class="pf-v5-c-progress__bar"
345
+ class="pf-v6-c-progress__bar"
346
346
  role="progressbar"
347
347
  aria-valuemin="0"
348
348
  aria-valuemax="100"
349
349
  aria-valuenow="50"
350
350
  aria-label="Progress status"
351
351
  >
352
- <div class="pf-v5-c-progress__indicator" style="width:50%;"></div>
352
+ <div class="pf-v6-c-progress__indicator" style="width:50%;"></div>
353
353
  </div>
354
354
  </div>
355
355
  <br />
356
356
 
357
357
  <div
358
- class="pf-v5-c-progress pf-m-outside pf-m-lg"
358
+ class="pf-v6-c-progress pf-m-outside pf-m-lg"
359
359
  id="progress-outside-static-width-3-example"
360
360
  >
361
- <div class="pf-v5-c-progress__status" aria-hidden="true">
362
- <span class="pf-v5-c-progress__measure pf-m-static-width">100%</span>
361
+ <div class="pf-v6-c-progress__status" aria-hidden="true">
362
+ <span class="pf-v6-c-progress__measure pf-m-static-width">100%</span>
363
363
  </div>
364
364
  <div
365
- class="pf-v5-c-progress__bar"
365
+ class="pf-v6-c-progress__bar"
366
366
  role="progressbar"
367
367
  aria-valuemin="0"
368
368
  aria-valuemax="100"
369
369
  aria-valuenow="100"
370
370
  aria-label="Progress status"
371
371
  >
372
- <div class="pf-v5-c-progress__indicator" style="width:100%;"></div>
372
+ <div class="pf-v6-c-progress__indicator" style="width:100%;"></div>
373
373
  </div>
374
374
  </div>
375
375
  <br />
376
376
  <br />
377
377
 
378
378
  <div
379
- class="pf-v5-c-progress pf-m-outside pf-m-lg"
379
+ class="pf-v6-c-progress pf-m-outside pf-m-lg"
380
380
  id="progress-outside-static-width-4-example"
381
381
  style="--pf-v5-c-progress__measure--m-static-width--MinWidth: 6ch;"
382
382
  >
383
- <div class="pf-v5-c-progress__status" aria-hidden="true">
384
- <span class="pf-v5-c-progress__measure pf-m-static-width">1,000</span>
383
+ <div class="pf-v6-c-progress__status" aria-hidden="true">
384
+ <span class="pf-v6-c-progress__measure pf-m-static-width">1,000</span>
385
385
  </div>
386
386
  <div
387
- class="pf-v5-c-progress__bar"
387
+ class="pf-v6-c-progress__bar"
388
388
  role="progressbar"
389
389
  aria-valuemin="0"
390
390
  aria-valuemax="100000"
391
391
  aria-valuenow="1000"
392
392
  aria-label="Progress status"
393
393
  >
394
- <div class="pf-v5-c-progress__indicator" style="width:1%;"></div>
394
+ <div class="pf-v6-c-progress__indicator" style="width:1%;"></div>
395
395
  </div>
396
396
  </div>
397
397
  <br />
398
398
 
399
399
  <div
400
- class="pf-v5-c-progress pf-m-outside pf-m-lg"
400
+ class="pf-v6-c-progress pf-m-outside pf-m-lg"
401
401
  id="progress-outside-static-width-5-example"
402
402
  style="--pf-v5-c-progress__measure--m-static-width--MinWidth: 6ch;"
403
403
  >
404
- <div class="pf-v5-c-progress__status" aria-hidden="true">
405
- <span class="pf-v5-c-progress__measure pf-m-static-width">50,000</span>
404
+ <div class="pf-v6-c-progress__status" aria-hidden="true">
405
+ <span class="pf-v6-c-progress__measure pf-m-static-width">50,000</span>
406
406
  </div>
407
407
  <div
408
- class="pf-v5-c-progress__bar"
408
+ class="pf-v6-c-progress__bar"
409
409
  role="progressbar"
410
410
  aria-valuemin="0"
411
411
  aria-valuemax="100000"
412
412
  aria-valuenow="50000"
413
413
  aria-label="Progress status"
414
414
  >
415
- <div class="pf-v5-c-progress__indicator" style="width:50%;"></div>
415
+ <div class="pf-v6-c-progress__indicator" style="width:50%;"></div>
416
416
  </div>
417
417
  </div>
418
418
  <br />
419
419
 
420
420
  <div
421
- class="pf-v5-c-progress pf-m-outside pf-m-lg"
421
+ class="pf-v6-c-progress pf-m-outside pf-m-lg"
422
422
  id="progress-outside-static-width-6-example"
423
423
  style="--pf-v5-c-progress__measure--m-static-width--MinWidth: 6ch;"
424
424
  >
425
- <div class="pf-v5-c-progress__status" aria-hidden="true">
426
- <span class="pf-v5-c-progress__measure pf-m-static-width">100,000</span>
425
+ <div class="pf-v6-c-progress__status" aria-hidden="true">
426
+ <span class="pf-v6-c-progress__measure pf-m-static-width">100,000</span>
427
427
  </div>
428
428
  <div
429
- class="pf-v5-c-progress__bar"
429
+ class="pf-v6-c-progress__bar"
430
430
  role="progressbar"
431
431
  aria-valuemin="0"
432
432
  aria-valuemax="100000"
433
433
  aria-valuenow="100000"
434
434
  aria-label="Progress status"
435
435
  >
436
- <div class="pf-v5-c-progress__indicator" style="width:100%;"></div>
436
+ <div class="pf-v6-c-progress__indicator" style="width:100%;"></div>
437
437
  </div>
438
438
  </div>
439
439
 
@@ -442,19 +442,19 @@ cssPrefix: pf-v5-c-progress
442
442
  ### On single line
443
443
 
444
444
  ```html
445
- <div class="pf-v5-c-progress pf-m-singleline" id="progress-singleline-example">
446
- <div class="pf-v5-c-progress__status" aria-hidden="true">
447
- <span class="pf-v5-c-progress__measure">33%</span>
445
+ <div class="pf-v6-c-progress pf-m-singleline" id="progress-singleline-example">
446
+ <div class="pf-v6-c-progress__status" aria-hidden="true">
447
+ <span class="pf-v6-c-progress__measure">33%</span>
448
448
  </div>
449
449
  <div
450
- class="pf-v5-c-progress__bar"
450
+ class="pf-v6-c-progress__bar"
451
451
  role="progressbar"
452
452
  aria-valuemin="0"
453
453
  aria-valuemax="100"
454
454
  aria-valuenow="33"
455
455
  aria-label="Progress status"
456
456
  >
457
- <div class="pf-v5-c-progress__indicator" style="width:33%;"></div>
457
+ <div class="pf-v6-c-progress__indicator" style="width:33%;"></div>
458
458
  </div>
459
459
  </div>
460
460
 
@@ -463,20 +463,20 @@ cssPrefix: pf-v5-c-progress
463
463
  ### Without measure
464
464
 
465
465
  ```html
466
- <div class="pf-v5-c-progress" id="progress-no-measure-example">
466
+ <div class="pf-v6-c-progress" id="progress-no-measure-example">
467
467
  <div
468
- class="pf-v5-c-progress__description"
468
+ class="pf-v6-c-progress__description"
469
469
  id="progress-no-measure-example-description"
470
470
  >Title</div>
471
471
  <div
472
- class="pf-v5-c-progress__bar"
472
+ class="pf-v6-c-progress__bar"
473
473
  role="progressbar"
474
474
  aria-valuemin="0"
475
475
  aria-valuemax="100"
476
476
  aria-valuenow="33"
477
477
  aria-labelledby="progress-no-measure-example-description"
478
478
  >
479
- <div class="pf-v5-c-progress__indicator" style="width:33%;"></div>
479
+ <div class="pf-v6-c-progress__indicator" style="width:33%;"></div>
480
480
  </div>
481
481
  </div>
482
482
 
@@ -486,27 +486,27 @@ cssPrefix: pf-v5-c-progress
486
486
 
487
487
  ```html
488
488
  <div
489
- class="pf-v5-c-progress pf-m-danger"
489
+ class="pf-v6-c-progress pf-m-danger"
490
490
  id="progress-no-measure-failure-example"
491
491
  >
492
492
  <div
493
- class="pf-v5-c-progress__description"
493
+ class="pf-v6-c-progress__description"
494
494
  id="progress-no-measure-failure-example-description"
495
495
  >Title</div>
496
- <div class="pf-v5-c-progress__status" aria-hidden="true">
497
- <span class="pf-v5-c-progress__status-icon">
496
+ <div class="pf-v6-c-progress__status" aria-hidden="true">
497
+ <span class="pf-v6-c-progress__status-icon">
498
498
  <i class="fas fa-fw fa-times-circle" aria-hidden="true"></i>
499
499
  </span>
500
500
  </div>
501
501
  <div
502
- class="pf-v5-c-progress__bar"
502
+ class="pf-v6-c-progress__bar"
503
503
  role="progressbar"
504
504
  aria-valuemin="0"
505
505
  aria-valuemax="100"
506
506
  aria-valuenow="33"
507
507
  aria-labelledby="progress-no-measure-failure-example-description"
508
508
  >
509
- <div class="pf-v5-c-progress__indicator" style="width:33%;"></div>
509
+ <div class="pf-v6-c-progress__indicator" style="width:33%;"></div>
510
510
  </div>
511
511
  </div>
512
512
 
@@ -515,16 +515,16 @@ cssPrefix: pf-v5-c-progress
515
515
  ### Finite step
516
516
 
517
517
  ```html
518
- <div class="pf-v5-c-progress" id="progress-finite-step-example">
518
+ <div class="pf-v6-c-progress" id="progress-finite-step-example">
519
519
  <div
520
- class="pf-v5-c-progress__description"
520
+ class="pf-v6-c-progress__description"
521
521
  id="progress-finite-step-example-description"
522
522
  >Title</div>
523
- <div class="pf-v5-c-progress__status" aria-hidden="true">
524
- <span class="pf-v5-c-progress__measure">2 of 5 units</span>
523
+ <div class="pf-v6-c-progress__status" aria-hidden="true">
524
+ <span class="pf-v6-c-progress__measure">2 of 5 units</span>
525
525
  </div>
526
526
  <div
527
- class="pf-v5-c-progress__bar"
527
+ class="pf-v6-c-progress__bar"
528
528
  role="progressbar"
529
529
  aria-valuemin="0"
530
530
  aria-valuemax="5"
@@ -532,7 +532,7 @@ cssPrefix: pf-v5-c-progress
532
532
  aria-valuetext="2 of 5 units"
533
533
  aria-labelledby="progress-finite-step-example-description"
534
534
  >
535
- <div class="pf-v5-c-progress__indicator" style="width:40%;"></div>
535
+ <div class="pf-v6-c-progress__indicator" style="width:40%;"></div>
536
536
  </div>
537
537
  </div>
538
538
 
@@ -541,23 +541,23 @@ cssPrefix: pf-v5-c-progress
541
541
  ### Truncate description
542
542
 
543
543
  ```html
544
- <div class="pf-v5-c-progress" id="progress-truncate-description-example">
544
+ <div class="pf-v6-c-progress" id="progress-truncate-description-example">
545
545
  <div
546
- class="pf-v5-c-progress__description pf-m-truncate"
546
+ class="pf-v6-c-progress__description pf-m-truncate"
547
547
  id="progress-truncate-description-example-description"
548
548
  >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean quis ultricies lectus, eu lobortis mauris. Morbi pretium arcu id rhoncus mollis. Donec accumsan tincidunt enim nec varius. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Suspendisse potenti.</div>
549
- <div class="pf-v5-c-progress__status" aria-hidden="true">
550
- <span class="pf-v5-c-progress__measure">33%</span>
549
+ <div class="pf-v6-c-progress__status" aria-hidden="true">
550
+ <span class="pf-v6-c-progress__measure">33%</span>
551
551
  </div>
552
552
  <div
553
- class="pf-v5-c-progress__bar"
553
+ class="pf-v6-c-progress__bar"
554
554
  role="progressbar"
555
555
  aria-valuemin="0"
556
556
  aria-valuemax="100"
557
557
  aria-valuenow="33"
558
558
  aria-labelledby="progress-truncate-description-example-description"
559
559
  >
560
- <div class="pf-v5-c-progress__indicator" style="width:33%;"></div>
560
+ <div class="pf-v6-c-progress__indicator" style="width:33%;"></div>
561
561
  </div>
562
562
  </div>
563
563
 
@@ -566,28 +566,28 @@ cssPrefix: pf-v5-c-progress
566
566
  ### Helper text
567
567
 
568
568
  ```html
569
- <div class="pf-v5-c-progress" id="progress-helper-text-example">
569
+ <div class="pf-v6-c-progress" id="progress-helper-text-example">
570
570
  <div
571
- class="pf-v5-c-progress__description"
571
+ class="pf-v6-c-progress__description"
572
572
  id="progress-helper-text-example-description"
573
573
  >Title</div>
574
- <div class="pf-v5-c-progress__status" aria-hidden="true">
575
- <span class="pf-v5-c-progress__measure">33%</span>
574
+ <div class="pf-v6-c-progress__status" aria-hidden="true">
575
+ <span class="pf-v6-c-progress__measure">33%</span>
576
576
  </div>
577
577
  <div
578
- class="pf-v5-c-progress__bar"
578
+ class="pf-v6-c-progress__bar"
579
579
  role="progressbar"
580
580
  aria-valuemin="0"
581
581
  aria-valuemax="100"
582
582
  aria-valuenow="33"
583
583
  aria-labelledby="progress-helper-text-example-description"
584
584
  >
585
- <div class="pf-v5-c-progress__indicator" style="width:33%;"></div>
585
+ <div class="pf-v6-c-progress__indicator" style="width:33%;"></div>
586
586
  </div>
587
- <div class="pf-v5-c-progress__helper-text">
588
- <div class="pf-v5-c-helper-text">
589
- <div class="pf-v5-c-helper-text__item">
590
- <span class="pf-v5-c-helper-text__item-text">Progress helper text</span>
587
+ <div class="pf-v6-c-progress__helper-text">
588
+ <div class="pf-v6-c-helper-text">
589
+ <div class="pf-v6-c-helper-text__item">
590
+ <span class="pf-v6-c-helper-text__item-text">Progress helper text</span>
591
591
  </div>
592
592
  </div>
593
593
  </div>
@@ -602,16 +602,16 @@ If the status that displays with the bar is not a percentage, then the ARIA tag
602
602
  ### Progress step instruction
603
603
 
604
604
  ```html
605
- <div class="pf-v5-c-progress" id="progress-step-instruction-example">
605
+ <div class="pf-v6-c-progress" id="progress-step-instruction-example">
606
606
  <div
607
- class="pf-v5-c-progress__description"
607
+ class="pf-v6-c-progress__description"
608
608
  id="progress-step-instruction-example-description"
609
609
  >Title</div>
610
- <div class="pf-v5-c-progress__status" aria-hidden="true">
611
- <span class="pf-v5-c-progress__measure">Step 2: Copying files</span>
610
+ <div class="pf-v6-c-progress__status" aria-hidden="true">
611
+ <span class="pf-v6-c-progress__measure">Step 2: Copying files</span>
612
612
  </div>
613
613
  <div
614
- class="pf-v5-c-progress__bar"
614
+ class="pf-v6-c-progress__bar"
615
615
  role="progressbar"
616
616
  aria-valuemin="0"
617
617
  aria-valuemax="5"
@@ -619,7 +619,7 @@ If the status that displays with the bar is not a percentage, then the ARIA tag
619
619
  aria-valuetext="Step 2: Copying files"
620
620
  aria-labelledby="progress-step-instruction-example-description"
621
621
  >
622
- <div class="pf-v5-c-progress__indicator" style="width:40%;"></div>
622
+ <div class="pf-v6-c-progress__indicator" style="width:40%;"></div>
623
623
  </div>
624
624
  </div>
625
625