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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (392) hide show
  1. package/README.md +1 -1
  2. package/assets/fontawesome/_variables.scss +2 -1
  3. package/assets/images/RHAiExperienceIcon.svg +27 -0
  4. package/assets/images/RHAutomationsLogo.svg +96 -0
  5. package/assets/images/RHServerStackIcon.svg +16 -0
  6. package/assets/images/compass--hero-bg.png +0 -0
  7. package/assets/images/compass--rh-wallpaper-dark.png +0 -0
  8. package/assets/images/compass--rh-wallpaper-light.png +0 -0
  9. package/assets/images/compass--wallpaper-dark.jpg +0 -0
  10. package/assets/images/compass--wallpaper-dark.png +0 -0
  11. package/assets/images/compass--wallpaper-light.jpg +0 -0
  12. package/assets/images/compass--wallpaper-light.png +0 -0
  13. package/assets/images/glass-brand-dark.jpg +0 -0
  14. package/assets/images/glass-brand-dark.png +0 -0
  15. package/assets/images/glass-brand-light.jpg +0 -0
  16. package/assets/images/glass-brand-light.png +0 -0
  17. package/base/normalize.scss +7 -0
  18. package/base/patternfly-common.css +50 -0
  19. package/base/patternfly-common.scss +59 -0
  20. package/base/patternfly-svg-icons.css +11 -0
  21. package/base/patternfly-svg-icons.scss +14 -0
  22. package/base/patternfly-variables.css +926 -513
  23. package/base/patternfly-variables.scss +46 -4
  24. package/base/tokens/tokens-dark.scss +56 -8
  25. package/base/tokens/tokens-default.scss +69 -14
  26. package/base/tokens/tokens-glass-dark.scss +26 -0
  27. package/base/tokens/tokens-glass.scss +22 -0
  28. package/base/tokens/tokens-local.scss +17 -0
  29. package/base/tokens/tokens-palette.scss +3 -1
  30. package/base/tokens/tokens-redhat-dark.scss +21 -0
  31. package/base/tokens/tokens-redhat-glass-dark.scss +40 -0
  32. package/base/tokens/tokens-redhat-glass.scss +30 -0
  33. package/base/tokens/tokens-redhat-highcontrast-dark.scss +50 -0
  34. package/base/tokens/tokens-redhat-highcontrast.scss +128 -0
  35. package/base/tokens/tokens-redhat.scss +15 -0
  36. package/components/AboutModalBox/about-modal-box.css +36 -26
  37. package/components/Accordion/accordion.css +27 -14
  38. package/components/Accordion/accordion.scss +12 -2
  39. package/components/ActionList/action-list.css +2 -0
  40. package/components/ActionList/action-list.scss +2 -0
  41. package/components/Alert/alert.css +7 -5
  42. package/components/Alert/alert.scss +2 -1
  43. package/components/Avatar/avatar.css +12 -4
  44. package/components/BackgroundImage/background-image.css +6 -3
  45. package/components/Banner/banner.css +8 -6
  46. package/components/Brand/brand.css +3 -1
  47. package/components/Breadcrumb/breadcrumb.css +4 -3
  48. package/components/Button/button.css +121 -30
  49. package/components/Button/button.scss +131 -26
  50. package/components/CalendarMonth/calendar-month.css +4 -3
  51. package/components/Card/card.css +51 -13
  52. package/components/Card/card.scss +61 -8
  53. package/components/ClipboardCopy/clipboard-copy.css +7 -6
  54. package/components/ClipboardCopy/clipboard-copy.scss +3 -3
  55. package/components/CodeEditor/code-editor.css +1 -1
  56. package/components/CodeEditor/code-editor.scss +1 -1
  57. package/components/Compass/compass.css +320 -0
  58. package/components/Compass/compass.scss +350 -0
  59. package/components/DataList/data-list.css +34 -23
  60. package/components/DataList/data-list.scss +8 -2
  61. package/components/DescriptionList/description-list-order.scss +5 -1
  62. package/components/DescriptionList/description-list.css +7 -5
  63. package/components/DescriptionList/description-list.scss +5 -1
  64. package/components/Divider/divider.css +7 -5
  65. package/components/Drawer/drawer.css +222 -73
  66. package/components/Drawer/drawer.scss +191 -26
  67. package/components/DualListSelector/dual-list-selector.css +18 -12
  68. package/components/DualListSelector/dual-list-selector.scss +1 -1
  69. package/components/ExpandableSection/expandable-section.css +21 -16
  70. package/components/ExpandableSection/expandable-section.scss +6 -3
  71. package/components/Form/form.css +2 -2
  72. package/components/Form/form.scss +2 -2
  73. package/components/FormControl/form-control.css +3 -3
  74. package/components/FormControl/form-control.scss +3 -3
  75. package/components/Hero/hero.css +74 -0
  76. package/components/Hero/hero.scss +86 -0
  77. package/components/JumpLinks/jump-links.css +16 -5
  78. package/components/JumpLinks/jump-links.scss +17 -3
  79. package/components/Label/label-group.css +2 -2
  80. package/components/Label/label-group.scss +2 -2
  81. package/components/Label/label.css +4 -3
  82. package/components/Login/login.css +58 -40
  83. package/components/Login/login.scss +7 -3
  84. package/components/Masthead/masthead.css +112 -16
  85. package/components/Masthead/masthead.scss +112 -1
  86. package/components/Menu/menu.css +23 -14
  87. package/components/MenuToggle/menu-toggle.css +26 -3
  88. package/components/MenuToggle/menu-toggle.scss +30 -3
  89. package/components/ModalBox/modal-box.css +9 -7
  90. package/components/ModalBox/modal-box.scss +2 -2
  91. package/components/Nav/nav.css +82 -11
  92. package/components/Nav/nav.scss +85 -5
  93. package/components/NotificationDrawer/notification-drawer.css +19 -9
  94. package/components/NotificationDrawer/notification-drawer.scss +14 -5
  95. package/components/Page/page.css +214 -29
  96. package/components/Page/page.scss +228 -13
  97. package/components/Pagination/pagination.scss +5 -1
  98. package/components/Panel/panel.css +14 -0
  99. package/components/Panel/panel.scss +18 -0
  100. package/components/Progress/progress.css +3 -1
  101. package/components/Progress/progress.scss +3 -1
  102. package/components/ProgressStepper/progress-stepper.scss +5 -1
  103. package/components/Sidebar/sidebar.css +1 -1
  104. package/components/Sidebar/sidebar.scss +7 -3
  105. package/components/Skeleton/skeleton.css +16 -15
  106. package/components/Slider/slider.css +32 -18
  107. package/components/Switch/switch.css +4 -2
  108. package/components/Switch/switch.scss +1 -1
  109. package/components/Table/table-grid.css +28 -36
  110. package/components/Table/table-grid.scss +4 -4
  111. package/components/Table/table-tree-view.css +4 -2
  112. package/components/Table/table.css +45 -36
  113. package/components/Table/table.scss +15 -11
  114. package/components/Tabs/tabs.css +51 -33
  115. package/components/Tabs/tabs.scss +54 -26
  116. package/components/TextInputGroup/text-input-group.css +2 -2
  117. package/components/TextInputGroup/text-input-group.scss +2 -2
  118. package/components/ToggleGroup/toggle-group.css +34 -17
  119. package/components/ToggleGroup/toggle-group.scss +36 -20
  120. package/components/Toolbar/toolbar.css +47 -15
  121. package/components/Toolbar/toolbar.scss +34 -6
  122. package/components/TreeView/tree-view.css +45 -14
  123. package/components/TreeView/tree-view.scss +32 -1
  124. package/components/Wizard/wizard.css +41 -19
  125. package/components/Wizard/wizard.scss +26 -6
  126. package/components/_index.css +2047 -721
  127. package/components/_index.scss +3 -1
  128. package/docs/components/AboutModalBox/examples/AboutModalBox.md +13 -1
  129. package/docs/components/Accordion/examples/Accordion.md +392 -30
  130. package/docs/components/ActionList/examples/ActionList.md +143 -11
  131. package/docs/components/Alert/examples/Alert.md +678 -54
  132. package/docs/components/Avatar/examples/Avatar.md +4 -4
  133. package/docs/components/BackToTop/examples/BackToTop.md +13 -1
  134. package/docs/components/Banner/examples/Banner.md +65 -5
  135. package/docs/components/Brand/examples/Brand.md +2 -2
  136. package/docs/components/Breadcrumb/examples/Breadcrumb.md +299 -24
  137. package/docs/components/Button/examples/Button.md +2362 -163
  138. package/docs/components/CalendarMonth/examples/CalendarMonth.md +104 -8
  139. package/docs/components/Card/examples/Card.md +207 -4
  140. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +286 -22
  141. package/docs/components/CodeBlock/examples/CodeBlock.md +104 -8
  142. package/docs/components/CodeEditor/examples/CodeEditor.md +195 -15
  143. package/docs/components/Compass/examples/Compass.css +17 -0
  144. package/docs/components/Compass/examples/Compass.md +119 -0
  145. package/docs/components/DataList/examples/DataList.md +406 -205
  146. package/docs/components/DatePicker/examples/DatePicker.md +78 -6
  147. package/docs/components/DescriptionList/examples/DescriptionList.md +327 -27
  148. package/docs/components/Divider/examples/Divider.md +2 -2
  149. package/docs/components/DragDrop/examples/DragDrop.css +1 -1
  150. package/docs/components/Drawer/examples/Drawer.md +355 -35
  151. package/docs/components/DualListSelector/examples/DualListSelector.md +1013 -143
  152. package/docs/components/ExpandableSection/examples/ExpandableSection.md +91 -7
  153. package/docs/components/Form/examples/Form.md +78 -6
  154. package/docs/components/Hero/examples/Hero.md +25 -0
  155. package/docs/components/Icon/examples/Icon.md +92 -8
  156. package/docs/components/InlineEdit/examples/InlineEdit.md +312 -24
  157. package/docs/components/InputGroup/examples/InputGroup.md +27 -3
  158. package/docs/components/JumpLinks/examples/JumpLinks.md +54 -6
  159. package/docs/components/Label/examples/Label.md +2834 -218
  160. package/docs/components/Login/examples/Login.md +26 -2
  161. package/docs/components/Masthead/examples/masthead.md +80 -1
  162. package/docs/components/Menu/examples/Menu.md +1458 -116
  163. package/docs/components/MenuToggle/examples/MenuToggle.md +14 -5
  164. package/docs/components/ModalBox/examples/ModalBox.md +289 -25
  165. package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +156 -12
  166. package/docs/components/Nav/examples/Navigation.md +798 -58
  167. package/docs/components/NotificationDrawer/examples/NotificationDrawer.md +598 -46
  168. package/docs/components/OverflowMenu/examples/overflow-menu.md +78 -6
  169. package/docs/components/Page/examples/Page.md +72 -11
  170. package/docs/components/Pagination/examples/Pagination.md +627 -64
  171. package/docs/components/Panel/examples/Panel.md +12 -0
  172. package/docs/components/Popover/examples/Popover.md +286 -22
  173. package/docs/components/Progress/examples/Progress.md +91 -7
  174. package/docs/components/ProgressStepper/examples/ProgressStepper.md +275 -23
  175. package/docs/components/Sidebar/examples/Sidebar.md +1 -1
  176. package/docs/components/Slider/examples/Slider.md +52 -4
  177. package/docs/components/Table/examples/Table.md +876 -70
  178. package/docs/components/Tabs/examples/Tabs.md +5908 -457
  179. package/docs/components/TextInputGroup/examples/TextInputGroup.md +600 -48
  180. package/docs/components/ToggleGroup/examples/toggle-group.md +195 -15
  181. package/docs/components/Toolbar/examples/Toolbar.md +490 -44
  182. package/docs/components/TreeView/examples/TreeView.md +1390 -130
  183. package/docs/components/Wizard/examples/Wizard.md +815 -72
  184. package/docs/demos/AboutModal/examples/AboutModal.md +98 -47
  185. package/docs/demos/Alert/examples/Alert.md +359 -146
  186. package/docs/demos/BackToTop/examples/BackToTop.md +98 -47
  187. package/docs/demos/Banner/examples/Banner.md +170 -92
  188. package/docs/demos/Button/examples/Button.md +13 -1
  189. package/docs/demos/Card/examples/Card.md +963 -128
  190. package/docs/demos/CardView/examples/CardView.md +435 -252
  191. package/docs/demos/Compass/examples/Compass.md +5930 -0
  192. package/docs/demos/Dashboard/examples/Dashboard.md +648 -164
  193. package/docs/demos/DataList/examples/DataList.md +730 -225
  194. package/docs/demos/DescriptionList/examples/DescriptionList.md +279 -141
  195. package/docs/demos/Drawer/examples/Drawer.md +421 -235
  196. package/docs/demos/Form/examples/BasicForms.md +273 -21
  197. package/docs/demos/JumpLinks/examples/JumpLinks.md +518 -287
  198. package/docs/demos/Masthead/examples/Masthead.md +787 -451
  199. package/docs/demos/Modal/examples/Modal.md +588 -285
  200. package/docs/demos/Nav/examples/Nav.md +2913 -493
  201. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +1273 -310
  202. package/docs/demos/Page/examples/Page.md +1236 -689
  203. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +13 -1
  204. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +52 -4
  205. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +978 -385
  206. package/docs/demos/Skeleton/examples/Skeleton.md +85 -46
  207. package/docs/demos/Table/examples/Table.md +4531 -838
  208. package/docs/demos/Tabs/examples/Tabs.md +653 -293
  209. package/docs/demos/Toolbar/examples/Toolbar.md +584 -136
  210. package/docs/demos/Wizard/examples/Wizard.md +1165 -472
  211. package/docs/layouts/Bullseye/examples/Bullseye.css +2 -2
  212. package/docs/layouts/Bullseye/examples/Bullseye.md +2 -1
  213. package/docs/layouts/Flex/examples/Flex.css +3 -3
  214. package/docs/layouts/Flex/examples/Flex.md +3 -2
  215. package/docs/layouts/Gallery/examples/Gallery.css +2 -2
  216. package/docs/layouts/Gallery/examples/Gallery.md +4 -3
  217. package/docs/layouts/Grid/examples/Grid.css +1 -1
  218. package/docs/layouts/Grid/examples/Grid.md +6 -5
  219. package/docs/layouts/Level/examples/Level.css +3 -3
  220. package/docs/layouts/Level/examples/Level.md +2 -1
  221. package/docs/layouts/Split/examples/Split.css +1 -1
  222. package/docs/layouts/Split/examples/Split.md +2 -1
  223. package/docs/layouts/Stack/examples/Stack.css +3 -3
  224. package/docs/layouts/Stack/examples/Stack.md +2 -1
  225. package/docs/utilities/Accessibility/examples/Accessibility.md +3 -2
  226. package/docs/utilities/Alignment/examples/Alignment.css +4 -4
  227. package/docs/utilities/Alignment/examples/Alignment.md +3 -2
  228. package/docs/utilities/BackgroundColor/examples/BackgroundColor.md +5 -4
  229. package/docs/utilities/BoxShadow/examples/box-shadow.css +2 -2
  230. package/docs/utilities/BoxShadow/examples/box-shadow.md +2 -1
  231. package/docs/utilities/Display/examples/Display.css +1 -1
  232. package/docs/utilities/Display/examples/Display.md +3 -2
  233. package/docs/utilities/Flex/examples/Flex.css +7 -7
  234. package/docs/utilities/Flex/examples/Flex.md +3 -2
  235. package/docs/utilities/Float/examples/Float.css +2 -2
  236. package/docs/utilities/Float/examples/Float.md +3 -2
  237. package/docs/utilities/Sizing/examples/Sizing.md +8 -7
  238. package/docs/utilities/Spacing/examples/Spacing.css +2 -2
  239. package/docs/utilities/Spacing/examples/Spacing.md +3 -2
  240. package/docs/utilities/Text/examples/Text.md +5 -4
  241. package/icons/PfIcons/add-circle-o.svg +4 -0
  242. package/icons/PfIcons/ansible-tower.svg +4 -0
  243. package/icons/PfIcons/applications.svg +4 -0
  244. package/icons/PfIcons/arrow.svg +4 -0
  245. package/icons/PfIcons/asleep.svg +4 -0
  246. package/icons/PfIcons/attention-bell.svg +4 -0
  247. package/icons/PfIcons/automation.svg +4 -0
  248. package/icons/PfIcons/bell.svg +4 -0
  249. package/icons/PfIcons/blueprint.svg +4 -0
  250. package/icons/PfIcons/build.svg +4 -0
  251. package/icons/PfIcons/builder-image.svg +4 -0
  252. package/icons/PfIcons/bundle.svg +4 -0
  253. package/icons/PfIcons/catalog.svg +4 -0
  254. package/icons/PfIcons/chat.svg +4 -0
  255. package/icons/PfIcons/close.svg +4 -0
  256. package/icons/PfIcons/cloud-security.svg +4 -0
  257. package/icons/PfIcons/cloud-tenant.svg +4 -0
  258. package/icons/PfIcons/cluster.svg +4 -0
  259. package/icons/PfIcons/connected.svg +4 -0
  260. package/icons/PfIcons/container-node.svg +4 -0
  261. package/icons/PfIcons/cpu.svg +4 -0
  262. package/icons/PfIcons/critical-risk.svg +4 -0
  263. package/icons/PfIcons/data-processor.svg +4 -0
  264. package/icons/PfIcons/data-sink.svg +4 -0
  265. package/icons/PfIcons/data-source.svg +4 -0
  266. package/icons/PfIcons/degraded.svg +4 -0
  267. package/icons/PfIcons/disconnected.svg +4 -0
  268. package/icons/PfIcons/domain.svg +4 -0
  269. package/icons/PfIcons/edit.svg +4 -0
  270. package/icons/PfIcons/enhancement.svg +4 -0
  271. package/icons/PfIcons/enterprise.svg +4 -0
  272. package/icons/PfIcons/equalizer.svg +4 -0
  273. package/icons/PfIcons/error-circle-o.svg +4 -0
  274. package/icons/PfIcons/export.svg +4 -0
  275. package/icons/PfIcons/filter.svg +4 -0
  276. package/icons/PfIcons/flavor.svg +4 -0
  277. package/icons/PfIcons/folder-close.svg +4 -0
  278. package/icons/PfIcons/folder-open.svg +4 -0
  279. package/icons/PfIcons/globe-route.svg +4 -0
  280. package/icons/PfIcons/help.svg +4 -0
  281. package/icons/PfIcons/history.svg +4 -0
  282. package/icons/PfIcons/home.svg +4 -0
  283. package/icons/PfIcons/import.svg +4 -0
  284. package/icons/PfIcons/in-progress.svg +4 -0
  285. package/icons/PfIcons/info.svg +4 -0
  286. package/icons/PfIcons/infrastructure.svg +4 -0
  287. package/icons/PfIcons/integration.svg +4 -0
  288. package/icons/PfIcons/key.svg +4 -0
  289. package/icons/PfIcons/locked.svg +4 -0
  290. package/icons/PfIcons/maintenance.svg +4 -0
  291. package/icons/PfIcons/memory.svg +4 -0
  292. package/icons/PfIcons/messages.svg +4 -0
  293. package/icons/PfIcons/middleware.svg +4 -0
  294. package/icons/PfIcons/migration.svg +4 -0
  295. package/icons/PfIcons/module.svg +4 -0
  296. package/icons/PfIcons/monitoring.svg +4 -0
  297. package/icons/PfIcons/multicluster.svg +4 -0
  298. package/icons/PfIcons/namespaces.svg +4 -0
  299. package/icons/PfIcons/network.svg +4 -0
  300. package/icons/PfIcons/new-process.svg +4 -0
  301. package/icons/PfIcons/not-started.svg +4 -0
  302. package/icons/PfIcons/off.svg +4 -0
  303. package/icons/PfIcons/ok.svg +4 -0
  304. package/icons/PfIcons/on-running.svg +4 -0
  305. package/icons/PfIcons/on.svg +4 -0
  306. package/icons/PfIcons/open-drawer-right.svg +4 -0
  307. package/icons/PfIcons/openshift.svg +4 -0
  308. package/icons/PfIcons/openstack.svg +4 -0
  309. package/icons/PfIcons/optimize.svg +4 -0
  310. package/icons/PfIcons/orders.svg +4 -0
  311. package/icons/PfIcons/os-image.svg +4 -0
  312. package/icons/PfIcons/package.svg +4 -0
  313. package/icons/PfIcons/panel-close.svg +4 -0
  314. package/icons/PfIcons/panel-open.svg +4 -0
  315. package/icons/PfIcons/paused.svg +4 -0
  316. package/icons/PfIcons/pending.svg +4 -0
  317. package/icons/PfIcons/pficon-dragdrop.svg +4 -0
  318. package/icons/PfIcons/pficon-history.svg +4 -0
  319. package/icons/PfIcons/pficon-network-range.svg +4 -0
  320. package/icons/PfIcons/pficon-satellite.svg +4 -0
  321. package/icons/PfIcons/pficon-sort-common-asc.svg +4 -0
  322. package/icons/PfIcons/pficon-sort-common-desc.svg +4 -0
  323. package/icons/PfIcons/pficon-template.svg +4 -0
  324. package/icons/PfIcons/pficon-vcenter.svg +4 -0
  325. package/icons/PfIcons/plugged.svg +4 -0
  326. package/icons/PfIcons/port.svg +4 -0
  327. package/icons/PfIcons/print.svg +4 -0
  328. package/icons/PfIcons/private.svg +4 -0
  329. package/icons/PfIcons/process-automation.svg +4 -0
  330. package/icons/PfIcons/project.svg +4 -0
  331. package/icons/PfIcons/rebalance.svg +4 -0
  332. package/icons/PfIcons/rebooting.svg +4 -0
  333. package/icons/PfIcons/regions.svg +4 -0
  334. package/icons/PfIcons/registry.svg +4 -0
  335. package/icons/PfIcons/remove2.svg +4 -0
  336. package/icons/PfIcons/replicator.svg +4 -0
  337. package/icons/PfIcons/repository.svg +4 -0
  338. package/icons/PfIcons/resource-pool.svg +4 -0
  339. package/icons/PfIcons/resources-almost-empty.svg +4 -0
  340. package/icons/PfIcons/resources-almost-full.svg +4 -0
  341. package/icons/PfIcons/resources-empty.svg +4 -0
  342. package/icons/PfIcons/resources-full.svg +4 -0
  343. package/icons/PfIcons/running.svg +4 -0
  344. package/icons/PfIcons/save.svg +4 -0
  345. package/icons/PfIcons/screen.svg +4 -0
  346. package/icons/PfIcons/security.svg +4 -0
  347. package/icons/PfIcons/server-group.svg +4 -0
  348. package/icons/PfIcons/server.svg +4 -0
  349. package/icons/PfIcons/service-catalog.svg +4 -0
  350. package/icons/PfIcons/service.svg +4 -0
  351. package/icons/PfIcons/services.svg +4 -0
  352. package/icons/PfIcons/severity-critical.svg +4 -0
  353. package/icons/PfIcons/severity-important.svg +4 -0
  354. package/icons/PfIcons/severity-minor.svg +4 -0
  355. package/icons/PfIcons/severity-moderate.svg +4 -0
  356. package/icons/PfIcons/severity-none.svg +4 -0
  357. package/icons/PfIcons/severity-undefined.svg +4 -0
  358. package/icons/PfIcons/spinner.svg +4 -0
  359. package/icons/PfIcons/spinner2.svg +4 -0
  360. package/icons/PfIcons/storage-domain.svg +4 -0
  361. package/icons/PfIcons/task.svg +4 -0
  362. package/icons/PfIcons/tenant.svg +4 -0
  363. package/icons/PfIcons/thumb-tack.svg +4 -0
  364. package/icons/PfIcons/topology.svg +4 -0
  365. package/icons/PfIcons/treeview.svg +4 -0
  366. package/icons/PfIcons/trend-down.svg +4 -0
  367. package/icons/PfIcons/trend-up.svg +4 -0
  368. package/icons/PfIcons/unknown.svg +4 -0
  369. package/icons/PfIcons/unlocked.svg +4 -0
  370. package/icons/PfIcons/unplugged.svg +4 -0
  371. package/icons/PfIcons/user.svg +4 -0
  372. package/icons/PfIcons/users.svg +4 -0
  373. package/icons/PfIcons/virtual-machine.svg +4 -0
  374. package/icons/PfIcons/volume.svg +4 -0
  375. package/icons/PfIcons/warning-triangle.svg +4 -0
  376. package/icons/PfIcons/zone.svg +4 -0
  377. package/layouts/Flex/flex.scss +83 -19
  378. package/layouts/Gallery/gallery.css +6 -2
  379. package/layouts/_index.css +6 -2
  380. package/package.json +34 -16
  381. package/patternfly-base-no-globals.css +965 -491
  382. package/patternfly-base.css +972 -491
  383. package/patternfly-charts.css +3 -3
  384. package/patternfly-no-globals.css +2908 -1087
  385. package/patternfly.css +2915 -1087
  386. package/patternfly.min.css +1 -1
  387. package/patternfly.min.css.map +1 -1
  388. package/patternfly.scss +27 -0
  389. package/sass-utilities/functions.scss +32 -25
  390. package/sass-utilities/mixins.scss +36 -20
  391. package/sass-utilities/namespaces-components.scss +6 -0
  392. package/sass-utilities/scss-variables.scss +3 -0
package/docs/demos/Toolbar/examples/Toolbar.md CHANGED
@@ -117,7 +117,6 @@ section: components
117
117
  class="pf-v6-c-menu-toggle pf-m-text pf-m-plain"
118
118
  type="button"
119
119
  aria-expanded="false"
120
- aria-label="Menu toggle"
121
120
  id="toolbar-attribute-value-search-filter-desktop-example-pagination-menu-toggle"
122
121
  >
123
122
  <span class="pf-v6-c-menu-toggle__text">
@@ -140,7 +139,19 @@ section: components
140
139
  aria-label="Go to previous page"
141
140
  >
142
141
  <span class="pf-v6-c-button__icon">
143
- <i class="fas fa-angle-left" aria-hidden="true"></i>
142
+ <svg
143
+ class="pf-v6-svg"
144
+ viewBox="0 0 256 512"
145
+ fill="currentColor"
146
+ aria-hidden="true"
147
+ role="img"
148
+ width="1em"
149
+ height="1em"
150
+ >
151
+ <path
152
+ 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"
153
+ />
154
+ </svg>
144
155
  </span>
145
156
  </button>
146
157
  </div>
@@ -151,7 +162,19 @@ section: components
151
162
  aria-label="Go to next page"
152
163
  >
153
164
  <span class="pf-v6-c-button__icon">
154
- <i class="fas fa-angle-right" aria-hidden="true"></i>
165
+ <svg
166
+ class="pf-v6-svg"
167
+ viewBox="0 0 256 512"
168
+ fill="currentColor"
169
+ aria-hidden="true"
170
+ role="img"
171
+ width="1em"
172
+ height="1em"
173
+ >
174
+ <path
175
+ 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"
176
+ />
177
+ </svg>
155
178
  </span>
156
179
  </button>
157
180
  </div>
@@ -183,9 +206,10 @@ section: components
183
206
  <span class="pf-v6-c-button__text">Skip to content</span>
184
207
  </a>
185
208
  </div>
209
+
186
210
  <header
187
211
  class="pf-v6-c-masthead"
188
- id="toolbar-pagination-management-example-masthead"
212
+ id="toolbar-pagination-management-example-docked"
189
213
  >
190
214
  <div class="pf-v6-c-masthead__main">
191
215
  <span class="pf-v6-c-masthead__toggle">
@@ -228,7 +252,7 @@ section: components
228
252
  y1="2.25860997e-13%"
229
253
  x2="32%"
230
254
  y2="100%"
231
- id="linearGradient-toolbar-pagination-management-example-masthead"
255
+ id="linearGradient-toolbar-pagination-management-example-docked"
232
256
  >
233
257
  <stop stop-color="#2B9AF3" offset="0%" />
234
258
  <stop
@@ -282,11 +306,11 @@ section: components
282
306
  />
283
307
  <path
284
308
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
285
- fill="url(#linearGradient-toolbar-pagination-management-example-masthead)"
309
+ fill="url(#linearGradient-toolbar-pagination-management-example-docked)"
286
310
  />
287
311
  <path
288
312
  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"
289
- fill="url(#linearGradient-toolbar-pagination-management-example-masthead)"
313
+ fill="url(#linearGradient-toolbar-pagination-management-example-docked)"
290
314
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
291
315
  />
292
316
  </g>
@@ -298,7 +322,7 @@ section: components
298
322
  <div class="pf-v6-c-masthead__content">
299
323
  <div
300
324
  class="pf-v6-c-toolbar pf-m-static"
301
- id="toolbar-pagination-management-example-masthead-toolbar"
325
+ id="toolbar-pagination-management-example-docked-toolbar"
302
326
  >
303
327
  <div class="pf-v6-c-toolbar__content">
304
328
  <div class="pf-v6-c-toolbar__content-section">
@@ -365,44 +389,46 @@ section: components
365
389
  </div>
366
390
  </header>
367
391
  <div class="pf-v6-c-page__sidebar">
368
- <div class="pf-v6-c-page__sidebar-body">
369
- <nav
370
- class="pf-v6-c-nav"
371
- id="toolbar-pagination-management-example-primary-nav"
372
- aria-label="Global"
373
- >
374
- <ul class="pf-v6-c-nav__list" role="list">
375
- <li class="pf-v6-c-nav__item">
376
- <a href="#" class="pf-v6-c-nav__link">
377
- <span class="pf-v6-c-nav__link-text">System panel</span>
378
- </a>
379
- </li>
380
- <li class="pf-v6-c-nav__item">
381
- <a
382
- href="#"
383
- class="pf-v6-c-nav__link pf-m-current"
384
- aria-current="page"
385
- >
386
- <span class="pf-v6-c-nav__link-text">Policy</span>
387
- </a>
388
- </li>
389
- <li class="pf-v6-c-nav__item">
390
- <a href="#" class="pf-v6-c-nav__link">
391
- <span class="pf-v6-c-nav__link-text">Authentication</span>
392
- </a>
393
- </li>
394
- <li class="pf-v6-c-nav__item">
395
- <a href="#" class="pf-v6-c-nav__link">
396
- <span class="pf-v6-c-nav__link-text">Network services</span>
397
- </a>
398
- </li>
399
- <li class="pf-v6-c-nav__item">
400
- <a href="#" class="pf-v6-c-nav__link">
401
- <span class="pf-v6-c-nav__link-text">Server</span>
402
- </a>
403
- </li>
404
- </ul>
405
- </nav>
392
+ <div class="pf-v6-c-page__sidebar-main">
393
+ <div class="pf-v6-c-page__sidebar-body">
394
+ <nav
395
+ class="pf-v6-c-nav"
396
+ id="toolbar-pagination-management-example-primary-nav"
397
+ aria-label="Global"
398
+ >
399
+ <ul class="pf-v6-c-nav__list" role="list">
400
+ <li class="pf-v6-c-nav__item">
401
+ <a href="#" class="pf-v6-c-nav__link">
402
+ <span class="pf-v6-c-nav__link-text">System panel</span>
403
+ </a>
404
+ </li>
405
+ <li class="pf-v6-c-nav__item">
406
+ <a
407
+ href="#"
408
+ class="pf-v6-c-nav__link pf-m-current"
409
+ aria-current="page"
410
+ >
411
+ <span class="pf-v6-c-nav__link-text">Policy</span>
412
+ </a>
413
+ </li>
414
+ <li class="pf-v6-c-nav__item">
415
+ <a href="#" class="pf-v6-c-nav__link">
416
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
417
+ </a>
418
+ </li>
419
+ <li class="pf-v6-c-nav__item">
420
+ <a href="#" class="pf-v6-c-nav__link">
421
+ <span class="pf-v6-c-nav__link-text">Network services</span>
422
+ </a>
423
+ </li>
424
+ <li class="pf-v6-c-nav__item">
425
+ <a href="#" class="pf-v6-c-nav__link">
426
+ <span class="pf-v6-c-nav__link-text">Server</span>
427
+ </a>
428
+ </li>
429
+ </ul>
430
+ </nav>
431
+ </div>
406
432
  </div>
407
433
  </div>
408
434
  <div class="pf-v6-c-page__main-container" tabindex="-1">
@@ -420,21 +446,57 @@ section: components
420
446
  </li>
421
447
  <li class="pf-v6-c-breadcrumb__item">
422
448
  <span class="pf-v6-c-breadcrumb__item-divider">
423
- <i class="fas fa-angle-right" aria-hidden="true"></i>
449
+ <svg
450
+ class="pf-v6-svg"
451
+ viewBox="0 0 20 20"
452
+ fill="currentColor"
453
+ aria-hidden="true"
454
+ role="img"
455
+ width="1em"
456
+ height="1em"
457
+ >
458
+ <path
459
+ 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"
460
+ />
461
+ </svg>
424
462
  </span>
425
463
 
426
464
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
427
465
  </li>
428
466
  <li class="pf-v6-c-breadcrumb__item">
429
467
  <span class="pf-v6-c-breadcrumb__item-divider">
430
- <i class="fas fa-angle-right" aria-hidden="true"></i>
468
+ <svg
469
+ class="pf-v6-svg"
470
+ viewBox="0 0 20 20"
471
+ fill="currentColor"
472
+ aria-hidden="true"
473
+ role="img"
474
+ width="1em"
475
+ height="1em"
476
+ >
477
+ <path
478
+ 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"
479
+ />
480
+ </svg>
431
481
  </span>
432
482
 
433
483
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
434
484
  </li>
435
485
  <li class="pf-v6-c-breadcrumb__item">
436
486
  <span class="pf-v6-c-breadcrumb__item-divider">
437
- <i class="fas fa-angle-right" aria-hidden="true"></i>
487
+ <svg
488
+ class="pf-v6-svg"
489
+ viewBox="0 0 20 20"
490
+ fill="currentColor"
491
+ aria-hidden="true"
492
+ role="img"
493
+ width="1em"
494
+ height="1em"
495
+ >
496
+ <path
497
+ 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"
498
+ />
499
+ </svg>
438
500
  </span>
439
501
 
440
502
  <a
@@ -525,10 +587,19 @@ section: components
525
587
  aria-label="Toggle date picker"
526
588
  >
527
589
  <span class="pf-v6-c-button__icon">
528
- <i
529
- class="fas fa-calendar-alt"
590
+ <svg
591
+ class="pf-v6-svg"
592
+ viewBox="0 0 448 512"
593
+ fill="currentColor"
530
594
  aria-hidden="true"
531
- ></i>
595
+ role="img"
596
+ width="1em"
597
+ height="1em"
598
+ >
599
+ <path
600
+ d="M0 464c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V192H0v272zm320-196c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40zm0 128c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40zM192 268c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40zm0 128c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40zM64 268c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12H76c-6.6 0-12-5.4-12-12v-40zm0 128c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12H76c-6.6 0-12-5.4-12-12v-40zM400 64h-48V16c0-8.8-7.2-16-16-16h-32c-8.8 0-16 7.2-16 16v48H160V16c0-8.8-7.2-16-16-16h-32c-8.8 0-16 7.2-16 16v48H48C21.5 64 0 85.5 0 112v48h448v-48c0-26.5-21.5-48-48-48z"
601
+ />
602
+ </svg>
532
603
  </span>
533
604
  </button>
534
605
  </div>
@@ -578,10 +649,19 @@ section: components
578
649
  aria-label="Toggle date picker"
579
650
  >
580
651
  <span class="pf-v6-c-button__icon">
581
- <i
582
- class="fas fa-calendar-alt"
652
+ <svg
653
+ class="pf-v6-svg"
654
+ viewBox="0 0 448 512"
655
+ fill="currentColor"
583
656
  aria-hidden="true"
584
- ></i>
657
+ role="img"
658
+ width="1em"
659
+ height="1em"
660
+ >
661
+ <path
662
+ d="M0 464c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V192H0v272zm320-196c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40zm0 128c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40zM192 268c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40zm0 128c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40zM64 268c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12H76c-6.6 0-12-5.4-12-12v-40zm0 128c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12H76c-6.6 0-12-5.4-12-12v-40zM400 64h-48V16c0-8.8-7.2-16-16-16h-32c-8.8 0-16 7.2-16 16v48H160V16c0-8.8-7.2-16-16-16h-32c-8.8 0-16 7.2-16 16v48H48C21.5 64 0 85.5 0 112v48h448v-48c0-26.5-21.5-48-48-48z"
663
+ />
664
+ </svg>
585
665
  </span>
586
666
  </button>
587
667
  </div>
@@ -1246,7 +1326,6 @@ section: components
1246
1326
  class="pf-v6-c-menu-toggle pf-m-text pf-m-plain"
1247
1327
  type="button"
1248
1328
  aria-expanded="false"
1249
- aria-label="Menu toggle"
1250
1329
  id="toolbar-attribute-value-search-filter-mobile-example-pagination-menu-toggle"
1251
1330
  >
1252
1331
  <span class="pf-v6-c-menu-toggle__text">
@@ -1269,7 +1348,19 @@ section: components
1269
1348
  aria-label="Go to previous page"
1270
1349
  >
1271
1350
  <span class="pf-v6-c-button__icon">
1272
- <i class="fas fa-angle-left" aria-hidden="true"></i>
1351
+ <svg
1352
+ class="pf-v6-svg"
1353
+ viewBox="0 0 256 512"
1354
+ fill="currentColor"
1355
+ aria-hidden="true"
1356
+ role="img"
1357
+ width="1em"
1358
+ height="1em"
1359
+ >
1360
+ <path
1361
+ 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"
1362
+ />
1363
+ </svg>
1273
1364
  </span>
1274
1365
  </button>
1275
1366
  </div>
@@ -1280,7 +1371,19 @@ section: components
1280
1371
  aria-label="Go to next page"
1281
1372
  >
1282
1373
  <span class="pf-v6-c-button__icon">
1283
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1374
+ <svg
1375
+ class="pf-v6-svg"
1376
+ viewBox="0 0 256 512"
1377
+ fill="currentColor"
1378
+ aria-hidden="true"
1379
+ role="img"
1380
+ width="1em"
1381
+ height="1em"
1382
+ >
1383
+ <path
1384
+ 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"
1385
+ />
1386
+ </svg>
1284
1387
  </span>
1285
1388
  </button>
1286
1389
  </div>
@@ -1429,7 +1532,6 @@ section: components
1429
1532
  class="pf-v6-c-menu-toggle pf-m-text pf-m-plain"
1430
1533
  type="button"
1431
1534
  aria-expanded="false"
1432
- aria-label="Menu toggle"
1433
1535
  id="toolbar-attribute-value-single-menu-toggle-filter-desktop-example-pagination-menu-toggle"
1434
1536
  >
1435
1537
  <span class="pf-v6-c-menu-toggle__text">
@@ -1452,7 +1554,19 @@ section: components
1452
1554
  aria-label="Go to previous page"
1453
1555
  >
1454
1556
  <span class="pf-v6-c-button__icon">
1455
- <i class="fas fa-angle-left" aria-hidden="true"></i>
1557
+ <svg
1558
+ class="pf-v6-svg"
1559
+ viewBox="0 0 256 512"
1560
+ fill="currentColor"
1561
+ aria-hidden="true"
1562
+ role="img"
1563
+ width="1em"
1564
+ height="1em"
1565
+ >
1566
+ <path
1567
+ 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"
1568
+ />
1569
+ </svg>
1456
1570
  </span>
1457
1571
  </button>
1458
1572
  </div>
@@ -1463,7 +1577,19 @@ section: components
1463
1577
  aria-label="Go to next page"
1464
1578
  >
1465
1579
  <span class="pf-v6-c-button__icon">
1466
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1580
+ <svg
1581
+ class="pf-v6-svg"
1582
+ viewBox="0 0 256 512"
1583
+ fill="currentColor"
1584
+ aria-hidden="true"
1585
+ role="img"
1586
+ width="1em"
1587
+ height="1em"
1588
+ >
1589
+ <path
1590
+ 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"
1591
+ />
1592
+ </svg>
1467
1593
  </span>
1468
1594
  </button>
1469
1595
  </div>
@@ -1614,7 +1740,6 @@ section: components
1614
1740
  class="pf-v6-c-menu-toggle pf-m-text pf-m-plain"
1615
1741
  type="button"
1616
1742
  aria-expanded="false"
1617
- aria-label="Menu toggle"
1618
1743
  id="toolbar-attribute-value-single-menu-toggle-filter-mobile-example-pagination-menu-toggle"
1619
1744
  >
1620
1745
  <span class="pf-v6-c-menu-toggle__text">
@@ -1637,7 +1762,19 @@ section: components
1637
1762
  aria-label="Go to previous page"
1638
1763
  >
1639
1764
  <span class="pf-v6-c-button__icon">
1640
- <i class="fas fa-angle-left" aria-hidden="true"></i>
1765
+ <svg
1766
+ class="pf-v6-svg"
1767
+ viewBox="0 0 256 512"
1768
+ fill="currentColor"
1769
+ aria-hidden="true"
1770
+ role="img"
1771
+ width="1em"
1772
+ height="1em"
1773
+ >
1774
+ <path
1775
+ 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"
1776
+ />
1777
+ </svg>
1641
1778
  </span>
1642
1779
  </button>
1643
1780
  </div>
@@ -1648,7 +1785,19 @@ section: components
1648
1785
  aria-label="Go to next page"
1649
1786
  >
1650
1787
  <span class="pf-v6-c-button__icon">
1651
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1788
+ <svg
1789
+ class="pf-v6-svg"
1790
+ viewBox="0 0 256 512"
1791
+ fill="currentColor"
1792
+ aria-hidden="true"
1793
+ role="img"
1794
+ width="1em"
1795
+ height="1em"
1796
+ >
1797
+ <path
1798
+ 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"
1799
+ />
1800
+ </svg>
1652
1801
  </span>
1653
1802
  </button>
1654
1803
  </div>
@@ -1788,7 +1937,6 @@ section: components
1788
1937
  class="pf-v6-c-menu-toggle pf-m-text pf-m-plain"
1789
1938
  type="button"
1790
1939
  aria-expanded="false"
1791
- aria-label="Menu toggle"
1792
1940
  id="toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-pagination-menu-toggle"
1793
1941
  >
1794
1942
  <span class="pf-v6-c-menu-toggle__text">
@@ -1811,7 +1959,19 @@ section: components
1811
1959
  aria-label="Go to previous page"
1812
1960
  >
1813
1961
  <span class="pf-v6-c-button__icon">
1814
- <i class="fas fa-angle-left" aria-hidden="true"></i>
1962
+ <svg
1963
+ class="pf-v6-svg"
1964
+ viewBox="0 0 256 512"
1965
+ fill="currentColor"
1966
+ aria-hidden="true"
1967
+ role="img"
1968
+ width="1em"
1969
+ height="1em"
1970
+ >
1971
+ <path
1972
+ 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"
1973
+ />
1974
+ </svg>
1815
1975
  </span>
1816
1976
  </button>
1817
1977
  </div>
@@ -1822,7 +1982,19 @@ section: components
1822
1982
  aria-label="Go to next page"
1823
1983
  >
1824
1984
  <span class="pf-v6-c-button__icon">
1825
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1985
+ <svg
1986
+ class="pf-v6-svg"
1987
+ viewBox="0 0 256 512"
1988
+ fill="currentColor"
1989
+ aria-hidden="true"
1990
+ role="img"
1991
+ width="1em"
1992
+ height="1em"
1993
+ >
1994
+ <path
1995
+ 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"
1996
+ />
1997
+ </svg>
1826
1998
  </span>
1827
1999
  </button>
1828
2000
  </div>
@@ -1872,7 +2044,19 @@ section: components
1872
2044
  id="toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-label-group-statusremove-label-one"
1873
2045
  >
1874
2046
  <span class="pf-v6-c-button__icon">
1875
- <i class="fas fa-times" aria-hidden="true"></i>
2047
+ <svg
2048
+ class="pf-v6-svg"
2049
+ viewBox="0 0 20 20"
2050
+ fill="currentColor"
2051
+ aria-hidden="true"
2052
+ role="img"
2053
+ width="1em"
2054
+ height="1em"
2055
+ >
2056
+ <path
2057
+ d="M17.8 16.2 11.59 10l6.21-6.21c.42-.46.39-1.17-.07-1.59-.43-.4-1.09-.4-1.52 0l-6.2 6.2-6.22-6.19c-.44-.44-1.15-.44-1.59 0-.44.44-.44 1.15 0 1.59l6.2 6.21-6.2 6.2c-.42.46-.39 1.17.07 1.59.43.4 1.09.4 1.52 0L10 11.59l6.2 6.2c.44.44 1.15.44 1.59 0 .44-.45.44-1.16 0-1.6Z"
2058
+ />
2059
+ </svg>
1876
2060
  </span>
1877
2061
  </button>
1878
2062
  </span>
@@ -1897,7 +2081,19 @@ section: components
1897
2081
  id="toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-label-group-statusremove-label-two"
1898
2082
  >
1899
2083
  <span class="pf-v6-c-button__icon">
1900
- <i class="fas fa-times" aria-hidden="true"></i>
2084
+ <svg
2085
+ class="pf-v6-svg"
2086
+ viewBox="0 0 20 20"
2087
+ fill="currentColor"
2088
+ aria-hidden="true"
2089
+ role="img"
2090
+ width="1em"
2091
+ height="1em"
2092
+ >
2093
+ <path
2094
+ d="M17.8 16.2 11.59 10l6.21-6.21c.42-.46.39-1.17-.07-1.59-.43-.4-1.09-.4-1.52 0l-6.2 6.2-6.22-6.19c-.44-.44-1.15-.44-1.59 0-.44.44-.44 1.15 0 1.59l6.2 6.21-6.2 6.2c-.42.46-.39 1.17.07 1.59.43.4 1.09.4 1.52 0L10 11.59l6.2 6.2c.44.44 1.15.44 1.59 0 .44-.45.44-1.16 0-1.6Z"
2095
+ />
2096
+ </svg>
1901
2097
  </span>
1902
2098
  </button>
1903
2099
  </span>
@@ -1922,7 +2118,19 @@ section: components
1922
2118
  id="toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-label-group-statusremove-label-three"
1923
2119
  >
1924
2120
  <span class="pf-v6-c-button__icon">
1925
- <i class="fas fa-times" aria-hidden="true"></i>
2121
+ <svg
2122
+ class="pf-v6-svg"
2123
+ viewBox="0 0 20 20"
2124
+ fill="currentColor"
2125
+ aria-hidden="true"
2126
+ role="img"
2127
+ width="1em"
2128
+ height="1em"
2129
+ >
2130
+ <path
2131
+ d="M17.8 16.2 11.59 10l6.21-6.21c.42-.46.39-1.17-.07-1.59-.43-.4-1.09-.4-1.52 0l-6.2 6.2-6.22-6.19c-.44-.44-1.15-.44-1.59 0-.44.44-.44 1.15 0 1.59l6.2 6.21-6.2 6.2c-.42.46-.39 1.17.07 1.59.43.4 1.09.4 1.52 0L10 11.59l6.2 6.2c.44.44 1.15.44 1.59 0 .44-.45.44-1.16 0-1.6Z"
2132
+ />
2133
+ </svg>
1926
2134
  </span>
1927
2135
  </button>
1928
2136
  </span>
@@ -1964,7 +2172,19 @@ section: components
1964
2172
  id="toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-label-group-riskremove-label-one"
1965
2173
  >
1966
2174
  <span class="pf-v6-c-button__icon">
1967
- <i class="fas fa-times" aria-hidden="true"></i>
2175
+ <svg
2176
+ class="pf-v6-svg"
2177
+ viewBox="0 0 20 20"
2178
+ fill="currentColor"
2179
+ aria-hidden="true"
2180
+ role="img"
2181
+ width="1em"
2182
+ height="1em"
2183
+ >
2184
+ <path
2185
+ d="M17.8 16.2 11.59 10l6.21-6.21c.42-.46.39-1.17-.07-1.59-.43-.4-1.09-.4-1.52 0l-6.2 6.2-6.22-6.19c-.44-.44-1.15-.44-1.59 0-.44.44-.44 1.15 0 1.59l6.2 6.21-6.2 6.2c-.42.46-.39 1.17.07 1.59.43.4 1.09.4 1.52 0L10 11.59l6.2 6.2c.44.44 1.15.44 1.59 0 .44-.45.44-1.16 0-1.6Z"
2186
+ />
2187
+ </svg>
1968
2188
  </span>
1969
2189
  </button>
1970
2190
  </span>
@@ -1989,7 +2209,19 @@ section: components
1989
2209
  id="toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-label-group-riskremove-label-two"
1990
2210
  >
1991
2211
  <span class="pf-v6-c-button__icon">
1992
- <i class="fas fa-times" aria-hidden="true"></i>
2212
+ <svg
2213
+ class="pf-v6-svg"
2214
+ viewBox="0 0 20 20"
2215
+ fill="currentColor"
2216
+ aria-hidden="true"
2217
+ role="img"
2218
+ width="1em"
2219
+ height="1em"
2220
+ >
2221
+ <path
2222
+ d="M17.8 16.2 11.59 10l6.21-6.21c.42-.46.39-1.17-.07-1.59-.43-.4-1.09-.4-1.52 0l-6.2 6.2-6.22-6.19c-.44-.44-1.15-.44-1.59 0-.44.44-.44 1.15 0 1.59l6.2 6.21-6.2 6.2c-.42.46-.39 1.17.07 1.59.43.4 1.09.4 1.52 0L10 11.59l6.2 6.2c.44.44 1.15.44 1.59 0 .44-.45.44-1.16 0-1.6Z"
2223
+ />
2224
+ </svg>
1993
2225
  </span>
1994
2226
  </button>
1995
2227
  </span>
@@ -2014,7 +2246,19 @@ section: components
2014
2246
  id="toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-label-group-riskremove-label-three"
2015
2247
  >
2016
2248
  <span class="pf-v6-c-button__icon">
2017
- <i class="fas fa-times" aria-hidden="true"></i>
2249
+ <svg
2250
+ class="pf-v6-svg"
2251
+ viewBox="0 0 20 20"
2252
+ fill="currentColor"
2253
+ aria-hidden="true"
2254
+ role="img"
2255
+ width="1em"
2256
+ height="1em"
2257
+ >
2258
+ <path
2259
+ d="M17.8 16.2 11.59 10l6.21-6.21c.42-.46.39-1.17-.07-1.59-.43-.4-1.09-.4-1.52 0l-6.2 6.2-6.22-6.19c-.44-.44-1.15-.44-1.59 0-.44.44-.44 1.15 0 1.59l6.2 6.21-6.2 6.2c-.42.46-.39 1.17.07 1.59.43.4 1.09.4 1.52 0L10 11.59l6.2 6.2c.44.44 1.15.44 1.59 0 .44-.45.44-1.16 0-1.6Z"
2260
+ />
2261
+ </svg>
2018
2262
  </span>
2019
2263
  </button>
2020
2264
  </span>
@@ -2177,7 +2421,6 @@ section: components
2177
2421
  class="pf-v6-c-menu-toggle pf-m-text pf-m-plain"
2178
2422
  type="button"
2179
2423
  aria-expanded="false"
2180
- aria-label="Menu toggle"
2181
2424
  id="toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-pagination-menu-toggle"
2182
2425
  >
2183
2426
  <span class="pf-v6-c-menu-toggle__text">
@@ -2200,7 +2443,19 @@ section: components
2200
2443
  aria-label="Go to previous page"
2201
2444
  >
2202
2445
  <span class="pf-v6-c-button__icon">
2203
- <i class="fas fa-angle-left" aria-hidden="true"></i>
2446
+ <svg
2447
+ class="pf-v6-svg"
2448
+ viewBox="0 0 256 512"
2449
+ fill="currentColor"
2450
+ aria-hidden="true"
2451
+ role="img"
2452
+ width="1em"
2453
+ height="1em"
2454
+ >
2455
+ <path
2456
+ 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"
2457
+ />
2458
+ </svg>
2204
2459
  </span>
2205
2460
  </button>
2206
2461
  </div>
@@ -2211,7 +2466,19 @@ section: components
2211
2466
  aria-label="Go to next page"
2212
2467
  >
2213
2468
  <span class="pf-v6-c-button__icon">
2214
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2469
+ <svg
2470
+ class="pf-v6-svg"
2471
+ viewBox="0 0 256 512"
2472
+ fill="currentColor"
2473
+ aria-hidden="true"
2474
+ role="img"
2475
+ width="1em"
2476
+ height="1em"
2477
+ >
2478
+ <path
2479
+ 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"
2480
+ />
2481
+ </svg>
2215
2482
  </span>
2216
2483
  </button>
2217
2484
  </div>
@@ -2291,7 +2558,19 @@ section: components
2291
2558
  id="toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-label-group-statusremove-label-one"
2292
2559
  >
2293
2560
  <span class="pf-v6-c-button__icon">
2294
- <i class="fas fa-times" aria-hidden="true"></i>
2561
+ <svg
2562
+ class="pf-v6-svg"
2563
+ viewBox="0 0 20 20"
2564
+ fill="currentColor"
2565
+ aria-hidden="true"
2566
+ role="img"
2567
+ width="1em"
2568
+ height="1em"
2569
+ >
2570
+ <path
2571
+ d="M17.8 16.2 11.59 10l6.21-6.21c.42-.46.39-1.17-.07-1.59-.43-.4-1.09-.4-1.52 0l-6.2 6.2-6.22-6.19c-.44-.44-1.15-.44-1.59 0-.44.44-.44 1.15 0 1.59l6.2 6.21-6.2 6.2c-.42.46-.39 1.17.07 1.59.43.4 1.09.4 1.52 0L10 11.59l6.2 6.2c.44.44 1.15.44 1.59 0 .44-.45.44-1.16 0-1.6Z"
2572
+ />
2573
+ </svg>
2295
2574
  </span>
2296
2575
  </button>
2297
2576
  </span>
@@ -2316,7 +2595,19 @@ section: components
2316
2595
  id="toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-label-group-statusremove-label-two"
2317
2596
  >
2318
2597
  <span class="pf-v6-c-button__icon">
2319
- <i class="fas fa-times" aria-hidden="true"></i>
2598
+ <svg
2599
+ class="pf-v6-svg"
2600
+ viewBox="0 0 20 20"
2601
+ fill="currentColor"
2602
+ aria-hidden="true"
2603
+ role="img"
2604
+ width="1em"
2605
+ height="1em"
2606
+ >
2607
+ <path
2608
+ d="M17.8 16.2 11.59 10l6.21-6.21c.42-.46.39-1.17-.07-1.59-.43-.4-1.09-.4-1.52 0l-6.2 6.2-6.22-6.19c-.44-.44-1.15-.44-1.59 0-.44.44-.44 1.15 0 1.59l6.2 6.21-6.2 6.2c-.42.46-.39 1.17.07 1.59.43.4 1.09.4 1.52 0L10 11.59l6.2 6.2c.44.44 1.15.44 1.59 0 .44-.45.44-1.16 0-1.6Z"
2609
+ />
2610
+ </svg>
2320
2611
  </span>
2321
2612
  </button>
2322
2613
  </span>
@@ -2341,7 +2632,19 @@ section: components
2341
2632
  id="toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-label-group-statusremove-label-three"
2342
2633
  >
2343
2634
  <span class="pf-v6-c-button__icon">
2344
- <i class="fas fa-times" aria-hidden="true"></i>
2635
+ <svg
2636
+ class="pf-v6-svg"
2637
+ viewBox="0 0 20 20"
2638
+ fill="currentColor"
2639
+ aria-hidden="true"
2640
+ role="img"
2641
+ width="1em"
2642
+ height="1em"
2643
+ >
2644
+ <path
2645
+ d="M17.8 16.2 11.59 10l6.21-6.21c.42-.46.39-1.17-.07-1.59-.43-.4-1.09-.4-1.52 0l-6.2 6.2-6.22-6.19c-.44-.44-1.15-.44-1.59 0-.44.44-.44 1.15 0 1.59l6.2 6.21-6.2 6.2c-.42.46-.39 1.17.07 1.59.43.4 1.09.4 1.52 0L10 11.59l6.2 6.2c.44.44 1.15.44 1.59 0 .44-.45.44-1.16 0-1.6Z"
2646
+ />
2647
+ </svg>
2345
2648
  </span>
2346
2649
  </button>
2347
2650
  </span>
@@ -2383,7 +2686,19 @@ section: components
2383
2686
  id="toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-label-group-riskremove-label-one"
2384
2687
  >
2385
2688
  <span class="pf-v6-c-button__icon">
2386
- <i class="fas fa-times" aria-hidden="true"></i>
2689
+ <svg
2690
+ class="pf-v6-svg"
2691
+ viewBox="0 0 20 20"
2692
+ fill="currentColor"
2693
+ aria-hidden="true"
2694
+ role="img"
2695
+ width="1em"
2696
+ height="1em"
2697
+ >
2698
+ <path
2699
+ d="M17.8 16.2 11.59 10l6.21-6.21c.42-.46.39-1.17-.07-1.59-.43-.4-1.09-.4-1.52 0l-6.2 6.2-6.22-6.19c-.44-.44-1.15-.44-1.59 0-.44.44-.44 1.15 0 1.59l6.2 6.21-6.2 6.2c-.42.46-.39 1.17.07 1.59.43.4 1.09.4 1.52 0L10 11.59l6.2 6.2c.44.44 1.15.44 1.59 0 .44-.45.44-1.16 0-1.6Z"
2700
+ />
2701
+ </svg>
2387
2702
  </span>
2388
2703
  </button>
2389
2704
  </span>
@@ -2408,7 +2723,19 @@ section: components
2408
2723
  id="toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-label-group-riskremove-label-two"
2409
2724
  >
2410
2725
  <span class="pf-v6-c-button__icon">
2411
- <i class="fas fa-times" aria-hidden="true"></i>
2726
+ <svg
2727
+ class="pf-v6-svg"
2728
+ viewBox="0 0 20 20"
2729
+ fill="currentColor"
2730
+ aria-hidden="true"
2731
+ role="img"
2732
+ width="1em"
2733
+ height="1em"
2734
+ >
2735
+ <path
2736
+ d="M17.8 16.2 11.59 10l6.21-6.21c.42-.46.39-1.17-.07-1.59-.43-.4-1.09-.4-1.52 0l-6.2 6.2-6.22-6.19c-.44-.44-1.15-.44-1.59 0-.44.44-.44 1.15 0 1.59l6.2 6.21-6.2 6.2c-.42.46-.39 1.17.07 1.59.43.4 1.09.4 1.52 0L10 11.59l6.2 6.2c.44.44 1.15.44 1.59 0 .44-.45.44-1.16 0-1.6Z"
2737
+ />
2738
+ </svg>
2412
2739
  </span>
2413
2740
  </button>
2414
2741
  </span>
@@ -2433,7 +2760,19 @@ section: components
2433
2760
  id="toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-label-group-riskremove-label-three"
2434
2761
  >
2435
2762
  <span class="pf-v6-c-button__icon">
2436
- <i class="fas fa-times" aria-hidden="true"></i>
2763
+ <svg
2764
+ class="pf-v6-svg"
2765
+ viewBox="0 0 20 20"
2766
+ fill="currentColor"
2767
+ aria-hidden="true"
2768
+ role="img"
2769
+ width="1em"
2770
+ height="1em"
2771
+ >
2772
+ <path
2773
+ d="M17.8 16.2 11.59 10l6.21-6.21c.42-.46.39-1.17-.07-1.59-.43-.4-1.09-.4-1.52 0l-6.2 6.2-6.22-6.19c-.44-.44-1.15-.44-1.59 0-.44.44-.44 1.15 0 1.59l6.2 6.21-6.2 6.2c-.42.46-.39 1.17.07 1.59.43.4 1.09.4 1.52 0L10 11.59l6.2 6.2c.44.44 1.15.44 1.59 0 .44-.45.44-1.16 0-1.6Z"
2774
+ />
2775
+ </svg>
2437
2776
  </span>
2438
2777
  </button>
2439
2778
  </span>
@@ -2478,9 +2817,10 @@ section: components
2478
2817
  <span class="pf-v6-c-button__text">Skip to content</span>
2479
2818
  </a>
2480
2819
  </div>
2820
+
2481
2821
  <header
2482
2822
  class="pf-v6-c-masthead"
2483
- id="toolbar-pagination-management-example-masthead"
2823
+ id="toolbar-pagination-management-example-docked"
2484
2824
  >
2485
2825
  <div class="pf-v6-c-masthead__main">
2486
2826
  <span class="pf-v6-c-masthead__toggle">
@@ -2523,7 +2863,7 @@ section: components
2523
2863
  y1="2.25860997e-13%"
2524
2864
  x2="32%"
2525
2865
  y2="100%"
2526
- id="linearGradient-toolbar-pagination-management-example-masthead"
2866
+ id="linearGradient-toolbar-pagination-management-example-docked"
2527
2867
  >
2528
2868
  <stop stop-color="#2B9AF3" offset="0%" />
2529
2869
  <stop
@@ -2577,11 +2917,11 @@ section: components
2577
2917
  />
2578
2918
  <path
2579
2919
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
2580
- fill="url(#linearGradient-toolbar-pagination-management-example-masthead)"
2920
+ fill="url(#linearGradient-toolbar-pagination-management-example-docked)"
2581
2921
  />
2582
2922
  <path
2583
2923
  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"
2584
- fill="url(#linearGradient-toolbar-pagination-management-example-masthead)"
2924
+ fill="url(#linearGradient-toolbar-pagination-management-example-docked)"
2585
2925
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
2586
2926
  />
2587
2927
  </g>
@@ -2593,7 +2933,7 @@ section: components
2593
2933
  <div class="pf-v6-c-masthead__content">
2594
2934
  <div
2595
2935
  class="pf-v6-c-toolbar pf-m-static"
2596
- id="toolbar-pagination-management-example-masthead-toolbar"
2936
+ id="toolbar-pagination-management-example-docked-toolbar"
2597
2937
  >
2598
2938
  <div class="pf-v6-c-toolbar__content">
2599
2939
  <div class="pf-v6-c-toolbar__content-section">
@@ -2660,44 +3000,46 @@ section: components
2660
3000
  </div>
2661
3001
  </header>
2662
3002
  <div class="pf-v6-c-page__sidebar">
2663
- <div class="pf-v6-c-page__sidebar-body">
2664
- <nav
2665
- class="pf-v6-c-nav"
2666
- id="toolbar-pagination-management-example-primary-nav"
2667
- aria-label="Global"
2668
- >
2669
- <ul class="pf-v6-c-nav__list" role="list">
2670
- <li class="pf-v6-c-nav__item">
2671
- <a href="#" class="pf-v6-c-nav__link">
2672
- <span class="pf-v6-c-nav__link-text">System panel</span>
2673
- </a>
2674
- </li>
2675
- <li class="pf-v6-c-nav__item">
2676
- <a
2677
- href="#"
2678
- class="pf-v6-c-nav__link pf-m-current"
2679
- aria-current="page"
2680
- >
2681
- <span class="pf-v6-c-nav__link-text">Policy</span>
2682
- </a>
2683
- </li>
2684
- <li class="pf-v6-c-nav__item">
2685
- <a href="#" class="pf-v6-c-nav__link">
2686
- <span class="pf-v6-c-nav__link-text">Authentication</span>
2687
- </a>
2688
- </li>
2689
- <li class="pf-v6-c-nav__item">
2690
- <a href="#" class="pf-v6-c-nav__link">
2691
- <span class="pf-v6-c-nav__link-text">Network services</span>
2692
- </a>
2693
- </li>
2694
- <li class="pf-v6-c-nav__item">
2695
- <a href="#" class="pf-v6-c-nav__link">
2696
- <span class="pf-v6-c-nav__link-text">Server</span>
2697
- </a>
2698
- </li>
2699
- </ul>
2700
- </nav>
3003
+ <div class="pf-v6-c-page__sidebar-main">
3004
+ <div class="pf-v6-c-page__sidebar-body">
3005
+ <nav
3006
+ class="pf-v6-c-nav"
3007
+ id="toolbar-pagination-management-example-primary-nav"
3008
+ aria-label="Global"
3009
+ >
3010
+ <ul class="pf-v6-c-nav__list" role="list">
3011
+ <li class="pf-v6-c-nav__item">
3012
+ <a href="#" class="pf-v6-c-nav__link">
3013
+ <span class="pf-v6-c-nav__link-text">System panel</span>
3014
+ </a>
3015
+ </li>
3016
+ <li class="pf-v6-c-nav__item">
3017
+ <a
3018
+ href="#"
3019
+ class="pf-v6-c-nav__link pf-m-current"
3020
+ aria-current="page"
3021
+ >
3022
+ <span class="pf-v6-c-nav__link-text">Policy</span>
3023
+ </a>
3024
+ </li>
3025
+ <li class="pf-v6-c-nav__item">
3026
+ <a href="#" class="pf-v6-c-nav__link">
3027
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
3028
+ </a>
3029
+ </li>
3030
+ <li class="pf-v6-c-nav__item">
3031
+ <a href="#" class="pf-v6-c-nav__link">
3032
+ <span class="pf-v6-c-nav__link-text">Network services</span>
3033
+ </a>
3034
+ </li>
3035
+ <li class="pf-v6-c-nav__item">
3036
+ <a href="#" class="pf-v6-c-nav__link">
3037
+ <span class="pf-v6-c-nav__link-text">Server</span>
3038
+ </a>
3039
+ </li>
3040
+ </ul>
3041
+ </nav>
3042
+ </div>
2701
3043
  </div>
2702
3044
  </div>
2703
3045
  <div class="pf-v6-c-page__main-container" tabindex="-1">
@@ -2715,21 +3057,57 @@ section: components
2715
3057
  </li>
2716
3058
  <li class="pf-v6-c-breadcrumb__item">
2717
3059
  <span class="pf-v6-c-breadcrumb__item-divider">
2718
- <i class="fas fa-angle-right" aria-hidden="true"></i>
3060
+ <svg
3061
+ class="pf-v6-svg"
3062
+ viewBox="0 0 20 20"
3063
+ fill="currentColor"
3064
+ aria-hidden="true"
3065
+ role="img"
3066
+ width="1em"
3067
+ height="1em"
3068
+ >
3069
+ <path
3070
+ 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"
3071
+ />
3072
+ </svg>
2719
3073
  </span>
2720
3074
 
2721
3075
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
2722
3076
  </li>
2723
3077
  <li class="pf-v6-c-breadcrumb__item">
2724
3078
  <span class="pf-v6-c-breadcrumb__item-divider">
2725
- <i class="fas fa-angle-right" aria-hidden="true"></i>
3079
+ <svg
3080
+ class="pf-v6-svg"
3081
+ viewBox="0 0 20 20"
3082
+ fill="currentColor"
3083
+ aria-hidden="true"
3084
+ role="img"
3085
+ width="1em"
3086
+ height="1em"
3087
+ >
3088
+ <path
3089
+ 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"
3090
+ />
3091
+ </svg>
2726
3092
  </span>
2727
3093
 
2728
3094
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
2729
3095
  </li>
2730
3096
  <li class="pf-v6-c-breadcrumb__item">
2731
3097
  <span class="pf-v6-c-breadcrumb__item-divider">
2732
- <i class="fas fa-angle-right" aria-hidden="true"></i>
3098
+ <svg
3099
+ class="pf-v6-svg"
3100
+ viewBox="0 0 20 20"
3101
+ fill="currentColor"
3102
+ aria-hidden="true"
3103
+ role="img"
3104
+ width="1em"
3105
+ height="1em"
3106
+ >
3107
+ <path
3108
+ 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"
3109
+ />
3110
+ </svg>
2733
3111
  </span>
2734
3112
 
2735
3113
  <a
@@ -2850,7 +3228,6 @@ section: components
2850
3228
  class="pf-v6-c-menu-toggle pf-m-text pf-m-plain"
2851
3229
  type="button"
2852
3230
  aria-expanded="false"
2853
- aria-label="Menu toggle"
2854
3231
  id="toolbar-pagination-management-example-toolbar-pagination-menu-toggle"
2855
3232
  >
2856
3233
  <span class="pf-v6-c-menu-toggle__text">
@@ -2879,7 +3256,19 @@ section: components
2879
3256
  aria-label="Go to previous page"
2880
3257
  >
2881
3258
  <span class="pf-v6-c-button__icon">
2882
- <i class="fas fa-angle-left" aria-hidden="true"></i>
3259
+ <svg
3260
+ class="pf-v6-svg"
3261
+ viewBox="0 0 256 512"
3262
+ fill="currentColor"
3263
+ aria-hidden="true"
3264
+ role="img"
3265
+ width="1em"
3266
+ height="1em"
3267
+ >
3268
+ <path
3269
+ 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"
3270
+ />
3271
+ </svg>
2883
3272
  </span>
2884
3273
  </button>
2885
3274
  </div>
@@ -2890,7 +3279,19 @@ section: components
2890
3279
  aria-label="Go to next page"
2891
3280
  >
2892
3281
  <span class="pf-v6-c-button__icon">
2893
- <i class="fas fa-angle-right" aria-hidden="true"></i>
3282
+ <svg
3283
+ class="pf-v6-svg"
3284
+ viewBox="0 0 256 512"
3285
+ fill="currentColor"
3286
+ aria-hidden="true"
3287
+ role="img"
3288
+ width="1em"
3289
+ height="1em"
3290
+ >
3291
+ <path
3292
+ 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"
3293
+ />
3294
+ </svg>
2894
3295
  </span>
2895
3296
  </button>
2896
3297
  </div>
@@ -3370,7 +3771,6 @@ section: components
3370
3771
  class="pf-v6-c-menu-toggle pf-m-top pf-m-text pf-m-plain"
3371
3772
  type="button"
3372
3773
  aria-expanded="false"
3373
- aria-label="Menu toggle"
3374
3774
  id="pagination-menu-toggle-bottom-collapsed-example"
3375
3775
  >
3376
3776
  <span class="pf-v6-c-menu-toggle__text">
@@ -3393,7 +3793,19 @@ section: components
3393
3793
  aria-label="Go to first page"
3394
3794
  >
3395
3795
  <span class="pf-v6-c-button__icon">
3396
- <i class="fas fa-angle-double-left" aria-hidden="true"></i>
3796
+ <svg
3797
+ class="pf-v6-svg"
3798
+ viewBox="0 0 448 512"
3799
+ fill="currentColor"
3800
+ aria-hidden="true"
3801
+ role="img"
3802
+ width="1em"
3803
+ height="1em"
3804
+ >
3805
+ <path
3806
+ 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"
3807
+ />
3808
+ </svg>
3397
3809
  </span>
3398
3810
  </button>
3399
3811
  </div>
@@ -3405,7 +3817,19 @@ section: components
3405
3817
  aria-label="Go to previous page"
3406
3818
  >
3407
3819
  <span class="pf-v6-c-button__icon">
3408
- <i class="fas fa-angle-left" aria-hidden="true"></i>
3820
+ <svg
3821
+ class="pf-v6-svg"
3822
+ viewBox="0 0 256 512"
3823
+ fill="currentColor"
3824
+ aria-hidden="true"
3825
+ role="img"
3826
+ width="1em"
3827
+ height="1em"
3828
+ >
3829
+ <path
3830
+ 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"
3831
+ />
3832
+ </svg>
3409
3833
  </span>
3410
3834
  </button>
3411
3835
  </div>
@@ -3428,7 +3852,19 @@ section: components
3428
3852
  aria-label="Go to next page"
3429
3853
  >
3430
3854
  <span class="pf-v6-c-button__icon">
3431
- <i class="fas fa-angle-right" aria-hidden="true"></i>
3855
+ <svg
3856
+ class="pf-v6-svg"
3857
+ viewBox="0 0 256 512"
3858
+ fill="currentColor"
3859
+ aria-hidden="true"
3860
+ role="img"
3861
+ width="1em"
3862
+ height="1em"
3863
+ >
3864
+ <path
3865
+ 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"
3866
+ />
3867
+ </svg>
3432
3868
  </span>
3433
3869
  </button>
3434
3870
  </div>
@@ -3440,7 +3876,19 @@ section: components
3440
3876
  aria-label="Go to last page"
3441
3877
  >
3442
3878
  <span class="pf-v6-c-button__icon">
3443
- <i class="fas fa-angle-double-right" aria-hidden="true"></i>
3879
+ <svg
3880
+ class="pf-v6-svg"
3881
+ viewBox="0 0 448 512"
3882
+ fill="currentColor"
3883
+ aria-hidden="true"
3884
+ role="img"
3885
+ width="1em"
3886
+ height="1em"
3887
+ >
3888
+ <path
3889
+ 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"
3890
+ />
3891
+ </svg>
3444
3892
  </span>
3445
3893
  </button>
3446
3894
  </div>