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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (376) hide show
  1. package/README.md +1 -1
  2. package/assets/fontawesome/_variables.scss +2 -1
  3. package/assets/images/RHAiExperienceIcon.svg +27 -0
  4. package/assets/images/RHAutomationsLogo.svg +96 -0
  5. package/assets/images/RHServerStackIcon.svg +16 -0
  6. package/assets/images/compass--hero-bg.png +0 -0
  7. package/assets/images/compass--rh-wallpaper-dark.png +0 -0
  8. package/assets/images/compass--rh-wallpaper-light.png +0 -0
  9. package/assets/images/compass--wallpaper-dark.png +0 -0
  10. package/assets/images/compass--wallpaper-light.png +0 -0
  11. package/base/normalize.scss +7 -0
  12. package/base/patternfly-common.css +50 -0
  13. package/base/patternfly-common.scss +59 -0
  14. package/base/patternfly-svg-icons.css +11 -0
  15. package/base/patternfly-svg-icons.scss +14 -0
  16. package/base/patternfly-variables.css +345 -14
  17. package/base/patternfly-variables.scss +40 -0
  18. package/base/tokens/tokens-dark.scss +51 -3
  19. package/base/tokens/tokens-default.scss +67 -13
  20. package/base/tokens/tokens-glass-dark.scss +9 -0
  21. package/base/tokens/tokens-glass.scss +9 -0
  22. package/base/tokens/tokens-local.scss +16 -0
  23. package/base/tokens/tokens-palette.scss +3 -1
  24. package/base/tokens/tokens-redhat-dark.scss +14 -0
  25. package/base/tokens/tokens-redhat-glass-dark.scss +16 -0
  26. package/base/tokens/tokens-redhat-glass.scss +15 -0
  27. package/base/tokens/tokens-redhat-highcontrast-dark.scss +47 -0
  28. package/base/tokens/tokens-redhat-highcontrast.scss +127 -0
  29. package/base/tokens/tokens-redhat.scss +15 -0
  30. package/components/AboutModalBox/about-modal-box.css +36 -26
  31. package/components/Accordion/accordion.css +17 -14
  32. package/components/Accordion/accordion.scss +1 -2
  33. package/components/ActionList/action-list.css +2 -0
  34. package/components/ActionList/action-list.scss +2 -0
  35. package/components/Alert/alert.css +7 -5
  36. package/components/Alert/alert.scss +2 -1
  37. package/components/Avatar/avatar.css +12 -4
  38. package/components/BackgroundImage/background-image.css +6 -3
  39. package/components/Banner/banner.css +8 -6
  40. package/components/Brand/brand.css +3 -1
  41. package/components/Breadcrumb/breadcrumb.css +4 -3
  42. package/components/Button/button.css +117 -14
  43. package/components/Button/button.scss +127 -10
  44. package/components/CalendarMonth/calendar-month.css +4 -3
  45. package/components/Card/card.css +20 -7
  46. package/components/Card/card.scss +16 -2
  47. package/components/ClipboardCopy/clipboard-copy.css +7 -6
  48. package/components/ClipboardCopy/clipboard-copy.scss +3 -3
  49. package/components/CodeEditor/code-editor.css +1 -1
  50. package/components/CodeEditor/code-editor.scss +1 -1
  51. package/components/Compass/compass.css +320 -0
  52. package/components/Compass/compass.scss +350 -0
  53. package/components/DataList/data-list.css +34 -23
  54. package/components/DataList/data-list.scss +7 -2
  55. package/components/DescriptionList/description-list-order.scss +5 -1
  56. package/components/DescriptionList/description-list.css +7 -5
  57. package/components/DescriptionList/description-list.scss +5 -1
  58. package/components/Divider/divider.css +7 -5
  59. package/components/Drawer/drawer.css +110 -56
  60. package/components/Drawer/drawer.scss +69 -9
  61. package/components/DualListSelector/dual-list-selector.css +18 -12
  62. package/components/DualListSelector/dual-list-selector.scss +1 -1
  63. package/components/ExpandableSection/expandable-section.css +21 -16
  64. package/components/ExpandableSection/expandable-section.scss +6 -3
  65. package/components/Form/form.css +2 -2
  66. package/components/Form/form.scss +2 -2
  67. package/components/FormControl/form-control.css +3 -3
  68. package/components/FormControl/form-control.scss +3 -3
  69. package/components/Hero/hero.css +74 -0
  70. package/components/Hero/hero.scss +86 -0
  71. package/components/JumpLinks/jump-links.css +5 -4
  72. package/components/JumpLinks/jump-links.scss +6 -2
  73. package/components/Label/label-group.css +2 -2
  74. package/components/Label/label-group.scss +2 -2
  75. package/components/Label/label.css +4 -3
  76. package/components/Login/login.css +51 -37
  77. package/components/Masthead/masthead.css +70 -16
  78. package/components/Masthead/masthead.scss +54 -1
  79. package/components/Menu/menu.css +23 -14
  80. package/components/MenuToggle/menu-toggle.css +5 -1
  81. package/components/MenuToggle/menu-toggle.scss +6 -1
  82. package/components/ModalBox/modal-box.css +9 -7
  83. package/components/ModalBox/modal-box.scss +2 -2
  84. package/components/Nav/nav.css +74 -11
  85. package/components/Nav/nav.scss +77 -5
  86. package/components/NotificationDrawer/notification-drawer.css +19 -9
  87. package/components/NotificationDrawer/notification-drawer.scss +14 -5
  88. package/components/Page/page.css +55 -29
  89. package/components/Page/page.scss +44 -5
  90. package/components/Pagination/pagination.scss +5 -1
  91. package/components/ProgressStepper/progress-stepper.scss +5 -1
  92. package/components/Sidebar/sidebar.css +1 -1
  93. package/components/Sidebar/sidebar.scss +7 -3
  94. package/components/Skeleton/skeleton.css +16 -15
  95. package/components/Slider/slider.css +32 -18
  96. package/components/Switch/switch.css +4 -2
  97. package/components/Switch/switch.scss +1 -1
  98. package/components/Table/table-grid.css +28 -36
  99. package/components/Table/table-grid.scss +4 -4
  100. package/components/Table/table-tree-view.css +4 -2
  101. package/components/Table/table.css +33 -29
  102. package/components/Table/table.scss +2 -2
  103. package/components/Tabs/tabs.css +35 -18
  104. package/components/Tabs/tabs.scss +35 -7
  105. package/components/TextInputGroup/text-input-group.css +2 -2
  106. package/components/TextInputGroup/text-input-group.scss +2 -2
  107. package/components/ToggleGroup/toggle-group.css +34 -17
  108. package/components/ToggleGroup/toggle-group.scss +36 -20
  109. package/components/Toolbar/toolbar.css +47 -15
  110. package/components/Toolbar/toolbar.scss +34 -6
  111. package/components/TreeView/tree-view.css +45 -14
  112. package/components/TreeView/tree-view.scss +32 -1
  113. package/components/Wizard/wizard.css +21 -17
  114. package/components/Wizard/wizard.scss +4 -4
  115. package/components/_index.css +1602 -676
  116. package/components/_index.scss +3 -1
  117. package/docs/components/AboutModalBox/examples/AboutModalBox.md +13 -1
  118. package/docs/components/Accordion/examples/Accordion.md +390 -30
  119. package/docs/components/ActionList/examples/ActionList.md +143 -11
  120. package/docs/components/Alert/examples/Alert.md +678 -54
  121. package/docs/components/Avatar/examples/Avatar.md +4 -4
  122. package/docs/components/BackToTop/examples/BackToTop.md +13 -1
  123. package/docs/components/Banner/examples/Banner.md +65 -5
  124. package/docs/components/Brand/examples/Brand.md +2 -2
  125. package/docs/components/Breadcrumb/examples/Breadcrumb.md +299 -23
  126. package/docs/components/Button/examples/Button.md +2217 -241
  127. package/docs/components/CalendarMonth/examples/CalendarMonth.md +104 -8
  128. package/docs/components/Card/examples/Card.md +206 -4
  129. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +286 -22
  130. package/docs/components/CodeBlock/examples/CodeBlock.md +104 -8
  131. package/docs/components/CodeEditor/examples/CodeEditor.md +195 -15
  132. package/docs/components/Compass/examples/Compass.css +17 -0
  133. package/docs/components/Compass/examples/Compass.md +119 -0
  134. package/docs/components/DataList/examples/DataList.md +405 -205
  135. package/docs/components/DatePicker/examples/DatePicker.md +78 -6
  136. package/docs/components/DescriptionList/examples/DescriptionList.md +327 -27
  137. package/docs/components/Divider/examples/Divider.md +2 -2
  138. package/docs/components/Drawer/examples/Drawer.md +353 -35
  139. package/docs/components/DualListSelector/examples/DualListSelector.md +1013 -143
  140. package/docs/components/ExpandableSection/examples/ExpandableSection.md +91 -7
  141. package/docs/components/Form/examples/Form.md +78 -6
  142. package/docs/components/Hero/examples/Hero.md +25 -0
  143. package/docs/components/Icon/examples/Icon.md +92 -8
  144. package/docs/components/InlineEdit/examples/InlineEdit.md +312 -24
  145. package/docs/components/InputGroup/examples/InputGroup.md +27 -3
  146. package/docs/components/JumpLinks/examples/JumpLinks.md +54 -6
  147. package/docs/components/Label/examples/Label.md +2834 -218
  148. package/docs/components/Login/examples/Login.md +26 -2
  149. package/docs/components/Masthead/examples/masthead.md +80 -1
  150. package/docs/components/Menu/examples/Menu.md +1458 -114
  151. package/docs/components/MenuToggle/examples/MenuToggle.md +53 -1
  152. package/docs/components/ModalBox/examples/ModalBox.md +287 -23
  153. package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +156 -12
  154. package/docs/components/Nav/examples/Navigation.md +798 -58
  155. package/docs/components/NotificationDrawer/examples/NotificationDrawer.md +598 -46
  156. package/docs/components/OverflowMenu/examples/overflow-menu.md +78 -6
  157. package/docs/components/Page/examples/Page.md +51 -2
  158. package/docs/components/Pagination/examples/Pagination.md +627 -51
  159. package/docs/components/Popover/examples/Popover.md +286 -22
  160. package/docs/components/ProgressStepper/examples/ProgressStepper.md +275 -23
  161. package/docs/components/Sidebar/examples/Sidebar.md +1 -1
  162. package/docs/components/Slider/examples/Slider.md +52 -4
  163. package/docs/components/Table/examples/Table.md +875 -70
  164. package/docs/components/Tabs/examples/Tabs.md +4127 -320
  165. package/docs/components/TextInputGroup/examples/TextInputGroup.md +600 -48
  166. package/docs/components/ToggleGroup/examples/toggle-group.md +195 -15
  167. package/docs/components/Toolbar/examples/Toolbar.md +490 -42
  168. package/docs/components/TreeView/examples/TreeView.md +1390 -130
  169. package/docs/components/Wizard/examples/Wizard.md +492 -72
  170. package/docs/demos/AboutModal/examples/AboutModal.md +57 -9
  171. package/docs/demos/Alert/examples/Alert.md +236 -32
  172. package/docs/demos/BackToTop/examples/BackToTop.md +57 -9
  173. package/docs/demos/Banner/examples/Banner.md +88 -16
  174. package/docs/demos/Button/examples/Button.md +13 -1
  175. package/docs/demos/Card/examples/Card.md +399 -42
  176. package/docs/demos/CardView/examples/CardView.md +161 -17
  177. package/docs/demos/Compass/examples/Compass.md +6836 -0
  178. package/docs/demos/Dashboard/examples/Dashboard.md +173 -26
  179. package/docs/demos/DataList/examples/DataList.md +566 -65
  180. package/docs/demos/DescriptionList/examples/DescriptionList.md +156 -27
  181. package/docs/demos/Drawer/examples/Drawer.md +216 -45
  182. package/docs/demos/Form/examples/BasicForms.md +273 -21
  183. package/docs/demos/JumpLinks/examples/JumpLinks.md +272 -59
  184. package/docs/demos/Masthead/examples/Masthead.md +458 -89
  185. package/docs/demos/Modal/examples/Modal.md +342 -57
  186. package/docs/demos/Nav/examples/Nav.md +660 -87
  187. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +1088 -140
  188. package/docs/demos/Page/examples/Page.md +618 -123
  189. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +13 -1
  190. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +52 -4
  191. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +691 -113
  192. package/docs/demos/Skeleton/examples/Skeleton.md +44 -8
  193. package/docs/demos/Table/examples/Table.md +3924 -256
  194. package/docs/demos/Tabs/examples/Tabs.md +407 -65
  195. package/docs/demos/Toolbar/examples/Toolbar.md +502 -52
  196. package/docs/demos/Wizard/examples/Wizard.md +796 -130
  197. package/docs/layouts/Bullseye/examples/Bullseye.css +2 -2
  198. package/docs/layouts/Bullseye/examples/Bullseye.md +2 -1
  199. package/docs/layouts/Flex/examples/Flex.css +3 -3
  200. package/docs/layouts/Flex/examples/Flex.md +3 -2
  201. package/docs/layouts/Gallery/examples/Gallery.css +2 -2
  202. package/docs/layouts/Gallery/examples/Gallery.md +4 -3
  203. package/docs/layouts/Grid/examples/Grid.css +1 -1
  204. package/docs/layouts/Grid/examples/Grid.md +6 -5
  205. package/docs/layouts/Level/examples/Level.css +3 -3
  206. package/docs/layouts/Level/examples/Level.md +2 -1
  207. package/docs/layouts/Split/examples/Split.css +1 -1
  208. package/docs/layouts/Split/examples/Split.md +2 -1
  209. package/docs/layouts/Stack/examples/Stack.css +3 -3
  210. package/docs/layouts/Stack/examples/Stack.md +2 -1
  211. package/docs/utilities/Accessibility/examples/Accessibility.md +3 -2
  212. package/docs/utilities/Alignment/examples/Alignment.css +4 -4
  213. package/docs/utilities/Alignment/examples/Alignment.md +3 -2
  214. package/docs/utilities/BackgroundColor/examples/BackgroundColor.md +5 -4
  215. package/docs/utilities/BoxShadow/examples/box-shadow.css +2 -2
  216. package/docs/utilities/BoxShadow/examples/box-shadow.md +2 -1
  217. package/docs/utilities/Display/examples/Display.css +1 -1
  218. package/docs/utilities/Display/examples/Display.md +3 -2
  219. package/docs/utilities/Flex/examples/Flex.css +7 -7
  220. package/docs/utilities/Flex/examples/Flex.md +3 -2
  221. package/docs/utilities/Float/examples/Float.css +2 -2
  222. package/docs/utilities/Float/examples/Float.md +3 -2
  223. package/docs/utilities/Sizing/examples/Sizing.md +8 -7
  224. package/docs/utilities/Spacing/examples/Spacing.css +2 -2
  225. package/docs/utilities/Spacing/examples/Spacing.md +3 -2
  226. package/docs/utilities/Text/examples/Text.md +5 -4
  227. package/icons/PfIcons/add-circle-o.svg +4 -0
  228. package/icons/PfIcons/ansible-tower.svg +4 -0
  229. package/icons/PfIcons/applications.svg +4 -0
  230. package/icons/PfIcons/arrow.svg +4 -0
  231. package/icons/PfIcons/asleep.svg +4 -0
  232. package/icons/PfIcons/attention-bell.svg +4 -0
  233. package/icons/PfIcons/automation.svg +4 -0
  234. package/icons/PfIcons/bell.svg +4 -0
  235. package/icons/PfIcons/blueprint.svg +4 -0
  236. package/icons/PfIcons/build.svg +4 -0
  237. package/icons/PfIcons/builder-image.svg +4 -0
  238. package/icons/PfIcons/bundle.svg +4 -0
  239. package/icons/PfIcons/catalog.svg +4 -0
  240. package/icons/PfIcons/chat.svg +4 -0
  241. package/icons/PfIcons/close.svg +4 -0
  242. package/icons/PfIcons/cloud-security.svg +4 -0
  243. package/icons/PfIcons/cloud-tenant.svg +4 -0
  244. package/icons/PfIcons/cluster.svg +4 -0
  245. package/icons/PfIcons/connected.svg +4 -0
  246. package/icons/PfIcons/container-node.svg +4 -0
  247. package/icons/PfIcons/cpu.svg +4 -0
  248. package/icons/PfIcons/critical-risk.svg +4 -0
  249. package/icons/PfIcons/data-processor.svg +4 -0
  250. package/icons/PfIcons/data-sink.svg +4 -0
  251. package/icons/PfIcons/data-source.svg +4 -0
  252. package/icons/PfIcons/degraded.svg +4 -0
  253. package/icons/PfIcons/disconnected.svg +4 -0
  254. package/icons/PfIcons/domain.svg +4 -0
  255. package/icons/PfIcons/edit.svg +4 -0
  256. package/icons/PfIcons/enhancement.svg +4 -0
  257. package/icons/PfIcons/enterprise.svg +4 -0
  258. package/icons/PfIcons/equalizer.svg +4 -0
  259. package/icons/PfIcons/error-circle-o.svg +4 -0
  260. package/icons/PfIcons/export.svg +4 -0
  261. package/icons/PfIcons/filter.svg +4 -0
  262. package/icons/PfIcons/flavor.svg +4 -0
  263. package/icons/PfIcons/folder-close.svg +4 -0
  264. package/icons/PfIcons/folder-open.svg +4 -0
  265. package/icons/PfIcons/globe-route.svg +4 -0
  266. package/icons/PfIcons/help.svg +4 -0
  267. package/icons/PfIcons/history.svg +4 -0
  268. package/icons/PfIcons/home.svg +4 -0
  269. package/icons/PfIcons/import.svg +4 -0
  270. package/icons/PfIcons/in-progress.svg +4 -0
  271. package/icons/PfIcons/info.svg +4 -0
  272. package/icons/PfIcons/infrastructure.svg +4 -0
  273. package/icons/PfIcons/integration.svg +4 -0
  274. package/icons/PfIcons/key.svg +4 -0
  275. package/icons/PfIcons/locked.svg +4 -0
  276. package/icons/PfIcons/maintenance.svg +4 -0
  277. package/icons/PfIcons/memory.svg +4 -0
  278. package/icons/PfIcons/messages.svg +4 -0
  279. package/icons/PfIcons/middleware.svg +4 -0
  280. package/icons/PfIcons/migration.svg +4 -0
  281. package/icons/PfIcons/module.svg +4 -0
  282. package/icons/PfIcons/monitoring.svg +4 -0
  283. package/icons/PfIcons/multicluster.svg +4 -0
  284. package/icons/PfIcons/namespaces.svg +4 -0
  285. package/icons/PfIcons/network.svg +4 -0
  286. package/icons/PfIcons/new-process.svg +4 -0
  287. package/icons/PfIcons/not-started.svg +4 -0
  288. package/icons/PfIcons/off.svg +4 -0
  289. package/icons/PfIcons/ok.svg +4 -0
  290. package/icons/PfIcons/on-running.svg +4 -0
  291. package/icons/PfIcons/on.svg +4 -0
  292. package/icons/PfIcons/open-drawer-right.svg +4 -0
  293. package/icons/PfIcons/openshift.svg +4 -0
  294. package/icons/PfIcons/openstack.svg +4 -0
  295. package/icons/PfIcons/optimize.svg +4 -0
  296. package/icons/PfIcons/orders.svg +4 -0
  297. package/icons/PfIcons/os-image.svg +4 -0
  298. package/icons/PfIcons/package.svg +4 -0
  299. package/icons/PfIcons/panel-close.svg +4 -0
  300. package/icons/PfIcons/panel-open.svg +4 -0
  301. package/icons/PfIcons/paused.svg +4 -0
  302. package/icons/PfIcons/pending.svg +4 -0
  303. package/icons/PfIcons/pficon-dragdrop.svg +4 -0
  304. package/icons/PfIcons/pficon-history.svg +4 -0
  305. package/icons/PfIcons/pficon-network-range.svg +4 -0
  306. package/icons/PfIcons/pficon-satellite.svg +4 -0
  307. package/icons/PfIcons/pficon-sort-common-asc.svg +4 -0
  308. package/icons/PfIcons/pficon-sort-common-desc.svg +4 -0
  309. package/icons/PfIcons/pficon-template.svg +4 -0
  310. package/icons/PfIcons/pficon-vcenter.svg +4 -0
  311. package/icons/PfIcons/plugged.svg +4 -0
  312. package/icons/PfIcons/port.svg +4 -0
  313. package/icons/PfIcons/print.svg +4 -0
  314. package/icons/PfIcons/private.svg +4 -0
  315. package/icons/PfIcons/process-automation.svg +4 -0
  316. package/icons/PfIcons/project.svg +4 -0
  317. package/icons/PfIcons/rebalance.svg +4 -0
  318. package/icons/PfIcons/rebooting.svg +4 -0
  319. package/icons/PfIcons/regions.svg +4 -0
  320. package/icons/PfIcons/registry.svg +4 -0
  321. package/icons/PfIcons/remove2.svg +4 -0
  322. package/icons/PfIcons/replicator.svg +4 -0
  323. package/icons/PfIcons/repository.svg +4 -0
  324. package/icons/PfIcons/resource-pool.svg +4 -0
  325. package/icons/PfIcons/resources-almost-empty.svg +4 -0
  326. package/icons/PfIcons/resources-almost-full.svg +4 -0
  327. package/icons/PfIcons/resources-empty.svg +4 -0
  328. package/icons/PfIcons/resources-full.svg +4 -0
  329. package/icons/PfIcons/running.svg +4 -0
  330. package/icons/PfIcons/save.svg +4 -0
  331. package/icons/PfIcons/screen.svg +4 -0
  332. package/icons/PfIcons/security.svg +4 -0
  333. package/icons/PfIcons/server-group.svg +4 -0
  334. package/icons/PfIcons/server.svg +4 -0
  335. package/icons/PfIcons/service-catalog.svg +4 -0
  336. package/icons/PfIcons/service.svg +4 -0
  337. package/icons/PfIcons/services.svg +4 -0
  338. package/icons/PfIcons/severity-critical.svg +4 -0
  339. package/icons/PfIcons/severity-important.svg +4 -0
  340. package/icons/PfIcons/severity-minor.svg +4 -0
  341. package/icons/PfIcons/severity-moderate.svg +4 -0
  342. package/icons/PfIcons/severity-none.svg +4 -0
  343. package/icons/PfIcons/severity-undefined.svg +4 -0
  344. package/icons/PfIcons/spinner.svg +4 -0
  345. package/icons/PfIcons/spinner2.svg +4 -0
  346. package/icons/PfIcons/storage-domain.svg +4 -0
  347. package/icons/PfIcons/task.svg +4 -0
  348. package/icons/PfIcons/tenant.svg +4 -0
  349. package/icons/PfIcons/thumb-tack.svg +4 -0
  350. package/icons/PfIcons/topology.svg +4 -0
  351. package/icons/PfIcons/treeview.svg +4 -0
  352. package/icons/PfIcons/trend-down.svg +4 -0
  353. package/icons/PfIcons/trend-up.svg +4 -0
  354. package/icons/PfIcons/unknown.svg +4 -0
  355. package/icons/PfIcons/unlocked.svg +4 -0
  356. package/icons/PfIcons/unplugged.svg +4 -0
  357. package/icons/PfIcons/user.svg +4 -0
  358. package/icons/PfIcons/users.svg +4 -0
  359. package/icons/PfIcons/virtual-machine.svg +4 -0
  360. package/icons/PfIcons/volume.svg +4 -0
  361. package/icons/PfIcons/warning-triangle.svg +4 -0
  362. package/icons/PfIcons/zone.svg +4 -0
  363. package/layouts/Flex/flex.scss +83 -19
  364. package/layouts/Gallery/gallery.css +6 -2
  365. package/layouts/_index.css +6 -2
  366. package/package.json +34 -16
  367. package/patternfly-base-no-globals.css +406 -14
  368. package/patternfly-base.css +413 -14
  369. package/patternfly-charts.css +3 -3
  370. package/patternfly-no-globals.css +1947 -625
  371. package/patternfly.css +1954 -625
  372. package/patternfly.min.css +1 -1
  373. package/patternfly.min.css.map +1 -1
  374. package/sass-utilities/functions.scss +32 -25
  375. package/sass-utilities/mixins.scss +36 -20
  376. package/sass-utilities/namespaces-components.scss +6 -0
package/docs/demos/Modal/examples/Modal.md CHANGED
@@ -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="modal-basic-example-masthead">
18
+ <header class="pf-v6-c-masthead" id="modal-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-modal-basic-example-masthead"
60
+ id="linearGradient-modal-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-modal-basic-example-masthead)"
114
+ fill="url(#linearGradient-modal-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-modal-basic-example-masthead)"
118
+ fill="url(#linearGradient-modal-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="modal-basic-example-masthead-toolbar"
130
+ id="modal-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
@@ -337,7 +373,19 @@ section: components
337
373
  aria-label="Close"
338
374
  >
339
375
  <span class="pf-v6-c-button__icon">
340
- <i class="fas fa-times" aria-hidden="true"></i>
376
+ <svg
377
+ class="pf-v6-svg"
378
+ viewBox="0 0 20 20"
379
+ fill="currentColor"
380
+ aria-hidden="true"
381
+ role="img"
382
+ width="1em"
383
+ height="1em"
384
+ >
385
+ <path
386
+ 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"
387
+ />
388
+ </svg>
341
389
  </span>
342
390
  </button>
343
391
  </div>
@@ -382,10 +430,7 @@ section: components
382
430
  <span class="pf-v6-c-button__text">Skip to content</span>
383
431
  </a>
384
432
  </div>
385
- <header
386
- class="pf-v6-c-masthead"
387
- id="modal-scrollable-content-example-masthead"
388
- >
433
+ <header class="pf-v6-c-masthead" id="modal-scrollable-content-example-docked">
389
434
  <div class="pf-v6-c-masthead__main">
390
435
  <span class="pf-v6-c-masthead__toggle">
391
436
  <button
@@ -427,7 +472,7 @@ section: components
427
472
  y1="2.25860997e-13%"
428
473
  x2="32%"
429
474
  y2="100%"
430
- id="linearGradient-modal-scrollable-content-example-masthead"
475
+ id="linearGradient-modal-scrollable-content-example-docked"
431
476
  >
432
477
  <stop stop-color="#2B9AF3" offset="0%" />
433
478
  <stop
@@ -481,11 +526,11 @@ section: components
481
526
  />
482
527
  <path
483
528
  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)"
529
+ fill="url(#linearGradient-modal-scrollable-content-example-docked)"
485
530
  />
486
531
  <path
487
532
  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)"
533
+ fill="url(#linearGradient-modal-scrollable-content-example-docked)"
489
534
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
490
535
  />
491
536
  </g>
@@ -497,7 +542,7 @@ section: components
497
542
  <div class="pf-v6-c-masthead__content">
498
543
  <div
499
544
  class="pf-v6-c-toolbar pf-m-static"
500
- id="modal-scrollable-content-example-masthead-toolbar"
545
+ id="modal-scrollable-content-example-docked-toolbar"
501
546
  >
502
547
  <div class="pf-v6-c-toolbar__content">
503
548
  <div class="pf-v6-c-toolbar__content-section">
@@ -619,21 +664,57 @@ section: components
619
664
  </li>
620
665
  <li class="pf-v6-c-breadcrumb__item">
621
666
  <span class="pf-v6-c-breadcrumb__item-divider">
622
- <i class="fas fa-angle-right" aria-hidden="true"></i>
667
+ <svg
668
+ class="pf-v6-svg"
669
+ viewBox="0 0 20 20"
670
+ fill="currentColor"
671
+ aria-hidden="true"
672
+ role="img"
673
+ width="1em"
674
+ height="1em"
675
+ >
676
+ <path
677
+ 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"
678
+ />
679
+ </svg>
623
680
  </span>
624
681
 
625
682
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
626
683
  </li>
627
684
  <li class="pf-v6-c-breadcrumb__item">
628
685
  <span class="pf-v6-c-breadcrumb__item-divider">
629
- <i class="fas fa-angle-right" aria-hidden="true"></i>
686
+ <svg
687
+ class="pf-v6-svg"
688
+ viewBox="0 0 20 20"
689
+ fill="currentColor"
690
+ aria-hidden="true"
691
+ role="img"
692
+ width="1em"
693
+ height="1em"
694
+ >
695
+ <path
696
+ 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"
697
+ />
698
+ </svg>
630
699
  </span>
631
700
 
632
701
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
633
702
  </li>
634
703
  <li class="pf-v6-c-breadcrumb__item">
635
704
  <span class="pf-v6-c-breadcrumb__item-divider">
636
- <i class="fas fa-angle-right" aria-hidden="true"></i>
705
+ <svg
706
+ class="pf-v6-svg"
707
+ viewBox="0 0 20 20"
708
+ fill="currentColor"
709
+ aria-hidden="true"
710
+ role="img"
711
+ width="1em"
712
+ height="1em"
713
+ >
714
+ <path
715
+ 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"
716
+ />
717
+ </svg>
637
718
  </span>
638
719
 
639
720
  <a
@@ -707,7 +788,19 @@ section: components
707
788
  aria-label="Close"
708
789
  >
709
790
  <span class="pf-v6-c-button__icon">
710
- <i class="fas fa-times" aria-hidden="true"></i>
791
+ <svg
792
+ class="pf-v6-svg"
793
+ viewBox="0 0 20 20"
794
+ fill="currentColor"
795
+ aria-hidden="true"
796
+ role="img"
797
+ width="1em"
798
+ height="1em"
799
+ >
800
+ <path
801
+ 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"
802
+ />
803
+ </svg>
711
804
  </span>
712
805
  </button>
713
806
  </div>
@@ -761,7 +854,7 @@ section: components
761
854
  <span class="pf-v6-c-button__text">Skip to content</span>
762
855
  </a>
763
856
  </div>
764
- <header class="pf-v6-c-masthead" id="modal-medium-example-masthead">
857
+ <header class="pf-v6-c-masthead" id="modal-medium-example-docked">
765
858
  <div class="pf-v6-c-masthead__main">
766
859
  <span class="pf-v6-c-masthead__toggle">
767
860
  <button
@@ -803,7 +896,7 @@ section: components
803
896
  y1="2.25860997e-13%"
804
897
  x2="32%"
805
898
  y2="100%"
806
- id="linearGradient-modal-medium-example-masthead"
899
+ id="linearGradient-modal-medium-example-docked"
807
900
  >
808
901
  <stop stop-color="#2B9AF3" offset="0%" />
809
902
  <stop
@@ -857,11 +950,11 @@ section: components
857
950
  />
858
951
  <path
859
952
  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)"
953
+ fill="url(#linearGradient-modal-medium-example-docked)"
861
954
  />
862
955
  <path
863
956
  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)"
957
+ fill="url(#linearGradient-modal-medium-example-docked)"
865
958
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
866
959
  />
867
960
  </g>
@@ -873,7 +966,7 @@ section: components
873
966
  <div class="pf-v6-c-masthead__content">
874
967
  <div
875
968
  class="pf-v6-c-toolbar pf-m-static"
876
- id="modal-medium-example-masthead-toolbar"
969
+ id="modal-medium-example-docked-toolbar"
877
970
  >
878
971
  <div class="pf-v6-c-toolbar__content">
879
972
  <div class="pf-v6-c-toolbar__content-section">
@@ -995,21 +1088,57 @@ section: components
995
1088
  </li>
996
1089
  <li class="pf-v6-c-breadcrumb__item">
997
1090
  <span class="pf-v6-c-breadcrumb__item-divider">
998
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1091
+ <svg
1092
+ class="pf-v6-svg"
1093
+ viewBox="0 0 20 20"
1094
+ fill="currentColor"
1095
+ aria-hidden="true"
1096
+ role="img"
1097
+ width="1em"
1098
+ height="1em"
1099
+ >
1100
+ <path
1101
+ 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"
1102
+ />
1103
+ </svg>
999
1104
  </span>
1000
1105
 
1001
1106
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1002
1107
  </li>
1003
1108
  <li class="pf-v6-c-breadcrumb__item">
1004
1109
  <span class="pf-v6-c-breadcrumb__item-divider">
1005
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1110
+ <svg
1111
+ class="pf-v6-svg"
1112
+ viewBox="0 0 20 20"
1113
+ fill="currentColor"
1114
+ aria-hidden="true"
1115
+ role="img"
1116
+ width="1em"
1117
+ height="1em"
1118
+ >
1119
+ <path
1120
+ 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"
1121
+ />
1122
+ </svg>
1006
1123
  </span>
1007
1124
 
1008
1125
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1009
1126
  </li>
1010
1127
  <li class="pf-v6-c-breadcrumb__item">
1011
1128
  <span class="pf-v6-c-breadcrumb__item-divider">
1012
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1129
+ <svg
1130
+ class="pf-v6-svg"
1131
+ viewBox="0 0 20 20"
1132
+ fill="currentColor"
1133
+ aria-hidden="true"
1134
+ role="img"
1135
+ width="1em"
1136
+ height="1em"
1137
+ >
1138
+ <path
1139
+ 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"
1140
+ />
1141
+ </svg>
1013
1142
  </span>
1014
1143
 
1015
1144
  <a
@@ -1083,7 +1212,19 @@ section: components
1083
1212
  aria-label="Close"
1084
1213
  >
1085
1214
  <span class="pf-v6-c-button__icon">
1086
- <i class="fas fa-times" aria-hidden="true"></i>
1215
+ <svg
1216
+ class="pf-v6-svg"
1217
+ viewBox="0 0 20 20"
1218
+ fill="currentColor"
1219
+ aria-hidden="true"
1220
+ role="img"
1221
+ width="1em"
1222
+ height="1em"
1223
+ >
1224
+ <path
1225
+ 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"
1226
+ />
1227
+ </svg>
1087
1228
  </span>
1088
1229
  </button>
1089
1230
  </div>
@@ -1127,7 +1268,7 @@ section: components
1127
1268
  <span class="pf-v6-c-button__text">Skip to content</span>
1128
1269
  </a>
1129
1270
  </div>
1130
- <header class="pf-v6-c-masthead" id="modal-large-example-masthead">
1271
+ <header class="pf-v6-c-masthead" id="modal-large-example-docked">
1131
1272
  <div class="pf-v6-c-masthead__main">
1132
1273
  <span class="pf-v6-c-masthead__toggle">
1133
1274
  <button
@@ -1169,7 +1310,7 @@ section: components
1169
1310
  y1="2.25860997e-13%"
1170
1311
  x2="32%"
1171
1312
  y2="100%"
1172
- id="linearGradient-modal-large-example-masthead"
1313
+ id="linearGradient-modal-large-example-docked"
1173
1314
  >
1174
1315
  <stop stop-color="#2B9AF3" offset="0%" />
1175
1316
  <stop
@@ -1223,11 +1364,11 @@ section: components
1223
1364
  />
1224
1365
  <path
1225
1366
  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)"
1367
+ fill="url(#linearGradient-modal-large-example-docked)"
1227
1368
  />
1228
1369
  <path
1229
1370
  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)"
1371
+ fill="url(#linearGradient-modal-large-example-docked)"
1231
1372
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
1232
1373
  />
1233
1374
  </g>
@@ -1239,7 +1380,7 @@ section: components
1239
1380
  <div class="pf-v6-c-masthead__content">
1240
1381
  <div
1241
1382
  class="pf-v6-c-toolbar pf-m-static"
1242
- id="modal-large-example-masthead-toolbar"
1383
+ id="modal-large-example-docked-toolbar"
1243
1384
  >
1244
1385
  <div class="pf-v6-c-toolbar__content">
1245
1386
  <div class="pf-v6-c-toolbar__content-section">
@@ -1361,21 +1502,57 @@ section: components
1361
1502
  </li>
1362
1503
  <li class="pf-v6-c-breadcrumb__item">
1363
1504
  <span class="pf-v6-c-breadcrumb__item-divider">
1364
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1505
+ <svg
1506
+ class="pf-v6-svg"
1507
+ viewBox="0 0 20 20"
1508
+ fill="currentColor"
1509
+ aria-hidden="true"
1510
+ role="img"
1511
+ width="1em"
1512
+ height="1em"
1513
+ >
1514
+ <path
1515
+ 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"
1516
+ />
1517
+ </svg>
1365
1518
  </span>
1366
1519
 
1367
1520
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1368
1521
  </li>
1369
1522
  <li class="pf-v6-c-breadcrumb__item">
1370
1523
  <span class="pf-v6-c-breadcrumb__item-divider">
1371
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1524
+ <svg
1525
+ class="pf-v6-svg"
1526
+ viewBox="0 0 20 20"
1527
+ fill="currentColor"
1528
+ aria-hidden="true"
1529
+ role="img"
1530
+ width="1em"
1531
+ height="1em"
1532
+ >
1533
+ <path
1534
+ 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"
1535
+ />
1536
+ </svg>
1372
1537
  </span>
1373
1538
 
1374
1539
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1375
1540
  </li>
1376
1541
  <li class="pf-v6-c-breadcrumb__item">
1377
1542
  <span class="pf-v6-c-breadcrumb__item-divider">
1378
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1543
+ <svg
1544
+ class="pf-v6-svg"
1545
+ viewBox="0 0 20 20"
1546
+ fill="currentColor"
1547
+ aria-hidden="true"
1548
+ role="img"
1549
+ width="1em"
1550
+ height="1em"
1551
+ >
1552
+ <path
1553
+ 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"
1554
+ />
1555
+ </svg>
1379
1556
  </span>
1380
1557
 
1381
1558
  <a
@@ -1449,7 +1626,19 @@ section: components
1449
1626
  aria-label="Close"
1450
1627
  >
1451
1628
  <span class="pf-v6-c-button__icon">
1452
- <i class="fas fa-times" aria-hidden="true"></i>
1629
+ <svg
1630
+ class="pf-v6-svg"
1631
+ viewBox="0 0 20 20"
1632
+ fill="currentColor"
1633
+ aria-hidden="true"
1634
+ role="img"
1635
+ width="1em"
1636
+ height="1em"
1637
+ >
1638
+ <path
1639
+ 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"
1640
+ />
1641
+ </svg>
1453
1642
  </span>
1454
1643
  </button>
1455
1644
  </div>
@@ -1493,7 +1682,7 @@ section: components
1493
1682
  <span class="pf-v6-c-button__text">Skip to content</span>
1494
1683
  </a>
1495
1684
  </div>
1496
- <header class="pf-v6-c-masthead" id="modal-large-example-masthead">
1685
+ <header class="pf-v6-c-masthead" id="modal-large-example-docked">
1497
1686
  <div class="pf-v6-c-masthead__main">
1498
1687
  <span class="pf-v6-c-masthead__toggle">
1499
1688
  <button
@@ -1535,7 +1724,7 @@ section: components
1535
1724
  y1="2.25860997e-13%"
1536
1725
  x2="32%"
1537
1726
  y2="100%"
1538
- id="linearGradient-modal-large-example-masthead"
1727
+ id="linearGradient-modal-large-example-docked"
1539
1728
  >
1540
1729
  <stop stop-color="#2B9AF3" offset="0%" />
1541
1730
  <stop
@@ -1589,11 +1778,11 @@ section: components
1589
1778
  />
1590
1779
  <path
1591
1780
  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)"
1781
+ fill="url(#linearGradient-modal-large-example-docked)"
1593
1782
  />
1594
1783
  <path
1595
1784
  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)"
1785
+ fill="url(#linearGradient-modal-large-example-docked)"
1597
1786
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
1598
1787
  />
1599
1788
  </g>
@@ -1605,7 +1794,7 @@ section: components
1605
1794
  <div class="pf-v6-c-masthead__content">
1606
1795
  <div
1607
1796
  class="pf-v6-c-toolbar pf-m-static"
1608
- id="modal-large-example-masthead-toolbar"
1797
+ id="modal-large-example-docked-toolbar"
1609
1798
  >
1610
1799
  <div class="pf-v6-c-toolbar__content">
1611
1800
  <div class="pf-v6-c-toolbar__content-section">
@@ -1727,21 +1916,57 @@ section: components
1727
1916
  </li>
1728
1917
  <li class="pf-v6-c-breadcrumb__item">
1729
1918
  <span class="pf-v6-c-breadcrumb__item-divider">
1730
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1919
+ <svg
1920
+ class="pf-v6-svg"
1921
+ viewBox="0 0 20 20"
1922
+ fill="currentColor"
1923
+ aria-hidden="true"
1924
+ role="img"
1925
+ width="1em"
1926
+ height="1em"
1927
+ >
1928
+ <path
1929
+ 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"
1930
+ />
1931
+ </svg>
1731
1932
  </span>
1732
1933
 
1733
1934
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1734
1935
  </li>
1735
1936
  <li class="pf-v6-c-breadcrumb__item">
1736
1937
  <span class="pf-v6-c-breadcrumb__item-divider">
1737
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1938
+ <svg
1939
+ class="pf-v6-svg"
1940
+ viewBox="0 0 20 20"
1941
+ fill="currentColor"
1942
+ aria-hidden="true"
1943
+ role="img"
1944
+ width="1em"
1945
+ height="1em"
1946
+ >
1947
+ <path
1948
+ 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"
1949
+ />
1950
+ </svg>
1738
1951
  </span>
1739
1952
 
1740
1953
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1741
1954
  </li>
1742
1955
  <li class="pf-v6-c-breadcrumb__item">
1743
1956
  <span class="pf-v6-c-breadcrumb__item-divider">
1744
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1957
+ <svg
1958
+ class="pf-v6-svg"
1959
+ viewBox="0 0 20 20"
1960
+ fill="currentColor"
1961
+ aria-hidden="true"
1962
+ role="img"
1963
+ width="1em"
1964
+ height="1em"
1965
+ >
1966
+ <path
1967
+ 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"
1968
+ />
1969
+ </svg>
1745
1970
  </span>
1746
1971
 
1747
1972
  <a
@@ -1815,7 +2040,19 @@ section: components
1815
2040
  aria-label="Close"
1816
2041
  >
1817
2042
  <span class="pf-v6-c-button__icon">
1818
- <i class="fas fa-times" aria-hidden="true"></i>
2043
+ <svg
2044
+ class="pf-v6-svg"
2045
+ viewBox="0 0 20 20"
2046
+ fill="currentColor"
2047
+ aria-hidden="true"
2048
+ role="img"
2049
+ width="1em"
2050
+ height="1em"
2051
+ >
2052
+ <path
2053
+ 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"
2054
+ />
2055
+ </svg>
1819
2056
  </span>
1820
2057
  </button>
1821
2058
  </div>
@@ -1859,7 +2096,7 @@ section: components
1859
2096
  <span class="pf-v6-c-button__text">Skip to content</span>
1860
2097
  </a>
1861
2098
  </div>
1862
- <header class="pf-v6-c-masthead" id="modal-with-form-example-masthead">
2099
+ <header class="pf-v6-c-masthead" id="modal-with-form-example-docked">
1863
2100
  <div class="pf-v6-c-masthead__main">
1864
2101
  <span class="pf-v6-c-masthead__toggle">
1865
2102
  <button
@@ -1901,7 +2138,7 @@ section: components
1901
2138
  y1="2.25860997e-13%"
1902
2139
  x2="32%"
1903
2140
  y2="100%"
1904
- id="linearGradient-modal-with-form-example-masthead"
2141
+ id="linearGradient-modal-with-form-example-docked"
1905
2142
  >
1906
2143
  <stop stop-color="#2B9AF3" offset="0%" />
1907
2144
  <stop
@@ -1955,11 +2192,11 @@ section: components
1955
2192
  />
1956
2193
  <path
1957
2194
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
1958
- fill="url(#linearGradient-modal-with-form-example-masthead)"
2195
+ fill="url(#linearGradient-modal-with-form-example-docked)"
1959
2196
  />
1960
2197
  <path
1961
2198
  d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z"
1962
- fill="url(#linearGradient-modal-with-form-example-masthead)"
2199
+ fill="url(#linearGradient-modal-with-form-example-docked)"
1963
2200
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
1964
2201
  />
1965
2202
  </g>
@@ -1971,7 +2208,7 @@ section: components
1971
2208
  <div class="pf-v6-c-masthead__content">
1972
2209
  <div
1973
2210
  class="pf-v6-c-toolbar pf-m-static"
1974
- id="modal-with-form-example-masthead-toolbar"
2211
+ id="modal-with-form-example-docked-toolbar"
1975
2212
  >
1976
2213
  <div class="pf-v6-c-toolbar__content">
1977
2214
  <div class="pf-v6-c-toolbar__content-section">
@@ -2093,21 +2330,57 @@ section: components
2093
2330
  </li>
2094
2331
  <li class="pf-v6-c-breadcrumb__item">
2095
2332
  <span class="pf-v6-c-breadcrumb__item-divider">
2096
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2333
+ <svg
2334
+ class="pf-v6-svg"
2335
+ viewBox="0 0 20 20"
2336
+ fill="currentColor"
2337
+ aria-hidden="true"
2338
+ role="img"
2339
+ width="1em"
2340
+ height="1em"
2341
+ >
2342
+ <path
2343
+ d="M14.35 8.94 6.71 1.29l-.02-.02c-.4-.38-1.03-.37-1.41.02-.38.4-.37 1.03.02 1.41l7.29 7.29-7.29 7.29a1.003 1.003 0 0 0 1.42 1.42l7.65-7.65c.59-.59.59-1.54 0-2.12Z"
2344
+ />
2345
+ </svg>
2097
2346
  </span>
2098
2347
 
2099
2348
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
2100
2349
  </li>
2101
2350
  <li class="pf-v6-c-breadcrumb__item">
2102
2351
  <span class="pf-v6-c-breadcrumb__item-divider">
2103
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2352
+ <svg
2353
+ class="pf-v6-svg"
2354
+ viewBox="0 0 20 20"
2355
+ fill="currentColor"
2356
+ aria-hidden="true"
2357
+ role="img"
2358
+ width="1em"
2359
+ height="1em"
2360
+ >
2361
+ <path
2362
+ d="M14.35 8.94 6.71 1.29l-.02-.02c-.4-.38-1.03-.37-1.41.02-.38.4-.37 1.03.02 1.41l7.29 7.29-7.29 7.29a1.003 1.003 0 0 0 1.42 1.42l7.65-7.65c.59-.59.59-1.54 0-2.12Z"
2363
+ />
2364
+ </svg>
2104
2365
  </span>
2105
2366
 
2106
2367
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
2107
2368
  </li>
2108
2369
  <li class="pf-v6-c-breadcrumb__item">
2109
2370
  <span class="pf-v6-c-breadcrumb__item-divider">
2110
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2371
+ <svg
2372
+ class="pf-v6-svg"
2373
+ viewBox="0 0 20 20"
2374
+ fill="currentColor"
2375
+ aria-hidden="true"
2376
+ role="img"
2377
+ width="1em"
2378
+ height="1em"
2379
+ >
2380
+ <path
2381
+ d="M14.35 8.94 6.71 1.29l-.02-.02c-.4-.38-1.03-.37-1.41.02-.38.4-.37 1.03.02 1.41l7.29 7.29-7.29 7.29a1.003 1.003 0 0 0 1.42 1.42l7.65-7.65c.59-.59.59-1.54 0-2.12Z"
2382
+ />
2383
+ </svg>
2111
2384
  </span>
2112
2385
 
2113
2386
  <a
@@ -2181,7 +2454,19 @@ section: components
2181
2454
  aria-label="Close"
2182
2455
  >
2183
2456
  <span class="pf-v6-c-button__icon">
2184
- <i class="fas fa-times" aria-hidden="true"></i>
2457
+ <svg
2458
+ class="pf-v6-svg"
2459
+ viewBox="0 0 20 20"
2460
+ fill="currentColor"
2461
+ aria-hidden="true"
2462
+ role="img"
2463
+ width="1em"
2464
+ height="1em"
2465
+ >
2466
+ <path
2467
+ 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"
2468
+ />
2469
+ </svg>
2185
2470
  </span>
2186
2471
  </button>
2187
2472
  </div>