@patternfly/patternfly 6.5.0-prerelease.62 → 6.5.0-prerelease.63

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 (51) hide show
  1. package/components/Button/button.css +2 -2
  2. package/components/Button/button.scss +3 -3
  3. package/components/Menu/menu.css +26 -19
  4. package/components/Menu/menu.scss +26 -19
  5. package/components/MenuToggle/menu-toggle.css +9 -5
  6. package/components/MenuToggle/menu-toggle.scss +12 -5
  7. package/components/_index.css +37 -26
  8. package/docs/components/Breadcrumb/examples/Breadcrumb.md +13 -1
  9. package/docs/components/CalendarMonth/examples/CalendarMonth.md +52 -4
  10. package/docs/components/Card/examples/Card.md +130 -10
  11. package/docs/components/DataList/examples/DataList.md +221 -17
  12. package/docs/components/DualListSelector/examples/DualListSelector.md +234 -18
  13. package/docs/components/Hint/examples/Hint.md +39 -3
  14. package/docs/components/InlineEdit/examples/InlineEdit.md +26 -2
  15. package/docs/components/InputGroup/examples/InputGroup.md +13 -1
  16. package/docs/components/Login/examples/Login.md +13 -1
  17. package/docs/components/Menu/examples/Menu.md +195 -15
  18. package/docs/components/MenuToggle/examples/MenuToggle.md +1331 -100
  19. package/docs/components/NotificationDrawer/examples/NotificationDrawer.md +481 -37
  20. package/docs/components/OverflowMenu/examples/overflow-menu.md +65 -5
  21. package/docs/components/Pagination/examples/Pagination.md +169 -13
  22. package/docs/components/Table/examples/Table.md +3461 -269
  23. package/docs/components/Toolbar/examples/Toolbar.md +507 -39
  24. package/docs/demos/AboutModal/examples/AboutModal.md +26 -2
  25. package/docs/demos/Alert/examples/Alert.md +78 -6
  26. package/docs/demos/BackToTop/examples/BackToTop.md +26 -2
  27. package/docs/demos/Banner/examples/Banner.md +52 -4
  28. package/docs/demos/Card/examples/Card.md +78 -6
  29. package/docs/demos/CardView/examples/CardView.md +206 -20
  30. package/docs/demos/Compass/examples/Compass.md +431 -56
  31. package/docs/demos/Dashboard/examples/Dashboard.md +63 -9
  32. package/docs/demos/DataList/examples/DataList.md +369 -45
  33. package/docs/demos/DescriptionList/examples/DescriptionList.md +91 -7
  34. package/docs/demos/Drawer/examples/Drawer.md +143 -11
  35. package/docs/demos/JumpLinks/examples/JumpLinks.md +156 -12
  36. package/docs/demos/Masthead/examples/Masthead.md +156 -12
  37. package/docs/demos/Modal/examples/Modal.md +156 -12
  38. package/docs/demos/Nav/examples/Nav.md +104 -8
  39. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +975 -75
  40. package/docs/demos/Page/examples/Page.md +390 -30
  41. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +593 -83
  42. package/docs/demos/Skeleton/examples/Skeleton.md +26 -2
  43. package/docs/demos/Table/examples/Table.md +2518 -322
  44. package/docs/demos/Tabs/examples/Tabs.md +247 -19
  45. package/docs/demos/Toolbar/examples/Toolbar.md +659 -59
  46. package/docs/demos/Wizard/examples/Wizard.md +234 -18
  47. package/package.json +1 -1
  48. package/patternfly-no-globals.css +37 -26
  49. package/patternfly.css +37 -26
  50. package/patternfly.min.css +1 -1
  51. package/patternfly.min.css.map +1 -1
package/docs/components/Toolbar/examples/Toolbar.md CHANGED
@@ -202,7 +202,19 @@ Several components in the following examples do not include functional and/or ac
202
202
  <span class="pf-v6-c-menu-toggle__text">Status</span>
203
203
  <span class="pf-v6-c-menu-toggle__controls">
204
204
  <span class="pf-v6-c-menu-toggle__toggle-icon">
205
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
205
+ <svg
206
+ class="pf-v6-svg"
207
+ viewBox="0 0 20 20"
208
+ fill="currentColor"
209
+ aria-hidden="true"
210
+ role="img"
211
+ width="1em"
212
+ height="1em"
213
+ >
214
+ <path
215
+ d="M18.92 5.62C18.77 5.25 18.4 5 18 5H2a1.003 1.003 0 0 0-.71 1.71l7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65c.29-.29.37-.72.22-1.09Z"
216
+ />
217
+ </svg>
206
218
  </span>
207
219
  </span>
208
220
  </button>
@@ -217,7 +229,19 @@ Several components in the following examples do not include functional and/or ac
217
229
  <span class="pf-v6-c-menu-toggle__text">Risk</span>
218
230
  <span class="pf-v6-c-menu-toggle__controls">
219
231
  <span class="pf-v6-c-menu-toggle__toggle-icon">
220
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
232
+ <svg
233
+ class="pf-v6-svg"
234
+ viewBox="0 0 20 20"
235
+ fill="currentColor"
236
+ aria-hidden="true"
237
+ role="img"
238
+ width="1em"
239
+ height="1em"
240
+ >
241
+ <path
242
+ d="M18.92 5.62C18.77 5.25 18.4 5 18 5H2a1.003 1.003 0 0 0-.71 1.71l7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65c.29-.29.37-.72.22-1.09Z"
243
+ />
244
+ </svg>
221
245
  </span>
222
246
  </span>
223
247
  </button>
@@ -245,7 +269,19 @@ Several components in the following examples do not include functional and/or ac
245
269
  <span class="pf-v6-c-menu-toggle__text">Name</span>
246
270
  <span class="pf-v6-c-menu-toggle__controls">
247
271
  <span class="pf-v6-c-menu-toggle__toggle-icon">
248
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
272
+ <svg
273
+ class="pf-v6-svg"
274
+ viewBox="0 0 20 20"
275
+ fill="currentColor"
276
+ aria-hidden="true"
277
+ role="img"
278
+ width="1em"
279
+ height="1em"
280
+ >
281
+ <path
282
+ d="M18.92 5.62C18.77 5.25 18.4 5 18 5H2a1.003 1.003 0 0 0-.71 1.71l7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65c.29-.29.37-.72.22-1.09Z"
283
+ />
284
+ </svg>
249
285
  </span>
250
286
  </span>
251
287
  </button>
@@ -281,7 +317,19 @@ Several components in the following examples do not include functional and/or ac
281
317
  <span class="pf-v6-c-menu-toggle__text">Status</span>
282
318
  <span class="pf-v6-c-menu-toggle__controls">
283
319
  <span class="pf-v6-c-menu-toggle__toggle-icon">
284
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
320
+ <svg
321
+ class="pf-v6-svg"
322
+ viewBox="0 0 20 20"
323
+ fill="currentColor"
324
+ aria-hidden="true"
325
+ role="img"
326
+ width="1em"
327
+ height="1em"
328
+ >
329
+ <path
330
+ d="M18.92 5.62C18.77 5.25 18.4 5 18 5H2a1.003 1.003 0 0 0-.71 1.71l7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65c.29-.29.37-.72.22-1.09Z"
331
+ />
332
+ </svg>
285
333
  </span>
286
334
  </span>
287
335
  </button>
@@ -724,7 +772,19 @@ Several components in the following examples do not include functional and/or ac
724
772
  <span class="pf-v6-c-menu-toggle__text">Name</span>
725
773
  <span class="pf-v6-c-menu-toggle__controls">
726
774
  <span class="pf-v6-c-menu-toggle__toggle-icon">
727
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
775
+ <svg
776
+ class="pf-v6-svg"
777
+ viewBox="0 0 20 20"
778
+ fill="currentColor"
779
+ aria-hidden="true"
780
+ role="img"
781
+ width="1em"
782
+ height="1em"
783
+ >
784
+ <path
785
+ d="M18.92 5.62C18.77 5.25 18.4 5 18 5H2a1.003 1.003 0 0 0-.71 1.71l7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65c.29-.29.37-.72.22-1.09Z"
786
+ />
787
+ </svg>
728
788
  </span>
729
789
  </span>
730
790
  </button>
@@ -761,7 +821,19 @@ Several components in the following examples do not include functional and/or ac
761
821
  <span class="pf-v6-c-menu-toggle__text">Status</span>
762
822
  <span class="pf-v6-c-menu-toggle__controls">
763
823
  <span class="pf-v6-c-menu-toggle__toggle-icon">
764
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
824
+ <svg
825
+ class="pf-v6-svg"
826
+ viewBox="0 0 20 20"
827
+ fill="currentColor"
828
+ aria-hidden="true"
829
+ role="img"
830
+ width="1em"
831
+ height="1em"
832
+ >
833
+ <path
834
+ d="M18.92 5.62C18.77 5.25 18.4 5 18 5H2a1.003 1.003 0 0 0-.71 1.71l7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65c.29-.29.37-.72.22-1.09Z"
835
+ />
836
+ </svg>
765
837
  </span>
766
838
  </span>
767
839
  </button>
@@ -776,7 +848,19 @@ Several components in the following examples do not include functional and/or ac
776
848
  <span class="pf-v6-c-menu-toggle__text">Risk</span>
777
849
  <span class="pf-v6-c-menu-toggle__controls">
778
850
  <span class="pf-v6-c-menu-toggle__toggle-icon">
779
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
851
+ <svg
852
+ class="pf-v6-svg"
853
+ viewBox="0 0 20 20"
854
+ fill="currentColor"
855
+ aria-hidden="true"
856
+ role="img"
857
+ width="1em"
858
+ height="1em"
859
+ >
860
+ <path
861
+ d="M18.92 5.62C18.77 5.25 18.4 5 18 5H2a1.003 1.003 0 0 0-.71 1.71l7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65c.29-.29.37-.72.22-1.09Z"
862
+ />
863
+ </svg>
780
864
  </span>
781
865
  </span>
782
866
  </button>
@@ -805,7 +889,19 @@ Several components in the following examples do not include functional and/or ac
805
889
  <span class="pf-v6-c-menu-toggle__text">Name</span>
806
890
  <span class="pf-v6-c-menu-toggle__controls">
807
891
  <span class="pf-v6-c-menu-toggle__toggle-icon">
808
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
892
+ <svg
893
+ class="pf-v6-svg"
894
+ viewBox="0 0 20 20"
895
+ fill="currentColor"
896
+ aria-hidden="true"
897
+ role="img"
898
+ width="1em"
899
+ height="1em"
900
+ >
901
+ <path
902
+ d="M18.92 5.62C18.77 5.25 18.4 5 18 5H2a1.003 1.003 0 0 0-.71 1.71l7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65c.29-.29.37-.72.22-1.09Z"
903
+ />
904
+ </svg>
809
905
  </span>
810
906
  </span>
811
907
  </button>
@@ -842,7 +938,19 @@ Several components in the following examples do not include functional and/or ac
842
938
  <span class="pf-v6-c-menu-toggle__text">Status</span>
843
939
  <span class="pf-v6-c-menu-toggle__controls">
844
940
  <span class="pf-v6-c-menu-toggle__toggle-icon">
845
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
941
+ <svg
942
+ class="pf-v6-svg"
943
+ viewBox="0 0 20 20"
944
+ fill="currentColor"
945
+ aria-hidden="true"
946
+ role="img"
947
+ width="1em"
948
+ height="1em"
949
+ >
950
+ <path
951
+ d="M18.92 5.62C18.77 5.25 18.4 5 18 5H2a1.003 1.003 0 0 0-.71 1.71l7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65c.29-.29.37-.72.22-1.09Z"
952
+ />
953
+ </svg>
846
954
  </span>
847
955
  </span>
848
956
  </button>
@@ -857,7 +965,19 @@ Several components in the following examples do not include functional and/or ac
857
965
  <span class="pf-v6-c-menu-toggle__text">Risk</span>
858
966
  <span class="pf-v6-c-menu-toggle__controls">
859
967
  <span class="pf-v6-c-menu-toggle__toggle-icon">
860
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
968
+ <svg
969
+ class="pf-v6-svg"
970
+ viewBox="0 0 20 20"
971
+ fill="currentColor"
972
+ aria-hidden="true"
973
+ role="img"
974
+ width="1em"
975
+ height="1em"
976
+ >
977
+ <path
978
+ d="M18.92 5.62C18.77 5.25 18.4 5 18 5H2a1.003 1.003 0 0 0-.71 1.71l7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65c.29-.29.37-.72.22-1.09Z"
979
+ />
980
+ </svg>
861
981
  </span>
862
982
  </span>
863
983
  </button>
@@ -905,7 +1025,19 @@ Several components in the following examples do not include functional and/or ac
905
1025
  <span class="pf-v6-c-menu-toggle__text">Name</span>
906
1026
  <span class="pf-v6-c-menu-toggle__controls">
907
1027
  <span class="pf-v6-c-menu-toggle__toggle-icon">
908
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
1028
+ <svg
1029
+ class="pf-v6-svg"
1030
+ viewBox="0 0 20 20"
1031
+ fill="currentColor"
1032
+ aria-hidden="true"
1033
+ role="img"
1034
+ width="1em"
1035
+ height="1em"
1036
+ >
1037
+ <path
1038
+ d="M18.92 5.62C18.77 5.25 18.4 5 18 5H2a1.003 1.003 0 0 0-.71 1.71l7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65c.29-.29.37-.72.22-1.09Z"
1039
+ />
1040
+ </svg>
909
1041
  </span>
910
1042
  </span>
911
1043
  </button>
@@ -944,7 +1076,19 @@ Several components in the following examples do not include functional and/or ac
944
1076
  <span class="pf-v6-c-menu-toggle__text">Status</span>
945
1077
  <span class="pf-v6-c-menu-toggle__controls">
946
1078
  <span class="pf-v6-c-menu-toggle__toggle-icon">
947
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
1079
+ <svg
1080
+ class="pf-v6-svg"
1081
+ viewBox="0 0 20 20"
1082
+ fill="currentColor"
1083
+ aria-hidden="true"
1084
+ role="img"
1085
+ width="1em"
1086
+ height="1em"
1087
+ >
1088
+ <path
1089
+ d="M18.92 5.62C18.77 5.25 18.4 5 18 5H2a1.003 1.003 0 0 0-.71 1.71l7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65c.29-.29.37-.72.22-1.09Z"
1090
+ />
1091
+ </svg>
948
1092
  </span>
949
1093
  </span>
950
1094
  </button>
@@ -959,7 +1103,19 @@ Several components in the following examples do not include functional and/or ac
959
1103
  <span class="pf-v6-c-menu-toggle__text">Risk</span>
960
1104
  <span class="pf-v6-c-menu-toggle__controls">
961
1105
  <span class="pf-v6-c-menu-toggle__toggle-icon">
962
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
1106
+ <svg
1107
+ class="pf-v6-svg"
1108
+ viewBox="0 0 20 20"
1109
+ fill="currentColor"
1110
+ aria-hidden="true"
1111
+ role="img"
1112
+ width="1em"
1113
+ height="1em"
1114
+ >
1115
+ <path
1116
+ d="M18.92 5.62C18.77 5.25 18.4 5 18 5H2a1.003 1.003 0 0 0-.71 1.71l7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65c.29-.29.37-.72.22-1.09Z"
1117
+ />
1118
+ </svg>
963
1119
  </span>
964
1120
  </span>
965
1121
  </button>
@@ -989,7 +1145,19 @@ Several components in the following examples do not include functional and/or ac
989
1145
  <span class="pf-v6-c-menu-toggle__text">Name</span>
990
1146
  <span class="pf-v6-c-menu-toggle__controls">
991
1147
  <span class="pf-v6-c-menu-toggle__toggle-icon">
992
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
1148
+ <svg
1149
+ class="pf-v6-svg"
1150
+ viewBox="0 0 20 20"
1151
+ fill="currentColor"
1152
+ aria-hidden="true"
1153
+ role="img"
1154
+ width="1em"
1155
+ height="1em"
1156
+ >
1157
+ <path
1158
+ d="M18.92 5.62C18.77 5.25 18.4 5 18 5H2a1.003 1.003 0 0 0-.71 1.71l7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65c.29-.29.37-.72.22-1.09Z"
1159
+ />
1160
+ </svg>
993
1161
  </span>
994
1162
  </span>
995
1163
  </button>
@@ -1026,7 +1194,19 @@ Several components in the following examples do not include functional and/or ac
1026
1194
  <span class="pf-v6-c-menu-toggle__text">Status</span>
1027
1195
  <span class="pf-v6-c-menu-toggle__controls">
1028
1196
  <span class="pf-v6-c-menu-toggle__toggle-icon">
1029
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
1197
+ <svg
1198
+ class="pf-v6-svg"
1199
+ viewBox="0 0 20 20"
1200
+ fill="currentColor"
1201
+ aria-hidden="true"
1202
+ role="img"
1203
+ width="1em"
1204
+ height="1em"
1205
+ >
1206
+ <path
1207
+ d="M18.92 5.62C18.77 5.25 18.4 5 18 5H2a1.003 1.003 0 0 0-.71 1.71l7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65c.29-.29.37-.72.22-1.09Z"
1208
+ />
1209
+ </svg>
1030
1210
  </span>
1031
1211
  </span>
1032
1212
  </button>
@@ -1041,7 +1221,19 @@ Several components in the following examples do not include functional and/or ac
1041
1221
  <span class="pf-v6-c-menu-toggle__text">Risk</span>
1042
1222
  <span class="pf-v6-c-menu-toggle__controls">
1043
1223
  <span class="pf-v6-c-menu-toggle__toggle-icon">
1044
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
1224
+ <svg
1225
+ class="pf-v6-svg"
1226
+ viewBox="0 0 20 20"
1227
+ fill="currentColor"
1228
+ aria-hidden="true"
1229
+ role="img"
1230
+ width="1em"
1231
+ height="1em"
1232
+ >
1233
+ <path
1234
+ d="M18.92 5.62C18.77 5.25 18.4 5 18 5H2a1.003 1.003 0 0 0-.71 1.71l7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65c.29-.29.37-.72.22-1.09Z"
1235
+ />
1236
+ </svg>
1045
1237
  </span>
1046
1238
  </span>
1047
1239
  </button>
@@ -1122,7 +1314,19 @@ Several components in the following examples do not include functional and/or ac
1122
1314
  >
1123
1315
  <span class="pf-v6-c-menu-toggle__controls">
1124
1316
  <span class="pf-v6-c-menu-toggle__toggle-icon">
1125
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
1317
+ <svg
1318
+ class="pf-v6-svg"
1319
+ viewBox="0 0 20 20"
1320
+ fill="currentColor"
1321
+ aria-hidden="true"
1322
+ role="img"
1323
+ width="1em"
1324
+ height="1em"
1325
+ >
1326
+ <path
1327
+ d="M18.92 5.62C18.77 5.25 18.4 5 18 5H2a1.003 1.003 0 0 0-.71 1.71l7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65c.29-.29.37-.72.22-1.09Z"
1328
+ />
1329
+ </svg>
1126
1330
  </span>
1127
1331
  </span>
1128
1332
  </button>
@@ -1159,7 +1363,19 @@ Several components in the following examples do not include functional and/or ac
1159
1363
  <span class="pf-v6-c-menu-toggle__text">Name</span>
1160
1364
  <span class="pf-v6-c-menu-toggle__controls">
1161
1365
  <span class="pf-v6-c-menu-toggle__toggle-icon">
1162
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
1366
+ <svg
1367
+ class="pf-v6-svg"
1368
+ viewBox="0 0 20 20"
1369
+ fill="currentColor"
1370
+ aria-hidden="true"
1371
+ role="img"
1372
+ width="1em"
1373
+ height="1em"
1374
+ >
1375
+ <path
1376
+ d="M18.92 5.62C18.77 5.25 18.4 5 18 5H2a1.003 1.003 0 0 0-.71 1.71l7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65c.29-.29.37-.72.22-1.09Z"
1377
+ />
1378
+ </svg>
1163
1379
  </span>
1164
1380
  </span>
1165
1381
  </button>
@@ -1196,7 +1412,19 @@ Several components in the following examples do not include functional and/or ac
1196
1412
  <span class="pf-v6-c-menu-toggle__text">Status</span>
1197
1413
  <span class="pf-v6-c-menu-toggle__controls">
1198
1414
  <span class="pf-v6-c-menu-toggle__toggle-icon">
1199
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
1415
+ <svg
1416
+ class="pf-v6-svg"
1417
+ viewBox="0 0 20 20"
1418
+ fill="currentColor"
1419
+ aria-hidden="true"
1420
+ role="img"
1421
+ width="1em"
1422
+ height="1em"
1423
+ >
1424
+ <path
1425
+ d="M18.92 5.62C18.77 5.25 18.4 5 18 5H2a1.003 1.003 0 0 0-.71 1.71l7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65c.29-.29.37-.72.22-1.09Z"
1426
+ />
1427
+ </svg>
1200
1428
  </span>
1201
1429
  </span>
1202
1430
  </button>
@@ -1211,7 +1439,19 @@ Several components in the following examples do not include functional and/or ac
1211
1439
  <span class="pf-v6-c-menu-toggle__text">Risk</span>
1212
1440
  <span class="pf-v6-c-menu-toggle__controls">
1213
1441
  <span class="pf-v6-c-menu-toggle__toggle-icon">
1214
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
1442
+ <svg
1443
+ class="pf-v6-svg"
1444
+ viewBox="0 0 20 20"
1445
+ fill="currentColor"
1446
+ aria-hidden="true"
1447
+ role="img"
1448
+ width="1em"
1449
+ height="1em"
1450
+ >
1451
+ <path
1452
+ d="M18.92 5.62C18.77 5.25 18.4 5 18 5H2a1.003 1.003 0 0 0-.71 1.71l7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65c.29-.29.37-.72.22-1.09Z"
1453
+ />
1454
+ </svg>
1215
1455
  </span>
1216
1456
  </span>
1217
1457
  </button>
@@ -1294,7 +1534,19 @@ Several components in the following examples do not include functional and/or ac
1294
1534
  >
1295
1535
  <span class="pf-v6-c-menu-toggle__controls">
1296
1536
  <span class="pf-v6-c-menu-toggle__toggle-icon">
1297
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
1537
+ <svg
1538
+ class="pf-v6-svg"
1539
+ viewBox="0 0 20 20"
1540
+ fill="currentColor"
1541
+ aria-hidden="true"
1542
+ role="img"
1543
+ width="1em"
1544
+ height="1em"
1545
+ >
1546
+ <path
1547
+ d="M18.92 5.62C18.77 5.25 18.4 5 18 5H2a1.003 1.003 0 0 0-.71 1.71l7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65c.29-.29.37-.72.22-1.09Z"
1548
+ />
1549
+ </svg>
1298
1550
  </span>
1299
1551
  </span>
1300
1552
  </button>
@@ -1331,7 +1583,19 @@ Several components in the following examples do not include functional and/or ac
1331
1583
  <span class="pf-v6-c-menu-toggle__text">Name</span>
1332
1584
  <span class="pf-v6-c-menu-toggle__controls">
1333
1585
  <span class="pf-v6-c-menu-toggle__toggle-icon">
1334
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
1586
+ <svg
1587
+ class="pf-v6-svg"
1588
+ viewBox="0 0 20 20"
1589
+ fill="currentColor"
1590
+ aria-hidden="true"
1591
+ role="img"
1592
+ width="1em"
1593
+ height="1em"
1594
+ >
1595
+ <path
1596
+ d="M18.92 5.62C18.77 5.25 18.4 5 18 5H2a1.003 1.003 0 0 0-.71 1.71l7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65c.29-.29.37-.72.22-1.09Z"
1597
+ />
1598
+ </svg>
1335
1599
  </span>
1336
1600
  </span>
1337
1601
  </button>
@@ -1368,7 +1632,19 @@ Several components in the following examples do not include functional and/or ac
1368
1632
  <span class="pf-v6-c-menu-toggle__text">Status</span>
1369
1633
  <span class="pf-v6-c-menu-toggle__controls">
1370
1634
  <span class="pf-v6-c-menu-toggle__toggle-icon">
1371
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
1635
+ <svg
1636
+ class="pf-v6-svg"
1637
+ viewBox="0 0 20 20"
1638
+ fill="currentColor"
1639
+ aria-hidden="true"
1640
+ role="img"
1641
+ width="1em"
1642
+ height="1em"
1643
+ >
1644
+ <path
1645
+ d="M18.92 5.62C18.77 5.25 18.4 5 18 5H2a1.003 1.003 0 0 0-.71 1.71l7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65c.29-.29.37-.72.22-1.09Z"
1646
+ />
1647
+ </svg>
1372
1648
  </span>
1373
1649
  </span>
1374
1650
  </button>
@@ -1383,7 +1659,19 @@ Several components in the following examples do not include functional and/or ac
1383
1659
  <span class="pf-v6-c-menu-toggle__text">Risk</span>
1384
1660
  <span class="pf-v6-c-menu-toggle__controls">
1385
1661
  <span class="pf-v6-c-menu-toggle__toggle-icon">
1386
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
1662
+ <svg
1663
+ class="pf-v6-svg"
1664
+ viewBox="0 0 20 20"
1665
+ fill="currentColor"
1666
+ aria-hidden="true"
1667
+ role="img"
1668
+ width="1em"
1669
+ height="1em"
1670
+ >
1671
+ <path
1672
+ d="M18.92 5.62C18.77 5.25 18.4 5 18 5H2a1.003 1.003 0 0 0-.71 1.71l7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65c.29-.29.37-.72.22-1.09Z"
1673
+ />
1674
+ </svg>
1387
1675
  </span>
1388
1676
  </span>
1389
1677
  </button>
@@ -1412,7 +1700,19 @@ Several components in the following examples do not include functional and/or ac
1412
1700
  <span class="pf-v6-c-menu-toggle__text">Name</span>
1413
1701
  <span class="pf-v6-c-menu-toggle__controls">
1414
1702
  <span class="pf-v6-c-menu-toggle__toggle-icon">
1415
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
1703
+ <svg
1704
+ class="pf-v6-svg"
1705
+ viewBox="0 0 20 20"
1706
+ fill="currentColor"
1707
+ aria-hidden="true"
1708
+ role="img"
1709
+ width="1em"
1710
+ height="1em"
1711
+ >
1712
+ <path
1713
+ d="M18.92 5.62C18.77 5.25 18.4 5 18 5H2a1.003 1.003 0 0 0-.71 1.71l7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65c.29-.29.37-.72.22-1.09Z"
1714
+ />
1715
+ </svg>
1416
1716
  </span>
1417
1717
  </span>
1418
1718
  </button>
@@ -1449,7 +1749,19 @@ Several components in the following examples do not include functional and/or ac
1449
1749
  <span class="pf-v6-c-menu-toggle__text">Status</span>
1450
1750
  <span class="pf-v6-c-menu-toggle__controls">
1451
1751
  <span class="pf-v6-c-menu-toggle__toggle-icon">
1452
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
1752
+ <svg
1753
+ class="pf-v6-svg"
1754
+ viewBox="0 0 20 20"
1755
+ fill="currentColor"
1756
+ aria-hidden="true"
1757
+ role="img"
1758
+ width="1em"
1759
+ height="1em"
1760
+ >
1761
+ <path
1762
+ d="M18.92 5.62C18.77 5.25 18.4 5 18 5H2a1.003 1.003 0 0 0-.71 1.71l7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65c.29-.29.37-.72.22-1.09Z"
1763
+ />
1764
+ </svg>
1453
1765
  </span>
1454
1766
  </span>
1455
1767
  </button>
@@ -1464,7 +1776,19 @@ Several components in the following examples do not include functional and/or ac
1464
1776
  <span class="pf-v6-c-menu-toggle__text">Risk</span>
1465
1777
  <span class="pf-v6-c-menu-toggle__controls">
1466
1778
  <span class="pf-v6-c-menu-toggle__toggle-icon">
1467
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
1779
+ <svg
1780
+ class="pf-v6-svg"
1781
+ viewBox="0 0 20 20"
1782
+ fill="currentColor"
1783
+ aria-hidden="true"
1784
+ role="img"
1785
+ width="1em"
1786
+ height="1em"
1787
+ >
1788
+ <path
1789
+ d="M18.92 5.62C18.77 5.25 18.4 5 18 5H2a1.003 1.003 0 0 0-.71 1.71l7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65c.29-.29.37-.72.22-1.09Z"
1790
+ />
1791
+ </svg>
1468
1792
  </span>
1469
1793
  </span>
1470
1794
  </button>
@@ -1783,7 +2107,19 @@ Several components in the following examples do not include functional and/or ac
1783
2107
  >
1784
2108
  <span class="pf-v6-c-menu-toggle__controls">
1785
2109
  <span class="pf-v6-c-menu-toggle__toggle-icon">
1786
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
2110
+ <svg
2111
+ class="pf-v6-svg"
2112
+ viewBox="0 0 20 20"
2113
+ fill="currentColor"
2114
+ aria-hidden="true"
2115
+ role="img"
2116
+ width="1em"
2117
+ height="1em"
2118
+ >
2119
+ <path
2120
+ d="M18.92 5.62C18.77 5.25 18.4 5 18 5H2a1.003 1.003 0 0 0-.71 1.71l7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65c.29-.29.37-.72.22-1.09Z"
2121
+ />
2122
+ </svg>
1787
2123
  </span>
1788
2124
  </span>
1789
2125
  </button>
@@ -1801,7 +2137,19 @@ Several components in the following examples do not include functional and/or ac
1801
2137
  <span class="pf-v6-c-menu-toggle__text">Status</span>
1802
2138
  <span class="pf-v6-c-menu-toggle__controls">
1803
2139
  <span class="pf-v6-c-menu-toggle__toggle-icon">
1804
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
2140
+ <svg
2141
+ class="pf-v6-svg"
2142
+ viewBox="0 0 20 20"
2143
+ fill="currentColor"
2144
+ aria-hidden="true"
2145
+ role="img"
2146
+ width="1em"
2147
+ height="1em"
2148
+ >
2149
+ <path
2150
+ d="M18.92 5.62C18.77 5.25 18.4 5 18 5H2a1.003 1.003 0 0 0-.71 1.71l7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65c.29-.29.37-.72.22-1.09Z"
2151
+ />
2152
+ </svg>
1805
2153
  </span>
1806
2154
  </span>
1807
2155
  </button>
@@ -1816,7 +2164,19 @@ Several components in the following examples do not include functional and/or ac
1816
2164
  <span class="pf-v6-c-menu-toggle__text">Risk</span>
1817
2165
  <span class="pf-v6-c-menu-toggle__controls">
1818
2166
  <span class="pf-v6-c-menu-toggle__toggle-icon">
1819
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
2167
+ <svg
2168
+ class="pf-v6-svg"
2169
+ viewBox="0 0 20 20"
2170
+ fill="currentColor"
2171
+ aria-hidden="true"
2172
+ role="img"
2173
+ width="1em"
2174
+ height="1em"
2175
+ >
2176
+ <path
2177
+ d="M18.92 5.62C18.77 5.25 18.4 5 18 5H2a1.003 1.003 0 0 0-.71 1.71l7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65c.29-.29.37-.72.22-1.09Z"
2178
+ />
2179
+ </svg>
1820
2180
  </span>
1821
2181
  </span>
1822
2182
  </button>
@@ -1851,7 +2211,19 @@ Several components in the following examples do not include functional and/or ac
1851
2211
  id="toolbar-selected-filters-example-overflow-toggle"
1852
2212
  >
1853
2213
  <span class="pf-v6-c-menu-toggle__icon">
1854
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
2214
+ <svg
2215
+ class="pf-v6-svg"
2216
+ viewBox="0 0 32 32"
2217
+ fill="currentColor"
2218
+ aria-hidden="true"
2219
+ role="img"
2220
+ width="1em"
2221
+ height="1em"
2222
+ >
2223
+ <path
2224
+ d="M12.25 5c0-2.068 1.683-3.75 3.75-3.75S19.75 2.932 19.75 5 18.067 8.75 16 8.75 12.25 7.068 12.25 5ZM16 12.25c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Zm0 11c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Z"
2225
+ />
2226
+ </svg>
1855
2227
  </span>
1856
2228
  </button>
1857
2229
  </div>
@@ -2175,7 +2547,19 @@ Several components in the following examples do not include functional and/or ac
2175
2547
  id="toolbar-stacked-example-overflow-toggle"
2176
2548
  >
2177
2549
  <span class="pf-v6-c-menu-toggle__icon">
2178
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
2550
+ <svg
2551
+ class="pf-v6-svg"
2552
+ viewBox="0 0 32 32"
2553
+ fill="currentColor"
2554
+ aria-hidden="true"
2555
+ role="img"
2556
+ width="1em"
2557
+ height="1em"
2558
+ >
2559
+ <path
2560
+ d="M12.25 5c0-2.068 1.683-3.75 3.75-3.75S19.75 2.932 19.75 5 18.067 8.75 16 8.75 12.25 7.068 12.25 5ZM16 12.25c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Zm0 11c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Z"
2561
+ />
2562
+ </svg>
2179
2563
  </span>
2180
2564
  </button>
2181
2565
  </div>
@@ -2213,7 +2597,19 @@ Several components in the following examples do not include functional and/or ac
2213
2597
  >
2214
2598
  <span class="pf-v6-c-menu-toggle__controls">
2215
2599
  <span class="pf-v6-c-menu-toggle__toggle-icon">
2216
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
2600
+ <svg
2601
+ class="pf-v6-svg"
2602
+ viewBox="0 0 20 20"
2603
+ fill="currentColor"
2604
+ aria-hidden="true"
2605
+ role="img"
2606
+ width="1em"
2607
+ height="1em"
2608
+ >
2609
+ <path
2610
+ d="M18.92 5.62C18.77 5.25 18.4 5 18 5H2a1.003 1.003 0 0 0-.71 1.71l7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65c.29-.29.37-.72.22-1.09Z"
2611
+ />
2612
+ </svg>
2217
2613
  </span>
2218
2614
  </span>
2219
2615
  </button>
@@ -2235,7 +2631,19 @@ Several components in the following examples do not include functional and/or ac
2235
2631
  </span>
2236
2632
  <span class="pf-v6-c-menu-toggle__controls">
2237
2633
  <span class="pf-v6-c-menu-toggle__toggle-icon">
2238
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
2634
+ <svg
2635
+ class="pf-v6-svg"
2636
+ viewBox="0 0 20 20"
2637
+ fill="currentColor"
2638
+ aria-hidden="true"
2639
+ role="img"
2640
+ width="1em"
2641
+ height="1em"
2642
+ >
2643
+ <path
2644
+ d="M18.92 5.62C18.77 5.25 18.4 5 18 5H2a1.003 1.003 0 0 0-.71 1.71l7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65c.29-.29.37-.72.22-1.09Z"
2645
+ />
2646
+ </svg>
2239
2647
  </span>
2240
2648
  </span>
2241
2649
  </button>
@@ -2397,7 +2805,19 @@ Several components in the following examples do not include functional and/or ac
2397
2805
  <span class="pf-v6-c-menu-toggle__text">Name</span>
2398
2806
  <span class="pf-v6-c-menu-toggle__controls">
2399
2807
  <span class="pf-v6-c-menu-toggle__toggle-icon">
2400
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
2808
+ <svg
2809
+ class="pf-v6-svg"
2810
+ viewBox="0 0 20 20"
2811
+ fill="currentColor"
2812
+ aria-hidden="true"
2813
+ role="img"
2814
+ width="1em"
2815
+ height="1em"
2816
+ >
2817
+ <path
2818
+ d="M18.92 5.62C18.77 5.25 18.4 5 18 5H2a1.003 1.003 0 0 0-.71 1.71l7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65c.29-.29.37-.72.22-1.09Z"
2819
+ />
2820
+ </svg>
2401
2821
  </span>
2402
2822
  </span>
2403
2823
  </button>
@@ -2434,7 +2854,19 @@ Several components in the following examples do not include functional and/or ac
2434
2854
  <span class="pf-v6-c-menu-toggle__text">Status</span>
2435
2855
  <span class="pf-v6-c-menu-toggle__controls">
2436
2856
  <span class="pf-v6-c-menu-toggle__toggle-icon">
2437
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
2857
+ <svg
2858
+ class="pf-v6-svg"
2859
+ viewBox="0 0 20 20"
2860
+ fill="currentColor"
2861
+ aria-hidden="true"
2862
+ role="img"
2863
+ width="1em"
2864
+ height="1em"
2865
+ >
2866
+ <path
2867
+ d="M18.92 5.62C18.77 5.25 18.4 5 18 5H2a1.003 1.003 0 0 0-.71 1.71l7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65c.29-.29.37-.72.22-1.09Z"
2868
+ />
2869
+ </svg>
2438
2870
  </span>
2439
2871
  </span>
2440
2872
  </button>
@@ -2449,7 +2881,19 @@ Several components in the following examples do not include functional and/or ac
2449
2881
  <span class="pf-v6-c-menu-toggle__text">Risk</span>
2450
2882
  <span class="pf-v6-c-menu-toggle__controls">
2451
2883
  <span class="pf-v6-c-menu-toggle__toggle-icon">
2452
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
2884
+ <svg
2885
+ class="pf-v6-svg"
2886
+ viewBox="0 0 20 20"
2887
+ fill="currentColor"
2888
+ aria-hidden="true"
2889
+ role="img"
2890
+ width="1em"
2891
+ height="1em"
2892
+ >
2893
+ <path
2894
+ d="M18.92 5.62C18.77 5.25 18.4 5 18 5H2a1.003 1.003 0 0 0-.71 1.71l7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65c.29-.29.37-.72.22-1.09Z"
2895
+ />
2896
+ </svg>
2453
2897
  </span>
2454
2898
  </span>
2455
2899
  </button>
@@ -2753,7 +3197,19 @@ Several components in the following examples do not include functional and/or ac
2753
3197
  >
2754
3198
  <span class="pf-v6-c-menu-toggle__controls">
2755
3199
  <span class="pf-v6-c-menu-toggle__toggle-icon">
2756
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
3200
+ <svg
3201
+ class="pf-v6-svg"
3202
+ viewBox="0 0 20 20"
3203
+ fill="currentColor"
3204
+ aria-hidden="true"
3205
+ role="img"
3206
+ width="1em"
3207
+ height="1em"
3208
+ >
3209
+ <path
3210
+ d="M18.92 5.62C18.77 5.25 18.4 5 18 5H2a1.003 1.003 0 0 0-.71 1.71l7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65c.29-.29.37-.72.22-1.09Z"
3211
+ />
3212
+ </svg>
2757
3213
  </span>
2758
3214
  </span>
2759
3215
  </button>
@@ -2775,7 +3231,19 @@ Several components in the following examples do not include functional and/or ac
2775
3231
  </span>
2776
3232
  <span class="pf-v6-c-menu-toggle__controls">
2777
3233
  <span class="pf-v6-c-menu-toggle__toggle-icon">
2778
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
3234
+ <svg
3235
+ class="pf-v6-svg"
3236
+ viewBox="0 0 20 20"
3237
+ fill="currentColor"
3238
+ aria-hidden="true"
3239
+ role="img"
3240
+ width="1em"
3241
+ height="1em"
3242
+ >
3243
+ <path
3244
+ d="M18.92 5.62C18.77 5.25 18.4 5 18 5H2a1.003 1.003 0 0 0-.71 1.71l7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65c.29-.29.37-.72.22-1.09Z"
3245
+ />
3246
+ </svg>
2779
3247
  </span>
2780
3248
  </span>
2781
3249
  </button>