@patternfly/patternfly 6.3.0-prerelease.27 → 6.3.0-prerelease.29

package/components/Accordion/accordion.css

@@ -202,7 +202,7 @@
   overflow-y: auto;
 }
 .pf-v6-c-accordion__item.pf-m-expanded .pf-v6-c-accordion__expandable-content {
-  max-height: 9999px;
+  max-height: 99999px;
   margin-block-end: var(--pf-v6-c-accordion__expandable-content--MarginBlockEnd);
   visibility: revert;
   transition-delay: 0s;

package/components/Accordion/accordion.scss

@@ -232,7 +232,7 @@
   }
 
   .#{$accordion}__item.pf-m-expanded & {
-    max-height: 9999px;
+    max-height: 99999px;
     margin-block-end: var(--#{$accordion}__expandable-content--MarginBlockEnd);
     visibility: revert;
     transition-delay: 0s;

package/components/Button/button.css

@@ -23,12 +23,16 @@
   --pf-v6-c-button--TransitionDuration: var(--pf-t--global--motion--duration--fade--default);
   --pf-v6-c-button--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--accelerate);
   --pf-v6-c-button--TransitionProperty: color, background, border-width, border-color;
+  --pf-v6-c-button--ScaleX: 1;
+  --pf-v6-c-button--ScaleY: 1;
   --pf-v6-c-button--hover--BackgroundColor: transparent;
   --pf-v6-c-button--hover--BorderColor: transparent;
   --pf-v6-c-button--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
   --pf-v6-c-button--hover--TextDecorationLine: none;
   --pf-v6-c-button--hover--TextDecorationStyle: none;
   --pf-v6-c-button--hover--TextDecorationColor: currentcolor;
+  --pf-v6-c-button--hover--ScaleX: 1;
+  --pf-v6-c-button--hover--ScaleY: 1;
   --pf-v6-c-button--m-clicked--BackgroundColor: transparent;
   --pf-v6-c-button--m-clicked--BorderColor: transparent;
   --pf-v6-c-button--m-clicked--BorderWidth: var(--pf-t--global--border--width--action--clicked);
@@ -243,11 +247,14 @@
   --pf-v6-c-button__icon--TransitionDuration: 0s;
   --pf-v6-c-button__icon--TransitionProperty: none;
   --pf-v6-c-button__icon--Rotate: 0deg;
-  --pf-v6-c-button__icon--Scale: 1;
   --pf-v6-c-button--hover__icon--TransitionTimingFunction: auto;
   --pf-v6-c-button--hover__icon--TransitionDuration: 0s;
   --pf-v6-c-button--hover__icon--TransitionProperty: none;
   --pf-v6-c-button--hover__icon--Rotate: 0deg;
+  --pf-v6-c-button__icon--ScaleX: 1;
+  --pf-v6-c-button__icon--ScaleY: 1;
+  --pf-v6-c-button--hover__icon--ScaleX: 1;
+  --pf-v6-c-button--hover__icon--ScaleY: 1;
   --pf-v6-c-button--m-favorite__icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
   --pf-v6-c-button--m-favorite__icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
   --pf-v6-c-button--m-favorited__icon--Color: var(--pf-t--global--color--favorite--default);
@@ -294,7 +301,7 @@
   --pf-v6-c-button--hamburger-icon--top--collapse--path: path("M5,1 L9,1");
   --pf-v6-c-button--hamburger-icon--arrow--collapse--path: path("M3,7 L1,5 L3,3");
   --pf-v6-c-button--hamburger-icon--bottom--collapse--path: path("M9,9 L5,9");
-  --pf-v6-c-button--m-hamburger__icon--m-expand--Scale: -1;
+  --pf-v6-c-button--m-hamburger__icon--m-expand--ScaleX: -1;
 }
 
 .pf-v6-c-button {
@@ -330,7 +337,7 @@
   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--Scale, revert);
+  scale: var(--pf-v6-c-button--ScaleX) var(--pf-v6-c-button--ScaleY);
 }
 .pf-v6-c-button::after {
   position: absolute;
@@ -633,30 +640,34 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
   --pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
   --pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--collapse--path);
   --pf-v6-c-button__icon--TransitionDelay: 0s;
-  --pf-v6-c-button__icon--Scale: var(--pf-v6-c-button--m-hamburger__icon--m-expand--Scale);
+  --pf-v6-c-button__icon--ScaleX: var(--pf-v6-c-button--m-hamburger__icon--m-expand--ScaleX);
   --pf-v6-c-button--hover__icon--TransitionDelay: 0s;
-  --pf-v6-c-button--hover__icon--Scale: var(--pf-v6-c-button--m-hamburger__icon--m-expand--Scale);
+  --pf-v6-c-button--hover__icon--ScaleX: var(--pf-v6-c-button--m-hamburger__icon--m-expand--ScaleX);
 }
 .pf-v6-c-button.pf-m-hamburger.pf-m-collapse {
   --pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--collapse--path);
   --pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
   --pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--collapse--path);
   --pf-v6-c-button__icon--TransitionDelay: 0s;
-  --pf-v6-c-button__icon--Scale: 1;
+  --pf-v6-c-button__icon--ScaleX: 1;
   --pf-v6-c-button--hover__icon--TransitionDelay: 0s;
-  --pf-v6-c-button--hover__icon--Scale: 1;
+  --pf-v6-c-button--hover__icon--ScaleX: 1;
 }
 .pf-v6-c-button:hover, .pf-v6-c-button:focus {
   --pf-v6-c-button--Color: var(--pf-v6-c-button--hover--Color);
   --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--hover--BackgroundColor);
   --pf-v6-c-button--BorderColor: var(--pf-v6-c-button--hover--BorderColor);
   --pf-v6-c-button--BorderWidth: var(--pf-v6-c-button--hover--BorderWidth);
+  --pf-v6-c-button--ScaleX: var(--pf-v6-c-button--hover--ScaleX);
+  --pf-v6-c-button--ScaleY: var(--pf-v6-c-button--hover--ScaleY);
   --pf-v6-c-button--m-plain--m-no-padding__icon--Color: var(--pf-v6-c-button--m-plain--m-no-padding--hover__icon--Color);
   --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--hover__icon--Color);
   --pf-v6-c-button__icon--TransitionTimingFunction: var(--pf-v6-c-button--hover__icon--TransitionTimingFunction);
   --pf-v6-c-button__icon--TransitionDuration: var(--pf-v6-c-button--hover__icon--TransitionDuration);
   --pf-v6-c-button__icon--TransitionProperty: var(--pf-v6-c-button--hover__icon--TransitionProperty);
   --pf-v6-c-button__icon--Rotate: var(--pf-v6-c-button--hover__icon--Rotate);
+  --pf-v6-c-button__icon--ScaleX: var(--pf-v6-c-button--hover__icon--ScaleX);
+  --pf-v6-c-button__icon--ScaleY: var(--pf-v6-c-button--hover__icon--ScaleY);
   text-decoration-line: var(--pf-v6-c-button--hover--TextDecorationLine);
   text-decoration-style: var(--pf-v6-c-button--hover--TextDecorationStyle);
   text-decoration-color: var(--pf-v6-c-button--hover--TextDecorationColor);
@@ -724,7 +735,7 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
   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--Scale);
+  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);
@@ -803,6 +814,6 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
 }
 @keyframes pf-v6-c-button-icon-favorited {
   50% {
-    transform: scale(1.5);
+    scale: 1.5;
   }
 }

package/components/Button/button.scss

@@ -25,6 +25,8 @@
   --#{$button}--TransitionDuration: var(--pf-t--global--motion--duration--fade--default);
   --#{$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;
@@ -33,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;
@@ -287,11 +291,14 @@
   --#{$button}__icon--TransitionDuration: 0s;
   --#{$button}__icon--TransitionProperty: none;
   --#{$button}__icon--Rotate: 0deg;
-  --#{$button}__icon--Scale: 1;
   --#{$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);
@@ -350,7 +357,7 @@
   --#{$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--Scale: -1;
+  --#{$button}--m-hamburger__icon--m-expand--ScaleX: -1;
 }
 
 .#{$button} {
@@ -388,7 +395,7 @@
   transition-timing-function: var(--#{$button}--TransitionTimingFunction);
   transition-duration: var(--#{$button}--TransitionDuration);
   transition-property: var(--#{$button}--TransitionProperty);
-  scale: var(--#{$button}--Scale, revert);
+  scale: var(--#{$button}--ScaleX) var(--#{$button}--ScaleY);
 
   &::after {
     position: absolute;
@@ -744,12 +751,16 @@
     --#{$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);
@@ -839,7 +850,7 @@
   transition-duration: var(--#{$button}__icon--TransitionDuration);
   transition-property: var(--#{$button}__icon--TransitionProperty);
   rotate: var(--#{$button}__icon--Rotate);
-  scale: var(--#{$button}__icon--Scale);
+  scale: var(--#{$button}__icon--ScaleX) var(--#{$button}__icon--ScaleY);
 
   &.pf-m-start {
     --#{$button}__icon--MarginInlineEnd: var(--#{$button}__icon--m-start--MarginInlineEnd);
@@ -928,6 +939,6 @@
 
 @keyframes #{$button}-icon-favorited {
   50% {
-    transform: scale(1.5);
+    scale: 1.5;
   }
 }

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

@@ -185,7 +185,7 @@
   --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: 9999px;
+  max-height: 99999px;
   visibility: revert;
   opacity: var(--pf-v6-c-dual-list-selector--m-expanded__list--Opacity);
   transition-delay: 0s;

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

@@ -238,7 +238,7 @@ $pf-v6-c-dual-list-selector__item--MaxNesting: 10;
 
     > .#{$dual-list-selector}__list {
       .#{$dual-list-selector}.pf-m-animate-expand & {
-        max-height: 9999px;
+        max-height: 99999px;
         visibility: revert;
         opacity: var(--#{$dual-list-selector}--m-expanded__list--Opacity);
         transition-delay: 0s;

package/components/ExpandableSection/expandable-section.css

@@ -62,7 +62,7 @@
   --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: 9999px;
+  --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);
 }

package/components/ExpandableSection/expandable-section.scss

@@ -75,7 +75,7 @@
     --#{$expandable-section}__content--Opacity: var(--#{$expandable-section}--m-expanded__content--Opacity);
     --#{$expandable-section}__content--TranslateY: var(--#{$expandable-section}--m-expanded__content--TranslateY);
     --#{$expandable-section}__content--Visibility: auto;
-    --#{$expandable-section}__content--MaxHeight: 9999px;
+    --#{$expandable-section}__content--MaxHeight: 99999px;
     --#{$expandable-section}__content--TransitionDelay--hide: 0s;
 
     gap: var(--pf-v6-c-expandable-section--Gap);

package/components/Form/form.css

@@ -448,7 +448,7 @@
   --pf-v6-c-form__field-group-toggle-icon--Rotate: var(--pf-v6-c-form__field-group--m-expanded__toggle-icon--Rotate);
 }
 .pf-v6-c-form__field-group.pf-m-expanded.pf-m-expandable > .pf-v6-c-form__field-group-body {
-  max-height: 9999px;
+  max-height: 99999px;
   padding-block-start: var(--pf-v6-c-form__field-group-body--PaddingBlockStart);
   padding-block-end: var(--pf-v6-c-form__field-group-body--PaddingBlockEnd);
   visibility: visible;

package/components/Form/form.scss

@@ -405,7 +405,7 @@ $pf-v6-c-form--m-horizontal--breakpoint-map: build-breakpoint-map("sm", "md", "l
     }
 
     &.pf-m-expandable > .#{$form}__field-group-body { // TODO - remove .pf-m-expandable in a breaking change, it shouldn't be needed. Only needed now so that these styles are an opt-in behind .pf-m-expandable
-      max-height: 9999px;
+      max-height: 99999px;
       padding-block-start: var(--#{$form}__field-group-body--PaddingBlockStart);
       padding-block-end: var(--#{$form}__field-group-body--PaddingBlockEnd);
       visibility: visible;

package/components/Nav/nav.css

@@ -164,7 +164,7 @@
 
 .pf-v6-c-nav__subnav {
   --pf-v6-c-nav__list--RowGap: var(--pf-v6-c-nav__subnav--RowGap);
-  max-height: 9999px;
+  max-height: 99999px;
   padding-block-start: var(--pf-v6-c-nav__subnav--PaddingBlockStart);
   padding-block-end: var(--pf-v6-c-nav__subnav--PaddingBlockEnd);
   padding-inline-start: var(--pf-v6-c-nav__subnav--PaddingInlineStart);

package/components/Nav/nav.scss

@@ -209,7 +209,7 @@
 .#{$nav}__subnav {
   --#{$nav}__list--RowGap: var(--#{$nav}__subnav--RowGap); // this value is passed to --#{$nav}__item--RowGap--row-offset and updates clickable area based on value passed
 
-  max-height: 9999px;
+  max-height: 99999px;
   padding-block-start: var(--#{$nav}__subnav--PaddingBlockStart);
   padding-block-end: var(--#{$nav}__subnav--PaddingBlockEnd);
   padding-inline-start: var(--#{$nav}__subnav--PaddingInlineStart); // indent nested lists

package/components/Page/page.css

@@ -116,18 +116,18 @@
   --pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
   --pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--collapse--path);
   --pf-v6-c-button__icon--TransitionDelay: 0s;
-  --pf-v6-c-button__icon--Scale: var(--pf-v6-c-button--m-hamburger__icon--m-expand--Scale);
+  --pf-v6-c-button__icon--ScaleX: var(--pf-v6-c-button--m-hamburger__icon--m-expand--ScaleX);
   --pf-v6-c-button--hover__icon--TransitionDelay: 0s;
-  --pf-v6-c-button--hover__icon--Scale: var(--pf-v6-c-button--m-hamburger__icon--m-expand--Scale);
+  --pf-v6-c-button--hover__icon--ScaleX: var(--pf-v6-c-button--m-hamburger__icon--m-expand--ScaleX);
 }
 .pf-v6-c-page:where(:has(> .pf-v6-c-page__sidebar.pf-m-expanded)) > .pf-v6-c-masthead .pf-v6-c-masthead__toggle :is(.pf-v6-c-button.pf-m-hamburger, .pf-v6-c-button.pf-m-hamburger:hover, .pf-v6-c-button.pf-m-hamburger:focus-visible) {
   --pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--collapse--path);
   --pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
   --pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--collapse--path);
   --pf-v6-c-button__icon--TransitionDelay: 0s;
-  --pf-v6-c-button__icon--Scale: 1;
+  --pf-v6-c-button__icon--ScaleX: 1;
   --pf-v6-c-button--hover__icon--TransitionDelay: 0s;
-  --pf-v6-c-button--hover__icon--Scale: 1;
+  --pf-v6-c-button--hover__icon--ScaleX: 1;
 }
 @media (min-width: 75rem) {
   .pf-v6-c-page > .pf-v6-c-masthead .pf-v6-c-masthead__toggle .pf-v6-c-button.pf-m-hamburger, .pf-v6-c-page:where(:has(> .pf-v6-c-page__sidebar.pf-m-expanded)) > .pf-v6-c-masthead .pf-v6-c-masthead__toggle :is(.pf-v6-c-button.pf-m-hamburger, .pf-v6-c-button.pf-m-hamburger:hover, .pf-v6-c-button.pf-m-hamburger:focus-visible) {
@@ -142,18 +142,18 @@
     --pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
     --pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--collapse--path);
     --pf-v6-c-button__icon--TransitionDelay: 0s;
-    --pf-v6-c-button__icon--Scale: 1;
+    --pf-v6-c-button__icon--ScaleX: 1;
     --pf-v6-c-button--hover__icon--TransitionDelay: 0s;
-    --pf-v6-c-button--hover__icon--Scale: 1;
+    --pf-v6-c-button--hover__icon--ScaleX: 1;
   }
   .pf-v6-c-page:where(:has(> .pf-v6-c-page__sidebar.pf-m-collapsed)) > .pf-v6-c-masthead .pf-v6-c-masthead__toggle .pf-v6-c-button.pf-m-hamburger:is(:hover, :focus-visible) {
     --pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--collapse--path);
     --pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
     --pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--collapse--path);
     --pf-v6-c-button__icon--TransitionDelay: 0s;
-    --pf-v6-c-button__icon--Scale: var(--pf-v6-c-button--m-hamburger__icon--m-expand--Scale);
+    --pf-v6-c-button__icon--ScaleX: var(--pf-v6-c-button--m-hamburger__icon--m-expand--ScaleX);
     --pf-v6-c-button--hover__icon--TransitionDelay: 0s;
-    --pf-v6-c-button--hover__icon--Scale: var(--pf-v6-c-button--m-hamburger__icon--m-expand--Scale);
+    --pf-v6-c-button--hover__icon--ScaleX: var(--pf-v6-c-button--m-hamburger__icon--m-expand--ScaleX);
   }
 }
 

package/components/Table/table.css

@@ -78,8 +78,6 @@
   --pf-v6-c-table__expandable-row--TransitionDuration--expand--fade: var(--pf-t--global--motion--duration--fade--default);
   --pf-v6-c-table__expandable-row--TransitionDuration--collapse--slide: 0s;
   --pf-v6-c-table__expandable-row--TransitionDuration--collapse--fade: var(--pf-t--global--motion--duration--fade--short);
-  --pf-v6-c-table__expandable-row--TransitionDuration--slide: var(--pf-v6-c-table__expandable-row--TransitionDuration--collapse--slide);
-  --pf-v6-c-table__expandable-row--TransitionDuration--fade: var(--pf-v6-c-table__expandable-row--TransitionDuration--collapse--fade);
   --pf-v6-c-table__expandable-row--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
   --pf-v6-c-table__expandable-row--Opacity: 0;
   --pf-v6-c-table__tbody--m-expanded__expandable-row--Opacity: 1;
@@ -416,6 +414,39 @@
 .pf-v6-c-table .pf-v6-c-button .pf-v6-c-table__sort-indicator {
   --pf-v6-c-table__sort-indicator--MarginInlineStart: 0;
 }
+.pf-v6-c-table.pf-m-animate-expand > .pf-v6-c-table__tbody > .pf-v6-c-table__expandable-row {
+  display: revert;
+  visibility: hidden;
+  opacity: var(--pf-v6-c-table__expandable-row--Opacity);
+  transition-delay: 0s, 0s, var(--pf-v6-c-table__expandable-row--TransitionDuration--collapse--fade);
+  transition-timing-function: var(--pf-v6-c-table__expandable-row--TransitionTimingFunction);
+  transition-duration: var(--pf-v6-c-table__expandable-row--TransitionDuration--collapse--fade), var(--pf-v6-c-table__expandable-row--TransitionDuration--collapse--slide), 0s;
+  transition-property: opacity, translate, visibility;
+  translate: 0 var(--pf-v6-c-table__expandable-row--TranslateY);
+}
+.pf-v6-c-table.pf-m-animate-expand > .pf-v6-c-table__tbody > .pf-v6-c-table__expandable-row[hidden] {
+  display: revert;
+}
+.pf-v6-c-table.pf-m-animate-expand > .pf-v6-c-table__tbody > .pf-v6-c-table__expandable-row.pf-m-expanded {
+  visibility: visible;
+  opacity: var(--pf-v6-c-table__tbody--m-expanded__expandable-row--Opacity);
+  transition-delay: 0s;
+  transition-duration: var(--pf-v6-c-table__expandable-row--TransitionDuration--expand--fade), var(--pf-v6-c-table__expandable-row--TransitionDuration--expand--slide), 0s, 0s;
+  translate: 0 var(--pf-v6-c-table__tbody--m-expanded__expandable-row--TranslateY);
+}
+.pf-v6-c-table.pf-m-animate-expand > .pf-v6-c-table__tbody > .pf-v6-c-table__expandable-row.pf-m-expanded > :is(.pf-v6-c-table__td, .pf-v6-c-table__th) > .pf-v6-c-table__expandable-row-content {
+  max-height: 99999px;
+}
+.pf-v6-c-table.pf-m-animate-expand > .pf-v6-c-table__tbody > .pf-v6-c-table__expandable-row:not(.pf-m-expanded) > :is(.pf-v6-c-table__td, .pf-v6-c-table__th),
+.pf-v6-c-table.pf-m-animate-expand > .pf-v6-c-table__tbody > .pf-v6-c-table__expandable-row:not(.pf-m-expanded) > :is(.pf-v6-c-table__td, .pf-v6-c-table__th) > .pf-v6-c-table__expandable-row-content {
+  padding: 0;
+  overflow: hidden;
+  transition-delay: var(--pf-v6-c-table__expandable-row--TransitionDuration--collapse--fade);
+  transition-property: padding, max-height, overflow;
+}
+.pf-v6-c-table.pf-m-animate-expand > .pf-v6-c-table__tbody > .pf-v6-c-table__expandable-row:not(.pf-m-expanded) > :is(.pf-v6-c-table__td, .pf-v6-c-table__th) > .pf-v6-c-table__expandable-row-content {
+  max-height: 0;
+}
 
 [class*=pf-v6-c-table].pf-m-truncate {
   --pf-v6-c-table--cell--MinWidth: var(--pf-v6-c-table--m-truncate--cell--MinWidth);
@@ -720,28 +751,26 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
 .pf-v6-c-table__expandable-row {
   position: relative;
   border-block-end: 0 solid transparent;
-  opacity: var(--pf-v6-c-table__expandable-row--Opacity);
-  transition-timing-function: var(--pf-v6-c-table__expandable-row--TransitionTimingFunction);
-  transition-duration: var(--pf-v6-c-table__expandable-row--TransitionDuration--fade), var(--pf-v6-c-table__expandable-row--TransitionDuration--slide), var(--pf-v6-c-table__expandable-row--TransitionDuration--fade);
-  transition-property: opacity, translate, display;
-  transition-behavior: allow-discrete;
-  translate: 0 var(--pf-v6-c-table__expandable-row--TranslateY);
 }
-:not(.pf-v6-c-table__control-row) ~ .pf-v6-c-table__expandable-row > .pf-v6-c-table__th,
-:not(.pf-v6-c-table__control-row) ~ .pf-v6-c-table__expandable-row > .pf-v6-c-table__td {
+.pf-v6-c-table__expandable-row > .pf-v6-c-table__th,
+.pf-v6-c-table__expandable-row > .pf-v6-c-table__td {
   padding-block-start: 0;
 }
-
-.pf-v6-c-table__expandable-row td:where(.pf-v6-c-table__td).pf-m-no-padding,
-.pf-v6-c-table__expandable-row th:where(.pf-v6-c-table__th).pf-m-no-padding {
+.pf-v6-c-table__control-row ~ .pf-v6-c-table__expandable-row > .pf-v6-c-table__th,
+.pf-v6-c-table__control-row ~ .pf-v6-c-table__expandable-row > .pf-v6-c-table__td {
+  padding-block-start: var(--pf-v6-c-table--cell--PaddingBlockStart);
+}
+.pf-v6-c-table__expandable-row .pf-v6-c-table__td.pf-m-no-padding,
+.pf-v6-c-table__expandable-row .pf-v6-c-table__th.pf-m-no-padding {
   padding-block-start: 0;
   padding-block-end: 0;
   padding-inline-start: 0;
   padding-inline-end: 0;
 }
-.pf-v6-c-table__expandable-row td:where(.pf-v6-c-table__td).pf-m-no-padding .pf-v6-c-table__expandable-row-content,
-.pf-v6-c-table__expandable-row th:where(.pf-v6-c-table__th).pf-m-no-padding .pf-v6-c-table__expandable-row-content {
+.pf-v6-c-table__expandable-row .pf-v6-c-table__td.pf-m-no-padding .pf-v6-c-table__expandable-row-content,
+.pf-v6-c-table__expandable-row .pf-v6-c-table__th.pf-m-no-padding .pf-v6-c-table__expandable-row-content {
   padding: 0;
+  border-radius: 0;
 }
 .pf-v6-c-table__expandable-row .pf-v6-c-table__expandable-row-content {
   padding-block-start: var(--pf-v6-c-table__expandable-row-content--PaddingBlockStart);
@@ -751,18 +780,12 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
   background-color: var(--pf-v6-c-table__expandable-row-content--BackgroundColor);
   border-radius: var(--pf-v6-c-table__expandable-row-content--BorderRadius);
 }
+.pf-v6-c-table__expandable-row .pf-v6-c-table__expandable-row-content.pf-m-no-background {
+  background-color: transparent;
+}
 .pf-v6-c-table__expandable-row.pf-m-expanded {
   border-block-end-color: var(--pf-v6-c-table__expandable-row--m-expanded--BorderBlockEndColor);
   border-block-end-width: var(--pf-v6-c-table--border-width--base);
-  opacity: var(--pf-v6-c-table__tbody--m-expanded__expandable-row--Opacity);
-  transition-duration: var(--pf-v6-c-table__expandable-row--TransitionDuration--expand--fade), var(--pf-v6-c-table__expandable-row--TransitionDuration--expand--slide), var(--pf-v6-c-table__expandable-row--TransitionDuration--expand--fade);
-  translate: 0 var(--pf-v6-c-table__tbody--m-expanded__expandable-row--TranslateY);
-}
-@starting-style {
-  .pf-v6-c-table__expandable-row.pf-m-expanded {
-    opacity: var(--pf-v6-c-table__expandable-row--Opacity);
-    translate: 0 var(--pf-v6-c-table__expandable-row--TranslateY);
-  }
 }
 .pf-v6-c-table__expandable-row:not(.pf-m-expanded) {
   display: none;
@@ -771,6 +794,10 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
   border-block-end: 0;
 }
 
+.pf-v6-c-table__tr:has(~ .pf-v6-c-table__expandable-row) {
+  border-block-end: 0;
+}
+
 .pf-v6-c-table.pf-m-compact {
   --pf-v6-c-table--cell--PaddingBlockStart: var(--pf-v6-c-table--m-compact--cell--PaddingBlockStart);
   --pf-v6-c-table--cell--PaddingBlockEnd: var(--pf-v6-c-table--m-compact--cell--PaddingBlockEnd);
@@ -826,7 +853,7 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
 }
 .pf-v6-c-table.pf-m-expandable .pf-v6-c-table__tbody.pf-m-expanded .pf-v6-c-table__control-row {
   background-color: var(--pf-v6-c-table__control-row--BackgroundColor);
-  border-block-end: var(--pf-v6-c-table__control-row--BorderBlockEndWidth) solid var(--pf-v6-c-table__control-row__tbody--BorderBlockEndColor);
+  border-block-end: 0;
 }
 
 .pf-v6-c-table__tr {

package/components/Table/table.scss

@@ -123,8 +123,6 @@
   --#{$table}__expandable-row--TransitionDuration--expand--fade: var(--pf-t--global--motion--duration--fade--default);
   --#{$table}__expandable-row--TransitionDuration--collapse--slide: 0s;
   --#{$table}__expandable-row--TransitionDuration--collapse--fade: var(--pf-t--global--motion--duration--fade--short);
-  --#{$table}__expandable-row--TransitionDuration--slide: var(--#{$table}__expandable-row--TransitionDuration--collapse--slide);
-  --#{$table}__expandable-row--TransitionDuration--fade: var(--#{$table}__expandable-row--TransitionDuration--collapse--fade);
   --#{$table}__expandable-row--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
   --#{$table}__expandable-row--Opacity: 0;
   --#{$table}__tbody--m-expanded__expandable-row--Opacity: 1;
@@ -581,6 +579,57 @@
   .#{$button} .#{$table}__sort-indicator {
     --#{$table}__sort-indicator--MarginInlineStart: 0;
   }
+
+  // stylelint-disable max-nesting-depth, selector-max-class
+  &.pf-m-animate-expand {
+    > .#{$table}__tbody {
+      > .#{$table}__expandable-row {
+        display: revert;
+        visibility: hidden;
+        opacity: var(--#{$table}__expandable-row--Opacity);
+        transition-delay: 0s, 0s, var(--#{$table}__expandable-row--TransitionDuration--collapse--fade);
+        transition-timing-function: var(--#{$table}__expandable-row--TransitionTimingFunction);
+        transition-duration: var(--#{$table}__expandable-row--TransitionDuration--collapse--fade), var(--#{$table}__expandable-row--TransitionDuration--collapse--slide), 0s;
+        transition-property: opacity, translate, visibility;
+        translate: 0 var(--#{$table}__expandable-row--TranslateY);
+
+        &[hidden] {
+          display: revert;
+        }
+
+        &.pf-m-expanded {
+          visibility: visible;
+          opacity: var(--#{$table}__tbody--m-expanded__expandable-row--Opacity);
+          transition-delay: 0s;
+          transition-duration: var(--#{$table}__expandable-row--TransitionDuration--expand--fade), var(--#{$table}__expandable-row--TransitionDuration--expand--slide), 0s, 0s;
+          translate: 0 var(--#{$table}__tbody--m-expanded__expandable-row--TranslateY);
+
+          > :is(.#{$table}__td, .#{$table}__th) {
+            > .#{$table}__expandable-row-content {
+              max-height: 99999px;
+            }
+          }
+        }
+
+        &:not(.pf-m-expanded) {
+          > :is(.#{$table}__td, .#{$table}__th) {
+            &,
+            > .#{$table}__expandable-row-content {
+              padding: 0;
+              overflow: hidden;
+              transition-delay: var(--#{$table}__expandable-row--TransitionDuration--collapse--fade);
+              transition-property: padding, max-height, overflow;
+            }
+
+            > .#{$table}__expandable-row-content {
+              max-height: 0;
+            }
+          }
+        }
+      }
+    }
+  }
+  // stylelint-enable max-nesting-depth, selector-max-class
 }
 
 // - Table truncate - Table wrap - Table nowrap - Table fit content - Table wrap - Table break word
@@ -972,22 +1021,23 @@
 .#{$table}__expandable-row {
   position: relative;
   border-block-end: 0 solid transparent;
-  opacity: var(--#{$table}__expandable-row--Opacity);
-  transition-timing-function: var(--#{$table}__expandable-row--TransitionTimingFunction);
-  transition-duration: var(--#{$table}__expandable-row--TransitionDuration--fade), var(--#{$table}__expandable-row--TransitionDuration--slide), var(--#{$table}__expandable-row--TransitionDuration--fade);
-  transition-property: opacity, translate, display;
-  transition-behavior: allow-discrete;
-  translate: 0 var(--#{$table}__expandable-row--TranslateY);
-
-  @at-root :not(.#{$table}__control-row) ~ .#{$table}__expandable-row {
+
+  // Remove top padding from regular expandable
+  > .#{$table}__th,
+  > .#{$table}__td {
+    padding-block-start: 0;
+  }
+
+  // Add padding back to compound expandable
+  .#{$table}__control-row ~ & {
     > .#{$table}__th,
     > .#{$table}__td {
-      padding-block-start: 0;
+      padding-block-start: var(--#{$table}--cell--PaddingBlockStart);
     }
   }
 
-  td:where(.#{$table}__td),
-  th:where(.#{$table}__th) {
+  .#{$table}__td,
+  .#{$table}__th {
     &.pf-m-no-padding {
       padding-block-start: 0;
       padding-block-end: 0;
@@ -996,6 +1046,7 @@
 
       .#{$table}__expandable-row-content {
         padding: 0;
+        border-radius: 0;
       }
     }
   }
@@ -1008,20 +1059,16 @@
     padding-inline-end: var(--#{$table}__expandable-row-content--PaddingInlineEnd);
     background-color: var(--#{$table}__expandable-row-content--BackgroundColor);
     border-radius: var(--#{$table}__expandable-row-content--BorderRadius);
+
+    &.pf-m-no-background {
+      background-color: transparent;
+    }
   }
 
   // - Table expandable row content expanded
   &.pf-m-expanded {
     border-block-end-color: var(--#{$table}__expandable-row--m-expanded--BorderBlockEndColor);
     border-block-end-width: var(--#{$table}--border-width--base);
-    opacity: var(--#{$table}__tbody--m-expanded__expandable-row--Opacity);
-    transition-duration: var(--#{$table}__expandable-row--TransitionDuration--expand--fade), var(--#{$table}__expandable-row--TransitionDuration--expand--slide), var(--#{$table}__expandable-row--TransitionDuration--expand--fade);
-    translate: 0 var(--#{$table}__tbody--m-expanded__expandable-row--TranslateY);
-
-    @starting-style {
-      opacity: var(--#{$table}__expandable-row--Opacity);
-      translate: 0 var(--#{$table}__expandable-row--TranslateY);
-    }
   }
 
   &:not(.pf-m-expanded) {
@@ -1034,6 +1081,10 @@
   }
 }
 
+.#{$table}__tr:has(~ .#{$table}__expandable-row) {
+  border-block-end: 0;
+}
+
 // - Table compact
 .#{$table}.pf-m-compact {
   --#{$table}--cell--PaddingBlockStart: var(--#{$table}--m-compact--cell--PaddingBlockStart);
@@ -1118,7 +1169,7 @@
     // - Table tbody table control row
     .#{$table}__control-row {
       background-color: var(--#{$table}__control-row--BackgroundColor);
-      border-block-end: var(--#{$table}__control-row--BorderBlockEndWidth) solid var(--#{$table}__control-row__tbody--BorderBlockEndColor);
+      border-block-end: 0;
     }
   }
 }

package/components/TreeView/tree-view.css

@@ -265,7 +265,7 @@
   --pf-v6-c-tree-view__node-toggle-icon--Rotate: var(--pf-v6-c-tree-view__list-item--m-expanded__node-toggle-icon--Rotate);
 }
 .pf-v6-c-tree-view__list-item.pf-m-expanded > .pf-v6-c-tree-view__list {
-  max-height: 9999px;
+  max-height: 99999px;
   visibility: revert;
   opacity: var(--pf-v6-c-tree-view--m-expanded__list--Opacity);
   transition-delay: 0s;

package/components/TreeView/tree-view.scss

@@ -377,7 +377,7 @@ $pf-v6-c-tree-view--MaxNesting: 10 !default;
     --#{$tree-view}__node-toggle-icon--Rotate: var(--#{$tree-view}__list-item--m-expanded__node-toggle-icon--Rotate);
 
     > .#{$tree-view}__list {
-      max-height: 9999px;
+      max-height: 99999px;
       visibility: revert;
       opacity: var(--#{$tree-view}--m-expanded__list--Opacity);
       transition-delay: 0s;