@patternfly/patternfly 6.5.0-prerelease.43 → 6.5.0-prerelease.44

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 (65) hide show
  1. package/components/Button/button.css +75 -2
  2. package/components/Button/button.scss +84 -3
  3. package/components/_index.css +75 -2
  4. package/docs/components/AboutModalBox/examples/AboutModalBox.md +13 -1
  5. package/docs/components/ActionList/examples/ActionList.md +143 -11
  6. package/docs/components/Alert/examples/Alert.md +182 -14
  7. package/docs/components/BackToTop/examples/BackToTop.md +13 -1
  8. package/docs/components/Button/examples/Button.md +2017 -157
  9. package/docs/components/CalendarMonth/examples/CalendarMonth.md +104 -8
  10. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +208 -16
  11. package/docs/components/CodeBlock/examples/CodeBlock.md +78 -6
  12. package/docs/components/CodeEditor/examples/CodeEditor.md +195 -15
  13. package/docs/components/DatePicker/examples/DatePicker.md +78 -6
  14. package/docs/components/DescriptionList/examples/DescriptionList.md +325 -25
  15. package/docs/components/Drawer/examples/Drawer.md +273 -21
  16. package/docs/components/DualListSelector/examples/DualListSelector.md +106 -112
  17. package/docs/components/InlineEdit/examples/InlineEdit.md +312 -24
  18. package/docs/components/InputGroup/examples/InputGroup.md +26 -2
  19. package/docs/components/Label/examples/Label.md +242 -218
  20. package/docs/components/Login/examples/Login.md +26 -2
  21. package/docs/components/Masthead/examples/masthead.md +13 -1
  22. package/docs/components/MenuToggle/examples/MenuToggle.md +1 -1
  23. package/docs/components/ModalBox/examples/ModalBox.md +195 -15
  24. package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +117 -9
  25. package/docs/components/Nav/examples/Navigation.md +52 -4
  26. package/docs/components/NotificationDrawer/examples/NotificationDrawer.md +26 -2
  27. package/docs/components/OverflowMenu/examples/overflow-menu.md +78 -6
  28. package/docs/components/Page/examples/Page.md +13 -1
  29. package/docs/components/Pagination/examples/Pagination.md +624 -48
  30. package/docs/components/Popover/examples/Popover.md +208 -16
  31. package/docs/components/Slider/examples/Slider.md +4 -4
  32. package/docs/components/Table/examples/Table.md +52 -4
  33. package/docs/components/Tabs/examples/Tabs.md +1378 -106
  34. package/docs/components/TextInputGroup/examples/TextInputGroup.md +128 -44
  35. package/docs/components/Toolbar/examples/Toolbar.md +455 -35
  36. package/docs/components/TreeView/examples/TreeView.md +52 -4
  37. package/docs/components/Wizard/examples/Wizard.md +169 -13
  38. package/docs/demos/AboutModal/examples/AboutModal.md +13 -1
  39. package/docs/demos/Alert/examples/Alert.md +39 -3
  40. package/docs/demos/BackToTop/examples/BackToTop.md +13 -1
  41. package/docs/demos/Button/examples/Button.md +13 -1
  42. package/docs/demos/Card/examples/Card.md +65 -5
  43. package/docs/demos/CardView/examples/CardView.md +78 -6
  44. package/docs/demos/Compass/examples/Compass.md +323 -29
  45. package/docs/demos/Dashboard/examples/Dashboard.md +39 -3
  46. package/docs/demos/DataList/examples/DataList.md +312 -24
  47. package/docs/demos/DescriptionList/examples/DescriptionList.md +13 -1
  48. package/docs/demos/Drawer/examples/Drawer.md +39 -3
  49. package/docs/demos/Form/examples/BasicForms.md +106 -10
  50. package/docs/demos/JumpLinks/examples/JumpLinks.md +26 -2
  51. package/docs/demos/Masthead/examples/Masthead.md +40 -4
  52. package/docs/demos/Modal/examples/Modal.md +78 -6
  53. package/docs/demos/Nav/examples/Nav.md +52 -4
  54. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +13 -1
  55. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +52 -4
  56. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +295 -55
  57. package/docs/demos/Table/examples/Table.md +1108 -145
  58. package/docs/demos/Tabs/examples/Tabs.md +53 -8
  59. package/docs/demos/Toolbar/examples/Toolbar.md +414 -36
  60. package/docs/demos/Wizard/examples/Wizard.md +130 -10
  61. package/package.json +2 -2
  62. package/patternfly-no-globals.css +75 -2
  63. package/patternfly.css +75 -2
  64. package/patternfly.min.css +1 -1
  65. package/patternfly.min.css.map +1 -1
package/docs/demos/Form/examples/BasicForms.md CHANGED
@@ -820,7 +820,19 @@ subsection: forms
820
820
  aria-label="Remove"
821
821
  >
822
822
  <span class="pf-v6-c-button__icon">
823
- <i class="fas fa-minus-circle" aria-hidden="true"></i>
823
+ <svg
824
+ class="pf-v6-svg"
825
+ viewBox="0 0 512 512"
826
+ fill="currentColor"
827
+ aria-hidden="true"
828
+ role="img"
829
+ width="1em"
830
+ height="1em"
831
+ >
832
+ <path
833
+ d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zM124 296c-6.6 0-12-5.4-12-12v-56c0-6.6 5.4-12 12-12h264c6.6 0 12 5.4 12 12v56c0 6.6-5.4 12-12 12H124z"
834
+ />
835
+ </svg>
824
836
  </span>
825
837
  </button>
826
838
  </div>
@@ -844,7 +856,19 @@ subsection: forms
844
856
  aria-label="Remove"
845
857
  >
846
858
  <span class="pf-v6-c-button__icon">
847
- <i class="fas fa-minus-circle" aria-hidden="true"></i>
859
+ <svg
860
+ class="pf-v6-svg"
861
+ viewBox="0 0 512 512"
862
+ fill="currentColor"
863
+ aria-hidden="true"
864
+ role="img"
865
+ width="1em"
866
+ height="1em"
867
+ >
868
+ <path
869
+ d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zM124 296c-6.6 0-12-5.4-12-12v-56c0-6.6 5.4-12 12-12h264c6.6 0 12 5.4 12 12v56c0 6.6-5.4 12-12 12H124z"
870
+ />
871
+ </svg>
848
872
  </span>
849
873
  </button>
850
874
  </div>
@@ -868,14 +892,38 @@ subsection: forms
868
892
  aria-label="Remove"
869
893
  >
870
894
  <span class="pf-v6-c-button__icon">
871
- <i class="fas fa-minus-circle" aria-hidden="true"></i>
895
+ <svg
896
+ class="pf-v6-svg"
897
+ viewBox="0 0 512 512"
898
+ fill="currentColor"
899
+ aria-hidden="true"
900
+ role="img"
901
+ width="1em"
902
+ height="1em"
903
+ >
904
+ <path
905
+ d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zM124 296c-6.6 0-12-5.4-12-12v-56c0-6.6 5.4-12 12-12h264c6.6 0 12 5.4 12 12v56c0 6.6-5.4 12-12 12H124z"
906
+ />
907
+ </svg>
872
908
  </span>
873
909
  </button>
874
910
  </div>
875
911
  </div>
876
912
  <button class="pf-v6-c-button pf-m-inline pf-m-link" type="button">
877
913
  <span class="pf-v6-c-button__icon pf-m-start">
878
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
914
+ <svg
915
+ class="pf-v6-svg"
916
+ viewBox="0 0 512 512"
917
+ fill="currentColor"
918
+ aria-hidden="true"
919
+ role="img"
920
+ width="1em"
921
+ height="1em"
922
+ >
923
+ <path
924
+ d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm144 276c0 6.6-5.4 12-12 12h-92v92c0 6.6-5.4 12-12 12h-56c-6.6 0-12-5.4-12-12v-92h-92c-6.6 0-12-5.4-12-12v-56c0-6.6 5.4-12 12-12h92v-92c0-6.6 5.4-12 12-12h56c6.6 0 12 5.4 12 12v92h92c6.6 0 12 5.4 12 12v56z"
925
+ />
926
+ </svg>
879
927
  </span>
880
928
  <span class="pf-v6-c-button__text">Add valid redirect URI</span>
881
929
  </button>
@@ -1039,7 +1087,7 @@ subsection: forms
1039
1087
  aria-labelledby="-label-1-button -label-1-text"
1040
1088
  >
1041
1089
  <span class="pf-v6-c-button__icon">
1042
- <i class="fas fa-times fa-fw" aria-hidden="true"></i>
1090
+ <!-- Icon "times fa-fw" not found -->
1043
1091
  </span>
1044
1092
  </button>
1045
1093
  </span>
@@ -1062,7 +1110,7 @@ subsection: forms
1062
1110
  aria-labelledby="-label-2-button -label-2-text"
1063
1111
  >
1064
1112
  <span class="pf-v6-c-button__icon">
1065
- <i class="fas fa-times fa-fw" aria-hidden="true"></i>
1113
+ <!-- Icon "times fa-fw" not found -->
1066
1114
  </span>
1067
1115
  </button>
1068
1116
  </span>
@@ -1351,7 +1399,19 @@ subsection: forms
1351
1399
  aria-label="Remove"
1352
1400
  >
1353
1401
  <span class="pf-v6-c-button__icon">
1354
- <i class="fas fa-minus-circle" aria-hidden="true"></i>
1402
+ <svg
1403
+ class="pf-v6-svg"
1404
+ viewBox="0 0 512 512"
1405
+ fill="currentColor"
1406
+ aria-hidden="true"
1407
+ role="img"
1408
+ width="1em"
1409
+ height="1em"
1410
+ >
1411
+ <path
1412
+ d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zM124 296c-6.6 0-12-5.4-12-12v-56c0-6.6 5.4-12 12-12h264c6.6 0 12 5.4 12 12v56c0 6.6-5.4 12-12 12H124z"
1413
+ />
1414
+ </svg>
1355
1415
  </span>
1356
1416
  </button>
1357
1417
  </div>
@@ -1361,7 +1421,19 @@ subsection: forms
1361
1421
  type="button"
1362
1422
  >
1363
1423
  <span class="pf-v6-c-button__icon pf-m-start">
1364
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
1424
+ <svg
1425
+ class="pf-v6-svg"
1426
+ viewBox="0 0 512 512"
1427
+ fill="currentColor"
1428
+ aria-hidden="true"
1429
+ role="img"
1430
+ width="1em"
1431
+ height="1em"
1432
+ >
1433
+ <path
1434
+ d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm144 276c0 6.6-5.4 12-12 12h-92v92c0 6.6-5.4 12-12 12h-56c-6.6 0-12-5.4-12-12v-92h-92c-6.6 0-12-5.4-12-12v-56c0-6.6 5.4-12 12-12h92v-92c0-6.6 5.4-12 12-12h56c6.6 0 12 5.4 12 12v92h92c6.6 0 12 5.4 12 12v56z"
1435
+ />
1436
+ </svg>
1365
1437
  </span>
1366
1438
  <span class="pf-v6-c-button__text">Add valid redirect URI</span>
1367
1439
  </button>
@@ -1647,7 +1719,19 @@ subsection: forms
1647
1719
  type="button"
1648
1720
  >
1649
1721
  <span class="pf-v6-c-button__icon pf-m-start">
1650
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
1722
+ <svg
1723
+ class="pf-v6-svg"
1724
+ viewBox="0 0 512 512"
1725
+ fill="currentColor"
1726
+ aria-hidden="true"
1727
+ role="img"
1728
+ width="1em"
1729
+ height="1em"
1730
+ >
1731
+ <path
1732
+ d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm144 276c0 6.6-5.4 12-12 12h-92v92c0 6.6-5.4 12-12 12h-56c-6.6 0-12-5.4-12-12v-92h-92c-6.6 0-12-5.4-12-12v-56c0-6.6 5.4-12 12-12h92v-92c0-6.6 5.4-12 12-12h56c6.6 0 12 5.4 12 12v92h92c6.6 0 12 5.4 12 12v56z"
1733
+ />
1734
+ </svg>
1651
1735
  </span>
1652
1736
  <span class="pf-v6-c-button__text">Add liveness probe</span>
1653
1737
  </button>
@@ -1681,7 +1765,19 @@ subsection: forms
1681
1765
  type="button"
1682
1766
  >
1683
1767
  <span class="pf-v6-c-button__icon pf-m-start">
1684
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
1768
+ <svg
1769
+ class="pf-v6-svg"
1770
+ viewBox="0 0 512 512"
1771
+ fill="currentColor"
1772
+ aria-hidden="true"
1773
+ role="img"
1774
+ width="1em"
1775
+ height="1em"
1776
+ >
1777
+ <path
1778
+ d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm144 276c0 6.6-5.4 12-12 12h-92v92c0 6.6-5.4 12-12 12h-56c-6.6 0-12-5.4-12-12v-92h-92c-6.6 0-12-5.4-12-12v-56c0-6.6 5.4-12 12-12h92v-92c0-6.6 5.4-12 12-12h56c6.6 0 12 5.4 12 12v92h92c6.6 0 12 5.4 12 12v56z"
1779
+ />
1780
+ </svg>
1685
1781
  </span>
1686
1782
  <span class="pf-v6-c-button__text">Add startup probe</span>
1687
1783
  </button>
package/docs/demos/JumpLinks/examples/JumpLinks.md CHANGED
@@ -2085,7 +2085,19 @@ section: components
2085
2085
  aria-label="Close drawer panel"
2086
2086
  >
2087
2087
  <span class="pf-v6-c-button__icon">
2088
- <i class="fas fa-times" aria-hidden="true"></i>
2088
+ <svg
2089
+ class="pf-v6-svg"
2090
+ viewBox="0 0 352 512"
2091
+ fill="currentColor"
2092
+ aria-hidden="true"
2093
+ role="img"
2094
+ width="1em"
2095
+ height="1em"
2096
+ >
2097
+ <path
2098
+ d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
2099
+ />
2100
+ </svg>
2089
2101
  </span>
2090
2102
  </button>
2091
2103
  </div>
@@ -2507,7 +2519,19 @@ section: components
2507
2519
  aria-label="Close drawer panel"
2508
2520
  >
2509
2521
  <span class="pf-v6-c-button__icon">
2510
- <i class="fas fa-times" aria-hidden="true"></i>
2522
+ <svg
2523
+ class="pf-v6-svg"
2524
+ viewBox="0 0 352 512"
2525
+ fill="currentColor"
2526
+ aria-hidden="true"
2527
+ role="img"
2528
+ width="1em"
2529
+ height="1em"
2530
+ >
2531
+ <path
2532
+ d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
2533
+ />
2534
+ </svg>
2511
2535
  </span>
2512
2536
  </button>
2513
2537
  </div>
package/docs/demos/Masthead/examples/Masthead.md CHANGED
@@ -1424,7 +1424,7 @@ wrapperTag: div
1424
1424
  aria-label="Open search"
1425
1425
  >
1426
1426
  <span class="pf-v6-c-button__icon">
1427
- <i class="fas fa-search fa-fw" aria-hidden="true"></i>
1427
+ <!-- Icon "search fa-fw" not found -->
1428
1428
  </span>
1429
1429
  </button>
1430
1430
  </div>
@@ -1726,7 +1726,19 @@ wrapperTag: div
1726
1726
  aria-label="Close"
1727
1727
  >
1728
1728
  <span class="pf-v6-c-button__icon">
1729
- <i class="fas fa-times" aria-hidden="true"></i>
1729
+ <svg
1730
+ class="pf-v6-svg"
1731
+ viewBox="0 0 352 512"
1732
+ fill="currentColor"
1733
+ aria-hidden="true"
1734
+ role="img"
1735
+ width="1em"
1736
+ height="1em"
1737
+ >
1738
+ <path
1739
+ d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
1740
+ />
1741
+ </svg>
1730
1742
  </span>
1731
1743
  </button>
1732
1744
  </div>
@@ -2307,7 +2319,19 @@ wrapperTag: div
2307
2319
  aria-label="Scroll start"
2308
2320
  >
2309
2321
  <span class="pf-v6-c-button__icon">
2310
- <i class="fas fa-angle-left" aria-hidden="true"></i>
2322
+ <svg
2323
+ class="pf-v6-svg"
2324
+ viewBox="0 0 256 512"
2325
+ fill="currentColor"
2326
+ aria-hidden="true"
2327
+ role="img"
2328
+ width="1em"
2329
+ height="1em"
2330
+ >
2331
+ <path
2332
+ d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"
2333
+ />
2334
+ </svg>
2311
2335
  </span>
2312
2336
  </button>
2313
2337
  </div>
@@ -2349,7 +2373,19 @@ wrapperTag: div
2349
2373
  aria-label="Scroll end"
2350
2374
  >
2351
2375
  <span class="pf-v6-c-button__icon">
2352
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2376
+ <svg
2377
+ class="pf-v6-svg"
2378
+ viewBox="0 0 256 512"
2379
+ fill="currentColor"
2380
+ aria-hidden="true"
2381
+ role="img"
2382
+ width="1em"
2383
+ height="1em"
2384
+ >
2385
+ <path
2386
+ d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
2387
+ />
2388
+ </svg>
2353
2389
  </span>
2354
2390
  </button>
2355
2391
  </div>
package/docs/demos/Modal/examples/Modal.md CHANGED
@@ -337,7 +337,19 @@ section: components
337
337
  aria-label="Close"
338
338
  >
339
339
  <span class="pf-v6-c-button__icon">
340
- <i class="fas fa-times" aria-hidden="true"></i>
340
+ <svg
341
+ class="pf-v6-svg"
342
+ viewBox="0 0 352 512"
343
+ fill="currentColor"
344
+ aria-hidden="true"
345
+ role="img"
346
+ width="1em"
347
+ height="1em"
348
+ >
349
+ <path
350
+ d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
351
+ />
352
+ </svg>
341
353
  </span>
342
354
  </button>
343
355
  </div>
@@ -704,7 +716,19 @@ section: components
704
716
  aria-label="Close"
705
717
  >
706
718
  <span class="pf-v6-c-button__icon">
707
- <i class="fas fa-times" aria-hidden="true"></i>
719
+ <svg
720
+ class="pf-v6-svg"
721
+ viewBox="0 0 352 512"
722
+ fill="currentColor"
723
+ aria-hidden="true"
724
+ role="img"
725
+ width="1em"
726
+ height="1em"
727
+ >
728
+ <path
729
+ d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
730
+ />
731
+ </svg>
708
732
  </span>
709
733
  </button>
710
734
  </div>
@@ -1080,7 +1104,19 @@ section: components
1080
1104
  aria-label="Close"
1081
1105
  >
1082
1106
  <span class="pf-v6-c-button__icon">
1083
- <i class="fas fa-times" aria-hidden="true"></i>
1107
+ <svg
1108
+ class="pf-v6-svg"
1109
+ viewBox="0 0 352 512"
1110
+ fill="currentColor"
1111
+ aria-hidden="true"
1112
+ role="img"
1113
+ width="1em"
1114
+ height="1em"
1115
+ >
1116
+ <path
1117
+ d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
1118
+ />
1119
+ </svg>
1084
1120
  </span>
1085
1121
  </button>
1086
1122
  </div>
@@ -1446,7 +1482,19 @@ section: components
1446
1482
  aria-label="Close"
1447
1483
  >
1448
1484
  <span class="pf-v6-c-button__icon">
1449
- <i class="fas fa-times" aria-hidden="true"></i>
1485
+ <svg
1486
+ class="pf-v6-svg"
1487
+ viewBox="0 0 352 512"
1488
+ fill="currentColor"
1489
+ aria-hidden="true"
1490
+ role="img"
1491
+ width="1em"
1492
+ height="1em"
1493
+ >
1494
+ <path
1495
+ d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
1496
+ />
1497
+ </svg>
1450
1498
  </span>
1451
1499
  </button>
1452
1500
  </div>
@@ -1812,7 +1860,19 @@ section: components
1812
1860
  aria-label="Close"
1813
1861
  >
1814
1862
  <span class="pf-v6-c-button__icon">
1815
- <i class="fas fa-times" aria-hidden="true"></i>
1863
+ <svg
1864
+ class="pf-v6-svg"
1865
+ viewBox="0 0 352 512"
1866
+ fill="currentColor"
1867
+ aria-hidden="true"
1868
+ role="img"
1869
+ width="1em"
1870
+ height="1em"
1871
+ >
1872
+ <path
1873
+ d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
1874
+ />
1875
+ </svg>
1816
1876
  </span>
1817
1877
  </button>
1818
1878
  </div>
@@ -2178,7 +2238,19 @@ section: components
2178
2238
  aria-label="Close"
2179
2239
  >
2180
2240
  <span class="pf-v6-c-button__icon">
2181
- <i class="fas fa-times" aria-hidden="true"></i>
2241
+ <svg
2242
+ class="pf-v6-svg"
2243
+ viewBox="0 0 352 512"
2244
+ fill="currentColor"
2245
+ aria-hidden="true"
2246
+ role="img"
2247
+ width="1em"
2248
+ height="1em"
2249
+ >
2250
+ <path
2251
+ d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
2252
+ />
2253
+ </svg>
2182
2254
  </span>
2183
2255
  </button>
2184
2256
  </div>
package/docs/demos/Nav/examples/Nav.md CHANGED
@@ -1204,7 +1204,19 @@ section: components
1204
1204
  aria-label="Scroll start"
1205
1205
  >
1206
1206
  <span class="pf-v6-c-button__icon">
1207
- <i class="fas fa-angle-left" aria-hidden="true"></i>
1207
+ <svg
1208
+ class="pf-v6-svg"
1209
+ viewBox="0 0 256 512"
1210
+ fill="currentColor"
1211
+ aria-hidden="true"
1212
+ role="img"
1213
+ width="1em"
1214
+ height="1em"
1215
+ >
1216
+ <path
1217
+ d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"
1218
+ />
1219
+ </svg>
1208
1220
  </span>
1209
1221
  </button>
1210
1222
  </div>
@@ -1246,7 +1258,19 @@ section: components
1246
1258
  aria-label="Scroll end"
1247
1259
  >
1248
1260
  <span class="pf-v6-c-button__icon">
1249
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1261
+ <svg
1262
+ class="pf-v6-svg"
1263
+ viewBox="0 0 256 512"
1264
+ fill="currentColor"
1265
+ aria-hidden="true"
1266
+ role="img"
1267
+ width="1em"
1268
+ height="1em"
1269
+ >
1270
+ <path
1271
+ d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
1272
+ />
1273
+ </svg>
1250
1274
  </span>
1251
1275
  </button>
1252
1276
  </div>
@@ -1868,7 +1892,19 @@ section: components
1868
1892
  aria-label="Scroll start"
1869
1893
  >
1870
1894
  <span class="pf-v6-c-button__icon">
1871
- <i class="fas fa-angle-left" aria-hidden="true"></i>
1895
+ <svg
1896
+ class="pf-v6-svg"
1897
+ viewBox="0 0 256 512"
1898
+ fill="currentColor"
1899
+ aria-hidden="true"
1900
+ role="img"
1901
+ width="1em"
1902
+ height="1em"
1903
+ >
1904
+ <path
1905
+ d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"
1906
+ />
1907
+ </svg>
1872
1908
  </span>
1873
1909
  </button>
1874
1910
  </div>
@@ -1910,7 +1946,19 @@ section: components
1910
1946
  aria-label="Scroll end"
1911
1947
  >
1912
1948
  <span class="pf-v6-c-button__icon">
1913
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1949
+ <svg
1950
+ class="pf-v6-svg"
1951
+ viewBox="0 0 256 512"
1952
+ fill="currentColor"
1953
+ aria-hidden="true"
1954
+ role="img"
1955
+ width="1em"
1956
+ height="1em"
1957
+ >
1958
+ <path
1959
+ d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
1960
+ />
1961
+ </svg>
1914
1962
  </span>
1915
1963
  </button>
1916
1964
  </div>
package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md CHANGED
@@ -63,7 +63,19 @@ section: components
63
63
  aria-label="Show password"
64
64
  >
65
65
  <span class="pf-v6-c-button__icon">
66
- <i class="fas fa-eye" aria-hidden="true"></i>
66
+ <svg
67
+ class="pf-v6-svg"
68
+ viewBox="0 0 576 512"
69
+ fill="currentColor"
70
+ aria-hidden="true"
71
+ role="img"
72
+ width="1em"
73
+ height="1em"
74
+ >
75
+ <path
76
+ d="M572.52 241.4C518.29 135.59 410.93 64 288 64S57.68 135.64 3.48 241.41a32.35 32.35 0 0 0 0 29.19C57.71 376.41 165.07 448 288 448s230.32-71.64 284.52-177.41a32.35 32.35 0 0 0 0-29.19zM288 400a144 144 0 1 1 144-144 143.93 143.93 0 0 1-144 144zm0-240a95.31 95.31 0 0 0-25.31 3.79 47.85 47.85 0 0 1-66.9 66.9A95.78 95.78 0 1 0 288 160z"
77
+ />
78
+ </svg>
67
79
  </span>
68
80
  </button>
69
81
  </div>
package/docs/demos/PasswordStrength/examples/PasswordStrength.md CHANGED
@@ -39,7 +39,19 @@ section: components
39
39
  aria-label="Show password"
40
40
  >
41
41
  <span class="pf-v6-c-button__icon">
42
- <i class="fas fa-eye-slash" aria-hidden="true"></i>
42
+ <svg
43
+ class="pf-v6-svg"
44
+ viewBox="0 0 640 512"
45
+ fill="currentColor"
46
+ aria-hidden="true"
47
+ role="img"
48
+ width="1em"
49
+ height="1em"
50
+ >
51
+ <path
52
+ d="M320 400c-75.85 0-137.25-58.71-142.9-133.11L72.2 185.82c-13.79 17.3-26.48 35.59-36.72 55.59a32.35 32.35 0 0 0 0 29.19C89.71 376.41 197.07 448 320 448c26.91 0 52.87-4 77.89-10.46L346 397.39a144.13 144.13 0 0 1-26 2.61zm313.82 58.1l-110.55-85.44a331.25 331.25 0 0 0 81.25-102.07 32.35 32.35 0 0 0 0-29.19C550.29 135.59 442.93 64 320 64a308.15 308.15 0 0 0-147.32 37.7L45.46 3.37A16 16 0 0 0 23 6.18L3.37 31.45A16 16 0 0 0 6.18 53.9l588.36 454.73a16 16 0 0 0 22.46-2.81l19.64-25.27a16 16 0 0 0-2.82-22.45zm-183.72-142l-39.3-30.38A94.75 94.75 0 0 0 416 256a94.76 94.76 0 0 0-121.31-92.21A47.65 47.65 0 0 1 304 192a46.64 46.64 0 0 1-1.54 10l-73.61-56.89A142.31 142.31 0 0 1 320 112a143.92 143.92 0 0 1 144 144c0 21.63-5.29 41.79-13.9 60.11z"
53
+ />
54
+ </svg>
43
55
  </span>
44
56
  </button>
45
57
  </div>
@@ -123,7 +135,19 @@ section: components
123
135
  aria-label="Show password"
124
136
  >
125
137
  <span class="pf-v6-c-button__icon">
126
- <i class="fas fa-eye-slash" aria-hidden="true"></i>
138
+ <svg
139
+ class="pf-v6-svg"
140
+ viewBox="0 0 640 512"
141
+ fill="currentColor"
142
+ aria-hidden="true"
143
+ role="img"
144
+ width="1em"
145
+ height="1em"
146
+ >
147
+ <path
148
+ d="M320 400c-75.85 0-137.25-58.71-142.9-133.11L72.2 185.82c-13.79 17.3-26.48 35.59-36.72 55.59a32.35 32.35 0 0 0 0 29.19C89.71 376.41 197.07 448 320 448c26.91 0 52.87-4 77.89-10.46L346 397.39a144.13 144.13 0 0 1-26 2.61zm313.82 58.1l-110.55-85.44a331.25 331.25 0 0 0 81.25-102.07 32.35 32.35 0 0 0 0-29.19C550.29 135.59 442.93 64 320 64a308.15 308.15 0 0 0-147.32 37.7L45.46 3.37A16 16 0 0 0 23 6.18L3.37 31.45A16 16 0 0 0 6.18 53.9l588.36 454.73a16 16 0 0 0 22.46-2.81l19.64-25.27a16 16 0 0 0-2.82-22.45zm-183.72-142l-39.3-30.38A94.75 94.75 0 0 0 416 256a94.76 94.76 0 0 0-121.31-92.21A47.65 47.65 0 0 1 304 192a46.64 46.64 0 0 1-1.54 10l-73.61-56.89A142.31 142.31 0 0 1 320 112a143.92 143.92 0 0 1 144 144c0 21.63-5.29 41.79-13.9 60.11z"
149
+ />
150
+ </svg>
127
151
  </span>
128
152
  </button>
129
153
  </div>
@@ -213,7 +237,19 @@ section: components
213
237
  aria-label="Show password"
214
238
  >
215
239
  <span class="pf-v6-c-button__icon">
216
- <i class="fas fa-eye-slash" aria-hidden="true"></i>
240
+ <svg
241
+ class="pf-v6-svg"
242
+ viewBox="0 0 640 512"
243
+ fill="currentColor"
244
+ aria-hidden="true"
245
+ role="img"
246
+ width="1em"
247
+ height="1em"
248
+ >
249
+ <path
250
+ d="M320 400c-75.85 0-137.25-58.71-142.9-133.11L72.2 185.82c-13.79 17.3-26.48 35.59-36.72 55.59a32.35 32.35 0 0 0 0 29.19C89.71 376.41 197.07 448 320 448c26.91 0 52.87-4 77.89-10.46L346 397.39a144.13 144.13 0 0 1-26 2.61zm313.82 58.1l-110.55-85.44a331.25 331.25 0 0 0 81.25-102.07 32.35 32.35 0 0 0 0-29.19C550.29 135.59 442.93 64 320 64a308.15 308.15 0 0 0-147.32 37.7L45.46 3.37A16 16 0 0 0 23 6.18L3.37 31.45A16 16 0 0 0 6.18 53.9l588.36 454.73a16 16 0 0 0 22.46-2.81l19.64-25.27a16 16 0 0 0-2.82-22.45zm-183.72-142l-39.3-30.38A94.75 94.75 0 0 0 416 256a94.76 94.76 0 0 0-121.31-92.21A47.65 47.65 0 0 1 304 192a46.64 46.64 0 0 1-1.54 10l-73.61-56.89A142.31 142.31 0 0 1 320 112a143.92 143.92 0 0 1 144 144c0 21.63-5.29 41.79-13.9 60.11z"
251
+ />
252
+ </svg>
217
253
  </span>
218
254
  </button>
219
255
  </div>
@@ -303,7 +339,19 @@ section: components
303
339
  aria-label="Show password"
304
340
  >
305
341
  <span class="pf-v6-c-button__icon">
306
- <i class="fas fa-eye-slash" aria-hidden="true"></i>
342
+ <svg
343
+ class="pf-v6-svg"
344
+ viewBox="0 0 640 512"
345
+ fill="currentColor"
346
+ aria-hidden="true"
347
+ role="img"
348
+ width="1em"
349
+ height="1em"
350
+ >
351
+ <path
352
+ d="M320 400c-75.85 0-137.25-58.71-142.9-133.11L72.2 185.82c-13.79 17.3-26.48 35.59-36.72 55.59a32.35 32.35 0 0 0 0 29.19C89.71 376.41 197.07 448 320 448c26.91 0 52.87-4 77.89-10.46L346 397.39a144.13 144.13 0 0 1-26 2.61zm313.82 58.1l-110.55-85.44a331.25 331.25 0 0 0 81.25-102.07 32.35 32.35 0 0 0 0-29.19C550.29 135.59 442.93 64 320 64a308.15 308.15 0 0 0-147.32 37.7L45.46 3.37A16 16 0 0 0 23 6.18L3.37 31.45A16 16 0 0 0 6.18 53.9l588.36 454.73a16 16 0 0 0 22.46-2.81l19.64-25.27a16 16 0 0 0-2.82-22.45zm-183.72-142l-39.3-30.38A94.75 94.75 0 0 0 416 256a94.76 94.76 0 0 0-121.31-92.21A47.65 47.65 0 0 1 304 192a46.64 46.64 0 0 1-1.54 10l-73.61-56.89A142.31 142.31 0 0 1 320 112a143.92 143.92 0 0 1 144 144c0 21.63-5.29 41.79-13.9 60.11z"
353
+ />
354
+ </svg>
307
355
  </span>
308
356
  </button>
309
357
  </div>