@patternfly/patternfly 6.5.0-prerelease.62 → 6.5.0-prerelease.63

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 (51) hide show
  1. package/components/Button/button.css +2 -2
  2. package/components/Button/button.scss +3 -3
  3. package/components/Menu/menu.css +26 -19
  4. package/components/Menu/menu.scss +26 -19
  5. package/components/MenuToggle/menu-toggle.css +9 -5
  6. package/components/MenuToggle/menu-toggle.scss +12 -5
  7. package/components/_index.css +37 -26
  8. package/docs/components/Breadcrumb/examples/Breadcrumb.md +13 -1
  9. package/docs/components/CalendarMonth/examples/CalendarMonth.md +52 -4
  10. package/docs/components/Card/examples/Card.md +130 -10
  11. package/docs/components/DataList/examples/DataList.md +221 -17
  12. package/docs/components/DualListSelector/examples/DualListSelector.md +234 -18
  13. package/docs/components/Hint/examples/Hint.md +39 -3
  14. package/docs/components/InlineEdit/examples/InlineEdit.md +26 -2
  15. package/docs/components/InputGroup/examples/InputGroup.md +13 -1
  16. package/docs/components/Login/examples/Login.md +13 -1
  17. package/docs/components/Menu/examples/Menu.md +195 -15
  18. package/docs/components/MenuToggle/examples/MenuToggle.md +1331 -100
  19. package/docs/components/NotificationDrawer/examples/NotificationDrawer.md +481 -37
  20. package/docs/components/OverflowMenu/examples/overflow-menu.md +65 -5
  21. package/docs/components/Pagination/examples/Pagination.md +169 -13
  22. package/docs/components/Table/examples/Table.md +3461 -269
  23. package/docs/components/Toolbar/examples/Toolbar.md +507 -39
  24. package/docs/demos/AboutModal/examples/AboutModal.md +26 -2
  25. package/docs/demos/Alert/examples/Alert.md +78 -6
  26. package/docs/demos/BackToTop/examples/BackToTop.md +26 -2
  27. package/docs/demos/Banner/examples/Banner.md +52 -4
  28. package/docs/demos/Card/examples/Card.md +78 -6
  29. package/docs/demos/CardView/examples/CardView.md +206 -20
  30. package/docs/demos/Compass/examples/Compass.md +431 -56
  31. package/docs/demos/Dashboard/examples/Dashboard.md +63 -9
  32. package/docs/demos/DataList/examples/DataList.md +369 -45
  33. package/docs/demos/DescriptionList/examples/DescriptionList.md +91 -7
  34. package/docs/demos/Drawer/examples/Drawer.md +143 -11
  35. package/docs/demos/JumpLinks/examples/JumpLinks.md +156 -12
  36. package/docs/demos/Masthead/examples/Masthead.md +156 -12
  37. package/docs/demos/Modal/examples/Modal.md +156 -12
  38. package/docs/demos/Nav/examples/Nav.md +104 -8
  39. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +975 -75
  40. package/docs/demos/Page/examples/Page.md +390 -30
  41. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +593 -83
  42. package/docs/demos/Skeleton/examples/Skeleton.md +26 -2
  43. package/docs/demos/Table/examples/Table.md +2518 -322
  44. package/docs/demos/Tabs/examples/Tabs.md +247 -19
  45. package/docs/demos/Toolbar/examples/Toolbar.md +659 -59
  46. package/docs/demos/Wizard/examples/Wizard.md +234 -18
  47. package/package.json +1 -1
  48. package/patternfly-no-globals.css +37 -26
  49. package/patternfly.css +37 -26
  50. package/patternfly.min.css +1 -1
  51. package/patternfly.min.css.map +1 -1
package/docs/demos/Compass/examples/Compass.md CHANGED
@@ -442,7 +442,19 @@ This demo populates the main Compass section with a card view, which is one of t
442
442
  <span class="pf-v6-c-menu-toggle__text">Ned Username</span>
443
443
  <span class="pf-v6-c-menu-toggle__controls">
444
444
  <span class="pf-v6-c-menu-toggle__toggle-icon">
445
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
445
+ <svg
446
+ class="pf-v6-svg"
447
+ viewBox="0 0 20 20"
448
+ fill="currentColor"
449
+ aria-hidden="true"
450
+ role="img"
451
+ width="1em"
452
+ height="1em"
453
+ >
454
+ <path
455
+ 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"
456
+ />
457
+ </svg>
446
458
  </span>
447
459
  </span>
448
460
  </button>
@@ -643,10 +655,19 @@ This demo populates the main Compass section with a card view, which is one of t
643
655
  >
644
656
  <span class="pf-v6-c-menu-toggle__controls">
645
657
  <span class="pf-v6-c-menu-toggle__toggle-icon">
646
- <i
647
- class="fas fa-caret-down fa-fw"
658
+ <svg
659
+ class="pf-v6-svg"
660
+ viewBox="0 0 20 20"
661
+ fill="currentColor"
648
662
  aria-hidden="true"
649
- ></i>
663
+ role="img"
664
+ width="1em"
665
+ height="1em"
666
+ >
667
+ <path
668
+ 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"
669
+ />
670
+ </svg>
650
671
  </span>
651
672
  </span>
652
673
  </button>
@@ -663,7 +684,19 @@ This demo populates the main Compass section with a card view, which is one of t
663
684
  <span class="pf-v6-c-menu-toggle__text">Status</span>
664
685
  <span class="pf-v6-c-menu-toggle__controls">
665
686
  <span class="pf-v6-c-menu-toggle__toggle-icon">
666
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
687
+ <svg
688
+ class="pf-v6-svg"
689
+ viewBox="0 0 20 20"
690
+ fill="currentColor"
691
+ aria-hidden="true"
692
+ role="img"
693
+ width="1em"
694
+ height="1em"
695
+ >
696
+ <path
697
+ 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"
698
+ />
699
+ </svg>
667
700
  </span>
668
701
  </span>
669
702
  </button>
@@ -694,7 +727,19 @@ This demo populates the main Compass section with a card view, which is one of t
694
727
  id="-toolbar-overflow-menu-toggle"
695
728
  >
696
729
  <span class="pf-v6-c-menu-toggle__icon">
697
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
730
+ <svg
731
+ class="pf-v6-svg"
732
+ viewBox="0 0 32 32"
733
+ fill="currentColor"
734
+ aria-hidden="true"
735
+ role="img"
736
+ width="1em"
737
+ height="1em"
738
+ >
739
+ <path
740
+ 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"
741
+ />
742
+ </svg>
698
743
  </span>
699
744
  </button>
700
745
  </div>
@@ -715,10 +760,19 @@ This demo populates the main Compass section with a card view, which is one of t
715
760
  </span>
716
761
  <span class="pf-v6-c-menu-toggle__controls">
717
762
  <span class="pf-v6-c-menu-toggle__toggle-icon">
718
- <i
719
- class="fas fa-caret-down fa-fw"
763
+ <svg
764
+ class="pf-v6-svg"
765
+ viewBox="0 0 20 20"
766
+ fill="currentColor"
720
767
  aria-hidden="true"
721
- ></i>
768
+ role="img"
769
+ width="1em"
770
+ height="1em"
771
+ >
772
+ <path
773
+ 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"
774
+ />
775
+ </svg>
722
776
  </span>
723
777
  </span>
724
778
  </button>
@@ -836,7 +890,19 @@ This demo populates the main Compass section with a card view, which is one of t
836
890
  id="card-view-basic-example-gallery-card-1-toggle"
837
891
  >
838
892
  <span class="pf-v6-c-menu-toggle__icon">
839
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
893
+ <svg
894
+ class="pf-v6-svg"
895
+ viewBox="0 0 32 32"
896
+ fill="currentColor"
897
+ aria-hidden="true"
898
+ role="img"
899
+ width="1em"
900
+ height="1em"
901
+ >
902
+ <path
903
+ 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"
904
+ />
905
+ </svg>
840
906
  </span>
841
907
  </button>
842
908
  <div class="pf-v6-c-check pf-m-standalone">
@@ -882,7 +948,19 @@ This demo populates the main Compass section with a card view, which is one of t
882
948
  id="card-view-basic-example-gallery-card-2-toggle"
883
949
  >
884
950
  <span class="pf-v6-c-menu-toggle__icon">
885
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
951
+ <svg
952
+ class="pf-v6-svg"
953
+ viewBox="0 0 32 32"
954
+ fill="currentColor"
955
+ aria-hidden="true"
956
+ role="img"
957
+ width="1em"
958
+ height="1em"
959
+ >
960
+ <path
961
+ 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"
962
+ />
963
+ </svg>
886
964
  </span>
887
965
  </button>
888
966
  <div class="pf-v6-c-check pf-m-standalone">
@@ -928,7 +1006,19 @@ This demo populates the main Compass section with a card view, which is one of t
928
1006
  id="card-view-basic-example-gallery-card-3-toggle"
929
1007
  >
930
1008
  <span class="pf-v6-c-menu-toggle__icon">
931
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1009
+ <svg
1010
+ class="pf-v6-svg"
1011
+ viewBox="0 0 32 32"
1012
+ fill="currentColor"
1013
+ aria-hidden="true"
1014
+ role="img"
1015
+ width="1em"
1016
+ height="1em"
1017
+ >
1018
+ <path
1019
+ 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"
1020
+ />
1021
+ </svg>
932
1022
  </span>
933
1023
  </button>
934
1024
  <div class="pf-v6-c-check pf-m-standalone">
@@ -1529,7 +1619,19 @@ This demo populates the main Compass section with a dashboard, which is often us
1529
1619
  <span class="pf-v6-c-menu-toggle__text">Ned Username</span>
1530
1620
  <span class="pf-v6-c-menu-toggle__controls">
1531
1621
  <span class="pf-v6-c-menu-toggle__toggle-icon">
1532
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
1622
+ <svg
1623
+ class="pf-v6-svg"
1624
+ viewBox="0 0 20 20"
1625
+ fill="currentColor"
1626
+ aria-hidden="true"
1627
+ role="img"
1628
+ width="1em"
1629
+ height="1em"
1630
+ >
1631
+ <path
1632
+ 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"
1633
+ />
1634
+ </svg>
1533
1635
  </span>
1534
1636
  </span>
1535
1637
  </button>
@@ -1916,7 +2018,19 @@ This demo populates the main Compass section with a dashboard, which is often us
1916
2018
  <span class="pf-v6-c-menu-toggle__text">24 hours</span>
1917
2019
  <span class="pf-v6-c-menu-toggle__controls">
1918
2020
  <span class="pf-v6-c-menu-toggle__toggle-icon">
1919
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
2021
+ <svg
2022
+ class="pf-v6-svg"
2023
+ viewBox="0 0 20 20"
2024
+ fill="currentColor"
2025
+ aria-hidden="true"
2026
+ role="img"
2027
+ width="1em"
2028
+ height="1em"
2029
+ >
2030
+ <path
2031
+ 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"
2032
+ />
2033
+ </svg>
1920
2034
  </span>
1921
2035
  </span>
1922
2036
  </button>
@@ -2491,7 +2605,19 @@ This demo populates the main Compass section with a dashboard, which is often us
2491
2605
  <span class="pf-v6-c-menu-toggle__text">Status</span>
2492
2606
  <span class="pf-v6-c-menu-toggle__controls">
2493
2607
  <span class="pf-v6-c-menu-toggle__toggle-icon">
2494
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
2608
+ <svg
2609
+ class="pf-v6-svg"
2610
+ viewBox="0 0 20 20"
2611
+ fill="currentColor"
2612
+ aria-hidden="true"
2613
+ role="img"
2614
+ width="1em"
2615
+ height="1em"
2616
+ >
2617
+ <path
2618
+ 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"
2619
+ />
2620
+ </svg>
2495
2621
  </span>
2496
2622
  </span>
2497
2623
  </button>
@@ -3394,7 +3520,19 @@ Without a `.pf-v6-c-compass__panel` wrapping all of the content, there is no rou
3394
3520
  <span class="pf-v6-c-menu-toggle__text">Ned Username</span>
3395
3521
  <span class="pf-v6-c-menu-toggle__controls">
3396
3522
  <span class="pf-v6-c-menu-toggle__toggle-icon">
3397
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
3523
+ <svg
3524
+ class="pf-v6-svg"
3525
+ viewBox="0 0 20 20"
3526
+ fill="currentColor"
3527
+ aria-hidden="true"
3528
+ role="img"
3529
+ width="1em"
3530
+ height="1em"
3531
+ >
3532
+ <path
3533
+ 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"
3534
+ />
3535
+ </svg>
3398
3536
  </span>
3399
3537
  </span>
3400
3538
  </button>
@@ -3596,10 +3734,19 @@ Without a `.pf-v6-c-compass__panel` wrapping all of the content, there is no rou
3596
3734
  >
3597
3735
  <span class="pf-v6-c-menu-toggle__controls">
3598
3736
  <span class="pf-v6-c-menu-toggle__toggle-icon">
3599
- <i
3600
- class="fas fa-caret-down fa-fw"
3737
+ <svg
3738
+ class="pf-v6-svg"
3739
+ viewBox="0 0 20 20"
3740
+ fill="currentColor"
3601
3741
  aria-hidden="true"
3602
- ></i>
3742
+ role="img"
3743
+ width="1em"
3744
+ height="1em"
3745
+ >
3746
+ <path
3747
+ 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"
3748
+ />
3749
+ </svg>
3603
3750
  </span>
3604
3751
  </span>
3605
3752
  </button>
@@ -3616,10 +3763,19 @@ Without a `.pf-v6-c-compass__panel` wrapping all of the content, there is no rou
3616
3763
  <span class="pf-v6-c-menu-toggle__text">Status</span>
3617
3764
  <span class="pf-v6-c-menu-toggle__controls">
3618
3765
  <span class="pf-v6-c-menu-toggle__toggle-icon">
3619
- <i
3620
- class="fas fa-caret-down fa-fw"
3766
+ <svg
3767
+ class="pf-v6-svg"
3768
+ viewBox="0 0 20 20"
3769
+ fill="currentColor"
3621
3770
  aria-hidden="true"
3622
- ></i>
3771
+ role="img"
3772
+ width="1em"
3773
+ height="1em"
3774
+ >
3775
+ <path
3776
+ 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"
3777
+ />
3778
+ </svg>
3623
3779
  </span>
3624
3780
  </span>
3625
3781
  </button>
@@ -3655,7 +3811,19 @@ Without a `.pf-v6-c-compass__panel` wrapping all of the content, there is no rou
3655
3811
  id="-toolbar-overflow-menu-toggle"
3656
3812
  >
3657
3813
  <span class="pf-v6-c-menu-toggle__icon">
3658
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
3814
+ <svg
3815
+ class="pf-v6-svg"
3816
+ viewBox="0 0 32 32"
3817
+ fill="currentColor"
3818
+ aria-hidden="true"
3819
+ role="img"
3820
+ width="1em"
3821
+ height="1em"
3822
+ >
3823
+ <path
3824
+ 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"
3825
+ />
3826
+ </svg>
3659
3827
  </span>
3660
3828
  </button>
3661
3829
  </div>
@@ -3676,10 +3844,19 @@ Without a `.pf-v6-c-compass__panel` wrapping all of the content, there is no rou
3676
3844
  </span>
3677
3845
  <span class="pf-v6-c-menu-toggle__controls">
3678
3846
  <span class="pf-v6-c-menu-toggle__toggle-icon">
3679
- <i
3680
- class="fas fa-caret-down fa-fw"
3847
+ <svg
3848
+ class="pf-v6-svg"
3849
+ viewBox="0 0 20 20"
3850
+ fill="currentColor"
3681
3851
  aria-hidden="true"
3682
- ></i>
3852
+ role="img"
3853
+ width="1em"
3854
+ height="1em"
3855
+ >
3856
+ <path
3857
+ 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"
3858
+ />
3859
+ </svg>
3683
3860
  </span>
3684
3861
  </span>
3685
3862
  </button>
@@ -3800,7 +3977,19 @@ Without a `.pf-v6-c-compass__panel` wrapping all of the content, there is no rou
3800
3977
  id="card-view-basic-example-gallery-card-1-toggle"
3801
3978
  >
3802
3979
  <span class="pf-v6-c-menu-toggle__icon">
3803
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
3980
+ <svg
3981
+ class="pf-v6-svg"
3982
+ viewBox="0 0 32 32"
3983
+ fill="currentColor"
3984
+ aria-hidden="true"
3985
+ role="img"
3986
+ width="1em"
3987
+ height="1em"
3988
+ >
3989
+ <path
3990
+ 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"
3991
+ />
3992
+ </svg>
3804
3993
  </span>
3805
3994
  </button>
3806
3995
  <div class="pf-v6-c-check pf-m-standalone">
@@ -3846,7 +4035,19 @@ Without a `.pf-v6-c-compass__panel` wrapping all of the content, there is no rou
3846
4035
  id="card-view-basic-example-gallery-card-2-toggle"
3847
4036
  >
3848
4037
  <span class="pf-v6-c-menu-toggle__icon">
3849
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
4038
+ <svg
4039
+ class="pf-v6-svg"
4040
+ viewBox="0 0 32 32"
4041
+ fill="currentColor"
4042
+ aria-hidden="true"
4043
+ role="img"
4044
+ width="1em"
4045
+ height="1em"
4046
+ >
4047
+ <path
4048
+ 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"
4049
+ />
4050
+ </svg>
3850
4051
  </span>
3851
4052
  </button>
3852
4053
  <div class="pf-v6-c-check pf-m-standalone">
@@ -3892,7 +4093,19 @@ Without a `.pf-v6-c-compass__panel` wrapping all of the content, there is no rou
3892
4093
  id="card-view-basic-example-gallery-card-3-toggle"
3893
4094
  >
3894
4095
  <span class="pf-v6-c-menu-toggle__icon">
3895
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
4096
+ <svg
4097
+ class="pf-v6-svg"
4098
+ viewBox="0 0 32 32"
4099
+ fill="currentColor"
4100
+ aria-hidden="true"
4101
+ role="img"
4102
+ width="1em"
4103
+ height="1em"
4104
+ >
4105
+ <path
4106
+ 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"
4107
+ />
4108
+ </svg>
3896
4109
  </span>
3897
4110
  </button>
3898
4111
  <div class="pf-v6-c-check pf-m-standalone">
@@ -3969,10 +4182,19 @@ Without a `.pf-v6-c-compass__panel` wrapping all of the content, there is no rou
3969
4182
  >
3970
4183
  <span class="pf-v6-c-menu-toggle__controls">
3971
4184
  <span class="pf-v6-c-menu-toggle__toggle-icon">
3972
- <i
3973
- class="fas fa-caret-down fa-fw"
4185
+ <svg
4186
+ class="pf-v6-svg"
4187
+ viewBox="0 0 20 20"
4188
+ fill="currentColor"
3974
4189
  aria-hidden="true"
3975
- ></i>
4190
+ role="img"
4191
+ width="1em"
4192
+ height="1em"
4193
+ >
4194
+ <path
4195
+ 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"
4196
+ />
4197
+ </svg>
3976
4198
  </span>
3977
4199
  </span>
3978
4200
  </button>
@@ -3989,10 +4211,19 @@ Without a `.pf-v6-c-compass__panel` wrapping all of the content, there is no rou
3989
4211
  <span class="pf-v6-c-menu-toggle__text">Status</span>
3990
4212
  <span class="pf-v6-c-menu-toggle__controls">
3991
4213
  <span class="pf-v6-c-menu-toggle__toggle-icon">
3992
- <i
3993
- class="fas fa-caret-down fa-fw"
4214
+ <svg
4215
+ class="pf-v6-svg"
4216
+ viewBox="0 0 20 20"
4217
+ fill="currentColor"
3994
4218
  aria-hidden="true"
3995
- ></i>
4219
+ role="img"
4220
+ width="1em"
4221
+ height="1em"
4222
+ >
4223
+ <path
4224
+ 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"
4225
+ />
4226
+ </svg>
3996
4227
  </span>
3997
4228
  </span>
3998
4229
  </button>
@@ -4028,7 +4259,19 @@ Without a `.pf-v6-c-compass__panel` wrapping all of the content, there is no rou
4028
4259
  id="-toolbar-overflow-menu-toggle"
4029
4260
  >
4030
4261
  <span class="pf-v6-c-menu-toggle__icon">
4031
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
4262
+ <svg
4263
+ class="pf-v6-svg"
4264
+ viewBox="0 0 32 32"
4265
+ fill="currentColor"
4266
+ aria-hidden="true"
4267
+ role="img"
4268
+ width="1em"
4269
+ height="1em"
4270
+ >
4271
+ <path
4272
+ 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"
4273
+ />
4274
+ </svg>
4032
4275
  </span>
4033
4276
  </button>
4034
4277
  </div>
@@ -4049,10 +4292,19 @@ Without a `.pf-v6-c-compass__panel` wrapping all of the content, there is no rou
4049
4292
  </span>
4050
4293
  <span class="pf-v6-c-menu-toggle__controls">
4051
4294
  <span class="pf-v6-c-menu-toggle__toggle-icon">
4052
- <i
4053
- class="fas fa-caret-down fa-fw"
4295
+ <svg
4296
+ class="pf-v6-svg"
4297
+ viewBox="0 0 20 20"
4298
+ fill="currentColor"
4054
4299
  aria-hidden="true"
4055
- ></i>
4300
+ role="img"
4301
+ width="1em"
4302
+ height="1em"
4303
+ >
4304
+ <path
4305
+ 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"
4306
+ />
4307
+ </svg>
4056
4308
  </span>
4057
4309
  </span>
4058
4310
  </button>
@@ -4173,7 +4425,19 @@ Without a `.pf-v6-c-compass__panel` wrapping all of the content, there is no rou
4173
4425
  id="card-view-basic-example-gallery-card-1-toggle"
4174
4426
  >
4175
4427
  <span class="pf-v6-c-menu-toggle__icon">
4176
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
4428
+ <svg
4429
+ class="pf-v6-svg"
4430
+ viewBox="0 0 32 32"
4431
+ fill="currentColor"
4432
+ aria-hidden="true"
4433
+ role="img"
4434
+ width="1em"
4435
+ height="1em"
4436
+ >
4437
+ <path
4438
+ 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"
4439
+ />
4440
+ </svg>
4177
4441
  </span>
4178
4442
  </button>
4179
4443
  <div class="pf-v6-c-check pf-m-standalone">
@@ -4219,7 +4483,19 @@ Without a `.pf-v6-c-compass__panel` wrapping all of the content, there is no rou
4219
4483
  id="card-view-basic-example-gallery-card-2-toggle"
4220
4484
  >
4221
4485
  <span class="pf-v6-c-menu-toggle__icon">
4222
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
4486
+ <svg
4487
+ class="pf-v6-svg"
4488
+ viewBox="0 0 32 32"
4489
+ fill="currentColor"
4490
+ aria-hidden="true"
4491
+ role="img"
4492
+ width="1em"
4493
+ height="1em"
4494
+ >
4495
+ <path
4496
+ 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"
4497
+ />
4498
+ </svg>
4223
4499
  </span>
4224
4500
  </button>
4225
4501
  <div class="pf-v6-c-check pf-m-standalone">
@@ -4265,7 +4541,19 @@ Without a `.pf-v6-c-compass__panel` wrapping all of the content, there is no rou
4265
4541
  id="card-view-basic-example-gallery-card-3-toggle"
4266
4542
  >
4267
4543
  <span class="pf-v6-c-menu-toggle__icon">
4268
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
4544
+ <svg
4545
+ class="pf-v6-svg"
4546
+ viewBox="0 0 32 32"
4547
+ fill="currentColor"
4548
+ aria-hidden="true"
4549
+ role="img"
4550
+ width="1em"
4551
+ height="1em"
4552
+ >
4553
+ <path
4554
+ 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"
4555
+ />
4556
+ </svg>
4269
4557
  </span>
4270
4558
  </button>
4271
4559
  <div class="pf-v6-c-check pf-m-standalone">
@@ -4889,7 +5177,19 @@ This demo showcases how you can position a side-panel drawer on top of the other
4889
5177
  <span class="pf-v6-c-menu-toggle__text">Ned Username</span>
4890
5178
  <span class="pf-v6-c-menu-toggle__controls">
4891
5179
  <span class="pf-v6-c-menu-toggle__toggle-icon">
4892
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
5180
+ <svg
5181
+ class="pf-v6-svg"
5182
+ viewBox="0 0 20 20"
5183
+ fill="currentColor"
5184
+ aria-hidden="true"
5185
+ role="img"
5186
+ width="1em"
5187
+ height="1em"
5188
+ >
5189
+ <path
5190
+ 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"
5191
+ />
5192
+ </svg>
4893
5193
  </span>
4894
5194
  </span>
4895
5195
  </button>
@@ -5098,10 +5398,19 @@ This demo showcases how you can position a side-panel drawer on top of the other
5098
5398
  <span
5099
5399
  class="pf-v6-c-menu-toggle__toggle-icon"
5100
5400
  >
5101
- <i
5102
- class="fas fa-caret-down fa-fw"
5401
+ <svg
5402
+ class="pf-v6-svg"
5403
+ viewBox="0 0 20 20"
5404
+ fill="currentColor"
5103
5405
  aria-hidden="true"
5104
- ></i>
5406
+ role="img"
5407
+ width="1em"
5408
+ height="1em"
5409
+ >
5410
+ <path
5411
+ 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"
5412
+ />
5413
+ </svg>
5105
5414
  </span>
5106
5415
  </span>
5107
5416
  </button>
@@ -5118,10 +5427,19 @@ This demo showcases how you can position a side-panel drawer on top of the other
5118
5427
  <span class="pf-v6-c-menu-toggle__text">Status</span>
5119
5428
  <span class="pf-v6-c-menu-toggle__controls">
5120
5429
  <span class="pf-v6-c-menu-toggle__toggle-icon">
5121
- <i
5122
- class="fas fa-caret-down fa-fw"
5430
+ <svg
5431
+ class="pf-v6-svg"
5432
+ viewBox="0 0 20 20"
5433
+ fill="currentColor"
5123
5434
  aria-hidden="true"
5124
- ></i>
5435
+ role="img"
5436
+ width="1em"
5437
+ height="1em"
5438
+ >
5439
+ <path
5440
+ 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"
5441
+ />
5442
+ </svg>
5125
5443
  </span>
5126
5444
  </span>
5127
5445
  </button>
@@ -5159,7 +5477,19 @@ This demo showcases how you can position a side-panel drawer on top of the other
5159
5477
  id="-toolbar-overflow-menu-toggle"
5160
5478
  >
5161
5479
  <span class="pf-v6-c-menu-toggle__icon">
5162
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
5480
+ <svg
5481
+ class="pf-v6-svg"
5482
+ viewBox="0 0 32 32"
5483
+ fill="currentColor"
5484
+ aria-hidden="true"
5485
+ role="img"
5486
+ width="1em"
5487
+ height="1em"
5488
+ >
5489
+ <path
5490
+ 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"
5491
+ />
5492
+ </svg>
5163
5493
  </span>
5164
5494
  </button>
5165
5495
  </div>
@@ -5182,10 +5512,19 @@ This demo showcases how you can position a side-panel drawer on top of the other
5182
5512
  <span
5183
5513
  class="pf-v6-c-menu-toggle__toggle-icon"
5184
5514
  >
5185
- <i
5186
- class="fas fa-caret-down fa-fw"
5515
+ <svg
5516
+ class="pf-v6-svg"
5517
+ viewBox="0 0 20 20"
5518
+ fill="currentColor"
5187
5519
  aria-hidden="true"
5188
- ></i>
5520
+ role="img"
5521
+ width="1em"
5522
+ height="1em"
5523
+ >
5524
+ <path
5525
+ 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"
5526
+ />
5527
+ </svg>
5189
5528
  </span>
5190
5529
  </span>
5191
5530
  </button>
@@ -5313,7 +5652,19 @@ This demo showcases how you can position a side-panel drawer on top of the other
5313
5652
  id="card-view-basic-example-gallery-card-1-toggle"
5314
5653
  >
5315
5654
  <span class="pf-v6-c-menu-toggle__icon">
5316
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
5655
+ <svg
5656
+ class="pf-v6-svg"
5657
+ viewBox="0 0 32 32"
5658
+ fill="currentColor"
5659
+ aria-hidden="true"
5660
+ role="img"
5661
+ width="1em"
5662
+ height="1em"
5663
+ >
5664
+ <path
5665
+ 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"
5666
+ />
5667
+ </svg>
5317
5668
  </span>
5318
5669
  </button>
5319
5670
  <div class="pf-v6-c-check pf-m-standalone">
@@ -5359,7 +5710,19 @@ This demo showcases how you can position a side-panel drawer on top of the other
5359
5710
  id="card-view-basic-example-gallery-card-2-toggle"
5360
5711
  >
5361
5712
  <span class="pf-v6-c-menu-toggle__icon">
5362
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
5713
+ <svg
5714
+ class="pf-v6-svg"
5715
+ viewBox="0 0 32 32"
5716
+ fill="currentColor"
5717
+ aria-hidden="true"
5718
+ role="img"
5719
+ width="1em"
5720
+ height="1em"
5721
+ >
5722
+ <path
5723
+ 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"
5724
+ />
5725
+ </svg>
5363
5726
  </span>
5364
5727
  </button>
5365
5728
  <div class="pf-v6-c-check pf-m-standalone">
@@ -5405,7 +5768,19 @@ This demo showcases how you can position a side-panel drawer on top of the other
5405
5768
  id="card-view-basic-example-gallery-card-3-toggle"
5406
5769
  >
5407
5770
  <span class="pf-v6-c-menu-toggle__icon">
5408
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
5771
+ <svg
5772
+ class="pf-v6-svg"
5773
+ viewBox="0 0 32 32"
5774
+ fill="currentColor"
5775
+ aria-hidden="true"
5776
+ role="img"
5777
+ width="1em"
5778
+ height="1em"
5779
+ >
5780
+ <path
5781
+ 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"
5782
+ />
5783
+ </svg>
5409
5784
  </span>
5410
5785
  </button>
5411
5786
  <div class="pf-v6-c-check pf-m-standalone">