@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
@@ -159,7 +159,19 @@ cssPrefix: pf-d-description-list
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 @@ cssPrefix: pf-d-description-list
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 @@ cssPrefix: pf-d-description-list
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>
@@ -587,7 +617,19 @@ cssPrefix: pf-d-description-list
587
617
  aria-label="Settings"
588
618
  >
589
619
  <span class="pf-v6-c-menu-toggle__icon">
590
- <i class="fas fa-cog" aria-hidden="true"></i>
620
+ <svg
621
+ class="pf-v6-svg"
622
+ viewBox="0 0 32 32"
623
+ fill="currentColor"
624
+ aria-hidden="true"
625
+ role="img"
626
+ width="1em"
627
+ height="1em"
628
+ >
629
+ <path
630
+ 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"
631
+ />
632
+ </svg>
591
633
  </span>
592
634
  </button>
593
635
  </div>
@@ -613,7 +655,19 @@ cssPrefix: pf-d-description-list
613
655
  aria-label="Actions"
614
656
  >
615
657
  <span class="pf-v6-c-menu-toggle__icon">
616
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
658
+ <svg
659
+ class="pf-v6-svg"
660
+ viewBox="0 0 32 32"
661
+ fill="currentColor"
662
+ aria-hidden="true"
663
+ role="img"
664
+ width="1em"
665
+ height="1em"
666
+ >
667
+ <path
668
+ 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"
669
+ />
670
+ </svg>
617
671
  </span>
618
672
  </button>
619
673
  </div>
@@ -758,9 +812,15 @@ cssPrefix: pf-d-description-list
758
812
  </nav>
759
813
  </div>
760
814
  </section>
761
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
815
+ <section
816
+ class="pf-v6-c-page__main-section pf-m-limit-width"
817
+ aria-labelledby="main-title"
818
+ >
762
819
  <div class="pf-v6-c-page__main-body">
763
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
820
+ <h1
821
+ class="pf-v6-c-content--h1 pf-m-page-title"
822
+ id="main-title"
823
+ >Main title</h1>
764
824
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
765
825
  </div>
766
826
  </section>
@@ -815,7 +875,19 @@ cssPrefix: pf-d-description-list
815
875
  id="description-list-in-drawer-example-toggle"
816
876
  >
817
877
  <span class="pf-v6-c-menu-toggle__icon">
818
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
878
+ <svg
879
+ class="pf-v6-svg"
880
+ viewBox="0 0 32 32"
881
+ fill="currentColor"
882
+ aria-hidden="true"
883
+ role="img"
884
+ width="1em"
885
+ height="1em"
886
+ >
887
+ <path
888
+ 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"
889
+ />
890
+ </svg>
819
891
  </span>
820
892
  </button>
821
893
  <div class="pf-v6-c-drawer__close">
@@ -1301,7 +1373,19 @@ cssPrefix: pf-d-description-list
1301
1373
  aria-label="Settings"
1302
1374
  >
1303
1375
  <span class="pf-v6-c-menu-toggle__icon">
1304
- <i class="fas fa-cog" aria-hidden="true"></i>
1376
+ <svg
1377
+ class="pf-v6-svg"
1378
+ viewBox="0 0 32 32"
1379
+ fill="currentColor"
1380
+ aria-hidden="true"
1381
+ role="img"
1382
+ width="1em"
1383
+ height="1em"
1384
+ >
1385
+ <path
1386
+ 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"
1387
+ />
1388
+ </svg>
1305
1389
  </span>
1306
1390
  </button>
1307
1391
  </div>
@@ -1327,7 +1411,19 @@ cssPrefix: pf-d-description-list
1327
1411
  aria-label="Actions"
1328
1412
  >
1329
1413
  <span class="pf-v6-c-menu-toggle__icon">
1330
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1414
+ <svg
1415
+ class="pf-v6-svg"
1416
+ viewBox="0 0 32 32"
1417
+ fill="currentColor"
1418
+ aria-hidden="true"
1419
+ role="img"
1420
+ width="1em"
1421
+ height="1em"
1422
+ >
1423
+ <path
1424
+ 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"
1425
+ />
1426
+ </svg>
1331
1427
  </span>
1332
1428
  </button>
1333
1429
  </div>
@@ -1458,9 +1554,15 @@ cssPrefix: pf-d-description-list
1458
1554
  </nav>
1459
1555
  </div>
1460
1556
  </section>
1461
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
1557
+ <section
1558
+ class="pf-v6-c-page__main-section pf-m-limit-width"
1559
+ aria-labelledby="main-title"
1560
+ >
1462
1561
  <div class="pf-v6-c-page__main-body">
1463
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
1562
+ <h1
1563
+ class="pf-v6-c-content--h1 pf-m-page-title"
1564
+ id="main-title"
1565
+ >Main title</h1>
1464
1566
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
1465
1567
  </div>
1466
1568
  </section>
@@ -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>
@@ -330,9 +354,15 @@ wrapperTag: div
330
354
  </nav>
331
355
  </div>
332
356
  </section>
333
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
357
+ <section
358
+ class="pf-v6-c-page__main-section pf-m-limit-width"
359
+ aria-labelledby="main-title"
360
+ >
334
361
  <div class="pf-v6-c-page__main-body">
335
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
362
+ <h1
363
+ class="pf-v6-c-content--h1 pf-m-page-title"
364
+ id="main-title"
365
+ >Main title</h1>
336
366
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
337
367
  </div>
338
368
  </section>
@@ -387,7 +417,19 @@ wrapperTag: div
387
417
  id="drawer-collapsed-example-toggle"
388
418
  >
389
419
  <span class="pf-v6-c-menu-toggle__icon">
390
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
420
+ <svg
421
+ class="pf-v6-svg"
422
+ viewBox="0 0 32 32"
423
+ fill="currentColor"
424
+ aria-hidden="true"
425
+ role="img"
426
+ width="1em"
427
+ height="1em"
428
+ >
429
+ <path
430
+ 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"
431
+ />
432
+ </svg>
391
433
  </span>
392
434
  </button>
393
435
  <div class="pf-v6-c-drawer__close">
@@ -705,7 +747,19 @@ wrapperTag: div
705
747
  aria-label="Settings"
706
748
  >
707
749
  <span class="pf-v6-c-menu-toggle__icon">
708
- <i class="fas fa-cog" aria-hidden="true"></i>
750
+ <svg
751
+ class="pf-v6-svg"
752
+ viewBox="0 0 32 32"
753
+ fill="currentColor"
754
+ aria-hidden="true"
755
+ role="img"
756
+ width="1em"
757
+ height="1em"
758
+ >
759
+ <path
760
+ 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"
761
+ />
762
+ </svg>
709
763
  </span>
710
764
  </button>
711
765
  </div>
@@ -731,7 +785,19 @@ wrapperTag: div
731
785
  aria-label="Actions"
732
786
  >
733
787
  <span class="pf-v6-c-menu-toggle__icon">
734
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
788
+ <svg
789
+ class="pf-v6-svg"
790
+ viewBox="0 0 32 32"
791
+ fill="currentColor"
792
+ aria-hidden="true"
793
+ role="img"
794
+ width="1em"
795
+ height="1em"
796
+ >
797
+ <path
798
+ 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"
799
+ />
800
+ </svg>
735
801
  </span>
736
802
  </button>
737
803
  </div>
@@ -876,9 +942,15 @@ wrapperTag: div
876
942
  </nav>
877
943
  </div>
878
944
  </section>
879
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
945
+ <section
946
+ class="pf-v6-c-page__main-section pf-m-limit-width"
947
+ aria-labelledby="main-title"
948
+ >
880
949
  <div class="pf-v6-c-page__main-body">
881
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
950
+ <h1
951
+ class="pf-v6-c-content--h1 pf-m-page-title"
952
+ id="main-title"
953
+ >Main title</h1>
882
954
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
883
955
  </div>
884
956
  </section>
@@ -1087,7 +1159,19 @@ wrapperTag: div
1087
1159
  aria-label="Settings"
1088
1160
  >
1089
1161
  <span class="pf-v6-c-menu-toggle__icon">
1090
- <i class="fas fa-cog" aria-hidden="true"></i>
1162
+ <svg
1163
+ class="pf-v6-svg"
1164
+ viewBox="0 0 32 32"
1165
+ fill="currentColor"
1166
+ aria-hidden="true"
1167
+ role="img"
1168
+ width="1em"
1169
+ height="1em"
1170
+ >
1171
+ <path
1172
+ 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"
1173
+ />
1174
+ </svg>
1091
1175
  </span>
1092
1176
  </button>
1093
1177
  </div>
@@ -1113,7 +1197,19 @@ wrapperTag: div
1113
1197
  aria-label="Actions"
1114
1198
  >
1115
1199
  <span class="pf-v6-c-menu-toggle__icon">
1116
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1200
+ <svg
1201
+ class="pf-v6-svg"
1202
+ viewBox="0 0 32 32"
1203
+ fill="currentColor"
1204
+ aria-hidden="true"
1205
+ role="img"
1206
+ width="1em"
1207
+ height="1em"
1208
+ >
1209
+ <path
1210
+ 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"
1211
+ />
1212
+ </svg>
1117
1213
  </span>
1118
1214
  </button>
1119
1215
  </div>
@@ -1258,9 +1354,15 @@ wrapperTag: div
1258
1354
  </nav>
1259
1355
  </div>
1260
1356
  </section>
1261
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
1357
+ <section
1358
+ class="pf-v6-c-page__main-section pf-m-limit-width"
1359
+ aria-labelledby="main-title"
1360
+ >
1262
1361
  <div class="pf-v6-c-page__main-body">
1263
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
1362
+ <h1
1363
+ class="pf-v6-c-content--h1 pf-m-page-title"
1364
+ id="main-title"
1365
+ >Main title</h1>
1264
1366
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
1265
1367
  </div>
1266
1368
  </section>
@@ -1469,7 +1571,19 @@ wrapperTag: div
1469
1571
  aria-label="Settings"
1470
1572
  >
1471
1573
  <span class="pf-v6-c-menu-toggle__icon">
1472
- <i class="fas fa-cog" aria-hidden="true"></i>
1574
+ <svg
1575
+ class="pf-v6-svg"
1576
+ viewBox="0 0 32 32"
1577
+ fill="currentColor"
1578
+ aria-hidden="true"
1579
+ role="img"
1580
+ width="1em"
1581
+ height="1em"
1582
+ >
1583
+ <path
1584
+ 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"
1585
+ />
1586
+ </svg>
1473
1587
  </span>
1474
1588
  </button>
1475
1589
  </div>
@@ -1495,7 +1609,19 @@ wrapperTag: div
1495
1609
  aria-label="Actions"
1496
1610
  >
1497
1611
  <span class="pf-v6-c-menu-toggle__icon">
1498
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1612
+ <svg
1613
+ class="pf-v6-svg"
1614
+ viewBox="0 0 32 32"
1615
+ fill="currentColor"
1616
+ aria-hidden="true"
1617
+ role="img"
1618
+ width="1em"
1619
+ height="1em"
1620
+ >
1621
+ <path
1622
+ 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"
1623
+ />
1624
+ </svg>
1499
1625
  </span>
1500
1626
  </button>
1501
1627
  </div>
@@ -1915,7 +2041,19 @@ wrapperTag: div
1915
2041
  aria-label="Settings"
1916
2042
  >
1917
2043
  <span class="pf-v6-c-menu-toggle__icon">
1918
- <i class="fas fa-cog" aria-hidden="true"></i>
2044
+ <svg
2045
+ class="pf-v6-svg"
2046
+ viewBox="0 0 32 32"
2047
+ fill="currentColor"
2048
+ aria-hidden="true"
2049
+ role="img"
2050
+ width="1em"
2051
+ height="1em"
2052
+ >
2053
+ <path
2054
+ 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"
2055
+ />
2056
+ </svg>
1919
2057
  </span>
1920
2058
  </button>
1921
2059
  </div>
@@ -1941,7 +2079,19 @@ wrapperTag: div
1941
2079
  aria-label="Actions"
1942
2080
  >
1943
2081
  <span class="pf-v6-c-menu-toggle__icon">
1944
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
2082
+ <svg
2083
+ class="pf-v6-svg"
2084
+ viewBox="0 0 32 32"
2085
+ fill="currentColor"
2086
+ aria-hidden="true"
2087
+ role="img"
2088
+ width="1em"
2089
+ height="1em"
2090
+ >
2091
+ <path
2092
+ 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"
2093
+ />
2094
+ </svg>
1945
2095
  </span>
1946
2096
  </button>
1947
2097
  </div>