@patternfly/patternfly 6.6.0-prerelease.1 → 6.6.0-prerelease.10

package/base/tokens/tokens-highcontrast.scss

@@ -1,12 +1,12 @@
 
 // Do not edit directly
-// Generated on Fri, 15 May 2026 17:53:36 GMT
+// Generated on Mon, 01 Jun 2026 21:26:11 GMT
 
 @mixin pf-v6-tokens {
-  --pf-t--global--background--color--500: rgba(21, 21, 21, 0.4000);
-  --pf-t--global--background--color--600: rgba(199, 199, 199, 0.2500);
-  --pf-t--global--background--color--700: rgba(199, 199, 199, 0.1000);
-  --pf-t--global--background--color--action--plain--default: rgba(255, 255, 255, 0.0000);
+  --pf-t--global--background--color--500: rgb(21, 21, 21, 0.4000);
+  --pf-t--global--background--color--600: rgb(199, 199, 199, 0.2500);
+  --pf-t--global--background--color--700: rgb(199, 199, 199, 0.1000);
+  --pf-t--global--background--color--action--plain--default: rgb(255, 255, 255, 0.0000);
   --pf-t--global--background--filter--glass--blur--primary: initial;
   --pf-t--global--border--radius--0: 0px;
   --pf-t--global--border--radius--100: 4px;
@@ -40,8 +40,8 @@
   --pf-t--global--box-shadow--blur--100: 6px;
   --pf-t--global--box-shadow--blur--200: 10px;
   --pf-t--global--box-shadow--blur--300: 20px;
-  --pf-t--global--box-shadow--color--100: rgba(41, 41, 41, 0.1500);
-  --pf-t--global--box-shadow--color--200: rgba(41, 41, 41, 0.2000);
+  --pf-t--global--box-shadow--color--100: rgb(41, 41, 41, 0.1500);
+  --pf-t--global--box-shadow--color--200: rgb(41, 41, 41, 0.2000);
   --pf-t--global--box-shadow--spread--100: 0px;
   --pf-t--global--box-shadow--spread--200: -4px;
   --pf-t--global--box-shadow--spread--300: -8px;

package/base/tokens/tokens-palette.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Fri, 15 May 2026 17:53:36 GMT
+// Generated on Mon, 01 Jun 2026 21:26:11 GMT
 
 @mixin pf-v6-tokens {
   --pf-t--color--black: #000000;

package/base/tokens/tokens-redhat-highcontrast.scss

@@ -3,10 +3,10 @@
 // Generated on Mon, 04 May 2026 19:53:21 GMT
 
 @mixin pf-v6-tokens {
-  --pf-t--global--background--color--500: rgba(21, 21, 21, 0.4000);
-  --pf-t--global--background--color--600: rgba(199, 199, 199, 0.2500);
-  --pf-t--global--background--color--700: rgba(199, 199, 199, 0.1000);
-  --pf-t--global--background--color--action--plain--default: rgba(255, 255, 255, 0.0000);
+  --pf-t--global--background--color--500: rgb(21, 21, 21, 0.4000);
+  --pf-t--global--background--color--600: rgb(199, 199, 199, 0.2500);
+  --pf-t--global--background--color--700: rgb(199, 199, 199, 0.1000);
+  --pf-t--global--background--color--action--plain--default: rgb(255, 255, 255, 0.0000);
   --pf-t--global--background--filter--glass--blur--primary: blur(0px);
   --pf-t--global--border--radius--0: 0px;
   --pf-t--global--border--radius--100: 4px;
@@ -40,8 +40,8 @@
   --pf-t--global--box-shadow--blur--100: 6px;
   --pf-t--global--box-shadow--blur--200: 10px;
   --pf-t--global--box-shadow--blur--300: 20px;
-  --pf-t--global--box-shadow--color--100: rgba(41, 41, 41, 0.1500);
-  --pf-t--global--box-shadow--color--200: rgba(41, 41, 41, 0.2000);
+  --pf-t--global--box-shadow--color--100: rgb(41, 41, 41, 0.1500);
+  --pf-t--global--box-shadow--color--200: rgb(41, 41, 41, 0.2000);
   --pf-t--global--box-shadow--spread--100: 0px;
   --pf-t--global--box-shadow--spread--200: -4px;
   --pf-t--global--box-shadow--spread--300: -8px;

package/components/AboutModalBox/about-modal-box.css

@@ -164,7 +164,7 @@
   overflow-x: hidden;
   overflow-y: auto;
   overscroll-behavior: contain;
-  word-break: break-word;
+  overflow-wrap: break-word;
   -webkit-overflow-scrolling: touch;
 }
 @media screen and (min-width: 36rem) {

package/components/AboutModalBox/about-modal-box.scss

@@ -176,7 +176,7 @@
   overflow-x: hidden;
   overflow-y: auto;
   overscroll-behavior: contain;
-  word-break: break-word;
+  overflow-wrap: break-word;
   -webkit-overflow-scrolling: touch;
 
   @media screen and (min-width: $pf-v6-global--breakpoint--sm) {

package/components/Accordion/accordion.css

@@ -222,8 +222,8 @@
 }
 
 .pf-v6-c-accordion__toggle-icon {
-  transition: var(--pf-v6-c-accordion__toggle-icon--Transition);
   transform: rotate(var(--pf-v6-c-accordion__toggle-icon--Rotate));
+  transition: var(--pf-v6-c-accordion__toggle-icon--Transition);
 }
 
 .pf-v6-c-accordion__expandable-content:where([hidden]) {
@@ -231,6 +231,7 @@
 }
 
 .pf-v6-c-accordion__expandable-content {
+  visibility: var(--pf-v6-c-accordion__expandable-content--Visibility);
   max-height: var(--pf-v6-c-accordion__expandable-content--MaxHeight);
   margin-block-end: var(--pf-v6-c-accordion__expandable-content--MarginBlockEnd);
   margin-inline-start: var(--pf-v6-c-accordion__expandable-content--MarginInlineStart);
@@ -238,16 +239,15 @@
   overflow-y: var(--pf-v6-c-accordion__expandable-content--Overflow);
   font-size: var(--pf-v6-c-accordion__expandable-content--FontSize);
   color: var(--pf-v6-c-accordion__expandable-content--Color);
-  visibility: var(--pf-v6-c-accordion__expandable-content--Visibility);
   background-color: var(--pf-v6-c-accordion__expandable-content--BackgroundColor);
   border: var(--pf-v6-c-accordion__expandable-content--BorderWidth) solid var(--pf-v6-c-accordion__expandable-content--BorderColor);
   border-radius: var(--pf-v6-c-accordion__expandable-content--BorderRadius);
   opacity: var(--pf-v6-c-accordion__expandable-content--Opacity);
+  translate: 0 var(--pf-v6-c-accordion__expandable-content--TranslateY);
   transition-delay: 0s, 0s, var(--pf-v6-c-accordion__expandable-content--TransitionDuration--fade), var(--pf-v6-c-accordion__expandable-content--TransitionDuration--fade), var(--pf-v6-c-accordion__expandable-content--TransitionDuration--fade);
   transition-timing-function: var(--pf-v6-c-accordion__expandable-content--TransitionTimingFunction);
   transition-duration: var(--pf-v6-c-accordion__expandable-content--TransitionDuration--fade), var(--pf-v6-c-accordion__expandable-content--TransitionDuration--slide), 0s, 0s, 0s;
   transition-property: opacity, translate, visibility, max-height, margin-block-end;
-  translate: 0 var(--pf-v6-c-accordion__expandable-content--TranslateY);
 }
 .pf-v6-c-accordion__expandable-content.pf-m-fixed {
   --pf-v6-c-accordion__expandable-content--Overflow: auto;

package/components/Accordion/accordion.scss

@@ -254,8 +254,8 @@
 .#{$accordion}__toggle-icon {
   @include pf-v6-mirror-inline-on-rtl;
 
-  transition: var(--#{$accordion}__toggle-icon--Transition); // TODO remove shorthand property in breaking change
   transform: rotate(var(--#{$accordion}__toggle-icon--Rotate));
+  transition: var(--#{$accordion}__toggle-icon--Transition); // TODO remove shorthand property in breaking change
 }
 
 .#{$accordion}__expandable-content:where([hidden]) {
@@ -263,6 +263,7 @@
 }
 
 .#{$accordion}__expandable-content {
+  visibility:  var(--#{$accordion}__expandable-content--Visibility);
   max-height:  var(--#{$accordion}__expandable-content--MaxHeight);
   margin-block-end: var(--#{$accordion}__expandable-content--MarginBlockEnd);
   margin-inline-start: var(--#{$accordion}__expandable-content--MarginInlineStart);
@@ -270,16 +271,15 @@
   overflow-y: var(--#{$accordion}__expandable-content--Overflow);
   font-size: var(--#{$accordion}__expandable-content--FontSize);
   color: var(--#{$accordion}__expandable-content--Color);
-  visibility:  var(--#{$accordion}__expandable-content--Visibility);
   background-color: var(--#{$accordion}__expandable-content--BackgroundColor);
   border: var(--#{$accordion}__expandable-content--BorderWidth) solid var(--#{$accordion}__expandable-content--BorderColor);
   border-radius: var(--#{$accordion}__expandable-content--BorderRadius);
   opacity: var(--#{$accordion}__expandable-content--Opacity);
+  translate: 0 var(--#{$accordion}__expandable-content--TranslateY);
   transition-delay: 0s, 0s, var(--#{$accordion}__expandable-content--TransitionDuration--fade), var(--#{$accordion}__expandable-content--TransitionDuration--fade), var(--#{$accordion}__expandable-content--TransitionDuration--fade);
   transition-timing-function: var(--#{$accordion}__expandable-content--TransitionTimingFunction);
   transition-duration: var(--#{$accordion}__expandable-content--TransitionDuration--fade), var(--#{$accordion}__expandable-content--TransitionDuration--slide), 0s, 0s, 0s;
   transition-property: opacity, translate, visibility, max-height, margin-block-end;
-  translate: 0 var(--#{$accordion}__expandable-content--TranslateY);
 
   &.pf-m-fixed {
     --#{$accordion}__expandable-content--Overflow: auto;

package/components/Alert/alert-group.css

@@ -127,8 +127,8 @@
   display: grid;
   grid-template-rows: 1fr;
   opacity: 1;
-  transition: opacity var(--pf-v6-c-alert-group--m-toast__item--Transition--opacity--default);
   transform: translateX(0) translateY(0);
+  transition: opacity var(--pf-v6-c-alert-group--m-toast__item--Transition--opacity--default);
 }
 @media screen and (prefers-reduced-motion: no-preference) {
   .pf-v6-c-alert-group__item {

package/components/Alert/alert-group.scss

@@ -164,13 +164,13 @@
   display: grid;
   grid-template-rows: 1fr;
   opacity: 1;
+  transform: translateX(0) translateY(0);
 
   // This transition will happen when the item is added (.pf-m-offstage-top is removed)
   // Reduced motion by default
   // transparency change only
   transition: 
     opacity var(--#{$alert-group}--m-toast__item--Transition--opacity--default);
-  transform: translateX(0) translateY(0);
 
   // This transition will happen when the item is added (.pf-m-offstage-top is removed)
   // give it height, then slide it down into place

package/components/Alert/alert.css

@@ -146,12 +146,13 @@
 
 .pf-v6-c-alert__toggle-icon {
   display: inline-block;
-  transition: transform var(--pf-v6-c-alert__toggle-icon--TransitionDuration) var(--pf-v6-c-alert__toggle-icon--TransitionTimingFunction);
   transform: rotate(var(--pf-v6-c-alert__toggle-icon--Rotate));
+  transition: transform var(--pf-v6-c-alert__toggle-icon--TransitionDuration) var(--pf-v6-c-alert__toggle-icon--TransitionTimingFunction);
 }
 
 .pf-v6-c-alert__icon {
   grid-area: icon;
+  align-self: baseline;
   margin-inline-end: var(--pf-v6-c-alert__icon--MarginInlineEnd);
   font-size: var(--pf-v6-c-alert__icon--FontSize);
   color: var(--pf-v6-c-alert__icon--Color);
@@ -162,7 +163,7 @@
   grid-area: title;
   font-weight: var(--pf-v6-c-alert__title--FontWeight);
   color: var(--pf-v6-c-alert__title--Color);
-  word-break: break-word;
+  overflow-wrap: break-word;
 }
 .pf-v6-c-alert__title.pf-m-truncate {
   display: -webkit-box;
@@ -174,7 +175,7 @@
 .pf-v6-c-alert__description {
   grid-area: description;
   padding-block-start: var(--pf-v6-c-alert__description--PaddingBlockStart);
-  word-break: break-word;
+  overflow-wrap: break-word;
 }
 .pf-v6-c-alert__description + .pf-v6-c-alert__action-group {
   --pf-v6-c-alert__action-group--PaddingBlockStart: var(--pf-v6-c-alert__description--action-group--PaddingBlockStart);

package/components/Alert/alert.scss

@@ -188,12 +188,13 @@
   @include pf-v6-mirror-inline-on-rtl;
 
   display: inline-block;
-  transition: transform var(--#{$alert}__toggle-icon--TransitionDuration) var(--#{$alert}__toggle-icon--TransitionTimingFunction);
   transform: rotate(var(--#{$alert}__toggle-icon--Rotate));
+  transition: transform var(--#{$alert}__toggle-icon--TransitionDuration) var(--#{$alert}__toggle-icon--TransitionTimingFunction);
 }
 
 .#{$alert}__icon {
   grid-area: icon;
+  align-self: baseline;
   margin-inline-end: var(--#{$alert}__icon--MarginInlineEnd);
   font-size: var(--#{$alert}__icon--FontSize);
   color: var(--#{$alert}__icon--Color);
@@ -204,7 +205,7 @@
   grid-area: title;
   font-weight: var(--#{$alert}__title--FontWeight);
   color: var(--#{$alert}__title--Color);
-  word-break: break-word;
+  overflow-wrap: break-word;
 
   &.pf-m-truncate {
     @include pf-v6-line-clamp("var(--#{$alert}__title--max-lines)");
@@ -214,7 +215,7 @@
 .#{$alert}__description {
   grid-area: description;
   padding-block-start: var(--#{$alert}__description--PaddingBlockStart);
-  word-break: break-word;
+  overflow-wrap: break-word;
 
   + .#{$alert}__action-group {
     --#{$alert}__action-group--PaddingBlockStart: var(--#{$alert}__description--action-group--PaddingBlockStart);

package/components/Avatar/avatar.css

@@ -4,24 +4,87 @@
   --pf-v6-c-avatar--BorderRadius: var(--pf-t--global--border--radius--pill);
   --pf-v6-c-avatar--Width: 2.25rem;
   --pf-v6-c-avatar--Height: 2.25rem;
+  --pf-v6-c-avatar--FontSize: calc(2.25rem / 1.414);
   --pf-v6-c-avatar--m-sm--Width: 1.5rem;
   --pf-v6-c-avatar--m-sm--Height: 1.5rem;
+  --pf-v6-c-avatar--m-sm--FontSize: calc(1.5rem / 1.414);
   --pf-v6-c-avatar--m-md--Width: 2.25rem;
   --pf-v6-c-avatar--m-md--Height: 2.25rem;
+  --pf-v6-c-avatar--m-md--FontSize: calc(2.25rem / 1.414);
   --pf-v6-c-avatar--m-lg--Width: 4.5rem;
   --pf-v6-c-avatar--m-lg--Height: 4.5rem;
+  --pf-v6-c-avatar--m-lg--FontSize: calc(4.5rem / 1.414);
   --pf-v6-c-avatar--m-xl--Width: 8rem;
   --pf-v6-c-avatar--m-xl--Height: 8rem;
+  --pf-v6-c-avatar--m-xl--FontSize: calc(8rem / 1.414);
   --pf-v6-c-avatar--m-bordered--BorderColor: var(--pf-t--global--border--color--default);
   --pf-v6-c-avatar--m-bordered--BorderWidth: var(--pf-t--global--border--width--box--default);
+  --pf-v6-c-avatar--m-colorful--BorderWidth: var(--pf-t--global--border--width--box--default);
+  --pf-v6-c-avatar--m-gray--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
+  --pf-v6-c-avatar--m-gray--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--hover);
+  --pf-v6-c-avatar--m-gray--BorderColor: var(--pf-t--global--border--color--default);
+  --pf-v6-c-avatar--m-red--BackgroundColor: var(--pf-t--global--color--nonstatus--red--default);
+  --pf-v6-c-avatar--m-red--Color: var(--pf-t--global--icon--color--nonstatus--on-red--default);
+  --pf-v6-c-avatar--m-red--BorderColor: var(--pf-t--global--border--color--nonstatus--red--default);
+  --pf-v6-c-avatar--m-orangered--BackgroundColor: var(--pf-t--global--color--nonstatus--orangered--default);
+  --pf-v6-c-avatar--m-orangered--Color: var(--pf-t--global--icon--color--nonstatus--on-orangered--default);
+  --pf-v6-c-avatar--m-orangered--BorderColor: var(--pf-t--global--border--color--nonstatus--orangered--default);
+  --pf-v6-c-avatar--m-orange--BackgroundColor: var(--pf-t--global--color--nonstatus--orange--default);
+  --pf-v6-c-avatar--m-orange--Color: var(--pf-t--global--icon--color--nonstatus--on-orange--default);
+  --pf-v6-c-avatar--m-orange--BorderColor: var(--pf-t--global--border--color--nonstatus--orange--default);
+  --pf-v6-c-avatar--m-yellow--BackgroundColor: var(--pf-t--global--color--nonstatus--yellow--default);
+  --pf-v6-c-avatar--m-yellow--Color: var(--pf-t--global--icon--color--nonstatus--on-yellow--default);
+  --pf-v6-c-avatar--m-yellow--BorderColor: var(--pf-t--global--border--color--nonstatus--yellow--default);
+  --pf-v6-c-avatar--m-green--BackgroundColor: var(--pf-t--global--color--nonstatus--green--default);
+  --pf-v6-c-avatar--m-green--Color: var(--pf-t--global--icon--color--nonstatus--on-green--default);
+  --pf-v6-c-avatar--m-green--BorderColor: var(--pf-t--global--border--color--nonstatus--green--default);
+  --pf-v6-c-avatar--m-teal--BackgroundColor: var(--pf-t--global--color--nonstatus--teal--default);
+  --pf-v6-c-avatar--m-teal--Color: var(--pf-t--global--icon--color--nonstatus--on-teal--default);
+  --pf-v6-c-avatar--m-teal--BorderColor: var(--pf-t--global--border--color--nonstatus--teal--default);
+  --pf-v6-c-avatar--m-blue--BackgroundColor: var(--pf-t--global--color--nonstatus--blue--default);
+  --pf-v6-c-avatar--m-blue--Color: var(--pf-t--global--icon--color--nonstatus--on-blue--default);
+  --pf-v6-c-avatar--m-blue--BorderColor: var(--pf-t--global--border--color--nonstatus--blue--default);
+  --pf-v6-c-avatar--m-purple--BackgroundColor: var(--pf-t--global--color--nonstatus--purple--default);
+  --pf-v6-c-avatar--m-purple--Color: var(--pf-t--global--icon--color--nonstatus--on-purple--default);
+  --pf-v6-c-avatar--m-purple--BorderColor: var(--pf-t--global--border--color--nonstatus--purple--default);
+  --pf-v6-c-avatar__initials--FontSize: var(--pf-t--global--font--size--body--lg);
+  --pf-v6-c-avatar__initials--FontWeight: var(--pf-t--global--font--weight--body--bold);
+  --pf-v6-c-avatar--m-sm__initials--FontSize: var(--pf-t--global--font--size--body--sm);
+  --pf-v6-c-avatar--m-sm__initials--FontWeight: var(--pf-t--global--font--weight--body--bold);
+  --pf-v6-c-avatar--m-lg__initials--FontSize: var(--pf-t--global--font--size--2xl);
+  --pf-v6-c-avatar--m-lg__initials--FontWeight: var(--pf-t--global--font--weight--heading--bold);
+  --pf-v6-c-avatar--m-lg__initials--FontFamily: var(--pf-t--global--font--family--heading);
+  --pf-v6-c-avatar--m-xl__initials--FontSize: var(--pf-t--global--font--size--4xl);
+  --pf-v6-c-avatar--m-xl__initials--FontWeight: var(--pf-t--global--font--weight--heading--default);
+  --pf-v6-c-avatar--m-xl__initials--FontFamily: var(--pf-t--global--font--family--heading);
+  --pf-v6-c-avatar--m-gray__initials--Color: var(--pf-t--global--text--color--nonstatus--on-gray--hover);
+  --pf-v6-c-avatar--m-red__initials--Color: var(--pf-t--global--text--color--nonstatus--on-red--default);
+  --pf-v6-c-avatar--m-orangered__initials--Color: var(--pf-t--global--text--color--nonstatus--on-orangered--default);
+  --pf-v6-c-avatar--m-orange__initials--Color: var(--pf-t--global--text--color--nonstatus--on-orange--default);
+  --pf-v6-c-avatar--m-yellow__initials--Color: var(--pf-t--global--text--color--nonstatus--on-yellow--default);
+  --pf-v6-c-avatar--m-green__initials--Color: var(--pf-t--global--text--color--nonstatus--on-green--default);
+  --pf-v6-c-avatar--m-teal__initials--Color: var(--pf-t--global--text--color--nonstatus--on-teal--default);
+  --pf-v6-c-avatar--m-blue__initials--Color: var(--pf-t--global--text--color--nonstatus--on-blue--default);
+  --pf-v6-c-avatar--m-purple__initials--Color: var(--pf-t--global--text--color--nonstatus--on-purple--default);
 }
 
 .pf-v6-c-avatar {
   width: var(--pf-v6-c-avatar--Width);
   height: var(--pf-v6-c-avatar--Height);
+  font-size: var(--pf-v6-c-avatar--FontSize);
+  color: var(--pf-v6-c-avatar--Color, inherit);
+  background-color: var(--pf-v6-c-avatar--BackgroundColor, transparent);
   border: var(--pf-v6-c-avatar--BorderWidth) solid var(--pf-v6-c-avatar--BorderColor);
   border-radius: var(--pf-v6-c-avatar--BorderRadius);
 }
+div.pf-v6-c-avatar {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  overflow: clip;
+  vertical-align: middle;
+}
+
 .pf-v6-c-avatar.pf-m-bordered {
   --pf-v6-c-avatar--BorderColor: var(--pf-v6-c-avatar--m-bordered--BorderColor);
   --pf-v6-c-avatar--BorderWidth: var(--pf-v6-c-avatar--m-bordered--BorderWidth);
@@ -249,4 +312,85 @@
   .pf-v6-c-avatar.pf-m-xl {
     --pf-v6-c-avatar--Height: var(--pf-v6-c-avatar--m-xl--Height-on-2xl, var(--pf-v6-c-avatar--m-xl--Height-on-xl, var(--pf-v6-c-avatar--m-xl--Height-on-lg, var(--pf-v6-c-avatar--m-xl--Height-on-md, var(--pf-v6-c-avatar--m-xl--Height-on-sm, var(--pf-v6-c-avatar--m-xl--Height))))));
   }
+}
+.pf-v6-c-avatar.pf-m-sm {
+  --pf-v6-c-avatar--FontSize: var(--pf-v6-c-avatar--m-sm--FontSize);
+  --pf-v6-c-avatar__initials--FontSize: var(--pf-v6-c-avatar--m-sm__initials--FontSize);
+  --pf-v6-c-avatar__initials--FontWeight: var(--pf-v6-c-avatar--m-sm__initials--FontWeight);
+}
+.pf-v6-c-avatar.pf-m-lg {
+  --pf-v6-c-avatar--FontSize: var(--pf-v6-c-avatar--m-lg--FontSize);
+  --pf-v6-c-avatar__initials--FontSize: var(--pf-v6-c-avatar--m-lg__initials--FontSize);
+  --pf-v6-c-avatar__initials--FontWeight: var(--pf-v6-c-avatar--m-lg__initials--FontWeight);
+  --pf-v6-c-avatar__initials--FontFamily: var(--pf-v6-c-avatar--m-lg__initials--FontFamily);
+}
+.pf-v6-c-avatar.pf-m-xl {
+  --pf-v6-c-avatar--FontSize: var(--pf-v6-c-avatar--m-xl--FontSize);
+  --pf-v6-c-avatar__initials--FontSize: var(--pf-v6-c-avatar--m-xl__initials--FontSize);
+  --pf-v6-c-avatar__initials--FontWeight: var(--pf-v6-c-avatar--m-xl__initials--FontWeight);
+  --pf-v6-c-avatar__initials--FontFamily: var(--pf-v6-c-avatar--m-xl__initials--FontFamily);
+}
+.pf-v6-c-avatar.pf-m-colorful {
+  --pf-v6-c-avatar--BorderWidth: var(--pf-v6-c-avatar--m-colorful--BorderWidth);
+}
+.pf-v6-c-avatar.pf-m-red {
+  --pf-v6-c-avatar--BackgroundColor: var(--pf-v6-c-avatar--m-red--BackgroundColor);
+  --pf-v6-c-avatar--Color: var(--pf-v6-c-avatar--m-red--Color);
+  --pf-v6-c-avatar--BorderColor: var(--pf-v6-c-avatar--m-red--BorderColor);
+  --pf-v6-c-avatar__initials--Color: var(--pf-v6-c-avatar--m-red__initials--Color);
+}
+.pf-v6-c-avatar.pf-m-orangered {
+  --pf-v6-c-avatar--BackgroundColor: var(--pf-v6-c-avatar--m-orangered--BackgroundColor);
+  --pf-v6-c-avatar--Color: var(--pf-v6-c-avatar--m-orangered--Color);
+  --pf-v6-c-avatar--BorderColor: var(--pf-v6-c-avatar--m-orangered--BorderColor);
+  --pf-v6-c-avatar__initials--Color: var(--pf-v6-c-avatar--m-orangered__initials--Color);
+}
+.pf-v6-c-avatar.pf-m-orange {
+  --pf-v6-c-avatar--BackgroundColor: var(--pf-v6-c-avatar--m-orange--BackgroundColor);
+  --pf-v6-c-avatar--Color: var(--pf-v6-c-avatar--m-orange--Color);
+  --pf-v6-c-avatar--BorderColor: var(--pf-v6-c-avatar--m-orange--BorderColor);
+  --pf-v6-c-avatar__initials--Color: var(--pf-v6-c-avatar--m-orange__initials--Color);
+}
+.pf-v6-c-avatar.pf-m-yellow {
+  --pf-v6-c-avatar--BackgroundColor: var(--pf-v6-c-avatar--m-yellow--BackgroundColor);
+  --pf-v6-c-avatar--Color: var(--pf-v6-c-avatar--m-yellow--Color);
+  --pf-v6-c-avatar--BorderColor: var(--pf-v6-c-avatar--m-yellow--BorderColor);
+  --pf-v6-c-avatar__initials--Color: var(--pf-v6-c-avatar--m-yellow__initials--Color);
+}
+.pf-v6-c-avatar.pf-m-green {
+  --pf-v6-c-avatar--BackgroundColor: var(--pf-v6-c-avatar--m-green--BackgroundColor);
+  --pf-v6-c-avatar--Color: var(--pf-v6-c-avatar--m-green--Color);
+  --pf-v6-c-avatar--BorderColor: var(--pf-v6-c-avatar--m-green--BorderColor);
+  --pf-v6-c-avatar__initials--Color: var(--pf-v6-c-avatar--m-green__initials--Color);
+}
+.pf-v6-c-avatar.pf-m-teal {
+  --pf-v6-c-avatar--BackgroundColor: var(--pf-v6-c-avatar--m-teal--BackgroundColor);
+  --pf-v6-c-avatar--Color: var(--pf-v6-c-avatar--m-teal--Color);
+  --pf-v6-c-avatar--BorderColor: var(--pf-v6-c-avatar--m-teal--BorderColor);
+  --pf-v6-c-avatar__initials--Color: var(--pf-v6-c-avatar--m-teal__initials--Color);
+}
+.pf-v6-c-avatar.pf-m-blue {
+  --pf-v6-c-avatar--BackgroundColor: var(--pf-v6-c-avatar--m-blue--BackgroundColor);
+  --pf-v6-c-avatar--Color: var(--pf-v6-c-avatar--m-blue--Color);
+  --pf-v6-c-avatar--BorderColor: var(--pf-v6-c-avatar--m-blue--BorderColor);
+  --pf-v6-c-avatar__initials--Color: var(--pf-v6-c-avatar--m-blue__initials--Color);
+}
+.pf-v6-c-avatar.pf-m-purple {
+  --pf-v6-c-avatar--BackgroundColor: var(--pf-v6-c-avatar--m-purple--BackgroundColor);
+  --pf-v6-c-avatar--Color: var(--pf-v6-c-avatar--m-purple--Color);
+  --pf-v6-c-avatar--BorderColor: var(--pf-v6-c-avatar--m-purple--BorderColor);
+  --pf-v6-c-avatar__initials--Color: var(--pf-v6-c-avatar--m-purple__initials--Color);
+}
+.pf-v6-c-avatar.pf-m-gray {
+  --pf-v6-c-avatar--BackgroundColor: var(--pf-v6-c-avatar--m-gray--BackgroundColor);
+  --pf-v6-c-avatar--Color: var(--pf-v6-c-avatar--m-gray--Color);
+  --pf-v6-c-avatar--BorderColor: var(--pf-v6-c-avatar--m-gray--BorderColor);
+  --pf-v6-c-avatar__initials--Color: var(--pf-v6-c-avatar--m-gray__initials--Color);
+}
+
+.pf-v6-c-avatar__initials {
+  font-family: var(--pf-v6-c-avatar__initials--FontFamily, revert);
+  font-size: var(--pf-v6-c-avatar__initials--FontSize);
+  font-weight: var(--pf-v6-c-avatar__initials--FontWeight);
+  color: var(--pf-v6-c-avatar__initials--Color);
 }

package/components/Avatar/avatar.scss

@@ -9,26 +9,93 @@ $pf-v6-c-avatar--sizes: "sm", "md", "lg", "xl";
   --#{$avatar}--BorderRadius: var(--pf-t--global--border--radius--pill);
   --#{$avatar}--Width: #{pf-size-prem(36px)};
   --#{$avatar}--Height: #{pf-size-prem(36px)};
+  --#{$avatar}--FontSize: calc(#{pf-size-prem(36px)} / 1.414); // 1.414 is the square root of 2, used to get the inner square of the avatar
   --#{$avatar}--m-sm--Width: #{pf-size-prem(24px)};
   --#{$avatar}--m-sm--Height: #{pf-size-prem(24px)};
+  --#{$avatar}--m-sm--FontSize: calc(#{pf-size-prem(24px)} / 1.414);
   --#{$avatar}--m-md--Width: #{pf-size-prem(36px)};
   --#{$avatar}--m-md--Height: #{pf-size-prem(36px)};
+  --#{$avatar}--m-md--FontSize: calc(#{pf-size-prem(36px)} / 1.414);
   --#{$avatar}--m-lg--Width: #{pf-size-prem(72px)};
   --#{$avatar}--m-lg--Height: #{pf-size-prem(72px)};
+  --#{$avatar}--m-lg--FontSize: calc(#{pf-size-prem(72px)} / 1.414);
   --#{$avatar}--m-xl--Width: #{pf-size-prem(128px)};
   --#{$avatar}--m-xl--Height: #{pf-size-prem(128px)};
+  --#{$avatar}--m-xl--FontSize: calc(#{pf-size-prem(128px)} / 1.414);
 
   // Bordered
   --#{$avatar}--m-bordered--BorderColor: var(--pf-t--global--border--color--default);
   --#{$avatar}--m-bordered--BorderWidth: var(--pf-t--global--border--width--box--default);
+
+  // Colorful
+  --#{$avatar}--m-colorful--BorderWidth: var(--pf-t--global--border--width--box--default);
+  --#{$avatar}--m-gray--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
+  --#{$avatar}--m-gray--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--hover);
+  --#{$avatar}--m-gray--BorderColor: var(--pf-t--global--border--color--default);
+  --#{$avatar}--m-red--BackgroundColor: var(--pf-t--global--color--nonstatus--red--default);
+  --#{$avatar}--m-red--Color: var(--pf-t--global--icon--color--nonstatus--on-red--default);
+  --#{$avatar}--m-red--BorderColor: var(--pf-t--global--border--color--nonstatus--red--default);
+  --#{$avatar}--m-orangered--BackgroundColor: var(--pf-t--global--color--nonstatus--orangered--default);
+  --#{$avatar}--m-orangered--Color: var(--pf-t--global--icon--color--nonstatus--on-orangered--default);
+  --#{$avatar}--m-orangered--BorderColor: var(--pf-t--global--border--color--nonstatus--orangered--default);
+  --#{$avatar}--m-orange--BackgroundColor: var(--pf-t--global--color--nonstatus--orange--default);
+  --#{$avatar}--m-orange--Color: var(--pf-t--global--icon--color--nonstatus--on-orange--default);
+  --#{$avatar}--m-orange--BorderColor: var(--pf-t--global--border--color--nonstatus--orange--default);
+  --#{$avatar}--m-yellow--BackgroundColor: var(--pf-t--global--color--nonstatus--yellow--default);
+  --#{$avatar}--m-yellow--Color: var(--pf-t--global--icon--color--nonstatus--on-yellow--default);
+  --#{$avatar}--m-yellow--BorderColor: var(--pf-t--global--border--color--nonstatus--yellow--default);
+  --#{$avatar}--m-green--BackgroundColor: var(--pf-t--global--color--nonstatus--green--default);
+  --#{$avatar}--m-green--Color: var(--pf-t--global--icon--color--nonstatus--on-green--default);
+  --#{$avatar}--m-green--BorderColor: var(--pf-t--global--border--color--nonstatus--green--default);
+  --#{$avatar}--m-teal--BackgroundColor: var(--pf-t--global--color--nonstatus--teal--default);
+  --#{$avatar}--m-teal--Color: var(--pf-t--global--icon--color--nonstatus--on-teal--default);
+  --#{$avatar}--m-teal--BorderColor: var(--pf-t--global--border--color--nonstatus--teal--default);
+  --#{$avatar}--m-blue--BackgroundColor: var(--pf-t--global--color--nonstatus--blue--default);
+  --#{$avatar}--m-blue--Color: var(--pf-t--global--icon--color--nonstatus--on-blue--default);
+  --#{$avatar}--m-blue--BorderColor: var(--pf-t--global--border--color--nonstatus--blue--default);
+  --#{$avatar}--m-purple--BackgroundColor: var(--pf-t--global--color--nonstatus--purple--default);
+  --#{$avatar}--m-purple--Color: var(--pf-t--global--icon--color--nonstatus--on-purple--default);
+  --#{$avatar}--m-purple--BorderColor: var(--pf-t--global--border--color--nonstatus--purple--default);  
+  
+  // Initials
+  --#{$avatar}__initials--FontSize: var(--pf-t--global--font--size--body--lg);
+  --#{$avatar}__initials--FontWeight: var(--pf-t--global--font--weight--body--bold);
+  --#{$avatar}--m-sm__initials--FontSize: var(--pf-t--global--font--size--body--sm);
+  --#{$avatar}--m-sm__initials--FontWeight: var(--pf-t--global--font--weight--body--bold);
+  --#{$avatar}--m-lg__initials--FontSize: var(--pf-t--global--font--size--2xl);
+  --#{$avatar}--m-lg__initials--FontWeight: var(--pf-t--global--font--weight--heading--bold);
+  --#{$avatar}--m-lg__initials--FontFamily: var(--pf-t--global--font--family--heading);
+  --#{$avatar}--m-xl__initials--FontSize: var(--pf-t--global--font--size--4xl);
+  --#{$avatar}--m-xl__initials--FontWeight: var(--pf-t--global--font--weight--heading--default);
+  --#{$avatar}--m-xl__initials--FontFamily: var(--pf-t--global--font--family--heading);
+  --#{$avatar}--m-gray__initials--Color: var(--pf-t--global--text--color--nonstatus--on-gray--hover);
+  --#{$avatar}--m-red__initials--Color: var(--pf-t--global--text--color--nonstatus--on-red--default);
+  --#{$avatar}--m-orangered__initials--Color: var(--pf-t--global--text--color--nonstatus--on-orangered--default);
+  --#{$avatar}--m-orange__initials--Color: var(--pf-t--global--text--color--nonstatus--on-orange--default);
+  --#{$avatar}--m-yellow__initials--Color: var(--pf-t--global--text--color--nonstatus--on-yellow--default);
+  --#{$avatar}--m-green__initials--Color: var(--pf-t--global--text--color--nonstatus--on-green--default);
+  --#{$avatar}--m-teal__initials--Color: var(--pf-t--global--text--color--nonstatus--on-teal--default);
+  --#{$avatar}--m-blue__initials--Color: var(--pf-t--global--text--color--nonstatus--on-blue--default);
+  --#{$avatar}--m-purple__initials--Color: var(--pf-t--global--text--color--nonstatus--on-purple--default);
 }
 
 .#{$avatar} {
   width: var(--#{$avatar}--Width);
   height: var(--#{$avatar}--Height);
+  font-size: var(--#{$avatar}--FontSize);
+  color: var(--#{$avatar}--Color, inherit);
+  background-color: var(--#{$avatar}--BackgroundColor, transparent);
   border: var(--#{$avatar}--BorderWidth) solid var(--#{$avatar}--BorderColor);
   border-radius: var(--#{$avatar}--BorderRadius);
 
+  @at-root div#{&} {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    overflow: clip;
+    vertical-align: middle;
+  }
+
   &.pf-m-bordered {
     --#{$avatar}--BorderColor: var(--#{$avatar}--m-bordered--BorderColor);
     --#{$avatar}--BorderWidth: var(--#{$avatar}--m-bordered--BorderWidth);
@@ -40,4 +107,98 @@ $pf-v6-c-avatar--sizes: "sm", "md", "lg", "xl";
       @include pf-v6-build-css-variable-stack("--#{$avatar}--Height", "--#{$avatar}--m-#{$size}--Height", $pf-v6-c-avatar--breakpoint-map);
     }
   }
+
+  &.pf-m-sm {
+    --#{$avatar}--FontSize: var(--#{$avatar}--m-sm--FontSize);
+    --#{$avatar}__initials--FontSize: var(--#{$avatar}--m-sm__initials--FontSize);
+    --#{$avatar}__initials--FontWeight: var(--#{$avatar}--m-sm__initials--FontWeight);
+  }
+
+  &.pf-m-lg {
+    --#{$avatar}--FontSize: var(--#{$avatar}--m-lg--FontSize);
+    --#{$avatar}__initials--FontSize: var(--#{$avatar}--m-lg__initials--FontSize);
+    --#{$avatar}__initials--FontWeight: var(--#{$avatar}--m-lg__initials--FontWeight);
+    --#{$avatar}__initials--FontFamily: var(--#{$avatar}--m-lg__initials--FontFamily);
+  }
+
+  &.pf-m-xl {
+    --#{$avatar}--FontSize: var(--#{$avatar}--m-xl--FontSize);
+    --#{$avatar}__initials--FontSize: var(--#{$avatar}--m-xl__initials--FontSize);
+    --#{$avatar}__initials--FontWeight: var(--#{$avatar}--m-xl__initials--FontWeight);
+    --#{$avatar}__initials--FontFamily: var(--#{$avatar}--m-xl__initials--FontFamily);
+  }
+
+  &.pf-m-colorful {
+    --#{$avatar}--BorderWidth: var(--#{$avatar}--m-colorful--BorderWidth);
+  }
+  
+  &.pf-m-red {
+    --#{$avatar}--BackgroundColor: var(--#{$avatar}--m-red--BackgroundColor);
+    --#{$avatar}--Color: var(--#{$avatar}--m-red--Color);
+    --#{$avatar}--BorderColor: var(--#{$avatar}--m-red--BorderColor);
+    --#{$avatar}__initials--Color: var(--#{$avatar}--m-red__initials--Color);
+  }
+
+  &.pf-m-orangered {
+    --#{$avatar}--BackgroundColor: var(--#{$avatar}--m-orangered--BackgroundColor);
+    --#{$avatar}--Color: var(--#{$avatar}--m-orangered--Color);
+    --#{$avatar}--BorderColor: var(--#{$avatar}--m-orangered--BorderColor);
+    --#{$avatar}__initials--Color: var(--#{$avatar}--m-orangered__initials--Color);
+  }
+
+  &.pf-m-orange {
+    --#{$avatar}--BackgroundColor: var(--#{$avatar}--m-orange--BackgroundColor);
+    --#{$avatar}--Color: var(--#{$avatar}--m-orange--Color);
+    --#{$avatar}--BorderColor: var(--#{$avatar}--m-orange--BorderColor);
+    --#{$avatar}__initials--Color: var(--#{$avatar}--m-orange__initials--Color);
+  }
+
+  &.pf-m-yellow {
+    --#{$avatar}--BackgroundColor: var(--#{$avatar}--m-yellow--BackgroundColor);
+    --#{$avatar}--Color: var(--#{$avatar}--m-yellow--Color);
+    --#{$avatar}--BorderColor: var(--#{$avatar}--m-yellow--BorderColor);
+    --#{$avatar}__initials--Color: var(--#{$avatar}--m-yellow__initials--Color);
+  }
+
+  &.pf-m-green {
+    --#{$avatar}--BackgroundColor: var(--#{$avatar}--m-green--BackgroundColor);
+    --#{$avatar}--Color: var(--#{$avatar}--m-green--Color);
+    --#{$avatar}--BorderColor: var(--#{$avatar}--m-green--BorderColor);
+    --#{$avatar}__initials--Color: var(--#{$avatar}--m-green__initials--Color);
+  }
+
+  &.pf-m-teal {
+    --#{$avatar}--BackgroundColor: var(--#{$avatar}--m-teal--BackgroundColor);
+    --#{$avatar}--Color: var(--#{$avatar}--m-teal--Color);
+    --#{$avatar}--BorderColor: var(--#{$avatar}--m-teal--BorderColor);
+    --#{$avatar}__initials--Color: var(--#{$avatar}--m-teal__initials--Color);
+  }
+
+  &.pf-m-blue {
+    --#{$avatar}--BackgroundColor: var(--#{$avatar}--m-blue--BackgroundColor);
+    --#{$avatar}--Color: var(--#{$avatar}--m-blue--Color);
+    --#{$avatar}--BorderColor: var(--#{$avatar}--m-blue--BorderColor);
+    --#{$avatar}__initials--Color: var(--#{$avatar}--m-blue__initials--Color);
+  }
+
+  &.pf-m-purple {
+    --#{$avatar}--BackgroundColor: var(--#{$avatar}--m-purple--BackgroundColor);
+    --#{$avatar}--Color: var(--#{$avatar}--m-purple--Color);
+    --#{$avatar}--BorderColor: var(--#{$avatar}--m-purple--BorderColor);
+    --#{$avatar}__initials--Color: var(--#{$avatar}--m-purple__initials--Color);
+  }
+  
+  &.pf-m-gray {
+    --#{$avatar}--BackgroundColor: var(--#{$avatar}--m-gray--BackgroundColor);
+    --#{$avatar}--Color: var(--#{$avatar}--m-gray--Color);
+    --#{$avatar}--BorderColor: var(--#{$avatar}--m-gray--BorderColor);
+    --#{$avatar}__initials--Color: var(--#{$avatar}--m-gray__initials--Color);
+  }
+}
+
+.#{$avatar}__initials {
+  font-family: var(--#{$avatar}__initials--FontFamily, revert);
+  font-size: var(--#{$avatar}__initials--FontSize);
+  font-weight: var(--#{$avatar}__initials--FontWeight);
+  color: var(--#{$avatar}__initials--Color);
 }

package/components/Breadcrumb/breadcrumb.css

@@ -68,10 +68,10 @@
   font-weight: var(--pf-v6-c-breadcrumb__link--FontWeight);
   line-height: inherit;
   color: var(--pf-v6-c-breadcrumb__link--Color);
+  overflow-wrap: break-word;
   text-decoration-line: var(--pf-v6-c-breadcrumb__link--TextDecorationLine);
   text-decoration-style: var(--pf-v6-c-breadcrumb__link--TextDecorationStyle);
   text-decoration-color: var(--pf-v6-c-breadcrumb__link--TextDecorationColor);
-  word-break: break-word;
   background-color: var(--pf-v6-c-breadcrumb__link--BackgroundColor);
 }
 .pf-v6-c-breadcrumb__link:is(:hover, :focus) {

package/components/Breadcrumb/breadcrumb.scss

@@ -83,10 +83,10 @@
   font-weight: var(--#{$breadcrumb}__link--FontWeight);
   line-height: inherit;
   color: var(--#{$breadcrumb}__link--Color);
+  overflow-wrap: break-word;
   text-decoration-line: var(--#{$breadcrumb}__link--TextDecorationLine);
   text-decoration-style: var(--#{$breadcrumb}__link--TextDecorationStyle);
   text-decoration-color: var(--#{$breadcrumb}__link--TextDecorationColor);
-  word-break: break-word;
   background-color: var(--#{$breadcrumb}__link--BackgroundColor);
 
   &:is(:hover, :focus) {