@patternfly/patternfly 6.5.0-prerelease.51 → 6.5.0-prerelease.53

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 (49) hide show
  1. package/components/Button/button.css +22 -2
  2. package/components/Button/button.scss +26 -2
  3. package/components/Card/card.css +20 -8
  4. package/components/Card/card.scss +26 -7
  5. package/components/Masthead/masthead.css +38 -4
  6. package/components/Masthead/masthead.scss +52 -4
  7. package/components/MenuToggle/menu-toggle.css +26 -2
  8. package/components/MenuToggle/menu-toggle.scss +30 -2
  9. package/components/Nav/nav.css +16 -8
  10. package/components/Nav/nav.scss +16 -8
  11. package/components/Page/page.css +59 -7
  12. package/components/Page/page.scss +79 -15
  13. package/components/_index.css +181 -31
  14. package/docs/components/Breadcrumb/examples/Breadcrumb.md +0 -1
  15. package/docs/components/Button/examples/Button.md +339 -0
  16. package/docs/components/Masthead/examples/masthead.md +1 -1
  17. package/docs/components/Menu/examples/Menu.md +0 -2
  18. package/docs/components/MenuToggle/examples/MenuToggle.md +1 -4
  19. package/docs/components/Pagination/examples/Pagination.md +0 -13
  20. package/docs/components/Toolbar/examples/Toolbar.md +0 -2
  21. package/docs/demos/AboutModal/examples/AboutModal.md +1 -0
  22. package/docs/demos/Alert/examples/Alert.md +3 -0
  23. package/docs/demos/BackToTop/examples/BackToTop.md +1 -0
  24. package/docs/demos/Banner/examples/Banner.md +2 -0
  25. package/docs/demos/Card/examples/Card.md +564 -86
  26. package/docs/demos/CardView/examples/CardView.md +16 -3
  27. package/docs/demos/Compass/examples/Compass.md +551 -134
  28. package/docs/demos/Dashboard/examples/Dashboard.md +435 -100
  29. package/docs/demos/DataList/examples/DataList.md +4 -8
  30. package/docs/demos/DescriptionList/examples/DescriptionList.md +3 -0
  31. package/docs/demos/Drawer/examples/Drawer.md +5 -0
  32. package/docs/demos/JumpLinks/examples/JumpLinks.md +6 -0
  33. package/docs/demos/Masthead/examples/Masthead.md +9 -58
  34. package/docs/demos/Modal/examples/Modal.md +6 -0
  35. package/docs/demos/Nav/examples/Nav.md +305 -160
  36. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +5 -0
  37. package/docs/demos/Page/examples/Page.md +14 -0
  38. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +7 -6
  39. package/docs/demos/Skeleton/examples/Skeleton.md +1 -0
  40. package/docs/demos/Table/examples/Table.md +16 -27
  41. package/docs/demos/Tabs/examples/Tabs.md +6 -0
  42. package/docs/demos/Toolbar/examples/Toolbar.md +2 -8
  43. package/docs/demos/Wizard/examples/Wizard.md +9 -0
  44. package/package.json +1 -1
  45. package/patternfly-no-globals.css +181 -31
  46. package/patternfly.css +181 -31
  47. package/patternfly.min.css +1 -1
  48. package/patternfly.min.css.map +1 -1
  49. package/sass-utilities/scss-variables.scss +3 -0
@@ -431,7 +431,6 @@ This demo populates the main Compass section with a card view, which is one of t
431
431
  class="pf-v6-c-menu-toggle pf-m-circle pf-m-text pf-m-plain"
432
432
  type="button"
433
433
  aria-expanded="false"
434
- aria-label="Menu toggle"
435
434
  >
436
435
  <span class="pf-v6-c-menu-toggle__icon">
437
436
  <img
@@ -708,7 +707,6 @@ This demo populates the main Compass section with a card view, which is one of t
708
707
  class="pf-v6-c-menu-toggle pf-m-text pf-m-plain"
709
708
  type="button"
710
709
  aria-expanded="false"
711
- aria-label="Menu toggle"
712
710
  id="-toolbar-top-pagination"
713
711
  >
714
712
  <span class="pf-v6-c-menu-toggle__text">
@@ -796,7 +794,21 @@ This demo populates the main Compass section with a card view, which is one of t
796
794
  <div class="pf-v6-l-bullseye">
797
795
  <div class="pf-v6-c-empty-state pf-m-xs">
798
796
  <div class="pf-v6-c-empty-state__content">
799
- <i class="fas fa-plus-circle pf-v6-c-empty-state__icon"></i>
797
+ <div class="pf-v6-c-empty-state__icon">
798
+ <svg
799
+ class="pf-v6-svg"
800
+ viewBox="0 0 32 32"
801
+ fill="currentColor"
802
+ aria-hidden="true"
803
+ role="img"
804
+ width="1em"
805
+ height="1em"
806
+ >
807
+ <path
808
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm7 16.125h-5.875V23a1.125 1.125 0 0 1-2.25 0v-5.875H9a1.125 1.125 0 0 1 0-2.25h5.875V9a1.125 1.125 0 0 1 2.25 0v5.875H23a1.125 1.125 0 0 1 0 2.25Z"
809
+ />
810
+ </svg>
811
+ </div>
800
812
  <div class="pf-v6-c-card__title">
801
813
  <h2
802
814
  class="pf-v6-c-card__title-text pf-m-md"
@@ -1830,7 +1842,6 @@ This demo populates the main Compass section with a dashboard, which is often us
1830
1842
  class="pf-v6-c-menu-toggle pf-m-circle pf-m-text pf-m-plain"
1831
1843
  type="button"
1832
1844
  aria-expanded="false"
1833
- aria-label="Menu toggle"
1834
1845
  >
1835
1846
  <span class="pf-v6-c-menu-toggle__icon">
1836
1847
  <img
@@ -2025,10 +2036,23 @@ This demo populates the main Compass section with a dashboard, which is often us
2025
2036
  >
2026
2037
  <div class="pf-v6-l-flex pf-m-space-items-sm pf-m-nowrap">
2027
2038
  <div class="pf-v6-l-flex__item">
2028
- <i
2029
- class="fas fa-check-circle pf-v6-u-success-color-100"
2030
- aria-hidden="true"
2031
- ></i>
2039
+ <span class="pf-v6-c-icon">
2040
+ <span class="pf-v6-c-icon__content pf-m-success">
2041
+ <svg
2042
+ class="pf-v6-svg"
2043
+ viewBox="0 0 32 32"
2044
+ fill="currentColor"
2045
+ aria-hidden="true"
2046
+ role="img"
2047
+ width="1em"
2048
+ height="1em"
2049
+ >
2050
+ <path
2051
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm7.795 11.795-8.646 8.646c-.317.317-.733.475-1.149.475s-.832-.158-1.149-.475l-4.646-4.646a1.126 1.126 0 0 1 1.591-1.591l4.205 4.205 8.205-8.205a1.126 1.126 0 0 1 1.591 1.591Z"
2052
+ />
2053
+ </svg>
2054
+ </span>
2055
+ </span>
2032
2056
  </div>
2033
2057
  <div class="pf-v6-l-flex__item">
2034
2058
  <span>Cluster</span>
@@ -2036,10 +2060,23 @@ This demo populates the main Compass section with a dashboard, which is often us
2036
2060
  </div>
2037
2061
  <div class="pf-v6-l-flex pf-m-space-items-sm pf-m-nowrap">
2038
2062
  <div class="pf-v6-l-flex__item">
2039
- <i
2040
- class="fas fa-exclamation-circle pf-v6-u-danger-color-100"
2041
- aria-hidden="true"
2042
- ></i>
2063
+ <span class="pf-v6-c-icon">
2064
+ <span class="pf-v6-c-icon__content pf-m-danger">
2065
+ <svg
2066
+ class="pf-v6-svg"
2067
+ viewBox="0 0 32 32"
2068
+ fill="currentColor"
2069
+ aria-hidden="true"
2070
+ role="img"
2071
+ width="1em"
2072
+ height="1em"
2073
+ >
2074
+ <path
2075
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm-1.5 8a1.5 1.5 0 1 1 3 0v7a1.5 1.5 0 1 1-3 0V9ZM16 25.001a2 2 0 1 1-.001-3.999A2 2 0 0 1 16 25.001Z"
2076
+ />
2077
+ </svg>
2078
+ </span>
2079
+ </span>
2043
2080
  </div>
2044
2081
  <div class="pf-v6-l-flex__item pf-v6-u-text-nowrap">
2045
2082
  <span class="popover-parent">
@@ -2049,10 +2086,23 @@ This demo populates the main Compass section with a dashboard, which is often us
2049
2086
  </div>
2050
2087
  <div class="pf-v6-l-flex pf-m-space-items-sm pf-m-nowrap">
2051
2088
  <div class="pf-v6-l-flex__item pf-v6-u-text-nowrap">
2052
- <i
2053
- class="fas fa-exclamation-circle pf-v6-u-danger-color-100"
2054
- aria-hidden="true"
2055
- ></i>
2089
+ <span class="pf-v6-c-icon">
2090
+ <span class="pf-v6-c-icon__content pf-m-danger">
2091
+ <svg
2092
+ class="pf-v6-svg"
2093
+ viewBox="0 0 32 32"
2094
+ fill="currentColor"
2095
+ aria-hidden="true"
2096
+ role="img"
2097
+ width="1em"
2098
+ height="1em"
2099
+ >
2100
+ <path
2101
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm-1.5 8a1.5 1.5 0 1 1 3 0v7a1.5 1.5 0 1 1-3 0V9ZM16 25.001a2 2 0 1 1-.001-3.999A2 2 0 0 1 16 25.001Z"
2102
+ />
2103
+ </svg>
2104
+ </span>
2105
+ </span>
2056
2106
  </div>
2057
2107
  <div
2058
2108
  class="pf-v6-l-flex pf-m-column pf-m-space-items-none"
@@ -2067,10 +2117,23 @@ This demo populates the main Compass section with a dashboard, which is often us
2067
2117
  </div>
2068
2118
  <div class="pf-v6-l-flex pf-m-space-items-sm pf-m-nowrap">
2069
2119
  <div class="pf-v6-l-flex__item">
2070
- <i
2071
- class="fas fa-check-circle pf-v6-u-success-color-100"
2072
- aria-hidden="true"
2073
- ></i>
2120
+ <span class="pf-v6-c-icon">
2121
+ <span class="pf-v6-c-icon__content pf-m-success">
2122
+ <svg
2123
+ class="pf-v6-svg"
2124
+ viewBox="0 0 32 32"
2125
+ fill="currentColor"
2126
+ aria-hidden="true"
2127
+ role="img"
2128
+ width="1em"
2129
+ height="1em"
2130
+ >
2131
+ <path
2132
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm7.795 11.795-8.646 8.646c-.317.317-.733.475-1.149.475s-.832-.158-1.149-.475l-4.646-4.646a1.126 1.126 0 0 1 1.591-1.591l4.205 4.205 8.205-8.205a1.126 1.126 0 0 1 1.591 1.591Z"
2133
+ />
2134
+ </svg>
2135
+ </span>
2136
+ </span>
2074
2137
  </div>
2075
2138
  <div
2076
2139
  class="pf-v6-l-flex pf-m-column pf-m-space-items-none"
@@ -2085,10 +2148,23 @@ This demo populates the main Compass section with a dashboard, which is often us
2085
2148
  </div>
2086
2149
  <div class="pf-v6-l-flex pf-m-space-items-sm pf-m-nowrap">
2087
2150
  <div class="pf-v6-l-flex__item">
2088
- <i
2089
- class="fas fa-check-circle pf-v6-u-success-color-100"
2090
- aria-hidden="true"
2091
- ></i>
2151
+ <span class="pf-v6-c-icon">
2152
+ <span class="pf-v6-c-icon__content pf-m-success">
2153
+ <svg
2154
+ class="pf-v6-svg"
2155
+ viewBox="0 0 32 32"
2156
+ fill="currentColor"
2157
+ aria-hidden="true"
2158
+ role="img"
2159
+ width="1em"
2160
+ height="1em"
2161
+ >
2162
+ <path
2163
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm7.795 11.795-8.646 8.646c-.317.317-.733.475-1.149.475s-.832-.158-1.149-.475l-4.646-4.646a1.126 1.126 0 0 1 1.591-1.591l4.205 4.205 8.205-8.205a1.126 1.126 0 0 1 1.591 1.591Z"
2164
+ />
2165
+ </svg>
2166
+ </span>
2167
+ </span>
2092
2168
  </div>
2093
2169
  <div
2094
2170
  class="pf-v6-l-flex pf-m-column pf-m-space-items-none"
@@ -2103,10 +2179,23 @@ This demo populates the main Compass section with a dashboard, which is often us
2103
2179
  </div>
2104
2180
  <div class="pf-v6-l-flex pf-m-space-items-sm pf-m-nowrap">
2105
2181
  <div class="pf-v6-l-flex__item">
2106
- <i
2107
- class="fas fa-check-circle pf-v6-u-success-color-100"
2108
- aria-hidden="true"
2109
- ></i>
2182
+ <span class="pf-v6-c-icon">
2183
+ <span class="pf-v6-c-icon__content pf-m-success">
2184
+ <svg
2185
+ class="pf-v6-svg"
2186
+ viewBox="0 0 32 32"
2187
+ fill="currentColor"
2188
+ aria-hidden="true"
2189
+ role="img"
2190
+ width="1em"
2191
+ height="1em"
2192
+ >
2193
+ <path
2194
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm7.795 11.795-8.646 8.646c-.317.317-.733.475-1.149.475s-.832-.158-1.149-.475l-4.646-4.646a1.126 1.126 0 0 1 1.591-1.591l4.205 4.205 8.205-8.205a1.126 1.126 0 0 1 1.591 1.591Z"
2195
+ />
2196
+ </svg>
2197
+ </span>
2198
+ </span>
2110
2199
  </div>
2111
2200
  <div
2112
2201
  class="pf-v6-l-flex pf-m-column pf-m-space-items-none"
@@ -2118,10 +2207,23 @@ This demo populates the main Compass section with a dashboard, which is often us
2118
2207
  </div>
2119
2208
  <div class="pf-v6-l-flex pf-m-space-items-sm pf-m-nowrap">
2120
2209
  <div class="pf-v6-l-flex__item">
2121
- <i
2122
- class="fas fa-check-circle pf-v6-u-success-color-100"
2123
- aria-hidden="true"
2124
- ></i>
2210
+ <span class="pf-v6-c-icon">
2211
+ <span class="pf-v6-c-icon__content pf-m-success">
2212
+ <svg
2213
+ class="pf-v6-svg"
2214
+ viewBox="0 0 32 32"
2215
+ fill="currentColor"
2216
+ aria-hidden="true"
2217
+ role="img"
2218
+ width="1em"
2219
+ height="1em"
2220
+ >
2221
+ <path
2222
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm7.795 11.795-8.646 8.646c-.317.317-.733.475-1.149.475s-.832-.158-1.149-.475l-4.646-4.646a1.126 1.126 0 0 1 1.591-1.591l4.205 4.205 8.205-8.205a1.126 1.126 0 0 1 1.591 1.591Z"
2223
+ />
2224
+ </svg>
2225
+ </span>
2226
+ </span>
2125
2227
  </div>
2126
2228
  <div
2127
2229
  class="pf-v6-l-flex pf-m-column pf-m-space-items-none"
@@ -2533,10 +2635,25 @@ This demo populates the main Compass section with a dashboard, which is often us
2533
2635
  <a href="#">
2534
2636
  <div class="pf-v6-l-flex pf-m-space-items-sm">
2535
2637
  <span>3</span>
2536
- <i
2537
- class="fas fa-check-circle pf-v6-u-success-color-100"
2538
- aria-hidden="true"
2539
- ></i>
2638
+ <span class="pf-v6-c-icon">
2639
+ <span
2640
+ class="pf-v6-c-icon__content pf-m-success"
2641
+ >
2642
+ <svg
2643
+ class="pf-v6-svg"
2644
+ viewBox="0 0 32 32"
2645
+ fill="currentColor"
2646
+ aria-hidden="true"
2647
+ role="img"
2648
+ width="1em"
2649
+ height="1em"
2650
+ >
2651
+ <path
2652
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm7.795 11.795-8.646 8.646c-.317.317-.733.475-1.149.475s-.832-.158-1.149-.475l-4.646-4.646a1.126 1.126 0 0 1 1.591-1.591l4.205 4.205 8.205-8.205a1.126 1.126 0 0 1 1.591 1.591Z"
2653
+ />
2654
+ </svg>
2655
+ </span>
2656
+ </span>
2540
2657
  </div>
2541
2658
  </a>
2542
2659
  </div>
@@ -2556,10 +2673,25 @@ This demo populates the main Compass section with a dashboard, which is often us
2556
2673
  <a href="#">
2557
2674
  <div class="pf-v6-l-flex pf-m-space-items-sm">
2558
2675
  <span>8</span>
2559
- <i
2560
- class="fas fa-check-circle pf-v6-u-success-color-100"
2561
- aria-hidden="true"
2562
- ></i>
2676
+ <span class="pf-v6-c-icon">
2677
+ <span
2678
+ class="pf-v6-c-icon__content pf-m-success"
2679
+ >
2680
+ <svg
2681
+ class="pf-v6-svg"
2682
+ viewBox="0 0 32 32"
2683
+ fill="currentColor"
2684
+ aria-hidden="true"
2685
+ role="img"
2686
+ width="1em"
2687
+ height="1em"
2688
+ >
2689
+ <path
2690
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm7.795 11.795-8.646 8.646c-.317.317-.733.475-1.149.475s-.832-.158-1.149-.475l-4.646-4.646a1.126 1.126 0 0 1 1.591-1.591l4.205 4.205 8.205-8.205a1.126 1.126 0 0 1 1.591 1.591Z"
2691
+ />
2692
+ </svg>
2693
+ </span>
2694
+ </span>
2563
2695
  </div>
2564
2696
  </a>
2565
2697
  </div>
@@ -2579,10 +2711,25 @@ This demo populates the main Compass section with a dashboard, which is often us
2579
2711
  <a href="#">
2580
2712
  <div class="pf-v6-l-flex pf-m-space-items-sm">
2581
2713
  <span>20</span>
2582
- <i
2583
- class="fas fa-check-circle pf-v6-u-success-color-100"
2584
- aria-hidden="true"
2585
- ></i>
2714
+ <span class="pf-v6-c-icon">
2715
+ <span
2716
+ class="pf-v6-c-icon__content pf-m-success"
2717
+ >
2718
+ <svg
2719
+ class="pf-v6-svg"
2720
+ viewBox="0 0 32 32"
2721
+ fill="currentColor"
2722
+ aria-hidden="true"
2723
+ role="img"
2724
+ width="1em"
2725
+ height="1em"
2726
+ >
2727
+ <path
2728
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm7.795 11.795-8.646 8.646c-.317.317-.733.475-1.149.475s-.832-.158-1.149-.475l-4.646-4.646a1.126 1.126 0 0 1 1.591-1.591l4.205 4.205 8.205-8.205a1.126 1.126 0 0 1 1.591 1.591Z"
2729
+ />
2730
+ </svg>
2731
+ </span>
2732
+ </span>
2586
2733
  </div>
2587
2734
  </a>
2588
2735
  </div>
@@ -2602,10 +2749,25 @@ This demo populates the main Compass section with a dashboard, which is often us
2602
2749
  <a href="#">
2603
2750
  <div class="pf-v6-l-flex pf-m-space-items-sm">
2604
2751
  <span>12</span>
2605
- <i
2606
- class="fas fa-check-circle pf-v6-u-success-color-100"
2607
- aria-hidden="true"
2608
- ></i>
2752
+ <span class="pf-v6-c-icon">
2753
+ <span
2754
+ class="pf-v6-c-icon__content pf-m-success"
2755
+ >
2756
+ <svg
2757
+ class="pf-v6-svg"
2758
+ viewBox="0 0 32 32"
2759
+ fill="currentColor"
2760
+ aria-hidden="true"
2761
+ role="img"
2762
+ width="1em"
2763
+ height="1em"
2764
+ >
2765
+ <path
2766
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm7.795 11.795-8.646 8.646c-.317.317-.733.475-1.149.475s-.832-.158-1.149-.475l-4.646-4.646a1.126 1.126 0 0 1 1.591-1.591l4.205 4.205 8.205-8.205a1.126 1.126 0 0 1 1.591 1.591Z"
2767
+ />
2768
+ </svg>
2769
+ </span>
2770
+ </span>
2609
2771
  </div>
2610
2772
  </a>
2611
2773
  </div>
@@ -2625,10 +2787,25 @@ This demo populates the main Compass section with a dashboard, which is often us
2625
2787
  <a href="#">
2626
2788
  <div class="pf-v6-l-flex pf-m-space-items-sm">
2627
2789
  <span>18</span>
2628
- <i
2629
- class="fas fa-check-circle pf-v6-u-success-color-100"
2630
- aria-hidden="true"
2631
- ></i>
2790
+ <span class="pf-v6-c-icon">
2791
+ <span
2792
+ class="pf-v6-c-icon__content pf-m-success"
2793
+ >
2794
+ <svg
2795
+ class="pf-v6-svg"
2796
+ viewBox="0 0 32 32"
2797
+ fill="currentColor"
2798
+ aria-hidden="true"
2799
+ role="img"
2800
+ width="1em"
2801
+ height="1em"
2802
+ >
2803
+ <path
2804
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm7.795 11.795-8.646 8.646c-.317.317-.733.475-1.149.475s-.832-.158-1.149-.475l-4.646-4.646a1.126 1.126 0 0 1 1.591-1.591l4.205 4.205 8.205-8.205a1.126 1.126 0 0 1 1.591 1.591Z"
2805
+ />
2806
+ </svg>
2807
+ </span>
2808
+ </span>
2632
2809
  </div>
2633
2810
  </a>
2634
2811
  </div>
@@ -2684,10 +2861,23 @@ This demo populates the main Compass section with a dashboard, which is often us
2684
2861
  <dt class="pf-v6-c-description-list__term">
2685
2862
  <div class="pf-v6-l-flex pf-m-nowrap">
2686
2863
  <div class="pf-v6-l-flex__item pf-m-spacer-sm">
2687
- <i
2688
- class="fas fa-exclamation-circle pf-v6-u-danger-color-100"
2689
- aria-hidden="true"
2690
- ></i>
2864
+ <span class="pf-v6-c-icon">
2865
+ <span class="pf-v6-c-icon__content pf-m-danger">
2866
+ <svg
2867
+ class="pf-v6-svg"
2868
+ viewBox="0 0 32 32"
2869
+ fill="currentColor"
2870
+ aria-hidden="true"
2871
+ role="img"
2872
+ width="1em"
2873
+ height="1em"
2874
+ >
2875
+ <path
2876
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm-1.5 8a1.5 1.5 0 1 1 3 0v7a1.5 1.5 0 1 1-3 0V9ZM16 25.001a2 2 0 1 1-.001-3.999A2 2 0 0 1 16 25.001Z"
2877
+ />
2878
+ </svg>
2879
+ </span>
2880
+ </span>
2691
2881
  </div>
2692
2882
  <div class="pf-v6-l-flex__item">Readiness probe failed</div>
2693
2883
  </div>
@@ -2709,10 +2899,23 @@ This demo populates the main Compass section with a dashboard, which is often us
2709
2899
  <dt class="pf-v6-c-description-list__term">
2710
2900
  <div class="pf-v6-l-flex pf-m-nowrap">
2711
2901
  <div class="pf-v6-l-flex__item pf-m-spacer-sm">
2712
- <i
2713
- class="fas fa-check-circle pf-v6-u-success-color-100"
2714
- aria-hidden="true"
2715
- ></i>
2902
+ <span class="pf-v6-c-icon">
2903
+ <span class="pf-v6-c-icon__content pf-m-success">
2904
+ <svg
2905
+ class="pf-v6-svg"
2906
+ viewBox="0 0 32 32"
2907
+ fill="currentColor"
2908
+ aria-hidden="true"
2909
+ role="img"
2910
+ width="1em"
2911
+ height="1em"
2912
+ >
2913
+ <path
2914
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm7.795 11.795-8.646 8.646c-.317.317-.733.475-1.149.475s-.832-.158-1.149-.475l-4.646-4.646a1.126 1.126 0 0 1 1.591-1.591l4.205 4.205 8.205-8.205a1.126 1.126 0 0 1 1.591 1.591Z"
2915
+ />
2916
+ </svg>
2917
+ </span>
2918
+ </span>
2716
2919
  </div>
2717
2920
  <div class="pf-v6-l-flex__item">Successful assignment</div>
2718
2921
  </div>
@@ -2769,10 +2972,23 @@ This demo populates the main Compass section with a dashboard, which is often us
2769
2972
  <dt class="pf-v6-c-description-list__term">
2770
2973
  <div class="pf-v6-l-flex pf-m-nowrap">
2771
2974
  <div class="pf-v6-l-flex__item pf-m-spacer-sm">
2772
- <i
2773
- class="fas fa-check-circle pf-v6-u-success-color-100"
2774
- aria-hidden="true"
2775
- ></i>
2975
+ <span class="pf-v6-c-icon">
2976
+ <span class="pf-v6-c-icon__content pf-m-success">
2977
+ <svg
2978
+ class="pf-v6-svg"
2979
+ viewBox="0 0 32 32"
2980
+ fill="currentColor"
2981
+ aria-hidden="true"
2982
+ role="img"
2983
+ width="1em"
2984
+ height="1em"
2985
+ >
2986
+ <path
2987
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm7.795 11.795-8.646 8.646c-.317.317-.733.475-1.149.475s-.832-.158-1.149-.475l-4.646-4.646a1.126 1.126 0 0 1 1.591-1.591l4.205 4.205 8.205-8.205a1.126 1.126 0 0 1 1.591 1.591Z"
2988
+ />
2989
+ </svg>
2990
+ </span>
2991
+ </span>
2776
2992
  </div>
2777
2993
  <div class="pf-v6-l-flex__item">Created container</div>
2778
2994
  </div>
@@ -2795,10 +3011,23 @@ This demo populates the main Compass section with a dashboard, which is often us
2795
3011
  <dt class="pf-v6-c-description-list__term">
2796
3012
  <div class="pf-v6-l-flex pf-m-nowrap">
2797
3013
  <div class="pf-v6-l-flex__item pf-m-spacer-sm">
2798
- <i
2799
- class="fas fa-exclamation-triangle pf-v6-u-warning-color-100"
2800
- aria-hidden="true"
2801
- ></i>
3014
+ <span class="pf-v6-c-icon">
3015
+ <span class="pf-v6-c-icon__content pf-m-warning">
3016
+ <svg
3017
+ class="pf-v6-svg"
3018
+ viewBox="0 0 32 32"
3019
+ fill="currentColor"
3020
+ aria-hidden="true"
3021
+ role="img"
3022
+ width="1em"
3023
+ height="1em"
3024
+ >
3025
+ <path
3026
+ d="m31.874 28.514-15.011-27a1.001 1.001 0 0 0-1.748 0l-15.011 27A1 1 0 0 0 .978 30H31a1 1 0 0 0 .874-1.486ZM14.5 12a1.5 1.5 0 0 1 3 0v5a1.5 1.5 0 0 1-3 0v-5ZM16 26.001a2 2 0 1 1-.001-3.999A2 2 0 0 1 16 26.001Z"
3027
+ />
3028
+ </svg>
3029
+ </span>
3030
+ </span>
2802
3031
  </div>
2803
3032
  <div
2804
3033
  class="pf-v6-l-flex__item"
@@ -2823,10 +3052,23 @@ This demo populates the main Compass section with a dashboard, which is often us
2823
3052
  <dt class="pf-v6-c-description-list__term">
2824
3053
  <div class="pf-v6-l-flex pf-m-nowrap">
2825
3054
  <div class="pf-v6-l-flex__item pf-m-spacer-sm">
2826
- <i
2827
- class="fas fa-exclamation-circle pf-v6-u-danger-color-100"
2828
- aria-hidden="true"
2829
- ></i>
3055
+ <span class="pf-v6-c-icon">
3056
+ <span class="pf-v6-c-icon__content pf-m-danger">
3057
+ <svg
3058
+ class="pf-v6-svg"
3059
+ viewBox="0 0 32 32"
3060
+ fill="currentColor"
3061
+ aria-hidden="true"
3062
+ role="img"
3063
+ width="1em"
3064
+ height="1em"
3065
+ >
3066
+ <path
3067
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm-1.5 8a1.5 1.5 0 1 1 3 0v7a1.5 1.5 0 1 1-3 0V9ZM16 25.001a2 2 0 1 1-.001-3.999A2 2 0 0 1 16 25.001Z"
3068
+ />
3069
+ </svg>
3070
+ </span>
3071
+ </span>
2830
3072
  </div>
2831
3073
  <div class="pf-v6-l-flex__item">Rook-osd-10-328949</div>
2832
3074
  </div>
@@ -2849,10 +3091,23 @@ This demo populates the main Compass section with a dashboard, which is often us
2849
3091
  <dt class="pf-v6-c-description-list__term">
2850
3092
  <div class="pf-v6-l-flex pf-m-nowrap">
2851
3093
  <div class="pf-v6-l-flex__item pf-m-spacer-sm">
2852
- <i
2853
- class="fas fa-check-circle pf-v6-u-success-color-100"
2854
- aria-hidden="true"
2855
- ></i>
3094
+ <span class="pf-v6-c-icon">
3095
+ <span class="pf-v6-c-icon__content pf-m-success">
3096
+ <svg
3097
+ class="pf-v6-svg"
3098
+ viewBox="0 0 32 32"
3099
+ fill="currentColor"
3100
+ aria-hidden="true"
3101
+ role="img"
3102
+ width="1em"
3103
+ height="1em"
3104
+ >
3105
+ <path
3106
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm7.795 11.795-8.646 8.646c-.317.317-.733.475-1.149.475s-.832-.158-1.149-.475l-4.646-4.646a1.126 1.126 0 0 1 1.591-1.591l4.205 4.205 8.205-8.205a1.126 1.126 0 0 1 1.591 1.591Z"
3107
+ />
3108
+ </svg>
3109
+ </span>
3110
+ </span>
2856
3111
  </div>
2857
3112
  <div class="pf-v6-l-flex__item">Created container</div>
2858
3113
  </div>
@@ -2875,10 +3130,23 @@ This demo populates the main Compass section with a dashboard, which is often us
2875
3130
  <dt class="pf-v6-c-description-list__term">
2876
3131
  <div class="pf-v6-l-flex pf-m-nowrap">
2877
3132
  <div class="pf-v6-l-flex__item pf-m-spacer-sm">
2878
- <i
2879
- class="fas fa-check-circle pf-v6-u-success-color-100"
2880
- aria-hidden="true"
2881
- ></i>
3133
+ <span class="pf-v6-c-icon">
3134
+ <span class="pf-v6-c-icon__content pf-m-success">
3135
+ <svg
3136
+ class="pf-v6-svg"
3137
+ viewBox="0 0 32 32"
3138
+ fill="currentColor"
3139
+ aria-hidden="true"
3140
+ role="img"
3141
+ width="1em"
3142
+ height="1em"
3143
+ >
3144
+ <path
3145
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm7.795 11.795-8.646 8.646c-.317.317-.733.475-1.149.475s-.832-.158-1.149-.475l-4.646-4.646a1.126 1.126 0 0 1 1.591-1.591l4.205 4.205 8.205-8.205a1.126 1.126 0 0 1 1.591 1.591Z"
3146
+ />
3147
+ </svg>
3148
+ </span>
3149
+ </span>
2882
3150
  </div>
2883
3151
  <div class="pf-v6-l-flex__item">Created container</div>
2884
3152
  </div>
@@ -3466,7 +3734,6 @@ Without a `.pf-v6-c-compass__panel` wrapping all of the content, there is no rou
3466
3734
  class="pf-v6-c-menu-toggle pf-m-circle pf-m-text pf-m-plain"
3467
3735
  type="button"
3468
3736
  aria-expanded="false"
3469
- aria-label="Menu toggle"
3470
3737
  >
3471
3738
  <span class="pf-v6-c-menu-toggle__icon">
3472
3739
  <img
@@ -3752,7 +4019,6 @@ Without a `.pf-v6-c-compass__panel` wrapping all of the content, there is no rou
3752
4019
  class="pf-v6-c-menu-toggle pf-m-text pf-m-plain"
3753
4020
  type="button"
3754
4021
  aria-expanded="false"
3755
- aria-label="Menu toggle"
3756
4022
  id="-toolbar-top-pagination"
3757
4023
  >
3758
4024
  <span class="pf-v6-c-menu-toggle__text">
@@ -3840,7 +4106,21 @@ Without a `.pf-v6-c-compass__panel` wrapping all of the content, there is no rou
3840
4106
  <div class="pf-v6-l-bullseye">
3841
4107
  <div class="pf-v6-c-empty-state pf-m-xs">
3842
4108
  <div class="pf-v6-c-empty-state__content">
3843
- <i class="fas fa-plus-circle pf-v6-c-empty-state__icon"></i>
4109
+ <div class="pf-v6-c-empty-state__icon">
4110
+ <svg
4111
+ class="pf-v6-svg"
4112
+ viewBox="0 0 32 32"
4113
+ fill="currentColor"
4114
+ aria-hidden="true"
4115
+ role="img"
4116
+ width="1em"
4117
+ height="1em"
4118
+ >
4119
+ <path
4120
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm7 16.125h-5.875V23a1.125 1.125 0 0 1-2.25 0v-5.875H9a1.125 1.125 0 0 1 0-2.25h5.875V9a1.125 1.125 0 0 1 2.25 0v5.875H23a1.125 1.125 0 0 1 0 2.25Z"
4121
+ />
4122
+ </svg>
4123
+ </div>
3844
4124
  <div class="pf-v6-c-card__title">
3845
4125
  <h2
3846
4126
  class="pf-v6-c-card__title-text pf-m-md"
@@ -4436,7 +4716,6 @@ Without a `.pf-v6-c-compass__panel` wrapping all of the content, there is no rou
4436
4716
  class="pf-v6-c-menu-toggle pf-m-text pf-m-plain"
4437
4717
  type="button"
4438
4718
  aria-expanded="false"
4439
- aria-label="Menu toggle"
4440
4719
  id="-toolbar-top-pagination"
4441
4720
  >
4442
4721
  <span class="pf-v6-c-menu-toggle__text">
@@ -4524,7 +4803,21 @@ Without a `.pf-v6-c-compass__panel` wrapping all of the content, there is no rou
4524
4803
  <div class="pf-v6-l-bullseye">
4525
4804
  <div class="pf-v6-c-empty-state pf-m-xs">
4526
4805
  <div class="pf-v6-c-empty-state__content">
4527
- <i class="fas fa-plus-circle pf-v6-c-empty-state__icon"></i>
4806
+ <div class="pf-v6-c-empty-state__icon">
4807
+ <svg
4808
+ class="pf-v6-svg"
4809
+ viewBox="0 0 32 32"
4810
+ fill="currentColor"
4811
+ aria-hidden="true"
4812
+ role="img"
4813
+ width="1em"
4814
+ height="1em"
4815
+ >
4816
+ <path
4817
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm7 16.125h-5.875V23a1.125 1.125 0 0 1-2.25 0v-5.875H9a1.125 1.125 0 0 1 0-2.25h5.875V9a1.125 1.125 0 0 1 2.25 0v5.875H23a1.125 1.125 0 0 1 0 2.25Z"
4818
+ />
4819
+ </svg>
4820
+ </div>
4528
4821
  <div class="pf-v6-c-card__title">
4529
4822
  <h2
4530
4823
  class="pf-v6-c-card__title-text pf-m-md"
@@ -5584,7 +5877,6 @@ This demo showcases how you can position a side-panel drawer on top of the other
5584
5877
  class="pf-v6-c-menu-toggle pf-m-circle pf-m-text pf-m-plain"
5585
5878
  type="button"
5586
5879
  aria-expanded="false"
5587
- aria-label="Menu toggle"
5588
5880
  >
5589
5881
  <span class="pf-v6-c-menu-toggle__icon">
5590
5882
  <img
@@ -5879,7 +6171,6 @@ This demo showcases how you can position a side-panel drawer on top of the other
5879
6171
  class="pf-v6-c-menu-toggle pf-m-text pf-m-plain"
5880
6172
  type="button"
5881
6173
  aria-expanded="false"
5882
- aria-label="Menu toggle"
5883
6174
  id="-toolbar-top-pagination"
5884
6175
  >
5885
6176
  <span class="pf-v6-c-menu-toggle__text">
@@ -5973,9 +6264,21 @@ This demo showcases how you can position a side-panel drawer on top of the other
5973
6264
  <div class="pf-v6-l-bullseye">
5974
6265
  <div class="pf-v6-c-empty-state pf-m-xs">
5975
6266
  <div class="pf-v6-c-empty-state__content">
5976
- <i
5977
- class="fas fa-plus-circle pf-v6-c-empty-state__icon"
5978
- ></i>
6267
+ <div class="pf-v6-c-empty-state__icon">
6268
+ <svg
6269
+ class="pf-v6-svg"
6270
+ viewBox="0 0 32 32"
6271
+ fill="currentColor"
6272
+ aria-hidden="true"
6273
+ role="img"
6274
+ width="1em"
6275
+ height="1em"
6276
+ >
6277
+ <path
6278
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm7 16.125h-5.875V23a1.125 1.125 0 0 1-2.25 0v-5.875H9a1.125 1.125 0 0 1 0-2.25h5.875V9a1.125 1.125 0 0 1 2.25 0v5.875H23a1.125 1.125 0 0 1 0 2.25Z"
6279
+ />
6280
+ </svg>
6281
+ </div>
5979
6282
  <div class="pf-v6-c-card__title">
5980
6283
  <h2
5981
6284
  class="pf-v6-c-card__title-text pf-m-md"
@@ -6643,10 +6946,123 @@ This demo showcases how you can position a side-panel drawer on top of the other
6643
6946
  <span class="pf-v6-c-button__text">Skip to content</span>
6644
6947
  </a>
6645
6948
  </div>
6949
+
6646
6950
  <header class="pf-v6-c-masthead pf-m-docked">
6647
6951
  <div class="pf-v6-c-masthead__main">
6952
+ <span class="pf-v6-c-masthead__toggle">
6953
+ <button
6954
+ class="pf-v6-c-button pf-m-hamburger pf-m-plain"
6955
+ type="button"
6956
+ aria-label="Global navigation"
6957
+ >
6958
+ <span class="pf-v6-c-button__icon">
6959
+ <svg
6960
+ viewBox="0 0 10 10"
6961
+ class="pf-v6-c-button--hamburger-icon pf-v6-svg"
6962
+ width="1em"
6963
+ height="1em"
6964
+ >
6965
+ <path
6966
+ class="pf-v6-c-button--hamburger-icon--top"
6967
+ d="M1,1 L9,1"
6968
+ />
6969
+ <path
6970
+ class="pf-v6-c-button--hamburger-icon--middle"
6971
+ d="M1,5 L9,5"
6972
+ />
6973
+ <path
6974
+ class="pf-v6-c-button--hamburger-icon--arrow"
6975
+ d="M1,5 L1,5 L1,5"
6976
+ />
6977
+ <path
6978
+ class="pf-v6-c-button--hamburger-icon--bottom"
6979
+ d="M9,9 L1,9"
6980
+ />
6981
+ </svg>
6982
+ </span>
6983
+ </button>
6984
+ </span>
6648
6985
  <div class="pf-v6-c-masthead__brand">
6649
6986
  <a class="pf-v6-c-masthead__logo" href="#">
6987
+ <svg height="37px" viewBox="0 0 679 158">
6988
+ <title>PF-HorizontalLogo-Color</title>
6989
+ <defs>
6990
+ <linearGradient
6991
+ x1="68%"
6992
+ y1="2.25860997e-13%"
6993
+ x2="32%"
6994
+ y2="100%"
6995
+ id="linearGradient-"
6996
+ >
6997
+ <stop stop-color="#2B9AF3" offset="0%" />
6998
+ <stop
6999
+ stop-color="#73BCF7"
7000
+ stop-opacity="0.502212631"
7001
+ offset="100%"
7002
+ />
7003
+ </linearGradient>
7004
+ </defs>
7005
+ <g
7006
+ stroke="none"
7007
+ stroke-width="1"
7008
+ fill="none"
7009
+ fill-rule="evenodd"
7010
+ >
7011
+ <g
7012
+ transform="translate(206.000000, 45.750000)"
7013
+ fill="var(--pf-t--global--text--color--regular)"
7014
+ fill-rule="nonzero"
7015
+ >
7016
+ <path
7017
+ d="M0,65.25 L0,2.25 L33.21,2.25 C37.35,2.25 41.025,3.135 44.235,4.905 C47.445,6.675 49.98,9.09 51.84,12.15 C53.7,15.21 54.63,18.72 54.63,22.68 C54.63,26.46 53.7,29.865 51.84,32.895 C49.98,35.925 47.43,38.31 44.19,40.05 C40.95,41.79 37.29,42.66 33.21,42.66 L15.48,42.66 L15.48,65.25 L0,65.25 Z M15.48,29.88 L31.41,29.88 C33.69,29.88 35.52,29.22 36.9,27.9 C38.28,26.58 38.97,24.87 38.97,22.77 C38.97,20.61 38.28,18.855 36.9,17.505 C35.52,16.155 33.69,15.48 31.41,15.48 L15.48,15.48 L15.48,29.88 Z"
7018
+ />
7019
+ <path
7020
+ d="M77.04,66.06 C73.68,66.06 70.695,65.43 68.085,64.17 C65.475,62.91 63.435,61.17 61.965,58.95 C60.495,56.73 59.76,54.18 59.76,51.3 C59.76,46.74 61.485,43.215 64.935,40.725 C68.385,38.235 73.2,36.99 79.38,36.99 C83.1,36.99 86.7,37.44 90.18,38.34 L90.18,36 C90.18,31.26 87.15,28.89 81.09,28.89 C77.49,28.89 72.69,30.15 66.69,32.67 L61.47,21.96 C69.15,18.48 76.56,16.74 83.7,16.74 C90.3,16.74 95.43,18.315 99.09,21.465 C102.75,24.615 104.58,29.04 104.58,34.74 L104.58,65.25 L90.18,65.25 L90.18,62.37 C88.26,63.69 86.235,64.635 84.105,65.205 C81.975,65.775 79.62,66.06 77.04,66.06 Z M73.62,51.03 C73.62,52.53 74.28,53.7 75.6,54.54 C76.92,55.38 78.75,55.8 81.09,55.8 C84.69,55.8 87.72,55.05 90.18,53.55 L90.18,47.43 C87.42,46.71 84.54,46.35 81.54,46.35 C79.02,46.35 77.07,46.755 75.69,47.565 C74.31,48.375 73.62,49.53 73.62,51.03 Z"
7021
+ />
7022
+ <path
7023
+ d="M137.25,65.88 C125.73,65.88 119.97,60.84 119.97,50.76 L119.97,29.79 L110.34,29.79 L110.34,17.64 L119.97,17.64 L119.97,5.4 L134.55,2.25 L134.55,17.64 L147.87,17.64 L147.87,29.79 L134.55,29.79 L134.55,47.88 C134.55,49.98 135.015,51.465 135.945,52.335 C136.875,53.205 138.51,53.64 140.85,53.64 C143.01,53.64 145.2,53.31 147.42,52.65 L147.42,64.44 C146.1,64.86 144.42,65.205 142.38,65.475 C140.34,65.745 138.63,65.88 137.25,65.88 Z"
7024
+ />
7025
+ <path
7026
+ d="M177.57,65.88 C166.05,65.88 160.29,60.84 160.29,50.76 L160.29,29.79 L150.66,29.79 L150.66,17.64 L160.29,17.64 L160.29,5.4 L174.87,2.25 L174.87,17.64 L188.19,17.64 L188.19,29.79 L174.87,29.79 L174.87,47.88 C174.87,49.98 175.335,51.465 176.265,52.335 C177.195,53.205 178.83,53.64 181.17,53.64 C183.33,53.64 185.52,53.31 187.74,52.65 L187.74,64.44 C186.42,64.86 184.74,65.205 182.7,65.475 C180.66,65.745 178.95,65.88 177.57,65.88 Z"
7027
+ />
7028
+ <path
7029
+ d="M217.62,66.15 C212.76,66.15 208.365,65.055 204.435,62.865 C200.505,60.675 197.4,57.72 195.12,54 C192.84,50.28 191.7,46.11 191.7,41.49 C191.7,36.87 192.795,32.7 194.985,28.98 C197.175,25.26 200.16,22.305 203.94,20.115 C207.72,17.925 211.92,16.83 216.54,16.83 C221.22,16.83 225.36,17.955 228.96,20.205 C232.56,22.455 235.395,25.53 237.465,29.43 C239.535,33.33 240.57,37.8 240.57,42.84 L240.57,46.44 L206.64,46.44 C207.6,48.66 209.1,50.475 211.14,51.885 C213.18,53.295 215.58,54 218.34,54 C222.42,54 225.6,52.8 227.88,50.4 L237.51,58.95 C234.51,61.47 231.435,63.3 228.285,64.44 C225.135,65.58 221.58,66.15 217.62,66.15 Z M206.37,36.27 L226.26,36.27 C225.48,33.99 224.205,32.16 222.435,30.78 C220.665,29.4 218.61,28.71 216.27,28.71 C213.87,28.71 211.8,29.37 210.06,30.69 C208.32,32.01 207.09,33.87 206.37,36.27 Z"
7030
+ />
7031
+ <path
7032
+ d="M247.41,65.25 L247.41,17.64 L261.99,17.64 L261.99,22.41 C265.23,18.51 269.4,16.56 274.5,16.56 C277.08,16.62 278.91,17.01 279.99,17.73 L279.99,30.42 C277.95,29.46 275.64,28.98 273.06,28.98 C270.78,28.98 268.665,29.505 266.715,30.555 C264.765,31.605 263.19,33.09 261.99,35.01 L261.99,65.25 L247.41,65.25 Z"
7033
+ />
7034
+ <path
7035
+ d="M286.29,65.25 L286.29,17.64 L300.87,17.64 L300.87,20.88 C304.47,18.12 308.73,16.74 313.65,16.74 C317.37,16.74 320.655,17.55 323.505,19.17 C326.355,20.79 328.59,23.04 330.21,25.92 C331.83,28.8 332.64,32.13 332.64,35.91 L332.64,65.25 L318.06,65.25 L318.06,37.89 C318.06,35.25 317.28,33.15 315.72,31.59 C314.16,30.03 312.06,29.25 309.42,29.25 C305.76,29.25 302.91,30.51 300.87,33.03 L300.87,65.25 L286.29,65.25 Z"
7036
+ />
7037
+ <polygon
7038
+ points="342 65.25 342 2.25 392.04 2.25 392.04 15.66 357.48 15.66 357.48 27.45 380.52 27.45 380.52 40.41 357.48 40.41 357.48 65.25"
7039
+ />
7040
+ <polygon
7041
+ points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25"
7042
+ />
7043
+ <path
7044
+ d="M429.21,84.69 C428.07,84.69 426.96,84.645 425.88,84.555 C424.8,84.465 423.9,84.33 423.18,84.15 L423.18,71.73 C424.38,71.97 425.88,72.09 427.68,72.09 C432.36,72.09 435.51,70.05 437.13,65.97 L437.13,65.88 L418.86,17.64 L434.97,17.64 L445.5,47.61 L457.74,17.64 L473.49,17.64 L452.16,67.68 C450.42,71.82 448.5,75.135 446.4,77.625 C444.3,80.115 441.87,81.915 439.11,83.025 C436.35,84.135 433.05,84.69 429.21,84.69 Z"
7045
+ />
7046
+ </g>
7047
+ <g transform="translate(0.000000, 0.000000)">
7048
+ <path
7049
+ d="M61.826087,0 L158,0 L158,96.173913 L147.695652,96.173913 C100.271201,96.173913 61.826087,57.7287992 61.826087,10.3043478 L61.826087,0 L61.826087,0 Z"
7050
+ fill="#0066CC"
7051
+ />
7052
+ <path
7053
+ d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
7054
+ fill="url(#linearGradient-)"
7055
+ />
7056
+ <path
7057
+ d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z"
7058
+ fill="url(#linearGradient-)"
7059
+ transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
7060
+ />
7061
+ </g>
7062
+ </g>
7063
+ </svg>
7064
+ </a>
7065
+ <a class="pf-v6-c-masthead__logo pf-m-compact" href="#">
6650
7066
  <svg width="37px" height="37px" viewBox="0 0 158 158">
6651
7067
  <title>PF-HorizontalLogo-Color</title>
6652
7068
  <defs>
@@ -6707,6 +7123,7 @@ This demo showcases how you can position a side-panel drawer on top of the other
6707
7123
  <span class="pf-v6-c-nav__link-icon">
6708
7124
  <i class="fas fa-fw fa-cube" aria-hidden="true"></i>
6709
7125
  </span>
7126
+ <span class="pf-v6-c-nav__link-text">System panel</span>
6710
7127
  </a>
6711
7128
  </li>
6712
7129
  <li class="pf-v6-c-nav__item">
@@ -6719,6 +7136,7 @@ This demo showcases how you can position a side-panel drawer on top of the other
6719
7136
  <span class="pf-v6-c-nav__link-icon">
6720
7137
  <i class="fas fa-fw fa-folder" aria-hidden="true"></i>
6721
7138
  </span>
7139
+ <span class="pf-v6-c-nav__link-text">Policy</span>
6722
7140
  </a>
6723
7141
  </li>
6724
7142
  <li class="pf-v6-c-nav__item">
@@ -6726,6 +7144,7 @@ This demo showcases how you can position a side-panel drawer on top of the other
6726
7144
  <span class="pf-v6-c-nav__link-icon">
6727
7145
  <i class="fas fa-fw fa-cloud" aria-hidden="true"></i>
6728
7146
  </span>
7147
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
6729
7148
  </a>
6730
7149
  </li>
6731
7150
  <li class="pf-v6-c-nav__item">
@@ -6733,6 +7152,7 @@ This demo showcases how you can position a side-panel drawer on top of the other
6733
7152
  <span class="pf-v6-c-nav__link-icon">
6734
7153
  <i class="fas fa-fw fa-code" aria-hidden="true"></i>
6735
7154
  </span>
7155
+ <span class="pf-v6-c-nav__link-text">Network services</span>
6736
7156
  </a>
6737
7157
  </li>
6738
7158
  </ul>
@@ -6741,57 +7161,54 @@ This demo showcases how you can position a side-panel drawer on top of the other
6741
7161
  <div
6742
7162
  class="pf-v6-c-toolbar__group pf-m-align-end pf-m-spacer-none pf-m-spacer-md-on-md pf-m-action-group-plain"
6743
7163
  >
6744
- <div
6745
- class="pf-v6-c-toolbar__group pf-m-hidden pf-m-visible-on-lg pf-m-action-group-plain"
6746
- >
6747
- <div class="pf-v6-c-toolbar__item">
6748
- <button
6749
- class="pf-v6-c-menu-toggle pf-m-plain"
6750
- type="button"
6751
- aria-expanded="false"
6752
- aria-label="Application launcher"
6753
- >
6754
- <span class="pf-v6-c-menu-toggle__icon">
6755
- <i class="fas fa-th" aria-hidden="true"></i>
6756
- </span>
6757
- </button>
6758
- </div>
6759
- <div class="pf-v6-c-toolbar__item">
6760
- <button
6761
- class="pf-v6-c-menu-toggle pf-m-settings pf-m-plain"
6762
- type="button"
6763
- aria-expanded="false"
6764
- aria-label="Settings"
6765
- >
6766
- <span class="pf-v6-c-menu-toggle__icon">
6767
- <i class="fas fa-cog" aria-hidden="true"></i>
6768
- </span>
6769
- </button>
6770
- </div>
6771
- <div class="pf-v6-c-toolbar__item">
6772
- <button
6773
- class="pf-v6-c-menu-toggle pf-m-plain"
6774
- type="button"
6775
- aria-expanded="false"
6776
- aria-label="Help"
6777
- >
6778
- <span class="pf-v6-c-menu-toggle__icon">
6779
- <i class="fas fa-question-circle" aria-hidden="true"></i>
6780
- </span>
6781
- </button>
6782
- </div>
7164
+ <div class="pf-v6-c-toolbar__item">
7165
+ <button
7166
+ class="pf-v6-c-menu-toggle pf-m-dock pf-m-text pf-m-plain"
7167
+ type="button"
7168
+ aria-expanded="false"
7169
+ aria-label="Applications"
7170
+ >
7171
+ <span class="pf-v6-c-menu-toggle__icon">
7172
+ <i class="fas fa-th" aria-hidden="true"></i>
7173
+ </span>
7174
+ <span class="pf-v6-c-menu-toggle__text">Applications</span>
7175
+ </button>
6783
7176
  </div>
6784
-
6785
- <div class="pf-v6-c-toolbar__item pf-m-hidden-on-lg">
7177
+ <div class="pf-v6-c-toolbar__item">
6786
7178
  <button
6787
- class="pf-v6-c-menu-toggle pf-m-plain"
7179
+ class="pf-v6-c-button pf-m-dock pf-m-settings pf-m-plain"
7180
+ type="button"
7181
+ aria-label="Settings"
7182
+ >
7183
+ <span class="pf-v6-c-button__icon pf-m-start">
7184
+ <svg
7185
+ class="pf-v6-svg"
7186
+ viewBox="0 0 32 32"
7187
+ fill="currentColor"
7188
+ aria-hidden="true"
7189
+ role="img"
7190
+ width="1em"
7191
+ height="1em"
7192
+ >
7193
+ <path
7194
+ d="M16 11c-2.757 0-5 2.243-5 5s2.243 5 5 5 5-2.243 5-5-2.243-5-5-5Zm0 8c-1.654 0-3-1.346-3-3s1.346-3 3-3 3 1.346 3 3-1.346 3-3 3Zm14.657-6.211c-.1-.46-.507-.789-.978-.789h-2.373c-.141-.4-.302-.791-.481-1.168l1.677-1.676a1 1 0 0 0 .134-1.249 15.23 15.23 0 0 0-4.543-4.542 1 1 0 0 0-1.248.134l-1.677 1.676c-.378-.18-.768-.341-1.168-.481V2.32a1 1 0 0 0-.788-.978 15.32 15.32 0 0 0-6.424 0A1 1 0 0 0 12 2.32v2.374c-.4.141-.79.302-1.168.481L9.155 3.499a1 1 0 0 0-1.248-.134 15.246 15.246 0 0 0-4.543 4.541 1 1 0 0 0 .134 1.249l1.677 1.676c-.18.378-.341.769-.481 1.168H2.321a1 1 0 0 0-.978.789 15.17 15.17 0 0 0 0 6.422c.1.46.507.789.978.789h2.373c.141.4.302.791.481 1.168l-1.677 1.676a1 1 0 0 0-.134 1.249 15.253 15.253 0 0 0 4.543 4.542 1 1 0 0 0 1.248-.134l1.677-1.676c.378.18.768.341 1.168.481v2.374a1 1 0 0 0 .788.978 15.23 15.23 0 0 0 6.424 0 1 1 0 0 0 .788-.978v-2.374c.4-.141.79-.302 1.168-.481l1.677 1.676a1 1 0 0 0 1.248.134 15.2 15.2 0 0 0 4.543-4.542 1 1 0 0 0-.134-1.249l-1.677-1.676c.18-.378.341-.769.481-1.168h2.373a1 1 0 0 0 .978-.789 15.177 15.177 0 0 0 0-6.422ZM28.848 18h-2.272a1 1 0 0 0-.962.727 9.963 9.963 0 0 1-.885 2.144 1 1 0 0 0 .166 1.195l1.604 1.604a13.234 13.234 0 0 1-2.828 2.829l-1.604-1.604a1 1 0 0 0-1.195-.166 9.96 9.96 0 0 1-2.144.884 1 1 0 0 0-.728.962v2.273a13.277 13.277 0 0 1-4 0v-2.273a1 1 0 0 0-.728-.962 9.96 9.96 0 0 1-2.144-.884 1.001 1.001 0 0 0-1.195.166l-1.604 1.604a13.196 13.196 0 0 1-2.828-2.829l1.604-1.604c.316-.316.384-.805.166-1.195a9.963 9.963 0 0 1-.885-2.144A1 1 0 0 0 5.424 18H3.152a13.126 13.126 0 0 1 0-4h2.272a1 1 0 0 0 .962-.727 9.963 9.963 0 0 1 .885-2.144 1 1 0 0 0-.166-1.195L5.501 8.33a13.163 13.163 0 0 1 2.828-2.829l1.604 1.604c.316.316.805.383 1.195.166a9.96 9.96 0 0 1 2.144-.884A1 1 0 0 0 14 5.425V3.152a13.277 13.277 0 0 1 4 0v2.273a1 1 0 0 0 .728.962 9.96 9.96 0 0 1 2.144.884 1 1 0 0 0 1.195-.166l1.604-1.604a13.196 13.196 0 0 1 2.828 2.828l-1.604 1.604a1.001 1.001 0 0 0-.166 1.195c.372.665.67 1.386.885 2.144a1 1 0 0 0 .962.727h2.272a13.245 13.245 0 0 1 0 4Z"
7195
+ />
7196
+ </svg>
7197
+ </span>
7198
+ <span class="pf-v6-c-button__text">Settings</span>
7199
+ </button>
7200
+ </div>
7201
+ <div class="pf-v6-c-toolbar__item">
7202
+ <button
7203
+ class="pf-v6-c-menu-toggle pf-m-dock pf-m-text pf-m-plain"
6788
7204
  type="button"
6789
7205
  aria-expanded="false"
6790
- aria-label="Actions"
7206
+ aria-label="Help"
6791
7207
  >
6792
7208
  <span class="pf-v6-c-menu-toggle__icon">
6793
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
7209
+ <i class="fas fa-question-circle" aria-hidden="true"></i>
6794
7210
  </span>
7211
+ <span class="pf-v6-c-menu-toggle__text">Help</span>
6795
7212
  </button>
6796
7213
  </div>
6797
7214
  </div>