@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/OptionsMenu/deprecated/options-menu.md CHANGED
@@ -11,47 +11,47 @@ deprecated: true
11
11
  ### Single option
12
12
 
13
13
  ```html
14
- <div class="pf-v5-c-options-menu">
14
+ <div class="pf-v6-c-options-menu">
15
15
  <button
16
- class="pf-v5-c-options-menu__toggle"
16
+ class="pf-v6-c-options-menu__toggle"
17
17
  type="button"
18
18
  id="options-menu-single-example-toggle"
19
19
  aria-haspopup="listbox"
20
20
  aria-expanded="false"
21
21
  >
22
- <span class="pf-v5-c-options-menu__toggle-text">Options menu</span>
23
- <div class="pf-v5-c-options-menu__toggle-icon">
22
+ <span class="pf-v6-c-options-menu__toggle-text">Options menu</span>
23
+ <div class="pf-v6-c-options-menu__toggle-icon">
24
24
  <i class="fas fa-caret-down" aria-hidden="true"></i>
25
25
  </div>
26
26
  </button>
27
27
  <ul
28
- class="pf-v5-c-options-menu__menu"
28
+ class="pf-v6-c-options-menu__menu"
29
29
  role="menu"
30
30
  aria-labelledby="options-menu-single-example-toggle"
31
31
  hidden
32
32
  >
33
33
  <li role="none">
34
34
  <button
35
- class="pf-v5-c-options-menu__menu-item"
35
+ class="pf-v6-c-options-menu__menu-item"
36
36
  type="button"
37
37
  role="menuitem"
38
38
  >Option 1</button>
39
39
  </li>
40
40
  <li role="none">
41
41
  <button
42
- class="pf-v5-c-options-menu__menu-item"
42
+ class="pf-v6-c-options-menu__menu-item"
43
43
  type="button"
44
44
  role="menuitem"
45
45
  >
46
46
  Option 2
47
- <div class="pf-v5-c-options-menu__menu-item-icon">
47
+ <div class="pf-v6-c-options-menu__menu-item-icon">
48
48
  <i class="fas fa-check" aria-hidden="true"></i>
49
49
  </div>
50
50
  </button>
51
51
  </li>
52
52
  <li role="none">
53
53
  <button
54
- class="pf-v5-c-options-menu__menu-item"
54
+ class="pf-v6-c-options-menu__menu-item"
55
55
  type="button"
56
56
  role="menuitem"
57
57
  >Option 3</button>
@@ -59,46 +59,46 @@ deprecated: true
59
59
  </ul>
60
60
  </div>
61
61
 
62
- <div class="pf-v5-c-options-menu pf-m-expanded">
62
+ <div class="pf-v6-c-options-menu pf-m-expanded">
63
63
  <button
64
- class="pf-v5-c-options-menu__toggle"
64
+ class="pf-v6-c-options-menu__toggle"
65
65
  type="button"
66
66
  id="options-menu-single-expanded-example-toggle"
67
67
  aria-haspopup="listbox"
68
68
  aria-expanded="true"
69
69
  >
70
- <span class="pf-v5-c-options-menu__toggle-text">Options menu</span>
71
- <div class="pf-v5-c-options-menu__toggle-icon">
70
+ <span class="pf-v6-c-options-menu__toggle-text">Options menu</span>
71
+ <div class="pf-v6-c-options-menu__toggle-icon">
72
72
  <i class="fas fa-caret-down" aria-hidden="true"></i>
73
73
  </div>
74
74
  </button>
75
75
  <ul
76
- class="pf-v5-c-options-menu__menu"
76
+ class="pf-v6-c-options-menu__menu"
77
77
  role="menu"
78
78
  aria-labelledby="options-menu-single-expanded-example-toggle"
79
79
  >
80
80
  <li role="none">
81
81
  <button
82
- class="pf-v5-c-options-menu__menu-item"
82
+ class="pf-v6-c-options-menu__menu-item"
83
83
  type="button"
84
84
  role="menuitem"
85
85
  >Option 1</button>
86
86
  </li>
87
87
  <li role="none">
88
88
  <button
89
- class="pf-v5-c-options-menu__menu-item"
89
+ class="pf-v6-c-options-menu__menu-item"
90
90
  type="button"
91
91
  role="menuitem"
92
92
  >
93
93
  Option 2
94
- <div class="pf-v5-c-options-menu__menu-item-icon">
94
+ <div class="pf-v6-c-options-menu__menu-item-icon">
95
95
  <i class="fas fa-check" aria-hidden="true"></i>
96
96
  </div>
97
97
  </button>
98
98
  </li>
99
99
  <li role="none">
100
100
  <button
101
- class="pf-v5-c-options-menu__menu-item"
101
+ class="pf-v6-c-options-menu__menu-item"
102
102
  type="button"
103
103
  role="menuitem"
104
104
  >Option 3</button>
@@ -111,17 +111,17 @@ deprecated: true
111
111
  ### Disabled
112
112
 
113
113
  ```html
114
- <div class="pf-v5-c-options-menu">
114
+ <div class="pf-v6-c-options-menu">
115
115
  <button
116
- class="pf-v5-c-options-menu__toggle"
116
+ class="pf-v6-c-options-menu__toggle"
117
117
  type="button"
118
118
  id="options-menu-single-disabled-example-toggle"
119
119
  aria-haspopup="listbox"
120
120
  aria-expanded="false"
121
121
  disabled
122
122
  >
123
- <span class="pf-v5-c-options-menu__toggle-text">Disabled options menu</span>
124
- <div class="pf-v5-c-options-menu__toggle-icon">
123
+ <span class="pf-v6-c-options-menu__toggle-text">Disabled options menu</span>
124
+ <div class="pf-v6-c-options-menu__toggle-icon">
125
125
  <i class="fas fa-caret-down" aria-hidden="true"></i>
126
126
  </div>
127
127
  </button>
@@ -132,49 +132,49 @@ deprecated: true
132
132
  ### Multiple options
133
133
 
134
134
  ```html
135
- <div class="pf-v5-c-options-menu">
135
+ <div class="pf-v6-c-options-menu">
136
136
  <button
137
- class="pf-v5-c-options-menu__toggle"
137
+ class="pf-v6-c-options-menu__toggle"
138
138
  type="button"
139
139
  id="options-menu-multiple-example-toggle"
140
140
  aria-haspopup="listbox"
141
141
  aria-expanded="false"
142
142
  >
143
- <span class="pf-v5-c-options-menu__toggle-text">Sort by</span>
144
- <div class="pf-v5-c-options-menu__toggle-icon">
143
+ <span class="pf-v6-c-options-menu__toggle-text">Sort by</span>
144
+ <div class="pf-v6-c-options-menu__toggle-icon">
145
145
  <i class="fas fa-caret-down" aria-hidden="true"></i>
146
146
  </div>
147
147
  </button>
148
148
  <div
149
- class="pf-v5-c-options-menu__menu"
149
+ class="pf-v6-c-options-menu__menu"
150
150
  role="menu"
151
151
  aria-labelledby="options-menu-multiple-example-toggle"
152
152
  hidden
153
153
  >
154
- <section class="pf-v5-c-options-menu__group" role="none">
154
+ <section class="pf-v6-c-options-menu__group" role="none">
155
155
  <ul role="group" aria-label="Sort by">
156
156
  <li role="none">
157
157
  <button
158
- class="pf-v5-c-options-menu__menu-item"
158
+ class="pf-v6-c-options-menu__menu-item"
159
159
  type="button"
160
160
  role="menuitem"
161
161
  >Name</button>
162
162
  </li>
163
163
  <li role="none">
164
164
  <button
165
- class="pf-v5-c-options-menu__menu-item"
165
+ class="pf-v6-c-options-menu__menu-item"
166
166
  type="button"
167
167
  role="menuitem"
168
168
  >
169
169
  Date
170
- <div class="pf-v5-c-options-menu__menu-item-icon">
170
+ <div class="pf-v6-c-options-menu__menu-item-icon">
171
171
  <i class="fas fa-check" aria-hidden="true"></i>
172
172
  </div>
173
173
  </button>
174
174
  </li>
175
175
  <li role="none">
176
176
  <button
177
- class="pf-v5-c-options-menu__menu-item"
177
+ class="pf-v6-c-options-menu__menu-item"
178
178
  type="button"
179
179
  role="menuitem"
180
180
  disabled
@@ -182,31 +182,31 @@ deprecated: true
182
182
  </li>
183
183
  <li role="none">
184
184
  <button
185
- class="pf-v5-c-options-menu__menu-item"
185
+ class="pf-v6-c-options-menu__menu-item"
186
186
  type="button"
187
187
  role="menuitem"
188
188
  >Size</button>
189
189
  </li>
190
190
  </ul>
191
191
  </section>
192
- <li class="pf-v5-c-divider" role="separator"></li>
193
- <section class="pf-v5-c-options-menu__group" role="none">
192
+ <li class="pf-v6-c-divider" role="separator"></li>
193
+ <section class="pf-v6-c-options-menu__group" role="none">
194
194
  <ul role="group" aria-label="Sort direction">
195
195
  <li role="none">
196
196
  <button
197
- class="pf-v5-c-options-menu__menu-item"
197
+ class="pf-v6-c-options-menu__menu-item"
198
198
  type="button"
199
199
  role="menuitem"
200
200
  >
201
201
  Ascending
202
- <div class="pf-v5-c-options-menu__menu-item-icon">
202
+ <div class="pf-v6-c-options-menu__menu-item-icon">
203
203
  <i class="fas fa-check" aria-hidden="true"></i>
204
204
  </div>
205
205
  </button>
206
206
  </li>
207
207
  <li role="none">
208
208
  <button
209
- class="pf-v5-c-options-menu__menu-item"
209
+ class="pf-v6-c-options-menu__menu-item"
210
210
  type="button"
211
211
  role="menuitem"
212
212
  >Descending</button>
@@ -216,48 +216,48 @@ deprecated: true
216
216
  </div>
217
217
  </div>
218
218
 
219
- <div class="pf-v5-c-options-menu pf-m-expanded">
219
+ <div class="pf-v6-c-options-menu pf-m-expanded">
220
220
  <button
221
- class="pf-v5-c-options-menu__toggle"
221
+ class="pf-v6-c-options-menu__toggle"
222
222
  type="button"
223
223
  id="options-menu-multiple-expanded-example-toggle"
224
224
  aria-haspopup="listbox"
225
225
  aria-expanded="true"
226
226
  >
227
- <span class="pf-v5-c-options-menu__toggle-text">Sort by</span>
228
- <div class="pf-v5-c-options-menu__toggle-icon">
227
+ <span class="pf-v6-c-options-menu__toggle-text">Sort by</span>
228
+ <div class="pf-v6-c-options-menu__toggle-icon">
229
229
  <i class="fas fa-caret-down" aria-hidden="true"></i>
230
230
  </div>
231
231
  </button>
232
232
  <div
233
- class="pf-v5-c-options-menu__menu"
233
+ class="pf-v6-c-options-menu__menu"
234
234
  role="menu"
235
235
  aria-labelledby="options-menu-multiple-expanded-example-toggle"
236
236
  >
237
- <section class="pf-v5-c-options-menu__group" role="none">
237
+ <section class="pf-v6-c-options-menu__group" role="none">
238
238
  <ul role="group" aria-label="Sort by">
239
239
  <li role="none">
240
240
  <button
241
- class="pf-v5-c-options-menu__menu-item"
241
+ class="pf-v6-c-options-menu__menu-item"
242
242
  type="button"
243
243
  role="menuitem"
244
244
  >Name</button>
245
245
  </li>
246
246
  <li role="none">
247
247
  <button
248
- class="pf-v5-c-options-menu__menu-item"
248
+ class="pf-v6-c-options-menu__menu-item"
249
249
  type="button"
250
250
  role="menuitem"
251
251
  >
252
252
  Date
253
- <div class="pf-v5-c-options-menu__menu-item-icon">
253
+ <div class="pf-v6-c-options-menu__menu-item-icon">
254
254
  <i class="fas fa-check" aria-hidden="true"></i>
255
255
  </div>
256
256
  </button>
257
257
  </li>
258
258
  <li role="none">
259
259
  <button
260
- class="pf-v5-c-options-menu__menu-item"
260
+ class="pf-v6-c-options-menu__menu-item"
261
261
  type="button"
262
262
  role="menuitem"
263
263
  disabled
@@ -265,31 +265,31 @@ deprecated: true
265
265
  </li>
266
266
  <li role="none">
267
267
  <button
268
- class="pf-v5-c-options-menu__menu-item"
268
+ class="pf-v6-c-options-menu__menu-item"
269
269
  type="button"
270
270
  role="menuitem"
271
271
  >Size</button>
272
272
  </li>
273
273
  </ul>
274
274
  </section>
275
- <li class="pf-v5-c-divider" role="separator"></li>
276
- <section class="pf-v5-c-options-menu__group" role="none">
275
+ <li class="pf-v6-c-divider" role="separator"></li>
276
+ <section class="pf-v6-c-options-menu__group" role="none">
277
277
  <ul role="group" aria-label="Sort direction">
278
278
  <li role="none">
279
279
  <button
280
- class="pf-v5-c-options-menu__menu-item"
280
+ class="pf-v6-c-options-menu__menu-item"
281
281
  type="button"
282
282
  role="menuitem"
283
283
  >
284
284
  Ascending
285
- <div class="pf-v5-c-options-menu__menu-item-icon">
285
+ <div class="pf-v6-c-options-menu__menu-item-icon">
286
286
  <i class="fas fa-check" aria-hidden="true"></i>
287
287
  </div>
288
288
  </button>
289
289
  </li>
290
290
  <li role="none">
291
291
  <button
292
- class="pf-v5-c-options-menu__menu-item"
292
+ class="pf-v6-c-options-menu__menu-item"
293
293
  type="button"
294
294
  role="menuitem"
295
295
  >Descending</button>
@@ -304,9 +304,9 @@ deprecated: true
304
304
  ### Plain
305
305
 
306
306
  ```html
307
- <div class="pf-v5-c-options-menu">
307
+ <div class="pf-v6-c-options-menu">
308
308
  <button
309
- class="pf-v5-c-options-menu__toggle pf-m-plain"
309
+ class="pf-v6-c-options-menu__toggle pf-m-plain"
310
310
  type="button"
311
311
  id="options-menu-plain-disabled-example-toggle"
312
312
  aria-haspopup="listbox"
@@ -315,38 +315,38 @@ deprecated: true
315
315
  aria-label="Sort by"
316
316
  >
317
317
  <i
318
- class="fas fa-sort-amount-down pf-v5-m-mirror-inline-rtl"
318
+ class="fas fa-sort-amount-down pf-v6-m-mirror-inline-rtl"
319
319
  aria-hidden="true"
320
320
  ></i>
321
321
  </button>
322
322
  <ul
323
- class="pf-v5-c-options-menu__menu"
323
+ class="pf-v6-c-options-menu__menu"
324
324
  role="menu"
325
325
  aria-labelledby="options-menu-plain-disabled-example-toggle"
326
326
  hidden
327
327
  >
328
328
  <li role="none">
329
329
  <button
330
- class="pf-v5-c-options-menu__menu-item"
330
+ class="pf-v6-c-options-menu__menu-item"
331
331
  type="button"
332
332
  role="menuitem"
333
333
  >Option 1</button>
334
334
  </li>
335
335
  <li role="none">
336
336
  <button
337
- class="pf-v5-c-options-menu__menu-item"
337
+ class="pf-v6-c-options-menu__menu-item"
338
338
  type="button"
339
339
  role="menuitem"
340
340
  >
341
341
  Option 2
342
- <div class="pf-v5-c-options-menu__menu-item-icon">
342
+ <div class="pf-v6-c-options-menu__menu-item-icon">
343
343
  <i class="fas fa-check" aria-hidden="true"></i>
344
344
  </div>
345
345
  </button>
346
346
  </li>
347
347
  <li role="none">
348
348
  <button
349
- class="pf-v5-c-options-menu__menu-item"
349
+ class="pf-v6-c-options-menu__menu-item"
350
350
  type="button"
351
351
  role="menuitem"
352
352
  >Option 3</button>
@@ -354,9 +354,9 @@ deprecated: true
354
354
  </ul>
355
355
  </div>
356
356
 
357
- <div class="pf-v5-c-options-menu">
357
+ <div class="pf-v6-c-options-menu">
358
358
  <button
359
- class="pf-v5-c-options-menu__toggle pf-m-plain"
359
+ class="pf-v6-c-options-menu__toggle pf-m-plain"
360
360
  type="button"
361
361
  id="options-menu-plain-example-toggle"
362
362
  aria-haspopup="listbox"
@@ -364,38 +364,38 @@ deprecated: true
364
364
  aria-label="Sort by"
365
365
  >
366
366
  <i
367
- class="fas fa-sort-amount-down pf-v5-m-mirror-inline-rtl"
367
+ class="fas fa-sort-amount-down pf-v6-m-mirror-inline-rtl"
368
368
  aria-hidden="true"
369
369
  ></i>
370
370
  </button>
371
371
  <ul
372
- class="pf-v5-c-options-menu__menu"
372
+ class="pf-v6-c-options-menu__menu"
373
373
  role="menu"
374
374
  aria-labelledby="options-menu-plain-example-toggle"
375
375
  hidden
376
376
  >
377
377
  <li role="none">
378
378
  <button
379
- class="pf-v5-c-options-menu__menu-item"
379
+ class="pf-v6-c-options-menu__menu-item"
380
380
  type="button"
381
381
  role="menuitem"
382
382
  >Option 1</button>
383
383
  </li>
384
384
  <li role="none">
385
385
  <button
386
- class="pf-v5-c-options-menu__menu-item"
386
+ class="pf-v6-c-options-menu__menu-item"
387
387
  type="button"
388
388
  role="menuitem"
389
389
  >
390
390
  Option 2
391
- <div class="pf-v5-c-options-menu__menu-item-icon">
391
+ <div class="pf-v6-c-options-menu__menu-item-icon">
392
392
  <i class="fas fa-check" aria-hidden="true"></i>
393
393
  </div>
394
394
  </button>
395
395
  </li>
396
396
  <li role="none">
397
397
  <button
398
- class="pf-v5-c-options-menu__menu-item"
398
+ class="pf-v6-c-options-menu__menu-item"
399
399
  type="button"
400
400
  role="menuitem"
401
401
  >Option 3</button>
@@ -403,9 +403,9 @@ deprecated: true
403
403
  </ul>
404
404
  </div>
405
405
 
406
- <div class="pf-v5-c-options-menu pf-m-expanded">
406
+ <div class="pf-v6-c-options-menu pf-m-expanded">
407
407
  <button
408
- class="pf-v5-c-options-menu__toggle pf-m-plain"
408
+ class="pf-v6-c-options-menu__toggle pf-m-plain"
409
409
  type="button"
410
410
  id="options-menu-plain-expanded-example-toggle"
411
411
  aria-haspopup="listbox"
@@ -413,37 +413,37 @@ deprecated: true
413
413
  aria-label="Sort by"
414
414
  >
415
415
  <i
416
- class="fas fa-sort-amount-down pf-v5-m-mirror-inline-rtl"
416
+ class="fas fa-sort-amount-down pf-v6-m-mirror-inline-rtl"
417
417
  aria-hidden="true"
418
418
  ></i>
419
419
  </button>
420
420
  <ul
421
- class="pf-v5-c-options-menu__menu"
421
+ class="pf-v6-c-options-menu__menu"
422
422
  role="menu"
423
423
  aria-labelledby="options-menu-plain-expanded-example-toggle"
424
424
  >
425
425
  <li role="none">
426
426
  <button
427
- class="pf-v5-c-options-menu__menu-item"
427
+ class="pf-v6-c-options-menu__menu-item"
428
428
  type="button"
429
429
  role="menuitem"
430
430
  >Option 1</button>
431
431
  </li>
432
432
  <li role="none">
433
433
  <button
434
- class="pf-v5-c-options-menu__menu-item"
434
+ class="pf-v6-c-options-menu__menu-item"
435
435
  type="button"
436
436
  role="menuitem"
437
437
  >
438
438
  Option 2
439
- <div class="pf-v5-c-options-menu__menu-item-icon">
439
+ <div class="pf-v6-c-options-menu__menu-item-icon">
440
440
  <i class="fas fa-check" aria-hidden="true"></i>
441
441
  </div>
442
442
  </button>
443
443
  </li>
444
444
  <li role="none">
445
445
  <button
446
- class="pf-v5-c-options-menu__menu-item"
446
+ class="pf-v6-c-options-menu__menu-item"
447
447
  type="button"
448
448
  role="menuitem"
449
449
  >Option 3</button>
@@ -456,46 +456,46 @@ deprecated: true
456
456
  ### Align top
457
457
 
458
458
  ```html
459
- <div class="pf-v5-c-options-menu pf-m-expanded pf-m-top">
459
+ <div class="pf-v6-c-options-menu pf-m-expanded pf-m-top">
460
460
  <button
461
- class="pf-v5-c-options-menu__toggle"
461
+ class="pf-v6-c-options-menu__toggle"
462
462
  type="button"
463
463
  id="options-menu-top-example-toggle"
464
464
  aria-haspopup="listbox"
465
465
  aria-expanded="true"
466
466
  >
467
- <span class="pf-v5-c-options-menu__toggle-text">Options menu</span>
468
- <div class="pf-v5-c-options-menu__toggle-icon">
467
+ <span class="pf-v6-c-options-menu__toggle-text">Options menu</span>
468
+ <div class="pf-v6-c-options-menu__toggle-icon">
469
469
  <i class="fas fa-caret-down" aria-hidden="true"></i>
470
470
  </div>
471
471
  </button>
472
472
  <ul
473
- class="pf-v5-c-options-menu__menu pf-m-top"
473
+ class="pf-v6-c-options-menu__menu pf-m-top"
474
474
  role="menu"
475
475
  aria-labelledby="options-menu-top-example-toggle"
476
476
  >
477
477
  <li role="none">
478
478
  <button
479
- class="pf-v5-c-options-menu__menu-item"
479
+ class="pf-v6-c-options-menu__menu-item"
480
480
  type="button"
481
481
  role="menuitem"
482
482
  >Option 1</button>
483
483
  </li>
484
484
  <li role="none">
485
485
  <button
486
- class="pf-v5-c-options-menu__menu-item"
486
+ class="pf-v6-c-options-menu__menu-item"
487
487
  type="button"
488
488
  role="menuitem"
489
489
  >
490
490
  Option 2
491
- <div class="pf-v5-c-options-menu__menu-item-icon">
491
+ <div class="pf-v6-c-options-menu__menu-item-icon">
492
492
  <i class="fas fa-check" aria-hidden="true"></i>
493
493
  </div>
494
494
  </button>
495
495
  </li>
496
496
  <li role="none">
497
497
  <button
498
- class="pf-v5-c-options-menu__menu-item"
498
+ class="pf-v6-c-options-menu__menu-item"
499
499
  type="button"
500
500
  role="menuitem"
501
501
  >Option 3</button>
@@ -508,46 +508,46 @@ deprecated: true
508
508
  ### Align right
509
509
 
510
510
  ```html
511
- <div class="pf-v5-c-options-menu pf-m-expanded pf-m-align-right">
511
+ <div class="pf-v6-c-options-menu pf-m-expanded pf-m-align-right">
512
512
  <button
513
- class="pf-v5-c-options-menu__toggle"
513
+ class="pf-v6-c-options-menu__toggle"
514
514
  type="button"
515
515
  id="options-menu-align-right-example-toggle"
516
516
  aria-haspopup="listbox"
517
517
  aria-expanded="true"
518
518
  >
519
- <span class="pf-v5-c-options-menu__toggle-text">Options menu</span>
520
- <div class="pf-v5-c-options-menu__toggle-icon">
519
+ <span class="pf-v6-c-options-menu__toggle-text">Options menu</span>
520
+ <div class="pf-v6-c-options-menu__toggle-icon">
521
521
  <i class="fas fa-caret-down" aria-hidden="true"></i>
522
522
  </div>
523
523
  </button>
524
524
  <ul
525
- class="pf-v5-c-options-menu__menu pf-m-align-right"
525
+ class="pf-v6-c-options-menu__menu pf-m-align-right"
526
526
  role="menu"
527
527
  aria-labelledby="options-menu-align-right-example-toggle"
528
528
  >
529
529
  <li role="none">
530
530
  <button
531
- class="pf-v5-c-options-menu__menu-item"
531
+ class="pf-v6-c-options-menu__menu-item"
532
532
  type="button"
533
533
  role="menuitem"
534
534
  >Option 1</button>
535
535
  </li>
536
536
  <li role="none">
537
537
  <button
538
- class="pf-v5-c-options-menu__menu-item"
538
+ class="pf-v6-c-options-menu__menu-item"
539
539
  type="button"
540
540
  role="menuitem"
541
541
  >
542
542
  Option 2
543
- <div class="pf-v5-c-options-menu__menu-item-icon">
543
+ <div class="pf-v6-c-options-menu__menu-item-icon">
544
544
  <i class="fas fa-check" aria-hidden="true"></i>
545
545
  </div>
546
546
  </button>
547
547
  </li>
548
548
  <li role="none">
549
549
  <button
550
- class="pf-v5-c-options-menu__menu-item"
550
+ class="pf-v6-c-options-menu__menu-item"
551
551
  type="button"
552
552
  role="menuitem"
553
553
  >Option 3</button>
@@ -560,48 +560,48 @@ deprecated: true
560
560
  ### Plain with text
561
561
 
562
562
  ```html
563
- <div class="pf-v5-c-options-menu">
563
+ <div class="pf-v6-c-options-menu">
564
564
  <button
565
- class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
565
+ class="pf-v6-c-options-menu__toggle pf-m-text pf-m-plain"
566
566
  type="button"
567
567
  id="options-menu-disabled-text-example-toggle"
568
568
  aria-haspopup="listbox"
569
569
  aria-expanded="false"
570
570
  disabled
571
571
  >
572
- <span class="pf-v5-c-options-menu__toggle-text">Custom text</span>
573
- <div class="pf-v5-c-options-menu__toggle-icon">
572
+ <span class="pf-v6-c-options-menu__toggle-text">Custom text</span>
573
+ <div class="pf-v6-c-options-menu__toggle-icon">
574
574
  <i class="fas fa-caret-down" aria-hidden="true"></i>
575
575
  </div>
576
576
  </button>
577
577
  <ul
578
- class="pf-v5-c-options-menu__menu"
578
+ class="pf-v6-c-options-menu__menu"
579
579
  role="menu"
580
580
  aria-labelledby="options-menu-disabled-text-example-toggle"
581
581
  hidden
582
582
  >
583
583
  <li role="none">
584
584
  <button
585
- class="pf-v5-c-options-menu__menu-item"
585
+ class="pf-v6-c-options-menu__menu-item"
586
586
  type="button"
587
587
  role="menuitem"
588
588
  >Option 1</button>
589
589
  </li>
590
590
  <li role="none">
591
591
  <button
592
- class="pf-v5-c-options-menu__menu-item"
592
+ class="pf-v6-c-options-menu__menu-item"
593
593
  type="button"
594
594
  role="menuitem"
595
595
  >
596
596
  Option 2
597
- <div class="pf-v5-c-options-menu__menu-item-icon">
597
+ <div class="pf-v6-c-options-menu__menu-item-icon">
598
598
  <i class="fas fa-check" aria-hidden="true"></i>
599
599
  </div>
600
600
  </button>
601
601
  </li>
602
602
  <li role="none">
603
603
  <button
604
- class="pf-v5-c-options-menu__menu-item"
604
+ class="pf-v6-c-options-menu__menu-item"
605
605
  type="button"
606
606
  role="menuitem"
607
607
  >Option 3</button>
@@ -609,47 +609,47 @@ deprecated: true
609
609
  </ul>
610
610
  </div>
611
611
 
612
- <div class="pf-v5-c-options-menu">
612
+ <div class="pf-v6-c-options-menu">
613
613
  <button
614
- class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
614
+ class="pf-v6-c-options-menu__toggle pf-m-text pf-m-plain"
615
615
  type="button"
616
616
  id="options-menu-plain-text-example-toggle"
617
617
  aria-haspopup="listbox"
618
618
  aria-expanded="false"
619
619
  >
620
- <span class="pf-v5-c-options-menu__toggle-text">Custom text</span>
621
- <div class="pf-v5-c-options-menu__toggle-icon">
620
+ <span class="pf-v6-c-options-menu__toggle-text">Custom text</span>
621
+ <div class="pf-v6-c-options-menu__toggle-icon">
622
622
  <i class="fas fa-caret-down" aria-hidden="true"></i>
623
623
  </div>
624
624
  </button>
625
625
  <ul
626
- class="pf-v5-c-options-menu__menu"
626
+ class="pf-v6-c-options-menu__menu"
627
627
  role="menu"
628
628
  aria-labelledby="options-menu-plain-text-example-toggle"
629
629
  hidden
630
630
  >
631
631
  <li role="none">
632
632
  <button
633
- class="pf-v5-c-options-menu__menu-item"
633
+ class="pf-v6-c-options-menu__menu-item"
634
634
  type="button"
635
635
  role="menuitem"
636
636
  >Option 1</button>
637
637
  </li>
638
638
  <li role="none">
639
639
  <button
640
- class="pf-v5-c-options-menu__menu-item"
640
+ class="pf-v6-c-options-menu__menu-item"
641
641
  type="button"
642
642
  role="menuitem"
643
643
  >
644
644
  Option 2
645
- <div class="pf-v5-c-options-menu__menu-item-icon">
645
+ <div class="pf-v6-c-options-menu__menu-item-icon">
646
646
  <i class="fas fa-check" aria-hidden="true"></i>
647
647
  </div>
648
648
  </button>
649
649
  </li>
650
650
  <li role="none">
651
651
  <button
652
- class="pf-v5-c-options-menu__menu-item"
652
+ class="pf-v6-c-options-menu__menu-item"
653
653
  type="button"
654
654
  role="menuitem"
655
655
  >Option 3</button>
@@ -657,46 +657,46 @@ deprecated: true
657
657
  </ul>
658
658
  </div>
659
659
 
660
- <div class="pf-v5-c-options-menu pf-m-expanded">
660
+ <div class="pf-v6-c-options-menu pf-m-expanded">
661
661
  <button
662
- class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
662
+ class="pf-v6-c-options-menu__toggle pf-m-text pf-m-plain"
663
663
  type="button"
664
664
  id="options-menu-plain-text-expanded-example-toggle"
665
665
  aria-haspopup="listbox"
666
666
  aria-expanded="true"
667
667
  >
668
- <span class="pf-v5-c-options-menu__toggle-text">Custom text</span>
669
- <div class="pf-v5-c-options-menu__toggle-icon">
668
+ <span class="pf-v6-c-options-menu__toggle-text">Custom text</span>
669
+ <div class="pf-v6-c-options-menu__toggle-icon">
670
670
  <i class="fas fa-caret-down" aria-hidden="true"></i>
671
671
  </div>
672
672
  </button>
673
673
  <ul
674
- class="pf-v5-c-options-menu__menu"
674
+ class="pf-v6-c-options-menu__menu"
675
675
  role="menu"
676
676
  aria-labelledby="options-menu-plain-text-expanded-example-toggle"
677
677
  >
678
678
  <li role="none">
679
679
  <button
680
- class="pf-v5-c-options-menu__menu-item"
680
+ class="pf-v6-c-options-menu__menu-item"
681
681
  type="button"
682
682
  role="menuitem"
683
683
  >Option 1</button>
684
684
  </li>
685
685
  <li role="none">
686
686
  <button
687
- class="pf-v5-c-options-menu__menu-item"
687
+ class="pf-v6-c-options-menu__menu-item"
688
688
  type="button"
689
689
  role="menuitem"
690
690
  >
691
691
  Option 2
692
- <div class="pf-v5-c-options-menu__menu-item-icon">
692
+ <div class="pf-v6-c-options-menu__menu-item-icon">
693
693
  <i class="fas fa-check" aria-hidden="true"></i>
694
694
  </div>
695
695
  </button>
696
696
  </li>
697
697
  <li role="none">
698
698
  <button
699
- class="pf-v5-c-options-menu__menu-item"
699
+ class="pf-v6-c-options-menu__menu-item"
700
700
  type="button"
701
701
  role="menuitem"
702
702
  >Option 3</button>
@@ -709,81 +709,81 @@ deprecated: true
709
709
  ### With groups
710
710
 
711
711
  ```html
712
- <div class="pf-v5-c-options-menu pf-m-expanded">
712
+ <div class="pf-v6-c-options-menu pf-m-expanded">
713
713
  <button
714
- class="pf-v5-c-options-menu__toggle"
714
+ class="pf-v6-c-options-menu__toggle"
715
715
  type="button"
716
716
  id="options-menu-groups-toggle"
717
717
  aria-haspopup="listbox"
718
718
  aria-expanded="true"
719
719
  >
720
- <span class="pf-v5-c-options-menu__toggle-text">Options menu</span>
721
- <div class="pf-v5-c-options-menu__toggle-icon">
720
+ <span class="pf-v6-c-options-menu__toggle-text">Options menu</span>
721
+ <div class="pf-v6-c-options-menu__toggle-icon">
722
722
  <i class="fas fa-caret-down" aria-hidden="true"></i>
723
723
  </div>
724
724
  </button>
725
725
  <div
726
- class="pf-v5-c-options-menu__menu"
726
+ class="pf-v6-c-options-menu__menu"
727
727
  role="menu"
728
728
  aria-labelledby="options-menu-groups-toggle"
729
729
  >
730
- <section class="pf-v5-c-options-menu__group" role="none">
730
+ <section class="pf-v6-c-options-menu__group" role="none">
731
731
  <ul role="group">
732
732
  <li role="none">
733
733
  <button
734
- class="pf-v5-c-options-menu__menu-item"
734
+ class="pf-v6-c-options-menu__menu-item"
735
735
  type="button"
736
736
  role="menuitem"
737
737
  >Option 1</button>
738
738
  </li>
739
739
  <li role="none">
740
740
  <button
741
- class="pf-v5-c-options-menu__menu-item"
741
+ class="pf-v6-c-options-menu__menu-item"
742
742
  type="button"
743
743
  role="menuitem"
744
744
  >
745
745
  Option 2
746
- <div class="pf-v5-c-options-menu__menu-item-icon">
746
+ <div class="pf-v6-c-options-menu__menu-item-icon">
747
747
  <i class="fas fa-check" aria-hidden="true"></i>
748
748
  </div>
749
749
  </button>
750
750
  </li>
751
751
  </ul>
752
752
  </section>
753
- <section class="pf-v5-c-options-menu__group" role="none">
754
- <h1 class="pf-v5-c-options-menu__group-title">Group 1</h1>
753
+ <section class="pf-v6-c-options-menu__group" role="none">
754
+ <h1 class="pf-v6-c-options-menu__group-title">Group 1</h1>
755
755
 
756
756
  <ul role="group">
757
757
  <li role="none">
758
758
  <button
759
- class="pf-v5-c-options-menu__menu-item"
759
+ class="pf-v6-c-options-menu__menu-item"
760
760
  type="button"
761
761
  role="menuitem"
762
762
  >Option 1</button>
763
763
  </li>
764
764
  <li role="none">
765
765
  <button
766
- class="pf-v5-c-options-menu__menu-item"
766
+ class="pf-v6-c-options-menu__menu-item"
767
767
  type="button"
768
768
  role="menuitem"
769
769
  >Option 2</button>
770
770
  </li>
771
771
  </ul>
772
772
  </section>
773
- <section class="pf-v5-c-options-menu__group" role="none">
774
- <h1 class="pf-v5-c-options-menu__group-title">Group 2</h1>
773
+ <section class="pf-v6-c-options-menu__group" role="none">
774
+ <h1 class="pf-v6-c-options-menu__group-title">Group 2</h1>
775
775
 
776
776
  <ul role="group">
777
777
  <li role="none">
778
778
  <button
779
- class="pf-v5-c-options-menu__menu-item"
779
+ class="pf-v6-c-options-menu__menu-item"
780
780
  type="button"
781
781
  role="menuitem"
782
782
  >Option 1</button>
783
783
  </li>
784
784
  <li role="none">
785
785
  <button
786
- class="pf-v5-c-options-menu__menu-item"
786
+ class="pf-v6-c-options-menu__menu-item"
787
787
  type="button"
788
788
  role="menuitem"
789
789
  >Option 2</button>
@@ -798,83 +798,83 @@ deprecated: true
798
798
  ### With groups and dividers between groups
799
799
 
800
800
  ```html
801
- <div class="pf-v5-c-options-menu pf-m-expanded">
801
+ <div class="pf-v6-c-options-menu pf-m-expanded">
802
802
  <button
803
- class="pf-v5-c-options-menu__toggle"
803
+ class="pf-v6-c-options-menu__toggle"
804
804
  type="button"
805
805
  id="options-menu-groups-and-dividers-between-groups-toggle"
806
806
  aria-haspopup="listbox"
807
807
  aria-expanded="true"
808
808
  >
809
- <span class="pf-v5-c-options-menu__toggle-text">Options menu</span>
810
- <div class="pf-v5-c-options-menu__toggle-icon">
809
+ <span class="pf-v6-c-options-menu__toggle-text">Options menu</span>
810
+ <div class="pf-v6-c-options-menu__toggle-icon">
811
811
  <i class="fas fa-caret-down" aria-hidden="true"></i>
812
812
  </div>
813
813
  </button>
814
814
  <div
815
- class="pf-v5-c-options-menu__menu"
815
+ class="pf-v6-c-options-menu__menu"
816
816
  role="menu"
817
817
  aria-labelledby="options-menu-groups-and-dividers-between-groups-toggle"
818
818
  >
819
- <section class="pf-v5-c-options-menu__group" role="none">
819
+ <section class="pf-v6-c-options-menu__group" role="none">
820
820
  <ul role="group">
821
821
  <li role="none">
822
822
  <button
823
- class="pf-v5-c-options-menu__menu-item"
823
+ class="pf-v6-c-options-menu__menu-item"
824
824
  type="button"
825
825
  role="menuitem"
826
826
  >Option 1</button>
827
827
  </li>
828
828
  <li role="none">
829
829
  <button
830
- class="pf-v5-c-options-menu__menu-item"
830
+ class="pf-v6-c-options-menu__menu-item"
831
831
  type="button"
832
832
  role="menuitem"
833
833
  >
834
834
  Option 2
835
- <div class="pf-v5-c-options-menu__menu-item-icon">
835
+ <div class="pf-v6-c-options-menu__menu-item-icon">
836
836
  <i class="fas fa-check" aria-hidden="true"></i>
837
837
  </div>
838
838
  </button>
839
839
  </li>
840
840
  </ul>
841
841
  </section>
842
- <hr class="pf-v5-c-divider" />
843
- <section class="pf-v5-c-options-menu__group" role="none">
844
- <h1 class="pf-v5-c-options-menu__group-title">Group 1</h1>
842
+ <hr class="pf-v6-c-divider" />
843
+ <section class="pf-v6-c-options-menu__group" role="none">
844
+ <h1 class="pf-v6-c-options-menu__group-title">Group 1</h1>
845
845
 
846
846
  <ul role="group">
847
847
  <li role="none">
848
848
  <button
849
- class="pf-v5-c-options-menu__menu-item"
849
+ class="pf-v6-c-options-menu__menu-item"
850
850
  type="button"
851
851
  role="menuitem"
852
852
  >Option 1</button>
853
853
  </li>
854
854
  <li role="none">
855
855
  <button
856
- class="pf-v5-c-options-menu__menu-item"
856
+ class="pf-v6-c-options-menu__menu-item"
857
857
  type="button"
858
858
  role="menuitem"
859
859
  >Option 2</button>
860
860
  </li>
861
861
  </ul>
862
862
  </section>
863
- <hr class="pf-v5-c-divider" />
864
- <section class="pf-v5-c-options-menu__group" role="none">
865
- <h1 class="pf-v5-c-options-menu__group-title">Group 2</h1>
863
+ <hr class="pf-v6-c-divider" />
864
+ <section class="pf-v6-c-options-menu__group" role="none">
865
+ <h1 class="pf-v6-c-options-menu__group-title">Group 2</h1>
866
866
 
867
867
  <ul role="group">
868
868
  <li role="none">
869
869
  <button
870
- class="pf-v5-c-options-menu__menu-item"
870
+ class="pf-v6-c-options-menu__menu-item"
871
871
  type="button"
872
872
  role="menuitem"
873
873
  >Option 1</button>
874
874
  </li>
875
875
  <li role="none">
876
876
  <button
877
- class="pf-v5-c-options-menu__menu-item"
877
+ class="pf-v6-c-options-menu__menu-item"
878
878
  type="button"
879
879
  role="menuitem"
880
880
  >Option 2</button>
@@ -889,83 +889,83 @@ deprecated: true
889
889
  ### With groups and dividers between items
890
890
 
891
891
  ```html
892
- <div class="pf-v5-c-options-menu pf-m-expanded">
892
+ <div class="pf-v6-c-options-menu pf-m-expanded">
893
893
  <button
894
- class="pf-v5-c-options-menu__toggle"
894
+ class="pf-v6-c-options-menu__toggle"
895
895
  type="button"
896
896
  id="options-menu-groups-and-dividers-between-items-toggle"
897
897
  aria-haspopup="listbox"
898
898
  aria-expanded="true"
899
899
  >
900
- <span class="pf-v5-c-options-menu__toggle-text">Options menu</span>
901
- <div class="pf-v5-c-options-menu__toggle-icon">
900
+ <span class="pf-v6-c-options-menu__toggle-text">Options menu</span>
901
+ <div class="pf-v6-c-options-menu__toggle-icon">
902
902
  <i class="fas fa-caret-down" aria-hidden="true"></i>
903
903
  </div>
904
904
  </button>
905
905
  <div
906
- class="pf-v5-c-options-menu__menu"
906
+ class="pf-v6-c-options-menu__menu"
907
907
  role="menu"
908
908
  aria-labelledby="options-menu-groups-and-dividers-between-items-toggle"
909
909
  >
910
- <section class="pf-v5-c-options-menu__group" role="none">
910
+ <section class="pf-v6-c-options-menu__group" role="none">
911
911
  <ul role="group">
912
912
  <li role="none">
913
913
  <button
914
- class="pf-v5-c-options-menu__menu-item"
914
+ class="pf-v6-c-options-menu__menu-item"
915
915
  type="button"
916
916
  role="menuitem"
917
917
  >Option 1</button>
918
918
  </li>
919
919
  <li role="none">
920
920
  <button
921
- class="pf-v5-c-options-menu__menu-item"
921
+ class="pf-v6-c-options-menu__menu-item"
922
922
  type="button"
923
923
  role="menuitem"
924
924
  >
925
925
  Option 2
926
- <div class="pf-v5-c-options-menu__menu-item-icon">
926
+ <div class="pf-v6-c-options-menu__menu-item-icon">
927
927
  <i class="fas fa-check" aria-hidden="true"></i>
928
928
  </div>
929
929
  </button>
930
930
  </li>
931
- <li class="pf-v5-c-divider" role="separator"></li>
931
+ <li class="pf-v6-c-divider" role="separator"></li>
932
932
  </ul>
933
933
  </section>
934
- <section class="pf-v5-c-options-menu__group" role="none">
935
- <h1 class="pf-v5-c-options-menu__group-title">Group 1</h1>
934
+ <section class="pf-v6-c-options-menu__group" role="none">
935
+ <h1 class="pf-v6-c-options-menu__group-title">Group 1</h1>
936
936
 
937
937
  <ul role="group">
938
938
  <li role="none">
939
939
  <button
940
- class="pf-v5-c-options-menu__menu-item"
940
+ class="pf-v6-c-options-menu__menu-item"
941
941
  type="button"
942
942
  role="menuitem"
943
943
  >Option 1</button>
944
944
  </li>
945
945
  <li role="none">
946
946
  <button
947
- class="pf-v5-c-options-menu__menu-item"
947
+ class="pf-v6-c-options-menu__menu-item"
948
948
  type="button"
949
949
  role="menuitem"
950
950
  >Option 2</button>
951
951
  </li>
952
- <li class="pf-v5-c-divider" role="separator"></li>
952
+ <li class="pf-v6-c-divider" role="separator"></li>
953
953
  </ul>
954
954
  </section>
955
- <section class="pf-v5-c-options-menu__group" role="none">
956
- <h1 class="pf-v5-c-options-menu__group-title">Group 2</h1>
955
+ <section class="pf-v6-c-options-menu__group" role="none">
956
+ <h1 class="pf-v6-c-options-menu__group-title">Group 2</h1>
957
957
 
958
958
  <ul role="group">
959
959
  <li role="none">
960
960
  <button
961
- class="pf-v5-c-options-menu__menu-item"
961
+ class="pf-v6-c-options-menu__menu-item"
962
962
  type="button"
963
963
  role="menuitem"
964
964
  >Option 1</button>
965
965
  </li>
966
966
  <li role="none">
967
967
  <button
968
- class="pf-v5-c-options-menu__menu-item"
968
+ class="pf-v6-c-options-menu__menu-item"
969
969
  type="button"
970
970
  role="menuitem"
971
971
  >Option 2</button>