@patternfly/patternfly 6.3.0-prerelease.26 → 6.3.0-prerelease.28

package/base/patternfly-common.css

@@ -55,4 +55,39 @@
   --pf-t--global--duration--200: 1ms !important;
   --pf-t--global--duration--100: 1ms !important;
   --pf-t--global--duration--50: 1ms !important;
+}
+
+:root {
+  --pf-v6-global--danger-jiggle--AnimationDuration--Transform: var(--pf-t--global--motion--duration--fade--default);
+  --pf-v6-global--danger-jiggle--AnimationTimingFunction--Transform: var(--pf-t--global--motion--timing-function--default);
+}
+
+@property --pf-v6-global--danger-jiggle--TranslateX {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 0;
+}
+@keyframes pf-v6-global-danger-jiggle-motion {
+  33% {
+    --pf-v6-global--danger-jiggle--TranslateX: -2px;
+  }
+  66% {
+    --pf-v6-global--danger-jiggle--TranslateX: 3px;
+  }
+}
+@keyframes pf-v6-global-fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@keyframes pf-v6-global-fade-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
 }

package/base/patternfly-common.scss

@@ -66,4 +66,49 @@
   --pf-t--global--duration--50: 1ms !important;
 
   // stylelink-enable declaration-no-important
-}
+}
+
+:root {
+  --#{$pf-global}--danger-jiggle--AnimationDuration--Transform: var(--pf-t--global--motion--duration--fade--default);
+  --#{$pf-global}--danger-jiggle--AnimationTimingFunction--Transform: var(--pf-t--global--motion--timing-function--default);
+}
+
+// Register the property type for the custom property to be animatable
+@property  --#{$pf-global}--danger-jiggle--TranslateX {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 0;
+}
+
+// Animate danger jiggle
+@keyframes #{$pf-global}-danger-jiggle-motion {
+  33% {
+    --#{$pf-global}--danger-jiggle--TranslateX: -2px;
+  }
+  
+  66% {
+    --#{$pf-global}--danger-jiggle--TranslateX: 3px;
+  }
+}
+
+// Animate fade-in
+@keyframes #{$pf-global}-fade-in {
+  from {
+    opacity: 0;
+  }
+  
+  to {
+    opacity: 1;
+  }
+}
+
+// Animate fade-out
+@keyframes #{$pf-global}-fade-out {
+  from {
+    opacity: 1;
+  }
+  
+  to {
+    opacity: 0;
+  }
+}

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/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/FormControl/form-control.css

@@ -226,6 +226,22 @@
   --pf-v6-c-form-control__icon--m-status--Color: var(--pf-v6-c-form-control--m-error__icon--m-status--Color);
   --pf-v6-c-form-control--after--BorderWidth: var(--pf-v6-c-form-control--m-error--after--BorderWidth);
 }
+@media (prefers-reduced-motion: no-preference) {
+  .pf-v6-c-form-control.pf-m-error {
+    translate: var(--pf-v6-global--danger-jiggle--TranslateX, 0);
+    animation-name: pf-v6-global-danger-jiggle-motion;
+    animation-duration: var(--pf-v6-global--danger-jiggle--AnimationDuration--Transform);
+    animation-timing-function: var(--pf-v6-global--danger-jiggle--AnimationTimingFunction--Transform);
+    animation-fill-mode: both;
+  }
+}
+.pf-v6-c-form-control.pf-m-error .pf-v6-c-form-control__icon.pf-m-status {
+  --pf-v6-c-form-control--TransitionDuration--Opacity: var(--pf-t--global--motion--duration--fade--default);
+  --pf-v6-c-form-control--TransitionTimingFunction--Opacity: var(--pf-t--global--motion--timing-function--default);
+  animation-name: pf-v6-global-fade-in;
+  animation-duration: var(--pf-v6-c-form-control--TransitionDuration--Opacity);
+  animation-timing-function: var(--pf-v6-c-form-control--TransitionTimingFunction--Opacity);
+}
 .pf-v6-c-form-control.pf-m-error > textarea {
   padding-inline-end: var(--pf-v6-c-form-control--m-error--PaddingInlineEnd, var(--pf-v6-c-form-control__textarea--m-error--PaddingInlineEnd));
 }

package/components/FormControl/form-control.scss

@@ -290,6 +290,14 @@
     --#{$form-control}__icon--m-status--Color: var(--#{$form-control}--m-error__icon--m-status--Color);
     --#{$form-control}--after--BorderWidth: var(--#{$form-control}--m-error--after--BorderWidth);
 
+    @media (prefers-reduced-motion: no-preference) {
+      @include pf-v6-animate-danger-jiggle;
+    }
+
+    .#{$form-control}__icon.pf-m-status {
+      @include pf-v6-fade-default(#{$form-control});
+    }
+
     > textarea {
       padding-inline-end: var(--#{$form-control}--m-error--PaddingInlineEnd, var(--#{$form-control}__textarea--m-error--PaddingInlineEnd));
     }
@@ -438,6 +446,7 @@
 
   &.pf-m-status {
     --#{$form-control}__icon--Color: var(--#{$form-control}__icon--m-status--Color);
+    
   }
 }
 

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/Progress/progress.css

@@ -106,6 +106,22 @@
   --pf-v6-c-progress__status-icon--Color: var(--pf-v6-c-progress--m-danger__status-icon--Color);
   --pf-v6-c-progress--m-inside__measure--Color: var(--pf-v6-c-progress--m-danger--m-inside__measure--Color);
 }
+@media (prefers-reduced-motion: no-preference) {
+  .pf-v6-c-progress.pf-m-danger .pf-v6-c-progress__bar {
+    translate: var(--pf-v6-global--danger-jiggle--TranslateX, 0);
+    animation-name: pf-v6-global-danger-jiggle-motion;
+    animation-duration: var(--pf-v6-global--danger-jiggle--AnimationDuration--Transform);
+    animation-timing-function: var(--pf-v6-global--danger-jiggle--AnimationTimingFunction--Transform);
+    animation-fill-mode: both;
+  }
+}
+.pf-v6-c-progress.pf-m-danger .pf-v6-c-progress__status-icon {
+  --pf-v6-c-progress--TransitionDuration--Opacity: var(--pf-t--global--motion--duration--fade--default);
+  --pf-v6-c-progress--TransitionTimingFunction--Opacity: var(--pf-t--global--motion--timing-function--default);
+  animation-name: pf-v6-global-fade-in;
+  animation-duration: var(--pf-v6-c-progress--TransitionDuration--Opacity);
+  animation-timing-function: var(--pf-v6-c-progress--TransitionTimingFunction--Opacity);
+}
 
 .pf-v6-c-progress__description {
   grid-column: 1/2;

package/components/Progress/progress.scss

@@ -140,6 +140,16 @@
     --#{$progress}__indicator--BackgroundColor: var(--#{$progress}--m-danger__indicator--BackgroundColor);
     --#{$progress}__status-icon--Color: var(--#{$progress}--m-danger__status-icon--Color);
     --#{$progress}--m-inside__measure--Color: var(--#{$progress}--m-danger--m-inside__measure--Color);
+
+    .#{$progress}__bar {
+      @media (prefers-reduced-motion: no-preference) {
+        @include pf-v6-animate-danger-jiggle;
+      }
+    }
+
+    .#{$progress}__status-icon {
+      @include pf-v6-fade-default(#{$progress});
+    }
   }
 }
 
@@ -209,4 +219,4 @@
 
 .#{$progress}__measure {
   font-variant-numeric: tabular-nums;
-}
+}

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/TextInputGroup/text-input-group.css

@@ -103,6 +103,22 @@
   --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-error--BorderColor);
   --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-error__icon--m-status--Color);
 }
+@media (prefers-reduced-motion: no-preference) {
+  .pf-v6-c-text-input-group.pf-m-error {
+    translate: var(--pf-v6-global--danger-jiggle--TranslateX, 0);
+    animation-name: pf-v6-global-danger-jiggle-motion;
+    animation-duration: var(--pf-v6-global--danger-jiggle--AnimationDuration--Transform);
+    animation-timing-function: var(--pf-v6-global--danger-jiggle--AnimationTimingFunction--Transform);
+    animation-fill-mode: both;
+  }
+}
+.pf-v6-c-text-input-group.pf-m-error .pf-v6-c-text-input-group__icon.pf-m-status {
+  --pf-v6-c-text-input-group--TransitionDuration--Opacity: var(--pf-t--global--motion--duration--fade--default);
+  --pf-v6-c-text-input-group--TransitionTimingFunction--Opacity: var(--pf-t--global--motion--timing-function--default);
+  animation-name: pf-v6-global-fade-in;
+  animation-duration: var(--pf-v6-c-text-input-group--TransitionDuration--Opacity);
+  animation-timing-function: var(--pf-v6-c-text-input-group--TransitionTimingFunction--Opacity);
+}
 .pf-v6-c-text-input-group:hover {
   --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-hover--BorderColor);
 }

package/components/TextInputGroup/text-input-group.scss

@@ -128,6 +128,14 @@
     --#{$text-input-group}--BorderColor: var(--#{$text-input-group}--m-error--BorderColor);
     --#{$text-input-group}--m-hover--BorderColor: var(--#{$text-input-group}--m-hover--m-error--BorderColor);
     --#{$text-input-group}__icon--m-status--Color: var(--#{$text-input-group}__main--m-error__icon--m-status--Color);  
+    
+    @media (prefers-reduced-motion: no-preference) {
+      @include pf-v6-animate-danger-jiggle;
+    }
+    
+    .#{$text-input-group}__icon.pf-m-status {
+      @include pf-v6-fade-default(#{$text-input-group});
+    }
   }
   
   &:hover {

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;