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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (259) hide show
  1. package/base/patternfly-common.css +10 -10
  2. package/base/patternfly-globals.css +3 -3
  3. package/base/patternfly-icons.css +1 -1
  4. package/base/patternfly-themes.css +53 -53
  5. package/base/patternfly-variables.css +236 -245
  6. package/base/tokens/_tokens-font.scss +0 -11
  7. package/components/AboutModalBox/about-modal-box.css +102 -102
  8. package/components/Accordion/accordion.css +118 -118
  9. package/components/ActionList/action-list.css +16 -16
  10. package/components/Alert/alert-group.css +50 -50
  11. package/components/Alert/alert.css +161 -161
  12. package/components/AppLauncher/app-launcher.css +167 -167
  13. package/components/Avatar/avatar.css +116 -116
  14. package/components/BackToTop/back-to-top.css +21 -21
  15. package/components/Backdrop/backdrop.css +9 -9
  16. package/components/BackgroundImage/background-image.css +15 -15
  17. package/components/Badge/badge.css +35 -35
  18. package/components/Banner/banner.css +114 -114
  19. package/components/Brand/brand.css +28 -28
  20. package/components/Breadcrumb/breadcrumb.css +62 -62
  21. package/components/Button/button.css +514 -514
  22. package/components/CalendarMonth/calendar-month.css +144 -144
  23. package/components/Card/card.css +230 -230
  24. package/components/Check/check.css +43 -43
  25. package/components/Chip/chip-group.css +60 -60
  26. package/components/Chip/chip.css +83 -83
  27. package/components/ClipboardCopy/clipboard-copy.css +71 -71
  28. package/components/CodeBlock/code-block.css +35 -35
  29. package/components/CodeEditor/code-editor.css +121 -121
  30. package/components/Content/content.css +216 -216
  31. package/components/ContextSelector/context-selector.css +251 -251
  32. package/components/DataList/data-list-grid.css +182 -182
  33. package/components/DataList/data-list.css +468 -468
  34. package/components/DatePicker/date-picker.css +35 -35
  35. package/components/DescriptionList/description-list-order.css +90 -90
  36. package/components/DescriptionList/description-list.css +193 -193
  37. package/components/Divider/divider.css +143 -143
  38. package/components/DragDrop/drag-drop.css +46 -46
  39. package/components/Drawer/drawer.css +474 -474
  40. package/components/Dropdown/dropdown.css +457 -457
  41. package/components/DualListSelector/dual-list-selector.css +199 -199
  42. package/components/EmptyState/empty-state.css +104 -104
  43. package/components/ExpandableSection/expandable-section.css +113 -113
  44. package/components/FileUpload/file-upload.css +32 -32
  45. package/components/Form/form.css +281 -281
  46. package/components/FormControl/form-control.css +197 -197
  47. package/components/HelperText/helper-text.css +51 -51
  48. package/components/Hint/hint.css +46 -46
  49. package/components/Icon/icon.css +218 -218
  50. package/components/InlineEdit/inline-edit.css +43 -43
  51. package/components/InputGroup/input-group.css +52 -52
  52. package/components/JumpLinks/jump-links.css +183 -183
  53. package/components/Label/label-group.css +86 -86
  54. package/components/Label/label.css +438 -438
  55. package/components/List/list.css +53 -53
  56. package/components/LogViewer/log-viewer.css +138 -138
  57. package/components/Login/login.css +139 -139
  58. package/components/Masthead/masthead.css +319 -319
  59. package/components/Menu/menu.css +415 -415
  60. package/components/MenuToggle/menu-toggle.css +275 -275
  61. package/components/ModalBox/modal-box.css +121 -121
  62. package/components/MultipleFileUpload/multiple-file-upload.css +163 -163
  63. package/components/Nav/nav.css +225 -225
  64. package/components/NotificationBadge/notification-badge.css +66 -66
  65. package/components/NotificationDrawer/notification-drawer.css +179 -179
  66. package/components/NumberInput/number-input.css +20 -20
  67. package/components/OptionsMenu/options-menu.css +190 -190
  68. package/components/OverflowMenu/overflow-menu.css +19 -19
  69. package/components/Page/page.css +598 -598
  70. package/components/Pagination/pagination.css +220 -220
  71. package/components/Panel/panel.css +72 -72
  72. package/components/Popover/popover.css +148 -148
  73. package/components/Progress/progress.css +80 -80
  74. package/components/ProgressStepper/progress-stepper.css +514 -514
  75. package/components/Radio/radio.css +44 -44
  76. package/components/Select/select.css +423 -423
  77. package/components/Sidebar/sidebar.css +166 -166
  78. package/components/SimpleList/simple-list.css +53 -53
  79. package/components/Skeleton/skeleton.css +112 -112
  80. package/components/SkipToContent/skip-to-content.css +8 -8
  81. package/components/Slider/slider.css +144 -144
  82. package/components/Spinner/spinner.css +36 -36
  83. package/components/Switch/switch.css +89 -89
  84. package/components/TabContent/tab-content.css +34 -34
  85. package/components/Table/table-grid.css +911 -911
  86. package/components/Table/table-scrollable.css +38 -38
  87. package/components/Table/table-tree-view.css +497 -497
  88. package/components/Table/table.css +660 -660
  89. package/components/Tabs/tabs.css +616 -616
  90. package/components/TextInputGroup/text-input-group.css +88 -88
  91. package/components/Tile/tile.css +68 -68
  92. package/components/Timestamp/timestamp.css +29 -29
  93. package/components/Title/title.css +87 -87
  94. package/components/ToggleGroup/toggle-group.css +86 -86
  95. package/components/Toolbar/toolbar.css +2279 -2279
  96. package/components/Tooltip/tooltip.css +85 -85
  97. package/components/TreeView/tree-view.css +363 -363
  98. package/components/Truncate/truncate.css +15 -15
  99. package/components/Wizard/wizard.css +272 -272
  100. package/docs/components/AboutModalBox/examples/AboutModalBox.md +11 -11
  101. package/docs/components/Accordion/examples/Accordion.md +188 -188
  102. package/docs/components/ActionList/examples/ActionList.md +55 -55
  103. package/docs/components/Alert/examples/Alert.md +222 -222
  104. package/docs/components/AppLauncher/deprecated/application-launcher.md +146 -146
  105. package/docs/components/Avatar/examples/Avatar.md +6 -6
  106. package/docs/components/BackToTop/examples/BackToTop.md +3 -3
  107. package/docs/components/Backdrop/examples/Backdrop.md +1 -1
  108. package/docs/components/BackgroundImage/examples/BackgroundImage.md +2 -2
  109. package/docs/components/Badge/examples/Badge.md +17 -17
  110. package/docs/components/Banner/examples/Banner.md +42 -42
  111. package/docs/components/Brand/examples/Brand.md +4 -4
  112. package/docs/components/Breadcrumb/examples/Breadcrumb.md +90 -90
  113. package/docs/components/Button/examples/Button.md +364 -364
  114. package/docs/components/CalendarMonth/examples/CalendarMonth.md +436 -436
  115. package/docs/components/Card/examples/Card.md +515 -515
  116. package/docs/components/Check/examples/Check.md +37 -37
  117. package/docs/components/Chip/examples/Chip.md +216 -216
  118. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +82 -82
  119. package/docs/components/CodeBlock/examples/CodeBlock.md +39 -39
  120. package/docs/components/CodeEditor/examples/CodeEditor.md +85 -85
  121. package/docs/components/Content/examples/Content.md +1 -1
  122. package/docs/components/ContextSelector/deprecated/context-selector.md +160 -160
  123. package/docs/components/DataList/examples/DataList.md +666 -666
  124. package/docs/components/DatePicker/examples/DatePicker.md +54 -54
  125. package/docs/components/DescriptionList/examples/DescriptionList.md +737 -737
  126. package/docs/components/Divider/examples/Divider.md +18 -18
  127. package/docs/components/DragDrop/examples/DragDrop.md +27 -27
  128. package/docs/components/Drawer/examples/Drawer.md +225 -225
  129. package/docs/components/Dropdown/deprecated/Dropdown.md +541 -541
  130. package/docs/components/DualListSelector/examples/DualListSelector.md +1012 -1012
  131. package/docs/components/EmptyState/examples/EmptyState.md +100 -100
  132. package/docs/components/ExpandableSection/examples/ExpandableSection.md +47 -47
  133. package/docs/components/FileUpload/examples/FileUpload.md +94 -94
  134. package/docs/components/Form/examples/Form.md +226 -226
  135. package/docs/components/FormControl/examples/FormControl.md +65 -65
  136. package/docs/components/HelperText/examples/HelperText.md +72 -72
  137. package/docs/components/Hint/examples/Hint.md +44 -44
  138. package/docs/components/Icon/examples/Icon.md +85 -85
  139. package/docs/components/InlineEdit/examples/InlineEdit.md +209 -209
  140. package/docs/components/InputGroup/examples/InputGroup.md +73 -73
  141. package/docs/components/JumpLinks/examples/JumpLinks.md +285 -285
  142. package/docs/components/Label/examples/Label.md +1717 -1717
  143. package/docs/components/List/examples/List.md +30 -30
  144. package/docs/components/LogViewer/examples/LogViewer.md +1785 -1785
  145. package/docs/components/Login/examples/Login.md +287 -287
  146. package/docs/components/Masthead/examples/masthead.md +39 -39
  147. package/docs/components/Menu/examples/Menu.md +2377 -2377
  148. package/docs/components/MenuToggle/examples/MenuToggle.md +242 -242
  149. package/docs/components/ModalBox/examples/ModalBox.md +119 -119
  150. package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +192 -192
  151. package/docs/components/Nav/examples/Navigation.md +856 -856
  152. package/docs/components/NotificationBadge/examples/NotificationBadge.md +42 -42
  153. package/docs/components/NotificationDrawer/examples/NotificationDrawer.md +659 -659
  154. package/docs/components/NumberInput/examples/NumberInput.md +127 -127
  155. package/docs/components/OptionsMenu/deprecated/options-menu.md +178 -178
  156. package/docs/components/OverflowMenu/examples/overflow-menu.md +97 -97
  157. package/docs/components/Page/deprecated/PageHeader.md +85 -85
  158. package/docs/components/Page/examples/Page.md +90 -90
  159. package/docs/components/Pagination/examples/Pagination.md +285 -285
  160. package/docs/components/Panel/examples/Panel.md +38 -38
  161. package/docs/components/Popover/examples/Popover.md +169 -169
  162. package/docs/components/Progress/examples/Progress.md +145 -145
  163. package/docs/components/ProgressStepper/examples/ProgressStepper.md +295 -295
  164. package/docs/components/Radio/examples/Radio.md +33 -33
  165. package/docs/components/Select/deprecated/Select.md +736 -736
  166. package/docs/components/Sidebar/examples/Sidebar.md +65 -65
  167. package/docs/components/SimpleList/examples/SimpleList.md +39 -39
  168. package/docs/components/Skeleton/examples/Skeleton.md +29 -29
  169. package/docs/components/SkipToContent/examples/SkipToContent.md +3 -3
  170. package/docs/components/Slider/examples/Slider.md +213 -213
  171. package/docs/components/Spinner/examples/Spinner.md +14 -14
  172. package/docs/components/Switch/examples/Switch.md +58 -58
  173. package/docs/components/TabContent/examples/TabContent.md +24 -24
  174. package/docs/components/Table/examples/Table.md +6982 -6982
  175. package/docs/components/Tabs/examples/Tabs.md +2114 -2114
  176. package/docs/components/TextInputGroup/examples/TextInputGroup.md +373 -373
  177. package/docs/components/Tile/examples/Tile.md +131 -131
  178. package/docs/components/Timestamp/examples/Timestamp.md +10 -10
  179. package/docs/components/Title/examples/Title.md +12 -12
  180. package/docs/components/ToggleGroup/examples/toggle-group.md +116 -116
  181. package/docs/components/Toolbar/examples/Toolbar.md +611 -611
  182. package/docs/components/Tooltip/examples/Tooltip.md +27 -27
  183. package/docs/components/TreeView/examples/TreeView.md +1166 -1166
  184. package/docs/components/Truncate/examples/Truncate.md +7 -7
  185. package/docs/components/Wizard/examples/Wizard.md +522 -522
  186. package/docs/demos/AboutModal/examples/AboutModal.md +106 -106
  187. package/docs/demos/Alert/examples/Alert.md +391 -391
  188. package/docs/demos/BackToTop/examples/BackToTop.md +175 -175
  189. package/docs/demos/Banner/examples/Banner.md +364 -364
  190. package/docs/demos/Button/examples/Button.md +50 -50
  191. package/docs/demos/Card/examples/Card.md +1054 -1054
  192. package/docs/demos/CardView/examples/CardView.md +378 -378
  193. package/docs/demos/ContextSelector/examples/ContextSelector.md +449 -449
  194. package/docs/demos/Dashboard/examples/Dashboard.md +541 -541
  195. package/docs/demos/DataList/examples/DataList.md +1148 -1148
  196. package/docs/demos/DescriptionList/examples/DescriptionList.md +544 -544
  197. package/docs/demos/Drawer/examples/Drawer.md +531 -531
  198. package/docs/demos/Form/examples/BasicForms.md +444 -444
  199. package/docs/demos/HelperText/examples/HelperText.md +51 -51
  200. package/docs/demos/JumpLinks/examples/JumpLinks.md +596 -596
  201. package/docs/demos/Masthead/examples/Masthead.md +763 -763
  202. package/docs/demos/Modal/examples/Modal.md +645 -645
  203. package/docs/demos/Nav/examples/Nav.md +649 -649
  204. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +1570 -1570
  205. package/docs/demos/Page/examples/Page.md +1330 -1330
  206. package/docs/demos/Page/examples/Penta.md +217 -217
  207. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +23 -23
  208. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +108 -108
  209. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +1890 -1890
  210. package/docs/demos/Skeleton/examples/Skeleton.md +176 -176
  211. package/docs/demos/Table/examples/Table.md +4580 -4580
  212. package/docs/demos/Tabs/examples/Tabs.md +1040 -1040
  213. package/docs/demos/Toolbar/examples/Toolbar.md +961 -961
  214. package/docs/demos/Wizard/examples/Wizard.md +1574 -1574
  215. package/docs/layouts/Bullseye/examples/Bullseye.md +2 -2
  216. package/docs/layouts/Flex/examples/Flex.md +290 -290
  217. package/docs/layouts/Gallery/examples/Gallery.md +48 -48
  218. package/docs/layouts/Grid/examples/Grid.md +121 -121
  219. package/docs/layouts/Level/examples/Level.md +11 -11
  220. package/docs/layouts/Split/examples/Split.md +23 -23
  221. package/docs/layouts/Stack/examples/Stack.md +8 -8
  222. package/docs/utilities/Accessibility/examples/Accessibility.md +3 -3
  223. package/docs/utilities/Alignment/examples/Alignment.md +4 -4
  224. package/docs/utilities/Display/examples/Display.md +16 -16
  225. package/docs/utilities/Flex/examples/Flex.md +53 -53
  226. package/docs/utilities/Float/examples/Float.md +2 -2
  227. package/docs/utilities/Spacing/examples/Spacing.md +16 -16
  228. package/layouts/Bullseye/bullseye.css +3 -3
  229. package/layouts/Flex/flex.css +1276 -1276
  230. package/layouts/Gallery/gallery.css +34 -34
  231. package/layouts/Grid/grid.css +531 -531
  232. package/layouts/Level/level.css +4 -4
  233. package/layouts/Split/split.css +6 -6
  234. package/layouts/Stack/stack.css +5 -5
  235. package/package.json +1 -1
  236. package/patternfly-addons.css +2989 -2989
  237. package/patternfly-base-no-globals-theme-dark-unversioned.css +269 -278
  238. package/patternfly-base-no-globals.css +284 -293
  239. package/patternfly-base-theme-dark-unversioned.css +271 -280
  240. package/patternfly-base.css +286 -295
  241. package/patternfly-charts-theme-dark-unversioned.css +66 -66
  242. package/patternfly-charts-theme-dark.css +66 -66
  243. package/patternfly-charts.css +320 -320
  244. package/patternfly-no-globals.css +20217 -20226
  245. package/patternfly-theme-dark-unversioned.css +20209 -20218
  246. package/patternfly.css +20219 -20228
  247. package/patternfly.min.css +1 -1
  248. package/patternfly.min.css.map +1 -1
  249. package/sass-utilities/_init.scss +1 -1
  250. package/utilities/Accessibility/accessibility.css +18 -18
  251. package/utilities/Alignment/alignment.css +24 -24
  252. package/utilities/BackgroundColor/BackgroundColor.css +252 -252
  253. package/utilities/BoxShadow/box-shadow.css +42 -42
  254. package/utilities/Display/display.css +54 -54
  255. package/utilities/Flex/flex.css +228 -228
  256. package/utilities/Float/float.css +12 -12
  257. package/utilities/Sizing/sizing.css +216 -216
  258. package/utilities/Spacing/spacing.css +1512 -1512
  259. package/utilities/Text/text.css +631 -631
package/docs/components/TextInputGroup/examples/TextInputGroup.md CHANGED
@@ -9,11 +9,11 @@ cssPrefix: pf-v5-c-text-input-group
9
9
  ### Basic
10
10
 
11
11
  ```html
12
- <div class="pf-v5-c-text-input-group">
13
- <div class="pf-v5-c-text-input-group__main">
14
- <span class="pf-v5-c-text-input-group__text">
12
+ <div class="pf-v6-c-text-input-group">
13
+ <div class="pf-v6-c-text-input-group__main">
14
+ <span class="pf-v6-c-text-input-group__text">
15
15
  <input
16
- class="pf-v5-c-text-input-group__text-input"
16
+ class="pf-v6-c-text-input-group__text-input"
17
17
  type="text"
18
18
  value
19
19
  aria-label="Type to filter"
@@ -27,11 +27,11 @@ cssPrefix: pf-v5-c-text-input-group
27
27
  ### Disabled
28
28
 
29
29
  ```html
30
- <div class="pf-v5-c-text-input-group pf-m-disabled">
31
- <div class="pf-v5-c-text-input-group__main">
32
- <span class="pf-v5-c-text-input-group__text">
30
+ <div class="pf-v6-c-text-input-group pf-m-disabled">
31
+ <div class="pf-v6-c-text-input-group__main">
32
+ <span class="pf-v6-c-text-input-group__text">
33
33
  <input
34
- class="pf-v5-c-text-input-group__text-input"
34
+ class="pf-v6-c-text-input-group__text-input"
35
35
  type="text"
36
36
  disabled
37
37
  value="Disabled"
@@ -46,14 +46,14 @@ cssPrefix: pf-v5-c-text-input-group
46
46
  ### Utilities and icon with placeholder text
47
47
 
48
48
  ```html
49
- <div class="pf-v5-c-text-input-group">
50
- <div class="pf-v5-c-text-input-group__main pf-m-icon">
51
- <span class="pf-v5-c-text-input-group__text">
52
- <span class="pf-v5-c-text-input-group__icon">
49
+ <div class="pf-v6-c-text-input-group">
50
+ <div class="pf-v6-c-text-input-group__main pf-m-icon">
51
+ <span class="pf-v6-c-text-input-group__text">
52
+ <span class="pf-v6-c-text-input-group__icon">
53
53
  <i class="fas fa-fw fa-search"></i>
54
54
  </span>
55
55
  <input
56
- class="pf-v5-c-text-input-group__text-input"
56
+ class="pf-v6-c-text-input-group__text-input"
57
57
  type="text"
58
58
  placeholder="placeholder"
59
59
  value
@@ -61,9 +61,9 @@ cssPrefix: pf-v5-c-text-input-group
61
61
  />
62
62
  </span>
63
63
  </div>
64
- <div class="pf-v5-c-text-input-group__utilities">
64
+ <div class="pf-v6-c-text-input-group__utilities">
65
65
  <button
66
- class="pf-v5-c-button pf-m-plain"
66
+ class="pf-v6-c-button pf-m-plain"
67
67
  type="button"
68
68
  aria-label="Clear input"
69
69
  >
@@ -77,26 +77,26 @@ cssPrefix: pf-v5-c-text-input-group
77
77
  ### Filters
78
78
 
79
79
  ```html
80
- <div class="pf-v5-c-text-input-group">
81
- <div class="pf-v5-c-text-input-group__main">
82
- <div class="pf-v5-c-chip-group" role="group">
83
- <div class="pf-v5-c-chip-group__main">
80
+ <div class="pf-v6-c-text-input-group">
81
+ <div class="pf-v6-c-text-input-group__main">
82
+ <div class="pf-v6-c-chip-group" role="group">
83
+ <div class="pf-v6-c-chip-group__main">
84
84
  <ul
85
- class="pf-v5-c-chip-group__list"
85
+ class="pf-v6-c-chip-group__list"
86
86
  role="list"
87
87
  aria-label="Chip group list"
88
88
  >
89
- <li class="pf-v5-c-chip-group__list-item">
90
- <div class="pf-v5-c-chip">
91
- <span class="pf-v5-c-chip__content">
89
+ <li class="pf-v6-c-chip-group__list-item">
90
+ <div class="pf-v6-c-chip">
91
+ <span class="pf-v6-c-chip__content">
92
92
  <span
93
- class="pf-v5-c-chip__text"
93
+ class="pf-v6-c-chip__text"
94
94
  id="text-input-group-filters-chip-group-chip_one_select_collapsed"
95
95
  >Chip one</span>
96
96
  </span>
97
- <span class="pf-v5-c-chip__actions">
97
+ <span class="pf-v6-c-chip__actions">
98
98
  <button
99
- class="pf-v5-c-button pf-m-plain"
99
+ class="pf-v6-c-button pf-m-plain"
100
100
  type="button"
101
101
  aria-labelledby="text-input-group-filters-chip-group-remove_chip_one_select_collapsed text-input-group-filters-chip-group-chip_one_select_collapsed"
102
102
  aria-label="Remove"
@@ -107,17 +107,17 @@ cssPrefix: pf-v5-c-text-input-group
107
107
  </span>
108
108
  </div>
109
109
  </li>
110
- <li class="pf-v5-c-chip-group__list-item">
111
- <div class="pf-v5-c-chip">
112
- <span class="pf-v5-c-chip__content">
110
+ <li class="pf-v6-c-chip-group__list-item">
111
+ <div class="pf-v6-c-chip">
112
+ <span class="pf-v6-c-chip__content">
113
113
  <span
114
- class="pf-v5-c-chip__text"
114
+ class="pf-v6-c-chip__text"
115
115
  id="text-input-group-filters-chip-group-chip_two_select_collapsed"
116
116
  >Chip two</span>
117
117
  </span>
118
- <span class="pf-v5-c-chip__actions">
118
+ <span class="pf-v6-c-chip__actions">
119
119
  <button
120
- class="pf-v5-c-button pf-m-plain"
120
+ class="pf-v6-c-button pf-m-plain"
121
121
  type="button"
122
122
  aria-labelledby="text-input-group-filters-chip-group-remove_chip_two_select_collapsed text-input-group-filters-chip-group-chip_two_select_collapsed"
123
123
  aria-label="Remove"
@@ -128,17 +128,17 @@ cssPrefix: pf-v5-c-text-input-group
128
128
  </span>
129
129
  </div>
130
130
  </li>
131
- <li class="pf-v5-c-chip-group__list-item">
132
- <div class="pf-v5-c-chip">
133
- <span class="pf-v5-c-chip__content">
131
+ <li class="pf-v6-c-chip-group__list-item">
132
+ <div class="pf-v6-c-chip">
133
+ <span class="pf-v6-c-chip__content">
134
134
  <span
135
- class="pf-v5-c-chip__text"
135
+ class="pf-v6-c-chip__text"
136
136
  id="text-input-group-filters-chip-group-chip_three_select_collapsed"
137
137
  >Chip three</span>
138
138
  </span>
139
- <span class="pf-v5-c-chip__actions">
139
+ <span class="pf-v6-c-chip__actions">
140
140
  <button
141
- class="pf-v5-c-button pf-m-plain"
141
+ class="pf-v6-c-button pf-m-plain"
142
142
  type="button"
143
143
  aria-labelledby="text-input-group-filters-chip-group-remove_chip_three_select_collapsed text-input-group-filters-chip-group-chip_three_select_collapsed"
144
144
  aria-label="Remove"
@@ -149,17 +149,17 @@ cssPrefix: pf-v5-c-text-input-group
149
149
  </span>
150
150
  </div>
151
151
  </li>
152
- <li class="pf-v5-c-chip-group__list-item">
153
- <div class="pf-v5-c-chip">
154
- <span class="pf-v5-c-chip__content">
152
+ <li class="pf-v6-c-chip-group__list-item">
153
+ <div class="pf-v6-c-chip">
154
+ <span class="pf-v6-c-chip__content">
155
155
  <span
156
- class="pf-v5-c-chip__text"
156
+ class="pf-v6-c-chip__text"
157
157
  id="text-input-group-filters-chip-group-chip_four_select_collapsed"
158
158
  >Chip four</span>
159
159
  </span>
160
- <span class="pf-v5-c-chip__actions">
160
+ <span class="pf-v6-c-chip__actions">
161
161
  <button
162
- class="pf-v5-c-button pf-m-plain"
162
+ class="pf-v6-c-button pf-m-plain"
163
163
  type="button"
164
164
  aria-labelledby="text-input-group-filters-chip-group-remove_chip_four_select_collapsed text-input-group-filters-chip-group-chip_four_select_collapsed"
165
165
  aria-label="Remove"
@@ -170,17 +170,17 @@ cssPrefix: pf-v5-c-text-input-group
170
170
  </span>
171
171
  </div>
172
172
  </li>
173
- <li class="pf-v5-c-chip-group__list-item">
174
- <div class="pf-v5-c-chip">
175
- <span class="pf-v5-c-chip__content">
173
+ <li class="pf-v6-c-chip-group__list-item">
174
+ <div class="pf-v6-c-chip">
175
+ <span class="pf-v6-c-chip__content">
176
176
  <span
177
- class="pf-v5-c-chip__text"
177
+ class="pf-v6-c-chip__text"
178
178
  id="text-input-group-filters-chip-group-chip_five_select_collapsed"
179
179
  >Chip five</span>
180
180
  </span>
181
- <span class="pf-v5-c-chip__actions">
181
+ <span class="pf-v6-c-chip__actions">
182
182
  <button
183
- class="pf-v5-c-button pf-m-plain"
183
+ class="pf-v6-c-button pf-m-plain"
184
184
  type="button"
185
185
  aria-labelledby="text-input-group-filters-chip-group-remove_chip_five_select_collapsed text-input-group-filters-chip-group-chip_five_select_collapsed"
186
186
  aria-label="Remove"
@@ -191,17 +191,17 @@ cssPrefix: pf-v5-c-text-input-group
191
191
  </span>
192
192
  </div>
193
193
  </li>
194
- <li class="pf-v5-c-chip-group__list-item">
195
- <div class="pf-v5-c-chip">
196
- <span class="pf-v5-c-chip__content">
194
+ <li class="pf-v6-c-chip-group__list-item">
195
+ <div class="pf-v6-c-chip">
196
+ <span class="pf-v6-c-chip__content">
197
197
  <span
198
- class="pf-v5-c-chip__text"
198
+ class="pf-v6-c-chip__text"
199
199
  id="text-input-group-filters-chip-group-chip_six_select_collapsed"
200
200
  >Chip six</span>
201
201
  </span>
202
- <span class="pf-v5-c-chip__actions">
202
+ <span class="pf-v6-c-chip__actions">
203
203
  <button
204
- class="pf-v5-c-button pf-m-plain"
204
+ class="pf-v6-c-button pf-m-plain"
205
205
  type="button"
206
206
  aria-labelledby="text-input-group-filters-chip-group-remove_chip_six_select_collapsed text-input-group-filters-chip-group-chip_six_select_collapsed"
207
207
  aria-label="Remove"
@@ -212,28 +212,28 @@ cssPrefix: pf-v5-c-text-input-group
212
212
  </span>
213
213
  </div>
214
214
  </li>
215
- <li class="pf-v5-c-chip-group__list-item">
216
- <button class="pf-v5-c-chip pf-m-overflow">
217
- <span class="pf-v5-c-chip__content">
218
- <span class="pf-v5-c-chip__text">8 more</span>
215
+ <li class="pf-v6-c-chip-group__list-item">
216
+ <button class="pf-v6-c-chip pf-m-overflow">
217
+ <span class="pf-v6-c-chip__content">
218
+ <span class="pf-v6-c-chip__text">8 more</span>
219
219
  </span>
220
220
  </button>
221
221
  </li>
222
222
  </ul>
223
223
  </div>
224
224
  </div>
225
- <span class="pf-v5-c-text-input-group__text">
225
+ <span class="pf-v6-c-text-input-group__text">
226
226
  <input
227
- class="pf-v5-c-text-input-group__text-input"
227
+ class="pf-v6-c-text-input-group__text-input"
228
228
  type="text"
229
229
  value
230
230
  aria-label="Type to filter"
231
231
  />
232
232
  </span>
233
233
  </div>
234
- <div class="pf-v5-c-text-input-group__utilities">
234
+ <div class="pf-v6-c-text-input-group__utilities">
235
235
  <button
236
- class="pf-v5-c-button pf-m-plain"
236
+ class="pf-v6-c-button pf-m-plain"
237
237
  type="button"
238
238
  aria-label="Clear input"
239
239
  >
@@ -247,26 +247,26 @@ cssPrefix: pf-v5-c-text-input-group
247
247
  ### Filters expanded
248
248
 
249
249
  ```html
250
- <div class="pf-v5-c-text-input-group">
251
- <div class="pf-v5-c-text-input-group__main">
252
- <div class="pf-v5-c-chip-group" role="group">
253
- <div class="pf-v5-c-chip-group__main">
250
+ <div class="pf-v6-c-text-input-group">
251
+ <div class="pf-v6-c-text-input-group__main">
252
+ <div class="pf-v6-c-chip-group" role="group">
253
+ <div class="pf-v6-c-chip-group__main">
254
254
  <ul
255
- class="pf-v5-c-chip-group__list"
255
+ class="pf-v6-c-chip-group__list"
256
256
  role="list"
257
257
  aria-label="Chip group list"
258
258
  >
259
- <li class="pf-v5-c-chip-group__list-item">
260
- <div class="pf-v5-c-chip">
261
- <span class="pf-v5-c-chip__content">
259
+ <li class="pf-v6-c-chip-group__list-item">
260
+ <div class="pf-v6-c-chip">
261
+ <span class="pf-v6-c-chip__content">
262
262
  <span
263
- class="pf-v5-c-chip__text"
263
+ class="pf-v6-c-chip__text"
264
264
  id="text-input-group-filters-expanded-chip-group-chip_one_select_collapsed"
265
265
  >Chip one</span>
266
266
  </span>
267
- <span class="pf-v5-c-chip__actions">
267
+ <span class="pf-v6-c-chip__actions">
268
268
  <button
269
- class="pf-v5-c-button pf-m-plain"
269
+ class="pf-v6-c-button pf-m-plain"
270
270
  type="button"
271
271
  aria-labelledby="text-input-group-filters-expanded-chip-group-remove_chip_one_select_collapsed text-input-group-filters-expanded-chip-group-chip_one_select_collapsed"
272
272
  aria-label="Remove"
@@ -277,17 +277,17 @@ cssPrefix: pf-v5-c-text-input-group
277
277
  </span>
278
278
  </div>
279
279
  </li>
280
- <li class="pf-v5-c-chip-group__list-item">
281
- <div class="pf-v5-c-chip">
282
- <span class="pf-v5-c-chip__content">
280
+ <li class="pf-v6-c-chip-group__list-item">
281
+ <div class="pf-v6-c-chip">
282
+ <span class="pf-v6-c-chip__content">
283
283
  <span
284
- class="pf-v5-c-chip__text"
284
+ class="pf-v6-c-chip__text"
285
285
  id="text-input-group-filters-expanded-chip-group-chip_two_select_collapsed"
286
286
  >Chip two</span>
287
287
  </span>
288
- <span class="pf-v5-c-chip__actions">
288
+ <span class="pf-v6-c-chip__actions">
289
289
  <button
290
- class="pf-v5-c-button pf-m-plain"
290
+ class="pf-v6-c-button pf-m-plain"
291
291
  type="button"
292
292
  aria-labelledby="text-input-group-filters-expanded-chip-group-remove_chip_two_select_collapsed text-input-group-filters-expanded-chip-group-chip_two_select_collapsed"
293
293
  aria-label="Remove"
@@ -298,17 +298,17 @@ cssPrefix: pf-v5-c-text-input-group
298
298
  </span>
299
299
  </div>
300
300
  </li>
301
- <li class="pf-v5-c-chip-group__list-item">
302
- <div class="pf-v5-c-chip">
303
- <span class="pf-v5-c-chip__content">
301
+ <li class="pf-v6-c-chip-group__list-item">
302
+ <div class="pf-v6-c-chip">
303
+ <span class="pf-v6-c-chip__content">
304
304
  <span
305
- class="pf-v5-c-chip__text"
305
+ class="pf-v6-c-chip__text"
306
306
  id="text-input-group-filters-expanded-chip-group-chip_three_select_collapsed"
307
307
  >Chip three</span>
308
308
  </span>
309
- <span class="pf-v5-c-chip__actions">
309
+ <span class="pf-v6-c-chip__actions">
310
310
  <button
311
- class="pf-v5-c-button pf-m-plain"
311
+ class="pf-v6-c-button pf-m-plain"
312
312
  type="button"
313
313
  aria-labelledby="text-input-group-filters-expanded-chip-group-remove_chip_three_select_collapsed text-input-group-filters-expanded-chip-group-chip_three_select_collapsed"
314
314
  aria-label="Remove"
@@ -319,17 +319,17 @@ cssPrefix: pf-v5-c-text-input-group
319
319
  </span>
320
320
  </div>
321
321
  </li>
322
- <li class="pf-v5-c-chip-group__list-item">
323
- <div class="pf-v5-c-chip">
324
- <span class="pf-v5-c-chip__content">
322
+ <li class="pf-v6-c-chip-group__list-item">
323
+ <div class="pf-v6-c-chip">
324
+ <span class="pf-v6-c-chip__content">
325
325
  <span
326
- class="pf-v5-c-chip__text"
326
+ class="pf-v6-c-chip__text"
327
327
  id="text-input-group-filters-expanded-chip-group-chip_four_select_collapsed"
328
328
  >Chip four</span>
329
329
  </span>
330
- <span class="pf-v5-c-chip__actions">
330
+ <span class="pf-v6-c-chip__actions">
331
331
  <button
332
- class="pf-v5-c-button pf-m-plain"
332
+ class="pf-v6-c-button pf-m-plain"
333
333
  type="button"
334
334
  aria-labelledby="text-input-group-filters-expanded-chip-group-remove_chip_four_select_collapsed text-input-group-filters-expanded-chip-group-chip_four_select_collapsed"
335
335
  aria-label="Remove"
@@ -340,17 +340,17 @@ cssPrefix: pf-v5-c-text-input-group
340
340
  </span>
341
341
  </div>
342
342
  </li>
343
- <li class="pf-v5-c-chip-group__list-item">
344
- <div class="pf-v5-c-chip">
345
- <span class="pf-v5-c-chip__content">
343
+ <li class="pf-v6-c-chip-group__list-item">
344
+ <div class="pf-v6-c-chip">
345
+ <span class="pf-v6-c-chip__content">
346
346
  <span
347
- class="pf-v5-c-chip__text"
347
+ class="pf-v6-c-chip__text"
348
348
  id="text-input-group-filters-expanded-chip-group-chip_five_select_collapsed"
349
349
  >Chip five</span>
350
350
  </span>
351
- <span class="pf-v5-c-chip__actions">
351
+ <span class="pf-v6-c-chip__actions">
352
352
  <button
353
- class="pf-v5-c-button pf-m-plain"
353
+ class="pf-v6-c-button pf-m-plain"
354
354
  type="button"
355
355
  aria-labelledby="text-input-group-filters-expanded-chip-group-remove_chip_five_select_collapsed text-input-group-filters-expanded-chip-group-chip_five_select_collapsed"
356
356
  aria-label="Remove"
@@ -361,17 +361,17 @@ cssPrefix: pf-v5-c-text-input-group
361
361
  </span>
362
362
  </div>
363
363
  </li>
364
- <li class="pf-v5-c-chip-group__list-item">
365
- <div class="pf-v5-c-chip">
366
- <span class="pf-v5-c-chip__content">
364
+ <li class="pf-v6-c-chip-group__list-item">
365
+ <div class="pf-v6-c-chip">
366
+ <span class="pf-v6-c-chip__content">
367
367
  <span
368
- class="pf-v5-c-chip__text"
368
+ class="pf-v6-c-chip__text"
369
369
  id="text-input-group-filters-expanded-chip-group-chip_six_select_collapsed"
370
370
  >Chip six</span>
371
371
  </span>
372
- <span class="pf-v5-c-chip__actions">
372
+ <span class="pf-v6-c-chip__actions">
373
373
  <button
374
- class="pf-v5-c-button pf-m-plain"
374
+ class="pf-v6-c-button pf-m-plain"
375
375
  type="button"
376
376
  aria-labelledby="text-input-group-filters-expanded-chip-group-remove_chip_six_select_collapsed text-input-group-filters-expanded-chip-group-chip_six_select_collapsed"
377
377
  aria-label="Remove"
@@ -382,17 +382,17 @@ cssPrefix: pf-v5-c-text-input-group
382
382
  </span>
383
383
  </div>
384
384
  </li>
385
- <li class="pf-v5-c-chip-group__list-item">
386
- <div class="pf-v5-c-chip">
387
- <span class="pf-v5-c-chip__content">
385
+ <li class="pf-v6-c-chip-group__list-item">
386
+ <div class="pf-v6-c-chip">
387
+ <span class="pf-v6-c-chip__content">
388
388
  <span
389
- class="pf-v5-c-chip__text"
389
+ class="pf-v6-c-chip__text"
390
390
  id="text-input-group-filters-expanded-chip-group-chip_seven_select_collapsed"
391
391
  >Chip seven</span>
392
392
  </span>
393
- <span class="pf-v5-c-chip__actions">
393
+ <span class="pf-v6-c-chip__actions">
394
394
  <button
395
- class="pf-v5-c-button pf-m-plain"
395
+ class="pf-v6-c-button pf-m-plain"
396
396
  type="button"
397
397
  aria-labelledby="text-input-group-filters-expanded-chip-group-remove_chip_seven_select_collapsed text-input-group-filters-expanded-chip-group-chip_seven_select_collapsed"
398
398
  aria-label="Remove"
@@ -403,17 +403,17 @@ cssPrefix: pf-v5-c-text-input-group
403
403
  </span>
404
404
  </div>
405
405
  </li>
406
- <li class="pf-v5-c-chip-group__list-item">
407
- <div class="pf-v5-c-chip">
408
- <span class="pf-v5-c-chip__content">
406
+ <li class="pf-v6-c-chip-group__list-item">
407
+ <div class="pf-v6-c-chip">
408
+ <span class="pf-v6-c-chip__content">
409
409
  <span
410
- class="pf-v5-c-chip__text"
410
+ class="pf-v6-c-chip__text"
411
411
  id="text-input-group-filters-expanded-chip-group-chip_eight_select_collapsed"
412
412
  >Chip eight</span>
413
413
  </span>
414
- <span class="pf-v5-c-chip__actions">
414
+ <span class="pf-v6-c-chip__actions">
415
415
  <button
416
- class="pf-v5-c-button pf-m-plain"
416
+ class="pf-v6-c-button pf-m-plain"
417
417
  type="button"
418
418
  aria-labelledby="text-input-group-filters-expanded-chip-group-remove_chip_eight_select_collapsed text-input-group-filters-expanded-chip-group-chip_eight_select_collapsed"
419
419
  aria-label="Remove"
@@ -424,17 +424,17 @@ cssPrefix: pf-v5-c-text-input-group
424
424
  </span>
425
425
  </div>
426
426
  </li>
427
- <li class="pf-v5-c-chip-group__list-item">
428
- <div class="pf-v5-c-chip">
429
- <span class="pf-v5-c-chip__content">
427
+ <li class="pf-v6-c-chip-group__list-item">
428
+ <div class="pf-v6-c-chip">
429
+ <span class="pf-v6-c-chip__content">
430
430
  <span
431
- class="pf-v5-c-chip__text"
431
+ class="pf-v6-c-chip__text"
432
432
  id="text-input-group-filters-expanded-chip-group-chip_nine_select_collapsed"
433
433
  >Chip nine</span>
434
434
  </span>
435
- <span class="pf-v5-c-chip__actions">
435
+ <span class="pf-v6-c-chip__actions">
436
436
  <button
437
- class="pf-v5-c-button pf-m-plain"
437
+ class="pf-v6-c-button pf-m-plain"
438
438
  type="button"
439
439
  aria-labelledby="text-input-group-filters-expanded-chip-group-remove_chip_nine_select_collapsed text-input-group-filters-expanded-chip-group-chip_nine_select_collapsed"
440
440
  aria-label="Remove"
@@ -445,17 +445,17 @@ cssPrefix: pf-v5-c-text-input-group
445
445
  </span>
446
446
  </div>
447
447
  </li>
448
- <li class="pf-v5-c-chip-group__list-item">
449
- <div class="pf-v5-c-chip">
450
- <span class="pf-v5-c-chip__content">
448
+ <li class="pf-v6-c-chip-group__list-item">
449
+ <div class="pf-v6-c-chip">
450
+ <span class="pf-v6-c-chip__content">
451
451
  <span
452
- class="pf-v5-c-chip__text"
452
+ class="pf-v6-c-chip__text"
453
453
  id="text-input-group-filters-expanded-chip-group-chip_ten_select_collapsed"
454
454
  >Chip ten</span>
455
455
  </span>
456
- <span class="pf-v5-c-chip__actions">
456
+ <span class="pf-v6-c-chip__actions">
457
457
  <button
458
- class="pf-v5-c-button pf-m-plain"
458
+ class="pf-v6-c-button pf-m-plain"
459
459
  type="button"
460
460
  aria-labelledby="text-input-group-filters-expanded-chip-group-remove_chip_ten_select_collapsed text-input-group-filters-expanded-chip-group-chip_ten_select_collapsed"
461
461
  aria-label="Remove"
@@ -466,17 +466,17 @@ cssPrefix: pf-v5-c-text-input-group
466
466
  </span>
467
467
  </div>
468
468
  </li>
469
- <li class="pf-v5-c-chip-group__list-item">
470
- <div class="pf-v5-c-chip">
471
- <span class="pf-v5-c-chip__content">
469
+ <li class="pf-v6-c-chip-group__list-item">
470
+ <div class="pf-v6-c-chip">
471
+ <span class="pf-v6-c-chip__content">
472
472
  <span
473
- class="pf-v5-c-chip__text"
473
+ class="pf-v6-c-chip__text"
474
474
  id="text-input-group-filters-expanded-chip-group-chip_eleven_select_collapsed"
475
475
  >Chip eleven</span>
476
476
  </span>
477
- <span class="pf-v5-c-chip__actions">
477
+ <span class="pf-v6-c-chip__actions">
478
478
  <button
479
- class="pf-v5-c-button pf-m-plain"
479
+ class="pf-v6-c-button pf-m-plain"
480
480
  type="button"
481
481
  aria-labelledby="text-input-group-filters-expanded-chip-group-remove_chip_eleven_select_collapsed text-input-group-filters-expanded-chip-group-chip_eleven_select_collapsed"
482
482
  aria-label="Remove"
@@ -487,17 +487,17 @@ cssPrefix: pf-v5-c-text-input-group
487
487
  </span>
488
488
  </div>
489
489
  </li>
490
- <li class="pf-v5-c-chip-group__list-item">
491
- <div class="pf-v5-c-chip">
492
- <span class="pf-v5-c-chip__content">
490
+ <li class="pf-v6-c-chip-group__list-item">
491
+ <div class="pf-v6-c-chip">
492
+ <span class="pf-v6-c-chip__content">
493
493
  <span
494
- class="pf-v5-c-chip__text"
494
+ class="pf-v6-c-chip__text"
495
495
  id="text-input-group-filters-expanded-chip-group-chip_twelve_select_collapsed"
496
496
  >Chip twelve</span>
497
497
  </span>
498
- <span class="pf-v5-c-chip__actions">
498
+ <span class="pf-v6-c-chip__actions">
499
499
  <button
500
- class="pf-v5-c-button pf-m-plain"
500
+ class="pf-v6-c-button pf-m-plain"
501
501
  type="button"
502
502
  aria-labelledby="text-input-group-filters-expanded-chip-group-remove_chip_twelve_select_collapsed text-input-group-filters-expanded-chip-group-chip_twelve_select_collapsed"
503
503
  aria-label="Remove"
@@ -508,17 +508,17 @@ cssPrefix: pf-v5-c-text-input-group
508
508
  </span>
509
509
  </div>
510
510
  </li>
511
- <li class="pf-v5-c-chip-group__list-item">
512
- <div class="pf-v5-c-chip">
513
- <span class="pf-v5-c-chip__content">
511
+ <li class="pf-v6-c-chip-group__list-item">
512
+ <div class="pf-v6-c-chip">
513
+ <span class="pf-v6-c-chip__content">
514
514
  <span
515
- class="pf-v5-c-chip__text"
515
+ class="pf-v6-c-chip__text"
516
516
  id="text-input-group-filters-expanded-chip-group-chip_thirteen_select_collapsed"
517
517
  >Chip thirteen</span>
518
518
  </span>
519
- <span class="pf-v5-c-chip__actions">
519
+ <span class="pf-v6-c-chip__actions">
520
520
  <button
521
- class="pf-v5-c-button pf-m-plain"
521
+ class="pf-v6-c-button pf-m-plain"
522
522
  type="button"
523
523
  aria-labelledby="text-input-group-filters-expanded-chip-group-remove_chip_thirteen_select_collapsed text-input-group-filters-expanded-chip-group-chip_thirteen_select_collapsed"
524
524
  aria-label="Remove"
@@ -529,17 +529,17 @@ cssPrefix: pf-v5-c-text-input-group
529
529
  </span>
530
530
  </div>
531
531
  </li>
532
- <li class="pf-v5-c-chip-group__list-item">
533
- <div class="pf-v5-c-chip">
534
- <span class="pf-v5-c-chip__content">
532
+ <li class="pf-v6-c-chip-group__list-item">
533
+ <div class="pf-v6-c-chip">
534
+ <span class="pf-v6-c-chip__content">
535
535
  <span
536
- class="pf-v5-c-chip__text"
536
+ class="pf-v6-c-chip__text"
537
537
  id="text-input-group-filters-expanded-chip-group-chip_fourteen_select_collapsed"
538
538
  >Chip fourteen</span>
539
539
  </span>
540
- <span class="pf-v5-c-chip__actions">
540
+ <span class="pf-v6-c-chip__actions">
541
541
  <button
542
- class="pf-v5-c-button pf-m-plain"
542
+ class="pf-v6-c-button pf-m-plain"
543
543
  type="button"
544
544
  aria-labelledby="text-input-group-filters-expanded-chip-group-remove_chip_fourteen_select_collapsed text-input-group-filters-expanded-chip-group-chip_fourteen_select_collapsed"
545
545
  aria-label="Remove"
@@ -553,18 +553,18 @@ cssPrefix: pf-v5-c-text-input-group
553
553
  </ul>
554
554
  </div>
555
555
  </div>
556
- <span class="pf-v5-c-text-input-group__text">
556
+ <span class="pf-v6-c-text-input-group__text">
557
557
  <input
558
- class="pf-v5-c-text-input-group__text-input"
558
+ class="pf-v6-c-text-input-group__text-input"
559
559
  type="text"
560
560
  value
561
561
  aria-label="Type to filter"
562
562
  />
563
563
  </span>
564
564
  </div>
565
- <div class="pf-v5-c-text-input-group__utilities">
565
+ <div class="pf-v6-c-text-input-group__utilities">
566
566
  <button
567
- class="pf-v5-c-button pf-m-plain"
567
+ class="pf-v6-c-button pf-m-plain"
568
568
  type="button"
569
569
  aria-label="Clear input"
570
570
  >
@@ -578,18 +578,18 @@ cssPrefix: pf-v5-c-text-input-group
578
578
  ### Autocomplete last option hint
579
579
 
580
580
  ```html
581
- <div class="pf-v5-c-text-input-group">
582
- <div class="pf-v5-c-text-input-group__main">
583
- <span class="pf-v5-c-text-input-group__text">
581
+ <div class="pf-v6-c-text-input-group">
582
+ <div class="pf-v6-c-text-input-group__main">
583
+ <span class="pf-v6-c-text-input-group__text">
584
584
  <input
585
- class="pf-v5-c-text-input-group__text-input pf-m-hint"
585
+ class="pf-v6-c-text-input-group__text-input pf-m-hint"
586
586
  type="text"
587
587
  value="appleseed"
588
588
  disabled
589
589
  aria-hidden="true"
590
590
  />
591
591
  <input
592
- class="pf-v5-c-text-input-group__text-input"
592
+ class="pf-v6-c-text-input-group__text-input"
593
593
  type="text"
594
594
  value="apples"
595
595
  aria-label="Type to filter"
@@ -603,14 +603,14 @@ cssPrefix: pf-v5-c-text-input-group
603
603
  ### Search input group
604
604
 
605
605
  ```html
606
- <div class="pf-v5-c-text-input-group">
607
- <div class="pf-v5-c-text-input-group__main pf-m-icon">
608
- <span class="pf-v5-c-text-input-group__text">
609
- <span class="pf-v5-c-text-input-group__icon">
606
+ <div class="pf-v6-c-text-input-group">
607
+ <div class="pf-v6-c-text-input-group__main pf-m-icon">
608
+ <span class="pf-v6-c-text-input-group__text">
609
+ <span class="pf-v6-c-text-input-group__icon">
610
610
  <i class="fas fa-fw fa-search"></i>
611
611
  </span>
612
612
  <input
613
- class="pf-v5-c-text-input-group__text-input"
613
+ class="pf-v6-c-text-input-group__text-input"
614
614
  type="text"
615
615
  placeholder="Find by name"
616
616
  value
@@ -625,14 +625,14 @@ cssPrefix: pf-v5-c-text-input-group
625
625
  ### Search input group, no match
626
626
 
627
627
  ```html
628
- <div class="pf-v5-c-text-input-group">
629
- <div class="pf-v5-c-text-input-group__main pf-m-icon">
630
- <span class="pf-v5-c-text-input-group__text">
631
- <span class="pf-v5-c-text-input-group__icon">
628
+ <div class="pf-v6-c-text-input-group">
629
+ <div class="pf-v6-c-text-input-group__main pf-m-icon">
630
+ <span class="pf-v6-c-text-input-group__text">
631
+ <span class="pf-v6-c-text-input-group__icon">
632
632
  <i class="fas fa-fw fa-search"></i>
633
633
  </span>
634
634
  <input
635
- class="pf-v5-c-text-input-group__text-input"
635
+ class="pf-v6-c-text-input-group__text-input"
636
636
  type="text"
637
637
  placeholder="Find by name"
638
638
  value="Joh"
@@ -640,9 +640,9 @@ cssPrefix: pf-v5-c-text-input-group
640
640
  />
641
641
  </span>
642
642
  </div>
643
- <div class="pf-v5-c-text-input-group__utilities">
643
+ <div class="pf-v6-c-text-input-group__utilities">
644
644
  <button
645
- class="pf-v5-c-button pf-m-plain"
645
+ class="pf-v6-c-button pf-m-plain"
646
646
  type="button"
647
647
  aria-label="Clear input"
648
648
  >
@@ -656,14 +656,14 @@ cssPrefix: pf-v5-c-text-input-group
656
656
  ### Search input group, match with result count
657
657
 
658
658
  ```html
659
- <div class="pf-v5-c-text-input-group">
660
- <div class="pf-v5-c-text-input-group__main pf-m-icon">
661
- <span class="pf-v5-c-text-input-group__text">
662
- <span class="pf-v5-c-text-input-group__icon">
659
+ <div class="pf-v6-c-text-input-group">
660
+ <div class="pf-v6-c-text-input-group__main pf-m-icon">
661
+ <span class="pf-v6-c-text-input-group__text">
662
+ <span class="pf-v6-c-text-input-group__icon">
663
663
  <i class="fas fa-fw fa-search"></i>
664
664
  </span>
665
665
  <input
666
- class="pf-v5-c-text-input-group__text-input"
666
+ class="pf-v6-c-text-input-group__text-input"
667
667
  type="text"
668
668
  placeholder="Find by name"
669
669
  value="John Doe"
@@ -671,10 +671,10 @@ cssPrefix: pf-v5-c-text-input-group
671
671
  />
672
672
  </span>
673
673
  </div>
674
- <div class="pf-v5-c-text-input-group__utilities">
675
- <span class="pf-v5-c-badge pf-m-read">3</span>
674
+ <div class="pf-v6-c-text-input-group__utilities">
675
+ <span class="pf-v6-c-badge pf-m-read">3</span>
676
676
  <button
677
- class="pf-v5-c-button pf-m-plain"
677
+ class="pf-v6-c-button pf-m-plain"
678
678
  type="button"
679
679
  aria-label="Clear input"
680
680
  >
@@ -688,14 +688,14 @@ cssPrefix: pf-v5-c-text-input-group
688
688
  ### Search input group, match with navigable options
689
689
 
690
690
  ```html
691
- <div class="pf-v5-c-text-input-group">
692
- <div class="pf-v5-c-text-input-group__main pf-m-icon">
693
- <span class="pf-v5-c-text-input-group__text">
694
- <span class="pf-v5-c-text-input-group__icon">
691
+ <div class="pf-v6-c-text-input-group">
692
+ <div class="pf-v6-c-text-input-group__main pf-m-icon">
693
+ <span class="pf-v6-c-text-input-group__text">
694
+ <span class="pf-v6-c-text-input-group__icon">
695
695
  <i class="fas fa-fw fa-search"></i>
696
696
  </span>
697
697
  <input
698
- class="pf-v5-c-text-input-group__text-input"
698
+ class="pf-v6-c-text-input-group__text-input"
699
699
  type="text"
700
700
  placeholder="Find by name"
701
701
  value="John Doe"
@@ -703,10 +703,10 @@ cssPrefix: pf-v5-c-text-input-group
703
703
  />
704
704
  </span>
705
705
  </div>
706
- <div class="pf-v5-c-text-input-group__utilities">
707
- <span class="pf-v5-c-badge pf-m-read">1 / 3</span>
706
+ <div class="pf-v6-c-text-input-group__utilities">
707
+ <span class="pf-v6-c-badge pf-m-read">1 / 3</span>
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="Clear input"
712
712
  >
@@ -722,10 +722,10 @@ cssPrefix: pf-v5-c-text-input-group
722
722
  ```html
723
723
  <h3>Collapsed</h3>
724
724
  <br />
725
- <div class="pf-v5-c-input-group pf-m-plain">
726
- <div class="pf-v5-c-input-group__item pf-m-plain">
725
+ <div class="pf-v6-c-input-group pf-m-plain">
726
+ <div class="pf-v6-c-input-group__item pf-m-plain">
727
727
  <button
728
- class="pf-v5-c-button pf-m-plain"
728
+ class="pf-v6-c-button pf-m-plain"
729
729
  type="button"
730
730
  aria-label="Open search"
731
731
  >
@@ -737,16 +737,16 @@ cssPrefix: pf-v5-c-text-input-group
737
737
  <br />
738
738
  <h3>Expanded</h3>
739
739
  <br />
740
- <div class="pf-v5-c-input-group pf-m-plain">
741
- <div class="pf-v5-c-input-group__item pf-m-fill">
742
- <div class="pf-v5-c-text-input-group">
743
- <div class="pf-v5-c-text-input-group__main pf-m-icon">
744
- <span class="pf-v5-c-text-input-group__text">
745
- <span class="pf-v5-c-text-input-group__icon">
740
+ <div class="pf-v6-c-input-group pf-m-plain">
741
+ <div class="pf-v6-c-input-group__item pf-m-fill">
742
+ <div class="pf-v6-c-text-input-group">
743
+ <div class="pf-v6-c-text-input-group__main pf-m-icon">
744
+ <span class="pf-v6-c-text-input-group__text">
745
+ <span class="pf-v6-c-text-input-group__icon">
746
746
  <i class="fas fa-fw fa-search"></i>
747
747
  </span>
748
748
  <input
749
- class="pf-v5-c-text-input-group__text-input"
749
+ class="pf-v6-c-text-input-group__text-input"
750
750
  type="text"
751
751
  placeholder="Search"
752
752
  value
@@ -756,8 +756,8 @@ cssPrefix: pf-v5-c-text-input-group
756
756
  </div>
757
757
  </div>
758
758
  </div>
759
- <div class="pf-v5-c-input-group__item pf-m-plain">
760
- <button class="pf-v5-c-button pf-m-plain" type="button" aria-label="Close">
759
+ <div class="pf-v6-c-input-group__item pf-m-plain">
760
+ <button class="pf-v6-c-button pf-m-plain" type="button" aria-label="Close">
761
761
  <i class="fas fa-times" aria-hidden="true"></i>
762
762
  </button>
763
763
  </div>
@@ -768,16 +768,16 @@ cssPrefix: pf-v5-c-text-input-group
768
768
  ### Search input group, with submit button
769
769
 
770
770
  ```html
771
- <div class="pf-v5-c-input-group">
772
- <div class="pf-v5-c-input-group__item pf-m-fill">
773
- <div class="pf-v5-c-text-input-group">
774
- <div class="pf-v5-c-text-input-group__main pf-m-icon">
775
- <span class="pf-v5-c-text-input-group__text">
776
- <span class="pf-v5-c-text-input-group__icon">
771
+ <div class="pf-v6-c-input-group">
772
+ <div class="pf-v6-c-input-group__item pf-m-fill">
773
+ <div class="pf-v6-c-text-input-group">
774
+ <div class="pf-v6-c-text-input-group__main pf-m-icon">
775
+ <span class="pf-v6-c-text-input-group__text">
776
+ <span class="pf-v6-c-text-input-group__icon">
777
777
  <i class="fas fa-fw fa-search"></i>
778
778
  </span>
779
779
  <input
780
- class="pf-v5-c-text-input-group__text-input"
780
+ class="pf-v6-c-text-input-group__text-input"
781
781
  type="text"
782
782
  placeholder="Find by name"
783
783
  value
@@ -787,9 +787,9 @@ cssPrefix: pf-v5-c-text-input-group
787
787
  </div>
788
788
  </div>
789
789
  </div>
790
- <div class="pf-v5-c-input-group__item">
790
+ <div class="pf-v6-c-input-group__item">
791
791
  <button
792
- class="pf-v5-c-button pf-m-control"
792
+ class="pf-v6-c-button pf-m-control"
793
793
  type="submit"
794
794
  aria-label="Search"
795
795
  >
@@ -803,25 +803,25 @@ cssPrefix: pf-v5-c-text-input-group
803
803
  ### Search input group, advanced search
804
804
 
805
805
  ```html
806
- <div class="pf-v5-c-input-group">
807
- <div class="pf-v5-c-input-group__item pf-m-fill">
808
- <div class="pf-v5-c-text-input-group">
809
- <div class="pf-v5-c-text-input-group__main pf-m-icon">
810
- <span class="pf-v5-c-text-input-group__text">
811
- <span class="pf-v5-c-text-input-group__icon">
806
+ <div class="pf-v6-c-input-group">
807
+ <div class="pf-v6-c-input-group__item pf-m-fill">
808
+ <div class="pf-v6-c-text-input-group">
809
+ <div class="pf-v6-c-text-input-group__main pf-m-icon">
810
+ <span class="pf-v6-c-text-input-group__text">
811
+ <span class="pf-v6-c-text-input-group__icon">
812
812
  <i class="fas fa-fw fa-search"></i>
813
813
  </span>
814
814
  <input
815
- class="pf-v5-c-text-input-group__text-input"
815
+ class="pf-v6-c-text-input-group__text-input"
816
816
  type="text"
817
817
  value="username:root firstname:ned"
818
818
  aria-label="Search input"
819
819
  />
820
820
  </span>
821
821
  </div>
822
- <div class="pf-v5-c-text-input-group__utilities">
822
+ <div class="pf-v6-c-text-input-group__utilities">
823
823
  <button
824
- class="pf-v5-c-button pf-m-plain"
824
+ class="pf-v6-c-button pf-m-plain"
825
825
  type="button"
826
826
  aria-label="Clear input"
827
827
  >
@@ -830,9 +830,9 @@ cssPrefix: pf-v5-c-text-input-group
830
830
  </div>
831
831
  </div>
832
832
  </div>
833
- <div class="pf-v5-c-input-group__item">
833
+ <div class="pf-v6-c-input-group__item">
834
834
  <button
835
- class="pf-v5-c-button pf-m-control"
835
+ class="pf-v6-c-button pf-m-control"
836
836
  type="button"
837
837
  aria-expanded="false"
838
838
  aria-label="Advanced search"
@@ -840,9 +840,9 @@ cssPrefix: pf-v5-c-text-input-group
840
840
  <i class="fas fa-caret-down" aria-hidden="true"></i>
841
841
  </button>
842
842
  </div>
843
- <div class="pf-v5-c-input-group__item">
843
+ <div class="pf-v6-c-input-group__item">
844
844
  <button
845
- class="pf-v5-c-button pf-m-control"
845
+ class="pf-v6-c-button pf-m-control"
846
846
  type="submit"
847
847
  aria-label="Search"
848
848
  >
@@ -856,25 +856,25 @@ cssPrefix: pf-v5-c-text-input-group
856
856
  ### Search input group, advanced search expanded
857
857
 
858
858
  ```html
859
- <div class="pf-v5-c-input-group">
860
- <div class="pf-v5-c-input-group__item pf-m-fill">
861
- <div class="pf-v5-c-text-input-group">
862
- <div class="pf-v5-c-text-input-group__main pf-m-icon">
863
- <span class="pf-v5-c-text-input-group__text">
864
- <span class="pf-v5-c-text-input-group__icon">
859
+ <div class="pf-v6-c-input-group">
860
+ <div class="pf-v6-c-input-group__item pf-m-fill">
861
+ <div class="pf-v6-c-text-input-group">
862
+ <div class="pf-v6-c-text-input-group__main pf-m-icon">
863
+ <span class="pf-v6-c-text-input-group__text">
864
+ <span class="pf-v6-c-text-input-group__icon">
865
865
  <i class="fas fa-fw fa-search"></i>
866
866
  </span>
867
867
  <input
868
- class="pf-v5-c-text-input-group__text-input"
868
+ class="pf-v6-c-text-input-group__text-input"
869
869
  type="text"
870
870
  value="username:root firstname:ned"
871
871
  aria-label="Search input"
872
872
  />
873
873
  </span>
874
874
  </div>
875
- <div class="pf-v5-c-text-input-group__utilities">
875
+ <div class="pf-v6-c-text-input-group__utilities">
876
876
  <button
877
- class="pf-v5-c-button pf-m-plain"
877
+ class="pf-v6-c-button pf-m-plain"
878
878
  type="button"
879
879
  aria-label="Clear input"
880
880
  >
@@ -883,9 +883,9 @@ cssPrefix: pf-v5-c-text-input-group
883
883
  </div>
884
884
  </div>
885
885
  </div>
886
- <div class="pf-v5-c-input-group__item">
886
+ <div class="pf-v6-c-input-group__item">
887
887
  <button
888
- class="pf-v5-c-button pf-m-control pf-m-expanded"
888
+ class="pf-v6-c-button pf-m-control pf-m-expanded"
889
889
  type="button"
890
890
  aria-expanded="true"
891
891
  aria-label="Advanced search"
@@ -893,9 +893,9 @@ cssPrefix: pf-v5-c-text-input-group
893
893
  <i class="fas fa-caret-down" aria-hidden="true"></i>
894
894
  </button>
895
895
  </div>
896
- <div class="pf-v5-c-input-group__item">
896
+ <div class="pf-v6-c-input-group__item">
897
897
  <button
898
- class="pf-v5-c-button pf-m-control"
898
+ class="pf-v6-c-button pf-m-control"
899
899
  type="submit"
900
900
  aria-label="Search"
901
901
  >
@@ -904,19 +904,19 @@ cssPrefix: pf-v5-c-text-input-group
904
904
  </div>
905
905
  </div>
906
906
 
907
- <div class="pf-v5-c-panel pf-m-raised">
908
- <div class="pf-v5-c-panel__main">
909
- <div class="pf-v5-c-panel__main-body">
910
- <form class="pf-v5-c-form" novalidate>
911
- <div class="pf-v5-c-form__group">
912
- <div class="pf-v5-c-form__group-label"><label
913
- class="pf-v5-c-form__label"
907
+ <div class="pf-v6-c-panel pf-m-raised">
908
+ <div class="pf-v6-c-panel__main">
909
+ <div class="pf-v6-c-panel__main-body">
910
+ <form class="pf-v6-c-form" novalidate>
911
+ <div class="pf-v6-c-form__group">
912
+ <div class="pf-v6-c-form__group-label"><label
913
+ class="pf-v6-c-form__label"
914
914
  for="text-input-group-advanced-search-input-expanded-legacy-form-example-username"
915
915
  >
916
- <span class="pf-v5-c-form__label-text">Username</span></label>
916
+ <span class="pf-v6-c-form__label-text">Username</span></label>
917
917
  </div>
918
- <div class="pf-v5-c-form__group-control">
919
- <span class="pf-v5-c-form-control">
918
+ <div class="pf-v6-c-form__group-control">
919
+ <span class="pf-v6-c-form-control">
920
920
  <input
921
921
  type="text"
922
922
  value="root"
@@ -926,15 +926,15 @@ cssPrefix: pf-v5-c-text-input-group
926
926
  </span>
927
927
  </div>
928
928
  </div>
929
- <div class="pf-v5-c-form__group">
930
- <div class="pf-v5-c-form__group-label"><label
931
- class="pf-v5-c-form__label"
929
+ <div class="pf-v6-c-form__group">
930
+ <div class="pf-v6-c-form__group-label"><label
931
+ class="pf-v6-c-form__label"
932
932
  for="text-input-group-advanced-search-input-expanded-legacy-form-example-firstname"
933
933
  >
934
- <span class="pf-v5-c-form__label-text">First name</span></label>
934
+ <span class="pf-v6-c-form__label-text">First name</span></label>
935
935
  </div>
936
- <div class="pf-v5-c-form__group-control">
937
- <span class="pf-v5-c-form-control">
936
+ <div class="pf-v6-c-form__group-control">
937
+ <span class="pf-v6-c-form-control">
938
938
  <input
939
939
  type="text"
940
940
  value="ned"
@@ -944,15 +944,15 @@ cssPrefix: pf-v5-c-text-input-group
944
944
  </span>
945
945
  </div>
946
946
  </div>
947
- <div class="pf-v5-c-form__group">
948
- <div class="pf-v5-c-form__group-label"><label
949
- class="pf-v5-c-form__label"
947
+ <div class="pf-v6-c-form__group">
948
+ <div class="pf-v6-c-form__group-label"><label
949
+ class="pf-v6-c-form__label"
950
950
  for="text-input-group-advanced-search-input-expanded-legacy-form-example-group"
951
951
  >
952
- <span class="pf-v5-c-form__label-text">Group</span></label>
952
+ <span class="pf-v6-c-form__label-text">Group</span></label>
953
953
  </div>
954
- <div class="pf-v5-c-form__group-control">
955
- <span class="pf-v5-c-form-control">
954
+ <div class="pf-v6-c-form__group-control">
955
+ <span class="pf-v6-c-form-control">
956
956
  <input
957
957
  type="text"
958
958
  id="text-input-group-advanced-search-input-expanded-legacy-form-example-group"
@@ -961,15 +961,15 @@ cssPrefix: pf-v5-c-text-input-group
961
961
  </span>
962
962
  </div>
963
963
  </div>
964
- <div class="pf-v5-c-form__group">
965
- <div class="pf-v5-c-form__group-label"><label
966
- class="pf-v5-c-form__label"
964
+ <div class="pf-v6-c-form__group">
965
+ <div class="pf-v6-c-form__group-label"><label
966
+ class="pf-v6-c-form__label"
967
967
  for="text-input-group-advanced-search-input-expanded-legacy-form-example-email"
968
968
  >
969
- <span class="pf-v5-c-form__label-text">Email</span></label>
969
+ <span class="pf-v6-c-form__label-text">Email</span></label>
970
970
  </div>
971
- <div class="pf-v5-c-form__group-control">
972
- <span class="pf-v5-c-form-control">
971
+ <div class="pf-v6-c-form__group-control">
972
+ <span class="pf-v6-c-form-control">
973
973
  <input
974
974
  type="text"
975
975
  id="text-input-group-advanced-search-input-expanded-legacy-form-example-email"
@@ -978,10 +978,10 @@ cssPrefix: pf-v5-c-text-input-group
978
978
  </span>
979
979
  </div>
980
980
  </div>
981
- <div class="pf-v5-c-form__group pf-m-action">
982
- <div class="pf-v5-c-form__actions">
983
- <button class="pf-v5-c-button pf-m-primary" type="submit">Submit</button>
984
- <button class="pf-v5-c-button pf-m-link" type="reset">Reset</button>
981
+ <div class="pf-v6-c-form__group pf-m-action">
982
+ <div class="pf-v6-c-form__actions">
983
+ <button class="pf-v6-c-button pf-m-primary" type="submit">Submit</button>
984
+ <button class="pf-v6-c-button pf-m-link" type="reset">Reset</button>
985
985
  </div>
986
986
  </div>
987
987
  </form>
@@ -994,23 +994,23 @@ cssPrefix: pf-v5-c-text-input-group
994
994
  ### Search input group, autocomplete
995
995
 
996
996
  ```html
997
- <div class="pf-v5-c-text-input-group">
998
- <div class="pf-v5-c-text-input-group__main pf-m-icon">
999
- <span class="pf-v5-c-text-input-group__text">
1000
- <span class="pf-v5-c-text-input-group__icon">
997
+ <div class="pf-v6-c-text-input-group">
998
+ <div class="pf-v6-c-text-input-group__main pf-m-icon">
999
+ <span class="pf-v6-c-text-input-group__text">
1000
+ <span class="pf-v6-c-text-input-group__icon">
1001
1001
  <i class="fas fa-fw fa-search"></i>
1002
1002
  </span>
1003
1003
  <input
1004
- class="pf-v5-c-text-input-group__text-input"
1004
+ class="pf-v6-c-text-input-group__text-input"
1005
1005
  type="text"
1006
1006
  value="app"
1007
1007
  aria-label="Search input"
1008
1008
  />
1009
1009
  </span>
1010
1010
  </div>
1011
- <div class="pf-v5-c-text-input-group__utilities">
1011
+ <div class="pf-v6-c-text-input-group__utilities">
1012
1012
  <button
1013
- class="pf-v5-c-button pf-m-plain"
1013
+ class="pf-v6-c-button pf-m-plain"
1014
1014
  type="button"
1015
1015
  aria-label="Clear input"
1016
1016
  >
@@ -1019,34 +1019,34 @@ cssPrefix: pf-v5-c-text-input-group
1019
1019
  </div>
1020
1020
  </div>
1021
1021
 
1022
- <div class="pf-v5-c-menu">
1023
- <div class="pf-v5-c-menu__content">
1024
- <ul class="pf-v5-c-menu__list" role="menu">
1025
- <li class="pf-v5-c-menu__list-item" role="none">
1026
- <button class="pf-v5-c-menu__item" type="button" role="menuitem">
1027
- <span class="pf-v5-c-menu__item-main">
1028
- <span class="pf-v5-c-menu__item-text">apple</span>
1022
+ <div class="pf-v6-c-menu">
1023
+ <div class="pf-v6-c-menu__content">
1024
+ <ul class="pf-v6-c-menu__list" role="menu">
1025
+ <li class="pf-v6-c-menu__list-item" role="none">
1026
+ <button class="pf-v6-c-menu__item" type="button" role="menuitem">
1027
+ <span class="pf-v6-c-menu__item-main">
1028
+ <span class="pf-v6-c-menu__item-text">apple</span>
1029
1029
  </span>
1030
1030
  </button>
1031
1031
  </li>
1032
- <li class="pf-v5-c-menu__list-item" role="none">
1033
- <button class="pf-v5-c-menu__item" type="button" role="menuitem">
1034
- <span class="pf-v5-c-menu__item-main">
1035
- <span class="pf-v5-c-menu__item-text">appleby</span>
1032
+ <li class="pf-v6-c-menu__list-item" role="none">
1033
+ <button class="pf-v6-c-menu__item" type="button" role="menuitem">
1034
+ <span class="pf-v6-c-menu__item-main">
1035
+ <span class="pf-v6-c-menu__item-text">appleby</span>
1036
1036
  </span>
1037
1037
  </button>
1038
1038
  </li>
1039
- <li class="pf-v5-c-menu__list-item" role="none">
1040
- <button class="pf-v5-c-menu__item" type="button" role="menuitem">
1041
- <span class="pf-v5-c-menu__item-main">
1042
- <span class="pf-v5-c-menu__item-text">appleseed</span>
1039
+ <li class="pf-v6-c-menu__list-item" role="none">
1040
+ <button class="pf-v6-c-menu__item" type="button" role="menuitem">
1041
+ <span class="pf-v6-c-menu__item-main">
1042
+ <span class="pf-v6-c-menu__item-text">appleseed</span>
1043
1043
  </span>
1044
1044
  </button>
1045
1045
  </li>
1046
- <li class="pf-v5-c-menu__list-item" role="none">
1047
- <button class="pf-v5-c-menu__item" type="button" role="menuitem">
1048
- <span class="pf-v5-c-menu__item-main">
1049
- <span class="pf-v5-c-menu__item-text">appleton</span>
1046
+ <li class="pf-v6-c-menu__list-item" role="none">
1047
+ <button class="pf-v6-c-menu__item" type="button" role="menuitem">
1048
+ <span class="pf-v6-c-menu__item-main">
1049
+ <span class="pf-v6-c-menu__item-text">appleton</span>
1050
1050
  </span>
1051
1051
  </button>
1052
1052
  </li>
@@ -1059,14 +1059,14 @@ cssPrefix: pf-v5-c-text-input-group
1059
1059
  ### Search input group, autocomplete last option hint
1060
1060
 
1061
1061
  ```html
1062
- <div class="pf-v5-c-text-input-group">
1063
- <div class="pf-v5-c-text-input-group__main pf-m-icon">
1064
- <span class="pf-v5-c-text-input-group__text">
1065
- <span class="pf-v5-c-text-input-group__icon">
1062
+ <div class="pf-v6-c-text-input-group">
1063
+ <div class="pf-v6-c-text-input-group__main pf-m-icon">
1064
+ <span class="pf-v6-c-text-input-group__text">
1065
+ <span class="pf-v6-c-text-input-group__icon">
1066
1066
  <i class="fas fa-fw fa-search"></i>
1067
1067
  </span>
1068
1068
  <input
1069
- class="pf-v5-c-text-input-group__text-input pf-m-hint"
1069
+ class="pf-v6-c-text-input-group__text-input pf-m-hint"
1070
1070
  type="text"
1071
1071
  value="appleseed"
1072
1072
  disabled
@@ -1074,9 +1074,9 @@ cssPrefix: pf-v5-c-text-input-group
1074
1074
  />
1075
1075
  </span>
1076
1076
  </div>
1077
- <div class="pf-v5-c-text-input-group__utilities">
1077
+ <div class="pf-v6-c-text-input-group__utilities">
1078
1078
  <button
1079
- class="pf-v5-c-button pf-m-plain"
1079
+ class="pf-v6-c-button pf-m-plain"
1080
1080
  type="button"
1081
1081
  aria-label="Clear input"
1082
1082
  >
@@ -1085,13 +1085,13 @@ cssPrefix: pf-v5-c-text-input-group
1085
1085
  </div>
1086
1086
  </div>
1087
1087
 
1088
- <div class="pf-v5-c-menu">
1089
- <div class="pf-v5-c-menu__content">
1090
- <ul class="pf-v5-c-menu__list" role="menu">
1091
- <li class="pf-v5-c-menu__list-item" role="none">
1092
- <button class="pf-v5-c-menu__item" type="button" role="menuitem">
1093
- <span class="pf-v5-c-menu__item-main">
1094
- <span class="pf-v5-c-menu__item-text">appleseed</span>
1088
+ <div class="pf-v6-c-menu">
1089
+ <div class="pf-v6-c-menu__content">
1090
+ <ul class="pf-v6-c-menu__list" role="menu">
1091
+ <li class="pf-v6-c-menu__list-item" role="none">
1092
+ <button class="pf-v6-c-menu__item" type="button" role="menuitem">
1093
+ <span class="pf-v6-c-menu__item-main">
1094
+ <span class="pf-v6-c-menu__item-text">appleseed</span>
1095
1095
  </span>
1096
1096
  </button>
1097
1097
  </li>
@@ -1105,25 +1105,25 @@ cssPrefix: pf-v5-c-text-input-group
1105
1105
 
1106
1106
  ```html
1107
1107
  <div class="ws-example-wrapper">
1108
- <div class="pf-v5-c-input-group">
1109
- <div class="pf-v5-c-input-group__item pf-m-fill">
1110
- <div class="pf-v5-c-text-input-group">
1111
- <div class="pf-v5-c-text-input-group__main pf-m-icon">
1112
- <span class="pf-v5-c-text-input-group__text">
1113
- <span class="pf-v5-c-text-input-group__icon">
1108
+ <div class="pf-v6-c-input-group">
1109
+ <div class="pf-v6-c-input-group__item pf-m-fill">
1110
+ <div class="pf-v6-c-text-input-group">
1111
+ <div class="pf-v6-c-text-input-group__main pf-m-icon">
1112
+ <span class="pf-v6-c-text-input-group__text">
1113
+ <span class="pf-v6-c-text-input-group__icon">
1114
1114
  <i class="fas fa-fw fa-search"></i>
1115
1115
  </span>
1116
1116
  <input
1117
- class="pf-v5-c-text-input-group__text-input"
1117
+ class="pf-v6-c-text-input-group__text-input"
1118
1118
  type="text"
1119
1119
  value="username:root firstname:n"
1120
1120
  aria-label="Search input"
1121
1121
  />
1122
1122
  </span>
1123
1123
  </div>
1124
- <div class="pf-v5-c-text-input-group__utilities">
1124
+ <div class="pf-v6-c-text-input-group__utilities">
1125
1125
  <button
1126
- class="pf-v5-c-button pf-m-plain"
1126
+ class="pf-v6-c-button pf-m-plain"
1127
1127
  type="button"
1128
1128
  aria-label="Clear input"
1129
1129
  >
@@ -1132,9 +1132,9 @@ cssPrefix: pf-v5-c-text-input-group
1132
1132
  </div>
1133
1133
  </div>
1134
1134
  </div>
1135
- <div class="pf-v5-c-input-group__item">
1135
+ <div class="pf-v6-c-input-group__item">
1136
1136
  <button
1137
- class="pf-v5-c-button pf-m-control pf-m-expanded"
1137
+ class="pf-v6-c-button pf-m-control pf-m-expanded"
1138
1138
  type="button"
1139
1139
  aria-expanded="true"
1140
1140
  aria-label="Advanced search"
@@ -1142,9 +1142,9 @@ cssPrefix: pf-v5-c-text-input-group
1142
1142
  <i class="fas fa-caret-down" aria-hidden="true"></i>
1143
1143
  </button>
1144
1144
  </div>
1145
- <div class="pf-v5-c-input-group__item">
1145
+ <div class="pf-v6-c-input-group__item">
1146
1146
  <button
1147
- class="pf-v5-c-button pf-m-control"
1147
+ class="pf-v6-c-button pf-m-control"
1148
1148
  type="submit"
1149
1149
  aria-label="Search"
1150
1150
  >
@@ -1153,19 +1153,19 @@ cssPrefix: pf-v5-c-text-input-group
1153
1153
  </div>
1154
1154
  </div>
1155
1155
 
1156
- <div class="pf-v5-c-panel pf-m-raised">
1157
- <div class="pf-v5-c-panel__main">
1158
- <div class="pf-v5-c-panel__main-body">
1159
- <form class="pf-v5-c-form" novalidate>
1160
- <div class="pf-v5-c-form__group">
1161
- <div class="pf-v5-c-form__group-label"><label
1162
- class="pf-v5-c-form__label"
1156
+ <div class="pf-v6-c-panel pf-m-raised">
1157
+ <div class="pf-v6-c-panel__main">
1158
+ <div class="pf-v6-c-panel__main-body">
1159
+ <form class="pf-v6-c-form" novalidate>
1160
+ <div class="pf-v6-c-form__group">
1161
+ <div class="pf-v6-c-form__group-label"><label
1162
+ class="pf-v6-c-form__label"
1163
1163
  for="text-input-group-advanced-search-input-form-with-autocomplete-example-username"
1164
1164
  >
1165
- <span class="pf-v5-c-form__label-text">Username</span></label>
1165
+ <span class="pf-v6-c-form__label-text">Username</span></label>
1166
1166
  </div>
1167
- <div class="pf-v5-c-form__group-control">
1168
- <span class="pf-v5-c-form-control">
1167
+ <div class="pf-v6-c-form__group-control">
1168
+ <span class="pf-v6-c-form-control">
1169
1169
  <input
1170
1170
  type="text"
1171
1171
  value="root"
@@ -1175,15 +1175,15 @@ cssPrefix: pf-v5-c-text-input-group
1175
1175
  </span>
1176
1176
  </div>
1177
1177
  </div>
1178
- <div class="pf-v5-c-form__group">
1179
- <div class="pf-v5-c-form__group-label"><label
1180
- class="pf-v5-c-form__label"
1178
+ <div class="pf-v6-c-form__group">
1179
+ <div class="pf-v6-c-form__group-label"><label
1180
+ class="pf-v6-c-form__label"
1181
1181
  for="text-input-group-advanced-search-input-form-with-autocomplete-example-firstname"
1182
1182
  >
1183
- <span class="pf-v5-c-form__label-text">First name</span></label>
1183
+ <span class="pf-v6-c-form__label-text">First name</span></label>
1184
1184
  </div>
1185
- <div class="pf-v5-c-form__group-control">
1186
- <span class="pf-v5-c-form-control">
1185
+ <div class="pf-v6-c-form__group-control">
1186
+ <span class="pf-v6-c-form-control">
1187
1187
  <input
1188
1188
  type="text"
1189
1189
  value="ned"
@@ -1193,15 +1193,15 @@ cssPrefix: pf-v5-c-text-input-group
1193
1193
  </span>
1194
1194
  </div>
1195
1195
  </div>
1196
- <div class="pf-v5-c-form__group">
1197
- <div class="pf-v5-c-form__group-label"><label
1198
- class="pf-v5-c-form__label"
1196
+ <div class="pf-v6-c-form__group">
1197
+ <div class="pf-v6-c-form__group-label"><label
1198
+ class="pf-v6-c-form__label"
1199
1199
  for="text-input-group-advanced-search-input-form-with-autocomplete-example-group"
1200
1200
  >
1201
- <span class="pf-v5-c-form__label-text">Group</span></label>
1201
+ <span class="pf-v6-c-form__label-text">Group</span></label>
1202
1202
  </div>
1203
- <div class="pf-v5-c-form__group-control">
1204
- <span class="pf-v5-c-form-control">
1203
+ <div class="pf-v6-c-form__group-control">
1204
+ <span class="pf-v6-c-form-control">
1205
1205
  <input
1206
1206
  type="text"
1207
1207
  id="text-input-group-advanced-search-input-form-with-autocomplete-example-group"
@@ -1210,15 +1210,15 @@ cssPrefix: pf-v5-c-text-input-group
1210
1210
  </span>
1211
1211
  </div>
1212
1212
  </div>
1213
- <div class="pf-v5-c-form__group">
1214
- <div class="pf-v5-c-form__group-label"><label
1215
- class="pf-v5-c-form__label"
1213
+ <div class="pf-v6-c-form__group">
1214
+ <div class="pf-v6-c-form__group-label"><label
1215
+ class="pf-v6-c-form__label"
1216
1216
  for="text-input-group-advanced-search-input-form-with-autocomplete-example-email"
1217
1217
  >
1218
- <span class="pf-v5-c-form__label-text">Email</span></label>
1218
+ <span class="pf-v6-c-form__label-text">Email</span></label>
1219
1219
  </div>
1220
- <div class="pf-v5-c-form__group-control">
1221
- <span class="pf-v5-c-form-control">
1220
+ <div class="pf-v6-c-form__group-control">
1221
+ <span class="pf-v6-c-form-control">
1222
1222
  <input
1223
1223
  type="text"
1224
1224
  id="text-input-group-advanced-search-input-form-with-autocomplete-example-email"
@@ -1227,10 +1227,10 @@ cssPrefix: pf-v5-c-text-input-group
1227
1227
  </span>
1228
1228
  </div>
1229
1229
  </div>
1230
- <div class="pf-v5-c-form__group pf-m-action">
1231
- <div class="pf-v5-c-form__actions">
1232
- <button class="pf-v5-c-button pf-m-primary" type="submit">Submit</button>
1233
- <button class="pf-v5-c-button pf-m-link" type="reset">Reset</button>
1230
+ <div class="pf-v6-c-form__group pf-m-action">
1231
+ <div class="pf-v6-c-form__actions">
1232
+ <button class="pf-v6-c-button pf-m-primary" type="submit">Submit</button>
1233
+ <button class="pf-v6-c-button pf-m-link" type="reset">Reset</button>
1234
1234
  </div>
1235
1235
  </div>
1236
1236
  </form>
@@ -1238,34 +1238,34 @@ cssPrefix: pf-v5-c-text-input-group
1238
1238
  </div>
1239
1239
  </div>
1240
1240
 
1241
- <div class="pf-v5-c-menu">
1242
- <div class="pf-v5-c-menu__content">
1243
- <ul class="pf-v5-c-menu__list" role="menu">
1244
- <li class="pf-v5-c-menu__list-item" role="none">
1245
- <button class="pf-v5-c-menu__item" type="button" role="menuitem">
1246
- <span class="pf-v5-c-menu__item-main">
1247
- <span class="pf-v5-c-menu__item-text">nancy</span>
1241
+ <div class="pf-v6-c-menu">
1242
+ <div class="pf-v6-c-menu__content">
1243
+ <ul class="pf-v6-c-menu__list" role="menu">
1244
+ <li class="pf-v6-c-menu__list-item" role="none">
1245
+ <button class="pf-v6-c-menu__item" type="button" role="menuitem">
1246
+ <span class="pf-v6-c-menu__item-main">
1247
+ <span class="pf-v6-c-menu__item-text">nancy</span>
1248
1248
  </span>
1249
1249
  </button>
1250
1250
  </li>
1251
- <li class="pf-v5-c-menu__list-item" role="none">
1252
- <button class="pf-v5-c-menu__item" type="button" role="menuitem">
1253
- <span class="pf-v5-c-menu__item-main">
1254
- <span class="pf-v5-c-menu__item-text">ned</span>
1251
+ <li class="pf-v6-c-menu__list-item" role="none">
1252
+ <button class="pf-v6-c-menu__item" type="button" role="menuitem">
1253
+ <span class="pf-v6-c-menu__item-main">
1254
+ <span class="pf-v6-c-menu__item-text">ned</span>
1255
1255
  </span>
1256
1256
  </button>
1257
1257
  </li>
1258
- <li class="pf-v5-c-menu__list-item" role="none">
1259
- <button class="pf-v5-c-menu__item" type="button" role="menuitem">
1260
- <span class="pf-v5-c-menu__item-main">
1261
- <span class="pf-v5-c-menu__item-text">neil</span>
1258
+ <li class="pf-v6-c-menu__list-item" role="none">
1259
+ <button class="pf-v6-c-menu__item" type="button" role="menuitem">
1260
+ <span class="pf-v6-c-menu__item-main">
1261
+ <span class="pf-v6-c-menu__item-text">neil</span>
1262
1262
  </span>
1263
1263
  </button>
1264
1264
  </li>
1265
- <li class="pf-v5-c-menu__list-item" role="none">
1266
- <button class="pf-v5-c-menu__item" type="button" role="menuitem">
1267
- <span class="pf-v5-c-menu__item-main">
1268
- <span class="pf-v5-c-menu__item-text">nicole</span>
1265
+ <li class="pf-v6-c-menu__list-item" role="none">
1266
+ <button class="pf-v6-c-menu__item" type="button" role="menuitem">
1267
+ <span class="pf-v6-c-menu__item-main">
1268
+ <span class="pf-v6-c-menu__item-text">nicole</span>
1269
1269
  </span>
1270
1270
  </button>
1271
1271
  </li>