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

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,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/components/Alert/alert.scss

@@ -188,8 +188,8 @@
   @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 {
@@ -204,7 +204,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 +214,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/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);
@@ -880,12 +880,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 {
@@ -1013,12 +1013,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);