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

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 (340) hide show
  1. package/RELEASE-NOTES.md +18 -1
  2. package/assets/icons/iconUnicodes.json +1 -0
  3. package/assets/images/pfbg-icon.svg +1 -0
  4. package/assets/pficon/pficon.scss +7 -2
  5. package/assets/pficon/pficon.woff2 +0 -0
  6. package/base/_base.scss +0 -18
  7. package/base/_chart-globals.scss +0 -4
  8. package/base/_common.scss +0 -22
  9. package/base/_fa-icons.scss +1 -2
  10. package/base/_fonts.scss +22 -27
  11. package/base/_globals.scss +92 -86
  12. package/base/_icons.scss +1 -28
  13. package/base/_svg-icons.scss +6 -0
  14. package/base/_variables.scss +4 -4
  15. package/base/patternfly-common.css +0 -10
  16. package/base/patternfly-fa-icons.css +1 -1
  17. package/base/patternfly-fonts.css +17 -17
  18. package/base/patternfly-globals.css +35 -41
  19. package/base/patternfly-icons.css +8 -22
  20. package/base/patternfly-pf-icons.css +6 -2
  21. package/base/patternfly-themes.css +0 -42
  22. package/base/patternfly-variables.css +3 -3
  23. package/base/themes/dark/_globals.scss +1 -1
  24. package/base/themes/dark/_variables.scss +1 -1
  25. package/components/AboutModalBox/about-modal-box.css +20 -50
  26. package/components/AboutModalBox/about-modal-box.scss +22 -14
  27. package/components/Accordion/accordion.css +2 -0
  28. package/components/Accordion/accordion.scss +2 -0
  29. package/components/Alert/alert.css +17 -8
  30. package/components/Alert/alert.scss +21 -7
  31. package/components/Alert/themes/dark/alert.scss +1 -1
  32. package/components/AppLauncher/app-launcher.css +2 -0
  33. package/components/AppLauncher/app-launcher.scss +2 -0
  34. package/components/Avatar/avatar.scss +2 -2
  35. package/components/BackgroundImage/background-image.css +8 -35
  36. package/components/BackgroundImage/background-image.scss +17 -43
  37. package/components/Banner/banner.css +14 -52
  38. package/components/Banner/banner.scss +9 -13
  39. package/components/Breadcrumb/breadcrumb.css +2 -0
  40. package/components/Breadcrumb/breadcrumb.scss +2 -0
  41. package/components/CalendarMonth/calendar-month.css +2 -2
  42. package/components/CalendarMonth/calendar-month.scss +3 -3
  43. package/components/Card/card.css +115 -50
  44. package/components/Card/card.scss +164 -63
  45. package/components/Chip/chip.css +33 -24
  46. package/components/Chip/chip.scss +40 -31
  47. package/components/ChipGroup/chip-group.css +27 -17
  48. package/components/ChipGroup/chip-group.scss +36 -22
  49. package/components/Content/content.css +11 -5
  50. package/components/Content/content.scss +17 -9
  51. package/components/ContextSelector/context-selector.css +13 -6
  52. package/components/ContextSelector/context-selector.scss +14 -7
  53. package/components/DataList/data-list-grid.css +7 -7
  54. package/components/DataList/data-list-grid.scss +1 -1
  55. package/components/DataList/data-list.css +46 -40
  56. package/components/DataList/data-list.scss +37 -28
  57. package/components/DatePicker/date-picker.css +0 -8
  58. package/components/DatePicker/date-picker.scss +0 -9
  59. package/components/DescriptionList/description-list.css +7 -7
  60. package/components/DescriptionList/description-list.scss +7 -7
  61. package/components/Divider/divider.css +2 -2
  62. package/components/Divider/divider.scss +3 -3
  63. package/components/Drawer/drawer.css +15 -16
  64. package/components/Drawer/drawer.scss +2 -3
  65. package/components/Dropdown/dropdown.css +26 -25
  66. package/components/Dropdown/dropdown.scss +17 -18
  67. package/components/DualListSelector/dual-list-selector.css +1 -1
  68. package/components/DualListSelector/dual-list-selector.scss +1 -1
  69. package/components/EmptyState/empty-state.css +46 -52
  70. package/components/EmptyState/empty-state.scss +58 -57
  71. package/components/ExpandableSection/expandable-section.css +2 -0
  72. package/components/ExpandableSection/expandable-section.scss +2 -0
  73. package/components/Form/form.css +14 -12
  74. package/components/Form/form.scss +9 -7
  75. package/components/FormControl/form-control.css +2 -5
  76. package/components/FormControl/themes/dark/form-control.scss +2 -6
  77. package/components/HelperText/helper-text.css +4 -0
  78. package/components/HelperText/helper-text.scss +5 -0
  79. package/components/Hint/hint.css +2 -2
  80. package/components/Hint/hint.scss +2 -2
  81. package/components/Icon/icon.css +3 -3
  82. package/components/Icon/icon.scss +3 -3
  83. package/components/InputGroup/input-group.css +61 -85
  84. package/components/InputGroup/input-group.scss +55 -61
  85. package/components/InputGroup/themes/dark/input-group.scss +11 -25
  86. package/components/Label/label.css +49 -36
  87. package/components/Label/label.scss +53 -38
  88. package/components/Label/themes/dark/label.scss +2 -2
  89. package/components/LabelGroup/label-group.css +26 -22
  90. package/components/LabelGroup/label-group.scss +31 -26
  91. package/components/LogViewer/log-viewer.css +0 -38
  92. package/components/Login/login.css +20 -60
  93. package/components/Login/login.scss +16 -18
  94. package/components/Login/themes/dark/login.scss +4 -0
  95. package/components/Masthead/masthead.css +4 -42
  96. package/components/Masthead/masthead.scss +4 -4
  97. package/components/Menu/menu.css +9 -6
  98. package/components/Menu/menu.scss +34 -31
  99. package/components/MenuToggle/menu-toggle.css +3 -1
  100. package/components/MenuToggle/menu-toggle.scss +3 -1
  101. package/components/ModalBox/modal-box.css +12 -11
  102. package/components/ModalBox/modal-box.scss +14 -14
  103. package/components/MultipleFileUpload/multiple-file-upload.css +6 -6
  104. package/components/MultipleFileUpload/multiple-file-upload.scss +6 -6
  105. package/components/Nav/nav.css +1 -1
  106. package/components/Nav/nav.scss +2 -2
  107. package/components/NotificationDrawer/notification-drawer.css +8 -8
  108. package/components/NotificationDrawer/notification-drawer.scss +8 -8
  109. package/components/OptionsMenu/options-menu.css +8 -10
  110. package/components/OptionsMenu/options-menu.scss +9 -11
  111. package/components/Page/page.css +101 -122
  112. package/components/Page/page.scss +49 -21
  113. package/components/Pagination/pagination.css +2 -110
  114. package/components/Pagination/pagination.scss +0 -6
  115. package/components/Popover/popover.css +31 -37
  116. package/components/Popover/popover.scss +32 -37
  117. package/components/Popover/themes/dark/popover.scss +3 -9
  118. package/components/Progress/progress.css +13 -10
  119. package/components/Progress/progress.scss +13 -10
  120. package/components/ProgressStepper/progress-stepper.css +5 -5
  121. package/components/ProgressStepper/progress-stepper.scss +5 -5
  122. package/components/SearchInput/search-input.css +4 -2
  123. package/components/SearchInput/search-input.scss +4 -2
  124. package/components/Select/select.css +1 -1
  125. package/components/Select/select.scss +1 -1
  126. package/components/Sidebar/sidebar.css +69 -26
  127. package/components/Sidebar/sidebar.scss +84 -27
  128. package/components/SimpleList/simple-list.css +1 -1
  129. package/components/SimpleList/simple-list.scss +2 -2
  130. package/components/Spinner/spinner.css +4 -4
  131. package/components/Spinner/spinner.scss +4 -4
  132. package/components/Table/table-grid.css +28 -28
  133. package/components/Table/table-scrollable.css +31 -26
  134. package/components/Table/table-scrollable.scss +33 -28
  135. package/components/Table/table-tree-view.css +14 -4
  136. package/components/Table/table-tree-view.scss +15 -0
  137. package/components/Table/table.css +67 -65
  138. package/components/Table/table.scss +65 -62
  139. package/components/Tabs/tabs.css +0 -4
  140. package/components/Tabs/tabs.scss +0 -7
  141. package/components/TextInputGroup/text-input-group.css +6 -4
  142. package/components/TextInputGroup/text-input-group.scss +6 -5
  143. package/components/Tile/tile.css +1 -1
  144. package/components/Tile/tile.scss +1 -1
  145. package/components/Timestamp/timestamp.css +3 -3
  146. package/components/Timestamp/timestamp.scss +3 -3
  147. package/components/Toolbar/toolbar.css +78 -43
  148. package/components/Toolbar/toolbar.scss +50 -10
  149. package/components/Tooltip/themes/dark/tooltip.scss +1 -11
  150. package/components/Tooltip/tooltip.css +7 -12
  151. package/components/Tooltip/tooltip.scss +6 -3
  152. package/components/TreeView/tree-view.css +7 -15
  153. package/components/TreeView/tree-view.scss +7 -18
  154. package/components/Wizard/wizard.css +16 -39
  155. package/components/Wizard/wizard.scss +20 -2
  156. package/docs/components/AboutModalBox/examples/AboutModalBox.md +20 -14
  157. package/docs/components/Accordion/examples/Accordion.md +12 -12
  158. package/docs/components/ActionList/examples/ActionList.md +6 -6
  159. package/docs/components/Alert/examples/Alert.md +29 -29
  160. package/docs/components/AlertGroup/examples/AlertGroup.md +15 -15
  161. package/docs/components/AppLauncher/examples/application-launcher.md +52 -46
  162. package/docs/components/Avatar/examples/Avatar.md +11 -11
  163. package/docs/components/BackToTop/examples/BackToTop.md +4 -4
  164. package/docs/components/Backdrop/examples/Backdrop.md +4 -4
  165. package/docs/components/BackgroundImage/examples/BackgroundImage.md +13 -29
  166. package/docs/components/Badge/examples/Badge.md +5 -5
  167. package/docs/components/Banner/examples/Banner.md +8 -8
  168. package/docs/components/Brand/examples/Brand.md +9 -9
  169. package/docs/components/Breadcrumb/examples/Breadcrumb.md +20 -20
  170. package/docs/components/Button/examples/Button.md +35 -35
  171. package/docs/components/CalendarMonth/examples/CalendarMonth.md +301 -284
  172. package/docs/components/Card/examples/Card.md +676 -116
  173. package/docs/components/Check/examples/Check.md +16 -19
  174. package/docs/components/Chip/examples/Chip.md +70 -52
  175. package/docs/components/ChipGroup/examples/ChipGroup.md +452 -673
  176. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +22 -22
  177. package/docs/components/CodeBlock/examples/CodeBlock.md +9 -9
  178. package/docs/components/CodeEditor/examples/CodeEditor.md +54 -35
  179. package/docs/components/Content/examples/Content.md +37 -9
  180. package/docs/components/ContextSelector/examples/context-selector.css +5 -1
  181. package/docs/components/ContextSelector/examples/context-selector.md +87 -80
  182. package/docs/components/DataList/examples/DataList.md +239 -202
  183. package/docs/components/DatePicker/examples/DatePicker.md +139 -104
  184. package/docs/components/DescriptionList/examples/DescriptionList.md +24 -24
  185. package/docs/components/Divider/examples/Divider.md +10 -10
  186. package/docs/components/DragDrop/examples/DragDrop.md +5 -5
  187. package/docs/components/Drawer/examples/Drawer.md +43 -43
  188. package/docs/components/Dropdown/examples/Dropdown.css +5 -2
  189. package/docs/components/Dropdown/examples/Dropdown.md +125 -100
  190. package/docs/components/DualListSelector/examples/DualListSelector.md +201 -197
  191. package/docs/components/EmptyState/examples/EmptyState.md +130 -82
  192. package/docs/components/ExpandableSection/examples/ExpandableSection.md +23 -23
  193. package/docs/components/FileUpload/examples/FileUpload.md +146 -105
  194. package/docs/components/Form/examples/Form.md +152 -130
  195. package/docs/components/FormControl/examples/FormControl.md +21 -20
  196. package/docs/components/HelperText/examples/HelperText.md +24 -35
  197. package/docs/components/Hint/examples/Hint.md +7 -7
  198. package/docs/components/Icon/examples/Icon.md +11 -12
  199. package/docs/components/InlineEdit/examples/InlineEdit.md +29 -27
  200. package/docs/components/InputGroup/examples/InputGroup.md +229 -179
  201. package/docs/components/JumpLinks/examples/JumpLinks.md +35 -35
  202. package/docs/components/Label/examples/Label.md +1427 -746
  203. package/docs/components/LabelGroup/examples/LabelGroup.md +295 -242
  204. package/docs/components/List/examples/List.md +18 -18
  205. package/docs/components/LogViewer/examples/LogViewer.md +79 -74
  206. package/docs/components/Login/examples/Login.md +103 -181
  207. package/docs/components/Masthead/examples/masthead.md +9 -9
  208. package/docs/components/Menu/examples/Menu.md +83 -80
  209. package/docs/components/MenuToggle/examples/MenuToggle.md +29 -28
  210. package/docs/components/ModalBox/examples/ModalBox.md +113 -92
  211. package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +27 -26
  212. package/docs/components/Nav/examples/Navigation.md +69 -69
  213. package/docs/components/NotificationBadge/examples/NotificationBadge.md +8 -8
  214. package/docs/components/NotificationDrawer/examples/NotificationDrawer.md +64 -64
  215. package/docs/components/NumberInput/examples/NumberInput.md +311 -239
  216. package/docs/components/OptionsMenu/examples/options-menu.md +28 -28
  217. package/docs/components/OverflowMenu/examples/overflow-menu.md +25 -25
  218. package/docs/components/Page/examples/Page.css +7 -1
  219. package/docs/components/Page/examples/Page.md +81 -54
  220. package/docs/components/Pagination/examples/Pagination.md +27 -27
  221. package/docs/components/Panel/examples/Panel.md +10 -10
  222. package/docs/components/Popover/examples/Popover.md +206 -149
  223. package/docs/components/Progress/examples/Progress.md +32 -61
  224. package/docs/components/ProgressStepper/examples/ProgressStepper.md +45 -39
  225. package/docs/components/Radio/examples/Radio.md +12 -11
  226. package/docs/components/SearchInput/examples/SearchInput.md +185 -148
  227. package/docs/components/Select/examples/Select.md +368 -313
  228. package/docs/components/Sidebar/examples/Sidebar.md +70 -14
  229. package/docs/components/SimpleList/examples/SimpleList.md +15 -15
  230. package/docs/components/Skeleton/examples/Skeleton.md +8 -8
  231. package/docs/components/SkipToContent/examples/SkipToContent.md +5 -5
  232. package/docs/components/Slider/examples/Slider.md +84 -62
  233. package/docs/components/Spinner/examples/Spinner.md +24 -24
  234. package/docs/components/Switch/examples/Switch.md +19 -19
  235. package/docs/components/TabContent/examples/TabContent.md +13 -13
  236. package/docs/components/Table/examples/Table.css +4 -0
  237. package/docs/components/Table/examples/Table.md +5212 -5750
  238. package/docs/components/Tabs/examples/Tabs.md +155 -155
  239. package/docs/components/TextInputGroup/examples/TextInputGroup.md +523 -406
  240. package/docs/components/Tile/examples/Tile.md +16 -17
  241. package/docs/components/Timestamp/examples/Timestamp.md +5 -5
  242. package/docs/components/Title/examples/Title.md +17 -17
  243. package/docs/components/ToggleGroup/examples/toggle-group.md +13 -13
  244. package/docs/components/Toolbar/examples/Toolbar.md +848 -726
  245. package/docs/components/Tooltip/examples/Tooltip.md +10 -10
  246. package/docs/components/TreeView/examples/TreeView.md +34 -34
  247. package/docs/components/Truncate/examples/Truncate.md +4 -5
  248. package/docs/components/Wizard/examples/Wizard.md +119 -127
  249. package/docs/demos/AboutModal/examples/AboutModal.md +4 -5
  250. package/docs/demos/Alert/examples/Alert.md +118 -71
  251. package/docs/demos/BackToTop/examples/BackToTop.md +4 -4
  252. package/docs/demos/Banner/examples/Banner.md +8 -9
  253. package/docs/demos/Card/examples/Card.md +216 -153
  254. package/docs/demos/CardView/examples/CardView.md +57 -30
  255. package/docs/demos/ContextSelector/examples/ContextSelector.md +18 -18
  256. package/docs/demos/Dashboard/examples/Dashboard.md +51 -33
  257. package/docs/demos/DataList/examples/DataList.md +312 -255
  258. package/docs/demos/DescriptionList/examples/DescriptionList.md +33 -22
  259. package/docs/demos/Drawer/examples/Drawer.md +24 -22
  260. package/docs/demos/Form/examples/BasicForms.md +220 -213
  261. package/docs/demos/HelperText/examples/HelperText.md +16 -14
  262. package/docs/demos/JumpLinks/examples/JumpLinks.md +28 -28
  263. package/docs/demos/Masthead/examples/Masthead.md +302 -284
  264. package/docs/demos/Modal/examples/Modal.md +54 -66
  265. package/docs/demos/Nav/examples/Nav.md +47 -47
  266. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +70 -58
  267. package/docs/demos/Page/examples/Page.md +982 -51
  268. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +22 -18
  269. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +121 -106
  270. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +345 -311
  271. package/docs/demos/Skeleton/examples/Skeleton.md +4 -4
  272. package/docs/demos/Table/examples/Table.md +3323 -1288
  273. package/docs/demos/Tabs/examples/Tabs.md +141 -90
  274. package/docs/demos/Toolbar/examples/Toolbar.md +1994 -329
  275. package/docs/demos/Wizard/examples/Wizard.md +289 -266
  276. package/docs/layouts/Bullseye/examples/Bullseye.md +4 -4
  277. package/docs/layouts/Flex/examples/Flex.md +98 -98
  278. package/docs/layouts/Gallery/examples/Gallery.md +7 -7
  279. package/docs/layouts/Grid/examples/Grid.md +9 -9
  280. package/docs/layouts/Level/examples/Level.md +5 -5
  281. package/docs/layouts/Split/examples/Split.md +7 -7
  282. package/docs/layouts/Stack/examples/Stack.md +6 -6
  283. package/docs/utilities/Accessibility/examples/Accessibility.md +5 -5
  284. package/docs/utilities/Alignment/examples/Alignment.md +7 -7
  285. package/docs/utilities/BackgroundColor/examples/BackgroundColor.md +13 -13
  286. package/docs/utilities/BoxShadow/examples/box-shadow.md +23 -23
  287. package/docs/utilities/Display/examples/Display.md +12 -12
  288. package/docs/utilities/Flex/examples/Flex.md +35 -35
  289. package/docs/utilities/Float/examples/Float.md +5 -5
  290. package/docs/utilities/Sizing/examples/Sizing.md +51 -51
  291. package/docs/utilities/Spacing/examples/Spacing.md +35 -35
  292. package/docs/utilities/Text/examples/Text.md +31 -31
  293. package/icons/{pf-icons.json → pf-icons.mjs} +2 -1
  294. package/layouts/Gallery/gallery.css +1 -1
  295. package/layouts/Gallery/gallery.scss +1 -1
  296. package/layouts/Grid/grid.css +7 -7
  297. package/layouts/Grid/grid.scss +2 -2
  298. package/package.json +59 -65
  299. package/patternfly-addons.css +48 -48
  300. package/{patternfly-base-no-reset.css → patternfly-base-no-globals.css} +28 -73
  301. package/{patternfly-base-no-reset.scss → patternfly-base-no-globals.scss} +1 -0
  302. package/patternfly-base.css +63 -114
  303. package/{patternfly-no-reset.css → patternfly-no-globals.css} +1179 -2293
  304. package/{patternfly-no-reset.scss → patternfly-no-globals.scss} +1 -0
  305. package/patternfly.css +1207 -2327
  306. package/patternfly.min.css +1 -1
  307. package/patternfly.min.css.map +1 -1
  308. package/sass-utilities/functions.scss +8 -24
  309. package/sass-utilities/mixins.scss +15 -39
  310. package/sass-utilities/placeholders.scss +0 -23
  311. package/sass-utilities/scss-variables.scss +5 -6
  312. package/sass-utilities/themes/dark/placeholders.scss +0 -22
  313. package/sass-utilities/themes/dark/scss-variables.scss +1 -1
  314. package/utilities/Spacing/spacing.scss +2 -2
  315. package/utilities/Text/text.css +48 -48
  316. package/utilities/Text/text.scss +6 -6
  317. package/utilities/Text/themes/dark/text.scss +2 -2
  318. package/assets/fonts/RedHatDisplay/RedHatDisplay-Black.woff +0 -0
  319. package/assets/fonts/RedHatDisplay/RedHatDisplay-BlackItalic.woff +0 -0
  320. package/assets/fonts/RedHatDisplay/RedHatDisplay-Bold.woff +0 -0
  321. package/assets/fonts/RedHatDisplay/RedHatDisplay-BoldItalic.woff +0 -0
  322. package/assets/fonts/RedHatDisplay/RedHatDisplay-Italic.woff +0 -0
  323. package/assets/fonts/RedHatDisplay/RedHatDisplay-Medium.woff +0 -0
  324. package/assets/fonts/RedHatDisplay/RedHatDisplay-MediumItalic.woff +0 -0
  325. package/assets/fonts/RedHatDisplay/RedHatDisplay-Regular.woff +0 -0
  326. package/assets/fonts/RedHatText/RedHatText-Bold.woff +0 -0
  327. package/assets/fonts/RedHatText/RedHatText-BoldItalic.woff +0 -0
  328. package/assets/fonts/RedHatText/RedHatText-Italic.woff +0 -0
  329. package/assets/fonts/RedHatText/RedHatText-Medium.woff +0 -0
  330. package/assets/fonts/RedHatText/RedHatText-MediumItalic.woff +0 -0
  331. package/assets/fonts/RedHatText/RedHatText-Regular.woff +0 -0
  332. package/assets/fonts/webfonts/fa-solid-900.woff +0 -0
  333. package/assets/pficon/pficon.woff +0 -0
  334. package/base/_shield-inheritable.scss +0 -69
  335. package/base/_shield-noninheritable.scss +0 -13
  336. package/base/patternfly-shield-inheritable.css +0 -66
  337. package/base/patternfly-shield-inheritable.scss +0 -4
  338. package/base/patternfly-shield-noninheritable.css +0 -9
  339. package/base/patternfly-shield-noninheritable.scss +0 -4
  340. package/sass-utilities/bs-variables.scss +0 -709
package/docs/demos/Page/examples/Page.md CHANGED
@@ -96,7 +96,7 @@ wrapperTag: div
96
96
  </div>
97
97
  <section class="pf-c-app-launcher__group">
98
98
  <h1 class="pf-c-app-launcher__group-title">Favorites</h1>
99
- <ul>
99
+ <ul role="list">
100
100
  <li
101
101
  class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
102
102
  >
@@ -148,7 +148,7 @@ wrapperTag: div
148
148
  <hr class="pf-c-divider" />
149
149
  <section class="pf-c-app-launcher__group">
150
150
  <h1 class="pf-c-app-launcher__group-title">Group 1</h1>
151
- <ul>
151
+ <ul role="list">
152
152
  <li
153
153
  class="pf-c-app-launcher__menu-wrapper pf-m-external"
154
154
  >
@@ -803,7 +803,7 @@ wrapperTag: div
803
803
  id="page-demo-basic-primary-nav"
804
804
  aria-label="Global"
805
805
  >
806
- <ul class="pf-c-nav__list">
806
+ <ul class="pf-c-nav__list" role="list">
807
807
  <li class="pf-c-nav__item">
808
808
  <a href="#" class="pf-c-nav__link">System panel</a>
809
809
  </li>
@@ -831,7 +831,7 @@ wrapperTag: div
831
831
  <section class="pf-c-page__main-breadcrumb pf-m-limit-width">
832
832
  <div class="pf-c-page__main-body">
833
833
  <nav class="pf-c-breadcrumb" aria-label="breadcrumb">
834
- <ol class="pf-c-breadcrumb__list">
834
+ <ol class="pf-c-breadcrumb__list" role="list">
835
835
  <li class="pf-c-breadcrumb__item">
836
836
  <a href="#" class="pf-c-breadcrumb__link">Section home</a>
837
837
  </li>
@@ -917,15 +917,931 @@ wrapperTag: div
917
917
 
918
918
  Using the `.pf-m-full-height` modifier class on the page component eliminates the need to ensure that the `<html>` and `<body>` tags, and any other ancestors of `.pf-c-page`, have height set to 100%.
919
919
 
920
- ```html isFullscreen isBeta
920
+ ```html isFullscreen
921
921
  <div class="pf-c-page pf-m-full-height" id="page-demo-full-height">
922
922
  <div class="pf-c-skip-to-content">
923
923
  <a
924
924
  class="pf-c-button pf-m-primary"
925
- href="#main-content-page-demo-full-height"
925
+ href="#main-content-page-demo-full-height"
926
+ >Skip to content</a>
927
+ </div>
928
+ <header class="pf-c-masthead" id="page-demo-full-height-masthead">
929
+ <span class="pf-c-masthead__toggle">
930
+ <button
931
+ class="pf-c-button pf-m-plain"
932
+ type="button"
933
+ aria-label="Global navigation"
934
+ >
935
+ <i class="fas fa-bars" aria-hidden="true"></i>
936
+ </button>
937
+ </span>
938
+ <div class="pf-c-masthead__main">
939
+ <a class="pf-c-masthead__brand" href="#">
940
+ <picture
941
+ class="pf-c-brand pf-m-picture"
942
+ style="--pf-c-brand--Width: 180px; --pf-c-brand--Width-on-md: 180px; --pf-c-brand--Width-on-2xl: 220px;"
943
+ >
944
+ <source
945
+ media="(min-width: 768px)"
946
+ srcset="/assets/images/logo__pf--reverse-on-md.svg"
947
+ />
948
+ <source srcset="/assets/images/logo__pf--reverse--base.svg" />
949
+ <img
950
+ src="/assets/images/logo__pf--reverse--base.png"
951
+ alt="Fallback patternFly default logo"
952
+ />
953
+ </picture>
954
+ </a>
955
+ </div>
956
+ <div class="pf-c-masthead__content">
957
+ <div
958
+ class="pf-c-toolbar pf-m-full-height pf-m-static"
959
+ id="page-demo-full-height-masthead-toolbar"
960
+ >
961
+ <div class="pf-c-toolbar__content">
962
+ <div class="pf-c-toolbar__content-section">
963
+ <div
964
+ class="pf-c-toolbar__group pf-m-icon-button-group pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
965
+ >
966
+ <div
967
+ class="pf-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
968
+ >
969
+ <div class="pf-c-toolbar__item">
970
+ <nav
971
+ class="pf-c-app-launcher"
972
+ aria-label="Application launcher"
973
+ id="page-demo-full-height-masthead-application-launcher"
974
+ >
975
+ <button
976
+ class="pf-c-app-launcher__toggle"
977
+ type="button"
978
+ id="page-demo-full-height-masthead-application-launcher-button"
979
+ aria-expanded="false"
980
+ aria-label="Application launcher"
981
+ >
982
+ <i class="fas fa-th" aria-hidden="true"></i>
983
+ </button>
984
+ <div
985
+ class="pf-c-app-launcher__menu pf-m-align-right"
986
+ hidden
987
+ >
988
+ <div class="pf-c-app-launcher__menu-search">
989
+ <div class="pf-c-search-input">
990
+ <div class="pf-c-search-input__bar">
991
+ <span class="pf-c-search-input__text">
992
+ <span class="pf-c-search-input__icon">
993
+ <i
994
+ class="fas fa-search fa-fw"
995
+ aria-hidden="true"
996
+ ></i>
997
+ </span>
998
+ <input
999
+ class="pf-c-search-input__text-input"
1000
+ type="text"
1001
+ placeholder="Filter by name"
1002
+ aria-label="Filter by name"
1003
+ />
1004
+ </span>
1005
+ </div>
1006
+ </div>
1007
+ </div>
1008
+ <section class="pf-c-app-launcher__group">
1009
+ <h1 class="pf-c-app-launcher__group-title">Favorites</h1>
1010
+ <ul role="list">
1011
+ <li
1012
+ class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
1013
+ >
1014
+ <a class="pf-c-app-launcher__menu-item">
1015
+ Link 1
1016
+ <span
1017
+ class="pf-c-app-launcher__menu-item-external-icon"
1018
+ >
1019
+ <i
1020
+ class="fas fa-external-link-alt"
1021
+ aria-hidden="true"
1022
+ ></i>
1023
+ </span>
1024
+ <span class="pf-screen-reader">(opens new window)</span>
1025
+ </a>
1026
+ <button
1027
+ class="pf-c-app-launcher__menu-item pf-m-action"
1028
+ type="button"
1029
+ aria-label="Favorite"
1030
+ >
1031
+ <i class="fas fa-star" aria-hidden="true"></i>
1032
+ </button>
1033
+ </li>
1034
+ <li
1035
+ class="pf-c-app-launcher__menu-wrapper pf-m-external"
1036
+ >
1037
+ <a class="pf-c-app-launcher__menu-item">
1038
+ Link 2
1039
+ <span
1040
+ class="pf-c-app-launcher__menu-item-external-icon"
1041
+ >
1042
+ <i
1043
+ class="fas fa-external-link-alt"
1044
+ aria-hidden="true"
1045
+ ></i>
1046
+ </span>
1047
+ <span class="pf-screen-reader">(opens new window)</span>
1048
+ </a>
1049
+ <button
1050
+ class="pf-c-app-launcher__menu-item pf-m-action"
1051
+ type="button"
1052
+ aria-label="Favorite"
1053
+ >
1054
+ <i class="fas fa-star" aria-hidden="true"></i>
1055
+ </button>
1056
+ </li>
1057
+ </ul>
1058
+ </section>
1059
+ <hr class="pf-c-divider" />
1060
+ <section class="pf-c-app-launcher__group">
1061
+ <h1 class="pf-c-app-launcher__group-title">Group 1</h1>
1062
+ <ul role="list">
1063
+ <li
1064
+ class="pf-c-app-launcher__menu-wrapper pf-m-external"
1065
+ >
1066
+ <a class="pf-c-app-launcher__menu-item">
1067
+ Link 1
1068
+ <span
1069
+ class="pf-c-app-launcher__menu-item-external-icon"
1070
+ >
1071
+ <i
1072
+ class="fas fa-external-link-alt"
1073
+ aria-hidden="true"
1074
+ ></i>
1075
+ </span>
1076
+ <span class="pf-screen-reader">(opens new window)</span>
1077
+ </a>
1078
+ <button
1079
+ class="pf-c-app-launcher__menu-item pf-m-action"
1080
+ type="button"
1081
+ aria-label="Favorite"
1082
+ >
1083
+ <i class="fas fa-star" aria-hidden="true"></i>
1084
+ </button>
1085
+ </li>
1086
+ <li
1087
+ class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
1088
+ >
1089
+ <a class="pf-c-app-launcher__menu-item">
1090
+ Link 2
1091
+ <span
1092
+ class="pf-c-app-launcher__menu-item-external-icon"
1093
+ >
1094
+ <i
1095
+ class="fas fa-external-link-alt"
1096
+ aria-hidden="true"
1097
+ ></i>
1098
+ </span>
1099
+ <span class="pf-screen-reader">(opens new window)</span>
1100
+ </a>
1101
+ <button
1102
+ class="pf-c-app-launcher__menu-item pf-m-action"
1103
+ type="button"
1104
+ aria-label="Favorite"
1105
+ >
1106
+ <i class="fas fa-star" aria-hidden="true"></i>
1107
+ </button>
1108
+ </li>
1109
+ </ul>
1110
+ </section>
1111
+ </div>
1112
+ </nav>
1113
+ </div>
1114
+ <div class="pf-c-toolbar__item">
1115
+ <div class="pf-c-dropdown">
1116
+ <button
1117
+ class="pf-c-dropdown__toggle pf-m-plain"
1118
+ id="page-demo-full-height-masthead-settings-button"
1119
+ aria-expanded="false"
1120
+ type="button"
1121
+ aria-label="Settings"
1122
+ >
1123
+ <i class="fas fa-cog" aria-hidden="true"></i>
1124
+ </button>
1125
+ <ul
1126
+ class="pf-c-dropdown__menu pf-m-align-right"
1127
+ aria-labelledby="page-demo-full-height-masthead-settings-button"
1128
+ hidden
1129
+ >
1130
+ <li>
1131
+ <button
1132
+ class="pf-c-dropdown__menu-item"
1133
+ type="button"
1134
+ >Settings</button>
1135
+ </li>
1136
+ <li>
1137
+ <button
1138
+ class="pf-c-dropdown__menu-item"
1139
+ type="button"
1140
+ >Use the beta release</button>
1141
+ </li>
1142
+ </ul>
1143
+ </div>
1144
+ </div>
1145
+ <div class="pf-c-toolbar__item">
1146
+ <div class="pf-c-dropdown">
1147
+ <button
1148
+ class="pf-c-dropdown__toggle pf-m-plain"
1149
+ id="page-demo-full-height-masthead-help-button"
1150
+ aria-expanded="false"
1151
+ type="button"
1152
+ aria-label="Help"
1153
+ >
1154
+ <i class="fas fa-question-circle" aria-hidden="true"></i>
1155
+ </button>
1156
+ <ul
1157
+ class="pf-c-dropdown__menu pf-m-align-right"
1158
+ aria-labelledby="page-demo-full-height-masthead-help-button"
1159
+ hidden
1160
+ >
1161
+ <li>
1162
+ <button
1163
+ class="pf-c-dropdown__menu-item"
1164
+ type="button"
1165
+ >Support options</button>
1166
+ </li>
1167
+ <li>
1168
+ <button
1169
+ class="pf-c-dropdown__menu-item"
1170
+ type="button"
1171
+ >Open support case</button>
1172
+ </li>
1173
+ <li>
1174
+ <button
1175
+ class="pf-c-dropdown__menu-item"
1176
+ type="button"
1177
+ >API documentation</button>
1178
+ </li>
1179
+ </ul>
1180
+ </div>
1181
+ </div>
1182
+ </div>
1183
+ <div class="pf-c-toolbar__item pf-m-hidden-on-lg">
1184
+ <div class="pf-c-dropdown">
1185
+ <button
1186
+ class="pf-c-menu-toggle pf-m-plain"
1187
+ type="button"
1188
+ aria-expanded="false"
1189
+ aria-label="Actions"
1190
+ >
1191
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1192
+ </button>
1193
+ <div class="pf-c-menu pf-m-drilldown pf-m-align-right" hidden>
1194
+ <div class="pf-c-menu__content">
1195
+ <section class="pf-c-menu__group pf-m-hidden-on-sm">
1196
+ <ul class="pf-c-menu__list" role="menu">
1197
+ <li
1198
+ class="pf-c-menu__list-item pf-m-disabled"
1199
+ role="none"
1200
+ >
1201
+ <button
1202
+ class="pf-c-menu__item"
1203
+ type="button"
1204
+ disabled
1205
+ role="menuitem"
1206
+ >
1207
+ <span class="pf-c-menu__item-description">
1208
+ <div class="pf-u-font-size-sm">Username:</div>
1209
+ <div class="pf-u-font-size-md">ned_username</div>
1210
+ </span>
1211
+ </button>
1212
+ </li>
1213
+ <li
1214
+ class="pf-c-menu__list-item pf-m-disabled"
1215
+ role="none"
1216
+ >
1217
+ <button
1218
+ class="pf-c-menu__item"
1219
+ type="button"
1220
+ disabled
1221
+ role="menuitem"
1222
+ >
1223
+ <span class="pf-c-menu__item-description">
1224
+ <div class="pf-u-font-size-sm">Account number:</div>
1225
+ <div class="pf-u-font-size-md">123456789</div>
1226
+ </span>
1227
+ </button>
1228
+ </li>
1229
+ <li class="pf-c-divider" role="separator"></li>
1230
+ <li class="pf-c-menu__list-item" role="none">
1231
+ <button
1232
+ class="pf-c-menu__item"
1233
+ type="button"
1234
+ role="menuitem"
1235
+ >
1236
+ <span class="pf-c-menu__item-main">
1237
+ <span class="pf-c-menu__item-text">My profile</span>
1238
+ </span>
1239
+ </button>
1240
+ </li>
1241
+ <li class="pf-c-menu__list-item" role="none">
1242
+ <button
1243
+ class="pf-c-menu__item"
1244
+ type="button"
1245
+ role="menuitem"
1246
+ >
1247
+ <span class="pf-c-menu__item-main">
1248
+ <span
1249
+ class="pf-c-menu__item-text"
1250
+ >User management</span>
1251
+ </span>
1252
+ </button>
1253
+ </li>
1254
+ <li class="pf-c-menu__list-item" role="none">
1255
+ <button
1256
+ class="pf-c-menu__item"
1257
+ type="button"
1258
+ role="menuitem"
1259
+ >
1260
+ <span class="pf-c-menu__item-main">
1261
+ <span class="pf-c-menu__item-text">Logout</span>
1262
+ </span>
1263
+ </button>
1264
+ </li>
1265
+ </ul>
1266
+ </section>
1267
+ <hr class="pf-c-divider pf-m-hidden-on-sm" />
1268
+ <section class="pf-c-menu__group">
1269
+ <ul class="pf-c-menu__list" role="menu">
1270
+ <li class="pf-c-menu__list-item" role="none">
1271
+ <button
1272
+ class="pf-c-menu__item"
1273
+ type="button"
1274
+ role="menuitem"
1275
+ aria-expanded="false"
1276
+ >
1277
+ <span class="pf-c-menu__item-main">
1278
+ <span class="pf-c-menu__item-icon">
1279
+ <i
1280
+ class="fas fa-fw fa-cog"
1281
+ aria-hidden="true"
1282
+ ></i>
1283
+ </span>
1284
+ <span class="pf-c-menu__item-text">Settings</span>
1285
+ <span class="pf-c-menu__item-toggle-icon">
1286
+ <i class="fas fa-angle-right"></i>
1287
+ </span>
1288
+ </span>
1289
+ </button>
1290
+ <div class="pf-c-menu" hidden>
1291
+ <div class="pf-c-menu__content">
1292
+ <ul class="pf-c-menu__list" role="menu">
1293
+ <li
1294
+ class="pf-c-menu__list-item pf-m-drill-up"
1295
+ role="none"
1296
+ >
1297
+ <button
1298
+ class="pf-c-menu__item"
1299
+ type="button"
1300
+ role="menuitem"
1301
+ >
1302
+ <span class="pf-c-menu__item-main">
1303
+ <span
1304
+ class="pf-c-menu__item-toggle-icon"
1305
+ >
1306
+ <i class="fas fa-angle-left"></i>
1307
+ </span>
1308
+ <span class="pf-c-menu__item-icon">
1309
+ <i
1310
+ class="fas fa-fw fa-cog"
1311
+ aria-hidden="true"
1312
+ ></i>
1313
+ </span>
1314
+ <span
1315
+ class="pf-c-menu__item-text"
1316
+ >Settings</span>
1317
+ </span>
1318
+ </button>
1319
+ </li>
1320
+ <li class="pf-c-divider" role="separator"></li>
1321
+ <li class="pf-c-menu__list-item" role="none">
1322
+ <a
1323
+ class="pf-c-menu__item"
1324
+ href="#"
1325
+ role="menuitem"
1326
+ >
1327
+ <span class="pf-c-menu__item-main">
1328
+ <span
1329
+ class="pf-c-menu__item-text"
1330
+ >Customer support</span>
1331
+ </span>
1332
+ </a>
1333
+ </li>
1334
+ <li class="pf-c-menu__list-item" role="none">
1335
+ <a
1336
+ class="pf-c-menu__item"
1337
+ href="#"
1338
+ role="menuitem"
1339
+ >
1340
+ <span class="pf-c-menu__item-main">
1341
+ <span class="pf-c-menu__item-text">About</span>
1342
+ </span>
1343
+ </a>
1344
+ </li>
1345
+ </ul>
1346
+ </div>
1347
+ </div>
1348
+ </li>
1349
+
1350
+ <li class="pf-c-menu__list-item" role="none">
1351
+ <button
1352
+ class="pf-c-menu__item"
1353
+ type="button"
1354
+ role="menuitem"
1355
+ aria-expanded="false"
1356
+ >
1357
+ <span class="pf-c-menu__item-main">
1358
+ <span class="pf-c-menu__item-icon">
1359
+ <i
1360
+ class="fas fa-fw fa-pf-icon pf-icon-help"
1361
+ aria-hidden="true"
1362
+ ></i>
1363
+ </span>
1364
+ <span class="pf-c-menu__item-text">Help</span>
1365
+ <span class="pf-c-menu__item-toggle-icon">
1366
+ <i class="fas fa-angle-right"></i>
1367
+ </span>
1368
+ </span>
1369
+ </button>
1370
+ <div class="pf-c-menu" hidden>
1371
+ <div class="pf-c-menu__content">
1372
+ <ul class="pf-c-menu__list" role="menu">
1373
+ <li
1374
+ class="pf-c-menu__list-item pf-m-drill-up"
1375
+ role="none"
1376
+ >
1377
+ <button
1378
+ class="pf-c-menu__item"
1379
+ type="button"
1380
+ role="menuitem"
1381
+ >
1382
+ <span class="pf-c-menu__item-main">
1383
+ <span
1384
+ class="pf-c-menu__item-toggle-icon"
1385
+ >
1386
+ <i class="fas fa-angle-left"></i>
1387
+ </span>
1388
+ <span class="pf-c-menu__item-icon">
1389
+ <i
1390
+ class="fas fa-fw fa-pf-icon pf-icon-help"
1391
+ aria-hidden="true"
1392
+ ></i>
1393
+ </span>
1394
+ <span class="pf-c-menu__item-text">Help</span>
1395
+ </span>
1396
+ </button>
1397
+ </li>
1398
+ <li class="pf-c-divider" role="separator"></li>
1399
+ <li class="pf-c-menu__list-item" role="none">
1400
+ <a
1401
+ class="pf-c-menu__item"
1402
+ href="#"
1403
+ role="menuitem"
1404
+ >
1405
+ <span class="pf-c-menu__item-main">
1406
+ <span
1407
+ class="pf-c-menu__item-text"
1408
+ >Support options</span>
1409
+ </span>
1410
+ </a>
1411
+ </li>
1412
+ <li class="pf-c-menu__list-item" role="none">
1413
+ <a
1414
+ class="pf-c-menu__item"
1415
+ href="#"
1416
+ role="menuitem"
1417
+ >
1418
+ <span class="pf-c-menu__item-main">
1419
+ <span
1420
+ class="pf-c-menu__item-text"
1421
+ >Open support case</span>
1422
+ </span>
1423
+ </a>
1424
+ </li>
1425
+ <li class="pf-c-menu__list-item" role="none">
1426
+ <a
1427
+ class="pf-c-menu__item"
1428
+ href="#"
1429
+ role="menuitem"
1430
+ >
1431
+ <span class="pf-c-menu__item-main">
1432
+ <span
1433
+ class="pf-c-menu__item-text"
1434
+ >API documentation</span>
1435
+ </span>
1436
+ </a>
1437
+ </li>
1438
+ </ul>
1439
+ </div>
1440
+ </div>
1441
+ </li>
1442
+
1443
+ <li class="pf-c-menu__list-item" role="none">
1444
+ <button
1445
+ class="pf-c-menu__item"
1446
+ type="button"
1447
+ role="menuitem"
1448
+ >
1449
+ <span class="pf-c-menu__item-main">
1450
+ <span class="pf-c-menu__item-icon">
1451
+ <i class="fas fa-fw fa-th" aria-hidden="true"></i>
1452
+ </span>
1453
+ <span
1454
+ class="pf-c-menu__item-text"
1455
+ >Application launcher</span>
1456
+ <span class="pf-c-menu__item-toggle-icon">
1457
+ <i class="fas fa-angle-right"></i>
1458
+ </span>
1459
+ </span>
1460
+ </button>
1461
+ <div class="pf-c-menu" hidden>
1462
+ <div class="pf-c-menu__header">
1463
+ <button
1464
+ class="pf-c-menu__item"
1465
+ type="button"
1466
+ role="menuitem"
1467
+ >
1468
+ <span class="pf-c-menu__item-main">
1469
+ <span class="pf-c-menu__item-toggle-icon">
1470
+ <i class="fas fa-angle-left"></i>
1471
+ </span>
1472
+ <span class="pf-c-menu__item-icon">
1473
+ <i
1474
+ class="fas fa-fw fa-th"
1475
+ aria-hidden="true"
1476
+ ></i>
1477
+ </span>
1478
+ <span
1479
+ class="pf-c-menu__item-text"
1480
+ >Application launcher</span>
1481
+ </span>
1482
+ </button>
1483
+ </div>
1484
+ <div class="pf-c-menu__search">
1485
+ <div class="pf-c-menu__search-input">
1486
+ <div class="pf-c-search-input">
1487
+ <div class="pf-c-search-input__bar">
1488
+ <span class="pf-c-search-input__text">
1489
+ <span class="pf-c-search-input__icon">
1490
+ <i
1491
+ class="fas fa-search fa-fw"
1492
+ aria-hidden="true"
1493
+ ></i>
1494
+ </span>
1495
+ <input
1496
+ class="pf-c-search-input__text-input"
1497
+ type="text"
1498
+ placeholder="Search"
1499
+ aria-label="Search"
1500
+ />
1501
+ </span>
1502
+ </div>
1503
+ </div>
1504
+ </div>
1505
+ </div>
1506
+ <hr class="pf-c-divider" />
1507
+ <section class="pf-c-menu__group">
1508
+ <h1 class="pf-c-menu__group-title">Favorites</h1>
1509
+ <ul class="pf-c-menu__list" role="menu">
1510
+ <li class="pf-c-menu__list-item" role="none">
1511
+ <a
1512
+ class="pf-c-menu__item"
1513
+ href="#"
1514
+ role="menuitem"
1515
+ >
1516
+ <span class="pf-c-menu__item-main">
1517
+ <span
1518
+ class="pf-c-menu__item-text"
1519
+ >Link 1</span>
1520
+ </span>
1521
+ </a>
1522
+ <button
1523
+ class="pf-c-menu__item-action pf-m-favorite pf-m-favorited"
1524
+ type="button"
1525
+ aria-label="Starred"
1526
+ >
1527
+ <span class="pf-c-menu__item-action-icon">
1528
+ <i
1529
+ class="fas fa-star"
1530
+ aria-hidden="true"
1531
+ ></i>
1532
+ </span>
1533
+ </button>
1534
+ </li>
1535
+ <li class="pf-c-menu__list-item" role="none">
1536
+ <a
1537
+ class="pf-c-menu__item"
1538
+ href="#"
1539
+ role="menuitem"
1540
+ target="_blank"
1541
+ >
1542
+ <span class="pf-c-menu__item-main">
1543
+ <span
1544
+ class="pf-c-menu__item-text"
1545
+ >Link 2</span>
1546
+ <span
1547
+ class="pf-c-menu__item-external-icon"
1548
+ >
1549
+ <i
1550
+ class="fas fa-external-link-alt"
1551
+ aria-hidden="true"
1552
+ ></i>
1553
+ </span>
1554
+ <span
1555
+ class="pf-screen-reader"
1556
+ >(opens new window)</span>
1557
+ </span>
1558
+ </a>
1559
+ <button
1560
+ class="pf-c-menu__item-action pf-m-favorite"
1561
+ type="button"
1562
+ aria-label="Not starred"
1563
+ >
1564
+ <span class="pf-c-menu__item-action-icon">
1565
+ <i
1566
+ class="fas fa-star"
1567
+ aria-hidden="true"
1568
+ ></i>
1569
+ </span>
1570
+ </button>
1571
+ </li>
1572
+ </ul>
1573
+ </section>
1574
+ <hr class="pf-c-divider" />
1575
+ <section class="pf-c-menu__group">
1576
+ <h1 class="pf-c-menu__group-title">Group 1</h1>
1577
+ <ul class="pf-c-menu__list" role="menu">
1578
+ <li class="pf-c-menu__list-item" role="none">
1579
+ <a
1580
+ class="pf-c-menu__item"
1581
+ href="#"
1582
+ role="menuitem"
1583
+ >
1584
+ <span class="pf-c-menu__item-main">
1585
+ <span
1586
+ class="pf-c-menu__item-text"
1587
+ >Link 1</span>
1588
+ </span>
1589
+ </a>
1590
+ <button
1591
+ class="pf-c-menu__item-action pf-m-favorite"
1592
+ type="button"
1593
+ aria-label="Not starred"
1594
+ >
1595
+ <span class="pf-c-menu__item-action-icon">
1596
+ <i
1597
+ class="fas fa-star"
1598
+ aria-hidden="true"
1599
+ ></i>
1600
+ </span>
1601
+ </button>
1602
+ </li>
1603
+ <li class="pf-c-menu__list-item" role="none">
1604
+ <a
1605
+ class="pf-c-menu__item"
1606
+ href="#"
1607
+ role="menuitem"
1608
+ target="_blank"
1609
+ >
1610
+ <span class="pf-c-menu__item-main">
1611
+ <span
1612
+ class="pf-c-menu__item-text"
1613
+ >Link 2</span>
1614
+ <span
1615
+ class="pf-c-menu__item-external-icon"
1616
+ >
1617
+ <i
1618
+ class="fas fa-external-link-alt"
1619
+ aria-hidden="true"
1620
+ ></i>
1621
+ </span>
1622
+ <span
1623
+ class="pf-screen-reader"
1624
+ >(opens new window)</span>
1625
+ </span>
1626
+ </a>
1627
+ <button
1628
+ class="pf-c-menu__item-action pf-m-favorite pf-m-favorited"
1629
+ type="button"
1630
+ aria-label="Starred"
1631
+ >
1632
+ <span class="pf-c-menu__item-action-icon">
1633
+ <i
1634
+ class="fas fa-star"
1635
+ aria-hidden="true"
1636
+ ></i>
1637
+ </span>
1638
+ </button>
1639
+ </li>
1640
+ </ul>
1641
+ </section>
1642
+ </div>
1643
+ </li>
1644
+ </ul>
1645
+ </section>
1646
+ </div>
1647
+ </div>
1648
+ </div>
1649
+ </div>
1650
+ </div>
1651
+ <div class="pf-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
1652
+ <div
1653
+ class="pf-c-dropdown pf-m-full-height"
1654
+ style="--pf-c-dropdown--MaxWidth: 20ch;"
1655
+ >
1656
+ <button
1657
+ class="pf-c-dropdown__toggle"
1658
+ id="page-demo-full-height-masthead-profile-button"
1659
+ aria-expanded="false"
1660
+ type="button"
1661
+ >
1662
+ <span class="pf-c-dropdown__toggle-image">
1663
+ <img
1664
+ class="pf-c-avatar"
1665
+ alt="Avatar image"
1666
+ src="/assets/images/img_avatar-light.svg"
1667
+ />
1668
+ </span>
1669
+ <span class="pf-c-dropdown__toggle-text">Ned Username</span>
1670
+ <span class="pf-c-dropdown__toggle-icon">
1671
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
1672
+ </span>
1673
+ </button>
1674
+ <div class="pf-c-dropdown__menu" hidden>
1675
+ <section class="pf-c-dropdown__group">
1676
+ <div class="pf-c-dropdown__menu-item pf-m-text">
1677
+ <div class="pf-u-font-size-sm">Account number:</div>
1678
+ <div>123456789</div>
1679
+ </div>
1680
+ <div class="pf-c-dropdown__menu-item pf-m-text">
1681
+ <div class="pf-u-font-size-sm">Username:</div>
1682
+ <div>mshaksho@redhat.com</div>
1683
+ </div>
1684
+ </section>
1685
+ <hr class="pf-c-divider" />
1686
+ <section class="pf-c-dropdown__group">
1687
+ <ul>
1688
+ <li>
1689
+ <a class="pf-c-dropdown__menu-item" href="#">My profile</a>
1690
+ </li>
1691
+ <li>
1692
+ <a
1693
+ class="pf-c-dropdown__menu-item"
1694
+ href="#"
1695
+ >User management</a>
1696
+ </li>
1697
+ <li>
1698
+ <a class="pf-c-dropdown__menu-item" href="#">Logout</a>
1699
+ </li>
1700
+ </ul>
1701
+ </section>
1702
+ </div>
1703
+ </div>
1704
+ </div>
1705
+ </div>
1706
+ </div>
1707
+ </div>
1708
+ </div>
1709
+ </header>
1710
+ <div class="pf-c-page__sidebar">
1711
+ <div class="pf-c-page__sidebar-body">
1712
+ <nav
1713
+ class="pf-c-nav"
1714
+ id="page-demo-full-height-primary-nav"
1715
+ aria-label="Global"
1716
+ >
1717
+ <ul class="pf-c-nav__list" role="list">
1718
+ <li class="pf-c-nav__item">
1719
+ <a href="#" class="pf-c-nav__link">System panel</a>
1720
+ </li>
1721
+ <li class="pf-c-nav__item">
1722
+ <a
1723
+ href="#"
1724
+ class="pf-c-nav__link pf-m-current"
1725
+ aria-current="page"
1726
+ >Policy</a>
1727
+ </li>
1728
+ <li class="pf-c-nav__item">
1729
+ <a href="#" class="pf-c-nav__link">Authentication</a>
1730
+ </li>
1731
+ <li class="pf-c-nav__item">
1732
+ <a href="#" class="pf-c-nav__link">Network services</a>
1733
+ </li>
1734
+ <li class="pf-c-nav__item">
1735
+ <a href="#" class="pf-c-nav__link">Server</a>
1736
+ </li>
1737
+ </ul>
1738
+ </nav>
1739
+ </div>
1740
+ </div>
1741
+ <main
1742
+ class="pf-c-page__main"
1743
+ tabindex="-1"
1744
+ id="main-content-page-demo-full-height"
1745
+ >
1746
+ <section class="pf-c-page__main-breadcrumb pf-m-limit-width">
1747
+ <div class="pf-c-page__main-body">
1748
+ <nav class="pf-c-breadcrumb" aria-label="breadcrumb">
1749
+ <ol class="pf-c-breadcrumb__list" role="list">
1750
+ <li class="pf-c-breadcrumb__item">
1751
+ <a href="#" class="pf-c-breadcrumb__link">Section home</a>
1752
+ </li>
1753
+ <li class="pf-c-breadcrumb__item">
1754
+ <span class="pf-c-breadcrumb__item-divider">
1755
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
1756
+ </span>
1757
+
1758
+ <a href="#" class="pf-c-breadcrumb__link">Section title</a>
1759
+ </li>
1760
+ <li class="pf-c-breadcrumb__item">
1761
+ <span class="pf-c-breadcrumb__item-divider">
1762
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
1763
+ </span>
1764
+
1765
+ <a href="#" class="pf-c-breadcrumb__link">Section title</a>
1766
+ </li>
1767
+ <li class="pf-c-breadcrumb__item">
1768
+ <span class="pf-c-breadcrumb__item-divider">
1769
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
1770
+ </span>
1771
+
1772
+ <a
1773
+ href="#"
1774
+ class="pf-c-breadcrumb__link pf-m-current"
1775
+ aria-current="page"
1776
+ >Section landing</a>
1777
+ </li>
1778
+ </ol>
1779
+ </nav>
1780
+ </div>
1781
+ </section>
1782
+ <section class="pf-c-page__main-section pf-m-limit-width pf-m-light">
1783
+ <div class="pf-c-page__main-body">
1784
+ <div class="pf-c-content">
1785
+ <h1>Main title</h1>
1786
+ <p>This is a full page demo.</p>
1787
+ </div>
1788
+ </div>
1789
+ </section>
1790
+ <section class="pf-c-page__main-section pf-m-limit-width">
1791
+ <div class="pf-c-page__main-body">
1792
+ <div class="pf-l-gallery pf-m-gutter">
1793
+ <div class="pf-c-card">
1794
+ <div class="pf-c-card__body">This is a card</div>
1795
+ </div>
1796
+ <div class="pf-c-card">
1797
+ <div class="pf-c-card__body">This is a card</div>
1798
+ </div>
1799
+ <div class="pf-c-card">
1800
+ <div class="pf-c-card__body">This is a card</div>
1801
+ </div>
1802
+ <div class="pf-c-card">
1803
+ <div class="pf-c-card__body">This is a card</div>
1804
+ </div>
1805
+ <div class="pf-c-card">
1806
+ <div class="pf-c-card__body">This is a card</div>
1807
+ </div>
1808
+ <div class="pf-c-card">
1809
+ <div class="pf-c-card__body">This is a card</div>
1810
+ </div>
1811
+ <div class="pf-c-card">
1812
+ <div class="pf-c-card__body">This is a card</div>
1813
+ </div>
1814
+ <div class="pf-c-card">
1815
+ <div class="pf-c-card__body">This is a card</div>
1816
+ </div>
1817
+ <div class="pf-c-card">
1818
+ <div class="pf-c-card__body">This is a card</div>
1819
+ </div>
1820
+ <div class="pf-c-card">
1821
+ <div class="pf-c-card__body">This is a card</div>
1822
+ </div>
1823
+ </div>
1824
+ </div>
1825
+ </section>
1826
+ </main>
1827
+ </div>
1828
+
1829
+ ```
1830
+
1831
+ ### Multiple sidebar body elements
1832
+
1833
+ ```html isFullscreen
1834
+ <div class="pf-c-page" id="multiple-sidebar-body-elements-demo">
1835
+ <div class="pf-c-skip-to-content">
1836
+ <a
1837
+ class="pf-c-button pf-m-primary"
1838
+ href="#main-content-multiple-sidebar-body-elements-demo"
926
1839
  >Skip to content</a>
927
1840
  </div>
928
- <header class="pf-c-masthead" id="page-demo-full-height-masthead">
1841
+ <header
1842
+ class="pf-c-masthead"
1843
+ id="multiple-sidebar-body-elements-demo-masthead"
1844
+ >
929
1845
  <span class="pf-c-masthead__toggle">
930
1846
  <button
931
1847
  class="pf-c-button pf-m-plain"
@@ -956,7 +1872,7 @@ Using the `.pf-m-full-height` modifier class on the page component eliminates th
956
1872
  <div class="pf-c-masthead__content">
957
1873
  <div
958
1874
  class="pf-c-toolbar pf-m-full-height pf-m-static"
959
- id="page-demo-full-height-masthead-toolbar"
1875
+ id="multiple-sidebar-body-elements-demo-masthead-toolbar"
960
1876
  >
961
1877
  <div class="pf-c-toolbar__content">
962
1878
  <div class="pf-c-toolbar__content-section">
@@ -970,12 +1886,12 @@ Using the `.pf-m-full-height` modifier class on the page component eliminates th
970
1886
  <nav
971
1887
  class="pf-c-app-launcher"
972
1888
  aria-label="Application launcher"
973
- id="page-demo-full-height-masthead-application-launcher"
1889
+ id="multiple-sidebar-body-elements-demo-masthead-application-launcher"
974
1890
  >
975
1891
  <button
976
1892
  class="pf-c-app-launcher__toggle"
977
1893
  type="button"
978
- id="page-demo-full-height-masthead-application-launcher-button"
1894
+ id="multiple-sidebar-body-elements-demo-masthead-application-launcher-button"
979
1895
  aria-expanded="false"
980
1896
  aria-label="Application launcher"
981
1897
  >
@@ -1007,7 +1923,7 @@ Using the `.pf-m-full-height` modifier class on the page component eliminates th
1007
1923
  </div>
1008
1924
  <section class="pf-c-app-launcher__group">
1009
1925
  <h1 class="pf-c-app-launcher__group-title">Favorites</h1>
1010
- <ul>
1926
+ <ul role="list">
1011
1927
  <li
1012
1928
  class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
1013
1929
  >
@@ -1059,7 +1975,7 @@ Using the `.pf-m-full-height` modifier class on the page component eliminates th
1059
1975
  <hr class="pf-c-divider" />
1060
1976
  <section class="pf-c-app-launcher__group">
1061
1977
  <h1 class="pf-c-app-launcher__group-title">Group 1</h1>
1062
- <ul>
1978
+ <ul role="list">
1063
1979
  <li
1064
1980
  class="pf-c-app-launcher__menu-wrapper pf-m-external"
1065
1981
  >
@@ -1115,7 +2031,7 @@ Using the `.pf-m-full-height` modifier class on the page component eliminates th
1115
2031
  <div class="pf-c-dropdown">
1116
2032
  <button
1117
2033
  class="pf-c-dropdown__toggle pf-m-plain"
1118
- id="page-demo-full-height-masthead-settings-button"
2034
+ id="multiple-sidebar-body-elements-demo-masthead-settings-button"
1119
2035
  aria-expanded="false"
1120
2036
  type="button"
1121
2037
  aria-label="Settings"
@@ -1124,7 +2040,7 @@ Using the `.pf-m-full-height` modifier class on the page component eliminates th
1124
2040
  </button>
1125
2041
  <ul
1126
2042
  class="pf-c-dropdown__menu pf-m-align-right"
1127
- aria-labelledby="page-demo-full-height-masthead-settings-button"
2043
+ aria-labelledby="multiple-sidebar-body-elements-demo-masthead-settings-button"
1128
2044
  hidden
1129
2045
  >
1130
2046
  <li>
@@ -1146,7 +2062,7 @@ Using the `.pf-m-full-height` modifier class on the page component eliminates th
1146
2062
  <div class="pf-c-dropdown">
1147
2063
  <button
1148
2064
  class="pf-c-dropdown__toggle pf-m-plain"
1149
- id="page-demo-full-height-masthead-help-button"
2065
+ id="multiple-sidebar-body-elements-demo-masthead-help-button"
1150
2066
  aria-expanded="false"
1151
2067
  type="button"
1152
2068
  aria-label="Help"
@@ -1155,7 +2071,7 @@ Using the `.pf-m-full-height` modifier class on the page component eliminates th
1155
2071
  </button>
1156
2072
  <ul
1157
2073
  class="pf-c-dropdown__menu pf-m-align-right"
1158
- aria-labelledby="page-demo-full-height-masthead-help-button"
2074
+ aria-labelledby="multiple-sidebar-body-elements-demo-masthead-help-button"
1159
2075
  hidden
1160
2076
  >
1161
2077
  <li>
@@ -1655,7 +2571,7 @@ Using the `.pf-m-full-height` modifier class on the page component eliminates th
1655
2571
  >
1656
2572
  <button
1657
2573
  class="pf-c-dropdown__toggle"
1658
- id="page-demo-full-height-masthead-profile-button"
2574
+ id="multiple-sidebar-body-elements-demo-masthead-profile-button"
1659
2575
  aria-expanded="false"
1660
2576
  type="button"
1661
2577
  >
@@ -1707,14 +2623,19 @@ Using the `.pf-m-full-height` modifier class on the page component eliminates th
1707
2623
  </div>
1708
2624
  </div>
1709
2625
  </header>
1710
- <div class="pf-c-page__sidebar">
2626
+ <div class="pf-c-page__sidebar pf-m-expanded">
2627
+ <div class="pf-c-page__sidebar-body pf-m-page-insets">
2628
+ <div class="pf-c-content">
2629
+ <p>Custom sidebar content</p>
2630
+ </div>
2631
+ </div>
1711
2632
  <div class="pf-c-page__sidebar-body">
1712
2633
  <nav
1713
2634
  class="pf-c-nav"
1714
- id="page-demo-full-height-primary-nav"
2635
+ id="multiple-sidebar-body-elements-demo-primary-nav"
1715
2636
  aria-label="Global"
1716
2637
  >
1717
- <ul class="pf-c-nav__list">
2638
+ <ul class="pf-c-nav__list" role="list">
1718
2639
  <li class="pf-c-nav__item">
1719
2640
  <a href="#" class="pf-c-nav__link">System panel</a>
1720
2641
  </li>
@@ -1737,16 +2658,26 @@ Using the `.pf-m-full-height` modifier class on the page component eliminates th
1737
2658
  </ul>
1738
2659
  </nav>
1739
2660
  </div>
2661
+ <div class="pf-c-page__sidebar-body pf-m-fill pf-m-page-insets">
2662
+ <div class="pf-c-content">
2663
+ <p>Custom sidebar content</p>
2664
+ </div>
2665
+ </div>
2666
+ <div class="pf-c-page__sidebar-body pf-m-no-fill pf-m-page-insets">
2667
+ <div class="pf-c-content">
2668
+ <p>&copy;&nbsp;Copyright</p>
2669
+ </div>
2670
+ </div>
1740
2671
  </div>
1741
2672
  <main
1742
2673
  class="pf-c-page__main"
1743
2674
  tabindex="-1"
1744
- id="main-content-page-demo-full-height"
2675
+ id="main-content-multiple-sidebar-body-elements-demo"
1745
2676
  >
1746
2677
  <section class="pf-c-page__main-breadcrumb pf-m-limit-width">
1747
2678
  <div class="pf-c-page__main-body">
1748
2679
  <nav class="pf-c-breadcrumb" aria-label="breadcrumb">
1749
- <ol class="pf-c-breadcrumb__list">
2680
+ <ol class="pf-c-breadcrumb__list" role="list">
1750
2681
  <li class="pf-c-breadcrumb__item">
1751
2682
  <a href="#" class="pf-c-breadcrumb__link">Section home</a>
1752
2683
  </li>
@@ -1923,7 +2854,7 @@ Using the `.pf-m-full-height` modifier class on the page component eliminates th
1923
2854
  </div>
1924
2855
  <section class="pf-c-app-launcher__group">
1925
2856
  <h1 class="pf-c-app-launcher__group-title">Favorites</h1>
1926
- <ul>
2857
+ <ul role="list">
1927
2858
  <li
1928
2859
  class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
1929
2860
  >
@@ -1975,7 +2906,7 @@ Using the `.pf-m-full-height` modifier class on the page component eliminates th
1975
2906
  <hr class="pf-c-divider" />
1976
2907
  <section class="pf-c-app-launcher__group">
1977
2908
  <h1 class="pf-c-app-launcher__group-title">Group 1</h1>
1978
- <ul>
2909
+ <ul role="list">
1979
2910
  <li
1980
2911
  class="pf-c-app-launcher__menu-wrapper pf-m-external"
1981
2912
  >
@@ -2630,7 +3561,7 @@ Using the `.pf-m-full-height` modifier class on the page component eliminates th
2630
3561
  id="page-demo-sticky-top-horizontal-subnav-primary-nav"
2631
3562
  aria-label="Global"
2632
3563
  >
2633
- <ul class="pf-c-nav__list">
3564
+ <ul class="pf-c-nav__list" role="list">
2634
3565
  <li class="pf-c-nav__item">
2635
3566
  <a href="#" class="pf-c-nav__link">System panel</a>
2636
3567
  </li>
@@ -2672,7 +3603,7 @@ Using the `.pf-m-full-height` modifier class on the page component eliminates th
2672
3603
  >
2673
3604
  <i class="fas fa-angle-left" aria-hidden="true"></i>
2674
3605
  </button>
2675
- <ul class="pf-c-nav__list">
3606
+ <ul class="pf-c-nav__list" role="list">
2676
3607
  <li class="pf-c-nav__item">
2677
3608
  <a
2678
3609
  href="#"
@@ -2702,7 +3633,7 @@ Using the `.pf-m-full-height` modifier class on the page component eliminates th
2702
3633
  <section class="pf-c-page__main-breadcrumb pf-m-limit-width">
2703
3634
  <div class="pf-c-page__main-body">
2704
3635
  <nav class="pf-c-breadcrumb" aria-label="breadcrumb">
2705
- <ol class="pf-c-breadcrumb__list">
3636
+ <ol class="pf-c-breadcrumb__list" role="list">
2706
3637
  <li class="pf-c-breadcrumb__item">
2707
3638
  <a href="#" class="pf-c-breadcrumb__link">Section home</a>
2708
3639
  </li>
@@ -2996,7 +3927,7 @@ Using the `.pf-m-full-height` modifier class on the page component eliminates th
2996
3927
  </div>
2997
3928
  <section class="pf-c-app-launcher__group">
2998
3929
  <h1 class="pf-c-app-launcher__group-title">Favorites</h1>
2999
- <ul>
3930
+ <ul role="list">
3000
3931
  <li
3001
3932
  class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
3002
3933
  >
@@ -3048,7 +3979,7 @@ Using the `.pf-m-full-height` modifier class on the page component eliminates th
3048
3979
  <hr class="pf-c-divider" />
3049
3980
  <section class="pf-c-app-launcher__group">
3050
3981
  <h1 class="pf-c-app-launcher__group-title">Group 1</h1>
3051
- <ul>
3982
+ <ul role="list">
3052
3983
  <li
3053
3984
  class="pf-c-app-launcher__menu-wrapper pf-m-external"
3054
3985
  >
@@ -3703,7 +4634,7 @@ Using the `.pf-m-full-height` modifier class on the page component eliminates th
3703
4634
  id="page-demo-sticky-top-breadcrumb-primary-nav"
3704
4635
  aria-label="Global"
3705
4636
  >
3706
- <ul class="pf-c-nav__list">
4637
+ <ul class="pf-c-nav__list" role="list">
3707
4638
  <li class="pf-c-nav__item">
3708
4639
  <a href="#" class="pf-c-nav__link">System panel</a>
3709
4640
  </li>
@@ -3737,7 +4668,7 @@ Using the `.pf-m-full-height` modifier class on the page component eliminates th
3737
4668
  >
3738
4669
  <div class="pf-c-page__main-body">
3739
4670
  <nav class="pf-c-breadcrumb" aria-label="breadcrumb">
3740
- <ol class="pf-c-breadcrumb__list">
4671
+ <ol class="pf-c-breadcrumb__list" role="list">
3741
4672
  <li class="pf-c-breadcrumb__item">
3742
4673
  <a href="#" class="pf-c-breadcrumb__link">Section home</a>
3743
4674
  </li>
@@ -3941,7 +4872,7 @@ Using the `.pf-m-full-height` modifier class on the page component eliminates th
3941
4872
 
3942
4873
  ### Sticky breadcrumb on medium
3943
4874
 
3944
- ```html isFullscreen isBeta
4875
+ ```html isFullscreen
3945
4876
  <div class="pf-c-page" id="page-demo-sticky-top-breadcrumb">
3946
4877
  <div class="pf-c-skip-to-content">
3947
4878
  <a
@@ -4031,7 +4962,7 @@ Using the `.pf-m-full-height` modifier class on the page component eliminates th
4031
4962
  </div>
4032
4963
  <section class="pf-c-app-launcher__group">
4033
4964
  <h1 class="pf-c-app-launcher__group-title">Favorites</h1>
4034
- <ul>
4965
+ <ul role="list">
4035
4966
  <li
4036
4967
  class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
4037
4968
  >
@@ -4083,7 +5014,7 @@ Using the `.pf-m-full-height` modifier class on the page component eliminates th
4083
5014
  <hr class="pf-c-divider" />
4084
5015
  <section class="pf-c-app-launcher__group">
4085
5016
  <h1 class="pf-c-app-launcher__group-title">Group 1</h1>
4086
- <ul>
5017
+ <ul role="list">
4087
5018
  <li
4088
5019
  class="pf-c-app-launcher__menu-wrapper pf-m-external"
4089
5020
  >
@@ -4738,7 +5669,7 @@ Using the `.pf-m-full-height` modifier class on the page component eliminates th
4738
5669
  id="page-demo-sticky-top-breadcrumb-primary-nav"
4739
5670
  aria-label="Global"
4740
5671
  >
4741
- <ul class="pf-c-nav__list">
5672
+ <ul class="pf-c-nav__list" role="list">
4742
5673
  <li class="pf-c-nav__item">
4743
5674
  <a href="#" class="pf-c-nav__link">System panel</a>
4744
5675
  </li>
@@ -4772,7 +5703,7 @@ Using the `.pf-m-full-height` modifier class on the page component eliminates th
4772
5703
  >
4773
5704
  <div class="pf-c-page__main-body">
4774
5705
  <nav class="pf-c-breadcrumb" aria-label="breadcrumb">
4775
- <ol class="pf-c-breadcrumb__list">
5706
+ <ol class="pf-c-breadcrumb__list" role="list">
4776
5707
  <li class="pf-c-breadcrumb__item">
4777
5708
  <a href="#" class="pf-c-breadcrumb__link">Section home</a>
4778
5709
  </li>
@@ -5069,7 +6000,7 @@ Using the `.pf-m-full-height` modifier class on the page component eliminates th
5069
6000
  </div>
5070
6001
  <section class="pf-c-app-launcher__group">
5071
6002
  <h1 class="pf-c-app-launcher__group-title">Favorites</h1>
5072
- <ul>
6003
+ <ul role="list">
5073
6004
  <li
5074
6005
  class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
5075
6006
  >
@@ -5121,7 +6052,7 @@ Using the `.pf-m-full-height` modifier class on the page component eliminates th
5121
6052
  <hr class="pf-c-divider" />
5122
6053
  <section class="pf-c-app-launcher__group">
5123
6054
  <h1 class="pf-c-app-launcher__group-title">Group 1</h1>
5124
- <ul>
6055
+ <ul role="list">
5125
6056
  <li
5126
6057
  class="pf-c-app-launcher__menu-wrapper pf-m-external"
5127
6058
  >
@@ -5776,7 +6707,7 @@ Using the `.pf-m-full-height` modifier class on the page component eliminates th
5776
6707
  id="page-demo-sticky-top-section-group-primary-nav"
5777
6708
  aria-label="Global"
5778
6709
  >
5779
- <ul class="pf-c-nav__list">
6710
+ <ul class="pf-c-nav__list" role="list">
5780
6711
  <li class="pf-c-nav__item">
5781
6712
  <a href="#" class="pf-c-nav__link">System panel</a>
5782
6713
  </li>
@@ -5809,7 +6740,7 @@ Using the `.pf-m-full-height` modifier class on the page component eliminates th
5809
6740
  <section class="pf-c-page__main-breadcrumb pf-m-limit-width">
5810
6741
  <div class="pf-c-page__main-body">
5811
6742
  <nav class="pf-c-breadcrumb" aria-label="breadcrumb">
5812
- <ol class="pf-c-breadcrumb__list">
6743
+ <ol class="pf-c-breadcrumb__list" role="list">
5813
6744
  <li class="pf-c-breadcrumb__item">
5814
6745
  <a href="#" class="pf-c-breadcrumb__link">Section home</a>
5815
6746
  </li>
@@ -6104,7 +7035,7 @@ Using the `.pf-m-full-height` modifier class on the page component eliminates th
6104
7035
  </div>
6105
7036
  <section class="pf-c-app-launcher__group">
6106
7037
  <h1 class="pf-c-app-launcher__group-title">Favorites</h1>
6107
- <ul>
7038
+ <ul role="list">
6108
7039
  <li
6109
7040
  class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
6110
7041
  >
@@ -6156,7 +7087,7 @@ Using the `.pf-m-full-height` modifier class on the page component eliminates th
6156
7087
  <hr class="pf-c-divider" />
6157
7088
  <section class="pf-c-app-launcher__group">
6158
7089
  <h1 class="pf-c-app-launcher__group-title">Group 1</h1>
6159
- <ul>
7090
+ <ul role="list">
6160
7091
  <li
6161
7092
  class="pf-c-app-launcher__menu-wrapper pf-m-external"
6162
7093
  >
@@ -6811,7 +7742,7 @@ Using the `.pf-m-full-height` modifier class on the page component eliminates th
6811
7742
  id="page-demo-sticky-section-bottom-primary-nav"
6812
7743
  aria-label="Global"
6813
7744
  >
6814
- <ul class="pf-c-nav__list">
7745
+ <ul class="pf-c-nav__list" role="list">
6815
7746
  <li class="pf-c-nav__item">
6816
7747
  <a href="#" class="pf-c-nav__link">System panel</a>
6817
7748
  </li>
@@ -6843,7 +7774,7 @@ Using the `.pf-m-full-height` modifier class on the page component eliminates th
6843
7774
  <section class="pf-c-page__main-breadcrumb pf-m-limit-width">
6844
7775
  <div class="pf-c-page__main-body">
6845
7776
  <nav class="pf-c-breadcrumb" aria-label="breadcrumb">
6846
- <ol class="pf-c-breadcrumb__list">
7777
+ <ol class="pf-c-breadcrumb__list" role="list">
6847
7778
  <li class="pf-c-breadcrumb__item">
6848
7779
  <a href="#" class="pf-c-breadcrumb__link">Section home</a>
6849
7780
  </li>
@@ -7144,7 +8075,7 @@ Using the `.pf-m-full-height` modifier class on the page component eliminates th
7144
8075
  </div>
7145
8076
  <section class="pf-c-app-launcher__group">
7146
8077
  <h1 class="pf-c-app-launcher__group-title">Favorites</h1>
7147
- <ul>
8078
+ <ul role="list">
7148
8079
  <li
7149
8080
  class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
7150
8081
  >
@@ -7196,7 +8127,7 @@ Using the `.pf-m-full-height` modifier class on the page component eliminates th
7196
8127
  <hr class="pf-c-divider" />
7197
8128
  <section class="pf-c-app-launcher__group">
7198
8129
  <h1 class="pf-c-app-launcher__group-title">Group 1</h1>
7199
- <ul>
8130
+ <ul role="list">
7200
8131
  <li
7201
8132
  class="pf-c-app-launcher__menu-wrapper pf-m-external"
7202
8133
  >
@@ -7851,7 +8782,7 @@ Using the `.pf-m-full-height` modifier class on the page component eliminates th
7851
8782
  id="page-demo-overflow-scroll-primary-nav"
7852
8783
  aria-label="Global"
7853
8784
  >
7854
- <ul class="pf-c-nav__list">
8785
+ <ul class="pf-c-nav__list" role="list">
7855
8786
  <li class="pf-c-nav__item">
7856
8787
  <a href="#" class="pf-c-nav__link">System panel</a>
7857
8788
  </li>
@@ -7883,7 +8814,7 @@ Using the `.pf-m-full-height` modifier class on the page component eliminates th
7883
8814
  <section class="pf-c-page__main-breadcrumb pf-m-limit-width">
7884
8815
  <div class="pf-c-page__main-body">
7885
8816
  <nav class="pf-c-breadcrumb" aria-label="breadcrumb">
7886
- <ol class="pf-c-breadcrumb__list">
8817
+ <ol class="pf-c-breadcrumb__list" role="list">
7887
8818
  <li class="pf-c-breadcrumb__item">
7888
8819
  <a href="#" class="pf-c-breadcrumb__link">Section home</a>
7889
8820
  </li>
@@ -8189,7 +9120,7 @@ Using the `.pf-m-full-height` modifier class on the page component eliminates th
8189
9120
  </div>
8190
9121
  <section class="pf-c-app-launcher__group">
8191
9122
  <h1 class="pf-c-app-launcher__group-title">Favorites</h1>
8192
- <ul>
9123
+ <ul role="list">
8193
9124
  <li
8194
9125
  class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
8195
9126
  >
@@ -8241,7 +9172,7 @@ Using the `.pf-m-full-height` modifier class on the page component eliminates th
8241
9172
  <hr class="pf-c-divider" />
8242
9173
  <section class="pf-c-app-launcher__group">
8243
9174
  <h1 class="pf-c-app-launcher__group-title">Group 1</h1>
8244
- <ul>
9175
+ <ul role="list">
8245
9176
  <li
8246
9177
  class="pf-c-app-launcher__menu-wrapper pf-m-external"
8247
9178
  >
@@ -8896,7 +9827,7 @@ Using the `.pf-m-full-height` modifier class on the page component eliminates th
8896
9827
  id="page-demo-centered-section-primary-nav"
8897
9828
  aria-label="Global"
8898
9829
  >
8899
- <ul class="pf-c-nav__list">
9830
+ <ul class="pf-c-nav__list" role="list">
8900
9831
  <li class="pf-c-nav__item">
8901
9832
  <a href="#" class="pf-c-nav__link">System panel</a>
8902
9833
  </li>