@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/Drawer/examples/Drawer.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="drawer-collapsed-example-masthead">
19
+
20
+ <header class="pf-v6-c-masthead" id="drawer-collapsed-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-drawer-collapsed-example-masthead"
62
+ id="linearGradient-drawer-collapsed-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-drawer-collapsed-example-masthead)"
116
+ fill="url(#linearGradient-drawer-collapsed-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-drawer-collapsed-example-masthead)"
120
+ fill="url(#linearGradient-drawer-collapsed-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="drawer-collapsed-example-masthead-toolbar"
132
+ id="drawer-collapsed-example-docked-toolbar"
132
133
  >
133
134
  <div class="pf-v6-c-toolbar__content">
134
135
  <div class="pf-v6-c-toolbar__content-section">
@@ -146,7 +147,19 @@ wrapperTag: div
146
147
  aria-label="Application launcher"
147
148
  >
148
149
  <span class="pf-v6-c-menu-toggle__icon">
149
- <i class="fas fa-th" aria-hidden="true"></i>
150
+ <svg
151
+ class="pf-v6-svg"
152
+ viewBox="0 0 512 512"
153
+ fill="currentColor"
154
+ aria-hidden="true"
155
+ role="img"
156
+ width="1em"
157
+ height="1em"
158
+ >
159
+ <path
160
+ 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"
161
+ />
162
+ </svg>
150
163
  </span>
151
164
  </button>
152
165
  </div>
@@ -158,7 +171,19 @@ wrapperTag: div
158
171
  aria-label="Settings"
159
172
  >
160
173
  <span class="pf-v6-c-menu-toggle__icon">
161
- <i class="fas fa-cog" aria-hidden="true"></i>
174
+ <svg
175
+ class="pf-v6-svg"
176
+ viewBox="0 0 32 32"
177
+ fill="currentColor"
178
+ aria-hidden="true"
179
+ role="img"
180
+ width="1em"
181
+ height="1em"
182
+ >
183
+ <path
184
+ 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"
185
+ />
186
+ </svg>
162
187
  </span>
163
188
  </button>
164
189
  </div>
@@ -170,7 +195,19 @@ wrapperTag: div
170
195
  aria-label="Help"
171
196
  >
172
197
  <span class="pf-v6-c-menu-toggle__icon">
173
- <i class="fas fa-question-circle" aria-hidden="true"></i>
198
+ <svg
199
+ class="pf-v6-svg"
200
+ viewBox="0 0 512 512"
201
+ fill="currentColor"
202
+ aria-hidden="true"
203
+ role="img"
204
+ width="1em"
205
+ height="1em"
206
+ >
207
+ <path
208
+ 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"
209
+ />
210
+ </svg>
174
211
  </span>
175
212
  </button>
176
213
  </div>
@@ -184,7 +221,19 @@ wrapperTag: div
184
221
  aria-label="Actions"
185
222
  >
186
223
  <span class="pf-v6-c-menu-toggle__icon">
187
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
224
+ <svg
225
+ class="pf-v6-svg"
226
+ viewBox="0 0 32 32"
227
+ fill="currentColor"
228
+ aria-hidden="true"
229
+ role="img"
230
+ width="1em"
231
+ height="1em"
232
+ >
233
+ <path
234
+ 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"
235
+ />
236
+ </svg>
188
237
  </span>
189
238
  </button>
190
239
  </div>
@@ -195,44 +244,46 @@ wrapperTag: div
195
244
  </div>
196
245
  </header>
197
246
  <div class="pf-v6-c-page__sidebar">
198
- <div class="pf-v6-c-page__sidebar-body">
199
- <nav
200
- class="pf-v6-c-nav"
201
- id="drawer-collapsed-example-primary-nav"
202
- aria-label="Global"
203
- >
204
- <ul class="pf-v6-c-nav__list" role="list">
205
- <li class="pf-v6-c-nav__item">
206
- <a href="#" class="pf-v6-c-nav__link">
207
- <span class="pf-v6-c-nav__link-text">System panel</span>
208
- </a>
209
- </li>
210
- <li class="pf-v6-c-nav__item">
211
- <a
212
- href="#"
213
- class="pf-v6-c-nav__link pf-m-current"
214
- aria-current="page"
215
- >
216
- <span class="pf-v6-c-nav__link-text">Policy</span>
217
- </a>
218
- </li>
219
- <li class="pf-v6-c-nav__item">
220
- <a href="#" class="pf-v6-c-nav__link">
221
- <span class="pf-v6-c-nav__link-text">Authentication</span>
222
- </a>
223
- </li>
224
- <li class="pf-v6-c-nav__item">
225
- <a href="#" class="pf-v6-c-nav__link">
226
- <span class="pf-v6-c-nav__link-text">Network services</span>
227
- </a>
228
- </li>
229
- <li class="pf-v6-c-nav__item">
230
- <a href="#" class="pf-v6-c-nav__link">
231
- <span class="pf-v6-c-nav__link-text">Server</span>
232
- </a>
233
- </li>
234
- </ul>
235
- </nav>
247
+ <div class="pf-v6-c-page__sidebar-main">
248
+ <div class="pf-v6-c-page__sidebar-body">
249
+ <nav
250
+ class="pf-v6-c-nav"
251
+ id="drawer-collapsed-example-primary-nav"
252
+ aria-label="Global"
253
+ >
254
+ <ul class="pf-v6-c-nav__list" role="list">
255
+ <li class="pf-v6-c-nav__item">
256
+ <a href="#" class="pf-v6-c-nav__link">
257
+ <span class="pf-v6-c-nav__link-text">System panel</span>
258
+ </a>
259
+ </li>
260
+ <li class="pf-v6-c-nav__item">
261
+ <a
262
+ href="#"
263
+ class="pf-v6-c-nav__link pf-m-current"
264
+ aria-current="page"
265
+ >
266
+ <span class="pf-v6-c-nav__link-text">Policy</span>
267
+ </a>
268
+ </li>
269
+ <li class="pf-v6-c-nav__item">
270
+ <a href="#" class="pf-v6-c-nav__link">
271
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
272
+ </a>
273
+ </li>
274
+ <li class="pf-v6-c-nav__item">
275
+ <a href="#" class="pf-v6-c-nav__link">
276
+ <span class="pf-v6-c-nav__link-text">Network services</span>
277
+ </a>
278
+ </li>
279
+ <li class="pf-v6-c-nav__item">
280
+ <a href="#" class="pf-v6-c-nav__link">
281
+ <span class="pf-v6-c-nav__link-text">Server</span>
282
+ </a>
283
+ </li>
284
+ </ul>
285
+ </nav>
286
+ </div>
236
287
  </div>
237
288
  </div>
238
289
  <div class="pf-v6-c-page__drawer">
@@ -258,7 +309,19 @@ wrapperTag: div
258
309
  </li>
259
310
  <li class="pf-v6-c-breadcrumb__item">
260
311
  <span class="pf-v6-c-breadcrumb__item-divider">
261
- <i class="fas fa-angle-right" aria-hidden="true"></i>
312
+ <svg
313
+ class="pf-v6-svg"
314
+ viewBox="0 0 20 20"
315
+ fill="currentColor"
316
+ aria-hidden="true"
317
+ role="img"
318
+ width="1em"
319
+ height="1em"
320
+ >
321
+ <path
322
+ 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"
323
+ />
324
+ </svg>
262
325
  </span>
263
326
 
264
327
  <a
@@ -268,7 +331,19 @@ wrapperTag: div
268
331
  </li>
269
332
  <li class="pf-v6-c-breadcrumb__item">
270
333
  <span class="pf-v6-c-breadcrumb__item-divider">
271
- <i class="fas fa-angle-right" aria-hidden="true"></i>
334
+ <svg
335
+ class="pf-v6-svg"
336
+ viewBox="0 0 20 20"
337
+ fill="currentColor"
338
+ aria-hidden="true"
339
+ role="img"
340
+ width="1em"
341
+ height="1em"
342
+ >
343
+ <path
344
+ 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"
345
+ />
346
+ </svg>
272
347
  </span>
273
348
 
274
349
  <a
@@ -278,7 +353,19 @@ wrapperTag: div
278
353
  </li>
279
354
  <li class="pf-v6-c-breadcrumb__item">
280
355
  <span class="pf-v6-c-breadcrumb__item-divider">
281
- <i class="fas fa-angle-right" aria-hidden="true"></i>
356
+ <svg
357
+ class="pf-v6-svg"
358
+ viewBox="0 0 20 20"
359
+ fill="currentColor"
360
+ aria-hidden="true"
361
+ role="img"
362
+ width="1em"
363
+ height="1em"
364
+ >
365
+ <path
366
+ 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"
367
+ />
368
+ </svg>
282
369
  </span>
283
370
 
284
371
  <a
@@ -291,9 +378,15 @@ wrapperTag: div
291
378
  </nav>
292
379
  </div>
293
380
  </section>
294
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
381
+ <section
382
+ class="pf-v6-c-page__main-section pf-m-limit-width"
383
+ aria-labelledby="main-title"
384
+ >
295
385
  <div class="pf-v6-c-page__main-body">
296
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
386
+ <h1
387
+ class="pf-v6-c-content--h1 pf-m-page-title"
388
+ id="main-title"
389
+ >Main title</h1>
297
390
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
298
391
  </div>
299
392
  </section>
@@ -348,7 +441,19 @@ wrapperTag: div
348
441
  id="drawer-collapsed-example-toggle"
349
442
  >
350
443
  <span class="pf-v6-c-menu-toggle__icon">
351
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
444
+ <svg
445
+ class="pf-v6-svg"
446
+ viewBox="0 0 32 32"
447
+ fill="currentColor"
448
+ aria-hidden="true"
449
+ role="img"
450
+ width="1em"
451
+ height="1em"
452
+ >
453
+ <path
454
+ 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"
455
+ />
456
+ </svg>
352
457
  </span>
353
458
  </button>
354
459
  <div class="pf-v6-c-drawer__close">
@@ -358,7 +463,19 @@ wrapperTag: div
358
463
  aria-label="Close drawer panel"
359
464
  >
360
465
  <span class="pf-v6-c-button__icon">
361
- <i class="fas fa-times" aria-hidden="true"></i>
466
+ <svg
467
+ class="pf-v6-svg"
468
+ viewBox="0 0 20 20"
469
+ fill="currentColor"
470
+ aria-hidden="true"
471
+ role="img"
472
+ width="1em"
473
+ height="1em"
474
+ >
475
+ <path
476
+ 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"
477
+ />
478
+ </svg>
362
479
  </span>
363
480
  </button>
364
481
  </div>
@@ -380,13 +497,21 @@ wrapperTag: div
380
497
  </div>
381
498
  </div>
382
499
  <div class="pf-v6-c-drawer__body pf-m-no-padding">
383
- <div class="pf-v6-c-tabs pf-m-box pf-m-fill">
384
- <ul class="pf-v6-c-tabs__list" role="tablist">
500
+ <div
501
+ class="pf-v6-c-tabs pf-m-box pf-m-fill"
502
+ aria-label="Drawer panel"
503
+ >
504
+ <ul
505
+ class="pf-v6-c-tabs__list"
506
+ role="tablist"
507
+ aria-label="Drawer panel"
508
+ >
385
509
  <li class="pf-v6-c-tabs__item pf-m-current" role="presentation">
386
510
  <button
387
511
  type="button"
388
512
  class="pf-v6-c-tabs__link"
389
513
  role="tab"
514
+ aria-selected="true"
390
515
  id="drawer-collapsed-example-panel-tabs-tab1-link"
391
516
  >
392
517
  <span class="pf-v6-c-tabs__item-text">Overview</span>
@@ -397,6 +522,7 @@ wrapperTag: div
397
522
  type="button"
398
523
  class="pf-v6-c-tabs__link"
399
524
  role="tab"
525
+ aria-selected="false"
400
526
  id="drawer-collapsed-example-panel-tabs-tab2-link"
401
527
  >
402
528
  <span class="pf-v6-c-tabs__item-text">Activity</span>
@@ -502,7 +628,8 @@ wrapperTag: div
502
628
  <span class="pf-v6-c-button__text">Skip to content</span>
503
629
  </a>
504
630
  </div>
505
- <header class="pf-v6-c-masthead" id="drawer-expanded-example-masthead">
631
+
632
+ <header class="pf-v6-c-masthead" id="drawer-expanded-example-docked">
506
633
  <div class="pf-v6-c-masthead__main">
507
634
  <span class="pf-v6-c-masthead__toggle">
508
635
  <button
@@ -544,7 +671,7 @@ wrapperTag: div
544
671
  y1="2.25860997e-13%"
545
672
  x2="32%"
546
673
  y2="100%"
547
- id="linearGradient-drawer-expanded-example-masthead"
674
+ id="linearGradient-drawer-expanded-example-docked"
548
675
  >
549
676
  <stop stop-color="#2B9AF3" offset="0%" />
550
677
  <stop
@@ -598,11 +725,11 @@ wrapperTag: div
598
725
  />
599
726
  <path
600
727
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
601
- fill="url(#linearGradient-drawer-expanded-example-masthead)"
728
+ fill="url(#linearGradient-drawer-expanded-example-docked)"
602
729
  />
603
730
  <path
604
731
  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"
605
- fill="url(#linearGradient-drawer-expanded-example-masthead)"
732
+ fill="url(#linearGradient-drawer-expanded-example-docked)"
606
733
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
607
734
  />
608
735
  </g>
@@ -614,7 +741,7 @@ wrapperTag: div
614
741
  <div class="pf-v6-c-masthead__content">
615
742
  <div
616
743
  class="pf-v6-c-toolbar pf-m-static"
617
- id="drawer-expanded-example-masthead-toolbar"
744
+ id="drawer-expanded-example-docked-toolbar"
618
745
  >
619
746
  <div class="pf-v6-c-toolbar__content">
620
747
  <div class="pf-v6-c-toolbar__content-section">
@@ -632,7 +759,19 @@ wrapperTag: div
632
759
  aria-label="Application launcher"
633
760
  >
634
761
  <span class="pf-v6-c-menu-toggle__icon">
635
- <i class="fas fa-th" aria-hidden="true"></i>
762
+ <svg
763
+ class="pf-v6-svg"
764
+ viewBox="0 0 512 512"
765
+ fill="currentColor"
766
+ aria-hidden="true"
767
+ role="img"
768
+ width="1em"
769
+ height="1em"
770
+ >
771
+ <path
772
+ 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"
773
+ />
774
+ </svg>
636
775
  </span>
637
776
  </button>
638
777
  </div>
@@ -644,7 +783,19 @@ wrapperTag: div
644
783
  aria-label="Settings"
645
784
  >
646
785
  <span class="pf-v6-c-menu-toggle__icon">
647
- <i class="fas fa-cog" aria-hidden="true"></i>
786
+ <svg
787
+ class="pf-v6-svg"
788
+ viewBox="0 0 32 32"
789
+ fill="currentColor"
790
+ aria-hidden="true"
791
+ role="img"
792
+ width="1em"
793
+ height="1em"
794
+ >
795
+ <path
796
+ 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"
797
+ />
798
+ </svg>
648
799
  </span>
649
800
  </button>
650
801
  </div>
@@ -656,7 +807,19 @@ wrapperTag: div
656
807
  aria-label="Help"
657
808
  >
658
809
  <span class="pf-v6-c-menu-toggle__icon">
659
- <i class="fas fa-question-circle" aria-hidden="true"></i>
810
+ <svg
811
+ class="pf-v6-svg"
812
+ viewBox="0 0 512 512"
813
+ fill="currentColor"
814
+ aria-hidden="true"
815
+ role="img"
816
+ width="1em"
817
+ height="1em"
818
+ >
819
+ <path
820
+ 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"
821
+ />
822
+ </svg>
660
823
  </span>
661
824
  </button>
662
825
  </div>
@@ -670,7 +833,19 @@ wrapperTag: div
670
833
  aria-label="Actions"
671
834
  >
672
835
  <span class="pf-v6-c-menu-toggle__icon">
673
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
836
+ <svg
837
+ class="pf-v6-svg"
838
+ viewBox="0 0 32 32"
839
+ fill="currentColor"
840
+ aria-hidden="true"
841
+ role="img"
842
+ width="1em"
843
+ height="1em"
844
+ >
845
+ <path
846
+ 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"
847
+ />
848
+ </svg>
674
849
  </span>
675
850
  </button>
676
851
  </div>
@@ -681,44 +856,46 @@ wrapperTag: div
681
856
  </div>
682
857
  </header>
683
858
  <div class="pf-v6-c-page__sidebar">
684
- <div class="pf-v6-c-page__sidebar-body">
685
- <nav
686
- class="pf-v6-c-nav"
687
- id="drawer-expanded-example-primary-nav"
688
- aria-label="Global"
689
- >
690
- <ul class="pf-v6-c-nav__list" role="list">
691
- <li class="pf-v6-c-nav__item">
692
- <a href="#" class="pf-v6-c-nav__link">
693
- <span class="pf-v6-c-nav__link-text">System panel</span>
694
- </a>
695
- </li>
696
- <li class="pf-v6-c-nav__item">
697
- <a
698
- href="#"
699
- class="pf-v6-c-nav__link pf-m-current"
700
- aria-current="page"
701
- >
702
- <span class="pf-v6-c-nav__link-text">Policy</span>
703
- </a>
704
- </li>
705
- <li class="pf-v6-c-nav__item">
706
- <a href="#" class="pf-v6-c-nav__link">
707
- <span class="pf-v6-c-nav__link-text">Authentication</span>
708
- </a>
709
- </li>
710
- <li class="pf-v6-c-nav__item">
711
- <a href="#" class="pf-v6-c-nav__link">
712
- <span class="pf-v6-c-nav__link-text">Network services</span>
713
- </a>
714
- </li>
715
- <li class="pf-v6-c-nav__item">
716
- <a href="#" class="pf-v6-c-nav__link">
717
- <span class="pf-v6-c-nav__link-text">Server</span>
718
- </a>
719
- </li>
720
- </ul>
721
- </nav>
859
+ <div class="pf-v6-c-page__sidebar-main">
860
+ <div class="pf-v6-c-page__sidebar-body">
861
+ <nav
862
+ class="pf-v6-c-nav"
863
+ id="drawer-expanded-example-primary-nav"
864
+ aria-label="Global"
865
+ >
866
+ <ul class="pf-v6-c-nav__list" role="list">
867
+ <li class="pf-v6-c-nav__item">
868
+ <a href="#" class="pf-v6-c-nav__link">
869
+ <span class="pf-v6-c-nav__link-text">System panel</span>
870
+ </a>
871
+ </li>
872
+ <li class="pf-v6-c-nav__item">
873
+ <a
874
+ href="#"
875
+ class="pf-v6-c-nav__link pf-m-current"
876
+ aria-current="page"
877
+ >
878
+ <span class="pf-v6-c-nav__link-text">Policy</span>
879
+ </a>
880
+ </li>
881
+ <li class="pf-v6-c-nav__item">
882
+ <a href="#" class="pf-v6-c-nav__link">
883
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
884
+ </a>
885
+ </li>
886
+ <li class="pf-v6-c-nav__item">
887
+ <a href="#" class="pf-v6-c-nav__link">
888
+ <span class="pf-v6-c-nav__link-text">Network services</span>
889
+ </a>
890
+ </li>
891
+ <li class="pf-v6-c-nav__item">
892
+ <a href="#" class="pf-v6-c-nav__link">
893
+ <span class="pf-v6-c-nav__link-text">Server</span>
894
+ </a>
895
+ </li>
896
+ </ul>
897
+ </nav>
898
+ </div>
722
899
  </div>
723
900
  </div>
724
901
  <div class="pf-v6-c-page__drawer">
@@ -744,7 +921,19 @@ wrapperTag: div
744
921
  </li>
745
922
  <li class="pf-v6-c-breadcrumb__item">
746
923
  <span class="pf-v6-c-breadcrumb__item-divider">
747
- <i class="fas fa-angle-right" aria-hidden="true"></i>
924
+ <svg
925
+ class="pf-v6-svg"
926
+ viewBox="0 0 20 20"
927
+ fill="currentColor"
928
+ aria-hidden="true"
929
+ role="img"
930
+ width="1em"
931
+ height="1em"
932
+ >
933
+ <path
934
+ 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"
935
+ />
936
+ </svg>
748
937
  </span>
749
938
 
750
939
  <a
@@ -754,7 +943,19 @@ wrapperTag: div
754
943
  </li>
755
944
  <li class="pf-v6-c-breadcrumb__item">
756
945
  <span class="pf-v6-c-breadcrumb__item-divider">
757
- <i class="fas fa-angle-right" aria-hidden="true"></i>
946
+ <svg
947
+ class="pf-v6-svg"
948
+ viewBox="0 0 20 20"
949
+ fill="currentColor"
950
+ aria-hidden="true"
951
+ role="img"
952
+ width="1em"
953
+ height="1em"
954
+ >
955
+ <path
956
+ 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"
957
+ />
958
+ </svg>
758
959
  </span>
759
960
 
760
961
  <a
@@ -764,7 +965,19 @@ wrapperTag: div
764
965
  </li>
765
966
  <li class="pf-v6-c-breadcrumb__item">
766
967
  <span class="pf-v6-c-breadcrumb__item-divider">
767
- <i class="fas fa-angle-right" aria-hidden="true"></i>
968
+ <svg
969
+ class="pf-v6-svg"
970
+ viewBox="0 0 20 20"
971
+ fill="currentColor"
972
+ aria-hidden="true"
973
+ role="img"
974
+ width="1em"
975
+ height="1em"
976
+ >
977
+ <path
978
+ 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"
979
+ />
980
+ </svg>
768
981
  </span>
769
982
 
770
983
  <a
@@ -777,9 +990,15 @@ wrapperTag: div
777
990
  </nav>
778
991
  </div>
779
992
  </section>
780
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
993
+ <section
994
+ class="pf-v6-c-page__main-section pf-m-limit-width"
995
+ aria-labelledby="main-title"
996
+ >
781
997
  <div class="pf-v6-c-page__main-body">
782
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
998
+ <h1
999
+ class="pf-v6-c-content--h1 pf-m-page-title"
1000
+ id="main-title"
1001
+ >Main title</h1>
783
1002
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
784
1003
  </div>
785
1004
  </section>
@@ -845,7 +1064,8 @@ wrapperTag: div
845
1064
  <span class="pf-v6-c-button__text">Skip to content</span>
846
1065
  </a>
847
1066
  </div>
848
- <header class="pf-v6-c-masthead" id="drawer-expanded-bottom-example-masthead">
1067
+
1068
+ <header class="pf-v6-c-masthead" id="drawer-expanded-bottom-example-docked">
849
1069
  <div class="pf-v6-c-masthead__main">
850
1070
  <span class="pf-v6-c-masthead__toggle">
851
1071
  <button
@@ -887,7 +1107,7 @@ wrapperTag: div
887
1107
  y1="2.25860997e-13%"
888
1108
  x2="32%"
889
1109
  y2="100%"
890
- id="linearGradient-drawer-expanded-bottom-example-masthead"
1110
+ id="linearGradient-drawer-expanded-bottom-example-docked"
891
1111
  >
892
1112
  <stop stop-color="#2B9AF3" offset="0%" />
893
1113
  <stop
@@ -941,11 +1161,11 @@ wrapperTag: div
941
1161
  />
942
1162
  <path
943
1163
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
944
- fill="url(#linearGradient-drawer-expanded-bottom-example-masthead)"
1164
+ fill="url(#linearGradient-drawer-expanded-bottom-example-docked)"
945
1165
  />
946
1166
  <path
947
1167
  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"
948
- fill="url(#linearGradient-drawer-expanded-bottom-example-masthead)"
1168
+ fill="url(#linearGradient-drawer-expanded-bottom-example-docked)"
949
1169
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
950
1170
  />
951
1171
  </g>
@@ -957,7 +1177,7 @@ wrapperTag: div
957
1177
  <div class="pf-v6-c-masthead__content">
958
1178
  <div
959
1179
  class="pf-v6-c-toolbar pf-m-static"
960
- id="drawer-expanded-bottom-example-masthead-toolbar"
1180
+ id="drawer-expanded-bottom-example-docked-toolbar"
961
1181
  >
962
1182
  <div class="pf-v6-c-toolbar__content">
963
1183
  <div class="pf-v6-c-toolbar__content-section">
@@ -975,7 +1195,19 @@ wrapperTag: div
975
1195
  aria-label="Application launcher"
976
1196
  >
977
1197
  <span class="pf-v6-c-menu-toggle__icon">
978
- <i class="fas fa-th" aria-hidden="true"></i>
1198
+ <svg
1199
+ class="pf-v6-svg"
1200
+ viewBox="0 0 512 512"
1201
+ fill="currentColor"
1202
+ aria-hidden="true"
1203
+ role="img"
1204
+ width="1em"
1205
+ height="1em"
1206
+ >
1207
+ <path
1208
+ 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"
1209
+ />
1210
+ </svg>
979
1211
  </span>
980
1212
  </button>
981
1213
  </div>
@@ -987,7 +1219,19 @@ wrapperTag: div
987
1219
  aria-label="Settings"
988
1220
  >
989
1221
  <span class="pf-v6-c-menu-toggle__icon">
990
- <i class="fas fa-cog" aria-hidden="true"></i>
1222
+ <svg
1223
+ class="pf-v6-svg"
1224
+ viewBox="0 0 32 32"
1225
+ fill="currentColor"
1226
+ aria-hidden="true"
1227
+ role="img"
1228
+ width="1em"
1229
+ height="1em"
1230
+ >
1231
+ <path
1232
+ 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"
1233
+ />
1234
+ </svg>
991
1235
  </span>
992
1236
  </button>
993
1237
  </div>
@@ -999,7 +1243,19 @@ wrapperTag: div
999
1243
  aria-label="Help"
1000
1244
  >
1001
1245
  <span class="pf-v6-c-menu-toggle__icon">
1002
- <i class="fas fa-question-circle" aria-hidden="true"></i>
1246
+ <svg
1247
+ class="pf-v6-svg"
1248
+ viewBox="0 0 512 512"
1249
+ fill="currentColor"
1250
+ aria-hidden="true"
1251
+ role="img"
1252
+ width="1em"
1253
+ height="1em"
1254
+ >
1255
+ <path
1256
+ 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"
1257
+ />
1258
+ </svg>
1003
1259
  </span>
1004
1260
  </button>
1005
1261
  </div>
@@ -1013,7 +1269,19 @@ wrapperTag: div
1013
1269
  aria-label="Actions"
1014
1270
  >
1015
1271
  <span class="pf-v6-c-menu-toggle__icon">
1016
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1272
+ <svg
1273
+ class="pf-v6-svg"
1274
+ viewBox="0 0 32 32"
1275
+ fill="currentColor"
1276
+ aria-hidden="true"
1277
+ role="img"
1278
+ width="1em"
1279
+ height="1em"
1280
+ >
1281
+ <path
1282
+ 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"
1283
+ />
1284
+ </svg>
1017
1285
  </span>
1018
1286
  </button>
1019
1287
  </div>
@@ -1024,44 +1292,46 @@ wrapperTag: div
1024
1292
  </div>
1025
1293
  </header>
1026
1294
  <div class="pf-v6-c-page__sidebar">
1027
- <div class="pf-v6-c-page__sidebar-body">
1028
- <nav
1029
- class="pf-v6-c-nav"
1030
- id="drawer-expanded-bottom-example-primary-nav"
1031
- aria-label="Global"
1032
- >
1033
- <ul class="pf-v6-c-nav__list" role="list">
1034
- <li class="pf-v6-c-nav__item">
1035
- <a href="#" class="pf-v6-c-nav__link">
1036
- <span class="pf-v6-c-nav__link-text">System panel</span>
1037
- </a>
1038
- </li>
1039
- <li class="pf-v6-c-nav__item">
1040
- <a
1041
- href="#"
1042
- class="pf-v6-c-nav__link pf-m-current"
1043
- aria-current="page"
1044
- >
1045
- <span class="pf-v6-c-nav__link-text">Policy</span>
1046
- </a>
1047
- </li>
1048
- <li class="pf-v6-c-nav__item">
1049
- <a href="#" class="pf-v6-c-nav__link">
1050
- <span class="pf-v6-c-nav__link-text">Authentication</span>
1051
- </a>
1052
- </li>
1053
- <li class="pf-v6-c-nav__item">
1054
- <a href="#" class="pf-v6-c-nav__link">
1055
- <span class="pf-v6-c-nav__link-text">Network services</span>
1056
- </a>
1057
- </li>
1058
- <li class="pf-v6-c-nav__item">
1059
- <a href="#" class="pf-v6-c-nav__link">
1060
- <span class="pf-v6-c-nav__link-text">Server</span>
1061
- </a>
1062
- </li>
1063
- </ul>
1064
- </nav>
1295
+ <div class="pf-v6-c-page__sidebar-main">
1296
+ <div class="pf-v6-c-page__sidebar-body">
1297
+ <nav
1298
+ class="pf-v6-c-nav"
1299
+ id="drawer-expanded-bottom-example-primary-nav"
1300
+ aria-label="Global"
1301
+ >
1302
+ <ul class="pf-v6-c-nav__list" role="list">
1303
+ <li class="pf-v6-c-nav__item">
1304
+ <a href="#" class="pf-v6-c-nav__link">
1305
+ <span class="pf-v6-c-nav__link-text">System panel</span>
1306
+ </a>
1307
+ </li>
1308
+ <li class="pf-v6-c-nav__item">
1309
+ <a
1310
+ href="#"
1311
+ class="pf-v6-c-nav__link pf-m-current"
1312
+ aria-current="page"
1313
+ >
1314
+ <span class="pf-v6-c-nav__link-text">Policy</span>
1315
+ </a>
1316
+ </li>
1317
+ <li class="pf-v6-c-nav__item">
1318
+ <a href="#" class="pf-v6-c-nav__link">
1319
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
1320
+ </a>
1321
+ </li>
1322
+ <li class="pf-v6-c-nav__item">
1323
+ <a href="#" class="pf-v6-c-nav__link">
1324
+ <span class="pf-v6-c-nav__link-text">Network services</span>
1325
+ </a>
1326
+ </li>
1327
+ <li class="pf-v6-c-nav__item">
1328
+ <a href="#" class="pf-v6-c-nav__link">
1329
+ <span class="pf-v6-c-nav__link-text">Server</span>
1330
+ </a>
1331
+ </li>
1332
+ </ul>
1333
+ </nav>
1334
+ </div>
1065
1335
  </div>
1066
1336
  </div>
1067
1337
  <div class="pf-v6-c-page__drawer">
@@ -1087,7 +1357,19 @@ wrapperTag: div
1087
1357
  </li>
1088
1358
  <li class="pf-v6-c-breadcrumb__item">
1089
1359
  <span class="pf-v6-c-breadcrumb__item-divider">
1090
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1360
+ <svg
1361
+ class="pf-v6-svg"
1362
+ viewBox="0 0 20 20"
1363
+ fill="currentColor"
1364
+ aria-hidden="true"
1365
+ role="img"
1366
+ width="1em"
1367
+ height="1em"
1368
+ >
1369
+ <path
1370
+ 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"
1371
+ />
1372
+ </svg>
1091
1373
  </span>
1092
1374
 
1093
1375
  <a
@@ -1097,7 +1379,19 @@ wrapperTag: div
1097
1379
  </li>
1098
1380
  <li class="pf-v6-c-breadcrumb__item">
1099
1381
  <span class="pf-v6-c-breadcrumb__item-divider">
1100
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1382
+ <svg
1383
+ class="pf-v6-svg"
1384
+ viewBox="0 0 20 20"
1385
+ fill="currentColor"
1386
+ aria-hidden="true"
1387
+ role="img"
1388
+ width="1em"
1389
+ height="1em"
1390
+ >
1391
+ <path
1392
+ 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"
1393
+ />
1394
+ </svg>
1101
1395
  </span>
1102
1396
 
1103
1397
  <a
@@ -1107,7 +1401,19 @@ wrapperTag: div
1107
1401
  </li>
1108
1402
  <li class="pf-v6-c-breadcrumb__item">
1109
1403
  <span class="pf-v6-c-breadcrumb__item-divider">
1110
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1404
+ <svg
1405
+ class="pf-v6-svg"
1406
+ viewBox="0 0 20 20"
1407
+ fill="currentColor"
1408
+ aria-hidden="true"
1409
+ role="img"
1410
+ width="1em"
1411
+ height="1em"
1412
+ >
1413
+ <path
1414
+ 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"
1415
+ />
1416
+ </svg>
1111
1417
  </span>
1112
1418
 
1113
1419
  <a
@@ -1120,9 +1426,15 @@ wrapperTag: div
1120
1426
  </nav>
1121
1427
  </div>
1122
1428
  </section>
1123
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
1429
+ <section
1430
+ class="pf-v6-c-page__main-section pf-m-limit-width"
1431
+ aria-labelledby="main-title"
1432
+ >
1124
1433
  <div class="pf-v6-c-page__main-body">
1125
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
1434
+ <h1
1435
+ class="pf-v6-c-content--h1 pf-m-page-title"
1436
+ id="main-title"
1437
+ >Main title</h1>
1126
1438
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
1127
1439
  </div>
1128
1440
  </section>
@@ -1188,7 +1500,8 @@ wrapperTag: div
1188
1500
  <span class="pf-v6-c-button__text">Skip to content</span>
1189
1501
  </a>
1190
1502
  </div>
1191
- <header class="pf-v6-c-masthead" id="drawer-jump-links-masthead">
1503
+
1504
+ <header class="pf-v6-c-masthead" id="drawer-jump-links-docked">
1192
1505
  <div class="pf-v6-c-masthead__main">
1193
1506
  <span class="pf-v6-c-masthead__toggle">
1194
1507
  <button
@@ -1230,7 +1543,7 @@ wrapperTag: div
1230
1543
  y1="2.25860997e-13%"
1231
1544
  x2="32%"
1232
1545
  y2="100%"
1233
- id="linearGradient-drawer-jump-links-masthead"
1546
+ id="linearGradient-drawer-jump-links-docked"
1234
1547
  >
1235
1548
  <stop stop-color="#2B9AF3" offset="0%" />
1236
1549
  <stop
@@ -1284,11 +1597,11 @@ wrapperTag: div
1284
1597
  />
1285
1598
  <path
1286
1599
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
1287
- fill="url(#linearGradient-drawer-jump-links-masthead)"
1600
+ fill="url(#linearGradient-drawer-jump-links-docked)"
1288
1601
  />
1289
1602
  <path
1290
1603
  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"
1291
- fill="url(#linearGradient-drawer-jump-links-masthead)"
1604
+ fill="url(#linearGradient-drawer-jump-links-docked)"
1292
1605
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
1293
1606
  />
1294
1607
  </g>
@@ -1300,7 +1613,7 @@ wrapperTag: div
1300
1613
  <div class="pf-v6-c-masthead__content">
1301
1614
  <div
1302
1615
  class="pf-v6-c-toolbar pf-m-static"
1303
- id="drawer-jump-links-masthead-toolbar"
1616
+ id="drawer-jump-links-docked-toolbar"
1304
1617
  >
1305
1618
  <div class="pf-v6-c-toolbar__content">
1306
1619
  <div class="pf-v6-c-toolbar__content-section">
@@ -1318,7 +1631,19 @@ wrapperTag: div
1318
1631
  aria-label="Application launcher"
1319
1632
  >
1320
1633
  <span class="pf-v6-c-menu-toggle__icon">
1321
- <i class="fas fa-th" aria-hidden="true"></i>
1634
+ <svg
1635
+ class="pf-v6-svg"
1636
+ viewBox="0 0 512 512"
1637
+ fill="currentColor"
1638
+ aria-hidden="true"
1639
+ role="img"
1640
+ width="1em"
1641
+ height="1em"
1642
+ >
1643
+ <path
1644
+ 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"
1645
+ />
1646
+ </svg>
1322
1647
  </span>
1323
1648
  </button>
1324
1649
  </div>
@@ -1330,7 +1655,19 @@ wrapperTag: div
1330
1655
  aria-label="Settings"
1331
1656
  >
1332
1657
  <span class="pf-v6-c-menu-toggle__icon">
1333
- <i class="fas fa-cog" aria-hidden="true"></i>
1658
+ <svg
1659
+ class="pf-v6-svg"
1660
+ viewBox="0 0 32 32"
1661
+ fill="currentColor"
1662
+ aria-hidden="true"
1663
+ role="img"
1664
+ width="1em"
1665
+ height="1em"
1666
+ >
1667
+ <path
1668
+ 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"
1669
+ />
1670
+ </svg>
1334
1671
  </span>
1335
1672
  </button>
1336
1673
  </div>
@@ -1342,7 +1679,19 @@ wrapperTag: div
1342
1679
  aria-label="Help"
1343
1680
  >
1344
1681
  <span class="pf-v6-c-menu-toggle__icon">
1345
- <i class="fas fa-question-circle" aria-hidden="true"></i>
1682
+ <svg
1683
+ class="pf-v6-svg"
1684
+ viewBox="0 0 512 512"
1685
+ fill="currentColor"
1686
+ aria-hidden="true"
1687
+ role="img"
1688
+ width="1em"
1689
+ height="1em"
1690
+ >
1691
+ <path
1692
+ 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"
1693
+ />
1694
+ </svg>
1346
1695
  </span>
1347
1696
  </button>
1348
1697
  </div>
@@ -1356,7 +1705,19 @@ wrapperTag: div
1356
1705
  aria-label="Actions"
1357
1706
  >
1358
1707
  <span class="pf-v6-c-menu-toggle__icon">
1359
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1708
+ <svg
1709
+ class="pf-v6-svg"
1710
+ viewBox="0 0 32 32"
1711
+ fill="currentColor"
1712
+ aria-hidden="true"
1713
+ role="img"
1714
+ width="1em"
1715
+ height="1em"
1716
+ >
1717
+ <path
1718
+ 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"
1719
+ />
1720
+ </svg>
1360
1721
  </span>
1361
1722
  </button>
1362
1723
  </div>
@@ -1367,44 +1728,46 @@ wrapperTag: div
1367
1728
  </div>
1368
1729
  </header>
1369
1730
  <div class="pf-v6-c-page__sidebar">
1370
- <div class="pf-v6-c-page__sidebar-body">
1371
- <nav
1372
- class="pf-v6-c-nav"
1373
- id="drawer-jump-links-primary-nav"
1374
- aria-label="Global"
1375
- >
1376
- <ul class="pf-v6-c-nav__list" role="list">
1377
- <li class="pf-v6-c-nav__item">
1378
- <a href="#" class="pf-v6-c-nav__link">
1379
- <span class="pf-v6-c-nav__link-text">System panel</span>
1380
- </a>
1381
- </li>
1382
- <li class="pf-v6-c-nav__item">
1383
- <a
1384
- href="#"
1385
- class="pf-v6-c-nav__link pf-m-current"
1386
- aria-current="page"
1387
- >
1388
- <span class="pf-v6-c-nav__link-text">Policy</span>
1389
- </a>
1390
- </li>
1391
- <li class="pf-v6-c-nav__item">
1392
- <a href="#" class="pf-v6-c-nav__link">
1393
- <span class="pf-v6-c-nav__link-text">Authentication</span>
1394
- </a>
1395
- </li>
1396
- <li class="pf-v6-c-nav__item">
1397
- <a href="#" class="pf-v6-c-nav__link">
1398
- <span class="pf-v6-c-nav__link-text">Network services</span>
1399
- </a>
1400
- </li>
1401
- <li class="pf-v6-c-nav__item">
1402
- <a href="#" class="pf-v6-c-nav__link">
1403
- <span class="pf-v6-c-nav__link-text">Server</span>
1404
- </a>
1405
- </li>
1406
- </ul>
1407
- </nav>
1731
+ <div class="pf-v6-c-page__sidebar-main">
1732
+ <div class="pf-v6-c-page__sidebar-body">
1733
+ <nav
1734
+ class="pf-v6-c-nav"
1735
+ id="drawer-jump-links-primary-nav"
1736
+ aria-label="Global"
1737
+ >
1738
+ <ul class="pf-v6-c-nav__list" role="list">
1739
+ <li class="pf-v6-c-nav__item">
1740
+ <a href="#" class="pf-v6-c-nav__link">
1741
+ <span class="pf-v6-c-nav__link-text">System panel</span>
1742
+ </a>
1743
+ </li>
1744
+ <li class="pf-v6-c-nav__item">
1745
+ <a
1746
+ href="#"
1747
+ class="pf-v6-c-nav__link pf-m-current"
1748
+ aria-current="page"
1749
+ >
1750
+ <span class="pf-v6-c-nav__link-text">Policy</span>
1751
+ </a>
1752
+ </li>
1753
+ <li class="pf-v6-c-nav__item">
1754
+ <a href="#" class="pf-v6-c-nav__link">
1755
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
1756
+ </a>
1757
+ </li>
1758
+ <li class="pf-v6-c-nav__item">
1759
+ <a href="#" class="pf-v6-c-nav__link">
1760
+ <span class="pf-v6-c-nav__link-text">Network services</span>
1761
+ </a>
1762
+ </li>
1763
+ <li class="pf-v6-c-nav__item">
1764
+ <a href="#" class="pf-v6-c-nav__link">
1765
+ <span class="pf-v6-c-nav__link-text">Server</span>
1766
+ </a>
1767
+ </li>
1768
+ </ul>
1769
+ </nav>
1770
+ </div>
1408
1771
  </div>
1409
1772
  </div>
1410
1773
  <div class="pf-v6-c-page__main-container" tabindex="-1">
@@ -1437,10 +1800,19 @@ wrapperTag: div
1437
1800
  >
1438
1801
  <span class="pf-v6-c-button__icon pf-m-start">
1439
1802
  <span class="pf-v6-c-jump-links__toggle-icon">
1440
- <i
1441
- class="fas fa-angle-right"
1803
+ <svg
1804
+ class="pf-v6-svg"
1805
+ viewBox="0 0 20 20"
1806
+ fill="currentColor"
1442
1807
  aria-hidden="true"
1443
- ></i>
1808
+ role="img"
1809
+ width="1em"
1810
+ height="1em"
1811
+ >
1812
+ <path
1813
+ d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
1814
+ />
1815
+ </svg>
1444
1816
  </span>
1445
1817
  </span>
1446
1818
  <span
@@ -1579,7 +1951,19 @@ wrapperTag: div
1579
1951
  aria-label="Close drawer panel"
1580
1952
  >
1581
1953
  <span class="pf-v6-c-button__icon">
1582
- <i class="fas fa-times" aria-hidden="true"></i>
1954
+ <svg
1955
+ class="pf-v6-svg"
1956
+ viewBox="0 0 20 20"
1957
+ fill="currentColor"
1958
+ aria-hidden="true"
1959
+ role="img"
1960
+ width="1em"
1961
+ height="1em"
1962
+ >
1963
+ <path
1964
+ 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"
1965
+ />
1966
+ </svg>
1583
1967
  </span>
1584
1968
  </button>
1585
1969
  </div>
@@ -1610,7 +1994,8 @@ wrapperTag: div
1610
1994
  <span class="pf-v6-c-button__text">Skip to content</span>
1611
1995
  </a>
1612
1996
  </div>
1613
- <header class="pf-v6-c-masthead" id="drawer-expanded-jump-links-masthead">
1997
+
1998
+ <header class="pf-v6-c-masthead" id="drawer-expanded-jump-links-docked">
1614
1999
  <div class="pf-v6-c-masthead__main">
1615
2000
  <span class="pf-v6-c-masthead__toggle">
1616
2001
  <button
@@ -1652,7 +2037,7 @@ wrapperTag: div
1652
2037
  y1="2.25860997e-13%"
1653
2038
  x2="32%"
1654
2039
  y2="100%"
1655
- id="linearGradient-drawer-expanded-jump-links-masthead"
2040
+ id="linearGradient-drawer-expanded-jump-links-docked"
1656
2041
  >
1657
2042
  <stop stop-color="#2B9AF3" offset="0%" />
1658
2043
  <stop
@@ -1706,11 +2091,11 @@ wrapperTag: div
1706
2091
  />
1707
2092
  <path
1708
2093
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
1709
- fill="url(#linearGradient-drawer-expanded-jump-links-masthead)"
2094
+ fill="url(#linearGradient-drawer-expanded-jump-links-docked)"
1710
2095
  />
1711
2096
  <path
1712
2097
  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"
1713
- fill="url(#linearGradient-drawer-expanded-jump-links-masthead)"
2098
+ fill="url(#linearGradient-drawer-expanded-jump-links-docked)"
1714
2099
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
1715
2100
  />
1716
2101
  </g>
@@ -1722,7 +2107,7 @@ wrapperTag: div
1722
2107
  <div class="pf-v6-c-masthead__content">
1723
2108
  <div
1724
2109
  class="pf-v6-c-toolbar pf-m-static"
1725
- id="drawer-expanded-jump-links-masthead-toolbar"
2110
+ id="drawer-expanded-jump-links-docked-toolbar"
1726
2111
  >
1727
2112
  <div class="pf-v6-c-toolbar__content">
1728
2113
  <div class="pf-v6-c-toolbar__content-section">
@@ -1740,7 +2125,19 @@ wrapperTag: div
1740
2125
  aria-label="Application launcher"
1741
2126
  >
1742
2127
  <span class="pf-v6-c-menu-toggle__icon">
1743
- <i class="fas fa-th" aria-hidden="true"></i>
2128
+ <svg
2129
+ class="pf-v6-svg"
2130
+ viewBox="0 0 512 512"
2131
+ fill="currentColor"
2132
+ aria-hidden="true"
2133
+ role="img"
2134
+ width="1em"
2135
+ height="1em"
2136
+ >
2137
+ <path
2138
+ 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"
2139
+ />
2140
+ </svg>
1744
2141
  </span>
1745
2142
  </button>
1746
2143
  </div>
@@ -1752,7 +2149,19 @@ wrapperTag: div
1752
2149
  aria-label="Settings"
1753
2150
  >
1754
2151
  <span class="pf-v6-c-menu-toggle__icon">
1755
- <i class="fas fa-cog" aria-hidden="true"></i>
2152
+ <svg
2153
+ class="pf-v6-svg"
2154
+ viewBox="0 0 32 32"
2155
+ fill="currentColor"
2156
+ aria-hidden="true"
2157
+ role="img"
2158
+ width="1em"
2159
+ height="1em"
2160
+ >
2161
+ <path
2162
+ 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"
2163
+ />
2164
+ </svg>
1756
2165
  </span>
1757
2166
  </button>
1758
2167
  </div>
@@ -1764,7 +2173,19 @@ wrapperTag: div
1764
2173
  aria-label="Help"
1765
2174
  >
1766
2175
  <span class="pf-v6-c-menu-toggle__icon">
1767
- <i class="fas fa-question-circle" aria-hidden="true"></i>
2176
+ <svg
2177
+ class="pf-v6-svg"
2178
+ viewBox="0 0 512 512"
2179
+ fill="currentColor"
2180
+ aria-hidden="true"
2181
+ role="img"
2182
+ width="1em"
2183
+ height="1em"
2184
+ >
2185
+ <path
2186
+ 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"
2187
+ />
2188
+ </svg>
1768
2189
  </span>
1769
2190
  </button>
1770
2191
  </div>
@@ -1778,7 +2199,19 @@ wrapperTag: div
1778
2199
  aria-label="Actions"
1779
2200
  >
1780
2201
  <span class="pf-v6-c-menu-toggle__icon">
1781
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
2202
+ <svg
2203
+ class="pf-v6-svg"
2204
+ viewBox="0 0 32 32"
2205
+ fill="currentColor"
2206
+ aria-hidden="true"
2207
+ role="img"
2208
+ width="1em"
2209
+ height="1em"
2210
+ >
2211
+ <path
2212
+ 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"
2213
+ />
2214
+ </svg>
1782
2215
  </span>
1783
2216
  </button>
1784
2217
  </div>
@@ -1789,44 +2222,46 @@ wrapperTag: div
1789
2222
  </div>
1790
2223
  </header>
1791
2224
  <div class="pf-v6-c-page__sidebar">
1792
- <div class="pf-v6-c-page__sidebar-body">
1793
- <nav
1794
- class="pf-v6-c-nav"
1795
- id="drawer-expanded-jump-links-primary-nav"
1796
- aria-label="Global"
1797
- >
1798
- <ul class="pf-v6-c-nav__list" role="list">
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">System panel</span>
1802
- </a>
1803
- </li>
1804
- <li class="pf-v6-c-nav__item">
1805
- <a
1806
- href="#"
1807
- class="pf-v6-c-nav__link pf-m-current"
1808
- aria-current="page"
1809
- >
1810
- <span class="pf-v6-c-nav__link-text">Policy</span>
1811
- </a>
1812
- </li>
1813
- <li class="pf-v6-c-nav__item">
1814
- <a href="#" class="pf-v6-c-nav__link">
1815
- <span class="pf-v6-c-nav__link-text">Authentication</span>
1816
- </a>
1817
- </li>
1818
- <li class="pf-v6-c-nav__item">
1819
- <a href="#" class="pf-v6-c-nav__link">
1820
- <span class="pf-v6-c-nav__link-text">Network services</span>
1821
- </a>
1822
- </li>
1823
- <li class="pf-v6-c-nav__item">
1824
- <a href="#" class="pf-v6-c-nav__link">
1825
- <span class="pf-v6-c-nav__link-text">Server</span>
1826
- </a>
1827
- </li>
1828
- </ul>
1829
- </nav>
2225
+ <div class="pf-v6-c-page__sidebar-main">
2226
+ <div class="pf-v6-c-page__sidebar-body">
2227
+ <nav
2228
+ class="pf-v6-c-nav"
2229
+ id="drawer-expanded-jump-links-primary-nav"
2230
+ aria-label="Global"
2231
+ >
2232
+ <ul class="pf-v6-c-nav__list" role="list">
2233
+ <li class="pf-v6-c-nav__item">
2234
+ <a href="#" class="pf-v6-c-nav__link">
2235
+ <span class="pf-v6-c-nav__link-text">System panel</span>
2236
+ </a>
2237
+ </li>
2238
+ <li class="pf-v6-c-nav__item">
2239
+ <a
2240
+ href="#"
2241
+ class="pf-v6-c-nav__link pf-m-current"
2242
+ aria-current="page"
2243
+ >
2244
+ <span class="pf-v6-c-nav__link-text">Policy</span>
2245
+ </a>
2246
+ </li>
2247
+ <li class="pf-v6-c-nav__item">
2248
+ <a href="#" class="pf-v6-c-nav__link">
2249
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
2250
+ </a>
2251
+ </li>
2252
+ <li class="pf-v6-c-nav__item">
2253
+ <a href="#" class="pf-v6-c-nav__link">
2254
+ <span class="pf-v6-c-nav__link-text">Network services</span>
2255
+ </a>
2256
+ </li>
2257
+ <li class="pf-v6-c-nav__item">
2258
+ <a href="#" class="pf-v6-c-nav__link">
2259
+ <span class="pf-v6-c-nav__link-text">Server</span>
2260
+ </a>
2261
+ </li>
2262
+ </ul>
2263
+ </nav>
2264
+ </div>
1830
2265
  </div>
1831
2266
  </div>
1832
2267
  <div class="pf-v6-c-page__main-container" tabindex="-1">
@@ -1859,10 +2294,19 @@ wrapperTag: div
1859
2294
  >
1860
2295
  <span class="pf-v6-c-button__icon pf-m-start">
1861
2296
  <span class="pf-v6-c-jump-links__toggle-icon">
1862
- <i
1863
- class="fas fa-angle-right"
2297
+ <svg
2298
+ class="pf-v6-svg"
2299
+ viewBox="0 0 20 20"
2300
+ fill="currentColor"
1864
2301
  aria-hidden="true"
1865
- ></i>
2302
+ role="img"
2303
+ width="1em"
2304
+ height="1em"
2305
+ >
2306
+ <path
2307
+ d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
2308
+ />
2309
+ </svg>
1866
2310
  </span>
1867
2311
  </span>
1868
2312
  <span
@@ -2001,7 +2445,19 @@ wrapperTag: div
2001
2445
  aria-label="Close drawer panel"
2002
2446
  >
2003
2447
  <span class="pf-v6-c-button__icon">
2004
- <i class="fas fa-times" aria-hidden="true"></i>
2448
+ <svg
2449
+ class="pf-v6-svg"
2450
+ viewBox="0 0 20 20"
2451
+ fill="currentColor"
2452
+ aria-hidden="true"
2453
+ role="img"
2454
+ width="1em"
2455
+ height="1em"
2456
+ >
2457
+ <path
2458
+ 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"
2459
+ />
2460
+ </svg>
2005
2461
  </span>
2006
2462
  </button>
2007
2463
  </div>