@patternfly/patternfly 6.5.2 → 6.6.0-prerelease.10

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) {

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

@@ -439,10 +439,10 @@
   line-height: var(--#{$button}--LineHeight, inherit);
   color: var(--#{$button}--Color);
   text-align: center;
+  white-space: nowrap;
   text-decoration-line: var(--#{$button}--TextDecorationLine);
   text-decoration-style: var(--#{$button}--TextDecorationStyle);
   text-decoration-color: var(--#{$button}--TextDecorationColor);
-  white-space: nowrap;
   cursor: pointer; // needed for when a button does not use <button> - eg, <span>
   // stylelint-disable property-no-vendor-prefix
   -webkit-user-select: none;
@@ -454,11 +454,11 @@
   border-start-end-radius: var(--#{$button}--BorderStartEndRadius, var(--#{$button}--BorderRadius));
   border-end-start-radius: var(--#{$button}--BorderEndStartRadius, var(--#{$button}--BorderRadius));
   border-end-end-radius: var(--#{$button}--BorderEndEndRadius, var(--#{$button}--BorderRadius));
+  scale: var(--#{$button}--ScaleX) var(--#{$button}--ScaleY);
   transition-delay: var(--#{$button}--TransitionDelay);
   transition-timing-function: var(--#{$button}--TransitionTimingFunction);
   transition-duration: var(--#{$button}--TransitionDuration);
   transition-property: var(--#{$button}--TransitionProperty);
-  scale: var(--#{$button}--ScaleX) var(--#{$button}--ScaleY);
 
   &::after {
     position: absolute;
@@ -596,10 +596,10 @@
       --#{$button}--m-clicked--BorderWidth: 0;
 
       text-align: start;
-      text-underline-offset: var(--#{$button}--m-link--m-inline--TextUnderlineOffset);
       white-space: normal;
-      background: transparent; // don't show the ripple effect for inline links
+      text-underline-offset: var(--#{$button}--m-link--m-inline--TextUnderlineOffset);
       outline-offset: #{pf-size-prem(2px)};
+      background: transparent; // don't show the ripple effect for inline links
 
       &:hover,
       &:focus {
@@ -989,6 +989,10 @@
     justify-content: flex-start;
     width: 100%;
 
+    .#{$button}__icon {
+      min-width: 1lh;
+    }
+
     @media (min-width: $pf-v6-global--breakpoint--dock--desktop) {
       justify-content: center;
 
@@ -1013,12 +1017,12 @@
   margin-inline-start: var(--#{$button}__icon--MarginInlineStart);
   margin-inline-end: var(--#{$button}__icon--MarginInlineEnd);
   color: var(--#{$button}__icon--Color);
+  rotate: var(--#{$button}__icon--Rotate);
+  scale: var(--#{$button}__icon--ScaleX) var(--#{$button}__icon--ScaleY);
   transition-delay: var(--#{$button}__icon--TransitionDelay);
   transition-timing-function: var(--#{$button}__icon--TransitionTimingFunction);
   transition-duration: var(--#{$button}__icon--TransitionDuration);
   transition-property: var(--#{$button}__icon--TransitionProperty);
-  rotate: var(--#{$button}__icon--Rotate);
-  scale: var(--#{$button}__icon--ScaleX) var(--#{$button}__icon--ScaleY);
 
   &.pf-m-start {
     --#{$button}__icon--MarginInlineEnd: var(--#{$button}__icon--m-start--MarginInlineEnd);

package/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/components/Card/card.scss

@@ -144,9 +144,9 @@
     --#{$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);
+    backdrop-filter: var(--#{$card}--m-glass--BackdropFilter);
   }
 
   // SELECTABLE CARDS
@@ -462,9 +462,9 @@
 }
 
 .#{$card}__clickable-action {
+  outline: 0;
   background: none;
   border: 0;
-  outline: 0;
 
   &:disabled,
   &.pf-m-disabled {

package/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/components/Check/check.scss

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

package/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/components/ClipboardCopy/clipboard-copy.scss

@@ -91,7 +91,7 @@
   padding-inline-start: var(--#{$clipboard-copy}__expandable-content--PaddingInlineStart);
   padding-inline-end: var(--#{$clipboard-copy}__expandable-content--PaddingInlineEnd);
   margin-block-start: var(--#{$clipboard-copy}__expandable-content--MarginBlockStart);
-  word-wrap: break-word;
+  overflow-wrap: break-word;
   background-color: var(--#{$clipboard-copy}__expandable-content--BackgroundColor);
   background-clip: padding-box;
   border: solid var(--#{$clipboard-copy}__expandable-content--BorderColor);
@@ -108,7 +108,7 @@
 }
 
 .#{$clipboard-copy}__text {
-  word-break: break-word;
+  overflow-wrap: break-word;
   white-space: normal;
 
   &.pf-m-code {

package/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/components/Compass/compass.scss

@@ -198,8 +198,8 @@
 .#{$compass}__sidebar:is(.pf-m-start, .pf-m-end),
 .#{$compass}__main-footer,
 .#{$compass}__footer {
-  margin: 0;
   visibility: hidden;
+  margin: 0;
   opacity: 0;
   transition-delay: var(--#{$compass}--section--TransitionDelay);
   transition-timing-function: var(--#{$compass}--section--TransitionTimingFunction);
@@ -324,16 +324,19 @@
   inset-inline-start: 0;
   z-index: var(--#{$compass}__dock--ZIndex);
   display: flex;
+  visibility: hidden;
   flex-direction: column;
   grid-area: dock;
   width: var(--#{$compass}__dock--Width);
-  transition: translate var(--#{$compass}__dock--TransitionDuration--slide) var(--#{$compass}__dock--TransitionTimingFunction--slide);
   translate: -100% 0;
+  transition: translate var(--#{$compass}__dock--TransitionDuration--slide) var(--#{$compass}__dock--TransitionTimingFunction--slide), visibility 0s var(--#{$compass}__dock--TransitionDuration--slide);
 
   &.pf-m-expanded {
     --#{$compass}__dock--TransitionDuration--slide: var(--#{$compass}__dock--m-expanded--TransitionDuration--slide);
 
+    visibility: visible;
     translate: 0;
+    transition: translate var(--#{$compass}__dock--TransitionDuration--slide) var(--#{$compass}__dock--TransitionTimingFunction--slide), visibility 0s 0s;
   }
 
   @media (min-width: $pf-v6-global--breakpoint--dock--desktop) {
@@ -342,6 +345,7 @@
 
     position: revert;
     inset: revert;
+    visibility: revert;
     width: auto;
     translate: 0;
   }
@@ -358,9 +362,9 @@
 .#{$compass}__dock-main {
   flex-grow: 1;
   background-color: var(--#{$compass}__dock-main--BackgroundColor);
-  backdrop-filter: var(--#{$compass}__dock-main--BackdropFilter);
   border-inline-end: var(--#{$compass}__dock-main--BorderInlineEndWidth) solid var(--#{$compass}__dock-main--BorderInlineEndColor);
   box-shadow: var(--#{$compass}__dock-main--BoxShadow);
+  backdrop-filter: var(--#{$compass}__dock-main--BackdropFilter);
 
   .#{$compass}__dock.pf-m-expanded & {
     border-inline-end: var(--#{$compass}__dock--m-expanded__dock-main--BorderInlineEndWidth) solid var(--#{$compass}__dock--m-expanded__dock-main--BorderInlineEndColor);

package/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/components/Content/content.scss

@@ -347,8 +347,8 @@
 
     @media screen and (min-width: $pf-v6-global--breakpoint--sm) {
       grid-template: auto / var(--#{$content}--dl--GridTemplateColumns--dt) var(--#{$content}--dl--GridTemplateColumns--dd);
-      grid-row-gap: var(--#{$content}--dl--RowGap);
-      grid-column-gap: var(--#{$content}--dl--ColumnGap);
+      row-gap: var(--#{$content}--dl--RowGap);
+      column-gap: var(--#{$content}--dl--ColumnGap);
     }
   }
 

package/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/components/DataList/data-list.scss

@@ -350,8 +350,8 @@
 
   height: var(--#{$data-list}__toggle-icon--Height);
   pointer-events: none;
-  transition: var(--#{$data-list}__toggle-icon--Transition); // TODO remove shorthand in breaking change
   transform: rotate(var(--#{$data-list}__toggle-icon--Rotate));
+  transition: var(--#{$data-list}__toggle-icon--Transition); // TODO remove shorthand in breaking change
 }
 
 .#{$data-list}__item-content {

package/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/components/DescriptionList/description-list.scss

@@ -109,7 +109,6 @@ $pf-v6-c-description-list--breakpoint-map: build-breakpoint-map("base", "sm", "m
       width: 100%;
       margin-block-end: var(--#{$description-list}--RowGap);
       break-inside: avoid;
-      page-break-inside: avoid;
 
       // stylelint-disable property-no-vendor-prefix
       -webkit-column-break-inside: avoid;

package/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);

package/components/Drawer/drawer.scss

@@ -436,6 +436,7 @@ $pf-v6-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100);
 .#{$drawer}__panel {
   position: relative;
   z-index: var(--#{$drawer}__panel--ZIndex);
+  visibility: hidden; // hidden by default
   flex-basis: var(--#{$drawer}__panel--FlexBasis);
   row-gap: var(--#{$drawer}__panel--RowGap);
   order: 1;
@@ -443,7 +444,6 @@ $pf-v6-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100);
   margin-block: var(--#{$drawer}__panel--MarginBlock, revert);
   margin-inline: var(--#{$drawer}__panel--MarginInline, revert);
   overflow: auto;
-  visibility: hidden; // hidden by default
   background-color: var(--#{$drawer}__panel--BackgroundColor);
   border: solid var(--#{$drawer}__panel--BorderColor);
   border-block-start-width: var(--#{$drawer}__panel--BorderBlockStartWidth);
@@ -569,8 +569,8 @@ $pf-v6-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100);
   margin-block-start: var(--#{$drawer}__splitter--MarginBlockStart, 0);
   margin-inline-start: var(--#{$drawer}__splitter--MarginInlineStart, 0);
   cursor: var(--#{$drawer}__splitter--Cursor);
-  background-color: var(--#{$drawer}__splitter--BackgroundColor);
   outline-offset: var(--#{$drawer}__splitter--focus--OutlineOffset);
+  background-color: var(--#{$drawer}__splitter--BackgroundColor);
 
   &.pf-m-vertical {
     --#{$drawer}__splitter--Height: var(--#{$drawer}__splitter--m-vertical--Height);