@patternfly/patternfly 5.2.0-prerelease.3 → 6.0.0-alpha.10

package/docs/components/Card/examples/Card.md

@@ -25,61 +25,7 @@ cssPrefix: pf-v5-c-card
 <div class="pf-v5-c-card" id="card-action-example-1">
   <div class="pf-v5-c-card__header">
     <div class="pf-v5-c-card__header-main">
-      <svg
-        version="1.1"
-        xmlns="http://www.w3.org/2000/svg"
-        viewBox="0 0 706.3 132.5"
-        fill="currentColor"
-        width="300px"
-      >
-        <g>
-          <path
-            d="M197.2,83.9V48.6h15.2c2.2,0,4.1,0.3,5.6,1c1.5,0.7,2.8,1.5,3.7,2.6c1,1.1,1.6,2.3,2.1,3.6
-                c0.4,1.3,0.6,2.7,0.6,4c0,0.9-0.1,1.7-0.3,2.6c-0.2,0.9-0.5,1.7-0.9,2.6c-0.4,0.8-0.9,1.6-1.6,2.3c-0.6,0.7-1.4,1.4-2.3,1.9
-                c-0.9,0.5-1.9,1-3.1,1.3c-1.2,0.3-2.5,0.5-3.9,0.5h-8.3v13H197.2z M212.7,64.4c0.9,0,1.6-0.1,2.2-0.4c0.6-0.3,1.1-0.6,1.4-1.1
-                c0.4-0.4,0.6-0.9,0.8-1.5c0.2-0.6,0.3-1.1,0.3-1.7c0-0.5-0.1-1-0.2-1.6c-0.1-0.5-0.4-1-0.7-1.5c-0.4-0.5-0.8-0.8-1.4-1.1
-                c-0.6-0.3-1.4-0.4-2.3-0.4h-8.6v9.4H212.7z"
-          />
-          <path
-            d="M271.6,83.9l-2.7-7.3h-13.6l-2.7,7.3h-7.3l13.5-35.4h6.7l13.5,35.4H271.6z M263.2,61.2
-                c-0.2-0.4-0.4-0.9-0.6-1.5c-0.2-0.6-0.4-1.1-0.5-1.7c-0.1,0.5-0.3,1.1-0.5,1.7c-0.2,0.6-0.4,1.1-0.6,1.5l-3.5,9.2h9.2L263.2,61.2z"
-          />
-          <path d="M317.3,55.2v28.8h-6.8V55.2h-10.1v-6.6h27v6.6H317.3z" />
-          <path d="M370.2,55.2v28.8h-6.8V55.2h-10.1v-6.6h27v6.6H370.2z" />
-          <path
-            d="M408.5,83.9V48.6h24.1v6.5h-17.3v7.4h10.2v6.5h-10.2v8.5h18.4v6.5H408.5z"
-          />
-          <path
-            d="M462.4,83.9V48.6h16.4c2.2,0,4.1,0.3,5.6,0.9c1.5,0.6,2.7,1.4,3.6,2.5c0.9,1,1.6,2.2,2,3.5
-                c0.4,1.3,0.6,2.7,0.6,4.2c0,1-0.1,2-0.4,3c-0.3,1-0.7,2-1.3,2.9c-0.6,0.9-1.3,1.8-2.1,2.5c-0.9,0.7-1.8,1.3-3,1.7l6.9,14.1H483
-                l-6.6-13.2h-7.1v13.2H462.4z M478.9,64.3c0.9,0,1.6-0.1,2.2-0.4c0.6-0.3,1.1-0.6,1.4-1c0.4-0.4,0.6-0.9,0.8-1.5
-                c0.2-0.6,0.2-1.1,0.2-1.7c0-0.6-0.1-1.1-0.2-1.7c-0.1-0.6-0.4-1-0.7-1.5c-0.3-0.4-0.8-0.8-1.4-1c-0.6-0.3-1.4-0.4-2.3-0.4h-9.7v9.2
-                H478.9z"
-          />
-          <path
-            d="M541.9,83.9l-14-20.6c-0.2-0.3-0.5-0.8-0.8-1.3c-0.3-0.5-0.5-1-0.7-1.4c0.1,0.4,0.1,0.8,0.1,1.3
-                c0,0.5,0,1,0,1.3v20.6h-6.8V48.6h6.4l13.7,20.4c0.2,0.3,0.5,0.7,0.7,1.2c0.3,0.5,0.5,1,0.7,1.4c0-0.5-0.1-1-0.1-1.4
-                c0-0.5,0-0.9,0-1.2V48.6h6.8v35.4H541.9z"
-          />
-          <path
-            d="M578.4,83.9V48.6h23.7v6.5h-16.9v7.4H596v6.5h-10.7v15H578.4z"
-          />
-          <path d="M629.8,83.9V48.6h6.8v28.8h17.1v6.6H629.8z" />
-          <path
-            d="M686.4,83.9V70.2l-13.1-21.6h7.7l8.7,14.5l8.7-14.5h7.7l-13.1,21.6v13.8H686.4z"
-          />
-        </g>
-        <g>
-          <path
-            d="M49,103l-21.2,4.9L0,68.4L70,0l70,68.4l-27.8,39.4L91,103l-21,29.5L49,103z M70,128.7l18.6-26.2l-7.2-1.7
-                l-11,16.2l-11.9-16.2l-7.2,1.7L70,128.7z M70.4,113.1l9.2-13.5L70,6.7l-9.5,92.9L70.4,113.1z M28.8,105.4l18.8-4.3L33.8,81.7
-                l4.1-9.3L25.2,55L58,14.9L2.9,68.7L28.8,105.4z M111.2,105.4l16.3-23.1l9.6-13.6L82,14.9L114.9,55l-12.8,17.4l4.1,9.3L92.4,101
-                L111.2,105.4z M90.1,100.5l13.6-19.1l-3-6.9L82.7,98.8L90.1,100.5z M50,100.5l7.3-1.7L39.4,74.5l-3,6.9L50,100.5z M81.9,96.2
-                l17.6-24.1L72.9,11.6L81.9,96.2z M58.1,96.2l9-84.6L40.5,72.1L58.1,96.2z M39,70L66.1,8.5L28,55.1L39,70z M101.1,70l11-15L74,8.5
-                L101.1,70z"
-          />
-        </g>
-      </svg>
+      <img src="/assets/images/pf_logo.svg" width="300px" alt="Logo" />
     </div>
     <div class="pf-v5-c-card__actions">
       <div class="pf-v5-c-dropdown">
@@ -347,61 +293,7 @@ cssPrefix: pf-v5-c-card
 <div class="pf-v5-c-card" id="card-image-head-example">
   <div class="pf-v5-c-card__header">
     <div class="pf-v5-c-card__header-main">
-      <svg
-        version="1.1"
-        xmlns="http://www.w3.org/2000/svg"
-        viewBox="0 0 706.3 132.5"
-        fill="currentColor"
-        width="300px"
-      >
-        <g>
-          <path
-            d="M197.2,83.9V48.6h15.2c2.2,0,4.1,0.3,5.6,1c1.5,0.7,2.8,1.5,3.7,2.6c1,1.1,1.6,2.3,2.1,3.6
-                c0.4,1.3,0.6,2.7,0.6,4c0,0.9-0.1,1.7-0.3,2.6c-0.2,0.9-0.5,1.7-0.9,2.6c-0.4,0.8-0.9,1.6-1.6,2.3c-0.6,0.7-1.4,1.4-2.3,1.9
-                c-0.9,0.5-1.9,1-3.1,1.3c-1.2,0.3-2.5,0.5-3.9,0.5h-8.3v13H197.2z M212.7,64.4c0.9,0,1.6-0.1,2.2-0.4c0.6-0.3,1.1-0.6,1.4-1.1
-                c0.4-0.4,0.6-0.9,0.8-1.5c0.2-0.6,0.3-1.1,0.3-1.7c0-0.5-0.1-1-0.2-1.6c-0.1-0.5-0.4-1-0.7-1.5c-0.4-0.5-0.8-0.8-1.4-1.1
-                c-0.6-0.3-1.4-0.4-2.3-0.4h-8.6v9.4H212.7z"
-          />
-          <path
-            d="M271.6,83.9l-2.7-7.3h-13.6l-2.7,7.3h-7.3l13.5-35.4h6.7l13.5,35.4H271.6z M263.2,61.2
-                c-0.2-0.4-0.4-0.9-0.6-1.5c-0.2-0.6-0.4-1.1-0.5-1.7c-0.1,0.5-0.3,1.1-0.5,1.7c-0.2,0.6-0.4,1.1-0.6,1.5l-3.5,9.2h9.2L263.2,61.2z"
-          />
-          <path d="M317.3,55.2v28.8h-6.8V55.2h-10.1v-6.6h27v6.6H317.3z" />
-          <path d="M370.2,55.2v28.8h-6.8V55.2h-10.1v-6.6h27v6.6H370.2z" />
-          <path
-            d="M408.5,83.9V48.6h24.1v6.5h-17.3v7.4h10.2v6.5h-10.2v8.5h18.4v6.5H408.5z"
-          />
-          <path
-            d="M462.4,83.9V48.6h16.4c2.2,0,4.1,0.3,5.6,0.9c1.5,0.6,2.7,1.4,3.6,2.5c0.9,1,1.6,2.2,2,3.5
-                c0.4,1.3,0.6,2.7,0.6,4.2c0,1-0.1,2-0.4,3c-0.3,1-0.7,2-1.3,2.9c-0.6,0.9-1.3,1.8-2.1,2.5c-0.9,0.7-1.8,1.3-3,1.7l6.9,14.1H483
-                l-6.6-13.2h-7.1v13.2H462.4z M478.9,64.3c0.9,0,1.6-0.1,2.2-0.4c0.6-0.3,1.1-0.6,1.4-1c0.4-0.4,0.6-0.9,0.8-1.5
-                c0.2-0.6,0.2-1.1,0.2-1.7c0-0.6-0.1-1.1-0.2-1.7c-0.1-0.6-0.4-1-0.7-1.5c-0.3-0.4-0.8-0.8-1.4-1c-0.6-0.3-1.4-0.4-2.3-0.4h-9.7v9.2
-                H478.9z"
-          />
-          <path
-            d="M541.9,83.9l-14-20.6c-0.2-0.3-0.5-0.8-0.8-1.3c-0.3-0.5-0.5-1-0.7-1.4c0.1,0.4,0.1,0.8,0.1,1.3
-                c0,0.5,0,1,0,1.3v20.6h-6.8V48.6h6.4l13.7,20.4c0.2,0.3,0.5,0.7,0.7,1.2c0.3,0.5,0.5,1,0.7,1.4c0-0.5-0.1-1-0.1-1.4
-                c0-0.5,0-0.9,0-1.2V48.6h6.8v35.4H541.9z"
-          />
-          <path
-            d="M578.4,83.9V48.6h23.7v6.5h-16.9v7.4H596v6.5h-10.7v15H578.4z"
-          />
-          <path d="M629.8,83.9V48.6h6.8v28.8h17.1v6.6H629.8z" />
-          <path
-            d="M686.4,83.9V70.2l-13.1-21.6h7.7l8.7,14.5l8.7-14.5h7.7l-13.1,21.6v13.8H686.4z"
-          />
-        </g>
-        <g>
-          <path
-            d="M49,103l-21.2,4.9L0,68.4L70,0l70,68.4l-27.8,39.4L91,103l-21,29.5L49,103z M70,128.7l18.6-26.2l-7.2-1.7
-                l-11,16.2l-11.9-16.2l-7.2,1.7L70,128.7z M70.4,113.1l9.2-13.5L70,6.7l-9.5,92.9L70.4,113.1z M28.8,105.4l18.8-4.3L33.8,81.7
-                l4.1-9.3L25.2,55L58,14.9L2.9,68.7L28.8,105.4z M111.2,105.4l16.3-23.1l9.6-13.6L82,14.9L114.9,55l-12.8,17.4l4.1,9.3L92.4,101
-                L111.2,105.4z M90.1,100.5l13.6-19.1l-3-6.9L82.7,98.8L90.1,100.5z M50,100.5l7.3-1.7L39.4,74.5l-3,6.9L50,100.5z M81.9,96.2
-                l17.6-24.1L72.9,11.6L81.9,96.2z M58.1,96.2l9-84.6L40.5,72.1L58.1,96.2z M39,70L66.1,8.5L28,55.1L39,70z M101.1,70l11-15L74,8.5
-                L101.1,70z"
-          />
-        </g>
-      </svg>
+      <img src="/assets/images/pf_logo.svg" width="300px" alt="Logo" />
     </div>
   </div>
   <div class="pf-v5-c-card__title">

package/docs/components/Masthead/examples/masthead.md

@@ -44,12 +44,13 @@ cssPrefix: pf-v5-c-masthead
     <a class="pf-v5-c-masthead__brand" href="#">Logo</a>
   </div>
   <div class="pf-v5-c-masthead__content">
-    <div class="pf-v5-l-flex">
-      <span>Content</span>
-      <button class="pf-v5-c-button pf-m-primary" type="button">Primary</button>
-      <button class="pf-v5-c-button pf-m-secondary" type="button">Secondary</button>
-      <button class="pf-v5-c-button pf-m-tertiary" type="button">Tertiary</button>
-    </div>
+    <span>Content</span>
+    <button
+      class="pf-v5-c-button pf-m-primary pf-v5-u-text-align-right"
+      type="button"
+    >Primary</button>
+    <button class="pf-v5-c-button pf-m-secondary" type="button">Secondary</button>
+    <button class="pf-v5-c-button pf-m-tertiary" type="button">Tertiary</button>
   </div>
 </header>
 
@@ -127,52 +128,6 @@ cssPrefix: pf-v5-c-masthead
 
 ```
 
-### Light variant
-
-```html
-<header class="pf-v5-c-masthead pf-m-light" id="light-masthead">
-  <span class="pf-v5-c-masthead__toggle">
-    <button
-      class="pf-v5-c-button pf-m-plain"
-      type="button"
-      aria-label="Global navigation"
-    >
-      <i class="fas fa-bars" aria-hidden="true"></i>
-    </button>
-  </span>
-  <div class="pf-v5-c-masthead__main">
-    <a class="pf-v5-c-masthead__brand" href="#">Logo</a>
-  </div>
-  <div class="pf-v5-c-masthead__content">
-    <span>Content</span>
-  </div>
-</header>
-
-```
-
-### Light 200 variant
-
-```html
-<header class="pf-v5-c-masthead pf-m-light-200" id="light-200-masthead">
-  <span class="pf-v5-c-masthead__toggle">
-    <button
-      class="pf-v5-c-button pf-m-plain"
-      type="button"
-      aria-label="Global navigation"
-    >
-      <i class="fas fa-bars" aria-hidden="true"></i>
-    </button>
-  </span>
-  <div class="pf-v5-c-masthead__main">
-    <a class="pf-v5-c-masthead__brand" href="#">Logo</a>
-  </div>
-  <div class="pf-v5-c-masthead__content">
-    <span>Content</span>
-  </div>
-</header>
-
-```
-
 ### Insets
 
 ```html
@@ -208,5 +163,3 @@ cssPrefix: pf-v5-c-masthead
 | `.pf-v5-c-masthead__brand` | `<a>, <div>` | Initiates the masthead content component. |
 | `.pf-v5-c-masthead__content` | `<div>` | Initiates the masthead content component. |
 | `.pf-m-inset-{none, sm, md, lg, xl, 2xl}{-on-[breakpoint]}` | `.pf-v5-c-masthead` | Modifies masthead horizontal padding at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
-| `.pf-m-light` | `.pf-v5-c-masthead` |  Modifies a masthead component to have a light theme with a background color of `--pf-v5-global--BackgroundColor--100`. |
-| `.pf-m-light-200` | `.pf-v5-c-masthead` |  Modifies a masthead component to have a light theme with a background color of `--pf-v5-global--BackgroundColor--200`. |

package/docs/components/MenuToggle/examples/MenuToggle.md

@@ -14,7 +14,7 @@ cssPrefix: pf-v5-c-menu-toggle
   <span class="pf-v5-c-menu-toggle__text">Collapsed</span>
   <span class="pf-v5-c-menu-toggle__controls">
     <span class="pf-v5-c-menu-toggle__toggle-icon">
-      <i class="fas fa-caret-down" aria-hidden="true"></i>
+      <i class="fas fa-angle-down" aria-hidden="true"></i>
     </span>
   </span>
 </button>
@@ -32,7 +32,7 @@ cssPrefix: pf-v5-c-menu-toggle
   <span class="pf-v5-c-menu-toggle__text">Expanded</span>
   <span class="pf-v5-c-menu-toggle__controls">
     <span class="pf-v5-c-menu-toggle__toggle-icon">
-      <i class="fas fa-caret-down" aria-hidden="true"></i>
+      <i class="fas fa-angle-down" aria-hidden="true"></i>
     </span>
   </span>
 </button>
@@ -51,7 +51,7 @@ cssPrefix: pf-v5-c-menu-toggle
   <span class="pf-v5-c-menu-toggle__text">Disabled</span>
   <span class="pf-v5-c-menu-toggle__controls">
     <span class="pf-v5-c-menu-toggle__toggle-icon">
-      <i class="fas fa-caret-down" aria-hidden="true"></i>
+      <i class="fas fa-angle-down" aria-hidden="true"></i>
     </span>
   </span>
 </button>
@@ -68,7 +68,7 @@ cssPrefix: pf-v5-c-menu-toggle
   </span>
   <span class="pf-v5-c-menu-toggle__controls">
     <span class="pf-v5-c-menu-toggle__toggle-icon">
-      <i class="fas fa-caret-down" aria-hidden="true"></i>
+      <i class="fas fa-angle-down" aria-hidden="true"></i>
     </span>
   </span>
 </button>
@@ -86,7 +86,7 @@ cssPrefix: pf-v5-c-menu-toggle
   <span class="pf-v5-c-menu-toggle__text">Collapsed</span>
   <span class="pf-v5-c-menu-toggle__controls">
     <span class="pf-v5-c-menu-toggle__toggle-icon">
-      <i class="fas fa-caret-down" aria-hidden="true"></i>
+      <i class="fas fa-angle-down" aria-hidden="true"></i>
     </span>
   </span>
 </button>
@@ -103,7 +103,7 @@ cssPrefix: pf-v5-c-menu-toggle
   <span class="pf-v5-c-menu-toggle__text">Icon</span>
   <span class="pf-v5-c-menu-toggle__controls">
     <span class="pf-v5-c-menu-toggle__toggle-icon">
-      <i class="fas fa-caret-down" aria-hidden="true"></i>
+      <i class="fas fa-angle-down" aria-hidden="true"></i>
     </span>
   </span>
 </button>
@@ -117,7 +117,7 @@ cssPrefix: pf-v5-c-menu-toggle
   <span class="pf-v5-c-menu-toggle__text">Expanded</span>
   <span class="pf-v5-c-menu-toggle__controls">
     <span class="pf-v5-c-menu-toggle__toggle-icon">
-      <i class="fas fa-caret-down" aria-hidden="true"></i>
+      <i class="fas fa-angle-down" aria-hidden="true"></i>
     </span>
   </span>
 </button>
@@ -132,7 +132,7 @@ cssPrefix: pf-v5-c-menu-toggle
   <span class="pf-v5-c-menu-toggle__text">Disabled</span>
   <span class="pf-v5-c-menu-toggle__controls">
     <span class="pf-v5-c-menu-toggle__toggle-icon">
-      <i class="fas fa-caret-down" aria-hidden="true"></i>
+      <i class="fas fa-angle-down" aria-hidden="true"></i>
     </span>
   </span>
 </button>
@@ -150,7 +150,7 @@ cssPrefix: pf-v5-c-menu-toggle
   <span class="pf-v5-c-menu-toggle__text">Collapsed</span>
   <span class="pf-v5-c-menu-toggle__controls">
     <span class="pf-v5-c-menu-toggle__toggle-icon">
-      <i class="fas fa-caret-down" aria-hidden="true"></i>
+      <i class="fas fa-angle-down" aria-hidden="true"></i>
     </span>
   </span>
 </button>
@@ -167,7 +167,7 @@ cssPrefix: pf-v5-c-menu-toggle
   <span class="pf-v5-c-menu-toggle__text">Icon</span>
   <span class="pf-v5-c-menu-toggle__controls">
     <span class="pf-v5-c-menu-toggle__toggle-icon">
-      <i class="fas fa-caret-down" aria-hidden="true"></i>
+      <i class="fas fa-angle-down" aria-hidden="true"></i>
     </span>
   </span>
 </button>
@@ -181,7 +181,7 @@ cssPrefix: pf-v5-c-menu-toggle
   <span class="pf-v5-c-menu-toggle__text">Expanded</span>
   <span class="pf-v5-c-menu-toggle__controls">
     <span class="pf-v5-c-menu-toggle__toggle-icon">
-      <i class="fas fa-caret-down" aria-hidden="true"></i>
+      <i class="fas fa-angle-down" aria-hidden="true"></i>
     </span>
   </span>
 </button>
@@ -196,7 +196,7 @@ cssPrefix: pf-v5-c-menu-toggle
   <span class="pf-v5-c-menu-toggle__text">Disabled</span>
   <span class="pf-v5-c-menu-toggle__controls">
     <span class="pf-v5-c-menu-toggle__toggle-icon">
-      <i class="fas fa-caret-down" aria-hidden="true"></i>
+      <i class="fas fa-angle-down" aria-hidden="true"></i>
     </span>
   </span>
 </button>
@@ -250,7 +250,7 @@ cssPrefix: pf-v5-c-menu-toggle
   <span class="pf-v5-c-menu-toggle__text">Disabled</span>
   <span class="pf-v5-c-menu-toggle__controls">
     <span class="pf-v5-c-menu-toggle__toggle-icon">
-      <i class="fas fa-caret-down" aria-hidden="true"></i>
+      <i class="fas fa-angle-down" aria-hidden="true"></i>
     </span>
   </span>
 </button>
@@ -264,7 +264,7 @@ cssPrefix: pf-v5-c-menu-toggle
   <span class="pf-v5-c-menu-toggle__text">Custom text</span>
   <span class="pf-v5-c-menu-toggle__controls">
     <span class="pf-v5-c-menu-toggle__toggle-icon">
-      <i class="fas fa-caret-down" aria-hidden="true"></i>
+      <i class="fas fa-angle-down" aria-hidden="true"></i>
     </span>
   </span>
 </button>
@@ -299,7 +299,7 @@ cssPrefix: pf-v5-c-menu-toggle
   >
     <span class="pf-v5-c-menu-toggle__controls">
       <span class="pf-v5-c-menu-toggle__toggle-icon">
-        <i class="fas fa-caret-down" aria-hidden="true"></i>
+        <i class="fas fa-angle-down" aria-hidden="true"></i>
       </span>
     </span>
   </button>
@@ -328,7 +328,7 @@ cssPrefix: pf-v5-c-menu-toggle
   >
     <span class="pf-v5-c-menu-toggle__controls">
       <span class="pf-v5-c-menu-toggle__toggle-icon">
-        <i class="fas fa-caret-down" aria-hidden="true"></i>
+        <i class="fas fa-angle-down" aria-hidden="true"></i>
       </span>
     </span>
   </button>
@@ -357,7 +357,7 @@ cssPrefix: pf-v5-c-menu-toggle
   >
     <span class="pf-v5-c-menu-toggle__controls">
       <span class="pf-v5-c-menu-toggle__toggle-icon">
-        <i class="fas fa-caret-down" aria-hidden="true"></i>
+        <i class="fas fa-angle-down" aria-hidden="true"></i>
       </span>
     </span>
   </button>
@@ -393,7 +393,7 @@ cssPrefix: pf-v5-c-menu-toggle
   >
     <span class="pf-v5-c-menu-toggle__controls">
       <span class="pf-v5-c-menu-toggle__toggle-icon">
-        <i class="fas fa-caret-down" aria-hidden="true"></i>
+        <i class="fas fa-angle-down" aria-hidden="true"></i>
       </span>
     </span>
   </button>
@@ -422,7 +422,7 @@ cssPrefix: pf-v5-c-menu-toggle
   >
     <span class="pf-v5-c-menu-toggle__controls">
       <span class="pf-v5-c-menu-toggle__toggle-icon">
-        <i class="fas fa-caret-down" aria-hidden="true"></i>
+        <i class="fas fa-angle-down" aria-hidden="true"></i>
       </span>
     </span>
   </button>
@@ -451,7 +451,7 @@ cssPrefix: pf-v5-c-menu-toggle
   >
     <span class="pf-v5-c-menu-toggle__controls">
       <span class="pf-v5-c-menu-toggle__toggle-icon">
-        <i class="fas fa-caret-down" aria-hidden="true"></i>
+        <i class="fas fa-angle-down" aria-hidden="true"></i>
       </span>
     </span>
   </button>
@@ -487,7 +487,7 @@ cssPrefix: pf-v5-c-menu-toggle
   >
     <span class="pf-v5-c-menu-toggle__controls">
       <span class="pf-v5-c-menu-toggle__toggle-icon">
-        <i class="fas fa-caret-down" aria-hidden="true"></i>
+        <i class="fas fa-angle-down" aria-hidden="true"></i>
       </span>
     </span>
   </button>
@@ -516,7 +516,7 @@ cssPrefix: pf-v5-c-menu-toggle
   >
     <span class="pf-v5-c-menu-toggle__controls">
       <span class="pf-v5-c-menu-toggle__toggle-icon">
-        <i class="fas fa-caret-down" aria-hidden="true"></i>
+        <i class="fas fa-angle-down" aria-hidden="true"></i>
       </span>
     </span>
   </button>
@@ -545,7 +545,7 @@ cssPrefix: pf-v5-c-menu-toggle
   >
     <span class="pf-v5-c-menu-toggle__controls">
       <span class="pf-v5-c-menu-toggle__toggle-icon">
-        <i class="fas fa-caret-down" aria-hidden="true"></i>
+        <i class="fas fa-angle-down" aria-hidden="true"></i>
       </span>
     </span>
   </button>
@@ -581,7 +581,7 @@ cssPrefix: pf-v5-c-menu-toggle
   >
     <span class="pf-v5-c-menu-toggle__controls">
       <span class="pf-v5-c-menu-toggle__toggle-icon">
-        <i class="fas fa-caret-down" aria-hidden="true"></i>
+        <i class="fas fa-angle-down" aria-hidden="true"></i>
       </span>
     </span>
   </button>
@@ -610,7 +610,7 @@ cssPrefix: pf-v5-c-menu-toggle
   >
     <span class="pf-v5-c-menu-toggle__controls">
       <span class="pf-v5-c-menu-toggle__toggle-icon">
-        <i class="fas fa-caret-down" aria-hidden="true"></i>
+        <i class="fas fa-angle-down" aria-hidden="true"></i>
       </span>
     </span>
   </button>
@@ -639,7 +639,7 @@ cssPrefix: pf-v5-c-menu-toggle
   >
     <span class="pf-v5-c-menu-toggle__controls">
       <span class="pf-v5-c-menu-toggle__toggle-icon">
-        <i class="fas fa-caret-down" aria-hidden="true"></i>
+        <i class="fas fa-angle-down" aria-hidden="true"></i>
       </span>
     </span>
   </button>
@@ -662,7 +662,7 @@ cssPrefix: pf-v5-c-menu-toggle
   >
     <span class="pf-v5-c-menu-toggle__controls">
       <span class="pf-v5-c-menu-toggle__toggle-icon">
-        <i class="fas fa-caret-down" aria-hidden="true"></i>
+        <i class="fas fa-angle-down" aria-hidden="true"></i>
       </span>
     </span>
   </button>
@@ -679,7 +679,7 @@ cssPrefix: pf-v5-c-menu-toggle
   >
     <span class="pf-v5-c-menu-toggle__controls">
       <span class="pf-v5-c-menu-toggle__toggle-icon">
-        <i class="fas fa-caret-down" aria-hidden="true"></i>
+        <i class="fas fa-angle-down" aria-hidden="true"></i>
       </span>
     </span>
   </button>
@@ -696,7 +696,7 @@ cssPrefix: pf-v5-c-menu-toggle
   >
     <span class="pf-v5-c-menu-toggle__controls">
       <span class="pf-v5-c-menu-toggle__toggle-icon">
-        <i class="fas fa-caret-down" aria-hidden="true"></i>
+        <i class="fas fa-angle-down" aria-hidden="true"></i>
       </span>
     </span>
   </button>
@@ -721,7 +721,7 @@ cssPrefix: pf-v5-c-menu-toggle
   >
     <span class="pf-v5-c-menu-toggle__controls">
       <span class="pf-v5-c-menu-toggle__toggle-icon">
-        <i class="fas fa-caret-down" aria-hidden="true"></i>
+        <i class="fas fa-angle-down" aria-hidden="true"></i>
       </span>
     </span>
   </button>
@@ -738,7 +738,7 @@ cssPrefix: pf-v5-c-menu-toggle
   >
     <span class="pf-v5-c-menu-toggle__controls">
       <span class="pf-v5-c-menu-toggle__toggle-icon">
-        <i class="fas fa-caret-down" aria-hidden="true"></i>
+        <i class="fas fa-angle-down" aria-hidden="true"></i>
       </span>
     </span>
   </button>
@@ -757,7 +757,7 @@ cssPrefix: pf-v5-c-menu-toggle
   >
     <span class="pf-v5-c-menu-toggle__controls">
       <span class="pf-v5-c-menu-toggle__toggle-icon">
-        <i class="fas fa-caret-down" aria-hidden="true"></i>
+        <i class="fas fa-angle-down" aria-hidden="true"></i>
       </span>
     </span>
   </button>
@@ -782,7 +782,7 @@ cssPrefix: pf-v5-c-menu-toggle
   >
     <span class="pf-v5-c-menu-toggle__controls">
       <span class="pf-v5-c-menu-toggle__toggle-icon">
-        <i class="fas fa-caret-down" aria-hidden="true"></i>
+        <i class="fas fa-angle-down" aria-hidden="true"></i>
       </span>
     </span>
   </button>
@@ -799,7 +799,7 @@ cssPrefix: pf-v5-c-menu-toggle
   >
     <span class="pf-v5-c-menu-toggle__controls">
       <span class="pf-v5-c-menu-toggle__toggle-icon">
-        <i class="fas fa-caret-down" aria-hidden="true"></i>
+        <i class="fas fa-angle-down" aria-hidden="true"></i>
       </span>
     </span>
   </button>
@@ -818,7 +818,7 @@ cssPrefix: pf-v5-c-menu-toggle
   >
     <span class="pf-v5-c-menu-toggle__controls">
       <span class="pf-v5-c-menu-toggle__toggle-icon">
-        <i class="fas fa-caret-down" aria-hidden="true"></i>
+        <i class="fas fa-angle-down" aria-hidden="true"></i>
       </span>
     </span>
   </button>
@@ -840,7 +840,7 @@ cssPrefix: pf-v5-c-menu-toggle
   <span class="pf-v5-c-menu-toggle__text">Icon</span>
   <span class="pf-v5-c-menu-toggle__controls">
     <span class="pf-v5-c-menu-toggle__toggle-icon">
-      <i class="fas fa-caret-down" aria-hidden="true"></i>
+      <i class="fas fa-angle-down" aria-hidden="true"></i>
     </span>
   </span>
 </button>
@@ -858,7 +858,7 @@ cssPrefix: pf-v5-c-menu-toggle
   <span class="pf-v5-c-menu-toggle__text">Icon</span>
   <span class="pf-v5-c-menu-toggle__controls">
     <span class="pf-v5-c-menu-toggle__toggle-icon">
-      <i class="fas fa-caret-down" aria-hidden="true"></i>
+      <i class="fas fa-angle-down" aria-hidden="true"></i>
     </span>
   </span>
 </button>
@@ -879,7 +879,7 @@ cssPrefix: pf-v5-c-menu-toggle
   <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-caret-down" aria-hidden="true"></i>
+      <i class="fas fa-angle-down" aria-hidden="true"></i>
     </span>
   </span>
 </button>
@@ -900,7 +900,7 @@ cssPrefix: pf-v5-c-menu-toggle
   <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-caret-down" aria-hidden="true"></i>
+      <i class="fas fa-angle-down" aria-hidden="true"></i>
     </span>
   </span>
 </button>
@@ -922,7 +922,7 @@ cssPrefix: pf-v5-c-menu-toggle
   <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-caret-down" aria-hidden="true"></i>
+      <i class="fas fa-angle-down" aria-hidden="true"></i>
     </span>
   </span>
 </button>
@@ -940,7 +940,7 @@ cssPrefix: pf-v5-c-menu-toggle
   <span class="pf-v5-c-menu-toggle__text">Full height</span>
   <span class="pf-v5-c-menu-toggle__controls">
     <span class="pf-v5-c-menu-toggle__toggle-icon">
-      <i class="fas fa-caret-down" aria-hidden="true"></i>
+      <i class="fas fa-angle-down" aria-hidden="true"></i>
     </span>
   </span>
 </button>
@@ -981,7 +981,7 @@ cssPrefix: pf-v5-c-menu-toggle
   >
     <span class="pf-v5-c-menu-toggle__controls">
       <span class="pf-v5-c-menu-toggle__toggle-icon">
-        <i class="fas fa-caret-down" aria-hidden="true"></i>
+        <i class="fas fa-angle-down" aria-hidden="true"></i>
       </span>
     </span>
   </button>

package/docs/components/Nav/examples/Navigation.css

@@ -1,4 +1,5 @@
-.ws-core-c-navigation:not([id*="tertiary"]):not([id*="light-mode"]) .pf-v5-c-nav{
+.ws-core-c-navigation:not([id*="tertiary"]):not([id*="light-mode"]) .pf-v5-c-nav {
+  padding: 0;
   background-color: var(--pf-v5-global--BackgroundColor--dark-300);
 }
 

package/docs/components/NotificationBadge/examples/NotificationBadge.md

@@ -2,14 +2,12 @@
 id: Notification badge
 section: components
 cssPrefix: pf-v5-c-notification-badge
----import './NotificationBadge.css'
-
-## Examples
+---## Examples
 
 ### Basic
 
 ```html
-<div class="pf-v5-t-dark">
+<div>
   <button
     class="pf-v5-c-button pf-m-plain"
     type="button"
@@ -69,7 +67,7 @@ cssPrefix: pf-v5-c-notification-badge
 ### With count
 
 ```html
-<div class="pf-v5-t-dark">
+<div>
   <button
     class="pf-v5-c-button pf-m-plain"
     type="button"
@@ -135,7 +133,7 @@ cssPrefix: pf-v5-c-notification-badge
 ### Expanded
 
 ```html
-<div class="pf-v5-t-dark">
+<div>
   <button
     class="pf-v5-c-button pf-m-plain"
     type="button"
@@ -206,7 +204,7 @@ cssPrefix: pf-v5-c-notification-badge
 
 ### Overview
 
-Always add a modifier class to indicate read, unread, or attention state. Never use the class `.pf-v5-c-notification-badge` on its own. This component is designed to be used within a dark component such as the [masthead](/components/masthead).
+Always add a modifier class to indicate read, unread, or attention state. Never use the class `.pf-v5-c-notification-badge` on its own.
 
 ### Accessibility
 

package/docs/components/Toolbar/examples/Toolbar.md

@@ -4593,18 +4593,16 @@ As the toolbar component is a hybrid layout and component, some of its elements
 | `.pf-m-full-height` | `.pf-v5-c-toolbar`, `.pf-v5-c-toolbar__content-section`, `.pf-v5-c-toolbar__group` | Modifies toolbar component to full height of its container and removes vertical padding. |
 | `.pf-m-static` | `.pf-v5-c-toolbar` | Modifies expandable content section to position itself to the nearest absolutely positioned parent outside of the toolbar component. This is used primarily for masthead toolbar. |
 | `.pf-m-expanded` | `.pf-v5-c-toolbar__expandable-content` | Modifies expandable content section for the expanded state. |
-| `.pf-m-label` | `.pf-v5-c-toolbar__item` | Modifies label vertical positioning. |
-| `.pf-m-form-element` | `.pf-v5-c-toolbar__item` | Modifies form element vertical positioning. |
-| `.pf-m-bulk-select` | `.pf-v5-c-toolbar__item` | Modifies bulk select spacing. |
-| `.pf-m-overflow-menu` | `.pf-v5-c-toolbar__item` | Modifies overflow menu spacing. |
-| `.pf-m-pagination` | `.pf-v5-c-toolbar__item` | Modifies pagination spacing and margin. |
-| `.pf-m-search-filter` | `.pf-v5-c-toolbar__item` | Modifies search filter spacing. |
-| `.pf-m-chip-group` | `.pf-v5-c-toolbar__item` | Modifies chip group spacing. |
-| `.pf-m-expand-all` | `.pf-v5-c-toolbar__item` | Modifies an item for an expand all button. |
+| `.pf-m-bulk-select` | `.pf-v5-c-toolbar__item` | Initiates bulk select spacing. |
+| `.pf-m-overflow-menu` | `.pf-v5-c-toolbar__item` | Initiates overflow menu spacing. |
+| `.pf-m-pagination` | `.pf-v5-c-toolbar__item` | Initiates pagination spacing and margin. |
+| `.pf-m-search-filter` | `.pf-v5-c-toolbar__item` | Initiates search filter spacing. |
+| `.pf-m-chip-group` | `.pf-v5-c-toolbar__item` | Initiates chip group spacing. |
+| `.pf-m-expand-all` | `.pf-v5-c-toolbar__item` | Initiates an item for an expand all button. |
 | `.pf-m-expanded` | `.pf-v5-c-toolbar__item.pf-m-expand-all` | Modifies an expand all button for the expanded state. |
-| `.pf-m-button-group` | `.pf-v5-c-toolbar__group` | Modifies button group spacing. |
-| `.pf-m-icon-button-group` | `.pf-v5-c-toolbar__group` | Modifies icon button group spacing. |
-| `.pf-m-filter-group` | `.pf-v5-c-toolbar__group` | Modifies filter group spacing. |
+| `.pf-m-button-group` | `.pf-v5-c-toolbar__group` | Initiates button group spacing. |
+| `.pf-m-icon-button-group` | `.pf-v5-c-toolbar__group` | Initiates icon button group spacing. |
+| `.pf-m-filter-group` | `.pf-v5-c-toolbar__group` | Initiates filter group spacing. |
 | `.pf-m-hidden{-on-[breakpoint]}` | `.pf-v5-c-toolbar__content`, `.pf-v5-c-toolbar__content-section`, `.pf-v5-c-toolbar__item`, `.pf-v5-c-toolbar__group` | Modifies toolbar element to be hidden, at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
 | `.pf-m-visible{-on-[breakpoint]}` | `.pf-v5-c-toolbar__content`, `.pf-v5-c-toolbar__content-section`, `.pf-v5-c-toolbar__item`, `.pf-v5-c-toolbar__group` | Modifies toolbar element to be shown, at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
 | `.pf-m-align-right{-on-[breakpoint]}` | `.pf-v5-c-toolbar > *` | Modifies toolbar element to align right, at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |