@patternfly/patternfly 5.1.0-prerelease.2 → 5.1.0-prerelease.21

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 (273) hide show
  1. package/README.md +10 -0
  2. package/assets/icons/iconUnicodes.json +1 -0
  3. package/assets/pficon/pf-v5-pficon.woff2 +0 -0
  4. package/assets/pficon/pficon.scss +6 -129
  5. package/base/_common.scss +22 -0
  6. package/base/_globals.scss +1 -1
  7. package/base/_variables.scss +7 -0
  8. package/base/patternfly-common.css +17 -2
  9. package/base/patternfly-globals.css +1 -1
  10. package/base/patternfly-icons.css +5 -1
  11. package/base/patternfly-pf-icons.css +5 -1
  12. package/base/patternfly-variables.css +5 -0
  13. package/components/AboutModalBox/about-modal-box.css +20 -13
  14. package/components/AboutModalBox/about-modal-box.scss +20 -13
  15. package/components/Accordion/accordion.css +33 -20
  16. package/components/Accordion/accordion.scss +32 -20
  17. package/components/ActionList/action-list.css +2 -2
  18. package/components/ActionList/action-list.scss +2 -2
  19. package/components/Alert/alert-group.css +7 -4
  20. package/components/Alert/alert-group.scss +7 -4
  21. package/components/Alert/alert.css +19 -13
  22. package/components/Alert/alert.scss +18 -13
  23. package/components/AppLauncher/app-launcher.css +32 -23
  24. package/components/AppLauncher/app-launcher.scss +32 -23
  25. package/components/BackToTop/back-to-top.css +2 -2
  26. package/components/BackToTop/back-to-top.scss +2 -2
  27. package/components/Backdrop/backdrop.css +2 -2
  28. package/components/Backdrop/backdrop.scss +2 -2
  29. package/components/BackgroundImage/background-image.css +6 -3
  30. package/components/BackgroundImage/background-image.scss +8 -3
  31. package/components/Badge/badge.css +2 -2
  32. package/components/Badge/badge.scss +2 -2
  33. package/components/Banner/banner.css +5 -2
  34. package/components/Banner/banner.scss +5 -2
  35. package/components/Breadcrumb/breadcrumb.css +9 -3
  36. package/components/Breadcrumb/breadcrumb.scss +8 -3
  37. package/components/Button/button.css +23 -17
  38. package/components/Button/button.scss +22 -16
  39. package/components/Button/themes/dark/button.scss +1 -1
  40. package/components/CalendarMonth/calendar-month.css +25 -15
  41. package/components/CalendarMonth/calendar-month.scss +23 -15
  42. package/components/Card/card.css +24 -16
  43. package/components/Card/card.scss +23 -16
  44. package/components/Check/check.css +2 -2
  45. package/components/Check/check.scss +2 -2
  46. package/components/Chip/chip-group.css +6 -6
  47. package/components/Chip/chip-group.scss +6 -6
  48. package/components/Chip/chip.css +16 -9
  49. package/components/Chip/chip.scss +17 -9
  50. package/components/ClipboardCopy/clipboard-copy.css +19 -10
  51. package/components/ClipboardCopy/clipboard-copy.scss +16 -8
  52. package/components/ClipboardCopy/themes/dark/clipboard-copy.scss +2 -2
  53. package/components/CodeBlock/code-block.css +6 -3
  54. package/components/CodeBlock/code-block.scss +6 -3
  55. package/components/CodeEditor/code-editor.css +31 -22
  56. package/components/CodeEditor/code-editor.scss +30 -21
  57. package/components/CodeEditor/themes/dark/code-editor.scss +1 -1
  58. package/components/Content/content.css +33 -30
  59. package/components/Content/content.scss +33 -30
  60. package/components/ContextSelector/context-selector.css +41 -26
  61. package/components/ContextSelector/context-selector.scss +40 -25
  62. package/components/ContextSelector/themes/dark/context-selector.scss +1 -1
  63. package/components/DataList/data-list-grid.css +21 -49
  64. package/components/DataList/data-list-grid.scss +3 -3
  65. package/components/DataList/data-list.css +69 -84
  66. package/components/DataList/data-list.scss +47 -35
  67. package/components/DatePicker/date-picker.css +8 -8
  68. package/components/DatePicker/date-picker.scss +8 -8
  69. package/components/DescriptionList/description-list.css +8 -5
  70. package/components/DescriptionList/description-list.scss +8 -5
  71. package/components/DragDrop/drag-drop.css +8 -8
  72. package/components/DragDrop/drag-drop.scss +8 -8
  73. package/components/Drawer/drawer.css +120 -61
  74. package/components/Drawer/drawer.scss +92 -43
  75. package/components/Dropdown/dropdown.css +75 -66
  76. package/components/Dropdown/dropdown.scss +65 -56
  77. package/components/DualListSelector/dual-list-selector.css +29 -15
  78. package/components/DualListSelector/dual-list-selector.scss +30 -15
  79. package/components/EmptyState/empty-state.css +7 -4
  80. package/components/EmptyState/empty-state.scss +7 -4
  81. package/components/ExpandableSection/expandable-section.css +17 -10
  82. package/components/ExpandableSection/expandable-section.scss +15 -10
  83. package/components/FileUpload/file-upload.css +9 -15
  84. package/components/FileUpload/file-upload.scss +9 -15
  85. package/components/Form/form.css +53 -50
  86. package/components/Form/form.scss +46 -44
  87. package/components/FormControl/form-control.css +21 -11
  88. package/components/FormControl/form-control.scss +21 -11
  89. package/components/HelperText/helper-text.css +1 -1
  90. package/components/HelperText/helper-text.scss +1 -1
  91. package/components/Hint/hint.css +9 -6
  92. package/components/Hint/hint.scss +9 -6
  93. package/components/Icon/icon.css +1 -1
  94. package/components/Icon/icon.scss +1 -1
  95. package/components/InlineEdit/inline-edit.css +4 -4
  96. package/components/InlineEdit/inline-edit.scss +4 -4
  97. package/components/InputGroup/input-group.css +12 -6
  98. package/components/InputGroup/input-group.scss +11 -5
  99. package/components/InputGroup/themes/dark/input-group.scss +1 -1
  100. package/components/JumpLinks/jump-links.css +27 -24
  101. package/components/JumpLinks/jump-links.scss +26 -24
  102. package/components/Label/label-group.css +13 -10
  103. package/components/Label/label-group.scss +13 -10
  104. package/components/Label/label.css +9 -9
  105. package/components/Label/label.scss +9 -9
  106. package/components/List/list.css +9 -9
  107. package/components/List/list.scss +9 -9
  108. package/components/LogViewer/log-viewer.css +14 -14
  109. package/components/LogViewer/log-viewer.scss +14 -14
  110. package/components/Login/login.css +36 -27
  111. package/components/Login/login.scss +36 -27
  112. package/components/Masthead/masthead.css +19 -22
  113. package/components/Masthead/masthead.scss +19 -22
  114. package/components/Menu/menu.css +80 -66
  115. package/components/Menu/menu.scss +81 -69
  116. package/components/MenuToggle/menu-toggle.css +41 -29
  117. package/components/MenuToggle/menu-toggle.scss +41 -29
  118. package/components/ModalBox/modal-box.css +19 -19
  119. package/components/ModalBox/modal-box.scss +20 -20
  120. package/components/MultipleFileUpload/multiple-file-upload.css +11 -8
  121. package/components/MultipleFileUpload/multiple-file-upload.scss +11 -8
  122. package/components/Nav/nav.css +120 -93
  123. package/components/Nav/nav.scss +120 -93
  124. package/components/Nav/themes/dark/nav.scss +2 -2
  125. package/components/NotificationBadge/notification-badge.css +13 -7
  126. package/components/NotificationBadge/notification-badge.scss +13 -7
  127. package/components/NotificationDrawer/notification-drawer.css +32 -19
  128. package/components/NotificationDrawer/notification-drawer.scss +30 -19
  129. package/components/NumberInput/number-input.css +3 -3
  130. package/components/NumberInput/number-input.scss +2 -2
  131. package/components/OptionsMenu/options-menu.css +43 -31
  132. package/components/OptionsMenu/options-menu.scss +43 -31
  133. package/components/OverflowMenu/overflow-menu.css +2 -2
  134. package/components/OverflowMenu/overflow-menu.scss +2 -2
  135. package/components/Page/page.css +123 -65
  136. package/components/Page/page.scss +69 -40
  137. package/components/Page/themes/dark/page.scss +1 -1
  138. package/components/Pagination/pagination.css +28 -18
  139. package/components/Pagination/pagination.scss +25 -17
  140. package/components/Panel/panel.css +13 -7
  141. package/components/Panel/panel.scss +13 -7
  142. package/components/Popover/popover.css +82 -31
  143. package/components/Popover/popover.scss +104 -45
  144. package/components/Progress/progress.css +7 -7
  145. package/components/Progress/progress.scss +7 -7
  146. package/components/ProgressStepper/progress-stepper.css +26 -20
  147. package/components/ProgressStepper/progress-stepper.scss +25 -19
  148. package/components/Radio/radio.css +4 -5
  149. package/components/Radio/radio.scss +4 -5
  150. package/components/Select/select.css +56 -47
  151. package/components/Select/select.scss +56 -47
  152. package/components/Sidebar/sidebar.css +11 -5
  153. package/components/Sidebar/sidebar.scss +11 -5
  154. package/components/SimpleList/simple-list.css +10 -4
  155. package/components/SimpleList/simple-list.scss +10 -4
  156. package/components/Skeleton/skeleton.css +6 -5
  157. package/components/Skeleton/skeleton.scss +4 -5
  158. package/components/SkipToContent/skip-to-content.css +3 -3
  159. package/components/SkipToContent/skip-to-content.scss +3 -3
  160. package/components/Slider/slider.css +47 -26
  161. package/components/Slider/slider.scss +56 -28
  162. package/components/Switch/switch.css +9 -5
  163. package/components/Switch/switch.scss +10 -6
  164. package/components/TabContent/tab-content.css +4 -1
  165. package/components/TabContent/tab-content.scss +4 -1
  166. package/components/Table/table-grid.css +256 -219
  167. package/components/Table/table-grid.scss +53 -39
  168. package/components/Table/table-scrollable.css +4 -4
  169. package/components/Table/table-scrollable.scss +6 -4
  170. package/components/Table/table-tree-view.css +112 -105
  171. package/components/Table/table-tree-view.scss +38 -33
  172. package/components/Table/table.css +91 -69
  173. package/components/Table/table.scss +89 -69
  174. package/components/Tabs/tabs.css +76 -48
  175. package/components/Tabs/tabs.scss +74 -48
  176. package/components/TextInputGroup/text-input-group.css +15 -15
  177. package/components/TextInputGroup/text-input-group.scss +15 -15
  178. package/components/Tile/tile.css +10 -10
  179. package/components/Tile/tile.scss +10 -10
  180. package/components/ToggleGroup/toggle-group.css +14 -11
  181. package/components/ToggleGroup/toggle-group.scss +14 -11
  182. package/components/Toolbar/toolbar.css +44 -41
  183. package/components/Toolbar/toolbar.scss +24 -21
  184. package/components/Tooltip/tooltip.css +76 -25
  185. package/components/Tooltip/tooltip.scss +100 -41
  186. package/components/TreeView/tree-view.css +48 -27
  187. package/components/TreeView/tree-view.scss +51 -29
  188. package/components/Truncate/truncate.css +9 -0
  189. package/components/Truncate/truncate.scss +16 -3
  190. package/components/Wizard/wizard.css +57 -36
  191. package/components/Wizard/wizard.scss +57 -36
  192. package/docs/components/AppLauncher/deprecated/application-launcher.md +155 -70
  193. package/docs/components/Badge/examples/Badge.md +16 -4
  194. package/docs/components/Breadcrumb/examples/Breadcrumb.md +11 -5
  195. package/docs/components/Button/examples/Button.css +2 -2
  196. package/docs/components/Button/examples/Button.md +1 -0
  197. package/docs/components/Card/examples/Card.md +152 -64
  198. package/docs/components/Chip/examples/Chip.md +1 -1
  199. package/docs/components/ContextSelector/deprecated/context-selector.md +198 -96
  200. package/docs/components/DataList/examples/DataList.md +391 -136
  201. package/docs/components/DragDrop/examples/DragDrop.css +2 -2
  202. package/docs/components/Dropdown/deprecated/Dropdown.css +1 -1
  203. package/docs/components/Dropdown/deprecated/Dropdown.md +881 -367
  204. package/docs/components/DualListSelector/examples/DualListSelector.md +368 -128
  205. package/docs/components/FormControl/examples/FormControl.md +2 -1
  206. package/docs/components/Hint/examples/Hint.md +57 -24
  207. package/docs/components/InlineEdit/examples/InlineEdit.md +46 -16
  208. package/docs/components/Label/examples/Label.md +1 -1
  209. package/docs/components/LogViewer/examples/LogViewer.css +2 -2
  210. package/docs/components/LogViewer/examples/LogViewer.md +40 -30
  211. package/docs/components/Menu/examples/Menu.md +41 -20
  212. package/docs/components/MenuToggle/examples/MenuToggle.md +1 -1
  213. package/docs/components/ModalBox/examples/ModalBox.css +3 -8
  214. package/docs/components/Nav/examples/Navigation.css +3 -26
  215. package/docs/components/Nav/examples/Navigation.md +99 -0
  216. package/docs/components/NotificationDrawer/examples/NotificationDrawer.md +619 -240
  217. package/docs/components/OptionsMenu/deprecated/options-menu.md +403 -160
  218. package/docs/components/OverflowMenu/examples/overflow-menu.md +45 -34
  219. package/docs/components/Pagination/examples/Pagination.md +195 -65
  220. package/docs/components/Popover/examples/Popover.css +3 -9
  221. package/docs/components/Popover/examples/Popover.md +4 -4
  222. package/docs/components/ProgressStepper/examples/ProgressStepper.md +50 -0
  223. package/docs/components/Select/deprecated/Select.css +3 -3
  224. package/docs/components/Select/deprecated/Select.md +40 -52
  225. package/docs/components/Table/examples/Table.css +2 -2
  226. package/docs/components/Table/examples/Table.md +4548 -1670
  227. package/docs/components/Tabs/examples/Tabs.md +1094 -438
  228. package/docs/components/TextInputGroup/examples/TextInputGroup.css +1 -1
  229. package/docs/components/Tile/examples/Tile.css +1 -1
  230. package/docs/components/Toolbar/examples/Toolbar.md +218 -128
  231. package/docs/components/Tooltip/examples/Tooltip.css +4 -0
  232. package/docs/components/Tooltip/examples/Tooltip.md +8 -6
  233. package/docs/components/TreeView/examples/TreeView.md +23 -8
  234. package/docs/components/Truncate/examples/Truncate.md +2 -2
  235. package/docs/components/Wizard/examples/Wizard.md +75 -36
  236. package/docs/demos/Card/examples/Card.css +3 -3
  237. package/docs/demos/Card/examples/Card.md +72 -31
  238. package/docs/demos/CardView/examples/CardView.md +182 -74
  239. package/docs/demos/ContextSelector/examples/ContextSelector.md +95 -47
  240. package/docs/demos/Dashboard/examples/Dashboard.md +18 -9
  241. package/docs/demos/DataList/examples/DataList.md +163 -70
  242. package/docs/demos/DescriptionList/examples/DescriptionList.md +20 -9
  243. package/docs/demos/Drawer/examples/Drawer.md +20 -9
  244. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +803 -338
  245. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +241 -101
  246. package/docs/demos/Skeleton/examples/Skeleton.md +7 -35
  247. package/docs/demos/Table/examples/Table.md +1422 -607
  248. package/docs/demos/Tabs/examples/Tabs.md +113 -48
  249. package/docs/demos/Toolbar/examples/Toolbar.md +318 -123
  250. package/docs/demos/Wizard/examples/Wizard.md +191 -41
  251. package/docs/layouts/Flex/examples/Flex.md +5 -5
  252. package/docs/utilities/BoxShadow/examples/box-shadow.css +5 -5
  253. package/icons/pficons.mjs +1 -0
  254. package/layouts/Flex/flex.css +115 -43
  255. package/layouts/Flex/flex.scss +20 -8
  256. package/package.json +40 -37
  257. package/patternfly-addons.css +732 -972
  258. package/patternfly-base-no-globals-theme-dark-unversioned.css +27 -3
  259. package/patternfly-base-no-globals.css +27 -3
  260. package/patternfly-base-theme-dark-unversioned.css +28 -4
  261. package/patternfly-base.css +28 -4
  262. package/patternfly-no-globals.css +2687 -1894
  263. package/patternfly-theme-dark-unversioned.css +2688 -1895
  264. package/patternfly.css +2688 -1895
  265. package/patternfly.min.css +1 -1
  266. package/patternfly.min.css.map +1 -1
  267. package/sass-utilities/functions.scss +6 -0
  268. package/sass-utilities/mixins.scss +62 -2
  269. package/sass-utilities/placeholders.scss +1 -1
  270. package/sass-utilities/scss-variables.scss +8 -8
  271. package/utilities/Accessibility/accessibility.css +12 -12
  272. package/utilities/Spacing/spacing.css +720 -960
  273. package/utilities/Spacing/spacing.scss +4 -8
package/docs/components/Toolbar/examples/Toolbar.md CHANGED
@@ -563,7 +563,7 @@ In some instances, it may be necessary to adjust spacing explicitly where items
563
563
  <span
564
564
  id="toolbar-toggle-group-example-select-checkbox-status-label"
565
565
  hidden
566
- >Choose one</span>
566
+ >Choose many</span>
567
567
 
568
568
  <button
569
569
  class="pf-v5-c-select__toggle"
@@ -666,7 +666,7 @@ In some instances, it may be necessary to adjust spacing explicitly where items
666
666
  <span
667
667
  id="toolbar-toggle-group-example-select-checkbox-risk-label"
668
668
  hidden
669
- >Choose one</span>
669
+ >Choose many</span>
670
670
 
671
671
  <button
672
672
  class="pf-v5-c-select__toggle"
@@ -901,7 +901,7 @@ In some instances, it may be necessary to adjust spacing explicitly where items
901
901
  <span
902
902
  id="toolbar-toggle-group-collapsed-example-select-checkbox-status-expanded-label"
903
903
  hidden
904
- >Choose one</span>
904
+ >Choose many</span>
905
905
 
906
906
  <button
907
907
  class="pf-v5-c-select__toggle"
@@ -1002,7 +1002,7 @@ In some instances, it may be necessary to adjust spacing explicitly where items
1002
1002
  <span
1003
1003
  id="toolbar-toggle-group-collapsed-example-select-checkbox-risk-expanded-label"
1004
1004
  hidden
1005
- >Choose one</span>
1005
+ >Choose many</span>
1006
1006
 
1007
1007
  <button
1008
1008
  class="pf-v5-c-select__toggle"
@@ -1171,22 +1171,25 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
1171
1171
  <i class="fas fa-caret-down" aria-hidden="true"></i>
1172
1172
  </button>
1173
1173
  </div>
1174
- <ul class="pf-v5-c-dropdown__menu" hidden>
1175
- <li>
1174
+ <ul class="pf-v5-c-dropdown__menu" hidden role="menu">
1175
+ <li role="none">
1176
1176
  <button
1177
1177
  class="pf-v5-c-dropdown__menu-item"
1178
+ role="menuitem"
1178
1179
  type="button"
1179
1180
  >Select all</button>
1180
1181
  </li>
1181
- <li>
1182
+ <li role="none">
1182
1183
  <button
1183
1184
  class="pf-v5-c-dropdown__menu-item"
1185
+ role="menuitem"
1184
1186
  type="button"
1185
1187
  >Select none</button>
1186
1188
  </li>
1187
- <li>
1189
+ <li role="none">
1188
1190
  <button
1189
1191
  class="pf-v5-c-dropdown__menu-item"
1192
+ role="menuitem"
1190
1193
  type="button"
1191
1194
  >Other action</button>
1192
1195
  </li>
@@ -1305,7 +1308,7 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
1305
1308
  <span
1306
1309
  id="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-status-expanded-label"
1307
1310
  hidden
1308
- >Choose one</span>
1311
+ >Choose many</span>
1309
1312
 
1310
1313
  <button
1311
1314
  class="pf-v5-c-select__toggle"
@@ -1408,7 +1411,7 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
1408
1411
  <span
1409
1412
  id="toolbar-selected-filters-toggle-group-collapsed-example-select-checkbox-risk-expanded-label"
1410
1413
  hidden
1411
- >Choose one</span>
1414
+ >Choose many</span>
1412
1415
 
1413
1416
  <button
1414
1417
  class="pf-v5-c-select__toggle"
@@ -1526,17 +1529,27 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
1526
1529
  </button>
1527
1530
  <ul
1528
1531
  class="pf-v5-c-dropdown__menu"
1532
+ role="menu"
1529
1533
  aria-labelledby="toolbar-selected-filters-toggle-group-collapsed-example-icon-button-overflow-menu-dropdown-toggle"
1530
1534
  hidden
1531
1535
  >
1532
- <li>
1533
- <button class="pf-v5-c-dropdown__menu-item">Edit</button>
1536
+ <li role="none">
1537
+ <button
1538
+ role="menuitem"
1539
+ class="pf-v5-c-dropdown__menu-item"
1540
+ >Edit</button>
1534
1541
  </li>
1535
- <li>
1536
- <button class="pf-v5-c-dropdown__menu-item">Clone</button>
1542
+ <li role="none">
1543
+ <button
1544
+ role="menuitem"
1545
+ class="pf-v5-c-dropdown__menu-item"
1546
+ >Clone</button>
1537
1547
  </li>
1538
- <li>
1539
- <button class="pf-v5-c-dropdown__menu-item">Sync</button>
1548
+ <li role="none">
1549
+ <button
1550
+ role="menuitem"
1551
+ class="pf-v5-c-dropdown__menu-item"
1552
+ >Sync</button>
1540
1553
  </li>
1541
1554
  </ul>
1542
1555
  </div>
@@ -1760,22 +1773,25 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
1760
1773
  <i class="fas fa-caret-down" aria-hidden="true"></i>
1761
1774
  </button>
1762
1775
  </div>
1763
- <ul class="pf-v5-c-dropdown__menu" hidden>
1764
- <li>
1776
+ <ul class="pf-v5-c-dropdown__menu" hidden role="menu">
1777
+ <li role="none">
1765
1778
  <button
1766
1779
  class="pf-v5-c-dropdown__menu-item"
1780
+ role="menuitem"
1767
1781
  type="button"
1768
1782
  >Select all</button>
1769
1783
  </li>
1770
- <li>
1784
+ <li role="none">
1771
1785
  <button
1772
1786
  class="pf-v5-c-dropdown__menu-item"
1787
+ role="menuitem"
1773
1788
  type="button"
1774
1789
  >Select none</button>
1775
1790
  </li>
1776
- <li>
1791
+ <li role="none">
1777
1792
  <button
1778
1793
  class="pf-v5-c-dropdown__menu-item"
1794
+ role="menuitem"
1779
1795
  type="button"
1780
1796
  >Other action</button>
1781
1797
  </li>
@@ -1813,17 +1829,27 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
1813
1829
  </button>
1814
1830
  <ul
1815
1831
  class="pf-v5-c-dropdown__menu"
1832
+ role="menu"
1816
1833
  aria-labelledby="toolbar-selected-filters-toggle-group-expanded-example-icon-button-overflow-menu-dropdown-toggle"
1817
1834
  hidden
1818
1835
  >
1819
- <li>
1820
- <button class="pf-v5-c-dropdown__menu-item">Edit</button>
1836
+ <li role="none">
1837
+ <button
1838
+ role="menuitem"
1839
+ class="pf-v5-c-dropdown__menu-item"
1840
+ >Edit</button>
1821
1841
  </li>
1822
- <li>
1823
- <button class="pf-v5-c-dropdown__menu-item">Clone</button>
1842
+ <li role="none">
1843
+ <button
1844
+ role="menuitem"
1845
+ class="pf-v5-c-dropdown__menu-item"
1846
+ >Clone</button>
1824
1847
  </li>
1825
- <li>
1826
- <button class="pf-v5-c-dropdown__menu-item">Sync</button>
1848
+ <li role="none">
1849
+ <button
1850
+ role="menuitem"
1851
+ class="pf-v5-c-dropdown__menu-item"
1852
+ >Sync</button>
1827
1853
  </li>
1828
1854
  </ul>
1829
1855
  </div>
@@ -1935,7 +1961,7 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
1935
1961
  <span
1936
1962
  id="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-status-expanded-label"
1937
1963
  hidden
1938
- >Choose one</span>
1964
+ >Choose many</span>
1939
1965
 
1940
1966
  <button
1941
1967
  class="pf-v5-c-select__toggle"
@@ -2036,7 +2062,7 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
2036
2062
  <span
2037
2063
  id="toolbar-selected-filters-toggle-group-expanded-example-select-checkbox-risk-expanded-label"
2038
2064
  hidden
2039
- >Choose one</span>
2065
+ >Choose many</span>
2040
2066
 
2041
2067
  <button
2042
2068
  class="pf-v5-c-select__toggle"
@@ -2340,22 +2366,25 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
2340
2366
  <i class="fas fa-caret-down" aria-hidden="true"></i>
2341
2367
  </button>
2342
2368
  </div>
2343
- <ul class="pf-v5-c-dropdown__menu" hidden>
2344
- <li>
2369
+ <ul class="pf-v5-c-dropdown__menu" hidden role="menu">
2370
+ <li role="none">
2345
2371
  <button
2346
2372
  class="pf-v5-c-dropdown__menu-item"
2373
+ role="menuitem"
2347
2374
  type="button"
2348
2375
  >Select all</button>
2349
2376
  </li>
2350
- <li>
2377
+ <li role="none">
2351
2378
  <button
2352
2379
  class="pf-v5-c-dropdown__menu-item"
2380
+ role="menuitem"
2353
2381
  type="button"
2354
2382
  >Select none</button>
2355
2383
  </li>
2356
- <li>
2384
+ <li role="none">
2357
2385
  <button
2358
2386
  class="pf-v5-c-dropdown__menu-item"
2387
+ role="menuitem"
2359
2388
  type="button"
2360
2389
  >Other action</button>
2361
2390
  </li>
@@ -2380,7 +2409,7 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
2380
2409
  <span
2381
2410
  id="toolbar-selected-filters-example-select-checkbox-status-label"
2382
2411
  hidden
2383
- >Choose one</span>
2412
+ >Choose many</span>
2384
2413
 
2385
2414
  <button
2386
2415
  class="pf-v5-c-select__toggle"
@@ -2483,7 +2512,7 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
2483
2512
  <span
2484
2513
  id="toolbar-selected-filters-example-select-checkbox-risk-label"
2485
2514
  hidden
2486
- >Choose one</span>
2515
+ >Choose many</span>
2487
2516
 
2488
2517
  <button
2489
2518
  class="pf-v5-c-select__toggle"
@@ -2656,11 +2685,15 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
2656
2685
  </button>
2657
2686
  <ul
2658
2687
  class="pf-v5-c-dropdown__menu"
2688
+ role="menu"
2659
2689
  aria-labelledby="toolbar-selected-filters-example-overflow-menu-dropdown-toggle"
2660
2690
  hidden
2661
2691
  >
2662
- <li>
2663
- <button class="pf-v5-c-dropdown__menu-item">Tertiary</button>
2692
+ <li role="none">
2693
+ <button
2694
+ role="menuitem"
2695
+ class="pf-v5-c-dropdown__menu-item"
2696
+ >Tertiary</button>
2664
2697
  </li>
2665
2698
  </ul>
2666
2699
  </div>
@@ -3250,11 +3283,15 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
3250
3283
  </button>
3251
3284
  <ul
3252
3285
  class="pf-v5-c-dropdown__menu"
3286
+ role="menu"
3253
3287
  aria-labelledby="toolbar-stacked-example-overflow-menu-dropdown-toggle"
3254
3288
  hidden
3255
3289
  >
3256
- <li>
3257
- <button class="pf-v5-c-dropdown__menu-item">Tertiary</button>
3290
+ <li role="none">
3291
+ <button
3292
+ role="menuitem"
3293
+ class="pf-v5-c-dropdown__menu-item"
3294
+ >Tertiary</button>
3258
3295
  </li>
3259
3296
  </ul>
3260
3297
  </div>
@@ -3299,22 +3336,25 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
3299
3336
  <i class="fas fa-caret-down" aria-hidden="true"></i>
3300
3337
  </button>
3301
3338
  </div>
3302
- <ul class="pf-v5-c-dropdown__menu" hidden>
3303
- <li>
3339
+ <ul class="pf-v5-c-dropdown__menu" hidden role="menu">
3340
+ <li role="none">
3304
3341
  <button
3305
3342
  class="pf-v5-c-dropdown__menu-item"
3343
+ role="menuitem"
3306
3344
  type="button"
3307
3345
  >Select all</button>
3308
3346
  </li>
3309
- <li>
3347
+ <li role="none">
3310
3348
  <button
3311
3349
  class="pf-v5-c-dropdown__menu-item"
3350
+ role="menuitem"
3312
3351
  type="button"
3313
3352
  >Select none</button>
3314
3353
  </li>
3315
- <li>
3354
+ <li role="none">
3316
3355
  <button
3317
3356
  class="pf-v5-c-dropdown__menu-item"
3357
+ role="menuitem"
3318
3358
  type="button"
3319
3359
  >Other action</button>
3320
3360
  </li>
@@ -3342,49 +3382,60 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
3342
3382
  </button>
3343
3383
  <ul
3344
3384
  class="pf-v5-c-options-menu__menu"
3385
+ role="menu"
3345
3386
  aria-labelledby="toolbar-stacked-example-pagination-options-menu-toggle"
3346
3387
  hidden
3347
3388
  >
3348
- <li>
3389
+ <li role="none">
3349
3390
  <button
3350
3391
  class="pf-v5-c-options-menu__menu-item"
3351
3392
  type="button"
3393
+ role="menuitem"
3352
3394
  >5 per page</button>
3353
3395
  </li>
3354
- <li>
3355
- <button class="pf-v5-c-options-menu__menu-item" type="button">
3396
+ <li role="none">
3397
+ <button
3398
+ class="pf-v5-c-options-menu__menu-item"
3399
+ type="button"
3400
+ role="menuitem"
3401
+ >
3356
3402
  10 per page
3357
3403
  <div class="pf-v5-c-options-menu__menu-item-icon">
3358
3404
  <i class="fas fa-check" aria-hidden="true"></i>
3359
3405
  </div>
3360
3406
  </button>
3361
3407
  </li>
3362
- <li>
3408
+ <li role="none">
3363
3409
  <button
3364
3410
  class="pf-v5-c-options-menu__menu-item"
3365
3411
  type="button"
3412
+ role="menuitem"
3366
3413
  >20 per page</button>
3367
3414
  </li>
3368
3415
  </ul>
3369
3416
  </div>
3370
3417
 
3371
3418
  <nav class="pf-v5-c-pagination__nav" aria-label="Pagination">
3372
- <button
3373
- class="pf-v5-c-button pf-m-plain pf-m-disabled"
3374
- type="button"
3375
- aria-label="Go to first page"
3376
- aria-disabled="true"
3377
- >
3378
- <i class="fas fa-angle-double-left" aria-hidden="true"></i>
3379
- </button>
3380
- <button
3381
- class="pf-v5-c-button pf-m-plain pf-m-disabled"
3382
- type="button"
3383
- aria-label="Go to previous page"
3384
- aria-disabled="true"
3385
- >
3386
- <i class="fas fa-angle-left" aria-hidden="true"></i>
3387
- </button>
3419
+ <div class="pf-v5-c-pagination__nav-control pf-m-first">
3420
+ <button
3421
+ class="pf-v5-c-button pf-m-plain pf-m-disabled"
3422
+ type="button"
3423
+ aria-label="Go to first page"
3424
+ aria-disabled="true"
3425
+ >
3426
+ <i class="fas fa-angle-double-left" aria-hidden="true"></i>
3427
+ </button>
3428
+ </div>
3429
+ <div class="pf-v5-c-pagination__nav-control pf-m-prev">
3430
+ <button
3431
+ class="pf-v5-c-button pf-m-plain pf-m-disabled"
3432
+ type="button"
3433
+ aria-label="Go to previous page"
3434
+ aria-disabled="true"
3435
+ >
3436
+ <i class="fas fa-angle-left" aria-hidden="true"></i>
3437
+ </button>
3438
+ </div>
3388
3439
 
3389
3440
  <div
3390
3441
  class="pf-v5-c-pagination__nav-page-select"
@@ -3401,20 +3452,24 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
3401
3452
  </span>
3402
3453
  <span aria-hidden="true">of 4</span>
3403
3454
  </div>
3404
- <button
3405
- class="pf-v5-c-button pf-m-plain"
3406
- type="button"
3407
- aria-label="Go to next page"
3408
- >
3409
- <i class="fas fa-angle-right" aria-hidden="true"></i>
3410
- </button>
3411
- <button
3412
- class="pf-v5-c-button pf-m-plain"
3413
- type="button"
3414
- aria-label="Go to last page"
3415
- >
3416
- <i class="fas fa-angle-double-right" aria-hidden="true"></i>
3417
- </button>
3455
+ <div class="pf-v5-c-pagination__nav-control pf-m-next">
3456
+ <button
3457
+ class="pf-v5-c-button pf-m-plain"
3458
+ type="button"
3459
+ aria-label="Go to next page"
3460
+ >
3461
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
3462
+ </button>
3463
+ </div>
3464
+ <div class="pf-v5-c-pagination__nav-control pf-m-last">
3465
+ <button
3466
+ class="pf-v5-c-button pf-m-plain"
3467
+ type="button"
3468
+ aria-label="Go to last page"
3469
+ >
3470
+ <i class="fas fa-angle-double-right" aria-hidden="true"></i>
3471
+ </button>
3472
+ </div>
3418
3473
  </nav>
3419
3474
  </div>
3420
3475
  </div>
@@ -3461,17 +3516,27 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
3461
3516
  </button>
3462
3517
  <ul
3463
3518
  class="pf-v5-c-dropdown__menu"
3519
+ role="menu"
3464
3520
  aria-labelledby="toolbar-stacked-collapsed-example-icon-button-overflow-menu-dropdown-toggle"
3465
3521
  hidden
3466
3522
  >
3467
- <li>
3468
- <button class="pf-v5-c-dropdown__menu-item">Edit</button>
3523
+ <li role="none">
3524
+ <button
3525
+ role="menuitem"
3526
+ class="pf-v5-c-dropdown__menu-item"
3527
+ >Edit</button>
3469
3528
  </li>
3470
- <li>
3471
- <button class="pf-v5-c-dropdown__menu-item">Clone</button>
3529
+ <li role="none">
3530
+ <button
3531
+ role="menuitem"
3532
+ class="pf-v5-c-dropdown__menu-item"
3533
+ >Clone</button>
3472
3534
  </li>
3473
- <li>
3474
- <button class="pf-v5-c-dropdown__menu-item">Sync</button>
3535
+ <li role="none">
3536
+ <button
3537
+ role="menuitem"
3538
+ class="pf-v5-c-dropdown__menu-item"
3539
+ >Sync</button>
3475
3540
  </li>
3476
3541
  </ul>
3477
3542
  </div>
@@ -3822,22 +3887,25 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
3822
3887
  <i class="fas fa-caret-down" aria-hidden="true"></i>
3823
3888
  </button>
3824
3889
  </div>
3825
- <ul class="pf-v5-c-dropdown__menu" hidden>
3826
- <li>
3890
+ <ul class="pf-v5-c-dropdown__menu" hidden role="menu">
3891
+ <li role="none">
3827
3892
  <button
3828
3893
  class="pf-v5-c-dropdown__menu-item"
3894
+ role="menuitem"
3829
3895
  type="button"
3830
3896
  >Select all</button>
3831
3897
  </li>
3832
- <li>
3898
+ <li role="none">
3833
3899
  <button
3834
3900
  class="pf-v5-c-dropdown__menu-item"
3901
+ role="menuitem"
3835
3902
  type="button"
3836
3903
  >Select none</button>
3837
3904
  </li>
3838
- <li>
3905
+ <li role="none">
3839
3906
  <button
3840
3907
  class="pf-v5-c-dropdown__menu-item"
3908
+ role="menuitem"
3841
3909
  type="button"
3842
3910
  >Other action</button>
3843
3911
  </li>
@@ -3865,49 +3933,60 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
3865
3933
  </button>
3866
3934
  <ul
3867
3935
  class="pf-v5-c-options-menu__menu"
3936
+ role="menu"
3868
3937
  aria-labelledby="toolbar-stacked-collapsed-example-pagination-options-menu-toggle"
3869
3938
  hidden
3870
3939
  >
3871
- <li>
3940
+ <li role="none">
3872
3941
  <button
3873
3942
  class="pf-v5-c-options-menu__menu-item"
3874
3943
  type="button"
3944
+ role="menuitem"
3875
3945
  >5 per page</button>
3876
3946
  </li>
3877
- <li>
3878
- <button class="pf-v5-c-options-menu__menu-item" type="button">
3947
+ <li role="none">
3948
+ <button
3949
+ class="pf-v5-c-options-menu__menu-item"
3950
+ type="button"
3951
+ role="menuitem"
3952
+ >
3879
3953
  10 per page
3880
3954
  <div class="pf-v5-c-options-menu__menu-item-icon">
3881
3955
  <i class="fas fa-check" aria-hidden="true"></i>
3882
3956
  </div>
3883
3957
  </button>
3884
3958
  </li>
3885
- <li>
3959
+ <li role="none">
3886
3960
  <button
3887
3961
  class="pf-v5-c-options-menu__menu-item"
3888
3962
  type="button"
3963
+ role="menuitem"
3889
3964
  >20 per page</button>
3890
3965
  </li>
3891
3966
  </ul>
3892
3967
  </div>
3893
3968
 
3894
3969
  <nav class="pf-v5-c-pagination__nav" aria-label="Pagination">
3895
- <button
3896
- class="pf-v5-c-button pf-m-plain pf-m-disabled"
3897
- type="button"
3898
- aria-label="Go to first page"
3899
- aria-disabled="true"
3900
- >
3901
- <i class="fas fa-angle-double-left" aria-hidden="true"></i>
3902
- </button>
3903
- <button
3904
- class="pf-v5-c-button pf-m-plain pf-m-disabled"
3905
- type="button"
3906
- aria-label="Go to previous page"
3907
- aria-disabled="true"
3908
- >
3909
- <i class="fas fa-angle-left" aria-hidden="true"></i>
3910
- </button>
3970
+ <div class="pf-v5-c-pagination__nav-control pf-m-first">
3971
+ <button
3972
+ class="pf-v5-c-button pf-m-plain pf-m-disabled"
3973
+ type="button"
3974
+ aria-label="Go to first page"
3975
+ aria-disabled="true"
3976
+ >
3977
+ <i class="fas fa-angle-double-left" aria-hidden="true"></i>
3978
+ </button>
3979
+ </div>
3980
+ <div class="pf-v5-c-pagination__nav-control pf-m-prev">
3981
+ <button
3982
+ class="pf-v5-c-button pf-m-plain pf-m-disabled"
3983
+ type="button"
3984
+ aria-label="Go to previous page"
3985
+ aria-disabled="true"
3986
+ >
3987
+ <i class="fas fa-angle-left" aria-hidden="true"></i>
3988
+ </button>
3989
+ </div>
3911
3990
 
3912
3991
  <div
3913
3992
  class="pf-v5-c-pagination__nav-page-select"
@@ -3924,20 +4003,24 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
3924
4003
  </span>
3925
4004
  <span aria-hidden="true">of 4</span>
3926
4005
  </div>
3927
- <button
3928
- class="pf-v5-c-button pf-m-plain"
3929
- type="button"
3930
- aria-label="Go to next page"
3931
- >
3932
- <i class="fas fa-angle-right" aria-hidden="true"></i>
3933
- </button>
3934
- <button
3935
- class="pf-v5-c-button pf-m-plain"
3936
- type="button"
3937
- aria-label="Go to last page"
3938
- >
3939
- <i class="fas fa-angle-double-right" aria-hidden="true"></i>
3940
- </button>
4006
+ <div class="pf-v5-c-pagination__nav-control pf-m-next">
4007
+ <button
4008
+ class="pf-v5-c-button pf-m-plain"
4009
+ type="button"
4010
+ aria-label="Go to next page"
4011
+ >
4012
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
4013
+ </button>
4014
+ </div>
4015
+ <div class="pf-v5-c-pagination__nav-control pf-m-last">
4016
+ <button
4017
+ class="pf-v5-c-button pf-m-plain"
4018
+ type="button"
4019
+ aria-label="Go to last page"
4020
+ >
4021
+ <i class="fas fa-angle-double-right" aria-hidden="true"></i>
4022
+ </button>
4023
+ </div>
3941
4024
  </nav>
3942
4025
  </div>
3943
4026
  </div>
@@ -3980,22 +4063,25 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
3980
4063
  <i class="fas fa-caret-down" aria-hidden="true"></i>
3981
4064
  </button>
3982
4065
  </div>
3983
- <ul class="pf-v5-c-dropdown__menu" hidden>
3984
- <li>
4066
+ <ul class="pf-v5-c-dropdown__menu" hidden role="menu">
4067
+ <li role="none">
3985
4068
  <button
3986
4069
  class="pf-v5-c-dropdown__menu-item"
4070
+ role="menuitem"
3987
4071
  type="button"
3988
4072
  >Select all</button>
3989
4073
  </li>
3990
- <li>
4074
+ <li role="none">
3991
4075
  <button
3992
4076
  class="pf-v5-c-dropdown__menu-item"
4077
+ role="menuitem"
3993
4078
  type="button"
3994
4079
  >Select none</button>
3995
4080
  </li>
3996
- <li>
4081
+ <li role="none">
3997
4082
  <button
3998
4083
  class="pf-v5-c-dropdown__menu-item"
4084
+ role="menuitem"
3999
4085
  type="button"
4000
4086
  >Other action</button>
4001
4087
  </li>
@@ -4114,7 +4200,7 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
4114
4200
  <span
4115
4201
  id="toolbar-expanded-elements-example-select-checkbox-status-label"
4116
4202
  hidden
4117
- >Choose one</span>
4203
+ >Choose many</span>
4118
4204
 
4119
4205
  <button
4120
4206
  class="pf-v5-c-select__toggle"
@@ -4214,7 +4300,7 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
4214
4300
  <span
4215
4301
  id="toolbar-expanded-elements-example-select-checkbox-risk-label"
4216
4302
  hidden
4217
- >Choose one</span>
4303
+ >Choose many</span>
4218
4304
 
4219
4305
  <button
4220
4306
  class="pf-v5-c-select__toggle"
@@ -4384,10 +4470,14 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
4384
4470
  </button>
4385
4471
  <ul
4386
4472
  class="pf-v5-c-dropdown__menu"
4473
+ role="menu"
4387
4474
  aria-labelledby="toolbar-expanded-elements-example-overflow-menu-dropdown-toggle"
4388
4475
  >
4389
- <li>
4390
- <button class="pf-v5-c-dropdown__menu-item">Tertiary</button>
4476
+ <li role="none">
4477
+ <button
4478
+ role="menuitem"
4479
+ class="pf-v5-c-dropdown__menu-item"
4480
+ >Tertiary</button>
4391
4481
  </li>
4392
4482
  </ul>
4393
4483
  </div>