npm - @patternfly/patternfly - Versions diffs - 6.0.0-alpha.34 → 6.0.0-alpha.39 - Mend

@patternfly/patternfly 6.0.0-alpha.34 → 6.0.0-alpha.39

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 (76) hide show

package/CODE_OF_CONDUCT.md +1 -2
package/assets/images/PF-HorizontalLogo-Color.svg +29 -0
package/assets/images/PF-HorizontalLogo-Reverse.svg +28 -0
package/assets/images/PF-IconLogo-color.svg +17 -0
package/components/Backdrop/backdrop.css +6 -2
package/components/Backdrop/backdrop.scss +5 -2
package/components/Banner/banner.css +4 -0
package/components/Banner/banner.scss +5 -0
package/components/Card/card.css +3 -0
package/components/Card/card.scss +8 -0
package/components/Divider/divider.css +97 -177
package/components/Divider/divider.scss +60 -79
package/components/Form/form.css +6 -0
package/components/Form/form.scss +4 -1
package/components/Masthead/masthead.css +267 -435
package/components/Masthead/masthead.scss +118 -233
package/components/MenuToggle/menu-toggle.css +1 -0
package/components/MenuToggle/menu-toggle.scss +2 -0
package/components/Popover/popover.css +0 -2
package/components/Popover/popover.scss +2 -2
package/components/SimpleList/simple-list.css +35 -52
package/components/SimpleList/simple-list.scss +41 -51
package/components/Table/table.scss +1 -0
package/components/Tooltip/tooltip.css +0 -2
package/components/Tooltip/tooltip.scss +3 -3
package/components/Truncate/truncate.css +4 -0
package/components/Truncate/truncate.scss +3 -0
package/docs/components/Accordion/examples/Accordion.md +6 -6
package/docs/components/Alert/examples/Alert.md +2 -2
package/docs/components/Brand/examples/Brand.md +9 -33
package/docs/components/Breadcrumb/examples/Breadcrumb.md +1 -1
package/docs/components/Card/examples/Card.md +18 -20
package/docs/components/Check/examples/Check.md +1 -0
package/docs/components/Content/examples/Content.md +5 -5
package/docs/components/Divider/examples/Divider.css +3 -1
package/docs/components/Divider/examples/Divider.md +4 -5
package/docs/components/InlineEdit/examples/InlineEdit.md +3 -1
package/docs/components/Label/examples/Label.md +11 -11
package/docs/components/Masthead/examples/masthead.md +441 -16
package/docs/components/Nav/examples/Navigation.css +18 -2
package/docs/components/Nav/examples/Navigation.md +1 -1
package/docs/components/Radio/examples/Radio.md +1 -1
package/docs/components/SimpleList/examples/SimpleList.md +3 -3
package/docs/components/Table/examples/Table.md +8 -8
package/docs/components/Truncate/examples/Truncate.css +2 -2
package/docs/demos/AboutModal/examples/AboutModal.md +40 -42
package/docs/demos/Alert/examples/Alert.md +120 -126
package/docs/demos/BackToTop/examples/BackToTop.md +40 -42
package/docs/demos/Banner/examples/Banner.md +79 -80
package/docs/demos/CardView/examples/CardView.md +40 -42
package/docs/demos/ContextSelector/examples/ContextSelector.md +129 -146
package/docs/demos/Dashboard/examples/Dashboard.md +40 -42
package/docs/demos/DataList/examples/DataList.md +160 -279
package/docs/demos/DescriptionList/examples/DescriptionList.md +120 -126
package/docs/demos/Drawer/examples/Drawer.md +200 -210
package/docs/demos/JumpLinks/examples/JumpLinks.md +240 -252
package/docs/demos/Masthead/examples/Masthead.md +143 -224
package/docs/demos/Modal/examples/Modal.md +240 -252
package/docs/demos/Nav/examples/Nav.md +320 -336
package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +200 -210
package/docs/demos/Page/examples/Page.md +360 -378
package/docs/demos/Page/examples/Penta.md +8 -15
package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +280 -294
package/docs/demos/Skeleton/examples/Skeleton.md +40 -42
package/docs/demos/Table/examples/Table.md +617 -647
package/docs/demos/Tabs/examples/Tabs.md +240 -252
package/docs/demos/Toolbar/examples/Toolbar.md +80 -84
package/docs/demos/Wizard/examples/Wizard.md +360 -378
package/docs/layouts/Flex/examples/Flex.md +11 -11
package/package.json +32 -32
package/patternfly-no-globals.css +422 -673
package/patternfly-theme-dark-unversioned.css +422 -673
package/patternfly.css +422 -673
package/patternfly.min.css +1 -1
package/patternfly.min.css.map +1 -1
package/components/SimpleList/themes/dark/simple-list.scss +0 -14

package/docs/demos/Masthead/examples/Masthead.md CHANGED Viewed

@@ -25,20 +25,16 @@ wrapperTag: div
       </button>
     </span>
     <div class="pf-v5-c-masthead__main">
-      <a
-        class="pf-v5-c-masthead__brand"
-        href="#"
-        style="--pf-v5-c-brand--Height: 36px;"
-      >
-        <svg height="36px" viewBox="0 0 679 158" role="img">
-          <title>Patternfly logo</title>
+      <a class="pf-v5-c-masthead__brand" href="#">
+        <svg height="40px" viewBox="0 0 679 158">
+          <title>PF-HorizontalLogo-Color</title>
           <defs>
             <linearGradient
               x1="68%"
               y1="2.25860997e-13%"
               x2="32%"
               y2="100%"
-              id="linearGradient-1"
+              id="linearGradient-masthead-basic-example-masthead"
             >
               <stop stop-color="#2B9AF3" offset="0%" />
               <stop
@@ -48,13 +44,7 @@ wrapperTag: div
               />
             </linearGradient>
           </defs>
-          <g
-            id="PF-HorizontalLogo-Color"
-            stroke="none"
-            stroke-width="1"
-            fill="none"
-            fill-rule="evenodd"
-          >
+          <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
             <g
               transform="translate(206.000000, 45.750000)"
               fill="var(--pf-t--global--text--color--regular)"
@@ -89,19 +79,18 @@ wrapperTag: div
                 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"
               />
             </g>
-            <g id="Logo" transform="translate(0.000000, 0.000000)">
+            <g transform="translate(0.000000, 0.000000)">
               <path
                 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"
-                id="Rectangle-Copy-17"
-                fill="var(--pf-t--global--color--brand--200)"
+                fill="#0066CC"
               />
               <path
                 d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
-                fill="url(#linearGradient-1)"
+                fill="url(#linearGradient-masthead-basic-example-masthead)"
               />
               <path
                 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"
-                fill="url(#linearGradient-1)"
+                fill="url(#linearGradient-masthead-basic-example-masthead)"
                 transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
               />
             </g>
@@ -278,20 +267,16 @@ wrapperTag: div
       </button>
     </span>
     <div class="pf-v5-c-masthead__main">
-      <a
-        class="pf-v5-c-masthead__brand"
-        href="#"
-        style="--pf-v5-c-brand--Height: 36px;"
-      >
-        <svg height="36px" viewBox="0 0 679 158" role="img">
-          <title>Patternfly logo</title>
+      <a class="pf-v5-c-masthead__brand" href="#">
+        <svg height="40px" viewBox="0 0 679 158">
+          <title>PF-HorizontalLogo-Color</title>
           <defs>
             <linearGradient
               x1="68%"
               y1="2.25860997e-13%"
               x2="32%"
               y2="100%"
-              id="linearGradient-1"
+              id="linearGradient-masthead-context-selecton-drilldown-example-masthead"
             >
               <stop stop-color="#2B9AF3" offset="0%" />
               <stop
@@ -301,13 +286,7 @@ wrapperTag: div
               />
             </linearGradient>
           </defs>
-          <g
-            id="PF-HorizontalLogo-Color"
-            stroke="none"
-            stroke-width="1"
-            fill="none"
-            fill-rule="evenodd"
-          >
+          <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
             <g
               transform="translate(206.000000, 45.750000)"
               fill="var(--pf-t--global--text--color--regular)"
@@ -342,19 +321,18 @@ wrapperTag: div
                 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"
               />
             </g>
-            <g id="Logo" transform="translate(0.000000, 0.000000)">
+            <g transform="translate(0.000000, 0.000000)">
               <path
                 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"
-                id="Rectangle-Copy-17"
-                fill="var(--pf-t--global--color--brand--200)"
+                fill="#0066CC"
               />
               <path
                 d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
-                fill="url(#linearGradient-1)"
+                fill="url(#linearGradient-masthead-context-selecton-drilldown-example-masthead)"
               />
               <path
                 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"
-                fill="url(#linearGradient-1)"
+                fill="url(#linearGradient-masthead-context-selecton-drilldown-example-masthead)"
                 transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
               />
             </g>
@@ -559,20 +537,16 @@ wrapperTag: div
       </button>
     </span>
     <div class="pf-v5-c-masthead__main">
-      <a
-        class="pf-v5-c-masthead__brand"
-        href="#"
-        style="--pf-v5-c-brand--Height: 36px;"
-      >
-        <svg height="36px" viewBox="0 0 679 158" role="img">
-          <title>Patternfly logo</title>
+      <a class="pf-v5-c-masthead__brand" href="#">
+        <svg height="40px" viewBox="0 0 679 158">
+          <title>PF-HorizontalLogo-Color</title>
           <defs>
             <linearGradient
               x1="68%"
               y1="2.25860997e-13%"
               x2="32%"
               y2="100%"
-              id="linearGradient-1"
+              id="linearGradient-masthead-toolbar-filters-example-masthead"
             >
               <stop stop-color="#2B9AF3" offset="0%" />
               <stop
@@ -582,13 +556,7 @@ wrapperTag: div
               />
             </linearGradient>
           </defs>
-          <g
-            id="PF-HorizontalLogo-Color"
-            stroke="none"
-            stroke-width="1"
-            fill="none"
-            fill-rule="evenodd"
-          >
+          <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
             <g
               transform="translate(206.000000, 45.750000)"
               fill="var(--pf-t--global--text--color--regular)"
@@ -623,19 +591,18 @@ wrapperTag: div
                 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"
               />
             </g>
-            <g id="Logo" transform="translate(0.000000, 0.000000)">
+            <g transform="translate(0.000000, 0.000000)">
               <path
                 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"
-                id="Rectangle-Copy-17"
-                fill="var(--pf-t--global--color--brand--200)"
+                fill="#0066CC"
               />
               <path
                 d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
-                fill="url(#linearGradient-1)"
+                fill="url(#linearGradient-masthead-toolbar-filters-example-masthead)"
               />
               <path
                 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"
-                fill="url(#linearGradient-1)"
+                fill="url(#linearGradient-masthead-toolbar-filters-example-masthead)"
                 transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
               />
             </g>
@@ -874,20 +841,16 @@ wrapperTag: div
       </button>
     </span>
     <div class="pf-v5-c-masthead__main">
-      <a
-        class="pf-v5-c-masthead__brand"
-        href="#"
-        style="--pf-v5-c-brand--Height: 36px;"
-      >
-        <svg height="36px" viewBox="0 0 679 158" role="img">
-          <title>Patternfly logo</title>
+      <a class="pf-v5-c-masthead__brand" href="#">
+        <svg height="40px" viewBox="0 0 679 158">
+          <title>PF-HorizontalLogo-Color</title>
           <defs>
             <linearGradient
               x1="68%"
               y1="2.25860997e-13%"
               x2="32%"
               y2="100%"
-              id="linearGradient-1"
+              id="linearGradient-masthead-toggle-group-filters-example-masthead"
             >
               <stop stop-color="#2B9AF3" offset="0%" />
               <stop
@@ -897,13 +860,7 @@ wrapperTag: div
               />
             </linearGradient>
           </defs>
-          <g
-            id="PF-HorizontalLogo-Color"
-            stroke="none"
-            stroke-width="1"
-            fill="none"
-            fill-rule="evenodd"
-          >
+          <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
             <g
               transform="translate(206.000000, 45.750000)"
               fill="var(--pf-t--global--text--color--regular)"
@@ -938,19 +895,18 @@ wrapperTag: div
                 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"
               />
             </g>
-            <g id="Logo" transform="translate(0.000000, 0.000000)">
+            <g transform="translate(0.000000, 0.000000)">
               <path
                 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"
-                id="Rectangle-Copy-17"
-                fill="var(--pf-t--global--color--brand--200)"
+                fill="#0066CC"
               />
               <path
                 d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
-                fill="url(#linearGradient-1)"
+                fill="url(#linearGradient-masthead-toggle-group-filters-example-masthead)"
               />
               <path
                 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"
-                fill="url(#linearGradient-1)"
+                fill="url(#linearGradient-masthead-toggle-group-filters-example-masthead)"
                 transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
               />
             </g>
@@ -1189,20 +1145,16 @@ wrapperTag: div
       </button>
     </span>
     <div class="pf-v5-c-masthead__main">
-      <a
-        class="pf-v5-c-masthead__brand"
-        href="#"
-        style="--pf-v5-c-brand--Height: 36px;"
-      >
-        <svg height="36px" viewBox="0 0 679 158" role="img">
-          <title>Patternfly logo</title>
+      <a class="pf-v5-c-masthead__brand" href="#">
+        <svg height="40px" viewBox="0 0 679 158">
+          <title>PF-HorizontalLogo-Color</title>
           <defs>
             <linearGradient
               x1="68%"
               y1="2.25860997e-13%"
               x2="32%"
               y2="100%"
-              id="linearGradient-1"
+              id="linearGradient-masthead-expandable-search-example-masthead"
             >
               <stop stop-color="#2B9AF3" offset="0%" />
               <stop
@@ -1212,13 +1164,7 @@ wrapperTag: div
               />
             </linearGradient>
           </defs>
-          <g
-            id="PF-HorizontalLogo-Color"
-            stroke="none"
-            stroke-width="1"
-            fill="none"
-            fill-rule="evenodd"
-          >
+          <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
             <g
               transform="translate(206.000000, 45.750000)"
               fill="var(--pf-t--global--text--color--regular)"
@@ -1253,19 +1199,18 @@ wrapperTag: div
                 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"
               />
             </g>
-            <g id="Logo" transform="translate(0.000000, 0.000000)">
+            <g transform="translate(0.000000, 0.000000)">
               <path
                 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"
-                id="Rectangle-Copy-17"
-                fill="var(--pf-t--global--color--brand--200)"
+                fill="#0066CC"
               />
               <path
                 d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
-                fill="url(#linearGradient-1)"
+                fill="url(#linearGradient-masthead-expandable-search-example-masthead)"
               />
               <path
                 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"
-                fill="url(#linearGradient-1)"
+                fill="url(#linearGradient-masthead-expandable-search-example-masthead)"
                 transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
               />
             </g>
@@ -1445,20 +1390,16 @@ wrapperTag: div
       </button>
     </span>
     <div class="pf-v5-c-masthead__main">
-      <a
-        class="pf-v5-c-masthead__brand"
-        href="#"
-        style="--pf-v5-c-brand--Height: 36px;"
-      >
-        <svg height="36px" viewBox="0 0 679 158" role="img">
-          <title>Patternfly logo</title>
+      <a class="pf-v5-c-masthead__brand" href="#">
+        <svg height="40px" viewBox="0 0 679 158">
+          <title>PF-HorizontalLogo-Color</title>
           <defs>
             <linearGradient
               x1="68%"
               y1="2.25860997e-13%"
               x2="32%"
               y2="100%"
-              id="linearGradient-1"
+              id="linearGradient-masthead-expandable-search-expanded-example-masthead"
             >
               <stop stop-color="#2B9AF3" offset="0%" />
               <stop
@@ -1468,13 +1409,7 @@ wrapperTag: div
               />
             </linearGradient>
           </defs>
-          <g
-            id="PF-HorizontalLogo-Color"
-            stroke="none"
-            stroke-width="1"
-            fill="none"
-            fill-rule="evenodd"
-          >
+          <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
             <g
               transform="translate(206.000000, 45.750000)"
               fill="var(--pf-t--global--text--color--regular)"
@@ -1509,19 +1444,18 @@ wrapperTag: div
                 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"
               />
             </g>
-            <g id="Logo" transform="translate(0.000000, 0.000000)">
+            <g transform="translate(0.000000, 0.000000)">
               <path
                 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"
-                id="Rectangle-Copy-17"
-                fill="var(--pf-t--global--color--brand--200)"
+                fill="#0066CC"
               />
               <path
                 d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
-                fill="url(#linearGradient-1)"
+                fill="url(#linearGradient-masthead-expandable-search-expanded-example-masthead)"
               />
               <path
                 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"
-                fill="url(#linearGradient-1)"
+                fill="url(#linearGradient-masthead-expandable-search-expanded-example-masthead)"
                 transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
               />
             </g>
@@ -1719,20 +1653,16 @@ wrapperTag: div
       </button>
     </span>
     <div class="pf-v5-c-masthead__main">
-      <a
-        class="pf-v5-c-masthead__brand"
-        href="#"
-        style="--pf-v5-c-brand--Height: 36px;"
-      >
-        <svg height="36px" viewBox="0 0 679 158" role="img">
-          <title>Patternfly logo</title>
+      <a class="pf-v5-c-masthead__brand" href="#">
+        <svg height="40px" viewBox="0 0 679 158">
+          <title>PF-HorizontalLogo-Color</title>
           <defs>
             <linearGradient
               x1="68%"
               y1="2.25860997e-13%"
               x2="32%"
               y2="100%"
-              id="linearGradient-1"
+              id="linearGradient-masthead-advanced-with-menu-example-masthead"
             >
               <stop stop-color="#2B9AF3" offset="0%" />
               <stop
@@ -1742,13 +1672,7 @@ wrapperTag: div
               />
             </linearGradient>
           </defs>
-          <g
-            id="PF-HorizontalLogo-Color"
-            stroke="none"
-            stroke-width="1"
-            fill="none"
-            fill-rule="evenodd"
-          >
+          <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
             <g
               transform="translate(206.000000, 45.750000)"
               fill="var(--pf-t--global--text--color--regular)"
@@ -1783,19 +1707,18 @@ wrapperTag: div
                 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"
               />
             </g>
-            <g id="Logo" transform="translate(0.000000, 0.000000)">
+            <g transform="translate(0.000000, 0.000000)">
               <path
                 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"
-                id="Rectangle-Copy-17"
-                fill="var(--pf-t--global--color--brand--200)"
+                fill="#0066CC"
               />
               <path
                 d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
-                fill="url(#linearGradient-1)"
+                fill="url(#linearGradient-masthead-advanced-with-menu-example-masthead)"
               />
               <path
                 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"
-                fill="url(#linearGradient-1)"
+                fill="url(#linearGradient-masthead-advanced-with-menu-example-masthead)"
                 transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
               />
             </g>
@@ -1810,8 +1733,38 @@ wrapperTag: div
       >
         <div class="pf-v5-c-toolbar__content">
           <div class="pf-v5-c-toolbar__content-section">
+            <div class="pf-v5-c-toolbar__item">
+              <button
+                class="pf-v5-c-menu-toggle"
+                type="button"
+                aria-expanded="false"
+              >
+                <span class="pf-v5-c-menu-toggle__text">Overview</span>
+                <span class="pf-v5-c-menu-toggle__controls">
+                  <span class="pf-v5-c-menu-toggle__toggle-icon">
+                    <i class="fas fa-angle-down" aria-hidden="true"></i>
+                  </span>
+                </span>
+              </button>
+            </div>
+            <div class="pf-v5-c-toolbar__item">
+              <button
+                class="pf-v5-c-menu-toggle"
+                type="button"
+                aria-expanded="false"
+              >
+                <span class="pf-v5-c-menu-toggle__text">Services</span>
+                <span class="pf-v5-c-menu-toggle__controls">
+                  <span class="pf-v5-c-menu-toggle__toggle-icon">
+                    <i class="fas fa-angle-down" aria-hidden="true"></i>
+                  </span>
+                </span>
+              </button>
+            </div>
             <div
-              class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
+              class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-align-end pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
             >
               <div
                 class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
@@ -1858,27 +1811,6 @@ wrapperTag: div
                 </button>
               </div>
             </div>
-            <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
-              <button
-                class="pf-v5-c-menu-toggle pf-m-full-height"
-                type="button"
-                aria-expanded="false"
-              >
-                <span class="pf-v5-c-menu-toggle__icon">
-                  <img
-                    class="pf-v5-c-avatar"
-                    alt="Avatar image"
-                    src="/assets/images/img_avatar-light.svg"
-                  />
-                </span>
-                <span class="pf-v5-c-menu-toggle__text">Ned Username</span>
-                <span class="pf-v5-c-menu-toggle__controls">
-                  <span class="pf-v5-c-menu-toggle__toggle-icon">
-                    <i class="fas fa-angle-down" aria-hidden="true"></i>
-                  </span>
-                </span>
-              </button>
-            </div>
           </div>
         </div>
       </div>
@@ -2017,20 +1949,16 @@ wrapperTag: div
   </div>
   <header class="pf-v5-c-masthead" id="masthead-horizontal-nav-masthead">
     <div class="pf-v5-c-masthead__main">
-      <a
-        class="pf-v5-c-masthead__brand"
-        href="#"
-        style="--pf-v5-c-brand--Height: 36px;"
-      >
-        <svg height="36px" viewBox="0 0 679 158" role="img">
-          <title>Patternfly logo</title>
+      <a class="pf-v5-c-masthead__brand" href="#">
+        <svg height="40px" viewBox="0 0 679 158">
+          <title>PF-HorizontalLogo-Color</title>
           <defs>
             <linearGradient
               x1="68%"
               y1="2.25860997e-13%"
               x2="32%"
               y2="100%"
-              id="linearGradient-1"
+              id="linearGradient-masthead-horizontal-nav-masthead"
             >
               <stop stop-color="#2B9AF3" offset="0%" />
               <stop
@@ -2040,13 +1968,7 @@ wrapperTag: div
               />
             </linearGradient>
           </defs>
-          <g
-            id="PF-HorizontalLogo-Color"
-            stroke="none"
-            stroke-width="1"
-            fill="none"
-            fill-rule="evenodd"
-          >
+          <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
             <g
               transform="translate(206.000000, 45.750000)"
               fill="var(--pf-t--global--text--color--regular)"
@@ -2081,19 +2003,18 @@ wrapperTag: div
                 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"
               />
             </g>
-            <g id="Logo" transform="translate(0.000000, 0.000000)">
+            <g transform="translate(0.000000, 0.000000)">
               <path
                 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"
-                id="Rectangle-Copy-17"
-                fill="var(--pf-t--global--color--brand--200)"
+                fill="#0066CC"
               />
               <path
                 d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
-                fill="url(#linearGradient-1)"
+                fill="url(#linearGradient-masthead-horizontal-nav-masthead)"
               />
               <path
                 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"
-                fill="url(#linearGradient-1)"
+                fill="url(#linearGradient-masthead-horizontal-nav-masthead)"
                 transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
               />
             </g>
@@ -2108,6 +2029,36 @@ wrapperTag: div
       >
         <div class="pf-v5-c-toolbar__content">
           <div class="pf-v5-c-toolbar__content-section">
+            <div class="pf-v5-c-toolbar__item">
+              <button
+                class="pf-v5-c-menu-toggle"
+                type="button"
+                aria-expanded="false"
+              >
+                <span class="pf-v5-c-menu-toggle__text">Overview</span>
+                <span class="pf-v5-c-menu-toggle__controls">
+                  <span class="pf-v5-c-menu-toggle__toggle-icon">
+                    <i class="fas fa-angle-down" aria-hidden="true"></i>
+                  </span>
+                </span>
+              </button>
+            </div>
+            <div class="pf-v5-c-toolbar__item">
+              <button
+                class="pf-v5-c-menu-toggle"
+                type="button"
+                aria-expanded="false"
+              >
+                <span class="pf-v5-c-menu-toggle__text">Services</span>
+                <span class="pf-v5-c-menu-toggle__controls">
+                  <span class="pf-v5-c-menu-toggle__toggle-icon">
+                    <i class="fas fa-angle-down" aria-hidden="true"></i>
+                  </span>
+                </span>
+              </button>
+            </div>
             <div
               class="pf-v5-c-toolbar__item pf-m-overflow-container"
               style="--pf-v5-c-toolbar__item--MinWidth: 18ch;"
@@ -2154,7 +2105,7 @@ wrapperTag: div
               </nav>
             </div>
             <div
-              class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
+              class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-align-end pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
             >
               <div
                 class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
@@ -2201,27 +2152,6 @@ wrapperTag: div
                 </button>
               </div>
             </div>
-            <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
-              <button
-                class="pf-v5-c-menu-toggle pf-m-full-height"
-                type="button"
-                aria-expanded="false"
-              >
-                <span class="pf-v5-c-menu-toggle__icon">
-                  <img
-                    class="pf-v5-c-avatar"
-                    alt="Avatar image"
-                    src="/assets/images/img_avatar-light.svg"
-                  />
-                </span>
-                <span class="pf-v5-c-menu-toggle__text">Ned Username</span>
-                <span class="pf-v5-c-menu-toggle__controls">
-                  <span class="pf-v5-c-menu-toggle__toggle-icon">
-                    <i class="fas fa-angle-down" aria-hidden="true"></i>
-                  </span>
-                </span>
-              </button>
-            </div>
           </div>
         </div>
       </div>
@@ -2346,20 +2276,16 @@ wrapperTag: div
       </button>
     </span>
     <div class="pf-v5-c-masthead__main">
-      <a
-        class="pf-v5-c-masthead__brand"
-        href="#"
-        style="--pf-v5-c-brand--Height: 36px;"
-      >
-        <svg height="36px" viewBox="0 0 679 158" role="img">
-          <title>Patternfly logo</title>
+      <a class="pf-v5-c-masthead__brand" href="#">
+        <svg height="40px" viewBox="0 0 679 158">
+          <title>PF-HorizontalLogo-Color</title>
           <defs>
             <linearGradient
               x1="68%"
               y1="2.25860997e-13%"
               x2="32%"
               y2="100%"
-              id="linearGradient-1"
+              id="linearGradient-masthead-toggle-group-filters-expanded-mobile-example-masthead"
             >
               <stop stop-color="#2B9AF3" offset="0%" />
               <stop
@@ -2369,13 +2295,7 @@ wrapperTag: div
               />
             </linearGradient>
           </defs>
-          <g
-            id="PF-HorizontalLogo-Color"
-            stroke="none"
-            stroke-width="1"
-            fill="none"
-            fill-rule="evenodd"
-          >
+          <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
             <g
               transform="translate(206.000000, 45.750000)"
               fill="var(--pf-t--global--text--color--regular)"
@@ -2410,19 +2330,18 @@ wrapperTag: div
                 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"
               />
             </g>
-            <g id="Logo" transform="translate(0.000000, 0.000000)">
+            <g transform="translate(0.000000, 0.000000)">
               <path
                 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"
-                id="Rectangle-Copy-17"
-                fill="var(--pf-t--global--color--brand--200)"
+                fill="#0066CC"
               />
               <path
                 d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
-                fill="url(#linearGradient-1)"
+                fill="url(#linearGradient-masthead-toggle-group-filters-expanded-mobile-example-masthead)"
               />
               <path
                 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"
-                fill="url(#linearGradient-1)"
+                fill="url(#linearGradient-masthead-toggle-group-filters-expanded-mobile-example-masthead)"
                 transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
               />
             </g>