@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/Pagination/examples/Pagination.md CHANGED
@@ -9,56 +9,56 @@ cssPrefix: pf-v5-c-pagination
9
9
  ### Top
10
10
 
11
11
  ```html
12
- <div class="pf-v5-c-pagination">
13
- <div class="pf-v5-c-pagination__total-items">
12
+ <div class="pf-v6-c-pagination">
13
+ <div class="pf-v6-c-pagination__total-items">
14
14
  <b>1 - 10</b>&nbsp;of&nbsp;
15
15
  <b>36</b>
16
16
  </div>
17
- <div class="pf-v5-c-pagination__page-menu">
18
- <div class="pf-v5-c-options-menu">
17
+ <div class="pf-v6-c-pagination__page-menu">
18
+ <div class="pf-v6-c-options-menu">
19
19
  <button
20
- class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
20
+ class="pf-v6-c-options-menu__toggle pf-m-text pf-m-plain"
21
21
  type="button"
22
22
  id="pagination-options-menu-top-example-toggle"
23
23
  aria-haspopup="listbox"
24
24
  aria-expanded="false"
25
25
  >
26
- <span class="pf-v5-c-options-menu__toggle-text">
26
+ <span class="pf-v6-c-options-menu__toggle-text">
27
27
  <b>1 - 10</b>&nbsp;of&nbsp;
28
28
  <b>36</b>
29
29
  </span>
30
- <div class="pf-v5-c-options-menu__toggle-icon">
30
+ <div class="pf-v6-c-options-menu__toggle-icon">
31
31
  <i class="fas fa-caret-down" aria-hidden="true"></i>
32
32
  </div>
33
33
  </button>
34
34
  <ul
35
- class="pf-v5-c-options-menu__menu"
35
+ class="pf-v6-c-options-menu__menu"
36
36
  role="menu"
37
37
  aria-labelledby="pagination-options-menu-top-example-toggle"
38
38
  hidden
39
39
  >
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
  >5 per page</button>
46
46
  </li>
47
47
  <li role="none">
48
48
  <button
49
- class="pf-v5-c-options-menu__menu-item"
49
+ class="pf-v6-c-options-menu__menu-item"
50
50
  type="button"
51
51
  role="menuitem"
52
52
  >
53
53
  10 per page
54
- <div class="pf-v5-c-options-menu__menu-item-icon">
54
+ <div class="pf-v6-c-options-menu__menu-item-icon">
55
55
  <i class="fas fa-check" aria-hidden="true"></i>
56
56
  </div>
57
57
  </button>
58
58
  </li>
59
59
  <li role="none">
60
60
  <button
61
- class="pf-v5-c-options-menu__menu-item"
61
+ class="pf-v6-c-options-menu__menu-item"
62
62
  type="button"
63
63
  role="menuitem"
64
64
  >20 per page</button>
@@ -67,12 +67,12 @@ cssPrefix: pf-v5-c-pagination
67
67
  </div>
68
68
  </div>
69
69
  <nav
70
- class="pf-v5-c-pagination__nav"
70
+ class="pf-v6-c-pagination__nav"
71
71
  aria-label="Pagination nav - top example"
72
72
  >
73
- <div class="pf-v5-c-pagination__nav-control pf-m-first">
73
+ <div class="pf-v6-c-pagination__nav-control pf-m-first">
74
74
  <button
75
- class="pf-v5-c-button pf-m-plain"
75
+ class="pf-v6-c-button pf-m-plain"
76
76
  type="button"
77
77
  disabled
78
78
  aria-label="Go to first page"
@@ -80,9 +80,9 @@ cssPrefix: pf-v5-c-pagination
80
80
  <i class="fas fa-angle-double-left" aria-hidden="true"></i>
81
81
  </button>
82
82
  </div>
83
- <div class="pf-v5-c-pagination__nav-control pf-m-prev">
83
+ <div class="pf-v6-c-pagination__nav-control pf-m-prev">
84
84
  <button
85
- class="pf-v5-c-button pf-m-plain"
85
+ class="pf-v6-c-button pf-m-plain"
86
86
  type="button"
87
87
  disabled
88
88
  aria-label="Go to previous page"
@@ -90,8 +90,8 @@ cssPrefix: pf-v5-c-pagination
90
90
  <i class="fas fa-angle-left" aria-hidden="true"></i>
91
91
  </button>
92
92
  </div>
93
- <div class="pf-v5-c-pagination__nav-page-select">
94
- <span class="pf-v5-c-form-control">
93
+ <div class="pf-v6-c-pagination__nav-page-select">
94
+ <span class="pf-v6-c-form-control">
95
95
  <input
96
96
  aria-label="Current page"
97
97
  type="number"
@@ -102,18 +102,18 @@ cssPrefix: pf-v5-c-pagination
102
102
  </span>
103
103
  <span aria-hidden="true">of 4</span>
104
104
  </div>
105
- <div class="pf-v5-c-pagination__nav-control pf-m-next">
105
+ <div class="pf-v6-c-pagination__nav-control pf-m-next">
106
106
  <button
107
- class="pf-v5-c-button pf-m-plain"
107
+ class="pf-v6-c-button pf-m-plain"
108
108
  type="button"
109
109
  aria-label="Go to next page"
110
110
  >
111
111
  <i class="fas fa-angle-right" aria-hidden="true"></i>
112
112
  </button>
113
113
  </div>
114
- <div class="pf-v5-c-pagination__nav-control pf-m-last">
114
+ <div class="pf-v6-c-pagination__nav-control pf-m-last">
115
115
  <button
116
- class="pf-v5-c-button pf-m-plain"
116
+ class="pf-v6-c-button pf-m-plain"
117
117
  type="button"
118
118
  aria-label="Go to last page"
119
119
  >
@@ -128,55 +128,55 @@ cssPrefix: pf-v5-c-pagination
128
128
  ### Top expanded
129
129
 
130
130
  ```html
131
- <div class="pf-v5-c-pagination">
132
- <div class="pf-v5-c-pagination__total-items">
131
+ <div class="pf-v6-c-pagination">
132
+ <div class="pf-v6-c-pagination__total-items">
133
133
  <b>1 - 10</b>&nbsp;of&nbsp;
134
134
  <b>36</b>
135
135
  </div>
136
- <div class="pf-v5-c-pagination__page-menu">
137
- <div class="pf-v5-c-options-menu pf-m-expanded">
136
+ <div class="pf-v6-c-pagination__page-menu">
137
+ <div class="pf-v6-c-options-menu pf-m-expanded">
138
138
  <button
139
- class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
139
+ class="pf-v6-c-options-menu__toggle pf-m-text pf-m-plain"
140
140
  type="button"
141
141
  id="pagination-options-menu-top-expanded-example-toggle"
142
142
  aria-haspopup="listbox"
143
143
  aria-expanded="true"
144
144
  >
145
- <span class="pf-v5-c-options-menu__toggle-text">
145
+ <span class="pf-v6-c-options-menu__toggle-text">
146
146
  <b>1 - 10</b>&nbsp;of&nbsp;
147
147
  <b>36</b>
148
148
  </span>
149
- <div class="pf-v5-c-options-menu__toggle-icon">
149
+ <div class="pf-v6-c-options-menu__toggle-icon">
150
150
  <i class="fas fa-caret-down" aria-hidden="true"></i>
151
151
  </div>
152
152
  </button>
153
153
  <ul
154
- class="pf-v5-c-options-menu__menu"
154
+ class="pf-v6-c-options-menu__menu"
155
155
  role="menu"
156
156
  aria-labelledby="pagination-options-menu-top-expanded-example-toggle"
157
157
  >
158
158
  <li role="none">
159
159
  <button
160
- class="pf-v5-c-options-menu__menu-item"
160
+ class="pf-v6-c-options-menu__menu-item"
161
161
  type="button"
162
162
  role="menuitem"
163
163
  >5 per page</button>
164
164
  </li>
165
165
  <li role="none">
166
166
  <button
167
- class="pf-v5-c-options-menu__menu-item"
167
+ class="pf-v6-c-options-menu__menu-item"
168
168
  type="button"
169
169
  role="menuitem"
170
170
  >
171
171
  10 per page
172
- <div class="pf-v5-c-options-menu__menu-item-icon">
172
+ <div class="pf-v6-c-options-menu__menu-item-icon">
173
173
  <i class="fas fa-check" aria-hidden="true"></i>
174
174
  </div>
175
175
  </button>
176
176
  </li>
177
177
  <li role="none">
178
178
  <button
179
- class="pf-v5-c-options-menu__menu-item"
179
+ class="pf-v6-c-options-menu__menu-item"
180
180
  type="button"
181
181
  role="menuitem"
182
182
  >20 per page</button>
@@ -185,12 +185,12 @@ cssPrefix: pf-v5-c-pagination
185
185
  </div>
186
186
  </div>
187
187
  <nav
188
- class="pf-v5-c-pagination__nav"
188
+ class="pf-v6-c-pagination__nav"
189
189
  aria-label="Pagination nav - top expanded example"
190
190
  >
191
- <div class="pf-v5-c-pagination__nav-control pf-m-first">
191
+ <div class="pf-v6-c-pagination__nav-control pf-m-first">
192
192
  <button
193
- class="pf-v5-c-button pf-m-plain"
193
+ class="pf-v6-c-button pf-m-plain"
194
194
  type="button"
195
195
  disabled
196
196
  aria-label="Go to first page"
@@ -198,9 +198,9 @@ cssPrefix: pf-v5-c-pagination
198
198
  <i class="fas fa-angle-double-left" aria-hidden="true"></i>
199
199
  </button>
200
200
  </div>
201
- <div class="pf-v5-c-pagination__nav-control pf-m-prev">
201
+ <div class="pf-v6-c-pagination__nav-control pf-m-prev">
202
202
  <button
203
- class="pf-v5-c-button pf-m-plain"
203
+ class="pf-v6-c-button pf-m-plain"
204
204
  type="button"
205
205
  disabled
206
206
  aria-label="Go to previous page"
@@ -208,8 +208,8 @@ cssPrefix: pf-v5-c-pagination
208
208
  <i class="fas fa-angle-left" aria-hidden="true"></i>
209
209
  </button>
210
210
  </div>
211
- <div class="pf-v5-c-pagination__nav-page-select">
212
- <span class="pf-v5-c-form-control">
211
+ <div class="pf-v6-c-pagination__nav-page-select">
212
+ <span class="pf-v6-c-form-control">
213
213
  <input
214
214
  aria-label="Current page"
215
215
  type="number"
@@ -220,18 +220,18 @@ cssPrefix: pf-v5-c-pagination
220
220
  </span>
221
221
  <span aria-hidden="true">of 4</span>
222
222
  </div>
223
- <div class="pf-v5-c-pagination__nav-control pf-m-next">
223
+ <div class="pf-v6-c-pagination__nav-control pf-m-next">
224
224
  <button
225
- class="pf-v5-c-button pf-m-plain"
225
+ class="pf-v6-c-button pf-m-plain"
226
226
  type="button"
227
227
  aria-label="Go to next page"
228
228
  >
229
229
  <i class="fas fa-angle-right" aria-hidden="true"></i>
230
230
  </button>
231
231
  </div>
232
- <div class="pf-v5-c-pagination__nav-control pf-m-last">
232
+ <div class="pf-v6-c-pagination__nav-control pf-m-last">
233
233
  <button
234
- class="pf-v5-c-button pf-m-plain"
234
+ class="pf-v6-c-button pf-m-plain"
235
235
  type="button"
236
236
  aria-label="Go to last page"
237
237
  >
@@ -246,56 +246,56 @@ cssPrefix: pf-v5-c-pagination
246
246
  ### Top sticky
247
247
 
248
248
  ```html
249
- <div class="pf-v5-c-pagination pf-m-sticky">
250
- <div class="pf-v5-c-pagination__total-items">
249
+ <div class="pf-v6-c-pagination pf-m-sticky">
250
+ <div class="pf-v6-c-pagination__total-items">
251
251
  <b>1 - 10</b>&nbsp;of&nbsp;
252
252
  <b>36</b>
253
253
  </div>
254
- <div class="pf-v5-c-pagination__page-menu">
255
- <div class="pf-v5-c-options-menu">
254
+ <div class="pf-v6-c-pagination__page-menu">
255
+ <div class="pf-v6-c-options-menu">
256
256
  <button
257
- class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
257
+ class="pf-v6-c-options-menu__toggle pf-m-text pf-m-plain"
258
258
  type="button"
259
259
  id="pagination-options-menu-top-sticky-example-toggle"
260
260
  aria-haspopup="listbox"
261
261
  aria-expanded="false"
262
262
  >
263
- <span class="pf-v5-c-options-menu__toggle-text">
263
+ <span class="pf-v6-c-options-menu__toggle-text">
264
264
  <b>1 - 10</b>&nbsp;of&nbsp;
265
265
  <b>36</b>
266
266
  </span>
267
- <div class="pf-v5-c-options-menu__toggle-icon">
267
+ <div class="pf-v6-c-options-menu__toggle-icon">
268
268
  <i class="fas fa-caret-down" aria-hidden="true"></i>
269
269
  </div>
270
270
  </button>
271
271
  <ul
272
- class="pf-v5-c-options-menu__menu"
272
+ class="pf-v6-c-options-menu__menu"
273
273
  role="menu"
274
274
  aria-labelledby="pagination-options-menu-top-sticky-example-toggle"
275
275
  hidden
276
276
  >
277
277
  <li role="none">
278
278
  <button
279
- class="pf-v5-c-options-menu__menu-item"
279
+ class="pf-v6-c-options-menu__menu-item"
280
280
  type="button"
281
281
  role="menuitem"
282
282
  >5 per page</button>
283
283
  </li>
284
284
  <li role="none">
285
285
  <button
286
- class="pf-v5-c-options-menu__menu-item"
286
+ class="pf-v6-c-options-menu__menu-item"
287
287
  type="button"
288
288
  role="menuitem"
289
289
  >
290
290
  10 per page
291
- <div class="pf-v5-c-options-menu__menu-item-icon">
291
+ <div class="pf-v6-c-options-menu__menu-item-icon">
292
292
  <i class="fas fa-check" aria-hidden="true"></i>
293
293
  </div>
294
294
  </button>
295
295
  </li>
296
296
  <li role="none">
297
297
  <button
298
- class="pf-v5-c-options-menu__menu-item"
298
+ class="pf-v6-c-options-menu__menu-item"
299
299
  type="button"
300
300
  role="menuitem"
301
301
  >20 per page</button>
@@ -304,12 +304,12 @@ cssPrefix: pf-v5-c-pagination
304
304
  </div>
305
305
  </div>
306
306
  <nav
307
- class="pf-v5-c-pagination__nav"
307
+ class="pf-v6-c-pagination__nav"
308
308
  aria-label="Pagination nav - top sticky example"
309
309
  >
310
- <div class="pf-v5-c-pagination__nav-control pf-m-first">
310
+ <div class="pf-v6-c-pagination__nav-control pf-m-first">
311
311
  <button
312
- class="pf-v5-c-button pf-m-plain"
312
+ class="pf-v6-c-button pf-m-plain"
313
313
  type="button"
314
314
  disabled
315
315
  aria-label="Go to first page"
@@ -317,9 +317,9 @@ cssPrefix: pf-v5-c-pagination
317
317
  <i class="fas fa-angle-double-left" aria-hidden="true"></i>
318
318
  </button>
319
319
  </div>
320
- <div class="pf-v5-c-pagination__nav-control pf-m-prev">
320
+ <div class="pf-v6-c-pagination__nav-control pf-m-prev">
321
321
  <button
322
- class="pf-v5-c-button pf-m-plain"
322
+ class="pf-v6-c-button pf-m-plain"
323
323
  type="button"
324
324
  disabled
325
325
  aria-label="Go to previous page"
@@ -327,8 +327,8 @@ cssPrefix: pf-v5-c-pagination
327
327
  <i class="fas fa-angle-left" aria-hidden="true"></i>
328
328
  </button>
329
329
  </div>
330
- <div class="pf-v5-c-pagination__nav-page-select">
331
- <span class="pf-v5-c-form-control">
330
+ <div class="pf-v6-c-pagination__nav-page-select">
331
+ <span class="pf-v6-c-form-control">
332
332
  <input
333
333
  aria-label="Current page"
334
334
  type="number"
@@ -339,18 +339,18 @@ cssPrefix: pf-v5-c-pagination
339
339
  </span>
340
340
  <span aria-hidden="true">of 4</span>
341
341
  </div>
342
- <div class="pf-v5-c-pagination__nav-control pf-m-next">
342
+ <div class="pf-v6-c-pagination__nav-control pf-m-next">
343
343
  <button
344
- class="pf-v5-c-button pf-m-plain"
344
+ class="pf-v6-c-button pf-m-plain"
345
345
  type="button"
346
346
  aria-label="Go to next page"
347
347
  >
348
348
  <i class="fas fa-angle-right" aria-hidden="true"></i>
349
349
  </button>
350
350
  </div>
351
- <div class="pf-v5-c-pagination__nav-control pf-m-last">
351
+ <div class="pf-v6-c-pagination__nav-control pf-m-last">
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-label="Go to last page"
356
356
  >
@@ -375,56 +375,56 @@ cssPrefix: pf-v5-c-pagination
375
375
  ### Indeterminate (item count is not known)
376
376
 
377
377
  ```html
378
- <div class="pf-v5-c-pagination">
379
- <div class="pf-v5-c-pagination__total-items">
378
+ <div class="pf-v6-c-pagination">
379
+ <div class="pf-v6-c-pagination__total-items">
380
380
  <b>1 - 10</b>&nbsp;of&nbsp;
381
381
  <b>many</b>
382
382
  </div>
383
- <div class="pf-v5-c-pagination__page-menu">
384
- <div class="pf-v5-c-options-menu">
383
+ <div class="pf-v6-c-pagination__page-menu">
384
+ <div class="pf-v6-c-options-menu">
385
385
  <button
386
- class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
386
+ class="pf-v6-c-options-menu__toggle pf-m-text pf-m-plain"
387
387
  type="button"
388
388
  id="pagination-options-menu-top-indeterminate-example-toggle"
389
389
  aria-haspopup="listbox"
390
390
  aria-expanded="false"
391
391
  >
392
- <span class="pf-v5-c-options-menu__toggle-text">
392
+ <span class="pf-v6-c-options-menu__toggle-text">
393
393
  <b>1 - 10</b>&nbsp;of&nbsp;
394
394
  <b>many</b>
395
395
  </span>
396
- <div class="pf-v5-c-options-menu__toggle-icon">
396
+ <div class="pf-v6-c-options-menu__toggle-icon">
397
397
  <i class="fas fa-caret-down" aria-hidden="true"></i>
398
398
  </div>
399
399
  </button>
400
400
  <ul
401
- class="pf-v5-c-options-menu__menu"
401
+ class="pf-v6-c-options-menu__menu"
402
402
  role="menu"
403
403
  aria-labelledby="pagination-options-menu-top-indeterminate-example-toggle"
404
404
  hidden
405
405
  >
406
406
  <li role="none">
407
407
  <button
408
- class="pf-v5-c-options-menu__menu-item"
408
+ class="pf-v6-c-options-menu__menu-item"
409
409
  type="button"
410
410
  role="menuitem"
411
411
  >5 per page</button>
412
412
  </li>
413
413
  <li role="none">
414
414
  <button
415
- class="pf-v5-c-options-menu__menu-item"
415
+ class="pf-v6-c-options-menu__menu-item"
416
416
  type="button"
417
417
  role="menuitem"
418
418
  >
419
419
  10 per page
420
- <div class="pf-v5-c-options-menu__menu-item-icon">
420
+ <div class="pf-v6-c-options-menu__menu-item-icon">
421
421
  <i class="fas fa-check" aria-hidden="true"></i>
422
422
  </div>
423
423
  </button>
424
424
  </li>
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
  >20 per page</button>
@@ -433,12 +433,12 @@ cssPrefix: pf-v5-c-pagination
433
433
  </div>
434
434
  </div>
435
435
  <nav
436
- class="pf-v5-c-pagination__nav"
436
+ class="pf-v6-c-pagination__nav"
437
437
  aria-label="Pagination nav - indeterminate item count example"
438
438
  >
439
- <div class="pf-v5-c-pagination__nav-control pf-m-first">
439
+ <div class="pf-v6-c-pagination__nav-control pf-m-first">
440
440
  <button
441
- class="pf-v5-c-button pf-m-plain"
441
+ class="pf-v6-c-button pf-m-plain"
442
442
  type="button"
443
443
  disabled
444
444
  aria-label="Go to first page"
@@ -446,9 +446,9 @@ cssPrefix: pf-v5-c-pagination
446
446
  <i class="fas fa-angle-double-left" aria-hidden="true"></i>
447
447
  </button>
448
448
  </div>
449
- <div class="pf-v5-c-pagination__nav-control pf-m-prev">
449
+ <div class="pf-v6-c-pagination__nav-control pf-m-prev">
450
450
  <button
451
- class="pf-v5-c-button pf-m-plain"
451
+ class="pf-v6-c-button pf-m-plain"
452
452
  type="button"
453
453
  disabled
454
454
  aria-label="Go to previous page"
@@ -456,8 +456,8 @@ cssPrefix: pf-v5-c-pagination
456
456
  <i class="fas fa-angle-left" aria-hidden="true"></i>
457
457
  </button>
458
458
  </div>
459
- <div class="pf-v5-c-pagination__nav-page-select">
460
- <span class="pf-v5-c-form-control">
459
+ <div class="pf-v6-c-pagination__nav-page-select">
460
+ <span class="pf-v6-c-form-control">
461
461
  <input
462
462
  aria-label="Current page"
463
463
  type="number"
@@ -467,18 +467,18 @@ cssPrefix: pf-v5-c-pagination
467
467
  />
468
468
  </span>
469
469
  </div>
470
- <div class="pf-v5-c-pagination__nav-control pf-m-next">
470
+ <div class="pf-v6-c-pagination__nav-control pf-m-next">
471
471
  <button
472
- class="pf-v5-c-button pf-m-plain"
472
+ class="pf-v6-c-button pf-m-plain"
473
473
  type="button"
474
474
  aria-label="Go to next page"
475
475
  >
476
476
  <i class="fas fa-angle-right" aria-hidden="true"></i>
477
477
  </button>
478
478
  </div>
479
- <div class="pf-v5-c-pagination__nav-control pf-m-last">
479
+ <div class="pf-v6-c-pagination__nav-control pf-m-last">
480
480
  <button
481
- class="pf-v5-c-button pf-m-plain"
481
+ class="pf-v6-c-button pf-m-plain"
482
482
  type="button"
483
483
  aria-label="Go to last page"
484
484
  >
@@ -493,52 +493,52 @@ cssPrefix: pf-v5-c-pagination
493
493
  ### Bottom
494
494
 
495
495
  ```html
496
- <div class="pf-v5-c-pagination pf-m-bottom">
497
- <div class="pf-v5-c-pagination__page-menu">
498
- <div class="pf-v5-c-options-menu pf-m-top">
496
+ <div class="pf-v6-c-pagination pf-m-bottom">
497
+ <div class="pf-v6-c-pagination__page-menu">
498
+ <div class="pf-v6-c-options-menu pf-m-top">
499
499
  <button
500
- class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
500
+ class="pf-v6-c-options-menu__toggle pf-m-text pf-m-plain"
501
501
  type="button"
502
502
  id="pagination-options-menu-bottom-example-toggle"
503
503
  aria-haspopup="listbox"
504
504
  aria-expanded="false"
505
505
  >
506
- <span class="pf-v5-c-options-menu__toggle-text">
506
+ <span class="pf-v6-c-options-menu__toggle-text">
507
507
  <b>1 - 10</b>&nbsp;of&nbsp;
508
508
  <b>36</b>
509
509
  </span>
510
- <div class="pf-v5-c-options-menu__toggle-icon">
510
+ <div class="pf-v6-c-options-menu__toggle-icon">
511
511
  <i class="fas fa-caret-down" aria-hidden="true"></i>
512
512
  </div>
513
513
  </button>
514
514
  <ul
515
- class="pf-v5-c-options-menu__menu pf-m-top"
515
+ class="pf-v6-c-options-menu__menu pf-m-top"
516
516
  role="menu"
517
517
  aria-labelledby="pagination-options-menu-bottom-example-toggle"
518
518
  hidden
519
519
  >
520
520
  <li role="none">
521
521
  <button
522
- class="pf-v5-c-options-menu__menu-item"
522
+ class="pf-v6-c-options-menu__menu-item"
523
523
  type="button"
524
524
  role="menuitem"
525
525
  >5 per page</button>
526
526
  </li>
527
527
  <li role="none">
528
528
  <button
529
- class="pf-v5-c-options-menu__menu-item"
529
+ class="pf-v6-c-options-menu__menu-item"
530
530
  type="button"
531
531
  role="menuitem"
532
532
  >
533
533
  10 per page
534
- <div class="pf-v5-c-options-menu__menu-item-icon">
534
+ <div class="pf-v6-c-options-menu__menu-item-icon">
535
535
  <i class="fas fa-check" aria-hidden="true"></i>
536
536
  </div>
537
537
  </button>
538
538
  </li>
539
539
  <li role="none">
540
540
  <button
541
- class="pf-v5-c-options-menu__menu-item"
541
+ class="pf-v6-c-options-menu__menu-item"
542
542
  type="button"
543
543
  role="menuitem"
544
544
  >20 per page</button>
@@ -547,12 +547,12 @@ cssPrefix: pf-v5-c-pagination
547
547
  </div>
548
548
  </div>
549
549
  <nav
550
- class="pf-v5-c-pagination__nav"
550
+ class="pf-v6-c-pagination__nav"
551
551
  aria-label="Pagination nav - bottom example"
552
552
  >
553
- <div class="pf-v5-c-pagination__nav-control pf-m-first">
553
+ <div class="pf-v6-c-pagination__nav-control pf-m-first">
554
554
  <button
555
- class="pf-v5-c-button pf-m-plain"
555
+ class="pf-v6-c-button pf-m-plain"
556
556
  type="button"
557
557
  disabled
558
558
  aria-label="Go to first page"
@@ -560,9 +560,9 @@ cssPrefix: pf-v5-c-pagination
560
560
  <i class="fas fa-angle-double-left" aria-hidden="true"></i>
561
561
  </button>
562
562
  </div>
563
- <div class="pf-v5-c-pagination__nav-control pf-m-prev">
563
+ <div class="pf-v6-c-pagination__nav-control pf-m-prev">
564
564
  <button
565
- class="pf-v5-c-button pf-m-plain"
565
+ class="pf-v6-c-button pf-m-plain"
566
566
  type="button"
567
567
  disabled
568
568
  aria-label="Go to previous page"
@@ -570,8 +570,8 @@ cssPrefix: pf-v5-c-pagination
570
570
  <i class="fas fa-angle-left" aria-hidden="true"></i>
571
571
  </button>
572
572
  </div>
573
- <div class="pf-v5-c-pagination__nav-page-select">
574
- <span class="pf-v5-c-form-control">
573
+ <div class="pf-v6-c-pagination__nav-page-select">
574
+ <span class="pf-v6-c-form-control">
575
575
  <input
576
576
  aria-label="Current page"
577
577
  type="number"
@@ -582,18 +582,18 @@ cssPrefix: pf-v5-c-pagination
582
582
  </span>
583
583
  <span aria-hidden="true">of 4</span>
584
584
  </div>
585
- <div class="pf-v5-c-pagination__nav-control pf-m-next">
585
+ <div class="pf-v6-c-pagination__nav-control pf-m-next">
586
586
  <button
587
- class="pf-v5-c-button pf-m-plain"
587
+ class="pf-v6-c-button pf-m-plain"
588
588
  type="button"
589
589
  aria-label="Go to next page"
590
590
  >
591
591
  <i class="fas fa-angle-right" aria-hidden="true"></i>
592
592
  </button>
593
593
  </div>
594
- <div class="pf-v5-c-pagination__nav-control pf-m-last">
594
+ <div class="pf-v6-c-pagination__nav-control pf-m-last">
595
595
  <button
596
- class="pf-v5-c-button pf-m-plain"
596
+ class="pf-v6-c-button pf-m-plain"
597
597
  type="button"
598
598
  aria-label="Go to last page"
599
599
  >
@@ -618,52 +618,52 @@ cssPrefix: pf-v5-c-pagination
618
618
  <br />
619
619
  <br />
620
620
  <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat, nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.</div>
621
- <div class="pf-v5-c-pagination pf-m-bottom pf-m-sticky">
622
- <div class="pf-v5-c-pagination__page-menu">
623
- <div class="pf-v5-c-options-menu pf-m-top">
621
+ <div class="pf-v6-c-pagination pf-m-bottom pf-m-sticky">
622
+ <div class="pf-v6-c-pagination__page-menu">
623
+ <div class="pf-v6-c-options-menu pf-m-top">
624
624
  <button
625
- class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
625
+ class="pf-v6-c-options-menu__toggle pf-m-text pf-m-plain"
626
626
  type="button"
627
627
  id="pagination-options-menu-bottom-sticky-example-toggle"
628
628
  aria-haspopup="listbox"
629
629
  aria-expanded="false"
630
630
  >
631
- <span class="pf-v5-c-options-menu__toggle-text">
631
+ <span class="pf-v6-c-options-menu__toggle-text">
632
632
  <b>1 - 10</b>&nbsp;of&nbsp;
633
633
  <b>36</b>
634
634
  </span>
635
- <div class="pf-v5-c-options-menu__toggle-icon">
635
+ <div class="pf-v6-c-options-menu__toggle-icon">
636
636
  <i class="fas fa-caret-down" aria-hidden="true"></i>
637
637
  </div>
638
638
  </button>
639
639
  <ul
640
- class="pf-v5-c-options-menu__menu pf-m-top"
640
+ class="pf-v6-c-options-menu__menu pf-m-top"
641
641
  role="menu"
642
642
  aria-labelledby="pagination-options-menu-bottom-sticky-example-toggle"
643
643
  hidden
644
644
  >
645
645
  <li role="none">
646
646
  <button
647
- class="pf-v5-c-options-menu__menu-item"
647
+ class="pf-v6-c-options-menu__menu-item"
648
648
  type="button"
649
649
  role="menuitem"
650
650
  >5 per page</button>
651
651
  </li>
652
652
  <li role="none">
653
653
  <button
654
- class="pf-v5-c-options-menu__menu-item"
654
+ class="pf-v6-c-options-menu__menu-item"
655
655
  type="button"
656
656
  role="menuitem"
657
657
  >
658
658
  10 per page
659
- <div class="pf-v5-c-options-menu__menu-item-icon">
659
+ <div class="pf-v6-c-options-menu__menu-item-icon">
660
660
  <i class="fas fa-check" aria-hidden="true"></i>
661
661
  </div>
662
662
  </button>
663
663
  </li>
664
664
  <li role="none">
665
665
  <button
666
- class="pf-v5-c-options-menu__menu-item"
666
+ class="pf-v6-c-options-menu__menu-item"
667
667
  type="button"
668
668
  role="menuitem"
669
669
  >20 per page</button>
@@ -672,12 +672,12 @@ cssPrefix: pf-v5-c-pagination
672
672
  </div>
673
673
  </div>
674
674
  <nav
675
- class="pf-v5-c-pagination__nav"
675
+ class="pf-v6-c-pagination__nav"
676
676
  aria-label="Pagination nav - bottom sticky example"
677
677
  >
678
- <div class="pf-v5-c-pagination__nav-control pf-m-first">
678
+ <div class="pf-v6-c-pagination__nav-control pf-m-first">
679
679
  <button
680
- class="pf-v5-c-button pf-m-plain"
680
+ class="pf-v6-c-button pf-m-plain"
681
681
  type="button"
682
682
  disabled
683
683
  aria-label="Go to first page"
@@ -685,9 +685,9 @@ cssPrefix: pf-v5-c-pagination
685
685
  <i class="fas fa-angle-double-left" aria-hidden="true"></i>
686
686
  </button>
687
687
  </div>
688
- <div class="pf-v5-c-pagination__nav-control pf-m-prev">
688
+ <div class="pf-v6-c-pagination__nav-control pf-m-prev">
689
689
  <button
690
- class="pf-v5-c-button pf-m-plain"
690
+ class="pf-v6-c-button pf-m-plain"
691
691
  type="button"
692
692
  disabled
693
693
  aria-label="Go to previous page"
@@ -695,8 +695,8 @@ cssPrefix: pf-v5-c-pagination
695
695
  <i class="fas fa-angle-left" aria-hidden="true"></i>
696
696
  </button>
697
697
  </div>
698
- <div class="pf-v5-c-pagination__nav-page-select">
699
- <span class="pf-v5-c-form-control">
698
+ <div class="pf-v6-c-pagination__nav-page-select">
699
+ <span class="pf-v6-c-form-control">
700
700
  <input
701
701
  aria-label="Current page"
702
702
  type="number"
@@ -707,18 +707,18 @@ cssPrefix: pf-v5-c-pagination
707
707
  </span>
708
708
  <span aria-hidden="true">of 4</span>
709
709
  </div>
710
- <div class="pf-v5-c-pagination__nav-control pf-m-next">
710
+ <div class="pf-v6-c-pagination__nav-control pf-m-next">
711
711
  <button
712
- class="pf-v5-c-button pf-m-plain"
712
+ class="pf-v6-c-button pf-m-plain"
713
713
  type="button"
714
714
  aria-label="Go to next page"
715
715
  >
716
716
  <i class="fas fa-angle-right" aria-hidden="true"></i>
717
717
  </button>
718
718
  </div>
719
- <div class="pf-v5-c-pagination__nav-control pf-m-last">
719
+ <div class="pf-v6-c-pagination__nav-control pf-m-last">
720
720
  <button
721
- class="pf-v5-c-button pf-m-plain"
721
+ class="pf-v6-c-button pf-m-plain"
722
722
  type="button"
723
723
  aria-label="Go to last page"
724
724
  >
@@ -733,57 +733,57 @@ cssPrefix: pf-v5-c-pagination
733
733
  ### Top disabled
734
734
 
735
735
  ```html
736
- <div class="pf-v5-c-pagination">
737
- <div class="pf-v5-c-pagination__total-items">
736
+ <div class="pf-v6-c-pagination">
737
+ <div class="pf-v6-c-pagination__total-items">
738
738
  <b>1 - 10</b>&nbsp;of&nbsp;
739
739
  <b>36</b>
740
740
  </div>
741
- <div class="pf-v5-c-pagination__page-menu">
742
- <div class="pf-v5-c-options-menu">
741
+ <div class="pf-v6-c-pagination__page-menu">
742
+ <div class="pf-v6-c-options-menu">
743
743
  <button
744
- class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
744
+ class="pf-v6-c-options-menu__toggle pf-m-text pf-m-plain"
745
745
  type="button"
746
746
  id="pagination-options-menu-top-disabled-example-toggle"
747
747
  aria-haspopup="listbox"
748
748
  aria-expanded="false"
749
749
  disabled
750
750
  >
751
- <span class="pf-v5-c-options-menu__toggle-text">
751
+ <span class="pf-v6-c-options-menu__toggle-text">
752
752
  <b>1 - 10</b>&nbsp;of&nbsp;
753
753
  <b>36</b>
754
754
  </span>
755
- <div class="pf-v5-c-options-menu__toggle-icon">
755
+ <div class="pf-v6-c-options-menu__toggle-icon">
756
756
  <i class="fas fa-caret-down" aria-hidden="true"></i>
757
757
  </div>
758
758
  </button>
759
759
  <ul
760
- class="pf-v5-c-options-menu__menu"
760
+ class="pf-v6-c-options-menu__menu"
761
761
  role="menu"
762
762
  aria-labelledby="pagination-options-menu-top-disabled-example-toggle"
763
763
  hidden
764
764
  >
765
765
  <li role="none">
766
766
  <button
767
- class="pf-v5-c-options-menu__menu-item"
767
+ class="pf-v6-c-options-menu__menu-item"
768
768
  type="button"
769
769
  role="menuitem"
770
770
  >5 per page</button>
771
771
  </li>
772
772
  <li role="none">
773
773
  <button
774
- class="pf-v5-c-options-menu__menu-item"
774
+ class="pf-v6-c-options-menu__menu-item"
775
775
  type="button"
776
776
  role="menuitem"
777
777
  >
778
778
  10 per page
779
- <div class="pf-v5-c-options-menu__menu-item-icon">
779
+ <div class="pf-v6-c-options-menu__menu-item-icon">
780
780
  <i class="fas fa-check" aria-hidden="true"></i>
781
781
  </div>
782
782
  </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
  >20 per page</button>
@@ -792,12 +792,12 @@ cssPrefix: pf-v5-c-pagination
792
792
  </div>
793
793
  </div>
794
794
  <nav
795
- class="pf-v5-c-pagination__nav"
795
+ class="pf-v6-c-pagination__nav"
796
796
  aria-label="Pagination nav - top disabled example"
797
797
  >
798
- <div class="pf-v5-c-pagination__nav-control pf-m-first">
798
+ <div class="pf-v6-c-pagination__nav-control pf-m-first">
799
799
  <button
800
- class="pf-v5-c-button pf-m-plain"
800
+ class="pf-v6-c-button pf-m-plain"
801
801
  type="button"
802
802
  disabled
803
803
  aria-label="Go to first page"
@@ -805,9 +805,9 @@ cssPrefix: pf-v5-c-pagination
805
805
  <i class="fas fa-angle-double-left" aria-hidden="true"></i>
806
806
  </button>
807
807
  </div>
808
- <div class="pf-v5-c-pagination__nav-control pf-m-prev">
808
+ <div class="pf-v6-c-pagination__nav-control pf-m-prev">
809
809
  <button
810
- class="pf-v5-c-button pf-m-plain"
810
+ class="pf-v6-c-button pf-m-plain"
811
811
  type="button"
812
812
  disabled
813
813
  aria-label="Go to previous page"
@@ -815,8 +815,8 @@ cssPrefix: pf-v5-c-pagination
815
815
  <i class="fas fa-angle-left" aria-hidden="true"></i>
816
816
  </button>
817
817
  </div>
818
- <div class="pf-v5-c-pagination__nav-page-select">
819
- <span class="pf-v5-c-form-control pf-m-disabled">
818
+ <div class="pf-v6-c-pagination__nav-page-select">
819
+ <span class="pf-v6-c-form-control pf-m-disabled">
820
820
  <input
821
821
  disabled
822
822
  aria-label="Current page"
@@ -828,9 +828,9 @@ cssPrefix: pf-v5-c-pagination
828
828
  </span>
829
829
  <span aria-hidden="true">of 4</span>
830
830
  </div>
831
- <div class="pf-v5-c-pagination__nav-control pf-m-next">
831
+ <div class="pf-v6-c-pagination__nav-control pf-m-next">
832
832
  <button
833
- class="pf-v5-c-button pf-m-plain"
833
+ class="pf-v6-c-button pf-m-plain"
834
834
  type="button"
835
835
  disabled
836
836
  aria-label="Go to next page"
@@ -838,9 +838,9 @@ cssPrefix: pf-v5-c-pagination
838
838
  <i class="fas fa-angle-right" aria-hidden="true"></i>
839
839
  </button>
840
840
  </div>
841
- <div class="pf-v5-c-pagination__nav-control pf-m-last">
841
+ <div class="pf-v6-c-pagination__nav-control pf-m-last">
842
842
  <button
843
- class="pf-v5-c-button pf-m-plain"
843
+ class="pf-v6-c-button pf-m-plain"
844
844
  type="button"
845
845
  disabled
846
846
  aria-label="Go to last page"
@@ -856,56 +856,56 @@ cssPrefix: pf-v5-c-pagination
856
856
  ### Compact
857
857
 
858
858
  ```html
859
- <div class="pf-v5-c-pagination pf-m-compact">
860
- <div class="pf-v5-c-pagination__total-items">
859
+ <div class="pf-v6-c-pagination pf-m-compact">
860
+ <div class="pf-v6-c-pagination__total-items">
861
861
  <b>1 - 10</b>&nbsp;of&nbsp;
862
862
  <b>36</b>
863
863
  </div>
864
- <div class="pf-v5-c-pagination__page-menu">
865
- <div class="pf-v5-c-options-menu">
864
+ <div class="pf-v6-c-pagination__page-menu">
865
+ <div class="pf-v6-c-options-menu">
866
866
  <button
867
- class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
867
+ class="pf-v6-c-options-menu__toggle pf-m-text pf-m-plain"
868
868
  type="button"
869
869
  id="pagination-options-menu-compact-example-toggle"
870
870
  aria-haspopup="listbox"
871
871
  aria-expanded="false"
872
872
  >
873
- <span class="pf-v5-c-options-menu__toggle-text">
873
+ <span class="pf-v6-c-options-menu__toggle-text">
874
874
  <b>1 - 10</b>&nbsp;of&nbsp;
875
875
  <b>36</b>
876
876
  </span>
877
- <div class="pf-v5-c-options-menu__toggle-icon">
877
+ <div class="pf-v6-c-options-menu__toggle-icon">
878
878
  <i class="fas fa-caret-down" aria-hidden="true"></i>
879
879
  </div>
880
880
  </button>
881
881
  <ul
882
- class="pf-v5-c-options-menu__menu"
882
+ class="pf-v6-c-options-menu__menu"
883
883
  role="menu"
884
884
  aria-labelledby="pagination-options-menu-compact-example-toggle"
885
885
  hidden
886
886
  >
887
887
  <li role="none">
888
888
  <button
889
- class="pf-v5-c-options-menu__menu-item"
889
+ class="pf-v6-c-options-menu__menu-item"
890
890
  type="button"
891
891
  role="menuitem"
892
892
  >5 per page</button>
893
893
  </li>
894
894
  <li role="none">
895
895
  <button
896
- class="pf-v5-c-options-menu__menu-item"
896
+ class="pf-v6-c-options-menu__menu-item"
897
897
  type="button"
898
898
  role="menuitem"
899
899
  >
900
900
  10 per page
901
- <div class="pf-v5-c-options-menu__menu-item-icon">
901
+ <div class="pf-v6-c-options-menu__menu-item-icon">
902
902
  <i class="fas fa-check" aria-hidden="true"></i>
903
903
  </div>
904
904
  </button>
905
905
  </li>
906
906
  <li role="none">
907
907
  <button
908
- class="pf-v5-c-options-menu__menu-item"
908
+ class="pf-v6-c-options-menu__menu-item"
909
909
  type="button"
910
910
  role="menuitem"
911
911
  >20 per page</button>
@@ -914,12 +914,12 @@ cssPrefix: pf-v5-c-pagination
914
914
  </div>
915
915
  </div>
916
916
  <nav
917
- class="pf-v5-c-pagination__nav"
917
+ class="pf-v6-c-pagination__nav"
918
918
  aria-label="Pagination nav - compact example"
919
919
  >
920
- <div class="pf-v5-c-pagination__nav-control pf-m-prev">
920
+ <div class="pf-v6-c-pagination__nav-control pf-m-prev">
921
921
  <button
922
- class="pf-v5-c-button pf-m-plain"
922
+ class="pf-v6-c-button pf-m-plain"
923
923
  type="button"
924
924
  disabled
925
925
  aria-label="Go to previous page"
@@ -927,9 +927,9 @@ cssPrefix: pf-v5-c-pagination
927
927
  <i class="fas fa-angle-left" aria-hidden="true"></i>
928
928
  </button>
929
929
  </div>
930
- <div class="pf-v5-c-pagination__nav-control pf-m-next">
930
+ <div class="pf-v6-c-pagination__nav-control pf-m-next">
931
931
  <button
932
- class="pf-v5-c-button pf-m-plain"
932
+ class="pf-v6-c-button pf-m-plain"
933
933
  type="button"
934
934
  aria-label="Go to next page"
935
935
  >
@@ -944,56 +944,56 @@ cssPrefix: pf-v5-c-pagination
944
944
  ### Top with display summary modifier
945
945
 
946
946
  ```html
947
- <div class="pf-v5-c-pagination pf-m-display-summary">
948
- <div class="pf-v5-c-pagination__total-items">
947
+ <div class="pf-v6-c-pagination pf-m-display-summary">
948
+ <div class="pf-v6-c-pagination__total-items">
949
949
  <b>1 - 10</b>&nbsp;of&nbsp;
950
950
  <b>36</b>
951
951
  </div>
952
- <div class="pf-v5-c-pagination__page-menu">
953
- <div class="pf-v5-c-options-menu">
952
+ <div class="pf-v6-c-pagination__page-menu">
953
+ <div class="pf-v6-c-options-menu">
954
954
  <button
955
- class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
955
+ class="pf-v6-c-options-menu__toggle pf-m-text pf-m-plain"
956
956
  type="button"
957
957
  id="pagination-top-with-summary-modifier-options-menu-toggle"
958
958
  aria-haspopup="listbox"
959
959
  aria-expanded="false"
960
960
  >
961
- <span class="pf-v5-c-options-menu__toggle-text">
961
+ <span class="pf-v6-c-options-menu__toggle-text">
962
962
  <b>1 - 10</b>&nbsp;of&nbsp;
963
963
  <b>36</b>
964
964
  </span>
965
- <div class="pf-v5-c-options-menu__toggle-icon">
965
+ <div class="pf-v6-c-options-menu__toggle-icon">
966
966
  <i class="fas fa-caret-down" aria-hidden="true"></i>
967
967
  </div>
968
968
  </button>
969
969
  <ul
970
- class="pf-v5-c-options-menu__menu"
970
+ class="pf-v6-c-options-menu__menu"
971
971
  role="menu"
972
972
  aria-labelledby="pagination-top-with-summary-modifier-options-menu-toggle"
973
973
  hidden
974
974
  >
975
975
  <li role="none">
976
976
  <button
977
- class="pf-v5-c-options-menu__menu-item"
977
+ class="pf-v6-c-options-menu__menu-item"
978
978
  type="button"
979
979
  role="menuitem"
980
980
  >5 per page</button>
981
981
  </li>
982
982
  <li role="none">
983
983
  <button
984
- class="pf-v5-c-options-menu__menu-item"
984
+ class="pf-v6-c-options-menu__menu-item"
985
985
  type="button"
986
986
  role="menuitem"
987
987
  >
988
988
  10 per page
989
- <div class="pf-v5-c-options-menu__menu-item-icon">
989
+ <div class="pf-v6-c-options-menu__menu-item-icon">
990
990
  <i class="fas fa-check" aria-hidden="true"></i>
991
991
  </div>
992
992
  </button>
993
993
  </li>
994
994
  <li role="none">
995
995
  <button
996
- class="pf-v5-c-options-menu__menu-item"
996
+ class="pf-v6-c-options-menu__menu-item"
997
997
  type="button"
998
998
  role="menuitem"
999
999
  >20 per page</button>
@@ -1002,12 +1002,12 @@ cssPrefix: pf-v5-c-pagination
1002
1002
  </div>
1003
1003
  </div>
1004
1004
  <nav
1005
- class="pf-v5-c-pagination__nav"
1005
+ class="pf-v6-c-pagination__nav"
1006
1006
  aria-label="Pagination nav - top with display summary modifier example"
1007
1007
  >
1008
- <div class="pf-v5-c-pagination__nav-control pf-m-first">
1008
+ <div class="pf-v6-c-pagination__nav-control pf-m-first">
1009
1009
  <button
1010
- class="pf-v5-c-button pf-m-plain"
1010
+ class="pf-v6-c-button pf-m-plain"
1011
1011
  type="button"
1012
1012
  disabled
1013
1013
  aria-label="Go to first page"
@@ -1015,9 +1015,9 @@ cssPrefix: pf-v5-c-pagination
1015
1015
  <i class="fas fa-angle-double-left" aria-hidden="true"></i>
1016
1016
  </button>
1017
1017
  </div>
1018
- <div class="pf-v5-c-pagination__nav-control pf-m-prev">
1018
+ <div class="pf-v6-c-pagination__nav-control pf-m-prev">
1019
1019
  <button
1020
- class="pf-v5-c-button pf-m-plain"
1020
+ class="pf-v6-c-button pf-m-plain"
1021
1021
  type="button"
1022
1022
  disabled
1023
1023
  aria-label="Go to previous page"
@@ -1025,8 +1025,8 @@ cssPrefix: pf-v5-c-pagination
1025
1025
  <i class="fas fa-angle-left" aria-hidden="true"></i>
1026
1026
  </button>
1027
1027
  </div>
1028
- <div class="pf-v5-c-pagination__nav-page-select">
1029
- <span class="pf-v5-c-form-control">
1028
+ <div class="pf-v6-c-pagination__nav-page-select">
1029
+ <span class="pf-v6-c-form-control">
1030
1030
  <input
1031
1031
  aria-label="Current page"
1032
1032
  type="number"
@@ -1037,18 +1037,18 @@ cssPrefix: pf-v5-c-pagination
1037
1037
  </span>
1038
1038
  <span aria-hidden="true">of 4</span>
1039
1039
  </div>
1040
- <div class="pf-v5-c-pagination__nav-control pf-m-next">
1040
+ <div class="pf-v6-c-pagination__nav-control pf-m-next">
1041
1041
  <button
1042
- class="pf-v5-c-button pf-m-plain"
1042
+ class="pf-v6-c-button pf-m-plain"
1043
1043
  type="button"
1044
1044
  aria-label="Go to next page"
1045
1045
  >
1046
1046
  <i class="fas fa-angle-right" aria-hidden="true"></i>
1047
1047
  </button>
1048
1048
  </div>
1049
- <div class="pf-v5-c-pagination__nav-control pf-m-last">
1049
+ <div class="pf-v6-c-pagination__nav-control pf-m-last">
1050
1050
  <button
1051
- class="pf-v5-c-button pf-m-plain"
1051
+ class="pf-v6-c-button pf-m-plain"
1052
1052
  type="button"
1053
1053
  aria-label="Go to last page"
1054
1054
  >
@@ -1063,56 +1063,56 @@ cssPrefix: pf-v5-c-pagination
1063
1063
  ### Top with display full modifier
1064
1064
 
1065
1065
  ```html
1066
- <div class="pf-v5-c-pagination pf-m-display-full">
1067
- <div class="pf-v5-c-pagination__total-items">
1066
+ <div class="pf-v6-c-pagination pf-m-display-full">
1067
+ <div class="pf-v6-c-pagination__total-items">
1068
1068
  <b>1 - 10</b>&nbsp;of&nbsp;
1069
1069
  <b>36</b>
1070
1070
  </div>
1071
- <div class="pf-v5-c-pagination__page-menu">
1072
- <div class="pf-v5-c-options-menu">
1071
+ <div class="pf-v6-c-pagination__page-menu">
1072
+ <div class="pf-v6-c-options-menu">
1073
1073
  <button
1074
- class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
1074
+ class="pf-v6-c-options-menu__toggle pf-m-text pf-m-plain"
1075
1075
  type="button"
1076
1076
  id="pagination-top-with-full-modifier-options-menu-toggle"
1077
1077
  aria-haspopup="listbox"
1078
1078
  aria-expanded="false"
1079
1079
  >
1080
- <span class="pf-v5-c-options-menu__toggle-text">
1080
+ <span class="pf-v6-c-options-menu__toggle-text">
1081
1081
  <b>1 - 10</b>&nbsp;of&nbsp;
1082
1082
  <b>36</b>
1083
1083
  </span>
1084
- <div class="pf-v5-c-options-menu__toggle-icon">
1084
+ <div class="pf-v6-c-options-menu__toggle-icon">
1085
1085
  <i class="fas fa-caret-down" aria-hidden="true"></i>
1086
1086
  </div>
1087
1087
  </button>
1088
1088
  <ul
1089
- class="pf-v5-c-options-menu__menu"
1089
+ class="pf-v6-c-options-menu__menu"
1090
1090
  role="menu"
1091
1091
  aria-labelledby="pagination-top-with-full-modifier-options-menu-toggle"
1092
1092
  hidden
1093
1093
  >
1094
1094
  <li role="none">
1095
1095
  <button
1096
- class="pf-v5-c-options-menu__menu-item"
1096
+ class="pf-v6-c-options-menu__menu-item"
1097
1097
  type="button"
1098
1098
  role="menuitem"
1099
1099
  >5 per page</button>
1100
1100
  </li>
1101
1101
  <li role="none">
1102
1102
  <button
1103
- class="pf-v5-c-options-menu__menu-item"
1103
+ class="pf-v6-c-options-menu__menu-item"
1104
1104
  type="button"
1105
1105
  role="menuitem"
1106
1106
  >
1107
1107
  10 per page
1108
- <div class="pf-v5-c-options-menu__menu-item-icon">
1108
+ <div class="pf-v6-c-options-menu__menu-item-icon">
1109
1109
  <i class="fas fa-check" aria-hidden="true"></i>
1110
1110
  </div>
1111
1111
  </button>
1112
1112
  </li>
1113
1113
  <li role="none">
1114
1114
  <button
1115
- class="pf-v5-c-options-menu__menu-item"
1115
+ class="pf-v6-c-options-menu__menu-item"
1116
1116
  type="button"
1117
1117
  role="menuitem"
1118
1118
  >20 per page</button>
@@ -1121,12 +1121,12 @@ cssPrefix: pf-v5-c-pagination
1121
1121
  </div>
1122
1122
  </div>
1123
1123
  <nav
1124
- class="pf-v5-c-pagination__nav"
1124
+ class="pf-v6-c-pagination__nav"
1125
1125
  aria-label="Pagination nav - top with display full modifier example"
1126
1126
  >
1127
- <div class="pf-v5-c-pagination__nav-control pf-m-first">
1127
+ <div class="pf-v6-c-pagination__nav-control pf-m-first">
1128
1128
  <button
1129
- class="pf-v5-c-button pf-m-plain"
1129
+ class="pf-v6-c-button pf-m-plain"
1130
1130
  type="button"
1131
1131
  disabled
1132
1132
  aria-label="Go to first page"
@@ -1134,9 +1134,9 @@ cssPrefix: pf-v5-c-pagination
1134
1134
  <i class="fas fa-angle-double-left" aria-hidden="true"></i>
1135
1135
  </button>
1136
1136
  </div>
1137
- <div class="pf-v5-c-pagination__nav-control pf-m-prev">
1137
+ <div class="pf-v6-c-pagination__nav-control pf-m-prev">
1138
1138
  <button
1139
- class="pf-v5-c-button pf-m-plain"
1139
+ class="pf-v6-c-button pf-m-plain"
1140
1140
  type="button"
1141
1141
  disabled
1142
1142
  aria-label="Go to previous page"
@@ -1144,8 +1144,8 @@ cssPrefix: pf-v5-c-pagination
1144
1144
  <i class="fas fa-angle-left" aria-hidden="true"></i>
1145
1145
  </button>
1146
1146
  </div>
1147
- <div class="pf-v5-c-pagination__nav-page-select">
1148
- <span class="pf-v5-c-form-control">
1147
+ <div class="pf-v6-c-pagination__nav-page-select">
1148
+ <span class="pf-v6-c-form-control">
1149
1149
  <input
1150
1150
  aria-label="Current page"
1151
1151
  type="number"
@@ -1156,18 +1156,18 @@ cssPrefix: pf-v5-c-pagination
1156
1156
  </span>
1157
1157
  <span aria-hidden="true">of 4</span>
1158
1158
  </div>
1159
- <div class="pf-v5-c-pagination__nav-control pf-m-next">
1159
+ <div class="pf-v6-c-pagination__nav-control pf-m-next">
1160
1160
  <button
1161
- class="pf-v5-c-button pf-m-plain"
1161
+ class="pf-v6-c-button pf-m-plain"
1162
1162
  type="button"
1163
1163
  aria-label="Go to next page"
1164
1164
  >
1165
1165
  <i class="fas fa-angle-right" aria-hidden="true"></i>
1166
1166
  </button>
1167
1167
  </div>
1168
- <div class="pf-v5-c-pagination__nav-control pf-m-last">
1168
+ <div class="pf-v6-c-pagination__nav-control pf-m-last">
1169
1169
  <button
1170
- class="pf-v5-c-button pf-m-plain"
1170
+ class="pf-v6-c-button pf-m-plain"
1171
1171
  type="button"
1172
1172
  aria-label="Go to last page"
1173
1173
  >
@@ -1183,57 +1183,57 @@ cssPrefix: pf-v5-c-pagination
1183
1183
 
1184
1184
  ```html
1185
1185
  <div
1186
- class="pf-v5-c-pagination pf-m-display-summary pf-m-display-full-on-lg pf-m-display-summary-on-xl pf-m-display-full-on-2xl"
1186
+ class="pf-v6-c-pagination pf-m-display-summary pf-m-display-full-on-lg pf-m-display-summary-on-xl pf-m-display-full-on-2xl"
1187
1187
  >
1188
- <div class="pf-v5-c-pagination__total-items">
1188
+ <div class="pf-v6-c-pagination__total-items">
1189
1189
  <b>1 - 10</b>&nbsp;of&nbsp;
1190
1190
  <b>36</b>
1191
1191
  </div>
1192
- <div class="pf-v5-c-pagination__page-menu">
1193
- <div class="pf-v5-c-options-menu">
1192
+ <div class="pf-v6-c-pagination__page-menu">
1193
+ <div class="pf-v6-c-options-menu">
1194
1194
  <button
1195
- class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
1195
+ class="pf-v6-c-options-menu__toggle pf-m-text pf-m-plain"
1196
1196
  type="button"
1197
1197
  id="pagination-top-with-responsive-summary-navigation-modifiers-options-menu-toggle"
1198
1198
  aria-haspopup="listbox"
1199
1199
  aria-expanded="false"
1200
1200
  >
1201
- <span class="pf-v5-c-options-menu__toggle-text">
1201
+ <span class="pf-v6-c-options-menu__toggle-text">
1202
1202
  <b>1 - 10</b>&nbsp;of&nbsp;
1203
1203
  <b>36</b>
1204
1204
  </span>
1205
- <div class="pf-v5-c-options-menu__toggle-icon">
1205
+ <div class="pf-v6-c-options-menu__toggle-icon">
1206
1206
  <i class="fas fa-caret-down" aria-hidden="true"></i>
1207
1207
  </div>
1208
1208
  </button>
1209
1209
  <ul
1210
- class="pf-v5-c-options-menu__menu"
1210
+ class="pf-v6-c-options-menu__menu"
1211
1211
  role="menu"
1212
1212
  aria-labelledby="pagination-top-with-responsive-summary-navigation-modifiers-options-menu-toggle"
1213
1213
  hidden
1214
1214
  >
1215
1215
  <li role="none">
1216
1216
  <button
1217
- class="pf-v5-c-options-menu__menu-item"
1217
+ class="pf-v6-c-options-menu__menu-item"
1218
1218
  type="button"
1219
1219
  role="menuitem"
1220
1220
  >5 per page</button>
1221
1221
  </li>
1222
1222
  <li role="none">
1223
1223
  <button
1224
- class="pf-v5-c-options-menu__menu-item"
1224
+ class="pf-v6-c-options-menu__menu-item"
1225
1225
  type="button"
1226
1226
  role="menuitem"
1227
1227
  >
1228
1228
  10 per page
1229
- <div class="pf-v5-c-options-menu__menu-item-icon">
1229
+ <div class="pf-v6-c-options-menu__menu-item-icon">
1230
1230
  <i class="fas fa-check" aria-hidden="true"></i>
1231
1231
  </div>
1232
1232
  </button>
1233
1233
  </li>
1234
1234
  <li role="none">
1235
1235
  <button
1236
- class="pf-v5-c-options-menu__menu-item"
1236
+ class="pf-v6-c-options-menu__menu-item"
1237
1237
  type="button"
1238
1238
  role="menuitem"
1239
1239
  >20 per page</button>
@@ -1242,12 +1242,12 @@ cssPrefix: pf-v5-c-pagination
1242
1242
  </div>
1243
1243
  </div>
1244
1244
  <nav
1245
- class="pf-v5-c-pagination__nav"
1245
+ class="pf-v6-c-pagination__nav"
1246
1246
  aria-label="Pagination nav - top with responsive display summary and display full modifiers example"
1247
1247
  >
1248
- <div class="pf-v5-c-pagination__nav-control pf-m-first">
1248
+ <div class="pf-v6-c-pagination__nav-control pf-m-first">
1249
1249
  <button
1250
- class="pf-v5-c-button pf-m-plain"
1250
+ class="pf-v6-c-button pf-m-plain"
1251
1251
  type="button"
1252
1252
  disabled
1253
1253
  aria-label="Go to first page"
@@ -1255,9 +1255,9 @@ cssPrefix: pf-v5-c-pagination
1255
1255
  <i class="fas fa-angle-double-left" aria-hidden="true"></i>
1256
1256
  </button>
1257
1257
  </div>
1258
- <div class="pf-v5-c-pagination__nav-control pf-m-prev">
1258
+ <div class="pf-v6-c-pagination__nav-control pf-m-prev">
1259
1259
  <button
1260
- class="pf-v5-c-button pf-m-plain"
1260
+ class="pf-v6-c-button pf-m-plain"
1261
1261
  type="button"
1262
1262
  disabled
1263
1263
  aria-label="Go to previous page"
@@ -1265,8 +1265,8 @@ cssPrefix: pf-v5-c-pagination
1265
1265
  <i class="fas fa-angle-left" aria-hidden="true"></i>
1266
1266
  </button>
1267
1267
  </div>
1268
- <div class="pf-v5-c-pagination__nav-page-select">
1269
- <span class="pf-v5-c-form-control">
1268
+ <div class="pf-v6-c-pagination__nav-page-select">
1269
+ <span class="pf-v6-c-form-control">
1270
1270
  <input
1271
1271
  aria-label="Current page"
1272
1272
  type="number"
@@ -1277,18 +1277,18 @@ cssPrefix: pf-v5-c-pagination
1277
1277
  </span>
1278
1278
  <span aria-hidden="true">of 4</span>
1279
1279
  </div>
1280
- <div class="pf-v5-c-pagination__nav-control pf-m-next">
1280
+ <div class="pf-v6-c-pagination__nav-control pf-m-next">
1281
1281
  <button
1282
- class="pf-v5-c-button pf-m-plain"
1282
+ class="pf-v6-c-button pf-m-plain"
1283
1283
  type="button"
1284
1284
  aria-label="Go to next page"
1285
1285
  >
1286
1286
  <i class="fas fa-angle-right" aria-hidden="true"></i>
1287
1287
  </button>
1288
1288
  </div>
1289
- <div class="pf-v5-c-pagination__nav-control pf-m-last">
1289
+ <div class="pf-v6-c-pagination__nav-control pf-m-last">
1290
1290
  <button
1291
- class="pf-v5-c-button pf-m-plain"
1291
+ class="pf-v6-c-button pf-m-plain"
1292
1292
  type="button"
1293
1293
  aria-label="Go to last page"
1294
1294
  >
@@ -1303,56 +1303,56 @@ cssPrefix: pf-v5-c-pagination
1303
1303
  ### Compact display full modifier
1304
1304
 
1305
1305
  ```html
1306
- <div class="pf-v5-c-pagination pf-m-compact pf-m-display-full">
1307
- <div class="pf-v5-c-pagination__total-items">
1306
+ <div class="pf-v6-c-pagination pf-m-compact pf-m-display-full">
1307
+ <div class="pf-v6-c-pagination__total-items">
1308
1308
  <b>1 - 10</b>&nbsp;of&nbsp;
1309
1309
  <b>36</b>
1310
1310
  </div>
1311
- <div class="pf-v5-c-pagination__page-menu">
1312
- <div class="pf-v5-c-options-menu">
1311
+ <div class="pf-v6-c-pagination__page-menu">
1312
+ <div class="pf-v6-c-options-menu">
1313
1313
  <button
1314
- class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
1314
+ class="pf-v6-c-options-menu__toggle pf-m-text pf-m-plain"
1315
1315
  type="button"
1316
1316
  id="pagination-compact-with-full-modifier-options-menu-toggle"
1317
1317
  aria-haspopup="listbox"
1318
1318
  aria-expanded="false"
1319
1319
  >
1320
- <span class="pf-v5-c-options-menu__toggle-text">
1320
+ <span class="pf-v6-c-options-menu__toggle-text">
1321
1321
  <b>1 - 10</b>&nbsp;of&nbsp;
1322
1322
  <b>36</b>
1323
1323
  </span>
1324
- <div class="pf-v5-c-options-menu__toggle-icon">
1324
+ <div class="pf-v6-c-options-menu__toggle-icon">
1325
1325
  <i class="fas fa-caret-down" aria-hidden="true"></i>
1326
1326
  </div>
1327
1327
  </button>
1328
1328
  <ul
1329
- class="pf-v5-c-options-menu__menu"
1329
+ class="pf-v6-c-options-menu__menu"
1330
1330
  role="menu"
1331
1331
  aria-labelledby="pagination-compact-with-full-modifier-options-menu-toggle"
1332
1332
  hidden
1333
1333
  >
1334
1334
  <li role="none">
1335
1335
  <button
1336
- class="pf-v5-c-options-menu__menu-item"
1336
+ class="pf-v6-c-options-menu__menu-item"
1337
1337
  type="button"
1338
1338
  role="menuitem"
1339
1339
  >5 per page</button>
1340
1340
  </li>
1341
1341
  <li role="none">
1342
1342
  <button
1343
- class="pf-v5-c-options-menu__menu-item"
1343
+ class="pf-v6-c-options-menu__menu-item"
1344
1344
  type="button"
1345
1345
  role="menuitem"
1346
1346
  >
1347
1347
  10 per page
1348
- <div class="pf-v5-c-options-menu__menu-item-icon">
1348
+ <div class="pf-v6-c-options-menu__menu-item-icon">
1349
1349
  <i class="fas fa-check" aria-hidden="true"></i>
1350
1350
  </div>
1351
1351
  </button>
1352
1352
  </li>
1353
1353
  <li role="none">
1354
1354
  <button
1355
- class="pf-v5-c-options-menu__menu-item"
1355
+ class="pf-v6-c-options-menu__menu-item"
1356
1356
  type="button"
1357
1357
  role="menuitem"
1358
1358
  >20 per page</button>
@@ -1361,12 +1361,12 @@ cssPrefix: pf-v5-c-pagination
1361
1361
  </div>
1362
1362
  </div>
1363
1363
  <nav
1364
- class="pf-v5-c-pagination__nav"
1364
+ class="pf-v6-c-pagination__nav"
1365
1365
  aria-label="Pagination nav - compact display full modifier example"
1366
1366
  >
1367
- <div class="pf-v5-c-pagination__nav-control pf-m-prev">
1367
+ <div class="pf-v6-c-pagination__nav-control pf-m-prev">
1368
1368
  <button
1369
- class="pf-v5-c-button pf-m-plain"
1369
+ class="pf-v6-c-button pf-m-plain"
1370
1370
  type="button"
1371
1371
  disabled
1372
1372
  aria-label="Go to previous page"
@@ -1374,9 +1374,9 @@ cssPrefix: pf-v5-c-pagination
1374
1374
  <i class="fas fa-angle-left" aria-hidden="true"></i>
1375
1375
  </button>
1376
1376
  </div>
1377
- <div class="pf-v5-c-pagination__nav-control pf-m-next">
1377
+ <div class="pf-v6-c-pagination__nav-control pf-m-next">
1378
1378
  <button
1379
- class="pf-v5-c-button pf-m-plain"
1379
+ class="pf-v6-c-button pf-m-plain"
1380
1380
  type="button"
1381
1381
  aria-label="Go to next page"
1382
1382
  >
@@ -1392,57 +1392,57 @@ cssPrefix: pf-v5-c-pagination
1392
1392
 
1393
1393
  ```html
1394
1394
  <div
1395
- class="pf-v5-c-pagination pf-m-inset-none pf-m-inset-md-on-md pf-m-inset-2xl-on-lg"
1395
+ class="pf-v6-c-pagination pf-m-inset-none pf-m-inset-md-on-md pf-m-inset-2xl-on-lg"
1396
1396
  >
1397
- <div class="pf-v5-c-pagination__total-items">
1397
+ <div class="pf-v6-c-pagination__total-items">
1398
1398
  <b>1 - 10</b>&nbsp;of&nbsp;
1399
1399
  <b>36</b>
1400
1400
  </div>
1401
- <div class="pf-v5-c-pagination__page-menu">
1402
- <div class="pf-v5-c-options-menu">
1401
+ <div class="pf-v6-c-pagination__page-menu">
1402
+ <div class="pf-v6-c-options-menu">
1403
1403
  <button
1404
- class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
1404
+ class="pf-v6-c-options-menu__toggle pf-m-text pf-m-plain"
1405
1405
  type="button"
1406
1406
  id="pagination-inset-options-menu-toggle"
1407
1407
  aria-haspopup="listbox"
1408
1408
  aria-expanded="false"
1409
1409
  >
1410
- <span class="pf-v5-c-options-menu__toggle-text">
1410
+ <span class="pf-v6-c-options-menu__toggle-text">
1411
1411
  <b>1 - 10</b>&nbsp;of&nbsp;
1412
1412
  <b>36</b>
1413
1413
  </span>
1414
- <div class="pf-v5-c-options-menu__toggle-icon">
1414
+ <div class="pf-v6-c-options-menu__toggle-icon">
1415
1415
  <i class="fas fa-caret-down" aria-hidden="true"></i>
1416
1416
  </div>
1417
1417
  </button>
1418
1418
  <ul
1419
- class="pf-v5-c-options-menu__menu"
1419
+ class="pf-v6-c-options-menu__menu"
1420
1420
  role="menu"
1421
1421
  aria-labelledby="pagination-inset-options-menu-toggle"
1422
1422
  hidden
1423
1423
  >
1424
1424
  <li role="none">
1425
1425
  <button
1426
- class="pf-v5-c-options-menu__menu-item"
1426
+ class="pf-v6-c-options-menu__menu-item"
1427
1427
  type="button"
1428
1428
  role="menuitem"
1429
1429
  >5 per page</button>
1430
1430
  </li>
1431
1431
  <li role="none">
1432
1432
  <button
1433
- class="pf-v5-c-options-menu__menu-item"
1433
+ class="pf-v6-c-options-menu__menu-item"
1434
1434
  type="button"
1435
1435
  role="menuitem"
1436
1436
  >
1437
1437
  10 per page
1438
- <div class="pf-v5-c-options-menu__menu-item-icon">
1438
+ <div class="pf-v6-c-options-menu__menu-item-icon">
1439
1439
  <i class="fas fa-check" aria-hidden="true"></i>
1440
1440
  </div>
1441
1441
  </button>
1442
1442
  </li>
1443
1443
  <li role="none">
1444
1444
  <button
1445
- class="pf-v5-c-options-menu__menu-item"
1445
+ class="pf-v6-c-options-menu__menu-item"
1446
1446
  type="button"
1447
1447
  role="menuitem"
1448
1448
  >20 per page</button>
@@ -1451,12 +1451,12 @@ cssPrefix: pf-v5-c-pagination
1451
1451
  </div>
1452
1452
  </div>
1453
1453
  <nav
1454
- class="pf-v5-c-pagination__nav"
1454
+ class="pf-v6-c-pagination__nav"
1455
1455
  aria-label="Pagination nav - inset example"
1456
1456
  >
1457
- <div class="pf-v5-c-pagination__nav-control pf-m-first">
1457
+ <div class="pf-v6-c-pagination__nav-control pf-m-first">
1458
1458
  <button
1459
- class="pf-v5-c-button pf-m-plain"
1459
+ class="pf-v6-c-button pf-m-plain"
1460
1460
  type="button"
1461
1461
  disabled
1462
1462
  aria-label="Go to first page"
@@ -1464,9 +1464,9 @@ cssPrefix: pf-v5-c-pagination
1464
1464
  <i class="fas fa-angle-double-left" aria-hidden="true"></i>
1465
1465
  </button>
1466
1466
  </div>
1467
- <div class="pf-v5-c-pagination__nav-control pf-m-prev">
1467
+ <div class="pf-v6-c-pagination__nav-control pf-m-prev">
1468
1468
  <button
1469
- class="pf-v5-c-button pf-m-plain"
1469
+ class="pf-v6-c-button pf-m-plain"
1470
1470
  type="button"
1471
1471
  disabled
1472
1472
  aria-label="Go to previous page"
@@ -1474,8 +1474,8 @@ cssPrefix: pf-v5-c-pagination
1474
1474
  <i class="fas fa-angle-left" aria-hidden="true"></i>
1475
1475
  </button>
1476
1476
  </div>
1477
- <div class="pf-v5-c-pagination__nav-page-select">
1478
- <span class="pf-v5-c-form-control">
1477
+ <div class="pf-v6-c-pagination__nav-page-select">
1478
+ <span class="pf-v6-c-form-control">
1479
1479
  <input
1480
1480
  aria-label="Current page"
1481
1481
  type="number"
@@ -1486,18 +1486,18 @@ cssPrefix: pf-v5-c-pagination
1486
1486
  </span>
1487
1487
  <span aria-hidden="true">of 4</span>
1488
1488
  </div>
1489
- <div class="pf-v5-c-pagination__nav-control pf-m-next">
1489
+ <div class="pf-v6-c-pagination__nav-control pf-m-next">
1490
1490
  <button
1491
- class="pf-v5-c-button pf-m-plain"
1491
+ class="pf-v6-c-button pf-m-plain"
1492
1492
  type="button"
1493
1493
  aria-label="Go to next page"
1494
1494
  >
1495
1495
  <i class="fas fa-angle-right" aria-hidden="true"></i>
1496
1496
  </button>
1497
1497
  </div>
1498
- <div class="pf-v5-c-pagination__nav-control pf-m-last">
1498
+ <div class="pf-v6-c-pagination__nav-control pf-m-last">
1499
1499
  <button
1500
- class="pf-v5-c-button pf-m-plain"
1500
+ class="pf-v6-c-button pf-m-plain"
1501
1501
  type="button"
1502
1502
  aria-label="Go to last page"
1503
1503
  >