@patternfly/patternfly 6.0.0-alpha.7 → 6.0.0-alpha.71

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 (382) hide show
  1. package/CODE_OF_CONDUCT.md +1 -2
  2. package/README.md +13 -3
  3. package/assets/icons/iconUnicodes.json +1 -0
  4. package/assets/images/PF-Backdrop.svg +1 -0
  5. package/assets/images/PF-HorizontalLogo-Color.svg +29 -0
  6. package/assets/images/PF-HorizontalLogo-Reverse.svg +28 -0
  7. package/assets/images/PF-IconLogo-Reverse.svg +14 -0
  8. package/assets/images/PF-IconLogo-color.svg +17 -0
  9. package/assets/images/PF-IconLogo.svg +17 -0
  10. package/assets/images/logo__pf--reverse-on-md.svg +1 -1
  11. package/assets/images/pf-background.svg +22 -0
  12. package/assets/images/pf-c-brand__logo-on-lg-white.svg +32 -0
  13. package/assets/images/pf-c-brand__logo-on-md-white.svg +42 -0
  14. package/assets/images/pf-c-brand__logo-on-sm-white.svg +17 -0
  15. package/assets/images/pf-c-brand__logo-on-sm.svg +1 -1
  16. package/assets/images/pf-c-brand__logo-on-xl-white.svg +39 -0
  17. package/assets/images/pf_logo_white.hbs +35 -0
  18. package/assets/images/pf_logo_white.svg +38 -0
  19. package/assets/pficon/pf-v5-pficon.woff2 +0 -0
  20. package/assets/pficon/pficon.scss +6 -129
  21. package/base/_common.scss +29 -4
  22. package/base/_globals.scss +5 -7
  23. package/base/_variables.scss +8 -6
  24. package/base/patternfly-common.css +24 -6
  25. package/base/patternfly-globals.css +5 -4
  26. package/base/patternfly-icons.css +5 -1
  27. package/base/patternfly-pf-icons.css +5 -1
  28. package/base/patternfly-variables.css +859 -833
  29. package/base/tokens/_tokens-dark.scss +306 -284
  30. package/base/tokens/_tokens-default.scss +415 -329
  31. package/base/tokens/_tokens-font.scss +41 -46
  32. package/base/tokens/_tokens-palette.scss +68 -68
  33. package/base/tokens/_workspace-overrides.scss +7 -0
  34. package/components/AboutModalBox/about-modal-box.css +78 -104
  35. package/components/AboutModalBox/about-modal-box.scss +62 -74
  36. package/components/Accordion/accordion.css +96 -175
  37. package/components/Accordion/accordion.scss +106 -193
  38. package/components/ActionList/action-list.css +18 -17
  39. package/components/ActionList/action-list.scss +26 -16
  40. package/components/Alert/alert-group.css +27 -20
  41. package/components/Alert/alert-group.scss +27 -20
  42. package/components/Alert/alert.css +74 -95
  43. package/components/Alert/alert.scss +76 -89
  44. package/components/AppLauncher/app-launcher.css +32 -23
  45. package/components/AppLauncher/app-launcher.scss +32 -23
  46. package/components/Avatar/avatar.css +10 -13
  47. package/components/Avatar/avatar.scss +10 -17
  48. package/components/BackToTop/back-to-top.css +17 -16
  49. package/components/BackToTop/back-to-top.scss +14 -14
  50. package/components/Backdrop/backdrop.css +8 -4
  51. package/components/Backdrop/backdrop.scss +7 -4
  52. package/components/BackgroundImage/background-image.css +11 -4
  53. package/components/BackgroundImage/background-image.scss +13 -4
  54. package/components/Badge/badge.css +25 -17
  55. package/components/Badge/badge.scss +27 -19
  56. package/components/Banner/banner.css +95 -69
  57. package/components/Banner/banner.scss +100 -34
  58. package/components/Breadcrumb/breadcrumb.css +28 -19
  59. package/components/Breadcrumb/breadcrumb.scss +26 -19
  60. package/components/Button/button.css +437 -359
  61. package/components/Button/button.scss +495 -483
  62. package/components/CalendarMonth/calendar-month.css +25 -15
  63. package/components/CalendarMonth/calendar-month.scss +23 -15
  64. package/components/Card/card.css +117 -203
  65. package/components/Card/card.scss +137 -246
  66. package/components/Check/check.css +25 -22
  67. package/components/Check/check.scss +26 -24
  68. package/components/Chip/chip-group.css +6 -6
  69. package/components/Chip/chip-group.scss +6 -6
  70. package/components/Chip/chip.css +16 -9
  71. package/components/Chip/chip.scss +17 -9
  72. package/components/ClipboardCopy/clipboard-copy.css +47 -41
  73. package/components/ClipboardCopy/clipboard-copy.scss +50 -34
  74. package/components/CodeBlock/code-block.css +24 -12
  75. package/components/CodeBlock/code-block.scss +24 -13
  76. package/components/CodeEditor/code-editor.css +31 -22
  77. package/components/CodeEditor/code-editor.scss +30 -21
  78. package/components/CodeEditor/themes/dark/code-editor.scss +1 -1
  79. package/components/Content/content.css +40 -37
  80. package/components/Content/content.scss +40 -37
  81. package/components/ContextSelector/context-selector.css +41 -26
  82. package/components/ContextSelector/context-selector.scss +40 -25
  83. package/components/ContextSelector/themes/dark/context-selector.scss +1 -1
  84. package/components/DataList/data-list-grid.css +21 -21
  85. package/components/DataList/data-list-grid.scss +3 -3
  86. package/components/DataList/data-list.css +165 -209
  87. package/components/DataList/data-list.scss +138 -185
  88. package/components/DatePicker/date-picker.css +8 -8
  89. package/components/DatePicker/date-picker.scss +8 -8
  90. package/components/DescriptionList/description-list.css +47 -39
  91. package/components/DescriptionList/description-list.scss +33 -30
  92. package/components/Divider/divider.css +97 -177
  93. package/components/Divider/divider.scss +60 -79
  94. package/components/DragDrop/drag-drop.css +26 -22
  95. package/components/DragDrop/drag-drop.scss +26 -25
  96. package/components/Drawer/drawer.css +216 -158
  97. package/components/Drawer/drawer.scss +199 -150
  98. package/components/Dropdown/dropdown.css +76 -69
  99. package/components/Dropdown/dropdown.scss +67 -62
  100. package/components/DualListSelector/dual-list-selector.css +29 -15
  101. package/components/DualListSelector/dual-list-selector.scss +30 -15
  102. package/components/EmptyState/empty-state.css +64 -38
  103. package/components/EmptyState/empty-state.scss +70 -38
  104. package/components/ExpandableSection/expandable-section.css +75 -66
  105. package/components/ExpandableSection/expandable-section.scss +82 -80
  106. package/components/FileUpload/file-upload.css +31 -43
  107. package/components/FileUpload/file-upload.scss +31 -49
  108. package/components/Form/form.css +111 -154
  109. package/components/Form/form.scss +101 -160
  110. package/components/FormControl/form-control.css +95 -111
  111. package/components/FormControl/form-control.scss +97 -92
  112. package/components/HelperText/helper-text.css +29 -35
  113. package/components/HelperText/helper-text.scss +31 -41
  114. package/components/Hint/hint.css +37 -27
  115. package/components/Hint/hint.scss +37 -30
  116. package/components/Icon/icon.css +155 -19
  117. package/components/Icon/icon.scss +188 -21
  118. package/components/InlineEdit/inline-edit.css +12 -11
  119. package/components/InlineEdit/inline-edit.scss +12 -11
  120. package/components/InputGroup/input-group.css +32 -42
  121. package/components/InputGroup/input-group.scss +31 -33
  122. package/components/JumpLinks/jump-links.css +61 -58
  123. package/components/JumpLinks/jump-links.scss +61 -60
  124. package/components/Label/label-group.css +48 -50
  125. package/components/Label/label-group.scss +48 -51
  126. package/components/Label/label.css +382 -363
  127. package/components/Label/label.scss +441 -356
  128. package/components/List/list.css +25 -25
  129. package/components/List/list.scss +26 -26
  130. package/components/LogViewer/log-viewer.css +14 -14
  131. package/components/LogViewer/log-viewer.scss +14 -14
  132. package/components/Login/login.css +104 -122
  133. package/components/Login/login.scss +92 -91
  134. package/components/Masthead/masthead.css +262 -506
  135. package/components/Masthead/masthead.scss +123 -289
  136. package/components/Menu/menu.css +82 -65
  137. package/components/Menu/menu.scss +85 -69
  138. package/components/MenuToggle/menu-toggle.css +37 -31
  139. package/components/MenuToggle/menu-toggle.scss +37 -33
  140. package/components/ModalBox/modal-box.css +76 -69
  141. package/components/ModalBox/modal-box.scss +74 -70
  142. package/components/MultipleFileUpload/multiple-file-upload.css +87 -57
  143. package/components/MultipleFileUpload/multiple-file-upload.scss +92 -60
  144. package/components/Nav/nav.css +248 -899
  145. package/components/Nav/nav.scss +304 -1059
  146. package/components/Nav/themes/dark/nav.scss +2 -2
  147. package/components/NotificationBadge/notification-badge.css +66 -85
  148. package/components/NotificationBadge/notification-badge.scss +72 -103
  149. package/components/NotificationDrawer/notification-drawer.css +130 -128
  150. package/components/NotificationDrawer/notification-drawer.scss +130 -129
  151. package/components/NumberInput/number-input.css +10 -10
  152. package/components/NumberInput/number-input.scss +9 -14
  153. package/components/OptionsMenu/options-menu.css +43 -31
  154. package/components/OptionsMenu/options-menu.scss +43 -31
  155. package/components/OverflowMenu/overflow-menu.css +17 -47
  156. package/components/OverflowMenu/overflow-menu.scss +27 -65
  157. package/components/Page/page.css +182 -232
  158. package/components/Page/page.scss +130 -195
  159. package/components/Pagination/pagination.css +74 -121
  160. package/components/Pagination/pagination.scss +55 -125
  161. package/components/Panel/panel.css +40 -30
  162. package/components/Panel/panel.scss +42 -33
  163. package/components/Popover/popover.css +108 -87
  164. package/components/Popover/popover.scss +120 -109
  165. package/components/Progress/progress.css +40 -52
  166. package/components/Progress/progress.scss +48 -62
  167. package/components/ProgressStepper/progress-stepper.css +98 -89
  168. package/components/ProgressStepper/progress-stepper.scss +90 -84
  169. package/components/Radio/radio.css +30 -23
  170. package/components/Radio/radio.scss +31 -25
  171. package/components/Select/select.css +56 -47
  172. package/components/Select/select.scss +56 -47
  173. package/components/Sidebar/sidebar.css +31 -14
  174. package/components/Sidebar/sidebar.scss +34 -16
  175. package/components/SimpleList/simple-list.css +45 -56
  176. package/components/SimpleList/simple-list.scss +51 -55
  177. package/components/Skeleton/skeleton.css +24 -25
  178. package/components/Skeleton/skeleton.scss +21 -26
  179. package/components/SkipToContent/skip-to-content.css +9 -6
  180. package/components/SkipToContent/skip-to-content.scss +8 -6
  181. package/components/Slider/slider.css +80 -55
  182. package/components/Slider/slider.scss +96 -65
  183. package/components/Spinner/spinner.css +17 -34
  184. package/components/Spinner/spinner.scss +19 -47
  185. package/components/Switch/switch.css +49 -41
  186. package/components/Switch/switch.scss +51 -42
  187. package/components/TabContent/tab-content.css +21 -12
  188. package/components/TabContent/tab-content.scss +22 -15
  189. package/components/Table/table-grid.css +256 -195
  190. package/components/Table/table-grid.scss +53 -39
  191. package/components/Table/table-scrollable.css +4 -4
  192. package/components/Table/table-scrollable.scss +6 -4
  193. package/components/Table/table-tree-view.css +112 -105
  194. package/components/Table/table-tree-view.scss +38 -33
  195. package/components/Table/table.css +105 -89
  196. package/components/Table/table.scss +105 -89
  197. package/components/Tabs/tabs.css +210 -214
  198. package/components/Tabs/tabs.scss +222 -254
  199. package/components/TextInputGroup/text-input-group.css +15 -15
  200. package/components/TextInputGroup/text-input-group.scss +15 -15
  201. package/components/Tile/tile.css +47 -88
  202. package/components/Tile/tile.scss +45 -91
  203. package/components/Timestamp/timestamp.css +12 -9
  204. package/components/Timestamp/timestamp.scss +11 -10
  205. package/components/Title/title.css +70 -19
  206. package/components/Title/title.scss +90 -20
  207. package/components/ToggleGroup/toggle-group.css +68 -59
  208. package/components/ToggleGroup/toggle-group.scss +72 -57
  209. package/components/Toolbar/toolbar.css +2553 -1054
  210. package/components/Toolbar/toolbar.scss +234 -516
  211. package/components/Tooltip/tooltip.css +74 -44
  212. package/components/Tooltip/tooltip.scss +93 -77
  213. package/components/TreeView/tree-view.css +48 -27
  214. package/components/TreeView/tree-view.scss +50 -28
  215. package/components/Truncate/truncate.css +13 -0
  216. package/components/Truncate/truncate.scss +19 -3
  217. package/components/Wizard/wizard.css +57 -36
  218. package/components/Wizard/wizard.scss +57 -36
  219. package/docs/components/AboutModalBox/examples/AboutModalBox.md +2 -2
  220. package/docs/components/Accordion/examples/Accordion.md +614 -416
  221. package/docs/components/ActionList/examples/ActionList.md +73 -22
  222. package/docs/components/Alert/examples/Alert.md +3 -3
  223. package/docs/components/Avatar/examples/Avatar.md +5 -19
  224. package/docs/components/BackgroundImage/examples/BackgroundImage.md +1 -1
  225. package/docs/components/Badge/examples/Badge.md +21 -0
  226. package/docs/components/Banner/examples/Banner.md +48 -25
  227. package/docs/components/Brand/examples/Brand.css +12 -0
  228. package/docs/components/Brand/examples/Brand.md +51 -32
  229. package/docs/components/Breadcrumb/examples/Breadcrumb.md +1 -1
  230. package/docs/components/Button/examples/Button.css +6 -2
  231. package/docs/components/Button/examples/Button.md +1425 -87
  232. package/docs/components/Card/examples/Card.md +565 -148
  233. package/docs/components/Check/examples/Check.md +71 -58
  234. package/docs/components/Chip/examples/Chip.md +1 -1
  235. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +106 -0
  236. package/docs/components/CodeBlock/examples/CodeBlock.md +4 -4
  237. package/docs/components/CodeEditor/examples/CodeEditor.md +3 -3
  238. package/docs/components/Content/examples/Content.md +5 -5
  239. package/docs/components/Divider/examples/Divider.css +3 -1
  240. package/docs/components/Divider/examples/Divider.md +4 -5
  241. package/docs/components/DragDrop/examples/DragDrop.css +3 -3
  242. package/docs/components/Drawer/examples/Drawer.md +294 -256
  243. package/docs/components/Dropdown/deprecated/Dropdown.css +1 -1
  244. package/docs/components/DualListSelector/examples/DualListSelector.md +64 -16
  245. package/docs/components/EmptyState/examples/EmptyState.md +45 -1
  246. package/docs/components/ExpandableSection/examples/ExpandableSection.md +49 -28
  247. package/docs/components/FileUpload/examples/FileUpload.md +112 -53
  248. package/docs/components/Form/examples/Form.md +134 -89
  249. package/docs/components/Icon/examples/Icon.md +82 -11
  250. package/docs/components/InlineEdit/examples/InlineEdit.md +3 -1
  251. package/docs/components/JumpLinks/examples/JumpLinks.md +280 -168
  252. package/docs/components/Label/examples/Label.css +4 -0
  253. package/docs/components/Label/examples/Label.md +3091 -704
  254. package/docs/components/LogViewer/examples/LogViewer.css +2 -2
  255. package/docs/components/LogViewer/examples/LogViewer.md +300 -210
  256. package/docs/components/Login/examples/Login.md +10 -5
  257. package/docs/components/Masthead/examples/masthead.md +443 -65
  258. package/docs/components/Menu/examples/Menu.css +8 -0
  259. package/docs/components/Menu/examples/Menu.md +594 -543
  260. package/docs/components/MenuToggle/examples/MenuToggle.md +109 -96
  261. package/docs/components/ModalBox/examples/ModalBox.css +3 -8
  262. package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +9 -9
  263. package/docs/components/Nav/examples/Navigation.css +3 -42
  264. package/docs/components/Nav/examples/Navigation.md +305 -353
  265. package/docs/components/NotificationBadge/examples/NotificationBadge.md +5 -7
  266. package/docs/components/OptionsMenu/deprecated/options-menu.md +12 -3
  267. package/docs/components/Page/examples/Page.css +0 -8
  268. package/docs/components/Page/examples/Page.md +22 -21
  269. package/docs/components/Pagination/examples/Pagination.md +663 -637
  270. package/docs/components/Panel/examples/Panel.md +12 -0
  271. package/docs/components/Popover/examples/Popover.css +4 -9
  272. package/docs/components/Popover/examples/Popover.md +1 -1
  273. package/docs/components/ProgressStepper/examples/ProgressStepper.md +15 -14
  274. package/docs/components/Radio/examples/Radio.md +62 -54
  275. package/docs/components/Select/deprecated/Select.md +184 -177
  276. package/docs/components/Sidebar/examples/Sidebar.md +19 -0
  277. package/docs/components/SimpleList/examples/SimpleList.md +3 -3
  278. package/docs/components/TabContent/examples/TabContent.md +10 -10
  279. package/docs/components/Table/examples/Table.css +2 -2
  280. package/docs/components/Table/examples/Table.md +10 -10
  281. package/docs/components/Tabs/examples/Tabs.css +1 -1
  282. package/docs/components/Tabs/examples/Tabs.md +1025 -826
  283. package/docs/components/TextInputGroup/examples/TextInputGroup.css +1 -1
  284. package/docs/components/TextInputGroup/examples/TextInputGroup.md +9 -9
  285. package/docs/components/Tile/examples/Tile.css +1 -1
  286. package/docs/components/Tile/examples/Tile.md +264 -144
  287. package/docs/components/Title/examples/Title.md +18 -0
  288. package/docs/components/Toolbar/examples/Toolbar.css +20 -15
  289. package/docs/components/Toolbar/examples/Toolbar.md +1211 -3487
  290. package/docs/components/Tooltip/examples/Tooltip.css +4 -0
  291. package/docs/components/Tooltip/examples/Tooltip.md +3 -1
  292. package/docs/components/Truncate/examples/Truncate.css +2 -2
  293. package/docs/components/Truncate/examples/Truncate.md +2 -2
  294. package/docs/demos/AboutModal/examples/AboutModal.md +104 -31
  295. package/docs/demos/Alert/examples/Alert.md +330 -87
  296. package/docs/demos/BackToTop/examples/BackToTop.md +102 -29
  297. package/docs/demos/Banner/examples/Banner.md +211 -60
  298. package/docs/demos/Card/examples/Card.css +3 -3
  299. package/docs/demos/Card/examples/Card.md +28 -12
  300. package/docs/demos/CardView/examples/CardView.md +265 -207
  301. package/docs/demos/ContextSelector/examples/ContextSelector.md +377 -94
  302. package/docs/demos/Dashboard/examples/Dashboard.md +105 -32
  303. package/docs/demos/DataList/examples/DataList.md +1002 -935
  304. package/docs/demos/DescriptionList/examples/DescriptionList.md +306 -87
  305. package/docs/demos/Drawer/examples/Drawer.md +640 -251
  306. package/docs/demos/Form/examples/BasicForms.md +138 -84
  307. package/docs/demos/JumpLinks/examples/JumpLinks.md +917 -385
  308. package/docs/demos/Masthead/examples/Masthead.md +786 -342
  309. package/docs/demos/Modal/examples/Modal.md +645 -198
  310. package/docs/demos/Nav/examples/Nav.md +691 -902
  311. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +515 -145
  312. package/docs/demos/Page/examples/Page.md +942 -273
  313. package/docs/demos/Page/examples/Penta.md +66 -26
  314. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +13 -9
  315. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +44 -32
  316. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +1333 -946
  317. package/docs/demos/Skeleton/examples/Skeleton.md +109 -64
  318. package/docs/demos/Table/examples/Table.md +3857 -3418
  319. package/docs/demos/Tabs/examples/Tabs.md +664 -215
  320. package/docs/demos/Toolbar/examples/Toolbar.css +15 -0
  321. package/docs/demos/Toolbar/examples/Toolbar.md +1313 -1475
  322. package/docs/demos/Wizard/examples/Wizard.md +918 -261
  323. package/docs/layouts/Flex/examples/Flex.md +16 -16
  324. package/docs/utilities/BoxShadow/examples/box-shadow.css +5 -5
  325. package/icons/pficons.mjs +1 -0
  326. package/layouts/Flex/flex.css +115 -43
  327. package/layouts/Flex/flex.scss +20 -8
  328. package/package.json +36 -32
  329. package/patternfly-addons.css +732 -972
  330. package/patternfly-base-no-globals-theme-dark-unversioned.css +895 -847
  331. package/patternfly-base-no-globals.css +895 -847
  332. package/patternfly-base-theme-dark-unversioned.css +899 -850
  333. package/patternfly-base.css +899 -850
  334. package/patternfly-no-globals.css +9954 -8996
  335. package/patternfly-theme-dark-unversioned.css +9959 -9000
  336. package/patternfly.css +9959 -9000
  337. package/patternfly.min.css +1 -1
  338. package/patternfly.min.css.map +1 -1
  339. package/sass-utilities/functions.scss +6 -0
  340. package/sass-utilities/mixins.scss +80 -2
  341. package/sass-utilities/scss-variables.scss +8 -8
  342. package/sass-utilities/themes/dark/mixins.scss +3 -1
  343. package/utilities/Accessibility/accessibility.css +12 -12
  344. package/utilities/Spacing/spacing.css +720 -960
  345. package/utilities/Spacing/spacing.scss +4 -8
  346. package/base/themes/dark/_variables.scss +0 -102
  347. package/components/AboutModalBox/themes/dark/about-modal-box.scss +0 -7
  348. package/components/Accordion/themes/dark/accordion.scss +0 -9
  349. package/components/Alert/themes/dark/alert.scss +0 -17
  350. package/components/Badge/themes/dark/badge.scss +0 -9
  351. package/components/Banner/themes/dark/banner.scss +0 -14
  352. package/components/Button/themes/dark/button.scss +0 -51
  353. package/components/Card/themes/dark/card.scss +0 -20
  354. package/components/ClipboardCopy/themes/dark/clipboard-copy.scss +0 -19
  355. package/components/DataList/themes/dark/data-list.scss +0 -10
  356. package/components/DragDrop/themes/dark/drag-drop.scss +0 -7
  357. package/components/Drawer/themes/dark/drawer.scss +0 -13
  358. package/components/Form/themes/dark/form.scss +0 -7
  359. package/components/FormControl/themes/dark/form-control.scss +0 -24
  360. package/components/HelperText/themes/dark/helper-text.scss +0 -7
  361. package/components/Hint/themes/dark/hint.scss +0 -8
  362. package/components/InputGroup/themes/dark/input-group.scss +0 -22
  363. package/components/Label/themes/dark/label.scss +0 -53
  364. package/components/Login/themes/dark/login.scss +0 -12
  365. package/components/Masthead/themes/dark/masthead.scss +0 -14
  366. package/components/ModalBox/themes/dark/modal-box.scss +0 -7
  367. package/components/NotificationBadge/themes/dark/notification-badge.scss +0 -10
  368. package/components/NotificationDrawer/themes/dark/notification-drawer.scss +0 -14
  369. package/components/Page/themes/dark/page.scss +0 -69
  370. package/components/Pagination/themes/dark/pagination.scss +0 -7
  371. package/components/Panel/themes/dark/panel.scss +0 -7
  372. package/components/Popover/themes/dark/popover.scss +0 -11
  373. package/components/Progress/themes/dark/progress.scss +0 -9
  374. package/components/SimpleList/themes/dark/simple-list.scss +0 -14
  375. package/components/Skeleton/themes/dark/skeleton.scss +0 -10
  376. package/components/Switch/themes/dark/switch.scss +0 -11
  377. package/components/Tabs/themes/dark/tabs.scss +0 -10
  378. package/components/Tile/themes/dark/tile.scss +0 -10
  379. package/components/ToggleGroup/themes/dark/toggle-group.scss +0 -12
  380. package/components/Tooltip/themes/dark/tooltip.scss +0 -8
  381. package/docs/components/Avatar/examples/Avatar.css +0 -3
  382. 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"