@patternfly/patternfly 6.0.0-alpha.8 → 6.0.0-alpha.81

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 (334) hide show
  1. package/CODE_OF_CONDUCT.md +1 -2
  2. package/assets/images/PF-Backdrop.svg +1 -0
  3. package/assets/images/PF-HorizontalLogo-Color.svg +29 -0
  4. package/assets/images/PF-HorizontalLogo-Reverse.svg +28 -0
  5. package/assets/images/PF-IconLogo-Reverse.svg +14 -0
  6. package/assets/images/PF-IconLogo-color.svg +17 -0
  7. package/assets/images/PF-IconLogo.svg +17 -0
  8. package/assets/images/logo__pf--reverse-on-md.svg +1 -1
  9. package/assets/images/pf-background.svg +22 -0
  10. package/assets/images/pf-c-brand__logo-on-lg-white.svg +32 -0
  11. package/assets/images/pf-c-brand__logo-on-md-white.svg +42 -0
  12. package/assets/images/pf-c-brand__logo-on-sm-white.svg +17 -0
  13. package/assets/images/pf-c-brand__logo-on-sm.svg +1 -1
  14. package/assets/images/pf-c-brand__logo-on-xl-white.svg +39 -0
  15. package/assets/images/pf_logo_white.hbs +35 -0
  16. package/assets/images/pf_logo_white.svg +38 -0
  17. package/base/_common.scss +8 -4
  18. package/base/_globals.scss +4 -6
  19. package/base/_variables.scss +2 -7
  20. package/base/patternfly-common.css +8 -4
  21. package/base/patternfly-globals.css +4 -3
  22. package/base/patternfly-variables.css +884 -871
  23. package/base/tokens/_tokens-charts.scss +159 -0
  24. package/base/tokens/_tokens-dark.scss +311 -287
  25. package/base/tokens/_tokens-default.scss +425 -329
  26. package/base/tokens/_tokens-font.scss +29 -36
  27. package/base/tokens/_tokens-palette.scss +71 -71
  28. package/base/tokens/_workspace-overrides.scss +7 -0
  29. package/components/AboutModalBox/about-modal-box.css +57 -94
  30. package/components/AboutModalBox/about-modal-box.scss +37 -62
  31. package/components/Accordion/accordion.css +85 -177
  32. package/components/Accordion/accordion.scss +96 -195
  33. package/components/ActionList/action-list.css +18 -17
  34. package/components/ActionList/action-list.scss +26 -16
  35. package/components/Alert/alert-group.css +20 -16
  36. package/components/Alert/alert-group.scss +20 -16
  37. package/components/Alert/alert.css +59 -84
  38. package/components/Alert/alert.scss +62 -78
  39. package/components/Avatar/avatar.css +10 -13
  40. package/components/Avatar/avatar.scss +10 -17
  41. package/components/BackToTop/back-to-top.css +17 -16
  42. package/components/BackToTop/back-to-top.scss +12 -12
  43. package/components/Backdrop/backdrop.css +6 -2
  44. package/components/Backdrop/backdrop.scss +5 -2
  45. package/components/BackgroundImage/background-image.css +5 -1
  46. package/components/BackgroundImage/background-image.scss +5 -1
  47. package/components/Badge/badge.css +23 -15
  48. package/components/Badge/badge.scss +25 -17
  49. package/components/Banner/banner.css +90 -64
  50. package/components/Banner/banner.scss +95 -32
  51. package/components/Breadcrumb/breadcrumb.css +19 -16
  52. package/components/Breadcrumb/breadcrumb.scss +18 -16
  53. package/components/Button/button.css +419 -353
  54. package/components/Button/button.scss +476 -476
  55. package/components/CalendarMonth/calendar-month.css +61 -92
  56. package/components/CalendarMonth/calendar-month.scss +68 -63
  57. package/components/Card/card.css +100 -194
  58. package/components/Card/card.scss +121 -237
  59. package/components/Check/check.css +24 -21
  60. package/components/Check/check.scss +25 -23
  61. package/components/ClipboardCopy/clipboard-copy.css +30 -33
  62. package/components/ClipboardCopy/clipboard-copy.scss +34 -26
  63. package/components/CodeBlock/code-block.css +22 -9
  64. package/components/CodeBlock/code-block.scss +22 -10
  65. package/components/CodeEditor/code-editor.css +94 -72
  66. package/components/CodeEditor/code-editor.scss +104 -82
  67. package/components/Content/content.css +7 -7
  68. package/components/Content/content.scss +7 -7
  69. package/components/DataList/data-list.css +101 -158
  70. package/components/DataList/data-list.scss +95 -154
  71. package/components/DatePicker/date-picker.css +13 -14
  72. package/components/DatePicker/date-picker.scss +12 -16
  73. package/components/DescriptionList/description-list.css +39 -34
  74. package/components/DescriptionList/description-list.scss +25 -25
  75. package/components/Divider/divider.css +91 -169
  76. package/components/Divider/divider.scss +60 -77
  77. package/components/DragDrop/drag-drop.css +18 -14
  78. package/components/DragDrop/drag-drop.scss +18 -17
  79. package/components/Drawer/drawer.css +112 -113
  80. package/components/Drawer/drawer.scss +134 -134
  81. package/components/Dropdown/dropdown.css +1 -3
  82. package/components/Dropdown/dropdown.scss +2 -6
  83. package/components/DualListSelector/dual-list-selector.css +56 -48
  84. package/components/DualListSelector/dual-list-selector.scss +57 -50
  85. package/components/EmptyState/empty-state.css +57 -34
  86. package/components/EmptyState/empty-state.scss +63 -34
  87. package/components/ExpandableSection/expandable-section.css +64 -62
  88. package/components/ExpandableSection/expandable-section.scss +73 -76
  89. package/components/FileUpload/file-upload.css +28 -34
  90. package/components/FileUpload/file-upload.scss +30 -42
  91. package/components/Form/form.css +68 -114
  92. package/components/Form/form.scss +65 -126
  93. package/components/FormControl/form-control.css +86 -111
  94. package/components/FormControl/form-control.scss +88 -92
  95. package/components/HelperText/helper-text.css +28 -34
  96. package/components/HelperText/helper-text.scss +30 -40
  97. package/components/Hint/hint.css +28 -21
  98. package/components/Hint/hint.scss +28 -24
  99. package/components/Icon/icon.css +154 -18
  100. package/components/Icon/icon.scss +187 -20
  101. package/components/InlineEdit/inline-edit.css +8 -7
  102. package/components/InlineEdit/inline-edit.scss +8 -7
  103. package/components/InputGroup/input-group.css +22 -38
  104. package/components/InputGroup/input-group.scss +21 -29
  105. package/components/JumpLinks/jump-links.css +34 -34
  106. package/components/JumpLinks/jump-links.scss +35 -36
  107. package/components/Label/label-group.css +39 -44
  108. package/components/Label/label-group.scss +39 -45
  109. package/components/Label/label.css +380 -355
  110. package/components/Label/label.scss +434 -348
  111. package/components/List/list.css +16 -16
  112. package/components/List/list.scss +17 -17
  113. package/components/Login/login.css +70 -97
  114. package/components/Login/login.scss +56 -64
  115. package/components/Masthead/masthead.css +261 -502
  116. package/components/Masthead/masthead.scss +123 -286
  117. package/components/Menu/menu.css +3 -0
  118. package/components/Menu/menu.scss +7 -3
  119. package/components/MenuToggle/menu-toggle.css +8 -8
  120. package/components/MenuToggle/menu-toggle.scss +8 -10
  121. package/components/ModalBox/modal-box.css +59 -52
  122. package/components/ModalBox/modal-box.scss +57 -53
  123. package/components/MultipleFileUpload/multiple-file-upload.css +77 -50
  124. package/components/MultipleFileUpload/multiple-file-upload.scss +82 -53
  125. package/components/Nav/nav.css +240 -918
  126. package/components/Nav/nav.scss +300 -1082
  127. package/components/NotificationBadge/notification-badge.css +56 -81
  128. package/components/NotificationBadge/notification-badge.scss +60 -97
  129. package/components/NotificationDrawer/notification-drawer.css +104 -115
  130. package/components/NotificationDrawer/notification-drawer.scss +106 -116
  131. package/components/NumberInput/number-input.css +8 -8
  132. package/components/NumberInput/number-input.scss +7 -12
  133. package/components/OverflowMenu/overflow-menu.css +17 -47
  134. package/components/OverflowMenu/overflow-menu.scss +27 -65
  135. package/components/Page/page.css +56 -164
  136. package/components/Page/page.scss +60 -154
  137. package/components/Pagination/pagination.css +57 -124
  138. package/components/Pagination/pagination.scss +40 -128
  139. package/components/Panel/panel.css +27 -23
  140. package/components/Panel/panel.scss +29 -26
  141. package/components/Popover/popover.css +42 -53
  142. package/components/Popover/popover.scss +46 -55
  143. package/components/Progress/progress.css +31 -45
  144. package/components/Progress/progress.scss +36 -55
  145. package/components/ProgressStepper/progress-stepper.css +72 -69
  146. package/components/ProgressStepper/progress-stepper.scss +65 -65
  147. package/components/Radio/radio.css +27 -20
  148. package/components/Radio/radio.scss +28 -22
  149. package/components/Sidebar/sidebar.css +20 -9
  150. package/components/Sidebar/sidebar.scss +23 -11
  151. package/components/SimpleList/simple-list.css +35 -52
  152. package/components/SimpleList/simple-list.scss +41 -51
  153. package/components/Skeleton/skeleton.css +18 -20
  154. package/components/Skeleton/skeleton.scss +17 -21
  155. package/components/SkipToContent/skip-to-content.css +6 -3
  156. package/components/SkipToContent/skip-to-content.scss +8 -6
  157. package/components/Slider/slider.css +34 -30
  158. package/components/Slider/slider.scss +46 -43
  159. package/components/Spinner/spinner.css +17 -34
  160. package/components/Spinner/spinner.scss +19 -47
  161. package/components/Switch/switch.css +42 -38
  162. package/components/Switch/switch.scss +48 -43
  163. package/components/TabContent/tab-content.css +17 -11
  164. package/components/TabContent/tab-content.scss +18 -14
  165. package/components/Table/table-grid.css +29 -45
  166. package/components/Table/table-grid.scss +40 -53
  167. package/components/Table/table-scrollable.css +6 -6
  168. package/components/Table/table-scrollable.scss +8 -8
  169. package/components/Table/table-tree-view.css +76 -74
  170. package/components/Table/table-tree-view.scss +44 -39
  171. package/components/Table/table.css +67 -93
  172. package/components/Table/table.scss +83 -105
  173. package/components/Tabs/tabs.css +143 -175
  174. package/components/Tabs/tabs.scss +159 -217
  175. package/components/Tile/tile.css +40 -81
  176. package/components/Tile/tile.scss +38 -84
  177. package/components/Timestamp/timestamp.css +12 -9
  178. package/components/Timestamp/timestamp.scss +11 -10
  179. package/components/Title/title.css +70 -19
  180. package/components/Title/title.scss +90 -20
  181. package/components/ToggleGroup/toggle-group.css +54 -48
  182. package/components/ToggleGroup/toggle-group.scss +62 -50
  183. package/components/Toolbar/toolbar.css +2527 -1031
  184. package/components/Toolbar/toolbar.scss +233 -520
  185. package/components/Tooltip/tooltip.css +16 -18
  186. package/components/Tooltip/tooltip.scss +20 -24
  187. package/components/TreeView/tree-view.css +76 -97
  188. package/components/TreeView/tree-view.scss +82 -113
  189. package/components/Truncate/truncate.css +4 -0
  190. package/components/Truncate/truncate.scss +3 -0
  191. package/docs/components/AboutModalBox/examples/AboutModalBox.md +2 -2
  192. package/docs/components/Accordion/examples/Accordion.md +614 -416
  193. package/docs/components/ActionList/examples/ActionList.md +73 -22
  194. package/docs/components/Alert/examples/Alert.md +3 -3
  195. package/docs/components/Avatar/examples/Avatar.md +5 -19
  196. package/docs/components/BackgroundImage/examples/BackgroundImage.md +1 -1
  197. package/docs/components/Badge/examples/Badge.md +21 -0
  198. package/docs/components/Banner/examples/Banner.md +48 -25
  199. package/docs/components/Brand/examples/Brand.css +12 -0
  200. package/docs/components/Brand/examples/Brand.md +51 -32
  201. package/docs/components/Breadcrumb/examples/Breadcrumb.md +1 -1
  202. package/docs/components/Button/examples/Button.css +4 -0
  203. package/docs/components/Button/examples/Button.md +1419 -93
  204. package/docs/components/CalendarMonth/examples/CalendarMonth.md +48 -224
  205. package/docs/components/Card/examples/Card.md +550 -133
  206. package/docs/components/Check/examples/Check.md +1 -0
  207. package/docs/components/CodeBlock/examples/CodeBlock.md +4 -4
  208. package/docs/components/CodeEditor/examples/CodeEditor.md +144 -132
  209. package/docs/components/Content/examples/Content.md +5 -5
  210. package/docs/components/DatePicker/examples/DatePicker.md +5 -2
  211. package/docs/components/Divider/examples/Divider.css +3 -1
  212. package/docs/components/Divider/examples/Divider.md +30 -5
  213. package/docs/components/DragDrop/examples/DragDrop.css +1 -1
  214. package/docs/components/Drawer/examples/Drawer.md +294 -256
  215. package/docs/components/EmptyState/examples/EmptyState.md +45 -1
  216. package/docs/components/ExpandableSection/examples/ExpandableSection.md +49 -28
  217. package/docs/components/FileUpload/examples/FileUpload.md +112 -53
  218. package/docs/components/Form/examples/Form.md +134 -89
  219. package/docs/components/Icon/examples/Icon.md +82 -11
  220. package/docs/components/InlineEdit/examples/InlineEdit.md +3 -1
  221. package/docs/components/JumpLinks/examples/JumpLinks.md +280 -168
  222. package/docs/components/Label/examples/Label.css +4 -0
  223. package/docs/components/Label/examples/Label.md +3090 -703
  224. package/docs/components/LogViewer/examples/LogViewer.md +180 -180
  225. package/docs/components/Login/examples/Login.md +10 -5
  226. package/docs/components/Masthead/examples/masthead.md +443 -65
  227. package/docs/components/Menu/examples/Menu.md +507 -473
  228. package/docs/components/MenuToggle/examples/MenuToggle.md +106 -114
  229. package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +9 -9
  230. package/docs/components/Nav/examples/Navigation.css +1 -23
  231. package/docs/components/Nav/examples/Navigation.md +209 -356
  232. package/docs/components/NotificationBadge/examples/NotificationBadge.md +5 -7
  233. package/docs/components/Page/examples/Page.css +0 -8
  234. package/docs/components/Page/examples/Page.md +22 -21
  235. package/docs/components/Pagination/examples/Pagination.md +663 -637
  236. package/docs/components/Panel/examples/Panel.md +12 -0
  237. package/docs/components/Popover/examples/Popover.md +1 -1
  238. package/docs/components/ProgressStepper/examples/ProgressStepper.md +15 -14
  239. package/docs/components/Radio/examples/Radio.md +1 -1
  240. package/docs/components/Sidebar/examples/Sidebar.md +19 -0
  241. package/docs/components/SimpleList/examples/SimpleList.md +3 -3
  242. package/docs/components/TabContent/examples/TabContent.md +10 -10
  243. package/docs/components/Table/examples/Table.md +8 -8
  244. package/docs/components/Tabs/examples/Tabs.css +1 -1
  245. package/docs/components/Tabs/examples/Tabs.md +1025 -826
  246. package/docs/components/TextInputGroup/examples/TextInputGroup.md +9 -9
  247. package/docs/components/Tile/examples/Tile.md +264 -144
  248. package/docs/components/Title/examples/Title.md +18 -0
  249. package/docs/components/Toolbar/examples/Toolbar.css +20 -15
  250. package/docs/components/Toolbar/examples/Toolbar.md +985 -3355
  251. package/docs/components/TreeView/examples/TreeView.md +7 -57
  252. package/docs/components/Truncate/examples/Truncate.css +2 -2
  253. package/docs/demos/AboutModal/examples/AboutModal.md +104 -31
  254. package/docs/demos/Alert/examples/Alert.md +330 -87
  255. package/docs/demos/BackToTop/examples/BackToTop.md +102 -29
  256. package/docs/demos/Banner/examples/Banner.md +211 -60
  257. package/docs/demos/Card/examples/Card.md +2 -2
  258. package/docs/demos/CardView/examples/CardView.md +241 -187
  259. package/docs/demos/ContextSelector/examples/ContextSelector.md +377 -94
  260. package/docs/demos/Dashboard/examples/Dashboard.md +102 -29
  261. package/docs/demos/DataList/examples/DataList.md +999 -938
  262. package/docs/demos/DescriptionList/examples/DescriptionList.md +306 -87
  263. package/docs/demos/Drawer/examples/Drawer.md +640 -251
  264. package/docs/demos/Form/examples/BasicForms.md +138 -84
  265. package/docs/demos/JumpLinks/examples/JumpLinks.md +917 -385
  266. package/docs/demos/Masthead/examples/Masthead.md +786 -342
  267. package/docs/demos/Modal/examples/Modal.md +645 -198
  268. package/docs/demos/Nav/examples/Nav.md +691 -902
  269. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +515 -145
  270. package/docs/demos/Page/examples/Page.md +942 -273
  271. package/docs/demos/Page/examples/Penta.md +66 -26
  272. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +13 -9
  273. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +44 -32
  274. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +1183 -832
  275. package/docs/demos/Skeleton/examples/Skeleton.md +102 -29
  276. package/docs/demos/Table/examples/Table.md +3811 -3456
  277. package/docs/demos/Tabs/examples/Tabs.md +636 -194
  278. package/docs/demos/Toolbar/examples/Toolbar.css +10 -0
  279. package/docs/demos/Toolbar/examples/Toolbar.md +1316 -1478
  280. package/docs/demos/Wizard/examples/Wizard.md +918 -261
  281. package/docs/layouts/Flex/examples/Flex.md +11 -11
  282. package/package.json +32 -32
  283. package/patternfly-base-no-globals-theme-dark-unversioned.css +897 -880
  284. package/patternfly-base-no-globals.css +897 -880
  285. package/patternfly-base-theme-dark-unversioned.css +890 -872
  286. package/patternfly-base.css +890 -872
  287. package/patternfly-no-globals.css +8107 -8027
  288. package/patternfly-theme-dark-unversioned.css +8111 -8030
  289. package/patternfly.css +8111 -8030
  290. package/patternfly.min.css +1 -1
  291. package/patternfly.min.css.map +1 -1
  292. package/sass-utilities/mixins.scss +18 -0
  293. package/base/themes/dark/_variables.scss +0 -102
  294. package/components/AboutModalBox/themes/dark/about-modal-box.scss +0 -7
  295. package/components/Accordion/themes/dark/accordion.scss +0 -9
  296. package/components/Alert/themes/dark/alert.scss +0 -17
  297. package/components/Badge/themes/dark/badge.scss +0 -9
  298. package/components/Banner/themes/dark/banner.scss +0 -14
  299. package/components/Button/themes/dark/button.scss +0 -51
  300. package/components/CalendarMonth/themes/dark/calendar-month.scss +0 -37
  301. package/components/Card/themes/dark/card.scss +0 -20
  302. package/components/ClipboardCopy/themes/dark/clipboard-copy.scss +0 -19
  303. package/components/CodeEditor/themes/dark/code-editor.scss +0 -14
  304. package/components/DataList/themes/dark/data-list.scss +0 -10
  305. package/components/DatePicker/themes/dark/date-picker.scss +0 -8
  306. package/components/DragDrop/themes/dark/drag-drop.scss +0 -7
  307. package/components/Drawer/themes/dark/drawer.scss +0 -13
  308. package/components/DualListSelector/themes/dark/dual-list-selector.scss +0 -9
  309. package/components/Form/themes/dark/form.scss +0 -7
  310. package/components/FormControl/themes/dark/form-control.scss +0 -24
  311. package/components/HelperText/themes/dark/helper-text.scss +0 -7
  312. package/components/Hint/themes/dark/hint.scss +0 -8
  313. package/components/InputGroup/themes/dark/input-group.scss +0 -22
  314. package/components/Label/themes/dark/label.scss +0 -53
  315. package/components/Login/themes/dark/login.scss +0 -12
  316. package/components/Masthead/themes/dark/masthead.scss +0 -14
  317. package/components/ModalBox/themes/dark/modal-box.scss +0 -7
  318. package/components/NotificationBadge/themes/dark/notification-badge.scss +0 -10
  319. package/components/NotificationDrawer/themes/dark/notification-drawer.scss +0 -14
  320. package/components/Page/themes/dark/page.scss +0 -69
  321. package/components/Pagination/themes/dark/pagination.scss +0 -7
  322. package/components/Panel/themes/dark/panel.scss +0 -7
  323. package/components/Popover/themes/dark/popover.scss +0 -11
  324. package/components/Progress/themes/dark/progress.scss +0 -9
  325. package/components/SimpleList/themes/dark/simple-list.scss +0 -14
  326. package/components/Skeleton/themes/dark/skeleton.scss +0 -10
  327. package/components/Switch/themes/dark/switch.scss +0 -11
  328. package/components/Tabs/themes/dark/tabs.scss +0 -10
  329. package/components/Tile/themes/dark/tile.scss +0 -10
  330. package/components/ToggleGroup/themes/dark/toggle-group.scss +0 -12
  331. package/components/Tooltip/themes/dark/tooltip.scss +0 -8
  332. package/components/TreeView/themes/dark/tree-view.scss +0 -8
  333. package/docs/components/Avatar/examples/Avatar.css +0 -3
  334. package/docs/components/NotificationBadge/examples/NotificationBadge.css +0 -3
package/docs/components/Pagination/examples/Pagination.md CHANGED
@@ -14,55 +14,57 @@ cssPrefix: pf-v5-c-pagination
14
14
  <b>1 - 10</b>&nbsp;of&nbsp;
15
15
  <b>36</b>
16
16
  </div>
17
- <div class="pf-v5-c-options-menu">
18
- <button
19
- class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
20
- type="button"
21
- id="pagination-options-menu-top-example-toggle"
22
- aria-haspopup="listbox"
23
- aria-expanded="false"
24
- >
25
- <span class="pf-v5-c-options-menu__toggle-text">
26
- <b>1 - 10</b>&nbsp;of&nbsp;
27
- <b>36</b>
28
- </span>
29
- <div class="pf-v5-c-options-menu__toggle-icon">
30
- <i class="fas fa-caret-down" aria-hidden="true"></i>
31
- </div>
32
- </button>
33
- <ul
34
- class="pf-v5-c-options-menu__menu"
35
- role="menu"
36
- aria-labelledby="pagination-options-menu-top-example-toggle"
37
- hidden
38
- >
39
- <li role="none">
40
- <button
41
- class="pf-v5-c-options-menu__menu-item"
42
- type="button"
43
- role="menuitem"
44
- >5 per page</button>
45
- </li>
46
- <li role="none">
47
- <button
48
- class="pf-v5-c-options-menu__menu-item"
49
- type="button"
50
- role="menuitem"
51
- >
52
- 10 per page
53
- <div class="pf-v5-c-options-menu__menu-item-icon">
54
- <i class="fas fa-check" aria-hidden="true"></i>
55
- </div>
56
- </button>
57
- </li>
58
- <li role="none">
59
- <button
60
- class="pf-v5-c-options-menu__menu-item"
61
- type="button"
62
- role="menuitem"
63
- >20 per page</button>
64
- </li>
65
- </ul>
17
+ <div class="pf-v5-c-pagination__page-menu">
18
+ <div class="pf-v5-c-options-menu">
19
+ <button
20
+ class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
21
+ type="button"
22
+ id="pagination-options-menu-top-example-toggle"
23
+ aria-haspopup="listbox"
24
+ aria-expanded="false"
25
+ >
26
+ <span class="pf-v5-c-options-menu__toggle-text">
27
+ <b>1 - 10</b>&nbsp;of&nbsp;
28
+ <b>36</b>
29
+ </span>
30
+ <div class="pf-v5-c-options-menu__toggle-icon">
31
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
32
+ </div>
33
+ </button>
34
+ <ul
35
+ class="pf-v5-c-options-menu__menu"
36
+ role="menu"
37
+ aria-labelledby="pagination-options-menu-top-example-toggle"
38
+ hidden
39
+ >
40
+ <li role="none">
41
+ <button
42
+ class="pf-v5-c-options-menu__menu-item"
43
+ type="button"
44
+ role="menuitem"
45
+ >5 per page</button>
46
+ </li>
47
+ <li role="none">
48
+ <button
49
+ class="pf-v5-c-options-menu__menu-item"
50
+ type="button"
51
+ role="menuitem"
52
+ >
53
+ 10 per page
54
+ <div class="pf-v5-c-options-menu__menu-item-icon">
55
+ <i class="fas fa-check" aria-hidden="true"></i>
56
+ </div>
57
+ </button>
58
+ </li>
59
+ <li role="none">
60
+ <button
61
+ class="pf-v5-c-options-menu__menu-item"
62
+ type="button"
63
+ role="menuitem"
64
+ >20 per page</button>
65
+ </li>
66
+ </ul>
67
+ </div>
66
68
  </div>
67
69
  <nav
68
70
  class="pf-v5-c-pagination__nav"
@@ -131,54 +133,56 @@ cssPrefix: pf-v5-c-pagination
131
133
  <b>1 - 10</b>&nbsp;of&nbsp;
132
134
  <b>36</b>
133
135
  </div>
134
- <div class="pf-v5-c-options-menu pf-m-expanded">
135
- <button
136
- class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
137
- type="button"
138
- id="pagination-options-menu-top-expanded-example-toggle"
139
- aria-haspopup="listbox"
140
- aria-expanded="true"
141
- >
142
- <span class="pf-v5-c-options-menu__toggle-text">
143
- <b>1 - 10</b>&nbsp;of&nbsp;
144
- <b>36</b>
145
- </span>
146
- <div class="pf-v5-c-options-menu__toggle-icon">
147
- <i class="fas fa-caret-down" aria-hidden="true"></i>
148
- </div>
149
- </button>
150
- <ul
151
- class="pf-v5-c-options-menu__menu"
152
- role="menu"
153
- aria-labelledby="pagination-options-menu-top-expanded-example-toggle"
154
- >
155
- <li role="none">
156
- <button
157
- class="pf-v5-c-options-menu__menu-item"
158
- type="button"
159
- role="menuitem"
160
- >5 per page</button>
161
- </li>
162
- <li role="none">
163
- <button
164
- class="pf-v5-c-options-menu__menu-item"
165
- type="button"
166
- role="menuitem"
167
- >
168
- 10 per page
169
- <div class="pf-v5-c-options-menu__menu-item-icon">
170
- <i class="fas fa-check" aria-hidden="true"></i>
171
- </div>
172
- </button>
173
- </li>
174
- <li role="none">
175
- <button
176
- class="pf-v5-c-options-menu__menu-item"
177
- type="button"
178
- role="menuitem"
179
- >20 per page</button>
180
- </li>
181
- </ul>
136
+ <div class="pf-v5-c-pagination__page-menu">
137
+ <div class="pf-v5-c-options-menu pf-m-expanded">
138
+ <button
139
+ class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
140
+ type="button"
141
+ id="pagination-options-menu-top-expanded-example-toggle"
142
+ aria-haspopup="listbox"
143
+ aria-expanded="true"
144
+ >
145
+ <span class="pf-v5-c-options-menu__toggle-text">
146
+ <b>1 - 10</b>&nbsp;of&nbsp;
147
+ <b>36</b>
148
+ </span>
149
+ <div class="pf-v5-c-options-menu__toggle-icon">
150
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
151
+ </div>
152
+ </button>
153
+ <ul
154
+ class="pf-v5-c-options-menu__menu"
155
+ role="menu"
156
+ aria-labelledby="pagination-options-menu-top-expanded-example-toggle"
157
+ >
158
+ <li role="none">
159
+ <button
160
+ class="pf-v5-c-options-menu__menu-item"
161
+ type="button"
162
+ role="menuitem"
163
+ >5 per page</button>
164
+ </li>
165
+ <li role="none">
166
+ <button
167
+ class="pf-v5-c-options-menu__menu-item"
168
+ type="button"
169
+ role="menuitem"
170
+ >
171
+ 10 per page
172
+ <div class="pf-v5-c-options-menu__menu-item-icon">
173
+ <i class="fas fa-check" aria-hidden="true"></i>
174
+ </div>
175
+ </button>
176
+ </li>
177
+ <li role="none">
178
+ <button
179
+ class="pf-v5-c-options-menu__menu-item"
180
+ type="button"
181
+ role="menuitem"
182
+ >20 per page</button>
183
+ </li>
184
+ </ul>
185
+ </div>
182
186
  </div>
183
187
  <nav
184
188
  class="pf-v5-c-pagination__nav"
@@ -247,55 +251,57 @@ cssPrefix: pf-v5-c-pagination
247
251
  <b>1 - 10</b>&nbsp;of&nbsp;
248
252
  <b>36</b>
249
253
  </div>
250
- <div class="pf-v5-c-options-menu">
251
- <button
252
- class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
253
- type="button"
254
- id="pagination-options-menu-top-sticky-example-toggle"
255
- aria-haspopup="listbox"
256
- aria-expanded="false"
257
- >
258
- <span class="pf-v5-c-options-menu__toggle-text">
259
- <b>1 - 10</b>&nbsp;of&nbsp;
260
- <b>36</b>
261
- </span>
262
- <div class="pf-v5-c-options-menu__toggle-icon">
263
- <i class="fas fa-caret-down" aria-hidden="true"></i>
264
- </div>
265
- </button>
266
- <ul
267
- class="pf-v5-c-options-menu__menu"
268
- role="menu"
269
- aria-labelledby="pagination-options-menu-top-sticky-example-toggle"
270
- hidden
271
- >
272
- <li role="none">
273
- <button
274
- class="pf-v5-c-options-menu__menu-item"
275
- type="button"
276
- role="menuitem"
277
- >5 per page</button>
278
- </li>
279
- <li role="none">
280
- <button
281
- class="pf-v5-c-options-menu__menu-item"
282
- type="button"
283
- role="menuitem"
284
- >
285
- 10 per page
286
- <div class="pf-v5-c-options-menu__menu-item-icon">
287
- <i class="fas fa-check" aria-hidden="true"></i>
288
- </div>
289
- </button>
290
- </li>
291
- <li role="none">
292
- <button
293
- class="pf-v5-c-options-menu__menu-item"
294
- type="button"
295
- role="menuitem"
296
- >20 per page</button>
297
- </li>
298
- </ul>
254
+ <div class="pf-v5-c-pagination__page-menu">
255
+ <div class="pf-v5-c-options-menu">
256
+ <button
257
+ class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
258
+ type="button"
259
+ id="pagination-options-menu-top-sticky-example-toggle"
260
+ aria-haspopup="listbox"
261
+ aria-expanded="false"
262
+ >
263
+ <span class="pf-v5-c-options-menu__toggle-text">
264
+ <b>1 - 10</b>&nbsp;of&nbsp;
265
+ <b>36</b>
266
+ </span>
267
+ <div class="pf-v5-c-options-menu__toggle-icon">
268
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
269
+ </div>
270
+ </button>
271
+ <ul
272
+ class="pf-v5-c-options-menu__menu"
273
+ role="menu"
274
+ aria-labelledby="pagination-options-menu-top-sticky-example-toggle"
275
+ hidden
276
+ >
277
+ <li role="none">
278
+ <button
279
+ class="pf-v5-c-options-menu__menu-item"
280
+ type="button"
281
+ role="menuitem"
282
+ >5 per page</button>
283
+ </li>
284
+ <li role="none">
285
+ <button
286
+ class="pf-v5-c-options-menu__menu-item"
287
+ type="button"
288
+ role="menuitem"
289
+ >
290
+ 10 per page
291
+ <div class="pf-v5-c-options-menu__menu-item-icon">
292
+ <i class="fas fa-check" aria-hidden="true"></i>
293
+ </div>
294
+ </button>
295
+ </li>
296
+ <li role="none">
297
+ <button
298
+ class="pf-v5-c-options-menu__menu-item"
299
+ type="button"
300
+ role="menuitem"
301
+ >20 per page</button>
302
+ </li>
303
+ </ul>
304
+ </div>
299
305
  </div>
300
306
  <nav
301
307
  class="pf-v5-c-pagination__nav"
@@ -374,55 +380,57 @@ cssPrefix: pf-v5-c-pagination
374
380
  <b>1 - 10</b>&nbsp;of&nbsp;
375
381
  <b>many</b>
376
382
  </div>
377
- <div class="pf-v5-c-options-menu">
378
- <button
379
- class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
380
- type="button"
381
- id="pagination-options-menu-top-indeterminate-example-toggle"
382
- aria-haspopup="listbox"
383
- aria-expanded="false"
384
- >
385
- <span class="pf-v5-c-options-menu__toggle-text">
386
- <b>1 - 10</b>&nbsp;of&nbsp;
387
- <b>many</b>
388
- </span>
389
- <div class="pf-v5-c-options-menu__toggle-icon">
390
- <i class="fas fa-caret-down" aria-hidden="true"></i>
391
- </div>
392
- </button>
393
- <ul
394
- class="pf-v5-c-options-menu__menu"
395
- role="menu"
396
- aria-labelledby="pagination-options-menu-top-indeterminate-example-toggle"
397
- hidden
398
- >
399
- <li role="none">
400
- <button
401
- class="pf-v5-c-options-menu__menu-item"
402
- type="button"
403
- role="menuitem"
404
- >5 per page</button>
405
- </li>
406
- <li role="none">
407
- <button
408
- class="pf-v5-c-options-menu__menu-item"
409
- type="button"
410
- role="menuitem"
411
- >
412
- 10 per page
413
- <div class="pf-v5-c-options-menu__menu-item-icon">
414
- <i class="fas fa-check" aria-hidden="true"></i>
415
- </div>
416
- </button>
417
- </li>
418
- <li role="none">
419
- <button
420
- class="pf-v5-c-options-menu__menu-item"
421
- type="button"
422
- role="menuitem"
423
- >20 per page</button>
424
- </li>
425
- </ul>
383
+ <div class="pf-v5-c-pagination__page-menu">
384
+ <div class="pf-v5-c-options-menu">
385
+ <button
386
+ class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
387
+ type="button"
388
+ id="pagination-options-menu-top-indeterminate-example-toggle"
389
+ aria-haspopup="listbox"
390
+ aria-expanded="false"
391
+ >
392
+ <span class="pf-v5-c-options-menu__toggle-text">
393
+ <b>1 - 10</b>&nbsp;of&nbsp;
394
+ <b>many</b>
395
+ </span>
396
+ <div class="pf-v5-c-options-menu__toggle-icon">
397
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
398
+ </div>
399
+ </button>
400
+ <ul
401
+ class="pf-v5-c-options-menu__menu"
402
+ role="menu"
403
+ aria-labelledby="pagination-options-menu-top-indeterminate-example-toggle"
404
+ hidden
405
+ >
406
+ <li role="none">
407
+ <button
408
+ class="pf-v5-c-options-menu__menu-item"
409
+ type="button"
410
+ role="menuitem"
411
+ >5 per page</button>
412
+ </li>
413
+ <li role="none">
414
+ <button
415
+ class="pf-v5-c-options-menu__menu-item"
416
+ type="button"
417
+ role="menuitem"
418
+ >
419
+ 10 per page
420
+ <div class="pf-v5-c-options-menu__menu-item-icon">
421
+ <i class="fas fa-check" aria-hidden="true"></i>
422
+ </div>
423
+ </button>
424
+ </li>
425
+ <li role="none">
426
+ <button
427
+ class="pf-v5-c-options-menu__menu-item"
428
+ type="button"
429
+ role="menuitem"
430
+ >20 per page</button>
431
+ </li>
432
+ </ul>
433
+ </div>
426
434
  </div>
427
435
  <nav
428
436
  class="pf-v5-c-pagination__nav"
@@ -486,55 +494,57 @@ cssPrefix: pf-v5-c-pagination
486
494
 
487
495
  ```html
488
496
  <div class="pf-v5-c-pagination pf-m-bottom">
489
- <div class="pf-v5-c-options-menu pf-m-top">
490
- <button
491
- class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
492
- type="button"
493
- id="pagination-options-menu-bottom-example-toggle"
494
- aria-haspopup="listbox"
495
- aria-expanded="false"
496
- >
497
- <span class="pf-v5-c-options-menu__toggle-text">
498
- <b>1 - 10</b>&nbsp;of&nbsp;
499
- <b>36</b>
500
- </span>
501
- <div class="pf-v5-c-options-menu__toggle-icon">
502
- <i class="fas fa-caret-down" aria-hidden="true"></i>
503
- </div>
504
- </button>
505
- <ul
506
- class="pf-v5-c-options-menu__menu pf-m-top"
507
- role="menu"
508
- aria-labelledby="pagination-options-menu-bottom-example-toggle"
509
- hidden
510
- >
511
- <li role="none">
512
- <button
513
- class="pf-v5-c-options-menu__menu-item"
514
- type="button"
515
- role="menuitem"
516
- >5 per page</button>
517
- </li>
518
- <li role="none">
519
- <button
520
- class="pf-v5-c-options-menu__menu-item"
521
- type="button"
522
- role="menuitem"
523
- >
524
- 10 per page
525
- <div class="pf-v5-c-options-menu__menu-item-icon">
526
- <i class="fas fa-check" aria-hidden="true"></i>
527
- </div>
528
- </button>
529
- </li>
530
- <li role="none">
531
- <button
532
- class="pf-v5-c-options-menu__menu-item"
533
- type="button"
534
- role="menuitem"
535
- >20 per page</button>
536
- </li>
537
- </ul>
497
+ <div class="pf-v5-c-pagination__page-menu">
498
+ <div class="pf-v5-c-options-menu pf-m-top">
499
+ <button
500
+ class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
501
+ type="button"
502
+ id="pagination-options-menu-bottom-example-toggle"
503
+ aria-haspopup="listbox"
504
+ aria-expanded="false"
505
+ >
506
+ <span class="pf-v5-c-options-menu__toggle-text">
507
+ <b>1 - 10</b>&nbsp;of&nbsp;
508
+ <b>36</b>
509
+ </span>
510
+ <div class="pf-v5-c-options-menu__toggle-icon">
511
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
512
+ </div>
513
+ </button>
514
+ <ul
515
+ class="pf-v5-c-options-menu__menu pf-m-top"
516
+ role="menu"
517
+ aria-labelledby="pagination-options-menu-bottom-example-toggle"
518
+ hidden
519
+ >
520
+ <li role="none">
521
+ <button
522
+ class="pf-v5-c-options-menu__menu-item"
523
+ type="button"
524
+ role="menuitem"
525
+ >5 per page</button>
526
+ </li>
527
+ <li role="none">
528
+ <button
529
+ class="pf-v5-c-options-menu__menu-item"
530
+ type="button"
531
+ role="menuitem"
532
+ >
533
+ 10 per page
534
+ <div class="pf-v5-c-options-menu__menu-item-icon">
535
+ <i class="fas fa-check" aria-hidden="true"></i>
536
+ </div>
537
+ </button>
538
+ </li>
539
+ <li role="none">
540
+ <button
541
+ class="pf-v5-c-options-menu__menu-item"
542
+ type="button"
543
+ role="menuitem"
544
+ >20 per page</button>
545
+ </li>
546
+ </ul>
547
+ </div>
538
548
  </div>
539
549
  <nav
540
550
  class="pf-v5-c-pagination__nav"
@@ -609,55 +619,57 @@ cssPrefix: pf-v5-c-pagination
609
619
  <br />
610
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>
611
621
  <div class="pf-v5-c-pagination pf-m-bottom pf-m-sticky">
612
- <div class="pf-v5-c-options-menu pf-m-top">
613
- <button
614
- class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
615
- type="button"
616
- id="pagination-options-menu-bottom-sticky-example-toggle"
617
- aria-haspopup="listbox"
618
- aria-expanded="false"
619
- >
620
- <span class="pf-v5-c-options-menu__toggle-text">
621
- <b>1 - 10</b>&nbsp;of&nbsp;
622
- <b>36</b>
623
- </span>
624
- <div class="pf-v5-c-options-menu__toggle-icon">
625
- <i class="fas fa-caret-down" aria-hidden="true"></i>
626
- </div>
627
- </button>
628
- <ul
629
- class="pf-v5-c-options-menu__menu pf-m-top"
630
- role="menu"
631
- aria-labelledby="pagination-options-menu-bottom-sticky-example-toggle"
632
- hidden
633
- >
634
- <li role="none">
635
- <button
636
- class="pf-v5-c-options-menu__menu-item"
637
- type="button"
638
- role="menuitem"
639
- >5 per page</button>
640
- </li>
641
- <li role="none">
642
- <button
643
- class="pf-v5-c-options-menu__menu-item"
644
- type="button"
645
- role="menuitem"
646
- >
647
- 10 per page
648
- <div class="pf-v5-c-options-menu__menu-item-icon">
649
- <i class="fas fa-check" aria-hidden="true"></i>
650
- </div>
651
- </button>
652
- </li>
653
- <li role="none">
654
- <button
655
- class="pf-v5-c-options-menu__menu-item"
656
- type="button"
657
- role="menuitem"
658
- >20 per page</button>
659
- </li>
660
- </ul>
622
+ <div class="pf-v5-c-pagination__page-menu">
623
+ <div class="pf-v5-c-options-menu pf-m-top">
624
+ <button
625
+ class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
626
+ type="button"
627
+ id="pagination-options-menu-bottom-sticky-example-toggle"
628
+ aria-haspopup="listbox"
629
+ aria-expanded="false"
630
+ >
631
+ <span class="pf-v5-c-options-menu__toggle-text">
632
+ <b>1 - 10</b>&nbsp;of&nbsp;
633
+ <b>36</b>
634
+ </span>
635
+ <div class="pf-v5-c-options-menu__toggle-icon">
636
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
637
+ </div>
638
+ </button>
639
+ <ul
640
+ class="pf-v5-c-options-menu__menu pf-m-top"
641
+ role="menu"
642
+ aria-labelledby="pagination-options-menu-bottom-sticky-example-toggle"
643
+ hidden
644
+ >
645
+ <li role="none">
646
+ <button
647
+ class="pf-v5-c-options-menu__menu-item"
648
+ type="button"
649
+ role="menuitem"
650
+ >5 per page</button>
651
+ </li>
652
+ <li role="none">
653
+ <button
654
+ class="pf-v5-c-options-menu__menu-item"
655
+ type="button"
656
+ role="menuitem"
657
+ >
658
+ 10 per page
659
+ <div class="pf-v5-c-options-menu__menu-item-icon">
660
+ <i class="fas fa-check" aria-hidden="true"></i>
661
+ </div>
662
+ </button>
663
+ </li>
664
+ <li role="none">
665
+ <button
666
+ class="pf-v5-c-options-menu__menu-item"
667
+ type="button"
668
+ role="menuitem"
669
+ >20 per page</button>
670
+ </li>
671
+ </ul>
672
+ </div>
661
673
  </div>
662
674
  <nav
663
675
  class="pf-v5-c-pagination__nav"
@@ -726,56 +738,58 @@ cssPrefix: pf-v5-c-pagination
726
738
  <b>1 - 10</b>&nbsp;of&nbsp;
727
739
  <b>36</b>
728
740
  </div>
729
- <div class="pf-v5-c-options-menu">
730
- <button
731
- class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
732
- type="button"
733
- id="pagination-options-menu-top-disabled-example-toggle"
734
- aria-haspopup="listbox"
735
- aria-expanded="false"
736
- disabled
737
- >
738
- <span class="pf-v5-c-options-menu__toggle-text">
739
- <b>1 - 10</b>&nbsp;of&nbsp;
740
- <b>36</b>
741
- </span>
742
- <div class="pf-v5-c-options-menu__toggle-icon">
743
- <i class="fas fa-caret-down" aria-hidden="true"></i>
744
- </div>
745
- </button>
746
- <ul
747
- class="pf-v5-c-options-menu__menu"
748
- role="menu"
749
- aria-labelledby="pagination-options-menu-top-disabled-example-toggle"
750
- hidden
751
- >
752
- <li role="none">
753
- <button
754
- class="pf-v5-c-options-menu__menu-item"
755
- type="button"
756
- role="menuitem"
757
- >5 per page</button>
758
- </li>
759
- <li role="none">
760
- <button
761
- class="pf-v5-c-options-menu__menu-item"
762
- type="button"
763
- role="menuitem"
764
- >
765
- 10 per page
766
- <div class="pf-v5-c-options-menu__menu-item-icon">
767
- <i class="fas fa-check" aria-hidden="true"></i>
768
- </div>
769
- </button>
770
- </li>
771
- <li role="none">
772
- <button
773
- class="pf-v5-c-options-menu__menu-item"
774
- type="button"
775
- role="menuitem"
776
- >20 per page</button>
777
- </li>
778
- </ul>
741
+ <div class="pf-v5-c-pagination__page-menu">
742
+ <div class="pf-v5-c-options-menu">
743
+ <button
744
+ class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
745
+ type="button"
746
+ id="pagination-options-menu-top-disabled-example-toggle"
747
+ aria-haspopup="listbox"
748
+ aria-expanded="false"
749
+ disabled
750
+ >
751
+ <span class="pf-v5-c-options-menu__toggle-text">
752
+ <b>1 - 10</b>&nbsp;of&nbsp;
753
+ <b>36</b>
754
+ </span>
755
+ <div class="pf-v5-c-options-menu__toggle-icon">
756
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
757
+ </div>
758
+ </button>
759
+ <ul
760
+ class="pf-v5-c-options-menu__menu"
761
+ role="menu"
762
+ aria-labelledby="pagination-options-menu-top-disabled-example-toggle"
763
+ hidden
764
+ >
765
+ <li role="none">
766
+ <button
767
+ class="pf-v5-c-options-menu__menu-item"
768
+ type="button"
769
+ role="menuitem"
770
+ >5 per page</button>
771
+ </li>
772
+ <li role="none">
773
+ <button
774
+ class="pf-v5-c-options-menu__menu-item"
775
+ type="button"
776
+ role="menuitem"
777
+ >
778
+ 10 per page
779
+ <div class="pf-v5-c-options-menu__menu-item-icon">
780
+ <i class="fas fa-check" aria-hidden="true"></i>
781
+ </div>
782
+ </button>
783
+ </li>
784
+ <li role="none">
785
+ <button
786
+ class="pf-v5-c-options-menu__menu-item"
787
+ type="button"
788
+ role="menuitem"
789
+ >20 per page</button>
790
+ </li>
791
+ </ul>
792
+ </div>
779
793
  </div>
780
794
  <nav
781
795
  class="pf-v5-c-pagination__nav"
@@ -847,55 +861,57 @@ cssPrefix: pf-v5-c-pagination
847
861
  <b>1 - 10</b>&nbsp;of&nbsp;
848
862
  <b>36</b>
849
863
  </div>
850
- <div class="pf-v5-c-options-menu">
851
- <button
852
- class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
853
- type="button"
854
- id="pagination-options-menu-compact-example-toggle"
855
- aria-haspopup="listbox"
856
- aria-expanded="false"
857
- >
858
- <span class="pf-v5-c-options-menu__toggle-text">
859
- <b>1 - 10</b>&nbsp;of&nbsp;
860
- <b>36</b>
861
- </span>
862
- <div class="pf-v5-c-options-menu__toggle-icon">
863
- <i class="fas fa-caret-down" aria-hidden="true"></i>
864
- </div>
865
- </button>
866
- <ul
867
- class="pf-v5-c-options-menu__menu"
868
- role="menu"
869
- aria-labelledby="pagination-options-menu-compact-example-toggle"
870
- hidden
871
- >
872
- <li role="none">
873
- <button
874
- class="pf-v5-c-options-menu__menu-item"
875
- type="button"
876
- role="menuitem"
877
- >5 per page</button>
878
- </li>
879
- <li role="none">
880
- <button
881
- class="pf-v5-c-options-menu__menu-item"
882
- type="button"
883
- role="menuitem"
884
- >
885
- 10 per page
886
- <div class="pf-v5-c-options-menu__menu-item-icon">
887
- <i class="fas fa-check" aria-hidden="true"></i>
888
- </div>
889
- </button>
890
- </li>
891
- <li role="none">
892
- <button
893
- class="pf-v5-c-options-menu__menu-item"
894
- type="button"
895
- role="menuitem"
896
- >20 per page</button>
897
- </li>
898
- </ul>
864
+ <div class="pf-v5-c-pagination__page-menu">
865
+ <div class="pf-v5-c-options-menu">
866
+ <button
867
+ class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
868
+ type="button"
869
+ id="pagination-options-menu-compact-example-toggle"
870
+ aria-haspopup="listbox"
871
+ aria-expanded="false"
872
+ >
873
+ <span class="pf-v5-c-options-menu__toggle-text">
874
+ <b>1 - 10</b>&nbsp;of&nbsp;
875
+ <b>36</b>
876
+ </span>
877
+ <div class="pf-v5-c-options-menu__toggle-icon">
878
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
879
+ </div>
880
+ </button>
881
+ <ul
882
+ class="pf-v5-c-options-menu__menu"
883
+ role="menu"
884
+ aria-labelledby="pagination-options-menu-compact-example-toggle"
885
+ hidden
886
+ >
887
+ <li role="none">
888
+ <button
889
+ class="pf-v5-c-options-menu__menu-item"
890
+ type="button"
891
+ role="menuitem"
892
+ >5 per page</button>
893
+ </li>
894
+ <li role="none">
895
+ <button
896
+ class="pf-v5-c-options-menu__menu-item"
897
+ type="button"
898
+ role="menuitem"
899
+ >
900
+ 10 per page
901
+ <div class="pf-v5-c-options-menu__menu-item-icon">
902
+ <i class="fas fa-check" aria-hidden="true"></i>
903
+ </div>
904
+ </button>
905
+ </li>
906
+ <li role="none">
907
+ <button
908
+ class="pf-v5-c-options-menu__menu-item"
909
+ type="button"
910
+ role="menuitem"
911
+ >20 per page</button>
912
+ </li>
913
+ </ul>
914
+ </div>
899
915
  </div>
900
916
  <nav
901
917
  class="pf-v5-c-pagination__nav"
@@ -933,55 +949,57 @@ cssPrefix: pf-v5-c-pagination
933
949
  <b>1 - 10</b>&nbsp;of&nbsp;
934
950
  <b>36</b>
935
951
  </div>
936
- <div class="pf-v5-c-options-menu">
937
- <button
938
- class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
939
- type="button"
940
- id="pagination-top-with-summary-modifier-options-menu-toggle"
941
- aria-haspopup="listbox"
942
- aria-expanded="false"
943
- >
944
- <span class="pf-v5-c-options-menu__toggle-text">
945
- <b>1 - 10</b>&nbsp;of&nbsp;
946
- <b>36</b>
947
- </span>
948
- <div class="pf-v5-c-options-menu__toggle-icon">
949
- <i class="fas fa-caret-down" aria-hidden="true"></i>
950
- </div>
951
- </button>
952
- <ul
953
- class="pf-v5-c-options-menu__menu"
954
- role="menu"
955
- aria-labelledby="pagination-top-with-summary-modifier-options-menu-toggle"
956
- hidden
957
- >
958
- <li role="none">
959
- <button
960
- class="pf-v5-c-options-menu__menu-item"
961
- type="button"
962
- role="menuitem"
963
- >5 per page</button>
964
- </li>
965
- <li role="none">
966
- <button
967
- class="pf-v5-c-options-menu__menu-item"
968
- type="button"
969
- role="menuitem"
970
- >
971
- 10 per page
972
- <div class="pf-v5-c-options-menu__menu-item-icon">
973
- <i class="fas fa-check" aria-hidden="true"></i>
974
- </div>
975
- </button>
976
- </li>
977
- <li role="none">
978
- <button
979
- class="pf-v5-c-options-menu__menu-item"
980
- type="button"
981
- role="menuitem"
982
- >20 per page</button>
983
- </li>
984
- </ul>
952
+ <div class="pf-v5-c-pagination__page-menu">
953
+ <div class="pf-v5-c-options-menu">
954
+ <button
955
+ class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
956
+ type="button"
957
+ id="pagination-top-with-summary-modifier-options-menu-toggle"
958
+ aria-haspopup="listbox"
959
+ aria-expanded="false"
960
+ >
961
+ <span class="pf-v5-c-options-menu__toggle-text">
962
+ <b>1 - 10</b>&nbsp;of&nbsp;
963
+ <b>36</b>
964
+ </span>
965
+ <div class="pf-v5-c-options-menu__toggle-icon">
966
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
967
+ </div>
968
+ </button>
969
+ <ul
970
+ class="pf-v5-c-options-menu__menu"
971
+ role="menu"
972
+ aria-labelledby="pagination-top-with-summary-modifier-options-menu-toggle"
973
+ hidden
974
+ >
975
+ <li role="none">
976
+ <button
977
+ class="pf-v5-c-options-menu__menu-item"
978
+ type="button"
979
+ role="menuitem"
980
+ >5 per page</button>
981
+ </li>
982
+ <li role="none">
983
+ <button
984
+ class="pf-v5-c-options-menu__menu-item"
985
+ type="button"
986
+ role="menuitem"
987
+ >
988
+ 10 per page
989
+ <div class="pf-v5-c-options-menu__menu-item-icon">
990
+ <i class="fas fa-check" aria-hidden="true"></i>
991
+ </div>
992
+ </button>
993
+ </li>
994
+ <li role="none">
995
+ <button
996
+ class="pf-v5-c-options-menu__menu-item"
997
+ type="button"
998
+ role="menuitem"
999
+ >20 per page</button>
1000
+ </li>
1001
+ </ul>
1002
+ </div>
985
1003
  </div>
986
1004
  <nav
987
1005
  class="pf-v5-c-pagination__nav"
@@ -1050,55 +1068,57 @@ cssPrefix: pf-v5-c-pagination
1050
1068
  <b>1 - 10</b>&nbsp;of&nbsp;
1051
1069
  <b>36</b>
1052
1070
  </div>
1053
- <div class="pf-v5-c-options-menu">
1054
- <button
1055
- class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
1056
- type="button"
1057
- id="pagination-top-with-full-modifier-options-menu-toggle"
1058
- aria-haspopup="listbox"
1059
- aria-expanded="false"
1060
- >
1061
- <span class="pf-v5-c-options-menu__toggle-text">
1062
- <b>1 - 10</b>&nbsp;of&nbsp;
1063
- <b>36</b>
1064
- </span>
1065
- <div class="pf-v5-c-options-menu__toggle-icon">
1066
- <i class="fas fa-caret-down" aria-hidden="true"></i>
1067
- </div>
1068
- </button>
1069
- <ul
1070
- class="pf-v5-c-options-menu__menu"
1071
- role="menu"
1072
- aria-labelledby="pagination-top-with-full-modifier-options-menu-toggle"
1073
- hidden
1074
- >
1075
- <li role="none">
1076
- <button
1077
- class="pf-v5-c-options-menu__menu-item"
1078
- type="button"
1079
- role="menuitem"
1080
- >5 per page</button>
1081
- </li>
1082
- <li role="none">
1083
- <button
1084
- class="pf-v5-c-options-menu__menu-item"
1085
- type="button"
1086
- role="menuitem"
1087
- >
1088
- 10 per page
1089
- <div class="pf-v5-c-options-menu__menu-item-icon">
1090
- <i class="fas fa-check" aria-hidden="true"></i>
1091
- </div>
1092
- </button>
1093
- </li>
1094
- <li role="none">
1095
- <button
1096
- class="pf-v5-c-options-menu__menu-item"
1097
- type="button"
1098
- role="menuitem"
1099
- >20 per page</button>
1100
- </li>
1101
- </ul>
1071
+ <div class="pf-v5-c-pagination__page-menu">
1072
+ <div class="pf-v5-c-options-menu">
1073
+ <button
1074
+ class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
1075
+ type="button"
1076
+ id="pagination-top-with-full-modifier-options-menu-toggle"
1077
+ aria-haspopup="listbox"
1078
+ aria-expanded="false"
1079
+ >
1080
+ <span class="pf-v5-c-options-menu__toggle-text">
1081
+ <b>1 - 10</b>&nbsp;of&nbsp;
1082
+ <b>36</b>
1083
+ </span>
1084
+ <div class="pf-v5-c-options-menu__toggle-icon">
1085
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
1086
+ </div>
1087
+ </button>
1088
+ <ul
1089
+ class="pf-v5-c-options-menu__menu"
1090
+ role="menu"
1091
+ aria-labelledby="pagination-top-with-full-modifier-options-menu-toggle"
1092
+ hidden
1093
+ >
1094
+ <li role="none">
1095
+ <button
1096
+ class="pf-v5-c-options-menu__menu-item"
1097
+ type="button"
1098
+ role="menuitem"
1099
+ >5 per page</button>
1100
+ </li>
1101
+ <li role="none">
1102
+ <button
1103
+ class="pf-v5-c-options-menu__menu-item"
1104
+ type="button"
1105
+ role="menuitem"
1106
+ >
1107
+ 10 per page
1108
+ <div class="pf-v5-c-options-menu__menu-item-icon">
1109
+ <i class="fas fa-check" aria-hidden="true"></i>
1110
+ </div>
1111
+ </button>
1112
+ </li>
1113
+ <li role="none">
1114
+ <button
1115
+ class="pf-v5-c-options-menu__menu-item"
1116
+ type="button"
1117
+ role="menuitem"
1118
+ >20 per page</button>
1119
+ </li>
1120
+ </ul>
1121
+ </div>
1102
1122
  </div>
1103
1123
  <nav
1104
1124
  class="pf-v5-c-pagination__nav"
@@ -1169,55 +1189,57 @@ cssPrefix: pf-v5-c-pagination
1169
1189
  <b>1 - 10</b>&nbsp;of&nbsp;
1170
1190
  <b>36</b>
1171
1191
  </div>
1172
- <div class="pf-v5-c-options-menu">
1173
- <button
1174
- class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
1175
- type="button"
1176
- id="pagination-top-with-responsive-summary-navigation-modifiers-options-menu-toggle"
1177
- aria-haspopup="listbox"
1178
- aria-expanded="false"
1179
- >
1180
- <span class="pf-v5-c-options-menu__toggle-text">
1181
- <b>1 - 10</b>&nbsp;of&nbsp;
1182
- <b>36</b>
1183
- </span>
1184
- <div class="pf-v5-c-options-menu__toggle-icon">
1185
- <i class="fas fa-caret-down" aria-hidden="true"></i>
1186
- </div>
1187
- </button>
1188
- <ul
1189
- class="pf-v5-c-options-menu__menu"
1190
- role="menu"
1191
- aria-labelledby="pagination-top-with-responsive-summary-navigation-modifiers-options-menu-toggle"
1192
- hidden
1193
- >
1194
- <li role="none">
1195
- <button
1196
- class="pf-v5-c-options-menu__menu-item"
1197
- type="button"
1198
- role="menuitem"
1199
- >5 per page</button>
1200
- </li>
1201
- <li role="none">
1202
- <button
1203
- class="pf-v5-c-options-menu__menu-item"
1204
- type="button"
1205
- role="menuitem"
1206
- >
1207
- 10 per page
1208
- <div class="pf-v5-c-options-menu__menu-item-icon">
1209
- <i class="fas fa-check" aria-hidden="true"></i>
1210
- </div>
1211
- </button>
1212
- </li>
1213
- <li role="none">
1214
- <button
1215
- class="pf-v5-c-options-menu__menu-item"
1216
- type="button"
1217
- role="menuitem"
1218
- >20 per page</button>
1219
- </li>
1220
- </ul>
1192
+ <div class="pf-v5-c-pagination__page-menu">
1193
+ <div class="pf-v5-c-options-menu">
1194
+ <button
1195
+ class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
1196
+ type="button"
1197
+ id="pagination-top-with-responsive-summary-navigation-modifiers-options-menu-toggle"
1198
+ aria-haspopup="listbox"
1199
+ aria-expanded="false"
1200
+ >
1201
+ <span class="pf-v5-c-options-menu__toggle-text">
1202
+ <b>1 - 10</b>&nbsp;of&nbsp;
1203
+ <b>36</b>
1204
+ </span>
1205
+ <div class="pf-v5-c-options-menu__toggle-icon">
1206
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
1207
+ </div>
1208
+ </button>
1209
+ <ul
1210
+ class="pf-v5-c-options-menu__menu"
1211
+ role="menu"
1212
+ aria-labelledby="pagination-top-with-responsive-summary-navigation-modifiers-options-menu-toggle"
1213
+ hidden
1214
+ >
1215
+ <li role="none">
1216
+ <button
1217
+ class="pf-v5-c-options-menu__menu-item"
1218
+ type="button"
1219
+ role="menuitem"
1220
+ >5 per page</button>
1221
+ </li>
1222
+ <li role="none">
1223
+ <button
1224
+ class="pf-v5-c-options-menu__menu-item"
1225
+ type="button"
1226
+ role="menuitem"
1227
+ >
1228
+ 10 per page
1229
+ <div class="pf-v5-c-options-menu__menu-item-icon">
1230
+ <i class="fas fa-check" aria-hidden="true"></i>
1231
+ </div>
1232
+ </button>
1233
+ </li>
1234
+ <li role="none">
1235
+ <button
1236
+ class="pf-v5-c-options-menu__menu-item"
1237
+ type="button"
1238
+ role="menuitem"
1239
+ >20 per page</button>
1240
+ </li>
1241
+ </ul>
1242
+ </div>
1221
1243
  </div>
1222
1244
  <nav
1223
1245
  class="pf-v5-c-pagination__nav"
@@ -1286,55 +1308,57 @@ cssPrefix: pf-v5-c-pagination
1286
1308
  <b>1 - 10</b>&nbsp;of&nbsp;
1287
1309
  <b>36</b>
1288
1310
  </div>
1289
- <div class="pf-v5-c-options-menu">
1290
- <button
1291
- class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
1292
- type="button"
1293
- id="pagination-compact-with-full-modifier-options-menu-toggle"
1294
- aria-haspopup="listbox"
1295
- aria-expanded="false"
1296
- >
1297
- <span class="pf-v5-c-options-menu__toggle-text">
1298
- <b>1 - 10</b>&nbsp;of&nbsp;
1299
- <b>36</b>
1300
- </span>
1301
- <div class="pf-v5-c-options-menu__toggle-icon">
1302
- <i class="fas fa-caret-down" aria-hidden="true"></i>
1303
- </div>
1304
- </button>
1305
- <ul
1306
- class="pf-v5-c-options-menu__menu"
1307
- role="menu"
1308
- aria-labelledby="pagination-compact-with-full-modifier-options-menu-toggle"
1309
- hidden
1310
- >
1311
- <li role="none">
1312
- <button
1313
- class="pf-v5-c-options-menu__menu-item"
1314
- type="button"
1315
- role="menuitem"
1316
- >5 per page</button>
1317
- </li>
1318
- <li role="none">
1319
- <button
1320
- class="pf-v5-c-options-menu__menu-item"
1321
- type="button"
1322
- role="menuitem"
1323
- >
1324
- 10 per page
1325
- <div class="pf-v5-c-options-menu__menu-item-icon">
1326
- <i class="fas fa-check" aria-hidden="true"></i>
1327
- </div>
1328
- </button>
1329
- </li>
1330
- <li role="none">
1331
- <button
1332
- class="pf-v5-c-options-menu__menu-item"
1333
- type="button"
1334
- role="menuitem"
1335
- >20 per page</button>
1336
- </li>
1337
- </ul>
1311
+ <div class="pf-v5-c-pagination__page-menu">
1312
+ <div class="pf-v5-c-options-menu">
1313
+ <button
1314
+ class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
1315
+ type="button"
1316
+ id="pagination-compact-with-full-modifier-options-menu-toggle"
1317
+ aria-haspopup="listbox"
1318
+ aria-expanded="false"
1319
+ >
1320
+ <span class="pf-v5-c-options-menu__toggle-text">
1321
+ <b>1 - 10</b>&nbsp;of&nbsp;
1322
+ <b>36</b>
1323
+ </span>
1324
+ <div class="pf-v5-c-options-menu__toggle-icon">
1325
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
1326
+ </div>
1327
+ </button>
1328
+ <ul
1329
+ class="pf-v5-c-options-menu__menu"
1330
+ role="menu"
1331
+ aria-labelledby="pagination-compact-with-full-modifier-options-menu-toggle"
1332
+ hidden
1333
+ >
1334
+ <li role="none">
1335
+ <button
1336
+ class="pf-v5-c-options-menu__menu-item"
1337
+ type="button"
1338
+ role="menuitem"
1339
+ >5 per page</button>
1340
+ </li>
1341
+ <li role="none">
1342
+ <button
1343
+ class="pf-v5-c-options-menu__menu-item"
1344
+ type="button"
1345
+ role="menuitem"
1346
+ >
1347
+ 10 per page
1348
+ <div class="pf-v5-c-options-menu__menu-item-icon">
1349
+ <i class="fas fa-check" aria-hidden="true"></i>
1350
+ </div>
1351
+ </button>
1352
+ </li>
1353
+ <li role="none">
1354
+ <button
1355
+ class="pf-v5-c-options-menu__menu-item"
1356
+ type="button"
1357
+ role="menuitem"
1358
+ >20 per page</button>
1359
+ </li>
1360
+ </ul>
1361
+ </div>
1338
1362
  </div>
1339
1363
  <nav
1340
1364
  class="pf-v5-c-pagination__nav"
@@ -1374,55 +1398,57 @@ cssPrefix: pf-v5-c-pagination
1374
1398
  <b>1 - 10</b>&nbsp;of&nbsp;
1375
1399
  <b>36</b>
1376
1400
  </div>
1377
- <div class="pf-v5-c-options-menu">
1378
- <button
1379
- class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
1380
- type="button"
1381
- id="pagination-inset-options-menu-toggle"
1382
- aria-haspopup="listbox"
1383
- aria-expanded="false"
1384
- >
1385
- <span class="pf-v5-c-options-menu__toggle-text">
1386
- <b>1 - 10</b>&nbsp;of&nbsp;
1387
- <b>36</b>
1388
- </span>
1389
- <div class="pf-v5-c-options-menu__toggle-icon">
1390
- <i class="fas fa-caret-down" aria-hidden="true"></i>
1391
- </div>
1392
- </button>
1393
- <ul
1394
- class="pf-v5-c-options-menu__menu"
1395
- role="menu"
1396
- aria-labelledby="pagination-inset-options-menu-toggle"
1397
- hidden
1398
- >
1399
- <li role="none">
1400
- <button
1401
- class="pf-v5-c-options-menu__menu-item"
1402
- type="button"
1403
- role="menuitem"
1404
- >5 per page</button>
1405
- </li>
1406
- <li role="none">
1407
- <button
1408
- class="pf-v5-c-options-menu__menu-item"
1409
- type="button"
1410
- role="menuitem"
1411
- >
1412
- 10 per page
1413
- <div class="pf-v5-c-options-menu__menu-item-icon">
1414
- <i class="fas fa-check" aria-hidden="true"></i>
1415
- </div>
1416
- </button>
1417
- </li>
1418
- <li role="none">
1419
- <button
1420
- class="pf-v5-c-options-menu__menu-item"
1421
- type="button"
1422
- role="menuitem"
1423
- >20 per page</button>
1424
- </li>
1425
- </ul>
1401
+ <div class="pf-v5-c-pagination__page-menu">
1402
+ <div class="pf-v5-c-options-menu">
1403
+ <button
1404
+ class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
1405
+ type="button"
1406
+ id="pagination-inset-options-menu-toggle"
1407
+ aria-haspopup="listbox"
1408
+ aria-expanded="false"
1409
+ >
1410
+ <span class="pf-v5-c-options-menu__toggle-text">
1411
+ <b>1 - 10</b>&nbsp;of&nbsp;
1412
+ <b>36</b>
1413
+ </span>
1414
+ <div class="pf-v5-c-options-menu__toggle-icon">
1415
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
1416
+ </div>
1417
+ </button>
1418
+ <ul
1419
+ class="pf-v5-c-options-menu__menu"
1420
+ role="menu"
1421
+ aria-labelledby="pagination-inset-options-menu-toggle"
1422
+ hidden
1423
+ >
1424
+ <li role="none">
1425
+ <button
1426
+ class="pf-v5-c-options-menu__menu-item"
1427
+ type="button"
1428
+ role="menuitem"
1429
+ >5 per page</button>
1430
+ </li>
1431
+ <li role="none">
1432
+ <button
1433
+ class="pf-v5-c-options-menu__menu-item"
1434
+ type="button"
1435
+ role="menuitem"
1436
+ >
1437
+ 10 per page
1438
+ <div class="pf-v5-c-options-menu__menu-item-icon">
1439
+ <i class="fas fa-check" aria-hidden="true"></i>
1440
+ </div>
1441
+ </button>
1442
+ </li>
1443
+ <li role="none">
1444
+ <button
1445
+ class="pf-v5-c-options-menu__menu-item"
1446
+ type="button"
1447
+ role="menuitem"
1448
+ >20 per page</button>
1449
+ </li>
1450
+ </ul>
1451
+ </div>
1426
1452
  </div>
1427
1453
  <nav
1428
1454
  class="pf-v5-c-pagination__nav"