@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/components/_index.scss CHANGED
@@ -18,6 +18,7 @@
18
18
  @use "./ClipboardCopy/clipboard-copy";
19
19
  @use "./CodeBlock/code-block";
20
20
  @use "./CodeEditor/code-editor";
21
+ @use "./Compass/compass";
21
22
  @use "./Content/content";
22
23
  @use "./DataList/data-list";
23
24
  @use "./DescriptionList/description-list";
@@ -31,8 +32,9 @@
31
32
  @use "./FileUpload/file-upload";
32
33
  @use "./Form/form";
33
34
  @use "./FormControl/form-control";
34
- @use "./Hint/hint";
35
35
  @use "./HelperText/helper-text";
36
+ @use "./Hero/hero";
37
+ @use "./Hint/hint";
36
38
  @use "./Icon/icon";
37
39
  @use "./InlineEdit/inline-edit";
38
40
  @use "./InputGroup/input-group";
package/docs/components/AboutModalBox/examples/AboutModalBox.md CHANGED
@@ -25,7 +25,19 @@ cssPrefix: pf-v6-c-about-modal-box
25
25
  aria-label="Close dialog"
26
26
  >
27
27
  <span class="pf-v6-c-button__icon">
28
- <i class="fas fa-times" aria-hidden="true"></i>
28
+ <svg
29
+ class="pf-v6-svg"
30
+ viewBox="0 0 20 20"
31
+ fill="currentColor"
32
+ aria-hidden="true"
33
+ role="img"
34
+ width="1em"
35
+ height="1em"
36
+ >
37
+ <path
38
+ d="M17.8 16.2 11.59 10l6.21-6.21c.42-.46.39-1.17-.07-1.59-.43-.4-1.09-.4-1.52 0l-6.2 6.2-6.22-6.19c-.44-.44-1.15-.44-1.59 0-.44.44-.44 1.15 0 1.59l6.2 6.21-6.2 6.2c-.42.46-.39 1.17.07 1.59.43.4 1.09.4 1.52 0L10 11.59l6.2 6.2c.44.44 1.15.44 1.59 0 .44-.45.44-1.16 0-1.6Z"
39
+ />
40
+ </svg>
29
41
  </span>
30
42
  </button>
31
43
  </div>
package/docs/components/Accordion/examples/Accordion.md CHANGED
@@ -18,7 +18,19 @@ cssPrefix: pf-v6-c-accordion
18
18
  <span class="pf-v6-c-accordion__toggle-text">Item one</span>
19
19
 
20
20
  <span class="pf-v6-c-accordion__toggle-icon">
21
- <i class="fas fa-angle-right" aria-hidden="true"></i>
21
+ <svg
22
+ class="pf-v6-svg"
23
+ viewBox="0 0 20 20"
24
+ fill="currentColor"
25
+ aria-hidden="true"
26
+ role="img"
27
+ width="1em"
28
+ height="1em"
29
+ >
30
+ <path
31
+ 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"
32
+ />
33
+ </svg>
22
34
  </span>
23
35
  </button>
24
36
  </h3>
@@ -39,7 +51,19 @@ cssPrefix: pf-v6-c-accordion
39
51
  <span class="pf-v6-c-accordion__toggle-text">Item two</span>
40
52
 
41
53
  <span class="pf-v6-c-accordion__toggle-icon">
42
- <i class="fas fa-angle-right" aria-hidden="true"></i>
54
+ <svg
55
+ class="pf-v6-svg"
56
+ viewBox="0 0 20 20"
57
+ fill="currentColor"
58
+ aria-hidden="true"
59
+ role="img"
60
+ width="1em"
61
+ height="1em"
62
+ >
63
+ <path
64
+ 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"
65
+ />
66
+ </svg>
43
67
  </span>
44
68
  </button>
45
69
  </h3>
@@ -60,7 +84,19 @@ cssPrefix: pf-v6-c-accordion
60
84
  <span class="pf-v6-c-accordion__toggle-text">Item three</span>
61
85
 
62
86
  <span class="pf-v6-c-accordion__toggle-icon">
63
- <i class="fas fa-angle-right" aria-hidden="true"></i>
87
+ <svg
88
+ class="pf-v6-svg"
89
+ viewBox="0 0 20 20"
90
+ fill="currentColor"
91
+ aria-hidden="true"
92
+ role="img"
93
+ width="1em"
94
+ height="1em"
95
+ >
96
+ <path
97
+ 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"
98
+ />
99
+ </svg>
64
100
  </span>
65
101
  </button>
66
102
  </h3>
@@ -81,7 +117,19 @@ cssPrefix: pf-v6-c-accordion
81
117
  <span class="pf-v6-c-accordion__toggle-text">Item four</span>
82
118
 
83
119
  <span class="pf-v6-c-accordion__toggle-icon">
84
- <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>
85
133
  </span>
86
134
  </button>
87
135
  </h3>
@@ -102,7 +150,19 @@ cssPrefix: pf-v6-c-accordion
102
150
  <span class="pf-v6-c-accordion__toggle-text">Item five</span>
103
151
 
104
152
  <span class="pf-v6-c-accordion__toggle-icon">
105
- <i class="fas fa-angle-right" aria-hidden="true"></i>
153
+ <svg
154
+ class="pf-v6-svg"
155
+ viewBox="0 0 20 20"
156
+ fill="currentColor"
157
+ aria-hidden="true"
158
+ role="img"
159
+ width="1em"
160
+ height="1em"
161
+ >
162
+ <path
163
+ 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"
164
+ />
165
+ </svg>
106
166
  </span>
107
167
  </button>
108
168
  </h3>
@@ -130,7 +190,19 @@ cssPrefix: pf-v6-c-accordion
130
190
  <span class="pf-v6-c-accordion__toggle-text">Item one</span>
131
191
 
132
192
  <span class="pf-v6-c-accordion__toggle-icon">
133
- <i class="fas fa-angle-right" aria-hidden="true"></i>
193
+ <svg
194
+ class="pf-v6-svg"
195
+ viewBox="0 0 20 20"
196
+ fill="currentColor"
197
+ aria-hidden="true"
198
+ role="img"
199
+ width="1em"
200
+ height="1em"
201
+ >
202
+ <path
203
+ 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"
204
+ />
205
+ </svg>
134
206
  </span>
135
207
  </button>
136
208
  </h3>
@@ -152,7 +224,19 @@ cssPrefix: pf-v6-c-accordion
152
224
  <span class="pf-v6-c-accordion__toggle-text">Item two</span>
153
225
 
154
226
  <span class="pf-v6-c-accordion__toggle-icon">
155
- <i class="fas fa-angle-right" aria-hidden="true"></i>
227
+ <svg
228
+ class="pf-v6-svg"
229
+ viewBox="0 0 20 20"
230
+ fill="currentColor"
231
+ aria-hidden="true"
232
+ role="img"
233
+ width="1em"
234
+ height="1em"
235
+ >
236
+ <path
237
+ 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"
238
+ />
239
+ </svg>
156
240
  </span>
157
241
  </button>
158
242
  </h3>
@@ -184,7 +268,19 @@ cssPrefix: pf-v6-c-accordion
184
268
  <span class="pf-v6-c-accordion__toggle-text">Item three</span>
185
269
 
186
270
  <span class="pf-v6-c-accordion__toggle-icon">
187
- <i class="fas fa-angle-right" aria-hidden="true"></i>
271
+ <svg
272
+ class="pf-v6-svg"
273
+ viewBox="0 0 20 20"
274
+ fill="currentColor"
275
+ aria-hidden="true"
276
+ role="img"
277
+ width="1em"
278
+ height="1em"
279
+ >
280
+ <path
281
+ 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"
282
+ />
283
+ </svg>
188
284
  </span>
189
285
  </button>
190
286
  </h3>
@@ -205,7 +301,19 @@ cssPrefix: pf-v6-c-accordion
205
301
  <span class="pf-v6-c-accordion__toggle-text">Item four</span>
206
302
 
207
303
  <span class="pf-v6-c-accordion__toggle-icon">
208
- <i class="fas fa-angle-right" aria-hidden="true"></i>
304
+ <svg
305
+ class="pf-v6-svg"
306
+ viewBox="0 0 20 20"
307
+ fill="currentColor"
308
+ aria-hidden="true"
309
+ role="img"
310
+ width="1em"
311
+ height="1em"
312
+ >
313
+ <path
314
+ 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"
315
+ />
316
+ </svg>
209
317
  </span>
210
318
  </button>
211
319
  </h3>
@@ -226,7 +334,19 @@ cssPrefix: pf-v6-c-accordion
226
334
  <span class="pf-v6-c-accordion__toggle-text">Item five</span>
227
335
 
228
336
  <span class="pf-v6-c-accordion__toggle-icon">
229
- <i class="fas fa-angle-right" aria-hidden="true"></i>
337
+ <svg
338
+ class="pf-v6-svg"
339
+ viewBox="0 0 20 20"
340
+ fill="currentColor"
341
+ aria-hidden="true"
342
+ role="img"
343
+ width="1em"
344
+ height="1em"
345
+ >
346
+ <path
347
+ 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"
348
+ />
349
+ </svg>
230
350
  </span>
231
351
  </button>
232
352
  </h3>
@@ -254,7 +374,19 @@ cssPrefix: pf-v6-c-accordion
254
374
  <span class="pf-v6-c-accordion__toggle-text">Item one</span>
255
375
 
256
376
  <span class="pf-v6-c-accordion__toggle-icon">
257
- <i class="fas fa-angle-right" aria-hidden="true"></i>
377
+ <svg
378
+ class="pf-v6-svg"
379
+ viewBox="0 0 20 20"
380
+ fill="currentColor"
381
+ aria-hidden="true"
382
+ role="img"
383
+ width="1em"
384
+ height="1em"
385
+ >
386
+ <path
387
+ 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"
388
+ />
389
+ </svg>
258
390
  </span>
259
391
  </button>
260
392
  </dt>
@@ -275,7 +407,19 @@ cssPrefix: pf-v6-c-accordion
275
407
  <span class="pf-v6-c-accordion__toggle-text">Item two</span>
276
408
 
277
409
  <span class="pf-v6-c-accordion__toggle-icon">
278
- <i class="fas fa-angle-right" aria-hidden="true"></i>
410
+ <svg
411
+ class="pf-v6-svg"
412
+ viewBox="0 0 20 20"
413
+ fill="currentColor"
414
+ aria-hidden="true"
415
+ role="img"
416
+ width="1em"
417
+ height="1em"
418
+ >
419
+ <path
420
+ 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"
421
+ />
422
+ </svg>
279
423
  </span>
280
424
  </button>
281
425
  </dt>
@@ -296,7 +440,19 @@ cssPrefix: pf-v6-c-accordion
296
440
  <span class="pf-v6-c-accordion__toggle-text">Item three</span>
297
441
 
298
442
  <span class="pf-v6-c-accordion__toggle-icon">
299
- <i class="fas fa-angle-right" aria-hidden="true"></i>
443
+ <svg
444
+ class="pf-v6-svg"
445
+ viewBox="0 0 20 20"
446
+ fill="currentColor"
447
+ aria-hidden="true"
448
+ role="img"
449
+ width="1em"
450
+ height="1em"
451
+ >
452
+ <path
453
+ 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"
454
+ />
455
+ </svg>
300
456
  </span>
301
457
  </button>
302
458
  </dt>
@@ -317,7 +473,19 @@ cssPrefix: pf-v6-c-accordion
317
473
  <span class="pf-v6-c-accordion__toggle-text">Item four</span>
318
474
 
319
475
  <span class="pf-v6-c-accordion__toggle-icon">
320
- <i class="fas fa-angle-right" aria-hidden="true"></i>
476
+ <svg
477
+ class="pf-v6-svg"
478
+ viewBox="0 0 20 20"
479
+ fill="currentColor"
480
+ aria-hidden="true"
481
+ role="img"
482
+ width="1em"
483
+ height="1em"
484
+ >
485
+ <path
486
+ 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"
487
+ />
488
+ </svg>
321
489
  </span>
322
490
  </button>
323
491
  </dt>
@@ -338,7 +506,19 @@ cssPrefix: pf-v6-c-accordion
338
506
  <span class="pf-v6-c-accordion__toggle-text">Item five</span>
339
507
 
340
508
  <span class="pf-v6-c-accordion__toggle-icon">
341
- <i class="fas fa-angle-right" aria-hidden="true"></i>
509
+ <svg
510
+ class="pf-v6-svg"
511
+ viewBox="0 0 20 20"
512
+ fill="currentColor"
513
+ aria-hidden="true"
514
+ role="img"
515
+ width="1em"
516
+ height="1em"
517
+ >
518
+ <path
519
+ 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"
520
+ />
521
+ </svg>
342
522
  </span>
343
523
  </button>
344
524
  </dt>
@@ -366,7 +546,19 @@ cssPrefix: pf-v6-c-accordion
366
546
  <span class="pf-v6-c-accordion__toggle-text">Item one</span>
367
547
 
368
548
  <span class="pf-v6-c-accordion__toggle-icon">
369
- <i class="fas fa-angle-right" aria-hidden="true"></i>
549
+ <svg
550
+ class="pf-v6-svg"
551
+ viewBox="0 0 20 20"
552
+ fill="currentColor"
553
+ aria-hidden="true"
554
+ role="img"
555
+ width="1em"
556
+ height="1em"
557
+ >
558
+ <path
559
+ 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"
560
+ />
561
+ </svg>
370
562
  </span>
371
563
  </button>
372
564
  </h3>
@@ -387,7 +579,19 @@ cssPrefix: pf-v6-c-accordion
387
579
  <span class="pf-v6-c-accordion__toggle-text">Item two</span>
388
580
 
389
581
  <span class="pf-v6-c-accordion__toggle-icon">
390
- <i class="fas fa-angle-right" aria-hidden="true"></i>
582
+ <svg
583
+ class="pf-v6-svg"
584
+ viewBox="0 0 20 20"
585
+ fill="currentColor"
586
+ aria-hidden="true"
587
+ role="img"
588
+ width="1em"
589
+ height="1em"
590
+ >
591
+ <path
592
+ 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"
593
+ />
594
+ </svg>
391
595
  </span>
392
596
  </button>
393
597
  </h3>
@@ -408,7 +612,19 @@ cssPrefix: pf-v6-c-accordion
408
612
  <span class="pf-v6-c-accordion__toggle-text">Item three</span>
409
613
 
410
614
  <span class="pf-v6-c-accordion__toggle-icon">
411
- <i class="fas fa-angle-right" aria-hidden="true"></i>
615
+ <svg
616
+ class="pf-v6-svg"
617
+ viewBox="0 0 20 20"
618
+ fill="currentColor"
619
+ aria-hidden="true"
620
+ role="img"
621
+ width="1em"
622
+ height="1em"
623
+ >
624
+ <path
625
+ 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"
626
+ />
627
+ </svg>
412
628
  </span>
413
629
  </button>
414
630
  </h3>
@@ -429,7 +645,19 @@ cssPrefix: pf-v6-c-accordion
429
645
  <span class="pf-v6-c-accordion__toggle-text">Item four</span>
430
646
 
431
647
  <span class="pf-v6-c-accordion__toggle-icon">
432
- <i class="fas fa-angle-right" aria-hidden="true"></i>
648
+ <svg
649
+ class="pf-v6-svg"
650
+ viewBox="0 0 20 20"
651
+ fill="currentColor"
652
+ aria-hidden="true"
653
+ role="img"
654
+ width="1em"
655
+ height="1em"
656
+ >
657
+ <path
658
+ 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"
659
+ />
660
+ </svg>
433
661
  </span>
434
662
  </button>
435
663
  </h3>
@@ -450,7 +678,19 @@ cssPrefix: pf-v6-c-accordion
450
678
  <span class="pf-v6-c-accordion__toggle-text">Item five</span>
451
679
 
452
680
  <span class="pf-v6-c-accordion__toggle-icon">
453
- <i class="fas fa-angle-right" aria-hidden="true"></i>
681
+ <svg
682
+ class="pf-v6-svg"
683
+ viewBox="0 0 20 20"
684
+ fill="currentColor"
685
+ aria-hidden="true"
686
+ role="img"
687
+ width="1em"
688
+ height="1em"
689
+ >
690
+ <path
691
+ 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"
692
+ />
693
+ </svg>
454
694
  </span>
455
695
  </button>
456
696
  </h3>
@@ -478,7 +718,19 @@ cssPrefix: pf-v6-c-accordion
478
718
  <span class="pf-v6-c-accordion__toggle-text">Item one</span>
479
719
 
480
720
  <span class="pf-v6-c-accordion__toggle-icon">
481
- <i class="fas fa-angle-right" aria-hidden="true"></i>
721
+ <svg
722
+ class="pf-v6-svg"
723
+ viewBox="0 0 20 20"
724
+ fill="currentColor"
725
+ aria-hidden="true"
726
+ role="img"
727
+ width="1em"
728
+ height="1em"
729
+ >
730
+ <path
731
+ 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"
732
+ />
733
+ </svg>
482
734
  </span>
483
735
  </button>
484
736
  </h3>
@@ -499,7 +751,19 @@ cssPrefix: pf-v6-c-accordion
499
751
  <span class="pf-v6-c-accordion__toggle-text">Item two</span>
500
752
 
501
753
  <span class="pf-v6-c-accordion__toggle-icon">
502
- <i class="fas fa-angle-right" aria-hidden="true"></i>
754
+ <svg
755
+ class="pf-v6-svg"
756
+ viewBox="0 0 20 20"
757
+ fill="currentColor"
758
+ aria-hidden="true"
759
+ role="img"
760
+ width="1em"
761
+ height="1em"
762
+ >
763
+ <path
764
+ 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"
765
+ />
766
+ </svg>
503
767
  </span>
504
768
  </button>
505
769
  </h3>
@@ -520,7 +784,19 @@ cssPrefix: pf-v6-c-accordion
520
784
  <span class="pf-v6-c-accordion__toggle-text">Item three</span>
521
785
 
522
786
  <span class="pf-v6-c-accordion__toggle-icon">
523
- <i class="fas fa-angle-right" aria-hidden="true"></i>
787
+ <svg
788
+ class="pf-v6-svg"
789
+ viewBox="0 0 20 20"
790
+ fill="currentColor"
791
+ aria-hidden="true"
792
+ role="img"
793
+ width="1em"
794
+ height="1em"
795
+ >
796
+ <path
797
+ 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"
798
+ />
799
+ </svg>
524
800
  </span>
525
801
  </button>
526
802
  </h3>
@@ -541,7 +817,19 @@ cssPrefix: pf-v6-c-accordion
541
817
  <span class="pf-v6-c-accordion__toggle-text">Item four</span>
542
818
 
543
819
  <span class="pf-v6-c-accordion__toggle-icon">
544
- <i class="fas fa-angle-right" aria-hidden="true"></i>
820
+ <svg
821
+ class="pf-v6-svg"
822
+ viewBox="0 0 20 20"
823
+ fill="currentColor"
824
+ aria-hidden="true"
825
+ role="img"
826
+ width="1em"
827
+ height="1em"
828
+ >
829
+ <path
830
+ 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"
831
+ />
832
+ </svg>
545
833
  </span>
546
834
  </button>
547
835
  </h3>
@@ -562,7 +850,19 @@ cssPrefix: pf-v6-c-accordion
562
850
  <span class="pf-v6-c-accordion__toggle-text">Item five</span>
563
851
 
564
852
  <span class="pf-v6-c-accordion__toggle-icon">
565
- <i class="fas fa-angle-right" aria-hidden="true"></i>
853
+ <svg
854
+ class="pf-v6-svg"
855
+ viewBox="0 0 20 20"
856
+ fill="currentColor"
857
+ aria-hidden="true"
858
+ role="img"
859
+ width="1em"
860
+ height="1em"
861
+ >
862
+ <path
863
+ 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"
864
+ />
865
+ </svg>
566
866
  </span>
567
867
  </button>
568
868
  </h3>
@@ -588,7 +888,19 @@ cssPrefix: pf-v6-c-accordion
588
888
  aria-expanded="false"
589
889
  >
590
890
  <span class="pf-v6-c-accordion__toggle-icon">
591
- <i class="fas fa-angle-right" aria-hidden="true"></i>
891
+ <svg
892
+ class="pf-v6-svg"
893
+ viewBox="0 0 20 20"
894
+ fill="currentColor"
895
+ aria-hidden="true"
896
+ role="img"
897
+ width="1em"
898
+ height="1em"
899
+ >
900
+ <path
901
+ 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"
902
+ />
903
+ </svg>
592
904
  </span>
593
905
 
594
906
  <span class="pf-v6-c-accordion__toggle-text">Item one</span>
@@ -609,7 +921,19 @@ cssPrefix: pf-v6-c-accordion
609
921
  aria-expanded="false"
610
922
  >
611
923
  <span class="pf-v6-c-accordion__toggle-icon">
612
- <i class="fas fa-angle-right" aria-hidden="true"></i>
924
+ <svg
925
+ class="pf-v6-svg"
926
+ viewBox="0 0 20 20"
927
+ fill="currentColor"
928
+ aria-hidden="true"
929
+ role="img"
930
+ width="1em"
931
+ height="1em"
932
+ >
933
+ <path
934
+ 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"
935
+ />
936
+ </svg>
613
937
  </span>
614
938
 
615
939
  <span class="pf-v6-c-accordion__toggle-text">Item two</span>
@@ -630,7 +954,19 @@ cssPrefix: pf-v6-c-accordion
630
954
  aria-expanded="false"
631
955
  >
632
956
  <span class="pf-v6-c-accordion__toggle-icon">
633
- <i class="fas fa-angle-right" aria-hidden="true"></i>
957
+ <svg
958
+ class="pf-v6-svg"
959
+ viewBox="0 0 20 20"
960
+ fill="currentColor"
961
+ aria-hidden="true"
962
+ role="img"
963
+ width="1em"
964
+ height="1em"
965
+ >
966
+ <path
967
+ 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"
968
+ />
969
+ </svg>
634
970
  </span>
635
971
 
636
972
  <span class="pf-v6-c-accordion__toggle-text">Item three</span>
@@ -651,7 +987,19 @@ cssPrefix: pf-v6-c-accordion
651
987
  aria-expanded="true"
652
988
  >
653
989
  <span class="pf-v6-c-accordion__toggle-icon">
654
- <i class="fas fa-angle-right" aria-hidden="true"></i>
990
+ <svg
991
+ class="pf-v6-svg"
992
+ viewBox="0 0 20 20"
993
+ fill="currentColor"
994
+ aria-hidden="true"
995
+ role="img"
996
+ width="1em"
997
+ height="1em"
998
+ >
999
+ <path
1000
+ 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"
1001
+ />
1002
+ </svg>
655
1003
  </span>
656
1004
 
657
1005
  <span class="pf-v6-c-accordion__toggle-text">Item four</span>
@@ -672,7 +1020,19 @@ cssPrefix: pf-v6-c-accordion
672
1020
  aria-expanded="false"
673
1021
  >
674
1022
  <span class="pf-v6-c-accordion__toggle-icon">
675
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1023
+ <svg
1024
+ class="pf-v6-svg"
1025
+ viewBox="0 0 20 20"
1026
+ fill="currentColor"
1027
+ aria-hidden="true"
1028
+ role="img"
1029
+ width="1em"
1030
+ height="1em"
1031
+ >
1032
+ <path
1033
+ 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"
1034
+ />
1035
+ </svg>
676
1036
  </span>
677
1037
 
678
1038
  <span class="pf-v6-c-accordion__toggle-text">Item five</span>