@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/demos/Form/examples/BasicForms.md CHANGED
@@ -7,13 +7,13 @@ subsection: forms
7
7
  ### Basic
8
8
 
9
9
  ```html
10
- <form class="pf-v5-c-form" novalidate>
11
- <div class="pf-v5-c-form__group">
12
- <div class="pf-v5-c-form__group-label"><label class="pf-v5-c-form__label" for="-name">
13
- <span class="pf-v5-c-form__label-text">Full name</span>&nbsp;<span class="pf-v5-c-form__label-required" aria-hidden="true">&#42;</span></label>
10
+ <form class="pf-v6-c-form" novalidate>
11
+ <div class="pf-v6-c-form__group">
12
+ <div class="pf-v6-c-form__group-label"><label class="pf-v6-c-form__label" for="-name">
13
+ <span class="pf-v6-c-form__label-text">Full name</span>&nbsp;<span class="pf-v6-c-form__label-required" aria-hidden="true">&#42;</span></label>
14
14
  </div>
15
- <div class="pf-v5-c-form__group-control">
16
- <span class="pf-v5-c-form-control pf-m-required">
15
+ <div class="pf-v6-c-form__group-control">
16
+ <span class="pf-v6-c-form-control pf-m-required">
17
17
  <input
18
18
  required
19
19
  type="text"
@@ -23,35 +23,35 @@ subsection: forms
23
23
  />
24
24
  </span>
25
25
 
26
- <div class="pf-v5-c-form__helper-text" aria-live="polite">
27
- <div class="pf-v5-c-helper-text">
28
- <div class="pf-v5-c-helper-text__item" id="-name-helper">
29
- <span class="pf-v5-c-helper-text__item-icon">
26
+ <div class="pf-v6-c-form__helper-text" aria-live="polite">
27
+ <div class="pf-v6-c-helper-text">
28
+ <div class="pf-v6-c-helper-text__item" id="-name-helper">
29
+ <span class="pf-v6-c-helper-text__item-icon">
30
30
  <i class="fas fa-fw fa-minus" aria-hidden="true"></i>
31
31
  </span>
32
32
  <span
33
- class="pf-v5-c-helper-text__item-text"
33
+ class="pf-v6-c-helper-text__item-text"
34
34
  >Include your middle name if you have one.</span>
35
35
  </div>
36
36
  </div>
37
37
  </div>
38
38
  </div>
39
39
  </div>
40
- <div class="pf-v5-c-form__group">
41
- <div class="pf-v5-c-form__group-label"><label class="pf-v5-c-form__label" for="-email">
42
- <span class="pf-v5-c-form__label-text">Email</span></label>
40
+ <div class="pf-v6-c-form__group">
41
+ <div class="pf-v6-c-form__group-label"><label class="pf-v6-c-form__label" for="-email">
42
+ <span class="pf-v6-c-form__label-text">Email</span></label>
43
43
  </div>
44
- <div class="pf-v5-c-form__group-control">
45
- <span class="pf-v5-c-form-control">
44
+ <div class="pf-v6-c-form__group-control">
45
+ <span class="pf-v6-c-form-control">
46
46
  <input type="email" id="-email" name="-email" />
47
47
  </span>
48
48
  </div>
49
49
  </div>
50
- <div class="pf-v5-c-form__group">
51
- <div class="pf-v5-c-form__group-label"><label class="pf-v5-c-form__label" for="-phone">
52
- <span class="pf-v5-c-form__label-text">Phone number</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">
50
+ <div class="pf-v6-c-form__group">
51
+ <div class="pf-v6-c-form__group-label"><label class="pf-v6-c-form__label" for="-phone">
52
+ <span class="pf-v6-c-form__label-text">Phone number</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">
53
53
  <span
54
- class="pf-v5-c-button pf-m-no-padding pf-m-plain"
54
+ class="pf-v6-c-button pf-m-no-padding pf-m-plain"
55
55
  type="button"
56
56
  role="button"
57
57
  tabindex="0"
@@ -61,8 +61,8 @@ subsection: forms
61
61
  <i class="fas fa-question-circle" aria-hidden="true"></i>
62
62
  </span></span>
63
63
  </div>
64
- <div class="pf-v5-c-form__group-control">
65
- <span class="pf-v5-c-form-control pf-m-required">
64
+ <div class="pf-v6-c-form__group-control">
65
+ <span class="pf-v6-c-form-control pf-m-required">
66
66
  <input
67
67
  required
68
68
  type="tel"
@@ -74,95 +74,95 @@ subsection: forms
74
74
  </div>
75
75
  </div>
76
76
  <div
77
- class="pf-v5-c-form__group"
77
+ class="pf-v6-c-form__group"
78
78
  role="group"
79
79
  aria-labelledby="form-demo-basic-contact-legend"
80
80
  >
81
- <div class="pf-v5-c-form__group-label" id="form-demo-basic-contact-legend"><span class="pf-v5-c-form__label">
82
- <span class="pf-v5-c-form__label-text">How can we contact you?</span></span>
81
+ <div class="pf-v6-c-form__group-label" id="form-demo-basic-contact-legend"><span class="pf-v6-c-form__label">
82
+ <span class="pf-v6-c-form__label-text">How can we contact you?</span></span>
83
83
  </div>
84
- <div class="pf-v5-c-form__group-control pf-m-inline">
85
- <div class="pf-v5-c-check">
84
+ <div class="pf-v6-c-form__group-control pf-m-inline">
85
+ <div class="pf-v6-c-check">
86
86
  <input
87
- class="pf-v5-c-check__input"
87
+ class="pf-v6-c-check__input"
88
88
  type="checkbox"
89
89
  id="-contact-check-1"
90
90
  name="-contact-check-1"
91
91
  />
92
92
 
93
- <label class="pf-v5-c-check__label" for="-contact-check-1">Email</label>
93
+ <label class="pf-v6-c-check__label" for="-contact-check-1">Email</label>
94
94
  </div>
95
- <div class="pf-v5-c-check">
95
+ <div class="pf-v6-c-check">
96
96
  <input
97
- class="pf-v5-c-check__input"
97
+ class="pf-v6-c-check__input"
98
98
  type="checkbox"
99
99
  id="-contact-check-2"
100
100
  name="-contact-check-2"
101
101
  />
102
102
 
103
- <label class="pf-v5-c-check__label" for="-contact-check-2">Phone</label>
103
+ <label class="pf-v6-c-check__label" for="-contact-check-2">Phone</label>
104
104
  </div>
105
- <div class="pf-v5-c-check">
105
+ <div class="pf-v6-c-check">
106
106
  <input
107
- class="pf-v5-c-check__input"
107
+ class="pf-v6-c-check__input"
108
108
  type="checkbox"
109
109
  id="-contact-check-3"
110
110
  name="-contact-check-3"
111
111
  />
112
112
 
113
- <label class="pf-v5-c-check__label" for="-contact-check-3">Mail</label>
113
+ <label class="pf-v6-c-check__label" for="-contact-check-3">Mail</label>
114
114
  </div>
115
115
  </div>
116
116
  </div>
117
117
  <div
118
- class="pf-v5-c-form__group"
118
+ class="pf-v6-c-form__group"
119
119
  role="radiogroup"
120
120
  aria-labelledby="form-demo-basic-time-zone-legend"
121
121
  >
122
122
  <div
123
- class="pf-v5-c-form__group-label"
123
+ class="pf-v6-c-form__group-label"
124
124
  id="form-demo-basic-time-zone-legend"
125
- ><span class="pf-v5-c-form__label">
126
- <span class="pf-v5-c-form__label-text">Time zone</span></span>
125
+ ><span class="pf-v6-c-form__label">
126
+ <span class="pf-v6-c-form__label-text">Time zone</span></span>
127
127
  </div>
128
- <div class="pf-v5-c-form__group-control pf-m-inline">
129
- <div class="pf-v5-c-radio">
128
+ <div class="pf-v6-c-form__group-control pf-m-inline">
129
+ <div class="pf-v6-c-radio">
130
130
  <input
131
- class="pf-v5-c-radio__input"
131
+ class="pf-v6-c-radio__input"
132
132
  type="radio"
133
133
  id="-time-zone-radio-1"
134
134
  name="-time-zone-radio"
135
135
  />
136
136
 
137
- <label class="pf-v5-c-radio__label" for="-time-zone-radio-1">Eastern</label>
137
+ <label class="pf-v6-c-radio__label" for="-time-zone-radio-1">Eastern</label>
138
138
  </div>
139
- <div class="pf-v5-c-radio">
139
+ <div class="pf-v6-c-radio">
140
140
  <input
141
- class="pf-v5-c-radio__input"
141
+ class="pf-v6-c-radio__input"
142
142
  type="radio"
143
143
  id="-time-zone-radio-2"
144
144
  name="-time-zone-radio"
145
145
  />
146
146
 
147
- <label class="pf-v5-c-radio__label" for="-time-zone-radio-2">Central</label>
147
+ <label class="pf-v6-c-radio__label" for="-time-zone-radio-2">Central</label>
148
148
  </div>
149
- <div class="pf-v5-c-radio">
149
+ <div class="pf-v6-c-radio">
150
150
  <input
151
- class="pf-v5-c-radio__input"
151
+ class="pf-v6-c-radio__input"
152
152
  type="radio"
153
153
  id="-time-zone-radio-3"
154
154
  name="-time-zone-radio"
155
155
  />
156
156
 
157
- <label class="pf-v5-c-radio__label" for="-time-zone-radio-3">Pacific</label>
157
+ <label class="pf-v6-c-radio__label" for="-time-zone-radio-3">Pacific</label>
158
158
  </div>
159
159
  </div>
160
160
  </div>
161
- <div class="pf-v5-c-form__group pf-m-action">
162
- <div class="pf-v5-c-form__group-control">
163
- <div class="pf-v5-c-form__actions">
164
- <button class="pf-v5-c-button pf-m-primary" type="submit">Submit</button>
165
- <button class="pf-v5-c-button pf-m-link" type="button">Cancel</button>
161
+ <div class="pf-v6-c-form__group pf-m-action">
162
+ <div class="pf-v6-c-form__group-control">
163
+ <div class="pf-v6-c-form__actions">
164
+ <button class="pf-v6-c-button pf-m-primary" type="submit">Submit</button>
165
+ <button class="pf-v6-c-button pf-m-link" type="button">Cancel</button>
166
166
  </div>
167
167
  </div>
168
168
  </div>
@@ -173,13 +173,13 @@ subsection: forms
173
173
  ### Horizontal
174
174
 
175
175
  ```html
176
- <form class="pf-v5-c-form pf-m-horizontal" novalidate>
177
- <div class="pf-v5-c-form__group -name">
178
- <div class="pf-v5-c-form__group-label"><label class="pf-v5-c-form__label" for="form-demo-horizontal-name">
179
- <span class="pf-v5-c-form__label-text">Full name</span>&nbsp;<span class="pf-v5-c-form__label-required" aria-hidden="true">&#42;</span></label>
176
+ <form class="pf-v6-c-form pf-m-horizontal" novalidate>
177
+ <div class="pf-v6-c-form__group -name">
178
+ <div class="pf-v6-c-form__group-label"><label class="pf-v6-c-form__label" for="form-demo-horizontal-name">
179
+ <span class="pf-v6-c-form__label-text">Full name</span>&nbsp;<span class="pf-v6-c-form__label-required" aria-hidden="true">&#42;</span></label>
180
180
  </div>
181
- <div class="pf-v5-c-form__group-control">
182
- <span class="pf-v5-c-form-control pf-m-required">
181
+ <div class="pf-v6-c-form__group-control">
182
+ <span class="pf-v6-c-form-control pf-m-required">
183
183
  <input
184
184
  required
185
185
  type="text"
@@ -188,29 +188,29 @@ subsection: forms
188
188
  aria-describedby="form-demo-horizontal-name-helper"
189
189
  />
190
190
  </span>
191
- <div class="pf-v5-c-form__helper-text" aria-live="polite">
192
- <div class="pf-v5-c-helper-text">
191
+ <div class="pf-v6-c-form__helper-text" aria-live="polite">
192
+ <div class="pf-v6-c-helper-text">
193
193
  <div
194
- class="pf-v5-c-helper-text__item"
194
+ class="pf-v6-c-helper-text__item"
195
195
  id="form-demo-horizontal-name-helper"
196
196
  >
197
- <span class="pf-v5-c-helper-text__item-icon">
197
+ <span class="pf-v6-c-helper-text__item-icon">
198
198
  <i class="fas fa-fw fa-minus" aria-hidden="true"></i>
199
199
  </span>
200
200
  <span
201
- class="pf-v5-c-helper-text__item-text"
201
+ class="pf-v6-c-helper-text__item-text"
202
202
  >Include your middle name if you have one.</span>
203
203
  </div>
204
204
  </div>
205
205
  </div>
206
206
  </div>
207
207
  </div>
208
- <div class="pf-v5-c-form__group">
209
- <div class="pf-v5-c-form__group-label"><label class="pf-v5-c-form__label" for="form-demo-horizontal-email">
210
- <span class="pf-v5-c-form__label-text">Email</span></label>
208
+ <div class="pf-v6-c-form__group">
209
+ <div class="pf-v6-c-form__group-label"><label class="pf-v6-c-form__label" for="form-demo-horizontal-email">
210
+ <span class="pf-v6-c-form__label-text">Email</span></label>
211
211
  </div>
212
- <div class="pf-v5-c-form__group-control">
213
- <span class="pf-v5-c-form-control">
212
+ <div class="pf-v6-c-form__group-control">
213
+ <span class="pf-v6-c-form-control">
214
214
  <input
215
215
  type="email"
216
216
  id="form-demo-horizontal-email"
@@ -219,12 +219,12 @@ subsection: forms
219
219
  </span>
220
220
  </div>
221
221
  </div>
222
- <div class="pf-v5-c-form__group">
223
- <div class="pf-v5-c-form__group-label"><label class="pf-v5-c-form__label" for="form-demo-horizontal-phone">
224
- <span class="pf-v5-c-form__label-text">Phone number</span></label>
222
+ <div class="pf-v6-c-form__group">
223
+ <div class="pf-v6-c-form__group-label"><label class="pf-v6-c-form__label" for="form-demo-horizontal-phone">
224
+ <span class="pf-v6-c-form__label-text">Phone number</span></label>
225
225
  </div>
226
- <div class="pf-v5-c-form__group-control">
227
- <span class="pf-v5-c-form-control">
226
+ <div class="pf-v6-c-form__group-control">
227
+ <span class="pf-v6-c-form-control">
228
228
  <input
229
229
  type="tel"
230
230
  placeholder="Example, (555) 555-5555"
@@ -235,17 +235,17 @@ subsection: forms
235
235
  </div>
236
236
  </div>
237
237
  <div
238
- class="pf-v5-c-form__group"
238
+ class="pf-v6-c-form__group"
239
239
  role="group"
240
240
  aria-labelledby="form-demo-horizontalform-demo-horizontal-contact-legend"
241
241
  >
242
242
  <div
243
- class="pf-v5-c-form__group-label pf-m-no-padding-top"
243
+ class="pf-v6-c-form__group-label pf-m-no-padding-top"
244
244
  id="form-demo-horizontalform-demo-horizontal-contact-legend"
245
- ><span class="pf-v5-c-form__label">
246
- <span class="pf-v5-c-form__label-text">How can we contact you?</span></span>&nbsp;<span class="pf-v5-c-form__group-label-help">
245
+ ><span class="pf-v6-c-form__label">
246
+ <span class="pf-v6-c-form__label-text">How can we contact you?</span></span>&nbsp;<span class="pf-v6-c-form__group-label-help">
247
247
  <span
248
- class="pf-v5-c-button pf-m-no-padding pf-m-plain"
248
+ class="pf-v6-c-button pf-m-no-padding pf-m-plain"
249
249
  type="button"
250
250
  role="button"
251
251
  tabindex="0"
@@ -255,53 +255,53 @@ subsection: forms
255
255
  <i class="fas fa-question-circle" aria-hidden="true"></i>
256
256
  </span></span>
257
257
  </div>
258
- <div class="pf-v5-c-form__group-control pf-m-stack">
259
- <div class="pf-v5-c-check">
258
+ <div class="pf-v6-c-form__group-control pf-m-stack">
259
+ <div class="pf-v6-c-check">
260
260
  <input
261
- class="pf-v5-c-check__input"
261
+ class="pf-v6-c-check__input"
262
262
  type="checkbox"
263
263
  id="form-demo-horizontal-contact1"
264
264
  name="form-demo-horizontal-contact1"
265
265
  />
266
266
 
267
267
  <label
268
- class="pf-v5-c-check__label"
268
+ class="pf-v6-c-check__label"
269
269
  for="form-demo-horizontal-contact1"
270
270
  >Email</label>
271
271
  </div>
272
- <div class="pf-v5-c-check">
272
+ <div class="pf-v6-c-check">
273
273
  <input
274
- class="pf-v5-c-check__input"
274
+ class="pf-v6-c-check__input"
275
275
  type="checkbox"
276
276
  id="form-demo-horizontal-contact2"
277
277
  name="form-demo-horizontal-contact2"
278
278
  />
279
279
 
280
280
  <label
281
- class="pf-v5-c-check__label"
281
+ class="pf-v6-c-check__label"
282
282
  for="form-demo-horizontal-contact2"
283
283
  >Phone</label>
284
284
  </div>
285
- <div class="pf-v5-c-check">
285
+ <div class="pf-v6-c-check">
286
286
  <input
287
- class="pf-v5-c-check__input"
287
+ class="pf-v6-c-check__input"
288
288
  type="checkbox"
289
289
  id="form-demo-horizontal-contact3"
290
290
  name="form-demo-horizontal-contact3"
291
291
  />
292
292
 
293
293
  <label
294
- class="pf-v5-c-check__label"
294
+ class="pf-v6-c-check__label"
295
295
  for="form-demo-horizontal-contact3"
296
296
  >Mail</label>
297
297
  </div>
298
298
  </div>
299
299
  </div>
300
- <div class="pf-v5-c-form__group pf-m-action">
301
- <div class="pf-v5-c-form__group-control">
302
- <div class="pf-v5-c-form__actions">
303
- <button class="pf-v5-c-button pf-m-primary" type="submit">Submit</button>
304
- <button class="pf-v5-c-button pf-m-link" type="button">Cancel</button>
300
+ <div class="pf-v6-c-form__group pf-m-action">
301
+ <div class="pf-v6-c-form__group-control">
302
+ <div class="pf-v6-c-form__actions">
303
+ <button class="pf-v6-c-button pf-m-primary" type="submit">Submit</button>
304
+ <button class="pf-v6-c-button pf-m-link" type="button">Cancel</button>
305
305
  </div>
306
306
  </div>
307
307
  </div>
@@ -312,14 +312,14 @@ subsection: forms
312
312
  ### Grid
313
313
 
314
314
  ```html
315
- <form class="pf-v5-c-form" novalidate>
316
- <div class="pf-v5-l-grid pf-m-all-6-col-on-md pf-m-gutter">
317
- <div class="pf-v5-c-form__group">
318
- <div class="pf-v5-c-form__group-label"><label class="pf-v5-c-form__label" for="form-demo-grid-name">
319
- <span class="pf-v5-c-form__label-text">Full name</span>&nbsp;<span class="pf-v5-c-form__label-required" aria-hidden="true">&#42;</span></label>
315
+ <form class="pf-v6-c-form" novalidate>
316
+ <div class="pf-v6-l-grid pf-m-all-6-col-on-md pf-m-gutter">
317
+ <div class="pf-v6-c-form__group">
318
+ <div class="pf-v6-c-form__group-label"><label class="pf-v6-c-form__label" for="form-demo-grid-name">
319
+ <span class="pf-v6-c-form__label-text">Full name</span>&nbsp;<span class="pf-v6-c-form__label-required" aria-hidden="true">&#42;</span></label>
320
320
  </div>
321
- <div class="pf-v5-c-form__group-control">
322
- <span class="pf-v5-c-form-control pf-m-required">
321
+ <div class="pf-v6-c-form__group-control">
322
+ <span class="pf-v6-c-form-control pf-m-required">
323
323
  <input
324
324
  required
325
325
  type="text"
@@ -329,26 +329,26 @@ subsection: forms
329
329
  />
330
330
  </span>
331
331
 
332
- <div class="pf-v5-c-form__helper-text" aria-live="polite">
333
- <div class="pf-v5-c-helper-text">
334
- <div class="pf-v5-c-helper-text__item" id="-helper">
335
- <span class="pf-v5-c-helper-text__item-icon">
332
+ <div class="pf-v6-c-form__helper-text" aria-live="polite">
333
+ <div class="pf-v6-c-helper-text">
334
+ <div class="pf-v6-c-helper-text__item" id="-helper">
335
+ <span class="pf-v6-c-helper-text__item-icon">
336
336
  <i class="fas fa-fw fa-minus" aria-hidden="true"></i>
337
337
  </span>
338
338
  <span
339
- class="pf-v5-c-helper-text__item-text"
339
+ class="pf-v6-c-helper-text__item-text"
340
340
  >Include your middle name if you have one.</span>
341
341
  </div>
342
342
  </div>
343
343
  </div>
344
344
  </div>
345
345
  </div>
346
- <div class="pf-v5-c-form__group">
347
- <div class="pf-v5-c-form__group-label"><label class="pf-v5-c-form__label" for="form-demo-grid-title">
348
- <span class="pf-v5-c-form__label-text">Job title</span>&nbsp;<span class="pf-v5-c-form__label-required" aria-hidden="true">&#42;</span></label>
346
+ <div class="pf-v6-c-form__group">
347
+ <div class="pf-v6-c-form__group-label"><label class="pf-v6-c-form__label" for="form-demo-grid-title">
348
+ <span class="pf-v6-c-form__label-text">Job title</span>&nbsp;<span class="pf-v6-c-form__label-required" aria-hidden="true">&#42;</span></label>
349
349
  </div>
350
- <div class="pf-v5-c-form__group-control">
351
- <span class="pf-v5-c-form-control pf-m-required">
350
+ <div class="pf-v6-c-form__group-control">
351
+ <span class="pf-v6-c-form-control pf-m-required">
352
352
  <input
353
353
  required
354
354
  type="text"
@@ -358,12 +358,12 @@ subsection: forms
358
358
  </span>
359
359
  </div>
360
360
  </div>
361
- <div class="pf-v5-c-form__group">
362
- <div class="pf-v5-c-form__group-label"><label class="pf-v5-c-form__label" for="form-demo-grid-phone">
363
- <span class="pf-v5-c-form__label-text">Phone number</span></label>
361
+ <div class="pf-v6-c-form__group">
362
+ <div class="pf-v6-c-form__group-label"><label class="pf-v6-c-form__label" for="form-demo-grid-phone">
363
+ <span class="pf-v6-c-form__label-text">Phone number</span></label>
364
364
  </div>
365
- <div class="pf-v5-c-form__group-control">
366
- <span class="pf-v5-c-form-control">
365
+ <div class="pf-v6-c-form__group-control">
366
+ <span class="pf-v6-c-form-control">
367
367
  <input
368
368
  type="tel"
369
369
  id="form-demo-grid-phone"
@@ -373,12 +373,12 @@ subsection: forms
373
373
  </span>
374
374
  </div>
375
375
  </div>
376
- <div class="pf-v5-c-form__group">
377
- <div class="pf-v5-c-form__group-label"><label class="pf-v5-c-form__label" for="form-demo-grid-email">
378
- <span class="pf-v5-c-form__label-text">Email</span></label>
376
+ <div class="pf-v6-c-form__group">
377
+ <div class="pf-v6-c-form__group-label"><label class="pf-v6-c-form__label" for="form-demo-grid-email">
378
+ <span class="pf-v6-c-form__label-text">Email</span></label>
379
379
  </div>
380
- <div class="pf-v5-c-form__group-control">
381
- <span class="pf-v5-c-form-control">
380
+ <div class="pf-v6-c-form__group-control">
381
+ <span class="pf-v6-c-form-control">
382
382
  <input
383
383
  type="email"
384
384
  id="form-demo-grid-email"
@@ -387,12 +387,12 @@ subsection: forms
387
387
  </span>
388
388
  </div>
389
389
  </div>
390
- <div class="pf-v5-c-form__group">
391
- <div class="pf-v5-c-form__group-label"><label class="pf-v5-c-form__label" for="form-demo-grid-address">
392
- <span class="pf-v5-c-form__label-text">Street address</span></label>
390
+ <div class="pf-v6-c-form__group">
391
+ <div class="pf-v6-c-form__group-label"><label class="pf-v6-c-form__label" for="form-demo-grid-address">
392
+ <span class="pf-v6-c-form__label-text">Street address</span></label>
393
393
  </div>
394
- <div class="pf-v5-c-form__group-control">
395
- <span class="pf-v5-c-form-control">
394
+ <div class="pf-v6-c-form__group-control">
395
+ <span class="pf-v6-c-form-control">
396
396
  <input
397
397
  type="text"
398
398
  id="form-demo-grid-address"
@@ -401,23 +401,23 @@ subsection: forms
401
401
  </span>
402
402
  </div>
403
403
  </div>
404
- <div class="pf-v5-l-grid pf-m-all-6-col pf-m-gutter">
405
- <div class="pf-v5-c-form__group">
406
- <div class="pf-v5-c-form__group-label"><label class="pf-v5-c-form__label" for="form-demo-grid-city">
407
- <span class="pf-v5-c-form__label-text">City</span></label>
404
+ <div class="pf-v6-l-grid pf-m-all-6-col pf-m-gutter">
405
+ <div class="pf-v6-c-form__group">
406
+ <div class="pf-v6-c-form__group-label"><label class="pf-v6-c-form__label" for="form-demo-grid-city">
407
+ <span class="pf-v6-c-form__label-text">City</span></label>
408
408
  </div>
409
- <div class="pf-v5-c-form__group-control">
410
- <span class="pf-v5-c-form-control">
409
+ <div class="pf-v6-c-form__group-control">
410
+ <span class="pf-v6-c-form-control">
411
411
  <input id="form-demo-grid-city" name="form-demo-grid-city" />
412
412
  </span>
413
413
  </div>
414
414
  </div>
415
- <div class="pf-v5-c-form__group">
416
- <div class="pf-v5-c-form__group-label"><label class="pf-v5-c-form__label" for="form-demo-grid-state">
417
- <span class="pf-v5-c-form__label-text">State</span></label>
415
+ <div class="pf-v6-c-form__group">
416
+ <div class="pf-v6-c-form__group-label"><label class="pf-v6-c-form__label" for="form-demo-grid-state">
417
+ <span class="pf-v6-c-form__label-text">State</span></label>
418
418
  </div>
419
- <div class="pf-v5-c-form__group-control">
420
- <span class="pf-v5-c-form-control">
419
+ <div class="pf-v6-c-form__group-control">
420
+ <span class="pf-v6-c-form-control">
421
421
  <select id="form-demo-grid-state" name="form-demo-grid-state">
422
422
  <option value selected>Select one</option>
423
423
  <option value="AL">Alabama</option>
@@ -471,8 +471,8 @@ subsection: forms
471
471
  <option value="WI">Wisconsin</option>
472
472
  <option value="WY">Wyoming</option>
473
473
  </select>
474
- <span class="pf-v5-c-form-control__utilities">
475
- <span class="pf-v5-c-form-control__toggle-icon">
474
+ <span class="pf-v6-c-form-control__utilities">
475
+ <span class="pf-v6-c-form-control__toggle-icon">
476
476
  <i class="fas fa-caret-down" aria-hidden="true"></i>
477
477
  </span>
478
478
  </span>
@@ -480,11 +480,11 @@ subsection: forms
480
480
  </div>
481
481
  </div>
482
482
  </div>
483
- <div class="pf-v5-c-form__group pf-m-action">
484
- <div class="pf-v5-c-form__group-control">
485
- <div class="pf-v5-c-form__actions">
486
- <button class="pf-v5-c-button pf-m-primary" type="submit">Submit</button>
487
- <button class="pf-v5-c-button pf-m-link" type="button">Cancel</button>
483
+ <div class="pf-v6-c-form__group pf-m-action">
484
+ <div class="pf-v6-c-form__group-control">
485
+ <div class="pf-v6-c-form__actions">
486
+ <button class="pf-v6-c-button pf-m-primary" type="submit">Submit</button>
487
+ <button class="pf-v6-c-button pf-m-link" type="button">Cancel</button>
488
488
  </div>
489
489
  </div>
490
490
  </div>
@@ -496,25 +496,25 @@ subsection: forms
496
496
  ### Sections with repeatable fields
497
497
 
498
498
  ```html
499
- <form class="pf-v5-c-form" novalidate>
499
+ <form class="pf-v6-c-form" novalidate>
500
500
  <section
501
- class="pf-v5-c-form__section"
501
+ class="pf-v6-c-form__section"
502
502
  role="group"
503
503
  aria-labelledby="form-demo-sections-repeatable-fields-section1-title"
504
504
  >
505
505
  <div
506
- class="pf-v5-c-form__section-title"
506
+ class="pf-v6-c-form__section-title"
507
507
  id="form-demo-sections-repeatable-fields-section1-title"
508
508
  aria-hidden="true"
509
509
  >General settings</div>
510
- <div class="pf-v5-c-form__group">
511
- <div class="pf-v5-c-form__group-label"><label
512
- class="pf-v5-c-form__label"
510
+ <div class="pf-v6-c-form__group">
511
+ <div class="pf-v6-c-form__group-label"><label
512
+ class="pf-v6-c-form__label"
513
513
  for="form-demo-sections-repeatable-fields-clientid"
514
514
  >
515
- <span class="pf-v5-c-form__label-text">Client ID</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">
515
+ <span class="pf-v6-c-form__label-text">Client ID</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">
516
516
  <span
517
- class="pf-v5-c-button pf-m-no-padding pf-m-plain"
517
+ class="pf-v6-c-button pf-m-no-padding pf-m-plain"
518
518
  type="button"
519
519
  role="button"
520
520
  tabindex="0"
@@ -524,8 +524,8 @@ subsection: forms
524
524
  <i class="fas fa-question-circle" aria-hidden="true"></i>
525
525
  </span></span>
526
526
  </div>
527
- <div class="pf-v5-c-form__group-control">
528
- <span class="pf-v5-c-form-control pf-m-required">
527
+ <div class="pf-v6-c-form__group-control">
528
+ <span class="pf-v6-c-form-control pf-m-required">
529
529
  <input
530
530
  required
531
531
  type="text"
@@ -535,14 +535,14 @@ subsection: forms
535
535
  </span>
536
536
  </div>
537
537
  </div>
538
- <div class="pf-v5-c-form__group">
539
- <div class="pf-v5-c-form__group-label"><label
540
- class="pf-v5-c-form__label"
538
+ <div class="pf-v6-c-form__group">
539
+ <div class="pf-v6-c-form__group-label"><label
540
+ class="pf-v6-c-form__label"
541
541
  for="form-demo-sections-repeatable-fields-name"
542
542
  >
543
- <span class="pf-v5-c-form__label-text">Full 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">
543
+ <span class="pf-v6-c-form__label-text">Full 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">
544
544
  <span
545
- class="pf-v5-c-button pf-m-no-padding pf-m-plain"
545
+ class="pf-v6-c-button pf-m-no-padding pf-m-plain"
546
546
  type="button"
547
547
  role="button"
548
548
  tabindex="0"
@@ -552,8 +552,8 @@ subsection: forms
552
552
  <i class="fas fa-question-circle" aria-hidden="true"></i>
553
553
  </span></span>
554
554
  </div>
555
- <div class="pf-v5-c-form__group-control">
556
- <span class="pf-v5-c-form-control pf-m-required">
555
+ <div class="pf-v6-c-form__group-control">
556
+ <span class="pf-v6-c-form-control pf-m-required">
557
557
  <input
558
558
  required
559
559
  type="text"
@@ -563,14 +563,14 @@ subsection: forms
563
563
  </span>
564
564
  </div>
565
565
  </div>
566
- <div class="pf-v5-c-form__group">
567
- <div class="pf-v5-c-form__group-label"><label
568
- class="pf-v5-c-form__label"
566
+ <div class="pf-v6-c-form__group">
567
+ <div class="pf-v6-c-form__group-label"><label
568
+ class="pf-v6-c-form__label"
569
569
  for="form-demo-sections-repeatable-fields-description"
570
570
  >
571
- <span class="pf-v5-c-form__label-text">Description</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">
571
+ <span class="pf-v6-c-form__label-text">Description</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">
572
572
  <span
573
- class="pf-v5-c-button pf-m-no-padding pf-m-plain"
573
+ class="pf-v6-c-button pf-m-no-padding pf-m-plain"
574
574
  type="button"
575
575
  role="button"
576
576
  tabindex="0"
@@ -580,8 +580,8 @@ subsection: forms
580
580
  <i class="fas fa-question-circle" aria-hidden="true"></i>
581
581
  </span></span>
582
582
  </div>
583
- <div class="pf-v5-c-form__group-control">
584
- <span class="pf-v5-c-form-control pf-m-required">
583
+ <div class="pf-v6-c-form__group-control">
584
+ <span class="pf-v6-c-form-control pf-m-required">
585
585
  <input
586
586
  required
587
587
  type="text"
@@ -593,23 +593,23 @@ subsection: forms
593
593
  </div>
594
594
  </section>
595
595
  <section
596
- class="pf-v5-c-form__section"
596
+ class="pf-v6-c-form__section"
597
597
  role="group"
598
598
  aria-labelledby="form-demo-sections-repeatable-fields-section2-title"
599
599
  >
600
600
  <div
601
- class="pf-v5-c-form__section-title"
601
+ class="pf-v6-c-form__section-title"
602
602
  id="form-demo-sections-repeatable-fields-section2-title"
603
603
  aria-hidden="true"
604
604
  >Access settings</div>
605
- <div class="pf-v5-c-form__group">
606
- <div class="pf-v5-c-form__group-label"><label
607
- class="pf-v5-c-form__label"
605
+ <div class="pf-v6-c-form__group">
606
+ <div class="pf-v6-c-form__group-label"><label
607
+ class="pf-v6-c-form__label"
608
608
  for="form-demo-sections-repeatable-fields-section2-rooturl"
609
609
  >
610
- <span class="pf-v5-c-form__label-text">Root URL</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">
610
+ <span class="pf-v6-c-form__label-text">Root URL</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">
611
611
  <span
612
- class="pf-v5-c-button pf-m-no-padding pf-m-plain"
612
+ class="pf-v6-c-button pf-m-no-padding pf-m-plain"
613
613
  type="button"
614
614
  role="button"
615
615
  tabindex="0"
@@ -619,8 +619,8 @@ subsection: forms
619
619
  <i class="fas fa-question-circle" aria-hidden="true"></i>
620
620
  </span></span>
621
621
  </div>
622
- <div class="pf-v5-c-form__group-control">
623
- <span class="pf-v5-c-form-control pf-m-required">
622
+ <div class="pf-v6-c-form__group-control">
623
+ <span class="pf-v6-c-form-control pf-m-required">
624
624
  <input
625
625
  required
626
626
  type="text"
@@ -630,14 +630,14 @@ subsection: forms
630
630
  </span>
631
631
  </div>
632
632
  </div>
633
- <div class="pf-v5-c-form__group">
634
- <div class="pf-v5-c-form__group-label"><label
635
- class="pf-v5-c-form__label"
633
+ <div class="pf-v6-c-form__group">
634
+ <div class="pf-v6-c-form__group-label"><label
635
+ class="pf-v6-c-form__label"
636
636
  id="form-demo-sections-repeatable-fields-section2-uris"
637
637
  >
638
- <span class="pf-v5-c-form__label-text">Valid redirect URIs</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">
638
+ <span class="pf-v6-c-form__label-text">Valid redirect URIs</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">
639
639
  <span
640
- class="pf-v5-c-button pf-m-no-padding pf-m-plain"
640
+ class="pf-v6-c-button pf-m-no-padding pf-m-plain"
641
641
  type="button"
642
642
  role="button"
643
643
  tabindex="0"
@@ -647,10 +647,10 @@ subsection: forms
647
647
  <i class="fas fa-question-circle" aria-hidden="true"></i>
648
648
  </span></span>
649
649
  </div>
650
- <div class="pf-v5-c-form__group-control pf-m-stack">
651
- <div class="pf-v5-c-input-group">
652
- <div class="pf-v5-c-input-group__item pf-m-fill">
653
- <span class="pf-v5-c-form-control pf-m-required">
650
+ <div class="pf-v6-c-form__group-control pf-m-stack">
651
+ <div class="pf-v6-c-input-group">
652
+ <div class="pf-v6-c-input-group__item pf-m-fill">
653
+ <span class="pf-v6-c-form-control pf-m-required">
654
654
  <input
655
655
  required
656
656
  type="text"
@@ -660,9 +660,9 @@ subsection: forms
660
660
  />
661
661
  </span>
662
662
  </div>
663
- <div class="pf-v5-c-input-group__item pf-m-plain">
663
+ <div class="pf-v6-c-input-group__item pf-m-plain">
664
664
  <button
665
- class="pf-v5-c-button pf-m-plain"
665
+ class="pf-v6-c-button pf-m-plain"
666
666
  type="button"
667
667
  aria-label="Remove"
668
668
  >
@@ -670,9 +670,9 @@ subsection: forms
670
670
  </button>
671
671
  </div>
672
672
  </div>
673
- <div class="pf-v5-c-input-group">
674
- <div class="pf-v5-c-input-group__item pf-m-fill">
675
- <span class="pf-v5-c-form-control pf-m-required">
673
+ <div class="pf-v6-c-input-group">
674
+ <div class="pf-v6-c-input-group__item pf-m-fill">
675
+ <span class="pf-v6-c-form-control pf-m-required">
676
676
  <input
677
677
  required
678
678
  type="text"
@@ -682,9 +682,9 @@ subsection: forms
682
682
  />
683
683
  </span>
684
684
  </div>
685
- <div class="pf-v5-c-input-group__item pf-m-plain">
685
+ <div class="pf-v6-c-input-group__item pf-m-plain">
686
686
  <button
687
- class="pf-v5-c-button pf-m-plain"
687
+ class="pf-v6-c-button pf-m-plain"
688
688
  type="button"
689
689
  aria-label="Remove"
690
690
  >
@@ -692,9 +692,9 @@ subsection: forms
692
692
  </button>
693
693
  </div>
694
694
  </div>
695
- <div class="pf-v5-c-input-group">
696
- <div class="pf-v5-c-input-group__item pf-m-fill">
697
- <span class="pf-v5-c-form-control pf-m-required">
695
+ <div class="pf-v6-c-input-group">
696
+ <div class="pf-v6-c-input-group__item pf-m-fill">
697
+ <span class="pf-v6-c-form-control pf-m-required">
698
698
  <input
699
699
  required
700
700
  type="text"
@@ -704,9 +704,9 @@ subsection: forms
704
704
  />
705
705
  </span>
706
706
  </div>
707
- <div class="pf-v5-c-input-group__item pf-m-plain">
707
+ <div class="pf-v6-c-input-group__item pf-m-plain">
708
708
  <button
709
- class="pf-v5-c-button pf-m-plain"
709
+ class="pf-v6-c-button pf-m-plain"
710
710
  type="button"
711
711
  aria-label="Remove"
712
712
  >
@@ -714,22 +714,22 @@ subsection: forms
714
714
  </button>
715
715
  </div>
716
716
  </div>
717
- <button class="pf-v5-c-button pf-m-link pf-m-inline" type="button">
718
- <span class="pf-v5-c-button__icon pf-m-start">
717
+ <button class="pf-v6-c-button pf-m-link pf-m-inline" type="button">
718
+ <span class="pf-v6-c-button__icon pf-m-start">
719
719
  <i class="fas fa-plus-circle" aria-hidden="true"></i>
720
720
  </span>
721
721
  Add valid redirect URI
722
722
  </button>
723
723
  </div>
724
724
  </div>
725
- <div class="pf-v5-c-form__group">
726
- <div class="pf-v5-c-form__group-label"><label
727
- class="pf-v5-c-form__label"
725
+ <div class="pf-v6-c-form__group">
726
+ <div class="pf-v6-c-form__group-label"><label
727
+ class="pf-v6-c-form__label"
728
728
  for="form-demo-sections-repeatable-fields-section2-home-url"
729
729
  >
730
- <span class="pf-v5-c-form__label-text">Home URL</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">
730
+ <span class="pf-v6-c-form__label-text">Home URL</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">
731
731
  <span
732
- class="pf-v5-c-button pf-m-no-padding pf-m-plain"
732
+ class="pf-v6-c-button pf-m-no-padding pf-m-plain"
733
733
  type="button"
734
734
  role="button"
735
735
  tabindex="0"
@@ -739,8 +739,8 @@ subsection: forms
739
739
  <i class="fas fa-question-circle" aria-hidden="true"></i>
740
740
  </span></span>
741
741
  </div>
742
- <div class="pf-v5-c-form__group-control">
743
- <span class="pf-v5-c-form-control pf-m-required">
742
+ <div class="pf-v6-c-form__group-control">
743
+ <span class="pf-v6-c-form-control pf-m-required">
744
744
  <input
745
745
  required
746
746
  type="text"
@@ -758,15 +758,15 @@ subsection: forms
758
758
  ### Complex form
759
759
 
760
760
  ```html
761
- <form class="pf-v5-c-form" novalidate>
762
- <div class="pf-v5-c-form__group">
763
- <div class="pf-v5-c-form__group-label"><label
764
- class="pf-v5-c-form__label"
761
+ <form class="pf-v6-c-form" novalidate>
762
+ <div class="pf-v6-c-form__group">
763
+ <div class="pf-v6-c-form__group-label"><label
764
+ class="pf-v6-c-form__label"
765
765
  for="form-demo-sections-complex-form-name"
766
766
  >
767
- <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">
767
+ <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">
768
768
  <span
769
- class="pf-v5-c-button pf-m-no-padding pf-m-plain"
769
+ class="pf-v6-c-button pf-m-no-padding pf-m-plain"
770
770
  type="button"
771
771
  role="button"
772
772
  tabindex="0"
@@ -776,8 +776,8 @@ subsection: forms
776
776
  <i class="fas fa-question-circle" aria-hidden="true"></i>
777
777
  </span></span>
778
778
  </div>
779
- <div class="pf-v5-c-form__group-control">
780
- <span class="pf-v5-c-form-control pf-m-required">
779
+ <div class="pf-v6-c-form__group-control">
780
+ <span class="pf-v6-c-form-control pf-m-required">
781
781
  <input
782
782
  required
783
783
  type="text"
@@ -788,14 +788,14 @@ subsection: forms
788
788
  </div>
789
789
  </div>
790
790
 
791
- <div class="pf-v5-c-form__group">
792
- <div class="pf-v5-c-form__group-label"><label
793
- class="pf-v5-c-form__label"
791
+ <div class="pf-v6-c-form__group">
792
+ <div class="pf-v6-c-form__group-label"><label
793
+ class="pf-v6-c-form__label"
794
794
  for="form-demo-sections-complex-form-labels"
795
795
  >
796
- <span class="pf-v5-c-form__label-text">Labels</span></label>&nbsp;<span class="pf-v5-c-form__group-label-help">
796
+ <span class="pf-v6-c-form__label-text">Labels</span></label>&nbsp;<span class="pf-v6-c-form__group-label-help">
797
797
  <span
798
- class="pf-v5-c-button pf-m-no-padding pf-m-plain"
798
+ class="pf-v6-c-button pf-m-no-padding pf-m-plain"
799
799
  type="button"
800
800
  role="button"
801
801
  tabindex="0"
@@ -805,33 +805,33 @@ subsection: forms
805
805
  <i class="fas fa-question-circle" aria-hidden="true"></i>
806
806
  </span></span>
807
807
  </div>
808
- <div class="pf-v5-c-form__group-control">
808
+ <div class="pf-v6-c-form__group-control">
809
809
  <div
810
- class="pf-v5-c-text-input-group"
810
+ class="pf-v6-c-text-input-group"
811
811
  id="form-demo-sections-complex-form-labels"
812
812
  >
813
- <div class="pf-v5-c-text-input-group__main">
814
- <div class="pf-v5-c-label-group">
815
- <div class="pf-v5-c-label-group__main">
813
+ <div class="pf-v6-c-text-input-group__main">
814
+ <div class="pf-v6-c-label-group">
815
+ <div class="pf-v6-c-label-group__main">
816
816
  <ul
817
- class="pf-v5-c-label-group__list"
817
+ class="pf-v6-c-label-group__list"
818
818
  role="list"
819
819
  aria-label="Group of labels"
820
820
  >
821
- <li class="pf-v5-c-label-group__list-item">
822
- <span class="pf-v5-c-label">
823
- <span class="pf-v5-c-label__content">
824
- <span class="pf-v5-c-label__icon">
821
+ <li class="pf-v6-c-label-group__list-item">
822
+ <span class="pf-v6-c-label">
823
+ <span class="pf-v6-c-label__content">
824
+ <span class="pf-v6-c-label__icon">
825
825
  <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
826
826
  </span>
827
827
  <span
828
- class="pf-v5-c-label__text"
828
+ class="pf-v6-c-label__text"
829
829
  id="-label-1-text"
830
830
  >prometheus=k8s</span>
831
831
  </span>
832
- <span class="pf-v5-c-label__actions">
832
+ <span class="pf-v6-c-label__actions">
833
833
  <button
834
- class="pf-v5-c-button pf-m-no-padding pf-m-plain"
834
+ class="pf-v6-c-button pf-m-no-padding pf-m-plain"
835
835
  type="button"
836
836
  id="-label-1-button"
837
837
  aria-label="Remove"
@@ -842,17 +842,17 @@ subsection: forms
842
842
  </span>
843
843
  </span>
844
844
  </li>
845
- <li class="pf-v5-c-label-group__list-item">
846
- <span class="pf-v5-c-label">
847
- <span class="pf-v5-c-label__content">
848
- <span class="pf-v5-c-label__icon">
845
+ <li class="pf-v6-c-label-group__list-item">
846
+ <span class="pf-v6-c-label">
847
+ <span class="pf-v6-c-label__content">
848
+ <span class="pf-v6-c-label__icon">
849
849
  <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
850
850
  </span>
851
- <span class="pf-v5-c-label__text" id="-label-2-text">new</span>
851
+ <span class="pf-v6-c-label__text" id="-label-2-text">new</span>
852
852
  </span>
853
- <span class="pf-v5-c-label__actions">
853
+ <span class="pf-v6-c-label__actions">
854
854
  <button
855
- class="pf-v5-c-button pf-m-no-padding pf-m-plain"
855
+ class="pf-v6-c-button pf-m-no-padding pf-m-plain"
856
856
  type="button"
857
857
  id="-label-2-button"
858
858
  aria-label="Remove"
@@ -863,19 +863,19 @@ subsection: forms
863
863
  </span>
864
864
  </span>
865
865
  </li>
866
- <li class="pf-v5-c-label-group__list-item">
867
- <button class="pf-v5-c-label pf-m-add" type="button">
868
- <span class="pf-v5-c-label__content">
869
- <span class="pf-v5-c-label__text">Add Label</span>
866
+ <li class="pf-v6-c-label-group__list-item">
867
+ <button class="pf-v6-c-label pf-m-add" type="button">
868
+ <span class="pf-v6-c-label__content">
869
+ <span class="pf-v6-c-label__text">Add Label</span>
870
870
  </span>
871
871
  </button>
872
872
  </li>
873
873
  </ul>
874
874
  </div>
875
875
  </div>
876
- <span class="pf-v5-c-text-input-group__text">
876
+ <span class="pf-v6-c-text-input-group__text">
877
877
  <input
878
- class="pf-v5-c-text-input-group__text-input"
878
+ class="pf-v6-c-text-input-group__text-input"
879
879
  type="text"
880
880
  value
881
881
  aria-label="Type to filter"
@@ -887,237 +887,237 @@ subsection: forms
887
887
  </div>
888
888
 
889
889
  <div
890
- class="pf-v5-c-form__field-group"
890
+ class="pf-v6-c-form__field-group"
891
891
  role="group"
892
892
  aria-labelledby="form-demo-sections-complex-form-alerting-title"
893
893
  >
894
- <div class="pf-v5-c-form__field-group-toggle">
895
- <div class="pf-v5-c-form__field-group-toggle-button">
894
+ <div class="pf-v6-c-form__field-group-toggle">
895
+ <div class="pf-v6-c-form__field-group-toggle-button">
896
896
  <button
897
- class="pf-v5-c-button pf-m-plain"
897
+ class="pf-v6-c-button pf-m-plain"
898
898
  type="button"
899
899
  aria-expanded="false"
900
900
  aria-label="Details"
901
901
  id="form-demo-sections-complex-form-alerting-toggle"
902
902
  aria-labelledby="form-demo-sections-complex-form-alerting-title form-demo-sections-complex-form-alerting-toggle"
903
903
  >
904
- <span class="pf-v5-c-form__field-group-toggle-icon">
904
+ <span class="pf-v6-c-form__field-group-toggle-icon">
905
905
  <i class="fas fa-angle-right" aria-hidden="true"></i>
906
906
  </span>
907
907
  </button>
908
908
  </div>
909
909
  </div>
910
- <div class="pf-v5-c-form__field-group-header">
911
- <div class="pf-v5-c-form__field-group-header-main">
912
- <div class="pf-v5-c-form__field-group-header-title">
910
+ <div class="pf-v6-c-form__field-group-header">
911
+ <div class="pf-v6-c-form__field-group-header-main">
912
+ <div class="pf-v6-c-form__field-group-header-title">
913
913
  <div
914
- class="pf-v5-c-form__field-group-header-title-text"
914
+ class="pf-v6-c-form__field-group-header-title-text"
915
915
  id="form-demo-sections-complex-form-alerting-title"
916
916
  >Alerting</div>
917
917
  </div>
918
918
  <div
919
- class="pf-v5-c-form__field-group-header-description"
919
+ class="pf-v6-c-form__field-group-header-description"
920
920
  >Define details regarding alerting.</div>
921
921
  </div>
922
922
  </div>
923
923
  </div>
924
924
 
925
925
  <div
926
- class="pf-v5-c-form__field-group"
926
+ class="pf-v6-c-form__field-group"
927
927
  role="group"
928
928
  aria-labelledby="form-demo-sections-complex-form-query-title"
929
929
  >
930
- <div class="pf-v5-c-form__field-group-toggle">
931
- <div class="pf-v5-c-form__field-group-toggle-button">
930
+ <div class="pf-v6-c-form__field-group-toggle">
931
+ <div class="pf-v6-c-form__field-group-toggle-button">
932
932
  <button
933
- class="pf-v5-c-button pf-m-plain"
933
+ class="pf-v6-c-button pf-m-plain"
934
934
  type="button"
935
935
  aria-expanded="false"
936
936
  aria-label="Details"
937
937
  id="form-demo-sections-complex-form-query-toggle"
938
938
  aria-labelledby="form-demo-sections-complex-form-query-title form-demo-sections-complex-form-query-toggle"
939
939
  >
940
- <span class="pf-v5-c-form__field-group-toggle-icon">
940
+ <span class="pf-v6-c-form__field-group-toggle-icon">
941
941
  <i class="fas fa-angle-right" aria-hidden="true"></i>
942
942
  </span>
943
943
  </button>
944
944
  </div>
945
945
  </div>
946
- <div class="pf-v5-c-form__field-group-header">
947
- <div class="pf-v5-c-form__field-group-header-main">
948
- <div class="pf-v5-c-form__field-group-header-title">
946
+ <div class="pf-v6-c-form__field-group-header">
947
+ <div class="pf-v6-c-form__field-group-header-main">
948
+ <div class="pf-v6-c-form__field-group-header-title">
949
949
  <div
950
- class="pf-v5-c-form__field-group-header-title-text"
950
+ class="pf-v6-c-form__field-group-header-title-text"
951
951
  id="form-demo-sections-complex-form-query-title"
952
952
  >Query</div>
953
953
  </div>
954
954
  <div
955
- class="pf-v5-c-form__field-group-header-description"
955
+ class="pf-v6-c-form__field-group-header-description"
956
956
  >The query specification defines the query command line flags when starting.</div>
957
957
  </div>
958
958
  </div>
959
959
  </div>
960
960
 
961
961
  <div
962
- class="pf-v5-c-form__field-group"
962
+ class="pf-v6-c-form__field-group"
963
963
  role="group"
964
964
  aria-labelledby="form-demo-sections-complex-form-affinity-title"
965
965
  >
966
- <div class="pf-v5-c-form__field-group-toggle">
967
- <div class="pf-v5-c-form__field-group-toggle-button">
966
+ <div class="pf-v6-c-form__field-group-toggle">
967
+ <div class="pf-v6-c-form__field-group-toggle-button">
968
968
  <button
969
- class="pf-v5-c-button pf-m-plain"
969
+ class="pf-v6-c-button pf-m-plain"
970
970
  type="button"
971
971
  aria-expanded="false"
972
972
  aria-label="Details"
973
973
  id="form-demo-sections-complex-form-affinity-toggle"
974
974
  aria-labelledby="form-demo-sections-complex-form-affinity-title form-demo-sections-complex-form-affinity-toggle"
975
975
  >
976
- <span class="pf-v5-c-form__field-group-toggle-icon">
976
+ <span class="pf-v6-c-form__field-group-toggle-icon">
977
977
  <i class="fas fa-angle-right" aria-hidden="true"></i>
978
978
  </span>
979
979
  </button>
980
980
  </div>
981
981
  </div>
982
- <div class="pf-v5-c-form__field-group-header">
983
- <div class="pf-v5-c-form__field-group-header-main">
984
- <div class="pf-v5-c-form__field-group-header-title">
982
+ <div class="pf-v6-c-form__field-group-header">
983
+ <div class="pf-v6-c-form__field-group-header-main">
984
+ <div class="pf-v6-c-form__field-group-header-title">
985
985
  <div
986
- class="pf-v5-c-form__field-group-header-title-text"
986
+ class="pf-v6-c-form__field-group-header-title-text"
987
987
  id="form-demo-sections-complex-form-affinity-title"
988
988
  >Affinity</div>
989
989
  </div>
990
990
  <div
991
- class="pf-v5-c-form__field-group-header-description"
991
+ class="pf-v6-c-form__field-group-header-description"
992
992
  >If specified, the pod's scheduling constraints.</div>
993
993
  </div>
994
994
  </div>
995
- <div class="pf-v5-c-form__field-group-body" hidden>
995
+ <div class="pf-v6-c-form__field-group-body" hidden>
996
996
  <div
997
- class="pf-v5-c-form__field-group pf-m-expanded"
997
+ class="pf-v6-c-form__field-group pf-m-expanded"
998
998
  role="group"
999
999
  aria-labelledby="form-demo-sections-complex-form-node-affinity-title"
1000
1000
  >
1001
- <div class="pf-v5-c-form__field-group-toggle">
1002
- <div class="pf-v5-c-form__field-group-toggle-button">
1001
+ <div class="pf-v6-c-form__field-group-toggle">
1002
+ <div class="pf-v6-c-form__field-group-toggle-button">
1003
1003
  <button
1004
- class="pf-v5-c-button pf-m-plain"
1004
+ class="pf-v6-c-button pf-m-plain"
1005
1005
  type="button"
1006
1006
  aria-expanded="true"
1007
1007
  aria-label="Details"
1008
1008
  id="form-demo-sections-complex-form-node-affinity-toggle"
1009
1009
  aria-labelledby="form-demo-sections-complex-form-node-affinity-title form-demo-sections-complex-form-node-affinity-toggle"
1010
1010
  >
1011
- <span class="pf-v5-c-form__field-group-toggle-icon">
1011
+ <span class="pf-v6-c-form__field-group-toggle-icon">
1012
1012
  <i class="fas fa-angle-right" aria-hidden="true"></i>
1013
1013
  </span>
1014
1014
  </button>
1015
1015
  </div>
1016
1016
  </div>
1017
- <div class="pf-v5-c-form__field-group-header">
1018
- <div class="pf-v5-c-form__field-group-header-main">
1019
- <div class="pf-v5-c-form__field-group-header-title">
1017
+ <div class="pf-v6-c-form__field-group-header">
1018
+ <div class="pf-v6-c-form__field-group-header-main">
1019
+ <div class="pf-v6-c-form__field-group-header-title">
1020
1020
  <div
1021
- class="pf-v5-c-form__field-group-header-title-text"
1021
+ class="pf-v6-c-form__field-group-header-title-text"
1022
1022
  id="form-demo-sections-complex-form-node-affinity-title"
1023
1023
  >Node affinity</div>
1024
1024
  </div>
1025
1025
  <div
1026
- class="pf-v5-c-form__field-group-header-description"
1026
+ class="pf-v6-c-form__field-group-header-description"
1027
1027
  >Describes node affinity scheduling rules for the pod.</div>
1028
1028
  </div>
1029
1029
  </div>
1030
- <div class="pf-v5-c-form__field-group-body">
1030
+ <div class="pf-v6-c-form__field-group-body">
1031
1031
  <div
1032
- class="pf-v5-c-form__field-group"
1032
+ class="pf-v6-c-form__field-group"
1033
1033
  role="group"
1034
1034
  aria-labelledby="form-demo-sections-complex-form-node-affinity-required-title"
1035
1035
  >
1036
- <div class="pf-v5-c-form__field-group-toggle">
1037
- <div class="pf-v5-c-form__field-group-toggle-button">
1036
+ <div class="pf-v6-c-form__field-group-toggle">
1037
+ <div class="pf-v6-c-form__field-group-toggle-button">
1038
1038
  <button
1039
- class="pf-v5-c-button pf-m-plain"
1039
+ class="pf-v6-c-button pf-m-plain"
1040
1040
  type="button"
1041
1041
  aria-expanded="false"
1042
1042
  aria-label="Details"
1043
1043
  id="form-demo-sections-complex-form-node-affinity-required-toggle"
1044
1044
  aria-labelledby="form-demo-sections-complex-form-node-affinity-required-title form-demo-sections-complex-form-node-affinity-required-toggle"
1045
1045
  >
1046
- <span class="pf-v5-c-form__field-group-toggle-icon">
1046
+ <span class="pf-v6-c-form__field-group-toggle-icon">
1047
1047
  <i class="fas fa-angle-right" aria-hidden="true"></i>
1048
1048
  </span>
1049
1049
  </button>
1050
1050
  </div>
1051
1051
  </div>
1052
- <div class="pf-v5-c-form__field-group-header">
1053
- <div class="pf-v5-c-form__field-group-header-main">
1054
- <div class="pf-v5-c-form__field-group-header-title">
1052
+ <div class="pf-v6-c-form__field-group-header">
1053
+ <div class="pf-v6-c-form__field-group-header-main">
1054
+ <div class="pf-v6-c-form__field-group-header-title">
1055
1055
  <div
1056
- class="pf-v5-c-form__field-group-header-title-text"
1056
+ class="pf-v6-c-form__field-group-header-title-text"
1057
1057
  id="form-demo-sections-complex-form-node-affinity-required-title"
1058
1058
  >Required during scheduling, ignored during execution</div>
1059
1059
  </div>
1060
1060
  <div
1061
- class="pf-v5-c-form__field-group-header-description"
1061
+ class="pf-v6-c-form__field-group-header-description"
1062
1062
  >The scheduler will prefer to schedule pods to nodes that satisfy the affinity expressions specified by this field, but it may choose a node that violates one or more of the expressions. The node that is most preferred is the one with the greatest sum of weights, i.e. for each node that meets all of the scheduling requirements.</div>
1063
1063
  </div>
1064
1064
  </div>
1065
1065
  </div>
1066
1066
 
1067
1067
  <div
1068
- class="pf-v5-c-form__field-group pf-m-expanded"
1068
+ class="pf-v6-c-form__field-group pf-m-expanded"
1069
1069
  role="group"
1070
1070
  aria-labelledby="form-demo-sections-complex-form-node-affinity-required-2-title"
1071
1071
  >
1072
- <div class="pf-v5-c-form__field-group-toggle">
1073
- <div class="pf-v5-c-form__field-group-toggle-button">
1072
+ <div class="pf-v6-c-form__field-group-toggle">
1073
+ <div class="pf-v6-c-form__field-group-toggle-button">
1074
1074
  <button
1075
- class="pf-v5-c-button pf-m-plain"
1075
+ class="pf-v6-c-button pf-m-plain"
1076
1076
  type="button"
1077
1077
  aria-expanded="true"
1078
1078
  aria-label="Details"
1079
1079
  id="form-demo-sections-complex-form-node-affinity-required-2-toggle"
1080
1080
  aria-labelledby="form-demo-sections-complex-form-node-affinity-required-2-title form-demo-sections-complex-form-node-affinity-required-2-toggle"
1081
1081
  >
1082
- <span class="pf-v5-c-form__field-group-toggle-icon">
1082
+ <span class="pf-v6-c-form__field-group-toggle-icon">
1083
1083
  <i class="fas fa-angle-right" aria-hidden="true"></i>
1084
1084
  </span>
1085
1085
  </button>
1086
1086
  </div>
1087
1087
  </div>
1088
- <div class="pf-v5-c-form__field-group-header">
1089
- <div class="pf-v5-c-form__field-group-header-main">
1090
- <div class="pf-v5-c-form__field-group-header-title">
1088
+ <div class="pf-v6-c-form__field-group-header">
1089
+ <div class="pf-v6-c-form__field-group-header-main">
1090
+ <div class="pf-v6-c-form__field-group-header-title">
1091
1091
  <div
1092
- class="pf-v5-c-form__field-group-header-title-text"
1092
+ class="pf-v6-c-form__field-group-header-title-text"
1093
1093
  id="form-demo-sections-complex-form-node-affinity-required-2-title"
1094
1094
  >Required during scheduling, ignored during execution</div>
1095
1095
  </div>
1096
1096
  <div
1097
- class="pf-v5-c-form__field-group-header-description"
1097
+ class="pf-v6-c-form__field-group-header-description"
1098
1098
  >The scheduler will prefer to schedule pods to nodes that satisfy the affinity expressions specified by this field, but it may choose a node that violates one or more of the expressions. The node that is most preferred is the one with the greatest sum of weights, i.e. for each node that meets all of the scheduling requirements.</div>
1099
1099
  </div>
1100
1100
  </div>
1101
- <div class="pf-v5-c-form__field-group-body">
1101
+ <div class="pf-v6-c-form__field-group-body">
1102
1102
  <section
1103
- class="pf-v5-c-form__section"
1103
+ class="pf-v6-c-form__section"
1104
1104
  role="group"
1105
1105
  aria-labelledby="form-demo-sections-complex-form-node-selector-terms-title"
1106
1106
  >
1107
- <div class="pf-v5-c-form__group">
1108
- <div class="pf-v5-c-form__group-label"><label
1109
- class="pf-v5-c-form__label"
1107
+ <div class="pf-v6-c-form__group">
1108
+ <div class="pf-v6-c-form__group-label"><label
1109
+ class="pf-v6-c-form__label"
1110
1110
  id="-node-selector-terms-title"
1111
1111
  >
1112
- <span class="pf-v5-c-form__label-text">Node selector terms</span>&nbsp;<span
1113
- class="pf-v5-c-form__label-required"
1112
+ <span class="pf-v6-c-form__label-text">Node selector terms</span>&nbsp;<span
1113
+ class="pf-v6-c-form__label-required"
1114
1114
  aria-hidden="true"
1115
1115
  >&#42;</span></label>
1116
1116
  </div>
1117
- <div class="pf-v5-c-form__group-control pf-m-stack">
1118
- <div class="pf-v5-c-input-group">
1119
- <div class="pf-v5-c-input-group__item pf-m-fill">
1120
- <span class="pf-v5-c-form-control pf-m-required">
1117
+ <div class="pf-v6-c-form__group-control pf-m-stack">
1118
+ <div class="pf-v6-c-input-group">
1119
+ <div class="pf-v6-c-input-group__item pf-m-fill">
1120
+ <span class="pf-v6-c-form-control pf-m-required">
1121
1121
  <input
1122
1122
  required
1123
1123
  type="text"
@@ -1127,9 +1127,9 @@ subsection: forms
1127
1127
  />
1128
1128
  </span>
1129
1129
  </div>
1130
- <div class="pf-v5-c-input-group__item pf-m-plain">
1130
+ <div class="pf-v6-c-input-group__item pf-m-plain">
1131
1131
  <button
1132
- class="pf-v5-c-button pf-m-plain"
1132
+ class="pf-v6-c-button pf-m-plain"
1133
1133
  type="button"
1134
1134
  aria-label="Remove"
1135
1135
  >
@@ -1138,10 +1138,10 @@ subsection: forms
1138
1138
  </div>
1139
1139
  </div>
1140
1140
  <button
1141
- class="pf-v5-c-button pf-m-link pf-m-inline"
1141
+ class="pf-v6-c-button pf-m-link pf-m-inline"
1142
1142
  type="button"
1143
1143
  >
1144
- <span class="pf-v5-c-button__icon pf-m-start">
1144
+ <span class="pf-v6-c-button__icon pf-m-start">
1145
1145
  <i class="fas fa-plus-circle" aria-hidden="true"></i>
1146
1146
  </span>
1147
1147
  Add valid redirect URI
@@ -1155,36 +1155,36 @@ subsection: forms
1155
1155
  </div>
1156
1156
 
1157
1157
  <div
1158
- class="pf-v5-c-form__field-group"
1158
+ class="pf-v6-c-form__field-group"
1159
1159
  role="group"
1160
1160
  aria-labelledby="form-demo-sections-complex-form-pod-affinity-title"
1161
1161
  >
1162
- <div class="pf-v5-c-form__field-group-toggle">
1163
- <div class="pf-v5-c-form__field-group-toggle-button">
1162
+ <div class="pf-v6-c-form__field-group-toggle">
1163
+ <div class="pf-v6-c-form__field-group-toggle-button">
1164
1164
  <button
1165
- class="pf-v5-c-button pf-m-plain"
1165
+ class="pf-v6-c-button pf-m-plain"
1166
1166
  type="button"
1167
1167
  aria-expanded="false"
1168
1168
  aria-label="Details"
1169
1169
  id="form-demo-sections-complex-form-pod-affinity-toggle"
1170
1170
  aria-labelledby="form-demo-sections-complex-form-pod-affinity-title form-demo-sections-complex-form-pod-affinity-toggle"
1171
1171
  >
1172
- <span class="pf-v5-c-form__field-group-toggle-icon">
1172
+ <span class="pf-v6-c-form__field-group-toggle-icon">
1173
1173
  <i class="fas fa-angle-right" aria-hidden="true"></i>
1174
1174
  </span>
1175
1175
  </button>
1176
1176
  </div>
1177
1177
  </div>
1178
- <div class="pf-v5-c-form__field-group-header">
1179
- <div class="pf-v5-c-form__field-group-header-main">
1180
- <div class="pf-v5-c-form__field-group-header-title">
1178
+ <div class="pf-v6-c-form__field-group-header">
1179
+ <div class="pf-v6-c-form__field-group-header-main">
1180
+ <div class="pf-v6-c-form__field-group-header-title">
1181
1181
  <div
1182
- class="pf-v5-c-form__field-group-header-title-text"
1182
+ class="pf-v6-c-form__field-group-header-title-text"
1183
1183
  id="form-demo-sections-complex-form-pod-affinity-title"
1184
1184
  >Pod affinity</div>
1185
1185
  </div>
1186
1186
  <div
1187
- class="pf-v5-c-form__field-group-header-description"
1187
+ class="pf-v6-c-form__field-group-header-description"
1188
1188
  >Describes pod affinity scheduling rules (e.g. co-locate the pod in the same node, zone, etc. as some other pods).</div>
1189
1189
  </div>
1190
1190
  </div>
@@ -1193,82 +1193,82 @@ subsection: forms
1193
1193
  </div>
1194
1194
 
1195
1195
  <div
1196
- class="pf-v5-c-form__field-group pf-m-expanded"
1196
+ class="pf-v6-c-form__field-group pf-m-expanded"
1197
1197
  role="group"
1198
1198
  aria-labelledby="form-demo-sections-complex-form-routing-title"
1199
1199
  >
1200
- <div class="pf-v5-c-form__field-group-toggle">
1201
- <div class="pf-v5-c-form__field-group-toggle-button">
1200
+ <div class="pf-v6-c-form__field-group-toggle">
1201
+ <div class="pf-v6-c-form__field-group-toggle-button">
1202
1202
  <button
1203
- class="pf-v5-c-button pf-m-plain"
1203
+ class="pf-v6-c-button pf-m-plain"
1204
1204
  type="button"
1205
1205
  aria-expanded="true"
1206
1206
  aria-label="Details"
1207
1207
  id="form-demo-sections-complex-form-routing-toggle"
1208
1208
  aria-labelledby="form-demo-sections-complex-form-routing-title form-demo-sections-complex-form-routing-toggle"
1209
1209
  >
1210
- <span class="pf-v5-c-form__field-group-toggle-icon">
1210
+ <span class="pf-v6-c-form__field-group-toggle-icon">
1211
1211
  <i class="fas fa-angle-right" aria-hidden="true"></i>
1212
1212
  </span>
1213
1213
  </button>
1214
1214
  </div>
1215
1215
  </div>
1216
- <div class="pf-v5-c-form__field-group-header">
1217
- <div class="pf-v5-c-form__field-group-header-main">
1218
- <div class="pf-v5-c-form__field-group-header-title">
1216
+ <div class="pf-v6-c-form__field-group-header">
1217
+ <div class="pf-v6-c-form__field-group-header-main">
1218
+ <div class="pf-v6-c-form__field-group-header-title">
1219
1219
  <div
1220
- class="pf-v5-c-form__field-group-header-title-text"
1220
+ class="pf-v6-c-form__field-group-header-title-text"
1221
1221
  id="form-demo-sections-complex-form-routing-title"
1222
1222
  >Routing</div>
1223
1223
  </div>
1224
1224
  </div>
1225
1225
  </div>
1226
- <div class="pf-v5-c-form__field-group-body">
1226
+ <div class="pf-v6-c-form__field-group-body">
1227
1227
  <div
1228
- class="pf-v5-c-form__group"
1228
+ class="pf-v6-c-form__group"
1229
1229
  role="group"
1230
1230
  aria-labelledby="form-demo-sections-complex-formform-demo-sections-complex-form-routing-create-route-legend"
1231
1231
  >
1232
- <div class="pf-v5-c-form__group-control">
1233
- <div class="pf-v5-c-check">
1232
+ <div class="pf-v6-c-form__group-control">
1233
+ <div class="pf-v6-c-check">
1234
1234
  <input
1235
- class="pf-v5-c-check__input"
1235
+ class="pf-v6-c-check__input"
1236
1236
  type="checkbox"
1237
1237
  id="form-demo-sections-complex-form-routing-create-route-create-route"
1238
1238
  name="form-demo-sections-complex-form-routing-create-route-create-route"
1239
1239
  />
1240
1240
 
1241
1241
  <label
1242
- class="pf-v5-c-check__label"
1242
+ class="pf-v6-c-check__label"
1243
1243
  for="form-demo-sections-complex-form-routing-create-route-create-route"
1244
1244
  >Create a route to the application</label>
1245
1245
  </div>
1246
- <div class="pf-v5-c-form__helper-text" aria-live="polite">
1247
- <div class="pf-v5-c-helper-text">
1246
+ <div class="pf-v6-c-form__helper-text" aria-live="polite">
1247
+ <div class="pf-v6-c-helper-text">
1248
1248
  <div
1249
- class="pf-v5-c-helper-text__item"
1249
+ class="pf-v6-c-helper-text__item"
1250
1250
  id="form-demo-sections-complex-form-routing-create-route-helper"
1251
1251
  >
1252
- <span class="pf-v5-c-helper-text__item-icon">
1252
+ <span class="pf-v6-c-helper-text__item-icon">
1253
1253
  <i class="fas fa-fw fa-minus" aria-hidden="true"></i>
1254
1254
  </span>
1255
1255
  <span
1256
- class="pf-v5-c-helper-text__item-text"
1256
+ class="pf-v6-c-helper-text__item-text"
1257
1257
  >Exposes your appplication at a public URL.</span>
1258
1258
  </div>
1259
1259
  </div>
1260
1260
  </div>
1261
1261
  </div>
1262
1262
  </div>
1263
- <div class="pf-v5-c-form__group">
1264
- <div class="pf-v5-c-form__group-label"><label
1265
- class="pf-v5-c-form__label"
1263
+ <div class="pf-v6-c-form__group">
1264
+ <div class="pf-v6-c-form__group-label"><label
1265
+ class="pf-v6-c-form__label"
1266
1266
  for="form-demo-sections-complex-form-routing-hostname"
1267
1267
  >
1268
- <span class="pf-v5-c-form__label-text">Hostname</span></label>
1268
+ <span class="pf-v6-c-form__label-text">Hostname</span></label>
1269
1269
  </div>
1270
- <div class="pf-v5-c-form__group-control">
1271
- <span class="pf-v5-c-form-control">
1270
+ <div class="pf-v6-c-form__group-control">
1271
+ <span class="pf-v6-c-form-control">
1272
1272
  <input
1273
1273
  type="text"
1274
1274
  id="form-demo-sections-complex-form-routing-hostname"
@@ -1276,32 +1276,32 @@ subsection: forms
1276
1276
  />
1277
1277
  </span>
1278
1278
 
1279
- <div class="pf-v5-c-form__helper-text" aria-live="polite">
1280
- <div class="pf-v5-c-helper-text">
1279
+ <div class="pf-v6-c-form__helper-text" aria-live="polite">
1280
+ <div class="pf-v6-c-helper-text">
1281
1281
  <div
1282
- class="pf-v5-c-helper-text__item"
1282
+ class="pf-v6-c-helper-text__item"
1283
1283
  id="form-demo-sections-complex-form-routing-hostname-helper"
1284
1284
  >
1285
- <span class="pf-v5-c-helper-text__item-icon">
1285
+ <span class="pf-v6-c-helper-text__item-icon">
1286
1286
  <i class="fas fa-fw fa-minus" aria-hidden="true"></i>
1287
1287
  </span>
1288
1288
  <span
1289
- class="pf-v5-c-helper-text__item-text"
1289
+ class="pf-v6-c-helper-text__item-text"
1290
1290
  >Public hostname for the route. If not specified, a hostname is generated.</span>
1291
1291
  </div>
1292
1292
  </div>
1293
1293
  </div>
1294
1294
  </div>
1295
1295
  </div>
1296
- <div class="pf-v5-c-form__group">
1297
- <div class="pf-v5-c-form__group-label"><label
1298
- class="pf-v5-c-form__label"
1296
+ <div class="pf-v6-c-form__group">
1297
+ <div class="pf-v6-c-form__group-label"><label
1298
+ class="pf-v6-c-form__label"
1299
1299
  for="form-demo-sections-complex-form-routing-path"
1300
1300
  >
1301
- <span class="pf-v5-c-form__label-text">Path</span></label>
1301
+ <span class="pf-v6-c-form__label-text">Path</span></label>
1302
1302
  </div>
1303
- <div class="pf-v5-c-form__group-control">
1304
- <span class="pf-v5-c-form-control pf-m-required">
1303
+ <div class="pf-v6-c-form__group-control">
1304
+ <span class="pf-v6-c-form-control pf-m-required">
1305
1305
  <input
1306
1306
  required
1307
1307
  type="text"
@@ -1311,17 +1311,17 @@ subsection: forms
1311
1311
  />
1312
1312
  </span>
1313
1313
 
1314
- <div class="pf-v5-c-form__helper-text" aria-live="polite">
1315
- <div class="pf-v5-c-helper-text">
1314
+ <div class="pf-v6-c-form__helper-text" aria-live="polite">
1315
+ <div class="pf-v6-c-helper-text">
1316
1316
  <div
1317
- class="pf-v5-c-helper-text__item"
1317
+ class="pf-v6-c-helper-text__item"
1318
1318
  id="form-demo-sections-complex-form-routing-path-helper"
1319
1319
  >
1320
- <span class="pf-v5-c-helper-text__item-icon">
1320
+ <span class="pf-v6-c-helper-text__item-icon">
1321
1321
  <i class="fas fa-fw fa-minus" aria-hidden="true"></i>
1322
1322
  </span>
1323
1323
  <span
1324
- class="pf-v5-c-helper-text__item-text"
1324
+ class="pf-v6-c-helper-text__item-text"
1325
1325
  >Path that the router watches to route traffic to the service.</span>
1326
1326
  </div>
1327
1327
  </div>
@@ -1329,44 +1329,44 @@ subsection: forms
1329
1329
  </div>
1330
1330
  </div>
1331
1331
  <div
1332
- class="pf-v5-c-form__group"
1332
+ class="pf-v6-c-form__group"
1333
1333
  role="group"
1334
1334
  aria-labelledby="form-demo-sections-complex-formform-demo-sections-complex-form-routing-security-legend"
1335
1335
  >
1336
1336
  <div
1337
- class="pf-v5-c-form__group-label"
1337
+ class="pf-v6-c-form__group-label"
1338
1338
  id="form-demo-sections-complex-formform-demo-sections-complex-form-routing-security-legend"
1339
1339
  ><span
1340
- class="pf-v5-c-form__label"
1340
+ class="pf-v6-c-form__label"
1341
1341
  for="form-demo-sections-complex-form-routing-security"
1342
1342
  >
1343
- <span class="pf-v5-c-form__label-text">Security</span></span>
1343
+ <span class="pf-v6-c-form__label-text">Security</span></span>
1344
1344
  </div>
1345
- <div class="pf-v5-c-form__group-control">
1346
- <div class="pf-v5-c-check">
1345
+ <div class="pf-v6-c-form__group-control">
1346
+ <div class="pf-v6-c-check">
1347
1347
  <input
1348
- class="pf-v5-c-check__input"
1348
+ class="pf-v6-c-check__input"
1349
1349
  type="checkbox"
1350
1350
  id="form-demo-sections-complex-form-routing-security-check-1"
1351
1351
  name="form-demo-sections-complex-form-routing-security-check-1"
1352
1352
  />
1353
1353
 
1354
1354
  <label
1355
- class="pf-v5-c-check__label"
1355
+ class="pf-v6-c-check__label"
1356
1356
  for="form-demo-sections-complex-form-routing-security-check-1"
1357
1357
  >Secure Route</label>
1358
1358
  </div>
1359
- <div class="pf-v5-c-form__helper-text" aria-live="polite">
1360
- <div class="pf-v5-c-helper-text">
1359
+ <div class="pf-v6-c-form__helper-text" aria-live="polite">
1360
+ <div class="pf-v6-c-helper-text">
1361
1361
  <div
1362
- class="pf-v5-c-helper-text__item"
1362
+ class="pf-v6-c-helper-text__item"
1363
1363
  id="form-demo-sections-complex-form-routing-security-helper"
1364
1364
  >
1365
- <span class="pf-v5-c-helper-text__item-icon">
1365
+ <span class="pf-v6-c-helper-text__item-icon">
1366
1366
  <i class="fas fa-fw fa-minus" aria-hidden="true"></i>
1367
1367
  </span>
1368
1368
  <span
1369
- class="pf-v5-c-helper-text__item-text"
1369
+ class="pf-v6-c-helper-text__item-text"
1370
1370
  >Routes can be secured using several TLS termination types for serving certificates.</span>
1371
1371
  </div>
1372
1372
  </div>
@@ -1377,63 +1377,63 @@ subsection: forms
1377
1377
  </div>
1378
1378
 
1379
1379
  <div
1380
- class="pf-v5-c-form__field-group pf-m-expanded"
1380
+ class="pf-v6-c-form__field-group pf-m-expanded"
1381
1381
  role="group"
1382
1382
  aria-labelledby="form-demo-sections-complex-form-health-checks-title"
1383
1383
  >
1384
- <div class="pf-v5-c-form__field-group-toggle">
1385
- <div class="pf-v5-c-form__field-group-toggle-button">
1384
+ <div class="pf-v6-c-form__field-group-toggle">
1385
+ <div class="pf-v6-c-form__field-group-toggle-button">
1386
1386
  <button
1387
- class="pf-v5-c-button pf-m-plain"
1387
+ class="pf-v6-c-button pf-m-plain"
1388
1388
  type="button"
1389
1389
  aria-expanded="true"
1390
1390
  aria-label="Details"
1391
1391
  id="form-demo-sections-complex-form-health-checks-toggle"
1392
1392
  aria-labelledby="form-demo-sections-complex-form-health-checks-title form-demo-sections-complex-form-health-checks-toggle"
1393
1393
  >
1394
- <span class="pf-v5-c-form__field-group-toggle-icon">
1394
+ <span class="pf-v6-c-form__field-group-toggle-icon">
1395
1395
  <i class="fas fa-angle-right" aria-hidden="true"></i>
1396
1396
  </span>
1397
1397
  </button>
1398
1398
  </div>
1399
1399
  </div>
1400
- <div class="pf-v5-c-form__field-group-header">
1401
- <div class="pf-v5-c-form__field-group-header-main">
1402
- <div class="pf-v5-c-form__field-group-header-title">
1400
+ <div class="pf-v6-c-form__field-group-header">
1401
+ <div class="pf-v6-c-form__field-group-header-main">
1402
+ <div class="pf-v6-c-form__field-group-header-title">
1403
1403
  <div
1404
- class="pf-v5-c-form__field-group-header-title-text"
1404
+ class="pf-v6-c-form__field-group-header-title-text"
1405
1405
  id="form-demo-sections-complex-form-health-checks-title"
1406
1406
  >Health checks</div>
1407
1407
  </div>
1408
1408
  </div>
1409
1409
  </div>
1410
- <div class="pf-v5-c-form__field-group-body">
1410
+ <div class="pf-v6-c-form__field-group-body">
1411
1411
  <div
1412
- class="pf-v5-c-form__field-group pf-m-expanded"
1412
+ class="pf-v6-c-form__field-group pf-m-expanded"
1413
1413
  role="group"
1414
1414
  aria-labelledby="form-demo-sections-complex-form-readiness-title"
1415
1415
  >
1416
- <div class="pf-v5-c-form__field-group-header">
1417
- <div class="pf-v5-c-form__field-group-header-main">
1418
- <div class="pf-v5-c-form__field-group-header-title">
1416
+ <div class="pf-v6-c-form__field-group-header">
1417
+ <div class="pf-v6-c-form__field-group-header-main">
1418
+ <div class="pf-v6-c-form__field-group-header-title">
1419
1419
  <div
1420
- class="pf-v5-c-form__field-group-header-title-text"
1420
+ class="pf-v6-c-form__field-group-header-title-text"
1421
1421
  id="form-demo-sections-complex-form-readiness-title"
1422
1422
  >Readiness probe</div>
1423
1423
  </div>
1424
1424
  <div
1425
- class="pf-v5-c-form__field-group-header-description"
1425
+ class="pf-v6-c-form__field-group-header-description"
1426
1426
  >A readiness probe checks if the container is ready to handle requests. A failed readiness probe means that a container should not receive any traffic from a proxy, even if it's running.</div>
1427
1427
  </div>
1428
1428
  </div>
1429
- <div class="pf-v5-c-form__field-group-body">
1430
- <div class="pf-v5-c-form__group">
1431
- <div class="pf-v5-c-form__group-control">
1429
+ <div class="pf-v6-c-form__field-group-body">
1430
+ <div class="pf-v6-c-form__group">
1431
+ <div class="pf-v6-c-form__group-control">
1432
1432
  <button
1433
- class="pf-v5-c-button pf-m-link pf-m-inline"
1433
+ class="pf-v6-c-button pf-m-link pf-m-inline"
1434
1434
  type="button"
1435
1435
  >
1436
- <span class="pf-v5-c-button__icon pf-m-start">
1436
+ <span class="pf-v6-c-button__icon pf-m-start">
1437
1437
  <i class="fas fa-plus-circle" aria-hidden="true"></i>
1438
1438
  </span>
1439
1439
  Add liveness probe
@@ -1443,31 +1443,31 @@ subsection: forms
1443
1443
  </div>
1444
1444
  </div>
1445
1445
  <div
1446
- class="pf-v5-c-form__field-group pf-m-expanded"
1446
+ class="pf-v6-c-form__field-group pf-m-expanded"
1447
1447
  role="group"
1448
1448
  aria-labelledby="form-demo-sections-complex-form-startup-title"
1449
1449
  >
1450
- <div class="pf-v5-c-form__field-group-header">
1451
- <div class="pf-v5-c-form__field-group-header-main">
1452
- <div class="pf-v5-c-form__field-group-header-title">
1450
+ <div class="pf-v6-c-form__field-group-header">
1451
+ <div class="pf-v6-c-form__field-group-header-main">
1452
+ <div class="pf-v6-c-form__field-group-header-title">
1453
1453
  <div
1454
- class="pf-v5-c-form__field-group-header-title-text"
1454
+ class="pf-v6-c-form__field-group-header-title-text"
1455
1455
  id="form-demo-sections-complex-form-startup-title"
1456
1456
  >Liveness probe</div>
1457
1457
  </div>
1458
1458
  <div
1459
- class="pf-v5-c-form__field-group-header-description"
1459
+ class="pf-v6-c-form__field-group-header-description"
1460
1460
  >A startup probe checks if the application within the container is started.</div>
1461
1461
  </div>
1462
1462
  </div>
1463
- <div class="pf-v5-c-form__field-group-body">
1464
- <div class="pf-v5-c-form__group">
1465
- <div class="pf-v5-c-form__group-control">
1463
+ <div class="pf-v6-c-form__field-group-body">
1464
+ <div class="pf-v6-c-form__group">
1465
+ <div class="pf-v6-c-form__group-control">
1466
1466
  <button
1467
- class="pf-v5-c-button pf-m-link pf-m-inline"
1467
+ class="pf-v6-c-button pf-m-link pf-m-inline"
1468
1468
  type="button"
1469
1469
  >
1470
- <span class="pf-v5-c-button__icon pf-m-start">
1470
+ <span class="pf-v6-c-button__icon pf-m-start">
1471
1471
  <i class="fas fa-plus-circle" aria-hidden="true"></i>
1472
1472
  </span>
1473
1473
  Add startup probe
@@ -1480,67 +1480,67 @@ subsection: forms
1480
1480
  </div>
1481
1481
 
1482
1482
  <div
1483
- class="pf-v5-c-form__field-group"
1483
+ class="pf-v6-c-form__field-group"
1484
1484
  role="group"
1485
1485
  aria-labelledby="form-demo-sections-complex-form-build-configuration-title"
1486
1486
  >
1487
- <div class="pf-v5-c-form__field-group-toggle">
1488
- <div class="pf-v5-c-form__field-group-toggle-button">
1487
+ <div class="pf-v6-c-form__field-group-toggle">
1488
+ <div class="pf-v6-c-form__field-group-toggle-button">
1489
1489
  <button
1490
- class="pf-v5-c-button pf-m-plain"
1490
+ class="pf-v6-c-button pf-m-plain"
1491
1491
  type="button"
1492
1492
  aria-expanded="false"
1493
1493
  aria-label="Details"
1494
1494
  id="form-demo-sections-complex-form-build-configuration-toggle"
1495
1495
  aria-labelledby="form-demo-sections-complex-form-build-configuration-title form-demo-sections-complex-form-build-configuration-toggle"
1496
1496
  >
1497
- <span class="pf-v5-c-form__field-group-toggle-icon">
1497
+ <span class="pf-v6-c-form__field-group-toggle-icon">
1498
1498
  <i class="fas fa-angle-right" aria-hidden="true"></i>
1499
1499
  </span>
1500
1500
  </button>
1501
1501
  </div>
1502
1502
  </div>
1503
- <div class="pf-v5-c-form__field-group-header">
1504
- <div class="pf-v5-c-form__field-group-header-main">
1505
- <div class="pf-v5-c-form__field-group-header-title">
1503
+ <div class="pf-v6-c-form__field-group-header">
1504
+ <div class="pf-v6-c-form__field-group-header-main">
1505
+ <div class="pf-v6-c-form__field-group-header-title">
1506
1506
  <div
1507
- class="pf-v5-c-form__field-group-header-title-text"
1507
+ class="pf-v6-c-form__field-group-header-title-text"
1508
1508
  id="form-demo-sections-complex-form-build-configuration-title"
1509
1509
  >Build configuration</div>
1510
1510
  </div>
1511
1511
  </div>
1512
- <div class="pf-v5-c-form__field-group-header-actions">
1513
- <button class="pf-v5-c-button pf-m-secondary" type="button">Import</button>
1512
+ <div class="pf-v6-c-form__field-group-header-actions">
1513
+ <button class="pf-v6-c-button pf-m-secondary" type="button">Import</button>
1514
1514
  </div>
1515
1515
  </div>
1516
1516
  </div>
1517
1517
 
1518
1518
  <div
1519
- class="pf-v5-c-form__field-group"
1519
+ class="pf-v6-c-form__field-group"
1520
1520
  role="group"
1521
1521
  aria-labelledby="form-demo-sections-complex-form-deployment-title"
1522
1522
  >
1523
- <div class="pf-v5-c-form__field-group-toggle">
1524
- <div class="pf-v5-c-form__field-group-toggle-button">
1523
+ <div class="pf-v6-c-form__field-group-toggle">
1524
+ <div class="pf-v6-c-form__field-group-toggle-button">
1525
1525
  <button
1526
- class="pf-v5-c-button pf-m-plain"
1526
+ class="pf-v6-c-button pf-m-plain"
1527
1527
  type="button"
1528
1528
  aria-expanded="false"
1529
1529
  aria-label="Details"
1530
1530
  id="form-demo-sections-complex-form-deployment-toggle"
1531
1531
  aria-labelledby="form-demo-sections-complex-form-deployment-title form-demo-sections-complex-form-deployment-toggle"
1532
1532
  >
1533
- <span class="pf-v5-c-form__field-group-toggle-icon">
1533
+ <span class="pf-v6-c-form__field-group-toggle-icon">
1534
1534
  <i class="fas fa-angle-right" aria-hidden="true"></i>
1535
1535
  </span>
1536
1536
  </button>
1537
1537
  </div>
1538
1538
  </div>
1539
- <div class="pf-v5-c-form__field-group-header">
1540
- <div class="pf-v5-c-form__field-group-header-main">
1541
- <div class="pf-v5-c-form__field-group-header-title">
1539
+ <div class="pf-v6-c-form__field-group-header">
1540
+ <div class="pf-v6-c-form__field-group-header-main">
1541
+ <div class="pf-v6-c-form__field-group-header-title">
1542
1542
  <div
1543
- class="pf-v5-c-form__field-group-header-title-text"
1543
+ class="pf-v6-c-form__field-group-header-title-text"
1544
1544
  id="form-demo-sections-complex-form-deployment-title"
1545
1545
  >Deployment</div>
1546
1546
  </div>
@@ -1548,9 +1548,9 @@ subsection: forms
1548
1548
  </div>
1549
1549
  </div>
1550
1550
 
1551
- <div class="pf-v5-c-form__actions">
1552
- <button class="pf-v5-c-button pf-m-primary" type="submit">Save</button>
1553
- <button class="pf-v5-c-button pf-m-secondary" type="reset">Cancel</button>
1551
+ <div class="pf-v6-c-form__actions">
1552
+ <button class="pf-v6-c-button pf-m-primary" type="submit">Save</button>
1553
+ <button class="pf-v6-c-button pf-m-secondary" type="reset">Cancel</button>
1554
1554
  </div>
1555
1555
  </form>
1556
1556