@patternfly/react-styles 6.5.1 → 6.6.0-prerelease.2

package/CHANGELOG.md

@@ -3,11 +3,15 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [6.5.1](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-styles@6.5.0...@patternfly/react-styles@6.5.1) (2026-05-21)
+# [6.6.0-prerelease.1](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-styles@6.5.1-prerelease.0...@patternfly/react-styles@6.6.0-prerelease.1) (2026-05-26)
 
 ### Bug Fixes
 
-- upgraded 6.5.2 ([#12433](https://github.com/patternfly/patternfly-react/issues/12433)) ([497f3a0](https://github.com/patternfly/patternfly-react/commit/497f3a00fcd236d637fcfd061accf0ad89efbf9e))
+- updated to do 6.6.0 prereleases. ([#12434](https://github.com/patternfly/patternfly-react/issues/12434)) ([6e09ce8](https://github.com/patternfly/patternfly-react/commit/6e09ce8322ff13354991d901782231d437249aa6))
+
+## [6.5.1-prerelease.0](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-styles@6.5.0...@patternfly/react-styles@6.5.1-prerelease.0) (2026-05-21)
+
+**Note:** Version bump only for package @patternfly/react-styles
 
 # 6.5.0 (2026-05-20)
 

package/css/assets/images/img_avatar-rhds.svg

@@ -0,0 +1,22 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48" fill="none">
+  <g>
+    <rect width="48" height="48" fill="#147878"/>
+    <rect x="36" y="42" width="6" height="6" fill="#004D4D"/>
+    <rect x="6" y="42" width="6" height="6" fill="#004D4D"/>
+    <rect x="12" y="36" width="24" height="6" fill="#004D4D"/>
+    <rect x="18" y="30" width="12" height="6" fill="#004D4D"/>
+    <rect width="6" height="24" transform="matrix(-1 0 0 1 48 12)" fill="#004D4D"/>
+    <rect width="6" height="6" transform="matrix(-1 0 0 1 42 30)" fill="#004D4D"/>
+    <rect width="6" height="6" transform="matrix(-1 0 0 1 36 24)" fill="#004D4D"/>
+    <rect width="6" height="6" transform="matrix(-1 0 0 1 42 18)" fill="#004D4D"/>
+    <rect width="6" height="6" transform="matrix(-1 0 0 1 36 12)" fill="#004D4D"/>
+    <rect width="6" height="6" transform="matrix(-1 0 0 1 42 6)" fill="#004D4D"/>
+    <rect x="18" width="12" height="12" fill="#004D4D"/>
+    <rect x="6" y="30" width="6" height="6" fill="#004D4D"/>
+    <rect x="12" y="24" width="6" height="6" fill="#004D4D"/>
+    <rect x="6" y="18" width="6" height="6" fill="#004D4D"/>
+    <rect x="12" y="12" width="6" height="6" fill="#004D4D"/>
+    <rect x="6" y="6" width="6" height="6" fill="#004D4D"/>
+    <rect y="12" width="6" height="24" fill="#004D4D"/>
+  </g>
+</svg>

package/css/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/css/components/Accordion/accordion.css

@@ -39,7 +39,9 @@
   --pf-v6-c-accordion__expandable-content--m-fixed--MaxHeight: 9.375rem;
   --pf-v6-c-accordion__expandable-content--MaxHeight: 0;
   --pf-v6-c-accordion__expandable-content--Visibility: hidden;
+  --pf-v6-c-accordion__expandable-content--Overflow: hidden;
   --pf-v6-c-accordion__item--m-expanded__expandable-content--Visibility: visible;
+  --pf-v6-c-accordion__item--m-expanded__expandable-content--Overflow: visible;
   --pf-v6-c-accordion__item--m-expanded__expandable-content--MaxHeight: 99999px;
   --pf-v6-c-accordion__item--m-expanded__expandable-content--MarginBlockEnd: var(--pf-t--global--spacer--md);
   --pf-v6-c-accordion__item--before--TransitionDuration--expand--fade: var(--pf-t--global--motion--duration--fade--default);
@@ -172,6 +174,7 @@
   --pf-v6-c-accordion__expandable-content--TransitionDuration--fade: 0s;
   --pf-v6-c-accordion__expandable-content--m-fixed--MaxHeight--base: var(--pf-v6-c-accordion__expandable-content--m-fixed--MaxHeight);
   --pf-v6-c-accordion__expandable-content--BorderWidth: var(--pf-v6-c-accordion__item--m-expanded__expandable-content--BorderWidth);
+  --pf-v6-c-accordion__expandable-content--Overflow: var(--pf-v6-c-accordion__item--m-expanded__expandable-content--Overflow);
 }
 
 .pf-v6-c-accordion__toggle {
@@ -219,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]) {
@@ -228,26 +231,27 @@
 }
 
 .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);
   margin-inline-end: var(--pf-v6-c-accordion__expandable-content--MarginInlineEnd);
+  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;
   max-height: var(--pf-v6-c-accordion__expandable-content--m-fixed--MaxHeight--base);
-  overflow-y: auto;
 }
 
 .pf-v6-c-accordion__expandable-content-body {

package/css/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/css/components/Alert/alert.css

@@ -146,8 +146,8 @@
 
 .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 {
@@ -162,7 +162,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 +174,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/css/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/css/components/Avatar/avatar.d.ts

@@ -1,12 +1,23 @@
 import './avatar.css';
 declare const _default: {
   "avatar": "pf-v6-c-avatar",
+  "avatarInitials": "pf-v6-c-avatar__initials",
   "modifiers": {
     "bordered": "pf-m-bordered",
     "sm": "pf-m-sm",
     "md": "pf-m-md",
     "lg": "pf-m-lg",
-    "xl": "pf-m-xl"
+    "xl": "pf-m-xl",
+    "colorful": "pf-m-colorful",
+    "red": "pf-m-red",
+    "orangered": "pf-m-orangered",
+    "orange": "pf-m-orange",
+    "yellow": "pf-m-yellow",
+    "green": "pf-m-green",
+    "teal": "pf-m-teal",
+    "blue": "pf-m-blue",
+    "purple": "pf-m-purple",
+    "gray": "pf-m-gray"
   }
 };
 export default _default;

package/css/components/Avatar/avatar.js

@@ -3,11 +3,22 @@ exports.__esModule = true;
 require('./avatar.css');
 exports.default = {
   "avatar": "pf-v6-c-avatar",
+  "avatarInitials": "pf-v6-c-avatar__initials",
   "modifiers": {
     "bordered": "pf-m-bordered",
     "sm": "pf-m-sm",
     "md": "pf-m-md",
     "lg": "pf-m-lg",
-    "xl": "pf-m-xl"
+    "xl": "pf-m-xl",
+    "colorful": "pf-m-colorful",
+    "red": "pf-m-red",
+    "orangered": "pf-m-orangered",
+    "orange": "pf-m-orange",
+    "yellow": "pf-m-yellow",
+    "green": "pf-m-green",
+    "teal": "pf-m-teal",
+    "blue": "pf-m-blue",
+    "purple": "pf-m-purple",
+    "gray": "pf-m-gray"
   }
 };

package/css/components/Avatar/avatar.mjs

@@ -1,11 +1,22 @@
 import './avatar.css';
 export default {
   "avatar": "pf-v6-c-avatar",
+  "avatarInitials": "pf-v6-c-avatar__initials",
   "modifiers": {
     "bordered": "pf-m-bordered",
     "sm": "pf-m-sm",
     "md": "pf-m-md",
     "lg": "pf-m-lg",
-    "xl": "pf-m-xl"
+    "xl": "pf-m-xl",
+    "colorful": "pf-m-colorful",
+    "red": "pf-m-red",
+    "orangered": "pf-m-orangered",
+    "orange": "pf-m-orange",
+    "yellow": "pf-m-yellow",
+    "green": "pf-m-green",
+    "teal": "pf-m-teal",
+    "blue": "pf-m-blue",
+    "purple": "pf-m-purple",
+    "gray": "pf-m-gray"
   }
 };

package/css/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/css/components/Button/button.css

@@ -375,10 +375,10 @@
   line-height: var(--pf-v6-c-button--LineHeight, inherit);
   color: var(--pf-v6-c-button--Color);
   text-align: center;
+  white-space: nowrap;
   text-decoration-line: var(--pf-v6-c-button--TextDecorationLine);
   text-decoration-style: var(--pf-v6-c-button--TextDecorationStyle);
   text-decoration-color: var(--pf-v6-c-button--TextDecorationColor);
-  white-space: nowrap;
   cursor: pointer;
   -webkit-user-select: none;
   user-select: none;
@@ -388,11 +388,11 @@
   border-start-end-radius: var(--pf-v6-c-button--BorderStartEndRadius, var(--pf-v6-c-button--BorderRadius));
   border-end-start-radius: var(--pf-v6-c-button--BorderEndStartRadius, var(--pf-v6-c-button--BorderRadius));
   border-end-end-radius: var(--pf-v6-c-button--BorderEndEndRadius, var(--pf-v6-c-button--BorderRadius));
+  scale: var(--pf-v6-c-button--ScaleX) var(--pf-v6-c-button--ScaleY);
   transition-delay: var(--pf-v6-c-button--TransitionDelay);
   transition-timing-function: var(--pf-v6-c-button--TransitionTimingFunction);
   transition-duration: var(--pf-v6-c-button--TransitionDuration);
   transition-property: var(--pf-v6-c-button--TransitionProperty);
-  scale: var(--pf-v6-c-button--ScaleX) var(--pf-v6-c-button--ScaleY);
 }
 .pf-v6-c-button::after {
   position: absolute;
@@ -519,10 +519,10 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
   --pf-v6-c-button--hover--BorderWidth: 0;
   --pf-v6-c-button--m-clicked--BorderWidth: 0;
   text-align: start;
-  text-underline-offset: var(--pf-v6-c-button--m-link--m-inline--TextUnderlineOffset);
   white-space: normal;
-  background: transparent;
+  text-underline-offset: var(--pf-v6-c-button--m-link--m-inline--TextUnderlineOffset);
   outline-offset: 0.125rem;
+  background: transparent;
 }
 .pf-v6-c-button.pf-m-link.pf-m-inline:hover, .pf-v6-c-button.pf-m-link.pf-m-inline:focus {
   --pf-v6-c-button--m-link--m-inline--TextUnderlineOffset: var(--pf-v6-c-button--m-link--m-inline--hover--TextUnderlineOffset);
@@ -860,6 +860,9 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
   justify-content: flex-start;
   width: 100%;
 }
+.pf-v6-c-button.pf-m-docked .pf-v6-c-button__icon {
+  min-width: 1lh;
+}
 @media (min-width: 62rem) {
   .pf-v6-c-button.pf-m-docked {
     justify-content: center;
@@ -880,12 +883,12 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
   margin-inline-start: var(--pf-v6-c-button__icon--MarginInlineStart);
   margin-inline-end: var(--pf-v6-c-button__icon--MarginInlineEnd);
   color: var(--pf-v6-c-button__icon--Color);
+  rotate: var(--pf-v6-c-button__icon--Rotate);
+  scale: var(--pf-v6-c-button__icon--ScaleX) var(--pf-v6-c-button__icon--ScaleY);
   transition-delay: var(--pf-v6-c-button__icon--TransitionDelay);
   transition-timing-function: var(--pf-v6-c-button__icon--TransitionTimingFunction);
   transition-duration: var(--pf-v6-c-button__icon--TransitionDuration);
   transition-property: var(--pf-v6-c-button__icon--TransitionProperty);
-  rotate: var(--pf-v6-c-button__icon--Rotate);
-  scale: var(--pf-v6-c-button__icon--ScaleX) var(--pf-v6-c-button__icon--ScaleY);
 }
 .pf-v6-c-button__icon.pf-m-start {
   --pf-v6-c-button__icon--MarginInlineEnd: var(--pf-v6-c-button__icon--m-start--MarginInlineEnd);

package/css/components/Card/card.css

@@ -106,8 +106,8 @@
   --pf-v6-c-card--BackgroundColor: var(--pf-v6-c-card--m-glass--BackgroundColor);
   --pf-v6-c-card--BorderColor: var(--pf-v6-c-card--m-glass--BorderColor);
   --pf-v6-c-card--BorderWidth: var(--pf-v6-c-card--m-glass--BorderWidth);
-  backdrop-filter: var(--pf-v6-c-card--m-glass--BackdropFilter);
   box-shadow: var(--pf-v6-c-card--m-glass--BoxShadow);
+  backdrop-filter: var(--pf-v6-c-card--m-glass--BackdropFilter);
 }
 .pf-v6-c-card.pf-m-selectable .pf-v6-c-card__selectable-actions :is(.pf-v6-c-check, .pf-v6-c-radio) {
   gap: 0;
@@ -349,9 +349,9 @@
 }
 
 .pf-v6-c-card__clickable-action {
+  outline: 0;
   background: none;
   border: 0;
-  outline: 0;
 }
 .pf-v6-c-card__clickable-action:disabled, .pf-v6-c-card__clickable-action.pf-m-disabled {
   pointer-events: none;

package/css/components/Check/check.css

@@ -18,7 +18,7 @@
 .pf-v6-c-check {
   display: grid;
   grid-template-columns: auto 1fr;
-  grid-gap: var(--pf-v6-c-check--GridGap);
+  gap: var(--pf-v6-c-check--GridGap);
   accent-color: var(--pf-v6-c-check--AccentColor);
 }
 .pf-v6-c-check.pf-m-standalone {

package/css/components/ClipboardCopy/clipboard-copy.css

@@ -70,7 +70,7 @@
   padding-inline-start: var(--pf-v6-c-clipboard-copy__expandable-content--PaddingInlineStart);
   padding-inline-end: var(--pf-v6-c-clipboard-copy__expandable-content--PaddingInlineEnd);
   margin-block-start: var(--pf-v6-c-clipboard-copy__expandable-content--MarginBlockStart);
-  word-wrap: break-word;
+  overflow-wrap: break-word;
   background-color: var(--pf-v6-c-clipboard-copy__expandable-content--BackgroundColor);
   background-clip: padding-box;
   border: solid var(--pf-v6-c-clipboard-copy__expandable-content--BorderColor);
@@ -86,7 +86,7 @@
 }
 
 .pf-v6-c-clipboard-copy__text {
-  word-break: break-word;
+  overflow-wrap: break-word;
   white-space: normal;
 }
 .pf-v6-c-clipboard-copy__text.pf-m-code {

package/css/components/Compass/compass.css

@@ -196,8 +196,8 @@
 .pf-v6-c-compass__sidebar:is(.pf-m-start, .pf-m-end),
 .pf-v6-c-compass__main-footer,
 .pf-v6-c-compass__footer {
-  margin: 0;
   visibility: hidden;
+  margin: 0;
   opacity: 0;
   transition-delay: var(--pf-v6-c-compass--section--TransitionDelay);
   transition-timing-function: var(--pf-v6-c-compass--section--TransitionTimingFunction);
@@ -315,15 +315,18 @@
   inset-inline-start: 0;
   z-index: var(--pf-v6-c-compass__dock--ZIndex);
   display: flex;
+  visibility: hidden;
   flex-direction: column;
   grid-area: dock;
   width: var(--pf-v6-c-compass__dock--Width);
-  transition: translate var(--pf-v6-c-compass__dock--TransitionDuration--slide) var(--pf-v6-c-compass__dock--TransitionTimingFunction--slide);
   translate: -100% 0;
+  transition: translate var(--pf-v6-c-compass__dock--TransitionDuration--slide) var(--pf-v6-c-compass__dock--TransitionTimingFunction--slide), visibility 0s var(--pf-v6-c-compass__dock--TransitionDuration--slide);
 }
 .pf-v6-c-compass__dock.pf-m-expanded {
   --pf-v6-c-compass__dock--TransitionDuration--slide: var(--pf-v6-c-compass__dock--m-expanded--TransitionDuration--slide);
+  visibility: visible;
   translate: 0;
+  transition: translate var(--pf-v6-c-compass__dock--TransitionDuration--slide) var(--pf-v6-c-compass__dock--TransitionTimingFunction--slide), visibility 0s 0s;
 }
 @media (min-width: 62rem) {
   .pf-v6-c-compass__dock {
@@ -331,6 +334,7 @@
     --pf-v6-c-compass__dock-main--BorderInlineEndColor: var(--pf-v6-c-compass__dock-main--desktop--BorderInlineEndColor);
     position: revert;
     inset: revert;
+    visibility: revert;
     width: auto;
     translate: 0;
   }
@@ -345,9 +349,9 @@
 .pf-v6-c-compass__dock-main {
   flex-grow: 1;
   background-color: var(--pf-v6-c-compass__dock-main--BackgroundColor);
-  backdrop-filter: var(--pf-v6-c-compass__dock-main--BackdropFilter);
   border-inline-end: var(--pf-v6-c-compass__dock-main--BorderInlineEndWidth) solid var(--pf-v6-c-compass__dock-main--BorderInlineEndColor);
   box-shadow: var(--pf-v6-c-compass__dock-main--BoxShadow);
+  backdrop-filter: var(--pf-v6-c-compass__dock-main--BackdropFilter);
 }
 .pf-v6-c-compass__dock.pf-m-expanded .pf-v6-c-compass__dock-main {
   border-inline-end: var(--pf-v6-c-compass__dock--m-expanded__dock-main--BorderInlineEndWidth) solid var(--pf-v6-c-compass__dock--m-expanded__dock-main--BorderInlineEndColor);

package/css/components/Content/content.css

@@ -250,8 +250,8 @@ ul) {
 @media screen and (min-width: 36rem) {
   :is(.pf-v6-c-content--dl, .pf-v6-c-content dl) {
     grid-template: auto/var(--pf-v6-c-content--dl--GridTemplateColumns--dt) var(--pf-v6-c-content--dl--GridTemplateColumns--dd);
-    grid-row-gap: var(--pf-v6-c-content--dl--RowGap);
-    grid-column-gap: var(--pf-v6-c-content--dl--ColumnGap);
+    row-gap: var(--pf-v6-c-content--dl--RowGap);
+    column-gap: var(--pf-v6-c-content--dl--ColumnGap);
   }
 }
 

package/css/components/DataList/data-list.css

@@ -760,8 +760,8 @@
 .pf-v6-c-data-list__toggle-icon {
   height: var(--pf-v6-c-data-list__toggle-icon--Height);
   pointer-events: none;
-  transition: var(--pf-v6-c-data-list__toggle-icon--Transition);
   transform: rotate(var(--pf-v6-c-data-list__toggle-icon--Rotate));
+  transition: var(--pf-v6-c-data-list__toggle-icon--Transition);
 }
 
 .pf-v6-c-data-list__item-content {

package/css/components/DescriptionList/description-list.css

@@ -137,7 +137,6 @@
   width: 100%;
   margin-block-end: var(--pf-v6-c-description-list--RowGap);
   break-inside: avoid;
-  page-break-inside: avoid;
   -webkit-column-break-inside: avoid;
   -moz-column-break-inside: avoid;
 }

package/css/components/Drawer/drawer.css

@@ -369,6 +369,7 @@
 .pf-v6-c-drawer__panel {
   position: relative;
   z-index: var(--pf-v6-c-drawer__panel--ZIndex);
+  visibility: hidden;
   flex-basis: var(--pf-v6-c-drawer__panel--FlexBasis);
   row-gap: var(--pf-v6-c-drawer__panel--RowGap);
   order: 1;
@@ -376,7 +377,6 @@
   margin-block: var(--pf-v6-c-drawer__panel--MarginBlock, revert);
   margin-inline: var(--pf-v6-c-drawer__panel--MarginInline, revert);
   overflow: auto;
-  visibility: hidden;
   background-color: var(--pf-v6-c-drawer__panel--BackgroundColor);
   border: solid var(--pf-v6-c-drawer__panel--BorderColor);
   border-block-start-width: var(--pf-v6-c-drawer__panel--BorderBlockStartWidth);
@@ -486,8 +486,8 @@
   margin-block-start: var(--pf-v6-c-drawer__splitter--MarginBlockStart, 0);
   margin-inline-start: var(--pf-v6-c-drawer__splitter--MarginInlineStart, 0);
   cursor: var(--pf-v6-c-drawer__splitter--Cursor);
-  background-color: var(--pf-v6-c-drawer__splitter--BackgroundColor);
   outline-offset: var(--pf-v6-c-drawer__splitter--focus--OutlineOffset);
+  background-color: var(--pf-v6-c-drawer__splitter--BackgroundColor);
 }
 .pf-v6-c-drawer__splitter.pf-m-vertical {
   --pf-v6-c-drawer__splitter--Height: var(--pf-v6-c-drawer__splitter--m-vertical--Height);