@patternfly/patternfly 6.3.0-prerelease.10 → 6.3.0-prerelease.12

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 (10) hide show
  1. package/components/Accordion/accordion.css +56 -1
  2. package/components/Accordion/accordion.scss +60 -4
  3. package/components/ExpandableSection/expandable-section.css +30 -0
  4. package/components/ExpandableSection/expandable-section.scss +30 -0
  5. package/components/_index.css +86 -1
  6. package/package.json +2 -2
  7. package/patternfly-no-globals.css +86 -1
  8. package/patternfly.css +86 -1
  9. package/patternfly.min.css +1 -1
  10. package/patternfly.min.css.map +1 -1
package/patternfly-no-globals.css CHANGED
@@ -7667,6 +7667,7 @@
7667
7667
  --pf-v6-c-accordion__toggle--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
7668
7668
  --pf-v6-c-accordion__toggle--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
7669
7669
  --pf-v6-c-accordion__toggle--BorderRadius: var(--pf-t--global--border--radius--small);
7670
+ --pf-v6-c-accordion__toggle--ZIndex: var(--pf-t--global--z-index--xs);
7670
7671
  --pf-v6-c-accordion--m-toggle-start__toggle--ColumnGap: var(--pf-t--global--spacer--gap--text-to-element--default);
7671
7672
  --pf-v6-c-accordion__toggle-text--Color: var(--pf-t--global--text--color--regular);
7672
7673
  --pf-v6-c-accordion__toggle-text--FontWeight: var(--pf-t--global--font--weight--body--default);
@@ -7684,6 +7685,24 @@
7684
7685
  --pf-v6-c-accordion__expandable-content--Color: var(--pf-t--global--text--color--regular);
7685
7686
  --pf-v6-c-accordion__expandable-content--FontSize: var(--pf-t--global--font--size--body--default);
7686
7687
  --pf-v6-c-accordion__expandable-content--m-fixed--MaxHeight: 9.375rem;
7688
+ --pf-v6-c-accordion__item--before--TransitionDuration--expand--fade: var(--pf-t--global--motion--duration--fade--default);
7689
+ --pf-v6-c-accordion__item--before--TransitionDuration--collapse--fade: var(--pf-t--global--motion--duration--fade--short);
7690
+ --pf-v6-c-accordion__item--before--TransitionDuration--fade: var(--pf-v6-c-accordion__item--before--TransitionDuration--collapse--fade);
7691
+ --pf-v6-c-accordion__item--before--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
7692
+ --pf-v6-c-accordion__item--before--Opacity: 0;
7693
+ --pf-v6-c-accordion__item--m-expanded--before--Opacity: 1;
7694
+ --pf-v6-c-accordion__item--m-expanded--before--TranslateY: 0;
7695
+ --pf-v6-c-accordion__expandable-content--TransitionDuration--collapse--slide: 0s;
7696
+ --pf-v6-c-accordion__expandable-content--TransitionDuration--collapse--fade: var(--pf-t--global--motion--duration--fade--short);
7697
+ --pf-v6-c-accordion__expandable-content--TransitionDuration--expand--slide: 0s;
7698
+ --pf-v6-c-accordion__expandable-content--TransitionDuration--expand--fade: var(--pf-t--global--motion--duration--fade--default);
7699
+ --pf-v6-c-accordion__expandable-content--TransitionDuration--slide: var(--pf-v6-c-accordion__expandable-content--TransitionDuration--collapse--slide);
7700
+ --pf-v6-c-accordion__expandable-content--TransitionDuration--fade: var(--pf-v6-c-accordion__expandable-content--TransitionDuration--collapse--fade);
7701
+ --pf-v6-c-accordion__expandable-content--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
7702
+ --pf-v6-c-accordion__expandable-content--Opacity: 0;
7703
+ --pf-v6-c-accordion__item--m-expanded__expandable-content--Opacity: 1;
7704
+ --pf-v6-c-accordion__expandable-content--TranslateY: 0;
7705
+ --pf-v6-c-accordion__item--m-expanded__expandable-content--TranslateY: 0;
7687
7706
  --pf-v6-c-accordion__expandable-content-body--PaddingBlockStart: var(--pf-t--global--spacer--sm);
7688
7707
  --pf-v6-c-accordion__expandable-content-body--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
7689
7708
  --pf-v6-c-accordion__expandable-content-body--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
@@ -7703,6 +7722,16 @@
7703
7722
  --pf-v6-c-accordion__item--m-bordered--BorderBlockEndWidth: var(--pf-t--global--border--width--divider--default);
7704
7723
  --pf-v6-c-accordion__item--m-bordered--BorderBlockEndColor: var(--pf-t--global--border--color--default);
7705
7724
  }
7725
+ @media screen and (prefers-reduced-motion: no-preference) {
7726
+ .pf-v6-c-accordion {
7727
+ --pf-v6-c-accordion__item--before--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
7728
+ --pf-v6-c-accordion__item--before--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
7729
+ --pf-v6-c-accordion__item--before--TranslateY: -.5rem;
7730
+ --pf-v6-c-accordion__expandable-content--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
7731
+ --pf-v6-c-accordion__expandable-content--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
7732
+ --pf-v6-c-accordion__expandable-content--TranslateY: -.5rem;
7733
+ }
7734
+ }
7706
7735
 
7707
7736
  .pf-v6-c-accordion {
7708
7737
  display: flex;
@@ -7736,18 +7765,39 @@
7736
7765
  }
7737
7766
 
7738
7767
  .pf-v6-c-accordion__item {
7768
+ position: relative;
7769
+ }
7770
+ .pf-v6-c-accordion__item::before {
7771
+ position: absolute;
7772
+ inset: 0;
7773
+ pointer-events: none;
7774
+ content: "";
7775
+ background-color: var(--pf-v6-c-accordion__item--m-expanded--BackgroundColor);
7739
7776
  border-radius: var(--pf-v6-c-accordion__item--BorderRadius);
7777
+ opacity: var(--pf-v6-c-accordion__item--before--Opacity);
7778
+ transition-timing-function: var(--pf-v6-c-accordion__item--before--TransitionTimingFunction);
7779
+ transition-duration: var(--pf-v6-c-accordion__item--before--TransitionDuration--fade);
7780
+ transition-property: opacity;
7740
7781
  }
7741
7782
  .pf-v6-c-accordion__item.pf-m-expanded {
7742
7783
  --pf-v6-c-accordion__toggle--PaddingBlockEnd: var(--pf-v6-c-accordion__toggle--m-expanded--PaddingBlockEnd);
7743
7784
  --pf-v6-c-accordion__toggle-text--FontWeight: var(--pf-v6-c-accordion__toggle--m-expanded__toggle-text--FontWeight);
7744
- background-color: var(--pf-v6-c-accordion__item--m-expanded--BackgroundColor);
7785
+ --pf-v6-c-accordion__item--before--TransitionDuration--slide: var(--pf-v6-c-accordion__item--before--TransitionDuration--expand--slide);
7786
+ --pf-v6-c-accordion__item--before--TransitionDuration--fade: var(--pf-v6-c-accordion__item--before--TransitionDuration--expand--fade);
7787
+ --pf-v6-c-accordion__item--before--Opacity: var(--pf-v6-c-accordion__item--m-expanded--before--Opacity);
7788
+ --pf-v6-c-accordion__item--before--TranslateY: var(--pf-v6-c-accordion__item--m-expanded--before--TranslateY);
7789
+ --pf-v6-c-accordion__expandable-content--TransitionDuration--slide: var(--pf-v6-c-accordion__expandable-content--TransitionDuration--expand--slide);
7790
+ --pf-v6-c-accordion__expandable-content--TransitionDuration--fade: var(--pf-v6-c-accordion__expandable-content--TransitionDuration--expand--fade);
7791
+ --pf-v6-c-accordion__expandable-content--Opacity: var(--pf-v6-c-accordion__item--m-expanded__expandable-content--Opacity);
7792
+ --pf-v6-c-accordion__expandable-content--TranslateY: var(--pf-v6-c-accordion__item--m-expanded__expandable-content--TranslateY);
7745
7793
  }
7746
7794
  .pf-v6-c-accordion__item.pf-m-expanded .pf-v6-c-accordion__toggle-icon {
7747
7795
  transform: rotate(var(--pf-v6-c-accordion__toggle--m-expanded__toggle-icon--Rotate));
7748
7796
  }
7749
7797
 
7750
7798
  .pf-v6-c-accordion__toggle {
7799
+ position: relative;
7800
+ z-index: var(--pf-v6-c-accordion__toggle--ZIndex);
7751
7801
  display: flex;
7752
7802
  column-gap: var(--pf-v6-c-accordion__toggle--ColumnGap);
7753
7803
  align-items: center;
@@ -7791,6 +7841,11 @@
7791
7841
  color: var(--pf-v6-c-accordion__expandable-content--Color);
7792
7842
  background-color: var(--pf-v6-c-accordion__expandable-content--BackgroundColor);
7793
7843
  border-radius: var(--pf-v6-c-accordion__expandable-content--BorderRadius);
7844
+ opacity: var(--pf-v6-c-accordion__expandable-content--Opacity);
7845
+ transition-timing-function: var(--pf-v6-c-accordion__expandable-content--TransitionTimingFunction);
7846
+ transition-duration: var(--pf-v6-c-accordion__expandable-content--TransitionDuration--fade), var(--pf-v6-c-accordion__expandable-content--TransitionDuration--slide);
7847
+ transition-property: opacity, translate;
7848
+ translate: 0 var(--pf-v6-c-accordion__expandable-content--TranslateY);
7794
7849
  }
7795
7850
  .pf-v6-c-accordion__expandable-content.pf-m-fixed {
7796
7851
  max-height: var(--pf-v6-c-accordion__expandable-content--m-fixed--MaxHeight);
@@ -13780,6 +13835,17 @@ ul) {
13780
13835
  --pf-v6-c-expandable-section__toggle-icon--m-expand-top--Rotate: 0;
13781
13836
  --pf-v6-c-expandable-section--m-expanded__toggle-icon--Rotate: 90deg;
13782
13837
  --pf-v6-c-expandable-section--m-expanded__toggle-icon--m-expand-top--Rotate: -90deg;
13838
+ --pf-v6-c-expandable-section__content--TransitionDuration--collapse--slide: 0s;
13839
+ --pf-v6-c-expandable-section__content--TransitionDuration--collapse--fade: var(--pf-t--global--motion--duration--fade--short);
13840
+ --pf-v6-c-expandable-section__content--TransitionDuration--expand--slide: 0s;
13841
+ --pf-v6-c-expandable-section__content--TransitionDuration--expand--fade: var(--pf-t--global--motion--duration--fade--default);
13842
+ --pf-v6-c-expandable-section__content--TransitionDuration--slide: var(--pf-v6-c-expandable-section__content--TransitionDuration--collapse--slide);
13843
+ --pf-v6-c-expandable-section__content--TransitionDuration--fade: var(--pf-v6-c-expandable-section__content--TransitionDuration--collapse--fade);
13844
+ --pf-v6-c-expandable-section__content--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
13845
+ --pf-v6-c-expandable-section__content--Opacity: 0;
13846
+ --pf-v6-c-expandable-section--m-expanded__content--Opacity: 1;
13847
+ --pf-v6-c-expandable-section__content--TranslateY: 0;
13848
+ --pf-v6-c-expandable-section--m-expanded__content--TranslateY: 0;
13783
13849
  --pf-v6-c-expandable-section__content--MaxWidth: auto;
13784
13850
  --pf-v6-c-expandable-section--m-limit-width__content--MaxWidth: 46.875rem;
13785
13851
  --pf-v6-c-expandable-section--m-display-lg--PaddingBlockStart: var(--pf-t--global--spacer--sm);
@@ -13791,10 +13857,18 @@ ul) {
13791
13857
  --pf-v6-c-expandable-section--m-display-lg--BorderWidth: var(--pf-t--global--border--width--box--default);
13792
13858
  --pf-v6-c-expandable-section--m-display-lg--BorderColor: var(--pf-t--global--border--color--default);
13793
13859
  --pf-v6-c-expandable-section--m-display-lg--BorderRadius: var(--pf-t--global--border--radius--medium);
13860
+ --pf-v6-c-expandable-section--m-display-lg--TransitionDelay: var(--pf-v6-c-expandable-section__content--TransitionDuration--fade);
13794
13861
  --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));
13795
13862
  --pf-v6-c-expandable-section--m-truncate__content--LineClamp: 3;
13796
13863
  --pf-v6-c-expandable-section--m-truncate--Gap: var(--pf-t--global--spacer--xs);
13797
13864
  }
13865
+ @media screen and (prefers-reduced-motion: no-preference) {
13866
+ .pf-v6-c-expandable-section {
13867
+ --pf-v6-c-expandable-section__content--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
13868
+ --pf-v6-c-expandable-section__content--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
13869
+ --pf-v6-c-expandable-section__content--TranslateY: -.5rem;
13870
+ }
13871
+ }
13798
13872
 
13799
13873
  .pf-v6-c-expandable-section {
13800
13874
  display: flex;
@@ -13805,6 +13879,11 @@ ul) {
13805
13879
  --pf-v6-c-expandable-section__toggle-icon--Rotate: var(--pf-v6-c-expandable-section--m-expanded__toggle-icon--Rotate);
13806
13880
  --pf-v6-c-expandable-section__toggle-icon--m-expand-top--Rotate: var(--pf-v6-c-expandable-section--m-expanded__toggle-icon--m-expand-top--Rotate);
13807
13881
  --pf-v6-c-expandable-section--m-display-lg--PaddingBlockEnd: var(--pf-v6-c-expandable-section--m-display-lg--m-expanded--PaddingBlockEnd);
13882
+ --pf-v6-c-expandable-section__content--TransitionDuration--slide: var(--pf-v6-c-expandable-section__content--TransitionDuration--expand--slide);
13883
+ --pf-v6-c-expandable-section__content--TransitionDuration--fade: var(--pf-v6-c-expandable-section__content--TransitionDuration--expand--fade);
13884
+ --pf-v6-c-expandable-section__content--Opacity: var(--pf-v6-c-expandable-section--m-expanded__content--Opacity);
13885
+ --pf-v6-c-expandable-section__content--TranslateY: var(--pf-v6-c-expandable-section--m-expanded__content--TranslateY);
13886
+ --pf-v6-c-expandable-section--m-display-lg--TransitionDelay: 0s;
13808
13887
  }
13809
13888
  .pf-v6-c-expandable-section.pf-m-limit-width {
13810
13889
  --pf-v6-c-expandable-section__content--MaxWidth: var(--pf-v6-c-expandable-section--m-limit-width__content--MaxWidth);
@@ -13817,6 +13896,7 @@ ul) {
13817
13896
  background-color: var(--pf-v6-c-expandable-section--m-display-lg--BackgroundColor);
13818
13897
  border: var(--pf-v6-c-expandable-section--m-display-lg--BorderWidth) solid var(--pf-v6-c-expandable-section--m-display-lg--BorderColor);
13819
13898
  border-radius: var(--pf-v6-c-expandable-section--m-display-lg--BorderRadius);
13899
+ transition: padding-block-end 0s var(--pf-v6-c-expandable-section--m-display-lg--TransitionDelay, 0s);
13820
13900
  }
13821
13901
  .pf-v6-c-expandable-section.pf-m-indented {
13822
13902
  --pf-v6-c-expandable-section__content--PaddingInlineStart: var(--pf-v6-c-expandable-section--m-indented__content--PaddingInlineStart);
@@ -13850,6 +13930,11 @@ ul) {
13850
13930
  max-width: var(--pf-v6-c-expandable-section__content--MaxWidth);
13851
13931
  padding-block-end: var(--pf-v6-c-expandable-section__content--PaddingBlockEnd, 0);
13852
13932
  padding-inline-start: var(--pf-v6-c-expandable-section__content--PaddingInlineStart, 0);
13933
+ opacity: var(--pf-v6-c-expandable-section__content--Opacity);
13934
+ transition-timing-function: var(--pf-v6-c-expandable-section__content--TransitionTimingFunction);
13935
+ transition-duration: var(--pf-v6-c-expandable-section__content--TransitionDuration--fade), var(--pf-v6-c-expandable-section__content--TransitionDuration--slide);
13936
+ transition-property: opacity, translate;
13937
+ translate: 0 var(--pf-v6-c-expandable-section__content--TranslateY);
13853
13938
  }
13854
13939
 
13855
13940
  .pf-v6-c-file-upload {
package/patternfly.css CHANGED
@@ -7803,6 +7803,7 @@ button) {
7803
7803
  --pf-v6-c-accordion__toggle--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
7804
7804
  --pf-v6-c-accordion__toggle--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
7805
7805
  --pf-v6-c-accordion__toggle--BorderRadius: var(--pf-t--global--border--radius--small);
7806
+ --pf-v6-c-accordion__toggle--ZIndex: var(--pf-t--global--z-index--xs);
7806
7807
  --pf-v6-c-accordion--m-toggle-start__toggle--ColumnGap: var(--pf-t--global--spacer--gap--text-to-element--default);
7807
7808
  --pf-v6-c-accordion__toggle-text--Color: var(--pf-t--global--text--color--regular);
7808
7809
  --pf-v6-c-accordion__toggle-text--FontWeight: var(--pf-t--global--font--weight--body--default);
@@ -7820,6 +7821,24 @@ button) {
7820
7821
  --pf-v6-c-accordion__expandable-content--Color: var(--pf-t--global--text--color--regular);
7821
7822
  --pf-v6-c-accordion__expandable-content--FontSize: var(--pf-t--global--font--size--body--default);
7822
7823
  --pf-v6-c-accordion__expandable-content--m-fixed--MaxHeight: 9.375rem;
7824
+ --pf-v6-c-accordion__item--before--TransitionDuration--expand--fade: var(--pf-t--global--motion--duration--fade--default);
7825
+ --pf-v6-c-accordion__item--before--TransitionDuration--collapse--fade: var(--pf-t--global--motion--duration--fade--short);
7826
+ --pf-v6-c-accordion__item--before--TransitionDuration--fade: var(--pf-v6-c-accordion__item--before--TransitionDuration--collapse--fade);
7827
+ --pf-v6-c-accordion__item--before--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
7828
+ --pf-v6-c-accordion__item--before--Opacity: 0;
7829
+ --pf-v6-c-accordion__item--m-expanded--before--Opacity: 1;
7830
+ --pf-v6-c-accordion__item--m-expanded--before--TranslateY: 0;
7831
+ --pf-v6-c-accordion__expandable-content--TransitionDuration--collapse--slide: 0s;
7832
+ --pf-v6-c-accordion__expandable-content--TransitionDuration--collapse--fade: var(--pf-t--global--motion--duration--fade--short);
7833
+ --pf-v6-c-accordion__expandable-content--TransitionDuration--expand--slide: 0s;
7834
+ --pf-v6-c-accordion__expandable-content--TransitionDuration--expand--fade: var(--pf-t--global--motion--duration--fade--default);
7835
+ --pf-v6-c-accordion__expandable-content--TransitionDuration--slide: var(--pf-v6-c-accordion__expandable-content--TransitionDuration--collapse--slide);
7836
+ --pf-v6-c-accordion__expandable-content--TransitionDuration--fade: var(--pf-v6-c-accordion__expandable-content--TransitionDuration--collapse--fade);
7837
+ --pf-v6-c-accordion__expandable-content--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
7838
+ --pf-v6-c-accordion__expandable-content--Opacity: 0;
7839
+ --pf-v6-c-accordion__item--m-expanded__expandable-content--Opacity: 1;
7840
+ --pf-v6-c-accordion__expandable-content--TranslateY: 0;
7841
+ --pf-v6-c-accordion__item--m-expanded__expandable-content--TranslateY: 0;
7823
7842
  --pf-v6-c-accordion__expandable-content-body--PaddingBlockStart: var(--pf-t--global--spacer--sm);
7824
7843
  --pf-v6-c-accordion__expandable-content-body--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
7825
7844
  --pf-v6-c-accordion__expandable-content-body--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
@@ -7839,6 +7858,16 @@ button) {
7839
7858
  --pf-v6-c-accordion__item--m-bordered--BorderBlockEndWidth: var(--pf-t--global--border--width--divider--default);
7840
7859
  --pf-v6-c-accordion__item--m-bordered--BorderBlockEndColor: var(--pf-t--global--border--color--default);
7841
7860
  }
7861
+ @media screen and (prefers-reduced-motion: no-preference) {
7862
+ .pf-v6-c-accordion {
7863
+ --pf-v6-c-accordion__item--before--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
7864
+ --pf-v6-c-accordion__item--before--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
7865
+ --pf-v6-c-accordion__item--before--TranslateY: -.5rem;
7866
+ --pf-v6-c-accordion__expandable-content--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
7867
+ --pf-v6-c-accordion__expandable-content--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
7868
+ --pf-v6-c-accordion__expandable-content--TranslateY: -.5rem;
7869
+ }
7870
+ }
7842
7871
 
7843
7872
  .pf-v6-c-accordion {
7844
7873
  display: flex;
@@ -7872,18 +7901,39 @@ button) {
7872
7901
  }
7873
7902
 
7874
7903
  .pf-v6-c-accordion__item {
7904
+ position: relative;
7905
+ }
7906
+ .pf-v6-c-accordion__item::before {
7907
+ position: absolute;
7908
+ inset: 0;
7909
+ pointer-events: none;
7910
+ content: "";
7911
+ background-color: var(--pf-v6-c-accordion__item--m-expanded--BackgroundColor);
7875
7912
  border-radius: var(--pf-v6-c-accordion__item--BorderRadius);
7913
+ opacity: var(--pf-v6-c-accordion__item--before--Opacity);
7914
+ transition-timing-function: var(--pf-v6-c-accordion__item--before--TransitionTimingFunction);
7915
+ transition-duration: var(--pf-v6-c-accordion__item--before--TransitionDuration--fade);
7916
+ transition-property: opacity;
7876
7917
  }
7877
7918
  .pf-v6-c-accordion__item.pf-m-expanded {
7878
7919
  --pf-v6-c-accordion__toggle--PaddingBlockEnd: var(--pf-v6-c-accordion__toggle--m-expanded--PaddingBlockEnd);
7879
7920
  --pf-v6-c-accordion__toggle-text--FontWeight: var(--pf-v6-c-accordion__toggle--m-expanded__toggle-text--FontWeight);
7880
- background-color: var(--pf-v6-c-accordion__item--m-expanded--BackgroundColor);
7921
+ --pf-v6-c-accordion__item--before--TransitionDuration--slide: var(--pf-v6-c-accordion__item--before--TransitionDuration--expand--slide);
7922
+ --pf-v6-c-accordion__item--before--TransitionDuration--fade: var(--pf-v6-c-accordion__item--before--TransitionDuration--expand--fade);
7923
+ --pf-v6-c-accordion__item--before--Opacity: var(--pf-v6-c-accordion__item--m-expanded--before--Opacity);
7924
+ --pf-v6-c-accordion__item--before--TranslateY: var(--pf-v6-c-accordion__item--m-expanded--before--TranslateY);
7925
+ --pf-v6-c-accordion__expandable-content--TransitionDuration--slide: var(--pf-v6-c-accordion__expandable-content--TransitionDuration--expand--slide);
7926
+ --pf-v6-c-accordion__expandable-content--TransitionDuration--fade: var(--pf-v6-c-accordion__expandable-content--TransitionDuration--expand--fade);
7927
+ --pf-v6-c-accordion__expandable-content--Opacity: var(--pf-v6-c-accordion__item--m-expanded__expandable-content--Opacity);
7928
+ --pf-v6-c-accordion__expandable-content--TranslateY: var(--pf-v6-c-accordion__item--m-expanded__expandable-content--TranslateY);
7881
7929
  }
7882
7930
  .pf-v6-c-accordion__item.pf-m-expanded .pf-v6-c-accordion__toggle-icon {
7883
7931
  transform: rotate(var(--pf-v6-c-accordion__toggle--m-expanded__toggle-icon--Rotate));
7884
7932
  }
7885
7933
 
7886
7934
  .pf-v6-c-accordion__toggle {
7935
+ position: relative;
7936
+ z-index: var(--pf-v6-c-accordion__toggle--ZIndex);
7887
7937
  display: flex;
7888
7938
  column-gap: var(--pf-v6-c-accordion__toggle--ColumnGap);
7889
7939
  align-items: center;
@@ -7927,6 +7977,11 @@ button) {
7927
7977
  color: var(--pf-v6-c-accordion__expandable-content--Color);
7928
7978
  background-color: var(--pf-v6-c-accordion__expandable-content--BackgroundColor);
7929
7979
  border-radius: var(--pf-v6-c-accordion__expandable-content--BorderRadius);
7980
+ opacity: var(--pf-v6-c-accordion__expandable-content--Opacity);
7981
+ transition-timing-function: var(--pf-v6-c-accordion__expandable-content--TransitionTimingFunction);
7982
+ transition-duration: var(--pf-v6-c-accordion__expandable-content--TransitionDuration--fade), var(--pf-v6-c-accordion__expandable-content--TransitionDuration--slide);
7983
+ transition-property: opacity, translate;
7984
+ translate: 0 var(--pf-v6-c-accordion__expandable-content--TranslateY);
7930
7985
  }
7931
7986
  .pf-v6-c-accordion__expandable-content.pf-m-fixed {
7932
7987
  max-height: var(--pf-v6-c-accordion__expandable-content--m-fixed--MaxHeight);
@@ -13916,6 +13971,17 @@ ul) {
13916
13971
  --pf-v6-c-expandable-section__toggle-icon--m-expand-top--Rotate: 0;
13917
13972
  --pf-v6-c-expandable-section--m-expanded__toggle-icon--Rotate: 90deg;
13918
13973
  --pf-v6-c-expandable-section--m-expanded__toggle-icon--m-expand-top--Rotate: -90deg;
13974
+ --pf-v6-c-expandable-section__content--TransitionDuration--collapse--slide: 0s;
13975
+ --pf-v6-c-expandable-section__content--TransitionDuration--collapse--fade: var(--pf-t--global--motion--duration--fade--short);
13976
+ --pf-v6-c-expandable-section__content--TransitionDuration--expand--slide: 0s;
13977
+ --pf-v6-c-expandable-section__content--TransitionDuration--expand--fade: var(--pf-t--global--motion--duration--fade--default);
13978
+ --pf-v6-c-expandable-section__content--TransitionDuration--slide: var(--pf-v6-c-expandable-section__content--TransitionDuration--collapse--slide);
13979
+ --pf-v6-c-expandable-section__content--TransitionDuration--fade: var(--pf-v6-c-expandable-section__content--TransitionDuration--collapse--fade);
13980
+ --pf-v6-c-expandable-section__content--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
13981
+ --pf-v6-c-expandable-section__content--Opacity: 0;
13982
+ --pf-v6-c-expandable-section--m-expanded__content--Opacity: 1;
13983
+ --pf-v6-c-expandable-section__content--TranslateY: 0;
13984
+ --pf-v6-c-expandable-section--m-expanded__content--TranslateY: 0;
13919
13985
  --pf-v6-c-expandable-section__content--MaxWidth: auto;
13920
13986
  --pf-v6-c-expandable-section--m-limit-width__content--MaxWidth: 46.875rem;
13921
13987
  --pf-v6-c-expandable-section--m-display-lg--PaddingBlockStart: var(--pf-t--global--spacer--sm);
@@ -13927,10 +13993,18 @@ ul) {
13927
13993
  --pf-v6-c-expandable-section--m-display-lg--BorderWidth: var(--pf-t--global--border--width--box--default);
13928
13994
  --pf-v6-c-expandable-section--m-display-lg--BorderColor: var(--pf-t--global--border--color--default);
13929
13995
  --pf-v6-c-expandable-section--m-display-lg--BorderRadius: var(--pf-t--global--border--radius--medium);
13996
+ --pf-v6-c-expandable-section--m-display-lg--TransitionDelay: var(--pf-v6-c-expandable-section__content--TransitionDuration--fade);
13930
13997
  --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));
13931
13998
  --pf-v6-c-expandable-section--m-truncate__content--LineClamp: 3;
13932
13999
  --pf-v6-c-expandable-section--m-truncate--Gap: var(--pf-t--global--spacer--xs);
13933
14000
  }
14001
+ @media screen and (prefers-reduced-motion: no-preference) {
14002
+ .pf-v6-c-expandable-section {
14003
+ --pf-v6-c-expandable-section__content--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
14004
+ --pf-v6-c-expandable-section__content--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
14005
+ --pf-v6-c-expandable-section__content--TranslateY: -.5rem;
14006
+ }
14007
+ }
13934
14008
 
13935
14009
  .pf-v6-c-expandable-section {
13936
14010
  display: flex;
@@ -13941,6 +14015,11 @@ ul) {
13941
14015
  --pf-v6-c-expandable-section__toggle-icon--Rotate: var(--pf-v6-c-expandable-section--m-expanded__toggle-icon--Rotate);
13942
14016
  --pf-v6-c-expandable-section__toggle-icon--m-expand-top--Rotate: var(--pf-v6-c-expandable-section--m-expanded__toggle-icon--m-expand-top--Rotate);
13943
14017
  --pf-v6-c-expandable-section--m-display-lg--PaddingBlockEnd: var(--pf-v6-c-expandable-section--m-display-lg--m-expanded--PaddingBlockEnd);
14018
+ --pf-v6-c-expandable-section__content--TransitionDuration--slide: var(--pf-v6-c-expandable-section__content--TransitionDuration--expand--slide);
14019
+ --pf-v6-c-expandable-section__content--TransitionDuration--fade: var(--pf-v6-c-expandable-section__content--TransitionDuration--expand--fade);
14020
+ --pf-v6-c-expandable-section__content--Opacity: var(--pf-v6-c-expandable-section--m-expanded__content--Opacity);
14021
+ --pf-v6-c-expandable-section__content--TranslateY: var(--pf-v6-c-expandable-section--m-expanded__content--TranslateY);
14022
+ --pf-v6-c-expandable-section--m-display-lg--TransitionDelay: 0s;
13944
14023
  }
13945
14024
  .pf-v6-c-expandable-section.pf-m-limit-width {
13946
14025
  --pf-v6-c-expandable-section__content--MaxWidth: var(--pf-v6-c-expandable-section--m-limit-width__content--MaxWidth);
@@ -13953,6 +14032,7 @@ ul) {
13953
14032
  background-color: var(--pf-v6-c-expandable-section--m-display-lg--BackgroundColor);
13954
14033
  border: var(--pf-v6-c-expandable-section--m-display-lg--BorderWidth) solid var(--pf-v6-c-expandable-section--m-display-lg--BorderColor);
13955
14034
  border-radius: var(--pf-v6-c-expandable-section--m-display-lg--BorderRadius);
14035
+ transition: padding-block-end 0s var(--pf-v6-c-expandable-section--m-display-lg--TransitionDelay, 0s);
13956
14036
  }
13957
14037
  .pf-v6-c-expandable-section.pf-m-indented {
13958
14038
  --pf-v6-c-expandable-section__content--PaddingInlineStart: var(--pf-v6-c-expandable-section--m-indented__content--PaddingInlineStart);
@@ -13986,6 +14066,11 @@ ul) {
13986
14066
  max-width: var(--pf-v6-c-expandable-section__content--MaxWidth);
13987
14067
  padding-block-end: var(--pf-v6-c-expandable-section__content--PaddingBlockEnd, 0);
13988
14068
  padding-inline-start: var(--pf-v6-c-expandable-section__content--PaddingInlineStart, 0);
14069
+ opacity: var(--pf-v6-c-expandable-section__content--Opacity);
14070
+ transition-timing-function: var(--pf-v6-c-expandable-section__content--TransitionTimingFunction);
14071
+ transition-duration: var(--pf-v6-c-expandable-section__content--TransitionDuration--fade), var(--pf-v6-c-expandable-section__content--TransitionDuration--slide);
14072
+ transition-property: opacity, translate;
14073
+ translate: 0 var(--pf-v6-c-expandable-section__content--TranslateY);
13989
14074
  }
13990
14075
 
13991
14076
  .pf-v6-c-file-upload {