npm - @patternfly/react-styles - Versions diffs - 6.3.0-prerelease.2 → 6.3.0-prerelease.4 - Mend

@patternfly/react-styles 6.3.0-prerelease.2 → 6.3.0-prerelease.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (27) hide show

package/CHANGELOG.md +12 -0
package/css/components/Accordion/accordion.css +11 -12
package/css/components/DualListSelector/dual-list-selector.css +36 -0
package/css/components/DualListSelector/dual-list-selector.d.ts +1 -0
package/css/components/DualListSelector/dual-list-selector.js +1 -0
package/css/components/DualListSelector/dual-list-selector.mjs +1 -0
package/css/components/ExpandableSection/expandable-section.css +15 -17
package/css/components/Form/form.css +33 -2
package/css/components/Form/form.d.ts +2 -1
package/css/components/Form/form.js +2 -1
package/css/components/Form/form.mjs +2 -1
package/css/components/Nav/nav.css +22 -8
package/css/components/Spinner/spinner.css +5 -0
package/css/components/Spinner/spinner.d.ts +1 -0
package/css/components/Spinner/spinner.js +1 -0
package/css/components/Spinner/spinner.mjs +1 -0
package/css/components/Table/table-grid.css +6 -5
package/css/components/Tabs/tabs.css +25 -15
package/css/components/Tabs/tabs.d.ts +1 -0
package/css/components/Tabs/tabs.js +1 -0
package/css/components/Tabs/tabs.mjs +1 -0
package/css/components/TreeView/tree-view.css +9 -3
package/css/components/_index.css +162 -62
package/css/components/_index.d.ts +2 -0
package/css/components/_index.js +2 -0
package/css/components/_index.mjs +2 -0
package/package.json +3 -3

package/CHANGELOG.md CHANGED Viewed

@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+# [6.3.0-prerelease.4](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-styles@6.3.0-prerelease.3...@patternfly/react-styles@6.3.0-prerelease.4) (2025-06-11)
+### Features
+- **Form:** enabled opt-in animations for expandable fieldgroup ([#11843](https://github.com/patternfly/patternfly-react/issues/11843)) ([8c6618b](https://github.com/patternfly/patternfly-react/commit/8c6618b87876924b7ef9b3651b86abb65e7e2dd4))
+# [6.3.0-prerelease.3](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-styles@6.3.0-prerelease.2...@patternfly/react-styles@6.3.0-prerelease.3) (2025-05-21)
+### Features
+- **Tabs:** added animations ([#11767](https://github.com/patternfly/patternfly-react/issues/11767)) ([bae4fc3](https://github.com/patternfly/patternfly-react/commit/bae4fc36aa39007d9474236cbada62ac55a27989))
 # [6.3.0-prerelease.2](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-styles@6.3.0-prerelease.1...@patternfly/react-styles@6.3.0-prerelease.2) (2025-05-20)
 ### Bug Fixes

package/css/components/Accordion/accordion.css CHANGED Viewed

@@ -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/css/components/DualListSelector/dual-list-selector.css CHANGED Viewed

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

package/css/components/DualListSelector/dual-list-selector.d.ts CHANGED Viewed

@@ -31,6 +31,7 @@ declare const _default: {
     "chosen": "pf-m-chosen",
     "dragOver": "pf-m-drag-over",
     "expandable": "pf-m-expandable",
+    "animateExpand": "pf-m-animate-expand",
     "expanded": "pf-m-expanded",
     "disabled": "pf-m-disabled",
     "selected": "pf-m-selected",

package/css/components/DualListSelector/dual-list-selector.js CHANGED Viewed

@@ -33,6 +33,7 @@ exports.default = {
     "chosen": "pf-m-chosen",
     "dragOver": "pf-m-drag-over",
     "expandable": "pf-m-expandable",
+    "animateExpand": "pf-m-animate-expand",
     "expanded": "pf-m-expanded",
     "disabled": "pf-m-disabled",
     "selected": "pf-m-selected",

package/css/components/DualListSelector/dual-list-selector.mjs CHANGED Viewed

@@ -31,6 +31,7 @@ export default {
     "chosen": "pf-m-chosen",
     "dragOver": "pf-m-drag-over",
     "expandable": "pf-m-expandable",
+    "animateExpand": "pf-m-animate-expand",
     "expanded": "pf-m-expanded",
     "disabled": "pf-m-disabled",
     "selected": "pf-m-selected",

package/css/components/ExpandableSection/expandable-section.css CHANGED Viewed

@@ -16,6 +16,7 @@
   --pf-v6-c-expandable-section__content--TransitionDuration--slide: var(--pf-v6-c-expandable-section__content--TransitionDuration--collapse--slide);
   --pf-v6-c-expandable-section__content--TransitionDuration--fade: var(--pf-v6-c-expandable-section__content--TransitionDuration--collapse--fade);
   --pf-v6-c-expandable-section__content--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
+  --pf-v6-c-expandable-section__content--TransitionDelay--hide: var(--pf-v6-c-expandable-section__content--TransitionDuration--fade);
   --pf-v6-c-expandable-section__content--Opacity: 0;
   --pf-v6-c-expandable-section__content--TranslateY: 0;
   --pf-v6-c-expandable-section--m-expanded__content--Opacity: 1;
@@ -31,7 +32,7 @@
   --pf-v6-c-expandable-section--m-display-lg--BorderWidth: var(--pf-t--global--border--width--box--default);
   --pf-v6-c-expandable-section--m-display-lg--BorderColor: var(--pf-t--global--border--color--default);
   --pf-v6-c-expandable-section--m-display-lg--BorderRadius: var(--pf-t--global--border--radius--medium);
-  --pf-v6-c-expandable-section--m-display-lg--TransitionDelay: var(--pf-v6-c-expandable-section__content--TransitionDuration--fade);
+  --pf-v6-c-expandable-section--m-display-lg--TransitionDelay: var(--pf-v6-c-expandable-section__content--TransitionDuration--collapse--fade);
   --pf-v6-c-expandable-section--m-indented__content--PaddingInlineStart: calc(var(--pf-t--global--spacer--action--horizontal--plain--default) + var(--pf-t--global--spacer--gap--text-to-element--default) + var(--pf-v6-c-expandable-section__toggle-icon--MinWidth));
   --pf-v6-c-expandable-section--m-truncate__content--LineClamp: 3;
   --pf-v6-c-expandable-section--m-truncate--Gap: var(--pf-t--global--spacer--xs);
@@ -47,7 +48,10 @@
 .pf-v6-c-expandable-section {
   display: flex;
   flex-direction: column;
-  gap: var(--pf-v6-c-expandable-section--Gap);
+  gap: 0;
+  transition-delay: var(--pf-v6-c-expandable-section__content--TransitionDelay--hide);
+  transition-duration: 0s;
+  transition-property: gap, padding-block-end;
 }
 .pf-v6-c-expandable-section.pf-m-expanded {
   --pf-v6-c-expandable-section__toggle-icon--Rotate: var(--pf-v6-c-expandable-section--m-expanded__toggle-icon--Rotate);
@@ -57,7 +61,10 @@
   --pf-v6-c-expandable-section__content--TransitionDuration--fade: var(--pf-v6-c-expandable-section__content--TransitionDuration--expand--fade);
   --pf-v6-c-expandable-section__content--Opacity: var(--pf-v6-c-expandable-section--m-expanded__content--Opacity);
   --pf-v6-c-expandable-section__content--TranslateY: var(--pf-v6-c-expandable-section--m-expanded__content--TranslateY);
-  --pf-v6-c-expandable-section--m-display-lg--TransitionDelay: 0s;
+  --pf-v6-c-expandable-section__content--Visibility: auto;
+  --pf-v6-c-expandable-section__content--MaxHeight: 9999px;
+  --pf-v6-c-expandable-section__content--TransitionDelay--hide: 0s;
+  gap: var(--pf-v6-c-expandable-section--Gap);
 }
 .pf-v6-c-expandable-section.pf-m-limit-width {
   --pf-v6-c-expandable-section__content--MaxWidth: var(--pf-v6-c-expandable-section--m-limit-width__content--MaxWidth);
@@ -70,7 +77,6 @@
   background-color: var(--pf-v6-c-expandable-section--m-display-lg--BackgroundColor);
   border: var(--pf-v6-c-expandable-section--m-display-lg--BorderWidth) solid var(--pf-v6-c-expandable-section--m-display-lg--BorderColor);
   border-radius: var(--pf-v6-c-expandable-section--m-display-lg--BorderRadius);
-  transition: padding-block-end 0s var(--pf-v6-c-expandable-section--m-display-lg--TransitionDelay, 0s);
 }
 .pf-v6-c-expandable-section.pf-m-indented {
   --pf-v6-c-expandable-section__content--PaddingInlineStart: var(--pf-v6-c-expandable-section--m-indented__content--PaddingInlineStart);
@@ -109,20 +115,12 @@
   display: revert;
 }
 .pf-v6-c-expandable-section:where(:not(.pf-m-truncate)) .pf-v6-c-expandable-section__content {
-  display: none;
+  max-height: var(--pf-v6-c-expandable-section__content--MaxHeight, 0);
+  visibility: var(--pf-v6-c-expandable-section__content--Visibility, hidden);
   opacity: var(--pf-v6-c-expandable-section__content--Opacity);
+  transition-delay: 0s, 0s, var(--pf-v6-c-expandable-section__content--TransitionDelay--hide, 0s), var(--pf-v6-c-expandable-section__content--TransitionDelay--hide, 0s);
   transition-timing-function: var(--pf-v6-c-expandable-section__content--TransitionTimingFunction);
-  transition-duration: var(--pf-v6-c-expandable-section__content--TransitionDuration--fade), var(--pf-v6-c-expandable-section__content--TransitionDuration--slide), var(--pf-v6-c-expandable-section__content--TransitionDuration--fade);
-  transition-property: opacity, translate, display;
-  transition-behavior: allow-discrete;
+  transition-duration: var(--pf-v6-c-expandable-section__content--TransitionDuration--fade), var(--pf-v6-c-expandable-section__content--TransitionDuration--slide), 0s, 0s;
+  transition-property: opacity, translate, visibility, max-height;
   translate: 0 var(--pf-v6-c-expandable-section__content--TranslateY);
-}
-.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/css/components/Form/form.css CHANGED Viewed

@@ -78,6 +78,19 @@
   --pf-v6-c-form__field-group__field-group__field-group-body--GridColumn: 1 / 3;
   --pf-v6-c-form__field-group__field-group__field-group-toggle--field-group-body--GridColumn: 2 / 3;
   --pf-v6-c-form__field-group-body__field-group--last-child--MarginBlockEnd: calc(var(--pf-v6-c-form__field-group-body--PaddingBlockEnd) * -1);
+  --pf-v6-c-form__field-group-body--TranslateY: 0;
+  --pf-v6-c-form__field-group--m-expanded__field-group-body--TranslateY: 0;
+  --pf-v6-c-form__field-group-body--TransitionDuration--expand--slide: 0s;
+  --pf-v6-c-form__field-group-body--TransitionDuration--expand--fade: var(--pf-t--global--motion--duration--fade--default);
+  --pf-v6-c-form__field-group-body--TransitionDuration--collapse--slide: 0s;
+  --pf-v6-c-form__field-group-body--TransitionDuration--collapse--fade: var(--pf-t--global--motion--duration--fade--short);
+}
+@media screen and (prefers-reduced-motion: no-preference) {
+  .pf-v6-c-form {
+    --pf-v6-c-form__field-group-body--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
+    --pf-v6-c-form__field-group-body--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
+    --pf-v6-c-form__field-group-body--TranslateY: -.5rem;
+  }
 }
 .pf-v6-c-form {
@@ -434,6 +447,16 @@
 .pf-v6-c-form__field-group.pf-m-expanded > .pf-v6-c-form__field-group-toggle {
   --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;
+  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;
+  opacity: 1;
+  transition-delay: 0s;
+  transition-duration: var(--pf-v6-c-form__field-group-body--TransitionDuration--expand--fade), var(--pf-v6-c-form__field-group-body--TransitionDuration--expand--slide), 0s, 0s, 0s, 0s;
+  translate: 0 var(--pf-v6-c-form__field-group--m-expanded__field-group-body--TranslateY);
+}
 .pf-v6-c-form__field-group-toggle {
   grid-row: 1/2;
@@ -500,9 +523,17 @@
   display: grid;
   grid-column: var(--pf-v6-c-form__field-group-body--GridColumn);
   gap: var(--pf-v6-c-form__field-group-body--Gap);
-  padding-block-start: var(--pf-v6-c-form__field-group-body--PaddingBlockStart);
-  padding-block-end: var(--pf-v6-c-form__field-group-body--PaddingBlockEnd);
 }
+.pf-v6-c-form__field-group.pf-m-expandable > .pf-v6-c-form__field-group-body {
+  max-height: 0;
+  visibility: hidden;
+  opacity: 0;
+  transition-delay: 0s, 0s, var(--pf-v6-c-form__field-group-body--TransitionDuration--collapse--fade), var(--pf-v6-c-form__field-group-body--TransitionDuration--collapse--fade), var(--pf-v6-c-form__field-group-body--TransitionDuration--collapse--fade), var(--pf-v6-c-form__field-group-body--TransitionDuration--collapse--fade);
+  transition-duration: var(--pf-v6-c-form__field-group-body--TransitionDuration--collapse--fade), var(--pf-v6-c-form__field-group-body--TransitionDuration--collapse--slide), 0s, 0s, 0s, 0s;
+  transition-property: opacity, translate, visibility, max-height, padding-block-start, padding-block-end;
+  translate: 0 var(--pf-v6-c-form__field-group-body--TranslateY);
+}
 .pf-v6-c-form__field-group-body > .pf-v6-c-form__field-group:first-child {
   --pf-v6-c-form__field-group-toggle--PaddingBlockStart: 0;
   --pf-v6-c-form__field-group-header--PaddingBlockStart: 0;

package/css/components/Form/form.d.ts CHANGED Viewed

@@ -46,7 +46,8 @@ declare const _default: {
     "stack": "pf-m-stack",
     "inactive": "pf-m-inactive",
     "hidden": "pf-m-hidden",
-    "expanded": "pf-m-expanded"
+    "expanded": "pf-m-expanded",
+    "expandable": "pf-m-expandable"
   }
 };
 export default _default;

package/css/components/Form/form.js CHANGED Viewed

@@ -48,6 +48,7 @@ exports.default = {
     "stack": "pf-m-stack",
     "inactive": "pf-m-inactive",
     "hidden": "pf-m-hidden",
-    "expanded": "pf-m-expanded"
+    "expanded": "pf-m-expanded",
+    "expandable": "pf-m-expandable"
   }
 };

package/css/components/Form/form.mjs CHANGED Viewed

@@ -46,6 +46,7 @@ export default {
     "stack": "pf-m-stack",
     "inactive": "pf-m-inactive",
     "hidden": "pf-m-hidden",
-    "expanded": "pf-m-expanded"
+    "expanded": "pf-m-expanded",
+    "expandable": "pf-m-expandable"
   }
 };

package/css/components/Nav/nav.css CHANGED Viewed

@@ -52,9 +52,13 @@
   --pf-v6-c-nav__subnav--PaddingBlockStart: var(--pf-v6-c-nav__item--RowGap);
   --pf-v6-c-nav__subnav--PaddingBlockEnd: var(--pf-v6-c-nav__item--RowGap);
   --pf-v6-c-nav__subnav--PaddingInlineStart: var(--pf-t--global--spacer--md);
-  --pf-v6-c-nav__subnav--TransitionDuration--expand: var(--pf-t--global--motion--duration--slide-in--default);
-  --pf-v6-c-nav__subnav--TransitionDuration--collapse: var(--pf-t--global--motion--duration--slide-in--short);
+  --pf-v6-c-nav__subnav--TransitionDuration--expand: var(--pf-t--global--motion--duration--fade--default);
+  --pf-v6-c-nav__subnav--TransitionDuration--expand--slide: 0s;
+  --pf-v6-c-nav__subnav--TransitionDuration--collapse: var(--pf-t--global--motion--duration--fade--short);
+  --pf-v6-c-nav__subnav--TransitionDuration--collapse--slide: 0s;
   --pf-v6-c-nav__subnav--TransitionTimingFunction--expand: var(--pf-t--global--motion--timing-function--default);
+  --pf-v6-c-nav__subnav--TranslateY: 0;
+  --pf-v6-c-nav__subnav--hidden--TranslateY: 0;
   --pf-v6-c-nav__scroll-button--BorderColor: var(--pf-t--global--border--color--default);
   --pf-v6-c-nav__scroll-button--BorderWidth: var(--pf-t--global--border--width--divider--default);
   --pf-v6-c-nav__scroll-button--first-of-type--c-button--BorderStartStartRadius: var(--pf-t--global--border--radius--pill);
@@ -83,6 +87,13 @@
   --pf-v6-c-nav--m-horizontal--m-subnav__link--PaddingInlineStart: var(--pf-t--global--spacer--md);
   --pf-v6-c-nav--m-horizontal--m-subnav__link--PaddingInlineEnd: var(--pf-t--global--spacer--md);
 }
+@media screen and (prefers-reduced-motion: no-preference) {
+  .pf-v6-c-nav {
+    --pf-v6-c-nav__subnav--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
+    --pf-v6-c-nav__subnav--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
+    --pf-v6-c-nav__subnav--hidden--TranslateY: -.5rem;
+  }
+}
 .pf-v6-c-nav,
 .pf-v6-c-nav__section,
@@ -153,24 +164,27 @@
 .pf-v6-c-nav__subnav {
   --pf-v6-c-nav__list--RowGap: var(--pf-v6-c-nav__subnav--RowGap);
-  grid-template-rows: 1fr;
-  min-height: 0;
+  max-height: 9999px;
   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);
   overflow-y: clip;
-  transition-delay: 0s, var(--pf-v6-c-nav__subnav--TransitionDelay--expand--focus, 0s), var(--pf-v6-c-nav__subnav--TransitionDelay--expand--focus, 0s), var(--pf-v6-c-nav__subnav--TransitionDelay--expand--focus, 0s), var(--pf-v6-c-nav__subnav--TransitionDelay--expand--focus, 0s);
+  visibility: visible;
+  transition-delay: 0s, 0s, var(--pf-v6-c-nav__subnav--TransitionDelay--expand--focus, 0s), var(--pf-v6-c-nav__subnav--TransitionDelay--expand--focus, 0s), var(--pf-v6-c-nav__subnav--TransitionDelay--expand--focus, 0s), var(--pf-v6-c-nav__subnav--TransitionDelay--expand--focus, 0s);
   transition-timing-function: var(--pf-v6-c-nav__subnav--TransitionTimingFunction--expand);
-  transition-duration: var(--pf-v6-c-nav__subnav--TransitionDuration--expand), 0s, 0s, 0s, 0s;
-  transition-property: opacity, visibility, grid-template-rows, padding-block-start, padding-block-end;
+  transition-duration: var(--pf-v6-c-nav__subnav--TransitionDuration--expand), var(--pf-v6-c-nav__subnav--TransitionDuration--expand--slide), 0s, 0s, 0s, 0s;
+  transition-property: opacity, translate, visibility, max-height, padding-block-start, padding-block-end;
+  translate: 0 var(--pf-v6-c-nav__subnav--TranslateY);
 }
 .pf-v6-c-nav__subnav[hidden] {
   --pf-v6-c-nav__subnav--TransitionDelay--expand--focus: var(--pf-v6-c-nav__subnav--TransitionDuration--expand);
   --pf-v6-c-nav__subnav--TransitionDuration--expand: var(--pf-v6-c-nav__subnav--TransitionDuration--collapse);
+  --pf-v6-c-nav__subnav--TransitionDuration--expand--slide: var(--pf-v6-c-nav__subnav--TransitionDuration--collapse--slide);
   --pf-v6-c-nav__subnav--PaddingBlockStart: 0;
   --pf-v6-c-nav__subnav--PaddingBlockEnd: 0;
+  --pf-v6-c-nav__subnav--TranslateY: var(--pf-v6-c-nav__subnav--hidden--TranslateY);
   display: grid;
-  grid-template-rows: 0fr;
+  max-height: 0;
   visibility: hidden;
   opacity: 0;
 }

package/css/components/Spinner/spinner.css CHANGED Viewed

@@ -8,6 +8,7 @@
   --pf-v6-c-spinner--StrokeWidth: 10;
   --pf-v6-c-spinner__path--StrokeWidth: var(--pf-v6-c-spinner--StrokeWidth);
   --pf-v6-c-spinner__path--AnimationTimingFunction: ease-in-out;
+  --pf-v6-c-spinner--m-xs--diameter: var(--pf-t--global--icon--size--sm);
   --pf-v6-c-spinner--m-sm--diameter: var(--pf-t--global--icon--size--md);
   --pf-v6-c-spinner--m-md--diameter: var(--pf-t--global--icon--size--lg);
   --pf-v6-c-spinner--m-lg--diameter: var(--pf-t--global--icon--size--xl);
@@ -24,6 +25,10 @@
 .pf-v6-c-spinner.pf-m-inline {
   --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-inline--diameter);
 }
+.pf-v6-c-spinner.pf-m-xs {
+  --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-xs--diameter);
+  --pf-v6-c-spinner--StrokeWidth: 15;
+}
 .pf-v6-c-spinner.pf-m-sm {
   --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-sm--diameter);
 }

package/css/components/Spinner/spinner.d.ts CHANGED Viewed

@@ -2,6 +2,7 @@ import './spinner.css';
 declare const _default: {
   "modifiers": {
     "inline": "pf-m-inline",
+    "xs": "pf-m-xs",
     "sm": "pf-m-sm",
     "md": "pf-m-md",
     "lg": "pf-m-lg",

package/css/components/Spinner/spinner.js CHANGED Viewed

@@ -4,6 +4,7 @@ require('./spinner.css');
 exports.default = {
   "modifiers": {
     "inline": "pf-m-inline",
+    "xs": "pf-m-xs",
     "sm": "pf-m-sm",
     "md": "pf-m-md",
     "lg": "pf-m-lg",

package/css/components/Spinner/spinner.mjs CHANGED Viewed

@@ -2,6 +2,7 @@ import './spinner.css';
 export default {
   "modifiers": {
     "inline": "pf-m-inline",
+    "xs": "pf-m-xs",
     "sm": "pf-m-sm",
     "md": "pf-m-md",
     "lg": "pf-m-lg",

package/css/components/Table/table-grid.css CHANGED Viewed

@@ -34,6 +34,7 @@
   --pf-v6-c-table--cell--first-child--responsive--PaddingBlockStart: var(--pf-t--global--spacer--sm);
   --pf-v6-c-table--cell--responsive--PaddingInlineEnd: 0;
   --pf-v6-c-table--cell--responsive--PaddingInlineStart: 0;
+  --pf-v6-c-table--cell--responsive--th--FontWeight: var(--pf-t--global--font--weight--body--bold);
   --pf-v6-c-table--m-compact__tr--responsive--PaddingBlockStart: var(--pf-t--global--spacer--sm);
   --pf-v6-c-table--m-compact__tr--responsive--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
   --pf-v6-c-table--m-compact__tr__td--responsive--PaddingBlockStart: var(--pf-t--global--spacer--xs);
@@ -158,7 +159,7 @@
 }
 .pf-m-grid.pf-v6-c-table :where(.pf-v6-c-table__th, .pf-v6-c-table__td)[data-label]::before {
   position: revert;
-  font-weight: bold;
+  font-weight: var(--pf-v6-c-table--cell--responsive--th--FontWeight);
   text-align: start;
   content: attr(data-label);
 }
@@ -458,7 +459,7 @@
   }
   .pf-m-grid-md.pf-v6-c-table :where(.pf-v6-c-table__th, .pf-v6-c-table__td)[data-label]::before {
     position: revert;
-    font-weight: bold;
+    font-weight: var(--pf-v6-c-table--cell--responsive--th--FontWeight);
     text-align: start;
     content: attr(data-label);
   }
@@ -761,7 +762,7 @@
   }
   .pf-m-grid-lg.pf-v6-c-table :where(.pf-v6-c-table__th, .pf-v6-c-table__td)[data-label]::before {
     position: revert;
-    font-weight: bold;
+    font-weight: var(--pf-v6-c-table--cell--responsive--th--FontWeight);
     text-align: start;
     content: attr(data-label);
   }
@@ -1064,7 +1065,7 @@
   }
   .pf-m-grid-xl.pf-v6-c-table :where(.pf-v6-c-table__th, .pf-v6-c-table__td)[data-label]::before {
     position: revert;
-    font-weight: bold;
+    font-weight: var(--pf-v6-c-table--cell--responsive--th--FontWeight);
     text-align: start;
     content: attr(data-label);
   }
@@ -1367,7 +1368,7 @@
   }
   .pf-m-grid-2xl.pf-v6-c-table :where(.pf-v6-c-table__th, .pf-v6-c-table__td)[data-label]::before {
     position: revert;
-    font-weight: bold;
+    font-weight: var(--pf-v6-c-table--cell--responsive--th--FontWeight);
     text-align: start;
     content: attr(data-label);
   }

package/css/components/Tabs/tabs.css CHANGED Viewed

@@ -96,25 +96,28 @@
   --pf-v6-c-tabs__item--m-current__link--after--BorderColor: var(--pf-t--global--border--color--clicked);
   --pf-v6-c-tabs__item--m-current__link--after--BorderWidth: var(--pf-t--global--border--width--extra-strong);
   --pf-v6-c-tabs--link-accent--start: 0;
-  --pf-v6-c-tabs--link-accent--length: auto;
+  --pf-v6-c-tabs--link-accent--length: 0;
   --pf-v6-c-tabs--link-accent--color: var(--pf-v6-c-tabs__item--m-current__link--after--BorderColor);
   --pf-v6-c-tabs--link-accent--border-size: var(--pf-v6-c-tabs__item--m-current__link--after--BorderWidth);
+  --pf-v6-c-tabs--link-accent--TransitionDuration: var(--pf-t--global--motion--duration--md);
+  --pf-v6-c-tabs--link-accent--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
   --pf-v6-c-tabs--link-accent--InsetBlockStart: auto;
   --pf-v6-c-tabs--link-accent--InsetBlockEnd: 0;
-  --pf-v6-c-tabs--link-accent--InsetInlineStart: initial;
+  --pf-v6-c-tabs--link-accent--InsetInlineStart: 0;
   --pf-v6-c-tabs--link-accent--Width: initial;
   --pf-v6-c-tabs--link-accent--Height: 0;
   --pf-v6-c-tabs--link-accent--BorderBlockEndWidth: var(--pf-v6-c-tabs--link-accent--border-size);
   --pf-v6-c-tabs--link-accent--BorderInlineStartWidth: 0;
-  --pf-v6-c-tabs--m-vertical--link-accent--InsetBlockStart: initial;
+  --pf-v6-c-tabs--link-accent--TranslateX: var(--pf-v6-c-tabs--link-accent--start);
+  --pf-v6-c-tabs--link-accent--TranslateY: 0;
+  --pf-v6-c-tabs--link-accent--TransformOrigin: 0 center;
+  --pf-v6-c-tabs--m-vertical--link-accent--InsetBlockStart: 0;
   --pf-v6-c-tabs--m-vertical--link-accent--InsetBlockEnd: auto;
-  --pf-v6-c-tabs--m-vertical--link-accent--InsetInlineStart: 0;
-  --pf-v6-c-tabs--m-vertical--link-accent--Width: 0;
-  --pf-v6-c-tabs--m-vertical--link-accent--Height: initial;
   --pf-v6-c-tabs--m-vertical--link-accent--BorderBlockEndWidth: 0;
   --pf-v6-c-tabs--m-vertical--link-accent--BorderInlineStartWidth: var(--pf-v6-c-tabs--link-accent--border-size);
-  --pf-v6-c-tabs--link-accent--TransitionDuration: var(--pf-t--global--motion--duration--md);
-  --pf-v6-c-tabs--link-accent--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
+  --pf-v6-c-tabs--m-vertical--link-accent--TranslateX: 0;
+  --pf-v6-c-tabs--m-vertical--link-accent--TranslateY: var(--pf-v6-c-tabs--link-accent--start);
+  --pf-v6-c-tabs--m-vertical--link-accent--TransformOrigin: center 0;
   --pf-v6-c-tabs__scroll-button--PaddingBlockStart: var(--pf-t--global--spacer--sm);
   --pf-v6-c-tabs__scroll-button--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
   --pf-v6-c-tabs__scroll-button--PaddingInlineStart: var(--pf-t--global--spacer--sm);
@@ -274,11 +277,13 @@
   --pf-v6-c-tabs__list--ScrollSnapTypeAxis: var(--pf-v6-c-tabs--m-vertical__list--ScrollSnapTypeAxis);
   --pf-v6-c-tabs--link-accent--InsetBlockStart: var(--pf-v6-c-tabs--m-vertical--link-accent--InsetBlockStart);
   --pf-v6-c-tabs--link-accent--InsetBlockEnd: var(--pf-v6-c-tabs--m-vertical--link-accent--InsetBlockEnd);
-  --pf-v6-c-tabs--link-accent--InsetInlineStart: var(--pf-v6-c-tabs--m-vertical--link-accent--InsetInlineStart);
   --pf-v6-c-tabs--link-accent--Width: var(--pf-v6-c-tabs--m-vertical--link-accent--Width);
   --pf-v6-c-tabs--link-accent--Height: var(--pf-v6-c-tabs--m-vertical--link-accent--Height);
   --pf-v6-c-tabs--link-accent--BorderBlockEndWidth: var(--pf-v6-c-tabs--m-vertical--link-accent--BorderBlockEndWidth);
   --pf-v6-c-tabs--link-accent--BorderInlineStartWidth: var(--pf-v6-c-tabs--m-vertical--link-accent--BorderInlineStartWidth);
+  --pf-v6-c-tabs--link-accent--TranslateX: var(--pf-v6-c-tabs--m-vertical--link-accent--TranslateX);
+  --pf-v6-c-tabs--link-accent--TranslateY: var(--pf-v6-c-tabs--m-vertical--link-accent--TranslateY);
+  --pf-v6-c-tabs--link-accent--TransformOrigin: var(--pf-v6-c-tabs--m-vertical--link-accent--TransformOrigin);
   display: inline-flex;
   flex-direction: column;
   height: 100%;
@@ -855,15 +860,15 @@
 }
 @media (prefers-reduced-motion: no-preference) {
-  .pf-v6-c-tabs:not(.pf-m-box) .pf-v6-c-tabs__link::after,
-  .pf-v6-c-tabs:not(.pf-m-box) .pf-v6-c-tabs__item.pf-m-action::after {
+  .pf-v6-c-tabs.pf-m-animate-current:not(.pf-m-box) .pf-v6-c-tabs__link::after,
+  .pf-v6-c-tabs.pf-m-animate-current:not(.pf-m-box) .pf-v6-c-tabs__item.pf-m-action::after {
     content: revert;
   }
-  .pf-v6-c-tabs:not(.pf-m-box) .pf-v6-c-tabs__list::after {
+  .pf-v6-c-tabs.pf-m-animate-current:not(.pf-m-box) .pf-v6-c-tabs__list::after {
     position: absolute;
-    inset-block-start: var(--pf-v6-c-tabs--link-accent--InsetBlockStart, var(--pf-v6-c-tabs--link-accent--start));
+    inset-block-start: var(--pf-v6-c-tabs--link-accent--InsetBlockStart);
     inset-block-end: var(--pf-v6-c-tabs--link-accent--InsetBlockEnd);
-    inset-inline-start: var(--pf-v6-c-tabs--link-accent--InsetInlineStart, var(--pf-v6-c-tabs--link-accent--start));
+    inset-inline-start: var(--pf-v6-c-tabs--link-accent--InsetInlineStart);
     width: var(--pf-v6-c-tabs--link-accent--Width, var(--pf-v6-c-tabs--link-accent--length));
     height: var(--pf-v6-c-tabs--link-accent--Height, var(--pf-v6-c-tabs--link-accent--length));
     content: "";
@@ -872,7 +877,12 @@
     border-inline-start-width: var(--pf-v6-c-tabs--link-accent--BorderInlineStartWidth);
     transition-timing-function: var(--pf-v6-c-tabs--link-accent--TransitionTimingFunction);
     transition-duration: var(--pf-v6-c-tabs--link-accent--TransitionDuration);
-    transition-property: --pf-v6-c-tabs--link-accent--length, --pf-v6-c-tabs--link-accent--start, width;
+    transition-property: width, height, translate;
+    transform-origin: var(--pf-v6-c-tabs--link-accent--TransformOrigin);
+    translate: var(--pf-v6-c-tabs--link-accent--TranslateX) var(--pf-v6-c-tabs--link-accent--TranslateY);
+  }
+  :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-tabs.pf-m-animate-current:not(.pf-m-box) .pf-v6-c-tabs__list::after {
+    translate: calc(var(--pf-v6-c-tabs--link-accent--TranslateX) * var(--pf-v6-global--inverse--multiplier)) var(--pf-v6-c-tabs--link-accent--TranslateY);
   }
   .pf-v6-c-tabs.pf-m-initializing-accent {
     --pf-v6-c-tabs--link-accent--TransitionDuration: 0;

package/css/components/Tabs/tabs.d.ts CHANGED Viewed

@@ -65,6 +65,7 @@ declare const _default: {
     "insetLgOn_2xl": "pf-m-inset-lg-on-2xl",
     "insetXlOn_2xl": "pf-m-inset-xl-on-2xl",
     "inset_2xlOn_2xl": "pf-m-inset-2xl-on-2xl",
+    "animateCurrent": "pf-m-animate-current",
     "initializingAccent": "pf-m-initializing-accent"
   },
   "tabs": "pf-v6-c-tabs",

package/css/components/Tabs/tabs.js CHANGED Viewed

@@ -67,6 +67,7 @@ exports.default = {
     "insetLgOn_2xl": "pf-m-inset-lg-on-2xl",
     "insetXlOn_2xl": "pf-m-inset-xl-on-2xl",
     "inset_2xlOn_2xl": "pf-m-inset-2xl-on-2xl",
+    "animateCurrent": "pf-m-animate-current",
     "initializingAccent": "pf-m-initializing-accent"
   },
   "tabs": "pf-v6-c-tabs",

package/css/components/Tabs/tabs.mjs CHANGED Viewed

@@ -65,6 +65,7 @@ export default {
     "insetLgOn_2xl": "pf-m-inset-lg-on-2xl",
     "insetXlOn_2xl": "pf-m-inset-xl-on-2xl",
     "inset_2xlOn_2xl": "pf-m-inset-2xl-on-2xl",
+    "animateCurrent": "pf-m-animate-current",
     "initializingAccent": "pf-m-initializing-accent"
   },
   "tabs": "pf-v6-c-tabs",

package/css/components/TreeView/tree-view.css CHANGED Viewed

@@ -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/css/components/_index.css CHANGED Viewed

@@ -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 {
@@ -4745,6 +4744,17 @@ ul) {
   --pf-v6-c-dual-list-selector__menu--MinHeight: 12.5rem;
   --pf-v6-c-dual-list-selector__menu--MaxHeight: 20rem;
   --pf-v6-c-dual-list-selector__menu--MarginBlockStart: var(--pf-t--global--spacer--md);
+  --pf-v6-c-dual-list-selector__list--TransitionDuration--expand--slide: 0s;
+  --pf-v6-c-dual-list-selector__list--TransitionDuration--expand--fade: var(--pf-t--global--motion--duration--fade--default);
+  --pf-v6-c-dual-list-selector__list--TransitionDuration--collapse--slide: 0s;
+  --pf-v6-c-dual-list-selector__list--TransitionDuration--collapse--fade: var(--pf-t--global--motion--duration--fade--short);
+  --pf-v6-c-dual-list-selector__list--TransitionDuration--slide: var(--pf-v6-c-dual-list-selector__list--TransitionDuration--collapse--slide);
+  --pf-v6-c-dual-list-selector__list--TransitionDuration--fade: var(--pf-v6-c-dual-list-selector__list--TransitionDuration--collapse--fade);
+  --pf-v6-c-dual-list-selector__list--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
+  --pf-v6-c-dual-list-selector__list--Opacity: 0;
+  --pf-v6-c-dual-list-selector--m-expanded__list--Opacity: 1;
+  --pf-v6-c-dual-list-selector__list--TranslateY: 0;
+  --pf-v6-c-dual-list-selector--m-expanded__list--TranslateY: 0;
   --pf-v6-c-dual-list-selector__list-item-row--FontSize: var(--pf-t--global--font--size--sm);
   --pf-v6-c-dual-list-selector__list-item-row--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
   --pf-v6-c-dual-list-selector__list-item-row--hover--BackgroundColor: var(--pf-t--global--background--color--primary--hover);
@@ -4782,6 +4792,13 @@ ul) {
   --pf-v6-c-dual-list-selector__item-toggle-icon--MinWidth: var(--pf-v6-c-dual-list-selector__list-item-row--FontSize);
   --pf-v6-c-dual-list-selector__list-item--m-disabled__item-toggle-icon--Color: var(--pf-t--global--icon--color--disabled);
 }
+@media screen and (prefers-reduced-motion: no-preference) {
+  .pf-v6-c-dual-list-selector {
+    --pf-v6-c-dual-list-selector__list--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
+    --pf-v6-c-dual-list-selector__list--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
+    --pf-v6-c-dual-list-selector__list--TranslateY: -.5rem;
+  }
+}
 .pf-v6-c-dual-list-selector {
   display: grid;
@@ -4877,9 +4894,27 @@ ul) {
 .pf-v6-c-dual-list-selector__list-item.pf-m-expandable {
   --pf-v6-c-dual-list-selector__item--PaddingInlineStart: var(--pf-v6-c-dual-list-selector__item--m-expandable--PaddingInlineStart);
 }
+.pf-v6-c-dual-list-selector.pf-m-animate-expand .pf-v6-c-dual-list-selector__list-item.pf-m-expandable > .pf-v6-c-dual-list-selector__list {
+  max-height: 0;
+  visibility: hidden;
+  opacity: var(--pf-v6-c-dual-list-selector__list--Opacity);
+  transition-delay: 0s, 0s, var(--pf-v6-c-dual-list-selector__list--TransitionDuration--fade), var(--pf-v6-c-dual-list-selector__list--TransitionDuration--fade);
+  transition-timing-function: var(--pf-v6-c-dual-list-selector__list--TransitionTimingFunction);
+  transition-duration: var(--pf-v6-c-dual-list-selector__list--TransitionDuration--fade), var(--pf-v6-c-dual-list-selector__list--TransitionDuration--slide), 0s, 0s;
+  transition-property: opacity, translate, visibility, max-height;
+  translate: 0 var(--pf-v6-c-dual-list-selector__list--TranslateY);
+}
 .pf-v6-c-dual-list-selector__list-item.pf-m-expanded {
   --pf-v6-c-dual-list-selector__item-toggle-icon--Rotate: var(--pf-v6-c-dual-list-selector__list-item--m-expanded__item-toggle-icon--Rotate);
 }
+.pf-v6-c-dual-list-selector.pf-m-animate-expand .pf-v6-c-dual-list-selector__list-item.pf-m-expanded > .pf-v6-c-dual-list-selector__list {
+  max-height: 9999px;
+  visibility: revert;
+  opacity: var(--pf-v6-c-dual-list-selector--m-expanded__list--Opacity);
+  transition-delay: 0s;
+  transition-duration: var(--pf-v6-c-dual-list-selector__list--TransitionDuration--expand--fade), var(--pf-v6-c-dual-list-selector__list--TransitionDuration--expand--slide), 0s, 0s;
+  translate: 0 var(--pf-v6-c-dual-list-selector--m-expanded__list--TranslateY);
+}
 .pf-v6-c-dual-list-selector__list-item.pf-m-disabled {
   --pf-v6-c-dual-list-selector__item-text--Color: var(--pf-v6-c-dual-list-selector__list-item--m-disabled__item-text--Color);
   --pf-v6-c-dual-list-selector__item-toggle-icon--Color: var(--pf-v6-c-dual-list-selector__list-item--m-disabled__item-toggle-icon--Color);
@@ -6422,6 +6457,7 @@ ul) {
   --pf-v6-c-expandable-section__content--TransitionDuration--slide: var(--pf-v6-c-expandable-section__content--TransitionDuration--collapse--slide);
   --pf-v6-c-expandable-section__content--TransitionDuration--fade: var(--pf-v6-c-expandable-section__content--TransitionDuration--collapse--fade);
   --pf-v6-c-expandable-section__content--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
+  --pf-v6-c-expandable-section__content--TransitionDelay--hide: var(--pf-v6-c-expandable-section__content--TransitionDuration--fade);
   --pf-v6-c-expandable-section__content--Opacity: 0;
   --pf-v6-c-expandable-section__content--TranslateY: 0;
   --pf-v6-c-expandable-section--m-expanded__content--Opacity: 1;
@@ -6437,7 +6473,7 @@ ul) {
   --pf-v6-c-expandable-section--m-display-lg--BorderWidth: var(--pf-t--global--border--width--box--default);
   --pf-v6-c-expandable-section--m-display-lg--BorderColor: var(--pf-t--global--border--color--default);
   --pf-v6-c-expandable-section--m-display-lg--BorderRadius: var(--pf-t--global--border--radius--medium);
-  --pf-v6-c-expandable-section--m-display-lg--TransitionDelay: var(--pf-v6-c-expandable-section__content--TransitionDuration--fade);
+  --pf-v6-c-expandable-section--m-display-lg--TransitionDelay: var(--pf-v6-c-expandable-section__content--TransitionDuration--collapse--fade);
   --pf-v6-c-expandable-section--m-indented__content--PaddingInlineStart: calc(var(--pf-t--global--spacer--action--horizontal--plain--default) + var(--pf-t--global--spacer--gap--text-to-element--default) + var(--pf-v6-c-expandable-section__toggle-icon--MinWidth));
   --pf-v6-c-expandable-section--m-truncate__content--LineClamp: 3;
   --pf-v6-c-expandable-section--m-truncate--Gap: var(--pf-t--global--spacer--xs);
@@ -6453,7 +6489,10 @@ ul) {
 .pf-v6-c-expandable-section {
   display: flex;
   flex-direction: column;
-  gap: var(--pf-v6-c-expandable-section--Gap);
+  gap: 0;
+  transition-delay: var(--pf-v6-c-expandable-section__content--TransitionDelay--hide);
+  transition-duration: 0s;
+  transition-property: gap, padding-block-end;
 }
 .pf-v6-c-expandable-section.pf-m-expanded {
   --pf-v6-c-expandable-section__toggle-icon--Rotate: var(--pf-v6-c-expandable-section--m-expanded__toggle-icon--Rotate);
@@ -6463,7 +6502,10 @@ ul) {
   --pf-v6-c-expandable-section__content--TransitionDuration--fade: var(--pf-v6-c-expandable-section__content--TransitionDuration--expand--fade);
   --pf-v6-c-expandable-section__content--Opacity: var(--pf-v6-c-expandable-section--m-expanded__content--Opacity);
   --pf-v6-c-expandable-section__content--TranslateY: var(--pf-v6-c-expandable-section--m-expanded__content--TranslateY);
-  --pf-v6-c-expandable-section--m-display-lg--TransitionDelay: 0s;
+  --pf-v6-c-expandable-section__content--Visibility: auto;
+  --pf-v6-c-expandable-section__content--MaxHeight: 9999px;
+  --pf-v6-c-expandable-section__content--TransitionDelay--hide: 0s;
+  gap: var(--pf-v6-c-expandable-section--Gap);
 }
 .pf-v6-c-expandable-section.pf-m-limit-width {
   --pf-v6-c-expandable-section__content--MaxWidth: var(--pf-v6-c-expandable-section--m-limit-width__content--MaxWidth);
@@ -6476,7 +6518,6 @@ ul) {
   background-color: var(--pf-v6-c-expandable-section--m-display-lg--BackgroundColor);
   border: var(--pf-v6-c-expandable-section--m-display-lg--BorderWidth) solid var(--pf-v6-c-expandable-section--m-display-lg--BorderColor);
   border-radius: var(--pf-v6-c-expandable-section--m-display-lg--BorderRadius);
-  transition: padding-block-end 0s var(--pf-v6-c-expandable-section--m-display-lg--TransitionDelay, 0s);
 }
 .pf-v6-c-expandable-section.pf-m-indented {
   --pf-v6-c-expandable-section__content--PaddingInlineStart: var(--pf-v6-c-expandable-section--m-indented__content--PaddingInlineStart);
@@ -6515,23 +6556,15 @@ ul) {
   display: revert;
 }
 .pf-v6-c-expandable-section:where(:not(.pf-m-truncate)) .pf-v6-c-expandable-section__content {
-  display: none;
+  max-height: var(--pf-v6-c-expandable-section__content--MaxHeight, 0);
+  visibility: var(--pf-v6-c-expandable-section__content--Visibility, hidden);
   opacity: var(--pf-v6-c-expandable-section__content--Opacity);
+  transition-delay: 0s, 0s, var(--pf-v6-c-expandable-section__content--TransitionDelay--hide, 0s), var(--pf-v6-c-expandable-section__content--TransitionDelay--hide, 0s);
   transition-timing-function: var(--pf-v6-c-expandable-section__content--TransitionTimingFunction);
-  transition-duration: var(--pf-v6-c-expandable-section__content--TransitionDuration--fade), var(--pf-v6-c-expandable-section__content--TransitionDuration--slide), var(--pf-v6-c-expandable-section__content--TransitionDuration--fade);
-  transition-property: opacity, translate, display;
-  transition-behavior: allow-discrete;
+  transition-duration: var(--pf-v6-c-expandable-section__content--TransitionDuration--fade), var(--pf-v6-c-expandable-section__content--TransitionDuration--slide), 0s, 0s;
+  transition-property: opacity, translate, visibility, max-height;
   translate: 0 var(--pf-v6-c-expandable-section__content--TranslateY);
 }
-.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;
-  }
-}
 .pf-v6-c-file-upload {
   --pf-v6-c-file-upload--RowGap: var(--pf-t--global--spacer--gap--group--vertical);
@@ -6670,6 +6703,19 @@ ul) {
   --pf-v6-c-form__field-group__field-group__field-group-body--GridColumn: 1 / 3;
   --pf-v6-c-form__field-group__field-group__field-group-toggle--field-group-body--GridColumn: 2 / 3;
   --pf-v6-c-form__field-group-body__field-group--last-child--MarginBlockEnd: calc(var(--pf-v6-c-form__field-group-body--PaddingBlockEnd) * -1);
+  --pf-v6-c-form__field-group-body--TranslateY: 0;
+  --pf-v6-c-form__field-group--m-expanded__field-group-body--TranslateY: 0;
+  --pf-v6-c-form__field-group-body--TransitionDuration--expand--slide: 0s;
+  --pf-v6-c-form__field-group-body--TransitionDuration--expand--fade: var(--pf-t--global--motion--duration--fade--default);
+  --pf-v6-c-form__field-group-body--TransitionDuration--collapse--slide: 0s;
+  --pf-v6-c-form__field-group-body--TransitionDuration--collapse--fade: var(--pf-t--global--motion--duration--fade--short);
+}
+@media screen and (prefers-reduced-motion: no-preference) {
+  .pf-v6-c-form {
+    --pf-v6-c-form__field-group-body--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
+    --pf-v6-c-form__field-group-body--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
+    --pf-v6-c-form__field-group-body--TranslateY: -.5rem;
+  }
 }
 .pf-v6-c-form {
@@ -7026,6 +7072,16 @@ ul) {
 .pf-v6-c-form__field-group.pf-m-expanded > .pf-v6-c-form__field-group-toggle {
   --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;
+  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;
+  opacity: 1;
+  transition-delay: 0s;
+  transition-duration: var(--pf-v6-c-form__field-group-body--TransitionDuration--expand--fade), var(--pf-v6-c-form__field-group-body--TransitionDuration--expand--slide), 0s, 0s, 0s, 0s;
+  translate: 0 var(--pf-v6-c-form__field-group--m-expanded__field-group-body--TranslateY);
+}
 .pf-v6-c-form__field-group-toggle {
   grid-row: 1/2;
@@ -7092,9 +7148,17 @@ ul) {
   display: grid;
   grid-column: var(--pf-v6-c-form__field-group-body--GridColumn);
   gap: var(--pf-v6-c-form__field-group-body--Gap);
-  padding-block-start: var(--pf-v6-c-form__field-group-body--PaddingBlockStart);
-  padding-block-end: var(--pf-v6-c-form__field-group-body--PaddingBlockEnd);
 }
+.pf-v6-c-form__field-group.pf-m-expandable > .pf-v6-c-form__field-group-body {
+  max-height: 0;
+  visibility: hidden;
+  opacity: 0;
+  transition-delay: 0s, 0s, var(--pf-v6-c-form__field-group-body--TransitionDuration--collapse--fade), var(--pf-v6-c-form__field-group-body--TransitionDuration--collapse--fade), var(--pf-v6-c-form__field-group-body--TransitionDuration--collapse--fade), var(--pf-v6-c-form__field-group-body--TransitionDuration--collapse--fade);
+  transition-duration: var(--pf-v6-c-form__field-group-body--TransitionDuration--collapse--fade), var(--pf-v6-c-form__field-group-body--TransitionDuration--collapse--slide), 0s, 0s, 0s, 0s;
+  transition-property: opacity, translate, visibility, max-height, padding-block-start, padding-block-end;
+  translate: 0 var(--pf-v6-c-form__field-group-body--TranslateY);
+}
 .pf-v6-c-form__field-group-body > .pf-v6-c-form__field-group:first-child {
   --pf-v6-c-form__field-group-toggle--PaddingBlockStart: 0;
   --pf-v6-c-form__field-group-header--PaddingBlockStart: 0;
@@ -11330,9 +11394,13 @@ ul.pf-v6-c-list {
   --pf-v6-c-nav__subnav--PaddingBlockStart: var(--pf-v6-c-nav__item--RowGap);
   --pf-v6-c-nav__subnav--PaddingBlockEnd: var(--pf-v6-c-nav__item--RowGap);
   --pf-v6-c-nav__subnav--PaddingInlineStart: var(--pf-t--global--spacer--md);
-  --pf-v6-c-nav__subnav--TransitionDuration--expand: var(--pf-t--global--motion--duration--slide-in--default);
-  --pf-v6-c-nav__subnav--TransitionDuration--collapse: var(--pf-t--global--motion--duration--slide-in--short);
+  --pf-v6-c-nav__subnav--TransitionDuration--expand: var(--pf-t--global--motion--duration--fade--default);
+  --pf-v6-c-nav__subnav--TransitionDuration--expand--slide: 0s;
+  --pf-v6-c-nav__subnav--TransitionDuration--collapse: var(--pf-t--global--motion--duration--fade--short);
+  --pf-v6-c-nav__subnav--TransitionDuration--collapse--slide: 0s;
   --pf-v6-c-nav__subnav--TransitionTimingFunction--expand: var(--pf-t--global--motion--timing-function--default);
+  --pf-v6-c-nav__subnav--TranslateY: 0;
+  --pf-v6-c-nav__subnav--hidden--TranslateY: 0;
   --pf-v6-c-nav__scroll-button--BorderColor: var(--pf-t--global--border--color--default);
   --pf-v6-c-nav__scroll-button--BorderWidth: var(--pf-t--global--border--width--divider--default);
   --pf-v6-c-nav__scroll-button--first-of-type--c-button--BorderStartStartRadius: var(--pf-t--global--border--radius--pill);
@@ -11361,6 +11429,13 @@ ul.pf-v6-c-list {
   --pf-v6-c-nav--m-horizontal--m-subnav__link--PaddingInlineStart: var(--pf-t--global--spacer--md);
   --pf-v6-c-nav--m-horizontal--m-subnav__link--PaddingInlineEnd: var(--pf-t--global--spacer--md);
 }
+@media screen and (prefers-reduced-motion: no-preference) {
+  .pf-v6-c-nav {
+    --pf-v6-c-nav__subnav--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
+    --pf-v6-c-nav__subnav--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
+    --pf-v6-c-nav__subnav--hidden--TranslateY: -.5rem;
+  }
+}
 .pf-v6-c-nav,
 .pf-v6-c-nav__section,
@@ -11431,24 +11506,27 @@ ul.pf-v6-c-list {
 .pf-v6-c-nav__subnav {
   --pf-v6-c-nav__list--RowGap: var(--pf-v6-c-nav__subnav--RowGap);
-  grid-template-rows: 1fr;
-  min-height: 0;
+  max-height: 9999px;
   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);
   overflow-y: clip;
-  transition-delay: 0s, var(--pf-v6-c-nav__subnav--TransitionDelay--expand--focus, 0s), var(--pf-v6-c-nav__subnav--TransitionDelay--expand--focus, 0s), var(--pf-v6-c-nav__subnav--TransitionDelay--expand--focus, 0s), var(--pf-v6-c-nav__subnav--TransitionDelay--expand--focus, 0s);
+  visibility: visible;
+  transition-delay: 0s, 0s, var(--pf-v6-c-nav__subnav--TransitionDelay--expand--focus, 0s), var(--pf-v6-c-nav__subnav--TransitionDelay--expand--focus, 0s), var(--pf-v6-c-nav__subnav--TransitionDelay--expand--focus, 0s), var(--pf-v6-c-nav__subnav--TransitionDelay--expand--focus, 0s);
   transition-timing-function: var(--pf-v6-c-nav__subnav--TransitionTimingFunction--expand);
-  transition-duration: var(--pf-v6-c-nav__subnav--TransitionDuration--expand), 0s, 0s, 0s, 0s;
-  transition-property: opacity, visibility, grid-template-rows, padding-block-start, padding-block-end;
+  transition-duration: var(--pf-v6-c-nav__subnav--TransitionDuration--expand), var(--pf-v6-c-nav__subnav--TransitionDuration--expand--slide), 0s, 0s, 0s, 0s;
+  transition-property: opacity, translate, visibility, max-height, padding-block-start, padding-block-end;
+  translate: 0 var(--pf-v6-c-nav__subnav--TranslateY);
 }
 .pf-v6-c-nav__subnav[hidden] {
   --pf-v6-c-nav__subnav--TransitionDelay--expand--focus: var(--pf-v6-c-nav__subnav--TransitionDuration--expand);
   --pf-v6-c-nav__subnav--TransitionDuration--expand: var(--pf-v6-c-nav__subnav--TransitionDuration--collapse);
+  --pf-v6-c-nav__subnav--TransitionDuration--expand--slide: var(--pf-v6-c-nav__subnav--TransitionDuration--collapse--slide);
   --pf-v6-c-nav__subnav--PaddingBlockStart: 0;
   --pf-v6-c-nav__subnav--PaddingBlockEnd: 0;
+  --pf-v6-c-nav__subnav--TranslateY: var(--pf-v6-c-nav__subnav--hidden--TranslateY);
   display: grid;
-  grid-template-rows: 0fr;
+  max-height: 0;
   visibility: hidden;
   opacity: 0;
 }
@@ -14935,6 +15013,7 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
   --pf-v6-c-spinner--StrokeWidth: 10;
   --pf-v6-c-spinner__path--StrokeWidth: var(--pf-v6-c-spinner--StrokeWidth);
   --pf-v6-c-spinner__path--AnimationTimingFunction: ease-in-out;
+  --pf-v6-c-spinner--m-xs--diameter: var(--pf-t--global--icon--size--sm);
   --pf-v6-c-spinner--m-sm--diameter: var(--pf-t--global--icon--size--md);
   --pf-v6-c-spinner--m-md--diameter: var(--pf-t--global--icon--size--lg);
   --pf-v6-c-spinner--m-lg--diameter: var(--pf-t--global--icon--size--xl);
@@ -14951,6 +15030,10 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
 .pf-v6-c-spinner.pf-m-inline {
   --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-inline--diameter);
 }
+.pf-v6-c-spinner.pf-m-xs {
+  --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-xs--diameter);
+  --pf-v6-c-spinner--StrokeWidth: 15;
+}
 .pf-v6-c-spinner.pf-m-sm {
   --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-sm--diameter);
 }
@@ -15232,6 +15315,7 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
   --pf-v6-c-table--cell--first-child--responsive--PaddingBlockStart: var(--pf-t--global--spacer--sm);
   --pf-v6-c-table--cell--responsive--PaddingInlineEnd: 0;
   --pf-v6-c-table--cell--responsive--PaddingInlineStart: 0;
+  --pf-v6-c-table--cell--responsive--th--FontWeight: var(--pf-t--global--font--weight--body--bold);
   --pf-v6-c-table--m-compact__tr--responsive--PaddingBlockStart: var(--pf-t--global--spacer--sm);
   --pf-v6-c-table--m-compact__tr--responsive--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
   --pf-v6-c-table--m-compact__tr__td--responsive--PaddingBlockStart: var(--pf-t--global--spacer--xs);
@@ -15356,7 +15440,7 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
 }
 .pf-m-grid.pf-v6-c-table :where(.pf-v6-c-table__th, .pf-v6-c-table__td)[data-label]::before {
   position: revert;
-  font-weight: bold;
+  font-weight: var(--pf-v6-c-table--cell--responsive--th--FontWeight);
   text-align: start;
   content: attr(data-label);
 }
@@ -15656,7 +15740,7 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
   }
   .pf-m-grid-md.pf-v6-c-table :where(.pf-v6-c-table__th, .pf-v6-c-table__td)[data-label]::before {
     position: revert;
-    font-weight: bold;
+    font-weight: var(--pf-v6-c-table--cell--responsive--th--FontWeight);
     text-align: start;
     content: attr(data-label);
   }
@@ -15959,7 +16043,7 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
   }
   .pf-m-grid-lg.pf-v6-c-table :where(.pf-v6-c-table__th, .pf-v6-c-table__td)[data-label]::before {
     position: revert;
-    font-weight: bold;
+    font-weight: var(--pf-v6-c-table--cell--responsive--th--FontWeight);
     text-align: start;
     content: attr(data-label);
   }
@@ -16262,7 +16346,7 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
   }
   .pf-m-grid-xl.pf-v6-c-table :where(.pf-v6-c-table__th, .pf-v6-c-table__td)[data-label]::before {
     position: revert;
-    font-weight: bold;
+    font-weight: var(--pf-v6-c-table--cell--responsive--th--FontWeight);
     text-align: start;
     content: attr(data-label);
   }
@@ -16565,7 +16649,7 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
   }
   .pf-m-grid-2xl.pf-v6-c-table :where(.pf-v6-c-table__th, .pf-v6-c-table__td)[data-label]::before {
     position: revert;
-    font-weight: bold;
+    font-weight: var(--pf-v6-c-table--cell--responsive--th--FontWeight);
     text-align: start;
     content: attr(data-label);
   }
@@ -18654,25 +18738,28 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
   --pf-v6-c-tabs__item--m-current__link--after--BorderColor: var(--pf-t--global--border--color--clicked);
   --pf-v6-c-tabs__item--m-current__link--after--BorderWidth: var(--pf-t--global--border--width--extra-strong);
   --pf-v6-c-tabs--link-accent--start: 0;
-  --pf-v6-c-tabs--link-accent--length: auto;
+  --pf-v6-c-tabs--link-accent--length: 0;
   --pf-v6-c-tabs--link-accent--color: var(--pf-v6-c-tabs__item--m-current__link--after--BorderColor);
   --pf-v6-c-tabs--link-accent--border-size: var(--pf-v6-c-tabs__item--m-current__link--after--BorderWidth);
+  --pf-v6-c-tabs--link-accent--TransitionDuration: var(--pf-t--global--motion--duration--md);
+  --pf-v6-c-tabs--link-accent--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
   --pf-v6-c-tabs--link-accent--InsetBlockStart: auto;
   --pf-v6-c-tabs--link-accent--InsetBlockEnd: 0;
-  --pf-v6-c-tabs--link-accent--InsetInlineStart: initial;
+  --pf-v6-c-tabs--link-accent--InsetInlineStart: 0;
   --pf-v6-c-tabs--link-accent--Width: initial;
   --pf-v6-c-tabs--link-accent--Height: 0;
   --pf-v6-c-tabs--link-accent--BorderBlockEndWidth: var(--pf-v6-c-tabs--link-accent--border-size);
   --pf-v6-c-tabs--link-accent--BorderInlineStartWidth: 0;
-  --pf-v6-c-tabs--m-vertical--link-accent--InsetBlockStart: initial;
+  --pf-v6-c-tabs--link-accent--TranslateX: var(--pf-v6-c-tabs--link-accent--start);
+  --pf-v6-c-tabs--link-accent--TranslateY: 0;
+  --pf-v6-c-tabs--link-accent--TransformOrigin: 0 center;
+  --pf-v6-c-tabs--m-vertical--link-accent--InsetBlockStart: 0;
   --pf-v6-c-tabs--m-vertical--link-accent--InsetBlockEnd: auto;
-  --pf-v6-c-tabs--m-vertical--link-accent--InsetInlineStart: 0;
-  --pf-v6-c-tabs--m-vertical--link-accent--Width: 0;
-  --pf-v6-c-tabs--m-vertical--link-accent--Height: initial;
   --pf-v6-c-tabs--m-vertical--link-accent--BorderBlockEndWidth: 0;
   --pf-v6-c-tabs--m-vertical--link-accent--BorderInlineStartWidth: var(--pf-v6-c-tabs--link-accent--border-size);
-  --pf-v6-c-tabs--link-accent--TransitionDuration: var(--pf-t--global--motion--duration--md);
-  --pf-v6-c-tabs--link-accent--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
+  --pf-v6-c-tabs--m-vertical--link-accent--TranslateX: 0;
+  --pf-v6-c-tabs--m-vertical--link-accent--TranslateY: var(--pf-v6-c-tabs--link-accent--start);
+  --pf-v6-c-tabs--m-vertical--link-accent--TransformOrigin: center 0;
   --pf-v6-c-tabs__scroll-button--PaddingBlockStart: var(--pf-t--global--spacer--sm);
   --pf-v6-c-tabs__scroll-button--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
   --pf-v6-c-tabs__scroll-button--PaddingInlineStart: var(--pf-t--global--spacer--sm);
@@ -18832,11 +18919,13 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
   --pf-v6-c-tabs__list--ScrollSnapTypeAxis: var(--pf-v6-c-tabs--m-vertical__list--ScrollSnapTypeAxis);
   --pf-v6-c-tabs--link-accent--InsetBlockStart: var(--pf-v6-c-tabs--m-vertical--link-accent--InsetBlockStart);
   --pf-v6-c-tabs--link-accent--InsetBlockEnd: var(--pf-v6-c-tabs--m-vertical--link-accent--InsetBlockEnd);
-  --pf-v6-c-tabs--link-accent--InsetInlineStart: var(--pf-v6-c-tabs--m-vertical--link-accent--InsetInlineStart);
   --pf-v6-c-tabs--link-accent--Width: var(--pf-v6-c-tabs--m-vertical--link-accent--Width);
   --pf-v6-c-tabs--link-accent--Height: var(--pf-v6-c-tabs--m-vertical--link-accent--Height);
   --pf-v6-c-tabs--link-accent--BorderBlockEndWidth: var(--pf-v6-c-tabs--m-vertical--link-accent--BorderBlockEndWidth);
   --pf-v6-c-tabs--link-accent--BorderInlineStartWidth: var(--pf-v6-c-tabs--m-vertical--link-accent--BorderInlineStartWidth);
+  --pf-v6-c-tabs--link-accent--TranslateX: var(--pf-v6-c-tabs--m-vertical--link-accent--TranslateX);
+  --pf-v6-c-tabs--link-accent--TranslateY: var(--pf-v6-c-tabs--m-vertical--link-accent--TranslateY);
+  --pf-v6-c-tabs--link-accent--TransformOrigin: var(--pf-v6-c-tabs--m-vertical--link-accent--TransformOrigin);
   display: inline-flex;
   flex-direction: column;
   height: 100%;
@@ -19413,15 +19502,15 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
 }
 @media (prefers-reduced-motion: no-preference) {
-  .pf-v6-c-tabs:not(.pf-m-box) .pf-v6-c-tabs__link::after,
-  .pf-v6-c-tabs:not(.pf-m-box) .pf-v6-c-tabs__item.pf-m-action::after {
+  .pf-v6-c-tabs.pf-m-animate-current:not(.pf-m-box) .pf-v6-c-tabs__link::after,
+  .pf-v6-c-tabs.pf-m-animate-current:not(.pf-m-box) .pf-v6-c-tabs__item.pf-m-action::after {
     content: revert;
   }
-  .pf-v6-c-tabs:not(.pf-m-box) .pf-v6-c-tabs__list::after {
+  .pf-v6-c-tabs.pf-m-animate-current:not(.pf-m-box) .pf-v6-c-tabs__list::after {
     position: absolute;
-    inset-block-start: var(--pf-v6-c-tabs--link-accent--InsetBlockStart, var(--pf-v6-c-tabs--link-accent--start));
+    inset-block-start: var(--pf-v6-c-tabs--link-accent--InsetBlockStart);
     inset-block-end: var(--pf-v6-c-tabs--link-accent--InsetBlockEnd);
-    inset-inline-start: var(--pf-v6-c-tabs--link-accent--InsetInlineStart, var(--pf-v6-c-tabs--link-accent--start));
+    inset-inline-start: var(--pf-v6-c-tabs--link-accent--InsetInlineStart);
     width: var(--pf-v6-c-tabs--link-accent--Width, var(--pf-v6-c-tabs--link-accent--length));
     height: var(--pf-v6-c-tabs--link-accent--Height, var(--pf-v6-c-tabs--link-accent--length));
     content: "";
@@ -19430,7 +19519,12 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
     border-inline-start-width: var(--pf-v6-c-tabs--link-accent--BorderInlineStartWidth);
     transition-timing-function: var(--pf-v6-c-tabs--link-accent--TransitionTimingFunction);
     transition-duration: var(--pf-v6-c-tabs--link-accent--TransitionDuration);
-    transition-property: --pf-v6-c-tabs--link-accent--length, --pf-v6-c-tabs--link-accent--start, width;
+    transition-property: width, height, translate;
+    transform-origin: var(--pf-v6-c-tabs--link-accent--TransformOrigin);
+    translate: var(--pf-v6-c-tabs--link-accent--TranslateX) var(--pf-v6-c-tabs--link-accent--TranslateY);
+  }
+  :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-tabs.pf-m-animate-current:not(.pf-m-box) .pf-v6-c-tabs__list::after {
+    translate: calc(var(--pf-v6-c-tabs--link-accent--TranslateX) * var(--pf-v6-global--inverse--multiplier)) var(--pf-v6-c-tabs--link-accent--TranslateY);
   }
   .pf-v6-c-tabs.pf-m-initializing-accent {
     --pf-v6-c-tabs--link-accent--TransitionDuration: 0;
@@ -22380,10 +22474,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 {
@@ -22395,8 +22492,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/css/components/_index.d.ts CHANGED Viewed

@@ -490,6 +490,7 @@ declare const _default: {
     "dragging": "pf-m-dragging",
     "dragOutside": "pf-m-drag-outside",
     "chosen": "pf-m-chosen",
+    "animateExpand": "pf-m-animate-expand",
     "check": "pf-m-check",
     "top": "pf-m-top",
     "static": "pf-m-static",
@@ -814,6 +815,7 @@ declare const _default: {
     "treeViewGrid_2xl": "pf-m-tree-view-grid-2xl",
     "noBorderBottom": "pf-m-no-border-bottom",
     "subtab": "pf-m-subtab",
+    "animateCurrent": "pf-m-animate-current",
     "initializingAccent": "pf-m-initializing-accent",
     "hint": "pf-m-hint",
     "stacked": "pf-m-stacked",

package/css/components/_index.js CHANGED Viewed

@@ -492,6 +492,7 @@ exports.default = {
     "dragging": "pf-m-dragging",
     "dragOutside": "pf-m-drag-outside",
     "chosen": "pf-m-chosen",
+    "animateExpand": "pf-m-animate-expand",
     "check": "pf-m-check",
     "top": "pf-m-top",
     "static": "pf-m-static",
@@ -816,6 +817,7 @@ exports.default = {
     "treeViewGrid_2xl": "pf-m-tree-view-grid-2xl",
     "noBorderBottom": "pf-m-no-border-bottom",
     "subtab": "pf-m-subtab",
+    "animateCurrent": "pf-m-animate-current",
     "initializingAccent": "pf-m-initializing-accent",
     "hint": "pf-m-hint",
     "stacked": "pf-m-stacked",

package/css/components/_index.mjs CHANGED Viewed

@@ -490,6 +490,7 @@ export default {
     "dragging": "pf-m-dragging",
     "dragOutside": "pf-m-drag-outside",
     "chosen": "pf-m-chosen",
+    "animateExpand": "pf-m-animate-expand",
     "check": "pf-m-check",
     "top": "pf-m-top",
     "static": "pf-m-static",
@@ -814,6 +815,7 @@ export default {
     "treeViewGrid_2xl": "pf-m-tree-view-grid-2xl",
     "noBorderBottom": "pf-m-no-border-bottom",
     "subtab": "pf-m-subtab",
+    "animateCurrent": "pf-m-animate-current",
     "initializingAccent": "pf-m-initializing-accent",
     "hint": "pf-m-hint",
     "stacked": "pf-m-stacked",

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-styles",
-  "version": "6.3.0-prerelease.2",
+  "version": "6.3.0-prerelease.4",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/esm/index.d.ts",
@@ -19,10 +19,10 @@
     "clean": "rimraf dist css"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "6.3.0-prerelease.15",
+    "@patternfly/patternfly": "6.3.0-prerelease.24",
     "change-case": "^5.4.4",
     "fs-extra": "^11.3.0"
   },
   "license": "MIT",
-  "gitHead": "cc484047417c328ce89f0c01641c6f845cdbc43f"
+  "gitHead": "2a9c798759283f3a0d482ec6ffd3dd9eb0d3807d"
 }