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

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/DragDrop/drag-drop.css

@@ -3,6 +3,7 @@
   --pf-v6-c-draggable--m-dragging--Cursor: grabbing;
   --pf-v6-c-draggable--m-dragging--BoxShadow: var(--pf-t--global--box-shadow--md);
   --pf-v6-c-draggable--m-dragging--BackgroundColor: transparent;
+  --pf-v6-c-draggable--m-dragging--BorderRadius: var(--pf-t--global--border--radius--small);
   --pf-v6-c-draggable--m-dragging--after--BorderWidth: var(--pf-t--global--border--width--regular);
   --pf-v6-c-draggable--m-dragging--after--BorderColor: var(--pf-t--global--border--color--brand--default);
   --pf-v6-c-draggable--m-dragging--after--BorderRadius: var(--pf-t--global--border--radius--small);
@@ -17,6 +18,7 @@
   --pf-v6-c-draggable--Cursor: var(--pf-v6-c-draggable--m-dragging--Cursor);
   position: relative;
   background-color: var(--pf-v6-c-draggable--m-dragging--BackgroundColor);
+  border-radius: var(--pf-v6-c-draggable--m-dragging--BorderRadius);
   box-shadow: var(--pf-v6-c-draggable--m-dragging--BoxShadow);
 }
 .pf-v6-c-draggable.pf-m-dragging::after {
@@ -36,6 +38,7 @@
 
 .pf-v6-c-droppable {
   --pf-v6-c-droppable--before--BackgroundColor: transparent;
+  --pf-v6-c-droppable--before--BorderRadius: var(--pf-t--global--border--radius--small);
   --pf-v6-c-droppable--before--Opacity: 0;
   --pf-v6-c-droppable--after--BorderWidth: 0;
   --pf-v6-c-droppable--after--BorderColor: transparent;
@@ -58,6 +61,7 @@
 }
 .pf-v6-c-droppable::before {
   background-color: var(--pf-v6-c-droppable--before--BackgroundColor);
+  border-radius: var(--pf-v6-c-droppable--before--BorderRadius);
   opacity: var(--pf-v6-c-droppable--before--Opacity);
 }
 .pf-v6-c-droppable::after {

package/components/DragDrop/drag-drop.scss

@@ -5,6 +5,7 @@
   --#{$draggable}--m-dragging--Cursor: grabbing;
   --#{$draggable}--m-dragging--BoxShadow: var(--pf-t--global--box-shadow--md);
   --#{$draggable}--m-dragging--BackgroundColor: transparent;
+  --#{$draggable}--m-dragging--BorderRadius: var(--pf-t--global--border--radius--small);
   --#{$draggable}--m-dragging--after--BorderWidth: var(--pf-t--global--border--width--regular);
   --#{$draggable}--m-dragging--after--BorderColor: var(--pf-t--global--border--color--brand--default);
   --#{$draggable}--m-dragging--after--BorderRadius: var(--pf-t--global--border--radius--small);
@@ -20,6 +21,7 @@
 
     position: relative;
     background-color: var(--#{$draggable}--m-dragging--BackgroundColor);
+    border-radius: var(--#{$draggable}--m-dragging--BorderRadius);
     box-shadow: var(--#{$draggable}--m-dragging--BoxShadow);
 
     &::after {
@@ -42,6 +44,7 @@
 
 @include pf-root($droppable) {
   --#{$droppable}--before--BackgroundColor: transparent;
+  --#{$droppable}--before--BorderRadius: var(--pf-t--global--border--radius--small);
   --#{$droppable}--before--Opacity: 0;
   --#{$droppable}--after--BorderWidth: 0;
   --#{$droppable}--after--BorderColor: transparent;
@@ -67,6 +70,7 @@
 
   &::before {
     background-color: var(--#{$droppable}--before--BackgroundColor);
+    border-radius: var(--#{$droppable}--before--BorderRadius);
     opacity: var(--#{$droppable}--before--Opacity);
   }
 

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

package/components/DualListSelector/dual-list-selector.css

@@ -145,9 +145,9 @@
   max-height: var(--pf-v6-c-dual-list-selector__menu--MaxHeight);
   margin-block-start: var(--pf-v6-c-dual-list-selector__menu--MarginBlockStart);
   overflow: auto;
+  outline-offset: 2px;
   border: var(--pf-v6-c-dual-list-selector__menu--BorderWidth) solid var(--pf-v6-c-dual-list-selector__menu--BorderColor);
   border-radius: var(--pf-v6-c-dual-list-selector__menu--BorderRadius);
-  outline-offset: 2px;
 }
 
 .pf-v6-c-dual-list-selector__list {
@@ -183,25 +183,25 @@
   --pf-v6-c-dual-list-selector__item--PaddingInlineStart: var(--pf-v6-c-dual-list-selector__item--m-expandable--PaddingInlineStart);
 }
 .pf-v6-c-dual-list-selector.pf-m-animate-expand .pf-v6-c-dual-list-selector__list-item.pf-m-expandable > .pf-v6-c-dual-list-selector__list {
-  max-height: 0;
   visibility: hidden;
+  max-height: 0;
   opacity: var(--pf-v6-c-dual-list-selector__list--Opacity);
+  translate: 0 var(--pf-v6-c-dual-list-selector__list--TranslateY);
   transition-delay: 0s, 0s, var(--pf-v6-c-dual-list-selector__list--TransitionDuration--fade), var(--pf-v6-c-dual-list-selector__list--TransitionDuration--fade);
   transition-timing-function: var(--pf-v6-c-dual-list-selector__list--TransitionTimingFunction);
   transition-duration: var(--pf-v6-c-dual-list-selector__list--TransitionDuration--fade), var(--pf-v6-c-dual-list-selector__list--TransitionDuration--slide), 0s, 0s;
   transition-property: opacity, translate, visibility, max-height;
-  translate: 0 var(--pf-v6-c-dual-list-selector__list--TranslateY);
 }
 .pf-v6-c-dual-list-selector__list-item.pf-m-expanded {
   --pf-v6-c-dual-list-selector__item-toggle-icon--Rotate: var(--pf-v6-c-dual-list-selector__list-item--m-expanded__item-toggle-icon--Rotate);
 }
 .pf-v6-c-dual-list-selector.pf-m-animate-expand .pf-v6-c-dual-list-selector__list-item.pf-m-expanded > .pf-v6-c-dual-list-selector__list {
-  max-height: 99999px;
   visibility: revert;
+  max-height: 99999px;
   opacity: var(--pf-v6-c-dual-list-selector--m-expanded__list--Opacity);
+  translate: 0 var(--pf-v6-c-dual-list-selector--m-expanded__list--TranslateY);
   transition-delay: 0s;
   transition-duration: var(--pf-v6-c-dual-list-selector__list--TransitionDuration--expand--fade), var(--pf-v6-c-dual-list-selector__list--TransitionDuration--expand--slide), 0s, 0s;
-  translate: 0 var(--pf-v6-c-dual-list-selector--m-expanded__list--TranslateY);
 }
 .pf-v6-c-dual-list-selector__list-item.pf-m-disabled {
   --pf-v6-c-dual-list-selector__item-text--Color: var(--pf-v6-c-dual-list-selector__list-item--m-disabled__item-text--Color);
@@ -336,10 +336,10 @@
   min-width: var(--pf-v6-c-dual-list-selector__item-toggle-icon--MinWidth);
   color: var(--pf-v6-c-dual-list-selector__item-toggle-icon--Color, inherit);
   text-align: center;
+  transform: rotate(var(--pf-v6-c-dual-list-selector__item-toggle-icon--Rotate));
   transition-timing-function: var(--pf-v6-c-dual-list-selector__item-toggle-icon--TransitionTimingFunction);
   transition-duration: var(--pf-v6-c-dual-list-selector__item-toggle-icon--TransitionDuration);
   transition-property: transform;
-  transform: rotate(var(--pf-v6-c-dual-list-selector__item-toggle-icon--Rotate));
 }
 
 .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item {

package/components/DualListSelector/dual-list-selector.scss

@@ -184,9 +184,9 @@ $pf-v6-c-dual-list-selector__item--MaxNesting: 10;
   max-height: var(--#{$dual-list-selector}__menu--MaxHeight);
   margin-block-start: var(--#{$dual-list-selector}__menu--MarginBlockStart);
   overflow: auto;
+  outline-offset: 2px; // push the focus outline out so that it is not broken by the list item row background
   border: var(--#{$dual-list-selector}__menu--BorderWidth) solid var(--#{$dual-list-selector}__menu--BorderColor);
   border-radius: var(--#{$dual-list-selector}__menu--BorderRadius);
-  outline-offset: 2px; // push the focus outline out so that it is not broken by the list item row background
 }
 
 .#{$dual-list-selector}__list {
@@ -226,14 +226,14 @@ $pf-v6-c-dual-list-selector__item--MaxNesting: 10;
 
     > .#{$dual-list-selector}__list {
       .#{$dual-list-selector}.pf-m-animate-expand & { // TODO - remove opt-in class in a breaking change
-        max-height: 0;
         visibility: hidden;
+        max-height: 0;
         opacity: var(--#{$dual-list-selector}__list--Opacity);
+        translate: 0 var(--#{$dual-list-selector}__list--TranslateY);
         transition-delay: 0s, 0s, var(--#{$dual-list-selector}__list--TransitionDuration--fade), var(--#{$dual-list-selector}__list--TransitionDuration--fade);
         transition-timing-function: var(--#{$dual-list-selector}__list--TransitionTimingFunction);
         transition-duration: var(--#{$dual-list-selector}__list--TransitionDuration--fade), var(--#{$dual-list-selector}__list--TransitionDuration--slide), 0s, 0s;
         transition-property: opacity, translate, visibility, max-height;
-        translate: 0 var(--#{$dual-list-selector}__list--TranslateY);
       }
     }
   }
@@ -243,12 +243,12 @@ $pf-v6-c-dual-list-selector__item--MaxNesting: 10;
 
     > .#{$dual-list-selector}__list {
       .#{$dual-list-selector}.pf-m-animate-expand & {
-        max-height: 99999px;
         visibility: revert;
+        max-height: 99999px;
         opacity: var(--#{$dual-list-selector}--m-expanded__list--Opacity);
+        translate: 0 var(--#{$dual-list-selector}--m-expanded__list--TranslateY);
         transition-delay: 0s;
         transition-duration: var(--#{$dual-list-selector}__list--TransitionDuration--expand--fade), var(--#{$dual-list-selector}__list--TransitionDuration--expand--slide), 0s, 0s;
-        translate: 0 var(--#{$dual-list-selector}--m-expanded__list--TranslateY);
       }
     }
   }
@@ -401,10 +401,10 @@ $pf-v6-c-dual-list-selector__item--MaxNesting: 10;
   min-width: var(--#{$dual-list-selector}__item-toggle-icon--MinWidth);
   color: var(--#{$dual-list-selector}__item-toggle-icon--Color, inherit);
   text-align: center;
+  transform: rotate(var(--#{$dual-list-selector}__item-toggle-icon--Rotate));
   transition-timing-function: var(--#{$dual-list-selector}__item-toggle-icon--TransitionTimingFunction);
   transition-duration: var(--#{$dual-list-selector}__item-toggle-icon--TransitionDuration);
   transition-property: transform;
-  transform: rotate(var(--#{$dual-list-selector}__item-toggle-icon--Rotate));
 }
 
 // stylelint-disable no-duplicate-selectors

package/components/ExpandableSection/expandable-section.css

@@ -125,8 +125,8 @@
   display: inline-block;
   min-width: var(--pf-v6-c-expandable-section__toggle-icon--MinWidth);
   color: var(--pf-v6-c-expandable-section__toggle-icon--Color);
-  transition: var(--pf-v6-c-expandable-section__toggle-icon--Transition);
   transform: rotate(var(--pf-v6-c-expandable-section__toggle-icon--Rotate));
+  transition: var(--pf-v6-c-expandable-section__toggle-icon--Transition);
 }
 .pf-v6-c-expandable-section__toggle-icon.pf-m-expand-top {
   --pf-v6-c-expandable-section__toggle-icon--Rotate: var(--pf-v6-c-expandable-section__toggle-icon--m-expand-top--Rotate);
@@ -141,13 +141,13 @@
   display: revert;
 }
 .pf-v6-c-expandable-section:where(:not(.pf-m-truncate)) > .pf-v6-c-expandable-section__content {
+  visibility: var(--pf-v6-c-expandable-section__content--Visibility, hidden);
   max-height: var(--pf-v6-c-expandable-section__content--MaxHeight, 0);
   overflow: var(--pf-v6-c-expandable-section__content--Overflow, hidden);
-  visibility: var(--pf-v6-c-expandable-section__content--Visibility, hidden);
   opacity: var(--pf-v6-c-expandable-section__content--Opacity);
+  translate: 0 var(--pf-v6-c-expandable-section__content--TranslateY);
   transition-delay: 0s, 0s, var(--pf-v6-c-expandable-section__content--TransitionDelay--hide, 0s), var(--pf-v6-c-expandable-section__content--TransitionDelay--hide, 0s);
   transition-timing-function: var(--pf-v6-c-expandable-section__content--TransitionTimingFunction);
   transition-duration: var(--pf-v6-c-expandable-section__content--TransitionDuration--fade), var(--pf-v6-c-expandable-section__content--TransitionDuration--slide), 0s, 0s;
   transition-property: opacity, translate, visibility, max-height;
-  translate: 0 var(--pf-v6-c-expandable-section__content--TranslateY);
 }