@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
@@ -142,7 +142,19 @@ wrapperTag: div
142
142
  aria-label="Actions"
143
143
  >
144
144
  <span class="pf-v6-c-menu-toggle__icon">
145
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
145
+ <svg
146
+ class="pf-v6-svg"
147
+ viewBox="0 0 32 32"
148
+ fill="currentColor"
149
+ aria-hidden="true"
150
+ role="img"
151
+ width="1em"
152
+ height="1em"
153
+ >
154
+ <path
155
+ 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"
156
+ />
157
+ </svg>
146
158
  </span>
147
159
  </button>
148
160
  </div>
@@ -273,9 +285,15 @@ wrapperTag: div
273
285
  </nav>
274
286
  </div>
275
287
  </section>
276
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
288
+ <section
289
+ class="pf-v6-c-page__main-section pf-m-limit-width"
290
+ aria-labelledby="main-title"
291
+ >
277
292
  <div class="pf-v6-c-page__main-body">
278
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
293
+ <h1
294
+ class="pf-v6-c-content--h1 pf-m-page-title"
295
+ id="main-title"
296
+ >Main title</h1>
279
297
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
280
298
  </div>
281
299
  </section>
@@ -463,7 +481,19 @@ wrapperTag: div
463
481
  <span class="pf-v6-c-menu-toggle__text">Context selector</span>
464
482
  <span class="pf-v6-c-menu-toggle__controls">
465
483
  <span class="pf-v6-c-menu-toggle__toggle-icon">
466
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
484
+ <svg
485
+ class="pf-v6-svg"
486
+ viewBox="0 0 20 20"
487
+ fill="currentColor"
488
+ aria-hidden="true"
489
+ role="img"
490
+ width="1em"
491
+ height="1em"
492
+ >
493
+ <path
494
+ 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"
495
+ />
496
+ </svg>
467
497
  </span>
468
498
  </span>
469
499
  </button>
@@ -477,7 +507,19 @@ wrapperTag: div
477
507
  <span class="pf-v6-c-menu-toggle__text">Dropdown</span>
478
508
  <span class="pf-v6-c-menu-toggle__controls">
479
509
  <span class="pf-v6-c-menu-toggle__toggle-icon">
480
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
510
+ <svg
511
+ class="pf-v6-svg"
512
+ viewBox="0 0 20 20"
513
+ fill="currentColor"
514
+ aria-hidden="true"
515
+ role="img"
516
+ width="1em"
517
+ height="1em"
518
+ >
519
+ <path
520
+ 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"
521
+ />
522
+ </svg>
481
523
  </span>
482
524
  </span>
483
525
  </button>
@@ -492,7 +534,19 @@ wrapperTag: div
492
534
  aria-label="Actions"
493
535
  >
494
536
  <span class="pf-v6-c-menu-toggle__icon">
495
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
537
+ <svg
538
+ class="pf-v6-svg"
539
+ viewBox="0 0 32 32"
540
+ fill="currentColor"
541
+ aria-hidden="true"
542
+ role="img"
543
+ width="1em"
544
+ height="1em"
545
+ >
546
+ <path
547
+ 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"
548
+ />
549
+ </svg>
496
550
  </span>
497
551
  </button>
498
552
  </div>
@@ -622,9 +676,15 @@ wrapperTag: div
622
676
  </nav>
623
677
  </div>
624
678
  </section>
625
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
679
+ <section
680
+ class="pf-v6-c-page__main-section pf-m-limit-width"
681
+ aria-labelledby="main-title"
682
+ >
626
683
  <div class="pf-v6-c-page__main-body">
627
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
684
+ <h1
685
+ class="pf-v6-c-content--h1 pf-m-page-title"
686
+ id="main-title"
687
+ >Main title</h1>
628
688
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
629
689
  </div>
630
690
  </section>
@@ -834,7 +894,19 @@ wrapperTag: div
834
894
  <span class="pf-v6-c-menu-toggle__text">Name</span>
835
895
  <span class="pf-v6-c-menu-toggle__controls">
836
896
  <span class="pf-v6-c-menu-toggle__toggle-icon">
837
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
897
+ <svg
898
+ class="pf-v6-svg"
899
+ viewBox="0 0 20 20"
900
+ fill="currentColor"
901
+ aria-hidden="true"
902
+ role="img"
903
+ width="1em"
904
+ height="1em"
905
+ >
906
+ <path
907
+ 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"
908
+ />
909
+ </svg>
838
910
  </span>
839
911
  </span>
840
912
  </button>
@@ -869,7 +941,19 @@ wrapperTag: div
869
941
  aria-label="Actions"
870
942
  >
871
943
  <span class="pf-v6-c-menu-toggle__icon">
872
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
944
+ <svg
945
+ class="pf-v6-svg"
946
+ viewBox="0 0 32 32"
947
+ fill="currentColor"
948
+ aria-hidden="true"
949
+ role="img"
950
+ width="1em"
951
+ height="1em"
952
+ >
953
+ <path
954
+ 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"
955
+ />
956
+ </svg>
873
957
  </span>
874
958
  </button>
875
959
  </div>
@@ -1005,9 +1089,15 @@ wrapperTag: div
1005
1089
  </nav>
1006
1090
  </div>
1007
1091
  </section>
1008
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
1092
+ <section
1093
+ class="pf-v6-c-page__main-section pf-m-limit-width"
1094
+ aria-labelledby="main-title"
1095
+ >
1009
1096
  <div class="pf-v6-c-page__main-body">
1010
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
1097
+ <h1
1098
+ class="pf-v6-c-content--h1 pf-m-page-title"
1099
+ id="main-title"
1100
+ >Main title</h1>
1011
1101
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
1012
1102
  </div>
1013
1103
  </section>
@@ -1220,7 +1310,19 @@ wrapperTag: div
1220
1310
  <span class="pf-v6-c-menu-toggle__text">Name</span>
1221
1311
  <span class="pf-v6-c-menu-toggle__controls">
1222
1312
  <span class="pf-v6-c-menu-toggle__toggle-icon">
1223
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
1313
+ <svg
1314
+ class="pf-v6-svg"
1315
+ viewBox="0 0 20 20"
1316
+ fill="currentColor"
1317
+ aria-hidden="true"
1318
+ role="img"
1319
+ width="1em"
1320
+ height="1em"
1321
+ >
1322
+ <path
1323
+ 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"
1324
+ />
1325
+ </svg>
1224
1326
  </span>
1225
1327
  </span>
1226
1328
  </button>
@@ -1255,7 +1357,19 @@ wrapperTag: div
1255
1357
  aria-label="Actions"
1256
1358
  >
1257
1359
  <span class="pf-v6-c-menu-toggle__icon">
1258
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1360
+ <svg
1361
+ class="pf-v6-svg"
1362
+ viewBox="0 0 32 32"
1363
+ fill="currentColor"
1364
+ aria-hidden="true"
1365
+ role="img"
1366
+ width="1em"
1367
+ height="1em"
1368
+ >
1369
+ <path
1370
+ 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"
1371
+ />
1372
+ </svg>
1259
1373
  </span>
1260
1374
  </button>
1261
1375
  </div>
@@ -1391,9 +1505,15 @@ wrapperTag: div
1391
1505
  </nav>
1392
1506
  </div>
1393
1507
  </section>
1394
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
1508
+ <section
1509
+ class="pf-v6-c-page__main-section pf-m-limit-width"
1510
+ aria-labelledby="main-title"
1511
+ >
1395
1512
  <div class="pf-v6-c-page__main-body">
1396
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
1513
+ <h1
1514
+ class="pf-v6-c-content--h1 pf-m-page-title"
1515
+ id="main-title"
1516
+ >Main title</h1>
1397
1517
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
1398
1518
  </div>
1399
1519
  </section>
@@ -1726,9 +1846,15 @@ wrapperTag: div
1726
1846
  </nav>
1727
1847
  </div>
1728
1848
  </section>
1729
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
1849
+ <section
1850
+ class="pf-v6-c-page__main-section pf-m-limit-width"
1851
+ aria-labelledby="main-title"
1852
+ >
1730
1853
  <div class="pf-v6-c-page__main-body">
1731
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
1854
+ <h1
1855
+ class="pf-v6-c-content--h1 pf-m-page-title"
1856
+ id="main-title"
1857
+ >Main title</h1>
1732
1858
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
1733
1859
  </div>
1734
1860
  </section>
@@ -2079,9 +2205,15 @@ wrapperTag: div
2079
2205
  </nav>
2080
2206
  </div>
2081
2207
  </section>
2082
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
2208
+ <section
2209
+ class="pf-v6-c-page__main-section pf-m-limit-width"
2210
+ aria-labelledby="main-title"
2211
+ >
2083
2212
  <div class="pf-v6-c-page__main-body">
2084
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
2213
+ <h1
2214
+ class="pf-v6-c-content--h1 pf-m-page-title"
2215
+ id="main-title"
2216
+ >Main title</h1>
2085
2217
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
2086
2218
  </div>
2087
2219
  </section>
@@ -2285,7 +2417,19 @@ wrapperTag: div
2285
2417
  aria-label="Settings"
2286
2418
  >
2287
2419
  <span class="pf-v6-c-menu-toggle__icon">
2288
- <i class="fas fa-cog" aria-hidden="true"></i>
2420
+ <svg
2421
+ class="pf-v6-svg"
2422
+ viewBox="0 0 32 32"
2423
+ fill="currentColor"
2424
+ aria-hidden="true"
2425
+ role="img"
2426
+ width="1em"
2427
+ height="1em"
2428
+ >
2429
+ <path
2430
+ 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"
2431
+ />
2432
+ </svg>
2289
2433
  </span>
2290
2434
  </button>
2291
2435
  </div>
@@ -2311,7 +2455,19 @@ wrapperTag: div
2311
2455
  aria-label="Actions"
2312
2456
  >
2313
2457
  <span class="pf-v6-c-menu-toggle__icon">
2314
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
2458
+ <svg
2459
+ class="pf-v6-svg"
2460
+ viewBox="0 0 32 32"
2461
+ fill="currentColor"
2462
+ aria-hidden="true"
2463
+ role="img"
2464
+ width="1em"
2465
+ height="1em"
2466
+ >
2467
+ <path
2468
+ 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"
2469
+ />
2470
+ </svg>
2315
2471
  </span>
2316
2472
  </button>
2317
2473
  </div>
@@ -2442,9 +2598,15 @@ wrapperTag: div
2442
2598
  </nav>
2443
2599
  </div>
2444
2600
  </section>
2445
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
2601
+ <section
2602
+ class="pf-v6-c-page__main-section pf-m-limit-width"
2603
+ aria-labelledby="main-title"
2604
+ >
2446
2605
  <div class="pf-v6-c-page__main-body">
2447
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
2606
+ <h1
2607
+ class="pf-v6-c-content--h1 pf-m-page-title"
2608
+ id="main-title"
2609
+ >Main title</h1>
2448
2610
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
2449
2611
  </div>
2450
2612
  </section>
@@ -2760,9 +2922,15 @@ wrapperTag: div
2760
2922
  </nav>
2761
2923
  </div>
2762
2924
  </section>
2763
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
2925
+ <section
2926
+ class="pf-v6-c-page__main-section pf-m-limit-width"
2927
+ aria-labelledby="main-title"
2928
+ >
2764
2929
  <div class="pf-v6-c-page__main-body">
2765
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
2930
+ <h1
2931
+ class="pf-v6-c-content--h1 pf-m-page-title"
2932
+ id="main-title"
2933
+ >Main title</h1>
2766
2934
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
2767
2935
  </div>
2768
2936
  </section>
@@ -2971,7 +3139,19 @@ wrapperTag: div
2971
3139
  aria-label="Actions"
2972
3140
  >
2973
3141
  <span class="pf-v6-c-menu-toggle__icon">
2974
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
3142
+ <svg
3143
+ class="pf-v6-svg"
3144
+ viewBox="0 0 32 32"
3145
+ fill="currentColor"
3146
+ aria-hidden="true"
3147
+ role="img"
3148
+ width="1em"
3149
+ height="1em"
3150
+ >
3151
+ <path
3152
+ 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"
3153
+ />
3154
+ </svg>
2975
3155
  </span>
2976
3156
  </button>
2977
3157
  </div>
@@ -3000,7 +3180,19 @@ wrapperTag: div
3000
3180
  <span class="pf-v6-c-menu-toggle__text">Name</span>
3001
3181
  <span class="pf-v6-c-menu-toggle__controls">
3002
3182
  <span class="pf-v6-c-menu-toggle__toggle-icon">
3003
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
3183
+ <svg
3184
+ class="pf-v6-svg"
3185
+ viewBox="0 0 20 20"
3186
+ fill="currentColor"
3187
+ aria-hidden="true"
3188
+ role="img"
3189
+ width="1em"
3190
+ height="1em"
3191
+ >
3192
+ <path
3193
+ 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"
3194
+ />
3195
+ </svg>
3004
3196
  </span>
3005
3197
  </span>
3006
3198
  </button>
@@ -3151,9 +3343,15 @@ wrapperTag: div
3151
3343
  </nav>
3152
3344
  </div>
3153
3345
  </section>
3154
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
3346
+ <section
3347
+ class="pf-v6-c-page__main-section pf-m-limit-width"
3348
+ aria-labelledby="main-title"
3349
+ >
3155
3350
  <div class="pf-v6-c-page__main-body">
3156
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
3351
+ <h1
3352
+ class="pf-v6-c-content--h1 pf-m-page-title"
3353
+ id="main-title"
3354
+ >Main title</h1>
3157
3355
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
3158
3356
  </div>
3159
3357
  </section>