@patternfly/patternfly 6.3.0-prerelease.23 → 6.3.0-prerelease.25

package/components/Accordion/accordion.css

@@ -183,33 +183,32 @@
 }
 
 .pf-v6-c-accordion__expandable-content {
-  display: none;
-  margin-block-end: var(--pf-v6-c-accordion__expandable-content--MarginBlockEnd);
+  max-height: 0;
   margin-inline-start: var(--pf-v6-c-accordion__expandable-content--MarginInlineStart);
   margin-inline-end: var(--pf-v6-c-accordion__expandable-content--MarginInlineEnd);
   font-size: var(--pf-v6-c-accordion__expandable-content--FontSize);
   color: var(--pf-v6-c-accordion__expandable-content--Color);
+  visibility: hidden;
   background-color: var(--pf-v6-c-accordion__expandable-content--BackgroundColor);
   border-radius: var(--pf-v6-c-accordion__expandable-content--BorderRadius);
   opacity: var(--pf-v6-c-accordion__expandable-content--Opacity);
+  transition-delay: 0s, 0s, var(--pf-v6-c-accordion__expandable-content--TransitionDuration--fade), var(--pf-v6-c-accordion__expandable-content--TransitionDuration--fade), var(--pf-v6-c-accordion__expandable-content--TransitionDuration--fade);
   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), var(--pf-v6-c-accordion__expandable-content--TransitionDuration--fade);
-  transition-property: opacity, translate, display;
-  transition-behavior: allow-discrete;
+  transition-duration: var(--pf-v6-c-accordion__expandable-content--TransitionDuration--fade), var(--pf-v6-c-accordion__expandable-content--TransitionDuration--slide), 0s, 0s, 0s;
+  transition-property: opacity, translate, visibility, max-height, margin-block-end;
   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;
+  max-height: 9999px;
+  margin-block-end: var(--pf-v6-c-accordion__expandable-content--MarginBlockEnd);
+  visibility: revert;
+  transition-delay: 0s;
 }
-@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__item.pf-m-expanded .pf-v6-c-accordion__expandable-content.pf-m-fixed {
+  max-height: var(--pf-v6-c-accordion__expandable-content--m-fixed--MaxHeight);
 }
 
 .pf-v6-c-accordion__expandable-content-body {

package/components/Accordion/accordion.scss

@@ -212,32 +212,33 @@
 }
 
 .#{$accordion}__expandable-content {
-  display: none;
-  margin-block-end: var(--#{$accordion}__expandable-content--MarginBlockEnd);
+  max-height: 0;
   margin-inline-start: var(--#{$accordion}__expandable-content--MarginInlineStart);
   margin-inline-end: var(--#{$accordion}__expandable-content--MarginInlineEnd);
   font-size: var(--#{$accordion}__expandable-content--FontSize);
   color: var(--#{$accordion}__expandable-content--Color);
+  visibility: hidden;
   background-color: var(--#{$accordion}__expandable-content--BackgroundColor);
   border-radius: var(--#{$accordion}__expandable-content--BorderRadius);
   opacity: var(--#{$accordion}__expandable-content--Opacity);
+  transition-delay: 0s, 0s, var(--#{$accordion}__expandable-content--TransitionDuration--fade), var(--#{$accordion}__expandable-content--TransitionDuration--fade), var(--#{$accordion}__expandable-content--TransitionDuration--fade);
   transition-timing-function: var(--#{$accordion}__expandable-content--TransitionTimingFunction);
-  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;
+  transition-duration: var(--#{$accordion}__expandable-content--TransitionDuration--fade), var(--#{$accordion}__expandable-content--TransitionDuration--slide), 0s, 0s, 0s;
+  transition-property: opacity, translate, visibility, max-height, margin-block-end;
   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;
+    max-height: 9999px;
+    margin-block-end: var(--#{$accordion}__expandable-content--MarginBlockEnd);
+    visibility: revert;
+    transition-delay: 0s;
 
-    @starting-style {
-      --#{$accordion}__expandable-content--Opacity: 0;
-      --#{$accordion}__expandable-content--TranslateY: -.5rem;
+    &.pf-m-fixed {
+      max-height: var(--#{$accordion}__expandable-content--m-fixed--MaxHeight);
     }
   }
 }

package/components/Button/button.css

@@ -20,8 +20,8 @@
   --pf-v6-c-button--TextDecorationStyle: none;
   --pf-v6-c-button--TextDecorationColor: currentcolor;
   --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--default);
-  --pf-v6-c-button--TransitionProperty: color, background-color, border-width, border-color, padding;
+  --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--hover--BackgroundColor: transparent;
   --pf-v6-c-button--hover--BorderColor: transparent;
   --pf-v6-c-button--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
@@ -288,8 +288,9 @@
   text-decoration-color: var(--pf-v6-c-button--TextDecorationColor);
   white-space: nowrap;
   cursor: pointer;
+  -webkit-user-select: none;
   user-select: none;
-  background-color: var(--pf-v6-c-button--BackgroundColor);
+  background: var(--pf-v6-c-button--BackgroundColor) radial-gradient(circle, transparent 1%, color-mix(in srgb, currentcolor 15%, transparent) 1%) center/15000%;
   border: 0;
   border-start-start-radius: var(--pf-v6-c-button--BorderStartStartRadius, var(--pf-v6-c-button--BorderRadius));
   border-start-end-radius: var(--pf-v6-c-button--BorderStartEndRadius, var(--pf-v6-c-button--BorderRadius));
@@ -406,6 +407,7 @@
   --pf-v6-c-button--m-link--hover__icon--Color: var(--pf-v6-c-button--m-link--m-inline--hover__icon--Color);
   text-align: start;
   white-space: normal;
+  background: transparent;
   outline-offset: 0.125rem;
 }
 span.pf-v6-c-button.pf-m-link.pf-m-inline {
@@ -539,6 +541,7 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
   --pf-v6-c-button--m-small--PaddingInlineEnd: var(--pf-v6-c-button--m-plain--m-no-padding--m-small--PaddingInlineEnd);
   --pf-v6-c-button--m-small--PaddingInlineStart: var(--pf-v6-c-button--m-plain--m-no-padding--m-small--PaddingInlineStart);
   min-width: var(--pf-v6-c-button--m-plain--m-no-padding--MinWidth);
+  background: var(--pf-v6-c-button--BackgroundColor);
 }
 .pf-v6-c-button.pf-m-block {
   --pf-v6-c-button--Display: var(--pf-v6-c-button--m-block--Display);
@@ -585,20 +588,24 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
   text-decoration-style: var(--pf-v6-c-button--hover--TextDecorationStyle);
   text-decoration-color: var(--pf-v6-c-button--hover--TextDecorationColor);
 }
-.pf-v6-c-button.pf-m-clicked {
+.pf-v6-c-button:active, .pf-v6-c-button.pf-m-clicked {
   --pf-v6-c-button--Color: var(--pf-v6-c-button--m-clicked--Color);
   --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--m-clicked--BackgroundColor);
   --pf-v6-c-button--BorderWidth: var(--pf-v6-c-button--m-clicked--BorderWidth);
   --pf-v6-c-button--BorderColor: var(--pf-v6-c-button--m-clicked--BorderColor);
   --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-clicked__icon--Color);
 }
+.pf-v6-c-button:active {
+  background-size: 100%;
+  transition-duration: 0s;
+}
 .pf-v6-c-button:disabled, .pf-v6-c-button.pf-m-disabled {
   pointer-events: none;
 }
 .pf-v6-c-button:disabled, .pf-v6-c-button.pf-m-disabled, .pf-v6-c-button.pf-m-aria-disabled {
   color: var(--pf-v6-c-button--disabled--Color);
   text-decoration-color: var(--pf-v6-c-button--disabled--TextDecorationColor);
-  background-color: var(--pf-v6-c-button--disabled--BackgroundColor);
+  background: var(--pf-v6-c-button--disabled--BackgroundColor);
 }
 .pf-v6-c-button:disabled::after, .pf-v6-c-button.pf-m-disabled::after, .pf-v6-c-button.pf-m-aria-disabled::after {
   border-color: transparent;

package/components/Button/button.scss

@@ -22,8 +22,8 @@
   --#{$button}--TextDecorationStyle: none;
   --#{$button}--TextDecorationColor: currentcolor;
   --#{$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;
 
   // Hover
   --#{$button}--hover--BackgroundColor: transparent;
@@ -340,8 +340,11 @@
   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) 1%) center/15000%;
   border: 0;
   border-start-start-radius: var(--#{$button}--BorderStartStartRadius, var(--#{$button}--BorderRadius));
   border-start-end-radius: var(--#{$button}--BorderStartEndRadius, var(--#{$button}--BorderRadius));
@@ -475,6 +478,7 @@
 
       text-align: start;
       white-space: normal;
+      background: transparent; // don't show the ripple effect for inline links
       outline-offset: #{pf-size-prem(2px)};
     }
 
@@ -622,6 +626,7 @@
       --#{$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
     }
   }
 
@@ -682,6 +687,7 @@
     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);
@@ -690,6 +696,11 @@
     --#{$button}__icon--Color: var(--#{$button}--m-clicked__icon--Color);
   }
 
+  &:active {
+    background-size: 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,
@@ -702,7 +713,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;

package/components/Menu/menu.css

@@ -12,7 +12,7 @@
   --pf-v6-c-menu--ZIndex: var(--pf-t--global--z-index--sm);
   --pf-v6-c-menu--button--disabled--Color: var(--pf-t--global--text--color--disabled);
   --pf-v6-c-menu--icon--disabled--Color: var(--pf-t--global--icon--color--disabled);
-  --pf-v6-c-menu--TransitionDuration: var(--pf-t--global--motion--duration--fade--default);
+  --pf-v6-c-menu--TransitionDuration: 0s;
   --pf-v6-c-menu--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
   --pf-v6-c-menu--m-plain--BoxShadow: none;
   --pf-v6-c-menu__content--RowGap: var(--pf-v6-c-menu--RowGap);
@@ -85,14 +85,34 @@
   --pf-v6-c-menu--m-flyout__menu--m-left--InsetInlineEnd: calc(100% + var(--pf-v6-c-menu--m-flyout__menu--m-left--right-offset));
   --pf-v6-c-menu--m-drilldown__content--TransitionDuration--height: var(--pf-t--global--motion--duration--slide-in--default);
   --pf-v6-c-menu--m-drilldown__content--TransitionDuration--transform: var(--pf-t--global--motion--duration--slide-in--default);
-  --pf-v6-c-menu--m-drilldown__content--Transition: transform var(--pf-v6-c-menu--m-drilldown__content--TransitionDuration--transform), height var(--pf-v6-c-menu--m-drilldown__content--TransitionDuration--height);
+  --pf-v6-c-menu--m-drilldown__content--Transition: height var(--pf-v6-c-menu--m-drilldown__content--TransitionDuration--height);
   --pf-v6-c-menu--m-drilldown--c-menu--InsetBlockStart: 0;
-  --pf-v6-c-menu--m-drilldown--c-menu--TransitionDuration--transform: var(--pf-t--global--motion--duration--slide-in--default);
+  --pf-v6-c-menu--m-drilldown--c-menu--TransitionDuration--transform: 0s;
   --pf-v6-c-menu--m-drilldown--c-menu--Transition: transform var(--pf-v6-c-menu--m-drilldown--c-menu--TransitionDuration--transform);
-  --pf-v6-c-menu--m-drilldown__list--TransitionDuration--transform: var(--pf-t--global--motion--duration--slide-in--default);
+  --pf-v6-c-menu--m-drilldown__list--TransitionDuration--transform: 0s;
   --pf-v6-c-menu--m-drilldown__list--Transition: transform var(--pf-v6-c-menu--m-drilldown__list--TransitionDuration--transform);
   --pf-v6-c-menu--m-drilled-in--c-menu__list-item--m-current-path--c-menu--ZIndex: var(--pf-t--global--z-index--xs);
 }
+@media (prefers-reduced-motion: no-preference) {
+  .pf-v6-c-menu {
+    --pf-v6-c-menu--TransitionDuration: var(--pf-t--global--motion--duration--fade--default);
+  }
+}
+@media (prefers-reduced-motion: no-preference) {
+  .pf-v6-c-menu {
+    --pf-v6-c-menu--m-drilldown__content--Transition: transform var(--pf-v6-c-menu--m-drilldown__content--TransitionDuration--transform), height var(--pf-v6-c-menu--m-drilldown__content--TransitionDuration--height);
+  }
+}
+@media (prefers-reduced-motion: no-preference) {
+  .pf-v6-c-menu {
+    --pf-v6-c-menu--m-drilldown--c-menu--TransitionDuration--transform: var(--pf-t--global--motion--duration--slide-in--default);
+  }
+}
+@media (prefers-reduced-motion: no-preference) {
+  .pf-v6-c-menu {
+    --pf-v6-c-menu--m-drilldown__list--TransitionDuration--transform: var(--pf-t--global--motion--duration--slide-in--default);
+  }
+}
 
 .pf-v6-c-menu__content,
 .pf-v6-c-menu__list-item,

package/components/Menu/menu.scss

@@ -15,8 +15,12 @@
   --#{$menu}--ZIndex: var(--pf-t--global--z-index--sm);
   --#{$menu}--button--disabled--Color: var(--pf-t--global--text--color--disabled);
   --#{$menu}--icon--disabled--Color: var(--pf-t--global--icon--color--disabled);
-  --#{$menu}--TransitionDuration: var(--pf-t--global--motion--duration--fade--default);
+  --#{$menu}--TransitionDuration: 0s;
   --#{$menu}--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
+  
+  @media (prefers-reduced-motion: no-preference) {
+    --#{$menu}--TransitionDuration: var(--pf-t--global--motion--duration--fade--default);
+  }
 
   // * Menu plain
   --#{$menu}--m-plain--BoxShadow: none;
@@ -126,19 +130,30 @@
   --#{$menu}--m-flyout__menu--m-left--InsetInlineEnd: calc(100% + var(--#{$menu}--m-flyout__menu--m-left--right-offset));
 
   // * Menu drilldown content
-  // TODO Reduced motion default needed for drilldown
   --#{$menu}--m-drilldown__content--TransitionDuration--height: var(--pf-t--global--motion--duration--slide-in--default);
   --#{$menu}--m-drilldown__content--TransitionDuration--transform: var(--pf-t--global--motion--duration--slide-in--default);
-  --#{$menu}--m-drilldown__content--Transition: transform var(--#{$menu}--m-drilldown__content--TransitionDuration--transform), height var(--#{$menu}--m-drilldown__content--TransitionDuration--height);
+  --#{$menu}--m-drilldown__content--Transition: height var(--#{$menu}--m-drilldown__content--TransitionDuration--height);
+  
+  @media (prefers-reduced-motion: no-preference) {
+    --#{$menu}--m-drilldown__content--Transition: transform var(--#{$menu}--m-drilldown__content--TransitionDuration--transform), height var(--#{$menu}--m-drilldown__content--TransitionDuration--height);
+  }
 
   // * Menu drilldown menu
   --#{$menu}--m-drilldown--c-menu--InsetBlockStart: 0;
-  --#{$menu}--m-drilldown--c-menu--TransitionDuration--transform: var(--pf-t--global--motion--duration--slide-in--default);
+  --#{$menu}--m-drilldown--c-menu--TransitionDuration--transform: 0s;
   --#{$menu}--m-drilldown--c-menu--Transition: transform var(--#{$menu}--m-drilldown--c-menu--TransitionDuration--transform);
 
+  @media (prefers-reduced-motion: no-preference) {
+    --#{$menu}--m-drilldown--c-menu--TransitionDuration--transform: var(--pf-t--global--motion--duration--slide-in--default);
+  }
+
   // * Menu drilldown list
-  --#{$menu}--m-drilldown__list--TransitionDuration--transform: var(--pf-t--global--motion--duration--slide-in--default);
+  --#{$menu}--m-drilldown__list--TransitionDuration--transform: 0s;
   --#{$menu}--m-drilldown__list--Transition: transform var(--#{$menu}--m-drilldown__list--TransitionDuration--transform);
+  
+  @media (prefers-reduced-motion: no-preference) {
+    --#{$menu}--m-drilldown__list--TransitionDuration--transform: var(--pf-t--global--motion--duration--slide-in--default);
+  }
 
   // * Menu drilled in
   --#{$menu}--m-drilled-in--c-menu__list-item--m-current-path--c-menu--ZIndex: var(--pf-t--global--z-index--xs);

package/components/TreeView/tree-view.css

@@ -247,10 +247,13 @@
 }
 
 .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list {
+  max-height: 0;
+  visibility: hidden;
   opacity: var(--pf-v6-c-tree-view__list--Opacity);
+  transition-delay: 0s, 0s, var(--pf-v6-c-tree-view__list--TransitionDuration--fade), var(--pf-v6-c-tree-view__list--TransitionDuration--fade);
   transition-timing-function: var(--pf-v6-c-tree-view__list--TransitionTimingFunction);
-  transition-duration: var(--pf-v6-c-tree-view__list--TransitionDuration--fade), var(--pf-v6-c-tree-view__list--TransitionDuration--slide);
-  transition-property: opacity, translate;
+  transition-duration: var(--pf-v6-c-tree-view__list--TransitionDuration--fade), var(--pf-v6-c-tree-view__list--TransitionDuration--slide), 0s, 0s;
+  transition-property: opacity, translate, visibility, max-height;
   translate: 0 var(--pf-v6-c-tree-view__list--TranslateY);
 }
 .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item {
@@ -262,8 +265,11 @@
   --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;
+  visibility: revert;
   opacity: var(--pf-v6-c-tree-view--m-expanded__list--Opacity);
-  transition-duration: var(--pf-v6-c-tree-view__list--TransitionDuration--expand--fade), var(--pf-v6-c-tree-view__list--TransitionDuration--expand--slide);
+  transition-delay: 0s;
+  transition-duration: var(--pf-v6-c-tree-view__list--TransitionDuration--expand--fade), var(--pf-v6-c-tree-view__list--TransitionDuration--expand--slide), 0s, 0s;
   translate: 0 var(--pf-v6-c-tree-view--m-expanded__list--TranslateY);
 }
 

package/components/TreeView/tree-view.scss

@@ -357,10 +357,13 @@ $pf-v6-c-tree-view--MaxNesting: 10 !default;
 
 .#{$tree-view}__list-item {
   .#{$tree-view}__list {
+    max-height: 0;
+    visibility: hidden;
     opacity: var(--#{$tree-view}__list--Opacity);
+    transition-delay: 0s, 0s, var(--#{$tree-view}__list--TransitionDuration--fade), var(--#{$tree-view}__list--TransitionDuration--fade);
     transition-timing-function: var(--#{$tree-view}__list--TransitionTimingFunction);
-    transition-duration: var(--#{$tree-view}__list--TransitionDuration--fade), var(--#{$tree-view}__list--TransitionDuration--slide);
-    transition-property: opacity, translate;
+    transition-duration: var(--#{$tree-view}__list--TransitionDuration--fade), var(--#{$tree-view}__list--TransitionDuration--slide), 0s, 0s;
+    transition-property: opacity, translate, visibility, max-height;
     translate: 0 var(--#{$tree-view}__list--TranslateY);
   }
 
@@ -374,8 +377,11 @@ $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;
+      visibility: revert;
       opacity: var(--#{$tree-view}--m-expanded__list--Opacity);
-      transition-duration: var(--#{$tree-view}__list--TransitionDuration--expand--fade), var(--#{$tree-view}__list--TransitionDuration--expand--slide);
+      transition-delay: 0s;
+      transition-duration: var(--#{$tree-view}__list--TransitionDuration--expand--fade), var(--#{$tree-view}__list--TransitionDuration--expand--slide), 0s, 0s;
       translate: 0 var(--#{$tree-view}--m-expanded__list--TranslateY);
     }
   }

package/components/_index.css

@@ -376,33 +376,32 @@
 }
 
 .pf-v6-c-accordion__expandable-content {
-  display: none;
-  margin-block-end: var(--pf-v6-c-accordion__expandable-content--MarginBlockEnd);
+  max-height: 0;
   margin-inline-start: var(--pf-v6-c-accordion__expandable-content--MarginInlineStart);
   margin-inline-end: var(--pf-v6-c-accordion__expandable-content--MarginInlineEnd);
   font-size: var(--pf-v6-c-accordion__expandable-content--FontSize);
   color: var(--pf-v6-c-accordion__expandable-content--Color);
+  visibility: hidden;
   background-color: var(--pf-v6-c-accordion__expandable-content--BackgroundColor);
   border-radius: var(--pf-v6-c-accordion__expandable-content--BorderRadius);
   opacity: var(--pf-v6-c-accordion__expandable-content--Opacity);
+  transition-delay: 0s, 0s, var(--pf-v6-c-accordion__expandable-content--TransitionDuration--fade), var(--pf-v6-c-accordion__expandable-content--TransitionDuration--fade), var(--pf-v6-c-accordion__expandable-content--TransitionDuration--fade);
   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), var(--pf-v6-c-accordion__expandable-content--TransitionDuration--fade);
-  transition-property: opacity, translate, display;
-  transition-behavior: allow-discrete;
+  transition-duration: var(--pf-v6-c-accordion__expandable-content--TransitionDuration--fade), var(--pf-v6-c-accordion__expandable-content--TransitionDuration--slide), 0s, 0s, 0s;
+  transition-property: opacity, translate, visibility, max-height, margin-block-end;
   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;
+  max-height: 9999px;
+  margin-block-end: var(--pf-v6-c-accordion__expandable-content--MarginBlockEnd);
+  visibility: revert;
+  transition-delay: 0s;
 }
-@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__item.pf-m-expanded .pf-v6-c-accordion__expandable-content.pf-m-fixed {
+  max-height: var(--pf-v6-c-accordion__expandable-content--m-fixed--MaxHeight);
 }
 
 .pf-v6-c-accordion__expandable-content-body {
@@ -1549,8 +1548,8 @@ button.pf-v6-c-breadcrumb__link {
   --pf-v6-c-button--TextDecorationStyle: none;
   --pf-v6-c-button--TextDecorationColor: currentcolor;
   --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--default);
-  --pf-v6-c-button--TransitionProperty: color, background-color, border-width, border-color, padding;
+  --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--hover--BackgroundColor: transparent;
   --pf-v6-c-button--hover--BorderColor: transparent;
   --pf-v6-c-button--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
@@ -1817,8 +1816,9 @@ button.pf-v6-c-breadcrumb__link {
   text-decoration-color: var(--pf-v6-c-button--TextDecorationColor);
   white-space: nowrap;
   cursor: pointer;
+  -webkit-user-select: none;
   user-select: none;
-  background-color: var(--pf-v6-c-button--BackgroundColor);
+  background: var(--pf-v6-c-button--BackgroundColor) radial-gradient(circle, transparent 1%, color-mix(in srgb, currentcolor 15%, transparent) 1%) center/15000%;
   border: 0;
   border-start-start-radius: var(--pf-v6-c-button--BorderStartStartRadius, var(--pf-v6-c-button--BorderRadius));
   border-start-end-radius: var(--pf-v6-c-button--BorderStartEndRadius, var(--pf-v6-c-button--BorderRadius));
@@ -1935,6 +1935,7 @@ button.pf-v6-c-breadcrumb__link {
   --pf-v6-c-button--m-link--hover__icon--Color: var(--pf-v6-c-button--m-link--m-inline--hover__icon--Color);
   text-align: start;
   white-space: normal;
+  background: transparent;
   outline-offset: 0.125rem;
 }
 span.pf-v6-c-button.pf-m-link.pf-m-inline {
@@ -2068,6 +2069,7 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
   --pf-v6-c-button--m-small--PaddingInlineEnd: var(--pf-v6-c-button--m-plain--m-no-padding--m-small--PaddingInlineEnd);
   --pf-v6-c-button--m-small--PaddingInlineStart: var(--pf-v6-c-button--m-plain--m-no-padding--m-small--PaddingInlineStart);
   min-width: var(--pf-v6-c-button--m-plain--m-no-padding--MinWidth);
+  background: var(--pf-v6-c-button--BackgroundColor);
 }
 .pf-v6-c-button.pf-m-block {
   --pf-v6-c-button--Display: var(--pf-v6-c-button--m-block--Display);
@@ -2114,20 +2116,24 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
   text-decoration-style: var(--pf-v6-c-button--hover--TextDecorationStyle);
   text-decoration-color: var(--pf-v6-c-button--hover--TextDecorationColor);
 }
-.pf-v6-c-button.pf-m-clicked {
+.pf-v6-c-button:active, .pf-v6-c-button.pf-m-clicked {
   --pf-v6-c-button--Color: var(--pf-v6-c-button--m-clicked--Color);
   --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--m-clicked--BackgroundColor);
   --pf-v6-c-button--BorderWidth: var(--pf-v6-c-button--m-clicked--BorderWidth);
   --pf-v6-c-button--BorderColor: var(--pf-v6-c-button--m-clicked--BorderColor);
   --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-clicked__icon--Color);
 }
+.pf-v6-c-button:active {
+  background-size: 100%;
+  transition-duration: 0s;
+}
 .pf-v6-c-button:disabled, .pf-v6-c-button.pf-m-disabled {
   pointer-events: none;
 }
 .pf-v6-c-button:disabled, .pf-v6-c-button.pf-m-disabled, .pf-v6-c-button.pf-m-aria-disabled {
   color: var(--pf-v6-c-button--disabled--Color);
   text-decoration-color: var(--pf-v6-c-button--disabled--TextDecorationColor);
-  background-color: var(--pf-v6-c-button--disabled--BackgroundColor);
+  background: var(--pf-v6-c-button--disabled--BackgroundColor);
 }
 .pf-v6-c-button:disabled::after, .pf-v6-c-button.pf-m-disabled::after, .pf-v6-c-button.pf-m-aria-disabled::after {
   border-color: transparent;
@@ -9864,7 +9870,7 @@ ul.pf-v6-c-list {
   --pf-v6-c-menu--ZIndex: var(--pf-t--global--z-index--sm);
   --pf-v6-c-menu--button--disabled--Color: var(--pf-t--global--text--color--disabled);
   --pf-v6-c-menu--icon--disabled--Color: var(--pf-t--global--icon--color--disabled);
-  --pf-v6-c-menu--TransitionDuration: var(--pf-t--global--motion--duration--fade--default);
+  --pf-v6-c-menu--TransitionDuration: 0s;
   --pf-v6-c-menu--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
   --pf-v6-c-menu--m-plain--BoxShadow: none;
   --pf-v6-c-menu__content--RowGap: var(--pf-v6-c-menu--RowGap);
@@ -9937,14 +9943,34 @@ ul.pf-v6-c-list {
   --pf-v6-c-menu--m-flyout__menu--m-left--InsetInlineEnd: calc(100% + var(--pf-v6-c-menu--m-flyout__menu--m-left--right-offset));
   --pf-v6-c-menu--m-drilldown__content--TransitionDuration--height: var(--pf-t--global--motion--duration--slide-in--default);
   --pf-v6-c-menu--m-drilldown__content--TransitionDuration--transform: var(--pf-t--global--motion--duration--slide-in--default);
-  --pf-v6-c-menu--m-drilldown__content--Transition: transform var(--pf-v6-c-menu--m-drilldown__content--TransitionDuration--transform), height var(--pf-v6-c-menu--m-drilldown__content--TransitionDuration--height);
+  --pf-v6-c-menu--m-drilldown__content--Transition: height var(--pf-v6-c-menu--m-drilldown__content--TransitionDuration--height);
   --pf-v6-c-menu--m-drilldown--c-menu--InsetBlockStart: 0;
-  --pf-v6-c-menu--m-drilldown--c-menu--TransitionDuration--transform: var(--pf-t--global--motion--duration--slide-in--default);
+  --pf-v6-c-menu--m-drilldown--c-menu--TransitionDuration--transform: 0s;
   --pf-v6-c-menu--m-drilldown--c-menu--Transition: transform var(--pf-v6-c-menu--m-drilldown--c-menu--TransitionDuration--transform);
-  --pf-v6-c-menu--m-drilldown__list--TransitionDuration--transform: var(--pf-t--global--motion--duration--slide-in--default);
+  --pf-v6-c-menu--m-drilldown__list--TransitionDuration--transform: 0s;
   --pf-v6-c-menu--m-drilldown__list--Transition: transform var(--pf-v6-c-menu--m-drilldown__list--TransitionDuration--transform);
   --pf-v6-c-menu--m-drilled-in--c-menu__list-item--m-current-path--c-menu--ZIndex: var(--pf-t--global--z-index--xs);
 }
+@media (prefers-reduced-motion: no-preference) {
+  .pf-v6-c-menu {
+    --pf-v6-c-menu--TransitionDuration: var(--pf-t--global--motion--duration--fade--default);
+  }
+}
+@media (prefers-reduced-motion: no-preference) {
+  .pf-v6-c-menu {
+    --pf-v6-c-menu--m-drilldown__content--Transition: transform var(--pf-v6-c-menu--m-drilldown__content--TransitionDuration--transform), height var(--pf-v6-c-menu--m-drilldown__content--TransitionDuration--height);
+  }
+}
+@media (prefers-reduced-motion: no-preference) {
+  .pf-v6-c-menu {
+    --pf-v6-c-menu--m-drilldown--c-menu--TransitionDuration--transform: var(--pf-t--global--motion--duration--slide-in--default);
+  }
+}
+@media (prefers-reduced-motion: no-preference) {
+  .pf-v6-c-menu {
+    --pf-v6-c-menu--m-drilldown__list--TransitionDuration--transform: var(--pf-t--global--motion--duration--slide-in--default);
+  }
+}
 
 .pf-v6-c-menu__content,
 .pf-v6-c-menu__list-item,
@@ -22475,10 +22501,13 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
 }
 
 .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list {
+  max-height: 0;
+  visibility: hidden;
   opacity: var(--pf-v6-c-tree-view__list--Opacity);
+  transition-delay: 0s, 0s, var(--pf-v6-c-tree-view__list--TransitionDuration--fade), var(--pf-v6-c-tree-view__list--TransitionDuration--fade);
   transition-timing-function: var(--pf-v6-c-tree-view__list--TransitionTimingFunction);
-  transition-duration: var(--pf-v6-c-tree-view__list--TransitionDuration--fade), var(--pf-v6-c-tree-view__list--TransitionDuration--slide);
-  transition-property: opacity, translate;
+  transition-duration: var(--pf-v6-c-tree-view__list--TransitionDuration--fade), var(--pf-v6-c-tree-view__list--TransitionDuration--slide), 0s, 0s;
+  transition-property: opacity, translate, visibility, max-height;
   translate: 0 var(--pf-v6-c-tree-view__list--TranslateY);
 }
 .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item {
@@ -22490,8 +22519,11 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
   --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;
+  visibility: revert;
   opacity: var(--pf-v6-c-tree-view--m-expanded__list--Opacity);
-  transition-duration: var(--pf-v6-c-tree-view__list--TransitionDuration--expand--fade), var(--pf-v6-c-tree-view__list--TransitionDuration--expand--slide);
+  transition-delay: 0s;
+  transition-duration: var(--pf-v6-c-tree-view__list--TransitionDuration--expand--fade), var(--pf-v6-c-tree-view__list--TransitionDuration--expand--slide), 0s, 0s;
   translate: 0 var(--pf-v6-c-tree-view--m-expanded__list--TranslateY);
 }
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@patternfly/patternfly",
   "description": "Assets, source, tooling, and content for PatternFly 4",
-  "version": "6.3.0-prerelease.23",
+  "version": "6.3.0-prerelease.25",
   "keywords": [],
   "license": "MIT",
   "scripts": {
@@ -47,7 +47,7 @@
     "@commitlint/config-conventional": "^19.1.0",
     "@fortawesome/fontawesome": "^1.1.8",
     "@octokit/rest": "^20.1.0",
-    "@patternfly/documentation-framework": "6.10.19",
+    "@patternfly/documentation-framework": "6.10.22",
     "@patternfly/patternfly-a11y": "5.1.0",
     "@patternfly/react-code-editor": "6.2.2",
     "@patternfly/react-core": "6.2.2",