@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/ClipboardCopy/examples/ClipboardCopy.md CHANGED
@@ -24,7 +24,19 @@ cssPrefix: pf-v6-c-clipboard-copy
24
24
  aria-label="Copy to clipboard basic editable example"
25
25
  >
26
26
  <span class="pf-v6-c-button__icon">
27
- <i class="fas fa-copy" aria-hidden="true"></i>
27
+ <svg
28
+ class="pf-v6-svg"
29
+ viewBox="0 0 448 512"
30
+ fill="currentColor"
31
+ aria-hidden="true"
32
+ role="img"
33
+ width="1em"
34
+ height="1em"
35
+ >
36
+ <path
37
+ d="M320 448v40c0 13.255-10.745 24-24 24H24c-13.255 0-24-10.745-24-24V120c0-13.255 10.745-24 24-24h72v296c0 30.879 25.121 56 56 56h168zm0-344V0H152c-13.255 0-24 10.745-24 24v368c0 13.255 10.745 24 24 24h272c13.255 0 24-10.745 24-24V128H344c-13.2 0-24-10.8-24-24zm120.971-31.029L375.029 7.029A24 24 0 0 0 358.059 0H352v96h96v-6.059a24 24 0 0 0-7.029-16.97z"
38
+ />
39
+ </svg>
28
40
  </span>
29
41
  </button>
30
42
  </div>
@@ -48,7 +60,19 @@ cssPrefix: pf-v6-c-clipboard-copy
48
60
  aria-label="Copy to clipboard basic read-only example"
49
61
  >
50
62
  <span class="pf-v6-c-button__icon">
51
- <i class="fas fa-copy" aria-hidden="true"></i>
63
+ <svg
64
+ class="pf-v6-svg"
65
+ viewBox="0 0 448 512"
66
+ fill="currentColor"
67
+ aria-hidden="true"
68
+ role="img"
69
+ width="1em"
70
+ height="1em"
71
+ >
72
+ <path
73
+ d="M320 448v40c0 13.255-10.745 24-24 24H24c-13.255 0-24-10.745-24-24V120c0-13.255 10.745-24 24-24h72v296c0 30.879 25.121 56 56 56h168zm0-344V0H152c-13.255 0-24 10.745-24 24v368c0 13.255 10.745 24 24 24h272c13.255 0 24-10.745 24-24V128H344c-13.2 0-24-10.8-24-24zm120.971-31.029L375.029 7.029A24 24 0 0 0 358.059 0H352v96h96v-6.059a24 24 0 0 0-7.029-16.97z"
74
+ />
75
+ </svg>
52
76
  </span>
53
77
  </button>
54
78
  </div>
@@ -72,7 +96,19 @@ cssPrefix: pf-v6-c-clipboard-copy
72
96
  >
73
97
  <span class="pf-v6-c-button__icon">
74
98
  <div class="pf-v6-c-clipboard-copy__toggle-icon">
75
- <i class="fas fa-angle-right" aria-hidden="true"></i>
99
+ <svg
100
+ class="pf-v6-svg"
101
+ viewBox="0 0 20 20"
102
+ fill="currentColor"
103
+ aria-hidden="true"
104
+ role="img"
105
+ width="1em"
106
+ height="1em"
107
+ >
108
+ <path
109
+ 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"
110
+ />
111
+ </svg>
76
112
  </div>
77
113
  </span>
78
114
  </button>
@@ -91,7 +127,19 @@ cssPrefix: pf-v6-c-clipboard-copy
91
127
  id="expandable-not-expanded-editable-copy-button"
92
128
  >
93
129
  <span class="pf-v6-c-button__icon">
94
- <i class="fas fa-copy" aria-hidden="true"></i>
130
+ <svg
131
+ class="pf-v6-svg"
132
+ viewBox="0 0 448 512"
133
+ fill="currentColor"
134
+ aria-hidden="true"
135
+ role="img"
136
+ width="1em"
137
+ height="1em"
138
+ >
139
+ <path
140
+ d="M320 448v40c0 13.255-10.745 24-24 24H24c-13.255 0-24-10.745-24-24V120c0-13.255 10.745-24 24-24h72v296c0 30.879 25.121 56 56 56h168zm0-344V0H152c-13.255 0-24 10.745-24 24v368c0 13.255 10.745 24 24 24h272c13.255 0 24-10.745 24-24V128H344c-13.2 0-24-10.8-24-24zm120.971-31.029L375.029 7.029A24 24 0 0 0 358.059 0H352v96h96v-6.059a24 24 0 0 0-7.029-16.97z"
141
+ />
142
+ </svg>
95
143
  </span>
96
144
  </button>
97
145
  </div>
@@ -114,7 +162,19 @@ cssPrefix: pf-v6-c-clipboard-copy
114
162
  >
115
163
  <span class="pf-v6-c-button__icon">
116
164
  <div class="pf-v6-c-clipboard-copy__toggle-icon">
117
- <i class="fas fa-angle-right" aria-hidden="true"></i>
165
+ <svg
166
+ class="pf-v6-svg"
167
+ viewBox="0 0 20 20"
168
+ fill="currentColor"
169
+ aria-hidden="true"
170
+ role="img"
171
+ width="1em"
172
+ height="1em"
173
+ >
174
+ <path
175
+ 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"
176
+ />
177
+ </svg>
118
178
  </div>
119
179
  </span>
120
180
  </button>
@@ -134,7 +194,19 @@ cssPrefix: pf-v6-c-clipboard-copy
134
194
  id="expandable-expanded-editable-copy-button"
135
195
  >
136
196
  <span class="pf-v6-c-button__icon">
137
- <i class="fas fa-copy" aria-hidden="true"></i>
197
+ <svg
198
+ class="pf-v6-svg"
199
+ viewBox="0 0 448 512"
200
+ fill="currentColor"
201
+ aria-hidden="true"
202
+ role="img"
203
+ width="1em"
204
+ height="1em"
205
+ >
206
+ <path
207
+ d="M320 448v40c0 13.255-10.745 24-24 24H24c-13.255 0-24-10.745-24-24V120c0-13.255 10.745-24 24-24h72v296c0 30.879 25.121 56 56 56h168zm0-344V0H152c-13.255 0-24 10.745-24 24v368c0 13.255 10.745 24 24 24h272c13.255 0 24-10.745 24-24V128H344c-13.2 0-24-10.8-24-24zm120.971-31.029L375.029 7.029A24 24 0 0 0 358.059 0H352v96h96v-6.059a24 24 0 0 0-7.029-16.97z"
208
+ />
209
+ </svg>
138
210
  </span>
139
211
  </button>
140
212
  </div>
@@ -158,7 +230,19 @@ cssPrefix: pf-v6-c-clipboard-copy
158
230
  >
159
231
  <span class="pf-v6-c-button__icon">
160
232
  <div class="pf-v6-c-clipboard-copy__toggle-icon">
161
- <i class="fas fa-angle-right" aria-hidden="true"></i>
233
+ <svg
234
+ class="pf-v6-svg"
235
+ viewBox="0 0 20 20"
236
+ fill="currentColor"
237
+ aria-hidden="true"
238
+ role="img"
239
+ width="1em"
240
+ height="1em"
241
+ >
242
+ <path
243
+ 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"
244
+ />
245
+ </svg>
162
246
  </div>
163
247
  </span>
164
248
  </button>
@@ -178,7 +262,19 @@ cssPrefix: pf-v6-c-clipboard-copy
178
262
  id="expandable-not-expanded-readonly-copy-button"
179
263
  >
180
264
  <span class="pf-v6-c-button__icon">
181
- <i class="fas fa-copy" aria-hidden="true"></i>
265
+ <svg
266
+ class="pf-v6-svg"
267
+ viewBox="0 0 448 512"
268
+ fill="currentColor"
269
+ aria-hidden="true"
270
+ role="img"
271
+ width="1em"
272
+ height="1em"
273
+ >
274
+ <path
275
+ d="M320 448v40c0 13.255-10.745 24-24 24H24c-13.255 0-24-10.745-24-24V120c0-13.255 10.745-24 24-24h72v296c0 30.879 25.121 56 56 56h168zm0-344V0H152c-13.255 0-24 10.745-24 24v368c0 13.255 10.745 24 24 24h272c13.255 0 24-10.745 24-24V128H344c-13.2 0-24-10.8-24-24zm120.971-31.029L375.029 7.029A24 24 0 0 0 358.059 0H352v96h96v-6.059a24 24 0 0 0-7.029-16.97z"
276
+ />
277
+ </svg>
182
278
  </span>
183
279
  </button>
184
280
  </div>
@@ -201,7 +297,19 @@ cssPrefix: pf-v6-c-clipboard-copy
201
297
  >
202
298
  <span class="pf-v6-c-button__icon">
203
299
  <div class="pf-v6-c-clipboard-copy__toggle-icon">
204
- <i class="fas fa-angle-right" aria-hidden="true"></i>
300
+ <svg
301
+ class="pf-v6-svg"
302
+ viewBox="0 0 20 20"
303
+ fill="currentColor"
304
+ aria-hidden="true"
305
+ role="img"
306
+ width="1em"
307
+ height="1em"
308
+ >
309
+ <path
310
+ 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"
311
+ />
312
+ </svg>
205
313
  </div>
206
314
  </span>
207
315
  </button>
@@ -221,7 +329,19 @@ cssPrefix: pf-v6-c-clipboard-copy
221
329
  id="expandable-expanded-readonly-copy-button"
222
330
  >
223
331
  <span class="pf-v6-c-button__icon">
224
- <i class="fas fa-copy" aria-hidden="true"></i>
332
+ <svg
333
+ class="pf-v6-svg"
334
+ viewBox="0 0 448 512"
335
+ fill="currentColor"
336
+ aria-hidden="true"
337
+ role="img"
338
+ width="1em"
339
+ height="1em"
340
+ >
341
+ <path
342
+ d="M320 448v40c0 13.255-10.745 24-24 24H24c-13.255 0-24-10.745-24-24V120c0-13.255 10.745-24 24-24h72v296c0 30.879 25.121 56 56 56h168zm0-344V0H152c-13.255 0-24 10.745-24 24v368c0 13.255 10.745 24 24 24h272c13.255 0 24-10.745 24-24V128H344c-13.2 0-24-10.8-24-24zm120.971-31.029L375.029 7.029A24 24 0 0 0 358.059 0H352v96h96v-6.059a24 24 0 0 0-7.029-16.97z"
343
+ />
344
+ </svg>
225
345
  </span>
226
346
  </button>
227
347
  </div>
@@ -244,7 +364,19 @@ cssPrefix: pf-v6-c-clipboard-copy
244
364
  >
245
365
  <span class="pf-v6-c-button__icon">
246
366
  <div class="pf-v6-c-clipboard-copy__toggle-icon">
247
- <i class="fas fa-angle-right" aria-hidden="true"></i>
367
+ <svg
368
+ class="pf-v6-svg"
369
+ viewBox="0 0 20 20"
370
+ fill="currentColor"
371
+ aria-hidden="true"
372
+ role="img"
373
+ width="1em"
374
+ height="1em"
375
+ >
376
+ <path
377
+ 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"
378
+ />
379
+ </svg>
248
380
  </div>
249
381
  </span>
250
382
  </button>
@@ -264,7 +396,19 @@ cssPrefix: pf-v6-c-clipboard-copy
264
396
  id="expandable-not-expanded-code-copy-button"
265
397
  >
266
398
  <span class="pf-v6-c-button__icon">
267
- <i class="fas fa-copy" aria-hidden="true"></i>
399
+ <svg
400
+ class="pf-v6-svg"
401
+ viewBox="0 0 448 512"
402
+ fill="currentColor"
403
+ aria-hidden="true"
404
+ role="img"
405
+ width="1em"
406
+ height="1em"
407
+ >
408
+ <path
409
+ d="M320 448v40c0 13.255-10.745 24-24 24H24c-13.255 0-24-10.745-24-24V120c0-13.255 10.745-24 24-24h72v296c0 30.879 25.121 56 56 56h168zm0-344V0H152c-13.255 0-24 10.745-24 24v368c0 13.255 10.745 24 24 24h272c13.255 0 24-10.745 24-24V128H344c-13.2 0-24-10.8-24-24zm120.971-31.029L375.029 7.029A24 24 0 0 0 358.059 0H352v96h96v-6.059a24 24 0 0 0-7.029-16.97z"
410
+ />
411
+ </svg>
268
412
  </span>
269
413
  </button>
270
414
  </div>
@@ -300,7 +444,19 @@ cssPrefix: pf-v6-c-clipboard-copy
300
444
  >
301
445
  <span class="pf-v6-c-button__icon">
302
446
  <div class="pf-v6-c-clipboard-copy__toggle-icon">
303
- <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>
304
460
  </div>
305
461
  </span>
306
462
  </button>
@@ -321,7 +477,19 @@ cssPrefix: pf-v6-c-clipboard-copy
321
477
  id="expandable-expanded-code-copy-button"
322
478
  >
323
479
  <span class="pf-v6-c-button__icon">
324
- <i class="fas fa-copy" aria-hidden="true"></i>
480
+ <svg
481
+ class="pf-v6-svg"
482
+ viewBox="0 0 448 512"
483
+ fill="currentColor"
484
+ aria-hidden="true"
485
+ role="img"
486
+ width="1em"
487
+ height="1em"
488
+ >
489
+ <path
490
+ d="M320 448v40c0 13.255-10.745 24-24 24H24c-13.255 0-24-10.745-24-24V120c0-13.255 10.745-24 24-24h72v296c0 30.879 25.121 56 56 56h168zm0-344V0H152c-13.255 0-24 10.745-24 24v368c0 13.255 10.745 24 24 24h272c13.255 0 24-10.745 24-24V128H344c-13.2 0-24-10.8-24-24zm120.971-31.029L375.029 7.029A24 24 0 0 0 358.059 0H352v96h96v-6.059a24 24 0 0 0-7.029-16.97z"
491
+ />
492
+ </svg>
325
493
  </span>
326
494
  </button>
327
495
  </div>
@@ -360,7 +528,19 @@ cssPrefix: pf-v6-c-clipboard-copy
360
528
  aria-label="Copy to clipboard inline compact example"
361
529
  >
362
530
  <span class="pf-v6-c-button__icon">
363
- <i class="fas fa-copy" aria-hidden="true"></i>
531
+ <svg
532
+ class="pf-v6-svg"
533
+ viewBox="0 0 448 512"
534
+ fill="currentColor"
535
+ aria-hidden="true"
536
+ role="img"
537
+ width="1em"
538
+ height="1em"
539
+ >
540
+ <path
541
+ d="M320 448v40c0 13.255-10.745 24-24 24H24c-13.255 0-24-10.745-24-24V120c0-13.255 10.745-24 24-24h72v296c0 30.879 25.121 56 56 56h168zm0-344V0H152c-13.255 0-24 10.745-24 24v368c0 13.255 10.745 24 24 24h272c13.255 0 24-10.745 24-24V128H344c-13.2 0-24-10.8-24-24zm120.971-31.029L375.029 7.029A24 24 0 0 0 358.059 0H352v96h96v-6.059a24 24 0 0 0-7.029-16.97z"
542
+ />
543
+ </svg>
364
544
  </span>
365
545
  </button>
366
546
  </span>
@@ -382,7 +562,19 @@ cssPrefix: pf-v6-c-clipboard-copy
382
562
  aria-label="Copy to clipboard inline compact code example"
383
563
  >
384
564
  <span class="pf-v6-c-button__icon">
385
- <i class="fas fa-copy" aria-hidden="true"></i>
565
+ <svg
566
+ class="pf-v6-svg"
567
+ viewBox="0 0 448 512"
568
+ fill="currentColor"
569
+ aria-hidden="true"
570
+ role="img"
571
+ width="1em"
572
+ height="1em"
573
+ >
574
+ <path
575
+ d="M320 448v40c0 13.255-10.745 24-24 24H24c-13.255 0-24-10.745-24-24V120c0-13.255 10.745-24 24-24h72v296c0 30.879 25.121 56 56 56h168zm0-344V0H152c-13.255 0-24 10.745-24 24v368c0 13.255 10.745 24 24 24h272c13.255 0 24-10.745 24-24V128H344c-13.2 0-24-10.8-24-24zm120.971-31.029L375.029 7.029A24 24 0 0 0 358.059 0H352v96h96v-6.059a24 24 0 0 0-7.029-16.97z"
576
+ />
577
+ </svg>
386
578
  </span>
387
579
  </button>
388
580
  </span>
@@ -404,7 +596,19 @@ cssPrefix: pf-v6-c-clipboard-copy
404
596
  aria-label="Copy to clipboard inline compact with additional action example"
405
597
  >
406
598
  <span class="pf-v6-c-button__icon">
407
- <i class="fas fa-copy" aria-hidden="true"></i>
599
+ <svg
600
+ class="pf-v6-svg"
601
+ viewBox="0 0 448 512"
602
+ fill="currentColor"
603
+ aria-hidden="true"
604
+ role="img"
605
+ width="1em"
606
+ height="1em"
607
+ >
608
+ <path
609
+ d="M320 448v40c0 13.255-10.745 24-24 24H24c-13.255 0-24-10.745-24-24V120c0-13.255 10.745-24 24-24h72v296c0 30.879 25.121 56 56 56h168zm0-344V0H152c-13.255 0-24 10.745-24 24v368c0 13.255 10.745 24 24 24h272c13.255 0 24-10.745 24-24V128H344c-13.2 0-24-10.8-24-24zm120.971-31.029L375.029 7.029A24 24 0 0 0 358.059 0H352v96h96v-6.059a24 24 0 0 0-7.029-16.97z"
610
+ />
611
+ </svg>
408
612
  </span>
409
613
  </button>
410
614
  </span>
@@ -415,7 +619,19 @@ cssPrefix: pf-v6-c-clipboard-copy
415
619
  aria-label="Run in web terminal"
416
620
  >
417
621
  <span class="pf-v6-c-button__icon">
418
- <i class="fas fa-copy" aria-hidden="true"></i>
622
+ <svg
623
+ class="pf-v6-svg"
624
+ viewBox="0 0 448 512"
625
+ fill="currentColor"
626
+ aria-hidden="true"
627
+ role="img"
628
+ width="1em"
629
+ height="1em"
630
+ >
631
+ <path
632
+ d="M320 448v40c0 13.255-10.745 24-24 24H24c-13.255 0-24-10.745-24-24V120c0-13.255 10.745-24 24-24h72v296c0 30.879 25.121 56 56 56h168zm0-344V0H152c-13.255 0-24 10.745-24 24v368c0 13.255 10.745 24 24 24h272c13.255 0 24-10.745 24-24V128H344c-13.2 0-24-10.8-24-24zm120.971-31.029L375.029 7.029A24 24 0 0 0 358.059 0H352v96h96v-6.059a24 24 0 0 0-7.029-16.97z"
633
+ />
634
+ </svg>
419
635
  </span>
420
636
  </button>
421
637
  </span>
@@ -440,7 +656,19 @@ cssPrefix: pf-v6-c-clipboard-copy
440
656
  aria-label="Copy to clipboard basic inline compact example"
441
657
  >
442
658
  <span class="pf-v6-c-button__icon">
443
- <i class="fas fa-copy" aria-hidden="true"></i>
659
+ <svg
660
+ class="pf-v6-svg"
661
+ viewBox="0 0 448 512"
662
+ fill="currentColor"
663
+ aria-hidden="true"
664
+ role="img"
665
+ width="1em"
666
+ height="1em"
667
+ >
668
+ <path
669
+ d="M320 448v40c0 13.255-10.745 24-24 24H24c-13.255 0-24-10.745-24-24V120c0-13.255 10.745-24 24-24h72v296c0 30.879 25.121 56 56 56h168zm0-344V0H152c-13.255 0-24 10.745-24 24v368c0 13.255 10.745 24 24 24h272c13.255 0 24-10.745 24-24V128H344c-13.2 0-24-10.8-24-24zm120.971-31.029L375.029 7.029A24 24 0 0 0 358.059 0H352v96h96v-6.059a24 24 0 0 0-7.029-16.97z"
670
+ />
671
+ </svg>
444
672
  </span>
445
673
  </button>
446
674
  </span>
@@ -465,7 +693,19 @@ cssPrefix: pf-v6-c-clipboard-copy
465
693
  aria-label="Copy to clipboard long inline compact example"
466
694
  >
467
695
  <span class="pf-v6-c-button__icon">
468
- <i class="fas fa-copy" aria-hidden="true"></i>
696
+ <svg
697
+ class="pf-v6-svg"
698
+ viewBox="0 0 448 512"
699
+ fill="currentColor"
700
+ aria-hidden="true"
701
+ role="img"
702
+ width="1em"
703
+ height="1em"
704
+ >
705
+ <path
706
+ d="M320 448v40c0 13.255-10.745 24-24 24H24c-13.255 0-24-10.745-24-24V120c0-13.255 10.745-24 24-24h72v296c0 30.879 25.121 56 56 56h168zm0-344V0H152c-13.255 0-24 10.745-24 24v368c0 13.255 10.745 24 24 24h272c13.255 0 24-10.745 24-24V128H344c-13.2 0-24-10.8-24-24zm120.971-31.029L375.029 7.029A24 24 0 0 0 358.059 0H352v96h96v-6.059a24 24 0 0 0-7.029-16.97z"
707
+ />
708
+ </svg>
469
709
  </span>
470
710
  </button>
471
711
  </span>
@@ -489,7 +729,19 @@ cssPrefix: pf-v6-c-clipboard-copy
489
729
  aria-label="Copy to clipboard long block compact example"
490
730
  >
491
731
  <span class="pf-v6-c-button__icon">
492
- <i class="fas fa-copy" aria-hidden="true"></i>
732
+ <svg
733
+ class="pf-v6-svg"
734
+ viewBox="0 0 448 512"
735
+ fill="currentColor"
736
+ aria-hidden="true"
737
+ role="img"
738
+ width="1em"
739
+ height="1em"
740
+ >
741
+ <path
742
+ d="M320 448v40c0 13.255-10.745 24-24 24H24c-13.255 0-24-10.745-24-24V120c0-13.255 10.745-24 24-24h72v296c0 30.879 25.121 56 56 56h168zm0-344V0H152c-13.255 0-24 10.745-24 24v368c0 13.255 10.745 24 24 24h272c13.255 0 24-10.745 24-24V128H344c-13.2 0-24-10.8-24-24zm120.971-31.029L375.029 7.029A24 24 0 0 0 358.059 0H352v96h96v-6.059a24 24 0 0 0-7.029-16.97z"
743
+ />
744
+ </svg>
493
745
  </span>
494
746
  </button>
495
747
  </span>
@@ -517,7 +769,19 @@ cssPrefix: pf-v6-c-clipboard-copy
517
769
  aria-label="Copy to clipboard inline compact with truncation example"
518
770
  >
519
771
  <span class="pf-v6-c-button__icon">
520
- <i class="fas fa-copy" aria-hidden="true"></i>
772
+ <svg
773
+ class="pf-v6-svg"
774
+ viewBox="0 0 448 512"
775
+ fill="currentColor"
776
+ aria-hidden="true"
777
+ role="img"
778
+ width="1em"
779
+ height="1em"
780
+ >
781
+ <path
782
+ d="M320 448v40c0 13.255-10.745 24-24 24H24c-13.255 0-24-10.745-24-24V120c0-13.255 10.745-24 24-24h72v296c0 30.879 25.121 56 56 56h168zm0-344V0H152c-13.255 0-24 10.745-24 24v368c0 13.255 10.745 24 24 24h272c13.255 0 24-10.745 24-24V128H344c-13.2 0-24-10.8-24-24zm120.971-31.029L375.029 7.029A24 24 0 0 0 358.059 0H352v96h96v-6.059a24 24 0 0 0-7.029-16.97z"
783
+ />
784
+ </svg>
521
785
  </span>
522
786
  </button>
523
787
  </span>
package/docs/components/CodeBlock/examples/CodeBlock.md CHANGED
@@ -17,7 +17,19 @@ cssPrefix: pf-v6-c-code-block
17
17
  aria-label="Copy to clipboard basic example code content"
18
18
  >
19
19
  <span class="pf-v6-c-button__icon">
20
- <i class="fas fa-copy" aria-hidden="true"></i>
20
+ <svg
21
+ class="pf-v6-svg"
22
+ viewBox="0 0 448 512"
23
+ fill="currentColor"
24
+ aria-hidden="true"
25
+ role="img"
26
+ width="1em"
27
+ height="1em"
28
+ >
29
+ <path
30
+ d="M320 448v40c0 13.255-10.745 24-24 24H24c-13.255 0-24-10.745-24-24V120c0-13.255 10.745-24 24-24h72v296c0 30.879 25.121 56 56 56h168zm0-344V0H152c-13.255 0-24 10.745-24 24v368c0 13.255 10.745 24 24 24h272c13.255 0 24-10.745 24-24V128H344c-13.2 0-24-10.8-24-24zm120.971-31.029L375.029 7.029A24 24 0 0 0 358.059 0H352v96h96v-6.059a24 24 0 0 0-7.029-16.97z"
31
+ />
32
+ </svg>
21
33
  </span>
22
34
  </button>
23
35
  </div>
@@ -28,7 +40,19 @@ cssPrefix: pf-v6-c-code-block
28
40
  aria-label="Run basic example code in Web Terminal"
29
41
  >
30
42
  <span class="pf-v6-c-button__icon">
31
- <i class="fas fa-play" aria-hidden="true"></i>
43
+ <svg
44
+ class="pf-v6-svg"
45
+ viewBox="0 0 448 512"
46
+ fill="currentColor"
47
+ aria-hidden="true"
48
+ role="img"
49
+ width="1em"
50
+ height="1em"
51
+ >
52
+ <path
53
+ d="M424.4 214.7L72.4 6.6C43.8-10.3 0 6.1 0 47.9V464c0 37.5 40.7 60.1 72.4 41.3l352-208c31.4-18.5 31.5-64.1 0-82.6z"
54
+ />
55
+ </svg>
32
56
  </span>
33
57
  </button>
34
58
  </div>
@@ -61,7 +85,19 @@ url: https://raw.githubusercontent.com/Azure-Samples/helm-charts/master/docs</co
61
85
  aria-label="Copy to clipboard expandable example code content"
62
86
  >
63
87
  <span class="pf-v6-c-button__icon">
64
- <i class="fas fa-copy" aria-hidden="true"></i>
88
+ <svg
89
+ class="pf-v6-svg"
90
+ viewBox="0 0 448 512"
91
+ fill="currentColor"
92
+ aria-hidden="true"
93
+ role="img"
94
+ width="1em"
95
+ height="1em"
96
+ >
97
+ <path
98
+ d="M320 448v40c0 13.255-10.745 24-24 24H24c-13.255 0-24-10.745-24-24V120c0-13.255 10.745-24 24-24h72v296c0 30.879 25.121 56 56 56h168zm0-344V0H152c-13.255 0-24 10.745-24 24v368c0 13.255 10.745 24 24 24h272c13.255 0 24-10.745 24-24V128H344c-13.2 0-24-10.8-24-24zm120.971-31.029L375.029 7.029A24 24 0 0 0 358.059 0H352v96h96v-6.059a24 24 0 0 0-7.029-16.97z"
99
+ />
100
+ </svg>
65
101
  </span>
66
102
  </button>
67
103
  </div>
@@ -72,7 +108,19 @@ url: https://raw.githubusercontent.com/Azure-Samples/helm-charts/master/docs</co
72
108
  aria-label="Run expandable example code in Web Terminal"
73
109
  >
74
110
  <span class="pf-v6-c-button__icon">
75
- <i class="fas fa-play" aria-hidden="true"></i>
111
+ <svg
112
+ class="pf-v6-svg"
113
+ viewBox="0 0 448 512"
114
+ fill="currentColor"
115
+ aria-hidden="true"
116
+ role="img"
117
+ width="1em"
118
+ height="1em"
119
+ >
120
+ <path
121
+ d="M424.4 214.7L72.4 6.6C43.8-10.3 0 6.1 0 47.9V464c0 37.5 40.7 60.1 72.4 41.3l352-208c31.4-18.5 31.5-64.1 0-82.6z"
122
+ />
123
+ </svg>
76
124
  </span>
77
125
  </button>
78
126
  </div>
@@ -110,7 +158,19 @@ name: azure-sample-repo<div
110
158
  <span
111
159
  class="pf-v6-c-expandable-section__toggle-icon pf-m-expand-top"
112
160
  >
113
- <i class="fas fa-angle-right" aria-hidden="true"></i>
161
+ <svg
162
+ class="pf-v6-svg"
163
+ viewBox="0 0 20 20"
164
+ fill="currentColor"
165
+ aria-hidden="true"
166
+ role="img"
167
+ width="1em"
168
+ height="1em"
169
+ >
170
+ <path
171
+ 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"
172
+ />
173
+ </svg>
114
174
  </span>
115
175
  </span>
116
176
  <span class="pf-v6-c-button__text">Show more</span>
@@ -135,7 +195,19 @@ name: azure-sample-repo<div
135
195
  aria-label="Copy to clipboard expandable expanded example code content"
136
196
  >
137
197
  <span class="pf-v6-c-button__icon">
138
- <i class="fas fa-copy" aria-hidden="true"></i>
198
+ <svg
199
+ class="pf-v6-svg"
200
+ viewBox="0 0 448 512"
201
+ fill="currentColor"
202
+ aria-hidden="true"
203
+ role="img"
204
+ width="1em"
205
+ height="1em"
206
+ >
207
+ <path
208
+ d="M320 448v40c0 13.255-10.745 24-24 24H24c-13.255 0-24-10.745-24-24V120c0-13.255 10.745-24 24-24h72v296c0 30.879 25.121 56 56 56h168zm0-344V0H152c-13.255 0-24 10.745-24 24v368c0 13.255 10.745 24 24 24h272c13.255 0 24-10.745 24-24V128H344c-13.2 0-24-10.8-24-24zm120.971-31.029L375.029 7.029A24 24 0 0 0 358.059 0H352v96h96v-6.059a24 24 0 0 0-7.029-16.97z"
209
+ />
210
+ </svg>
139
211
  </span>
140
212
  </button>
141
213
  </div>
@@ -146,7 +218,19 @@ name: azure-sample-repo<div
146
218
  aria-label="Run expandable expanded example code in Web Terminal"
147
219
  >
148
220
  <span class="pf-v6-c-button__icon">
149
- <i class="fas fa-play" aria-hidden="true"></i>
221
+ <svg
222
+ class="pf-v6-svg"
223
+ viewBox="0 0 448 512"
224
+ fill="currentColor"
225
+ aria-hidden="true"
226
+ role="img"
227
+ width="1em"
228
+ height="1em"
229
+ >
230
+ <path
231
+ d="M424.4 214.7L72.4 6.6C43.8-10.3 0 6.1 0 47.9V464c0 37.5 40.7 60.1 72.4 41.3l352-208c31.4-18.5 31.5-64.1 0-82.6z"
232
+ />
233
+ </svg>
150
234
  </span>
151
235
  </button>
152
236
  </div>
@@ -183,7 +267,19 @@ name: azure-sample-repo<div
183
267
  <span
184
268
  class="pf-v6-c-expandable-section__toggle-icon pf-m-expand-top"
185
269
  >
186
- <i class="fas fa-angle-right" aria-hidden="true"></i>
270
+ <svg
271
+ class="pf-v6-svg"
272
+ viewBox="0 0 20 20"
273
+ fill="currentColor"
274
+ aria-hidden="true"
275
+ role="img"
276
+ width="1em"
277
+ height="1em"
278
+ >
279
+ <path
280
+ 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"
281
+ />
282
+ </svg>
187
283
  </span>
188
284
  </span>
189
285
  <span class="pf-v6-c-button__text">Show less</span>