@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 @@ section: components
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 @@ section: components
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 @@ section: components
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>
@@ -576,7 +606,19 @@ section: components
576
606
  aria-label="Settings"
577
607
  >
578
608
  <span class="pf-v6-c-menu-toggle__icon">
579
- <i class="fas fa-cog" aria-hidden="true"></i>
609
+ <svg
610
+ class="pf-v6-svg"
611
+ viewBox="0 0 32 32"
612
+ fill="currentColor"
613
+ aria-hidden="true"
614
+ role="img"
615
+ width="1em"
616
+ height="1em"
617
+ >
618
+ <path
619
+ 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"
620
+ />
621
+ </svg>
580
622
  </span>
581
623
  </button>
582
624
  </div>
@@ -602,7 +644,19 @@ section: components
602
644
  aria-label="Actions"
603
645
  >
604
646
  <span class="pf-v6-c-menu-toggle__icon">
605
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
647
+ <svg
648
+ class="pf-v6-svg"
649
+ viewBox="0 0 32 32"
650
+ fill="currentColor"
651
+ aria-hidden="true"
652
+ role="img"
653
+ width="1em"
654
+ height="1em"
655
+ >
656
+ <path
657
+ 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"
658
+ />
659
+ </svg>
606
660
  </span>
607
661
  </button>
608
662
  </div>
@@ -733,9 +787,15 @@ section: components
733
787
  </nav>
734
788
  </div>
735
789
  </section>
736
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
790
+ <section
791
+ class="pf-v6-c-page__main-section pf-m-limit-width"
792
+ aria-labelledby="main-title"
793
+ >
737
794
  <div class="pf-v6-c-page__main-body">
738
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
795
+ <h1
796
+ class="pf-v6-c-content--h1 pf-m-page-title"
797
+ id="main-title"
798
+ >Main title</h1>
739
799
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
740
800
  </div>
741
801
  </section>
@@ -1003,7 +1063,19 @@ section: components
1003
1063
  aria-label="Settings"
1004
1064
  >
1005
1065
  <span class="pf-v6-c-menu-toggle__icon">
1006
- <i class="fas fa-cog" aria-hidden="true"></i>
1066
+ <svg
1067
+ class="pf-v6-svg"
1068
+ viewBox="0 0 32 32"
1069
+ fill="currentColor"
1070
+ aria-hidden="true"
1071
+ role="img"
1072
+ width="1em"
1073
+ height="1em"
1074
+ >
1075
+ <path
1076
+ 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"
1077
+ />
1078
+ </svg>
1007
1079
  </span>
1008
1080
  </button>
1009
1081
  </div>
@@ -1029,7 +1101,19 @@ section: components
1029
1101
  aria-label="Actions"
1030
1102
  >
1031
1103
  <span class="pf-v6-c-menu-toggle__icon">
1032
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1104
+ <svg
1105
+ class="pf-v6-svg"
1106
+ viewBox="0 0 32 32"
1107
+ fill="currentColor"
1108
+ aria-hidden="true"
1109
+ role="img"
1110
+ width="1em"
1111
+ height="1em"
1112
+ >
1113
+ <path
1114
+ 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"
1115
+ />
1116
+ </svg>
1033
1117
  </span>
1034
1118
  </button>
1035
1119
  </div>
@@ -1160,9 +1244,15 @@ section: components
1160
1244
  </nav>
1161
1245
  </div>
1162
1246
  </section>
1163
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
1247
+ <section
1248
+ class="pf-v6-c-page__main-section pf-m-limit-width"
1249
+ aria-labelledby="main-title"
1250
+ >
1164
1251
  <div class="pf-v6-c-page__main-body">
1165
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
1252
+ <h1
1253
+ class="pf-v6-c-content--h1 pf-m-page-title"
1254
+ id="main-title"
1255
+ >Main title</h1>
1166
1256
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
1167
1257
  </div>
1168
1258
  </section>
@@ -1420,7 +1510,19 @@ section: components
1420
1510
  aria-label="Settings"
1421
1511
  >
1422
1512
  <span class="pf-v6-c-menu-toggle__icon">
1423
- <i class="fas fa-cog" aria-hidden="true"></i>
1513
+ <svg
1514
+ class="pf-v6-svg"
1515
+ viewBox="0 0 32 32"
1516
+ fill="currentColor"
1517
+ aria-hidden="true"
1518
+ role="img"
1519
+ width="1em"
1520
+ height="1em"
1521
+ >
1522
+ <path
1523
+ 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"
1524
+ />
1525
+ </svg>
1424
1526
  </span>
1425
1527
  </button>
1426
1528
  </div>
@@ -1446,7 +1548,19 @@ section: components
1446
1548
  aria-label="Actions"
1447
1549
  >
1448
1550
  <span class="pf-v6-c-menu-toggle__icon">
1449
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1551
+ <svg
1552
+ class="pf-v6-svg"
1553
+ viewBox="0 0 32 32"
1554
+ fill="currentColor"
1555
+ aria-hidden="true"
1556
+ role="img"
1557
+ width="1em"
1558
+ height="1em"
1559
+ >
1560
+ <path
1561
+ 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"
1562
+ />
1563
+ </svg>
1450
1564
  </span>
1451
1565
  </button>
1452
1566
  </div>
@@ -1577,9 +1691,15 @@ section: components
1577
1691
  </nav>
1578
1692
  </div>
1579
1693
  </section>
1580
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
1694
+ <section
1695
+ class="pf-v6-c-page__main-section pf-m-limit-width"
1696
+ aria-labelledby="main-title"
1697
+ >
1581
1698
  <div class="pf-v6-c-page__main-body">
1582
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
1699
+ <h1
1700
+ class="pf-v6-c-content--h1 pf-m-page-title"
1701
+ id="main-title"
1702
+ >Main title</h1>
1583
1703
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
1584
1704
  </div>
1585
1705
  </section>
@@ -1837,7 +1957,19 @@ section: components
1837
1957
  aria-label="Settings"
1838
1958
  >
1839
1959
  <span class="pf-v6-c-menu-toggle__icon">
1840
- <i class="fas fa-cog" aria-hidden="true"></i>
1960
+ <svg
1961
+ class="pf-v6-svg"
1962
+ viewBox="0 0 32 32"
1963
+ fill="currentColor"
1964
+ aria-hidden="true"
1965
+ role="img"
1966
+ width="1em"
1967
+ height="1em"
1968
+ >
1969
+ <path
1970
+ 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"
1971
+ />
1972
+ </svg>
1841
1973
  </span>
1842
1974
  </button>
1843
1975
  </div>
@@ -1863,7 +1995,19 @@ section: components
1863
1995
  aria-label="Actions"
1864
1996
  >
1865
1997
  <span class="pf-v6-c-menu-toggle__icon">
1866
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1998
+ <svg
1999
+ class="pf-v6-svg"
2000
+ viewBox="0 0 32 32"
2001
+ fill="currentColor"
2002
+ aria-hidden="true"
2003
+ role="img"
2004
+ width="1em"
2005
+ height="1em"
2006
+ >
2007
+ <path
2008
+ 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"
2009
+ />
2010
+ </svg>
1867
2011
  </span>
1868
2012
  </button>
1869
2013
  </div>
@@ -1994,9 +2138,15 @@ section: components
1994
2138
  </nav>
1995
2139
  </div>
1996
2140
  </section>
1997
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
2141
+ <section
2142
+ class="pf-v6-c-page__main-section pf-m-limit-width"
2143
+ aria-labelledby="main-title"
2144
+ >
1998
2145
  <div class="pf-v6-c-page__main-body">
1999
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
2146
+ <h1
2147
+ class="pf-v6-c-content--h1 pf-m-page-title"
2148
+ id="main-title"
2149
+ >Main title</h1>
2000
2150
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
2001
2151
  </div>
2002
2152
  </section>
@@ -2254,7 +2404,19 @@ section: components
2254
2404
  aria-label="Settings"
2255
2405
  >
2256
2406
  <span class="pf-v6-c-menu-toggle__icon">
2257
- <i class="fas fa-cog" aria-hidden="true"></i>
2407
+ <svg
2408
+ class="pf-v6-svg"
2409
+ viewBox="0 0 32 32"
2410
+ fill="currentColor"
2411
+ aria-hidden="true"
2412
+ role="img"
2413
+ width="1em"
2414
+ height="1em"
2415
+ >
2416
+ <path
2417
+ 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"
2418
+ />
2419
+ </svg>
2258
2420
  </span>
2259
2421
  </button>
2260
2422
  </div>
@@ -2280,7 +2442,19 @@ section: components
2280
2442
  aria-label="Actions"
2281
2443
  >
2282
2444
  <span class="pf-v6-c-menu-toggle__icon">
2283
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
2445
+ <svg
2446
+ class="pf-v6-svg"
2447
+ viewBox="0 0 32 32"
2448
+ fill="currentColor"
2449
+ aria-hidden="true"
2450
+ role="img"
2451
+ width="1em"
2452
+ height="1em"
2453
+ >
2454
+ <path
2455
+ 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"
2456
+ />
2457
+ </svg>
2284
2458
  </span>
2285
2459
  </button>
2286
2460
  </div>
@@ -2411,9 +2585,15 @@ section: components
2411
2585
  </nav>
2412
2586
  </div>
2413
2587
  </section>
2414
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
2588
+ <section
2589
+ class="pf-v6-c-page__main-section pf-m-limit-width"
2590
+ aria-labelledby="main-title"
2591
+ >
2415
2592
  <div class="pf-v6-c-page__main-body">
2416
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
2593
+ <h1
2594
+ class="pf-v6-c-content--h1 pf-m-page-title"
2595
+ id="main-title"
2596
+ >Main title</h1>
2417
2597
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
2418
2598
  </div>
2419
2599
  </section>