@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/AboutModal/examples/AboutModal.md CHANGED
@@ -17,7 +17,7 @@ This demo implements the about modal, including the backdrop.
17
17
  <span class="pf-v6-c-button__text">Skip to content</span>
18
18
  </a>
19
19
  </div>
20
- <header class="pf-v6-c-masthead" id="modal-basic-example-masthead">
20
+ <header class="pf-v6-c-masthead" id="modal-basic-example-docked">
21
21
  <div class="pf-v6-c-masthead__main">
22
22
  <span class="pf-v6-c-masthead__toggle">
23
23
  <button
@@ -59,7 +59,7 @@ This demo implements the about modal, including the backdrop.
59
59
  y1="2.25860997e-13%"
60
60
  x2="32%"
61
61
  y2="100%"
62
- id="linearGradient-modal-basic-example-masthead"
62
+ id="linearGradient-modal-basic-example-docked"
63
63
  >
64
64
  <stop stop-color="#2B9AF3" offset="0%" />
65
65
  <stop
@@ -113,11 +113,11 @@ This demo implements the about modal, including the backdrop.
113
113
  />
114
114
  <path
115
115
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
116
- fill="url(#linearGradient-modal-basic-example-masthead)"
116
+ fill="url(#linearGradient-modal-basic-example-docked)"
117
117
  />
118
118
  <path
119
119
  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"
120
- fill="url(#linearGradient-modal-basic-example-masthead)"
120
+ fill="url(#linearGradient-modal-basic-example-docked)"
121
121
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
122
122
  />
123
123
  </g>
@@ -129,7 +129,7 @@ This demo implements the about modal, including the backdrop.
129
129
  <div class="pf-v6-c-masthead__content">
130
130
  <div
131
131
  class="pf-v6-c-toolbar pf-m-static"
132
- id="modal-basic-example-masthead-toolbar"
132
+ id="modal-basic-example-docked-toolbar"
133
133
  >
134
134
  <div class="pf-v6-c-toolbar__content">
135
135
  <div class="pf-v6-c-toolbar__content-section">
@@ -251,21 +251,57 @@ This demo implements the about modal, including the backdrop.
251
251
  </li>
252
252
  <li class="pf-v6-c-breadcrumb__item">
253
253
  <span class="pf-v6-c-breadcrumb__item-divider">
254
- <i class="fas fa-angle-right" aria-hidden="true"></i>
254
+ <svg
255
+ class="pf-v6-svg"
256
+ viewBox="0 0 20 20"
257
+ fill="currentColor"
258
+ aria-hidden="true"
259
+ role="img"
260
+ width="1em"
261
+ height="1em"
262
+ >
263
+ <path
264
+ 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"
265
+ />
266
+ </svg>
255
267
  </span>
256
268
 
257
269
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
258
270
  </li>
259
271
  <li class="pf-v6-c-breadcrumb__item">
260
272
  <span class="pf-v6-c-breadcrumb__item-divider">
261
- <i class="fas fa-angle-right" aria-hidden="true"></i>
273
+ <svg
274
+ class="pf-v6-svg"
275
+ viewBox="0 0 20 20"
276
+ fill="currentColor"
277
+ aria-hidden="true"
278
+ role="img"
279
+ width="1em"
280
+ height="1em"
281
+ >
282
+ <path
283
+ 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"
284
+ />
285
+ </svg>
262
286
  </span>
263
287
 
264
288
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
265
289
  </li>
266
290
  <li class="pf-v6-c-breadcrumb__item">
267
291
  <span class="pf-v6-c-breadcrumb__item-divider">
268
- <i class="fas fa-angle-right" aria-hidden="true"></i>
292
+ <svg
293
+ class="pf-v6-svg"
294
+ viewBox="0 0 20 20"
295
+ fill="currentColor"
296
+ aria-hidden="true"
297
+ role="img"
298
+ width="1em"
299
+ height="1em"
300
+ >
301
+ <path
302
+ 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"
303
+ />
304
+ </svg>
269
305
  </span>
270
306
 
271
307
  <a
@@ -349,7 +385,19 @@ This demo implements the about modal, including the backdrop.
349
385
  aria-label="Close dialog"
350
386
  >
351
387
  <span class="pf-v6-c-button__icon">
352
- <i class="fas fa-times" aria-hidden="true"></i>
388
+ <svg
389
+ class="pf-v6-svg"
390
+ viewBox="0 0 20 20"
391
+ fill="currentColor"
392
+ aria-hidden="true"
393
+ role="img"
394
+ width="1em"
395
+ height="1em"
396
+ >
397
+ <path
398
+ 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"
399
+ />
400
+ </svg>
353
401
  </span>
354
402
  </button>
355
403
  </div>
package/docs/demos/Alert/examples/Alert.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="alert-basic-example-masthead">
18
+ <header class="pf-v6-c-masthead" id="alert-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-alert-basic-example-masthead"
60
+ id="linearGradient-alert-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-alert-basic-example-masthead)"
114
+ fill="url(#linearGradient-alert-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-alert-basic-example-masthead)"
118
+ fill="url(#linearGradient-alert-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="alert-basic-example-masthead-toolbar"
130
+ id="alert-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
@@ -325,7 +361,19 @@ section: components
325
361
  <li class="pf-v6-c-alert-group__item">
326
362
  <div class="pf-v6-c-alert pf-m-success" aria-label="Success alert">
327
363
  <div class="pf-v6-c-alert__icon">
328
- <i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
364
+ <svg
365
+ class="pf-v6-svg"
366
+ viewBox="0 0 512 512"
367
+ fill="currentColor"
368
+ aria-hidden="true"
369
+ role="img"
370
+ width="1em"
371
+ height="1em"
372
+ >
373
+ <path
374
+ d="M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z"
375
+ />
376
+ </svg>
329
377
  </div>
330
378
  <p class="pf-v6-c-alert__title">
331
379
  <span class="pf-v6-screen-reader">Success alert:</span>
@@ -338,7 +386,19 @@ section: components
338
386
  aria-label="Close success alert: Newest notification"
339
387
  >
340
388
  <span class="pf-v6-c-button__icon">
341
- <i class="fas fa-times" aria-hidden="true"></i>
389
+ <svg
390
+ class="pf-v6-svg"
391
+ viewBox="0 0 20 20"
392
+ fill="currentColor"
393
+ aria-hidden="true"
394
+ role="img"
395
+ width="1em"
396
+ height="1em"
397
+ >
398
+ <path
399
+ 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"
400
+ />
401
+ </svg>
342
402
  </span>
343
403
  </button>
344
404
  </div>
@@ -350,7 +410,19 @@ section: components
350
410
  <li class="pf-v6-c-alert-group__item">
351
411
  <div class="pf-v6-c-alert pf-m-warning" aria-label="Warning alert">
352
412
  <div class="pf-v6-c-alert__icon">
353
- <i class="fas fa-fw fa-exclamation-triangle" aria-hidden="true"></i>
413
+ <svg
414
+ class="pf-v6-svg"
415
+ viewBox="0 0 576 512"
416
+ fill="currentColor"
417
+ aria-hidden="true"
418
+ role="img"
419
+ width="1em"
420
+ height="1em"
421
+ >
422
+ <path
423
+ d="M569.517 440.013C587.975 472.007 564.806 512 527.94 512H48.054c-36.937 0-59.999-40.055-41.577-71.987L246.423 23.985c18.467-32.009 64.72-31.951 83.154 0l239.94 416.028zM288 354c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"
424
+ />
425
+ </svg>
354
426
  </div>
355
427
  <p class="pf-v6-c-alert__title">
356
428
  <span class="pf-v6-screen-reader">Info alert:</span>
@@ -363,7 +435,19 @@ section: components
363
435
  aria-label="Close warning alert: second newest notification"
364
436
  >
365
437
  <span class="pf-v6-c-button__icon">
366
- <i class="fas fa-times" aria-hidden="true"></i>
438
+ <svg
439
+ class="pf-v6-svg"
440
+ viewBox="0 0 20 20"
441
+ fill="currentColor"
442
+ aria-hidden="true"
443
+ role="img"
444
+ width="1em"
445
+ height="1em"
446
+ >
447
+ <path
448
+ 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"
449
+ />
450
+ </svg>
367
451
  </span>
368
452
  </button>
369
453
  </div>
@@ -375,7 +459,19 @@ section: components
375
459
  <li class="pf-v6-c-alert-group__item">
376
460
  <div class="pf-v6-c-alert pf-m-danger" aria-label="Danger alert">
377
461
  <div class="pf-v6-c-alert__icon">
378
- <i class="fas fa-fw fa-exclamation-circle" aria-hidden="true"></i>
462
+ <svg
463
+ class="pf-v6-svg"
464
+ viewBox="0 0 512 512"
465
+ fill="currentColor"
466
+ aria-hidden="true"
467
+ role="img"
468
+ width="1em"
469
+ height="1em"
470
+ >
471
+ <path
472
+ d="M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zm-248 50c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"
473
+ />
474
+ </svg>
379
475
  </div>
380
476
  <p class="pf-v6-c-alert__title">
381
477
  <span class="pf-v6-screen-reader">Last notification</span>
@@ -388,7 +484,19 @@ section: components
388
484
  aria-label="Close danger alert: Last notification"
389
485
  >
390
486
  <span class="pf-v6-c-button__icon">
391
- <i class="fas fa-times" aria-hidden="true"></i>
487
+ <svg
488
+ class="pf-v6-svg"
489
+ viewBox="0 0 20 20"
490
+ fill="currentColor"
491
+ aria-hidden="true"
492
+ role="img"
493
+ width="1em"
494
+ height="1em"
495
+ >
496
+ <path
497
+ 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"
498
+ />
499
+ </svg>
392
500
  </span>
393
501
  </button>
394
502
  </div>
@@ -413,7 +521,7 @@ section: components
413
521
  <span class="pf-v6-c-button__text">Skip to content</span>
414
522
  </a>
415
523
  </div>
416
- <header class="pf-v6-c-masthead" id="alert-horizontal-example-masthead">
524
+ <header class="pf-v6-c-masthead" id="alert-horizontal-example-docked">
417
525
  <div class="pf-v6-c-masthead__main">
418
526
  <span class="pf-v6-c-masthead__toggle">
419
527
  <button
@@ -455,7 +563,7 @@ section: components
455
563
  y1="2.25860997e-13%"
456
564
  x2="32%"
457
565
  y2="100%"
458
- id="linearGradient-alert-horizontal-example-masthead"
566
+ id="linearGradient-alert-horizontal-example-docked"
459
567
  >
460
568
  <stop stop-color="#2B9AF3" offset="0%" />
461
569
  <stop
@@ -509,11 +617,11 @@ section: components
509
617
  />
510
618
  <path
511
619
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
512
- fill="url(#linearGradient-alert-horizontal-example-masthead)"
620
+ fill="url(#linearGradient-alert-horizontal-example-docked)"
513
621
  />
514
622
  <path
515
623
  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"
516
- fill="url(#linearGradient-alert-horizontal-example-masthead)"
624
+ fill="url(#linearGradient-alert-horizontal-example-docked)"
517
625
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
518
626
  />
519
627
  </g>
@@ -525,7 +633,7 @@ section: components
525
633
  <div class="pf-v6-c-masthead__content">
526
634
  <div
527
635
  class="pf-v6-c-toolbar pf-m-static"
528
- id="alert-horizontal-example-masthead-toolbar"
636
+ id="alert-horizontal-example-docked-toolbar"
529
637
  >
530
638
  <div class="pf-v6-c-toolbar__content">
531
639
  <div class="pf-v6-c-toolbar__content-section">
@@ -647,21 +755,57 @@ section: components
647
755
  </li>
648
756
  <li class="pf-v6-c-breadcrumb__item">
649
757
  <span class="pf-v6-c-breadcrumb__item-divider">
650
- <i class="fas fa-angle-right" aria-hidden="true"></i>
758
+ <svg
759
+ class="pf-v6-svg"
760
+ viewBox="0 0 20 20"
761
+ fill="currentColor"
762
+ aria-hidden="true"
763
+ role="img"
764
+ width="1em"
765
+ height="1em"
766
+ >
767
+ <path
768
+ 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"
769
+ />
770
+ </svg>
651
771
  </span>
652
772
 
653
773
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
654
774
  </li>
655
775
  <li class="pf-v6-c-breadcrumb__item">
656
776
  <span class="pf-v6-c-breadcrumb__item-divider">
657
- <i class="fas fa-angle-right" aria-hidden="true"></i>
777
+ <svg
778
+ class="pf-v6-svg"
779
+ viewBox="0 0 20 20"
780
+ fill="currentColor"
781
+ aria-hidden="true"
782
+ role="img"
783
+ width="1em"
784
+ height="1em"
785
+ >
786
+ <path
787
+ 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"
788
+ />
789
+ </svg>
658
790
  </span>
659
791
 
660
792
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
661
793
  </li>
662
794
  <li class="pf-v6-c-breadcrumb__item">
663
795
  <span class="pf-v6-c-breadcrumb__item-divider">
664
- <i class="fas fa-angle-right" aria-hidden="true"></i>
796
+ <svg
797
+ class="pf-v6-svg"
798
+ viewBox="0 0 20 20"
799
+ fill="currentColor"
800
+ aria-hidden="true"
801
+ role="img"
802
+ width="1em"
803
+ height="1em"
804
+ >
805
+ <path
806
+ 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"
807
+ />
808
+ </svg>
665
809
  </span>
666
810
 
667
811
  <a
@@ -692,7 +836,19 @@ section: components
692
836
  aria-label="Inline danger alert"
693
837
  >
694
838
  <div class="pf-v6-c-alert__icon">
695
- <i class="fas fa-fw fa-exclamation-circle" aria-hidden="true"></i>
839
+ <svg
840
+ class="pf-v6-svg"
841
+ viewBox="0 0 512 512"
842
+ fill="currentColor"
843
+ aria-hidden="true"
844
+ role="img"
845
+ width="1em"
846
+ height="1em"
847
+ >
848
+ <path
849
+ d="M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zm-248 50c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"
850
+ />
851
+ </svg>
696
852
  </div>
697
853
  <p class="pf-v6-c-alert__title">
698
854
  <span class="pf-v6-screen-reader">Danger alert:</span>
@@ -914,7 +1070,7 @@ section: components
914
1070
  <span class="pf-v6-c-button__text">Skip to content</span>
915
1071
  </a>
916
1072
  </div>
917
- <header class="pf-v6-c-masthead" id="alert-stacked-example-masthead">
1073
+ <header class="pf-v6-c-masthead" id="alert-stacked-example-docked">
918
1074
  <div class="pf-v6-c-masthead__main">
919
1075
  <span class="pf-v6-c-masthead__toggle">
920
1076
  <button
@@ -956,7 +1112,7 @@ section: components
956
1112
  y1="2.25860997e-13%"
957
1113
  x2="32%"
958
1114
  y2="100%"
959
- id="linearGradient-alert-stacked-example-masthead"
1115
+ id="linearGradient-alert-stacked-example-docked"
960
1116
  >
961
1117
  <stop stop-color="#2B9AF3" offset="0%" />
962
1118
  <stop
@@ -1010,11 +1166,11 @@ section: components
1010
1166
  />
1011
1167
  <path
1012
1168
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
1013
- fill="url(#linearGradient-alert-stacked-example-masthead)"
1169
+ fill="url(#linearGradient-alert-stacked-example-docked)"
1014
1170
  />
1015
1171
  <path
1016
1172
  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"
1017
- fill="url(#linearGradient-alert-stacked-example-masthead)"
1173
+ fill="url(#linearGradient-alert-stacked-example-docked)"
1018
1174
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
1019
1175
  />
1020
1176
  </g>
@@ -1026,7 +1182,7 @@ section: components
1026
1182
  <div class="pf-v6-c-masthead__content">
1027
1183
  <div
1028
1184
  class="pf-v6-c-toolbar pf-m-static"
1029
- id="alert-stacked-example-masthead-toolbar"
1185
+ id="alert-stacked-example-docked-toolbar"
1030
1186
  >
1031
1187
  <div class="pf-v6-c-toolbar__content">
1032
1188
  <div class="pf-v6-c-toolbar__content-section">
@@ -1148,21 +1304,57 @@ section: components
1148
1304
  </li>
1149
1305
  <li class="pf-v6-c-breadcrumb__item">
1150
1306
  <span class="pf-v6-c-breadcrumb__item-divider">
1151
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1307
+ <svg
1308
+ class="pf-v6-svg"
1309
+ viewBox="0 0 20 20"
1310
+ fill="currentColor"
1311
+ aria-hidden="true"
1312
+ role="img"
1313
+ width="1em"
1314
+ height="1em"
1315
+ >
1316
+ <path
1317
+ 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"
1318
+ />
1319
+ </svg>
1152
1320
  </span>
1153
1321
 
1154
1322
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1155
1323
  </li>
1156
1324
  <li class="pf-v6-c-breadcrumb__item">
1157
1325
  <span class="pf-v6-c-breadcrumb__item-divider">
1158
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1326
+ <svg
1327
+ class="pf-v6-svg"
1328
+ viewBox="0 0 20 20"
1329
+ fill="currentColor"
1330
+ aria-hidden="true"
1331
+ role="img"
1332
+ width="1em"
1333
+ height="1em"
1334
+ >
1335
+ <path
1336
+ 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"
1337
+ />
1338
+ </svg>
1159
1339
  </span>
1160
1340
 
1161
1341
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1162
1342
  </li>
1163
1343
  <li class="pf-v6-c-breadcrumb__item">
1164
1344
  <span class="pf-v6-c-breadcrumb__item-divider">
1165
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1345
+ <svg
1346
+ class="pf-v6-svg"
1347
+ viewBox="0 0 20 20"
1348
+ fill="currentColor"
1349
+ aria-hidden="true"
1350
+ role="img"
1351
+ width="1em"
1352
+ height="1em"
1353
+ >
1354
+ <path
1355
+ 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"
1356
+ />
1357
+ </svg>
1166
1358
  </span>
1167
1359
 
1168
1360
  <a
@@ -1190,7 +1382,19 @@ section: components
1190
1382
  aria-label="Inline danger alert"
1191
1383
  >
1192
1384
  <div class="pf-v6-c-alert__icon">
1193
- <i class="fas fa-fw fa-exclamation-circle" aria-hidden="true"></i>
1385
+ <svg
1386
+ class="pf-v6-svg"
1387
+ viewBox="0 0 512 512"
1388
+ fill="currentColor"
1389
+ aria-hidden="true"
1390
+ role="img"
1391
+ width="1em"
1392
+ height="1em"
1393
+ >
1394
+ <path
1395
+ d="M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zm-248 50c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"
1396
+ />
1397
+ </svg>
1194
1398
  </div>
1195
1399
  <p class="pf-v6-c-alert__title">
1196
1400
  <span class="pf-v6-screen-reader">Danger alert:</span>