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

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 +222 -73
  66. package/components/Drawer/drawer.scss +191 -26
  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 +2047 -721
  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 +2908 -1087
  385. package/patternfly.css +2915 -1087
  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/components/Panel/examples/Panel.md CHANGED
@@ -157,6 +157,17 @@ cssPrefix: pf-v6-c-panel
157
157
 
158
158
  ```
159
159
 
160
+ ### Pill
161
+
162
+ ```html
163
+ <div class="pf-v6-c-panel pf-m-pill">
164
+ <div class="pf-v6-c-panel__main">
165
+ <div class="pf-v6-c-panel__main-body">Main content</div>
166
+ </div>
167
+ </div>
168
+
169
+ ```
170
+
160
171
  ## Documentation
161
172
 
162
173
  ### Usage
@@ -173,3 +184,4 @@ cssPrefix: pf-v6-c-panel
173
184
  | `.pf-m-raised` | `.pf-v6-c-panel` | Modifies the panel for raised styles. |
174
185
  | `.pf-m-scrollable` | `.pf-v6-c-panel` | Modifies the panel for scrollable styles. |
175
186
  | `.pf-m-secondary` | `.pf-v6-c-panel` | Modifies the panel for secondary styles. |
187
+ | `.pf-m-pill` | `.pf-v6-c-panel` | Modifies the panel for pill border radius. |
package/docs/components/Popover/examples/Popover.md CHANGED
@@ -25,7 +25,19 @@ cssPrefix: pf-v6-c-popover
25
25
  aria-label="Close"
26
26
  >
27
27
  <span class="pf-v6-c-button__icon">
28
- <i class="fas fa-times" aria-hidden="true"></i>
28
+ <svg
29
+ class="pf-v6-svg"
30
+ viewBox="0 0 20 20"
31
+ fill="currentColor"
32
+ aria-hidden="true"
33
+ role="img"
34
+ width="1em"
35
+ height="1em"
36
+ >
37
+ <path
38
+ d="M17.8 16.2 11.59 10l6.21-6.21c.42-.46.39-1.17-.07-1.59-.43-.4-1.09-.4-1.52 0l-6.2 6.2-6.22-6.19c-.44-.44-1.15-.44-1.59 0-.44.44-.44 1.15 0 1.59l6.2 6.21-6.2 6.2c-.42.46-.39 1.17.07 1.59.43.4 1.09.4 1.52 0L10 11.59l6.2 6.2c.44.44 1.15.44 1.59 0 .44-.45.44-1.16 0-1.6Z"
39
+ />
40
+ </svg>
29
41
  </span>
30
42
  </button>
31
43
  </div>
@@ -63,7 +75,19 @@ cssPrefix: pf-v6-c-popover
63
75
  aria-label="Close"
64
76
  >
65
77
  <span class="pf-v6-c-button__icon">
66
- <i class="fas fa-times" aria-hidden="true"></i>
78
+ <svg
79
+ class="pf-v6-svg"
80
+ viewBox="0 0 20 20"
81
+ fill="currentColor"
82
+ aria-hidden="true"
83
+ role="img"
84
+ width="1em"
85
+ height="1em"
86
+ >
87
+ <path
88
+ d="M17.8 16.2 11.59 10l6.21-6.21c.42-.46.39-1.17-.07-1.59-.43-.4-1.09-.4-1.52 0l-6.2 6.2-6.22-6.19c-.44-.44-1.15-.44-1.59 0-.44.44-.44 1.15 0 1.59l6.2 6.21-6.2 6.2c-.42.46-.39 1.17.07 1.59.43.4 1.09.4 1.52 0L10 11.59l6.2 6.2c.44.44 1.15.44 1.59 0 .44-.45.44-1.16 0-1.6Z"
89
+ />
90
+ </svg>
67
91
  </span>
68
92
  </button>
69
93
  </div>
@@ -101,7 +125,19 @@ cssPrefix: pf-v6-c-popover
101
125
  aria-label="Close"
102
126
  >
103
127
  <span class="pf-v6-c-button__icon">
104
- <i class="fas fa-times" aria-hidden="true"></i>
128
+ <svg
129
+ class="pf-v6-svg"
130
+ viewBox="0 0 20 20"
131
+ fill="currentColor"
132
+ aria-hidden="true"
133
+ role="img"
134
+ width="1em"
135
+ height="1em"
136
+ >
137
+ <path
138
+ d="M17.8 16.2 11.59 10l6.21-6.21c.42-.46.39-1.17-.07-1.59-.43-.4-1.09-.4-1.52 0l-6.2 6.2-6.22-6.19c-.44-.44-1.15-.44-1.59 0-.44.44-.44 1.15 0 1.59l6.2 6.21-6.2 6.2c-.42.46-.39 1.17.07 1.59.43.4 1.09.4 1.52 0L10 11.59l6.2 6.2c.44.44 1.15.44 1.59 0 .44-.45.44-1.16 0-1.6Z"
139
+ />
140
+ </svg>
105
141
  </span>
106
142
  </button>
107
143
  </div>
@@ -139,7 +175,19 @@ cssPrefix: pf-v6-c-popover
139
175
  aria-label="Close"
140
176
  >
141
177
  <span class="pf-v6-c-button__icon">
142
- <i class="fas fa-times" aria-hidden="true"></i>
178
+ <svg
179
+ class="pf-v6-svg"
180
+ viewBox="0 0 20 20"
181
+ fill="currentColor"
182
+ aria-hidden="true"
183
+ role="img"
184
+ width="1em"
185
+ height="1em"
186
+ >
187
+ <path
188
+ d="M17.8 16.2 11.59 10l6.21-6.21c.42-.46.39-1.17-.07-1.59-.43-.4-1.09-.4-1.52 0l-6.2 6.2-6.22-6.19c-.44-.44-1.15-.44-1.59 0-.44.44-.44 1.15 0 1.59l6.2 6.21-6.2 6.2c-.42.46-.39 1.17.07 1.59.43.4 1.09.4 1.52 0L10 11.59l6.2 6.2c.44.44 1.15.44 1.59 0 .44-.45.44-1.16 0-1.6Z"
189
+ />
190
+ </svg>
143
191
  </span>
144
192
  </button>
145
193
  </div>
@@ -177,7 +225,19 @@ cssPrefix: pf-v6-c-popover
177
225
  aria-label="Close"
178
226
  >
179
227
  <span class="pf-v6-c-button__icon">
180
- <i class="fas fa-times" aria-hidden="true"></i>
228
+ <svg
229
+ class="pf-v6-svg"
230
+ viewBox="0 0 20 20"
231
+ fill="currentColor"
232
+ aria-hidden="true"
233
+ role="img"
234
+ width="1em"
235
+ height="1em"
236
+ >
237
+ <path
238
+ d="M17.8 16.2 11.59 10l6.21-6.21c.42-.46.39-1.17-.07-1.59-.43-.4-1.09-.4-1.52 0l-6.2 6.2-6.22-6.19c-.44-.44-1.15-.44-1.59 0-.44.44-.44 1.15 0 1.59l6.2 6.21-6.2 6.2c-.42.46-.39 1.17.07 1.59.43.4 1.09.4 1.52 0L10 11.59l6.2 6.2c.44.44 1.15.44 1.59 0 .44-.45.44-1.16 0-1.6Z"
239
+ />
240
+ </svg>
181
241
  </span>
182
242
  </button>
183
243
  </div>
@@ -215,7 +275,19 @@ cssPrefix: pf-v6-c-popover
215
275
  aria-label="Close"
216
276
  >
217
277
  <span class="pf-v6-c-button__icon">
218
- <i class="fas fa-times" aria-hidden="true"></i>
278
+ <svg
279
+ class="pf-v6-svg"
280
+ viewBox="0 0 20 20"
281
+ fill="currentColor"
282
+ aria-hidden="true"
283
+ role="img"
284
+ width="1em"
285
+ height="1em"
286
+ >
287
+ <path
288
+ d="M17.8 16.2 11.59 10l6.21-6.21c.42-.46.39-1.17-.07-1.59-.43-.4-1.09-.4-1.52 0l-6.2 6.2-6.22-6.19c-.44-.44-1.15-.44-1.59 0-.44.44-.44 1.15 0 1.59l6.2 6.21-6.2 6.2c-.42.46-.39 1.17.07 1.59.43.4 1.09.4 1.52 0L10 11.59l6.2 6.2c.44.44 1.15.44 1.59 0 .44-.45.44-1.16 0-1.6Z"
289
+ />
290
+ </svg>
219
291
  </span>
220
292
  </button>
221
293
  </div>
@@ -253,7 +325,19 @@ cssPrefix: pf-v6-c-popover
253
325
  aria-label="Close"
254
326
  >
255
327
  <span class="pf-v6-c-button__icon">
256
- <i class="fas fa-times" aria-hidden="true"></i>
328
+ <svg
329
+ class="pf-v6-svg"
330
+ viewBox="0 0 20 20"
331
+ fill="currentColor"
332
+ aria-hidden="true"
333
+ role="img"
334
+ width="1em"
335
+ height="1em"
336
+ >
337
+ <path
338
+ d="M17.8 16.2 11.59 10l6.21-6.21c.42-.46.39-1.17-.07-1.59-.43-.4-1.09-.4-1.52 0l-6.2 6.2-6.22-6.19c-.44-.44-1.15-.44-1.59 0-.44.44-.44 1.15 0 1.59l6.2 6.21-6.2 6.2c-.42.46-.39 1.17.07 1.59.43.4 1.09.4 1.52 0L10 11.59l6.2 6.2c.44.44 1.15.44 1.59 0 .44-.45.44-1.16 0-1.6Z"
339
+ />
340
+ </svg>
257
341
  </span>
258
342
  </button>
259
343
  </div>
@@ -291,7 +375,19 @@ cssPrefix: pf-v6-c-popover
291
375
  aria-label="Close"
292
376
  >
293
377
  <span class="pf-v6-c-button__icon">
294
- <i class="fas fa-times" aria-hidden="true"></i>
378
+ <svg
379
+ class="pf-v6-svg"
380
+ viewBox="0 0 20 20"
381
+ fill="currentColor"
382
+ aria-hidden="true"
383
+ role="img"
384
+ width="1em"
385
+ height="1em"
386
+ >
387
+ <path
388
+ d="M17.8 16.2 11.59 10l6.21-6.21c.42-.46.39-1.17-.07-1.59-.43-.4-1.09-.4-1.52 0l-6.2 6.2-6.22-6.19c-.44-.44-1.15-.44-1.59 0-.44.44-.44 1.15 0 1.59l6.2 6.21-6.2 6.2c-.42.46-.39 1.17.07 1.59.43.4 1.09.4 1.52 0L10 11.59l6.2 6.2c.44.44 1.15.44 1.59 0 .44-.45.44-1.16 0-1.6Z"
389
+ />
390
+ </svg>
295
391
  </span>
296
392
  </button>
297
393
  </div>
@@ -329,7 +425,19 @@ cssPrefix: pf-v6-c-popover
329
425
  aria-label="Close"
330
426
  >
331
427
  <span class="pf-v6-c-button__icon">
332
- <i class="fas fa-times" aria-hidden="true"></i>
428
+ <svg
429
+ class="pf-v6-svg"
430
+ viewBox="0 0 20 20"
431
+ fill="currentColor"
432
+ aria-hidden="true"
433
+ role="img"
434
+ width="1em"
435
+ height="1em"
436
+ >
437
+ <path
438
+ d="M17.8 16.2 11.59 10l6.21-6.21c.42-.46.39-1.17-.07-1.59-.43-.4-1.09-.4-1.52 0l-6.2 6.2-6.22-6.19c-.44-.44-1.15-.44-1.59 0-.44.44-.44 1.15 0 1.59l6.2 6.21-6.2 6.2c-.42.46-.39 1.17.07 1.59.43.4 1.09.4 1.52 0L10 11.59l6.2 6.2c.44.44 1.15.44 1.59 0 .44-.45.44-1.16 0-1.6Z"
439
+ />
440
+ </svg>
333
441
  </span>
334
442
  </button>
335
443
  </div>
@@ -382,7 +490,19 @@ cssPrefix: pf-v6-c-popover
382
490
  aria-label="Close"
383
491
  >
384
492
  <span class="pf-v6-c-button__icon">
385
- <i class="fas fa-times" aria-hidden="true"></i>
493
+ <svg
494
+ class="pf-v6-svg"
495
+ viewBox="0 0 20 20"
496
+ fill="currentColor"
497
+ aria-hidden="true"
498
+ role="img"
499
+ width="1em"
500
+ height="1em"
501
+ >
502
+ <path
503
+ d="M17.8 16.2 11.59 10l6.21-6.21c.42-.46.39-1.17-.07-1.59-.43-.4-1.09-.4-1.52 0l-6.2 6.2-6.22-6.19c-.44-.44-1.15-.44-1.59 0-.44.44-.44 1.15 0 1.59l6.2 6.21-6.2 6.2c-.42.46-.39 1.17.07 1.59.43.4 1.09.4 1.52 0L10 11.59l6.2 6.2c.44.44 1.15.44 1.59 0 .44-.45.44-1.16 0-1.6Z"
504
+ />
505
+ </svg>
386
506
  </span>
387
507
  </button>
388
508
  </div>
@@ -420,14 +540,38 @@ cssPrefix: pf-v6-c-popover
420
540
  aria-label="Close"
421
541
  >
422
542
  <span class="pf-v6-c-button__icon">
423
- <i class="fas fa-times" aria-hidden="true"></i>
543
+ <svg
544
+ class="pf-v6-svg"
545
+ viewBox="0 0 20 20"
546
+ fill="currentColor"
547
+ aria-hidden="true"
548
+ role="img"
549
+ width="1em"
550
+ height="1em"
551
+ >
552
+ <path
553
+ d="M17.8 16.2 11.59 10l6.21-6.21c.42-.46.39-1.17-.07-1.59-.43-.4-1.09-.4-1.52 0l-6.2 6.2-6.22-6.19c-.44-.44-1.15-.44-1.59 0-.44.44-.44 1.15 0 1.59l6.2 6.21-6.2 6.2c-.42.46-.39 1.17.07 1.59.43.4 1.09.4 1.52 0L10 11.59l6.2 6.2c.44.44 1.15.44 1.59 0 .44-.45.44-1.16 0-1.6Z"
554
+ />
555
+ </svg>
424
556
  </span>
425
557
  </button>
426
558
  </div>
427
559
  <header class="pf-v6-c-popover__header">
428
560
  <div class="pf-v6-c-popover__title" id="popover-icon-title-header">
429
561
  <span class="pf-v6-c-popover__title-icon">
430
- <i class="fas fa-fw fa-bullhorn" aria-hidden="true"></i>
562
+ <svg
563
+ class="pf-v6-svg"
564
+ viewBox="0 0 576 512"
565
+ fill="currentColor"
566
+ aria-hidden="true"
567
+ role="img"
568
+ width="1em"
569
+ height="1em"
570
+ >
571
+ <path
572
+ d="M576 240c0-23.63-12.95-44.04-32-55.12V32.01C544 23.26 537.02 0 512 0c-7.12 0-14.19 2.38-19.98 7.02l-85.03 68.03C364.28 109.19 310.66 128 256 128H64c-35.35 0-64 28.65-64 64v96c0 35.35 28.65 64 64 64h33.7c-1.39 10.48-2.18 21.14-2.18 32 0 39.77 9.26 77.35 25.56 110.94 5.19 10.69 16.52 17.06 28.4 17.06h74.28c26.05 0 41.69-29.84 25.9-50.56-16.4-21.52-26.15-48.36-26.15-77.44 0-11.11 1.62-21.79 4.41-32H256c54.66 0 108.28 18.81 150.98 52.95l85.03 68.03a32.023 32.023 0 0 0 19.98 7.02c24.92 0 32-22.78 32-32V295.13C563.05 284.04 576 263.63 576 240zm-96 141.42l-33.05-26.44C392.95 311.78 325.12 288 256 288v-96c69.12 0 136.95-23.78 190.95-66.98L480 98.58v282.84z"
573
+ />
574
+ </svg>
431
575
  </span>
432
576
  <h1 class="pf-v6-c-popover__title-text">Popover with icon title</h1>
433
577
  </div>
@@ -461,14 +605,38 @@ cssPrefix: pf-v6-c-popover
461
605
  aria-label="Close"
462
606
  >
463
607
  <span class="pf-v6-c-button__icon">
464
- <i class="fas fa-times" aria-hidden="true"></i>
608
+ <svg
609
+ class="pf-v6-svg"
610
+ viewBox="0 0 20 20"
611
+ fill="currentColor"
612
+ aria-hidden="true"
613
+ role="img"
614
+ width="1em"
615
+ height="1em"
616
+ >
617
+ <path
618
+ d="M17.8 16.2 11.59 10l6.21-6.21c.42-.46.39-1.17-.07-1.59-.43-.4-1.09-.4-1.52 0l-6.2 6.2-6.22-6.19c-.44-.44-1.15-.44-1.59 0-.44.44-.44 1.15 0 1.59l6.2 6.21-6.2 6.2c-.42.46-.39 1.17.07 1.59.43.4 1.09.4 1.52 0L10 11.59l6.2 6.2c.44.44 1.15.44 1.59 0 .44-.45.44-1.16 0-1.6Z"
619
+ />
620
+ </svg>
465
621
  </span>
466
622
  </button>
467
623
  </div>
468
624
  <header class="pf-v6-c-popover__header">
469
625
  <div class="pf-v6-c-popover__title" id="popover-custom-alert-header">
470
626
  <span class="pf-v6-c-popover__title-icon">
471
- <i class="fas fa-fw fa-bell" aria-hidden="true"></i>
627
+ <svg
628
+ class="pf-v6-svg"
629
+ viewBox="0 0 32 32"
630
+ fill="currentColor"
631
+ aria-hidden="true"
632
+ role="img"
633
+ width="1em"
634
+ height="1em"
635
+ >
636
+ <path
637
+ d="M28.75 22v3.5c0 .689-.561 1.25-1.25 1.25h-7.521c.005.084.021.166.021.25 0 2.206-1.794 4-4 4s-4-1.794-4-4c0-.084.016-.166.021-.25H4.5c-.689 0-1.25-.561-1.25-1.25V22a.75.75 0 0 1 .75-.75c1.24 0 2.25-1.009 2.25-2.25v-4c0-4.826 3.528-8.833 8.138-9.605A2.482 2.482 0 0 1 13.5 3.5C13.5 2.122 14.621 1 16 1s2.5 1.122 2.5 2.5c0 .761-.349 1.436-.888 1.895 4.61.772 8.138 4.779 8.138 9.605v4c0 1.241 1.01 2.25 2.25 2.25a.75.75 0 0 1 .75.75Z"
638
+ />
639
+ </svg>
472
640
  </span>
473
641
  <h1 class="pf-v6-c-popover__title-text">
474
642
  <span class="pf-v6-screen-reader">
@@ -508,14 +676,38 @@ cssPrefix: pf-v6-c-popover
508
676
  aria-label="Close"
509
677
  >
510
678
  <span class="pf-v6-c-button__icon">
511
- <i class="fas fa-times" aria-hidden="true"></i>
679
+ <svg
680
+ class="pf-v6-svg"
681
+ viewBox="0 0 20 20"
682
+ fill="currentColor"
683
+ aria-hidden="true"
684
+ role="img"
685
+ width="1em"
686
+ height="1em"
687
+ >
688
+ <path
689
+ d="M17.8 16.2 11.59 10l6.21-6.21c.42-.46.39-1.17-.07-1.59-.43-.4-1.09-.4-1.52 0l-6.2 6.2-6.22-6.19c-.44-.44-1.15-.44-1.59 0-.44.44-.44 1.15 0 1.59l6.2 6.21-6.2 6.2c-.42.46-.39 1.17.07 1.59.43.4 1.09.4 1.52 0L10 11.59l6.2 6.2c.44.44 1.15.44 1.59 0 .44-.45.44-1.16 0-1.6Z"
690
+ />
691
+ </svg>
512
692
  </span>
513
693
  </button>
514
694
  </div>
515
695
  <header class="pf-v6-c-popover__header">
516
696
  <div class="pf-v6-c-popover__title" id="popover-info-alert-header">
517
697
  <span class="pf-v6-c-popover__title-icon">
518
- <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
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="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm1.5 22a1.5 1.5 0 1 1-3 0v-5.157l-.188.04a1.5 1.5 0 0 1-.625-2.934l1.956-.416c.112-.024.223-.032.333-.03l.024-.002a1.5 1.5 0 0 1 1.5 1.5v7Zm-.08-12.58c-.38.37-.89.58-1.42.58a1.998 1.998 0 0 1-1.851-2.76c.051-.13.11-.24.19-.35.07-.11.15-.21.25-.3.74-.75 2.08-.75 2.83 0 .09.09.17.19.24.3.08.11.14.22.189.35.05.12.09.24.11.37.03.13.04.26.04.39 0 .53-.21 1.04-.58 1.42Z"
709
+ />
710
+ </svg>
519
711
  </span>
520
712
  <h1 class="pf-v6-c-popover__title-text">
521
713
  <span class="pf-v6-screen-reader">
@@ -555,14 +747,38 @@ cssPrefix: pf-v6-c-popover
555
747
  aria-label="Close"
556
748
  >
557
749
  <span class="pf-v6-c-button__icon">
558
- <i class="fas fa-times" aria-hidden="true"></i>
750
+ <svg
751
+ class="pf-v6-svg"
752
+ viewBox="0 0 20 20"
753
+ fill="currentColor"
754
+ aria-hidden="true"
755
+ role="img"
756
+ width="1em"
757
+ height="1em"
758
+ >
759
+ <path
760
+ d="M17.8 16.2 11.59 10l6.21-6.21c.42-.46.39-1.17-.07-1.59-.43-.4-1.09-.4-1.52 0l-6.2 6.2-6.22-6.19c-.44-.44-1.15-.44-1.59 0-.44.44-.44 1.15 0 1.59l6.2 6.21-6.2 6.2c-.42.46-.39 1.17.07 1.59.43.4 1.09.4 1.52 0L10 11.59l6.2 6.2c.44.44 1.15.44 1.59 0 .44-.45.44-1.16 0-1.6Z"
761
+ />
762
+ </svg>
559
763
  </span>
560
764
  </button>
561
765
  </div>
562
766
  <header class="pf-v6-c-popover__header">
563
767
  <div class="pf-v6-c-popover__title" id="popover-success-alert-header">
564
768
  <span class="pf-v6-c-popover__title-icon">
565
- <i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
769
+ <svg
770
+ class="pf-v6-svg"
771
+ viewBox="0 0 32 32"
772
+ fill="currentColor"
773
+ aria-hidden="true"
774
+ role="img"
775
+ width="1em"
776
+ height="1em"
777
+ >
778
+ <path
779
+ 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"
780
+ />
781
+ </svg>
566
782
  </span>
567
783
  <h1 class="pf-v6-c-popover__title-text">
568
784
  <span class="pf-v6-screen-reader">
@@ -602,14 +818,38 @@ cssPrefix: pf-v6-c-popover
602
818
  aria-label="Close"
603
819
  >
604
820
  <span class="pf-v6-c-button__icon">
605
- <i class="fas fa-times" aria-hidden="true"></i>
821
+ <svg
822
+ class="pf-v6-svg"
823
+ viewBox="0 0 20 20"
824
+ fill="currentColor"
825
+ aria-hidden="true"
826
+ role="img"
827
+ width="1em"
828
+ height="1em"
829
+ >
830
+ <path
831
+ d="M17.8 16.2 11.59 10l6.21-6.21c.42-.46.39-1.17-.07-1.59-.43-.4-1.09-.4-1.52 0l-6.2 6.2-6.22-6.19c-.44-.44-1.15-.44-1.59 0-.44.44-.44 1.15 0 1.59l6.2 6.21-6.2 6.2c-.42.46-.39 1.17.07 1.59.43.4 1.09.4 1.52 0L10 11.59l6.2 6.2c.44.44 1.15.44 1.59 0 .44-.45.44-1.16 0-1.6Z"
832
+ />
833
+ </svg>
606
834
  </span>
607
835
  </button>
608
836
  </div>
609
837
  <header class="pf-v6-c-popover__header">
610
838
  <div class="pf-v6-c-popover__title" id="popover-warning-alert-header">
611
839
  <span class="pf-v6-c-popover__title-icon">
612
- <i class="fas fa-fw fa-exclamation-triangle" aria-hidden="true"></i>
840
+ <svg
841
+ class="pf-v6-svg"
842
+ viewBox="0 0 32 32"
843
+ fill="currentColor"
844
+ aria-hidden="true"
845
+ role="img"
846
+ width="1em"
847
+ height="1em"
848
+ >
849
+ <path
850
+ 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"
851
+ />
852
+ </svg>
613
853
  </span>
614
854
  <h1 class="pf-v6-c-popover__title-text">
615
855
  <span class="pf-v6-screen-reader">
@@ -649,14 +889,38 @@ cssPrefix: pf-v6-c-popover
649
889
  aria-label="Close"
650
890
  >
651
891
  <span class="pf-v6-c-button__icon">
652
- <i class="fas fa-times" aria-hidden="true"></i>
892
+ <svg
893
+ class="pf-v6-svg"
894
+ viewBox="0 0 20 20"
895
+ fill="currentColor"
896
+ aria-hidden="true"
897
+ role="img"
898
+ width="1em"
899
+ height="1em"
900
+ >
901
+ <path
902
+ d="M17.8 16.2 11.59 10l6.21-6.21c.42-.46.39-1.17-.07-1.59-.43-.4-1.09-.4-1.52 0l-6.2 6.2-6.22-6.19c-.44-.44-1.15-.44-1.59 0-.44.44-.44 1.15 0 1.59l6.2 6.21-6.2 6.2c-.42.46-.39 1.17.07 1.59.43.4 1.09.4 1.52 0L10 11.59l6.2 6.2c.44.44 1.15.44 1.59 0 .44-.45.44-1.16 0-1.6Z"
903
+ />
904
+ </svg>
653
905
  </span>
654
906
  </button>
655
907
  </div>
656
908
  <header class="pf-v6-c-popover__header">
657
909
  <div class="pf-v6-c-popover__title" id="popover-danger-alert-header">
658
910
  <span class="pf-v6-c-popover__title-icon">
659
- <i class="fas fa-fw fa-exclamation-circle" aria-hidden="true"></i>
911
+ <svg
912
+ class="pf-v6-svg"
913
+ viewBox="0 0 32 32"
914
+ fill="currentColor"
915
+ aria-hidden="true"
916
+ role="img"
917
+ width="1em"
918
+ height="1em"
919
+ >
920
+ <path
921
+ 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"
922
+ />
923
+ </svg>
660
924
  </span>
661
925
  <h1 class="pf-v6-c-popover__title-text">
662
926
  <span class="pf-v6-screen-reader">
package/docs/components/Progress/examples/Progress.md CHANGED
@@ -440,7 +440,19 @@ When conveying status, you should ensure:
440
440
  <div class="pf-v6-c-progress__status" aria-hidden="true">
441
441
  <span class="pf-v6-c-progress__measure">100%</span>
442
442
  <span class="pf-v6-c-progress__status-icon">
443
- <i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
443
+ <svg
444
+ class="pf-v6-svg"
445
+ viewBox="0 0 32 32"
446
+ fill="currentColor"
447
+ aria-hidden="true"
448
+ role="img"
449
+ width="1em"
450
+ height="1em"
451
+ >
452
+ <path
453
+ 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"
454
+ />
455
+ </svg>
444
456
  </span>
445
457
  </div>
446
458
  <div
@@ -468,7 +480,19 @@ When conveying status, you should ensure:
468
480
  <div class="pf-v6-c-progress__status" aria-hidden="true">
469
481
  <span class="pf-v6-c-progress__measure">100%</span>
470
482
  <span class="pf-v6-c-progress__status-icon">
471
- <i class="fas fa-fw fa-exclamation-triangle" aria-hidden="true"></i>
483
+ <svg
484
+ class="pf-v6-svg"
485
+ viewBox="0 0 32 32"
486
+ fill="currentColor"
487
+ aria-hidden="true"
488
+ role="img"
489
+ width="1em"
490
+ height="1em"
491
+ >
492
+ <path
493
+ 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"
494
+ />
495
+ </svg>
472
496
  </span>
473
497
  </div>
474
498
  <div
@@ -496,7 +520,19 @@ When conveying status, you should ensure:
496
520
  <div class="pf-v6-c-progress__status" aria-hidden="true">
497
521
  <span class="pf-v6-c-progress__measure">33%</span>
498
522
  <span class="pf-v6-c-progress__status-icon">
499
- <i class="fas fa-fw fa-exclamation-circle" aria-hidden="true"></i>
523
+ <svg
524
+ class="pf-v6-svg"
525
+ viewBox="0 0 32 32"
526
+ fill="currentColor"
527
+ aria-hidden="true"
528
+ role="img"
529
+ width="1em"
530
+ height="1em"
531
+ >
532
+ <path
533
+ 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"
534
+ />
535
+ </svg>
500
536
  </span>
501
537
  </div>
502
538
  <div
@@ -526,7 +562,19 @@ When conveying status, you should ensure:
526
562
  >Title</div>
527
563
  <div class="pf-v6-c-progress__status" aria-hidden="true">
528
564
  <span class="pf-v6-c-progress__status-icon">
529
- <i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
565
+ <svg
566
+ class="pf-v6-svg"
567
+ viewBox="0 0 32 32"
568
+ fill="currentColor"
569
+ aria-hidden="true"
570
+ role="img"
571
+ width="1em"
572
+ height="1em"
573
+ >
574
+ <path
575
+ 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"
576
+ />
577
+ </svg>
530
578
  </span>
531
579
  </div>
532
580
  <div
@@ -558,7 +606,19 @@ When conveying status, you should ensure:
558
606
  >Title</div>
559
607
  <div class="pf-v6-c-progress__status" aria-hidden="true">
560
608
  <span class="pf-v6-c-progress__status-icon">
561
- <i class="fas fa-fw fa-exclamation-triangle" aria-hidden="true"></i>
609
+ <svg
610
+ class="pf-v6-svg"
611
+ viewBox="0 0 32 32"
612
+ fill="currentColor"
613
+ aria-hidden="true"
614
+ role="img"
615
+ width="1em"
616
+ height="1em"
617
+ >
618
+ <path
619
+ 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"
620
+ />
621
+ </svg>
562
622
  </span>
563
623
  </div>
564
624
  <div
@@ -591,7 +651,19 @@ When conveying status, you should ensure:
591
651
  <div class="pf-v6-c-progress__status" aria-hidden="true">
592
652
  <span class="pf-v6-c-progress__measure">33%</span>
593
653
  <span class="pf-v6-c-progress__status-icon">
594
- <i class="fas fa-fw fa-exclamation-circle" aria-hidden="true"></i>
654
+ <svg
655
+ class="pf-v6-svg"
656
+ viewBox="0 0 32 32"
657
+ fill="currentColor"
658
+ aria-hidden="true"
659
+ role="img"
660
+ width="1em"
661
+ height="1em"
662
+ >
663
+ <path
664
+ 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"
665
+ />
666
+ </svg>
595
667
  </span>
596
668
  </div>
597
669
  <div
@@ -621,7 +693,19 @@ When conveying status, you should ensure:
621
693
  >Title</div>
622
694
  <div class="pf-v6-c-progress__status" aria-hidden="true">
623
695
  <span class="pf-v6-c-progress__status-icon">
624
- <i class="fas fa-fw fa-exclamation-circle" aria-hidden="true"></i>
696
+ <svg
697
+ class="pf-v6-svg"
698
+ viewBox="0 0 32 32"
699
+ fill="currentColor"
700
+ aria-hidden="true"
701
+ role="img"
702
+ width="1em"
703
+ height="1em"
704
+ >
705
+ <path
706
+ 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"
707
+ />
708
+ </svg>
625
709
  </span>
626
710
  </div>
627
711
  <div