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

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 (55) hide show
  1. package/components/Button/button.css +2 -2
  2. package/components/Button/button.scss +3 -3
  3. package/components/ClipboardCopy/clipboard-copy.css +7 -1
  4. package/components/ClipboardCopy/clipboard-copy.scss +10 -1
  5. package/components/Menu/menu.css +26 -19
  6. package/components/Menu/menu.scss +26 -19
  7. package/components/MenuToggle/menu-toggle.css +9 -5
  8. package/components/MenuToggle/menu-toggle.scss +12 -5
  9. package/components/_index.css +44 -27
  10. package/docs/components/Breadcrumb/examples/Breadcrumb.md +13 -1
  11. package/docs/components/CalendarMonth/examples/CalendarMonth.md +52 -4
  12. package/docs/components/Card/examples/Card.md +130 -10
  13. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +39 -38
  14. package/docs/components/DataList/examples/DataList.md +221 -17
  15. package/docs/components/DualListSelector/examples/DualListSelector.md +234 -18
  16. package/docs/components/Hint/examples/Hint.md +39 -3
  17. package/docs/components/InlineEdit/examples/InlineEdit.md +26 -2
  18. package/docs/components/InputGroup/examples/InputGroup.md +13 -1
  19. package/docs/components/Login/examples/Login.md +13 -1
  20. package/docs/components/Menu/examples/Menu.md +195 -15
  21. package/docs/components/MenuToggle/examples/MenuToggle.md +1331 -100
  22. package/docs/components/NotificationDrawer/examples/NotificationDrawer.md +481 -37
  23. package/docs/components/OverflowMenu/examples/overflow-menu.md +65 -5
  24. package/docs/components/Page/examples/Page.md +62 -15
  25. package/docs/components/Pagination/examples/Pagination.md +169 -13
  26. package/docs/components/Table/examples/Table.md +3461 -269
  27. package/docs/components/Toolbar/examples/Toolbar.md +507 -39
  28. package/docs/demos/AboutModal/examples/AboutModal.md +34 -4
  29. package/docs/demos/Alert/examples/Alert.md +102 -12
  30. package/docs/demos/BackToTop/examples/BackToTop.md +34 -4
  31. package/docs/demos/Banner/examples/Banner.md +68 -8
  32. package/docs/demos/Card/examples/Card.md +78 -6
  33. package/docs/demos/CardView/examples/CardView.md +214 -22
  34. package/docs/demos/Compass/examples/Compass.md +431 -56
  35. package/docs/demos/Dashboard/examples/Dashboard.md +71 -11
  36. package/docs/demos/DataList/examples/DataList.md +401 -53
  37. package/docs/demos/DescriptionList/examples/DescriptionList.md +115 -13
  38. package/docs/demos/Drawer/examples/Drawer.md +167 -17
  39. package/docs/demos/JumpLinks/examples/JumpLinks.md +188 -20
  40. package/docs/demos/Masthead/examples/Masthead.md +228 -30
  41. package/docs/demos/Modal/examples/Modal.md +204 -24
  42. package/docs/demos/Nav/examples/Nav.md +184 -28
  43. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +1015 -85
  44. package/docs/demos/Page/examples/Page.md +503 -58
  45. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +649 -97
  46. package/docs/demos/Skeleton/examples/Skeleton.md +34 -4
  47. package/docs/demos/Table/examples/Table.md +2641 -349
  48. package/docs/demos/Tabs/examples/Tabs.md +295 -31
  49. package/docs/demos/Toolbar/examples/Toolbar.md +675 -63
  50. package/docs/demos/Wizard/examples/Wizard.md +306 -36
  51. package/package.json +1 -1
  52. package/patternfly-no-globals.css +44 -27
  53. package/patternfly.css +44 -27
  54. package/patternfly.min.css +1 -1
  55. package/patternfly.min.css.map +1 -1
@@ -44,7 +44,19 @@ section: components
44
44
  <span class="pf-v6-c-menu-toggle__text">Name</span>
45
45
  <span class="pf-v6-c-menu-toggle__controls">
46
46
  <span class="pf-v6-c-menu-toggle__toggle-icon">
47
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
47
+ <svg
48
+ class="pf-v6-svg"
49
+ viewBox="0 0 20 20"
50
+ fill="currentColor"
51
+ aria-hidden="true"
52
+ role="img"
53
+ width="1em"
54
+ height="1em"
55
+ >
56
+ <path
57
+ 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"
58
+ />
59
+ </svg>
48
60
  </span>
49
61
  </span>
50
62
  </button>
@@ -99,7 +111,19 @@ section: components
99
111
  id="toolbar-attribute-value-search-filter-desktop-example-overflow-toggle"
100
112
  >
101
113
  <span class="pf-v6-c-menu-toggle__icon">
102
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
114
+ <svg
115
+ class="pf-v6-svg"
116
+ viewBox="0 0 32 32"
117
+ fill="currentColor"
118
+ aria-hidden="true"
119
+ role="img"
120
+ width="1em"
121
+ height="1em"
122
+ >
123
+ <path
124
+ 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"
125
+ />
126
+ </svg>
103
127
  </span>
104
128
  </button>
105
129
  </div>
@@ -125,7 +149,19 @@ section: components
125
149
  </span>
126
150
  <span class="pf-v6-c-menu-toggle__controls">
127
151
  <span class="pf-v6-c-menu-toggle__toggle-icon">
128
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
152
+ <svg
153
+ class="pf-v6-svg"
154
+ viewBox="0 0 20 20"
155
+ fill="currentColor"
156
+ aria-hidden="true"
157
+ role="img"
158
+ width="1em"
159
+ height="1em"
160
+ >
161
+ <path
162
+ 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"
163
+ />
164
+ </svg>
129
165
  </span>
130
166
  </span>
131
167
  </button>
@@ -352,7 +388,19 @@ section: components
352
388
  aria-label="Settings"
353
389
  >
354
390
  <span class="pf-v6-c-menu-toggle__icon">
355
- <i class="fas fa-cog" aria-hidden="true"></i>
391
+ <svg
392
+ class="pf-v6-svg"
393
+ viewBox="0 0 32 32"
394
+ fill="currentColor"
395
+ aria-hidden="true"
396
+ role="img"
397
+ width="1em"
398
+ height="1em"
399
+ >
400
+ <path
401
+ d="M30.168 12.894a.5.5 0 0 0-.488-.394h-2.732a11.512 11.512 0 0 0-.729-1.769l1.931-1.93a.5.5 0 0 0 .066-.625 14.693 14.693 0 0 0-4.393-4.392.498.498 0 0 0-.624.067l-1.93 1.93a11.512 11.512 0 0 0-1.769-.729V2.319a.5.5 0 0 0-.395-.489 14.81 14.81 0 0 0-6.211 0 .5.5 0 0 0-.395.489v2.733c-.614.196-1.207.439-1.769.729L8.8 3.851a.498.498 0 0 0-.624-.067 14.714 14.714 0 0 0-4.393 4.392.5.5 0 0 0 .066.625l1.931 1.93a11.512 11.512 0 0 0-.729 1.769H2.319a.5.5 0 0 0-.488.394 14.652 14.652 0 0 0 0 6.212.5.5 0 0 0 .488.394h2.732c.196.615.44 1.207.729 1.769l-1.931 1.93a.5.5 0 0 0-.066.625 14.673 14.673 0 0 0 4.393 4.392.498.498 0 0 0 .624-.067l1.93-1.93c.562.289 1.154.533 1.769.729v2.733a.5.5 0 0 0 .395.489 14.686 14.686 0 0 0 6.21 0 .5.5 0 0 0 .395-.489v-2.733a11.454 11.454 0 0 0 1.769-.729l1.93 1.93a.5.5 0 0 0 .624.067 14.714 14.714 0 0 0 4.393-4.392.5.5 0 0 0-.066-.625l-1.931-1.93c.289-.562.533-1.154.729-1.769h2.732a.5.5 0 0 0 .488-.394 14.652 14.652 0 0 0 0-6.212ZM16 21.25c-2.895 0-5.25-2.355-5.25-5.25s2.355-5.25 5.25-5.25 5.25 2.355 5.25 5.25-2.355 5.25-5.25 5.25Z"
402
+ />
403
+ </svg>
356
404
  </span>
357
405
  </button>
358
406
  </div>
@@ -378,7 +426,19 @@ section: components
378
426
  aria-label="Actions"
379
427
  >
380
428
  <span class="pf-v6-c-menu-toggle__icon">
381
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
429
+ <svg
430
+ class="pf-v6-svg"
431
+ viewBox="0 0 32 32"
432
+ fill="currentColor"
433
+ aria-hidden="true"
434
+ role="img"
435
+ width="1em"
436
+ height="1em"
437
+ >
438
+ <path
439
+ 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"
440
+ />
441
+ </svg>
382
442
  </span>
383
443
  </button>
384
444
  </div>
@@ -509,9 +569,15 @@ section: components
509
569
  </nav>
510
570
  </div>
511
571
  </section>
512
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
572
+ <section
573
+ class="pf-v6-c-page__main-section pf-m-limit-width"
574
+ aria-labelledby="main-title"
575
+ >
513
576
  <div class="pf-v6-c-page__main-body">
514
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
577
+ <h1
578
+ class="pf-v6-c-content--h1 pf-m-page-title"
579
+ id="main-title"
580
+ >Main title</h1>
515
581
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
516
582
  </div>
517
583
  </section>
@@ -556,10 +622,19 @@ section: components
556
622
  <span class="pf-v6-c-menu-toggle__text">Last month</span>
557
623
  <span class="pf-v6-c-menu-toggle__controls">
558
624
  <span class="pf-v6-c-menu-toggle__toggle-icon">
559
- <i
560
- class="fas fa-caret-down fa-fw"
625
+ <svg
626
+ class="pf-v6-svg"
627
+ viewBox="0 0 20 20"
628
+ fill="currentColor"
561
629
  aria-hidden="true"
562
- ></i>
630
+ role="img"
631
+ width="1em"
632
+ height="1em"
633
+ >
634
+ <path
635
+ 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"
636
+ />
637
+ </svg>
563
638
  </span>
564
639
  </span>
565
640
  </button>
@@ -698,10 +773,19 @@ section: components
698
773
  <span class="pf-v6-c-menu-toggle__text">Name</span>
699
774
  <span class="pf-v6-c-menu-toggle__controls">
700
775
  <span class="pf-v6-c-menu-toggle__toggle-icon">
701
- <i
702
- class="fas fa-caret-down fa-fw"
776
+ <svg
777
+ class="pf-v6-svg"
778
+ viewBox="0 0 20 20"
779
+ fill="currentColor"
703
780
  aria-hidden="true"
704
- ></i>
781
+ role="img"
782
+ width="1em"
783
+ height="1em"
784
+ >
785
+ <path
786
+ 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"
787
+ />
788
+ </svg>
705
789
  </span>
706
790
  </span>
707
791
  </button>
@@ -877,7 +961,19 @@ section: components
877
961
  aria-label="Table actions"
878
962
  >
879
963
  <span class="pf-v6-c-menu-toggle__icon">
880
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
964
+ <svg
965
+ class="pf-v6-svg"
966
+ viewBox="0 0 32 32"
967
+ fill="currentColor"
968
+ aria-hidden="true"
969
+ role="img"
970
+ width="1em"
971
+ height="1em"
972
+ >
973
+ <path
974
+ 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"
975
+ />
976
+ </svg>
881
977
  </span>
882
978
  </button>
883
979
  </td>
@@ -953,7 +1049,19 @@ section: components
953
1049
  aria-label="Table actions"
954
1050
  >
955
1051
  <span class="pf-v6-c-menu-toggle__icon">
956
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1052
+ <svg
1053
+ class="pf-v6-svg"
1054
+ viewBox="0 0 32 32"
1055
+ fill="currentColor"
1056
+ aria-hidden="true"
1057
+ role="img"
1058
+ width="1em"
1059
+ height="1em"
1060
+ >
1061
+ <path
1062
+ 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"
1063
+ />
1064
+ </svg>
957
1065
  </span>
958
1066
  </button>
959
1067
  </td>
@@ -1029,7 +1137,19 @@ section: components
1029
1137
  aria-label="Table actions"
1030
1138
  >
1031
1139
  <span class="pf-v6-c-menu-toggle__icon">
1032
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1140
+ <svg
1141
+ class="pf-v6-svg"
1142
+ viewBox="0 0 32 32"
1143
+ fill="currentColor"
1144
+ aria-hidden="true"
1145
+ role="img"
1146
+ width="1em"
1147
+ height="1em"
1148
+ >
1149
+ <path
1150
+ 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"
1151
+ />
1152
+ </svg>
1033
1153
  </span>
1034
1154
  </button>
1035
1155
  </td>
@@ -1105,7 +1225,19 @@ section: components
1105
1225
  aria-label="Table actions"
1106
1226
  >
1107
1227
  <span class="pf-v6-c-menu-toggle__icon">
1108
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1228
+ <svg
1229
+ class="pf-v6-svg"
1230
+ viewBox="0 0 32 32"
1231
+ fill="currentColor"
1232
+ aria-hidden="true"
1233
+ role="img"
1234
+ width="1em"
1235
+ height="1em"
1236
+ >
1237
+ <path
1238
+ 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"
1239
+ />
1240
+ </svg>
1109
1241
  </span>
1110
1242
  </button>
1111
1243
  </td>
@@ -1180,7 +1312,19 @@ section: components
1180
1312
  aria-label="Table actions"
1181
1313
  >
1182
1314
  <span class="pf-v6-c-menu-toggle__icon">
1183
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1315
+ <svg
1316
+ class="pf-v6-svg"
1317
+ viewBox="0 0 32 32"
1318
+ fill="currentColor"
1319
+ aria-hidden="true"
1320
+ role="img"
1321
+ width="1em"
1322
+ height="1em"
1323
+ >
1324
+ <path
1325
+ 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"
1326
+ />
1327
+ </svg>
1184
1328
  </span>
1185
1329
  </button>
1186
1330
  </td>
@@ -1234,7 +1378,19 @@ section: components
1234
1378
  <span class="pf-v6-c-menu-toggle__text">Name</span>
1235
1379
  <span class="pf-v6-c-menu-toggle__controls">
1236
1380
  <span class="pf-v6-c-menu-toggle__toggle-icon">
1237
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
1381
+ <svg
1382
+ class="pf-v6-svg"
1383
+ viewBox="0 0 20 20"
1384
+ fill="currentColor"
1385
+ aria-hidden="true"
1386
+ role="img"
1387
+ width="1em"
1388
+ height="1em"
1389
+ >
1390
+ <path
1391
+ 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"
1392
+ />
1393
+ </svg>
1238
1394
  </span>
1239
1395
  </span>
1240
1396
  </button>
@@ -1271,7 +1427,19 @@ section: components
1271
1427
  <span class="pf-v6-c-menu-toggle__text">Status</span>
1272
1428
  <span class="pf-v6-c-menu-toggle__controls">
1273
1429
  <span class="pf-v6-c-menu-toggle__toggle-icon">
1274
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
1430
+ <svg
1431
+ class="pf-v6-svg"
1432
+ viewBox="0 0 20 20"
1433
+ fill="currentColor"
1434
+ aria-hidden="true"
1435
+ role="img"
1436
+ width="1em"
1437
+ height="1em"
1438
+ >
1439
+ <path
1440
+ 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"
1441
+ />
1442
+ </svg>
1275
1443
  </span>
1276
1444
  </span>
1277
1445
  </button>
@@ -1286,7 +1454,19 @@ section: components
1286
1454
  <span class="pf-v6-c-menu-toggle__text">Risk</span>
1287
1455
  <span class="pf-v6-c-menu-toggle__controls">
1288
1456
  <span class="pf-v6-c-menu-toggle__toggle-icon">
1289
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
1457
+ <svg
1458
+ class="pf-v6-svg"
1459
+ viewBox="0 0 20 20"
1460
+ fill="currentColor"
1461
+ aria-hidden="true"
1462
+ role="img"
1463
+ width="1em"
1464
+ height="1em"
1465
+ >
1466
+ <path
1467
+ 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"
1468
+ />
1469
+ </svg>
1290
1470
  </span>
1291
1471
  </span>
1292
1472
  </button>
@@ -1308,7 +1488,19 @@ section: components
1308
1488
  id="toolbar-attribute-value-search-filter-mobile-example-overflow-toggle"
1309
1489
  >
1310
1490
  <span class="pf-v6-c-menu-toggle__icon">
1311
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1491
+ <svg
1492
+ class="pf-v6-svg"
1493
+ viewBox="0 0 32 32"
1494
+ fill="currentColor"
1495
+ aria-hidden="true"
1496
+ role="img"
1497
+ width="1em"
1498
+ height="1em"
1499
+ >
1500
+ <path
1501
+ 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"
1502
+ />
1503
+ </svg>
1312
1504
  </span>
1313
1505
  </button>
1314
1506
  </div>
@@ -1334,7 +1526,19 @@ section: components
1334
1526
  </span>
1335
1527
  <span class="pf-v6-c-menu-toggle__controls">
1336
1528
  <span class="pf-v6-c-menu-toggle__toggle-icon">
1337
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
1529
+ <svg
1530
+ class="pf-v6-svg"
1531
+ viewBox="0 0 20 20"
1532
+ fill="currentColor"
1533
+ aria-hidden="true"
1534
+ role="img"
1535
+ width="1em"
1536
+ height="1em"
1537
+ >
1538
+ <path
1539
+ 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"
1540
+ />
1541
+ </svg>
1338
1542
  </span>
1339
1543
  </span>
1340
1544
  </button>
@@ -1413,7 +1617,19 @@ section: components
1413
1617
  <span class="pf-v6-c-menu-toggle__text">Name</span>
1414
1618
  <span class="pf-v6-c-menu-toggle__controls">
1415
1619
  <span class="pf-v6-c-menu-toggle__toggle-icon">
1416
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
1620
+ <svg
1621
+ class="pf-v6-svg"
1622
+ viewBox="0 0 20 20"
1623
+ fill="currentColor"
1624
+ aria-hidden="true"
1625
+ role="img"
1626
+ width="1em"
1627
+ height="1em"
1628
+ >
1629
+ <path
1630
+ 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"
1631
+ />
1632
+ </svg>
1417
1633
  </span>
1418
1634
  </span>
1419
1635
  </button>
@@ -1464,7 +1680,19 @@ section: components
1464
1680
  <span class="pf-v6-c-menu-toggle__text">Status</span>
1465
1681
  <span class="pf-v6-c-menu-toggle__controls">
1466
1682
  <span class="pf-v6-c-menu-toggle__toggle-icon">
1467
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
1683
+ <svg
1684
+ class="pf-v6-svg"
1685
+ viewBox="0 0 20 20"
1686
+ fill="currentColor"
1687
+ aria-hidden="true"
1688
+ role="img"
1689
+ width="1em"
1690
+ height="1em"
1691
+ >
1692
+ <path
1693
+ 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"
1694
+ />
1695
+ </svg>
1468
1696
  </span>
1469
1697
  </span>
1470
1698
  </button>
@@ -1479,7 +1707,19 @@ section: components
1479
1707
  <span class="pf-v6-c-menu-toggle__text">Risk</span>
1480
1708
  <span class="pf-v6-c-menu-toggle__controls">
1481
1709
  <span class="pf-v6-c-menu-toggle__toggle-icon">
1482
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
1710
+ <svg
1711
+ class="pf-v6-svg"
1712
+ viewBox="0 0 20 20"
1713
+ fill="currentColor"
1714
+ aria-hidden="true"
1715
+ role="img"
1716
+ width="1em"
1717
+ height="1em"
1718
+ >
1719
+ <path
1720
+ 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"
1721
+ />
1722
+ </svg>
1483
1723
  </span>
1484
1724
  </span>
1485
1725
  </button>
@@ -1514,7 +1754,19 @@ section: components
1514
1754
  id="toolbar-attribute-value-single-menu-toggle-filter-desktop-example-overflow-toggle"
1515
1755
  >
1516
1756
  <span class="pf-v6-c-menu-toggle__icon">
1517
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1757
+ <svg
1758
+ class="pf-v6-svg"
1759
+ viewBox="0 0 32 32"
1760
+ fill="currentColor"
1761
+ aria-hidden="true"
1762
+ role="img"
1763
+ width="1em"
1764
+ height="1em"
1765
+ >
1766
+ <path
1767
+ 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"
1768
+ />
1769
+ </svg>
1518
1770
  </span>
1519
1771
  </button>
1520
1772
  </div>
@@ -1540,7 +1792,19 @@ section: components
1540
1792
  </span>
1541
1793
  <span class="pf-v6-c-menu-toggle__controls">
1542
1794
  <span class="pf-v6-c-menu-toggle__toggle-icon">
1543
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
1795
+ <svg
1796
+ class="pf-v6-svg"
1797
+ viewBox="0 0 20 20"
1798
+ fill="currentColor"
1799
+ aria-hidden="true"
1800
+ role="img"
1801
+ width="1em"
1802
+ height="1em"
1803
+ >
1804
+ <path
1805
+ 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"
1806
+ />
1807
+ </svg>
1544
1808
  </span>
1545
1809
  </span>
1546
1810
  </button>
@@ -1648,7 +1912,19 @@ section: components
1648
1912
  <span class="pf-v6-c-menu-toggle__text">Name</span>
1649
1913
  <span class="pf-v6-c-menu-toggle__controls">
1650
1914
  <span class="pf-v6-c-menu-toggle__toggle-icon">
1651
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
1915
+ <svg
1916
+ class="pf-v6-svg"
1917
+ viewBox="0 0 20 20"
1918
+ fill="currentColor"
1919
+ aria-hidden="true"
1920
+ role="img"
1921
+ width="1em"
1922
+ height="1em"
1923
+ >
1924
+ <path
1925
+ 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"
1926
+ />
1927
+ </svg>
1652
1928
  </span>
1653
1929
  </span>
1654
1930
  </button>
@@ -1685,7 +1961,19 @@ section: components
1685
1961
  <span class="pf-v6-c-menu-toggle__text">Status</span>
1686
1962
  <span class="pf-v6-c-menu-toggle__controls">
1687
1963
  <span class="pf-v6-c-menu-toggle__toggle-icon">
1688
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
1964
+ <svg
1965
+ class="pf-v6-svg"
1966
+ viewBox="0 0 20 20"
1967
+ fill="currentColor"
1968
+ aria-hidden="true"
1969
+ role="img"
1970
+ width="1em"
1971
+ height="1em"
1972
+ >
1973
+ <path
1974
+ 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"
1975
+ />
1976
+ </svg>
1689
1977
  </span>
1690
1978
  </span>
1691
1979
  </button>
@@ -1700,7 +1988,19 @@ section: components
1700
1988
  <span class="pf-v6-c-menu-toggle__text">Risk</span>
1701
1989
  <span class="pf-v6-c-menu-toggle__controls">
1702
1990
  <span class="pf-v6-c-menu-toggle__toggle-icon">
1703
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
1991
+ <svg
1992
+ class="pf-v6-svg"
1993
+ viewBox="0 0 20 20"
1994
+ fill="currentColor"
1995
+ aria-hidden="true"
1996
+ role="img"
1997
+ width="1em"
1998
+ height="1em"
1999
+ >
2000
+ <path
2001
+ 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"
2002
+ />
2003
+ </svg>
1704
2004
  </span>
1705
2005
  </span>
1706
2006
  </button>
@@ -1722,7 +2022,19 @@ section: components
1722
2022
  id="toolbar-attribute-value-single-menu-toggle-filter-mobile-example-overflow-toggle"
1723
2023
  >
1724
2024
  <span class="pf-v6-c-menu-toggle__icon">
1725
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
2025
+ <svg
2026
+ class="pf-v6-svg"
2027
+ viewBox="0 0 32 32"
2028
+ fill="currentColor"
2029
+ aria-hidden="true"
2030
+ role="img"
2031
+ width="1em"
2032
+ height="1em"
2033
+ >
2034
+ <path
2035
+ 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"
2036
+ />
2037
+ </svg>
1726
2038
  </span>
1727
2039
  </button>
1728
2040
  </div>
@@ -1748,7 +2060,19 @@ section: components
1748
2060
  </span>
1749
2061
  <span class="pf-v6-c-menu-toggle__controls">
1750
2062
  <span class="pf-v6-c-menu-toggle__toggle-icon">
1751
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
2063
+ <svg
2064
+ class="pf-v6-svg"
2065
+ viewBox="0 0 20 20"
2066
+ fill="currentColor"
2067
+ aria-hidden="true"
2068
+ role="img"
2069
+ width="1em"
2070
+ height="1em"
2071
+ >
2072
+ <path
2073
+ 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"
2074
+ />
2075
+ </svg>
1752
2076
  </span>
1753
2077
  </span>
1754
2078
  </button>
@@ -1822,7 +2146,19 @@ section: components
1822
2146
  <span class="pf-v6-c-menu-toggle__text">Status</span>
1823
2147
  <span class="pf-v6-c-menu-toggle__controls">
1824
2148
  <span class="pf-v6-c-menu-toggle__toggle-icon">
1825
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
2149
+ <svg
2150
+ class="pf-v6-svg"
2151
+ viewBox="0 0 20 20"
2152
+ fill="currentColor"
2153
+ aria-hidden="true"
2154
+ role="img"
2155
+ width="1em"
2156
+ height="1em"
2157
+ >
2158
+ <path
2159
+ 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"
2160
+ />
2161
+ </svg>
1826
2162
  </span>
1827
2163
  </span>
1828
2164
  </button>
@@ -1837,7 +2173,19 @@ section: components
1837
2173
  <span class="pf-v6-c-menu-toggle__text">Risk</span>
1838
2174
  <span class="pf-v6-c-menu-toggle__controls">
1839
2175
  <span class="pf-v6-c-menu-toggle__toggle-icon">
1840
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
2176
+ <svg
2177
+ class="pf-v6-svg"
2178
+ viewBox="0 0 20 20"
2179
+ fill="currentColor"
2180
+ aria-hidden="true"
2181
+ role="img"
2182
+ width="1em"
2183
+ height="1em"
2184
+ >
2185
+ <path
2186
+ 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"
2187
+ />
2188
+ </svg>
1841
2189
  </span>
1842
2190
  </span>
1843
2191
  </button>
@@ -1869,7 +2217,19 @@ section: components
1869
2217
  <span class="pf-v6-c-menu-toggle__text">Status</span>
1870
2218
  <span class="pf-v6-c-menu-toggle__controls">
1871
2219
  <span class="pf-v6-c-menu-toggle__toggle-icon">
1872
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
2220
+ <svg
2221
+ class="pf-v6-svg"
2222
+ viewBox="0 0 20 20"
2223
+ fill="currentColor"
2224
+ aria-hidden="true"
2225
+ role="img"
2226
+ width="1em"
2227
+ height="1em"
2228
+ >
2229
+ <path
2230
+ 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"
2231
+ />
2232
+ </svg>
1873
2233
  </span>
1874
2234
  </span>
1875
2235
  </button>
@@ -1884,7 +2244,19 @@ section: components
1884
2244
  <span class="pf-v6-c-menu-toggle__text">Risk</span>
1885
2245
  <span class="pf-v6-c-menu-toggle__controls">
1886
2246
  <span class="pf-v6-c-menu-toggle__toggle-icon">
1887
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
2247
+ <svg
2248
+ class="pf-v6-svg"
2249
+ viewBox="0 0 20 20"
2250
+ fill="currentColor"
2251
+ aria-hidden="true"
2252
+ role="img"
2253
+ width="1em"
2254
+ height="1em"
2255
+ >
2256
+ <path
2257
+ 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"
2258
+ />
2259
+ </svg>
1888
2260
  </span>
1889
2261
  </span>
1890
2262
  </button>
@@ -1919,7 +2291,19 @@ section: components
1919
2291
  id="toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-overflow-toggle"
1920
2292
  >
1921
2293
  <span class="pf-v6-c-menu-toggle__icon">
1922
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
2294
+ <svg
2295
+ class="pf-v6-svg"
2296
+ viewBox="0 0 32 32"
2297
+ fill="currentColor"
2298
+ aria-hidden="true"
2299
+ role="img"
2300
+ width="1em"
2301
+ height="1em"
2302
+ >
2303
+ <path
2304
+ 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"
2305
+ />
2306
+ </svg>
1923
2307
  </span>
1924
2308
  </button>
1925
2309
  </div>
@@ -1945,7 +2329,19 @@ section: components
1945
2329
  </span>
1946
2330
  <span class="pf-v6-c-menu-toggle__controls">
1947
2331
  <span class="pf-v6-c-menu-toggle__toggle-icon">
1948
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
2332
+ <svg
2333
+ class="pf-v6-svg"
2334
+ viewBox="0 0 20 20"
2335
+ fill="currentColor"
2336
+ aria-hidden="true"
2337
+ role="img"
2338
+ width="1em"
2339
+ height="1em"
2340
+ >
2341
+ <path
2342
+ 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"
2343
+ />
2344
+ </svg>
1949
2345
  </span>
1950
2346
  </span>
1951
2347
  </button>
@@ -2329,7 +2725,19 @@ section: components
2329
2725
  <span class="pf-v6-c-menu-toggle__text">Name</span>
2330
2726
  <span class="pf-v6-c-menu-toggle__controls">
2331
2727
  <span class="pf-v6-c-menu-toggle__toggle-icon">
2332
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
2728
+ <svg
2729
+ class="pf-v6-svg"
2730
+ viewBox="0 0 20 20"
2731
+ fill="currentColor"
2732
+ aria-hidden="true"
2733
+ role="img"
2734
+ width="1em"
2735
+ height="1em"
2736
+ >
2737
+ <path
2738
+ 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"
2739
+ />
2740
+ </svg>
2333
2741
  </span>
2334
2742
  </span>
2335
2743
  </button>
@@ -2366,7 +2774,19 @@ section: components
2366
2774
  <span class="pf-v6-c-menu-toggle__text">Status</span>
2367
2775
  <span class="pf-v6-c-menu-toggle__controls">
2368
2776
  <span class="pf-v6-c-menu-toggle__toggle-icon">
2369
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
2777
+ <svg
2778
+ class="pf-v6-svg"
2779
+ viewBox="0 0 20 20"
2780
+ fill="currentColor"
2781
+ aria-hidden="true"
2782
+ role="img"
2783
+ width="1em"
2784
+ height="1em"
2785
+ >
2786
+ <path
2787
+ 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"
2788
+ />
2789
+ </svg>
2370
2790
  </span>
2371
2791
  </span>
2372
2792
  </button>
@@ -2381,7 +2801,19 @@ section: components
2381
2801
  <span class="pf-v6-c-menu-toggle__text">Risk</span>
2382
2802
  <span class="pf-v6-c-menu-toggle__controls">
2383
2803
  <span class="pf-v6-c-menu-toggle__toggle-icon">
2384
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
2804
+ <svg
2805
+ class="pf-v6-svg"
2806
+ viewBox="0 0 20 20"
2807
+ fill="currentColor"
2808
+ aria-hidden="true"
2809
+ role="img"
2810
+ width="1em"
2811
+ height="1em"
2812
+ >
2813
+ <path
2814
+ 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"
2815
+ />
2816
+ </svg>
2385
2817
  </span>
2386
2818
  </span>
2387
2819
  </button>
@@ -2403,7 +2835,19 @@ section: components
2403
2835
  id="toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-overflow-toggle"
2404
2836
  >
2405
2837
  <span class="pf-v6-c-menu-toggle__icon">
2406
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
2838
+ <svg
2839
+ class="pf-v6-svg"
2840
+ viewBox="0 0 32 32"
2841
+ fill="currentColor"
2842
+ aria-hidden="true"
2843
+ role="img"
2844
+ width="1em"
2845
+ height="1em"
2846
+ >
2847
+ <path
2848
+ 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"
2849
+ />
2850
+ </svg>
2407
2851
  </span>
2408
2852
  </button>
2409
2853
  </div>
@@ -2429,7 +2873,19 @@ section: components
2429
2873
  </span>
2430
2874
  <span class="pf-v6-c-menu-toggle__controls">
2431
2875
  <span class="pf-v6-c-menu-toggle__toggle-icon">
2432
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
2876
+ <svg
2877
+ class="pf-v6-svg"
2878
+ viewBox="0 0 20 20"
2879
+ fill="currentColor"
2880
+ aria-hidden="true"
2881
+ role="img"
2882
+ width="1em"
2883
+ height="1em"
2884
+ >
2885
+ <path
2886
+ 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"
2887
+ />
2888
+ </svg>
2433
2889
  </span>
2434
2890
  </span>
2435
2891
  </button>
@@ -2503,7 +2959,19 @@ section: components
2503
2959
  <span class="pf-v6-c-menu-toggle__text">Status</span>
2504
2960
  <span class="pf-v6-c-menu-toggle__controls">
2505
2961
  <span class="pf-v6-c-menu-toggle__toggle-icon">
2506
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
2962
+ <svg
2963
+ class="pf-v6-svg"
2964
+ viewBox="0 0 20 20"
2965
+ fill="currentColor"
2966
+ aria-hidden="true"
2967
+ role="img"
2968
+ width="1em"
2969
+ height="1em"
2970
+ >
2971
+ <path
2972
+ 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"
2973
+ />
2974
+ </svg>
2507
2975
  </span>
2508
2976
  </span>
2509
2977
  </button>
@@ -2518,7 +2986,19 @@ section: components
2518
2986
  <span class="pf-v6-c-menu-toggle__text">Risk</span>
2519
2987
  <span class="pf-v6-c-menu-toggle__controls">
2520
2988
  <span class="pf-v6-c-menu-toggle__toggle-icon">
2521
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
2989
+ <svg
2990
+ class="pf-v6-svg"
2991
+ viewBox="0 0 20 20"
2992
+ fill="currentColor"
2993
+ aria-hidden="true"
2994
+ role="img"
2995
+ width="1em"
2996
+ height="1em"
2997
+ >
2998
+ <path
2999
+ 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"
3000
+ />
3001
+ </svg>
2522
3002
  </span>
2523
3003
  </span>
2524
3004
  </button>
@@ -2963,7 +3443,19 @@ section: components
2963
3443
  aria-label="Settings"
2964
3444
  >
2965
3445
  <span class="pf-v6-c-menu-toggle__icon">
2966
- <i class="fas fa-cog" aria-hidden="true"></i>
3446
+ <svg
3447
+ class="pf-v6-svg"
3448
+ viewBox="0 0 32 32"
3449
+ fill="currentColor"
3450
+ aria-hidden="true"
3451
+ role="img"
3452
+ width="1em"
3453
+ height="1em"
3454
+ >
3455
+ <path
3456
+ d="M30.168 12.894a.5.5 0 0 0-.488-.394h-2.732a11.512 11.512 0 0 0-.729-1.769l1.931-1.93a.5.5 0 0 0 .066-.625 14.693 14.693 0 0 0-4.393-4.392.498.498 0 0 0-.624.067l-1.93 1.93a11.512 11.512 0 0 0-1.769-.729V2.319a.5.5 0 0 0-.395-.489 14.81 14.81 0 0 0-6.211 0 .5.5 0 0 0-.395.489v2.733c-.614.196-1.207.439-1.769.729L8.8 3.851a.498.498 0 0 0-.624-.067 14.714 14.714 0 0 0-4.393 4.392.5.5 0 0 0 .066.625l1.931 1.93a11.512 11.512 0 0 0-.729 1.769H2.319a.5.5 0 0 0-.488.394 14.652 14.652 0 0 0 0 6.212.5.5 0 0 0 .488.394h2.732c.196.615.44 1.207.729 1.769l-1.931 1.93a.5.5 0 0 0-.066.625 14.673 14.673 0 0 0 4.393 4.392.498.498 0 0 0 .624-.067l1.93-1.93c.562.289 1.154.533 1.769.729v2.733a.5.5 0 0 0 .395.489 14.686 14.686 0 0 0 6.21 0 .5.5 0 0 0 .395-.489v-2.733a11.454 11.454 0 0 0 1.769-.729l1.93 1.93a.5.5 0 0 0 .624.067 14.714 14.714 0 0 0 4.393-4.392.5.5 0 0 0-.066-.625l-1.931-1.93c.289-.562.533-1.154.729-1.769h2.732a.5.5 0 0 0 .488-.394 14.652 14.652 0 0 0 0-6.212ZM16 21.25c-2.895 0-5.25-2.355-5.25-5.25s2.355-5.25 5.25-5.25 5.25 2.355 5.25 5.25-2.355 5.25-5.25 5.25Z"
3457
+ />
3458
+ </svg>
2967
3459
  </span>
2968
3460
  </button>
2969
3461
  </div>
@@ -2989,7 +3481,19 @@ section: components
2989
3481
  aria-label="Actions"
2990
3482
  >
2991
3483
  <span class="pf-v6-c-menu-toggle__icon">
2992
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
3484
+ <svg
3485
+ class="pf-v6-svg"
3486
+ viewBox="0 0 32 32"
3487
+ fill="currentColor"
3488
+ aria-hidden="true"
3489
+ role="img"
3490
+ width="1em"
3491
+ height="1em"
3492
+ >
3493
+ <path
3494
+ 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"
3495
+ />
3496
+ </svg>
2993
3497
  </span>
2994
3498
  </button>
2995
3499
  </div>
@@ -3120,9 +3624,15 @@ section: components
3120
3624
  </nav>
3121
3625
  </div>
3122
3626
  </section>
3123
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
3627
+ <section
3628
+ class="pf-v6-c-page__main-section pf-m-limit-width"
3629
+ aria-labelledby="main-title"
3630
+ >
3124
3631
  <div class="pf-v6-c-page__main-body">
3125
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
3632
+ <h1
3633
+ class="pf-v6-c-content--h1 pf-m-page-title"
3634
+ id="main-title"
3635
+ >Main title</h1>
3126
3636
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
3127
3637
  </div>
3128
3638
  </section>
@@ -3166,10 +3676,19 @@ section: components
3166
3676
  <span class="pf-v6-c-menu-toggle__text">Name</span>
3167
3677
  <span class="pf-v6-c-menu-toggle__controls">
3168
3678
  <span class="pf-v6-c-menu-toggle__toggle-icon">
3169
- <i
3170
- class="fas fa-caret-down fa-fw"
3679
+ <svg
3680
+ class="pf-v6-svg"
3681
+ viewBox="0 0 20 20"
3682
+ fill="currentColor"
3171
3683
  aria-hidden="true"
3172
- ></i>
3684
+ role="img"
3685
+ width="1em"
3686
+ height="1em"
3687
+ >
3688
+ <path
3689
+ 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"
3690
+ />
3691
+ </svg>
3173
3692
  </span>
3174
3693
  </span>
3175
3694
  </button>
@@ -3210,7 +3729,19 @@ section: components
3210
3729
  id="toolbar-pagination-management-example-toolbar-overflow-toggle"
3211
3730
  >
3212
3731
  <span class="pf-v6-c-menu-toggle__icon">
3213
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
3732
+ <svg
3733
+ class="pf-v6-svg"
3734
+ viewBox="0 0 32 32"
3735
+ fill="currentColor"
3736
+ aria-hidden="true"
3737
+ role="img"
3738
+ width="1em"
3739
+ height="1em"
3740
+ >
3741
+ <path
3742
+ 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"
3743
+ />
3744
+ </svg>
3214
3745
  </span>
3215
3746
  </button>
3216
3747
  </div>
@@ -3236,10 +3767,19 @@ section: components
3236
3767
  </span>
3237
3768
  <span class="pf-v6-c-menu-toggle__controls">
3238
3769
  <span class="pf-v6-c-menu-toggle__toggle-icon">
3239
- <i
3240
- class="fas fa-caret-down fa-fw"
3770
+ <svg
3771
+ class="pf-v6-svg"
3772
+ viewBox="0 0 20 20"
3773
+ fill="currentColor"
3241
3774
  aria-hidden="true"
3242
- ></i>
3775
+ role="img"
3776
+ width="1em"
3777
+ height="1em"
3778
+ >
3779
+ <path
3780
+ 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"
3781
+ />
3782
+ </svg>
3243
3783
  </span>
3244
3784
  </span>
3245
3785
  </button>
@@ -3447,7 +3987,19 @@ section: components
3447
3987
  aria-label="Table actions"
3448
3988
  >
3449
3989
  <span class="pf-v6-c-menu-toggle__icon">
3450
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
3990
+ <svg
3991
+ class="pf-v6-svg"
3992
+ viewBox="0 0 32 32"
3993
+ fill="currentColor"
3994
+ aria-hidden="true"
3995
+ role="img"
3996
+ width="1em"
3997
+ height="1em"
3998
+ >
3999
+ <path
4000
+ 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"
4001
+ />
4002
+ </svg>
3451
4003
  </span>
3452
4004
  </button>
3453
4005
  </td>
@@ -3525,7 +4077,19 @@ section: components
3525
4077
  aria-label="Table actions"
3526
4078
  >
3527
4079
  <span class="pf-v6-c-menu-toggle__icon">
3528
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
4080
+ <svg
4081
+ class="pf-v6-svg"
4082
+ viewBox="0 0 32 32"
4083
+ fill="currentColor"
4084
+ aria-hidden="true"
4085
+ role="img"
4086
+ width="1em"
4087
+ height="1em"
4088
+ >
4089
+ <path
4090
+ 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"
4091
+ />
4092
+ </svg>
3529
4093
  </span>
3530
4094
  </button>
3531
4095
  </td>
@@ -3603,7 +4167,19 @@ section: components
3603
4167
  aria-label="Table actions"
3604
4168
  >
3605
4169
  <span class="pf-v6-c-menu-toggle__icon">
3606
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
4170
+ <svg
4171
+ class="pf-v6-svg"
4172
+ viewBox="0 0 32 32"
4173
+ fill="currentColor"
4174
+ aria-hidden="true"
4175
+ role="img"
4176
+ width="1em"
4177
+ height="1em"
4178
+ >
4179
+ <path
4180
+ 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"
4181
+ />
4182
+ </svg>
3607
4183
  </span>
3608
4184
  </button>
3609
4185
  </td>
@@ -3681,7 +4257,19 @@ section: components
3681
4257
  aria-label="Table actions"
3682
4258
  >
3683
4259
  <span class="pf-v6-c-menu-toggle__icon">
3684
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
4260
+ <svg
4261
+ class="pf-v6-svg"
4262
+ viewBox="0 0 32 32"
4263
+ fill="currentColor"
4264
+ aria-hidden="true"
4265
+ role="img"
4266
+ width="1em"
4267
+ height="1em"
4268
+ >
4269
+ <path
4270
+ 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"
4271
+ />
4272
+ </svg>
3685
4273
  </span>
3686
4274
  </button>
3687
4275
  </td>
@@ -3758,7 +4346,19 @@ section: components
3758
4346
  aria-label="Table actions"
3759
4347
  >
3760
4348
  <span class="pf-v6-c-menu-toggle__icon">
3761
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
4349
+ <svg
4350
+ class="pf-v6-svg"
4351
+ viewBox="0 0 32 32"
4352
+ fill="currentColor"
4353
+ aria-hidden="true"
4354
+ role="img"
4355
+ width="1em"
4356
+ height="1em"
4357
+ >
4358
+ <path
4359
+ 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"
4360
+ />
4361
+ </svg>
3762
4362
  </span>
3763
4363
  </button>
3764
4364
  </td>
@@ -3779,7 +4379,19 @@ section: components
3779
4379
  </span>
3780
4380
  <span class="pf-v6-c-menu-toggle__controls">
3781
4381
  <span class="pf-v6-c-menu-toggle__toggle-icon">
3782
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
4382
+ <svg
4383
+ class="pf-v6-svg"
4384
+ viewBox="0 0 20 20"
4385
+ fill="currentColor"
4386
+ aria-hidden="true"
4387
+ role="img"
4388
+ width="1em"
4389
+ height="1em"
4390
+ >
4391
+ <path
4392
+ 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"
4393
+ />
4394
+ </svg>
3783
4395
  </span>
3784
4396
  </span>
3785
4397
  </button>