@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
package/docs/demos/DataList/examples/DataList.md CHANGED
@@ -159,7 +159,19 @@ wrapperTag: div
159
159
  aria-label="Settings"
160
160
  >
161
161
  <span class="pf-v6-c-menu-toggle__icon">
162
- <i class="fas fa-cog" aria-hidden="true"></i>
162
+ <svg
163
+ class="pf-v6-svg"
164
+ viewBox="0 0 32 32"
165
+ fill="currentColor"
166
+ aria-hidden="true"
167
+ role="img"
168
+ width="1em"
169
+ height="1em"
170
+ >
171
+ <path
172
+ 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"
173
+ />
174
+ </svg>
163
175
  </span>
164
176
  </button>
165
177
  </div>
@@ -185,7 +197,19 @@ wrapperTag: div
185
197
  aria-label="Actions"
186
198
  >
187
199
  <span class="pf-v6-c-menu-toggle__icon">
188
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
200
+ <svg
201
+ class="pf-v6-svg"
202
+ viewBox="0 0 32 32"
203
+ fill="currentColor"
204
+ aria-hidden="true"
205
+ role="img"
206
+ width="1em"
207
+ height="1em"
208
+ >
209
+ <path
210
+ 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"
211
+ />
212
+ </svg>
189
213
  </span>
190
214
  </button>
191
215
  </div>
@@ -316,9 +340,15 @@ wrapperTag: div
316
340
  </nav>
317
341
  </div>
318
342
  </section>
319
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
343
+ <section
344
+ class="pf-v6-c-page__main-section pf-m-limit-width"
345
+ aria-labelledby="main-title"
346
+ >
320
347
  <div class="pf-v6-c-page__main-body">
321
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
348
+ <h1
349
+ class="pf-v6-c-content--h1 pf-m-page-title"
350
+ id="main-title"
351
+ >Main title</h1>
322
352
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
323
353
  </div>
324
354
  </section>
@@ -353,7 +383,19 @@ wrapperTag: div
353
383
  >
354
384
  <span class="pf-v6-c-menu-toggle__controls">
355
385
  <span class="pf-v6-c-menu-toggle__toggle-icon">
356
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
386
+ <svg
387
+ class="pf-v6-svg"
388
+ viewBox="0 0 20 20"
389
+ fill="currentColor"
390
+ aria-hidden="true"
391
+ role="img"
392
+ width="1em"
393
+ height="1em"
394
+ >
395
+ <path
396
+ 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"
397
+ />
398
+ </svg>
357
399
  </span>
358
400
  </span>
359
401
  </button>
@@ -387,7 +429,19 @@ wrapperTag: div
387
429
  id="data-list-basic-example-toolbar-overflow-menu-toggle"
388
430
  >
389
431
  <span class="pf-v6-c-menu-toggle__icon">
390
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
432
+ <svg
433
+ class="pf-v6-svg"
434
+ viewBox="0 0 32 32"
435
+ fill="currentColor"
436
+ aria-hidden="true"
437
+ role="img"
438
+ width="1em"
439
+ height="1em"
440
+ >
441
+ <path
442
+ 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"
443
+ />
444
+ </svg>
391
445
  </span>
392
446
  </button>
393
447
  </div>
@@ -408,10 +462,19 @@ wrapperTag: div
408
462
  </span>
409
463
  <span class="pf-v6-c-menu-toggle__controls">
410
464
  <span class="pf-v6-c-menu-toggle__toggle-icon">
411
- <i
412
- class="fas fa-caret-down fa-fw"
465
+ <svg
466
+ class="pf-v6-svg"
467
+ viewBox="0 0 20 20"
468
+ fill="currentColor"
413
469
  aria-hidden="true"
414
- ></i>
470
+ role="img"
471
+ width="1em"
472
+ height="1em"
473
+ >
474
+ <path
475
+ 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"
476
+ />
477
+ </svg>
415
478
  </span>
416
479
  </span>
417
480
  </button>
@@ -935,7 +998,19 @@ wrapperTag: div
935
998
  </span>
936
999
  <span class="pf-v6-c-menu-toggle__controls">
937
1000
  <span class="pf-v6-c-menu-toggle__toggle-icon">
938
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
1001
+ <svg
1002
+ class="pf-v6-svg"
1003
+ viewBox="0 0 20 20"
1004
+ fill="currentColor"
1005
+ aria-hidden="true"
1006
+ role="img"
1007
+ width="1em"
1008
+ height="1em"
1009
+ >
1010
+ <path
1011
+ 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"
1012
+ />
1013
+ </svg>
939
1014
  </span>
940
1015
  </span>
941
1016
  </button>
@@ -1213,7 +1288,19 @@ wrapperTag: div
1213
1288
  aria-label="Settings"
1214
1289
  >
1215
1290
  <span class="pf-v6-c-menu-toggle__icon">
1216
- <i class="fas fa-cog" aria-hidden="true"></i>
1291
+ <svg
1292
+ class="pf-v6-svg"
1293
+ viewBox="0 0 32 32"
1294
+ fill="currentColor"
1295
+ aria-hidden="true"
1296
+ role="img"
1297
+ width="1em"
1298
+ height="1em"
1299
+ >
1300
+ <path
1301
+ 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"
1302
+ />
1303
+ </svg>
1217
1304
  </span>
1218
1305
  </button>
1219
1306
  </div>
@@ -1239,7 +1326,19 @@ wrapperTag: div
1239
1326
  aria-label="Actions"
1240
1327
  >
1241
1328
  <span class="pf-v6-c-menu-toggle__icon">
1242
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1329
+ <svg
1330
+ class="pf-v6-svg"
1331
+ viewBox="0 0 32 32"
1332
+ fill="currentColor"
1333
+ aria-hidden="true"
1334
+ role="img"
1335
+ width="1em"
1336
+ height="1em"
1337
+ >
1338
+ <path
1339
+ 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"
1340
+ />
1341
+ </svg>
1243
1342
  </span>
1244
1343
  </button>
1245
1344
  </div>
@@ -1370,9 +1469,15 @@ wrapperTag: div
1370
1469
  </nav>
1371
1470
  </div>
1372
1471
  </section>
1373
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
1472
+ <section
1473
+ class="pf-v6-c-page__main-section pf-m-limit-width"
1474
+ aria-labelledby="main-title"
1475
+ >
1374
1476
  <div class="pf-v6-c-page__main-body">
1375
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
1477
+ <h1
1478
+ class="pf-v6-c-content--h1 pf-m-page-title"
1479
+ id="main-title"
1480
+ >Main title</h1>
1376
1481
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
1377
1482
  </div>
1378
1483
  </section>
@@ -1426,10 +1531,19 @@ wrapperTag: div
1426
1531
  >
1427
1532
  <span class="pf-v6-c-menu-toggle__controls">
1428
1533
  <span class="pf-v6-c-menu-toggle__toggle-icon">
1429
- <i
1430
- class="fas fa-caret-down fa-fw"
1534
+ <svg
1535
+ class="pf-v6-svg"
1536
+ viewBox="0 0 20 20"
1537
+ fill="currentColor"
1431
1538
  aria-hidden="true"
1432
- ></i>
1539
+ role="img"
1540
+ width="1em"
1541
+ height="1em"
1542
+ >
1543
+ <path
1544
+ 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"
1545
+ />
1546
+ </svg>
1433
1547
  </span>
1434
1548
  </span>
1435
1549
  </button>
@@ -1473,7 +1587,19 @@ wrapperTag: div
1473
1587
  id="data-list-actionable-example-toolbar-overflow-menu-toggle"
1474
1588
  >
1475
1589
  <span class="pf-v6-c-menu-toggle__icon">
1476
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1590
+ <svg
1591
+ class="pf-v6-svg"
1592
+ viewBox="0 0 32 32"
1593
+ fill="currentColor"
1594
+ aria-hidden="true"
1595
+ role="img"
1596
+ width="1em"
1597
+ height="1em"
1598
+ >
1599
+ <path
1600
+ 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"
1601
+ />
1602
+ </svg>
1477
1603
  </span>
1478
1604
  </button>
1479
1605
  </div>
@@ -1494,10 +1620,19 @@ wrapperTag: div
1494
1620
  </span>
1495
1621
  <span class="pf-v6-c-menu-toggle__controls">
1496
1622
  <span class="pf-v6-c-menu-toggle__toggle-icon">
1497
- <i
1498
- class="fas fa-caret-down fa-fw"
1623
+ <svg
1624
+ class="pf-v6-svg"
1625
+ viewBox="0 0 20 20"
1626
+ fill="currentColor"
1499
1627
  aria-hidden="true"
1500
- ></i>
1628
+ role="img"
1629
+ width="1em"
1630
+ height="1em"
1631
+ >
1632
+ <path
1633
+ 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"
1634
+ />
1635
+ </svg>
1501
1636
  </span>
1502
1637
  </span>
1503
1638
  </button>
@@ -1963,7 +2098,19 @@ wrapperTag: div
1963
2098
  </span>
1964
2099
  <span class="pf-v6-c-menu-toggle__controls">
1965
2100
  <span class="pf-v6-c-menu-toggle__toggle-icon">
1966
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
2101
+ <svg
2102
+ class="pf-v6-svg"
2103
+ viewBox="0 0 20 20"
2104
+ fill="currentColor"
2105
+ aria-hidden="true"
2106
+ role="img"
2107
+ width="1em"
2108
+ height="1em"
2109
+ >
2110
+ <path
2111
+ 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"
2112
+ />
2113
+ </svg>
1967
2114
  </span>
1968
2115
  </span>
1969
2116
  </button>
@@ -2241,7 +2388,19 @@ wrapperTag: div
2241
2388
  aria-label="Settings"
2242
2389
  >
2243
2390
  <span class="pf-v6-c-menu-toggle__icon">
2244
- <i class="fas fa-cog" aria-hidden="true"></i>
2391
+ <svg
2392
+ class="pf-v6-svg"
2393
+ viewBox="0 0 32 32"
2394
+ fill="currentColor"
2395
+ aria-hidden="true"
2396
+ role="img"
2397
+ width="1em"
2398
+ height="1em"
2399
+ >
2400
+ <path
2401
+ 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"
2402
+ />
2403
+ </svg>
2245
2404
  </span>
2246
2405
  </button>
2247
2406
  </div>
@@ -2267,7 +2426,19 @@ wrapperTag: div
2267
2426
  aria-label="Actions"
2268
2427
  >
2269
2428
  <span class="pf-v6-c-menu-toggle__icon">
2270
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
2429
+ <svg
2430
+ class="pf-v6-svg"
2431
+ viewBox="0 0 32 32"
2432
+ fill="currentColor"
2433
+ aria-hidden="true"
2434
+ role="img"
2435
+ width="1em"
2436
+ height="1em"
2437
+ >
2438
+ <path
2439
+ 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"
2440
+ />
2441
+ </svg>
2271
2442
  </span>
2272
2443
  </button>
2273
2444
  </div>
@@ -2398,9 +2569,15 @@ wrapperTag: div
2398
2569
  </nav>
2399
2570
  </div>
2400
2571
  </section>
2401
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
2572
+ <section
2573
+ class="pf-v6-c-page__main-section pf-m-limit-width"
2574
+ aria-labelledby="main-title"
2575
+ >
2402
2576
  <div class="pf-v6-c-page__main-body">
2403
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
2577
+ <h1
2578
+ class="pf-v6-c-content--h1 pf-m-page-title"
2579
+ id="main-title"
2580
+ >Main title</h1>
2404
2581
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
2405
2582
  </div>
2406
2583
  </section>
@@ -2486,10 +2663,19 @@ wrapperTag: div
2486
2663
  >
2487
2664
  <span class="pf-v6-c-menu-toggle__controls">
2488
2665
  <span class="pf-v6-c-menu-toggle__toggle-icon">
2489
- <i
2490
- class="fas fa-caret-down fa-fw"
2666
+ <svg
2667
+ class="pf-v6-svg"
2668
+ viewBox="0 0 20 20"
2669
+ fill="currentColor"
2491
2670
  aria-hidden="true"
2492
- ></i>
2671
+ role="img"
2672
+ width="1em"
2673
+ height="1em"
2674
+ >
2675
+ <path
2676
+ 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"
2677
+ />
2678
+ </svg>
2493
2679
  </span>
2494
2680
  </span>
2495
2681
  </button>
@@ -2515,10 +2701,19 @@ wrapperTag: div
2515
2701
  <span class="pf-v6-c-menu-toggle__text">Name</span>
2516
2702
  <span class="pf-v6-c-menu-toggle__controls">
2517
2703
  <span class="pf-v6-c-menu-toggle__toggle-icon">
2518
- <i
2519
- class="fas fa-caret-down fa-fw"
2704
+ <svg
2705
+ class="pf-v6-svg"
2706
+ viewBox="0 0 20 20"
2707
+ fill="currentColor"
2520
2708
  aria-hidden="true"
2521
- ></i>
2709
+ role="img"
2710
+ width="1em"
2711
+ height="1em"
2712
+ >
2713
+ <path
2714
+ 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"
2715
+ />
2716
+ </svg>
2522
2717
  </span>
2523
2718
  </span>
2524
2719
  </button>
@@ -2572,7 +2767,19 @@ wrapperTag: div
2572
2767
  id="data-list-expandable-example-toolbar-overflow-menu-toggle"
2573
2768
  >
2574
2769
  <span class="pf-v6-c-menu-toggle__icon">
2575
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
2770
+ <svg
2771
+ class="pf-v6-svg"
2772
+ viewBox="0 0 32 32"
2773
+ fill="currentColor"
2774
+ aria-hidden="true"
2775
+ role="img"
2776
+ width="1em"
2777
+ height="1em"
2778
+ >
2779
+ <path
2780
+ 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"
2781
+ />
2782
+ </svg>
2576
2783
  </span>
2577
2784
  </button>
2578
2785
  </div>
@@ -2593,10 +2800,19 @@ wrapperTag: div
2593
2800
  </span>
2594
2801
  <span class="pf-v6-c-menu-toggle__controls">
2595
2802
  <span class="pf-v6-c-menu-toggle__toggle-icon">
2596
- <i
2597
- class="fas fa-caret-down fa-fw"
2803
+ <svg
2804
+ class="pf-v6-svg"
2805
+ viewBox="0 0 20 20"
2806
+ fill="currentColor"
2598
2807
  aria-hidden="true"
2599
- ></i>
2808
+ role="img"
2809
+ width="1em"
2810
+ height="1em"
2811
+ >
2812
+ <path
2813
+ 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"
2814
+ />
2815
+ </svg>
2600
2816
  </span>
2601
2817
  </span>
2602
2818
  </button>
@@ -2957,7 +3173,19 @@ wrapperTag: div
2957
3173
  aria-label="Table actions"
2958
3174
  >
2959
3175
  <span class="pf-v6-c-menu-toggle__icon">
2960
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
3176
+ <svg
3177
+ class="pf-v6-svg"
3178
+ viewBox="0 0 32 32"
3179
+ fill="currentColor"
3180
+ aria-hidden="true"
3181
+ role="img"
3182
+ width="1em"
3183
+ height="1em"
3184
+ >
3185
+ <path
3186
+ 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"
3187
+ />
3188
+ </svg>
2961
3189
  </span>
2962
3190
  </button>
2963
3191
  </td>
@@ -3034,7 +3262,19 @@ wrapperTag: div
3034
3262
  aria-label="Table actions"
3035
3263
  >
3036
3264
  <span class="pf-v6-c-menu-toggle__icon">
3037
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
3265
+ <svg
3266
+ class="pf-v6-svg"
3267
+ viewBox="0 0 32 32"
3268
+ fill="currentColor"
3269
+ aria-hidden="true"
3270
+ role="img"
3271
+ width="1em"
3272
+ height="1em"
3273
+ >
3274
+ <path
3275
+ 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"
3276
+ />
3277
+ </svg>
3038
3278
  </span>
3039
3279
  </button>
3040
3280
  </td>
@@ -3111,7 +3351,19 @@ wrapperTag: div
3111
3351
  aria-label="Table actions"
3112
3352
  >
3113
3353
  <span class="pf-v6-c-menu-toggle__icon">
3114
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
3354
+ <svg
3355
+ class="pf-v6-svg"
3356
+ viewBox="0 0 32 32"
3357
+ fill="currentColor"
3358
+ aria-hidden="true"
3359
+ role="img"
3360
+ width="1em"
3361
+ height="1em"
3362
+ >
3363
+ <path
3364
+ 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"
3365
+ />
3366
+ </svg>
3115
3367
  </span>
3116
3368
  </button>
3117
3369
  </td>
@@ -3187,7 +3439,19 @@ wrapperTag: div
3187
3439
  aria-label="Table actions"
3188
3440
  >
3189
3441
  <span class="pf-v6-c-menu-toggle__icon">
3190
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
3442
+ <svg
3443
+ class="pf-v6-svg"
3444
+ viewBox="0 0 32 32"
3445
+ fill="currentColor"
3446
+ aria-hidden="true"
3447
+ role="img"
3448
+ width="1em"
3449
+ height="1em"
3450
+ >
3451
+ <path
3452
+ 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"
3453
+ />
3454
+ </svg>
3191
3455
  </span>
3192
3456
  </button>
3193
3457
  </td>
@@ -3781,7 +4045,19 @@ wrapperTag: div
3781
4045
  </span>
3782
4046
  <span class="pf-v6-c-menu-toggle__controls">
3783
4047
  <span class="pf-v6-c-menu-toggle__toggle-icon">
3784
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
4048
+ <svg
4049
+ class="pf-v6-svg"
4050
+ viewBox="0 0 20 20"
4051
+ fill="currentColor"
4052
+ aria-hidden="true"
4053
+ role="img"
4054
+ width="1em"
4055
+ height="1em"
4056
+ >
4057
+ <path
4058
+ 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"
4059
+ />
4060
+ </svg>
3785
4061
  </span>
3786
4062
  </span>
3787
4063
  </button>
@@ -4059,7 +4335,19 @@ wrapperTag: div
4059
4335
  aria-label="Settings"
4060
4336
  >
4061
4337
  <span class="pf-v6-c-menu-toggle__icon">
4062
- <i class="fas fa-cog" aria-hidden="true"></i>
4338
+ <svg
4339
+ class="pf-v6-svg"
4340
+ viewBox="0 0 32 32"
4341
+ fill="currentColor"
4342
+ aria-hidden="true"
4343
+ role="img"
4344
+ width="1em"
4345
+ height="1em"
4346
+ >
4347
+ <path
4348
+ 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"
4349
+ />
4350
+ </svg>
4063
4351
  </span>
4064
4352
  </button>
4065
4353
  </div>
@@ -4085,7 +4373,19 @@ wrapperTag: div
4085
4373
  aria-label="Actions"
4086
4374
  >
4087
4375
  <span class="pf-v6-c-menu-toggle__icon">
4088
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
4376
+ <svg
4377
+ class="pf-v6-svg"
4378
+ viewBox="0 0 32 32"
4379
+ fill="currentColor"
4380
+ aria-hidden="true"
4381
+ role="img"
4382
+ width="1em"
4383
+ height="1em"
4384
+ >
4385
+ <path
4386
+ 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"
4387
+ />
4388
+ </svg>
4089
4389
  </span>
4090
4390
  </button>
4091
4391
  </div>
@@ -4216,9 +4516,15 @@ wrapperTag: div
4216
4516
  </nav>
4217
4517
  </div>
4218
4518
  </section>
4219
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
4519
+ <section
4520
+ class="pf-v6-c-page__main-section pf-m-limit-width"
4521
+ aria-labelledby="main-title"
4522
+ >
4220
4523
  <div class="pf-v6-c-page__main-body">
4221
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
4524
+ <h1
4525
+ class="pf-v6-c-content--h1 pf-m-page-title"
4526
+ id="main-title"
4527
+ >Main title</h1>
4222
4528
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
4223
4529
  </div>
4224
4530
  </section>
@@ -4266,10 +4572,19 @@ wrapperTag: div
4266
4572
  <span class="pf-v6-c-menu-toggle__text">Name</span>
4267
4573
  <span class="pf-v6-c-menu-toggle__controls">
4268
4574
  <span class="pf-v6-c-menu-toggle__toggle-icon">
4269
- <i
4270
- class="fas fa-caret-down fa-fw"
4575
+ <svg
4576
+ class="pf-v6-svg"
4577
+ viewBox="0 0 20 20"
4578
+ fill="currentColor"
4271
4579
  aria-hidden="true"
4272
- ></i>
4580
+ role="img"
4581
+ width="1em"
4582
+ height="1em"
4583
+ >
4584
+ <path
4585
+ 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"
4586
+ />
4587
+ </svg>
4273
4588
  </span>
4274
4589
  </span>
4275
4590
  </button>
@@ -4332,7 +4647,19 @@ wrapperTag: div
4332
4647
  id="data-list-static-bottom-example-toolbar-overflow-menu-toggle"
4333
4648
  >
4334
4649
  <span class="pf-v6-c-menu-toggle__icon">
4335
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
4650
+ <svg
4651
+ class="pf-v6-svg"
4652
+ viewBox="0 0 32 32"
4653
+ fill="currentColor"
4654
+ aria-hidden="true"
4655
+ role="img"
4656
+ width="1em"
4657
+ height="1em"
4658
+ >
4659
+ <path
4660
+ 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"
4661
+ />
4662
+ </svg>
4336
4663
  </span>
4337
4664
  </button>
4338
4665
  </div>
@@ -4353,10 +4680,19 @@ wrapperTag: div
4353
4680
  </span>
4354
4681
  <span class="pf-v6-c-menu-toggle__controls">
4355
4682
  <span class="pf-v6-c-menu-toggle__toggle-icon">
4356
- <i
4357
- class="fas fa-caret-down fa-fw"
4683
+ <svg
4684
+ class="pf-v6-svg"
4685
+ viewBox="0 0 20 20"
4686
+ fill="currentColor"
4358
4687
  aria-hidden="true"
4359
- ></i>
4688
+ role="img"
4689
+ width="1em"
4690
+ height="1em"
4691
+ >
4692
+ <path
4693
+ 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"
4694
+ />
4695
+ </svg>
4360
4696
  </span>
4361
4697
  </span>
4362
4698
  </button>
@@ -4880,7 +5216,19 @@ wrapperTag: div
4880
5216
  </span>
4881
5217
  <span class="pf-v6-c-menu-toggle__controls">
4882
5218
  <span class="pf-v6-c-menu-toggle__toggle-icon">
4883
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
5219
+ <svg
5220
+ class="pf-v6-svg"
5221
+ viewBox="0 0 20 20"
5222
+ fill="currentColor"
5223
+ aria-hidden="true"
5224
+ role="img"
5225
+ width="1em"
5226
+ height="1em"
5227
+ >
5228
+ <path
5229
+ 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"
5230
+ />
5231
+ </svg>
4884
5232
  </span>
4885
5233
  </span>
4886
5234
  </button>