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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (410) hide show
  1. package/README.md +2 -2
  2. package/assets/fontawesome/_variables.scss +2 -1
  3. package/assets/images/Felt-Bkg-Generic-Dark.svg +82 -0
  4. package/assets/images/Felt-Bkg-Generic-Light.svg +82 -0
  5. package/assets/images/PF-Bkg-Generic-Dark.svg +76 -0
  6. package/assets/images/PF-Bkg-Generic-Light.svg +74 -0
  7. package/assets/images/RHAiExperienceIcon.svg +27 -0
  8. package/assets/images/RHAutomationsLogo.svg +96 -0
  9. package/assets/images/RHServerStackIcon.svg +16 -0
  10. package/assets/images/compass--hero-bg.png +0 -0
  11. package/assets/images/compass--rh-wallpaper-dark.png +0 -0
  12. package/assets/images/compass--rh-wallpaper-light.png +0 -0
  13. package/assets/images/compass--wallpaper-dark.jpg +0 -0
  14. package/assets/images/compass--wallpaper-dark.png +0 -0
  15. package/assets/images/compass--wallpaper-light.jpg +0 -0
  16. package/assets/images/compass--wallpaper-light.png +0 -0
  17. package/assets/images/glass-brand-dark.jpg +0 -0
  18. package/assets/images/glass-brand-dark.png +0 -0
  19. package/assets/images/glass-brand-light.jpg +0 -0
  20. package/assets/images/glass-brand-light.png +0 -0
  21. package/base/normalize.scss +7 -0
  22. package/base/patternfly-common.css +50 -0
  23. package/base/patternfly-common.scss +59 -0
  24. package/base/patternfly-svg-icons.css +17 -0
  25. package/base/patternfly-svg-icons.scss +20 -0
  26. package/base/patternfly-variables.css +926 -513
  27. package/base/patternfly-variables.scss +46 -4
  28. package/base/tokens/tokens-dark.scss +56 -8
  29. package/base/tokens/tokens-default.scss +69 -14
  30. package/base/tokens/tokens-glass-dark.scss +26 -0
  31. package/base/tokens/tokens-glass.scss +22 -0
  32. package/base/tokens/tokens-local.scss +17 -0
  33. package/base/tokens/tokens-palette.scss +3 -1
  34. package/base/tokens/tokens-redhat-dark.scss +21 -0
  35. package/base/tokens/tokens-redhat-glass-dark.scss +40 -0
  36. package/base/tokens/tokens-redhat-glass.scss +30 -0
  37. package/base/tokens/tokens-redhat-highcontrast-dark.scss +50 -0
  38. package/base/tokens/tokens-redhat-highcontrast.scss +128 -0
  39. package/base/tokens/tokens-redhat.scss +15 -0
  40. package/components/AboutModalBox/about-modal-box.css +36 -26
  41. package/components/Accordion/accordion.css +26 -14
  42. package/components/Accordion/accordion.scss +12 -2
  43. package/components/ActionList/action-list.css +2 -0
  44. package/components/ActionList/action-list.scss +2 -0
  45. package/components/Alert/alert.css +7 -5
  46. package/components/Alert/alert.scss +2 -1
  47. package/components/Avatar/avatar.css +12 -4
  48. package/components/BackgroundImage/background-image.css +6 -3
  49. package/components/Banner/banner.css +12 -6
  50. package/components/Banner/banner.scss +7 -0
  51. package/components/Brand/brand.css +3 -1
  52. package/components/Breadcrumb/breadcrumb.css +10 -5
  53. package/components/Breadcrumb/breadcrumb.scss +6 -2
  54. package/components/Button/button.css +173 -71
  55. package/components/Button/button.scss +188 -72
  56. package/components/CalendarMonth/calendar-month.css +4 -3
  57. package/components/Card/card.css +51 -15
  58. package/components/Card/card.scss +65 -9
  59. package/components/ClipboardCopy/clipboard-copy.css +14 -7
  60. package/components/ClipboardCopy/clipboard-copy.scss +13 -4
  61. package/components/CodeEditor/code-editor.css +2 -2
  62. package/components/CodeEditor/code-editor.scss +2 -2
  63. package/components/Compass/compass.css +399 -0
  64. package/components/Compass/compass.scss +413 -0
  65. package/components/DataList/data-list.css +30 -23
  66. package/components/DataList/data-list.scss +3 -2
  67. package/components/DescriptionList/description-list-order.scss +5 -1
  68. package/components/DescriptionList/description-list.css +7 -5
  69. package/components/DescriptionList/description-list.scss +5 -1
  70. package/components/Divider/divider.css +7 -5
  71. package/components/Drawer/drawer.css +224 -75
  72. package/components/Drawer/drawer.scss +194 -27
  73. package/components/DualListSelector/dual-list-selector.css +18 -12
  74. package/components/DualListSelector/dual-list-selector.scss +1 -1
  75. package/components/ExpandableSection/expandable-section.css +21 -16
  76. package/components/ExpandableSection/expandable-section.scss +6 -3
  77. package/components/Form/form.css +2 -2
  78. package/components/Form/form.scss +2 -2
  79. package/components/FormControl/form-control.css +3 -3
  80. package/components/FormControl/form-control.scss +3 -3
  81. package/components/Hero/hero.css +74 -0
  82. package/components/Hero/hero.scss +86 -0
  83. package/components/JumpLinks/jump-links.css +16 -5
  84. package/components/JumpLinks/jump-links.scss +17 -3
  85. package/components/Label/label-group.css +2 -2
  86. package/components/Label/label-group.scss +2 -2
  87. package/components/Label/label.css +4 -3
  88. package/components/Login/login.css +58 -40
  89. package/components/Login/login.scss +7 -3
  90. package/components/Masthead/masthead.css +111 -16
  91. package/components/Masthead/masthead.scss +111 -1
  92. package/components/Menu/menu.css +49 -33
  93. package/components/Menu/menu.scss +26 -19
  94. package/components/MenuToggle/menu-toggle.css +35 -8
  95. package/components/MenuToggle/menu-toggle.scss +42 -8
  96. package/components/ModalBox/modal-box.css +9 -7
  97. package/components/ModalBox/modal-box.scss +2 -2
  98. package/components/Nav/nav.css +82 -11
  99. package/components/Nav/nav.scss +85 -5
  100. package/components/NotificationDrawer/notification-drawer.css +19 -9
  101. package/components/NotificationDrawer/notification-drawer.scss +14 -5
  102. package/components/OverflowMenu/overflow-menu.css +16 -0
  103. package/components/OverflowMenu/overflow-menu.scss +20 -1
  104. package/components/Page/page.css +421 -32
  105. package/components/Page/page.scss +397 -15
  106. package/components/Pagination/pagination.css +56 -4
  107. package/components/Pagination/pagination.scss +71 -6
  108. package/components/Panel/panel.css +41 -3
  109. package/components/Panel/panel.scss +56 -3
  110. package/components/Progress/progress.css +3 -1
  111. package/components/Progress/progress.scss +3 -1
  112. package/components/ProgressStepper/progress-stepper.scss +5 -1
  113. package/components/Sidebar/sidebar.css +1 -1
  114. package/components/Sidebar/sidebar.scss +7 -3
  115. package/components/Skeleton/skeleton.css +16 -15
  116. package/components/Slider/slider.css +32 -18
  117. package/components/Switch/switch.css +4 -2
  118. package/components/Switch/switch.scss +1 -1
  119. package/components/Table/table-grid.css +28 -36
  120. package/components/Table/table-grid.scss +4 -4
  121. package/components/Table/table-scrollable.css +1 -1
  122. package/components/Table/table-scrollable.scss +1 -1
  123. package/components/Table/table-tree-view.css +4 -2
  124. package/components/Table/table.css +104 -57
  125. package/components/Table/table.scss +92 -37
  126. package/components/Tabs/tabs.css +39 -33
  127. package/components/Tabs/tabs.scss +38 -26
  128. package/components/TextInputGroup/text-input-group.css +2 -2
  129. package/components/TextInputGroup/text-input-group.scss +2 -2
  130. package/components/ToggleGroup/toggle-group.css +44 -19
  131. package/components/ToggleGroup/toggle-group.scss +51 -22
  132. package/components/Toolbar/toolbar.css +195 -16
  133. package/components/Toolbar/toolbar.scss +89 -9
  134. package/components/TreeView/tree-view.css +45 -14
  135. package/components/TreeView/tree-view.scss +32 -1
  136. package/components/Wizard/wizard.css +41 -19
  137. package/components/Wizard/wizard.scss +26 -6
  138. package/components/_index.css +2740 -829
  139. package/components/_index.scss +3 -1
  140. package/docs/components/AboutModalBox/examples/AboutModalBox.md +13 -1
  141. package/docs/components/Accordion/examples/Accordion.md +392 -30
  142. package/docs/components/ActionList/examples/ActionList.md +143 -11
  143. package/docs/components/Alert/examples/Alert.md +678 -54
  144. package/docs/components/Avatar/examples/Avatar.md +4 -4
  145. package/docs/components/BackToTop/examples/BackToTop.md +13 -1
  146. package/docs/components/Banner/examples/Banner.md +196 -5
  147. package/docs/components/Brand/examples/Brand.md +2 -2
  148. package/docs/components/Breadcrumb/examples/Breadcrumb.md +313 -26
  149. package/docs/components/Button/examples/Button.md +2829 -333
  150. package/docs/components/CalendarMonth/examples/CalendarMonth.md +156 -12
  151. package/docs/components/Card/examples/Card.md +335 -12
  152. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +293 -28
  153. package/docs/components/CodeBlock/examples/CodeBlock.md +104 -8
  154. package/docs/components/CodeEditor/examples/CodeEditor.md +234 -18
  155. package/docs/components/Compass/examples/Compass.css +8 -0
  156. package/docs/components/Compass/examples/Compass.md +109 -0
  157. package/docs/components/DataList/examples/DataList.md +468 -78
  158. package/docs/components/DatePicker/examples/DatePicker.md +78 -6
  159. package/docs/components/DescriptionList/examples/DescriptionList.md +327 -27
  160. package/docs/components/Divider/examples/Divider.md +2 -2
  161. package/docs/components/DragDrop/examples/DragDrop.css +1 -1
  162. package/docs/components/Drawer/examples/Drawer.md +415 -35
  163. package/docs/components/DualListSelector/examples/DualListSelector.md +1247 -161
  164. package/docs/components/EmptyState/examples/EmptyState.md +78 -6
  165. package/docs/components/ExpandableSection/examples/ExpandableSection.md +91 -7
  166. package/docs/components/Form/examples/Form.md +78 -6
  167. package/docs/components/Hero/examples/Hero.md +25 -0
  168. package/docs/components/Hint/examples/Hint.md +39 -3
  169. package/docs/components/Icon/examples/Icon.md +105 -9
  170. package/docs/components/InlineEdit/examples/InlineEdit.md +338 -26
  171. package/docs/components/InputGroup/examples/InputGroup.md +40 -4
  172. package/docs/components/JumpLinks/examples/JumpLinks.md +54 -6
  173. package/docs/components/Label/examples/Label.md +2834 -218
  174. package/docs/components/Login/examples/Login.md +39 -3
  175. package/docs/components/Masthead/examples/masthead.md +80 -1
  176. package/docs/components/Menu/examples/Menu.md +1679 -133
  177. package/docs/components/MenuToggle/examples/MenuToggle.md +1514 -118
  178. package/docs/components/ModalBox/examples/ModalBox.md +289 -25
  179. package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +156 -12
  180. package/docs/components/Nav/examples/Navigation.md +898 -62
  181. package/docs/components/NotificationDrawer/examples/NotificationDrawer.md +1079 -83
  182. package/docs/components/OverflowMenu/examples/overflow-menu.css +6 -3
  183. package/docs/components/OverflowMenu/examples/overflow-menu.md +164 -11
  184. package/docs/components/Page/examples/Page.md +211 -25
  185. package/docs/components/Pagination/examples/Pagination.md +1291 -80
  186. package/docs/components/Panel/examples/Panel.css +3 -0
  187. package/docs/components/Panel/examples/Panel.md +71 -4
  188. package/docs/components/Popover/examples/Popover.md +286 -22
  189. package/docs/components/Progress/examples/Progress.md +91 -7
  190. package/docs/components/ProgressStepper/examples/ProgressStepper.md +275 -23
  191. package/docs/components/Sidebar/examples/Sidebar.md +1 -1
  192. package/docs/components/Slider/examples/Slider.md +52 -4
  193. package/docs/components/Table/examples/Table.css +2 -1
  194. package/docs/components/Table/examples/Table.md +7543 -653
  195. package/docs/components/Tabs/examples/Tabs.md +5734 -471
  196. package/docs/components/TextInputGroup/examples/TextInputGroup.md +600 -48
  197. package/docs/components/ToggleGroup/examples/toggle-group.md +261 -15
  198. package/docs/components/Toolbar/examples/Toolbar.css +1 -1
  199. package/docs/components/Toolbar/examples/Toolbar.md +1145 -88
  200. package/docs/components/TreeView/examples/TreeView.md +1390 -130
  201. package/docs/components/Wizard/examples/Wizard.md +828 -73
  202. package/docs/demos/AboutModal/examples/AboutModal.md +158 -53
  203. package/docs/demos/Alert/examples/Alert.md +539 -164
  204. package/docs/demos/BackToTop/examples/BackToTop.md +158 -53
  205. package/docs/demos/Banner/examples/Banner.md +290 -104
  206. package/docs/demos/Button/examples/Button.md +13 -1
  207. package/docs/demos/Card/examples/Card.md +1041 -134
  208. package/docs/demos/CardView/examples/CardView.md +570 -171
  209. package/docs/demos/Compass/examples/Compass.md +10005 -0
  210. package/docs/demos/Dashboard/examples/Dashboard.md +745 -177
  211. package/docs/demos/DataList/examples/DataList.md +1301 -292
  212. package/docs/demos/DescriptionList/examples/DescriptionList.md +472 -160
  213. package/docs/demos/Drawer/examples/Drawer.md +718 -262
  214. package/docs/demos/Form/examples/BasicForms.md +273 -21
  215. package/docs/demos/JumpLinks/examples/JumpLinks.md +862 -319
  216. package/docs/demos/Masthead/examples/Masthead.md +1119 -489
  217. package/docs/demos/Modal/examples/Modal.md +948 -321
  218. package/docs/demos/Nav/examples/Nav.md +3449 -499
  219. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +2418 -405
  220. package/docs/demos/Page/examples/Page.md +2137 -773
  221. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +13 -1
  222. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +52 -4
  223. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +1913 -504
  224. package/docs/demos/Skeleton/examples/Skeleton.md +145 -52
  225. package/docs/demos/Table/examples/Table.md +11807 -2275
  226. package/docs/demos/Tabs/examples/Tabs.md +1117 -337
  227. package/docs/demos/Toolbar/examples/Toolbar.md +1818 -286
  228. package/docs/demos/Wizard/examples/Wizard.md +1705 -526
  229. package/docs/layouts/Bullseye/examples/Bullseye.css +2 -2
  230. package/docs/layouts/Bullseye/examples/Bullseye.md +2 -1
  231. package/docs/layouts/Flex/examples/Flex.css +3 -3
  232. package/docs/layouts/Flex/examples/Flex.md +3 -2
  233. package/docs/layouts/Gallery/examples/Gallery.css +2 -2
  234. package/docs/layouts/Gallery/examples/Gallery.md +4 -3
  235. package/docs/layouts/Grid/examples/Grid.css +1 -1
  236. package/docs/layouts/Grid/examples/Grid.md +6 -5
  237. package/docs/layouts/Level/examples/Level.css +3 -3
  238. package/docs/layouts/Level/examples/Level.md +2 -1
  239. package/docs/layouts/Split/examples/Split.css +1 -1
  240. package/docs/layouts/Split/examples/Split.md +2 -1
  241. package/docs/layouts/Stack/examples/Stack.css +3 -3
  242. package/docs/layouts/Stack/examples/Stack.md +2 -1
  243. package/docs/utilities/Accessibility/examples/Accessibility.md +3 -2
  244. package/docs/utilities/Alignment/examples/Alignment.css +4 -4
  245. package/docs/utilities/Alignment/examples/Alignment.md +3 -2
  246. package/docs/utilities/BackgroundColor/examples/BackgroundColor.md +5 -4
  247. package/docs/utilities/BoxShadow/examples/box-shadow.css +2 -2
  248. package/docs/utilities/BoxShadow/examples/box-shadow.md +2 -1
  249. package/docs/utilities/Display/examples/Display.css +1 -1
  250. package/docs/utilities/Display/examples/Display.md +3 -2
  251. package/docs/utilities/Flex/examples/Flex.css +7 -7
  252. package/docs/utilities/Flex/examples/Flex.md +3 -2
  253. package/docs/utilities/Float/examples/Float.css +2 -2
  254. package/docs/utilities/Float/examples/Float.md +3 -2
  255. package/docs/utilities/Sizing/examples/Sizing.md +8 -7
  256. package/docs/utilities/Spacing/examples/Spacing.css +2 -2
  257. package/docs/utilities/Spacing/examples/Spacing.md +3 -2
  258. package/docs/utilities/Text/examples/Text.md +5 -4
  259. package/icons/PfIcons/add-circle-o.svg +4 -0
  260. package/icons/PfIcons/ansible-tower.svg +4 -0
  261. package/icons/PfIcons/applications.svg +4 -0
  262. package/icons/PfIcons/arrow.svg +4 -0
  263. package/icons/PfIcons/asleep.svg +4 -0
  264. package/icons/PfIcons/attention-bell.svg +4 -0
  265. package/icons/PfIcons/automation.svg +4 -0
  266. package/icons/PfIcons/bell.svg +4 -0
  267. package/icons/PfIcons/blueprint.svg +4 -0
  268. package/icons/PfIcons/build.svg +4 -0
  269. package/icons/PfIcons/builder-image.svg +4 -0
  270. package/icons/PfIcons/bundle.svg +4 -0
  271. package/icons/PfIcons/catalog.svg +4 -0
  272. package/icons/PfIcons/chat.svg +4 -0
  273. package/icons/PfIcons/close.svg +4 -0
  274. package/icons/PfIcons/cloud-security.svg +4 -0
  275. package/icons/PfIcons/cloud-tenant.svg +4 -0
  276. package/icons/PfIcons/cluster.svg +4 -0
  277. package/icons/PfIcons/connected.svg +4 -0
  278. package/icons/PfIcons/container-node.svg +4 -0
  279. package/icons/PfIcons/cpu.svg +4 -0
  280. package/icons/PfIcons/critical-risk.svg +4 -0
  281. package/icons/PfIcons/data-processor.svg +4 -0
  282. package/icons/PfIcons/data-sink.svg +4 -0
  283. package/icons/PfIcons/data-source.svg +4 -0
  284. package/icons/PfIcons/degraded.svg +4 -0
  285. package/icons/PfIcons/disconnected.svg +4 -0
  286. package/icons/PfIcons/domain.svg +4 -0
  287. package/icons/PfIcons/edit.svg +4 -0
  288. package/icons/PfIcons/enhancement.svg +4 -0
  289. package/icons/PfIcons/enterprise.svg +4 -0
  290. package/icons/PfIcons/equalizer.svg +4 -0
  291. package/icons/PfIcons/error-circle-o.svg +4 -0
  292. package/icons/PfIcons/export.svg +4 -0
  293. package/icons/PfIcons/filter.svg +4 -0
  294. package/icons/PfIcons/flavor.svg +4 -0
  295. package/icons/PfIcons/folder-close.svg +4 -0
  296. package/icons/PfIcons/folder-open.svg +4 -0
  297. package/icons/PfIcons/globe-route.svg +4 -0
  298. package/icons/PfIcons/help.svg +4 -0
  299. package/icons/PfIcons/history.svg +4 -0
  300. package/icons/PfIcons/home.svg +4 -0
  301. package/icons/PfIcons/import.svg +4 -0
  302. package/icons/PfIcons/in-progress.svg +4 -0
  303. package/icons/PfIcons/info.svg +4 -0
  304. package/icons/PfIcons/infrastructure.svg +4 -0
  305. package/icons/PfIcons/integration.svg +4 -0
  306. package/icons/PfIcons/key.svg +4 -0
  307. package/icons/PfIcons/locked.svg +4 -0
  308. package/icons/PfIcons/maintenance.svg +4 -0
  309. package/icons/PfIcons/memory.svg +4 -0
  310. package/icons/PfIcons/messages.svg +4 -0
  311. package/icons/PfIcons/middleware.svg +4 -0
  312. package/icons/PfIcons/migration.svg +4 -0
  313. package/icons/PfIcons/module.svg +4 -0
  314. package/icons/PfIcons/monitoring.svg +4 -0
  315. package/icons/PfIcons/multicluster.svg +4 -0
  316. package/icons/PfIcons/namespaces.svg +4 -0
  317. package/icons/PfIcons/network.svg +4 -0
  318. package/icons/PfIcons/new-process.svg +4 -0
  319. package/icons/PfIcons/not-started.svg +4 -0
  320. package/icons/PfIcons/off.svg +4 -0
  321. package/icons/PfIcons/ok.svg +4 -0
  322. package/icons/PfIcons/on-running.svg +4 -0
  323. package/icons/PfIcons/on.svg +4 -0
  324. package/icons/PfIcons/open-drawer-right.svg +4 -0
  325. package/icons/PfIcons/openshift.svg +4 -0
  326. package/icons/PfIcons/openstack.svg +4 -0
  327. package/icons/PfIcons/optimize.svg +4 -0
  328. package/icons/PfIcons/orders.svg +4 -0
  329. package/icons/PfIcons/os-image.svg +4 -0
  330. package/icons/PfIcons/package.svg +4 -0
  331. package/icons/PfIcons/panel-close.svg +4 -0
  332. package/icons/PfIcons/panel-open.svg +4 -0
  333. package/icons/PfIcons/paused.svg +4 -0
  334. package/icons/PfIcons/pending.svg +4 -0
  335. package/icons/PfIcons/pficon-dragdrop.svg +4 -0
  336. package/icons/PfIcons/pficon-history.svg +4 -0
  337. package/icons/PfIcons/pficon-network-range.svg +4 -0
  338. package/icons/PfIcons/pficon-satellite.svg +4 -0
  339. package/icons/PfIcons/pficon-sort-common-asc.svg +4 -0
  340. package/icons/PfIcons/pficon-sort-common-desc.svg +4 -0
  341. package/icons/PfIcons/pficon-template.svg +4 -0
  342. package/icons/PfIcons/pficon-vcenter.svg +4 -0
  343. package/icons/PfIcons/plugged.svg +4 -0
  344. package/icons/PfIcons/port.svg +4 -0
  345. package/icons/PfIcons/print.svg +4 -0
  346. package/icons/PfIcons/private.svg +4 -0
  347. package/icons/PfIcons/process-automation.svg +4 -0
  348. package/icons/PfIcons/project.svg +4 -0
  349. package/icons/PfIcons/rebalance.svg +4 -0
  350. package/icons/PfIcons/rebooting.svg +4 -0
  351. package/icons/PfIcons/regions.svg +4 -0
  352. package/icons/PfIcons/registry.svg +4 -0
  353. package/icons/PfIcons/remove2.svg +4 -0
  354. package/icons/PfIcons/replicator.svg +4 -0
  355. package/icons/PfIcons/repository.svg +4 -0
  356. package/icons/PfIcons/resource-pool.svg +4 -0
  357. package/icons/PfIcons/resources-almost-empty.svg +4 -0
  358. package/icons/PfIcons/resources-almost-full.svg +4 -0
  359. package/icons/PfIcons/resources-empty.svg +4 -0
  360. package/icons/PfIcons/resources-full.svg +4 -0
  361. package/icons/PfIcons/running.svg +4 -0
  362. package/icons/PfIcons/save.svg +4 -0
  363. package/icons/PfIcons/screen.svg +4 -0
  364. package/icons/PfIcons/security.svg +4 -0
  365. package/icons/PfIcons/server-group.svg +4 -0
  366. package/icons/PfIcons/server.svg +4 -0
  367. package/icons/PfIcons/service-catalog.svg +4 -0
  368. package/icons/PfIcons/service.svg +4 -0
  369. package/icons/PfIcons/services.svg +4 -0
  370. package/icons/PfIcons/severity-critical.svg +4 -0
  371. package/icons/PfIcons/severity-important.svg +4 -0
  372. package/icons/PfIcons/severity-minor.svg +4 -0
  373. package/icons/PfIcons/severity-moderate.svg +4 -0
  374. package/icons/PfIcons/severity-none.svg +4 -0
  375. package/icons/PfIcons/severity-undefined.svg +4 -0
  376. package/icons/PfIcons/spinner.svg +4 -0
  377. package/icons/PfIcons/spinner2.svg +4 -0
  378. package/icons/PfIcons/storage-domain.svg +4 -0
  379. package/icons/PfIcons/task.svg +4 -0
  380. package/icons/PfIcons/tenant.svg +4 -0
  381. package/icons/PfIcons/thumb-tack.svg +4 -0
  382. package/icons/PfIcons/topology.svg +4 -0
  383. package/icons/PfIcons/treeview.svg +4 -0
  384. package/icons/PfIcons/trend-down.svg +4 -0
  385. package/icons/PfIcons/trend-up.svg +4 -0
  386. package/icons/PfIcons/unknown.svg +4 -0
  387. package/icons/PfIcons/unlocked.svg +4 -0
  388. package/icons/PfIcons/unplugged.svg +4 -0
  389. package/icons/PfIcons/user.svg +4 -0
  390. package/icons/PfIcons/users.svg +4 -0
  391. package/icons/PfIcons/virtual-machine.svg +4 -0
  392. package/icons/PfIcons/volume.svg +4 -0
  393. package/icons/PfIcons/warning-triangle.svg +4 -0
  394. package/icons/PfIcons/zone.svg +4 -0
  395. package/layouts/Flex/flex.scss +83 -19
  396. package/layouts/Gallery/gallery.css +6 -2
  397. package/layouts/_index.css +6 -2
  398. package/package.json +55 -17
  399. package/patternfly-base-no-globals.css +969 -489
  400. package/patternfly-base.css +976 -489
  401. package/patternfly-charts.css +3 -3
  402. package/patternfly-no-globals.css +3623 -1194
  403. package/patternfly.css +3630 -1194
  404. package/patternfly.min.css +1 -1
  405. package/patternfly.min.css.map +1 -1
  406. package/patternfly.scss +48 -0
  407. package/sass-utilities/functions.scss +32 -25
  408. package/sass-utilities/mixins.scss +54 -23
  409. package/sass-utilities/namespaces-components.scss +6 -0
  410. package/sass-utilities/scss-variables.scss +3 -0
package/docs/demos/DataList/examples/DataList.md CHANGED
@@ -16,7 +16,8 @@ wrapperTag: div
16
16
  <span class="pf-v6-c-button__text">Skip to content</span>
17
17
  </a>
18
18
  </div>
19
- <header class="pf-v6-c-masthead" id="data-list-basic-example-masthead">
19
+
20
+ <header class="pf-v6-c-masthead" id="data-list-basic-example-docked">
20
21
  <div class="pf-v6-c-masthead__main">
21
22
  <span class="pf-v6-c-masthead__toggle">
22
23
  <button
@@ -58,7 +59,7 @@ wrapperTag: div
58
59
  y1="2.25860997e-13%"
59
60
  x2="32%"
60
61
  y2="100%"
61
- id="linearGradient-data-list-basic-example-masthead"
62
+ id="linearGradient-data-list-basic-example-docked"
62
63
  >
63
64
  <stop stop-color="#2B9AF3" offset="0%" />
64
65
  <stop
@@ -112,11 +113,11 @@ wrapperTag: div
112
113
  />
113
114
  <path
114
115
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
115
- fill="url(#linearGradient-data-list-basic-example-masthead)"
116
+ fill="url(#linearGradient-data-list-basic-example-docked)"
116
117
  />
117
118
  <path
118
119
  d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z"
119
- fill="url(#linearGradient-data-list-basic-example-masthead)"
120
+ fill="url(#linearGradient-data-list-basic-example-docked)"
120
121
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
121
122
  />
122
123
  </g>
@@ -128,7 +129,7 @@ wrapperTag: div
128
129
  <div class="pf-v6-c-masthead__content">
129
130
  <div
130
131
  class="pf-v6-c-toolbar pf-m-static"
131
- id="data-list-basic-example-masthead-toolbar"
132
+ id="data-list-basic-example-docked-toolbar"
132
133
  >
133
134
  <div class="pf-v6-c-toolbar__content">
134
135
  <div class="pf-v6-c-toolbar__content-section">
@@ -146,7 +147,19 @@ wrapperTag: div
146
147
  aria-label="Application launcher"
147
148
  >
148
149
  <span class="pf-v6-c-menu-toggle__icon">
149
- <i class="fas fa-th" aria-hidden="true"></i>
150
+ <svg
151
+ class="pf-v6-svg"
152
+ viewBox="0 0 512 512"
153
+ fill="currentColor"
154
+ aria-hidden="true"
155
+ role="img"
156
+ width="1em"
157
+ height="1em"
158
+ >
159
+ <path
160
+ d="M149.333 56v80c0 13.255-10.745 24-24 24H24c-13.255 0-24-10.745-24-24V56c0-13.255 10.745-24 24-24h101.333c13.255 0 24 10.745 24 24zm181.334 240v-80c0-13.255-10.745-24-24-24H205.333c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24h101.333c13.256 0 24.001-10.745 24.001-24zm32-240v80c0 13.255 10.745 24 24 24H488c13.255 0 24-10.745 24-24V56c0-13.255-10.745-24-24-24H386.667c-13.255 0-24 10.745-24 24zm-32 80V56c0-13.255-10.745-24-24-24H205.333c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24h101.333c13.256 0 24.001-10.745 24.001-24zm-205.334 56H24c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24h101.333c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24zM0 376v80c0 13.255 10.745 24 24 24h101.333c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H24c-13.255 0-24 10.745-24 24zm386.667-56H488c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H386.667c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24zm0 160H488c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H386.667c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24zM181.333 376v80c0 13.255 10.745 24 24 24h101.333c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H205.333c-13.255 0-24 10.745-24 24z"
161
+ />
162
+ </svg>
150
163
  </span>
151
164
  </button>
152
165
  </div>
@@ -158,7 +171,19 @@ wrapperTag: div
158
171
  aria-label="Settings"
159
172
  >
160
173
  <span class="pf-v6-c-menu-toggle__icon">
161
- <i class="fas fa-cog" aria-hidden="true"></i>
174
+ <svg
175
+ class="pf-v6-svg"
176
+ viewBox="0 0 32 32"
177
+ fill="currentColor"
178
+ aria-hidden="true"
179
+ role="img"
180
+ width="1em"
181
+ height="1em"
182
+ >
183
+ <path
184
+ d="M30.168 12.894a.5.5 0 0 0-.488-.394h-2.732a11.512 11.512 0 0 0-.729-1.769l1.931-1.93a.5.5 0 0 0 .066-.625 14.693 14.693 0 0 0-4.393-4.392.498.498 0 0 0-.624.067l-1.93 1.93a11.512 11.512 0 0 0-1.769-.729V2.319a.5.5 0 0 0-.395-.489 14.81 14.81 0 0 0-6.211 0 .5.5 0 0 0-.395.489v2.733c-.614.196-1.207.439-1.769.729L8.8 3.851a.498.498 0 0 0-.624-.067 14.714 14.714 0 0 0-4.393 4.392.5.5 0 0 0 .066.625l1.931 1.93a11.512 11.512 0 0 0-.729 1.769H2.319a.5.5 0 0 0-.488.394 14.652 14.652 0 0 0 0 6.212.5.5 0 0 0 .488.394h2.732c.196.615.44 1.207.729 1.769l-1.931 1.93a.5.5 0 0 0-.066.625 14.673 14.673 0 0 0 4.393 4.392.498.498 0 0 0 .624-.067l1.93-1.93c.562.289 1.154.533 1.769.729v2.733a.5.5 0 0 0 .395.489 14.686 14.686 0 0 0 6.21 0 .5.5 0 0 0 .395-.489v-2.733a11.454 11.454 0 0 0 1.769-.729l1.93 1.93a.5.5 0 0 0 .624.067 14.714 14.714 0 0 0 4.393-4.392.5.5 0 0 0-.066-.625l-1.931-1.93c.289-.562.533-1.154.729-1.769h2.732a.5.5 0 0 0 .488-.394 14.652 14.652 0 0 0 0-6.212ZM16 21.25c-2.895 0-5.25-2.355-5.25-5.25s2.355-5.25 5.25-5.25 5.25 2.355 5.25 5.25-2.355 5.25-5.25 5.25Z"
185
+ />
186
+ </svg>
162
187
  </span>
163
188
  </button>
164
189
  </div>
@@ -170,7 +195,19 @@ wrapperTag: div
170
195
  aria-label="Help"
171
196
  >
172
197
  <span class="pf-v6-c-menu-toggle__icon">
173
- <i class="fas fa-question-circle" aria-hidden="true"></i>
198
+ <svg
199
+ class="pf-v6-svg"
200
+ viewBox="0 0 512 512"
201
+ fill="currentColor"
202
+ aria-hidden="true"
203
+ role="img"
204
+ width="1em"
205
+ height="1em"
206
+ >
207
+ <path
208
+ d="M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zM262.655 90c-54.497 0-89.255 22.957-116.549 63.758-3.536 5.286-2.353 12.415 2.715 16.258l34.699 26.31c5.205 3.947 12.621 3.008 16.665-2.122 17.864-22.658 30.113-35.797 57.303-35.797 20.429 0 45.698 13.148 45.698 32.958 0 14.976-12.363 22.667-32.534 33.976C247.128 238.528 216 254.941 216 296v4c0 6.627 5.373 12 12 12h56c6.627 0 12-5.373 12-12v-1.333c0-28.462 83.186-29.647 83.186-106.667 0-58.002-60.165-102-116.531-102zM256 338c-25.365 0-46 20.635-46 46 0 25.364 20.635 46 46 46s46-20.636 46-46c0-25.365-20.635-46-46-46z"
209
+ />
210
+ </svg>
174
211
  </span>
175
212
  </button>
176
213
  </div>
@@ -184,7 +221,19 @@ wrapperTag: div
184
221
  aria-label="Actions"
185
222
  >
186
223
  <span class="pf-v6-c-menu-toggle__icon">
187
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
224
+ <svg
225
+ class="pf-v6-svg"
226
+ viewBox="0 0 32 32"
227
+ fill="currentColor"
228
+ aria-hidden="true"
229
+ role="img"
230
+ width="1em"
231
+ height="1em"
232
+ >
233
+ <path
234
+ d="M12.25 5c0-2.068 1.683-3.75 3.75-3.75S19.75 2.932 19.75 5 18.067 8.75 16 8.75 12.25 7.068 12.25 5ZM16 12.25c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Zm0 11c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Z"
235
+ />
236
+ </svg>
188
237
  </span>
189
238
  </button>
190
239
  </div>
@@ -195,44 +244,46 @@ wrapperTag: div
195
244
  </div>
196
245
  </header>
197
246
  <div class="pf-v6-c-page__sidebar">
198
- <div class="pf-v6-c-page__sidebar-body">
199
- <nav
200
- class="pf-v6-c-nav"
201
- id="data-list-basic-example-primary-nav"
202
- aria-label="Global"
203
- >
204
- <ul class="pf-v6-c-nav__list" role="list">
205
- <li class="pf-v6-c-nav__item">
206
- <a href="#" class="pf-v6-c-nav__link">
207
- <span class="pf-v6-c-nav__link-text">System panel</span>
208
- </a>
209
- </li>
210
- <li class="pf-v6-c-nav__item">
211
- <a
212
- href="#"
213
- class="pf-v6-c-nav__link pf-m-current"
214
- aria-current="page"
215
- >
216
- <span class="pf-v6-c-nav__link-text">Policy</span>
217
- </a>
218
- </li>
219
- <li class="pf-v6-c-nav__item">
220
- <a href="#" class="pf-v6-c-nav__link">
221
- <span class="pf-v6-c-nav__link-text">Authentication</span>
222
- </a>
223
- </li>
224
- <li class="pf-v6-c-nav__item">
225
- <a href="#" class="pf-v6-c-nav__link">
226
- <span class="pf-v6-c-nav__link-text">Network services</span>
227
- </a>
228
- </li>
229
- <li class="pf-v6-c-nav__item">
230
- <a href="#" class="pf-v6-c-nav__link">
231
- <span class="pf-v6-c-nav__link-text">Server</span>
232
- </a>
233
- </li>
234
- </ul>
235
- </nav>
247
+ <div class="pf-v6-c-page__sidebar-main">
248
+ <div class="pf-v6-c-page__sidebar-body">
249
+ <nav
250
+ class="pf-v6-c-nav"
251
+ id="data-list-basic-example-primary-nav"
252
+ aria-label="Global"
253
+ >
254
+ <ul class="pf-v6-c-nav__list" role="list">
255
+ <li class="pf-v6-c-nav__item">
256
+ <a href="#" class="pf-v6-c-nav__link">
257
+ <span class="pf-v6-c-nav__link-text">System panel</span>
258
+ </a>
259
+ </li>
260
+ <li class="pf-v6-c-nav__item">
261
+ <a
262
+ href="#"
263
+ class="pf-v6-c-nav__link pf-m-current"
264
+ aria-current="page"
265
+ >
266
+ <span class="pf-v6-c-nav__link-text">Policy</span>
267
+ </a>
268
+ </li>
269
+ <li class="pf-v6-c-nav__item">
270
+ <a href="#" class="pf-v6-c-nav__link">
271
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
272
+ </a>
273
+ </li>
274
+ <li class="pf-v6-c-nav__item">
275
+ <a href="#" class="pf-v6-c-nav__link">
276
+ <span class="pf-v6-c-nav__link-text">Network services</span>
277
+ </a>
278
+ </li>
279
+ <li class="pf-v6-c-nav__item">
280
+ <a href="#" class="pf-v6-c-nav__link">
281
+ <span class="pf-v6-c-nav__link-text">Server</span>
282
+ </a>
283
+ </li>
284
+ </ul>
285
+ </nav>
286
+ </div>
236
287
  </div>
237
288
  </div>
238
289
  <div class="pf-v6-c-page__main-container" tabindex="-1">
@@ -250,21 +301,57 @@ wrapperTag: div
250
301
  </li>
251
302
  <li class="pf-v6-c-breadcrumb__item">
252
303
  <span class="pf-v6-c-breadcrumb__item-divider">
253
- <i class="fas fa-angle-right" aria-hidden="true"></i>
304
+ <svg
305
+ class="pf-v6-svg"
306
+ viewBox="0 0 20 20"
307
+ fill="currentColor"
308
+ aria-hidden="true"
309
+ role="img"
310
+ width="1em"
311
+ height="1em"
312
+ >
313
+ <path
314
+ 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"
315
+ />
316
+ </svg>
254
317
  </span>
255
318
 
256
319
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
257
320
  </li>
258
321
  <li class="pf-v6-c-breadcrumb__item">
259
322
  <span class="pf-v6-c-breadcrumb__item-divider">
260
- <i class="fas fa-angle-right" aria-hidden="true"></i>
323
+ <svg
324
+ class="pf-v6-svg"
325
+ viewBox="0 0 20 20"
326
+ fill="currentColor"
327
+ aria-hidden="true"
328
+ role="img"
329
+ width="1em"
330
+ height="1em"
331
+ >
332
+ <path
333
+ 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"
334
+ />
335
+ </svg>
261
336
  </span>
262
337
 
263
338
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
264
339
  </li>
265
340
  <li class="pf-v6-c-breadcrumb__item">
266
341
  <span class="pf-v6-c-breadcrumb__item-divider">
267
- <i class="fas fa-angle-right" aria-hidden="true"></i>
342
+ <svg
343
+ class="pf-v6-svg"
344
+ viewBox="0 0 20 20"
345
+ fill="currentColor"
346
+ aria-hidden="true"
347
+ role="img"
348
+ width="1em"
349
+ height="1em"
350
+ >
351
+ <path
352
+ 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"
353
+ />
354
+ </svg>
268
355
  </span>
269
356
 
270
357
  <a
@@ -277,9 +364,15 @@ wrapperTag: div
277
364
  </nav>
278
365
  </div>
279
366
  </section>
280
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
367
+ <section
368
+ class="pf-v6-c-page__main-section pf-m-limit-width"
369
+ aria-labelledby="main-title"
370
+ >
281
371
  <div class="pf-v6-c-page__main-body">
282
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
372
+ <h1
373
+ class="pf-v6-c-content--h1 pf-m-page-title"
374
+ id="main-title"
375
+ >Main title</h1>
283
376
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
284
377
  </div>
285
378
  </section>
@@ -314,7 +407,19 @@ wrapperTag: div
314
407
  >
315
408
  <span class="pf-v6-c-menu-toggle__controls">
316
409
  <span class="pf-v6-c-menu-toggle__toggle-icon">
317
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
410
+ <svg
411
+ class="pf-v6-svg"
412
+ viewBox="0 0 20 20"
413
+ fill="currentColor"
414
+ aria-hidden="true"
415
+ role="img"
416
+ width="1em"
417
+ height="1em"
418
+ >
419
+ <path
420
+ d="M18.92 5.62C18.77 5.25 18.4 5 18 5H2a1.003 1.003 0 0 0-.71 1.71l7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65c.29-.29.37-.72.22-1.09Z"
421
+ />
422
+ </svg>
318
423
  </span>
319
424
  </span>
320
425
  </button>
@@ -348,7 +453,19 @@ wrapperTag: div
348
453
  id="data-list-basic-example-toolbar-overflow-menu-toggle"
349
454
  >
350
455
  <span class="pf-v6-c-menu-toggle__icon">
351
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
456
+ <svg
457
+ class="pf-v6-svg"
458
+ viewBox="0 0 32 32"
459
+ fill="currentColor"
460
+ aria-hidden="true"
461
+ role="img"
462
+ width="1em"
463
+ height="1em"
464
+ >
465
+ <path
466
+ d="M12.25 5c0-2.068 1.683-3.75 3.75-3.75S19.75 2.932 19.75 5 18.067 8.75 16 8.75 12.25 7.068 12.25 5ZM16 12.25c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Zm0 11c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Z"
467
+ />
468
+ </svg>
352
469
  </span>
353
470
  </button>
354
471
  </div>
@@ -361,7 +478,6 @@ wrapperTag: div
361
478
  class="pf-v6-c-menu-toggle pf-m-text pf-m-plain"
362
479
  type="button"
363
480
  aria-expanded="false"
364
- aria-label="Menu toggle"
365
481
  id="data-list-basic-example-toolbar-top-pagination"
366
482
  >
367
483
  <span class="pf-v6-c-menu-toggle__text">
@@ -370,10 +486,19 @@ wrapperTag: div
370
486
  </span>
371
487
  <span class="pf-v6-c-menu-toggle__controls">
372
488
  <span class="pf-v6-c-menu-toggle__toggle-icon">
373
- <i
374
- class="fas fa-caret-down fa-fw"
489
+ <svg
490
+ class="pf-v6-svg"
491
+ viewBox="0 0 20 20"
492
+ fill="currentColor"
375
493
  aria-hidden="true"
376
- ></i>
494
+ role="img"
495
+ width="1em"
496
+ height="1em"
497
+ >
498
+ <path
499
+ d="M18.92 5.62C18.77 5.25 18.4 5 18 5H2a1.003 1.003 0 0 0-.71 1.71l7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65c.29-.29.37-.72.22-1.09Z"
500
+ />
501
+ </svg>
377
502
  </span>
378
503
  </span>
379
504
  </button>
@@ -390,7 +515,19 @@ wrapperTag: div
390
515
  aria-label="Go to previous page"
391
516
  >
392
517
  <span class="pf-v6-c-button__icon">
393
- <i class="fas fa-angle-left" aria-hidden="true"></i>
518
+ <svg
519
+ class="pf-v6-svg"
520
+ viewBox="0 0 256 512"
521
+ fill="currentColor"
522
+ aria-hidden="true"
523
+ role="img"
524
+ width="1em"
525
+ height="1em"
526
+ >
527
+ <path
528
+ 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"
529
+ />
530
+ </svg>
394
531
  </span>
395
532
  </button>
396
533
  </div>
@@ -401,7 +538,19 @@ wrapperTag: div
401
538
  aria-label="Go to next page"
402
539
  >
403
540
  <span class="pf-v6-c-button__icon">
404
- <i class="fas fa-angle-right" aria-hidden="true"></i>
541
+ <svg
542
+ class="pf-v6-svg"
543
+ viewBox="0 0 256 512"
544
+ fill="currentColor"
545
+ aria-hidden="true"
546
+ role="img"
547
+ width="1em"
548
+ height="1em"
549
+ >
550
+ <path
551
+ 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"
552
+ />
553
+ </svg>
405
554
  </span>
406
555
  </button>
407
556
  </div>
@@ -865,7 +1014,6 @@ wrapperTag: div
865
1014
  class="pf-v6-c-menu-toggle pf-m-top pf-m-text pf-m-plain"
866
1015
  type="button"
867
1016
  aria-expanded="false"
868
- aria-label="Menu toggle"
869
1017
  id="{{page--id}}-pagination-menu-toggle-bottom-example"
870
1018
  >
871
1019
  <span class="pf-v6-c-menu-toggle__text">
@@ -874,7 +1022,19 @@ wrapperTag: div
874
1022
  </span>
875
1023
  <span class="pf-v6-c-menu-toggle__controls">
876
1024
  <span class="pf-v6-c-menu-toggle__toggle-icon">
877
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
1025
+ <svg
1026
+ class="pf-v6-svg"
1027
+ viewBox="0 0 20 20"
1028
+ fill="currentColor"
1029
+ aria-hidden="true"
1030
+ role="img"
1031
+ width="1em"
1032
+ height="1em"
1033
+ >
1034
+ <path
1035
+ d="M18.92 5.62C18.77 5.25 18.4 5 18 5H2a1.003 1.003 0 0 0-.71 1.71l7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65c.29-.29.37-.72.22-1.09Z"
1036
+ />
1037
+ </svg>
878
1038
  </span>
879
1039
  </span>
880
1040
  </button>
@@ -888,7 +1048,19 @@ wrapperTag: div
888
1048
  aria-label="Go to first page"
889
1049
  >
890
1050
  <span class="pf-v6-c-button__icon">
891
- <i class="fas fa-angle-double-left" aria-hidden="true"></i>
1051
+ <svg
1052
+ class="pf-v6-svg"
1053
+ viewBox="0 0 448 512"
1054
+ fill="currentColor"
1055
+ aria-hidden="true"
1056
+ role="img"
1057
+ width="1em"
1058
+ height="1em"
1059
+ >
1060
+ <path
1061
+ d="M223.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.9L319.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L393.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34zm-192 34l136 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 103c-9.4-9.4-24.6-9.4-33.9 0l-136 136c-9.5 9.4-9.5 24.6-.1 34z"
1062
+ />
1063
+ </svg>
892
1064
  </span>
893
1065
  </button>
894
1066
  </div>
@@ -900,7 +1072,19 @@ wrapperTag: div
900
1072
  aria-label="Go to previous page"
901
1073
  >
902
1074
  <span class="pf-v6-c-button__icon">
903
- <i class="fas fa-angle-left" aria-hidden="true"></i>
1075
+ <svg
1076
+ class="pf-v6-svg"
1077
+ viewBox="0 0 256 512"
1078
+ fill="currentColor"
1079
+ aria-hidden="true"
1080
+ role="img"
1081
+ width="1em"
1082
+ height="1em"
1083
+ >
1084
+ <path
1085
+ 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"
1086
+ />
1087
+ </svg>
904
1088
  </span>
905
1089
  </button>
906
1090
  </div>
@@ -923,7 +1107,19 @@ wrapperTag: div
923
1107
  aria-label="Go to next page"
924
1108
  >
925
1109
  <span class="pf-v6-c-button__icon">
926
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1110
+ <svg
1111
+ class="pf-v6-svg"
1112
+ viewBox="0 0 256 512"
1113
+ fill="currentColor"
1114
+ aria-hidden="true"
1115
+ role="img"
1116
+ width="1em"
1117
+ height="1em"
1118
+ >
1119
+ <path
1120
+ 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"
1121
+ />
1122
+ </svg>
927
1123
  </span>
928
1124
  </button>
929
1125
  </div>
@@ -935,7 +1131,19 @@ wrapperTag: div
935
1131
  aria-label="Go to last page"
936
1132
  >
937
1133
  <span class="pf-v6-c-button__icon">
938
- <i class="fas fa-angle-double-right" aria-hidden="true"></i>
1134
+ <svg
1135
+ class="pf-v6-svg"
1136
+ viewBox="0 0 448 512"
1137
+ fill="currentColor"
1138
+ aria-hidden="true"
1139
+ role="img"
1140
+ width="1em"
1141
+ height="1em"
1142
+ >
1143
+ <path
1144
+ 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 34zm192-34l-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.9l22.6 22.6c9.4 9.4 24.6 9.4 33.9 0l136-136c9.4-9.2 9.4-24.4 0-33.8z"
1145
+ />
1146
+ </svg>
939
1147
  </span>
940
1148
  </button>
941
1149
  </div>
@@ -961,7 +1169,8 @@ wrapperTag: div
961
1169
  <span class="pf-v6-c-button__text">Skip to content</span>
962
1170
  </a>
963
1171
  </div>
964
- <header class="pf-v6-c-masthead" id="data-list-actionable-example-masthead">
1172
+
1173
+ <header class="pf-v6-c-masthead" id="data-list-actionable-example-docked">
965
1174
  <div class="pf-v6-c-masthead__main">
966
1175
  <span class="pf-v6-c-masthead__toggle">
967
1176
  <button
@@ -1003,7 +1212,7 @@ wrapperTag: div
1003
1212
  y1="2.25860997e-13%"
1004
1213
  x2="32%"
1005
1214
  y2="100%"
1006
- id="linearGradient-data-list-actionable-example-masthead"
1215
+ id="linearGradient-data-list-actionable-example-docked"
1007
1216
  >
1008
1217
  <stop stop-color="#2B9AF3" offset="0%" />
1009
1218
  <stop
@@ -1057,11 +1266,11 @@ wrapperTag: div
1057
1266
  />
1058
1267
  <path
1059
1268
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
1060
- fill="url(#linearGradient-data-list-actionable-example-masthead)"
1269
+ fill="url(#linearGradient-data-list-actionable-example-docked)"
1061
1270
  />
1062
1271
  <path
1063
1272
  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"
1064
- fill="url(#linearGradient-data-list-actionable-example-masthead)"
1273
+ fill="url(#linearGradient-data-list-actionable-example-docked)"
1065
1274
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
1066
1275
  />
1067
1276
  </g>
@@ -1073,7 +1282,7 @@ wrapperTag: div
1073
1282
  <div class="pf-v6-c-masthead__content">
1074
1283
  <div
1075
1284
  class="pf-v6-c-toolbar pf-m-static"
1076
- id="data-list-actionable-example-masthead-toolbar"
1285
+ id="data-list-actionable-example-docked-toolbar"
1077
1286
  >
1078
1287
  <div class="pf-v6-c-toolbar__content">
1079
1288
  <div class="pf-v6-c-toolbar__content-section">
@@ -1091,7 +1300,19 @@ wrapperTag: div
1091
1300
  aria-label="Application launcher"
1092
1301
  >
1093
1302
  <span class="pf-v6-c-menu-toggle__icon">
1094
- <i class="fas fa-th" aria-hidden="true"></i>
1303
+ <svg
1304
+ class="pf-v6-svg"
1305
+ viewBox="0 0 512 512"
1306
+ fill="currentColor"
1307
+ aria-hidden="true"
1308
+ role="img"
1309
+ width="1em"
1310
+ height="1em"
1311
+ >
1312
+ <path
1313
+ 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"
1314
+ />
1315
+ </svg>
1095
1316
  </span>
1096
1317
  </button>
1097
1318
  </div>
@@ -1103,7 +1324,19 @@ wrapperTag: div
1103
1324
  aria-label="Settings"
1104
1325
  >
1105
1326
  <span class="pf-v6-c-menu-toggle__icon">
1106
- <i class="fas fa-cog" aria-hidden="true"></i>
1327
+ <svg
1328
+ class="pf-v6-svg"
1329
+ viewBox="0 0 32 32"
1330
+ fill="currentColor"
1331
+ aria-hidden="true"
1332
+ role="img"
1333
+ width="1em"
1334
+ height="1em"
1335
+ >
1336
+ <path
1337
+ d="M30.168 12.894a.5.5 0 0 0-.488-.394h-2.732a11.512 11.512 0 0 0-.729-1.769l1.931-1.93a.5.5 0 0 0 .066-.625 14.693 14.693 0 0 0-4.393-4.392.498.498 0 0 0-.624.067l-1.93 1.93a11.512 11.512 0 0 0-1.769-.729V2.319a.5.5 0 0 0-.395-.489 14.81 14.81 0 0 0-6.211 0 .5.5 0 0 0-.395.489v2.733c-.614.196-1.207.439-1.769.729L8.8 3.851a.498.498 0 0 0-.624-.067 14.714 14.714 0 0 0-4.393 4.392.5.5 0 0 0 .066.625l1.931 1.93a11.512 11.512 0 0 0-.729 1.769H2.319a.5.5 0 0 0-.488.394 14.652 14.652 0 0 0 0 6.212.5.5 0 0 0 .488.394h2.732c.196.615.44 1.207.729 1.769l-1.931 1.93a.5.5 0 0 0-.066.625 14.673 14.673 0 0 0 4.393 4.392.498.498 0 0 0 .624-.067l1.93-1.93c.562.289 1.154.533 1.769.729v2.733a.5.5 0 0 0 .395.489 14.686 14.686 0 0 0 6.21 0 .5.5 0 0 0 .395-.489v-2.733a11.454 11.454 0 0 0 1.769-.729l1.93 1.93a.5.5 0 0 0 .624.067 14.714 14.714 0 0 0 4.393-4.392.5.5 0 0 0-.066-.625l-1.931-1.93c.289-.562.533-1.154.729-1.769h2.732a.5.5 0 0 0 .488-.394 14.652 14.652 0 0 0 0-6.212ZM16 21.25c-2.895 0-5.25-2.355-5.25-5.25s2.355-5.25 5.25-5.25 5.25 2.355 5.25 5.25-2.355 5.25-5.25 5.25Z"
1338
+ />
1339
+ </svg>
1107
1340
  </span>
1108
1341
  </button>
1109
1342
  </div>
@@ -1115,7 +1348,19 @@ wrapperTag: div
1115
1348
  aria-label="Help"
1116
1349
  >
1117
1350
  <span class="pf-v6-c-menu-toggle__icon">
1118
- <i class="fas fa-question-circle" aria-hidden="true"></i>
1351
+ <svg
1352
+ class="pf-v6-svg"
1353
+ viewBox="0 0 512 512"
1354
+ fill="currentColor"
1355
+ aria-hidden="true"
1356
+ role="img"
1357
+ width="1em"
1358
+ height="1em"
1359
+ >
1360
+ <path
1361
+ d="M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zM262.655 90c-54.497 0-89.255 22.957-116.549 63.758-3.536 5.286-2.353 12.415 2.715 16.258l34.699 26.31c5.205 3.947 12.621 3.008 16.665-2.122 17.864-22.658 30.113-35.797 57.303-35.797 20.429 0 45.698 13.148 45.698 32.958 0 14.976-12.363 22.667-32.534 33.976C247.128 238.528 216 254.941 216 296v4c0 6.627 5.373 12 12 12h56c6.627 0 12-5.373 12-12v-1.333c0-28.462 83.186-29.647 83.186-106.667 0-58.002-60.165-102-116.531-102zM256 338c-25.365 0-46 20.635-46 46 0 25.364 20.635 46 46 46s46-20.636 46-46c0-25.365-20.635-46-46-46z"
1362
+ />
1363
+ </svg>
1119
1364
  </span>
1120
1365
  </button>
1121
1366
  </div>
@@ -1129,7 +1374,19 @@ wrapperTag: div
1129
1374
  aria-label="Actions"
1130
1375
  >
1131
1376
  <span class="pf-v6-c-menu-toggle__icon">
1132
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1377
+ <svg
1378
+ class="pf-v6-svg"
1379
+ viewBox="0 0 32 32"
1380
+ fill="currentColor"
1381
+ aria-hidden="true"
1382
+ role="img"
1383
+ width="1em"
1384
+ height="1em"
1385
+ >
1386
+ <path
1387
+ d="M12.25 5c0-2.068 1.683-3.75 3.75-3.75S19.75 2.932 19.75 5 18.067 8.75 16 8.75 12.25 7.068 12.25 5ZM16 12.25c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Zm0 11c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Z"
1388
+ />
1389
+ </svg>
1133
1390
  </span>
1134
1391
  </button>
1135
1392
  </div>
@@ -1140,44 +1397,46 @@ wrapperTag: div
1140
1397
  </div>
1141
1398
  </header>
1142
1399
  <div class="pf-v6-c-page__sidebar">
1143
- <div class="pf-v6-c-page__sidebar-body">
1144
- <nav
1145
- class="pf-v6-c-nav"
1146
- id="data-list-actionable-example-primary-nav"
1147
- aria-label="Global"
1148
- >
1149
- <ul class="pf-v6-c-nav__list" role="list">
1150
- <li class="pf-v6-c-nav__item">
1151
- <a href="#" class="pf-v6-c-nav__link">
1152
- <span class="pf-v6-c-nav__link-text">System panel</span>
1153
- </a>
1154
- </li>
1155
- <li class="pf-v6-c-nav__item">
1156
- <a
1157
- href="#"
1158
- class="pf-v6-c-nav__link pf-m-current"
1159
- aria-current="page"
1160
- >
1161
- <span class="pf-v6-c-nav__link-text">Policy</span>
1162
- </a>
1163
- </li>
1164
- <li class="pf-v6-c-nav__item">
1165
- <a href="#" class="pf-v6-c-nav__link">
1166
- <span class="pf-v6-c-nav__link-text">Authentication</span>
1167
- </a>
1168
- </li>
1169
- <li class="pf-v6-c-nav__item">
1170
- <a href="#" class="pf-v6-c-nav__link">
1171
- <span class="pf-v6-c-nav__link-text">Network services</span>
1172
- </a>
1173
- </li>
1174
- <li class="pf-v6-c-nav__item">
1175
- <a href="#" class="pf-v6-c-nav__link">
1176
- <span class="pf-v6-c-nav__link-text">Server</span>
1177
- </a>
1178
- </li>
1179
- </ul>
1180
- </nav>
1400
+ <div class="pf-v6-c-page__sidebar-main">
1401
+ <div class="pf-v6-c-page__sidebar-body">
1402
+ <nav
1403
+ class="pf-v6-c-nav"
1404
+ id="data-list-actionable-example-primary-nav"
1405
+ aria-label="Global"
1406
+ >
1407
+ <ul class="pf-v6-c-nav__list" role="list">
1408
+ <li class="pf-v6-c-nav__item">
1409
+ <a href="#" class="pf-v6-c-nav__link">
1410
+ <span class="pf-v6-c-nav__link-text">System panel</span>
1411
+ </a>
1412
+ </li>
1413
+ <li class="pf-v6-c-nav__item">
1414
+ <a
1415
+ href="#"
1416
+ class="pf-v6-c-nav__link pf-m-current"
1417
+ aria-current="page"
1418
+ >
1419
+ <span class="pf-v6-c-nav__link-text">Policy</span>
1420
+ </a>
1421
+ </li>
1422
+ <li class="pf-v6-c-nav__item">
1423
+ <a href="#" class="pf-v6-c-nav__link">
1424
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
1425
+ </a>
1426
+ </li>
1427
+ <li class="pf-v6-c-nav__item">
1428
+ <a href="#" class="pf-v6-c-nav__link">
1429
+ <span class="pf-v6-c-nav__link-text">Network services</span>
1430
+ </a>
1431
+ </li>
1432
+ <li class="pf-v6-c-nav__item">
1433
+ <a href="#" class="pf-v6-c-nav__link">
1434
+ <span class="pf-v6-c-nav__link-text">Server</span>
1435
+ </a>
1436
+ </li>
1437
+ </ul>
1438
+ </nav>
1439
+ </div>
1181
1440
  </div>
1182
1441
  </div>
1183
1442
  <div class="pf-v6-c-page__main-container" tabindex="-1">
@@ -1195,21 +1454,57 @@ wrapperTag: div
1195
1454
  </li>
1196
1455
  <li class="pf-v6-c-breadcrumb__item">
1197
1456
  <span class="pf-v6-c-breadcrumb__item-divider">
1198
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1457
+ <svg
1458
+ class="pf-v6-svg"
1459
+ viewBox="0 0 20 20"
1460
+ fill="currentColor"
1461
+ aria-hidden="true"
1462
+ role="img"
1463
+ width="1em"
1464
+ height="1em"
1465
+ >
1466
+ <path
1467
+ 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"
1468
+ />
1469
+ </svg>
1199
1470
  </span>
1200
1471
 
1201
1472
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1202
1473
  </li>
1203
1474
  <li class="pf-v6-c-breadcrumb__item">
1204
1475
  <span class="pf-v6-c-breadcrumb__item-divider">
1205
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1476
+ <svg
1477
+ class="pf-v6-svg"
1478
+ viewBox="0 0 20 20"
1479
+ fill="currentColor"
1480
+ aria-hidden="true"
1481
+ role="img"
1482
+ width="1em"
1483
+ height="1em"
1484
+ >
1485
+ <path
1486
+ 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"
1487
+ />
1488
+ </svg>
1206
1489
  </span>
1207
1490
 
1208
1491
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1209
1492
  </li>
1210
1493
  <li class="pf-v6-c-breadcrumb__item">
1211
1494
  <span class="pf-v6-c-breadcrumb__item-divider">
1212
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1495
+ <svg
1496
+ class="pf-v6-svg"
1497
+ viewBox="0 0 20 20"
1498
+ fill="currentColor"
1499
+ aria-hidden="true"
1500
+ role="img"
1501
+ width="1em"
1502
+ height="1em"
1503
+ >
1504
+ <path
1505
+ 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"
1506
+ />
1507
+ </svg>
1213
1508
  </span>
1214
1509
 
1215
1510
  <a
@@ -1222,9 +1517,15 @@ wrapperTag: div
1222
1517
  </nav>
1223
1518
  </div>
1224
1519
  </section>
1225
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
1520
+ <section
1521
+ class="pf-v6-c-page__main-section pf-m-limit-width"
1522
+ aria-labelledby="main-title"
1523
+ >
1226
1524
  <div class="pf-v6-c-page__main-body">
1227
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
1525
+ <h1
1526
+ class="pf-v6-c-content--h1 pf-m-page-title"
1527
+ id="main-title"
1528
+ >Main title</h1>
1228
1529
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
1229
1530
  </div>
1230
1531
  </section>
@@ -1248,7 +1549,19 @@ wrapperTag: div
1248
1549
  aria-controls="data-list-actionable-example-toolbar-expandable-content"
1249
1550
  >
1250
1551
  <span class="pf-v6-c-menu-toggle__icon">
1251
- <i class="fas fa-filter" aria-hidden="true"></i>
1552
+ <svg
1553
+ class="pf-v6-svg"
1554
+ viewBox="0 0 32 32"
1555
+ fill="currentColor"
1556
+ aria-hidden="true"
1557
+ role="img"
1558
+ width="1em"
1559
+ height="1em"
1560
+ >
1561
+ <path
1562
+ d="M29.875 3.5V7a.876.876 0 0 1-.256.619l-9.744 9.744v10.638a.875.875 0 0 1-.599.83l-6 2a.876.876 0 0 1-.788-.12.874.874 0 0 1-.363-.71V17.363L2.381 7.619A.876.876 0 0 1 2.125 7V3.5c0-.758.617-1.375 1.375-1.375h25c.758 0 1.375.617 1.375 1.375Z"
1563
+ />
1564
+ </svg>
1252
1565
  </span>
1253
1566
  </button>
1254
1567
  </div>
@@ -1278,10 +1591,19 @@ wrapperTag: div
1278
1591
  >
1279
1592
  <span class="pf-v6-c-menu-toggle__controls">
1280
1593
  <span class="pf-v6-c-menu-toggle__toggle-icon">
1281
- <i
1282
- class="fas fa-caret-down fa-fw"
1594
+ <svg
1595
+ class="pf-v6-svg"
1596
+ viewBox="0 0 20 20"
1597
+ fill="currentColor"
1283
1598
  aria-hidden="true"
1284
- ></i>
1599
+ role="img"
1600
+ width="1em"
1601
+ height="1em"
1602
+ >
1603
+ <path
1604
+ d="M18.92 5.62C18.77 5.25 18.4 5 18 5H2a1.003 1.003 0 0 0-.71 1.71l7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65c.29-.29.37-.72.22-1.09Z"
1605
+ />
1606
+ </svg>
1285
1607
  </span>
1286
1608
  </span>
1287
1609
  </button>
@@ -1325,7 +1647,19 @@ wrapperTag: div
1325
1647
  id="data-list-actionable-example-toolbar-overflow-menu-toggle"
1326
1648
  >
1327
1649
  <span class="pf-v6-c-menu-toggle__icon">
1328
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1650
+ <svg
1651
+ class="pf-v6-svg"
1652
+ viewBox="0 0 32 32"
1653
+ fill="currentColor"
1654
+ aria-hidden="true"
1655
+ role="img"
1656
+ width="1em"
1657
+ height="1em"
1658
+ >
1659
+ <path
1660
+ d="M12.25 5c0-2.068 1.683-3.75 3.75-3.75S19.75 2.932 19.75 5 18.067 8.75 16 8.75 12.25 7.068 12.25 5ZM16 12.25c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Zm0 11c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Z"
1661
+ />
1662
+ </svg>
1329
1663
  </span>
1330
1664
  </button>
1331
1665
  </div>
@@ -1338,7 +1672,6 @@ wrapperTag: div
1338
1672
  class="pf-v6-c-menu-toggle pf-m-text pf-m-plain"
1339
1673
  type="button"
1340
1674
  aria-expanded="false"
1341
- aria-label="Menu toggle"
1342
1675
  id="data-list-actionable-example-toolbar-top-pagination"
1343
1676
  >
1344
1677
  <span class="pf-v6-c-menu-toggle__text">
@@ -1347,10 +1680,19 @@ wrapperTag: div
1347
1680
  </span>
1348
1681
  <span class="pf-v6-c-menu-toggle__controls">
1349
1682
  <span class="pf-v6-c-menu-toggle__toggle-icon">
1350
- <i
1351
- class="fas fa-caret-down fa-fw"
1683
+ <svg
1684
+ class="pf-v6-svg"
1685
+ viewBox="0 0 20 20"
1686
+ fill="currentColor"
1352
1687
  aria-hidden="true"
1353
- ></i>
1688
+ role="img"
1689
+ width="1em"
1690
+ height="1em"
1691
+ >
1692
+ <path
1693
+ d="M18.92 5.62C18.77 5.25 18.4 5 18 5H2a1.003 1.003 0 0 0-.71 1.71l7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65c.29-.29.37-.72.22-1.09Z"
1694
+ />
1695
+ </svg>
1354
1696
  </span>
1355
1697
  </span>
1356
1698
  </button>
@@ -1367,7 +1709,19 @@ wrapperTag: div
1367
1709
  aria-label="Go to previous page"
1368
1710
  >
1369
1711
  <span class="pf-v6-c-button__icon">
1370
- <i class="fas fa-angle-left" aria-hidden="true"></i>
1712
+ <svg
1713
+ class="pf-v6-svg"
1714
+ viewBox="0 0 256 512"
1715
+ fill="currentColor"
1716
+ aria-hidden="true"
1717
+ role="img"
1718
+ width="1em"
1719
+ height="1em"
1720
+ >
1721
+ <path
1722
+ 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"
1723
+ />
1724
+ </svg>
1371
1725
  </span>
1372
1726
  </button>
1373
1727
  </div>
@@ -1378,7 +1732,19 @@ wrapperTag: div
1378
1732
  aria-label="Go to next page"
1379
1733
  >
1380
1734
  <span class="pf-v6-c-button__icon">
1381
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1735
+ <svg
1736
+ class="pf-v6-svg"
1737
+ viewBox="0 0 256 512"
1738
+ fill="currentColor"
1739
+ aria-hidden="true"
1740
+ role="img"
1741
+ width="1em"
1742
+ height="1em"
1743
+ >
1744
+ <path
1745
+ 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"
1746
+ />
1747
+ </svg>
1382
1748
  </span>
1383
1749
  </button>
1384
1750
  </div>
@@ -1784,7 +2150,6 @@ wrapperTag: div
1784
2150
  class="pf-v6-c-menu-toggle pf-m-top pf-m-text pf-m-plain"
1785
2151
  type="button"
1786
2152
  aria-expanded="false"
1787
- aria-label="Menu toggle"
1788
2153
  id="{{page--id}}-pagination-menu-toggle-bottom-example"
1789
2154
  >
1790
2155
  <span class="pf-v6-c-menu-toggle__text">
@@ -1793,7 +2158,19 @@ wrapperTag: div
1793
2158
  </span>
1794
2159
  <span class="pf-v6-c-menu-toggle__controls">
1795
2160
  <span class="pf-v6-c-menu-toggle__toggle-icon">
1796
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
2161
+ <svg
2162
+ class="pf-v6-svg"
2163
+ viewBox="0 0 20 20"
2164
+ fill="currentColor"
2165
+ aria-hidden="true"
2166
+ role="img"
2167
+ width="1em"
2168
+ height="1em"
2169
+ >
2170
+ <path
2171
+ d="M18.92 5.62C18.77 5.25 18.4 5 18 5H2a1.003 1.003 0 0 0-.71 1.71l7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65c.29-.29.37-.72.22-1.09Z"
2172
+ />
2173
+ </svg>
1797
2174
  </span>
1798
2175
  </span>
1799
2176
  </button>
@@ -1807,7 +2184,19 @@ wrapperTag: div
1807
2184
  aria-label="Go to first page"
1808
2185
  >
1809
2186
  <span class="pf-v6-c-button__icon">
1810
- <i class="fas fa-angle-double-left" aria-hidden="true"></i>
2187
+ <svg
2188
+ class="pf-v6-svg"
2189
+ viewBox="0 0 448 512"
2190
+ fill="currentColor"
2191
+ aria-hidden="true"
2192
+ role="img"
2193
+ width="1em"
2194
+ height="1em"
2195
+ >
2196
+ <path
2197
+ d="M223.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.9L319.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L393.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34zm-192 34l136 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 103c-9.4-9.4-24.6-9.4-33.9 0l-136 136c-9.5 9.4-9.5 24.6-.1 34z"
2198
+ />
2199
+ </svg>
1811
2200
  </span>
1812
2201
  </button>
1813
2202
  </div>
@@ -1819,7 +2208,19 @@ wrapperTag: div
1819
2208
  aria-label="Go to previous page"
1820
2209
  >
1821
2210
  <span class="pf-v6-c-button__icon">
1822
- <i class="fas fa-angle-left" aria-hidden="true"></i>
2211
+ <svg
2212
+ class="pf-v6-svg"
2213
+ viewBox="0 0 256 512"
2214
+ fill="currentColor"
2215
+ aria-hidden="true"
2216
+ role="img"
2217
+ width="1em"
2218
+ height="1em"
2219
+ >
2220
+ <path
2221
+ 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"
2222
+ />
2223
+ </svg>
1823
2224
  </span>
1824
2225
  </button>
1825
2226
  </div>
@@ -1842,7 +2243,19 @@ wrapperTag: div
1842
2243
  aria-label="Go to next page"
1843
2244
  >
1844
2245
  <span class="pf-v6-c-button__icon">
1845
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2246
+ <svg
2247
+ class="pf-v6-svg"
2248
+ viewBox="0 0 256 512"
2249
+ fill="currentColor"
2250
+ aria-hidden="true"
2251
+ role="img"
2252
+ width="1em"
2253
+ height="1em"
2254
+ >
2255
+ <path
2256
+ 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"
2257
+ />
2258
+ </svg>
1846
2259
  </span>
1847
2260
  </button>
1848
2261
  </div>
@@ -1854,7 +2267,19 @@ wrapperTag: div
1854
2267
  aria-label="Go to last page"
1855
2268
  >
1856
2269
  <span class="pf-v6-c-button__icon">
1857
- <i class="fas fa-angle-double-right" aria-hidden="true"></i>
2270
+ <svg
2271
+ class="pf-v6-svg"
2272
+ viewBox="0 0 448 512"
2273
+ fill="currentColor"
2274
+ aria-hidden="true"
2275
+ role="img"
2276
+ width="1em"
2277
+ height="1em"
2278
+ >
2279
+ <path
2280
+ 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 34zm192-34l-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.9l22.6 22.6c9.4 9.4 24.6 9.4 33.9 0l136-136c9.4-9.2 9.4-24.4 0-33.8z"
2281
+ />
2282
+ </svg>
1858
2283
  </span>
1859
2284
  </button>
1860
2285
  </div>
@@ -1880,7 +2305,8 @@ wrapperTag: div
1880
2305
  <span class="pf-v6-c-button__text">Skip to content</span>
1881
2306
  </a>
1882
2307
  </div>
1883
- <header class="pf-v6-c-masthead" id="data-list-expandable-example-masthead">
2308
+
2309
+ <header class="pf-v6-c-masthead" id="data-list-expandable-example-docked">
1884
2310
  <div class="pf-v6-c-masthead__main">
1885
2311
  <span class="pf-v6-c-masthead__toggle">
1886
2312
  <button
@@ -1922,7 +2348,7 @@ wrapperTag: div
1922
2348
  y1="2.25860997e-13%"
1923
2349
  x2="32%"
1924
2350
  y2="100%"
1925
- id="linearGradient-data-list-expandable-example-masthead"
2351
+ id="linearGradient-data-list-expandable-example-docked"
1926
2352
  >
1927
2353
  <stop stop-color="#2B9AF3" offset="0%" />
1928
2354
  <stop
@@ -1976,11 +2402,11 @@ wrapperTag: div
1976
2402
  />
1977
2403
  <path
1978
2404
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
1979
- fill="url(#linearGradient-data-list-expandable-example-masthead)"
2405
+ fill="url(#linearGradient-data-list-expandable-example-docked)"
1980
2406
  />
1981
2407
  <path
1982
2408
  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"
1983
- fill="url(#linearGradient-data-list-expandable-example-masthead)"
2409
+ fill="url(#linearGradient-data-list-expandable-example-docked)"
1984
2410
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
1985
2411
  />
1986
2412
  </g>
@@ -1992,7 +2418,7 @@ wrapperTag: div
1992
2418
  <div class="pf-v6-c-masthead__content">
1993
2419
  <div
1994
2420
  class="pf-v6-c-toolbar pf-m-static"
1995
- id="data-list-expandable-example-masthead-toolbar"
2421
+ id="data-list-expandable-example-docked-toolbar"
1996
2422
  >
1997
2423
  <div class="pf-v6-c-toolbar__content">
1998
2424
  <div class="pf-v6-c-toolbar__content-section">
@@ -2010,7 +2436,19 @@ wrapperTag: div
2010
2436
  aria-label="Application launcher"
2011
2437
  >
2012
2438
  <span class="pf-v6-c-menu-toggle__icon">
2013
- <i class="fas fa-th" aria-hidden="true"></i>
2439
+ <svg
2440
+ class="pf-v6-svg"
2441
+ viewBox="0 0 512 512"
2442
+ fill="currentColor"
2443
+ aria-hidden="true"
2444
+ role="img"
2445
+ width="1em"
2446
+ height="1em"
2447
+ >
2448
+ <path
2449
+ 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"
2450
+ />
2451
+ </svg>
2014
2452
  </span>
2015
2453
  </button>
2016
2454
  </div>
@@ -2022,7 +2460,19 @@ wrapperTag: div
2022
2460
  aria-label="Settings"
2023
2461
  >
2024
2462
  <span class="pf-v6-c-menu-toggle__icon">
2025
- <i class="fas fa-cog" aria-hidden="true"></i>
2463
+ <svg
2464
+ class="pf-v6-svg"
2465
+ viewBox="0 0 32 32"
2466
+ fill="currentColor"
2467
+ aria-hidden="true"
2468
+ role="img"
2469
+ width="1em"
2470
+ height="1em"
2471
+ >
2472
+ <path
2473
+ d="M30.168 12.894a.5.5 0 0 0-.488-.394h-2.732a11.512 11.512 0 0 0-.729-1.769l1.931-1.93a.5.5 0 0 0 .066-.625 14.693 14.693 0 0 0-4.393-4.392.498.498 0 0 0-.624.067l-1.93 1.93a11.512 11.512 0 0 0-1.769-.729V2.319a.5.5 0 0 0-.395-.489 14.81 14.81 0 0 0-6.211 0 .5.5 0 0 0-.395.489v2.733c-.614.196-1.207.439-1.769.729L8.8 3.851a.498.498 0 0 0-.624-.067 14.714 14.714 0 0 0-4.393 4.392.5.5 0 0 0 .066.625l1.931 1.93a11.512 11.512 0 0 0-.729 1.769H2.319a.5.5 0 0 0-.488.394 14.652 14.652 0 0 0 0 6.212.5.5 0 0 0 .488.394h2.732c.196.615.44 1.207.729 1.769l-1.931 1.93a.5.5 0 0 0-.066.625 14.673 14.673 0 0 0 4.393 4.392.498.498 0 0 0 .624-.067l1.93-1.93c.562.289 1.154.533 1.769.729v2.733a.5.5 0 0 0 .395.489 14.686 14.686 0 0 0 6.21 0 .5.5 0 0 0 .395-.489v-2.733a11.454 11.454 0 0 0 1.769-.729l1.93 1.93a.5.5 0 0 0 .624.067 14.714 14.714 0 0 0 4.393-4.392.5.5 0 0 0-.066-.625l-1.931-1.93c.289-.562.533-1.154.729-1.769h2.732a.5.5 0 0 0 .488-.394 14.652 14.652 0 0 0 0-6.212ZM16 21.25c-2.895 0-5.25-2.355-5.25-5.25s2.355-5.25 5.25-5.25 5.25 2.355 5.25 5.25-2.355 5.25-5.25 5.25Z"
2474
+ />
2475
+ </svg>
2026
2476
  </span>
2027
2477
  </button>
2028
2478
  </div>
@@ -2034,7 +2484,19 @@ wrapperTag: div
2034
2484
  aria-label="Help"
2035
2485
  >
2036
2486
  <span class="pf-v6-c-menu-toggle__icon">
2037
- <i class="fas fa-question-circle" aria-hidden="true"></i>
2487
+ <svg
2488
+ class="pf-v6-svg"
2489
+ viewBox="0 0 512 512"
2490
+ fill="currentColor"
2491
+ aria-hidden="true"
2492
+ role="img"
2493
+ width="1em"
2494
+ height="1em"
2495
+ >
2496
+ <path
2497
+ d="M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zM262.655 90c-54.497 0-89.255 22.957-116.549 63.758-3.536 5.286-2.353 12.415 2.715 16.258l34.699 26.31c5.205 3.947 12.621 3.008 16.665-2.122 17.864-22.658 30.113-35.797 57.303-35.797 20.429 0 45.698 13.148 45.698 32.958 0 14.976-12.363 22.667-32.534 33.976C247.128 238.528 216 254.941 216 296v4c0 6.627 5.373 12 12 12h56c6.627 0 12-5.373 12-12v-1.333c0-28.462 83.186-29.647 83.186-106.667 0-58.002-60.165-102-116.531-102zM256 338c-25.365 0-46 20.635-46 46 0 25.364 20.635 46 46 46s46-20.636 46-46c0-25.365-20.635-46-46-46z"
2498
+ />
2499
+ </svg>
2038
2500
  </span>
2039
2501
  </button>
2040
2502
  </div>
@@ -2048,7 +2510,19 @@ wrapperTag: div
2048
2510
  aria-label="Actions"
2049
2511
  >
2050
2512
  <span class="pf-v6-c-menu-toggle__icon">
2051
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
2513
+ <svg
2514
+ class="pf-v6-svg"
2515
+ viewBox="0 0 32 32"
2516
+ fill="currentColor"
2517
+ aria-hidden="true"
2518
+ role="img"
2519
+ width="1em"
2520
+ height="1em"
2521
+ >
2522
+ <path
2523
+ d="M12.25 5c0-2.068 1.683-3.75 3.75-3.75S19.75 2.932 19.75 5 18.067 8.75 16 8.75 12.25 7.068 12.25 5ZM16 12.25c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Zm0 11c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Z"
2524
+ />
2525
+ </svg>
2052
2526
  </span>
2053
2527
  </button>
2054
2528
  </div>
@@ -2059,44 +2533,46 @@ wrapperTag: div
2059
2533
  </div>
2060
2534
  </header>
2061
2535
  <div class="pf-v6-c-page__sidebar">
2062
- <div class="pf-v6-c-page__sidebar-body">
2063
- <nav
2064
- class="pf-v6-c-nav"
2065
- id="data-list-expandable-example-primary-nav"
2066
- aria-label="Global"
2067
- >
2068
- <ul class="pf-v6-c-nav__list" role="list">
2069
- <li class="pf-v6-c-nav__item">
2070
- <a href="#" class="pf-v6-c-nav__link">
2071
- <span class="pf-v6-c-nav__link-text">System panel</span>
2072
- </a>
2073
- </li>
2074
- <li class="pf-v6-c-nav__item">
2075
- <a
2076
- href="#"
2077
- class="pf-v6-c-nav__link pf-m-current"
2078
- aria-current="page"
2079
- >
2080
- <span class="pf-v6-c-nav__link-text">Policy</span>
2081
- </a>
2082
- </li>
2083
- <li class="pf-v6-c-nav__item">
2084
- <a href="#" class="pf-v6-c-nav__link">
2085
- <span class="pf-v6-c-nav__link-text">Authentication</span>
2086
- </a>
2087
- </li>
2088
- <li class="pf-v6-c-nav__item">
2089
- <a href="#" class="pf-v6-c-nav__link">
2090
- <span class="pf-v6-c-nav__link-text">Network services</span>
2091
- </a>
2092
- </li>
2093
- <li class="pf-v6-c-nav__item">
2094
- <a href="#" class="pf-v6-c-nav__link">
2095
- <span class="pf-v6-c-nav__link-text">Server</span>
2096
- </a>
2097
- </li>
2098
- </ul>
2099
- </nav>
2536
+ <div class="pf-v6-c-page__sidebar-main">
2537
+ <div class="pf-v6-c-page__sidebar-body">
2538
+ <nav
2539
+ class="pf-v6-c-nav"
2540
+ id="data-list-expandable-example-primary-nav"
2541
+ aria-label="Global"
2542
+ >
2543
+ <ul class="pf-v6-c-nav__list" role="list">
2544
+ <li class="pf-v6-c-nav__item">
2545
+ <a href="#" class="pf-v6-c-nav__link">
2546
+ <span class="pf-v6-c-nav__link-text">System panel</span>
2547
+ </a>
2548
+ </li>
2549
+ <li class="pf-v6-c-nav__item">
2550
+ <a
2551
+ href="#"
2552
+ class="pf-v6-c-nav__link pf-m-current"
2553
+ aria-current="page"
2554
+ >
2555
+ <span class="pf-v6-c-nav__link-text">Policy</span>
2556
+ </a>
2557
+ </li>
2558
+ <li class="pf-v6-c-nav__item">
2559
+ <a href="#" class="pf-v6-c-nav__link">
2560
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
2561
+ </a>
2562
+ </li>
2563
+ <li class="pf-v6-c-nav__item">
2564
+ <a href="#" class="pf-v6-c-nav__link">
2565
+ <span class="pf-v6-c-nav__link-text">Network services</span>
2566
+ </a>
2567
+ </li>
2568
+ <li class="pf-v6-c-nav__item">
2569
+ <a href="#" class="pf-v6-c-nav__link">
2570
+ <span class="pf-v6-c-nav__link-text">Server</span>
2571
+ </a>
2572
+ </li>
2573
+ </ul>
2574
+ </nav>
2575
+ </div>
2100
2576
  </div>
2101
2577
  </div>
2102
2578
  <div class="pf-v6-c-page__main-container" tabindex="-1">
@@ -2114,21 +2590,57 @@ wrapperTag: div
2114
2590
  </li>
2115
2591
  <li class="pf-v6-c-breadcrumb__item">
2116
2592
  <span class="pf-v6-c-breadcrumb__item-divider">
2117
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2593
+ <svg
2594
+ class="pf-v6-svg"
2595
+ viewBox="0 0 20 20"
2596
+ fill="currentColor"
2597
+ aria-hidden="true"
2598
+ role="img"
2599
+ width="1em"
2600
+ height="1em"
2601
+ >
2602
+ <path
2603
+ 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"
2604
+ />
2605
+ </svg>
2118
2606
  </span>
2119
2607
 
2120
2608
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
2121
2609
  </li>
2122
2610
  <li class="pf-v6-c-breadcrumb__item">
2123
2611
  <span class="pf-v6-c-breadcrumb__item-divider">
2124
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2612
+ <svg
2613
+ class="pf-v6-svg"
2614
+ viewBox="0 0 20 20"
2615
+ fill="currentColor"
2616
+ aria-hidden="true"
2617
+ role="img"
2618
+ width="1em"
2619
+ height="1em"
2620
+ >
2621
+ <path
2622
+ 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"
2623
+ />
2624
+ </svg>
2125
2625
  </span>
2126
2626
 
2127
2627
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
2128
2628
  </li>
2129
2629
  <li class="pf-v6-c-breadcrumb__item">
2130
2630
  <span class="pf-v6-c-breadcrumb__item-divider">
2131
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2631
+ <svg
2632
+ class="pf-v6-svg"
2633
+ viewBox="0 0 20 20"
2634
+ fill="currentColor"
2635
+ aria-hidden="true"
2636
+ role="img"
2637
+ width="1em"
2638
+ height="1em"
2639
+ >
2640
+ <path
2641
+ 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"
2642
+ />
2643
+ </svg>
2132
2644
  </span>
2133
2645
 
2134
2646
  <a
@@ -2141,9 +2653,15 @@ wrapperTag: div
2141
2653
  </nav>
2142
2654
  </div>
2143
2655
  </section>
2144
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
2656
+ <section
2657
+ class="pf-v6-c-page__main-section pf-m-limit-width"
2658
+ aria-labelledby="main-title"
2659
+ >
2145
2660
  <div class="pf-v6-c-page__main-body">
2146
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
2661
+ <h1
2662
+ class="pf-v6-c-content--h1 pf-m-page-title"
2663
+ id="main-title"
2664
+ >Main title</h1>
2147
2665
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
2148
2666
  </div>
2149
2667
  </section>
@@ -2167,7 +2685,19 @@ wrapperTag: div
2167
2685
  class="pf-v6-c-icon__content pf-v6-m-mirror-inline-rtl"
2168
2686
  >
2169
2687
  <span class="pf-v6-c-toolbar__expand-all-icon">
2170
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2688
+ <svg
2689
+ class="pf-v6-svg"
2690
+ viewBox="0 0 20 20"
2691
+ fill="currentColor"
2692
+ aria-hidden="true"
2693
+ role="img"
2694
+ width="1em"
2695
+ height="1em"
2696
+ >
2697
+ <path
2698
+ d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
2699
+ />
2700
+ </svg>
2171
2701
  </span>
2172
2702
  </span>
2173
2703
  </span>
@@ -2187,7 +2717,19 @@ wrapperTag: div
2187
2717
  aria-controls="data-list-expandable-example-toolbar-expandable-content"
2188
2718
  >
2189
2719
  <span class="pf-v6-c-menu-toggle__icon">
2190
- <i class="fas fa-filter" aria-hidden="true"></i>
2720
+ <svg
2721
+ class="pf-v6-svg"
2722
+ viewBox="0 0 32 32"
2723
+ fill="currentColor"
2724
+ aria-hidden="true"
2725
+ role="img"
2726
+ width="1em"
2727
+ height="1em"
2728
+ >
2729
+ <path
2730
+ d="M29.875 3.5V7a.876.876 0 0 1-.256.619l-9.744 9.744v10.638a.875.875 0 0 1-.599.83l-6 2a.876.876 0 0 1-.788-.12.874.874 0 0 1-.363-.71V17.363L2.381 7.619A.876.876 0 0 1 2.125 7V3.5c0-.758.617-1.375 1.375-1.375h25c.758 0 1.375.617 1.375 1.375Z"
2731
+ />
2732
+ </svg>
2191
2733
  </span>
2192
2734
  </button>
2193
2735
  </div>
@@ -2217,10 +2759,19 @@ wrapperTag: div
2217
2759
  >
2218
2760
  <span class="pf-v6-c-menu-toggle__controls">
2219
2761
  <span class="pf-v6-c-menu-toggle__toggle-icon">
2220
- <i
2221
- class="fas fa-caret-down fa-fw"
2762
+ <svg
2763
+ class="pf-v6-svg"
2764
+ viewBox="0 0 20 20"
2765
+ fill="currentColor"
2222
2766
  aria-hidden="true"
2223
- ></i>
2767
+ role="img"
2768
+ width="1em"
2769
+ height="1em"
2770
+ >
2771
+ <path
2772
+ d="M18.92 5.62C18.77 5.25 18.4 5 18 5H2a1.003 1.003 0 0 0-.71 1.71l7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65c.29-.29.37-.72.22-1.09Z"
2773
+ />
2774
+ </svg>
2224
2775
  </span>
2225
2776
  </span>
2226
2777
  </button>
@@ -2241,15 +2792,36 @@ wrapperTag: div
2241
2792
  id="data-list-expandable-example-toolbar-search-filter-menu"
2242
2793
  >
2243
2794
  <span class="pf-v6-c-menu-toggle__icon">
2244
- <i class="fas fa-filter" aria-hidden="true"></i>
2795
+ <svg
2796
+ class="pf-v6-svg"
2797
+ viewBox="0 0 32 32"
2798
+ fill="currentColor"
2799
+ aria-hidden="true"
2800
+ role="img"
2801
+ width="1em"
2802
+ height="1em"
2803
+ >
2804
+ <path
2805
+ d="M29.875 3.5V7a.876.876 0 0 1-.256.619l-9.744 9.744v10.638a.875.875 0 0 1-.599.83l-6 2a.876.876 0 0 1-.788-.12.874.874 0 0 1-.363-.71V17.363L2.381 7.619A.876.876 0 0 1 2.125 7V3.5c0-.758.617-1.375 1.375-1.375h25c.758 0 1.375.617 1.375 1.375Z"
2806
+ />
2807
+ </svg>
2245
2808
  </span>
2246
2809
  <span class="pf-v6-c-menu-toggle__text">Name</span>
2247
2810
  <span class="pf-v6-c-menu-toggle__controls">
2248
2811
  <span class="pf-v6-c-menu-toggle__toggle-icon">
2249
- <i
2250
- class="fas fa-caret-down fa-fw"
2812
+ <svg
2813
+ class="pf-v6-svg"
2814
+ viewBox="0 0 20 20"
2815
+ fill="currentColor"
2251
2816
  aria-hidden="true"
2252
- ></i>
2817
+ role="img"
2818
+ width="1em"
2819
+ height="1em"
2820
+ >
2821
+ <path
2822
+ d="M18.92 5.62C18.77 5.25 18.4 5 18 5H2a1.003 1.003 0 0 0-.71 1.71l7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65c.29-.29.37-.72.22-1.09Z"
2823
+ />
2824
+ </svg>
2253
2825
  </span>
2254
2826
  </span>
2255
2827
  </button>
@@ -2303,7 +2875,19 @@ wrapperTag: div
2303
2875
  id="data-list-expandable-example-toolbar-overflow-menu-toggle"
2304
2876
  >
2305
2877
  <span class="pf-v6-c-menu-toggle__icon">
2306
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
2878
+ <svg
2879
+ class="pf-v6-svg"
2880
+ viewBox="0 0 32 32"
2881
+ fill="currentColor"
2882
+ aria-hidden="true"
2883
+ role="img"
2884
+ width="1em"
2885
+ height="1em"
2886
+ >
2887
+ <path
2888
+ d="M12.25 5c0-2.068 1.683-3.75 3.75-3.75S19.75 2.932 19.75 5 18.067 8.75 16 8.75 12.25 7.068 12.25 5ZM16 12.25c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Zm0 11c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Z"
2889
+ />
2890
+ </svg>
2307
2891
  </span>
2308
2892
  </button>
2309
2893
  </div>
@@ -2316,7 +2900,6 @@ wrapperTag: div
2316
2900
  class="pf-v6-c-menu-toggle pf-m-text pf-m-plain"
2317
2901
  type="button"
2318
2902
  aria-expanded="false"
2319
- aria-label="Menu toggle"
2320
2903
  id="data-list-expandable-example-toolbar-top-pagination"
2321
2904
  >
2322
2905
  <span class="pf-v6-c-menu-toggle__text">
@@ -2325,10 +2908,19 @@ wrapperTag: div
2325
2908
  </span>
2326
2909
  <span class="pf-v6-c-menu-toggle__controls">
2327
2910
  <span class="pf-v6-c-menu-toggle__toggle-icon">
2328
- <i
2329
- class="fas fa-caret-down fa-fw"
2911
+ <svg
2912
+ class="pf-v6-svg"
2913
+ viewBox="0 0 20 20"
2914
+ fill="currentColor"
2330
2915
  aria-hidden="true"
2331
- ></i>
2916
+ role="img"
2917
+ width="1em"
2918
+ height="1em"
2919
+ >
2920
+ <path
2921
+ d="M18.92 5.62C18.77 5.25 18.4 5 18 5H2a1.003 1.003 0 0 0-.71 1.71l7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65c.29-.29.37-.72.22-1.09Z"
2922
+ />
2923
+ </svg>
2332
2924
  </span>
2333
2925
  </span>
2334
2926
  </button>
@@ -2345,7 +2937,19 @@ wrapperTag: div
2345
2937
  aria-label="Go to previous page"
2346
2938
  >
2347
2939
  <span class="pf-v6-c-button__icon">
2348
- <i class="fas fa-angle-left" aria-hidden="true"></i>
2940
+ <svg
2941
+ class="pf-v6-svg"
2942
+ viewBox="0 0 256 512"
2943
+ fill="currentColor"
2944
+ aria-hidden="true"
2945
+ role="img"
2946
+ width="1em"
2947
+ height="1em"
2948
+ >
2949
+ <path
2950
+ 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"
2951
+ />
2952
+ </svg>
2349
2953
  </span>
2350
2954
  </button>
2351
2955
  </div>
@@ -2356,7 +2960,19 @@ wrapperTag: div
2356
2960
  aria-label="Go to next page"
2357
2961
  >
2358
2962
  <span class="pf-v6-c-button__icon">
2359
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2963
+ <svg
2964
+ class="pf-v6-svg"
2965
+ viewBox="0 0 256 512"
2966
+ fill="currentColor"
2967
+ aria-hidden="true"
2968
+ role="img"
2969
+ width="1em"
2970
+ height="1em"
2971
+ >
2972
+ <path
2973
+ 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"
2974
+ />
2975
+ </svg>
2360
2976
  </span>
2361
2977
  </button>
2362
2978
  </div>
@@ -2393,7 +3009,19 @@ wrapperTag: div
2393
3009
  >
2394
3010
  <span class="pf-v6-c-button__icon pf-m-start">
2395
3011
  <div class="pf-v6-c-data-list__toggle-icon">
2396
- <i class="fas fa-angle-right" aria-hidden="true"></i>
3012
+ <svg
3013
+ class="pf-v6-svg"
3014
+ viewBox="0 0 20 20"
3015
+ fill="currentColor"
3016
+ aria-hidden="true"
3017
+ role="img"
3018
+ width="1em"
3019
+ height="1em"
3020
+ >
3021
+ <path
3022
+ d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
3023
+ />
3024
+ </svg>
2397
3025
  </div>
2398
3026
  </span>
2399
3027
  </button>
@@ -2653,7 +3281,19 @@ wrapperTag: div
2653
3281
  aria-label="Table actions"
2654
3282
  >
2655
3283
  <span class="pf-v6-c-menu-toggle__icon">
2656
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
3284
+ <svg
3285
+ class="pf-v6-svg"
3286
+ viewBox="0 0 32 32"
3287
+ fill="currentColor"
3288
+ aria-hidden="true"
3289
+ role="img"
3290
+ width="1em"
3291
+ height="1em"
3292
+ >
3293
+ <path
3294
+ d="M12.25 5c0-2.068 1.683-3.75 3.75-3.75S19.75 2.932 19.75 5 18.067 8.75 16 8.75 12.25 7.068 12.25 5ZM16 12.25c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Zm0 11c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Z"
3295
+ />
3296
+ </svg>
2657
3297
  </span>
2658
3298
  </button>
2659
3299
  </td>
@@ -2730,7 +3370,19 @@ wrapperTag: div
2730
3370
  aria-label="Table actions"
2731
3371
  >
2732
3372
  <span class="pf-v6-c-menu-toggle__icon">
2733
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
3373
+ <svg
3374
+ class="pf-v6-svg"
3375
+ viewBox="0 0 32 32"
3376
+ fill="currentColor"
3377
+ aria-hidden="true"
3378
+ role="img"
3379
+ width="1em"
3380
+ height="1em"
3381
+ >
3382
+ <path
3383
+ d="M12.25 5c0-2.068 1.683-3.75 3.75-3.75S19.75 2.932 19.75 5 18.067 8.75 16 8.75 12.25 7.068 12.25 5ZM16 12.25c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Zm0 11c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Z"
3384
+ />
3385
+ </svg>
2734
3386
  </span>
2735
3387
  </button>
2736
3388
  </td>
@@ -2807,7 +3459,19 @@ wrapperTag: div
2807
3459
  aria-label="Table actions"
2808
3460
  >
2809
3461
  <span class="pf-v6-c-menu-toggle__icon">
2810
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
3462
+ <svg
3463
+ class="pf-v6-svg"
3464
+ viewBox="0 0 32 32"
3465
+ fill="currentColor"
3466
+ aria-hidden="true"
3467
+ role="img"
3468
+ width="1em"
3469
+ height="1em"
3470
+ >
3471
+ <path
3472
+ d="M12.25 5c0-2.068 1.683-3.75 3.75-3.75S19.75 2.932 19.75 5 18.067 8.75 16 8.75 12.25 7.068 12.25 5ZM16 12.25c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Zm0 11c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Z"
3473
+ />
3474
+ </svg>
2811
3475
  </span>
2812
3476
  </button>
2813
3477
  </td>
@@ -2883,7 +3547,19 @@ wrapperTag: div
2883
3547
  aria-label="Table actions"
2884
3548
  >
2885
3549
  <span class="pf-v6-c-menu-toggle__icon">
2886
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
3550
+ <svg
3551
+ class="pf-v6-svg"
3552
+ viewBox="0 0 32 32"
3553
+ fill="currentColor"
3554
+ aria-hidden="true"
3555
+ role="img"
3556
+ width="1em"
3557
+ height="1em"
3558
+ >
3559
+ <path
3560
+ d="M12.25 5c0-2.068 1.683-3.75 3.75-3.75S19.75 2.932 19.75 5 18.067 8.75 16 8.75 12.25 7.068 12.25 5ZM16 12.25c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Zm0 11c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Z"
3561
+ />
3562
+ </svg>
2887
3563
  </span>
2888
3564
  </button>
2889
3565
  </td>
@@ -2909,7 +3585,19 @@ wrapperTag: div
2909
3585
  >
2910
3586
  <span class="pf-v6-c-button__icon pf-m-start">
2911
3587
  <div class="pf-v6-c-data-list__toggle-icon">
2912
- <i class="fas fa-angle-right" aria-hidden="true"></i>
3588
+ <svg
3589
+ class="pf-v6-svg"
3590
+ viewBox="0 0 20 20"
3591
+ fill="currentColor"
3592
+ aria-hidden="true"
3593
+ role="img"
3594
+ width="1em"
3595
+ height="1em"
3596
+ >
3597
+ <path
3598
+ d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
3599
+ />
3600
+ </svg>
2913
3601
  </div>
2914
3602
  </span>
2915
3603
  </button>
@@ -3079,7 +3767,19 @@ wrapperTag: div
3079
3767
  >
3080
3768
  <span class="pf-v6-c-button__icon pf-m-start">
3081
3769
  <div class="pf-v6-c-data-list__toggle-icon">
3082
- <i class="fas fa-angle-right" aria-hidden="true"></i>
3770
+ <svg
3771
+ class="pf-v6-svg"
3772
+ viewBox="0 0 20 20"
3773
+ fill="currentColor"
3774
+ aria-hidden="true"
3775
+ role="img"
3776
+ width="1em"
3777
+ height="1em"
3778
+ >
3779
+ <path
3780
+ d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
3781
+ />
3782
+ </svg>
3083
3783
  </div>
3084
3784
  </span>
3085
3785
  </button>
@@ -3135,7 +3835,19 @@ wrapperTag: div
3135
3835
  >
3136
3836
  <span class="pf-v6-c-button__icon pf-m-start">
3137
3837
  <div class="pf-v6-c-data-list__toggle-icon">
3138
- <i class="fas fa-angle-right" aria-hidden="true"></i>
3838
+ <svg
3839
+ class="pf-v6-svg"
3840
+ viewBox="0 0 20 20"
3841
+ fill="currentColor"
3842
+ aria-hidden="true"
3843
+ role="img"
3844
+ width="1em"
3845
+ height="1em"
3846
+ >
3847
+ <path
3848
+ d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
3849
+ />
3850
+ </svg>
3139
3851
  </div>
3140
3852
  </span>
3141
3853
  </button>
@@ -3260,7 +3972,19 @@ wrapperTag: div
3260
3972
  >
3261
3973
  <span class="pf-v6-c-button__icon pf-m-start">
3262
3974
  <div class="pf-v6-c-data-list__toggle-icon">
3263
- <i class="fas fa-angle-right" aria-hidden="true"></i>
3975
+ <svg
3976
+ class="pf-v6-svg"
3977
+ viewBox="0 0 20 20"
3978
+ fill="currentColor"
3979
+ aria-hidden="true"
3980
+ role="img"
3981
+ width="1em"
3982
+ height="1em"
3983
+ >
3984
+ <path
3985
+ d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
3986
+ />
3987
+ </svg>
3264
3988
  </div>
3265
3989
  </span>
3266
3990
  </button>
@@ -3421,7 +4145,6 @@ wrapperTag: div
3421
4145
  class="pf-v6-c-menu-toggle pf-m-top pf-m-text pf-m-plain"
3422
4146
  type="button"
3423
4147
  aria-expanded="false"
3424
- aria-label="Menu toggle"
3425
4148
  id="{{page--id}}-pagination-menu-toggle-bottom-example"
3426
4149
  >
3427
4150
  <span class="pf-v6-c-menu-toggle__text">
@@ -3430,7 +4153,19 @@ wrapperTag: div
3430
4153
  </span>
3431
4154
  <span class="pf-v6-c-menu-toggle__controls">
3432
4155
  <span class="pf-v6-c-menu-toggle__toggle-icon">
3433
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
4156
+ <svg
4157
+ class="pf-v6-svg"
4158
+ viewBox="0 0 20 20"
4159
+ fill="currentColor"
4160
+ aria-hidden="true"
4161
+ role="img"
4162
+ width="1em"
4163
+ height="1em"
4164
+ >
4165
+ <path
4166
+ d="M18.92 5.62C18.77 5.25 18.4 5 18 5H2a1.003 1.003 0 0 0-.71 1.71l7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65c.29-.29.37-.72.22-1.09Z"
4167
+ />
4168
+ </svg>
3434
4169
  </span>
3435
4170
  </span>
3436
4171
  </button>
@@ -3444,7 +4179,19 @@ wrapperTag: div
3444
4179
  aria-label="Go to first page"
3445
4180
  >
3446
4181
  <span class="pf-v6-c-button__icon">
3447
- <i class="fas fa-angle-double-left" aria-hidden="true"></i>
4182
+ <svg
4183
+ class="pf-v6-svg"
4184
+ viewBox="0 0 448 512"
4185
+ fill="currentColor"
4186
+ aria-hidden="true"
4187
+ role="img"
4188
+ width="1em"
4189
+ height="1em"
4190
+ >
4191
+ <path
4192
+ d="M223.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.9L319.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L393.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34zm-192 34l136 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 103c-9.4-9.4-24.6-9.4-33.9 0l-136 136c-9.5 9.4-9.5 24.6-.1 34z"
4193
+ />
4194
+ </svg>
3448
4195
  </span>
3449
4196
  </button>
3450
4197
  </div>
@@ -3456,7 +4203,19 @@ wrapperTag: div
3456
4203
  aria-label="Go to previous page"
3457
4204
  >
3458
4205
  <span class="pf-v6-c-button__icon">
3459
- <i class="fas fa-angle-left" aria-hidden="true"></i>
4206
+ <svg
4207
+ class="pf-v6-svg"
4208
+ viewBox="0 0 256 512"
4209
+ fill="currentColor"
4210
+ aria-hidden="true"
4211
+ role="img"
4212
+ width="1em"
4213
+ height="1em"
4214
+ >
4215
+ <path
4216
+ 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"
4217
+ />
4218
+ </svg>
3460
4219
  </span>
3461
4220
  </button>
3462
4221
  </div>
@@ -3479,7 +4238,19 @@ wrapperTag: div
3479
4238
  aria-label="Go to next page"
3480
4239
  >
3481
4240
  <span class="pf-v6-c-button__icon">
3482
- <i class="fas fa-angle-right" aria-hidden="true"></i>
4241
+ <svg
4242
+ class="pf-v6-svg"
4243
+ viewBox="0 0 256 512"
4244
+ fill="currentColor"
4245
+ aria-hidden="true"
4246
+ role="img"
4247
+ width="1em"
4248
+ height="1em"
4249
+ >
4250
+ <path
4251
+ 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"
4252
+ />
4253
+ </svg>
3483
4254
  </span>
3484
4255
  </button>
3485
4256
  </div>
@@ -3491,7 +4262,19 @@ wrapperTag: div
3491
4262
  aria-label="Go to last page"
3492
4263
  >
3493
4264
  <span class="pf-v6-c-button__icon">
3494
- <i class="fas fa-angle-double-right" aria-hidden="true"></i>
4265
+ <svg
4266
+ class="pf-v6-svg"
4267
+ viewBox="0 0 448 512"
4268
+ fill="currentColor"
4269
+ aria-hidden="true"
4270
+ role="img"
4271
+ width="1em"
4272
+ height="1em"
4273
+ >
4274
+ <path
4275
+ 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 34zm192-34l-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.9l22.6 22.6c9.4 9.4 24.6 9.4 33.9 0l136-136c9.4-9.2 9.4-24.4 0-33.8z"
4276
+ />
4277
+ </svg>
3495
4278
  </span>
3496
4279
  </button>
3497
4280
  </div>
@@ -3517,10 +4300,8 @@ wrapperTag: div
3517
4300
  <span class="pf-v6-c-button__text">Skip to content</span>
3518
4301
  </a>
3519
4302
  </div>
3520
- <header
3521
- class="pf-v6-c-masthead"
3522
- id="data-list-static-bottom-example-masthead"
3523
- >
4303
+
4304
+ <header class="pf-v6-c-masthead" id="data-list-static-bottom-example-docked">
3524
4305
  <div class="pf-v6-c-masthead__main">
3525
4306
  <span class="pf-v6-c-masthead__toggle">
3526
4307
  <button
@@ -3562,7 +4343,7 @@ wrapperTag: div
3562
4343
  y1="2.25860997e-13%"
3563
4344
  x2="32%"
3564
4345
  y2="100%"
3565
- id="linearGradient-data-list-static-bottom-example-masthead"
4346
+ id="linearGradient-data-list-static-bottom-example-docked"
3566
4347
  >
3567
4348
  <stop stop-color="#2B9AF3" offset="0%" />
3568
4349
  <stop
@@ -3616,11 +4397,11 @@ wrapperTag: div
3616
4397
  />
3617
4398
  <path
3618
4399
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
3619
- fill="url(#linearGradient-data-list-static-bottom-example-masthead)"
4400
+ fill="url(#linearGradient-data-list-static-bottom-example-docked)"
3620
4401
  />
3621
4402
  <path
3622
4403
  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"
3623
- fill="url(#linearGradient-data-list-static-bottom-example-masthead)"
4404
+ fill="url(#linearGradient-data-list-static-bottom-example-docked)"
3624
4405
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
3625
4406
  />
3626
4407
  </g>
@@ -3632,7 +4413,7 @@ wrapperTag: div
3632
4413
  <div class="pf-v6-c-masthead__content">
3633
4414
  <div
3634
4415
  class="pf-v6-c-toolbar pf-m-static"
3635
- id="data-list-static-bottom-example-masthead-toolbar"
4416
+ id="data-list-static-bottom-example-docked-toolbar"
3636
4417
  >
3637
4418
  <div class="pf-v6-c-toolbar__content">
3638
4419
  <div class="pf-v6-c-toolbar__content-section">
@@ -3650,7 +4431,19 @@ wrapperTag: div
3650
4431
  aria-label="Application launcher"
3651
4432
  >
3652
4433
  <span class="pf-v6-c-menu-toggle__icon">
3653
- <i class="fas fa-th" aria-hidden="true"></i>
4434
+ <svg
4435
+ class="pf-v6-svg"
4436
+ viewBox="0 0 512 512"
4437
+ fill="currentColor"
4438
+ aria-hidden="true"
4439
+ role="img"
4440
+ width="1em"
4441
+ height="1em"
4442
+ >
4443
+ <path
4444
+ 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"
4445
+ />
4446
+ </svg>
3654
4447
  </span>
3655
4448
  </button>
3656
4449
  </div>
@@ -3662,7 +4455,19 @@ wrapperTag: div
3662
4455
  aria-label="Settings"
3663
4456
  >
3664
4457
  <span class="pf-v6-c-menu-toggle__icon">
3665
- <i class="fas fa-cog" aria-hidden="true"></i>
4458
+ <svg
4459
+ class="pf-v6-svg"
4460
+ viewBox="0 0 32 32"
4461
+ fill="currentColor"
4462
+ aria-hidden="true"
4463
+ role="img"
4464
+ width="1em"
4465
+ height="1em"
4466
+ >
4467
+ <path
4468
+ d="M30.168 12.894a.5.5 0 0 0-.488-.394h-2.732a11.512 11.512 0 0 0-.729-1.769l1.931-1.93a.5.5 0 0 0 .066-.625 14.693 14.693 0 0 0-4.393-4.392.498.498 0 0 0-.624.067l-1.93 1.93a11.512 11.512 0 0 0-1.769-.729V2.319a.5.5 0 0 0-.395-.489 14.81 14.81 0 0 0-6.211 0 .5.5 0 0 0-.395.489v2.733c-.614.196-1.207.439-1.769.729L8.8 3.851a.498.498 0 0 0-.624-.067 14.714 14.714 0 0 0-4.393 4.392.5.5 0 0 0 .066.625l1.931 1.93a11.512 11.512 0 0 0-.729 1.769H2.319a.5.5 0 0 0-.488.394 14.652 14.652 0 0 0 0 6.212.5.5 0 0 0 .488.394h2.732c.196.615.44 1.207.729 1.769l-1.931 1.93a.5.5 0 0 0-.066.625 14.673 14.673 0 0 0 4.393 4.392.498.498 0 0 0 .624-.067l1.93-1.93c.562.289 1.154.533 1.769.729v2.733a.5.5 0 0 0 .395.489 14.686 14.686 0 0 0 6.21 0 .5.5 0 0 0 .395-.489v-2.733a11.454 11.454 0 0 0 1.769-.729l1.93 1.93a.5.5 0 0 0 .624.067 14.714 14.714 0 0 0 4.393-4.392.5.5 0 0 0-.066-.625l-1.931-1.93c.289-.562.533-1.154.729-1.769h2.732a.5.5 0 0 0 .488-.394 14.652 14.652 0 0 0 0-6.212ZM16 21.25c-2.895 0-5.25-2.355-5.25-5.25s2.355-5.25 5.25-5.25 5.25 2.355 5.25 5.25-2.355 5.25-5.25 5.25Z"
4469
+ />
4470
+ </svg>
3666
4471
  </span>
3667
4472
  </button>
3668
4473
  </div>
@@ -3674,7 +4479,19 @@ wrapperTag: div
3674
4479
  aria-label="Help"
3675
4480
  >
3676
4481
  <span class="pf-v6-c-menu-toggle__icon">
3677
- <i class="fas fa-question-circle" aria-hidden="true"></i>
4482
+ <svg
4483
+ class="pf-v6-svg"
4484
+ viewBox="0 0 512 512"
4485
+ fill="currentColor"
4486
+ aria-hidden="true"
4487
+ role="img"
4488
+ width="1em"
4489
+ height="1em"
4490
+ >
4491
+ <path
4492
+ d="M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zM262.655 90c-54.497 0-89.255 22.957-116.549 63.758-3.536 5.286-2.353 12.415 2.715 16.258l34.699 26.31c5.205 3.947 12.621 3.008 16.665-2.122 17.864-22.658 30.113-35.797 57.303-35.797 20.429 0 45.698 13.148 45.698 32.958 0 14.976-12.363 22.667-32.534 33.976C247.128 238.528 216 254.941 216 296v4c0 6.627 5.373 12 12 12h56c6.627 0 12-5.373 12-12v-1.333c0-28.462 83.186-29.647 83.186-106.667 0-58.002-60.165-102-116.531-102zM256 338c-25.365 0-46 20.635-46 46 0 25.364 20.635 46 46 46s46-20.636 46-46c0-25.365-20.635-46-46-46z"
4493
+ />
4494
+ </svg>
3678
4495
  </span>
3679
4496
  </button>
3680
4497
  </div>
@@ -3688,7 +4505,19 @@ wrapperTag: div
3688
4505
  aria-label="Actions"
3689
4506
  >
3690
4507
  <span class="pf-v6-c-menu-toggle__icon">
3691
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
4508
+ <svg
4509
+ class="pf-v6-svg"
4510
+ viewBox="0 0 32 32"
4511
+ fill="currentColor"
4512
+ aria-hidden="true"
4513
+ role="img"
4514
+ width="1em"
4515
+ height="1em"
4516
+ >
4517
+ <path
4518
+ d="M12.25 5c0-2.068 1.683-3.75 3.75-3.75S19.75 2.932 19.75 5 18.067 8.75 16 8.75 12.25 7.068 12.25 5ZM16 12.25c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Zm0 11c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Z"
4519
+ />
4520
+ </svg>
3692
4521
  </span>
3693
4522
  </button>
3694
4523
  </div>
@@ -3699,44 +4528,46 @@ wrapperTag: div
3699
4528
  </div>
3700
4529
  </header>
3701
4530
  <div class="pf-v6-c-page__sidebar">
3702
- <div class="pf-v6-c-page__sidebar-body">
3703
- <nav
3704
- class="pf-v6-c-nav"
3705
- id="data-list-static-bottom-example-primary-nav"
3706
- aria-label="Global"
3707
- >
3708
- <ul class="pf-v6-c-nav__list" role="list">
3709
- <li class="pf-v6-c-nav__item">
3710
- <a href="#" class="pf-v6-c-nav__link">
3711
- <span class="pf-v6-c-nav__link-text">System panel</span>
3712
- </a>
3713
- </li>
3714
- <li class="pf-v6-c-nav__item">
3715
- <a
3716
- href="#"
3717
- class="pf-v6-c-nav__link pf-m-current"
3718
- aria-current="page"
3719
- >
3720
- <span class="pf-v6-c-nav__link-text">Policy</span>
3721
- </a>
3722
- </li>
3723
- <li class="pf-v6-c-nav__item">
3724
- <a href="#" class="pf-v6-c-nav__link">
3725
- <span class="pf-v6-c-nav__link-text">Authentication</span>
3726
- </a>
3727
- </li>
3728
- <li class="pf-v6-c-nav__item">
3729
- <a href="#" class="pf-v6-c-nav__link">
3730
- <span class="pf-v6-c-nav__link-text">Network services</span>
3731
- </a>
3732
- </li>
3733
- <li class="pf-v6-c-nav__item">
3734
- <a href="#" class="pf-v6-c-nav__link">
3735
- <span class="pf-v6-c-nav__link-text">Server</span>
3736
- </a>
3737
- </li>
3738
- </ul>
3739
- </nav>
4531
+ <div class="pf-v6-c-page__sidebar-main">
4532
+ <div class="pf-v6-c-page__sidebar-body">
4533
+ <nav
4534
+ class="pf-v6-c-nav"
4535
+ id="data-list-static-bottom-example-primary-nav"
4536
+ aria-label="Global"
4537
+ >
4538
+ <ul class="pf-v6-c-nav__list" role="list">
4539
+ <li class="pf-v6-c-nav__item">
4540
+ <a href="#" class="pf-v6-c-nav__link">
4541
+ <span class="pf-v6-c-nav__link-text">System panel</span>
4542
+ </a>
4543
+ </li>
4544
+ <li class="pf-v6-c-nav__item">
4545
+ <a
4546
+ href="#"
4547
+ class="pf-v6-c-nav__link pf-m-current"
4548
+ aria-current="page"
4549
+ >
4550
+ <span class="pf-v6-c-nav__link-text">Policy</span>
4551
+ </a>
4552
+ </li>
4553
+ <li class="pf-v6-c-nav__item">
4554
+ <a href="#" class="pf-v6-c-nav__link">
4555
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
4556
+ </a>
4557
+ </li>
4558
+ <li class="pf-v6-c-nav__item">
4559
+ <a href="#" class="pf-v6-c-nav__link">
4560
+ <span class="pf-v6-c-nav__link-text">Network services</span>
4561
+ </a>
4562
+ </li>
4563
+ <li class="pf-v6-c-nav__item">
4564
+ <a href="#" class="pf-v6-c-nav__link">
4565
+ <span class="pf-v6-c-nav__link-text">Server</span>
4566
+ </a>
4567
+ </li>
4568
+ </ul>
4569
+ </nav>
4570
+ </div>
3740
4571
  </div>
3741
4572
  </div>
3742
4573
  <div class="pf-v6-c-page__main-container" tabindex="-1">
@@ -3754,21 +4585,57 @@ wrapperTag: div
3754
4585
  </li>
3755
4586
  <li class="pf-v6-c-breadcrumb__item">
3756
4587
  <span class="pf-v6-c-breadcrumb__item-divider">
3757
- <i class="fas fa-angle-right" aria-hidden="true"></i>
4588
+ <svg
4589
+ class="pf-v6-svg"
4590
+ viewBox="0 0 20 20"
4591
+ fill="currentColor"
4592
+ aria-hidden="true"
4593
+ role="img"
4594
+ width="1em"
4595
+ height="1em"
4596
+ >
4597
+ <path
4598
+ 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"
4599
+ />
4600
+ </svg>
3758
4601
  </span>
3759
4602
 
3760
4603
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
3761
4604
  </li>
3762
4605
  <li class="pf-v6-c-breadcrumb__item">
3763
4606
  <span class="pf-v6-c-breadcrumb__item-divider">
3764
- <i class="fas fa-angle-right" aria-hidden="true"></i>
4607
+ <svg
4608
+ class="pf-v6-svg"
4609
+ viewBox="0 0 20 20"
4610
+ fill="currentColor"
4611
+ aria-hidden="true"
4612
+ role="img"
4613
+ width="1em"
4614
+ height="1em"
4615
+ >
4616
+ <path
4617
+ 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"
4618
+ />
4619
+ </svg>
3765
4620
  </span>
3766
4621
 
3767
4622
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
3768
4623
  </li>
3769
4624
  <li class="pf-v6-c-breadcrumb__item">
3770
4625
  <span class="pf-v6-c-breadcrumb__item-divider">
3771
- <i class="fas fa-angle-right" aria-hidden="true"></i>
4626
+ <svg
4627
+ class="pf-v6-svg"
4628
+ viewBox="0 0 20 20"
4629
+ fill="currentColor"
4630
+ aria-hidden="true"
4631
+ role="img"
4632
+ width="1em"
4633
+ height="1em"
4634
+ >
4635
+ <path
4636
+ 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"
4637
+ />
4638
+ </svg>
3772
4639
  </span>
3773
4640
 
3774
4641
  <a
@@ -3781,9 +4648,15 @@ wrapperTag: div
3781
4648
  </nav>
3782
4649
  </div>
3783
4650
  </section>
3784
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
4651
+ <section
4652
+ class="pf-v6-c-page__main-section pf-m-limit-width"
4653
+ aria-labelledby="main-title"
4654
+ >
3785
4655
  <div class="pf-v6-c-page__main-body">
3786
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
4656
+ <h1
4657
+ class="pf-v6-c-content--h1 pf-m-page-title"
4658
+ id="main-title"
4659
+ >Main title</h1>
3787
4660
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
3788
4661
  </div>
3789
4662
  </section>
@@ -3807,7 +4680,19 @@ wrapperTag: div
3807
4680
  aria-controls="data-list-static-bottom-example-toolbar-expandable-content"
3808
4681
  >
3809
4682
  <span class="pf-v6-c-menu-toggle__icon">
3810
- <i class="fas fa-filter" aria-hidden="true"></i>
4683
+ <svg
4684
+ class="pf-v6-svg"
4685
+ viewBox="0 0 32 32"
4686
+ fill="currentColor"
4687
+ aria-hidden="true"
4688
+ role="img"
4689
+ width="1em"
4690
+ height="1em"
4691
+ >
4692
+ <path
4693
+ d="M29.875 3.5V7a.876.876 0 0 1-.256.619l-9.744 9.744v10.638a.875.875 0 0 1-.599.83l-6 2a.876.876 0 0 1-.788-.12.874.874 0 0 1-.363-.71V17.363L2.381 7.619A.876.876 0 0 1 2.125 7V3.5c0-.758.617-1.375 1.375-1.375h25c.758 0 1.375.617 1.375 1.375Z"
4694
+ />
4695
+ </svg>
3811
4696
  </span>
3812
4697
  </button>
3813
4698
  </div>
@@ -3826,15 +4711,36 @@ wrapperTag: div
3826
4711
  id="data-list-static-bottom-example-toolbar-search-filter-menu"
3827
4712
  >
3828
4713
  <span class="pf-v6-c-menu-toggle__icon">
3829
- <i class="fas fa-filter" aria-hidden="true"></i>
4714
+ <svg
4715
+ class="pf-v6-svg"
4716
+ viewBox="0 0 32 32"
4717
+ fill="currentColor"
4718
+ aria-hidden="true"
4719
+ role="img"
4720
+ width="1em"
4721
+ height="1em"
4722
+ >
4723
+ <path
4724
+ d="M29.875 3.5V7a.876.876 0 0 1-.256.619l-9.744 9.744v10.638a.875.875 0 0 1-.599.83l-6 2a.876.876 0 0 1-.788-.12.874.874 0 0 1-.363-.71V17.363L2.381 7.619A.876.876 0 0 1 2.125 7V3.5c0-.758.617-1.375 1.375-1.375h25c.758 0 1.375.617 1.375 1.375Z"
4725
+ />
4726
+ </svg>
3830
4727
  </span>
3831
4728
  <span class="pf-v6-c-menu-toggle__text">Name</span>
3832
4729
  <span class="pf-v6-c-menu-toggle__controls">
3833
4730
  <span class="pf-v6-c-menu-toggle__toggle-icon">
3834
- <i
3835
- class="fas fa-caret-down fa-fw"
4731
+ <svg
4732
+ class="pf-v6-svg"
4733
+ viewBox="0 0 20 20"
4734
+ fill="currentColor"
3836
4735
  aria-hidden="true"
3837
- ></i>
4736
+ role="img"
4737
+ width="1em"
4738
+ height="1em"
4739
+ >
4740
+ <path
4741
+ d="M18.92 5.62C18.77 5.25 18.4 5 18 5H2a1.003 1.003 0 0 0-.71 1.71l7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65c.29-.29.37-.72.22-1.09Z"
4742
+ />
4743
+ </svg>
3838
4744
  </span>
3839
4745
  </span>
3840
4746
  </button>
@@ -3897,7 +4803,19 @@ wrapperTag: div
3897
4803
  id="data-list-static-bottom-example-toolbar-overflow-menu-toggle"
3898
4804
  >
3899
4805
  <span class="pf-v6-c-menu-toggle__icon">
3900
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
4806
+ <svg
4807
+ class="pf-v6-svg"
4808
+ viewBox="0 0 32 32"
4809
+ fill="currentColor"
4810
+ aria-hidden="true"
4811
+ role="img"
4812
+ width="1em"
4813
+ height="1em"
4814
+ >
4815
+ <path
4816
+ d="M12.25 5c0-2.068 1.683-3.75 3.75-3.75S19.75 2.932 19.75 5 18.067 8.75 16 8.75 12.25 7.068 12.25 5ZM16 12.25c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Zm0 11c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Z"
4817
+ />
4818
+ </svg>
3901
4819
  </span>
3902
4820
  </button>
3903
4821
  </div>
@@ -3910,7 +4828,6 @@ wrapperTag: div
3910
4828
  class="pf-v6-c-menu-toggle pf-m-text pf-m-plain"
3911
4829
  type="button"
3912
4830
  aria-expanded="false"
3913
- aria-label="Menu toggle"
3914
4831
  id="data-list-static-bottom-example-toolbar-top-pagination"
3915
4832
  >
3916
4833
  <span class="pf-v6-c-menu-toggle__text">
@@ -3919,10 +4836,19 @@ wrapperTag: div
3919
4836
  </span>
3920
4837
  <span class="pf-v6-c-menu-toggle__controls">
3921
4838
  <span class="pf-v6-c-menu-toggle__toggle-icon">
3922
- <i
3923
- class="fas fa-caret-down fa-fw"
4839
+ <svg
4840
+ class="pf-v6-svg"
4841
+ viewBox="0 0 20 20"
4842
+ fill="currentColor"
3924
4843
  aria-hidden="true"
3925
- ></i>
4844
+ role="img"
4845
+ width="1em"
4846
+ height="1em"
4847
+ >
4848
+ <path
4849
+ d="M18.92 5.62C18.77 5.25 18.4 5 18 5H2a1.003 1.003 0 0 0-.71 1.71l7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65c.29-.29.37-.72.22-1.09Z"
4850
+ />
4851
+ </svg>
3926
4852
  </span>
3927
4853
  </span>
3928
4854
  </button>
@@ -3939,7 +4865,19 @@ wrapperTag: div
3939
4865
  aria-label="Go to previous page"
3940
4866
  >
3941
4867
  <span class="pf-v6-c-button__icon">
3942
- <i class="fas fa-angle-left" aria-hidden="true"></i>
4868
+ <svg
4869
+ class="pf-v6-svg"
4870
+ viewBox="0 0 256 512"
4871
+ fill="currentColor"
4872
+ aria-hidden="true"
4873
+ role="img"
4874
+ width="1em"
4875
+ height="1em"
4876
+ >
4877
+ <path
4878
+ 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"
4879
+ />
4880
+ </svg>
3943
4881
  </span>
3944
4882
  </button>
3945
4883
  </div>
@@ -3950,7 +4888,19 @@ wrapperTag: div
3950
4888
  aria-label="Go to next page"
3951
4889
  >
3952
4890
  <span class="pf-v6-c-button__icon">
3953
- <i class="fas fa-angle-right" aria-hidden="true"></i>
4891
+ <svg
4892
+ class="pf-v6-svg"
4893
+ viewBox="0 0 256 512"
4894
+ fill="currentColor"
4895
+ aria-hidden="true"
4896
+ role="img"
4897
+ width="1em"
4898
+ height="1em"
4899
+ >
4900
+ <path
4901
+ 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"
4902
+ />
4903
+ </svg>
3954
4904
  </span>
3955
4905
  </button>
3956
4906
  </div>
@@ -4408,13 +5358,12 @@ wrapperTag: div
4408
5358
  </div>
4409
5359
  </li>
4410
5360
  </ul>
4411
- <div class="pf-v6-c-pagination pf-m-bottom pf-m-static">
5361
+ <div class="pf-v6-c-pagination pf-m-static pf-m-bottom">
4412
5362
  <div class="pf-v6-c-pagination__page-menu">
4413
5363
  <button
4414
5364
  class="pf-v6-c-menu-toggle pf-m-top pf-m-text pf-m-plain"
4415
5365
  type="button"
4416
5366
  aria-expanded="false"
4417
- aria-label="Menu toggle"
4418
5367
  id="{{page--id}}pagination-menu-toggle-bottom-example-static"
4419
5368
  >
4420
5369
  <span class="pf-v6-c-menu-toggle__text">
@@ -4423,7 +5372,19 @@ wrapperTag: div
4423
5372
  </span>
4424
5373
  <span class="pf-v6-c-menu-toggle__controls">
4425
5374
  <span class="pf-v6-c-menu-toggle__toggle-icon">
4426
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
5375
+ <svg
5376
+ class="pf-v6-svg"
5377
+ viewBox="0 0 20 20"
5378
+ fill="currentColor"
5379
+ aria-hidden="true"
5380
+ role="img"
5381
+ width="1em"
5382
+ height="1em"
5383
+ >
5384
+ <path
5385
+ d="M18.92 5.62C18.77 5.25 18.4 5 18 5H2a1.003 1.003 0 0 0-.71 1.71l7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65c.29-.29.37-.72.22-1.09Z"
5386
+ />
5387
+ </svg>
4427
5388
  </span>
4428
5389
  </span>
4429
5390
  </button>
@@ -4437,7 +5398,19 @@ wrapperTag: div
4437
5398
  aria-label="Go to first page"
4438
5399
  >
4439
5400
  <span class="pf-v6-c-button__icon">
4440
- <i class="fas fa-angle-double-left" aria-hidden="true"></i>
5401
+ <svg
5402
+ class="pf-v6-svg"
5403
+ viewBox="0 0 448 512"
5404
+ fill="currentColor"
5405
+ aria-hidden="true"
5406
+ role="img"
5407
+ width="1em"
5408
+ height="1em"
5409
+ >
5410
+ <path
5411
+ d="M223.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.9L319.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L393.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34zm-192 34l136 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 103c-9.4-9.4-24.6-9.4-33.9 0l-136 136c-9.5 9.4-9.5 24.6-.1 34z"
5412
+ />
5413
+ </svg>
4441
5414
  </span>
4442
5415
  </button>
4443
5416
  </div>
@@ -4449,7 +5422,19 @@ wrapperTag: div
4449
5422
  aria-label="Go to previous page"
4450
5423
  >
4451
5424
  <span class="pf-v6-c-button__icon">
4452
- <i class="fas fa-angle-left" aria-hidden="true"></i>
5425
+ <svg
5426
+ class="pf-v6-svg"
5427
+ viewBox="0 0 256 512"
5428
+ fill="currentColor"
5429
+ aria-hidden="true"
5430
+ role="img"
5431
+ width="1em"
5432
+ height="1em"
5433
+ >
5434
+ <path
5435
+ 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"
5436
+ />
5437
+ </svg>
4453
5438
  </span>
4454
5439
  </button>
4455
5440
  </div>
@@ -4472,7 +5457,19 @@ wrapperTag: div
4472
5457
  aria-label="Go to next page"
4473
5458
  >
4474
5459
  <span class="pf-v6-c-button__icon">
4475
- <i class="fas fa-angle-right" aria-hidden="true"></i>
5460
+ <svg
5461
+ class="pf-v6-svg"
5462
+ viewBox="0 0 256 512"
5463
+ fill="currentColor"
5464
+ aria-hidden="true"
5465
+ role="img"
5466
+ width="1em"
5467
+ height="1em"
5468
+ >
5469
+ <path
5470
+ 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"
5471
+ />
5472
+ </svg>
4476
5473
  </span>
4477
5474
  </button>
4478
5475
  </div>
@@ -4484,7 +5481,19 @@ wrapperTag: div
4484
5481
  aria-label="Go to last page"
4485
5482
  >
4486
5483
  <span class="pf-v6-c-button__icon">
4487
- <i class="fas fa-angle-double-right" aria-hidden="true"></i>
5484
+ <svg
5485
+ class="pf-v6-svg"
5486
+ viewBox="0 0 448 512"
5487
+ fill="currentColor"
5488
+ aria-hidden="true"
5489
+ role="img"
5490
+ width="1em"
5491
+ height="1em"
5492
+ >
5493
+ <path
5494
+ 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 34zm192-34l-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.9l22.6 22.6c9.4 9.4 24.6 9.4 33.9 0l136-136c9.4-9.2 9.4-24.4 0-33.8z"
5495
+ />
5496
+ </svg>
4488
5497
  </span>
4489
5498
  </button>
4490
5499
  </div>