@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
@@ -15,7 +15,7 @@ section: components
15
15
  <span class="pf-v6-c-button__text">Skip to content</span>
16
16
  </a>
17
17
  </div>
18
- <header class="pf-v6-c-masthead" id="nav-basic-example-masthead">
18
+ <header class="pf-v6-c-masthead" id="nav-basic-example-docked">
19
19
  <div class="pf-v6-c-masthead__main">
20
20
  <span class="pf-v6-c-masthead__toggle">
21
21
  <button
@@ -57,7 +57,7 @@ section: components
57
57
  y1="2.25860997e-13%"
58
58
  x2="32%"
59
59
  y2="100%"
60
- id="linearGradient-nav-basic-example-masthead"
60
+ id="linearGradient-nav-basic-example-docked"
61
61
  >
62
62
  <stop stop-color="#2B9AF3" offset="0%" />
63
63
  <stop
@@ -111,11 +111,11 @@ section: components
111
111
  />
112
112
  <path
113
113
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
114
- fill="url(#linearGradient-nav-basic-example-masthead)"
114
+ fill="url(#linearGradient-nav-basic-example-docked)"
115
115
  />
116
116
  <path
117
117
  d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z"
118
- fill="url(#linearGradient-nav-basic-example-masthead)"
118
+ fill="url(#linearGradient-nav-basic-example-docked)"
119
119
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
120
120
  />
121
121
  </g>
@@ -127,7 +127,7 @@ section: components
127
127
  <div class="pf-v6-c-masthead__content">
128
128
  <div
129
129
  class="pf-v6-c-toolbar pf-m-static"
130
- id="nav-basic-example-masthead-toolbar"
130
+ id="nav-basic-example-docked-toolbar"
131
131
  >
132
132
  <div class="pf-v6-c-toolbar__content">
133
133
  <div class="pf-v6-c-toolbar__content-section">
@@ -249,21 +249,57 @@ section: components
249
249
  </li>
250
250
  <li class="pf-v6-c-breadcrumb__item">
251
251
  <span class="pf-v6-c-breadcrumb__item-divider">
252
- <i class="fas fa-angle-right" aria-hidden="true"></i>
252
+ <svg
253
+ class="pf-v6-svg"
254
+ viewBox="0 0 20 20"
255
+ fill="currentColor"
256
+ aria-hidden="true"
257
+ role="img"
258
+ width="1em"
259
+ height="1em"
260
+ >
261
+ <path
262
+ 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"
263
+ />
264
+ </svg>
253
265
  </span>
254
266
 
255
267
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
256
268
  </li>
257
269
  <li class="pf-v6-c-breadcrumb__item">
258
270
  <span class="pf-v6-c-breadcrumb__item-divider">
259
- <i class="fas fa-angle-right" aria-hidden="true"></i>
271
+ <svg
272
+ class="pf-v6-svg"
273
+ viewBox="0 0 20 20"
274
+ fill="currentColor"
275
+ aria-hidden="true"
276
+ role="img"
277
+ width="1em"
278
+ height="1em"
279
+ >
280
+ <path
281
+ 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"
282
+ />
283
+ </svg>
260
284
  </span>
261
285
 
262
286
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
263
287
  </li>
264
288
  <li class="pf-v6-c-breadcrumb__item">
265
289
  <span class="pf-v6-c-breadcrumb__item-divider">
266
- <i class="fas fa-angle-right" aria-hidden="true"></i>
290
+ <svg
291
+ class="pf-v6-svg"
292
+ viewBox="0 0 20 20"
293
+ fill="currentColor"
294
+ aria-hidden="true"
295
+ role="img"
296
+ width="1em"
297
+ height="1em"
298
+ >
299
+ <path
300
+ 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"
301
+ />
302
+ </svg>
267
303
  </span>
268
304
 
269
305
  <a
@@ -336,7 +372,7 @@ section: components
336
372
  <span class="pf-v6-c-button__text">Skip to content</span>
337
373
  </a>
338
374
  </div>
339
- <header class="pf-v6-c-masthead" id="nav-grouped-nav-example-masthead">
375
+ <header class="pf-v6-c-masthead" id="nav-grouped-nav-example-docked">
340
376
  <div class="pf-v6-c-masthead__main">
341
377
  <span class="pf-v6-c-masthead__toggle">
342
378
  <button
@@ -378,7 +414,7 @@ section: components
378
414
  y1="2.25860997e-13%"
379
415
  x2="32%"
380
416
  y2="100%"
381
- id="linearGradient-nav-grouped-nav-example-masthead"
417
+ id="linearGradient-nav-grouped-nav-example-docked"
382
418
  >
383
419
  <stop stop-color="#2B9AF3" offset="0%" />
384
420
  <stop
@@ -432,11 +468,11 @@ section: components
432
468
  />
433
469
  <path
434
470
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
435
- fill="url(#linearGradient-nav-grouped-nav-example-masthead)"
471
+ fill="url(#linearGradient-nav-grouped-nav-example-docked)"
436
472
  />
437
473
  <path
438
474
  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"
439
- fill="url(#linearGradient-nav-grouped-nav-example-masthead)"
475
+ fill="url(#linearGradient-nav-grouped-nav-example-docked)"
440
476
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
441
477
  />
442
478
  </g>
@@ -448,7 +484,7 @@ section: components
448
484
  <div class="pf-v6-c-masthead__content">
449
485
  <div
450
486
  class="pf-v6-c-toolbar pf-m-static"
451
- id="nav-grouped-nav-example-masthead-toolbar"
487
+ id="nav-grouped-nav-example-docked-toolbar"
452
488
  >
453
489
  <div class="pf-v6-c-toolbar__content">
454
490
  <div class="pf-v6-c-toolbar__content-section">
@@ -602,21 +638,57 @@ section: components
602
638
  </li>
603
639
  <li class="pf-v6-c-breadcrumb__item">
604
640
  <span class="pf-v6-c-breadcrumb__item-divider">
605
- <i class="fas fa-angle-right" aria-hidden="true"></i>
641
+ <svg
642
+ class="pf-v6-svg"
643
+ viewBox="0 0 20 20"
644
+ fill="currentColor"
645
+ aria-hidden="true"
646
+ role="img"
647
+ width="1em"
648
+ height="1em"
649
+ >
650
+ <path
651
+ 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"
652
+ />
653
+ </svg>
606
654
  </span>
607
655
 
608
656
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
609
657
  </li>
610
658
  <li class="pf-v6-c-breadcrumb__item">
611
659
  <span class="pf-v6-c-breadcrumb__item-divider">
612
- <i class="fas fa-angle-right" aria-hidden="true"></i>
660
+ <svg
661
+ class="pf-v6-svg"
662
+ viewBox="0 0 20 20"
663
+ fill="currentColor"
664
+ aria-hidden="true"
665
+ role="img"
666
+ width="1em"
667
+ height="1em"
668
+ >
669
+ <path
670
+ 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"
671
+ />
672
+ </svg>
613
673
  </span>
614
674
 
615
675
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
616
676
  </li>
617
677
  <li class="pf-v6-c-breadcrumb__item">
618
678
  <span class="pf-v6-c-breadcrumb__item-divider">
619
- <i class="fas fa-angle-right" aria-hidden="true"></i>
679
+ <svg
680
+ class="pf-v6-svg"
681
+ viewBox="0 0 20 20"
682
+ fill="currentColor"
683
+ aria-hidden="true"
684
+ role="img"
685
+ width="1em"
686
+ height="1em"
687
+ >
688
+ <path
689
+ 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"
690
+ />
691
+ </svg>
620
692
  </span>
621
693
 
622
694
  <a
@@ -689,7 +761,7 @@ section: components
689
761
  <span class="pf-v6-c-button__text">Skip to content</span>
690
762
  </a>
691
763
  </div>
692
- <header class="pf-v6-c-masthead" id="nav-expandable-example-masthead">
764
+ <header class="pf-v6-c-masthead" id="nav-expandable-example-docked">
693
765
  <div class="pf-v6-c-masthead__main">
694
766
  <span class="pf-v6-c-masthead__toggle">
695
767
  <button
@@ -731,7 +803,7 @@ section: components
731
803
  y1="2.25860997e-13%"
732
804
  x2="32%"
733
805
  y2="100%"
734
- id="linearGradient-nav-expandable-example-masthead"
806
+ id="linearGradient-nav-expandable-example-docked"
735
807
  >
736
808
  <stop stop-color="#2B9AF3" offset="0%" />
737
809
  <stop
@@ -785,11 +857,11 @@ section: components
785
857
  />
786
858
  <path
787
859
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
788
- fill="url(#linearGradient-nav-expandable-example-masthead)"
860
+ fill="url(#linearGradient-nav-expandable-example-docked)"
789
861
  />
790
862
  <path
791
863
  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"
792
- fill="url(#linearGradient-nav-expandable-example-masthead)"
864
+ fill="url(#linearGradient-nav-expandable-example-docked)"
793
865
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
794
866
  />
795
867
  </g>
@@ -801,7 +873,7 @@ section: components
801
873
  <div class="pf-v6-c-masthead__content">
802
874
  <div
803
875
  class="pf-v6-c-toolbar pf-m-static"
804
- id="nav-expandable-example-masthead-toolbar"
876
+ id="nav-expandable-example-docked-toolbar"
805
877
  >
806
878
  <div class="pf-v6-c-toolbar__content">
807
879
  <div class="pf-v6-c-toolbar__content-section">
@@ -884,7 +956,19 @@ section: components
884
956
  <span class="pf-v6-c-nav__link-text">System panel</span>
885
957
  <span class="pf-v6-c-nav__toggle">
886
958
  <span class="pf-v6-c-nav__toggle-icon">
887
- <i class="fas fa-angle-right" aria-hidden="true"></i>
959
+ <svg
960
+ class="pf-v6-svg"
961
+ viewBox="0 0 20 20"
962
+ fill="currentColor"
963
+ aria-hidden="true"
964
+ role="img"
965
+ width="1em"
966
+ height="1em"
967
+ >
968
+ <path
969
+ d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
970
+ />
971
+ </svg>
888
972
  </span>
889
973
  </span>
890
974
  </button>
@@ -939,7 +1023,19 @@ section: components
939
1023
  <span class="pf-v6-c-nav__link-text">Policy</span>
940
1024
  <span class="pf-v6-c-nav__toggle">
941
1025
  <span class="pf-v6-c-nav__toggle-icon">
942
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1026
+ <svg
1027
+ class="pf-v6-svg"
1028
+ viewBox="0 0 20 20"
1029
+ fill="currentColor"
1030
+ aria-hidden="true"
1031
+ role="img"
1032
+ width="1em"
1033
+ height="1em"
1034
+ >
1035
+ <path
1036
+ d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
1037
+ />
1038
+ </svg>
943
1039
  </span>
944
1040
  </span>
945
1041
  </button>
@@ -972,7 +1068,19 @@ section: components
972
1068
  <span class="pf-v6-c-nav__link-text">Authentication</span>
973
1069
  <span class="pf-v6-c-nav__toggle">
974
1070
  <span class="pf-v6-c-nav__toggle-icon">
975
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1071
+ <svg
1072
+ class="pf-v6-svg"
1073
+ viewBox="0 0 20 20"
1074
+ fill="currentColor"
1075
+ aria-hidden="true"
1076
+ role="img"
1077
+ width="1em"
1078
+ height="1em"
1079
+ >
1080
+ <path
1081
+ d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
1082
+ />
1083
+ </svg>
976
1084
  </span>
977
1085
  </span>
978
1086
  </button>
@@ -1015,21 +1123,57 @@ section: components
1015
1123
  </li>
1016
1124
  <li class="pf-v6-c-breadcrumb__item">
1017
1125
  <span class="pf-v6-c-breadcrumb__item-divider">
1018
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1126
+ <svg
1127
+ class="pf-v6-svg"
1128
+ viewBox="0 0 20 20"
1129
+ fill="currentColor"
1130
+ aria-hidden="true"
1131
+ role="img"
1132
+ width="1em"
1133
+ height="1em"
1134
+ >
1135
+ <path
1136
+ 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"
1137
+ />
1138
+ </svg>
1019
1139
  </span>
1020
1140
 
1021
1141
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1022
1142
  </li>
1023
1143
  <li class="pf-v6-c-breadcrumb__item">
1024
1144
  <span class="pf-v6-c-breadcrumb__item-divider">
1025
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1145
+ <svg
1146
+ class="pf-v6-svg"
1147
+ viewBox="0 0 20 20"
1148
+ fill="currentColor"
1149
+ aria-hidden="true"
1150
+ role="img"
1151
+ width="1em"
1152
+ height="1em"
1153
+ >
1154
+ <path
1155
+ 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"
1156
+ />
1157
+ </svg>
1026
1158
  </span>
1027
1159
 
1028
1160
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1029
1161
  </li>
1030
1162
  <li class="pf-v6-c-breadcrumb__item">
1031
1163
  <span class="pf-v6-c-breadcrumb__item-divider">
1032
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1164
+ <svg
1165
+ class="pf-v6-svg"
1166
+ viewBox="0 0 20 20"
1167
+ fill="currentColor"
1168
+ aria-hidden="true"
1169
+ role="img"
1170
+ width="1em"
1171
+ height="1em"
1172
+ >
1173
+ <path
1174
+ 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"
1175
+ />
1176
+ </svg>
1033
1177
  </span>
1034
1178
 
1035
1179
  <a
@@ -1102,7 +1246,7 @@ section: components
1102
1246
  <span class="pf-v6-c-button__text">Skip to content</span>
1103
1247
  </a>
1104
1248
  </div>
1105
- <header class="pf-v6-c-masthead" id="nav-horizontal-example-masthead">
1249
+ <header class="pf-v6-c-masthead" id="nav-horizontal-example-docked">
1106
1250
  <div class="pf-v6-c-masthead__main">
1107
1251
  <div class="pf-v6-c-masthead__brand">
1108
1252
  <a class="pf-v6-c-masthead__logo" href="#">
@@ -1114,7 +1258,7 @@ section: components
1114
1258
  y1="2.25860997e-13%"
1115
1259
  x2="32%"
1116
1260
  y2="100%"
1117
- id="linearGradient-nav-horizontal-example-masthead"
1261
+ id="linearGradient-nav-horizontal-example-docked"
1118
1262
  >
1119
1263
  <stop stop-color="#2B9AF3" offset="0%" />
1120
1264
  <stop
@@ -1168,11 +1312,11 @@ section: components
1168
1312
  />
1169
1313
  <path
1170
1314
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
1171
- fill="url(#linearGradient-nav-horizontal-example-masthead)"
1315
+ fill="url(#linearGradient-nav-horizontal-example-docked)"
1172
1316
  />
1173
1317
  <path
1174
1318
  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"
1175
- fill="url(#linearGradient-nav-horizontal-example-masthead)"
1319
+ fill="url(#linearGradient-nav-horizontal-example-docked)"
1176
1320
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
1177
1321
  />
1178
1322
  </g>
@@ -1184,7 +1328,7 @@ section: components
1184
1328
  <div class="pf-v6-c-masthead__content">
1185
1329
  <div
1186
1330
  class="pf-v6-c-toolbar pf-m-static"
1187
- id="nav-horizontal-example-masthead-toolbar"
1331
+ id="nav-horizontal-example-docked-toolbar"
1188
1332
  >
1189
1333
  <div class="pf-v6-c-toolbar__content">
1190
1334
  <div class="pf-v6-c-toolbar__content-section">
@@ -1194,7 +1338,7 @@ section: components
1194
1338
  >
1195
1339
  <nav
1196
1340
  class="pf-v6-c-nav pf-m-scrollable pf-m-horizontal"
1197
- id="nav-horizontal-example-masthead-horizontal-nav"
1341
+ id="nav-horizontal-example-docked-horizontal-nav"
1198
1342
  aria-label="Global"
1199
1343
  >
1200
1344
  <div class="pf-v6-c-nav__scroll-button">
@@ -1204,7 +1348,19 @@ section: components
1204
1348
  aria-label="Scroll start"
1205
1349
  >
1206
1350
  <span class="pf-v6-c-button__icon">
1207
- <i class="fas fa-angle-left" aria-hidden="true"></i>
1351
+ <svg
1352
+ class="pf-v6-svg"
1353
+ viewBox="0 0 20 20"
1354
+ fill="currentColor"
1355
+ aria-hidden="true"
1356
+ role="img"
1357
+ width="1em"
1358
+ height="1em"
1359
+ >
1360
+ <path
1361
+ 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"
1362
+ />
1363
+ </svg>
1208
1364
  </span>
1209
1365
  </button>
1210
1366
  </div>
@@ -1246,7 +1402,19 @@ section: components
1246
1402
  aria-label="Scroll end"
1247
1403
  >
1248
1404
  <span class="pf-v6-c-button__icon">
1249
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1405
+ <svg
1406
+ class="pf-v6-svg"
1407
+ viewBox="0 0 20 20"
1408
+ fill="currentColor"
1409
+ aria-hidden="true"
1410
+ role="img"
1411
+ width="1em"
1412
+ height="1em"
1413
+ >
1414
+ <path
1415
+ 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"
1416
+ />
1417
+ </svg>
1250
1418
  </span>
1251
1419
  </button>
1252
1420
  </div>
@@ -1330,21 +1498,57 @@ section: components
1330
1498
  </li>
1331
1499
  <li class="pf-v6-c-breadcrumb__item">
1332
1500
  <span class="pf-v6-c-breadcrumb__item-divider">
1333
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1501
+ <svg
1502
+ class="pf-v6-svg"
1503
+ viewBox="0 0 20 20"
1504
+ fill="currentColor"
1505
+ aria-hidden="true"
1506
+ role="img"
1507
+ width="1em"
1508
+ height="1em"
1509
+ >
1510
+ <path
1511
+ 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"
1512
+ />
1513
+ </svg>
1334
1514
  </span>
1335
1515
 
1336
1516
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1337
1517
  </li>
1338
1518
  <li class="pf-v6-c-breadcrumb__item">
1339
1519
  <span class="pf-v6-c-breadcrumb__item-divider">
1340
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1520
+ <svg
1521
+ class="pf-v6-svg"
1522
+ viewBox="0 0 20 20"
1523
+ fill="currentColor"
1524
+ aria-hidden="true"
1525
+ role="img"
1526
+ width="1em"
1527
+ height="1em"
1528
+ >
1529
+ <path
1530
+ 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"
1531
+ />
1532
+ </svg>
1341
1533
  </span>
1342
1534
 
1343
1535
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1344
1536
  </li>
1345
1537
  <li class="pf-v6-c-breadcrumb__item">
1346
1538
  <span class="pf-v6-c-breadcrumb__item-divider">
1347
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1539
+ <svg
1540
+ class="pf-v6-svg"
1541
+ viewBox="0 0 20 20"
1542
+ fill="currentColor"
1543
+ aria-hidden="true"
1544
+ role="img"
1545
+ width="1em"
1546
+ height="1em"
1547
+ >
1548
+ <path
1549
+ 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"
1550
+ />
1551
+ </svg>
1348
1552
  </span>
1349
1553
 
1350
1554
  <a
@@ -1417,7 +1621,7 @@ section: components
1417
1621
  <span class="pf-v6-c-button__text">Skip to content</span>
1418
1622
  </a>
1419
1623
  </div>
1420
- <header class="pf-v6-c-masthead" id="nav-horizontal-subnav-example-masthead">
1624
+ <header class="pf-v6-c-masthead" id="nav-horizontal-subnav-example-docked">
1421
1625
  <div class="pf-v6-c-masthead__main">
1422
1626
  <span class="pf-v6-c-masthead__toggle">
1423
1627
  <button
@@ -1459,7 +1663,7 @@ section: components
1459
1663
  y1="2.25860997e-13%"
1460
1664
  x2="32%"
1461
1665
  y2="100%"
1462
- id="linearGradient-nav-horizontal-subnav-example-masthead"
1666
+ id="linearGradient-nav-horizontal-subnav-example-docked"
1463
1667
  >
1464
1668
  <stop stop-color="#2B9AF3" offset="0%" />
1465
1669
  <stop
@@ -1513,11 +1717,11 @@ section: components
1513
1717
  />
1514
1718
  <path
1515
1719
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
1516
- fill="url(#linearGradient-nav-horizontal-subnav-example-masthead)"
1720
+ fill="url(#linearGradient-nav-horizontal-subnav-example-docked)"
1517
1721
  />
1518
1722
  <path
1519
1723
  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"
1520
- fill="url(#linearGradient-nav-horizontal-subnav-example-masthead)"
1724
+ fill="url(#linearGradient-nav-horizontal-subnav-example-docked)"
1521
1725
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
1522
1726
  />
1523
1727
  </g>
@@ -1529,7 +1733,7 @@ section: components
1529
1733
  <div class="pf-v6-c-masthead__content">
1530
1734
  <div
1531
1735
  class="pf-v6-c-toolbar pf-m-static"
1532
- id="nav-horizontal-subnav-example-masthead-toolbar"
1736
+ id="nav-horizontal-subnav-example-docked-toolbar"
1533
1737
  >
1534
1738
  <div class="pf-v6-c-toolbar__content">
1535
1739
  <div class="pf-v6-c-toolbar__content-section">
@@ -1676,21 +1880,57 @@ section: components
1676
1880
  </li>
1677
1881
  <li class="pf-v6-c-breadcrumb__item">
1678
1882
  <span class="pf-v6-c-breadcrumb__item-divider">
1679
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1883
+ <svg
1884
+ class="pf-v6-svg"
1885
+ viewBox="0 0 20 20"
1886
+ fill="currentColor"
1887
+ aria-hidden="true"
1888
+ role="img"
1889
+ width="1em"
1890
+ height="1em"
1891
+ >
1892
+ <path
1893
+ 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"
1894
+ />
1895
+ </svg>
1680
1896
  </span>
1681
1897
 
1682
1898
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1683
1899
  </li>
1684
1900
  <li class="pf-v6-c-breadcrumb__item">
1685
1901
  <span class="pf-v6-c-breadcrumb__item-divider">
1686
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1902
+ <svg
1903
+ class="pf-v6-svg"
1904
+ viewBox="0 0 20 20"
1905
+ fill="currentColor"
1906
+ aria-hidden="true"
1907
+ role="img"
1908
+ width="1em"
1909
+ height="1em"
1910
+ >
1911
+ <path
1912
+ 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"
1913
+ />
1914
+ </svg>
1687
1915
  </span>
1688
1916
 
1689
1917
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1690
1918
  </li>
1691
1919
  <li class="pf-v6-c-breadcrumb__item">
1692
1920
  <span class="pf-v6-c-breadcrumb__item-divider">
1693
- <i class="fas fa-angle-right" 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="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"
1932
+ />
1933
+ </svg>
1694
1934
  </span>
1695
1935
 
1696
1936
  <a
@@ -1765,39 +2005,9 @@ section: components
1765
2005
  </div>
1766
2006
  <header
1767
2007
  class="pf-v6-c-masthead pf-m-display-stack pf-m-display-inline-on-lg"
1768
- id="nav-horizontal-example-masthead"
2008
+ id="nav-horizontal-example-docked"
1769
2009
  >
1770
2010
  <div class="pf-v6-c-masthead__main">
1771
- <span class="pf-v6-c-masthead__toggle">
1772
- <button
1773
- class="pf-v6-c-button pf-m-hamburger pf-m-plain"
1774
- type="button"
1775
- aria-label="Global navigation"
1776
- >
1777
- <span class="pf-v6-c-button__icon">
1778
- <svg
1779
- viewBox="0 0 10 10"
1780
- class="pf-v6-c-button--hamburger-icon pf-v6-svg"
1781
- width="1em"
1782
- height="1em"
1783
- >
1784
- <path class="pf-v6-c-button--hamburger-icon--top" d="M1,1 L9,1" />
1785
- <path
1786
- class="pf-v6-c-button--hamburger-icon--middle"
1787
- d="M1,5 L9,5"
1788
- />
1789
- <path
1790
- class="pf-v6-c-button--hamburger-icon--arrow"
1791
- d="M1,5 L1,5 L1,5"
1792
- />
1793
- <path
1794
- class="pf-v6-c-button--hamburger-icon--bottom"
1795
- d="M9,9 L1,9"
1796
- />
1797
- </svg>
1798
- </span>
1799
- </button>
1800
- </span>
1801
2011
  <div class="pf-v6-c-masthead__brand">
1802
2012
  <a class="pf-v6-c-masthead__logo" href="#">
1803
2013
  <svg height="37px" viewBox="0 0 679 158">
@@ -1808,7 +2018,7 @@ section: components
1808
2018
  y1="2.25860997e-13%"
1809
2019
  x2="32%"
1810
2020
  y2="100%"
1811
- id="linearGradient-nav-horizontal-example-masthead"
2021
+ id="linearGradient-nav-horizontal-example-docked"
1812
2022
  >
1813
2023
  <stop stop-color="#2B9AF3" offset="0%" />
1814
2024
  <stop
@@ -1862,11 +2072,11 @@ section: components
1862
2072
  />
1863
2073
  <path
1864
2074
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
1865
- fill="url(#linearGradient-nav-horizontal-example-masthead)"
2075
+ fill="url(#linearGradient-nav-horizontal-example-docked)"
1866
2076
  />
1867
2077
  <path
1868
2078
  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"
1869
- fill="url(#linearGradient-nav-horizontal-example-masthead)"
2079
+ fill="url(#linearGradient-nav-horizontal-example-docked)"
1870
2080
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
1871
2081
  />
1872
2082
  </g>
@@ -1878,7 +2088,7 @@ section: components
1878
2088
  <div class="pf-v6-c-masthead__content">
1879
2089
  <div
1880
2090
  class="pf-v6-c-toolbar pf-m-static"
1881
- id="nav-horizontal-example-masthead-toolbar"
2091
+ id="nav-horizontal-example-docked-toolbar"
1882
2092
  >
1883
2093
  <div class="pf-v6-c-toolbar__content">
1884
2094
  <div class="pf-v6-c-toolbar__content-section">
@@ -1888,7 +2098,7 @@ section: components
1888
2098
  >
1889
2099
  <nav
1890
2100
  class="pf-v6-c-nav pf-m-scrollable pf-m-horizontal"
1891
- id="nav-horizontal-example-masthead-horizontal-nav"
2101
+ id="nav-horizontal-example-docked-horizontal-nav"
1892
2102
  aria-label="Global"
1893
2103
  >
1894
2104
  <div class="pf-v6-c-nav__scroll-button">
@@ -1898,7 +2108,19 @@ section: components
1898
2108
  aria-label="Scroll start"
1899
2109
  >
1900
2110
  <span class="pf-v6-c-button__icon">
1901
- <i class="fas fa-angle-left" aria-hidden="true"></i>
2111
+ <svg
2112
+ class="pf-v6-svg"
2113
+ viewBox="0 0 20 20"
2114
+ fill="currentColor"
2115
+ aria-hidden="true"
2116
+ role="img"
2117
+ width="1em"
2118
+ height="1em"
2119
+ >
2120
+ <path
2121
+ 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"
2122
+ />
2123
+ </svg>
1902
2124
  </span>
1903
2125
  </button>
1904
2126
  </div>
@@ -1940,7 +2162,19 @@ section: components
1940
2162
  aria-label="Scroll end"
1941
2163
  >
1942
2164
  <span class="pf-v6-c-button__icon">
1943
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2165
+ <svg
2166
+ class="pf-v6-svg"
2167
+ viewBox="0 0 20 20"
2168
+ fill="currentColor"
2169
+ aria-hidden="true"
2170
+ role="img"
2171
+ width="1em"
2172
+ height="1em"
2173
+ >
2174
+ <path
2175
+ 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"
2176
+ />
2177
+ </svg>
1944
2178
  </span>
1945
2179
  </button>
1946
2180
  </div>
@@ -2049,21 +2283,360 @@ section: components
2049
2283
  </li>
2050
2284
  <li class="pf-v6-c-breadcrumb__item">
2051
2285
  <span class="pf-v6-c-breadcrumb__item-divider">
2052
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2286
+ <svg
2287
+ class="pf-v6-svg"
2288
+ viewBox="0 0 20 20"
2289
+ fill="currentColor"
2290
+ aria-hidden="true"
2291
+ role="img"
2292
+ width="1em"
2293
+ height="1em"
2294
+ >
2295
+ <path
2296
+ 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"
2297
+ />
2298
+ </svg>
2299
+ </span>
2300
+
2301
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
2302
+ </li>
2303
+ <li class="pf-v6-c-breadcrumb__item">
2304
+ <span class="pf-v6-c-breadcrumb__item-divider">
2305
+ <svg
2306
+ class="pf-v6-svg"
2307
+ viewBox="0 0 20 20"
2308
+ fill="currentColor"
2309
+ aria-hidden="true"
2310
+ role="img"
2311
+ width="1em"
2312
+ height="1em"
2313
+ >
2314
+ <path
2315
+ 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"
2316
+ />
2317
+ </svg>
2318
+ </span>
2319
+
2320
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
2321
+ </li>
2322
+ <li class="pf-v6-c-breadcrumb__item">
2323
+ <span class="pf-v6-c-breadcrumb__item-divider">
2324
+ <svg
2325
+ class="pf-v6-svg"
2326
+ viewBox="0 0 20 20"
2327
+ fill="currentColor"
2328
+ aria-hidden="true"
2329
+ role="img"
2330
+ width="1em"
2331
+ height="1em"
2332
+ >
2333
+ <path
2334
+ 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"
2335
+ />
2336
+ </svg>
2337
+ </span>
2338
+
2339
+ <a
2340
+ href="#"
2341
+ class="pf-v6-c-breadcrumb__link pf-m-current"
2342
+ aria-current="page"
2343
+ >Section landing</a>
2344
+ </li>
2345
+ </ol>
2346
+ </nav>
2347
+ </div>
2348
+ </section>
2349
+ <section class="pf-v6-c-page__main-section pf-m-limit-width">
2350
+ <div class="pf-v6-c-page__main-body">
2351
+ <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
2352
+ <p class="pf-v6-c-content--p">This is a full page demo.</p>
2353
+ </div>
2354
+ </section>
2355
+ <section class="pf-v6-c-page__main-section pf-m-limit-width">
2356
+ <div class="pf-v6-c-page__main-body">
2357
+ <div class="pf-v6-l-gallery pf-m-gutter">
2358
+ <div class="pf-v6-c-card">
2359
+ <div class="pf-v6-c-card__body">This is a card</div>
2360
+ </div>
2361
+ <div class="pf-v6-c-card">
2362
+ <div class="pf-v6-c-card__body">This is a card</div>
2363
+ </div>
2364
+ <div class="pf-v6-c-card">
2365
+ <div class="pf-v6-c-card__body">This is a card</div>
2366
+ </div>
2367
+ <div class="pf-v6-c-card">
2368
+ <div class="pf-v6-c-card__body">This is a card</div>
2369
+ </div>
2370
+ <div class="pf-v6-c-card">
2371
+ <div class="pf-v6-c-card__body">This is a card</div>
2372
+ </div>
2373
+ <div class="pf-v6-c-card">
2374
+ <div class="pf-v6-c-card__body">This is a card</div>
2375
+ </div>
2376
+ <div class="pf-v6-c-card">
2377
+ <div class="pf-v6-c-card__body">This is a card</div>
2378
+ </div>
2379
+ <div class="pf-v6-c-card">
2380
+ <div class="pf-v6-c-card__body">This is a card</div>
2381
+ </div>
2382
+ <div class="pf-v6-c-card">
2383
+ <div class="pf-v6-c-card__body">This is a card</div>
2384
+ </div>
2385
+ <div class="pf-v6-c-card">
2386
+ <div class="pf-v6-c-card__body">This is a card</div>
2387
+ </div>
2388
+ </div>
2389
+ </div>
2390
+ </section>
2391
+ </main>
2392
+ </div>
2393
+ </div>
2394
+
2395
+ ```
2396
+
2397
+ ### Docked nav
2398
+
2399
+ ```html isFullscreen isBeta
2400
+ <div class="pf-v6-c-page pf-m-dock pf-m-no-sidebar" id="nav-docked-example">
2401
+ <div class="pf-v6-c-page__dock">
2402
+ <div class="pf-v6-c-skip-to-content">
2403
+ <a
2404
+ class="pf-v6-c-button pf-m-primary"
2405
+ href="#main-content-nav-docked-example"
2406
+ >
2407
+ <span class="pf-v6-c-button__text">Skip to content</span>
2408
+ </a>
2409
+ </div>
2410
+ <header
2411
+ class="pf-v6-c-masthead pf-m-docked"
2412
+ id="nav-docked-example-masthead"
2413
+ >
2414
+ <div class="pf-v6-c-masthead__main">
2415
+ <div class="pf-v6-c-masthead__brand">
2416
+ <a class="pf-v6-c-masthead__logo" href="#">
2417
+ <svg width="37px" height="37px" viewBox="0 0 158 158">
2418
+ <title>PF-HorizontalLogo-Color</title>
2419
+ <defs>
2420
+ <linearGradient
2421
+ x1="68%"
2422
+ y1="2.25860997e-13%"
2423
+ x2="32%"
2424
+ y2="100%"
2425
+ id="linearGradient-1"
2426
+ >
2427
+ <stop stop-color="#2B9AF3" offset="0%" />
2428
+ <stop
2429
+ stop-color="#73BCF7"
2430
+ stop-opacity="0.502212631"
2431
+ offset="100%"
2432
+ />
2433
+ </linearGradient>
2434
+ </defs>
2435
+ <g
2436
+ id="PF-IconLogo-color"
2437
+ stroke="none"
2438
+ stroke-width="1"
2439
+ fill="none"
2440
+ fill-rule="evenodd"
2441
+ >
2442
+ <g id="Logo">
2443
+ <path
2444
+ d="M61.826087,0 L158,0 L158,96.173913 L147.695652,96.173913 C100.271201,96.173913 61.826087,57.7287992 61.826087,10.3043478 L61.826087,0 L61.826087,0 Z"
2445
+ id="Rectangle-Copy-17"
2446
+ fill="#0066CC"
2447
+ />
2448
+ <path
2449
+ d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
2450
+ id="Path-2"
2451
+ fill="url(#linearGradient-1)"
2452
+ />
2453
+ <path
2454
+ 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"
2455
+ id="Path-2"
2456
+ fill="url(#linearGradient-1)"
2457
+ transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
2458
+ />
2459
+ </g>
2460
+ </g>
2461
+ </svg>
2462
+ </a>
2463
+ </div>
2464
+ </div>
2465
+ <hr class="pf-v6-c-divider" />
2466
+ <div class="pf-v6-c-masthead__content">
2467
+ <div
2468
+ class="pf-v6-c-toolbar pf-m-vertical pf-m-static"
2469
+ id="nav-docked-example-masthead-toolbar"
2470
+ >
2471
+ <div class="pf-v6-c-toolbar__content">
2472
+ <div class="pf-v6-c-toolbar__content-section">
2473
+ <nav class="pf-v6-c-nav pf-m-docked" aria-label="Global">
2474
+ <ul class="pf-v6-c-nav__list" role="list">
2475
+ <li class="pf-v6-c-nav__item">
2476
+ <a href="#" class="pf-v6-c-nav__link" aria-label="Cube">
2477
+ <span class="pf-v6-c-nav__link-icon">
2478
+ <i class="fas fa-fw fa-cube" aria-hidden="true"></i>
2479
+ </span>
2480
+ </a>
2481
+ </li>
2482
+ <li class="pf-v6-c-nav__item">
2483
+ <a
2484
+ href="#"
2485
+ class="pf-v6-c-nav__link pf-m-current"
2486
+ aria-current="page"
2487
+ aria-label="Folder"
2488
+ >
2489
+ <span class="pf-v6-c-nav__link-icon">
2490
+ <i class="fas fa-fw fa-folder" aria-hidden="true"></i>
2491
+ </span>
2492
+ </a>
2493
+ </li>
2494
+ <li class="pf-v6-c-nav__item">
2495
+ <a href="#" class="pf-v6-c-nav__link" aria-label="Cloud">
2496
+ <span class="pf-v6-c-nav__link-icon">
2497
+ <i class="fas fa-fw fa-cloud" aria-hidden="true"></i>
2498
+ </span>
2499
+ </a>
2500
+ </li>
2501
+ <li class="pf-v6-c-nav__item">
2502
+ <a href="#" class="pf-v6-c-nav__link" aria-label="Code">
2503
+ <span class="pf-v6-c-nav__link-icon">
2504
+ <i class="fas fa-fw fa-code" aria-hidden="true"></i>
2505
+ </span>
2506
+ </a>
2507
+ </li>
2508
+ </ul>
2509
+ </nav>
2510
+
2511
+ <div
2512
+ class="pf-v6-c-toolbar__group pf-m-align-end pf-m-spacer-none pf-m-spacer-md-on-md pf-m-action-group-plain"
2513
+ >
2514
+ <div
2515
+ class="pf-v6-c-toolbar__group pf-m-hidden pf-m-visible-on-lg pf-m-action-group-plain"
2516
+ >
2517
+ <div class="pf-v6-c-toolbar__item">
2518
+ <button
2519
+ class="pf-v6-c-menu-toggle pf-m-plain"
2520
+ type="button"
2521
+ aria-expanded="false"
2522
+ aria-label="Application launcher"
2523
+ >
2524
+ <span class="pf-v6-c-menu-toggle__icon">
2525
+ <i class="fas fa-th" aria-hidden="true"></i>
2526
+ </span>
2527
+ </button>
2528
+ </div>
2529
+ <div class="pf-v6-c-toolbar__item">
2530
+ <button
2531
+ class="pf-v6-c-menu-toggle pf-m-settings pf-m-plain"
2532
+ type="button"
2533
+ aria-expanded="false"
2534
+ aria-label="Settings"
2535
+ >
2536
+ <span class="pf-v6-c-menu-toggle__icon">
2537
+ <i class="fas fa-cog" aria-hidden="true"></i>
2538
+ </span>
2539
+ </button>
2540
+ </div>
2541
+ <div class="pf-v6-c-toolbar__item">
2542
+ <button
2543
+ class="pf-v6-c-menu-toggle pf-m-plain"
2544
+ type="button"
2545
+ aria-expanded="false"
2546
+ aria-label="Help"
2547
+ >
2548
+ <span class="pf-v6-c-menu-toggle__icon">
2549
+ <i class="fas fa-question-circle" aria-hidden="true"></i>
2550
+ </span>
2551
+ </button>
2552
+ </div>
2553
+ </div>
2554
+
2555
+ <div class="pf-v6-c-toolbar__item pf-m-hidden-on-lg">
2556
+ <button
2557
+ class="pf-v6-c-menu-toggle pf-m-plain"
2558
+ type="button"
2559
+ aria-expanded="false"
2560
+ aria-label="Actions"
2561
+ >
2562
+ <span class="pf-v6-c-menu-toggle__icon">
2563
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
2564
+ </span>
2565
+ </button>
2566
+ </div>
2567
+ </div>
2568
+ </div>
2569
+ </div>
2570
+ </div>
2571
+ </div>
2572
+ </header>
2573
+ </div>
2574
+ <div class="pf-v6-c-page__main-container" tabindex="-1">
2575
+ <main
2576
+ class="pf-v6-c-page__main"
2577
+ tabindex="-1"
2578
+ id="main-content-nav-docked-example"
2579
+ >
2580
+ <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
2581
+ <div class="pf-v6-c-page__main-body">
2582
+ <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
2583
+ <ol class="pf-v6-c-breadcrumb__list" role="list">
2584
+ <li class="pf-v6-c-breadcrumb__item">
2585
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
2586
+ </li>
2587
+ <li class="pf-v6-c-breadcrumb__item">
2588
+ <span class="pf-v6-c-breadcrumb__item-divider">
2589
+ <svg
2590
+ class="pf-v6-svg"
2591
+ viewBox="0 0 20 20"
2592
+ fill="currentColor"
2593
+ aria-hidden="true"
2594
+ role="img"
2595
+ width="1em"
2596
+ height="1em"
2597
+ >
2598
+ <path
2599
+ 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"
2600
+ />
2601
+ </svg>
2053
2602
  </span>
2054
2603
 
2055
2604
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
2056
2605
  </li>
2057
2606
  <li class="pf-v6-c-breadcrumb__item">
2058
2607
  <span class="pf-v6-c-breadcrumb__item-divider">
2059
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2608
+ <svg
2609
+ class="pf-v6-svg"
2610
+ viewBox="0 0 20 20"
2611
+ fill="currentColor"
2612
+ aria-hidden="true"
2613
+ role="img"
2614
+ width="1em"
2615
+ height="1em"
2616
+ >
2617
+ <path
2618
+ 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"
2619
+ />
2620
+ </svg>
2060
2621
  </span>
2061
2622
 
2062
2623
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
2063
2624
  </li>
2064
2625
  <li class="pf-v6-c-breadcrumb__item">
2065
2626
  <span class="pf-v6-c-breadcrumb__item-divider">
2066
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2627
+ <svg
2628
+ class="pf-v6-svg"
2629
+ viewBox="0 0 20 20"
2630
+ fill="currentColor"
2631
+ aria-hidden="true"
2632
+ role="img"
2633
+ width="1em"
2634
+ height="1em"
2635
+ >
2636
+ <path
2637
+ 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"
2638
+ />
2639
+ </svg>
2067
2640
  </span>
2068
2641
 
2069
2642
  <a