@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/Masthead/examples/Masthead.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="masthead-basic-example-masthead">
19
+ <header class="pf-v6-c-masthead" id="masthead-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-masthead-basic-example-masthead"
61
+ id="linearGradient-masthead-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-masthead-basic-example-masthead)"
115
+ fill="url(#linearGradient-masthead-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-masthead-basic-example-masthead)"
119
+ fill="url(#linearGradient-masthead-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="masthead-basic-example-masthead-toolbar"
131
+ id="masthead-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">
@@ -207,21 +207,57 @@ wrapperTag: div
207
207
  </li>
208
208
  <li class="pf-v6-c-breadcrumb__item">
209
209
  <span class="pf-v6-c-breadcrumb__item-divider">
210
- <i class="fas fa-angle-right" aria-hidden="true"></i>
210
+ <svg
211
+ class="pf-v6-svg"
212
+ viewBox="0 0 20 20"
213
+ fill="currentColor"
214
+ aria-hidden="true"
215
+ role="img"
216
+ width="1em"
217
+ height="1em"
218
+ >
219
+ <path
220
+ 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"
221
+ />
222
+ </svg>
211
223
  </span>
212
224
 
213
225
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
214
226
  </li>
215
227
  <li class="pf-v6-c-breadcrumb__item">
216
228
  <span class="pf-v6-c-breadcrumb__item-divider">
217
- <i class="fas fa-angle-right" aria-hidden="true"></i>
229
+ <svg
230
+ class="pf-v6-svg"
231
+ viewBox="0 0 20 20"
232
+ fill="currentColor"
233
+ aria-hidden="true"
234
+ role="img"
235
+ width="1em"
236
+ height="1em"
237
+ >
238
+ <path
239
+ 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"
240
+ />
241
+ </svg>
218
242
  </span>
219
243
 
220
244
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
221
245
  </li>
222
246
  <li class="pf-v6-c-breadcrumb__item">
223
247
  <span class="pf-v6-c-breadcrumb__item-divider">
224
- <i class="fas fa-angle-right" aria-hidden="true"></i>
248
+ <svg
249
+ class="pf-v6-svg"
250
+ viewBox="0 0 20 20"
251
+ fill="currentColor"
252
+ aria-hidden="true"
253
+ role="img"
254
+ width="1em"
255
+ height="1em"
256
+ >
257
+ <path
258
+ 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"
259
+ />
260
+ </svg>
225
261
  </span>
226
262
 
227
263
  <a
@@ -296,7 +332,7 @@ wrapperTag: div
296
332
  </div>
297
333
  <header
298
334
  class="pf-v6-c-masthead"
299
- id="masthead-context-selecton-drilldown-example-masthead"
335
+ id="masthead-context-selecton-drilldown-example-docked"
300
336
  >
301
337
  <div class="pf-v6-c-masthead__main">
302
338
  <span class="pf-v6-c-masthead__toggle">
@@ -339,7 +375,7 @@ wrapperTag: div
339
375
  y1="2.25860997e-13%"
340
376
  x2="32%"
341
377
  y2="100%"
342
- id="linearGradient-masthead-context-selecton-drilldown-example-masthead"
378
+ id="linearGradient-masthead-context-selecton-drilldown-example-docked"
343
379
  >
344
380
  <stop stop-color="#2B9AF3" offset="0%" />
345
381
  <stop
@@ -393,11 +429,11 @@ wrapperTag: div
393
429
  />
394
430
  <path
395
431
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
396
- fill="url(#linearGradient-masthead-context-selecton-drilldown-example-masthead)"
432
+ fill="url(#linearGradient-masthead-context-selecton-drilldown-example-docked)"
397
433
  />
398
434
  <path
399
435
  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"
400
- fill="url(#linearGradient-masthead-context-selecton-drilldown-example-masthead)"
436
+ fill="url(#linearGradient-masthead-context-selecton-drilldown-example-docked)"
401
437
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
402
438
  />
403
439
  </g>
@@ -409,7 +445,7 @@ wrapperTag: div
409
445
  <div class="pf-v6-c-masthead__content">
410
446
  <div
411
447
  class="pf-v6-c-toolbar pf-m-static"
412
- id="masthead-context-selecton-drilldown-example-masthead-toolbar"
448
+ id="masthead-context-selecton-drilldown-example-docked-toolbar"
413
449
  >
414
450
  <div class="pf-v6-c-toolbar__content">
415
451
  <div class="pf-v6-c-toolbar__content-section">
@@ -517,21 +553,57 @@ wrapperTag: div
517
553
  </li>
518
554
  <li class="pf-v6-c-breadcrumb__item">
519
555
  <span class="pf-v6-c-breadcrumb__item-divider">
520
- <i class="fas fa-angle-right" aria-hidden="true"></i>
556
+ <svg
557
+ class="pf-v6-svg"
558
+ viewBox="0 0 20 20"
559
+ fill="currentColor"
560
+ aria-hidden="true"
561
+ role="img"
562
+ width="1em"
563
+ height="1em"
564
+ >
565
+ <path
566
+ 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"
567
+ />
568
+ </svg>
521
569
  </span>
522
570
 
523
571
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
524
572
  </li>
525
573
  <li class="pf-v6-c-breadcrumb__item">
526
574
  <span class="pf-v6-c-breadcrumb__item-divider">
527
- <i class="fas fa-angle-right" aria-hidden="true"></i>
575
+ <svg
576
+ class="pf-v6-svg"
577
+ viewBox="0 0 20 20"
578
+ fill="currentColor"
579
+ aria-hidden="true"
580
+ role="img"
581
+ width="1em"
582
+ height="1em"
583
+ >
584
+ <path
585
+ 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"
586
+ />
587
+ </svg>
528
588
  </span>
529
589
 
530
590
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
531
591
  </li>
532
592
  <li class="pf-v6-c-breadcrumb__item">
533
593
  <span class="pf-v6-c-breadcrumb__item-divider">
534
- <i class="fas fa-angle-right" aria-hidden="true"></i>
594
+ <svg
595
+ class="pf-v6-svg"
596
+ viewBox="0 0 20 20"
597
+ fill="currentColor"
598
+ aria-hidden="true"
599
+ role="img"
600
+ width="1em"
601
+ height="1em"
602
+ >
603
+ <path
604
+ d="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"
605
+ />
606
+ </svg>
535
607
  </span>
536
608
 
537
609
  <a
@@ -604,10 +676,7 @@ wrapperTag: div
604
676
  <span class="pf-v6-c-button__text">Skip to content</span>
605
677
  </a>
606
678
  </div>
607
- <header
608
- class="pf-v6-c-masthead"
609
- id="masthead-toolbar-filters-example-masthead"
610
- >
679
+ <header class="pf-v6-c-masthead" id="masthead-toolbar-filters-example-docked">
611
680
  <div class="pf-v6-c-masthead__main">
612
681
  <span class="pf-v6-c-masthead__toggle">
613
682
  <button
@@ -649,7 +718,7 @@ wrapperTag: div
649
718
  y1="2.25860997e-13%"
650
719
  x2="32%"
651
720
  y2="100%"
652
- id="linearGradient-masthead-toolbar-filters-example-masthead"
721
+ id="linearGradient-masthead-toolbar-filters-example-docked"
653
722
  >
654
723
  <stop stop-color="#2B9AF3" offset="0%" />
655
724
  <stop
@@ -703,11 +772,11 @@ wrapperTag: div
703
772
  />
704
773
  <path
705
774
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
706
- fill="url(#linearGradient-masthead-toolbar-filters-example-masthead)"
775
+ fill="url(#linearGradient-masthead-toolbar-filters-example-docked)"
707
776
  />
708
777
  <path
709
778
  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"
710
- fill="url(#linearGradient-masthead-toolbar-filters-example-masthead)"
779
+ fill="url(#linearGradient-masthead-toolbar-filters-example-docked)"
711
780
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
712
781
  />
713
782
  </g>
@@ -719,7 +788,7 @@ wrapperTag: div
719
788
  <div class="pf-v6-c-masthead__content">
720
789
  <div
721
790
  class="pf-v6-c-toolbar pf-m-static"
722
- id="masthead-toolbar-filters-example-masthead-toolbar"
791
+ id="masthead-toolbar-filters-example-docked-toolbar"
723
792
  >
724
793
  <div class="pf-v6-c-toolbar__content">
725
794
  <div class="pf-v6-c-toolbar__content-section">
@@ -732,7 +801,7 @@ wrapperTag: div
732
801
  type="button"
733
802
  aria-expanded="false"
734
803
  aria-label="Show filters"
735
- aria-controls="masthead-toolbar-filters-example-masthead-toolbar-expandable-content"
804
+ aria-controls="masthead-toolbar-filters-example-docked-toolbar-expandable-content"
736
805
  >
737
806
  <span class="pf-v6-c-menu-toggle__icon">
738
807
  <i class="fas fa-filter" aria-hidden="true"></i>
@@ -750,7 +819,7 @@ wrapperTag: div
750
819
  class="pf-v6-c-menu-toggle"
751
820
  type="button"
752
821
  aria-expanded="false"
753
- id="masthead-toolbar-filters-example-masthead-toolbar-search-filter-menu"
822
+ id="masthead-toolbar-filters-example-docked-toolbar-search-filter-menu"
754
823
  >
755
824
  <span class="pf-v6-c-menu-toggle__icon">
756
825
  <i class="fas fa-filter" aria-hidden="true"></i>
@@ -801,7 +870,7 @@ wrapperTag: div
801
870
 
802
871
  <div
803
872
  class="pf-v6-c-toolbar__expandable-content pf-m-hidden"
804
- id="masthead-toolbar-filters-example-masthead-toolbar-expandable-content"
873
+ id="masthead-toolbar-filters-example-docked-toolbar-expandable-content"
805
874
  hidden
806
875
  ></div>
807
876
  </div>
@@ -864,21 +933,57 @@ wrapperTag: div
864
933
  </li>
865
934
  <li class="pf-v6-c-breadcrumb__item">
866
935
  <span class="pf-v6-c-breadcrumb__item-divider">
867
- <i class="fas fa-angle-right" aria-hidden="true"></i>
936
+ <svg
937
+ class="pf-v6-svg"
938
+ viewBox="0 0 20 20"
939
+ fill="currentColor"
940
+ aria-hidden="true"
941
+ role="img"
942
+ width="1em"
943
+ height="1em"
944
+ >
945
+ <path
946
+ 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"
947
+ />
948
+ </svg>
868
949
  </span>
869
950
 
870
951
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
871
952
  </li>
872
953
  <li class="pf-v6-c-breadcrumb__item">
873
954
  <span class="pf-v6-c-breadcrumb__item-divider">
874
- <i class="fas fa-angle-right" aria-hidden="true"></i>
955
+ <svg
956
+ class="pf-v6-svg"
957
+ viewBox="0 0 20 20"
958
+ fill="currentColor"
959
+ aria-hidden="true"
960
+ role="img"
961
+ width="1em"
962
+ height="1em"
963
+ >
964
+ <path
965
+ 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"
966
+ />
967
+ </svg>
875
968
  </span>
876
969
 
877
970
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
878
971
  </li>
879
972
  <li class="pf-v6-c-breadcrumb__item">
880
973
  <span class="pf-v6-c-breadcrumb__item-divider">
881
- <i class="fas fa-angle-right" aria-hidden="true"></i>
974
+ <svg
975
+ class="pf-v6-svg"
976
+ viewBox="0 0 20 20"
977
+ fill="currentColor"
978
+ aria-hidden="true"
979
+ role="img"
980
+ width="1em"
981
+ height="1em"
982
+ >
983
+ <path
984
+ 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"
985
+ />
986
+ </svg>
882
987
  </span>
883
988
 
884
989
  <a
@@ -953,7 +1058,7 @@ wrapperTag: div
953
1058
  </div>
954
1059
  <header
955
1060
  class="pf-v6-c-masthead"
956
- id="masthead-toggle-group-filters-example-masthead"
1061
+ id="masthead-toggle-group-filters-example-docked"
957
1062
  >
958
1063
  <div class="pf-v6-c-masthead__main">
959
1064
  <span class="pf-v6-c-masthead__toggle">
@@ -996,7 +1101,7 @@ wrapperTag: div
996
1101
  y1="2.25860997e-13%"
997
1102
  x2="32%"
998
1103
  y2="100%"
999
- id="linearGradient-masthead-toggle-group-filters-example-masthead"
1104
+ id="linearGradient-masthead-toggle-group-filters-example-docked"
1000
1105
  >
1001
1106
  <stop stop-color="#2B9AF3" offset="0%" />
1002
1107
  <stop
@@ -1050,11 +1155,11 @@ wrapperTag: div
1050
1155
  />
1051
1156
  <path
1052
1157
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
1053
- fill="url(#linearGradient-masthead-toggle-group-filters-example-masthead)"
1158
+ fill="url(#linearGradient-masthead-toggle-group-filters-example-docked)"
1054
1159
  />
1055
1160
  <path
1056
1161
  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"
1057
- fill="url(#linearGradient-masthead-toggle-group-filters-example-masthead)"
1162
+ fill="url(#linearGradient-masthead-toggle-group-filters-example-docked)"
1058
1163
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
1059
1164
  />
1060
1165
  </g>
@@ -1066,7 +1171,7 @@ wrapperTag: div
1066
1171
  <div class="pf-v6-c-masthead__content">
1067
1172
  <div
1068
1173
  class="pf-v6-c-toolbar pf-m-static"
1069
- id="masthead-toggle-group-filters-example-masthead-toolbar"
1174
+ id="masthead-toggle-group-filters-example-docked-toolbar"
1070
1175
  >
1071
1176
  <div class="pf-v6-c-toolbar__content">
1072
1177
  <div class="pf-v6-c-toolbar__content-section">
@@ -1079,7 +1184,7 @@ wrapperTag: div
1079
1184
  type="button"
1080
1185
  aria-expanded="false"
1081
1186
  aria-label="Show filters"
1082
- aria-controls="masthead-toggle-group-filters-example-masthead-toolbar-expandable-content"
1187
+ aria-controls="masthead-toggle-group-filters-example-docked-toolbar-expandable-content"
1083
1188
  >
1084
1189
  <span class="pf-v6-c-menu-toggle__icon">
1085
1190
  <i class="fas fa-filter" aria-hidden="true"></i>
@@ -1097,7 +1202,7 @@ wrapperTag: div
1097
1202
  class="pf-v6-c-menu-toggle"
1098
1203
  type="button"
1099
1204
  aria-expanded="false"
1100
- id="masthead-toggle-group-filters-example-masthead-toolbar-search-filter-menu"
1205
+ id="masthead-toggle-group-filters-example-docked-toolbar-search-filter-menu"
1101
1206
  >
1102
1207
  <span class="pf-v6-c-menu-toggle__icon">
1103
1208
  <i class="fas fa-filter" aria-hidden="true"></i>
@@ -1148,7 +1253,7 @@ wrapperTag: div
1148
1253
 
1149
1254
  <div
1150
1255
  class="pf-v6-c-toolbar__expandable-content pf-m-hidden"
1151
- id="masthead-toggle-group-filters-example-masthead-toolbar-expandable-content"
1256
+ id="masthead-toggle-group-filters-example-docked-toolbar-expandable-content"
1152
1257
  hidden
1153
1258
  ></div>
1154
1259
  </div>
@@ -1211,21 +1316,57 @@ wrapperTag: div
1211
1316
  </li>
1212
1317
  <li class="pf-v6-c-breadcrumb__item">
1213
1318
  <span class="pf-v6-c-breadcrumb__item-divider">
1214
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1319
+ <svg
1320
+ class="pf-v6-svg"
1321
+ viewBox="0 0 20 20"
1322
+ fill="currentColor"
1323
+ aria-hidden="true"
1324
+ role="img"
1325
+ width="1em"
1326
+ height="1em"
1327
+ >
1328
+ <path
1329
+ 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"
1330
+ />
1331
+ </svg>
1215
1332
  </span>
1216
1333
 
1217
1334
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1218
1335
  </li>
1219
1336
  <li class="pf-v6-c-breadcrumb__item">
1220
1337
  <span class="pf-v6-c-breadcrumb__item-divider">
1221
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1338
+ <svg
1339
+ class="pf-v6-svg"
1340
+ viewBox="0 0 20 20"
1341
+ fill="currentColor"
1342
+ aria-hidden="true"
1343
+ role="img"
1344
+ width="1em"
1345
+ height="1em"
1346
+ >
1347
+ <path
1348
+ 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"
1349
+ />
1350
+ </svg>
1222
1351
  </span>
1223
1352
 
1224
1353
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1225
1354
  </li>
1226
1355
  <li class="pf-v6-c-breadcrumb__item">
1227
1356
  <span class="pf-v6-c-breadcrumb__item-divider">
1228
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1357
+ <svg
1358
+ class="pf-v6-svg"
1359
+ viewBox="0 0 20 20"
1360
+ fill="currentColor"
1361
+ aria-hidden="true"
1362
+ role="img"
1363
+ width="1em"
1364
+ height="1em"
1365
+ >
1366
+ <path
1367
+ 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"
1368
+ />
1369
+ </svg>
1229
1370
  </span>
1230
1371
 
1231
1372
  <a
@@ -1300,7 +1441,7 @@ wrapperTag: div
1300
1441
  </div>
1301
1442
  <header
1302
1443
  class="pf-v6-c-masthead"
1303
- id="masthead-expandable-search-example-masthead"
1444
+ id="masthead-expandable-search-example-docked"
1304
1445
  >
1305
1446
  <div class="pf-v6-c-masthead__main">
1306
1447
  <span class="pf-v6-c-masthead__toggle">
@@ -1343,7 +1484,7 @@ wrapperTag: div
1343
1484
  y1="2.25860997e-13%"
1344
1485
  x2="32%"
1345
1486
  y2="100%"
1346
- id="linearGradient-masthead-expandable-search-example-masthead"
1487
+ id="linearGradient-masthead-expandable-search-example-docked"
1347
1488
  >
1348
1489
  <stop stop-color="#2B9AF3" offset="0%" />
1349
1490
  <stop
@@ -1397,11 +1538,11 @@ wrapperTag: div
1397
1538
  />
1398
1539
  <path
1399
1540
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
1400
- fill="url(#linearGradient-masthead-expandable-search-example-masthead)"
1541
+ fill="url(#linearGradient-masthead-expandable-search-example-docked)"
1401
1542
  />
1402
1543
  <path
1403
1544
  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"
1404
- fill="url(#linearGradient-masthead-expandable-search-example-masthead)"
1545
+ fill="url(#linearGradient-masthead-expandable-search-example-docked)"
1405
1546
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
1406
1547
  />
1407
1548
  </g>
@@ -1413,7 +1554,7 @@ wrapperTag: div
1413
1554
  <div class="pf-v6-c-masthead__content">
1414
1555
  <div
1415
1556
  class="pf-v6-c-toolbar pf-m-static"
1416
- id="masthead-expandable-search-example-masthead-toolbar"
1557
+ id="masthead-expandable-search-example-docked-toolbar"
1417
1558
  >
1418
1559
  <div class="pf-v6-c-toolbar__content">
1419
1560
  <div class="pf-v6-c-toolbar__content-section">
@@ -1427,7 +1568,19 @@ wrapperTag: div
1427
1568
  aria-label="Open search"
1428
1569
  >
1429
1570
  <span class="pf-v6-c-button__icon">
1430
- <i class="fas fa-search fa-fw" aria-hidden="true"></i>
1571
+ <svg
1572
+ class="pf-v6-svg"
1573
+ viewBox="0 0 512 512"
1574
+ fill="currentColor"
1575
+ aria-hidden="true"
1576
+ role="img"
1577
+ width="1em"
1578
+ height="1em"
1579
+ >
1580
+ <path
1581
+ d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"
1582
+ />
1583
+ </svg>
1431
1584
  </span>
1432
1585
  </button>
1433
1586
  </div>
@@ -1495,21 +1648,57 @@ wrapperTag: div
1495
1648
  </li>
1496
1649
  <li class="pf-v6-c-breadcrumb__item">
1497
1650
  <span class="pf-v6-c-breadcrumb__item-divider">
1498
- <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>
1499
1664
  </span>
1500
1665
 
1501
1666
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1502
1667
  </li>
1503
1668
  <li class="pf-v6-c-breadcrumb__item">
1504
1669
  <span class="pf-v6-c-breadcrumb__item-divider">
1505
- <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>
1506
1683
  </span>
1507
1684
 
1508
1685
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1509
1686
  </li>
1510
1687
  <li class="pf-v6-c-breadcrumb__item">
1511
1688
  <span class="pf-v6-c-breadcrumb__item-divider">
1512
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1689
+ <svg
1690
+ class="pf-v6-svg"
1691
+ viewBox="0 0 20 20"
1692
+ fill="currentColor"
1693
+ aria-hidden="true"
1694
+ role="img"
1695
+ width="1em"
1696
+ height="1em"
1697
+ >
1698
+ <path
1699
+ 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"
1700
+ />
1701
+ </svg>
1513
1702
  </span>
1514
1703
 
1515
1704
  <a
@@ -1584,7 +1773,7 @@ wrapperTag: div
1584
1773
  </div>
1585
1774
  <header
1586
1775
  class="pf-v6-c-masthead"
1587
- id="masthead-expandable-search-expanded-example-masthead"
1776
+ id="masthead-expandable-search-expanded-example-docked"
1588
1777
  >
1589
1778
  <div class="pf-v6-c-masthead__main">
1590
1779
  <span class="pf-v6-c-masthead__toggle">
@@ -1627,7 +1816,7 @@ wrapperTag: div
1627
1816
  y1="2.25860997e-13%"
1628
1817
  x2="32%"
1629
1818
  y2="100%"
1630
- id="linearGradient-masthead-expandable-search-expanded-example-masthead"
1819
+ id="linearGradient-masthead-expandable-search-expanded-example-docked"
1631
1820
  >
1632
1821
  <stop stop-color="#2B9AF3" offset="0%" />
1633
1822
  <stop
@@ -1681,11 +1870,11 @@ wrapperTag: div
1681
1870
  />
1682
1871
  <path
1683
1872
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
1684
- fill="url(#linearGradient-masthead-expandable-search-expanded-example-masthead)"
1873
+ fill="url(#linearGradient-masthead-expandable-search-expanded-example-docked)"
1685
1874
  />
1686
1875
  <path
1687
1876
  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"
1688
- fill="url(#linearGradient-masthead-expandable-search-expanded-example-masthead)"
1877
+ fill="url(#linearGradient-masthead-expandable-search-expanded-example-docked)"
1689
1878
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
1690
1879
  />
1691
1880
  </g>
@@ -1697,7 +1886,7 @@ wrapperTag: div
1697
1886
  <div class="pf-v6-c-masthead__content">
1698
1887
  <div
1699
1888
  class="pf-v6-c-toolbar pf-m-static"
1700
- id="masthead-expandable-search-expanded-example-masthead-toolbar"
1889
+ id="masthead-expandable-search-expanded-example-docked-toolbar"
1701
1890
  >
1702
1891
  <div class="pf-v6-c-toolbar__content">
1703
1892
  <div class="pf-v6-c-toolbar__content-section">
@@ -1729,7 +1918,19 @@ wrapperTag: div
1729
1918
  aria-label="Close"
1730
1919
  >
1731
1920
  <span class="pf-v6-c-button__icon">
1732
- <i class="fas fa-times" aria-hidden="true"></i>
1921
+ <svg
1922
+ class="pf-v6-svg"
1923
+ viewBox="0 0 20 20"
1924
+ fill="currentColor"
1925
+ aria-hidden="true"
1926
+ role="img"
1927
+ width="1em"
1928
+ height="1em"
1929
+ >
1930
+ <path
1931
+ 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"
1932
+ />
1933
+ </svg>
1733
1934
  </span>
1734
1935
  </button>
1735
1936
  </div>
@@ -1797,21 +1998,57 @@ wrapperTag: div
1797
1998
  </li>
1798
1999
  <li class="pf-v6-c-breadcrumb__item">
1799
2000
  <span class="pf-v6-c-breadcrumb__item-divider">
1800
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2001
+ <svg
2002
+ class="pf-v6-svg"
2003
+ viewBox="0 0 20 20"
2004
+ fill="currentColor"
2005
+ aria-hidden="true"
2006
+ role="img"
2007
+ width="1em"
2008
+ height="1em"
2009
+ >
2010
+ <path
2011
+ 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"
2012
+ />
2013
+ </svg>
1801
2014
  </span>
1802
2015
 
1803
2016
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1804
2017
  </li>
1805
2018
  <li class="pf-v6-c-breadcrumb__item">
1806
2019
  <span class="pf-v6-c-breadcrumb__item-divider">
1807
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2020
+ <svg
2021
+ class="pf-v6-svg"
2022
+ viewBox="0 0 20 20"
2023
+ fill="currentColor"
2024
+ aria-hidden="true"
2025
+ role="img"
2026
+ width="1em"
2027
+ height="1em"
2028
+ >
2029
+ <path
2030
+ 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"
2031
+ />
2032
+ </svg>
1808
2033
  </span>
1809
2034
 
1810
2035
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1811
2036
  </li>
1812
2037
  <li class="pf-v6-c-breadcrumb__item">
1813
2038
  <span class="pf-v6-c-breadcrumb__item-divider">
1814
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2039
+ <svg
2040
+ class="pf-v6-svg"
2041
+ viewBox="0 0 20 20"
2042
+ fill="currentColor"
2043
+ aria-hidden="true"
2044
+ role="img"
2045
+ width="1em"
2046
+ height="1em"
2047
+ >
2048
+ <path
2049
+ 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"
2050
+ />
2051
+ </svg>
1815
2052
  </span>
1816
2053
 
1817
2054
  <a
@@ -1886,7 +2123,7 @@ wrapperTag: div
1886
2123
  </div>
1887
2124
  <header
1888
2125
  class="pf-v6-c-masthead"
1889
- id="masthead-advanced-with-menu-example-masthead"
2126
+ id="masthead-advanced-with-menu-example-docked"
1890
2127
  >
1891
2128
  <div class="pf-v6-c-masthead__main">
1892
2129
  <span class="pf-v6-c-masthead__toggle">
@@ -1929,7 +2166,7 @@ wrapperTag: div
1929
2166
  y1="2.25860997e-13%"
1930
2167
  x2="32%"
1931
2168
  y2="100%"
1932
- id="linearGradient-masthead-advanced-with-menu-example-masthead"
2169
+ id="linearGradient-masthead-advanced-with-menu-example-docked"
1933
2170
  >
1934
2171
  <stop stop-color="#2B9AF3" offset="0%" />
1935
2172
  <stop
@@ -1983,11 +2220,11 @@ wrapperTag: div
1983
2220
  />
1984
2221
  <path
1985
2222
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
1986
- fill="url(#linearGradient-masthead-advanced-with-menu-example-masthead)"
2223
+ fill="url(#linearGradient-masthead-advanced-with-menu-example-docked)"
1987
2224
  />
1988
2225
  <path
1989
2226
  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"
1990
- fill="url(#linearGradient-masthead-advanced-with-menu-example-masthead)"
2227
+ fill="url(#linearGradient-masthead-advanced-with-menu-example-docked)"
1991
2228
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
1992
2229
  />
1993
2230
  </g>
@@ -1999,7 +2236,7 @@ wrapperTag: div
1999
2236
  <div class="pf-v6-c-masthead__content">
2000
2237
  <div
2001
2238
  class="pf-v6-c-toolbar pf-m-static"
2002
- id="masthead-advanced-with-menu-example-masthead-toolbar"
2239
+ id="masthead-advanced-with-menu-example-docked-toolbar"
2003
2240
  >
2004
2241
  <div class="pf-v6-c-toolbar__content">
2005
2242
  <div class="pf-v6-c-toolbar__content-section">
@@ -2121,21 +2358,57 @@ wrapperTag: div
2121
2358
  </li>
2122
2359
  <li class="pf-v6-c-breadcrumb__item">
2123
2360
  <span class="pf-v6-c-breadcrumb__item-divider">
2124
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2361
+ <svg
2362
+ class="pf-v6-svg"
2363
+ viewBox="0 0 20 20"
2364
+ fill="currentColor"
2365
+ aria-hidden="true"
2366
+ role="img"
2367
+ width="1em"
2368
+ height="1em"
2369
+ >
2370
+ <path
2371
+ 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"
2372
+ />
2373
+ </svg>
2125
2374
  </span>
2126
2375
 
2127
2376
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
2128
2377
  </li>
2129
2378
  <li class="pf-v6-c-breadcrumb__item">
2130
2379
  <span class="pf-v6-c-breadcrumb__item-divider">
2131
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2380
+ <svg
2381
+ class="pf-v6-svg"
2382
+ viewBox="0 0 20 20"
2383
+ fill="currentColor"
2384
+ aria-hidden="true"
2385
+ role="img"
2386
+ width="1em"
2387
+ height="1em"
2388
+ >
2389
+ <path
2390
+ 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"
2391
+ />
2392
+ </svg>
2132
2393
  </span>
2133
2394
 
2134
2395
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
2135
2396
  </li>
2136
2397
  <li class="pf-v6-c-breadcrumb__item">
2137
2398
  <span class="pf-v6-c-breadcrumb__item-divider">
2138
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2399
+ <svg
2400
+ class="pf-v6-svg"
2401
+ viewBox="0 0 20 20"
2402
+ fill="currentColor"
2403
+ aria-hidden="true"
2404
+ role="img"
2405
+ width="1em"
2406
+ height="1em"
2407
+ >
2408
+ <path
2409
+ 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"
2410
+ />
2411
+ </svg>
2139
2412
  </span>
2140
2413
 
2141
2414
  <a
@@ -2208,7 +2481,7 @@ wrapperTag: div
2208
2481
  <span class="pf-v6-c-button__text">Skip to content</span>
2209
2482
  </a>
2210
2483
  </div>
2211
- <header class="pf-v6-c-masthead" id="masthead-horizontal-nav-masthead">
2484
+ <header class="pf-v6-c-masthead" id="masthead-horizontal-nav-docked">
2212
2485
  <div class="pf-v6-c-masthead__main">
2213
2486
  <div class="pf-v6-c-masthead__brand">
2214
2487
  <a class="pf-v6-c-masthead__logo" href="#">
@@ -2220,7 +2493,7 @@ wrapperTag: div
2220
2493
  y1="2.25860997e-13%"
2221
2494
  x2="32%"
2222
2495
  y2="100%"
2223
- id="linearGradient-masthead-horizontal-nav-masthead"
2496
+ id="linearGradient-masthead-horizontal-nav-docked"
2224
2497
  >
2225
2498
  <stop stop-color="#2B9AF3" offset="0%" />
2226
2499
  <stop
@@ -2274,11 +2547,11 @@ wrapperTag: div
2274
2547
  />
2275
2548
  <path
2276
2549
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
2277
- fill="url(#linearGradient-masthead-horizontal-nav-masthead)"
2550
+ fill="url(#linearGradient-masthead-horizontal-nav-docked)"
2278
2551
  />
2279
2552
  <path
2280
2553
  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"
2281
- fill="url(#linearGradient-masthead-horizontal-nav-masthead)"
2554
+ fill="url(#linearGradient-masthead-horizontal-nav-docked)"
2282
2555
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
2283
2556
  />
2284
2557
  </g>
@@ -2290,7 +2563,7 @@ wrapperTag: div
2290
2563
  <div class="pf-v6-c-masthead__content">
2291
2564
  <div
2292
2565
  class="pf-v6-c-toolbar pf-m-static"
2293
- id="masthead-horizontal-nav-masthead-toolbar"
2566
+ id="masthead-horizontal-nav-docked-toolbar"
2294
2567
  >
2295
2568
  <div class="pf-v6-c-toolbar__content">
2296
2569
  <div class="pf-v6-c-toolbar__content-section">
@@ -2300,7 +2573,7 @@ wrapperTag: div
2300
2573
  >
2301
2574
  <nav
2302
2575
  class="pf-v6-c-nav pf-m-scrollable pf-m-horizontal"
2303
- id="masthead-horizontal-nav-masthead-horizontal-nav"
2576
+ id="masthead-horizontal-nav-docked-horizontal-nav"
2304
2577
  aria-label="Global"
2305
2578
  >
2306
2579
  <div class="pf-v6-c-nav__scroll-button">
@@ -2310,7 +2583,19 @@ wrapperTag: div
2310
2583
  aria-label="Scroll start"
2311
2584
  >
2312
2585
  <span class="pf-v6-c-button__icon">
2313
- <i class="fas fa-angle-left" aria-hidden="true"></i>
2586
+ <svg
2587
+ class="pf-v6-svg"
2588
+ viewBox="0 0 20 20"
2589
+ fill="currentColor"
2590
+ aria-hidden="true"
2591
+ role="img"
2592
+ width="1em"
2593
+ height="1em"
2594
+ >
2595
+ <path
2596
+ 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"
2597
+ />
2598
+ </svg>
2314
2599
  </span>
2315
2600
  </button>
2316
2601
  </div>
@@ -2352,7 +2637,19 @@ wrapperTag: div
2352
2637
  aria-label="Scroll end"
2353
2638
  >
2354
2639
  <span class="pf-v6-c-button__icon">
2355
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2640
+ <svg
2641
+ class="pf-v6-svg"
2642
+ viewBox="0 0 20 20"
2643
+ fill="currentColor"
2644
+ aria-hidden="true"
2645
+ role="img"
2646
+ width="1em"
2647
+ height="1em"
2648
+ >
2649
+ <path
2650
+ 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"
2651
+ />
2652
+ </svg>
2356
2653
  </span>
2357
2654
  </button>
2358
2655
  </div>
@@ -2436,21 +2733,57 @@ wrapperTag: div
2436
2733
  </li>
2437
2734
  <li class="pf-v6-c-breadcrumb__item">
2438
2735
  <span class="pf-v6-c-breadcrumb__item-divider">
2439
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2736
+ <svg
2737
+ class="pf-v6-svg"
2738
+ viewBox="0 0 20 20"
2739
+ fill="currentColor"
2740
+ aria-hidden="true"
2741
+ role="img"
2742
+ width="1em"
2743
+ height="1em"
2744
+ >
2745
+ <path
2746
+ 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"
2747
+ />
2748
+ </svg>
2440
2749
  </span>
2441
2750
 
2442
2751
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
2443
2752
  </li>
2444
2753
  <li class="pf-v6-c-breadcrumb__item">
2445
2754
  <span class="pf-v6-c-breadcrumb__item-divider">
2446
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2755
+ <svg
2756
+ class="pf-v6-svg"
2757
+ viewBox="0 0 20 20"
2758
+ fill="currentColor"
2759
+ aria-hidden="true"
2760
+ role="img"
2761
+ width="1em"
2762
+ height="1em"
2763
+ >
2764
+ <path
2765
+ 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"
2766
+ />
2767
+ </svg>
2447
2768
  </span>
2448
2769
 
2449
2770
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
2450
2771
  </li>
2451
2772
  <li class="pf-v6-c-breadcrumb__item">
2452
2773
  <span class="pf-v6-c-breadcrumb__item-divider">
2453
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2774
+ <svg
2775
+ class="pf-v6-svg"
2776
+ viewBox="0 0 20 20"
2777
+ fill="currentColor"
2778
+ aria-hidden="true"
2779
+ role="img"
2780
+ width="1em"
2781
+ height="1em"
2782
+ >
2783
+ <path
2784
+ 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"
2785
+ />
2786
+ </svg>
2454
2787
  </span>
2455
2788
 
2456
2789
  <a
@@ -2530,7 +2863,7 @@ wrapperTag: div
2530
2863
  </div>
2531
2864
  <header
2532
2865
  class="pf-v6-c-masthead"
2533
- id="masthead-toggle-group-filters-expanded-mobile-example-masthead"
2866
+ id="masthead-toggle-group-filters-expanded-mobile-example-docked"
2534
2867
  >
2535
2868
  <div class="pf-v6-c-masthead__main">
2536
2869
  <span class="pf-v6-c-masthead__toggle">
@@ -2573,7 +2906,7 @@ wrapperTag: div
2573
2906
  y1="2.25860997e-13%"
2574
2907
  x2="32%"
2575
2908
  y2="100%"
2576
- id="linearGradient-masthead-toggle-group-filters-expanded-mobile-example-masthead"
2909
+ id="linearGradient-masthead-toggle-group-filters-expanded-mobile-example-docked"
2577
2910
  >
2578
2911
  <stop stop-color="#2B9AF3" offset="0%" />
2579
2912
  <stop
@@ -2627,11 +2960,11 @@ wrapperTag: div
2627
2960
  />
2628
2961
  <path
2629
2962
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
2630
- fill="url(#linearGradient-masthead-toggle-group-filters-expanded-mobile-example-masthead)"
2963
+ fill="url(#linearGradient-masthead-toggle-group-filters-expanded-mobile-example-docked)"
2631
2964
  />
2632
2965
  <path
2633
2966
  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"
2634
- fill="url(#linearGradient-masthead-toggle-group-filters-expanded-mobile-example-masthead)"
2967
+ fill="url(#linearGradient-masthead-toggle-group-filters-expanded-mobile-example-docked)"
2635
2968
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
2636
2969
  />
2637
2970
  </g>
@@ -2643,7 +2976,7 @@ wrapperTag: div
2643
2976
  <div class="pf-v6-c-masthead__content">
2644
2977
  <div
2645
2978
  class="pf-v6-c-toolbar pf-m-static"
2646
- id="masthead-toggle-group-filters-expanded-mobile-example-masthead-toolbar"
2979
+ id="masthead-toggle-group-filters-expanded-mobile-example-docked-toolbar"
2647
2980
  >
2648
2981
  <div class="pf-v6-c-toolbar__content">
2649
2982
  <div class="pf-v6-c-toolbar__content-section">
@@ -2656,7 +2989,7 @@ wrapperTag: div
2656
2989
  type="button"
2657
2990
  aria-expanded="false"
2658
2991
  aria-label="Show filters"
2659
- aria-controls="masthead-toggle-group-filters-expanded-mobile-example-masthead-toolbar-expandable-content"
2992
+ aria-controls="masthead-toggle-group-filters-expanded-mobile-example-docked-toolbar-expandable-content"
2660
2993
  >
2661
2994
  <span class="pf-v6-c-menu-toggle__icon">
2662
2995
  <i class="fas fa-filter" aria-hidden="true"></i>
@@ -2681,7 +3014,7 @@ wrapperTag: div
2681
3014
 
2682
3015
  <div
2683
3016
  class="pf-v6-c-toolbar__expandable-content pf-m-expanded"
2684
- id="masthead-toggle-group-filters-expanded-mobile-example-masthead-toolbar-expandable-content"
3017
+ id="masthead-toggle-group-filters-expanded-mobile-example-docked-toolbar-expandable-content"
2685
3018
  >
2686
3019
  <div class="pf-v6-c-toolbar__item pf-m-search-filter">
2687
3020
  <div
@@ -2694,7 +3027,7 @@ wrapperTag: div
2694
3027
  class="pf-v6-c-menu-toggle"
2695
3028
  type="button"
2696
3029
  aria-expanded="false"
2697
- id="masthead-toggle-group-filters-expanded-mobile-example-masthead-toolbar-search-filter-menu"
3030
+ id="masthead-toggle-group-filters-expanded-mobile-example-docked-toolbar-search-filter-menu"
2698
3031
  >
2699
3032
  <span class="pf-v6-c-menu-toggle__icon">
2700
3033
  <i class="fas fa-filter" aria-hidden="true"></i>
@@ -2788,21 +3121,57 @@ wrapperTag: div
2788
3121
  </li>
2789
3122
  <li class="pf-v6-c-breadcrumb__item">
2790
3123
  <span class="pf-v6-c-breadcrumb__item-divider">
2791
- <i class="fas fa-angle-right" aria-hidden="true"></i>
3124
+ <svg
3125
+ class="pf-v6-svg"
3126
+ viewBox="0 0 20 20"
3127
+ fill="currentColor"
3128
+ aria-hidden="true"
3129
+ role="img"
3130
+ width="1em"
3131
+ height="1em"
3132
+ >
3133
+ <path
3134
+ 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"
3135
+ />
3136
+ </svg>
2792
3137
  </span>
2793
3138
 
2794
3139
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
2795
3140
  </li>
2796
3141
  <li class="pf-v6-c-breadcrumb__item">
2797
3142
  <span class="pf-v6-c-breadcrumb__item-divider">
2798
- <i class="fas fa-angle-right" aria-hidden="true"></i>
3143
+ <svg
3144
+ class="pf-v6-svg"
3145
+ viewBox="0 0 20 20"
3146
+ fill="currentColor"
3147
+ aria-hidden="true"
3148
+ role="img"
3149
+ width="1em"
3150
+ height="1em"
3151
+ >
3152
+ <path
3153
+ 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"
3154
+ />
3155
+ </svg>
2799
3156
  </span>
2800
3157
 
2801
3158
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
2802
3159
  </li>
2803
3160
  <li class="pf-v6-c-breadcrumb__item">
2804
3161
  <span class="pf-v6-c-breadcrumb__item-divider">
2805
- <i class="fas fa-angle-right" aria-hidden="true"></i>
3162
+ <svg
3163
+ class="pf-v6-svg"
3164
+ viewBox="0 0 20 20"
3165
+ fill="currentColor"
3166
+ aria-hidden="true"
3167
+ role="img"
3168
+ width="1em"
3169
+ height="1em"
3170
+ >
3171
+ <path
3172
+ 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"
3173
+ />
3174
+ </svg>
2806
3175
  </span>
2807
3176
 
2808
3177
  <a