@patternfly/patternfly 5.0.0-alpha.4 → 5.0.0-alpha.41

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 (342) hide show
  1. package/README.md +4 -4
  2. package/RELEASE-NOTES.md +18 -1
  3. package/assets/icons/iconUnicodes.json +1 -0
  4. package/assets/images/pfbg-icon.svg +1 -0
  5. package/assets/pficon/pficon.scss +7 -2
  6. package/assets/pficon/pficon.woff2 +0 -0
  7. package/base/_base.scss +0 -18
  8. package/base/_chart-globals.scss +0 -4
  9. package/base/_common.scss +0 -22
  10. package/base/_fa-icons.scss +1 -2
  11. package/base/_fonts.scss +22 -27
  12. package/base/_globals.scss +92 -86
  13. package/base/_icons.scss +1 -28
  14. package/base/_svg-icons.scss +6 -0
  15. package/base/_variables.scss +4 -4
  16. package/base/patternfly-common.css +0 -10
  17. package/base/patternfly-fa-icons.css +1 -1
  18. package/base/patternfly-fonts.css +17 -17
  19. package/base/patternfly-globals.css +35 -41
  20. package/base/patternfly-icons.css +8 -22
  21. package/base/patternfly-pf-icons.css +6 -2
  22. package/base/patternfly-themes.css +0 -42
  23. package/base/patternfly-variables.css +3 -3
  24. package/base/themes/dark/_globals.scss +1 -1
  25. package/base/themes/dark/_variables.scss +1 -1
  26. package/components/AboutModalBox/about-modal-box.css +20 -50
  27. package/components/AboutModalBox/about-modal-box.scss +22 -14
  28. package/components/Accordion/accordion.css +2 -0
  29. package/components/Accordion/accordion.scss +2 -0
  30. package/components/Alert/alert.css +17 -8
  31. package/components/Alert/alert.scss +21 -7
  32. package/components/Alert/themes/dark/alert.scss +1 -1
  33. package/components/AppLauncher/app-launcher.css +2 -0
  34. package/components/AppLauncher/app-launcher.scss +2 -0
  35. package/components/Avatar/avatar.scss +2 -2
  36. package/components/BackgroundImage/background-image.css +8 -35
  37. package/components/BackgroundImage/background-image.scss +17 -43
  38. package/components/Banner/banner.css +14 -52
  39. package/components/Banner/banner.scss +9 -13
  40. package/components/Breadcrumb/breadcrumb.css +2 -0
  41. package/components/Breadcrumb/breadcrumb.scss +2 -0
  42. package/components/CalendarMonth/calendar-month.css +2 -2
  43. package/components/CalendarMonth/calendar-month.scss +3 -3
  44. package/components/Card/card.css +115 -50
  45. package/components/Card/card.scss +164 -63
  46. package/components/Chip/chip.css +33 -24
  47. package/components/Chip/chip.scss +40 -31
  48. package/components/ChipGroup/chip-group.css +27 -17
  49. package/components/ChipGroup/chip-group.scss +36 -22
  50. package/components/Content/content.css +11 -5
  51. package/components/Content/content.scss +17 -9
  52. package/components/ContextSelector/context-selector.css +13 -6
  53. package/components/ContextSelector/context-selector.scss +14 -7
  54. package/components/DataList/data-list-grid.css +7 -7
  55. package/components/DataList/data-list-grid.scss +1 -1
  56. package/components/DataList/data-list.css +46 -40
  57. package/components/DataList/data-list.scss +37 -28
  58. package/components/DatePicker/date-picker.css +0 -8
  59. package/components/DatePicker/date-picker.scss +0 -9
  60. package/components/DescriptionList/description-list.css +7 -7
  61. package/components/DescriptionList/description-list.scss +7 -7
  62. package/components/Divider/divider.css +2 -2
  63. package/components/Divider/divider.scss +3 -3
  64. package/components/Drawer/drawer.css +15 -16
  65. package/components/Drawer/drawer.scss +2 -3
  66. package/components/Dropdown/dropdown.css +26 -25
  67. package/components/Dropdown/dropdown.scss +17 -18
  68. package/components/DualListSelector/dual-list-selector.css +1 -1
  69. package/components/DualListSelector/dual-list-selector.scss +1 -1
  70. package/components/EmptyState/empty-state.css +46 -52
  71. package/components/EmptyState/empty-state.scss +58 -57
  72. package/components/ExpandableSection/expandable-section.css +2 -0
  73. package/components/ExpandableSection/expandable-section.scss +2 -0
  74. package/components/Form/form.css +14 -12
  75. package/components/Form/form.scss +9 -7
  76. package/components/FormControl/form-control.css +2 -5
  77. package/components/FormControl/themes/dark/form-control.scss +2 -6
  78. package/components/HelperText/helper-text.css +4 -0
  79. package/components/HelperText/helper-text.scss +5 -0
  80. package/components/Hint/hint.css +2 -2
  81. package/components/Hint/hint.scss +2 -2
  82. package/components/Icon/icon.css +3 -3
  83. package/components/Icon/icon.scss +3 -3
  84. package/components/InputGroup/input-group.css +61 -85
  85. package/components/InputGroup/input-group.scss +55 -61
  86. package/components/InputGroup/themes/dark/input-group.scss +11 -25
  87. package/components/Label/label.css +49 -36
  88. package/components/Label/label.scss +53 -38
  89. package/components/Label/themes/dark/label.scss +2 -2
  90. package/components/LabelGroup/label-group.css +26 -22
  91. package/components/LabelGroup/label-group.scss +31 -26
  92. package/components/LogViewer/log-viewer.css +0 -38
  93. package/components/Login/login.css +20 -60
  94. package/components/Login/login.scss +16 -18
  95. package/components/Login/themes/dark/login.scss +4 -0
  96. package/components/Masthead/masthead.css +4 -42
  97. package/components/Masthead/masthead.scss +4 -4
  98. package/components/Menu/menu.css +9 -6
  99. package/components/Menu/menu.scss +34 -31
  100. package/components/MenuToggle/menu-toggle.css +3 -1
  101. package/components/MenuToggle/menu-toggle.scss +3 -1
  102. package/components/ModalBox/modal-box.css +12 -11
  103. package/components/ModalBox/modal-box.scss +14 -14
  104. package/components/MultipleFileUpload/multiple-file-upload.css +6 -6
  105. package/components/MultipleFileUpload/multiple-file-upload.scss +6 -6
  106. package/components/Nav/nav.css +1 -1
  107. package/components/Nav/nav.scss +2 -2
  108. package/components/NotificationDrawer/notification-drawer.css +8 -8
  109. package/components/NotificationDrawer/notification-drawer.scss +8 -8
  110. package/components/OptionsMenu/options-menu.css +8 -10
  111. package/components/OptionsMenu/options-menu.scss +9 -11
  112. package/components/Page/page.css +101 -122
  113. package/components/Page/page.scss +49 -21
  114. package/components/Pagination/pagination.css +2 -110
  115. package/components/Pagination/pagination.scss +0 -6
  116. package/components/Popover/popover.css +31 -37
  117. package/components/Popover/popover.scss +32 -37
  118. package/components/Popover/themes/dark/popover.scss +3 -9
  119. package/components/Progress/progress.css +13 -10
  120. package/components/Progress/progress.scss +13 -10
  121. package/components/ProgressStepper/progress-stepper.css +5 -5
  122. package/components/ProgressStepper/progress-stepper.scss +5 -5
  123. package/components/SearchInput/search-input.css +4 -2
  124. package/components/SearchInput/search-input.scss +4 -2
  125. package/components/Select/select.css +1 -1
  126. package/components/Select/select.scss +1 -1
  127. package/components/Sidebar/sidebar.css +69 -26
  128. package/components/Sidebar/sidebar.scss +84 -27
  129. package/components/SimpleList/simple-list.css +1 -1
  130. package/components/SimpleList/simple-list.scss +2 -2
  131. package/components/Spinner/spinner.css +4 -133
  132. package/components/Spinner/spinner.scss +4 -173
  133. package/components/Table/table-grid.css +28 -28
  134. package/components/Table/table-scrollable.css +31 -26
  135. package/components/Table/table-scrollable.scss +33 -28
  136. package/components/Table/table-tree-view.css +14 -4
  137. package/components/Table/table-tree-view.scss +15 -0
  138. package/components/Table/table.css +67 -65
  139. package/components/Table/table.scss +65 -62
  140. package/components/Tabs/tabs.css +0 -4
  141. package/components/Tabs/tabs.scss +0 -7
  142. package/components/TextInputGroup/text-input-group.css +6 -4
  143. package/components/TextInputGroup/text-input-group.scss +6 -5
  144. package/components/Tile/tile.css +1 -1
  145. package/components/Tile/tile.scss +1 -1
  146. package/components/Timestamp/timestamp.css +3 -3
  147. package/components/Timestamp/timestamp.scss +3 -3
  148. package/components/Toolbar/toolbar.css +78 -43
  149. package/components/Toolbar/toolbar.scss +50 -10
  150. package/components/Tooltip/themes/dark/tooltip.scss +1 -11
  151. package/components/Tooltip/tooltip.css +7 -12
  152. package/components/Tooltip/tooltip.scss +6 -3
  153. package/components/TreeView/tree-view.css +7 -15
  154. package/components/TreeView/tree-view.scss +7 -18
  155. package/components/Wizard/wizard.css +16 -39
  156. package/components/Wizard/wizard.scss +20 -2
  157. package/docs/components/AboutModalBox/examples/AboutModalBox.md +20 -14
  158. package/docs/components/Accordion/examples/Accordion.md +12 -12
  159. package/docs/components/ActionList/examples/ActionList.md +6 -6
  160. package/docs/components/Alert/examples/Alert.md +29 -29
  161. package/docs/components/AlertGroup/examples/AlertGroup.md +15 -15
  162. package/docs/components/AppLauncher/examples/application-launcher.md +52 -46
  163. package/docs/components/Avatar/examples/Avatar.md +11 -11
  164. package/docs/components/BackToTop/examples/BackToTop.md +4 -4
  165. package/docs/components/Backdrop/examples/Backdrop.md +4 -4
  166. package/docs/components/BackgroundImage/examples/BackgroundImage.md +13 -29
  167. package/docs/components/Badge/examples/Badge.md +5 -5
  168. package/docs/components/Banner/examples/Banner.md +8 -8
  169. package/docs/components/Brand/examples/Brand.md +9 -9
  170. package/docs/components/Breadcrumb/examples/Breadcrumb.md +20 -20
  171. package/docs/components/Button/examples/Button.md +51 -55
  172. package/docs/components/CalendarMonth/examples/CalendarMonth.md +301 -284
  173. package/docs/components/Card/examples/Card.md +676 -116
  174. package/docs/components/Check/examples/Check.md +16 -19
  175. package/docs/components/Chip/examples/Chip.md +70 -52
  176. package/docs/components/ChipGroup/examples/ChipGroup.md +452 -673
  177. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +22 -22
  178. package/docs/components/CodeBlock/examples/CodeBlock.md +9 -9
  179. package/docs/components/CodeEditor/examples/CodeEditor.md +54 -35
  180. package/docs/components/Content/examples/Content.md +37 -9
  181. package/docs/components/ContextSelector/examples/context-selector.css +5 -1
  182. package/docs/components/ContextSelector/examples/context-selector.md +87 -80
  183. package/docs/components/DataList/examples/DataList.md +239 -202
  184. package/docs/components/DatePicker/examples/DatePicker.md +139 -104
  185. package/docs/components/DescriptionList/examples/DescriptionList.md +24 -24
  186. package/docs/components/Divider/examples/Divider.md +10 -10
  187. package/docs/components/DragDrop/examples/DragDrop.md +5 -5
  188. package/docs/components/Drawer/examples/Drawer.md +43 -43
  189. package/docs/components/Dropdown/examples/Dropdown.css +5 -2
  190. package/docs/components/Dropdown/examples/Dropdown.md +125 -100
  191. package/docs/components/DualListSelector/examples/DualListSelector.md +201 -197
  192. package/docs/components/EmptyState/examples/EmptyState.md +130 -82
  193. package/docs/components/ExpandableSection/examples/ExpandableSection.md +23 -23
  194. package/docs/components/FileUpload/examples/FileUpload.md +150 -110
  195. package/docs/components/Form/examples/Form.md +152 -130
  196. package/docs/components/FormControl/examples/FormControl.md +21 -20
  197. package/docs/components/HelperText/examples/HelperText.md +24 -35
  198. package/docs/components/Hint/examples/Hint.md +7 -7
  199. package/docs/components/Icon/examples/Icon.md +11 -12
  200. package/docs/components/InlineEdit/examples/InlineEdit.md +29 -27
  201. package/docs/components/InputGroup/examples/InputGroup.md +229 -179
  202. package/docs/components/JumpLinks/examples/JumpLinks.md +35 -35
  203. package/docs/components/Label/examples/Label.md +1427 -746
  204. package/docs/components/LabelGroup/examples/LabelGroup.md +295 -242
  205. package/docs/components/List/examples/List.md +18 -18
  206. package/docs/components/LogViewer/examples/LogViewer.md +79 -74
  207. package/docs/components/Login/examples/Login.md +103 -181
  208. package/docs/components/Masthead/examples/masthead.md +9 -9
  209. package/docs/components/Menu/examples/Menu.md +93 -85
  210. package/docs/components/MenuToggle/examples/MenuToggle.md +29 -28
  211. package/docs/components/ModalBox/examples/ModalBox.md +113 -92
  212. package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +27 -26
  213. package/docs/components/Nav/examples/Navigation.md +69 -69
  214. package/docs/components/NotificationBadge/examples/NotificationBadge.md +8 -8
  215. package/docs/components/NotificationDrawer/examples/NotificationDrawer.md +64 -64
  216. package/docs/components/NumberInput/examples/NumberInput.md +311 -239
  217. package/docs/components/OptionsMenu/examples/options-menu.md +28 -28
  218. package/docs/components/OverflowMenu/examples/overflow-menu.md +25 -25
  219. package/docs/components/Page/examples/Page.css +7 -1
  220. package/docs/components/Page/examples/Page.md +81 -54
  221. package/docs/components/Pagination/examples/Pagination.md +27 -27
  222. package/docs/components/Panel/examples/Panel.md +10 -10
  223. package/docs/components/Popover/examples/Popover.md +206 -149
  224. package/docs/components/Progress/examples/Progress.md +32 -61
  225. package/docs/components/ProgressStepper/examples/ProgressStepper.md +45 -39
  226. package/docs/components/Radio/examples/Radio.md +12 -11
  227. package/docs/components/SearchInput/examples/SearchInput.md +185 -148
  228. package/docs/components/Select/examples/Select.md +372 -318
  229. package/docs/components/Sidebar/examples/Sidebar.md +70 -14
  230. package/docs/components/SimpleList/examples/SimpleList.md +15 -15
  231. package/docs/components/Skeleton/examples/Skeleton.md +8 -8
  232. package/docs/components/SkipToContent/examples/SkipToContent.md +5 -5
  233. package/docs/components/Slider/examples/Slider.md +84 -62
  234. package/docs/components/Spinner/examples/Spinner.md +18 -67
  235. package/docs/components/Switch/examples/Switch.md +19 -19
  236. package/docs/components/TabContent/examples/TabContent.md +13 -13
  237. package/docs/components/Table/examples/Table.css +4 -0
  238. package/docs/components/Table/examples/Table.md +5212 -5750
  239. package/docs/components/Tabs/examples/Tabs.md +155 -155
  240. package/docs/components/TextInputGroup/examples/TextInputGroup.md +523 -406
  241. package/docs/components/Tile/examples/Tile.md +16 -17
  242. package/docs/components/Timestamp/examples/Timestamp.md +5 -5
  243. package/docs/components/Title/examples/Title.md +17 -17
  244. package/docs/components/ToggleGroup/examples/toggle-group.md +13 -13
  245. package/docs/components/Toolbar/examples/Toolbar.md +848 -726
  246. package/docs/components/Tooltip/examples/Tooltip.md +10 -10
  247. package/docs/components/TreeView/examples/TreeView.md +34 -34
  248. package/docs/components/Truncate/examples/Truncate.md +4 -5
  249. package/docs/components/Wizard/examples/Wizard.md +119 -127
  250. package/docs/demos/AboutModal/examples/AboutModal.md +4 -5
  251. package/docs/demos/Alert/examples/Alert.md +118 -71
  252. package/docs/demos/BackToTop/examples/BackToTop.md +4 -4
  253. package/docs/demos/Banner/examples/Banner.md +8 -9
  254. package/docs/demos/Button/examples/Button.md +10 -5
  255. package/docs/demos/Card/examples/Card.md +246 -168
  256. package/docs/demos/CardView/examples/CardView.md +57 -30
  257. package/docs/demos/ContextSelector/examples/ContextSelector.md +18 -18
  258. package/docs/demos/Dashboard/examples/Dashboard.md +61 -38
  259. package/docs/demos/DataList/examples/DataList.md +312 -255
  260. package/docs/demos/DescriptionList/examples/DescriptionList.md +33 -22
  261. package/docs/demos/Drawer/examples/Drawer.md +24 -22
  262. package/docs/demos/Form/examples/BasicForms.md +220 -213
  263. package/docs/demos/HelperText/examples/HelperText.md +16 -14
  264. package/docs/demos/JumpLinks/examples/JumpLinks.md +28 -28
  265. package/docs/demos/Masthead/examples/Masthead.md +302 -284
  266. package/docs/demos/Modal/examples/Modal.md +54 -66
  267. package/docs/demos/Nav/examples/Nav.md +47 -47
  268. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +70 -58
  269. package/docs/demos/Page/examples/Page.md +982 -51
  270. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +22 -18
  271. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +121 -106
  272. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +345 -311
  273. package/docs/demos/Skeleton/examples/Skeleton.md +4 -4
  274. package/docs/demos/Table/examples/Table.md +3373 -1333
  275. package/docs/demos/Tabs/examples/Tabs.md +141 -90
  276. package/docs/demos/Toolbar/examples/Toolbar.md +1994 -329
  277. package/docs/demos/Wizard/examples/Wizard.md +289 -266
  278. package/docs/layouts/Bullseye/examples/Bullseye.md +4 -4
  279. package/docs/layouts/Flex/examples/Flex.md +98 -98
  280. package/docs/layouts/Gallery/examples/Gallery.md +7 -7
  281. package/docs/layouts/Grid/examples/Grid.md +9 -9
  282. package/docs/layouts/Level/examples/Level.md +5 -5
  283. package/docs/layouts/Split/examples/Split.md +7 -7
  284. package/docs/layouts/Stack/examples/Stack.md +6 -6
  285. package/docs/utilities/Accessibility/examples/Accessibility.md +5 -5
  286. package/docs/utilities/Alignment/examples/Alignment.md +7 -7
  287. package/docs/utilities/BackgroundColor/examples/BackgroundColor.md +13 -13
  288. package/docs/utilities/BoxShadow/examples/box-shadow.md +23 -23
  289. package/docs/utilities/Display/examples/Display.md +12 -12
  290. package/docs/utilities/Flex/examples/Flex.md +35 -35
  291. package/docs/utilities/Float/examples/Float.md +5 -5
  292. package/docs/utilities/Sizing/examples/Sizing.md +51 -51
  293. package/docs/utilities/Spacing/examples/Spacing.md +35 -35
  294. package/docs/utilities/Text/examples/Text.md +31 -31
  295. package/icons/{pf-icons.json → pf-icons.mjs} +2 -1
  296. package/layouts/Gallery/gallery.css +1 -1
  297. package/layouts/Gallery/gallery.scss +1 -1
  298. package/layouts/Grid/grid.css +7 -7
  299. package/layouts/Grid/grid.scss +2 -2
  300. package/package.json +60 -66
  301. package/patternfly-addons.css +48 -48
  302. package/{patternfly-base-no-reset.css → patternfly-base-no-globals.css} +28 -73
  303. package/{patternfly-base-no-reset.scss → patternfly-base-no-globals.scss} +1 -0
  304. package/patternfly-base.css +63 -114
  305. package/{patternfly-no-reset.css → patternfly-no-globals.css} +1206 -2449
  306. package/{patternfly-no-reset.scss → patternfly-no-globals.scss} +1 -0
  307. package/patternfly.css +1234 -2483
  308. package/patternfly.min.css +1 -1
  309. package/patternfly.min.css.map +1 -1
  310. package/sass-utilities/functions.scss +8 -24
  311. package/sass-utilities/mixins.scss +15 -39
  312. package/sass-utilities/placeholders.scss +0 -23
  313. package/sass-utilities/scss-variables.scss +5 -6
  314. package/sass-utilities/themes/dark/placeholders.scss +0 -22
  315. package/sass-utilities/themes/dark/scss-variables.scss +1 -1
  316. package/utilities/Spacing/spacing.scss +2 -2
  317. package/utilities/Text/text.css +48 -48
  318. package/utilities/Text/text.scss +6 -6
  319. package/utilities/Text/themes/dark/text.scss +2 -2
  320. package/assets/fonts/RedHatDisplay/RedHatDisplay-Black.woff +0 -0
  321. package/assets/fonts/RedHatDisplay/RedHatDisplay-BlackItalic.woff +0 -0
  322. package/assets/fonts/RedHatDisplay/RedHatDisplay-Bold.woff +0 -0
  323. package/assets/fonts/RedHatDisplay/RedHatDisplay-BoldItalic.woff +0 -0
  324. package/assets/fonts/RedHatDisplay/RedHatDisplay-Italic.woff +0 -0
  325. package/assets/fonts/RedHatDisplay/RedHatDisplay-Medium.woff +0 -0
  326. package/assets/fonts/RedHatDisplay/RedHatDisplay-MediumItalic.woff +0 -0
  327. package/assets/fonts/RedHatDisplay/RedHatDisplay-Regular.woff +0 -0
  328. package/assets/fonts/RedHatText/RedHatText-Bold.woff +0 -0
  329. package/assets/fonts/RedHatText/RedHatText-BoldItalic.woff +0 -0
  330. package/assets/fonts/RedHatText/RedHatText-Italic.woff +0 -0
  331. package/assets/fonts/RedHatText/RedHatText-Medium.woff +0 -0
  332. package/assets/fonts/RedHatText/RedHatText-MediumItalic.woff +0 -0
  333. package/assets/fonts/RedHatText/RedHatText-Regular.woff +0 -0
  334. package/assets/fonts/webfonts/fa-solid-900.woff +0 -0
  335. package/assets/pficon/pficon.woff +0 -0
  336. package/base/_shield-inheritable.scss +0 -69
  337. package/base/_shield-noninheritable.scss +0 -13
  338. package/base/patternfly-shield-inheritable.css +0 -66
  339. package/base/patternfly-shield-inheritable.scss +0 -4
  340. package/base/patternfly-shield-noninheritable.css +0 -9
  341. package/base/patternfly-shield-noninheritable.scss +0 -4
  342. package/sass-utilities/bs-variables.scss +0 -709
package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md CHANGED
@@ -1,6 +1,6 @@
1
1
  ---
2
2
  id: Primary-detail
3
- section: demos
3
+ section: patterns
4
4
  wrapperTag: div
5
5
  ---## Demos
6
6
 
@@ -99,7 +99,7 @@ wrapperTag: div
99
99
  </div>
100
100
  <section class="pf-c-app-launcher__group">
101
101
  <h1 class="pf-c-app-launcher__group-title">Favorites</h1>
102
- <ul>
102
+ <ul role="list">
103
103
  <li
104
104
  class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
105
105
  >
@@ -151,7 +151,7 @@ wrapperTag: div
151
151
  <hr class="pf-c-divider" />
152
152
  <section class="pf-c-app-launcher__group">
153
153
  <h1 class="pf-c-app-launcher__group-title">Group 1</h1>
154
- <ul>
154
+ <ul role="list">
155
155
  <li
156
156
  class="pf-c-app-launcher__menu-wrapper pf-m-external"
157
157
  >
@@ -806,7 +806,7 @@ wrapperTag: div
806
806
  id="primary-detail-expanded-example-primary-nav"
807
807
  aria-label="Global"
808
808
  >
809
- <ul class="pf-c-nav__list">
809
+ <ul class="pf-c-nav__list" role="list">
810
810
  <li class="pf-c-nav__item">
811
811
  <a href="#" class="pf-c-nav__link">System panel</a>
812
812
  </li>
@@ -838,7 +838,7 @@ wrapperTag: div
838
838
  <section class="pf-c-page__main-breadcrumb pf-m-limit-width">
839
839
  <div class="pf-c-page__main-body">
840
840
  <nav class="pf-c-breadcrumb" aria-label="breadcrumb">
841
- <ol class="pf-c-breadcrumb__list">
841
+ <ol class="pf-c-breadcrumb__list" role="list">
842
842
  <li class="pf-c-breadcrumb__item">
843
843
  <a href="#" class="pf-c-breadcrumb__link">Section home</a>
844
844
  </li>
@@ -914,90 +914,104 @@ wrapperTag: div
914
914
  aria-label="search filter"
915
915
  role="group"
916
916
  >
917
- <div class="pf-c-select" style="width: 175px">
918
- <span
919
- id="primary-detail-expanded-example-drawer-toolbar-select-name-label"
920
- hidden
921
- >Choose one</span>
917
+ <div class="pf-c-input-group__item pf-m-fill">
918
+ <div class="pf-c-select" style="width: 124px">
919
+ <span
920
+ id="primary-detail-expanded-example-drawer-toolbar-select-name-label"
921
+ hidden
922
+ >Choose one</span>
922
923
 
923
- <button
924
- class="pf-c-select__toggle"
925
- type="button"
926
- id="primary-detail-expanded-example-drawer-toolbar-select-name-toggle"
927
- aria-haspopup="true"
928
- aria-expanded="false"
929
- aria-labelledby="primary-detail-expanded-example-drawer-toolbar-select-name-label primary-detail-expanded-example-drawer-toolbar-select-name-toggle"
930
- >
931
- <div class="pf-c-select__toggle-wrapper">
932
- <span class="pf-c-select__toggle-icon">
933
- <i class="fas fa-filter" aria-hidden="true"></i>
924
+ <button
925
+ class="pf-c-select__toggle"
926
+ type="button"
927
+ id="primary-detail-expanded-example-drawer-toolbar-select-name-toggle"
928
+ aria-haspopup="true"
929
+ aria-expanded="false"
930
+ aria-labelledby="primary-detail-expanded-example-drawer-toolbar-select-name-label primary-detail-expanded-example-drawer-toolbar-select-name-toggle"
931
+ >
932
+ <div class="pf-c-select__toggle-wrapper">
933
+ <span class="pf-c-select__toggle-icon">
934
+ <i class="fas fa-filter" aria-hidden="true"></i>
935
+ </span>
936
+ <span class="pf-c-select__toggle-text">Name</span>
937
+ </div>
938
+ <span class="pf-c-select__toggle-arrow">
939
+ <i
940
+ class="fas fa-caret-down"
941
+ aria-hidden="true"
942
+ ></i>
934
943
  </span>
935
- <span class="pf-c-select__toggle-text">Name</span>
936
- </div>
937
- <span class="pf-c-select__toggle-arrow">
938
- <i class="fas fa-caret-down" aria-hidden="true"></i>
939
- </span>
940
- </button>
944
+ </button>
941
945
 
942
- <ul
943
- class="pf-c-select__menu"
944
- role="listbox"
945
- aria-labelledby="primary-detail-expanded-example-drawer-toolbar-select-name-label"
946
- hidden
947
- style="width: 175px"
946
+ <ul
947
+ class="pf-c-select__menu"
948
+ role="listbox"
949
+ aria-labelledby="primary-detail-expanded-example-drawer-toolbar-select-name-label"
950
+ hidden
951
+ >
952
+ <li role="presentation">
953
+ <button
954
+ class="pf-c-select__menu-item"
955
+ role="option"
956
+ >Running</button>
957
+ </li>
958
+ <li role="presentation">
959
+ <button
960
+ class="pf-c-select__menu-item pf-m-selected"
961
+ role="option"
962
+ aria-selected="true"
963
+ >
964
+ Stopped
965
+ <span class="pf-c-select__menu-item-icon">
966
+ <i
967
+ class="fas fa-check"
968
+ aria-hidden="true"
969
+ ></i>
970
+ </span>
971
+ </button>
972
+ </li>
973
+ <li role="presentation">
974
+ <button
975
+ class="pf-c-select__menu-item"
976
+ role="option"
977
+ >Down</button>
978
+ </li>
979
+ <li role="presentation">
980
+ <button
981
+ class="pf-c-select__menu-item"
982
+ role="option"
983
+ >Degraded</button>
984
+ </li>
985
+ <li role="presentation">
986
+ <button
987
+ class="pf-c-select__menu-item"
988
+ role="option"
989
+ >Needs maintenance</button>
990
+ </li>
991
+ </ul>
992
+ </div>
993
+ </div>
994
+ <div class="pf-c-input-group__item">
995
+ <div
996
+ class="pf-c-text-input-group"
997
+ style="width: auto"
948
998
  >
949
- <li role="presentation">
950
- <button
951
- class="pf-c-select__menu-item"
952
- role="option"
953
- >Running</button>
954
- </li>
955
- <li role="presentation">
956
- <button
957
- class="pf-c-select__menu-item pf-m-selected"
958
- role="option"
959
- aria-selected="true"
960
- >
961
- Stopped
962
- <span class="pf-c-select__menu-item-icon">
963
- <i class="fas fa-check" aria-hidden="true"></i>
999
+ <div
1000
+ class="pf-c-text-input-group__main pf-m-icon"
1001
+ >
1002
+ <span class="pf-c-text-input-group__text">
1003
+ <span class="pf-c-text-input-group__icon">
1004
+ <i class="fas fa-fw fa-search"></i>
964
1005
  </span>
965
- </button>
966
- </li>
967
- <li role="presentation">
968
- <button
969
- class="pf-c-select__menu-item"
970
- role="option"
971
- >Down</button>
972
- </li>
973
- <li role="presentation">
974
- <button
975
- class="pf-c-select__menu-item"
976
- role="option"
977
- >Degraded</button>
978
- </li>
979
- <li role="presentation">
980
- <button
981
- class="pf-c-select__menu-item"
982
- role="option"
983
- >Needs maintenance</button>
984
- </li>
985
- </ul>
986
- </div>
987
- <div class="pf-c-text-input-group">
988
- <div class="pf-c-text-input-group__main pf-m-icon">
989
- <span class="pf-c-text-input-group__text">
990
- <span class="pf-c-text-input-group__icon">
991
- <i class="fas fa-fw fa-search"></i>
1006
+ <input
1007
+ class="pf-c-text-input-group__text-input"
1008
+ type="search"
1009
+ placeholder="Filter by name"
1010
+ value
1011
+ aria-label="Type to filter"
1012
+ />
992
1013
  </span>
993
- <input
994
- class="pf-c-text-input-group__text-input"
995
- type="text"
996
- value
997
- placeholder="Filter by name"
998
- aria-label="Type to filter"
999
- />
1000
- </span>
1014
+ </div>
1001
1015
  </div>
1002
1016
  </div>
1003
1017
  </div>
@@ -1976,7 +1990,7 @@ wrapperTag: div
1976
1990
  </div>
1977
1991
  <section class="pf-c-app-launcher__group">
1978
1992
  <h1 class="pf-c-app-launcher__group-title">Favorites</h1>
1979
- <ul>
1993
+ <ul role="list">
1980
1994
  <li
1981
1995
  class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
1982
1996
  >
@@ -2028,7 +2042,7 @@ wrapperTag: div
2028
2042
  <hr class="pf-c-divider" />
2029
2043
  <section class="pf-c-app-launcher__group">
2030
2044
  <h1 class="pf-c-app-launcher__group-title">Group 1</h1>
2031
- <ul>
2045
+ <ul role="list">
2032
2046
  <li
2033
2047
  class="pf-c-app-launcher__menu-wrapper pf-m-external"
2034
2048
  >
@@ -2683,7 +2697,7 @@ wrapperTag: div
2683
2697
  id="primary-detail-collapsed-example-primary-nav"
2684
2698
  aria-label="Global"
2685
2699
  >
2686
- <ul class="pf-c-nav__list">
2700
+ <ul class="pf-c-nav__list" role="list">
2687
2701
  <li class="pf-c-nav__item">
2688
2702
  <a href="#" class="pf-c-nav__link">System panel</a>
2689
2703
  </li>
@@ -2715,7 +2729,7 @@ wrapperTag: div
2715
2729
  <section class="pf-c-page__main-breadcrumb pf-m-limit-width">
2716
2730
  <div class="pf-c-page__main-body">
2717
2731
  <nav class="pf-c-breadcrumb" aria-label="breadcrumb">
2718
- <ol class="pf-c-breadcrumb__list">
2732
+ <ol class="pf-c-breadcrumb__list" role="list">
2719
2733
  <li class="pf-c-breadcrumb__item">
2720
2734
  <a href="#" class="pf-c-breadcrumb__link">Section home</a>
2721
2735
  </li>
@@ -2791,90 +2805,104 @@ wrapperTag: div
2791
2805
  aria-label="search filter"
2792
2806
  role="group"
2793
2807
  >
2794
- <div class="pf-c-select" style="width: 175px">
2795
- <span
2796
- id="primary-detail-collapsed-example-drawer-toolbar-select-name-label"
2797
- hidden
2798
- >Choose one</span>
2808
+ <div class="pf-c-input-group__item pf-m-fill">
2809
+ <div class="pf-c-select" style="width: 124px">
2810
+ <span
2811
+ id="primary-detail-collapsed-example-drawer-toolbar-select-name-label"
2812
+ hidden
2813
+ >Choose one</span>
2799
2814
 
2800
- <button
2801
- class="pf-c-select__toggle"
2802
- type="button"
2803
- id="primary-detail-collapsed-example-drawer-toolbar-select-name-toggle"
2804
- aria-haspopup="true"
2805
- aria-expanded="false"
2806
- aria-labelledby="primary-detail-collapsed-example-drawer-toolbar-select-name-label primary-detail-collapsed-example-drawer-toolbar-select-name-toggle"
2807
- >
2808
- <div class="pf-c-select__toggle-wrapper">
2809
- <span class="pf-c-select__toggle-icon">
2810
- <i class="fas fa-filter" aria-hidden="true"></i>
2815
+ <button
2816
+ class="pf-c-select__toggle"
2817
+ type="button"
2818
+ id="primary-detail-collapsed-example-drawer-toolbar-select-name-toggle"
2819
+ aria-haspopup="true"
2820
+ aria-expanded="false"
2821
+ aria-labelledby="primary-detail-collapsed-example-drawer-toolbar-select-name-label primary-detail-collapsed-example-drawer-toolbar-select-name-toggle"
2822
+ >
2823
+ <div class="pf-c-select__toggle-wrapper">
2824
+ <span class="pf-c-select__toggle-icon">
2825
+ <i class="fas fa-filter" aria-hidden="true"></i>
2826
+ </span>
2827
+ <span class="pf-c-select__toggle-text">Name</span>
2828
+ </div>
2829
+ <span class="pf-c-select__toggle-arrow">
2830
+ <i
2831
+ class="fas fa-caret-down"
2832
+ aria-hidden="true"
2833
+ ></i>
2811
2834
  </span>
2812
- <span class="pf-c-select__toggle-text">Name</span>
2813
- </div>
2814
- <span class="pf-c-select__toggle-arrow">
2815
- <i class="fas fa-caret-down" aria-hidden="true"></i>
2816
- </span>
2817
- </button>
2835
+ </button>
2818
2836
 
2819
- <ul
2820
- class="pf-c-select__menu"
2821
- role="listbox"
2822
- aria-labelledby="primary-detail-collapsed-example-drawer-toolbar-select-name-label"
2823
- hidden
2824
- style="width: 175px"
2837
+ <ul
2838
+ class="pf-c-select__menu"
2839
+ role="listbox"
2840
+ aria-labelledby="primary-detail-collapsed-example-drawer-toolbar-select-name-label"
2841
+ hidden
2842
+ >
2843
+ <li role="presentation">
2844
+ <button
2845
+ class="pf-c-select__menu-item"
2846
+ role="option"
2847
+ >Running</button>
2848
+ </li>
2849
+ <li role="presentation">
2850
+ <button
2851
+ class="pf-c-select__menu-item pf-m-selected"
2852
+ role="option"
2853
+ aria-selected="true"
2854
+ >
2855
+ Stopped
2856
+ <span class="pf-c-select__menu-item-icon">
2857
+ <i
2858
+ class="fas fa-check"
2859
+ aria-hidden="true"
2860
+ ></i>
2861
+ </span>
2862
+ </button>
2863
+ </li>
2864
+ <li role="presentation">
2865
+ <button
2866
+ class="pf-c-select__menu-item"
2867
+ role="option"
2868
+ >Down</button>
2869
+ </li>
2870
+ <li role="presentation">
2871
+ <button
2872
+ class="pf-c-select__menu-item"
2873
+ role="option"
2874
+ >Degraded</button>
2875
+ </li>
2876
+ <li role="presentation">
2877
+ <button
2878
+ class="pf-c-select__menu-item"
2879
+ role="option"
2880
+ >Needs maintenance</button>
2881
+ </li>
2882
+ </ul>
2883
+ </div>
2884
+ </div>
2885
+ <div class="pf-c-input-group__item">
2886
+ <div
2887
+ class="pf-c-text-input-group"
2888
+ style="width: auto"
2825
2889
  >
2826
- <li role="presentation">
2827
- <button
2828
- class="pf-c-select__menu-item"
2829
- role="option"
2830
- >Running</button>
2831
- </li>
2832
- <li role="presentation">
2833
- <button
2834
- class="pf-c-select__menu-item pf-m-selected"
2835
- role="option"
2836
- aria-selected="true"
2837
- >
2838
- Stopped
2839
- <span class="pf-c-select__menu-item-icon">
2840
- <i class="fas fa-check" aria-hidden="true"></i>
2890
+ <div
2891
+ class="pf-c-text-input-group__main pf-m-icon"
2892
+ >
2893
+ <span class="pf-c-text-input-group__text">
2894
+ <span class="pf-c-text-input-group__icon">
2895
+ <i class="fas fa-fw fa-search"></i>
2841
2896
  </span>
2842
- </button>
2843
- </li>
2844
- <li role="presentation">
2845
- <button
2846
- class="pf-c-select__menu-item"
2847
- role="option"
2848
- >Down</button>
2849
- </li>
2850
- <li role="presentation">
2851
- <button
2852
- class="pf-c-select__menu-item"
2853
- role="option"
2854
- >Degraded</button>
2855
- </li>
2856
- <li role="presentation">
2857
- <button
2858
- class="pf-c-select__menu-item"
2859
- role="option"
2860
- >Needs maintenance</button>
2861
- </li>
2862
- </ul>
2863
- </div>
2864
- <div class="pf-c-text-input-group">
2865
- <div class="pf-c-text-input-group__main pf-m-icon">
2866
- <span class="pf-c-text-input-group__text">
2867
- <span class="pf-c-text-input-group__icon">
2868
- <i class="fas fa-fw fa-search"></i>
2897
+ <input
2898
+ class="pf-c-text-input-group__text-input"
2899
+ type="search"
2900
+ placeholder="Filter by name"
2901
+ value
2902
+ aria-label="Type to filter"
2903
+ />
2869
2904
  </span>
2870
- <input
2871
- class="pf-c-text-input-group__text-input"
2872
- type="text"
2873
- value
2874
- placeholder="Filter by name"
2875
- aria-label="Type to filter"
2876
- />
2877
- </span>
2905
+ </div>
2878
2906
  </div>
2879
2907
  </div>
2880
2908
  </div>
@@ -3780,7 +3808,7 @@ wrapperTag: div
3780
3808
  </div>
3781
3809
  <section class="pf-c-app-launcher__group">
3782
3810
  <h1 class="pf-c-app-launcher__group-title">Favorites</h1>
3783
- <ul>
3811
+ <ul role="list">
3784
3812
  <li
3785
3813
  class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
3786
3814
  >
@@ -3832,7 +3860,7 @@ wrapperTag: div
3832
3860
  <hr class="pf-c-divider" />
3833
3861
  <section class="pf-c-app-launcher__group">
3834
3862
  <h1 class="pf-c-app-launcher__group-title">Group 1</h1>
3835
- <ul>
3863
+ <ul role="list">
3836
3864
  <li
3837
3865
  class="pf-c-app-launcher__menu-wrapper pf-m-external"
3838
3866
  >
@@ -4487,7 +4515,7 @@ wrapperTag: div
4487
4515
  id="primary-detail-content-body-padding-example-primary-nav"
4488
4516
  aria-label="Global"
4489
4517
  >
4490
- <ul class="pf-c-nav__list">
4518
+ <ul class="pf-c-nav__list" role="list">
4491
4519
  <li class="pf-c-nav__item">
4492
4520
  <a href="#" class="pf-c-nav__link">System panel</a>
4493
4521
  </li>
@@ -4519,7 +4547,7 @@ wrapperTag: div
4519
4547
  <section class="pf-c-page__main-breadcrumb pf-m-limit-width">
4520
4548
  <div class="pf-c-page__main-body">
4521
4549
  <nav class="pf-c-breadcrumb" aria-label="breadcrumb">
4522
- <ol class="pf-c-breadcrumb__list">
4550
+ <ol class="pf-c-breadcrumb__list" role="list">
4523
4551
  <li class="pf-c-breadcrumb__item">
4524
4552
  <a href="#" class="pf-c-breadcrumb__link">Section home</a>
4525
4553
  </li>
@@ -5489,7 +5517,7 @@ wrapperTag: div
5489
5517
  </div>
5490
5518
  <section class="pf-c-app-launcher__group">
5491
5519
  <h1 class="pf-c-app-launcher__group-title">Favorites</h1>
5492
- <ul>
5520
+ <ul role="list">
5493
5521
  <li
5494
5522
  class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
5495
5523
  >
@@ -5541,7 +5569,7 @@ wrapperTag: div
5541
5569
  <hr class="pf-c-divider" />
5542
5570
  <section class="pf-c-app-launcher__group">
5543
5571
  <h1 class="pf-c-app-launcher__group-title">Group 1</h1>
5544
- <ul>
5572
+ <ul role="list">
5545
5573
  <li
5546
5574
  class="pf-c-app-launcher__menu-wrapper pf-m-external"
5547
5575
  >
@@ -6196,7 +6224,7 @@ wrapperTag: div
6196
6224
  id="primary-detail-card-view-expanded-example-primary-nav"
6197
6225
  aria-label="Global"
6198
6226
  >
6199
- <ul class="pf-c-nav__list">
6227
+ <ul class="pf-c-nav__list" role="list">
6200
6228
  <li class="pf-c-nav__item">
6201
6229
  <a href="#" class="pf-c-nav__link">System panel</a>
6202
6230
  </li>
@@ -6228,7 +6256,7 @@ wrapperTag: div
6228
6256
  <section class="pf-c-page__main-breadcrumb pf-m-limit-width">
6229
6257
  <div class="pf-c-page__main-body">
6230
6258
  <nav class="pf-c-breadcrumb" aria-label="breadcrumb">
6231
- <ol class="pf-c-breadcrumb__list">
6259
+ <ol class="pf-c-breadcrumb__list" role="list">
6232
6260
  <li class="pf-c-breadcrumb__item">
6233
6261
  <a href="#" class="pf-c-breadcrumb__link">Section home</a>
6234
6262
  </li>
@@ -6300,11 +6328,14 @@ wrapperTag: div
6300
6328
  class="pf-c-dropdown__toggle-check"
6301
6329
  for="primary-detail-card-view-expanded-example-drawer-toolbar-bulk-select-toggle-check"
6302
6330
  >
6303
- <input
6304
- type="checkbox"
6305
- id="primary-detail-card-view-expanded-example-drawer-toolbar-bulk-select-toggle-check"
6306
- aria-label="Select all"
6307
- />
6331
+ <div class="pf-c-check pf-m-standalone">
6332
+ <input
6333
+ class="pf-c-check__input"
6334
+ type="checkbox"
6335
+ id="primary-detail-card-view-expanded-example-drawer-toolbar-bulk-select-toggle-check"
6336
+ aria-label="Select all"
6337
+ />
6338
+ </div>
6308
6339
  </label>
6309
6340
 
6310
6341
  <button
@@ -6346,90 +6377,93 @@ wrapperTag: div
6346
6377
  aria-label="search filter"
6347
6378
  role="group"
6348
6379
  >
6349
- <div class="pf-c-select" style="width: 175px">
6350
- <span
6351
- id="primary-detail-card-view-expanded-example-drawer-toolbar-select-name-label"
6352
- hidden
6353
- >Choose one</span>
6380
+ <div class="pf-c-input-group__item pf-m-fill">
6381
+ <div class="pf-c-select" style="width: 124px">
6382
+ <span
6383
+ id="primary-detail-card-view-expanded-example-drawer-toolbar-select-name-label"
6384
+ hidden
6385
+ >Choose one</span>
6354
6386
 
6355
- <button
6356
- class="pf-c-select__toggle"
6357
- type="button"
6358
- id="primary-detail-card-view-expanded-example-drawer-toolbar-select-name-toggle"
6359
- aria-haspopup="true"
6360
- aria-expanded="false"
6361
- aria-labelledby="primary-detail-card-view-expanded-example-drawer-toolbar-select-name-label primary-detail-card-view-expanded-example-drawer-toolbar-select-name-toggle"
6362
- >
6363
- <div class="pf-c-select__toggle-wrapper">
6364
- <span class="pf-c-select__toggle-icon">
6365
- <i class="fas fa-filter" aria-hidden="true"></i>
6387
+ <button
6388
+ class="pf-c-select__toggle"
6389
+ type="button"
6390
+ id="primary-detail-card-view-expanded-example-drawer-toolbar-select-name-toggle"
6391
+ aria-haspopup="true"
6392
+ aria-expanded="false"
6393
+ aria-labelledby="primary-detail-card-view-expanded-example-drawer-toolbar-select-name-label primary-detail-card-view-expanded-example-drawer-toolbar-select-name-toggle"
6394
+ >
6395
+ <div class="pf-c-select__toggle-wrapper">
6396
+ <span class="pf-c-select__toggle-icon">
6397
+ <i class="fas fa-filter" aria-hidden="true"></i>
6398
+ </span>
6399
+ <span class="pf-c-select__toggle-text">Name</span>
6400
+ </div>
6401
+ <span class="pf-c-select__toggle-arrow">
6402
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
6366
6403
  </span>
6367
- <span class="pf-c-select__toggle-text">Name</span>
6368
- </div>
6369
- <span class="pf-c-select__toggle-arrow">
6370
- <i class="fas fa-caret-down" aria-hidden="true"></i>
6371
- </span>
6372
- </button>
6404
+ </button>
6373
6405
 
6374
- <ul
6375
- class="pf-c-select__menu"
6376
- role="listbox"
6377
- aria-labelledby="primary-detail-card-view-expanded-example-drawer-toolbar-select-name-label"
6378
- hidden
6379
- style="width: 175px"
6380
- >
6381
- <li role="presentation">
6382
- <button
6383
- class="pf-c-select__menu-item"
6384
- role="option"
6385
- >Running</button>
6386
- </li>
6387
- <li role="presentation">
6388
- <button
6389
- class="pf-c-select__menu-item pf-m-selected"
6390
- role="option"
6391
- aria-selected="true"
6392
- >
6393
- Stopped
6394
- <span class="pf-c-select__menu-item-icon">
6395
- <i class="fas fa-check" aria-hidden="true"></i>
6396
- </span>
6397
- </button>
6398
- </li>
6399
- <li role="presentation">
6400
- <button
6401
- class="pf-c-select__menu-item"
6402
- role="option"
6403
- >Down</button>
6404
- </li>
6405
- <li role="presentation">
6406
- <button
6407
- class="pf-c-select__menu-item"
6408
- role="option"
6409
- >Degraded</button>
6410
- </li>
6411
- <li role="presentation">
6412
- <button
6413
- class="pf-c-select__menu-item"
6414
- role="option"
6415
- >Needs maintenance</button>
6416
- </li>
6417
- </ul>
6406
+ <ul
6407
+ class="pf-c-select__menu"
6408
+ role="listbox"
6409
+ aria-labelledby="primary-detail-card-view-expanded-example-drawer-toolbar-select-name-label"
6410
+ hidden
6411
+ >
6412
+ <li role="presentation">
6413
+ <button
6414
+ class="pf-c-select__menu-item"
6415
+ role="option"
6416
+ >Running</button>
6417
+ </li>
6418
+ <li role="presentation">
6419
+ <button
6420
+ class="pf-c-select__menu-item pf-m-selected"
6421
+ role="option"
6422
+ aria-selected="true"
6423
+ >
6424
+ Stopped
6425
+ <span class="pf-c-select__menu-item-icon">
6426
+ <i class="fas fa-check" aria-hidden="true"></i>
6427
+ </span>
6428
+ </button>
6429
+ </li>
6430
+ <li role="presentation">
6431
+ <button
6432
+ class="pf-c-select__menu-item"
6433
+ role="option"
6434
+ >Down</button>
6435
+ </li>
6436
+ <li role="presentation">
6437
+ <button
6438
+ class="pf-c-select__menu-item"
6439
+ role="option"
6440
+ >Degraded</button>
6441
+ </li>
6442
+ <li role="presentation">
6443
+ <button
6444
+ class="pf-c-select__menu-item"
6445
+ role="option"
6446
+ >Needs maintenance</button>
6447
+ </li>
6448
+ </ul>
6449
+ </div>
6418
6450
  </div>
6419
- <div class="pf-c-text-input-group">
6420
- <div class="pf-c-text-input-group__main pf-m-icon">
6421
- <span class="pf-c-text-input-group__text">
6422
- <span class="pf-c-text-input-group__icon">
6423
- <i class="fas fa-fw fa-search"></i>
6451
+ <div class="pf-c-input-group__item">
6452
+ <div class="pf-c-text-input-group" style="width: auto">
6453
+ <div class="pf-c-text-input-group__main pf-m-icon">
6454
+ <span class="pf-c-text-input-group__text">
6455
+ <span class="pf-c-text-input-group__icon">
6456
+ <i class="fas fa-fw fa-search"></i>
6457
+ </span>
6458
+ <input
6459
+ class="pf-c-text-input-group__text-input"
6460
+ type="search"
6461
+ placeholder="Filter by name"
6462
+ value
6463
+ aria-label="Type to filter"
6464
+ />
6424
6465
  </span>
6425
- <input
6426
- class="pf-c-text-input-group__text-input"
6427
- type="text"
6428
- value
6429
- placeholder="Filter by name"
6430
- aria-label="Type to filter"
6431
- />
6432
- </span>
6466
+ </div>
6433
6467
  </div>
6434
6468
  </div>
6435
6469
  </div>
@@ -6677,9 +6711,10 @@ wrapperTag: div
6677
6711
  </div>
6678
6712
  </div>
6679
6713
  <div class="pf-c-card__title">
6680
- <p
6714
+ <h2
6715
+ class="pf-c-card__title-text"
6681
6716
  id="primary-detail-card-view-expanded-example-drawer-card-1-check-label"
6682
- >Patternfly</p>
6717
+ >Patternfly</h2>
6683
6718
  <div class="pf-c-content">
6684
6719
  <small>Provided by Red Hat</small>
6685
6720
  </div>
@@ -6759,9 +6794,10 @@ wrapperTag: div
6759
6794
  </div>
6760
6795
  </div>
6761
6796
  <div class="pf-c-card__title">
6762
- <p
6797
+ <h2
6798
+ class="pf-c-card__title-text"
6763
6799
  id="primary-detail-card-view-expanded-example-drawer-card-2-check-label"
6764
- >ActiveMQ</p>
6800
+ >ActiveQ</h2>
6765
6801
  <div class="pf-c-content">
6766
6802
  <small>Provided by Red Hat</small>
6767
6803
  </div>
@@ -6841,9 +6877,10 @@ wrapperTag: div
6841
6877
  </div>
6842
6878
  </div>
6843
6879
  <div class="pf-c-card__title">
6844
- <p
6880
+ <h2
6881
+ class="pf-c-card__title-text"
6845
6882
  id="primary-detail-card-view-expanded-example-drawer-card-3-check-label"
6846
- >Apache Spark</p>
6883
+ >Apache Spark</h2>
6847
6884
  <div class="pf-c-content">
6848
6885
  <small>Provided by Red Hat</small>
6849
6886
  </div>
@@ -6923,9 +6960,10 @@ wrapperTag: div
6923
6960
  </div>
6924
6961
  </div>
6925
6962
  <div class="pf-c-card__title">
6926
- <p
6963
+ <h2
6964
+ class="pf-c-card__title-text"
6927
6965
  id="primary-detail-card-view-expanded-example-drawer-card-4-check-label"
6928
- >Avro</p>
6966
+ >Avro</h2>
6929
6967
  <div class="pf-c-content">
6930
6968
  <small>Provided by Red Hat</small>
6931
6969
  </div>
@@ -7005,9 +7043,10 @@ wrapperTag: div
7005
7043
  </div>
7006
7044
  </div>
7007
7045
  <div class="pf-c-card__title">
7008
- <p
7046
+ <h2
7047
+ class="pf-c-card__title-text"
7009
7048
  id="primary-detail-card-view-expanded-example-drawer-card-5-check-label"
7010
- >Azure Services</p>
7049
+ >Azure Services</h2>
7011
7050
  <div class="pf-c-content">
7012
7051
  <small>Provided by Red Hat</small>
7013
7052
  </div>
@@ -7087,9 +7126,10 @@ wrapperTag: div
7087
7126
  </div>
7088
7127
  </div>
7089
7128
  <div class="pf-c-card__title">
7090
- <p
7129
+ <h2
7130
+ class="pf-c-card__title-text"
7091
7131
  id="primary-detail-card-view-expanded-example-drawer-card-6-check-label"
7092
- >Crypto</p>
7132
+ >Crypto</h2>
7093
7133
  <div class="pf-c-content">
7094
7134
  <small>Provided by Red Hat</small>
7095
7135
  </div>
@@ -7168,9 +7208,10 @@ wrapperTag: div
7168
7208
  </div>
7169
7209
  </div>
7170
7210
  <div class="pf-c-card__title">
7171
- <p
7211
+ <h2
7212
+ class="pf-c-card__title-text"
7172
7213
  id="primary-detail-card-view-expanded-example-drawer-card-7-check-label"
7173
- >Patternfly</p>
7214
+ >Patternfly</h2>
7174
7215
  <div class="pf-c-content">
7175
7216
  <small>Provided by Red Hat</small>
7176
7217
  </div>
@@ -7249,9 +7290,10 @@ wrapperTag: div
7249
7290
  </div>
7250
7291
  </div>
7251
7292
  <div class="pf-c-card__title">
7252
- <p
7293
+ <h2
7294
+ class="pf-c-card__title-text"
7253
7295
  id="primary-detail-card-view-expanded-example-drawer-card-8-check-label"
7254
- >Patternfly</p>
7296
+ >Patternfly</h2>
7255
7297
  <div class="pf-c-content">
7256
7298
  <small>Provided by Red Hat</small>
7257
7299
  </div>
@@ -7330,9 +7372,10 @@ wrapperTag: div
7330
7372
  </div>
7331
7373
  </div>
7332
7374
  <div class="pf-c-card__title">
7333
- <p
7375
+ <h2
7376
+ class="pf-c-card__title-text"
7334
7377
  id="primary-detail-card-view-expanded-example-drawer-card-9-check-label"
7335
- >Patternfly</p>
7378
+ >Patternfly</h2>
7336
7379
  <div class="pf-c-content">
7337
7380
  <small>Provided by Red Hat</small>
7338
7381
  </div>
@@ -7411,9 +7454,10 @@ wrapperTag: div
7411
7454
  </div>
7412
7455
  </div>
7413
7456
  <div class="pf-c-card__title">
7414
- <p
7457
+ <h2
7458
+ class="pf-c-card__title-text"
7415
7459
  id="primary-detail-card-view-expanded-example-drawer-card-10-check-label"
7416
- >Patternfly</p>
7460
+ >Patternfly</h2>
7417
7461
  <div class="pf-c-content">
7418
7462
  <small>Provided by Red Hat</small>
7419
7463
  </div>
@@ -7615,7 +7659,7 @@ wrapperTag: div
7615
7659
  </div>
7616
7660
  <section class="pf-c-app-launcher__group">
7617
7661
  <h1 class="pf-c-app-launcher__group-title">Favorites</h1>
7618
- <ul>
7662
+ <ul role="list">
7619
7663
  <li
7620
7664
  class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
7621
7665
  >
@@ -7667,7 +7711,7 @@ wrapperTag: div
7667
7711
  <hr class="pf-c-divider" />
7668
7712
  <section class="pf-c-app-launcher__group">
7669
7713
  <h1 class="pf-c-app-launcher__group-title">Group 1</h1>
7670
- <ul>
7714
+ <ul role="list">
7671
7715
  <li
7672
7716
  class="pf-c-app-launcher__menu-wrapper pf-m-external"
7673
7717
  >
@@ -8322,7 +8366,7 @@ wrapperTag: div
8322
8366
  id="primary-detail-card-simple-list-on-mobile-example-primary-nav"
8323
8367
  aria-label="Global"
8324
8368
  >
8325
- <ul class="pf-c-nav__list">
8369
+ <ul class="pf-c-nav__list" role="list">
8326
8370
  <li class="pf-c-nav__item">
8327
8371
  <a href="#" class="pf-c-nav__link">System panel</a>
8328
8372
  </li>
@@ -8354,7 +8398,7 @@ wrapperTag: div
8354
8398
  <section class="pf-c-page__main-breadcrumb pf-m-limit-width">
8355
8399
  <div class="pf-c-page__main-body">
8356
8400
  <nav class="pf-c-breadcrumb" aria-label="breadcrumb">
8357
- <ol class="pf-c-breadcrumb__list">
8401
+ <ol class="pf-c-breadcrumb__list" role="list">
8358
8402
  <li class="pf-c-breadcrumb__item">
8359
8403
  <a href="#" class="pf-c-breadcrumb__link">Section home</a>
8360
8404
  </li>
@@ -8406,7 +8450,7 @@ wrapperTag: div
8406
8450
  <div class="pf-c-simple-list">
8407
8451
  <section class="pf-c-simple-list__section">
8408
8452
  <h2 class="pf-c-simple-list__title">Section title</h2>
8409
- <ul class="pf-c-simple-list__list">
8453
+ <ul class="pf-c-simple-list__list" role="list">
8410
8454
  <li class="pf-c-simple-list__item">
8411
8455
  <button
8412
8456
  class="pf-c-simple-list__item-link pf-m-current"
@@ -8435,7 +8479,7 @@ wrapperTag: div
8435
8479
  </section>
8436
8480
  <section class="pf-c-simple-list__section">
8437
8481
  <h2 class="pf-c-simple-list__title">Section title</h2>
8438
- <ul class="pf-c-simple-list__list">
8482
+ <ul class="pf-c-simple-list__list" role="list">
8439
8483
  <li class="pf-c-simple-list__item">
8440
8484
  <button
8441
8485
  class="pf-c-simple-list__item-link"
@@ -8676,7 +8720,7 @@ wrapperTag: div
8676
8720
  </div>
8677
8721
  <section class="pf-c-app-launcher__group">
8678
8722
  <h1 class="pf-c-app-launcher__group-title">Favorites</h1>
8679
- <ul>
8723
+ <ul role="list">
8680
8724
  <li
8681
8725
  class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
8682
8726
  >
@@ -8728,7 +8772,7 @@ wrapperTag: div
8728
8772
  <hr class="pf-c-divider" />
8729
8773
  <section class="pf-c-app-launcher__group">
8730
8774
  <h1 class="pf-c-app-launcher__group-title">Group 1</h1>
8731
- <ul>
8775
+ <ul role="list">
8732
8776
  <li
8733
8777
  class="pf-c-app-launcher__menu-wrapper pf-m-external"
8734
8778
  >
@@ -9383,7 +9427,7 @@ wrapperTag: div
9383
9427
  id="primary-detail-card-data-list-example-primary-nav"
9384
9428
  aria-label="Global"
9385
9429
  >
9386
- <ul class="pf-c-nav__list">
9430
+ <ul class="pf-c-nav__list" role="list">
9387
9431
  <li class="pf-c-nav__item">
9388
9432
  <a href="#" class="pf-c-nav__link">System panel</a>
9389
9433
  </li>
@@ -9415,7 +9459,7 @@ wrapperTag: div
9415
9459
  <section class="pf-c-page__main-breadcrumb pf-m-limit-width">
9416
9460
  <div class="pf-c-page__main-body">
9417
9461
  <nav class="pf-c-breadcrumb" aria-label="breadcrumb">
9418
- <ol class="pf-c-breadcrumb__list">
9462
+ <ol class="pf-c-breadcrumb__list" role="list">
9419
9463
  <li class="pf-c-breadcrumb__item">
9420
9464
  <a href="#" class="pf-c-breadcrumb__link">Section home</a>
9421
9465
  </li>
@@ -9611,9 +9655,8 @@ wrapperTag: div
9611
9655
  id="primary-detail-card-data-list-example-drawer-card-data-list"
9612
9656
  >
9613
9657
  <li
9614
- class="pf-c-data-list__item pf-m-selectable"
9658
+ class="pf-c-data-list__item"
9615
9659
  aria-labelledby="primary-detail-card-data-list-example-drawer-card-data-list-item-1"
9616
- tabindex="0"
9617
9660
  >
9618
9661
  <div class="pf-c-data-list__item-row">
9619
9662
  <div class="pf-c-data-list__item-content">
@@ -9628,9 +9671,8 @@ wrapperTag: div
9628
9671
  </li>
9629
9672
 
9630
9673
  <li
9631
- class="pf-c-data-list__item pf-m-selectable pf-m-selected"
9674
+ class="pf-c-data-list__item pf-m-selected"
9632
9675
  aria-labelledby="primary-detail-card-data-list-example-drawer-card-data-list-item-2"
9633
- tabindex="0"
9634
9676
  >
9635
9677
  <div class="pf-c-data-list__item-row">
9636
9678
  <div class="pf-c-data-list__item-content">
@@ -9645,9 +9687,8 @@ wrapperTag: div
9645
9687
  </li>
9646
9688
 
9647
9689
  <li
9648
- class="pf-c-data-list__item pf-m-selectable"
9690
+ class="pf-c-data-list__item"
9649
9691
  aria-labelledby="primary-detail-card-data-list-example-drawer-card-data-list-item-3"
9650
- tabindex="0"
9651
9692
  >
9652
9693
  <div class="pf-c-data-list__item-row">
9653
9694
  <div class="pf-c-data-list__item-content">
@@ -9662,9 +9703,8 @@ wrapperTag: div
9662
9703
  </li>
9663
9704
 
9664
9705
  <li
9665
- class="pf-c-data-list__item pf-m-selectable"
9706
+ class="pf-c-data-list__item"
9666
9707
  aria-labelledby="primary-detail-card-data-list-example-drawer-card-data-list-item-4"
9667
- tabindex="0"
9668
9708
  >
9669
9709
  <div class="pf-c-data-list__item-row">
9670
9710
  <div class="pf-c-data-list__item-content">
@@ -9679,9 +9719,8 @@ wrapperTag: div
9679
9719
  </li>
9680
9720
 
9681
9721
  <li
9682
- class="pf-c-data-list__item pf-m-selectable"
9722
+ class="pf-c-data-list__item"
9683
9723
  aria-labelledby="primary-detail-card-data-list-example-drawer-card-data-list-item-5"
9684
- tabindex="0"
9685
9724
  >
9686
9725
  <div class="pf-c-data-list__item-row">
9687
9726
  <div class="pf-c-data-list__item-content">
@@ -9696,9 +9735,8 @@ wrapperTag: div
9696
9735
  </li>
9697
9736
 
9698
9737
  <li
9699
- class="pf-c-data-list__item pf-m-selectable"
9738
+ class="pf-c-data-list__item"
9700
9739
  aria-labelledby="primary-detail-card-data-list-example-drawer-card-data-list-item-6"
9701
- tabindex="0"
9702
9740
  >
9703
9741
  <div class="pf-c-data-list__item-row">
9704
9742
  <div class="pf-c-data-list__item-content">
@@ -9713,9 +9751,8 @@ wrapperTag: div
9713
9751
  </li>
9714
9752
 
9715
9753
  <li
9716
- class="pf-c-data-list__item pf-m-selectable"
9754
+ class="pf-c-data-list__item"
9717
9755
  aria-labelledby="primary-detail-card-data-list-example-drawer-card-data-list-item-7"
9718
- tabindex="0"
9719
9756
  >
9720
9757
  <div class="pf-c-data-list__item-row">
9721
9758
  <div class="pf-c-data-list__item-content">
@@ -9730,9 +9767,8 @@ wrapperTag: div
9730
9767
  </li>
9731
9768
 
9732
9769
  <li
9733
- class="pf-c-data-list__item pf-m-selectable"
9770
+ class="pf-c-data-list__item"
9734
9771
  aria-labelledby="primary-detail-card-data-list-example-drawer-card-data-list-item-8"
9735
- tabindex="0"
9736
9772
  >
9737
9773
  <div class="pf-c-data-list__item-row">
9738
9774
  <div class="pf-c-data-list__item-content">
@@ -9747,9 +9783,8 @@ wrapperTag: div
9747
9783
  </li>
9748
9784
 
9749
9785
  <li
9750
- class="pf-c-data-list__item pf-m-selectable"
9786
+ class="pf-c-data-list__item"
9751
9787
  aria-labelledby="primary-detail-card-data-list-example-drawer-card-data-list-item-9"
9752
- tabindex="0"
9753
9788
  >
9754
9789
  <div class="pf-c-data-list__item-row">
9755
9790
  <div class="pf-c-data-list__item-content">
@@ -9764,9 +9799,8 @@ wrapperTag: div
9764
9799
  </li>
9765
9800
 
9766
9801
  <li
9767
- class="pf-c-data-list__item pf-m-selectable"
9802
+ class="pf-c-data-list__item"
9768
9803
  aria-labelledby="primary-detail-card-data-list-example-drawer-card-data-list-item-10"
9769
- tabindex="0"
9770
9804
  >
9771
9805
  <div class="pf-c-data-list__item-row">
9772
9806
  <div class="pf-c-data-list__item-content">
@@ -9981,7 +10015,7 @@ wrapperTag: div
9981
10015
  </div>
9982
10016
  <section class="pf-c-app-launcher__group">
9983
10017
  <h1 class="pf-c-app-launcher__group-title">Favorites</h1>
9984
- <ul>
10018
+ <ul role="list">
9985
10019
  <li
9986
10020
  class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
9987
10021
  >
@@ -10033,7 +10067,7 @@ wrapperTag: div
10033
10067
  <hr class="pf-c-divider" />
10034
10068
  <section class="pf-c-app-launcher__group">
10035
10069
  <h1 class="pf-c-app-launcher__group-title">Group 1</h1>
10036
- <ul>
10070
+ <ul role="list">
10037
10071
  <li
10038
10072
  class="pf-c-app-launcher__menu-wrapper pf-m-external"
10039
10073
  >
@@ -10688,7 +10722,7 @@ wrapperTag: div
10688
10722
  id="primary-detail-inline-modifier-example-primary-nav"
10689
10723
  aria-label="Global"
10690
10724
  >
10691
- <ul class="pf-c-nav__list">
10725
+ <ul class="pf-c-nav__list" role="list">
10692
10726
  <li class="pf-c-nav__item">
10693
10727
  <a href="#" class="pf-c-nav__link">System panel</a>
10694
10728
  </li>
@@ -10720,7 +10754,7 @@ wrapperTag: div
10720
10754
  <section class="pf-c-page__main-breadcrumb pf-m-limit-width">
10721
10755
  <div class="pf-c-page__main-body">
10722
10756
  <nav class="pf-c-breadcrumb" aria-label="breadcrumb">
10723
- <ol class="pf-c-breadcrumb__list">
10757
+ <ol class="pf-c-breadcrumb__list" role="list">
10724
10758
  <li class="pf-c-breadcrumb__item">
10725
10759
  <a href="#" class="pf-c-breadcrumb__link">Section home</a>
10726
10760
  </li>