@patternfly/patternfly 6.5.0-prerelease.8 → 6.5.0-prerelease.81

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 (410) hide show
  1. package/README.md +2 -2
  2. package/assets/fontawesome/_variables.scss +2 -1
  3. package/assets/images/Felt-Bkg-Generic-Dark.svg +82 -0
  4. package/assets/images/Felt-Bkg-Generic-Light.svg +82 -0
  5. package/assets/images/PF-Bkg-Generic-Dark.svg +76 -0
  6. package/assets/images/PF-Bkg-Generic-Light.svg +74 -0
  7. package/assets/images/RHAiExperienceIcon.svg +27 -0
  8. package/assets/images/RHAutomationsLogo.svg +96 -0
  9. package/assets/images/RHServerStackIcon.svg +16 -0
  10. package/assets/images/compass--hero-bg.png +0 -0
  11. package/assets/images/compass--rh-wallpaper-dark.png +0 -0
  12. package/assets/images/compass--rh-wallpaper-light.png +0 -0
  13. package/assets/images/compass--wallpaper-dark.jpg +0 -0
  14. package/assets/images/compass--wallpaper-dark.png +0 -0
  15. package/assets/images/compass--wallpaper-light.jpg +0 -0
  16. package/assets/images/compass--wallpaper-light.png +0 -0
  17. package/assets/images/glass-brand-dark.jpg +0 -0
  18. package/assets/images/glass-brand-dark.png +0 -0
  19. package/assets/images/glass-brand-light.jpg +0 -0
  20. package/assets/images/glass-brand-light.png +0 -0
  21. package/base/normalize.scss +7 -0
  22. package/base/patternfly-common.css +50 -0
  23. package/base/patternfly-common.scss +59 -0
  24. package/base/patternfly-svg-icons.css +17 -0
  25. package/base/patternfly-svg-icons.scss +20 -0
  26. package/base/patternfly-variables.css +926 -513
  27. package/base/patternfly-variables.scss +46 -4
  28. package/base/tokens/tokens-dark.scss +56 -8
  29. package/base/tokens/tokens-default.scss +69 -14
  30. package/base/tokens/tokens-glass-dark.scss +26 -0
  31. package/base/tokens/tokens-glass.scss +22 -0
  32. package/base/tokens/tokens-local.scss +17 -0
  33. package/base/tokens/tokens-palette.scss +3 -1
  34. package/base/tokens/tokens-redhat-dark.scss +21 -0
  35. package/base/tokens/tokens-redhat-glass-dark.scss +40 -0
  36. package/base/tokens/tokens-redhat-glass.scss +30 -0
  37. package/base/tokens/tokens-redhat-highcontrast-dark.scss +50 -0
  38. package/base/tokens/tokens-redhat-highcontrast.scss +128 -0
  39. package/base/tokens/tokens-redhat.scss +15 -0
  40. package/components/AboutModalBox/about-modal-box.css +36 -26
  41. package/components/Accordion/accordion.css +26 -14
  42. package/components/Accordion/accordion.scss +12 -2
  43. package/components/ActionList/action-list.css +2 -0
  44. package/components/ActionList/action-list.scss +2 -0
  45. package/components/Alert/alert.css +7 -5
  46. package/components/Alert/alert.scss +2 -1
  47. package/components/Avatar/avatar.css +12 -4
  48. package/components/BackgroundImage/background-image.css +6 -3
  49. package/components/Banner/banner.css +12 -6
  50. package/components/Banner/banner.scss +7 -0
  51. package/components/Brand/brand.css +3 -1
  52. package/components/Breadcrumb/breadcrumb.css +10 -5
  53. package/components/Breadcrumb/breadcrumb.scss +6 -2
  54. package/components/Button/button.css +173 -71
  55. package/components/Button/button.scss +188 -72
  56. package/components/CalendarMonth/calendar-month.css +4 -3
  57. package/components/Card/card.css +51 -15
  58. package/components/Card/card.scss +65 -9
  59. package/components/ClipboardCopy/clipboard-copy.css +14 -7
  60. package/components/ClipboardCopy/clipboard-copy.scss +13 -4
  61. package/components/CodeEditor/code-editor.css +2 -2
  62. package/components/CodeEditor/code-editor.scss +2 -2
  63. package/components/Compass/compass.css +399 -0
  64. package/components/Compass/compass.scss +413 -0
  65. package/components/DataList/data-list.css +30 -23
  66. package/components/DataList/data-list.scss +3 -2
  67. package/components/DescriptionList/description-list-order.scss +5 -1
  68. package/components/DescriptionList/description-list.css +7 -5
  69. package/components/DescriptionList/description-list.scss +5 -1
  70. package/components/Divider/divider.css +7 -5
  71. package/components/Drawer/drawer.css +224 -75
  72. package/components/Drawer/drawer.scss +194 -27
  73. package/components/DualListSelector/dual-list-selector.css +18 -12
  74. package/components/DualListSelector/dual-list-selector.scss +1 -1
  75. package/components/ExpandableSection/expandable-section.css +21 -16
  76. package/components/ExpandableSection/expandable-section.scss +6 -3
  77. package/components/Form/form.css +2 -2
  78. package/components/Form/form.scss +2 -2
  79. package/components/FormControl/form-control.css +3 -3
  80. package/components/FormControl/form-control.scss +3 -3
  81. package/components/Hero/hero.css +74 -0
  82. package/components/Hero/hero.scss +86 -0
  83. package/components/JumpLinks/jump-links.css +16 -5
  84. package/components/JumpLinks/jump-links.scss +17 -3
  85. package/components/Label/label-group.css +2 -2
  86. package/components/Label/label-group.scss +2 -2
  87. package/components/Label/label.css +4 -3
  88. package/components/Login/login.css +58 -40
  89. package/components/Login/login.scss +7 -3
  90. package/components/Masthead/masthead.css +111 -16
  91. package/components/Masthead/masthead.scss +111 -1
  92. package/components/Menu/menu.css +49 -33
  93. package/components/Menu/menu.scss +26 -19
  94. package/components/MenuToggle/menu-toggle.css +35 -8
  95. package/components/MenuToggle/menu-toggle.scss +42 -8
  96. package/components/ModalBox/modal-box.css +9 -7
  97. package/components/ModalBox/modal-box.scss +2 -2
  98. package/components/Nav/nav.css +82 -11
  99. package/components/Nav/nav.scss +85 -5
  100. package/components/NotificationDrawer/notification-drawer.css +19 -9
  101. package/components/NotificationDrawer/notification-drawer.scss +14 -5
  102. package/components/OverflowMenu/overflow-menu.css +16 -0
  103. package/components/OverflowMenu/overflow-menu.scss +20 -1
  104. package/components/Page/page.css +421 -32
  105. package/components/Page/page.scss +397 -15
  106. package/components/Pagination/pagination.css +56 -4
  107. package/components/Pagination/pagination.scss +71 -6
  108. package/components/Panel/panel.css +41 -3
  109. package/components/Panel/panel.scss +56 -3
  110. package/components/Progress/progress.css +3 -1
  111. package/components/Progress/progress.scss +3 -1
  112. package/components/ProgressStepper/progress-stepper.scss +5 -1
  113. package/components/Sidebar/sidebar.css +1 -1
  114. package/components/Sidebar/sidebar.scss +7 -3
  115. package/components/Skeleton/skeleton.css +16 -15
  116. package/components/Slider/slider.css +32 -18
  117. package/components/Switch/switch.css +4 -2
  118. package/components/Switch/switch.scss +1 -1
  119. package/components/Table/table-grid.css +28 -36
  120. package/components/Table/table-grid.scss +4 -4
  121. package/components/Table/table-scrollable.css +1 -1
  122. package/components/Table/table-scrollable.scss +1 -1
  123. package/components/Table/table-tree-view.css +4 -2
  124. package/components/Table/table.css +104 -57
  125. package/components/Table/table.scss +92 -37
  126. package/components/Tabs/tabs.css +39 -33
  127. package/components/Tabs/tabs.scss +38 -26
  128. package/components/TextInputGroup/text-input-group.css +2 -2
  129. package/components/TextInputGroup/text-input-group.scss +2 -2
  130. package/components/ToggleGroup/toggle-group.css +44 -19
  131. package/components/ToggleGroup/toggle-group.scss +51 -22
  132. package/components/Toolbar/toolbar.css +195 -16
  133. package/components/Toolbar/toolbar.scss +89 -9
  134. package/components/TreeView/tree-view.css +45 -14
  135. package/components/TreeView/tree-view.scss +32 -1
  136. package/components/Wizard/wizard.css +41 -19
  137. package/components/Wizard/wizard.scss +26 -6
  138. package/components/_index.css +2740 -829
  139. package/components/_index.scss +3 -1
  140. package/docs/components/AboutModalBox/examples/AboutModalBox.md +13 -1
  141. package/docs/components/Accordion/examples/Accordion.md +392 -30
  142. package/docs/components/ActionList/examples/ActionList.md +143 -11
  143. package/docs/components/Alert/examples/Alert.md +678 -54
  144. package/docs/components/Avatar/examples/Avatar.md +4 -4
  145. package/docs/components/BackToTop/examples/BackToTop.md +13 -1
  146. package/docs/components/Banner/examples/Banner.md +196 -5
  147. package/docs/components/Brand/examples/Brand.md +2 -2
  148. package/docs/components/Breadcrumb/examples/Breadcrumb.md +313 -26
  149. package/docs/components/Button/examples/Button.md +2829 -333
  150. package/docs/components/CalendarMonth/examples/CalendarMonth.md +156 -12
  151. package/docs/components/Card/examples/Card.md +335 -12
  152. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +293 -28
  153. package/docs/components/CodeBlock/examples/CodeBlock.md +104 -8
  154. package/docs/components/CodeEditor/examples/CodeEditor.md +234 -18
  155. package/docs/components/Compass/examples/Compass.css +8 -0
  156. package/docs/components/Compass/examples/Compass.md +109 -0
  157. package/docs/components/DataList/examples/DataList.md +468 -78
  158. package/docs/components/DatePicker/examples/DatePicker.md +78 -6
  159. package/docs/components/DescriptionList/examples/DescriptionList.md +327 -27
  160. package/docs/components/Divider/examples/Divider.md +2 -2
  161. package/docs/components/DragDrop/examples/DragDrop.css +1 -1
  162. package/docs/components/Drawer/examples/Drawer.md +415 -35
  163. package/docs/components/DualListSelector/examples/DualListSelector.md +1247 -161
  164. package/docs/components/EmptyState/examples/EmptyState.md +78 -6
  165. package/docs/components/ExpandableSection/examples/ExpandableSection.md +91 -7
  166. package/docs/components/Form/examples/Form.md +78 -6
  167. package/docs/components/Hero/examples/Hero.md +25 -0
  168. package/docs/components/Hint/examples/Hint.md +39 -3
  169. package/docs/components/Icon/examples/Icon.md +105 -9
  170. package/docs/components/InlineEdit/examples/InlineEdit.md +338 -26
  171. package/docs/components/InputGroup/examples/InputGroup.md +40 -4
  172. package/docs/components/JumpLinks/examples/JumpLinks.md +54 -6
  173. package/docs/components/Label/examples/Label.md +2834 -218
  174. package/docs/components/Login/examples/Login.md +39 -3
  175. package/docs/components/Masthead/examples/masthead.md +80 -1
  176. package/docs/components/Menu/examples/Menu.md +1679 -133
  177. package/docs/components/MenuToggle/examples/MenuToggle.md +1514 -118
  178. package/docs/components/ModalBox/examples/ModalBox.md +289 -25
  179. package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +156 -12
  180. package/docs/components/Nav/examples/Navigation.md +898 -62
  181. package/docs/components/NotificationDrawer/examples/NotificationDrawer.md +1079 -83
  182. package/docs/components/OverflowMenu/examples/overflow-menu.css +6 -3
  183. package/docs/components/OverflowMenu/examples/overflow-menu.md +164 -11
  184. package/docs/components/Page/examples/Page.md +211 -25
  185. package/docs/components/Pagination/examples/Pagination.md +1291 -80
  186. package/docs/components/Panel/examples/Panel.css +3 -0
  187. package/docs/components/Panel/examples/Panel.md +71 -4
  188. package/docs/components/Popover/examples/Popover.md +286 -22
  189. package/docs/components/Progress/examples/Progress.md +91 -7
  190. package/docs/components/ProgressStepper/examples/ProgressStepper.md +275 -23
  191. package/docs/components/Sidebar/examples/Sidebar.md +1 -1
  192. package/docs/components/Slider/examples/Slider.md +52 -4
  193. package/docs/components/Table/examples/Table.css +2 -1
  194. package/docs/components/Table/examples/Table.md +7543 -653
  195. package/docs/components/Tabs/examples/Tabs.md +5734 -471
  196. package/docs/components/TextInputGroup/examples/TextInputGroup.md +600 -48
  197. package/docs/components/ToggleGroup/examples/toggle-group.md +261 -15
  198. package/docs/components/Toolbar/examples/Toolbar.css +1 -1
  199. package/docs/components/Toolbar/examples/Toolbar.md +1145 -88
  200. package/docs/components/TreeView/examples/TreeView.md +1390 -130
  201. package/docs/components/Wizard/examples/Wizard.md +828 -73
  202. package/docs/demos/AboutModal/examples/AboutModal.md +158 -53
  203. package/docs/demos/Alert/examples/Alert.md +539 -164
  204. package/docs/demos/BackToTop/examples/BackToTop.md +158 -53
  205. package/docs/demos/Banner/examples/Banner.md +290 -104
  206. package/docs/demos/Button/examples/Button.md +13 -1
  207. package/docs/demos/Card/examples/Card.md +1041 -134
  208. package/docs/demos/CardView/examples/CardView.md +570 -171
  209. package/docs/demos/Compass/examples/Compass.md +10005 -0
  210. package/docs/demos/Dashboard/examples/Dashboard.md +745 -177
  211. package/docs/demos/DataList/examples/DataList.md +1301 -292
  212. package/docs/demos/DescriptionList/examples/DescriptionList.md +472 -160
  213. package/docs/demos/Drawer/examples/Drawer.md +718 -262
  214. package/docs/demos/Form/examples/BasicForms.md +273 -21
  215. package/docs/demos/JumpLinks/examples/JumpLinks.md +862 -319
  216. package/docs/demos/Masthead/examples/Masthead.md +1119 -489
  217. package/docs/demos/Modal/examples/Modal.md +948 -321
  218. package/docs/demos/Nav/examples/Nav.md +3449 -499
  219. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +2418 -405
  220. package/docs/demos/Page/examples/Page.md +2137 -773
  221. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +13 -1
  222. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +52 -4
  223. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +1913 -504
  224. package/docs/demos/Skeleton/examples/Skeleton.md +145 -52
  225. package/docs/demos/Table/examples/Table.md +11807 -2275
  226. package/docs/demos/Tabs/examples/Tabs.md +1117 -337
  227. package/docs/demos/Toolbar/examples/Toolbar.md +1818 -286
  228. package/docs/demos/Wizard/examples/Wizard.md +1705 -526
  229. package/docs/layouts/Bullseye/examples/Bullseye.css +2 -2
  230. package/docs/layouts/Bullseye/examples/Bullseye.md +2 -1
  231. package/docs/layouts/Flex/examples/Flex.css +3 -3
  232. package/docs/layouts/Flex/examples/Flex.md +3 -2
  233. package/docs/layouts/Gallery/examples/Gallery.css +2 -2
  234. package/docs/layouts/Gallery/examples/Gallery.md +4 -3
  235. package/docs/layouts/Grid/examples/Grid.css +1 -1
  236. package/docs/layouts/Grid/examples/Grid.md +6 -5
  237. package/docs/layouts/Level/examples/Level.css +3 -3
  238. package/docs/layouts/Level/examples/Level.md +2 -1
  239. package/docs/layouts/Split/examples/Split.css +1 -1
  240. package/docs/layouts/Split/examples/Split.md +2 -1
  241. package/docs/layouts/Stack/examples/Stack.css +3 -3
  242. package/docs/layouts/Stack/examples/Stack.md +2 -1
  243. package/docs/utilities/Accessibility/examples/Accessibility.md +3 -2
  244. package/docs/utilities/Alignment/examples/Alignment.css +4 -4
  245. package/docs/utilities/Alignment/examples/Alignment.md +3 -2
  246. package/docs/utilities/BackgroundColor/examples/BackgroundColor.md +5 -4
  247. package/docs/utilities/BoxShadow/examples/box-shadow.css +2 -2
  248. package/docs/utilities/BoxShadow/examples/box-shadow.md +2 -1
  249. package/docs/utilities/Display/examples/Display.css +1 -1
  250. package/docs/utilities/Display/examples/Display.md +3 -2
  251. package/docs/utilities/Flex/examples/Flex.css +7 -7
  252. package/docs/utilities/Flex/examples/Flex.md +3 -2
  253. package/docs/utilities/Float/examples/Float.css +2 -2
  254. package/docs/utilities/Float/examples/Float.md +3 -2
  255. package/docs/utilities/Sizing/examples/Sizing.md +8 -7
  256. package/docs/utilities/Spacing/examples/Spacing.css +2 -2
  257. package/docs/utilities/Spacing/examples/Spacing.md +3 -2
  258. package/docs/utilities/Text/examples/Text.md +5 -4
  259. package/icons/PfIcons/add-circle-o.svg +4 -0
  260. package/icons/PfIcons/ansible-tower.svg +4 -0
  261. package/icons/PfIcons/applications.svg +4 -0
  262. package/icons/PfIcons/arrow.svg +4 -0
  263. package/icons/PfIcons/asleep.svg +4 -0
  264. package/icons/PfIcons/attention-bell.svg +4 -0
  265. package/icons/PfIcons/automation.svg +4 -0
  266. package/icons/PfIcons/bell.svg +4 -0
  267. package/icons/PfIcons/blueprint.svg +4 -0
  268. package/icons/PfIcons/build.svg +4 -0
  269. package/icons/PfIcons/builder-image.svg +4 -0
  270. package/icons/PfIcons/bundle.svg +4 -0
  271. package/icons/PfIcons/catalog.svg +4 -0
  272. package/icons/PfIcons/chat.svg +4 -0
  273. package/icons/PfIcons/close.svg +4 -0
  274. package/icons/PfIcons/cloud-security.svg +4 -0
  275. package/icons/PfIcons/cloud-tenant.svg +4 -0
  276. package/icons/PfIcons/cluster.svg +4 -0
  277. package/icons/PfIcons/connected.svg +4 -0
  278. package/icons/PfIcons/container-node.svg +4 -0
  279. package/icons/PfIcons/cpu.svg +4 -0
  280. package/icons/PfIcons/critical-risk.svg +4 -0
  281. package/icons/PfIcons/data-processor.svg +4 -0
  282. package/icons/PfIcons/data-sink.svg +4 -0
  283. package/icons/PfIcons/data-source.svg +4 -0
  284. package/icons/PfIcons/degraded.svg +4 -0
  285. package/icons/PfIcons/disconnected.svg +4 -0
  286. package/icons/PfIcons/domain.svg +4 -0
  287. package/icons/PfIcons/edit.svg +4 -0
  288. package/icons/PfIcons/enhancement.svg +4 -0
  289. package/icons/PfIcons/enterprise.svg +4 -0
  290. package/icons/PfIcons/equalizer.svg +4 -0
  291. package/icons/PfIcons/error-circle-o.svg +4 -0
  292. package/icons/PfIcons/export.svg +4 -0
  293. package/icons/PfIcons/filter.svg +4 -0
  294. package/icons/PfIcons/flavor.svg +4 -0
  295. package/icons/PfIcons/folder-close.svg +4 -0
  296. package/icons/PfIcons/folder-open.svg +4 -0
  297. package/icons/PfIcons/globe-route.svg +4 -0
  298. package/icons/PfIcons/help.svg +4 -0
  299. package/icons/PfIcons/history.svg +4 -0
  300. package/icons/PfIcons/home.svg +4 -0
  301. package/icons/PfIcons/import.svg +4 -0
  302. package/icons/PfIcons/in-progress.svg +4 -0
  303. package/icons/PfIcons/info.svg +4 -0
  304. package/icons/PfIcons/infrastructure.svg +4 -0
  305. package/icons/PfIcons/integration.svg +4 -0
  306. package/icons/PfIcons/key.svg +4 -0
  307. package/icons/PfIcons/locked.svg +4 -0
  308. package/icons/PfIcons/maintenance.svg +4 -0
  309. package/icons/PfIcons/memory.svg +4 -0
  310. package/icons/PfIcons/messages.svg +4 -0
  311. package/icons/PfIcons/middleware.svg +4 -0
  312. package/icons/PfIcons/migration.svg +4 -0
  313. package/icons/PfIcons/module.svg +4 -0
  314. package/icons/PfIcons/monitoring.svg +4 -0
  315. package/icons/PfIcons/multicluster.svg +4 -0
  316. package/icons/PfIcons/namespaces.svg +4 -0
  317. package/icons/PfIcons/network.svg +4 -0
  318. package/icons/PfIcons/new-process.svg +4 -0
  319. package/icons/PfIcons/not-started.svg +4 -0
  320. package/icons/PfIcons/off.svg +4 -0
  321. package/icons/PfIcons/ok.svg +4 -0
  322. package/icons/PfIcons/on-running.svg +4 -0
  323. package/icons/PfIcons/on.svg +4 -0
  324. package/icons/PfIcons/open-drawer-right.svg +4 -0
  325. package/icons/PfIcons/openshift.svg +4 -0
  326. package/icons/PfIcons/openstack.svg +4 -0
  327. package/icons/PfIcons/optimize.svg +4 -0
  328. package/icons/PfIcons/orders.svg +4 -0
  329. package/icons/PfIcons/os-image.svg +4 -0
  330. package/icons/PfIcons/package.svg +4 -0
  331. package/icons/PfIcons/panel-close.svg +4 -0
  332. package/icons/PfIcons/panel-open.svg +4 -0
  333. package/icons/PfIcons/paused.svg +4 -0
  334. package/icons/PfIcons/pending.svg +4 -0
  335. package/icons/PfIcons/pficon-dragdrop.svg +4 -0
  336. package/icons/PfIcons/pficon-history.svg +4 -0
  337. package/icons/PfIcons/pficon-network-range.svg +4 -0
  338. package/icons/PfIcons/pficon-satellite.svg +4 -0
  339. package/icons/PfIcons/pficon-sort-common-asc.svg +4 -0
  340. package/icons/PfIcons/pficon-sort-common-desc.svg +4 -0
  341. package/icons/PfIcons/pficon-template.svg +4 -0
  342. package/icons/PfIcons/pficon-vcenter.svg +4 -0
  343. package/icons/PfIcons/plugged.svg +4 -0
  344. package/icons/PfIcons/port.svg +4 -0
  345. package/icons/PfIcons/print.svg +4 -0
  346. package/icons/PfIcons/private.svg +4 -0
  347. package/icons/PfIcons/process-automation.svg +4 -0
  348. package/icons/PfIcons/project.svg +4 -0
  349. package/icons/PfIcons/rebalance.svg +4 -0
  350. package/icons/PfIcons/rebooting.svg +4 -0
  351. package/icons/PfIcons/regions.svg +4 -0
  352. package/icons/PfIcons/registry.svg +4 -0
  353. package/icons/PfIcons/remove2.svg +4 -0
  354. package/icons/PfIcons/replicator.svg +4 -0
  355. package/icons/PfIcons/repository.svg +4 -0
  356. package/icons/PfIcons/resource-pool.svg +4 -0
  357. package/icons/PfIcons/resources-almost-empty.svg +4 -0
  358. package/icons/PfIcons/resources-almost-full.svg +4 -0
  359. package/icons/PfIcons/resources-empty.svg +4 -0
  360. package/icons/PfIcons/resources-full.svg +4 -0
  361. package/icons/PfIcons/running.svg +4 -0
  362. package/icons/PfIcons/save.svg +4 -0
  363. package/icons/PfIcons/screen.svg +4 -0
  364. package/icons/PfIcons/security.svg +4 -0
  365. package/icons/PfIcons/server-group.svg +4 -0
  366. package/icons/PfIcons/server.svg +4 -0
  367. package/icons/PfIcons/service-catalog.svg +4 -0
  368. package/icons/PfIcons/service.svg +4 -0
  369. package/icons/PfIcons/services.svg +4 -0
  370. package/icons/PfIcons/severity-critical.svg +4 -0
  371. package/icons/PfIcons/severity-important.svg +4 -0
  372. package/icons/PfIcons/severity-minor.svg +4 -0
  373. package/icons/PfIcons/severity-moderate.svg +4 -0
  374. package/icons/PfIcons/severity-none.svg +4 -0
  375. package/icons/PfIcons/severity-undefined.svg +4 -0
  376. package/icons/PfIcons/spinner.svg +4 -0
  377. package/icons/PfIcons/spinner2.svg +4 -0
  378. package/icons/PfIcons/storage-domain.svg +4 -0
  379. package/icons/PfIcons/task.svg +4 -0
  380. package/icons/PfIcons/tenant.svg +4 -0
  381. package/icons/PfIcons/thumb-tack.svg +4 -0
  382. package/icons/PfIcons/topology.svg +4 -0
  383. package/icons/PfIcons/treeview.svg +4 -0
  384. package/icons/PfIcons/trend-down.svg +4 -0
  385. package/icons/PfIcons/trend-up.svg +4 -0
  386. package/icons/PfIcons/unknown.svg +4 -0
  387. package/icons/PfIcons/unlocked.svg +4 -0
  388. package/icons/PfIcons/unplugged.svg +4 -0
  389. package/icons/PfIcons/user.svg +4 -0
  390. package/icons/PfIcons/users.svg +4 -0
  391. package/icons/PfIcons/virtual-machine.svg +4 -0
  392. package/icons/PfIcons/volume.svg +4 -0
  393. package/icons/PfIcons/warning-triangle.svg +4 -0
  394. package/icons/PfIcons/zone.svg +4 -0
  395. package/layouts/Flex/flex.scss +83 -19
  396. package/layouts/Gallery/gallery.css +6 -2
  397. package/layouts/_index.css +6 -2
  398. package/package.json +55 -17
  399. package/patternfly-base-no-globals.css +969 -489
  400. package/patternfly-base.css +976 -489
  401. package/patternfly-charts.css +3 -3
  402. package/patternfly-no-globals.css +3623 -1194
  403. package/patternfly.css +3630 -1194
  404. package/patternfly.min.css +1 -1
  405. package/patternfly.min.css.map +1 -1
  406. package/patternfly.scss +48 -0
  407. package/sass-utilities/functions.scss +32 -25
  408. package/sass-utilities/mixins.scss +54 -23
  409. package/sass-utilities/namespaces-components.scss +6 -0
  410. package/sass-utilities/scss-variables.scss +3 -0
package/docs/demos/Masthead/examples/Masthead.md CHANGED
@@ -16,7 +16,8 @@ wrapperTag: div
16
16
  <span class="pf-v6-c-button__text">Skip to content</span>
17
17
  </a>
18
18
  </div>
19
- <header class="pf-v6-c-masthead" id="masthead-basic-example-masthead">
19
+
20
+ <header class="pf-v6-c-masthead" id="masthead-basic-example-docked">
20
21
  <div class="pf-v6-c-masthead__main">
21
22
  <span class="pf-v6-c-masthead__toggle">
22
23
  <button
@@ -58,7 +59,7 @@ wrapperTag: div
58
59
  y1="2.25860997e-13%"
59
60
  x2="32%"
60
61
  y2="100%"
61
- id="linearGradient-masthead-basic-example-masthead"
62
+ id="linearGradient-masthead-basic-example-docked"
62
63
  >
63
64
  <stop stop-color="#2B9AF3" offset="0%" />
64
65
  <stop
@@ -112,11 +113,11 @@ wrapperTag: div
112
113
  />
113
114
  <path
114
115
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
115
- fill="url(#linearGradient-masthead-basic-example-masthead)"
116
+ fill="url(#linearGradient-masthead-basic-example-docked)"
116
117
  />
117
118
  <path
118
119
  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"
119
- fill="url(#linearGradient-masthead-basic-example-masthead)"
120
+ fill="url(#linearGradient-masthead-basic-example-docked)"
120
121
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
121
122
  />
122
123
  </g>
@@ -128,7 +129,7 @@ wrapperTag: div
128
129
  <div class="pf-v6-c-masthead__content">
129
130
  <div
130
131
  class="pf-v6-c-toolbar pf-m-static"
131
- id="masthead-basic-example-masthead-toolbar"
132
+ id="masthead-basic-example-docked-toolbar"
132
133
  >
133
134
  <div class="pf-v6-c-toolbar__content">
134
135
  <div class="pf-v6-c-toolbar__content-section">
@@ -141,7 +142,19 @@ wrapperTag: div
141
142
  aria-label="Actions"
142
143
  >
143
144
  <span class="pf-v6-c-menu-toggle__icon">
144
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
145
+ <svg
146
+ class="pf-v6-svg"
147
+ viewBox="0 0 32 32"
148
+ fill="currentColor"
149
+ aria-hidden="true"
150
+ role="img"
151
+ width="1em"
152
+ height="1em"
153
+ >
154
+ <path
155
+ d="M12.25 5c0-2.068 1.683-3.75 3.75-3.75S19.75 2.932 19.75 5 18.067 8.75 16 8.75 12.25 7.068 12.25 5ZM16 12.25c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Zm0 11c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Z"
156
+ />
157
+ </svg>
145
158
  </span>
146
159
  </button>
147
160
  </div>
@@ -152,44 +165,46 @@ wrapperTag: div
152
165
  </div>
153
166
  </header>
154
167
  <div class="pf-v6-c-page__sidebar">
155
- <div class="pf-v6-c-page__sidebar-body">
156
- <nav
157
- class="pf-v6-c-nav"
158
- id="masthead-basic-example-primary-nav"
159
- aria-label="Global"
160
- >
161
- <ul class="pf-v6-c-nav__list" role="list">
162
- <li class="pf-v6-c-nav__item">
163
- <a href="#" class="pf-v6-c-nav__link">
164
- <span class="pf-v6-c-nav__link-text">System panel</span>
165
- </a>
166
- </li>
167
- <li class="pf-v6-c-nav__item">
168
- <a
169
- href="#"
170
- class="pf-v6-c-nav__link pf-m-current"
171
- aria-current="page"
172
- >
173
- <span class="pf-v6-c-nav__link-text">Policy</span>
174
- </a>
175
- </li>
176
- <li class="pf-v6-c-nav__item">
177
- <a href="#" class="pf-v6-c-nav__link">
178
- <span class="pf-v6-c-nav__link-text">Authentication</span>
179
- </a>
180
- </li>
181
- <li class="pf-v6-c-nav__item">
182
- <a href="#" class="pf-v6-c-nav__link">
183
- <span class="pf-v6-c-nav__link-text">Network services</span>
184
- </a>
185
- </li>
186
- <li class="pf-v6-c-nav__item">
187
- <a href="#" class="pf-v6-c-nav__link">
188
- <span class="pf-v6-c-nav__link-text">Server</span>
189
- </a>
190
- </li>
191
- </ul>
192
- </nav>
168
+ <div class="pf-v6-c-page__sidebar-main">
169
+ <div class="pf-v6-c-page__sidebar-body">
170
+ <nav
171
+ class="pf-v6-c-nav"
172
+ id="masthead-basic-example-primary-nav"
173
+ aria-label="Global"
174
+ >
175
+ <ul class="pf-v6-c-nav__list" role="list">
176
+ <li class="pf-v6-c-nav__item">
177
+ <a href="#" class="pf-v6-c-nav__link">
178
+ <span class="pf-v6-c-nav__link-text">System panel</span>
179
+ </a>
180
+ </li>
181
+ <li class="pf-v6-c-nav__item">
182
+ <a
183
+ href="#"
184
+ class="pf-v6-c-nav__link pf-m-current"
185
+ aria-current="page"
186
+ >
187
+ <span class="pf-v6-c-nav__link-text">Policy</span>
188
+ </a>
189
+ </li>
190
+ <li class="pf-v6-c-nav__item">
191
+ <a href="#" class="pf-v6-c-nav__link">
192
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
193
+ </a>
194
+ </li>
195
+ <li class="pf-v6-c-nav__item">
196
+ <a href="#" class="pf-v6-c-nav__link">
197
+ <span class="pf-v6-c-nav__link-text">Network services</span>
198
+ </a>
199
+ </li>
200
+ <li class="pf-v6-c-nav__item">
201
+ <a href="#" class="pf-v6-c-nav__link">
202
+ <span class="pf-v6-c-nav__link-text">Server</span>
203
+ </a>
204
+ </li>
205
+ </ul>
206
+ </nav>
207
+ </div>
193
208
  </div>
194
209
  </div>
195
210
  <div class="pf-v6-c-page__main-container" tabindex="-1">
@@ -207,21 +222,57 @@ wrapperTag: div
207
222
  </li>
208
223
  <li class="pf-v6-c-breadcrumb__item">
209
224
  <span class="pf-v6-c-breadcrumb__item-divider">
210
- <i class="fas fa-angle-right" aria-hidden="true"></i>
225
+ <svg
226
+ class="pf-v6-svg"
227
+ viewBox="0 0 20 20"
228
+ fill="currentColor"
229
+ aria-hidden="true"
230
+ role="img"
231
+ width="1em"
232
+ height="1em"
233
+ >
234
+ <path
235
+ d="M14.35 8.94 6.71 1.29l-.02-.02c-.4-.38-1.03-.37-1.41.02-.38.4-.37 1.03.02 1.41l7.29 7.29-7.29 7.29a1.003 1.003 0 0 0 1.42 1.42l7.65-7.65c.59-.59.59-1.54 0-2.12Z"
236
+ />
237
+ </svg>
211
238
  </span>
212
239
 
213
240
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
214
241
  </li>
215
242
  <li class="pf-v6-c-breadcrumb__item">
216
243
  <span class="pf-v6-c-breadcrumb__item-divider">
217
- <i class="fas fa-angle-right" aria-hidden="true"></i>
244
+ <svg
245
+ class="pf-v6-svg"
246
+ viewBox="0 0 20 20"
247
+ fill="currentColor"
248
+ aria-hidden="true"
249
+ role="img"
250
+ width="1em"
251
+ height="1em"
252
+ >
253
+ <path
254
+ d="M14.35 8.94 6.71 1.29l-.02-.02c-.4-.38-1.03-.37-1.41.02-.38.4-.37 1.03.02 1.41l7.29 7.29-7.29 7.29a1.003 1.003 0 0 0 1.42 1.42l7.65-7.65c.59-.59.59-1.54 0-2.12Z"
255
+ />
256
+ </svg>
218
257
  </span>
219
258
 
220
259
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
221
260
  </li>
222
261
  <li class="pf-v6-c-breadcrumb__item">
223
262
  <span class="pf-v6-c-breadcrumb__item-divider">
224
- <i class="fas fa-angle-right" aria-hidden="true"></i>
263
+ <svg
264
+ class="pf-v6-svg"
265
+ viewBox="0 0 20 20"
266
+ fill="currentColor"
267
+ aria-hidden="true"
268
+ role="img"
269
+ width="1em"
270
+ height="1em"
271
+ >
272
+ <path
273
+ d="M14.35 8.94 6.71 1.29l-.02-.02c-.4-.38-1.03-.37-1.41.02-.38.4-.37 1.03.02 1.41l7.29 7.29-7.29 7.29a1.003 1.003 0 0 0 1.42 1.42l7.65-7.65c.59-.59.59-1.54 0-2.12Z"
274
+ />
275
+ </svg>
225
276
  </span>
226
277
 
227
278
  <a
@@ -234,9 +285,15 @@ wrapperTag: div
234
285
  </nav>
235
286
  </div>
236
287
  </section>
237
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
288
+ <section
289
+ class="pf-v6-c-page__main-section pf-m-limit-width"
290
+ aria-labelledby="main-title"
291
+ >
238
292
  <div class="pf-v6-c-page__main-body">
239
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
293
+ <h1
294
+ class="pf-v6-c-content--h1 pf-m-page-title"
295
+ id="main-title"
296
+ >Main title</h1>
240
297
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
241
298
  </div>
242
299
  </section>
@@ -294,9 +351,10 @@ wrapperTag: div
294
351
  <span class="pf-v6-c-button__text">Skip to content</span>
295
352
  </a>
296
353
  </div>
354
+
297
355
  <header
298
356
  class="pf-v6-c-masthead"
299
- id="masthead-context-selecton-drilldown-example-masthead"
357
+ id="masthead-context-selecton-drilldown-example-docked"
300
358
  >
301
359
  <div class="pf-v6-c-masthead__main">
302
360
  <span class="pf-v6-c-masthead__toggle">
@@ -339,7 +397,7 @@ wrapperTag: div
339
397
  y1="2.25860997e-13%"
340
398
  x2="32%"
341
399
  y2="100%"
342
- id="linearGradient-masthead-context-selecton-drilldown-example-masthead"
400
+ id="linearGradient-masthead-context-selecton-drilldown-example-docked"
343
401
  >
344
402
  <stop stop-color="#2B9AF3" offset="0%" />
345
403
  <stop
@@ -393,11 +451,11 @@ wrapperTag: div
393
451
  />
394
452
  <path
395
453
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
396
- fill="url(#linearGradient-masthead-context-selecton-drilldown-example-masthead)"
454
+ fill="url(#linearGradient-masthead-context-selecton-drilldown-example-docked)"
397
455
  />
398
456
  <path
399
457
  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"
400
- fill="url(#linearGradient-masthead-context-selecton-drilldown-example-masthead)"
458
+ fill="url(#linearGradient-masthead-context-selecton-drilldown-example-docked)"
401
459
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
402
460
  />
403
461
  </g>
@@ -409,7 +467,7 @@ wrapperTag: div
409
467
  <div class="pf-v6-c-masthead__content">
410
468
  <div
411
469
  class="pf-v6-c-toolbar pf-m-static"
412
- id="masthead-context-selecton-drilldown-example-masthead-toolbar"
470
+ id="masthead-context-selecton-drilldown-example-docked-toolbar"
413
471
  >
414
472
  <div class="pf-v6-c-toolbar__content">
415
473
  <div class="pf-v6-c-toolbar__content-section">
@@ -423,7 +481,19 @@ wrapperTag: div
423
481
  <span class="pf-v6-c-menu-toggle__text">Context selector</span>
424
482
  <span class="pf-v6-c-menu-toggle__controls">
425
483
  <span class="pf-v6-c-menu-toggle__toggle-icon">
426
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
484
+ <svg
485
+ class="pf-v6-svg"
486
+ viewBox="0 0 20 20"
487
+ fill="currentColor"
488
+ aria-hidden="true"
489
+ role="img"
490
+ width="1em"
491
+ height="1em"
492
+ >
493
+ <path
494
+ d="M18.92 5.62C18.77 5.25 18.4 5 18 5H2a1.003 1.003 0 0 0-.71 1.71l7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65c.29-.29.37-.72.22-1.09Z"
495
+ />
496
+ </svg>
427
497
  </span>
428
498
  </span>
429
499
  </button>
@@ -437,7 +507,19 @@ wrapperTag: div
437
507
  <span class="pf-v6-c-menu-toggle__text">Dropdown</span>
438
508
  <span class="pf-v6-c-menu-toggle__controls">
439
509
  <span class="pf-v6-c-menu-toggle__toggle-icon">
440
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
510
+ <svg
511
+ class="pf-v6-svg"
512
+ viewBox="0 0 20 20"
513
+ fill="currentColor"
514
+ aria-hidden="true"
515
+ role="img"
516
+ width="1em"
517
+ height="1em"
518
+ >
519
+ <path
520
+ d="M18.92 5.62C18.77 5.25 18.4 5 18 5H2a1.003 1.003 0 0 0-.71 1.71l7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65c.29-.29.37-.72.22-1.09Z"
521
+ />
522
+ </svg>
441
523
  </span>
442
524
  </span>
443
525
  </button>
@@ -452,7 +534,19 @@ wrapperTag: div
452
534
  aria-label="Actions"
453
535
  >
454
536
  <span class="pf-v6-c-menu-toggle__icon">
455
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
537
+ <svg
538
+ class="pf-v6-svg"
539
+ viewBox="0 0 32 32"
540
+ fill="currentColor"
541
+ aria-hidden="true"
542
+ role="img"
543
+ width="1em"
544
+ height="1em"
545
+ >
546
+ <path
547
+ d="M12.25 5c0-2.068 1.683-3.75 3.75-3.75S19.75 2.932 19.75 5 18.067 8.75 16 8.75 12.25 7.068 12.25 5ZM16 12.25c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Zm0 11c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Z"
548
+ />
549
+ </svg>
456
550
  </span>
457
551
  </button>
458
552
  </div>
@@ -462,44 +556,46 @@ wrapperTag: div
462
556
  </div>
463
557
  </header>
464
558
  <div class="pf-v6-c-page__sidebar">
465
- <div class="pf-v6-c-page__sidebar-body">
466
- <nav
467
- class="pf-v6-c-nav"
468
- id="masthead-context-selecton-drilldown-example-primary-nav"
469
- aria-label="Global"
470
- >
471
- <ul class="pf-v6-c-nav__list" role="list">
472
- <li class="pf-v6-c-nav__item">
473
- <a href="#" class="pf-v6-c-nav__link">
474
- <span class="pf-v6-c-nav__link-text">System panel</span>
475
- </a>
476
- </li>
477
- <li class="pf-v6-c-nav__item">
478
- <a
479
- href="#"
480
- class="pf-v6-c-nav__link pf-m-current"
481
- aria-current="page"
482
- >
483
- <span class="pf-v6-c-nav__link-text">Policy</span>
484
- </a>
485
- </li>
486
- <li class="pf-v6-c-nav__item">
487
- <a href="#" class="pf-v6-c-nav__link">
488
- <span class="pf-v6-c-nav__link-text">Authentication</span>
489
- </a>
490
- </li>
491
- <li class="pf-v6-c-nav__item">
492
- <a href="#" class="pf-v6-c-nav__link">
493
- <span class="pf-v6-c-nav__link-text">Network services</span>
494
- </a>
495
- </li>
496
- <li class="pf-v6-c-nav__item">
497
- <a href="#" class="pf-v6-c-nav__link">
498
- <span class="pf-v6-c-nav__link-text">Server</span>
499
- </a>
500
- </li>
501
- </ul>
502
- </nav>
559
+ <div class="pf-v6-c-page__sidebar-main">
560
+ <div class="pf-v6-c-page__sidebar-body">
561
+ <nav
562
+ class="pf-v6-c-nav"
563
+ id="masthead-context-selecton-drilldown-example-primary-nav"
564
+ aria-label="Global"
565
+ >
566
+ <ul class="pf-v6-c-nav__list" role="list">
567
+ <li class="pf-v6-c-nav__item">
568
+ <a href="#" class="pf-v6-c-nav__link">
569
+ <span class="pf-v6-c-nav__link-text">System panel</span>
570
+ </a>
571
+ </li>
572
+ <li class="pf-v6-c-nav__item">
573
+ <a
574
+ href="#"
575
+ class="pf-v6-c-nav__link pf-m-current"
576
+ aria-current="page"
577
+ >
578
+ <span class="pf-v6-c-nav__link-text">Policy</span>
579
+ </a>
580
+ </li>
581
+ <li class="pf-v6-c-nav__item">
582
+ <a href="#" class="pf-v6-c-nav__link">
583
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
584
+ </a>
585
+ </li>
586
+ <li class="pf-v6-c-nav__item">
587
+ <a href="#" class="pf-v6-c-nav__link">
588
+ <span class="pf-v6-c-nav__link-text">Network services</span>
589
+ </a>
590
+ </li>
591
+ <li class="pf-v6-c-nav__item">
592
+ <a href="#" class="pf-v6-c-nav__link">
593
+ <span class="pf-v6-c-nav__link-text">Server</span>
594
+ </a>
595
+ </li>
596
+ </ul>
597
+ </nav>
598
+ </div>
503
599
  </div>
504
600
  </div>
505
601
  <div class="pf-v6-c-page__main-container" tabindex="-1">
@@ -517,21 +613,57 @@ wrapperTag: div
517
613
  </li>
518
614
  <li class="pf-v6-c-breadcrumb__item">
519
615
  <span class="pf-v6-c-breadcrumb__item-divider">
520
- <i class="fas fa-angle-right" aria-hidden="true"></i>
616
+ <svg
617
+ class="pf-v6-svg"
618
+ viewBox="0 0 20 20"
619
+ fill="currentColor"
620
+ aria-hidden="true"
621
+ role="img"
622
+ width="1em"
623
+ height="1em"
624
+ >
625
+ <path
626
+ d="M14.35 8.94 6.71 1.29l-.02-.02c-.4-.38-1.03-.37-1.41.02-.38.4-.37 1.03.02 1.41l7.29 7.29-7.29 7.29a1.003 1.003 0 0 0 1.42 1.42l7.65-7.65c.59-.59.59-1.54 0-2.12Z"
627
+ />
628
+ </svg>
521
629
  </span>
522
630
 
523
631
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
524
632
  </li>
525
633
  <li class="pf-v6-c-breadcrumb__item">
526
634
  <span class="pf-v6-c-breadcrumb__item-divider">
527
- <i class="fas fa-angle-right" aria-hidden="true"></i>
635
+ <svg
636
+ class="pf-v6-svg"
637
+ viewBox="0 0 20 20"
638
+ fill="currentColor"
639
+ aria-hidden="true"
640
+ role="img"
641
+ width="1em"
642
+ height="1em"
643
+ >
644
+ <path
645
+ d="M14.35 8.94 6.71 1.29l-.02-.02c-.4-.38-1.03-.37-1.41.02-.38.4-.37 1.03.02 1.41l7.29 7.29-7.29 7.29a1.003 1.003 0 0 0 1.42 1.42l7.65-7.65c.59-.59.59-1.54 0-2.12Z"
646
+ />
647
+ </svg>
528
648
  </span>
529
649
 
530
650
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
531
651
  </li>
532
652
  <li class="pf-v6-c-breadcrumb__item">
533
653
  <span class="pf-v6-c-breadcrumb__item-divider">
534
- <i class="fas fa-angle-right" aria-hidden="true"></i>
654
+ <svg
655
+ class="pf-v6-svg"
656
+ viewBox="0 0 20 20"
657
+ fill="currentColor"
658
+ aria-hidden="true"
659
+ role="img"
660
+ width="1em"
661
+ height="1em"
662
+ >
663
+ <path
664
+ d="M14.35 8.94 6.71 1.29l-.02-.02c-.4-.38-1.03-.37-1.41.02-.38.4-.37 1.03.02 1.41l7.29 7.29-7.29 7.29a1.003 1.003 0 0 0 1.42 1.42l7.65-7.65c.59-.59.59-1.54 0-2.12Z"
665
+ />
666
+ </svg>
535
667
  </span>
536
668
 
537
669
  <a
@@ -544,9 +676,15 @@ wrapperTag: div
544
676
  </nav>
545
677
  </div>
546
678
  </section>
547
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
679
+ <section
680
+ class="pf-v6-c-page__main-section pf-m-limit-width"
681
+ aria-labelledby="main-title"
682
+ >
548
683
  <div class="pf-v6-c-page__main-body">
549
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
684
+ <h1
685
+ class="pf-v6-c-content--h1 pf-m-page-title"
686
+ id="main-title"
687
+ >Main title</h1>
550
688
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
551
689
  </div>
552
690
  </section>
@@ -604,10 +742,8 @@ wrapperTag: div
604
742
  <span class="pf-v6-c-button__text">Skip to content</span>
605
743
  </a>
606
744
  </div>
607
- <header
608
- class="pf-v6-c-masthead"
609
- id="masthead-toolbar-filters-example-masthead"
610
- >
745
+
746
+ <header class="pf-v6-c-masthead" id="masthead-toolbar-filters-example-docked">
611
747
  <div class="pf-v6-c-masthead__main">
612
748
  <span class="pf-v6-c-masthead__toggle">
613
749
  <button
@@ -649,7 +785,7 @@ wrapperTag: div
649
785
  y1="2.25860997e-13%"
650
786
  x2="32%"
651
787
  y2="100%"
652
- id="linearGradient-masthead-toolbar-filters-example-masthead"
788
+ id="linearGradient-masthead-toolbar-filters-example-docked"
653
789
  >
654
790
  <stop stop-color="#2B9AF3" offset="0%" />
655
791
  <stop
@@ -703,11 +839,11 @@ wrapperTag: div
703
839
  />
704
840
  <path
705
841
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
706
- fill="url(#linearGradient-masthead-toolbar-filters-example-masthead)"
842
+ fill="url(#linearGradient-masthead-toolbar-filters-example-docked)"
707
843
  />
708
844
  <path
709
845
  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"
710
- fill="url(#linearGradient-masthead-toolbar-filters-example-masthead)"
846
+ fill="url(#linearGradient-masthead-toolbar-filters-example-docked)"
711
847
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
712
848
  />
713
849
  </g>
@@ -719,7 +855,7 @@ wrapperTag: div
719
855
  <div class="pf-v6-c-masthead__content">
720
856
  <div
721
857
  class="pf-v6-c-toolbar pf-m-static"
722
- id="masthead-toolbar-filters-example-masthead-toolbar"
858
+ id="masthead-toolbar-filters-example-docked-toolbar"
723
859
  >
724
860
  <div class="pf-v6-c-toolbar__content">
725
861
  <div class="pf-v6-c-toolbar__content-section">
@@ -732,10 +868,22 @@ wrapperTag: div
732
868
  type="button"
733
869
  aria-expanded="false"
734
870
  aria-label="Show filters"
735
- aria-controls="masthead-toolbar-filters-example-masthead-toolbar-expandable-content"
871
+ aria-controls="masthead-toolbar-filters-example-docked-toolbar-expandable-content"
736
872
  >
737
873
  <span class="pf-v6-c-menu-toggle__icon">
738
- <i class="fas fa-filter" aria-hidden="true"></i>
874
+ <svg
875
+ class="pf-v6-svg"
876
+ viewBox="0 0 32 32"
877
+ fill="currentColor"
878
+ aria-hidden="true"
879
+ role="img"
880
+ width="1em"
881
+ height="1em"
882
+ >
883
+ <path
884
+ d="M29.875 3.5V7a.876.876 0 0 1-.256.619l-9.744 9.744v10.638a.875.875 0 0 1-.599.83l-6 2a.876.876 0 0 1-.788-.12.874.874 0 0 1-.363-.71V17.363L2.381 7.619A.876.876 0 0 1 2.125 7V3.5c0-.758.617-1.375 1.375-1.375h25c.758 0 1.375.617 1.375 1.375Z"
885
+ />
886
+ </svg>
739
887
  </span>
740
888
  </button>
741
889
  </div>
@@ -750,15 +898,39 @@ wrapperTag: div
750
898
  class="pf-v6-c-menu-toggle"
751
899
  type="button"
752
900
  aria-expanded="false"
753
- id="masthead-toolbar-filters-example-masthead-toolbar-search-filter-menu"
901
+ id="masthead-toolbar-filters-example-docked-toolbar-search-filter-menu"
754
902
  >
755
903
  <span class="pf-v6-c-menu-toggle__icon">
756
- <i class="fas fa-filter" aria-hidden="true"></i>
904
+ <svg
905
+ class="pf-v6-svg"
906
+ viewBox="0 0 32 32"
907
+ fill="currentColor"
908
+ aria-hidden="true"
909
+ role="img"
910
+ width="1em"
911
+ height="1em"
912
+ >
913
+ <path
914
+ d="M29.875 3.5V7a.876.876 0 0 1-.256.619l-9.744 9.744v10.638a.875.875 0 0 1-.599.83l-6 2a.876.876 0 0 1-.788-.12.874.874 0 0 1-.363-.71V17.363L2.381 7.619A.876.876 0 0 1 2.125 7V3.5c0-.758.617-1.375 1.375-1.375h25c.758 0 1.375.617 1.375 1.375Z"
915
+ />
916
+ </svg>
757
917
  </span>
758
918
  <span class="pf-v6-c-menu-toggle__text">Name</span>
759
919
  <span class="pf-v6-c-menu-toggle__controls">
760
920
  <span class="pf-v6-c-menu-toggle__toggle-icon">
761
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
921
+ <svg
922
+ class="pf-v6-svg"
923
+ viewBox="0 0 20 20"
924
+ fill="currentColor"
925
+ aria-hidden="true"
926
+ role="img"
927
+ width="1em"
928
+ height="1em"
929
+ >
930
+ <path
931
+ d="M18.92 5.62C18.77 5.25 18.4 5 18 5H2a1.003 1.003 0 0 0-.71 1.71l7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65c.29-.29.37-.72.22-1.09Z"
932
+ />
933
+ </svg>
762
934
  </span>
763
935
  </span>
764
936
  </button>
@@ -793,7 +965,19 @@ wrapperTag: div
793
965
  aria-label="Actions"
794
966
  >
795
967
  <span class="pf-v6-c-menu-toggle__icon">
796
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
968
+ <svg
969
+ class="pf-v6-svg"
970
+ viewBox="0 0 32 32"
971
+ fill="currentColor"
972
+ aria-hidden="true"
973
+ role="img"
974
+ width="1em"
975
+ height="1em"
976
+ >
977
+ <path
978
+ d="M12.25 5c0-2.068 1.683-3.75 3.75-3.75S19.75 2.932 19.75 5 18.067 8.75 16 8.75 12.25 7.068 12.25 5ZM16 12.25c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Zm0 11c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Z"
979
+ />
980
+ </svg>
797
981
  </span>
798
982
  </button>
799
983
  </div>
@@ -801,7 +985,7 @@ wrapperTag: div
801
985
 
802
986
  <div
803
987
  class="pf-v6-c-toolbar__expandable-content pf-m-hidden"
804
- id="masthead-toolbar-filters-example-masthead-toolbar-expandable-content"
988
+ id="masthead-toolbar-filters-example-docked-toolbar-expandable-content"
805
989
  hidden
806
990
  ></div>
807
991
  </div>
@@ -809,44 +993,46 @@ wrapperTag: div
809
993
  </div>
810
994
  </header>
811
995
  <div class="pf-v6-c-page__sidebar">
812
- <div class="pf-v6-c-page__sidebar-body">
813
- <nav
814
- class="pf-v6-c-nav"
815
- id="masthead-toolbar-filters-example-primary-nav"
816
- aria-label="Global"
817
- >
818
- <ul class="pf-v6-c-nav__list" role="list">
819
- <li class="pf-v6-c-nav__item">
820
- <a href="#" class="pf-v6-c-nav__link">
821
- <span class="pf-v6-c-nav__link-text">System panel</span>
822
- </a>
823
- </li>
824
- <li class="pf-v6-c-nav__item">
825
- <a
826
- href="#"
827
- class="pf-v6-c-nav__link pf-m-current"
828
- aria-current="page"
829
- >
830
- <span class="pf-v6-c-nav__link-text">Policy</span>
831
- </a>
832
- </li>
833
- <li class="pf-v6-c-nav__item">
834
- <a href="#" class="pf-v6-c-nav__link">
835
- <span class="pf-v6-c-nav__link-text">Authentication</span>
836
- </a>
837
- </li>
838
- <li class="pf-v6-c-nav__item">
839
- <a href="#" class="pf-v6-c-nav__link">
840
- <span class="pf-v6-c-nav__link-text">Network services</span>
841
- </a>
842
- </li>
843
- <li class="pf-v6-c-nav__item">
844
- <a href="#" class="pf-v6-c-nav__link">
845
- <span class="pf-v6-c-nav__link-text">Server</span>
846
- </a>
847
- </li>
848
- </ul>
849
- </nav>
996
+ <div class="pf-v6-c-page__sidebar-main">
997
+ <div class="pf-v6-c-page__sidebar-body">
998
+ <nav
999
+ class="pf-v6-c-nav"
1000
+ id="masthead-toolbar-filters-example-primary-nav"
1001
+ aria-label="Global"
1002
+ >
1003
+ <ul class="pf-v6-c-nav__list" role="list">
1004
+ <li class="pf-v6-c-nav__item">
1005
+ <a href="#" class="pf-v6-c-nav__link">
1006
+ <span class="pf-v6-c-nav__link-text">System panel</span>
1007
+ </a>
1008
+ </li>
1009
+ <li class="pf-v6-c-nav__item">
1010
+ <a
1011
+ href="#"
1012
+ class="pf-v6-c-nav__link pf-m-current"
1013
+ aria-current="page"
1014
+ >
1015
+ <span class="pf-v6-c-nav__link-text">Policy</span>
1016
+ </a>
1017
+ </li>
1018
+ <li class="pf-v6-c-nav__item">
1019
+ <a href="#" class="pf-v6-c-nav__link">
1020
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
1021
+ </a>
1022
+ </li>
1023
+ <li class="pf-v6-c-nav__item">
1024
+ <a href="#" class="pf-v6-c-nav__link">
1025
+ <span class="pf-v6-c-nav__link-text">Network services</span>
1026
+ </a>
1027
+ </li>
1028
+ <li class="pf-v6-c-nav__item">
1029
+ <a href="#" class="pf-v6-c-nav__link">
1030
+ <span class="pf-v6-c-nav__link-text">Server</span>
1031
+ </a>
1032
+ </li>
1033
+ </ul>
1034
+ </nav>
1035
+ </div>
850
1036
  </div>
851
1037
  </div>
852
1038
  <div class="pf-v6-c-page__main-container" tabindex="-1">
@@ -864,21 +1050,57 @@ wrapperTag: div
864
1050
  </li>
865
1051
  <li class="pf-v6-c-breadcrumb__item">
866
1052
  <span class="pf-v6-c-breadcrumb__item-divider">
867
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1053
+ <svg
1054
+ class="pf-v6-svg"
1055
+ viewBox="0 0 20 20"
1056
+ fill="currentColor"
1057
+ aria-hidden="true"
1058
+ role="img"
1059
+ width="1em"
1060
+ height="1em"
1061
+ >
1062
+ <path
1063
+ d="M14.35 8.94 6.71 1.29l-.02-.02c-.4-.38-1.03-.37-1.41.02-.38.4-.37 1.03.02 1.41l7.29 7.29-7.29 7.29a1.003 1.003 0 0 0 1.42 1.42l7.65-7.65c.59-.59.59-1.54 0-2.12Z"
1064
+ />
1065
+ </svg>
868
1066
  </span>
869
1067
 
870
1068
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
871
1069
  </li>
872
1070
  <li class="pf-v6-c-breadcrumb__item">
873
1071
  <span class="pf-v6-c-breadcrumb__item-divider">
874
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1072
+ <svg
1073
+ class="pf-v6-svg"
1074
+ viewBox="0 0 20 20"
1075
+ fill="currentColor"
1076
+ aria-hidden="true"
1077
+ role="img"
1078
+ width="1em"
1079
+ height="1em"
1080
+ >
1081
+ <path
1082
+ d="M14.35 8.94 6.71 1.29l-.02-.02c-.4-.38-1.03-.37-1.41.02-.38.4-.37 1.03.02 1.41l7.29 7.29-7.29 7.29a1.003 1.003 0 0 0 1.42 1.42l7.65-7.65c.59-.59.59-1.54 0-2.12Z"
1083
+ />
1084
+ </svg>
875
1085
  </span>
876
1086
 
877
1087
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
878
1088
  </li>
879
1089
  <li class="pf-v6-c-breadcrumb__item">
880
1090
  <span class="pf-v6-c-breadcrumb__item-divider">
881
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1091
+ <svg
1092
+ class="pf-v6-svg"
1093
+ viewBox="0 0 20 20"
1094
+ fill="currentColor"
1095
+ aria-hidden="true"
1096
+ role="img"
1097
+ width="1em"
1098
+ height="1em"
1099
+ >
1100
+ <path
1101
+ d="M14.35 8.94 6.71 1.29l-.02-.02c-.4-.38-1.03-.37-1.41.02-.38.4-.37 1.03.02 1.41l7.29 7.29-7.29 7.29a1.003 1.003 0 0 0 1.42 1.42l7.65-7.65c.59-.59.59-1.54 0-2.12Z"
1102
+ />
1103
+ </svg>
882
1104
  </span>
883
1105
 
884
1106
  <a
@@ -891,9 +1113,15 @@ wrapperTag: div
891
1113
  </nav>
892
1114
  </div>
893
1115
  </section>
894
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
1116
+ <section
1117
+ class="pf-v6-c-page__main-section pf-m-limit-width"
1118
+ aria-labelledby="main-title"
1119
+ >
895
1120
  <div class="pf-v6-c-page__main-body">
896
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
1121
+ <h1
1122
+ class="pf-v6-c-content--h1 pf-m-page-title"
1123
+ id="main-title"
1124
+ >Main title</h1>
897
1125
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
898
1126
  </div>
899
1127
  </section>
@@ -951,9 +1179,10 @@ wrapperTag: div
951
1179
  <span class="pf-v6-c-button__text">Skip to content</span>
952
1180
  </a>
953
1181
  </div>
1182
+
954
1183
  <header
955
1184
  class="pf-v6-c-masthead"
956
- id="masthead-toggle-group-filters-example-masthead"
1185
+ id="masthead-toggle-group-filters-example-docked"
957
1186
  >
958
1187
  <div class="pf-v6-c-masthead__main">
959
1188
  <span class="pf-v6-c-masthead__toggle">
@@ -996,7 +1225,7 @@ wrapperTag: div
996
1225
  y1="2.25860997e-13%"
997
1226
  x2="32%"
998
1227
  y2="100%"
999
- id="linearGradient-masthead-toggle-group-filters-example-masthead"
1228
+ id="linearGradient-masthead-toggle-group-filters-example-docked"
1000
1229
  >
1001
1230
  <stop stop-color="#2B9AF3" offset="0%" />
1002
1231
  <stop
@@ -1050,11 +1279,11 @@ wrapperTag: div
1050
1279
  />
1051
1280
  <path
1052
1281
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
1053
- fill="url(#linearGradient-masthead-toggle-group-filters-example-masthead)"
1282
+ fill="url(#linearGradient-masthead-toggle-group-filters-example-docked)"
1054
1283
  />
1055
1284
  <path
1056
1285
  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"
1057
- fill="url(#linearGradient-masthead-toggle-group-filters-example-masthead)"
1286
+ fill="url(#linearGradient-masthead-toggle-group-filters-example-docked)"
1058
1287
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
1059
1288
  />
1060
1289
  </g>
@@ -1066,7 +1295,7 @@ wrapperTag: div
1066
1295
  <div class="pf-v6-c-masthead__content">
1067
1296
  <div
1068
1297
  class="pf-v6-c-toolbar pf-m-static"
1069
- id="masthead-toggle-group-filters-example-masthead-toolbar"
1298
+ id="masthead-toggle-group-filters-example-docked-toolbar"
1070
1299
  >
1071
1300
  <div class="pf-v6-c-toolbar__content">
1072
1301
  <div class="pf-v6-c-toolbar__content-section">
@@ -1079,10 +1308,22 @@ wrapperTag: div
1079
1308
  type="button"
1080
1309
  aria-expanded="false"
1081
1310
  aria-label="Show filters"
1082
- aria-controls="masthead-toggle-group-filters-example-masthead-toolbar-expandable-content"
1311
+ aria-controls="masthead-toggle-group-filters-example-docked-toolbar-expandable-content"
1083
1312
  >
1084
1313
  <span class="pf-v6-c-menu-toggle__icon">
1085
- <i class="fas fa-filter" aria-hidden="true"></i>
1314
+ <svg
1315
+ class="pf-v6-svg"
1316
+ viewBox="0 0 32 32"
1317
+ fill="currentColor"
1318
+ aria-hidden="true"
1319
+ role="img"
1320
+ width="1em"
1321
+ height="1em"
1322
+ >
1323
+ <path
1324
+ d="M29.875 3.5V7a.876.876 0 0 1-.256.619l-9.744 9.744v10.638a.875.875 0 0 1-.599.83l-6 2a.876.876 0 0 1-.788-.12.874.874 0 0 1-.363-.71V17.363L2.381 7.619A.876.876 0 0 1 2.125 7V3.5c0-.758.617-1.375 1.375-1.375h25c.758 0 1.375.617 1.375 1.375Z"
1325
+ />
1326
+ </svg>
1086
1327
  </span>
1087
1328
  </button>
1088
1329
  </div>
@@ -1097,15 +1338,39 @@ wrapperTag: div
1097
1338
  class="pf-v6-c-menu-toggle"
1098
1339
  type="button"
1099
1340
  aria-expanded="false"
1100
- id="masthead-toggle-group-filters-example-masthead-toolbar-search-filter-menu"
1341
+ id="masthead-toggle-group-filters-example-docked-toolbar-search-filter-menu"
1101
1342
  >
1102
1343
  <span class="pf-v6-c-menu-toggle__icon">
1103
- <i class="fas fa-filter" aria-hidden="true"></i>
1344
+ <svg
1345
+ class="pf-v6-svg"
1346
+ viewBox="0 0 32 32"
1347
+ fill="currentColor"
1348
+ aria-hidden="true"
1349
+ role="img"
1350
+ width="1em"
1351
+ height="1em"
1352
+ >
1353
+ <path
1354
+ d="M29.875 3.5V7a.876.876 0 0 1-.256.619l-9.744 9.744v10.638a.875.875 0 0 1-.599.83l-6 2a.876.876 0 0 1-.788-.12.874.874 0 0 1-.363-.71V17.363L2.381 7.619A.876.876 0 0 1 2.125 7V3.5c0-.758.617-1.375 1.375-1.375h25c.758 0 1.375.617 1.375 1.375Z"
1355
+ />
1356
+ </svg>
1104
1357
  </span>
1105
1358
  <span class="pf-v6-c-menu-toggle__text">Name</span>
1106
1359
  <span class="pf-v6-c-menu-toggle__controls">
1107
1360
  <span class="pf-v6-c-menu-toggle__toggle-icon">
1108
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
1361
+ <svg
1362
+ class="pf-v6-svg"
1363
+ viewBox="0 0 20 20"
1364
+ fill="currentColor"
1365
+ aria-hidden="true"
1366
+ role="img"
1367
+ width="1em"
1368
+ height="1em"
1369
+ >
1370
+ <path
1371
+ d="M18.92 5.62C18.77 5.25 18.4 5 18 5H2a1.003 1.003 0 0 0-.71 1.71l7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65c.29-.29.37-.72.22-1.09Z"
1372
+ />
1373
+ </svg>
1109
1374
  </span>
1110
1375
  </span>
1111
1376
  </button>
@@ -1140,7 +1405,19 @@ wrapperTag: div
1140
1405
  aria-label="Actions"
1141
1406
  >
1142
1407
  <span class="pf-v6-c-menu-toggle__icon">
1143
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1408
+ <svg
1409
+ class="pf-v6-svg"
1410
+ viewBox="0 0 32 32"
1411
+ fill="currentColor"
1412
+ aria-hidden="true"
1413
+ role="img"
1414
+ width="1em"
1415
+ height="1em"
1416
+ >
1417
+ <path
1418
+ d="M12.25 5c0-2.068 1.683-3.75 3.75-3.75S19.75 2.932 19.75 5 18.067 8.75 16 8.75 12.25 7.068 12.25 5ZM16 12.25c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Zm0 11c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Z"
1419
+ />
1420
+ </svg>
1144
1421
  </span>
1145
1422
  </button>
1146
1423
  </div>
@@ -1148,7 +1425,7 @@ wrapperTag: div
1148
1425
 
1149
1426
  <div
1150
1427
  class="pf-v6-c-toolbar__expandable-content pf-m-hidden"
1151
- id="masthead-toggle-group-filters-example-masthead-toolbar-expandable-content"
1428
+ id="masthead-toggle-group-filters-example-docked-toolbar-expandable-content"
1152
1429
  hidden
1153
1430
  ></div>
1154
1431
  </div>
@@ -1156,44 +1433,46 @@ wrapperTag: div
1156
1433
  </div>
1157
1434
  </header>
1158
1435
  <div class="pf-v6-c-page__sidebar">
1159
- <div class="pf-v6-c-page__sidebar-body">
1160
- <nav
1161
- class="pf-v6-c-nav"
1162
- id="masthead-toggle-group-filters-example-primary-nav"
1163
- aria-label="Global"
1164
- >
1165
- <ul class="pf-v6-c-nav__list" role="list">
1166
- <li class="pf-v6-c-nav__item">
1167
- <a href="#" class="pf-v6-c-nav__link">
1168
- <span class="pf-v6-c-nav__link-text">System panel</span>
1169
- </a>
1170
- </li>
1171
- <li class="pf-v6-c-nav__item">
1172
- <a
1173
- href="#"
1174
- class="pf-v6-c-nav__link pf-m-current"
1175
- aria-current="page"
1176
- >
1177
- <span class="pf-v6-c-nav__link-text">Policy</span>
1178
- </a>
1179
- </li>
1180
- <li class="pf-v6-c-nav__item">
1181
- <a href="#" class="pf-v6-c-nav__link">
1182
- <span class="pf-v6-c-nav__link-text">Authentication</span>
1183
- </a>
1184
- </li>
1185
- <li class="pf-v6-c-nav__item">
1186
- <a href="#" class="pf-v6-c-nav__link">
1187
- <span class="pf-v6-c-nav__link-text">Network services</span>
1188
- </a>
1189
- </li>
1190
- <li class="pf-v6-c-nav__item">
1191
- <a href="#" class="pf-v6-c-nav__link">
1192
- <span class="pf-v6-c-nav__link-text">Server</span>
1193
- </a>
1194
- </li>
1195
- </ul>
1196
- </nav>
1436
+ <div class="pf-v6-c-page__sidebar-main">
1437
+ <div class="pf-v6-c-page__sidebar-body">
1438
+ <nav
1439
+ class="pf-v6-c-nav"
1440
+ id="masthead-toggle-group-filters-example-primary-nav"
1441
+ aria-label="Global"
1442
+ >
1443
+ <ul class="pf-v6-c-nav__list" role="list">
1444
+ <li class="pf-v6-c-nav__item">
1445
+ <a href="#" class="pf-v6-c-nav__link">
1446
+ <span class="pf-v6-c-nav__link-text">System panel</span>
1447
+ </a>
1448
+ </li>
1449
+ <li class="pf-v6-c-nav__item">
1450
+ <a
1451
+ href="#"
1452
+ class="pf-v6-c-nav__link pf-m-current"
1453
+ aria-current="page"
1454
+ >
1455
+ <span class="pf-v6-c-nav__link-text">Policy</span>
1456
+ </a>
1457
+ </li>
1458
+ <li class="pf-v6-c-nav__item">
1459
+ <a href="#" class="pf-v6-c-nav__link">
1460
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
1461
+ </a>
1462
+ </li>
1463
+ <li class="pf-v6-c-nav__item">
1464
+ <a href="#" class="pf-v6-c-nav__link">
1465
+ <span class="pf-v6-c-nav__link-text">Network services</span>
1466
+ </a>
1467
+ </li>
1468
+ <li class="pf-v6-c-nav__item">
1469
+ <a href="#" class="pf-v6-c-nav__link">
1470
+ <span class="pf-v6-c-nav__link-text">Server</span>
1471
+ </a>
1472
+ </li>
1473
+ </ul>
1474
+ </nav>
1475
+ </div>
1197
1476
  </div>
1198
1477
  </div>
1199
1478
  <div class="pf-v6-c-page__main-container" tabindex="-1">
@@ -1211,21 +1490,57 @@ wrapperTag: div
1211
1490
  </li>
1212
1491
  <li class="pf-v6-c-breadcrumb__item">
1213
1492
  <span class="pf-v6-c-breadcrumb__item-divider">
1214
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1493
+ <svg
1494
+ class="pf-v6-svg"
1495
+ viewBox="0 0 20 20"
1496
+ fill="currentColor"
1497
+ aria-hidden="true"
1498
+ role="img"
1499
+ width="1em"
1500
+ height="1em"
1501
+ >
1502
+ <path
1503
+ d="M14.35 8.94 6.71 1.29l-.02-.02c-.4-.38-1.03-.37-1.41.02-.38.4-.37 1.03.02 1.41l7.29 7.29-7.29 7.29a1.003 1.003 0 0 0 1.42 1.42l7.65-7.65c.59-.59.59-1.54 0-2.12Z"
1504
+ />
1505
+ </svg>
1215
1506
  </span>
1216
1507
 
1217
1508
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1218
1509
  </li>
1219
1510
  <li class="pf-v6-c-breadcrumb__item">
1220
1511
  <span class="pf-v6-c-breadcrumb__item-divider">
1221
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1512
+ <svg
1513
+ class="pf-v6-svg"
1514
+ viewBox="0 0 20 20"
1515
+ fill="currentColor"
1516
+ aria-hidden="true"
1517
+ role="img"
1518
+ width="1em"
1519
+ height="1em"
1520
+ >
1521
+ <path
1522
+ d="M14.35 8.94 6.71 1.29l-.02-.02c-.4-.38-1.03-.37-1.41.02-.38.4-.37 1.03.02 1.41l7.29 7.29-7.29 7.29a1.003 1.003 0 0 0 1.42 1.42l7.65-7.65c.59-.59.59-1.54 0-2.12Z"
1523
+ />
1524
+ </svg>
1222
1525
  </span>
1223
1526
 
1224
1527
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1225
1528
  </li>
1226
1529
  <li class="pf-v6-c-breadcrumb__item">
1227
1530
  <span class="pf-v6-c-breadcrumb__item-divider">
1228
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1531
+ <svg
1532
+ class="pf-v6-svg"
1533
+ viewBox="0 0 20 20"
1534
+ fill="currentColor"
1535
+ aria-hidden="true"
1536
+ role="img"
1537
+ width="1em"
1538
+ height="1em"
1539
+ >
1540
+ <path
1541
+ d="M14.35 8.94 6.71 1.29l-.02-.02c-.4-.38-1.03-.37-1.41.02-.38.4-.37 1.03.02 1.41l7.29 7.29-7.29 7.29a1.003 1.003 0 0 0 1.42 1.42l7.65-7.65c.59-.59.59-1.54 0-2.12Z"
1542
+ />
1543
+ </svg>
1229
1544
  </span>
1230
1545
 
1231
1546
  <a
@@ -1238,9 +1553,15 @@ wrapperTag: div
1238
1553
  </nav>
1239
1554
  </div>
1240
1555
  </section>
1241
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
1556
+ <section
1557
+ class="pf-v6-c-page__main-section pf-m-limit-width"
1558
+ aria-labelledby="main-title"
1559
+ >
1242
1560
  <div class="pf-v6-c-page__main-body">
1243
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
1561
+ <h1
1562
+ class="pf-v6-c-content--h1 pf-m-page-title"
1563
+ id="main-title"
1564
+ >Main title</h1>
1244
1565
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
1245
1566
  </div>
1246
1567
  </section>
@@ -1298,9 +1619,10 @@ wrapperTag: div
1298
1619
  <span class="pf-v6-c-button__text">Skip to content</span>
1299
1620
  </a>
1300
1621
  </div>
1622
+
1301
1623
  <header
1302
1624
  class="pf-v6-c-masthead"
1303
- id="masthead-expandable-search-example-masthead"
1625
+ id="masthead-expandable-search-example-docked"
1304
1626
  >
1305
1627
  <div class="pf-v6-c-masthead__main">
1306
1628
  <span class="pf-v6-c-masthead__toggle">
@@ -1343,7 +1665,7 @@ wrapperTag: div
1343
1665
  y1="2.25860997e-13%"
1344
1666
  x2="32%"
1345
1667
  y2="100%"
1346
- id="linearGradient-masthead-expandable-search-example-masthead"
1668
+ id="linearGradient-masthead-expandable-search-example-docked"
1347
1669
  >
1348
1670
  <stop stop-color="#2B9AF3" offset="0%" />
1349
1671
  <stop
@@ -1397,11 +1719,11 @@ wrapperTag: div
1397
1719
  />
1398
1720
  <path
1399
1721
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
1400
- fill="url(#linearGradient-masthead-expandable-search-example-masthead)"
1722
+ fill="url(#linearGradient-masthead-expandable-search-example-docked)"
1401
1723
  />
1402
1724
  <path
1403
1725
  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"
1404
- fill="url(#linearGradient-masthead-expandable-search-example-masthead)"
1726
+ fill="url(#linearGradient-masthead-expandable-search-example-docked)"
1405
1727
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
1406
1728
  />
1407
1729
  </g>
@@ -1413,7 +1735,7 @@ wrapperTag: div
1413
1735
  <div class="pf-v6-c-masthead__content">
1414
1736
  <div
1415
1737
  class="pf-v6-c-toolbar pf-m-static"
1416
- id="masthead-expandable-search-example-masthead-toolbar"
1738
+ id="masthead-expandable-search-example-docked-toolbar"
1417
1739
  >
1418
1740
  <div class="pf-v6-c-toolbar__content">
1419
1741
  <div class="pf-v6-c-toolbar__content-section">
@@ -1427,7 +1749,19 @@ wrapperTag: div
1427
1749
  aria-label="Open search"
1428
1750
  >
1429
1751
  <span class="pf-v6-c-button__icon">
1430
- <i class="fas fa-search fa-fw" aria-hidden="true"></i>
1752
+ <svg
1753
+ class="pf-v6-svg"
1754
+ viewBox="0 0 512 512"
1755
+ fill="currentColor"
1756
+ aria-hidden="true"
1757
+ role="img"
1758
+ width="1em"
1759
+ height="1em"
1760
+ >
1761
+ <path
1762
+ d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"
1763
+ />
1764
+ </svg>
1431
1765
  </span>
1432
1766
  </button>
1433
1767
  </div>
@@ -1440,44 +1774,46 @@ wrapperTag: div
1440
1774
  </div>
1441
1775
  </header>
1442
1776
  <div class="pf-v6-c-page__sidebar">
1443
- <div class="pf-v6-c-page__sidebar-body">
1444
- <nav
1445
- class="pf-v6-c-nav"
1446
- id="masthead-expandable-search-example-primary-nav"
1447
- aria-label="Global"
1448
- >
1449
- <ul class="pf-v6-c-nav__list" role="list">
1450
- <li class="pf-v6-c-nav__item">
1451
- <a href="#" class="pf-v6-c-nav__link">
1452
- <span class="pf-v6-c-nav__link-text">System panel</span>
1453
- </a>
1454
- </li>
1455
- <li class="pf-v6-c-nav__item">
1456
- <a
1457
- href="#"
1458
- class="pf-v6-c-nav__link pf-m-current"
1459
- aria-current="page"
1460
- >
1461
- <span class="pf-v6-c-nav__link-text">Policy</span>
1462
- </a>
1463
- </li>
1464
- <li class="pf-v6-c-nav__item">
1465
- <a href="#" class="pf-v6-c-nav__link">
1466
- <span class="pf-v6-c-nav__link-text">Authentication</span>
1467
- </a>
1468
- </li>
1469
- <li class="pf-v6-c-nav__item">
1470
- <a href="#" class="pf-v6-c-nav__link">
1471
- <span class="pf-v6-c-nav__link-text">Network services</span>
1472
- </a>
1473
- </li>
1474
- <li class="pf-v6-c-nav__item">
1475
- <a href="#" class="pf-v6-c-nav__link">
1476
- <span class="pf-v6-c-nav__link-text">Server</span>
1477
- </a>
1478
- </li>
1479
- </ul>
1480
- </nav>
1777
+ <div class="pf-v6-c-page__sidebar-main">
1778
+ <div class="pf-v6-c-page__sidebar-body">
1779
+ <nav
1780
+ class="pf-v6-c-nav"
1781
+ id="masthead-expandable-search-example-primary-nav"
1782
+ aria-label="Global"
1783
+ >
1784
+ <ul class="pf-v6-c-nav__list" role="list">
1785
+ <li class="pf-v6-c-nav__item">
1786
+ <a href="#" class="pf-v6-c-nav__link">
1787
+ <span class="pf-v6-c-nav__link-text">System panel</span>
1788
+ </a>
1789
+ </li>
1790
+ <li class="pf-v6-c-nav__item">
1791
+ <a
1792
+ href="#"
1793
+ class="pf-v6-c-nav__link pf-m-current"
1794
+ aria-current="page"
1795
+ >
1796
+ <span class="pf-v6-c-nav__link-text">Policy</span>
1797
+ </a>
1798
+ </li>
1799
+ <li class="pf-v6-c-nav__item">
1800
+ <a href="#" class="pf-v6-c-nav__link">
1801
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
1802
+ </a>
1803
+ </li>
1804
+ <li class="pf-v6-c-nav__item">
1805
+ <a href="#" class="pf-v6-c-nav__link">
1806
+ <span class="pf-v6-c-nav__link-text">Network services</span>
1807
+ </a>
1808
+ </li>
1809
+ <li class="pf-v6-c-nav__item">
1810
+ <a href="#" class="pf-v6-c-nav__link">
1811
+ <span class="pf-v6-c-nav__link-text">Server</span>
1812
+ </a>
1813
+ </li>
1814
+ </ul>
1815
+ </nav>
1816
+ </div>
1481
1817
  </div>
1482
1818
  </div>
1483
1819
  <div class="pf-v6-c-page__main-container" tabindex="-1">
@@ -1495,21 +1831,57 @@ wrapperTag: div
1495
1831
  </li>
1496
1832
  <li class="pf-v6-c-breadcrumb__item">
1497
1833
  <span class="pf-v6-c-breadcrumb__item-divider">
1498
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1834
+ <svg
1835
+ class="pf-v6-svg"
1836
+ viewBox="0 0 20 20"
1837
+ fill="currentColor"
1838
+ aria-hidden="true"
1839
+ role="img"
1840
+ width="1em"
1841
+ height="1em"
1842
+ >
1843
+ <path
1844
+ d="M14.35 8.94 6.71 1.29l-.02-.02c-.4-.38-1.03-.37-1.41.02-.38.4-.37 1.03.02 1.41l7.29 7.29-7.29 7.29a1.003 1.003 0 0 0 1.42 1.42l7.65-7.65c.59-.59.59-1.54 0-2.12Z"
1845
+ />
1846
+ </svg>
1499
1847
  </span>
1500
1848
 
1501
1849
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1502
1850
  </li>
1503
1851
  <li class="pf-v6-c-breadcrumb__item">
1504
1852
  <span class="pf-v6-c-breadcrumb__item-divider">
1505
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1853
+ <svg
1854
+ class="pf-v6-svg"
1855
+ viewBox="0 0 20 20"
1856
+ fill="currentColor"
1857
+ aria-hidden="true"
1858
+ role="img"
1859
+ width="1em"
1860
+ height="1em"
1861
+ >
1862
+ <path
1863
+ d="M14.35 8.94 6.71 1.29l-.02-.02c-.4-.38-1.03-.37-1.41.02-.38.4-.37 1.03.02 1.41l7.29 7.29-7.29 7.29a1.003 1.003 0 0 0 1.42 1.42l7.65-7.65c.59-.59.59-1.54 0-2.12Z"
1864
+ />
1865
+ </svg>
1506
1866
  </span>
1507
1867
 
1508
1868
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1509
1869
  </li>
1510
1870
  <li class="pf-v6-c-breadcrumb__item">
1511
1871
  <span class="pf-v6-c-breadcrumb__item-divider">
1512
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1872
+ <svg
1873
+ class="pf-v6-svg"
1874
+ viewBox="0 0 20 20"
1875
+ fill="currentColor"
1876
+ aria-hidden="true"
1877
+ role="img"
1878
+ width="1em"
1879
+ height="1em"
1880
+ >
1881
+ <path
1882
+ d="M14.35 8.94 6.71 1.29l-.02-.02c-.4-.38-1.03-.37-1.41.02-.38.4-.37 1.03.02 1.41l7.29 7.29-7.29 7.29a1.003 1.003 0 0 0 1.42 1.42l7.65-7.65c.59-.59.59-1.54 0-2.12Z"
1883
+ />
1884
+ </svg>
1513
1885
  </span>
1514
1886
 
1515
1887
  <a
@@ -1522,9 +1894,15 @@ wrapperTag: div
1522
1894
  </nav>
1523
1895
  </div>
1524
1896
  </section>
1525
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
1897
+ <section
1898
+ class="pf-v6-c-page__main-section pf-m-limit-width"
1899
+ aria-labelledby="main-title"
1900
+ >
1526
1901
  <div class="pf-v6-c-page__main-body">
1527
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
1902
+ <h1
1903
+ class="pf-v6-c-content--h1 pf-m-page-title"
1904
+ id="main-title"
1905
+ >Main title</h1>
1528
1906
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
1529
1907
  </div>
1530
1908
  </section>
@@ -1582,9 +1960,10 @@ wrapperTag: div
1582
1960
  <span class="pf-v6-c-button__text">Skip to content</span>
1583
1961
  </a>
1584
1962
  </div>
1963
+
1585
1964
  <header
1586
1965
  class="pf-v6-c-masthead"
1587
- id="masthead-expandable-search-expanded-example-masthead"
1966
+ id="masthead-expandable-search-expanded-example-docked"
1588
1967
  >
1589
1968
  <div class="pf-v6-c-masthead__main">
1590
1969
  <span class="pf-v6-c-masthead__toggle">
@@ -1627,7 +2006,7 @@ wrapperTag: div
1627
2006
  y1="2.25860997e-13%"
1628
2007
  x2="32%"
1629
2008
  y2="100%"
1630
- id="linearGradient-masthead-expandable-search-expanded-example-masthead"
2009
+ id="linearGradient-masthead-expandable-search-expanded-example-docked"
1631
2010
  >
1632
2011
  <stop stop-color="#2B9AF3" offset="0%" />
1633
2012
  <stop
@@ -1681,11 +2060,11 @@ wrapperTag: div
1681
2060
  />
1682
2061
  <path
1683
2062
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
1684
- fill="url(#linearGradient-masthead-expandable-search-expanded-example-masthead)"
2063
+ fill="url(#linearGradient-masthead-expandable-search-expanded-example-docked)"
1685
2064
  />
1686
2065
  <path
1687
2066
  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"
1688
- fill="url(#linearGradient-masthead-expandable-search-expanded-example-masthead)"
2067
+ fill="url(#linearGradient-masthead-expandable-search-expanded-example-docked)"
1689
2068
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
1690
2069
  />
1691
2070
  </g>
@@ -1697,7 +2076,7 @@ wrapperTag: div
1697
2076
  <div class="pf-v6-c-masthead__content">
1698
2077
  <div
1699
2078
  class="pf-v6-c-toolbar pf-m-static"
1700
- id="masthead-expandable-search-expanded-example-masthead-toolbar"
2079
+ id="masthead-expandable-search-expanded-example-docked-toolbar"
1701
2080
  >
1702
2081
  <div class="pf-v6-c-toolbar__content">
1703
2082
  <div class="pf-v6-c-toolbar__content-section">
@@ -1729,7 +2108,19 @@ wrapperTag: div
1729
2108
  aria-label="Close"
1730
2109
  >
1731
2110
  <span class="pf-v6-c-button__icon">
1732
- <i class="fas fa-times" aria-hidden="true"></i>
2111
+ <svg
2112
+ class="pf-v6-svg"
2113
+ viewBox="0 0 20 20"
2114
+ fill="currentColor"
2115
+ aria-hidden="true"
2116
+ role="img"
2117
+ width="1em"
2118
+ height="1em"
2119
+ >
2120
+ <path
2121
+ d="M17.8 16.2 11.59 10l6.21-6.21c.42-.46.39-1.17-.07-1.59-.43-.4-1.09-.4-1.52 0l-6.2 6.2-6.22-6.19c-.44-.44-1.15-.44-1.59 0-.44.44-.44 1.15 0 1.59l6.2 6.21-6.2 6.2c-.42.46-.39 1.17.07 1.59.43.4 1.09.4 1.52 0L10 11.59l6.2 6.2c.44.44 1.15.44 1.59 0 .44-.45.44-1.16 0-1.6Z"
2122
+ />
2123
+ </svg>
1733
2124
  </span>
1734
2125
  </button>
1735
2126
  </div>
@@ -1742,44 +2133,46 @@ wrapperTag: div
1742
2133
  </div>
1743
2134
  </header>
1744
2135
  <div class="pf-v6-c-page__sidebar">
1745
- <div class="pf-v6-c-page__sidebar-body">
1746
- <nav
1747
- class="pf-v6-c-nav"
1748
- id="masthead-expandable-search-expanded-example-primary-nav"
1749
- aria-label="Global"
1750
- >
1751
- <ul class="pf-v6-c-nav__list" role="list">
1752
- <li class="pf-v6-c-nav__item">
1753
- <a href="#" class="pf-v6-c-nav__link">
1754
- <span class="pf-v6-c-nav__link-text">System panel</span>
1755
- </a>
1756
- </li>
1757
- <li class="pf-v6-c-nav__item">
1758
- <a
1759
- href="#"
1760
- class="pf-v6-c-nav__link pf-m-current"
1761
- aria-current="page"
1762
- >
1763
- <span class="pf-v6-c-nav__link-text">Policy</span>
1764
- </a>
1765
- </li>
1766
- <li class="pf-v6-c-nav__item">
1767
- <a href="#" class="pf-v6-c-nav__link">
1768
- <span class="pf-v6-c-nav__link-text">Authentication</span>
1769
- </a>
1770
- </li>
1771
- <li class="pf-v6-c-nav__item">
1772
- <a href="#" class="pf-v6-c-nav__link">
1773
- <span class="pf-v6-c-nav__link-text">Network services</span>
1774
- </a>
1775
- </li>
1776
- <li class="pf-v6-c-nav__item">
1777
- <a href="#" class="pf-v6-c-nav__link">
1778
- <span class="pf-v6-c-nav__link-text">Server</span>
1779
- </a>
1780
- </li>
1781
- </ul>
1782
- </nav>
2136
+ <div class="pf-v6-c-page__sidebar-main">
2137
+ <div class="pf-v6-c-page__sidebar-body">
2138
+ <nav
2139
+ class="pf-v6-c-nav"
2140
+ id="masthead-expandable-search-expanded-example-primary-nav"
2141
+ aria-label="Global"
2142
+ >
2143
+ <ul class="pf-v6-c-nav__list" role="list">
2144
+ <li class="pf-v6-c-nav__item">
2145
+ <a href="#" class="pf-v6-c-nav__link">
2146
+ <span class="pf-v6-c-nav__link-text">System panel</span>
2147
+ </a>
2148
+ </li>
2149
+ <li class="pf-v6-c-nav__item">
2150
+ <a
2151
+ href="#"
2152
+ class="pf-v6-c-nav__link pf-m-current"
2153
+ aria-current="page"
2154
+ >
2155
+ <span class="pf-v6-c-nav__link-text">Policy</span>
2156
+ </a>
2157
+ </li>
2158
+ <li class="pf-v6-c-nav__item">
2159
+ <a href="#" class="pf-v6-c-nav__link">
2160
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
2161
+ </a>
2162
+ </li>
2163
+ <li class="pf-v6-c-nav__item">
2164
+ <a href="#" class="pf-v6-c-nav__link">
2165
+ <span class="pf-v6-c-nav__link-text">Network services</span>
2166
+ </a>
2167
+ </li>
2168
+ <li class="pf-v6-c-nav__item">
2169
+ <a href="#" class="pf-v6-c-nav__link">
2170
+ <span class="pf-v6-c-nav__link-text">Server</span>
2171
+ </a>
2172
+ </li>
2173
+ </ul>
2174
+ </nav>
2175
+ </div>
1783
2176
  </div>
1784
2177
  </div>
1785
2178
  <div class="pf-v6-c-page__main-container" tabindex="-1">
@@ -1797,21 +2190,57 @@ wrapperTag: div
1797
2190
  </li>
1798
2191
  <li class="pf-v6-c-breadcrumb__item">
1799
2192
  <span class="pf-v6-c-breadcrumb__item-divider">
1800
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2193
+ <svg
2194
+ class="pf-v6-svg"
2195
+ viewBox="0 0 20 20"
2196
+ fill="currentColor"
2197
+ aria-hidden="true"
2198
+ role="img"
2199
+ width="1em"
2200
+ height="1em"
2201
+ >
2202
+ <path
2203
+ d="M14.35 8.94 6.71 1.29l-.02-.02c-.4-.38-1.03-.37-1.41.02-.38.4-.37 1.03.02 1.41l7.29 7.29-7.29 7.29a1.003 1.003 0 0 0 1.42 1.42l7.65-7.65c.59-.59.59-1.54 0-2.12Z"
2204
+ />
2205
+ </svg>
1801
2206
  </span>
1802
2207
 
1803
2208
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1804
2209
  </li>
1805
2210
  <li class="pf-v6-c-breadcrumb__item">
1806
2211
  <span class="pf-v6-c-breadcrumb__item-divider">
1807
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2212
+ <svg
2213
+ class="pf-v6-svg"
2214
+ viewBox="0 0 20 20"
2215
+ fill="currentColor"
2216
+ aria-hidden="true"
2217
+ role="img"
2218
+ width="1em"
2219
+ height="1em"
2220
+ >
2221
+ <path
2222
+ d="M14.35 8.94 6.71 1.29l-.02-.02c-.4-.38-1.03-.37-1.41.02-.38.4-.37 1.03.02 1.41l7.29 7.29-7.29 7.29a1.003 1.003 0 0 0 1.42 1.42l7.65-7.65c.59-.59.59-1.54 0-2.12Z"
2223
+ />
2224
+ </svg>
1808
2225
  </span>
1809
2226
 
1810
2227
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1811
2228
  </li>
1812
2229
  <li class="pf-v6-c-breadcrumb__item">
1813
2230
  <span class="pf-v6-c-breadcrumb__item-divider">
1814
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2231
+ <svg
2232
+ class="pf-v6-svg"
2233
+ viewBox="0 0 20 20"
2234
+ fill="currentColor"
2235
+ aria-hidden="true"
2236
+ role="img"
2237
+ width="1em"
2238
+ height="1em"
2239
+ >
2240
+ <path
2241
+ d="M14.35 8.94 6.71 1.29l-.02-.02c-.4-.38-1.03-.37-1.41.02-.38.4-.37 1.03.02 1.41l7.29 7.29-7.29 7.29a1.003 1.003 0 0 0 1.42 1.42l7.65-7.65c.59-.59.59-1.54 0-2.12Z"
2242
+ />
2243
+ </svg>
1815
2244
  </span>
1816
2245
 
1817
2246
  <a
@@ -1824,9 +2253,15 @@ wrapperTag: div
1824
2253
  </nav>
1825
2254
  </div>
1826
2255
  </section>
1827
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
2256
+ <section
2257
+ class="pf-v6-c-page__main-section pf-m-limit-width"
2258
+ aria-labelledby="main-title"
2259
+ >
1828
2260
  <div class="pf-v6-c-page__main-body">
1829
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
2261
+ <h1
2262
+ class="pf-v6-c-content--h1 pf-m-page-title"
2263
+ id="main-title"
2264
+ >Main title</h1>
1830
2265
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
1831
2266
  </div>
1832
2267
  </section>
@@ -1884,9 +2319,10 @@ wrapperTag: div
1884
2319
  <span class="pf-v6-c-button__text">Skip to content</span>
1885
2320
  </a>
1886
2321
  </div>
2322
+
1887
2323
  <header
1888
2324
  class="pf-v6-c-masthead"
1889
- id="masthead-advanced-with-menu-example-masthead"
2325
+ id="masthead-advanced-with-menu-example-docked"
1890
2326
  >
1891
2327
  <div class="pf-v6-c-masthead__main">
1892
2328
  <span class="pf-v6-c-masthead__toggle">
@@ -1929,7 +2365,7 @@ wrapperTag: div
1929
2365
  y1="2.25860997e-13%"
1930
2366
  x2="32%"
1931
2367
  y2="100%"
1932
- id="linearGradient-masthead-advanced-with-menu-example-masthead"
2368
+ id="linearGradient-masthead-advanced-with-menu-example-docked"
1933
2369
  >
1934
2370
  <stop stop-color="#2B9AF3" offset="0%" />
1935
2371
  <stop
@@ -1983,11 +2419,11 @@ wrapperTag: div
1983
2419
  />
1984
2420
  <path
1985
2421
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
1986
- fill="url(#linearGradient-masthead-advanced-with-menu-example-masthead)"
2422
+ fill="url(#linearGradient-masthead-advanced-with-menu-example-docked)"
1987
2423
  />
1988
2424
  <path
1989
2425
  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"
1990
- fill="url(#linearGradient-masthead-advanced-with-menu-example-masthead)"
2426
+ fill="url(#linearGradient-masthead-advanced-with-menu-example-docked)"
1991
2427
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
1992
2428
  />
1993
2429
  </g>
@@ -1999,7 +2435,7 @@ wrapperTag: div
1999
2435
  <div class="pf-v6-c-masthead__content">
2000
2436
  <div
2001
2437
  class="pf-v6-c-toolbar pf-m-static"
2002
- id="masthead-advanced-with-menu-example-masthead-toolbar"
2438
+ id="masthead-advanced-with-menu-example-docked-toolbar"
2003
2439
  >
2004
2440
  <div class="pf-v6-c-toolbar__content">
2005
2441
  <div class="pf-v6-c-toolbar__content-section">
@@ -2017,7 +2453,19 @@ wrapperTag: div
2017
2453
  aria-label="Application launcher"
2018
2454
  >
2019
2455
  <span class="pf-v6-c-menu-toggle__icon">
2020
- <i class="fas fa-th" aria-hidden="true"></i>
2456
+ <svg
2457
+ class="pf-v6-svg"
2458
+ viewBox="0 0 512 512"
2459
+ fill="currentColor"
2460
+ aria-hidden="true"
2461
+ role="img"
2462
+ width="1em"
2463
+ height="1em"
2464
+ >
2465
+ <path
2466
+ d="M149.333 56v80c0 13.255-10.745 24-24 24H24c-13.255 0-24-10.745-24-24V56c0-13.255 10.745-24 24-24h101.333c13.255 0 24 10.745 24 24zm181.334 240v-80c0-13.255-10.745-24-24-24H205.333c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24h101.333c13.256 0 24.001-10.745 24.001-24zm32-240v80c0 13.255 10.745 24 24 24H488c13.255 0 24-10.745 24-24V56c0-13.255-10.745-24-24-24H386.667c-13.255 0-24 10.745-24 24zm-32 80V56c0-13.255-10.745-24-24-24H205.333c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24h101.333c13.256 0 24.001-10.745 24.001-24zm-205.334 56H24c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24h101.333c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24zM0 376v80c0 13.255 10.745 24 24 24h101.333c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H24c-13.255 0-24 10.745-24 24zm386.667-56H488c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H386.667c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24zm0 160H488c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H386.667c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24zM181.333 376v80c0 13.255 10.745 24 24 24h101.333c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H205.333c-13.255 0-24 10.745-24 24z"
2467
+ />
2468
+ </svg>
2021
2469
  </span>
2022
2470
  </button>
2023
2471
  </div>
@@ -2029,7 +2477,19 @@ wrapperTag: div
2029
2477
  aria-label="Settings"
2030
2478
  >
2031
2479
  <span class="pf-v6-c-menu-toggle__icon">
2032
- <i class="fas fa-cog" aria-hidden="true"></i>
2480
+ <svg
2481
+ class="pf-v6-svg"
2482
+ viewBox="0 0 32 32"
2483
+ fill="currentColor"
2484
+ aria-hidden="true"
2485
+ role="img"
2486
+ width="1em"
2487
+ height="1em"
2488
+ >
2489
+ <path
2490
+ d="M30.168 12.894a.5.5 0 0 0-.488-.394h-2.732a11.512 11.512 0 0 0-.729-1.769l1.931-1.93a.5.5 0 0 0 .066-.625 14.693 14.693 0 0 0-4.393-4.392.498.498 0 0 0-.624.067l-1.93 1.93a11.512 11.512 0 0 0-1.769-.729V2.319a.5.5 0 0 0-.395-.489 14.81 14.81 0 0 0-6.211 0 .5.5 0 0 0-.395.489v2.733c-.614.196-1.207.439-1.769.729L8.8 3.851a.498.498 0 0 0-.624-.067 14.714 14.714 0 0 0-4.393 4.392.5.5 0 0 0 .066.625l1.931 1.93a11.512 11.512 0 0 0-.729 1.769H2.319a.5.5 0 0 0-.488.394 14.652 14.652 0 0 0 0 6.212.5.5 0 0 0 .488.394h2.732c.196.615.44 1.207.729 1.769l-1.931 1.93a.5.5 0 0 0-.066.625 14.673 14.673 0 0 0 4.393 4.392.498.498 0 0 0 .624-.067l1.93-1.93c.562.289 1.154.533 1.769.729v2.733a.5.5 0 0 0 .395.489 14.686 14.686 0 0 0 6.21 0 .5.5 0 0 0 .395-.489v-2.733a11.454 11.454 0 0 0 1.769-.729l1.93 1.93a.5.5 0 0 0 .624.067 14.714 14.714 0 0 0 4.393-4.392.5.5 0 0 0-.066-.625l-1.931-1.93c.289-.562.533-1.154.729-1.769h2.732a.5.5 0 0 0 .488-.394 14.652 14.652 0 0 0 0-6.212ZM16 21.25c-2.895 0-5.25-2.355-5.25-5.25s2.355-5.25 5.25-5.25 5.25 2.355 5.25 5.25-2.355 5.25-5.25 5.25Z"
2491
+ />
2492
+ </svg>
2033
2493
  </span>
2034
2494
  </button>
2035
2495
  </div>
@@ -2041,7 +2501,19 @@ wrapperTag: div
2041
2501
  aria-label="Help"
2042
2502
  >
2043
2503
  <span class="pf-v6-c-menu-toggle__icon">
2044
- <i class="fas fa-question-circle" aria-hidden="true"></i>
2504
+ <svg
2505
+ class="pf-v6-svg"
2506
+ viewBox="0 0 512 512"
2507
+ fill="currentColor"
2508
+ aria-hidden="true"
2509
+ role="img"
2510
+ width="1em"
2511
+ height="1em"
2512
+ >
2513
+ <path
2514
+ d="M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zM262.655 90c-54.497 0-89.255 22.957-116.549 63.758-3.536 5.286-2.353 12.415 2.715 16.258l34.699 26.31c5.205 3.947 12.621 3.008 16.665-2.122 17.864-22.658 30.113-35.797 57.303-35.797 20.429 0 45.698 13.148 45.698 32.958 0 14.976-12.363 22.667-32.534 33.976C247.128 238.528 216 254.941 216 296v4c0 6.627 5.373 12 12 12h56c6.627 0 12-5.373 12-12v-1.333c0-28.462 83.186-29.647 83.186-106.667 0-58.002-60.165-102-116.531-102zM256 338c-25.365 0-46 20.635-46 46 0 25.364 20.635 46 46 46s46-20.636 46-46c0-25.365-20.635-46-46-46z"
2515
+ />
2516
+ </svg>
2045
2517
  </span>
2046
2518
  </button>
2047
2519
  </div>
@@ -2055,7 +2527,19 @@ wrapperTag: div
2055
2527
  aria-label="Actions"
2056
2528
  >
2057
2529
  <span class="pf-v6-c-menu-toggle__icon">
2058
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
2530
+ <svg
2531
+ class="pf-v6-svg"
2532
+ viewBox="0 0 32 32"
2533
+ fill="currentColor"
2534
+ aria-hidden="true"
2535
+ role="img"
2536
+ width="1em"
2537
+ height="1em"
2538
+ >
2539
+ <path
2540
+ d="M12.25 5c0-2.068 1.683-3.75 3.75-3.75S19.75 2.932 19.75 5 18.067 8.75 16 8.75 12.25 7.068 12.25 5ZM16 12.25c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Zm0 11c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Z"
2541
+ />
2542
+ </svg>
2059
2543
  </span>
2060
2544
  </button>
2061
2545
  </div>
@@ -2066,44 +2550,46 @@ wrapperTag: div
2066
2550
  </div>
2067
2551
  </header>
2068
2552
  <div class="pf-v6-c-page__sidebar">
2069
- <div class="pf-v6-c-page__sidebar-body">
2070
- <nav
2071
- class="pf-v6-c-nav"
2072
- id="masthead-advanced-with-menu-example-primary-nav"
2073
- aria-label="Global"
2074
- >
2075
- <ul class="pf-v6-c-nav__list" role="list">
2076
- <li class="pf-v6-c-nav__item">
2077
- <a href="#" class="pf-v6-c-nav__link">
2078
- <span class="pf-v6-c-nav__link-text">System panel</span>
2079
- </a>
2080
- </li>
2081
- <li class="pf-v6-c-nav__item">
2082
- <a
2083
- href="#"
2084
- class="pf-v6-c-nav__link pf-m-current"
2085
- aria-current="page"
2086
- >
2087
- <span class="pf-v6-c-nav__link-text">Policy</span>
2088
- </a>
2089
- </li>
2090
- <li class="pf-v6-c-nav__item">
2091
- <a href="#" class="pf-v6-c-nav__link">
2092
- <span class="pf-v6-c-nav__link-text">Authentication</span>
2093
- </a>
2094
- </li>
2095
- <li class="pf-v6-c-nav__item">
2096
- <a href="#" class="pf-v6-c-nav__link">
2097
- <span class="pf-v6-c-nav__link-text">Network services</span>
2098
- </a>
2099
- </li>
2100
- <li class="pf-v6-c-nav__item">
2101
- <a href="#" class="pf-v6-c-nav__link">
2102
- <span class="pf-v6-c-nav__link-text">Server</span>
2103
- </a>
2104
- </li>
2105
- </ul>
2106
- </nav>
2553
+ <div class="pf-v6-c-page__sidebar-main">
2554
+ <div class="pf-v6-c-page__sidebar-body">
2555
+ <nav
2556
+ class="pf-v6-c-nav"
2557
+ id="masthead-advanced-with-menu-example-primary-nav"
2558
+ aria-label="Global"
2559
+ >
2560
+ <ul class="pf-v6-c-nav__list" role="list">
2561
+ <li class="pf-v6-c-nav__item">
2562
+ <a href="#" class="pf-v6-c-nav__link">
2563
+ <span class="pf-v6-c-nav__link-text">System panel</span>
2564
+ </a>
2565
+ </li>
2566
+ <li class="pf-v6-c-nav__item">
2567
+ <a
2568
+ href="#"
2569
+ class="pf-v6-c-nav__link pf-m-current"
2570
+ aria-current="page"
2571
+ >
2572
+ <span class="pf-v6-c-nav__link-text">Policy</span>
2573
+ </a>
2574
+ </li>
2575
+ <li class="pf-v6-c-nav__item">
2576
+ <a href="#" class="pf-v6-c-nav__link">
2577
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
2578
+ </a>
2579
+ </li>
2580
+ <li class="pf-v6-c-nav__item">
2581
+ <a href="#" class="pf-v6-c-nav__link">
2582
+ <span class="pf-v6-c-nav__link-text">Network services</span>
2583
+ </a>
2584
+ </li>
2585
+ <li class="pf-v6-c-nav__item">
2586
+ <a href="#" class="pf-v6-c-nav__link">
2587
+ <span class="pf-v6-c-nav__link-text">Server</span>
2588
+ </a>
2589
+ </li>
2590
+ </ul>
2591
+ </nav>
2592
+ </div>
2107
2593
  </div>
2108
2594
  </div>
2109
2595
  <div class="pf-v6-c-page__main-container" tabindex="-1">
@@ -2121,21 +2607,57 @@ wrapperTag: div
2121
2607
  </li>
2122
2608
  <li class="pf-v6-c-breadcrumb__item">
2123
2609
  <span class="pf-v6-c-breadcrumb__item-divider">
2124
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2610
+ <svg
2611
+ class="pf-v6-svg"
2612
+ viewBox="0 0 20 20"
2613
+ fill="currentColor"
2614
+ aria-hidden="true"
2615
+ role="img"
2616
+ width="1em"
2617
+ height="1em"
2618
+ >
2619
+ <path
2620
+ d="M14.35 8.94 6.71 1.29l-.02-.02c-.4-.38-1.03-.37-1.41.02-.38.4-.37 1.03.02 1.41l7.29 7.29-7.29 7.29a1.003 1.003 0 0 0 1.42 1.42l7.65-7.65c.59-.59.59-1.54 0-2.12Z"
2621
+ />
2622
+ </svg>
2125
2623
  </span>
2126
2624
 
2127
2625
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
2128
2626
  </li>
2129
2627
  <li class="pf-v6-c-breadcrumb__item">
2130
2628
  <span class="pf-v6-c-breadcrumb__item-divider">
2131
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2629
+ <svg
2630
+ class="pf-v6-svg"
2631
+ viewBox="0 0 20 20"
2632
+ fill="currentColor"
2633
+ aria-hidden="true"
2634
+ role="img"
2635
+ width="1em"
2636
+ height="1em"
2637
+ >
2638
+ <path
2639
+ d="M14.35 8.94 6.71 1.29l-.02-.02c-.4-.38-1.03-.37-1.41.02-.38.4-.37 1.03.02 1.41l7.29 7.29-7.29 7.29a1.003 1.003 0 0 0 1.42 1.42l7.65-7.65c.59-.59.59-1.54 0-2.12Z"
2640
+ />
2641
+ </svg>
2132
2642
  </span>
2133
2643
 
2134
2644
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
2135
2645
  </li>
2136
2646
  <li class="pf-v6-c-breadcrumb__item">
2137
2647
  <span class="pf-v6-c-breadcrumb__item-divider">
2138
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2648
+ <svg
2649
+ class="pf-v6-svg"
2650
+ viewBox="0 0 20 20"
2651
+ fill="currentColor"
2652
+ aria-hidden="true"
2653
+ role="img"
2654
+ width="1em"
2655
+ height="1em"
2656
+ >
2657
+ <path
2658
+ d="M14.35 8.94 6.71 1.29l-.02-.02c-.4-.38-1.03-.37-1.41.02-.38.4-.37 1.03.02 1.41l7.29 7.29-7.29 7.29a1.003 1.003 0 0 0 1.42 1.42l7.65-7.65c.59-.59.59-1.54 0-2.12Z"
2659
+ />
2660
+ </svg>
2139
2661
  </span>
2140
2662
 
2141
2663
  <a
@@ -2148,9 +2670,15 @@ wrapperTag: div
2148
2670
  </nav>
2149
2671
  </div>
2150
2672
  </section>
2151
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
2673
+ <section
2674
+ class="pf-v6-c-page__main-section pf-m-limit-width"
2675
+ aria-labelledby="main-title"
2676
+ >
2152
2677
  <div class="pf-v6-c-page__main-body">
2153
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
2678
+ <h1
2679
+ class="pf-v6-c-content--h1 pf-m-page-title"
2680
+ id="main-title"
2681
+ >Main title</h1>
2154
2682
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
2155
2683
  </div>
2156
2684
  </section>
@@ -2208,7 +2736,8 @@ wrapperTag: div
2208
2736
  <span class="pf-v6-c-button__text">Skip to content</span>
2209
2737
  </a>
2210
2738
  </div>
2211
- <header class="pf-v6-c-masthead" id="masthead-horizontal-nav-masthead">
2739
+
2740
+ <header class="pf-v6-c-masthead" id="masthead-horizontal-nav-docked">
2212
2741
  <div class="pf-v6-c-masthead__main">
2213
2742
  <div class="pf-v6-c-masthead__brand">
2214
2743
  <a class="pf-v6-c-masthead__logo" href="#">
@@ -2220,7 +2749,7 @@ wrapperTag: div
2220
2749
  y1="2.25860997e-13%"
2221
2750
  x2="32%"
2222
2751
  y2="100%"
2223
- id="linearGradient-masthead-horizontal-nav-masthead"
2752
+ id="linearGradient-masthead-horizontal-nav-docked"
2224
2753
  >
2225
2754
  <stop stop-color="#2B9AF3" offset="0%" />
2226
2755
  <stop
@@ -2274,11 +2803,11 @@ wrapperTag: div
2274
2803
  />
2275
2804
  <path
2276
2805
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
2277
- fill="url(#linearGradient-masthead-horizontal-nav-masthead)"
2806
+ fill="url(#linearGradient-masthead-horizontal-nav-docked)"
2278
2807
  />
2279
2808
  <path
2280
2809
  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"
2281
- fill="url(#linearGradient-masthead-horizontal-nav-masthead)"
2810
+ fill="url(#linearGradient-masthead-horizontal-nav-docked)"
2282
2811
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
2283
2812
  />
2284
2813
  </g>
@@ -2290,7 +2819,7 @@ wrapperTag: div
2290
2819
  <div class="pf-v6-c-masthead__content">
2291
2820
  <div
2292
2821
  class="pf-v6-c-toolbar pf-m-static"
2293
- id="masthead-horizontal-nav-masthead-toolbar"
2822
+ id="masthead-horizontal-nav-docked-toolbar"
2294
2823
  >
2295
2824
  <div class="pf-v6-c-toolbar__content">
2296
2825
  <div class="pf-v6-c-toolbar__content-section">
@@ -2300,7 +2829,7 @@ wrapperTag: div
2300
2829
  >
2301
2830
  <nav
2302
2831
  class="pf-v6-c-nav pf-m-scrollable pf-m-horizontal"
2303
- id="masthead-horizontal-nav-masthead-horizontal-nav"
2832
+ id="masthead-horizontal-nav-docked-horizontal-nav"
2304
2833
  aria-label="Global"
2305
2834
  >
2306
2835
  <div class="pf-v6-c-nav__scroll-button">
@@ -2310,7 +2839,19 @@ wrapperTag: div
2310
2839
  aria-label="Scroll start"
2311
2840
  >
2312
2841
  <span class="pf-v6-c-button__icon">
2313
- <i class="fas fa-angle-left" aria-hidden="true"></i>
2842
+ <svg
2843
+ class="pf-v6-svg"
2844
+ viewBox="0 0 20 20"
2845
+ fill="currentColor"
2846
+ aria-hidden="true"
2847
+ role="img"
2848
+ width="1em"
2849
+ height="1em"
2850
+ >
2851
+ <path
2852
+ d="m6.41 10 7.29-7.29.02-.02c.38-.4.37-1.03-.02-1.41-.4-.38-1.03-.37-1.41.02L4.64 8.95a1.49 1.49 0 0 0 0 2.12l7.65 7.65c.19.19.44.29.71.29.27 0 .52-.11.71-.29a.996.996 0 0 0 0-1.41l-7.29-7.29Z"
2853
+ />
2854
+ </svg>
2314
2855
  </span>
2315
2856
  </button>
2316
2857
  </div>
@@ -2352,70 +2893,24 @@ wrapperTag: div
2352
2893
  aria-label="Scroll end"
2353
2894
  >
2354
2895
  <span class="pf-v6-c-button__icon">
2355
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2896
+ <svg
2897
+ class="pf-v6-svg"
2898
+ viewBox="0 0 20 20"
2899
+ fill="currentColor"
2900
+ aria-hidden="true"
2901
+ role="img"
2902
+ width="1em"
2903
+ height="1em"
2904
+ >
2905
+ <path
2906
+ d="M14.35 8.94 6.71 1.29l-.02-.02c-.4-.38-1.03-.37-1.41.02-.38.4-.37 1.03.02 1.41l7.29 7.29-7.29 7.29a1.003 1.003 0 0 0 1.42 1.42l7.65-7.65c.59-.59.59-1.54 0-2.12Z"
2907
+ />
2908
+ </svg>
2356
2909
  </span>
2357
2910
  </button>
2358
2911
  </div>
2359
2912
  </nav>
2360
2913
  </div>
2361
-
2362
- <div
2363
- class="pf-v6-c-toolbar__group pf-m-align-end pf-m-spacer-none pf-m-spacer-md-on-md pf-m-action-group-plain"
2364
- >
2365
- <div
2366
- class="pf-v6-c-toolbar__group pf-m-hidden pf-m-visible-on-lg pf-m-action-group-plain"
2367
- >
2368
- <div class="pf-v6-c-toolbar__item">
2369
- <button
2370
- class="pf-v6-c-menu-toggle pf-m-plain"
2371
- type="button"
2372
- aria-expanded="false"
2373
- aria-label="Application launcher"
2374
- >
2375
- <span class="pf-v6-c-menu-toggle__icon">
2376
- <i class="fas fa-th" aria-hidden="true"></i>
2377
- </span>
2378
- </button>
2379
- </div>
2380
- <div class="pf-v6-c-toolbar__item">
2381
- <button
2382
- class="pf-v6-c-menu-toggle pf-m-settings pf-m-plain"
2383
- type="button"
2384
- aria-expanded="false"
2385
- aria-label="Settings"
2386
- >
2387
- <span class="pf-v6-c-menu-toggle__icon">
2388
- <i class="fas fa-cog" aria-hidden="true"></i>
2389
- </span>
2390
- </button>
2391
- </div>
2392
- <div class="pf-v6-c-toolbar__item">
2393
- <button
2394
- class="pf-v6-c-menu-toggle pf-m-plain"
2395
- type="button"
2396
- aria-expanded="false"
2397
- aria-label="Help"
2398
- >
2399
- <span class="pf-v6-c-menu-toggle__icon">
2400
- <i class="fas fa-question-circle" aria-hidden="true"></i>
2401
- </span>
2402
- </button>
2403
- </div>
2404
- </div>
2405
-
2406
- <div class="pf-v6-c-toolbar__item pf-m-hidden-on-lg">
2407
- <button
2408
- class="pf-v6-c-menu-toggle pf-m-plain"
2409
- type="button"
2410
- aria-expanded="false"
2411
- aria-label="Actions"
2412
- >
2413
- <span class="pf-v6-c-menu-toggle__icon">
2414
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
2415
- </span>
2416
- </button>
2417
- </div>
2418
- </div>
2419
2914
  </div>
2420
2915
  </div>
2421
2916
  </div>
@@ -2436,21 +2931,57 @@ wrapperTag: div
2436
2931
  </li>
2437
2932
  <li class="pf-v6-c-breadcrumb__item">
2438
2933
  <span class="pf-v6-c-breadcrumb__item-divider">
2439
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2934
+ <svg
2935
+ class="pf-v6-svg"
2936
+ viewBox="0 0 20 20"
2937
+ fill="currentColor"
2938
+ aria-hidden="true"
2939
+ role="img"
2940
+ width="1em"
2941
+ height="1em"
2942
+ >
2943
+ <path
2944
+ d="M14.35 8.94 6.71 1.29l-.02-.02c-.4-.38-1.03-.37-1.41.02-.38.4-.37 1.03.02 1.41l7.29 7.29-7.29 7.29a1.003 1.003 0 0 0 1.42 1.42l7.65-7.65c.59-.59.59-1.54 0-2.12Z"
2945
+ />
2946
+ </svg>
2440
2947
  </span>
2441
2948
 
2442
2949
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
2443
2950
  </li>
2444
2951
  <li class="pf-v6-c-breadcrumb__item">
2445
2952
  <span class="pf-v6-c-breadcrumb__item-divider">
2446
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2953
+ <svg
2954
+ class="pf-v6-svg"
2955
+ viewBox="0 0 20 20"
2956
+ fill="currentColor"
2957
+ aria-hidden="true"
2958
+ role="img"
2959
+ width="1em"
2960
+ height="1em"
2961
+ >
2962
+ <path
2963
+ d="M14.35 8.94 6.71 1.29l-.02-.02c-.4-.38-1.03-.37-1.41.02-.38.4-.37 1.03.02 1.41l7.29 7.29-7.29 7.29a1.003 1.003 0 0 0 1.42 1.42l7.65-7.65c.59-.59.59-1.54 0-2.12Z"
2964
+ />
2965
+ </svg>
2447
2966
  </span>
2448
2967
 
2449
2968
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
2450
2969
  </li>
2451
2970
  <li class="pf-v6-c-breadcrumb__item">
2452
2971
  <span class="pf-v6-c-breadcrumb__item-divider">
2453
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2972
+ <svg
2973
+ class="pf-v6-svg"
2974
+ viewBox="0 0 20 20"
2975
+ fill="currentColor"
2976
+ aria-hidden="true"
2977
+ role="img"
2978
+ width="1em"
2979
+ height="1em"
2980
+ >
2981
+ <path
2982
+ d="M14.35 8.94 6.71 1.29l-.02-.02c-.4-.38-1.03-.37-1.41.02-.38.4-.37 1.03.02 1.41l7.29 7.29-7.29 7.29a1.003 1.003 0 0 0 1.42 1.42l7.65-7.65c.59-.59.59-1.54 0-2.12Z"
2983
+ />
2984
+ </svg>
2454
2985
  </span>
2455
2986
 
2456
2987
  <a
@@ -2463,9 +2994,15 @@ wrapperTag: div
2463
2994
  </nav>
2464
2995
  </div>
2465
2996
  </section>
2466
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
2997
+ <section
2998
+ class="pf-v6-c-page__main-section pf-m-limit-width"
2999
+ aria-labelledby="main-title"
3000
+ >
2467
3001
  <div class="pf-v6-c-page__main-body">
2468
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
3002
+ <h1
3003
+ class="pf-v6-c-content--h1 pf-m-page-title"
3004
+ id="main-title"
3005
+ >Main title</h1>
2469
3006
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
2470
3007
  </div>
2471
3008
  </section>
@@ -2528,9 +3065,10 @@ wrapperTag: div
2528
3065
  <span class="pf-v6-c-button__text">Skip to content</span>
2529
3066
  </a>
2530
3067
  </div>
3068
+
2531
3069
  <header
2532
3070
  class="pf-v6-c-masthead"
2533
- id="masthead-toggle-group-filters-expanded-mobile-example-masthead"
3071
+ id="masthead-toggle-group-filters-expanded-mobile-example-docked"
2534
3072
  >
2535
3073
  <div class="pf-v6-c-masthead__main">
2536
3074
  <span class="pf-v6-c-masthead__toggle">
@@ -2573,7 +3111,7 @@ wrapperTag: div
2573
3111
  y1="2.25860997e-13%"
2574
3112
  x2="32%"
2575
3113
  y2="100%"
2576
- id="linearGradient-masthead-toggle-group-filters-expanded-mobile-example-masthead"
3114
+ id="linearGradient-masthead-toggle-group-filters-expanded-mobile-example-docked"
2577
3115
  >
2578
3116
  <stop stop-color="#2B9AF3" offset="0%" />
2579
3117
  <stop
@@ -2627,11 +3165,11 @@ wrapperTag: div
2627
3165
  />
2628
3166
  <path
2629
3167
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
2630
- fill="url(#linearGradient-masthead-toggle-group-filters-expanded-mobile-example-masthead)"
3168
+ fill="url(#linearGradient-masthead-toggle-group-filters-expanded-mobile-example-docked)"
2631
3169
  />
2632
3170
  <path
2633
3171
  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"
2634
- fill="url(#linearGradient-masthead-toggle-group-filters-expanded-mobile-example-masthead)"
3172
+ fill="url(#linearGradient-masthead-toggle-group-filters-expanded-mobile-example-docked)"
2635
3173
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
2636
3174
  />
2637
3175
  </g>
@@ -2643,7 +3181,7 @@ wrapperTag: div
2643
3181
  <div class="pf-v6-c-masthead__content">
2644
3182
  <div
2645
3183
  class="pf-v6-c-toolbar pf-m-static"
2646
- id="masthead-toggle-group-filters-expanded-mobile-example-masthead-toolbar"
3184
+ id="masthead-toggle-group-filters-expanded-mobile-example-docked-toolbar"
2647
3185
  >
2648
3186
  <div class="pf-v6-c-toolbar__content">
2649
3187
  <div class="pf-v6-c-toolbar__content-section">
@@ -2656,10 +3194,22 @@ wrapperTag: div
2656
3194
  type="button"
2657
3195
  aria-expanded="false"
2658
3196
  aria-label="Show filters"
2659
- aria-controls="masthead-toggle-group-filters-expanded-mobile-example-masthead-toolbar-expandable-content"
3197
+ aria-controls="masthead-toggle-group-filters-expanded-mobile-example-docked-toolbar-expandable-content"
2660
3198
  >
2661
3199
  <span class="pf-v6-c-menu-toggle__icon">
2662
- <i class="fas fa-filter" aria-hidden="true"></i>
3200
+ <svg
3201
+ class="pf-v6-svg"
3202
+ viewBox="0 0 32 32"
3203
+ fill="currentColor"
3204
+ aria-hidden="true"
3205
+ role="img"
3206
+ width="1em"
3207
+ height="1em"
3208
+ >
3209
+ <path
3210
+ d="M29.875 3.5V7a.876.876 0 0 1-.256.619l-9.744 9.744v10.638a.875.875 0 0 1-.599.83l-6 2a.876.876 0 0 1-.788-.12.874.874 0 0 1-.363-.71V17.363L2.381 7.619A.876.876 0 0 1 2.125 7V3.5c0-.758.617-1.375 1.375-1.375h25c.758 0 1.375.617 1.375 1.375Z"
3211
+ />
3212
+ </svg>
2663
3213
  </span>
2664
3214
  </button>
2665
3215
  </div>
@@ -2673,7 +3223,19 @@ wrapperTag: div
2673
3223
  aria-label="Actions"
2674
3224
  >
2675
3225
  <span class="pf-v6-c-menu-toggle__icon">
2676
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
3226
+ <svg
3227
+ class="pf-v6-svg"
3228
+ viewBox="0 0 32 32"
3229
+ fill="currentColor"
3230
+ aria-hidden="true"
3231
+ role="img"
3232
+ width="1em"
3233
+ height="1em"
3234
+ >
3235
+ <path
3236
+ d="M12.25 5c0-2.068 1.683-3.75 3.75-3.75S19.75 2.932 19.75 5 18.067 8.75 16 8.75 12.25 7.068 12.25 5ZM16 12.25c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Zm0 11c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Z"
3237
+ />
3238
+ </svg>
2677
3239
  </span>
2678
3240
  </button>
2679
3241
  </div>
@@ -2681,7 +3243,7 @@ wrapperTag: div
2681
3243
 
2682
3244
  <div
2683
3245
  class="pf-v6-c-toolbar__expandable-content pf-m-expanded"
2684
- id="masthead-toggle-group-filters-expanded-mobile-example-masthead-toolbar-expandable-content"
3246
+ id="masthead-toggle-group-filters-expanded-mobile-example-docked-toolbar-expandable-content"
2685
3247
  >
2686
3248
  <div class="pf-v6-c-toolbar__item pf-m-search-filter">
2687
3249
  <div
@@ -2694,15 +3256,39 @@ wrapperTag: div
2694
3256
  class="pf-v6-c-menu-toggle"
2695
3257
  type="button"
2696
3258
  aria-expanded="false"
2697
- id="masthead-toggle-group-filters-expanded-mobile-example-masthead-toolbar-search-filter-menu"
3259
+ id="masthead-toggle-group-filters-expanded-mobile-example-docked-toolbar-search-filter-menu"
2698
3260
  >
2699
3261
  <span class="pf-v6-c-menu-toggle__icon">
2700
- <i class="fas fa-filter" aria-hidden="true"></i>
3262
+ <svg
3263
+ class="pf-v6-svg"
3264
+ viewBox="0 0 32 32"
3265
+ fill="currentColor"
3266
+ aria-hidden="true"
3267
+ role="img"
3268
+ width="1em"
3269
+ height="1em"
3270
+ >
3271
+ <path
3272
+ d="M29.875 3.5V7a.876.876 0 0 1-.256.619l-9.744 9.744v10.638a.875.875 0 0 1-.599.83l-6 2a.876.876 0 0 1-.788-.12.874.874 0 0 1-.363-.71V17.363L2.381 7.619A.876.876 0 0 1 2.125 7V3.5c0-.758.617-1.375 1.375-1.375h25c.758 0 1.375.617 1.375 1.375Z"
3273
+ />
3274
+ </svg>
2701
3275
  </span>
2702
3276
  <span class="pf-v6-c-menu-toggle__text">Name</span>
2703
3277
  <span class="pf-v6-c-menu-toggle__controls">
2704
3278
  <span class="pf-v6-c-menu-toggle__toggle-icon">
2705
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
3279
+ <svg
3280
+ class="pf-v6-svg"
3281
+ viewBox="0 0 20 20"
3282
+ fill="currentColor"
3283
+ aria-hidden="true"
3284
+ role="img"
3285
+ width="1em"
3286
+ height="1em"
3287
+ >
3288
+ <path
3289
+ d="M18.92 5.62C18.77 5.25 18.4 5 18 5H2a1.003 1.003 0 0 0-.71 1.71l7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65c.29-.29.37-.72.22-1.09Z"
3290
+ />
3291
+ </svg>
2706
3292
  </span>
2707
3293
  </span>
2708
3294
  </button>
@@ -2733,44 +3319,46 @@ wrapperTag: div
2733
3319
  </div>
2734
3320
  </header>
2735
3321
  <div class="pf-v6-c-page__sidebar">
2736
- <div class="pf-v6-c-page__sidebar-body">
2737
- <nav
2738
- class="pf-v6-c-nav"
2739
- id="masthead-toggle-group-filters-expanded-mobile-example-primary-nav"
2740
- aria-label="Global"
2741
- >
2742
- <ul class="pf-v6-c-nav__list" role="list">
2743
- <li class="pf-v6-c-nav__item">
2744
- <a href="#" class="pf-v6-c-nav__link">
2745
- <span class="pf-v6-c-nav__link-text">System panel</span>
2746
- </a>
2747
- </li>
2748
- <li class="pf-v6-c-nav__item">
2749
- <a
2750
- href="#"
2751
- class="pf-v6-c-nav__link pf-m-current"
2752
- aria-current="page"
2753
- >
2754
- <span class="pf-v6-c-nav__link-text">Policy</span>
2755
- </a>
2756
- </li>
2757
- <li class="pf-v6-c-nav__item">
2758
- <a href="#" class="pf-v6-c-nav__link">
2759
- <span class="pf-v6-c-nav__link-text">Authentication</span>
2760
- </a>
2761
- </li>
2762
- <li class="pf-v6-c-nav__item">
2763
- <a href="#" class="pf-v6-c-nav__link">
2764
- <span class="pf-v6-c-nav__link-text">Network services</span>
2765
- </a>
2766
- </li>
2767
- <li class="pf-v6-c-nav__item">
2768
- <a href="#" class="pf-v6-c-nav__link">
2769
- <span class="pf-v6-c-nav__link-text">Server</span>
2770
- </a>
2771
- </li>
2772
- </ul>
2773
- </nav>
3322
+ <div class="pf-v6-c-page__sidebar-main">
3323
+ <div class="pf-v6-c-page__sidebar-body">
3324
+ <nav
3325
+ class="pf-v6-c-nav"
3326
+ id="masthead-toggle-group-filters-expanded-mobile-example-primary-nav"
3327
+ aria-label="Global"
3328
+ >
3329
+ <ul class="pf-v6-c-nav__list" role="list">
3330
+ <li class="pf-v6-c-nav__item">
3331
+ <a href="#" class="pf-v6-c-nav__link">
3332
+ <span class="pf-v6-c-nav__link-text">System panel</span>
3333
+ </a>
3334
+ </li>
3335
+ <li class="pf-v6-c-nav__item">
3336
+ <a
3337
+ href="#"
3338
+ class="pf-v6-c-nav__link pf-m-current"
3339
+ aria-current="page"
3340
+ >
3341
+ <span class="pf-v6-c-nav__link-text">Policy</span>
3342
+ </a>
3343
+ </li>
3344
+ <li class="pf-v6-c-nav__item">
3345
+ <a href="#" class="pf-v6-c-nav__link">
3346
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
3347
+ </a>
3348
+ </li>
3349
+ <li class="pf-v6-c-nav__item">
3350
+ <a href="#" class="pf-v6-c-nav__link">
3351
+ <span class="pf-v6-c-nav__link-text">Network services</span>
3352
+ </a>
3353
+ </li>
3354
+ <li class="pf-v6-c-nav__item">
3355
+ <a href="#" class="pf-v6-c-nav__link">
3356
+ <span class="pf-v6-c-nav__link-text">Server</span>
3357
+ </a>
3358
+ </li>
3359
+ </ul>
3360
+ </nav>
3361
+ </div>
2774
3362
  </div>
2775
3363
  </div>
2776
3364
  <div class="pf-v6-c-page__main-container" tabindex="-1">
@@ -2788,21 +3376,57 @@ wrapperTag: div
2788
3376
  </li>
2789
3377
  <li class="pf-v6-c-breadcrumb__item">
2790
3378
  <span class="pf-v6-c-breadcrumb__item-divider">
2791
- <i class="fas fa-angle-right" aria-hidden="true"></i>
3379
+ <svg
3380
+ class="pf-v6-svg"
3381
+ viewBox="0 0 20 20"
3382
+ fill="currentColor"
3383
+ aria-hidden="true"
3384
+ role="img"
3385
+ width="1em"
3386
+ height="1em"
3387
+ >
3388
+ <path
3389
+ d="M14.35 8.94 6.71 1.29l-.02-.02c-.4-.38-1.03-.37-1.41.02-.38.4-.37 1.03.02 1.41l7.29 7.29-7.29 7.29a1.003 1.003 0 0 0 1.42 1.42l7.65-7.65c.59-.59.59-1.54 0-2.12Z"
3390
+ />
3391
+ </svg>
2792
3392
  </span>
2793
3393
 
2794
3394
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
2795
3395
  </li>
2796
3396
  <li class="pf-v6-c-breadcrumb__item">
2797
3397
  <span class="pf-v6-c-breadcrumb__item-divider">
2798
- <i class="fas fa-angle-right" aria-hidden="true"></i>
3398
+ <svg
3399
+ class="pf-v6-svg"
3400
+ viewBox="0 0 20 20"
3401
+ fill="currentColor"
3402
+ aria-hidden="true"
3403
+ role="img"
3404
+ width="1em"
3405
+ height="1em"
3406
+ >
3407
+ <path
3408
+ d="M14.35 8.94 6.71 1.29l-.02-.02c-.4-.38-1.03-.37-1.41.02-.38.4-.37 1.03.02 1.41l7.29 7.29-7.29 7.29a1.003 1.003 0 0 0 1.42 1.42l7.65-7.65c.59-.59.59-1.54 0-2.12Z"
3409
+ />
3410
+ </svg>
2799
3411
  </span>
2800
3412
 
2801
3413
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
2802
3414
  </li>
2803
3415
  <li class="pf-v6-c-breadcrumb__item">
2804
3416
  <span class="pf-v6-c-breadcrumb__item-divider">
2805
- <i class="fas fa-angle-right" aria-hidden="true"></i>
3417
+ <svg
3418
+ class="pf-v6-svg"
3419
+ viewBox="0 0 20 20"
3420
+ fill="currentColor"
3421
+ aria-hidden="true"
3422
+ role="img"
3423
+ width="1em"
3424
+ height="1em"
3425
+ >
3426
+ <path
3427
+ d="M14.35 8.94 6.71 1.29l-.02-.02c-.4-.38-1.03-.37-1.41.02-.38.4-.37 1.03.02 1.41l7.29 7.29-7.29 7.29a1.003 1.003 0 0 0 1.42 1.42l7.65-7.65c.59-.59.59-1.54 0-2.12Z"
3428
+ />
3429
+ </svg>
2806
3430
  </span>
2807
3431
 
2808
3432
  <a
@@ -2815,9 +3439,15 @@ wrapperTag: div
2815
3439
  </nav>
2816
3440
  </div>
2817
3441
  </section>
2818
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
3442
+ <section
3443
+ class="pf-v6-c-page__main-section pf-m-limit-width"
3444
+ aria-labelledby="main-title"
3445
+ >
2819
3446
  <div class="pf-v6-c-page__main-body">
2820
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
3447
+ <h1
3448
+ class="pf-v6-c-content--h1 pf-m-page-title"
3449
+ id="main-title"
3450
+ >Main title</h1>
2821
3451
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
2822
3452
  </div>
2823
3453
  </section>