@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/CardView/examples/CardView.md CHANGED
@@ -15,7 +15,8 @@ section: patterns
15
15
  <span class="pf-v6-c-button__text">Skip to content</span>
16
16
  </a>
17
17
  </div>
18
- <header class="pf-v6-c-masthead" id="card-view-basic-example-masthead">
18
+
19
+ <header class="pf-v6-c-masthead" id="card-view-basic-example-docked">
19
20
  <div class="pf-v6-c-masthead__main">
20
21
  <span class="pf-v6-c-masthead__toggle">
21
22
  <button
@@ -57,7 +58,7 @@ section: patterns
57
58
  y1="2.25860997e-13%"
58
59
  x2="32%"
59
60
  y2="100%"
60
- id="linearGradient-card-view-basic-example-masthead"
61
+ id="linearGradient-card-view-basic-example-docked"
61
62
  >
62
63
  <stop stop-color="#2B9AF3" offset="0%" />
63
64
  <stop
@@ -111,11 +112,11 @@ section: patterns
111
112
  />
112
113
  <path
113
114
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
114
- fill="url(#linearGradient-card-view-basic-example-masthead)"
115
+ fill="url(#linearGradient-card-view-basic-example-docked)"
115
116
  />
116
117
  <path
117
118
  d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z"
118
- fill="url(#linearGradient-card-view-basic-example-masthead)"
119
+ fill="url(#linearGradient-card-view-basic-example-docked)"
119
120
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
120
121
  />
121
122
  </g>
@@ -127,7 +128,7 @@ section: patterns
127
128
  <div class="pf-v6-c-masthead__content">
128
129
  <div
129
130
  class="pf-v6-c-toolbar pf-m-static"
130
- id="card-view-basic-example-masthead-toolbar"
131
+ id="card-view-basic-example-docked-toolbar"
131
132
  >
132
133
  <div class="pf-v6-c-toolbar__content">
133
134
  <div class="pf-v6-c-toolbar__content-section">
@@ -145,7 +146,19 @@ section: patterns
145
146
  aria-label="Application launcher"
146
147
  >
147
148
  <span class="pf-v6-c-menu-toggle__icon">
148
- <i class="fas fa-th" aria-hidden="true"></i>
149
+ <svg
150
+ class="pf-v6-svg"
151
+ viewBox="0 0 512 512"
152
+ fill="currentColor"
153
+ aria-hidden="true"
154
+ role="img"
155
+ width="1em"
156
+ height="1em"
157
+ >
158
+ <path
159
+ d="M149.333 56v80c0 13.255-10.745 24-24 24H24c-13.255 0-24-10.745-24-24V56c0-13.255 10.745-24 24-24h101.333c13.255 0 24 10.745 24 24zm181.334 240v-80c0-13.255-10.745-24-24-24H205.333c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24h101.333c13.256 0 24.001-10.745 24.001-24zm32-240v80c0 13.255 10.745 24 24 24H488c13.255 0 24-10.745 24-24V56c0-13.255-10.745-24-24-24H386.667c-13.255 0-24 10.745-24 24zm-32 80V56c0-13.255-10.745-24-24-24H205.333c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24h101.333c13.256 0 24.001-10.745 24.001-24zm-205.334 56H24c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24h101.333c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24zM0 376v80c0 13.255 10.745 24 24 24h101.333c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H24c-13.255 0-24 10.745-24 24zm386.667-56H488c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H386.667c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24zm0 160H488c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H386.667c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24zM181.333 376v80c0 13.255 10.745 24 24 24h101.333c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H205.333c-13.255 0-24 10.745-24 24z"
160
+ />
161
+ </svg>
149
162
  </span>
150
163
  </button>
151
164
  </div>
@@ -157,7 +170,19 @@ section: patterns
157
170
  aria-label="Settings"
158
171
  >
159
172
  <span class="pf-v6-c-menu-toggle__icon">
160
- <i class="fas fa-cog" aria-hidden="true"></i>
173
+ <svg
174
+ class="pf-v6-svg"
175
+ viewBox="0 0 32 32"
176
+ fill="currentColor"
177
+ aria-hidden="true"
178
+ role="img"
179
+ width="1em"
180
+ height="1em"
181
+ >
182
+ <path
183
+ d="M30.168 12.894a.5.5 0 0 0-.488-.394h-2.732a11.512 11.512 0 0 0-.729-1.769l1.931-1.93a.5.5 0 0 0 .066-.625 14.693 14.693 0 0 0-4.393-4.392.498.498 0 0 0-.624.067l-1.93 1.93a11.512 11.512 0 0 0-1.769-.729V2.319a.5.5 0 0 0-.395-.489 14.81 14.81 0 0 0-6.211 0 .5.5 0 0 0-.395.489v2.733c-.614.196-1.207.439-1.769.729L8.8 3.851a.498.498 0 0 0-.624-.067 14.714 14.714 0 0 0-4.393 4.392.5.5 0 0 0 .066.625l1.931 1.93a11.512 11.512 0 0 0-.729 1.769H2.319a.5.5 0 0 0-.488.394 14.652 14.652 0 0 0 0 6.212.5.5 0 0 0 .488.394h2.732c.196.615.44 1.207.729 1.769l-1.931 1.93a.5.5 0 0 0-.066.625 14.673 14.673 0 0 0 4.393 4.392.498.498 0 0 0 .624-.067l1.93-1.93c.562.289 1.154.533 1.769.729v2.733a.5.5 0 0 0 .395.489 14.686 14.686 0 0 0 6.21 0 .5.5 0 0 0 .395-.489v-2.733a11.454 11.454 0 0 0 1.769-.729l1.93 1.93a.5.5 0 0 0 .624.067 14.714 14.714 0 0 0 4.393-4.392.5.5 0 0 0-.066-.625l-1.931-1.93c.289-.562.533-1.154.729-1.769h2.732a.5.5 0 0 0 .488-.394 14.652 14.652 0 0 0 0-6.212ZM16 21.25c-2.895 0-5.25-2.355-5.25-5.25s2.355-5.25 5.25-5.25 5.25 2.355 5.25 5.25-2.355 5.25-5.25 5.25Z"
184
+ />
185
+ </svg>
161
186
  </span>
162
187
  </button>
163
188
  </div>
@@ -169,7 +194,19 @@ section: patterns
169
194
  aria-label="Help"
170
195
  >
171
196
  <span class="pf-v6-c-menu-toggle__icon">
172
- <i class="fas fa-question-circle" aria-hidden="true"></i>
197
+ <svg
198
+ class="pf-v6-svg"
199
+ viewBox="0 0 512 512"
200
+ fill="currentColor"
201
+ aria-hidden="true"
202
+ role="img"
203
+ width="1em"
204
+ height="1em"
205
+ >
206
+ <path
207
+ d="M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zM262.655 90c-54.497 0-89.255 22.957-116.549 63.758-3.536 5.286-2.353 12.415 2.715 16.258l34.699 26.31c5.205 3.947 12.621 3.008 16.665-2.122 17.864-22.658 30.113-35.797 57.303-35.797 20.429 0 45.698 13.148 45.698 32.958 0 14.976-12.363 22.667-32.534 33.976C247.128 238.528 216 254.941 216 296v4c0 6.627 5.373 12 12 12h56c6.627 0 12-5.373 12-12v-1.333c0-28.462 83.186-29.647 83.186-106.667 0-58.002-60.165-102-116.531-102zM256 338c-25.365 0-46 20.635-46 46 0 25.364 20.635 46 46 46s46-20.636 46-46c0-25.365-20.635-46-46-46z"
208
+ />
209
+ </svg>
173
210
  </span>
174
211
  </button>
175
212
  </div>
@@ -183,7 +220,19 @@ section: patterns
183
220
  aria-label="Actions"
184
221
  >
185
222
  <span class="pf-v6-c-menu-toggle__icon">
186
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
223
+ <svg
224
+ class="pf-v6-svg"
225
+ viewBox="0 0 32 32"
226
+ fill="currentColor"
227
+ aria-hidden="true"
228
+ role="img"
229
+ width="1em"
230
+ height="1em"
231
+ >
232
+ <path
233
+ d="M12.25 5c0-2.068 1.683-3.75 3.75-3.75S19.75 2.932 19.75 5 18.067 8.75 16 8.75 12.25 7.068 12.25 5ZM16 12.25c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Zm0 11c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Z"
234
+ />
235
+ </svg>
187
236
  </span>
188
237
  </button>
189
238
  </div>
@@ -194,136 +243,174 @@ section: patterns
194
243
  </div>
195
244
  </header>
196
245
  <div class="pf-v6-c-page__sidebar">
197
- <div class="pf-v6-c-page__sidebar-body">
198
- <nav
199
- class="pf-v6-c-nav"
200
- id="card-view-basic-example-expandable-nav"
201
- aria-label="Global"
202
- >
203
- <ul class="pf-v6-c-nav__list" role="list">
204
- <li class="pf-v6-c-nav__item pf-m-expanded">
205
- <button
206
- class="pf-v6-c-nav__link"
207
- aria-expanded="true"
208
- id="card-view-basic-example-expandable-nav-link1"
209
- >
210
- <span class="pf-v6-c-nav__link-text">System panel</span>
211
- <span class="pf-v6-c-nav__toggle">
212
- <span class="pf-v6-c-nav__toggle-icon">
213
- <i class="fas fa-angle-right" aria-hidden="true"></i>
246
+ <div class="pf-v6-c-page__sidebar-main">
247
+ <div class="pf-v6-c-page__sidebar-body">
248
+ <nav
249
+ class="pf-v6-c-nav"
250
+ id="card-view-basic-example-expandable-nav"
251
+ aria-label="Global"
252
+ >
253
+ <ul class="pf-v6-c-nav__list" role="list">
254
+ <li class="pf-v6-c-nav__item pf-m-expanded">
255
+ <button
256
+ class="pf-v6-c-nav__link"
257
+ aria-expanded="true"
258
+ id="card-view-basic-example-expandable-nav-link1"
259
+ >
260
+ <span class="pf-v6-c-nav__link-text">System panel</span>
261
+ <span class="pf-v6-c-nav__toggle">
262
+ <span class="pf-v6-c-nav__toggle-icon">
263
+ <svg
264
+ class="pf-v6-svg"
265
+ viewBox="0 0 20 20"
266
+ fill="currentColor"
267
+ aria-hidden="true"
268
+ role="img"
269
+ width="1em"
270
+ height="1em"
271
+ >
272
+ <path
273
+ 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"
274
+ />
275
+ </svg>
276
+ </span>
214
277
  </span>
215
- </span>
216
- </button>
217
- <section
218
- class="pf-v6-c-nav__subnav"
219
- aria-labelledby="card-view-basic-example-expandable-nav-link1"
220
- >
221
- <ul class="pf-v6-c-nav__list" role="list">
222
- <li class="pf-v6-c-nav__item">
223
- <a href="#" class="pf-v6-c-nav__link">
224
- <span class="pf-v6-c-nav__link-text">Overview</span>
225
- </a>
226
- </li>
227
- <li class="pf-v6-c-nav__item">
228
- <a
229
- href="#"
230
- class="pf-v6-c-nav__link pf-m-current"
231
- aria-current="page"
232
- >
233
- <span class="pf-v6-c-nav__link-text">Resource usage</span>
234
- </a>
235
- </li>
236
- <li class="pf-v6-c-nav__item">
237
- <a href="#" class="pf-v6-c-nav__link">
238
- <span class="pf-v6-c-nav__link-text">Hypervisors</span>
239
- </a>
240
- </li>
241
- <li class="pf-v6-c-nav__item">
242
- <a href="#" class="pf-v6-c-nav__link">
243
- <span class="pf-v6-c-nav__link-text">Instances</span>
244
- </a>
245
- </li>
246
- <li class="pf-v6-c-nav__item">
247
- <a href="#" class="pf-v6-c-nav__link">
248
- <span class="pf-v6-c-nav__link-text">Volumes</span>
249
- </a>
250
- </li>
251
- <li class="pf-v6-c-nav__item">
252
- <a href="#" class="pf-v6-c-nav__link">
253
- <span class="pf-v6-c-nav__link-text">Networks</span>
254
- </a>
255
- </li>
256
- </ul>
257
- </section>
258
- </li>
259
- <li class="pf-v6-c-nav__item">
260
- <button
261
- class="pf-v6-c-nav__link"
262
- aria-expanded="false"
263
- id="card-view-basic-example-expandable-nav-link2"
264
- >
265
- <span class="pf-v6-c-nav__link-text">Policy</span>
266
- <span class="pf-v6-c-nav__toggle">
267
- <span class="pf-v6-c-nav__toggle-icon">
268
- <i class="fas fa-angle-right" aria-hidden="true"></i>
278
+ </button>
279
+ <section
280
+ class="pf-v6-c-nav__subnav"
281
+ aria-labelledby="card-view-basic-example-expandable-nav-link1"
282
+ >
283
+ <ul class="pf-v6-c-nav__list" role="list">
284
+ <li class="pf-v6-c-nav__item">
285
+ <a href="#" class="pf-v6-c-nav__link">
286
+ <span class="pf-v6-c-nav__link-text">Overview</span>
287
+ </a>
288
+ </li>
289
+ <li class="pf-v6-c-nav__item">
290
+ <a
291
+ href="#"
292
+ class="pf-v6-c-nav__link pf-m-current"
293
+ aria-current="page"
294
+ >
295
+ <span class="pf-v6-c-nav__link-text">Resource usage</span>
296
+ </a>
297
+ </li>
298
+ <li class="pf-v6-c-nav__item">
299
+ <a href="#" class="pf-v6-c-nav__link">
300
+ <span class="pf-v6-c-nav__link-text">Hypervisors</span>
301
+ </a>
302
+ </li>
303
+ <li class="pf-v6-c-nav__item">
304
+ <a href="#" class="pf-v6-c-nav__link">
305
+ <span class="pf-v6-c-nav__link-text">Instances</span>
306
+ </a>
307
+ </li>
308
+ <li class="pf-v6-c-nav__item">
309
+ <a href="#" class="pf-v6-c-nav__link">
310
+ <span class="pf-v6-c-nav__link-text">Volumes</span>
311
+ </a>
312
+ </li>
313
+ <li class="pf-v6-c-nav__item">
314
+ <a href="#" class="pf-v6-c-nav__link">
315
+ <span class="pf-v6-c-nav__link-text">Networks</span>
316
+ </a>
317
+ </li>
318
+ </ul>
319
+ </section>
320
+ </li>
321
+ <li class="pf-v6-c-nav__item">
322
+ <button
323
+ class="pf-v6-c-nav__link"
324
+ aria-expanded="false"
325
+ id="card-view-basic-example-expandable-nav-link2"
326
+ >
327
+ <span class="pf-v6-c-nav__link-text">Policy</span>
328
+ <span class="pf-v6-c-nav__toggle">
329
+ <span class="pf-v6-c-nav__toggle-icon">
330
+ <svg
331
+ class="pf-v6-svg"
332
+ viewBox="0 0 20 20"
333
+ fill="currentColor"
334
+ aria-hidden="true"
335
+ role="img"
336
+ width="1em"
337
+ height="1em"
338
+ >
339
+ <path
340
+ 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"
341
+ />
342
+ </svg>
343
+ </span>
269
344
  </span>
270
- </span>
271
- </button>
272
- <section
273
- class="pf-v6-c-nav__subnav"
274
- aria-labelledby="card-view-basic-example-expandable-nav-link2"
275
- hidden
276
- inert
277
- >
278
- <ul class="pf-v6-c-nav__list" role="list">
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">Subnav link 1</span>
282
- </a>
283
- </li>
284
- <li class="pf-v6-c-nav__item">
285
- <a href="#" class="pf-v6-c-nav__link">
286
- <span class="pf-v6-c-nav__link-text">Subnav link 2</span>
287
- </a>
288
- </li>
289
- </ul>
290
- </section>
291
- </li>
292
- <li class="pf-v6-c-nav__item">
293
- <button
294
- class="pf-v6-c-nav__link"
295
- aria-expanded="false"
296
- id="card-view-basic-example-expandable-nav-link3"
297
- >
298
- <span class="pf-v6-c-nav__link-text">Authentication</span>
299
- <span class="pf-v6-c-nav__toggle">
300
- <span class="pf-v6-c-nav__toggle-icon">
301
- <i class="fas fa-angle-right" aria-hidden="true"></i>
345
+ </button>
346
+ <section
347
+ class="pf-v6-c-nav__subnav"
348
+ aria-labelledby="card-view-basic-example-expandable-nav-link2"
349
+ hidden
350
+ inert
351
+ >
352
+ <ul class="pf-v6-c-nav__list" role="list">
353
+ <li class="pf-v6-c-nav__item">
354
+ <a href="#" class="pf-v6-c-nav__link">
355
+ <span class="pf-v6-c-nav__link-text">Subnav link 1</span>
356
+ </a>
357
+ </li>
358
+ <li class="pf-v6-c-nav__item">
359
+ <a href="#" class="pf-v6-c-nav__link">
360
+ <span class="pf-v6-c-nav__link-text">Subnav link 2</span>
361
+ </a>
362
+ </li>
363
+ </ul>
364
+ </section>
365
+ </li>
366
+ <li class="pf-v6-c-nav__item">
367
+ <button
368
+ class="pf-v6-c-nav__link"
369
+ aria-expanded="false"
370
+ id="card-view-basic-example-expandable-nav-link3"
371
+ >
372
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
373
+ <span class="pf-v6-c-nav__toggle">
374
+ <span class="pf-v6-c-nav__toggle-icon">
375
+ <svg
376
+ class="pf-v6-svg"
377
+ viewBox="0 0 20 20"
378
+ fill="currentColor"
379
+ aria-hidden="true"
380
+ role="img"
381
+ width="1em"
382
+ height="1em"
383
+ >
384
+ <path
385
+ 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"
386
+ />
387
+ </svg>
388
+ </span>
302
389
  </span>
303
- </span>
304
- </button>
305
- <section
306
- class="pf-v6-c-nav__subnav"
307
- aria-labelledby="card-view-basic-example-expandable-nav-link3"
308
- hidden
309
- inert
310
- >
311
- <ul class="pf-v6-c-nav__list" role="list">
312
- <li class="pf-v6-c-nav__item">
313
- <a href="#" class="pf-v6-c-nav__link">
314
- <span class="pf-v6-c-nav__link-text">Subnav link 1</span>
315
- </a>
316
- </li>
317
- <li class="pf-v6-c-nav__item">
318
- <a href="#" class="pf-v6-c-nav__link">
319
- <span class="pf-v6-c-nav__link-text">Subnav link 2</span>
320
- </a>
321
- </li>
322
- </ul>
323
- </section>
324
- </li>
325
- </ul>
326
- </nav>
390
+ </button>
391
+ <section
392
+ class="pf-v6-c-nav__subnav"
393
+ aria-labelledby="card-view-basic-example-expandable-nav-link3"
394
+ hidden
395
+ inert
396
+ >
397
+ <ul class="pf-v6-c-nav__list" role="list">
398
+ <li class="pf-v6-c-nav__item">
399
+ <a href="#" class="pf-v6-c-nav__link">
400
+ <span class="pf-v6-c-nav__link-text">Subnav link 1</span>
401
+ </a>
402
+ </li>
403
+ <li class="pf-v6-c-nav__item">
404
+ <a href="#" class="pf-v6-c-nav__link">
405
+ <span class="pf-v6-c-nav__link-text">Subnav link 2</span>
406
+ </a>
407
+ </li>
408
+ </ul>
409
+ </section>
410
+ </li>
411
+ </ul>
412
+ </nav>
413
+ </div>
327
414
  </div>
328
415
  </div>
329
416
  <div class="pf-v6-c-page__main-container" tabindex="-1">
@@ -341,21 +428,57 @@ section: patterns
341
428
  </li>
342
429
  <li class="pf-v6-c-breadcrumb__item">
343
430
  <span class="pf-v6-c-breadcrumb__item-divider">
344
- <i class="fas fa-angle-right" aria-hidden="true"></i>
431
+ <svg
432
+ class="pf-v6-svg"
433
+ viewBox="0 0 20 20"
434
+ fill="currentColor"
435
+ aria-hidden="true"
436
+ role="img"
437
+ width="1em"
438
+ height="1em"
439
+ >
440
+ <path
441
+ 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"
442
+ />
443
+ </svg>
345
444
  </span>
346
445
 
347
446
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
348
447
  </li>
349
448
  <li class="pf-v6-c-breadcrumb__item">
350
449
  <span class="pf-v6-c-breadcrumb__item-divider">
351
- <i class="fas fa-angle-right" aria-hidden="true"></i>
450
+ <svg
451
+ class="pf-v6-svg"
452
+ viewBox="0 0 20 20"
453
+ fill="currentColor"
454
+ aria-hidden="true"
455
+ role="img"
456
+ width="1em"
457
+ height="1em"
458
+ >
459
+ <path
460
+ 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"
461
+ />
462
+ </svg>
352
463
  </span>
353
464
 
354
465
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
355
466
  </li>
356
467
  <li class="pf-v6-c-breadcrumb__item">
357
468
  <span class="pf-v6-c-breadcrumb__item-divider">
358
- <i class="fas fa-angle-right" aria-hidden="true"></i>
469
+ <svg
470
+ class="pf-v6-svg"
471
+ viewBox="0 0 20 20"
472
+ fill="currentColor"
473
+ aria-hidden="true"
474
+ role="img"
475
+ width="1em"
476
+ height="1em"
477
+ >
478
+ <path
479
+ 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"
480
+ />
481
+ </svg>
359
482
  </span>
360
483
 
361
484
  <a
@@ -368,9 +491,15 @@ section: patterns
368
491
  </nav>
369
492
  </div>
370
493
  </section>
371
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
494
+ <section
495
+ class="pf-v6-c-page__main-section pf-m-limit-width"
496
+ aria-labelledby="main-title"
497
+ >
372
498
  <div class="pf-v6-c-page__main-body">
373
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
499
+ <h1
500
+ class="pf-v6-c-content--h1 pf-m-page-title"
501
+ id="main-title"
502
+ >Main title</h1>
374
503
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
375
504
  </div>
376
505
  </section>
@@ -391,7 +520,19 @@ section: patterns
391
520
  aria-controls="card-view-basic-example-toolbar-expandable-content"
392
521
  >
393
522
  <span class="pf-v6-c-menu-toggle__icon">
394
- <i class="fas fa-filter" aria-hidden="true"></i>
523
+ <svg
524
+ class="pf-v6-svg"
525
+ viewBox="0 0 32 32"
526
+ fill="currentColor"
527
+ aria-hidden="true"
528
+ role="img"
529
+ width="1em"
530
+ height="1em"
531
+ >
532
+ <path
533
+ 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"
534
+ />
535
+ </svg>
395
536
  </span>
396
537
  </button>
397
538
  </div>
@@ -421,10 +562,19 @@ section: patterns
421
562
  >
422
563
  <span class="pf-v6-c-menu-toggle__controls">
423
564
  <span class="pf-v6-c-menu-toggle__toggle-icon">
424
- <i
425
- class="fas fa-caret-down fa-fw"
565
+ <svg
566
+ class="pf-v6-svg"
567
+ viewBox="0 0 20 20"
568
+ fill="currentColor"
426
569
  aria-hidden="true"
427
- ></i>
570
+ role="img"
571
+ width="1em"
572
+ height="1em"
573
+ >
574
+ <path
575
+ 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"
576
+ />
577
+ </svg>
428
578
  </span>
429
579
  </span>
430
580
  </button>
@@ -441,7 +591,19 @@ section: patterns
441
591
  <span class="pf-v6-c-menu-toggle__text">Status</span>
442
592
  <span class="pf-v6-c-menu-toggle__controls">
443
593
  <span class="pf-v6-c-menu-toggle__toggle-icon">
444
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
594
+ <svg
595
+ class="pf-v6-svg"
596
+ viewBox="0 0 20 20"
597
+ fill="currentColor"
598
+ aria-hidden="true"
599
+ role="img"
600
+ width="1em"
601
+ height="1em"
602
+ >
603
+ <path
604
+ 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"
605
+ />
606
+ </svg>
445
607
  </span>
446
608
  </span>
447
609
  </button>
@@ -475,7 +637,19 @@ section: patterns
475
637
  id="card-view-basic-example-toolbar-overflow-menu-toggle"
476
638
  >
477
639
  <span class="pf-v6-c-menu-toggle__icon">
478
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
640
+ <svg
641
+ class="pf-v6-svg"
642
+ viewBox="0 0 32 32"
643
+ fill="currentColor"
644
+ aria-hidden="true"
645
+ role="img"
646
+ width="1em"
647
+ height="1em"
648
+ >
649
+ <path
650
+ 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"
651
+ />
652
+ </svg>
479
653
  </span>
480
654
  </button>
481
655
  </div>
@@ -488,7 +662,6 @@ section: patterns
488
662
  class="pf-v6-c-menu-toggle pf-m-text pf-m-plain"
489
663
  type="button"
490
664
  aria-expanded="false"
491
- aria-label="Menu toggle"
492
665
  id="card-view-basic-example-toolbar-top-pagination"
493
666
  >
494
667
  <span class="pf-v6-c-menu-toggle__text">
@@ -497,10 +670,19 @@ section: patterns
497
670
  </span>
498
671
  <span class="pf-v6-c-menu-toggle__controls">
499
672
  <span class="pf-v6-c-menu-toggle__toggle-icon">
500
- <i
501
- class="fas fa-caret-down fa-fw"
673
+ <svg
674
+ class="pf-v6-svg"
675
+ viewBox="0 0 20 20"
676
+ fill="currentColor"
502
677
  aria-hidden="true"
503
- ></i>
678
+ role="img"
679
+ width="1em"
680
+ height="1em"
681
+ >
682
+ <path
683
+ 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"
684
+ />
685
+ </svg>
504
686
  </span>
505
687
  </span>
506
688
  </button>
@@ -517,7 +699,19 @@ section: patterns
517
699
  aria-label="Go to previous page"
518
700
  >
519
701
  <span class="pf-v6-c-button__icon">
520
- <i class="fas fa-angle-left" aria-hidden="true"></i>
702
+ <svg
703
+ class="pf-v6-svg"
704
+ viewBox="0 0 256 512"
705
+ fill="currentColor"
706
+ aria-hidden="true"
707
+ role="img"
708
+ width="1em"
709
+ height="1em"
710
+ >
711
+ <path
712
+ 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"
713
+ />
714
+ </svg>
521
715
  </span>
522
716
  </button>
523
717
  </div>
@@ -528,7 +722,19 @@ section: patterns
528
722
  aria-label="Go to next page"
529
723
  >
530
724
  <span class="pf-v6-c-button__icon">
531
- <i class="fas fa-angle-right" aria-hidden="true"></i>
725
+ <svg
726
+ class="pf-v6-svg"
727
+ viewBox="0 0 256 512"
728
+ fill="currentColor"
729
+ aria-hidden="true"
730
+ role="img"
731
+ width="1em"
732
+ height="1em"
733
+ >
734
+ <path
735
+ 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"
736
+ />
737
+ </svg>
532
738
  </span>
533
739
  </button>
534
740
  </div>
@@ -556,7 +762,21 @@ section: patterns
556
762
  <div class="pf-v6-l-bullseye">
557
763
  <div class="pf-v6-c-empty-state pf-m-xs">
558
764
  <div class="pf-v6-c-empty-state__content">
559
- <i class="fas fa-plus-circle pf-v6-c-empty-state__icon"></i>
765
+ <div class="pf-v6-c-empty-state__icon">
766
+ <svg
767
+ class="pf-v6-svg"
768
+ viewBox="0 0 32 32"
769
+ fill="currentColor"
770
+ aria-hidden="true"
771
+ role="img"
772
+ width="1em"
773
+ height="1em"
774
+ >
775
+ <path
776
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm7 16.125h-5.875V23a1.125 1.125 0 0 1-2.25 0v-5.875H9a1.125 1.125 0 0 1 0-2.25h5.875V9a1.125 1.125 0 0 1 2.25 0v5.875H23a1.125 1.125 0 0 1 0 2.25Z"
777
+ />
778
+ </svg>
779
+ </div>
560
780
  <div class="pf-v6-c-card__title">
561
781
  <h2
562
782
  class="pf-v6-c-card__title-text pf-m-md"
@@ -584,7 +804,19 @@ section: patterns
584
804
  id="card-view-basic-example-gallery-card-1-toggle"
585
805
  >
586
806
  <span class="pf-v6-c-menu-toggle__icon">
587
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
807
+ <svg
808
+ class="pf-v6-svg"
809
+ viewBox="0 0 32 32"
810
+ fill="currentColor"
811
+ aria-hidden="true"
812
+ role="img"
813
+ width="1em"
814
+ height="1em"
815
+ >
816
+ <path
817
+ 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"
818
+ />
819
+ </svg>
588
820
  </span>
589
821
  </button>
590
822
  <div class="pf-v6-c-check pf-m-standalone">
@@ -630,7 +862,19 @@ section: patterns
630
862
  id="card-view-basic-example-gallery-card-2-toggle"
631
863
  >
632
864
  <span class="pf-v6-c-menu-toggle__icon">
633
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
865
+ <svg
866
+ class="pf-v6-svg"
867
+ viewBox="0 0 32 32"
868
+ fill="currentColor"
869
+ aria-hidden="true"
870
+ role="img"
871
+ width="1em"
872
+ height="1em"
873
+ >
874
+ <path
875
+ 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"
876
+ />
877
+ </svg>
634
878
  </span>
635
879
  </button>
636
880
  <div class="pf-v6-c-check pf-m-standalone">
@@ -676,7 +920,19 @@ section: patterns
676
920
  id="card-view-basic-example-gallery-card-3-toggle"
677
921
  >
678
922
  <span class="pf-v6-c-menu-toggle__icon">
679
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
923
+ <svg
924
+ class="pf-v6-svg"
925
+ viewBox="0 0 32 32"
926
+ fill="currentColor"
927
+ aria-hidden="true"
928
+ role="img"
929
+ width="1em"
930
+ height="1em"
931
+ >
932
+ <path
933
+ 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"
934
+ />
935
+ </svg>
680
936
  </span>
681
937
  </button>
682
938
  <div class="pf-v6-c-check pf-m-standalone">
@@ -722,7 +978,19 @@ section: patterns
722
978
  id="card-view-basic-example-gallery-card-4-toggle"
723
979
  >
724
980
  <span class="pf-v6-c-menu-toggle__icon">
725
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
981
+ <svg
982
+ class="pf-v6-svg"
983
+ viewBox="0 0 32 32"
984
+ fill="currentColor"
985
+ aria-hidden="true"
986
+ role="img"
987
+ width="1em"
988
+ height="1em"
989
+ >
990
+ <path
991
+ 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"
992
+ />
993
+ </svg>
726
994
  </span>
727
995
  </button>
728
996
  <div class="pf-v6-c-check pf-m-standalone">
@@ -768,7 +1036,19 @@ section: patterns
768
1036
  id="card-view-basic-example-gallery-card-5-toggle"
769
1037
  >
770
1038
  <span class="pf-v6-c-menu-toggle__icon">
771
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1039
+ <svg
1040
+ class="pf-v6-svg"
1041
+ viewBox="0 0 32 32"
1042
+ fill="currentColor"
1043
+ aria-hidden="true"
1044
+ role="img"
1045
+ width="1em"
1046
+ height="1em"
1047
+ >
1048
+ <path
1049
+ 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"
1050
+ />
1051
+ </svg>
772
1052
  </span>
773
1053
  </button>
774
1054
  <div class="pf-v6-c-check pf-m-standalone">
@@ -814,7 +1094,19 @@ section: patterns
814
1094
  id="card-view-basic-example-gallery-card-6-toggle"
815
1095
  >
816
1096
  <span class="pf-v6-c-menu-toggle__icon">
817
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1097
+ <svg
1098
+ class="pf-v6-svg"
1099
+ viewBox="0 0 32 32"
1100
+ fill="currentColor"
1101
+ aria-hidden="true"
1102
+ role="img"
1103
+ width="1em"
1104
+ height="1em"
1105
+ >
1106
+ <path
1107
+ 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"
1108
+ />
1109
+ </svg>
818
1110
  </span>
819
1111
  </button>
820
1112
  <div class="pf-v6-c-check pf-m-standalone">
@@ -861,7 +1153,19 @@ section: patterns
861
1153
  id="card-view-basic-example-gallery-card-7-toggle"
862
1154
  >
863
1155
  <span class="pf-v6-c-menu-toggle__icon">
864
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1156
+ <svg
1157
+ class="pf-v6-svg"
1158
+ viewBox="0 0 32 32"
1159
+ fill="currentColor"
1160
+ aria-hidden="true"
1161
+ role="img"
1162
+ width="1em"
1163
+ height="1em"
1164
+ >
1165
+ <path
1166
+ 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"
1167
+ />
1168
+ </svg>
865
1169
  </span>
866
1170
  </button>
867
1171
  <div class="pf-v6-c-check pf-m-standalone">
@@ -907,7 +1211,19 @@ section: patterns
907
1211
  id="card-view-basic-example-gallery-card-8-toggle"
908
1212
  >
909
1213
  <span class="pf-v6-c-menu-toggle__icon">
910
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1214
+ <svg
1215
+ class="pf-v6-svg"
1216
+ viewBox="0 0 32 32"
1217
+ fill="currentColor"
1218
+ aria-hidden="true"
1219
+ role="img"
1220
+ width="1em"
1221
+ height="1em"
1222
+ >
1223
+ <path
1224
+ 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"
1225
+ />
1226
+ </svg>
911
1227
  </span>
912
1228
  </button>
913
1229
  <div class="pf-v6-c-check pf-m-standalone">
@@ -953,7 +1269,19 @@ section: patterns
953
1269
  id="card-view-basic-example-gallery-card-9-toggle"
954
1270
  >
955
1271
  <span class="pf-v6-c-menu-toggle__icon">
956
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1272
+ <svg
1273
+ class="pf-v6-svg"
1274
+ viewBox="0 0 32 32"
1275
+ fill="currentColor"
1276
+ aria-hidden="true"
1277
+ role="img"
1278
+ width="1em"
1279
+ height="1em"
1280
+ >
1281
+ <path
1282
+ 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"
1283
+ />
1284
+ </svg>
957
1285
  </span>
958
1286
  </button>
959
1287
  <div class="pf-v6-c-check pf-m-standalone">
@@ -1000,7 +1328,19 @@ section: patterns
1000
1328
  id="card-view-basic-example-gallery-card-10-toggle"
1001
1329
  >
1002
1330
  <span class="pf-v6-c-menu-toggle__icon">
1003
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1331
+ <svg
1332
+ class="pf-v6-svg"
1333
+ viewBox="0 0 32 32"
1334
+ fill="currentColor"
1335
+ aria-hidden="true"
1336
+ role="img"
1337
+ width="1em"
1338
+ height="1em"
1339
+ >
1340
+ <path
1341
+ 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"
1342
+ />
1343
+ </svg>
1004
1344
  </span>
1005
1345
  </button>
1006
1346
  <div class="pf-v6-c-check pf-m-standalone">
@@ -1030,13 +1370,12 @@ section: patterns
1030
1370
  </div>
1031
1371
  </div>
1032
1372
  </section>
1033
- <div class="pf-v6-c-pagination pf-m-bottom pf-m-sticky">
1373
+ <div class="pf-v6-c-pagination pf-m-sticky pf-m-bottom">
1034
1374
  <div class="pf-v6-c-pagination__page-menu">
1035
1375
  <button
1036
1376
  class="pf-v6-c-menu-toggle pf-m-top pf-m-text pf-m-plain"
1037
1377
  type="button"
1038
1378
  aria-expanded="false"
1039
- aria-label="Menu toggle"
1040
1379
  id="pagination-menu-toggle-bottom-example"
1041
1380
  >
1042
1381
  <span class="pf-v6-c-menu-toggle__text">
@@ -1045,7 +1384,19 @@ section: patterns
1045
1384
  </span>
1046
1385
  <span class="pf-v6-c-menu-toggle__controls">
1047
1386
  <span class="pf-v6-c-menu-toggle__toggle-icon">
1048
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
1387
+ <svg
1388
+ class="pf-v6-svg"
1389
+ viewBox="0 0 20 20"
1390
+ fill="currentColor"
1391
+ aria-hidden="true"
1392
+ role="img"
1393
+ width="1em"
1394
+ height="1em"
1395
+ >
1396
+ <path
1397
+ 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"
1398
+ />
1399
+ </svg>
1049
1400
  </span>
1050
1401
  </span>
1051
1402
  </button>
@@ -1059,7 +1410,19 @@ section: patterns
1059
1410
  aria-label="Go to first page"
1060
1411
  >
1061
1412
  <span class="pf-v6-c-button__icon">
1062
- <i class="fas fa-angle-double-left" aria-hidden="true"></i>
1413
+ <svg
1414
+ class="pf-v6-svg"
1415
+ viewBox="0 0 448 512"
1416
+ fill="currentColor"
1417
+ aria-hidden="true"
1418
+ role="img"
1419
+ width="1em"
1420
+ height="1em"
1421
+ >
1422
+ <path
1423
+ 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"
1424
+ />
1425
+ </svg>
1063
1426
  </span>
1064
1427
  </button>
1065
1428
  </div>
@@ -1071,7 +1434,19 @@ section: patterns
1071
1434
  aria-label="Go to previous page"
1072
1435
  >
1073
1436
  <span class="pf-v6-c-button__icon">
1074
- <i class="fas fa-angle-left" aria-hidden="true"></i>
1437
+ <svg
1438
+ class="pf-v6-svg"
1439
+ viewBox="0 0 256 512"
1440
+ fill="currentColor"
1441
+ aria-hidden="true"
1442
+ role="img"
1443
+ width="1em"
1444
+ height="1em"
1445
+ >
1446
+ <path
1447
+ 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"
1448
+ />
1449
+ </svg>
1075
1450
  </span>
1076
1451
  </button>
1077
1452
  </div>
@@ -1094,7 +1469,19 @@ section: patterns
1094
1469
  aria-label="Go to next page"
1095
1470
  >
1096
1471
  <span class="pf-v6-c-button__icon">
1097
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1472
+ <svg
1473
+ class="pf-v6-svg"
1474
+ viewBox="0 0 256 512"
1475
+ fill="currentColor"
1476
+ aria-hidden="true"
1477
+ role="img"
1478
+ width="1em"
1479
+ height="1em"
1480
+ >
1481
+ <path
1482
+ 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"
1483
+ />
1484
+ </svg>
1098
1485
  </span>
1099
1486
  </button>
1100
1487
  </div>
@@ -1106,7 +1493,19 @@ section: patterns
1106
1493
  aria-label="Go to last page"
1107
1494
  >
1108
1495
  <span class="pf-v6-c-button__icon">
1109
- <i class="fas fa-angle-double-right" aria-hidden="true"></i>
1496
+ <svg
1497
+ class="pf-v6-svg"
1498
+ viewBox="0 0 448 512"
1499
+ fill="currentColor"
1500
+ aria-hidden="true"
1501
+ role="img"
1502
+ width="1em"
1503
+ height="1em"
1504
+ >
1505
+ <path
1506
+ 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"
1507
+ />
1508
+ </svg>
1110
1509
  </span>
1111
1510
  </button>
1112
1511
  </div>