@patternfly/patternfly 6.5.0-prerelease.8 → 6.5.0-prerelease.81

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 (410) hide show
  1. package/README.md +2 -2
  2. package/assets/fontawesome/_variables.scss +2 -1
  3. package/assets/images/Felt-Bkg-Generic-Dark.svg +82 -0
  4. package/assets/images/Felt-Bkg-Generic-Light.svg +82 -0
  5. package/assets/images/PF-Bkg-Generic-Dark.svg +76 -0
  6. package/assets/images/PF-Bkg-Generic-Light.svg +74 -0
  7. package/assets/images/RHAiExperienceIcon.svg +27 -0
  8. package/assets/images/RHAutomationsLogo.svg +96 -0
  9. package/assets/images/RHServerStackIcon.svg +16 -0
  10. package/assets/images/compass--hero-bg.png +0 -0
  11. package/assets/images/compass--rh-wallpaper-dark.png +0 -0
  12. package/assets/images/compass--rh-wallpaper-light.png +0 -0
  13. package/assets/images/compass--wallpaper-dark.jpg +0 -0
  14. package/assets/images/compass--wallpaper-dark.png +0 -0
  15. package/assets/images/compass--wallpaper-light.jpg +0 -0
  16. package/assets/images/compass--wallpaper-light.png +0 -0
  17. package/assets/images/glass-brand-dark.jpg +0 -0
  18. package/assets/images/glass-brand-dark.png +0 -0
  19. package/assets/images/glass-brand-light.jpg +0 -0
  20. package/assets/images/glass-brand-light.png +0 -0
  21. package/base/normalize.scss +7 -0
  22. package/base/patternfly-common.css +50 -0
  23. package/base/patternfly-common.scss +59 -0
  24. package/base/patternfly-svg-icons.css +17 -0
  25. package/base/patternfly-svg-icons.scss +20 -0
  26. package/base/patternfly-variables.css +926 -513
  27. package/base/patternfly-variables.scss +46 -4
  28. package/base/tokens/tokens-dark.scss +56 -8
  29. package/base/tokens/tokens-default.scss +69 -14
  30. package/base/tokens/tokens-glass-dark.scss +26 -0
  31. package/base/tokens/tokens-glass.scss +22 -0
  32. package/base/tokens/tokens-local.scss +17 -0
  33. package/base/tokens/tokens-palette.scss +3 -1
  34. package/base/tokens/tokens-redhat-dark.scss +21 -0
  35. package/base/tokens/tokens-redhat-glass-dark.scss +40 -0
  36. package/base/tokens/tokens-redhat-glass.scss +30 -0
  37. package/base/tokens/tokens-redhat-highcontrast-dark.scss +50 -0
  38. package/base/tokens/tokens-redhat-highcontrast.scss +128 -0
  39. package/base/tokens/tokens-redhat.scss +15 -0
  40. package/components/AboutModalBox/about-modal-box.css +36 -26
  41. package/components/Accordion/accordion.css +26 -14
  42. package/components/Accordion/accordion.scss +12 -2
  43. package/components/ActionList/action-list.css +2 -0
  44. package/components/ActionList/action-list.scss +2 -0
  45. package/components/Alert/alert.css +7 -5
  46. package/components/Alert/alert.scss +2 -1
  47. package/components/Avatar/avatar.css +12 -4
  48. package/components/BackgroundImage/background-image.css +6 -3
  49. package/components/Banner/banner.css +12 -6
  50. package/components/Banner/banner.scss +7 -0
  51. package/components/Brand/brand.css +3 -1
  52. package/components/Breadcrumb/breadcrumb.css +10 -5
  53. package/components/Breadcrumb/breadcrumb.scss +6 -2
  54. package/components/Button/button.css +173 -71
  55. package/components/Button/button.scss +188 -72
  56. package/components/CalendarMonth/calendar-month.css +4 -3
  57. package/components/Card/card.css +51 -15
  58. package/components/Card/card.scss +65 -9
  59. package/components/ClipboardCopy/clipboard-copy.css +14 -7
  60. package/components/ClipboardCopy/clipboard-copy.scss +13 -4
  61. package/components/CodeEditor/code-editor.css +2 -2
  62. package/components/CodeEditor/code-editor.scss +2 -2
  63. package/components/Compass/compass.css +399 -0
  64. package/components/Compass/compass.scss +413 -0
  65. package/components/DataList/data-list.css +30 -23
  66. package/components/DataList/data-list.scss +3 -2
  67. package/components/DescriptionList/description-list-order.scss +5 -1
  68. package/components/DescriptionList/description-list.css +7 -5
  69. package/components/DescriptionList/description-list.scss +5 -1
  70. package/components/Divider/divider.css +7 -5
  71. package/components/Drawer/drawer.css +224 -75
  72. package/components/Drawer/drawer.scss +194 -27
  73. package/components/DualListSelector/dual-list-selector.css +18 -12
  74. package/components/DualListSelector/dual-list-selector.scss +1 -1
  75. package/components/ExpandableSection/expandable-section.css +21 -16
  76. package/components/ExpandableSection/expandable-section.scss +6 -3
  77. package/components/Form/form.css +2 -2
  78. package/components/Form/form.scss +2 -2
  79. package/components/FormControl/form-control.css +3 -3
  80. package/components/FormControl/form-control.scss +3 -3
  81. package/components/Hero/hero.css +74 -0
  82. package/components/Hero/hero.scss +86 -0
  83. package/components/JumpLinks/jump-links.css +16 -5
  84. package/components/JumpLinks/jump-links.scss +17 -3
  85. package/components/Label/label-group.css +2 -2
  86. package/components/Label/label-group.scss +2 -2
  87. package/components/Label/label.css +4 -3
  88. package/components/Login/login.css +58 -40
  89. package/components/Login/login.scss +7 -3
  90. package/components/Masthead/masthead.css +111 -16
  91. package/components/Masthead/masthead.scss +111 -1
  92. package/components/Menu/menu.css +49 -33
  93. package/components/Menu/menu.scss +26 -19
  94. package/components/MenuToggle/menu-toggle.css +35 -8
  95. package/components/MenuToggle/menu-toggle.scss +42 -8
  96. package/components/ModalBox/modal-box.css +9 -7
  97. package/components/ModalBox/modal-box.scss +2 -2
  98. package/components/Nav/nav.css +82 -11
  99. package/components/Nav/nav.scss +85 -5
  100. package/components/NotificationDrawer/notification-drawer.css +19 -9
  101. package/components/NotificationDrawer/notification-drawer.scss +14 -5
  102. package/components/OverflowMenu/overflow-menu.css +16 -0
  103. package/components/OverflowMenu/overflow-menu.scss +20 -1
  104. package/components/Page/page.css +421 -32
  105. package/components/Page/page.scss +397 -15
  106. package/components/Pagination/pagination.css +56 -4
  107. package/components/Pagination/pagination.scss +71 -6
  108. package/components/Panel/panel.css +41 -3
  109. package/components/Panel/panel.scss +56 -3
  110. package/components/Progress/progress.css +3 -1
  111. package/components/Progress/progress.scss +3 -1
  112. package/components/ProgressStepper/progress-stepper.scss +5 -1
  113. package/components/Sidebar/sidebar.css +1 -1
  114. package/components/Sidebar/sidebar.scss +7 -3
  115. package/components/Skeleton/skeleton.css +16 -15
  116. package/components/Slider/slider.css +32 -18
  117. package/components/Switch/switch.css +4 -2
  118. package/components/Switch/switch.scss +1 -1
  119. package/components/Table/table-grid.css +28 -36
  120. package/components/Table/table-grid.scss +4 -4
  121. package/components/Table/table-scrollable.css +1 -1
  122. package/components/Table/table-scrollable.scss +1 -1
  123. package/components/Table/table-tree-view.css +4 -2
  124. package/components/Table/table.css +104 -57
  125. package/components/Table/table.scss +92 -37
  126. package/components/Tabs/tabs.css +39 -33
  127. package/components/Tabs/tabs.scss +38 -26
  128. package/components/TextInputGroup/text-input-group.css +2 -2
  129. package/components/TextInputGroup/text-input-group.scss +2 -2
  130. package/components/ToggleGroup/toggle-group.css +44 -19
  131. package/components/ToggleGroup/toggle-group.scss +51 -22
  132. package/components/Toolbar/toolbar.css +195 -16
  133. package/components/Toolbar/toolbar.scss +89 -9
  134. package/components/TreeView/tree-view.css +45 -14
  135. package/components/TreeView/tree-view.scss +32 -1
  136. package/components/Wizard/wizard.css +41 -19
  137. package/components/Wizard/wizard.scss +26 -6
  138. package/components/_index.css +2740 -829
  139. package/components/_index.scss +3 -1
  140. package/docs/components/AboutModalBox/examples/AboutModalBox.md +13 -1
  141. package/docs/components/Accordion/examples/Accordion.md +392 -30
  142. package/docs/components/ActionList/examples/ActionList.md +143 -11
  143. package/docs/components/Alert/examples/Alert.md +678 -54
  144. package/docs/components/Avatar/examples/Avatar.md +4 -4
  145. package/docs/components/BackToTop/examples/BackToTop.md +13 -1
  146. package/docs/components/Banner/examples/Banner.md +196 -5
  147. package/docs/components/Brand/examples/Brand.md +2 -2
  148. package/docs/components/Breadcrumb/examples/Breadcrumb.md +313 -26
  149. package/docs/components/Button/examples/Button.md +2829 -333
  150. package/docs/components/CalendarMonth/examples/CalendarMonth.md +156 -12
  151. package/docs/components/Card/examples/Card.md +335 -12
  152. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +293 -28
  153. package/docs/components/CodeBlock/examples/CodeBlock.md +104 -8
  154. package/docs/components/CodeEditor/examples/CodeEditor.md +234 -18
  155. package/docs/components/Compass/examples/Compass.css +8 -0
  156. package/docs/components/Compass/examples/Compass.md +109 -0
  157. package/docs/components/DataList/examples/DataList.md +468 -78
  158. package/docs/components/DatePicker/examples/DatePicker.md +78 -6
  159. package/docs/components/DescriptionList/examples/DescriptionList.md +327 -27
  160. package/docs/components/Divider/examples/Divider.md +2 -2
  161. package/docs/components/DragDrop/examples/DragDrop.css +1 -1
  162. package/docs/components/Drawer/examples/Drawer.md +415 -35
  163. package/docs/components/DualListSelector/examples/DualListSelector.md +1247 -161
  164. package/docs/components/EmptyState/examples/EmptyState.md +78 -6
  165. package/docs/components/ExpandableSection/examples/ExpandableSection.md +91 -7
  166. package/docs/components/Form/examples/Form.md +78 -6
  167. package/docs/components/Hero/examples/Hero.md +25 -0
  168. package/docs/components/Hint/examples/Hint.md +39 -3
  169. package/docs/components/Icon/examples/Icon.md +105 -9
  170. package/docs/components/InlineEdit/examples/InlineEdit.md +338 -26
  171. package/docs/components/InputGroup/examples/InputGroup.md +40 -4
  172. package/docs/components/JumpLinks/examples/JumpLinks.md +54 -6
  173. package/docs/components/Label/examples/Label.md +2834 -218
  174. package/docs/components/Login/examples/Login.md +39 -3
  175. package/docs/components/Masthead/examples/masthead.md +80 -1
  176. package/docs/components/Menu/examples/Menu.md +1679 -133
  177. package/docs/components/MenuToggle/examples/MenuToggle.md +1514 -118
  178. package/docs/components/ModalBox/examples/ModalBox.md +289 -25
  179. package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +156 -12
  180. package/docs/components/Nav/examples/Navigation.md +898 -62
  181. package/docs/components/NotificationDrawer/examples/NotificationDrawer.md +1079 -83
  182. package/docs/components/OverflowMenu/examples/overflow-menu.css +6 -3
  183. package/docs/components/OverflowMenu/examples/overflow-menu.md +164 -11
  184. package/docs/components/Page/examples/Page.md +211 -25
  185. package/docs/components/Pagination/examples/Pagination.md +1291 -80
  186. package/docs/components/Panel/examples/Panel.css +3 -0
  187. package/docs/components/Panel/examples/Panel.md +71 -4
  188. package/docs/components/Popover/examples/Popover.md +286 -22
  189. package/docs/components/Progress/examples/Progress.md +91 -7
  190. package/docs/components/ProgressStepper/examples/ProgressStepper.md +275 -23
  191. package/docs/components/Sidebar/examples/Sidebar.md +1 -1
  192. package/docs/components/Slider/examples/Slider.md +52 -4
  193. package/docs/components/Table/examples/Table.css +2 -1
  194. package/docs/components/Table/examples/Table.md +7543 -653
  195. package/docs/components/Tabs/examples/Tabs.md +5734 -471
  196. package/docs/components/TextInputGroup/examples/TextInputGroup.md +600 -48
  197. package/docs/components/ToggleGroup/examples/toggle-group.md +261 -15
  198. package/docs/components/Toolbar/examples/Toolbar.css +1 -1
  199. package/docs/components/Toolbar/examples/Toolbar.md +1145 -88
  200. package/docs/components/TreeView/examples/TreeView.md +1390 -130
  201. package/docs/components/Wizard/examples/Wizard.md +828 -73
  202. package/docs/demos/AboutModal/examples/AboutModal.md +158 -53
  203. package/docs/demos/Alert/examples/Alert.md +539 -164
  204. package/docs/demos/BackToTop/examples/BackToTop.md +158 -53
  205. package/docs/demos/Banner/examples/Banner.md +290 -104
  206. package/docs/demos/Button/examples/Button.md +13 -1
  207. package/docs/demos/Card/examples/Card.md +1041 -134
  208. package/docs/demos/CardView/examples/CardView.md +570 -171
  209. package/docs/demos/Compass/examples/Compass.md +10005 -0
  210. package/docs/demos/Dashboard/examples/Dashboard.md +745 -177
  211. package/docs/demos/DataList/examples/DataList.md +1301 -292
  212. package/docs/demos/DescriptionList/examples/DescriptionList.md +472 -160
  213. package/docs/demos/Drawer/examples/Drawer.md +718 -262
  214. package/docs/demos/Form/examples/BasicForms.md +273 -21
  215. package/docs/demos/JumpLinks/examples/JumpLinks.md +862 -319
  216. package/docs/demos/Masthead/examples/Masthead.md +1119 -489
  217. package/docs/demos/Modal/examples/Modal.md +948 -321
  218. package/docs/demos/Nav/examples/Nav.md +3449 -499
  219. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +2418 -405
  220. package/docs/demos/Page/examples/Page.md +2137 -773
  221. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +13 -1
  222. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +52 -4
  223. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +1913 -504
  224. package/docs/demos/Skeleton/examples/Skeleton.md +145 -52
  225. package/docs/demos/Table/examples/Table.md +11807 -2275
  226. package/docs/demos/Tabs/examples/Tabs.md +1117 -337
  227. package/docs/demos/Toolbar/examples/Toolbar.md +1818 -286
  228. package/docs/demos/Wizard/examples/Wizard.md +1705 -526
  229. package/docs/layouts/Bullseye/examples/Bullseye.css +2 -2
  230. package/docs/layouts/Bullseye/examples/Bullseye.md +2 -1
  231. package/docs/layouts/Flex/examples/Flex.css +3 -3
  232. package/docs/layouts/Flex/examples/Flex.md +3 -2
  233. package/docs/layouts/Gallery/examples/Gallery.css +2 -2
  234. package/docs/layouts/Gallery/examples/Gallery.md +4 -3
  235. package/docs/layouts/Grid/examples/Grid.css +1 -1
  236. package/docs/layouts/Grid/examples/Grid.md +6 -5
  237. package/docs/layouts/Level/examples/Level.css +3 -3
  238. package/docs/layouts/Level/examples/Level.md +2 -1
  239. package/docs/layouts/Split/examples/Split.css +1 -1
  240. package/docs/layouts/Split/examples/Split.md +2 -1
  241. package/docs/layouts/Stack/examples/Stack.css +3 -3
  242. package/docs/layouts/Stack/examples/Stack.md +2 -1
  243. package/docs/utilities/Accessibility/examples/Accessibility.md +3 -2
  244. package/docs/utilities/Alignment/examples/Alignment.css +4 -4
  245. package/docs/utilities/Alignment/examples/Alignment.md +3 -2
  246. package/docs/utilities/BackgroundColor/examples/BackgroundColor.md +5 -4
  247. package/docs/utilities/BoxShadow/examples/box-shadow.css +2 -2
  248. package/docs/utilities/BoxShadow/examples/box-shadow.md +2 -1
  249. package/docs/utilities/Display/examples/Display.css +1 -1
  250. package/docs/utilities/Display/examples/Display.md +3 -2
  251. package/docs/utilities/Flex/examples/Flex.css +7 -7
  252. package/docs/utilities/Flex/examples/Flex.md +3 -2
  253. package/docs/utilities/Float/examples/Float.css +2 -2
  254. package/docs/utilities/Float/examples/Float.md +3 -2
  255. package/docs/utilities/Sizing/examples/Sizing.md +8 -7
  256. package/docs/utilities/Spacing/examples/Spacing.css +2 -2
  257. package/docs/utilities/Spacing/examples/Spacing.md +3 -2
  258. package/docs/utilities/Text/examples/Text.md +5 -4
  259. package/icons/PfIcons/add-circle-o.svg +4 -0
  260. package/icons/PfIcons/ansible-tower.svg +4 -0
  261. package/icons/PfIcons/applications.svg +4 -0
  262. package/icons/PfIcons/arrow.svg +4 -0
  263. package/icons/PfIcons/asleep.svg +4 -0
  264. package/icons/PfIcons/attention-bell.svg +4 -0
  265. package/icons/PfIcons/automation.svg +4 -0
  266. package/icons/PfIcons/bell.svg +4 -0
  267. package/icons/PfIcons/blueprint.svg +4 -0
  268. package/icons/PfIcons/build.svg +4 -0
  269. package/icons/PfIcons/builder-image.svg +4 -0
  270. package/icons/PfIcons/bundle.svg +4 -0
  271. package/icons/PfIcons/catalog.svg +4 -0
  272. package/icons/PfIcons/chat.svg +4 -0
  273. package/icons/PfIcons/close.svg +4 -0
  274. package/icons/PfIcons/cloud-security.svg +4 -0
  275. package/icons/PfIcons/cloud-tenant.svg +4 -0
  276. package/icons/PfIcons/cluster.svg +4 -0
  277. package/icons/PfIcons/connected.svg +4 -0
  278. package/icons/PfIcons/container-node.svg +4 -0
  279. package/icons/PfIcons/cpu.svg +4 -0
  280. package/icons/PfIcons/critical-risk.svg +4 -0
  281. package/icons/PfIcons/data-processor.svg +4 -0
  282. package/icons/PfIcons/data-sink.svg +4 -0
  283. package/icons/PfIcons/data-source.svg +4 -0
  284. package/icons/PfIcons/degraded.svg +4 -0
  285. package/icons/PfIcons/disconnected.svg +4 -0
  286. package/icons/PfIcons/domain.svg +4 -0
  287. package/icons/PfIcons/edit.svg +4 -0
  288. package/icons/PfIcons/enhancement.svg +4 -0
  289. package/icons/PfIcons/enterprise.svg +4 -0
  290. package/icons/PfIcons/equalizer.svg +4 -0
  291. package/icons/PfIcons/error-circle-o.svg +4 -0
  292. package/icons/PfIcons/export.svg +4 -0
  293. package/icons/PfIcons/filter.svg +4 -0
  294. package/icons/PfIcons/flavor.svg +4 -0
  295. package/icons/PfIcons/folder-close.svg +4 -0
  296. package/icons/PfIcons/folder-open.svg +4 -0
  297. package/icons/PfIcons/globe-route.svg +4 -0
  298. package/icons/PfIcons/help.svg +4 -0
  299. package/icons/PfIcons/history.svg +4 -0
  300. package/icons/PfIcons/home.svg +4 -0
  301. package/icons/PfIcons/import.svg +4 -0
  302. package/icons/PfIcons/in-progress.svg +4 -0
  303. package/icons/PfIcons/info.svg +4 -0
  304. package/icons/PfIcons/infrastructure.svg +4 -0
  305. package/icons/PfIcons/integration.svg +4 -0
  306. package/icons/PfIcons/key.svg +4 -0
  307. package/icons/PfIcons/locked.svg +4 -0
  308. package/icons/PfIcons/maintenance.svg +4 -0
  309. package/icons/PfIcons/memory.svg +4 -0
  310. package/icons/PfIcons/messages.svg +4 -0
  311. package/icons/PfIcons/middleware.svg +4 -0
  312. package/icons/PfIcons/migration.svg +4 -0
  313. package/icons/PfIcons/module.svg +4 -0
  314. package/icons/PfIcons/monitoring.svg +4 -0
  315. package/icons/PfIcons/multicluster.svg +4 -0
  316. package/icons/PfIcons/namespaces.svg +4 -0
  317. package/icons/PfIcons/network.svg +4 -0
  318. package/icons/PfIcons/new-process.svg +4 -0
  319. package/icons/PfIcons/not-started.svg +4 -0
  320. package/icons/PfIcons/off.svg +4 -0
  321. package/icons/PfIcons/ok.svg +4 -0
  322. package/icons/PfIcons/on-running.svg +4 -0
  323. package/icons/PfIcons/on.svg +4 -0
  324. package/icons/PfIcons/open-drawer-right.svg +4 -0
  325. package/icons/PfIcons/openshift.svg +4 -0
  326. package/icons/PfIcons/openstack.svg +4 -0
  327. package/icons/PfIcons/optimize.svg +4 -0
  328. package/icons/PfIcons/orders.svg +4 -0
  329. package/icons/PfIcons/os-image.svg +4 -0
  330. package/icons/PfIcons/package.svg +4 -0
  331. package/icons/PfIcons/panel-close.svg +4 -0
  332. package/icons/PfIcons/panel-open.svg +4 -0
  333. package/icons/PfIcons/paused.svg +4 -0
  334. package/icons/PfIcons/pending.svg +4 -0
  335. package/icons/PfIcons/pficon-dragdrop.svg +4 -0
  336. package/icons/PfIcons/pficon-history.svg +4 -0
  337. package/icons/PfIcons/pficon-network-range.svg +4 -0
  338. package/icons/PfIcons/pficon-satellite.svg +4 -0
  339. package/icons/PfIcons/pficon-sort-common-asc.svg +4 -0
  340. package/icons/PfIcons/pficon-sort-common-desc.svg +4 -0
  341. package/icons/PfIcons/pficon-template.svg +4 -0
  342. package/icons/PfIcons/pficon-vcenter.svg +4 -0
  343. package/icons/PfIcons/plugged.svg +4 -0
  344. package/icons/PfIcons/port.svg +4 -0
  345. package/icons/PfIcons/print.svg +4 -0
  346. package/icons/PfIcons/private.svg +4 -0
  347. package/icons/PfIcons/process-automation.svg +4 -0
  348. package/icons/PfIcons/project.svg +4 -0
  349. package/icons/PfIcons/rebalance.svg +4 -0
  350. package/icons/PfIcons/rebooting.svg +4 -0
  351. package/icons/PfIcons/regions.svg +4 -0
  352. package/icons/PfIcons/registry.svg +4 -0
  353. package/icons/PfIcons/remove2.svg +4 -0
  354. package/icons/PfIcons/replicator.svg +4 -0
  355. package/icons/PfIcons/repository.svg +4 -0
  356. package/icons/PfIcons/resource-pool.svg +4 -0
  357. package/icons/PfIcons/resources-almost-empty.svg +4 -0
  358. package/icons/PfIcons/resources-almost-full.svg +4 -0
  359. package/icons/PfIcons/resources-empty.svg +4 -0
  360. package/icons/PfIcons/resources-full.svg +4 -0
  361. package/icons/PfIcons/running.svg +4 -0
  362. package/icons/PfIcons/save.svg +4 -0
  363. package/icons/PfIcons/screen.svg +4 -0
  364. package/icons/PfIcons/security.svg +4 -0
  365. package/icons/PfIcons/server-group.svg +4 -0
  366. package/icons/PfIcons/server.svg +4 -0
  367. package/icons/PfIcons/service-catalog.svg +4 -0
  368. package/icons/PfIcons/service.svg +4 -0
  369. package/icons/PfIcons/services.svg +4 -0
  370. package/icons/PfIcons/severity-critical.svg +4 -0
  371. package/icons/PfIcons/severity-important.svg +4 -0
  372. package/icons/PfIcons/severity-minor.svg +4 -0
  373. package/icons/PfIcons/severity-moderate.svg +4 -0
  374. package/icons/PfIcons/severity-none.svg +4 -0
  375. package/icons/PfIcons/severity-undefined.svg +4 -0
  376. package/icons/PfIcons/spinner.svg +4 -0
  377. package/icons/PfIcons/spinner2.svg +4 -0
  378. package/icons/PfIcons/storage-domain.svg +4 -0
  379. package/icons/PfIcons/task.svg +4 -0
  380. package/icons/PfIcons/tenant.svg +4 -0
  381. package/icons/PfIcons/thumb-tack.svg +4 -0
  382. package/icons/PfIcons/topology.svg +4 -0
  383. package/icons/PfIcons/treeview.svg +4 -0
  384. package/icons/PfIcons/trend-down.svg +4 -0
  385. package/icons/PfIcons/trend-up.svg +4 -0
  386. package/icons/PfIcons/unknown.svg +4 -0
  387. package/icons/PfIcons/unlocked.svg +4 -0
  388. package/icons/PfIcons/unplugged.svg +4 -0
  389. package/icons/PfIcons/user.svg +4 -0
  390. package/icons/PfIcons/users.svg +4 -0
  391. package/icons/PfIcons/virtual-machine.svg +4 -0
  392. package/icons/PfIcons/volume.svg +4 -0
  393. package/icons/PfIcons/warning-triangle.svg +4 -0
  394. package/icons/PfIcons/zone.svg +4 -0
  395. package/layouts/Flex/flex.scss +83 -19
  396. package/layouts/Gallery/gallery.css +6 -2
  397. package/layouts/_index.css +6 -2
  398. package/package.json +55 -17
  399. package/patternfly-base-no-globals.css +969 -489
  400. package/patternfly-base.css +976 -489
  401. package/patternfly-charts.css +3 -3
  402. package/patternfly-no-globals.css +3623 -1194
  403. package/patternfly.css +3630 -1194
  404. package/patternfly.min.css +1 -1
  405. package/patternfly.min.css.map +1 -1
  406. package/patternfly.scss +48 -0
  407. package/sass-utilities/functions.scss +32 -25
  408. package/sass-utilities/mixins.scss +54 -23
  409. package/sass-utilities/namespaces-components.scss +6 -0
  410. package/sass-utilities/scss-variables.scss +3 -0
@@ -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">
@@ -143,7 +144,19 @@ cssPrefix: pf-d-dashboard
143
144
  aria-label="Application launcher"
144
145
  >
145
146
  <span class="pf-v6-c-menu-toggle__icon">
146
- <i class="fas fa-th" aria-hidden="true"></i>
147
+ <svg
148
+ class="pf-v6-svg"
149
+ viewBox="0 0 512 512"
150
+ fill="currentColor"
151
+ aria-hidden="true"
152
+ role="img"
153
+ width="1em"
154
+ height="1em"
155
+ >
156
+ <path
157
+ d="M149.333 56v80c0 13.255-10.745 24-24 24H24c-13.255 0-24-10.745-24-24V56c0-13.255 10.745-24 24-24h101.333c13.255 0 24 10.745 24 24zm181.334 240v-80c0-13.255-10.745-24-24-24H205.333c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24h101.333c13.256 0 24.001-10.745 24.001-24zm32-240v80c0 13.255 10.745 24 24 24H488c13.255 0 24-10.745 24-24V56c0-13.255-10.745-24-24-24H386.667c-13.255 0-24 10.745-24 24zm-32 80V56c0-13.255-10.745-24-24-24H205.333c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24h101.333c13.256 0 24.001-10.745 24.001-24zm-205.334 56H24c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24h101.333c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24zM0 376v80c0 13.255 10.745 24 24 24h101.333c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H24c-13.255 0-24 10.745-24 24zm386.667-56H488c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H386.667c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24zm0 160H488c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H386.667c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24zM181.333 376v80c0 13.255 10.745 24 24 24h101.333c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H205.333c-13.255 0-24 10.745-24 24z"
158
+ />
159
+ </svg>
147
160
  </span>
148
161
  </button>
149
162
  </div>
@@ -155,7 +168,19 @@ cssPrefix: pf-d-dashboard
155
168
  aria-label="Settings"
156
169
  >
157
170
  <span class="pf-v6-c-menu-toggle__icon">
158
- <i class="fas fa-cog" aria-hidden="true"></i>
171
+ <svg
172
+ class="pf-v6-svg"
173
+ viewBox="0 0 32 32"
174
+ fill="currentColor"
175
+ aria-hidden="true"
176
+ role="img"
177
+ width="1em"
178
+ height="1em"
179
+ >
180
+ <path
181
+ d="M30.168 12.894a.5.5 0 0 0-.488-.394h-2.732a11.512 11.512 0 0 0-.729-1.769l1.931-1.93a.5.5 0 0 0 .066-.625 14.693 14.693 0 0 0-4.393-4.392.498.498 0 0 0-.624.067l-1.93 1.93a11.512 11.512 0 0 0-1.769-.729V2.319a.5.5 0 0 0-.395-.489 14.81 14.81 0 0 0-6.211 0 .5.5 0 0 0-.395.489v2.733c-.614.196-1.207.439-1.769.729L8.8 3.851a.498.498 0 0 0-.624-.067 14.714 14.714 0 0 0-4.393 4.392.5.5 0 0 0 .066.625l1.931 1.93a11.512 11.512 0 0 0-.729 1.769H2.319a.5.5 0 0 0-.488.394 14.652 14.652 0 0 0 0 6.212.5.5 0 0 0 .488.394h2.732c.196.615.44 1.207.729 1.769l-1.931 1.93a.5.5 0 0 0-.066.625 14.673 14.673 0 0 0 4.393 4.392.498.498 0 0 0 .624-.067l1.93-1.93c.562.289 1.154.533 1.769.729v2.733a.5.5 0 0 0 .395.489 14.686 14.686 0 0 0 6.21 0 .5.5 0 0 0 .395-.489v-2.733a11.454 11.454 0 0 0 1.769-.729l1.93 1.93a.5.5 0 0 0 .624.067 14.714 14.714 0 0 0 4.393-4.392.5.5 0 0 0-.066-.625l-1.931-1.93c.289-.562.533-1.154.729-1.769h2.732a.5.5 0 0 0 .488-.394 14.652 14.652 0 0 0 0-6.212ZM16 21.25c-2.895 0-5.25-2.355-5.25-5.25s2.355-5.25 5.25-5.25 5.25 2.355 5.25 5.25-2.355 5.25-5.25 5.25Z"
182
+ />
183
+ </svg>
159
184
  </span>
160
185
  </button>
161
186
  </div>
@@ -167,7 +192,19 @@ cssPrefix: pf-d-dashboard
167
192
  aria-label="Help"
168
193
  >
169
194
  <span class="pf-v6-c-menu-toggle__icon">
170
- <i class="fas fa-question-circle" aria-hidden="true"></i>
195
+ <svg
196
+ class="pf-v6-svg"
197
+ viewBox="0 0 512 512"
198
+ fill="currentColor"
199
+ aria-hidden="true"
200
+ role="img"
201
+ width="1em"
202
+ height="1em"
203
+ >
204
+ <path
205
+ d="M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zM262.655 90c-54.497 0-89.255 22.957-116.549 63.758-3.536 5.286-2.353 12.415 2.715 16.258l34.699 26.31c5.205 3.947 12.621 3.008 16.665-2.122 17.864-22.658 30.113-35.797 57.303-35.797 20.429 0 45.698 13.148 45.698 32.958 0 14.976-12.363 22.667-32.534 33.976C247.128 238.528 216 254.941 216 296v4c0 6.627 5.373 12 12 12h56c6.627 0 12-5.373 12-12v-1.333c0-28.462 83.186-29.647 83.186-106.667 0-58.002-60.165-102-116.531-102zM256 338c-25.365 0-46 20.635-46 46 0 25.364 20.635 46 46 46s46-20.636 46-46c0-25.365-20.635-46-46-46z"
206
+ />
207
+ </svg>
171
208
  </span>
172
209
  </button>
173
210
  </div>
@@ -181,7 +218,19 @@ cssPrefix: pf-d-dashboard
181
218
  aria-label="Actions"
182
219
  >
183
220
  <span class="pf-v6-c-menu-toggle__icon">
184
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
221
+ <svg
222
+ class="pf-v6-svg"
223
+ viewBox="0 0 32 32"
224
+ fill="currentColor"
225
+ aria-hidden="true"
226
+ role="img"
227
+ width="1em"
228
+ height="1em"
229
+ >
230
+ <path
231
+ d="M12.25 5c0-2.068 1.683-3.75 3.75-3.75S19.75 2.932 19.75 5 18.067 8.75 16 8.75 12.25 7.068 12.25 5ZM16 12.25c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Zm0 11c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Z"
232
+ />
233
+ </svg>
185
234
  </span>
186
235
  </button>
187
236
  </div>
@@ -192,44 +241,46 @@ cssPrefix: pf-d-dashboard
192
241
  </div>
193
242
  </header>
194
243
  <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>
244
+ <div class="pf-v6-c-page__sidebar-main">
245
+ <div class="pf-v6-c-page__sidebar-body">
246
+ <nav
247
+ class="pf-v6-c-nav"
248
+ id="dashboard-demo-primary-nav"
249
+ aria-label="Global"
250
+ >
251
+ <ul class="pf-v6-c-nav__list" role="list">
252
+ <li class="pf-v6-c-nav__item">
253
+ <a href="#" class="pf-v6-c-nav__link">
254
+ <span class="pf-v6-c-nav__link-text">System panel</span>
255
+ </a>
256
+ </li>
257
+ <li class="pf-v6-c-nav__item">
258
+ <a
259
+ href="#"
260
+ class="pf-v6-c-nav__link pf-m-current"
261
+ aria-current="page"
262
+ >
263
+ <span class="pf-v6-c-nav__link-text">Policy</span>
264
+ </a>
265
+ </li>
266
+ <li class="pf-v6-c-nav__item">
267
+ <a href="#" class="pf-v6-c-nav__link">
268
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
269
+ </a>
270
+ </li>
271
+ <li class="pf-v6-c-nav__item">
272
+ <a href="#" class="pf-v6-c-nav__link">
273
+ <span class="pf-v6-c-nav__link-text">Network services</span>
274
+ </a>
275
+ </li>
276
+ <li class="pf-v6-c-nav__item">
277
+ <a href="#" class="pf-v6-c-nav__link">
278
+ <span class="pf-v6-c-nav__link-text">Server</span>
279
+ </a>
280
+ </li>
281
+ </ul>
282
+ </nav>
283
+ </div>
233
284
  </div>
234
285
  </div>
235
286
  <div class="pf-v6-c-page__main-container" tabindex="-1">
@@ -247,21 +298,57 @@ cssPrefix: pf-d-dashboard
247
298
  </li>
248
299
  <li class="pf-v6-c-breadcrumb__item">
249
300
  <span class="pf-v6-c-breadcrumb__item-divider">
250
- <i class="fas fa-angle-right" aria-hidden="true"></i>
301
+ <svg
302
+ class="pf-v6-svg"
303
+ viewBox="0 0 20 20"
304
+ fill="currentColor"
305
+ aria-hidden="true"
306
+ role="img"
307
+ width="1em"
308
+ height="1em"
309
+ >
310
+ <path
311
+ 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"
312
+ />
313
+ </svg>
251
314
  </span>
252
315
 
253
316
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
254
317
  </li>
255
318
  <li class="pf-v6-c-breadcrumb__item">
256
319
  <span class="pf-v6-c-breadcrumb__item-divider">
257
- <i class="fas fa-angle-right" aria-hidden="true"></i>
320
+ <svg
321
+ class="pf-v6-svg"
322
+ viewBox="0 0 20 20"
323
+ fill="currentColor"
324
+ aria-hidden="true"
325
+ role="img"
326
+ width="1em"
327
+ height="1em"
328
+ >
329
+ <path
330
+ 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"
331
+ />
332
+ </svg>
258
333
  </span>
259
334
 
260
335
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
261
336
  </li>
262
337
  <li class="pf-v6-c-breadcrumb__item">
263
338
  <span class="pf-v6-c-breadcrumb__item-divider">
264
- <i class="fas fa-angle-right" aria-hidden="true"></i>
339
+ <svg
340
+ class="pf-v6-svg"
341
+ viewBox="0 0 20 20"
342
+ fill="currentColor"
343
+ aria-hidden="true"
344
+ role="img"
345
+ width="1em"
346
+ height="1em"
347
+ >
348
+ <path
349
+ 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"
350
+ />
351
+ </svg>
265
352
  </span>
266
353
 
267
354
  <a
@@ -274,9 +361,15 @@ cssPrefix: pf-d-dashboard
274
361
  </nav>
275
362
  </div>
276
363
  </section>
277
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
364
+ <section
365
+ class="pf-v6-c-page__main-section pf-m-limit-width"
366
+ aria-labelledby="main-title"
367
+ >
278
368
  <div class="pf-v6-c-page__main-body">
279
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
369
+ <h1
370
+ class="pf-v6-c-content--h1 pf-m-page-title"
371
+ id="main-title"
372
+ >Main title</h1>
280
373
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
281
374
  </div>
282
375
  </section>
@@ -295,7 +388,19 @@ cssPrefix: pf-d-dashboard
295
388
  >
296
389
  <span class="pf-v6-c-button__icon pf-m-start">
297
390
  <span class="pf-v6-c-card__header-toggle-icon">
298
- <i class="fas fa-angle-right" aria-hidden="true"></i>
391
+ <svg
392
+ class="pf-v6-svg"
393
+ viewBox="0 0 20 20"
394
+ fill="currentColor"
395
+ aria-hidden="true"
396
+ role="img"
397
+ width="1em"
398
+ height="1em"
399
+ >
400
+ <path
401
+ 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"
402
+ />
403
+ </svg>
299
404
  </span>
300
405
  </span>
301
406
  </button>
@@ -309,7 +414,19 @@ cssPrefix: pf-d-dashboard
309
414
  id="dashboard-demo-expandable-status-card-1-action-kebab"
310
415
  >
311
416
  <span class="pf-v6-c-menu-toggle__icon">
312
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
417
+ <svg
418
+ class="pf-v6-svg"
419
+ viewBox="0 0 32 32"
420
+ fill="currentColor"
421
+ aria-hidden="true"
422
+ role="img"
423
+ width="1em"
424
+ height="1em"
425
+ >
426
+ <path
427
+ d="M12.25 5c0-2.068 1.683-3.75 3.75-3.75S19.75 2.932 19.75 5 18.067 8.75 16 8.75 12.25 7.068 12.25 5ZM16 12.25c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Zm0 11c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Z"
428
+ />
429
+ </svg>
313
430
  </span>
314
431
  </button>
315
432
  </div>
@@ -346,10 +463,19 @@ cssPrefix: pf-d-dashboard
346
463
  >
347
464
  <span class="pf-v6-c-label__content">
348
465
  <span class="pf-v6-c-label__icon">
349
- <i
350
- class="pf-v6-pficon pf-v6-pficon-port"
466
+ <svg
467
+ class="pf-v6-svg"
468
+ viewBox="0 0 32 32"
469
+ fill="currentColor"
351
470
  aria-hidden="true"
352
- ></i>
471
+ role="img"
472
+ width="1em"
473
+ height="1em"
474
+ >
475
+ <path
476
+ 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"
477
+ />
478
+ </svg>
353
479
  </span>
354
480
  <span
355
481
  class="pf-v6-c-label__text"
@@ -383,11 +509,25 @@ cssPrefix: pf-d-dashboard
383
509
  class="pf-v6-l-flex pf-m-space-items-sm pf-m-align-items-center pf-m-nowrap"
384
510
  style="row-gap: var(--pf-6-global--spacer--md);"
385
511
  >
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>
512
+ <span class="pf-v6-c-icon">
513
+ <span
514
+ class="pf-v6-c-icon__content pf-m-success"
515
+ >
516
+ <svg
517
+ class="pf-v6-svg"
518
+ viewBox="0 0 32 32"
519
+ fill="currentColor"
520
+ aria-hidden="true"
521
+ role="img"
522
+ width="1em"
523
+ height="1em"
524
+ >
525
+ <path
526
+ 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"
527
+ />
528
+ </svg>
529
+ </span>
530
+ </span>
391
531
  <p class="pf-v6-u-color-200">
392
532
  System reboot
393
533
  <b class="pf-v6-u-color-100">is not</b> required
@@ -403,7 +543,19 @@ cssPrefix: pf-d-dashboard
403
543
  >
404
544
  <span class="pf-v6-c-button__text">View pathway</span>
405
545
  <span class="pf-v6-c-button__icon pf-m-end">
406
- <i class="fas fa-arrow-right" aria-hidden="true"></i>
546
+ <svg
547
+ class="pf-v6-svg"
548
+ viewBox="0 0 448 512"
549
+ fill="currentColor"
550
+ aria-hidden="true"
551
+ role="img"
552
+ width="1em"
553
+ height="1em"
554
+ >
555
+ <path
556
+ 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"
557
+ />
558
+ </svg>
407
559
  </span>
408
560
  </a>
409
561
  </div>
@@ -436,10 +588,19 @@ cssPrefix: pf-d-dashboard
436
588
  >
437
589
  <span class="pf-v6-c-label__content">
438
590
  <span class="pf-v6-c-label__icon">
439
- <i
440
- class="fas fa-cube"
591
+ <svg
592
+ class="pf-v6-svg"
593
+ viewBox="0 0 32 32"
594
+ fill="currentColor"
441
595
  aria-hidden="true"
442
- ></i>
596
+ role="img"
597
+ width="1em"
598
+ height="1em"
599
+ >
600
+ <path
601
+ 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"
602
+ />
603
+ </svg>
443
604
  </span>
444
605
  <span
445
606
  class="pf-v6-c-label__text"
@@ -473,11 +634,23 @@ cssPrefix: pf-d-dashboard
473
634
  class="pf-v6-l-flex pf-m-space-items-sm pf-m-align-items-center pf-m-nowrap"
474
635
  style="row-gap: var(--pf-6-global--spacer--md);"
475
636
  >
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>
637
+ <span class="pf-v6-c-icon">
638
+ <span class="pf-v6-c-icon__content pf-m-danger">
639
+ <svg
640
+ class="pf-v6-svg"
641
+ viewBox="0 0 32 32"
642
+ fill="currentColor"
643
+ aria-hidden="true"
644
+ role="img"
645
+ width="1em"
646
+ height="1em"
647
+ >
648
+ <path
649
+ 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"
650
+ />
651
+ </svg>
652
+ </span>
653
+ </span>
481
654
  <p class="pf-v6-u-color-200">
482
655
  System reboot
483
656
  <b class="pf-v6-u-color-100">is</b> required
@@ -493,7 +666,19 @@ cssPrefix: pf-d-dashboard
493
666
  >
494
667
  <span class="pf-v6-c-button__text">View pathway</span>
495
668
  <span class="pf-v6-c-button__icon pf-m-end">
496
- <i class="fas fa-arrow-right" aria-hidden="true"></i>
669
+ <svg
670
+ class="pf-v6-svg"
671
+ viewBox="0 0 448 512"
672
+ fill="currentColor"
673
+ aria-hidden="true"
674
+ role="img"
675
+ width="1em"
676
+ height="1em"
677
+ >
678
+ <path
679
+ 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"
680
+ />
681
+ </svg>
497
682
  </span>
498
683
  </a>
499
684
  </div>
@@ -526,10 +711,19 @@ cssPrefix: pf-d-dashboard
526
711
  >
527
712
  <span class="pf-v6-c-label__content">
528
713
  <span class="pf-v6-c-label__icon">
529
- <i
530
- class="pf-v6-pficon pf-v6-pficon-automation"
714
+ <svg
715
+ class="pf-v6-svg"
716
+ viewBox="0 0 32 32"
717
+ fill="currentColor"
531
718
  aria-hidden="true"
532
- ></i>
719
+ role="img"
720
+ width="1em"
721
+ height="1em"
722
+ >
723
+ <path
724
+ 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"
725
+ />
726
+ </svg>
533
727
  </span>
534
728
  <span
535
729
  class="pf-v6-c-label__text"
@@ -563,11 +757,25 @@ cssPrefix: pf-d-dashboard
563
757
  class="pf-v6-l-flex pf-m-space-items-sm pf-m-align-items-center pf-m-nowrap"
564
758
  style="row-gap: var(--pf-6-global--spacer--md);"
565
759
  >
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>
760
+ <span class="pf-v6-c-icon">
761
+ <span
762
+ class="pf-v6-c-icon__content pf-m-success"
763
+ >
764
+ <svg
765
+ class="pf-v6-svg"
766
+ viewBox="0 0 32 32"
767
+ fill="currentColor"
768
+ aria-hidden="true"
769
+ role="img"
770
+ width="1em"
771
+ height="1em"
772
+ >
773
+ <path
774
+ 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"
775
+ />
776
+ </svg>
777
+ </span>
778
+ </span>
571
779
  <p class="pf-v6-u-color-200">
572
780
  System reboot
573
781
  <b class="pf-v6-u-color-100">is not</b> required
@@ -583,7 +791,19 @@ cssPrefix: pf-d-dashboard
583
791
  >
584
792
  <span class="pf-v6-c-button__text">View pathway</span>
585
793
  <span class="pf-v6-c-button__icon pf-m-end">
586
- <i class="fas fa-arrow-right" aria-hidden="true"></i>
794
+ <svg
795
+ class="pf-v6-svg"
796
+ viewBox="0 0 448 512"
797
+ fill="currentColor"
798
+ aria-hidden="true"
799
+ role="img"
800
+ width="1em"
801
+ height="1em"
802
+ >
803
+ <path
804
+ 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"
805
+ />
806
+ </svg>
587
807
  </span>
588
808
  </a>
589
809
  </div>
@@ -597,10 +817,7 @@ cssPrefix: pf-d-dashboard
597
817
  style="--pf-v6-l-grid--item--Order-on-lg:3"
598
818
  >
599
819
  <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
- >
820
+ <div class="pf-v6-c-card" id="dashboard-demo-status-card-1">
604
821
  <div class="pf-v6-c-card__header">
605
822
  <h2 class="pf-v6-c-title pf-m-xl">Status</h2>
606
823
  </div>
@@ -611,10 +828,23 @@ cssPrefix: pf-d-dashboard
611
828
  >
612
829
  <div class="pf-v6-l-flex pf-m-space-items-sm pf-m-nowrap">
613
830
  <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>
831
+ <span class="pf-v6-c-icon">
832
+ <span class="pf-v6-c-icon__content pf-m-success">
833
+ <svg
834
+ class="pf-v6-svg"
835
+ viewBox="0 0 32 32"
836
+ fill="currentColor"
837
+ aria-hidden="true"
838
+ role="img"
839
+ width="1em"
840
+ height="1em"
841
+ >
842
+ <path
843
+ 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"
844
+ />
845
+ </svg>
846
+ </span>
847
+ </span>
618
848
  </div>
619
849
  <div class="pf-v6-l-flex__item">
620
850
  <span>Cluster</span>
@@ -622,10 +852,23 @@ cssPrefix: pf-d-dashboard
622
852
  </div>
623
853
  <div class="pf-v6-l-flex pf-m-space-items-sm pf-m-nowrap">
624
854
  <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>
855
+ <span class="pf-v6-c-icon">
856
+ <span class="pf-v6-c-icon__content pf-m-danger">
857
+ <svg
858
+ class="pf-v6-svg"
859
+ viewBox="0 0 32 32"
860
+ fill="currentColor"
861
+ aria-hidden="true"
862
+ role="img"
863
+ width="1em"
864
+ height="1em"
865
+ >
866
+ <path
867
+ 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"
868
+ />
869
+ </svg>
870
+ </span>
871
+ </span>
629
872
  </div>
630
873
  <div class="pf-v6-l-flex__item pf-v6-u-text-nowrap">
631
874
  <span class="popover-parent">
@@ -635,10 +878,23 @@ cssPrefix: pf-d-dashboard
635
878
  </div>
636
879
  <div class="pf-v6-l-flex pf-m-space-items-sm pf-m-nowrap">
637
880
  <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>
881
+ <span class="pf-v6-c-icon">
882
+ <span class="pf-v6-c-icon__content pf-m-danger">
883
+ <svg
884
+ class="pf-v6-svg"
885
+ viewBox="0 0 32 32"
886
+ fill="currentColor"
887
+ aria-hidden="true"
888
+ role="img"
889
+ width="1em"
890
+ height="1em"
891
+ >
892
+ <path
893
+ 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"
894
+ />
895
+ </svg>
896
+ </span>
897
+ </span>
642
898
  </div>
643
899
  <div
644
900
  class="pf-v6-l-flex pf-m-column pf-m-space-items-none"
@@ -653,10 +909,23 @@ cssPrefix: pf-d-dashboard
653
909
  </div>
654
910
  <div class="pf-v6-l-flex pf-m-space-items-sm pf-m-nowrap">
655
911
  <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>
912
+ <span class="pf-v6-c-icon">
913
+ <span class="pf-v6-c-icon__content pf-m-success">
914
+ <svg
915
+ class="pf-v6-svg"
916
+ viewBox="0 0 32 32"
917
+ fill="currentColor"
918
+ aria-hidden="true"
919
+ role="img"
920
+ width="1em"
921
+ height="1em"
922
+ >
923
+ <path
924
+ 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"
925
+ />
926
+ </svg>
927
+ </span>
928
+ </span>
660
929
  </div>
661
930
  <div
662
931
  class="pf-v6-l-flex pf-m-column pf-m-space-items-none"
@@ -671,10 +940,23 @@ cssPrefix: pf-d-dashboard
671
940
  </div>
672
941
  <div class="pf-v6-l-flex pf-m-space-items-sm pf-m-nowrap">
673
942
  <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>
943
+ <span class="pf-v6-c-icon">
944
+ <span class="pf-v6-c-icon__content pf-m-success">
945
+ <svg
946
+ class="pf-v6-svg"
947
+ viewBox="0 0 32 32"
948
+ fill="currentColor"
949
+ aria-hidden="true"
950
+ role="img"
951
+ width="1em"
952
+ height="1em"
953
+ >
954
+ <path
955
+ 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"
956
+ />
957
+ </svg>
958
+ </span>
959
+ </span>
678
960
  </div>
679
961
  <div
680
962
  class="pf-v6-l-flex pf-m-column pf-m-space-items-none"
@@ -689,10 +971,23 @@ cssPrefix: pf-d-dashboard
689
971
  </div>
690
972
  <div class="pf-v6-l-flex pf-m-space-items-sm pf-m-nowrap">
691
973
  <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>
974
+ <span class="pf-v6-c-icon">
975
+ <span class="pf-v6-c-icon__content pf-m-success">
976
+ <svg
977
+ class="pf-v6-svg"
978
+ viewBox="0 0 32 32"
979
+ fill="currentColor"
980
+ aria-hidden="true"
981
+ role="img"
982
+ width="1em"
983
+ height="1em"
984
+ >
985
+ <path
986
+ 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"
987
+ />
988
+ </svg>
989
+ </span>
990
+ </span>
696
991
  </div>
697
992
  <div
698
993
  class="pf-v6-l-flex pf-m-column pf-m-space-items-none"
@@ -704,10 +999,23 @@ cssPrefix: pf-d-dashboard
704
999
  </div>
705
1000
  <div class="pf-v6-l-flex pf-m-space-items-sm pf-m-nowrap">
706
1001
  <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>
1002
+ <span class="pf-v6-c-icon">
1003
+ <span class="pf-v6-c-icon__content pf-m-success">
1004
+ <svg
1005
+ class="pf-v6-svg"
1006
+ viewBox="0 0 32 32"
1007
+ fill="currentColor"
1008
+ aria-hidden="true"
1009
+ role="img"
1010
+ width="1em"
1011
+ height="1em"
1012
+ >
1013
+ <path
1014
+ 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"
1015
+ />
1016
+ </svg>
1017
+ </span>
1018
+ </span>
711
1019
  </div>
712
1020
  <div
713
1021
  class="pf-v6-l-flex pf-m-column pf-m-space-items-none"
@@ -814,7 +1122,19 @@ cssPrefix: pf-d-dashboard
814
1122
  <span
815
1123
  class="pf-v6-c-notification-drawer__group-toggle-icon"
816
1124
  >
817
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1125
+ <svg
1126
+ class="pf-v6-svg"
1127
+ viewBox="0 0 20 20"
1128
+ fill="currentColor"
1129
+ aria-hidden="true"
1130
+ role="img"
1131
+ width="1em"
1132
+ height="1em"
1133
+ >
1134
+ <path
1135
+ 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"
1136
+ />
1137
+ </svg>
818
1138
  </span>
819
1139
  </button>
820
1140
  <ul
@@ -832,10 +1152,19 @@ cssPrefix: pf-d-dashboard
832
1152
  <span
833
1153
  class="pf-v6-c-notification-drawer__list-item-header-icon"
834
1154
  >
835
- <i
836
- class="fas fa-exclamation-circle"
1155
+ <svg
1156
+ class="pf-v6-svg"
1157
+ viewBox="0 0 32 32"
1158
+ fill="currentColor"
837
1159
  aria-hidden="true"
838
- ></i>
1160
+ role="img"
1161
+ width="1em"
1162
+ height="1em"
1163
+ >
1164
+ <path
1165
+ 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"
1166
+ />
1167
+ </svg>
839
1168
  </span>
840
1169
  <h2
841
1170
  class="pf-v6-c-notification-drawer__list-item-header-title"
@@ -860,10 +1189,19 @@ cssPrefix: pf-d-dashboard
860
1189
  <span
861
1190
  class="pf-v6-c-notification-drawer__list-item-header-icon"
862
1191
  >
863
- <i
864
- class="fas fa-exclamation-triangle"
1192
+ <svg
1193
+ class="pf-v6-svg"
1194
+ viewBox="0 0 32 32"
1195
+ fill="currentColor"
865
1196
  aria-hidden="true"
866
- ></i>
1197
+ role="img"
1198
+ width="1em"
1199
+ height="1em"
1200
+ >
1201
+ <path
1202
+ 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"
1203
+ />
1204
+ </svg>
867
1205
  </span>
868
1206
  <h2
869
1207
  class="pf-v6-c-notification-drawer__list-item-header-title"
@@ -896,10 +1234,19 @@ cssPrefix: pf-d-dashboard
896
1234
  <span class="pf-v6-c-menu-toggle__text">24 hours</span>
897
1235
  <span class="pf-v6-c-menu-toggle__controls">
898
1236
  <span class="pf-v6-c-menu-toggle__toggle-icon">
899
- <i
900
- class="fas fa-caret-down fa-fw"
1237
+ <svg
1238
+ class="pf-v6-svg"
1239
+ viewBox="0 0 20 20"
1240
+ fill="currentColor"
901
1241
  aria-hidden="true"
902
- ></i>
1242
+ role="img"
1243
+ width="1em"
1244
+ height="1em"
1245
+ >
1246
+ <path
1247
+ d="M18.92 5.62C18.77 5.25 18.4 5 18 5H2a1.003 1.003 0 0 0-.71 1.71l7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65c.29-.29.37-.72.22-1.09Z"
1248
+ />
1249
+ </svg>
903
1250
  </span>
904
1251
  </span>
905
1252
  </button>
@@ -926,7 +1273,19 @@ cssPrefix: pf-d-dashboard
926
1273
  >
927
1274
  <span class="pf-v6-c-button__icon pf-m-start">
928
1275
  <span class="pf-v6-c-card__header-toggle-icon">
929
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1276
+ <svg
1277
+ class="pf-v6-svg"
1278
+ viewBox="0 0 20 20"
1279
+ fill="currentColor"
1280
+ aria-hidden="true"
1281
+ role="img"
1282
+ width="1em"
1283
+ height="1em"
1284
+ >
1285
+ <path
1286
+ 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"
1287
+ />
1288
+ </svg>
930
1289
  </span>
931
1290
  </span>
932
1291
  </button>
@@ -1037,7 +1396,19 @@ cssPrefix: pf-d-dashboard
1037
1396
  >
1038
1397
  <span class="pf-v6-c-button__icon pf-m-start">
1039
1398
  <span class="pf-v6-c-card__header-toggle-icon">
1040
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1399
+ <svg
1400
+ class="pf-v6-svg"
1401
+ viewBox="0 0 20 20"
1402
+ fill="currentColor"
1403
+ aria-hidden="true"
1404
+ role="img"
1405
+ width="1em"
1406
+ height="1em"
1407
+ >
1408
+ <path
1409
+ 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"
1410
+ />
1411
+ </svg>
1041
1412
  </span>
1042
1413
  </span>
1043
1414
  </button>
@@ -1065,7 +1436,19 @@ cssPrefix: pf-d-dashboard
1065
1436
  >
1066
1437
  <span class="pf-v6-c-button__icon pf-m-start">
1067
1438
  <span class="pf-v6-c-card__header-toggle-icon">
1068
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1439
+ <svg
1440
+ class="pf-v6-svg"
1441
+ viewBox="0 0 20 20"
1442
+ fill="currentColor"
1443
+ aria-hidden="true"
1444
+ role="img"
1445
+ width="1em"
1446
+ height="1em"
1447
+ >
1448
+ <path
1449
+ 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"
1450
+ />
1451
+ </svg>
1069
1452
  </span>
1070
1453
  </span>
1071
1454
  </button>
@@ -1237,10 +1620,25 @@ cssPrefix: pf-d-dashboard
1237
1620
  <a href="#">
1238
1621
  <div class="pf-v6-l-flex pf-m-space-items-sm">
1239
1622
  <span>3</span>
1240
- <i
1241
- class="fas fa-check-circle pf-v6-u-success-color-100"
1242
- aria-hidden="true"
1243
- ></i>
1623
+ <span class="pf-v6-c-icon">
1624
+ <span
1625
+ class="pf-v6-c-icon__content pf-m-success"
1626
+ >
1627
+ <svg
1628
+ class="pf-v6-svg"
1629
+ viewBox="0 0 32 32"
1630
+ fill="currentColor"
1631
+ aria-hidden="true"
1632
+ role="img"
1633
+ width="1em"
1634
+ height="1em"
1635
+ >
1636
+ <path
1637
+ 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"
1638
+ />
1639
+ </svg>
1640
+ </span>
1641
+ </span>
1244
1642
  </div>
1245
1643
  </a>
1246
1644
  </div>
@@ -1260,10 +1658,25 @@ cssPrefix: pf-d-dashboard
1260
1658
  <a href="#">
1261
1659
  <div class="pf-v6-l-flex pf-m-space-items-sm">
1262
1660
  <span>8</span>
1263
- <i
1264
- class="fas fa-check-circle pf-v6-u-success-color-100"
1265
- aria-hidden="true"
1266
- ></i>
1661
+ <span class="pf-v6-c-icon">
1662
+ <span
1663
+ class="pf-v6-c-icon__content pf-m-success"
1664
+ >
1665
+ <svg
1666
+ class="pf-v6-svg"
1667
+ viewBox="0 0 32 32"
1668
+ fill="currentColor"
1669
+ aria-hidden="true"
1670
+ role="img"
1671
+ width="1em"
1672
+ height="1em"
1673
+ >
1674
+ <path
1675
+ 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"
1676
+ />
1677
+ </svg>
1678
+ </span>
1679
+ </span>
1267
1680
  </div>
1268
1681
  </a>
1269
1682
  </div>
@@ -1283,10 +1696,25 @@ cssPrefix: pf-d-dashboard
1283
1696
  <a href="#">
1284
1697
  <div class="pf-v6-l-flex pf-m-space-items-sm">
1285
1698
  <span>20</span>
1286
- <i
1287
- class="fas fa-check-circle pf-v6-u-success-color-100"
1288
- aria-hidden="true"
1289
- ></i>
1699
+ <span class="pf-v6-c-icon">
1700
+ <span
1701
+ class="pf-v6-c-icon__content pf-m-success"
1702
+ >
1703
+ <svg
1704
+ class="pf-v6-svg"
1705
+ viewBox="0 0 32 32"
1706
+ fill="currentColor"
1707
+ aria-hidden="true"
1708
+ role="img"
1709
+ width="1em"
1710
+ height="1em"
1711
+ >
1712
+ <path
1713
+ 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"
1714
+ />
1715
+ </svg>
1716
+ </span>
1717
+ </span>
1290
1718
  </div>
1291
1719
  </a>
1292
1720
  </div>
@@ -1306,10 +1734,25 @@ cssPrefix: pf-d-dashboard
1306
1734
  <a href="#">
1307
1735
  <div class="pf-v6-l-flex pf-m-space-items-sm">
1308
1736
  <span>12</span>
1309
- <i
1310
- class="fas fa-check-circle pf-v6-u-success-color-100"
1311
- aria-hidden="true"
1312
- ></i>
1737
+ <span class="pf-v6-c-icon">
1738
+ <span
1739
+ class="pf-v6-c-icon__content pf-m-success"
1740
+ >
1741
+ <svg
1742
+ class="pf-v6-svg"
1743
+ viewBox="0 0 32 32"
1744
+ fill="currentColor"
1745
+ aria-hidden="true"
1746
+ role="img"
1747
+ width="1em"
1748
+ height="1em"
1749
+ >
1750
+ <path
1751
+ 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"
1752
+ />
1753
+ </svg>
1754
+ </span>
1755
+ </span>
1313
1756
  </div>
1314
1757
  </a>
1315
1758
  </div>
@@ -1329,10 +1772,25 @@ cssPrefix: pf-d-dashboard
1329
1772
  <a href="#">
1330
1773
  <div class="pf-v6-l-flex pf-m-space-items-sm">
1331
1774
  <span>18</span>
1332
- <i
1333
- class="fas fa-check-circle pf-v6-u-success-color-100"
1334
- aria-hidden="true"
1335
- ></i>
1775
+ <span class="pf-v6-c-icon">
1776
+ <span
1777
+ class="pf-v6-c-icon__content pf-m-success"
1778
+ >
1779
+ <svg
1780
+ class="pf-v6-svg"
1781
+ viewBox="0 0 32 32"
1782
+ fill="currentColor"
1783
+ aria-hidden="true"
1784
+ role="img"
1785
+ width="1em"
1786
+ height="1em"
1787
+ >
1788
+ <path
1789
+ 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"
1790
+ />
1791
+ </svg>
1792
+ </span>
1793
+ </span>
1336
1794
  </div>
1337
1795
  </a>
1338
1796
  </div>
@@ -1361,10 +1819,19 @@ cssPrefix: pf-d-dashboard
1361
1819
  <span class="pf-v6-c-menu-toggle__text">Status</span>
1362
1820
  <span class="pf-v6-c-menu-toggle__controls">
1363
1821
  <span class="pf-v6-c-menu-toggle__toggle-icon">
1364
- <i
1365
- class="fas fa-caret-down fa-fw"
1822
+ <svg
1823
+ class="pf-v6-svg"
1824
+ viewBox="0 0 20 20"
1825
+ fill="currentColor"
1366
1826
  aria-hidden="true"
1367
- ></i>
1827
+ role="img"
1828
+ width="1em"
1829
+ height="1em"
1830
+ >
1831
+ <path
1832
+ d="M18.92 5.62C18.77 5.25 18.4 5 18 5H2a1.003 1.003 0 0 0-.71 1.71l7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65c.29-.29.37-.72.22-1.09Z"
1833
+ />
1834
+ </svg>
1368
1835
  </span>
1369
1836
  </span>
1370
1837
  </button>
@@ -1386,10 +1853,23 @@ cssPrefix: pf-d-dashboard
1386
1853
  <dt class="pf-v6-c-description-list__term">
1387
1854
  <div class="pf-v6-l-flex pf-m-nowrap">
1388
1855
  <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>
1856
+ <span class="pf-v6-c-icon">
1857
+ <span class="pf-v6-c-icon__content pf-m-danger">
1858
+ <svg
1859
+ class="pf-v6-svg"
1860
+ viewBox="0 0 32 32"
1861
+ fill="currentColor"
1862
+ aria-hidden="true"
1863
+ role="img"
1864
+ width="1em"
1865
+ height="1em"
1866
+ >
1867
+ <path
1868
+ 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"
1869
+ />
1870
+ </svg>
1871
+ </span>
1872
+ </span>
1393
1873
  </div>
1394
1874
  <div
1395
1875
  class="pf-v6-l-flex__item"
@@ -1413,10 +1893,25 @@ cssPrefix: pf-d-dashboard
1413
1893
  <dt class="pf-v6-c-description-list__term">
1414
1894
  <div class="pf-v6-l-flex pf-m-nowrap">
1415
1895
  <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>
1896
+ <span class="pf-v6-c-icon">
1897
+ <span
1898
+ class="pf-v6-c-icon__content pf-m-success"
1899
+ >
1900
+ <svg
1901
+ class="pf-v6-svg"
1902
+ viewBox="0 0 32 32"
1903
+ fill="currentColor"
1904
+ aria-hidden="true"
1905
+ role="img"
1906
+ width="1em"
1907
+ height="1em"
1908
+ >
1909
+ <path
1910
+ 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"
1911
+ />
1912
+ </svg>
1913
+ </span>
1914
+ </span>
1420
1915
  </div>
1421
1916
  <div
1422
1917
  class="pf-v6-l-flex__item"
@@ -1475,10 +1970,25 @@ cssPrefix: pf-d-dashboard
1475
1970
  <dt class="pf-v6-c-description-list__term">
1476
1971
  <div class="pf-v6-l-flex pf-m-nowrap">
1477
1972
  <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>
1973
+ <span class="pf-v6-c-icon">
1974
+ <span
1975
+ class="pf-v6-c-icon__content pf-m-success"
1976
+ >
1977
+ <svg
1978
+ class="pf-v6-svg"
1979
+ viewBox="0 0 32 32"
1980
+ fill="currentColor"
1981
+ aria-hidden="true"
1982
+ role="img"
1983
+ width="1em"
1984
+ height="1em"
1985
+ >
1986
+ <path
1987
+ 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"
1988
+ />
1989
+ </svg>
1990
+ </span>
1991
+ </span>
1482
1992
  </div>
1483
1993
  <div class="pf-v6-l-flex__item">Created container</div>
1484
1994
  </div>
@@ -1501,10 +2011,25 @@ cssPrefix: pf-d-dashboard
1501
2011
  <dt class="pf-v6-c-description-list__term">
1502
2012
  <div class="pf-v6-l-flex pf-m-nowrap">
1503
2013
  <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>
2014
+ <span class="pf-v6-c-icon">
2015
+ <span
2016
+ class="pf-v6-c-icon__content pf-m-warning"
2017
+ >
2018
+ <svg
2019
+ class="pf-v6-svg"
2020
+ viewBox="0 0 32 32"
2021
+ fill="currentColor"
2022
+ aria-hidden="true"
2023
+ role="img"
2024
+ width="1em"
2025
+ height="1em"
2026
+ >
2027
+ <path
2028
+ 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"
2029
+ />
2030
+ </svg>
2031
+ </span>
2032
+ </span>
1508
2033
  </div>
1509
2034
  <div
1510
2035
  class="pf-v6-l-flex__item"
@@ -1529,10 +2054,23 @@ cssPrefix: pf-d-dashboard
1529
2054
  <dt class="pf-v6-c-description-list__term">
1530
2055
  <div class="pf-v6-l-flex pf-m-nowrap">
1531
2056
  <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>
2057
+ <span class="pf-v6-c-icon">
2058
+ <span class="pf-v6-c-icon__content pf-m-danger">
2059
+ <svg
2060
+ class="pf-v6-svg"
2061
+ viewBox="0 0 32 32"
2062
+ fill="currentColor"
2063
+ aria-hidden="true"
2064
+ role="img"
2065
+ width="1em"
2066
+ height="1em"
2067
+ >
2068
+ <path
2069
+ 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"
2070
+ />
2071
+ </svg>
2072
+ </span>
2073
+ </span>
1536
2074
  </div>
1537
2075
  <div class="pf-v6-l-flex__item">Rook-osd-10-328949</div>
1538
2076
  </div>
@@ -1555,10 +2093,25 @@ cssPrefix: pf-d-dashboard
1555
2093
  <dt class="pf-v6-c-description-list__term">
1556
2094
  <div class="pf-v6-l-flex pf-m-nowrap">
1557
2095
  <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>
2096
+ <span class="pf-v6-c-icon">
2097
+ <span
2098
+ class="pf-v6-c-icon__content pf-m-success"
2099
+ >
2100
+ <svg
2101
+ class="pf-v6-svg"
2102
+ viewBox="0 0 32 32"
2103
+ fill="currentColor"
2104
+ aria-hidden="true"
2105
+ role="img"
2106
+ width="1em"
2107
+ height="1em"
2108
+ >
2109
+ <path
2110
+ 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"
2111
+ />
2112
+ </svg>
2113
+ </span>
2114
+ </span>
1562
2115
  </div>
1563
2116
  <div class="pf-v6-l-flex__item">Created container</div>
1564
2117
  </div>
@@ -1581,10 +2134,25 @@ cssPrefix: pf-d-dashboard
1581
2134
  <dt class="pf-v6-c-description-list__term">
1582
2135
  <div class="pf-v6-l-flex pf-m-nowrap">
1583
2136
  <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>
2137
+ <span class="pf-v6-c-icon">
2138
+ <span
2139
+ class="pf-v6-c-icon__content pf-m-success"
2140
+ >
2141
+ <svg
2142
+ class="pf-v6-svg"
2143
+ viewBox="0 0 32 32"
2144
+ fill="currentColor"
2145
+ aria-hidden="true"
2146
+ role="img"
2147
+ width="1em"
2148
+ height="1em"
2149
+ >
2150
+ <path
2151
+ 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"
2152
+ />
2153
+ </svg>
2154
+ </span>
2155
+ </span>
1588
2156
  </div>
1589
2157
  <div class="pf-v6-l-flex__item">Created container</div>
1590
2158
  </div>