@patternfly/patternfly 6.5.0-prerelease.5 → 6.5.0-prerelease.50

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 (376) 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.png +0 -0
  10. package/assets/images/compass--wallpaper-light.png +0 -0
  11. package/base/normalize.scss +7 -0
  12. package/base/patternfly-common.css +50 -0
  13. package/base/patternfly-common.scss +59 -0
  14. package/base/patternfly-svg-icons.css +11 -0
  15. package/base/patternfly-svg-icons.scss +14 -0
  16. package/base/patternfly-variables.css +345 -14
  17. package/base/patternfly-variables.scss +40 -0
  18. package/base/tokens/tokens-dark.scss +51 -3
  19. package/base/tokens/tokens-default.scss +67 -13
  20. package/base/tokens/tokens-glass-dark.scss +9 -0
  21. package/base/tokens/tokens-glass.scss +9 -0
  22. package/base/tokens/tokens-local.scss +16 -0
  23. package/base/tokens/tokens-palette.scss +3 -1
  24. package/base/tokens/tokens-redhat-dark.scss +14 -0
  25. package/base/tokens/tokens-redhat-glass-dark.scss +16 -0
  26. package/base/tokens/tokens-redhat-glass.scss +15 -0
  27. package/base/tokens/tokens-redhat-highcontrast-dark.scss +47 -0
  28. package/base/tokens/tokens-redhat-highcontrast.scss +127 -0
  29. package/base/tokens/tokens-redhat.scss +15 -0
  30. package/components/AboutModalBox/about-modal-box.css +36 -26
  31. package/components/Accordion/accordion.css +17 -14
  32. package/components/Accordion/accordion.scss +1 -2
  33. package/components/ActionList/action-list.css +2 -0
  34. package/components/ActionList/action-list.scss +2 -0
  35. package/components/Alert/alert.css +7 -5
  36. package/components/Alert/alert.scss +2 -1
  37. package/components/Avatar/avatar.css +12 -4
  38. package/components/BackgroundImage/background-image.css +6 -3
  39. package/components/Banner/banner.css +8 -6
  40. package/components/Brand/brand.css +3 -1
  41. package/components/Breadcrumb/breadcrumb.css +4 -3
  42. package/components/Button/button.css +117 -14
  43. package/components/Button/button.scss +127 -10
  44. package/components/CalendarMonth/calendar-month.css +4 -3
  45. package/components/Card/card.css +20 -7
  46. package/components/Card/card.scss +16 -2
  47. package/components/ClipboardCopy/clipboard-copy.css +7 -6
  48. package/components/ClipboardCopy/clipboard-copy.scss +3 -3
  49. package/components/CodeEditor/code-editor.css +1 -1
  50. package/components/CodeEditor/code-editor.scss +1 -1
  51. package/components/Compass/compass.css +320 -0
  52. package/components/Compass/compass.scss +350 -0
  53. package/components/DataList/data-list.css +34 -23
  54. package/components/DataList/data-list.scss +7 -2
  55. package/components/DescriptionList/description-list-order.scss +5 -1
  56. package/components/DescriptionList/description-list.css +7 -5
  57. package/components/DescriptionList/description-list.scss +5 -1
  58. package/components/Divider/divider.css +7 -5
  59. package/components/Drawer/drawer.css +110 -56
  60. package/components/Drawer/drawer.scss +69 -9
  61. package/components/DualListSelector/dual-list-selector.css +18 -12
  62. package/components/DualListSelector/dual-list-selector.scss +1 -1
  63. package/components/ExpandableSection/expandable-section.css +21 -16
  64. package/components/ExpandableSection/expandable-section.scss +6 -3
  65. package/components/Form/form.css +2 -2
  66. package/components/Form/form.scss +2 -2
  67. package/components/FormControl/form-control.css +3 -3
  68. package/components/FormControl/form-control.scss +3 -3
  69. package/components/Hero/hero.css +74 -0
  70. package/components/Hero/hero.scss +86 -0
  71. package/components/JumpLinks/jump-links.css +5 -4
  72. package/components/JumpLinks/jump-links.scss +6 -2
  73. package/components/Label/label-group.css +2 -2
  74. package/components/Label/label-group.scss +2 -2
  75. package/components/Label/label.css +4 -3
  76. package/components/Login/login.css +51 -37
  77. package/components/Masthead/masthead.css +70 -16
  78. package/components/Masthead/masthead.scss +54 -1
  79. package/components/Menu/menu.css +23 -14
  80. package/components/MenuToggle/menu-toggle.css +5 -1
  81. package/components/MenuToggle/menu-toggle.scss +6 -1
  82. package/components/ModalBox/modal-box.css +9 -7
  83. package/components/ModalBox/modal-box.scss +2 -2
  84. package/components/Nav/nav.css +74 -11
  85. package/components/Nav/nav.scss +77 -5
  86. package/components/NotificationDrawer/notification-drawer.css +19 -9
  87. package/components/NotificationDrawer/notification-drawer.scss +14 -5
  88. package/components/Page/page.css +55 -29
  89. package/components/Page/page.scss +44 -5
  90. package/components/Pagination/pagination.scss +5 -1
  91. package/components/ProgressStepper/progress-stepper.scss +5 -1
  92. package/components/Sidebar/sidebar.css +1 -1
  93. package/components/Sidebar/sidebar.scss +7 -3
  94. package/components/Skeleton/skeleton.css +16 -15
  95. package/components/Slider/slider.css +32 -18
  96. package/components/Switch/switch.css +4 -2
  97. package/components/Switch/switch.scss +1 -1
  98. package/components/Table/table-grid.css +28 -36
  99. package/components/Table/table-grid.scss +4 -4
  100. package/components/Table/table-tree-view.css +4 -2
  101. package/components/Table/table.css +33 -29
  102. package/components/Table/table.scss +2 -2
  103. package/components/Tabs/tabs.css +35 -18
  104. package/components/Tabs/tabs.scss +35 -7
  105. package/components/TextInputGroup/text-input-group.css +2 -2
  106. package/components/TextInputGroup/text-input-group.scss +2 -2
  107. package/components/ToggleGroup/toggle-group.css +34 -17
  108. package/components/ToggleGroup/toggle-group.scss +36 -20
  109. package/components/Toolbar/toolbar.css +47 -15
  110. package/components/Toolbar/toolbar.scss +34 -6
  111. package/components/TreeView/tree-view.css +45 -14
  112. package/components/TreeView/tree-view.scss +32 -1
  113. package/components/Wizard/wizard.css +21 -17
  114. package/components/Wizard/wizard.scss +4 -4
  115. package/components/_index.css +1602 -676
  116. package/components/_index.scss +3 -1
  117. package/docs/components/AboutModalBox/examples/AboutModalBox.md +13 -1
  118. package/docs/components/Accordion/examples/Accordion.md +390 -30
  119. package/docs/components/ActionList/examples/ActionList.md +143 -11
  120. package/docs/components/Alert/examples/Alert.md +678 -54
  121. package/docs/components/Avatar/examples/Avatar.md +4 -4
  122. package/docs/components/BackToTop/examples/BackToTop.md +13 -1
  123. package/docs/components/Banner/examples/Banner.md +65 -5
  124. package/docs/components/Brand/examples/Brand.md +2 -2
  125. package/docs/components/Breadcrumb/examples/Breadcrumb.md +299 -23
  126. package/docs/components/Button/examples/Button.md +2217 -241
  127. package/docs/components/CalendarMonth/examples/CalendarMonth.md +104 -8
  128. package/docs/components/Card/examples/Card.md +206 -4
  129. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +286 -22
  130. package/docs/components/CodeBlock/examples/CodeBlock.md +104 -8
  131. package/docs/components/CodeEditor/examples/CodeEditor.md +195 -15
  132. package/docs/components/Compass/examples/Compass.css +17 -0
  133. package/docs/components/Compass/examples/Compass.md +119 -0
  134. package/docs/components/DataList/examples/DataList.md +405 -205
  135. package/docs/components/DatePicker/examples/DatePicker.md +78 -6
  136. package/docs/components/DescriptionList/examples/DescriptionList.md +327 -27
  137. package/docs/components/Divider/examples/Divider.md +2 -2
  138. package/docs/components/Drawer/examples/Drawer.md +353 -35
  139. package/docs/components/DualListSelector/examples/DualListSelector.md +1013 -143
  140. package/docs/components/ExpandableSection/examples/ExpandableSection.md +91 -7
  141. package/docs/components/Form/examples/Form.md +78 -6
  142. package/docs/components/Hero/examples/Hero.md +25 -0
  143. package/docs/components/Icon/examples/Icon.md +92 -8
  144. package/docs/components/InlineEdit/examples/InlineEdit.md +312 -24
  145. package/docs/components/InputGroup/examples/InputGroup.md +27 -3
  146. package/docs/components/JumpLinks/examples/JumpLinks.md +54 -6
  147. package/docs/components/Label/examples/Label.md +2834 -218
  148. package/docs/components/Login/examples/Login.md +26 -2
  149. package/docs/components/Masthead/examples/masthead.md +80 -1
  150. package/docs/components/Menu/examples/Menu.md +1458 -114
  151. package/docs/components/MenuToggle/examples/MenuToggle.md +53 -1
  152. package/docs/components/ModalBox/examples/ModalBox.md +287 -23
  153. package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +156 -12
  154. package/docs/components/Nav/examples/Navigation.md +798 -58
  155. package/docs/components/NotificationDrawer/examples/NotificationDrawer.md +598 -46
  156. package/docs/components/OverflowMenu/examples/overflow-menu.md +78 -6
  157. package/docs/components/Page/examples/Page.md +51 -2
  158. package/docs/components/Pagination/examples/Pagination.md +627 -51
  159. package/docs/components/Popover/examples/Popover.md +286 -22
  160. package/docs/components/ProgressStepper/examples/ProgressStepper.md +275 -23
  161. package/docs/components/Sidebar/examples/Sidebar.md +1 -1
  162. package/docs/components/Slider/examples/Slider.md +52 -4
  163. package/docs/components/Table/examples/Table.md +875 -70
  164. package/docs/components/Tabs/examples/Tabs.md +4127 -320
  165. package/docs/components/TextInputGroup/examples/TextInputGroup.md +600 -48
  166. package/docs/components/ToggleGroup/examples/toggle-group.md +195 -15
  167. package/docs/components/Toolbar/examples/Toolbar.md +490 -42
  168. package/docs/components/TreeView/examples/TreeView.md +1390 -130
  169. package/docs/components/Wizard/examples/Wizard.md +492 -72
  170. package/docs/demos/AboutModal/examples/AboutModal.md +57 -9
  171. package/docs/demos/Alert/examples/Alert.md +236 -32
  172. package/docs/demos/BackToTop/examples/BackToTop.md +57 -9
  173. package/docs/demos/Banner/examples/Banner.md +88 -16
  174. package/docs/demos/Button/examples/Button.md +13 -1
  175. package/docs/demos/Card/examples/Card.md +399 -42
  176. package/docs/demos/CardView/examples/CardView.md +161 -17
  177. package/docs/demos/Compass/examples/Compass.md +6836 -0
  178. package/docs/demos/Dashboard/examples/Dashboard.md +173 -26
  179. package/docs/demos/DataList/examples/DataList.md +566 -65
  180. package/docs/demos/DescriptionList/examples/DescriptionList.md +156 -27
  181. package/docs/demos/Drawer/examples/Drawer.md +216 -45
  182. package/docs/demos/Form/examples/BasicForms.md +273 -21
  183. package/docs/demos/JumpLinks/examples/JumpLinks.md +272 -59
  184. package/docs/demos/Masthead/examples/Masthead.md +458 -89
  185. package/docs/demos/Modal/examples/Modal.md +342 -57
  186. package/docs/demos/Nav/examples/Nav.md +660 -87
  187. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +1088 -140
  188. package/docs/demos/Page/examples/Page.md +618 -123
  189. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +13 -1
  190. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +52 -4
  191. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +691 -113
  192. package/docs/demos/Skeleton/examples/Skeleton.md +44 -8
  193. package/docs/demos/Table/examples/Table.md +3924 -256
  194. package/docs/demos/Tabs/examples/Tabs.md +407 -65
  195. package/docs/demos/Toolbar/examples/Toolbar.md +502 -52
  196. package/docs/demos/Wizard/examples/Wizard.md +796 -130
  197. package/docs/layouts/Bullseye/examples/Bullseye.css +2 -2
  198. package/docs/layouts/Bullseye/examples/Bullseye.md +2 -1
  199. package/docs/layouts/Flex/examples/Flex.css +3 -3
  200. package/docs/layouts/Flex/examples/Flex.md +3 -2
  201. package/docs/layouts/Gallery/examples/Gallery.css +2 -2
  202. package/docs/layouts/Gallery/examples/Gallery.md +4 -3
  203. package/docs/layouts/Grid/examples/Grid.css +1 -1
  204. package/docs/layouts/Grid/examples/Grid.md +6 -5
  205. package/docs/layouts/Level/examples/Level.css +3 -3
  206. package/docs/layouts/Level/examples/Level.md +2 -1
  207. package/docs/layouts/Split/examples/Split.css +1 -1
  208. package/docs/layouts/Split/examples/Split.md +2 -1
  209. package/docs/layouts/Stack/examples/Stack.css +3 -3
  210. package/docs/layouts/Stack/examples/Stack.md +2 -1
  211. package/docs/utilities/Accessibility/examples/Accessibility.md +3 -2
  212. package/docs/utilities/Alignment/examples/Alignment.css +4 -4
  213. package/docs/utilities/Alignment/examples/Alignment.md +3 -2
  214. package/docs/utilities/BackgroundColor/examples/BackgroundColor.md +5 -4
  215. package/docs/utilities/BoxShadow/examples/box-shadow.css +2 -2
  216. package/docs/utilities/BoxShadow/examples/box-shadow.md +2 -1
  217. package/docs/utilities/Display/examples/Display.css +1 -1
  218. package/docs/utilities/Display/examples/Display.md +3 -2
  219. package/docs/utilities/Flex/examples/Flex.css +7 -7
  220. package/docs/utilities/Flex/examples/Flex.md +3 -2
  221. package/docs/utilities/Float/examples/Float.css +2 -2
  222. package/docs/utilities/Float/examples/Float.md +3 -2
  223. package/docs/utilities/Sizing/examples/Sizing.md +8 -7
  224. package/docs/utilities/Spacing/examples/Spacing.css +2 -2
  225. package/docs/utilities/Spacing/examples/Spacing.md +3 -2
  226. package/docs/utilities/Text/examples/Text.md +5 -4
  227. package/icons/PfIcons/add-circle-o.svg +4 -0
  228. package/icons/PfIcons/ansible-tower.svg +4 -0
  229. package/icons/PfIcons/applications.svg +4 -0
  230. package/icons/PfIcons/arrow.svg +4 -0
  231. package/icons/PfIcons/asleep.svg +4 -0
  232. package/icons/PfIcons/attention-bell.svg +4 -0
  233. package/icons/PfIcons/automation.svg +4 -0
  234. package/icons/PfIcons/bell.svg +4 -0
  235. package/icons/PfIcons/blueprint.svg +4 -0
  236. package/icons/PfIcons/build.svg +4 -0
  237. package/icons/PfIcons/builder-image.svg +4 -0
  238. package/icons/PfIcons/bundle.svg +4 -0
  239. package/icons/PfIcons/catalog.svg +4 -0
  240. package/icons/PfIcons/chat.svg +4 -0
  241. package/icons/PfIcons/close.svg +4 -0
  242. package/icons/PfIcons/cloud-security.svg +4 -0
  243. package/icons/PfIcons/cloud-tenant.svg +4 -0
  244. package/icons/PfIcons/cluster.svg +4 -0
  245. package/icons/PfIcons/connected.svg +4 -0
  246. package/icons/PfIcons/container-node.svg +4 -0
  247. package/icons/PfIcons/cpu.svg +4 -0
  248. package/icons/PfIcons/critical-risk.svg +4 -0
  249. package/icons/PfIcons/data-processor.svg +4 -0
  250. package/icons/PfIcons/data-sink.svg +4 -0
  251. package/icons/PfIcons/data-source.svg +4 -0
  252. package/icons/PfIcons/degraded.svg +4 -0
  253. package/icons/PfIcons/disconnected.svg +4 -0
  254. package/icons/PfIcons/domain.svg +4 -0
  255. package/icons/PfIcons/edit.svg +4 -0
  256. package/icons/PfIcons/enhancement.svg +4 -0
  257. package/icons/PfIcons/enterprise.svg +4 -0
  258. package/icons/PfIcons/equalizer.svg +4 -0
  259. package/icons/PfIcons/error-circle-o.svg +4 -0
  260. package/icons/PfIcons/export.svg +4 -0
  261. package/icons/PfIcons/filter.svg +4 -0
  262. package/icons/PfIcons/flavor.svg +4 -0
  263. package/icons/PfIcons/folder-close.svg +4 -0
  264. package/icons/PfIcons/folder-open.svg +4 -0
  265. package/icons/PfIcons/globe-route.svg +4 -0
  266. package/icons/PfIcons/help.svg +4 -0
  267. package/icons/PfIcons/history.svg +4 -0
  268. package/icons/PfIcons/home.svg +4 -0
  269. package/icons/PfIcons/import.svg +4 -0
  270. package/icons/PfIcons/in-progress.svg +4 -0
  271. package/icons/PfIcons/info.svg +4 -0
  272. package/icons/PfIcons/infrastructure.svg +4 -0
  273. package/icons/PfIcons/integration.svg +4 -0
  274. package/icons/PfIcons/key.svg +4 -0
  275. package/icons/PfIcons/locked.svg +4 -0
  276. package/icons/PfIcons/maintenance.svg +4 -0
  277. package/icons/PfIcons/memory.svg +4 -0
  278. package/icons/PfIcons/messages.svg +4 -0
  279. package/icons/PfIcons/middleware.svg +4 -0
  280. package/icons/PfIcons/migration.svg +4 -0
  281. package/icons/PfIcons/module.svg +4 -0
  282. package/icons/PfIcons/monitoring.svg +4 -0
  283. package/icons/PfIcons/multicluster.svg +4 -0
  284. package/icons/PfIcons/namespaces.svg +4 -0
  285. package/icons/PfIcons/network.svg +4 -0
  286. package/icons/PfIcons/new-process.svg +4 -0
  287. package/icons/PfIcons/not-started.svg +4 -0
  288. package/icons/PfIcons/off.svg +4 -0
  289. package/icons/PfIcons/ok.svg +4 -0
  290. package/icons/PfIcons/on-running.svg +4 -0
  291. package/icons/PfIcons/on.svg +4 -0
  292. package/icons/PfIcons/open-drawer-right.svg +4 -0
  293. package/icons/PfIcons/openshift.svg +4 -0
  294. package/icons/PfIcons/openstack.svg +4 -0
  295. package/icons/PfIcons/optimize.svg +4 -0
  296. package/icons/PfIcons/orders.svg +4 -0
  297. package/icons/PfIcons/os-image.svg +4 -0
  298. package/icons/PfIcons/package.svg +4 -0
  299. package/icons/PfIcons/panel-close.svg +4 -0
  300. package/icons/PfIcons/panel-open.svg +4 -0
  301. package/icons/PfIcons/paused.svg +4 -0
  302. package/icons/PfIcons/pending.svg +4 -0
  303. package/icons/PfIcons/pficon-dragdrop.svg +4 -0
  304. package/icons/PfIcons/pficon-history.svg +4 -0
  305. package/icons/PfIcons/pficon-network-range.svg +4 -0
  306. package/icons/PfIcons/pficon-satellite.svg +4 -0
  307. package/icons/PfIcons/pficon-sort-common-asc.svg +4 -0
  308. package/icons/PfIcons/pficon-sort-common-desc.svg +4 -0
  309. package/icons/PfIcons/pficon-template.svg +4 -0
  310. package/icons/PfIcons/pficon-vcenter.svg +4 -0
  311. package/icons/PfIcons/plugged.svg +4 -0
  312. package/icons/PfIcons/port.svg +4 -0
  313. package/icons/PfIcons/print.svg +4 -0
  314. package/icons/PfIcons/private.svg +4 -0
  315. package/icons/PfIcons/process-automation.svg +4 -0
  316. package/icons/PfIcons/project.svg +4 -0
  317. package/icons/PfIcons/rebalance.svg +4 -0
  318. package/icons/PfIcons/rebooting.svg +4 -0
  319. package/icons/PfIcons/regions.svg +4 -0
  320. package/icons/PfIcons/registry.svg +4 -0
  321. package/icons/PfIcons/remove2.svg +4 -0
  322. package/icons/PfIcons/replicator.svg +4 -0
  323. package/icons/PfIcons/repository.svg +4 -0
  324. package/icons/PfIcons/resource-pool.svg +4 -0
  325. package/icons/PfIcons/resources-almost-empty.svg +4 -0
  326. package/icons/PfIcons/resources-almost-full.svg +4 -0
  327. package/icons/PfIcons/resources-empty.svg +4 -0
  328. package/icons/PfIcons/resources-full.svg +4 -0
  329. package/icons/PfIcons/running.svg +4 -0
  330. package/icons/PfIcons/save.svg +4 -0
  331. package/icons/PfIcons/screen.svg +4 -0
  332. package/icons/PfIcons/security.svg +4 -0
  333. package/icons/PfIcons/server-group.svg +4 -0
  334. package/icons/PfIcons/server.svg +4 -0
  335. package/icons/PfIcons/service-catalog.svg +4 -0
  336. package/icons/PfIcons/service.svg +4 -0
  337. package/icons/PfIcons/services.svg +4 -0
  338. package/icons/PfIcons/severity-critical.svg +4 -0
  339. package/icons/PfIcons/severity-important.svg +4 -0
  340. package/icons/PfIcons/severity-minor.svg +4 -0
  341. package/icons/PfIcons/severity-moderate.svg +4 -0
  342. package/icons/PfIcons/severity-none.svg +4 -0
  343. package/icons/PfIcons/severity-undefined.svg +4 -0
  344. package/icons/PfIcons/spinner.svg +4 -0
  345. package/icons/PfIcons/spinner2.svg +4 -0
  346. package/icons/PfIcons/storage-domain.svg +4 -0
  347. package/icons/PfIcons/task.svg +4 -0
  348. package/icons/PfIcons/tenant.svg +4 -0
  349. package/icons/PfIcons/thumb-tack.svg +4 -0
  350. package/icons/PfIcons/topology.svg +4 -0
  351. package/icons/PfIcons/treeview.svg +4 -0
  352. package/icons/PfIcons/trend-down.svg +4 -0
  353. package/icons/PfIcons/trend-up.svg +4 -0
  354. package/icons/PfIcons/unknown.svg +4 -0
  355. package/icons/PfIcons/unlocked.svg +4 -0
  356. package/icons/PfIcons/unplugged.svg +4 -0
  357. package/icons/PfIcons/user.svg +4 -0
  358. package/icons/PfIcons/users.svg +4 -0
  359. package/icons/PfIcons/virtual-machine.svg +4 -0
  360. package/icons/PfIcons/volume.svg +4 -0
  361. package/icons/PfIcons/warning-triangle.svg +4 -0
  362. package/icons/PfIcons/zone.svg +4 -0
  363. package/layouts/Flex/flex.scss +83 -19
  364. package/layouts/Gallery/gallery.css +6 -2
  365. package/layouts/_index.css +6 -2
  366. package/package.json +34 -16
  367. package/patternfly-base-no-globals.css +406 -14
  368. package/patternfly-base.css +413 -14
  369. package/patternfly-charts.css +3 -3
  370. package/patternfly-no-globals.css +1947 -625
  371. package/patternfly.css +1954 -625
  372. package/patternfly.min.css +1 -1
  373. package/patternfly.min.css.map +1 -1
  374. package/sass-utilities/functions.scss +32 -25
  375. package/sass-utilities/mixins.scss +36 -20
  376. package/sass-utilities/namespaces-components.scss +6 -0
package/docs/demos/DataList/examples/DataList.md CHANGED
@@ -16,7 +16,7 @@ wrapperTag: div
16
16
  <span class="pf-v6-c-button__text">Skip to content</span>
17
17
  </a>
18
18
  </div>
19
- <header class="pf-v6-c-masthead" id="data-list-basic-example-masthead">
19
+ <header class="pf-v6-c-masthead" id="data-list-basic-example-docked">
20
20
  <div class="pf-v6-c-masthead__main">
21
21
  <span class="pf-v6-c-masthead__toggle">
22
22
  <button
@@ -58,7 +58,7 @@ wrapperTag: div
58
58
  y1="2.25860997e-13%"
59
59
  x2="32%"
60
60
  y2="100%"
61
- id="linearGradient-data-list-basic-example-masthead"
61
+ id="linearGradient-data-list-basic-example-docked"
62
62
  >
63
63
  <stop stop-color="#2B9AF3" offset="0%" />
64
64
  <stop
@@ -112,11 +112,11 @@ wrapperTag: div
112
112
  />
113
113
  <path
114
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"
115
- fill="url(#linearGradient-data-list-basic-example-masthead)"
115
+ fill="url(#linearGradient-data-list-basic-example-docked)"
116
116
  />
117
117
  <path
118
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"
119
- fill="url(#linearGradient-data-list-basic-example-masthead)"
119
+ fill="url(#linearGradient-data-list-basic-example-docked)"
120
120
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
121
121
  />
122
122
  </g>
@@ -128,7 +128,7 @@ wrapperTag: div
128
128
  <div class="pf-v6-c-masthead__content">
129
129
  <div
130
130
  class="pf-v6-c-toolbar pf-m-static"
131
- id="data-list-basic-example-masthead-toolbar"
131
+ id="data-list-basic-example-docked-toolbar"
132
132
  >
133
133
  <div class="pf-v6-c-toolbar__content">
134
134
  <div class="pf-v6-c-toolbar__content-section">
@@ -250,21 +250,57 @@ wrapperTag: div
250
250
  </li>
251
251
  <li class="pf-v6-c-breadcrumb__item">
252
252
  <span class="pf-v6-c-breadcrumb__item-divider">
253
- <i class="fas fa-angle-right" aria-hidden="true"></i>
253
+ <svg
254
+ class="pf-v6-svg"
255
+ viewBox="0 0 20 20"
256
+ fill="currentColor"
257
+ aria-hidden="true"
258
+ role="img"
259
+ width="1em"
260
+ height="1em"
261
+ >
262
+ <path
263
+ 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"
264
+ />
265
+ </svg>
254
266
  </span>
255
267
 
256
268
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
257
269
  </li>
258
270
  <li class="pf-v6-c-breadcrumb__item">
259
271
  <span class="pf-v6-c-breadcrumb__item-divider">
260
- <i class="fas fa-angle-right" aria-hidden="true"></i>
272
+ <svg
273
+ class="pf-v6-svg"
274
+ viewBox="0 0 20 20"
275
+ fill="currentColor"
276
+ aria-hidden="true"
277
+ role="img"
278
+ width="1em"
279
+ height="1em"
280
+ >
281
+ <path
282
+ 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"
283
+ />
284
+ </svg>
261
285
  </span>
262
286
 
263
287
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
264
288
  </li>
265
289
  <li class="pf-v6-c-breadcrumb__item">
266
290
  <span class="pf-v6-c-breadcrumb__item-divider">
267
- <i class="fas fa-angle-right" aria-hidden="true"></i>
291
+ <svg
292
+ class="pf-v6-svg"
293
+ viewBox="0 0 20 20"
294
+ fill="currentColor"
295
+ aria-hidden="true"
296
+ role="img"
297
+ width="1em"
298
+ height="1em"
299
+ >
300
+ <path
301
+ 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"
302
+ />
303
+ </svg>
268
304
  </span>
269
305
 
270
306
  <a
@@ -390,7 +426,19 @@ wrapperTag: div
390
426
  aria-label="Go to previous page"
391
427
  >
392
428
  <span class="pf-v6-c-button__icon">
393
- <i class="fas fa-angle-left" aria-hidden="true"></i>
429
+ <svg
430
+ class="pf-v6-svg"
431
+ viewBox="0 0 256 512"
432
+ fill="currentColor"
433
+ aria-hidden="true"
434
+ role="img"
435
+ width="1em"
436
+ height="1em"
437
+ >
438
+ <path
439
+ 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"
440
+ />
441
+ </svg>
394
442
  </span>
395
443
  </button>
396
444
  </div>
@@ -401,7 +449,19 @@ wrapperTag: div
401
449
  aria-label="Go to next page"
402
450
  >
403
451
  <span class="pf-v6-c-button__icon">
404
- <i class="fas fa-angle-right" aria-hidden="true"></i>
452
+ <svg
453
+ class="pf-v6-svg"
454
+ viewBox="0 0 256 512"
455
+ fill="currentColor"
456
+ aria-hidden="true"
457
+ role="img"
458
+ width="1em"
459
+ height="1em"
460
+ >
461
+ <path
462
+ 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"
463
+ />
464
+ </svg>
405
465
  </span>
406
466
  </button>
407
467
  </div>
@@ -888,7 +948,19 @@ wrapperTag: div
888
948
  aria-label="Go to first page"
889
949
  >
890
950
  <span class="pf-v6-c-button__icon">
891
- <i class="fas fa-angle-double-left" aria-hidden="true"></i>
951
+ <svg
952
+ class="pf-v6-svg"
953
+ viewBox="0 0 448 512"
954
+ fill="currentColor"
955
+ aria-hidden="true"
956
+ role="img"
957
+ width="1em"
958
+ height="1em"
959
+ >
960
+ <path
961
+ 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"
962
+ />
963
+ </svg>
892
964
  </span>
893
965
  </button>
894
966
  </div>
@@ -900,7 +972,19 @@ wrapperTag: div
900
972
  aria-label="Go to previous page"
901
973
  >
902
974
  <span class="pf-v6-c-button__icon">
903
- <i class="fas fa-angle-left" aria-hidden="true"></i>
975
+ <svg
976
+ class="pf-v6-svg"
977
+ viewBox="0 0 256 512"
978
+ fill="currentColor"
979
+ aria-hidden="true"
980
+ role="img"
981
+ width="1em"
982
+ height="1em"
983
+ >
984
+ <path
985
+ 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"
986
+ />
987
+ </svg>
904
988
  </span>
905
989
  </button>
906
990
  </div>
@@ -923,7 +1007,19 @@ wrapperTag: div
923
1007
  aria-label="Go to next page"
924
1008
  >
925
1009
  <span class="pf-v6-c-button__icon">
926
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1010
+ <svg
1011
+ class="pf-v6-svg"
1012
+ viewBox="0 0 256 512"
1013
+ fill="currentColor"
1014
+ aria-hidden="true"
1015
+ role="img"
1016
+ width="1em"
1017
+ height="1em"
1018
+ >
1019
+ <path
1020
+ 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"
1021
+ />
1022
+ </svg>
927
1023
  </span>
928
1024
  </button>
929
1025
  </div>
@@ -935,7 +1031,19 @@ wrapperTag: div
935
1031
  aria-label="Go to last page"
936
1032
  >
937
1033
  <span class="pf-v6-c-button__icon">
938
- <i class="fas fa-angle-double-right" aria-hidden="true"></i>
1034
+ <svg
1035
+ class="pf-v6-svg"
1036
+ viewBox="0 0 448 512"
1037
+ fill="currentColor"
1038
+ aria-hidden="true"
1039
+ role="img"
1040
+ width="1em"
1041
+ height="1em"
1042
+ >
1043
+ <path
1044
+ 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"
1045
+ />
1046
+ </svg>
939
1047
  </span>
940
1048
  </button>
941
1049
  </div>
@@ -961,7 +1069,7 @@ wrapperTag: div
961
1069
  <span class="pf-v6-c-button__text">Skip to content</span>
962
1070
  </a>
963
1071
  </div>
964
- <header class="pf-v6-c-masthead" id="data-list-actionable-example-masthead">
1072
+ <header class="pf-v6-c-masthead" id="data-list-actionable-example-docked">
965
1073
  <div class="pf-v6-c-masthead__main">
966
1074
  <span class="pf-v6-c-masthead__toggle">
967
1075
  <button
@@ -1003,7 +1111,7 @@ wrapperTag: div
1003
1111
  y1="2.25860997e-13%"
1004
1112
  x2="32%"
1005
1113
  y2="100%"
1006
- id="linearGradient-data-list-actionable-example-masthead"
1114
+ id="linearGradient-data-list-actionable-example-docked"
1007
1115
  >
1008
1116
  <stop stop-color="#2B9AF3" offset="0%" />
1009
1117
  <stop
@@ -1057,11 +1165,11 @@ wrapperTag: div
1057
1165
  />
1058
1166
  <path
1059
1167
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
1060
- fill="url(#linearGradient-data-list-actionable-example-masthead)"
1168
+ fill="url(#linearGradient-data-list-actionable-example-docked)"
1061
1169
  />
1062
1170
  <path
1063
1171
  d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z"
1064
- fill="url(#linearGradient-data-list-actionable-example-masthead)"
1172
+ fill="url(#linearGradient-data-list-actionable-example-docked)"
1065
1173
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
1066
1174
  />
1067
1175
  </g>
@@ -1073,7 +1181,7 @@ wrapperTag: div
1073
1181
  <div class="pf-v6-c-masthead__content">
1074
1182
  <div
1075
1183
  class="pf-v6-c-toolbar pf-m-static"
1076
- id="data-list-actionable-example-masthead-toolbar"
1184
+ id="data-list-actionable-example-docked-toolbar"
1077
1185
  >
1078
1186
  <div class="pf-v6-c-toolbar__content">
1079
1187
  <div class="pf-v6-c-toolbar__content-section">
@@ -1195,21 +1303,57 @@ wrapperTag: div
1195
1303
  </li>
1196
1304
  <li class="pf-v6-c-breadcrumb__item">
1197
1305
  <span class="pf-v6-c-breadcrumb__item-divider">
1198
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1306
+ <svg
1307
+ class="pf-v6-svg"
1308
+ viewBox="0 0 20 20"
1309
+ fill="currentColor"
1310
+ aria-hidden="true"
1311
+ role="img"
1312
+ width="1em"
1313
+ height="1em"
1314
+ >
1315
+ <path
1316
+ 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"
1317
+ />
1318
+ </svg>
1199
1319
  </span>
1200
1320
 
1201
1321
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1202
1322
  </li>
1203
1323
  <li class="pf-v6-c-breadcrumb__item">
1204
1324
  <span class="pf-v6-c-breadcrumb__item-divider">
1205
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1325
+ <svg
1326
+ class="pf-v6-svg"
1327
+ viewBox="0 0 20 20"
1328
+ fill="currentColor"
1329
+ aria-hidden="true"
1330
+ role="img"
1331
+ width="1em"
1332
+ height="1em"
1333
+ >
1334
+ <path
1335
+ 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"
1336
+ />
1337
+ </svg>
1206
1338
  </span>
1207
1339
 
1208
1340
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1209
1341
  </li>
1210
1342
  <li class="pf-v6-c-breadcrumb__item">
1211
1343
  <span class="pf-v6-c-breadcrumb__item-divider">
1212
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1344
+ <svg
1345
+ class="pf-v6-svg"
1346
+ viewBox="0 0 20 20"
1347
+ fill="currentColor"
1348
+ aria-hidden="true"
1349
+ role="img"
1350
+ width="1em"
1351
+ height="1em"
1352
+ >
1353
+ <path
1354
+ 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"
1355
+ />
1356
+ </svg>
1213
1357
  </span>
1214
1358
 
1215
1359
  <a
@@ -1367,7 +1511,19 @@ wrapperTag: div
1367
1511
  aria-label="Go to previous page"
1368
1512
  >
1369
1513
  <span class="pf-v6-c-button__icon">
1370
- <i class="fas fa-angle-left" aria-hidden="true"></i>
1514
+ <svg
1515
+ class="pf-v6-svg"
1516
+ viewBox="0 0 256 512"
1517
+ fill="currentColor"
1518
+ aria-hidden="true"
1519
+ role="img"
1520
+ width="1em"
1521
+ height="1em"
1522
+ >
1523
+ <path
1524
+ 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"
1525
+ />
1526
+ </svg>
1371
1527
  </span>
1372
1528
  </button>
1373
1529
  </div>
@@ -1378,7 +1534,19 @@ wrapperTag: div
1378
1534
  aria-label="Go to next page"
1379
1535
  >
1380
1536
  <span class="pf-v6-c-button__icon">
1381
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1537
+ <svg
1538
+ class="pf-v6-svg"
1539
+ viewBox="0 0 256 512"
1540
+ fill="currentColor"
1541
+ aria-hidden="true"
1542
+ role="img"
1543
+ width="1em"
1544
+ height="1em"
1545
+ >
1546
+ <path
1547
+ 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"
1548
+ />
1549
+ </svg>
1382
1550
  </span>
1383
1551
  </button>
1384
1552
  </div>
@@ -1807,7 +1975,19 @@ wrapperTag: div
1807
1975
  aria-label="Go to first page"
1808
1976
  >
1809
1977
  <span class="pf-v6-c-button__icon">
1810
- <i class="fas fa-angle-double-left" aria-hidden="true"></i>
1978
+ <svg
1979
+ class="pf-v6-svg"
1980
+ viewBox="0 0 448 512"
1981
+ fill="currentColor"
1982
+ aria-hidden="true"
1983
+ role="img"
1984
+ width="1em"
1985
+ height="1em"
1986
+ >
1987
+ <path
1988
+ 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"
1989
+ />
1990
+ </svg>
1811
1991
  </span>
1812
1992
  </button>
1813
1993
  </div>
@@ -1819,7 +1999,19 @@ wrapperTag: div
1819
1999
  aria-label="Go to previous page"
1820
2000
  >
1821
2001
  <span class="pf-v6-c-button__icon">
1822
- <i class="fas fa-angle-left" aria-hidden="true"></i>
2002
+ <svg
2003
+ class="pf-v6-svg"
2004
+ viewBox="0 0 256 512"
2005
+ fill="currentColor"
2006
+ aria-hidden="true"
2007
+ role="img"
2008
+ width="1em"
2009
+ height="1em"
2010
+ >
2011
+ <path
2012
+ 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"
2013
+ />
2014
+ </svg>
1823
2015
  </span>
1824
2016
  </button>
1825
2017
  </div>
@@ -1842,7 +2034,19 @@ wrapperTag: div
1842
2034
  aria-label="Go to next page"
1843
2035
  >
1844
2036
  <span class="pf-v6-c-button__icon">
1845
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2037
+ <svg
2038
+ class="pf-v6-svg"
2039
+ viewBox="0 0 256 512"
2040
+ fill="currentColor"
2041
+ aria-hidden="true"
2042
+ role="img"
2043
+ width="1em"
2044
+ height="1em"
2045
+ >
2046
+ <path
2047
+ 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"
2048
+ />
2049
+ </svg>
1846
2050
  </span>
1847
2051
  </button>
1848
2052
  </div>
@@ -1854,7 +2058,19 @@ wrapperTag: div
1854
2058
  aria-label="Go to last page"
1855
2059
  >
1856
2060
  <span class="pf-v6-c-button__icon">
1857
- <i class="fas fa-angle-double-right" aria-hidden="true"></i>
2061
+ <svg
2062
+ class="pf-v6-svg"
2063
+ viewBox="0 0 448 512"
2064
+ fill="currentColor"
2065
+ aria-hidden="true"
2066
+ role="img"
2067
+ width="1em"
2068
+ height="1em"
2069
+ >
2070
+ <path
2071
+ 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"
2072
+ />
2073
+ </svg>
1858
2074
  </span>
1859
2075
  </button>
1860
2076
  </div>
@@ -1880,7 +2096,7 @@ wrapperTag: div
1880
2096
  <span class="pf-v6-c-button__text">Skip to content</span>
1881
2097
  </a>
1882
2098
  </div>
1883
- <header class="pf-v6-c-masthead" id="data-list-expandable-example-masthead">
2099
+ <header class="pf-v6-c-masthead" id="data-list-expandable-example-docked">
1884
2100
  <div class="pf-v6-c-masthead__main">
1885
2101
  <span class="pf-v6-c-masthead__toggle">
1886
2102
  <button
@@ -1922,7 +2138,7 @@ wrapperTag: div
1922
2138
  y1="2.25860997e-13%"
1923
2139
  x2="32%"
1924
2140
  y2="100%"
1925
- id="linearGradient-data-list-expandable-example-masthead"
2141
+ id="linearGradient-data-list-expandable-example-docked"
1926
2142
  >
1927
2143
  <stop stop-color="#2B9AF3" offset="0%" />
1928
2144
  <stop
@@ -1976,11 +2192,11 @@ wrapperTag: div
1976
2192
  />
1977
2193
  <path
1978
2194
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
1979
- fill="url(#linearGradient-data-list-expandable-example-masthead)"
2195
+ fill="url(#linearGradient-data-list-expandable-example-docked)"
1980
2196
  />
1981
2197
  <path
1982
2198
  d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z"
1983
- fill="url(#linearGradient-data-list-expandable-example-masthead)"
2199
+ fill="url(#linearGradient-data-list-expandable-example-docked)"
1984
2200
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
1985
2201
  />
1986
2202
  </g>
@@ -1992,7 +2208,7 @@ wrapperTag: div
1992
2208
  <div class="pf-v6-c-masthead__content">
1993
2209
  <div
1994
2210
  class="pf-v6-c-toolbar pf-m-static"
1995
- id="data-list-expandable-example-masthead-toolbar"
2211
+ id="data-list-expandable-example-docked-toolbar"
1996
2212
  >
1997
2213
  <div class="pf-v6-c-toolbar__content">
1998
2214
  <div class="pf-v6-c-toolbar__content-section">
@@ -2114,21 +2330,57 @@ wrapperTag: div
2114
2330
  </li>
2115
2331
  <li class="pf-v6-c-breadcrumb__item">
2116
2332
  <span class="pf-v6-c-breadcrumb__item-divider">
2117
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2333
+ <svg
2334
+ class="pf-v6-svg"
2335
+ viewBox="0 0 20 20"
2336
+ fill="currentColor"
2337
+ aria-hidden="true"
2338
+ role="img"
2339
+ width="1em"
2340
+ height="1em"
2341
+ >
2342
+ <path
2343
+ 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"
2344
+ />
2345
+ </svg>
2118
2346
  </span>
2119
2347
 
2120
2348
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
2121
2349
  </li>
2122
2350
  <li class="pf-v6-c-breadcrumb__item">
2123
2351
  <span class="pf-v6-c-breadcrumb__item-divider">
2124
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2352
+ <svg
2353
+ class="pf-v6-svg"
2354
+ viewBox="0 0 20 20"
2355
+ fill="currentColor"
2356
+ aria-hidden="true"
2357
+ role="img"
2358
+ width="1em"
2359
+ height="1em"
2360
+ >
2361
+ <path
2362
+ 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"
2363
+ />
2364
+ </svg>
2125
2365
  </span>
2126
2366
 
2127
2367
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
2128
2368
  </li>
2129
2369
  <li class="pf-v6-c-breadcrumb__item">
2130
2370
  <span class="pf-v6-c-breadcrumb__item-divider">
2131
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2371
+ <svg
2372
+ class="pf-v6-svg"
2373
+ viewBox="0 0 20 20"
2374
+ fill="currentColor"
2375
+ aria-hidden="true"
2376
+ role="img"
2377
+ width="1em"
2378
+ height="1em"
2379
+ >
2380
+ <path
2381
+ 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"
2382
+ />
2383
+ </svg>
2132
2384
  </span>
2133
2385
 
2134
2386
  <a
@@ -2167,7 +2419,19 @@ wrapperTag: div
2167
2419
  class="pf-v6-c-icon__content pf-v6-m-mirror-inline-rtl"
2168
2420
  >
2169
2421
  <span class="pf-v6-c-toolbar__expand-all-icon">
2170
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2422
+ <svg
2423
+ class="pf-v6-svg"
2424
+ viewBox="0 0 20 20"
2425
+ fill="currentColor"
2426
+ aria-hidden="true"
2427
+ role="img"
2428
+ width="1em"
2429
+ height="1em"
2430
+ >
2431
+ <path
2432
+ 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"
2433
+ />
2434
+ </svg>
2171
2435
  </span>
2172
2436
  </span>
2173
2437
  </span>
@@ -2345,7 +2609,19 @@ wrapperTag: div
2345
2609
  aria-label="Go to previous page"
2346
2610
  >
2347
2611
  <span class="pf-v6-c-button__icon">
2348
- <i class="fas fa-angle-left" aria-hidden="true"></i>
2612
+ <svg
2613
+ class="pf-v6-svg"
2614
+ viewBox="0 0 256 512"
2615
+ fill="currentColor"
2616
+ aria-hidden="true"
2617
+ role="img"
2618
+ width="1em"
2619
+ height="1em"
2620
+ >
2621
+ <path
2622
+ 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"
2623
+ />
2624
+ </svg>
2349
2625
  </span>
2350
2626
  </button>
2351
2627
  </div>
@@ -2356,7 +2632,19 @@ wrapperTag: div
2356
2632
  aria-label="Go to next page"
2357
2633
  >
2358
2634
  <span class="pf-v6-c-button__icon">
2359
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2635
+ <svg
2636
+ class="pf-v6-svg"
2637
+ viewBox="0 0 256 512"
2638
+ fill="currentColor"
2639
+ aria-hidden="true"
2640
+ role="img"
2641
+ width="1em"
2642
+ height="1em"
2643
+ >
2644
+ <path
2645
+ 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"
2646
+ />
2647
+ </svg>
2360
2648
  </span>
2361
2649
  </button>
2362
2650
  </div>
@@ -2393,7 +2681,19 @@ wrapperTag: div
2393
2681
  >
2394
2682
  <span class="pf-v6-c-button__icon pf-m-start">
2395
2683
  <div class="pf-v6-c-data-list__toggle-icon">
2396
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2684
+ <svg
2685
+ class="pf-v6-svg"
2686
+ viewBox="0 0 20 20"
2687
+ fill="currentColor"
2688
+ aria-hidden="true"
2689
+ role="img"
2690
+ width="1em"
2691
+ height="1em"
2692
+ >
2693
+ <path
2694
+ 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"
2695
+ />
2696
+ </svg>
2397
2697
  </div>
2398
2698
  </span>
2399
2699
  </button>
@@ -2909,7 +3209,19 @@ wrapperTag: div
2909
3209
  >
2910
3210
  <span class="pf-v6-c-button__icon pf-m-start">
2911
3211
  <div class="pf-v6-c-data-list__toggle-icon">
2912
- <i class="fas fa-angle-right" aria-hidden="true"></i>
3212
+ <svg
3213
+ class="pf-v6-svg"
3214
+ viewBox="0 0 20 20"
3215
+ fill="currentColor"
3216
+ aria-hidden="true"
3217
+ role="img"
3218
+ width="1em"
3219
+ height="1em"
3220
+ >
3221
+ <path
3222
+ 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"
3223
+ />
3224
+ </svg>
2913
3225
  </div>
2914
3226
  </span>
2915
3227
  </button>
@@ -3079,7 +3391,19 @@ wrapperTag: div
3079
3391
  >
3080
3392
  <span class="pf-v6-c-button__icon pf-m-start">
3081
3393
  <div class="pf-v6-c-data-list__toggle-icon">
3082
- <i class="fas fa-angle-right" aria-hidden="true"></i>
3394
+ <svg
3395
+ class="pf-v6-svg"
3396
+ viewBox="0 0 20 20"
3397
+ fill="currentColor"
3398
+ aria-hidden="true"
3399
+ role="img"
3400
+ width="1em"
3401
+ height="1em"
3402
+ >
3403
+ <path
3404
+ 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"
3405
+ />
3406
+ </svg>
3083
3407
  </div>
3084
3408
  </span>
3085
3409
  </button>
@@ -3135,7 +3459,19 @@ wrapperTag: div
3135
3459
  >
3136
3460
  <span class="pf-v6-c-button__icon pf-m-start">
3137
3461
  <div class="pf-v6-c-data-list__toggle-icon">
3138
- <i class="fas fa-angle-right" aria-hidden="true"></i>
3462
+ <svg
3463
+ class="pf-v6-svg"
3464
+ viewBox="0 0 20 20"
3465
+ fill="currentColor"
3466
+ aria-hidden="true"
3467
+ role="img"
3468
+ width="1em"
3469
+ height="1em"
3470
+ >
3471
+ <path
3472
+ 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"
3473
+ />
3474
+ </svg>
3139
3475
  </div>
3140
3476
  </span>
3141
3477
  </button>
@@ -3260,7 +3596,19 @@ wrapperTag: div
3260
3596
  >
3261
3597
  <span class="pf-v6-c-button__icon pf-m-start">
3262
3598
  <div class="pf-v6-c-data-list__toggle-icon">
3263
- <i class="fas fa-angle-right" aria-hidden="true"></i>
3599
+ <svg
3600
+ class="pf-v6-svg"
3601
+ viewBox="0 0 20 20"
3602
+ fill="currentColor"
3603
+ aria-hidden="true"
3604
+ role="img"
3605
+ width="1em"
3606
+ height="1em"
3607
+ >
3608
+ <path
3609
+ 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"
3610
+ />
3611
+ </svg>
3264
3612
  </div>
3265
3613
  </span>
3266
3614
  </button>
@@ -3444,7 +3792,19 @@ wrapperTag: div
3444
3792
  aria-label="Go to first page"
3445
3793
  >
3446
3794
  <span class="pf-v6-c-button__icon">
3447
- <i class="fas fa-angle-double-left" aria-hidden="true"></i>
3795
+ <svg
3796
+ class="pf-v6-svg"
3797
+ viewBox="0 0 448 512"
3798
+ fill="currentColor"
3799
+ aria-hidden="true"
3800
+ role="img"
3801
+ width="1em"
3802
+ height="1em"
3803
+ >
3804
+ <path
3805
+ 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"
3806
+ />
3807
+ </svg>
3448
3808
  </span>
3449
3809
  </button>
3450
3810
  </div>
@@ -3456,7 +3816,19 @@ wrapperTag: div
3456
3816
  aria-label="Go to previous page"
3457
3817
  >
3458
3818
  <span class="pf-v6-c-button__icon">
3459
- <i class="fas fa-angle-left" aria-hidden="true"></i>
3819
+ <svg
3820
+ class="pf-v6-svg"
3821
+ viewBox="0 0 256 512"
3822
+ fill="currentColor"
3823
+ aria-hidden="true"
3824
+ role="img"
3825
+ width="1em"
3826
+ height="1em"
3827
+ >
3828
+ <path
3829
+ 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"
3830
+ />
3831
+ </svg>
3460
3832
  </span>
3461
3833
  </button>
3462
3834
  </div>
@@ -3479,7 +3851,19 @@ wrapperTag: div
3479
3851
  aria-label="Go to next page"
3480
3852
  >
3481
3853
  <span class="pf-v6-c-button__icon">
3482
- <i class="fas fa-angle-right" aria-hidden="true"></i>
3854
+ <svg
3855
+ class="pf-v6-svg"
3856
+ viewBox="0 0 256 512"
3857
+ fill="currentColor"
3858
+ aria-hidden="true"
3859
+ role="img"
3860
+ width="1em"
3861
+ height="1em"
3862
+ >
3863
+ <path
3864
+ 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"
3865
+ />
3866
+ </svg>
3483
3867
  </span>
3484
3868
  </button>
3485
3869
  </div>
@@ -3491,7 +3875,19 @@ wrapperTag: div
3491
3875
  aria-label="Go to last page"
3492
3876
  >
3493
3877
  <span class="pf-v6-c-button__icon">
3494
- <i class="fas fa-angle-double-right" aria-hidden="true"></i>
3878
+ <svg
3879
+ class="pf-v6-svg"
3880
+ viewBox="0 0 448 512"
3881
+ fill="currentColor"
3882
+ aria-hidden="true"
3883
+ role="img"
3884
+ width="1em"
3885
+ height="1em"
3886
+ >
3887
+ <path
3888
+ 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"
3889
+ />
3890
+ </svg>
3495
3891
  </span>
3496
3892
  </button>
3497
3893
  </div>
@@ -3517,10 +3913,7 @@ wrapperTag: div
3517
3913
  <span class="pf-v6-c-button__text">Skip to content</span>
3518
3914
  </a>
3519
3915
  </div>
3520
- <header
3521
- class="pf-v6-c-masthead"
3522
- id="data-list-static-bottom-example-masthead"
3523
- >
3916
+ <header class="pf-v6-c-masthead" id="data-list-static-bottom-example-docked">
3524
3917
  <div class="pf-v6-c-masthead__main">
3525
3918
  <span class="pf-v6-c-masthead__toggle">
3526
3919
  <button
@@ -3562,7 +3955,7 @@ wrapperTag: div
3562
3955
  y1="2.25860997e-13%"
3563
3956
  x2="32%"
3564
3957
  y2="100%"
3565
- id="linearGradient-data-list-static-bottom-example-masthead"
3958
+ id="linearGradient-data-list-static-bottom-example-docked"
3566
3959
  >
3567
3960
  <stop stop-color="#2B9AF3" offset="0%" />
3568
3961
  <stop
@@ -3616,11 +4009,11 @@ wrapperTag: div
3616
4009
  />
3617
4010
  <path
3618
4011
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
3619
- fill="url(#linearGradient-data-list-static-bottom-example-masthead)"
4012
+ fill="url(#linearGradient-data-list-static-bottom-example-docked)"
3620
4013
  />
3621
4014
  <path
3622
4015
  d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z"
3623
- fill="url(#linearGradient-data-list-static-bottom-example-masthead)"
4016
+ fill="url(#linearGradient-data-list-static-bottom-example-docked)"
3624
4017
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
3625
4018
  />
3626
4019
  </g>
@@ -3632,7 +4025,7 @@ wrapperTag: div
3632
4025
  <div class="pf-v6-c-masthead__content">
3633
4026
  <div
3634
4027
  class="pf-v6-c-toolbar pf-m-static"
3635
- id="data-list-static-bottom-example-masthead-toolbar"
4028
+ id="data-list-static-bottom-example-docked-toolbar"
3636
4029
  >
3637
4030
  <div class="pf-v6-c-toolbar__content">
3638
4031
  <div class="pf-v6-c-toolbar__content-section">
@@ -3754,21 +4147,57 @@ wrapperTag: div
3754
4147
  </li>
3755
4148
  <li class="pf-v6-c-breadcrumb__item">
3756
4149
  <span class="pf-v6-c-breadcrumb__item-divider">
3757
- <i class="fas fa-angle-right" aria-hidden="true"></i>
4150
+ <svg
4151
+ class="pf-v6-svg"
4152
+ viewBox="0 0 20 20"
4153
+ fill="currentColor"
4154
+ aria-hidden="true"
4155
+ role="img"
4156
+ width="1em"
4157
+ height="1em"
4158
+ >
4159
+ <path
4160
+ 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"
4161
+ />
4162
+ </svg>
3758
4163
  </span>
3759
4164
 
3760
4165
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
3761
4166
  </li>
3762
4167
  <li class="pf-v6-c-breadcrumb__item">
3763
4168
  <span class="pf-v6-c-breadcrumb__item-divider">
3764
- <i class="fas fa-angle-right" aria-hidden="true"></i>
4169
+ <svg
4170
+ class="pf-v6-svg"
4171
+ viewBox="0 0 20 20"
4172
+ fill="currentColor"
4173
+ aria-hidden="true"
4174
+ role="img"
4175
+ width="1em"
4176
+ height="1em"
4177
+ >
4178
+ <path
4179
+ 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"
4180
+ />
4181
+ </svg>
3765
4182
  </span>
3766
4183
 
3767
4184
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
3768
4185
  </li>
3769
4186
  <li class="pf-v6-c-breadcrumb__item">
3770
4187
  <span class="pf-v6-c-breadcrumb__item-divider">
3771
- <i class="fas fa-angle-right" aria-hidden="true"></i>
4188
+ <svg
4189
+ class="pf-v6-svg"
4190
+ viewBox="0 0 20 20"
4191
+ fill="currentColor"
4192
+ aria-hidden="true"
4193
+ role="img"
4194
+ width="1em"
4195
+ height="1em"
4196
+ >
4197
+ <path
4198
+ 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"
4199
+ />
4200
+ </svg>
3772
4201
  </span>
3773
4202
 
3774
4203
  <a
@@ -3939,7 +4368,19 @@ wrapperTag: div
3939
4368
  aria-label="Go to previous page"
3940
4369
  >
3941
4370
  <span class="pf-v6-c-button__icon">
3942
- <i class="fas fa-angle-left" aria-hidden="true"></i>
4371
+ <svg
4372
+ class="pf-v6-svg"
4373
+ viewBox="0 0 256 512"
4374
+ fill="currentColor"
4375
+ aria-hidden="true"
4376
+ role="img"
4377
+ width="1em"
4378
+ height="1em"
4379
+ >
4380
+ <path
4381
+ 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"
4382
+ />
4383
+ </svg>
3943
4384
  </span>
3944
4385
  </button>
3945
4386
  </div>
@@ -3950,7 +4391,19 @@ wrapperTag: div
3950
4391
  aria-label="Go to next page"
3951
4392
  >
3952
4393
  <span class="pf-v6-c-button__icon">
3953
- <i class="fas fa-angle-right" aria-hidden="true"></i>
4394
+ <svg
4395
+ class="pf-v6-svg"
4396
+ viewBox="0 0 256 512"
4397
+ fill="currentColor"
4398
+ aria-hidden="true"
4399
+ role="img"
4400
+ width="1em"
4401
+ height="1em"
4402
+ >
4403
+ <path
4404
+ 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"
4405
+ />
4406
+ </svg>
3954
4407
  </span>
3955
4408
  </button>
3956
4409
  </div>
@@ -4437,7 +4890,19 @@ wrapperTag: div
4437
4890
  aria-label="Go to first page"
4438
4891
  >
4439
4892
  <span class="pf-v6-c-button__icon">
4440
- <i class="fas fa-angle-double-left" aria-hidden="true"></i>
4893
+ <svg
4894
+ class="pf-v6-svg"
4895
+ viewBox="0 0 448 512"
4896
+ fill="currentColor"
4897
+ aria-hidden="true"
4898
+ role="img"
4899
+ width="1em"
4900
+ height="1em"
4901
+ >
4902
+ <path
4903
+ 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"
4904
+ />
4905
+ </svg>
4441
4906
  </span>
4442
4907
  </button>
4443
4908
  </div>
@@ -4449,7 +4914,19 @@ wrapperTag: div
4449
4914
  aria-label="Go to previous page"
4450
4915
  >
4451
4916
  <span class="pf-v6-c-button__icon">
4452
- <i class="fas fa-angle-left" aria-hidden="true"></i>
4917
+ <svg
4918
+ class="pf-v6-svg"
4919
+ viewBox="0 0 256 512"
4920
+ fill="currentColor"
4921
+ aria-hidden="true"
4922
+ role="img"
4923
+ width="1em"
4924
+ height="1em"
4925
+ >
4926
+ <path
4927
+ 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"
4928
+ />
4929
+ </svg>
4453
4930
  </span>
4454
4931
  </button>
4455
4932
  </div>
@@ -4472,7 +4949,19 @@ wrapperTag: div
4472
4949
  aria-label="Go to next page"
4473
4950
  >
4474
4951
  <span class="pf-v6-c-button__icon">
4475
- <i class="fas fa-angle-right" aria-hidden="true"></i>
4952
+ <svg
4953
+ class="pf-v6-svg"
4954
+ viewBox="0 0 256 512"
4955
+ fill="currentColor"
4956
+ aria-hidden="true"
4957
+ role="img"
4958
+ width="1em"
4959
+ height="1em"
4960
+ >
4961
+ <path
4962
+ 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"
4963
+ />
4964
+ </svg>
4476
4965
  </span>
4477
4966
  </button>
4478
4967
  </div>
@@ -4484,7 +4973,19 @@ wrapperTag: div
4484
4973
  aria-label="Go to last page"
4485
4974
  >
4486
4975
  <span class="pf-v6-c-button__icon">
4487
- <i class="fas fa-angle-double-right" aria-hidden="true"></i>
4976
+ <svg
4977
+ class="pf-v6-svg"
4978
+ viewBox="0 0 448 512"
4979
+ fill="currentColor"
4980
+ aria-hidden="true"
4981
+ role="img"
4982
+ width="1em"
4983
+ height="1em"
4984
+ >
4985
+ <path
4986
+ 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"
4987
+ />
4988
+ </svg>
4488
4989
  </span>
4489
4990
  </button>
4490
4991
  </div>