@patternfly/patternfly 6.5.0-prerelease.5 → 6.5.0-prerelease.50

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (376) hide show
  1. package/README.md +1 -1
  2. package/assets/fontawesome/_variables.scss +2 -1
  3. package/assets/images/RHAiExperienceIcon.svg +27 -0
  4. package/assets/images/RHAutomationsLogo.svg +96 -0
  5. package/assets/images/RHServerStackIcon.svg +16 -0
  6. package/assets/images/compass--hero-bg.png +0 -0
  7. package/assets/images/compass--rh-wallpaper-dark.png +0 -0
  8. package/assets/images/compass--rh-wallpaper-light.png +0 -0
  9. package/assets/images/compass--wallpaper-dark.png +0 -0
  10. package/assets/images/compass--wallpaper-light.png +0 -0
  11. package/base/normalize.scss +7 -0
  12. package/base/patternfly-common.css +50 -0
  13. package/base/patternfly-common.scss +59 -0
  14. package/base/patternfly-svg-icons.css +11 -0
  15. package/base/patternfly-svg-icons.scss +14 -0
  16. package/base/patternfly-variables.css +345 -14
  17. package/base/patternfly-variables.scss +40 -0
  18. package/base/tokens/tokens-dark.scss +51 -3
  19. package/base/tokens/tokens-default.scss +67 -13
  20. package/base/tokens/tokens-glass-dark.scss +9 -0
  21. package/base/tokens/tokens-glass.scss +9 -0
  22. package/base/tokens/tokens-local.scss +16 -0
  23. package/base/tokens/tokens-palette.scss +3 -1
  24. package/base/tokens/tokens-redhat-dark.scss +14 -0
  25. package/base/tokens/tokens-redhat-glass-dark.scss +16 -0
  26. package/base/tokens/tokens-redhat-glass.scss +15 -0
  27. package/base/tokens/tokens-redhat-highcontrast-dark.scss +47 -0
  28. package/base/tokens/tokens-redhat-highcontrast.scss +127 -0
  29. package/base/tokens/tokens-redhat.scss +15 -0
  30. package/components/AboutModalBox/about-modal-box.css +36 -26
  31. package/components/Accordion/accordion.css +17 -14
  32. package/components/Accordion/accordion.scss +1 -2
  33. package/components/ActionList/action-list.css +2 -0
  34. package/components/ActionList/action-list.scss +2 -0
  35. package/components/Alert/alert.css +7 -5
  36. package/components/Alert/alert.scss +2 -1
  37. package/components/Avatar/avatar.css +12 -4
  38. package/components/BackgroundImage/background-image.css +6 -3
  39. package/components/Banner/banner.css +8 -6
  40. package/components/Brand/brand.css +3 -1
  41. package/components/Breadcrumb/breadcrumb.css +4 -3
  42. package/components/Button/button.css +117 -14
  43. package/components/Button/button.scss +127 -10
  44. package/components/CalendarMonth/calendar-month.css +4 -3
  45. package/components/Card/card.css +20 -7
  46. package/components/Card/card.scss +16 -2
  47. package/components/ClipboardCopy/clipboard-copy.css +7 -6
  48. package/components/ClipboardCopy/clipboard-copy.scss +3 -3
  49. package/components/CodeEditor/code-editor.css +1 -1
  50. package/components/CodeEditor/code-editor.scss +1 -1
  51. package/components/Compass/compass.css +320 -0
  52. package/components/Compass/compass.scss +350 -0
  53. package/components/DataList/data-list.css +34 -23
  54. package/components/DataList/data-list.scss +7 -2
  55. package/components/DescriptionList/description-list-order.scss +5 -1
  56. package/components/DescriptionList/description-list.css +7 -5
  57. package/components/DescriptionList/description-list.scss +5 -1
  58. package/components/Divider/divider.css +7 -5
  59. package/components/Drawer/drawer.css +110 -56
  60. package/components/Drawer/drawer.scss +69 -9
  61. package/components/DualListSelector/dual-list-selector.css +18 -12
  62. package/components/DualListSelector/dual-list-selector.scss +1 -1
  63. package/components/ExpandableSection/expandable-section.css +21 -16
  64. package/components/ExpandableSection/expandable-section.scss +6 -3
  65. package/components/Form/form.css +2 -2
  66. package/components/Form/form.scss +2 -2
  67. package/components/FormControl/form-control.css +3 -3
  68. package/components/FormControl/form-control.scss +3 -3
  69. package/components/Hero/hero.css +74 -0
  70. package/components/Hero/hero.scss +86 -0
  71. package/components/JumpLinks/jump-links.css +5 -4
  72. package/components/JumpLinks/jump-links.scss +6 -2
  73. package/components/Label/label-group.css +2 -2
  74. package/components/Label/label-group.scss +2 -2
  75. package/components/Label/label.css +4 -3
  76. package/components/Login/login.css +51 -37
  77. package/components/Masthead/masthead.css +70 -16
  78. package/components/Masthead/masthead.scss +54 -1
  79. package/components/Menu/menu.css +23 -14
  80. package/components/MenuToggle/menu-toggle.css +5 -1
  81. package/components/MenuToggle/menu-toggle.scss +6 -1
  82. package/components/ModalBox/modal-box.css +9 -7
  83. package/components/ModalBox/modal-box.scss +2 -2
  84. package/components/Nav/nav.css +74 -11
  85. package/components/Nav/nav.scss +77 -5
  86. package/components/NotificationDrawer/notification-drawer.css +19 -9
  87. package/components/NotificationDrawer/notification-drawer.scss +14 -5
  88. package/components/Page/page.css +55 -29
  89. package/components/Page/page.scss +44 -5
  90. package/components/Pagination/pagination.scss +5 -1
  91. package/components/ProgressStepper/progress-stepper.scss +5 -1
  92. package/components/Sidebar/sidebar.css +1 -1
  93. package/components/Sidebar/sidebar.scss +7 -3
  94. package/components/Skeleton/skeleton.css +16 -15
  95. package/components/Slider/slider.css +32 -18
  96. package/components/Switch/switch.css +4 -2
  97. package/components/Switch/switch.scss +1 -1
  98. package/components/Table/table-grid.css +28 -36
  99. package/components/Table/table-grid.scss +4 -4
  100. package/components/Table/table-tree-view.css +4 -2
  101. package/components/Table/table.css +33 -29
  102. package/components/Table/table.scss +2 -2
  103. package/components/Tabs/tabs.css +35 -18
  104. package/components/Tabs/tabs.scss +35 -7
  105. package/components/TextInputGroup/text-input-group.css +2 -2
  106. package/components/TextInputGroup/text-input-group.scss +2 -2
  107. package/components/ToggleGroup/toggle-group.css +34 -17
  108. package/components/ToggleGroup/toggle-group.scss +36 -20
  109. package/components/Toolbar/toolbar.css +47 -15
  110. package/components/Toolbar/toolbar.scss +34 -6
  111. package/components/TreeView/tree-view.css +45 -14
  112. package/components/TreeView/tree-view.scss +32 -1
  113. package/components/Wizard/wizard.css +21 -17
  114. package/components/Wizard/wizard.scss +4 -4
  115. package/components/_index.css +1602 -676
  116. package/components/_index.scss +3 -1
  117. package/docs/components/AboutModalBox/examples/AboutModalBox.md +13 -1
  118. package/docs/components/Accordion/examples/Accordion.md +390 -30
  119. package/docs/components/ActionList/examples/ActionList.md +143 -11
  120. package/docs/components/Alert/examples/Alert.md +678 -54
  121. package/docs/components/Avatar/examples/Avatar.md +4 -4
  122. package/docs/components/BackToTop/examples/BackToTop.md +13 -1
  123. package/docs/components/Banner/examples/Banner.md +65 -5
  124. package/docs/components/Brand/examples/Brand.md +2 -2
  125. package/docs/components/Breadcrumb/examples/Breadcrumb.md +299 -23
  126. package/docs/components/Button/examples/Button.md +2217 -241
  127. package/docs/components/CalendarMonth/examples/CalendarMonth.md +104 -8
  128. package/docs/components/Card/examples/Card.md +206 -4
  129. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +286 -22
  130. package/docs/components/CodeBlock/examples/CodeBlock.md +104 -8
  131. package/docs/components/CodeEditor/examples/CodeEditor.md +195 -15
  132. package/docs/components/Compass/examples/Compass.css +17 -0
  133. package/docs/components/Compass/examples/Compass.md +119 -0
  134. package/docs/components/DataList/examples/DataList.md +405 -205
  135. package/docs/components/DatePicker/examples/DatePicker.md +78 -6
  136. package/docs/components/DescriptionList/examples/DescriptionList.md +327 -27
  137. package/docs/components/Divider/examples/Divider.md +2 -2
  138. package/docs/components/Drawer/examples/Drawer.md +353 -35
  139. package/docs/components/DualListSelector/examples/DualListSelector.md +1013 -143
  140. package/docs/components/ExpandableSection/examples/ExpandableSection.md +91 -7
  141. package/docs/components/Form/examples/Form.md +78 -6
  142. package/docs/components/Hero/examples/Hero.md +25 -0
  143. package/docs/components/Icon/examples/Icon.md +92 -8
  144. package/docs/components/InlineEdit/examples/InlineEdit.md +312 -24
  145. package/docs/components/InputGroup/examples/InputGroup.md +27 -3
  146. package/docs/components/JumpLinks/examples/JumpLinks.md +54 -6
  147. package/docs/components/Label/examples/Label.md +2834 -218
  148. package/docs/components/Login/examples/Login.md +26 -2
  149. package/docs/components/Masthead/examples/masthead.md +80 -1
  150. package/docs/components/Menu/examples/Menu.md +1458 -114
  151. package/docs/components/MenuToggle/examples/MenuToggle.md +53 -1
  152. package/docs/components/ModalBox/examples/ModalBox.md +287 -23
  153. package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +156 -12
  154. package/docs/components/Nav/examples/Navigation.md +798 -58
  155. package/docs/components/NotificationDrawer/examples/NotificationDrawer.md +598 -46
  156. package/docs/components/OverflowMenu/examples/overflow-menu.md +78 -6
  157. package/docs/components/Page/examples/Page.md +51 -2
  158. package/docs/components/Pagination/examples/Pagination.md +627 -51
  159. package/docs/components/Popover/examples/Popover.md +286 -22
  160. package/docs/components/ProgressStepper/examples/ProgressStepper.md +275 -23
  161. package/docs/components/Sidebar/examples/Sidebar.md +1 -1
  162. package/docs/components/Slider/examples/Slider.md +52 -4
  163. package/docs/components/Table/examples/Table.md +875 -70
  164. package/docs/components/Tabs/examples/Tabs.md +4127 -320
  165. package/docs/components/TextInputGroup/examples/TextInputGroup.md +600 -48
  166. package/docs/components/ToggleGroup/examples/toggle-group.md +195 -15
  167. package/docs/components/Toolbar/examples/Toolbar.md +490 -42
  168. package/docs/components/TreeView/examples/TreeView.md +1390 -130
  169. package/docs/components/Wizard/examples/Wizard.md +492 -72
  170. package/docs/demos/AboutModal/examples/AboutModal.md +57 -9
  171. package/docs/demos/Alert/examples/Alert.md +236 -32
  172. package/docs/demos/BackToTop/examples/BackToTop.md +57 -9
  173. package/docs/demos/Banner/examples/Banner.md +88 -16
  174. package/docs/demos/Button/examples/Button.md +13 -1
  175. package/docs/demos/Card/examples/Card.md +399 -42
  176. package/docs/demos/CardView/examples/CardView.md +161 -17
  177. package/docs/demos/Compass/examples/Compass.md +6836 -0
  178. package/docs/demos/Dashboard/examples/Dashboard.md +173 -26
  179. package/docs/demos/DataList/examples/DataList.md +566 -65
  180. package/docs/demos/DescriptionList/examples/DescriptionList.md +156 -27
  181. package/docs/demos/Drawer/examples/Drawer.md +216 -45
  182. package/docs/demos/Form/examples/BasicForms.md +273 -21
  183. package/docs/demos/JumpLinks/examples/JumpLinks.md +272 -59
  184. package/docs/demos/Masthead/examples/Masthead.md +458 -89
  185. package/docs/demos/Modal/examples/Modal.md +342 -57
  186. package/docs/demos/Nav/examples/Nav.md +660 -87
  187. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +1088 -140
  188. package/docs/demos/Page/examples/Page.md +618 -123
  189. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +13 -1
  190. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +52 -4
  191. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +691 -113
  192. package/docs/demos/Skeleton/examples/Skeleton.md +44 -8
  193. package/docs/demos/Table/examples/Table.md +3924 -256
  194. package/docs/demos/Tabs/examples/Tabs.md +407 -65
  195. package/docs/demos/Toolbar/examples/Toolbar.md +502 -52
  196. package/docs/demos/Wizard/examples/Wizard.md +796 -130
  197. package/docs/layouts/Bullseye/examples/Bullseye.css +2 -2
  198. package/docs/layouts/Bullseye/examples/Bullseye.md +2 -1
  199. package/docs/layouts/Flex/examples/Flex.css +3 -3
  200. package/docs/layouts/Flex/examples/Flex.md +3 -2
  201. package/docs/layouts/Gallery/examples/Gallery.css +2 -2
  202. package/docs/layouts/Gallery/examples/Gallery.md +4 -3
  203. package/docs/layouts/Grid/examples/Grid.css +1 -1
  204. package/docs/layouts/Grid/examples/Grid.md +6 -5
  205. package/docs/layouts/Level/examples/Level.css +3 -3
  206. package/docs/layouts/Level/examples/Level.md +2 -1
  207. package/docs/layouts/Split/examples/Split.css +1 -1
  208. package/docs/layouts/Split/examples/Split.md +2 -1
  209. package/docs/layouts/Stack/examples/Stack.css +3 -3
  210. package/docs/layouts/Stack/examples/Stack.md +2 -1
  211. package/docs/utilities/Accessibility/examples/Accessibility.md +3 -2
  212. package/docs/utilities/Alignment/examples/Alignment.css +4 -4
  213. package/docs/utilities/Alignment/examples/Alignment.md +3 -2
  214. package/docs/utilities/BackgroundColor/examples/BackgroundColor.md +5 -4
  215. package/docs/utilities/BoxShadow/examples/box-shadow.css +2 -2
  216. package/docs/utilities/BoxShadow/examples/box-shadow.md +2 -1
  217. package/docs/utilities/Display/examples/Display.css +1 -1
  218. package/docs/utilities/Display/examples/Display.md +3 -2
  219. package/docs/utilities/Flex/examples/Flex.css +7 -7
  220. package/docs/utilities/Flex/examples/Flex.md +3 -2
  221. package/docs/utilities/Float/examples/Float.css +2 -2
  222. package/docs/utilities/Float/examples/Float.md +3 -2
  223. package/docs/utilities/Sizing/examples/Sizing.md +8 -7
  224. package/docs/utilities/Spacing/examples/Spacing.css +2 -2
  225. package/docs/utilities/Spacing/examples/Spacing.md +3 -2
  226. package/docs/utilities/Text/examples/Text.md +5 -4
  227. package/icons/PfIcons/add-circle-o.svg +4 -0
  228. package/icons/PfIcons/ansible-tower.svg +4 -0
  229. package/icons/PfIcons/applications.svg +4 -0
  230. package/icons/PfIcons/arrow.svg +4 -0
  231. package/icons/PfIcons/asleep.svg +4 -0
  232. package/icons/PfIcons/attention-bell.svg +4 -0
  233. package/icons/PfIcons/automation.svg +4 -0
  234. package/icons/PfIcons/bell.svg +4 -0
  235. package/icons/PfIcons/blueprint.svg +4 -0
  236. package/icons/PfIcons/build.svg +4 -0
  237. package/icons/PfIcons/builder-image.svg +4 -0
  238. package/icons/PfIcons/bundle.svg +4 -0
  239. package/icons/PfIcons/catalog.svg +4 -0
  240. package/icons/PfIcons/chat.svg +4 -0
  241. package/icons/PfIcons/close.svg +4 -0
  242. package/icons/PfIcons/cloud-security.svg +4 -0
  243. package/icons/PfIcons/cloud-tenant.svg +4 -0
  244. package/icons/PfIcons/cluster.svg +4 -0
  245. package/icons/PfIcons/connected.svg +4 -0
  246. package/icons/PfIcons/container-node.svg +4 -0
  247. package/icons/PfIcons/cpu.svg +4 -0
  248. package/icons/PfIcons/critical-risk.svg +4 -0
  249. package/icons/PfIcons/data-processor.svg +4 -0
  250. package/icons/PfIcons/data-sink.svg +4 -0
  251. package/icons/PfIcons/data-source.svg +4 -0
  252. package/icons/PfIcons/degraded.svg +4 -0
  253. package/icons/PfIcons/disconnected.svg +4 -0
  254. package/icons/PfIcons/domain.svg +4 -0
  255. package/icons/PfIcons/edit.svg +4 -0
  256. package/icons/PfIcons/enhancement.svg +4 -0
  257. package/icons/PfIcons/enterprise.svg +4 -0
  258. package/icons/PfIcons/equalizer.svg +4 -0
  259. package/icons/PfIcons/error-circle-o.svg +4 -0
  260. package/icons/PfIcons/export.svg +4 -0
  261. package/icons/PfIcons/filter.svg +4 -0
  262. package/icons/PfIcons/flavor.svg +4 -0
  263. package/icons/PfIcons/folder-close.svg +4 -0
  264. package/icons/PfIcons/folder-open.svg +4 -0
  265. package/icons/PfIcons/globe-route.svg +4 -0
  266. package/icons/PfIcons/help.svg +4 -0
  267. package/icons/PfIcons/history.svg +4 -0
  268. package/icons/PfIcons/home.svg +4 -0
  269. package/icons/PfIcons/import.svg +4 -0
  270. package/icons/PfIcons/in-progress.svg +4 -0
  271. package/icons/PfIcons/info.svg +4 -0
  272. package/icons/PfIcons/infrastructure.svg +4 -0
  273. package/icons/PfIcons/integration.svg +4 -0
  274. package/icons/PfIcons/key.svg +4 -0
  275. package/icons/PfIcons/locked.svg +4 -0
  276. package/icons/PfIcons/maintenance.svg +4 -0
  277. package/icons/PfIcons/memory.svg +4 -0
  278. package/icons/PfIcons/messages.svg +4 -0
  279. package/icons/PfIcons/middleware.svg +4 -0
  280. package/icons/PfIcons/migration.svg +4 -0
  281. package/icons/PfIcons/module.svg +4 -0
  282. package/icons/PfIcons/monitoring.svg +4 -0
  283. package/icons/PfIcons/multicluster.svg +4 -0
  284. package/icons/PfIcons/namespaces.svg +4 -0
  285. package/icons/PfIcons/network.svg +4 -0
  286. package/icons/PfIcons/new-process.svg +4 -0
  287. package/icons/PfIcons/not-started.svg +4 -0
  288. package/icons/PfIcons/off.svg +4 -0
  289. package/icons/PfIcons/ok.svg +4 -0
  290. package/icons/PfIcons/on-running.svg +4 -0
  291. package/icons/PfIcons/on.svg +4 -0
  292. package/icons/PfIcons/open-drawer-right.svg +4 -0
  293. package/icons/PfIcons/openshift.svg +4 -0
  294. package/icons/PfIcons/openstack.svg +4 -0
  295. package/icons/PfIcons/optimize.svg +4 -0
  296. package/icons/PfIcons/orders.svg +4 -0
  297. package/icons/PfIcons/os-image.svg +4 -0
  298. package/icons/PfIcons/package.svg +4 -0
  299. package/icons/PfIcons/panel-close.svg +4 -0
  300. package/icons/PfIcons/panel-open.svg +4 -0
  301. package/icons/PfIcons/paused.svg +4 -0
  302. package/icons/PfIcons/pending.svg +4 -0
  303. package/icons/PfIcons/pficon-dragdrop.svg +4 -0
  304. package/icons/PfIcons/pficon-history.svg +4 -0
  305. package/icons/PfIcons/pficon-network-range.svg +4 -0
  306. package/icons/PfIcons/pficon-satellite.svg +4 -0
  307. package/icons/PfIcons/pficon-sort-common-asc.svg +4 -0
  308. package/icons/PfIcons/pficon-sort-common-desc.svg +4 -0
  309. package/icons/PfIcons/pficon-template.svg +4 -0
  310. package/icons/PfIcons/pficon-vcenter.svg +4 -0
  311. package/icons/PfIcons/plugged.svg +4 -0
  312. package/icons/PfIcons/port.svg +4 -0
  313. package/icons/PfIcons/print.svg +4 -0
  314. package/icons/PfIcons/private.svg +4 -0
  315. package/icons/PfIcons/process-automation.svg +4 -0
  316. package/icons/PfIcons/project.svg +4 -0
  317. package/icons/PfIcons/rebalance.svg +4 -0
  318. package/icons/PfIcons/rebooting.svg +4 -0
  319. package/icons/PfIcons/regions.svg +4 -0
  320. package/icons/PfIcons/registry.svg +4 -0
  321. package/icons/PfIcons/remove2.svg +4 -0
  322. package/icons/PfIcons/replicator.svg +4 -0
  323. package/icons/PfIcons/repository.svg +4 -0
  324. package/icons/PfIcons/resource-pool.svg +4 -0
  325. package/icons/PfIcons/resources-almost-empty.svg +4 -0
  326. package/icons/PfIcons/resources-almost-full.svg +4 -0
  327. package/icons/PfIcons/resources-empty.svg +4 -0
  328. package/icons/PfIcons/resources-full.svg +4 -0
  329. package/icons/PfIcons/running.svg +4 -0
  330. package/icons/PfIcons/save.svg +4 -0
  331. package/icons/PfIcons/screen.svg +4 -0
  332. package/icons/PfIcons/security.svg +4 -0
  333. package/icons/PfIcons/server-group.svg +4 -0
  334. package/icons/PfIcons/server.svg +4 -0
  335. package/icons/PfIcons/service-catalog.svg +4 -0
  336. package/icons/PfIcons/service.svg +4 -0
  337. package/icons/PfIcons/services.svg +4 -0
  338. package/icons/PfIcons/severity-critical.svg +4 -0
  339. package/icons/PfIcons/severity-important.svg +4 -0
  340. package/icons/PfIcons/severity-minor.svg +4 -0
  341. package/icons/PfIcons/severity-moderate.svg +4 -0
  342. package/icons/PfIcons/severity-none.svg +4 -0
  343. package/icons/PfIcons/severity-undefined.svg +4 -0
  344. package/icons/PfIcons/spinner.svg +4 -0
  345. package/icons/PfIcons/spinner2.svg +4 -0
  346. package/icons/PfIcons/storage-domain.svg +4 -0
  347. package/icons/PfIcons/task.svg +4 -0
  348. package/icons/PfIcons/tenant.svg +4 -0
  349. package/icons/PfIcons/thumb-tack.svg +4 -0
  350. package/icons/PfIcons/topology.svg +4 -0
  351. package/icons/PfIcons/treeview.svg +4 -0
  352. package/icons/PfIcons/trend-down.svg +4 -0
  353. package/icons/PfIcons/trend-up.svg +4 -0
  354. package/icons/PfIcons/unknown.svg +4 -0
  355. package/icons/PfIcons/unlocked.svg +4 -0
  356. package/icons/PfIcons/unplugged.svg +4 -0
  357. package/icons/PfIcons/user.svg +4 -0
  358. package/icons/PfIcons/users.svg +4 -0
  359. package/icons/PfIcons/virtual-machine.svg +4 -0
  360. package/icons/PfIcons/volume.svg +4 -0
  361. package/icons/PfIcons/warning-triangle.svg +4 -0
  362. package/icons/PfIcons/zone.svg +4 -0
  363. package/layouts/Flex/flex.scss +83 -19
  364. package/layouts/Gallery/gallery.css +6 -2
  365. package/layouts/_index.css +6 -2
  366. package/package.json +34 -16
  367. package/patternfly-base-no-globals.css +406 -14
  368. package/patternfly-base.css +413 -14
  369. package/patternfly-charts.css +3 -3
  370. package/patternfly-no-globals.css +1947 -625
  371. package/patternfly.css +1954 -625
  372. package/patternfly.min.css +1 -1
  373. package/patternfly.min.css.map +1 -1
  374. package/sass-utilities/functions.scss +32 -25
  375. package/sass-utilities/mixins.scss +36 -20
  376. package/sass-utilities/namespaces-components.scss +6 -0
package/docs/demos/Card/examples/Card.md CHANGED
@@ -21,7 +21,19 @@ wrapperTag: div
21
21
  >
22
22
  <span class="pf-v6-c-button__icon pf-m-start">
23
23
  <span class="pf-v6-c-card__header-toggle-icon">
24
- <i class="fas fa-angle-right" aria-hidden="true"></i>
24
+ <svg
25
+ class="pf-v6-svg"
26
+ viewBox="0 0 20 20"
27
+ fill="currentColor"
28
+ aria-hidden="true"
29
+ role="img"
30
+ width="1em"
31
+ height="1em"
32
+ >
33
+ <path
34
+ d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
35
+ />
36
+ </svg>
25
37
  </span>
26
38
  </span>
27
39
  </button>
@@ -122,7 +134,19 @@ wrapperTag: div
122
134
  >
123
135
  <span class="pf-v6-c-button__icon pf-m-start">
124
136
  <span class="pf-v6-c-card__header-toggle-icon">
125
- <i class="fas fa-angle-right" aria-hidden="true"></i>
137
+ <svg
138
+ class="pf-v6-svg"
139
+ viewBox="0 0 20 20"
140
+ fill="currentColor"
141
+ aria-hidden="true"
142
+ role="img"
143
+ width="1em"
144
+ height="1em"
145
+ >
146
+ <path
147
+ d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
148
+ />
149
+ </svg>
126
150
  </span>
127
151
  </span>
128
152
  </button>
@@ -184,7 +208,19 @@ wrapperTag: div
184
208
  <a class="pf-v6-c-button pf-m-inline pf-m-link" href="#">
185
209
  <span class="pf-v6-c-button__text">View all set up cluster steps</span>
186
210
  <span class="pf-v6-c-button__icon pf-m-end">
187
- <i class="fas fa-arrow-right" aria-hidden="true"></i>
211
+ <svg
212
+ class="pf-v6-svg"
213
+ viewBox="0 0 448 512"
214
+ fill="currentColor"
215
+ aria-hidden="true"
216
+ role="img"
217
+ width="1em"
218
+ height="1em"
219
+ >
220
+ <path
221
+ d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"
222
+ />
223
+ </svg>
188
224
  </span>
189
225
  </a>
190
226
  </div>
@@ -215,7 +251,19 @@ wrapperTag: div
215
251
  <a class="pf-v6-c-button pf-m-inline pf-m-link" href="#">
216
252
  <span class="pf-v6-c-button__text">View all guided tours</span>
217
253
  <span class="pf-v6-c-button__icon pf-m-end">
218
- <i class="fas fa-arrow-right" aria-hidden="true"></i>
254
+ <svg
255
+ class="pf-v6-svg"
256
+ viewBox="0 0 448 512"
257
+ fill="currentColor"
258
+ aria-hidden="true"
259
+ role="img"
260
+ width="1em"
261
+ height="1em"
262
+ >
263
+ <path
264
+ d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"
265
+ />
266
+ </svg>
219
267
  </span>
220
268
  </a>
221
269
  </div>
@@ -249,7 +297,19 @@ wrapperTag: div
249
297
  <a class="pf-v6-c-button pf-m-inline pf-m-link" href="#">
250
298
  <span class="pf-v6-c-button__text">View all quick starts</span>
251
299
  <span class="pf-v6-c-button__icon pf-m-end">
252
- <i class="fas fa-arrow-right" aria-hidden="true"></i>
300
+ <svg
301
+ class="pf-v6-svg"
302
+ viewBox="0 0 448 512"
303
+ fill="currentColor"
304
+ aria-hidden="true"
305
+ role="img"
306
+ width="1em"
307
+ height="1em"
308
+ >
309
+ <path
310
+ d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"
311
+ />
312
+ </svg>
253
313
  </span>
254
314
  </a>
255
315
  </div>
@@ -286,7 +346,19 @@ wrapperTag: div
286
346
  <a class="pf-v6-c-button pf-m-inline pf-m-link" href="#">
287
347
  <span class="pf-v6-c-button__text">View all learning resources</span>
288
348
  <span class="pf-v6-c-button__icon pf-m-end">
289
- <i class="fas fa-arrow-right" aria-hidden="true"></i>
349
+ <svg
350
+ class="pf-v6-svg"
351
+ viewBox="0 0 448 512"
352
+ fill="currentColor"
353
+ aria-hidden="true"
354
+ role="img"
355
+ width="1em"
356
+ height="1em"
357
+ >
358
+ <path
359
+ d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"
360
+ />
361
+ </svg>
290
362
  </span>
291
363
  </a>
292
364
  </div>
@@ -717,13 +789,23 @@ wrapperTag: div
717
789
  </div>
718
790
  </div>
719
791
  <div class="pf-v6-c-card__body">
720
- <div class="pf-v6-c-tabs pf-m-fill" role="region" id="status-tabs">
721
- <ul class="pf-v6-c-tabs__list" role="tablist">
792
+ <div
793
+ class="pf-v6-c-tabs pf-m-fill"
794
+ aria-label="Status, tabbed card example"
795
+ role="region"
796
+ id="status-tabs"
797
+ >
798
+ <ul
799
+ class="pf-v6-c-tabs__list"
800
+ role="tablist"
801
+ aria-label="Status, tabbed card example"
802
+ >
722
803
  <li class="pf-v6-c-tabs__item pf-m-current" role="presentation">
723
804
  <button
724
805
  type="button"
725
806
  class="pf-v6-c-tabs__link"
726
807
  role="tab"
808
+ aria-selected="true"
727
809
  id="status-tabs-object-1-link"
728
810
  >
729
811
  <span class="pf-v6-c-tabs__item-text">Object 1</span>
@@ -734,6 +816,7 @@ wrapperTag: div
734
816
  type="button"
735
817
  class="pf-v6-c-tabs__link"
736
818
  role="tab"
819
+ aria-selected="false"
737
820
  id="status-tabs-object-2-link"
738
821
  >
739
822
  <span class="pf-v6-c-tabs__item-text">Object 2</span>
@@ -744,6 +827,7 @@ wrapperTag: div
744
827
  type="button"
745
828
  class="pf-v6-c-tabs__link"
746
829
  role="tab"
830
+ aria-selected="false"
747
831
  id="status-tabs-object-3-link"
748
832
  >
749
833
  <span class="pf-v6-c-tabs__item-text">Object 3</span>
@@ -1055,7 +1139,19 @@ wrapperTag: div
1055
1139
  </div>
1056
1140
  </div>
1057
1141
  <span class="pf-v6-c-notification-drawer__group-toggle-icon">
1058
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1142
+ <svg
1143
+ class="pf-v6-svg"
1144
+ viewBox="0 0 20 20"
1145
+ fill="currentColor"
1146
+ aria-hidden="true"
1147
+ role="img"
1148
+ width="1em"
1149
+ height="1em"
1150
+ >
1151
+ <path
1152
+ d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
1153
+ />
1154
+ </svg>
1059
1155
  </span>
1060
1156
  </button>
1061
1157
  <ul class="pf-v6-c-notification-drawer__list" role="list" hidden>
@@ -1065,7 +1161,19 @@ wrapperTag: div
1065
1161
  >
1066
1162
  <div class="pf-v6-c-notification-drawer__list-item-header">
1067
1163
  <span class="pf-v6-c-notification-drawer__list-item-header-icon">
1068
- <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
1164
+ <svg
1165
+ class="pf-v6-svg"
1166
+ viewBox="0 0 32 32"
1167
+ fill="currentColor"
1168
+ aria-hidden="true"
1169
+ role="img"
1170
+ width="1em"
1171
+ height="1em"
1172
+ >
1173
+ <path
1174
+ 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"
1175
+ />
1176
+ </svg>
1069
1177
  </span>
1070
1178
  <h2 class="pf-v6-c-notification-drawer__list-item-header-title">
1071
1179
  <span class="pf-v6-screen-reader">Danger notification:</span>
@@ -1082,7 +1190,19 @@ wrapperTag: div
1082
1190
  >
1083
1191
  <div class="pf-v6-c-notification-drawer__list-item-header">
1084
1192
  <span class="pf-v6-c-notification-drawer__list-item-header-icon">
1085
- <i class="fas fa-exclamation-triangle" aria-hidden="true"></i>
1193
+ <svg
1194
+ class="pf-v6-svg"
1195
+ viewBox="0 0 32 32"
1196
+ fill="currentColor"
1197
+ aria-hidden="true"
1198
+ role="img"
1199
+ width="1em"
1200
+ height="1em"
1201
+ >
1202
+ <path
1203
+ 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"
1204
+ />
1205
+ </svg>
1086
1206
  </span>
1087
1207
  <h2 class="pf-v6-c-notification-drawer__list-item-header-title">
1088
1208
  <span class="pf-v6-screen-reader">Warning notification:</span>
@@ -1244,7 +1364,19 @@ wrapperTag: div
1244
1364
  </div>
1245
1365
  </div>
1246
1366
  <span class="pf-v6-c-notification-drawer__group-toggle-icon">
1247
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1367
+ <svg
1368
+ class="pf-v6-svg"
1369
+ viewBox="0 0 20 20"
1370
+ fill="currentColor"
1371
+ aria-hidden="true"
1372
+ role="img"
1373
+ width="1em"
1374
+ height="1em"
1375
+ >
1376
+ <path
1377
+ d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
1378
+ />
1379
+ </svg>
1248
1380
  </span>
1249
1381
  </button>
1250
1382
  <ul class="pf-v6-c-notification-drawer__list" role="list">
@@ -1254,7 +1386,19 @@ wrapperTag: div
1254
1386
  >
1255
1387
  <div class="pf-v6-c-notification-drawer__list-item-header">
1256
1388
  <span class="pf-v6-c-notification-drawer__list-item-header-icon">
1257
- <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
1389
+ <svg
1390
+ class="pf-v6-svg"
1391
+ viewBox="0 0 32 32"
1392
+ fill="currentColor"
1393
+ aria-hidden="true"
1394
+ role="img"
1395
+ width="1em"
1396
+ height="1em"
1397
+ >
1398
+ <path
1399
+ 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"
1400
+ />
1401
+ </svg>
1258
1402
  </span>
1259
1403
  <h2 class="pf-v6-c-notification-drawer__list-item-header-title">
1260
1404
  <span class="pf-v6-screen-reader">Danger notification:</span>
@@ -1271,7 +1415,19 @@ wrapperTag: div
1271
1415
  >
1272
1416
  <div class="pf-v6-c-notification-drawer__list-item-header">
1273
1417
  <span class="pf-v6-c-notification-drawer__list-item-header-icon">
1274
- <i class="fas fa-exclamation-triangle" aria-hidden="true"></i>
1418
+ <svg
1419
+ class="pf-v6-svg"
1420
+ viewBox="0 0 32 32"
1421
+ fill="currentColor"
1422
+ aria-hidden="true"
1423
+ role="img"
1424
+ width="1em"
1425
+ height="1em"
1426
+ >
1427
+ <path
1428
+ 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"
1429
+ />
1430
+ </svg>
1275
1431
  </span>
1276
1432
  <h2 class="pf-v6-c-notification-drawer__list-item-header-title">
1277
1433
  <span class="pf-v6-screen-reader">Warning notification:</span>
@@ -1342,7 +1498,19 @@ wrapperTag: div
1342
1498
  aria-label="Close"
1343
1499
  >
1344
1500
  <span class="pf-v6-c-button__icon">
1345
- <i class="fas fa-times" aria-hidden="true"></i>
1501
+ <svg
1502
+ class="pf-v6-svg"
1503
+ viewBox="0 0 20 20"
1504
+ fill="currentColor"
1505
+ aria-hidden="true"
1506
+ role="img"
1507
+ width="1em"
1508
+ height="1em"
1509
+ >
1510
+ <path
1511
+ 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"
1512
+ />
1513
+ </svg>
1346
1514
  </span>
1347
1515
  </button>
1348
1516
  </div>
@@ -1403,10 +1571,19 @@ wrapperTag: div
1403
1571
  >
1404
1572
  <span class="pf-v6-c-button__icon">
1405
1573
  <div class="pf-v6-c-table__toggle-icon">
1406
- <i
1407
- class="fas fa-angle-down"
1574
+ <svg
1575
+ class="pf-v6-svg"
1576
+ viewBox="0 0 20 20"
1577
+ fill="currentColor"
1408
1578
  aria-hidden="true"
1409
- ></i>
1579
+ role="img"
1580
+ width="1em"
1581
+ height="1em"
1582
+ >
1583
+ <path
1584
+ d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
1585
+ />
1586
+ </svg>
1410
1587
  </div>
1411
1588
  </span>
1412
1589
  </button>
@@ -1451,10 +1628,19 @@ wrapperTag: div
1451
1628
  aria-label="Inline danger alert"
1452
1629
  >
1453
1630
  <div class="pf-v6-c-alert__icon">
1454
- <i
1455
- class="fas fa-fw fa-exclamation-circle"
1631
+ <svg
1632
+ class="pf-v6-svg"
1633
+ viewBox="0 0 512 512"
1634
+ fill="currentColor"
1456
1635
  aria-hidden="true"
1457
- ></i>
1636
+ role="img"
1637
+ width="1em"
1638
+ height="1em"
1639
+ >
1640
+ <path
1641
+ d="M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zm-248 50c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"
1642
+ />
1643
+ </svg>
1458
1644
  </div>
1459
1645
  <p class="pf-v6-c-alert__title">
1460
1646
  <span
@@ -1485,10 +1671,19 @@ wrapperTag: div
1485
1671
  >
1486
1672
  <span class="pf-v6-c-button__icon">
1487
1673
  <div class="pf-v6-c-table__toggle-icon">
1488
- <i
1489
- class="fas fa-angle-down"
1674
+ <svg
1675
+ class="pf-v6-svg"
1676
+ viewBox="0 0 20 20"
1677
+ fill="currentColor"
1490
1678
  aria-hidden="true"
1491
- ></i>
1679
+ role="img"
1680
+ width="1em"
1681
+ height="1em"
1682
+ >
1683
+ <path
1684
+ d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
1685
+ />
1686
+ </svg>
1492
1687
  </div>
1493
1688
  </span>
1494
1689
  </button>
@@ -1553,10 +1748,19 @@ wrapperTag: div
1553
1748
  >
1554
1749
  <span class="pf-v6-c-button__icon">
1555
1750
  <div class="pf-v6-c-table__toggle-icon">
1556
- <i
1557
- class="fas fa-angle-down"
1751
+ <svg
1752
+ class="pf-v6-svg"
1753
+ viewBox="0 0 20 20"
1754
+ fill="currentColor"
1558
1755
  aria-hidden="true"
1559
- ></i>
1756
+ role="img"
1757
+ width="1em"
1758
+ height="1em"
1759
+ >
1760
+ <path
1761
+ d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
1762
+ />
1763
+ </svg>
1560
1764
  </div>
1561
1765
  </span>
1562
1766
  </button>
@@ -1619,10 +1823,19 @@ wrapperTag: div
1619
1823
  >
1620
1824
  <span class="pf-v6-c-button__icon">
1621
1825
  <div class="pf-v6-c-table__toggle-icon">
1622
- <i
1623
- class="fas fa-angle-down"
1826
+ <svg
1827
+ class="pf-v6-svg"
1828
+ viewBox="0 0 20 20"
1829
+ fill="currentColor"
1624
1830
  aria-hidden="true"
1625
- ></i>
1831
+ role="img"
1832
+ width="1em"
1833
+ height="1em"
1834
+ >
1835
+ <path
1836
+ d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
1837
+ />
1838
+ </svg>
1626
1839
  </div>
1627
1840
  </span>
1628
1841
  </button>
@@ -1779,7 +1992,19 @@ wrapperTag: div
1779
1992
  </div>
1780
1993
  </div>
1781
1994
  <span class="pf-v6-c-notification-drawer__group-toggle-icon">
1782
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1995
+ <svg
1996
+ class="pf-v6-svg"
1997
+ viewBox="0 0 20 20"
1998
+ fill="currentColor"
1999
+ aria-hidden="true"
2000
+ role="img"
2001
+ width="1em"
2002
+ height="1em"
2003
+ >
2004
+ <path
2005
+ d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
2006
+ />
2007
+ </svg>
1783
2008
  </span>
1784
2009
  </button>
1785
2010
  <ul class="pf-v6-c-notification-drawer__list" role="list">
@@ -1789,7 +2014,19 @@ wrapperTag: div
1789
2014
  >
1790
2015
  <div class="pf-v6-c-notification-drawer__list-item-header">
1791
2016
  <span class="pf-v6-c-notification-drawer__list-item-header-icon">
1792
- <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
2017
+ <svg
2018
+ class="pf-v6-svg"
2019
+ viewBox="0 0 32 32"
2020
+ fill="currentColor"
2021
+ aria-hidden="true"
2022
+ role="img"
2023
+ width="1em"
2024
+ height="1em"
2025
+ >
2026
+ <path
2027
+ 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"
2028
+ />
2029
+ </svg>
1793
2030
  </span>
1794
2031
  <h2 class="pf-v6-c-notification-drawer__list-item-header-title">
1795
2032
  <span class="pf-v6-screen-reader">Danger notification:</span>
@@ -1806,7 +2043,19 @@ wrapperTag: div
1806
2043
  >
1807
2044
  <div class="pf-v6-c-notification-drawer__list-item-header">
1808
2045
  <span class="pf-v6-c-notification-drawer__list-item-header-icon">
1809
- <i class="fas fa-exclamation-triangle" aria-hidden="true"></i>
2046
+ <svg
2047
+ class="pf-v6-svg"
2048
+ viewBox="0 0 32 32"
2049
+ fill="currentColor"
2050
+ aria-hidden="true"
2051
+ role="img"
2052
+ width="1em"
2053
+ height="1em"
2054
+ >
2055
+ <path
2056
+ 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"
2057
+ />
2058
+ </svg>
1810
2059
  </span>
1811
2060
  <h2 class="pf-v6-c-notification-drawer__list-item-header-title">
1812
2061
  <span class="pf-v6-screen-reader">Warning notification:</span>
@@ -2022,7 +2271,19 @@ wrapperTag: div
2022
2271
  >
2023
2272
  <span class="pf-v6-c-button__icon pf-m-start">
2024
2273
  <span class="pf-v6-c-card__header-toggle-icon">
2025
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2274
+ <svg
2275
+ class="pf-v6-svg"
2276
+ viewBox="0 0 20 20"
2277
+ fill="currentColor"
2278
+ aria-hidden="true"
2279
+ role="img"
2280
+ width="1em"
2281
+ height="1em"
2282
+ >
2283
+ <path
2284
+ d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
2285
+ />
2286
+ </svg>
2026
2287
  </span>
2027
2288
  </span>
2028
2289
  </button>
@@ -2135,7 +2396,19 @@ wrapperTag: div
2135
2396
  >
2136
2397
  <span class="pf-v6-c-button__icon pf-m-start">
2137
2398
  <span class="pf-v6-c-card__header-toggle-icon">
2138
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2399
+ <svg
2400
+ class="pf-v6-svg"
2401
+ viewBox="0 0 20 20"
2402
+ fill="currentColor"
2403
+ aria-hidden="true"
2404
+ role="img"
2405
+ width="1em"
2406
+ height="1em"
2407
+ >
2408
+ <path
2409
+ d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
2410
+ />
2411
+ </svg>
2139
2412
  </span>
2140
2413
  </span>
2141
2414
  </button>
@@ -2165,7 +2438,19 @@ wrapperTag: div
2165
2438
  >
2166
2439
  <span class="pf-v6-c-button__icon pf-m-start">
2167
2440
  <span class="pf-v6-c-card__header-toggle-icon">
2168
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2441
+ <svg
2442
+ class="pf-v6-svg"
2443
+ viewBox="0 0 20 20"
2444
+ fill="currentColor"
2445
+ aria-hidden="true"
2446
+ role="img"
2447
+ width="1em"
2448
+ height="1em"
2449
+ >
2450
+ <path
2451
+ d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
2452
+ />
2453
+ </svg>
2169
2454
  </span>
2170
2455
  </span>
2171
2456
  </button>
@@ -2210,7 +2495,19 @@ wrapperTag: div
2210
2495
  >
2211
2496
  <span class="pf-v6-c-button__icon pf-m-start">
2212
2497
  <span class="pf-v6-c-card__header-toggle-icon">
2213
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2498
+ <svg
2499
+ class="pf-v6-svg"
2500
+ viewBox="0 0 20 20"
2501
+ fill="currentColor"
2502
+ aria-hidden="true"
2503
+ role="img"
2504
+ width="1em"
2505
+ height="1em"
2506
+ >
2507
+ <path
2508
+ d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
2509
+ />
2510
+ </svg>
2214
2511
  </span>
2215
2512
  </span>
2216
2513
  </button>
@@ -2320,7 +2617,19 @@ wrapperTag: div
2320
2617
  >
2321
2618
  <span class="pf-v6-c-button__icon pf-m-start">
2322
2619
  <span class="pf-v6-c-card__header-toggle-icon">
2323
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2620
+ <svg
2621
+ class="pf-v6-svg"
2622
+ viewBox="0 0 20 20"
2623
+ fill="currentColor"
2624
+ aria-hidden="true"
2625
+ role="img"
2626
+ width="1em"
2627
+ height="1em"
2628
+ >
2629
+ <path
2630
+ d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
2631
+ />
2632
+ </svg>
2324
2633
  </span>
2325
2634
  </span>
2326
2635
  </button>
@@ -2347,7 +2656,19 @@ wrapperTag: div
2347
2656
  >
2348
2657
  <span class="pf-v6-c-button__icon pf-m-start">
2349
2658
  <span class="pf-v6-c-card__header-toggle-icon">
2350
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2659
+ <svg
2660
+ class="pf-v6-svg"
2661
+ viewBox="0 0 20 20"
2662
+ fill="currentColor"
2663
+ aria-hidden="true"
2664
+ role="img"
2665
+ width="1em"
2666
+ height="1em"
2667
+ >
2668
+ <path
2669
+ d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
2670
+ />
2671
+ </svg>
2351
2672
  </span>
2352
2673
  </span>
2353
2674
  </button>
@@ -2387,7 +2708,19 @@ wrapperTag: div
2387
2708
  >
2388
2709
  <span class="pf-v6-c-accordion__toggle-text">CPU 1</span>
2389
2710
  <span class="pf-v6-c-accordion__toggle-icon">
2390
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2711
+ <svg
2712
+ class="pf-v6-svg"
2713
+ viewBox="0 0 20 20"
2714
+ fill="currentColor"
2715
+ aria-hidden="true"
2716
+ role="img"
2717
+ width="1em"
2718
+ height="1em"
2719
+ >
2720
+ <path
2721
+ d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
2722
+ />
2723
+ </svg>
2391
2724
  </span>
2392
2725
  </button>
2393
2726
  </h3>
@@ -2483,7 +2816,19 @@ wrapperTag: div
2483
2816
  >
2484
2817
  <span class="pf-v6-c-accordion__toggle-text">CPU 2</span>
2485
2818
  <span class="pf-v6-c-accordion__toggle-icon">
2486
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2819
+ <svg
2820
+ class="pf-v6-svg"
2821
+ viewBox="0 0 20 20"
2822
+ fill="currentColor"
2823
+ aria-hidden="true"
2824
+ role="img"
2825
+ width="1em"
2826
+ height="1em"
2827
+ >
2828
+ <path
2829
+ d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
2830
+ />
2831
+ </svg>
2487
2832
  </span>
2488
2833
  </button>
2489
2834
  </h3>
@@ -2577,7 +2922,19 @@ wrapperTag: div
2577
2922
  >
2578
2923
  <span class="pf-v6-c-accordion__toggle-text">CPU 3</span>
2579
2924
  <span class="pf-v6-c-accordion__toggle-icon">
2580
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2925
+ <svg
2926
+ class="pf-v6-svg"
2927
+ viewBox="0 0 20 20"
2928
+ fill="currentColor"
2929
+ aria-hidden="true"
2930
+ role="img"
2931
+ width="1em"
2932
+ height="1em"
2933
+ >
2934
+ <path
2935
+ d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
2936
+ />
2937
+ </svg>
2581
2938
  </span>
2582
2939
  </button>
2583
2940
  </h3>