@patternfly/patternfly 6.3.0-prerelease.13 → 6.3.0-prerelease.15

package/assets/images/icon-outlined-star.hbs

@@ -0,0 +1,3 @@
+<svg class="pf-v6-svg" viewBox="0 0 576 512" fill="currentColor" aria-hidden="true" role="img" width="1em" height="1em">
+  <path d="M528.1 171.5L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6zM388.6 312.3l23.7 138.4L288 385.4l-124.3 65.3 23.7-138.4-100.6-98 139-20.2 62.2-126 62.2 126 139 20.2-100.6 98z"></path>
+</svg>

package/assets/images/icon-star.hbs

@@ -0,0 +1,3 @@
+<svg class="pf-v6-svg" viewBox="0 0 576 512" fill="currentColor" aria-hidden="true" role="img" width="1em" height="1em">
+  <path d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"></path>
+</svg>

package/components/Accordion/accordion.css

@@ -178,7 +178,12 @@
   scale: -1 1;
 }
 
+.pf-v6-c-accordion__expandable-content:where([hidden]) {
+  display: revert;
+}
+
 .pf-v6-c-accordion__expandable-content {
+  display: none;
   margin-block-end: var(--pf-v6-c-accordion__expandable-content--MarginBlockEnd);
   margin-inline-start: var(--pf-v6-c-accordion__expandable-content--MarginInlineStart);
   margin-inline-end: var(--pf-v6-c-accordion__expandable-content--MarginInlineEnd);
@@ -188,14 +193,24 @@
   border-radius: var(--pf-v6-c-accordion__expandable-content--BorderRadius);
   opacity: var(--pf-v6-c-accordion__expandable-content--Opacity);
   transition-timing-function: var(--pf-v6-c-accordion__expandable-content--TransitionTimingFunction);
-  transition-duration: var(--pf-v6-c-accordion__expandable-content--TransitionDuration--fade), var(--pf-v6-c-accordion__expandable-content--TransitionDuration--slide);
-  transition-property: opacity, translate;
+  transition-duration: var(--pf-v6-c-accordion__expandable-content--TransitionDuration--fade), var(--pf-v6-c-accordion__expandable-content--TransitionDuration--slide), var(--pf-v6-c-accordion__expandable-content--TransitionDuration--fade);
+  transition-property: opacity, translate, display;
+  transition-behavior: allow-discrete;
   translate: 0 var(--pf-v6-c-accordion__expandable-content--TranslateY);
 }
 .pf-v6-c-accordion__expandable-content.pf-m-fixed {
   max-height: var(--pf-v6-c-accordion__expandable-content--m-fixed--MaxHeight);
   overflow-y: auto;
 }
+.pf-v6-c-accordion__item.pf-m-expanded .pf-v6-c-accordion__expandable-content {
+  display: revert;
+}
+@starting-style {
+  .pf-v6-c-accordion__item.pf-m-expanded .pf-v6-c-accordion__expandable-content {
+    --pf-v6-c-accordion__expandable-content--Opacity: 0;
+    --pf-v6-c-accordion__expandable-content--TranslateY: -.5rem;
+  }
+}
 
 .pf-v6-c-accordion__expandable-content-body {
   padding-block-start: var(--pf-v6-c-accordion__expandable-content-body--PaddingBlockStart);

package/components/Accordion/accordion.scss

@@ -207,7 +207,12 @@
   transition: var(--#{$accordion}__toggle-icon--Transition); // TODO remove shorthand property in breaking change
 }
 
+.#{$accordion}__expandable-content:where([hidden]) {
+  display: revert;
+}
+
 .#{$accordion}__expandable-content {
+  display: none;
   margin-block-end: var(--#{$accordion}__expandable-content--MarginBlockEnd);
   margin-inline-start: var(--#{$accordion}__expandable-content--MarginInlineStart);
   margin-inline-end: var(--#{$accordion}__expandable-content--MarginInlineEnd);
@@ -217,14 +222,24 @@
   border-radius: var(--#{$accordion}__expandable-content--BorderRadius);
   opacity: var(--#{$accordion}__expandable-content--Opacity);
   transition-timing-function: var(--#{$accordion}__expandable-content--TransitionTimingFunction);
-  transition-duration: var(--#{$accordion}__expandable-content--TransitionDuration--fade), var(--#{$accordion}__expandable-content--TransitionDuration--slide);
-  transition-property: opacity, translate;
+  transition-duration: var(--#{$accordion}__expandable-content--TransitionDuration--fade), var(--#{$accordion}__expandable-content--TransitionDuration--slide), var(--#{$accordion}__expandable-content--TransitionDuration--fade);
+  transition-property: opacity, translate, display;
+  transition-behavior: allow-discrete;
   translate: 0 var(--#{$accordion}__expandable-content--TranslateY);
 
   &.pf-m-fixed {
     max-height: var(--#{$accordion}__expandable-content--m-fixed--MaxHeight);
     overflow-y: auto;
   }
+
+  .#{$accordion}__item.pf-m-expanded & {
+    display: revert;
+
+    @starting-style {
+      --#{$accordion}__expandable-content--Opacity: 0;
+      --#{$accordion}__expandable-content--TranslateY: -.5rem;
+    }
+  }
 }
 
 .#{$accordion}__expandable-content-body {

package/components/Button/button.css

@@ -243,6 +243,11 @@
   --pf-v6-c-button--m-favorited--hover__icon--Color: var(--pf-t--global--color--favorite--hover);
   --pf-v6-c-button--m-favorited__icon--AnimationDuration: var(--pf-t--global--motion--duration--icon--long);
   --pf-v6-c-button--m-favorited__icon--AnimationTimingFunction: var(--pf-t--global--motion--timing-function--default);
+  --pf-v6-c-button__icon--favorite--Opacity: 1;
+  --pf-v6-c-button__icon--favorited--Opacity: 0;
+  --pf-v6-c-button--m-favorited__icon--favorite--Opacity: 0;
+  --pf-v6-c-button--m-favorited__icon--favorited--Opacity: 1;
+  --pf-v6-c-button__icon--favorite--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
   --pf-v6-c-button__progress--width: calc(var(--pf-t--global--icon--size--lg) + var(--pf-t--global--spacer--sm));
   --pf-v6-c-button__progress--Opacity: 0;
   --pf-v6-c-button__progress--TranslateY: -50%;
@@ -553,6 +558,7 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
   --pf-v6-c-button--FontSize: var(--pf-v6-c-button--m-display-lg--FontSize);
 }
 .pf-v6-c-button.pf-m-favorite .pf-v6-c-button__icon {
+  display: grid;
   transition-timing-function: var(--pf-v6-c-button--m-favorite__icon--TransitionTimingFunction);
   transition-duration: var(--pf-v6-c-button--m-favorite__icon--TransitionDuration);
   transition-property: color;
@@ -560,6 +566,8 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
 .pf-v6-c-button.pf-m-favorited {
   --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-favorited__icon--Color);
   --pf-v6-c-button--hover__icon--Color: var(--pf-v6-c-button--m-favorited--hover__icon--Color);
+  --pf-v6-c-button__icon--favorite--Opacity: var(--pf-v6-c-button--m-favorited__icon--favorite--Opacity);
+  --pf-v6-c-button__icon--favorited--Opacity: var(--pf-v6-c-button--m-favorited__icon--favorited--Opacity);
 }
 .pf-v6-c-button.pf-m-favorited .pf-v6-c-button__icon {
   animation-name: pf-v6-c-button-icon-favorited;
@@ -639,6 +647,21 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
   --pf-v6-c-button__icon--MarginInlineStart: var(--pf-v6-c-button__icon--m-end--MarginInlineStart);
 }
 
+.pf-v6-c-button__icon-favorite,
+.pf-v6-c-button__icon-favorited {
+  grid-area: 1/1/1/1;
+  transition-duration: var(--pf-v6-c-button__icon--favorite--TransitionDuration);
+  transition-property: opacity;
+}
+
+.pf-v6-c-button__icon-favorite {
+  opacity: var(--pf-v6-c-button__icon--favorite--Opacity);
+}
+
+.pf-v6-c-button__icon-favorited {
+  opacity: var(--pf-v6-c-button__icon--favorited--Opacity);
+}
+
 .pf-v6-c-button__progress {
   position: absolute;
   inset-block-start: var(--pf-v6-c-button__progress--InsetBlockStart);
@@ -651,6 +674,10 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
   --pf-v6-c-spinner--Color: currentcolor;
 }
 
+.pf-v6-c-button__text {
+  text-decoration: inherit;
+}
+
 .pf-v6-c-button__count {
   display: inline-flex;
   align-items: center;

package/components/Button/button.scss

@@ -289,6 +289,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
@@ -641,8 +646,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;
@@ -652,6 +657,8 @@
   &.pf-m-favorited {
     --#{$button}__icon--Color: var(--#{$button}--m-favorited__icon--Color);
     --#{$button}--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
@@ -757,6 +764,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,6 +792,13 @@
   }
 }
 
+// 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;

package/components/ExpandableSection/expandable-section.css

@@ -17,8 +17,8 @@
   --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--Opacity: 0;
-  --pf-v6-c-expandable-section--m-expanded__content--Opacity: 1;
   --pf-v6-c-expandable-section__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;
@@ -104,9 +104,25 @@
   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 {
+  display: none;
   opacity: var(--pf-v6-c-expandable-section__content--Opacity);
   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);
-  transition-property: opacity, translate;
+  transition-duration: var(--pf-v6-c-expandable-section__content--TransitionDuration--fade), var(--pf-v6-c-expandable-section__content--TransitionDuration--slide), var(--pf-v6-c-expandable-section__content--TransitionDuration--fade);
+  transition-property: opacity, translate, display;
+  transition-behavior: allow-discrete;
   translate: 0 var(--pf-v6-c-expandable-section__content--TranslateY);
+}
+.pf-v6-c-expandable-section.pf-m-expanded .pf-v6-c-expandable-section__content {
+  display: revert;
+}
+@starting-style {
+  .pf-v6-c-expandable-section.pf-m-expanded .pf-v6-c-expandable-section__content {
+    --pf-v6-c-expandable-section__content--Opacity: 0;
+    --pf-v6-c-expandable-section__content--TranslateY: -.5rem;
+  }
 }

package/components/ExpandableSection/expandable-section.scss

@@ -21,8 +21,8 @@
   --#{$expandable-section}__content--TransitionDuration--fade: var(--#{$expandable-section}__content--TransitionDuration--collapse--fade);
   --#{$expandable-section}__content--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
   --#{$expandable-section}__content--Opacity: 0;
-  --#{$expandable-section}--m-expanded__content--Opacity: 1;
   --#{$expandable-section}__content--TranslateY: 0;
+  --#{$expandable-section}--m-expanded__content--Opacity: 1;
   --#{$expandable-section}--m-expanded__content--TranslateY: 0;
 
   @media screen and (prefers-reduced-motion: no-preference) {
@@ -49,7 +49,6 @@
   --#{$expandable-section}--m-display-lg--BorderRadius: var(--pf-t--global--border--radius--medium);
   --#{$expandable-section}--m-display-lg--TransitionDelay: var(--#{$expandable-section}__content--TransitionDuration--fade);
 
-
   // Indented
   --#{$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(--#{$expandable-section}__toggle-icon--MinWidth));
 
@@ -95,6 +94,7 @@
 
   &.pf-m-truncate {
     --#{$expandable-section}--Gap: var(--#{$expandable-section}--m-truncate--Gap);
+
     &:not(.pf-m-expanded) .#{$expandable-section}__content {
       // stylelint-disable
       display: -webkit-box;
@@ -124,9 +124,27 @@
   max-width: var(--#{$expandable-section}__content--MaxWidth);
   padding-block-end: var(--#{$expandable-section}__content--PaddingBlockEnd, 0);
   padding-inline-start: var(--#{$expandable-section}__content--PaddingInlineStart, 0);
-  opacity: var(--#{$expandable-section}__content--Opacity);
-  transition-timing-function: var(--#{$expandable-section}__content--TransitionTimingFunction);
-  transition-duration: var(--#{$expandable-section}__content--TransitionDuration--fade), var(--#{$expandable-section}__content--TransitionDuration--slide);
-  transition-property: opacity, translate;
-  translate: 0 var(--#{$expandable-section}__content--TranslateY);
+
+  &:where([hidden]) {
+    display: revert;
+  }
+
+  .#{$expandable-section}:where(:not(.pf-m-truncate)) & {
+    display: none;
+    opacity: var(--#{$expandable-section}__content--Opacity);
+    transition-timing-function: var(--#{$expandable-section}__content--TransitionTimingFunction);
+    transition-duration: var(--#{$expandable-section}__content--TransitionDuration--fade), var(--#{$expandable-section}__content--TransitionDuration--slide), var(--#{$expandable-section}__content--TransitionDuration--fade);
+    transition-property: opacity, translate, display;
+    transition-behavior: allow-discrete;
+    translate: 0 var(--#{$expandable-section}__content--TranslateY);
+  }
+
+  .#{$expandable-section}.pf-m-expanded & {
+    display: revert;
+
+    @starting-style {
+      --#{$expandable-section}__content--Opacity: 0;
+      --#{$expandable-section}__content--TranslateY: -.5rem;
+    }
+  }
 }

package/components/Table/table.css

@@ -74,6 +74,17 @@
   --pf-v6-c-table__action--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
   --pf-v6-c-table__action--PaddingInlineStart: var(--pf-t--global--spacer--sm);
   --pf-v6-c-table__action--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-table__expandable-row--TransitionDuration--expand--slide: 0s;
+  --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;
+  --pf-v6-c-table__expandable-row--TranslateY: 0;
+  --pf-v6-c-table__tbody--m-expanded__expandable-row--TranslateY: 0;
   --pf-v6-c-table__expandable-row-content--PaddingBlockStart: var(--pf-t--global--spacer--md);
   --pf-v6-c-table__expandable-row-content--PaddingBlockEnd: var(--pf-t--global--spacer--md);
   --pf-v6-c-table__expandable-row-content--PaddingInlineStart: var(--pf-t--global--spacer--md);
@@ -134,6 +145,13 @@
   --pf-v6-c-table--m-sticky-header--ZIndex: calc(var(--pf-t--global--z-index--xs) + 1);
   --pf-v6-c-table--m-sticky-header--border--ZIndex: calc(var(--pf-t--global--z-index--xs) + 2);
 }
+@media screen and (prefers-reduced-motion: no-preference) {
+  .pf-v6-c-table {
+    --pf-v6-c-table__expandable-row--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
+    --pf-v6-c-table__expandable-row--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
+    --pf-v6-c-table__expandable-row--TranslateY: -.5rem;
+  }
+}
 
 .pf-v6-c-table {
   width: 100%;
@@ -702,6 +720,12 @@ 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 {
@@ -730,6 +754,15 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
 .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;

package/components/Table/table.scss

@@ -118,6 +118,25 @@
   --#{$table}__action--PaddingInlineStart: var(--pf-t--global--spacer--sm);
   --#{$table}__action--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
 
+  // * Table expandable row
+  --#{$table}__expandable-row--TransitionDuration--expand--slide: 0s;
+  --#{$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;
+  --#{$table}__expandable-row--TranslateY: 0;
+  --#{$table}__tbody--m-expanded__expandable-row--TranslateY: 0;
+
+  @media screen and (prefers-reduced-motion: no-preference) {
+    --#{$table}__expandable-row--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
+    --#{$table}__expandable-row--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
+    --#{$table}__expandable-row--TranslateY: -.5rem;
+  }
+
   // * Table expandable row content
   --#{$table}__expandable-row-content--PaddingBlockStart: var(--pf-t--global--spacer--md);
   --#{$table}__expandable-row-content--PaddingBlockEnd: var(--pf-t--global--spacer--md);
@@ -953,6 +972,12 @@
 .#{$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 {
     > .#{$table}__th,
@@ -989,6 +1014,14 @@
   &.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) {

package/components/Timestamp/timestamp.css

@@ -28,4 +28,8 @@
   --pf-v6-c-timestamp--Color: var(--pf-v6-c-timestamp--m-help-text--hover--Color);
   --pf-v6-c-timestamp--m-help-text--TextDecorationLine: var(--pf-v6-c-timestamp--m-help-text--hover--TextDecorationLine);
   --pf-v6-c-timestamp--m-help-text--TextDecorationStyle: var(--pf-v6-c-timestamp--m-help-text--hover--TextDecorationStyle);
+}
+
+.pf-v6-c-timestamp__text {
+  text-decoration: inherit;
 }

package/components/Timestamp/timestamp.scss

@@ -36,3 +36,10 @@
     }
   }
 }
+
+// enable timestamp with tooltip to have dashed underline when used with truncate
+.#{$timestamp}__text {
+  // stylelint-disable property-disallowed-list
+  text-decoration: inherit;
+  // stylelint-enable property-disallowed-list
+} 

package/components/Truncate/truncate.css

@@ -8,6 +8,7 @@
   grid-auto-flow: column;
   align-items: baseline;
   min-width: var(--pf-v6-c-truncate--MinWidth);
+  text-decoration: inherit;
 }
 .pf-v6-c-truncate.pf-m-fixed {
   display: inline;

package/components/Truncate/truncate.scss

@@ -10,6 +10,9 @@
   grid-auto-flow: column;
   align-items: baseline;
   min-width: var(--#{$truncate}--MinWidth);
+  // stylelint-disable property-disallowed-list
+  text-decoration: inherit; // enable inline link to have underline
+  // stylelint-enable property-disallowed-list
 
   &.pf-m-fixed {
     display: inline;