@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
@@ -158,7 +158,19 @@ wrapperTag: div
158
158
  aria-label="Settings"
159
159
  >
160
160
  <span class="pf-v6-c-menu-toggle__icon">
161
- <i class="fas fa-cog" aria-hidden="true"></i>
161
+ <svg
162
+ class="pf-v6-svg"
163
+ viewBox="0 0 32 32"
164
+ fill="currentColor"
165
+ aria-hidden="true"
166
+ role="img"
167
+ width="1em"
168
+ height="1em"
169
+ >
170
+ <path
171
+ 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"
172
+ />
173
+ </svg>
162
174
  </span>
163
175
  </button>
164
176
  </div>
@@ -184,7 +196,19 @@ wrapperTag: div
184
196
  aria-label="Actions"
185
197
  >
186
198
  <span class="pf-v6-c-menu-toggle__icon">
187
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
199
+ <svg
200
+ class="pf-v6-svg"
201
+ viewBox="0 0 32 32"
202
+ fill="currentColor"
203
+ aria-hidden="true"
204
+ role="img"
205
+ width="1em"
206
+ height="1em"
207
+ >
208
+ <path
209
+ 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"
210
+ />
211
+ </svg>
188
212
  </span>
189
213
  </button>
190
214
  </div>
@@ -315,9 +339,15 @@ wrapperTag: div
315
339
  </nav>
316
340
  </div>
317
341
  </section>
318
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
342
+ <section
343
+ class="pf-v6-c-page__main-section pf-m-limit-width"
344
+ aria-labelledby="main-title"
345
+ >
319
346
  <div class="pf-v6-c-page__main-body">
320
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
347
+ <h1
348
+ class="pf-v6-c-content--h1 pf-m-page-title"
349
+ id="main-title"
350
+ >Main title</h1>
321
351
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
322
352
  </div>
323
353
  </section>
@@ -521,7 +551,19 @@ wrapperTag: div
521
551
  aria-label="Settings"
522
552
  >
523
553
  <span class="pf-v6-c-menu-toggle__icon">
524
- <i class="fas fa-cog" aria-hidden="true"></i>
554
+ <svg
555
+ class="pf-v6-svg"
556
+ viewBox="0 0 32 32"
557
+ fill="currentColor"
558
+ aria-hidden="true"
559
+ role="img"
560
+ width="1em"
561
+ height="1em"
562
+ >
563
+ <path
564
+ 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"
565
+ />
566
+ </svg>
525
567
  </span>
526
568
  </button>
527
569
  </div>
@@ -547,7 +589,19 @@ wrapperTag: div
547
589
  aria-label="Actions"
548
590
  >
549
591
  <span class="pf-v6-c-menu-toggle__icon">
550
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
592
+ <svg
593
+ class="pf-v6-svg"
594
+ viewBox="0 0 32 32"
595
+ fill="currentColor"
596
+ aria-hidden="true"
597
+ role="img"
598
+ width="1em"
599
+ height="1em"
600
+ >
601
+ <path
602
+ 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"
603
+ />
604
+ </svg>
551
605
  </span>
552
606
  </button>
553
607
  </div>
@@ -693,9 +747,15 @@ wrapperTag: div
693
747
  </nav>
694
748
  </div>
695
749
  </section>
696
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
750
+ <section
751
+ class="pf-v6-c-page__main-section pf-m-limit-width"
752
+ aria-labelledby="main-title"
753
+ >
697
754
  <div class="pf-v6-c-page__main-body">
698
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
755
+ <h1
756
+ class="pf-v6-c-content--h1 pf-m-page-title"
757
+ id="main-title"
758
+ >Main title</h1>
699
759
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
700
760
  </div>
701
761
  </section>
@@ -899,7 +959,19 @@ wrapperTag: div
899
959
  aria-label="Settings"
900
960
  >
901
961
  <span class="pf-v6-c-menu-toggle__icon">
902
- <i class="fas fa-cog" aria-hidden="true"></i>
962
+ <svg
963
+ class="pf-v6-svg"
964
+ viewBox="0 0 32 32"
965
+ fill="currentColor"
966
+ aria-hidden="true"
967
+ role="img"
968
+ width="1em"
969
+ height="1em"
970
+ >
971
+ <path
972
+ 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"
973
+ />
974
+ </svg>
903
975
  </span>
904
976
  </button>
905
977
  </div>
@@ -925,7 +997,19 @@ wrapperTag: div
925
997
  aria-label="Actions"
926
998
  >
927
999
  <span class="pf-v6-c-menu-toggle__icon">
928
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1000
+ <svg
1001
+ class="pf-v6-svg"
1002
+ viewBox="0 0 32 32"
1003
+ fill="currentColor"
1004
+ aria-hidden="true"
1005
+ role="img"
1006
+ width="1em"
1007
+ height="1em"
1008
+ >
1009
+ <path
1010
+ 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"
1011
+ />
1012
+ </svg>
929
1013
  </span>
930
1014
  </button>
931
1015
  </div>
@@ -1083,9 +1167,15 @@ wrapperTag: div
1083
1167
  </nav>
1084
1168
  </div>
1085
1169
  </section>
1086
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
1170
+ <section
1171
+ class="pf-v6-c-page__main-section pf-m-limit-width"
1172
+ aria-labelledby="main-title"
1173
+ >
1087
1174
  <div class="pf-v6-c-page__main-body">
1088
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
1175
+ <h1
1176
+ class="pf-v6-c-content--h1 pf-m-page-title"
1177
+ id="main-title"
1178
+ >Main title</h1>
1089
1179
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
1090
1180
  </div>
1091
1181
  </section>
@@ -1406,7 +1496,19 @@ wrapperTag: div
1406
1496
  aria-label="Settings"
1407
1497
  >
1408
1498
  <span class="pf-v6-c-menu-toggle__icon">
1409
- <i class="fas fa-cog" aria-hidden="true"></i>
1499
+ <svg
1500
+ class="pf-v6-svg"
1501
+ viewBox="0 0 32 32"
1502
+ fill="currentColor"
1503
+ aria-hidden="true"
1504
+ role="img"
1505
+ width="1em"
1506
+ height="1em"
1507
+ >
1508
+ <path
1509
+ 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"
1510
+ />
1511
+ </svg>
1410
1512
  </span>
1411
1513
  </button>
1412
1514
  </div>
@@ -1432,7 +1534,19 @@ wrapperTag: div
1432
1534
  aria-label="Actions"
1433
1535
  >
1434
1536
  <span class="pf-v6-c-menu-toggle__icon">
1435
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1537
+ <svg
1538
+ class="pf-v6-svg"
1539
+ viewBox="0 0 32 32"
1540
+ fill="currentColor"
1541
+ aria-hidden="true"
1542
+ role="img"
1543
+ width="1em"
1544
+ height="1em"
1545
+ >
1546
+ <path
1547
+ 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"
1548
+ />
1549
+ </svg>
1436
1550
  </span>
1437
1551
  </button>
1438
1552
  </div>
@@ -1565,9 +1679,15 @@ wrapperTag: div
1565
1679
  </nav>
1566
1680
  </div>
1567
1681
  </section>
1568
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
1682
+ <section
1683
+ class="pf-v6-c-page__main-section pf-m-limit-width"
1684
+ aria-labelledby="main-title"
1685
+ >
1569
1686
  <div class="pf-v6-c-page__main-body">
1570
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
1687
+ <h1
1688
+ class="pf-v6-c-content--h1 pf-m-page-title"
1689
+ id="main-title"
1690
+ >Main title</h1>
1571
1691
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
1572
1692
  </div>
1573
1693
  </section>
@@ -1888,7 +2008,19 @@ wrapperTag: div
1888
2008
  aria-label="Settings"
1889
2009
  >
1890
2010
  <span class="pf-v6-c-menu-toggle__icon">
1891
- <i class="fas fa-cog" aria-hidden="true"></i>
2011
+ <svg
2012
+ class="pf-v6-svg"
2013
+ viewBox="0 0 32 32"
2014
+ fill="currentColor"
2015
+ aria-hidden="true"
2016
+ role="img"
2017
+ width="1em"
2018
+ height="1em"
2019
+ >
2020
+ <path
2021
+ 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"
2022
+ />
2023
+ </svg>
1892
2024
  </span>
1893
2025
  </button>
1894
2026
  </div>
@@ -1914,7 +2046,19 @@ wrapperTag: div
1914
2046
  aria-label="Actions"
1915
2047
  >
1916
2048
  <span class="pf-v6-c-menu-toggle__icon">
1917
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
2049
+ <svg
2050
+ class="pf-v6-svg"
2051
+ viewBox="0 0 32 32"
2052
+ fill="currentColor"
2053
+ aria-hidden="true"
2054
+ role="img"
2055
+ width="1em"
2056
+ height="1em"
2057
+ >
2058
+ <path
2059
+ 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"
2060
+ />
2061
+ </svg>
1918
2062
  </span>
1919
2063
  </button>
1920
2064
  </div>
@@ -2047,9 +2191,15 @@ wrapperTag: div
2047
2191
  </nav>
2048
2192
  </div>
2049
2193
  </section>
2050
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
2194
+ <section
2195
+ class="pf-v6-c-page__main-section pf-m-limit-width"
2196
+ aria-labelledby="main-title"
2197
+ >
2051
2198
  <div class="pf-v6-c-page__main-body">
2052
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
2199
+ <h1
2200
+ class="pf-v6-c-content--h1 pf-m-page-title"
2201
+ id="main-title"
2202
+ >Main title</h1>
2053
2203
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
2054
2204
  </div>
2055
2205
  </section>
@@ -2373,7 +2523,19 @@ wrapperTag: div
2373
2523
  aria-label="Settings"
2374
2524
  >
2375
2525
  <span class="pf-v6-c-menu-toggle__icon">
2376
- <i class="fas fa-cog" aria-hidden="true"></i>
2526
+ <svg
2527
+ class="pf-v6-svg"
2528
+ viewBox="0 0 32 32"
2529
+ fill="currentColor"
2530
+ aria-hidden="true"
2531
+ role="img"
2532
+ width="1em"
2533
+ height="1em"
2534
+ >
2535
+ <path
2536
+ 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"
2537
+ />
2538
+ </svg>
2377
2539
  </span>
2378
2540
  </button>
2379
2541
  </div>
@@ -2399,7 +2561,19 @@ wrapperTag: div
2399
2561
  aria-label="Actions"
2400
2562
  >
2401
2563
  <span class="pf-v6-c-menu-toggle__icon">
2402
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
2564
+ <svg
2565
+ class="pf-v6-svg"
2566
+ viewBox="0 0 32 32"
2567
+ fill="currentColor"
2568
+ aria-hidden="true"
2569
+ role="img"
2570
+ width="1em"
2571
+ height="1em"
2572
+ >
2573
+ <path
2574
+ 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"
2575
+ />
2576
+ </svg>
2403
2577
  </span>
2404
2578
  </button>
2405
2579
  </div>
@@ -2531,9 +2705,15 @@ wrapperTag: div
2531
2705
  </nav>
2532
2706
  </div>
2533
2707
  </section>
2534
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
2708
+ <section
2709
+ class="pf-v6-c-page__main-section pf-m-limit-width"
2710
+ aria-labelledby="main-title"
2711
+ >
2535
2712
  <div class="pf-v6-c-page__main-body">
2536
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
2713
+ <h1
2714
+ class="pf-v6-c-content--h1 pf-m-page-title"
2715
+ id="main-title"
2716
+ >Main title</h1>
2537
2717
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
2538
2718
  </div>
2539
2719
  </section>
@@ -2855,7 +3035,19 @@ wrapperTag: div
2855
3035
  aria-label="Settings"
2856
3036
  >
2857
3037
  <span class="pf-v6-c-menu-toggle__icon">
2858
- <i class="fas fa-cog" aria-hidden="true"></i>
3038
+ <svg
3039
+ class="pf-v6-svg"
3040
+ viewBox="0 0 32 32"
3041
+ fill="currentColor"
3042
+ aria-hidden="true"
3043
+ role="img"
3044
+ width="1em"
3045
+ height="1em"
3046
+ >
3047
+ <path
3048
+ 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"
3049
+ />
3050
+ </svg>
2859
3051
  </span>
2860
3052
  </button>
2861
3053
  </div>
@@ -2881,7 +3073,19 @@ wrapperTag: div
2881
3073
  aria-label="Actions"
2882
3074
  >
2883
3075
  <span class="pf-v6-c-menu-toggle__icon">
2884
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
3076
+ <svg
3077
+ class="pf-v6-svg"
3078
+ viewBox="0 0 32 32"
3079
+ fill="currentColor"
3080
+ aria-hidden="true"
3081
+ role="img"
3082
+ width="1em"
3083
+ height="1em"
3084
+ >
3085
+ <path
3086
+ 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"
3087
+ />
3088
+ </svg>
2885
3089
  </span>
2886
3090
  </button>
2887
3091
  </div>
@@ -3012,9 +3216,15 @@ wrapperTag: div
3012
3216
  </nav>
3013
3217
  </div>
3014
3218
  </section>
3015
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
3219
+ <section
3220
+ class="pf-v6-c-page__main-section pf-m-limit-width"
3221
+ aria-labelledby="main-title"
3222
+ >
3016
3223
  <div class="pf-v6-c-page__main-body">
3017
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
3224
+ <h1
3225
+ class="pf-v6-c-content--h1 pf-m-page-title"
3226
+ id="main-title"
3227
+ >Main title</h1>
3018
3228
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
3019
3229
  </div>
3020
3230
  </section>
@@ -3342,7 +3552,19 @@ wrapperTag: div
3342
3552
  aria-label="Settings"
3343
3553
  >
3344
3554
  <span class="pf-v6-c-menu-toggle__icon">
3345
- <i class="fas fa-cog" aria-hidden="true"></i>
3555
+ <svg
3556
+ class="pf-v6-svg"
3557
+ viewBox="0 0 32 32"
3558
+ fill="currentColor"
3559
+ aria-hidden="true"
3560
+ role="img"
3561
+ width="1em"
3562
+ height="1em"
3563
+ >
3564
+ <path
3565
+ 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"
3566
+ />
3567
+ </svg>
3346
3568
  </span>
3347
3569
  </button>
3348
3570
  </div>
@@ -3368,7 +3590,19 @@ wrapperTag: div
3368
3590
  aria-label="Actions"
3369
3591
  >
3370
3592
  <span class="pf-v6-c-menu-toggle__icon">
3371
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
3593
+ <svg
3594
+ class="pf-v6-svg"
3595
+ viewBox="0 0 32 32"
3596
+ fill="currentColor"
3597
+ aria-hidden="true"
3598
+ role="img"
3599
+ width="1em"
3600
+ height="1em"
3601
+ >
3602
+ <path
3603
+ 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"
3604
+ />
3605
+ </svg>
3372
3606
  </span>
3373
3607
  </button>
3374
3608
  </div>
@@ -3501,9 +3735,13 @@ wrapperTag: div
3501
3735
  </section>
3502
3736
  <section
3503
3737
  class="pf-v6-c-page__main-section pf-m-limit-width pf-m-shadow-bottom"
3738
+ aria-labelledby="main-title"
3504
3739
  >
3505
3740
  <div class="pf-v6-c-page__main-body">
3506
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
3741
+ <h1
3742
+ class="pf-v6-c-content--h1 pf-m-page-title"
3743
+ id="main-title"
3744
+ >Main title</h1>
3507
3745
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
3508
3746
  </div>
3509
3747
  </section>
@@ -3834,7 +4072,19 @@ wrapperTag: div
3834
4072
  aria-label="Settings"
3835
4073
  >
3836
4074
  <span class="pf-v6-c-menu-toggle__icon">
3837
- <i class="fas fa-cog" aria-hidden="true"></i>
4075
+ <svg
4076
+ class="pf-v6-svg"
4077
+ viewBox="0 0 32 32"
4078
+ fill="currentColor"
4079
+ aria-hidden="true"
4080
+ role="img"
4081
+ width="1em"
4082
+ height="1em"
4083
+ >
4084
+ <path
4085
+ 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"
4086
+ />
4087
+ </svg>
3838
4088
  </span>
3839
4089
  </button>
3840
4090
  </div>
@@ -3860,7 +4110,19 @@ wrapperTag: div
3860
4110
  aria-label="Actions"
3861
4111
  >
3862
4112
  <span class="pf-v6-c-menu-toggle__icon">
3863
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
4113
+ <svg
4114
+ class="pf-v6-svg"
4115
+ viewBox="0 0 32 32"
4116
+ fill="currentColor"
4117
+ aria-hidden="true"
4118
+ role="img"
4119
+ width="1em"
4120
+ height="1em"
4121
+ >
4122
+ <path
4123
+ 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"
4124
+ />
4125
+ </svg>
3864
4126
  </span>
3865
4127
  </button>
3866
4128
  </div>
@@ -3921,10 +4183,11 @@ wrapperTag: div
3921
4183
  >
3922
4184
  <section
3923
4185
  class="pf-v6-c-page__main-section pf-m-limit-width pf-m-align-center"
4186
+ aria-labelledby="centered-page-sections-title"
3924
4187
  >
3925
4188
  <div class="pf-v6-c-page__main-body">
3926
4189
  <div class="pf-v6-c-content">
3927
- <h1>Centering page sections</h1>
4190
+ <h1 id="centered-page-sections-title">Centering page sections</h1>
3928
4191
  <p>
3929
4192
  When a width limited page section is wider than the value of
3930
4193
  <code>--pf-v6-c-page--section--m-limit-width--MaxWidth</code>, the section will be centered in the main section.
@@ -3936,6 +4199,7 @@ wrapperTag: div
3936
4199
  <hr class="pf-v6-c-divider" />
3937
4200
  <section
3938
4201
  class="pf-v6-c-page__main-section pf-m-limit-width pf-m-align-center"
4202
+ aria-label="Gallery cards section"
3939
4203
  >
3940
4204
  <div class="pf-v6-c-page__main-body">
3941
4205
  <div class="pf-v6-l-gallery pf-m-gutter">
@@ -3975,6 +4239,7 @@ wrapperTag: div
3975
4239
  <hr class="pf-v6-c-divider" />
3976
4240
  <section
3977
4241
  class="pf-v6-c-page__main-section pf-m-limit-width pf-m-align-center pf-v6-u-text-align-center"
4242
+ aria-label="Centered text section"
3978
4243
  >
3979
4244
  <div class="pf-v6-c-page__main-body">
3980
4245
  <div class="pf-v6-c-card">
@@ -4148,7 +4413,19 @@ wrapperTag: div
4148
4413
  aria-label="Settings"
4149
4414
  >
4150
4415
  <span class="pf-v6-c-menu-toggle__icon">
4151
- <i class="fas fa-cog" aria-hidden="true"></i>
4416
+ <svg
4417
+ class="pf-v6-svg"
4418
+ viewBox="0 0 32 32"
4419
+ fill="currentColor"
4420
+ aria-hidden="true"
4421
+ role="img"
4422
+ width="1em"
4423
+ height="1em"
4424
+ >
4425
+ <path
4426
+ 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"
4427
+ />
4428
+ </svg>
4152
4429
  </span>
4153
4430
  </button>
4154
4431
  </div>
@@ -4174,7 +4451,19 @@ wrapperTag: div
4174
4451
  aria-label="Actions"
4175
4452
  >
4176
4453
  <span class="pf-v6-c-menu-toggle__icon">
4177
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
4454
+ <svg
4455
+ class="pf-v6-svg"
4456
+ viewBox="0 0 32 32"
4457
+ fill="currentColor"
4458
+ aria-hidden="true"
4459
+ role="img"
4460
+ width="1em"
4461
+ height="1em"
4462
+ >
4463
+ <path
4464
+ 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"
4465
+ />
4466
+ </svg>
4178
4467
  </span>
4179
4468
  </button>
4180
4469
  </div>
@@ -4198,7 +4487,19 @@ wrapperTag: div
4198
4487
  <span class="pf-v6-c-menu-toggle__text">Administrator</span>
4199
4488
  <span class="pf-v6-c-menu-toggle__controls">
4200
4489
  <span class="pf-v6-c-menu-toggle__toggle-icon">
4201
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
4490
+ <svg
4491
+ class="pf-v6-svg"
4492
+ viewBox="0 0 20 20"
4493
+ fill="currentColor"
4494
+ aria-hidden="true"
4495
+ role="img"
4496
+ width="1em"
4497
+ height="1em"
4498
+ >
4499
+ <path
4500
+ 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"
4501
+ />
4502
+ </svg>
4202
4503
  </span>
4203
4504
  </span>
4204
4505
  </button>
@@ -4322,9 +4623,15 @@ wrapperTag: div
4322
4623
  </nav>
4323
4624
  </div>
4324
4625
  </section>
4325
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
4626
+ <section
4627
+ class="pf-v6-c-page__main-section pf-m-limit-width"
4628
+ aria-labelledby="main-title"
4629
+ >
4326
4630
  <div class="pf-v6-c-page__main-body">
4327
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
4631
+ <h1
4632
+ class="pf-v6-c-content--h1 pf-m-page-title"
4633
+ id="main-title"
4634
+ >Main title</h1>
4328
4635
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
4329
4636
  </div>
4330
4637
  </section>
@@ -4525,7 +4832,19 @@ wrapperTag: div
4525
4832
  aria-label="Settings"
4526
4833
  >
4527
4834
  <span class="pf-v6-c-menu-toggle__icon">
4528
- <i class="fas fa-cog" aria-hidden="true"></i>
4835
+ <svg
4836
+ class="pf-v6-svg"
4837
+ viewBox="0 0 32 32"
4838
+ fill="currentColor"
4839
+ aria-hidden="true"
4840
+ role="img"
4841
+ width="1em"
4842
+ height="1em"
4843
+ >
4844
+ <path
4845
+ 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"
4846
+ />
4847
+ </svg>
4529
4848
  </span>
4530
4849
  </button>
4531
4850
  </div>
@@ -4551,7 +4870,19 @@ wrapperTag: div
4551
4870
  aria-label="Actions"
4552
4871
  >
4553
4872
  <span class="pf-v6-c-menu-toggle__icon">
4554
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
4873
+ <svg
4874
+ class="pf-v6-svg"
4875
+ viewBox="0 0 32 32"
4876
+ fill="currentColor"
4877
+ aria-hidden="true"
4878
+ role="img"
4879
+ width="1em"
4880
+ height="1em"
4881
+ >
4882
+ <path
4883
+ 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"
4884
+ />
4885
+ </svg>
4555
4886
  </span>
4556
4887
  </button>
4557
4888
  </div>
@@ -4575,7 +4906,19 @@ wrapperTag: div
4575
4906
  <span class="pf-v6-c-menu-toggle__text">Administrator</span>
4576
4907
  <span class="pf-v6-c-menu-toggle__controls">
4577
4908
  <span class="pf-v6-c-menu-toggle__toggle-icon">
4578
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
4909
+ <svg
4910
+ class="pf-v6-svg"
4911
+ viewBox="0 0 20 20"
4912
+ fill="currentColor"
4913
+ aria-hidden="true"
4914
+ role="img"
4915
+ width="1em"
4916
+ height="1em"
4917
+ >
4918
+ <path
4919
+ 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"
4920
+ />
4921
+ </svg>
4579
4922
  </span>
4580
4923
  </span>
4581
4924
  </button>
@@ -4747,9 +5090,15 @@ wrapperTag: div
4747
5090
  </nav>
4748
5091
  </div>
4749
5092
  </section>
4750
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
5093
+ <section
5094
+ class="pf-v6-c-page__main-section pf-m-limit-width"
5095
+ aria-labelledby="main-title"
5096
+ >
4751
5097
  <div class="pf-v6-c-page__main-body">
4752
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
5098
+ <h1
5099
+ class="pf-v6-c-content--h1 pf-m-page-title"
5100
+ id="main-title"
5101
+ >Main title</h1>
4753
5102
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
4754
5103
  </div>
4755
5104
  </section>
@@ -4950,7 +5299,19 @@ wrapperTag: div
4950
5299
  aria-label="Settings"
4951
5300
  >
4952
5301
  <span class="pf-v6-c-menu-toggle__icon">
4953
- <i class="fas fa-cog" aria-hidden="true"></i>
5302
+ <svg
5303
+ class="pf-v6-svg"
5304
+ viewBox="0 0 32 32"
5305
+ fill="currentColor"
5306
+ aria-hidden="true"
5307
+ role="img"
5308
+ width="1em"
5309
+ height="1em"
5310
+ >
5311
+ <path
5312
+ 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"
5313
+ />
5314
+ </svg>
4954
5315
  </span>
4955
5316
  </button>
4956
5317
  </div>
@@ -4976,7 +5337,19 @@ wrapperTag: div
4976
5337
  aria-label="Actions"
4977
5338
  >
4978
5339
  <span class="pf-v6-c-menu-toggle__icon">
4979
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
5340
+ <svg
5341
+ class="pf-v6-svg"
5342
+ viewBox="0 0 32 32"
5343
+ fill="currentColor"
5344
+ aria-hidden="true"
5345
+ role="img"
5346
+ width="1em"
5347
+ height="1em"
5348
+ >
5349
+ <path
5350
+ 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"
5351
+ />
5352
+ </svg>
4980
5353
  </span>
4981
5354
  </button>
4982
5355
  </div>
@@ -5107,9 +5480,15 @@ wrapperTag: div
5107
5480
  </nav>
5108
5481
  </div>
5109
5482
  </section>
5110
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
5483
+ <section
5484
+ class="pf-v6-c-page__main-section pf-m-limit-width"
5485
+ aria-labelledby="main-title"
5486
+ >
5111
5487
  <div class="pf-v6-c-page__main-body">
5112
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
5488
+ <h1
5489
+ class="pf-v6-c-content--h1 pf-m-page-title"
5490
+ id="main-title"
5491
+ >Main title</h1>
5113
5492
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
5114
5493
  </div>
5115
5494
  </section>
@@ -5310,7 +5689,19 @@ wrapperTag: div
5310
5689
  aria-label="Settings"
5311
5690
  >
5312
5691
  <span class="pf-v6-c-menu-toggle__icon">
5313
- <i class="fas fa-cog" aria-hidden="true"></i>
5692
+ <svg
5693
+ class="pf-v6-svg"
5694
+ viewBox="0 0 32 32"
5695
+ fill="currentColor"
5696
+ aria-hidden="true"
5697
+ role="img"
5698
+ width="1em"
5699
+ height="1em"
5700
+ >
5701
+ <path
5702
+ 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"
5703
+ />
5704
+ </svg>
5314
5705
  </span>
5315
5706
  </button>
5316
5707
  </div>
@@ -5336,7 +5727,19 @@ wrapperTag: div
5336
5727
  aria-label="Actions"
5337
5728
  >
5338
5729
  <span class="pf-v6-c-menu-toggle__icon">
5339
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
5730
+ <svg
5731
+ class="pf-v6-svg"
5732
+ viewBox="0 0 32 32"
5733
+ fill="currentColor"
5734
+ aria-hidden="true"
5735
+ role="img"
5736
+ width="1em"
5737
+ height="1em"
5738
+ >
5739
+ <path
5740
+ 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"
5741
+ />
5742
+ </svg>
5340
5743
  </span>
5341
5744
  </button>
5342
5745
  </div>
@@ -5467,9 +5870,15 @@ wrapperTag: div
5467
5870
  </nav>
5468
5871
  </div>
5469
5872
  </section>
5470
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
5873
+ <section
5874
+ class="pf-v6-c-page__main-section pf-m-limit-width"
5875
+ aria-labelledby="main-title"
5876
+ >
5471
5877
  <div class="pf-v6-c-page__main-body">
5472
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
5878
+ <h1
5879
+ class="pf-v6-c-content--h1 pf-m-page-title"
5880
+ id="main-title"
5881
+ >Main title</h1>
5473
5882
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
5474
5883
  </div>
5475
5884
  </section>
@@ -5670,7 +6079,19 @@ wrapperTag: div
5670
6079
  aria-label="Settings"
5671
6080
  >
5672
6081
  <span class="pf-v6-c-menu-toggle__icon">
5673
- <i class="fas fa-cog" aria-hidden="true"></i>
6082
+ <svg
6083
+ class="pf-v6-svg"
6084
+ viewBox="0 0 32 32"
6085
+ fill="currentColor"
6086
+ aria-hidden="true"
6087
+ role="img"
6088
+ width="1em"
6089
+ height="1em"
6090
+ >
6091
+ <path
6092
+ 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"
6093
+ />
6094
+ </svg>
5674
6095
  </span>
5675
6096
  </button>
5676
6097
  </div>
@@ -5696,7 +6117,19 @@ wrapperTag: div
5696
6117
  aria-label="Actions"
5697
6118
  >
5698
6119
  <span class="pf-v6-c-menu-toggle__icon">
5699
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
6120
+ <svg
6121
+ class="pf-v6-svg"
6122
+ viewBox="0 0 32 32"
6123
+ fill="currentColor"
6124
+ aria-hidden="true"
6125
+ role="img"
6126
+ width="1em"
6127
+ height="1em"
6128
+ >
6129
+ <path
6130
+ 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"
6131
+ />
6132
+ </svg>
5700
6133
  </span>
5701
6134
  </button>
5702
6135
  </div>
@@ -5784,9 +6217,15 @@ wrapperTag: div
5784
6217
  </nav>
5785
6218
  </div>
5786
6219
  </section>
5787
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
6220
+ <section
6221
+ class="pf-v6-c-page__main-section pf-m-limit-width"
6222
+ aria-labelledby="main-title"
6223
+ >
5788
6224
  <div class="pf-v6-c-page__main-body">
5789
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
6225
+ <h1
6226
+ class="pf-v6-c-content--h1 pf-m-page-title"
6227
+ id="main-title"
6228
+ >Main title</h1>
5790
6229
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
5791
6230
  </div>
5792
6231
  </section>
@@ -5914,9 +6353,15 @@ wrapperTag: div
5914
6353
  </nav>
5915
6354
  </div>
5916
6355
  </section>
5917
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
6356
+ <section
6357
+ class="pf-v6-c-page__main-section pf-m-limit-width"
6358
+ aria-labelledby="main-title"
6359
+ >
5918
6360
  <div class="pf-v6-c-page__main-body">
5919
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
6361
+ <h1
6362
+ class="pf-v6-c-content--h1 pf-m-page-title"
6363
+ id="main-title"
6364
+ >Main title</h1>
5920
6365
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
5921
6366
  </div>
5922
6367
  </section>