@patternfly/patternfly 6.5.0-prerelease.6 → 6.5.0-prerelease.60

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 (392) hide show
  1. package/README.md +1 -1
  2. package/assets/fontawesome/_variables.scss +2 -1
  3. package/assets/images/RHAiExperienceIcon.svg +27 -0
  4. package/assets/images/RHAutomationsLogo.svg +96 -0
  5. package/assets/images/RHServerStackIcon.svg +16 -0
  6. package/assets/images/compass--hero-bg.png +0 -0
  7. package/assets/images/compass--rh-wallpaper-dark.png +0 -0
  8. package/assets/images/compass--rh-wallpaper-light.png +0 -0
  9. package/assets/images/compass--wallpaper-dark.jpg +0 -0
  10. package/assets/images/compass--wallpaper-dark.png +0 -0
  11. package/assets/images/compass--wallpaper-light.jpg +0 -0
  12. package/assets/images/compass--wallpaper-light.png +0 -0
  13. package/assets/images/glass-brand-dark.jpg +0 -0
  14. package/assets/images/glass-brand-dark.png +0 -0
  15. package/assets/images/glass-brand-light.jpg +0 -0
  16. package/assets/images/glass-brand-light.png +0 -0
  17. package/base/normalize.scss +7 -0
  18. package/base/patternfly-common.css +50 -0
  19. package/base/patternfly-common.scss +59 -0
  20. package/base/patternfly-svg-icons.css +11 -0
  21. package/base/patternfly-svg-icons.scss +14 -0
  22. package/base/patternfly-variables.css +926 -513
  23. package/base/patternfly-variables.scss +46 -4
  24. package/base/tokens/tokens-dark.scss +56 -8
  25. package/base/tokens/tokens-default.scss +69 -14
  26. package/base/tokens/tokens-glass-dark.scss +26 -0
  27. package/base/tokens/tokens-glass.scss +22 -0
  28. package/base/tokens/tokens-local.scss +17 -0
  29. package/base/tokens/tokens-palette.scss +3 -1
  30. package/base/tokens/tokens-redhat-dark.scss +21 -0
  31. package/base/tokens/tokens-redhat-glass-dark.scss +40 -0
  32. package/base/tokens/tokens-redhat-glass.scss +30 -0
  33. package/base/tokens/tokens-redhat-highcontrast-dark.scss +50 -0
  34. package/base/tokens/tokens-redhat-highcontrast.scss +128 -0
  35. package/base/tokens/tokens-redhat.scss +15 -0
  36. package/components/AboutModalBox/about-modal-box.css +36 -26
  37. package/components/Accordion/accordion.css +27 -14
  38. package/components/Accordion/accordion.scss +12 -2
  39. package/components/ActionList/action-list.css +2 -0
  40. package/components/ActionList/action-list.scss +2 -0
  41. package/components/Alert/alert.css +7 -5
  42. package/components/Alert/alert.scss +2 -1
  43. package/components/Avatar/avatar.css +12 -4
  44. package/components/BackgroundImage/background-image.css +6 -3
  45. package/components/Banner/banner.css +8 -6
  46. package/components/Brand/brand.css +3 -1
  47. package/components/Breadcrumb/breadcrumb.css +4 -3
  48. package/components/Button/button.css +121 -30
  49. package/components/Button/button.scss +131 -26
  50. package/components/CalendarMonth/calendar-month.css +4 -3
  51. package/components/Card/card.css +51 -13
  52. package/components/Card/card.scss +61 -8
  53. package/components/ClipboardCopy/clipboard-copy.css +7 -6
  54. package/components/ClipboardCopy/clipboard-copy.scss +3 -3
  55. package/components/CodeEditor/code-editor.css +1 -1
  56. package/components/CodeEditor/code-editor.scss +1 -1
  57. package/components/Compass/compass.css +320 -0
  58. package/components/Compass/compass.scss +350 -0
  59. package/components/DataList/data-list.css +34 -23
  60. package/components/DataList/data-list.scss +8 -2
  61. package/components/DescriptionList/description-list-order.scss +5 -1
  62. package/components/DescriptionList/description-list.css +7 -5
  63. package/components/DescriptionList/description-list.scss +5 -1
  64. package/components/Divider/divider.css +7 -5
  65. package/components/Drawer/drawer.css +115 -56
  66. package/components/Drawer/drawer.scss +82 -9
  67. package/components/DualListSelector/dual-list-selector.css +18 -12
  68. package/components/DualListSelector/dual-list-selector.scss +1 -1
  69. package/components/ExpandableSection/expandable-section.css +21 -16
  70. package/components/ExpandableSection/expandable-section.scss +6 -3
  71. package/components/Form/form.css +2 -2
  72. package/components/Form/form.scss +2 -2
  73. package/components/FormControl/form-control.css +3 -3
  74. package/components/FormControl/form-control.scss +3 -3
  75. package/components/Hero/hero.css +74 -0
  76. package/components/Hero/hero.scss +86 -0
  77. package/components/JumpLinks/jump-links.css +16 -5
  78. package/components/JumpLinks/jump-links.scss +17 -3
  79. package/components/Label/label-group.css +2 -2
  80. package/components/Label/label-group.scss +2 -2
  81. package/components/Label/label.css +4 -3
  82. package/components/Login/login.css +58 -40
  83. package/components/Login/login.scss +7 -3
  84. package/components/Masthead/masthead.css +112 -16
  85. package/components/Masthead/masthead.scss +112 -1
  86. package/components/Menu/menu.css +23 -14
  87. package/components/MenuToggle/menu-toggle.css +26 -3
  88. package/components/MenuToggle/menu-toggle.scss +30 -3
  89. package/components/ModalBox/modal-box.css +9 -7
  90. package/components/ModalBox/modal-box.scss +2 -2
  91. package/components/Nav/nav.css +82 -11
  92. package/components/Nav/nav.scss +85 -5
  93. package/components/NotificationDrawer/notification-drawer.css +19 -9
  94. package/components/NotificationDrawer/notification-drawer.scss +14 -5
  95. package/components/Page/page.css +214 -29
  96. package/components/Page/page.scss +228 -13
  97. package/components/Pagination/pagination.scss +5 -1
  98. package/components/Panel/panel.css +14 -0
  99. package/components/Panel/panel.scss +18 -0
  100. package/components/Progress/progress.css +3 -1
  101. package/components/Progress/progress.scss +3 -1
  102. package/components/ProgressStepper/progress-stepper.scss +5 -1
  103. package/components/Sidebar/sidebar.css +1 -1
  104. package/components/Sidebar/sidebar.scss +7 -3
  105. package/components/Skeleton/skeleton.css +16 -15
  106. package/components/Slider/slider.css +32 -18
  107. package/components/Switch/switch.css +4 -2
  108. package/components/Switch/switch.scss +1 -1
  109. package/components/Table/table-grid.css +28 -36
  110. package/components/Table/table-grid.scss +4 -4
  111. package/components/Table/table-tree-view.css +4 -2
  112. package/components/Table/table.css +45 -36
  113. package/components/Table/table.scss +15 -11
  114. package/components/Tabs/tabs.css +51 -33
  115. package/components/Tabs/tabs.scss +54 -26
  116. package/components/TextInputGroup/text-input-group.css +2 -2
  117. package/components/TextInputGroup/text-input-group.scss +2 -2
  118. package/components/ToggleGroup/toggle-group.css +34 -17
  119. package/components/ToggleGroup/toggle-group.scss +36 -20
  120. package/components/Toolbar/toolbar.css +47 -15
  121. package/components/Toolbar/toolbar.scss +34 -6
  122. package/components/TreeView/tree-view.css +45 -14
  123. package/components/TreeView/tree-view.scss +32 -1
  124. package/components/Wizard/wizard.css +41 -19
  125. package/components/Wizard/wizard.scss +26 -6
  126. package/components/_index.css +1936 -700
  127. package/components/_index.scss +3 -1
  128. package/docs/components/AboutModalBox/examples/AboutModalBox.md +13 -1
  129. package/docs/components/Accordion/examples/Accordion.md +392 -30
  130. package/docs/components/ActionList/examples/ActionList.md +143 -11
  131. package/docs/components/Alert/examples/Alert.md +678 -54
  132. package/docs/components/Avatar/examples/Avatar.md +4 -4
  133. package/docs/components/BackToTop/examples/BackToTop.md +13 -1
  134. package/docs/components/Banner/examples/Banner.md +65 -5
  135. package/docs/components/Brand/examples/Brand.md +2 -2
  136. package/docs/components/Breadcrumb/examples/Breadcrumb.md +299 -24
  137. package/docs/components/Button/examples/Button.md +2362 -163
  138. package/docs/components/CalendarMonth/examples/CalendarMonth.md +104 -8
  139. package/docs/components/Card/examples/Card.md +207 -4
  140. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +286 -22
  141. package/docs/components/CodeBlock/examples/CodeBlock.md +104 -8
  142. package/docs/components/CodeEditor/examples/CodeEditor.md +195 -15
  143. package/docs/components/Compass/examples/Compass.css +17 -0
  144. package/docs/components/Compass/examples/Compass.md +119 -0
  145. package/docs/components/DataList/examples/DataList.md +406 -205
  146. package/docs/components/DatePicker/examples/DatePicker.md +78 -6
  147. package/docs/components/DescriptionList/examples/DescriptionList.md +327 -27
  148. package/docs/components/Divider/examples/Divider.md +2 -2
  149. package/docs/components/DragDrop/examples/DragDrop.css +1 -1
  150. package/docs/components/Drawer/examples/Drawer.md +355 -35
  151. package/docs/components/DualListSelector/examples/DualListSelector.md +1013 -143
  152. package/docs/components/ExpandableSection/examples/ExpandableSection.md +91 -7
  153. package/docs/components/Form/examples/Form.md +78 -6
  154. package/docs/components/Hero/examples/Hero.md +25 -0
  155. package/docs/components/Icon/examples/Icon.md +92 -8
  156. package/docs/components/InlineEdit/examples/InlineEdit.md +312 -24
  157. package/docs/components/InputGroup/examples/InputGroup.md +27 -3
  158. package/docs/components/JumpLinks/examples/JumpLinks.md +54 -6
  159. package/docs/components/Label/examples/Label.md +2834 -218
  160. package/docs/components/Login/examples/Login.md +26 -2
  161. package/docs/components/Masthead/examples/masthead.md +80 -1
  162. package/docs/components/Menu/examples/Menu.md +1458 -116
  163. package/docs/components/MenuToggle/examples/MenuToggle.md +14 -5
  164. package/docs/components/ModalBox/examples/ModalBox.md +289 -25
  165. package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +156 -12
  166. package/docs/components/Nav/examples/Navigation.md +798 -58
  167. package/docs/components/NotificationDrawer/examples/NotificationDrawer.md +598 -46
  168. package/docs/components/OverflowMenu/examples/overflow-menu.md +78 -6
  169. package/docs/components/Page/examples/Page.md +72 -11
  170. package/docs/components/Pagination/examples/Pagination.md +627 -64
  171. package/docs/components/Panel/examples/Panel.md +12 -0
  172. package/docs/components/Popover/examples/Popover.md +286 -22
  173. package/docs/components/Progress/examples/Progress.md +91 -7
  174. package/docs/components/ProgressStepper/examples/ProgressStepper.md +275 -23
  175. package/docs/components/Sidebar/examples/Sidebar.md +1 -1
  176. package/docs/components/Slider/examples/Slider.md +52 -4
  177. package/docs/components/Table/examples/Table.md +876 -70
  178. package/docs/components/Tabs/examples/Tabs.md +5908 -457
  179. package/docs/components/TextInputGroup/examples/TextInputGroup.md +600 -48
  180. package/docs/components/ToggleGroup/examples/toggle-group.md +195 -15
  181. package/docs/components/Toolbar/examples/Toolbar.md +490 -44
  182. package/docs/components/TreeView/examples/TreeView.md +1390 -130
  183. package/docs/components/Wizard/examples/Wizard.md +815 -72
  184. package/docs/demos/AboutModal/examples/AboutModal.md +98 -47
  185. package/docs/demos/Alert/examples/Alert.md +359 -146
  186. package/docs/demos/BackToTop/examples/BackToTop.md +98 -47
  187. package/docs/demos/Banner/examples/Banner.md +170 -92
  188. package/docs/demos/Button/examples/Button.md +13 -1
  189. package/docs/demos/Card/examples/Card.md +963 -128
  190. package/docs/demos/CardView/examples/CardView.md +435 -252
  191. package/docs/demos/Compass/examples/Compass.md +5930 -0
  192. package/docs/demos/Dashboard/examples/Dashboard.md +648 -164
  193. package/docs/demos/DataList/examples/DataList.md +730 -225
  194. package/docs/demos/DescriptionList/examples/DescriptionList.md +279 -141
  195. package/docs/demos/Drawer/examples/Drawer.md +421 -235
  196. package/docs/demos/Form/examples/BasicForms.md +273 -21
  197. package/docs/demos/JumpLinks/examples/JumpLinks.md +518 -287
  198. package/docs/demos/Masthead/examples/Masthead.md +787 -451
  199. package/docs/demos/Modal/examples/Modal.md +588 -285
  200. package/docs/demos/Nav/examples/Nav.md +2913 -493
  201. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +1273 -310
  202. package/docs/demos/Page/examples/Page.md +1236 -689
  203. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +13 -1
  204. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +52 -4
  205. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +978 -385
  206. package/docs/demos/Skeleton/examples/Skeleton.md +85 -46
  207. package/docs/demos/Table/examples/Table.md +4531 -838
  208. package/docs/demos/Tabs/examples/Tabs.md +653 -293
  209. package/docs/demos/Toolbar/examples/Toolbar.md +584 -136
  210. package/docs/demos/Wizard/examples/Wizard.md +1165 -472
  211. package/docs/layouts/Bullseye/examples/Bullseye.css +2 -2
  212. package/docs/layouts/Bullseye/examples/Bullseye.md +2 -1
  213. package/docs/layouts/Flex/examples/Flex.css +3 -3
  214. package/docs/layouts/Flex/examples/Flex.md +3 -2
  215. package/docs/layouts/Gallery/examples/Gallery.css +2 -2
  216. package/docs/layouts/Gallery/examples/Gallery.md +4 -3
  217. package/docs/layouts/Grid/examples/Grid.css +1 -1
  218. package/docs/layouts/Grid/examples/Grid.md +6 -5
  219. package/docs/layouts/Level/examples/Level.css +3 -3
  220. package/docs/layouts/Level/examples/Level.md +2 -1
  221. package/docs/layouts/Split/examples/Split.css +1 -1
  222. package/docs/layouts/Split/examples/Split.md +2 -1
  223. package/docs/layouts/Stack/examples/Stack.css +3 -3
  224. package/docs/layouts/Stack/examples/Stack.md +2 -1
  225. package/docs/utilities/Accessibility/examples/Accessibility.md +3 -2
  226. package/docs/utilities/Alignment/examples/Alignment.css +4 -4
  227. package/docs/utilities/Alignment/examples/Alignment.md +3 -2
  228. package/docs/utilities/BackgroundColor/examples/BackgroundColor.md +5 -4
  229. package/docs/utilities/BoxShadow/examples/box-shadow.css +2 -2
  230. package/docs/utilities/BoxShadow/examples/box-shadow.md +2 -1
  231. package/docs/utilities/Display/examples/Display.css +1 -1
  232. package/docs/utilities/Display/examples/Display.md +3 -2
  233. package/docs/utilities/Flex/examples/Flex.css +7 -7
  234. package/docs/utilities/Flex/examples/Flex.md +3 -2
  235. package/docs/utilities/Float/examples/Float.css +2 -2
  236. package/docs/utilities/Float/examples/Float.md +3 -2
  237. package/docs/utilities/Sizing/examples/Sizing.md +8 -7
  238. package/docs/utilities/Spacing/examples/Spacing.css +2 -2
  239. package/docs/utilities/Spacing/examples/Spacing.md +3 -2
  240. package/docs/utilities/Text/examples/Text.md +5 -4
  241. package/icons/PfIcons/add-circle-o.svg +4 -0
  242. package/icons/PfIcons/ansible-tower.svg +4 -0
  243. package/icons/PfIcons/applications.svg +4 -0
  244. package/icons/PfIcons/arrow.svg +4 -0
  245. package/icons/PfIcons/asleep.svg +4 -0
  246. package/icons/PfIcons/attention-bell.svg +4 -0
  247. package/icons/PfIcons/automation.svg +4 -0
  248. package/icons/PfIcons/bell.svg +4 -0
  249. package/icons/PfIcons/blueprint.svg +4 -0
  250. package/icons/PfIcons/build.svg +4 -0
  251. package/icons/PfIcons/builder-image.svg +4 -0
  252. package/icons/PfIcons/bundle.svg +4 -0
  253. package/icons/PfIcons/catalog.svg +4 -0
  254. package/icons/PfIcons/chat.svg +4 -0
  255. package/icons/PfIcons/close.svg +4 -0
  256. package/icons/PfIcons/cloud-security.svg +4 -0
  257. package/icons/PfIcons/cloud-tenant.svg +4 -0
  258. package/icons/PfIcons/cluster.svg +4 -0
  259. package/icons/PfIcons/connected.svg +4 -0
  260. package/icons/PfIcons/container-node.svg +4 -0
  261. package/icons/PfIcons/cpu.svg +4 -0
  262. package/icons/PfIcons/critical-risk.svg +4 -0
  263. package/icons/PfIcons/data-processor.svg +4 -0
  264. package/icons/PfIcons/data-sink.svg +4 -0
  265. package/icons/PfIcons/data-source.svg +4 -0
  266. package/icons/PfIcons/degraded.svg +4 -0
  267. package/icons/PfIcons/disconnected.svg +4 -0
  268. package/icons/PfIcons/domain.svg +4 -0
  269. package/icons/PfIcons/edit.svg +4 -0
  270. package/icons/PfIcons/enhancement.svg +4 -0
  271. package/icons/PfIcons/enterprise.svg +4 -0
  272. package/icons/PfIcons/equalizer.svg +4 -0
  273. package/icons/PfIcons/error-circle-o.svg +4 -0
  274. package/icons/PfIcons/export.svg +4 -0
  275. package/icons/PfIcons/filter.svg +4 -0
  276. package/icons/PfIcons/flavor.svg +4 -0
  277. package/icons/PfIcons/folder-close.svg +4 -0
  278. package/icons/PfIcons/folder-open.svg +4 -0
  279. package/icons/PfIcons/globe-route.svg +4 -0
  280. package/icons/PfIcons/help.svg +4 -0
  281. package/icons/PfIcons/history.svg +4 -0
  282. package/icons/PfIcons/home.svg +4 -0
  283. package/icons/PfIcons/import.svg +4 -0
  284. package/icons/PfIcons/in-progress.svg +4 -0
  285. package/icons/PfIcons/info.svg +4 -0
  286. package/icons/PfIcons/infrastructure.svg +4 -0
  287. package/icons/PfIcons/integration.svg +4 -0
  288. package/icons/PfIcons/key.svg +4 -0
  289. package/icons/PfIcons/locked.svg +4 -0
  290. package/icons/PfIcons/maintenance.svg +4 -0
  291. package/icons/PfIcons/memory.svg +4 -0
  292. package/icons/PfIcons/messages.svg +4 -0
  293. package/icons/PfIcons/middleware.svg +4 -0
  294. package/icons/PfIcons/migration.svg +4 -0
  295. package/icons/PfIcons/module.svg +4 -0
  296. package/icons/PfIcons/monitoring.svg +4 -0
  297. package/icons/PfIcons/multicluster.svg +4 -0
  298. package/icons/PfIcons/namespaces.svg +4 -0
  299. package/icons/PfIcons/network.svg +4 -0
  300. package/icons/PfIcons/new-process.svg +4 -0
  301. package/icons/PfIcons/not-started.svg +4 -0
  302. package/icons/PfIcons/off.svg +4 -0
  303. package/icons/PfIcons/ok.svg +4 -0
  304. package/icons/PfIcons/on-running.svg +4 -0
  305. package/icons/PfIcons/on.svg +4 -0
  306. package/icons/PfIcons/open-drawer-right.svg +4 -0
  307. package/icons/PfIcons/openshift.svg +4 -0
  308. package/icons/PfIcons/openstack.svg +4 -0
  309. package/icons/PfIcons/optimize.svg +4 -0
  310. package/icons/PfIcons/orders.svg +4 -0
  311. package/icons/PfIcons/os-image.svg +4 -0
  312. package/icons/PfIcons/package.svg +4 -0
  313. package/icons/PfIcons/panel-close.svg +4 -0
  314. package/icons/PfIcons/panel-open.svg +4 -0
  315. package/icons/PfIcons/paused.svg +4 -0
  316. package/icons/PfIcons/pending.svg +4 -0
  317. package/icons/PfIcons/pficon-dragdrop.svg +4 -0
  318. package/icons/PfIcons/pficon-history.svg +4 -0
  319. package/icons/PfIcons/pficon-network-range.svg +4 -0
  320. package/icons/PfIcons/pficon-satellite.svg +4 -0
  321. package/icons/PfIcons/pficon-sort-common-asc.svg +4 -0
  322. package/icons/PfIcons/pficon-sort-common-desc.svg +4 -0
  323. package/icons/PfIcons/pficon-template.svg +4 -0
  324. package/icons/PfIcons/pficon-vcenter.svg +4 -0
  325. package/icons/PfIcons/plugged.svg +4 -0
  326. package/icons/PfIcons/port.svg +4 -0
  327. package/icons/PfIcons/print.svg +4 -0
  328. package/icons/PfIcons/private.svg +4 -0
  329. package/icons/PfIcons/process-automation.svg +4 -0
  330. package/icons/PfIcons/project.svg +4 -0
  331. package/icons/PfIcons/rebalance.svg +4 -0
  332. package/icons/PfIcons/rebooting.svg +4 -0
  333. package/icons/PfIcons/regions.svg +4 -0
  334. package/icons/PfIcons/registry.svg +4 -0
  335. package/icons/PfIcons/remove2.svg +4 -0
  336. package/icons/PfIcons/replicator.svg +4 -0
  337. package/icons/PfIcons/repository.svg +4 -0
  338. package/icons/PfIcons/resource-pool.svg +4 -0
  339. package/icons/PfIcons/resources-almost-empty.svg +4 -0
  340. package/icons/PfIcons/resources-almost-full.svg +4 -0
  341. package/icons/PfIcons/resources-empty.svg +4 -0
  342. package/icons/PfIcons/resources-full.svg +4 -0
  343. package/icons/PfIcons/running.svg +4 -0
  344. package/icons/PfIcons/save.svg +4 -0
  345. package/icons/PfIcons/screen.svg +4 -0
  346. package/icons/PfIcons/security.svg +4 -0
  347. package/icons/PfIcons/server-group.svg +4 -0
  348. package/icons/PfIcons/server.svg +4 -0
  349. package/icons/PfIcons/service-catalog.svg +4 -0
  350. package/icons/PfIcons/service.svg +4 -0
  351. package/icons/PfIcons/services.svg +4 -0
  352. package/icons/PfIcons/severity-critical.svg +4 -0
  353. package/icons/PfIcons/severity-important.svg +4 -0
  354. package/icons/PfIcons/severity-minor.svg +4 -0
  355. package/icons/PfIcons/severity-moderate.svg +4 -0
  356. package/icons/PfIcons/severity-none.svg +4 -0
  357. package/icons/PfIcons/severity-undefined.svg +4 -0
  358. package/icons/PfIcons/spinner.svg +4 -0
  359. package/icons/PfIcons/spinner2.svg +4 -0
  360. package/icons/PfIcons/storage-domain.svg +4 -0
  361. package/icons/PfIcons/task.svg +4 -0
  362. package/icons/PfIcons/tenant.svg +4 -0
  363. package/icons/PfIcons/thumb-tack.svg +4 -0
  364. package/icons/PfIcons/topology.svg +4 -0
  365. package/icons/PfIcons/treeview.svg +4 -0
  366. package/icons/PfIcons/trend-down.svg +4 -0
  367. package/icons/PfIcons/trend-up.svg +4 -0
  368. package/icons/PfIcons/unknown.svg +4 -0
  369. package/icons/PfIcons/unlocked.svg +4 -0
  370. package/icons/PfIcons/unplugged.svg +4 -0
  371. package/icons/PfIcons/user.svg +4 -0
  372. package/icons/PfIcons/users.svg +4 -0
  373. package/icons/PfIcons/virtual-machine.svg +4 -0
  374. package/icons/PfIcons/volume.svg +4 -0
  375. package/icons/PfIcons/warning-triangle.svg +4 -0
  376. package/icons/PfIcons/zone.svg +4 -0
  377. package/layouts/Flex/flex.scss +83 -19
  378. package/layouts/Gallery/gallery.css +6 -2
  379. package/layouts/_index.css +6 -2
  380. package/package.json +34 -16
  381. package/patternfly-base-no-globals.css +965 -491
  382. package/patternfly-base.css +972 -491
  383. package/patternfly-charts.css +3 -3
  384. package/patternfly-no-globals.css +2801 -1070
  385. package/patternfly.css +2808 -1070
  386. package/patternfly.min.css +1 -1
  387. package/patternfly.min.css.map +1 -1
  388. package/patternfly.scss +27 -0
  389. package/sass-utilities/functions.scss +32 -25
  390. package/sass-utilities/mixins.scss +36 -20
  391. package/sass-utilities/namespaces-components.scss +6 -0
  392. 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">
@@ -198,44 +199,46 @@ wrapperTag: div
198
199
  </div>
199
200
  </header>
200
201
  <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>
202
+ <div class="pf-v6-c-page__sidebar-main">
203
+ <div class="pf-v6-c-page__sidebar-body">
204
+ <nav
205
+ class="pf-v6-c-nav"
206
+ id="primary-detail-expanded-example-primary-nav"
207
+ aria-label="Global"
208
+ >
209
+ <ul class="pf-v6-c-nav__list" role="list">
210
+ <li class="pf-v6-c-nav__item">
211
+ <a href="#" class="pf-v6-c-nav__link">
212
+ <span class="pf-v6-c-nav__link-text">System panel</span>
213
+ </a>
214
+ </li>
215
+ <li class="pf-v6-c-nav__item">
216
+ <a
217
+ href="#"
218
+ class="pf-v6-c-nav__link pf-m-current"
219
+ aria-current="page"
220
+ >
221
+ <span class="pf-v6-c-nav__link-text">Policy</span>
222
+ </a>
223
+ </li>
224
+ <li class="pf-v6-c-nav__item">
225
+ <a href="#" class="pf-v6-c-nav__link">
226
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
227
+ </a>
228
+ </li>
229
+ <li class="pf-v6-c-nav__item">
230
+ <a href="#" class="pf-v6-c-nav__link">
231
+ <span class="pf-v6-c-nav__link-text">Network services</span>
232
+ </a>
233
+ </li>
234
+ <li class="pf-v6-c-nav__item">
235
+ <a href="#" class="pf-v6-c-nav__link">
236
+ <span class="pf-v6-c-nav__link-text">Server</span>
237
+ </a>
238
+ </li>
239
+ </ul>
240
+ </nav>
241
+ </div>
239
242
  </div>
240
243
  </div>
241
244
  <div class="pf-v6-c-page__main-container" tabindex="-1">
@@ -253,21 +256,57 @@ wrapperTag: div
253
256
  </li>
254
257
  <li class="pf-v6-c-breadcrumb__item">
255
258
  <span class="pf-v6-c-breadcrumb__item-divider">
256
- <i class="fas fa-angle-right" aria-hidden="true"></i>
259
+ <svg
260
+ class="pf-v6-svg"
261
+ viewBox="0 0 20 20"
262
+ fill="currentColor"
263
+ aria-hidden="true"
264
+ role="img"
265
+ width="1em"
266
+ height="1em"
267
+ >
268
+ <path
269
+ 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"
270
+ />
271
+ </svg>
257
272
  </span>
258
273
 
259
274
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
260
275
  </li>
261
276
  <li class="pf-v6-c-breadcrumb__item">
262
277
  <span class="pf-v6-c-breadcrumb__item-divider">
263
- <i class="fas fa-angle-right" aria-hidden="true"></i>
278
+ <svg
279
+ class="pf-v6-svg"
280
+ viewBox="0 0 20 20"
281
+ fill="currentColor"
282
+ aria-hidden="true"
283
+ role="img"
284
+ width="1em"
285
+ height="1em"
286
+ >
287
+ <path
288
+ 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"
289
+ />
290
+ </svg>
264
291
  </span>
265
292
 
266
293
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
267
294
  </li>
268
295
  <li class="pf-v6-c-breadcrumb__item">
269
296
  <span class="pf-v6-c-breadcrumb__item-divider">
270
- <i class="fas fa-angle-right" aria-hidden="true"></i>
297
+ <svg
298
+ class="pf-v6-svg"
299
+ viewBox="0 0 20 20"
300
+ fill="currentColor"
301
+ aria-hidden="true"
302
+ role="img"
303
+ width="1em"
304
+ height="1em"
305
+ >
306
+ <path
307
+ 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"
308
+ />
309
+ </svg>
271
310
  </span>
272
311
 
273
312
  <a
@@ -426,10 +465,25 @@ wrapperTag: div
426
465
  aria-label="Sort"
427
466
  >
428
467
  <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>
468
+ <span class="pf-v6-c-icon">
469
+ <span
470
+ class="pf-v6-c-icon__content pf-v6-m-mirror-inline-rtl"
471
+ >
472
+ <svg
473
+ class="pf-v6-svg"
474
+ viewBox="0 0 512 512"
475
+ fill="currentColor"
476
+ aria-hidden="true"
477
+ role="img"
478
+ width="1em"
479
+ height="1em"
480
+ >
481
+ <path
482
+ 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"
483
+ />
484
+ </svg>
485
+ </span>
486
+ </span>
433
487
  </span>
434
488
  </button>
435
489
  </div>
@@ -478,7 +532,6 @@ wrapperTag: div
478
532
  class="pf-v6-c-menu-toggle pf-m-text pf-m-plain"
479
533
  type="button"
480
534
  aria-expanded="false"
481
- aria-label="Menu toggle"
482
535
  id="primary-detail-expanded-example-drawer-toolbar-top-pagination"
483
536
  >
484
537
  <span class="pf-v6-c-menu-toggle__text">
@@ -511,10 +564,19 @@ wrapperTag: div
511
564
  aria-label="Go to previous page"
512
565
  >
513
566
  <span class="pf-v6-c-button__icon">
514
- <i
515
- class="fas fa-angle-left"
567
+ <svg
568
+ class="pf-v6-svg"
569
+ viewBox="0 0 256 512"
570
+ fill="currentColor"
516
571
  aria-hidden="true"
517
- ></i>
572
+ role="img"
573
+ width="1em"
574
+ height="1em"
575
+ >
576
+ <path
577
+ 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"
578
+ />
579
+ </svg>
518
580
  </span>
519
581
  </button>
520
582
  </div>
@@ -527,10 +589,19 @@ wrapperTag: div
527
589
  aria-label="Go to next page"
528
590
  >
529
591
  <span class="pf-v6-c-button__icon">
530
- <i
531
- class="fas fa-angle-right"
592
+ <svg
593
+ class="pf-v6-svg"
594
+ viewBox="0 0 256 512"
595
+ fill="currentColor"
532
596
  aria-hidden="true"
533
- ></i>
597
+ role="img"
598
+ width="1em"
599
+ height="1em"
600
+ >
601
+ <path
602
+ 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"
603
+ />
604
+ </svg>
534
605
  </span>
535
606
  </button>
536
607
  </div>
@@ -1093,7 +1164,19 @@ wrapperTag: div
1093
1164
  aria-label="Close drawer panel"
1094
1165
  >
1095
1166
  <span class="pf-v6-c-button__icon">
1096
- <i class="fas fa-times" aria-hidden="true"></i>
1167
+ <svg
1168
+ class="pf-v6-svg"
1169
+ viewBox="0 0 20 20"
1170
+ fill="currentColor"
1171
+ aria-hidden="true"
1172
+ role="img"
1173
+ width="1em"
1174
+ height="1em"
1175
+ >
1176
+ <path
1177
+ 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"
1178
+ />
1179
+ </svg>
1097
1180
  </span>
1098
1181
  </button>
1099
1182
  </div>
@@ -1112,6 +1195,7 @@ wrapperTag: div
1112
1195
  <div class="pf-v6-c-drawer__body pf-m-no-padding">
1113
1196
  <div
1114
1197
  class="pf-v6-c-tabs pf-m-box pf-m-fill"
1198
+ aria-label="Node 2"
1115
1199
  role="region"
1116
1200
  id="primary-detail-expanded-example-drawer-tabs"
1117
1201
  >
@@ -1122,11 +1206,27 @@ wrapperTag: div
1122
1206
  aria-label="Scroll left"
1123
1207
  >
1124
1208
  <span class="pf-v6-c-button__icon">
1125
- <i class="fas fa-angle-left" aria-hidden="true"></i>
1209
+ <svg
1210
+ class="pf-v6-svg"
1211
+ viewBox="0 0 20 20"
1212
+ fill="currentColor"
1213
+ aria-hidden="true"
1214
+ role="img"
1215
+ width="1em"
1216
+ height="1em"
1217
+ >
1218
+ <path
1219
+ 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"
1220
+ />
1221
+ </svg>
1126
1222
  </span>
1127
1223
  </button>
1128
1224
  </div>
1129
- <ul class="pf-v6-c-tabs__list" role="tablist">
1225
+ <ul
1226
+ class="pf-v6-c-tabs__list"
1227
+ role="tablist"
1228
+ aria-label="Node 2"
1229
+ >
1130
1230
  <li
1131
1231
  class="pf-v6-c-tabs__item pf-m-current"
1132
1232
  role="presentation"
@@ -1135,6 +1235,7 @@ wrapperTag: div
1135
1235
  type="button"
1136
1236
  class="pf-v6-c-tabs__link"
1137
1237
  role="tab"
1238
+ aria-selected="true"
1138
1239
  aria-controls="primary-detail-expanded-example-drawer-tabs-tab1-panel"
1139
1240
  id="primary-detail-expanded-example-drawer-tabs-tab1-link"
1140
1241
  >
@@ -1146,6 +1247,7 @@ wrapperTag: div
1146
1247
  type="button"
1147
1248
  class="pf-v6-c-tabs__link"
1148
1249
  role="tab"
1250
+ aria-selected="false"
1149
1251
  aria-controls="primary-detail-expanded-example-drawer-tabs-tab2-panel"
1150
1252
  id="primary-detail-expanded-example-drawer-tabs-tab2-link"
1151
1253
  >
@@ -1160,7 +1262,19 @@ wrapperTag: div
1160
1262
  aria-label="Scroll right"
1161
1263
  >
1162
1264
  <span class="pf-v6-c-button__icon">
1163
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1265
+ <svg
1266
+ class="pf-v6-svg"
1267
+ viewBox="0 0 20 20"
1268
+ fill="currentColor"
1269
+ aria-hidden="true"
1270
+ role="img"
1271
+ width="1em"
1272
+ height="1em"
1273
+ >
1274
+ <path
1275
+ 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"
1276
+ />
1277
+ </svg>
1164
1278
  </span>
1165
1279
  </button>
1166
1280
  </div>
@@ -1280,9 +1394,10 @@ wrapperTag: div
1280
1394
  <span class="pf-v6-c-button__text">Skip to content</span>
1281
1395
  </a>
1282
1396
  </div>
1397
+
1283
1398
  <header
1284
1399
  class="pf-v6-c-masthead pf-m-display-stack pf-m-display-inline-on-lg"
1285
- id="primary-detail-collapsed-example-masthead"
1400
+ id="primary-detail-collapsed-example-docked"
1286
1401
  >
1287
1402
  <div class="pf-v6-c-masthead__main">
1288
1403
  <span class="pf-v6-c-masthead__toggle">
@@ -1325,7 +1440,7 @@ wrapperTag: div
1325
1440
  y1="2.25860997e-13%"
1326
1441
  x2="32%"
1327
1442
  y2="100%"
1328
- id="linearGradient-primary-detail-collapsed-example-masthead"
1443
+ id="linearGradient-primary-detail-collapsed-example-docked"
1329
1444
  >
1330
1445
  <stop stop-color="#2B9AF3" offset="0%" />
1331
1446
  <stop
@@ -1379,11 +1494,11 @@ wrapperTag: div
1379
1494
  />
1380
1495
  <path
1381
1496
  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)"
1497
+ fill="url(#linearGradient-primary-detail-collapsed-example-docked)"
1383
1498
  />
1384
1499
  <path
1385
1500
  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)"
1501
+ fill="url(#linearGradient-primary-detail-collapsed-example-docked)"
1387
1502
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
1388
1503
  />
1389
1504
  </g>
@@ -1395,7 +1510,7 @@ wrapperTag: div
1395
1510
  <div class="pf-v6-c-masthead__content">
1396
1511
  <div
1397
1512
  class="pf-v6-c-toolbar pf-m-static"
1398
- id="primary-detail-collapsed-example-masthead-toolbar"
1513
+ id="primary-detail-collapsed-example-docked-toolbar"
1399
1514
  >
1400
1515
  <div class="pf-v6-c-toolbar__content">
1401
1516
  <div class="pf-v6-c-toolbar__content-section">
@@ -1462,44 +1577,46 @@ wrapperTag: div
1462
1577
  </div>
1463
1578
  </header>
1464
1579
  <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>
1580
+ <div class="pf-v6-c-page__sidebar-main">
1581
+ <div class="pf-v6-c-page__sidebar-body">
1582
+ <nav
1583
+ class="pf-v6-c-nav"
1584
+ id="primary-detail-collapsed-example-primary-nav"
1585
+ aria-label="Global"
1586
+ >
1587
+ <ul class="pf-v6-c-nav__list" role="list">
1588
+ <li class="pf-v6-c-nav__item">
1589
+ <a href="#" class="pf-v6-c-nav__link">
1590
+ <span class="pf-v6-c-nav__link-text">System panel</span>
1591
+ </a>
1592
+ </li>
1593
+ <li class="pf-v6-c-nav__item">
1594
+ <a
1595
+ href="#"
1596
+ class="pf-v6-c-nav__link pf-m-current"
1597
+ aria-current="page"
1598
+ >
1599
+ <span class="pf-v6-c-nav__link-text">Policy</span>
1600
+ </a>
1601
+ </li>
1602
+ <li class="pf-v6-c-nav__item">
1603
+ <a href="#" class="pf-v6-c-nav__link">
1604
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
1605
+ </a>
1606
+ </li>
1607
+ <li class="pf-v6-c-nav__item">
1608
+ <a href="#" class="pf-v6-c-nav__link">
1609
+ <span class="pf-v6-c-nav__link-text">Network services</span>
1610
+ </a>
1611
+ </li>
1612
+ <li class="pf-v6-c-nav__item">
1613
+ <a href="#" class="pf-v6-c-nav__link">
1614
+ <span class="pf-v6-c-nav__link-text">Server</span>
1615
+ </a>
1616
+ </li>
1617
+ </ul>
1618
+ </nav>
1619
+ </div>
1503
1620
  </div>
1504
1621
  </div>
1505
1622
  <div class="pf-v6-c-page__main-container" tabindex="-1">
@@ -1517,21 +1634,57 @@ wrapperTag: div
1517
1634
  </li>
1518
1635
  <li class="pf-v6-c-breadcrumb__item">
1519
1636
  <span class="pf-v6-c-breadcrumb__item-divider">
1520
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1637
+ <svg
1638
+ class="pf-v6-svg"
1639
+ viewBox="0 0 20 20"
1640
+ fill="currentColor"
1641
+ aria-hidden="true"
1642
+ role="img"
1643
+ width="1em"
1644
+ height="1em"
1645
+ >
1646
+ <path
1647
+ 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"
1648
+ />
1649
+ </svg>
1521
1650
  </span>
1522
1651
 
1523
1652
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1524
1653
  </li>
1525
1654
  <li class="pf-v6-c-breadcrumb__item">
1526
1655
  <span class="pf-v6-c-breadcrumb__item-divider">
1527
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1656
+ <svg
1657
+ class="pf-v6-svg"
1658
+ viewBox="0 0 20 20"
1659
+ fill="currentColor"
1660
+ aria-hidden="true"
1661
+ role="img"
1662
+ width="1em"
1663
+ height="1em"
1664
+ >
1665
+ <path
1666
+ 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"
1667
+ />
1668
+ </svg>
1528
1669
  </span>
1529
1670
 
1530
1671
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1531
1672
  </li>
1532
1673
  <li class="pf-v6-c-breadcrumb__item">
1533
1674
  <span class="pf-v6-c-breadcrumb__item-divider">
1534
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1675
+ <svg
1676
+ class="pf-v6-svg"
1677
+ viewBox="0 0 20 20"
1678
+ fill="currentColor"
1679
+ aria-hidden="true"
1680
+ role="img"
1681
+ width="1em"
1682
+ height="1em"
1683
+ >
1684
+ <path
1685
+ 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"
1686
+ />
1687
+ </svg>
1535
1688
  </span>
1536
1689
 
1537
1690
  <a
@@ -1691,10 +1844,25 @@ wrapperTag: div
1691
1844
  aria-label="Sort"
1692
1845
  >
1693
1846
  <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>
1847
+ <span class="pf-v6-c-icon">
1848
+ <span
1849
+ class="pf-v6-c-icon__content pf-v6-m-mirror-inline-rtl"
1850
+ >
1851
+ <svg
1852
+ class="pf-v6-svg"
1853
+ viewBox="0 0 512 512"
1854
+ fill="currentColor"
1855
+ aria-hidden="true"
1856
+ role="img"
1857
+ width="1em"
1858
+ height="1em"
1859
+ >
1860
+ <path
1861
+ 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"
1862
+ />
1863
+ </svg>
1864
+ </span>
1865
+ </span>
1698
1866
  </span>
1699
1867
  </button>
1700
1868
  </div>
@@ -1743,7 +1911,6 @@ wrapperTag: div
1743
1911
  class="pf-v6-c-menu-toggle pf-m-text pf-m-plain"
1744
1912
  type="button"
1745
1913
  aria-expanded="false"
1746
- aria-label="Menu toggle"
1747
1914
  id="primary-detail-collapsed-example-drawer-toolbar-top-pagination"
1748
1915
  >
1749
1916
  <span class="pf-v6-c-menu-toggle__text">
@@ -1776,10 +1943,19 @@ wrapperTag: div
1776
1943
  aria-label="Go to previous page"
1777
1944
  >
1778
1945
  <span class="pf-v6-c-button__icon">
1779
- <i
1780
- class="fas fa-angle-left"
1946
+ <svg
1947
+ class="pf-v6-svg"
1948
+ viewBox="0 0 256 512"
1949
+ fill="currentColor"
1781
1950
  aria-hidden="true"
1782
- ></i>
1951
+ role="img"
1952
+ width="1em"
1953
+ height="1em"
1954
+ >
1955
+ <path
1956
+ 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"
1957
+ />
1958
+ </svg>
1783
1959
  </span>
1784
1960
  </button>
1785
1961
  </div>
@@ -1792,10 +1968,19 @@ wrapperTag: div
1792
1968
  aria-label="Go to next page"
1793
1969
  >
1794
1970
  <span class="pf-v6-c-button__icon">
1795
- <i
1796
- class="fas fa-angle-right"
1971
+ <svg
1972
+ class="pf-v6-svg"
1973
+ viewBox="0 0 256 512"
1974
+ fill="currentColor"
1797
1975
  aria-hidden="true"
1798
- ></i>
1976
+ role="img"
1977
+ width="1em"
1978
+ height="1em"
1979
+ >
1980
+ <path
1981
+ 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"
1982
+ />
1983
+ </svg>
1799
1984
  </span>
1800
1985
  </button>
1801
1986
  </div>
@@ -2358,7 +2543,19 @@ wrapperTag: div
2358
2543
  aria-label="Close drawer panel"
2359
2544
  >
2360
2545
  <span class="pf-v6-c-button__icon">
2361
- <i class="fas fa-times" aria-hidden="true"></i>
2546
+ <svg
2547
+ class="pf-v6-svg"
2548
+ viewBox="0 0 20 20"
2549
+ fill="currentColor"
2550
+ aria-hidden="true"
2551
+ role="img"
2552
+ width="1em"
2553
+ height="1em"
2554
+ >
2555
+ <path
2556
+ 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"
2557
+ />
2558
+ </svg>
2362
2559
  </span>
2363
2560
  </button>
2364
2561
  </div>
@@ -2464,9 +2661,10 @@ wrapperTag: div
2464
2661
  <span class="pf-v6-c-button__text">Skip to content</span>
2465
2662
  </a>
2466
2663
  </div>
2664
+
2467
2665
  <header
2468
2666
  class="pf-v6-c-masthead pf-m-display-stack pf-m-display-inline-on-lg"
2469
- id="primary-detail-content-body-padding-example-masthead"
2667
+ id="primary-detail-content-body-padding-example-docked"
2470
2668
  >
2471
2669
  <div class="pf-v6-c-masthead__main">
2472
2670
  <span class="pf-v6-c-masthead__toggle">
@@ -2509,7 +2707,7 @@ wrapperTag: div
2509
2707
  y1="2.25860997e-13%"
2510
2708
  x2="32%"
2511
2709
  y2="100%"
2512
- id="linearGradient-primary-detail-content-body-padding-example-masthead"
2710
+ id="linearGradient-primary-detail-content-body-padding-example-docked"
2513
2711
  >
2514
2712
  <stop stop-color="#2B9AF3" offset="0%" />
2515
2713
  <stop
@@ -2563,11 +2761,11 @@ wrapperTag: div
2563
2761
  />
2564
2762
  <path
2565
2763
  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)"
2764
+ fill="url(#linearGradient-primary-detail-content-body-padding-example-docked)"
2567
2765
  />
2568
2766
  <path
2569
2767
  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)"
2768
+ fill="url(#linearGradient-primary-detail-content-body-padding-example-docked)"
2571
2769
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
2572
2770
  />
2573
2771
  </g>
@@ -2579,7 +2777,7 @@ wrapperTag: div
2579
2777
  <div class="pf-v6-c-masthead__content">
2580
2778
  <div
2581
2779
  class="pf-v6-c-toolbar pf-m-static"
2582
- id="primary-detail-content-body-padding-example-masthead-toolbar"
2780
+ id="primary-detail-content-body-padding-example-docked-toolbar"
2583
2781
  >
2584
2782
  <div class="pf-v6-c-toolbar__content">
2585
2783
  <div class="pf-v6-c-toolbar__content-section">
@@ -2646,44 +2844,46 @@ wrapperTag: div
2646
2844
  </div>
2647
2845
  </header>
2648
2846
  <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>
2847
+ <div class="pf-v6-c-page__sidebar-main">
2848
+ <div class="pf-v6-c-page__sidebar-body">
2849
+ <nav
2850
+ class="pf-v6-c-nav"
2851
+ id="primary-detail-content-body-padding-example-primary-nav"
2852
+ aria-label="Global"
2853
+ >
2854
+ <ul class="pf-v6-c-nav__list" role="list">
2855
+ <li class="pf-v6-c-nav__item">
2856
+ <a href="#" class="pf-v6-c-nav__link">
2857
+ <span class="pf-v6-c-nav__link-text">System panel</span>
2858
+ </a>
2859
+ </li>
2860
+ <li class="pf-v6-c-nav__item">
2861
+ <a
2862
+ href="#"
2863
+ class="pf-v6-c-nav__link pf-m-current"
2864
+ aria-current="page"
2865
+ >
2866
+ <span class="pf-v6-c-nav__link-text">Policy</span>
2867
+ </a>
2868
+ </li>
2869
+ <li class="pf-v6-c-nav__item">
2870
+ <a href="#" class="pf-v6-c-nav__link">
2871
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
2872
+ </a>
2873
+ </li>
2874
+ <li class="pf-v6-c-nav__item">
2875
+ <a href="#" class="pf-v6-c-nav__link">
2876
+ <span class="pf-v6-c-nav__link-text">Network services</span>
2877
+ </a>
2878
+ </li>
2879
+ <li class="pf-v6-c-nav__item">
2880
+ <a href="#" class="pf-v6-c-nav__link">
2881
+ <span class="pf-v6-c-nav__link-text">Server</span>
2882
+ </a>
2883
+ </li>
2884
+ </ul>
2885
+ </nav>
2886
+ </div>
2687
2887
  </div>
2688
2888
  </div>
2689
2889
  <div class="pf-v6-c-page__main-container" tabindex="-1">
@@ -2701,21 +2901,57 @@ wrapperTag: div
2701
2901
  </li>
2702
2902
  <li class="pf-v6-c-breadcrumb__item">
2703
2903
  <span class="pf-v6-c-breadcrumb__item-divider">
2704
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2904
+ <svg
2905
+ class="pf-v6-svg"
2906
+ viewBox="0 0 20 20"
2907
+ fill="currentColor"
2908
+ aria-hidden="true"
2909
+ role="img"
2910
+ width="1em"
2911
+ height="1em"
2912
+ >
2913
+ <path
2914
+ 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"
2915
+ />
2916
+ </svg>
2705
2917
  </span>
2706
2918
 
2707
2919
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
2708
2920
  </li>
2709
2921
  <li class="pf-v6-c-breadcrumb__item">
2710
2922
  <span class="pf-v6-c-breadcrumb__item-divider">
2711
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2923
+ <svg
2924
+ class="pf-v6-svg"
2925
+ viewBox="0 0 20 20"
2926
+ fill="currentColor"
2927
+ aria-hidden="true"
2928
+ role="img"
2929
+ width="1em"
2930
+ height="1em"
2931
+ >
2932
+ <path
2933
+ 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"
2934
+ />
2935
+ </svg>
2712
2936
  </span>
2713
2937
 
2714
2938
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
2715
2939
  </li>
2716
2940
  <li class="pf-v6-c-breadcrumb__item">
2717
2941
  <span class="pf-v6-c-breadcrumb__item-divider">
2718
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2942
+ <svg
2943
+ class="pf-v6-svg"
2944
+ viewBox="0 0 20 20"
2945
+ fill="currentColor"
2946
+ aria-hidden="true"
2947
+ role="img"
2948
+ width="1em"
2949
+ height="1em"
2950
+ >
2951
+ <path
2952
+ 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"
2953
+ />
2954
+ </svg>
2719
2955
  </span>
2720
2956
 
2721
2957
  <a
@@ -2819,10 +3055,25 @@ wrapperTag: div
2819
3055
  aria-label="Sort"
2820
3056
  >
2821
3057
  <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>
3058
+ <span class="pf-v6-c-icon">
3059
+ <span
3060
+ class="pf-v6-c-icon__content pf-v6-m-mirror-inline-rtl"
3061
+ >
3062
+ <svg
3063
+ class="pf-v6-svg"
3064
+ viewBox="0 0 512 512"
3065
+ fill="currentColor"
3066
+ aria-hidden="true"
3067
+ role="img"
3068
+ width="1em"
3069
+ height="1em"
3070
+ >
3071
+ <path
3072
+ 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"
3073
+ />
3074
+ </svg>
3075
+ </span>
3076
+ </span>
2826
3077
  </span>
2827
3078
  </button>
2828
3079
  </div>
@@ -2871,7 +3122,6 @@ wrapperTag: div
2871
3122
  class="pf-v6-c-menu-toggle pf-m-text pf-m-plain"
2872
3123
  type="button"
2873
3124
  aria-expanded="false"
2874
- aria-label="Menu toggle"
2875
3125
  id="primary-detail-content-body-padding-example-drawer-toolbar-top-pagination"
2876
3126
  >
2877
3127
  <span class="pf-v6-c-menu-toggle__text">
@@ -2904,10 +3154,19 @@ wrapperTag: div
2904
3154
  aria-label="Go to previous page"
2905
3155
  >
2906
3156
  <span class="pf-v6-c-button__icon">
2907
- <i
2908
- class="fas fa-angle-left"
3157
+ <svg
3158
+ class="pf-v6-svg"
3159
+ viewBox="0 0 256 512"
3160
+ fill="currentColor"
2909
3161
  aria-hidden="true"
2910
- ></i>
3162
+ role="img"
3163
+ width="1em"
3164
+ height="1em"
3165
+ >
3166
+ <path
3167
+ 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"
3168
+ />
3169
+ </svg>
2911
3170
  </span>
2912
3171
  </button>
2913
3172
  </div>
@@ -2920,10 +3179,19 @@ wrapperTag: div
2920
3179
  aria-label="Go to next page"
2921
3180
  >
2922
3181
  <span class="pf-v6-c-button__icon">
2923
- <i
2924
- class="fas fa-angle-right"
3182
+ <svg
3183
+ class="pf-v6-svg"
3184
+ viewBox="0 0 256 512"
3185
+ fill="currentColor"
2925
3186
  aria-hidden="true"
2926
- ></i>
3187
+ role="img"
3188
+ width="1em"
3189
+ height="1em"
3190
+ >
3191
+ <path
3192
+ 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"
3193
+ />
3194
+ </svg>
2927
3195
  </span>
2928
3196
  </button>
2929
3197
  </div>
@@ -3486,7 +3754,19 @@ wrapperTag: div
3486
3754
  aria-label="Close drawer panel"
3487
3755
  >
3488
3756
  <span class="pf-v6-c-button__icon">
3489
- <i class="fas fa-times" aria-hidden="true"></i>
3757
+ <svg
3758
+ class="pf-v6-svg"
3759
+ viewBox="0 0 20 20"
3760
+ fill="currentColor"
3761
+ aria-hidden="true"
3762
+ role="img"
3763
+ width="1em"
3764
+ height="1em"
3765
+ >
3766
+ <path
3767
+ 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"
3768
+ />
3769
+ </svg>
3490
3770
  </span>
3491
3771
  </button>
3492
3772
  </div>
@@ -3592,9 +3872,10 @@ wrapperTag: div
3592
3872
  <span class="pf-v6-c-button__text">Skip to content</span>
3593
3873
  </a>
3594
3874
  </div>
3875
+
3595
3876
  <header
3596
3877
  class="pf-v6-c-masthead pf-m-display-stack pf-m-display-inline-on-lg"
3597
- id="primary-detail-card-view-expanded-example-masthead"
3878
+ id="primary-detail-card-view-expanded-example-docked"
3598
3879
  >
3599
3880
  <div class="pf-v6-c-masthead__main">
3600
3881
  <span class="pf-v6-c-masthead__toggle">
@@ -3637,7 +3918,7 @@ wrapperTag: div
3637
3918
  y1="2.25860997e-13%"
3638
3919
  x2="32%"
3639
3920
  y2="100%"
3640
- id="linearGradient-primary-detail-card-view-expanded-example-masthead"
3921
+ id="linearGradient-primary-detail-card-view-expanded-example-docked"
3641
3922
  >
3642
3923
  <stop stop-color="#2B9AF3" offset="0%" />
3643
3924
  <stop
@@ -3691,11 +3972,11 @@ wrapperTag: div
3691
3972
  />
3692
3973
  <path
3693
3974
  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)"
3975
+ fill="url(#linearGradient-primary-detail-card-view-expanded-example-docked)"
3695
3976
  />
3696
3977
  <path
3697
3978
  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)"
3979
+ fill="url(#linearGradient-primary-detail-card-view-expanded-example-docked)"
3699
3980
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
3700
3981
  />
3701
3982
  </g>
@@ -3707,7 +3988,7 @@ wrapperTag: div
3707
3988
  <div class="pf-v6-c-masthead__content">
3708
3989
  <div
3709
3990
  class="pf-v6-c-toolbar pf-m-static"
3710
- id="primary-detail-card-view-expanded-example-masthead-toolbar"
3991
+ id="primary-detail-card-view-expanded-example-docked-toolbar"
3711
3992
  >
3712
3993
  <div class="pf-v6-c-toolbar__content">
3713
3994
  <div class="pf-v6-c-toolbar__content-section">
@@ -3774,44 +4055,46 @@ wrapperTag: div
3774
4055
  </div>
3775
4056
  </header>
3776
4057
  <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>
4058
+ <div class="pf-v6-c-page__sidebar-main">
4059
+ <div class="pf-v6-c-page__sidebar-body">
4060
+ <nav
4061
+ class="pf-v6-c-nav"
4062
+ id="primary-detail-card-view-expanded-example-primary-nav"
4063
+ aria-label="Global"
4064
+ >
4065
+ <ul class="pf-v6-c-nav__list" role="list">
4066
+ <li class="pf-v6-c-nav__item">
4067
+ <a href="#" class="pf-v6-c-nav__link">
4068
+ <span class="pf-v6-c-nav__link-text">System panel</span>
4069
+ </a>
4070
+ </li>
4071
+ <li class="pf-v6-c-nav__item">
4072
+ <a
4073
+ href="#"
4074
+ class="pf-v6-c-nav__link pf-m-current"
4075
+ aria-current="page"
4076
+ >
4077
+ <span class="pf-v6-c-nav__link-text">Policy</span>
4078
+ </a>
4079
+ </li>
4080
+ <li class="pf-v6-c-nav__item">
4081
+ <a href="#" class="pf-v6-c-nav__link">
4082
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
4083
+ </a>
4084
+ </li>
4085
+ <li class="pf-v6-c-nav__item">
4086
+ <a href="#" class="pf-v6-c-nav__link">
4087
+ <span class="pf-v6-c-nav__link-text">Network services</span>
4088
+ </a>
4089
+ </li>
4090
+ <li class="pf-v6-c-nav__item">
4091
+ <a href="#" class="pf-v6-c-nav__link">
4092
+ <span class="pf-v6-c-nav__link-text">Server</span>
4093
+ </a>
4094
+ </li>
4095
+ </ul>
4096
+ </nav>
4097
+ </div>
3815
4098
  </div>
3816
4099
  </div>
3817
4100
  <div class="pf-v6-c-page__main-container" tabindex="-1">
@@ -3829,21 +4112,57 @@ wrapperTag: div
3829
4112
  </li>
3830
4113
  <li class="pf-v6-c-breadcrumb__item">
3831
4114
  <span class="pf-v6-c-breadcrumb__item-divider">
3832
- <i class="fas fa-angle-right" aria-hidden="true"></i>
4115
+ <svg
4116
+ class="pf-v6-svg"
4117
+ viewBox="0 0 20 20"
4118
+ fill="currentColor"
4119
+ aria-hidden="true"
4120
+ role="img"
4121
+ width="1em"
4122
+ height="1em"
4123
+ >
4124
+ <path
4125
+ 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"
4126
+ />
4127
+ </svg>
3833
4128
  </span>
3834
4129
 
3835
4130
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
3836
4131
  </li>
3837
4132
  <li class="pf-v6-c-breadcrumb__item">
3838
4133
  <span class="pf-v6-c-breadcrumb__item-divider">
3839
- <i class="fas fa-angle-right" aria-hidden="true"></i>
4134
+ <svg
4135
+ class="pf-v6-svg"
4136
+ viewBox="0 0 20 20"
4137
+ fill="currentColor"
4138
+ aria-hidden="true"
4139
+ role="img"
4140
+ width="1em"
4141
+ height="1em"
4142
+ >
4143
+ <path
4144
+ 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"
4145
+ />
4146
+ </svg>
3840
4147
  </span>
3841
4148
 
3842
4149
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
3843
4150
  </li>
3844
4151
  <li class="pf-v6-c-breadcrumb__item">
3845
4152
  <span class="pf-v6-c-breadcrumb__item-divider">
3846
- <i class="fas fa-angle-right" aria-hidden="true"></i>
4153
+ <svg
4154
+ class="pf-v6-svg"
4155
+ viewBox="0 0 20 20"
4156
+ fill="currentColor"
4157
+ aria-hidden="true"
4158
+ role="img"
4159
+ width="1em"
4160
+ height="1em"
4161
+ >
4162
+ <path
4163
+ 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"
4164
+ />
4165
+ </svg>
3847
4166
  </span>
3848
4167
 
3849
4168
  <a
@@ -3983,10 +4302,25 @@ wrapperTag: div
3983
4302
  aria-label="Sort"
3984
4303
  >
3985
4304
  <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>
4305
+ <span class="pf-v6-c-icon">
4306
+ <span
4307
+ class="pf-v6-c-icon__content pf-v6-m-mirror-inline-rtl"
4308
+ >
4309
+ <svg
4310
+ class="pf-v6-svg"
4311
+ viewBox="0 0 512 512"
4312
+ fill="currentColor"
4313
+ aria-hidden="true"
4314
+ role="img"
4315
+ width="1em"
4316
+ height="1em"
4317
+ >
4318
+ <path
4319
+ 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"
4320
+ />
4321
+ </svg>
4322
+ </span>
4323
+ </span>
3990
4324
  </span>
3991
4325
  </button>
3992
4326
  </div>
@@ -4045,7 +4379,19 @@ wrapperTag: div
4045
4379
  aria-label="Grid view"
4046
4380
  >
4047
4381
  <span class="pf-v6-c-button__icon">
4048
- <i class="fas fa-th" aria-hidden="true"></i>
4382
+ <svg
4383
+ class="pf-v6-svg"
4384
+ viewBox="0 0 512 512"
4385
+ fill="currentColor"
4386
+ aria-hidden="true"
4387
+ role="img"
4388
+ width="1em"
4389
+ height="1em"
4390
+ >
4391
+ <path
4392
+ 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"
4393
+ />
4394
+ </svg>
4049
4395
  </span>
4050
4396
  </button>
4051
4397
  </div>
@@ -4056,7 +4402,19 @@ wrapperTag: div
4056
4402
  aria-label="List view"
4057
4403
  >
4058
4404
  <span class="pf-v6-c-button__icon">
4059
- <i class="fas fa-list-ul" aria-hidden="true"></i>
4405
+ <svg
4406
+ class="pf-v6-svg"
4407
+ viewBox="0 0 512 512"
4408
+ fill="currentColor"
4409
+ aria-hidden="true"
4410
+ role="img"
4411
+ width="1em"
4412
+ height="1em"
4413
+ >
4414
+ <path
4415
+ 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"
4416
+ />
4417
+ </svg>
4060
4418
  </span>
4061
4419
  </button>
4062
4420
  </div>
@@ -4069,7 +4427,6 @@ wrapperTag: div
4069
4427
  class="pf-v6-c-menu-toggle pf-m-text pf-m-plain"
4070
4428
  type="button"
4071
4429
  aria-expanded="false"
4072
- aria-label="Menu toggle"
4073
4430
  id="primary-detail-card-view-expanded-example-drawer-toolbar-top-pagination"
4074
4431
  >
4075
4432
  <span class="pf-v6-c-menu-toggle__text">
@@ -4100,7 +4457,19 @@ wrapperTag: div
4100
4457
  aria-label="Go to previous page"
4101
4458
  >
4102
4459
  <span class="pf-v6-c-button__icon">
4103
- <i class="fas fa-angle-left" aria-hidden="true"></i>
4460
+ <svg
4461
+ class="pf-v6-svg"
4462
+ viewBox="0 0 256 512"
4463
+ fill="currentColor"
4464
+ aria-hidden="true"
4465
+ role="img"
4466
+ width="1em"
4467
+ height="1em"
4468
+ >
4469
+ <path
4470
+ 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"
4471
+ />
4472
+ </svg>
4104
4473
  </span>
4105
4474
  </button>
4106
4475
  </div>
@@ -4113,10 +4482,19 @@ wrapperTag: div
4113
4482
  aria-label="Go to next page"
4114
4483
  >
4115
4484
  <span class="pf-v6-c-button__icon">
4116
- <i
4117
- class="fas fa-angle-right"
4485
+ <svg
4486
+ class="pf-v6-svg"
4487
+ viewBox="0 0 256 512"
4488
+ fill="currentColor"
4118
4489
  aria-hidden="true"
4119
- ></i>
4490
+ role="img"
4491
+ width="1em"
4492
+ height="1em"
4493
+ >
4494
+ <path
4495
+ 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"
4496
+ />
4497
+ </svg>
4120
4498
  </span>
4121
4499
  </button>
4122
4500
  </div>
@@ -4611,7 +4989,19 @@ wrapperTag: div
4611
4989
  aria-label="Close drawer panel"
4612
4990
  >
4613
4991
  <span class="pf-v6-c-button__icon">
4614
- <i class="fas fa-times" aria-hidden="true"></i>
4992
+ <svg
4993
+ class="pf-v6-svg"
4994
+ viewBox="0 0 20 20"
4995
+ fill="currentColor"
4996
+ aria-hidden="true"
4997
+ role="img"
4998
+ width="1em"
4999
+ height="1em"
5000
+ >
5001
+ <path
5002
+ 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"
5003
+ />
5004
+ </svg>
4615
5005
  </span>
4616
5006
  </button>
4617
5007
  </div>
@@ -4719,9 +5109,10 @@ wrapperTag: div
4719
5109
  <span class="pf-v6-c-button__text">Skip to content</span>
4720
5110
  </a>
4721
5111
  </div>
5112
+
4722
5113
  <header
4723
5114
  class="pf-v6-c-masthead"
4724
- id="primary-detail-card-simple-list-on-mobile-example-masthead"
5115
+ id="primary-detail-card-simple-list-on-mobile-example-docked"
4725
5116
  >
4726
5117
  <div class="pf-v6-c-masthead__main">
4727
5118
  <span class="pf-v6-c-masthead__toggle">
@@ -4764,7 +5155,7 @@ wrapperTag: div
4764
5155
  y1="2.25860997e-13%"
4765
5156
  x2="32%"
4766
5157
  y2="100%"
4767
- id="linearGradient-primary-detail-card-simple-list-on-mobile-example-masthead"
5158
+ id="linearGradient-primary-detail-card-simple-list-on-mobile-example-docked"
4768
5159
  >
4769
5160
  <stop stop-color="#2B9AF3" offset="0%" />
4770
5161
  <stop
@@ -4818,11 +5209,11 @@ wrapperTag: div
4818
5209
  />
4819
5210
  <path
4820
5211
  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)"
5212
+ fill="url(#linearGradient-primary-detail-card-simple-list-on-mobile-example-docked)"
4822
5213
  />
4823
5214
  <path
4824
5215
  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)"
5216
+ fill="url(#linearGradient-primary-detail-card-simple-list-on-mobile-example-docked)"
4826
5217
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
4827
5218
  />
4828
5219
  </g>
@@ -4834,7 +5225,7 @@ wrapperTag: div
4834
5225
  <div class="pf-v6-c-masthead__content">
4835
5226
  <div
4836
5227
  class="pf-v6-c-toolbar pf-m-static"
4837
- id="primary-detail-card-simple-list-on-mobile-example-masthead-toolbar"
5228
+ id="primary-detail-card-simple-list-on-mobile-example-docked-toolbar"
4838
5229
  >
4839
5230
  <div class="pf-v6-c-toolbar__content">
4840
5231
  <div class="pf-v6-c-toolbar__content-section">
@@ -4901,44 +5292,46 @@ wrapperTag: div
4901
5292
  </div>
4902
5293
  </header>
4903
5294
  <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>
5295
+ <div class="pf-v6-c-page__sidebar-main">
5296
+ <div class="pf-v6-c-page__sidebar-body">
5297
+ <nav
5298
+ class="pf-v6-c-nav"
5299
+ id="primary-detail-card-simple-list-on-mobile-example-primary-nav"
5300
+ aria-label="Global"
5301
+ >
5302
+ <ul class="pf-v6-c-nav__list" role="list">
5303
+ <li class="pf-v6-c-nav__item">
5304
+ <a href="#" class="pf-v6-c-nav__link">
5305
+ <span class="pf-v6-c-nav__link-text">System panel</span>
5306
+ </a>
5307
+ </li>
5308
+ <li class="pf-v6-c-nav__item">
5309
+ <a
5310
+ href="#"
5311
+ class="pf-v6-c-nav__link pf-m-current"
5312
+ aria-current="page"
5313
+ >
5314
+ <span class="pf-v6-c-nav__link-text">Policy</span>
5315
+ </a>
5316
+ </li>
5317
+ <li class="pf-v6-c-nav__item">
5318
+ <a href="#" class="pf-v6-c-nav__link">
5319
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
5320
+ </a>
5321
+ </li>
5322
+ <li class="pf-v6-c-nav__item">
5323
+ <a href="#" class="pf-v6-c-nav__link">
5324
+ <span class="pf-v6-c-nav__link-text">Network services</span>
5325
+ </a>
5326
+ </li>
5327
+ <li class="pf-v6-c-nav__item">
5328
+ <a href="#" class="pf-v6-c-nav__link">
5329
+ <span class="pf-v6-c-nav__link-text">Server</span>
5330
+ </a>
5331
+ </li>
5332
+ </ul>
5333
+ </nav>
5334
+ </div>
4942
5335
  </div>
4943
5336
  </div>
4944
5337
  <div class="pf-v6-c-page__main-container" tabindex="-1">
@@ -4956,21 +5349,57 @@ wrapperTag: div
4956
5349
  </li>
4957
5350
  <li class="pf-v6-c-breadcrumb__item">
4958
5351
  <span class="pf-v6-c-breadcrumb__item-divider">
4959
- <i class="fas fa-angle-right" aria-hidden="true"></i>
5352
+ <svg
5353
+ class="pf-v6-svg"
5354
+ viewBox="0 0 20 20"
5355
+ fill="currentColor"
5356
+ aria-hidden="true"
5357
+ role="img"
5358
+ width="1em"
5359
+ height="1em"
5360
+ >
5361
+ <path
5362
+ 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"
5363
+ />
5364
+ </svg>
4960
5365
  </span>
4961
5366
 
4962
5367
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
4963
5368
  </li>
4964
5369
  <li class="pf-v6-c-breadcrumb__item">
4965
5370
  <span class="pf-v6-c-breadcrumb__item-divider">
4966
- <i class="fas fa-angle-right" aria-hidden="true"></i>
5371
+ <svg
5372
+ class="pf-v6-svg"
5373
+ viewBox="0 0 20 20"
5374
+ fill="currentColor"
5375
+ aria-hidden="true"
5376
+ role="img"
5377
+ width="1em"
5378
+ height="1em"
5379
+ >
5380
+ <path
5381
+ 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"
5382
+ />
5383
+ </svg>
4967
5384
  </span>
4968
5385
 
4969
5386
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
4970
5387
  </li>
4971
5388
  <li class="pf-v6-c-breadcrumb__item">
4972
5389
  <span class="pf-v6-c-breadcrumb__item-divider">
4973
- <i class="fas fa-angle-right" aria-hidden="true"></i>
5390
+ <svg
5391
+ class="pf-v6-svg"
5392
+ viewBox="0 0 20 20"
5393
+ fill="currentColor"
5394
+ aria-hidden="true"
5395
+ role="img"
5396
+ width="1em"
5397
+ height="1em"
5398
+ >
5399
+ <path
5400
+ 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"
5401
+ />
5402
+ </svg>
4974
5403
  </span>
4975
5404
 
4976
5405
  <a
@@ -5088,7 +5517,19 @@ wrapperTag: div
5088
5517
  aria-label="Close drawer panel"
5089
5518
  >
5090
5519
  <span class="pf-v6-c-button__icon">
5091
- <i class="fas fa-times" aria-hidden="true"></i>
5520
+ <svg
5521
+ class="pf-v6-svg"
5522
+ viewBox="0 0 20 20"
5523
+ fill="currentColor"
5524
+ aria-hidden="true"
5525
+ role="img"
5526
+ width="1em"
5527
+ height="1em"
5528
+ >
5529
+ <path
5530
+ 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"
5531
+ />
5532
+ </svg>
5092
5533
  </span>
5093
5534
  </button>
5094
5535
  </div>
@@ -5192,9 +5633,10 @@ wrapperTag: div
5192
5633
  <span class="pf-v6-c-button__text">Skip to content</span>
5193
5634
  </a>
5194
5635
  </div>
5636
+
5195
5637
  <header
5196
5638
  class="pf-v6-c-masthead"
5197
- id="primary-detail-card-data-list-example-masthead"
5639
+ id="primary-detail-card-data-list-example-docked"
5198
5640
  >
5199
5641
  <div class="pf-v6-c-masthead__main">
5200
5642
  <span class="pf-v6-c-masthead__toggle">
@@ -5237,7 +5679,7 @@ wrapperTag: div
5237
5679
  y1="2.25860997e-13%"
5238
5680
  x2="32%"
5239
5681
  y2="100%"
5240
- id="linearGradient-primary-detail-card-data-list-example-masthead"
5682
+ id="linearGradient-primary-detail-card-data-list-example-docked"
5241
5683
  >
5242
5684
  <stop stop-color="#2B9AF3" offset="0%" />
5243
5685
  <stop
@@ -5291,11 +5733,11 @@ wrapperTag: div
5291
5733
  />
5292
5734
  <path
5293
5735
  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)"
5736
+ fill="url(#linearGradient-primary-detail-card-data-list-example-docked)"
5295
5737
  />
5296
5738
  <path
5297
5739
  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)"
5740
+ fill="url(#linearGradient-primary-detail-card-data-list-example-docked)"
5299
5741
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
5300
5742
  />
5301
5743
  </g>
@@ -5307,7 +5749,7 @@ wrapperTag: div
5307
5749
  <div class="pf-v6-c-masthead__content">
5308
5750
  <div
5309
5751
  class="pf-v6-c-toolbar pf-m-static"
5310
- id="primary-detail-card-data-list-example-masthead-toolbar"
5752
+ id="primary-detail-card-data-list-example-docked-toolbar"
5311
5753
  >
5312
5754
  <div class="pf-v6-c-toolbar__content">
5313
5755
  <div class="pf-v6-c-toolbar__content-section">
@@ -5374,44 +5816,46 @@ wrapperTag: div
5374
5816
  </div>
5375
5817
  </header>
5376
5818
  <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>
5819
+ <div class="pf-v6-c-page__sidebar-main">
5820
+ <div class="pf-v6-c-page__sidebar-body">
5821
+ <nav
5822
+ class="pf-v6-c-nav"
5823
+ id="primary-detail-card-data-list-example-primary-nav"
5824
+ aria-label="Global"
5825
+ >
5826
+ <ul class="pf-v6-c-nav__list" role="list">
5827
+ <li class="pf-v6-c-nav__item">
5828
+ <a href="#" class="pf-v6-c-nav__link">
5829
+ <span class="pf-v6-c-nav__link-text">System panel</span>
5830
+ </a>
5831
+ </li>
5832
+ <li class="pf-v6-c-nav__item">
5833
+ <a
5834
+ href="#"
5835
+ class="pf-v6-c-nav__link pf-m-current"
5836
+ aria-current="page"
5837
+ >
5838
+ <span class="pf-v6-c-nav__link-text">Policy</span>
5839
+ </a>
5840
+ </li>
5841
+ <li class="pf-v6-c-nav__item">
5842
+ <a href="#" class="pf-v6-c-nav__link">
5843
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
5844
+ </a>
5845
+ </li>
5846
+ <li class="pf-v6-c-nav__item">
5847
+ <a href="#" class="pf-v6-c-nav__link">
5848
+ <span class="pf-v6-c-nav__link-text">Network services</span>
5849
+ </a>
5850
+ </li>
5851
+ <li class="pf-v6-c-nav__item">
5852
+ <a href="#" class="pf-v6-c-nav__link">
5853
+ <span class="pf-v6-c-nav__link-text">Server</span>
5854
+ </a>
5855
+ </li>
5856
+ </ul>
5857
+ </nav>
5858
+ </div>
5415
5859
  </div>
5416
5860
  </div>
5417
5861
  <div class="pf-v6-c-page__main-container" tabindex="-1">
@@ -5429,21 +5873,57 @@ wrapperTag: div
5429
5873
  </li>
5430
5874
  <li class="pf-v6-c-breadcrumb__item">
5431
5875
  <span class="pf-v6-c-breadcrumb__item-divider">
5432
- <i class="fas fa-angle-right" aria-hidden="true"></i>
5876
+ <svg
5877
+ class="pf-v6-svg"
5878
+ viewBox="0 0 20 20"
5879
+ fill="currentColor"
5880
+ aria-hidden="true"
5881
+ role="img"
5882
+ width="1em"
5883
+ height="1em"
5884
+ >
5885
+ <path
5886
+ 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"
5887
+ />
5888
+ </svg>
5433
5889
  </span>
5434
5890
 
5435
5891
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
5436
5892
  </li>
5437
5893
  <li class="pf-v6-c-breadcrumb__item">
5438
5894
  <span class="pf-v6-c-breadcrumb__item-divider">
5439
- <i class="fas fa-angle-right" aria-hidden="true"></i>
5895
+ <svg
5896
+ class="pf-v6-svg"
5897
+ viewBox="0 0 20 20"
5898
+ fill="currentColor"
5899
+ aria-hidden="true"
5900
+ role="img"
5901
+ width="1em"
5902
+ height="1em"
5903
+ >
5904
+ <path
5905
+ 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"
5906
+ />
5907
+ </svg>
5440
5908
  </span>
5441
5909
 
5442
5910
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
5443
5911
  </li>
5444
5912
  <li class="pf-v6-c-breadcrumb__item">
5445
5913
  <span class="pf-v6-c-breadcrumb__item-divider">
5446
- <i class="fas fa-angle-right" aria-hidden="true"></i>
5914
+ <svg
5915
+ class="pf-v6-svg"
5916
+ viewBox="0 0 20 20"
5917
+ fill="currentColor"
5918
+ aria-hidden="true"
5919
+ role="img"
5920
+ width="1em"
5921
+ height="1em"
5922
+ >
5923
+ <path
5924
+ 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"
5925
+ />
5926
+ </svg>
5447
5927
  </span>
5448
5928
 
5449
5929
  <a
@@ -5508,7 +5988,6 @@ wrapperTag: div
5508
5988
  class="pf-v6-c-menu-toggle pf-m-text pf-m-plain"
5509
5989
  type="button"
5510
5990
  aria-expanded="false"
5511
- aria-label="Menu toggle"
5512
5991
  id="primary-detail-card-data-list-example-drawer-toolbar-card-toolbar-pagination-menu-toggle"
5513
5992
  >
5514
5993
  <span class="pf-v6-c-menu-toggle__text">
@@ -5693,7 +6172,19 @@ wrapperTag: div
5693
6172
  aria-label="Close drawer panel"
5694
6173
  >
5695
6174
  <span class="pf-v6-c-button__icon">
5696
- <i class="fas fa-times" aria-hidden="true"></i>
6175
+ <svg
6176
+ class="pf-v6-svg"
6177
+ viewBox="0 0 20 20"
6178
+ fill="currentColor"
6179
+ aria-hidden="true"
6180
+ role="img"
6181
+ width="1em"
6182
+ height="1em"
6183
+ >
6184
+ <path
6185
+ 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"
6186
+ />
6187
+ </svg>
5697
6188
  </span>
5698
6189
  </button>
5699
6190
  </div>
@@ -5797,9 +6288,10 @@ wrapperTag: div
5797
6288
  <span class="pf-v6-c-button__text">Skip to content</span>
5798
6289
  </a>
5799
6290
  </div>
6291
+
5800
6292
  <header
5801
6293
  class="pf-v6-c-masthead"
5802
- id="primary-detail-inline-modifier-example-masthead"
6294
+ id="primary-detail-inline-modifier-example-docked"
5803
6295
  >
5804
6296
  <div class="pf-v6-c-masthead__main">
5805
6297
  <span class="pf-v6-c-masthead__toggle">
@@ -5842,7 +6334,7 @@ wrapperTag: div
5842
6334
  y1="2.25860997e-13%"
5843
6335
  x2="32%"
5844
6336
  y2="100%"
5845
- id="linearGradient-primary-detail-inline-modifier-example-masthead"
6337
+ id="linearGradient-primary-detail-inline-modifier-example-docked"
5846
6338
  >
5847
6339
  <stop stop-color="#2B9AF3" offset="0%" />
5848
6340
  <stop
@@ -5896,11 +6388,11 @@ wrapperTag: div
5896
6388
  />
5897
6389
  <path
5898
6390
  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)"
6391
+ fill="url(#linearGradient-primary-detail-inline-modifier-example-docked)"
5900
6392
  />
5901
6393
  <path
5902
6394
  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)"
6395
+ fill="url(#linearGradient-primary-detail-inline-modifier-example-docked)"
5904
6396
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
5905
6397
  />
5906
6398
  </g>
@@ -5912,7 +6404,7 @@ wrapperTag: div
5912
6404
  <div class="pf-v6-c-masthead__content">
5913
6405
  <div
5914
6406
  class="pf-v6-c-toolbar pf-m-static"
5915
- id="primary-detail-inline-modifier-example-masthead-toolbar"
6407
+ id="primary-detail-inline-modifier-example-docked-toolbar"
5916
6408
  >
5917
6409
  <div class="pf-v6-c-toolbar__content">
5918
6410
  <div class="pf-v6-c-toolbar__content-section">
@@ -5979,44 +6471,46 @@ wrapperTag: div
5979
6471
  </div>
5980
6472
  </header>
5981
6473
  <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>
6474
+ <div class="pf-v6-c-page__sidebar-main">
6475
+ <div class="pf-v6-c-page__sidebar-body">
6476
+ <nav
6477
+ class="pf-v6-c-nav"
6478
+ id="primary-detail-inline-modifier-example-primary-nav"
6479
+ aria-label="Global"
6480
+ >
6481
+ <ul class="pf-v6-c-nav__list" role="list">
6482
+ <li class="pf-v6-c-nav__item">
6483
+ <a href="#" class="pf-v6-c-nav__link">
6484
+ <span class="pf-v6-c-nav__link-text">System panel</span>
6485
+ </a>
6486
+ </li>
6487
+ <li class="pf-v6-c-nav__item">
6488
+ <a
6489
+ href="#"
6490
+ class="pf-v6-c-nav__link pf-m-current"
6491
+ aria-current="page"
6492
+ >
6493
+ <span class="pf-v6-c-nav__link-text">Policy</span>
6494
+ </a>
6495
+ </li>
6496
+ <li class="pf-v6-c-nav__item">
6497
+ <a href="#" class="pf-v6-c-nav__link">
6498
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
6499
+ </a>
6500
+ </li>
6501
+ <li class="pf-v6-c-nav__item">
6502
+ <a href="#" class="pf-v6-c-nav__link">
6503
+ <span class="pf-v6-c-nav__link-text">Network services</span>
6504
+ </a>
6505
+ </li>
6506
+ <li class="pf-v6-c-nav__item">
6507
+ <a href="#" class="pf-v6-c-nav__link">
6508
+ <span class="pf-v6-c-nav__link-text">Server</span>
6509
+ </a>
6510
+ </li>
6511
+ </ul>
6512
+ </nav>
6513
+ </div>
6020
6514
  </div>
6021
6515
  </div>
6022
6516
  <div class="pf-v6-c-page__main-container" tabindex="-1">
@@ -6034,21 +6528,57 @@ wrapperTag: div
6034
6528
  </li>
6035
6529
  <li class="pf-v6-c-breadcrumb__item">
6036
6530
  <span class="pf-v6-c-breadcrumb__item-divider">
6037
- <i class="fas fa-angle-right" aria-hidden="true"></i>
6531
+ <svg
6532
+ class="pf-v6-svg"
6533
+ viewBox="0 0 20 20"
6534
+ fill="currentColor"
6535
+ aria-hidden="true"
6536
+ role="img"
6537
+ width="1em"
6538
+ height="1em"
6539
+ >
6540
+ <path
6541
+ 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"
6542
+ />
6543
+ </svg>
6038
6544
  </span>
6039
6545
 
6040
6546
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
6041
6547
  </li>
6042
6548
  <li class="pf-v6-c-breadcrumb__item">
6043
6549
  <span class="pf-v6-c-breadcrumb__item-divider">
6044
- <i class="fas fa-angle-right" aria-hidden="true"></i>
6550
+ <svg
6551
+ class="pf-v6-svg"
6552
+ viewBox="0 0 20 20"
6553
+ fill="currentColor"
6554
+ aria-hidden="true"
6555
+ role="img"
6556
+ width="1em"
6557
+ height="1em"
6558
+ >
6559
+ <path
6560
+ 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"
6561
+ />
6562
+ </svg>
6045
6563
  </span>
6046
6564
 
6047
6565
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
6048
6566
  </li>
6049
6567
  <li class="pf-v6-c-breadcrumb__item">
6050
6568
  <span class="pf-v6-c-breadcrumb__item-divider">
6051
- <i class="fas fa-angle-right" aria-hidden="true"></i>
6569
+ <svg
6570
+ class="pf-v6-svg"
6571
+ viewBox="0 0 20 20"
6572
+ fill="currentColor"
6573
+ aria-hidden="true"
6574
+ role="img"
6575
+ width="1em"
6576
+ height="1em"
6577
+ >
6578
+ <path
6579
+ 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"
6580
+ />
6581
+ </svg>
6052
6582
  </span>
6053
6583
 
6054
6584
  <a
@@ -6153,7 +6683,6 @@ wrapperTag: div
6153
6683
  class="pf-v6-c-menu-toggle pf-m-text pf-m-plain"
6154
6684
  type="button"
6155
6685
  aria-expanded="false"
6156
- aria-label="Menu toggle"
6157
6686
  id="primary-detail-inline-modifier-example-drawer-toolbar-top-pagination"
6158
6687
  >
6159
6688
  <span class="pf-v6-c-menu-toggle__text">
@@ -6184,7 +6713,19 @@ wrapperTag: div
6184
6713
  aria-label="Go to previous page"
6185
6714
  >
6186
6715
  <span class="pf-v6-c-button__icon">
6187
- <i class="fas fa-angle-left" aria-hidden="true"></i>
6716
+ <svg
6717
+ class="pf-v6-svg"
6718
+ viewBox="0 0 256 512"
6719
+ fill="currentColor"
6720
+ aria-hidden="true"
6721
+ role="img"
6722
+ width="1em"
6723
+ height="1em"
6724
+ >
6725
+ <path
6726
+ 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"
6727
+ />
6728
+ </svg>
6188
6729
  </span>
6189
6730
  </button>
6190
6731
  </div>
@@ -6197,10 +6738,19 @@ wrapperTag: div
6197
6738
  aria-label="Go to next page"
6198
6739
  >
6199
6740
  <span class="pf-v6-c-button__icon">
6200
- <i
6201
- class="fas fa-angle-right"
6741
+ <svg
6742
+ class="pf-v6-svg"
6743
+ viewBox="0 0 256 512"
6744
+ fill="currentColor"
6202
6745
  aria-hidden="true"
6203
- ></i>
6746
+ role="img"
6747
+ width="1em"
6748
+ height="1em"
6749
+ >
6750
+ <path
6751
+ 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"
6752
+ />
6753
+ </svg>
6204
6754
  </span>
6205
6755
  </button>
6206
6756
  </div>
@@ -6708,7 +7258,19 @@ wrapperTag: div
6708
7258
  aria-label="Close drawer panel"
6709
7259
  >
6710
7260
  <span class="pf-v6-c-button__icon">
6711
- <i class="fas fa-times" aria-hidden="true"></i>
7261
+ <svg
7262
+ class="pf-v6-svg"
7263
+ viewBox="0 0 20 20"
7264
+ fill="currentColor"
7265
+ aria-hidden="true"
7266
+ role="img"
7267
+ width="1em"
7268
+ height="1em"
7269
+ >
7270
+ <path
7271
+ 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"
7272
+ />
7273
+ </svg>
6712
7274
  </span>
6713
7275
  </button>
6714
7276
  </div>
@@ -6727,6 +7289,7 @@ wrapperTag: div
6727
7289
  <div class="pf-v6-c-drawer__body pf-m-no-padding">
6728
7290
  <div
6729
7291
  class="pf-v6-c-tabs pf-m-box pf-m-fill"
7292
+ aria-label="Node 2"
6730
7293
  role="region"
6731
7294
  id="primary-detail-inline-modifier-example-drawer-tabs"
6732
7295
  >
@@ -6737,11 +7300,27 @@ wrapperTag: div
6737
7300
  aria-label="Scroll left"
6738
7301
  >
6739
7302
  <span class="pf-v6-c-button__icon">
6740
- <i class="fas fa-angle-left" aria-hidden="true"></i>
7303
+ <svg
7304
+ class="pf-v6-svg"
7305
+ viewBox="0 0 20 20"
7306
+ fill="currentColor"
7307
+ aria-hidden="true"
7308
+ role="img"
7309
+ width="1em"
7310
+ height="1em"
7311
+ >
7312
+ <path
7313
+ 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"
7314
+ />
7315
+ </svg>
6741
7316
  </span>
6742
7317
  </button>
6743
7318
  </div>
6744
- <ul class="pf-v6-c-tabs__list" role="tablist">
7319
+ <ul
7320
+ class="pf-v6-c-tabs__list"
7321
+ role="tablist"
7322
+ aria-label="Node 2"
7323
+ >
6745
7324
  <li
6746
7325
  class="pf-v6-c-tabs__item pf-m-current"
6747
7326
  role="presentation"
@@ -6750,6 +7329,7 @@ wrapperTag: div
6750
7329
  type="button"
6751
7330
  class="pf-v6-c-tabs__link"
6752
7331
  role="tab"
7332
+ aria-selected="true"
6753
7333
  aria-controls="primary-detail-inline-modifier-example-drawer-tabs-tab1-panel"
6754
7334
  id="primary-detail-inline-modifier-example-drawer-tabs-tab1-link"
6755
7335
  >
@@ -6761,6 +7341,7 @@ wrapperTag: div
6761
7341
  type="button"
6762
7342
  class="pf-v6-c-tabs__link"
6763
7343
  role="tab"
7344
+ aria-selected="false"
6764
7345
  aria-controls="primary-detail-inline-modifier-example-drawer-tabs-tab2-panel"
6765
7346
  id="primary-detail-inline-modifier-example-drawer-tabs-tab2-link"
6766
7347
  >
@@ -6775,7 +7356,19 @@ wrapperTag: div
6775
7356
  aria-label="Scroll right"
6776
7357
  >
6777
7358
  <span class="pf-v6-c-button__icon">
6778
- <i class="fas fa-angle-right" aria-hidden="true"></i>
7359
+ <svg
7360
+ class="pf-v6-svg"
7361
+ viewBox="0 0 20 20"
7362
+ fill="currentColor"
7363
+ aria-hidden="true"
7364
+ role="img"
7365
+ width="1em"
7366
+ height="1em"
7367
+ >
7368
+ <path
7369
+ 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"
7370
+ />
7371
+ </svg>
6779
7372
  </span>
6780
7373
  </button>
6781
7374
  </div>