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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (392) hide show
  1. package/README.md +1 -1
  2. package/assets/fontawesome/_variables.scss +2 -1
  3. package/assets/images/RHAiExperienceIcon.svg +27 -0
  4. package/assets/images/RHAutomationsLogo.svg +96 -0
  5. package/assets/images/RHServerStackIcon.svg +16 -0
  6. package/assets/images/compass--hero-bg.png +0 -0
  7. package/assets/images/compass--rh-wallpaper-dark.png +0 -0
  8. package/assets/images/compass--rh-wallpaper-light.png +0 -0
  9. package/assets/images/compass--wallpaper-dark.jpg +0 -0
  10. package/assets/images/compass--wallpaper-dark.png +0 -0
  11. package/assets/images/compass--wallpaper-light.jpg +0 -0
  12. package/assets/images/compass--wallpaper-light.png +0 -0
  13. package/assets/images/glass-brand-dark.jpg +0 -0
  14. package/assets/images/glass-brand-dark.png +0 -0
  15. package/assets/images/glass-brand-light.jpg +0 -0
  16. package/assets/images/glass-brand-light.png +0 -0
  17. package/base/normalize.scss +7 -0
  18. package/base/patternfly-common.css +50 -0
  19. package/base/patternfly-common.scss +59 -0
  20. package/base/patternfly-svg-icons.css +11 -0
  21. package/base/patternfly-svg-icons.scss +14 -0
  22. package/base/patternfly-variables.css +926 -513
  23. package/base/patternfly-variables.scss +46 -4
  24. package/base/tokens/tokens-dark.scss +56 -8
  25. package/base/tokens/tokens-default.scss +69 -14
  26. package/base/tokens/tokens-glass-dark.scss +26 -0
  27. package/base/tokens/tokens-glass.scss +22 -0
  28. package/base/tokens/tokens-local.scss +17 -0
  29. package/base/tokens/tokens-palette.scss +3 -1
  30. package/base/tokens/tokens-redhat-dark.scss +21 -0
  31. package/base/tokens/tokens-redhat-glass-dark.scss +40 -0
  32. package/base/tokens/tokens-redhat-glass.scss +30 -0
  33. package/base/tokens/tokens-redhat-highcontrast-dark.scss +50 -0
  34. package/base/tokens/tokens-redhat-highcontrast.scss +128 -0
  35. package/base/tokens/tokens-redhat.scss +15 -0
  36. package/components/AboutModalBox/about-modal-box.css +36 -26
  37. package/components/Accordion/accordion.css +27 -14
  38. package/components/Accordion/accordion.scss +12 -2
  39. package/components/ActionList/action-list.css +2 -0
  40. package/components/ActionList/action-list.scss +2 -0
  41. package/components/Alert/alert.css +7 -5
  42. package/components/Alert/alert.scss +2 -1
  43. package/components/Avatar/avatar.css +12 -4
  44. package/components/BackgroundImage/background-image.css +6 -3
  45. package/components/Banner/banner.css +8 -6
  46. package/components/Brand/brand.css +3 -1
  47. package/components/Breadcrumb/breadcrumb.css +4 -3
  48. package/components/Button/button.css +121 -30
  49. package/components/Button/button.scss +131 -26
  50. package/components/CalendarMonth/calendar-month.css +4 -3
  51. package/components/Card/card.css +51 -13
  52. package/components/Card/card.scss +61 -8
  53. package/components/ClipboardCopy/clipboard-copy.css +7 -6
  54. package/components/ClipboardCopy/clipboard-copy.scss +3 -3
  55. package/components/CodeEditor/code-editor.css +1 -1
  56. package/components/CodeEditor/code-editor.scss +1 -1
  57. package/components/Compass/compass.css +320 -0
  58. package/components/Compass/compass.scss +350 -0
  59. package/components/DataList/data-list.css +34 -23
  60. package/components/DataList/data-list.scss +8 -2
  61. package/components/DescriptionList/description-list-order.scss +5 -1
  62. package/components/DescriptionList/description-list.css +7 -5
  63. package/components/DescriptionList/description-list.scss +5 -1
  64. package/components/Divider/divider.css +7 -5
  65. package/components/Drawer/drawer.css +115 -56
  66. package/components/Drawer/drawer.scss +82 -9
  67. package/components/DualListSelector/dual-list-selector.css +18 -12
  68. package/components/DualListSelector/dual-list-selector.scss +1 -1
  69. package/components/ExpandableSection/expandable-section.css +21 -16
  70. package/components/ExpandableSection/expandable-section.scss +6 -3
  71. package/components/Form/form.css +2 -2
  72. package/components/Form/form.scss +2 -2
  73. package/components/FormControl/form-control.css +3 -3
  74. package/components/FormControl/form-control.scss +3 -3
  75. package/components/Hero/hero.css +74 -0
  76. package/components/Hero/hero.scss +86 -0
  77. package/components/JumpLinks/jump-links.css +16 -5
  78. package/components/JumpLinks/jump-links.scss +17 -3
  79. package/components/Label/label-group.css +2 -2
  80. package/components/Label/label-group.scss +2 -2
  81. package/components/Label/label.css +4 -3
  82. package/components/Login/login.css +58 -40
  83. package/components/Login/login.scss +7 -3
  84. package/components/Masthead/masthead.css +112 -16
  85. package/components/Masthead/masthead.scss +112 -1
  86. package/components/Menu/menu.css +23 -14
  87. package/components/MenuToggle/menu-toggle.css +26 -3
  88. package/components/MenuToggle/menu-toggle.scss +30 -3
  89. package/components/ModalBox/modal-box.css +9 -7
  90. package/components/ModalBox/modal-box.scss +2 -2
  91. package/components/Nav/nav.css +82 -11
  92. package/components/Nav/nav.scss +85 -5
  93. package/components/NotificationDrawer/notification-drawer.css +19 -9
  94. package/components/NotificationDrawer/notification-drawer.scss +14 -5
  95. package/components/Page/page.css +214 -29
  96. package/components/Page/page.scss +228 -13
  97. package/components/Pagination/pagination.scss +5 -1
  98. package/components/Panel/panel.css +14 -0
  99. package/components/Panel/panel.scss +18 -0
  100. package/components/Progress/progress.css +3 -1
  101. package/components/Progress/progress.scss +3 -1
  102. package/components/ProgressStepper/progress-stepper.scss +5 -1
  103. package/components/Sidebar/sidebar.css +1 -1
  104. package/components/Sidebar/sidebar.scss +7 -3
  105. package/components/Skeleton/skeleton.css +16 -15
  106. package/components/Slider/slider.css +32 -18
  107. package/components/Switch/switch.css +4 -2
  108. package/components/Switch/switch.scss +1 -1
  109. package/components/Table/table-grid.css +28 -36
  110. package/components/Table/table-grid.scss +4 -4
  111. package/components/Table/table-tree-view.css +4 -2
  112. package/components/Table/table.css +45 -36
  113. package/components/Table/table.scss +15 -11
  114. package/components/Tabs/tabs.css +51 -33
  115. package/components/Tabs/tabs.scss +54 -26
  116. package/components/TextInputGroup/text-input-group.css +2 -2
  117. package/components/TextInputGroup/text-input-group.scss +2 -2
  118. package/components/ToggleGroup/toggle-group.css +34 -17
  119. package/components/ToggleGroup/toggle-group.scss +36 -20
  120. package/components/Toolbar/toolbar.css +47 -15
  121. package/components/Toolbar/toolbar.scss +34 -6
  122. package/components/TreeView/tree-view.css +45 -14
  123. package/components/TreeView/tree-view.scss +32 -1
  124. package/components/Wizard/wizard.css +41 -19
  125. package/components/Wizard/wizard.scss +26 -6
  126. package/components/_index.css +1936 -700
  127. package/components/_index.scss +3 -1
  128. package/docs/components/AboutModalBox/examples/AboutModalBox.md +13 -1
  129. package/docs/components/Accordion/examples/Accordion.md +392 -30
  130. package/docs/components/ActionList/examples/ActionList.md +143 -11
  131. package/docs/components/Alert/examples/Alert.md +678 -54
  132. package/docs/components/Avatar/examples/Avatar.md +4 -4
  133. package/docs/components/BackToTop/examples/BackToTop.md +13 -1
  134. package/docs/components/Banner/examples/Banner.md +65 -5
  135. package/docs/components/Brand/examples/Brand.md +2 -2
  136. package/docs/components/Breadcrumb/examples/Breadcrumb.md +299 -24
  137. package/docs/components/Button/examples/Button.md +2362 -163
  138. package/docs/components/CalendarMonth/examples/CalendarMonth.md +104 -8
  139. package/docs/components/Card/examples/Card.md +207 -4
  140. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +286 -22
  141. package/docs/components/CodeBlock/examples/CodeBlock.md +104 -8
  142. package/docs/components/CodeEditor/examples/CodeEditor.md +195 -15
  143. package/docs/components/Compass/examples/Compass.css +17 -0
  144. package/docs/components/Compass/examples/Compass.md +119 -0
  145. package/docs/components/DataList/examples/DataList.md +406 -205
  146. package/docs/components/DatePicker/examples/DatePicker.md +78 -6
  147. package/docs/components/DescriptionList/examples/DescriptionList.md +327 -27
  148. package/docs/components/Divider/examples/Divider.md +2 -2
  149. package/docs/components/DragDrop/examples/DragDrop.css +1 -1
  150. package/docs/components/Drawer/examples/Drawer.md +355 -35
  151. package/docs/components/DualListSelector/examples/DualListSelector.md +1013 -143
  152. package/docs/components/ExpandableSection/examples/ExpandableSection.md +91 -7
  153. package/docs/components/Form/examples/Form.md +78 -6
  154. package/docs/components/Hero/examples/Hero.md +25 -0
  155. package/docs/components/Icon/examples/Icon.md +92 -8
  156. package/docs/components/InlineEdit/examples/InlineEdit.md +312 -24
  157. package/docs/components/InputGroup/examples/InputGroup.md +27 -3
  158. package/docs/components/JumpLinks/examples/JumpLinks.md +54 -6
  159. package/docs/components/Label/examples/Label.md +2834 -218
  160. package/docs/components/Login/examples/Login.md +26 -2
  161. package/docs/components/Masthead/examples/masthead.md +80 -1
  162. package/docs/components/Menu/examples/Menu.md +1458 -116
  163. package/docs/components/MenuToggle/examples/MenuToggle.md +14 -5
  164. package/docs/components/ModalBox/examples/ModalBox.md +289 -25
  165. package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +156 -12
  166. package/docs/components/Nav/examples/Navigation.md +798 -58
  167. package/docs/components/NotificationDrawer/examples/NotificationDrawer.md +598 -46
  168. package/docs/components/OverflowMenu/examples/overflow-menu.md +78 -6
  169. package/docs/components/Page/examples/Page.md +72 -11
  170. package/docs/components/Pagination/examples/Pagination.md +627 -64
  171. package/docs/components/Panel/examples/Panel.md +12 -0
  172. package/docs/components/Popover/examples/Popover.md +286 -22
  173. package/docs/components/Progress/examples/Progress.md +91 -7
  174. package/docs/components/ProgressStepper/examples/ProgressStepper.md +275 -23
  175. package/docs/components/Sidebar/examples/Sidebar.md +1 -1
  176. package/docs/components/Slider/examples/Slider.md +52 -4
  177. package/docs/components/Table/examples/Table.md +876 -70
  178. package/docs/components/Tabs/examples/Tabs.md +5908 -457
  179. package/docs/components/TextInputGroup/examples/TextInputGroup.md +600 -48
  180. package/docs/components/ToggleGroup/examples/toggle-group.md +195 -15
  181. package/docs/components/Toolbar/examples/Toolbar.md +490 -44
  182. package/docs/components/TreeView/examples/TreeView.md +1390 -130
  183. package/docs/components/Wizard/examples/Wizard.md +815 -72
  184. package/docs/demos/AboutModal/examples/AboutModal.md +98 -47
  185. package/docs/demos/Alert/examples/Alert.md +359 -146
  186. package/docs/demos/BackToTop/examples/BackToTop.md +98 -47
  187. package/docs/demos/Banner/examples/Banner.md +170 -92
  188. package/docs/demos/Button/examples/Button.md +13 -1
  189. package/docs/demos/Card/examples/Card.md +963 -128
  190. package/docs/demos/CardView/examples/CardView.md +435 -252
  191. package/docs/demos/Compass/examples/Compass.md +5930 -0
  192. package/docs/demos/Dashboard/examples/Dashboard.md +648 -164
  193. package/docs/demos/DataList/examples/DataList.md +730 -225
  194. package/docs/demos/DescriptionList/examples/DescriptionList.md +279 -141
  195. package/docs/demos/Drawer/examples/Drawer.md +421 -235
  196. package/docs/demos/Form/examples/BasicForms.md +273 -21
  197. package/docs/demos/JumpLinks/examples/JumpLinks.md +518 -287
  198. package/docs/demos/Masthead/examples/Masthead.md +787 -451
  199. package/docs/demos/Modal/examples/Modal.md +588 -285
  200. package/docs/demos/Nav/examples/Nav.md +2913 -493
  201. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +1273 -310
  202. package/docs/demos/Page/examples/Page.md +1236 -689
  203. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +13 -1
  204. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +52 -4
  205. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +978 -385
  206. package/docs/demos/Skeleton/examples/Skeleton.md +85 -46
  207. package/docs/demos/Table/examples/Table.md +4531 -838
  208. package/docs/demos/Tabs/examples/Tabs.md +653 -293
  209. package/docs/demos/Toolbar/examples/Toolbar.md +584 -136
  210. package/docs/demos/Wizard/examples/Wizard.md +1165 -472
  211. package/docs/layouts/Bullseye/examples/Bullseye.css +2 -2
  212. package/docs/layouts/Bullseye/examples/Bullseye.md +2 -1
  213. package/docs/layouts/Flex/examples/Flex.css +3 -3
  214. package/docs/layouts/Flex/examples/Flex.md +3 -2
  215. package/docs/layouts/Gallery/examples/Gallery.css +2 -2
  216. package/docs/layouts/Gallery/examples/Gallery.md +4 -3
  217. package/docs/layouts/Grid/examples/Grid.css +1 -1
  218. package/docs/layouts/Grid/examples/Grid.md +6 -5
  219. package/docs/layouts/Level/examples/Level.css +3 -3
  220. package/docs/layouts/Level/examples/Level.md +2 -1
  221. package/docs/layouts/Split/examples/Split.css +1 -1
  222. package/docs/layouts/Split/examples/Split.md +2 -1
  223. package/docs/layouts/Stack/examples/Stack.css +3 -3
  224. package/docs/layouts/Stack/examples/Stack.md +2 -1
  225. package/docs/utilities/Accessibility/examples/Accessibility.md +3 -2
  226. package/docs/utilities/Alignment/examples/Alignment.css +4 -4
  227. package/docs/utilities/Alignment/examples/Alignment.md +3 -2
  228. package/docs/utilities/BackgroundColor/examples/BackgroundColor.md +5 -4
  229. package/docs/utilities/BoxShadow/examples/box-shadow.css +2 -2
  230. package/docs/utilities/BoxShadow/examples/box-shadow.md +2 -1
  231. package/docs/utilities/Display/examples/Display.css +1 -1
  232. package/docs/utilities/Display/examples/Display.md +3 -2
  233. package/docs/utilities/Flex/examples/Flex.css +7 -7
  234. package/docs/utilities/Flex/examples/Flex.md +3 -2
  235. package/docs/utilities/Float/examples/Float.css +2 -2
  236. package/docs/utilities/Float/examples/Float.md +3 -2
  237. package/docs/utilities/Sizing/examples/Sizing.md +8 -7
  238. package/docs/utilities/Spacing/examples/Spacing.css +2 -2
  239. package/docs/utilities/Spacing/examples/Spacing.md +3 -2
  240. package/docs/utilities/Text/examples/Text.md +5 -4
  241. package/icons/PfIcons/add-circle-o.svg +4 -0
  242. package/icons/PfIcons/ansible-tower.svg +4 -0
  243. package/icons/PfIcons/applications.svg +4 -0
  244. package/icons/PfIcons/arrow.svg +4 -0
  245. package/icons/PfIcons/asleep.svg +4 -0
  246. package/icons/PfIcons/attention-bell.svg +4 -0
  247. package/icons/PfIcons/automation.svg +4 -0
  248. package/icons/PfIcons/bell.svg +4 -0
  249. package/icons/PfIcons/blueprint.svg +4 -0
  250. package/icons/PfIcons/build.svg +4 -0
  251. package/icons/PfIcons/builder-image.svg +4 -0
  252. package/icons/PfIcons/bundle.svg +4 -0
  253. package/icons/PfIcons/catalog.svg +4 -0
  254. package/icons/PfIcons/chat.svg +4 -0
  255. package/icons/PfIcons/close.svg +4 -0
  256. package/icons/PfIcons/cloud-security.svg +4 -0
  257. package/icons/PfIcons/cloud-tenant.svg +4 -0
  258. package/icons/PfIcons/cluster.svg +4 -0
  259. package/icons/PfIcons/connected.svg +4 -0
  260. package/icons/PfIcons/container-node.svg +4 -0
  261. package/icons/PfIcons/cpu.svg +4 -0
  262. package/icons/PfIcons/critical-risk.svg +4 -0
  263. package/icons/PfIcons/data-processor.svg +4 -0
  264. package/icons/PfIcons/data-sink.svg +4 -0
  265. package/icons/PfIcons/data-source.svg +4 -0
  266. package/icons/PfIcons/degraded.svg +4 -0
  267. package/icons/PfIcons/disconnected.svg +4 -0
  268. package/icons/PfIcons/domain.svg +4 -0
  269. package/icons/PfIcons/edit.svg +4 -0
  270. package/icons/PfIcons/enhancement.svg +4 -0
  271. package/icons/PfIcons/enterprise.svg +4 -0
  272. package/icons/PfIcons/equalizer.svg +4 -0
  273. package/icons/PfIcons/error-circle-o.svg +4 -0
  274. package/icons/PfIcons/export.svg +4 -0
  275. package/icons/PfIcons/filter.svg +4 -0
  276. package/icons/PfIcons/flavor.svg +4 -0
  277. package/icons/PfIcons/folder-close.svg +4 -0
  278. package/icons/PfIcons/folder-open.svg +4 -0
  279. package/icons/PfIcons/globe-route.svg +4 -0
  280. package/icons/PfIcons/help.svg +4 -0
  281. package/icons/PfIcons/history.svg +4 -0
  282. package/icons/PfIcons/home.svg +4 -0
  283. package/icons/PfIcons/import.svg +4 -0
  284. package/icons/PfIcons/in-progress.svg +4 -0
  285. package/icons/PfIcons/info.svg +4 -0
  286. package/icons/PfIcons/infrastructure.svg +4 -0
  287. package/icons/PfIcons/integration.svg +4 -0
  288. package/icons/PfIcons/key.svg +4 -0
  289. package/icons/PfIcons/locked.svg +4 -0
  290. package/icons/PfIcons/maintenance.svg +4 -0
  291. package/icons/PfIcons/memory.svg +4 -0
  292. package/icons/PfIcons/messages.svg +4 -0
  293. package/icons/PfIcons/middleware.svg +4 -0
  294. package/icons/PfIcons/migration.svg +4 -0
  295. package/icons/PfIcons/module.svg +4 -0
  296. package/icons/PfIcons/monitoring.svg +4 -0
  297. package/icons/PfIcons/multicluster.svg +4 -0
  298. package/icons/PfIcons/namespaces.svg +4 -0
  299. package/icons/PfIcons/network.svg +4 -0
  300. package/icons/PfIcons/new-process.svg +4 -0
  301. package/icons/PfIcons/not-started.svg +4 -0
  302. package/icons/PfIcons/off.svg +4 -0
  303. package/icons/PfIcons/ok.svg +4 -0
  304. package/icons/PfIcons/on-running.svg +4 -0
  305. package/icons/PfIcons/on.svg +4 -0
  306. package/icons/PfIcons/open-drawer-right.svg +4 -0
  307. package/icons/PfIcons/openshift.svg +4 -0
  308. package/icons/PfIcons/openstack.svg +4 -0
  309. package/icons/PfIcons/optimize.svg +4 -0
  310. package/icons/PfIcons/orders.svg +4 -0
  311. package/icons/PfIcons/os-image.svg +4 -0
  312. package/icons/PfIcons/package.svg +4 -0
  313. package/icons/PfIcons/panel-close.svg +4 -0
  314. package/icons/PfIcons/panel-open.svg +4 -0
  315. package/icons/PfIcons/paused.svg +4 -0
  316. package/icons/PfIcons/pending.svg +4 -0
  317. package/icons/PfIcons/pficon-dragdrop.svg +4 -0
  318. package/icons/PfIcons/pficon-history.svg +4 -0
  319. package/icons/PfIcons/pficon-network-range.svg +4 -0
  320. package/icons/PfIcons/pficon-satellite.svg +4 -0
  321. package/icons/PfIcons/pficon-sort-common-asc.svg +4 -0
  322. package/icons/PfIcons/pficon-sort-common-desc.svg +4 -0
  323. package/icons/PfIcons/pficon-template.svg +4 -0
  324. package/icons/PfIcons/pficon-vcenter.svg +4 -0
  325. package/icons/PfIcons/plugged.svg +4 -0
  326. package/icons/PfIcons/port.svg +4 -0
  327. package/icons/PfIcons/print.svg +4 -0
  328. package/icons/PfIcons/private.svg +4 -0
  329. package/icons/PfIcons/process-automation.svg +4 -0
  330. package/icons/PfIcons/project.svg +4 -0
  331. package/icons/PfIcons/rebalance.svg +4 -0
  332. package/icons/PfIcons/rebooting.svg +4 -0
  333. package/icons/PfIcons/regions.svg +4 -0
  334. package/icons/PfIcons/registry.svg +4 -0
  335. package/icons/PfIcons/remove2.svg +4 -0
  336. package/icons/PfIcons/replicator.svg +4 -0
  337. package/icons/PfIcons/repository.svg +4 -0
  338. package/icons/PfIcons/resource-pool.svg +4 -0
  339. package/icons/PfIcons/resources-almost-empty.svg +4 -0
  340. package/icons/PfIcons/resources-almost-full.svg +4 -0
  341. package/icons/PfIcons/resources-empty.svg +4 -0
  342. package/icons/PfIcons/resources-full.svg +4 -0
  343. package/icons/PfIcons/running.svg +4 -0
  344. package/icons/PfIcons/save.svg +4 -0
  345. package/icons/PfIcons/screen.svg +4 -0
  346. package/icons/PfIcons/security.svg +4 -0
  347. package/icons/PfIcons/server-group.svg +4 -0
  348. package/icons/PfIcons/server.svg +4 -0
  349. package/icons/PfIcons/service-catalog.svg +4 -0
  350. package/icons/PfIcons/service.svg +4 -0
  351. package/icons/PfIcons/services.svg +4 -0
  352. package/icons/PfIcons/severity-critical.svg +4 -0
  353. package/icons/PfIcons/severity-important.svg +4 -0
  354. package/icons/PfIcons/severity-minor.svg +4 -0
  355. package/icons/PfIcons/severity-moderate.svg +4 -0
  356. package/icons/PfIcons/severity-none.svg +4 -0
  357. package/icons/PfIcons/severity-undefined.svg +4 -0
  358. package/icons/PfIcons/spinner.svg +4 -0
  359. package/icons/PfIcons/spinner2.svg +4 -0
  360. package/icons/PfIcons/storage-domain.svg +4 -0
  361. package/icons/PfIcons/task.svg +4 -0
  362. package/icons/PfIcons/tenant.svg +4 -0
  363. package/icons/PfIcons/thumb-tack.svg +4 -0
  364. package/icons/PfIcons/topology.svg +4 -0
  365. package/icons/PfIcons/treeview.svg +4 -0
  366. package/icons/PfIcons/trend-down.svg +4 -0
  367. package/icons/PfIcons/trend-up.svg +4 -0
  368. package/icons/PfIcons/unknown.svg +4 -0
  369. package/icons/PfIcons/unlocked.svg +4 -0
  370. package/icons/PfIcons/unplugged.svg +4 -0
  371. package/icons/PfIcons/user.svg +4 -0
  372. package/icons/PfIcons/users.svg +4 -0
  373. package/icons/PfIcons/virtual-machine.svg +4 -0
  374. package/icons/PfIcons/volume.svg +4 -0
  375. package/icons/PfIcons/warning-triangle.svg +4 -0
  376. package/icons/PfIcons/zone.svg +4 -0
  377. package/layouts/Flex/flex.scss +83 -19
  378. package/layouts/Gallery/gallery.css +6 -2
  379. package/layouts/_index.css +6 -2
  380. package/package.json +34 -16
  381. package/patternfly-base-no-globals.css +965 -491
  382. package/patternfly-base.css +972 -491
  383. package/patternfly-charts.css +3 -3
  384. package/patternfly-no-globals.css +2801 -1070
  385. package/patternfly.css +2808 -1070
  386. package/patternfly.min.css +1 -1
  387. package/patternfly.min.css.map +1 -1
  388. package/patternfly.scss +27 -0
  389. package/sass-utilities/functions.scss +32 -25
  390. package/sass-utilities/mixins.scss +36 -20
  391. package/sass-utilities/namespaces-components.scss +6 -0
  392. package/sass-utilities/scss-variables.scss +3 -0
package/docs/demos/Dashboard/examples/Dashboard.md CHANGED
@@ -13,7 +13,8 @@ cssPrefix: pf-d-dashboard
13
13
  <span class="pf-v6-c-button__text">Skip to content</span>
14
14
  </a>
15
15
  </div>
16
- <header class="pf-v6-c-masthead" id="dashboard-demo-masthead">
16
+
17
+ <header class="pf-v6-c-masthead" id="dashboard-demo-docked">
17
18
  <div class="pf-v6-c-masthead__main">
18
19
  <span class="pf-v6-c-masthead__toggle">
19
20
  <button
@@ -55,7 +56,7 @@ cssPrefix: pf-d-dashboard
55
56
  y1="2.25860997e-13%"
56
57
  x2="32%"
57
58
  y2="100%"
58
- id="linearGradient-dashboard-demo-masthead"
59
+ id="linearGradient-dashboard-demo-docked"
59
60
  >
60
61
  <stop stop-color="#2B9AF3" offset="0%" />
61
62
  <stop
@@ -109,11 +110,11 @@ cssPrefix: pf-d-dashboard
109
110
  />
110
111
  <path
111
112
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
112
- fill="url(#linearGradient-dashboard-demo-masthead)"
113
+ fill="url(#linearGradient-dashboard-demo-docked)"
113
114
  />
114
115
  <path
115
116
  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"
116
- fill="url(#linearGradient-dashboard-demo-masthead)"
117
+ fill="url(#linearGradient-dashboard-demo-docked)"
117
118
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
118
119
  />
119
120
  </g>
@@ -125,7 +126,7 @@ cssPrefix: pf-d-dashboard
125
126
  <div class="pf-v6-c-masthead__content">
126
127
  <div
127
128
  class="pf-v6-c-toolbar pf-m-static"
128
- id="dashboard-demo-masthead-toolbar"
129
+ id="dashboard-demo-docked-toolbar"
129
130
  >
130
131
  <div class="pf-v6-c-toolbar__content">
131
132
  <div class="pf-v6-c-toolbar__content-section">
@@ -192,44 +193,46 @@ cssPrefix: pf-d-dashboard
192
193
  </div>
193
194
  </header>
194
195
  <div class="pf-v6-c-page__sidebar">
195
- <div class="pf-v6-c-page__sidebar-body">
196
- <nav
197
- class="pf-v6-c-nav"
198
- id="dashboard-demo-primary-nav"
199
- aria-label="Global"
200
- >
201
- <ul class="pf-v6-c-nav__list" role="list">
202
- <li class="pf-v6-c-nav__item">
203
- <a href="#" class="pf-v6-c-nav__link">
204
- <span class="pf-v6-c-nav__link-text">System panel</span>
205
- </a>
206
- </li>
207
- <li class="pf-v6-c-nav__item">
208
- <a
209
- href="#"
210
- class="pf-v6-c-nav__link pf-m-current"
211
- aria-current="page"
212
- >
213
- <span class="pf-v6-c-nav__link-text">Policy</span>
214
- </a>
215
- </li>
216
- <li class="pf-v6-c-nav__item">
217
- <a href="#" class="pf-v6-c-nav__link">
218
- <span class="pf-v6-c-nav__link-text">Authentication</span>
219
- </a>
220
- </li>
221
- <li class="pf-v6-c-nav__item">
222
- <a href="#" class="pf-v6-c-nav__link">
223
- <span class="pf-v6-c-nav__link-text">Network services</span>
224
- </a>
225
- </li>
226
- <li class="pf-v6-c-nav__item">
227
- <a href="#" class="pf-v6-c-nav__link">
228
- <span class="pf-v6-c-nav__link-text">Server</span>
229
- </a>
230
- </li>
231
- </ul>
232
- </nav>
196
+ <div class="pf-v6-c-page__sidebar-main">
197
+ <div class="pf-v6-c-page__sidebar-body">
198
+ <nav
199
+ class="pf-v6-c-nav"
200
+ id="dashboard-demo-primary-nav"
201
+ aria-label="Global"
202
+ >
203
+ <ul class="pf-v6-c-nav__list" role="list">
204
+ <li class="pf-v6-c-nav__item">
205
+ <a href="#" class="pf-v6-c-nav__link">
206
+ <span class="pf-v6-c-nav__link-text">System panel</span>
207
+ </a>
208
+ </li>
209
+ <li class="pf-v6-c-nav__item">
210
+ <a
211
+ href="#"
212
+ class="pf-v6-c-nav__link pf-m-current"
213
+ aria-current="page"
214
+ >
215
+ <span class="pf-v6-c-nav__link-text">Policy</span>
216
+ </a>
217
+ </li>
218
+ <li class="pf-v6-c-nav__item">
219
+ <a href="#" class="pf-v6-c-nav__link">
220
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
221
+ </a>
222
+ </li>
223
+ <li class="pf-v6-c-nav__item">
224
+ <a href="#" class="pf-v6-c-nav__link">
225
+ <span class="pf-v6-c-nav__link-text">Network services</span>
226
+ </a>
227
+ </li>
228
+ <li class="pf-v6-c-nav__item">
229
+ <a href="#" class="pf-v6-c-nav__link">
230
+ <span class="pf-v6-c-nav__link-text">Server</span>
231
+ </a>
232
+ </li>
233
+ </ul>
234
+ </nav>
235
+ </div>
233
236
  </div>
234
237
  </div>
235
238
  <div class="pf-v6-c-page__main-container" tabindex="-1">
@@ -247,21 +250,57 @@ cssPrefix: pf-d-dashboard
247
250
  </li>
248
251
  <li class="pf-v6-c-breadcrumb__item">
249
252
  <span class="pf-v6-c-breadcrumb__item-divider">
250
- <i class="fas fa-angle-right" aria-hidden="true"></i>
253
+ <svg
254
+ class="pf-v6-svg"
255
+ viewBox="0 0 20 20"
256
+ fill="currentColor"
257
+ aria-hidden="true"
258
+ role="img"
259
+ width="1em"
260
+ height="1em"
261
+ >
262
+ <path
263
+ 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"
264
+ />
265
+ </svg>
251
266
  </span>
252
267
 
253
268
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
254
269
  </li>
255
270
  <li class="pf-v6-c-breadcrumb__item">
256
271
  <span class="pf-v6-c-breadcrumb__item-divider">
257
- <i class="fas fa-angle-right" aria-hidden="true"></i>
272
+ <svg
273
+ class="pf-v6-svg"
274
+ viewBox="0 0 20 20"
275
+ fill="currentColor"
276
+ aria-hidden="true"
277
+ role="img"
278
+ width="1em"
279
+ height="1em"
280
+ >
281
+ <path
282
+ 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"
283
+ />
284
+ </svg>
258
285
  </span>
259
286
 
260
287
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
261
288
  </li>
262
289
  <li class="pf-v6-c-breadcrumb__item">
263
290
  <span class="pf-v6-c-breadcrumb__item-divider">
264
- <i class="fas fa-angle-right" aria-hidden="true"></i>
291
+ <svg
292
+ class="pf-v6-svg"
293
+ viewBox="0 0 20 20"
294
+ fill="currentColor"
295
+ aria-hidden="true"
296
+ role="img"
297
+ width="1em"
298
+ height="1em"
299
+ >
300
+ <path
301
+ 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"
302
+ />
303
+ </svg>
265
304
  </span>
266
305
 
267
306
  <a
@@ -295,7 +334,19 @@ cssPrefix: pf-d-dashboard
295
334
  >
296
335
  <span class="pf-v6-c-button__icon pf-m-start">
297
336
  <span class="pf-v6-c-card__header-toggle-icon">
298
- <i class="fas fa-angle-right" aria-hidden="true"></i>
337
+ <svg
338
+ class="pf-v6-svg"
339
+ viewBox="0 0 20 20"
340
+ fill="currentColor"
341
+ aria-hidden="true"
342
+ role="img"
343
+ width="1em"
344
+ height="1em"
345
+ >
346
+ <path
347
+ d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
348
+ />
349
+ </svg>
299
350
  </span>
300
351
  </span>
301
352
  </button>
@@ -346,10 +397,19 @@ cssPrefix: pf-d-dashboard
346
397
  >
347
398
  <span class="pf-v6-c-label__content">
348
399
  <span class="pf-v6-c-label__icon">
349
- <i
350
- class="pf-v6-pficon pf-v6-pficon-port"
400
+ <svg
401
+ class="pf-v6-svg"
402
+ viewBox="0 0 32 32"
403
+ fill="currentColor"
351
404
  aria-hidden="true"
352
- ></i>
405
+ role="img"
406
+ width="1em"
407
+ height="1em"
408
+ >
409
+ <path
410
+ d="M23 23.917a1.62 1.62 0 0 1-1.149-.475L9 10.59l-6.204 6.205a1.127 1.127 0 0 1-1.592-1.592L7.85 8.557a1.629 1.629 0 0 1 2.299 0L23 21.409l6.204-6.205a1.127 1.127 0 0 1 1.592 1.592l-6.646 6.646a1.624 1.624 0 0 1-1.149.475Z"
411
+ />
412
+ </svg>
353
413
  </span>
354
414
  <span
355
415
  class="pf-v6-c-label__text"
@@ -383,11 +443,25 @@ cssPrefix: pf-d-dashboard
383
443
  class="pf-v6-l-flex pf-m-space-items-sm pf-m-align-items-center pf-m-nowrap"
384
444
  style="row-gap: var(--pf-6-global--spacer--md);"
385
445
  >
386
- <i
387
- class="pf-v6-pficon pf-v6-pficon-on pf-v6-u-color-400"
388
- style="line-height: 1"
389
- aria-hidden="true"
390
- ></i>
446
+ <span class="pf-v6-c-icon">
447
+ <span
448
+ class="pf-v6-c-icon__content pf-m-success"
449
+ >
450
+ <svg
451
+ class="pf-v6-svg"
452
+ viewBox="0 0 32 32"
453
+ fill="currentColor"
454
+ aria-hidden="true"
455
+ role="img"
456
+ width="1em"
457
+ height="1em"
458
+ >
459
+ <path
460
+ d="M19 16c0 1.654-1.346 3-3 3s-3-1.346-3-3 1.346-3 3-3 3 1.346 3 3ZM3 16c0-3.472 1.353-6.737 3.808-9.192a.999.999 0 1 0-1.414-1.414C2.561 8.227 1 11.994 1 16s1.561 7.773 4.394 10.606a.997.997 0 0 0 1.414 0 .999.999 0 0 0 0-1.414A12.918 12.918 0 0 1 3 16ZM26.606 5.394a.999.999 0 1 0-1.414 1.414C27.647 9.264 29 12.528 29 16s-1.353 6.737-3.808 9.192a.999.999 0 1 0 1.414 1.414C29.439 23.773 31 20.006 31 16s-1.561-7.773-4.394-10.606ZM11.05 9.636a.999.999 0 0 0-1.414 0c-3.509 3.509-3.509 9.219 0 12.728a.997.997 0 0 0 1.414 0 .999.999 0 0 0 0-1.414 7.008 7.008 0 0 1 0-9.899.999.999 0 0 0 0-1.414Zm11.314 0a.999.999 0 1 0-1.414 1.414 7.008 7.008 0 0 1 0 9.899.999.999 0 1 0 1.414 1.414c3.509-3.509 3.509-9.219 0-12.728Z"
461
+ />
462
+ </svg>
463
+ </span>
464
+ </span>
391
465
  <p class="pf-v6-u-color-200">
392
466
  System reboot
393
467
  <b class="pf-v6-u-color-100">is not</b> required
@@ -403,7 +477,19 @@ cssPrefix: pf-d-dashboard
403
477
  >
404
478
  <span class="pf-v6-c-button__text">View pathway</span>
405
479
  <span class="pf-v6-c-button__icon pf-m-end">
406
- <i class="fas fa-arrow-right" aria-hidden="true"></i>
480
+ <svg
481
+ class="pf-v6-svg"
482
+ viewBox="0 0 448 512"
483
+ fill="currentColor"
484
+ aria-hidden="true"
485
+ role="img"
486
+ width="1em"
487
+ height="1em"
488
+ >
489
+ <path
490
+ d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"
491
+ />
492
+ </svg>
407
493
  </span>
408
494
  </a>
409
495
  </div>
@@ -436,10 +522,19 @@ cssPrefix: pf-d-dashboard
436
522
  >
437
523
  <span class="pf-v6-c-label__content">
438
524
  <span class="pf-v6-c-label__icon">
439
- <i
440
- class="fas fa-cube"
525
+ <svg
526
+ class="pf-v6-svg"
527
+ viewBox="0 0 32 32"
528
+ fill="currentColor"
441
529
  aria-hidden="true"
442
- ></i>
530
+ role="img"
531
+ width="1em"
532
+ height="1em"
533
+ >
534
+ <path
535
+ d="M16 30.856a1 1 0 0 1-.5-.134l-12-6.929a1 1 0 0 1-.5-.866V9.072c0-.357.19-.688.5-.866l12-6.929a1.003 1.003 0 0 1 1 0l12 6.929a1 1 0 0 1 .5.866v13.855c0 .357-.19.688-.5.866l-12 6.929a1 1 0 0 1-.5.134ZM5 22.351l11 6.352 11-6.352V9.65L16 3.298 5 9.65v12.701Zm23 .577h.01H28Z"
536
+ />
537
+ </svg>
443
538
  </span>
444
539
  <span
445
540
  class="pf-v6-c-label__text"
@@ -473,11 +568,23 @@ cssPrefix: pf-d-dashboard
473
568
  class="pf-v6-l-flex pf-m-space-items-sm pf-m-align-items-center pf-m-nowrap"
474
569
  style="row-gap: var(--pf-6-global--spacer--md);"
475
570
  >
476
- <i
477
- class="pf-v6-pficon pf-v6-pficon-on pf-v6-u-danger-color-100"
478
- style="line-height: 1"
479
- aria-hidden="true"
480
- ></i>
571
+ <span class="pf-v6-c-icon">
572
+ <span class="pf-v6-c-icon__content pf-m-danger">
573
+ <svg
574
+ class="pf-v6-svg"
575
+ viewBox="0 0 32 32"
576
+ fill="currentColor"
577
+ aria-hidden="true"
578
+ role="img"
579
+ width="1em"
580
+ height="1em"
581
+ >
582
+ <path
583
+ d="M19 16c0 1.654-1.346 3-3 3s-3-1.346-3-3 1.346-3 3-3 3 1.346 3 3ZM3 16c0-3.472 1.353-6.737 3.808-9.192a.999.999 0 1 0-1.414-1.414C2.561 8.227 1 11.994 1 16s1.561 7.773 4.394 10.606a.997.997 0 0 0 1.414 0 .999.999 0 0 0 0-1.414A12.918 12.918 0 0 1 3 16ZM26.606 5.394a.999.999 0 1 0-1.414 1.414C27.647 9.264 29 12.528 29 16s-1.353 6.737-3.808 9.192a.999.999 0 1 0 1.414 1.414C29.439 23.773 31 20.006 31 16s-1.561-7.773-4.394-10.606ZM11.05 9.636a.999.999 0 0 0-1.414 0c-3.509 3.509-3.509 9.219 0 12.728a.997.997 0 0 0 1.414 0 .999.999 0 0 0 0-1.414 7.008 7.008 0 0 1 0-9.899.999.999 0 0 0 0-1.414Zm11.314 0a.999.999 0 1 0-1.414 1.414 7.008 7.008 0 0 1 0 9.899.999.999 0 1 0 1.414 1.414c3.509-3.509 3.509-9.219 0-12.728Z"
584
+ />
585
+ </svg>
586
+ </span>
587
+ </span>
481
588
  <p class="pf-v6-u-color-200">
482
589
  System reboot
483
590
  <b class="pf-v6-u-color-100">is</b> required
@@ -493,7 +600,19 @@ cssPrefix: pf-d-dashboard
493
600
  >
494
601
  <span class="pf-v6-c-button__text">View pathway</span>
495
602
  <span class="pf-v6-c-button__icon pf-m-end">
496
- <i class="fas fa-arrow-right" aria-hidden="true"></i>
603
+ <svg
604
+ class="pf-v6-svg"
605
+ viewBox="0 0 448 512"
606
+ fill="currentColor"
607
+ aria-hidden="true"
608
+ role="img"
609
+ width="1em"
610
+ height="1em"
611
+ >
612
+ <path
613
+ d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"
614
+ />
615
+ </svg>
497
616
  </span>
498
617
  </a>
499
618
  </div>
@@ -526,10 +645,19 @@ cssPrefix: pf-d-dashboard
526
645
  >
527
646
  <span class="pf-v6-c-label__content">
528
647
  <span class="pf-v6-c-label__icon">
529
- <i
530
- class="pf-v6-pficon pf-v6-pficon-automation"
648
+ <svg
649
+ class="pf-v6-svg"
650
+ viewBox="0 0 32 32"
651
+ fill="currentColor"
531
652
  aria-hidden="true"
532
- ></i>
653
+ role="img"
654
+ width="1em"
655
+ height="1em"
656
+ >
657
+ <path
658
+ d="M22 17v3.5c0 .827-.673 1.5-1.5 1.5H17a1 1 0 1 1 0-2h1.596l-3.302-3.292s-3.186-3.174-4.109-4.098c-.905-.906-2.109-1.404-3.39-1.404s-2.485.498-3.391 1.404C3.499 13.515 3 14.719 3 16s.499 2.484 1.404 3.39c.905.906 2.109 1.404 3.391 1.404s2.484-.498 3.39-1.404l1.109-1.107a.999.999 0 1 1 1.412 1.416l-1.107 1.105c-1.283 1.284-2.989 1.99-4.804 1.99s-3.521-.706-4.805-1.99C1.707 19.521 1 17.815 1 16s.707-3.521 1.99-4.804c1.283-1.284 2.989-1.99 4.805-1.99s3.521.706 4.804 1.99c.924.924 4.107 4.096 4.107 4.096L20 18.576V17a1 1 0 1 1 2 0Zm7.01-5.804c-1.283-1.284-2.989-1.991-4.805-1.991s-3.521.707-4.804 1.991L18.295 12.3a.999.999 0 1 0 1.41 1.418l1.11-1.108c.905-.906 2.109-1.405 3.39-1.405s2.485.499 3.391 1.405C28.501 13.515 29 14.719 29 16s-.499 2.484-1.404 3.39a4.748 4.748 0 0 1-2.732 1.36 1 1 0 1 0 .273 1.98 6.727 6.727 0 0 0 3.873-1.927C30.293 19.52 31 17.814 31 15.999s-.707-3.521-1.99-4.804Z"
659
+ />
660
+ </svg>
533
661
  </span>
534
662
  <span
535
663
  class="pf-v6-c-label__text"
@@ -563,11 +691,25 @@ cssPrefix: pf-d-dashboard
563
691
  class="pf-v6-l-flex pf-m-space-items-sm pf-m-align-items-center pf-m-nowrap"
564
692
  style="row-gap: var(--pf-6-global--spacer--md);"
565
693
  >
566
- <i
567
- class="pf-v6-pficon pf-v6-pficon-on pf-v6-u-color-400"
568
- style="line-height: 1"
569
- aria-hidden="true"
570
- ></i>
694
+ <span class="pf-v6-c-icon">
695
+ <span
696
+ class="pf-v6-c-icon__content pf-m-success"
697
+ >
698
+ <svg
699
+ class="pf-v6-svg"
700
+ viewBox="0 0 32 32"
701
+ fill="currentColor"
702
+ aria-hidden="true"
703
+ role="img"
704
+ width="1em"
705
+ height="1em"
706
+ >
707
+ <path
708
+ d="M19 16c0 1.654-1.346 3-3 3s-3-1.346-3-3 1.346-3 3-3 3 1.346 3 3ZM3 16c0-3.472 1.353-6.737 3.808-9.192a.999.999 0 1 0-1.414-1.414C2.561 8.227 1 11.994 1 16s1.561 7.773 4.394 10.606a.997.997 0 0 0 1.414 0 .999.999 0 0 0 0-1.414A12.918 12.918 0 0 1 3 16ZM26.606 5.394a.999.999 0 1 0-1.414 1.414C27.647 9.264 29 12.528 29 16s-1.353 6.737-3.808 9.192a.999.999 0 1 0 1.414 1.414C29.439 23.773 31 20.006 31 16s-1.561-7.773-4.394-10.606ZM11.05 9.636a.999.999 0 0 0-1.414 0c-3.509 3.509-3.509 9.219 0 12.728a.997.997 0 0 0 1.414 0 .999.999 0 0 0 0-1.414 7.008 7.008 0 0 1 0-9.899.999.999 0 0 0 0-1.414Zm11.314 0a.999.999 0 1 0-1.414 1.414 7.008 7.008 0 0 1 0 9.899.999.999 0 1 0 1.414 1.414c3.509-3.509 3.509-9.219 0-12.728Z"
709
+ />
710
+ </svg>
711
+ </span>
712
+ </span>
571
713
  <p class="pf-v6-u-color-200">
572
714
  System reboot
573
715
  <b class="pf-v6-u-color-100">is not</b> required
@@ -583,7 +725,19 @@ cssPrefix: pf-d-dashboard
583
725
  >
584
726
  <span class="pf-v6-c-button__text">View pathway</span>
585
727
  <span class="pf-v6-c-button__icon pf-m-end">
586
- <i class="fas fa-arrow-right" aria-hidden="true"></i>
728
+ <svg
729
+ class="pf-v6-svg"
730
+ viewBox="0 0 448 512"
731
+ fill="currentColor"
732
+ aria-hidden="true"
733
+ role="img"
734
+ width="1em"
735
+ height="1em"
736
+ >
737
+ <path
738
+ d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"
739
+ />
740
+ </svg>
587
741
  </span>
588
742
  </a>
589
743
  </div>
@@ -597,10 +751,7 @@ cssPrefix: pf-d-dashboard
597
751
  style="--pf-v6-l-grid--item--Order-on-lg:3"
598
752
  >
599
753
  <div class="pf-v6-l-flex pf-m-column">
600
- <div
601
- class="pf-v6-c-card pf-m-expanded"
602
- id="dashboard-demo-status-card-1"
603
- >
754
+ <div class="pf-v6-c-card" id="dashboard-demo-status-card-1">
604
755
  <div class="pf-v6-c-card__header">
605
756
  <h2 class="pf-v6-c-title pf-m-xl">Status</h2>
606
757
  </div>
@@ -611,10 +762,23 @@ cssPrefix: pf-d-dashboard
611
762
  >
612
763
  <div class="pf-v6-l-flex pf-m-space-items-sm pf-m-nowrap">
613
764
  <div class="pf-v6-l-flex__item">
614
- <i
615
- class="fas fa-check-circle pf-v6-u-success-color-100"
616
- aria-hidden="true"
617
- ></i>
765
+ <span class="pf-v6-c-icon">
766
+ <span class="pf-v6-c-icon__content pf-m-success">
767
+ <svg
768
+ class="pf-v6-svg"
769
+ viewBox="0 0 32 32"
770
+ fill="currentColor"
771
+ aria-hidden="true"
772
+ role="img"
773
+ width="1em"
774
+ height="1em"
775
+ >
776
+ <path
777
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm7.795 11.795-8.646 8.646c-.317.317-.733.475-1.149.475s-.832-.158-1.149-.475l-4.646-4.646a1.126 1.126 0 0 1 1.591-1.591l4.205 4.205 8.205-8.205a1.126 1.126 0 0 1 1.591 1.591Z"
778
+ />
779
+ </svg>
780
+ </span>
781
+ </span>
618
782
  </div>
619
783
  <div class="pf-v6-l-flex__item">
620
784
  <span>Cluster</span>
@@ -622,10 +786,23 @@ cssPrefix: pf-d-dashboard
622
786
  </div>
623
787
  <div class="pf-v6-l-flex pf-m-space-items-sm pf-m-nowrap">
624
788
  <div class="pf-v6-l-flex__item">
625
- <i
626
- class="fas fa-exclamation-circle pf-v6-u-danger-color-100"
627
- aria-hidden="true"
628
- ></i>
789
+ <span class="pf-v6-c-icon">
790
+ <span class="pf-v6-c-icon__content pf-m-danger">
791
+ <svg
792
+ class="pf-v6-svg"
793
+ viewBox="0 0 32 32"
794
+ fill="currentColor"
795
+ aria-hidden="true"
796
+ role="img"
797
+ width="1em"
798
+ height="1em"
799
+ >
800
+ <path
801
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm-1.5 8a1.5 1.5 0 1 1 3 0v7a1.5 1.5 0 1 1-3 0V9ZM16 25.001a2 2 0 1 1-.001-3.999A2 2 0 0 1 16 25.001Z"
802
+ />
803
+ </svg>
804
+ </span>
805
+ </span>
629
806
  </div>
630
807
  <div class="pf-v6-l-flex__item pf-v6-u-text-nowrap">
631
808
  <span class="popover-parent">
@@ -635,10 +812,23 @@ cssPrefix: pf-d-dashboard
635
812
  </div>
636
813
  <div class="pf-v6-l-flex pf-m-space-items-sm pf-m-nowrap">
637
814
  <div class="pf-v6-l-flex__item pf-v6-u-text-nowrap">
638
- <i
639
- class="fas fa-exclamation-circle pf-v6-u-danger-color-100"
640
- aria-hidden="true"
641
- ></i>
815
+ <span class="pf-v6-c-icon">
816
+ <span class="pf-v6-c-icon__content pf-m-danger">
817
+ <svg
818
+ class="pf-v6-svg"
819
+ viewBox="0 0 32 32"
820
+ fill="currentColor"
821
+ aria-hidden="true"
822
+ role="img"
823
+ width="1em"
824
+ height="1em"
825
+ >
826
+ <path
827
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm-1.5 8a1.5 1.5 0 1 1 3 0v7a1.5 1.5 0 1 1-3 0V9ZM16 25.001a2 2 0 1 1-.001-3.999A2 2 0 0 1 16 25.001Z"
828
+ />
829
+ </svg>
830
+ </span>
831
+ </span>
642
832
  </div>
643
833
  <div
644
834
  class="pf-v6-l-flex pf-m-column pf-m-space-items-none"
@@ -653,10 +843,23 @@ cssPrefix: pf-d-dashboard
653
843
  </div>
654
844
  <div class="pf-v6-l-flex pf-m-space-items-sm pf-m-nowrap">
655
845
  <div class="pf-v6-l-flex__item">
656
- <i
657
- class="fas fa-check-circle pf-v6-u-success-color-100"
658
- aria-hidden="true"
659
- ></i>
846
+ <span class="pf-v6-c-icon">
847
+ <span class="pf-v6-c-icon__content pf-m-success">
848
+ <svg
849
+ class="pf-v6-svg"
850
+ viewBox="0 0 32 32"
851
+ fill="currentColor"
852
+ aria-hidden="true"
853
+ role="img"
854
+ width="1em"
855
+ height="1em"
856
+ >
857
+ <path
858
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm7.795 11.795-8.646 8.646c-.317.317-.733.475-1.149.475s-.832-.158-1.149-.475l-4.646-4.646a1.126 1.126 0 0 1 1.591-1.591l4.205 4.205 8.205-8.205a1.126 1.126 0 0 1 1.591 1.591Z"
859
+ />
860
+ </svg>
861
+ </span>
862
+ </span>
660
863
  </div>
661
864
  <div
662
865
  class="pf-v6-l-flex pf-m-column pf-m-space-items-none"
@@ -671,10 +874,23 @@ cssPrefix: pf-d-dashboard
671
874
  </div>
672
875
  <div class="pf-v6-l-flex pf-m-space-items-sm pf-m-nowrap">
673
876
  <div class="pf-v6-l-flex__item">
674
- <i
675
- class="fas fa-check-circle pf-v6-u-success-color-100"
676
- aria-hidden="true"
677
- ></i>
877
+ <span class="pf-v6-c-icon">
878
+ <span class="pf-v6-c-icon__content pf-m-success">
879
+ <svg
880
+ class="pf-v6-svg"
881
+ viewBox="0 0 32 32"
882
+ fill="currentColor"
883
+ aria-hidden="true"
884
+ role="img"
885
+ width="1em"
886
+ height="1em"
887
+ >
888
+ <path
889
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm7.795 11.795-8.646 8.646c-.317.317-.733.475-1.149.475s-.832-.158-1.149-.475l-4.646-4.646a1.126 1.126 0 0 1 1.591-1.591l4.205 4.205 8.205-8.205a1.126 1.126 0 0 1 1.591 1.591Z"
890
+ />
891
+ </svg>
892
+ </span>
893
+ </span>
678
894
  </div>
679
895
  <div
680
896
  class="pf-v6-l-flex pf-m-column pf-m-space-items-none"
@@ -689,10 +905,23 @@ cssPrefix: pf-d-dashboard
689
905
  </div>
690
906
  <div class="pf-v6-l-flex pf-m-space-items-sm pf-m-nowrap">
691
907
  <div class="pf-v6-l-flex__item">
692
- <i
693
- class="fas fa-check-circle pf-v6-u-success-color-100"
694
- aria-hidden="true"
695
- ></i>
908
+ <span class="pf-v6-c-icon">
909
+ <span class="pf-v6-c-icon__content pf-m-success">
910
+ <svg
911
+ class="pf-v6-svg"
912
+ viewBox="0 0 32 32"
913
+ fill="currentColor"
914
+ aria-hidden="true"
915
+ role="img"
916
+ width="1em"
917
+ height="1em"
918
+ >
919
+ <path
920
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm7.795 11.795-8.646 8.646c-.317.317-.733.475-1.149.475s-.832-.158-1.149-.475l-4.646-4.646a1.126 1.126 0 0 1 1.591-1.591l4.205 4.205 8.205-8.205a1.126 1.126 0 0 1 1.591 1.591Z"
921
+ />
922
+ </svg>
923
+ </span>
924
+ </span>
696
925
  </div>
697
926
  <div
698
927
  class="pf-v6-l-flex pf-m-column pf-m-space-items-none"
@@ -704,10 +933,23 @@ cssPrefix: pf-d-dashboard
704
933
  </div>
705
934
  <div class="pf-v6-l-flex pf-m-space-items-sm pf-m-nowrap">
706
935
  <div class="pf-v6-l-flex__item">
707
- <i
708
- class="fas fa-check-circle pf-v6-u-success-color-100"
709
- aria-hidden="true"
710
- ></i>
936
+ <span class="pf-v6-c-icon">
937
+ <span class="pf-v6-c-icon__content pf-m-success">
938
+ <svg
939
+ class="pf-v6-svg"
940
+ viewBox="0 0 32 32"
941
+ fill="currentColor"
942
+ aria-hidden="true"
943
+ role="img"
944
+ width="1em"
945
+ height="1em"
946
+ >
947
+ <path
948
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm7.795 11.795-8.646 8.646c-.317.317-.733.475-1.149.475s-.832-.158-1.149-.475l-4.646-4.646a1.126 1.126 0 0 1 1.591-1.591l4.205 4.205 8.205-8.205a1.126 1.126 0 0 1 1.591 1.591Z"
949
+ />
950
+ </svg>
951
+ </span>
952
+ </span>
711
953
  </div>
712
954
  <div
713
955
  class="pf-v6-l-flex pf-m-column pf-m-space-items-none"
@@ -814,7 +1056,19 @@ cssPrefix: pf-d-dashboard
814
1056
  <span
815
1057
  class="pf-v6-c-notification-drawer__group-toggle-icon"
816
1058
  >
817
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1059
+ <svg
1060
+ class="pf-v6-svg"
1061
+ viewBox="0 0 20 20"
1062
+ fill="currentColor"
1063
+ aria-hidden="true"
1064
+ role="img"
1065
+ width="1em"
1066
+ height="1em"
1067
+ >
1068
+ <path
1069
+ d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
1070
+ />
1071
+ </svg>
818
1072
  </span>
819
1073
  </button>
820
1074
  <ul
@@ -832,10 +1086,19 @@ cssPrefix: pf-d-dashboard
832
1086
  <span
833
1087
  class="pf-v6-c-notification-drawer__list-item-header-icon"
834
1088
  >
835
- <i
836
- class="fas fa-exclamation-circle"
1089
+ <svg
1090
+ class="pf-v6-svg"
1091
+ viewBox="0 0 32 32"
1092
+ fill="currentColor"
837
1093
  aria-hidden="true"
838
- ></i>
1094
+ role="img"
1095
+ width="1em"
1096
+ height="1em"
1097
+ >
1098
+ <path
1099
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm-1.5 8a1.5 1.5 0 1 1 3 0v7a1.5 1.5 0 1 1-3 0V9ZM16 25.001a2 2 0 1 1-.001-3.999A2 2 0 0 1 16 25.001Z"
1100
+ />
1101
+ </svg>
839
1102
  </span>
840
1103
  <h2
841
1104
  class="pf-v6-c-notification-drawer__list-item-header-title"
@@ -860,10 +1123,19 @@ cssPrefix: pf-d-dashboard
860
1123
  <span
861
1124
  class="pf-v6-c-notification-drawer__list-item-header-icon"
862
1125
  >
863
- <i
864
- class="fas fa-exclamation-triangle"
1126
+ <svg
1127
+ class="pf-v6-svg"
1128
+ viewBox="0 0 32 32"
1129
+ fill="currentColor"
865
1130
  aria-hidden="true"
866
- ></i>
1131
+ role="img"
1132
+ width="1em"
1133
+ height="1em"
1134
+ >
1135
+ <path
1136
+ d="m31.874 28.514-15.011-27a1.001 1.001 0 0 0-1.748 0l-15.011 27A1 1 0 0 0 .978 30H31a1 1 0 0 0 .874-1.486ZM14.5 12a1.5 1.5 0 0 1 3 0v5a1.5 1.5 0 0 1-3 0v-5ZM16 26.001a2 2 0 1 1-.001-3.999A2 2 0 0 1 16 26.001Z"
1137
+ />
1138
+ </svg>
867
1139
  </span>
868
1140
  <h2
869
1141
  class="pf-v6-c-notification-drawer__list-item-header-title"
@@ -926,7 +1198,19 @@ cssPrefix: pf-d-dashboard
926
1198
  >
927
1199
  <span class="pf-v6-c-button__icon pf-m-start">
928
1200
  <span class="pf-v6-c-card__header-toggle-icon">
929
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1201
+ <svg
1202
+ class="pf-v6-svg"
1203
+ viewBox="0 0 20 20"
1204
+ fill="currentColor"
1205
+ aria-hidden="true"
1206
+ role="img"
1207
+ width="1em"
1208
+ height="1em"
1209
+ >
1210
+ <path
1211
+ d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
1212
+ />
1213
+ </svg>
930
1214
  </span>
931
1215
  </span>
932
1216
  </button>
@@ -1037,7 +1321,19 @@ cssPrefix: pf-d-dashboard
1037
1321
  >
1038
1322
  <span class="pf-v6-c-button__icon pf-m-start">
1039
1323
  <span class="pf-v6-c-card__header-toggle-icon">
1040
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1324
+ <svg
1325
+ class="pf-v6-svg"
1326
+ viewBox="0 0 20 20"
1327
+ fill="currentColor"
1328
+ aria-hidden="true"
1329
+ role="img"
1330
+ width="1em"
1331
+ height="1em"
1332
+ >
1333
+ <path
1334
+ d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
1335
+ />
1336
+ </svg>
1041
1337
  </span>
1042
1338
  </span>
1043
1339
  </button>
@@ -1065,7 +1361,19 @@ cssPrefix: pf-d-dashboard
1065
1361
  >
1066
1362
  <span class="pf-v6-c-button__icon pf-m-start">
1067
1363
  <span class="pf-v6-c-card__header-toggle-icon">
1068
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1364
+ <svg
1365
+ class="pf-v6-svg"
1366
+ viewBox="0 0 20 20"
1367
+ fill="currentColor"
1368
+ aria-hidden="true"
1369
+ role="img"
1370
+ width="1em"
1371
+ height="1em"
1372
+ >
1373
+ <path
1374
+ d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
1375
+ />
1376
+ </svg>
1069
1377
  </span>
1070
1378
  </span>
1071
1379
  </button>
@@ -1237,10 +1545,25 @@ cssPrefix: pf-d-dashboard
1237
1545
  <a href="#">
1238
1546
  <div class="pf-v6-l-flex pf-m-space-items-sm">
1239
1547
  <span>3</span>
1240
- <i
1241
- class="fas fa-check-circle pf-v6-u-success-color-100"
1242
- aria-hidden="true"
1243
- ></i>
1548
+ <span class="pf-v6-c-icon">
1549
+ <span
1550
+ class="pf-v6-c-icon__content pf-m-success"
1551
+ >
1552
+ <svg
1553
+ class="pf-v6-svg"
1554
+ viewBox="0 0 32 32"
1555
+ fill="currentColor"
1556
+ aria-hidden="true"
1557
+ role="img"
1558
+ width="1em"
1559
+ height="1em"
1560
+ >
1561
+ <path
1562
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm7.795 11.795-8.646 8.646c-.317.317-.733.475-1.149.475s-.832-.158-1.149-.475l-4.646-4.646a1.126 1.126 0 0 1 1.591-1.591l4.205 4.205 8.205-8.205a1.126 1.126 0 0 1 1.591 1.591Z"
1563
+ />
1564
+ </svg>
1565
+ </span>
1566
+ </span>
1244
1567
  </div>
1245
1568
  </a>
1246
1569
  </div>
@@ -1260,10 +1583,25 @@ cssPrefix: pf-d-dashboard
1260
1583
  <a href="#">
1261
1584
  <div class="pf-v6-l-flex pf-m-space-items-sm">
1262
1585
  <span>8</span>
1263
- <i
1264
- class="fas fa-check-circle pf-v6-u-success-color-100"
1265
- aria-hidden="true"
1266
- ></i>
1586
+ <span class="pf-v6-c-icon">
1587
+ <span
1588
+ class="pf-v6-c-icon__content pf-m-success"
1589
+ >
1590
+ <svg
1591
+ class="pf-v6-svg"
1592
+ viewBox="0 0 32 32"
1593
+ fill="currentColor"
1594
+ aria-hidden="true"
1595
+ role="img"
1596
+ width="1em"
1597
+ height="1em"
1598
+ >
1599
+ <path
1600
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm7.795 11.795-8.646 8.646c-.317.317-.733.475-1.149.475s-.832-.158-1.149-.475l-4.646-4.646a1.126 1.126 0 0 1 1.591-1.591l4.205 4.205 8.205-8.205a1.126 1.126 0 0 1 1.591 1.591Z"
1601
+ />
1602
+ </svg>
1603
+ </span>
1604
+ </span>
1267
1605
  </div>
1268
1606
  </a>
1269
1607
  </div>
@@ -1283,10 +1621,25 @@ cssPrefix: pf-d-dashboard
1283
1621
  <a href="#">
1284
1622
  <div class="pf-v6-l-flex pf-m-space-items-sm">
1285
1623
  <span>20</span>
1286
- <i
1287
- class="fas fa-check-circle pf-v6-u-success-color-100"
1288
- aria-hidden="true"
1289
- ></i>
1624
+ <span class="pf-v6-c-icon">
1625
+ <span
1626
+ class="pf-v6-c-icon__content pf-m-success"
1627
+ >
1628
+ <svg
1629
+ class="pf-v6-svg"
1630
+ viewBox="0 0 32 32"
1631
+ fill="currentColor"
1632
+ aria-hidden="true"
1633
+ role="img"
1634
+ width="1em"
1635
+ height="1em"
1636
+ >
1637
+ <path
1638
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm7.795 11.795-8.646 8.646c-.317.317-.733.475-1.149.475s-.832-.158-1.149-.475l-4.646-4.646a1.126 1.126 0 0 1 1.591-1.591l4.205 4.205 8.205-8.205a1.126 1.126 0 0 1 1.591 1.591Z"
1639
+ />
1640
+ </svg>
1641
+ </span>
1642
+ </span>
1290
1643
  </div>
1291
1644
  </a>
1292
1645
  </div>
@@ -1306,10 +1659,25 @@ cssPrefix: pf-d-dashboard
1306
1659
  <a href="#">
1307
1660
  <div class="pf-v6-l-flex pf-m-space-items-sm">
1308
1661
  <span>12</span>
1309
- <i
1310
- class="fas fa-check-circle pf-v6-u-success-color-100"
1311
- aria-hidden="true"
1312
- ></i>
1662
+ <span class="pf-v6-c-icon">
1663
+ <span
1664
+ class="pf-v6-c-icon__content pf-m-success"
1665
+ >
1666
+ <svg
1667
+ class="pf-v6-svg"
1668
+ viewBox="0 0 32 32"
1669
+ fill="currentColor"
1670
+ aria-hidden="true"
1671
+ role="img"
1672
+ width="1em"
1673
+ height="1em"
1674
+ >
1675
+ <path
1676
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm7.795 11.795-8.646 8.646c-.317.317-.733.475-1.149.475s-.832-.158-1.149-.475l-4.646-4.646a1.126 1.126 0 0 1 1.591-1.591l4.205 4.205 8.205-8.205a1.126 1.126 0 0 1 1.591 1.591Z"
1677
+ />
1678
+ </svg>
1679
+ </span>
1680
+ </span>
1313
1681
  </div>
1314
1682
  </a>
1315
1683
  </div>
@@ -1329,10 +1697,25 @@ cssPrefix: pf-d-dashboard
1329
1697
  <a href="#">
1330
1698
  <div class="pf-v6-l-flex pf-m-space-items-sm">
1331
1699
  <span>18</span>
1332
- <i
1333
- class="fas fa-check-circle pf-v6-u-success-color-100"
1334
- aria-hidden="true"
1335
- ></i>
1700
+ <span class="pf-v6-c-icon">
1701
+ <span
1702
+ class="pf-v6-c-icon__content pf-m-success"
1703
+ >
1704
+ <svg
1705
+ class="pf-v6-svg"
1706
+ viewBox="0 0 32 32"
1707
+ fill="currentColor"
1708
+ aria-hidden="true"
1709
+ role="img"
1710
+ width="1em"
1711
+ height="1em"
1712
+ >
1713
+ <path
1714
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm7.795 11.795-8.646 8.646c-.317.317-.733.475-1.149.475s-.832-.158-1.149-.475l-4.646-4.646a1.126 1.126 0 0 1 1.591-1.591l4.205 4.205 8.205-8.205a1.126 1.126 0 0 1 1.591 1.591Z"
1715
+ />
1716
+ </svg>
1717
+ </span>
1718
+ </span>
1336
1719
  </div>
1337
1720
  </a>
1338
1721
  </div>
@@ -1386,10 +1769,23 @@ cssPrefix: pf-d-dashboard
1386
1769
  <dt class="pf-v6-c-description-list__term">
1387
1770
  <div class="pf-v6-l-flex pf-m-nowrap">
1388
1771
  <div class="pf-v6-l-flex__item pf-m-spacer-sm">
1389
- <i
1390
- class="fas fa-exclamation-circle pf-v6-u-danger-color-100"
1391
- aria-hidden="true"
1392
- ></i>
1772
+ <span class="pf-v6-c-icon">
1773
+ <span class="pf-v6-c-icon__content pf-m-danger">
1774
+ <svg
1775
+ class="pf-v6-svg"
1776
+ viewBox="0 0 32 32"
1777
+ fill="currentColor"
1778
+ aria-hidden="true"
1779
+ role="img"
1780
+ width="1em"
1781
+ height="1em"
1782
+ >
1783
+ <path
1784
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm-1.5 8a1.5 1.5 0 1 1 3 0v7a1.5 1.5 0 1 1-3 0V9ZM16 25.001a2 2 0 1 1-.001-3.999A2 2 0 0 1 16 25.001Z"
1785
+ />
1786
+ </svg>
1787
+ </span>
1788
+ </span>
1393
1789
  </div>
1394
1790
  <div
1395
1791
  class="pf-v6-l-flex__item"
@@ -1413,10 +1809,25 @@ cssPrefix: pf-d-dashboard
1413
1809
  <dt class="pf-v6-c-description-list__term">
1414
1810
  <div class="pf-v6-l-flex pf-m-nowrap">
1415
1811
  <div class="pf-v6-l-flex__item pf-m-spacer-sm">
1416
- <i
1417
- class="fas fa-check-circle pf-v6-u-success-color-100"
1418
- aria-hidden="true"
1419
- ></i>
1812
+ <span class="pf-v6-c-icon">
1813
+ <span
1814
+ class="pf-v6-c-icon__content pf-m-success"
1815
+ >
1816
+ <svg
1817
+ class="pf-v6-svg"
1818
+ viewBox="0 0 32 32"
1819
+ fill="currentColor"
1820
+ aria-hidden="true"
1821
+ role="img"
1822
+ width="1em"
1823
+ height="1em"
1824
+ >
1825
+ <path
1826
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm7.795 11.795-8.646 8.646c-.317.317-.733.475-1.149.475s-.832-.158-1.149-.475l-4.646-4.646a1.126 1.126 0 0 1 1.591-1.591l4.205 4.205 8.205-8.205a1.126 1.126 0 0 1 1.591 1.591Z"
1827
+ />
1828
+ </svg>
1829
+ </span>
1830
+ </span>
1420
1831
  </div>
1421
1832
  <div
1422
1833
  class="pf-v6-l-flex__item"
@@ -1475,10 +1886,25 @@ cssPrefix: pf-d-dashboard
1475
1886
  <dt class="pf-v6-c-description-list__term">
1476
1887
  <div class="pf-v6-l-flex pf-m-nowrap">
1477
1888
  <div class="pf-v6-l-flex__item pf-m-spacer-sm">
1478
- <i
1479
- class="fas fa-check-circle pf-v6-u-success-color-100"
1480
- aria-hidden="true"
1481
- ></i>
1889
+ <span class="pf-v6-c-icon">
1890
+ <span
1891
+ class="pf-v6-c-icon__content pf-m-success"
1892
+ >
1893
+ <svg
1894
+ class="pf-v6-svg"
1895
+ viewBox="0 0 32 32"
1896
+ fill="currentColor"
1897
+ aria-hidden="true"
1898
+ role="img"
1899
+ width="1em"
1900
+ height="1em"
1901
+ >
1902
+ <path
1903
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm7.795 11.795-8.646 8.646c-.317.317-.733.475-1.149.475s-.832-.158-1.149-.475l-4.646-4.646a1.126 1.126 0 0 1 1.591-1.591l4.205 4.205 8.205-8.205a1.126 1.126 0 0 1 1.591 1.591Z"
1904
+ />
1905
+ </svg>
1906
+ </span>
1907
+ </span>
1482
1908
  </div>
1483
1909
  <div class="pf-v6-l-flex__item">Created container</div>
1484
1910
  </div>
@@ -1501,10 +1927,25 @@ cssPrefix: pf-d-dashboard
1501
1927
  <dt class="pf-v6-c-description-list__term">
1502
1928
  <div class="pf-v6-l-flex pf-m-nowrap">
1503
1929
  <div class="pf-v6-l-flex__item pf-m-spacer-sm">
1504
- <i
1505
- class="fas fa-exclamation-triangle pf-v6-u-warning-color-100"
1506
- aria-hidden="true"
1507
- ></i>
1930
+ <span class="pf-v6-c-icon">
1931
+ <span
1932
+ class="pf-v6-c-icon__content pf-m-warning"
1933
+ >
1934
+ <svg
1935
+ class="pf-v6-svg"
1936
+ viewBox="0 0 32 32"
1937
+ fill="currentColor"
1938
+ aria-hidden="true"
1939
+ role="img"
1940
+ width="1em"
1941
+ height="1em"
1942
+ >
1943
+ <path
1944
+ d="m31.874 28.514-15.011-27a1.001 1.001 0 0 0-1.748 0l-15.011 27A1 1 0 0 0 .978 30H31a1 1 0 0 0 .874-1.486ZM14.5 12a1.5 1.5 0 0 1 3 0v5a1.5 1.5 0 0 1-3 0v-5ZM16 26.001a2 2 0 1 1-.001-3.999A2 2 0 0 1 16 26.001Z"
1945
+ />
1946
+ </svg>
1947
+ </span>
1948
+ </span>
1508
1949
  </div>
1509
1950
  <div
1510
1951
  class="pf-v6-l-flex__item"
@@ -1529,10 +1970,23 @@ cssPrefix: pf-d-dashboard
1529
1970
  <dt class="pf-v6-c-description-list__term">
1530
1971
  <div class="pf-v6-l-flex pf-m-nowrap">
1531
1972
  <div class="pf-v6-l-flex__item pf-m-spacer-sm">
1532
- <i
1533
- class="fas fa-exclamation-circle pf-v6-u-danger-color-100"
1534
- aria-hidden="true"
1535
- ></i>
1973
+ <span class="pf-v6-c-icon">
1974
+ <span class="pf-v6-c-icon__content pf-m-danger">
1975
+ <svg
1976
+ class="pf-v6-svg"
1977
+ viewBox="0 0 32 32"
1978
+ fill="currentColor"
1979
+ aria-hidden="true"
1980
+ role="img"
1981
+ width="1em"
1982
+ height="1em"
1983
+ >
1984
+ <path
1985
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm-1.5 8a1.5 1.5 0 1 1 3 0v7a1.5 1.5 0 1 1-3 0V9ZM16 25.001a2 2 0 1 1-.001-3.999A2 2 0 0 1 16 25.001Z"
1986
+ />
1987
+ </svg>
1988
+ </span>
1989
+ </span>
1536
1990
  </div>
1537
1991
  <div class="pf-v6-l-flex__item">Rook-osd-10-328949</div>
1538
1992
  </div>
@@ -1555,10 +2009,25 @@ cssPrefix: pf-d-dashboard
1555
2009
  <dt class="pf-v6-c-description-list__term">
1556
2010
  <div class="pf-v6-l-flex pf-m-nowrap">
1557
2011
  <div class="pf-v6-l-flex__item pf-m-spacer-sm">
1558
- <i
1559
- class="fas fa-check-circle pf-v6-u-success-color-100"
1560
- aria-hidden="true"
1561
- ></i>
2012
+ <span class="pf-v6-c-icon">
2013
+ <span
2014
+ class="pf-v6-c-icon__content pf-m-success"
2015
+ >
2016
+ <svg
2017
+ class="pf-v6-svg"
2018
+ viewBox="0 0 32 32"
2019
+ fill="currentColor"
2020
+ aria-hidden="true"
2021
+ role="img"
2022
+ width="1em"
2023
+ height="1em"
2024
+ >
2025
+ <path
2026
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm7.795 11.795-8.646 8.646c-.317.317-.733.475-1.149.475s-.832-.158-1.149-.475l-4.646-4.646a1.126 1.126 0 0 1 1.591-1.591l4.205 4.205 8.205-8.205a1.126 1.126 0 0 1 1.591 1.591Z"
2027
+ />
2028
+ </svg>
2029
+ </span>
2030
+ </span>
1562
2031
  </div>
1563
2032
  <div class="pf-v6-l-flex__item">Created container</div>
1564
2033
  </div>
@@ -1581,10 +2050,25 @@ cssPrefix: pf-d-dashboard
1581
2050
  <dt class="pf-v6-c-description-list__term">
1582
2051
  <div class="pf-v6-l-flex pf-m-nowrap">
1583
2052
  <div class="pf-v6-l-flex__item pf-m-spacer-sm">
1584
- <i
1585
- class="fas fa-check-circle pf-v6-u-success-color-100"
1586
- aria-hidden="true"
1587
- ></i>
2053
+ <span class="pf-v6-c-icon">
2054
+ <span
2055
+ class="pf-v6-c-icon__content pf-m-success"
2056
+ >
2057
+ <svg
2058
+ class="pf-v6-svg"
2059
+ viewBox="0 0 32 32"
2060
+ fill="currentColor"
2061
+ aria-hidden="true"
2062
+ role="img"
2063
+ width="1em"
2064
+ height="1em"
2065
+ >
2066
+ <path
2067
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm7.795 11.795-8.646 8.646c-.317.317-.733.475-1.149.475s-.832-.158-1.149-.475l-4.646-4.646a1.126 1.126 0 0 1 1.591-1.591l4.205 4.205 8.205-8.205a1.126 1.126 0 0 1 1.591 1.591Z"
2068
+ />
2069
+ </svg>
2070
+ </span>
2071
+ </span>
1588
2072
  </div>
1589
2073
  <div class="pf-v6-l-flex__item">Created container</div>
1590
2074
  </div>