@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
@@ -15,7 +15,8 @@ section: components
15
15
  <span class="pf-v6-c-button__text">Skip to content</span>
16
16
  </a>
17
17
  </div>
18
- <header class="pf-v6-c-masthead" id="modal-basic-example-masthead">
18
+
19
+ <header class="pf-v6-c-masthead" id="modal-basic-example-docked">
19
20
  <div class="pf-v6-c-masthead__main">
20
21
  <span class="pf-v6-c-masthead__toggle">
21
22
  <button
@@ -57,7 +58,7 @@ section: components
57
58
  y1="2.25860997e-13%"
58
59
  x2="32%"
59
60
  y2="100%"
60
- id="linearGradient-modal-basic-example-masthead"
61
+ id="linearGradient-modal-basic-example-docked"
61
62
  >
62
63
  <stop stop-color="#2B9AF3" offset="0%" />
63
64
  <stop
@@ -111,11 +112,11 @@ section: components
111
112
  />
112
113
  <path
113
114
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
114
- fill="url(#linearGradient-modal-basic-example-masthead)"
115
+ fill="url(#linearGradient-modal-basic-example-docked)"
115
116
  />
116
117
  <path
117
118
  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"
118
- fill="url(#linearGradient-modal-basic-example-masthead)"
119
+ fill="url(#linearGradient-modal-basic-example-docked)"
119
120
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
120
121
  />
121
122
  </g>
@@ -127,7 +128,7 @@ section: components
127
128
  <div class="pf-v6-c-masthead__content">
128
129
  <div
129
130
  class="pf-v6-c-toolbar pf-m-static"
130
- id="modal-basic-example-masthead-toolbar"
131
+ id="modal-basic-example-docked-toolbar"
131
132
  >
132
133
  <div class="pf-v6-c-toolbar__content">
133
134
  <div class="pf-v6-c-toolbar__content-section">
@@ -145,7 +146,19 @@ section: components
145
146
  aria-label="Application launcher"
146
147
  >
147
148
  <span class="pf-v6-c-menu-toggle__icon">
148
- <i class="fas fa-th" aria-hidden="true"></i>
149
+ <svg
150
+ class="pf-v6-svg"
151
+ viewBox="0 0 512 512"
152
+ fill="currentColor"
153
+ aria-hidden="true"
154
+ role="img"
155
+ width="1em"
156
+ height="1em"
157
+ >
158
+ <path
159
+ 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"
160
+ />
161
+ </svg>
149
162
  </span>
150
163
  </button>
151
164
  </div>
@@ -157,7 +170,19 @@ section: components
157
170
  aria-label="Settings"
158
171
  >
159
172
  <span class="pf-v6-c-menu-toggle__icon">
160
- <i class="fas fa-cog" aria-hidden="true"></i>
173
+ <svg
174
+ class="pf-v6-svg"
175
+ viewBox="0 0 32 32"
176
+ fill="currentColor"
177
+ aria-hidden="true"
178
+ role="img"
179
+ width="1em"
180
+ height="1em"
181
+ >
182
+ <path
183
+ 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"
184
+ />
185
+ </svg>
161
186
  </span>
162
187
  </button>
163
188
  </div>
@@ -169,7 +194,19 @@ section: components
169
194
  aria-label="Help"
170
195
  >
171
196
  <span class="pf-v6-c-menu-toggle__icon">
172
- <i class="fas fa-question-circle" aria-hidden="true"></i>
197
+ <svg
198
+ class="pf-v6-svg"
199
+ viewBox="0 0 512 512"
200
+ fill="currentColor"
201
+ aria-hidden="true"
202
+ role="img"
203
+ width="1em"
204
+ height="1em"
205
+ >
206
+ <path
207
+ 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"
208
+ />
209
+ </svg>
173
210
  </span>
174
211
  </button>
175
212
  </div>
@@ -183,7 +220,19 @@ section: components
183
220
  aria-label="Actions"
184
221
  >
185
222
  <span class="pf-v6-c-menu-toggle__icon">
186
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
223
+ <svg
224
+ class="pf-v6-svg"
225
+ viewBox="0 0 32 32"
226
+ fill="currentColor"
227
+ aria-hidden="true"
228
+ role="img"
229
+ width="1em"
230
+ height="1em"
231
+ >
232
+ <path
233
+ 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"
234
+ />
235
+ </svg>
187
236
  </span>
188
237
  </button>
189
238
  </div>
@@ -194,44 +243,46 @@ section: components
194
243
  </div>
195
244
  </header>
196
245
  <div class="pf-v6-c-page__sidebar">
197
- <div class="pf-v6-c-page__sidebar-body">
198
- <nav
199
- class="pf-v6-c-nav"
200
- id="modal-basic-example-primary-nav"
201
- aria-label="Global"
202
- >
203
- <ul class="pf-v6-c-nav__list" role="list">
204
- <li class="pf-v6-c-nav__item">
205
- <a href="#" class="pf-v6-c-nav__link">
206
- <span class="pf-v6-c-nav__link-text">System panel</span>
207
- </a>
208
- </li>
209
- <li class="pf-v6-c-nav__item">
210
- <a
211
- href="#"
212
- class="pf-v6-c-nav__link pf-m-current"
213
- aria-current="page"
214
- >
215
- <span class="pf-v6-c-nav__link-text">Policy</span>
216
- </a>
217
- </li>
218
- <li class="pf-v6-c-nav__item">
219
- <a href="#" class="pf-v6-c-nav__link">
220
- <span class="pf-v6-c-nav__link-text">Authentication</span>
221
- </a>
222
- </li>
223
- <li class="pf-v6-c-nav__item">
224
- <a href="#" class="pf-v6-c-nav__link">
225
- <span class="pf-v6-c-nav__link-text">Network services</span>
226
- </a>
227
- </li>
228
- <li class="pf-v6-c-nav__item">
229
- <a href="#" class="pf-v6-c-nav__link">
230
- <span class="pf-v6-c-nav__link-text">Server</span>
231
- </a>
232
- </li>
233
- </ul>
234
- </nav>
246
+ <div class="pf-v6-c-page__sidebar-main">
247
+ <div class="pf-v6-c-page__sidebar-body">
248
+ <nav
249
+ class="pf-v6-c-nav"
250
+ id="modal-basic-example-primary-nav"
251
+ aria-label="Global"
252
+ >
253
+ <ul class="pf-v6-c-nav__list" role="list">
254
+ <li class="pf-v6-c-nav__item">
255
+ <a href="#" class="pf-v6-c-nav__link">
256
+ <span class="pf-v6-c-nav__link-text">System panel</span>
257
+ </a>
258
+ </li>
259
+ <li class="pf-v6-c-nav__item">
260
+ <a
261
+ href="#"
262
+ class="pf-v6-c-nav__link pf-m-current"
263
+ aria-current="page"
264
+ >
265
+ <span class="pf-v6-c-nav__link-text">Policy</span>
266
+ </a>
267
+ </li>
268
+ <li class="pf-v6-c-nav__item">
269
+ <a href="#" class="pf-v6-c-nav__link">
270
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
271
+ </a>
272
+ </li>
273
+ <li class="pf-v6-c-nav__item">
274
+ <a href="#" class="pf-v6-c-nav__link">
275
+ <span class="pf-v6-c-nav__link-text">Network services</span>
276
+ </a>
277
+ </li>
278
+ <li class="pf-v6-c-nav__item">
279
+ <a href="#" class="pf-v6-c-nav__link">
280
+ <span class="pf-v6-c-nav__link-text">Server</span>
281
+ </a>
282
+ </li>
283
+ </ul>
284
+ </nav>
285
+ </div>
235
286
  </div>
236
287
  </div>
237
288
  <div class="pf-v6-c-page__main-container" tabindex="-1">
@@ -249,21 +300,57 @@ section: components
249
300
  </li>
250
301
  <li class="pf-v6-c-breadcrumb__item">
251
302
  <span class="pf-v6-c-breadcrumb__item-divider">
252
- <i class="fas fa-angle-right" aria-hidden="true"></i>
303
+ <svg
304
+ class="pf-v6-svg"
305
+ viewBox="0 0 20 20"
306
+ fill="currentColor"
307
+ aria-hidden="true"
308
+ role="img"
309
+ width="1em"
310
+ height="1em"
311
+ >
312
+ <path
313
+ 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"
314
+ />
315
+ </svg>
253
316
  </span>
254
317
 
255
318
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
256
319
  </li>
257
320
  <li class="pf-v6-c-breadcrumb__item">
258
321
  <span class="pf-v6-c-breadcrumb__item-divider">
259
- <i class="fas fa-angle-right" aria-hidden="true"></i>
322
+ <svg
323
+ class="pf-v6-svg"
324
+ viewBox="0 0 20 20"
325
+ fill="currentColor"
326
+ aria-hidden="true"
327
+ role="img"
328
+ width="1em"
329
+ height="1em"
330
+ >
331
+ <path
332
+ 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"
333
+ />
334
+ </svg>
260
335
  </span>
261
336
 
262
337
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
263
338
  </li>
264
339
  <li class="pf-v6-c-breadcrumb__item">
265
340
  <span class="pf-v6-c-breadcrumb__item-divider">
266
- <i class="fas fa-angle-right" aria-hidden="true"></i>
341
+ <svg
342
+ class="pf-v6-svg"
343
+ viewBox="0 0 20 20"
344
+ fill="currentColor"
345
+ aria-hidden="true"
346
+ role="img"
347
+ width="1em"
348
+ height="1em"
349
+ >
350
+ <path
351
+ 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"
352
+ />
353
+ </svg>
267
354
  </span>
268
355
 
269
356
  <a
@@ -276,9 +363,15 @@ section: components
276
363
  </nav>
277
364
  </div>
278
365
  </section>
279
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
366
+ <section
367
+ class="pf-v6-c-page__main-section pf-m-limit-width"
368
+ aria-labelledby="main-title"
369
+ >
280
370
  <div class="pf-v6-c-page__main-body">
281
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
371
+ <h1
372
+ class="pf-v6-c-content--h1 pf-m-page-title"
373
+ id="main-title"
374
+ >Main title</h1>
282
375
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
283
376
  </div>
284
377
  </section>
@@ -337,7 +430,19 @@ section: components
337
430
  aria-label="Close"
338
431
  >
339
432
  <span class="pf-v6-c-button__icon">
340
- <i class="fas fa-times" aria-hidden="true"></i>
433
+ <svg
434
+ class="pf-v6-svg"
435
+ viewBox="0 0 20 20"
436
+ fill="currentColor"
437
+ aria-hidden="true"
438
+ role="img"
439
+ width="1em"
440
+ height="1em"
441
+ >
442
+ <path
443
+ 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"
444
+ />
445
+ </svg>
341
446
  </span>
342
447
  </button>
343
448
  </div>
@@ -382,10 +487,8 @@ section: components
382
487
  <span class="pf-v6-c-button__text">Skip to content</span>
383
488
  </a>
384
489
  </div>
385
- <header
386
- class="pf-v6-c-masthead"
387
- id="modal-scrollable-content-example-masthead"
388
- >
490
+
491
+ <header class="pf-v6-c-masthead" id="modal-scrollable-content-example-docked">
389
492
  <div class="pf-v6-c-masthead__main">
390
493
  <span class="pf-v6-c-masthead__toggle">
391
494
  <button
@@ -427,7 +530,7 @@ section: components
427
530
  y1="2.25860997e-13%"
428
531
  x2="32%"
429
532
  y2="100%"
430
- id="linearGradient-modal-scrollable-content-example-masthead"
533
+ id="linearGradient-modal-scrollable-content-example-docked"
431
534
  >
432
535
  <stop stop-color="#2B9AF3" offset="0%" />
433
536
  <stop
@@ -481,11 +584,11 @@ section: components
481
584
  />
482
585
  <path
483
586
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
484
- fill="url(#linearGradient-modal-scrollable-content-example-masthead)"
587
+ fill="url(#linearGradient-modal-scrollable-content-example-docked)"
485
588
  />
486
589
  <path
487
590
  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"
488
- fill="url(#linearGradient-modal-scrollable-content-example-masthead)"
591
+ fill="url(#linearGradient-modal-scrollable-content-example-docked)"
489
592
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
490
593
  />
491
594
  </g>
@@ -497,7 +600,7 @@ section: components
497
600
  <div class="pf-v6-c-masthead__content">
498
601
  <div
499
602
  class="pf-v6-c-toolbar pf-m-static"
500
- id="modal-scrollable-content-example-masthead-toolbar"
603
+ id="modal-scrollable-content-example-docked-toolbar"
501
604
  >
502
605
  <div class="pf-v6-c-toolbar__content">
503
606
  <div class="pf-v6-c-toolbar__content-section">
@@ -515,7 +618,19 @@ section: components
515
618
  aria-label="Application launcher"
516
619
  >
517
620
  <span class="pf-v6-c-menu-toggle__icon">
518
- <i class="fas fa-th" aria-hidden="true"></i>
621
+ <svg
622
+ class="pf-v6-svg"
623
+ viewBox="0 0 512 512"
624
+ fill="currentColor"
625
+ aria-hidden="true"
626
+ role="img"
627
+ width="1em"
628
+ height="1em"
629
+ >
630
+ <path
631
+ 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"
632
+ />
633
+ </svg>
519
634
  </span>
520
635
  </button>
521
636
  </div>
@@ -527,7 +642,19 @@ section: components
527
642
  aria-label="Settings"
528
643
  >
529
644
  <span class="pf-v6-c-menu-toggle__icon">
530
- <i class="fas fa-cog" aria-hidden="true"></i>
645
+ <svg
646
+ class="pf-v6-svg"
647
+ viewBox="0 0 32 32"
648
+ fill="currentColor"
649
+ aria-hidden="true"
650
+ role="img"
651
+ width="1em"
652
+ height="1em"
653
+ >
654
+ <path
655
+ 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"
656
+ />
657
+ </svg>
531
658
  </span>
532
659
  </button>
533
660
  </div>
@@ -539,7 +666,19 @@ section: components
539
666
  aria-label="Help"
540
667
  >
541
668
  <span class="pf-v6-c-menu-toggle__icon">
542
- <i class="fas fa-question-circle" aria-hidden="true"></i>
669
+ <svg
670
+ class="pf-v6-svg"
671
+ viewBox="0 0 512 512"
672
+ fill="currentColor"
673
+ aria-hidden="true"
674
+ role="img"
675
+ width="1em"
676
+ height="1em"
677
+ >
678
+ <path
679
+ 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"
680
+ />
681
+ </svg>
543
682
  </span>
544
683
  </button>
545
684
  </div>
@@ -553,7 +692,19 @@ section: components
553
692
  aria-label="Actions"
554
693
  >
555
694
  <span class="pf-v6-c-menu-toggle__icon">
556
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
695
+ <svg
696
+ class="pf-v6-svg"
697
+ viewBox="0 0 32 32"
698
+ fill="currentColor"
699
+ aria-hidden="true"
700
+ role="img"
701
+ width="1em"
702
+ height="1em"
703
+ >
704
+ <path
705
+ 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"
706
+ />
707
+ </svg>
557
708
  </span>
558
709
  </button>
559
710
  </div>
@@ -564,44 +715,46 @@ section: components
564
715
  </div>
565
716
  </header>
566
717
  <div class="pf-v6-c-page__sidebar">
567
- <div class="pf-v6-c-page__sidebar-body">
568
- <nav
569
- class="pf-v6-c-nav"
570
- id="modal-scrollable-content-example-primary-nav"
571
- aria-label="Global"
572
- >
573
- <ul class="pf-v6-c-nav__list" role="list">
574
- <li class="pf-v6-c-nav__item">
575
- <a href="#" class="pf-v6-c-nav__link">
576
- <span class="pf-v6-c-nav__link-text">System panel</span>
577
- </a>
578
- </li>
579
- <li class="pf-v6-c-nav__item">
580
- <a
581
- href="#"
582
- class="pf-v6-c-nav__link pf-m-current"
583
- aria-current="page"
584
- >
585
- <span class="pf-v6-c-nav__link-text">Policy</span>
586
- </a>
587
- </li>
588
- <li class="pf-v6-c-nav__item">
589
- <a href="#" class="pf-v6-c-nav__link">
590
- <span class="pf-v6-c-nav__link-text">Authentication</span>
591
- </a>
592
- </li>
593
- <li class="pf-v6-c-nav__item">
594
- <a href="#" class="pf-v6-c-nav__link">
595
- <span class="pf-v6-c-nav__link-text">Network services</span>
596
- </a>
597
- </li>
598
- <li class="pf-v6-c-nav__item">
599
- <a href="#" class="pf-v6-c-nav__link">
600
- <span class="pf-v6-c-nav__link-text">Server</span>
601
- </a>
602
- </li>
603
- </ul>
604
- </nav>
718
+ <div class="pf-v6-c-page__sidebar-main">
719
+ <div class="pf-v6-c-page__sidebar-body">
720
+ <nav
721
+ class="pf-v6-c-nav"
722
+ id="modal-scrollable-content-example-primary-nav"
723
+ aria-label="Global"
724
+ >
725
+ <ul class="pf-v6-c-nav__list" role="list">
726
+ <li class="pf-v6-c-nav__item">
727
+ <a href="#" class="pf-v6-c-nav__link">
728
+ <span class="pf-v6-c-nav__link-text">System panel</span>
729
+ </a>
730
+ </li>
731
+ <li class="pf-v6-c-nav__item">
732
+ <a
733
+ href="#"
734
+ class="pf-v6-c-nav__link pf-m-current"
735
+ aria-current="page"
736
+ >
737
+ <span class="pf-v6-c-nav__link-text">Policy</span>
738
+ </a>
739
+ </li>
740
+ <li class="pf-v6-c-nav__item">
741
+ <a href="#" class="pf-v6-c-nav__link">
742
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
743
+ </a>
744
+ </li>
745
+ <li class="pf-v6-c-nav__item">
746
+ <a href="#" class="pf-v6-c-nav__link">
747
+ <span class="pf-v6-c-nav__link-text">Network services</span>
748
+ </a>
749
+ </li>
750
+ <li class="pf-v6-c-nav__item">
751
+ <a href="#" class="pf-v6-c-nav__link">
752
+ <span class="pf-v6-c-nav__link-text">Server</span>
753
+ </a>
754
+ </li>
755
+ </ul>
756
+ </nav>
757
+ </div>
605
758
  </div>
606
759
  </div>
607
760
  <div class="pf-v6-c-page__main-container" tabindex="-1">
@@ -619,21 +772,57 @@ section: components
619
772
  </li>
620
773
  <li class="pf-v6-c-breadcrumb__item">
621
774
  <span class="pf-v6-c-breadcrumb__item-divider">
622
- <i class="fas fa-angle-right" aria-hidden="true"></i>
775
+ <svg
776
+ class="pf-v6-svg"
777
+ viewBox="0 0 20 20"
778
+ fill="currentColor"
779
+ aria-hidden="true"
780
+ role="img"
781
+ width="1em"
782
+ height="1em"
783
+ >
784
+ <path
785
+ 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"
786
+ />
787
+ </svg>
623
788
  </span>
624
789
 
625
790
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
626
791
  </li>
627
792
  <li class="pf-v6-c-breadcrumb__item">
628
793
  <span class="pf-v6-c-breadcrumb__item-divider">
629
- <i class="fas fa-angle-right" aria-hidden="true"></i>
794
+ <svg
795
+ class="pf-v6-svg"
796
+ viewBox="0 0 20 20"
797
+ fill="currentColor"
798
+ aria-hidden="true"
799
+ role="img"
800
+ width="1em"
801
+ height="1em"
802
+ >
803
+ <path
804
+ 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"
805
+ />
806
+ </svg>
630
807
  </span>
631
808
 
632
809
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
633
810
  </li>
634
811
  <li class="pf-v6-c-breadcrumb__item">
635
812
  <span class="pf-v6-c-breadcrumb__item-divider">
636
- <i class="fas fa-angle-right" aria-hidden="true"></i>
813
+ <svg
814
+ class="pf-v6-svg"
815
+ viewBox="0 0 20 20"
816
+ fill="currentColor"
817
+ aria-hidden="true"
818
+ role="img"
819
+ width="1em"
820
+ height="1em"
821
+ >
822
+ <path
823
+ 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"
824
+ />
825
+ </svg>
637
826
  </span>
638
827
 
639
828
  <a
@@ -646,9 +835,15 @@ section: components
646
835
  </nav>
647
836
  </div>
648
837
  </section>
649
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
838
+ <section
839
+ class="pf-v6-c-page__main-section pf-m-limit-width"
840
+ aria-labelledby="main-title"
841
+ >
650
842
  <div class="pf-v6-c-page__main-body">
651
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
843
+ <h1
844
+ class="pf-v6-c-content--h1 pf-m-page-title"
845
+ id="main-title"
846
+ >Main title</h1>
652
847
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
653
848
  </div>
654
849
  </section>
@@ -707,7 +902,19 @@ section: components
707
902
  aria-label="Close"
708
903
  >
709
904
  <span class="pf-v6-c-button__icon">
710
- <i class="fas fa-times" aria-hidden="true"></i>
905
+ <svg
906
+ class="pf-v6-svg"
907
+ viewBox="0 0 20 20"
908
+ fill="currentColor"
909
+ aria-hidden="true"
910
+ role="img"
911
+ width="1em"
912
+ height="1em"
913
+ >
914
+ <path
915
+ 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"
916
+ />
917
+ </svg>
711
918
  </span>
712
919
  </button>
713
920
  </div>
@@ -761,7 +968,8 @@ section: components
761
968
  <span class="pf-v6-c-button__text">Skip to content</span>
762
969
  </a>
763
970
  </div>
764
- <header class="pf-v6-c-masthead" id="modal-medium-example-masthead">
971
+
972
+ <header class="pf-v6-c-masthead" id="modal-medium-example-docked">
765
973
  <div class="pf-v6-c-masthead__main">
766
974
  <span class="pf-v6-c-masthead__toggle">
767
975
  <button
@@ -803,7 +1011,7 @@ section: components
803
1011
  y1="2.25860997e-13%"
804
1012
  x2="32%"
805
1013
  y2="100%"
806
- id="linearGradient-modal-medium-example-masthead"
1014
+ id="linearGradient-modal-medium-example-docked"
807
1015
  >
808
1016
  <stop stop-color="#2B9AF3" offset="0%" />
809
1017
  <stop
@@ -857,11 +1065,11 @@ section: components
857
1065
  />
858
1066
  <path
859
1067
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
860
- fill="url(#linearGradient-modal-medium-example-masthead)"
1068
+ fill="url(#linearGradient-modal-medium-example-docked)"
861
1069
  />
862
1070
  <path
863
1071
  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"
864
- fill="url(#linearGradient-modal-medium-example-masthead)"
1072
+ fill="url(#linearGradient-modal-medium-example-docked)"
865
1073
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
866
1074
  />
867
1075
  </g>
@@ -873,7 +1081,7 @@ section: components
873
1081
  <div class="pf-v6-c-masthead__content">
874
1082
  <div
875
1083
  class="pf-v6-c-toolbar pf-m-static"
876
- id="modal-medium-example-masthead-toolbar"
1084
+ id="modal-medium-example-docked-toolbar"
877
1085
  >
878
1086
  <div class="pf-v6-c-toolbar__content">
879
1087
  <div class="pf-v6-c-toolbar__content-section">
@@ -891,7 +1099,19 @@ section: components
891
1099
  aria-label="Application launcher"
892
1100
  >
893
1101
  <span class="pf-v6-c-menu-toggle__icon">
894
- <i class="fas fa-th" aria-hidden="true"></i>
1102
+ <svg
1103
+ class="pf-v6-svg"
1104
+ viewBox="0 0 512 512"
1105
+ fill="currentColor"
1106
+ aria-hidden="true"
1107
+ role="img"
1108
+ width="1em"
1109
+ height="1em"
1110
+ >
1111
+ <path
1112
+ 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"
1113
+ />
1114
+ </svg>
895
1115
  </span>
896
1116
  </button>
897
1117
  </div>
@@ -903,7 +1123,19 @@ section: components
903
1123
  aria-label="Settings"
904
1124
  >
905
1125
  <span class="pf-v6-c-menu-toggle__icon">
906
- <i class="fas fa-cog" aria-hidden="true"></i>
1126
+ <svg
1127
+ class="pf-v6-svg"
1128
+ viewBox="0 0 32 32"
1129
+ fill="currentColor"
1130
+ aria-hidden="true"
1131
+ role="img"
1132
+ width="1em"
1133
+ height="1em"
1134
+ >
1135
+ <path
1136
+ 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"
1137
+ />
1138
+ </svg>
907
1139
  </span>
908
1140
  </button>
909
1141
  </div>
@@ -915,7 +1147,19 @@ section: components
915
1147
  aria-label="Help"
916
1148
  >
917
1149
  <span class="pf-v6-c-menu-toggle__icon">
918
- <i class="fas fa-question-circle" aria-hidden="true"></i>
1150
+ <svg
1151
+ class="pf-v6-svg"
1152
+ viewBox="0 0 512 512"
1153
+ fill="currentColor"
1154
+ aria-hidden="true"
1155
+ role="img"
1156
+ width="1em"
1157
+ height="1em"
1158
+ >
1159
+ <path
1160
+ 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"
1161
+ />
1162
+ </svg>
919
1163
  </span>
920
1164
  </button>
921
1165
  </div>
@@ -929,7 +1173,19 @@ section: components
929
1173
  aria-label="Actions"
930
1174
  >
931
1175
  <span class="pf-v6-c-menu-toggle__icon">
932
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1176
+ <svg
1177
+ class="pf-v6-svg"
1178
+ viewBox="0 0 32 32"
1179
+ fill="currentColor"
1180
+ aria-hidden="true"
1181
+ role="img"
1182
+ width="1em"
1183
+ height="1em"
1184
+ >
1185
+ <path
1186
+ 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"
1187
+ />
1188
+ </svg>
933
1189
  </span>
934
1190
  </button>
935
1191
  </div>
@@ -940,44 +1196,46 @@ section: components
940
1196
  </div>
941
1197
  </header>
942
1198
  <div class="pf-v6-c-page__sidebar">
943
- <div class="pf-v6-c-page__sidebar-body">
944
- <nav
945
- class="pf-v6-c-nav"
946
- id="modal-medium-example-primary-nav"
947
- aria-label="Global"
948
- >
949
- <ul class="pf-v6-c-nav__list" role="list">
950
- <li class="pf-v6-c-nav__item">
951
- <a href="#" class="pf-v6-c-nav__link">
952
- <span class="pf-v6-c-nav__link-text">System panel</span>
953
- </a>
954
- </li>
955
- <li class="pf-v6-c-nav__item">
956
- <a
957
- href="#"
958
- class="pf-v6-c-nav__link pf-m-current"
959
- aria-current="page"
960
- >
961
- <span class="pf-v6-c-nav__link-text">Policy</span>
962
- </a>
963
- </li>
964
- <li class="pf-v6-c-nav__item">
965
- <a href="#" class="pf-v6-c-nav__link">
966
- <span class="pf-v6-c-nav__link-text">Authentication</span>
967
- </a>
968
- </li>
969
- <li class="pf-v6-c-nav__item">
970
- <a href="#" class="pf-v6-c-nav__link">
971
- <span class="pf-v6-c-nav__link-text">Network services</span>
972
- </a>
973
- </li>
974
- <li class="pf-v6-c-nav__item">
975
- <a href="#" class="pf-v6-c-nav__link">
976
- <span class="pf-v6-c-nav__link-text">Server</span>
977
- </a>
978
- </li>
979
- </ul>
980
- </nav>
1199
+ <div class="pf-v6-c-page__sidebar-main">
1200
+ <div class="pf-v6-c-page__sidebar-body">
1201
+ <nav
1202
+ class="pf-v6-c-nav"
1203
+ id="modal-medium-example-primary-nav"
1204
+ aria-label="Global"
1205
+ >
1206
+ <ul class="pf-v6-c-nav__list" role="list">
1207
+ <li class="pf-v6-c-nav__item">
1208
+ <a href="#" class="pf-v6-c-nav__link">
1209
+ <span class="pf-v6-c-nav__link-text">System panel</span>
1210
+ </a>
1211
+ </li>
1212
+ <li class="pf-v6-c-nav__item">
1213
+ <a
1214
+ href="#"
1215
+ class="pf-v6-c-nav__link pf-m-current"
1216
+ aria-current="page"
1217
+ >
1218
+ <span class="pf-v6-c-nav__link-text">Policy</span>
1219
+ </a>
1220
+ </li>
1221
+ <li class="pf-v6-c-nav__item">
1222
+ <a href="#" class="pf-v6-c-nav__link">
1223
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
1224
+ </a>
1225
+ </li>
1226
+ <li class="pf-v6-c-nav__item">
1227
+ <a href="#" class="pf-v6-c-nav__link">
1228
+ <span class="pf-v6-c-nav__link-text">Network services</span>
1229
+ </a>
1230
+ </li>
1231
+ <li class="pf-v6-c-nav__item">
1232
+ <a href="#" class="pf-v6-c-nav__link">
1233
+ <span class="pf-v6-c-nav__link-text">Server</span>
1234
+ </a>
1235
+ </li>
1236
+ </ul>
1237
+ </nav>
1238
+ </div>
981
1239
  </div>
982
1240
  </div>
983
1241
  <div class="pf-v6-c-page__main-container" tabindex="-1">
@@ -995,21 +1253,57 @@ section: components
995
1253
  </li>
996
1254
  <li class="pf-v6-c-breadcrumb__item">
997
1255
  <span class="pf-v6-c-breadcrumb__item-divider">
998
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1256
+ <svg
1257
+ class="pf-v6-svg"
1258
+ viewBox="0 0 20 20"
1259
+ fill="currentColor"
1260
+ aria-hidden="true"
1261
+ role="img"
1262
+ width="1em"
1263
+ height="1em"
1264
+ >
1265
+ <path
1266
+ 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"
1267
+ />
1268
+ </svg>
999
1269
  </span>
1000
1270
 
1001
1271
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1002
1272
  </li>
1003
1273
  <li class="pf-v6-c-breadcrumb__item">
1004
1274
  <span class="pf-v6-c-breadcrumb__item-divider">
1005
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1275
+ <svg
1276
+ class="pf-v6-svg"
1277
+ viewBox="0 0 20 20"
1278
+ fill="currentColor"
1279
+ aria-hidden="true"
1280
+ role="img"
1281
+ width="1em"
1282
+ height="1em"
1283
+ >
1284
+ <path
1285
+ 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"
1286
+ />
1287
+ </svg>
1006
1288
  </span>
1007
1289
 
1008
1290
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1009
1291
  </li>
1010
1292
  <li class="pf-v6-c-breadcrumb__item">
1011
1293
  <span class="pf-v6-c-breadcrumb__item-divider">
1012
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1294
+ <svg
1295
+ class="pf-v6-svg"
1296
+ viewBox="0 0 20 20"
1297
+ fill="currentColor"
1298
+ aria-hidden="true"
1299
+ role="img"
1300
+ width="1em"
1301
+ height="1em"
1302
+ >
1303
+ <path
1304
+ 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"
1305
+ />
1306
+ </svg>
1013
1307
  </span>
1014
1308
 
1015
1309
  <a
@@ -1022,9 +1316,15 @@ section: components
1022
1316
  </nav>
1023
1317
  </div>
1024
1318
  </section>
1025
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
1319
+ <section
1320
+ class="pf-v6-c-page__main-section pf-m-limit-width"
1321
+ aria-labelledby="main-title"
1322
+ >
1026
1323
  <div class="pf-v6-c-page__main-body">
1027
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
1324
+ <h1
1325
+ class="pf-v6-c-content--h1 pf-m-page-title"
1326
+ id="main-title"
1327
+ >Main title</h1>
1028
1328
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
1029
1329
  </div>
1030
1330
  </section>
@@ -1083,7 +1383,19 @@ section: components
1083
1383
  aria-label="Close"
1084
1384
  >
1085
1385
  <span class="pf-v6-c-button__icon">
1086
- <i class="fas fa-times" aria-hidden="true"></i>
1386
+ <svg
1387
+ class="pf-v6-svg"
1388
+ viewBox="0 0 20 20"
1389
+ fill="currentColor"
1390
+ aria-hidden="true"
1391
+ role="img"
1392
+ width="1em"
1393
+ height="1em"
1394
+ >
1395
+ <path
1396
+ 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"
1397
+ />
1398
+ </svg>
1087
1399
  </span>
1088
1400
  </button>
1089
1401
  </div>
@@ -1127,7 +1439,8 @@ section: components
1127
1439
  <span class="pf-v6-c-button__text">Skip to content</span>
1128
1440
  </a>
1129
1441
  </div>
1130
- <header class="pf-v6-c-masthead" id="modal-large-example-masthead">
1442
+
1443
+ <header class="pf-v6-c-masthead" id="modal-large-example-docked">
1131
1444
  <div class="pf-v6-c-masthead__main">
1132
1445
  <span class="pf-v6-c-masthead__toggle">
1133
1446
  <button
@@ -1169,7 +1482,7 @@ section: components
1169
1482
  y1="2.25860997e-13%"
1170
1483
  x2="32%"
1171
1484
  y2="100%"
1172
- id="linearGradient-modal-large-example-masthead"
1485
+ id="linearGradient-modal-large-example-docked"
1173
1486
  >
1174
1487
  <stop stop-color="#2B9AF3" offset="0%" />
1175
1488
  <stop
@@ -1223,11 +1536,11 @@ section: components
1223
1536
  />
1224
1537
  <path
1225
1538
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
1226
- fill="url(#linearGradient-modal-large-example-masthead)"
1539
+ fill="url(#linearGradient-modal-large-example-docked)"
1227
1540
  />
1228
1541
  <path
1229
1542
  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"
1230
- fill="url(#linearGradient-modal-large-example-masthead)"
1543
+ fill="url(#linearGradient-modal-large-example-docked)"
1231
1544
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
1232
1545
  />
1233
1546
  </g>
@@ -1239,7 +1552,7 @@ section: components
1239
1552
  <div class="pf-v6-c-masthead__content">
1240
1553
  <div
1241
1554
  class="pf-v6-c-toolbar pf-m-static"
1242
- id="modal-large-example-masthead-toolbar"
1555
+ id="modal-large-example-docked-toolbar"
1243
1556
  >
1244
1557
  <div class="pf-v6-c-toolbar__content">
1245
1558
  <div class="pf-v6-c-toolbar__content-section">
@@ -1257,7 +1570,19 @@ section: components
1257
1570
  aria-label="Application launcher"
1258
1571
  >
1259
1572
  <span class="pf-v6-c-menu-toggle__icon">
1260
- <i class="fas fa-th" aria-hidden="true"></i>
1573
+ <svg
1574
+ class="pf-v6-svg"
1575
+ viewBox="0 0 512 512"
1576
+ fill="currentColor"
1577
+ aria-hidden="true"
1578
+ role="img"
1579
+ width="1em"
1580
+ height="1em"
1581
+ >
1582
+ <path
1583
+ 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"
1584
+ />
1585
+ </svg>
1261
1586
  </span>
1262
1587
  </button>
1263
1588
  </div>
@@ -1269,7 +1594,19 @@ section: components
1269
1594
  aria-label="Settings"
1270
1595
  >
1271
1596
  <span class="pf-v6-c-menu-toggle__icon">
1272
- <i class="fas fa-cog" aria-hidden="true"></i>
1597
+ <svg
1598
+ class="pf-v6-svg"
1599
+ viewBox="0 0 32 32"
1600
+ fill="currentColor"
1601
+ aria-hidden="true"
1602
+ role="img"
1603
+ width="1em"
1604
+ height="1em"
1605
+ >
1606
+ <path
1607
+ 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"
1608
+ />
1609
+ </svg>
1273
1610
  </span>
1274
1611
  </button>
1275
1612
  </div>
@@ -1281,7 +1618,19 @@ section: components
1281
1618
  aria-label="Help"
1282
1619
  >
1283
1620
  <span class="pf-v6-c-menu-toggle__icon">
1284
- <i class="fas fa-question-circle" aria-hidden="true"></i>
1621
+ <svg
1622
+ class="pf-v6-svg"
1623
+ viewBox="0 0 512 512"
1624
+ fill="currentColor"
1625
+ aria-hidden="true"
1626
+ role="img"
1627
+ width="1em"
1628
+ height="1em"
1629
+ >
1630
+ <path
1631
+ 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"
1632
+ />
1633
+ </svg>
1285
1634
  </span>
1286
1635
  </button>
1287
1636
  </div>
@@ -1295,7 +1644,19 @@ section: components
1295
1644
  aria-label="Actions"
1296
1645
  >
1297
1646
  <span class="pf-v6-c-menu-toggle__icon">
1298
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1647
+ <svg
1648
+ class="pf-v6-svg"
1649
+ viewBox="0 0 32 32"
1650
+ fill="currentColor"
1651
+ aria-hidden="true"
1652
+ role="img"
1653
+ width="1em"
1654
+ height="1em"
1655
+ >
1656
+ <path
1657
+ 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"
1658
+ />
1659
+ </svg>
1299
1660
  </span>
1300
1661
  </button>
1301
1662
  </div>
@@ -1306,44 +1667,46 @@ section: components
1306
1667
  </div>
1307
1668
  </header>
1308
1669
  <div class="pf-v6-c-page__sidebar">
1309
- <div class="pf-v6-c-page__sidebar-body">
1310
- <nav
1311
- class="pf-v6-c-nav"
1312
- id="modal-large-example-primary-nav"
1313
- aria-label="Global"
1314
- >
1315
- <ul class="pf-v6-c-nav__list" role="list">
1316
- <li class="pf-v6-c-nav__item">
1317
- <a href="#" class="pf-v6-c-nav__link">
1318
- <span class="pf-v6-c-nav__link-text">System panel</span>
1319
- </a>
1320
- </li>
1321
- <li class="pf-v6-c-nav__item">
1322
- <a
1323
- href="#"
1324
- class="pf-v6-c-nav__link pf-m-current"
1325
- aria-current="page"
1326
- >
1327
- <span class="pf-v6-c-nav__link-text">Policy</span>
1328
- </a>
1329
- </li>
1330
- <li class="pf-v6-c-nav__item">
1331
- <a href="#" class="pf-v6-c-nav__link">
1332
- <span class="pf-v6-c-nav__link-text">Authentication</span>
1333
- </a>
1334
- </li>
1335
- <li class="pf-v6-c-nav__item">
1336
- <a href="#" class="pf-v6-c-nav__link">
1337
- <span class="pf-v6-c-nav__link-text">Network services</span>
1338
- </a>
1339
- </li>
1340
- <li class="pf-v6-c-nav__item">
1341
- <a href="#" class="pf-v6-c-nav__link">
1342
- <span class="pf-v6-c-nav__link-text">Server</span>
1343
- </a>
1344
- </li>
1345
- </ul>
1346
- </nav>
1670
+ <div class="pf-v6-c-page__sidebar-main">
1671
+ <div class="pf-v6-c-page__sidebar-body">
1672
+ <nav
1673
+ class="pf-v6-c-nav"
1674
+ id="modal-large-example-primary-nav"
1675
+ aria-label="Global"
1676
+ >
1677
+ <ul class="pf-v6-c-nav__list" role="list">
1678
+ <li class="pf-v6-c-nav__item">
1679
+ <a href="#" class="pf-v6-c-nav__link">
1680
+ <span class="pf-v6-c-nav__link-text">System panel</span>
1681
+ </a>
1682
+ </li>
1683
+ <li class="pf-v6-c-nav__item">
1684
+ <a
1685
+ href="#"
1686
+ class="pf-v6-c-nav__link pf-m-current"
1687
+ aria-current="page"
1688
+ >
1689
+ <span class="pf-v6-c-nav__link-text">Policy</span>
1690
+ </a>
1691
+ </li>
1692
+ <li class="pf-v6-c-nav__item">
1693
+ <a href="#" class="pf-v6-c-nav__link">
1694
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
1695
+ </a>
1696
+ </li>
1697
+ <li class="pf-v6-c-nav__item">
1698
+ <a href="#" class="pf-v6-c-nav__link">
1699
+ <span class="pf-v6-c-nav__link-text">Network services</span>
1700
+ </a>
1701
+ </li>
1702
+ <li class="pf-v6-c-nav__item">
1703
+ <a href="#" class="pf-v6-c-nav__link">
1704
+ <span class="pf-v6-c-nav__link-text">Server</span>
1705
+ </a>
1706
+ </li>
1707
+ </ul>
1708
+ </nav>
1709
+ </div>
1347
1710
  </div>
1348
1711
  </div>
1349
1712
  <div class="pf-v6-c-page__main-container" tabindex="-1">
@@ -1361,21 +1724,57 @@ section: components
1361
1724
  </li>
1362
1725
  <li class="pf-v6-c-breadcrumb__item">
1363
1726
  <span class="pf-v6-c-breadcrumb__item-divider">
1364
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1727
+ <svg
1728
+ class="pf-v6-svg"
1729
+ viewBox="0 0 20 20"
1730
+ fill="currentColor"
1731
+ aria-hidden="true"
1732
+ role="img"
1733
+ width="1em"
1734
+ height="1em"
1735
+ >
1736
+ <path
1737
+ 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"
1738
+ />
1739
+ </svg>
1365
1740
  </span>
1366
1741
 
1367
1742
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1368
1743
  </li>
1369
1744
  <li class="pf-v6-c-breadcrumb__item">
1370
1745
  <span class="pf-v6-c-breadcrumb__item-divider">
1371
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1746
+ <svg
1747
+ class="pf-v6-svg"
1748
+ viewBox="0 0 20 20"
1749
+ fill="currentColor"
1750
+ aria-hidden="true"
1751
+ role="img"
1752
+ width="1em"
1753
+ height="1em"
1754
+ >
1755
+ <path
1756
+ 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"
1757
+ />
1758
+ </svg>
1372
1759
  </span>
1373
1760
 
1374
1761
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1375
1762
  </li>
1376
1763
  <li class="pf-v6-c-breadcrumb__item">
1377
1764
  <span class="pf-v6-c-breadcrumb__item-divider">
1378
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1765
+ <svg
1766
+ class="pf-v6-svg"
1767
+ viewBox="0 0 20 20"
1768
+ fill="currentColor"
1769
+ aria-hidden="true"
1770
+ role="img"
1771
+ width="1em"
1772
+ height="1em"
1773
+ >
1774
+ <path
1775
+ 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"
1776
+ />
1777
+ </svg>
1379
1778
  </span>
1380
1779
 
1381
1780
  <a
@@ -1388,9 +1787,15 @@ section: components
1388
1787
  </nav>
1389
1788
  </div>
1390
1789
  </section>
1391
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
1790
+ <section
1791
+ class="pf-v6-c-page__main-section pf-m-limit-width"
1792
+ aria-labelledby="main-title"
1793
+ >
1392
1794
  <div class="pf-v6-c-page__main-body">
1393
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
1795
+ <h1
1796
+ class="pf-v6-c-content--h1 pf-m-page-title"
1797
+ id="main-title"
1798
+ >Main title</h1>
1394
1799
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
1395
1800
  </div>
1396
1801
  </section>
@@ -1449,7 +1854,19 @@ section: components
1449
1854
  aria-label="Close"
1450
1855
  >
1451
1856
  <span class="pf-v6-c-button__icon">
1452
- <i class="fas fa-times" aria-hidden="true"></i>
1857
+ <svg
1858
+ class="pf-v6-svg"
1859
+ viewBox="0 0 20 20"
1860
+ fill="currentColor"
1861
+ aria-hidden="true"
1862
+ role="img"
1863
+ width="1em"
1864
+ height="1em"
1865
+ >
1866
+ <path
1867
+ 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"
1868
+ />
1869
+ </svg>
1453
1870
  </span>
1454
1871
  </button>
1455
1872
  </div>
@@ -1493,7 +1910,8 @@ section: components
1493
1910
  <span class="pf-v6-c-button__text">Skip to content</span>
1494
1911
  </a>
1495
1912
  </div>
1496
- <header class="pf-v6-c-masthead" id="modal-large-example-masthead">
1913
+
1914
+ <header class="pf-v6-c-masthead" id="modal-large-example-docked">
1497
1915
  <div class="pf-v6-c-masthead__main">
1498
1916
  <span class="pf-v6-c-masthead__toggle">
1499
1917
  <button
@@ -1535,7 +1953,7 @@ section: components
1535
1953
  y1="2.25860997e-13%"
1536
1954
  x2="32%"
1537
1955
  y2="100%"
1538
- id="linearGradient-modal-large-example-masthead"
1956
+ id="linearGradient-modal-large-example-docked"
1539
1957
  >
1540
1958
  <stop stop-color="#2B9AF3" offset="0%" />
1541
1959
  <stop
@@ -1589,11 +2007,11 @@ section: components
1589
2007
  />
1590
2008
  <path
1591
2009
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
1592
- fill="url(#linearGradient-modal-large-example-masthead)"
2010
+ fill="url(#linearGradient-modal-large-example-docked)"
1593
2011
  />
1594
2012
  <path
1595
2013
  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"
1596
- fill="url(#linearGradient-modal-large-example-masthead)"
2014
+ fill="url(#linearGradient-modal-large-example-docked)"
1597
2015
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
1598
2016
  />
1599
2017
  </g>
@@ -1605,7 +2023,7 @@ section: components
1605
2023
  <div class="pf-v6-c-masthead__content">
1606
2024
  <div
1607
2025
  class="pf-v6-c-toolbar pf-m-static"
1608
- id="modal-large-example-masthead-toolbar"
2026
+ id="modal-large-example-docked-toolbar"
1609
2027
  >
1610
2028
  <div class="pf-v6-c-toolbar__content">
1611
2029
  <div class="pf-v6-c-toolbar__content-section">
@@ -1623,7 +2041,19 @@ section: components
1623
2041
  aria-label="Application launcher"
1624
2042
  >
1625
2043
  <span class="pf-v6-c-menu-toggle__icon">
1626
- <i class="fas fa-th" aria-hidden="true"></i>
2044
+ <svg
2045
+ class="pf-v6-svg"
2046
+ viewBox="0 0 512 512"
2047
+ fill="currentColor"
2048
+ aria-hidden="true"
2049
+ role="img"
2050
+ width="1em"
2051
+ height="1em"
2052
+ >
2053
+ <path
2054
+ 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"
2055
+ />
2056
+ </svg>
1627
2057
  </span>
1628
2058
  </button>
1629
2059
  </div>
@@ -1635,7 +2065,19 @@ section: components
1635
2065
  aria-label="Settings"
1636
2066
  >
1637
2067
  <span class="pf-v6-c-menu-toggle__icon">
1638
- <i class="fas fa-cog" aria-hidden="true"></i>
2068
+ <svg
2069
+ class="pf-v6-svg"
2070
+ viewBox="0 0 32 32"
2071
+ fill="currentColor"
2072
+ aria-hidden="true"
2073
+ role="img"
2074
+ width="1em"
2075
+ height="1em"
2076
+ >
2077
+ <path
2078
+ 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"
2079
+ />
2080
+ </svg>
1639
2081
  </span>
1640
2082
  </button>
1641
2083
  </div>
@@ -1647,7 +2089,19 @@ section: components
1647
2089
  aria-label="Help"
1648
2090
  >
1649
2091
  <span class="pf-v6-c-menu-toggle__icon">
1650
- <i class="fas fa-question-circle" aria-hidden="true"></i>
2092
+ <svg
2093
+ class="pf-v6-svg"
2094
+ viewBox="0 0 512 512"
2095
+ fill="currentColor"
2096
+ aria-hidden="true"
2097
+ role="img"
2098
+ width="1em"
2099
+ height="1em"
2100
+ >
2101
+ <path
2102
+ 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"
2103
+ />
2104
+ </svg>
1651
2105
  </span>
1652
2106
  </button>
1653
2107
  </div>
@@ -1661,7 +2115,19 @@ section: components
1661
2115
  aria-label="Actions"
1662
2116
  >
1663
2117
  <span class="pf-v6-c-menu-toggle__icon">
1664
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
2118
+ <svg
2119
+ class="pf-v6-svg"
2120
+ viewBox="0 0 32 32"
2121
+ fill="currentColor"
2122
+ aria-hidden="true"
2123
+ role="img"
2124
+ width="1em"
2125
+ height="1em"
2126
+ >
2127
+ <path
2128
+ 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"
2129
+ />
2130
+ </svg>
1665
2131
  </span>
1666
2132
  </button>
1667
2133
  </div>
@@ -1672,44 +2138,46 @@ section: components
1672
2138
  </div>
1673
2139
  </header>
1674
2140
  <div class="pf-v6-c-page__sidebar">
1675
- <div class="pf-v6-c-page__sidebar-body">
1676
- <nav
1677
- class="pf-v6-c-nav"
1678
- id="modal-large-example-primary-nav"
1679
- aria-label="Global"
1680
- >
1681
- <ul class="pf-v6-c-nav__list" role="list">
1682
- <li class="pf-v6-c-nav__item">
1683
- <a href="#" class="pf-v6-c-nav__link">
1684
- <span class="pf-v6-c-nav__link-text">System panel</span>
1685
- </a>
1686
- </li>
1687
- <li class="pf-v6-c-nav__item">
1688
- <a
1689
- href="#"
1690
- class="pf-v6-c-nav__link pf-m-current"
1691
- aria-current="page"
1692
- >
1693
- <span class="pf-v6-c-nav__link-text">Policy</span>
1694
- </a>
1695
- </li>
1696
- <li class="pf-v6-c-nav__item">
1697
- <a href="#" class="pf-v6-c-nav__link">
1698
- <span class="pf-v6-c-nav__link-text">Authentication</span>
1699
- </a>
1700
- </li>
1701
- <li class="pf-v6-c-nav__item">
1702
- <a href="#" class="pf-v6-c-nav__link">
1703
- <span class="pf-v6-c-nav__link-text">Network services</span>
1704
- </a>
1705
- </li>
1706
- <li class="pf-v6-c-nav__item">
1707
- <a href="#" class="pf-v6-c-nav__link">
1708
- <span class="pf-v6-c-nav__link-text">Server</span>
1709
- </a>
1710
- </li>
1711
- </ul>
1712
- </nav>
2141
+ <div class="pf-v6-c-page__sidebar-main">
2142
+ <div class="pf-v6-c-page__sidebar-body">
2143
+ <nav
2144
+ class="pf-v6-c-nav"
2145
+ id="modal-large-example-primary-nav"
2146
+ aria-label="Global"
2147
+ >
2148
+ <ul class="pf-v6-c-nav__list" role="list">
2149
+ <li class="pf-v6-c-nav__item">
2150
+ <a href="#" class="pf-v6-c-nav__link">
2151
+ <span class="pf-v6-c-nav__link-text">System panel</span>
2152
+ </a>
2153
+ </li>
2154
+ <li class="pf-v6-c-nav__item">
2155
+ <a
2156
+ href="#"
2157
+ class="pf-v6-c-nav__link pf-m-current"
2158
+ aria-current="page"
2159
+ >
2160
+ <span class="pf-v6-c-nav__link-text">Policy</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">Authentication</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">Network services</span>
2171
+ </a>
2172
+ </li>
2173
+ <li class="pf-v6-c-nav__item">
2174
+ <a href="#" class="pf-v6-c-nav__link">
2175
+ <span class="pf-v6-c-nav__link-text">Server</span>
2176
+ </a>
2177
+ </li>
2178
+ </ul>
2179
+ </nav>
2180
+ </div>
1713
2181
  </div>
1714
2182
  </div>
1715
2183
  <div class="pf-v6-c-page__main-container" tabindex="-1">
@@ -1727,21 +2195,57 @@ section: components
1727
2195
  </li>
1728
2196
  <li class="pf-v6-c-breadcrumb__item">
1729
2197
  <span class="pf-v6-c-breadcrumb__item-divider">
1730
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2198
+ <svg
2199
+ class="pf-v6-svg"
2200
+ viewBox="0 0 20 20"
2201
+ fill="currentColor"
2202
+ aria-hidden="true"
2203
+ role="img"
2204
+ width="1em"
2205
+ height="1em"
2206
+ >
2207
+ <path
2208
+ 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"
2209
+ />
2210
+ </svg>
1731
2211
  </span>
1732
2212
 
1733
2213
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1734
2214
  </li>
1735
2215
  <li class="pf-v6-c-breadcrumb__item">
1736
2216
  <span class="pf-v6-c-breadcrumb__item-divider">
1737
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2217
+ <svg
2218
+ class="pf-v6-svg"
2219
+ viewBox="0 0 20 20"
2220
+ fill="currentColor"
2221
+ aria-hidden="true"
2222
+ role="img"
2223
+ width="1em"
2224
+ height="1em"
2225
+ >
2226
+ <path
2227
+ 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"
2228
+ />
2229
+ </svg>
1738
2230
  </span>
1739
2231
 
1740
2232
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1741
2233
  </li>
1742
2234
  <li class="pf-v6-c-breadcrumb__item">
1743
2235
  <span class="pf-v6-c-breadcrumb__item-divider">
1744
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2236
+ <svg
2237
+ class="pf-v6-svg"
2238
+ viewBox="0 0 20 20"
2239
+ fill="currentColor"
2240
+ aria-hidden="true"
2241
+ role="img"
2242
+ width="1em"
2243
+ height="1em"
2244
+ >
2245
+ <path
2246
+ 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"
2247
+ />
2248
+ </svg>
1745
2249
  </span>
1746
2250
 
1747
2251
  <a
@@ -1754,9 +2258,15 @@ section: components
1754
2258
  </nav>
1755
2259
  </div>
1756
2260
  </section>
1757
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
2261
+ <section
2262
+ class="pf-v6-c-page__main-section pf-m-limit-width"
2263
+ aria-labelledby="main-title"
2264
+ >
1758
2265
  <div class="pf-v6-c-page__main-body">
1759
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
2266
+ <h1
2267
+ class="pf-v6-c-content--h1 pf-m-page-title"
2268
+ id="main-title"
2269
+ >Main title</h1>
1760
2270
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
1761
2271
  </div>
1762
2272
  </section>
@@ -1815,7 +2325,19 @@ section: components
1815
2325
  aria-label="Close"
1816
2326
  >
1817
2327
  <span class="pf-v6-c-button__icon">
1818
- <i class="fas fa-times" aria-hidden="true"></i>
2328
+ <svg
2329
+ class="pf-v6-svg"
2330
+ viewBox="0 0 20 20"
2331
+ fill="currentColor"
2332
+ aria-hidden="true"
2333
+ role="img"
2334
+ width="1em"
2335
+ height="1em"
2336
+ >
2337
+ <path
2338
+ 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"
2339
+ />
2340
+ </svg>
1819
2341
  </span>
1820
2342
  </button>
1821
2343
  </div>
@@ -1859,7 +2381,8 @@ section: components
1859
2381
  <span class="pf-v6-c-button__text">Skip to content</span>
1860
2382
  </a>
1861
2383
  </div>
1862
- <header class="pf-v6-c-masthead" id="modal-with-form-example-masthead">
2384
+
2385
+ <header class="pf-v6-c-masthead" id="modal-with-form-example-docked">
1863
2386
  <div class="pf-v6-c-masthead__main">
1864
2387
  <span class="pf-v6-c-masthead__toggle">
1865
2388
  <button
@@ -1901,7 +2424,7 @@ section: components
1901
2424
  y1="2.25860997e-13%"
1902
2425
  x2="32%"
1903
2426
  y2="100%"
1904
- id="linearGradient-modal-with-form-example-masthead"
2427
+ id="linearGradient-modal-with-form-example-docked"
1905
2428
  >
1906
2429
  <stop stop-color="#2B9AF3" offset="0%" />
1907
2430
  <stop
@@ -1955,11 +2478,11 @@ section: components
1955
2478
  />
1956
2479
  <path
1957
2480
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
1958
- fill="url(#linearGradient-modal-with-form-example-masthead)"
2481
+ fill="url(#linearGradient-modal-with-form-example-docked)"
1959
2482
  />
1960
2483
  <path
1961
2484
  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"
1962
- fill="url(#linearGradient-modal-with-form-example-masthead)"
2485
+ fill="url(#linearGradient-modal-with-form-example-docked)"
1963
2486
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
1964
2487
  />
1965
2488
  </g>
@@ -1971,7 +2494,7 @@ section: components
1971
2494
  <div class="pf-v6-c-masthead__content">
1972
2495
  <div
1973
2496
  class="pf-v6-c-toolbar pf-m-static"
1974
- id="modal-with-form-example-masthead-toolbar"
2497
+ id="modal-with-form-example-docked-toolbar"
1975
2498
  >
1976
2499
  <div class="pf-v6-c-toolbar__content">
1977
2500
  <div class="pf-v6-c-toolbar__content-section">
@@ -1989,7 +2512,19 @@ section: components
1989
2512
  aria-label="Application launcher"
1990
2513
  >
1991
2514
  <span class="pf-v6-c-menu-toggle__icon">
1992
- <i class="fas fa-th" aria-hidden="true"></i>
2515
+ <svg
2516
+ class="pf-v6-svg"
2517
+ viewBox="0 0 512 512"
2518
+ fill="currentColor"
2519
+ aria-hidden="true"
2520
+ role="img"
2521
+ width="1em"
2522
+ height="1em"
2523
+ >
2524
+ <path
2525
+ 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"
2526
+ />
2527
+ </svg>
1993
2528
  </span>
1994
2529
  </button>
1995
2530
  </div>
@@ -2001,7 +2536,19 @@ section: components
2001
2536
  aria-label="Settings"
2002
2537
  >
2003
2538
  <span class="pf-v6-c-menu-toggle__icon">
2004
- <i class="fas fa-cog" aria-hidden="true"></i>
2539
+ <svg
2540
+ class="pf-v6-svg"
2541
+ viewBox="0 0 32 32"
2542
+ fill="currentColor"
2543
+ aria-hidden="true"
2544
+ role="img"
2545
+ width="1em"
2546
+ height="1em"
2547
+ >
2548
+ <path
2549
+ 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"
2550
+ />
2551
+ </svg>
2005
2552
  </span>
2006
2553
  </button>
2007
2554
  </div>
@@ -2013,7 +2560,19 @@ section: components
2013
2560
  aria-label="Help"
2014
2561
  >
2015
2562
  <span class="pf-v6-c-menu-toggle__icon">
2016
- <i class="fas fa-question-circle" aria-hidden="true"></i>
2563
+ <svg
2564
+ class="pf-v6-svg"
2565
+ viewBox="0 0 512 512"
2566
+ fill="currentColor"
2567
+ aria-hidden="true"
2568
+ role="img"
2569
+ width="1em"
2570
+ height="1em"
2571
+ >
2572
+ <path
2573
+ 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"
2574
+ />
2575
+ </svg>
2017
2576
  </span>
2018
2577
  </button>
2019
2578
  </div>
@@ -2027,7 +2586,19 @@ section: components
2027
2586
  aria-label="Actions"
2028
2587
  >
2029
2588
  <span class="pf-v6-c-menu-toggle__icon">
2030
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
2589
+ <svg
2590
+ class="pf-v6-svg"
2591
+ viewBox="0 0 32 32"
2592
+ fill="currentColor"
2593
+ aria-hidden="true"
2594
+ role="img"
2595
+ width="1em"
2596
+ height="1em"
2597
+ >
2598
+ <path
2599
+ 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"
2600
+ />
2601
+ </svg>
2031
2602
  </span>
2032
2603
  </button>
2033
2604
  </div>
@@ -2038,44 +2609,46 @@ section: components
2038
2609
  </div>
2039
2610
  </header>
2040
2611
  <div class="pf-v6-c-page__sidebar">
2041
- <div class="pf-v6-c-page__sidebar-body">
2042
- <nav
2043
- class="pf-v6-c-nav"
2044
- id="modal-with-form-example-primary-nav"
2045
- aria-label="Global"
2046
- >
2047
- <ul class="pf-v6-c-nav__list" role="list">
2048
- <li class="pf-v6-c-nav__item">
2049
- <a href="#" class="pf-v6-c-nav__link">
2050
- <span class="pf-v6-c-nav__link-text">System panel</span>
2051
- </a>
2052
- </li>
2053
- <li class="pf-v6-c-nav__item">
2054
- <a
2055
- href="#"
2056
- class="pf-v6-c-nav__link pf-m-current"
2057
- aria-current="page"
2058
- >
2059
- <span class="pf-v6-c-nav__link-text">Policy</span>
2060
- </a>
2061
- </li>
2062
- <li class="pf-v6-c-nav__item">
2063
- <a href="#" class="pf-v6-c-nav__link">
2064
- <span class="pf-v6-c-nav__link-text">Authentication</span>
2065
- </a>
2066
- </li>
2067
- <li class="pf-v6-c-nav__item">
2068
- <a href="#" class="pf-v6-c-nav__link">
2069
- <span class="pf-v6-c-nav__link-text">Network services</span>
2070
- </a>
2071
- </li>
2072
- <li class="pf-v6-c-nav__item">
2073
- <a href="#" class="pf-v6-c-nav__link">
2074
- <span class="pf-v6-c-nav__link-text">Server</span>
2075
- </a>
2076
- </li>
2077
- </ul>
2078
- </nav>
2612
+ <div class="pf-v6-c-page__sidebar-main">
2613
+ <div class="pf-v6-c-page__sidebar-body">
2614
+ <nav
2615
+ class="pf-v6-c-nav"
2616
+ id="modal-with-form-example-primary-nav"
2617
+ aria-label="Global"
2618
+ >
2619
+ <ul class="pf-v6-c-nav__list" role="list">
2620
+ <li class="pf-v6-c-nav__item">
2621
+ <a href="#" class="pf-v6-c-nav__link">
2622
+ <span class="pf-v6-c-nav__link-text">System panel</span>
2623
+ </a>
2624
+ </li>
2625
+ <li class="pf-v6-c-nav__item">
2626
+ <a
2627
+ href="#"
2628
+ class="pf-v6-c-nav__link pf-m-current"
2629
+ aria-current="page"
2630
+ >
2631
+ <span class="pf-v6-c-nav__link-text">Policy</span>
2632
+ </a>
2633
+ </li>
2634
+ <li class="pf-v6-c-nav__item">
2635
+ <a href="#" class="pf-v6-c-nav__link">
2636
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
2637
+ </a>
2638
+ </li>
2639
+ <li class="pf-v6-c-nav__item">
2640
+ <a href="#" class="pf-v6-c-nav__link">
2641
+ <span class="pf-v6-c-nav__link-text">Network services</span>
2642
+ </a>
2643
+ </li>
2644
+ <li class="pf-v6-c-nav__item">
2645
+ <a href="#" class="pf-v6-c-nav__link">
2646
+ <span class="pf-v6-c-nav__link-text">Server</span>
2647
+ </a>
2648
+ </li>
2649
+ </ul>
2650
+ </nav>
2651
+ </div>
2079
2652
  </div>
2080
2653
  </div>
2081
2654
  <div class="pf-v6-c-page__main-container" tabindex="-1">
@@ -2093,21 +2666,57 @@ section: components
2093
2666
  </li>
2094
2667
  <li class="pf-v6-c-breadcrumb__item">
2095
2668
  <span class="pf-v6-c-breadcrumb__item-divider">
2096
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2669
+ <svg
2670
+ class="pf-v6-svg"
2671
+ viewBox="0 0 20 20"
2672
+ fill="currentColor"
2673
+ aria-hidden="true"
2674
+ role="img"
2675
+ width="1em"
2676
+ height="1em"
2677
+ >
2678
+ <path
2679
+ 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"
2680
+ />
2681
+ </svg>
2097
2682
  </span>
2098
2683
 
2099
2684
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
2100
2685
  </li>
2101
2686
  <li class="pf-v6-c-breadcrumb__item">
2102
2687
  <span class="pf-v6-c-breadcrumb__item-divider">
2103
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2688
+ <svg
2689
+ class="pf-v6-svg"
2690
+ viewBox="0 0 20 20"
2691
+ fill="currentColor"
2692
+ aria-hidden="true"
2693
+ role="img"
2694
+ width="1em"
2695
+ height="1em"
2696
+ >
2697
+ <path
2698
+ 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"
2699
+ />
2700
+ </svg>
2104
2701
  </span>
2105
2702
 
2106
2703
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
2107
2704
  </li>
2108
2705
  <li class="pf-v6-c-breadcrumb__item">
2109
2706
  <span class="pf-v6-c-breadcrumb__item-divider">
2110
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2707
+ <svg
2708
+ class="pf-v6-svg"
2709
+ viewBox="0 0 20 20"
2710
+ fill="currentColor"
2711
+ aria-hidden="true"
2712
+ role="img"
2713
+ width="1em"
2714
+ height="1em"
2715
+ >
2716
+ <path
2717
+ 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"
2718
+ />
2719
+ </svg>
2111
2720
  </span>
2112
2721
 
2113
2722
  <a
@@ -2120,9 +2729,15 @@ section: components
2120
2729
  </nav>
2121
2730
  </div>
2122
2731
  </section>
2123
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
2732
+ <section
2733
+ class="pf-v6-c-page__main-section pf-m-limit-width"
2734
+ aria-labelledby="main-title"
2735
+ >
2124
2736
  <div class="pf-v6-c-page__main-body">
2125
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
2737
+ <h1
2738
+ class="pf-v6-c-content--h1 pf-m-page-title"
2739
+ id="main-title"
2740
+ >Main title</h1>
2126
2741
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
2127
2742
  </div>
2128
2743
  </section>
@@ -2181,7 +2796,19 @@ section: components
2181
2796
  aria-label="Close"
2182
2797
  >
2183
2798
  <span class="pf-v6-c-button__icon">
2184
- <i class="fas fa-times" aria-hidden="true"></i>
2799
+ <svg
2800
+ class="pf-v6-svg"
2801
+ viewBox="0 0 20 20"
2802
+ fill="currentColor"
2803
+ aria-hidden="true"
2804
+ role="img"
2805
+ width="1em"
2806
+ height="1em"
2807
+ >
2808
+ <path
2809
+ 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"
2810
+ />
2811
+ </svg>
2185
2812
  </span>
2186
2813
  </button>
2187
2814
  </div>