@patternfly/patternfly 6.5.0-prerelease.6 → 6.5.0-prerelease.60

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 (392) 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.jpg +0 -0
  10. package/assets/images/compass--wallpaper-dark.png +0 -0
  11. package/assets/images/compass--wallpaper-light.jpg +0 -0
  12. package/assets/images/compass--wallpaper-light.png +0 -0
  13. package/assets/images/glass-brand-dark.jpg +0 -0
  14. package/assets/images/glass-brand-dark.png +0 -0
  15. package/assets/images/glass-brand-light.jpg +0 -0
  16. package/assets/images/glass-brand-light.png +0 -0
  17. package/base/normalize.scss +7 -0
  18. package/base/patternfly-common.css +50 -0
  19. package/base/patternfly-common.scss +59 -0
  20. package/base/patternfly-svg-icons.css +11 -0
  21. package/base/patternfly-svg-icons.scss +14 -0
  22. package/base/patternfly-variables.css +926 -513
  23. package/base/patternfly-variables.scss +46 -4
  24. package/base/tokens/tokens-dark.scss +56 -8
  25. package/base/tokens/tokens-default.scss +69 -14
  26. package/base/tokens/tokens-glass-dark.scss +26 -0
  27. package/base/tokens/tokens-glass.scss +22 -0
  28. package/base/tokens/tokens-local.scss +17 -0
  29. package/base/tokens/tokens-palette.scss +3 -1
  30. package/base/tokens/tokens-redhat-dark.scss +21 -0
  31. package/base/tokens/tokens-redhat-glass-dark.scss +40 -0
  32. package/base/tokens/tokens-redhat-glass.scss +30 -0
  33. package/base/tokens/tokens-redhat-highcontrast-dark.scss +50 -0
  34. package/base/tokens/tokens-redhat-highcontrast.scss +128 -0
  35. package/base/tokens/tokens-redhat.scss +15 -0
  36. package/components/AboutModalBox/about-modal-box.css +36 -26
  37. package/components/Accordion/accordion.css +27 -14
  38. package/components/Accordion/accordion.scss +12 -2
  39. package/components/ActionList/action-list.css +2 -0
  40. package/components/ActionList/action-list.scss +2 -0
  41. package/components/Alert/alert.css +7 -5
  42. package/components/Alert/alert.scss +2 -1
  43. package/components/Avatar/avatar.css +12 -4
  44. package/components/BackgroundImage/background-image.css +6 -3
  45. package/components/Banner/banner.css +8 -6
  46. package/components/Brand/brand.css +3 -1
  47. package/components/Breadcrumb/breadcrumb.css +4 -3
  48. package/components/Button/button.css +121 -30
  49. package/components/Button/button.scss +131 -26
  50. package/components/CalendarMonth/calendar-month.css +4 -3
  51. package/components/Card/card.css +51 -13
  52. package/components/Card/card.scss +61 -8
  53. package/components/ClipboardCopy/clipboard-copy.css +7 -6
  54. package/components/ClipboardCopy/clipboard-copy.scss +3 -3
  55. package/components/CodeEditor/code-editor.css +1 -1
  56. package/components/CodeEditor/code-editor.scss +1 -1
  57. package/components/Compass/compass.css +320 -0
  58. package/components/Compass/compass.scss +350 -0
  59. package/components/DataList/data-list.css +34 -23
  60. package/components/DataList/data-list.scss +8 -2
  61. package/components/DescriptionList/description-list-order.scss +5 -1
  62. package/components/DescriptionList/description-list.css +7 -5
  63. package/components/DescriptionList/description-list.scss +5 -1
  64. package/components/Divider/divider.css +7 -5
  65. package/components/Drawer/drawer.css +115 -56
  66. package/components/Drawer/drawer.scss +82 -9
  67. package/components/DualListSelector/dual-list-selector.css +18 -12
  68. package/components/DualListSelector/dual-list-selector.scss +1 -1
  69. package/components/ExpandableSection/expandable-section.css +21 -16
  70. package/components/ExpandableSection/expandable-section.scss +6 -3
  71. package/components/Form/form.css +2 -2
  72. package/components/Form/form.scss +2 -2
  73. package/components/FormControl/form-control.css +3 -3
  74. package/components/FormControl/form-control.scss +3 -3
  75. package/components/Hero/hero.css +74 -0
  76. package/components/Hero/hero.scss +86 -0
  77. package/components/JumpLinks/jump-links.css +16 -5
  78. package/components/JumpLinks/jump-links.scss +17 -3
  79. package/components/Label/label-group.css +2 -2
  80. package/components/Label/label-group.scss +2 -2
  81. package/components/Label/label.css +4 -3
  82. package/components/Login/login.css +58 -40
  83. package/components/Login/login.scss +7 -3
  84. package/components/Masthead/masthead.css +112 -16
  85. package/components/Masthead/masthead.scss +112 -1
  86. package/components/Menu/menu.css +23 -14
  87. package/components/MenuToggle/menu-toggle.css +26 -3
  88. package/components/MenuToggle/menu-toggle.scss +30 -3
  89. package/components/ModalBox/modal-box.css +9 -7
  90. package/components/ModalBox/modal-box.scss +2 -2
  91. package/components/Nav/nav.css +82 -11
  92. package/components/Nav/nav.scss +85 -5
  93. package/components/NotificationDrawer/notification-drawer.css +19 -9
  94. package/components/NotificationDrawer/notification-drawer.scss +14 -5
  95. package/components/Page/page.css +214 -29
  96. package/components/Page/page.scss +228 -13
  97. package/components/Pagination/pagination.scss +5 -1
  98. package/components/Panel/panel.css +14 -0
  99. package/components/Panel/panel.scss +18 -0
  100. package/components/Progress/progress.css +3 -1
  101. package/components/Progress/progress.scss +3 -1
  102. package/components/ProgressStepper/progress-stepper.scss +5 -1
  103. package/components/Sidebar/sidebar.css +1 -1
  104. package/components/Sidebar/sidebar.scss +7 -3
  105. package/components/Skeleton/skeleton.css +16 -15
  106. package/components/Slider/slider.css +32 -18
  107. package/components/Switch/switch.css +4 -2
  108. package/components/Switch/switch.scss +1 -1
  109. package/components/Table/table-grid.css +28 -36
  110. package/components/Table/table-grid.scss +4 -4
  111. package/components/Table/table-tree-view.css +4 -2
  112. package/components/Table/table.css +45 -36
  113. package/components/Table/table.scss +15 -11
  114. package/components/Tabs/tabs.css +51 -33
  115. package/components/Tabs/tabs.scss +54 -26
  116. package/components/TextInputGroup/text-input-group.css +2 -2
  117. package/components/TextInputGroup/text-input-group.scss +2 -2
  118. package/components/ToggleGroup/toggle-group.css +34 -17
  119. package/components/ToggleGroup/toggle-group.scss +36 -20
  120. package/components/Toolbar/toolbar.css +47 -15
  121. package/components/Toolbar/toolbar.scss +34 -6
  122. package/components/TreeView/tree-view.css +45 -14
  123. package/components/TreeView/tree-view.scss +32 -1
  124. package/components/Wizard/wizard.css +41 -19
  125. package/components/Wizard/wizard.scss +26 -6
  126. package/components/_index.css +1936 -700
  127. package/components/_index.scss +3 -1
  128. package/docs/components/AboutModalBox/examples/AboutModalBox.md +13 -1
  129. package/docs/components/Accordion/examples/Accordion.md +392 -30
  130. package/docs/components/ActionList/examples/ActionList.md +143 -11
  131. package/docs/components/Alert/examples/Alert.md +678 -54
  132. package/docs/components/Avatar/examples/Avatar.md +4 -4
  133. package/docs/components/BackToTop/examples/BackToTop.md +13 -1
  134. package/docs/components/Banner/examples/Banner.md +65 -5
  135. package/docs/components/Brand/examples/Brand.md +2 -2
  136. package/docs/components/Breadcrumb/examples/Breadcrumb.md +299 -24
  137. package/docs/components/Button/examples/Button.md +2362 -163
  138. package/docs/components/CalendarMonth/examples/CalendarMonth.md +104 -8
  139. package/docs/components/Card/examples/Card.md +207 -4
  140. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +286 -22
  141. package/docs/components/CodeBlock/examples/CodeBlock.md +104 -8
  142. package/docs/components/CodeEditor/examples/CodeEditor.md +195 -15
  143. package/docs/components/Compass/examples/Compass.css +17 -0
  144. package/docs/components/Compass/examples/Compass.md +119 -0
  145. package/docs/components/DataList/examples/DataList.md +406 -205
  146. package/docs/components/DatePicker/examples/DatePicker.md +78 -6
  147. package/docs/components/DescriptionList/examples/DescriptionList.md +327 -27
  148. package/docs/components/Divider/examples/Divider.md +2 -2
  149. package/docs/components/DragDrop/examples/DragDrop.css +1 -1
  150. package/docs/components/Drawer/examples/Drawer.md +355 -35
  151. package/docs/components/DualListSelector/examples/DualListSelector.md +1013 -143
  152. package/docs/components/ExpandableSection/examples/ExpandableSection.md +91 -7
  153. package/docs/components/Form/examples/Form.md +78 -6
  154. package/docs/components/Hero/examples/Hero.md +25 -0
  155. package/docs/components/Icon/examples/Icon.md +92 -8
  156. package/docs/components/InlineEdit/examples/InlineEdit.md +312 -24
  157. package/docs/components/InputGroup/examples/InputGroup.md +27 -3
  158. package/docs/components/JumpLinks/examples/JumpLinks.md +54 -6
  159. package/docs/components/Label/examples/Label.md +2834 -218
  160. package/docs/components/Login/examples/Login.md +26 -2
  161. package/docs/components/Masthead/examples/masthead.md +80 -1
  162. package/docs/components/Menu/examples/Menu.md +1458 -116
  163. package/docs/components/MenuToggle/examples/MenuToggle.md +14 -5
  164. package/docs/components/ModalBox/examples/ModalBox.md +289 -25
  165. package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +156 -12
  166. package/docs/components/Nav/examples/Navigation.md +798 -58
  167. package/docs/components/NotificationDrawer/examples/NotificationDrawer.md +598 -46
  168. package/docs/components/OverflowMenu/examples/overflow-menu.md +78 -6
  169. package/docs/components/Page/examples/Page.md +72 -11
  170. package/docs/components/Pagination/examples/Pagination.md +627 -64
  171. package/docs/components/Panel/examples/Panel.md +12 -0
  172. package/docs/components/Popover/examples/Popover.md +286 -22
  173. package/docs/components/Progress/examples/Progress.md +91 -7
  174. package/docs/components/ProgressStepper/examples/ProgressStepper.md +275 -23
  175. package/docs/components/Sidebar/examples/Sidebar.md +1 -1
  176. package/docs/components/Slider/examples/Slider.md +52 -4
  177. package/docs/components/Table/examples/Table.md +876 -70
  178. package/docs/components/Tabs/examples/Tabs.md +5908 -457
  179. package/docs/components/TextInputGroup/examples/TextInputGroup.md +600 -48
  180. package/docs/components/ToggleGroup/examples/toggle-group.md +195 -15
  181. package/docs/components/Toolbar/examples/Toolbar.md +490 -44
  182. package/docs/components/TreeView/examples/TreeView.md +1390 -130
  183. package/docs/components/Wizard/examples/Wizard.md +815 -72
  184. package/docs/demos/AboutModal/examples/AboutModal.md +98 -47
  185. package/docs/demos/Alert/examples/Alert.md +359 -146
  186. package/docs/demos/BackToTop/examples/BackToTop.md +98 -47
  187. package/docs/demos/Banner/examples/Banner.md +170 -92
  188. package/docs/demos/Button/examples/Button.md +13 -1
  189. package/docs/demos/Card/examples/Card.md +963 -128
  190. package/docs/demos/CardView/examples/CardView.md +435 -252
  191. package/docs/demos/Compass/examples/Compass.md +5930 -0
  192. package/docs/demos/Dashboard/examples/Dashboard.md +648 -164
  193. package/docs/demos/DataList/examples/DataList.md +730 -225
  194. package/docs/demos/DescriptionList/examples/DescriptionList.md +279 -141
  195. package/docs/demos/Drawer/examples/Drawer.md +421 -235
  196. package/docs/demos/Form/examples/BasicForms.md +273 -21
  197. package/docs/demos/JumpLinks/examples/JumpLinks.md +518 -287
  198. package/docs/demos/Masthead/examples/Masthead.md +787 -451
  199. package/docs/demos/Modal/examples/Modal.md +588 -285
  200. package/docs/demos/Nav/examples/Nav.md +2913 -493
  201. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +1273 -310
  202. package/docs/demos/Page/examples/Page.md +1236 -689
  203. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +13 -1
  204. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +52 -4
  205. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +978 -385
  206. package/docs/demos/Skeleton/examples/Skeleton.md +85 -46
  207. package/docs/demos/Table/examples/Table.md +4531 -838
  208. package/docs/demos/Tabs/examples/Tabs.md +653 -293
  209. package/docs/demos/Toolbar/examples/Toolbar.md +584 -136
  210. package/docs/demos/Wizard/examples/Wizard.md +1165 -472
  211. package/docs/layouts/Bullseye/examples/Bullseye.css +2 -2
  212. package/docs/layouts/Bullseye/examples/Bullseye.md +2 -1
  213. package/docs/layouts/Flex/examples/Flex.css +3 -3
  214. package/docs/layouts/Flex/examples/Flex.md +3 -2
  215. package/docs/layouts/Gallery/examples/Gallery.css +2 -2
  216. package/docs/layouts/Gallery/examples/Gallery.md +4 -3
  217. package/docs/layouts/Grid/examples/Grid.css +1 -1
  218. package/docs/layouts/Grid/examples/Grid.md +6 -5
  219. package/docs/layouts/Level/examples/Level.css +3 -3
  220. package/docs/layouts/Level/examples/Level.md +2 -1
  221. package/docs/layouts/Split/examples/Split.css +1 -1
  222. package/docs/layouts/Split/examples/Split.md +2 -1
  223. package/docs/layouts/Stack/examples/Stack.css +3 -3
  224. package/docs/layouts/Stack/examples/Stack.md +2 -1
  225. package/docs/utilities/Accessibility/examples/Accessibility.md +3 -2
  226. package/docs/utilities/Alignment/examples/Alignment.css +4 -4
  227. package/docs/utilities/Alignment/examples/Alignment.md +3 -2
  228. package/docs/utilities/BackgroundColor/examples/BackgroundColor.md +5 -4
  229. package/docs/utilities/BoxShadow/examples/box-shadow.css +2 -2
  230. package/docs/utilities/BoxShadow/examples/box-shadow.md +2 -1
  231. package/docs/utilities/Display/examples/Display.css +1 -1
  232. package/docs/utilities/Display/examples/Display.md +3 -2
  233. package/docs/utilities/Flex/examples/Flex.css +7 -7
  234. package/docs/utilities/Flex/examples/Flex.md +3 -2
  235. package/docs/utilities/Float/examples/Float.css +2 -2
  236. package/docs/utilities/Float/examples/Float.md +3 -2
  237. package/docs/utilities/Sizing/examples/Sizing.md +8 -7
  238. package/docs/utilities/Spacing/examples/Spacing.css +2 -2
  239. package/docs/utilities/Spacing/examples/Spacing.md +3 -2
  240. package/docs/utilities/Text/examples/Text.md +5 -4
  241. package/icons/PfIcons/add-circle-o.svg +4 -0
  242. package/icons/PfIcons/ansible-tower.svg +4 -0
  243. package/icons/PfIcons/applications.svg +4 -0
  244. package/icons/PfIcons/arrow.svg +4 -0
  245. package/icons/PfIcons/asleep.svg +4 -0
  246. package/icons/PfIcons/attention-bell.svg +4 -0
  247. package/icons/PfIcons/automation.svg +4 -0
  248. package/icons/PfIcons/bell.svg +4 -0
  249. package/icons/PfIcons/blueprint.svg +4 -0
  250. package/icons/PfIcons/build.svg +4 -0
  251. package/icons/PfIcons/builder-image.svg +4 -0
  252. package/icons/PfIcons/bundle.svg +4 -0
  253. package/icons/PfIcons/catalog.svg +4 -0
  254. package/icons/PfIcons/chat.svg +4 -0
  255. package/icons/PfIcons/close.svg +4 -0
  256. package/icons/PfIcons/cloud-security.svg +4 -0
  257. package/icons/PfIcons/cloud-tenant.svg +4 -0
  258. package/icons/PfIcons/cluster.svg +4 -0
  259. package/icons/PfIcons/connected.svg +4 -0
  260. package/icons/PfIcons/container-node.svg +4 -0
  261. package/icons/PfIcons/cpu.svg +4 -0
  262. package/icons/PfIcons/critical-risk.svg +4 -0
  263. package/icons/PfIcons/data-processor.svg +4 -0
  264. package/icons/PfIcons/data-sink.svg +4 -0
  265. package/icons/PfIcons/data-source.svg +4 -0
  266. package/icons/PfIcons/degraded.svg +4 -0
  267. package/icons/PfIcons/disconnected.svg +4 -0
  268. package/icons/PfIcons/domain.svg +4 -0
  269. package/icons/PfIcons/edit.svg +4 -0
  270. package/icons/PfIcons/enhancement.svg +4 -0
  271. package/icons/PfIcons/enterprise.svg +4 -0
  272. package/icons/PfIcons/equalizer.svg +4 -0
  273. package/icons/PfIcons/error-circle-o.svg +4 -0
  274. package/icons/PfIcons/export.svg +4 -0
  275. package/icons/PfIcons/filter.svg +4 -0
  276. package/icons/PfIcons/flavor.svg +4 -0
  277. package/icons/PfIcons/folder-close.svg +4 -0
  278. package/icons/PfIcons/folder-open.svg +4 -0
  279. package/icons/PfIcons/globe-route.svg +4 -0
  280. package/icons/PfIcons/help.svg +4 -0
  281. package/icons/PfIcons/history.svg +4 -0
  282. package/icons/PfIcons/home.svg +4 -0
  283. package/icons/PfIcons/import.svg +4 -0
  284. package/icons/PfIcons/in-progress.svg +4 -0
  285. package/icons/PfIcons/info.svg +4 -0
  286. package/icons/PfIcons/infrastructure.svg +4 -0
  287. package/icons/PfIcons/integration.svg +4 -0
  288. package/icons/PfIcons/key.svg +4 -0
  289. package/icons/PfIcons/locked.svg +4 -0
  290. package/icons/PfIcons/maintenance.svg +4 -0
  291. package/icons/PfIcons/memory.svg +4 -0
  292. package/icons/PfIcons/messages.svg +4 -0
  293. package/icons/PfIcons/middleware.svg +4 -0
  294. package/icons/PfIcons/migration.svg +4 -0
  295. package/icons/PfIcons/module.svg +4 -0
  296. package/icons/PfIcons/monitoring.svg +4 -0
  297. package/icons/PfIcons/multicluster.svg +4 -0
  298. package/icons/PfIcons/namespaces.svg +4 -0
  299. package/icons/PfIcons/network.svg +4 -0
  300. package/icons/PfIcons/new-process.svg +4 -0
  301. package/icons/PfIcons/not-started.svg +4 -0
  302. package/icons/PfIcons/off.svg +4 -0
  303. package/icons/PfIcons/ok.svg +4 -0
  304. package/icons/PfIcons/on-running.svg +4 -0
  305. package/icons/PfIcons/on.svg +4 -0
  306. package/icons/PfIcons/open-drawer-right.svg +4 -0
  307. package/icons/PfIcons/openshift.svg +4 -0
  308. package/icons/PfIcons/openstack.svg +4 -0
  309. package/icons/PfIcons/optimize.svg +4 -0
  310. package/icons/PfIcons/orders.svg +4 -0
  311. package/icons/PfIcons/os-image.svg +4 -0
  312. package/icons/PfIcons/package.svg +4 -0
  313. package/icons/PfIcons/panel-close.svg +4 -0
  314. package/icons/PfIcons/panel-open.svg +4 -0
  315. package/icons/PfIcons/paused.svg +4 -0
  316. package/icons/PfIcons/pending.svg +4 -0
  317. package/icons/PfIcons/pficon-dragdrop.svg +4 -0
  318. package/icons/PfIcons/pficon-history.svg +4 -0
  319. package/icons/PfIcons/pficon-network-range.svg +4 -0
  320. package/icons/PfIcons/pficon-satellite.svg +4 -0
  321. package/icons/PfIcons/pficon-sort-common-asc.svg +4 -0
  322. package/icons/PfIcons/pficon-sort-common-desc.svg +4 -0
  323. package/icons/PfIcons/pficon-template.svg +4 -0
  324. package/icons/PfIcons/pficon-vcenter.svg +4 -0
  325. package/icons/PfIcons/plugged.svg +4 -0
  326. package/icons/PfIcons/port.svg +4 -0
  327. package/icons/PfIcons/print.svg +4 -0
  328. package/icons/PfIcons/private.svg +4 -0
  329. package/icons/PfIcons/process-automation.svg +4 -0
  330. package/icons/PfIcons/project.svg +4 -0
  331. package/icons/PfIcons/rebalance.svg +4 -0
  332. package/icons/PfIcons/rebooting.svg +4 -0
  333. package/icons/PfIcons/regions.svg +4 -0
  334. package/icons/PfIcons/registry.svg +4 -0
  335. package/icons/PfIcons/remove2.svg +4 -0
  336. package/icons/PfIcons/replicator.svg +4 -0
  337. package/icons/PfIcons/repository.svg +4 -0
  338. package/icons/PfIcons/resource-pool.svg +4 -0
  339. package/icons/PfIcons/resources-almost-empty.svg +4 -0
  340. package/icons/PfIcons/resources-almost-full.svg +4 -0
  341. package/icons/PfIcons/resources-empty.svg +4 -0
  342. package/icons/PfIcons/resources-full.svg +4 -0
  343. package/icons/PfIcons/running.svg +4 -0
  344. package/icons/PfIcons/save.svg +4 -0
  345. package/icons/PfIcons/screen.svg +4 -0
  346. package/icons/PfIcons/security.svg +4 -0
  347. package/icons/PfIcons/server-group.svg +4 -0
  348. package/icons/PfIcons/server.svg +4 -0
  349. package/icons/PfIcons/service-catalog.svg +4 -0
  350. package/icons/PfIcons/service.svg +4 -0
  351. package/icons/PfIcons/services.svg +4 -0
  352. package/icons/PfIcons/severity-critical.svg +4 -0
  353. package/icons/PfIcons/severity-important.svg +4 -0
  354. package/icons/PfIcons/severity-minor.svg +4 -0
  355. package/icons/PfIcons/severity-moderate.svg +4 -0
  356. package/icons/PfIcons/severity-none.svg +4 -0
  357. package/icons/PfIcons/severity-undefined.svg +4 -0
  358. package/icons/PfIcons/spinner.svg +4 -0
  359. package/icons/PfIcons/spinner2.svg +4 -0
  360. package/icons/PfIcons/storage-domain.svg +4 -0
  361. package/icons/PfIcons/task.svg +4 -0
  362. package/icons/PfIcons/tenant.svg +4 -0
  363. package/icons/PfIcons/thumb-tack.svg +4 -0
  364. package/icons/PfIcons/topology.svg +4 -0
  365. package/icons/PfIcons/treeview.svg +4 -0
  366. package/icons/PfIcons/trend-down.svg +4 -0
  367. package/icons/PfIcons/trend-up.svg +4 -0
  368. package/icons/PfIcons/unknown.svg +4 -0
  369. package/icons/PfIcons/unlocked.svg +4 -0
  370. package/icons/PfIcons/unplugged.svg +4 -0
  371. package/icons/PfIcons/user.svg +4 -0
  372. package/icons/PfIcons/users.svg +4 -0
  373. package/icons/PfIcons/virtual-machine.svg +4 -0
  374. package/icons/PfIcons/volume.svg +4 -0
  375. package/icons/PfIcons/warning-triangle.svg +4 -0
  376. package/icons/PfIcons/zone.svg +4 -0
  377. package/layouts/Flex/flex.scss +83 -19
  378. package/layouts/Gallery/gallery.css +6 -2
  379. package/layouts/_index.css +6 -2
  380. package/package.json +34 -16
  381. package/patternfly-base-no-globals.css +965 -491
  382. package/patternfly-base.css +972 -491
  383. package/patternfly-charts.css +3 -3
  384. package/patternfly-no-globals.css +2801 -1070
  385. package/patternfly.css +2808 -1070
  386. package/patternfly.min.css +1 -1
  387. package/patternfly.min.css.map +1 -1
  388. package/patternfly.scss +27 -0
  389. package/sass-utilities/functions.scss +32 -25
  390. package/sass-utilities/mixins.scss +36 -20
  391. package/sass-utilities/namespaces-components.scss +6 -0
  392. package/sass-utilities/scss-variables.scss +3 -0
package/docs/demos/Modal/examples/Modal.md CHANGED
@@ -15,7 +15,8 @@ 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="modal-basic-example-masthead">
18
+
19
+ <header class="pf-v6-c-masthead" id="modal-basic-example-docked">
19
20
  <div class="pf-v6-c-masthead__main">
20
21
  <span class="pf-v6-c-masthead__toggle">
21
22
  <button
@@ -57,7 +58,7 @@ section: components
57
58
  y1="2.25860997e-13%"
58
59
  x2="32%"
59
60
  y2="100%"
60
- id="linearGradient-modal-basic-example-masthead"
61
+ id="linearGradient-modal-basic-example-docked"
61
62
  >
62
63
  <stop stop-color="#2B9AF3" offset="0%" />
63
64
  <stop
@@ -111,11 +112,11 @@ section: components
111
112
  />
112
113
  <path
113
114
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
114
- fill="url(#linearGradient-modal-basic-example-masthead)"
115
+ fill="url(#linearGradient-modal-basic-example-docked)"
115
116
  />
116
117
  <path
117
118
  d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z"
118
- fill="url(#linearGradient-modal-basic-example-masthead)"
119
+ fill="url(#linearGradient-modal-basic-example-docked)"
119
120
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
120
121
  />
121
122
  </g>
@@ -127,7 +128,7 @@ section: components
127
128
  <div class="pf-v6-c-masthead__content">
128
129
  <div
129
130
  class="pf-v6-c-toolbar pf-m-static"
130
- id="modal-basic-example-masthead-toolbar"
131
+ id="modal-basic-example-docked-toolbar"
131
132
  >
132
133
  <div class="pf-v6-c-toolbar__content">
133
134
  <div class="pf-v6-c-toolbar__content-section">
@@ -194,44 +195,46 @@ section: components
194
195
  </div>
195
196
  </header>
196
197
  <div class="pf-v6-c-page__sidebar">
197
- <div class="pf-v6-c-page__sidebar-body">
198
- <nav
199
- class="pf-v6-c-nav"
200
- id="modal-basic-example-primary-nav"
201
- aria-label="Global"
202
- >
203
- <ul class="pf-v6-c-nav__list" role="list">
204
- <li class="pf-v6-c-nav__item">
205
- <a href="#" class="pf-v6-c-nav__link">
206
- <span class="pf-v6-c-nav__link-text">System panel</span>
207
- </a>
208
- </li>
209
- <li class="pf-v6-c-nav__item">
210
- <a
211
- href="#"
212
- class="pf-v6-c-nav__link pf-m-current"
213
- aria-current="page"
214
- >
215
- <span class="pf-v6-c-nav__link-text">Policy</span>
216
- </a>
217
- </li>
218
- <li class="pf-v6-c-nav__item">
219
- <a href="#" class="pf-v6-c-nav__link">
220
- <span class="pf-v6-c-nav__link-text">Authentication</span>
221
- </a>
222
- </li>
223
- <li class="pf-v6-c-nav__item">
224
- <a href="#" class="pf-v6-c-nav__link">
225
- <span class="pf-v6-c-nav__link-text">Network services</span>
226
- </a>
227
- </li>
228
- <li class="pf-v6-c-nav__item">
229
- <a href="#" class="pf-v6-c-nav__link">
230
- <span class="pf-v6-c-nav__link-text">Server</span>
231
- </a>
232
- </li>
233
- </ul>
234
- </nav>
198
+ <div class="pf-v6-c-page__sidebar-main">
199
+ <div class="pf-v6-c-page__sidebar-body">
200
+ <nav
201
+ class="pf-v6-c-nav"
202
+ id="modal-basic-example-primary-nav"
203
+ aria-label="Global"
204
+ >
205
+ <ul class="pf-v6-c-nav__list" role="list">
206
+ <li class="pf-v6-c-nav__item">
207
+ <a href="#" class="pf-v6-c-nav__link">
208
+ <span class="pf-v6-c-nav__link-text">System panel</span>
209
+ </a>
210
+ </li>
211
+ <li class="pf-v6-c-nav__item">
212
+ <a
213
+ href="#"
214
+ class="pf-v6-c-nav__link pf-m-current"
215
+ aria-current="page"
216
+ >
217
+ <span class="pf-v6-c-nav__link-text">Policy</span>
218
+ </a>
219
+ </li>
220
+ <li class="pf-v6-c-nav__item">
221
+ <a href="#" class="pf-v6-c-nav__link">
222
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
223
+ </a>
224
+ </li>
225
+ <li class="pf-v6-c-nav__item">
226
+ <a href="#" class="pf-v6-c-nav__link">
227
+ <span class="pf-v6-c-nav__link-text">Network services</span>
228
+ </a>
229
+ </li>
230
+ <li class="pf-v6-c-nav__item">
231
+ <a href="#" class="pf-v6-c-nav__link">
232
+ <span class="pf-v6-c-nav__link-text">Server</span>
233
+ </a>
234
+ </li>
235
+ </ul>
236
+ </nav>
237
+ </div>
235
238
  </div>
236
239
  </div>
237
240
  <div class="pf-v6-c-page__main-container" tabindex="-1">
@@ -249,21 +252,57 @@ section: components
249
252
  </li>
250
253
  <li class="pf-v6-c-breadcrumb__item">
251
254
  <span class="pf-v6-c-breadcrumb__item-divider">
252
- <i class="fas fa-angle-right" aria-hidden="true"></i>
255
+ <svg
256
+ class="pf-v6-svg"
257
+ viewBox="0 0 20 20"
258
+ fill="currentColor"
259
+ aria-hidden="true"
260
+ role="img"
261
+ width="1em"
262
+ height="1em"
263
+ >
264
+ <path
265
+ 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"
266
+ />
267
+ </svg>
253
268
  </span>
254
269
 
255
270
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
256
271
  </li>
257
272
  <li class="pf-v6-c-breadcrumb__item">
258
273
  <span class="pf-v6-c-breadcrumb__item-divider">
259
- <i class="fas fa-angle-right" aria-hidden="true"></i>
274
+ <svg
275
+ class="pf-v6-svg"
276
+ viewBox="0 0 20 20"
277
+ fill="currentColor"
278
+ aria-hidden="true"
279
+ role="img"
280
+ width="1em"
281
+ height="1em"
282
+ >
283
+ <path
284
+ 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"
285
+ />
286
+ </svg>
260
287
  </span>
261
288
 
262
289
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
263
290
  </li>
264
291
  <li class="pf-v6-c-breadcrumb__item">
265
292
  <span class="pf-v6-c-breadcrumb__item-divider">
266
- <i class="fas fa-angle-right" aria-hidden="true"></i>
293
+ <svg
294
+ class="pf-v6-svg"
295
+ viewBox="0 0 20 20"
296
+ fill="currentColor"
297
+ aria-hidden="true"
298
+ role="img"
299
+ width="1em"
300
+ height="1em"
301
+ >
302
+ <path
303
+ 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"
304
+ />
305
+ </svg>
267
306
  </span>
268
307
 
269
308
  <a
@@ -337,7 +376,19 @@ section: components
337
376
  aria-label="Close"
338
377
  >
339
378
  <span class="pf-v6-c-button__icon">
340
- <i class="fas fa-times" aria-hidden="true"></i>
379
+ <svg
380
+ class="pf-v6-svg"
381
+ viewBox="0 0 20 20"
382
+ fill="currentColor"
383
+ aria-hidden="true"
384
+ role="img"
385
+ width="1em"
386
+ height="1em"
387
+ >
388
+ <path
389
+ 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"
390
+ />
391
+ </svg>
341
392
  </span>
342
393
  </button>
343
394
  </div>
@@ -382,10 +433,8 @@ section: components
382
433
  <span class="pf-v6-c-button__text">Skip to content</span>
383
434
  </a>
384
435
  </div>
385
- <header
386
- class="pf-v6-c-masthead"
387
- id="modal-scrollable-content-example-masthead"
388
- >
436
+
437
+ <header class="pf-v6-c-masthead" id="modal-scrollable-content-example-docked">
389
438
  <div class="pf-v6-c-masthead__main">
390
439
  <span class="pf-v6-c-masthead__toggle">
391
440
  <button
@@ -427,7 +476,7 @@ section: components
427
476
  y1="2.25860997e-13%"
428
477
  x2="32%"
429
478
  y2="100%"
430
- id="linearGradient-modal-scrollable-content-example-masthead"
479
+ id="linearGradient-modal-scrollable-content-example-docked"
431
480
  >
432
481
  <stop stop-color="#2B9AF3" offset="0%" />
433
482
  <stop
@@ -481,11 +530,11 @@ section: components
481
530
  />
482
531
  <path
483
532
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
484
- fill="url(#linearGradient-modal-scrollable-content-example-masthead)"
533
+ fill="url(#linearGradient-modal-scrollable-content-example-docked)"
485
534
  />
486
535
  <path
487
536
  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"
488
- fill="url(#linearGradient-modal-scrollable-content-example-masthead)"
537
+ fill="url(#linearGradient-modal-scrollable-content-example-docked)"
489
538
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
490
539
  />
491
540
  </g>
@@ -497,7 +546,7 @@ section: components
497
546
  <div class="pf-v6-c-masthead__content">
498
547
  <div
499
548
  class="pf-v6-c-toolbar pf-m-static"
500
- id="modal-scrollable-content-example-masthead-toolbar"
549
+ id="modal-scrollable-content-example-docked-toolbar"
501
550
  >
502
551
  <div class="pf-v6-c-toolbar__content">
503
552
  <div class="pf-v6-c-toolbar__content-section">
@@ -564,44 +613,46 @@ section: components
564
613
  </div>
565
614
  </header>
566
615
  <div class="pf-v6-c-page__sidebar">
567
- <div class="pf-v6-c-page__sidebar-body">
568
- <nav
569
- class="pf-v6-c-nav"
570
- id="modal-scrollable-content-example-primary-nav"
571
- aria-label="Global"
572
- >
573
- <ul class="pf-v6-c-nav__list" role="list">
574
- <li class="pf-v6-c-nav__item">
575
- <a href="#" class="pf-v6-c-nav__link">
576
- <span class="pf-v6-c-nav__link-text">System panel</span>
577
- </a>
578
- </li>
579
- <li class="pf-v6-c-nav__item">
580
- <a
581
- href="#"
582
- class="pf-v6-c-nav__link pf-m-current"
583
- aria-current="page"
584
- >
585
- <span class="pf-v6-c-nav__link-text">Policy</span>
586
- </a>
587
- </li>
588
- <li class="pf-v6-c-nav__item">
589
- <a href="#" class="pf-v6-c-nav__link">
590
- <span class="pf-v6-c-nav__link-text">Authentication</span>
591
- </a>
592
- </li>
593
- <li class="pf-v6-c-nav__item">
594
- <a href="#" class="pf-v6-c-nav__link">
595
- <span class="pf-v6-c-nav__link-text">Network services</span>
596
- </a>
597
- </li>
598
- <li class="pf-v6-c-nav__item">
599
- <a href="#" class="pf-v6-c-nav__link">
600
- <span class="pf-v6-c-nav__link-text">Server</span>
601
- </a>
602
- </li>
603
- </ul>
604
- </nav>
616
+ <div class="pf-v6-c-page__sidebar-main">
617
+ <div class="pf-v6-c-page__sidebar-body">
618
+ <nav
619
+ class="pf-v6-c-nav"
620
+ id="modal-scrollable-content-example-primary-nav"
621
+ aria-label="Global"
622
+ >
623
+ <ul class="pf-v6-c-nav__list" role="list">
624
+ <li class="pf-v6-c-nav__item">
625
+ <a href="#" class="pf-v6-c-nav__link">
626
+ <span class="pf-v6-c-nav__link-text">System panel</span>
627
+ </a>
628
+ </li>
629
+ <li class="pf-v6-c-nav__item">
630
+ <a
631
+ href="#"
632
+ class="pf-v6-c-nav__link pf-m-current"
633
+ aria-current="page"
634
+ >
635
+ <span class="pf-v6-c-nav__link-text">Policy</span>
636
+ </a>
637
+ </li>
638
+ <li class="pf-v6-c-nav__item">
639
+ <a href="#" class="pf-v6-c-nav__link">
640
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
641
+ </a>
642
+ </li>
643
+ <li class="pf-v6-c-nav__item">
644
+ <a href="#" class="pf-v6-c-nav__link">
645
+ <span class="pf-v6-c-nav__link-text">Network services</span>
646
+ </a>
647
+ </li>
648
+ <li class="pf-v6-c-nav__item">
649
+ <a href="#" class="pf-v6-c-nav__link">
650
+ <span class="pf-v6-c-nav__link-text">Server</span>
651
+ </a>
652
+ </li>
653
+ </ul>
654
+ </nav>
655
+ </div>
605
656
  </div>
606
657
  </div>
607
658
  <div class="pf-v6-c-page__main-container" tabindex="-1">
@@ -619,21 +670,57 @@ section: components
619
670
  </li>
620
671
  <li class="pf-v6-c-breadcrumb__item">
621
672
  <span class="pf-v6-c-breadcrumb__item-divider">
622
- <i class="fas fa-angle-right" aria-hidden="true"></i>
673
+ <svg
674
+ class="pf-v6-svg"
675
+ viewBox="0 0 20 20"
676
+ fill="currentColor"
677
+ aria-hidden="true"
678
+ role="img"
679
+ width="1em"
680
+ height="1em"
681
+ >
682
+ <path
683
+ 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"
684
+ />
685
+ </svg>
623
686
  </span>
624
687
 
625
688
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
626
689
  </li>
627
690
  <li class="pf-v6-c-breadcrumb__item">
628
691
  <span class="pf-v6-c-breadcrumb__item-divider">
629
- <i class="fas fa-angle-right" aria-hidden="true"></i>
692
+ <svg
693
+ class="pf-v6-svg"
694
+ viewBox="0 0 20 20"
695
+ fill="currentColor"
696
+ aria-hidden="true"
697
+ role="img"
698
+ width="1em"
699
+ height="1em"
700
+ >
701
+ <path
702
+ 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"
703
+ />
704
+ </svg>
630
705
  </span>
631
706
 
632
707
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
633
708
  </li>
634
709
  <li class="pf-v6-c-breadcrumb__item">
635
710
  <span class="pf-v6-c-breadcrumb__item-divider">
636
- <i class="fas fa-angle-right" aria-hidden="true"></i>
711
+ <svg
712
+ class="pf-v6-svg"
713
+ viewBox="0 0 20 20"
714
+ fill="currentColor"
715
+ aria-hidden="true"
716
+ role="img"
717
+ width="1em"
718
+ height="1em"
719
+ >
720
+ <path
721
+ 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"
722
+ />
723
+ </svg>
637
724
  </span>
638
725
 
639
726
  <a
@@ -707,7 +794,19 @@ section: components
707
794
  aria-label="Close"
708
795
  >
709
796
  <span class="pf-v6-c-button__icon">
710
- <i class="fas fa-times" aria-hidden="true"></i>
797
+ <svg
798
+ class="pf-v6-svg"
799
+ viewBox="0 0 20 20"
800
+ fill="currentColor"
801
+ aria-hidden="true"
802
+ role="img"
803
+ width="1em"
804
+ height="1em"
805
+ >
806
+ <path
807
+ 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"
808
+ />
809
+ </svg>
711
810
  </span>
712
811
  </button>
713
812
  </div>
@@ -761,7 +860,8 @@ section: components
761
860
  <span class="pf-v6-c-button__text">Skip to content</span>
762
861
  </a>
763
862
  </div>
764
- <header class="pf-v6-c-masthead" id="modal-medium-example-masthead">
863
+
864
+ <header class="pf-v6-c-masthead" id="modal-medium-example-docked">
765
865
  <div class="pf-v6-c-masthead__main">
766
866
  <span class="pf-v6-c-masthead__toggle">
767
867
  <button
@@ -803,7 +903,7 @@ section: components
803
903
  y1="2.25860997e-13%"
804
904
  x2="32%"
805
905
  y2="100%"
806
- id="linearGradient-modal-medium-example-masthead"
906
+ id="linearGradient-modal-medium-example-docked"
807
907
  >
808
908
  <stop stop-color="#2B9AF3" offset="0%" />
809
909
  <stop
@@ -857,11 +957,11 @@ section: components
857
957
  />
858
958
  <path
859
959
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
860
- fill="url(#linearGradient-modal-medium-example-masthead)"
960
+ fill="url(#linearGradient-modal-medium-example-docked)"
861
961
  />
862
962
  <path
863
963
  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"
864
- fill="url(#linearGradient-modal-medium-example-masthead)"
964
+ fill="url(#linearGradient-modal-medium-example-docked)"
865
965
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
866
966
  />
867
967
  </g>
@@ -873,7 +973,7 @@ section: components
873
973
  <div class="pf-v6-c-masthead__content">
874
974
  <div
875
975
  class="pf-v6-c-toolbar pf-m-static"
876
- id="modal-medium-example-masthead-toolbar"
976
+ id="modal-medium-example-docked-toolbar"
877
977
  >
878
978
  <div class="pf-v6-c-toolbar__content">
879
979
  <div class="pf-v6-c-toolbar__content-section">
@@ -940,44 +1040,46 @@ section: components
940
1040
  </div>
941
1041
  </header>
942
1042
  <div class="pf-v6-c-page__sidebar">
943
- <div class="pf-v6-c-page__sidebar-body">
944
- <nav
945
- class="pf-v6-c-nav"
946
- id="modal-medium-example-primary-nav"
947
- aria-label="Global"
948
- >
949
- <ul class="pf-v6-c-nav__list" role="list">
950
- <li class="pf-v6-c-nav__item">
951
- <a href="#" class="pf-v6-c-nav__link">
952
- <span class="pf-v6-c-nav__link-text">System panel</span>
953
- </a>
954
- </li>
955
- <li class="pf-v6-c-nav__item">
956
- <a
957
- href="#"
958
- class="pf-v6-c-nav__link pf-m-current"
959
- aria-current="page"
960
- >
961
- <span class="pf-v6-c-nav__link-text">Policy</span>
962
- </a>
963
- </li>
964
- <li class="pf-v6-c-nav__item">
965
- <a href="#" class="pf-v6-c-nav__link">
966
- <span class="pf-v6-c-nav__link-text">Authentication</span>
967
- </a>
968
- </li>
969
- <li class="pf-v6-c-nav__item">
970
- <a href="#" class="pf-v6-c-nav__link">
971
- <span class="pf-v6-c-nav__link-text">Network services</span>
972
- </a>
973
- </li>
974
- <li class="pf-v6-c-nav__item">
975
- <a href="#" class="pf-v6-c-nav__link">
976
- <span class="pf-v6-c-nav__link-text">Server</span>
977
- </a>
978
- </li>
979
- </ul>
980
- </nav>
1043
+ <div class="pf-v6-c-page__sidebar-main">
1044
+ <div class="pf-v6-c-page__sidebar-body">
1045
+ <nav
1046
+ class="pf-v6-c-nav"
1047
+ id="modal-medium-example-primary-nav"
1048
+ aria-label="Global"
1049
+ >
1050
+ <ul class="pf-v6-c-nav__list" role="list">
1051
+ <li class="pf-v6-c-nav__item">
1052
+ <a href="#" class="pf-v6-c-nav__link">
1053
+ <span class="pf-v6-c-nav__link-text">System panel</span>
1054
+ </a>
1055
+ </li>
1056
+ <li class="pf-v6-c-nav__item">
1057
+ <a
1058
+ href="#"
1059
+ class="pf-v6-c-nav__link pf-m-current"
1060
+ aria-current="page"
1061
+ >
1062
+ <span class="pf-v6-c-nav__link-text">Policy</span>
1063
+ </a>
1064
+ </li>
1065
+ <li class="pf-v6-c-nav__item">
1066
+ <a href="#" class="pf-v6-c-nav__link">
1067
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
1068
+ </a>
1069
+ </li>
1070
+ <li class="pf-v6-c-nav__item">
1071
+ <a href="#" class="pf-v6-c-nav__link">
1072
+ <span class="pf-v6-c-nav__link-text">Network services</span>
1073
+ </a>
1074
+ </li>
1075
+ <li class="pf-v6-c-nav__item">
1076
+ <a href="#" class="pf-v6-c-nav__link">
1077
+ <span class="pf-v6-c-nav__link-text">Server</span>
1078
+ </a>
1079
+ </li>
1080
+ </ul>
1081
+ </nav>
1082
+ </div>
981
1083
  </div>
982
1084
  </div>
983
1085
  <div class="pf-v6-c-page__main-container" tabindex="-1">
@@ -995,21 +1097,57 @@ section: components
995
1097
  </li>
996
1098
  <li class="pf-v6-c-breadcrumb__item">
997
1099
  <span class="pf-v6-c-breadcrumb__item-divider">
998
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1100
+ <svg
1101
+ class="pf-v6-svg"
1102
+ viewBox="0 0 20 20"
1103
+ fill="currentColor"
1104
+ aria-hidden="true"
1105
+ role="img"
1106
+ width="1em"
1107
+ height="1em"
1108
+ >
1109
+ <path
1110
+ 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"
1111
+ />
1112
+ </svg>
999
1113
  </span>
1000
1114
 
1001
1115
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1002
1116
  </li>
1003
1117
  <li class="pf-v6-c-breadcrumb__item">
1004
1118
  <span class="pf-v6-c-breadcrumb__item-divider">
1005
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1119
+ <svg
1120
+ class="pf-v6-svg"
1121
+ viewBox="0 0 20 20"
1122
+ fill="currentColor"
1123
+ aria-hidden="true"
1124
+ role="img"
1125
+ width="1em"
1126
+ height="1em"
1127
+ >
1128
+ <path
1129
+ 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"
1130
+ />
1131
+ </svg>
1006
1132
  </span>
1007
1133
 
1008
1134
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1009
1135
  </li>
1010
1136
  <li class="pf-v6-c-breadcrumb__item">
1011
1137
  <span class="pf-v6-c-breadcrumb__item-divider">
1012
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1138
+ <svg
1139
+ class="pf-v6-svg"
1140
+ viewBox="0 0 20 20"
1141
+ fill="currentColor"
1142
+ aria-hidden="true"
1143
+ role="img"
1144
+ width="1em"
1145
+ height="1em"
1146
+ >
1147
+ <path
1148
+ 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"
1149
+ />
1150
+ </svg>
1013
1151
  </span>
1014
1152
 
1015
1153
  <a
@@ -1083,7 +1221,19 @@ section: components
1083
1221
  aria-label="Close"
1084
1222
  >
1085
1223
  <span class="pf-v6-c-button__icon">
1086
- <i class="fas fa-times" aria-hidden="true"></i>
1224
+ <svg
1225
+ class="pf-v6-svg"
1226
+ viewBox="0 0 20 20"
1227
+ fill="currentColor"
1228
+ aria-hidden="true"
1229
+ role="img"
1230
+ width="1em"
1231
+ height="1em"
1232
+ >
1233
+ <path
1234
+ 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"
1235
+ />
1236
+ </svg>
1087
1237
  </span>
1088
1238
  </button>
1089
1239
  </div>
@@ -1127,7 +1277,8 @@ section: components
1127
1277
  <span class="pf-v6-c-button__text">Skip to content</span>
1128
1278
  </a>
1129
1279
  </div>
1130
- <header class="pf-v6-c-masthead" id="modal-large-example-masthead">
1280
+
1281
+ <header class="pf-v6-c-masthead" id="modal-large-example-docked">
1131
1282
  <div class="pf-v6-c-masthead__main">
1132
1283
  <span class="pf-v6-c-masthead__toggle">
1133
1284
  <button
@@ -1169,7 +1320,7 @@ section: components
1169
1320
  y1="2.25860997e-13%"
1170
1321
  x2="32%"
1171
1322
  y2="100%"
1172
- id="linearGradient-modal-large-example-masthead"
1323
+ id="linearGradient-modal-large-example-docked"
1173
1324
  >
1174
1325
  <stop stop-color="#2B9AF3" offset="0%" />
1175
1326
  <stop
@@ -1223,11 +1374,11 @@ section: components
1223
1374
  />
1224
1375
  <path
1225
1376
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
1226
- fill="url(#linearGradient-modal-large-example-masthead)"
1377
+ fill="url(#linearGradient-modal-large-example-docked)"
1227
1378
  />
1228
1379
  <path
1229
1380
  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"
1230
- fill="url(#linearGradient-modal-large-example-masthead)"
1381
+ fill="url(#linearGradient-modal-large-example-docked)"
1231
1382
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
1232
1383
  />
1233
1384
  </g>
@@ -1239,7 +1390,7 @@ section: components
1239
1390
  <div class="pf-v6-c-masthead__content">
1240
1391
  <div
1241
1392
  class="pf-v6-c-toolbar pf-m-static"
1242
- id="modal-large-example-masthead-toolbar"
1393
+ id="modal-large-example-docked-toolbar"
1243
1394
  >
1244
1395
  <div class="pf-v6-c-toolbar__content">
1245
1396
  <div class="pf-v6-c-toolbar__content-section">
@@ -1306,44 +1457,46 @@ section: components
1306
1457
  </div>
1307
1458
  </header>
1308
1459
  <div class="pf-v6-c-page__sidebar">
1309
- <div class="pf-v6-c-page__sidebar-body">
1310
- <nav
1311
- class="pf-v6-c-nav"
1312
- id="modal-large-example-primary-nav"
1313
- aria-label="Global"
1314
- >
1315
- <ul class="pf-v6-c-nav__list" role="list">
1316
- <li class="pf-v6-c-nav__item">
1317
- <a href="#" class="pf-v6-c-nav__link">
1318
- <span class="pf-v6-c-nav__link-text">System panel</span>
1319
- </a>
1320
- </li>
1321
- <li class="pf-v6-c-nav__item">
1322
- <a
1323
- href="#"
1324
- class="pf-v6-c-nav__link pf-m-current"
1325
- aria-current="page"
1326
- >
1327
- <span class="pf-v6-c-nav__link-text">Policy</span>
1328
- </a>
1329
- </li>
1330
- <li class="pf-v6-c-nav__item">
1331
- <a href="#" class="pf-v6-c-nav__link">
1332
- <span class="pf-v6-c-nav__link-text">Authentication</span>
1333
- </a>
1334
- </li>
1335
- <li class="pf-v6-c-nav__item">
1336
- <a href="#" class="pf-v6-c-nav__link">
1337
- <span class="pf-v6-c-nav__link-text">Network services</span>
1338
- </a>
1339
- </li>
1340
- <li class="pf-v6-c-nav__item">
1341
- <a href="#" class="pf-v6-c-nav__link">
1342
- <span class="pf-v6-c-nav__link-text">Server</span>
1343
- </a>
1344
- </li>
1345
- </ul>
1346
- </nav>
1460
+ <div class="pf-v6-c-page__sidebar-main">
1461
+ <div class="pf-v6-c-page__sidebar-body">
1462
+ <nav
1463
+ class="pf-v6-c-nav"
1464
+ id="modal-large-example-primary-nav"
1465
+ aria-label="Global"
1466
+ >
1467
+ <ul class="pf-v6-c-nav__list" role="list">
1468
+ <li class="pf-v6-c-nav__item">
1469
+ <a href="#" class="pf-v6-c-nav__link">
1470
+ <span class="pf-v6-c-nav__link-text">System panel</span>
1471
+ </a>
1472
+ </li>
1473
+ <li class="pf-v6-c-nav__item">
1474
+ <a
1475
+ href="#"
1476
+ class="pf-v6-c-nav__link pf-m-current"
1477
+ aria-current="page"
1478
+ >
1479
+ <span class="pf-v6-c-nav__link-text">Policy</span>
1480
+ </a>
1481
+ </li>
1482
+ <li class="pf-v6-c-nav__item">
1483
+ <a href="#" class="pf-v6-c-nav__link">
1484
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
1485
+ </a>
1486
+ </li>
1487
+ <li class="pf-v6-c-nav__item">
1488
+ <a href="#" class="pf-v6-c-nav__link">
1489
+ <span class="pf-v6-c-nav__link-text">Network services</span>
1490
+ </a>
1491
+ </li>
1492
+ <li class="pf-v6-c-nav__item">
1493
+ <a href="#" class="pf-v6-c-nav__link">
1494
+ <span class="pf-v6-c-nav__link-text">Server</span>
1495
+ </a>
1496
+ </li>
1497
+ </ul>
1498
+ </nav>
1499
+ </div>
1347
1500
  </div>
1348
1501
  </div>
1349
1502
  <div class="pf-v6-c-page__main-container" tabindex="-1">
@@ -1361,21 +1514,57 @@ section: components
1361
1514
  </li>
1362
1515
  <li class="pf-v6-c-breadcrumb__item">
1363
1516
  <span class="pf-v6-c-breadcrumb__item-divider">
1364
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1517
+ <svg
1518
+ class="pf-v6-svg"
1519
+ viewBox="0 0 20 20"
1520
+ fill="currentColor"
1521
+ aria-hidden="true"
1522
+ role="img"
1523
+ width="1em"
1524
+ height="1em"
1525
+ >
1526
+ <path
1527
+ 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"
1528
+ />
1529
+ </svg>
1365
1530
  </span>
1366
1531
 
1367
1532
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1368
1533
  </li>
1369
1534
  <li class="pf-v6-c-breadcrumb__item">
1370
1535
  <span class="pf-v6-c-breadcrumb__item-divider">
1371
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1536
+ <svg
1537
+ class="pf-v6-svg"
1538
+ viewBox="0 0 20 20"
1539
+ fill="currentColor"
1540
+ aria-hidden="true"
1541
+ role="img"
1542
+ width="1em"
1543
+ height="1em"
1544
+ >
1545
+ <path
1546
+ 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"
1547
+ />
1548
+ </svg>
1372
1549
  </span>
1373
1550
 
1374
1551
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1375
1552
  </li>
1376
1553
  <li class="pf-v6-c-breadcrumb__item">
1377
1554
  <span class="pf-v6-c-breadcrumb__item-divider">
1378
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1555
+ <svg
1556
+ class="pf-v6-svg"
1557
+ viewBox="0 0 20 20"
1558
+ fill="currentColor"
1559
+ aria-hidden="true"
1560
+ role="img"
1561
+ width="1em"
1562
+ height="1em"
1563
+ >
1564
+ <path
1565
+ 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"
1566
+ />
1567
+ </svg>
1379
1568
  </span>
1380
1569
 
1381
1570
  <a
@@ -1449,7 +1638,19 @@ section: components
1449
1638
  aria-label="Close"
1450
1639
  >
1451
1640
  <span class="pf-v6-c-button__icon">
1452
- <i class="fas fa-times" aria-hidden="true"></i>
1641
+ <svg
1642
+ class="pf-v6-svg"
1643
+ viewBox="0 0 20 20"
1644
+ fill="currentColor"
1645
+ aria-hidden="true"
1646
+ role="img"
1647
+ width="1em"
1648
+ height="1em"
1649
+ >
1650
+ <path
1651
+ 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"
1652
+ />
1653
+ </svg>
1453
1654
  </span>
1454
1655
  </button>
1455
1656
  </div>
@@ -1493,7 +1694,8 @@ section: components
1493
1694
  <span class="pf-v6-c-button__text">Skip to content</span>
1494
1695
  </a>
1495
1696
  </div>
1496
- <header class="pf-v6-c-masthead" id="modal-large-example-masthead">
1697
+
1698
+ <header class="pf-v6-c-masthead" id="modal-large-example-docked">
1497
1699
  <div class="pf-v6-c-masthead__main">
1498
1700
  <span class="pf-v6-c-masthead__toggle">
1499
1701
  <button
@@ -1535,7 +1737,7 @@ section: components
1535
1737
  y1="2.25860997e-13%"
1536
1738
  x2="32%"
1537
1739
  y2="100%"
1538
- id="linearGradient-modal-large-example-masthead"
1740
+ id="linearGradient-modal-large-example-docked"
1539
1741
  >
1540
1742
  <stop stop-color="#2B9AF3" offset="0%" />
1541
1743
  <stop
@@ -1589,11 +1791,11 @@ section: components
1589
1791
  />
1590
1792
  <path
1591
1793
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
1592
- fill="url(#linearGradient-modal-large-example-masthead)"
1794
+ fill="url(#linearGradient-modal-large-example-docked)"
1593
1795
  />
1594
1796
  <path
1595
1797
  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"
1596
- fill="url(#linearGradient-modal-large-example-masthead)"
1798
+ fill="url(#linearGradient-modal-large-example-docked)"
1597
1799
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
1598
1800
  />
1599
1801
  </g>
@@ -1605,7 +1807,7 @@ section: components
1605
1807
  <div class="pf-v6-c-masthead__content">
1606
1808
  <div
1607
1809
  class="pf-v6-c-toolbar pf-m-static"
1608
- id="modal-large-example-masthead-toolbar"
1810
+ id="modal-large-example-docked-toolbar"
1609
1811
  >
1610
1812
  <div class="pf-v6-c-toolbar__content">
1611
1813
  <div class="pf-v6-c-toolbar__content-section">
@@ -1672,44 +1874,46 @@ section: components
1672
1874
  </div>
1673
1875
  </header>
1674
1876
  <div class="pf-v6-c-page__sidebar">
1675
- <div class="pf-v6-c-page__sidebar-body">
1676
- <nav
1677
- class="pf-v6-c-nav"
1678
- id="modal-large-example-primary-nav"
1679
- aria-label="Global"
1680
- >
1681
- <ul class="pf-v6-c-nav__list" role="list">
1682
- <li class="pf-v6-c-nav__item">
1683
- <a href="#" class="pf-v6-c-nav__link">
1684
- <span class="pf-v6-c-nav__link-text">System panel</span>
1685
- </a>
1686
- </li>
1687
- <li class="pf-v6-c-nav__item">
1688
- <a
1689
- href="#"
1690
- class="pf-v6-c-nav__link pf-m-current"
1691
- aria-current="page"
1692
- >
1693
- <span class="pf-v6-c-nav__link-text">Policy</span>
1694
- </a>
1695
- </li>
1696
- <li class="pf-v6-c-nav__item">
1697
- <a href="#" class="pf-v6-c-nav__link">
1698
- <span class="pf-v6-c-nav__link-text">Authentication</span>
1699
- </a>
1700
- </li>
1701
- <li class="pf-v6-c-nav__item">
1702
- <a href="#" class="pf-v6-c-nav__link">
1703
- <span class="pf-v6-c-nav__link-text">Network services</span>
1704
- </a>
1705
- </li>
1706
- <li class="pf-v6-c-nav__item">
1707
- <a href="#" class="pf-v6-c-nav__link">
1708
- <span class="pf-v6-c-nav__link-text">Server</span>
1709
- </a>
1710
- </li>
1711
- </ul>
1712
- </nav>
1877
+ <div class="pf-v6-c-page__sidebar-main">
1878
+ <div class="pf-v6-c-page__sidebar-body">
1879
+ <nav
1880
+ class="pf-v6-c-nav"
1881
+ id="modal-large-example-primary-nav"
1882
+ aria-label="Global"
1883
+ >
1884
+ <ul class="pf-v6-c-nav__list" role="list">
1885
+ <li class="pf-v6-c-nav__item">
1886
+ <a href="#" class="pf-v6-c-nav__link">
1887
+ <span class="pf-v6-c-nav__link-text">System panel</span>
1888
+ </a>
1889
+ </li>
1890
+ <li class="pf-v6-c-nav__item">
1891
+ <a
1892
+ href="#"
1893
+ class="pf-v6-c-nav__link pf-m-current"
1894
+ aria-current="page"
1895
+ >
1896
+ <span class="pf-v6-c-nav__link-text">Policy</span>
1897
+ </a>
1898
+ </li>
1899
+ <li class="pf-v6-c-nav__item">
1900
+ <a href="#" class="pf-v6-c-nav__link">
1901
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
1902
+ </a>
1903
+ </li>
1904
+ <li class="pf-v6-c-nav__item">
1905
+ <a href="#" class="pf-v6-c-nav__link">
1906
+ <span class="pf-v6-c-nav__link-text">Network services</span>
1907
+ </a>
1908
+ </li>
1909
+ <li class="pf-v6-c-nav__item">
1910
+ <a href="#" class="pf-v6-c-nav__link">
1911
+ <span class="pf-v6-c-nav__link-text">Server</span>
1912
+ </a>
1913
+ </li>
1914
+ </ul>
1915
+ </nav>
1916
+ </div>
1713
1917
  </div>
1714
1918
  </div>
1715
1919
  <div class="pf-v6-c-page__main-container" tabindex="-1">
@@ -1727,21 +1931,57 @@ section: components
1727
1931
  </li>
1728
1932
  <li class="pf-v6-c-breadcrumb__item">
1729
1933
  <span class="pf-v6-c-breadcrumb__item-divider">
1730
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1934
+ <svg
1935
+ class="pf-v6-svg"
1936
+ viewBox="0 0 20 20"
1937
+ fill="currentColor"
1938
+ aria-hidden="true"
1939
+ role="img"
1940
+ width="1em"
1941
+ height="1em"
1942
+ >
1943
+ <path
1944
+ 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"
1945
+ />
1946
+ </svg>
1731
1947
  </span>
1732
1948
 
1733
1949
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1734
1950
  </li>
1735
1951
  <li class="pf-v6-c-breadcrumb__item">
1736
1952
  <span class="pf-v6-c-breadcrumb__item-divider">
1737
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1953
+ <svg
1954
+ class="pf-v6-svg"
1955
+ viewBox="0 0 20 20"
1956
+ fill="currentColor"
1957
+ aria-hidden="true"
1958
+ role="img"
1959
+ width="1em"
1960
+ height="1em"
1961
+ >
1962
+ <path
1963
+ 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"
1964
+ />
1965
+ </svg>
1738
1966
  </span>
1739
1967
 
1740
1968
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1741
1969
  </li>
1742
1970
  <li class="pf-v6-c-breadcrumb__item">
1743
1971
  <span class="pf-v6-c-breadcrumb__item-divider">
1744
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1972
+ <svg
1973
+ class="pf-v6-svg"
1974
+ viewBox="0 0 20 20"
1975
+ fill="currentColor"
1976
+ aria-hidden="true"
1977
+ role="img"
1978
+ width="1em"
1979
+ height="1em"
1980
+ >
1981
+ <path
1982
+ 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"
1983
+ />
1984
+ </svg>
1745
1985
  </span>
1746
1986
 
1747
1987
  <a
@@ -1815,7 +2055,19 @@ section: components
1815
2055
  aria-label="Close"
1816
2056
  >
1817
2057
  <span class="pf-v6-c-button__icon">
1818
- <i class="fas fa-times" aria-hidden="true"></i>
2058
+ <svg
2059
+ class="pf-v6-svg"
2060
+ viewBox="0 0 20 20"
2061
+ fill="currentColor"
2062
+ aria-hidden="true"
2063
+ role="img"
2064
+ width="1em"
2065
+ height="1em"
2066
+ >
2067
+ <path
2068
+ 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"
2069
+ />
2070
+ </svg>
1819
2071
  </span>
1820
2072
  </button>
1821
2073
  </div>
@@ -1859,7 +2111,8 @@ section: components
1859
2111
  <span class="pf-v6-c-button__text">Skip to content</span>
1860
2112
  </a>
1861
2113
  </div>
1862
- <header class="pf-v6-c-masthead" id="modal-with-form-example-masthead">
2114
+
2115
+ <header class="pf-v6-c-masthead" id="modal-with-form-example-docked">
1863
2116
  <div class="pf-v6-c-masthead__main">
1864
2117
  <span class="pf-v6-c-masthead__toggle">
1865
2118
  <button
@@ -1901,7 +2154,7 @@ section: components
1901
2154
  y1="2.25860997e-13%"
1902
2155
  x2="32%"
1903
2156
  y2="100%"
1904
- id="linearGradient-modal-with-form-example-masthead"
2157
+ id="linearGradient-modal-with-form-example-docked"
1905
2158
  >
1906
2159
  <stop stop-color="#2B9AF3" offset="0%" />
1907
2160
  <stop
@@ -1955,11 +2208,11 @@ section: components
1955
2208
  />
1956
2209
  <path
1957
2210
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
1958
- fill="url(#linearGradient-modal-with-form-example-masthead)"
2211
+ fill="url(#linearGradient-modal-with-form-example-docked)"
1959
2212
  />
1960
2213
  <path
1961
2214
  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"
1962
- fill="url(#linearGradient-modal-with-form-example-masthead)"
2215
+ fill="url(#linearGradient-modal-with-form-example-docked)"
1963
2216
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
1964
2217
  />
1965
2218
  </g>
@@ -1971,7 +2224,7 @@ section: components
1971
2224
  <div class="pf-v6-c-masthead__content">
1972
2225
  <div
1973
2226
  class="pf-v6-c-toolbar pf-m-static"
1974
- id="modal-with-form-example-masthead-toolbar"
2227
+ id="modal-with-form-example-docked-toolbar"
1975
2228
  >
1976
2229
  <div class="pf-v6-c-toolbar__content">
1977
2230
  <div class="pf-v6-c-toolbar__content-section">
@@ -2038,44 +2291,46 @@ section: components
2038
2291
  </div>
2039
2292
  </header>
2040
2293
  <div class="pf-v6-c-page__sidebar">
2041
- <div class="pf-v6-c-page__sidebar-body">
2042
- <nav
2043
- class="pf-v6-c-nav"
2044
- id="modal-with-form-example-primary-nav"
2045
- aria-label="Global"
2046
- >
2047
- <ul class="pf-v6-c-nav__list" role="list">
2048
- <li class="pf-v6-c-nav__item">
2049
- <a href="#" class="pf-v6-c-nav__link">
2050
- <span class="pf-v6-c-nav__link-text">System panel</span>
2051
- </a>
2052
- </li>
2053
- <li class="pf-v6-c-nav__item">
2054
- <a
2055
- href="#"
2056
- class="pf-v6-c-nav__link pf-m-current"
2057
- aria-current="page"
2058
- >
2059
- <span class="pf-v6-c-nav__link-text">Policy</span>
2060
- </a>
2061
- </li>
2062
- <li class="pf-v6-c-nav__item">
2063
- <a href="#" class="pf-v6-c-nav__link">
2064
- <span class="pf-v6-c-nav__link-text">Authentication</span>
2065
- </a>
2066
- </li>
2067
- <li class="pf-v6-c-nav__item">
2068
- <a href="#" class="pf-v6-c-nav__link">
2069
- <span class="pf-v6-c-nav__link-text">Network services</span>
2070
- </a>
2071
- </li>
2072
- <li class="pf-v6-c-nav__item">
2073
- <a href="#" class="pf-v6-c-nav__link">
2074
- <span class="pf-v6-c-nav__link-text">Server</span>
2075
- </a>
2076
- </li>
2077
- </ul>
2078
- </nav>
2294
+ <div class="pf-v6-c-page__sidebar-main">
2295
+ <div class="pf-v6-c-page__sidebar-body">
2296
+ <nav
2297
+ class="pf-v6-c-nav"
2298
+ id="modal-with-form-example-primary-nav"
2299
+ aria-label="Global"
2300
+ >
2301
+ <ul class="pf-v6-c-nav__list" role="list">
2302
+ <li class="pf-v6-c-nav__item">
2303
+ <a href="#" class="pf-v6-c-nav__link">
2304
+ <span class="pf-v6-c-nav__link-text">System panel</span>
2305
+ </a>
2306
+ </li>
2307
+ <li class="pf-v6-c-nav__item">
2308
+ <a
2309
+ href="#"
2310
+ class="pf-v6-c-nav__link pf-m-current"
2311
+ aria-current="page"
2312
+ >
2313
+ <span class="pf-v6-c-nav__link-text">Policy</span>
2314
+ </a>
2315
+ </li>
2316
+ <li class="pf-v6-c-nav__item">
2317
+ <a href="#" class="pf-v6-c-nav__link">
2318
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
2319
+ </a>
2320
+ </li>
2321
+ <li class="pf-v6-c-nav__item">
2322
+ <a href="#" class="pf-v6-c-nav__link">
2323
+ <span class="pf-v6-c-nav__link-text">Network services</span>
2324
+ </a>
2325
+ </li>
2326
+ <li class="pf-v6-c-nav__item">
2327
+ <a href="#" class="pf-v6-c-nav__link">
2328
+ <span class="pf-v6-c-nav__link-text">Server</span>
2329
+ </a>
2330
+ </li>
2331
+ </ul>
2332
+ </nav>
2333
+ </div>
2079
2334
  </div>
2080
2335
  </div>
2081
2336
  <div class="pf-v6-c-page__main-container" tabindex="-1">
@@ -2093,21 +2348,57 @@ section: components
2093
2348
  </li>
2094
2349
  <li class="pf-v6-c-breadcrumb__item">
2095
2350
  <span class="pf-v6-c-breadcrumb__item-divider">
2096
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2351
+ <svg
2352
+ class="pf-v6-svg"
2353
+ viewBox="0 0 20 20"
2354
+ fill="currentColor"
2355
+ aria-hidden="true"
2356
+ role="img"
2357
+ width="1em"
2358
+ height="1em"
2359
+ >
2360
+ <path
2361
+ 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"
2362
+ />
2363
+ </svg>
2097
2364
  </span>
2098
2365
 
2099
2366
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
2100
2367
  </li>
2101
2368
  <li class="pf-v6-c-breadcrumb__item">
2102
2369
  <span class="pf-v6-c-breadcrumb__item-divider">
2103
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2370
+ <svg
2371
+ class="pf-v6-svg"
2372
+ viewBox="0 0 20 20"
2373
+ fill="currentColor"
2374
+ aria-hidden="true"
2375
+ role="img"
2376
+ width="1em"
2377
+ height="1em"
2378
+ >
2379
+ <path
2380
+ 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"
2381
+ />
2382
+ </svg>
2104
2383
  </span>
2105
2384
 
2106
2385
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
2107
2386
  </li>
2108
2387
  <li class="pf-v6-c-breadcrumb__item">
2109
2388
  <span class="pf-v6-c-breadcrumb__item-divider">
2110
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2389
+ <svg
2390
+ class="pf-v6-svg"
2391
+ viewBox="0 0 20 20"
2392
+ fill="currentColor"
2393
+ aria-hidden="true"
2394
+ role="img"
2395
+ width="1em"
2396
+ height="1em"
2397
+ >
2398
+ <path
2399
+ 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"
2400
+ />
2401
+ </svg>
2111
2402
  </span>
2112
2403
 
2113
2404
  <a
@@ -2181,7 +2472,19 @@ section: components
2181
2472
  aria-label="Close"
2182
2473
  >
2183
2474
  <span class="pf-v6-c-button__icon">
2184
- <i class="fas fa-times" aria-hidden="true"></i>
2475
+ <svg
2476
+ class="pf-v6-svg"
2477
+ viewBox="0 0 20 20"
2478
+ fill="currentColor"
2479
+ aria-hidden="true"
2480
+ role="img"
2481
+ width="1em"
2482
+ height="1em"
2483
+ >
2484
+ <path
2485
+ 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"
2486
+ />
2487
+ </svg>
2185
2488
  </span>
2186
2489
  </button>
2187
2490
  </div>