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

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/TreeView/tree-view.css +33 -0
  4. package/components/TreeView/tree-view.scss +36 -2
  5. package/components/_index.css +89 -1
  6. package/package.json +1 -1
  7. package/patternfly-no-globals.css +89 -1
  8. package/patternfly.css +89 -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);
@@ -29458,6 +29513,17 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
29458
29513
  --pf-v6-c-tree-view__node-container--Display: contents;
29459
29514
  --pf-v6-c-tree-view__node-content--RowGap: var(--pf-t--global--spacer--sm);
29460
29515
  --pf-v6-c-tree-view__node-content--Overflow: visible;
29516
+ --pf-v6-c-tree-view__list--TransitionDuration--expand--slide: 0s;
29517
+ --pf-v6-c-tree-view__list--TransitionDuration--expand--fade: var(--pf-t--global--motion--duration--fade--default);
29518
+ --pf-v6-c-tree-view__list--TransitionDuration--collapse--slide: 0s;
29519
+ --pf-v6-c-tree-view__list--TransitionDuration--collapse--fade: var(--pf-t--global--motion--duration--fade--short);
29520
+ --pf-v6-c-tree-view__list--TransitionDuration--slide: var(--pf-v6-c-tree-view__list--TransitionDuration--collapse--slide);
29521
+ --pf-v6-c-tree-view__list--TransitionDuration--fade: var(--pf-v6-c-tree-view__list--TransitionDuration--collapse--fade);
29522
+ --pf-v6-c-tree-view__list--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
29523
+ --pf-v6-c-tree-view__list--Opacity: 0;
29524
+ --pf-v6-c-tree-view--m-expanded__list--Opacity: 1;
29525
+ --pf-v6-c-tree-view__list--TranslateY: 0;
29526
+ --pf-v6-c-tree-view--m-expanded__list--TranslateY: 0;
29461
29527
  --pf-v6-c-tree-view__list-item__list-item__node-toggle--InsetBlockStart: var(--pf-v6-c-tree-view__node--PaddingBlockStart);
29462
29528
  --pf-v6-c-tree-view__list-item__list-item__node-toggle--InsetInlineStart: var(--pf-v6-c-tree-view__node--PaddingInlineStart);
29463
29529
  --pf-v6-c-tree-view__list-item__list-item__node-toggle--TranslateX: -100%;
@@ -29473,6 +29539,8 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
29473
29539
  --pf-v6-c-tree-view__node-toggle--PaddingInlineStart: var(--pf-t--global--spacer--md);
29474
29540
  --pf-v6-c-tree-view__node-toggle--MarginBlockStart: calc(var(--pf-v6-c-tree-view__node-toggle--PaddingBlockStart) * -1);
29475
29541
  --pf-v6-c-tree-view__node-toggle--MarginBlockEnd: calc(var(--pf-v6-c-tree-view__node-toggle--PaddingBlockStart) * -1);
29542
+ --pf-v6-c-tree-view__node-toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
29543
+ --pf-v6-c-tree-view__node-toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
29476
29544
  --pf-v6-c-tree-view__node-check--MarginInlineEnd: var(--pf-t--global--spacer--sm);
29477
29545
  --pf-v6-c-tree-view__node-count--MarginInlineStart: var(--pf-t--global--spacer--sm);
29478
29546
  --pf-v6-c-tree-view__search--PaddingBlockStart: var(--pf-t--global--spacer--sm);
@@ -29548,6 +29616,13 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
29548
29616
  --pf-v6-c-tree-view--m-compact--m-no-background__node--nested--PaddingBlockEnd: 0;
29549
29617
  --pf-v6-c-tree-view--m-compact--m-no-background__node--before--InsetBlockStart: calc(var(--pf-v6-c-tree-view--m-compact__node-container--nested--PaddingBlockStart) + var(--pf-v6-c-tree-view--m-compact__node--nested--PaddingBlockStart) + 0.25rem);
29550
29618
  }
29619
+ @media screen and (prefers-reduced-motion: no-preference) {
29620
+ .pf-v6-c-tree-view {
29621
+ --pf-v6-c-tree-view__list--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
29622
+ --pf-v6-c-tree-view__list--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
29623
+ --pf-v6-c-tree-view__list--TranslateY: -.5rem;
29624
+ }
29625
+ }
29551
29626
 
29552
29627
  .pf-v6-c-tree-view.pf-m-compact .pf-v6-c-tree-view__list-item, .pf-v6-c-tree-view.pf-m-guides .pf-v6-c-tree-view__list-item {
29553
29628
  position: relative;
@@ -29663,12 +29738,20 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
29663
29738
  display: inline-block;
29664
29739
  min-width: var(--pf-v6-c-tree-view__node-toggle-icon--MinWidth);
29665
29740
  text-align: center;
29741
+ transition: transform var(--pf-v6-c-tree-view__node-toggle-icon--TransitionDuration) var(--pf-v6-c-tree-view__node-toggle-icon--TransitionTimingFunction);
29666
29742
  transform: rotate(var(--pf-v6-c-tree-view__node-toggle-icon--Rotate));
29667
29743
  }
29668
29744
  :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-tree-view__node-toggle-icon {
29669
29745
  scale: -1 1;
29670
29746
  }
29671
29747
 
29748
+ .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list {
29749
+ opacity: var(--pf-v6-c-tree-view__list--Opacity);
29750
+ transition-timing-function: var(--pf-v6-c-tree-view__list--TransitionTimingFunction);
29751
+ transition-duration: var(--pf-v6-c-tree-view__list--TransitionDuration--fade), var(--pf-v6-c-tree-view__list--TransitionDuration--slide);
29752
+ transition-property: opacity, translate;
29753
+ translate: 0 var(--pf-v6-c-tree-view__list--TranslateY);
29754
+ }
29672
29755
  .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item {
29673
29756
  --pf-v6-c-tree-view__node-toggle-icon--Rotate: var(--pf-v6-c-tree-view__node-toggle-icon--base--Rotate);
29674
29757
  --pf-v6-c-tree-view__node-toggle--Color: var(--pf-v6-c-tree-view__node-toggle--Color--base);
@@ -29677,6 +29760,11 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
29677
29760
  --pf-v6-c-tree-view__node-toggle--Color: var(--pf-v6-c-tree-view__list-item--m-expanded__node-toggle--Color);
29678
29761
  --pf-v6-c-tree-view__node-toggle-icon--Rotate: var(--pf-v6-c-tree-view__list-item--m-expanded__node-toggle-icon--Rotate);
29679
29762
  }
29763
+ .pf-v6-c-tree-view__list-item.pf-m-expanded > .pf-v6-c-tree-view__list {
29764
+ opacity: var(--pf-v6-c-tree-view--m-expanded__list--Opacity);
29765
+ transition-duration: var(--pf-v6-c-tree-view__list--TransitionDuration--expand--fade), var(--pf-v6-c-tree-view__list--TransitionDuration--expand--slide);
29766
+ translate: 0 var(--pf-v6-c-tree-view--m-expanded__list--TranslateY);
29767
+ }
29680
29768
 
29681
29769
  .pf-v6-c-tree-view__node,
29682
29770
  .pf-v6-c-tree-view__node-container {
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);
@@ -29594,6 +29649,17 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
29594
29649
  --pf-v6-c-tree-view__node-container--Display: contents;
29595
29650
  --pf-v6-c-tree-view__node-content--RowGap: var(--pf-t--global--spacer--sm);
29596
29651
  --pf-v6-c-tree-view__node-content--Overflow: visible;
29652
+ --pf-v6-c-tree-view__list--TransitionDuration--expand--slide: 0s;
29653
+ --pf-v6-c-tree-view__list--TransitionDuration--expand--fade: var(--pf-t--global--motion--duration--fade--default);
29654
+ --pf-v6-c-tree-view__list--TransitionDuration--collapse--slide: 0s;
29655
+ --pf-v6-c-tree-view__list--TransitionDuration--collapse--fade: var(--pf-t--global--motion--duration--fade--short);
29656
+ --pf-v6-c-tree-view__list--TransitionDuration--slide: var(--pf-v6-c-tree-view__list--TransitionDuration--collapse--slide);
29657
+ --pf-v6-c-tree-view__list--TransitionDuration--fade: var(--pf-v6-c-tree-view__list--TransitionDuration--collapse--fade);
29658
+ --pf-v6-c-tree-view__list--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
29659
+ --pf-v6-c-tree-view__list--Opacity: 0;
29660
+ --pf-v6-c-tree-view--m-expanded__list--Opacity: 1;
29661
+ --pf-v6-c-tree-view__list--TranslateY: 0;
29662
+ --pf-v6-c-tree-view--m-expanded__list--TranslateY: 0;
29597
29663
  --pf-v6-c-tree-view__list-item__list-item__node-toggle--InsetBlockStart: var(--pf-v6-c-tree-view__node--PaddingBlockStart);
29598
29664
  --pf-v6-c-tree-view__list-item__list-item__node-toggle--InsetInlineStart: var(--pf-v6-c-tree-view__node--PaddingInlineStart);
29599
29665
  --pf-v6-c-tree-view__list-item__list-item__node-toggle--TranslateX: -100%;
@@ -29609,6 +29675,8 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
29609
29675
  --pf-v6-c-tree-view__node-toggle--PaddingInlineStart: var(--pf-t--global--spacer--md);
29610
29676
  --pf-v6-c-tree-view__node-toggle--MarginBlockStart: calc(var(--pf-v6-c-tree-view__node-toggle--PaddingBlockStart) * -1);
29611
29677
  --pf-v6-c-tree-view__node-toggle--MarginBlockEnd: calc(var(--pf-v6-c-tree-view__node-toggle--PaddingBlockStart) * -1);
29678
+ --pf-v6-c-tree-view__node-toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
29679
+ --pf-v6-c-tree-view__node-toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
29612
29680
  --pf-v6-c-tree-view__node-check--MarginInlineEnd: var(--pf-t--global--spacer--sm);
29613
29681
  --pf-v6-c-tree-view__node-count--MarginInlineStart: var(--pf-t--global--spacer--sm);
29614
29682
  --pf-v6-c-tree-view__search--PaddingBlockStart: var(--pf-t--global--spacer--sm);
@@ -29684,6 +29752,13 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
29684
29752
  --pf-v6-c-tree-view--m-compact--m-no-background__node--nested--PaddingBlockEnd: 0;
29685
29753
  --pf-v6-c-tree-view--m-compact--m-no-background__node--before--InsetBlockStart: calc(var(--pf-v6-c-tree-view--m-compact__node-container--nested--PaddingBlockStart) + var(--pf-v6-c-tree-view--m-compact__node--nested--PaddingBlockStart) + 0.25rem);
29686
29754
  }
29755
+ @media screen and (prefers-reduced-motion: no-preference) {
29756
+ .pf-v6-c-tree-view {
29757
+ --pf-v6-c-tree-view__list--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
29758
+ --pf-v6-c-tree-view__list--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
29759
+ --pf-v6-c-tree-view__list--TranslateY: -.5rem;
29760
+ }
29761
+ }
29687
29762
 
29688
29763
  .pf-v6-c-tree-view.pf-m-compact .pf-v6-c-tree-view__list-item, .pf-v6-c-tree-view.pf-m-guides .pf-v6-c-tree-view__list-item {
29689
29764
  position: relative;
@@ -29799,12 +29874,20 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
29799
29874
  display: inline-block;
29800
29875
  min-width: var(--pf-v6-c-tree-view__node-toggle-icon--MinWidth);
29801
29876
  text-align: center;
29877
+ transition: transform var(--pf-v6-c-tree-view__node-toggle-icon--TransitionDuration) var(--pf-v6-c-tree-view__node-toggle-icon--TransitionTimingFunction);
29802
29878
  transform: rotate(var(--pf-v6-c-tree-view__node-toggle-icon--Rotate));
29803
29879
  }
29804
29880
  :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-tree-view__node-toggle-icon {
29805
29881
  scale: -1 1;
29806
29882
  }
29807
29883
 
29884
+ .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list {
29885
+ opacity: var(--pf-v6-c-tree-view__list--Opacity);
29886
+ transition-timing-function: var(--pf-v6-c-tree-view__list--TransitionTimingFunction);
29887
+ transition-duration: var(--pf-v6-c-tree-view__list--TransitionDuration--fade), var(--pf-v6-c-tree-view__list--TransitionDuration--slide);
29888
+ transition-property: opacity, translate;
29889
+ translate: 0 var(--pf-v6-c-tree-view__list--TranslateY);
29890
+ }
29808
29891
  .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item {
29809
29892
  --pf-v6-c-tree-view__node-toggle-icon--Rotate: var(--pf-v6-c-tree-view__node-toggle-icon--base--Rotate);
29810
29893
  --pf-v6-c-tree-view__node-toggle--Color: var(--pf-v6-c-tree-view__node-toggle--Color--base);
@@ -29813,6 +29896,11 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
29813
29896
  --pf-v6-c-tree-view__node-toggle--Color: var(--pf-v6-c-tree-view__list-item--m-expanded__node-toggle--Color);
29814
29897
  --pf-v6-c-tree-view__node-toggle-icon--Rotate: var(--pf-v6-c-tree-view__list-item--m-expanded__node-toggle-icon--Rotate);
29815
29898
  }
29899
+ .pf-v6-c-tree-view__list-item.pf-m-expanded > .pf-v6-c-tree-view__list {
29900
+ opacity: var(--pf-v6-c-tree-view--m-expanded__list--Opacity);
29901
+ transition-duration: var(--pf-v6-c-tree-view__list--TransitionDuration--expand--fade), var(--pf-v6-c-tree-view__list--TransitionDuration--expand--slide);
29902
+ translate: 0 var(--pf-v6-c-tree-view--m-expanded__list--TranslateY);
29903
+ }
29816
29904
 
29817
29905
  .pf-v6-c-tree-view__node,
29818
29906
  .pf-v6-c-tree-view__node-container {