@patternfly/patternfly 6.0.0-alpha.99 → 6.0.0-prerelease.2

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 (501) hide show
  1. package/README.md +1 -2
  2. package/assets/fontawesome/_animated.scss +1 -0
  3. package/assets/fontawesome/_bordered-pulled.scss +1 -0
  4. package/assets/fontawesome/_core.scss +2 -0
  5. package/assets/fontawesome/_fixed-width.scss +2 -0
  6. package/assets/fontawesome/_icons.scss +1 -0
  7. package/assets/fontawesome/_index.scss +12 -0
  8. package/assets/fontawesome/_larger.scss +4 -2
  9. package/assets/fontawesome/_list.scss +4 -2
  10. package/assets/fontawesome/_rotated-flipped.scss +2 -0
  11. package/assets/fontawesome/_screen-reader.scss +1 -0
  12. package/assets/fontawesome/_stacked.scss +3 -1
  13. package/assets/fontawesome/_variables.scss +3 -2
  14. package/assets/fontawesome/fontawesome.scss +12 -12
  15. package/assets/icons/iconUnicodes.json +6 -0
  16. package/assets/images/img_avatar-dark.svg +22 -16
  17. package/assets/images/img_avatar-light.svg +25 -18
  18. package/assets/images/pf-background.svg +21 -21
  19. package/assets/images/pf_logo.svg +11 -11
  20. package/assets/images/pf_logo_white.svg +16 -17
  21. package/assets/pficon/pf-v6-pficon.woff2 +0 -0
  22. package/assets/pficon/pficon.scss +310 -271
  23. package/base/_index.scss +10 -0
  24. package/base/{_globals.scss → normalize.scss} +15 -48
  25. package/base/patternfly-common.css +14 -0
  26. package/base/patternfly-common.scss +68 -2
  27. package/base/patternfly-fa-icons.css +1 -1
  28. package/base/patternfly-fa-icons.scss +35 -2
  29. package/base/patternfly-fonts.css +10 -80
  30. package/base/patternfly-fonts.scss +49 -2
  31. package/base/patternfly-pf-icons.css +158 -134
  32. package/base/patternfly-pf-icons.scss +1 -2
  33. package/base/patternfly-svg-icons.css +5 -0
  34. package/base/{_svg-icons.scss → patternfly-svg-icons.scss} +2 -0
  35. package/base/patternfly-variables.css +1082 -1206
  36. package/base/patternfly-variables.scss +20 -2
  37. package/base/reset.scss +33 -0
  38. package/base/tokens/_index.scss +6 -0
  39. package/base/tokens/tokens-charts-dark.scss +173 -0
  40. package/base/tokens/{_tokens-charts.scss → tokens-charts.scss} +162 -148
  41. package/base/tokens/{_tokens-dark.scss → tokens-dark.scss} +307 -294
  42. package/base/tokens/{_tokens-default.scss → tokens-default.scss} +574 -447
  43. package/base/tokens/{_tokens-font.scss → tokens-local.scss} +13 -34
  44. package/base/tokens/{_tokens-palette.scss → tokens-palette.scss} +69 -70
  45. package/components/AboutModalBox/about-modal-box.css +86 -81
  46. package/components/AboutModalBox/about-modal-box.scss +80 -82
  47. package/components/Accordion/accordion.css +44 -43
  48. package/components/Accordion/accordion.scss +52 -52
  49. package/components/ActionList/action-list.css +6 -5
  50. package/components/ActionList/action-list.scss +7 -5
  51. package/components/Alert/alert-group.css +72 -19
  52. package/components/Alert/alert-group.scss +105 -18
  53. package/components/Alert/alert.css +52 -59
  54. package/components/Alert/alert.scss +56 -65
  55. package/components/Avatar/avatar.css +42 -41
  56. package/components/Avatar/avatar.scss +8 -7
  57. package/components/BackToTop/back-to-top.css +19 -17
  58. package/components/BackToTop/back-to-top.scss +17 -17
  59. package/components/Backdrop/backdrop.css +1 -1
  60. package/components/Backdrop/backdrop.scss +3 -4
  61. package/components/BackgroundImage/background-image.scss +3 -4
  62. package/components/Badge/badge.css +29 -7
  63. package/components/Badge/badge.scss +33 -9
  64. package/components/Banner/banner.css +30 -37
  65. package/components/Banner/banner.scss +30 -43
  66. package/components/Brand/brand.css +14 -10
  67. package/components/Brand/brand.scss +8 -5
  68. package/components/Breadcrumb/breadcrumb.css +23 -24
  69. package/components/Breadcrumb/breadcrumb.scss +25 -28
  70. package/components/Button/button.css +150 -128
  71. package/components/Button/button.scss +155 -130
  72. package/components/CalendarMonth/calendar-month.css +46 -46
  73. package/components/CalendarMonth/calendar-month.scss +49 -50
  74. package/components/Card/card.css +110 -93
  75. package/components/Card/card.scss +118 -92
  76. package/components/Check/check.css +5 -5
  77. package/components/Check/check.scss +7 -8
  78. package/components/ClipboardCopy/clipboard-copy.css +33 -41
  79. package/components/ClipboardCopy/clipboard-copy.scss +35 -44
  80. package/components/CodeBlock/code-block.css +21 -20
  81. package/components/CodeBlock/code-block.scss +21 -21
  82. package/components/CodeEditor/code-editor.css +35 -34
  83. package/components/CodeEditor/code-editor.scss +35 -35
  84. package/components/Content/content.css +167 -153
  85. package/components/Content/content.scss +204 -145
  86. package/components/DataList/data-list-grid.css +117 -117
  87. package/components/DataList/data-list-grid.scss +22 -20
  88. package/components/DataList/data-list.css +308 -312
  89. package/components/DataList/data-list.scss +145 -152
  90. package/components/DatePicker/date-picker.css +17 -17
  91. package/components/DatePicker/date-picker.scss +17 -18
  92. package/components/DescriptionList/description-list-order.css +5 -5
  93. package/components/DescriptionList/description-list-order.scss +3 -1
  94. package/components/DescriptionList/description-list.css +46 -44
  95. package/components/DescriptionList/description-list.scss +26 -31
  96. package/components/Divider/divider.css +104 -107
  97. package/components/Divider/divider.scss +19 -19
  98. package/components/DragDrop/drag-drop.css +4 -2
  99. package/components/DragDrop/drag-drop.scss +3 -3
  100. package/components/Drawer/drawer.css +115 -114
  101. package/components/Drawer/drawer.scss +136 -134
  102. package/components/DualListSelector/dual-list-selector.css +64 -61
  103. package/components/DualListSelector/dual-list-selector.scss +54 -51
  104. package/components/EmptyState/empty-state.css +38 -37
  105. package/components/EmptyState/empty-state.scss +39 -39
  106. package/components/ExpandableSection/expandable-section.css +27 -86
  107. package/components/ExpandableSection/expandable-section.scss +32 -101
  108. package/components/FileUpload/file-upload.css +2 -2
  109. package/components/FileUpload/file-upload.scss +2 -3
  110. package/components/Form/form.css +173 -115
  111. package/components/Form/form.scss +117 -103
  112. package/components/FormControl/form-control.css +57 -57
  113. package/components/FormControl/form-control.scss +69 -67
  114. package/components/HelperText/helper-text.css +5 -4
  115. package/components/HelperText/helper-text.scss +8 -6
  116. package/components/Hint/hint.css +25 -25
  117. package/components/Hint/hint.scss +25 -27
  118. package/components/Icon/icon.css +10 -10
  119. package/components/Icon/icon.scss +11 -12
  120. package/components/InlineEdit/inline-edit.css +12 -12
  121. package/components/InlineEdit/inline-edit.scss +12 -13
  122. package/components/InputGroup/input-group.css +16 -16
  123. package/components/InputGroup/input-group.scss +18 -19
  124. package/components/JumpLinks/jump-links.css +80 -96
  125. package/components/JumpLinks/jump-links.scss +80 -100
  126. package/components/Label/label-group.css +28 -28
  127. package/components/Label/label-group.scss +29 -30
  128. package/components/Label/label.css +102 -87
  129. package/components/Label/label.scss +113 -94
  130. package/components/List/list.css +44 -47
  131. package/components/List/list.scss +51 -58
  132. package/components/Login/login.css +122 -118
  133. package/components/Login/login.scss +105 -112
  134. package/components/Masthead/masthead.css +273 -175
  135. package/components/Masthead/masthead.scss +102 -68
  136. package/components/Menu/menu.css +151 -95
  137. package/components/Menu/menu.scss +59 -40
  138. package/components/MenuToggle/menu-toggle.css +129 -108
  139. package/components/MenuToggle/menu-toggle.scss +150 -128
  140. package/components/ModalBox/modal-box.css +53 -45
  141. package/components/ModalBox/modal-box.scss +52 -46
  142. package/components/MultipleFileUpload/multiple-file-upload.css +37 -37
  143. package/components/MultipleFileUpload/multiple-file-upload.scss +38 -39
  144. package/components/Nav/nav.css +33 -9
  145. package/components/Nav/nav.scss +46 -13
  146. package/components/NotificationDrawer/notification-drawer.css +50 -51
  147. package/components/NotificationDrawer/notification-drawer.scss +58 -57
  148. package/components/NumberInput/number-input.css +7 -11
  149. package/components/NumberInput/number-input.scss +5 -7
  150. package/components/OverflowMenu/overflow-menu.css +2 -1
  151. package/components/OverflowMenu/overflow-menu.scss +3 -1
  152. package/components/Page/page.css +175 -519
  153. package/components/Page/page.scss +155 -386
  154. package/components/Pagination/pagination.css +82 -79
  155. package/components/Pagination/pagination.scss +43 -40
  156. package/components/Panel/panel.css +33 -30
  157. package/components/Panel/panel.scss +35 -33
  158. package/components/Popover/popover.css +54 -52
  159. package/components/Popover/popover.scss +55 -54
  160. package/components/Progress/progress.css +8 -4
  161. package/components/Progress/progress.scss +14 -11
  162. package/components/ProgressStepper/progress-stepper.css +246 -245
  163. package/components/ProgressStepper/progress-stepper.scss +118 -118
  164. package/components/Radio/radio.css +7 -7
  165. package/components/Radio/radio.scss +9 -10
  166. package/components/Sidebar/sidebar.css +139 -139
  167. package/components/Sidebar/sidebar.scss +61 -61
  168. package/components/SimpleList/simple-list.css +21 -20
  169. package/components/SimpleList/simple-list.scss +22 -23
  170. package/components/Skeleton/skeleton.css +4 -4
  171. package/components/Skeleton/skeleton.scss +7 -8
  172. package/components/SkipToContent/skip-to-content.css +7 -6
  173. package/components/SkipToContent/skip-to-content.scss +7 -7
  174. package/components/Slider/slider.css +31 -31
  175. package/components/Slider/slider.scss +54 -55
  176. package/components/Spinner/spinner.scss +4 -5
  177. package/components/Switch/switch.css +4 -10
  178. package/components/Switch/switch.scss +8 -17
  179. package/components/TabContent/tab-content.css +25 -25
  180. package/components/TabContent/tab-content.scss +28 -28
  181. package/components/Table/table-grid.css +434 -508
  182. package/components/Table/table-grid.scss +131 -150
  183. package/components/Table/table-scrollable.css +31 -34
  184. package/components/Table/table-scrollable.scss +44 -41
  185. package/components/Table/table-tree-view.css +287 -279
  186. package/components/Table/table-tree-view.scss +84 -84
  187. package/components/Table/table.css +316 -279
  188. package/components/Table/table.scss +346 -301
  189. package/components/Tabs/tabs.css +215 -240
  190. package/components/Tabs/tabs.scss +130 -162
  191. package/components/TextInputGroup/text-input-group.css +122 -64
  192. package/components/TextInputGroup/text-input-group.scss +144 -87
  193. package/components/Tile/tile.css +15 -15
  194. package/components/Tile/tile.scss +16 -17
  195. package/components/Timestamp/timestamp.css +13 -19
  196. package/components/Timestamp/timestamp.scss +16 -22
  197. package/components/Title/title.css +14 -13
  198. package/components/Title/title.scss +15 -15
  199. package/components/ToggleGroup/toggle-group.css +37 -37
  200. package/components/ToggleGroup/toggle-group.scss +38 -41
  201. package/components/Toolbar/toolbar.css +547 -1431
  202. package/components/Toolbar/toolbar.scss +159 -123
  203. package/components/Tooltip/tooltip.css +28 -27
  204. package/components/Tooltip/tooltip.scss +31 -30
  205. package/components/TreeView/tree-view.css +184 -184
  206. package/components/TreeView/tree-view.scss +133 -133
  207. package/components/Truncate/truncate.css +2 -2
  208. package/components/Truncate/truncate.scss +7 -8
  209. package/components/Wizard/wizard.css +190 -154
  210. package/components/Wizard/wizard.scss +211 -165
  211. package/components/_index.css +22378 -0
  212. package/components/_index.scss +82 -0
  213. package/docs/components/AboutModalBox/examples/AboutModalBox.md +3 -1
  214. package/docs/components/Accordion/examples/Accordion.md +1 -1
  215. package/docs/components/ActionList/examples/ActionList.md +64 -24
  216. package/docs/components/Alert/examples/Alert.md +116 -74
  217. package/docs/components/BackToTop/examples/BackToTop.md +1 -1
  218. package/docs/components/Badge/examples/Badge.md +6 -16
  219. package/docs/components/Banner/examples/Banner.md +16 -10
  220. package/docs/components/Brand/examples/Brand.md +2 -2
  221. package/docs/components/Breadcrumb/examples/Breadcrumb.md +19 -59
  222. package/docs/components/Button/examples/Button.md +537 -368
  223. package/docs/components/CalendarMonth/examples/CalendarMonth.md +24 -8
  224. package/docs/components/Card/examples/Card.md +372 -658
  225. package/docs/components/Check/examples/Check.md +10 -15
  226. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +92 -47
  227. package/docs/components/CodeBlock/examples/CodeBlock.md +51 -28
  228. package/docs/components/CodeEditor/examples/CodeEditor.md +41 -22
  229. package/docs/components/Content/examples/Content.md +600 -60
  230. package/docs/components/DataList/examples/DataList.md +291 -1028
  231. package/docs/components/DatePicker/examples/DatePicker.md +18 -6
  232. package/docs/components/DescriptionList/examples/DescriptionList.md +80 -55
  233. package/docs/components/Drawer/examples/Drawer.md +60 -21
  234. package/docs/components/DualListSelector/examples/DualListSelector.md +364 -996
  235. package/docs/components/EmptyState/examples/EmptyState.md +123 -53
  236. package/docs/components/ExpandableSection/examples/ExpandableSection.md +96 -91
  237. package/docs/components/FileUpload/examples/FileUpload.md +42 -14
  238. package/docs/components/Form/examples/Form.md +100 -26
  239. package/docs/components/Hint/examples/Hint.md +54 -164
  240. package/docs/components/InlineEdit/examples/InlineEdit.md +132 -45
  241. package/docs/components/InputGroup/examples/InputGroup.md +38 -62
  242. package/docs/components/JumpLinks/examples/JumpLinks.md +189 -72
  243. package/docs/components/Label/examples/Label.md +2577 -406
  244. package/docs/components/Login/examples/Login.md +372 -334
  245. package/docs/components/Masthead/examples/masthead.md +515 -484
  246. package/docs/components/Menu/examples/Menu.md +77 -138
  247. package/docs/components/MenuToggle/examples/MenuToggle.md +289 -39
  248. package/docs/components/ModalBox/examples/ModalBox.md +158 -100
  249. package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +137 -97
  250. package/docs/components/Nav/examples/Navigation.css +2 -7
  251. package/docs/components/Nav/examples/Navigation.md +337 -270
  252. package/docs/components/NotificationDrawer/examples/NotificationDrawer.md +515 -2076
  253. package/docs/components/NumberInput/examples/NumberInput.md +96 -48
  254. package/docs/components/OverflowMenu/examples/overflow-menu.css +4 -28
  255. package/docs/components/OverflowMenu/examples/overflow-menu.md +104 -159
  256. package/docs/components/Page/examples/Page.css +5 -9
  257. package/docs/components/Page/examples/Page.md +254 -181
  258. package/docs/components/Pagination/examples/Pagination.md +336 -756
  259. package/docs/components/Panel/examples/Panel.md +3 -2
  260. package/docs/components/Popover/examples/Popover.md +60 -15
  261. package/docs/components/ProgressStepper/examples/ProgressStepper.md +15 -15
  262. package/docs/components/Sidebar/examples/Sidebar.css +4 -2
  263. package/docs/components/Sidebar/examples/Sidebar.md +3 -3
  264. package/docs/components/Skeleton/examples/Skeleton.css +1 -1
  265. package/docs/components/SkipToContent/examples/SkipToContent.md +3 -1
  266. package/docs/components/Slider/examples/Slider.md +53 -45
  267. package/docs/components/Spinner/examples/Spinner.md +1 -1
  268. package/docs/components/Switch/examples/Switch.md +33 -148
  269. package/docs/components/Table/examples/Table.css +11 -6
  270. package/docs/components/Table/examples/Table.md +5302 -2464
  271. package/docs/components/Tabs/examples/Tabs.md +1267 -607
  272. package/docs/components/TextInputGroup/examples/TextInputGroup.css +8 -3
  273. package/docs/components/TextInputGroup/examples/TextInputGroup.md +469 -278
  274. package/docs/components/Tile/examples/Tile.css +5 -5
  275. package/docs/components/Timestamp/examples/Timestamp.md +7 -1
  276. package/docs/components/ToggleGroup/examples/toggle-group.md +1 -3
  277. package/docs/components/Toolbar/examples/Toolbar.css +50 -39
  278. package/docs/components/Toolbar/examples/Toolbar.md +1562 -1200
  279. package/docs/components/Tooltip/examples/Tooltip.css +1 -1
  280. package/docs/components/TreeView/examples/TreeView.md +627 -49
  281. package/docs/components/Truncate/examples/Truncate.css +1 -2
  282. package/docs/components/Wizard/examples/Wizard.md +1595 -126
  283. package/docs/demos/AboutModal/examples/AboutModal.md +191 -198
  284. package/docs/demos/Alert/examples/Alert.md +924 -909
  285. package/docs/demos/BackToTop/examples/BackToTop.md +318 -327
  286. package/docs/demos/Banner/examples/Banner.md +641 -659
  287. package/docs/demos/Button/examples/Button.md +8 -8
  288. package/docs/demos/Card/examples/Card.css +6 -6
  289. package/docs/demos/Card/examples/Card.md +419 -606
  290. package/docs/demos/CardView/examples/CardView.md +822 -1435
  291. package/docs/demos/Dashboard/examples/Dashboard.md +1308 -1442
  292. package/docs/demos/DataList/examples/DataList.md +3210 -3424
  293. package/docs/demos/DescriptionList/examples/DescriptionList.md +899 -937
  294. package/docs/demos/Drawer/examples/Drawer.md +1165 -1176
  295. package/docs/demos/Form/examples/BasicForms.md +153 -88
  296. package/docs/demos/JumpLinks/examples/JumpLinks.md +1710 -1602
  297. package/docs/demos/Masthead/examples/Masthead.md +1719 -1583
  298. package/docs/demos/Modal/examples/Modal.md +1231 -1235
  299. package/docs/demos/Nav/examples/Nav.md +1216 -1230
  300. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +1910 -4577
  301. package/docs/demos/Page/examples/Page.css +11 -0
  302. package/docs/demos/Page/examples/Page.md +3753 -2540
  303. package/docs/demos/Panel/Panel.md +88 -0
  304. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +9 -3
  305. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +16 -48
  306. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +5150 -6255
  307. package/docs/demos/Skeleton/examples/Skeleton.md +297 -304
  308. package/docs/demos/Table/examples/Table.md +14272 -15154
  309. package/docs/demos/Tabs/examples/Tabs.md +2821 -2891
  310. package/docs/demos/Toolbar/examples/Toolbar.css +10 -18
  311. package/docs/demos/Toolbar/examples/Toolbar.md +2487 -2663
  312. package/docs/demos/Wizard/examples/Wizard.md +3021 -2784
  313. package/docs/layouts/Bullseye/examples/Bullseye.css +4 -4
  314. package/docs/layouts/Flex/examples/Flex.css +4 -4
  315. package/docs/layouts/Flex/examples/Flex.md +50 -50
  316. package/docs/layouts/Gallery/examples/Gallery.css +4 -4
  317. package/docs/layouts/Gallery/examples/Gallery.md +6 -6
  318. package/docs/layouts/Grid/examples/Grid.css +3 -3
  319. package/docs/layouts/Grid/examples/Grid.md +33 -33
  320. package/docs/layouts/Level/examples/Level.css +5 -5
  321. package/docs/layouts/Split/examples/Split.css +4 -4
  322. package/docs/layouts/Stack/examples/Stack.css +5 -5
  323. package/docs/utilities/Accessibility/examples/Accessibility.md +2 -2
  324. package/docs/utilities/Alignment/examples/Alignment.css +6 -6
  325. package/docs/utilities/Alignment/examples/Alignment.md +5 -5
  326. package/docs/utilities/BackgroundColor/examples/BackgroundColor.md +7 -67
  327. package/docs/utilities/BoxShadow/examples/box-shadow.css +11 -11
  328. package/docs/utilities/BoxShadow/examples/box-shadow.md +15 -38
  329. package/docs/utilities/Display/examples/Display.css +3 -10
  330. package/docs/utilities/Display/examples/Display.md +21 -12
  331. package/docs/utilities/Flex/examples/Flex.css +7 -7
  332. package/docs/utilities/Flex/examples/Flex.md +82 -40
  333. package/docs/utilities/Float/examples/Float.css +5 -5
  334. package/docs/utilities/Float/examples/Float.md +6 -6
  335. package/docs/utilities/Sizing/examples/Sizing.css +6 -6
  336. package/docs/utilities/Sizing/examples/Sizing.md +60 -60
  337. package/docs/utilities/Spacing/examples/Spacing.css +3 -3
  338. package/docs/utilities/Spacing/examples/Spacing.md +37 -37
  339. package/docs/utilities/Text/examples/Text.md +78 -77
  340. package/icons/pficons.mjs +6 -0
  341. package/layouts/Bullseye/bullseye.css +4 -0
  342. package/layouts/Bullseye/bullseye.scss +5 -1
  343. package/layouts/Flex/flex.css +241 -237
  344. package/layouts/Flex/flex.scss +48 -44
  345. package/layouts/Gallery/gallery.css +15 -11
  346. package/layouts/Gallery/gallery.scss +9 -5
  347. package/layouts/Grid/grid.css +20 -16
  348. package/layouts/Grid/grid.scss +12 -8
  349. package/layouts/Level/level.css +5 -1
  350. package/layouts/Level/level.scss +6 -2
  351. package/layouts/Split/split.css +5 -1
  352. package/layouts/Split/split.scss +6 -2
  353. package/layouts/Stack/stack.css +5 -1
  354. package/layouts/Stack/stack.scss +6 -2
  355. package/layouts/_index.css +3461 -0
  356. package/layouts/_index.scss +8 -0
  357. package/package.json +39 -39
  358. package/patternfly-addons.css +2071 -2648
  359. package/patternfly-addons.scss +2 -12
  360. package/patternfly-base-no-globals.css +1429 -1645
  361. package/patternfly-base-no-globals.scss +5 -3
  362. package/patternfly-base.css +1511 -1723
  363. package/patternfly-base.scss +2 -6
  364. package/patternfly-charts.css +579 -240
  365. package/patternfly-charts.scss +352 -337
  366. package/patternfly-no-globals.css +19895 -23410
  367. package/patternfly-no-globals.scss +5 -4
  368. package/patternfly.css +19999 -23510
  369. package/patternfly.min.css +1 -1
  370. package/patternfly.min.css.map +1 -1
  371. package/patternfly.scss +3 -4
  372. package/sass-utilities/_index.scss +6 -0
  373. package/sass-utilities/functions.scss +25 -25
  374. package/sass-utilities/{_init.scss → init.scss} +6 -6
  375. package/sass-utilities/mixins.scss +108 -72
  376. package/sass-utilities/{component-namespaces.scss → namespaces-components.scss} +3 -27
  377. package/sass-utilities/{layout-namespaces.scss → namespaces-layouts.scss} +3 -1
  378. package/sass-utilities/scss-variables.scss +49 -261
  379. package/utilities/Accessibility/accessibility.css +15 -15
  380. package/utilities/Accessibility/accessibility.scss +8 -6
  381. package/utilities/Alignment/alignment.css +29 -29
  382. package/utilities/Alignment/alignment.scss +6 -4
  383. package/utilities/BackgroundColor/background-color.css +67 -0
  384. package/utilities/BackgroundColor/background-color.scss +16 -0
  385. package/utilities/BoxShadow/box-shadow.css +15 -39
  386. package/utilities/BoxShadow/box-shadow.scss +19 -28
  387. package/utilities/Display/display.css +43 -5
  388. package/utilities/Display/display.scss +7 -4
  389. package/utilities/Flex/flex.css +50 -50
  390. package/utilities/Flex/flex.scss +21 -20
  391. package/utilities/Float/float.css +29 -29
  392. package/utilities/Float/float.scss +6 -6
  393. package/utilities/Sizing/sizing.css +58 -58
  394. package/utilities/Sizing/sizing.scss +23 -21
  395. package/utilities/Spacing/spacing.css +1372 -1372
  396. package/utilities/Spacing/spacing.scss +6 -6
  397. package/utilities/Text/text.css +419 -662
  398. package/utilities/Text/text.scss +81 -107
  399. package/utilities/_index.css +7815 -0
  400. package/utilities/_index.scss +10 -0
  401. package/assets/images/pf-logo-small.svg +0 -23
  402. package/assets/images/pf_logo_white.hbs +0 -35
  403. package/assets/images/pfbg-icon.svg +0 -1
  404. package/assets/pficon/pf-v5-pficon.woff2 +0 -0
  405. package/base/_base.scss +0 -2
  406. package/base/_chart-globals.scss +0 -415
  407. package/base/_common.scss +0 -50
  408. package/base/_fa-icons.scss +0 -33
  409. package/base/_fonts.scss +0 -136
  410. package/base/_icons.scss +0 -3
  411. package/base/_pficons.scss +0 -2
  412. package/base/_themes.scss +0 -43
  413. package/base/_variables.scss +0 -299
  414. package/base/patternfly-globals.css +0 -120
  415. package/base/patternfly-globals.scss +0 -2
  416. package/base/patternfly-icons.css +0 -4728
  417. package/base/patternfly-icons.scss +0 -2
  418. package/base/patternfly-themes.css +0 -82
  419. package/base/patternfly-themes.scss +0 -2
  420. package/base/themes/dark/_chart-globals.scss +0 -42
  421. package/base/themes/dark/_globals.scss +0 -5
  422. package/base/tokens/_workspace-overrides.scss +0 -7
  423. package/components/AppLauncher/app-launcher.css +0 -244
  424. package/components/AppLauncher/app-launcher.scss +0 -308
  425. package/components/AppLauncher/themes/dark/app-launcher.scss +0 -13
  426. package/components/Chip/chip-group.css +0 -93
  427. package/components/Chip/chip-group.scss +0 -98
  428. package/components/Chip/chip.css +0 -122
  429. package/components/Chip/chip.scss +0 -140
  430. package/components/Chip/themes/dark/chip.scss +0 -9
  431. package/components/ContextSelector/context-selector.css +0 -336
  432. package/components/ContextSelector/context-selector.scss +0 -384
  433. package/components/ContextSelector/themes/dark/context-selector.scss +0 -24
  434. package/components/Dropdown/dropdown.css +0 -686
  435. package/components/Dropdown/dropdown.scss +0 -820
  436. package/components/Dropdown/themes/dark/dropdown.scss +0 -32
  437. package/components/LogViewer/log-viewer.css +0 -197
  438. package/components/LogViewer/log-viewer.scss +0 -226
  439. package/components/LogViewer/themes/dark/log-viewer.scss +0 -7
  440. package/components/NotificationBadge/notification-badge.css +0 -87
  441. package/components/NotificationBadge/notification-badge.scss +0 -108
  442. package/components/OptionsMenu/options-menu.css +0 -279
  443. package/components/OptionsMenu/options-menu.scss +0 -332
  444. package/components/OptionsMenu/themes/dark/options-menu.scss +0 -21
  445. package/components/Select/select.css +0 -599
  446. package/components/Select/select.scss +0 -713
  447. package/components/Select/themes/dark/select.scss +0 -23
  448. package/components/_all.scss +0 -91
  449. package/docs/components/AppLauncher/deprecated/application-launcher.css +0 -25
  450. package/docs/components/AppLauncher/deprecated/application-launcher.md +0 -792
  451. package/docs/components/Breadcrumb/examples/Breadcrumb.css +0 -3
  452. package/docs/components/Chip/examples/Chip.md +0 -846
  453. package/docs/components/ContextSelector/deprecated/context-selector.css +0 -7
  454. package/docs/components/ContextSelector/deprecated/context-selector.md +0 -909
  455. package/docs/components/Dropdown/deprecated/Dropdown.css +0 -64
  456. package/docs/components/Dropdown/deprecated/Dropdown.md +0 -2920
  457. package/docs/components/LogViewer/examples/LogViewer.css +0 -17
  458. package/docs/components/LogViewer/examples/LogViewer.md +0 -5936
  459. package/docs/components/NotificationBadge/examples/NotificationBadge.md +0 -222
  460. package/docs/components/OptionsMenu/deprecated/options-menu.css +0 -25
  461. package/docs/components/OptionsMenu/deprecated/options-menu.md +0 -1014
  462. package/docs/components/Page/deprecated/PageHeader.css +0 -17
  463. package/docs/components/Page/deprecated/PageHeader.md +0 -261
  464. package/docs/components/Pagination/examples/Pagination.css +0 -3
  465. package/docs/components/Select/deprecated/Select.css +0 -56
  466. package/docs/components/Select/deprecated/Select.md +0 -3525
  467. package/docs/components/Tabs/examples/Tabs.css +0 -10
  468. package/docs/components/ToggleGroup/examples/toggle-group.css +0 -4
  469. package/docs/demos/ContextSelector/examples/ContextSelector.md +0 -1712
  470. package/docs/demos/Page/examples/Penta.md +0 -821
  471. package/docs/utilities/Text/examples/Text.css +0 -0
  472. package/layouts/_all.scss +0 -7
  473. package/patternfly-base-no-globals-theme-dark-unversioned.css +0 -6276
  474. package/patternfly-base-no-globals-theme-dark-unversioned.scss +0 -11
  475. package/patternfly-base-theme-dark-unversioned.css +0 -6393
  476. package/patternfly-base-theme-dark-unversioned.scss +0 -5
  477. package/patternfly-charts-theme-dark-unversioned.css +0 -70
  478. package/patternfly-charts-theme-dark-unversioned.scss +0 -8
  479. package/patternfly-charts-theme-dark.css +0 -70
  480. package/patternfly-charts-theme-dark.scss +0 -8
  481. package/patternfly-theme-dark-unversioned.css +0 -35533
  482. package/patternfly-theme-dark-unversioned.scss +0 -6
  483. package/patternfly-theme-dark.css +0 -0
  484. package/patternfly-theme-dark.scss +0 -1
  485. package/sass-utilities/_all.scss +0 -9
  486. package/sass-utilities/colors.scss +0 -82
  487. package/sass-utilities/div.import.scss +0 -3
  488. package/sass-utilities/div.scss +0 -4
  489. package/sass-utilities/placeholders.scss +0 -72
  490. package/sass-utilities/themes/dark/_all.scss +0 -4
  491. package/sass-utilities/themes/dark/colors.scss +0 -16
  492. package/sass-utilities/themes/dark/mixins.scss +0 -7
  493. package/sass-utilities/themes/dark/placeholders.scss +0 -5
  494. package/sass-utilities/themes/dark/scss-variables.scss +0 -92
  495. package/themes/dark/_patternfly-charts-theme-dark.scss +0 -98
  496. package/utilities/BackgroundColor/BackgroundColor.css +0 -414
  497. package/utilities/BackgroundColor/BackgroundColor.scss +0 -64
  498. package/utilities/BackgroundColor/themes/dark/BackgroundColor.css +0 -0
  499. package/utilities/BackgroundColor/themes/dark/BackgroundColor.scss +0 -25
  500. package/utilities/Text/themes/dark/text.css +0 -0
  501. package/utilities/Text/themes/dark/text.scss +0 -33
package/docs/components/Pagination/examples/Pagination.md CHANGED
@@ -2,9 +2,7 @@
2
2
  id: Pagination
3
3
  section: components
4
4
  cssPrefix: pf-v6-c-pagination
5
- ---import './Pagination.css'
6
-
7
- ## Examples
5
+ ---## Examples
8
6
 
9
7
  ### Top
10
8
 
@@ -15,56 +13,23 @@ cssPrefix: pf-v6-c-pagination
15
13
  <b>36</b>
16
14
  </div>
17
15
  <div class="pf-v6-c-pagination__page-menu">
18
- <div class="pf-v6-c-options-menu">
19
- <button
20
- class="pf-v6-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-v6-c-options-menu__toggle-text">
27
- <b>1 - 10</b>&nbsp;of&nbsp;
28
- <b>36</b>
29
- </span>
30
- <div class="pf-v6-c-options-menu__toggle-icon">
16
+ <button
17
+ class="pf-v6-c-menu-toggle pf-m-plain pf-m-text"
18
+ type="button"
19
+ aria-expanded="false"
20
+ aria-label="Menu toggle"
21
+ id="pagination-menu-toggle-top-example"
22
+ >
23
+ <span class="pf-v6-c-menu-toggle__text">
24
+ <b>1 - 10</b>&nbsp;of&nbsp;
25
+ <b>36</b>
26
+ </span>
27
+ <span class="pf-v6-c-menu-toggle__controls">
28
+ <span class="pf-v6-c-menu-toggle__toggle-icon">
31
29
  <i class="fas fa-caret-down" aria-hidden="true"></i>
32
- </div>
33
- </button>
34
- <ul
35
- class="pf-v6-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-v6-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-v6-c-options-menu__menu-item"
50
- type="button"
51
- role="menuitem"
52
- >
53
- 10 per page
54
- <div class="pf-v6-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-v6-c-options-menu__menu-item"
62
- type="button"
63
- role="menuitem"
64
- >20 per page</button>
65
- </li>
66
- </ul>
67
- </div>
30
+ </span>
31
+ </span>
32
+ </button>
68
33
  </div>
69
34
  <nav
70
35
  class="pf-v6-c-pagination__nav"
@@ -77,125 +42,9 @@ cssPrefix: pf-v6-c-pagination
77
42
  disabled
78
43
  aria-label="Go to first page"
79
44
  >
80
- <i class="fas fa-angle-double-left" aria-hidden="true"></i>
81
- </button>
82
- </div>
83
- <div class="pf-v6-c-pagination__nav-control pf-m-prev">
84
- <button
85
- class="pf-v6-c-button pf-m-plain"
86
- type="button"
87
- disabled
88
- aria-label="Go to previous page"
89
- >
90
- <i class="fas fa-angle-left" aria-hidden="true"></i>
91
- </button>
92
- </div>
93
- <div class="pf-v6-c-pagination__nav-page-select">
94
- <span class="pf-v6-c-form-control">
95
- <input
96
- aria-label="Current page"
97
- type="number"
98
- min="1"
99
- max="4"
100
- value="1"
101
- />
102
- </span>
103
- <span aria-hidden="true">of 4</span>
104
- </div>
105
- <div class="pf-v6-c-pagination__nav-control pf-m-next">
106
- <button
107
- class="pf-v6-c-button pf-m-plain"
108
- type="button"
109
- aria-label="Go to next page"
110
- >
111
- <i class="fas fa-angle-right" aria-hidden="true"></i>
112
- </button>
113
- </div>
114
- <div class="pf-v6-c-pagination__nav-control pf-m-last">
115
- <button
116
- class="pf-v6-c-button pf-m-plain"
117
- type="button"
118
- aria-label="Go to last page"
119
- >
120
- <i class="fas fa-angle-double-right" aria-hidden="true"></i>
121
- </button>
122
- </div>
123
- </nav>
124
- </div>
125
-
126
- ```
127
-
128
- ### Top expanded
129
-
130
- ```html
131
- <div class="pf-v6-c-pagination">
132
- <div class="pf-v6-c-pagination__total-items">
133
- <b>1 - 10</b>&nbsp;of&nbsp;
134
- <b>36</b>
135
- </div>
136
- <div class="pf-v6-c-pagination__page-menu">
137
- <div class="pf-v6-c-options-menu pf-m-expanded">
138
- <button
139
- class="pf-v6-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-v6-c-options-menu__toggle-text">
146
- <b>1 - 10</b>&nbsp;of&nbsp;
147
- <b>36</b>
45
+ <span class="pf-v6-c-button__icon">
46
+ <i class="fas fa-angle-double-left" aria-hidden="true"></i>
148
47
  </span>
149
- <div class="pf-v6-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-v6-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-v6-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-v6-c-options-menu__menu-item"
168
- type="button"
169
- role="menuitem"
170
- >
171
- 10 per page
172
- <div class="pf-v6-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-v6-c-options-menu__menu-item"
180
- type="button"
181
- role="menuitem"
182
- >20 per page</button>
183
- </li>
184
- </ul>
185
- </div>
186
- </div>
187
- <nav
188
- class="pf-v6-c-pagination__nav"
189
- aria-label="Pagination nav - top expanded example"
190
- >
191
- <div class="pf-v6-c-pagination__nav-control pf-m-first">
192
- <button
193
- class="pf-v6-c-button pf-m-plain"
194
- type="button"
195
- disabled
196
- aria-label="Go to first page"
197
- >
198
- <i class="fas fa-angle-double-left" aria-hidden="true"></i>
199
48
  </button>
200
49
  </div>
201
50
  <div class="pf-v6-c-pagination__nav-control pf-m-prev">
@@ -205,7 +54,9 @@ cssPrefix: pf-v6-c-pagination
205
54
  disabled
206
55
  aria-label="Go to previous page"
207
56
  >
208
- <i class="fas fa-angle-left" aria-hidden="true"></i>
57
+ <span class="pf-v6-c-button__icon">
58
+ <i class="fas fa-angle-left" aria-hidden="true"></i>
59
+ </span>
209
60
  </button>
210
61
  </div>
211
62
  <div class="pf-v6-c-pagination__nav-page-select">
@@ -226,16 +77,21 @@ cssPrefix: pf-v6-c-pagination
226
77
  type="button"
227
78
  aria-label="Go to next page"
228
79
  >
229
- <i class="fas fa-angle-right" aria-hidden="true"></i>
80
+ <span class="pf-v6-c-button__icon">
81
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
82
+ </span>
230
83
  </button>
231
84
  </div>
232
85
  <div class="pf-v6-c-pagination__nav-control pf-m-last">
233
86
  <button
234
87
  class="pf-v6-c-button pf-m-plain"
235
88
  type="button"
89
+ disabled
236
90
  aria-label="Go to last page"
237
91
  >
238
- <i class="fas fa-angle-double-right" aria-hidden="true"></i>
92
+ <span class="pf-v6-c-button__icon">
93
+ <i class="fas fa-angle-double-right" aria-hidden="true"></i>
94
+ </span>
239
95
  </button>
240
96
  </div>
241
97
  </nav>
@@ -252,56 +108,23 @@ cssPrefix: pf-v6-c-pagination
252
108
  <b>36</b>
253
109
  </div>
254
110
  <div class="pf-v6-c-pagination__page-menu">
255
- <div class="pf-v6-c-options-menu">
256
- <button
257
- class="pf-v6-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-v6-c-options-menu__toggle-text">
264
- <b>1 - 10</b>&nbsp;of&nbsp;
265
- <b>36</b>
266
- </span>
267
- <div class="pf-v6-c-options-menu__toggle-icon">
111
+ <button
112
+ class="pf-v6-c-menu-toggle pf-m-plain pf-m-text"
113
+ type="button"
114
+ aria-expanded="false"
115
+ aria-label="Menu toggle"
116
+ id="pagination-menu-toggle-top-sticky-example"
117
+ >
118
+ <span class="pf-v6-c-menu-toggle__text">
119
+ <b>1 - 10</b>&nbsp;of&nbsp;
120
+ <b>36</b>
121
+ </span>
122
+ <span class="pf-v6-c-menu-toggle__controls">
123
+ <span class="pf-v6-c-menu-toggle__toggle-icon">
268
124
  <i class="fas fa-caret-down" aria-hidden="true"></i>
269
- </div>
270
- </button>
271
- <ul
272
- class="pf-v6-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-v6-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-v6-c-options-menu__menu-item"
287
- type="button"
288
- role="menuitem"
289
- >
290
- 10 per page
291
- <div class="pf-v6-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-v6-c-options-menu__menu-item"
299
- type="button"
300
- role="menuitem"
301
- >20 per page</button>
302
- </li>
303
- </ul>
304
- </div>
125
+ </span>
126
+ </span>
127
+ </button>
305
128
  </div>
306
129
  <nav
307
130
  class="pf-v6-c-pagination__nav"
@@ -314,7 +137,9 @@ cssPrefix: pf-v6-c-pagination
314
137
  disabled
315
138
  aria-label="Go to first page"
316
139
  >
317
- <i class="fas fa-angle-double-left" aria-hidden="true"></i>
140
+ <span class="pf-v6-c-button__icon">
141
+ <i class="fas fa-angle-double-left" aria-hidden="true"></i>
142
+ </span>
318
143
  </button>
319
144
  </div>
320
145
  <div class="pf-v6-c-pagination__nav-control pf-m-prev">
@@ -324,7 +149,9 @@ cssPrefix: pf-v6-c-pagination
324
149
  disabled
325
150
  aria-label="Go to previous page"
326
151
  >
327
- <i class="fas fa-angle-left" aria-hidden="true"></i>
152
+ <span class="pf-v6-c-button__icon">
153
+ <i class="fas fa-angle-left" aria-hidden="true"></i>
154
+ </span>
328
155
  </button>
329
156
  </div>
330
157
  <div class="pf-v6-c-pagination__nav-page-select">
@@ -345,16 +172,21 @@ cssPrefix: pf-v6-c-pagination
345
172
  type="button"
346
173
  aria-label="Go to next page"
347
174
  >
348
- <i class="fas fa-angle-right" aria-hidden="true"></i>
175
+ <span class="pf-v6-c-button__icon">
176
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
177
+ </span>
349
178
  </button>
350
179
  </div>
351
180
  <div class="pf-v6-c-pagination__nav-control pf-m-last">
352
181
  <button
353
182
  class="pf-v6-c-button pf-m-plain"
354
183
  type="button"
184
+ disabled
355
185
  aria-label="Go to last page"
356
186
  >
357
- <i class="fas fa-angle-double-right" aria-hidden="true"></i>
187
+ <span class="pf-v6-c-button__icon">
188
+ <i class="fas fa-angle-double-right" aria-hidden="true"></i>
189
+ </span>
358
190
  </button>
359
191
  </div>
360
192
  </nav>
@@ -381,56 +213,23 @@ cssPrefix: pf-v6-c-pagination
381
213
  <b>many</b>
382
214
  </div>
383
215
  <div class="pf-v6-c-pagination__page-menu">
384
- <div class="pf-v6-c-options-menu">
385
- <button
386
- class="pf-v6-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-v6-c-options-menu__toggle-text">
393
- <b>1 - 10</b>&nbsp;of&nbsp;
394
- <b>many</b>
395
- </span>
396
- <div class="pf-v6-c-options-menu__toggle-icon">
216
+ <button
217
+ class="pf-v6-c-menu-toggle pf-m-plain pf-m-text"
218
+ type="button"
219
+ aria-expanded="false"
220
+ aria-label="Menu toggle"
221
+ id="pagination-menu-toggle-top-indeterminate-example"
222
+ >
223
+ <span class="pf-v6-c-menu-toggle__text">
224
+ <b>1 - 10</b>&nbsp;of&nbsp;
225
+ <b>many</b>
226
+ </span>
227
+ <span class="pf-v6-c-menu-toggle__controls">
228
+ <span class="pf-v6-c-menu-toggle__toggle-icon">
397
229
  <i class="fas fa-caret-down" aria-hidden="true"></i>
398
- </div>
399
- </button>
400
- <ul
401
- class="pf-v6-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-v6-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-v6-c-options-menu__menu-item"
416
- type="button"
417
- role="menuitem"
418
- >
419
- 10 per page
420
- <div class="pf-v6-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-v6-c-options-menu__menu-item"
428
- type="button"
429
- role="menuitem"
430
- >20 per page</button>
431
- </li>
432
- </ul>
433
- </div>
230
+ </span>
231
+ </span>
232
+ </button>
434
233
  </div>
435
234
  <nav
436
235
  class="pf-v6-c-pagination__nav"
@@ -443,7 +242,9 @@ cssPrefix: pf-v6-c-pagination
443
242
  disabled
444
243
  aria-label="Go to first page"
445
244
  >
446
- <i class="fas fa-angle-double-left" aria-hidden="true"></i>
245
+ <span class="pf-v6-c-button__icon">
246
+ <i class="fas fa-angle-double-left" aria-hidden="true"></i>
247
+ </span>
447
248
  </button>
448
249
  </div>
449
250
  <div class="pf-v6-c-pagination__nav-control pf-m-prev">
@@ -453,7 +254,9 @@ cssPrefix: pf-v6-c-pagination
453
254
  disabled
454
255
  aria-label="Go to previous page"
455
256
  >
456
- <i class="fas fa-angle-left" aria-hidden="true"></i>
257
+ <span class="pf-v6-c-button__icon">
258
+ <i class="fas fa-angle-left" aria-hidden="true"></i>
259
+ </span>
457
260
  </button>
458
261
  </div>
459
262
  <div class="pf-v6-c-pagination__nav-page-select">
@@ -473,16 +276,21 @@ cssPrefix: pf-v6-c-pagination
473
276
  type="button"
474
277
  aria-label="Go to next page"
475
278
  >
476
- <i class="fas fa-angle-right" aria-hidden="true"></i>
279
+ <span class="pf-v6-c-button__icon">
280
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
281
+ </span>
477
282
  </button>
478
283
  </div>
479
284
  <div class="pf-v6-c-pagination__nav-control pf-m-last">
480
285
  <button
481
286
  class="pf-v6-c-button pf-m-plain"
482
287
  type="button"
288
+ disabled
483
289
  aria-label="Go to last page"
484
290
  >
485
- <i class="fas fa-angle-double-right" aria-hidden="true"></i>
291
+ <span class="pf-v6-c-button__icon">
292
+ <i class="fas fa-angle-double-right" aria-hidden="true"></i>
293
+ </span>
486
294
  </button>
487
295
  </div>
488
296
  </nav>
@@ -495,56 +303,23 @@ cssPrefix: pf-v6-c-pagination
495
303
  ```html
496
304
  <div class="pf-v6-c-pagination pf-m-bottom">
497
305
  <div class="pf-v6-c-pagination__page-menu">
498
- <div class="pf-v6-c-options-menu pf-m-top">
499
- <button
500
- class="pf-v6-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-v6-c-options-menu__toggle-text">
507
- <b>1 - 10</b>&nbsp;of&nbsp;
508
- <b>36</b>
509
- </span>
510
- <div class="pf-v6-c-options-menu__toggle-icon">
306
+ <button
307
+ class="pf-v6-c-menu-toggle pf-m-plain pf-m-text pf-m-top"
308
+ type="button"
309
+ aria-expanded="false"
310
+ aria-label="Menu toggle"
311
+ id="pagination-menu-toggle-bottom-example"
312
+ >
313
+ <span class="pf-v6-c-menu-toggle__text">
314
+ <b>1 - 10</b>&nbsp;of&nbsp;
315
+ <b>36</b>
316
+ </span>
317
+ <span class="pf-v6-c-menu-toggle__controls">
318
+ <span class="pf-v6-c-menu-toggle__toggle-icon">
511
319
  <i class="fas fa-caret-down" aria-hidden="true"></i>
512
- </div>
513
- </button>
514
- <ul
515
- class="pf-v6-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-v6-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-v6-c-options-menu__menu-item"
530
- type="button"
531
- role="menuitem"
532
- >
533
- 10 per page
534
- <div class="pf-v6-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-v6-c-options-menu__menu-item"
542
- type="button"
543
- role="menuitem"
544
- >20 per page</button>
545
- </li>
546
- </ul>
547
- </div>
320
+ </span>
321
+ </span>
322
+ </button>
548
323
  </div>
549
324
  <nav
550
325
  class="pf-v6-c-pagination__nav"
@@ -557,7 +332,9 @@ cssPrefix: pf-v6-c-pagination
557
332
  disabled
558
333
  aria-label="Go to first page"
559
334
  >
560
- <i class="fas fa-angle-double-left" aria-hidden="true"></i>
335
+ <span class="pf-v6-c-button__icon">
336
+ <i class="fas fa-angle-double-left" aria-hidden="true"></i>
337
+ </span>
561
338
  </button>
562
339
  </div>
563
340
  <div class="pf-v6-c-pagination__nav-control pf-m-prev">
@@ -567,7 +344,9 @@ cssPrefix: pf-v6-c-pagination
567
344
  disabled
568
345
  aria-label="Go to previous page"
569
346
  >
570
- <i class="fas fa-angle-left" aria-hidden="true"></i>
347
+ <span class="pf-v6-c-button__icon">
348
+ <i class="fas fa-angle-left" aria-hidden="true"></i>
349
+ </span>
571
350
  </button>
572
351
  </div>
573
352
  <div class="pf-v6-c-pagination__nav-page-select">
@@ -588,16 +367,21 @@ cssPrefix: pf-v6-c-pagination
588
367
  type="button"
589
368
  aria-label="Go to next page"
590
369
  >
591
- <i class="fas fa-angle-right" aria-hidden="true"></i>
370
+ <span class="pf-v6-c-button__icon">
371
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
372
+ </span>
592
373
  </button>
593
374
  </div>
594
375
  <div class="pf-v6-c-pagination__nav-control pf-m-last">
595
376
  <button
596
377
  class="pf-v6-c-button pf-m-plain"
597
378
  type="button"
379
+ disabled
598
380
  aria-label="Go to last page"
599
381
  >
600
- <i class="fas fa-angle-double-right" aria-hidden="true"></i>
382
+ <span class="pf-v6-c-button__icon">
383
+ <i class="fas fa-angle-double-right" aria-hidden="true"></i>
384
+ </span>
601
385
  </button>
602
386
  </div>
603
387
  </nav>
@@ -620,56 +404,23 @@ cssPrefix: pf-v6-c-pagination
620
404
  <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat, nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.</div>
621
405
  <div class="pf-v6-c-pagination pf-m-bottom pf-m-sticky">
622
406
  <div class="pf-v6-c-pagination__page-menu">
623
- <div class="pf-v6-c-options-menu pf-m-top">
624
- <button
625
- class="pf-v6-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-v6-c-options-menu__toggle-text">
632
- <b>1 - 10</b>&nbsp;of&nbsp;
633
- <b>36</b>
634
- </span>
635
- <div class="pf-v6-c-options-menu__toggle-icon">
407
+ <button
408
+ class="pf-v6-c-menu-toggle pf-m-plain pf-m-text pf-m-top"
409
+ type="button"
410
+ aria-expanded="false"
411
+ aria-label="Menu toggle"
412
+ id="pagination-menu-toggle-bottom-sticky-example"
413
+ >
414
+ <span class="pf-v6-c-menu-toggle__text">
415
+ <b>1 - 10</b>&nbsp;of&nbsp;
416
+ <b>36</b>
417
+ </span>
418
+ <span class="pf-v6-c-menu-toggle__controls">
419
+ <span class="pf-v6-c-menu-toggle__toggle-icon">
636
420
  <i class="fas fa-caret-down" aria-hidden="true"></i>
637
- </div>
638
- </button>
639
- <ul
640
- class="pf-v6-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-v6-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-v6-c-options-menu__menu-item"
655
- type="button"
656
- role="menuitem"
657
- >
658
- 10 per page
659
- <div class="pf-v6-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-v6-c-options-menu__menu-item"
667
- type="button"
668
- role="menuitem"
669
- >20 per page</button>
670
- </li>
671
- </ul>
672
- </div>
421
+ </span>
422
+ </span>
423
+ </button>
673
424
  </div>
674
425
  <nav
675
426
  class="pf-v6-c-pagination__nav"
@@ -682,7 +433,9 @@ cssPrefix: pf-v6-c-pagination
682
433
  disabled
683
434
  aria-label="Go to first page"
684
435
  >
685
- <i class="fas fa-angle-double-left" aria-hidden="true"></i>
436
+ <span class="pf-v6-c-button__icon">
437
+ <i class="fas fa-angle-double-left" aria-hidden="true"></i>
438
+ </span>
686
439
  </button>
687
440
  </div>
688
441
  <div class="pf-v6-c-pagination__nav-control pf-m-prev">
@@ -692,7 +445,9 @@ cssPrefix: pf-v6-c-pagination
692
445
  disabled
693
446
  aria-label="Go to previous page"
694
447
  >
695
- <i class="fas fa-angle-left" aria-hidden="true"></i>
448
+ <span class="pf-v6-c-button__icon">
449
+ <i class="fas fa-angle-left" aria-hidden="true"></i>
450
+ </span>
696
451
  </button>
697
452
  </div>
698
453
  <div class="pf-v6-c-pagination__nav-page-select">
@@ -713,16 +468,21 @@ cssPrefix: pf-v6-c-pagination
713
468
  type="button"
714
469
  aria-label="Go to next page"
715
470
  >
716
- <i class="fas fa-angle-right" aria-hidden="true"></i>
471
+ <span class="pf-v6-c-button__icon">
472
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
473
+ </span>
717
474
  </button>
718
475
  </div>
719
476
  <div class="pf-v6-c-pagination__nav-control pf-m-last">
720
477
  <button
721
478
  class="pf-v6-c-button pf-m-plain"
722
479
  type="button"
480
+ disabled
723
481
  aria-label="Go to last page"
724
482
  >
725
- <i class="fas fa-angle-double-right" aria-hidden="true"></i>
483
+ <span class="pf-v6-c-button__icon">
484
+ <i class="fas fa-angle-double-right" aria-hidden="true"></i>
485
+ </span>
726
486
  </button>
727
487
  </div>
728
488
  </nav>
@@ -739,57 +499,24 @@ cssPrefix: pf-v6-c-pagination
739
499
  <b>36</b>
740
500
  </div>
741
501
  <div class="pf-v6-c-pagination__page-menu">
742
- <div class="pf-v6-c-options-menu">
743
- <button
744
- class="pf-v6-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-v6-c-options-menu__toggle-text">
752
- <b>1 - 10</b>&nbsp;of&nbsp;
753
- <b>36</b>
754
- </span>
755
- <div class="pf-v6-c-options-menu__toggle-icon">
502
+ <button
503
+ class="pf-v6-c-menu-toggle pf-m-plain pf-m-text pf-m-disabled"
504
+ type="button"
505
+ aria-expanded="false"
506
+ disabled
507
+ aria-label="Menu toggle"
508
+ id="pagination-menu-toggle-top-disabled-example"
509
+ >
510
+ <span class="pf-v6-c-menu-toggle__text">
511
+ <b>1 - 10</b>&nbsp;of&nbsp;
512
+ <b>36</b>
513
+ </span>
514
+ <span class="pf-v6-c-menu-toggle__controls">
515
+ <span class="pf-v6-c-menu-toggle__toggle-icon">
756
516
  <i class="fas fa-caret-down" aria-hidden="true"></i>
757
- </div>
758
- </button>
759
- <ul
760
- class="pf-v6-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-v6-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-v6-c-options-menu__menu-item"
775
- type="button"
776
- role="menuitem"
777
- >
778
- 10 per page
779
- <div class="pf-v6-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-v6-c-options-menu__menu-item"
787
- type="button"
788
- role="menuitem"
789
- >20 per page</button>
790
- </li>
791
- </ul>
792
- </div>
517
+ </span>
518
+ </span>
519
+ </button>
793
520
  </div>
794
521
  <nav
795
522
  class="pf-v6-c-pagination__nav"
@@ -802,7 +529,9 @@ cssPrefix: pf-v6-c-pagination
802
529
  disabled
803
530
  aria-label="Go to first page"
804
531
  >
805
- <i class="fas fa-angle-double-left" aria-hidden="true"></i>
532
+ <span class="pf-v6-c-button__icon">
533
+ <i class="fas fa-angle-double-left" aria-hidden="true"></i>
534
+ </span>
806
535
  </button>
807
536
  </div>
808
537
  <div class="pf-v6-c-pagination__nav-control pf-m-prev">
@@ -812,7 +541,9 @@ cssPrefix: pf-v6-c-pagination
812
541
  disabled
813
542
  aria-label="Go to previous page"
814
543
  >
815
- <i class="fas fa-angle-left" aria-hidden="true"></i>
544
+ <span class="pf-v6-c-button__icon">
545
+ <i class="fas fa-angle-left" aria-hidden="true"></i>
546
+ </span>
816
547
  </button>
817
548
  </div>
818
549
  <div class="pf-v6-c-pagination__nav-page-select">
@@ -835,7 +566,9 @@ cssPrefix: pf-v6-c-pagination
835
566
  disabled
836
567
  aria-label="Go to next page"
837
568
  >
838
- <i class="fas fa-angle-right" aria-hidden="true"></i>
569
+ <span class="pf-v6-c-button__icon">
570
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
571
+ </span>
839
572
  </button>
840
573
  </div>
841
574
  <div class="pf-v6-c-pagination__nav-control pf-m-last">
@@ -845,7 +578,9 @@ cssPrefix: pf-v6-c-pagination
845
578
  disabled
846
579
  aria-label="Go to last page"
847
580
  >
848
- <i class="fas fa-angle-double-right" aria-hidden="true"></i>
581
+ <span class="pf-v6-c-button__icon">
582
+ <i class="fas fa-angle-double-right" aria-hidden="true"></i>
583
+ </span>
849
584
  </button>
850
585
  </div>
851
586
  </nav>
@@ -862,56 +597,23 @@ cssPrefix: pf-v6-c-pagination
862
597
  <b>36</b>
863
598
  </div>
864
599
  <div class="pf-v6-c-pagination__page-menu">
865
- <div class="pf-v6-c-options-menu">
866
- <button
867
- class="pf-v6-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-v6-c-options-menu__toggle-text">
874
- <b>1 - 10</b>&nbsp;of&nbsp;
875
- <b>36</b>
876
- </span>
877
- <div class="pf-v6-c-options-menu__toggle-icon">
600
+ <button
601
+ class="pf-v6-c-menu-toggle pf-m-plain pf-m-text"
602
+ type="button"
603
+ aria-expanded="false"
604
+ aria-label="Menu toggle"
605
+ id="pagination-menu-toggle-compact-example"
606
+ >
607
+ <span class="pf-v6-c-menu-toggle__text">
608
+ <b>1 - 10</b>&nbsp;of&nbsp;
609
+ <b>36</b>
610
+ </span>
611
+ <span class="pf-v6-c-menu-toggle__controls">
612
+ <span class="pf-v6-c-menu-toggle__toggle-icon">
878
613
  <i class="fas fa-caret-down" aria-hidden="true"></i>
879
- </div>
880
- </button>
881
- <ul
882
- class="pf-v6-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-v6-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-v6-c-options-menu__menu-item"
897
- type="button"
898
- role="menuitem"
899
- >
900
- 10 per page
901
- <div class="pf-v6-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-v6-c-options-menu__menu-item"
909
- type="button"
910
- role="menuitem"
911
- >20 per page</button>
912
- </li>
913
- </ul>
914
- </div>
614
+ </span>
615
+ </span>
616
+ </button>
915
617
  </div>
916
618
  <nav
917
619
  class="pf-v6-c-pagination__nav"
@@ -924,7 +626,9 @@ cssPrefix: pf-v6-c-pagination
924
626
  disabled
925
627
  aria-label="Go to previous page"
926
628
  >
927
- <i class="fas fa-angle-left" aria-hidden="true"></i>
629
+ <span class="pf-v6-c-button__icon">
630
+ <i class="fas fa-angle-left" aria-hidden="true"></i>
631
+ </span>
928
632
  </button>
929
633
  </div>
930
634
  <div class="pf-v6-c-pagination__nav-control pf-m-next">
@@ -933,7 +637,9 @@ cssPrefix: pf-v6-c-pagination
933
637
  type="button"
934
638
  aria-label="Go to next page"
935
639
  >
936
- <i class="fas fa-angle-right" aria-hidden="true"></i>
640
+ <span class="pf-v6-c-button__icon">
641
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
642
+ </span>
937
643
  </button>
938
644
  </div>
939
645
  </nav>
@@ -950,56 +656,23 @@ cssPrefix: pf-v6-c-pagination
950
656
  <b>36</b>
951
657
  </div>
952
658
  <div class="pf-v6-c-pagination__page-menu">
953
- <div class="pf-v6-c-options-menu">
954
- <button
955
- class="pf-v6-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-v6-c-options-menu__toggle-text">
962
- <b>1 - 10</b>&nbsp;of&nbsp;
963
- <b>36</b>
964
- </span>
965
- <div class="pf-v6-c-options-menu__toggle-icon">
659
+ <button
660
+ class="pf-v6-c-menu-toggle pf-m-plain pf-m-text"
661
+ type="button"
662
+ aria-expanded="false"
663
+ aria-label="Menu toggle"
664
+ id="pagination-top-with-summary-modifier-menu-toggle"
665
+ >
666
+ <span class="pf-v6-c-menu-toggle__text">
667
+ <b>1 - 10</b>&nbsp;of&nbsp;
668
+ <b>36</b>
669
+ </span>
670
+ <span class="pf-v6-c-menu-toggle__controls">
671
+ <span class="pf-v6-c-menu-toggle__toggle-icon">
966
672
  <i class="fas fa-caret-down" aria-hidden="true"></i>
967
- </div>
968
- </button>
969
- <ul
970
- class="pf-v6-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-v6-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-v6-c-options-menu__menu-item"
985
- type="button"
986
- role="menuitem"
987
- >
988
- 10 per page
989
- <div class="pf-v6-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-v6-c-options-menu__menu-item"
997
- type="button"
998
- role="menuitem"
999
- >20 per page</button>
1000
- </li>
1001
- </ul>
1002
- </div>
673
+ </span>
674
+ </span>
675
+ </button>
1003
676
  </div>
1004
677
  <nav
1005
678
  class="pf-v6-c-pagination__nav"
@@ -1012,7 +685,9 @@ cssPrefix: pf-v6-c-pagination
1012
685
  disabled
1013
686
  aria-label="Go to first page"
1014
687
  >
1015
- <i class="fas fa-angle-double-left" aria-hidden="true"></i>
688
+ <span class="pf-v6-c-button__icon">
689
+ <i class="fas fa-angle-double-left" aria-hidden="true"></i>
690
+ </span>
1016
691
  </button>
1017
692
  </div>
1018
693
  <div class="pf-v6-c-pagination__nav-control pf-m-prev">
@@ -1022,7 +697,9 @@ cssPrefix: pf-v6-c-pagination
1022
697
  disabled
1023
698
  aria-label="Go to previous page"
1024
699
  >
1025
- <i class="fas fa-angle-left" aria-hidden="true"></i>
700
+ <span class="pf-v6-c-button__icon">
701
+ <i class="fas fa-angle-left" aria-hidden="true"></i>
702
+ </span>
1026
703
  </button>
1027
704
  </div>
1028
705
  <div class="pf-v6-c-pagination__nav-page-select">
@@ -1043,16 +720,21 @@ cssPrefix: pf-v6-c-pagination
1043
720
  type="button"
1044
721
  aria-label="Go to next page"
1045
722
  >
1046
- <i class="fas fa-angle-right" aria-hidden="true"></i>
723
+ <span class="pf-v6-c-button__icon">
724
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
725
+ </span>
1047
726
  </button>
1048
727
  </div>
1049
728
  <div class="pf-v6-c-pagination__nav-control pf-m-last">
1050
729
  <button
1051
730
  class="pf-v6-c-button pf-m-plain"
1052
731
  type="button"
732
+ disabled
1053
733
  aria-label="Go to last page"
1054
734
  >
1055
- <i class="fas fa-angle-double-right" aria-hidden="true"></i>
735
+ <span class="pf-v6-c-button__icon">
736
+ <i class="fas fa-angle-double-right" aria-hidden="true"></i>
737
+ </span>
1056
738
  </button>
1057
739
  </div>
1058
740
  </nav>
@@ -1069,56 +751,23 @@ cssPrefix: pf-v6-c-pagination
1069
751
  <b>36</b>
1070
752
  </div>
1071
753
  <div class="pf-v6-c-pagination__page-menu">
1072
- <div class="pf-v6-c-options-menu">
1073
- <button
1074
- class="pf-v6-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-v6-c-options-menu__toggle-text">
1081
- <b>1 - 10</b>&nbsp;of&nbsp;
1082
- <b>36</b>
1083
- </span>
1084
- <div class="pf-v6-c-options-menu__toggle-icon">
754
+ <button
755
+ class="pf-v6-c-menu-toggle pf-m-plain pf-m-text"
756
+ type="button"
757
+ aria-expanded="false"
758
+ aria-label="Menu toggle"
759
+ id="pagination-top-with-full-modifier-menu-toggle"
760
+ >
761
+ <span class="pf-v6-c-menu-toggle__text">
762
+ <b>1 - 10</b>&nbsp;of&nbsp;
763
+ <b>36</b>
764
+ </span>
765
+ <span class="pf-v6-c-menu-toggle__controls">
766
+ <span class="pf-v6-c-menu-toggle__toggle-icon">
1085
767
  <i class="fas fa-caret-down" aria-hidden="true"></i>
1086
- </div>
1087
- </button>
1088
- <ul
1089
- class="pf-v6-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-v6-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-v6-c-options-menu__menu-item"
1104
- type="button"
1105
- role="menuitem"
1106
- >
1107
- 10 per page
1108
- <div class="pf-v6-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-v6-c-options-menu__menu-item"
1116
- type="button"
1117
- role="menuitem"
1118
- >20 per page</button>
1119
- </li>
1120
- </ul>
1121
- </div>
768
+ </span>
769
+ </span>
770
+ </button>
1122
771
  </div>
1123
772
  <nav
1124
773
  class="pf-v6-c-pagination__nav"
@@ -1131,7 +780,9 @@ cssPrefix: pf-v6-c-pagination
1131
780
  disabled
1132
781
  aria-label="Go to first page"
1133
782
  >
1134
- <i class="fas fa-angle-double-left" aria-hidden="true"></i>
783
+ <span class="pf-v6-c-button__icon">
784
+ <i class="fas fa-angle-double-left" aria-hidden="true"></i>
785
+ </span>
1135
786
  </button>
1136
787
  </div>
1137
788
  <div class="pf-v6-c-pagination__nav-control pf-m-prev">
@@ -1141,7 +792,9 @@ cssPrefix: pf-v6-c-pagination
1141
792
  disabled
1142
793
  aria-label="Go to previous page"
1143
794
  >
1144
- <i class="fas fa-angle-left" aria-hidden="true"></i>
795
+ <span class="pf-v6-c-button__icon">
796
+ <i class="fas fa-angle-left" aria-hidden="true"></i>
797
+ </span>
1145
798
  </button>
1146
799
  </div>
1147
800
  <div class="pf-v6-c-pagination__nav-page-select">
@@ -1162,16 +815,21 @@ cssPrefix: pf-v6-c-pagination
1162
815
  type="button"
1163
816
  aria-label="Go to next page"
1164
817
  >
1165
- <i class="fas fa-angle-right" aria-hidden="true"></i>
818
+ <span class="pf-v6-c-button__icon">
819
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
820
+ </span>
1166
821
  </button>
1167
822
  </div>
1168
823
  <div class="pf-v6-c-pagination__nav-control pf-m-last">
1169
824
  <button
1170
825
  class="pf-v6-c-button pf-m-plain"
1171
826
  type="button"
827
+ disabled
1172
828
  aria-label="Go to last page"
1173
829
  >
1174
- <i class="fas fa-angle-double-right" aria-hidden="true"></i>
830
+ <span class="pf-v6-c-button__icon">
831
+ <i class="fas fa-angle-double-right" aria-hidden="true"></i>
832
+ </span>
1175
833
  </button>
1176
834
  </div>
1177
835
  </nav>
@@ -1190,56 +848,23 @@ cssPrefix: pf-v6-c-pagination
1190
848
  <b>36</b>
1191
849
  </div>
1192
850
  <div class="pf-v6-c-pagination__page-menu">
1193
- <div class="pf-v6-c-options-menu">
1194
- <button
1195
- class="pf-v6-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-v6-c-options-menu__toggle-text">
1202
- <b>1 - 10</b>&nbsp;of&nbsp;
1203
- <b>36</b>
1204
- </span>
1205
- <div class="pf-v6-c-options-menu__toggle-icon">
851
+ <button
852
+ class="pf-v6-c-menu-toggle pf-m-plain pf-m-text"
853
+ type="button"
854
+ aria-expanded="false"
855
+ aria-label="Menu toggle"
856
+ id="pagination-top-with-responsive-summary-navigation-modifiers-menu-toggle"
857
+ >
858
+ <span class="pf-v6-c-menu-toggle__text">
859
+ <b>1 - 10</b>&nbsp;of&nbsp;
860
+ <b>36</b>
861
+ </span>
862
+ <span class="pf-v6-c-menu-toggle__controls">
863
+ <span class="pf-v6-c-menu-toggle__toggle-icon">
1206
864
  <i class="fas fa-caret-down" aria-hidden="true"></i>
1207
- </div>
1208
- </button>
1209
- <ul
1210
- class="pf-v6-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-v6-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-v6-c-options-menu__menu-item"
1225
- type="button"
1226
- role="menuitem"
1227
- >
1228
- 10 per page
1229
- <div class="pf-v6-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-v6-c-options-menu__menu-item"
1237
- type="button"
1238
- role="menuitem"
1239
- >20 per page</button>
1240
- </li>
1241
- </ul>
1242
- </div>
865
+ </span>
866
+ </span>
867
+ </button>
1243
868
  </div>
1244
869
  <nav
1245
870
  class="pf-v6-c-pagination__nav"
@@ -1252,7 +877,9 @@ cssPrefix: pf-v6-c-pagination
1252
877
  disabled
1253
878
  aria-label="Go to first page"
1254
879
  >
1255
- <i class="fas fa-angle-double-left" aria-hidden="true"></i>
880
+ <span class="pf-v6-c-button__icon">
881
+ <i class="fas fa-angle-double-left" aria-hidden="true"></i>
882
+ </span>
1256
883
  </button>
1257
884
  </div>
1258
885
  <div class="pf-v6-c-pagination__nav-control pf-m-prev">
@@ -1262,7 +889,9 @@ cssPrefix: pf-v6-c-pagination
1262
889
  disabled
1263
890
  aria-label="Go to previous page"
1264
891
  >
1265
- <i class="fas fa-angle-left" aria-hidden="true"></i>
892
+ <span class="pf-v6-c-button__icon">
893
+ <i class="fas fa-angle-left" aria-hidden="true"></i>
894
+ </span>
1266
895
  </button>
1267
896
  </div>
1268
897
  <div class="pf-v6-c-pagination__nav-page-select">
@@ -1283,16 +912,21 @@ cssPrefix: pf-v6-c-pagination
1283
912
  type="button"
1284
913
  aria-label="Go to next page"
1285
914
  >
1286
- <i class="fas fa-angle-right" aria-hidden="true"></i>
915
+ <span class="pf-v6-c-button__icon">
916
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
917
+ </span>
1287
918
  </button>
1288
919
  </div>
1289
920
  <div class="pf-v6-c-pagination__nav-control pf-m-last">
1290
921
  <button
1291
922
  class="pf-v6-c-button pf-m-plain"
1292
923
  type="button"
924
+ disabled
1293
925
  aria-label="Go to last page"
1294
926
  >
1295
- <i class="fas fa-angle-double-right" aria-hidden="true"></i>
927
+ <span class="pf-v6-c-button__icon">
928
+ <i class="fas fa-angle-double-right" aria-hidden="true"></i>
929
+ </span>
1296
930
  </button>
1297
931
  </div>
1298
932
  </nav>
@@ -1309,56 +943,23 @@ cssPrefix: pf-v6-c-pagination
1309
943
  <b>36</b>
1310
944
  </div>
1311
945
  <div class="pf-v6-c-pagination__page-menu">
1312
- <div class="pf-v6-c-options-menu">
1313
- <button
1314
- class="pf-v6-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-v6-c-options-menu__toggle-text">
1321
- <b>1 - 10</b>&nbsp;of&nbsp;
1322
- <b>36</b>
1323
- </span>
1324
- <div class="pf-v6-c-options-menu__toggle-icon">
946
+ <button
947
+ class="pf-v6-c-menu-toggle pf-m-plain pf-m-text"
948
+ type="button"
949
+ aria-expanded="false"
950
+ aria-label="Menu toggle"
951
+ id="pagination-compact-with-full-modifier-menu-toggle"
952
+ >
953
+ <span class="pf-v6-c-menu-toggle__text">
954
+ <b>1 - 10</b>&nbsp;of&nbsp;
955
+ <b>36</b>
956
+ </span>
957
+ <span class="pf-v6-c-menu-toggle__controls">
958
+ <span class="pf-v6-c-menu-toggle__toggle-icon">
1325
959
  <i class="fas fa-caret-down" aria-hidden="true"></i>
1326
- </div>
1327
- </button>
1328
- <ul
1329
- class="pf-v6-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-v6-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-v6-c-options-menu__menu-item"
1344
- type="button"
1345
- role="menuitem"
1346
- >
1347
- 10 per page
1348
- <div class="pf-v6-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-v6-c-options-menu__menu-item"
1356
- type="button"
1357
- role="menuitem"
1358
- >20 per page</button>
1359
- </li>
1360
- </ul>
1361
- </div>
960
+ </span>
961
+ </span>
962
+ </button>
1362
963
  </div>
1363
964
  <nav
1364
965
  class="pf-v6-c-pagination__nav"
@@ -1371,7 +972,9 @@ cssPrefix: pf-v6-c-pagination
1371
972
  disabled
1372
973
  aria-label="Go to previous page"
1373
974
  >
1374
- <i class="fas fa-angle-left" aria-hidden="true"></i>
975
+ <span class="pf-v6-c-button__icon">
976
+ <i class="fas fa-angle-left" aria-hidden="true"></i>
977
+ </span>
1375
978
  </button>
1376
979
  </div>
1377
980
  <div class="pf-v6-c-pagination__nav-control pf-m-next">
@@ -1380,7 +983,9 @@ cssPrefix: pf-v6-c-pagination
1380
983
  type="button"
1381
984
  aria-label="Go to next page"
1382
985
  >
1383
- <i class="fas fa-angle-right" aria-hidden="true"></i>
986
+ <span class="pf-v6-c-button__icon">
987
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
988
+ </span>
1384
989
  </button>
1385
990
  </div>
1386
991
  </nav>
@@ -1399,56 +1004,23 @@ cssPrefix: pf-v6-c-pagination
1399
1004
  <b>36</b>
1400
1005
  </div>
1401
1006
  <div class="pf-v6-c-pagination__page-menu">
1402
- <div class="pf-v6-c-options-menu">
1403
- <button
1404
- class="pf-v6-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-v6-c-options-menu__toggle-text">
1411
- <b>1 - 10</b>&nbsp;of&nbsp;
1412
- <b>36</b>
1413
- </span>
1414
- <div class="pf-v6-c-options-menu__toggle-icon">
1007
+ <button
1008
+ class="pf-v6-c-menu-toggle pf-m-plain pf-m-text"
1009
+ type="button"
1010
+ aria-expanded="false"
1011
+ aria-label="Menu toggle"
1012
+ id="pagination-inset-menu-toggle"
1013
+ >
1014
+ <span class="pf-v6-c-menu-toggle__text">
1015
+ <b>1 - 10</b>&nbsp;of&nbsp;
1016
+ <b>36</b>
1017
+ </span>
1018
+ <span class="pf-v6-c-menu-toggle__controls">
1019
+ <span class="pf-v6-c-menu-toggle__toggle-icon">
1415
1020
  <i class="fas fa-caret-down" aria-hidden="true"></i>
1416
- </div>
1417
- </button>
1418
- <ul
1419
- class="pf-v6-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-v6-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-v6-c-options-menu__menu-item"
1434
- type="button"
1435
- role="menuitem"
1436
- >
1437
- 10 per page
1438
- <div class="pf-v6-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-v6-c-options-menu__menu-item"
1446
- type="button"
1447
- role="menuitem"
1448
- >20 per page</button>
1449
- </li>
1450
- </ul>
1451
- </div>
1021
+ </span>
1022
+ </span>
1023
+ </button>
1452
1024
  </div>
1453
1025
  <nav
1454
1026
  class="pf-v6-c-pagination__nav"
@@ -1461,7 +1033,9 @@ cssPrefix: pf-v6-c-pagination
1461
1033
  disabled
1462
1034
  aria-label="Go to first page"
1463
1035
  >
1464
- <i class="fas fa-angle-double-left" aria-hidden="true"></i>
1036
+ <span class="pf-v6-c-button__icon">
1037
+ <i class="fas fa-angle-double-left" aria-hidden="true"></i>
1038
+ </span>
1465
1039
  </button>
1466
1040
  </div>
1467
1041
  <div class="pf-v6-c-pagination__nav-control pf-m-prev">
@@ -1471,7 +1045,9 @@ cssPrefix: pf-v6-c-pagination
1471
1045
  disabled
1472
1046
  aria-label="Go to previous page"
1473
1047
  >
1474
- <i class="fas fa-angle-left" aria-hidden="true"></i>
1048
+ <span class="pf-v6-c-button__icon">
1049
+ <i class="fas fa-angle-left" aria-hidden="true"></i>
1050
+ </span>
1475
1051
  </button>
1476
1052
  </div>
1477
1053
  <div class="pf-v6-c-pagination__nav-page-select">
@@ -1492,16 +1068,21 @@ cssPrefix: pf-v6-c-pagination
1492
1068
  type="button"
1493
1069
  aria-label="Go to next page"
1494
1070
  >
1495
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1071
+ <span class="pf-v6-c-button__icon">
1072
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
1073
+ </span>
1496
1074
  </button>
1497
1075
  </div>
1498
1076
  <div class="pf-v6-c-pagination__nav-control pf-m-last">
1499
1077
  <button
1500
1078
  class="pf-v6-c-button pf-m-plain"
1501
1079
  type="button"
1080
+ disabled
1502
1081
  aria-label="Go to last page"
1503
1082
  >
1504
- <i class="fas fa-angle-double-right" aria-hidden="true"></i>
1083
+ <span class="pf-v6-c-button__icon">
1084
+ <i class="fas fa-angle-double-right" aria-hidden="true"></i>
1085
+ </span>
1505
1086
  </button>
1506
1087
  </div>
1507
1088
  </nav>
@@ -1511,8 +1092,6 @@ cssPrefix: pf-v6-c-pagination
1511
1092
 
1512
1093
  ## Documentation
1513
1094
 
1514
- Note: `<button>` or `<a>` elements can be used in `.pf-v6-c-pagination__nav-page-select`.
1515
-
1516
1095
  ### Accessibility
1517
1096
 
1518
1097
  | Attribute | Applied to | Outcome |
@@ -1529,7 +1108,8 @@ Note: `<button>` or `<a>` elements can be used in `.pf-v6-c-pagination__nav-page
1529
1108
  | -- | -- | -- |
1530
1109
  | `.pf-v6-c-pagination` | `<div>` | Initiates pagination. |
1531
1110
  | `.pf-v6-c-pagination__current` | `<div>` | Initiates element to display currently displayed items for use in responsive view. Only needed for default pagination, not `.pf-m-bottom`. |
1532
- | `.pf-v6-c-pagination__total-items` | `<div>` | Initiates element to replace the options menu on summary. |
1111
+ | `.pf-v6-c-pagination__total-items` | `<div>` | Initiates element to replace the menu toggle on summary. |
1112
+ | `.pf-v6-c-pagination__page-menu` | `<div>` | Initiates wrapper element for the pagination menu toggle. **Required** when a menu toggle is intended or expected to be rendered. |
1533
1113
  | `.pf-v6-c-pagination__nav` | `<nav>` | Initiates pagination nav. |
1534
1114
  | `.pf-v6-c-pagination__nav-control` | `<div>` | Initiates pagination nav control. |
1535
1115
  | `.pf-v6-c-pagination__nav-page-select` | `<div>` | Initiates pagination nav page select. |