@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/components/TreeView/examples/TreeView.md CHANGED
@@ -25,7 +25,19 @@ cssPrefix: pf-v6-c-tree-view
25
25
  <span class="pf-v6-c-tree-view__node-container">
26
26
  <span class="pf-v6-c-tree-view__node-toggle">
27
27
  <span class="pf-v6-c-tree-view__node-toggle-icon">
28
- <i class="fas fa-angle-right" aria-hidden="true"></i>
28
+ <svg
29
+ class="pf-v6-svg"
30
+ viewBox="0 0 20 20"
31
+ fill="currentColor"
32
+ aria-hidden="true"
33
+ role="img"
34
+ width="1em"
35
+ height="1em"
36
+ >
37
+ <path
38
+ d="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"
39
+ />
40
+ </svg>
29
41
  </span>
30
42
  </span>
31
43
  <span class="pf-v6-c-tree-view__node-text">Application launcher</span>
@@ -45,7 +57,19 @@ cssPrefix: pf-v6-c-tree-view
45
57
  <span class="pf-v6-c-tree-view__node-container">
46
58
  <span class="pf-v6-c-tree-view__node-toggle">
47
59
  <span class="pf-v6-c-tree-view__node-toggle-icon">
48
- <i class="fas fa-angle-right" aria-hidden="true"></i>
60
+ <svg
61
+ class="pf-v6-svg"
62
+ viewBox="0 0 20 20"
63
+ fill="currentColor"
64
+ aria-hidden="true"
65
+ role="img"
66
+ width="1em"
67
+ height="1em"
68
+ >
69
+ <path
70
+ 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"
71
+ />
72
+ </svg>
49
73
  </span>
50
74
  </span>
51
75
  <span class="pf-v6-c-tree-view__node-text">Application 1</span>
@@ -93,7 +117,19 @@ cssPrefix: pf-v6-c-tree-view
93
117
  <span class="pf-v6-c-tree-view__node-container">
94
118
  <span class="pf-v6-c-tree-view__node-toggle">
95
119
  <span class="pf-v6-c-tree-view__node-toggle-icon">
96
- <i class="fas fa-angle-right" aria-hidden="true"></i>
120
+ <svg
121
+ class="pf-v6-svg"
122
+ viewBox="0 0 20 20"
123
+ fill="currentColor"
124
+ aria-hidden="true"
125
+ role="img"
126
+ width="1em"
127
+ height="1em"
128
+ >
129
+ <path
130
+ 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"
131
+ />
132
+ </svg>
97
133
  </span>
98
134
  </span>
99
135
  <span class="pf-v6-c-tree-view__node-text">Loader</span>
@@ -111,16 +147,30 @@ cssPrefix: pf-v6-c-tree-view
111
147
  tabindex="0"
112
148
  >
113
149
  <div class="pf-v6-c-tree-view__content">
114
- <button class="pf-v6-c-tree-view__node">
150
+ <div class="pf-v6-c-tree-view__node pf-m-disabled" tabindex="0">
115
151
  <span class="pf-v6-c-tree-view__node-container">
116
- <span class="pf-v6-c-tree-view__node-toggle">
152
+ <span class="pf-v6-c-tree-view__node-toggle pf-m-disabled">
117
153
  <span class="pf-v6-c-tree-view__node-toggle-icon">
118
- <i class="fas fa-angle-right" aria-hidden="true"></i>
154
+ <svg
155
+ class="pf-v6-svg"
156
+ viewBox="0 0 20 20"
157
+ fill="currentColor"
158
+ aria-hidden="true"
159
+ role="img"
160
+ width="1em"
161
+ height="1em"
162
+ >
163
+ <path
164
+ 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"
165
+ />
166
+ </svg>
119
167
  </span>
120
168
  </span>
121
- <span class="pf-v6-c-tree-view__node-text">Application 2</span>
169
+ <span
170
+ class="pf-v6-c-tree-view__node-text"
171
+ >Application 2 (disabled item and toggle)</span>
122
172
  </span>
123
- </button>
173
+ </div>
124
174
  </div>
125
175
  <ul class="pf-v6-c-tree-view__list" role="group">
126
176
  <li
@@ -130,11 +180,11 @@ cssPrefix: pf-v6-c-tree-view
130
180
  tabindex="-1"
131
181
  >
132
182
  <div class="pf-v6-c-tree-view__content">
133
- <button class="pf-v6-c-tree-view__node">
183
+ <div class="pf-v6-c-tree-view__node" tabindex="0">
134
184
  <span class="pf-v6-c-tree-view__node-container">
135
185
  <span class="pf-v6-c-tree-view__node-text">Settings</span>
136
186
  </span>
137
- </button>
187
+ </div>
138
188
  </div>
139
189
  </li>
140
190
  <li
@@ -149,7 +199,19 @@ cssPrefix: pf-v6-c-tree-view
149
199
  <span class="pf-v6-c-tree-view__node-container">
150
200
  <span class="pf-v6-c-tree-view__node-toggle">
151
201
  <span class="pf-v6-c-tree-view__node-toggle-icon">
152
- <i class="fas fa-angle-right" aria-hidden="true"></i>
202
+ <svg
203
+ class="pf-v6-svg"
204
+ viewBox="0 0 20 20"
205
+ fill="currentColor"
206
+ aria-hidden="true"
207
+ role="img"
208
+ width="1em"
209
+ height="1em"
210
+ >
211
+ <path
212
+ 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"
213
+ />
214
+ </svg>
153
215
  </span>
154
216
  </span>
155
217
  <span class="pf-v6-c-tree-view__node-text">Settings</span>
@@ -169,7 +231,19 @@ cssPrefix: pf-v6-c-tree-view
169
231
  <span class="pf-v6-c-tree-view__node-container">
170
232
  <span class="pf-v6-c-tree-view__node-toggle">
171
233
  <span class="pf-v6-c-tree-view__node-toggle-icon">
172
- <i class="fas fa-angle-right" aria-hidden="true"></i>
234
+ <svg
235
+ class="pf-v6-svg"
236
+ viewBox="0 0 20 20"
237
+ fill="currentColor"
238
+ aria-hidden="true"
239
+ role="img"
240
+ width="1em"
241
+ height="1em"
242
+ >
243
+ <path
244
+ 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"
245
+ />
246
+ </svg>
173
247
  </span>
174
248
  </span>
175
249
  <span class="pf-v6-c-tree-view__node-text">Loader</span>
@@ -189,7 +263,19 @@ cssPrefix: pf-v6-c-tree-view
189
263
  <span class="pf-v6-c-tree-view__node-container">
190
264
  <span class="pf-v6-c-tree-view__node-toggle">
191
265
  <span class="pf-v6-c-tree-view__node-toggle-icon">
192
- <i class="fas fa-angle-right" aria-hidden="true"></i>
266
+ <svg
267
+ class="pf-v6-svg"
268
+ viewBox="0 0 20 20"
269
+ fill="currentColor"
270
+ aria-hidden="true"
271
+ role="img"
272
+ width="1em"
273
+ height="1em"
274
+ >
275
+ <path
276
+ 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"
277
+ />
278
+ </svg>
193
279
  </span>
194
280
  </span>
195
281
  <span class="pf-v6-c-tree-view__node-text">Loader app 1</span>
@@ -243,7 +329,19 @@ cssPrefix: pf-v6-c-tree-view
243
329
  <span class="pf-v6-c-tree-view__node-container">
244
330
  <span class="pf-v6-c-tree-view__node-toggle">
245
331
  <span class="pf-v6-c-tree-view__node-toggle-icon">
246
- <i class="fas fa-angle-right" aria-hidden="true"></i>
332
+ <svg
333
+ class="pf-v6-svg"
334
+ viewBox="0 0 20 20"
335
+ fill="currentColor"
336
+ aria-hidden="true"
337
+ role="img"
338
+ width="1em"
339
+ height="1em"
340
+ >
341
+ <path
342
+ 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"
343
+ />
344
+ </svg>
247
345
  </span>
248
346
  </span>
249
347
  <span class="pf-v6-c-tree-view__node-text">Cost management</span>
@@ -263,7 +361,19 @@ cssPrefix: pf-v6-c-tree-view
263
361
  <span class="pf-v6-c-tree-view__node-container">
264
362
  <span class="pf-v6-c-tree-view__node-toggle">
265
363
  <span class="pf-v6-c-tree-view__node-toggle-icon">
266
- <i class="fas fa-angle-right" aria-hidden="true"></i>
364
+ <svg
365
+ class="pf-v6-svg"
366
+ viewBox="0 0 20 20"
367
+ fill="currentColor"
368
+ aria-hidden="true"
369
+ role="img"
370
+ width="1em"
371
+ height="1em"
372
+ >
373
+ <path
374
+ 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"
375
+ />
376
+ </svg>
267
377
  </span>
268
378
  </span>
269
379
  <span class="pf-v6-c-tree-view__node-text">Sources</span>
@@ -283,7 +393,19 @@ cssPrefix: pf-v6-c-tree-view
283
393
  <span class="pf-v6-c-tree-view__node-container">
284
394
  <span class="pf-v6-c-tree-view__node-toggle">
285
395
  <span class="pf-v6-c-tree-view__node-toggle-icon">
286
- <i class="fas fa-angle-right" aria-hidden="true"></i>
396
+ <svg
397
+ class="pf-v6-svg"
398
+ viewBox="0 0 20 20"
399
+ fill="currentColor"
400
+ aria-hidden="true"
401
+ role="img"
402
+ width="1em"
403
+ height="1em"
404
+ >
405
+ <path
406
+ 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"
407
+ />
408
+ </svg>
287
409
  </span>
288
410
  </span>
289
411
  <span
@@ -322,7 +444,19 @@ A tree view can be setup to allow multiple nodes to be selected. When a tree vie
322
444
  <span class="pf-v6-c-tree-view__node-container">
323
445
  <span class="pf-v6-c-tree-view__node-toggle">
324
446
  <span class="pf-v6-c-tree-view__node-toggle-icon">
325
- <i class="fas fa-angle-right" aria-hidden="true"></i>
447
+ <svg
448
+ class="pf-v6-svg"
449
+ viewBox="0 0 20 20"
450
+ fill="currentColor"
451
+ aria-hidden="true"
452
+ role="img"
453
+ width="1em"
454
+ height="1em"
455
+ >
456
+ <path
457
+ 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"
458
+ />
459
+ </svg>
326
460
  </span>
327
461
  </span>
328
462
  <span class="pf-v6-c-tree-view__node-text">Application launcher</span>
@@ -342,7 +476,19 @@ A tree view can be setup to allow multiple nodes to be selected. When a tree vie
342
476
  <span class="pf-v6-c-tree-view__node-container">
343
477
  <span class="pf-v6-c-tree-view__node-toggle">
344
478
  <span class="pf-v6-c-tree-view__node-toggle-icon">
345
- <i class="fas fa-angle-right" aria-hidden="true"></i>
479
+ <svg
480
+ class="pf-v6-svg"
481
+ viewBox="0 0 20 20"
482
+ fill="currentColor"
483
+ aria-hidden="true"
484
+ role="img"
485
+ width="1em"
486
+ height="1em"
487
+ >
488
+ <path
489
+ 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"
490
+ />
491
+ </svg>
346
492
  </span>
347
493
  </span>
348
494
  <span class="pf-v6-c-tree-view__node-text">Application 1</span>
@@ -390,7 +536,19 @@ A tree view can be setup to allow multiple nodes to be selected. When a tree vie
390
536
  <span class="pf-v6-c-tree-view__node-container">
391
537
  <span class="pf-v6-c-tree-view__node-toggle">
392
538
  <span class="pf-v6-c-tree-view__node-toggle-icon">
393
- <i class="fas fa-angle-right" aria-hidden="true"></i>
539
+ <svg
540
+ class="pf-v6-svg"
541
+ viewBox="0 0 20 20"
542
+ fill="currentColor"
543
+ aria-hidden="true"
544
+ role="img"
545
+ width="1em"
546
+ height="1em"
547
+ >
548
+ <path
549
+ 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"
550
+ />
551
+ </svg>
394
552
  </span>
395
553
  </span>
396
554
  <span class="pf-v6-c-tree-view__node-text">Loader</span>
@@ -412,7 +570,19 @@ A tree view can be setup to allow multiple nodes to be selected. When a tree vie
412
570
  <span class="pf-v6-c-tree-view__node-container">
413
571
  <span class="pf-v6-c-tree-view__node-toggle">
414
572
  <span class="pf-v6-c-tree-view__node-toggle-icon">
415
- <i class="fas fa-angle-right" aria-hidden="true"></i>
573
+ <svg
574
+ class="pf-v6-svg"
575
+ viewBox="0 0 20 20"
576
+ fill="currentColor"
577
+ aria-hidden="true"
578
+ role="img"
579
+ width="1em"
580
+ height="1em"
581
+ >
582
+ <path
583
+ 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"
584
+ />
585
+ </svg>
416
586
  </span>
417
587
  </span>
418
588
  <span class="pf-v6-c-tree-view__node-text">Application 2</span>
@@ -446,7 +616,19 @@ A tree view can be setup to allow multiple nodes to be selected. When a tree vie
446
616
  <span class="pf-v6-c-tree-view__node-container">
447
617
  <span class="pf-v6-c-tree-view__node-toggle">
448
618
  <span class="pf-v6-c-tree-view__node-toggle-icon">
449
- <i class="fas fa-angle-right" aria-hidden="true"></i>
619
+ <svg
620
+ class="pf-v6-svg"
621
+ viewBox="0 0 20 20"
622
+ fill="currentColor"
623
+ aria-hidden="true"
624
+ role="img"
625
+ width="1em"
626
+ height="1em"
627
+ >
628
+ <path
629
+ 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"
630
+ />
631
+ </svg>
450
632
  </span>
451
633
  </span>
452
634
  <span class="pf-v6-c-tree-view__node-text">Settings</span>
@@ -466,7 +648,19 @@ A tree view can be setup to allow multiple nodes to be selected. When a tree vie
466
648
  <span class="pf-v6-c-tree-view__node-container">
467
649
  <span class="pf-v6-c-tree-view__node-toggle">
468
650
  <span class="pf-v6-c-tree-view__node-toggle-icon">
469
- <i class="fas fa-angle-right" aria-hidden="true"></i>
651
+ <svg
652
+ class="pf-v6-svg"
653
+ viewBox="0 0 20 20"
654
+ fill="currentColor"
655
+ aria-hidden="true"
656
+ role="img"
657
+ width="1em"
658
+ height="1em"
659
+ >
660
+ <path
661
+ 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"
662
+ />
663
+ </svg>
470
664
  </span>
471
665
  </span>
472
666
  <span class="pf-v6-c-tree-view__node-text">Loader</span>
@@ -486,7 +680,19 @@ A tree view can be setup to allow multiple nodes to be selected. When a tree vie
486
680
  <span class="pf-v6-c-tree-view__node-container">
487
681
  <span class="pf-v6-c-tree-view__node-toggle">
488
682
  <span class="pf-v6-c-tree-view__node-toggle-icon">
489
- <i class="fas fa-angle-right" aria-hidden="true"></i>
683
+ <svg
684
+ class="pf-v6-svg"
685
+ viewBox="0 0 20 20"
686
+ fill="currentColor"
687
+ aria-hidden="true"
688
+ role="img"
689
+ width="1em"
690
+ height="1em"
691
+ >
692
+ <path
693
+ 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"
694
+ />
695
+ </svg>
490
696
  </span>
491
697
  </span>
492
698
  <span class="pf-v6-c-tree-view__node-text">Loader app 1</span>
@@ -540,7 +746,19 @@ A tree view can be setup to allow multiple nodes to be selected. When a tree vie
540
746
  <span class="pf-v6-c-tree-view__node-container">
541
747
  <span class="pf-v6-c-tree-view__node-toggle">
542
748
  <span class="pf-v6-c-tree-view__node-toggle-icon">
543
- <i class="fas fa-angle-right" aria-hidden="true"></i>
749
+ <svg
750
+ class="pf-v6-svg"
751
+ viewBox="0 0 20 20"
752
+ fill="currentColor"
753
+ aria-hidden="true"
754
+ role="img"
755
+ width="1em"
756
+ height="1em"
757
+ >
758
+ <path
759
+ 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"
760
+ />
761
+ </svg>
544
762
  </span>
545
763
  </span>
546
764
  <span class="pf-v6-c-tree-view__node-text">Cost management</span>
@@ -560,7 +778,19 @@ A tree view can be setup to allow multiple nodes to be selected. When a tree vie
560
778
  <span class="pf-v6-c-tree-view__node-container">
561
779
  <span class="pf-v6-c-tree-view__node-toggle">
562
780
  <span class="pf-v6-c-tree-view__node-toggle-icon">
563
- <i class="fas fa-angle-right" aria-hidden="true"></i>
781
+ <svg
782
+ class="pf-v6-svg"
783
+ viewBox="0 0 20 20"
784
+ fill="currentColor"
785
+ aria-hidden="true"
786
+ role="img"
787
+ width="1em"
788
+ height="1em"
789
+ >
790
+ <path
791
+ 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"
792
+ />
793
+ </svg>
564
794
  </span>
565
795
  </span>
566
796
  <span class="pf-v6-c-tree-view__node-text">Sources</span>
@@ -580,7 +810,19 @@ A tree view can be setup to allow multiple nodes to be selected. When a tree vie
580
810
  <span class="pf-v6-c-tree-view__node-container">
581
811
  <span class="pf-v6-c-tree-view__node-toggle">
582
812
  <span class="pf-v6-c-tree-view__node-toggle-icon">
583
- <i class="fas fa-angle-right" aria-hidden="true"></i>
813
+ <svg
814
+ class="pf-v6-svg"
815
+ viewBox="0 0 20 20"
816
+ fill="currentColor"
817
+ aria-hidden="true"
818
+ role="img"
819
+ width="1em"
820
+ height="1em"
821
+ >
822
+ <path
823
+ 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"
824
+ />
825
+ </svg>
584
826
  </span>
585
827
  </span>
586
828
  <span
@@ -637,7 +879,19 @@ A search input can be used to filter tree view items. It is recommended that a t
637
879
  <span class="pf-v6-c-tree-view__node-container">
638
880
  <span class="pf-v6-c-tree-view__node-toggle">
639
881
  <span class="pf-v6-c-tree-view__node-toggle-icon">
640
- <i class="fas fa-angle-right" aria-hidden="true"></i>
882
+ <svg
883
+ class="pf-v6-svg"
884
+ viewBox="0 0 20 20"
885
+ fill="currentColor"
886
+ aria-hidden="true"
887
+ role="img"
888
+ width="1em"
889
+ height="1em"
890
+ >
891
+ <path
892
+ 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"
893
+ />
894
+ </svg>
641
895
  </span>
642
896
  </span>
643
897
  <span class="pf-v6-c-tree-view__node-text">Application launcher</span>
@@ -657,7 +911,19 @@ A search input can be used to filter tree view items. It is recommended that a t
657
911
  <span class="pf-v6-c-tree-view__node-container">
658
912
  <span class="pf-v6-c-tree-view__node-toggle">
659
913
  <span class="pf-v6-c-tree-view__node-toggle-icon">
660
- <i class="fas fa-angle-right" aria-hidden="true"></i>
914
+ <svg
915
+ class="pf-v6-svg"
916
+ viewBox="0 0 20 20"
917
+ fill="currentColor"
918
+ aria-hidden="true"
919
+ role="img"
920
+ width="1em"
921
+ height="1em"
922
+ >
923
+ <path
924
+ 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"
925
+ />
926
+ </svg>
661
927
  </span>
662
928
  </span>
663
929
  <span class="pf-v6-c-tree-view__node-text">Application 1</span>
@@ -707,7 +973,19 @@ A search input can be used to filter tree view items. It is recommended that a t
707
973
  <span class="pf-v6-c-tree-view__node-container">
708
974
  <span class="pf-v6-c-tree-view__node-toggle">
709
975
  <span class="pf-v6-c-tree-view__node-toggle-icon">
710
- <i class="fas fa-angle-right" aria-hidden="true"></i>
976
+ <svg
977
+ class="pf-v6-svg"
978
+ viewBox="0 0 20 20"
979
+ fill="currentColor"
980
+ aria-hidden="true"
981
+ role="img"
982
+ width="1em"
983
+ height="1em"
984
+ >
985
+ <path
986
+ 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"
987
+ />
988
+ </svg>
711
989
  </span>
712
990
  </span>
713
991
  <span class="pf-v6-c-tree-view__node-text">Application 2</span>
@@ -727,7 +1005,19 @@ A search input can be used to filter tree view items. It is recommended that a t
727
1005
  <span class="pf-v6-c-tree-view__node-container">
728
1006
  <span class="pf-v6-c-tree-view__node-toggle">
729
1007
  <span class="pf-v6-c-tree-view__node-toggle-icon">
730
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1008
+ <svg
1009
+ class="pf-v6-svg"
1010
+ viewBox="0 0 20 20"
1011
+ fill="currentColor"
1012
+ aria-hidden="true"
1013
+ role="img"
1014
+ width="1em"
1015
+ height="1em"
1016
+ >
1017
+ <path
1018
+ 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"
1019
+ />
1020
+ </svg>
731
1021
  </span>
732
1022
  </span>
733
1023
  <span class="pf-v6-c-tree-view__node-text">Settings</span>
@@ -747,7 +1037,19 @@ A search input can be used to filter tree view items. It is recommended that a t
747
1037
  <span class="pf-v6-c-tree-view__node-container">
748
1038
  <span class="pf-v6-c-tree-view__node-toggle">
749
1039
  <span class="pf-v6-c-tree-view__node-toggle-icon">
750
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1040
+ <svg
1041
+ class="pf-v6-svg"
1042
+ viewBox="0 0 20 20"
1043
+ fill="currentColor"
1044
+ aria-hidden="true"
1045
+ role="img"
1046
+ width="1em"
1047
+ height="1em"
1048
+ >
1049
+ <path
1050
+ 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"
1051
+ />
1052
+ </svg>
751
1053
  </span>
752
1054
  </span>
753
1055
  <span class="pf-v6-c-tree-view__node-text">Loader</span>
@@ -767,7 +1069,19 @@ A search input can be used to filter tree view items. It is recommended that a t
767
1069
  <span class="pf-v6-c-tree-view__node-container">
768
1070
  <span class="pf-v6-c-tree-view__node-toggle">
769
1071
  <span class="pf-v6-c-tree-view__node-toggle-icon">
770
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1072
+ <svg
1073
+ class="pf-v6-svg"
1074
+ viewBox="0 0 20 20"
1075
+ fill="currentColor"
1076
+ aria-hidden="true"
1077
+ role="img"
1078
+ width="1em"
1079
+ height="1em"
1080
+ >
1081
+ <path
1082
+ 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"
1083
+ />
1084
+ </svg>
771
1085
  </span>
772
1086
  </span>
773
1087
  <span class="pf-v6-c-tree-view__node-text">Loader app 1</span>
@@ -821,7 +1135,19 @@ A search input can be used to filter tree view items. It is recommended that a t
821
1135
  <span class="pf-v6-c-tree-view__node-container">
822
1136
  <span class="pf-v6-c-tree-view__node-toggle">
823
1137
  <span class="pf-v6-c-tree-view__node-toggle-icon">
824
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1138
+ <svg
1139
+ class="pf-v6-svg"
1140
+ viewBox="0 0 20 20"
1141
+ fill="currentColor"
1142
+ aria-hidden="true"
1143
+ role="img"
1144
+ width="1em"
1145
+ height="1em"
1146
+ >
1147
+ <path
1148
+ 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"
1149
+ />
1150
+ </svg>
825
1151
  </span>
826
1152
  </span>
827
1153
  <span class="pf-v6-c-tree-view__node-text">Cost management</span>
@@ -841,7 +1167,19 @@ A search input can be used to filter tree view items. It is recommended that a t
841
1167
  <span class="pf-v6-c-tree-view__node-container">
842
1168
  <span class="pf-v6-c-tree-view__node-toggle">
843
1169
  <span class="pf-v6-c-tree-view__node-toggle-icon">
844
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1170
+ <svg
1171
+ class="pf-v6-svg"
1172
+ viewBox="0 0 20 20"
1173
+ fill="currentColor"
1174
+ aria-hidden="true"
1175
+ role="img"
1176
+ width="1em"
1177
+ height="1em"
1178
+ >
1179
+ <path
1180
+ 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"
1181
+ />
1182
+ </svg>
845
1183
  </span>
846
1184
  </span>
847
1185
  <span class="pf-v6-c-tree-view__node-text">Sources</span>
@@ -861,7 +1199,19 @@ A search input can be used to filter tree view items. It is recommended that a t
861
1199
  <span class="pf-v6-c-tree-view__node-container">
862
1200
  <span class="pf-v6-c-tree-view__node-toggle">
863
1201
  <span class="pf-v6-c-tree-view__node-toggle-icon">
864
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1202
+ <svg
1203
+ class="pf-v6-svg"
1204
+ viewBox="0 0 20 20"
1205
+ fill="currentColor"
1206
+ aria-hidden="true"
1207
+ role="img"
1208
+ width="1em"
1209
+ height="1em"
1210
+ >
1211
+ <path
1212
+ 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"
1213
+ />
1214
+ </svg>
865
1215
  </span>
866
1216
  </span>
867
1217
  <span
@@ -906,7 +1256,19 @@ A search input can be used to filter tree view items. It is recommended that a t
906
1256
  aria-labelledby="toggle-tree-view-checkboxes-1 text-tree-view-checkboxes-1"
907
1257
  >
908
1258
  <span class="pf-v6-c-tree-view__node-toggle-icon">
909
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1259
+ <svg
1260
+ class="pf-v6-svg"
1261
+ viewBox="0 0 20 20"
1262
+ fill="currentColor"
1263
+ aria-hidden="true"
1264
+ role="img"
1265
+ width="1em"
1266
+ height="1em"
1267
+ >
1268
+ <path
1269
+ 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"
1270
+ />
1271
+ </svg>
910
1272
  </span>
911
1273
  </button>
912
1274
  <span class="pf-v6-c-tree-view__node-check">
@@ -949,7 +1311,19 @@ A search input can be used to filter tree view items. It is recommended that a t
949
1311
  aria-labelledby="toggle-tree-view-checkboxes-2 text-tree-view-checkboxes-2"
950
1312
  >
951
1313
  <span class="pf-v6-c-tree-view__node-toggle-icon">
952
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1314
+ <svg
1315
+ class="pf-v6-svg"
1316
+ viewBox="0 0 20 20"
1317
+ fill="currentColor"
1318
+ aria-hidden="true"
1319
+ role="img"
1320
+ width="1em"
1321
+ height="1em"
1322
+ >
1323
+ <path
1324
+ 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"
1325
+ />
1326
+ </svg>
953
1327
  </span>
954
1328
  </button>
955
1329
  <span class="pf-v6-c-tree-view__node-check">
@@ -1059,7 +1433,19 @@ A search input can be used to filter tree view items. It is recommended that a t
1059
1433
  aria-labelledby="toggle-tree-view-checkboxes-5 text-tree-view-checkboxes-5"
1060
1434
  >
1061
1435
  <span class="pf-v6-c-tree-view__node-toggle-icon">
1062
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1436
+ <svg
1437
+ class="pf-v6-svg"
1438
+ viewBox="0 0 20 20"
1439
+ fill="currentColor"
1440
+ aria-hidden="true"
1441
+ role="img"
1442
+ width="1em"
1443
+ height="1em"
1444
+ >
1445
+ <path
1446
+ 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"
1447
+ />
1448
+ </svg>
1063
1449
  </span>
1064
1450
  </button>
1065
1451
  <span class="pf-v6-c-tree-view__node-check">
@@ -1105,7 +1491,19 @@ A search input can be used to filter tree view items. It is recommended that a t
1105
1491
  aria-labelledby="toggle-tree-view-checkboxes-6 text-tree-view-checkboxes-6"
1106
1492
  >
1107
1493
  <span class="pf-v6-c-tree-view__node-toggle-icon">
1108
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1494
+ <svg
1495
+ class="pf-v6-svg"
1496
+ viewBox="0 0 20 20"
1497
+ fill="currentColor"
1498
+ aria-hidden="true"
1499
+ role="img"
1500
+ width="1em"
1501
+ height="1em"
1502
+ >
1503
+ <path
1504
+ 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"
1505
+ />
1506
+ </svg>
1109
1507
  </span>
1110
1508
  </button>
1111
1509
  <span class="pf-v6-c-tree-view__node-check">
@@ -1148,7 +1546,19 @@ A search input can be used to filter tree view items. It is recommended that a t
1148
1546
  aria-labelledby="toggle-tree-view-checkboxes-7 text-tree-view-checkboxes-7"
1149
1547
  >
1150
1548
  <span class="pf-v6-c-tree-view__node-toggle-icon">
1151
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1549
+ <svg
1550
+ class="pf-v6-svg"
1551
+ viewBox="0 0 20 20"
1552
+ fill="currentColor"
1553
+ aria-hidden="true"
1554
+ role="img"
1555
+ width="1em"
1556
+ height="1em"
1557
+ >
1558
+ <path
1559
+ 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"
1560
+ />
1561
+ </svg>
1152
1562
  </span>
1153
1563
  </button>
1154
1564
  <span class="pf-v6-c-tree-view__node-check">
@@ -1223,7 +1633,19 @@ A search input can be used to filter tree view items. It is recommended that a t
1223
1633
  aria-labelledby="toggle-tree-view-checkboxes-9 text-tree-view-checkboxes-9"
1224
1634
  >
1225
1635
  <span class="pf-v6-c-tree-view__node-toggle-icon">
1226
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1636
+ <svg
1637
+ class="pf-v6-svg"
1638
+ viewBox="0 0 20 20"
1639
+ fill="currentColor"
1640
+ aria-hidden="true"
1641
+ role="img"
1642
+ width="1em"
1643
+ height="1em"
1644
+ >
1645
+ <path
1646
+ 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"
1647
+ />
1648
+ </svg>
1227
1649
  </span>
1228
1650
  </button>
1229
1651
  <span class="pf-v6-c-tree-view__node-check">
@@ -1266,7 +1688,19 @@ A search input can be used to filter tree view items. It is recommended that a t
1266
1688
  aria-labelledby="toggle-tree-view-checkboxes-10 text-tree-view-checkboxes-10"
1267
1689
  >
1268
1690
  <span class="pf-v6-c-tree-view__node-toggle-icon">
1269
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1691
+ <svg
1692
+ class="pf-v6-svg"
1693
+ viewBox="0 0 20 20"
1694
+ fill="currentColor"
1695
+ aria-hidden="true"
1696
+ role="img"
1697
+ width="1em"
1698
+ height="1em"
1699
+ >
1700
+ <path
1701
+ 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"
1702
+ />
1703
+ </svg>
1270
1704
  </span>
1271
1705
  </button>
1272
1706
  <span class="pf-v6-c-tree-view__node-check">
@@ -1381,7 +1815,19 @@ A search input can be used to filter tree view items. It is recommended that a t
1381
1815
  aria-labelledby="toggle-tree-view-checkboxes-13 text-tree-view-checkboxes-13"
1382
1816
  >
1383
1817
  <span class="pf-v6-c-tree-view__node-toggle-icon">
1384
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1818
+ <svg
1819
+ class="pf-v6-svg"
1820
+ viewBox="0 0 20 20"
1821
+ fill="currentColor"
1822
+ aria-hidden="true"
1823
+ role="img"
1824
+ width="1em"
1825
+ height="1em"
1826
+ >
1827
+ <path
1828
+ 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"
1829
+ />
1830
+ </svg>
1385
1831
  </span>
1386
1832
  </button>
1387
1833
  <span class="pf-v6-c-tree-view__node-check">
@@ -1424,7 +1870,19 @@ A search input can be used to filter tree view items. It is recommended that a t
1424
1870
  aria-labelledby="toggle-tree-view-checkboxes-14 text-tree-view-checkboxes-14"
1425
1871
  >
1426
1872
  <span class="pf-v6-c-tree-view__node-toggle-icon">
1427
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1873
+ <svg
1874
+ class="pf-v6-svg"
1875
+ viewBox="0 0 20 20"
1876
+ fill="currentColor"
1877
+ aria-hidden="true"
1878
+ role="img"
1879
+ width="1em"
1880
+ height="1em"
1881
+ >
1882
+ <path
1883
+ 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"
1884
+ />
1885
+ </svg>
1428
1886
  </span>
1429
1887
  </button>
1430
1888
  <span class="pf-v6-c-tree-view__node-check">
@@ -1467,7 +1925,19 @@ A search input can be used to filter tree view items. It is recommended that a t
1467
1925
  aria-labelledby="toggle-tree-view-checkboxes-15 text-tree-view-checkboxes-15"
1468
1926
  >
1469
1927
  <span class="pf-v6-c-tree-view__node-toggle-icon">
1470
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1928
+ <svg
1929
+ class="pf-v6-svg"
1930
+ viewBox="0 0 20 20"
1931
+ fill="currentColor"
1932
+ aria-hidden="true"
1933
+ role="img"
1934
+ width="1em"
1935
+ height="1em"
1936
+ >
1937
+ <path
1938
+ 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"
1939
+ />
1940
+ </svg>
1471
1941
  </span>
1472
1942
  </button>
1473
1943
  <span class="pf-v6-c-tree-view__node-check">
@@ -1516,7 +1986,19 @@ A search input can be used to filter tree view items. It is recommended that a t
1516
1986
  <span class="pf-v6-c-tree-view__node-container">
1517
1987
  <span class="pf-v6-c-tree-view__node-toggle">
1518
1988
  <span class="pf-v6-c-tree-view__node-toggle-icon">
1519
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1989
+ <svg
1990
+ class="pf-v6-svg"
1991
+ viewBox="0 0 20 20"
1992
+ fill="currentColor"
1993
+ aria-hidden="true"
1994
+ role="img"
1995
+ width="1em"
1996
+ height="1em"
1997
+ >
1998
+ <path
1999
+ 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"
2000
+ />
2001
+ </svg>
1520
2002
  </span>
1521
2003
  </span>
1522
2004
  <span class="pf-v6-c-tree-view__node-icon">
@@ -1539,7 +2021,19 @@ A search input can be used to filter tree view items. It is recommended that a t
1539
2021
  <span class="pf-v6-c-tree-view__node-container">
1540
2022
  <span class="pf-v6-c-tree-view__node-toggle">
1541
2023
  <span class="pf-v6-c-tree-view__node-toggle-icon">
1542
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2024
+ <svg
2025
+ class="pf-v6-svg"
2026
+ viewBox="0 0 20 20"
2027
+ fill="currentColor"
2028
+ aria-hidden="true"
2029
+ role="img"
2030
+ width="1em"
2031
+ height="1em"
2032
+ >
2033
+ <path
2034
+ 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"
2035
+ />
2036
+ </svg>
1543
2037
  </span>
1544
2038
  </span>
1545
2039
  <span class="pf-v6-c-tree-view__node-icon">
@@ -1594,17 +2088,31 @@ A search input can be used to filter tree view items. It is recommended that a t
1594
2088
  tabindex="0"
1595
2089
  >
1596
2090
  <div class="pf-v6-c-tree-view__content">
1597
- <button class="pf-v6-c-tree-view__node">
2091
+ <button class="pf-v6-c-tree-view__node pf-m-disabled">
1598
2092
  <span class="pf-v6-c-tree-view__node-container">
1599
- <span class="pf-v6-c-tree-view__node-toggle">
2093
+ <span class="pf-v6-c-tree-view__node-toggle pf-m-disabled">
1600
2094
  <span class="pf-v6-c-tree-view__node-toggle-icon">
1601
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2095
+ <svg
2096
+ class="pf-v6-svg"
2097
+ viewBox="0 0 20 20"
2098
+ fill="currentColor"
2099
+ aria-hidden="true"
2100
+ role="img"
2101
+ width="1em"
2102
+ height="1em"
2103
+ >
2104
+ <path
2105
+ 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"
2106
+ />
2107
+ </svg>
1602
2108
  </span>
1603
2109
  </span>
1604
2110
  <span class="pf-v6-c-tree-view__node-icon">
1605
2111
  <i class="fas fa-folder-open" aria-hidden="true"></i>
1606
2112
  </span>
1607
- <span class="pf-v6-c-tree-view__node-text">Application 2</span>
2113
+ <span
2114
+ class="pf-v6-c-tree-view__node-text"
2115
+ >Application 2 (disabled item and toggle)</span>
1608
2116
  </span>
1609
2117
  </button>
1610
2118
  </div>
@@ -1621,7 +2129,19 @@ A search input can be used to filter tree view items. It is recommended that a t
1621
2129
  <span class="pf-v6-c-tree-view__node-container">
1622
2130
  <span class="pf-v6-c-tree-view__node-toggle">
1623
2131
  <span class="pf-v6-c-tree-view__node-toggle-icon">
1624
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2132
+ <svg
2133
+ class="pf-v6-svg"
2134
+ viewBox="0 0 20 20"
2135
+ fill="currentColor"
2136
+ aria-hidden="true"
2137
+ role="img"
2138
+ width="1em"
2139
+ height="1em"
2140
+ >
2141
+ <path
2142
+ 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"
2143
+ />
2144
+ </svg>
1625
2145
  </span>
1626
2146
  </span>
1627
2147
  <span class="pf-v6-c-tree-view__node-icon">
@@ -1644,7 +2164,19 @@ A search input can be used to filter tree view items. It is recommended that a t
1644
2164
  <span class="pf-v6-c-tree-view__node-container">
1645
2165
  <span class="pf-v6-c-tree-view__node-toggle">
1646
2166
  <span class="pf-v6-c-tree-view__node-toggle-icon">
1647
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2167
+ <svg
2168
+ class="pf-v6-svg"
2169
+ viewBox="0 0 20 20"
2170
+ fill="currentColor"
2171
+ aria-hidden="true"
2172
+ role="img"
2173
+ width="1em"
2174
+ height="1em"
2175
+ >
2176
+ <path
2177
+ 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"
2178
+ />
2179
+ </svg>
1648
2180
  </span>
1649
2181
  </span>
1650
2182
  <span class="pf-v6-c-tree-view__node-icon">
@@ -1667,7 +2199,19 @@ A search input can be used to filter tree view items. It is recommended that a t
1667
2199
  <span class="pf-v6-c-tree-view__node-container">
1668
2200
  <span class="pf-v6-c-tree-view__node-toggle">
1669
2201
  <span class="pf-v6-c-tree-view__node-toggle-icon">
1670
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2202
+ <svg
2203
+ class="pf-v6-svg"
2204
+ viewBox="0 0 20 20"
2205
+ fill="currentColor"
2206
+ aria-hidden="true"
2207
+ role="img"
2208
+ width="1em"
2209
+ height="1em"
2210
+ >
2211
+ <path
2212
+ 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"
2213
+ />
2214
+ </svg>
1671
2215
  </span>
1672
2216
  </span>
1673
2217
  <span class="pf-v6-c-tree-view__node-icon">
@@ -1730,7 +2274,19 @@ A search input can be used to filter tree view items. It is recommended that a t
1730
2274
  <span class="pf-v6-c-tree-view__node-container">
1731
2275
  <span class="pf-v6-c-tree-view__node-toggle">
1732
2276
  <span class="pf-v6-c-tree-view__node-toggle-icon">
1733
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2277
+ <svg
2278
+ class="pf-v6-svg"
2279
+ viewBox="0 0 20 20"
2280
+ fill="currentColor"
2281
+ aria-hidden="true"
2282
+ role="img"
2283
+ width="1em"
2284
+ height="1em"
2285
+ >
2286
+ <path
2287
+ 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"
2288
+ />
2289
+ </svg>
1734
2290
  </span>
1735
2291
  </span>
1736
2292
  <span class="pf-v6-c-tree-view__node-icon">
@@ -1753,7 +2309,19 @@ A search input can be used to filter tree view items. It is recommended that a t
1753
2309
  <span class="pf-v6-c-tree-view__node-container">
1754
2310
  <span class="pf-v6-c-tree-view__node-toggle">
1755
2311
  <span class="pf-v6-c-tree-view__node-toggle-icon">
1756
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2312
+ <svg
2313
+ class="pf-v6-svg"
2314
+ viewBox="0 0 20 20"
2315
+ fill="currentColor"
2316
+ aria-hidden="true"
2317
+ role="img"
2318
+ width="1em"
2319
+ height="1em"
2320
+ >
2321
+ <path
2322
+ 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"
2323
+ />
2324
+ </svg>
1757
2325
  </span>
1758
2326
  </span>
1759
2327
  <span class="pf-v6-c-tree-view__node-icon">
@@ -1776,7 +2344,19 @@ A search input can be used to filter tree view items. It is recommended that a t
1776
2344
  <span class="pf-v6-c-tree-view__node-container">
1777
2345
  <span class="pf-v6-c-tree-view__node-toggle">
1778
2346
  <span class="pf-v6-c-tree-view__node-toggle-icon">
1779
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2347
+ <svg
2348
+ class="pf-v6-svg"
2349
+ viewBox="0 0 20 20"
2350
+ fill="currentColor"
2351
+ aria-hidden="true"
2352
+ role="img"
2353
+ width="1em"
2354
+ height="1em"
2355
+ >
2356
+ <path
2357
+ 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"
2358
+ />
2359
+ </svg>
1780
2360
  </span>
1781
2361
  </span>
1782
2362
  <span class="pf-v6-c-tree-view__node-icon">
@@ -1815,7 +2395,19 @@ A search input can be used to filter tree view items. It is recommended that a t
1815
2395
  <span class="pf-v6-c-tree-view__node-container">
1816
2396
  <span class="pf-v6-c-tree-view__node-toggle">
1817
2397
  <span class="pf-v6-c-tree-view__node-toggle-icon">
1818
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2398
+ <svg
2399
+ class="pf-v6-svg"
2400
+ viewBox="0 0 20 20"
2401
+ fill="currentColor"
2402
+ aria-hidden="true"
2403
+ role="img"
2404
+ width="1em"
2405
+ height="1em"
2406
+ >
2407
+ <path
2408
+ 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"
2409
+ />
2410
+ </svg>
1819
2411
  </span>
1820
2412
  </span>
1821
2413
  <span class="pf-v6-c-tree-view__node-text">Application launcher</span>
@@ -1838,7 +2430,19 @@ A search input can be used to filter tree view items. It is recommended that a t
1838
2430
  <span class="pf-v6-c-tree-view__node-container">
1839
2431
  <span class="pf-v6-c-tree-view__node-toggle">
1840
2432
  <span class="pf-v6-c-tree-view__node-toggle-icon">
1841
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2433
+ <svg
2434
+ class="pf-v6-svg"
2435
+ viewBox="0 0 20 20"
2436
+ fill="currentColor"
2437
+ aria-hidden="true"
2438
+ role="img"
2439
+ width="1em"
2440
+ height="1em"
2441
+ >
2442
+ <path
2443
+ 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"
2444
+ />
2445
+ </svg>
1842
2446
  </span>
1843
2447
  </span>
1844
2448
  <span class="pf-v6-c-tree-view__node-text">Application 1</span>
@@ -1891,7 +2495,19 @@ A search input can be used to filter tree view items. It is recommended that a t
1891
2495
  <span class="pf-v6-c-tree-view__node-container">
1892
2496
  <span class="pf-v6-c-tree-view__node-toggle">
1893
2497
  <span class="pf-v6-c-tree-view__node-toggle-icon">
1894
- <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>
1895
2511
  </span>
1896
2512
  </span>
1897
2513
  <span class="pf-v6-c-tree-view__node-text">Application 2</span>
@@ -1914,7 +2530,19 @@ A search input can be used to filter tree view items. It is recommended that a t
1914
2530
  <span class="pf-v6-c-tree-view__node-container">
1915
2531
  <span class="pf-v6-c-tree-view__node-toggle">
1916
2532
  <span class="pf-v6-c-tree-view__node-toggle-icon">
1917
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2533
+ <svg
2534
+ class="pf-v6-svg"
2535
+ viewBox="0 0 20 20"
2536
+ fill="currentColor"
2537
+ aria-hidden="true"
2538
+ role="img"
2539
+ width="1em"
2540
+ height="1em"
2541
+ >
2542
+ <path
2543
+ 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"
2544
+ />
2545
+ </svg>
1918
2546
  </span>
1919
2547
  </span>
1920
2548
  <span class="pf-v6-c-tree-view__node-text">Settings</span>
@@ -1937,7 +2565,19 @@ A search input can be used to filter tree view items. It is recommended that a t
1937
2565
  <span class="pf-v6-c-tree-view__node-container">
1938
2566
  <span class="pf-v6-c-tree-view__node-toggle">
1939
2567
  <span class="pf-v6-c-tree-view__node-toggle-icon">
1940
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2568
+ <svg
2569
+ class="pf-v6-svg"
2570
+ viewBox="0 0 20 20"
2571
+ fill="currentColor"
2572
+ aria-hidden="true"
2573
+ role="img"
2574
+ width="1em"
2575
+ height="1em"
2576
+ >
2577
+ <path
2578
+ 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"
2579
+ />
2580
+ </svg>
1941
2581
  </span>
1942
2582
  </span>
1943
2583
  <span class="pf-v6-c-tree-view__node-text">Loader</span>
@@ -1960,7 +2600,19 @@ A search input can be used to filter tree view items. It is recommended that a t
1960
2600
  <span class="pf-v6-c-tree-view__node-container">
1961
2601
  <span class="pf-v6-c-tree-view__node-toggle">
1962
2602
  <span class="pf-v6-c-tree-view__node-toggle-icon">
1963
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2603
+ <svg
2604
+ class="pf-v6-svg"
2605
+ viewBox="0 0 20 20"
2606
+ fill="currentColor"
2607
+ aria-hidden="true"
2608
+ role="img"
2609
+ width="1em"
2610
+ height="1em"
2611
+ >
2612
+ <path
2613
+ 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"
2614
+ />
2615
+ </svg>
1964
2616
  </span>
1965
2617
  </span>
1966
2618
  <span class="pf-v6-c-tree-view__node-text">Loader app 1</span>
@@ -2017,7 +2669,19 @@ A search input can be used to filter tree view items. It is recommended that a t
2017
2669
  <span class="pf-v6-c-tree-view__node-container">
2018
2670
  <span class="pf-v6-c-tree-view__node-toggle">
2019
2671
  <span class="pf-v6-c-tree-view__node-toggle-icon">
2020
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2672
+ <svg
2673
+ class="pf-v6-svg"
2674
+ viewBox="0 0 20 20"
2675
+ fill="currentColor"
2676
+ aria-hidden="true"
2677
+ role="img"
2678
+ width="1em"
2679
+ height="1em"
2680
+ >
2681
+ <path
2682
+ 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"
2683
+ />
2684
+ </svg>
2021
2685
  </span>
2022
2686
  </span>
2023
2687
  <span class="pf-v6-c-tree-view__node-text">Cost management</span>
@@ -2040,7 +2704,19 @@ A search input can be used to filter tree view items. It is recommended that a t
2040
2704
  <span class="pf-v6-c-tree-view__node-container">
2041
2705
  <span class="pf-v6-c-tree-view__node-toggle">
2042
2706
  <span class="pf-v6-c-tree-view__node-toggle-icon">
2043
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2707
+ <svg
2708
+ class="pf-v6-svg"
2709
+ viewBox="0 0 20 20"
2710
+ fill="currentColor"
2711
+ aria-hidden="true"
2712
+ role="img"
2713
+ width="1em"
2714
+ height="1em"
2715
+ >
2716
+ <path
2717
+ 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"
2718
+ />
2719
+ </svg>
2044
2720
  </span>
2045
2721
  </span>
2046
2722
  <span class="pf-v6-c-tree-view__node-text">Sources</span>
@@ -2063,7 +2739,19 @@ A search input can be used to filter tree view items. It is recommended that a t
2063
2739
  <span class="pf-v6-c-tree-view__node-container">
2064
2740
  <span class="pf-v6-c-tree-view__node-toggle">
2065
2741
  <span class="pf-v6-c-tree-view__node-toggle-icon">
2066
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2742
+ <svg
2743
+ class="pf-v6-svg"
2744
+ viewBox="0 0 20 20"
2745
+ fill="currentColor"
2746
+ aria-hidden="true"
2747
+ role="img"
2748
+ width="1em"
2749
+ height="1em"
2750
+ >
2751
+ <path
2752
+ 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"
2753
+ />
2754
+ </svg>
2067
2755
  </span>
2068
2756
  </span>
2069
2757
  <span
@@ -2102,7 +2790,19 @@ A search input can be used to filter tree view items. It is recommended that a t
2102
2790
  <span class="pf-v6-c-tree-view__node-container">
2103
2791
  <span class="pf-v6-c-tree-view__node-toggle">
2104
2792
  <span class="pf-v6-c-tree-view__node-toggle-icon">
2105
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2793
+ <svg
2794
+ class="pf-v6-svg"
2795
+ viewBox="0 0 20 20"
2796
+ fill="currentColor"
2797
+ aria-hidden="true"
2798
+ role="img"
2799
+ width="1em"
2800
+ height="1em"
2801
+ >
2802
+ <path
2803
+ 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"
2804
+ />
2805
+ </svg>
2106
2806
  </span>
2107
2807
  </span>
2108
2808
  <span class="pf-v6-c-tree-view__node-text">Application launcher</span>
@@ -2117,7 +2817,19 @@ A search input can be used to filter tree view items. It is recommended that a t
2117
2817
  tabindex="-1"
2118
2818
  >
2119
2819
  <span class="pf-v6-c-button__icon">
2120
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
2820
+ <svg
2821
+ class="pf-v6-svg"
2822
+ viewBox="0 0 192 512"
2823
+ fill="currentColor"
2824
+ aria-hidden="true"
2825
+ role="img"
2826
+ width="1em"
2827
+ height="1em"
2828
+ >
2829
+ <path
2830
+ d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
2831
+ />
2832
+ </svg>
2121
2833
  </span>
2122
2834
  </button>
2123
2835
  </div>
@@ -2135,7 +2847,19 @@ A search input can be used to filter tree view items. It is recommended that a t
2135
2847
  <span class="pf-v6-c-tree-view__node-container">
2136
2848
  <span class="pf-v6-c-tree-view__node-toggle">
2137
2849
  <span class="pf-v6-c-tree-view__node-toggle-icon">
2138
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2850
+ <svg
2851
+ class="pf-v6-svg"
2852
+ viewBox="0 0 20 20"
2853
+ fill="currentColor"
2854
+ aria-hidden="true"
2855
+ role="img"
2856
+ width="1em"
2857
+ height="1em"
2858
+ >
2859
+ <path
2860
+ 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"
2861
+ />
2862
+ </svg>
2139
2863
  </span>
2140
2864
  </span>
2141
2865
  <span class="pf-v6-c-tree-view__node-text">Application 1</span>
@@ -2150,7 +2874,19 @@ A search input can be used to filter tree view items. It is recommended that a t
2150
2874
  tabindex="-1"
2151
2875
  >
2152
2876
  <span class="pf-v6-c-button__icon">
2153
- <i class="fas fa-clipboard" aria-hidden="true"></i>
2877
+ <svg
2878
+ class="pf-v6-svg"
2879
+ viewBox="0 0 384 512"
2880
+ fill="currentColor"
2881
+ aria-hidden="true"
2882
+ role="img"
2883
+ width="1em"
2884
+ height="1em"
2885
+ >
2886
+ <path
2887
+ d="M384 112v352c0 26.51-21.49 48-48 48H48c-26.51 0-48-21.49-48-48V112c0-26.51 21.49-48 48-48h80c0-35.29 28.71-64 64-64s64 28.71 64 64h80c26.51 0 48 21.49 48 48zM192 40c-13.255 0-24 10.745-24 24s10.745 24 24 24 24-10.745 24-24-10.745-24-24-24m96 114v-20a6 6 0 0 0-6-6H102a6 6 0 0 0-6 6v20a6 6 0 0 0 6 6h180a6 6 0 0 0 6-6z"
2888
+ />
2889
+ </svg>
2154
2890
  </span>
2155
2891
  </button>
2156
2892
  </div>
@@ -2198,7 +2934,19 @@ A search input can be used to filter tree view items. It is recommended that a t
2198
2934
  <span class="pf-v6-c-tree-view__node-container">
2199
2935
  <span class="pf-v6-c-tree-view__node-toggle">
2200
2936
  <span class="pf-v6-c-tree-view__node-toggle-icon">
2201
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2937
+ <svg
2938
+ class="pf-v6-svg"
2939
+ viewBox="0 0 20 20"
2940
+ fill="currentColor"
2941
+ aria-hidden="true"
2942
+ role="img"
2943
+ width="1em"
2944
+ height="1em"
2945
+ >
2946
+ <path
2947
+ 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"
2948
+ />
2949
+ </svg>
2202
2950
  </span>
2203
2951
  </span>
2204
2952
  <span class="pf-v6-c-tree-view__node-text">Application 2</span>
@@ -2213,7 +2961,19 @@ A search input can be used to filter tree view items. It is recommended that a t
2213
2961
  tabindex="-1"
2214
2962
  >
2215
2963
  <span class="pf-v6-c-button__icon">
2216
- <i class="fas fa-bars" aria-hidden="true"></i>
2964
+ <svg
2965
+ class="pf-v6-svg"
2966
+ viewBox="0 0 448 512"
2967
+ fill="currentColor"
2968
+ aria-hidden="true"
2969
+ role="img"
2970
+ width="1em"
2971
+ height="1em"
2972
+ >
2973
+ <path
2974
+ d="M16 132h416c8.837 0 16-7.163 16-16V76c0-8.837-7.163-16-16-16H16C7.163 60 0 67.163 0 76v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16z"
2975
+ />
2976
+ </svg>
2217
2977
  </span>
2218
2978
  </button>
2219
2979
  </div>
@@ -2231,7 +2991,19 @@ A search input can be used to filter tree view items. It is recommended that a t
2231
2991
  <span class="pf-v6-c-tree-view__node-container">
2232
2992
  <span class="pf-v6-c-tree-view__node-toggle">
2233
2993
  <span class="pf-v6-c-tree-view__node-toggle-icon">
2234
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2994
+ <svg
2995
+ class="pf-v6-svg"
2996
+ viewBox="0 0 20 20"
2997
+ fill="currentColor"
2998
+ aria-hidden="true"
2999
+ role="img"
3000
+ width="1em"
3001
+ height="1em"
3002
+ >
3003
+ <path
3004
+ 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"
3005
+ />
3006
+ </svg>
2235
3007
  </span>
2236
3008
  </span>
2237
3009
  <span class="pf-v6-c-tree-view__node-text">Settings</span>
@@ -2251,7 +3023,19 @@ A search input can be used to filter tree view items. It is recommended that a t
2251
3023
  <span class="pf-v6-c-tree-view__node-container">
2252
3024
  <span class="pf-v6-c-tree-view__node-toggle">
2253
3025
  <span class="pf-v6-c-tree-view__node-toggle-icon">
2254
- <i class="fas fa-angle-right" aria-hidden="true"></i>
3026
+ <svg
3027
+ class="pf-v6-svg"
3028
+ viewBox="0 0 20 20"
3029
+ fill="currentColor"
3030
+ aria-hidden="true"
3031
+ role="img"
3032
+ width="1em"
3033
+ height="1em"
3034
+ >
3035
+ <path
3036
+ 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"
3037
+ />
3038
+ </svg>
2255
3039
  </span>
2256
3040
  </span>
2257
3041
  <span class="pf-v6-c-tree-view__node-text">Loader</span>
@@ -2271,7 +3055,19 @@ A search input can be used to filter tree view items. It is recommended that a t
2271
3055
  <span class="pf-v6-c-tree-view__node-container">
2272
3056
  <span class="pf-v6-c-tree-view__node-toggle">
2273
3057
  <span class="pf-v6-c-tree-view__node-toggle-icon">
2274
- <i class="fas fa-angle-right" aria-hidden="true"></i>
3058
+ <svg
3059
+ class="pf-v6-svg"
3060
+ viewBox="0 0 20 20"
3061
+ fill="currentColor"
3062
+ aria-hidden="true"
3063
+ role="img"
3064
+ width="1em"
3065
+ height="1em"
3066
+ >
3067
+ <path
3068
+ 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"
3069
+ />
3070
+ </svg>
2275
3071
  </span>
2276
3072
  </span>
2277
3073
  <span class="pf-v6-c-tree-view__node-text">Loader app 1</span>
@@ -2325,7 +3121,19 @@ A search input can be used to filter tree view items. It is recommended that a t
2325
3121
  <span class="pf-v6-c-tree-view__node-container">
2326
3122
  <span class="pf-v6-c-tree-view__node-toggle">
2327
3123
  <span class="pf-v6-c-tree-view__node-toggle-icon">
2328
- <i class="fas fa-angle-right" aria-hidden="true"></i>
3124
+ <svg
3125
+ class="pf-v6-svg"
3126
+ viewBox="0 0 20 20"
3127
+ fill="currentColor"
3128
+ aria-hidden="true"
3129
+ role="img"
3130
+ width="1em"
3131
+ height="1em"
3132
+ >
3133
+ <path
3134
+ 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"
3135
+ />
3136
+ </svg>
2329
3137
  </span>
2330
3138
  </span>
2331
3139
  <span class="pf-v6-c-tree-view__node-text">Cost management</span>
@@ -2345,7 +3153,19 @@ A search input can be used to filter tree view items. It is recommended that a t
2345
3153
  <span class="pf-v6-c-tree-view__node-container">
2346
3154
  <span class="pf-v6-c-tree-view__node-toggle">
2347
3155
  <span class="pf-v6-c-tree-view__node-toggle-icon">
2348
- <i class="fas fa-angle-right" aria-hidden="true"></i>
3156
+ <svg
3157
+ class="pf-v6-svg"
3158
+ viewBox="0 0 20 20"
3159
+ fill="currentColor"
3160
+ aria-hidden="true"
3161
+ role="img"
3162
+ width="1em"
3163
+ height="1em"
3164
+ >
3165
+ <path
3166
+ 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"
3167
+ />
3168
+ </svg>
2349
3169
  </span>
2350
3170
  </span>
2351
3171
  <span class="pf-v6-c-tree-view__node-text">Sources</span>
@@ -2365,7 +3185,19 @@ A search input can be used to filter tree view items. It is recommended that a t
2365
3185
  <span class="pf-v6-c-tree-view__node-container">
2366
3186
  <span class="pf-v6-c-tree-view__node-toggle">
2367
3187
  <span class="pf-v6-c-tree-view__node-toggle-icon">
2368
- <i class="fas fa-angle-right" aria-hidden="true"></i>
3188
+ <svg
3189
+ class="pf-v6-svg"
3190
+ viewBox="0 0 20 20"
3191
+ fill="currentColor"
3192
+ aria-hidden="true"
3193
+ role="img"
3194
+ width="1em"
3195
+ height="1em"
3196
+ >
3197
+ <path
3198
+ 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"
3199
+ />
3200
+ </svg>
2369
3201
  </span>
2370
3202
  </span>
2371
3203
  <span
@@ -2382,7 +3214,19 @@ A search input can be used to filter tree view items. It is recommended that a t
2382
3214
  tabindex="-1"
2383
3215
  >
2384
3216
  <span class="pf-v6-c-button__icon">
2385
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
3217
+ <svg
3218
+ class="pf-v6-svg"
3219
+ viewBox="0 0 192 512"
3220
+ fill="currentColor"
3221
+ aria-hidden="true"
3222
+ role="img"
3223
+ width="1em"
3224
+ height="1em"
3225
+ >
3226
+ <path
3227
+ d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
3228
+ />
3229
+ </svg>
2386
3230
  </span>
2387
3231
  </button>
2388
3232
  </div>
@@ -2414,7 +3258,19 @@ A search input can be used to filter tree view items. It is recommended that a t
2414
3258
  <span class="pf-v6-c-tree-view__node-container">
2415
3259
  <span class="pf-v6-c-tree-view__node-toggle">
2416
3260
  <span class="pf-v6-c-tree-view__node-toggle-icon">
2417
- <i class="fas fa-angle-right" aria-hidden="true"></i>
3261
+ <svg
3262
+ class="pf-v6-svg"
3263
+ viewBox="0 0 20 20"
3264
+ fill="currentColor"
3265
+ aria-hidden="true"
3266
+ role="img"
3267
+ width="1em"
3268
+ height="1em"
3269
+ >
3270
+ <path
3271
+ 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"
3272
+ />
3273
+ </svg>
2418
3274
  </span>
2419
3275
  </span>
2420
3276
  <span class="pf-v6-c-tree-view__node-text">Application launcher</span>
@@ -2434,7 +3290,19 @@ A search input can be used to filter tree view items. It is recommended that a t
2434
3290
  <span class="pf-v6-c-tree-view__node-container">
2435
3291
  <span class="pf-v6-c-tree-view__node-toggle">
2436
3292
  <span class="pf-v6-c-tree-view__node-toggle-icon">
2437
- <i class="fas fa-angle-right" aria-hidden="true"></i>
3293
+ <svg
3294
+ class="pf-v6-svg"
3295
+ viewBox="0 0 20 20"
3296
+ fill="currentColor"
3297
+ aria-hidden="true"
3298
+ role="img"
3299
+ width="1em"
3300
+ height="1em"
3301
+ >
3302
+ <path
3303
+ 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"
3304
+ />
3305
+ </svg>
2438
3306
  </span>
2439
3307
  </span>
2440
3308
  <span class="pf-v6-c-tree-view__node-text">Application 1</span>
@@ -2482,7 +3350,19 @@ A search input can be used to filter tree view items. It is recommended that a t
2482
3350
  <span class="pf-v6-c-tree-view__node-container">
2483
3351
  <span class="pf-v6-c-tree-view__node-toggle">
2484
3352
  <span class="pf-v6-c-tree-view__node-toggle-icon">
2485
- <i class="fas fa-angle-right" aria-hidden="true"></i>
3353
+ <svg
3354
+ class="pf-v6-svg"
3355
+ viewBox="0 0 20 20"
3356
+ fill="currentColor"
3357
+ aria-hidden="true"
3358
+ role="img"
3359
+ width="1em"
3360
+ height="1em"
3361
+ >
3362
+ <path
3363
+ 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"
3364
+ />
3365
+ </svg>
2486
3366
  </span>
2487
3367
  </span>
2488
3368
  <span class="pf-v6-c-tree-view__node-text">Loader</span>
@@ -2504,7 +3384,19 @@ A search input can be used to filter tree view items. It is recommended that a t
2504
3384
  <span class="pf-v6-c-tree-view__node-container">
2505
3385
  <span class="pf-v6-c-tree-view__node-toggle">
2506
3386
  <span class="pf-v6-c-tree-view__node-toggle-icon">
2507
- <i class="fas fa-angle-right" aria-hidden="true"></i>
3387
+ <svg
3388
+ class="pf-v6-svg"
3389
+ viewBox="0 0 20 20"
3390
+ fill="currentColor"
3391
+ aria-hidden="true"
3392
+ role="img"
3393
+ width="1em"
3394
+ height="1em"
3395
+ >
3396
+ <path
3397
+ 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"
3398
+ />
3399
+ </svg>
2508
3400
  </span>
2509
3401
  </span>
2510
3402
  <span class="pf-v6-c-tree-view__node-text">Application 2</span>
@@ -2538,7 +3430,19 @@ A search input can be used to filter tree view items. It is recommended that a t
2538
3430
  <span class="pf-v6-c-tree-view__node-container">
2539
3431
  <span class="pf-v6-c-tree-view__node-toggle">
2540
3432
  <span class="pf-v6-c-tree-view__node-toggle-icon">
2541
- <i class="fas fa-angle-right" aria-hidden="true"></i>
3433
+ <svg
3434
+ class="pf-v6-svg"
3435
+ viewBox="0 0 20 20"
3436
+ fill="currentColor"
3437
+ aria-hidden="true"
3438
+ role="img"
3439
+ width="1em"
3440
+ height="1em"
3441
+ >
3442
+ <path
3443
+ 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"
3444
+ />
3445
+ </svg>
2542
3446
  </span>
2543
3447
  </span>
2544
3448
  <span class="pf-v6-c-tree-view__node-text">Settings</span>
@@ -2558,7 +3462,19 @@ A search input can be used to filter tree view items. It is recommended that a t
2558
3462
  <span class="pf-v6-c-tree-view__node-container">
2559
3463
  <span class="pf-v6-c-tree-view__node-toggle">
2560
3464
  <span class="pf-v6-c-tree-view__node-toggle-icon">
2561
- <i class="fas fa-angle-right" aria-hidden="true"></i>
3465
+ <svg
3466
+ class="pf-v6-svg"
3467
+ viewBox="0 0 20 20"
3468
+ fill="currentColor"
3469
+ aria-hidden="true"
3470
+ role="img"
3471
+ width="1em"
3472
+ height="1em"
3473
+ >
3474
+ <path
3475
+ 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"
3476
+ />
3477
+ </svg>
2562
3478
  </span>
2563
3479
  </span>
2564
3480
  <span class="pf-v6-c-tree-view__node-text">Loader</span>
@@ -2578,7 +3494,19 @@ A search input can be used to filter tree view items. It is recommended that a t
2578
3494
  <span class="pf-v6-c-tree-view__node-container">
2579
3495
  <span class="pf-v6-c-tree-view__node-toggle">
2580
3496
  <span class="pf-v6-c-tree-view__node-toggle-icon">
2581
- <i class="fas fa-angle-right" aria-hidden="true"></i>
3497
+ <svg
3498
+ class="pf-v6-svg"
3499
+ viewBox="0 0 20 20"
3500
+ fill="currentColor"
3501
+ aria-hidden="true"
3502
+ role="img"
3503
+ width="1em"
3504
+ height="1em"
3505
+ >
3506
+ <path
3507
+ 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"
3508
+ />
3509
+ </svg>
2582
3510
  </span>
2583
3511
  </span>
2584
3512
  <span class="pf-v6-c-tree-view__node-text">Loader app 1</span>
@@ -2646,7 +3574,19 @@ A search input can be used to filter tree view items. It is recommended that a t
2646
3574
  <span class="pf-v6-c-tree-view__node-container">
2647
3575
  <span class="pf-v6-c-tree-view__node-toggle">
2648
3576
  <span class="pf-v6-c-tree-view__node-toggle-icon">
2649
- <i class="fas fa-angle-right" aria-hidden="true"></i>
3577
+ <svg
3578
+ class="pf-v6-svg"
3579
+ viewBox="0 0 20 20"
3580
+ fill="currentColor"
3581
+ aria-hidden="true"
3582
+ role="img"
3583
+ width="1em"
3584
+ height="1em"
3585
+ >
3586
+ <path
3587
+ 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"
3588
+ />
3589
+ </svg>
2650
3590
  </span>
2651
3591
  </span>
2652
3592
  <span class="pf-v6-c-tree-view__node-text">Sources</span>
@@ -2707,7 +3647,19 @@ A search input can be used to filter tree view items. It is recommended that a t
2707
3647
  aria-labelledby="toggle-tree-view-selectable-expandable-1 text-tree-view-selectable-expandable-1"
2708
3648
  >
2709
3649
  <span class="pf-v6-c-tree-view__node-toggle-icon">
2710
- <i class="fas fa-angle-right" aria-hidden="true"></i>
3650
+ <svg
3651
+ class="pf-v6-svg"
3652
+ viewBox="0 0 20 20"
3653
+ fill="currentColor"
3654
+ aria-hidden="true"
3655
+ role="img"
3656
+ width="1em"
3657
+ height="1em"
3658
+ >
3659
+ <path
3660
+ 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"
3661
+ />
3662
+ </svg>
2711
3663
  </span>
2712
3664
  </button>
2713
3665
  <button
@@ -2741,7 +3693,19 @@ A search input can be used to filter tree view items. It is recommended that a t
2741
3693
  aria-labelledby="toggle-tree-view-selectable-expandable-2 text-tree-view-selectable-expandable-2"
2742
3694
  >
2743
3695
  <span class="pf-v6-c-tree-view__node-toggle-icon">
2744
- <i class="fas fa-angle-right" aria-hidden="true"></i>
3696
+ <svg
3697
+ class="pf-v6-svg"
3698
+ viewBox="0 0 20 20"
3699
+ fill="currentColor"
3700
+ aria-hidden="true"
3701
+ role="img"
3702
+ width="1em"
3703
+ height="1em"
3704
+ >
3705
+ <path
3706
+ 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"
3707
+ />
3708
+ </svg>
2745
3709
  </span>
2746
3710
  </button>
2747
3711
  <button
@@ -2797,19 +3761,32 @@ A search input can be used to filter tree view items. It is recommended that a t
2797
3761
  >
2798
3762
  <span class="pf-v6-c-tree-view__node-container">
2799
3763
  <button
2800
- class="pf-v6-c-tree-view__node-toggle"
3764
+ class="pf-v6-c-tree-view__node-toggle pf-m-disabled"
2801
3765
  id="toggle-tree-view-selectable-expandable-3"
2802
3766
  aria-label="Toggle"
2803
3767
  aria-labelledby="toggle-tree-view-selectable-expandable-3 text-tree-view-selectable-expandable-3"
3768
+ disabled
2804
3769
  >
2805
3770
  <span class="pf-v6-c-tree-view__node-toggle-icon">
2806
- <i class="fas fa-angle-right" aria-hidden="true"></i>
3771
+ <svg
3772
+ class="pf-v6-svg"
3773
+ viewBox="0 0 20 20"
3774
+ fill="currentColor"
3775
+ aria-hidden="true"
3776
+ role="img"
3777
+ width="1em"
3778
+ height="1em"
3779
+ >
3780
+ <path
3781
+ 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"
3782
+ />
3783
+ </svg>
2807
3784
  </span>
2808
3785
  </button>
2809
3786
  <button
2810
3787
  class="pf-v6-c-tree-view__node-text"
2811
3788
  id="text-tree-view-selectable-expandable-3"
2812
- >Loader</button>
3789
+ >Loader (toggle disabled)</button>
2813
3790
  </span>
2814
3791
  </div>
2815
3792
  </div>
@@ -2839,7 +3816,19 @@ A search input can be used to filter tree view items. It is recommended that a t
2839
3816
  aria-labelledby="toggle-tree-view-selectable-expandable-4 text-tree-view-selectable-expandable-4"
2840
3817
  >
2841
3818
  <span class="pf-v6-c-tree-view__node-toggle-icon">
2842
- <i class="fas fa-angle-right" aria-hidden="true"></i>
3819
+ <svg
3820
+ class="pf-v6-svg"
3821
+ viewBox="0 0 20 20"
3822
+ fill="currentColor"
3823
+ aria-hidden="true"
3824
+ role="img"
3825
+ width="1em"
3826
+ height="1em"
3827
+ >
3828
+ <path
3829
+ 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"
3830
+ />
3831
+ </svg>
2843
3832
  </span>
2844
3833
  </button>
2845
3834
  <button
@@ -2887,7 +3876,19 @@ A search input can be used to filter tree view items. It is recommended that a t
2887
3876
  aria-labelledby="toggle-tree-view-selectable-expandable-5 text-tree-view-selectable-expandable-5"
2888
3877
  >
2889
3878
  <span class="pf-v6-c-tree-view__node-toggle-icon">
2890
- <i class="fas fa-angle-right" aria-hidden="true"></i>
3879
+ <svg
3880
+ class="pf-v6-svg"
3881
+ viewBox="0 0 20 20"
3882
+ fill="currentColor"
3883
+ aria-hidden="true"
3884
+ role="img"
3885
+ width="1em"
3886
+ height="1em"
3887
+ >
3888
+ <path
3889
+ 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"
3890
+ />
3891
+ </svg>
2891
3892
  </span>
2892
3893
  </button>
2893
3894
  <button
@@ -2907,7 +3908,7 @@ A search input can be used to filter tree view items. It is recommended that a t
2907
3908
  >
2908
3909
  <div class="pf-v6-c-tree-view__content">
2909
3910
  <div
2910
- class="pf-v6-c-tree-view__node pf-m-selectable"
3911
+ class="pf-v6-c-tree-view__node pf-m-selectable pf-m-disabled"
2911
3912
  tabindex="0"
2912
3913
  id="node-tree-view-selectable-expandable-6"
2913
3914
  aria-label="Select"
@@ -2921,13 +3922,25 @@ A search input can be used to filter tree view items. It is recommended that a t
2921
3922
  aria-labelledby="toggle-tree-view-selectable-expandable-6 text-tree-view-selectable-expandable-6"
2922
3923
  >
2923
3924
  <span class="pf-v6-c-tree-view__node-toggle-icon">
2924
- <i class="fas fa-angle-right" aria-hidden="true"></i>
3925
+ <svg
3926
+ class="pf-v6-svg"
3927
+ viewBox="0 0 20 20"
3928
+ fill="currentColor"
3929
+ aria-hidden="true"
3930
+ role="img"
3931
+ width="1em"
3932
+ height="1em"
3933
+ >
3934
+ <path
3935
+ 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"
3936
+ />
3937
+ </svg>
2925
3938
  </span>
2926
3939
  </button>
2927
3940
  <button
2928
3941
  class="pf-v6-c-tree-view__node-text"
2929
3942
  id="text-tree-view-selectable-expandable-6"
2930
- >Loader</button>
3943
+ >Loader (disabled item but toggle is enabled)</button>
2931
3944
  </span>
2932
3945
  </div>
2933
3946
  </div>
@@ -2941,7 +3954,7 @@ A search input can be used to filter tree view items. It is recommended that a t
2941
3954
  >
2942
3955
  <div class="pf-v6-c-tree-view__content">
2943
3956
  <div
2944
- class="pf-v6-c-tree-view__node pf-m-selectable pf-m-current"
3957
+ class="pf-v6-c-tree-view__node pf-m-selectable pf-m-current pf-m-disabled"
2945
3958
  tabindex="0"
2946
3959
  id="node-tree-view-selectable-expandable-7"
2947
3960
  aria-label="Select"
@@ -2949,19 +3962,32 @@ A search input can be used to filter tree view items. It is recommended that a t
2949
3962
  >
2950
3963
  <span class="pf-v6-c-tree-view__node-container">
2951
3964
  <button
2952
- class="pf-v6-c-tree-view__node-toggle"
3965
+ class="pf-v6-c-tree-view__node-toggle pf-m-disabled"
2953
3966
  id="toggle-tree-view-selectable-expandable-7"
2954
3967
  aria-label="Toggle"
2955
3968
  aria-labelledby="toggle-tree-view-selectable-expandable-7 text-tree-view-selectable-expandable-7"
3969
+ disabled
2956
3970
  >
2957
3971
  <span class="pf-v6-c-tree-view__node-toggle-icon">
2958
- <i class="fas fa-angle-right" aria-hidden="true"></i>
3972
+ <svg
3973
+ class="pf-v6-svg"
3974
+ viewBox="0 0 20 20"
3975
+ fill="currentColor"
3976
+ aria-hidden="true"
3977
+ role="img"
3978
+ width="1em"
3979
+ height="1em"
3980
+ >
3981
+ <path
3982
+ 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"
3983
+ />
3984
+ </svg>
2959
3985
  </span>
2960
3986
  </button>
2961
3987
  <button
2962
3988
  class="pf-v6-c-tree-view__node-text"
2963
3989
  id="text-tree-view-selectable-expandable-7"
2964
- >Loader app 1</button>
3990
+ >Loader app 1 (disabled item and toggle)</button>
2965
3991
  </span>
2966
3992
  </div>
2967
3993
  </div>
@@ -3023,7 +4049,19 @@ A search input can be used to filter tree view items. It is recommended that a t
3023
4049
  aria-labelledby="toggle-tree-view-selectable-expandable-8 text-tree-view-selectable-expandable-8"
3024
4050
  >
3025
4051
  <span class="pf-v6-c-tree-view__node-toggle-icon">
3026
- <i class="fas fa-angle-right" aria-hidden="true"></i>
4052
+ <svg
4053
+ class="pf-v6-svg"
4054
+ viewBox="0 0 20 20"
4055
+ fill="currentColor"
4056
+ aria-hidden="true"
4057
+ role="img"
4058
+ width="1em"
4059
+ height="1em"
4060
+ >
4061
+ <path
4062
+ 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"
4063
+ />
4064
+ </svg>
3027
4065
  </span>
3028
4066
  </button>
3029
4067
  <button
@@ -3057,7 +4095,19 @@ A search input can be used to filter tree view items. It is recommended that a t
3057
4095
  aria-labelledby="toggle-tree-view-selectable-expandable-9 text-tree-view-selectable-expandable-9"
3058
4096
  >
3059
4097
  <span class="pf-v6-c-tree-view__node-toggle-icon">
3060
- <i class="fas fa-angle-right" aria-hidden="true"></i>
4098
+ <svg
4099
+ class="pf-v6-svg"
4100
+ viewBox="0 0 20 20"
4101
+ fill="currentColor"
4102
+ aria-hidden="true"
4103
+ role="img"
4104
+ width="1em"
4105
+ height="1em"
4106
+ >
4107
+ <path
4108
+ 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"
4109
+ />
4110
+ </svg>
3061
4111
  </span>
3062
4112
  </button>
3063
4113
  <button
@@ -3091,7 +4141,19 @@ A search input can be used to filter tree view items. It is recommended that a t
3091
4141
  aria-labelledby="toggle-tree-view-selectable-expandable-10 text-tree-view-selectable-expandable-10"
3092
4142
  >
3093
4143
  <span class="pf-v6-c-tree-view__node-toggle-icon">
3094
- <i class="fas fa-angle-right" aria-hidden="true"></i>
4144
+ <svg
4145
+ class="pf-v6-svg"
4146
+ viewBox="0 0 20 20"
4147
+ fill="currentColor"
4148
+ aria-hidden="true"
4149
+ role="img"
4150
+ width="1em"
4151
+ height="1em"
4152
+ >
4153
+ <path
4154
+ 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"
4155
+ />
4156
+ </svg>
3095
4157
  </span>
3096
4158
  </button>
3097
4159
  <button
@@ -3128,7 +4190,19 @@ A search input can be used to filter tree view items. It is recommended that a t
3128
4190
  <span class="pf-v6-c-tree-view__node-container">
3129
4191
  <span class="pf-v6-c-tree-view__node-toggle">
3130
4192
  <span class="pf-v6-c-tree-view__node-toggle-icon">
3131
- <i class="fas fa-angle-right" aria-hidden="true"></i>
4193
+ <svg
4194
+ class="pf-v6-svg"
4195
+ viewBox="0 0 20 20"
4196
+ fill="currentColor"
4197
+ aria-hidden="true"
4198
+ role="img"
4199
+ width="1em"
4200
+ height="1em"
4201
+ >
4202
+ <path
4203
+ 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"
4204
+ />
4205
+ </svg>
3132
4206
  </span>
3133
4207
  </span>
3134
4208
  <span class="pf-v6-c-tree-view__node-text">Application launcher</span>
@@ -3148,7 +4222,19 @@ A search input can be used to filter tree view items. It is recommended that a t
3148
4222
  <span class="pf-v6-c-tree-view__node-container">
3149
4223
  <span class="pf-v6-c-tree-view__node-toggle">
3150
4224
  <span class="pf-v6-c-tree-view__node-toggle-icon">
3151
- <i class="fas fa-angle-right" aria-hidden="true"></i>
4225
+ <svg
4226
+ class="pf-v6-svg"
4227
+ viewBox="0 0 20 20"
4228
+ fill="currentColor"
4229
+ aria-hidden="true"
4230
+ role="img"
4231
+ width="1em"
4232
+ height="1em"
4233
+ >
4234
+ <path
4235
+ 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"
4236
+ />
4237
+ </svg>
3152
4238
  </span>
3153
4239
  </span>
3154
4240
  <span class="pf-v6-c-tree-view__node-text">Application 1</span>
@@ -3196,7 +4282,19 @@ A search input can be used to filter tree view items. It is recommended that a t
3196
4282
  <span class="pf-v6-c-tree-view__node-container">
3197
4283
  <span class="pf-v6-c-tree-view__node-toggle">
3198
4284
  <span class="pf-v6-c-tree-view__node-toggle-icon">
3199
- <i class="fas fa-angle-right" aria-hidden="true"></i>
4285
+ <svg
4286
+ class="pf-v6-svg"
4287
+ viewBox="0 0 20 20"
4288
+ fill="currentColor"
4289
+ aria-hidden="true"
4290
+ role="img"
4291
+ width="1em"
4292
+ height="1em"
4293
+ >
4294
+ <path
4295
+ 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"
4296
+ />
4297
+ </svg>
3200
4298
  </span>
3201
4299
  </span>
3202
4300
  <span class="pf-v6-c-tree-view__node-text">Loader</span>
@@ -3218,7 +4316,19 @@ A search input can be used to filter tree view items. It is recommended that a t
3218
4316
  <span class="pf-v6-c-tree-view__node-container">
3219
4317
  <span class="pf-v6-c-tree-view__node-toggle">
3220
4318
  <span class="pf-v6-c-tree-view__node-toggle-icon">
3221
- <i class="fas fa-angle-right" aria-hidden="true"></i>
4319
+ <svg
4320
+ class="pf-v6-svg"
4321
+ viewBox="0 0 20 20"
4322
+ fill="currentColor"
4323
+ aria-hidden="true"
4324
+ role="img"
4325
+ width="1em"
4326
+ height="1em"
4327
+ >
4328
+ <path
4329
+ 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"
4330
+ />
4331
+ </svg>
3222
4332
  </span>
3223
4333
  </span>
3224
4334
  <span class="pf-v6-c-tree-view__node-text">Application 2</span>
@@ -3252,7 +4362,19 @@ A search input can be used to filter tree view items. It is recommended that a t
3252
4362
  <span class="pf-v6-c-tree-view__node-container">
3253
4363
  <span class="pf-v6-c-tree-view__node-toggle">
3254
4364
  <span class="pf-v6-c-tree-view__node-toggle-icon">
3255
- <i class="fas fa-angle-right" aria-hidden="true"></i>
4365
+ <svg
4366
+ class="pf-v6-svg"
4367
+ viewBox="0 0 20 20"
4368
+ fill="currentColor"
4369
+ aria-hidden="true"
4370
+ role="img"
4371
+ width="1em"
4372
+ height="1em"
4373
+ >
4374
+ <path
4375
+ 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"
4376
+ />
4377
+ </svg>
3256
4378
  </span>
3257
4379
  </span>
3258
4380
  <span class="pf-v6-c-tree-view__node-text">Settings</span>
@@ -3272,7 +4394,19 @@ A search input can be used to filter tree view items. It is recommended that a t
3272
4394
  <span class="pf-v6-c-tree-view__node-container">
3273
4395
  <span class="pf-v6-c-tree-view__node-toggle">
3274
4396
  <span class="pf-v6-c-tree-view__node-toggle-icon">
3275
- <i class="fas fa-angle-right" aria-hidden="true"></i>
4397
+ <svg
4398
+ class="pf-v6-svg"
4399
+ viewBox="0 0 20 20"
4400
+ fill="currentColor"
4401
+ aria-hidden="true"
4402
+ role="img"
4403
+ width="1em"
4404
+ height="1em"
4405
+ >
4406
+ <path
4407
+ 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"
4408
+ />
4409
+ </svg>
3276
4410
  </span>
3277
4411
  </span>
3278
4412
  <span class="pf-v6-c-tree-view__node-text">Loader</span>
@@ -3292,7 +4426,19 @@ A search input can be used to filter tree view items. It is recommended that a t
3292
4426
  <span class="pf-v6-c-tree-view__node-container">
3293
4427
  <span class="pf-v6-c-tree-view__node-toggle">
3294
4428
  <span class="pf-v6-c-tree-view__node-toggle-icon">
3295
- <i class="fas fa-angle-right" aria-hidden="true"></i>
4429
+ <svg
4430
+ class="pf-v6-svg"
4431
+ viewBox="0 0 20 20"
4432
+ fill="currentColor"
4433
+ aria-hidden="true"
4434
+ role="img"
4435
+ width="1em"
4436
+ height="1em"
4437
+ >
4438
+ <path
4439
+ 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"
4440
+ />
4441
+ </svg>
3296
4442
  </span>
3297
4443
  </span>
3298
4444
  <span class="pf-v6-c-tree-view__node-text">Loader app 1</span>
@@ -3346,7 +4492,19 @@ A search input can be used to filter tree view items. It is recommended that a t
3346
4492
  <span class="pf-v6-c-tree-view__node-container">
3347
4493
  <span class="pf-v6-c-tree-view__node-toggle">
3348
4494
  <span class="pf-v6-c-tree-view__node-toggle-icon">
3349
- <i class="fas fa-angle-right" aria-hidden="true"></i>
4495
+ <svg
4496
+ class="pf-v6-svg"
4497
+ viewBox="0 0 20 20"
4498
+ fill="currentColor"
4499
+ aria-hidden="true"
4500
+ role="img"
4501
+ width="1em"
4502
+ height="1em"
4503
+ >
4504
+ <path
4505
+ 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"
4506
+ />
4507
+ </svg>
3350
4508
  </span>
3351
4509
  </span>
3352
4510
  <span class="pf-v6-c-tree-view__node-text">Cost management</span>
@@ -3366,7 +4524,19 @@ A search input can be used to filter tree view items. It is recommended that a t
3366
4524
  <span class="pf-v6-c-tree-view__node-container">
3367
4525
  <span class="pf-v6-c-tree-view__node-toggle">
3368
4526
  <span class="pf-v6-c-tree-view__node-toggle-icon">
3369
- <i class="fas fa-angle-right" aria-hidden="true"></i>
4527
+ <svg
4528
+ class="pf-v6-svg"
4529
+ viewBox="0 0 20 20"
4530
+ fill="currentColor"
4531
+ aria-hidden="true"
4532
+ role="img"
4533
+ width="1em"
4534
+ height="1em"
4535
+ >
4536
+ <path
4537
+ 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"
4538
+ />
4539
+ </svg>
3370
4540
  </span>
3371
4541
  </span>
3372
4542
  <span class="pf-v6-c-tree-view__node-text">Sources</span>
@@ -3386,7 +4556,19 @@ A search input can be used to filter tree view items. It is recommended that a t
3386
4556
  <span class="pf-v6-c-tree-view__node-container">
3387
4557
  <span class="pf-v6-c-tree-view__node-toggle">
3388
4558
  <span class="pf-v6-c-tree-view__node-toggle-icon">
3389
- <i class="fas fa-angle-right" aria-hidden="true"></i>
4559
+ <svg
4560
+ class="pf-v6-svg"
4561
+ viewBox="0 0 20 20"
4562
+ fill="currentColor"
4563
+ aria-hidden="true"
4564
+ role="img"
4565
+ width="1em"
4566
+ height="1em"
4567
+ >
4568
+ <path
4569
+ 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"
4570
+ />
4571
+ </svg>
3390
4572
  </span>
3391
4573
  </span>
3392
4574
  <span
@@ -3455,10 +4637,12 @@ A search input can be used to filter tree view items. It is recommended that a t
3455
4637
  tabindex="-1"
3456
4638
  >
3457
4639
  <div class="pf-v6-c-tree-view__content">
3458
- <button class="pf-v6-c-tree-view__node">
4640
+ <button class="pf-v6-c-tree-view__node pf-m-disabled">
3459
4641
  <span class="pf-v6-c-tree-view__node-container">
3460
4642
  <span class="pf-v6-c-tree-view__node-content">
3461
- <span class="pf-v6-c-tree-view__node-title">metadata</span>
4643
+ <span
4644
+ class="pf-v6-c-tree-view__node-title"
4645
+ >metadata (disabled item)</span>
3462
4646
  <span
3463
4647
  class="pf-v6-c-tree-view__node-text"
3464
4648
  >Standard object metadata</span>
@@ -3479,7 +4663,19 @@ A search input can be used to filter tree view items. It is recommended that a t
3479
4663
  <span class="pf-v6-c-tree-view__node-container">
3480
4664
  <span class="pf-v6-c-tree-view__node-toggle">
3481
4665
  <span class="pf-v6-c-tree-view__node-toggle-icon">
3482
- <i class="fas fa-angle-right" aria-hidden="true"></i>
4666
+ <svg
4667
+ class="pf-v6-svg"
4668
+ viewBox="0 0 20 20"
4669
+ fill="currentColor"
4670
+ aria-hidden="true"
4671
+ role="img"
4672
+ width="1em"
4673
+ height="1em"
4674
+ >
4675
+ <path
4676
+ 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"
4677
+ />
4678
+ </svg>
3483
4679
  </span>
3484
4680
  </span>
3485
4681
  <span class="pf-v6-c-tree-view__node-content">
@@ -3603,7 +4799,19 @@ A search input can be used to filter tree view items. It is recommended that a t
3603
4799
  <span class="pf-v6-c-tree-view__node-container">
3604
4800
  <span class="pf-v6-c-tree-view__node-toggle">
3605
4801
  <span class="pf-v6-c-tree-view__node-toggle-icon">
3606
- <i class="fas fa-angle-right" aria-hidden="true"></i>
4802
+ <svg
4803
+ class="pf-v6-svg"
4804
+ viewBox="0 0 20 20"
4805
+ fill="currentColor"
4806
+ aria-hidden="true"
4807
+ role="img"
4808
+ width="1em"
4809
+ height="1em"
4810
+ >
4811
+ <path
4812
+ 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"
4813
+ />
4814
+ </svg>
3607
4815
  </span>
3608
4816
  </span>
3609
4817
  <span class="pf-v6-c-tree-view__node-content">
@@ -3624,17 +4832,29 @@ A search input can be used to filter tree view items. It is recommended that a t
3624
4832
  tabindex="0"
3625
4833
  >
3626
4834
  <div class="pf-v6-c-tree-view__content">
3627
- <button class="pf-v6-c-tree-view__node">
4835
+ <button class="pf-v6-c-tree-view__node pf-m-disabled">
3628
4836
  <span class="pf-v6-c-tree-view__node-container">
3629
- <span class="pf-v6-c-tree-view__node-toggle">
4837
+ <span class="pf-v6-c-tree-view__node-toggle pf-m-disabled">
3630
4838
  <span class="pf-v6-c-tree-view__node-toggle-icon">
3631
- <i class="fas fa-angle-right" aria-hidden="true"></i>
4839
+ <svg
4840
+ class="pf-v6-svg"
4841
+ viewBox="0 0 20 20"
4842
+ fill="currentColor"
4843
+ aria-hidden="true"
4844
+ role="img"
4845
+ width="1em"
4846
+ height="1em"
4847
+ >
4848
+ <path
4849
+ 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"
4850
+ />
4851
+ </svg>
3632
4852
  </span>
3633
4853
  </span>
3634
4854
  <span class="pf-v6-c-tree-view__node-content">
3635
4855
  <span
3636
4856
  class="pf-v6-c-tree-view__node-title"
3637
- >matchExpressions</span>
4857
+ >matchExpressions (disabled item and toggle)</span>
3638
4858
  <span
3639
4859
  class="pf-v6-c-tree-view__node-text"
3640
4860
  >matchExpressions is a list of the label selector requirements. The requirements and ANDed.</span>
@@ -3767,10 +4987,12 @@ A search input can be used to filter tree view items. It is recommended that a t
3767
4987
  tabindex="-1"
3768
4988
  >
3769
4989
  <div class="pf-v6-c-tree-view__content">
3770
- <button class="pf-v6-c-tree-view__node">
4990
+ <button class="pf-v6-c-tree-view__node pf-m-disabled">
3771
4991
  <span class="pf-v6-c-tree-view__node-container">
3772
4992
  <span class="pf-v6-c-tree-view__node-content">
3773
- <span class="pf-v6-c-tree-view__node-title">metadata</span>
4993
+ <span
4994
+ class="pf-v6-c-tree-view__node-title"
4995
+ >metadata (disabled item)</span>
3774
4996
  <span
3775
4997
  class="pf-v6-c-tree-view__node-text"
3776
4998
  >Standard object metadata</span>
@@ -3791,7 +5013,19 @@ A search input can be used to filter tree view items. It is recommended that a t
3791
5013
  <span class="pf-v6-c-tree-view__node-container">
3792
5014
  <span class="pf-v6-c-tree-view__node-toggle">
3793
5015
  <span class="pf-v6-c-tree-view__node-toggle-icon">
3794
- <i class="fas fa-angle-right" aria-hidden="true"></i>
5016
+ <svg
5017
+ class="pf-v6-svg"
5018
+ viewBox="0 0 20 20"
5019
+ fill="currentColor"
5020
+ aria-hidden="true"
5021
+ role="img"
5022
+ width="1em"
5023
+ height="1em"
5024
+ >
5025
+ <path
5026
+ 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"
5027
+ />
5028
+ </svg>
3795
5029
  </span>
3796
5030
  </span>
3797
5031
  <span class="pf-v6-c-tree-view__node-content">
@@ -3915,7 +5149,19 @@ A search input can be used to filter tree view items. It is recommended that a t
3915
5149
  <span class="pf-v6-c-tree-view__node-container">
3916
5150
  <span class="pf-v6-c-tree-view__node-toggle">
3917
5151
  <span class="pf-v6-c-tree-view__node-toggle-icon">
3918
- <i class="fas fa-angle-right" aria-hidden="true"></i>
5152
+ <svg
5153
+ class="pf-v6-svg"
5154
+ viewBox="0 0 20 20"
5155
+ fill="currentColor"
5156
+ aria-hidden="true"
5157
+ role="img"
5158
+ width="1em"
5159
+ height="1em"
5160
+ >
5161
+ <path
5162
+ 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"
5163
+ />
5164
+ </svg>
3919
5165
  </span>
3920
5166
  </span>
3921
5167
  <span class="pf-v6-c-tree-view__node-content">
@@ -3936,17 +5182,29 @@ A search input can be used to filter tree view items. It is recommended that a t
3936
5182
  tabindex="0"
3937
5183
  >
3938
5184
  <div class="pf-v6-c-tree-view__content">
3939
- <button class="pf-v6-c-tree-view__node">
5185
+ <button class="pf-v6-c-tree-view__node pf-m-disabled">
3940
5186
  <span class="pf-v6-c-tree-view__node-container">
3941
- <span class="pf-v6-c-tree-view__node-toggle">
5187
+ <span class="pf-v6-c-tree-view__node-toggle pf-m-disabled">
3942
5188
  <span class="pf-v6-c-tree-view__node-toggle-icon">
3943
- <i class="fas fa-angle-right" aria-hidden="true"></i>
5189
+ <svg
5190
+ class="pf-v6-svg"
5191
+ viewBox="0 0 20 20"
5192
+ fill="currentColor"
5193
+ aria-hidden="true"
5194
+ role="img"
5195
+ width="1em"
5196
+ height="1em"
5197
+ >
5198
+ <path
5199
+ 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"
5200
+ />
5201
+ </svg>
3944
5202
  </span>
3945
5203
  </span>
3946
5204
  <span class="pf-v6-c-tree-view__node-content">
3947
5205
  <span
3948
5206
  class="pf-v6-c-tree-view__node-title"
3949
- >matchExpressions</span>
5207
+ >matchExpressions (disabled item and toggle)</span>
3950
5208
  <span
3951
5209
  class="pf-v6-c-tree-view__node-text"
3952
5210
  >matchExpressions is a list of the label selector requirements. The requirements and ANDed.</span>
@@ -4052,4 +5310,6 @@ A search input can be used to filter tree view items. It is recommended that a t
4052
5310
  | `.pf-m-no-background` | `.pf-v6-c-tree-view.pf-m-compact` | Modifies the tree view compact variant node containers to have a transparent background. |
4053
5311
  | `.pf-m-current` | `.pf-v6-c-tree-view__node` | Modifies the tree view node to be current. |
4054
5312
  | `.pf-m-selectable` | `.pf-v6-c-tree-view__node` | For use on nodes that are expandable and selectable, when the default click action on the node selects it instead of expanding it. |
5313
+ | `.pf-m-disabled` | `.pf-v6-c-tree-view__node` | Modifies the tree view node to display as disabled. |
5314
+ | `.pf-m-disabled` | `.pf-v6-c-tree-view__node-toggle` | Modifies the tree view node toggle to display as disabled. |
4055
5315
  | `.pf-m-truncate` | `.pf-v6-c-tree-view`, `.pf-v6-c-tree-view__node-title`, `.pf-v6-c-tree-view__node-text` | Modifies the tree view title or text to truncate. |