@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/Form/examples/Form.md CHANGED
@@ -8,12 +8,12 @@ cssPrefix: pf-v5-c-form
8
8
  ### Vertically aligned labels
9
9
 
10
10
  ```html
11
- <form class="pf-v5-c-form" novalidate>
12
- <div class="pf-v5-c-form__group">
13
- <div class="pf-v5-c-form__group-label"><label class="pf-v5-c-form__label" for="form-vertical-name">
14
- <span class="pf-v5-c-form__label-text">Name</span>&nbsp;<span class="pf-v5-c-form__label-required" aria-hidden="true">&#42;</span></label>&nbsp;<span class="pf-v5-c-form__group-label-help">
11
+ <form class="pf-v6-c-form" novalidate>
12
+ <div class="pf-v6-c-form__group">
13
+ <div class="pf-v6-c-form__group-label"><label class="pf-v6-c-form__label" for="form-vertical-name">
14
+ <span class="pf-v6-c-form__label-text">Name</span>&nbsp;<span class="pf-v6-c-form__label-required" aria-hidden="true">&#42;</span></label>&nbsp;<span class="pf-v6-c-form__group-label-help">
15
15
  <span
16
- class="pf-v5-c-button pf-m-no-padding pf-m-plain"
16
+ class="pf-v6-c-button pf-m-no-padding pf-m-plain"
17
17
  type="button"
18
18
  role="button"
19
19
  tabindex="0"
@@ -23,8 +23,8 @@ cssPrefix: pf-v5-c-form
23
23
  <i class="fas fa-question-circle" aria-hidden="true"></i>
24
24
  </span></span>
25
25
  </div>
26
- <div class="pf-v5-c-form__group-control">
27
- <span class="pf-v5-c-form-control pf-m-required">
26
+ <div class="pf-v6-c-form__group-control">
27
+ <span class="pf-v6-c-form-control pf-m-required">
28
28
  <input
29
29
  required
30
30
  type="text"
@@ -41,13 +41,13 @@ cssPrefix: pf-v5-c-form
41
41
  ### Horizontally aligned labels
42
42
 
43
43
  ```html
44
- <form class="pf-v5-c-form pf-m-horizontal" novalidate>
45
- <div class="pf-v5-c-form__group">
46
- <div class="pf-v5-c-form__group-label"><label class="pf-v5-c-form__label" for="form-horizontal-name">
47
- <span class="pf-v5-c-form__label-text">Name</span>&nbsp;<span class="pf-v5-c-form__label-required" aria-hidden="true">&#42;</span></label>
44
+ <form class="pf-v6-c-form pf-m-horizontal" novalidate>
45
+ <div class="pf-v6-c-form__group">
46
+ <div class="pf-v6-c-form__group-label"><label class="pf-v6-c-form__label" for="form-horizontal-name">
47
+ <span class="pf-v6-c-form__label-text">Name</span>&nbsp;<span class="pf-v6-c-form__label-required" aria-hidden="true">&#42;</span></label>
48
48
  </div>
49
- <div class="pf-v5-c-form__group-control">
50
- <span class="pf-v5-c-form-control pf-m-required">
49
+ <div class="pf-v6-c-form__group-control">
50
+ <span class="pf-v6-c-form-control pf-m-required">
51
51
  <input
52
52
  required
53
53
  type="text"
@@ -57,11 +57,11 @@ cssPrefix: pf-v5-c-form
57
57
  </span>
58
58
  </div>
59
59
  </div>
60
- <div class="pf-v5-c-form__group">
61
- <div class="pf-v5-c-form__group-label"><label class="pf-v5-c-form__label" for="form-horizontal-info">
62
- <span class="pf-v5-c-form__label-text">Information</span></label>&nbsp;<span class="pf-v5-c-form__group-label-help">
60
+ <div class="pf-v6-c-form__group">
61
+ <div class="pf-v6-c-form__group-label"><label class="pf-v6-c-form__label" for="form-horizontal-info">
62
+ <span class="pf-v6-c-form__label-text">Information</span></label>&nbsp;<span class="pf-v6-c-form__group-label-help">
63
63
  <span
64
- class="pf-v5-c-button pf-m-no-padding pf-m-plain"
64
+ class="pf-v6-c-button pf-m-no-padding pf-m-plain"
65
65
  type="button"
66
66
  role="button"
67
67
  tabindex="0"
@@ -71,8 +71,8 @@ cssPrefix: pf-v5-c-form
71
71
  <i class="fas fa-question-circle" aria-hidden="true"></i>
72
72
  </span></span>
73
73
  </div>
74
- <div class="pf-v5-c-form__group-control">
75
- <span class="pf-v5-c-form-control">
74
+ <div class="pf-v6-c-form__group-control">
75
+ <span class="pf-v6-c-form-control">
76
76
  <textarea
77
77
  type="text"
78
78
  id="form-horizontal-info"
@@ -83,17 +83,17 @@ cssPrefix: pf-v5-c-form
83
83
  </div>
84
84
  </div>
85
85
  <div
86
- class="pf-v5-c-form__group"
86
+ class="pf-v6-c-form__group"
87
87
  role="group"
88
88
  aria-labelledby="form-horizontalform-horizontal-checkbox-legend"
89
89
  >
90
90
  <div
91
- class="pf-v5-c-form__group-label pf-m-no-padding-top"
91
+ class="pf-v6-c-form__group-label pf-m-no-padding-top"
92
92
  id="form-horizontalform-horizontal-checkbox-legend"
93
- ><span class="pf-v5-c-form__label">
94
- <span class="pf-v5-c-form__label-text">Label (no top padding)</span></span>&nbsp;<span class="pf-v5-c-form__group-label-help">
93
+ ><span class="pf-v6-c-form__label">
94
+ <span class="pf-v6-c-form__label-text">Label (no top padding)</span></span>&nbsp;<span class="pf-v6-c-form__group-label-help">
95
95
  <span
96
- class="pf-v5-c-button pf-m-no-padding pf-m-plain"
96
+ class="pf-v6-c-button pf-m-no-padding pf-m-plain"
97
97
  type="button"
98
98
  role="button"
99
99
  tabindex="0"
@@ -103,30 +103,30 @@ cssPrefix: pf-v5-c-form
103
103
  <i class="fas fa-question-circle" aria-hidden="true"></i>
104
104
  </span></span>
105
105
  </div>
106
- <div class="pf-v5-c-form__group-control pf-m-stack">
107
- <div class="pf-v5-c-check">
106
+ <div class="pf-v6-c-form__group-control pf-m-stack">
107
+ <div class="pf-v6-c-check">
108
108
  <input
109
- class="pf-v5-c-check__input"
109
+ class="pf-v6-c-check__input"
110
110
  type="checkbox"
111
111
  id="form-horizontal-checkbox"
112
112
  name="form-horizontal-checkbox"
113
113
  />
114
114
 
115
115
  <label
116
- class="pf-v5-c-check__label"
116
+ class="pf-v6-c-check__label"
117
117
  for="form-horizontal-checkbox"
118
118
  >Option 1</label>
119
119
  </div>
120
- <div class="pf-v5-c-check">
120
+ <div class="pf-v6-c-check">
121
121
  <input
122
- class="pf-v5-c-check__input"
122
+ class="pf-v6-c-check__input"
123
123
  type="checkbox"
124
124
  id="form-horizontal-checkbox2"
125
125
  name="form-horizontal-checkbox2"
126
126
  />
127
127
 
128
128
  <label
129
- class="pf-v5-c-check__label"
129
+ class="pf-v6-c-check__label"
130
130
  for="form-horizontal-checkbox2"
131
131
  >Option 2</label>
132
132
  </div>
@@ -139,15 +139,15 @@ cssPrefix: pf-v5-c-form
139
139
  ### Horizontal layout at a custom breakpoint
140
140
 
141
141
  ```html
142
- <form class="pf-v5-c-form pf-m-horizontal-on-sm" novalidate>
143
- <div class="pf-v5-c-form__group">
144
- <div class="pf-v5-c-form__group-label"><label
145
- class="pf-v5-c-form__label"
142
+ <form class="pf-v6-c-form pf-m-horizontal-on-sm" novalidate>
143
+ <div class="pf-v6-c-form__group">
144
+ <div class="pf-v6-c-form__group-label"><label
145
+ class="pf-v6-c-form__label"
146
146
  for="form-horizontal-custom-breakpoint-name"
147
147
  >
148
- <span class="pf-v5-c-form__label-text">Name</span>&nbsp;<span class="pf-v5-c-form__label-required" aria-hidden="true">&#42;</span></label>&nbsp;<span class="pf-v5-c-form__group-label-help">
148
+ <span class="pf-v6-c-form__label-text">Name</span>&nbsp;<span class="pf-v6-c-form__label-required" aria-hidden="true">&#42;</span></label>&nbsp;<span class="pf-v6-c-form__group-label-help">
149
149
  <span
150
- class="pf-v5-c-button pf-m-no-padding pf-m-plain"
150
+ class="pf-v6-c-button pf-m-no-padding pf-m-plain"
151
151
  type="button"
152
152
  role="button"
153
153
  tabindex="0"
@@ -157,8 +157,8 @@ cssPrefix: pf-v5-c-form
157
157
  <i class="fas fa-question-circle" aria-hidden="true"></i>
158
158
  </span></span>
159
159
  </div>
160
- <div class="pf-v5-c-form__group-control">
161
- <span class="pf-v5-c-form-control pf-m-required">
160
+ <div class="pf-v6-c-form__group-control">
161
+ <span class="pf-v6-c-form-control pf-m-required">
162
162
  <input
163
163
  required
164
164
  type="text"
@@ -175,17 +175,17 @@ cssPrefix: pf-v5-c-form
175
175
  ### Form sections
176
176
 
177
177
  ```html
178
- <form class="pf-v5-c-form" novalidate>
179
- <section class="pf-v5-c-form__section" role="group">
180
- <div class="pf-v5-c-form__group">
181
- <div class="pf-v5-c-form__group-label"><label
182
- class="pf-v5-c-form__label"
178
+ <form class="pf-v6-c-form" novalidate>
179
+ <section class="pf-v6-c-form__section" role="group">
180
+ <div class="pf-v6-c-form__group">
181
+ <div class="pf-v6-c-form__group-label"><label
182
+ class="pf-v6-c-form__label"
183
183
  for="form-section-example-section-1-input"
184
184
  >
185
- <span class="pf-v5-c-form__label-text">Form section 1 inputs</span></label>
185
+ <span class="pf-v6-c-form__label-text">Form section 1 inputs</span></label>
186
186
  </div>
187
- <div class="pf-v5-c-form__group-control">
188
- <span class="pf-v5-c-form-control pf-m-required">
187
+ <div class="pf-v6-c-form__group-control">
188
+ <span class="pf-v6-c-form-control pf-m-required">
189
189
  <input
190
190
  required
191
191
  type="text"
@@ -195,15 +195,15 @@ cssPrefix: pf-v5-c-form
195
195
  </span>
196
196
  </div>
197
197
  </div>
198
- <div class="pf-v5-c-form__group">
199
- <div class="pf-v5-c-form__group-label"><label
200
- class="pf-v5-c-form__label"
198
+ <div class="pf-v6-c-form__group">
199
+ <div class="pf-v6-c-form__group-label"><label
200
+ class="pf-v6-c-form__label"
201
201
  for="form-section-example-section-1-input-2"
202
202
  >
203
- <span class="pf-v5-c-form__label-text">Form section 1 inputs</span></label>
203
+ <span class="pf-v6-c-form__label-text">Form section 1 inputs</span></label>
204
204
  </div>
205
- <div class="pf-v5-c-form__group-control">
206
- <span class="pf-v5-c-form-control pf-m-required">
205
+ <div class="pf-v6-c-form__group-control">
206
+ <span class="pf-v6-c-form-control pf-m-required">
207
207
  <input
208
208
  required
209
209
  type="text"
@@ -215,24 +215,24 @@ cssPrefix: pf-v5-c-form
215
215
  </div>
216
216
  </section>
217
217
  <section
218
- class="pf-v5-c-form__section"
218
+ class="pf-v6-c-form__section"
219
219
  role="group"
220
220
  aria-labelledby="form-section-example-section-2-title"
221
221
  >
222
222
  <div
223
- class="pf-v5-c-form__section-title"
223
+ class="pf-v6-c-form__section-title"
224
224
  id="form-section-example-section-2-title"
225
225
  aria-hidden="true"
226
226
  >Section 2 title (optional)</div>
227
- <div class="pf-v5-c-form__group">
228
- <div class="pf-v5-c-form__group-label"><label
229
- class="pf-v5-c-form__label"
227
+ <div class="pf-v6-c-form__group">
228
+ <div class="pf-v6-c-form__group-label"><label
229
+ class="pf-v6-c-form__label"
230
230
  for="form-section-example-section-2-input"
231
231
  >
232
- <span class="pf-v5-c-form__label-text">Form section 2 inputs</span></label>
232
+ <span class="pf-v6-c-form__label-text">Form section 2 inputs</span></label>
233
233
  </div>
234
- <div class="pf-v5-c-form__group-control">
235
- <span class="pf-v5-c-form-control pf-m-required">
234
+ <div class="pf-v6-c-form__group-control">
235
+ <span class="pf-v6-c-form-control pf-m-required">
236
236
  <input
237
237
  required
238
238
  type="text"
@@ -242,15 +242,15 @@ cssPrefix: pf-v5-c-form
242
242
  </span>
243
243
  </div>
244
244
  </div>
245
- <div class="pf-v5-c-form__group">
246
- <div class="pf-v5-c-form__group-label"><label
247
- class="pf-v5-c-form__label"
245
+ <div class="pf-v6-c-form__group">
246
+ <div class="pf-v6-c-form__group-label"><label
247
+ class="pf-v6-c-form__label"
248
248
  for="form-section-example-section-2-input-2"
249
249
  >
250
- <span class="pf-v5-c-form__label-text">Form section 2 inputs</span></label>
250
+ <span class="pf-v6-c-form__label-text">Form section 2 inputs</span></label>
251
251
  </div>
252
- <div class="pf-v5-c-form__group-control">
253
- <span class="pf-v5-c-form-control pf-m-required">
252
+ <div class="pf-v6-c-form__group-control">
253
+ <span class="pf-v6-c-form-control pf-m-required">
254
254
  <input
255
255
  required
256
256
  type="text"
@@ -268,13 +268,13 @@ cssPrefix: pf-v5-c-form
268
268
  ### Help text
269
269
 
270
270
  ```html
271
- <form class="pf-v5-c-form" novalidate>
272
- <div class="pf-v5-c-form__group">
273
- <div class="pf-v5-c-form__group-label"><label class="pf-v5-c-form__label" for="form-help-text-name">
274
- <span class="pf-v5-c-form__label-text">Name</span>&nbsp;<span class="pf-v5-c-form__label-required" aria-hidden="true">&#42;</span></label>
271
+ <form class="pf-v6-c-form" novalidate>
272
+ <div class="pf-v6-c-form__group">
273
+ <div class="pf-v6-c-form__group-label"><label class="pf-v6-c-form__label" for="form-help-text-name">
274
+ <span class="pf-v6-c-form__label-text">Name</span>&nbsp;<span class="pf-v6-c-form__label-required" aria-hidden="true">&#42;</span></label>
275
275
  </div>
276
- <div class="pf-v5-c-form__group-control">
277
- <span class="pf-v5-c-form-control pf-m-required">
276
+ <div class="pf-v6-c-form__group-control">
277
+ <span class="pf-v6-c-form-control pf-m-required">
278
278
  <input
279
279
  required
280
280
  type="text"
@@ -283,27 +283,27 @@ cssPrefix: pf-v5-c-form
283
283
  aria-describedby="form-help-text-name-helper"
284
284
  />
285
285
  </span>
286
- <div class="pf-v5-c-form__helper-text" aria-live="polite">
287
- <div class="pf-v5-c-helper-text">
286
+ <div class="pf-v6-c-form__helper-text" aria-live="polite">
287
+ <div class="pf-v6-c-helper-text">
288
288
  <div
289
- class="pf-v5-c-helper-text__item"
289
+ class="pf-v6-c-helper-text__item"
290
290
  id="form-help-text-name-helper"
291
291
  >
292
- <span class="pf-v5-c-helper-text__item-icon">
292
+ <span class="pf-v6-c-helper-text__item-icon">
293
293
  <i class="fas fa-fw fa-minus" aria-hidden="true"></i>
294
294
  </span>
295
- <span class="pf-v5-c-helper-text__item-text">This is helper text.</span>
295
+ <span class="pf-v6-c-helper-text__item-text">This is helper text.</span>
296
296
  </div>
297
297
  </div>
298
298
  </div>
299
299
  </div>
300
300
  </div>
301
- <div class="pf-v5-c-form__group">
302
- <div class="pf-v5-c-form__group-label"><label class="pf-v5-c-form__label" for="form-help-text-email">
303
- <span class="pf-v5-c-form__label-text">E-mail</span>&nbsp;<span class="pf-v5-c-form__label-required" aria-hidden="true">&#42;</span></label>
301
+ <div class="pf-v6-c-form__group">
302
+ <div class="pf-v6-c-form__group-label"><label class="pf-v6-c-form__label" for="form-help-text-email">
303
+ <span class="pf-v6-c-form__label-text">E-mail</span>&nbsp;<span class="pf-v6-c-form__label-required" aria-hidden="true">&#42;</span></label>
304
304
  </div>
305
- <div class="pf-v5-c-form__group-control">
306
- <span class="pf-v5-c-form-control pf-m-warning">
305
+ <div class="pf-v6-c-form__group-control">
306
+ <span class="pf-v6-c-form-control pf-m-warning">
307
307
  <input
308
308
  required
309
309
  type="text"
@@ -311,35 +311,35 @@ cssPrefix: pf-v5-c-form
311
311
  name="form-help-text-email"
312
312
  aria-describedby="form-help-text-email-helper"
313
313
  />
314
- <span class="pf-v5-c-form-control__utilities">
315
- <span class="pf-v5-c-form-control__icon pf-m-status">
314
+ <span class="pf-v6-c-form-control__utilities">
315
+ <span class="pf-v6-c-form-control__icon pf-m-status">
316
316
  <i class="fas fa-exclamation-triangle" aria-hidden="true"></i>
317
317
  </span>
318
318
  </span>
319
319
  </span>
320
- <div class="pf-v5-c-form__helper-text" aria-live="polite">
321
- <div class="pf-v5-c-helper-text">
320
+ <div class="pf-v6-c-form__helper-text" aria-live="polite">
321
+ <div class="pf-v6-c-helper-text">
322
322
  <div
323
- class="pf-v5-c-helper-text__item pf-m-warning"
323
+ class="pf-v6-c-helper-text__item pf-m-warning"
324
324
  id="form-help-text-email-helper"
325
325
  >
326
- <span class="pf-v5-c-helper-text__item-icon">
326
+ <span class="pf-v6-c-helper-text__item-icon">
327
327
  <i class="fas fa-fw fa-exclamation-triangle" aria-hidden="true"></i>
328
328
  </span>
329
329
  <span
330
- class="pf-v5-c-helper-text__item-text"
330
+ class="pf-v6-c-helper-text__item-text"
331
331
  >This is helper text for a warning input.</span>
332
332
  </div>
333
333
  </div>
334
334
  </div>
335
335
  </div>
336
336
  </div>
337
- <div class="pf-v5-c-form__group">
338
- <div class="pf-v5-c-form__group-label"><label class="pf-v5-c-form__label" for="-address">
339
- <span class="pf-v5-c-form__label-text">Address</span>&nbsp;<span class="pf-v5-c-form__label-required" aria-hidden="true">&#42;</span></label>
337
+ <div class="pf-v6-c-form__group">
338
+ <div class="pf-v6-c-form__group-label"><label class="pf-v6-c-form__label" for="-address">
339
+ <span class="pf-v6-c-form__label-text">Address</span>&nbsp;<span class="pf-v6-c-form__label-required" aria-hidden="true">&#42;</span></label>
340
340
  </div>
341
- <div class="pf-v5-c-form__group-control">
342
- <span class="pf-v5-c-form-control pf-m-required pf-m-error">
341
+ <div class="pf-v6-c-form__group-control">
342
+ <span class="pf-v6-c-form-control pf-m-required pf-m-error">
343
343
  <input
344
344
  required
345
345
  type="text"
@@ -348,35 +348,35 @@ cssPrefix: pf-v5-c-form
348
348
  aria-invalid="true"
349
349
  aria-describedby="-address-helper"
350
350
  />
351
- <span class="pf-v5-c-form-control__utilities">
352
- <span class="pf-v5-c-form-control__icon pf-m-status">
351
+ <span class="pf-v6-c-form-control__utilities">
352
+ <span class="pf-v6-c-form-control__icon pf-m-status">
353
353
  <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
354
354
  </span>
355
355
  </span>
356
356
  </span>
357
- <div class="pf-v5-c-form__helper-text" aria-live="polite">
358
- <div class="pf-v5-c-helper-text">
357
+ <div class="pf-v6-c-form__helper-text" aria-live="polite">
358
+ <div class="pf-v6-c-helper-text">
359
359
  <div
360
- class="pf-v5-c-helper-text__item pf-m-error"
360
+ class="pf-v6-c-helper-text__item pf-m-error"
361
361
  id="-address-helper"
362
362
  >
363
- <span class="pf-v5-c-helper-text__item-icon">
363
+ <span class="pf-v6-c-helper-text__item-icon">
364
364
  <i class="fas fa-fw fa-exclamation-circle" aria-hidden="true"></i>
365
365
  </span>
366
366
  <span
367
- class="pf-v5-c-helper-text__item-text"
367
+ class="pf-v6-c-helper-text__item-text"
368
368
  >This is helper text for an invalid input.</span>
369
369
  </div>
370
370
  </div>
371
371
  </div>
372
372
  </div>
373
373
  </div>
374
- <div class="pf-v5-c-form__group">
375
- <div class="pf-v5-c-form__group-label"><label class="pf-v5-c-form__label" for="form-help-text-comment">
376
- <span class="pf-v5-c-form__label-text">Comment</span></label>
374
+ <div class="pf-v6-c-form__group">
375
+ <div class="pf-v6-c-form__group-label"><label class="pf-v6-c-form__label" for="form-help-text-comment">
376
+ <span class="pf-v6-c-form__label-text">Comment</span></label>
377
377
  </div>
378
- <div class="pf-v5-c-form__group-control">
379
- <span class="pf-v5-c-form-control pf-m-success">
378
+ <div class="pf-v6-c-form__group-control">
379
+ <span class="pf-v6-c-form-control pf-m-success">
380
380
  <input
381
381
  value="This is a valid comment"
382
382
  type="text"
@@ -384,58 +384,58 @@ cssPrefix: pf-v5-c-form
384
384
  name="form-help-text-comment"
385
385
  aria-describedby="form-help-text-comment-helper"
386
386
  />
387
- <span class="pf-v5-c-form-control__utilities">
388
- <span class="pf-v5-c-form-control__icon pf-m-status">
387
+ <span class="pf-v6-c-form-control__utilities">
388
+ <span class="pf-v6-c-form-control__icon pf-m-status">
389
389
  <i class="fas fa-check-circle" aria-hidden="true"></i>
390
390
  </span>
391
391
  </span>
392
392
  </span>
393
- <div class="pf-v5-c-form__helper-text" aria-live="polite">
394
- <div class="pf-v5-c-helper-text">
393
+ <div class="pf-v6-c-form__helper-text" aria-live="polite">
394
+ <div class="pf-v6-c-helper-text">
395
395
  <div
396
- class="pf-v5-c-helper-text__item pf-m-success"
396
+ class="pf-v6-c-helper-text__item pf-m-success"
397
397
  id="form-help-text-comment-helper"
398
398
  >
399
- <span class="pf-v5-c-helper-text__item-icon">
399
+ <span class="pf-v6-c-helper-text__item-icon">
400
400
  <i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
401
401
  </span>
402
402
  <span
403
- class="pf-v5-c-helper-text__item-text"
403
+ class="pf-v6-c-helper-text__item-text"
404
404
  >This is helper text for success input.</span>
405
405
  </div>
406
406
  </div>
407
407
  </div>
408
408
  </div>
409
409
  </div>
410
- <div class="pf-v5-c-form__group">
411
- <div class="pf-v5-c-form__group-label"><label class="pf-v5-c-form__label" for="form-help-text-info">
412
- <span class="pf-v5-c-form__label-text">Information</span></label>
410
+ <div class="pf-v6-c-form__group">
411
+ <div class="pf-v6-c-form__group-label"><label class="pf-v6-c-form__label" for="form-help-text-info">
412
+ <span class="pf-v6-c-form__label-text">Information</span></label>
413
413
  </div>
414
- <div class="pf-v5-c-form__group-control">
415
- <span class="pf-v5-c-form-control pf-m-error pf-m-resize-both">
414
+ <div class="pf-v6-c-form__group-control">
415
+ <span class="pf-v6-c-form-control pf-m-error pf-m-resize-both">
416
416
  <textarea
417
417
  id="form-help-text-info"
418
418
  name="form-help-text-info"
419
419
  aria-invalid="true"
420
420
  aria-describedby="form-help-text-info-helper"
421
421
  ></textarea>
422
- <span class="pf-v5-c-form-control__utilities">
423
- <span class="pf-v5-c-form-control__icon pf-m-status">
422
+ <span class="pf-v6-c-form-control__utilities">
423
+ <span class="pf-v6-c-form-control__icon pf-m-status">
424
424
  <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
425
425
  </span>
426
426
  </span>
427
427
  </span>
428
- <div class="pf-v5-c-form__helper-text" aria-live="polite">
429
- <div class="pf-v5-c-helper-text">
428
+ <div class="pf-v6-c-form__helper-text" aria-live="polite">
429
+ <div class="pf-v6-c-helper-text">
430
430
  <div
431
- class="pf-v5-c-helper-text__item pf-m-error"
431
+ class="pf-v6-c-helper-text__item pf-m-error"
432
432
  id="form-help-text-info-helper"
433
433
  >
434
- <span class="pf-v5-c-helper-text__item-icon">
434
+ <span class="pf-v6-c-helper-text__item-icon">
435
435
  <i class="fas fa-fw fa-exclamation-circle" aria-hidden="true"></i>
436
436
  </span>
437
437
  <span
438
- class="pf-v5-c-helper-text__item-text"
438
+ class="pf-v6-c-helper-text__item-text"
439
439
  >This is helper text with an icon.</span>
440
440
  </div>
441
441
  </div>
@@ -449,13 +449,13 @@ cssPrefix: pf-v5-c-form
449
449
  ### Label with additional info
450
450
 
451
451
  ```html
452
- <form class="pf-v5-c-form" novalidate>
453
- <div class="pf-v5-c-form__group">
454
- <div class="pf-v5-c-form__group-label pf-m-info">
455
- <div class="pf-v5-c-form__group-label-main"><label class="pf-v5-c-form__label" for="form-additional-info-name">
456
- <span class="pf-v5-c-form__label-text">Name</span>&nbsp;<span class="pf-v5-c-form__label-required" aria-hidden="true">&#42;</span></label>&nbsp;<span class="pf-v5-c-form__group-label-help">
452
+ <form class="pf-v6-c-form" novalidate>
453
+ <div class="pf-v6-c-form__group">
454
+ <div class="pf-v6-c-form__group-label pf-m-info">
455
+ <div class="pf-v6-c-form__group-label-main"><label class="pf-v6-c-form__label" for="form-additional-info-name">
456
+ <span class="pf-v6-c-form__label-text">Name</span>&nbsp;<span class="pf-v6-c-form__label-required" aria-hidden="true">&#42;</span></label>&nbsp;<span class="pf-v6-c-form__group-label-help">
457
457
  <span
458
- class="pf-v5-c-button pf-m-no-padding pf-m-plain"
458
+ class="pf-v6-c-button pf-m-no-padding pf-m-plain"
459
459
  type="button"
460
460
  role="button"
461
461
  tabindex="0"
@@ -465,10 +465,10 @@ cssPrefix: pf-v5-c-form
465
465
  <i class="fas fa-question-circle" aria-hidden="true"></i>
466
466
  </span></span>
467
467
  </div>
468
- <div class="pf-v5-c-form__group-label-info">info</div>
468
+ <div class="pf-v6-c-form__group-label-info">info</div>
469
469
  </div>
470
- <div class="pf-v5-c-form__group-control">
471
- <span class="pf-v5-c-form-control pf-m-required">
470
+ <div class="pf-v6-c-form__group-control">
471
+ <span class="pf-v6-c-form-control pf-m-required">
472
472
  <input
473
473
  required
474
474
  type="text"
@@ -485,11 +485,11 @@ cssPrefix: pf-v5-c-form
485
485
  ### Action group
486
486
 
487
487
  ```html
488
- <form class="pf-v5-c-form" novalidate>
489
- <div class="pf-v5-c-form__group pf-m-action">
490
- <div class="pf-v5-c-form__actions">
491
- <button class="pf-v5-c-button pf-m-primary" type="submit">Submit form</button>
492
- <button class="pf-v5-c-button pf-m-link" type="reset">Reset form</button>
488
+ <form class="pf-v6-c-form" novalidate>
489
+ <div class="pf-v6-c-form__group pf-m-action">
490
+ <div class="pf-v6-c-form__actions">
491
+ <button class="pf-v6-c-button pf-m-primary" type="submit">Submit form</button>
492
+ <button class="pf-v6-c-button pf-m-link" type="reset">Reset form</button>
493
493
  </div>
494
494
  </div>
495
495
  </form>
@@ -499,37 +499,37 @@ cssPrefix: pf-v5-c-form
499
499
  ### Field group (non-expandable)
500
500
 
501
501
  ```html
502
- <form class="pf-v5-c-form" novalidate>
502
+ <form class="pf-v6-c-form" novalidate>
503
503
  <div
504
- class="pf-v5-c-form__field-group"
504
+ class="pf-v6-c-form__field-group"
505
505
  role="group"
506
506
  aria-labelledby="form-field-group-field-group-title"
507
507
  >
508
- <div class="pf-v5-c-form__field-group-header">
509
- <div class="pf-v5-c-form__field-group-header-main">
510
- <div class="pf-v5-c-form__field-group-header-title">
508
+ <div class="pf-v6-c-form__field-group-header">
509
+ <div class="pf-v6-c-form__field-group-header-main">
510
+ <div class="pf-v6-c-form__field-group-header-title">
511
511
  <div
512
- class="pf-v5-c-form__field-group-header-title-text"
512
+ class="pf-v6-c-form__field-group-header-title-text"
513
513
  id="form-field-group-field-group-title"
514
514
  >Field group Title</div>
515
515
  </div>
516
516
  <div
517
- class="pf-v5-c-form__field-group-header-description"
517
+ class="pf-v6-c-form__field-group-header-description"
518
518
  >Field group description text</div>
519
519
  </div>
520
- <div class="pf-v5-c-form__field-group-header-actions">
521
- <button class="pf-v5-c-button pf-m-secondary" type="button">Action</button>
520
+ <div class="pf-v6-c-form__field-group-header-actions">
521
+ <button class="pf-v6-c-button pf-m-secondary" type="button">Action</button>
522
522
  </div>
523
523
  </div>
524
- <div class="pf-v5-c-form__field-group-body" hidden>
525
- <div class="pf-v5-c-form__group">
526
- <div class="pf-v5-c-form__group-label"><label
527
- class="pf-v5-c-form__label"
524
+ <div class="pf-v6-c-form__field-group-body" hidden>
525
+ <div class="pf-v6-c-form__group">
526
+ <div class="pf-v6-c-form__group-label"><label
527
+ class="pf-v6-c-form__label"
528
528
  for="form-field-group-field-group-label1"
529
529
  >
530
- <span class="pf-v5-c-form__label-text">Label 1</span>&nbsp;<span class="pf-v5-c-form__label-required" aria-hidden="true">&#42;</span></label>&nbsp;<span class="pf-v5-c-form__group-label-help">
530
+ <span class="pf-v6-c-form__label-text">Label 1</span>&nbsp;<span class="pf-v6-c-form__label-required" aria-hidden="true">&#42;</span></label>&nbsp;<span class="pf-v6-c-form__group-label-help">
531
531
  <span
532
- class="pf-v5-c-button pf-m-no-padding pf-m-plain"
532
+ class="pf-v6-c-button pf-m-no-padding pf-m-plain"
533
533
  type="button"
534
534
  role="button"
535
535
  tabindex="0"
@@ -539,8 +539,8 @@ cssPrefix: pf-v5-c-form
539
539
  <i class="fas fa-question-circle" aria-hidden="true"></i>
540
540
  </span></span>
541
541
  </div>
542
- <div class="pf-v5-c-form__group-control">
543
- <span class="pf-v5-c-form-control pf-m-required">
542
+ <div class="pf-v6-c-form__group-control">
543
+ <span class="pf-v6-c-form-control pf-m-required">
544
544
  <input
545
545
  required
546
546
  type="text"
@@ -550,14 +550,14 @@ cssPrefix: pf-v5-c-form
550
550
  </span>
551
551
  </div>
552
552
  </div>
553
- <div class="pf-v5-c-form__group">
554
- <div class="pf-v5-c-form__group-label"><label
555
- class="pf-v5-c-form__label"
553
+ <div class="pf-v6-c-form__group">
554
+ <div class="pf-v6-c-form__group-label"><label
555
+ class="pf-v6-c-form__label"
556
556
  for="form-field-group-field-group-label2"
557
557
  >
558
- <span class="pf-v5-c-form__label-text">Label 2</span>&nbsp;<span class="pf-v5-c-form__label-required" aria-hidden="true">&#42;</span></label>&nbsp;<span class="pf-v5-c-form__group-label-help">
558
+ <span class="pf-v6-c-form__label-text">Label 2</span>&nbsp;<span class="pf-v6-c-form__label-required" aria-hidden="true">&#42;</span></label>&nbsp;<span class="pf-v6-c-form__group-label-help">
559
559
  <span
560
- class="pf-v5-c-button pf-m-no-padding pf-m-plain"
560
+ class="pf-v6-c-button pf-m-no-padding pf-m-plain"
561
561
  type="button"
562
562
  role="button"
563
563
  tabindex="0"
@@ -567,8 +567,8 @@ cssPrefix: pf-v5-c-form
567
567
  <i class="fas fa-question-circle" aria-hidden="true"></i>
568
568
  </span></span>
569
569
  </div>
570
- <div class="pf-v5-c-form__group-control">
571
- <span class="pf-v5-c-form-control pf-m-required">
570
+ <div class="pf-v6-c-form__group-control">
571
+ <span class="pf-v6-c-form-control pf-m-required">
572
572
  <input
573
573
  required
574
574
  type="text"
@@ -587,88 +587,88 @@ cssPrefix: pf-v5-c-form
587
587
  ### Expandable and nested field groups
588
588
 
589
589
  ```html
590
- <form class="pf-v5-c-form" novalidate>
590
+ <form class="pf-v6-c-form" novalidate>
591
591
  <div
592
- class="pf-v5-c-form__field-group"
592
+ class="pf-v6-c-form__field-group"
593
593
  role="group"
594
594
  aria-labelledby="form-expandable-field-groups-field-group-1-title"
595
595
  >
596
- <div class="pf-v5-c-form__field-group-toggle">
597
- <div class="pf-v5-c-form__field-group-toggle-button">
596
+ <div class="pf-v6-c-form__field-group-toggle">
597
+ <div class="pf-v6-c-form__field-group-toggle-button">
598
598
  <button
599
- class="pf-v5-c-button pf-m-plain"
599
+ class="pf-v6-c-button pf-m-plain"
600
600
  type="button"
601
601
  aria-expanded="false"
602
602
  aria-label="Details"
603
603
  id="form-expandable-field-groups-field-group-1-toggle"
604
604
  aria-labelledby="form-expandable-field-groups-field-group-1-title form-expandable-field-groups-field-group-1-toggle"
605
605
  >
606
- <span class="pf-v5-c-form__field-group-toggle-icon">
606
+ <span class="pf-v6-c-form__field-group-toggle-icon">
607
607
  <i class="fas fa-angle-right" aria-hidden="true"></i>
608
608
  </span>
609
609
  </button>
610
610
  </div>
611
611
  </div>
612
- <div class="pf-v5-c-form__field-group-header">
613
- <div class="pf-v5-c-form__field-group-header-main">
614
- <div class="pf-v5-c-form__field-group-header-title">
612
+ <div class="pf-v6-c-form__field-group-header">
613
+ <div class="pf-v6-c-form__field-group-header-main">
614
+ <div class="pf-v6-c-form__field-group-header-title">
615
615
  <div
616
- class="pf-v5-c-form__field-group-header-title-text"
616
+ class="pf-v6-c-form__field-group-header-title-text"
617
617
  id="form-expandable-field-groups-field-group-1-title"
618
618
  >Field group 1</div>
619
619
  </div>
620
620
  <div
621
- class="pf-v5-c-form__field-group-header-description"
621
+ class="pf-v6-c-form__field-group-header-description"
622
622
  >Field group 1 description text</div>
623
623
  </div>
624
- <div class="pf-v5-c-form__field-group-header-actions">
625
- <button class="pf-v5-c-button pf-m-secondary" type="button">Action</button>
624
+ <div class="pf-v6-c-form__field-group-header-actions">
625
+ <button class="pf-v6-c-button pf-m-secondary" type="button">Action</button>
626
626
  </div>
627
627
  </div>
628
628
  </div>
629
629
  <div
630
- class="pf-v5-c-form__field-group pf-m-expanded"
630
+ class="pf-v6-c-form__field-group pf-m-expanded"
631
631
  role="group"
632
632
  aria-labelledby="form-expandable-field-groups-field-group-2-title"
633
633
  >
634
- <div class="pf-v5-c-form__field-group-toggle">
635
- <div class="pf-v5-c-form__field-group-toggle-button">
634
+ <div class="pf-v6-c-form__field-group-toggle">
635
+ <div class="pf-v6-c-form__field-group-toggle-button">
636
636
  <button
637
- class="pf-v5-c-button pf-m-plain"
637
+ class="pf-v6-c-button pf-m-plain"
638
638
  type="button"
639
639
  aria-expanded="true"
640
640
  aria-label="Details"
641
641
  id="form-expandable-field-groups-field-group-2-toggle"
642
642
  aria-labelledby="form-expandable-field-groups-field-group-2-title form-expandable-field-groups-field-group-2-toggle"
643
643
  >
644
- <span class="pf-v5-c-form__field-group-toggle-icon">
644
+ <span class="pf-v6-c-form__field-group-toggle-icon">
645
645
  <i class="fas fa-angle-right" aria-hidden="true"></i>
646
646
  </span>
647
647
  </button>
648
648
  </div>
649
649
  </div>
650
- <div class="pf-v5-c-form__field-group-header">
651
- <div class="pf-v5-c-form__field-group-header-main">
652
- <div class="pf-v5-c-form__field-group-header-title">
650
+ <div class="pf-v6-c-form__field-group-header">
651
+ <div class="pf-v6-c-form__field-group-header-main">
652
+ <div class="pf-v6-c-form__field-group-header-title">
653
653
  <div
654
- class="pf-v5-c-form__field-group-header-title-text"
654
+ class="pf-v6-c-form__field-group-header-title-text"
655
655
  id="form-expandable-field-groups-field-group-2-title"
656
656
  >Field group 2</div>
657
657
  </div>
658
658
  <div
659
- class="pf-v5-c-form__field-group-header-description"
659
+ class="pf-v6-c-form__field-group-header-description"
660
660
  >Field group 2 description text</div>
661
661
  </div>
662
662
  </div>
663
- <div class="pf-v5-c-form__field-group-body">
664
- <div class="pf-v5-c-form__group">
665
- <div class="pf-v5-c-form__group-label"><label
666
- class="pf-v5-c-form__label"
663
+ <div class="pf-v6-c-form__field-group-body">
664
+ <div class="pf-v6-c-form__group">
665
+ <div class="pf-v6-c-form__group-label"><label
666
+ class="pf-v6-c-form__label"
667
667
  for="form-expandable-field-groupsform-expandable-field-groups-field-group-2-label1"
668
668
  >
669
- <span class="pf-v5-c-form__label-text">Label 1</span>&nbsp;<span class="pf-v5-c-form__label-required" aria-hidden="true">&#42;</span></label>&nbsp;<span class="pf-v5-c-form__group-label-help">
669
+ <span class="pf-v6-c-form__label-text">Label 1</span>&nbsp;<span class="pf-v6-c-form__label-required" aria-hidden="true">&#42;</span></label>&nbsp;<span class="pf-v6-c-form__group-label-help">
670
670
  <span
671
- class="pf-v5-c-button pf-m-no-padding pf-m-plain"
671
+ class="pf-v6-c-button pf-m-no-padding pf-m-plain"
672
672
  type="button"
673
673
  role="button"
674
674
  tabindex="0"
@@ -678,8 +678,8 @@ cssPrefix: pf-v5-c-form
678
678
  <i class="fas fa-question-circle" aria-hidden="true"></i>
679
679
  </span></span>
680
680
  </div>
681
- <div class="pf-v5-c-form__group-control">
682
- <span class="pf-v5-c-form-control pf-m-required">
681
+ <div class="pf-v6-c-form__group-control">
682
+ <span class="pf-v6-c-form-control pf-m-required">
683
683
  <input
684
684
  required
685
685
  type="text"
@@ -689,14 +689,14 @@ cssPrefix: pf-v5-c-form
689
689
  </span>
690
690
  </div>
691
691
  </div>
692
- <div class="pf-v5-c-form__group">
693
- <div class="pf-v5-c-form__group-label"><label
694
- class="pf-v5-c-form__label"
692
+ <div class="pf-v6-c-form__group">
693
+ <div class="pf-v6-c-form__group-label"><label
694
+ class="pf-v6-c-form__label"
695
695
  for="form-expandable-field-groupsform-expandable-field-groups-field-group-2-label2"
696
696
  >
697
- <span class="pf-v5-c-form__label-text">Label 2</span>&nbsp;<span class="pf-v5-c-form__label-required" aria-hidden="true">&#42;</span></label>&nbsp;<span class="pf-v5-c-form__group-label-help">
697
+ <span class="pf-v6-c-form__label-text">Label 2</span>&nbsp;<span class="pf-v6-c-form__label-required" aria-hidden="true">&#42;</span></label>&nbsp;<span class="pf-v6-c-form__group-label-help">
698
698
  <span
699
- class="pf-v5-c-button pf-m-no-padding pf-m-plain"
699
+ class="pf-v6-c-button pf-m-no-padding pf-m-plain"
700
700
  type="button"
701
701
  role="button"
702
702
  tabindex="0"
@@ -706,8 +706,8 @@ cssPrefix: pf-v5-c-form
706
706
  <i class="fas fa-question-circle" aria-hidden="true"></i>
707
707
  </span></span>
708
708
  </div>
709
- <div class="pf-v5-c-form__group-control">
710
- <span class="pf-v5-c-form-control pf-m-required">
709
+ <div class="pf-v6-c-form__group-control">
710
+ <span class="pf-v6-c-form-control pf-m-required">
711
711
  <input
712
712
  required
713
713
  type="text"
@@ -718,32 +718,32 @@ cssPrefix: pf-v5-c-form
718
718
  </div>
719
719
  </div>
720
720
  <div
721
- class="pf-v5-c-form__field-group pf-m-expanded"
721
+ class="pf-v6-c-form__field-group pf-m-expanded"
722
722
  role="group"
723
723
  aria-labelledby="form-expandable-field-groups-field-group-3-title"
724
724
  >
725
- <div class="pf-v5-c-form__field-group-header">
726
- <div class="pf-v5-c-form__field-group-header-main">
727
- <div class="pf-v5-c-form__field-group-header-title">
725
+ <div class="pf-v6-c-form__field-group-header">
726
+ <div class="pf-v6-c-form__field-group-header-main">
727
+ <div class="pf-v6-c-form__field-group-header-title">
728
728
  <div
729
- class="pf-v5-c-form__field-group-header-title-text"
729
+ class="pf-v6-c-form__field-group-header-title-text"
730
730
  id="form-expandable-field-groups-field-group-3-title"
731
731
  >Nested field group 3</div>
732
732
  </div>
733
733
  </div>
734
734
  </div>
735
- <div class="pf-v5-c-form__field-group-body">
736
- <div class="pf-v5-c-form__group">
737
- <div class="pf-v5-c-form__group-label"><label
738
- class="pf-v5-c-form__label"
735
+ <div class="pf-v6-c-form__field-group-body">
736
+ <div class="pf-v6-c-form__group">
737
+ <div class="pf-v6-c-form__group-label"><label
738
+ class="pf-v6-c-form__label"
739
739
  for="form-expandable-field-groupsform-expandable-field-groups-field-group-3-label1"
740
740
  >
741
- <span class="pf-v5-c-form__label-text">Label 1</span>&nbsp;<span
742
- class="pf-v5-c-form__label-required"
741
+ <span class="pf-v6-c-form__label-text">Label 1</span>&nbsp;<span
742
+ class="pf-v6-c-form__label-required"
743
743
  aria-hidden="true"
744
- >&#42;</span></label>&nbsp;<span class="pf-v5-c-form__group-label-help">
744
+ >&#42;</span></label>&nbsp;<span class="pf-v6-c-form__group-label-help">
745
745
  <span
746
- class="pf-v5-c-button pf-m-no-padding pf-m-plain"
746
+ class="pf-v6-c-button pf-m-no-padding pf-m-plain"
747
747
  type="button"
748
748
  role="button"
749
749
  tabindex="0"
@@ -753,8 +753,8 @@ cssPrefix: pf-v5-c-form
753
753
  <i class="fas fa-question-circle" aria-hidden="true"></i>
754
754
  </span></span>
755
755
  </div>
756
- <div class="pf-v5-c-form__group-control">
757
- <span class="pf-v5-c-form-control pf-m-required">
756
+ <div class="pf-v6-c-form__group-control">
757
+ <span class="pf-v6-c-form-control pf-m-required">
758
758
  <input
759
759
  required
760
760
  type="text"
@@ -764,17 +764,17 @@ cssPrefix: pf-v5-c-form
764
764
  </span>
765
765
  </div>
766
766
  </div>
767
- <div class="pf-v5-c-form__group">
768
- <div class="pf-v5-c-form__group-label"><label
769
- class="pf-v5-c-form__label"
767
+ <div class="pf-v6-c-form__group">
768
+ <div class="pf-v6-c-form__group-label"><label
769
+ class="pf-v6-c-form__label"
770
770
  for="form-expandable-field-groupsform-expandable-field-groups-field-group-3-label2"
771
771
  >
772
- <span class="pf-v5-c-form__label-text">Label 2</span>&nbsp;<span
773
- class="pf-v5-c-form__label-required"
772
+ <span class="pf-v6-c-form__label-text">Label 2</span>&nbsp;<span
773
+ class="pf-v6-c-form__label-required"
774
774
  aria-hidden="true"
775
- >&#42;</span></label>&nbsp;<span class="pf-v5-c-form__group-label-help">
775
+ >&#42;</span></label>&nbsp;<span class="pf-v6-c-form__group-label-help">
776
776
  <span
777
- class="pf-v5-c-button pf-m-no-padding pf-m-plain"
777
+ class="pf-v6-c-button pf-m-no-padding pf-m-plain"
778
778
  type="button"
779
779
  role="button"
780
780
  tabindex="0"
@@ -784,8 +784,8 @@ cssPrefix: pf-v5-c-form
784
784
  <i class="fas fa-question-circle" aria-hidden="true"></i>
785
785
  </span></span>
786
786
  </div>
787
- <div class="pf-v5-c-form__group-control">
788
- <span class="pf-v5-c-form-control pf-m-required">
787
+ <div class="pf-v6-c-form__group-control">
788
+ <span class="pf-v6-c-form-control pf-m-required">
789
789
  <input
790
790
  required
791
791
  type="text"