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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (410) hide show
  1. package/README.md +2 -2
  2. package/assets/fontawesome/_variables.scss +2 -1
  3. package/assets/images/Felt-Bkg-Generic-Dark.svg +82 -0
  4. package/assets/images/Felt-Bkg-Generic-Light.svg +82 -0
  5. package/assets/images/PF-Bkg-Generic-Dark.svg +76 -0
  6. package/assets/images/PF-Bkg-Generic-Light.svg +74 -0
  7. package/assets/images/RHAiExperienceIcon.svg +27 -0
  8. package/assets/images/RHAutomationsLogo.svg +96 -0
  9. package/assets/images/RHServerStackIcon.svg +16 -0
  10. package/assets/images/compass--hero-bg.png +0 -0
  11. package/assets/images/compass--rh-wallpaper-dark.png +0 -0
  12. package/assets/images/compass--rh-wallpaper-light.png +0 -0
  13. package/assets/images/compass--wallpaper-dark.jpg +0 -0
  14. package/assets/images/compass--wallpaper-dark.png +0 -0
  15. package/assets/images/compass--wallpaper-light.jpg +0 -0
  16. package/assets/images/compass--wallpaper-light.png +0 -0
  17. package/assets/images/glass-brand-dark.jpg +0 -0
  18. package/assets/images/glass-brand-dark.png +0 -0
  19. package/assets/images/glass-brand-light.jpg +0 -0
  20. package/assets/images/glass-brand-light.png +0 -0
  21. package/base/normalize.scss +7 -0
  22. package/base/patternfly-common.css +50 -0
  23. package/base/patternfly-common.scss +59 -0
  24. package/base/patternfly-svg-icons.css +17 -0
  25. package/base/patternfly-svg-icons.scss +20 -0
  26. package/base/patternfly-variables.css +926 -513
  27. package/base/patternfly-variables.scss +46 -4
  28. package/base/tokens/tokens-dark.scss +56 -8
  29. package/base/tokens/tokens-default.scss +69 -14
  30. package/base/tokens/tokens-glass-dark.scss +26 -0
  31. package/base/tokens/tokens-glass.scss +22 -0
  32. package/base/tokens/tokens-local.scss +17 -0
  33. package/base/tokens/tokens-palette.scss +3 -1
  34. package/base/tokens/tokens-redhat-dark.scss +21 -0
  35. package/base/tokens/tokens-redhat-glass-dark.scss +40 -0
  36. package/base/tokens/tokens-redhat-glass.scss +30 -0
  37. package/base/tokens/tokens-redhat-highcontrast-dark.scss +50 -0
  38. package/base/tokens/tokens-redhat-highcontrast.scss +128 -0
  39. package/base/tokens/tokens-redhat.scss +15 -0
  40. package/components/AboutModalBox/about-modal-box.css +36 -26
  41. package/components/Accordion/accordion.css +26 -14
  42. package/components/Accordion/accordion.scss +12 -2
  43. package/components/ActionList/action-list.css +2 -0
  44. package/components/ActionList/action-list.scss +2 -0
  45. package/components/Alert/alert.css +7 -5
  46. package/components/Alert/alert.scss +2 -1
  47. package/components/Avatar/avatar.css +12 -4
  48. package/components/BackgroundImage/background-image.css +6 -3
  49. package/components/Banner/banner.css +12 -6
  50. package/components/Banner/banner.scss +7 -0
  51. package/components/Brand/brand.css +3 -1
  52. package/components/Breadcrumb/breadcrumb.css +10 -5
  53. package/components/Breadcrumb/breadcrumb.scss +6 -2
  54. package/components/Button/button.css +173 -71
  55. package/components/Button/button.scss +188 -72
  56. package/components/CalendarMonth/calendar-month.css +4 -3
  57. package/components/Card/card.css +51 -15
  58. package/components/Card/card.scss +65 -9
  59. package/components/ClipboardCopy/clipboard-copy.css +14 -7
  60. package/components/ClipboardCopy/clipboard-copy.scss +13 -4
  61. package/components/CodeEditor/code-editor.css +2 -2
  62. package/components/CodeEditor/code-editor.scss +2 -2
  63. package/components/Compass/compass.css +399 -0
  64. package/components/Compass/compass.scss +413 -0
  65. package/components/DataList/data-list.css +30 -23
  66. package/components/DataList/data-list.scss +3 -2
  67. package/components/DescriptionList/description-list-order.scss +5 -1
  68. package/components/DescriptionList/description-list.css +7 -5
  69. package/components/DescriptionList/description-list.scss +5 -1
  70. package/components/Divider/divider.css +7 -5
  71. package/components/Drawer/drawer.css +224 -75
  72. package/components/Drawer/drawer.scss +194 -27
  73. package/components/DualListSelector/dual-list-selector.css +18 -12
  74. package/components/DualListSelector/dual-list-selector.scss +1 -1
  75. package/components/ExpandableSection/expandable-section.css +21 -16
  76. package/components/ExpandableSection/expandable-section.scss +6 -3
  77. package/components/Form/form.css +2 -2
  78. package/components/Form/form.scss +2 -2
  79. package/components/FormControl/form-control.css +3 -3
  80. package/components/FormControl/form-control.scss +3 -3
  81. package/components/Hero/hero.css +74 -0
  82. package/components/Hero/hero.scss +86 -0
  83. package/components/JumpLinks/jump-links.css +16 -5
  84. package/components/JumpLinks/jump-links.scss +17 -3
  85. package/components/Label/label-group.css +2 -2
  86. package/components/Label/label-group.scss +2 -2
  87. package/components/Label/label.css +4 -3
  88. package/components/Login/login.css +58 -40
  89. package/components/Login/login.scss +7 -3
  90. package/components/Masthead/masthead.css +111 -16
  91. package/components/Masthead/masthead.scss +111 -1
  92. package/components/Menu/menu.css +49 -33
  93. package/components/Menu/menu.scss +26 -19
  94. package/components/MenuToggle/menu-toggle.css +35 -8
  95. package/components/MenuToggle/menu-toggle.scss +42 -8
  96. package/components/ModalBox/modal-box.css +9 -7
  97. package/components/ModalBox/modal-box.scss +2 -2
  98. package/components/Nav/nav.css +82 -11
  99. package/components/Nav/nav.scss +85 -5
  100. package/components/NotificationDrawer/notification-drawer.css +19 -9
  101. package/components/NotificationDrawer/notification-drawer.scss +14 -5
  102. package/components/OverflowMenu/overflow-menu.css +16 -0
  103. package/components/OverflowMenu/overflow-menu.scss +20 -1
  104. package/components/Page/page.css +421 -32
  105. package/components/Page/page.scss +397 -15
  106. package/components/Pagination/pagination.css +56 -4
  107. package/components/Pagination/pagination.scss +71 -6
  108. package/components/Panel/panel.css +41 -3
  109. package/components/Panel/panel.scss +56 -3
  110. package/components/Progress/progress.css +3 -1
  111. package/components/Progress/progress.scss +3 -1
  112. package/components/ProgressStepper/progress-stepper.scss +5 -1
  113. package/components/Sidebar/sidebar.css +1 -1
  114. package/components/Sidebar/sidebar.scss +7 -3
  115. package/components/Skeleton/skeleton.css +16 -15
  116. package/components/Slider/slider.css +32 -18
  117. package/components/Switch/switch.css +4 -2
  118. package/components/Switch/switch.scss +1 -1
  119. package/components/Table/table-grid.css +28 -36
  120. package/components/Table/table-grid.scss +4 -4
  121. package/components/Table/table-scrollable.css +1 -1
  122. package/components/Table/table-scrollable.scss +1 -1
  123. package/components/Table/table-tree-view.css +4 -2
  124. package/components/Table/table.css +104 -57
  125. package/components/Table/table.scss +92 -37
  126. package/components/Tabs/tabs.css +39 -33
  127. package/components/Tabs/tabs.scss +38 -26
  128. package/components/TextInputGroup/text-input-group.css +2 -2
  129. package/components/TextInputGroup/text-input-group.scss +2 -2
  130. package/components/ToggleGroup/toggle-group.css +44 -19
  131. package/components/ToggleGroup/toggle-group.scss +51 -22
  132. package/components/Toolbar/toolbar.css +195 -16
  133. package/components/Toolbar/toolbar.scss +89 -9
  134. package/components/TreeView/tree-view.css +45 -14
  135. package/components/TreeView/tree-view.scss +32 -1
  136. package/components/Wizard/wizard.css +41 -19
  137. package/components/Wizard/wizard.scss +26 -6
  138. package/components/_index.css +2740 -829
  139. package/components/_index.scss +3 -1
  140. package/docs/components/AboutModalBox/examples/AboutModalBox.md +13 -1
  141. package/docs/components/Accordion/examples/Accordion.md +392 -30
  142. package/docs/components/ActionList/examples/ActionList.md +143 -11
  143. package/docs/components/Alert/examples/Alert.md +678 -54
  144. package/docs/components/Avatar/examples/Avatar.md +4 -4
  145. package/docs/components/BackToTop/examples/BackToTop.md +13 -1
  146. package/docs/components/Banner/examples/Banner.md +196 -5
  147. package/docs/components/Brand/examples/Brand.md +2 -2
  148. package/docs/components/Breadcrumb/examples/Breadcrumb.md +313 -26
  149. package/docs/components/Button/examples/Button.md +2829 -333
  150. package/docs/components/CalendarMonth/examples/CalendarMonth.md +156 -12
  151. package/docs/components/Card/examples/Card.md +335 -12
  152. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +293 -28
  153. package/docs/components/CodeBlock/examples/CodeBlock.md +104 -8
  154. package/docs/components/CodeEditor/examples/CodeEditor.md +234 -18
  155. package/docs/components/Compass/examples/Compass.css +8 -0
  156. package/docs/components/Compass/examples/Compass.md +109 -0
  157. package/docs/components/DataList/examples/DataList.md +468 -78
  158. package/docs/components/DatePicker/examples/DatePicker.md +78 -6
  159. package/docs/components/DescriptionList/examples/DescriptionList.md +327 -27
  160. package/docs/components/Divider/examples/Divider.md +2 -2
  161. package/docs/components/DragDrop/examples/DragDrop.css +1 -1
  162. package/docs/components/Drawer/examples/Drawer.md +415 -35
  163. package/docs/components/DualListSelector/examples/DualListSelector.md +1247 -161
  164. package/docs/components/EmptyState/examples/EmptyState.md +78 -6
  165. package/docs/components/ExpandableSection/examples/ExpandableSection.md +91 -7
  166. package/docs/components/Form/examples/Form.md +78 -6
  167. package/docs/components/Hero/examples/Hero.md +25 -0
  168. package/docs/components/Hint/examples/Hint.md +39 -3
  169. package/docs/components/Icon/examples/Icon.md +105 -9
  170. package/docs/components/InlineEdit/examples/InlineEdit.md +338 -26
  171. package/docs/components/InputGroup/examples/InputGroup.md +40 -4
  172. package/docs/components/JumpLinks/examples/JumpLinks.md +54 -6
  173. package/docs/components/Label/examples/Label.md +2834 -218
  174. package/docs/components/Login/examples/Login.md +39 -3
  175. package/docs/components/Masthead/examples/masthead.md +80 -1
  176. package/docs/components/Menu/examples/Menu.md +1679 -133
  177. package/docs/components/MenuToggle/examples/MenuToggle.md +1514 -118
  178. package/docs/components/ModalBox/examples/ModalBox.md +289 -25
  179. package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +156 -12
  180. package/docs/components/Nav/examples/Navigation.md +898 -62
  181. package/docs/components/NotificationDrawer/examples/NotificationDrawer.md +1079 -83
  182. package/docs/components/OverflowMenu/examples/overflow-menu.css +6 -3
  183. package/docs/components/OverflowMenu/examples/overflow-menu.md +164 -11
  184. package/docs/components/Page/examples/Page.md +211 -25
  185. package/docs/components/Pagination/examples/Pagination.md +1291 -80
  186. package/docs/components/Panel/examples/Panel.css +3 -0
  187. package/docs/components/Panel/examples/Panel.md +71 -4
  188. package/docs/components/Popover/examples/Popover.md +286 -22
  189. package/docs/components/Progress/examples/Progress.md +91 -7
  190. package/docs/components/ProgressStepper/examples/ProgressStepper.md +275 -23
  191. package/docs/components/Sidebar/examples/Sidebar.md +1 -1
  192. package/docs/components/Slider/examples/Slider.md +52 -4
  193. package/docs/components/Table/examples/Table.css +2 -1
  194. package/docs/components/Table/examples/Table.md +7543 -653
  195. package/docs/components/Tabs/examples/Tabs.md +5734 -471
  196. package/docs/components/TextInputGroup/examples/TextInputGroup.md +600 -48
  197. package/docs/components/ToggleGroup/examples/toggle-group.md +261 -15
  198. package/docs/components/Toolbar/examples/Toolbar.css +1 -1
  199. package/docs/components/Toolbar/examples/Toolbar.md +1145 -88
  200. package/docs/components/TreeView/examples/TreeView.md +1390 -130
  201. package/docs/components/Wizard/examples/Wizard.md +828 -73
  202. package/docs/demos/AboutModal/examples/AboutModal.md +158 -53
  203. package/docs/demos/Alert/examples/Alert.md +539 -164
  204. package/docs/demos/BackToTop/examples/BackToTop.md +158 -53
  205. package/docs/demos/Banner/examples/Banner.md +290 -104
  206. package/docs/demos/Button/examples/Button.md +13 -1
  207. package/docs/demos/Card/examples/Card.md +1041 -134
  208. package/docs/demos/CardView/examples/CardView.md +570 -171
  209. package/docs/demos/Compass/examples/Compass.md +10005 -0
  210. package/docs/demos/Dashboard/examples/Dashboard.md +745 -177
  211. package/docs/demos/DataList/examples/DataList.md +1301 -292
  212. package/docs/demos/DescriptionList/examples/DescriptionList.md +472 -160
  213. package/docs/demos/Drawer/examples/Drawer.md +718 -262
  214. package/docs/demos/Form/examples/BasicForms.md +273 -21
  215. package/docs/demos/JumpLinks/examples/JumpLinks.md +862 -319
  216. package/docs/demos/Masthead/examples/Masthead.md +1119 -489
  217. package/docs/demos/Modal/examples/Modal.md +948 -321
  218. package/docs/demos/Nav/examples/Nav.md +3449 -499
  219. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +2418 -405
  220. package/docs/demos/Page/examples/Page.md +2137 -773
  221. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +13 -1
  222. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +52 -4
  223. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +1913 -504
  224. package/docs/demos/Skeleton/examples/Skeleton.md +145 -52
  225. package/docs/demos/Table/examples/Table.md +11807 -2275
  226. package/docs/demos/Tabs/examples/Tabs.md +1117 -337
  227. package/docs/demos/Toolbar/examples/Toolbar.md +1818 -286
  228. package/docs/demos/Wizard/examples/Wizard.md +1705 -526
  229. package/docs/layouts/Bullseye/examples/Bullseye.css +2 -2
  230. package/docs/layouts/Bullseye/examples/Bullseye.md +2 -1
  231. package/docs/layouts/Flex/examples/Flex.css +3 -3
  232. package/docs/layouts/Flex/examples/Flex.md +3 -2
  233. package/docs/layouts/Gallery/examples/Gallery.css +2 -2
  234. package/docs/layouts/Gallery/examples/Gallery.md +4 -3
  235. package/docs/layouts/Grid/examples/Grid.css +1 -1
  236. package/docs/layouts/Grid/examples/Grid.md +6 -5
  237. package/docs/layouts/Level/examples/Level.css +3 -3
  238. package/docs/layouts/Level/examples/Level.md +2 -1
  239. package/docs/layouts/Split/examples/Split.css +1 -1
  240. package/docs/layouts/Split/examples/Split.md +2 -1
  241. package/docs/layouts/Stack/examples/Stack.css +3 -3
  242. package/docs/layouts/Stack/examples/Stack.md +2 -1
  243. package/docs/utilities/Accessibility/examples/Accessibility.md +3 -2
  244. package/docs/utilities/Alignment/examples/Alignment.css +4 -4
  245. package/docs/utilities/Alignment/examples/Alignment.md +3 -2
  246. package/docs/utilities/BackgroundColor/examples/BackgroundColor.md +5 -4
  247. package/docs/utilities/BoxShadow/examples/box-shadow.css +2 -2
  248. package/docs/utilities/BoxShadow/examples/box-shadow.md +2 -1
  249. package/docs/utilities/Display/examples/Display.css +1 -1
  250. package/docs/utilities/Display/examples/Display.md +3 -2
  251. package/docs/utilities/Flex/examples/Flex.css +7 -7
  252. package/docs/utilities/Flex/examples/Flex.md +3 -2
  253. package/docs/utilities/Float/examples/Float.css +2 -2
  254. package/docs/utilities/Float/examples/Float.md +3 -2
  255. package/docs/utilities/Sizing/examples/Sizing.md +8 -7
  256. package/docs/utilities/Spacing/examples/Spacing.css +2 -2
  257. package/docs/utilities/Spacing/examples/Spacing.md +3 -2
  258. package/docs/utilities/Text/examples/Text.md +5 -4
  259. package/icons/PfIcons/add-circle-o.svg +4 -0
  260. package/icons/PfIcons/ansible-tower.svg +4 -0
  261. package/icons/PfIcons/applications.svg +4 -0
  262. package/icons/PfIcons/arrow.svg +4 -0
  263. package/icons/PfIcons/asleep.svg +4 -0
  264. package/icons/PfIcons/attention-bell.svg +4 -0
  265. package/icons/PfIcons/automation.svg +4 -0
  266. package/icons/PfIcons/bell.svg +4 -0
  267. package/icons/PfIcons/blueprint.svg +4 -0
  268. package/icons/PfIcons/build.svg +4 -0
  269. package/icons/PfIcons/builder-image.svg +4 -0
  270. package/icons/PfIcons/bundle.svg +4 -0
  271. package/icons/PfIcons/catalog.svg +4 -0
  272. package/icons/PfIcons/chat.svg +4 -0
  273. package/icons/PfIcons/close.svg +4 -0
  274. package/icons/PfIcons/cloud-security.svg +4 -0
  275. package/icons/PfIcons/cloud-tenant.svg +4 -0
  276. package/icons/PfIcons/cluster.svg +4 -0
  277. package/icons/PfIcons/connected.svg +4 -0
  278. package/icons/PfIcons/container-node.svg +4 -0
  279. package/icons/PfIcons/cpu.svg +4 -0
  280. package/icons/PfIcons/critical-risk.svg +4 -0
  281. package/icons/PfIcons/data-processor.svg +4 -0
  282. package/icons/PfIcons/data-sink.svg +4 -0
  283. package/icons/PfIcons/data-source.svg +4 -0
  284. package/icons/PfIcons/degraded.svg +4 -0
  285. package/icons/PfIcons/disconnected.svg +4 -0
  286. package/icons/PfIcons/domain.svg +4 -0
  287. package/icons/PfIcons/edit.svg +4 -0
  288. package/icons/PfIcons/enhancement.svg +4 -0
  289. package/icons/PfIcons/enterprise.svg +4 -0
  290. package/icons/PfIcons/equalizer.svg +4 -0
  291. package/icons/PfIcons/error-circle-o.svg +4 -0
  292. package/icons/PfIcons/export.svg +4 -0
  293. package/icons/PfIcons/filter.svg +4 -0
  294. package/icons/PfIcons/flavor.svg +4 -0
  295. package/icons/PfIcons/folder-close.svg +4 -0
  296. package/icons/PfIcons/folder-open.svg +4 -0
  297. package/icons/PfIcons/globe-route.svg +4 -0
  298. package/icons/PfIcons/help.svg +4 -0
  299. package/icons/PfIcons/history.svg +4 -0
  300. package/icons/PfIcons/home.svg +4 -0
  301. package/icons/PfIcons/import.svg +4 -0
  302. package/icons/PfIcons/in-progress.svg +4 -0
  303. package/icons/PfIcons/info.svg +4 -0
  304. package/icons/PfIcons/infrastructure.svg +4 -0
  305. package/icons/PfIcons/integration.svg +4 -0
  306. package/icons/PfIcons/key.svg +4 -0
  307. package/icons/PfIcons/locked.svg +4 -0
  308. package/icons/PfIcons/maintenance.svg +4 -0
  309. package/icons/PfIcons/memory.svg +4 -0
  310. package/icons/PfIcons/messages.svg +4 -0
  311. package/icons/PfIcons/middleware.svg +4 -0
  312. package/icons/PfIcons/migration.svg +4 -0
  313. package/icons/PfIcons/module.svg +4 -0
  314. package/icons/PfIcons/monitoring.svg +4 -0
  315. package/icons/PfIcons/multicluster.svg +4 -0
  316. package/icons/PfIcons/namespaces.svg +4 -0
  317. package/icons/PfIcons/network.svg +4 -0
  318. package/icons/PfIcons/new-process.svg +4 -0
  319. package/icons/PfIcons/not-started.svg +4 -0
  320. package/icons/PfIcons/off.svg +4 -0
  321. package/icons/PfIcons/ok.svg +4 -0
  322. package/icons/PfIcons/on-running.svg +4 -0
  323. package/icons/PfIcons/on.svg +4 -0
  324. package/icons/PfIcons/open-drawer-right.svg +4 -0
  325. package/icons/PfIcons/openshift.svg +4 -0
  326. package/icons/PfIcons/openstack.svg +4 -0
  327. package/icons/PfIcons/optimize.svg +4 -0
  328. package/icons/PfIcons/orders.svg +4 -0
  329. package/icons/PfIcons/os-image.svg +4 -0
  330. package/icons/PfIcons/package.svg +4 -0
  331. package/icons/PfIcons/panel-close.svg +4 -0
  332. package/icons/PfIcons/panel-open.svg +4 -0
  333. package/icons/PfIcons/paused.svg +4 -0
  334. package/icons/PfIcons/pending.svg +4 -0
  335. package/icons/PfIcons/pficon-dragdrop.svg +4 -0
  336. package/icons/PfIcons/pficon-history.svg +4 -0
  337. package/icons/PfIcons/pficon-network-range.svg +4 -0
  338. package/icons/PfIcons/pficon-satellite.svg +4 -0
  339. package/icons/PfIcons/pficon-sort-common-asc.svg +4 -0
  340. package/icons/PfIcons/pficon-sort-common-desc.svg +4 -0
  341. package/icons/PfIcons/pficon-template.svg +4 -0
  342. package/icons/PfIcons/pficon-vcenter.svg +4 -0
  343. package/icons/PfIcons/plugged.svg +4 -0
  344. package/icons/PfIcons/port.svg +4 -0
  345. package/icons/PfIcons/print.svg +4 -0
  346. package/icons/PfIcons/private.svg +4 -0
  347. package/icons/PfIcons/process-automation.svg +4 -0
  348. package/icons/PfIcons/project.svg +4 -0
  349. package/icons/PfIcons/rebalance.svg +4 -0
  350. package/icons/PfIcons/rebooting.svg +4 -0
  351. package/icons/PfIcons/regions.svg +4 -0
  352. package/icons/PfIcons/registry.svg +4 -0
  353. package/icons/PfIcons/remove2.svg +4 -0
  354. package/icons/PfIcons/replicator.svg +4 -0
  355. package/icons/PfIcons/repository.svg +4 -0
  356. package/icons/PfIcons/resource-pool.svg +4 -0
  357. package/icons/PfIcons/resources-almost-empty.svg +4 -0
  358. package/icons/PfIcons/resources-almost-full.svg +4 -0
  359. package/icons/PfIcons/resources-empty.svg +4 -0
  360. package/icons/PfIcons/resources-full.svg +4 -0
  361. package/icons/PfIcons/running.svg +4 -0
  362. package/icons/PfIcons/save.svg +4 -0
  363. package/icons/PfIcons/screen.svg +4 -0
  364. package/icons/PfIcons/security.svg +4 -0
  365. package/icons/PfIcons/server-group.svg +4 -0
  366. package/icons/PfIcons/server.svg +4 -0
  367. package/icons/PfIcons/service-catalog.svg +4 -0
  368. package/icons/PfIcons/service.svg +4 -0
  369. package/icons/PfIcons/services.svg +4 -0
  370. package/icons/PfIcons/severity-critical.svg +4 -0
  371. package/icons/PfIcons/severity-important.svg +4 -0
  372. package/icons/PfIcons/severity-minor.svg +4 -0
  373. package/icons/PfIcons/severity-moderate.svg +4 -0
  374. package/icons/PfIcons/severity-none.svg +4 -0
  375. package/icons/PfIcons/severity-undefined.svg +4 -0
  376. package/icons/PfIcons/spinner.svg +4 -0
  377. package/icons/PfIcons/spinner2.svg +4 -0
  378. package/icons/PfIcons/storage-domain.svg +4 -0
  379. package/icons/PfIcons/task.svg +4 -0
  380. package/icons/PfIcons/tenant.svg +4 -0
  381. package/icons/PfIcons/thumb-tack.svg +4 -0
  382. package/icons/PfIcons/topology.svg +4 -0
  383. package/icons/PfIcons/treeview.svg +4 -0
  384. package/icons/PfIcons/trend-down.svg +4 -0
  385. package/icons/PfIcons/trend-up.svg +4 -0
  386. package/icons/PfIcons/unknown.svg +4 -0
  387. package/icons/PfIcons/unlocked.svg +4 -0
  388. package/icons/PfIcons/unplugged.svg +4 -0
  389. package/icons/PfIcons/user.svg +4 -0
  390. package/icons/PfIcons/users.svg +4 -0
  391. package/icons/PfIcons/virtual-machine.svg +4 -0
  392. package/icons/PfIcons/volume.svg +4 -0
  393. package/icons/PfIcons/warning-triangle.svg +4 -0
  394. package/icons/PfIcons/zone.svg +4 -0
  395. package/layouts/Flex/flex.scss +83 -19
  396. package/layouts/Gallery/gallery.css +6 -2
  397. package/layouts/_index.css +6 -2
  398. package/package.json +55 -17
  399. package/patternfly-base-no-globals.css +969 -489
  400. package/patternfly-base.css +976 -489
  401. package/patternfly-charts.css +3 -3
  402. package/patternfly-no-globals.css +3623 -1194
  403. package/patternfly.css +3630 -1194
  404. package/patternfly.min.css +1 -1
  405. package/patternfly.min.css.map +1 -1
  406. package/patternfly.scss +48 -0
  407. package/sass-utilities/functions.scss +32 -25
  408. package/sass-utilities/mixins.scss +54 -23
  409. package/sass-utilities/namespaces-components.scss +6 -0
  410. package/sass-utilities/scss-variables.scss +3 -0
package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md CHANGED
@@ -16,9 +16,10 @@ wrapperTag: div
16
16
  <span class="pf-v6-c-button__text">Skip to content</span>
17
17
  </a>
18
18
  </div>
19
+
19
20
  <header
20
21
  class="pf-v6-c-masthead pf-m-display-stack pf-m-display-inline-on-lg"
21
- id="primary-detail-expanded-example-masthead"
22
+ id="primary-detail-expanded-example-docked"
22
23
  >
23
24
  <div class="pf-v6-c-masthead__main">
24
25
  <span class="pf-v6-c-masthead__toggle">
@@ -61,7 +62,7 @@ wrapperTag: div
61
62
  y1="2.25860997e-13%"
62
63
  x2="32%"
63
64
  y2="100%"
64
- id="linearGradient-primary-detail-expanded-example-masthead"
65
+ id="linearGradient-primary-detail-expanded-example-docked"
65
66
  >
66
67
  <stop stop-color="#2B9AF3" offset="0%" />
67
68
  <stop
@@ -115,11 +116,11 @@ wrapperTag: div
115
116
  />
116
117
  <path
117
118
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
118
- fill="url(#linearGradient-primary-detail-expanded-example-masthead)"
119
+ fill="url(#linearGradient-primary-detail-expanded-example-docked)"
119
120
  />
120
121
  <path
121
122
  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"
122
- fill="url(#linearGradient-primary-detail-expanded-example-masthead)"
123
+ fill="url(#linearGradient-primary-detail-expanded-example-docked)"
123
124
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
124
125
  />
125
126
  </g>
@@ -131,7 +132,7 @@ wrapperTag: div
131
132
  <div class="pf-v6-c-masthead__content">
132
133
  <div
133
134
  class="pf-v6-c-toolbar pf-m-static"
134
- id="primary-detail-expanded-example-masthead-toolbar"
135
+ id="primary-detail-expanded-example-docked-toolbar"
135
136
  >
136
137
  <div class="pf-v6-c-toolbar__content">
137
138
  <div class="pf-v6-c-toolbar__content-section">
@@ -149,7 +150,19 @@ wrapperTag: div
149
150
  aria-label="Application launcher"
150
151
  >
151
152
  <span class="pf-v6-c-menu-toggle__icon">
152
- <i class="fas fa-th" aria-hidden="true"></i>
153
+ <svg
154
+ class="pf-v6-svg"
155
+ viewBox="0 0 512 512"
156
+ fill="currentColor"
157
+ aria-hidden="true"
158
+ role="img"
159
+ width="1em"
160
+ height="1em"
161
+ >
162
+ <path
163
+ 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"
164
+ />
165
+ </svg>
153
166
  </span>
154
167
  </button>
155
168
  </div>
@@ -161,7 +174,19 @@ wrapperTag: div
161
174
  aria-label="Settings"
162
175
  >
163
176
  <span class="pf-v6-c-menu-toggle__icon">
164
- <i class="fas fa-cog" aria-hidden="true"></i>
177
+ <svg
178
+ class="pf-v6-svg"
179
+ viewBox="0 0 32 32"
180
+ fill="currentColor"
181
+ aria-hidden="true"
182
+ role="img"
183
+ width="1em"
184
+ height="1em"
185
+ >
186
+ <path
187
+ 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"
188
+ />
189
+ </svg>
165
190
  </span>
166
191
  </button>
167
192
  </div>
@@ -173,7 +198,19 @@ wrapperTag: div
173
198
  aria-label="Help"
174
199
  >
175
200
  <span class="pf-v6-c-menu-toggle__icon">
176
- <i class="fas fa-question-circle" aria-hidden="true"></i>
201
+ <svg
202
+ class="pf-v6-svg"
203
+ viewBox="0 0 512 512"
204
+ fill="currentColor"
205
+ aria-hidden="true"
206
+ role="img"
207
+ width="1em"
208
+ height="1em"
209
+ >
210
+ <path
211
+ 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"
212
+ />
213
+ </svg>
177
214
  </span>
178
215
  </button>
179
216
  </div>
@@ -187,7 +224,19 @@ wrapperTag: div
187
224
  aria-label="Actions"
188
225
  >
189
226
  <span class="pf-v6-c-menu-toggle__icon">
190
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
227
+ <svg
228
+ class="pf-v6-svg"
229
+ viewBox="0 0 32 32"
230
+ fill="currentColor"
231
+ aria-hidden="true"
232
+ role="img"
233
+ width="1em"
234
+ height="1em"
235
+ >
236
+ <path
237
+ 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"
238
+ />
239
+ </svg>
191
240
  </span>
192
241
  </button>
193
242
  </div>
@@ -198,44 +247,46 @@ wrapperTag: div
198
247
  </div>
199
248
  </header>
200
249
  <div class="pf-v6-c-page__sidebar">
201
- <div class="pf-v6-c-page__sidebar-body">
202
- <nav
203
- class="pf-v6-c-nav"
204
- id="primary-detail-expanded-example-primary-nav"
205
- aria-label="Global"
206
- >
207
- <ul class="pf-v6-c-nav__list" role="list">
208
- <li class="pf-v6-c-nav__item">
209
- <a href="#" class="pf-v6-c-nav__link">
210
- <span class="pf-v6-c-nav__link-text">System panel</span>
211
- </a>
212
- </li>
213
- <li class="pf-v6-c-nav__item">
214
- <a
215
- href="#"
216
- class="pf-v6-c-nav__link pf-m-current"
217
- aria-current="page"
218
- >
219
- <span class="pf-v6-c-nav__link-text">Policy</span>
220
- </a>
221
- </li>
222
- <li class="pf-v6-c-nav__item">
223
- <a href="#" class="pf-v6-c-nav__link">
224
- <span class="pf-v6-c-nav__link-text">Authentication</span>
225
- </a>
226
- </li>
227
- <li class="pf-v6-c-nav__item">
228
- <a href="#" class="pf-v6-c-nav__link">
229
- <span class="pf-v6-c-nav__link-text">Network services</span>
230
- </a>
231
- </li>
232
- <li class="pf-v6-c-nav__item">
233
- <a href="#" class="pf-v6-c-nav__link">
234
- <span class="pf-v6-c-nav__link-text">Server</span>
235
- </a>
236
- </li>
237
- </ul>
238
- </nav>
250
+ <div class="pf-v6-c-page__sidebar-main">
251
+ <div class="pf-v6-c-page__sidebar-body">
252
+ <nav
253
+ class="pf-v6-c-nav"
254
+ id="primary-detail-expanded-example-primary-nav"
255
+ aria-label="Global"
256
+ >
257
+ <ul class="pf-v6-c-nav__list" role="list">
258
+ <li class="pf-v6-c-nav__item">
259
+ <a href="#" class="pf-v6-c-nav__link">
260
+ <span class="pf-v6-c-nav__link-text">System panel</span>
261
+ </a>
262
+ </li>
263
+ <li class="pf-v6-c-nav__item">
264
+ <a
265
+ href="#"
266
+ class="pf-v6-c-nav__link pf-m-current"
267
+ aria-current="page"
268
+ >
269
+ <span class="pf-v6-c-nav__link-text">Policy</span>
270
+ </a>
271
+ </li>
272
+ <li class="pf-v6-c-nav__item">
273
+ <a href="#" class="pf-v6-c-nav__link">
274
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
275
+ </a>
276
+ </li>
277
+ <li class="pf-v6-c-nav__item">
278
+ <a href="#" class="pf-v6-c-nav__link">
279
+ <span class="pf-v6-c-nav__link-text">Network services</span>
280
+ </a>
281
+ </li>
282
+ <li class="pf-v6-c-nav__item">
283
+ <a href="#" class="pf-v6-c-nav__link">
284
+ <span class="pf-v6-c-nav__link-text">Server</span>
285
+ </a>
286
+ </li>
287
+ </ul>
288
+ </nav>
289
+ </div>
239
290
  </div>
240
291
  </div>
241
292
  <div class="pf-v6-c-page__main-container" tabindex="-1">
@@ -253,21 +304,57 @@ wrapperTag: div
253
304
  </li>
254
305
  <li class="pf-v6-c-breadcrumb__item">
255
306
  <span class="pf-v6-c-breadcrumb__item-divider">
256
- <i class="fas fa-angle-right" aria-hidden="true"></i>
307
+ <svg
308
+ class="pf-v6-svg"
309
+ viewBox="0 0 20 20"
310
+ fill="currentColor"
311
+ aria-hidden="true"
312
+ role="img"
313
+ width="1em"
314
+ height="1em"
315
+ >
316
+ <path
317
+ 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"
318
+ />
319
+ </svg>
257
320
  </span>
258
321
 
259
322
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
260
323
  </li>
261
324
  <li class="pf-v6-c-breadcrumb__item">
262
325
  <span class="pf-v6-c-breadcrumb__item-divider">
263
- <i class="fas fa-angle-right" aria-hidden="true"></i>
326
+ <svg
327
+ class="pf-v6-svg"
328
+ viewBox="0 0 20 20"
329
+ fill="currentColor"
330
+ aria-hidden="true"
331
+ role="img"
332
+ width="1em"
333
+ height="1em"
334
+ >
335
+ <path
336
+ 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"
337
+ />
338
+ </svg>
264
339
  </span>
265
340
 
266
341
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
267
342
  </li>
268
343
  <li class="pf-v6-c-breadcrumb__item">
269
344
  <span class="pf-v6-c-breadcrumb__item-divider">
270
- <i class="fas fa-angle-right" aria-hidden="true"></i>
345
+ <svg
346
+ class="pf-v6-svg"
347
+ viewBox="0 0 20 20"
348
+ fill="currentColor"
349
+ aria-hidden="true"
350
+ role="img"
351
+ width="1em"
352
+ height="1em"
353
+ >
354
+ <path
355
+ 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"
356
+ />
357
+ </svg>
271
358
  </span>
272
359
 
273
360
  <a
@@ -280,9 +367,15 @@ wrapperTag: div
280
367
  </nav>
281
368
  </div>
282
369
  </section>
283
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
370
+ <section
371
+ class="pf-v6-c-page__main-section pf-m-limit-width"
372
+ aria-labelledby="main-title"
373
+ >
284
374
  <div class="pf-v6-c-page__main-body">
285
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
375
+ <h1
376
+ class="pf-v6-c-content--h1 pf-m-page-title"
377
+ id="main-title"
378
+ >Main title</h1>
286
379
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
287
380
  </div>
288
381
  </section>
@@ -312,7 +405,19 @@ wrapperTag: div
312
405
  aria-controls="primary-detail-expanded-example-drawer-toolbar-expandable-content"
313
406
  >
314
407
  <span class="pf-v6-c-menu-toggle__icon">
315
- <i class="fas fa-filter" aria-hidden="true"></i>
408
+ <svg
409
+ class="pf-v6-svg"
410
+ viewBox="0 0 32 32"
411
+ fill="currentColor"
412
+ aria-hidden="true"
413
+ role="img"
414
+ width="1em"
415
+ height="1em"
416
+ >
417
+ <path
418
+ d="M29.875 3.5V7a.876.876 0 0 1-.256.619l-9.744 9.744v10.638a.875.875 0 0 1-.599.83l-6 2a.876.876 0 0 1-.788-.12.874.874 0 0 1-.363-.71V17.363L2.381 7.619A.876.876 0 0 1 2.125 7V3.5c0-.758.617-1.375 1.375-1.375h25c.758 0 1.375.617 1.375 1.375Z"
419
+ />
420
+ </svg>
316
421
  </span>
317
422
  </button>
318
423
  </div>
@@ -331,17 +436,38 @@ wrapperTag: div
331
436
  id="primary-detail-expanded-example-drawer-toolbar-search-filter-menu"
332
437
  >
333
438
  <span class="pf-v6-c-menu-toggle__icon">
334
- <i class="fas fa-filter" aria-hidden="true"></i>
439
+ <svg
440
+ class="pf-v6-svg"
441
+ viewBox="0 0 32 32"
442
+ fill="currentColor"
443
+ aria-hidden="true"
444
+ role="img"
445
+ width="1em"
446
+ height="1em"
447
+ >
448
+ <path
449
+ d="M29.875 3.5V7a.876.876 0 0 1-.256.619l-9.744 9.744v10.638a.875.875 0 0 1-.599.83l-6 2a.876.876 0 0 1-.788-.12.874.874 0 0 1-.363-.71V17.363L2.381 7.619A.876.876 0 0 1 2.125 7V3.5c0-.758.617-1.375 1.375-1.375h25c.758 0 1.375.617 1.375 1.375Z"
450
+ />
451
+ </svg>
335
452
  </span>
336
453
  <span class="pf-v6-c-menu-toggle__text">Name</span>
337
454
  <span class="pf-v6-c-menu-toggle__controls">
338
455
  <span
339
456
  class="pf-v6-c-menu-toggle__toggle-icon"
340
457
  >
341
- <i
342
- class="fas fa-caret-down fa-fw"
458
+ <svg
459
+ class="pf-v6-svg"
460
+ viewBox="0 0 20 20"
461
+ fill="currentColor"
343
462
  aria-hidden="true"
344
- ></i>
463
+ role="img"
464
+ width="1em"
465
+ height="1em"
466
+ >
467
+ <path
468
+ d="M18.92 5.62C18.77 5.25 18.4 5 18 5H2a1.003 1.003 0 0 0-.71 1.71l7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65c.29-.29.37-.72.22-1.09Z"
469
+ />
470
+ </svg>
345
471
  </span>
346
472
  </span>
347
473
  </button>
@@ -388,10 +514,19 @@ wrapperTag: div
388
514
  <span
389
515
  class="pf-v6-c-menu-toggle__toggle-icon"
390
516
  >
391
- <i
392
- class="fas fa-caret-down fa-fw"
517
+ <svg
518
+ class="pf-v6-svg"
519
+ viewBox="0 0 20 20"
520
+ fill="currentColor"
393
521
  aria-hidden="true"
394
- ></i>
522
+ role="img"
523
+ width="1em"
524
+ height="1em"
525
+ >
526
+ <path
527
+ d="M18.92 5.62C18.77 5.25 18.4 5 18 5H2a1.003 1.003 0 0 0-.71 1.71l7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65c.29-.29.37-.72.22-1.09Z"
528
+ />
529
+ </svg>
395
530
  </span>
396
531
  </span>
397
532
  </button>
@@ -408,10 +543,19 @@ wrapperTag: div
408
543
  <span
409
544
  class="pf-v6-c-menu-toggle__toggle-icon"
410
545
  >
411
- <i
412
- class="fas fa-caret-down fa-fw"
546
+ <svg
547
+ class="pf-v6-svg"
548
+ viewBox="0 0 20 20"
549
+ fill="currentColor"
413
550
  aria-hidden="true"
414
- ></i>
551
+ role="img"
552
+ width="1em"
553
+ height="1em"
554
+ >
555
+ <path
556
+ d="M18.92 5.62C18.77 5.25 18.4 5 18 5H2a1.003 1.003 0 0 0-.71 1.71l7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65c.29-.29.37-.72.22-1.09Z"
557
+ />
558
+ </svg>
415
559
  </span>
416
560
  </span>
417
561
  </button>
@@ -426,10 +570,25 @@ wrapperTag: div
426
570
  aria-label="Sort"
427
571
  >
428
572
  <span class="pf-v6-c-button__icon">
429
- <i
430
- class="fas fa-sort-amount-down pf-v6-m-mirror-inline-rtl"
431
- aria-hidden="true"
432
- ></i>
573
+ <span class="pf-v6-c-icon">
574
+ <span
575
+ class="pf-v6-c-icon__content pf-v6-m-mirror-inline-rtl"
576
+ >
577
+ <svg
578
+ class="pf-v6-svg"
579
+ viewBox="0 0 512 512"
580
+ fill="currentColor"
581
+ aria-hidden="true"
582
+ role="img"
583
+ width="1em"
584
+ height="1em"
585
+ >
586
+ <path
587
+ d="M304 416h-64a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h64a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zm-128-64h-48V48a16 16 0 0 0-16-16H80a16 16 0 0 0-16 16v304H16c-14.19 0-21.37 17.24-11.29 27.31l80 96a16 16 0 0 0 22.62 0l80-96C197.35 369.26 190.22 352 176 352zm256-192H240a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h192a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zm-64 128H240a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h128a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zM496 32H240a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h256a16 16 0 0 0 16-16V48a16 16 0 0 0-16-16z"
588
+ />
589
+ </svg>
590
+ </span>
591
+ </span>
433
592
  </span>
434
593
  </button>
435
594
  </div>
@@ -465,7 +624,19 @@ wrapperTag: div
465
624
  id="primary-detail-expanded-example-drawer-toolbar-overflow-menu-toggle"
466
625
  >
467
626
  <span class="pf-v6-c-menu-toggle__icon">
468
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
627
+ <svg
628
+ class="pf-v6-svg"
629
+ viewBox="0 0 32 32"
630
+ fill="currentColor"
631
+ aria-hidden="true"
632
+ role="img"
633
+ width="1em"
634
+ height="1em"
635
+ >
636
+ <path
637
+ 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"
638
+ />
639
+ </svg>
469
640
  </span>
470
641
  </button>
471
642
  </div>
@@ -478,7 +649,6 @@ wrapperTag: div
478
649
  class="pf-v6-c-menu-toggle pf-m-text pf-m-plain"
479
650
  type="button"
480
651
  aria-expanded="false"
481
- aria-label="Menu toggle"
482
652
  id="primary-detail-expanded-example-drawer-toolbar-top-pagination"
483
653
  >
484
654
  <span class="pf-v6-c-menu-toggle__text">
@@ -489,10 +659,19 @@ wrapperTag: div
489
659
  <span
490
660
  class="pf-v6-c-menu-toggle__toggle-icon"
491
661
  >
492
- <i
493
- class="fas fa-caret-down fa-fw"
662
+ <svg
663
+ class="pf-v6-svg"
664
+ viewBox="0 0 20 20"
665
+ fill="currentColor"
494
666
  aria-hidden="true"
495
- ></i>
667
+ role="img"
668
+ width="1em"
669
+ height="1em"
670
+ >
671
+ <path
672
+ d="M18.92 5.62C18.77 5.25 18.4 5 18 5H2a1.003 1.003 0 0 0-.71 1.71l7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65c.29-.29.37-.72.22-1.09Z"
673
+ />
674
+ </svg>
496
675
  </span>
497
676
  </span>
498
677
  </button>
@@ -511,10 +690,19 @@ wrapperTag: div
511
690
  aria-label="Go to previous page"
512
691
  >
513
692
  <span class="pf-v6-c-button__icon">
514
- <i
515
- class="fas fa-angle-left"
693
+ <svg
694
+ class="pf-v6-svg"
695
+ viewBox="0 0 256 512"
696
+ fill="currentColor"
516
697
  aria-hidden="true"
517
- ></i>
698
+ role="img"
699
+ width="1em"
700
+ height="1em"
701
+ >
702
+ <path
703
+ d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"
704
+ />
705
+ </svg>
518
706
  </span>
519
707
  </button>
520
708
  </div>
@@ -527,10 +715,19 @@ wrapperTag: div
527
715
  aria-label="Go to next page"
528
716
  >
529
717
  <span class="pf-v6-c-button__icon">
530
- <i
531
- class="fas fa-angle-right"
718
+ <svg
719
+ class="pf-v6-svg"
720
+ viewBox="0 0 256 512"
721
+ fill="currentColor"
532
722
  aria-hidden="true"
533
- ></i>
723
+ role="img"
724
+ width="1em"
725
+ height="1em"
726
+ >
727
+ <path
728
+ d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
729
+ />
730
+ </svg>
534
731
  </span>
535
732
  </button>
536
733
  </div>
@@ -1093,7 +1290,19 @@ wrapperTag: div
1093
1290
  aria-label="Close drawer panel"
1094
1291
  >
1095
1292
  <span class="pf-v6-c-button__icon">
1096
- <i class="fas fa-times" aria-hidden="true"></i>
1293
+ <svg
1294
+ class="pf-v6-svg"
1295
+ viewBox="0 0 20 20"
1296
+ fill="currentColor"
1297
+ aria-hidden="true"
1298
+ role="img"
1299
+ width="1em"
1300
+ height="1em"
1301
+ >
1302
+ <path
1303
+ 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"
1304
+ />
1305
+ </svg>
1097
1306
  </span>
1098
1307
  </button>
1099
1308
  </div>
@@ -1112,6 +1321,7 @@ wrapperTag: div
1112
1321
  <div class="pf-v6-c-drawer__body pf-m-no-padding">
1113
1322
  <div
1114
1323
  class="pf-v6-c-tabs pf-m-box pf-m-fill"
1324
+ aria-label="Node 2"
1115
1325
  role="region"
1116
1326
  id="primary-detail-expanded-example-drawer-tabs"
1117
1327
  >
@@ -1122,11 +1332,27 @@ wrapperTag: div
1122
1332
  aria-label="Scroll left"
1123
1333
  >
1124
1334
  <span class="pf-v6-c-button__icon">
1125
- <i class="fas fa-angle-left" aria-hidden="true"></i>
1335
+ <svg
1336
+ class="pf-v6-svg"
1337
+ viewBox="0 0 20 20"
1338
+ fill="currentColor"
1339
+ aria-hidden="true"
1340
+ role="img"
1341
+ width="1em"
1342
+ height="1em"
1343
+ >
1344
+ <path
1345
+ d="m6.41 10 7.29-7.29.02-.02c.38-.4.37-1.03-.02-1.41-.4-.38-1.03-.37-1.41.02L4.64 8.95a1.49 1.49 0 0 0 0 2.12l7.65 7.65c.19.19.44.29.71.29.27 0 .52-.11.71-.29a.996.996 0 0 0 0-1.41l-7.29-7.29Z"
1346
+ />
1347
+ </svg>
1126
1348
  </span>
1127
1349
  </button>
1128
1350
  </div>
1129
- <ul class="pf-v6-c-tabs__list" role="tablist">
1351
+ <ul
1352
+ class="pf-v6-c-tabs__list"
1353
+ role="tablist"
1354
+ aria-label="Node 2"
1355
+ >
1130
1356
  <li
1131
1357
  class="pf-v6-c-tabs__item pf-m-current"
1132
1358
  role="presentation"
@@ -1135,6 +1361,7 @@ wrapperTag: div
1135
1361
  type="button"
1136
1362
  class="pf-v6-c-tabs__link"
1137
1363
  role="tab"
1364
+ aria-selected="true"
1138
1365
  aria-controls="primary-detail-expanded-example-drawer-tabs-tab1-panel"
1139
1366
  id="primary-detail-expanded-example-drawer-tabs-tab1-link"
1140
1367
  >
@@ -1146,6 +1373,7 @@ wrapperTag: div
1146
1373
  type="button"
1147
1374
  class="pf-v6-c-tabs__link"
1148
1375
  role="tab"
1376
+ aria-selected="false"
1149
1377
  aria-controls="primary-detail-expanded-example-drawer-tabs-tab2-panel"
1150
1378
  id="primary-detail-expanded-example-drawer-tabs-tab2-link"
1151
1379
  >
@@ -1160,7 +1388,19 @@ wrapperTag: div
1160
1388
  aria-label="Scroll right"
1161
1389
  >
1162
1390
  <span class="pf-v6-c-button__icon">
1163
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1391
+ <svg
1392
+ class="pf-v6-svg"
1393
+ viewBox="0 0 20 20"
1394
+ fill="currentColor"
1395
+ aria-hidden="true"
1396
+ role="img"
1397
+ width="1em"
1398
+ height="1em"
1399
+ >
1400
+ <path
1401
+ 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"
1402
+ />
1403
+ </svg>
1164
1404
  </span>
1165
1405
  </button>
1166
1406
  </div>
@@ -1280,9 +1520,10 @@ wrapperTag: div
1280
1520
  <span class="pf-v6-c-button__text">Skip to content</span>
1281
1521
  </a>
1282
1522
  </div>
1523
+
1283
1524
  <header
1284
1525
  class="pf-v6-c-masthead pf-m-display-stack pf-m-display-inline-on-lg"
1285
- id="primary-detail-collapsed-example-masthead"
1526
+ id="primary-detail-collapsed-example-docked"
1286
1527
  >
1287
1528
  <div class="pf-v6-c-masthead__main">
1288
1529
  <span class="pf-v6-c-masthead__toggle">
@@ -1325,7 +1566,7 @@ wrapperTag: div
1325
1566
  y1="2.25860997e-13%"
1326
1567
  x2="32%"
1327
1568
  y2="100%"
1328
- id="linearGradient-primary-detail-collapsed-example-masthead"
1569
+ id="linearGradient-primary-detail-collapsed-example-docked"
1329
1570
  >
1330
1571
  <stop stop-color="#2B9AF3" offset="0%" />
1331
1572
  <stop
@@ -1379,11 +1620,11 @@ wrapperTag: div
1379
1620
  />
1380
1621
  <path
1381
1622
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
1382
- fill="url(#linearGradient-primary-detail-collapsed-example-masthead)"
1623
+ fill="url(#linearGradient-primary-detail-collapsed-example-docked)"
1383
1624
  />
1384
1625
  <path
1385
1626
  d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z"
1386
- fill="url(#linearGradient-primary-detail-collapsed-example-masthead)"
1627
+ fill="url(#linearGradient-primary-detail-collapsed-example-docked)"
1387
1628
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
1388
1629
  />
1389
1630
  </g>
@@ -1395,7 +1636,7 @@ wrapperTag: div
1395
1636
  <div class="pf-v6-c-masthead__content">
1396
1637
  <div
1397
1638
  class="pf-v6-c-toolbar pf-m-static"
1398
- id="primary-detail-collapsed-example-masthead-toolbar"
1639
+ id="primary-detail-collapsed-example-docked-toolbar"
1399
1640
  >
1400
1641
  <div class="pf-v6-c-toolbar__content">
1401
1642
  <div class="pf-v6-c-toolbar__content-section">
@@ -1413,7 +1654,19 @@ wrapperTag: div
1413
1654
  aria-label="Application launcher"
1414
1655
  >
1415
1656
  <span class="pf-v6-c-menu-toggle__icon">
1416
- <i class="fas fa-th" aria-hidden="true"></i>
1657
+ <svg
1658
+ class="pf-v6-svg"
1659
+ viewBox="0 0 512 512"
1660
+ fill="currentColor"
1661
+ aria-hidden="true"
1662
+ role="img"
1663
+ width="1em"
1664
+ height="1em"
1665
+ >
1666
+ <path
1667
+ 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"
1668
+ />
1669
+ </svg>
1417
1670
  </span>
1418
1671
  </button>
1419
1672
  </div>
@@ -1425,7 +1678,19 @@ wrapperTag: div
1425
1678
  aria-label="Settings"
1426
1679
  >
1427
1680
  <span class="pf-v6-c-menu-toggle__icon">
1428
- <i class="fas fa-cog" aria-hidden="true"></i>
1681
+ <svg
1682
+ class="pf-v6-svg"
1683
+ viewBox="0 0 32 32"
1684
+ fill="currentColor"
1685
+ aria-hidden="true"
1686
+ role="img"
1687
+ width="1em"
1688
+ height="1em"
1689
+ >
1690
+ <path
1691
+ 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"
1692
+ />
1693
+ </svg>
1429
1694
  </span>
1430
1695
  </button>
1431
1696
  </div>
@@ -1437,7 +1702,19 @@ wrapperTag: div
1437
1702
  aria-label="Help"
1438
1703
  >
1439
1704
  <span class="pf-v6-c-menu-toggle__icon">
1440
- <i class="fas fa-question-circle" aria-hidden="true"></i>
1705
+ <svg
1706
+ class="pf-v6-svg"
1707
+ viewBox="0 0 512 512"
1708
+ fill="currentColor"
1709
+ aria-hidden="true"
1710
+ role="img"
1711
+ width="1em"
1712
+ height="1em"
1713
+ >
1714
+ <path
1715
+ 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"
1716
+ />
1717
+ </svg>
1441
1718
  </span>
1442
1719
  </button>
1443
1720
  </div>
@@ -1451,7 +1728,19 @@ wrapperTag: div
1451
1728
  aria-label="Actions"
1452
1729
  >
1453
1730
  <span class="pf-v6-c-menu-toggle__icon">
1454
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1731
+ <svg
1732
+ class="pf-v6-svg"
1733
+ viewBox="0 0 32 32"
1734
+ fill="currentColor"
1735
+ aria-hidden="true"
1736
+ role="img"
1737
+ width="1em"
1738
+ height="1em"
1739
+ >
1740
+ <path
1741
+ 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"
1742
+ />
1743
+ </svg>
1455
1744
  </span>
1456
1745
  </button>
1457
1746
  </div>
@@ -1462,44 +1751,46 @@ wrapperTag: div
1462
1751
  </div>
1463
1752
  </header>
1464
1753
  <div class="pf-v6-c-page__sidebar">
1465
- <div class="pf-v6-c-page__sidebar-body">
1466
- <nav
1467
- class="pf-v6-c-nav"
1468
- id="primary-detail-collapsed-example-primary-nav"
1469
- aria-label="Global"
1470
- >
1471
- <ul class="pf-v6-c-nav__list" role="list">
1472
- <li class="pf-v6-c-nav__item">
1473
- <a href="#" class="pf-v6-c-nav__link">
1474
- <span class="pf-v6-c-nav__link-text">System panel</span>
1475
- </a>
1476
- </li>
1477
- <li class="pf-v6-c-nav__item">
1478
- <a
1479
- href="#"
1480
- class="pf-v6-c-nav__link pf-m-current"
1481
- aria-current="page"
1482
- >
1483
- <span class="pf-v6-c-nav__link-text">Policy</span>
1484
- </a>
1485
- </li>
1486
- <li class="pf-v6-c-nav__item">
1487
- <a href="#" class="pf-v6-c-nav__link">
1488
- <span class="pf-v6-c-nav__link-text">Authentication</span>
1489
- </a>
1490
- </li>
1491
- <li class="pf-v6-c-nav__item">
1492
- <a href="#" class="pf-v6-c-nav__link">
1493
- <span class="pf-v6-c-nav__link-text">Network services</span>
1494
- </a>
1495
- </li>
1496
- <li class="pf-v6-c-nav__item">
1497
- <a href="#" class="pf-v6-c-nav__link">
1498
- <span class="pf-v6-c-nav__link-text">Server</span>
1499
- </a>
1500
- </li>
1501
- </ul>
1502
- </nav>
1754
+ <div class="pf-v6-c-page__sidebar-main">
1755
+ <div class="pf-v6-c-page__sidebar-body">
1756
+ <nav
1757
+ class="pf-v6-c-nav"
1758
+ id="primary-detail-collapsed-example-primary-nav"
1759
+ aria-label="Global"
1760
+ >
1761
+ <ul class="pf-v6-c-nav__list" role="list">
1762
+ <li class="pf-v6-c-nav__item">
1763
+ <a href="#" class="pf-v6-c-nav__link">
1764
+ <span class="pf-v6-c-nav__link-text">System panel</span>
1765
+ </a>
1766
+ </li>
1767
+ <li class="pf-v6-c-nav__item">
1768
+ <a
1769
+ href="#"
1770
+ class="pf-v6-c-nav__link pf-m-current"
1771
+ aria-current="page"
1772
+ >
1773
+ <span class="pf-v6-c-nav__link-text">Policy</span>
1774
+ </a>
1775
+ </li>
1776
+ <li class="pf-v6-c-nav__item">
1777
+ <a href="#" class="pf-v6-c-nav__link">
1778
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
1779
+ </a>
1780
+ </li>
1781
+ <li class="pf-v6-c-nav__item">
1782
+ <a href="#" class="pf-v6-c-nav__link">
1783
+ <span class="pf-v6-c-nav__link-text">Network services</span>
1784
+ </a>
1785
+ </li>
1786
+ <li class="pf-v6-c-nav__item">
1787
+ <a href="#" class="pf-v6-c-nav__link">
1788
+ <span class="pf-v6-c-nav__link-text">Server</span>
1789
+ </a>
1790
+ </li>
1791
+ </ul>
1792
+ </nav>
1793
+ </div>
1503
1794
  </div>
1504
1795
  </div>
1505
1796
  <div class="pf-v6-c-page__main-container" tabindex="-1">
@@ -1517,21 +1808,57 @@ wrapperTag: div
1517
1808
  </li>
1518
1809
  <li class="pf-v6-c-breadcrumb__item">
1519
1810
  <span class="pf-v6-c-breadcrumb__item-divider">
1520
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1811
+ <svg
1812
+ class="pf-v6-svg"
1813
+ viewBox="0 0 20 20"
1814
+ fill="currentColor"
1815
+ aria-hidden="true"
1816
+ role="img"
1817
+ width="1em"
1818
+ height="1em"
1819
+ >
1820
+ <path
1821
+ 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"
1822
+ />
1823
+ </svg>
1521
1824
  </span>
1522
1825
 
1523
1826
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1524
1827
  </li>
1525
1828
  <li class="pf-v6-c-breadcrumb__item">
1526
1829
  <span class="pf-v6-c-breadcrumb__item-divider">
1527
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1830
+ <svg
1831
+ class="pf-v6-svg"
1832
+ viewBox="0 0 20 20"
1833
+ fill="currentColor"
1834
+ aria-hidden="true"
1835
+ role="img"
1836
+ width="1em"
1837
+ height="1em"
1838
+ >
1839
+ <path
1840
+ 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"
1841
+ />
1842
+ </svg>
1528
1843
  </span>
1529
1844
 
1530
1845
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1531
1846
  </li>
1532
1847
  <li class="pf-v6-c-breadcrumb__item">
1533
1848
  <span class="pf-v6-c-breadcrumb__item-divider">
1534
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1849
+ <svg
1850
+ class="pf-v6-svg"
1851
+ viewBox="0 0 20 20"
1852
+ fill="currentColor"
1853
+ aria-hidden="true"
1854
+ role="img"
1855
+ width="1em"
1856
+ height="1em"
1857
+ >
1858
+ <path
1859
+ 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"
1860
+ />
1861
+ </svg>
1535
1862
  </span>
1536
1863
 
1537
1864
  <a
@@ -1544,9 +1871,15 @@ wrapperTag: div
1544
1871
  </nav>
1545
1872
  </div>
1546
1873
  </section>
1547
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
1874
+ <section
1875
+ class="pf-v6-c-page__main-section pf-m-limit-width"
1876
+ aria-labelledby="main-title"
1877
+ >
1548
1878
  <div class="pf-v6-c-page__main-body">
1549
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
1879
+ <h1
1880
+ class="pf-v6-c-content--h1 pf-m-page-title"
1881
+ id="main-title"
1882
+ >Main title</h1>
1550
1883
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
1551
1884
  </div>
1552
1885
  </section>
@@ -1577,7 +1910,19 @@ wrapperTag: div
1577
1910
  aria-controls="primary-detail-collapsed-example-drawer-toolbar-expandable-content"
1578
1911
  >
1579
1912
  <span class="pf-v6-c-menu-toggle__icon">
1580
- <i class="fas fa-filter" aria-hidden="true"></i>
1913
+ <svg
1914
+ class="pf-v6-svg"
1915
+ viewBox="0 0 32 32"
1916
+ fill="currentColor"
1917
+ aria-hidden="true"
1918
+ role="img"
1919
+ width="1em"
1920
+ height="1em"
1921
+ >
1922
+ <path
1923
+ d="M29.875 3.5V7a.876.876 0 0 1-.256.619l-9.744 9.744v10.638a.875.875 0 0 1-.599.83l-6 2a.876.876 0 0 1-.788-.12.874.874 0 0 1-.363-.71V17.363L2.381 7.619A.876.876 0 0 1 2.125 7V3.5c0-.758.617-1.375 1.375-1.375h25c.758 0 1.375.617 1.375 1.375Z"
1924
+ />
1925
+ </svg>
1581
1926
  </span>
1582
1927
  </button>
1583
1928
  </div>
@@ -1596,17 +1941,38 @@ wrapperTag: div
1596
1941
  id="primary-detail-collapsed-example-drawer-toolbar-search-filter-menu"
1597
1942
  >
1598
1943
  <span class="pf-v6-c-menu-toggle__icon">
1599
- <i class="fas fa-filter" aria-hidden="true"></i>
1944
+ <svg
1945
+ class="pf-v6-svg"
1946
+ viewBox="0 0 32 32"
1947
+ fill="currentColor"
1948
+ aria-hidden="true"
1949
+ role="img"
1950
+ width="1em"
1951
+ height="1em"
1952
+ >
1953
+ <path
1954
+ d="M29.875 3.5V7a.876.876 0 0 1-.256.619l-9.744 9.744v10.638a.875.875 0 0 1-.599.83l-6 2a.876.876 0 0 1-.788-.12.874.874 0 0 1-.363-.71V17.363L2.381 7.619A.876.876 0 0 1 2.125 7V3.5c0-.758.617-1.375 1.375-1.375h25c.758 0 1.375.617 1.375 1.375Z"
1955
+ />
1956
+ </svg>
1600
1957
  </span>
1601
1958
  <span class="pf-v6-c-menu-toggle__text">Name</span>
1602
1959
  <span class="pf-v6-c-menu-toggle__controls">
1603
1960
  <span
1604
1961
  class="pf-v6-c-menu-toggle__toggle-icon"
1605
1962
  >
1606
- <i
1607
- class="fas fa-caret-down fa-fw"
1963
+ <svg
1964
+ class="pf-v6-svg"
1965
+ viewBox="0 0 20 20"
1966
+ fill="currentColor"
1608
1967
  aria-hidden="true"
1609
- ></i>
1968
+ role="img"
1969
+ width="1em"
1970
+ height="1em"
1971
+ >
1972
+ <path
1973
+ d="M18.92 5.62C18.77 5.25 18.4 5 18 5H2a1.003 1.003 0 0 0-.71 1.71l7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65c.29-.29.37-.72.22-1.09Z"
1974
+ />
1975
+ </svg>
1610
1976
  </span>
1611
1977
  </span>
1612
1978
  </button>
@@ -1653,10 +2019,19 @@ wrapperTag: div
1653
2019
  <span
1654
2020
  class="pf-v6-c-menu-toggle__toggle-icon"
1655
2021
  >
1656
- <i
1657
- class="fas fa-caret-down fa-fw"
2022
+ <svg
2023
+ class="pf-v6-svg"
2024
+ viewBox="0 0 20 20"
2025
+ fill="currentColor"
1658
2026
  aria-hidden="true"
1659
- ></i>
2027
+ role="img"
2028
+ width="1em"
2029
+ height="1em"
2030
+ >
2031
+ <path
2032
+ d="M18.92 5.62C18.77 5.25 18.4 5 18 5H2a1.003 1.003 0 0 0-.71 1.71l7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65c.29-.29.37-.72.22-1.09Z"
2033
+ />
2034
+ </svg>
1660
2035
  </span>
1661
2036
  </span>
1662
2037
  </button>
@@ -1673,10 +2048,19 @@ wrapperTag: div
1673
2048
  <span
1674
2049
  class="pf-v6-c-menu-toggle__toggle-icon"
1675
2050
  >
1676
- <i
1677
- class="fas fa-caret-down fa-fw"
2051
+ <svg
2052
+ class="pf-v6-svg"
2053
+ viewBox="0 0 20 20"
2054
+ fill="currentColor"
1678
2055
  aria-hidden="true"
1679
- ></i>
2056
+ role="img"
2057
+ width="1em"
2058
+ height="1em"
2059
+ >
2060
+ <path
2061
+ d="M18.92 5.62C18.77 5.25 18.4 5 18 5H2a1.003 1.003 0 0 0-.71 1.71l7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65c.29-.29.37-.72.22-1.09Z"
2062
+ />
2063
+ </svg>
1680
2064
  </span>
1681
2065
  </span>
1682
2066
  </button>
@@ -1691,10 +2075,25 @@ wrapperTag: div
1691
2075
  aria-label="Sort"
1692
2076
  >
1693
2077
  <span class="pf-v6-c-button__icon">
1694
- <i
1695
- class="fas fa-sort-amount-down pf-v6-m-mirror-inline-rtl"
1696
- aria-hidden="true"
1697
- ></i>
2078
+ <span class="pf-v6-c-icon">
2079
+ <span
2080
+ class="pf-v6-c-icon__content pf-v6-m-mirror-inline-rtl"
2081
+ >
2082
+ <svg
2083
+ class="pf-v6-svg"
2084
+ viewBox="0 0 512 512"
2085
+ fill="currentColor"
2086
+ aria-hidden="true"
2087
+ role="img"
2088
+ width="1em"
2089
+ height="1em"
2090
+ >
2091
+ <path
2092
+ d="M304 416h-64a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h64a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zm-128-64h-48V48a16 16 0 0 0-16-16H80a16 16 0 0 0-16 16v304H16c-14.19 0-21.37 17.24-11.29 27.31l80 96a16 16 0 0 0 22.62 0l80-96C197.35 369.26 190.22 352 176 352zm256-192H240a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h192a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zm-64 128H240a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h128a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zM496 32H240a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h256a16 16 0 0 0 16-16V48a16 16 0 0 0-16-16z"
2093
+ />
2094
+ </svg>
2095
+ </span>
2096
+ </span>
1698
2097
  </span>
1699
2098
  </button>
1700
2099
  </div>
@@ -1730,7 +2129,19 @@ wrapperTag: div
1730
2129
  id="primary-detail-collapsed-example-drawer-toolbar-overflow-menu-toggle"
1731
2130
  >
1732
2131
  <span class="pf-v6-c-menu-toggle__icon">
1733
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
2132
+ <svg
2133
+ class="pf-v6-svg"
2134
+ viewBox="0 0 32 32"
2135
+ fill="currentColor"
2136
+ aria-hidden="true"
2137
+ role="img"
2138
+ width="1em"
2139
+ height="1em"
2140
+ >
2141
+ <path
2142
+ 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"
2143
+ />
2144
+ </svg>
1734
2145
  </span>
1735
2146
  </button>
1736
2147
  </div>
@@ -1743,7 +2154,6 @@ wrapperTag: div
1743
2154
  class="pf-v6-c-menu-toggle pf-m-text pf-m-plain"
1744
2155
  type="button"
1745
2156
  aria-expanded="false"
1746
- aria-label="Menu toggle"
1747
2157
  id="primary-detail-collapsed-example-drawer-toolbar-top-pagination"
1748
2158
  >
1749
2159
  <span class="pf-v6-c-menu-toggle__text">
@@ -1754,10 +2164,19 @@ wrapperTag: div
1754
2164
  <span
1755
2165
  class="pf-v6-c-menu-toggle__toggle-icon"
1756
2166
  >
1757
- <i
1758
- class="fas fa-caret-down fa-fw"
2167
+ <svg
2168
+ class="pf-v6-svg"
2169
+ viewBox="0 0 20 20"
2170
+ fill="currentColor"
1759
2171
  aria-hidden="true"
1760
- ></i>
2172
+ role="img"
2173
+ width="1em"
2174
+ height="1em"
2175
+ >
2176
+ <path
2177
+ d="M18.92 5.62C18.77 5.25 18.4 5 18 5H2a1.003 1.003 0 0 0-.71 1.71l7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65c.29-.29.37-.72.22-1.09Z"
2178
+ />
2179
+ </svg>
1761
2180
  </span>
1762
2181
  </span>
1763
2182
  </button>
@@ -1776,10 +2195,19 @@ wrapperTag: div
1776
2195
  aria-label="Go to previous page"
1777
2196
  >
1778
2197
  <span class="pf-v6-c-button__icon">
1779
- <i
1780
- class="fas fa-angle-left"
2198
+ <svg
2199
+ class="pf-v6-svg"
2200
+ viewBox="0 0 256 512"
2201
+ fill="currentColor"
1781
2202
  aria-hidden="true"
1782
- ></i>
2203
+ role="img"
2204
+ width="1em"
2205
+ height="1em"
2206
+ >
2207
+ <path
2208
+ d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"
2209
+ />
2210
+ </svg>
1783
2211
  </span>
1784
2212
  </button>
1785
2213
  </div>
@@ -1792,10 +2220,19 @@ wrapperTag: div
1792
2220
  aria-label="Go to next page"
1793
2221
  >
1794
2222
  <span class="pf-v6-c-button__icon">
1795
- <i
1796
- class="fas fa-angle-right"
2223
+ <svg
2224
+ class="pf-v6-svg"
2225
+ viewBox="0 0 256 512"
2226
+ fill="currentColor"
1797
2227
  aria-hidden="true"
1798
- ></i>
2228
+ role="img"
2229
+ width="1em"
2230
+ height="1em"
2231
+ >
2232
+ <path
2233
+ d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
2234
+ />
2235
+ </svg>
1799
2236
  </span>
1800
2237
  </button>
1801
2238
  </div>
@@ -2358,7 +2795,19 @@ wrapperTag: div
2358
2795
  aria-label="Close drawer panel"
2359
2796
  >
2360
2797
  <span class="pf-v6-c-button__icon">
2361
- <i class="fas fa-times" aria-hidden="true"></i>
2798
+ <svg
2799
+ class="pf-v6-svg"
2800
+ viewBox="0 0 20 20"
2801
+ fill="currentColor"
2802
+ aria-hidden="true"
2803
+ role="img"
2804
+ width="1em"
2805
+ height="1em"
2806
+ >
2807
+ <path
2808
+ 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"
2809
+ />
2810
+ </svg>
2362
2811
  </span>
2363
2812
  </button>
2364
2813
  </div>
@@ -2464,9 +2913,10 @@ wrapperTag: div
2464
2913
  <span class="pf-v6-c-button__text">Skip to content</span>
2465
2914
  </a>
2466
2915
  </div>
2916
+
2467
2917
  <header
2468
2918
  class="pf-v6-c-masthead pf-m-display-stack pf-m-display-inline-on-lg"
2469
- id="primary-detail-content-body-padding-example-masthead"
2919
+ id="primary-detail-content-body-padding-example-docked"
2470
2920
  >
2471
2921
  <div class="pf-v6-c-masthead__main">
2472
2922
  <span class="pf-v6-c-masthead__toggle">
@@ -2509,7 +2959,7 @@ wrapperTag: div
2509
2959
  y1="2.25860997e-13%"
2510
2960
  x2="32%"
2511
2961
  y2="100%"
2512
- id="linearGradient-primary-detail-content-body-padding-example-masthead"
2962
+ id="linearGradient-primary-detail-content-body-padding-example-docked"
2513
2963
  >
2514
2964
  <stop stop-color="#2B9AF3" offset="0%" />
2515
2965
  <stop
@@ -2563,11 +3013,11 @@ wrapperTag: div
2563
3013
  />
2564
3014
  <path
2565
3015
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
2566
- fill="url(#linearGradient-primary-detail-content-body-padding-example-masthead)"
3016
+ fill="url(#linearGradient-primary-detail-content-body-padding-example-docked)"
2567
3017
  />
2568
3018
  <path
2569
3019
  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"
2570
- fill="url(#linearGradient-primary-detail-content-body-padding-example-masthead)"
3020
+ fill="url(#linearGradient-primary-detail-content-body-padding-example-docked)"
2571
3021
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
2572
3022
  />
2573
3023
  </g>
@@ -2579,7 +3029,7 @@ wrapperTag: div
2579
3029
  <div class="pf-v6-c-masthead__content">
2580
3030
  <div
2581
3031
  class="pf-v6-c-toolbar pf-m-static"
2582
- id="primary-detail-content-body-padding-example-masthead-toolbar"
3032
+ id="primary-detail-content-body-padding-example-docked-toolbar"
2583
3033
  >
2584
3034
  <div class="pf-v6-c-toolbar__content">
2585
3035
  <div class="pf-v6-c-toolbar__content-section">
@@ -2597,7 +3047,19 @@ wrapperTag: div
2597
3047
  aria-label="Application launcher"
2598
3048
  >
2599
3049
  <span class="pf-v6-c-menu-toggle__icon">
2600
- <i class="fas fa-th" aria-hidden="true"></i>
3050
+ <svg
3051
+ class="pf-v6-svg"
3052
+ viewBox="0 0 512 512"
3053
+ fill="currentColor"
3054
+ aria-hidden="true"
3055
+ role="img"
3056
+ width="1em"
3057
+ height="1em"
3058
+ >
3059
+ <path
3060
+ 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"
3061
+ />
3062
+ </svg>
2601
3063
  </span>
2602
3064
  </button>
2603
3065
  </div>
@@ -2609,7 +3071,19 @@ wrapperTag: div
2609
3071
  aria-label="Settings"
2610
3072
  >
2611
3073
  <span class="pf-v6-c-menu-toggle__icon">
2612
- <i class="fas fa-cog" aria-hidden="true"></i>
3074
+ <svg
3075
+ class="pf-v6-svg"
3076
+ viewBox="0 0 32 32"
3077
+ fill="currentColor"
3078
+ aria-hidden="true"
3079
+ role="img"
3080
+ width="1em"
3081
+ height="1em"
3082
+ >
3083
+ <path
3084
+ 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"
3085
+ />
3086
+ </svg>
2613
3087
  </span>
2614
3088
  </button>
2615
3089
  </div>
@@ -2621,7 +3095,19 @@ wrapperTag: div
2621
3095
  aria-label="Help"
2622
3096
  >
2623
3097
  <span class="pf-v6-c-menu-toggle__icon">
2624
- <i class="fas fa-question-circle" aria-hidden="true"></i>
3098
+ <svg
3099
+ class="pf-v6-svg"
3100
+ viewBox="0 0 512 512"
3101
+ fill="currentColor"
3102
+ aria-hidden="true"
3103
+ role="img"
3104
+ width="1em"
3105
+ height="1em"
3106
+ >
3107
+ <path
3108
+ 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"
3109
+ />
3110
+ </svg>
2625
3111
  </span>
2626
3112
  </button>
2627
3113
  </div>
@@ -2635,7 +3121,19 @@ wrapperTag: div
2635
3121
  aria-label="Actions"
2636
3122
  >
2637
3123
  <span class="pf-v6-c-menu-toggle__icon">
2638
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
3124
+ <svg
3125
+ class="pf-v6-svg"
3126
+ viewBox="0 0 32 32"
3127
+ fill="currentColor"
3128
+ aria-hidden="true"
3129
+ role="img"
3130
+ width="1em"
3131
+ height="1em"
3132
+ >
3133
+ <path
3134
+ 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"
3135
+ />
3136
+ </svg>
2639
3137
  </span>
2640
3138
  </button>
2641
3139
  </div>
@@ -2646,44 +3144,46 @@ wrapperTag: div
2646
3144
  </div>
2647
3145
  </header>
2648
3146
  <div class="pf-v6-c-page__sidebar">
2649
- <div class="pf-v6-c-page__sidebar-body">
2650
- <nav
2651
- class="pf-v6-c-nav"
2652
- id="primary-detail-content-body-padding-example-primary-nav"
2653
- aria-label="Global"
2654
- >
2655
- <ul class="pf-v6-c-nav__list" role="list">
2656
- <li class="pf-v6-c-nav__item">
2657
- <a href="#" class="pf-v6-c-nav__link">
2658
- <span class="pf-v6-c-nav__link-text">System panel</span>
2659
- </a>
2660
- </li>
2661
- <li class="pf-v6-c-nav__item">
2662
- <a
2663
- href="#"
2664
- class="pf-v6-c-nav__link pf-m-current"
2665
- aria-current="page"
2666
- >
2667
- <span class="pf-v6-c-nav__link-text">Policy</span>
2668
- </a>
2669
- </li>
2670
- <li class="pf-v6-c-nav__item">
2671
- <a href="#" class="pf-v6-c-nav__link">
2672
- <span class="pf-v6-c-nav__link-text">Authentication</span>
2673
- </a>
2674
- </li>
2675
- <li class="pf-v6-c-nav__item">
2676
- <a href="#" class="pf-v6-c-nav__link">
2677
- <span class="pf-v6-c-nav__link-text">Network services</span>
2678
- </a>
2679
- </li>
2680
- <li class="pf-v6-c-nav__item">
2681
- <a href="#" class="pf-v6-c-nav__link">
2682
- <span class="pf-v6-c-nav__link-text">Server</span>
2683
- </a>
2684
- </li>
2685
- </ul>
2686
- </nav>
3147
+ <div class="pf-v6-c-page__sidebar-main">
3148
+ <div class="pf-v6-c-page__sidebar-body">
3149
+ <nav
3150
+ class="pf-v6-c-nav"
3151
+ id="primary-detail-content-body-padding-example-primary-nav"
3152
+ aria-label="Global"
3153
+ >
3154
+ <ul class="pf-v6-c-nav__list" role="list">
3155
+ <li class="pf-v6-c-nav__item">
3156
+ <a href="#" class="pf-v6-c-nav__link">
3157
+ <span class="pf-v6-c-nav__link-text">System panel</span>
3158
+ </a>
3159
+ </li>
3160
+ <li class="pf-v6-c-nav__item">
3161
+ <a
3162
+ href="#"
3163
+ class="pf-v6-c-nav__link pf-m-current"
3164
+ aria-current="page"
3165
+ >
3166
+ <span class="pf-v6-c-nav__link-text">Policy</span>
3167
+ </a>
3168
+ </li>
3169
+ <li class="pf-v6-c-nav__item">
3170
+ <a href="#" class="pf-v6-c-nav__link">
3171
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
3172
+ </a>
3173
+ </li>
3174
+ <li class="pf-v6-c-nav__item">
3175
+ <a href="#" class="pf-v6-c-nav__link">
3176
+ <span class="pf-v6-c-nav__link-text">Network services</span>
3177
+ </a>
3178
+ </li>
3179
+ <li class="pf-v6-c-nav__item">
3180
+ <a href="#" class="pf-v6-c-nav__link">
3181
+ <span class="pf-v6-c-nav__link-text">Server</span>
3182
+ </a>
3183
+ </li>
3184
+ </ul>
3185
+ </nav>
3186
+ </div>
2687
3187
  </div>
2688
3188
  </div>
2689
3189
  <div class="pf-v6-c-page__main-container" tabindex="-1">
@@ -2701,21 +3201,57 @@ wrapperTag: div
2701
3201
  </li>
2702
3202
  <li class="pf-v6-c-breadcrumb__item">
2703
3203
  <span class="pf-v6-c-breadcrumb__item-divider">
2704
- <i class="fas fa-angle-right" aria-hidden="true"></i>
3204
+ <svg
3205
+ class="pf-v6-svg"
3206
+ viewBox="0 0 20 20"
3207
+ fill="currentColor"
3208
+ aria-hidden="true"
3209
+ role="img"
3210
+ width="1em"
3211
+ height="1em"
3212
+ >
3213
+ <path
3214
+ 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"
3215
+ />
3216
+ </svg>
2705
3217
  </span>
2706
3218
 
2707
3219
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
2708
3220
  </li>
2709
3221
  <li class="pf-v6-c-breadcrumb__item">
2710
3222
  <span class="pf-v6-c-breadcrumb__item-divider">
2711
- <i class="fas fa-angle-right" aria-hidden="true"></i>
3223
+ <svg
3224
+ class="pf-v6-svg"
3225
+ viewBox="0 0 20 20"
3226
+ fill="currentColor"
3227
+ aria-hidden="true"
3228
+ role="img"
3229
+ width="1em"
3230
+ height="1em"
3231
+ >
3232
+ <path
3233
+ 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"
3234
+ />
3235
+ </svg>
2712
3236
  </span>
2713
3237
 
2714
3238
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
2715
3239
  </li>
2716
3240
  <li class="pf-v6-c-breadcrumb__item">
2717
3241
  <span class="pf-v6-c-breadcrumb__item-divider">
2718
- <i class="fas fa-angle-right" aria-hidden="true"></i>
3242
+ <svg
3243
+ class="pf-v6-svg"
3244
+ viewBox="0 0 20 20"
3245
+ fill="currentColor"
3246
+ aria-hidden="true"
3247
+ role="img"
3248
+ width="1em"
3249
+ height="1em"
3250
+ >
3251
+ <path
3252
+ 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"
3253
+ />
3254
+ </svg>
2719
3255
  </span>
2720
3256
 
2721
3257
  <a
@@ -2728,9 +3264,15 @@ wrapperTag: div
2728
3264
  </nav>
2729
3265
  </div>
2730
3266
  </section>
2731
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
3267
+ <section
3268
+ class="pf-v6-c-page__main-section pf-m-limit-width"
3269
+ aria-labelledby="main-title"
3270
+ >
2732
3271
  <div class="pf-v6-c-page__main-body">
2733
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
3272
+ <h1
3273
+ class="pf-v6-c-content--h1 pf-m-page-title"
3274
+ id="main-title"
3275
+ >Main title</h1>
2734
3276
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
2735
3277
  </div>
2736
3278
  </section>
@@ -2761,7 +3303,19 @@ wrapperTag: div
2761
3303
  aria-controls="primary-detail-content-body-padding-example-drawer-toolbar-expandable-content"
2762
3304
  >
2763
3305
  <span class="pf-v6-c-menu-toggle__icon">
2764
- <i class="fas fa-filter" aria-hidden="true"></i>
3306
+ <svg
3307
+ class="pf-v6-svg"
3308
+ viewBox="0 0 32 32"
3309
+ fill="currentColor"
3310
+ aria-hidden="true"
3311
+ role="img"
3312
+ width="1em"
3313
+ height="1em"
3314
+ >
3315
+ <path
3316
+ d="M29.875 3.5V7a.876.876 0 0 1-.256.619l-9.744 9.744v10.638a.875.875 0 0 1-.599.83l-6 2a.876.876 0 0 1-.788-.12.874.874 0 0 1-.363-.71V17.363L2.381 7.619A.876.876 0 0 1 2.125 7V3.5c0-.758.617-1.375 1.375-1.375h25c.758 0 1.375.617 1.375 1.375Z"
3317
+ />
3318
+ </svg>
2765
3319
  </span>
2766
3320
  </button>
2767
3321
  </div>
@@ -2781,10 +3335,19 @@ wrapperTag: div
2781
3335
  <span
2782
3336
  class="pf-v6-c-menu-toggle__toggle-icon"
2783
3337
  >
2784
- <i
2785
- class="fas fa-caret-down fa-fw"
3338
+ <svg
3339
+ class="pf-v6-svg"
3340
+ viewBox="0 0 20 20"
3341
+ fill="currentColor"
2786
3342
  aria-hidden="true"
2787
- ></i>
3343
+ role="img"
3344
+ width="1em"
3345
+ height="1em"
3346
+ >
3347
+ <path
3348
+ d="M18.92 5.62C18.77 5.25 18.4 5 18 5H2a1.003 1.003 0 0 0-.71 1.71l7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65c.29-.29.37-.72.22-1.09Z"
3349
+ />
3350
+ </svg>
2788
3351
  </span>
2789
3352
  </span>
2790
3353
  </button>
@@ -2801,10 +3364,19 @@ wrapperTag: div
2801
3364
  <span
2802
3365
  class="pf-v6-c-menu-toggle__toggle-icon"
2803
3366
  >
2804
- <i
2805
- class="fas fa-caret-down fa-fw"
3367
+ <svg
3368
+ class="pf-v6-svg"
3369
+ viewBox="0 0 20 20"
3370
+ fill="currentColor"
2806
3371
  aria-hidden="true"
2807
- ></i>
3372
+ role="img"
3373
+ width="1em"
3374
+ height="1em"
3375
+ >
3376
+ <path
3377
+ d="M18.92 5.62C18.77 5.25 18.4 5 18 5H2a1.003 1.003 0 0 0-.71 1.71l7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65c.29-.29.37-.72.22-1.09Z"
3378
+ />
3379
+ </svg>
2808
3380
  </span>
2809
3381
  </span>
2810
3382
  </button>
@@ -2819,10 +3391,25 @@ wrapperTag: div
2819
3391
  aria-label="Sort"
2820
3392
  >
2821
3393
  <span class="pf-v6-c-button__icon">
2822
- <i
2823
- class="fas fa-sort-amount-down pf-v6-m-mirror-inline-rtl"
2824
- aria-hidden="true"
2825
- ></i>
3394
+ <span class="pf-v6-c-icon">
3395
+ <span
3396
+ class="pf-v6-c-icon__content pf-v6-m-mirror-inline-rtl"
3397
+ >
3398
+ <svg
3399
+ class="pf-v6-svg"
3400
+ viewBox="0 0 512 512"
3401
+ fill="currentColor"
3402
+ aria-hidden="true"
3403
+ role="img"
3404
+ width="1em"
3405
+ height="1em"
3406
+ >
3407
+ <path
3408
+ d="M304 416h-64a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h64a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zm-128-64h-48V48a16 16 0 0 0-16-16H80a16 16 0 0 0-16 16v304H16c-14.19 0-21.37 17.24-11.29 27.31l80 96a16 16 0 0 0 22.62 0l80-96C197.35 369.26 190.22 352 176 352zm256-192H240a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h192a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zm-64 128H240a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h128a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zM496 32H240a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h256a16 16 0 0 0 16-16V48a16 16 0 0 0-16-16z"
3409
+ />
3410
+ </svg>
3411
+ </span>
3412
+ </span>
2826
3413
  </span>
2827
3414
  </button>
2828
3415
  </div>
@@ -2858,7 +3445,19 @@ wrapperTag: div
2858
3445
  id="primary-detail-content-body-padding-example-drawer-toolbar-overflow-menu-toggle"
2859
3446
  >
2860
3447
  <span class="pf-v6-c-menu-toggle__icon">
2861
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
3448
+ <svg
3449
+ class="pf-v6-svg"
3450
+ viewBox="0 0 32 32"
3451
+ fill="currentColor"
3452
+ aria-hidden="true"
3453
+ role="img"
3454
+ width="1em"
3455
+ height="1em"
3456
+ >
3457
+ <path
3458
+ 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"
3459
+ />
3460
+ </svg>
2862
3461
  </span>
2863
3462
  </button>
2864
3463
  </div>
@@ -2871,7 +3470,6 @@ wrapperTag: div
2871
3470
  class="pf-v6-c-menu-toggle pf-m-text pf-m-plain"
2872
3471
  type="button"
2873
3472
  aria-expanded="false"
2874
- aria-label="Menu toggle"
2875
3473
  id="primary-detail-content-body-padding-example-drawer-toolbar-top-pagination"
2876
3474
  >
2877
3475
  <span class="pf-v6-c-menu-toggle__text">
@@ -2882,10 +3480,19 @@ wrapperTag: div
2882
3480
  <span
2883
3481
  class="pf-v6-c-menu-toggle__toggle-icon"
2884
3482
  >
2885
- <i
2886
- class="fas fa-caret-down fa-fw"
3483
+ <svg
3484
+ class="pf-v6-svg"
3485
+ viewBox="0 0 20 20"
3486
+ fill="currentColor"
2887
3487
  aria-hidden="true"
2888
- ></i>
3488
+ role="img"
3489
+ width="1em"
3490
+ height="1em"
3491
+ >
3492
+ <path
3493
+ d="M18.92 5.62C18.77 5.25 18.4 5 18 5H2a1.003 1.003 0 0 0-.71 1.71l7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65c.29-.29.37-.72.22-1.09Z"
3494
+ />
3495
+ </svg>
2889
3496
  </span>
2890
3497
  </span>
2891
3498
  </button>
@@ -2904,10 +3511,19 @@ wrapperTag: div
2904
3511
  aria-label="Go to previous page"
2905
3512
  >
2906
3513
  <span class="pf-v6-c-button__icon">
2907
- <i
2908
- class="fas fa-angle-left"
3514
+ <svg
3515
+ class="pf-v6-svg"
3516
+ viewBox="0 0 256 512"
3517
+ fill="currentColor"
2909
3518
  aria-hidden="true"
2910
- ></i>
3519
+ role="img"
3520
+ width="1em"
3521
+ height="1em"
3522
+ >
3523
+ <path
3524
+ d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"
3525
+ />
3526
+ </svg>
2911
3527
  </span>
2912
3528
  </button>
2913
3529
  </div>
@@ -2920,10 +3536,19 @@ wrapperTag: div
2920
3536
  aria-label="Go to next page"
2921
3537
  >
2922
3538
  <span class="pf-v6-c-button__icon">
2923
- <i
2924
- class="fas fa-angle-right"
3539
+ <svg
3540
+ class="pf-v6-svg"
3541
+ viewBox="0 0 256 512"
3542
+ fill="currentColor"
2925
3543
  aria-hidden="true"
2926
- ></i>
3544
+ role="img"
3545
+ width="1em"
3546
+ height="1em"
3547
+ >
3548
+ <path
3549
+ d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
3550
+ />
3551
+ </svg>
2927
3552
  </span>
2928
3553
  </button>
2929
3554
  </div>
@@ -3486,7 +4111,19 @@ wrapperTag: div
3486
4111
  aria-label="Close drawer panel"
3487
4112
  >
3488
4113
  <span class="pf-v6-c-button__icon">
3489
- <i class="fas fa-times" aria-hidden="true"></i>
4114
+ <svg
4115
+ class="pf-v6-svg"
4116
+ viewBox="0 0 20 20"
4117
+ fill="currentColor"
4118
+ aria-hidden="true"
4119
+ role="img"
4120
+ width="1em"
4121
+ height="1em"
4122
+ >
4123
+ <path
4124
+ 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"
4125
+ />
4126
+ </svg>
3490
4127
  </span>
3491
4128
  </button>
3492
4129
  </div>
@@ -3592,9 +4229,10 @@ wrapperTag: div
3592
4229
  <span class="pf-v6-c-button__text">Skip to content</span>
3593
4230
  </a>
3594
4231
  </div>
4232
+
3595
4233
  <header
3596
4234
  class="pf-v6-c-masthead pf-m-display-stack pf-m-display-inline-on-lg"
3597
- id="primary-detail-card-view-expanded-example-masthead"
4235
+ id="primary-detail-card-view-expanded-example-docked"
3598
4236
  >
3599
4237
  <div class="pf-v6-c-masthead__main">
3600
4238
  <span class="pf-v6-c-masthead__toggle">
@@ -3637,7 +4275,7 @@ wrapperTag: div
3637
4275
  y1="2.25860997e-13%"
3638
4276
  x2="32%"
3639
4277
  y2="100%"
3640
- id="linearGradient-primary-detail-card-view-expanded-example-masthead"
4278
+ id="linearGradient-primary-detail-card-view-expanded-example-docked"
3641
4279
  >
3642
4280
  <stop stop-color="#2B9AF3" offset="0%" />
3643
4281
  <stop
@@ -3691,11 +4329,11 @@ wrapperTag: div
3691
4329
  />
3692
4330
  <path
3693
4331
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
3694
- fill="url(#linearGradient-primary-detail-card-view-expanded-example-masthead)"
4332
+ fill="url(#linearGradient-primary-detail-card-view-expanded-example-docked)"
3695
4333
  />
3696
4334
  <path
3697
4335
  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"
3698
- fill="url(#linearGradient-primary-detail-card-view-expanded-example-masthead)"
4336
+ fill="url(#linearGradient-primary-detail-card-view-expanded-example-docked)"
3699
4337
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
3700
4338
  />
3701
4339
  </g>
@@ -3707,7 +4345,7 @@ wrapperTag: div
3707
4345
  <div class="pf-v6-c-masthead__content">
3708
4346
  <div
3709
4347
  class="pf-v6-c-toolbar pf-m-static"
3710
- id="primary-detail-card-view-expanded-example-masthead-toolbar"
4348
+ id="primary-detail-card-view-expanded-example-docked-toolbar"
3711
4349
  >
3712
4350
  <div class="pf-v6-c-toolbar__content">
3713
4351
  <div class="pf-v6-c-toolbar__content-section">
@@ -3725,7 +4363,19 @@ wrapperTag: div
3725
4363
  aria-label="Application launcher"
3726
4364
  >
3727
4365
  <span class="pf-v6-c-menu-toggle__icon">
3728
- <i class="fas fa-th" aria-hidden="true"></i>
4366
+ <svg
4367
+ class="pf-v6-svg"
4368
+ viewBox="0 0 512 512"
4369
+ fill="currentColor"
4370
+ aria-hidden="true"
4371
+ role="img"
4372
+ width="1em"
4373
+ height="1em"
4374
+ >
4375
+ <path
4376
+ 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"
4377
+ />
4378
+ </svg>
3729
4379
  </span>
3730
4380
  </button>
3731
4381
  </div>
@@ -3737,7 +4387,19 @@ wrapperTag: div
3737
4387
  aria-label="Settings"
3738
4388
  >
3739
4389
  <span class="pf-v6-c-menu-toggle__icon">
3740
- <i class="fas fa-cog" aria-hidden="true"></i>
4390
+ <svg
4391
+ class="pf-v6-svg"
4392
+ viewBox="0 0 32 32"
4393
+ fill="currentColor"
4394
+ aria-hidden="true"
4395
+ role="img"
4396
+ width="1em"
4397
+ height="1em"
4398
+ >
4399
+ <path
4400
+ 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"
4401
+ />
4402
+ </svg>
3741
4403
  </span>
3742
4404
  </button>
3743
4405
  </div>
@@ -3749,7 +4411,19 @@ wrapperTag: div
3749
4411
  aria-label="Help"
3750
4412
  >
3751
4413
  <span class="pf-v6-c-menu-toggle__icon">
3752
- <i class="fas fa-question-circle" aria-hidden="true"></i>
4414
+ <svg
4415
+ class="pf-v6-svg"
4416
+ viewBox="0 0 512 512"
4417
+ fill="currentColor"
4418
+ aria-hidden="true"
4419
+ role="img"
4420
+ width="1em"
4421
+ height="1em"
4422
+ >
4423
+ <path
4424
+ 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"
4425
+ />
4426
+ </svg>
3753
4427
  </span>
3754
4428
  </button>
3755
4429
  </div>
@@ -3763,7 +4437,19 @@ wrapperTag: div
3763
4437
  aria-label="Actions"
3764
4438
  >
3765
4439
  <span class="pf-v6-c-menu-toggle__icon">
3766
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
4440
+ <svg
4441
+ class="pf-v6-svg"
4442
+ viewBox="0 0 32 32"
4443
+ fill="currentColor"
4444
+ aria-hidden="true"
4445
+ role="img"
4446
+ width="1em"
4447
+ height="1em"
4448
+ >
4449
+ <path
4450
+ 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"
4451
+ />
4452
+ </svg>
3767
4453
  </span>
3768
4454
  </button>
3769
4455
  </div>
@@ -3774,44 +4460,46 @@ wrapperTag: div
3774
4460
  </div>
3775
4461
  </header>
3776
4462
  <div class="pf-v6-c-page__sidebar">
3777
- <div class="pf-v6-c-page__sidebar-body">
3778
- <nav
3779
- class="pf-v6-c-nav"
3780
- id="primary-detail-card-view-expanded-example-primary-nav"
3781
- aria-label="Global"
3782
- >
3783
- <ul class="pf-v6-c-nav__list" role="list">
3784
- <li class="pf-v6-c-nav__item">
3785
- <a href="#" class="pf-v6-c-nav__link">
3786
- <span class="pf-v6-c-nav__link-text">System panel</span>
3787
- </a>
3788
- </li>
3789
- <li class="pf-v6-c-nav__item">
3790
- <a
3791
- href="#"
3792
- class="pf-v6-c-nav__link pf-m-current"
3793
- aria-current="page"
3794
- >
3795
- <span class="pf-v6-c-nav__link-text">Policy</span>
3796
- </a>
3797
- </li>
3798
- <li class="pf-v6-c-nav__item">
3799
- <a href="#" class="pf-v6-c-nav__link">
3800
- <span class="pf-v6-c-nav__link-text">Authentication</span>
3801
- </a>
3802
- </li>
3803
- <li class="pf-v6-c-nav__item">
3804
- <a href="#" class="pf-v6-c-nav__link">
3805
- <span class="pf-v6-c-nav__link-text">Network services</span>
3806
- </a>
3807
- </li>
3808
- <li class="pf-v6-c-nav__item">
3809
- <a href="#" class="pf-v6-c-nav__link">
3810
- <span class="pf-v6-c-nav__link-text">Server</span>
3811
- </a>
3812
- </li>
3813
- </ul>
3814
- </nav>
4463
+ <div class="pf-v6-c-page__sidebar-main">
4464
+ <div class="pf-v6-c-page__sidebar-body">
4465
+ <nav
4466
+ class="pf-v6-c-nav"
4467
+ id="primary-detail-card-view-expanded-example-primary-nav"
4468
+ aria-label="Global"
4469
+ >
4470
+ <ul class="pf-v6-c-nav__list" role="list">
4471
+ <li class="pf-v6-c-nav__item">
4472
+ <a href="#" class="pf-v6-c-nav__link">
4473
+ <span class="pf-v6-c-nav__link-text">System panel</span>
4474
+ </a>
4475
+ </li>
4476
+ <li class="pf-v6-c-nav__item">
4477
+ <a
4478
+ href="#"
4479
+ class="pf-v6-c-nav__link pf-m-current"
4480
+ aria-current="page"
4481
+ >
4482
+ <span class="pf-v6-c-nav__link-text">Policy</span>
4483
+ </a>
4484
+ </li>
4485
+ <li class="pf-v6-c-nav__item">
4486
+ <a href="#" class="pf-v6-c-nav__link">
4487
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
4488
+ </a>
4489
+ </li>
4490
+ <li class="pf-v6-c-nav__item">
4491
+ <a href="#" class="pf-v6-c-nav__link">
4492
+ <span class="pf-v6-c-nav__link-text">Network services</span>
4493
+ </a>
4494
+ </li>
4495
+ <li class="pf-v6-c-nav__item">
4496
+ <a href="#" class="pf-v6-c-nav__link">
4497
+ <span class="pf-v6-c-nav__link-text">Server</span>
4498
+ </a>
4499
+ </li>
4500
+ </ul>
4501
+ </nav>
4502
+ </div>
3815
4503
  </div>
3816
4504
  </div>
3817
4505
  <div class="pf-v6-c-page__main-container" tabindex="-1">
@@ -3829,21 +4517,57 @@ wrapperTag: div
3829
4517
  </li>
3830
4518
  <li class="pf-v6-c-breadcrumb__item">
3831
4519
  <span class="pf-v6-c-breadcrumb__item-divider">
3832
- <i class="fas fa-angle-right" aria-hidden="true"></i>
4520
+ <svg
4521
+ class="pf-v6-svg"
4522
+ viewBox="0 0 20 20"
4523
+ fill="currentColor"
4524
+ aria-hidden="true"
4525
+ role="img"
4526
+ width="1em"
4527
+ height="1em"
4528
+ >
4529
+ <path
4530
+ 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"
4531
+ />
4532
+ </svg>
3833
4533
  </span>
3834
4534
 
3835
4535
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
3836
4536
  </li>
3837
4537
  <li class="pf-v6-c-breadcrumb__item">
3838
4538
  <span class="pf-v6-c-breadcrumb__item-divider">
3839
- <i class="fas fa-angle-right" aria-hidden="true"></i>
4539
+ <svg
4540
+ class="pf-v6-svg"
4541
+ viewBox="0 0 20 20"
4542
+ fill="currentColor"
4543
+ aria-hidden="true"
4544
+ role="img"
4545
+ width="1em"
4546
+ height="1em"
4547
+ >
4548
+ <path
4549
+ 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"
4550
+ />
4551
+ </svg>
3840
4552
  </span>
3841
4553
 
3842
4554
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
3843
4555
  </li>
3844
4556
  <li class="pf-v6-c-breadcrumb__item">
3845
4557
  <span class="pf-v6-c-breadcrumb__item-divider">
3846
- <i class="fas fa-angle-right" aria-hidden="true"></i>
4558
+ <svg
4559
+ class="pf-v6-svg"
4560
+ viewBox="0 0 20 20"
4561
+ fill="currentColor"
4562
+ aria-hidden="true"
4563
+ role="img"
4564
+ width="1em"
4565
+ height="1em"
4566
+ >
4567
+ <path
4568
+ 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"
4569
+ />
4570
+ </svg>
3847
4571
  </span>
3848
4572
 
3849
4573
  <a
@@ -3856,9 +4580,15 @@ wrapperTag: div
3856
4580
  </nav>
3857
4581
  </div>
3858
4582
  </section>
3859
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
4583
+ <section
4584
+ class="pf-v6-c-page__main-section pf-m-limit-width"
4585
+ aria-labelledby="main-title"
4586
+ >
3860
4587
  <div class="pf-v6-c-page__main-body">
3861
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
4588
+ <h1
4589
+ class="pf-v6-c-content--h1 pf-m-page-title"
4590
+ id="main-title"
4591
+ >Main title</h1>
3862
4592
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
3863
4593
  </div>
3864
4594
  </section>
@@ -3885,7 +4615,19 @@ wrapperTag: div
3885
4615
  aria-controls="primary-detail-card-view-expanded-example-drawer-toolbar-expandable-content"
3886
4616
  >
3887
4617
  <span class="pf-v6-c-menu-toggle__icon">
3888
- <i class="fas fa-filter" aria-hidden="true"></i>
4618
+ <svg
4619
+ class="pf-v6-svg"
4620
+ viewBox="0 0 32 32"
4621
+ fill="currentColor"
4622
+ aria-hidden="true"
4623
+ role="img"
4624
+ width="1em"
4625
+ height="1em"
4626
+ >
4627
+ <path
4628
+ d="M29.875 3.5V7a.876.876 0 0 1-.256.619l-9.744 9.744v10.638a.875.875 0 0 1-.599.83l-6 2a.876.876 0 0 1-.788-.12.874.874 0 0 1-.363-.71V17.363L2.381 7.619A.876.876 0 0 1 2.125 7V3.5c0-.758.617-1.375 1.375-1.375h25c.758 0 1.375.617 1.375 1.375Z"
4629
+ />
4630
+ </svg>
3889
4631
  </span>
3890
4632
  </button>
3891
4633
  </div>
@@ -3915,10 +4657,19 @@ wrapperTag: div
3915
4657
  >
3916
4658
  <span class="pf-v6-c-menu-toggle__controls">
3917
4659
  <span class="pf-v6-c-menu-toggle__toggle-icon">
3918
- <i
3919
- class="fas fa-caret-down fa-fw"
4660
+ <svg
4661
+ class="pf-v6-svg"
4662
+ viewBox="0 0 20 20"
4663
+ fill="currentColor"
3920
4664
  aria-hidden="true"
3921
- ></i>
4665
+ role="img"
4666
+ width="1em"
4667
+ height="1em"
4668
+ >
4669
+ <path
4670
+ d="M18.92 5.62C18.77 5.25 18.4 5 18 5H2a1.003 1.003 0 0 0-.71 1.71l7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65c.29-.29.37-.72.22-1.09Z"
4671
+ />
4672
+ </svg>
3922
4673
  </span>
3923
4674
  </span>
3924
4675
  </button>
@@ -3939,15 +4690,36 @@ wrapperTag: div
3939
4690
  id="primary-detail-card-view-expanded-example-drawer-toolbar-search-filter-menu"
3940
4691
  >
3941
4692
  <span class="pf-v6-c-menu-toggle__icon">
3942
- <i class="fas fa-filter" aria-hidden="true"></i>
4693
+ <svg
4694
+ class="pf-v6-svg"
4695
+ viewBox="0 0 32 32"
4696
+ fill="currentColor"
4697
+ aria-hidden="true"
4698
+ role="img"
4699
+ width="1em"
4700
+ height="1em"
4701
+ >
4702
+ <path
4703
+ d="M29.875 3.5V7a.876.876 0 0 1-.256.619l-9.744 9.744v10.638a.875.875 0 0 1-.599.83l-6 2a.876.876 0 0 1-.788-.12.874.874 0 0 1-.363-.71V17.363L2.381 7.619A.876.876 0 0 1 2.125 7V3.5c0-.758.617-1.375 1.375-1.375h25c.758 0 1.375.617 1.375 1.375Z"
4704
+ />
4705
+ </svg>
3943
4706
  </span>
3944
4707
  <span class="pf-v6-c-menu-toggle__text">Name</span>
3945
4708
  <span class="pf-v6-c-menu-toggle__controls">
3946
4709
  <span class="pf-v6-c-menu-toggle__toggle-icon">
3947
- <i
3948
- class="fas fa-caret-down fa-fw"
4710
+ <svg
4711
+ class="pf-v6-svg"
4712
+ viewBox="0 0 20 20"
4713
+ fill="currentColor"
3949
4714
  aria-hidden="true"
3950
- ></i>
4715
+ role="img"
4716
+ width="1em"
4717
+ height="1em"
4718
+ >
4719
+ <path
4720
+ d="M18.92 5.62C18.77 5.25 18.4 5 18 5H2a1.003 1.003 0 0 0-.71 1.71l7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65c.29-.29.37-.72.22-1.09Z"
4721
+ />
4722
+ </svg>
3951
4723
  </span>
3952
4724
  </span>
3953
4725
  </button>
@@ -3983,10 +4755,25 @@ wrapperTag: div
3983
4755
  aria-label="Sort"
3984
4756
  >
3985
4757
  <span class="pf-v6-c-button__icon">
3986
- <i
3987
- class="fas fa-sort-amount-down pf-v6-m-mirror-inline-rtl"
3988
- aria-hidden="true"
3989
- ></i>
4758
+ <span class="pf-v6-c-icon">
4759
+ <span
4760
+ class="pf-v6-c-icon__content pf-v6-m-mirror-inline-rtl"
4761
+ >
4762
+ <svg
4763
+ class="pf-v6-svg"
4764
+ viewBox="0 0 512 512"
4765
+ fill="currentColor"
4766
+ aria-hidden="true"
4767
+ role="img"
4768
+ width="1em"
4769
+ height="1em"
4770
+ >
4771
+ <path
4772
+ d="M304 416h-64a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h64a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zm-128-64h-48V48a16 16 0 0 0-16-16H80a16 16 0 0 0-16 16v304H16c-14.19 0-21.37 17.24-11.29 27.31l80 96a16 16 0 0 0 22.62 0l80-96C197.35 369.26 190.22 352 176 352zm256-192H240a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h192a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zm-64 128H240a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h128a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zM496 32H240a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h256a16 16 0 0 0 16-16V48a16 16 0 0 0-16-16z"
4773
+ />
4774
+ </svg>
4775
+ </span>
4776
+ </span>
3990
4777
  </span>
3991
4778
  </button>
3992
4779
  </div>
@@ -4029,7 +4816,19 @@ wrapperTag: div
4029
4816
  id="primary-detail-card-view-expanded-example-drawer-toolbar-overflow-menu-toggle"
4030
4817
  >
4031
4818
  <span class="pf-v6-c-menu-toggle__icon">
4032
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
4819
+ <svg
4820
+ class="pf-v6-svg"
4821
+ viewBox="0 0 32 32"
4822
+ fill="currentColor"
4823
+ aria-hidden="true"
4824
+ role="img"
4825
+ width="1em"
4826
+ height="1em"
4827
+ >
4828
+ <path
4829
+ 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"
4830
+ />
4831
+ </svg>
4033
4832
  </span>
4034
4833
  </button>
4035
4834
  </div>
@@ -4045,7 +4844,19 @@ wrapperTag: div
4045
4844
  aria-label="Grid view"
4046
4845
  >
4047
4846
  <span class="pf-v6-c-button__icon">
4048
- <i class="fas fa-th" aria-hidden="true"></i>
4847
+ <svg
4848
+ class="pf-v6-svg"
4849
+ viewBox="0 0 512 512"
4850
+ fill="currentColor"
4851
+ aria-hidden="true"
4852
+ role="img"
4853
+ width="1em"
4854
+ height="1em"
4855
+ >
4856
+ <path
4857
+ 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"
4858
+ />
4859
+ </svg>
4049
4860
  </span>
4050
4861
  </button>
4051
4862
  </div>
@@ -4056,7 +4867,19 @@ wrapperTag: div
4056
4867
  aria-label="List view"
4057
4868
  >
4058
4869
  <span class="pf-v6-c-button__icon">
4059
- <i class="fas fa-list-ul" aria-hidden="true"></i>
4870
+ <svg
4871
+ class="pf-v6-svg"
4872
+ viewBox="0 0 512 512"
4873
+ fill="currentColor"
4874
+ aria-hidden="true"
4875
+ role="img"
4876
+ width="1em"
4877
+ height="1em"
4878
+ >
4879
+ <path
4880
+ d="M48 48a48 48 0 1 0 48 48 48 48 0 0 0-48-48zm0 160a48 48 0 1 0 48 48 48 48 0 0 0-48-48zm0 160a48 48 0 1 0 48 48 48 48 0 0 0-48-48zm448 16H176a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h320a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zm0-320H176a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h320a16 16 0 0 0 16-16V80a16 16 0 0 0-16-16zm0 160H176a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h320a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16z"
4881
+ />
4882
+ </svg>
4060
4883
  </span>
4061
4884
  </button>
4062
4885
  </div>
@@ -4069,7 +4892,6 @@ wrapperTag: div
4069
4892
  class="pf-v6-c-menu-toggle pf-m-text pf-m-plain"
4070
4893
  type="button"
4071
4894
  aria-expanded="false"
4072
- aria-label="Menu toggle"
4073
4895
  id="primary-detail-card-view-expanded-example-drawer-toolbar-top-pagination"
4074
4896
  >
4075
4897
  <span class="pf-v6-c-menu-toggle__text">
@@ -4078,10 +4900,19 @@ wrapperTag: div
4078
4900
  </span>
4079
4901
  <span class="pf-v6-c-menu-toggle__controls">
4080
4902
  <span class="pf-v6-c-menu-toggle__toggle-icon">
4081
- <i
4082
- class="fas fa-caret-down fa-fw"
4903
+ <svg
4904
+ class="pf-v6-svg"
4905
+ viewBox="0 0 20 20"
4906
+ fill="currentColor"
4083
4907
  aria-hidden="true"
4084
- ></i>
4908
+ role="img"
4909
+ width="1em"
4910
+ height="1em"
4911
+ >
4912
+ <path
4913
+ d="M18.92 5.62C18.77 5.25 18.4 5 18 5H2a1.003 1.003 0 0 0-.71 1.71l7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65c.29-.29.37-.72.22-1.09Z"
4914
+ />
4915
+ </svg>
4085
4916
  </span>
4086
4917
  </span>
4087
4918
  </button>
@@ -4100,7 +4931,19 @@ wrapperTag: div
4100
4931
  aria-label="Go to previous page"
4101
4932
  >
4102
4933
  <span class="pf-v6-c-button__icon">
4103
- <i class="fas fa-angle-left" aria-hidden="true"></i>
4934
+ <svg
4935
+ class="pf-v6-svg"
4936
+ viewBox="0 0 256 512"
4937
+ fill="currentColor"
4938
+ aria-hidden="true"
4939
+ role="img"
4940
+ width="1em"
4941
+ height="1em"
4942
+ >
4943
+ <path
4944
+ d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"
4945
+ />
4946
+ </svg>
4104
4947
  </span>
4105
4948
  </button>
4106
4949
  </div>
@@ -4113,10 +4956,19 @@ wrapperTag: div
4113
4956
  aria-label="Go to next page"
4114
4957
  >
4115
4958
  <span class="pf-v6-c-button__icon">
4116
- <i
4117
- class="fas fa-angle-right"
4959
+ <svg
4960
+ class="pf-v6-svg"
4961
+ viewBox="0 0 256 512"
4962
+ fill="currentColor"
4118
4963
  aria-hidden="true"
4119
- ></i>
4964
+ role="img"
4965
+ width="1em"
4966
+ height="1em"
4967
+ >
4968
+ <path
4969
+ d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
4970
+ />
4971
+ </svg>
4120
4972
  </span>
4121
4973
  </button>
4122
4974
  </div>
@@ -4158,7 +5010,19 @@ wrapperTag: div
4158
5010
  id="primary-detail-card-view-expanded-example-drawer-card-1-toggle"
4159
5011
  >
4160
5012
  <span class="pf-v6-c-menu-toggle__icon">
4161
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
5013
+ <svg
5014
+ class="pf-v6-svg"
5015
+ viewBox="0 0 32 32"
5016
+ fill="currentColor"
5017
+ aria-hidden="true"
5018
+ role="img"
5019
+ width="1em"
5020
+ height="1em"
5021
+ >
5022
+ <path
5023
+ 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"
5024
+ />
5025
+ </svg>
4162
5026
  </span>
4163
5027
  </button>
4164
5028
  <div class="pf-v6-c-check pf-m-standalone">
@@ -4204,7 +5068,19 @@ wrapperTag: div
4204
5068
  id="primary-detail-card-view-expanded-example-drawer-card-2-toggle"
4205
5069
  >
4206
5070
  <span class="pf-v6-c-menu-toggle__icon">
4207
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
5071
+ <svg
5072
+ class="pf-v6-svg"
5073
+ viewBox="0 0 32 32"
5074
+ fill="currentColor"
5075
+ aria-hidden="true"
5076
+ role="img"
5077
+ width="1em"
5078
+ height="1em"
5079
+ >
5080
+ <path
5081
+ 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"
5082
+ />
5083
+ </svg>
4208
5084
  </span>
4209
5085
  </button>
4210
5086
  <div class="pf-v6-c-check pf-m-standalone">
@@ -4250,7 +5126,19 @@ wrapperTag: div
4250
5126
  id="primary-detail-card-view-expanded-example-drawer-card-3-toggle"
4251
5127
  >
4252
5128
  <span class="pf-v6-c-menu-toggle__icon">
4253
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
5129
+ <svg
5130
+ class="pf-v6-svg"
5131
+ viewBox="0 0 32 32"
5132
+ fill="currentColor"
5133
+ aria-hidden="true"
5134
+ role="img"
5135
+ width="1em"
5136
+ height="1em"
5137
+ >
5138
+ <path
5139
+ 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"
5140
+ />
5141
+ </svg>
4254
5142
  </span>
4255
5143
  </button>
4256
5144
  <div class="pf-v6-c-check pf-m-standalone">
@@ -4296,7 +5184,19 @@ wrapperTag: div
4296
5184
  id="primary-detail-card-view-expanded-example-drawer-card-4-toggle"
4297
5185
  >
4298
5186
  <span class="pf-v6-c-menu-toggle__icon">
4299
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
5187
+ <svg
5188
+ class="pf-v6-svg"
5189
+ viewBox="0 0 32 32"
5190
+ fill="currentColor"
5191
+ aria-hidden="true"
5192
+ role="img"
5193
+ width="1em"
5194
+ height="1em"
5195
+ >
5196
+ <path
5197
+ 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"
5198
+ />
5199
+ </svg>
4300
5200
  </span>
4301
5201
  </button>
4302
5202
  <div class="pf-v6-c-check pf-m-standalone">
@@ -4342,7 +5242,19 @@ wrapperTag: div
4342
5242
  id="primary-detail-card-view-expanded-example-drawer-card-5-toggle"
4343
5243
  >
4344
5244
  <span class="pf-v6-c-menu-toggle__icon">
4345
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
5245
+ <svg
5246
+ class="pf-v6-svg"
5247
+ viewBox="0 0 32 32"
5248
+ fill="currentColor"
5249
+ aria-hidden="true"
5250
+ role="img"
5251
+ width="1em"
5252
+ height="1em"
5253
+ >
5254
+ <path
5255
+ 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"
5256
+ />
5257
+ </svg>
4346
5258
  </span>
4347
5259
  </button>
4348
5260
  <div class="pf-v6-c-check pf-m-standalone">
@@ -4388,7 +5300,19 @@ wrapperTag: div
4388
5300
  id="primary-detail-card-view-expanded-example-drawer-card-6-toggle"
4389
5301
  >
4390
5302
  <span class="pf-v6-c-menu-toggle__icon">
4391
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
5303
+ <svg
5304
+ class="pf-v6-svg"
5305
+ viewBox="0 0 32 32"
5306
+ fill="currentColor"
5307
+ aria-hidden="true"
5308
+ role="img"
5309
+ width="1em"
5310
+ height="1em"
5311
+ >
5312
+ <path
5313
+ 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"
5314
+ />
5315
+ </svg>
4392
5316
  </span>
4393
5317
  </button>
4394
5318
  <div class="pf-v6-c-check pf-m-standalone">
@@ -4433,7 +5357,19 @@ wrapperTag: div
4433
5357
  id="primary-detail-card-view-expanded-example-drawer-card-7-toggle"
4434
5358
  >
4435
5359
  <span class="pf-v6-c-menu-toggle__icon">
4436
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
5360
+ <svg
5361
+ class="pf-v6-svg"
5362
+ viewBox="0 0 32 32"
5363
+ fill="currentColor"
5364
+ aria-hidden="true"
5365
+ role="img"
5366
+ width="1em"
5367
+ height="1em"
5368
+ >
5369
+ <path
5370
+ 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"
5371
+ />
5372
+ </svg>
4437
5373
  </span>
4438
5374
  </button>
4439
5375
  <div class="pf-v6-c-check pf-m-standalone">
@@ -4478,7 +5414,19 @@ wrapperTag: div
4478
5414
  id="primary-detail-card-view-expanded-example-drawer-card-8-toggle"
4479
5415
  >
4480
5416
  <span class="pf-v6-c-menu-toggle__icon">
4481
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
5417
+ <svg
5418
+ class="pf-v6-svg"
5419
+ viewBox="0 0 32 32"
5420
+ fill="currentColor"
5421
+ aria-hidden="true"
5422
+ role="img"
5423
+ width="1em"
5424
+ height="1em"
5425
+ >
5426
+ <path
5427
+ 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"
5428
+ />
5429
+ </svg>
4482
5430
  </span>
4483
5431
  </button>
4484
5432
  <div class="pf-v6-c-check pf-m-standalone">
@@ -4523,7 +5471,19 @@ wrapperTag: div
4523
5471
  id="primary-detail-card-view-expanded-example-drawer-card-9-toggle"
4524
5472
  >
4525
5473
  <span class="pf-v6-c-menu-toggle__icon">
4526
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
5474
+ <svg
5475
+ class="pf-v6-svg"
5476
+ viewBox="0 0 32 32"
5477
+ fill="currentColor"
5478
+ aria-hidden="true"
5479
+ role="img"
5480
+ width="1em"
5481
+ height="1em"
5482
+ >
5483
+ <path
5484
+ 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"
5485
+ />
5486
+ </svg>
4527
5487
  </span>
4528
5488
  </button>
4529
5489
  <div class="pf-v6-c-check pf-m-standalone">
@@ -4568,7 +5528,19 @@ wrapperTag: div
4568
5528
  id="primary-detail-card-view-expanded-example-drawer-card-10-toggle"
4569
5529
  >
4570
5530
  <span class="pf-v6-c-menu-toggle__icon">
4571
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
5531
+ <svg
5532
+ class="pf-v6-svg"
5533
+ viewBox="0 0 32 32"
5534
+ fill="currentColor"
5535
+ aria-hidden="true"
5536
+ role="img"
5537
+ width="1em"
5538
+ height="1em"
5539
+ >
5540
+ <path
5541
+ 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"
5542
+ />
5543
+ </svg>
4572
5544
  </span>
4573
5545
  </button>
4574
5546
  <div class="pf-v6-c-check pf-m-standalone">
@@ -4611,7 +5583,19 @@ wrapperTag: div
4611
5583
  aria-label="Close drawer panel"
4612
5584
  >
4613
5585
  <span class="pf-v6-c-button__icon">
4614
- <i class="fas fa-times" aria-hidden="true"></i>
5586
+ <svg
5587
+ class="pf-v6-svg"
5588
+ viewBox="0 0 20 20"
5589
+ fill="currentColor"
5590
+ aria-hidden="true"
5591
+ role="img"
5592
+ width="1em"
5593
+ height="1em"
5594
+ >
5595
+ <path
5596
+ 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"
5597
+ />
5598
+ </svg>
4615
5599
  </span>
4616
5600
  </button>
4617
5601
  </div>
@@ -4719,9 +5703,10 @@ wrapperTag: div
4719
5703
  <span class="pf-v6-c-button__text">Skip to content</span>
4720
5704
  </a>
4721
5705
  </div>
5706
+
4722
5707
  <header
4723
5708
  class="pf-v6-c-masthead"
4724
- id="primary-detail-card-simple-list-on-mobile-example-masthead"
5709
+ id="primary-detail-card-simple-list-on-mobile-example-docked"
4725
5710
  >
4726
5711
  <div class="pf-v6-c-masthead__main">
4727
5712
  <span class="pf-v6-c-masthead__toggle">
@@ -4764,7 +5749,7 @@ wrapperTag: div
4764
5749
  y1="2.25860997e-13%"
4765
5750
  x2="32%"
4766
5751
  y2="100%"
4767
- id="linearGradient-primary-detail-card-simple-list-on-mobile-example-masthead"
5752
+ id="linearGradient-primary-detail-card-simple-list-on-mobile-example-docked"
4768
5753
  >
4769
5754
  <stop stop-color="#2B9AF3" offset="0%" />
4770
5755
  <stop
@@ -4818,11 +5803,11 @@ wrapperTag: div
4818
5803
  />
4819
5804
  <path
4820
5805
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
4821
- fill="url(#linearGradient-primary-detail-card-simple-list-on-mobile-example-masthead)"
5806
+ fill="url(#linearGradient-primary-detail-card-simple-list-on-mobile-example-docked)"
4822
5807
  />
4823
5808
  <path
4824
5809
  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"
4825
- fill="url(#linearGradient-primary-detail-card-simple-list-on-mobile-example-masthead)"
5810
+ fill="url(#linearGradient-primary-detail-card-simple-list-on-mobile-example-docked)"
4826
5811
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
4827
5812
  />
4828
5813
  </g>
@@ -4834,7 +5819,7 @@ wrapperTag: div
4834
5819
  <div class="pf-v6-c-masthead__content">
4835
5820
  <div
4836
5821
  class="pf-v6-c-toolbar pf-m-static"
4837
- id="primary-detail-card-simple-list-on-mobile-example-masthead-toolbar"
5822
+ id="primary-detail-card-simple-list-on-mobile-example-docked-toolbar"
4838
5823
  >
4839
5824
  <div class="pf-v6-c-toolbar__content">
4840
5825
  <div class="pf-v6-c-toolbar__content-section">
@@ -4852,7 +5837,19 @@ wrapperTag: div
4852
5837
  aria-label="Application launcher"
4853
5838
  >
4854
5839
  <span class="pf-v6-c-menu-toggle__icon">
4855
- <i class="fas fa-th" aria-hidden="true"></i>
5840
+ <svg
5841
+ class="pf-v6-svg"
5842
+ viewBox="0 0 512 512"
5843
+ fill="currentColor"
5844
+ aria-hidden="true"
5845
+ role="img"
5846
+ width="1em"
5847
+ height="1em"
5848
+ >
5849
+ <path
5850
+ 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"
5851
+ />
5852
+ </svg>
4856
5853
  </span>
4857
5854
  </button>
4858
5855
  </div>
@@ -4864,7 +5861,19 @@ wrapperTag: div
4864
5861
  aria-label="Settings"
4865
5862
  >
4866
5863
  <span class="pf-v6-c-menu-toggle__icon">
4867
- <i class="fas fa-cog" aria-hidden="true"></i>
5864
+ <svg
5865
+ class="pf-v6-svg"
5866
+ viewBox="0 0 32 32"
5867
+ fill="currentColor"
5868
+ aria-hidden="true"
5869
+ role="img"
5870
+ width="1em"
5871
+ height="1em"
5872
+ >
5873
+ <path
5874
+ 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"
5875
+ />
5876
+ </svg>
4868
5877
  </span>
4869
5878
  </button>
4870
5879
  </div>
@@ -4876,7 +5885,19 @@ wrapperTag: div
4876
5885
  aria-label="Help"
4877
5886
  >
4878
5887
  <span class="pf-v6-c-menu-toggle__icon">
4879
- <i class="fas fa-question-circle" aria-hidden="true"></i>
5888
+ <svg
5889
+ class="pf-v6-svg"
5890
+ viewBox="0 0 512 512"
5891
+ fill="currentColor"
5892
+ aria-hidden="true"
5893
+ role="img"
5894
+ width="1em"
5895
+ height="1em"
5896
+ >
5897
+ <path
5898
+ 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"
5899
+ />
5900
+ </svg>
4880
5901
  </span>
4881
5902
  </button>
4882
5903
  </div>
@@ -4890,7 +5911,19 @@ wrapperTag: div
4890
5911
  aria-label="Actions"
4891
5912
  >
4892
5913
  <span class="pf-v6-c-menu-toggle__icon">
4893
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
5914
+ <svg
5915
+ class="pf-v6-svg"
5916
+ viewBox="0 0 32 32"
5917
+ fill="currentColor"
5918
+ aria-hidden="true"
5919
+ role="img"
5920
+ width="1em"
5921
+ height="1em"
5922
+ >
5923
+ <path
5924
+ 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"
5925
+ />
5926
+ </svg>
4894
5927
  </span>
4895
5928
  </button>
4896
5929
  </div>
@@ -4901,44 +5934,46 @@ wrapperTag: div
4901
5934
  </div>
4902
5935
  </header>
4903
5936
  <div class="pf-v6-c-page__sidebar">
4904
- <div class="pf-v6-c-page__sidebar-body">
4905
- <nav
4906
- class="pf-v6-c-nav"
4907
- id="primary-detail-card-simple-list-on-mobile-example-primary-nav"
4908
- aria-label="Global"
4909
- >
4910
- <ul class="pf-v6-c-nav__list" role="list">
4911
- <li class="pf-v6-c-nav__item">
4912
- <a href="#" class="pf-v6-c-nav__link">
4913
- <span class="pf-v6-c-nav__link-text">System panel</span>
4914
- </a>
4915
- </li>
4916
- <li class="pf-v6-c-nav__item">
4917
- <a
4918
- href="#"
4919
- class="pf-v6-c-nav__link pf-m-current"
4920
- aria-current="page"
4921
- >
4922
- <span class="pf-v6-c-nav__link-text">Policy</span>
4923
- </a>
4924
- </li>
4925
- <li class="pf-v6-c-nav__item">
4926
- <a href="#" class="pf-v6-c-nav__link">
4927
- <span class="pf-v6-c-nav__link-text">Authentication</span>
4928
- </a>
4929
- </li>
4930
- <li class="pf-v6-c-nav__item">
4931
- <a href="#" class="pf-v6-c-nav__link">
4932
- <span class="pf-v6-c-nav__link-text">Network services</span>
4933
- </a>
4934
- </li>
4935
- <li class="pf-v6-c-nav__item">
4936
- <a href="#" class="pf-v6-c-nav__link">
4937
- <span class="pf-v6-c-nav__link-text">Server</span>
4938
- </a>
4939
- </li>
4940
- </ul>
4941
- </nav>
5937
+ <div class="pf-v6-c-page__sidebar-main">
5938
+ <div class="pf-v6-c-page__sidebar-body">
5939
+ <nav
5940
+ class="pf-v6-c-nav"
5941
+ id="primary-detail-card-simple-list-on-mobile-example-primary-nav"
5942
+ aria-label="Global"
5943
+ >
5944
+ <ul class="pf-v6-c-nav__list" role="list">
5945
+ <li class="pf-v6-c-nav__item">
5946
+ <a href="#" class="pf-v6-c-nav__link">
5947
+ <span class="pf-v6-c-nav__link-text">System panel</span>
5948
+ </a>
5949
+ </li>
5950
+ <li class="pf-v6-c-nav__item">
5951
+ <a
5952
+ href="#"
5953
+ class="pf-v6-c-nav__link pf-m-current"
5954
+ aria-current="page"
5955
+ >
5956
+ <span class="pf-v6-c-nav__link-text">Policy</span>
5957
+ </a>
5958
+ </li>
5959
+ <li class="pf-v6-c-nav__item">
5960
+ <a href="#" class="pf-v6-c-nav__link">
5961
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
5962
+ </a>
5963
+ </li>
5964
+ <li class="pf-v6-c-nav__item">
5965
+ <a href="#" class="pf-v6-c-nav__link">
5966
+ <span class="pf-v6-c-nav__link-text">Network services</span>
5967
+ </a>
5968
+ </li>
5969
+ <li class="pf-v6-c-nav__item">
5970
+ <a href="#" class="pf-v6-c-nav__link">
5971
+ <span class="pf-v6-c-nav__link-text">Server</span>
5972
+ </a>
5973
+ </li>
5974
+ </ul>
5975
+ </nav>
5976
+ </div>
4942
5977
  </div>
4943
5978
  </div>
4944
5979
  <div class="pf-v6-c-page__main-container" tabindex="-1">
@@ -4956,21 +5991,57 @@ wrapperTag: div
4956
5991
  </li>
4957
5992
  <li class="pf-v6-c-breadcrumb__item">
4958
5993
  <span class="pf-v6-c-breadcrumb__item-divider">
4959
- <i class="fas fa-angle-right" aria-hidden="true"></i>
5994
+ <svg
5995
+ class="pf-v6-svg"
5996
+ viewBox="0 0 20 20"
5997
+ fill="currentColor"
5998
+ aria-hidden="true"
5999
+ role="img"
6000
+ width="1em"
6001
+ height="1em"
6002
+ >
6003
+ <path
6004
+ 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"
6005
+ />
6006
+ </svg>
4960
6007
  </span>
4961
6008
 
4962
6009
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
4963
6010
  </li>
4964
6011
  <li class="pf-v6-c-breadcrumb__item">
4965
6012
  <span class="pf-v6-c-breadcrumb__item-divider">
4966
- <i class="fas fa-angle-right" aria-hidden="true"></i>
6013
+ <svg
6014
+ class="pf-v6-svg"
6015
+ viewBox="0 0 20 20"
6016
+ fill="currentColor"
6017
+ aria-hidden="true"
6018
+ role="img"
6019
+ width="1em"
6020
+ height="1em"
6021
+ >
6022
+ <path
6023
+ 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"
6024
+ />
6025
+ </svg>
4967
6026
  </span>
4968
6027
 
4969
6028
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
4970
6029
  </li>
4971
6030
  <li class="pf-v6-c-breadcrumb__item">
4972
6031
  <span class="pf-v6-c-breadcrumb__item-divider">
4973
- <i class="fas fa-angle-right" aria-hidden="true"></i>
6032
+ <svg
6033
+ class="pf-v6-svg"
6034
+ viewBox="0 0 20 20"
6035
+ fill="currentColor"
6036
+ aria-hidden="true"
6037
+ role="img"
6038
+ width="1em"
6039
+ height="1em"
6040
+ >
6041
+ <path
6042
+ 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"
6043
+ />
6044
+ </svg>
4974
6045
  </span>
4975
6046
 
4976
6047
  <a
@@ -4983,9 +6054,15 @@ wrapperTag: div
4983
6054
  </nav>
4984
6055
  </div>
4985
6056
  </section>
4986
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
6057
+ <section
6058
+ class="pf-v6-c-page__main-section pf-m-limit-width"
6059
+ aria-labelledby="main-title"
6060
+ >
4987
6061
  <div class="pf-v6-c-page__main-body">
4988
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
6062
+ <h1
6063
+ class="pf-v6-c-content--h1 pf-m-page-title"
6064
+ id="main-title"
6065
+ >Main title</h1>
4989
6066
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
4990
6067
  </div>
4991
6068
  </section>
@@ -5088,7 +6165,19 @@ wrapperTag: div
5088
6165
  aria-label="Close drawer panel"
5089
6166
  >
5090
6167
  <span class="pf-v6-c-button__icon">
5091
- <i class="fas fa-times" aria-hidden="true"></i>
6168
+ <svg
6169
+ class="pf-v6-svg"
6170
+ viewBox="0 0 20 20"
6171
+ fill="currentColor"
6172
+ aria-hidden="true"
6173
+ role="img"
6174
+ width="1em"
6175
+ height="1em"
6176
+ >
6177
+ <path
6178
+ 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"
6179
+ />
6180
+ </svg>
5092
6181
  </span>
5093
6182
  </button>
5094
6183
  </div>
@@ -5192,9 +6281,10 @@ wrapperTag: div
5192
6281
  <span class="pf-v6-c-button__text">Skip to content</span>
5193
6282
  </a>
5194
6283
  </div>
6284
+
5195
6285
  <header
5196
6286
  class="pf-v6-c-masthead"
5197
- id="primary-detail-card-data-list-example-masthead"
6287
+ id="primary-detail-card-data-list-example-docked"
5198
6288
  >
5199
6289
  <div class="pf-v6-c-masthead__main">
5200
6290
  <span class="pf-v6-c-masthead__toggle">
@@ -5237,7 +6327,7 @@ wrapperTag: div
5237
6327
  y1="2.25860997e-13%"
5238
6328
  x2="32%"
5239
6329
  y2="100%"
5240
- id="linearGradient-primary-detail-card-data-list-example-masthead"
6330
+ id="linearGradient-primary-detail-card-data-list-example-docked"
5241
6331
  >
5242
6332
  <stop stop-color="#2B9AF3" offset="0%" />
5243
6333
  <stop
@@ -5291,11 +6381,11 @@ wrapperTag: div
5291
6381
  />
5292
6382
  <path
5293
6383
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
5294
- fill="url(#linearGradient-primary-detail-card-data-list-example-masthead)"
6384
+ fill="url(#linearGradient-primary-detail-card-data-list-example-docked)"
5295
6385
  />
5296
6386
  <path
5297
6387
  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"
5298
- fill="url(#linearGradient-primary-detail-card-data-list-example-masthead)"
6388
+ fill="url(#linearGradient-primary-detail-card-data-list-example-docked)"
5299
6389
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
5300
6390
  />
5301
6391
  </g>
@@ -5307,7 +6397,7 @@ wrapperTag: div
5307
6397
  <div class="pf-v6-c-masthead__content">
5308
6398
  <div
5309
6399
  class="pf-v6-c-toolbar pf-m-static"
5310
- id="primary-detail-card-data-list-example-masthead-toolbar"
6400
+ id="primary-detail-card-data-list-example-docked-toolbar"
5311
6401
  >
5312
6402
  <div class="pf-v6-c-toolbar__content">
5313
6403
  <div class="pf-v6-c-toolbar__content-section">
@@ -5325,7 +6415,19 @@ wrapperTag: div
5325
6415
  aria-label="Application launcher"
5326
6416
  >
5327
6417
  <span class="pf-v6-c-menu-toggle__icon">
5328
- <i class="fas fa-th" aria-hidden="true"></i>
6418
+ <svg
6419
+ class="pf-v6-svg"
6420
+ viewBox="0 0 512 512"
6421
+ fill="currentColor"
6422
+ aria-hidden="true"
6423
+ role="img"
6424
+ width="1em"
6425
+ height="1em"
6426
+ >
6427
+ <path
6428
+ 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"
6429
+ />
6430
+ </svg>
5329
6431
  </span>
5330
6432
  </button>
5331
6433
  </div>
@@ -5337,7 +6439,19 @@ wrapperTag: div
5337
6439
  aria-label="Settings"
5338
6440
  >
5339
6441
  <span class="pf-v6-c-menu-toggle__icon">
5340
- <i class="fas fa-cog" aria-hidden="true"></i>
6442
+ <svg
6443
+ class="pf-v6-svg"
6444
+ viewBox="0 0 32 32"
6445
+ fill="currentColor"
6446
+ aria-hidden="true"
6447
+ role="img"
6448
+ width="1em"
6449
+ height="1em"
6450
+ >
6451
+ <path
6452
+ 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"
6453
+ />
6454
+ </svg>
5341
6455
  </span>
5342
6456
  </button>
5343
6457
  </div>
@@ -5349,7 +6463,19 @@ wrapperTag: div
5349
6463
  aria-label="Help"
5350
6464
  >
5351
6465
  <span class="pf-v6-c-menu-toggle__icon">
5352
- <i class="fas fa-question-circle" aria-hidden="true"></i>
6466
+ <svg
6467
+ class="pf-v6-svg"
6468
+ viewBox="0 0 512 512"
6469
+ fill="currentColor"
6470
+ aria-hidden="true"
6471
+ role="img"
6472
+ width="1em"
6473
+ height="1em"
6474
+ >
6475
+ <path
6476
+ 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"
6477
+ />
6478
+ </svg>
5353
6479
  </span>
5354
6480
  </button>
5355
6481
  </div>
@@ -5363,7 +6489,19 @@ wrapperTag: div
5363
6489
  aria-label="Actions"
5364
6490
  >
5365
6491
  <span class="pf-v6-c-menu-toggle__icon">
5366
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
6492
+ <svg
6493
+ class="pf-v6-svg"
6494
+ viewBox="0 0 32 32"
6495
+ fill="currentColor"
6496
+ aria-hidden="true"
6497
+ role="img"
6498
+ width="1em"
6499
+ height="1em"
6500
+ >
6501
+ <path
6502
+ 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"
6503
+ />
6504
+ </svg>
5367
6505
  </span>
5368
6506
  </button>
5369
6507
  </div>
@@ -5374,44 +6512,46 @@ wrapperTag: div
5374
6512
  </div>
5375
6513
  </header>
5376
6514
  <div class="pf-v6-c-page__sidebar">
5377
- <div class="pf-v6-c-page__sidebar-body">
5378
- <nav
5379
- class="pf-v6-c-nav"
5380
- id="primary-detail-card-data-list-example-primary-nav"
5381
- aria-label="Global"
5382
- >
5383
- <ul class="pf-v6-c-nav__list" role="list">
5384
- <li class="pf-v6-c-nav__item">
5385
- <a href="#" class="pf-v6-c-nav__link">
5386
- <span class="pf-v6-c-nav__link-text">System panel</span>
5387
- </a>
5388
- </li>
5389
- <li class="pf-v6-c-nav__item">
5390
- <a
5391
- href="#"
5392
- class="pf-v6-c-nav__link pf-m-current"
5393
- aria-current="page"
5394
- >
5395
- <span class="pf-v6-c-nav__link-text">Policy</span>
5396
- </a>
5397
- </li>
5398
- <li class="pf-v6-c-nav__item">
5399
- <a href="#" class="pf-v6-c-nav__link">
5400
- <span class="pf-v6-c-nav__link-text">Authentication</span>
5401
- </a>
5402
- </li>
5403
- <li class="pf-v6-c-nav__item">
5404
- <a href="#" class="pf-v6-c-nav__link">
5405
- <span class="pf-v6-c-nav__link-text">Network services</span>
5406
- </a>
5407
- </li>
5408
- <li class="pf-v6-c-nav__item">
5409
- <a href="#" class="pf-v6-c-nav__link">
5410
- <span class="pf-v6-c-nav__link-text">Server</span>
5411
- </a>
5412
- </li>
5413
- </ul>
5414
- </nav>
6515
+ <div class="pf-v6-c-page__sidebar-main">
6516
+ <div class="pf-v6-c-page__sidebar-body">
6517
+ <nav
6518
+ class="pf-v6-c-nav"
6519
+ id="primary-detail-card-data-list-example-primary-nav"
6520
+ aria-label="Global"
6521
+ >
6522
+ <ul class="pf-v6-c-nav__list" role="list">
6523
+ <li class="pf-v6-c-nav__item">
6524
+ <a href="#" class="pf-v6-c-nav__link">
6525
+ <span class="pf-v6-c-nav__link-text">System panel</span>
6526
+ </a>
6527
+ </li>
6528
+ <li class="pf-v6-c-nav__item">
6529
+ <a
6530
+ href="#"
6531
+ class="pf-v6-c-nav__link pf-m-current"
6532
+ aria-current="page"
6533
+ >
6534
+ <span class="pf-v6-c-nav__link-text">Policy</span>
6535
+ </a>
6536
+ </li>
6537
+ <li class="pf-v6-c-nav__item">
6538
+ <a href="#" class="pf-v6-c-nav__link">
6539
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
6540
+ </a>
6541
+ </li>
6542
+ <li class="pf-v6-c-nav__item">
6543
+ <a href="#" class="pf-v6-c-nav__link">
6544
+ <span class="pf-v6-c-nav__link-text">Network services</span>
6545
+ </a>
6546
+ </li>
6547
+ <li class="pf-v6-c-nav__item">
6548
+ <a href="#" class="pf-v6-c-nav__link">
6549
+ <span class="pf-v6-c-nav__link-text">Server</span>
6550
+ </a>
6551
+ </li>
6552
+ </ul>
6553
+ </nav>
6554
+ </div>
5415
6555
  </div>
5416
6556
  </div>
5417
6557
  <div class="pf-v6-c-page__main-container" tabindex="-1">
@@ -5429,21 +6569,57 @@ wrapperTag: div
5429
6569
  </li>
5430
6570
  <li class="pf-v6-c-breadcrumb__item">
5431
6571
  <span class="pf-v6-c-breadcrumb__item-divider">
5432
- <i class="fas fa-angle-right" aria-hidden="true"></i>
6572
+ <svg
6573
+ class="pf-v6-svg"
6574
+ viewBox="0 0 20 20"
6575
+ fill="currentColor"
6576
+ aria-hidden="true"
6577
+ role="img"
6578
+ width="1em"
6579
+ height="1em"
6580
+ >
6581
+ <path
6582
+ 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"
6583
+ />
6584
+ </svg>
5433
6585
  </span>
5434
6586
 
5435
6587
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
5436
6588
  </li>
5437
6589
  <li class="pf-v6-c-breadcrumb__item">
5438
6590
  <span class="pf-v6-c-breadcrumb__item-divider">
5439
- <i class="fas fa-angle-right" aria-hidden="true"></i>
6591
+ <svg
6592
+ class="pf-v6-svg"
6593
+ viewBox="0 0 20 20"
6594
+ fill="currentColor"
6595
+ aria-hidden="true"
6596
+ role="img"
6597
+ width="1em"
6598
+ height="1em"
6599
+ >
6600
+ <path
6601
+ 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"
6602
+ />
6603
+ </svg>
5440
6604
  </span>
5441
6605
 
5442
6606
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
5443
6607
  </li>
5444
6608
  <li class="pf-v6-c-breadcrumb__item">
5445
6609
  <span class="pf-v6-c-breadcrumb__item-divider">
5446
- <i class="fas fa-angle-right" aria-hidden="true"></i>
6610
+ <svg
6611
+ class="pf-v6-svg"
6612
+ viewBox="0 0 20 20"
6613
+ fill="currentColor"
6614
+ aria-hidden="true"
6615
+ role="img"
6616
+ width="1em"
6617
+ height="1em"
6618
+ >
6619
+ <path
6620
+ 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"
6621
+ />
6622
+ </svg>
5447
6623
  </span>
5448
6624
 
5449
6625
  <a
@@ -5456,9 +6632,15 @@ wrapperTag: div
5456
6632
  </nav>
5457
6633
  </div>
5458
6634
  </section>
5459
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
6635
+ <section
6636
+ class="pf-v6-c-page__main-section pf-m-limit-width"
6637
+ aria-labelledby="main-title"
6638
+ >
5460
6639
  <div class="pf-v6-c-page__main-body">
5461
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
6640
+ <h1
6641
+ class="pf-v6-c-content--h1 pf-m-page-title"
6642
+ id="main-title"
6643
+ >Main title</h1>
5462
6644
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
5463
6645
  </div>
5464
6646
  </section>
@@ -5489,10 +6671,19 @@ wrapperTag: div
5489
6671
  <span class="pf-v6-c-menu-toggle__text">Dropdown</span>
5490
6672
  <span class="pf-v6-c-menu-toggle__controls">
5491
6673
  <span class="pf-v6-c-menu-toggle__toggle-icon">
5492
- <i
5493
- class="fas fa-caret-down fa-fw"
6674
+ <svg
6675
+ class="pf-v6-svg"
6676
+ viewBox="0 0 20 20"
6677
+ fill="currentColor"
5494
6678
  aria-hidden="true"
5495
- ></i>
6679
+ role="img"
6680
+ width="1em"
6681
+ height="1em"
6682
+ >
6683
+ <path
6684
+ d="M18.92 5.62C18.77 5.25 18.4 5 18 5H2a1.003 1.003 0 0 0-.71 1.71l7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65c.29-.29.37-.72.22-1.09Z"
6685
+ />
6686
+ </svg>
5496
6687
  </span>
5497
6688
  </span>
5498
6689
  </button>
@@ -5508,7 +6699,6 @@ wrapperTag: div
5508
6699
  class="pf-v6-c-menu-toggle pf-m-text pf-m-plain"
5509
6700
  type="button"
5510
6701
  aria-expanded="false"
5511
- aria-label="Menu toggle"
5512
6702
  id="primary-detail-card-data-list-example-drawer-toolbar-card-toolbar-pagination-menu-toggle"
5513
6703
  >
5514
6704
  <span class="pf-v6-c-menu-toggle__text">
@@ -5519,10 +6709,19 @@ wrapperTag: div
5519
6709
  <span
5520
6710
  class="pf-v6-c-menu-toggle__toggle-icon"
5521
6711
  >
5522
- <i
5523
- class="fas fa-caret-down fa-fw"
6712
+ <svg
6713
+ class="pf-v6-svg"
6714
+ viewBox="0 0 20 20"
6715
+ fill="currentColor"
5524
6716
  aria-hidden="true"
5525
- ></i>
6717
+ role="img"
6718
+ width="1em"
6719
+ height="1em"
6720
+ >
6721
+ <path
6722
+ d="M18.92 5.62C18.77 5.25 18.4 5 18 5H2a1.003 1.003 0 0 0-.71 1.71l7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65c.29-.29.37-.72.22-1.09Z"
6723
+ />
6724
+ </svg>
5526
6725
  </span>
5527
6726
  </span>
5528
6727
  </button>
@@ -5693,7 +6892,19 @@ wrapperTag: div
5693
6892
  aria-label="Close drawer panel"
5694
6893
  >
5695
6894
  <span class="pf-v6-c-button__icon">
5696
- <i class="fas fa-times" aria-hidden="true"></i>
6895
+ <svg
6896
+ class="pf-v6-svg"
6897
+ viewBox="0 0 20 20"
6898
+ fill="currentColor"
6899
+ aria-hidden="true"
6900
+ role="img"
6901
+ width="1em"
6902
+ height="1em"
6903
+ >
6904
+ <path
6905
+ 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"
6906
+ />
6907
+ </svg>
5697
6908
  </span>
5698
6909
  </button>
5699
6910
  </div>
@@ -5797,9 +7008,10 @@ wrapperTag: div
5797
7008
  <span class="pf-v6-c-button__text">Skip to content</span>
5798
7009
  </a>
5799
7010
  </div>
7011
+
5800
7012
  <header
5801
7013
  class="pf-v6-c-masthead"
5802
- id="primary-detail-inline-modifier-example-masthead"
7014
+ id="primary-detail-inline-modifier-example-docked"
5803
7015
  >
5804
7016
  <div class="pf-v6-c-masthead__main">
5805
7017
  <span class="pf-v6-c-masthead__toggle">
@@ -5842,7 +7054,7 @@ wrapperTag: div
5842
7054
  y1="2.25860997e-13%"
5843
7055
  x2="32%"
5844
7056
  y2="100%"
5845
- id="linearGradient-primary-detail-inline-modifier-example-masthead"
7057
+ id="linearGradient-primary-detail-inline-modifier-example-docked"
5846
7058
  >
5847
7059
  <stop stop-color="#2B9AF3" offset="0%" />
5848
7060
  <stop
@@ -5896,11 +7108,11 @@ wrapperTag: div
5896
7108
  />
5897
7109
  <path
5898
7110
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
5899
- fill="url(#linearGradient-primary-detail-inline-modifier-example-masthead)"
7111
+ fill="url(#linearGradient-primary-detail-inline-modifier-example-docked)"
5900
7112
  />
5901
7113
  <path
5902
7114
  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"
5903
- fill="url(#linearGradient-primary-detail-inline-modifier-example-masthead)"
7115
+ fill="url(#linearGradient-primary-detail-inline-modifier-example-docked)"
5904
7116
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
5905
7117
  />
5906
7118
  </g>
@@ -5912,7 +7124,7 @@ wrapperTag: div
5912
7124
  <div class="pf-v6-c-masthead__content">
5913
7125
  <div
5914
7126
  class="pf-v6-c-toolbar pf-m-static"
5915
- id="primary-detail-inline-modifier-example-masthead-toolbar"
7127
+ id="primary-detail-inline-modifier-example-docked-toolbar"
5916
7128
  >
5917
7129
  <div class="pf-v6-c-toolbar__content">
5918
7130
  <div class="pf-v6-c-toolbar__content-section">
@@ -5930,7 +7142,19 @@ wrapperTag: div
5930
7142
  aria-label="Application launcher"
5931
7143
  >
5932
7144
  <span class="pf-v6-c-menu-toggle__icon">
5933
- <i class="fas fa-th" aria-hidden="true"></i>
7145
+ <svg
7146
+ class="pf-v6-svg"
7147
+ viewBox="0 0 512 512"
7148
+ fill="currentColor"
7149
+ aria-hidden="true"
7150
+ role="img"
7151
+ width="1em"
7152
+ height="1em"
7153
+ >
7154
+ <path
7155
+ 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"
7156
+ />
7157
+ </svg>
5934
7158
  </span>
5935
7159
  </button>
5936
7160
  </div>
@@ -5942,7 +7166,19 @@ wrapperTag: div
5942
7166
  aria-label="Settings"
5943
7167
  >
5944
7168
  <span class="pf-v6-c-menu-toggle__icon">
5945
- <i class="fas fa-cog" aria-hidden="true"></i>
7169
+ <svg
7170
+ class="pf-v6-svg"
7171
+ viewBox="0 0 32 32"
7172
+ fill="currentColor"
7173
+ aria-hidden="true"
7174
+ role="img"
7175
+ width="1em"
7176
+ height="1em"
7177
+ >
7178
+ <path
7179
+ 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"
7180
+ />
7181
+ </svg>
5946
7182
  </span>
5947
7183
  </button>
5948
7184
  </div>
@@ -5954,7 +7190,19 @@ wrapperTag: div
5954
7190
  aria-label="Help"
5955
7191
  >
5956
7192
  <span class="pf-v6-c-menu-toggle__icon">
5957
- <i class="fas fa-question-circle" aria-hidden="true"></i>
7193
+ <svg
7194
+ class="pf-v6-svg"
7195
+ viewBox="0 0 512 512"
7196
+ fill="currentColor"
7197
+ aria-hidden="true"
7198
+ role="img"
7199
+ width="1em"
7200
+ height="1em"
7201
+ >
7202
+ <path
7203
+ 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"
7204
+ />
7205
+ </svg>
5958
7206
  </span>
5959
7207
  </button>
5960
7208
  </div>
@@ -5968,7 +7216,19 @@ wrapperTag: div
5968
7216
  aria-label="Actions"
5969
7217
  >
5970
7218
  <span class="pf-v6-c-menu-toggle__icon">
5971
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
7219
+ <svg
7220
+ class="pf-v6-svg"
7221
+ viewBox="0 0 32 32"
7222
+ fill="currentColor"
7223
+ aria-hidden="true"
7224
+ role="img"
7225
+ width="1em"
7226
+ height="1em"
7227
+ >
7228
+ <path
7229
+ 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"
7230
+ />
7231
+ </svg>
5972
7232
  </span>
5973
7233
  </button>
5974
7234
  </div>
@@ -5979,44 +7239,46 @@ wrapperTag: div
5979
7239
  </div>
5980
7240
  </header>
5981
7241
  <div class="pf-v6-c-page__sidebar">
5982
- <div class="pf-v6-c-page__sidebar-body">
5983
- <nav
5984
- class="pf-v6-c-nav"
5985
- id="primary-detail-inline-modifier-example-primary-nav"
5986
- aria-label="Global"
5987
- >
5988
- <ul class="pf-v6-c-nav__list" role="list">
5989
- <li class="pf-v6-c-nav__item">
5990
- <a href="#" class="pf-v6-c-nav__link">
5991
- <span class="pf-v6-c-nav__link-text">System panel</span>
5992
- </a>
5993
- </li>
5994
- <li class="pf-v6-c-nav__item">
5995
- <a
5996
- href="#"
5997
- class="pf-v6-c-nav__link pf-m-current"
5998
- aria-current="page"
5999
- >
6000
- <span class="pf-v6-c-nav__link-text">Policy</span>
6001
- </a>
6002
- </li>
6003
- <li class="pf-v6-c-nav__item">
6004
- <a href="#" class="pf-v6-c-nav__link">
6005
- <span class="pf-v6-c-nav__link-text">Authentication</span>
6006
- </a>
6007
- </li>
6008
- <li class="pf-v6-c-nav__item">
6009
- <a href="#" class="pf-v6-c-nav__link">
6010
- <span class="pf-v6-c-nav__link-text">Network services</span>
6011
- </a>
6012
- </li>
6013
- <li class="pf-v6-c-nav__item">
6014
- <a href="#" class="pf-v6-c-nav__link">
6015
- <span class="pf-v6-c-nav__link-text">Server</span>
6016
- </a>
6017
- </li>
6018
- </ul>
6019
- </nav>
7242
+ <div class="pf-v6-c-page__sidebar-main">
7243
+ <div class="pf-v6-c-page__sidebar-body">
7244
+ <nav
7245
+ class="pf-v6-c-nav"
7246
+ id="primary-detail-inline-modifier-example-primary-nav"
7247
+ aria-label="Global"
7248
+ >
7249
+ <ul class="pf-v6-c-nav__list" role="list">
7250
+ <li class="pf-v6-c-nav__item">
7251
+ <a href="#" class="pf-v6-c-nav__link">
7252
+ <span class="pf-v6-c-nav__link-text">System panel</span>
7253
+ </a>
7254
+ </li>
7255
+ <li class="pf-v6-c-nav__item">
7256
+ <a
7257
+ href="#"
7258
+ class="pf-v6-c-nav__link pf-m-current"
7259
+ aria-current="page"
7260
+ >
7261
+ <span class="pf-v6-c-nav__link-text">Policy</span>
7262
+ </a>
7263
+ </li>
7264
+ <li class="pf-v6-c-nav__item">
7265
+ <a href="#" class="pf-v6-c-nav__link">
7266
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
7267
+ </a>
7268
+ </li>
7269
+ <li class="pf-v6-c-nav__item">
7270
+ <a href="#" class="pf-v6-c-nav__link">
7271
+ <span class="pf-v6-c-nav__link-text">Network services</span>
7272
+ </a>
7273
+ </li>
7274
+ <li class="pf-v6-c-nav__item">
7275
+ <a href="#" class="pf-v6-c-nav__link">
7276
+ <span class="pf-v6-c-nav__link-text">Server</span>
7277
+ </a>
7278
+ </li>
7279
+ </ul>
7280
+ </nav>
7281
+ </div>
6020
7282
  </div>
6021
7283
  </div>
6022
7284
  <div class="pf-v6-c-page__main-container" tabindex="-1">
@@ -6034,21 +7296,57 @@ wrapperTag: div
6034
7296
  </li>
6035
7297
  <li class="pf-v6-c-breadcrumb__item">
6036
7298
  <span class="pf-v6-c-breadcrumb__item-divider">
6037
- <i class="fas fa-angle-right" aria-hidden="true"></i>
7299
+ <svg
7300
+ class="pf-v6-svg"
7301
+ viewBox="0 0 20 20"
7302
+ fill="currentColor"
7303
+ aria-hidden="true"
7304
+ role="img"
7305
+ width="1em"
7306
+ height="1em"
7307
+ >
7308
+ <path
7309
+ 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"
7310
+ />
7311
+ </svg>
6038
7312
  </span>
6039
7313
 
6040
7314
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
6041
7315
  </li>
6042
7316
  <li class="pf-v6-c-breadcrumb__item">
6043
7317
  <span class="pf-v6-c-breadcrumb__item-divider">
6044
- <i class="fas fa-angle-right" aria-hidden="true"></i>
7318
+ <svg
7319
+ class="pf-v6-svg"
7320
+ viewBox="0 0 20 20"
7321
+ fill="currentColor"
7322
+ aria-hidden="true"
7323
+ role="img"
7324
+ width="1em"
7325
+ height="1em"
7326
+ >
7327
+ <path
7328
+ 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"
7329
+ />
7330
+ </svg>
6045
7331
  </span>
6046
7332
 
6047
7333
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
6048
7334
  </li>
6049
7335
  <li class="pf-v6-c-breadcrumb__item">
6050
7336
  <span class="pf-v6-c-breadcrumb__item-divider">
6051
- <i class="fas fa-angle-right" aria-hidden="true"></i>
7337
+ <svg
7338
+ class="pf-v6-svg"
7339
+ viewBox="0 0 20 20"
7340
+ fill="currentColor"
7341
+ aria-hidden="true"
7342
+ role="img"
7343
+ width="1em"
7344
+ height="1em"
7345
+ >
7346
+ <path
7347
+ 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"
7348
+ />
7349
+ </svg>
6052
7350
  </span>
6053
7351
 
6054
7352
  <a
@@ -6061,9 +7359,15 @@ wrapperTag: div
6061
7359
  </nav>
6062
7360
  </div>
6063
7361
  </section>
6064
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
7362
+ <section
7363
+ class="pf-v6-c-page__main-section pf-m-limit-width"
7364
+ aria-labelledby="main-title"
7365
+ >
6065
7366
  <div class="pf-v6-c-page__main-body">
6066
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
7367
+ <h1
7368
+ class="pf-v6-c-content--h1 pf-m-page-title"
7369
+ id="main-title"
7370
+ >Main title</h1>
6067
7371
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
6068
7372
  </div>
6069
7373
  </section>
@@ -6088,15 +7392,36 @@ wrapperTag: div
6088
7392
  style="width: 150px"
6089
7393
  >
6090
7394
  <span class="pf-v6-c-menu-toggle__icon">
6091
- <i class="fas fa-bookmark" aria-hidden="true"></i>
7395
+ <svg
7396
+ class="pf-v6-svg"
7397
+ viewBox="0 0 384 512"
7398
+ fill="currentColor"
7399
+ aria-hidden="true"
7400
+ role="img"
7401
+ width="1em"
7402
+ height="1em"
7403
+ >
7404
+ <path
7405
+ d="M0 512V48C0 21.49 21.49 0 48 0h288c26.51 0 48 21.49 48 48v464L192 400 0 512z"
7406
+ />
7407
+ </svg>
6092
7408
  </span>
6093
7409
  <span class="pf-v6-c-menu-toggle__text">Status</span>
6094
7410
  <span class="pf-v6-c-menu-toggle__controls">
6095
7411
  <span class="pf-v6-c-menu-toggle__toggle-icon">
6096
- <i
6097
- class="fas fa-caret-down fa-fw"
7412
+ <svg
7413
+ class="pf-v6-svg"
7414
+ viewBox="0 0 20 20"
7415
+ fill="currentColor"
6098
7416
  aria-hidden="true"
6099
- ></i>
7417
+ role="img"
7418
+ width="1em"
7419
+ height="1em"
7420
+ >
7421
+ <path
7422
+ d="M18.92 5.62C18.77 5.25 18.4 5 18 5H2a1.003 1.003 0 0 0-.71 1.71l7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65c.29-.29.37-.72.22-1.09Z"
7423
+ />
7424
+ </svg>
6100
7425
  </span>
6101
7426
  </span>
6102
7427
  </button>
@@ -6140,7 +7465,19 @@ wrapperTag: div
6140
7465
  id="primary-detail-inline-modifier-example-drawer-toolbar-overflow-menu-toggle"
6141
7466
  >
6142
7467
  <span class="pf-v6-c-menu-toggle__icon">
6143
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
7468
+ <svg
7469
+ class="pf-v6-svg"
7470
+ viewBox="0 0 32 32"
7471
+ fill="currentColor"
7472
+ aria-hidden="true"
7473
+ role="img"
7474
+ width="1em"
7475
+ height="1em"
7476
+ >
7477
+ <path
7478
+ 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"
7479
+ />
7480
+ </svg>
6144
7481
  </span>
6145
7482
  </button>
6146
7483
  </div>
@@ -6153,7 +7490,6 @@ wrapperTag: div
6153
7490
  class="pf-v6-c-menu-toggle pf-m-text pf-m-plain"
6154
7491
  type="button"
6155
7492
  aria-expanded="false"
6156
- aria-label="Menu toggle"
6157
7493
  id="primary-detail-inline-modifier-example-drawer-toolbar-top-pagination"
6158
7494
  >
6159
7495
  <span class="pf-v6-c-menu-toggle__text">
@@ -6162,10 +7498,19 @@ wrapperTag: div
6162
7498
  </span>
6163
7499
  <span class="pf-v6-c-menu-toggle__controls">
6164
7500
  <span class="pf-v6-c-menu-toggle__toggle-icon">
6165
- <i
6166
- class="fas fa-caret-down fa-fw"
7501
+ <svg
7502
+ class="pf-v6-svg"
7503
+ viewBox="0 0 20 20"
7504
+ fill="currentColor"
6167
7505
  aria-hidden="true"
6168
- ></i>
7506
+ role="img"
7507
+ width="1em"
7508
+ height="1em"
7509
+ >
7510
+ <path
7511
+ d="M18.92 5.62C18.77 5.25 18.4 5 18 5H2a1.003 1.003 0 0 0-.71 1.71l7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65c.29-.29.37-.72.22-1.09Z"
7512
+ />
7513
+ </svg>
6169
7514
  </span>
6170
7515
  </span>
6171
7516
  </button>
@@ -6184,7 +7529,19 @@ wrapperTag: div
6184
7529
  aria-label="Go to previous page"
6185
7530
  >
6186
7531
  <span class="pf-v6-c-button__icon">
6187
- <i class="fas fa-angle-left" aria-hidden="true"></i>
7532
+ <svg
7533
+ class="pf-v6-svg"
7534
+ viewBox="0 0 256 512"
7535
+ fill="currentColor"
7536
+ aria-hidden="true"
7537
+ role="img"
7538
+ width="1em"
7539
+ height="1em"
7540
+ >
7541
+ <path
7542
+ d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"
7543
+ />
7544
+ </svg>
6188
7545
  </span>
6189
7546
  </button>
6190
7547
  </div>
@@ -6197,10 +7554,19 @@ wrapperTag: div
6197
7554
  aria-label="Go to next page"
6198
7555
  >
6199
7556
  <span class="pf-v6-c-button__icon">
6200
- <i
6201
- class="fas fa-angle-right"
7557
+ <svg
7558
+ class="pf-v6-svg"
7559
+ viewBox="0 0 256 512"
7560
+ fill="currentColor"
6202
7561
  aria-hidden="true"
6203
- ></i>
7562
+ role="img"
7563
+ width="1em"
7564
+ height="1em"
7565
+ >
7566
+ <path
7567
+ d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
7568
+ />
7569
+ </svg>
6204
7570
  </span>
6205
7571
  </button>
6206
7572
  </div>
@@ -6708,7 +8074,19 @@ wrapperTag: div
6708
8074
  aria-label="Close drawer panel"
6709
8075
  >
6710
8076
  <span class="pf-v6-c-button__icon">
6711
- <i class="fas fa-times" aria-hidden="true"></i>
8077
+ <svg
8078
+ class="pf-v6-svg"
8079
+ viewBox="0 0 20 20"
8080
+ fill="currentColor"
8081
+ aria-hidden="true"
8082
+ role="img"
8083
+ width="1em"
8084
+ height="1em"
8085
+ >
8086
+ <path
8087
+ 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"
8088
+ />
8089
+ </svg>
6712
8090
  </span>
6713
8091
  </button>
6714
8092
  </div>
@@ -6727,6 +8105,7 @@ wrapperTag: div
6727
8105
  <div class="pf-v6-c-drawer__body pf-m-no-padding">
6728
8106
  <div
6729
8107
  class="pf-v6-c-tabs pf-m-box pf-m-fill"
8108
+ aria-label="Node 2"
6730
8109
  role="region"
6731
8110
  id="primary-detail-inline-modifier-example-drawer-tabs"
6732
8111
  >
@@ -6737,11 +8116,27 @@ wrapperTag: div
6737
8116
  aria-label="Scroll left"
6738
8117
  >
6739
8118
  <span class="pf-v6-c-button__icon">
6740
- <i class="fas fa-angle-left" aria-hidden="true"></i>
8119
+ <svg
8120
+ class="pf-v6-svg"
8121
+ viewBox="0 0 20 20"
8122
+ fill="currentColor"
8123
+ aria-hidden="true"
8124
+ role="img"
8125
+ width="1em"
8126
+ height="1em"
8127
+ >
8128
+ <path
8129
+ d="m6.41 10 7.29-7.29.02-.02c.38-.4.37-1.03-.02-1.41-.4-.38-1.03-.37-1.41.02L4.64 8.95a1.49 1.49 0 0 0 0 2.12l7.65 7.65c.19.19.44.29.71.29.27 0 .52-.11.71-.29a.996.996 0 0 0 0-1.41l-7.29-7.29Z"
8130
+ />
8131
+ </svg>
6741
8132
  </span>
6742
8133
  </button>
6743
8134
  </div>
6744
- <ul class="pf-v6-c-tabs__list" role="tablist">
8135
+ <ul
8136
+ class="pf-v6-c-tabs__list"
8137
+ role="tablist"
8138
+ aria-label="Node 2"
8139
+ >
6745
8140
  <li
6746
8141
  class="pf-v6-c-tabs__item pf-m-current"
6747
8142
  role="presentation"
@@ -6750,6 +8145,7 @@ wrapperTag: div
6750
8145
  type="button"
6751
8146
  class="pf-v6-c-tabs__link"
6752
8147
  role="tab"
8148
+ aria-selected="true"
6753
8149
  aria-controls="primary-detail-inline-modifier-example-drawer-tabs-tab1-panel"
6754
8150
  id="primary-detail-inline-modifier-example-drawer-tabs-tab1-link"
6755
8151
  >
@@ -6761,6 +8157,7 @@ wrapperTag: div
6761
8157
  type="button"
6762
8158
  class="pf-v6-c-tabs__link"
6763
8159
  role="tab"
8160
+ aria-selected="false"
6764
8161
  aria-controls="primary-detail-inline-modifier-example-drawer-tabs-tab2-panel"
6765
8162
  id="primary-detail-inline-modifier-example-drawer-tabs-tab2-link"
6766
8163
  >
@@ -6775,7 +8172,19 @@ wrapperTag: div
6775
8172
  aria-label="Scroll right"
6776
8173
  >
6777
8174
  <span class="pf-v6-c-button__icon">
6778
- <i class="fas fa-angle-right" aria-hidden="true"></i>
8175
+ <svg
8176
+ class="pf-v6-svg"
8177
+ viewBox="0 0 20 20"
8178
+ fill="currentColor"
8179
+ aria-hidden="true"
8180
+ role="img"
8181
+ width="1em"
8182
+ height="1em"
8183
+ >
8184
+ <path
8185
+ 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"
8186
+ />
8187
+ </svg>
6779
8188
  </span>
6780
8189
  </button>
6781
8190
  </div>