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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (382) hide show
  1. package/CODE_OF_CONDUCT.md +1 -2
  2. package/README.md +13 -3
  3. package/assets/icons/iconUnicodes.json +1 -0
  4. package/assets/images/PF-Backdrop.svg +1 -0
  5. package/assets/images/PF-HorizontalLogo-Color.svg +29 -0
  6. package/assets/images/PF-HorizontalLogo-Reverse.svg +28 -0
  7. package/assets/images/PF-IconLogo-Reverse.svg +14 -0
  8. package/assets/images/PF-IconLogo-color.svg +17 -0
  9. package/assets/images/PF-IconLogo.svg +17 -0
  10. package/assets/images/logo__pf--reverse-on-md.svg +1 -1
  11. package/assets/images/pf-background.svg +22 -0
  12. package/assets/images/pf-c-brand__logo-on-lg-white.svg +32 -0
  13. package/assets/images/pf-c-brand__logo-on-md-white.svg +42 -0
  14. package/assets/images/pf-c-brand__logo-on-sm-white.svg +17 -0
  15. package/assets/images/pf-c-brand__logo-on-sm.svg +1 -1
  16. package/assets/images/pf-c-brand__logo-on-xl-white.svg +39 -0
  17. package/assets/images/pf_logo_white.hbs +35 -0
  18. package/assets/images/pf_logo_white.svg +38 -0
  19. package/assets/pficon/pf-v5-pficon.woff2 +0 -0
  20. package/assets/pficon/pficon.scss +6 -129
  21. package/base/_common.scss +29 -4
  22. package/base/_globals.scss +5 -7
  23. package/base/_variables.scss +8 -6
  24. package/base/patternfly-common.css +24 -6
  25. package/base/patternfly-globals.css +5 -4
  26. package/base/patternfly-icons.css +5 -1
  27. package/base/patternfly-pf-icons.css +5 -1
  28. package/base/patternfly-variables.css +859 -833
  29. package/base/tokens/_tokens-dark.scss +306 -284
  30. package/base/tokens/_tokens-default.scss +415 -329
  31. package/base/tokens/_tokens-font.scss +41 -46
  32. package/base/tokens/_tokens-palette.scss +68 -68
  33. package/base/tokens/_workspace-overrides.scss +7 -0
  34. package/components/AboutModalBox/about-modal-box.css +78 -104
  35. package/components/AboutModalBox/about-modal-box.scss +62 -74
  36. package/components/Accordion/accordion.css +96 -175
  37. package/components/Accordion/accordion.scss +106 -193
  38. package/components/ActionList/action-list.css +18 -17
  39. package/components/ActionList/action-list.scss +26 -16
  40. package/components/Alert/alert-group.css +27 -20
  41. package/components/Alert/alert-group.scss +27 -20
  42. package/components/Alert/alert.css +74 -95
  43. package/components/Alert/alert.scss +76 -89
  44. package/components/AppLauncher/app-launcher.css +32 -23
  45. package/components/AppLauncher/app-launcher.scss +32 -23
  46. package/components/Avatar/avatar.css +10 -13
  47. package/components/Avatar/avatar.scss +10 -17
  48. package/components/BackToTop/back-to-top.css +17 -16
  49. package/components/BackToTop/back-to-top.scss +14 -14
  50. package/components/Backdrop/backdrop.css +8 -4
  51. package/components/Backdrop/backdrop.scss +7 -4
  52. package/components/BackgroundImage/background-image.css +11 -4
  53. package/components/BackgroundImage/background-image.scss +13 -4
  54. package/components/Badge/badge.css +25 -17
  55. package/components/Badge/badge.scss +27 -19
  56. package/components/Banner/banner.css +95 -69
  57. package/components/Banner/banner.scss +100 -34
  58. package/components/Breadcrumb/breadcrumb.css +28 -19
  59. package/components/Breadcrumb/breadcrumb.scss +26 -19
  60. package/components/Button/button.css +417 -359
  61. package/components/Button/button.scss +472 -484
  62. package/components/CalendarMonth/calendar-month.css +25 -15
  63. package/components/CalendarMonth/calendar-month.scss +23 -15
  64. package/components/Card/card.css +117 -203
  65. package/components/Card/card.scss +137 -246
  66. package/components/Check/check.css +25 -22
  67. package/components/Check/check.scss +26 -24
  68. package/components/Chip/chip-group.css +6 -6
  69. package/components/Chip/chip-group.scss +6 -6
  70. package/components/Chip/chip.css +16 -9
  71. package/components/Chip/chip.scss +17 -9
  72. package/components/ClipboardCopy/clipboard-copy.css +47 -41
  73. package/components/ClipboardCopy/clipboard-copy.scss +50 -34
  74. package/components/CodeBlock/code-block.css +24 -12
  75. package/components/CodeBlock/code-block.scss +24 -13
  76. package/components/CodeEditor/code-editor.css +31 -22
  77. package/components/CodeEditor/code-editor.scss +30 -21
  78. package/components/CodeEditor/themes/dark/code-editor.scss +1 -1
  79. package/components/Content/content.css +40 -37
  80. package/components/Content/content.scss +40 -37
  81. package/components/ContextSelector/context-selector.css +41 -26
  82. package/components/ContextSelector/context-selector.scss +40 -25
  83. package/components/ContextSelector/themes/dark/context-selector.scss +1 -1
  84. package/components/DataList/data-list-grid.css +21 -21
  85. package/components/DataList/data-list-grid.scss +3 -3
  86. package/components/DataList/data-list.css +165 -209
  87. package/components/DataList/data-list.scss +138 -185
  88. package/components/DatePicker/date-picker.css +8 -8
  89. package/components/DatePicker/date-picker.scss +8 -8
  90. package/components/DescriptionList/description-list.css +47 -39
  91. package/components/DescriptionList/description-list.scss +33 -30
  92. package/components/Divider/divider.css +97 -177
  93. package/components/Divider/divider.scss +60 -79
  94. package/components/DragDrop/drag-drop.css +26 -22
  95. package/components/DragDrop/drag-drop.scss +26 -25
  96. package/components/Drawer/drawer.css +216 -158
  97. package/components/Drawer/drawer.scss +199 -150
  98. package/components/Dropdown/dropdown.css +76 -69
  99. package/components/Dropdown/dropdown.scss +67 -62
  100. package/components/DualListSelector/dual-list-selector.css +29 -15
  101. package/components/DualListSelector/dual-list-selector.scss +30 -15
  102. package/components/EmptyState/empty-state.css +64 -38
  103. package/components/EmptyState/empty-state.scss +70 -38
  104. package/components/ExpandableSection/expandable-section.css +75 -66
  105. package/components/ExpandableSection/expandable-section.scss +82 -80
  106. package/components/FileUpload/file-upload.css +31 -43
  107. package/components/FileUpload/file-upload.scss +31 -49
  108. package/components/Form/form.css +111 -154
  109. package/components/Form/form.scss +101 -160
  110. package/components/FormControl/form-control.css +95 -111
  111. package/components/FormControl/form-control.scss +97 -92
  112. package/components/HelperText/helper-text.css +29 -35
  113. package/components/HelperText/helper-text.scss +31 -41
  114. package/components/Hint/hint.css +37 -27
  115. package/components/Hint/hint.scss +37 -30
  116. package/components/Icon/icon.css +155 -19
  117. package/components/Icon/icon.scss +188 -21
  118. package/components/InlineEdit/inline-edit.css +12 -11
  119. package/components/InlineEdit/inline-edit.scss +12 -11
  120. package/components/InputGroup/input-group.css +32 -42
  121. package/components/InputGroup/input-group.scss +31 -33
  122. package/components/JumpLinks/jump-links.css +61 -58
  123. package/components/JumpLinks/jump-links.scss +61 -60
  124. package/components/Label/label-group.css +48 -50
  125. package/components/Label/label-group.scss +48 -51
  126. package/components/Label/label.css +382 -363
  127. package/components/Label/label.scss +441 -356
  128. package/components/List/list.css +25 -25
  129. package/components/List/list.scss +26 -26
  130. package/components/LogViewer/log-viewer.css +14 -14
  131. package/components/LogViewer/log-viewer.scss +14 -14
  132. package/components/Login/login.css +104 -122
  133. package/components/Login/login.scss +92 -91
  134. package/components/Masthead/masthead.css +262 -506
  135. package/components/Masthead/masthead.scss +123 -289
  136. package/components/Menu/menu.css +82 -65
  137. package/components/Menu/menu.scss +85 -69
  138. package/components/MenuToggle/menu-toggle.css +37 -31
  139. package/components/MenuToggle/menu-toggle.scss +37 -33
  140. package/components/ModalBox/modal-box.css +76 -69
  141. package/components/ModalBox/modal-box.scss +74 -70
  142. package/components/MultipleFileUpload/multiple-file-upload.css +87 -57
  143. package/components/MultipleFileUpload/multiple-file-upload.scss +92 -60
  144. package/components/Nav/nav.css +248 -899
  145. package/components/Nav/nav.scss +304 -1059
  146. package/components/Nav/themes/dark/nav.scss +2 -2
  147. package/components/NotificationBadge/notification-badge.css +66 -85
  148. package/components/NotificationBadge/notification-badge.scss +72 -103
  149. package/components/NotificationDrawer/notification-drawer.css +130 -128
  150. package/components/NotificationDrawer/notification-drawer.scss +130 -129
  151. package/components/NumberInput/number-input.css +10 -10
  152. package/components/NumberInput/number-input.scss +9 -14
  153. package/components/OptionsMenu/options-menu.css +43 -31
  154. package/components/OptionsMenu/options-menu.scss +43 -31
  155. package/components/OverflowMenu/overflow-menu.css +17 -47
  156. package/components/OverflowMenu/overflow-menu.scss +27 -65
  157. package/components/Page/page.css +182 -232
  158. package/components/Page/page.scss +130 -195
  159. package/components/Pagination/pagination.css +74 -121
  160. package/components/Pagination/pagination.scss +55 -125
  161. package/components/Panel/panel.css +40 -30
  162. package/components/Panel/panel.scss +42 -33
  163. package/components/Popover/popover.css +108 -87
  164. package/components/Popover/popover.scss +120 -109
  165. package/components/Progress/progress.css +40 -52
  166. package/components/Progress/progress.scss +48 -62
  167. package/components/ProgressStepper/progress-stepper.css +98 -89
  168. package/components/ProgressStepper/progress-stepper.scss +90 -84
  169. package/components/Radio/radio.css +30 -23
  170. package/components/Radio/radio.scss +31 -25
  171. package/components/Select/select.css +56 -47
  172. package/components/Select/select.scss +56 -47
  173. package/components/Sidebar/sidebar.css +31 -14
  174. package/components/Sidebar/sidebar.scss +34 -16
  175. package/components/SimpleList/simple-list.css +45 -56
  176. package/components/SimpleList/simple-list.scss +51 -55
  177. package/components/Skeleton/skeleton.css +24 -25
  178. package/components/Skeleton/skeleton.scss +21 -26
  179. package/components/SkipToContent/skip-to-content.css +9 -6
  180. package/components/SkipToContent/skip-to-content.scss +8 -6
  181. package/components/Slider/slider.css +80 -55
  182. package/components/Slider/slider.scss +96 -65
  183. package/components/Spinner/spinner.css +17 -34
  184. package/components/Spinner/spinner.scss +19 -47
  185. package/components/Switch/switch.css +49 -41
  186. package/components/Switch/switch.scss +51 -42
  187. package/components/TabContent/tab-content.css +21 -12
  188. package/components/TabContent/tab-content.scss +22 -15
  189. package/components/Table/table-grid.css +256 -195
  190. package/components/Table/table-grid.scss +53 -39
  191. package/components/Table/table-scrollable.css +4 -4
  192. package/components/Table/table-scrollable.scss +6 -4
  193. package/components/Table/table-tree-view.css +112 -105
  194. package/components/Table/table-tree-view.scss +38 -33
  195. package/components/Table/table.css +105 -89
  196. package/components/Table/table.scss +105 -89
  197. package/components/Tabs/tabs.css +210 -214
  198. package/components/Tabs/tabs.scss +222 -254
  199. package/components/TextInputGroup/text-input-group.css +15 -15
  200. package/components/TextInputGroup/text-input-group.scss +15 -15
  201. package/components/Tile/tile.css +47 -88
  202. package/components/Tile/tile.scss +45 -91
  203. package/components/Timestamp/timestamp.css +12 -9
  204. package/components/Timestamp/timestamp.scss +11 -10
  205. package/components/Title/title.css +70 -19
  206. package/components/Title/title.scss +90 -20
  207. package/components/ToggleGroup/toggle-group.css +68 -59
  208. package/components/ToggleGroup/toggle-group.scss +72 -57
  209. package/components/Toolbar/toolbar.css +2553 -1054
  210. package/components/Toolbar/toolbar.scss +234 -516
  211. package/components/Tooltip/tooltip.css +74 -44
  212. package/components/Tooltip/tooltip.scss +93 -77
  213. package/components/TreeView/tree-view.css +48 -27
  214. package/components/TreeView/tree-view.scss +50 -28
  215. package/components/Truncate/truncate.css +13 -0
  216. package/components/Truncate/truncate.scss +19 -3
  217. package/components/Wizard/wizard.css +57 -36
  218. package/components/Wizard/wizard.scss +57 -36
  219. package/docs/components/AboutModalBox/examples/AboutModalBox.md +2 -2
  220. package/docs/components/Accordion/examples/Accordion.md +614 -416
  221. package/docs/components/ActionList/examples/ActionList.md +73 -22
  222. package/docs/components/Alert/examples/Alert.md +3 -3
  223. package/docs/components/Avatar/examples/Avatar.md +5 -19
  224. package/docs/components/BackgroundImage/examples/BackgroundImage.md +1 -1
  225. package/docs/components/Badge/examples/Badge.md +21 -0
  226. package/docs/components/Banner/examples/Banner.md +48 -25
  227. package/docs/components/Brand/examples/Brand.css +12 -0
  228. package/docs/components/Brand/examples/Brand.md +51 -32
  229. package/docs/components/Breadcrumb/examples/Breadcrumb.md +1 -1
  230. package/docs/components/Button/examples/Button.css +6 -2
  231. package/docs/components/Button/examples/Button.md +1425 -87
  232. package/docs/components/Card/examples/Card.md +565 -148
  233. package/docs/components/Check/examples/Check.md +71 -58
  234. package/docs/components/Chip/examples/Chip.md +1 -1
  235. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +106 -0
  236. package/docs/components/CodeBlock/examples/CodeBlock.md +4 -4
  237. package/docs/components/CodeEditor/examples/CodeEditor.md +3 -3
  238. package/docs/components/Content/examples/Content.md +5 -5
  239. package/docs/components/Divider/examples/Divider.css +3 -1
  240. package/docs/components/Divider/examples/Divider.md +4 -5
  241. package/docs/components/DragDrop/examples/DragDrop.css +3 -3
  242. package/docs/components/Drawer/examples/Drawer.md +294 -256
  243. package/docs/components/Dropdown/deprecated/Dropdown.css +1 -1
  244. package/docs/components/DualListSelector/examples/DualListSelector.md +64 -16
  245. package/docs/components/EmptyState/examples/EmptyState.md +45 -1
  246. package/docs/components/ExpandableSection/examples/ExpandableSection.md +49 -28
  247. package/docs/components/FileUpload/examples/FileUpload.md +112 -53
  248. package/docs/components/Form/examples/Form.md +134 -89
  249. package/docs/components/Icon/examples/Icon.md +82 -11
  250. package/docs/components/InlineEdit/examples/InlineEdit.md +3 -1
  251. package/docs/components/JumpLinks/examples/JumpLinks.md +280 -168
  252. package/docs/components/Label/examples/Label.css +4 -0
  253. package/docs/components/Label/examples/Label.md +3091 -704
  254. package/docs/components/LogViewer/examples/LogViewer.css +2 -2
  255. package/docs/components/LogViewer/examples/LogViewer.md +300 -210
  256. package/docs/components/Login/examples/Login.md +10 -5
  257. package/docs/components/Masthead/examples/masthead.md +443 -65
  258. package/docs/components/Menu/examples/Menu.css +8 -0
  259. package/docs/components/Menu/examples/Menu.md +594 -543
  260. package/docs/components/MenuToggle/examples/MenuToggle.md +109 -96
  261. package/docs/components/ModalBox/examples/ModalBox.css +3 -8
  262. package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +9 -9
  263. package/docs/components/Nav/examples/Navigation.css +3 -42
  264. package/docs/components/Nav/examples/Navigation.md +305 -353
  265. package/docs/components/NotificationBadge/examples/NotificationBadge.md +5 -7
  266. package/docs/components/OptionsMenu/deprecated/options-menu.md +12 -3
  267. package/docs/components/Page/examples/Page.css +0 -8
  268. package/docs/components/Page/examples/Page.md +22 -21
  269. package/docs/components/Pagination/examples/Pagination.md +663 -637
  270. package/docs/components/Panel/examples/Panel.md +12 -0
  271. package/docs/components/Popover/examples/Popover.css +4 -9
  272. package/docs/components/Popover/examples/Popover.md +1 -1
  273. package/docs/components/ProgressStepper/examples/ProgressStepper.md +15 -14
  274. package/docs/components/Radio/examples/Radio.md +62 -54
  275. package/docs/components/Select/deprecated/Select.md +184 -177
  276. package/docs/components/Sidebar/examples/Sidebar.md +19 -0
  277. package/docs/components/SimpleList/examples/SimpleList.md +3 -3
  278. package/docs/components/TabContent/examples/TabContent.md +10 -10
  279. package/docs/components/Table/examples/Table.css +2 -2
  280. package/docs/components/Table/examples/Table.md +10 -10
  281. package/docs/components/Tabs/examples/Tabs.css +1 -1
  282. package/docs/components/Tabs/examples/Tabs.md +1025 -826
  283. package/docs/components/TextInputGroup/examples/TextInputGroup.css +1 -1
  284. package/docs/components/TextInputGroup/examples/TextInputGroup.md +9 -9
  285. package/docs/components/Tile/examples/Tile.css +1 -1
  286. package/docs/components/Tile/examples/Tile.md +264 -144
  287. package/docs/components/Title/examples/Title.md +18 -0
  288. package/docs/components/Toolbar/examples/Toolbar.css +20 -15
  289. package/docs/components/Toolbar/examples/Toolbar.md +1211 -3487
  290. package/docs/components/Tooltip/examples/Tooltip.css +4 -0
  291. package/docs/components/Tooltip/examples/Tooltip.md +3 -1
  292. package/docs/components/Truncate/examples/Truncate.css +2 -2
  293. package/docs/components/Truncate/examples/Truncate.md +2 -2
  294. package/docs/demos/AboutModal/examples/AboutModal.md +104 -31
  295. package/docs/demos/Alert/examples/Alert.md +330 -87
  296. package/docs/demos/BackToTop/examples/BackToTop.md +102 -29
  297. package/docs/demos/Banner/examples/Banner.md +211 -60
  298. package/docs/demos/Card/examples/Card.css +3 -3
  299. package/docs/demos/Card/examples/Card.md +28 -12
  300. package/docs/demos/CardView/examples/CardView.md +265 -207
  301. package/docs/demos/ContextSelector/examples/ContextSelector.md +377 -94
  302. package/docs/demos/Dashboard/examples/Dashboard.md +105 -32
  303. package/docs/demos/DataList/examples/DataList.md +1002 -935
  304. package/docs/demos/DescriptionList/examples/DescriptionList.md +306 -87
  305. package/docs/demos/Drawer/examples/Drawer.md +640 -251
  306. package/docs/demos/Form/examples/BasicForms.md +138 -84
  307. package/docs/demos/JumpLinks/examples/JumpLinks.md +917 -385
  308. package/docs/demos/Masthead/examples/Masthead.md +786 -342
  309. package/docs/demos/Modal/examples/Modal.md +645 -198
  310. package/docs/demos/Nav/examples/Nav.md +691 -902
  311. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +515 -145
  312. package/docs/demos/Page/examples/Page.md +942 -273
  313. package/docs/demos/Page/examples/Penta.md +66 -26
  314. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +13 -9
  315. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +44 -32
  316. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +1333 -946
  317. package/docs/demos/Skeleton/examples/Skeleton.md +109 -64
  318. package/docs/demos/Table/examples/Table.md +3857 -3418
  319. package/docs/demos/Tabs/examples/Tabs.md +664 -215
  320. package/docs/demos/Toolbar/examples/Toolbar.css +15 -0
  321. package/docs/demos/Toolbar/examples/Toolbar.md +1313 -1475
  322. package/docs/demos/Wizard/examples/Wizard.md +918 -261
  323. package/docs/layouts/Flex/examples/Flex.md +16 -16
  324. package/docs/utilities/BoxShadow/examples/box-shadow.css +5 -5
  325. package/icons/pficons.mjs +1 -0
  326. package/layouts/Flex/flex.css +115 -43
  327. package/layouts/Flex/flex.scss +20 -8
  328. package/package.json +36 -32
  329. package/patternfly-addons.css +732 -972
  330. package/patternfly-base-no-globals-theme-dark-unversioned.css +895 -847
  331. package/patternfly-base-no-globals.css +895 -847
  332. package/patternfly-base-theme-dark-unversioned.css +899 -850
  333. package/patternfly-base.css +899 -850
  334. package/patternfly-no-globals.css +9935 -8997
  335. package/patternfly-theme-dark-unversioned.css +9940 -9001
  336. package/patternfly.css +9940 -9001
  337. package/patternfly.min.css +1 -1
  338. package/patternfly.min.css.map +1 -1
  339. package/sass-utilities/functions.scss +6 -0
  340. package/sass-utilities/mixins.scss +80 -2
  341. package/sass-utilities/scss-variables.scss +8 -8
  342. package/sass-utilities/themes/dark/mixins.scss +3 -1
  343. package/utilities/Accessibility/accessibility.css +12 -12
  344. package/utilities/Spacing/spacing.css +720 -960
  345. package/utilities/Spacing/spacing.scss +4 -8
  346. package/base/themes/dark/_variables.scss +0 -102
  347. package/components/AboutModalBox/themes/dark/about-modal-box.scss +0 -7
  348. package/components/Accordion/themes/dark/accordion.scss +0 -9
  349. package/components/Alert/themes/dark/alert.scss +0 -17
  350. package/components/Badge/themes/dark/badge.scss +0 -9
  351. package/components/Banner/themes/dark/banner.scss +0 -14
  352. package/components/Button/themes/dark/button.scss +0 -51
  353. package/components/Card/themes/dark/card.scss +0 -20
  354. package/components/ClipboardCopy/themes/dark/clipboard-copy.scss +0 -19
  355. package/components/DataList/themes/dark/data-list.scss +0 -10
  356. package/components/DragDrop/themes/dark/drag-drop.scss +0 -7
  357. package/components/Drawer/themes/dark/drawer.scss +0 -13
  358. package/components/Form/themes/dark/form.scss +0 -7
  359. package/components/FormControl/themes/dark/form-control.scss +0 -24
  360. package/components/HelperText/themes/dark/helper-text.scss +0 -7
  361. package/components/Hint/themes/dark/hint.scss +0 -8
  362. package/components/InputGroup/themes/dark/input-group.scss +0 -22
  363. package/components/Label/themes/dark/label.scss +0 -53
  364. package/components/Login/themes/dark/login.scss +0 -12
  365. package/components/Masthead/themes/dark/masthead.scss +0 -14
  366. package/components/ModalBox/themes/dark/modal-box.scss +0 -7
  367. package/components/NotificationBadge/themes/dark/notification-badge.scss +0 -10
  368. package/components/NotificationDrawer/themes/dark/notification-drawer.scss +0 -14
  369. package/components/Page/themes/dark/page.scss +0 -69
  370. package/components/Pagination/themes/dark/pagination.scss +0 -7
  371. package/components/Panel/themes/dark/panel.scss +0 -7
  372. package/components/Popover/themes/dark/popover.scss +0 -11
  373. package/components/Progress/themes/dark/progress.scss +0 -9
  374. package/components/SimpleList/themes/dark/simple-list.scss +0 -14
  375. package/components/Skeleton/themes/dark/skeleton.scss +0 -10
  376. package/components/Switch/themes/dark/switch.scss +0 -11
  377. package/components/Tabs/themes/dark/tabs.scss +0 -10
  378. package/components/Tile/themes/dark/tile.scss +0 -10
  379. package/components/ToggleGroup/themes/dark/toggle-group.scss +0 -12
  380. package/components/Tooltip/themes/dark/tooltip.scss +0 -8
  381. package/docs/components/Avatar/examples/Avatar.css +0 -3
  382. package/docs/components/NotificationBadge/examples/NotificationBadge.css +0 -3
package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md CHANGED
@@ -29,23 +29,117 @@ wrapperTag: div
29
29
  </span>
30
30
  <div class="pf-v5-c-masthead__main">
31
31
  <a class="pf-v5-c-masthead__brand" href="#">
32
- <img
33
- class="pf-v5-c-brand"
34
- src="/assets/images/pf-logo.svg"
35
- alt="PatternFly logo"
36
- style="--pf-v5-c-brand--Height:36px"
37
- />
32
+ <svg height="40px" viewBox="0 0 679 158">
33
+ <title>PF-HorizontalLogo-Color</title>
34
+ <defs>
35
+ <linearGradient
36
+ x1="68%"
37
+ y1="2.25860997e-13%"
38
+ x2="32%"
39
+ y2="100%"
40
+ id="linearGradient-primary-detail-expanded-example-masthead"
41
+ >
42
+ <stop stop-color="#2B9AF3" offset="0%" />
43
+ <stop
44
+ stop-color="#73BCF7"
45
+ stop-opacity="0.502212631"
46
+ offset="100%"
47
+ />
48
+ </linearGradient>
49
+ </defs>
50
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
51
+ <g
52
+ transform="translate(206.000000, 45.750000)"
53
+ fill="var(--pf-t--global--text--color--regular)"
54
+ fill-rule="nonzero"
55
+ >
56
+ <path
57
+ d="M0,65.25 L0,2.25 L33.21,2.25 C37.35,2.25 41.025,3.135 44.235,4.905 C47.445,6.675 49.98,9.09 51.84,12.15 C53.7,15.21 54.63,18.72 54.63,22.68 C54.63,26.46 53.7,29.865 51.84,32.895 C49.98,35.925 47.43,38.31 44.19,40.05 C40.95,41.79 37.29,42.66 33.21,42.66 L15.48,42.66 L15.48,65.25 L0,65.25 Z M15.48,29.88 L31.41,29.88 C33.69,29.88 35.52,29.22 36.9,27.9 C38.28,26.58 38.97,24.87 38.97,22.77 C38.97,20.61 38.28,18.855 36.9,17.505 C35.52,16.155 33.69,15.48 31.41,15.48 L15.48,15.48 L15.48,29.88 Z"
58
+ />
59
+ <path
60
+ d="M77.04,66.06 C73.68,66.06 70.695,65.43 68.085,64.17 C65.475,62.91 63.435,61.17 61.965,58.95 C60.495,56.73 59.76,54.18 59.76,51.3 C59.76,46.74 61.485,43.215 64.935,40.725 C68.385,38.235 73.2,36.99 79.38,36.99 C83.1,36.99 86.7,37.44 90.18,38.34 L90.18,36 C90.18,31.26 87.15,28.89 81.09,28.89 C77.49,28.89 72.69,30.15 66.69,32.67 L61.47,21.96 C69.15,18.48 76.56,16.74 83.7,16.74 C90.3,16.74 95.43,18.315 99.09,21.465 C102.75,24.615 104.58,29.04 104.58,34.74 L104.58,65.25 L90.18,65.25 L90.18,62.37 C88.26,63.69 86.235,64.635 84.105,65.205 C81.975,65.775 79.62,66.06 77.04,66.06 Z M73.62,51.03 C73.62,52.53 74.28,53.7 75.6,54.54 C76.92,55.38 78.75,55.8 81.09,55.8 C84.69,55.8 87.72,55.05 90.18,53.55 L90.18,47.43 C87.42,46.71 84.54,46.35 81.54,46.35 C79.02,46.35 77.07,46.755 75.69,47.565 C74.31,48.375 73.62,49.53 73.62,51.03 Z"
61
+ />
62
+ <path
63
+ d="M137.25,65.88 C125.73,65.88 119.97,60.84 119.97,50.76 L119.97,29.79 L110.34,29.79 L110.34,17.64 L119.97,17.64 L119.97,5.4 L134.55,2.25 L134.55,17.64 L147.87,17.64 L147.87,29.79 L134.55,29.79 L134.55,47.88 C134.55,49.98 135.015,51.465 135.945,52.335 C136.875,53.205 138.51,53.64 140.85,53.64 C143.01,53.64 145.2,53.31 147.42,52.65 L147.42,64.44 C146.1,64.86 144.42,65.205 142.38,65.475 C140.34,65.745 138.63,65.88 137.25,65.88 Z"
64
+ />
65
+ <path
66
+ d="M177.57,65.88 C166.05,65.88 160.29,60.84 160.29,50.76 L160.29,29.79 L150.66,29.79 L150.66,17.64 L160.29,17.64 L160.29,5.4 L174.87,2.25 L174.87,17.64 L188.19,17.64 L188.19,29.79 L174.87,29.79 L174.87,47.88 C174.87,49.98 175.335,51.465 176.265,52.335 C177.195,53.205 178.83,53.64 181.17,53.64 C183.33,53.64 185.52,53.31 187.74,52.65 L187.74,64.44 C186.42,64.86 184.74,65.205 182.7,65.475 C180.66,65.745 178.95,65.88 177.57,65.88 Z"
67
+ />
68
+ <path
69
+ d="M217.62,66.15 C212.76,66.15 208.365,65.055 204.435,62.865 C200.505,60.675 197.4,57.72 195.12,54 C192.84,50.28 191.7,46.11 191.7,41.49 C191.7,36.87 192.795,32.7 194.985,28.98 C197.175,25.26 200.16,22.305 203.94,20.115 C207.72,17.925 211.92,16.83 216.54,16.83 C221.22,16.83 225.36,17.955 228.96,20.205 C232.56,22.455 235.395,25.53 237.465,29.43 C239.535,33.33 240.57,37.8 240.57,42.84 L240.57,46.44 L206.64,46.44 C207.6,48.66 209.1,50.475 211.14,51.885 C213.18,53.295 215.58,54 218.34,54 C222.42,54 225.6,52.8 227.88,50.4 L237.51,58.95 C234.51,61.47 231.435,63.3 228.285,64.44 C225.135,65.58 221.58,66.15 217.62,66.15 Z M206.37,36.27 L226.26,36.27 C225.48,33.99 224.205,32.16 222.435,30.78 C220.665,29.4 218.61,28.71 216.27,28.71 C213.87,28.71 211.8,29.37 210.06,30.69 C208.32,32.01 207.09,33.87 206.37,36.27 Z"
70
+ />
71
+ <path
72
+ d="M247.41,65.25 L247.41,17.64 L261.99,17.64 L261.99,22.41 C265.23,18.51 269.4,16.56 274.5,16.56 C277.08,16.62 278.91,17.01 279.99,17.73 L279.99,30.42 C277.95,29.46 275.64,28.98 273.06,28.98 C270.78,28.98 268.665,29.505 266.715,30.555 C264.765,31.605 263.19,33.09 261.99,35.01 L261.99,65.25 L247.41,65.25 Z"
73
+ />
74
+ <path
75
+ d="M286.29,65.25 L286.29,17.64 L300.87,17.64 L300.87,20.88 C304.47,18.12 308.73,16.74 313.65,16.74 C317.37,16.74 320.655,17.55 323.505,19.17 C326.355,20.79 328.59,23.04 330.21,25.92 C331.83,28.8 332.64,32.13 332.64,35.91 L332.64,65.25 L318.06,65.25 L318.06,37.89 C318.06,35.25 317.28,33.15 315.72,31.59 C314.16,30.03 312.06,29.25 309.42,29.25 C305.76,29.25 302.91,30.51 300.87,33.03 L300.87,65.25 L286.29,65.25 Z"
76
+ />
77
+ <polygon
78
+ points="342 65.25 342 2.25 392.04 2.25 392.04 15.66 357.48 15.66 357.48 27.45 380.52 27.45 380.52 40.41 357.48 40.41 357.48 65.25"
79
+ />
80
+ <polygon points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25" />
81
+ <path
82
+ d="M429.21,84.69 C428.07,84.69 426.96,84.645 425.88,84.555 C424.8,84.465 423.9,84.33 423.18,84.15 L423.18,71.73 C424.38,71.97 425.88,72.09 427.68,72.09 C432.36,72.09 435.51,70.05 437.13,65.97 L437.13,65.88 L418.86,17.64 L434.97,17.64 L445.5,47.61 L457.74,17.64 L473.49,17.64 L452.16,67.68 C450.42,71.82 448.5,75.135 446.4,77.625 C444.3,80.115 441.87,81.915 439.11,83.025 C436.35,84.135 433.05,84.69 429.21,84.69 Z"
83
+ />
84
+ </g>
85
+ <g transform="translate(0.000000, 0.000000)">
86
+ <path
87
+ d="M61.826087,0 L158,0 L158,96.173913 L147.695652,96.173913 C100.271201,96.173913 61.826087,57.7287992 61.826087,10.3043478 L61.826087,0 L61.826087,0 Z"
88
+ fill="#0066CC"
89
+ />
90
+ <path
91
+ d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
92
+ fill="url(#linearGradient-primary-detail-expanded-example-masthead)"
93
+ />
94
+ <path
95
+ d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z"
96
+ fill="url(#linearGradient-primary-detail-expanded-example-masthead)"
97
+ transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
98
+ />
99
+ </g>
100
+ </g>
101
+ </svg>
38
102
  </a>
39
103
  </div>
40
104
  <div class="pf-v5-c-masthead__content">
41
105
  <div
42
- class="pf-v5-c-toolbar pf-m-full-height pf-m-static"
106
+ class="pf-v5-c-toolbar pf-m-static"
43
107
  id="primary-detail-expanded-example-masthead-toolbar"
44
108
  >
45
109
  <div class="pf-v5-c-toolbar__content">
46
110
  <div class="pf-v5-c-toolbar__content-section">
111
+ <div class="pf-v5-c-toolbar__item">
112
+ <button
113
+ class="pf-v5-c-menu-toggle"
114
+ type="button"
115
+ aria-expanded="false"
116
+ >
117
+ <span class="pf-v5-c-menu-toggle__text">Overview</span>
118
+ <span class="pf-v5-c-menu-toggle__controls">
119
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
120
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
121
+ </span>
122
+ </span>
123
+ </button>
124
+ </div>
125
+
126
+ <div class="pf-v5-c-toolbar__item">
127
+ <button
128
+ class="pf-v5-c-menu-toggle"
129
+ type="button"
130
+ aria-expanded="false"
131
+ >
132
+ <span class="pf-v5-c-menu-toggle__text">Services</span>
133
+ <span class="pf-v5-c-menu-toggle__controls">
134
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
135
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
136
+ </span>
137
+ </span>
138
+ </button>
139
+ </div>
140
+
47
141
  <div
48
- class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
142
+ class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-align-end pf-m-spacer-none pf-m-spacer-md-on-md"
49
143
  >
50
144
  <div
51
145
  class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
@@ -92,27 +186,6 @@ wrapperTag: div
92
186
  </button>
93
187
  </div>
94
188
  </div>
95
- <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
96
- <button
97
- class="pf-v5-c-menu-toggle pf-m-full-height"
98
- type="button"
99
- aria-expanded="false"
100
- >
101
- <span class="pf-v5-c-menu-toggle__icon">
102
- <img
103
- class="pf-v5-c-avatar"
104
- alt="Avatar image"
105
- src="/assets/images/img_avatar-light.svg"
106
- />
107
- </span>
108
- <span class="pf-v5-c-menu-toggle__text">Ned Username</span>
109
- <span class="pf-v5-c-menu-toggle__controls">
110
- <span class="pf-v5-c-menu-toggle__toggle-icon">
111
- <i class="fas fa-angle-down" aria-hidden="true"></i>
112
- </span>
113
- </span>
114
- </button>
115
- </div>
116
189
  </div>
117
190
  </div>
118
191
  </div>
@@ -215,12 +288,12 @@ wrapperTag: div
215
288
  <div
216
289
  class="pf-v5-c-toolbar__group pf-m-toggle-group pf-m-show-on-xl"
217
290
  >
218
- <div class="pf-v5-c-toolbar__toggle">
291
+ <div class="pf-v5-c-toolbar__toggle pf-m-show">
219
292
  <button
220
- class="pf-v5-c-button pf-m-plain"
293
+ class="pf-v5-c-menu-toggle pf-m-plain"
221
294
  type="button"
222
- aria-label="Show filters"
223
295
  aria-expanded="false"
296
+ aria-label="Show filters"
224
297
  aria-controls="primary-detail-expanded-example-drawer-toolbar-expandable-content"
225
298
  >
226
299
  <i class="fas fa-filter" aria-hidden="true"></i>
@@ -234,83 +307,25 @@ wrapperTag: div
234
307
  role="group"
235
308
  >
236
309
  <div class="pf-v5-c-input-group__item">
237
- <div class="pf-v5-c-select" style="width: 124px">
238
- <span
239
- id="primary-detail-expanded-example-drawer-toolbar-select-name-label"
240
- hidden
241
- >Choose one</span>
242
-
243
- <button
244
- class="pf-v5-c-select__toggle"
245
- type="button"
246
- id="primary-detail-expanded-example-drawer-toolbar-select-name-toggle"
247
- aria-haspopup="true"
248
- aria-expanded="false"
249
- aria-labelledby="primary-detail-expanded-example-drawer-toolbar-select-name-label primary-detail-expanded-example-drawer-toolbar-select-name-toggle"
250
- >
251
- <div class="pf-v5-c-select__toggle-wrapper">
252
- <span class="pf-v5-c-select__toggle-icon">
253
- <i class="fas fa-filter" aria-hidden="true"></i>
254
- </span>
255
- <span class="pf-v5-c-select__toggle-text">Name</span>
256
- </div>
257
- <span class="pf-v5-c-select__toggle-arrow">
310
+ <button
311
+ class="pf-v5-c-menu-toggle"
312
+ type="button"
313
+ aria-expanded="false"
314
+ id="primary-detail-expanded-example-drawer-toolbar-search-filter-menu"
315
+ >
316
+ <span class="pf-v5-c-menu-toggle__icon">
317
+ <i class="fas fa-filter" aria-hidden="true"></i>
318
+ </span>
319
+ <span class="pf-v5-c-menu-toggle__text">Name</span>
320
+ <span class="pf-v5-c-menu-toggle__controls">
321
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
258
322
  <i
259
- class="fas fa-caret-down"
323
+ class="fas fa-angle-down"
260
324
  aria-hidden="true"
261
325
  ></i>
262
326
  </span>
263
- </button>
264
-
265
- <ul
266
- class="pf-v5-c-select__menu"
267
- role="listbox"
268
- aria-labelledby="primary-detail-expanded-example-drawer-toolbar-select-name-label"
269
- hidden
270
- >
271
- <li role="presentation">
272
- <button
273
- class="pf-v5-c-select__menu-item"
274
- role="option"
275
- >Running</button>
276
- </li>
277
- <li role="presentation">
278
- <button
279
- class="pf-v5-c-select__menu-item pf-m-selected"
280
- role="option"
281
- aria-selected="true"
282
- >
283
- Stopped
284
- <span
285
- class="pf-v5-c-select__menu-item-icon"
286
- >
287
- <i
288
- class="fas fa-check"
289
- aria-hidden="true"
290
- ></i>
291
- </span>
292
- </button>
293
- </li>
294
- <li role="presentation">
295
- <button
296
- class="pf-v5-c-select__menu-item"
297
- role="option"
298
- >Down</button>
299
- </li>
300
- <li role="presentation">
301
- <button
302
- class="pf-v5-c-select__menu-item"
303
- role="option"
304
- >Degraded</button>
305
- </li>
306
- <li role="presentation">
307
- <button
308
- class="pf-v5-c-select__menu-item"
309
- role="option"
310
- >Needs maintenance</button>
311
- </li>
312
- </ul>
313
- </div>
327
+ </span>
328
+ </button>
314
329
  </div>
315
330
  <div class="pf-v5-c-input-group__item pf-m-fill">
316
331
  <div class="pf-v5-c-text-input-group">
@@ -366,73 +381,77 @@ wrapperTag: div
366
381
  >
367
382
  <label
368
383
  class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
369
- for="primary-detail-expanded-example-drawer-toolbar-select-checkbox-status-active"
384
+ id="primary-detail-expanded-example-drawer-toolbar-select-checkbox-status-active"
385
+ for="primary-detail-expanded-example-drawer-toolbar-select-checkbox-status-active-input"
370
386
  >
371
387
  <input
372
388
  class="pf-v5-c-check__input"
373
389
  type="checkbox"
374
- id="primary-detail-expanded-example-drawer-toolbar-select-checkbox-status-active"
375
- name="primary-detail-expanded-example-drawer-toolbar-select-checkbox-status-active"
390
+ aria-describedby="primary-detail-expanded-example-drawer-toolbar-select-checkbox-status-active-description"
391
+ id="primary-detail-expanded-example-drawer-toolbar-select-checkbox-status-active-input"
392
+ name="primary-detail-expanded-example-drawer-toolbar-select-checkbox-status-active-input"
376
393
  />
377
-
378
394
  <span class="pf-v5-c-check__label">Active</span>
379
395
  <span
380
396
  class="pf-v5-c-check__description"
397
+ id="primary-detail-expanded-example-drawer-toolbar-select-checkbox-status-active-description"
381
398
  >This is a description</span>
382
399
  </label>
383
400
  <label
384
401
  class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
385
- for="primary-detail-expanded-example-drawer-toolbar-select-checkbox-status-canceled"
402
+ id="primary-detail-expanded-example-drawer-toolbar-select-checkbox-status-canceled"
403
+ for="primary-detail-expanded-example-drawer-toolbar-select-checkbox-status-canceled-input"
386
404
  >
387
405
  <input
388
406
  class="pf-v5-c-check__input"
389
407
  type="checkbox"
390
- id="primary-detail-expanded-example-drawer-toolbar-select-checkbox-status-canceled"
391
- name="primary-detail-expanded-example-drawer-toolbar-select-checkbox-status-canceled"
408
+ aria-describedby="primary-detail-expanded-example-drawer-toolbar-select-checkbox-status-canceled-description"
409
+ id="primary-detail-expanded-example-drawer-toolbar-select-checkbox-status-canceled-input"
410
+ name="primary-detail-expanded-example-drawer-toolbar-select-checkbox-status-canceled-input"
392
411
  />
393
-
394
412
  <span class="pf-v5-c-check__label">Canceled</span>
395
413
  <span
396
414
  class="pf-v5-c-check__description"
415
+ id="primary-detail-expanded-example-drawer-toolbar-select-checkbox-status-canceled-description"
397
416
  >This is a really long description that describes the menu item. This is a really long description that describes the menu item.</span>
398
417
  </label>
399
418
  <label
400
419
  class="pf-v5-c-check pf-v5-c-select__menu-item"
401
- for="primary-detail-expanded-example-drawer-toolbar-select-checkbox-status-paused"
420
+ id="primary-detail-expanded-example-drawer-toolbar-select-checkbox-status-paused"
421
+ for="primary-detail-expanded-example-drawer-toolbar-select-checkbox-status-paused-input"
402
422
  >
403
423
  <input
404
424
  class="pf-v5-c-check__input"
405
425
  type="checkbox"
406
- id="primary-detail-expanded-example-drawer-toolbar-select-checkbox-status-paused"
407
- name="primary-detail-expanded-example-drawer-toolbar-select-checkbox-status-paused"
426
+ id="primary-detail-expanded-example-drawer-toolbar-select-checkbox-status-paused-input"
427
+ name="primary-detail-expanded-example-drawer-toolbar-select-checkbox-status-paused-input"
408
428
  />
409
-
410
429
  <span class="pf-v5-c-check__label">Paused</span>
411
430
  </label>
412
431
  <label
413
432
  class="pf-v5-c-check pf-v5-c-select__menu-item"
414
- for="primary-detail-expanded-example-drawer-toolbar-select-checkbox-status-warning"
433
+ id="primary-detail-expanded-example-drawer-toolbar-select-checkbox-status-warning"
434
+ for="primary-detail-expanded-example-drawer-toolbar-select-checkbox-status-warning-input"
415
435
  >
416
436
  <input
417
437
  class="pf-v5-c-check__input"
418
438
  type="checkbox"
419
- id="primary-detail-expanded-example-drawer-toolbar-select-checkbox-status-warning"
420
- name="primary-detail-expanded-example-drawer-toolbar-select-checkbox-status-warning"
439
+ id="primary-detail-expanded-example-drawer-toolbar-select-checkbox-status-warning-input"
440
+ name="primary-detail-expanded-example-drawer-toolbar-select-checkbox-status-warning-input"
421
441
  />
422
-
423
442
  <span class="pf-v5-c-check__label">Warning</span>
424
443
  </label>
425
444
  <label
426
445
  class="pf-v5-c-check pf-v5-c-select__menu-item"
427
- for="primary-detail-expanded-example-drawer-toolbar-select-checkbox-status-restarted"
446
+ id="primary-detail-expanded-example-drawer-toolbar-select-checkbox-status-restarted"
447
+ for="primary-detail-expanded-example-drawer-toolbar-select-checkbox-status-restarted-input"
428
448
  >
429
449
  <input
430
450
  class="pf-v5-c-check__input"
431
451
  type="checkbox"
432
- id="primary-detail-expanded-example-drawer-toolbar-select-checkbox-status-restarted"
433
- name="primary-detail-expanded-example-drawer-toolbar-select-checkbox-status-restarted"
452
+ id="primary-detail-expanded-example-drawer-toolbar-select-checkbox-status-restarted-input"
453
+ name="primary-detail-expanded-example-drawer-toolbar-select-checkbox-status-restarted-input"
434
454
  />
435
-
436
455
  <span class="pf-v5-c-check__label">Restarted</span>
437
456
  </label>
438
457
  </fieldset>
@@ -469,73 +488,77 @@ wrapperTag: div
469
488
  >
470
489
  <label
471
490
  class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
472
- for="primary-detail-expanded-example-drawer-toolbar-select-checkbox-risk-active"
491
+ id="primary-detail-expanded-example-drawer-toolbar-select-checkbox-risk-active"
492
+ for="primary-detail-expanded-example-drawer-toolbar-select-checkbox-risk-active-input"
473
493
  >
474
494
  <input
475
495
  class="pf-v5-c-check__input"
476
496
  type="checkbox"
477
- id="primary-detail-expanded-example-drawer-toolbar-select-checkbox-risk-active"
478
- name="primary-detail-expanded-example-drawer-toolbar-select-checkbox-risk-active"
497
+ aria-describedby="primary-detail-expanded-example-drawer-toolbar-select-checkbox-risk-active-description"
498
+ id="primary-detail-expanded-example-drawer-toolbar-select-checkbox-risk-active-input"
499
+ name="primary-detail-expanded-example-drawer-toolbar-select-checkbox-risk-active-input"
479
500
  />
480
-
481
501
  <span class="pf-v5-c-check__label">Active</span>
482
502
  <span
483
503
  class="pf-v5-c-check__description"
504
+ id="primary-detail-expanded-example-drawer-toolbar-select-checkbox-risk-active-description"
484
505
  >This is a description</span>
485
506
  </label>
486
507
  <label
487
508
  class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
488
- for="primary-detail-expanded-example-drawer-toolbar-select-checkbox-risk-canceled"
509
+ id="primary-detail-expanded-example-drawer-toolbar-select-checkbox-risk-canceled"
510
+ for="primary-detail-expanded-example-drawer-toolbar-select-checkbox-risk-canceled-input"
489
511
  >
490
512
  <input
491
513
  class="pf-v5-c-check__input"
492
514
  type="checkbox"
493
- id="primary-detail-expanded-example-drawer-toolbar-select-checkbox-risk-canceled"
494
- name="primary-detail-expanded-example-drawer-toolbar-select-checkbox-risk-canceled"
515
+ aria-describedby="primary-detail-expanded-example-drawer-toolbar-select-checkbox-risk-canceled-description"
516
+ id="primary-detail-expanded-example-drawer-toolbar-select-checkbox-risk-canceled-input"
517
+ name="primary-detail-expanded-example-drawer-toolbar-select-checkbox-risk-canceled-input"
495
518
  />
496
-
497
519
  <span class="pf-v5-c-check__label">Canceled</span>
498
520
  <span
499
521
  class="pf-v5-c-check__description"
522
+ id="primary-detail-expanded-example-drawer-toolbar-select-checkbox-risk-canceled-description"
500
523
  >This is a really long description that describes the menu item. This is a really long description that describes the menu item.</span>
501
524
  </label>
502
525
  <label
503
526
  class="pf-v5-c-check pf-v5-c-select__menu-item"
504
- for="primary-detail-expanded-example-drawer-toolbar-select-checkbox-risk-paused"
527
+ id="primary-detail-expanded-example-drawer-toolbar-select-checkbox-risk-paused"
528
+ for="primary-detail-expanded-example-drawer-toolbar-select-checkbox-risk-paused-input"
505
529
  >
506
530
  <input
507
531
  class="pf-v5-c-check__input"
508
532
  type="checkbox"
509
- id="primary-detail-expanded-example-drawer-toolbar-select-checkbox-risk-paused"
510
- name="primary-detail-expanded-example-drawer-toolbar-select-checkbox-risk-paused"
533
+ id="primary-detail-expanded-example-drawer-toolbar-select-checkbox-risk-paused-input"
534
+ name="primary-detail-expanded-example-drawer-toolbar-select-checkbox-risk-paused-input"
511
535
  />
512
-
513
536
  <span class="pf-v5-c-check__label">Paused</span>
514
537
  </label>
515
538
  <label
516
539
  class="pf-v5-c-check pf-v5-c-select__menu-item"
517
- for="primary-detail-expanded-example-drawer-toolbar-select-checkbox-risk-warning"
540
+ id="primary-detail-expanded-example-drawer-toolbar-select-checkbox-risk-warning"
541
+ for="primary-detail-expanded-example-drawer-toolbar-select-checkbox-risk-warning-input"
518
542
  >
519
543
  <input
520
544
  class="pf-v5-c-check__input"
521
545
  type="checkbox"
522
- id="primary-detail-expanded-example-drawer-toolbar-select-checkbox-risk-warning"
523
- name="primary-detail-expanded-example-drawer-toolbar-select-checkbox-risk-warning"
546
+ id="primary-detail-expanded-example-drawer-toolbar-select-checkbox-risk-warning-input"
547
+ name="primary-detail-expanded-example-drawer-toolbar-select-checkbox-risk-warning-input"
524
548
  />
525
-
526
549
  <span class="pf-v5-c-check__label">Warning</span>
527
550
  </label>
528
551
  <label
529
552
  class="pf-v5-c-check pf-v5-c-select__menu-item"
530
- for="primary-detail-expanded-example-drawer-toolbar-select-checkbox-risk-restarted"
553
+ id="primary-detail-expanded-example-drawer-toolbar-select-checkbox-risk-restarted"
554
+ for="primary-detail-expanded-example-drawer-toolbar-select-checkbox-risk-restarted-input"
531
555
  >
532
556
  <input
533
557
  class="pf-v5-c-check__input"
534
558
  type="checkbox"
535
- id="primary-detail-expanded-example-drawer-toolbar-select-checkbox-risk-restarted"
536
- name="primary-detail-expanded-example-drawer-toolbar-select-checkbox-risk-restarted"
559
+ id="primary-detail-expanded-example-drawer-toolbar-select-checkbox-risk-restarted-input"
560
+ name="primary-detail-expanded-example-drawer-toolbar-select-checkbox-risk-restarted-input"
537
561
  />
538
-
539
562
  <span class="pf-v5-c-check__label">Restarted</span>
540
563
  </label>
541
564
  </fieldset>
@@ -551,7 +574,10 @@ wrapperTag: div
551
574
  type="button"
552
575
  aria-label="Sort"
553
576
  >
554
- <i class="fas fa-sort-amount-down" aria-hidden="true"></i>
577
+ <i
578
+ class="fas fa-sort-amount-down pf-v5-m-mirror-inline-rtl"
579
+ aria-hidden="true"
580
+ ></i>
555
581
  </button>
556
582
  </div>
557
583
 
@@ -603,57 +629,59 @@ wrapperTag: div
603
629
 
604
630
  <div class="pf-v5-c-toolbar__item pf-m-pagination">
605
631
  <div class="pf-v5-c-pagination pf-m-compact">
606
- <div class="pf-v5-c-options-menu">
607
- <button
608
- class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
609
- type="button"
610
- id="primary-detail-expanded-example-drawer-toolbar-top-pagination-toggle"
611
- aria-haspopup="listbox"
612
- aria-expanded="false"
613
- >
614
- <span class="pf-v5-c-options-menu__toggle-text">
615
- <b>1 - 10</b>&nbsp;of&nbsp;
616
- <b>36</b>
617
- </span>
618
- <div class="pf-v5-c-options-menu__toggle-icon">
619
- <i class="fas fa-caret-down" aria-hidden="true"></i>
620
- </div>
621
- </button>
622
- <ul
623
- class="pf-v5-c-options-menu__menu"
624
- role="menu"
625
- aria-labelledby="primary-detail-expanded-example-drawer-toolbar-top-pagination-toggle"
626
- hidden
627
- >
628
- <li role="none">
629
- <button
630
- class="pf-v5-c-options-menu__menu-item"
631
- type="button"
632
- role="menuitem"
633
- >5 per page</button>
634
- </li>
635
- <li role="none">
636
- <button
637
- class="pf-v5-c-options-menu__menu-item"
638
- type="button"
639
- role="menuitem"
640
- >
641
- 10 per page
642
- <div
643
- class="pf-v5-c-options-menu__menu-item-icon"
632
+ <div class="pf-v5-c-pagination__page-menu">
633
+ <div class="pf-v5-c-options-menu">
634
+ <button
635
+ class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
636
+ type="button"
637
+ id="primary-detail-expanded-example-drawer-toolbar-top-pagination-toggle"
638
+ aria-haspopup="listbox"
639
+ aria-expanded="false"
640
+ >
641
+ <span class="pf-v5-c-options-menu__toggle-text">
642
+ <b>1 - 10</b>&nbsp;of&nbsp;
643
+ <b>36</b>
644
+ </span>
645
+ <div class="pf-v5-c-options-menu__toggle-icon">
646
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
647
+ </div>
648
+ </button>
649
+ <ul
650
+ class="pf-v5-c-options-menu__menu"
651
+ role="menu"
652
+ aria-labelledby="primary-detail-expanded-example-drawer-toolbar-top-pagination-toggle"
653
+ hidden
654
+ >
655
+ <li role="none">
656
+ <button
657
+ class="pf-v5-c-options-menu__menu-item"
658
+ type="button"
659
+ role="menuitem"
660
+ >5 per page</button>
661
+ </li>
662
+ <li role="none">
663
+ <button
664
+ class="pf-v5-c-options-menu__menu-item"
665
+ type="button"
666
+ role="menuitem"
644
667
  >
645
- <i class="fas fa-check" aria-hidden="true"></i>
646
- </div>
647
- </button>
648
- </li>
649
- <li role="none">
650
- <button
651
- class="pf-v5-c-options-menu__menu-item"
652
- type="button"
653
- role="menuitem"
654
- >20 per page</button>
655
- </li>
656
- </ul>
668
+ 10 per page
669
+ <div
670
+ class="pf-v5-c-options-menu__menu-item-icon"
671
+ >
672
+ <i class="fas fa-check" aria-hidden="true"></i>
673
+ </div>
674
+ </button>
675
+ </li>
676
+ <li role="none">
677
+ <button
678
+ class="pf-v5-c-options-menu__menu-item"
679
+ type="button"
680
+ role="menuitem"
681
+ >20 per page</button>
682
+ </li>
683
+ </ul>
684
+ </div>
657
685
  </div>
658
686
  <nav
659
687
  class="pf-v5-c-pagination__nav"
@@ -1119,13 +1147,15 @@ wrapperTag: div
1119
1147
  role="region"
1120
1148
  id="primary-detail-expanded-example-drawer-tabs"
1121
1149
  >
1122
- <button
1123
- class="pf-v5-c-tabs__scroll-button"
1124
- type="button"
1125
- aria-label="Scroll left"
1126
- >
1127
- <i class="fas fa-angle-left" aria-hidden="true"></i>
1128
- </button>
1150
+ <div class="pf-v5-c-tabs__scroll-button">
1151
+ <button
1152
+ class="pf-v5-c-button pf-m-plain"
1153
+ type="button"
1154
+ aria-label="Scroll left"
1155
+ >
1156
+ <i class="fas fa-angle-left" aria-hidden="true"></i>
1157
+ </button>
1158
+ </div>
1129
1159
  <ul class="pf-v5-c-tabs__list" role="tablist">
1130
1160
  <li
1131
1161
  class="pf-v5-c-tabs__item pf-m-current"
@@ -1153,13 +1183,15 @@ wrapperTag: div
1153
1183
  </button>
1154
1184
  </li>
1155
1185
  </ul>
1156
- <button
1157
- class="pf-v5-c-tabs__scroll-button"
1158
- type="button"
1159
- aria-label="Scroll right"
1160
- >
1161
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1162
- </button>
1186
+ <div class="pf-v5-c-tabs__scroll-button">
1187
+ <button
1188
+ class="pf-v5-c-button pf-m-plain"
1189
+ type="button"
1190
+ aria-label="Scroll right"
1191
+ >
1192
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
1193
+ </button>
1194
+ </div>
1163
1195
  </div>
1164
1196
  </div>
1165
1197
 
@@ -1287,23 +1319,117 @@ wrapperTag: div
1287
1319
  </span>
1288
1320
  <div class="pf-v5-c-masthead__main">
1289
1321
  <a class="pf-v5-c-masthead__brand" href="#">
1290
- <img
1291
- class="pf-v5-c-brand"
1292
- src="/assets/images/pf-logo.svg"
1293
- alt="PatternFly logo"
1294
- style="--pf-v5-c-brand--Height:36px"
1295
- />
1322
+ <svg height="40px" viewBox="0 0 679 158">
1323
+ <title>PF-HorizontalLogo-Color</title>
1324
+ <defs>
1325
+ <linearGradient
1326
+ x1="68%"
1327
+ y1="2.25860997e-13%"
1328
+ x2="32%"
1329
+ y2="100%"
1330
+ id="linearGradient-primary-detail-collapsed-example-masthead"
1331
+ >
1332
+ <stop stop-color="#2B9AF3" offset="0%" />
1333
+ <stop
1334
+ stop-color="#73BCF7"
1335
+ stop-opacity="0.502212631"
1336
+ offset="100%"
1337
+ />
1338
+ </linearGradient>
1339
+ </defs>
1340
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
1341
+ <g
1342
+ transform="translate(206.000000, 45.750000)"
1343
+ fill="var(--pf-t--global--text--color--regular)"
1344
+ fill-rule="nonzero"
1345
+ >
1346
+ <path
1347
+ d="M0,65.25 L0,2.25 L33.21,2.25 C37.35,2.25 41.025,3.135 44.235,4.905 C47.445,6.675 49.98,9.09 51.84,12.15 C53.7,15.21 54.63,18.72 54.63,22.68 C54.63,26.46 53.7,29.865 51.84,32.895 C49.98,35.925 47.43,38.31 44.19,40.05 C40.95,41.79 37.29,42.66 33.21,42.66 L15.48,42.66 L15.48,65.25 L0,65.25 Z M15.48,29.88 L31.41,29.88 C33.69,29.88 35.52,29.22 36.9,27.9 C38.28,26.58 38.97,24.87 38.97,22.77 C38.97,20.61 38.28,18.855 36.9,17.505 C35.52,16.155 33.69,15.48 31.41,15.48 L15.48,15.48 L15.48,29.88 Z"
1348
+ />
1349
+ <path
1350
+ d="M77.04,66.06 C73.68,66.06 70.695,65.43 68.085,64.17 C65.475,62.91 63.435,61.17 61.965,58.95 C60.495,56.73 59.76,54.18 59.76,51.3 C59.76,46.74 61.485,43.215 64.935,40.725 C68.385,38.235 73.2,36.99 79.38,36.99 C83.1,36.99 86.7,37.44 90.18,38.34 L90.18,36 C90.18,31.26 87.15,28.89 81.09,28.89 C77.49,28.89 72.69,30.15 66.69,32.67 L61.47,21.96 C69.15,18.48 76.56,16.74 83.7,16.74 C90.3,16.74 95.43,18.315 99.09,21.465 C102.75,24.615 104.58,29.04 104.58,34.74 L104.58,65.25 L90.18,65.25 L90.18,62.37 C88.26,63.69 86.235,64.635 84.105,65.205 C81.975,65.775 79.62,66.06 77.04,66.06 Z M73.62,51.03 C73.62,52.53 74.28,53.7 75.6,54.54 C76.92,55.38 78.75,55.8 81.09,55.8 C84.69,55.8 87.72,55.05 90.18,53.55 L90.18,47.43 C87.42,46.71 84.54,46.35 81.54,46.35 C79.02,46.35 77.07,46.755 75.69,47.565 C74.31,48.375 73.62,49.53 73.62,51.03 Z"
1351
+ />
1352
+ <path
1353
+ d="M137.25,65.88 C125.73,65.88 119.97,60.84 119.97,50.76 L119.97,29.79 L110.34,29.79 L110.34,17.64 L119.97,17.64 L119.97,5.4 L134.55,2.25 L134.55,17.64 L147.87,17.64 L147.87,29.79 L134.55,29.79 L134.55,47.88 C134.55,49.98 135.015,51.465 135.945,52.335 C136.875,53.205 138.51,53.64 140.85,53.64 C143.01,53.64 145.2,53.31 147.42,52.65 L147.42,64.44 C146.1,64.86 144.42,65.205 142.38,65.475 C140.34,65.745 138.63,65.88 137.25,65.88 Z"
1354
+ />
1355
+ <path
1356
+ d="M177.57,65.88 C166.05,65.88 160.29,60.84 160.29,50.76 L160.29,29.79 L150.66,29.79 L150.66,17.64 L160.29,17.64 L160.29,5.4 L174.87,2.25 L174.87,17.64 L188.19,17.64 L188.19,29.79 L174.87,29.79 L174.87,47.88 C174.87,49.98 175.335,51.465 176.265,52.335 C177.195,53.205 178.83,53.64 181.17,53.64 C183.33,53.64 185.52,53.31 187.74,52.65 L187.74,64.44 C186.42,64.86 184.74,65.205 182.7,65.475 C180.66,65.745 178.95,65.88 177.57,65.88 Z"
1357
+ />
1358
+ <path
1359
+ d="M217.62,66.15 C212.76,66.15 208.365,65.055 204.435,62.865 C200.505,60.675 197.4,57.72 195.12,54 C192.84,50.28 191.7,46.11 191.7,41.49 C191.7,36.87 192.795,32.7 194.985,28.98 C197.175,25.26 200.16,22.305 203.94,20.115 C207.72,17.925 211.92,16.83 216.54,16.83 C221.22,16.83 225.36,17.955 228.96,20.205 C232.56,22.455 235.395,25.53 237.465,29.43 C239.535,33.33 240.57,37.8 240.57,42.84 L240.57,46.44 L206.64,46.44 C207.6,48.66 209.1,50.475 211.14,51.885 C213.18,53.295 215.58,54 218.34,54 C222.42,54 225.6,52.8 227.88,50.4 L237.51,58.95 C234.51,61.47 231.435,63.3 228.285,64.44 C225.135,65.58 221.58,66.15 217.62,66.15 Z M206.37,36.27 L226.26,36.27 C225.48,33.99 224.205,32.16 222.435,30.78 C220.665,29.4 218.61,28.71 216.27,28.71 C213.87,28.71 211.8,29.37 210.06,30.69 C208.32,32.01 207.09,33.87 206.37,36.27 Z"
1360
+ />
1361
+ <path
1362
+ d="M247.41,65.25 L247.41,17.64 L261.99,17.64 L261.99,22.41 C265.23,18.51 269.4,16.56 274.5,16.56 C277.08,16.62 278.91,17.01 279.99,17.73 L279.99,30.42 C277.95,29.46 275.64,28.98 273.06,28.98 C270.78,28.98 268.665,29.505 266.715,30.555 C264.765,31.605 263.19,33.09 261.99,35.01 L261.99,65.25 L247.41,65.25 Z"
1363
+ />
1364
+ <path
1365
+ d="M286.29,65.25 L286.29,17.64 L300.87,17.64 L300.87,20.88 C304.47,18.12 308.73,16.74 313.65,16.74 C317.37,16.74 320.655,17.55 323.505,19.17 C326.355,20.79 328.59,23.04 330.21,25.92 C331.83,28.8 332.64,32.13 332.64,35.91 L332.64,65.25 L318.06,65.25 L318.06,37.89 C318.06,35.25 317.28,33.15 315.72,31.59 C314.16,30.03 312.06,29.25 309.42,29.25 C305.76,29.25 302.91,30.51 300.87,33.03 L300.87,65.25 L286.29,65.25 Z"
1366
+ />
1367
+ <polygon
1368
+ points="342 65.25 342 2.25 392.04 2.25 392.04 15.66 357.48 15.66 357.48 27.45 380.52 27.45 380.52 40.41 357.48 40.41 357.48 65.25"
1369
+ />
1370
+ <polygon points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25" />
1371
+ <path
1372
+ d="M429.21,84.69 C428.07,84.69 426.96,84.645 425.88,84.555 C424.8,84.465 423.9,84.33 423.18,84.15 L423.18,71.73 C424.38,71.97 425.88,72.09 427.68,72.09 C432.36,72.09 435.51,70.05 437.13,65.97 L437.13,65.88 L418.86,17.64 L434.97,17.64 L445.5,47.61 L457.74,17.64 L473.49,17.64 L452.16,67.68 C450.42,71.82 448.5,75.135 446.4,77.625 C444.3,80.115 441.87,81.915 439.11,83.025 C436.35,84.135 433.05,84.69 429.21,84.69 Z"
1373
+ />
1374
+ </g>
1375
+ <g transform="translate(0.000000, 0.000000)">
1376
+ <path
1377
+ d="M61.826087,0 L158,0 L158,96.173913 L147.695652,96.173913 C100.271201,96.173913 61.826087,57.7287992 61.826087,10.3043478 L61.826087,0 L61.826087,0 Z"
1378
+ fill="#0066CC"
1379
+ />
1380
+ <path
1381
+ d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
1382
+ fill="url(#linearGradient-primary-detail-collapsed-example-masthead)"
1383
+ />
1384
+ <path
1385
+ d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z"
1386
+ fill="url(#linearGradient-primary-detail-collapsed-example-masthead)"
1387
+ transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
1388
+ />
1389
+ </g>
1390
+ </g>
1391
+ </svg>
1296
1392
  </a>
1297
1393
  </div>
1298
1394
  <div class="pf-v5-c-masthead__content">
1299
1395
  <div
1300
- class="pf-v5-c-toolbar pf-m-full-height pf-m-static"
1396
+ class="pf-v5-c-toolbar pf-m-static"
1301
1397
  id="primary-detail-collapsed-example-masthead-toolbar"
1302
1398
  >
1303
1399
  <div class="pf-v5-c-toolbar__content">
1304
1400
  <div class="pf-v5-c-toolbar__content-section">
1401
+ <div class="pf-v5-c-toolbar__item">
1402
+ <button
1403
+ class="pf-v5-c-menu-toggle"
1404
+ type="button"
1405
+ aria-expanded="false"
1406
+ >
1407
+ <span class="pf-v5-c-menu-toggle__text">Overview</span>
1408
+ <span class="pf-v5-c-menu-toggle__controls">
1409
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
1410
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
1411
+ </span>
1412
+ </span>
1413
+ </button>
1414
+ </div>
1415
+
1416
+ <div class="pf-v5-c-toolbar__item">
1417
+ <button
1418
+ class="pf-v5-c-menu-toggle"
1419
+ type="button"
1420
+ aria-expanded="false"
1421
+ >
1422
+ <span class="pf-v5-c-menu-toggle__text">Services</span>
1423
+ <span class="pf-v5-c-menu-toggle__controls">
1424
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
1425
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
1426
+ </span>
1427
+ </span>
1428
+ </button>
1429
+ </div>
1430
+
1305
1431
  <div
1306
- class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
1432
+ class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-align-end pf-m-spacer-none pf-m-spacer-md-on-md"
1307
1433
  >
1308
1434
  <div
1309
1435
  class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
@@ -1350,27 +1476,6 @@ wrapperTag: div
1350
1476
  </button>
1351
1477
  </div>
1352
1478
  </div>
1353
- <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
1354
- <button
1355
- class="pf-v5-c-menu-toggle pf-m-full-height"
1356
- type="button"
1357
- aria-expanded="false"
1358
- >
1359
- <span class="pf-v5-c-menu-toggle__icon">
1360
- <img
1361
- class="pf-v5-c-avatar"
1362
- alt="Avatar image"
1363
- src="/assets/images/img_avatar-light.svg"
1364
- />
1365
- </span>
1366
- <span class="pf-v5-c-menu-toggle__text">Ned Username</span>
1367
- <span class="pf-v5-c-menu-toggle__controls">
1368
- <span class="pf-v5-c-menu-toggle__toggle-icon">
1369
- <i class="fas fa-angle-down" aria-hidden="true"></i>
1370
- </span>
1371
- </span>
1372
- </button>
1373
- </div>
1374
1479
  </div>
1375
1480
  </div>
1376
1481
  </div>
@@ -1473,12 +1578,12 @@ wrapperTag: div
1473
1578
  <div
1474
1579
  class="pf-v5-c-toolbar__group pf-m-toggle-group pf-m-show-on-xl"
1475
1580
  >
1476
- <div class="pf-v5-c-toolbar__toggle">
1581
+ <div class="pf-v5-c-toolbar__toggle pf-m-show">
1477
1582
  <button
1478
- class="pf-v5-c-button pf-m-plain"
1583
+ class="pf-v5-c-menu-toggle pf-m-plain"
1479
1584
  type="button"
1480
- aria-label="Show filters"
1481
1585
  aria-expanded="false"
1586
+ aria-label="Show filters"
1482
1587
  aria-controls="primary-detail-collapsed-example-drawer-toolbar-expandable-content"
1483
1588
  >
1484
1589
  <i class="fas fa-filter" aria-hidden="true"></i>
@@ -1492,83 +1597,25 @@ wrapperTag: div
1492
1597
  role="group"
1493
1598
  >
1494
1599
  <div class="pf-v5-c-input-group__item">
1495
- <div class="pf-v5-c-select" style="width: 124px">
1496
- <span
1497
- id="primary-detail-collapsed-example-drawer-toolbar-select-name-label"
1498
- hidden
1499
- >Choose one</span>
1500
-
1501
- <button
1502
- class="pf-v5-c-select__toggle"
1503
- type="button"
1504
- id="primary-detail-collapsed-example-drawer-toolbar-select-name-toggle"
1505
- aria-haspopup="true"
1506
- aria-expanded="false"
1507
- aria-labelledby="primary-detail-collapsed-example-drawer-toolbar-select-name-label primary-detail-collapsed-example-drawer-toolbar-select-name-toggle"
1508
- >
1509
- <div class="pf-v5-c-select__toggle-wrapper">
1510
- <span class="pf-v5-c-select__toggle-icon">
1511
- <i class="fas fa-filter" aria-hidden="true"></i>
1512
- </span>
1513
- <span class="pf-v5-c-select__toggle-text">Name</span>
1514
- </div>
1515
- <span class="pf-v5-c-select__toggle-arrow">
1600
+ <button
1601
+ class="pf-v5-c-menu-toggle"
1602
+ type="button"
1603
+ aria-expanded="false"
1604
+ id="primary-detail-collapsed-example-drawer-toolbar-search-filter-menu"
1605
+ >
1606
+ <span class="pf-v5-c-menu-toggle__icon">
1607
+ <i class="fas fa-filter" aria-hidden="true"></i>
1608
+ </span>
1609
+ <span class="pf-v5-c-menu-toggle__text">Name</span>
1610
+ <span class="pf-v5-c-menu-toggle__controls">
1611
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
1516
1612
  <i
1517
- class="fas fa-caret-down"
1613
+ class="fas fa-angle-down"
1518
1614
  aria-hidden="true"
1519
1615
  ></i>
1520
1616
  </span>
1521
- </button>
1522
-
1523
- <ul
1524
- class="pf-v5-c-select__menu"
1525
- role="listbox"
1526
- aria-labelledby="primary-detail-collapsed-example-drawer-toolbar-select-name-label"
1527
- hidden
1528
- >
1529
- <li role="presentation">
1530
- <button
1531
- class="pf-v5-c-select__menu-item"
1532
- role="option"
1533
- >Running</button>
1534
- </li>
1535
- <li role="presentation">
1536
- <button
1537
- class="pf-v5-c-select__menu-item pf-m-selected"
1538
- role="option"
1539
- aria-selected="true"
1540
- >
1541
- Stopped
1542
- <span
1543
- class="pf-v5-c-select__menu-item-icon"
1544
- >
1545
- <i
1546
- class="fas fa-check"
1547
- aria-hidden="true"
1548
- ></i>
1549
- </span>
1550
- </button>
1551
- </li>
1552
- <li role="presentation">
1553
- <button
1554
- class="pf-v5-c-select__menu-item"
1555
- role="option"
1556
- >Down</button>
1557
- </li>
1558
- <li role="presentation">
1559
- <button
1560
- class="pf-v5-c-select__menu-item"
1561
- role="option"
1562
- >Degraded</button>
1563
- </li>
1564
- <li role="presentation">
1565
- <button
1566
- class="pf-v5-c-select__menu-item"
1567
- role="option"
1568
- >Needs maintenance</button>
1569
- </li>
1570
- </ul>
1571
- </div>
1617
+ </span>
1618
+ </button>
1572
1619
  </div>
1573
1620
  <div class="pf-v5-c-input-group__item pf-m-fill">
1574
1621
  <div class="pf-v5-c-text-input-group">
@@ -1624,73 +1671,77 @@ wrapperTag: div
1624
1671
  >
1625
1672
  <label
1626
1673
  class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
1627
- for="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-status-active"
1674
+ id="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-status-active"
1675
+ for="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-status-active-input"
1628
1676
  >
1629
1677
  <input
1630
1678
  class="pf-v5-c-check__input"
1631
1679
  type="checkbox"
1632
- id="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-status-active"
1633
- name="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-status-active"
1680
+ aria-describedby="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-status-active-description"
1681
+ id="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-status-active-input"
1682
+ name="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-status-active-input"
1634
1683
  />
1635
-
1636
1684
  <span class="pf-v5-c-check__label">Active</span>
1637
1685
  <span
1638
1686
  class="pf-v5-c-check__description"
1687
+ id="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-status-active-description"
1639
1688
  >This is a description</span>
1640
1689
  </label>
1641
1690
  <label
1642
1691
  class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
1643
- for="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-status-canceled"
1692
+ id="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-status-canceled"
1693
+ for="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-status-canceled-input"
1644
1694
  >
1645
1695
  <input
1646
1696
  class="pf-v5-c-check__input"
1647
1697
  type="checkbox"
1648
- id="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-status-canceled"
1649
- name="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-status-canceled"
1698
+ aria-describedby="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-status-canceled-description"
1699
+ id="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-status-canceled-input"
1700
+ name="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-status-canceled-input"
1650
1701
  />
1651
-
1652
1702
  <span class="pf-v5-c-check__label">Canceled</span>
1653
1703
  <span
1654
1704
  class="pf-v5-c-check__description"
1705
+ id="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-status-canceled-description"
1655
1706
  >This is a really long description that describes the menu item. This is a really long description that describes the menu item.</span>
1656
1707
  </label>
1657
1708
  <label
1658
1709
  class="pf-v5-c-check pf-v5-c-select__menu-item"
1659
- for="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-status-paused"
1710
+ id="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-status-paused"
1711
+ for="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-status-paused-input"
1660
1712
  >
1661
1713
  <input
1662
1714
  class="pf-v5-c-check__input"
1663
1715
  type="checkbox"
1664
- id="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-status-paused"
1665
- name="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-status-paused"
1716
+ id="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-status-paused-input"
1717
+ name="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-status-paused-input"
1666
1718
  />
1667
-
1668
1719
  <span class="pf-v5-c-check__label">Paused</span>
1669
1720
  </label>
1670
1721
  <label
1671
1722
  class="pf-v5-c-check pf-v5-c-select__menu-item"
1672
- for="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-status-warning"
1723
+ id="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-status-warning"
1724
+ for="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-status-warning-input"
1673
1725
  >
1674
1726
  <input
1675
1727
  class="pf-v5-c-check__input"
1676
1728
  type="checkbox"
1677
- id="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-status-warning"
1678
- name="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-status-warning"
1729
+ id="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-status-warning-input"
1730
+ name="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-status-warning-input"
1679
1731
  />
1680
-
1681
1732
  <span class="pf-v5-c-check__label">Warning</span>
1682
1733
  </label>
1683
1734
  <label
1684
1735
  class="pf-v5-c-check pf-v5-c-select__menu-item"
1685
- for="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-status-restarted"
1736
+ id="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-status-restarted"
1737
+ for="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-status-restarted-input"
1686
1738
  >
1687
1739
  <input
1688
1740
  class="pf-v5-c-check__input"
1689
1741
  type="checkbox"
1690
- id="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-status-restarted"
1691
- name="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-status-restarted"
1742
+ id="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-status-restarted-input"
1743
+ name="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-status-restarted-input"
1692
1744
  />
1693
-
1694
1745
  <span class="pf-v5-c-check__label">Restarted</span>
1695
1746
  </label>
1696
1747
  </fieldset>
@@ -1727,73 +1778,77 @@ wrapperTag: div
1727
1778
  >
1728
1779
  <label
1729
1780
  class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
1730
- for="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-risk-active"
1781
+ id="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-risk-active"
1782
+ for="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-risk-active-input"
1731
1783
  >
1732
1784
  <input
1733
1785
  class="pf-v5-c-check__input"
1734
1786
  type="checkbox"
1735
- id="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-risk-active"
1736
- name="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-risk-active"
1787
+ aria-describedby="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-risk-active-description"
1788
+ id="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-risk-active-input"
1789
+ name="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-risk-active-input"
1737
1790
  />
1738
-
1739
1791
  <span class="pf-v5-c-check__label">Active</span>
1740
1792
  <span
1741
1793
  class="pf-v5-c-check__description"
1794
+ id="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-risk-active-description"
1742
1795
  >This is a description</span>
1743
1796
  </label>
1744
1797
  <label
1745
1798
  class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
1746
- for="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-risk-canceled"
1799
+ id="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-risk-canceled"
1800
+ for="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-risk-canceled-input"
1747
1801
  >
1748
1802
  <input
1749
1803
  class="pf-v5-c-check__input"
1750
1804
  type="checkbox"
1751
- id="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-risk-canceled"
1752
- name="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-risk-canceled"
1805
+ aria-describedby="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-risk-canceled-description"
1806
+ id="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-risk-canceled-input"
1807
+ name="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-risk-canceled-input"
1753
1808
  />
1754
-
1755
1809
  <span class="pf-v5-c-check__label">Canceled</span>
1756
1810
  <span
1757
1811
  class="pf-v5-c-check__description"
1812
+ id="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-risk-canceled-description"
1758
1813
  >This is a really long description that describes the menu item. This is a really long description that describes the menu item.</span>
1759
1814
  </label>
1760
1815
  <label
1761
1816
  class="pf-v5-c-check pf-v5-c-select__menu-item"
1762
- for="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-risk-paused"
1817
+ id="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-risk-paused"
1818
+ for="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-risk-paused-input"
1763
1819
  >
1764
1820
  <input
1765
1821
  class="pf-v5-c-check__input"
1766
1822
  type="checkbox"
1767
- id="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-risk-paused"
1768
- name="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-risk-paused"
1823
+ id="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-risk-paused-input"
1824
+ name="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-risk-paused-input"
1769
1825
  />
1770
-
1771
1826
  <span class="pf-v5-c-check__label">Paused</span>
1772
1827
  </label>
1773
1828
  <label
1774
1829
  class="pf-v5-c-check pf-v5-c-select__menu-item"
1775
- for="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-risk-warning"
1830
+ id="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-risk-warning"
1831
+ for="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-risk-warning-input"
1776
1832
  >
1777
1833
  <input
1778
1834
  class="pf-v5-c-check__input"
1779
1835
  type="checkbox"
1780
- id="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-risk-warning"
1781
- name="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-risk-warning"
1836
+ id="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-risk-warning-input"
1837
+ name="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-risk-warning-input"
1782
1838
  />
1783
-
1784
1839
  <span class="pf-v5-c-check__label">Warning</span>
1785
1840
  </label>
1786
1841
  <label
1787
1842
  class="pf-v5-c-check pf-v5-c-select__menu-item"
1788
- for="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-risk-restarted"
1843
+ id="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-risk-restarted"
1844
+ for="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-risk-restarted-input"
1789
1845
  >
1790
1846
  <input
1791
1847
  class="pf-v5-c-check__input"
1792
1848
  type="checkbox"
1793
- id="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-risk-restarted"
1794
- name="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-risk-restarted"
1849
+ id="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-risk-restarted-input"
1850
+ name="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-risk-restarted-input"
1795
1851
  />
1796
-
1797
1852
  <span class="pf-v5-c-check__label">Restarted</span>
1798
1853
  </label>
1799
1854
  </fieldset>
@@ -1809,7 +1864,10 @@ wrapperTag: div
1809
1864
  type="button"
1810
1865
  aria-label="Sort"
1811
1866
  >
1812
- <i class="fas fa-sort-amount-down" aria-hidden="true"></i>
1867
+ <i
1868
+ class="fas fa-sort-amount-down pf-v5-m-mirror-inline-rtl"
1869
+ aria-hidden="true"
1870
+ ></i>
1813
1871
  </button>
1814
1872
  </div>
1815
1873
 
@@ -1847,72 +1905,74 @@ wrapperTag: div
1847
1905
  role="menu"
1848
1906
  aria-labelledby="primary-detail-collapsed-example-drawer-toolbar-overflow-menu-dropdown-toggle"
1849
1907
  hidden
1850
- >
1851
- <li role="none">
1852
- <button
1853
- role="menuitem"
1854
- class="pf-v5-c-dropdown__menu-item"
1855
- >Action 7</button>
1856
- </li>
1857
- </ul>
1858
- </div>
1859
- </div>
1860
- </div>
1861
-
1862
- <div class="pf-v5-c-toolbar__item pf-m-pagination">
1863
- <div class="pf-v5-c-pagination pf-m-compact">
1864
- <div class="pf-v5-c-options-menu">
1865
- <button
1866
- class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
1867
- type="button"
1868
- id="primary-detail-collapsed-example-drawer-toolbar-top-pagination-toggle"
1869
- aria-haspopup="listbox"
1870
- aria-expanded="false"
1871
- >
1872
- <span class="pf-v5-c-options-menu__toggle-text">
1873
- <b>1 - 10</b>&nbsp;of&nbsp;
1874
- <b>36</b>
1875
- </span>
1876
- <div class="pf-v5-c-options-menu__toggle-icon">
1877
- <i class="fas fa-caret-down" aria-hidden="true"></i>
1878
- </div>
1879
- </button>
1880
- <ul
1881
- class="pf-v5-c-options-menu__menu"
1882
- role="menu"
1883
- aria-labelledby="primary-detail-collapsed-example-drawer-toolbar-top-pagination-toggle"
1884
- hidden
1885
- >
1886
- <li role="none">
1887
- <button
1888
- class="pf-v5-c-options-menu__menu-item"
1889
- type="button"
1890
- role="menuitem"
1891
- >5 per page</button>
1892
- </li>
1893
- <li role="none">
1894
- <button
1895
- class="pf-v5-c-options-menu__menu-item"
1896
- type="button"
1897
- role="menuitem"
1898
- >
1899
- 10 per page
1900
- <div
1901
- class="pf-v5-c-options-menu__menu-item-icon"
1902
- >
1903
- <i class="fas fa-check" aria-hidden="true"></i>
1904
- </div>
1905
- </button>
1906
- </li>
1908
+ >
1907
1909
  <li role="none">
1908
1910
  <button
1909
- class="pf-v5-c-options-menu__menu-item"
1910
- type="button"
1911
1911
  role="menuitem"
1912
- >20 per page</button>
1912
+ class="pf-v5-c-dropdown__menu-item"
1913
+ >Action 7</button>
1913
1914
  </li>
1914
1915
  </ul>
1915
1916
  </div>
1917
+ </div>
1918
+ </div>
1919
+
1920
+ <div class="pf-v5-c-toolbar__item pf-m-pagination">
1921
+ <div class="pf-v5-c-pagination pf-m-compact">
1922
+ <div class="pf-v5-c-pagination__page-menu">
1923
+ <div class="pf-v5-c-options-menu">
1924
+ <button
1925
+ class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
1926
+ type="button"
1927
+ id="primary-detail-collapsed-example-drawer-toolbar-top-pagination-toggle"
1928
+ aria-haspopup="listbox"
1929
+ aria-expanded="false"
1930
+ >
1931
+ <span class="pf-v5-c-options-menu__toggle-text">
1932
+ <b>1 - 10</b>&nbsp;of&nbsp;
1933
+ <b>36</b>
1934
+ </span>
1935
+ <div class="pf-v5-c-options-menu__toggle-icon">
1936
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
1937
+ </div>
1938
+ </button>
1939
+ <ul
1940
+ class="pf-v5-c-options-menu__menu"
1941
+ role="menu"
1942
+ aria-labelledby="primary-detail-collapsed-example-drawer-toolbar-top-pagination-toggle"
1943
+ hidden
1944
+ >
1945
+ <li role="none">
1946
+ <button
1947
+ class="pf-v5-c-options-menu__menu-item"
1948
+ type="button"
1949
+ role="menuitem"
1950
+ >5 per page</button>
1951
+ </li>
1952
+ <li role="none">
1953
+ <button
1954
+ class="pf-v5-c-options-menu__menu-item"
1955
+ type="button"
1956
+ role="menuitem"
1957
+ >
1958
+ 10 per page
1959
+ <div
1960
+ class="pf-v5-c-options-menu__menu-item-icon"
1961
+ >
1962
+ <i class="fas fa-check" aria-hidden="true"></i>
1963
+ </div>
1964
+ </button>
1965
+ </li>
1966
+ <li role="none">
1967
+ <button
1968
+ class="pf-v5-c-options-menu__menu-item"
1969
+ type="button"
1970
+ role="menuitem"
1971
+ >20 per page</button>
1972
+ </li>
1973
+ </ul>
1974
+ </div>
1975
+ </div>
1916
1976
  <nav
1917
1977
  class="pf-v5-c-pagination__nav"
1918
1978
  aria-label="Toolbar top pagination"
@@ -2466,23 +2526,117 @@ wrapperTag: div
2466
2526
  </span>
2467
2527
  <div class="pf-v5-c-masthead__main">
2468
2528
  <a class="pf-v5-c-masthead__brand" href="#">
2469
- <img
2470
- class="pf-v5-c-brand"
2471
- src="/assets/images/pf-logo.svg"
2472
- alt="PatternFly logo"
2473
- style="--pf-v5-c-brand--Height:36px"
2474
- />
2529
+ <svg height="40px" viewBox="0 0 679 158">
2530
+ <title>PF-HorizontalLogo-Color</title>
2531
+ <defs>
2532
+ <linearGradient
2533
+ x1="68%"
2534
+ y1="2.25860997e-13%"
2535
+ x2="32%"
2536
+ y2="100%"
2537
+ id="linearGradient-primary-detail-content-body-padding-example-masthead"
2538
+ >
2539
+ <stop stop-color="#2B9AF3" offset="0%" />
2540
+ <stop
2541
+ stop-color="#73BCF7"
2542
+ stop-opacity="0.502212631"
2543
+ offset="100%"
2544
+ />
2545
+ </linearGradient>
2546
+ </defs>
2547
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
2548
+ <g
2549
+ transform="translate(206.000000, 45.750000)"
2550
+ fill="var(--pf-t--global--text--color--regular)"
2551
+ fill-rule="nonzero"
2552
+ >
2553
+ <path
2554
+ d="M0,65.25 L0,2.25 L33.21,2.25 C37.35,2.25 41.025,3.135 44.235,4.905 C47.445,6.675 49.98,9.09 51.84,12.15 C53.7,15.21 54.63,18.72 54.63,22.68 C54.63,26.46 53.7,29.865 51.84,32.895 C49.98,35.925 47.43,38.31 44.19,40.05 C40.95,41.79 37.29,42.66 33.21,42.66 L15.48,42.66 L15.48,65.25 L0,65.25 Z M15.48,29.88 L31.41,29.88 C33.69,29.88 35.52,29.22 36.9,27.9 C38.28,26.58 38.97,24.87 38.97,22.77 C38.97,20.61 38.28,18.855 36.9,17.505 C35.52,16.155 33.69,15.48 31.41,15.48 L15.48,15.48 L15.48,29.88 Z"
2555
+ />
2556
+ <path
2557
+ d="M77.04,66.06 C73.68,66.06 70.695,65.43 68.085,64.17 C65.475,62.91 63.435,61.17 61.965,58.95 C60.495,56.73 59.76,54.18 59.76,51.3 C59.76,46.74 61.485,43.215 64.935,40.725 C68.385,38.235 73.2,36.99 79.38,36.99 C83.1,36.99 86.7,37.44 90.18,38.34 L90.18,36 C90.18,31.26 87.15,28.89 81.09,28.89 C77.49,28.89 72.69,30.15 66.69,32.67 L61.47,21.96 C69.15,18.48 76.56,16.74 83.7,16.74 C90.3,16.74 95.43,18.315 99.09,21.465 C102.75,24.615 104.58,29.04 104.58,34.74 L104.58,65.25 L90.18,65.25 L90.18,62.37 C88.26,63.69 86.235,64.635 84.105,65.205 C81.975,65.775 79.62,66.06 77.04,66.06 Z M73.62,51.03 C73.62,52.53 74.28,53.7 75.6,54.54 C76.92,55.38 78.75,55.8 81.09,55.8 C84.69,55.8 87.72,55.05 90.18,53.55 L90.18,47.43 C87.42,46.71 84.54,46.35 81.54,46.35 C79.02,46.35 77.07,46.755 75.69,47.565 C74.31,48.375 73.62,49.53 73.62,51.03 Z"
2558
+ />
2559
+ <path
2560
+ d="M137.25,65.88 C125.73,65.88 119.97,60.84 119.97,50.76 L119.97,29.79 L110.34,29.79 L110.34,17.64 L119.97,17.64 L119.97,5.4 L134.55,2.25 L134.55,17.64 L147.87,17.64 L147.87,29.79 L134.55,29.79 L134.55,47.88 C134.55,49.98 135.015,51.465 135.945,52.335 C136.875,53.205 138.51,53.64 140.85,53.64 C143.01,53.64 145.2,53.31 147.42,52.65 L147.42,64.44 C146.1,64.86 144.42,65.205 142.38,65.475 C140.34,65.745 138.63,65.88 137.25,65.88 Z"
2561
+ />
2562
+ <path
2563
+ d="M177.57,65.88 C166.05,65.88 160.29,60.84 160.29,50.76 L160.29,29.79 L150.66,29.79 L150.66,17.64 L160.29,17.64 L160.29,5.4 L174.87,2.25 L174.87,17.64 L188.19,17.64 L188.19,29.79 L174.87,29.79 L174.87,47.88 C174.87,49.98 175.335,51.465 176.265,52.335 C177.195,53.205 178.83,53.64 181.17,53.64 C183.33,53.64 185.52,53.31 187.74,52.65 L187.74,64.44 C186.42,64.86 184.74,65.205 182.7,65.475 C180.66,65.745 178.95,65.88 177.57,65.88 Z"
2564
+ />
2565
+ <path
2566
+ d="M217.62,66.15 C212.76,66.15 208.365,65.055 204.435,62.865 C200.505,60.675 197.4,57.72 195.12,54 C192.84,50.28 191.7,46.11 191.7,41.49 C191.7,36.87 192.795,32.7 194.985,28.98 C197.175,25.26 200.16,22.305 203.94,20.115 C207.72,17.925 211.92,16.83 216.54,16.83 C221.22,16.83 225.36,17.955 228.96,20.205 C232.56,22.455 235.395,25.53 237.465,29.43 C239.535,33.33 240.57,37.8 240.57,42.84 L240.57,46.44 L206.64,46.44 C207.6,48.66 209.1,50.475 211.14,51.885 C213.18,53.295 215.58,54 218.34,54 C222.42,54 225.6,52.8 227.88,50.4 L237.51,58.95 C234.51,61.47 231.435,63.3 228.285,64.44 C225.135,65.58 221.58,66.15 217.62,66.15 Z M206.37,36.27 L226.26,36.27 C225.48,33.99 224.205,32.16 222.435,30.78 C220.665,29.4 218.61,28.71 216.27,28.71 C213.87,28.71 211.8,29.37 210.06,30.69 C208.32,32.01 207.09,33.87 206.37,36.27 Z"
2567
+ />
2568
+ <path
2569
+ d="M247.41,65.25 L247.41,17.64 L261.99,17.64 L261.99,22.41 C265.23,18.51 269.4,16.56 274.5,16.56 C277.08,16.62 278.91,17.01 279.99,17.73 L279.99,30.42 C277.95,29.46 275.64,28.98 273.06,28.98 C270.78,28.98 268.665,29.505 266.715,30.555 C264.765,31.605 263.19,33.09 261.99,35.01 L261.99,65.25 L247.41,65.25 Z"
2570
+ />
2571
+ <path
2572
+ d="M286.29,65.25 L286.29,17.64 L300.87,17.64 L300.87,20.88 C304.47,18.12 308.73,16.74 313.65,16.74 C317.37,16.74 320.655,17.55 323.505,19.17 C326.355,20.79 328.59,23.04 330.21,25.92 C331.83,28.8 332.64,32.13 332.64,35.91 L332.64,65.25 L318.06,65.25 L318.06,37.89 C318.06,35.25 317.28,33.15 315.72,31.59 C314.16,30.03 312.06,29.25 309.42,29.25 C305.76,29.25 302.91,30.51 300.87,33.03 L300.87,65.25 L286.29,65.25 Z"
2573
+ />
2574
+ <polygon
2575
+ points="342 65.25 342 2.25 392.04 2.25 392.04 15.66 357.48 15.66 357.48 27.45 380.52 27.45 380.52 40.41 357.48 40.41 357.48 65.25"
2576
+ />
2577
+ <polygon points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25" />
2578
+ <path
2579
+ d="M429.21,84.69 C428.07,84.69 426.96,84.645 425.88,84.555 C424.8,84.465 423.9,84.33 423.18,84.15 L423.18,71.73 C424.38,71.97 425.88,72.09 427.68,72.09 C432.36,72.09 435.51,70.05 437.13,65.97 L437.13,65.88 L418.86,17.64 L434.97,17.64 L445.5,47.61 L457.74,17.64 L473.49,17.64 L452.16,67.68 C450.42,71.82 448.5,75.135 446.4,77.625 C444.3,80.115 441.87,81.915 439.11,83.025 C436.35,84.135 433.05,84.69 429.21,84.69 Z"
2580
+ />
2581
+ </g>
2582
+ <g transform="translate(0.000000, 0.000000)">
2583
+ <path
2584
+ d="M61.826087,0 L158,0 L158,96.173913 L147.695652,96.173913 C100.271201,96.173913 61.826087,57.7287992 61.826087,10.3043478 L61.826087,0 L61.826087,0 Z"
2585
+ fill="#0066CC"
2586
+ />
2587
+ <path
2588
+ d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
2589
+ fill="url(#linearGradient-primary-detail-content-body-padding-example-masthead)"
2590
+ />
2591
+ <path
2592
+ d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z"
2593
+ fill="url(#linearGradient-primary-detail-content-body-padding-example-masthead)"
2594
+ transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
2595
+ />
2596
+ </g>
2597
+ </g>
2598
+ </svg>
2475
2599
  </a>
2476
2600
  </div>
2477
2601
  <div class="pf-v5-c-masthead__content">
2478
2602
  <div
2479
- class="pf-v5-c-toolbar pf-m-full-height pf-m-static"
2603
+ class="pf-v5-c-toolbar pf-m-static"
2480
2604
  id="primary-detail-content-body-padding-example-masthead-toolbar"
2481
2605
  >
2482
2606
  <div class="pf-v5-c-toolbar__content">
2483
2607
  <div class="pf-v5-c-toolbar__content-section">
2608
+ <div class="pf-v5-c-toolbar__item">
2609
+ <button
2610
+ class="pf-v5-c-menu-toggle"
2611
+ type="button"
2612
+ aria-expanded="false"
2613
+ >
2614
+ <span class="pf-v5-c-menu-toggle__text">Overview</span>
2615
+ <span class="pf-v5-c-menu-toggle__controls">
2616
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
2617
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
2618
+ </span>
2619
+ </span>
2620
+ </button>
2621
+ </div>
2622
+
2623
+ <div class="pf-v5-c-toolbar__item">
2624
+ <button
2625
+ class="pf-v5-c-menu-toggle"
2626
+ type="button"
2627
+ aria-expanded="false"
2628
+ >
2629
+ <span class="pf-v5-c-menu-toggle__text">Services</span>
2630
+ <span class="pf-v5-c-menu-toggle__controls">
2631
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
2632
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
2633
+ </span>
2634
+ </span>
2635
+ </button>
2636
+ </div>
2637
+
2484
2638
  <div
2485
- class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
2639
+ class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-align-end pf-m-spacer-none pf-m-spacer-md-on-md"
2486
2640
  >
2487
2641
  <div
2488
2642
  class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
@@ -2529,27 +2683,6 @@ wrapperTag: div
2529
2683
  </button>
2530
2684
  </div>
2531
2685
  </div>
2532
- <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
2533
- <button
2534
- class="pf-v5-c-menu-toggle pf-m-full-height"
2535
- type="button"
2536
- aria-expanded="false"
2537
- >
2538
- <span class="pf-v5-c-menu-toggle__icon">
2539
- <img
2540
- class="pf-v5-c-avatar"
2541
- alt="Avatar image"
2542
- src="/assets/images/img_avatar-light.svg"
2543
- />
2544
- </span>
2545
- <span class="pf-v5-c-menu-toggle__text">Ned Username</span>
2546
- <span class="pf-v5-c-menu-toggle__controls">
2547
- <span class="pf-v5-c-menu-toggle__toggle-icon">
2548
- <i class="fas fa-angle-down" aria-hidden="true"></i>
2549
- </span>
2550
- </span>
2551
- </button>
2552
- </div>
2553
2686
  </div>
2554
2687
  </div>
2555
2688
  </div>
@@ -2652,12 +2785,12 @@ wrapperTag: div
2652
2785
  <div
2653
2786
  class="pf-v5-c-toolbar__group pf-m-toggle-group pf-m-show-on-xl"
2654
2787
  >
2655
- <div class="pf-v5-c-toolbar__toggle">
2788
+ <div class="pf-v5-c-toolbar__toggle pf-m-show">
2656
2789
  <button
2657
- class="pf-v5-c-button pf-m-plain"
2790
+ class="pf-v5-c-menu-toggle pf-m-plain"
2658
2791
  type="button"
2659
- aria-label="Show filters"
2660
2792
  aria-expanded="false"
2793
+ aria-label="Show filters"
2661
2794
  aria-controls="primary-detail-content-body-padding-example-drawer-toolbar-expandable-content"
2662
2795
  >
2663
2796
  <i class="fas fa-filter" aria-hidden="true"></i>
@@ -2695,73 +2828,77 @@ wrapperTag: div
2695
2828
  >
2696
2829
  <label
2697
2830
  class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
2698
- for="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-status-active"
2831
+ id="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-status-active"
2832
+ for="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-status-active-input"
2699
2833
  >
2700
2834
  <input
2701
2835
  class="pf-v5-c-check__input"
2702
2836
  type="checkbox"
2703
- id="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-status-active"
2704
- name="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-status-active"
2837
+ aria-describedby="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-status-active-description"
2838
+ id="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-status-active-input"
2839
+ name="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-status-active-input"
2705
2840
  />
2706
-
2707
2841
  <span class="pf-v5-c-check__label">Active</span>
2708
2842
  <span
2709
2843
  class="pf-v5-c-check__description"
2844
+ id="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-status-active-description"
2710
2845
  >This is a description</span>
2711
2846
  </label>
2712
2847
  <label
2713
2848
  class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
2714
- for="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-status-canceled"
2849
+ id="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-status-canceled"
2850
+ for="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-status-canceled-input"
2715
2851
  >
2716
2852
  <input
2717
2853
  class="pf-v5-c-check__input"
2718
2854
  type="checkbox"
2719
- id="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-status-canceled"
2720
- name="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-status-canceled"
2855
+ aria-describedby="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-status-canceled-description"
2856
+ id="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-status-canceled-input"
2857
+ name="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-status-canceled-input"
2721
2858
  />
2722
-
2723
2859
  <span class="pf-v5-c-check__label">Canceled</span>
2724
2860
  <span
2725
2861
  class="pf-v5-c-check__description"
2862
+ id="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-status-canceled-description"
2726
2863
  >This is a really long description that describes the menu item. This is a really long description that describes the menu item.</span>
2727
2864
  </label>
2728
2865
  <label
2729
2866
  class="pf-v5-c-check pf-v5-c-select__menu-item"
2730
- for="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-status-paused"
2867
+ id="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-status-paused"
2868
+ for="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-status-paused-input"
2731
2869
  >
2732
2870
  <input
2733
2871
  class="pf-v5-c-check__input"
2734
2872
  type="checkbox"
2735
- id="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-status-paused"
2736
- name="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-status-paused"
2873
+ id="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-status-paused-input"
2874
+ name="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-status-paused-input"
2737
2875
  />
2738
-
2739
2876
  <span class="pf-v5-c-check__label">Paused</span>
2740
2877
  </label>
2741
2878
  <label
2742
2879
  class="pf-v5-c-check pf-v5-c-select__menu-item"
2743
- for="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-status-warning"
2880
+ id="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-status-warning"
2881
+ for="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-status-warning-input"
2744
2882
  >
2745
2883
  <input
2746
2884
  class="pf-v5-c-check__input"
2747
2885
  type="checkbox"
2748
- id="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-status-warning"
2749
- name="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-status-warning"
2886
+ id="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-status-warning-input"
2887
+ name="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-status-warning-input"
2750
2888
  />
2751
-
2752
2889
  <span class="pf-v5-c-check__label">Warning</span>
2753
2890
  </label>
2754
2891
  <label
2755
2892
  class="pf-v5-c-check pf-v5-c-select__menu-item"
2756
- for="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-status-restarted"
2893
+ id="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-status-restarted"
2894
+ for="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-status-restarted-input"
2757
2895
  >
2758
2896
  <input
2759
2897
  class="pf-v5-c-check__input"
2760
2898
  type="checkbox"
2761
- id="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-status-restarted"
2762
- name="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-status-restarted"
2899
+ id="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-status-restarted-input"
2900
+ name="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-status-restarted-input"
2763
2901
  />
2764
-
2765
2902
  <span class="pf-v5-c-check__label">Restarted</span>
2766
2903
  </label>
2767
2904
  </fieldset>
@@ -2798,73 +2935,77 @@ wrapperTag: div
2798
2935
  >
2799
2936
  <label
2800
2937
  class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
2801
- for="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-risk-active"
2938
+ id="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-risk-active"
2939
+ for="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-risk-active-input"
2802
2940
  >
2803
2941
  <input
2804
2942
  class="pf-v5-c-check__input"
2805
2943
  type="checkbox"
2806
- id="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-risk-active"
2807
- name="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-risk-active"
2944
+ aria-describedby="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-risk-active-description"
2945
+ id="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-risk-active-input"
2946
+ name="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-risk-active-input"
2808
2947
  />
2809
-
2810
2948
  <span class="pf-v5-c-check__label">Active</span>
2811
2949
  <span
2812
2950
  class="pf-v5-c-check__description"
2951
+ id="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-risk-active-description"
2813
2952
  >This is a description</span>
2814
2953
  </label>
2815
2954
  <label
2816
2955
  class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
2817
- for="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-risk-canceled"
2956
+ id="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-risk-canceled"
2957
+ for="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-risk-canceled-input"
2818
2958
  >
2819
2959
  <input
2820
2960
  class="pf-v5-c-check__input"
2821
2961
  type="checkbox"
2822
- id="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-risk-canceled"
2823
- name="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-risk-canceled"
2962
+ aria-describedby="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-risk-canceled-description"
2963
+ id="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-risk-canceled-input"
2964
+ name="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-risk-canceled-input"
2824
2965
  />
2825
-
2826
2966
  <span class="pf-v5-c-check__label">Canceled</span>
2827
2967
  <span
2828
2968
  class="pf-v5-c-check__description"
2969
+ id="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-risk-canceled-description"
2829
2970
  >This is a really long description that describes the menu item. This is a really long description that describes the menu item.</span>
2830
2971
  </label>
2831
2972
  <label
2832
2973
  class="pf-v5-c-check pf-v5-c-select__menu-item"
2833
- for="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-risk-paused"
2974
+ id="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-risk-paused"
2975
+ for="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-risk-paused-input"
2834
2976
  >
2835
2977
  <input
2836
2978
  class="pf-v5-c-check__input"
2837
2979
  type="checkbox"
2838
- id="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-risk-paused"
2839
- name="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-risk-paused"
2980
+ id="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-risk-paused-input"
2981
+ name="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-risk-paused-input"
2840
2982
  />
2841
-
2842
2983
  <span class="pf-v5-c-check__label">Paused</span>
2843
2984
  </label>
2844
2985
  <label
2845
2986
  class="pf-v5-c-check pf-v5-c-select__menu-item"
2846
- for="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-risk-warning"
2987
+ id="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-risk-warning"
2988
+ for="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-risk-warning-input"
2847
2989
  >
2848
2990
  <input
2849
2991
  class="pf-v5-c-check__input"
2850
2992
  type="checkbox"
2851
- id="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-risk-warning"
2852
- name="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-risk-warning"
2993
+ id="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-risk-warning-input"
2994
+ name="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-risk-warning-input"
2853
2995
  />
2854
-
2855
2996
  <span class="pf-v5-c-check__label">Warning</span>
2856
2997
  </label>
2857
2998
  <label
2858
2999
  class="pf-v5-c-check pf-v5-c-select__menu-item"
2859
- for="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-risk-restarted"
3000
+ id="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-risk-restarted"
3001
+ for="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-risk-restarted-input"
2860
3002
  >
2861
3003
  <input
2862
3004
  class="pf-v5-c-check__input"
2863
3005
  type="checkbox"
2864
- id="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-risk-restarted"
2865
- name="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-risk-restarted"
3006
+ id="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-risk-restarted-input"
3007
+ name="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-risk-restarted-input"
2866
3008
  />
2867
-
2868
3009
  <span class="pf-v5-c-check__label">Restarted</span>
2869
3010
  </label>
2870
3011
  </fieldset>
@@ -2880,7 +3021,10 @@ wrapperTag: div
2880
3021
  type="button"
2881
3022
  aria-label="Sort"
2882
3023
  >
2883
- <i class="fas fa-sort-amount-down" aria-hidden="true"></i>
3024
+ <i
3025
+ class="fas fa-sort-amount-down pf-v5-m-mirror-inline-rtl"
3026
+ aria-hidden="true"
3027
+ ></i>
2884
3028
  </button>
2885
3029
  </div>
2886
3030
 
@@ -2932,57 +3076,59 @@ wrapperTag: div
2932
3076
 
2933
3077
  <div class="pf-v5-c-toolbar__item pf-m-pagination">
2934
3078
  <div class="pf-v5-c-pagination pf-m-compact">
2935
- <div class="pf-v5-c-options-menu">
2936
- <button
2937
- class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
2938
- type="button"
2939
- id="primary-detail-content-body-padding-example-drawer-toolbar-top-pagination-toggle"
2940
- aria-haspopup="listbox"
2941
- aria-expanded="false"
2942
- >
2943
- <span class="pf-v5-c-options-menu__toggle-text">
2944
- <b>1 - 10</b>&nbsp;of&nbsp;
2945
- <b>36</b>
2946
- </span>
2947
- <div class="pf-v5-c-options-menu__toggle-icon">
2948
- <i class="fas fa-caret-down" aria-hidden="true"></i>
2949
- </div>
2950
- </button>
2951
- <ul
2952
- class="pf-v5-c-options-menu__menu"
2953
- role="menu"
2954
- aria-labelledby="primary-detail-content-body-padding-example-drawer-toolbar-top-pagination-toggle"
2955
- hidden
2956
- >
2957
- <li role="none">
2958
- <button
2959
- class="pf-v5-c-options-menu__menu-item"
2960
- type="button"
2961
- role="menuitem"
2962
- >5 per page</button>
2963
- </li>
2964
- <li role="none">
2965
- <button
2966
- class="pf-v5-c-options-menu__menu-item"
2967
- type="button"
2968
- role="menuitem"
2969
- >
2970
- 10 per page
2971
- <div
2972
- class="pf-v5-c-options-menu__menu-item-icon"
3079
+ <div class="pf-v5-c-pagination__page-menu">
3080
+ <div class="pf-v5-c-options-menu">
3081
+ <button
3082
+ class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
3083
+ type="button"
3084
+ id="primary-detail-content-body-padding-example-drawer-toolbar-top-pagination-toggle"
3085
+ aria-haspopup="listbox"
3086
+ aria-expanded="false"
3087
+ >
3088
+ <span class="pf-v5-c-options-menu__toggle-text">
3089
+ <b>1 - 10</b>&nbsp;of&nbsp;
3090
+ <b>36</b>
3091
+ </span>
3092
+ <div class="pf-v5-c-options-menu__toggle-icon">
3093
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
3094
+ </div>
3095
+ </button>
3096
+ <ul
3097
+ class="pf-v5-c-options-menu__menu"
3098
+ role="menu"
3099
+ aria-labelledby="primary-detail-content-body-padding-example-drawer-toolbar-top-pagination-toggle"
3100
+ hidden
3101
+ >
3102
+ <li role="none">
3103
+ <button
3104
+ class="pf-v5-c-options-menu__menu-item"
3105
+ type="button"
3106
+ role="menuitem"
3107
+ >5 per page</button>
3108
+ </li>
3109
+ <li role="none">
3110
+ <button
3111
+ class="pf-v5-c-options-menu__menu-item"
3112
+ type="button"
3113
+ role="menuitem"
2973
3114
  >
2974
- <i class="fas fa-check" aria-hidden="true"></i>
2975
- </div>
2976
- </button>
2977
- </li>
2978
- <li role="none">
2979
- <button
2980
- class="pf-v5-c-options-menu__menu-item"
2981
- type="button"
2982
- role="menuitem"
2983
- >20 per page</button>
2984
- </li>
2985
- </ul>
3115
+ 10 per page
3116
+ <div
3117
+ class="pf-v5-c-options-menu__menu-item-icon"
3118
+ >
3119
+ <i class="fas fa-check" aria-hidden="true"></i>
3120
+ </div>
3121
+ </button>
3122
+ </li>
3123
+ <li role="none">
3124
+ <button
3125
+ class="pf-v5-c-options-menu__menu-item"
3126
+ type="button"
3127
+ role="menuitem"
3128
+ >20 per page</button>
3129
+ </li>
3130
+ </ul>
3131
+ </div>
2986
3132
  </div>
2987
3133
  <nav
2988
3134
  class="pf-v5-c-pagination__nav"
@@ -3537,23 +3683,117 @@ wrapperTag: div
3537
3683
  </span>
3538
3684
  <div class="pf-v5-c-masthead__main">
3539
3685
  <a class="pf-v5-c-masthead__brand" href="#">
3540
- <img
3541
- class="pf-v5-c-brand"
3542
- src="/assets/images/pf-logo.svg"
3543
- alt="PatternFly logo"
3544
- style="--pf-v5-c-brand--Height:36px"
3545
- />
3686
+ <svg height="40px" viewBox="0 0 679 158">
3687
+ <title>PF-HorizontalLogo-Color</title>
3688
+ <defs>
3689
+ <linearGradient
3690
+ x1="68%"
3691
+ y1="2.25860997e-13%"
3692
+ x2="32%"
3693
+ y2="100%"
3694
+ id="linearGradient-primary-detail-card-view-expanded-example-masthead"
3695
+ >
3696
+ <stop stop-color="#2B9AF3" offset="0%" />
3697
+ <stop
3698
+ stop-color="#73BCF7"
3699
+ stop-opacity="0.502212631"
3700
+ offset="100%"
3701
+ />
3702
+ </linearGradient>
3703
+ </defs>
3704
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
3705
+ <g
3706
+ transform="translate(206.000000, 45.750000)"
3707
+ fill="var(--pf-t--global--text--color--regular)"
3708
+ fill-rule="nonzero"
3709
+ >
3710
+ <path
3711
+ d="M0,65.25 L0,2.25 L33.21,2.25 C37.35,2.25 41.025,3.135 44.235,4.905 C47.445,6.675 49.98,9.09 51.84,12.15 C53.7,15.21 54.63,18.72 54.63,22.68 C54.63,26.46 53.7,29.865 51.84,32.895 C49.98,35.925 47.43,38.31 44.19,40.05 C40.95,41.79 37.29,42.66 33.21,42.66 L15.48,42.66 L15.48,65.25 L0,65.25 Z M15.48,29.88 L31.41,29.88 C33.69,29.88 35.52,29.22 36.9,27.9 C38.28,26.58 38.97,24.87 38.97,22.77 C38.97,20.61 38.28,18.855 36.9,17.505 C35.52,16.155 33.69,15.48 31.41,15.48 L15.48,15.48 L15.48,29.88 Z"
3712
+ />
3713
+ <path
3714
+ d="M77.04,66.06 C73.68,66.06 70.695,65.43 68.085,64.17 C65.475,62.91 63.435,61.17 61.965,58.95 C60.495,56.73 59.76,54.18 59.76,51.3 C59.76,46.74 61.485,43.215 64.935,40.725 C68.385,38.235 73.2,36.99 79.38,36.99 C83.1,36.99 86.7,37.44 90.18,38.34 L90.18,36 C90.18,31.26 87.15,28.89 81.09,28.89 C77.49,28.89 72.69,30.15 66.69,32.67 L61.47,21.96 C69.15,18.48 76.56,16.74 83.7,16.74 C90.3,16.74 95.43,18.315 99.09,21.465 C102.75,24.615 104.58,29.04 104.58,34.74 L104.58,65.25 L90.18,65.25 L90.18,62.37 C88.26,63.69 86.235,64.635 84.105,65.205 C81.975,65.775 79.62,66.06 77.04,66.06 Z M73.62,51.03 C73.62,52.53 74.28,53.7 75.6,54.54 C76.92,55.38 78.75,55.8 81.09,55.8 C84.69,55.8 87.72,55.05 90.18,53.55 L90.18,47.43 C87.42,46.71 84.54,46.35 81.54,46.35 C79.02,46.35 77.07,46.755 75.69,47.565 C74.31,48.375 73.62,49.53 73.62,51.03 Z"
3715
+ />
3716
+ <path
3717
+ d="M137.25,65.88 C125.73,65.88 119.97,60.84 119.97,50.76 L119.97,29.79 L110.34,29.79 L110.34,17.64 L119.97,17.64 L119.97,5.4 L134.55,2.25 L134.55,17.64 L147.87,17.64 L147.87,29.79 L134.55,29.79 L134.55,47.88 C134.55,49.98 135.015,51.465 135.945,52.335 C136.875,53.205 138.51,53.64 140.85,53.64 C143.01,53.64 145.2,53.31 147.42,52.65 L147.42,64.44 C146.1,64.86 144.42,65.205 142.38,65.475 C140.34,65.745 138.63,65.88 137.25,65.88 Z"
3718
+ />
3719
+ <path
3720
+ d="M177.57,65.88 C166.05,65.88 160.29,60.84 160.29,50.76 L160.29,29.79 L150.66,29.79 L150.66,17.64 L160.29,17.64 L160.29,5.4 L174.87,2.25 L174.87,17.64 L188.19,17.64 L188.19,29.79 L174.87,29.79 L174.87,47.88 C174.87,49.98 175.335,51.465 176.265,52.335 C177.195,53.205 178.83,53.64 181.17,53.64 C183.33,53.64 185.52,53.31 187.74,52.65 L187.74,64.44 C186.42,64.86 184.74,65.205 182.7,65.475 C180.66,65.745 178.95,65.88 177.57,65.88 Z"
3721
+ />
3722
+ <path
3723
+ d="M217.62,66.15 C212.76,66.15 208.365,65.055 204.435,62.865 C200.505,60.675 197.4,57.72 195.12,54 C192.84,50.28 191.7,46.11 191.7,41.49 C191.7,36.87 192.795,32.7 194.985,28.98 C197.175,25.26 200.16,22.305 203.94,20.115 C207.72,17.925 211.92,16.83 216.54,16.83 C221.22,16.83 225.36,17.955 228.96,20.205 C232.56,22.455 235.395,25.53 237.465,29.43 C239.535,33.33 240.57,37.8 240.57,42.84 L240.57,46.44 L206.64,46.44 C207.6,48.66 209.1,50.475 211.14,51.885 C213.18,53.295 215.58,54 218.34,54 C222.42,54 225.6,52.8 227.88,50.4 L237.51,58.95 C234.51,61.47 231.435,63.3 228.285,64.44 C225.135,65.58 221.58,66.15 217.62,66.15 Z M206.37,36.27 L226.26,36.27 C225.48,33.99 224.205,32.16 222.435,30.78 C220.665,29.4 218.61,28.71 216.27,28.71 C213.87,28.71 211.8,29.37 210.06,30.69 C208.32,32.01 207.09,33.87 206.37,36.27 Z"
3724
+ />
3725
+ <path
3726
+ d="M247.41,65.25 L247.41,17.64 L261.99,17.64 L261.99,22.41 C265.23,18.51 269.4,16.56 274.5,16.56 C277.08,16.62 278.91,17.01 279.99,17.73 L279.99,30.42 C277.95,29.46 275.64,28.98 273.06,28.98 C270.78,28.98 268.665,29.505 266.715,30.555 C264.765,31.605 263.19,33.09 261.99,35.01 L261.99,65.25 L247.41,65.25 Z"
3727
+ />
3728
+ <path
3729
+ d="M286.29,65.25 L286.29,17.64 L300.87,17.64 L300.87,20.88 C304.47,18.12 308.73,16.74 313.65,16.74 C317.37,16.74 320.655,17.55 323.505,19.17 C326.355,20.79 328.59,23.04 330.21,25.92 C331.83,28.8 332.64,32.13 332.64,35.91 L332.64,65.25 L318.06,65.25 L318.06,37.89 C318.06,35.25 317.28,33.15 315.72,31.59 C314.16,30.03 312.06,29.25 309.42,29.25 C305.76,29.25 302.91,30.51 300.87,33.03 L300.87,65.25 L286.29,65.25 Z"
3730
+ />
3731
+ <polygon
3732
+ points="342 65.25 342 2.25 392.04 2.25 392.04 15.66 357.48 15.66 357.48 27.45 380.52 27.45 380.52 40.41 357.48 40.41 357.48 65.25"
3733
+ />
3734
+ <polygon points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25" />
3735
+ <path
3736
+ d="M429.21,84.69 C428.07,84.69 426.96,84.645 425.88,84.555 C424.8,84.465 423.9,84.33 423.18,84.15 L423.18,71.73 C424.38,71.97 425.88,72.09 427.68,72.09 C432.36,72.09 435.51,70.05 437.13,65.97 L437.13,65.88 L418.86,17.64 L434.97,17.64 L445.5,47.61 L457.74,17.64 L473.49,17.64 L452.16,67.68 C450.42,71.82 448.5,75.135 446.4,77.625 C444.3,80.115 441.87,81.915 439.11,83.025 C436.35,84.135 433.05,84.69 429.21,84.69 Z"
3737
+ />
3738
+ </g>
3739
+ <g transform="translate(0.000000, 0.000000)">
3740
+ <path
3741
+ d="M61.826087,0 L158,0 L158,96.173913 L147.695652,96.173913 C100.271201,96.173913 61.826087,57.7287992 61.826087,10.3043478 L61.826087,0 L61.826087,0 Z"
3742
+ fill="#0066CC"
3743
+ />
3744
+ <path
3745
+ d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
3746
+ fill="url(#linearGradient-primary-detail-card-view-expanded-example-masthead)"
3747
+ />
3748
+ <path
3749
+ d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z"
3750
+ fill="url(#linearGradient-primary-detail-card-view-expanded-example-masthead)"
3751
+ transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
3752
+ />
3753
+ </g>
3754
+ </g>
3755
+ </svg>
3546
3756
  </a>
3547
3757
  </div>
3548
3758
  <div class="pf-v5-c-masthead__content">
3549
3759
  <div
3550
- class="pf-v5-c-toolbar pf-m-full-height pf-m-static"
3760
+ class="pf-v5-c-toolbar pf-m-static"
3551
3761
  id="primary-detail-card-view-expanded-example-masthead-toolbar"
3552
3762
  >
3553
3763
  <div class="pf-v5-c-toolbar__content">
3554
3764
  <div class="pf-v5-c-toolbar__content-section">
3765
+ <div class="pf-v5-c-toolbar__item">
3766
+ <button
3767
+ class="pf-v5-c-menu-toggle"
3768
+ type="button"
3769
+ aria-expanded="false"
3770
+ >
3771
+ <span class="pf-v5-c-menu-toggle__text">Overview</span>
3772
+ <span class="pf-v5-c-menu-toggle__controls">
3773
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
3774
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
3775
+ </span>
3776
+ </span>
3777
+ </button>
3778
+ </div>
3779
+
3780
+ <div class="pf-v5-c-toolbar__item">
3781
+ <button
3782
+ class="pf-v5-c-menu-toggle"
3783
+ type="button"
3784
+ aria-expanded="false"
3785
+ >
3786
+ <span class="pf-v5-c-menu-toggle__text">Services</span>
3787
+ <span class="pf-v5-c-menu-toggle__controls">
3788
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
3789
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
3790
+ </span>
3791
+ </span>
3792
+ </button>
3793
+ </div>
3794
+
3555
3795
  <div
3556
- class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
3796
+ class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-align-end pf-m-spacer-none pf-m-spacer-md-on-md"
3557
3797
  >
3558
3798
  <div
3559
3799
  class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
@@ -3592,34 +3832,13 @@ wrapperTag: div
3592
3832
  <div class="pf-v5-c-toolbar__item pf-m-hidden-on-lg">
3593
3833
  <button
3594
3834
  class="pf-v5-c-menu-toggle pf-m-plain"
3595
- type="button"
3596
- aria-expanded="false"
3597
- aria-label="Actions"
3598
- >
3599
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
3600
- </button>
3601
- </div>
3602
- </div>
3603
- <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
3604
- <button
3605
- class="pf-v5-c-menu-toggle pf-m-full-height"
3606
- type="button"
3607
- aria-expanded="false"
3608
- >
3609
- <span class="pf-v5-c-menu-toggle__icon">
3610
- <img
3611
- class="pf-v5-c-avatar"
3612
- alt="Avatar image"
3613
- src="/assets/images/img_avatar-light.svg"
3614
- />
3615
- </span>
3616
- <span class="pf-v5-c-menu-toggle__text">Ned Username</span>
3617
- <span class="pf-v5-c-menu-toggle__controls">
3618
- <span class="pf-v5-c-menu-toggle__toggle-icon">
3619
- <i class="fas fa-angle-down" aria-hidden="true"></i>
3620
- </span>
3621
- </span>
3622
- </button>
3835
+ type="button"
3836
+ aria-expanded="false"
3837
+ aria-label="Actions"
3838
+ >
3839
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
3840
+ </button>
3841
+ </div>
3623
3842
  </div>
3624
3843
  </div>
3625
3844
  </div>
@@ -3719,67 +3938,48 @@ wrapperTag: div
3719
3938
  <div
3720
3939
  class="pf-v5-c-toolbar__group pf-m-toggle-group pf-m-show-on-xl"
3721
3940
  >
3722
- <div class="pf-v5-c-toolbar__toggle">
3941
+ <div class="pf-v5-c-toolbar__toggle pf-m-show">
3723
3942
  <button
3724
- class="pf-v5-c-button pf-m-plain"
3943
+ class="pf-v5-c-menu-toggle pf-m-plain"
3725
3944
  type="button"
3726
- aria-label="Show filters"
3727
3945
  aria-expanded="false"
3946
+ aria-label="Show filters"
3728
3947
  aria-controls="primary-detail-card-view-expanded-example-drawer-toolbar-expandable-content"
3729
3948
  >
3730
3949
  <i class="fas fa-filter" aria-hidden="true"></i>
3731
3950
  </button>
3732
3951
  </div>
3733
3952
  <div class="pf-v5-c-toolbar__item pf-m-bulk-select">
3734
- <div class="pf-v5-c-dropdown">
3735
- <div class="pf-v5-c-dropdown__toggle pf-m-split-button">
3736
- <label
3737
- class="pf-v5-c-dropdown__toggle-check"
3738
- for="primary-detail-card-view-expanded-example-drawer-toolbar-bulk-select-toggle-check"
3739
- >
3740
- <div class="pf-v5-c-check pf-m-standalone">
3741
- <input
3742
- class="pf-v5-c-check__input"
3743
- type="checkbox"
3744
- id="primary-detail-card-view-expanded-example-drawer-toolbar-bulk-select-toggle-check"
3745
- aria-label="Select all"
3746
- />
3747
- </div>
3748
- </label>
3749
-
3750
- <button
3751
- class="pf-v5-c-dropdown__toggle-button"
3752
- type="button"
3753
- aria-expanded="false"
3754
- id="primary-detail-card-view-expanded-example-drawer-toolbar-bulk-select-toggle-button"
3755
- aria-label="Dropdown toggle"
3756
- >
3757
- <i class="fas fa-caret-down" aria-hidden="true"></i>
3758
- </button>
3759
- </div>
3760
- <ul class="pf-v5-c-dropdown__menu" hidden role="menu">
3761
- <li role="none">
3762
- <button
3763
- class="pf-v5-c-dropdown__menu-item"
3764
- role="menuitem"
3765
- type="button"
3766
- >Select all</button>
3767
- </li>
3768
- <li role="none">
3769
- <button
3770
- class="pf-v5-c-dropdown__menu-item"
3771
- role="menuitem"
3772
- type="button"
3773
- >Select none</button>
3774
- </li>
3775
- <li role="none">
3776
- <button
3777
- class="pf-v5-c-dropdown__menu-item"
3778
- role="menuitem"
3779
- type="button"
3780
- >Other action</button>
3781
- </li>
3782
- </ul>
3953
+ <div
3954
+ class="pf-v5-c-menu-toggle pf-m-split-button"
3955
+ id="primary-detail-card-view-expanded-example-drawer-toolbar-check"
3956
+ >
3957
+ <label
3958
+ class="pf-v5-c-check pf-m-standalone"
3959
+ id="primary-detail-card-view-expanded-example-drawer-toolbar-check-check"
3960
+ for="primary-detail-card-view-expanded-example-drawer-toolbar-check-check-input"
3961
+ >
3962
+ <input
3963
+ class="pf-v5-c-check__input"
3964
+ type="checkbox"
3965
+ id="primary-detail-card-view-expanded-example-drawer-toolbar-check-check-input"
3966
+ name="primary-detail-card-view-expanded-example-drawer-toolbar-check-check-input"
3967
+ aria-label="Standalone check"
3968
+ />
3969
+ </label>
3970
+ <button
3971
+ class="pf-v5-c-menu-toggle__button"
3972
+ type="button"
3973
+ aria-expanded="false"
3974
+ id="primary-detail-card-view-expanded-example-drawer-toolbar-menu-toggle-toggle-button"
3975
+ aria-label="Menu toggle"
3976
+ >
3977
+ <span class="pf-v5-c-menu-toggle__controls">
3978
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
3979
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
3980
+ </span>
3981
+ </span>
3982
+ </button>
3783
3983
  </div>
3784
3984
  </div>
3785
3985
 
@@ -3790,75 +3990,22 @@ wrapperTag: div
3790
3990
  role="group"
3791
3991
  >
3792
3992
  <div class="pf-v5-c-input-group__item">
3793
- <div class="pf-v5-c-select" style="width: 124px">
3794
- <span
3795
- id="primary-detail-card-view-expanded-example-drawer-toolbar-select-name-label"
3796
- hidden
3797
- >Choose one</span>
3798
-
3799
- <button
3800
- class="pf-v5-c-select__toggle"
3801
- type="button"
3802
- id="primary-detail-card-view-expanded-example-drawer-toolbar-select-name-toggle"
3803
- aria-haspopup="true"
3804
- aria-expanded="false"
3805
- aria-labelledby="primary-detail-card-view-expanded-example-drawer-toolbar-select-name-label primary-detail-card-view-expanded-example-drawer-toolbar-select-name-toggle"
3806
- >
3807
- <div class="pf-v5-c-select__toggle-wrapper">
3808
- <span class="pf-v5-c-select__toggle-icon">
3809
- <i class="fas fa-filter" aria-hidden="true"></i>
3810
- </span>
3811
- <span class="pf-v5-c-select__toggle-text">Name</span>
3812
- </div>
3813
- <span class="pf-v5-c-select__toggle-arrow">
3814
- <i class="fas fa-caret-down" aria-hidden="true"></i>
3993
+ <button
3994
+ class="pf-v5-c-menu-toggle"
3995
+ type="button"
3996
+ aria-expanded="false"
3997
+ id="primary-detail-card-view-expanded-example-drawer-toolbar-search-filter-menu"
3998
+ >
3999
+ <span class="pf-v5-c-menu-toggle__icon">
4000
+ <i class="fas fa-filter" aria-hidden="true"></i>
4001
+ </span>
4002
+ <span class="pf-v5-c-menu-toggle__text">Name</span>
4003
+ <span class="pf-v5-c-menu-toggle__controls">
4004
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
4005
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
3815
4006
  </span>
3816
- </button>
3817
-
3818
- <ul
3819
- class="pf-v5-c-select__menu"
3820
- role="listbox"
3821
- aria-labelledby="primary-detail-card-view-expanded-example-drawer-toolbar-select-name-label"
3822
- hidden
3823
- >
3824
- <li role="presentation">
3825
- <button
3826
- class="pf-v5-c-select__menu-item"
3827
- role="option"
3828
- >Running</button>
3829
- </li>
3830
- <li role="presentation">
3831
- <button
3832
- class="pf-v5-c-select__menu-item pf-m-selected"
3833
- role="option"
3834
- aria-selected="true"
3835
- >
3836
- Stopped
3837
- <span class="pf-v5-c-select__menu-item-icon">
3838
- <i class="fas fa-check" aria-hidden="true"></i>
3839
- </span>
3840
- </button>
3841
- </li>
3842
- <li role="presentation">
3843
- <button
3844
- class="pf-v5-c-select__menu-item"
3845
- role="option"
3846
- >Down</button>
3847
- </li>
3848
- <li role="presentation">
3849
- <button
3850
- class="pf-v5-c-select__menu-item"
3851
- role="option"
3852
- >Degraded</button>
3853
- </li>
3854
- <li role="presentation">
3855
- <button
3856
- class="pf-v5-c-select__menu-item"
3857
- role="option"
3858
- >Needs maintenance</button>
3859
- </li>
3860
- </ul>
3861
- </div>
4007
+ </span>
4008
+ </button>
3862
4009
  </div>
3863
4010
  <div class="pf-v5-c-input-group__item pf-m-fill">
3864
4011
  <div class="pf-v5-c-text-input-group">
@@ -3888,7 +4035,10 @@ wrapperTag: div
3888
4035
  type="button"
3889
4036
  aria-label="Sort"
3890
4037
  >
3891
- <i class="fas fa-sort-amount-down" aria-hidden="true"></i>
4038
+ <i
4039
+ class="fas fa-sort-amount-down pf-v5-m-mirror-inline-rtl"
4040
+ aria-hidden="true"
4041
+ ></i>
3892
4042
  </button>
3893
4043
  </div>
3894
4044
 
@@ -3944,7 +4094,7 @@ wrapperTag: div
3944
4094
  </div>
3945
4095
 
3946
4096
  <div
3947
- class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-align-right"
4097
+ class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-align-end"
3948
4098
  >
3949
4099
  <div class="pf-v5-c-toolbar__item">
3950
4100
  <button
@@ -3968,55 +4118,57 @@ wrapperTag: div
3968
4118
 
3969
4119
  <div class="pf-v5-c-toolbar__item pf-m-pagination">
3970
4120
  <div class="pf-v5-c-pagination pf-m-compact">
3971
- <div class="pf-v5-c-options-menu">
3972
- <button
3973
- class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
3974
- type="button"
3975
- id="primary-detail-card-view-expanded-example-drawer-toolbar-top-pagination-toggle"
3976
- aria-haspopup="listbox"
3977
- aria-expanded="false"
3978
- >
3979
- <span class="pf-v5-c-options-menu__toggle-text">
3980
- <b>1 - 10</b>&nbsp;of&nbsp;
3981
- <b>36</b>
3982
- </span>
3983
- <div class="pf-v5-c-options-menu__toggle-icon">
3984
- <i class="fas fa-caret-down" aria-hidden="true"></i>
3985
- </div>
3986
- </button>
3987
- <ul
3988
- class="pf-v5-c-options-menu__menu"
3989
- role="menu"
3990
- aria-labelledby="primary-detail-card-view-expanded-example-drawer-toolbar-top-pagination-toggle"
3991
- hidden
3992
- >
3993
- <li role="none">
3994
- <button
3995
- class="pf-v5-c-options-menu__menu-item"
3996
- type="button"
3997
- role="menuitem"
3998
- >5 per page</button>
3999
- </li>
4000
- <li role="none">
4001
- <button
4002
- class="pf-v5-c-options-menu__menu-item"
4003
- type="button"
4004
- role="menuitem"
4005
- >
4006
- 10 per page
4007
- <div class="pf-v5-c-options-menu__menu-item-icon">
4008
- <i class="fas fa-check" aria-hidden="true"></i>
4009
- </div>
4010
- </button>
4011
- </li>
4012
- <li role="none">
4013
- <button
4014
- class="pf-v5-c-options-menu__menu-item"
4015
- type="button"
4016
- role="menuitem"
4017
- >20 per page</button>
4018
- </li>
4019
- </ul>
4121
+ <div class="pf-v5-c-pagination__page-menu">
4122
+ <div class="pf-v5-c-options-menu">
4123
+ <button
4124
+ class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
4125
+ type="button"
4126
+ id="primary-detail-card-view-expanded-example-drawer-toolbar-top-pagination-toggle"
4127
+ aria-haspopup="listbox"
4128
+ aria-expanded="false"
4129
+ >
4130
+ <span class="pf-v5-c-options-menu__toggle-text">
4131
+ <b>1 - 10</b>&nbsp;of&nbsp;
4132
+ <b>36</b>
4133
+ </span>
4134
+ <div class="pf-v5-c-options-menu__toggle-icon">
4135
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
4136
+ </div>
4137
+ </button>
4138
+ <ul
4139
+ class="pf-v5-c-options-menu__menu"
4140
+ role="menu"
4141
+ aria-labelledby="primary-detail-card-view-expanded-example-drawer-toolbar-top-pagination-toggle"
4142
+ hidden
4143
+ >
4144
+ <li role="none">
4145
+ <button
4146
+ class="pf-v5-c-options-menu__menu-item"
4147
+ type="button"
4148
+ role="menuitem"
4149
+ >5 per page</button>
4150
+ </li>
4151
+ <li role="none">
4152
+ <button
4153
+ class="pf-v5-c-options-menu__menu-item"
4154
+ type="button"
4155
+ role="menuitem"
4156
+ >
4157
+ 10 per page
4158
+ <div class="pf-v5-c-options-menu__menu-item-icon">
4159
+ <i class="fas fa-check" aria-hidden="true"></i>
4160
+ </div>
4161
+ </button>
4162
+ </li>
4163
+ <li role="none">
4164
+ <button
4165
+ class="pf-v5-c-options-menu__menu-item"
4166
+ type="button"
4167
+ role="menuitem"
4168
+ >20 per page</button>
4169
+ </li>
4170
+ </ul>
4171
+ </div>
4020
4172
  </div>
4021
4173
  <nav
4022
4174
  class="pf-v5-c-pagination__nav"
@@ -5108,23 +5260,117 @@ wrapperTag: div
5108
5260
  </span>
5109
5261
  <div class="pf-v5-c-masthead__main">
5110
5262
  <a class="pf-v5-c-masthead__brand" href="#">
5111
- <img
5112
- class="pf-v5-c-brand"
5113
- src="/assets/images/pf-logo.svg"
5114
- alt="PatternFly logo"
5115
- style="--pf-v5-c-brand--Height:36px"
5116
- />
5263
+ <svg height="40px" viewBox="0 0 679 158">
5264
+ <title>PF-HorizontalLogo-Color</title>
5265
+ <defs>
5266
+ <linearGradient
5267
+ x1="68%"
5268
+ y1="2.25860997e-13%"
5269
+ x2="32%"
5270
+ y2="100%"
5271
+ id="linearGradient-primary-detail-card-simple-list-on-mobile-example-masthead"
5272
+ >
5273
+ <stop stop-color="#2B9AF3" offset="0%" />
5274
+ <stop
5275
+ stop-color="#73BCF7"
5276
+ stop-opacity="0.502212631"
5277
+ offset="100%"
5278
+ />
5279
+ </linearGradient>
5280
+ </defs>
5281
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
5282
+ <g
5283
+ transform="translate(206.000000, 45.750000)"
5284
+ fill="var(--pf-t--global--text--color--regular)"
5285
+ fill-rule="nonzero"
5286
+ >
5287
+ <path
5288
+ d="M0,65.25 L0,2.25 L33.21,2.25 C37.35,2.25 41.025,3.135 44.235,4.905 C47.445,6.675 49.98,9.09 51.84,12.15 C53.7,15.21 54.63,18.72 54.63,22.68 C54.63,26.46 53.7,29.865 51.84,32.895 C49.98,35.925 47.43,38.31 44.19,40.05 C40.95,41.79 37.29,42.66 33.21,42.66 L15.48,42.66 L15.48,65.25 L0,65.25 Z M15.48,29.88 L31.41,29.88 C33.69,29.88 35.52,29.22 36.9,27.9 C38.28,26.58 38.97,24.87 38.97,22.77 C38.97,20.61 38.28,18.855 36.9,17.505 C35.52,16.155 33.69,15.48 31.41,15.48 L15.48,15.48 L15.48,29.88 Z"
5289
+ />
5290
+ <path
5291
+ d="M77.04,66.06 C73.68,66.06 70.695,65.43 68.085,64.17 C65.475,62.91 63.435,61.17 61.965,58.95 C60.495,56.73 59.76,54.18 59.76,51.3 C59.76,46.74 61.485,43.215 64.935,40.725 C68.385,38.235 73.2,36.99 79.38,36.99 C83.1,36.99 86.7,37.44 90.18,38.34 L90.18,36 C90.18,31.26 87.15,28.89 81.09,28.89 C77.49,28.89 72.69,30.15 66.69,32.67 L61.47,21.96 C69.15,18.48 76.56,16.74 83.7,16.74 C90.3,16.74 95.43,18.315 99.09,21.465 C102.75,24.615 104.58,29.04 104.58,34.74 L104.58,65.25 L90.18,65.25 L90.18,62.37 C88.26,63.69 86.235,64.635 84.105,65.205 C81.975,65.775 79.62,66.06 77.04,66.06 Z M73.62,51.03 C73.62,52.53 74.28,53.7 75.6,54.54 C76.92,55.38 78.75,55.8 81.09,55.8 C84.69,55.8 87.72,55.05 90.18,53.55 L90.18,47.43 C87.42,46.71 84.54,46.35 81.54,46.35 C79.02,46.35 77.07,46.755 75.69,47.565 C74.31,48.375 73.62,49.53 73.62,51.03 Z"
5292
+ />
5293
+ <path
5294
+ d="M137.25,65.88 C125.73,65.88 119.97,60.84 119.97,50.76 L119.97,29.79 L110.34,29.79 L110.34,17.64 L119.97,17.64 L119.97,5.4 L134.55,2.25 L134.55,17.64 L147.87,17.64 L147.87,29.79 L134.55,29.79 L134.55,47.88 C134.55,49.98 135.015,51.465 135.945,52.335 C136.875,53.205 138.51,53.64 140.85,53.64 C143.01,53.64 145.2,53.31 147.42,52.65 L147.42,64.44 C146.1,64.86 144.42,65.205 142.38,65.475 C140.34,65.745 138.63,65.88 137.25,65.88 Z"
5295
+ />
5296
+ <path
5297
+ d="M177.57,65.88 C166.05,65.88 160.29,60.84 160.29,50.76 L160.29,29.79 L150.66,29.79 L150.66,17.64 L160.29,17.64 L160.29,5.4 L174.87,2.25 L174.87,17.64 L188.19,17.64 L188.19,29.79 L174.87,29.79 L174.87,47.88 C174.87,49.98 175.335,51.465 176.265,52.335 C177.195,53.205 178.83,53.64 181.17,53.64 C183.33,53.64 185.52,53.31 187.74,52.65 L187.74,64.44 C186.42,64.86 184.74,65.205 182.7,65.475 C180.66,65.745 178.95,65.88 177.57,65.88 Z"
5298
+ />
5299
+ <path
5300
+ d="M217.62,66.15 C212.76,66.15 208.365,65.055 204.435,62.865 C200.505,60.675 197.4,57.72 195.12,54 C192.84,50.28 191.7,46.11 191.7,41.49 C191.7,36.87 192.795,32.7 194.985,28.98 C197.175,25.26 200.16,22.305 203.94,20.115 C207.72,17.925 211.92,16.83 216.54,16.83 C221.22,16.83 225.36,17.955 228.96,20.205 C232.56,22.455 235.395,25.53 237.465,29.43 C239.535,33.33 240.57,37.8 240.57,42.84 L240.57,46.44 L206.64,46.44 C207.6,48.66 209.1,50.475 211.14,51.885 C213.18,53.295 215.58,54 218.34,54 C222.42,54 225.6,52.8 227.88,50.4 L237.51,58.95 C234.51,61.47 231.435,63.3 228.285,64.44 C225.135,65.58 221.58,66.15 217.62,66.15 Z M206.37,36.27 L226.26,36.27 C225.48,33.99 224.205,32.16 222.435,30.78 C220.665,29.4 218.61,28.71 216.27,28.71 C213.87,28.71 211.8,29.37 210.06,30.69 C208.32,32.01 207.09,33.87 206.37,36.27 Z"
5301
+ />
5302
+ <path
5303
+ d="M247.41,65.25 L247.41,17.64 L261.99,17.64 L261.99,22.41 C265.23,18.51 269.4,16.56 274.5,16.56 C277.08,16.62 278.91,17.01 279.99,17.73 L279.99,30.42 C277.95,29.46 275.64,28.98 273.06,28.98 C270.78,28.98 268.665,29.505 266.715,30.555 C264.765,31.605 263.19,33.09 261.99,35.01 L261.99,65.25 L247.41,65.25 Z"
5304
+ />
5305
+ <path
5306
+ d="M286.29,65.25 L286.29,17.64 L300.87,17.64 L300.87,20.88 C304.47,18.12 308.73,16.74 313.65,16.74 C317.37,16.74 320.655,17.55 323.505,19.17 C326.355,20.79 328.59,23.04 330.21,25.92 C331.83,28.8 332.64,32.13 332.64,35.91 L332.64,65.25 L318.06,65.25 L318.06,37.89 C318.06,35.25 317.28,33.15 315.72,31.59 C314.16,30.03 312.06,29.25 309.42,29.25 C305.76,29.25 302.91,30.51 300.87,33.03 L300.87,65.25 L286.29,65.25 Z"
5307
+ />
5308
+ <polygon
5309
+ points="342 65.25 342 2.25 392.04 2.25 392.04 15.66 357.48 15.66 357.48 27.45 380.52 27.45 380.52 40.41 357.48 40.41 357.48 65.25"
5310
+ />
5311
+ <polygon points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25" />
5312
+ <path
5313
+ d="M429.21,84.69 C428.07,84.69 426.96,84.645 425.88,84.555 C424.8,84.465 423.9,84.33 423.18,84.15 L423.18,71.73 C424.38,71.97 425.88,72.09 427.68,72.09 C432.36,72.09 435.51,70.05 437.13,65.97 L437.13,65.88 L418.86,17.64 L434.97,17.64 L445.5,47.61 L457.74,17.64 L473.49,17.64 L452.16,67.68 C450.42,71.82 448.5,75.135 446.4,77.625 C444.3,80.115 441.87,81.915 439.11,83.025 C436.35,84.135 433.05,84.69 429.21,84.69 Z"
5314
+ />
5315
+ </g>
5316
+ <g transform="translate(0.000000, 0.000000)">
5317
+ <path
5318
+ d="M61.826087,0 L158,0 L158,96.173913 L147.695652,96.173913 C100.271201,96.173913 61.826087,57.7287992 61.826087,10.3043478 L61.826087,0 L61.826087,0 Z"
5319
+ fill="#0066CC"
5320
+ />
5321
+ <path
5322
+ d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
5323
+ fill="url(#linearGradient-primary-detail-card-simple-list-on-mobile-example-masthead)"
5324
+ />
5325
+ <path
5326
+ d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z"
5327
+ fill="url(#linearGradient-primary-detail-card-simple-list-on-mobile-example-masthead)"
5328
+ transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
5329
+ />
5330
+ </g>
5331
+ </g>
5332
+ </svg>
5117
5333
  </a>
5118
5334
  </div>
5119
5335
  <div class="pf-v5-c-masthead__content">
5120
5336
  <div
5121
- class="pf-v5-c-toolbar pf-m-full-height pf-m-static"
5337
+ class="pf-v5-c-toolbar pf-m-static"
5122
5338
  id="primary-detail-card-simple-list-on-mobile-example-masthead-toolbar"
5123
5339
  >
5124
5340
  <div class="pf-v5-c-toolbar__content">
5125
5341
  <div class="pf-v5-c-toolbar__content-section">
5342
+ <div class="pf-v5-c-toolbar__item">
5343
+ <button
5344
+ class="pf-v5-c-menu-toggle"
5345
+ type="button"
5346
+ aria-expanded="false"
5347
+ >
5348
+ <span class="pf-v5-c-menu-toggle__text">Overview</span>
5349
+ <span class="pf-v5-c-menu-toggle__controls">
5350
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
5351
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
5352
+ </span>
5353
+ </span>
5354
+ </button>
5355
+ </div>
5356
+
5357
+ <div class="pf-v5-c-toolbar__item">
5358
+ <button
5359
+ class="pf-v5-c-menu-toggle"
5360
+ type="button"
5361
+ aria-expanded="false"
5362
+ >
5363
+ <span class="pf-v5-c-menu-toggle__text">Services</span>
5364
+ <span class="pf-v5-c-menu-toggle__controls">
5365
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
5366
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
5367
+ </span>
5368
+ </span>
5369
+ </button>
5370
+ </div>
5371
+
5126
5372
  <div
5127
- class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
5373
+ class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-align-end pf-m-spacer-none pf-m-spacer-md-on-md"
5128
5374
  >
5129
5375
  <div
5130
5376
  class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
@@ -5171,27 +5417,6 @@ wrapperTag: div
5171
5417
  </button>
5172
5418
  </div>
5173
5419
  </div>
5174
- <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
5175
- <button
5176
- class="pf-v5-c-menu-toggle pf-m-full-height"
5177
- type="button"
5178
- aria-expanded="false"
5179
- >
5180
- <span class="pf-v5-c-menu-toggle__icon">
5181
- <img
5182
- class="pf-v5-c-avatar"
5183
- alt="Avatar image"
5184
- src="/assets/images/img_avatar-light.svg"
5185
- />
5186
- </span>
5187
- <span class="pf-v5-c-menu-toggle__text">Ned Username</span>
5188
- <span class="pf-v5-c-menu-toggle__controls">
5189
- <span class="pf-v5-c-menu-toggle__toggle-icon">
5190
- <i class="fas fa-angle-down" aria-hidden="true"></i>
5191
- </span>
5192
- </span>
5193
- </button>
5194
- </div>
5195
5420
  </div>
5196
5421
  </div>
5197
5422
  </div>
@@ -5488,23 +5713,117 @@ wrapperTag: div
5488
5713
  </span>
5489
5714
  <div class="pf-v5-c-masthead__main">
5490
5715
  <a class="pf-v5-c-masthead__brand" href="#">
5491
- <img
5492
- class="pf-v5-c-brand"
5493
- src="/assets/images/pf-logo.svg"
5494
- alt="PatternFly logo"
5495
- style="--pf-v5-c-brand--Height:36px"
5496
- />
5716
+ <svg height="40px" viewBox="0 0 679 158">
5717
+ <title>PF-HorizontalLogo-Color</title>
5718
+ <defs>
5719
+ <linearGradient
5720
+ x1="68%"
5721
+ y1="2.25860997e-13%"
5722
+ x2="32%"
5723
+ y2="100%"
5724
+ id="linearGradient-primary-detail-card-data-list-example-masthead"
5725
+ >
5726
+ <stop stop-color="#2B9AF3" offset="0%" />
5727
+ <stop
5728
+ stop-color="#73BCF7"
5729
+ stop-opacity="0.502212631"
5730
+ offset="100%"
5731
+ />
5732
+ </linearGradient>
5733
+ </defs>
5734
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
5735
+ <g
5736
+ transform="translate(206.000000, 45.750000)"
5737
+ fill="var(--pf-t--global--text--color--regular)"
5738
+ fill-rule="nonzero"
5739
+ >
5740
+ <path
5741
+ d="M0,65.25 L0,2.25 L33.21,2.25 C37.35,2.25 41.025,3.135 44.235,4.905 C47.445,6.675 49.98,9.09 51.84,12.15 C53.7,15.21 54.63,18.72 54.63,22.68 C54.63,26.46 53.7,29.865 51.84,32.895 C49.98,35.925 47.43,38.31 44.19,40.05 C40.95,41.79 37.29,42.66 33.21,42.66 L15.48,42.66 L15.48,65.25 L0,65.25 Z M15.48,29.88 L31.41,29.88 C33.69,29.88 35.52,29.22 36.9,27.9 C38.28,26.58 38.97,24.87 38.97,22.77 C38.97,20.61 38.28,18.855 36.9,17.505 C35.52,16.155 33.69,15.48 31.41,15.48 L15.48,15.48 L15.48,29.88 Z"
5742
+ />
5743
+ <path
5744
+ d="M77.04,66.06 C73.68,66.06 70.695,65.43 68.085,64.17 C65.475,62.91 63.435,61.17 61.965,58.95 C60.495,56.73 59.76,54.18 59.76,51.3 C59.76,46.74 61.485,43.215 64.935,40.725 C68.385,38.235 73.2,36.99 79.38,36.99 C83.1,36.99 86.7,37.44 90.18,38.34 L90.18,36 C90.18,31.26 87.15,28.89 81.09,28.89 C77.49,28.89 72.69,30.15 66.69,32.67 L61.47,21.96 C69.15,18.48 76.56,16.74 83.7,16.74 C90.3,16.74 95.43,18.315 99.09,21.465 C102.75,24.615 104.58,29.04 104.58,34.74 L104.58,65.25 L90.18,65.25 L90.18,62.37 C88.26,63.69 86.235,64.635 84.105,65.205 C81.975,65.775 79.62,66.06 77.04,66.06 Z M73.62,51.03 C73.62,52.53 74.28,53.7 75.6,54.54 C76.92,55.38 78.75,55.8 81.09,55.8 C84.69,55.8 87.72,55.05 90.18,53.55 L90.18,47.43 C87.42,46.71 84.54,46.35 81.54,46.35 C79.02,46.35 77.07,46.755 75.69,47.565 C74.31,48.375 73.62,49.53 73.62,51.03 Z"
5745
+ />
5746
+ <path
5747
+ d="M137.25,65.88 C125.73,65.88 119.97,60.84 119.97,50.76 L119.97,29.79 L110.34,29.79 L110.34,17.64 L119.97,17.64 L119.97,5.4 L134.55,2.25 L134.55,17.64 L147.87,17.64 L147.87,29.79 L134.55,29.79 L134.55,47.88 C134.55,49.98 135.015,51.465 135.945,52.335 C136.875,53.205 138.51,53.64 140.85,53.64 C143.01,53.64 145.2,53.31 147.42,52.65 L147.42,64.44 C146.1,64.86 144.42,65.205 142.38,65.475 C140.34,65.745 138.63,65.88 137.25,65.88 Z"
5748
+ />
5749
+ <path
5750
+ d="M177.57,65.88 C166.05,65.88 160.29,60.84 160.29,50.76 L160.29,29.79 L150.66,29.79 L150.66,17.64 L160.29,17.64 L160.29,5.4 L174.87,2.25 L174.87,17.64 L188.19,17.64 L188.19,29.79 L174.87,29.79 L174.87,47.88 C174.87,49.98 175.335,51.465 176.265,52.335 C177.195,53.205 178.83,53.64 181.17,53.64 C183.33,53.64 185.52,53.31 187.74,52.65 L187.74,64.44 C186.42,64.86 184.74,65.205 182.7,65.475 C180.66,65.745 178.95,65.88 177.57,65.88 Z"
5751
+ />
5752
+ <path
5753
+ d="M217.62,66.15 C212.76,66.15 208.365,65.055 204.435,62.865 C200.505,60.675 197.4,57.72 195.12,54 C192.84,50.28 191.7,46.11 191.7,41.49 C191.7,36.87 192.795,32.7 194.985,28.98 C197.175,25.26 200.16,22.305 203.94,20.115 C207.72,17.925 211.92,16.83 216.54,16.83 C221.22,16.83 225.36,17.955 228.96,20.205 C232.56,22.455 235.395,25.53 237.465,29.43 C239.535,33.33 240.57,37.8 240.57,42.84 L240.57,46.44 L206.64,46.44 C207.6,48.66 209.1,50.475 211.14,51.885 C213.18,53.295 215.58,54 218.34,54 C222.42,54 225.6,52.8 227.88,50.4 L237.51,58.95 C234.51,61.47 231.435,63.3 228.285,64.44 C225.135,65.58 221.58,66.15 217.62,66.15 Z M206.37,36.27 L226.26,36.27 C225.48,33.99 224.205,32.16 222.435,30.78 C220.665,29.4 218.61,28.71 216.27,28.71 C213.87,28.71 211.8,29.37 210.06,30.69 C208.32,32.01 207.09,33.87 206.37,36.27 Z"
5754
+ />
5755
+ <path
5756
+ d="M247.41,65.25 L247.41,17.64 L261.99,17.64 L261.99,22.41 C265.23,18.51 269.4,16.56 274.5,16.56 C277.08,16.62 278.91,17.01 279.99,17.73 L279.99,30.42 C277.95,29.46 275.64,28.98 273.06,28.98 C270.78,28.98 268.665,29.505 266.715,30.555 C264.765,31.605 263.19,33.09 261.99,35.01 L261.99,65.25 L247.41,65.25 Z"
5757
+ />
5758
+ <path
5759
+ d="M286.29,65.25 L286.29,17.64 L300.87,17.64 L300.87,20.88 C304.47,18.12 308.73,16.74 313.65,16.74 C317.37,16.74 320.655,17.55 323.505,19.17 C326.355,20.79 328.59,23.04 330.21,25.92 C331.83,28.8 332.64,32.13 332.64,35.91 L332.64,65.25 L318.06,65.25 L318.06,37.89 C318.06,35.25 317.28,33.15 315.72,31.59 C314.16,30.03 312.06,29.25 309.42,29.25 C305.76,29.25 302.91,30.51 300.87,33.03 L300.87,65.25 L286.29,65.25 Z"
5760
+ />
5761
+ <polygon
5762
+ points="342 65.25 342 2.25 392.04 2.25 392.04 15.66 357.48 15.66 357.48 27.45 380.52 27.45 380.52 40.41 357.48 40.41 357.48 65.25"
5763
+ />
5764
+ <polygon points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25" />
5765
+ <path
5766
+ d="M429.21,84.69 C428.07,84.69 426.96,84.645 425.88,84.555 C424.8,84.465 423.9,84.33 423.18,84.15 L423.18,71.73 C424.38,71.97 425.88,72.09 427.68,72.09 C432.36,72.09 435.51,70.05 437.13,65.97 L437.13,65.88 L418.86,17.64 L434.97,17.64 L445.5,47.61 L457.74,17.64 L473.49,17.64 L452.16,67.68 C450.42,71.82 448.5,75.135 446.4,77.625 C444.3,80.115 441.87,81.915 439.11,83.025 C436.35,84.135 433.05,84.69 429.21,84.69 Z"
5767
+ />
5768
+ </g>
5769
+ <g transform="translate(0.000000, 0.000000)">
5770
+ <path
5771
+ d="M61.826087,0 L158,0 L158,96.173913 L147.695652,96.173913 C100.271201,96.173913 61.826087,57.7287992 61.826087,10.3043478 L61.826087,0 L61.826087,0 Z"
5772
+ fill="#0066CC"
5773
+ />
5774
+ <path
5775
+ d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
5776
+ fill="url(#linearGradient-primary-detail-card-data-list-example-masthead)"
5777
+ />
5778
+ <path
5779
+ d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z"
5780
+ fill="url(#linearGradient-primary-detail-card-data-list-example-masthead)"
5781
+ transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
5782
+ />
5783
+ </g>
5784
+ </g>
5785
+ </svg>
5497
5786
  </a>
5498
5787
  </div>
5499
5788
  <div class="pf-v5-c-masthead__content">
5500
5789
  <div
5501
- class="pf-v5-c-toolbar pf-m-full-height pf-m-static"
5790
+ class="pf-v5-c-toolbar pf-m-static"
5502
5791
  id="primary-detail-card-data-list-example-masthead-toolbar"
5503
5792
  >
5504
5793
  <div class="pf-v5-c-toolbar__content">
5505
5794
  <div class="pf-v5-c-toolbar__content-section">
5795
+ <div class="pf-v5-c-toolbar__item">
5796
+ <button
5797
+ class="pf-v5-c-menu-toggle"
5798
+ type="button"
5799
+ aria-expanded="false"
5800
+ >
5801
+ <span class="pf-v5-c-menu-toggle__text">Overview</span>
5802
+ <span class="pf-v5-c-menu-toggle__controls">
5803
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
5804
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
5805
+ </span>
5806
+ </span>
5807
+ </button>
5808
+ </div>
5809
+
5810
+ <div class="pf-v5-c-toolbar__item">
5811
+ <button
5812
+ class="pf-v5-c-menu-toggle"
5813
+ type="button"
5814
+ aria-expanded="false"
5815
+ >
5816
+ <span class="pf-v5-c-menu-toggle__text">Services</span>
5817
+ <span class="pf-v5-c-menu-toggle__controls">
5818
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
5819
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
5820
+ </span>
5821
+ </span>
5822
+ </button>
5823
+ </div>
5824
+
5506
5825
  <div
5507
- class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
5826
+ class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-align-end pf-m-spacer-none pf-m-spacer-md-on-md"
5508
5827
  >
5509
5828
  <div
5510
5829
  class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
@@ -5551,27 +5870,6 @@ wrapperTag: div
5551
5870
  </button>
5552
5871
  </div>
5553
5872
  </div>
5554
- <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
5555
- <button
5556
- class="pf-v5-c-menu-toggle pf-m-full-height"
5557
- type="button"
5558
- aria-expanded="false"
5559
- >
5560
- <span class="pf-v5-c-menu-toggle__icon">
5561
- <img
5562
- class="pf-v5-c-avatar"
5563
- alt="Avatar image"
5564
- src="/assets/images/img_avatar-light.svg"
5565
- />
5566
- </span>
5567
- <span class="pf-v5-c-menu-toggle__text">Ned Username</span>
5568
- <span class="pf-v5-c-menu-toggle__controls">
5569
- <span class="pf-v5-c-menu-toggle__toggle-icon">
5570
- <i class="fas fa-angle-down" aria-hidden="true"></i>
5571
- </span>
5572
- </span>
5573
- </button>
5574
- </div>
5575
5873
  </div>
5576
5874
  </div>
5577
5875
  </div>
@@ -5747,57 +6045,65 @@ wrapperTag: div
5747
6045
  <b>1 - 10</b> of
5748
6046
  <b>37</b>
5749
6047
  </div>
5750
- <div class="pf-v5-c-options-menu">
5751
- <button
5752
- class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
5753
- type="button"
5754
- id="primary-detail-card-data-list-example-drawer-toolbar-card-toolbar-pagination-options-menu-toggle"
5755
- aria-haspopup="listbox"
5756
- aria-expanded="false"
5757
- >
5758
- <span class="pf-v5-c-options-menu__toggle-text">
5759
- <b>1 - 10</b>&nbsp;of&nbsp;
5760
- <b>36</b>
5761
- </span>
5762
- <div class="pf-v5-c-options-menu__toggle-icon">
5763
- <i class="fas fa-caret-down" aria-hidden="true"></i>
5764
- </div>
5765
- </button>
5766
- <ul
5767
- class="pf-v5-c-options-menu__menu"
5768
- role="menu"
5769
- aria-labelledby="primary-detail-card-data-list-example-drawer-toolbar-card-toolbar-pagination-options-menu-toggle"
5770
- hidden
5771
- >
5772
- <li role="none">
5773
- <button
5774
- class="pf-v5-c-options-menu__menu-item"
5775
- type="button"
5776
- role="menuitem"
5777
- >5 per page</button>
5778
- </li>
5779
- <li role="none">
5780
- <button
5781
- class="pf-v5-c-options-menu__menu-item"
5782
- type="button"
5783
- role="menuitem"
5784
- >
5785
- 10 per page
5786
- <div
5787
- class="pf-v5-c-options-menu__menu-item-icon"
6048
+ <div class="pf-v5-c-pagination__page-menu">
6049
+ <div class="pf-v5-c-options-menu">
6050
+ <button
6051
+ class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
6052
+ type="button"
6053
+ id="primary-detail-card-data-list-example-drawer-toolbar-card-toolbar-pagination-options-menu-toggle"
6054
+ aria-haspopup="listbox"
6055
+ aria-expanded="false"
6056
+ >
6057
+ <span class="pf-v5-c-options-menu__toggle-text">
6058
+ <b>1 - 10</b>&nbsp;of&nbsp;
6059
+ <b>36</b>
6060
+ </span>
6061
+ <div class="pf-v5-c-options-menu__toggle-icon">
6062
+ <i
6063
+ class="fas fa-caret-down"
6064
+ aria-hidden="true"
6065
+ ></i>
6066
+ </div>
6067
+ </button>
6068
+ <ul
6069
+ class="pf-v5-c-options-menu__menu"
6070
+ role="menu"
6071
+ aria-labelledby="primary-detail-card-data-list-example-drawer-toolbar-card-toolbar-pagination-options-menu-toggle"
6072
+ hidden
6073
+ >
6074
+ <li role="none">
6075
+ <button
6076
+ class="pf-v5-c-options-menu__menu-item"
6077
+ type="button"
6078
+ role="menuitem"
6079
+ >5 per page</button>
6080
+ </li>
6081
+ <li role="none">
6082
+ <button
6083
+ class="pf-v5-c-options-menu__menu-item"
6084
+ type="button"
6085
+ role="menuitem"
5788
6086
  >
5789
- <i class="fas fa-check" aria-hidden="true"></i>
5790
- </div>
5791
- </button>
5792
- </li>
5793
- <li role="none">
5794
- <button
5795
- class="pf-v5-c-options-menu__menu-item"
5796
- type="button"
5797
- role="menuitem"
5798
- >20 per page</button>
5799
- </li>
5800
- </ul>
6087
+ 10 per page
6088
+ <div
6089
+ class="pf-v5-c-options-menu__menu-item-icon"
6090
+ >
6091
+ <i
6092
+ class="fas fa-check"
6093
+ aria-hidden="true"
6094
+ ></i>
6095
+ </div>
6096
+ </button>
6097
+ </li>
6098
+ <li role="none">
6099
+ <button
6100
+ class="pf-v5-c-options-menu__menu-item"
6101
+ type="button"
6102
+ role="menuitem"
6103
+ >20 per page</button>
6104
+ </li>
6105
+ </ul>
6106
+ </div>
5801
6107
  </div>
5802
6108
  </div>
5803
6109
  </div>
@@ -6106,23 +6412,117 @@ wrapperTag: div
6106
6412
  </span>
6107
6413
  <div class="pf-v5-c-masthead__main">
6108
6414
  <a class="pf-v5-c-masthead__brand" href="#">
6109
- <img
6110
- class="pf-v5-c-brand"
6111
- src="/assets/images/pf-logo.svg"
6112
- alt="PatternFly logo"
6113
- style="--pf-v5-c-brand--Height:36px"
6114
- />
6415
+ <svg height="40px" viewBox="0 0 679 158">
6416
+ <title>PF-HorizontalLogo-Color</title>
6417
+ <defs>
6418
+ <linearGradient
6419
+ x1="68%"
6420
+ y1="2.25860997e-13%"
6421
+ x2="32%"
6422
+ y2="100%"
6423
+ id="linearGradient-primary-detail-inline-modifier-example-masthead"
6424
+ >
6425
+ <stop stop-color="#2B9AF3" offset="0%" />
6426
+ <stop
6427
+ stop-color="#73BCF7"
6428
+ stop-opacity="0.502212631"
6429
+ offset="100%"
6430
+ />
6431
+ </linearGradient>
6432
+ </defs>
6433
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
6434
+ <g
6435
+ transform="translate(206.000000, 45.750000)"
6436
+ fill="var(--pf-t--global--text--color--regular)"
6437
+ fill-rule="nonzero"
6438
+ >
6439
+ <path
6440
+ d="M0,65.25 L0,2.25 L33.21,2.25 C37.35,2.25 41.025,3.135 44.235,4.905 C47.445,6.675 49.98,9.09 51.84,12.15 C53.7,15.21 54.63,18.72 54.63,22.68 C54.63,26.46 53.7,29.865 51.84,32.895 C49.98,35.925 47.43,38.31 44.19,40.05 C40.95,41.79 37.29,42.66 33.21,42.66 L15.48,42.66 L15.48,65.25 L0,65.25 Z M15.48,29.88 L31.41,29.88 C33.69,29.88 35.52,29.22 36.9,27.9 C38.28,26.58 38.97,24.87 38.97,22.77 C38.97,20.61 38.28,18.855 36.9,17.505 C35.52,16.155 33.69,15.48 31.41,15.48 L15.48,15.48 L15.48,29.88 Z"
6441
+ />
6442
+ <path
6443
+ d="M77.04,66.06 C73.68,66.06 70.695,65.43 68.085,64.17 C65.475,62.91 63.435,61.17 61.965,58.95 C60.495,56.73 59.76,54.18 59.76,51.3 C59.76,46.74 61.485,43.215 64.935,40.725 C68.385,38.235 73.2,36.99 79.38,36.99 C83.1,36.99 86.7,37.44 90.18,38.34 L90.18,36 C90.18,31.26 87.15,28.89 81.09,28.89 C77.49,28.89 72.69,30.15 66.69,32.67 L61.47,21.96 C69.15,18.48 76.56,16.74 83.7,16.74 C90.3,16.74 95.43,18.315 99.09,21.465 C102.75,24.615 104.58,29.04 104.58,34.74 L104.58,65.25 L90.18,65.25 L90.18,62.37 C88.26,63.69 86.235,64.635 84.105,65.205 C81.975,65.775 79.62,66.06 77.04,66.06 Z M73.62,51.03 C73.62,52.53 74.28,53.7 75.6,54.54 C76.92,55.38 78.75,55.8 81.09,55.8 C84.69,55.8 87.72,55.05 90.18,53.55 L90.18,47.43 C87.42,46.71 84.54,46.35 81.54,46.35 C79.02,46.35 77.07,46.755 75.69,47.565 C74.31,48.375 73.62,49.53 73.62,51.03 Z"
6444
+ />
6445
+ <path
6446
+ d="M137.25,65.88 C125.73,65.88 119.97,60.84 119.97,50.76 L119.97,29.79 L110.34,29.79 L110.34,17.64 L119.97,17.64 L119.97,5.4 L134.55,2.25 L134.55,17.64 L147.87,17.64 L147.87,29.79 L134.55,29.79 L134.55,47.88 C134.55,49.98 135.015,51.465 135.945,52.335 C136.875,53.205 138.51,53.64 140.85,53.64 C143.01,53.64 145.2,53.31 147.42,52.65 L147.42,64.44 C146.1,64.86 144.42,65.205 142.38,65.475 C140.34,65.745 138.63,65.88 137.25,65.88 Z"
6447
+ />
6448
+ <path
6449
+ d="M177.57,65.88 C166.05,65.88 160.29,60.84 160.29,50.76 L160.29,29.79 L150.66,29.79 L150.66,17.64 L160.29,17.64 L160.29,5.4 L174.87,2.25 L174.87,17.64 L188.19,17.64 L188.19,29.79 L174.87,29.79 L174.87,47.88 C174.87,49.98 175.335,51.465 176.265,52.335 C177.195,53.205 178.83,53.64 181.17,53.64 C183.33,53.64 185.52,53.31 187.74,52.65 L187.74,64.44 C186.42,64.86 184.74,65.205 182.7,65.475 C180.66,65.745 178.95,65.88 177.57,65.88 Z"
6450
+ />
6451
+ <path
6452
+ d="M217.62,66.15 C212.76,66.15 208.365,65.055 204.435,62.865 C200.505,60.675 197.4,57.72 195.12,54 C192.84,50.28 191.7,46.11 191.7,41.49 C191.7,36.87 192.795,32.7 194.985,28.98 C197.175,25.26 200.16,22.305 203.94,20.115 C207.72,17.925 211.92,16.83 216.54,16.83 C221.22,16.83 225.36,17.955 228.96,20.205 C232.56,22.455 235.395,25.53 237.465,29.43 C239.535,33.33 240.57,37.8 240.57,42.84 L240.57,46.44 L206.64,46.44 C207.6,48.66 209.1,50.475 211.14,51.885 C213.18,53.295 215.58,54 218.34,54 C222.42,54 225.6,52.8 227.88,50.4 L237.51,58.95 C234.51,61.47 231.435,63.3 228.285,64.44 C225.135,65.58 221.58,66.15 217.62,66.15 Z M206.37,36.27 L226.26,36.27 C225.48,33.99 224.205,32.16 222.435,30.78 C220.665,29.4 218.61,28.71 216.27,28.71 C213.87,28.71 211.8,29.37 210.06,30.69 C208.32,32.01 207.09,33.87 206.37,36.27 Z"
6453
+ />
6454
+ <path
6455
+ d="M247.41,65.25 L247.41,17.64 L261.99,17.64 L261.99,22.41 C265.23,18.51 269.4,16.56 274.5,16.56 C277.08,16.62 278.91,17.01 279.99,17.73 L279.99,30.42 C277.95,29.46 275.64,28.98 273.06,28.98 C270.78,28.98 268.665,29.505 266.715,30.555 C264.765,31.605 263.19,33.09 261.99,35.01 L261.99,65.25 L247.41,65.25 Z"
6456
+ />
6457
+ <path
6458
+ d="M286.29,65.25 L286.29,17.64 L300.87,17.64 L300.87,20.88 C304.47,18.12 308.73,16.74 313.65,16.74 C317.37,16.74 320.655,17.55 323.505,19.17 C326.355,20.79 328.59,23.04 330.21,25.92 C331.83,28.8 332.64,32.13 332.64,35.91 L332.64,65.25 L318.06,65.25 L318.06,37.89 C318.06,35.25 317.28,33.15 315.72,31.59 C314.16,30.03 312.06,29.25 309.42,29.25 C305.76,29.25 302.91,30.51 300.87,33.03 L300.87,65.25 L286.29,65.25 Z"
6459
+ />
6460
+ <polygon
6461
+ points="342 65.25 342 2.25 392.04 2.25 392.04 15.66 357.48 15.66 357.48 27.45 380.52 27.45 380.52 40.41 357.48 40.41 357.48 65.25"
6462
+ />
6463
+ <polygon points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25" />
6464
+ <path
6465
+ d="M429.21,84.69 C428.07,84.69 426.96,84.645 425.88,84.555 C424.8,84.465 423.9,84.33 423.18,84.15 L423.18,71.73 C424.38,71.97 425.88,72.09 427.68,72.09 C432.36,72.09 435.51,70.05 437.13,65.97 L437.13,65.88 L418.86,17.64 L434.97,17.64 L445.5,47.61 L457.74,17.64 L473.49,17.64 L452.16,67.68 C450.42,71.82 448.5,75.135 446.4,77.625 C444.3,80.115 441.87,81.915 439.11,83.025 C436.35,84.135 433.05,84.69 429.21,84.69 Z"
6466
+ />
6467
+ </g>
6468
+ <g transform="translate(0.000000, 0.000000)">
6469
+ <path
6470
+ d="M61.826087,0 L158,0 L158,96.173913 L147.695652,96.173913 C100.271201,96.173913 61.826087,57.7287992 61.826087,10.3043478 L61.826087,0 L61.826087,0 Z"
6471
+ fill="#0066CC"
6472
+ />
6473
+ <path
6474
+ d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
6475
+ fill="url(#linearGradient-primary-detail-inline-modifier-example-masthead)"
6476
+ />
6477
+ <path
6478
+ d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z"
6479
+ fill="url(#linearGradient-primary-detail-inline-modifier-example-masthead)"
6480
+ transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
6481
+ />
6482
+ </g>
6483
+ </g>
6484
+ </svg>
6115
6485
  </a>
6116
6486
  </div>
6117
6487
  <div class="pf-v5-c-masthead__content">
6118
6488
  <div
6119
- class="pf-v5-c-toolbar pf-m-full-height pf-m-static"
6489
+ class="pf-v5-c-toolbar pf-m-static"
6120
6490
  id="primary-detail-inline-modifier-example-masthead-toolbar"
6121
6491
  >
6122
6492
  <div class="pf-v5-c-toolbar__content">
6123
6493
  <div class="pf-v5-c-toolbar__content-section">
6494
+ <div class="pf-v5-c-toolbar__item">
6495
+ <button
6496
+ class="pf-v5-c-menu-toggle"
6497
+ type="button"
6498
+ aria-expanded="false"
6499
+ >
6500
+ <span class="pf-v5-c-menu-toggle__text">Overview</span>
6501
+ <span class="pf-v5-c-menu-toggle__controls">
6502
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
6503
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
6504
+ </span>
6505
+ </span>
6506
+ </button>
6507
+ </div>
6508
+
6509
+ <div class="pf-v5-c-toolbar__item">
6510
+ <button
6511
+ class="pf-v5-c-menu-toggle"
6512
+ type="button"
6513
+ aria-expanded="false"
6514
+ >
6515
+ <span class="pf-v5-c-menu-toggle__text">Services</span>
6516
+ <span class="pf-v5-c-menu-toggle__controls">
6517
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
6518
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
6519
+ </span>
6520
+ </span>
6521
+ </button>
6522
+ </div>
6523
+
6124
6524
  <div
6125
- class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
6525
+ class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-align-end pf-m-spacer-none pf-m-spacer-md-on-md"
6126
6526
  >
6127
6527
  <div
6128
6528
  class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
@@ -6169,27 +6569,6 @@ wrapperTag: div
6169
6569
  </button>
6170
6570
  </div>
6171
6571
  </div>
6172
- <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
6173
- <button
6174
- class="pf-v5-c-menu-toggle pf-m-full-height"
6175
- type="button"
6176
- aria-expanded="false"
6177
- >
6178
- <span class="pf-v5-c-menu-toggle__icon">
6179
- <img
6180
- class="pf-v5-c-avatar"
6181
- alt="Avatar image"
6182
- src="/assets/images/img_avatar-light.svg"
6183
- />
6184
- </span>
6185
- <span class="pf-v5-c-menu-toggle__text">Ned Username</span>
6186
- <span class="pf-v5-c-menu-toggle__controls">
6187
- <span class="pf-v5-c-menu-toggle__toggle-icon">
6188
- <i class="fas fa-angle-down" aria-hidden="true"></i>
6189
- </span>
6190
- </span>
6191
- </button>
6192
- </div>
6193
6572
  </div>
6194
6573
  </div>
6195
6574
  </div>
@@ -6415,55 +6794,59 @@ wrapperTag: div
6415
6794
 
6416
6795
  <div class="pf-v5-c-toolbar__item pf-m-pagination">
6417
6796
  <div class="pf-v5-c-pagination pf-m-compact">
6418
- <div class="pf-v5-c-options-menu">
6419
- <button
6420
- class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
6421
- type="button"
6422
- id="primary-detail-inline-modifier-example-drawer-toolbar-top-pagination-toggle"
6423
- aria-haspopup="listbox"
6424
- aria-expanded="false"
6425
- >
6426
- <span class="pf-v5-c-options-menu__toggle-text">
6427
- <b>1 - 10</b>&nbsp;of&nbsp;
6428
- <b>36</b>
6429
- </span>
6430
- <div class="pf-v5-c-options-menu__toggle-icon">
6431
- <i class="fas fa-caret-down" aria-hidden="true"></i>
6432
- </div>
6433
- </button>
6434
- <ul
6435
- class="pf-v5-c-options-menu__menu"
6436
- role="menu"
6437
- aria-labelledby="primary-detail-inline-modifier-example-drawer-toolbar-top-pagination-toggle"
6438
- hidden
6439
- >
6440
- <li role="none">
6441
- <button
6442
- class="pf-v5-c-options-menu__menu-item"
6443
- type="button"
6444
- role="menuitem"
6445
- >5 per page</button>
6446
- </li>
6447
- <li role="none">
6448
- <button
6449
- class="pf-v5-c-options-menu__menu-item"
6450
- type="button"
6451
- role="menuitem"
6452
- >
6453
- 10 per page
6454
- <div class="pf-v5-c-options-menu__menu-item-icon">
6455
- <i class="fas fa-check" aria-hidden="true"></i>
6456
- </div>
6457
- </button>
6458
- </li>
6459
- <li role="none">
6460
- <button
6461
- class="pf-v5-c-options-menu__menu-item"
6462
- type="button"
6463
- role="menuitem"
6464
- >20 per page</button>
6465
- </li>
6466
- </ul>
6797
+ <div class="pf-v5-c-pagination__page-menu">
6798
+ <div class="pf-v5-c-options-menu">
6799
+ <button
6800
+ class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
6801
+ type="button"
6802
+ id="primary-detail-inline-modifier-example-drawer-toolbar-top-pagination-toggle"
6803
+ aria-haspopup="listbox"
6804
+ aria-expanded="false"
6805
+ >
6806
+ <span class="pf-v5-c-options-menu__toggle-text">
6807
+ <b>1 - 10</b>&nbsp;of&nbsp;
6808
+ <b>36</b>
6809
+ </span>
6810
+ <div class="pf-v5-c-options-menu__toggle-icon">
6811
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
6812
+ </div>
6813
+ </button>
6814
+ <ul
6815
+ class="pf-v5-c-options-menu__menu"
6816
+ role="menu"
6817
+ aria-labelledby="primary-detail-inline-modifier-example-drawer-toolbar-top-pagination-toggle"
6818
+ hidden
6819
+ >
6820
+ <li role="none">
6821
+ <button
6822
+ class="pf-v5-c-options-menu__menu-item"
6823
+ type="button"
6824
+ role="menuitem"
6825
+ >5 per page</button>
6826
+ </li>
6827
+ <li role="none">
6828
+ <button
6829
+ class="pf-v5-c-options-menu__menu-item"
6830
+ type="button"
6831
+ role="menuitem"
6832
+ >
6833
+ 10 per page
6834
+ <div
6835
+ class="pf-v5-c-options-menu__menu-item-icon"
6836
+ >
6837
+ <i class="fas fa-check" aria-hidden="true"></i>
6838
+ </div>
6839
+ </button>
6840
+ </li>
6841
+ <li role="none">
6842
+ <button
6843
+ class="pf-v5-c-options-menu__menu-item"
6844
+ type="button"
6845
+ role="menuitem"
6846
+ >20 per page</button>
6847
+ </li>
6848
+ </ul>
6849
+ </div>
6467
6850
  </div>
6468
6851
  <nav
6469
6852
  class="pf-v5-c-pagination__nav"
@@ -6893,13 +7276,15 @@ wrapperTag: div
6893
7276
  role="region"
6894
7277
  id="primary-detail-inline-modifier-example-drawer-tabs"
6895
7278
  >
6896
- <button
6897
- class="pf-v5-c-tabs__scroll-button"
6898
- type="button"
6899
- aria-label="Scroll left"
6900
- >
6901
- <i class="fas fa-angle-left" aria-hidden="true"></i>
6902
- </button>
7279
+ <div class="pf-v5-c-tabs__scroll-button">
7280
+ <button
7281
+ class="pf-v5-c-button pf-m-plain"
7282
+ type="button"
7283
+ aria-label="Scroll left"
7284
+ >
7285
+ <i class="fas fa-angle-left" aria-hidden="true"></i>
7286
+ </button>
7287
+ </div>
6903
7288
  <ul class="pf-v5-c-tabs__list" role="tablist">
6904
7289
  <li class="pf-v5-c-tabs__item pf-m-current" role="presentation">
6905
7290
  <button
@@ -6924,13 +7309,15 @@ wrapperTag: div
6924
7309
  </button>
6925
7310
  </li>
6926
7311
  </ul>
6927
- <button
6928
- class="pf-v5-c-tabs__scroll-button"
6929
- type="button"
6930
- aria-label="Scroll right"
6931
- >
6932
- <i class="fas fa-angle-right" aria-hidden="true"></i>
6933
- </button>
7312
+ <div class="pf-v5-c-tabs__scroll-button">
7313
+ <button
7314
+ class="pf-v5-c-button pf-m-plain"
7315
+ type="button"
7316
+ aria-label="Scroll right"
7317
+ >
7318
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
7319
+ </button>
7320
+ </div>
6934
7321
  </div>
6935
7322
  </div>
6936
7323