@patternfly/patternfly 6.0.0-alpha.8 → 6.0.0-alpha.80

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 (331) hide show
  1. package/CODE_OF_CONDUCT.md +1 -2
  2. package/assets/images/PF-Backdrop.svg +1 -0
  3. package/assets/images/PF-HorizontalLogo-Color.svg +29 -0
  4. package/assets/images/PF-HorizontalLogo-Reverse.svg +28 -0
  5. package/assets/images/PF-IconLogo-Reverse.svg +14 -0
  6. package/assets/images/PF-IconLogo-color.svg +17 -0
  7. package/assets/images/PF-IconLogo.svg +17 -0
  8. package/assets/images/logo__pf--reverse-on-md.svg +1 -1
  9. package/assets/images/pf-background.svg +22 -0
  10. package/assets/images/pf-c-brand__logo-on-lg-white.svg +32 -0
  11. package/assets/images/pf-c-brand__logo-on-md-white.svg +42 -0
  12. package/assets/images/pf-c-brand__logo-on-sm-white.svg +17 -0
  13. package/assets/images/pf-c-brand__logo-on-sm.svg +1 -1
  14. package/assets/images/pf-c-brand__logo-on-xl-white.svg +39 -0
  15. package/assets/images/pf_logo_white.hbs +35 -0
  16. package/assets/images/pf_logo_white.svg +38 -0
  17. package/base/_common.scss +8 -4
  18. package/base/_globals.scss +4 -6
  19. package/base/_variables.scss +2 -7
  20. package/base/patternfly-common.css +8 -4
  21. package/base/patternfly-globals.css +4 -3
  22. package/base/patternfly-variables.css +884 -871
  23. package/base/tokens/_tokens-charts.scss +159 -0
  24. package/base/tokens/_tokens-dark.scss +311 -287
  25. package/base/tokens/_tokens-default.scss +425 -329
  26. package/base/tokens/_tokens-font.scss +29 -36
  27. package/base/tokens/_tokens-palette.scss +71 -71
  28. package/base/tokens/_workspace-overrides.scss +7 -0
  29. package/components/AboutModalBox/about-modal-box.css +57 -94
  30. package/components/AboutModalBox/about-modal-box.scss +37 -62
  31. package/components/Accordion/accordion.css +85 -177
  32. package/components/Accordion/accordion.scss +96 -195
  33. package/components/ActionList/action-list.css +18 -17
  34. package/components/ActionList/action-list.scss +26 -16
  35. package/components/Alert/alert-group.css +20 -16
  36. package/components/Alert/alert-group.scss +20 -16
  37. package/components/Alert/alert.css +59 -84
  38. package/components/Alert/alert.scss +62 -78
  39. package/components/Avatar/avatar.css +10 -13
  40. package/components/Avatar/avatar.scss +10 -17
  41. package/components/BackToTop/back-to-top.css +17 -16
  42. package/components/BackToTop/back-to-top.scss +12 -12
  43. package/components/Backdrop/backdrop.css +6 -2
  44. package/components/Backdrop/backdrop.scss +5 -2
  45. package/components/BackgroundImage/background-image.css +5 -1
  46. package/components/BackgroundImage/background-image.scss +5 -1
  47. package/components/Badge/badge.css +23 -15
  48. package/components/Badge/badge.scss +25 -17
  49. package/components/Banner/banner.css +90 -64
  50. package/components/Banner/banner.scss +95 -32
  51. package/components/Breadcrumb/breadcrumb.css +19 -16
  52. package/components/Breadcrumb/breadcrumb.scss +18 -16
  53. package/components/Button/button.css +419 -353
  54. package/components/Button/button.scss +476 -476
  55. package/components/CalendarMonth/calendar-month.css +61 -92
  56. package/components/CalendarMonth/calendar-month.scss +68 -63
  57. package/components/Card/card.css +100 -194
  58. package/components/Card/card.scss +121 -237
  59. package/components/Check/check.css +24 -21
  60. package/components/Check/check.scss +25 -23
  61. package/components/ClipboardCopy/clipboard-copy.css +30 -33
  62. package/components/ClipboardCopy/clipboard-copy.scss +34 -26
  63. package/components/CodeBlock/code-block.css +22 -9
  64. package/components/CodeBlock/code-block.scss +22 -10
  65. package/components/CodeEditor/code-editor.css +94 -72
  66. package/components/CodeEditor/code-editor.scss +104 -82
  67. package/components/Content/content.css +7 -7
  68. package/components/Content/content.scss +7 -7
  69. package/components/DataList/data-list.css +101 -158
  70. package/components/DataList/data-list.scss +95 -154
  71. package/components/DatePicker/date-picker.css +13 -14
  72. package/components/DatePicker/date-picker.scss +12 -16
  73. package/components/DescriptionList/description-list.css +39 -34
  74. package/components/DescriptionList/description-list.scss +25 -25
  75. package/components/Divider/divider.css +91 -169
  76. package/components/Divider/divider.scss +60 -77
  77. package/components/DragDrop/drag-drop.css +18 -14
  78. package/components/DragDrop/drag-drop.scss +18 -17
  79. package/components/Drawer/drawer.css +112 -113
  80. package/components/Drawer/drawer.scss +134 -134
  81. package/components/Dropdown/dropdown.css +1 -3
  82. package/components/Dropdown/dropdown.scss +2 -6
  83. package/components/EmptyState/empty-state.css +57 -34
  84. package/components/EmptyState/empty-state.scss +63 -34
  85. package/components/ExpandableSection/expandable-section.css +64 -62
  86. package/components/ExpandableSection/expandable-section.scss +73 -76
  87. package/components/FileUpload/file-upload.css +28 -34
  88. package/components/FileUpload/file-upload.scss +30 -42
  89. package/components/Form/form.css +68 -114
  90. package/components/Form/form.scss +65 -126
  91. package/components/FormControl/form-control.css +86 -111
  92. package/components/FormControl/form-control.scss +88 -92
  93. package/components/HelperText/helper-text.css +28 -34
  94. package/components/HelperText/helper-text.scss +30 -40
  95. package/components/Hint/hint.css +28 -21
  96. package/components/Hint/hint.scss +28 -24
  97. package/components/Icon/icon.css +154 -18
  98. package/components/Icon/icon.scss +187 -20
  99. package/components/InlineEdit/inline-edit.css +8 -7
  100. package/components/InlineEdit/inline-edit.scss +8 -7
  101. package/components/InputGroup/input-group.css +22 -38
  102. package/components/InputGroup/input-group.scss +21 -29
  103. package/components/JumpLinks/jump-links.css +34 -34
  104. package/components/JumpLinks/jump-links.scss +35 -36
  105. package/components/Label/label-group.css +39 -44
  106. package/components/Label/label-group.scss +39 -45
  107. package/components/Label/label.css +380 -355
  108. package/components/Label/label.scss +434 -348
  109. package/components/List/list.css +16 -16
  110. package/components/List/list.scss +17 -17
  111. package/components/Login/login.css +70 -97
  112. package/components/Login/login.scss +56 -64
  113. package/components/Masthead/masthead.css +261 -502
  114. package/components/Masthead/masthead.scss +123 -286
  115. package/components/Menu/menu.css +3 -0
  116. package/components/Menu/menu.scss +7 -3
  117. package/components/MenuToggle/menu-toggle.css +8 -8
  118. package/components/MenuToggle/menu-toggle.scss +8 -10
  119. package/components/ModalBox/modal-box.css +59 -52
  120. package/components/ModalBox/modal-box.scss +57 -53
  121. package/components/MultipleFileUpload/multiple-file-upload.css +77 -50
  122. package/components/MultipleFileUpload/multiple-file-upload.scss +82 -53
  123. package/components/Nav/nav.css +240 -918
  124. package/components/Nav/nav.scss +300 -1082
  125. package/components/NotificationBadge/notification-badge.css +56 -81
  126. package/components/NotificationBadge/notification-badge.scss +60 -97
  127. package/components/NotificationDrawer/notification-drawer.css +104 -115
  128. package/components/NotificationDrawer/notification-drawer.scss +106 -116
  129. package/components/NumberInput/number-input.css +8 -8
  130. package/components/NumberInput/number-input.scss +7 -12
  131. package/components/OverflowMenu/overflow-menu.css +17 -47
  132. package/components/OverflowMenu/overflow-menu.scss +27 -65
  133. package/components/Page/page.css +56 -164
  134. package/components/Page/page.scss +60 -154
  135. package/components/Pagination/pagination.css +57 -124
  136. package/components/Pagination/pagination.scss +40 -128
  137. package/components/Panel/panel.css +27 -23
  138. package/components/Panel/panel.scss +29 -26
  139. package/components/Popover/popover.css +42 -53
  140. package/components/Popover/popover.scss +46 -55
  141. package/components/Progress/progress.css +31 -45
  142. package/components/Progress/progress.scss +36 -55
  143. package/components/ProgressStepper/progress-stepper.css +72 -69
  144. package/components/ProgressStepper/progress-stepper.scss +65 -65
  145. package/components/Radio/radio.css +27 -20
  146. package/components/Radio/radio.scss +28 -22
  147. package/components/Sidebar/sidebar.css +20 -9
  148. package/components/Sidebar/sidebar.scss +23 -11
  149. package/components/SimpleList/simple-list.css +35 -52
  150. package/components/SimpleList/simple-list.scss +41 -51
  151. package/components/Skeleton/skeleton.css +18 -20
  152. package/components/Skeleton/skeleton.scss +17 -21
  153. package/components/SkipToContent/skip-to-content.css +6 -3
  154. package/components/SkipToContent/skip-to-content.scss +8 -6
  155. package/components/Slider/slider.css +34 -30
  156. package/components/Slider/slider.scss +46 -43
  157. package/components/Spinner/spinner.css +17 -34
  158. package/components/Spinner/spinner.scss +19 -47
  159. package/components/Switch/switch.css +42 -38
  160. package/components/Switch/switch.scss +48 -43
  161. package/components/TabContent/tab-content.css +17 -11
  162. package/components/TabContent/tab-content.scss +18 -14
  163. package/components/Table/table-grid.css +29 -45
  164. package/components/Table/table-grid.scss +40 -53
  165. package/components/Table/table-scrollable.css +6 -6
  166. package/components/Table/table-scrollable.scss +8 -8
  167. package/components/Table/table-tree-view.css +76 -74
  168. package/components/Table/table-tree-view.scss +44 -39
  169. package/components/Table/table.css +67 -93
  170. package/components/Table/table.scss +83 -105
  171. package/components/Tabs/tabs.css +143 -175
  172. package/components/Tabs/tabs.scss +159 -217
  173. package/components/Tile/tile.css +40 -81
  174. package/components/Tile/tile.scss +38 -84
  175. package/components/Timestamp/timestamp.css +12 -9
  176. package/components/Timestamp/timestamp.scss +11 -10
  177. package/components/Title/title.css +70 -19
  178. package/components/Title/title.scss +90 -20
  179. package/components/ToggleGroup/toggle-group.css +54 -48
  180. package/components/ToggleGroup/toggle-group.scss +62 -50
  181. package/components/Toolbar/toolbar.css +2527 -1031
  182. package/components/Toolbar/toolbar.scss +233 -520
  183. package/components/Tooltip/tooltip.css +16 -18
  184. package/components/Tooltip/tooltip.scss +20 -24
  185. package/components/TreeView/tree-view.css +76 -97
  186. package/components/TreeView/tree-view.scss +82 -113
  187. package/components/Truncate/truncate.css +4 -0
  188. package/components/Truncate/truncate.scss +3 -0
  189. package/docs/components/AboutModalBox/examples/AboutModalBox.md +2 -2
  190. package/docs/components/Accordion/examples/Accordion.md +614 -416
  191. package/docs/components/ActionList/examples/ActionList.md +73 -22
  192. package/docs/components/Alert/examples/Alert.md +3 -3
  193. package/docs/components/Avatar/examples/Avatar.md +5 -19
  194. package/docs/components/BackgroundImage/examples/BackgroundImage.md +1 -1
  195. package/docs/components/Badge/examples/Badge.md +21 -0
  196. package/docs/components/Banner/examples/Banner.md +48 -25
  197. package/docs/components/Brand/examples/Brand.css +12 -0
  198. package/docs/components/Brand/examples/Brand.md +51 -32
  199. package/docs/components/Breadcrumb/examples/Breadcrumb.md +1 -1
  200. package/docs/components/Button/examples/Button.css +4 -0
  201. package/docs/components/Button/examples/Button.md +1419 -93
  202. package/docs/components/CalendarMonth/examples/CalendarMonth.md +48 -224
  203. package/docs/components/Card/examples/Card.md +550 -133
  204. package/docs/components/Check/examples/Check.md +1 -0
  205. package/docs/components/CodeBlock/examples/CodeBlock.md +4 -4
  206. package/docs/components/CodeEditor/examples/CodeEditor.md +144 -132
  207. package/docs/components/Content/examples/Content.md +5 -5
  208. package/docs/components/DatePicker/examples/DatePicker.md +5 -2
  209. package/docs/components/Divider/examples/Divider.css +3 -1
  210. package/docs/components/Divider/examples/Divider.md +30 -5
  211. package/docs/components/DragDrop/examples/DragDrop.css +1 -1
  212. package/docs/components/Drawer/examples/Drawer.md +294 -256
  213. package/docs/components/EmptyState/examples/EmptyState.md +45 -1
  214. package/docs/components/ExpandableSection/examples/ExpandableSection.md +49 -28
  215. package/docs/components/FileUpload/examples/FileUpload.md +112 -53
  216. package/docs/components/Form/examples/Form.md +134 -89
  217. package/docs/components/Icon/examples/Icon.md +82 -11
  218. package/docs/components/InlineEdit/examples/InlineEdit.md +3 -1
  219. package/docs/components/JumpLinks/examples/JumpLinks.md +280 -168
  220. package/docs/components/Label/examples/Label.css +4 -0
  221. package/docs/components/Label/examples/Label.md +3090 -703
  222. package/docs/components/LogViewer/examples/LogViewer.md +180 -180
  223. package/docs/components/Login/examples/Login.md +10 -5
  224. package/docs/components/Masthead/examples/masthead.md +443 -65
  225. package/docs/components/Menu/examples/Menu.md +507 -473
  226. package/docs/components/MenuToggle/examples/MenuToggle.md +106 -114
  227. package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +9 -9
  228. package/docs/components/Nav/examples/Navigation.css +1 -23
  229. package/docs/components/Nav/examples/Navigation.md +209 -356
  230. package/docs/components/NotificationBadge/examples/NotificationBadge.md +5 -7
  231. package/docs/components/Page/examples/Page.css +0 -8
  232. package/docs/components/Page/examples/Page.md +22 -21
  233. package/docs/components/Pagination/examples/Pagination.md +663 -637
  234. package/docs/components/Panel/examples/Panel.md +12 -0
  235. package/docs/components/Popover/examples/Popover.md +1 -1
  236. package/docs/components/ProgressStepper/examples/ProgressStepper.md +15 -14
  237. package/docs/components/Radio/examples/Radio.md +1 -1
  238. package/docs/components/Sidebar/examples/Sidebar.md +19 -0
  239. package/docs/components/SimpleList/examples/SimpleList.md +3 -3
  240. package/docs/components/TabContent/examples/TabContent.md +10 -10
  241. package/docs/components/Table/examples/Table.md +8 -8
  242. package/docs/components/Tabs/examples/Tabs.css +1 -1
  243. package/docs/components/Tabs/examples/Tabs.md +1025 -826
  244. package/docs/components/TextInputGroup/examples/TextInputGroup.md +9 -9
  245. package/docs/components/Tile/examples/Tile.md +264 -144
  246. package/docs/components/Title/examples/Title.md +18 -0
  247. package/docs/components/Toolbar/examples/Toolbar.css +20 -15
  248. package/docs/components/Toolbar/examples/Toolbar.md +985 -3355
  249. package/docs/components/TreeView/examples/TreeView.md +7 -57
  250. package/docs/components/Truncate/examples/Truncate.css +2 -2
  251. package/docs/demos/AboutModal/examples/AboutModal.md +104 -31
  252. package/docs/demos/Alert/examples/Alert.md +330 -87
  253. package/docs/demos/BackToTop/examples/BackToTop.md +102 -29
  254. package/docs/demos/Banner/examples/Banner.md +211 -60
  255. package/docs/demos/Card/examples/Card.md +2 -2
  256. package/docs/demos/CardView/examples/CardView.md +241 -187
  257. package/docs/demos/ContextSelector/examples/ContextSelector.md +377 -94
  258. package/docs/demos/Dashboard/examples/Dashboard.md +102 -29
  259. package/docs/demos/DataList/examples/DataList.md +999 -938
  260. package/docs/demos/DescriptionList/examples/DescriptionList.md +306 -87
  261. package/docs/demos/Drawer/examples/Drawer.md +640 -251
  262. package/docs/demos/Form/examples/BasicForms.md +138 -84
  263. package/docs/demos/JumpLinks/examples/JumpLinks.md +917 -385
  264. package/docs/demos/Masthead/examples/Masthead.md +786 -342
  265. package/docs/demos/Modal/examples/Modal.md +645 -198
  266. package/docs/demos/Nav/examples/Nav.md +691 -902
  267. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +515 -145
  268. package/docs/demos/Page/examples/Page.md +942 -273
  269. package/docs/demos/Page/examples/Penta.md +66 -26
  270. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +13 -9
  271. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +44 -32
  272. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +1183 -832
  273. package/docs/demos/Skeleton/examples/Skeleton.md +102 -29
  274. package/docs/demos/Table/examples/Table.md +3811 -3456
  275. package/docs/demos/Tabs/examples/Tabs.md +636 -194
  276. package/docs/demos/Toolbar/examples/Toolbar.css +10 -0
  277. package/docs/demos/Toolbar/examples/Toolbar.md +1316 -1478
  278. package/docs/demos/Wizard/examples/Wizard.md +918 -261
  279. package/docs/layouts/Flex/examples/Flex.md +11 -11
  280. package/package.json +32 -32
  281. package/patternfly-base-no-globals-theme-dark-unversioned.css +897 -880
  282. package/patternfly-base-no-globals.css +897 -880
  283. package/patternfly-base-theme-dark-unversioned.css +890 -872
  284. package/patternfly-base.css +890 -872
  285. package/patternfly-no-globals.css +8053 -7977
  286. package/patternfly-theme-dark-unversioned.css +8059 -7982
  287. package/patternfly.css +8059 -7982
  288. package/patternfly.min.css +1 -1
  289. package/patternfly.min.css.map +1 -1
  290. package/sass-utilities/mixins.scss +18 -0
  291. package/base/themes/dark/_variables.scss +0 -102
  292. package/components/AboutModalBox/themes/dark/about-modal-box.scss +0 -7
  293. package/components/Accordion/themes/dark/accordion.scss +0 -9
  294. package/components/Alert/themes/dark/alert.scss +0 -17
  295. package/components/Badge/themes/dark/badge.scss +0 -9
  296. package/components/Banner/themes/dark/banner.scss +0 -14
  297. package/components/Button/themes/dark/button.scss +0 -51
  298. package/components/CalendarMonth/themes/dark/calendar-month.scss +0 -37
  299. package/components/Card/themes/dark/card.scss +0 -20
  300. package/components/ClipboardCopy/themes/dark/clipboard-copy.scss +0 -19
  301. package/components/CodeEditor/themes/dark/code-editor.scss +0 -14
  302. package/components/DataList/themes/dark/data-list.scss +0 -10
  303. package/components/DatePicker/themes/dark/date-picker.scss +0 -8
  304. package/components/DragDrop/themes/dark/drag-drop.scss +0 -7
  305. package/components/Drawer/themes/dark/drawer.scss +0 -13
  306. package/components/Form/themes/dark/form.scss +0 -7
  307. package/components/FormControl/themes/dark/form-control.scss +0 -24
  308. package/components/HelperText/themes/dark/helper-text.scss +0 -7
  309. package/components/Hint/themes/dark/hint.scss +0 -8
  310. package/components/InputGroup/themes/dark/input-group.scss +0 -22
  311. package/components/Label/themes/dark/label.scss +0 -53
  312. package/components/Login/themes/dark/login.scss +0 -12
  313. package/components/Masthead/themes/dark/masthead.scss +0 -14
  314. package/components/ModalBox/themes/dark/modal-box.scss +0 -7
  315. package/components/NotificationBadge/themes/dark/notification-badge.scss +0 -10
  316. package/components/NotificationDrawer/themes/dark/notification-drawer.scss +0 -14
  317. package/components/Page/themes/dark/page.scss +0 -69
  318. package/components/Pagination/themes/dark/pagination.scss +0 -7
  319. package/components/Panel/themes/dark/panel.scss +0 -7
  320. package/components/Popover/themes/dark/popover.scss +0 -11
  321. package/components/Progress/themes/dark/progress.scss +0 -9
  322. package/components/SimpleList/themes/dark/simple-list.scss +0 -14
  323. package/components/Skeleton/themes/dark/skeleton.scss +0 -10
  324. package/components/Switch/themes/dark/switch.scss +0 -11
  325. package/components/Tabs/themes/dark/tabs.scss +0 -10
  326. package/components/Tile/themes/dark/tile.scss +0 -10
  327. package/components/ToggleGroup/themes/dark/toggle-group.scss +0 -12
  328. package/components/Tooltip/themes/dark/tooltip.scss +0 -8
  329. package/components/TreeView/themes/dark/tree-view.scss +0 -8
  330. package/docs/components/Avatar/examples/Avatar.css +0 -3
  331. package/docs/components/NotificationBadge/examples/NotificationBadge.css +0 -3
package/docs/demos/BackToTop/examples/BackToTop.md CHANGED
@@ -26,23 +26,117 @@ cssPrefix: pf-d-back-to-top
26
26
  </span>
27
27
  <div class="pf-v5-c-masthead__main">
28
28
  <a class="pf-v5-c-masthead__brand" href="#">
29
- <img
30
- class="pf-v5-c-brand"
31
- src="/assets/images/pf-logo.svg"
32
- alt="PatternFly logo"
33
- style="--pf-v5-c-brand--Height:36px"
34
- />
29
+ <svg height="40px" viewBox="0 0 679 158">
30
+ <title>PF-HorizontalLogo-Color</title>
31
+ <defs>
32
+ <linearGradient
33
+ x1="68%"
34
+ y1="2.25860997e-13%"
35
+ x2="32%"
36
+ y2="100%"
37
+ id="linearGradient-back-to-top-basic-example-masthead"
38
+ >
39
+ <stop stop-color="#2B9AF3" offset="0%" />
40
+ <stop
41
+ stop-color="#73BCF7"
42
+ stop-opacity="0.502212631"
43
+ offset="100%"
44
+ />
45
+ </linearGradient>
46
+ </defs>
47
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
48
+ <g
49
+ transform="translate(206.000000, 45.750000)"
50
+ fill="var(--pf-t--global--text--color--regular)"
51
+ fill-rule="nonzero"
52
+ >
53
+ <path
54
+ 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"
55
+ />
56
+ <path
57
+ 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"
58
+ />
59
+ <path
60
+ 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"
61
+ />
62
+ <path
63
+ 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"
64
+ />
65
+ <path
66
+ 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"
67
+ />
68
+ <path
69
+ 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"
70
+ />
71
+ <path
72
+ 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"
73
+ />
74
+ <polygon
75
+ 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"
76
+ />
77
+ <polygon points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25" />
78
+ <path
79
+ 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"
80
+ />
81
+ </g>
82
+ <g transform="translate(0.000000, 0.000000)">
83
+ <path
84
+ 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"
85
+ fill="#0066CC"
86
+ />
87
+ <path
88
+ d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
89
+ fill="url(#linearGradient-back-to-top-basic-example-masthead)"
90
+ />
91
+ <path
92
+ 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"
93
+ fill="url(#linearGradient-back-to-top-basic-example-masthead)"
94
+ transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
95
+ />
96
+ </g>
97
+ </g>
98
+ </svg>
35
99
  </a>
36
100
  </div>
37
101
  <div class="pf-v5-c-masthead__content">
38
102
  <div
39
- class="pf-v5-c-toolbar pf-m-full-height pf-m-static"
103
+ class="pf-v5-c-toolbar pf-m-static"
40
104
  id="back-to-top-basic-example-masthead-toolbar"
41
105
  >
42
106
  <div class="pf-v5-c-toolbar__content">
43
107
  <div class="pf-v5-c-toolbar__content-section">
108
+ <div class="pf-v5-c-toolbar__item">
109
+ <button
110
+ class="pf-v5-c-menu-toggle"
111
+ type="button"
112
+ aria-expanded="false"
113
+ >
114
+ <span class="pf-v5-c-menu-toggle__text">Overview</span>
115
+ <span class="pf-v5-c-menu-toggle__controls">
116
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
117
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
118
+ </span>
119
+ </span>
120
+ </button>
121
+ </div>
122
+
123
+ <div class="pf-v5-c-toolbar__item">
124
+ <button
125
+ class="pf-v5-c-menu-toggle"
126
+ type="button"
127
+ aria-expanded="false"
128
+ >
129
+ <span class="pf-v5-c-menu-toggle__text">Services</span>
130
+ <span class="pf-v5-c-menu-toggle__controls">
131
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
132
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
133
+ </span>
134
+ </span>
135
+ </button>
136
+ </div>
137
+
44
138
  <div
45
- 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"
139
+ 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"
46
140
  >
47
141
  <div
48
142
  class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
@@ -89,27 +183,6 @@ cssPrefix: pf-d-back-to-top
89
183
  </button>
90
184
  </div>
91
185
  </div>
92
- <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
93
- <button
94
- class="pf-v5-c-menu-toggle pf-m-full-height"
95
- type="button"
96
- aria-expanded="false"
97
- >
98
- <span class="pf-v5-c-menu-toggle__icon">
99
- <img
100
- class="pf-v5-c-avatar"
101
- alt="Avatar image"
102
- src="/assets/images/img_avatar-light.svg"
103
- />
104
- </span>
105
- <span class="pf-v5-c-menu-toggle__text">Ned Username</span>
106
- <span class="pf-v5-c-menu-toggle__controls">
107
- <span class="pf-v5-c-menu-toggle__toggle-icon">
108
- <i class="fas fa-angle-down" aria-hidden="true"></i>
109
- </span>
110
- </span>
111
- </button>
112
- </div>
113
186
  </div>
114
187
  </div>
115
188
  </div>
package/docs/demos/Banner/examples/Banner.md CHANGED
@@ -27,23 +27,117 @@ wrapperTag: div
27
27
  </span>
28
28
  <div class="pf-v5-c-masthead__main">
29
29
  <a class="pf-v5-c-masthead__brand" href="#">
30
- <img
31
- class="pf-v5-c-brand"
32
- src="/assets/images/pf-logo.svg"
33
- alt="PatternFly logo"
34
- style="--pf-v5-c-brand--Height:36px"
35
- />
30
+ <svg height="40px" viewBox="0 0 679 158">
31
+ <title>PF-HorizontalLogo-Color</title>
32
+ <defs>
33
+ <linearGradient
34
+ x1="68%"
35
+ y1="2.25860997e-13%"
36
+ x2="32%"
37
+ y2="100%"
38
+ id="linearGradient-banner-basic-example-masthead"
39
+ >
40
+ <stop stop-color="#2B9AF3" offset="0%" />
41
+ <stop
42
+ stop-color="#73BCF7"
43
+ stop-opacity="0.502212631"
44
+ offset="100%"
45
+ />
46
+ </linearGradient>
47
+ </defs>
48
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
49
+ <g
50
+ transform="translate(206.000000, 45.750000)"
51
+ fill="var(--pf-t--global--text--color--regular)"
52
+ fill-rule="nonzero"
53
+ >
54
+ <path
55
+ 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"
56
+ />
57
+ <path
58
+ 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"
59
+ />
60
+ <path
61
+ 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"
62
+ />
63
+ <path
64
+ 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"
65
+ />
66
+ <path
67
+ 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"
68
+ />
69
+ <path
70
+ 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"
71
+ />
72
+ <path
73
+ 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"
74
+ />
75
+ <polygon
76
+ 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"
77
+ />
78
+ <polygon points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25" />
79
+ <path
80
+ 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"
81
+ />
82
+ </g>
83
+ <g transform="translate(0.000000, 0.000000)">
84
+ <path
85
+ 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"
86
+ fill="#0066CC"
87
+ />
88
+ <path
89
+ d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
90
+ fill="url(#linearGradient-banner-basic-example-masthead)"
91
+ />
92
+ <path
93
+ 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"
94
+ fill="url(#linearGradient-banner-basic-example-masthead)"
95
+ transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
96
+ />
97
+ </g>
98
+ </g>
99
+ </svg>
36
100
  </a>
37
101
  </div>
38
102
  <div class="pf-v5-c-masthead__content">
39
103
  <div
40
- class="pf-v5-c-toolbar pf-m-full-height pf-m-static"
104
+ class="pf-v5-c-toolbar pf-m-static"
41
105
  id="banner-basic-example-masthead-toolbar"
42
106
  >
43
107
  <div class="pf-v5-c-toolbar__content">
44
108
  <div class="pf-v5-c-toolbar__content-section">
109
+ <div class="pf-v5-c-toolbar__item">
110
+ <button
111
+ class="pf-v5-c-menu-toggle"
112
+ type="button"
113
+ aria-expanded="false"
114
+ >
115
+ <span class="pf-v5-c-menu-toggle__text">Overview</span>
116
+ <span class="pf-v5-c-menu-toggle__controls">
117
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
118
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
119
+ </span>
120
+ </span>
121
+ </button>
122
+ </div>
123
+
124
+ <div class="pf-v5-c-toolbar__item">
125
+ <button
126
+ class="pf-v5-c-menu-toggle"
127
+ type="button"
128
+ aria-expanded="false"
129
+ >
130
+ <span class="pf-v5-c-menu-toggle__text">Services</span>
131
+ <span class="pf-v5-c-menu-toggle__controls">
132
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
133
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
134
+ </span>
135
+ </span>
136
+ </button>
137
+ </div>
138
+
45
139
  <div
46
- 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"
140
+ 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"
47
141
  >
48
142
  <div
49
143
  class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
@@ -90,27 +184,6 @@ wrapperTag: div
90
184
  </button>
91
185
  </div>
92
186
  </div>
93
- <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
94
- <button
95
- class="pf-v5-c-menu-toggle pf-m-full-height"
96
- type="button"
97
- aria-expanded="false"
98
- >
99
- <span class="pf-v5-c-menu-toggle__icon">
100
- <img
101
- class="pf-v5-c-avatar"
102
- alt="Avatar image"
103
- src="/assets/images/img_avatar-light.svg"
104
- />
105
- </span>
106
- <span class="pf-v5-c-menu-toggle__text">Ned Username</span>
107
- <span class="pf-v5-c-menu-toggle__controls">
108
- <span class="pf-v5-c-menu-toggle__toggle-icon">
109
- <i class="fas fa-angle-down" aria-hidden="true"></i>
110
- </span>
111
- </span>
112
- </button>
113
- </div>
114
187
  </div>
115
188
  </div>
116
189
  </div>
@@ -415,23 +488,124 @@ wrapperTag: div
415
488
  </span>
416
489
  <div class="pf-v5-c-masthead__main">
417
490
  <a class="pf-v5-c-masthead__brand" href="#">
418
- <img
419
- class="pf-v5-c-brand"
420
- src="/assets/images/pf-logo.svg"
421
- alt="PatternFly logo"
422
- style="--pf-v5-c-brand--Height:36px"
423
- />
491
+ <svg height="40px" viewBox="0 0 679 158">
492
+ <title>PF-HorizontalLogo-Color</title>
493
+ <defs>
494
+ <linearGradient
495
+ x1="68%"
496
+ y1="2.25860997e-13%"
497
+ x2="32%"
498
+ y2="100%"
499
+ id="linearGradient-banner-top-bottom-example-masthead"
500
+ >
501
+ <stop stop-color="#2B9AF3" offset="0%" />
502
+ <stop
503
+ stop-color="#73BCF7"
504
+ stop-opacity="0.502212631"
505
+ offset="100%"
506
+ />
507
+ </linearGradient>
508
+ </defs>
509
+ <g
510
+ stroke="none"
511
+ stroke-width="1"
512
+ fill="none"
513
+ fill-rule="evenodd"
514
+ >
515
+ <g
516
+ transform="translate(206.000000, 45.750000)"
517
+ fill="var(--pf-t--global--text--color--regular)"
518
+ fill-rule="nonzero"
519
+ >
520
+ <path
521
+ 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"
522
+ />
523
+ <path
524
+ 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"
525
+ />
526
+ <path
527
+ 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"
528
+ />
529
+ <path
530
+ 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"
531
+ />
532
+ <path
533
+ 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"
534
+ />
535
+ <path
536
+ 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"
537
+ />
538
+ <path
539
+ 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"
540
+ />
541
+ <polygon
542
+ 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"
543
+ />
544
+ <polygon
545
+ points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25"
546
+ />
547
+ <path
548
+ 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"
549
+ />
550
+ </g>
551
+ <g transform="translate(0.000000, 0.000000)">
552
+ <path
553
+ 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"
554
+ fill="#0066CC"
555
+ />
556
+ <path
557
+ d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
558
+ fill="url(#linearGradient-banner-top-bottom-example-masthead)"
559
+ />
560
+ <path
561
+ 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"
562
+ fill="url(#linearGradient-banner-top-bottom-example-masthead)"
563
+ transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
564
+ />
565
+ </g>
566
+ </g>
567
+ </svg>
424
568
  </a>
425
569
  </div>
426
570
  <div class="pf-v5-c-masthead__content">
427
571
  <div
428
- class="pf-v5-c-toolbar pf-m-full-height pf-m-static"
572
+ class="pf-v5-c-toolbar pf-m-static"
429
573
  id="banner-top-bottom-example-masthead-toolbar"
430
574
  >
431
575
  <div class="pf-v5-c-toolbar__content">
432
576
  <div class="pf-v5-c-toolbar__content-section">
577
+ <div class="pf-v5-c-toolbar__item">
578
+ <button
579
+ class="pf-v5-c-menu-toggle"
580
+ type="button"
581
+ aria-expanded="false"
582
+ >
583
+ <span class="pf-v5-c-menu-toggle__text">Overview</span>
584
+ <span class="pf-v5-c-menu-toggle__controls">
585
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
586
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
587
+ </span>
588
+ </span>
589
+ </button>
590
+ </div>
591
+
592
+ <div class="pf-v5-c-toolbar__item">
593
+ <button
594
+ class="pf-v5-c-menu-toggle"
595
+ type="button"
596
+ aria-expanded="false"
597
+ >
598
+ <span class="pf-v5-c-menu-toggle__text">Services</span>
599
+ <span class="pf-v5-c-menu-toggle__controls">
600
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
601
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
602
+ </span>
603
+ </span>
604
+ </button>
605
+ </div>
606
+
433
607
  <div
434
- 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"
608
+ 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"
435
609
  >
436
610
  <div
437
611
  class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
@@ -478,29 +652,6 @@ wrapperTag: div
478
652
  </button>
479
653
  </div>
480
654
  </div>
481
- <div
482
- class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm"
483
- >
484
- <button
485
- class="pf-v5-c-menu-toggle pf-m-full-height"
486
- type="button"
487
- aria-expanded="false"
488
- >
489
- <span class="pf-v5-c-menu-toggle__icon">
490
- <img
491
- class="pf-v5-c-avatar"
492
- alt="Avatar image"
493
- src="/assets/images/img_avatar-light.svg"
494
- />
495
- </span>
496
- <span class="pf-v5-c-menu-toggle__text">Ned Username</span>
497
- <span class="pf-v5-c-menu-toggle__controls">
498
- <span class="pf-v5-c-menu-toggle__toggle-icon">
499
- <i class="fas fa-angle-down" aria-hidden="true"></i>
500
- </span>
501
- </span>
502
- </button>
503
- </div>
504
655
  </div>
505
656
  </div>
506
657
  </div>
package/docs/demos/Card/examples/Card.md CHANGED
@@ -2458,7 +2458,7 @@ wrapperTag: div
2458
2458
  <div class="pf-v5-c-accordion">
2459
2459
  <h3>
2460
2460
  <button
2461
- class="pf-v5-c-accordion__toggle pf-m-expanded"
2461
+ class="pf-v5-c-accordion__toggle"
2462
2462
  type="button"
2463
2463
  aria-expanded="true"
2464
2464
  >
@@ -2470,7 +2470,7 @@ wrapperTag: div
2470
2470
  </span>
2471
2471
  </button>
2472
2472
  </h3>
2473
- <div class="pf-v5-c-accordion__expandable-content pf-m-expanded">
2473
+ <div class="pf-v5-c-accordion__expandable-content" hidden>
2474
2474
  <div class="pf-v5-c-accordion__expandable-content-body">
2475
2475
  <div class="pf-v5-l-grid pf-m-gutter">
2476
2476
  <div class="pf-v5-l-grid pf-m-gutter">