@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
@@ -18,7 +18,7 @@ wrapperTag: div
18
18
  </div>
19
19
  <header
20
20
  class="pf-v6-c-masthead pf-m-display-stack pf-m-display-inline-on-lg"
21
- id="primary-detail-expanded-example-masthead"
21
+ id="primary-detail-expanded-example-docked"
22
22
  >
23
23
  <div class="pf-v6-c-masthead__main">
24
24
  <span class="pf-v6-c-masthead__toggle">
@@ -61,7 +61,7 @@ wrapperTag: div
61
61
  y1="2.25860997e-13%"
62
62
  x2="32%"
63
63
  y2="100%"
64
- id="linearGradient-primary-detail-expanded-example-masthead"
64
+ id="linearGradient-primary-detail-expanded-example-docked"
65
65
  >
66
66
  <stop stop-color="#2B9AF3" offset="0%" />
67
67
  <stop
@@ -115,11 +115,11 @@ wrapperTag: div
115
115
  />
116
116
  <path
117
117
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
118
- fill="url(#linearGradient-primary-detail-expanded-example-masthead)"
118
+ fill="url(#linearGradient-primary-detail-expanded-example-docked)"
119
119
  />
120
120
  <path
121
121
  d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z"
122
- fill="url(#linearGradient-primary-detail-expanded-example-masthead)"
122
+ fill="url(#linearGradient-primary-detail-expanded-example-docked)"
123
123
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
124
124
  />
125
125
  </g>
@@ -131,7 +131,7 @@ wrapperTag: div
131
131
  <div class="pf-v6-c-masthead__content">
132
132
  <div
133
133
  class="pf-v6-c-toolbar pf-m-static"
134
- id="primary-detail-expanded-example-masthead-toolbar"
134
+ id="primary-detail-expanded-example-docked-toolbar"
135
135
  >
136
136
  <div class="pf-v6-c-toolbar__content">
137
137
  <div class="pf-v6-c-toolbar__content-section">
@@ -253,21 +253,57 @@ wrapperTag: div
253
253
  </li>
254
254
  <li class="pf-v6-c-breadcrumb__item">
255
255
  <span class="pf-v6-c-breadcrumb__item-divider">
256
- <i class="fas fa-angle-right" aria-hidden="true"></i>
256
+ <svg
257
+ class="pf-v6-svg"
258
+ viewBox="0 0 20 20"
259
+ fill="currentColor"
260
+ aria-hidden="true"
261
+ role="img"
262
+ width="1em"
263
+ height="1em"
264
+ >
265
+ <path
266
+ 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"
267
+ />
268
+ </svg>
257
269
  </span>
258
270
 
259
271
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
260
272
  </li>
261
273
  <li class="pf-v6-c-breadcrumb__item">
262
274
  <span class="pf-v6-c-breadcrumb__item-divider">
263
- <i class="fas fa-angle-right" aria-hidden="true"></i>
275
+ <svg
276
+ class="pf-v6-svg"
277
+ viewBox="0 0 20 20"
278
+ fill="currentColor"
279
+ aria-hidden="true"
280
+ role="img"
281
+ width="1em"
282
+ height="1em"
283
+ >
284
+ <path
285
+ 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"
286
+ />
287
+ </svg>
264
288
  </span>
265
289
 
266
290
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
267
291
  </li>
268
292
  <li class="pf-v6-c-breadcrumb__item">
269
293
  <span class="pf-v6-c-breadcrumb__item-divider">
270
- <i class="fas fa-angle-right" aria-hidden="true"></i>
294
+ <svg
295
+ class="pf-v6-svg"
296
+ viewBox="0 0 20 20"
297
+ fill="currentColor"
298
+ aria-hidden="true"
299
+ role="img"
300
+ width="1em"
301
+ height="1em"
302
+ >
303
+ <path
304
+ 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"
305
+ />
306
+ </svg>
271
307
  </span>
272
308
 
273
309
  <a
@@ -426,10 +462,25 @@ wrapperTag: div
426
462
  aria-label="Sort"
427
463
  >
428
464
  <span class="pf-v6-c-button__icon">
429
- <i
430
- class="fas fa-sort-amount-down pf-v6-m-mirror-inline-rtl"
431
- aria-hidden="true"
432
- ></i>
465
+ <span class="pf-v6-c-icon">
466
+ <span
467
+ class="pf-v6-c-icon__content pf-v6-m-mirror-inline-rtl"
468
+ >
469
+ <svg
470
+ class="pf-v6-svg"
471
+ viewBox="0 0 512 512"
472
+ fill="currentColor"
473
+ aria-hidden="true"
474
+ role="img"
475
+ width="1em"
476
+ height="1em"
477
+ >
478
+ <path
479
+ d="M304 416h-64a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h64a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zm-128-64h-48V48a16 16 0 0 0-16-16H80a16 16 0 0 0-16 16v304H16c-14.19 0-21.37 17.24-11.29 27.31l80 96a16 16 0 0 0 22.62 0l80-96C197.35 369.26 190.22 352 176 352zm256-192H240a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h192a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zm-64 128H240a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h128a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zM496 32H240a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h256a16 16 0 0 0 16-16V48a16 16 0 0 0-16-16z"
480
+ />
481
+ </svg>
482
+ </span>
483
+ </span>
433
484
  </span>
434
485
  </button>
435
486
  </div>
@@ -511,10 +562,19 @@ wrapperTag: div
511
562
  aria-label="Go to previous page"
512
563
  >
513
564
  <span class="pf-v6-c-button__icon">
514
- <i
515
- class="fas fa-angle-left"
565
+ <svg
566
+ class="pf-v6-svg"
567
+ viewBox="0 0 256 512"
568
+ fill="currentColor"
516
569
  aria-hidden="true"
517
- ></i>
570
+ role="img"
571
+ width="1em"
572
+ height="1em"
573
+ >
574
+ <path
575
+ 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"
576
+ />
577
+ </svg>
518
578
  </span>
519
579
  </button>
520
580
  </div>
@@ -527,10 +587,19 @@ wrapperTag: div
527
587
  aria-label="Go to next page"
528
588
  >
529
589
  <span class="pf-v6-c-button__icon">
530
- <i
531
- class="fas fa-angle-right"
590
+ <svg
591
+ class="pf-v6-svg"
592
+ viewBox="0 0 256 512"
593
+ fill="currentColor"
532
594
  aria-hidden="true"
533
- ></i>
595
+ role="img"
596
+ width="1em"
597
+ height="1em"
598
+ >
599
+ <path
600
+ 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"
601
+ />
602
+ </svg>
534
603
  </span>
535
604
  </button>
536
605
  </div>
@@ -1093,7 +1162,19 @@ wrapperTag: div
1093
1162
  aria-label="Close drawer panel"
1094
1163
  >
1095
1164
  <span class="pf-v6-c-button__icon">
1096
- <i class="fas fa-times" aria-hidden="true"></i>
1165
+ <svg
1166
+ class="pf-v6-svg"
1167
+ viewBox="0 0 20 20"
1168
+ fill="currentColor"
1169
+ aria-hidden="true"
1170
+ role="img"
1171
+ width="1em"
1172
+ height="1em"
1173
+ >
1174
+ <path
1175
+ d="M17.8 16.2 11.59 10l6.21-6.21c.42-.46.39-1.17-.07-1.59-.43-.4-1.09-.4-1.52 0l-6.2 6.2-6.22-6.19c-.44-.44-1.15-.44-1.59 0-.44.44-.44 1.15 0 1.59l6.2 6.21-6.2 6.2c-.42.46-.39 1.17.07 1.59.43.4 1.09.4 1.52 0L10 11.59l6.2 6.2c.44.44 1.15.44 1.59 0 .44-.45.44-1.16 0-1.6Z"
1176
+ />
1177
+ </svg>
1097
1178
  </span>
1098
1179
  </button>
1099
1180
  </div>
@@ -1112,6 +1193,7 @@ wrapperTag: div
1112
1193
  <div class="pf-v6-c-drawer__body pf-m-no-padding">
1113
1194
  <div
1114
1195
  class="pf-v6-c-tabs pf-m-box pf-m-fill"
1196
+ aria-label="Node 2"
1115
1197
  role="region"
1116
1198
  id="primary-detail-expanded-example-drawer-tabs"
1117
1199
  >
@@ -1122,11 +1204,27 @@ wrapperTag: div
1122
1204
  aria-label="Scroll left"
1123
1205
  >
1124
1206
  <span class="pf-v6-c-button__icon">
1125
- <i class="fas fa-angle-left" aria-hidden="true"></i>
1207
+ <svg
1208
+ class="pf-v6-svg"
1209
+ viewBox="0 0 20 20"
1210
+ fill="currentColor"
1211
+ aria-hidden="true"
1212
+ role="img"
1213
+ width="1em"
1214
+ height="1em"
1215
+ >
1216
+ <path
1217
+ d="m6.41 10 7.29-7.29.02-.02c.38-.4.37-1.03-.02-1.41-.4-.38-1.03-.37-1.41.02L4.64 8.95a1.49 1.49 0 0 0 0 2.12l7.65 7.65c.19.19.44.29.71.29.27 0 .52-.11.71-.29a.996.996 0 0 0 0-1.41l-7.29-7.29Z"
1218
+ />
1219
+ </svg>
1126
1220
  </span>
1127
1221
  </button>
1128
1222
  </div>
1129
- <ul class="pf-v6-c-tabs__list" role="tablist">
1223
+ <ul
1224
+ class="pf-v6-c-tabs__list"
1225
+ role="tablist"
1226
+ aria-label="Node 2"
1227
+ >
1130
1228
  <li
1131
1229
  class="pf-v6-c-tabs__item pf-m-current"
1132
1230
  role="presentation"
@@ -1135,6 +1233,7 @@ wrapperTag: div
1135
1233
  type="button"
1136
1234
  class="pf-v6-c-tabs__link"
1137
1235
  role="tab"
1236
+ aria-selected="true"
1138
1237
  aria-controls="primary-detail-expanded-example-drawer-tabs-tab1-panel"
1139
1238
  id="primary-detail-expanded-example-drawer-tabs-tab1-link"
1140
1239
  >
@@ -1146,6 +1245,7 @@ wrapperTag: div
1146
1245
  type="button"
1147
1246
  class="pf-v6-c-tabs__link"
1148
1247
  role="tab"
1248
+ aria-selected="false"
1149
1249
  aria-controls="primary-detail-expanded-example-drawer-tabs-tab2-panel"
1150
1250
  id="primary-detail-expanded-example-drawer-tabs-tab2-link"
1151
1251
  >
@@ -1160,7 +1260,19 @@ wrapperTag: div
1160
1260
  aria-label="Scroll right"
1161
1261
  >
1162
1262
  <span class="pf-v6-c-button__icon">
1163
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1263
+ <svg
1264
+ class="pf-v6-svg"
1265
+ viewBox="0 0 20 20"
1266
+ fill="currentColor"
1267
+ aria-hidden="true"
1268
+ role="img"
1269
+ width="1em"
1270
+ height="1em"
1271
+ >
1272
+ <path
1273
+ 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"
1274
+ />
1275
+ </svg>
1164
1276
  </span>
1165
1277
  </button>
1166
1278
  </div>
@@ -1282,7 +1394,7 @@ wrapperTag: div
1282
1394
  </div>
1283
1395
  <header
1284
1396
  class="pf-v6-c-masthead pf-m-display-stack pf-m-display-inline-on-lg"
1285
- id="primary-detail-collapsed-example-masthead"
1397
+ id="primary-detail-collapsed-example-docked"
1286
1398
  >
1287
1399
  <div class="pf-v6-c-masthead__main">
1288
1400
  <span class="pf-v6-c-masthead__toggle">
@@ -1325,7 +1437,7 @@ wrapperTag: div
1325
1437
  y1="2.25860997e-13%"
1326
1438
  x2="32%"
1327
1439
  y2="100%"
1328
- id="linearGradient-primary-detail-collapsed-example-masthead"
1440
+ id="linearGradient-primary-detail-collapsed-example-docked"
1329
1441
  >
1330
1442
  <stop stop-color="#2B9AF3" offset="0%" />
1331
1443
  <stop
@@ -1379,11 +1491,11 @@ wrapperTag: div
1379
1491
  />
1380
1492
  <path
1381
1493
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
1382
- fill="url(#linearGradient-primary-detail-collapsed-example-masthead)"
1494
+ fill="url(#linearGradient-primary-detail-collapsed-example-docked)"
1383
1495
  />
1384
1496
  <path
1385
1497
  d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z"
1386
- fill="url(#linearGradient-primary-detail-collapsed-example-masthead)"
1498
+ fill="url(#linearGradient-primary-detail-collapsed-example-docked)"
1387
1499
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
1388
1500
  />
1389
1501
  </g>
@@ -1395,7 +1507,7 @@ wrapperTag: div
1395
1507
  <div class="pf-v6-c-masthead__content">
1396
1508
  <div
1397
1509
  class="pf-v6-c-toolbar pf-m-static"
1398
- id="primary-detail-collapsed-example-masthead-toolbar"
1510
+ id="primary-detail-collapsed-example-docked-toolbar"
1399
1511
  >
1400
1512
  <div class="pf-v6-c-toolbar__content">
1401
1513
  <div class="pf-v6-c-toolbar__content-section">
@@ -1517,21 +1629,57 @@ wrapperTag: div
1517
1629
  </li>
1518
1630
  <li class="pf-v6-c-breadcrumb__item">
1519
1631
  <span class="pf-v6-c-breadcrumb__item-divider">
1520
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1632
+ <svg
1633
+ class="pf-v6-svg"
1634
+ viewBox="0 0 20 20"
1635
+ fill="currentColor"
1636
+ aria-hidden="true"
1637
+ role="img"
1638
+ width="1em"
1639
+ height="1em"
1640
+ >
1641
+ <path
1642
+ 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"
1643
+ />
1644
+ </svg>
1521
1645
  </span>
1522
1646
 
1523
1647
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1524
1648
  </li>
1525
1649
  <li class="pf-v6-c-breadcrumb__item">
1526
1650
  <span class="pf-v6-c-breadcrumb__item-divider">
1527
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1651
+ <svg
1652
+ class="pf-v6-svg"
1653
+ viewBox="0 0 20 20"
1654
+ fill="currentColor"
1655
+ aria-hidden="true"
1656
+ role="img"
1657
+ width="1em"
1658
+ height="1em"
1659
+ >
1660
+ <path
1661
+ 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"
1662
+ />
1663
+ </svg>
1528
1664
  </span>
1529
1665
 
1530
1666
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1531
1667
  </li>
1532
1668
  <li class="pf-v6-c-breadcrumb__item">
1533
1669
  <span class="pf-v6-c-breadcrumb__item-divider">
1534
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1670
+ <svg
1671
+ class="pf-v6-svg"
1672
+ viewBox="0 0 20 20"
1673
+ fill="currentColor"
1674
+ aria-hidden="true"
1675
+ role="img"
1676
+ width="1em"
1677
+ height="1em"
1678
+ >
1679
+ <path
1680
+ 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"
1681
+ />
1682
+ </svg>
1535
1683
  </span>
1536
1684
 
1537
1685
  <a
@@ -1691,10 +1839,25 @@ wrapperTag: div
1691
1839
  aria-label="Sort"
1692
1840
  >
1693
1841
  <span class="pf-v6-c-button__icon">
1694
- <i
1695
- class="fas fa-sort-amount-down pf-v6-m-mirror-inline-rtl"
1696
- aria-hidden="true"
1697
- ></i>
1842
+ <span class="pf-v6-c-icon">
1843
+ <span
1844
+ class="pf-v6-c-icon__content pf-v6-m-mirror-inline-rtl"
1845
+ >
1846
+ <svg
1847
+ class="pf-v6-svg"
1848
+ viewBox="0 0 512 512"
1849
+ fill="currentColor"
1850
+ aria-hidden="true"
1851
+ role="img"
1852
+ width="1em"
1853
+ height="1em"
1854
+ >
1855
+ <path
1856
+ d="M304 416h-64a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h64a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zm-128-64h-48V48a16 16 0 0 0-16-16H80a16 16 0 0 0-16 16v304H16c-14.19 0-21.37 17.24-11.29 27.31l80 96a16 16 0 0 0 22.62 0l80-96C197.35 369.26 190.22 352 176 352zm256-192H240a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h192a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zm-64 128H240a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h128a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zM496 32H240a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h256a16 16 0 0 0 16-16V48a16 16 0 0 0-16-16z"
1857
+ />
1858
+ </svg>
1859
+ </span>
1860
+ </span>
1698
1861
  </span>
1699
1862
  </button>
1700
1863
  </div>
@@ -1776,10 +1939,19 @@ wrapperTag: div
1776
1939
  aria-label="Go to previous page"
1777
1940
  >
1778
1941
  <span class="pf-v6-c-button__icon">
1779
- <i
1780
- class="fas fa-angle-left"
1942
+ <svg
1943
+ class="pf-v6-svg"
1944
+ viewBox="0 0 256 512"
1945
+ fill="currentColor"
1781
1946
  aria-hidden="true"
1782
- ></i>
1947
+ role="img"
1948
+ width="1em"
1949
+ height="1em"
1950
+ >
1951
+ <path
1952
+ 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"
1953
+ />
1954
+ </svg>
1783
1955
  </span>
1784
1956
  </button>
1785
1957
  </div>
@@ -1792,10 +1964,19 @@ wrapperTag: div
1792
1964
  aria-label="Go to next page"
1793
1965
  >
1794
1966
  <span class="pf-v6-c-button__icon">
1795
- <i
1796
- class="fas fa-angle-right"
1967
+ <svg
1968
+ class="pf-v6-svg"
1969
+ viewBox="0 0 256 512"
1970
+ fill="currentColor"
1797
1971
  aria-hidden="true"
1798
- ></i>
1972
+ role="img"
1973
+ width="1em"
1974
+ height="1em"
1975
+ >
1976
+ <path
1977
+ 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"
1978
+ />
1979
+ </svg>
1799
1980
  </span>
1800
1981
  </button>
1801
1982
  </div>
@@ -2358,7 +2539,19 @@ wrapperTag: div
2358
2539
  aria-label="Close drawer panel"
2359
2540
  >
2360
2541
  <span class="pf-v6-c-button__icon">
2361
- <i class="fas fa-times" aria-hidden="true"></i>
2542
+ <svg
2543
+ class="pf-v6-svg"
2544
+ viewBox="0 0 20 20"
2545
+ fill="currentColor"
2546
+ aria-hidden="true"
2547
+ role="img"
2548
+ width="1em"
2549
+ height="1em"
2550
+ >
2551
+ <path
2552
+ d="M17.8 16.2 11.59 10l6.21-6.21c.42-.46.39-1.17-.07-1.59-.43-.4-1.09-.4-1.52 0l-6.2 6.2-6.22-6.19c-.44-.44-1.15-.44-1.59 0-.44.44-.44 1.15 0 1.59l6.2 6.21-6.2 6.2c-.42.46-.39 1.17.07 1.59.43.4 1.09.4 1.52 0L10 11.59l6.2 6.2c.44.44 1.15.44 1.59 0 .44-.45.44-1.16 0-1.6Z"
2553
+ />
2554
+ </svg>
2362
2555
  </span>
2363
2556
  </button>
2364
2557
  </div>
@@ -2466,7 +2659,7 @@ wrapperTag: div
2466
2659
  </div>
2467
2660
  <header
2468
2661
  class="pf-v6-c-masthead pf-m-display-stack pf-m-display-inline-on-lg"
2469
- id="primary-detail-content-body-padding-example-masthead"
2662
+ id="primary-detail-content-body-padding-example-docked"
2470
2663
  >
2471
2664
  <div class="pf-v6-c-masthead__main">
2472
2665
  <span class="pf-v6-c-masthead__toggle">
@@ -2509,7 +2702,7 @@ wrapperTag: div
2509
2702
  y1="2.25860997e-13%"
2510
2703
  x2="32%"
2511
2704
  y2="100%"
2512
- id="linearGradient-primary-detail-content-body-padding-example-masthead"
2705
+ id="linearGradient-primary-detail-content-body-padding-example-docked"
2513
2706
  >
2514
2707
  <stop stop-color="#2B9AF3" offset="0%" />
2515
2708
  <stop
@@ -2563,11 +2756,11 @@ wrapperTag: div
2563
2756
  />
2564
2757
  <path
2565
2758
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
2566
- fill="url(#linearGradient-primary-detail-content-body-padding-example-masthead)"
2759
+ fill="url(#linearGradient-primary-detail-content-body-padding-example-docked)"
2567
2760
  />
2568
2761
  <path
2569
2762
  d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z"
2570
- fill="url(#linearGradient-primary-detail-content-body-padding-example-masthead)"
2763
+ fill="url(#linearGradient-primary-detail-content-body-padding-example-docked)"
2571
2764
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
2572
2765
  />
2573
2766
  </g>
@@ -2579,7 +2772,7 @@ wrapperTag: div
2579
2772
  <div class="pf-v6-c-masthead__content">
2580
2773
  <div
2581
2774
  class="pf-v6-c-toolbar pf-m-static"
2582
- id="primary-detail-content-body-padding-example-masthead-toolbar"
2775
+ id="primary-detail-content-body-padding-example-docked-toolbar"
2583
2776
  >
2584
2777
  <div class="pf-v6-c-toolbar__content">
2585
2778
  <div class="pf-v6-c-toolbar__content-section">
@@ -2701,21 +2894,57 @@ wrapperTag: div
2701
2894
  </li>
2702
2895
  <li class="pf-v6-c-breadcrumb__item">
2703
2896
  <span class="pf-v6-c-breadcrumb__item-divider">
2704
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2897
+ <svg
2898
+ class="pf-v6-svg"
2899
+ viewBox="0 0 20 20"
2900
+ fill="currentColor"
2901
+ aria-hidden="true"
2902
+ role="img"
2903
+ width="1em"
2904
+ height="1em"
2905
+ >
2906
+ <path
2907
+ 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"
2908
+ />
2909
+ </svg>
2705
2910
  </span>
2706
2911
 
2707
2912
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
2708
2913
  </li>
2709
2914
  <li class="pf-v6-c-breadcrumb__item">
2710
2915
  <span class="pf-v6-c-breadcrumb__item-divider">
2711
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2916
+ <svg
2917
+ class="pf-v6-svg"
2918
+ viewBox="0 0 20 20"
2919
+ fill="currentColor"
2920
+ aria-hidden="true"
2921
+ role="img"
2922
+ width="1em"
2923
+ height="1em"
2924
+ >
2925
+ <path
2926
+ 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"
2927
+ />
2928
+ </svg>
2712
2929
  </span>
2713
2930
 
2714
2931
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
2715
2932
  </li>
2716
2933
  <li class="pf-v6-c-breadcrumb__item">
2717
2934
  <span class="pf-v6-c-breadcrumb__item-divider">
2718
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2935
+ <svg
2936
+ class="pf-v6-svg"
2937
+ viewBox="0 0 20 20"
2938
+ fill="currentColor"
2939
+ aria-hidden="true"
2940
+ role="img"
2941
+ width="1em"
2942
+ height="1em"
2943
+ >
2944
+ <path
2945
+ 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"
2946
+ />
2947
+ </svg>
2719
2948
  </span>
2720
2949
 
2721
2950
  <a
@@ -2819,10 +3048,25 @@ wrapperTag: div
2819
3048
  aria-label="Sort"
2820
3049
  >
2821
3050
  <span class="pf-v6-c-button__icon">
2822
- <i
2823
- class="fas fa-sort-amount-down pf-v6-m-mirror-inline-rtl"
2824
- aria-hidden="true"
2825
- ></i>
3051
+ <span class="pf-v6-c-icon">
3052
+ <span
3053
+ class="pf-v6-c-icon__content pf-v6-m-mirror-inline-rtl"
3054
+ >
3055
+ <svg
3056
+ class="pf-v6-svg"
3057
+ viewBox="0 0 512 512"
3058
+ fill="currentColor"
3059
+ aria-hidden="true"
3060
+ role="img"
3061
+ width="1em"
3062
+ height="1em"
3063
+ >
3064
+ <path
3065
+ d="M304 416h-64a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h64a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zm-128-64h-48V48a16 16 0 0 0-16-16H80a16 16 0 0 0-16 16v304H16c-14.19 0-21.37 17.24-11.29 27.31l80 96a16 16 0 0 0 22.62 0l80-96C197.35 369.26 190.22 352 176 352zm256-192H240a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h192a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zm-64 128H240a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h128a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zM496 32H240a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h256a16 16 0 0 0 16-16V48a16 16 0 0 0-16-16z"
3066
+ />
3067
+ </svg>
3068
+ </span>
3069
+ </span>
2826
3070
  </span>
2827
3071
  </button>
2828
3072
  </div>
@@ -2904,10 +3148,19 @@ wrapperTag: div
2904
3148
  aria-label="Go to previous page"
2905
3149
  >
2906
3150
  <span class="pf-v6-c-button__icon">
2907
- <i
2908
- class="fas fa-angle-left"
3151
+ <svg
3152
+ class="pf-v6-svg"
3153
+ viewBox="0 0 256 512"
3154
+ fill="currentColor"
2909
3155
  aria-hidden="true"
2910
- ></i>
3156
+ role="img"
3157
+ width="1em"
3158
+ height="1em"
3159
+ >
3160
+ <path
3161
+ 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"
3162
+ />
3163
+ </svg>
2911
3164
  </span>
2912
3165
  </button>
2913
3166
  </div>
@@ -2920,10 +3173,19 @@ wrapperTag: div
2920
3173
  aria-label="Go to next page"
2921
3174
  >
2922
3175
  <span class="pf-v6-c-button__icon">
2923
- <i
2924
- class="fas fa-angle-right"
3176
+ <svg
3177
+ class="pf-v6-svg"
3178
+ viewBox="0 0 256 512"
3179
+ fill="currentColor"
2925
3180
  aria-hidden="true"
2926
- ></i>
3181
+ role="img"
3182
+ width="1em"
3183
+ height="1em"
3184
+ >
3185
+ <path
3186
+ 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"
3187
+ />
3188
+ </svg>
2927
3189
  </span>
2928
3190
  </button>
2929
3191
  </div>
@@ -3486,7 +3748,19 @@ wrapperTag: div
3486
3748
  aria-label="Close drawer panel"
3487
3749
  >
3488
3750
  <span class="pf-v6-c-button__icon">
3489
- <i class="fas fa-times" aria-hidden="true"></i>
3751
+ <svg
3752
+ class="pf-v6-svg"
3753
+ viewBox="0 0 20 20"
3754
+ fill="currentColor"
3755
+ aria-hidden="true"
3756
+ role="img"
3757
+ width="1em"
3758
+ height="1em"
3759
+ >
3760
+ <path
3761
+ d="M17.8 16.2 11.59 10l6.21-6.21c.42-.46.39-1.17-.07-1.59-.43-.4-1.09-.4-1.52 0l-6.2 6.2-6.22-6.19c-.44-.44-1.15-.44-1.59 0-.44.44-.44 1.15 0 1.59l6.2 6.21-6.2 6.2c-.42.46-.39 1.17.07 1.59.43.4 1.09.4 1.52 0L10 11.59l6.2 6.2c.44.44 1.15.44 1.59 0 .44-.45.44-1.16 0-1.6Z"
3762
+ />
3763
+ </svg>
3490
3764
  </span>
3491
3765
  </button>
3492
3766
  </div>
@@ -3594,7 +3868,7 @@ wrapperTag: div
3594
3868
  </div>
3595
3869
  <header
3596
3870
  class="pf-v6-c-masthead pf-m-display-stack pf-m-display-inline-on-lg"
3597
- id="primary-detail-card-view-expanded-example-masthead"
3871
+ id="primary-detail-card-view-expanded-example-docked"
3598
3872
  >
3599
3873
  <div class="pf-v6-c-masthead__main">
3600
3874
  <span class="pf-v6-c-masthead__toggle">
@@ -3637,7 +3911,7 @@ wrapperTag: div
3637
3911
  y1="2.25860997e-13%"
3638
3912
  x2="32%"
3639
3913
  y2="100%"
3640
- id="linearGradient-primary-detail-card-view-expanded-example-masthead"
3914
+ id="linearGradient-primary-detail-card-view-expanded-example-docked"
3641
3915
  >
3642
3916
  <stop stop-color="#2B9AF3" offset="0%" />
3643
3917
  <stop
@@ -3691,11 +3965,11 @@ wrapperTag: div
3691
3965
  />
3692
3966
  <path
3693
3967
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
3694
- fill="url(#linearGradient-primary-detail-card-view-expanded-example-masthead)"
3968
+ fill="url(#linearGradient-primary-detail-card-view-expanded-example-docked)"
3695
3969
  />
3696
3970
  <path
3697
3971
  d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z"
3698
- fill="url(#linearGradient-primary-detail-card-view-expanded-example-masthead)"
3972
+ fill="url(#linearGradient-primary-detail-card-view-expanded-example-docked)"
3699
3973
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
3700
3974
  />
3701
3975
  </g>
@@ -3707,7 +3981,7 @@ wrapperTag: div
3707
3981
  <div class="pf-v6-c-masthead__content">
3708
3982
  <div
3709
3983
  class="pf-v6-c-toolbar pf-m-static"
3710
- id="primary-detail-card-view-expanded-example-masthead-toolbar"
3984
+ id="primary-detail-card-view-expanded-example-docked-toolbar"
3711
3985
  >
3712
3986
  <div class="pf-v6-c-toolbar__content">
3713
3987
  <div class="pf-v6-c-toolbar__content-section">
@@ -3829,21 +4103,57 @@ wrapperTag: div
3829
4103
  </li>
3830
4104
  <li class="pf-v6-c-breadcrumb__item">
3831
4105
  <span class="pf-v6-c-breadcrumb__item-divider">
3832
- <i class="fas fa-angle-right" aria-hidden="true"></i>
4106
+ <svg
4107
+ class="pf-v6-svg"
4108
+ viewBox="0 0 20 20"
4109
+ fill="currentColor"
4110
+ aria-hidden="true"
4111
+ role="img"
4112
+ width="1em"
4113
+ height="1em"
4114
+ >
4115
+ <path
4116
+ 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"
4117
+ />
4118
+ </svg>
3833
4119
  </span>
3834
4120
 
3835
4121
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
3836
4122
  </li>
3837
4123
  <li class="pf-v6-c-breadcrumb__item">
3838
4124
  <span class="pf-v6-c-breadcrumb__item-divider">
3839
- <i class="fas fa-angle-right" aria-hidden="true"></i>
4125
+ <svg
4126
+ class="pf-v6-svg"
4127
+ viewBox="0 0 20 20"
4128
+ fill="currentColor"
4129
+ aria-hidden="true"
4130
+ role="img"
4131
+ width="1em"
4132
+ height="1em"
4133
+ >
4134
+ <path
4135
+ 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"
4136
+ />
4137
+ </svg>
3840
4138
  </span>
3841
4139
 
3842
4140
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
3843
4141
  </li>
3844
4142
  <li class="pf-v6-c-breadcrumb__item">
3845
4143
  <span class="pf-v6-c-breadcrumb__item-divider">
3846
- <i class="fas fa-angle-right" aria-hidden="true"></i>
4144
+ <svg
4145
+ class="pf-v6-svg"
4146
+ viewBox="0 0 20 20"
4147
+ fill="currentColor"
4148
+ aria-hidden="true"
4149
+ role="img"
4150
+ width="1em"
4151
+ height="1em"
4152
+ >
4153
+ <path
4154
+ 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"
4155
+ />
4156
+ </svg>
3847
4157
  </span>
3848
4158
 
3849
4159
  <a
@@ -3983,10 +4293,25 @@ wrapperTag: div
3983
4293
  aria-label="Sort"
3984
4294
  >
3985
4295
  <span class="pf-v6-c-button__icon">
3986
- <i
3987
- class="fas fa-sort-amount-down pf-v6-m-mirror-inline-rtl"
3988
- aria-hidden="true"
3989
- ></i>
4296
+ <span class="pf-v6-c-icon">
4297
+ <span
4298
+ class="pf-v6-c-icon__content pf-v6-m-mirror-inline-rtl"
4299
+ >
4300
+ <svg
4301
+ class="pf-v6-svg"
4302
+ viewBox="0 0 512 512"
4303
+ fill="currentColor"
4304
+ aria-hidden="true"
4305
+ role="img"
4306
+ width="1em"
4307
+ height="1em"
4308
+ >
4309
+ <path
4310
+ d="M304 416h-64a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h64a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zm-128-64h-48V48a16 16 0 0 0-16-16H80a16 16 0 0 0-16 16v304H16c-14.19 0-21.37 17.24-11.29 27.31l80 96a16 16 0 0 0 22.62 0l80-96C197.35 369.26 190.22 352 176 352zm256-192H240a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h192a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zm-64 128H240a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h128a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zM496 32H240a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h256a16 16 0 0 0 16-16V48a16 16 0 0 0-16-16z"
4311
+ />
4312
+ </svg>
4313
+ </span>
4314
+ </span>
3990
4315
  </span>
3991
4316
  </button>
3992
4317
  </div>
@@ -4045,7 +4370,19 @@ wrapperTag: div
4045
4370
  aria-label="Grid view"
4046
4371
  >
4047
4372
  <span class="pf-v6-c-button__icon">
4048
- <i class="fas fa-th" aria-hidden="true"></i>
4373
+ <svg
4374
+ class="pf-v6-svg"
4375
+ viewBox="0 0 512 512"
4376
+ fill="currentColor"
4377
+ aria-hidden="true"
4378
+ role="img"
4379
+ width="1em"
4380
+ height="1em"
4381
+ >
4382
+ <path
4383
+ 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"
4384
+ />
4385
+ </svg>
4049
4386
  </span>
4050
4387
  </button>
4051
4388
  </div>
@@ -4056,7 +4393,19 @@ wrapperTag: div
4056
4393
  aria-label="List view"
4057
4394
  >
4058
4395
  <span class="pf-v6-c-button__icon">
4059
- <i class="fas fa-list-ul" aria-hidden="true"></i>
4396
+ <svg
4397
+ class="pf-v6-svg"
4398
+ viewBox="0 0 512 512"
4399
+ fill="currentColor"
4400
+ aria-hidden="true"
4401
+ role="img"
4402
+ width="1em"
4403
+ height="1em"
4404
+ >
4405
+ <path
4406
+ d="M48 48a48 48 0 1 0 48 48 48 48 0 0 0-48-48zm0 160a48 48 0 1 0 48 48 48 48 0 0 0-48-48zm0 160a48 48 0 1 0 48 48 48 48 0 0 0-48-48zm448 16H176a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h320a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zm0-320H176a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h320a16 16 0 0 0 16-16V80a16 16 0 0 0-16-16zm0 160H176a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h320a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16z"
4407
+ />
4408
+ </svg>
4060
4409
  </span>
4061
4410
  </button>
4062
4411
  </div>
@@ -4100,7 +4449,19 @@ wrapperTag: div
4100
4449
  aria-label="Go to previous page"
4101
4450
  >
4102
4451
  <span class="pf-v6-c-button__icon">
4103
- <i class="fas fa-angle-left" aria-hidden="true"></i>
4452
+ <svg
4453
+ class="pf-v6-svg"
4454
+ viewBox="0 0 256 512"
4455
+ fill="currentColor"
4456
+ aria-hidden="true"
4457
+ role="img"
4458
+ width="1em"
4459
+ height="1em"
4460
+ >
4461
+ <path
4462
+ 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"
4463
+ />
4464
+ </svg>
4104
4465
  </span>
4105
4466
  </button>
4106
4467
  </div>
@@ -4113,10 +4474,19 @@ wrapperTag: div
4113
4474
  aria-label="Go to next page"
4114
4475
  >
4115
4476
  <span class="pf-v6-c-button__icon">
4116
- <i
4117
- class="fas fa-angle-right"
4477
+ <svg
4478
+ class="pf-v6-svg"
4479
+ viewBox="0 0 256 512"
4480
+ fill="currentColor"
4118
4481
  aria-hidden="true"
4119
- ></i>
4482
+ role="img"
4483
+ width="1em"
4484
+ height="1em"
4485
+ >
4486
+ <path
4487
+ 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"
4488
+ />
4489
+ </svg>
4120
4490
  </span>
4121
4491
  </button>
4122
4492
  </div>
@@ -4611,7 +4981,19 @@ wrapperTag: div
4611
4981
  aria-label="Close drawer panel"
4612
4982
  >
4613
4983
  <span class="pf-v6-c-button__icon">
4614
- <i class="fas fa-times" aria-hidden="true"></i>
4984
+ <svg
4985
+ class="pf-v6-svg"
4986
+ viewBox="0 0 20 20"
4987
+ fill="currentColor"
4988
+ aria-hidden="true"
4989
+ role="img"
4990
+ width="1em"
4991
+ height="1em"
4992
+ >
4993
+ <path
4994
+ d="M17.8 16.2 11.59 10l6.21-6.21c.42-.46.39-1.17-.07-1.59-.43-.4-1.09-.4-1.52 0l-6.2 6.2-6.22-6.19c-.44-.44-1.15-.44-1.59 0-.44.44-.44 1.15 0 1.59l6.2 6.21-6.2 6.2c-.42.46-.39 1.17.07 1.59.43.4 1.09.4 1.52 0L10 11.59l6.2 6.2c.44.44 1.15.44 1.59 0 .44-.45.44-1.16 0-1.6Z"
4995
+ />
4996
+ </svg>
4615
4997
  </span>
4616
4998
  </button>
4617
4999
  </div>
@@ -4721,7 +5103,7 @@ wrapperTag: div
4721
5103
  </div>
4722
5104
  <header
4723
5105
  class="pf-v6-c-masthead"
4724
- id="primary-detail-card-simple-list-on-mobile-example-masthead"
5106
+ id="primary-detail-card-simple-list-on-mobile-example-docked"
4725
5107
  >
4726
5108
  <div class="pf-v6-c-masthead__main">
4727
5109
  <span class="pf-v6-c-masthead__toggle">
@@ -4764,7 +5146,7 @@ wrapperTag: div
4764
5146
  y1="2.25860997e-13%"
4765
5147
  x2="32%"
4766
5148
  y2="100%"
4767
- id="linearGradient-primary-detail-card-simple-list-on-mobile-example-masthead"
5149
+ id="linearGradient-primary-detail-card-simple-list-on-mobile-example-docked"
4768
5150
  >
4769
5151
  <stop stop-color="#2B9AF3" offset="0%" />
4770
5152
  <stop
@@ -4818,11 +5200,11 @@ wrapperTag: div
4818
5200
  />
4819
5201
  <path
4820
5202
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
4821
- fill="url(#linearGradient-primary-detail-card-simple-list-on-mobile-example-masthead)"
5203
+ fill="url(#linearGradient-primary-detail-card-simple-list-on-mobile-example-docked)"
4822
5204
  />
4823
5205
  <path
4824
5206
  d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z"
4825
- fill="url(#linearGradient-primary-detail-card-simple-list-on-mobile-example-masthead)"
5207
+ fill="url(#linearGradient-primary-detail-card-simple-list-on-mobile-example-docked)"
4826
5208
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
4827
5209
  />
4828
5210
  </g>
@@ -4834,7 +5216,7 @@ wrapperTag: div
4834
5216
  <div class="pf-v6-c-masthead__content">
4835
5217
  <div
4836
5218
  class="pf-v6-c-toolbar pf-m-static"
4837
- id="primary-detail-card-simple-list-on-mobile-example-masthead-toolbar"
5219
+ id="primary-detail-card-simple-list-on-mobile-example-docked-toolbar"
4838
5220
  >
4839
5221
  <div class="pf-v6-c-toolbar__content">
4840
5222
  <div class="pf-v6-c-toolbar__content-section">
@@ -4956,21 +5338,57 @@ wrapperTag: div
4956
5338
  </li>
4957
5339
  <li class="pf-v6-c-breadcrumb__item">
4958
5340
  <span class="pf-v6-c-breadcrumb__item-divider">
4959
- <i class="fas fa-angle-right" aria-hidden="true"></i>
5341
+ <svg
5342
+ class="pf-v6-svg"
5343
+ viewBox="0 0 20 20"
5344
+ fill="currentColor"
5345
+ aria-hidden="true"
5346
+ role="img"
5347
+ width="1em"
5348
+ height="1em"
5349
+ >
5350
+ <path
5351
+ 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"
5352
+ />
5353
+ </svg>
4960
5354
  </span>
4961
5355
 
4962
5356
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
4963
5357
  </li>
4964
5358
  <li class="pf-v6-c-breadcrumb__item">
4965
5359
  <span class="pf-v6-c-breadcrumb__item-divider">
4966
- <i class="fas fa-angle-right" aria-hidden="true"></i>
5360
+ <svg
5361
+ class="pf-v6-svg"
5362
+ viewBox="0 0 20 20"
5363
+ fill="currentColor"
5364
+ aria-hidden="true"
5365
+ role="img"
5366
+ width="1em"
5367
+ height="1em"
5368
+ >
5369
+ <path
5370
+ 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"
5371
+ />
5372
+ </svg>
4967
5373
  </span>
4968
5374
 
4969
5375
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
4970
5376
  </li>
4971
5377
  <li class="pf-v6-c-breadcrumb__item">
4972
5378
  <span class="pf-v6-c-breadcrumb__item-divider">
4973
- <i class="fas fa-angle-right" aria-hidden="true"></i>
5379
+ <svg
5380
+ class="pf-v6-svg"
5381
+ viewBox="0 0 20 20"
5382
+ fill="currentColor"
5383
+ aria-hidden="true"
5384
+ role="img"
5385
+ width="1em"
5386
+ height="1em"
5387
+ >
5388
+ <path
5389
+ 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"
5390
+ />
5391
+ </svg>
4974
5392
  </span>
4975
5393
 
4976
5394
  <a
@@ -5088,7 +5506,19 @@ wrapperTag: div
5088
5506
  aria-label="Close drawer panel"
5089
5507
  >
5090
5508
  <span class="pf-v6-c-button__icon">
5091
- <i class="fas fa-times" aria-hidden="true"></i>
5509
+ <svg
5510
+ class="pf-v6-svg"
5511
+ viewBox="0 0 20 20"
5512
+ fill="currentColor"
5513
+ aria-hidden="true"
5514
+ role="img"
5515
+ width="1em"
5516
+ height="1em"
5517
+ >
5518
+ <path
5519
+ d="M17.8 16.2 11.59 10l6.21-6.21c.42-.46.39-1.17-.07-1.59-.43-.4-1.09-.4-1.52 0l-6.2 6.2-6.22-6.19c-.44-.44-1.15-.44-1.59 0-.44.44-.44 1.15 0 1.59l6.2 6.21-6.2 6.2c-.42.46-.39 1.17.07 1.59.43.4 1.09.4 1.52 0L10 11.59l6.2 6.2c.44.44 1.15.44 1.59 0 .44-.45.44-1.16 0-1.6Z"
5520
+ />
5521
+ </svg>
5092
5522
  </span>
5093
5523
  </button>
5094
5524
  </div>
@@ -5194,7 +5624,7 @@ wrapperTag: div
5194
5624
  </div>
5195
5625
  <header
5196
5626
  class="pf-v6-c-masthead"
5197
- id="primary-detail-card-data-list-example-masthead"
5627
+ id="primary-detail-card-data-list-example-docked"
5198
5628
  >
5199
5629
  <div class="pf-v6-c-masthead__main">
5200
5630
  <span class="pf-v6-c-masthead__toggle">
@@ -5237,7 +5667,7 @@ wrapperTag: div
5237
5667
  y1="2.25860997e-13%"
5238
5668
  x2="32%"
5239
5669
  y2="100%"
5240
- id="linearGradient-primary-detail-card-data-list-example-masthead"
5670
+ id="linearGradient-primary-detail-card-data-list-example-docked"
5241
5671
  >
5242
5672
  <stop stop-color="#2B9AF3" offset="0%" />
5243
5673
  <stop
@@ -5291,11 +5721,11 @@ wrapperTag: div
5291
5721
  />
5292
5722
  <path
5293
5723
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
5294
- fill="url(#linearGradient-primary-detail-card-data-list-example-masthead)"
5724
+ fill="url(#linearGradient-primary-detail-card-data-list-example-docked)"
5295
5725
  />
5296
5726
  <path
5297
5727
  d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z"
5298
- fill="url(#linearGradient-primary-detail-card-data-list-example-masthead)"
5728
+ fill="url(#linearGradient-primary-detail-card-data-list-example-docked)"
5299
5729
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
5300
5730
  />
5301
5731
  </g>
@@ -5307,7 +5737,7 @@ wrapperTag: div
5307
5737
  <div class="pf-v6-c-masthead__content">
5308
5738
  <div
5309
5739
  class="pf-v6-c-toolbar pf-m-static"
5310
- id="primary-detail-card-data-list-example-masthead-toolbar"
5740
+ id="primary-detail-card-data-list-example-docked-toolbar"
5311
5741
  >
5312
5742
  <div class="pf-v6-c-toolbar__content">
5313
5743
  <div class="pf-v6-c-toolbar__content-section">
@@ -5429,21 +5859,57 @@ wrapperTag: div
5429
5859
  </li>
5430
5860
  <li class="pf-v6-c-breadcrumb__item">
5431
5861
  <span class="pf-v6-c-breadcrumb__item-divider">
5432
- <i class="fas fa-angle-right" aria-hidden="true"></i>
5862
+ <svg
5863
+ class="pf-v6-svg"
5864
+ viewBox="0 0 20 20"
5865
+ fill="currentColor"
5866
+ aria-hidden="true"
5867
+ role="img"
5868
+ width="1em"
5869
+ height="1em"
5870
+ >
5871
+ <path
5872
+ 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"
5873
+ />
5874
+ </svg>
5433
5875
  </span>
5434
5876
 
5435
5877
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
5436
5878
  </li>
5437
5879
  <li class="pf-v6-c-breadcrumb__item">
5438
5880
  <span class="pf-v6-c-breadcrumb__item-divider">
5439
- <i class="fas fa-angle-right" aria-hidden="true"></i>
5881
+ <svg
5882
+ class="pf-v6-svg"
5883
+ viewBox="0 0 20 20"
5884
+ fill="currentColor"
5885
+ aria-hidden="true"
5886
+ role="img"
5887
+ width="1em"
5888
+ height="1em"
5889
+ >
5890
+ <path
5891
+ 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"
5892
+ />
5893
+ </svg>
5440
5894
  </span>
5441
5895
 
5442
5896
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
5443
5897
  </li>
5444
5898
  <li class="pf-v6-c-breadcrumb__item">
5445
5899
  <span class="pf-v6-c-breadcrumb__item-divider">
5446
- <i class="fas fa-angle-right" aria-hidden="true"></i>
5900
+ <svg
5901
+ class="pf-v6-svg"
5902
+ viewBox="0 0 20 20"
5903
+ fill="currentColor"
5904
+ aria-hidden="true"
5905
+ role="img"
5906
+ width="1em"
5907
+ height="1em"
5908
+ >
5909
+ <path
5910
+ 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"
5911
+ />
5912
+ </svg>
5447
5913
  </span>
5448
5914
 
5449
5915
  <a
@@ -5693,7 +6159,19 @@ wrapperTag: div
5693
6159
  aria-label="Close drawer panel"
5694
6160
  >
5695
6161
  <span class="pf-v6-c-button__icon">
5696
- <i class="fas fa-times" aria-hidden="true"></i>
6162
+ <svg
6163
+ class="pf-v6-svg"
6164
+ viewBox="0 0 20 20"
6165
+ fill="currentColor"
6166
+ aria-hidden="true"
6167
+ role="img"
6168
+ width="1em"
6169
+ height="1em"
6170
+ >
6171
+ <path
6172
+ d="M17.8 16.2 11.59 10l6.21-6.21c.42-.46.39-1.17-.07-1.59-.43-.4-1.09-.4-1.52 0l-6.2 6.2-6.22-6.19c-.44-.44-1.15-.44-1.59 0-.44.44-.44 1.15 0 1.59l6.2 6.21-6.2 6.2c-.42.46-.39 1.17.07 1.59.43.4 1.09.4 1.52 0L10 11.59l6.2 6.2c.44.44 1.15.44 1.59 0 .44-.45.44-1.16 0-1.6Z"
6173
+ />
6174
+ </svg>
5697
6175
  </span>
5698
6176
  </button>
5699
6177
  </div>
@@ -5799,7 +6277,7 @@ wrapperTag: div
5799
6277
  </div>
5800
6278
  <header
5801
6279
  class="pf-v6-c-masthead"
5802
- id="primary-detail-inline-modifier-example-masthead"
6280
+ id="primary-detail-inline-modifier-example-docked"
5803
6281
  >
5804
6282
  <div class="pf-v6-c-masthead__main">
5805
6283
  <span class="pf-v6-c-masthead__toggle">
@@ -5842,7 +6320,7 @@ wrapperTag: div
5842
6320
  y1="2.25860997e-13%"
5843
6321
  x2="32%"
5844
6322
  y2="100%"
5845
- id="linearGradient-primary-detail-inline-modifier-example-masthead"
6323
+ id="linearGradient-primary-detail-inline-modifier-example-docked"
5846
6324
  >
5847
6325
  <stop stop-color="#2B9AF3" offset="0%" />
5848
6326
  <stop
@@ -5896,11 +6374,11 @@ wrapperTag: div
5896
6374
  />
5897
6375
  <path
5898
6376
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
5899
- fill="url(#linearGradient-primary-detail-inline-modifier-example-masthead)"
6377
+ fill="url(#linearGradient-primary-detail-inline-modifier-example-docked)"
5900
6378
  />
5901
6379
  <path
5902
6380
  d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z"
5903
- fill="url(#linearGradient-primary-detail-inline-modifier-example-masthead)"
6381
+ fill="url(#linearGradient-primary-detail-inline-modifier-example-docked)"
5904
6382
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
5905
6383
  />
5906
6384
  </g>
@@ -5912,7 +6390,7 @@ wrapperTag: div
5912
6390
  <div class="pf-v6-c-masthead__content">
5913
6391
  <div
5914
6392
  class="pf-v6-c-toolbar pf-m-static"
5915
- id="primary-detail-inline-modifier-example-masthead-toolbar"
6393
+ id="primary-detail-inline-modifier-example-docked-toolbar"
5916
6394
  >
5917
6395
  <div class="pf-v6-c-toolbar__content">
5918
6396
  <div class="pf-v6-c-toolbar__content-section">
@@ -6034,21 +6512,57 @@ wrapperTag: div
6034
6512
  </li>
6035
6513
  <li class="pf-v6-c-breadcrumb__item">
6036
6514
  <span class="pf-v6-c-breadcrumb__item-divider">
6037
- <i class="fas fa-angle-right" aria-hidden="true"></i>
6515
+ <svg
6516
+ class="pf-v6-svg"
6517
+ viewBox="0 0 20 20"
6518
+ fill="currentColor"
6519
+ aria-hidden="true"
6520
+ role="img"
6521
+ width="1em"
6522
+ height="1em"
6523
+ >
6524
+ <path
6525
+ 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"
6526
+ />
6527
+ </svg>
6038
6528
  </span>
6039
6529
 
6040
6530
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
6041
6531
  </li>
6042
6532
  <li class="pf-v6-c-breadcrumb__item">
6043
6533
  <span class="pf-v6-c-breadcrumb__item-divider">
6044
- <i class="fas fa-angle-right" aria-hidden="true"></i>
6534
+ <svg
6535
+ class="pf-v6-svg"
6536
+ viewBox="0 0 20 20"
6537
+ fill="currentColor"
6538
+ aria-hidden="true"
6539
+ role="img"
6540
+ width="1em"
6541
+ height="1em"
6542
+ >
6543
+ <path
6544
+ 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"
6545
+ />
6546
+ </svg>
6045
6547
  </span>
6046
6548
 
6047
6549
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
6048
6550
  </li>
6049
6551
  <li class="pf-v6-c-breadcrumb__item">
6050
6552
  <span class="pf-v6-c-breadcrumb__item-divider">
6051
- <i class="fas fa-angle-right" aria-hidden="true"></i>
6553
+ <svg
6554
+ class="pf-v6-svg"
6555
+ viewBox="0 0 20 20"
6556
+ fill="currentColor"
6557
+ aria-hidden="true"
6558
+ role="img"
6559
+ width="1em"
6560
+ height="1em"
6561
+ >
6562
+ <path
6563
+ 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"
6564
+ />
6565
+ </svg>
6052
6566
  </span>
6053
6567
 
6054
6568
  <a
@@ -6184,7 +6698,19 @@ wrapperTag: div
6184
6698
  aria-label="Go to previous page"
6185
6699
  >
6186
6700
  <span class="pf-v6-c-button__icon">
6187
- <i class="fas fa-angle-left" aria-hidden="true"></i>
6701
+ <svg
6702
+ class="pf-v6-svg"
6703
+ viewBox="0 0 256 512"
6704
+ fill="currentColor"
6705
+ aria-hidden="true"
6706
+ role="img"
6707
+ width="1em"
6708
+ height="1em"
6709
+ >
6710
+ <path
6711
+ 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"
6712
+ />
6713
+ </svg>
6188
6714
  </span>
6189
6715
  </button>
6190
6716
  </div>
@@ -6197,10 +6723,19 @@ wrapperTag: div
6197
6723
  aria-label="Go to next page"
6198
6724
  >
6199
6725
  <span class="pf-v6-c-button__icon">
6200
- <i
6201
- class="fas fa-angle-right"
6726
+ <svg
6727
+ class="pf-v6-svg"
6728
+ viewBox="0 0 256 512"
6729
+ fill="currentColor"
6202
6730
  aria-hidden="true"
6203
- ></i>
6731
+ role="img"
6732
+ width="1em"
6733
+ height="1em"
6734
+ >
6735
+ <path
6736
+ 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"
6737
+ />
6738
+ </svg>
6204
6739
  </span>
6205
6740
  </button>
6206
6741
  </div>
@@ -6708,7 +7243,19 @@ wrapperTag: div
6708
7243
  aria-label="Close drawer panel"
6709
7244
  >
6710
7245
  <span class="pf-v6-c-button__icon">
6711
- <i class="fas fa-times" aria-hidden="true"></i>
7246
+ <svg
7247
+ class="pf-v6-svg"
7248
+ viewBox="0 0 20 20"
7249
+ fill="currentColor"
7250
+ aria-hidden="true"
7251
+ role="img"
7252
+ width="1em"
7253
+ height="1em"
7254
+ >
7255
+ <path
7256
+ d="M17.8 16.2 11.59 10l6.21-6.21c.42-.46.39-1.17-.07-1.59-.43-.4-1.09-.4-1.52 0l-6.2 6.2-6.22-6.19c-.44-.44-1.15-.44-1.59 0-.44.44-.44 1.15 0 1.59l6.2 6.21-6.2 6.2c-.42.46-.39 1.17.07 1.59.43.4 1.09.4 1.52 0L10 11.59l6.2 6.2c.44.44 1.15.44 1.59 0 .44-.45.44-1.16 0-1.6Z"
7257
+ />
7258
+ </svg>
6712
7259
  </span>
6713
7260
  </button>
6714
7261
  </div>
@@ -6727,6 +7274,7 @@ wrapperTag: div
6727
7274
  <div class="pf-v6-c-drawer__body pf-m-no-padding">
6728
7275
  <div
6729
7276
  class="pf-v6-c-tabs pf-m-box pf-m-fill"
7277
+ aria-label="Node 2"
6730
7278
  role="region"
6731
7279
  id="primary-detail-inline-modifier-example-drawer-tabs"
6732
7280
  >
@@ -6737,11 +7285,27 @@ wrapperTag: div
6737
7285
  aria-label="Scroll left"
6738
7286
  >
6739
7287
  <span class="pf-v6-c-button__icon">
6740
- <i class="fas fa-angle-left" aria-hidden="true"></i>
7288
+ <svg
7289
+ class="pf-v6-svg"
7290
+ viewBox="0 0 20 20"
7291
+ fill="currentColor"
7292
+ aria-hidden="true"
7293
+ role="img"
7294
+ width="1em"
7295
+ height="1em"
7296
+ >
7297
+ <path
7298
+ d="m6.41 10 7.29-7.29.02-.02c.38-.4.37-1.03-.02-1.41-.4-.38-1.03-.37-1.41.02L4.64 8.95a1.49 1.49 0 0 0 0 2.12l7.65 7.65c.19.19.44.29.71.29.27 0 .52-.11.71-.29a.996.996 0 0 0 0-1.41l-7.29-7.29Z"
7299
+ />
7300
+ </svg>
6741
7301
  </span>
6742
7302
  </button>
6743
7303
  </div>
6744
- <ul class="pf-v6-c-tabs__list" role="tablist">
7304
+ <ul
7305
+ class="pf-v6-c-tabs__list"
7306
+ role="tablist"
7307
+ aria-label="Node 2"
7308
+ >
6745
7309
  <li
6746
7310
  class="pf-v6-c-tabs__item pf-m-current"
6747
7311
  role="presentation"
@@ -6750,6 +7314,7 @@ wrapperTag: div
6750
7314
  type="button"
6751
7315
  class="pf-v6-c-tabs__link"
6752
7316
  role="tab"
7317
+ aria-selected="true"
6753
7318
  aria-controls="primary-detail-inline-modifier-example-drawer-tabs-tab1-panel"
6754
7319
  id="primary-detail-inline-modifier-example-drawer-tabs-tab1-link"
6755
7320
  >
@@ -6761,6 +7326,7 @@ wrapperTag: div
6761
7326
  type="button"
6762
7327
  class="pf-v6-c-tabs__link"
6763
7328
  role="tab"
7329
+ aria-selected="false"
6764
7330
  aria-controls="primary-detail-inline-modifier-example-drawer-tabs-tab2-panel"
6765
7331
  id="primary-detail-inline-modifier-example-drawer-tabs-tab2-link"
6766
7332
  >
@@ -6775,7 +7341,19 @@ wrapperTag: div
6775
7341
  aria-label="Scroll right"
6776
7342
  >
6777
7343
  <span class="pf-v6-c-button__icon">
6778
- <i class="fas fa-angle-right" aria-hidden="true"></i>
7344
+ <svg
7345
+ class="pf-v6-svg"
7346
+ viewBox="0 0 20 20"
7347
+ fill="currentColor"
7348
+ aria-hidden="true"
7349
+ role="img"
7350
+ width="1em"
7351
+ height="1em"
7352
+ >
7353
+ <path
7354
+ 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"
7355
+ />
7356
+ </svg>
6779
7357
  </span>
6780
7358
  </button>
6781
7359
  </div>