@patternfly/patternfly 6.5.0-prerelease.80 → 6.5.0-prerelease.82

package/components/Banner/banner.css

@@ -50,6 +50,7 @@
   --pf-v6-c-banner--m-blue--Color: var(--pf-t--global--text--color--nonstatus--on-blue--default);
   --pf-v6-c-banner--m-purple--BackgroundColor: var(--pf-t--global--color--nonstatus--purple--default);
   --pf-v6-c-banner--m-purple--Color: var(--pf-t--global--text--color--nonstatus--on-purple--default);
+  --pf-v6-c-banner--m-pill--BorderRadius: var(--pf-t--global--border--radius--pill);
 }
 
 .pf-v6-c-banner {
@@ -123,6 +124,9 @@
   z-index: var(--pf-v6-c-banner--m-sticky--ZIndex);
   box-shadow: var(--pf-v6-c-banner--m-sticky--BoxShadow);
 }
+.pf-v6-c-banner.pf-m-pill {
+  border-radius: var(--pf-v6-c-banner--m-pill--BorderRadius);
+}
 .pf-v6-c-banner a {
   color: var(--pf-v6-c-banner--link--Color);
   text-decoration-line: var(--pf-v6-c-banner--link--TextDecoration);

package/components/Banner/banner.scss

@@ -57,6 +57,9 @@
   --#{$banner}--m-blue--Color: var(--pf-t--global--text--color--nonstatus--on-blue--default);
   --#{$banner}--m-purple--BackgroundColor: var(--pf-t--global--color--nonstatus--purple--default);
   --#{$banner}--m-purple--Color: var(--pf-t--global--text--color--nonstatus--on-purple--default);
+  
+  // pill
+  --#{$banner}--m-pill--BorderRadius: var(--pf-t--global--border--radius--pill);
 }
 
 .#{$banner} {
@@ -144,6 +147,10 @@
     box-shadow: var(--#{$banner}--m-sticky--BoxShadow);
   }
 
+  &.pf-m-pill {
+    border-radius: var(--#{$banner}--m-pill--BorderRadius);
+  }
+
   a {
     color: var(--#{$banner}--link--Color);
     text-decoration-line: var(--#{$banner}--link--TextDecoration);

package/components/Card/card.scss

@@ -140,15 +140,13 @@
     border-radius: inherit;
   }
 
-  :where(.pf-v6-theme-glass) & {
-    &.pf-m-glass {
-      --#{$card}--BackgroundColor: var(--#{$card}--m-glass--BackgroundColor);
-      --#{$card}--BorderColor: var(--#{$card}--m-glass--BorderColor);
-      --#{$card}--BorderWidth: var(--#{$card}--m-glass--BorderWidth);
-      
-      backdrop-filter: var(--#{$card}--m-glass--BackdropFilter);
-      box-shadow: var(--#{$card}--m-glass--BoxShadow);
-    }
+  :where(.pf-v6-theme-glass) &.pf-m-glass {
+    --#{$card}--BackgroundColor: var(--#{$card}--m-glass--BackgroundColor);
+    --#{$card}--BorderColor: var(--#{$card}--m-glass--BorderColor);
+    --#{$card}--BorderWidth: var(--#{$card}--m-glass--BorderWidth);
+    
+    backdrop-filter: var(--#{$card}--m-glass--BackdropFilter);
+    box-shadow: var(--#{$card}--m-glass--BoxShadow);
   }
 
   // SELECTABLE CARDS

package/components/Hero/hero.css

@@ -1,8 +1,8 @@
 .pf-v6-c-hero {
-  --pf-v6-c-hero--PaddingBlockStart: var(--pf-t--global--spacer--xl);
-  --pf-v6-c-hero--PaddingBlockEnd: var(--pf-t--global--spacer--xl);
+  --pf-v6-c-hero--PaddingBlockStart: var(--pf-t--global--spacer--3xl);
+  --pf-v6-c-hero--PaddingBlockEnd: var(--pf-t--global--spacer--3xl);
   --pf-v6-c-hero--PaddingInlineStart: var(--pf-t--global--spacer--3xl);
-  --pf-v6-c-hero--PaddingInlineEnd: var(--pf-t--global--spacer--xl);
+  --pf-v6-c-hero--PaddingInlineEnd: var(--pf-t--global--spacer--3xl);
   --pf-v6-c-hero--gradient--angle: 109deg;
   --pf-v6-c-hero--gradient--stop-1--light: transparent;
   --pf-v6-c-hero--gradient--stop-2--light: transparent;
@@ -10,8 +10,7 @@
   --pf-v6-c-hero--gradient--stop-1--dark: transparent;
   --pf-v6-c-hero--gradient--stop-2--dark: transparent;
   --pf-v6-c-hero--gradient--stop-3--dark: transparent;
-  --pf-v6-c-hero--BackgroundColor: var(--pf-t--global--background--color--glass--primary--default);
-  --pf-v6-c-hero--BackdropFilter: var(--pf-t--global--background--filter--glass--blur--primary);
+  --pf-v6-c-hero--BackgroundColor: var(--pf-t--global--background--color--tertiary--default);
   --pf-v6-c-hero--BackgroundImage--light: none;
   --pf-v6-c-hero--BackgroundImage--dark: none;
   --pf-v6-c-hero--BackgroundRepeat: no-repeat;
@@ -23,14 +22,16 @@
   --pf-v6-c-hero--BorderInlineStartWidth: var(--pf-t--global--border--width--regular);
   --pf-v6-c-hero--BorderInlineEndWidth: var(--pf-t--global--border--width--regular);
   --pf-v6-c-hero--BorderColor: var(--pf-t--global--border--color--default);
-  --pf-v6-c-hero--m-glass--BorderColor: var(--pf-t--global--border--color--alt);
-  --pf-v6-c-hero--m-glass--BoxShadow: var(--pf-t--global--box-shadow--md);
-  --pf-v6-c-hero--BorderStartStartRadius: 24px;
-  --pf-v6-c-hero--BorderStartEndRadius: 72px;
-  --pf-v6-c-hero--BorderEndEndRadius: 24px;
-  --pf-v6-c-hero--BorderEndStartRadius: 72px;
+  --pf-v6-c-hero--BorderStartStartRadius: var(--pf-t--global--border--radius--medium);
+  --pf-v6-c-hero--BorderStartEndRadius: 48px;
+  --pf-v6-c-hero--BorderEndEndRadius: var(--pf-t--global--border--radius--medium);
+  --pf-v6-c-hero--BorderEndStartRadius: 48px;
   --pf-v6-c-hero__body--Width: 800px;
   --pf-v6-c-hero__body--MaxWidth: 80%;
+  --pf-v6-c-hero--m-glass--BackgroundColor: var(--pf-t--global--background--color--glass--primary--default);
+  --pf-v6-c-hero--m-glass--BackdropFilter: var(--pf-t--global--background--filter--glass--blur--primary);
+  --pf-v6-c-hero--m-glass--BorderColor: var(--pf-t--global--border--color--glass--default);
+  --pf-v6-c-hero--m-glass--BoxShadow: var(--pf-t--global--box-shadow--glass--default);
 }
 
 .pf-v6-c-hero {
@@ -39,6 +40,7 @@
   padding-block-end: var(--pf-v6-c-hero--PaddingBlockEnd);
   padding-inline-start: var(--pf-v6-c-hero--PaddingInlineStart);
   padding-inline-end: var(--pf-v6-c-hero--PaddingInlineEnd);
+  background-color: var(--pf-v6-c-hero--BackgroundColor);
   background-image: var(--pf-v6-c-hero--BackgroundImage, var(--pf-v6-c-hero--BackgroundImage--light)), linear-gradient(var(--pf-v6-c-hero--gradient--angle), var(--pf-v6-c-hero--gradient--stop-1, var(--pf-v6-c-hero--gradient--stop-1--light)) 0%, var(--pf-v6-c-hero--gradient--stop-2, var(--pf-v6-c-hero--gradient--stop-2--light)) 50%, var(--pf-v6-c-hero--gradient--stop-3, var(--pf-v6-c-hero--gradient--stop-3--light)) 100%);
   background-repeat: var(--pf-v6-c-hero--BackgroundRepeat);
   background-position: var(--pf-v6-c-hero--BackgroundPosition);
@@ -54,20 +56,18 @@
   border-end-start-radius: var(--pf-v6-c-hero--BorderEndStartRadius);
   border-end-end-radius: var(--pf-v6-c-hero--BorderEndEndRadius);
 }
+:where(.pf-v6-theme-glass) .pf-v6-c-hero.pf-m-glass {
+  --pf-v6-c-hero--BorderColor: var(--pf-v6-c-hero--m-glass--BorderColor);
+  --pf-v6-c-hero--BackgroundColor: var(--pf-v6-c-hero--m-glass--BackgroundColor);
+  backdrop-filter: var(--pf-v6-c-hero--m-glass--BackdropFilter);
+  box-shadow: var(--pf-v6-c-hero--m-glass--BoxShadow);
+}
 :root:where(.pf-v6-theme-dark) .pf-v6-c-hero {
   --pf-v6-c-hero--BackgroundImage: var(--pf-v6-c-hero--BackgroundImage--dark);
   --pf-v6-c-hero--gradient--stop-1: var(--pf-v6-c-hero--gradient--stop-1--dark);
   --pf-v6-c-hero--gradient--stop-2: var(--pf-v6-c-hero--gradient--stop-2--dark);
   --pf-v6-c-hero--gradient--stop-3: var(--pf-v6-c-hero--gradient--stop-3--dark);
 }
-:root:where(.pf-v6-theme-glass) .pf-v6-c-hero {
-  --pf-v6-c-hero--BorderColor: var(--pf-v6-c-hero--m-glass--BorderColor);
-  box-shadow: var(--pf-v6-c-hero--m-glass--BoxShadow);
-}
-.pf-v6-c-hero:not(.pf-m-no-glass) {
-  background-color: var(--pf-v6-c-hero--BackgroundColor);
-  backdrop-filter: var(--pf-v6-c-hero--BackdropFilter);
-}
 
 .pf-v6-c-hero__body {
   width: min(var(--pf-v6-c-hero__body--Width), var(--pf-v6-c-hero__body--MaxWidth));

package/components/Hero/hero.scss

@@ -1,10 +1,10 @@
 @use '../../sass-utilities' as *;
 
 @include pf-root($hero) {
-  --#{$hero}--PaddingBlockStart: var(--pf-t--global--spacer--xl);
-  --#{$hero}--PaddingBlockEnd: var(--pf-t--global--spacer--xl);
+  --#{$hero}--PaddingBlockStart: var(--pf-t--global--spacer--3xl);
+  --#{$hero}--PaddingBlockEnd: var(--pf-t--global--spacer--3xl);
   --#{$hero}--PaddingInlineStart: var(--pf-t--global--spacer--3xl);
-  --#{$hero}--PaddingInlineEnd: var(--pf-t--global--spacer--xl);
+  --#{$hero}--PaddingInlineEnd: var(--pf-t--global--spacer--3xl);
   --#{$hero}--gradient--angle: 109deg;
   --#{$hero}--gradient--stop-1--light: transparent;
   --#{$hero}--gradient--stop-2--light: transparent;
@@ -12,8 +12,7 @@
   --#{$hero}--gradient--stop-1--dark: transparent;
   --#{$hero}--gradient--stop-2--dark: transparent;
   --#{$hero}--gradient--stop-3--dark: transparent;
-  --#{$hero}--BackgroundColor: var(--pf-t--global--background--color--glass--primary--default);
-  --#{$hero}--BackdropFilter: var(--pf-t--global--background--filter--glass--blur--primary);
+  --#{$hero}--BackgroundColor: var(--pf-t--global--background--color--tertiary--default);
   --#{$hero}--BackgroundImage--light: none;
   --#{$hero}--BackgroundImage--dark: none;
   --#{$hero}--BackgroundRepeat: no-repeat;
@@ -25,14 +24,18 @@
   --#{$hero}--BorderInlineStartWidth: var(--pf-t--global--border--width--regular);
   --#{$hero}--BorderInlineEndWidth: var(--pf-t--global--border--width--regular);
   --#{$hero}--BorderColor: var(--pf-t--global--border--color--default);
-  --#{$hero}--m-glass--BorderColor: var(--pf-t--global--border--color--alt);
-  --#{$hero}--m-glass--BoxShadow: var(--pf-t--global--box-shadow--md);
-  --#{$hero}--BorderStartStartRadius: 24px;
-  --#{$hero}--BorderStartEndRadius: 72px;
-  --#{$hero}--BorderEndEndRadius: 24px;
-  --#{$hero}--BorderEndStartRadius: 72px;
+  --#{$hero}--BorderStartStartRadius: var(--pf-t--global--border--radius--medium);
+  --#{$hero}--BorderStartEndRadius: 48px;
+  --#{$hero}--BorderEndEndRadius: var(--pf-t--global--border--radius--medium);
+  --#{$hero}--BorderEndStartRadius: 48px;
   --#{$hero}__body--Width: 800px;
   --#{$hero}__body--MaxWidth: 80%;
+
+  // Glass styles
+  --#{$hero}--m-glass--BackgroundColor: var(--pf-t--global--background--color--glass--primary--default);
+  --#{$hero}--m-glass--BackdropFilter: var(--pf-t--global--background--filter--glass--blur--primary);
+  --#{$hero}--m-glass--BorderColor: var(--pf-t--global--border--color--glass--default);
+  --#{$hero}--m-glass--BoxShadow: var(--pf-t--global--box-shadow--glass--default);
 }
 
 .#{$hero} {
@@ -41,13 +44,14 @@
   padding-block-end: var(--#{$hero}--PaddingBlockEnd);
   padding-inline-start: var(--#{$hero}--PaddingInlineStart);
   padding-inline-end: var(--#{$hero}--PaddingInlineEnd);
+  background-color: var(--#{$hero}--BackgroundColor);
   background-image: var(--#{$hero}--BackgroundImage, var(--#{$hero}--BackgroundImage--light)),
-    linear-gradient(
-      var(--#{$hero}--gradient--angle),
-      var(--#{$hero}--gradient--stop-1, var(--#{$hero}--gradient--stop-1--light)) 0%,
-      var(--#{$hero}--gradient--stop-2, var(--#{$hero}--gradient--stop-2--light)) 50%,
-      var(--#{$hero}--gradient--stop-3, var(--#{$hero}--gradient--stop-3--light)) 100%
-    );
+  linear-gradient(
+    var(--#{$hero}--gradient--angle),
+    var(--#{$hero}--gradient--stop-1, var(--#{$hero}--gradient--stop-1--light)) 0%,
+    var(--#{$hero}--gradient--stop-2, var(--#{$hero}--gradient--stop-2--light)) 50%,
+    var(--#{$hero}--gradient--stop-3, var(--#{$hero}--gradient--stop-3--light)) 100%
+  );
   background-repeat: var(--#{$hero}--BackgroundRepeat);
   background-position: var(--#{$hero}--BackgroundPosition);
   background-size: var(--#{$hero}--BackgroundSize);
@@ -62,23 +66,20 @@
   border-end-start-radius: var(--#{$hero}--BorderEndStartRadius);
   border-end-end-radius: var(--#{$hero}--BorderEndEndRadius);
 
+  :where(.#{$pf-prefix}theme-glass) &.pf-m-glass {
+    --#{$hero}--BorderColor: var(--#{$hero}--m-glass--BorderColor);
+    --#{$hero}--BackgroundColor: var(--#{$hero}--m-glass--BackgroundColor);
+
+    backdrop-filter: var(--#{$hero}--m-glass--BackdropFilter);
+    box-shadow: var(--#{$hero}--m-glass--BoxShadow);
+  }
+
   :root:where(.#{$pf-prefix}theme-dark) & {
     --#{$hero}--BackgroundImage: var(--#{$hero}--BackgroundImage--dark);
     --#{$hero}--gradient--stop-1: var(--#{$hero}--gradient--stop-1--dark);
     --#{$hero}--gradient--stop-2: var(--#{$hero}--gradient--stop-2--dark);
     --#{$hero}--gradient--stop-3: var(--#{$hero}--gradient--stop-3--dark);
-  }
-
-  :root:where(.#{$pf-prefix}theme-glass) & {
-    --#{$hero}--BorderColor: var(--#{$hero}--m-glass--BorderColor);
-  
-    box-shadow: var(--#{$hero}--m-glass--BoxShadow);
-  }
-
-  &:not(.pf-m-no-glass) {
-    background-color: var(--#{$hero}--BackgroundColor);
-    backdrop-filter: var(--#{$hero}--BackdropFilter);
-  }
+  } 
 }
 
 .#{$hero}__body {

package/components/_index.css

@@ -1337,6 +1337,7 @@
   --pf-v6-c-banner--m-blue--Color: var(--pf-t--global--text--color--nonstatus--on-blue--default);
   --pf-v6-c-banner--m-purple--BackgroundColor: var(--pf-t--global--color--nonstatus--purple--default);
   --pf-v6-c-banner--m-purple--Color: var(--pf-t--global--text--color--nonstatus--on-purple--default);
+  --pf-v6-c-banner--m-pill--BorderRadius: var(--pf-t--global--border--radius--pill);
 }
 
 .pf-v6-c-banner {
@@ -1410,6 +1411,9 @@
   z-index: var(--pf-v6-c-banner--m-sticky--ZIndex);
   box-shadow: var(--pf-v6-c-banner--m-sticky--BoxShadow);
 }
+.pf-v6-c-banner.pf-m-pill {
+  border-radius: var(--pf-v6-c-banner--m-pill--BorderRadius);
+}
 .pf-v6-c-banner a {
   color: var(--pf-v6-c-banner--link--Color);
   text-decoration-line: var(--pf-v6-c-banner--link--TextDecoration);
@@ -8722,10 +8726,10 @@ ul) {
 }
 
 .pf-v6-c-hero {
-  --pf-v6-c-hero--PaddingBlockStart: var(--pf-t--global--spacer--xl);
-  --pf-v6-c-hero--PaddingBlockEnd: var(--pf-t--global--spacer--xl);
+  --pf-v6-c-hero--PaddingBlockStart: var(--pf-t--global--spacer--3xl);
+  --pf-v6-c-hero--PaddingBlockEnd: var(--pf-t--global--spacer--3xl);
   --pf-v6-c-hero--PaddingInlineStart: var(--pf-t--global--spacer--3xl);
-  --pf-v6-c-hero--PaddingInlineEnd: var(--pf-t--global--spacer--xl);
+  --pf-v6-c-hero--PaddingInlineEnd: var(--pf-t--global--spacer--3xl);
   --pf-v6-c-hero--gradient--angle: 109deg;
   --pf-v6-c-hero--gradient--stop-1--light: transparent;
   --pf-v6-c-hero--gradient--stop-2--light: transparent;
@@ -8733,8 +8737,7 @@ ul) {
   --pf-v6-c-hero--gradient--stop-1--dark: transparent;
   --pf-v6-c-hero--gradient--stop-2--dark: transparent;
   --pf-v6-c-hero--gradient--stop-3--dark: transparent;
-  --pf-v6-c-hero--BackgroundColor: var(--pf-t--global--background--color--glass--primary--default);
-  --pf-v6-c-hero--BackdropFilter: var(--pf-t--global--background--filter--glass--blur--primary);
+  --pf-v6-c-hero--BackgroundColor: var(--pf-t--global--background--color--tertiary--default);
   --pf-v6-c-hero--BackgroundImage--light: none;
   --pf-v6-c-hero--BackgroundImage--dark: none;
   --pf-v6-c-hero--BackgroundRepeat: no-repeat;
@@ -8746,14 +8749,16 @@ ul) {
   --pf-v6-c-hero--BorderInlineStartWidth: var(--pf-t--global--border--width--regular);
   --pf-v6-c-hero--BorderInlineEndWidth: var(--pf-t--global--border--width--regular);
   --pf-v6-c-hero--BorderColor: var(--pf-t--global--border--color--default);
-  --pf-v6-c-hero--m-glass--BorderColor: var(--pf-t--global--border--color--alt);
-  --pf-v6-c-hero--m-glass--BoxShadow: var(--pf-t--global--box-shadow--md);
-  --pf-v6-c-hero--BorderStartStartRadius: 24px;
-  --pf-v6-c-hero--BorderStartEndRadius: 72px;
-  --pf-v6-c-hero--BorderEndEndRadius: 24px;
-  --pf-v6-c-hero--BorderEndStartRadius: 72px;
+  --pf-v6-c-hero--BorderStartStartRadius: var(--pf-t--global--border--radius--medium);
+  --pf-v6-c-hero--BorderStartEndRadius: 48px;
+  --pf-v6-c-hero--BorderEndEndRadius: var(--pf-t--global--border--radius--medium);
+  --pf-v6-c-hero--BorderEndStartRadius: 48px;
   --pf-v6-c-hero__body--Width: 800px;
   --pf-v6-c-hero__body--MaxWidth: 80%;
+  --pf-v6-c-hero--m-glass--BackgroundColor: var(--pf-t--global--background--color--glass--primary--default);
+  --pf-v6-c-hero--m-glass--BackdropFilter: var(--pf-t--global--background--filter--glass--blur--primary);
+  --pf-v6-c-hero--m-glass--BorderColor: var(--pf-t--global--border--color--glass--default);
+  --pf-v6-c-hero--m-glass--BoxShadow: var(--pf-t--global--box-shadow--glass--default);
 }
 
 .pf-v6-c-hero {
@@ -8762,6 +8767,7 @@ ul) {
   padding-block-end: var(--pf-v6-c-hero--PaddingBlockEnd);
   padding-inline-start: var(--pf-v6-c-hero--PaddingInlineStart);
   padding-inline-end: var(--pf-v6-c-hero--PaddingInlineEnd);
+  background-color: var(--pf-v6-c-hero--BackgroundColor);
   background-image: var(--pf-v6-c-hero--BackgroundImage, var(--pf-v6-c-hero--BackgroundImage--light)), linear-gradient(var(--pf-v6-c-hero--gradient--angle), var(--pf-v6-c-hero--gradient--stop-1, var(--pf-v6-c-hero--gradient--stop-1--light)) 0%, var(--pf-v6-c-hero--gradient--stop-2, var(--pf-v6-c-hero--gradient--stop-2--light)) 50%, var(--pf-v6-c-hero--gradient--stop-3, var(--pf-v6-c-hero--gradient--stop-3--light)) 100%);
   background-repeat: var(--pf-v6-c-hero--BackgroundRepeat);
   background-position: var(--pf-v6-c-hero--BackgroundPosition);
@@ -8777,20 +8783,18 @@ ul) {
   border-end-start-radius: var(--pf-v6-c-hero--BorderEndStartRadius);
   border-end-end-radius: var(--pf-v6-c-hero--BorderEndEndRadius);
 }
+:where(.pf-v6-theme-glass) .pf-v6-c-hero.pf-m-glass {
+  --pf-v6-c-hero--BorderColor: var(--pf-v6-c-hero--m-glass--BorderColor);
+  --pf-v6-c-hero--BackgroundColor: var(--pf-v6-c-hero--m-glass--BackgroundColor);
+  backdrop-filter: var(--pf-v6-c-hero--m-glass--BackdropFilter);
+  box-shadow: var(--pf-v6-c-hero--m-glass--BoxShadow);
+}
 :root:where(.pf-v6-theme-dark) .pf-v6-c-hero {
   --pf-v6-c-hero--BackgroundImage: var(--pf-v6-c-hero--BackgroundImage--dark);
   --pf-v6-c-hero--gradient--stop-1: var(--pf-v6-c-hero--gradient--stop-1--dark);
   --pf-v6-c-hero--gradient--stop-2: var(--pf-v6-c-hero--gradient--stop-2--dark);
   --pf-v6-c-hero--gradient--stop-3: var(--pf-v6-c-hero--gradient--stop-3--dark);
 }
-:root:where(.pf-v6-theme-glass) .pf-v6-c-hero {
-  --pf-v6-c-hero--BorderColor: var(--pf-v6-c-hero--m-glass--BorderColor);
-  box-shadow: var(--pf-v6-c-hero--m-glass--BoxShadow);
-}
-.pf-v6-c-hero:not(.pf-m-no-glass) {
-  background-color: var(--pf-v6-c-hero--BackgroundColor);
-  backdrop-filter: var(--pf-v6-c-hero--BackdropFilter);
-}
 
 .pf-v6-c-hero__body {
   width: min(var(--pf-v6-c-hero__body--Width), var(--pf-v6-c-hero__body--MaxWidth));

package/docs/components/Banner/examples/Banner.md

@@ -227,6 +227,136 @@ When a banner is used to convey status, it is advised to add an icon that also c
 
 ```
 
+### Pill
+
+To display a banner with rounded corners, use `pf-m-pill`. The pill modifier can be combined with any Banner modifier.
+
+```html
+<div class="pf-v6-c-banner pf-m-pill pf-m-success">
+  <div class="pf-v6-l-flex pf-m-space-items-sm">
+    <div class="pf-v6-l-flex__item">
+      <span class="pf-v6-screen-reader">Success banner:</span>
+
+      <svg
+        class="pf-v6-svg"
+        viewBox="0 0 32 32"
+        fill="currentColor"
+        aria-hidden="true"
+        role="img"
+        width="1em"
+        height="1em"
+      >
+        <path
+          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"
+        />
+      </svg>
+    </div>
+    <div class="pf-v6-l-flex__item">Success banner</div>
+  </div>
+</div>
+
+<br />
+
+<div class="pf-v6-c-banner pf-m-pill pf-m-warning">
+  <div class="pf-v6-l-flex pf-m-space-items-sm">
+    <div class="pf-v6-l-flex__item">
+      <span class="pf-v6-screen-reader">Warning banner:</span>
+
+      <svg
+        class="pf-v6-svg"
+        viewBox="0 0 32 32"
+        fill="currentColor"
+        aria-hidden="true"
+        role="img"
+        width="1em"
+        height="1em"
+      >
+        <path
+          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"
+        />
+      </svg>
+    </div>
+    <div class="pf-v6-l-flex__item">Warning banner</div>
+  </div>
+</div>
+
+<br />
+
+<div class="pf-v6-c-banner pf-m-pill pf-m-danger">
+  <div class="pf-v6-l-flex pf-m-space-items-sm">
+    <div class="pf-v6-l-flex__item">
+      <span class="pf-v6-screen-reader">Danger banner:</span>
+
+      <svg
+        class="pf-v6-svg"
+        viewBox="0 0 32 32"
+        fill="currentColor"
+        aria-hidden="true"
+        role="img"
+        width="1em"
+        height="1em"
+      >
+        <path
+          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"
+        />
+      </svg>
+    </div>
+    <div class="pf-v6-l-flex__item">Danger banner</div>
+  </div>
+</div>
+
+<br />
+
+<div class="pf-v6-c-banner pf-m-pill pf-m-info">
+  <div class="pf-v6-l-flex pf-m-space-items-sm">
+    <div class="pf-v6-l-flex__item">
+      <span class="pf-v6-screen-reader">Custom status banner:</span>
+
+      <svg
+        class="pf-v6-svg"
+        viewBox="0 0 32 32"
+        fill="currentColor"
+        aria-hidden="true"
+        role="img"
+        width="1em"
+        height="1em"
+      >
+        <path
+          d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm1.5 22a1.5 1.5 0 1 1-3 0v-5.157l-.188.04a1.5 1.5 0 0 1-.625-2.934l1.956-.416c.112-.024.223-.032.333-.03l.024-.002a1.5 1.5 0 0 1 1.5 1.5v7Zm-.08-12.58c-.38.37-.89.58-1.42.58a1.998 1.998 0 0 1-1.851-2.76c.051-.13.11-.24.19-.35.07-.11.15-.21.25-.3.74-.75 2.08-.75 2.83 0 .09.09.17.19.24.3.08.11.14.22.189.35.05.12.09.24.11.37.03.13.04.26.04.39 0 .53-.21 1.04-.58 1.42Z"
+        />
+      </svg>
+    </div>
+    <div class="pf-v6-l-flex__item">Info banner</div>
+  </div>
+</div>
+
+<br />
+
+<div class="pf-v6-c-banner pf-m-pill pf-m-custom">
+  <div class="pf-v6-l-flex pf-m-space-items-sm">
+    <div class="pf-v6-l-flex__item">
+      <span class="pf-v6-screen-reader">Custom status banner:</span>
+
+      <svg
+        class="pf-v6-svg"
+        viewBox="0 0 32 32"
+        fill="currentColor"
+        aria-hidden="true"
+        role="img"
+        width="1em"
+        height="1em"
+      >
+        <path
+          d="M28.75 22v3.5c0 .689-.561 1.25-1.25 1.25h-7.521c.005.084.021.166.021.25 0 2.206-1.794 4-4 4s-4-1.794-4-4c0-.084.016-.166.021-.25H4.5c-.689 0-1.25-.561-1.25-1.25V22a.75.75 0 0 1 .75-.75c1.24 0 2.25-1.009 2.25-2.25v-4c0-4.826 3.528-8.833 8.138-9.605A2.482 2.482 0 0 1 13.5 3.5C13.5 2.122 14.621 1 16 1s2.5 1.122 2.5 2.5c0 .761-.349 1.436-.888 1.895 4.61.772 8.138 4.779 8.138 9.605v4c0 1.241 1.01 2.25 2.25 2.25a.75.75 0 0 1 .75.75Z"
+        />
+      </svg>
+    </div>
+    <div class="pf-v6-l-flex__item">Custom banner</div>
+  </div>
+</div>
+
+```
+
 ## Documentation
 
 ### Usage
@@ -248,3 +378,4 @@ When a banner is used to convey status, it is advised to add an icon that also c
 | `.pf-m-info` | `.pf-v6-c-banner` |  Modifies banner for info status styling. |
 | `.pf-m-custom` | `.pf-v6-c-banner` |  Modifies banner for custom status styling. |
 | `.pf-m-sticky` | `.pf-v6-c-banner` |  Modifies banner to be sticky to the top of its container. |
+| `.pf-m-pill` | `.pf-v6-c-banner` |  Modifies banner for pill styles. |

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

@@ -26,7 +26,7 @@ cssPrefix: pf-v6-c-card
   <div class="pf-v6-c-card__header">
     <div class="pf-v6-c-card__header-main">
       <svg height="70px" viewBox="0 0 679 158">
-        <title>PF-HorizontalLogo-Color</title>
+        <title>PatternFly</title>
         <defs>
           <linearGradient
             x1="68%"
@@ -257,7 +257,7 @@ cssPrefix: pf-v6-c-card
   <div class="pf-v6-c-card__header">
     <div class="pf-v6-c-card__header-main">
       <svg height="70px" viewBox="0 0 679 158">
-        <title>PF-HorizontalLogo-Color</title>
+        <title>PatternFly</title>
         <defs>
           <linearGradient
             x1="68%"
@@ -486,7 +486,7 @@ cssPrefix: pf-v6-c-card
   <div class="pf-v6-c-card__header">
     <div class="pf-v6-c-card__header-main">
       <svg height="70px" viewBox="0 0 679 158">
-        <title>PF-HorizontalLogo-Color</title>
+        <title>PatternFly</title>
         <defs>
           <linearGradient
             x1="68%"

package/docs/components/Compass/examples/Compass.css

@@ -1,8 +1,8 @@
-#ws-page-main .ws-core-a-compass .pf-v6-c-compass {
+#ws-page-main .ws-core-c-compass .pf-v6-c-compass {
   height: 600px;
 }
 
-#ws-core-a-compass-basic [class*="pf-v6-c-compass"],
-#ws-core-a-compass-docked [class*="pf-v6-c-compass"] {
+#ws-core-c-compass-basic [class*="pf-v6-c-compass"],
+#ws-core-c-compass-docked [class*="pf-v6-c-compass"] {
   outline: var(--pf-t--global--border--width--regular) dashed var(--pf-t--global--border--color--default);
 }

package/docs/components/Compass/examples/Compass.md

@@ -1,8 +1,7 @@
 ---
 id: 'Compass'
 beta: true
-section: AI
-subsection: Generative UIs
+section: components
 cssPrefix: pf-v6-c-compass
 ---import './Compass.css';
 

package/docs/components/Hero/examples/Hero.md

@@ -22,4 +22,4 @@ cssPrefix: pf-v6-c-hero
 | -- | -- | -- |
 | `.pf-v6-c-hero` | `<div>` | Initiates the hero. **Required** |
 | `.pf-v6-c-hero__body` | `<div>` | Initiates the hero body. |
-| `.pf-m-no-glass` | `.pf-v6-c-hero` | Modifies the hero to remove glass styling when using glass theme. |
+| `.pf-m-glass` | `.pf-v6-c-hero` | Applies glass styles when glass theme is enabled. |