@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
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
package/docs/components/ProgressStepper/examples/ProgressStepper.md CHANGED
@@ -15,7 +15,19 @@ cssPrefix: pf-v6-c-progress-stepper
15
15
  >
16
16
  <div class="pf-v6-c-progress-stepper__step-connector">
17
17
  <span class="pf-v6-c-progress-stepper__step-icon">
18
- <i class="fas fa-check-circle" aria-hidden="true"></i>
18
+ <svg
19
+ class="pf-v6-svg"
20
+ viewBox="0 0 32 32"
21
+ fill="currentColor"
22
+ aria-hidden="true"
23
+ role="img"
24
+ width="1em"
25
+ height="1em"
26
+ >
27
+ <path
28
+ 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"
29
+ />
30
+ </svg>
19
31
  </span>
20
32
  </div>
21
33
  <div class="pf-v6-c-progress-stepper__step-main">
@@ -63,7 +75,19 @@ cssPrefix: pf-v6-c-progress-stepper
63
75
  >
64
76
  <div class="pf-v6-c-progress-stepper__step-connector">
65
77
  <span class="pf-v6-c-progress-stepper__step-icon">
66
- <i class="fas fa-check-circle" aria-hidden="true"></i>
78
+ <svg
79
+ class="pf-v6-svg"
80
+ viewBox="0 0 32 32"
81
+ fill="currentColor"
82
+ aria-hidden="true"
83
+ role="img"
84
+ width="1em"
85
+ height="1em"
86
+ >
87
+ <path
88
+ 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"
89
+ />
90
+ </svg>
67
91
  </span>
68
92
  </div>
69
93
  <div class="pf-v6-c-progress-stepper__step-main">
@@ -123,7 +147,19 @@ cssPrefix: pf-v6-c-progress-stepper
123
147
  >
124
148
  <div class="pf-v6-c-progress-stepper__step-connector">
125
149
  <span class="pf-v6-c-progress-stepper__step-icon">
126
- <i class="fas fa-check-circle" aria-hidden="true"></i>
150
+ <svg
151
+ class="pf-v6-svg"
152
+ viewBox="0 0 32 32"
153
+ fill="currentColor"
154
+ aria-hidden="true"
155
+ role="img"
156
+ width="1em"
157
+ height="1em"
158
+ >
159
+ <path
160
+ 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"
161
+ />
162
+ </svg>
127
163
  </span>
128
164
  </div>
129
165
  <div class="pf-v6-c-progress-stepper__step-main">
@@ -180,7 +216,19 @@ cssPrefix: pf-v6-c-progress-stepper
180
216
  >
181
217
  <div class="pf-v6-c-progress-stepper__step-connector">
182
218
  <span class="pf-v6-c-progress-stepper__step-icon">
183
- <i class="fas fa-check-circle" aria-hidden="true"></i>
219
+ <svg
220
+ class="pf-v6-svg"
221
+ viewBox="0 0 32 32"
222
+ fill="currentColor"
223
+ aria-hidden="true"
224
+ role="img"
225
+ width="1em"
226
+ height="1em"
227
+ >
228
+ <path
229
+ 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"
230
+ />
231
+ </svg>
184
232
  </span>
185
233
  </div>
186
234
  <div class="pf-v6-c-progress-stepper__step-main">
@@ -237,7 +285,19 @@ cssPrefix: pf-v6-c-progress-stepper
237
285
  >
238
286
  <div class="pf-v6-c-progress-stepper__step-connector">
239
287
  <span class="pf-v6-c-progress-stepper__step-icon">
240
- <i class="fas fa-check-circle" aria-hidden="true"></i>
288
+ <svg
289
+ class="pf-v6-svg"
290
+ viewBox="0 0 32 32"
291
+ fill="currentColor"
292
+ aria-hidden="true"
293
+ role="img"
294
+ width="1em"
295
+ height="1em"
296
+ >
297
+ <path
298
+ 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"
299
+ />
300
+ </svg>
241
301
  </span>
242
302
  </div>
243
303
  <div class="pf-v6-c-progress-stepper__step-main">
@@ -294,7 +354,19 @@ cssPrefix: pf-v6-c-progress-stepper
294
354
  >
295
355
  <div class="pf-v6-c-progress-stepper__step-connector">
296
356
  <span class="pf-v6-c-progress-stepper__step-icon">
297
- <i class="fas fa-check-circle" aria-hidden="true"></i>
357
+ <svg
358
+ class="pf-v6-svg"
359
+ viewBox="0 0 32 32"
360
+ fill="currentColor"
361
+ aria-hidden="true"
362
+ role="img"
363
+ width="1em"
364
+ height="1em"
365
+ >
366
+ <path
367
+ 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"
368
+ />
369
+ </svg>
298
370
  </span>
299
371
  </div>
300
372
  <div class="pf-v6-c-progress-stepper__step-main">
@@ -351,7 +423,19 @@ cssPrefix: pf-v6-c-progress-stepper
351
423
  >
352
424
  <div class="pf-v6-c-progress-stepper__step-connector">
353
425
  <span class="pf-v6-c-progress-stepper__step-icon">
354
- <i class="fas fa-check-circle" aria-hidden="true"></i>
426
+ <svg
427
+ class="pf-v6-svg"
428
+ viewBox="0 0 32 32"
429
+ fill="currentColor"
430
+ aria-hidden="true"
431
+ role="img"
432
+ width="1em"
433
+ height="1em"
434
+ >
435
+ <path
436
+ 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"
437
+ />
438
+ </svg>
355
439
  </span>
356
440
  </div>
357
441
  <div class="pf-v6-c-progress-stepper__step-main">
@@ -421,7 +505,19 @@ cssPrefix: pf-v6-c-progress-stepper
421
505
  >
422
506
  <div class="pf-v6-c-progress-stepper__step-connector">
423
507
  <span class="pf-v6-c-progress-stepper__step-icon">
424
- <i class="fas fa-check-circle" aria-hidden="true"></i>
508
+ <svg
509
+ class="pf-v6-svg"
510
+ viewBox="0 0 32 32"
511
+ fill="currentColor"
512
+ aria-hidden="true"
513
+ role="img"
514
+ width="1em"
515
+ height="1em"
516
+ >
517
+ <path
518
+ 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"
519
+ />
520
+ </svg>
425
521
  </span>
426
522
  </div>
427
523
  <div class="pf-v6-c-progress-stepper__step-main">
@@ -481,7 +577,19 @@ cssPrefix: pf-v6-c-progress-stepper
481
577
  >
482
578
  <div class="pf-v6-c-progress-stepper__step-connector">
483
579
  <span class="pf-v6-c-progress-stepper__step-icon">
484
- <i class="fas fa-check-circle" aria-hidden="true"></i>
580
+ <svg
581
+ class="pf-v6-svg"
582
+ viewBox="0 0 32 32"
583
+ fill="currentColor"
584
+ aria-hidden="true"
585
+ role="img"
586
+ width="1em"
587
+ height="1em"
588
+ >
589
+ <path
590
+ 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"
591
+ />
592
+ </svg>
485
593
  </span>
486
594
  </div>
487
595
  <div class="pf-v6-c-progress-stepper__step-main">
@@ -541,7 +649,19 @@ cssPrefix: pf-v6-c-progress-stepper
541
649
  >
542
650
  <div class="pf-v6-c-progress-stepper__step-connector">
543
651
  <span class="pf-v6-c-progress-stepper__step-icon">
544
- <i class="fas fa-check-circle" aria-hidden="true"></i>
652
+ <svg
653
+ class="pf-v6-svg"
654
+ viewBox="0 0 32 32"
655
+ fill="currentColor"
656
+ aria-hidden="true"
657
+ role="img"
658
+ width="1em"
659
+ height="1em"
660
+ >
661
+ <path
662
+ 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"
663
+ />
664
+ </svg>
545
665
  </span>
546
666
  </div>
547
667
  <div class="pf-v6-c-progress-stepper__step-main">
@@ -598,7 +718,19 @@ cssPrefix: pf-v6-c-progress-stepper
598
718
  >
599
719
  <div class="pf-v6-c-progress-stepper__step-connector">
600
720
  <span class="pf-v6-c-progress-stepper__step-icon">
601
- <i class="fas fa-check-circle" aria-hidden="true"></i>
721
+ <svg
722
+ class="pf-v6-svg"
723
+ viewBox="0 0 32 32"
724
+ fill="currentColor"
725
+ aria-hidden="true"
726
+ role="img"
727
+ width="1em"
728
+ height="1em"
729
+ >
730
+ <path
731
+ 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"
732
+ />
733
+ </svg>
602
734
  </span>
603
735
  </div>
604
736
  <div class="pf-v6-c-progress-stepper__step-main">
@@ -655,7 +787,19 @@ cssPrefix: pf-v6-c-progress-stepper
655
787
  >
656
788
  <div class="pf-v6-c-progress-stepper__step-connector">
657
789
  <span class="pf-v6-c-progress-stepper__step-icon">
658
- <i class="fas fa-check-circle" aria-hidden="true"></i>
790
+ <svg
791
+ class="pf-v6-svg"
792
+ viewBox="0 0 32 32"
793
+ fill="currentColor"
794
+ aria-hidden="true"
795
+ role="img"
796
+ width="1em"
797
+ height="1em"
798
+ >
799
+ <path
800
+ 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"
801
+ />
802
+ </svg>
659
803
  </span>
660
804
  </div>
661
805
  <div class="pf-v6-c-progress-stepper__step-main">
@@ -669,7 +813,19 @@ cssPrefix: pf-v6-c-progress-stepper
669
813
  >
670
814
  <div class="pf-v6-c-progress-stepper__step-connector">
671
815
  <span class="pf-v6-c-progress-stepper__step-icon">
672
- <i class="fas fa-check-circle" aria-hidden="true"></i>
816
+ <svg
817
+ class="pf-v6-svg"
818
+ viewBox="0 0 32 32"
819
+ fill="currentColor"
820
+ aria-hidden="true"
821
+ role="img"
822
+ width="1em"
823
+ height="1em"
824
+ >
825
+ <path
826
+ 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"
827
+ />
828
+ </svg>
673
829
  </span>
674
830
  </div>
675
831
  <div class="pf-v6-c-progress-stepper__step-main">
@@ -683,7 +839,19 @@ cssPrefix: pf-v6-c-progress-stepper
683
839
  >
684
840
  <div class="pf-v6-c-progress-stepper__step-connector">
685
841
  <span class="pf-v6-c-progress-stepper__step-icon">
686
- <i class="fas fa-exclamation-triangle" aria-hidden="true"></i>
842
+ <svg
843
+ class="pf-v6-svg"
844
+ viewBox="0 0 32 32"
845
+ fill="currentColor"
846
+ aria-hidden="true"
847
+ role="img"
848
+ width="1em"
849
+ height="1em"
850
+ >
851
+ <path
852
+ 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"
853
+ />
854
+ </svg>
687
855
  </span>
688
856
  </div>
689
857
  <div class="pf-v6-c-progress-stepper__step-main">
@@ -731,7 +899,19 @@ cssPrefix: pf-v6-c-progress-stepper
731
899
  >
732
900
  <div class="pf-v6-c-progress-stepper__step-connector">
733
901
  <span class="pf-v6-c-progress-stepper__step-icon">
734
- <i class="fas fa-check-circle" aria-hidden="true"></i>
902
+ <svg
903
+ class="pf-v6-svg"
904
+ viewBox="0 0 32 32"
905
+ fill="currentColor"
906
+ aria-hidden="true"
907
+ role="img"
908
+ width="1em"
909
+ height="1em"
910
+ >
911
+ <path
912
+ 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"
913
+ />
914
+ </svg>
735
915
  </span>
736
916
  </div>
737
917
  <div class="pf-v6-c-progress-stepper__step-main">
@@ -745,7 +925,19 @@ cssPrefix: pf-v6-c-progress-stepper
745
925
  >
746
926
  <div class="pf-v6-c-progress-stepper__step-connector">
747
927
  <span class="pf-v6-c-progress-stepper__step-icon">
748
- <i class="fas fa-check-circle" aria-hidden="true"></i>
928
+ <svg
929
+ class="pf-v6-svg"
930
+ viewBox="0 0 32 32"
931
+ fill="currentColor"
932
+ aria-hidden="true"
933
+ role="img"
934
+ width="1em"
935
+ height="1em"
936
+ >
937
+ <path
938
+ 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"
939
+ />
940
+ </svg>
749
941
  </span>
750
942
  </div>
751
943
  <div class="pf-v6-c-progress-stepper__step-main">
@@ -759,7 +951,19 @@ cssPrefix: pf-v6-c-progress-stepper
759
951
  >
760
952
  <div class="pf-v6-c-progress-stepper__step-connector">
761
953
  <span class="pf-v6-c-progress-stepper__step-icon">
762
- <i class="fas fa-check-circle" aria-hidden="true"></i>
954
+ <svg
955
+ class="pf-v6-svg"
956
+ viewBox="0 0 32 32"
957
+ fill="currentColor"
958
+ aria-hidden="true"
959
+ role="img"
960
+ width="1em"
961
+ height="1em"
962
+ >
963
+ <path
964
+ 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"
965
+ />
966
+ </svg>
763
967
  </span>
764
968
  </div>
765
969
  <div class="pf-v6-c-progress-stepper__step-main">
@@ -773,7 +977,19 @@ cssPrefix: pf-v6-c-progress-stepper
773
977
  >
774
978
  <div class="pf-v6-c-progress-stepper__step-connector">
775
979
  <span class="pf-v6-c-progress-stepper__step-icon">
776
- <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
980
+ <svg
981
+ class="pf-v6-svg"
982
+ viewBox="0 0 32 32"
983
+ fill="currentColor"
984
+ aria-hidden="true"
985
+ role="img"
986
+ width="1em"
987
+ height="1em"
988
+ >
989
+ <path
990
+ 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"
991
+ />
992
+ </svg>
777
993
  </span>
778
994
  </div>
779
995
  <div class="pf-v6-c-progress-stepper__step-main">
@@ -807,7 +1023,19 @@ cssPrefix: pf-v6-c-progress-stepper
807
1023
  >
808
1024
  <div class="pf-v6-c-progress-stepper__step-connector">
809
1025
  <span class="pf-v6-c-progress-stepper__step-icon">
810
- <i class="fas fa-check-circle" aria-hidden="true"></i>
1026
+ <svg
1027
+ class="pf-v6-svg"
1028
+ viewBox="0 0 32 32"
1029
+ fill="currentColor"
1030
+ aria-hidden="true"
1031
+ role="img"
1032
+ width="1em"
1033
+ height="1em"
1034
+ >
1035
+ <path
1036
+ 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"
1037
+ />
1038
+ </svg>
811
1039
  </span>
812
1040
  </div>
813
1041
  <div class="pf-v6-c-progress-stepper__step-main">
@@ -870,7 +1098,19 @@ cssPrefix: pf-v6-c-progress-stepper
870
1098
  >
871
1099
  <div class="pf-v6-c-progress-stepper__step-connector">
872
1100
  <span class="pf-v6-c-progress-stepper__step-icon">
873
- <i class="fas fa-check-circle" aria-hidden="true"></i>
1101
+ <svg
1102
+ class="pf-v6-svg"
1103
+ viewBox="0 0 32 32"
1104
+ fill="currentColor"
1105
+ aria-hidden="true"
1106
+ role="img"
1107
+ width="1em"
1108
+ height="1em"
1109
+ >
1110
+ <path
1111
+ 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"
1112
+ />
1113
+ </svg>
874
1114
  </span>
875
1115
  </div>
876
1116
  <div class="pf-v6-c-progress-stepper__step-main">
@@ -887,7 +1127,19 @@ cssPrefix: pf-v6-c-progress-stepper
887
1127
  >
888
1128
  <div class="pf-v6-c-progress-stepper__step-connector">
889
1129
  <span class="pf-v6-c-progress-stepper__step-icon">
890
- <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
1130
+ <svg
1131
+ class="pf-v6-svg"
1132
+ viewBox="0 0 32 32"
1133
+ fill="currentColor"
1134
+ aria-hidden="true"
1135
+ role="img"
1136
+ width="1em"
1137
+ height="1em"
1138
+ >
1139
+ <path
1140
+ 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"
1141
+ />
1142
+ </svg>
891
1143
  </span>
892
1144
  </div>
893
1145
  <div class="pf-v6-c-progress-stepper__step-main">
@@ -959,8 +1211,8 @@ Steps can be modified with `.pf-m-success`, `.pf-m-warning`, `.pf-m-danger`, `.p
959
1211
  | `.progress-stepper__step-title` | `<div>`, `<button>` | Contains the title of the step. **Note:** the step title is a `<button>` when it has `.pf-m-help-text` and is used to trigger a popover with help text. |
960
1212
  | `.progress-stepper__step-description` | `<div>` | Contains the description of the step. |
961
1213
  | `.pf-m-center`| `.pf-v6-c-progress-stepper` | Modifies to center each step. |
962
- | `.pf-m-vertical{-on-[breakpoint]}`| `.pf-v6-c-progress-stepper` | Modifies progress stepper vertical layout at optional [breakpoint](/tokens/all-patternfly-tokens). |
963
- | `.pf-m-horizontal{-on-[breakpoint]}`| `.pf-v6-c-progress-stepper` | Modifies progress stepper horizontal layout at optional [breakpoint](/tokens/all-patternfly-tokens). |
1214
+ | `.pf-m-vertical{-on-[breakpoint]}`| `.pf-v6-c-progress-stepper` | Modifies progress stepper vertical layout at optional [breakpoint](/foundations-and-styles/design-tokens/all-design-tokens). |
1215
+ | `.pf-m-horizontal{-on-[breakpoint]}`| `.pf-v6-c-progress-stepper` | Modifies progress stepper horizontal layout at optional [breakpoint](/foundations-and-styles/design-tokens/all-design-tokens). |
964
1216
  | `.pf-m-compact`| `.pf-v6-c-progress-stepper` | Modifies for compact styling. |
965
1217
  | `.pf-m-success`| `.pf-v6-c-progress-stepper__step` | Modifies for success styling. |
966
1218
  | `.pf-m-warning`| `.pf-v6-c-progress-stepper__step` | Modifies for warning styling. |
package/docs/components/Sidebar/examples/Sidebar.md CHANGED
@@ -265,6 +265,6 @@ cssPrefix: pf-v6-c-sidebar
265
265
  | `.pf-m-panel-right` | `.pf-v6-c-sidebar` | Modifies the sidebar to place the panel to the right of the content. |
266
266
  | `.pf-m-sticky` | `.pf-v6-c-sidebar__panel` | Modifies the panel to be sticky to the top of the layout. |
267
267
  | `.pf-m-static` | `.pf-v6-c-sidebar__panel` | Modifies the panel to be positioned statically. |
268
- | `.pf-m-width-{default, 25, 33, 50, 66, 75, 100}{-on-[breakpoint]}` | `.pf-v6-c-sidebar__panel` | Modifies the panel width at optional [breakpoint](/tokens/all-patternfly-tokens). **Note:** does not apply when the panel is stacked on top of the content. |
268
+ | `.pf-m-width-{default, 25, 33, 50, 66, 75, 100}{-on-[breakpoint]}` | `.pf-v6-c-sidebar__panel` | Modifies the panel width at optional [breakpoint](/foundations-and-styles/design-tokens/all-design-tokens). **Note:** does not apply when the panel is stacked on top of the content. |
269
269
  | `.pf-m-no-background` | `.pf-v6-c-sidebar`, `.pf-v6-c-sidebar__panel, .pf-v6-c-sidebar__content` | Modifies the element to have a transparent background. |
270
270
  | `.pf-m-secondary` | `.pf-v6-c-sidebar__panel, .pf-v6-c-sidebar__content` | Modifies the element to have secondary styling. |