@patternfly/patternfly 6.3.0-prerelease.8 → 6.3.0

package/components/Button/button.scss

@@ -21,9 +21,12 @@
   --#{$button}--TextDecorationLine: none;
   --#{$button}--TextDecorationStyle: none;
   --#{$button}--TextDecorationColor: currentcolor;
+  --#{$button}--TransitionDelay: 0s;
   --#{$button}--TransitionDuration: var(--pf-t--global--motion--duration--fade--default);
-  --#{$button}--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
-  --#{$button}--TransitionProperty: color, background-color, border-width, border-color, padding;
+  --#{$button}--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--accelerate);
+  --#{$button}--TransitionProperty: color, background, border-width, border-color;
+  --#{$button}--ScaleX: 1;
+  --#{$button}--ScaleY: 1;
 
   // Hover
   --#{$button}--hover--BackgroundColor: transparent;
@@ -32,6 +35,8 @@
   --#{$button}--hover--TextDecorationLine: none;
   --#{$button}--hover--TextDecorationStyle: none;
   --#{$button}--hover--TextDecorationColor: currentcolor;
+  --#{$button}--hover--ScaleX: 1;
+  --#{$button}--hover--ScaleY: 1;
 
   // Clicked
   --#{$button}--m-clicked--BackgroundColor: transparent;
@@ -271,7 +276,7 @@
   --#{$button}--disabled--BorderColor: transparent;
   --#{$button}--disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
 
-  // Icons
+  // Icon
   --#{$button}__icon--Color: var(--pf-t--global--icon--color--regular);
   --#{$button}--hover__icon--Color: var(--pf-t--global--icon--color--regular);
   --#{$button}--m-clicked__icon--Color: var(--pf-t--global--icon--color--regular);
@@ -281,6 +286,19 @@
   --#{$button}__icon--m-end--MarginInlineStart: 0;
   --#{$button}--m-notify__icon--AnimationDuration--notify: var(--pf-t--global--motion--duration--3xl);
   --#{$button}--m-notify__icon--AnimationTimingFunction--notify: var(--pf-t--global--motion--timing-function--default);
+  --#{$button}__icon--TransitionDelay: 0s;
+  --#{$button}__icon--TransitionTimingFunction: auto;
+  --#{$button}__icon--TransitionDuration: 0s;
+  --#{$button}__icon--TransitionProperty: none;
+  --#{$button}__icon--Rotate: 0deg;
+  --#{$button}--hover__icon--TransitionTimingFunction: auto;
+  --#{$button}--hover__icon--TransitionDuration: 0s;
+  --#{$button}--hover__icon--TransitionProperty: none;
+  --#{$button}--hover__icon--Rotate: 0deg;
+  --#{$button}__icon--ScaleX: 1;
+  --#{$button}__icon--ScaleY: 1;
+  --#{$button}--hover__icon--ScaleX: 1;
+  --#{$button}--hover__icon--ScaleY: 1;
 
   // Favorite button
   --#{$button}--m-favorite__icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
@@ -289,6 +307,11 @@
   --#{$button}--m-favorited--hover__icon--Color: var(--pf-t--global--color--favorite--hover);
   --#{$button}--m-favorited__icon--AnimationDuration: var(--pf-t--global--motion--duration--icon--long);
   --#{$button}--m-favorited__icon--AnimationTimingFunction: var(--pf-t--global--motion--timing-function--default);
+  --#{$button}__icon--favorite--Opacity: 1;
+  --#{$button}__icon--favorited--Opacity: 0;
+  --#{$button}--m-favorited__icon--favorite--Opacity: 0;
+  --#{$button}--m-favorited__icon--favorited--Opacity: 1;
+  --#{$button}__icon--favorite--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
 
   // Progress
   --#{$button}__progress--width: calc(var(--pf-t--global--icon--size--lg) + var(--pf-t--global--spacer--sm)); // matches medium spinner diameter plus a spacer
@@ -306,12 +329,35 @@
   --#{$button}--m-in-progress--m-plain__progress--InsetInlineStart: 50%;
   --#{$button}--m-in-progress--m-plain__progress--TranslateX: -50%;
 
+  // Settings
+  --#{$button}--m-settings__icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
+  --#{$button}--m-settings__icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--accelerate);
+  --#{$button}--m-settings--hover__icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
+  --#{$button}--m-settings--hover__icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
+  --#{$button}--m-settings--hover__icon--Rotate: 60deg;
+
   // Count
   --#{$button}--m-primary__c-badge--BorderColor: var(--pf-t--global--border--color--default);
 
   // Block
   --#{$button}--m-block--Display: flex;
   --#{$button}--m-block--Width: 100%;
+
+  // Hamburger
+  --#{$button}--hamburger-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
+  --#{$button}--hamburger-icon--TransitionDuration: var(--pf-t--global--motion--duration--md);
+  --#{$button}--hamburger-icon--top--path--base: path("M1,1 L9,1");
+  --#{$button}--hamburger-icon--middle--path--base: path("M1,5 L9,5");
+  --#{$button}--hamburger-icon--arrow--path--base: path("M1,5 L1,5 L1,5");
+  --#{$button}--hamburger-icon--bottom--path--base: path("M9,9 L1,9");
+  --#{$button}--hamburger-icon--top--path: var(--#{$button}--hamburger-icon--top--path--base);
+  --#{$button}--hamburger-icon--middle--path: var(--#{$button}--hamburger-icon--middle--path--base);
+  --#{$button}--hamburger-icon--arrow--path: var(--#{$button}--hamburger-icon--arrow--path--base);
+  --#{$button}--hamburger-icon--bottom--path: var(--#{$button}--hamburger-icon--bottom--path--base);
+  --#{$button}--hamburger-icon--top--collapse--path: path("M5,1 L9,1");
+  --#{$button}--hamburger-icon--arrow--collapse--path: path("M3,7 L1,5 L3,3");
+  --#{$button}--hamburger-icon--bottom--collapse--path: path("M9,9 L5,9");
+  --#{$button}--m-hamburger__icon--m-expand--ScaleX: -1;
 }
 
 .#{$button} {
@@ -335,16 +381,21 @@
   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;
   user-select: none;
-  background-color: var(--#{$button}--BackgroundColor);
+  // stylelint-enable property-no-vendor-prefix
+  background: var(--#{$button}--BackgroundColor) radial-gradient(circle, transparent 1%, color-mix(in srgb, currentcolor 15%, transparent) 2%) center/15000% 15000%;
   border: 0;
   border-start-start-radius: var(--#{$button}--BorderStartStartRadius, var(--#{$button}--BorderRadius));
   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));
+  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;
@@ -470,6 +521,7 @@
 
       text-align: start;
       white-space: normal;
+      background: transparent; // don't show the ripple effect for inline links
       outline-offset: #{pf-size-prem(2px)};
     }
 
@@ -617,12 +669,13 @@
       --#{$button}--m-small--PaddingInlineStart: var(--#{$button}--m-plain--m-no-padding--m-small--PaddingInlineStart);
   
       min-width: var(--#{$button}--m-plain--m-no-padding--MinWidth);
+      background: var(--#{$button}--BackgroundColor); // override the ripple background
     }
   }
 
   &.pf-m-block {
     --#{$button}--Display: var(--#{$button}--m-block--Display);
-
+ 
     width: var(--#{$button}--m-block--Width);
   }
 
@@ -641,8 +694,8 @@
     --#{$button}--FontSize: var(--#{$button}--m-display-lg--FontSize);
   }
 
-  // Favorite button icon will transition color
   &.pf-m-favorite .#{$button}__icon {
+    display: grid;
     transition-timing-function: var(--#{$button}--m-favorite__icon--TransitionTimingFunction);
     transition-duration: var(--#{$button}--m-favorite__icon--TransitionDuration);
     transition-property: color;
@@ -651,7 +704,11 @@
   // Favorite button when favorited
   &.pf-m-favorited {
     --#{$button}__icon--Color: var(--#{$button}--m-favorited__icon--Color);
+    --#{$button}--m-plain--m-no-padding__icon--Color: var(--#{$button}--m-favorited__icon--Color);
     --#{$button}--hover__icon--Color: var(--#{$button}--m-favorited--hover__icon--Color);
+    --#{$button}--m-plain--m-no-padding--hover__icon--Color: var(--#{$button}--m-favorited--hover__icon--Color);
+    --#{$button}__icon--favorite--Opacity: var(--#{$button}--m-favorited__icon--favorite--Opacity);
+    --#{$button}__icon--favorited--Opacity: var(--#{$button}--m-favorited__icon--favorited--Opacity);
   }
 
   // Favorite button will run an animation when favorited
@@ -661,20 +718,56 @@
     animation-timing-function: var(--#{$button}--m-favorited__icon--AnimationTimingFunction);
   }
 
+  &.pf-m-settings {
+    --#{$button}__icon--TransitionProperty: rotate;
+    --#{$button}__icon--TransitionDuration: var(--#{$button}--m-settings__icon--TransitionDuration);
+    --#{$button}__icon--TransitionTimingFunction: var(--#{$button}--m-settings__icon--TransitionTimingFunction);
+    --#{$button}--hover__icon--TransitionProperty: rotate;
+    --#{$button}--hover__icon--TransitionDuration: var(--#{$button}--m-settings--hover__icon--TransitionDuration);
+    --#{$button}--hover__icon--TransitionTimingFunction: var(--#{$button}--m-settings--hover__icon--TransitionTimingFunction);
+    --#{$button}--hover__icon--Rotate: var(--#{$button}--m-settings--hover__icon--Rotate);
+  }
+
+  &.pf-m-hamburger {
+    --#{$button}__icon--TransitionDelay: var(--#{$button}--hamburger-icon--TransitionDuration);
+    --#{$button}__icon--TransitionDuration: 0s;
+    --#{$button}__icon--TransitionProperty: scale;
+    --#{$button}--hover__icon--TransitionDelay: var(--#{$button}--hamburger-icon--TransitionDuration);
+    --#{$button}--hover__icon--TransitionDuration: 0s;
+    --#{$button}--hover__icon--TransitionProperty: scale;
+
+    &.pf-m-expand {
+      @include pf-v6-hamburger;
+    }
+
+    &.pf-m-collapse {
+      @include pf-v6-hamburger($collapse: true);
+    }
+  }
+
   &:hover,
   &:focus {
     --#{$button}--Color: var(--#{$button}--hover--Color);
     --#{$button}--BackgroundColor: var(--#{$button}--hover--BackgroundColor);
     --#{$button}--BorderColor: var(--#{$button}--hover--BorderColor);
     --#{$button}--BorderWidth: var(--#{$button}--hover--BorderWidth);
+    --#{$button}--ScaleX: var(--#{$button}--hover--ScaleX);
+    --#{$button}--ScaleY: var(--#{$button}--hover--ScaleY);
     --#{$button}--m-plain--m-no-padding__icon--Color: var(--#{$button}--m-plain--m-no-padding--hover__icon--Color);
     --#{$button}__icon--Color: var(--#{$button}--hover__icon--Color);
+    --#{$button}__icon--TransitionTimingFunction: var(--#{$button}--hover__icon--TransitionTimingFunction);
+    --#{$button}__icon--TransitionDuration: var(--#{$button}--hover__icon--TransitionDuration);
+    --#{$button}__icon--TransitionProperty: var(--#{$button}--hover__icon--TransitionProperty);
+    --#{$button}__icon--Rotate: var(--#{$button}--hover__icon--Rotate);
+    --#{$button}__icon--ScaleX: var(--#{$button}--hover__icon--ScaleX);
+    --#{$button}__icon--ScaleY: var(--#{$button}--hover__icon--ScaleY);
 
     text-decoration-line: var(--#{$button}--hover--TextDecorationLine);
     text-decoration-style: var(--#{$button}--hover--TextDecorationStyle);
     text-decoration-color: var(--#{$button}--hover--TextDecorationColor);
   }
 
+  &:active,
   &.pf-m-clicked {
     --#{$button}--Color: var(--#{$button}--m-clicked--Color);
     --#{$button}--BackgroundColor: var(--#{$button}--m-clicked--BackgroundColor);
@@ -683,6 +776,11 @@
     --#{$button}__icon--Color: var(--#{$button}--m-clicked__icon--Color);
   }
 
+  &:active {
+    background-size: 100% 100%; // apply the background surface for ripple
+    transition-duration: 0s; // transition immediately
+  }
+
   // Disabled buttons
   // These styles need to go after the button types because they need to override some of the type styling
   &:disabled,
@@ -695,7 +793,7 @@
   &.pf-m-aria-disabled {
     color: var(--#{$button}--disabled--Color);
     text-decoration-color: var(--#{$button}--disabled--TextDecorationColor);
-    background-color: var(--#{$button}--disabled--BackgroundColor);
+    background: var(--#{$button}--disabled--BackgroundColor);
 
     &::after {
       border-color: transparent;
@@ -747,6 +845,12 @@
   margin-inline-start: var(--#{$button}__icon--MarginInlineStart);
   margin-inline-end: var(--#{$button}__icon--MarginInlineEnd);
   color: var(--#{$button}__icon--Color);
+  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);
@@ -757,6 +861,21 @@
   }
 }
 
+.#{$button}__icon-favorite,
+.#{$button}__icon-favorited {
+  grid-area: 1 / 1 / 1 / 1;
+  transition-duration: var(--#{$button}__icon--favorite--TransitionDuration);
+  transition-property: opacity;
+}
+
+.#{$button}__icon-favorite {
+  opacity: var(--#{$button}__icon--favorite--Opacity);
+}
+
+.#{$button}__icon-favorited {
+  opacity: var(--#{$button}__icon--favorited--Opacity);
+}
+
 .#{$button}__progress {
   position: absolute;
   inset-block-start: var(--#{$button}__progress--InsetBlockStart);
@@ -770,11 +889,44 @@
   }
 }
 
+// enable inline link to have underline when used with truncate
+.#{$button}__text {
+  // stylelint-disable property-disallowed-list
+  text-decoration: inherit;
+  // stylelint-enable property-disallowed-list
+}
+
 .#{$button}__count {
   display: inline-flex;
   align-items: center;
 }
 
+.#{$button}--hamburger-icon {
+  path {
+    fill: none;
+    stroke: currentcolor;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+    transition: d var(--#{$button}--hamburger-icon--TransitionDuration) var(--#{$button}--hamburger-icon--TransitionTimingFunction);
+  }
+}
+
+.#{$button}--hamburger-icon--top {
+  d: var(--#{$button}--hamburger-icon--top--path);
+}
+
+.#{$button}--hamburger-icon--middle {
+  d: var(--#{$button}--hamburger-icon--middle--path);
+}
+
+.#{$button}--hamburger-icon--arrow {
+  d: var(--#{$button}--hamburger-icon--arrow--path);
+}
+
+.#{$button}--hamburger-icon--bottom {
+  d: var(--#{$button}--hamburger-icon--bottom--path);
+}
+
 @keyframes #{$button}-icon-notify {
   33% {
     transform: rotate(30deg);
@@ -787,6 +939,6 @@
 
 @keyframes #{$button}-icon-favorited {
   50% {
-    transform: scale(1.5);
+    scale: 1.5;
   }
 }

package/components/DataList/data-list.css

@@ -511,8 +511,8 @@
   --pf-v6-c-data-list--m-compact__item-content--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
   --pf-v6-c-data-list--m-compact__item-draggable-button--MarginBlockStart: calc(var(--pf-t--global--spacer--sm) * -1);
   --pf-v6-c-data-list--m-compact__item-draggable-button--MarginBlockEnd: calc(var(--pf-t--global--spacer--sm) * -1);
-  --pf-v6-c-data-list--m-compact__item-draggable-button--PaddingBlockStart: var(--pf-t--global--spacer--sm);
-  --pf-v6-c-data-list--m-compact__item-draggable-button--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-data-list--m-compact__item-draggable-button--PaddingBlockStart: var(--pf-t--global--spacer--xs);
+  --pf-v6-c-data-list--m-compact__item-draggable-button--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
   --pf-v6-c-data-list--m-compact__cell--m-icon--cell--PaddingBlockStart: var(--pf-t--global--spacer--sm);
 }
 @media screen and (min-width: 36rem) {

package/components/DataList/data-list.scss

@@ -140,8 +140,8 @@
   --#{$data-list}--m-compact__item-content--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
   --#{$data-list}--m-compact__item-draggable-button--MarginBlockStart: calc(var(--pf-t--global--spacer--sm) * -1);
   --#{$data-list}--m-compact__item-draggable-button--MarginBlockEnd: calc(var(--pf-t--global--spacer--sm) * -1);
-  --#{$data-list}--m-compact__item-draggable-button--PaddingBlockStart: var(--pf-t--global--spacer--sm);
-  --#{$data-list}--m-compact__item-draggable-button--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
+  --#{$data-list}--m-compact__item-draggable-button--PaddingBlockStart: var(--pf-t--global--spacer--xs);
+  --#{$data-list}--m-compact__item-draggable-button--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
   --#{$data-list}--m-compact__cell--m-icon--cell--PaddingBlockStart: var(--pf-t--global--spacer--sm);
 }
 

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

@@ -21,6 +21,17 @@
   --pf-v6-c-dual-list-selector__menu--MinHeight: 12.5rem;
   --pf-v6-c-dual-list-selector__menu--MaxHeight: 20rem;
   --pf-v6-c-dual-list-selector__menu--MarginBlockStart: var(--pf-t--global--spacer--md);
+  --pf-v6-c-dual-list-selector__list--TransitionDuration--expand--slide: 0s;
+  --pf-v6-c-dual-list-selector__list--TransitionDuration--expand--fade: var(--pf-t--global--motion--duration--fade--default);
+  --pf-v6-c-dual-list-selector__list--TransitionDuration--collapse--slide: 0s;
+  --pf-v6-c-dual-list-selector__list--TransitionDuration--collapse--fade: var(--pf-t--global--motion--duration--fade--short);
+  --pf-v6-c-dual-list-selector__list--TransitionDuration--slide: var(--pf-v6-c-dual-list-selector__list--TransitionDuration--collapse--slide);
+  --pf-v6-c-dual-list-selector__list--TransitionDuration--fade: var(--pf-v6-c-dual-list-selector__list--TransitionDuration--collapse--fade);
+  --pf-v6-c-dual-list-selector__list--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
+  --pf-v6-c-dual-list-selector__list--Opacity: 0;
+  --pf-v6-c-dual-list-selector--m-expanded__list--Opacity: 1;
+  --pf-v6-c-dual-list-selector__list--TranslateY: 0;
+  --pf-v6-c-dual-list-selector--m-expanded__list--TranslateY: 0;
   --pf-v6-c-dual-list-selector__list-item-row--FontSize: var(--pf-t--global--font--size--sm);
   --pf-v6-c-dual-list-selector__list-item-row--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
   --pf-v6-c-dual-list-selector__list-item-row--hover--BackgroundColor: var(--pf-t--global--background--color--primary--hover);
@@ -58,6 +69,13 @@
   --pf-v6-c-dual-list-selector__item-toggle-icon--MinWidth: var(--pf-v6-c-dual-list-selector__list-item-row--FontSize);
   --pf-v6-c-dual-list-selector__list-item--m-disabled__item-toggle-icon--Color: var(--pf-t--global--icon--color--disabled);
 }
+@media screen and (prefers-reduced-motion: no-preference) {
+  .pf-v6-c-dual-list-selector {
+    --pf-v6-c-dual-list-selector__list--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
+    --pf-v6-c-dual-list-selector__list--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
+    --pf-v6-c-dual-list-selector__list--TranslateY: -.5rem;
+  }
+}
 
 .pf-v6-c-dual-list-selector {
   display: grid;
@@ -153,9 +171,27 @@
 .pf-v6-c-dual-list-selector__list-item.pf-m-expandable {
   --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;
+  opacity: var(--pf-v6-c-dual-list-selector__list--Opacity);
+  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;
+  opacity: var(--pf-v6-c-dual-list-selector--m-expanded__list--Opacity);
+  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);
   --pf-v6-c-dual-list-selector__item-toggle-icon--Color: var(--pf-v6-c-dual-list-selector__list-item--m-disabled__item-toggle-icon--Color);

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

@@ -35,6 +35,25 @@ $pf-v6-c-dual-list-selector__item--MaxNesting: 10;
   --#{$dual-list-selector}__menu--MaxHeight: #{pf-size-prem(320px)};
   --#{$dual-list-selector}__menu--MarginBlockStart: var(--pf-t--global--spacer--md);
 
+  // List
+  --#{$dual-list-selector}__list--TransitionDuration--expand--slide: 0s;
+  --#{$dual-list-selector}__list--TransitionDuration--expand--fade: var(--pf-t--global--motion--duration--fade--default);
+  --#{$dual-list-selector}__list--TransitionDuration--collapse--slide: 0s;
+  --#{$dual-list-selector}__list--TransitionDuration--collapse--fade: var(--pf-t--global--motion--duration--fade--short);
+  --#{$dual-list-selector}__list--TransitionDuration--slide: var(--#{$dual-list-selector}__list--TransitionDuration--collapse--slide);
+  --#{$dual-list-selector}__list--TransitionDuration--fade: var(--#{$dual-list-selector}__list--TransitionDuration--collapse--fade);
+  --#{$dual-list-selector}__list--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
+  --#{$dual-list-selector}__list--Opacity: 0;
+  --#{$dual-list-selector}--m-expanded__list--Opacity: 1;
+  --#{$dual-list-selector}__list--TranslateY: 0;
+  --#{$dual-list-selector}--m-expanded__list--TranslateY: 0;
+
+  @media screen and (prefers-reduced-motion: no-preference) {
+    --#{$dual-list-selector}__list--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
+    --#{$dual-list-selector}__list--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
+    --#{$dual-list-selector}__list--TranslateY: -.5rem;
+  }
+
   // List item
   --#{$dual-list-selector}__list-item-row--FontSize: var(--pf-t--global--font--size--sm);
   --#{$dual-list-selector}__list-item-row--BackgroundColor:  var(--pf-t--global--background--color--action--plain--default);
@@ -199,10 +218,34 @@ $pf-v6-c-dual-list-selector__item--MaxNesting: 10;
 
   &.pf-m-expandable {
     --#{$dual-list-selector}__item--PaddingInlineStart: var(--#{$dual-list-selector}__item--m-expandable--PaddingInlineStart);
+
+    > .#{$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;
+        opacity: var(--#{$dual-list-selector}__list--Opacity);
+        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);
+      }
+    }
   }
 
   &.pf-m-expanded {
     --#{$dual-list-selector}__item-toggle-icon--Rotate: var(--#{$dual-list-selector}__list-item--m-expanded__item-toggle-icon--Rotate);
+
+    > .#{$dual-list-selector}__list {
+      .#{$dual-list-selector}.pf-m-animate-expand & {
+        max-height: 99999px;
+        visibility: revert;
+        opacity: var(--#{$dual-list-selector}--m-expanded__list--Opacity);
+        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);
+      }
+    }
   }
 
   &.pf-m-disabled {

package/components/ExpandableSection/expandable-section.css

@@ -9,6 +9,20 @@
   --pf-v6-c-expandable-section__toggle-icon--m-expand-top--Rotate: 0;
   --pf-v6-c-expandable-section--m-expanded__toggle-icon--Rotate: 90deg;
   --pf-v6-c-expandable-section--m-expanded__toggle-icon--m-expand-top--Rotate: -90deg;
+  --pf-v6-c-expandable-section__content--TransitionDuration--collapse--slide: 0s;
+  --pf-v6-c-expandable-section__content--TransitionDuration--collapse--fade: var(--pf-t--global--motion--duration--fade--short);
+  --pf-v6-c-expandable-section__content--TransitionDuration--expand--slide: 0s;
+  --pf-v6-c-expandable-section__content--TransitionDuration--expand--fade: var(--pf-t--global--motion--duration--fade--default);
+  --pf-v6-c-expandable-section__content--TransitionDuration--slide: var(--pf-v6-c-expandable-section__content--TransitionDuration--collapse--slide);
+  --pf-v6-c-expandable-section__content--TransitionDuration--fade: var(--pf-v6-c-expandable-section__content--TransitionDuration--collapse--fade);
+  --pf-v6-c-expandable-section__content--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
+  --pf-v6-c-expandable-section__content--TransitionDelay--hide: var(--pf-v6-c-expandable-section__content--TransitionDuration--fade);
+  --pf-v6-c-expandable-section__content--Opacity: 0;
+  --pf-v6-c-expandable-section__content--TranslateY: 0;
+  --pf-v6-c-expandable-section--m-expand-top__content--TranslateY: 0;
+  --pf-v6-c-expandable-section--m-expand-bottom__content--TranslateY: 0;
+  --pf-v6-c-expandable-section--m-expanded__content--Opacity: 1;
+  --pf-v6-c-expandable-section--m-expanded__content--TranslateY: 0;
   --pf-v6-c-expandable-section__content--MaxWidth: auto;
   --pf-v6-c-expandable-section--m-limit-width__content--MaxWidth: 46.875rem;
   --pf-v6-c-expandable-section--m-display-lg--PaddingBlockStart: var(--pf-t--global--spacer--sm);
@@ -20,20 +34,55 @@
   --pf-v6-c-expandable-section--m-display-lg--BorderWidth: var(--pf-t--global--border--width--box--default);
   --pf-v6-c-expandable-section--m-display-lg--BorderColor: var(--pf-t--global--border--color--default);
   --pf-v6-c-expandable-section--m-display-lg--BorderRadius: var(--pf-t--global--border--radius--medium);
+  --pf-v6-c-expandable-section--m-display-lg--TransitionDelay: var(--pf-v6-c-expandable-section__content--TransitionDuration--collapse--fade);
   --pf-v6-c-expandable-section--m-indented__content--PaddingInlineStart: calc(var(--pf-t--global--spacer--action--horizontal--plain--default) + var(--pf-t--global--spacer--gap--text-to-element--default) + var(--pf-v6-c-expandable-section__toggle-icon--MinWidth));
   --pf-v6-c-expandable-section--m-truncate__content--LineClamp: 3;
   --pf-v6-c-expandable-section--m-truncate--Gap: var(--pf-t--global--spacer--xs);
 }
+@media screen and (prefers-reduced-motion: no-preference) {
+  .pf-v6-c-expandable-section {
+    --pf-v6-c-expandable-section__content--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
+    --pf-v6-c-expandable-section__content--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
+    --pf-v6-c-expandable-section__content--TranslateY: -.5rem;
+    --pf-v6-c-expandable-section--m-expand-top__content--TranslateY: .5rem;
+    --pf-v6-c-expandable-section--m-expand-bottom__content--TranslateY: -.5rem;
+  }
+}
 
 .pf-v6-c-expandable-section {
   display: flex;
   flex-direction: column;
-  gap: var(--pf-v6-c-expandable-section--Gap);
+  gap: 0;
+  transition-delay: var(--pf-v6-c-expandable-section__content--TransitionDelay--hide);
+  transition-duration: 0s;
+  transition-property: gap, padding-block-end;
 }
 .pf-v6-c-expandable-section.pf-m-expanded {
   --pf-v6-c-expandable-section__toggle-icon--Rotate: var(--pf-v6-c-expandable-section--m-expanded__toggle-icon--Rotate);
   --pf-v6-c-expandable-section__toggle-icon--m-expand-top--Rotate: var(--pf-v6-c-expandable-section--m-expanded__toggle-icon--m-expand-top--Rotate);
   --pf-v6-c-expandable-section--m-display-lg--PaddingBlockEnd: var(--pf-v6-c-expandable-section--m-display-lg--m-expanded--PaddingBlockEnd);
+  --pf-v6-c-expandable-section__content--TransitionDuration--slide: var(--pf-v6-c-expandable-section__content--TransitionDuration--expand--slide);
+  --pf-v6-c-expandable-section__content--TransitionDuration--fade: var(--pf-v6-c-expandable-section__content--TransitionDuration--expand--fade);
+  --pf-v6-c-expandable-section__content--Opacity: var(--pf-v6-c-expandable-section--m-expanded__content--Opacity);
+  --pf-v6-c-expandable-section__content--TranslateY: var(--pf-v6-c-expandable-section--m-expanded__content--TranslateY);
+  --pf-v6-c-expandable-section__content--Visibility: auto;
+  --pf-v6-c-expandable-section__content--MaxHeight: 99999px;
+  --pf-v6-c-expandable-section__content--TransitionDelay--hide: 0s;
+  gap: var(--pf-v6-c-expandable-section--Gap);
+}
+.pf-v6-c-expandable-section.pf-m-expand-top {
+  --pf-v6-c-expandable-section__toggle-icon--Rotate: var(--pf-v6-c-expandable-section__toggle-icon--m-expand-top--Rotate);
+}
+.pf-v6-c-expandable-section:has(.pf-v6-c-expandable-section__content:only-child):not(.pf-m-expand-top, .pf-m-expand-bottom) {
+  --pf-v6-c-expandable-section__content--TranslateY: 0;
+  --pf-v6-c-expandable-section__content--TransitionDuration--expand--fade: 0s;
+  --pf-v6-c-expandable-section__content--TransitionDuration--collapse--fade: 0s;
+}
+.pf-v6-c-expandable-section:has(.pf-v6-c-expandable-section__content:only-child).pf-m-expand-top:not(.pf-m-expanded) {
+  --pf-v6-c-expandable-section__content--TranslateY: var(--pf-v6-c-expandable-section--m-expand-top__content--TranslateY);
+}
+.pf-v6-c-expandable-section:has(.pf-v6-c-expandable-section__content:only-child).pf-m-expand-bottom:not(.pf-m-expanded) {
+  --pf-v6-c-expandable-section__content--TranslateY: var(--pf-v6-c-expandable-section--m-expand-bottom__content--TranslateY);
 }
 .pf-v6-c-expandable-section.pf-m-limit-width {
   --pf-v6-c-expandable-section__content--MaxWidth: var(--pf-v6-c-expandable-section--m-limit-width__content--MaxWidth);
@@ -79,4 +128,17 @@
   max-width: var(--pf-v6-c-expandable-section__content--MaxWidth);
   padding-block-end: var(--pf-v6-c-expandable-section__content--PaddingBlockEnd, 0);
   padding-inline-start: var(--pf-v6-c-expandable-section__content--PaddingInlineStart, 0);
+}
+.pf-v6-c-expandable-section__content:where([hidden]) {
+  display: revert;
+}
+.pf-v6-c-expandable-section:where(:not(.pf-m-truncate)) .pf-v6-c-expandable-section__content {
+  max-height: var(--pf-v6-c-expandable-section__content--MaxHeight, 0);
+  visibility: var(--pf-v6-c-expandable-section__content--Visibility, hidden);
+  opacity: var(--pf-v6-c-expandable-section__content--Opacity);
+  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);
 }