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

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/ExpandableSection/expandable-section.css +19 -3
  2. package/components/ExpandableSection/expandable-section.scss +25 -7
  3. package/components/Table/table.css +33 -0
  4. package/components/Table/table.scss +33 -0
  5. package/components/_index.css +52 -3
  6. package/package.json +1 -1
  7. package/patternfly-no-globals.css +52 -3
  8. package/patternfly.css +52 -3
  9. package/patternfly.min.css +1 -1
  10. package/patternfly.min.css.map +1 -1
package/components/ExpandableSection/expandable-section.css CHANGED
@@ -17,8 +17,8 @@
17
17
  --pf-v6-c-expandable-section__content--TransitionDuration--fade: var(--pf-v6-c-expandable-section__content--TransitionDuration--collapse--fade);
18
18
  --pf-v6-c-expandable-section__content--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
19
19
  --pf-v6-c-expandable-section__content--Opacity: 0;
20
- --pf-v6-c-expandable-section--m-expanded__content--Opacity: 1;
21
20
  --pf-v6-c-expandable-section__content--TranslateY: 0;
21
+ --pf-v6-c-expandable-section--m-expanded__content--Opacity: 1;
22
22
  --pf-v6-c-expandable-section--m-expanded__content--TranslateY: 0;
23
23
  --pf-v6-c-expandable-section__content--MaxWidth: auto;
24
24
  --pf-v6-c-expandable-section--m-limit-width__content--MaxWidth: 46.875rem;
@@ -104,9 +104,25 @@
104
104
  max-width: var(--pf-v6-c-expandable-section__content--MaxWidth);
105
105
  padding-block-end: var(--pf-v6-c-expandable-section__content--PaddingBlockEnd, 0);
106
106
  padding-inline-start: var(--pf-v6-c-expandable-section__content--PaddingInlineStart, 0);
107
+ }
108
+ .pf-v6-c-expandable-section__content:where([hidden]) {
109
+ display: revert;
110
+ }
111
+ .pf-v6-c-expandable-section:where(:not(.pf-m-truncate)) .pf-v6-c-expandable-section__content {
112
+ display: none;
107
113
  opacity: var(--pf-v6-c-expandable-section__content--Opacity);
108
114
  transition-timing-function: var(--pf-v6-c-expandable-section__content--TransitionTimingFunction);
109
- transition-duration: var(--pf-v6-c-expandable-section__content--TransitionDuration--fade), var(--pf-v6-c-expandable-section__content--TransitionDuration--slide);
110
- transition-property: opacity, translate;
115
+ 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);
116
+ transition-property: opacity, translate, display;
117
+ transition-behavior: allow-discrete;
111
118
  translate: 0 var(--pf-v6-c-expandable-section__content--TranslateY);
119
+ }
120
+ .pf-v6-c-expandable-section.pf-m-expanded .pf-v6-c-expandable-section__content {
121
+ display: revert;
122
+ }
123
+ @starting-style {
124
+ .pf-v6-c-expandable-section.pf-m-expanded .pf-v6-c-expandable-section__content {
125
+ --pf-v6-c-expandable-section__content--Opacity: 0;
126
+ --pf-v6-c-expandable-section__content--TranslateY: -.5rem;
127
+ }
112
128
  }
package/components/ExpandableSection/expandable-section.scss CHANGED
@@ -21,8 +21,8 @@
21
21
  --#{$expandable-section}__content--TransitionDuration--fade: var(--#{$expandable-section}__content--TransitionDuration--collapse--fade);
22
22
  --#{$expandable-section}__content--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
23
23
  --#{$expandable-section}__content--Opacity: 0;
24
- --#{$expandable-section}--m-expanded__content--Opacity: 1;
25
24
  --#{$expandable-section}__content--TranslateY: 0;
25
+ --#{$expandable-section}--m-expanded__content--Opacity: 1;
26
26
  --#{$expandable-section}--m-expanded__content--TranslateY: 0;
27
27
 
28
28
  @media screen and (prefers-reduced-motion: no-preference) {
@@ -49,7 +49,6 @@
49
49
  --#{$expandable-section}--m-display-lg--BorderRadius: var(--pf-t--global--border--radius--medium);
50
50
  --#{$expandable-section}--m-display-lg--TransitionDelay: var(--#{$expandable-section}__content--TransitionDuration--fade);
51
51
 
52
-
53
52
  // Indented
54
53
  --#{$expandable-section}--m-indented__content--PaddingInlineStart: calc(var(--pf-t--global--spacer--action--horizontal--plain--default) + var(--pf-t--global--spacer--gap--text-to-element--default) + var(--#{$expandable-section}__toggle-icon--MinWidth));
55
54
 
@@ -95,6 +94,7 @@
95
94
 
96
95
  &.pf-m-truncate {
97
96
  --#{$expandable-section}--Gap: var(--#{$expandable-section}--m-truncate--Gap);
97
+
98
98
  &:not(.pf-m-expanded) .#{$expandable-section}__content {
99
99
  // stylelint-disable
100
100
  display: -webkit-box;
@@ -124,9 +124,27 @@
124
124
  max-width: var(--#{$expandable-section}__content--MaxWidth);
125
125
  padding-block-end: var(--#{$expandable-section}__content--PaddingBlockEnd, 0);
126
126
  padding-inline-start: var(--#{$expandable-section}__content--PaddingInlineStart, 0);
127
- opacity: var(--#{$expandable-section}__content--Opacity);
128
- transition-timing-function: var(--#{$expandable-section}__content--TransitionTimingFunction);
129
- transition-duration: var(--#{$expandable-section}__content--TransitionDuration--fade), var(--#{$expandable-section}__content--TransitionDuration--slide);
130
- transition-property: opacity, translate;
131
- translate: 0 var(--#{$expandable-section}__content--TranslateY);
127
+
128
+ &:where([hidden]) {
129
+ display: revert;
130
+ }
131
+
132
+ .#{$expandable-section}:where(:not(.pf-m-truncate)) & {
133
+ display: none;
134
+ opacity: var(--#{$expandable-section}__content--Opacity);
135
+ transition-timing-function: var(--#{$expandable-section}__content--TransitionTimingFunction);
136
+ transition-duration: var(--#{$expandable-section}__content--TransitionDuration--fade), var(--#{$expandable-section}__content--TransitionDuration--slide), var(--#{$expandable-section}__content--TransitionDuration--fade);
137
+ transition-property: opacity, translate, display;
138
+ transition-behavior: allow-discrete;
139
+ translate: 0 var(--#{$expandable-section}__content--TranslateY);
140
+ }
141
+
142
+ .#{$expandable-section}.pf-m-expanded & {
143
+ display: revert;
144
+
145
+ @starting-style {
146
+ --#{$expandable-section}__content--Opacity: 0;
147
+ --#{$expandable-section}__content--TranslateY: -.5rem;
148
+ }
149
+ }
132
150
  }
package/components/Table/table.css CHANGED
@@ -74,6 +74,17 @@
74
74
  --pf-v6-c-table__action--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
75
75
  --pf-v6-c-table__action--PaddingInlineStart: var(--pf-t--global--spacer--sm);
76
76
  --pf-v6-c-table__action--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
77
+ --pf-v6-c-table__expandable-row--TransitionDuration--expand--slide: 0s;
78
+ --pf-v6-c-table__expandable-row--TransitionDuration--expand--fade: var(--pf-t--global--motion--duration--fade--default);
79
+ --pf-v6-c-table__expandable-row--TransitionDuration--collapse--slide: 0s;
80
+ --pf-v6-c-table__expandable-row--TransitionDuration--collapse--fade: var(--pf-t--global--motion--duration--fade--short);
81
+ --pf-v6-c-table__expandable-row--TransitionDuration--slide: var(--pf-v6-c-table__expandable-row--TransitionDuration--collapse--slide);
82
+ --pf-v6-c-table__expandable-row--TransitionDuration--fade: var(--pf-v6-c-table__expandable-row--TransitionDuration--collapse--fade);
83
+ --pf-v6-c-table__expandable-row--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
84
+ --pf-v6-c-table__expandable-row--Opacity: 0;
85
+ --pf-v6-c-table__tbody--m-expanded__expandable-row--Opacity: 1;
86
+ --pf-v6-c-table__expandable-row--TranslateY: 0;
87
+ --pf-v6-c-table__tbody--m-expanded__expandable-row--TranslateY: 0;
77
88
  --pf-v6-c-table__expandable-row-content--PaddingBlockStart: var(--pf-t--global--spacer--md);
78
89
  --pf-v6-c-table__expandable-row-content--PaddingBlockEnd: var(--pf-t--global--spacer--md);
79
90
  --pf-v6-c-table__expandable-row-content--PaddingInlineStart: var(--pf-t--global--spacer--md);
@@ -134,6 +145,13 @@
134
145
  --pf-v6-c-table--m-sticky-header--ZIndex: calc(var(--pf-t--global--z-index--xs) + 1);
135
146
  --pf-v6-c-table--m-sticky-header--border--ZIndex: calc(var(--pf-t--global--z-index--xs) + 2);
136
147
  }
148
+ @media screen and (prefers-reduced-motion: no-preference) {
149
+ .pf-v6-c-table {
150
+ --pf-v6-c-table__expandable-row--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
151
+ --pf-v6-c-table__expandable-row--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
152
+ --pf-v6-c-table__expandable-row--TranslateY: -.5rem;
153
+ }
154
+ }
137
155
 
138
156
  .pf-v6-c-table {
139
157
  width: 100%;
@@ -702,6 +720,12 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
702
720
  .pf-v6-c-table__expandable-row {
703
721
  position: relative;
704
722
  border-block-end: 0 solid transparent;
723
+ opacity: var(--pf-v6-c-table__expandable-row--Opacity);
724
+ transition-timing-function: var(--pf-v6-c-table__expandable-row--TransitionTimingFunction);
725
+ transition-duration: var(--pf-v6-c-table__expandable-row--TransitionDuration--fade), var(--pf-v6-c-table__expandable-row--TransitionDuration--slide), var(--pf-v6-c-table__expandable-row--TransitionDuration--fade);
726
+ transition-property: opacity, translate, display;
727
+ transition-behavior: allow-discrete;
728
+ translate: 0 var(--pf-v6-c-table__expandable-row--TranslateY);
705
729
  }
706
730
  :not(.pf-v6-c-table__control-row) ~ .pf-v6-c-table__expandable-row > .pf-v6-c-table__th,
707
731
  :not(.pf-v6-c-table__control-row) ~ .pf-v6-c-table__expandable-row > .pf-v6-c-table__td {
@@ -730,6 +754,15 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
730
754
  .pf-v6-c-table__expandable-row.pf-m-expanded {
731
755
  border-block-end-color: var(--pf-v6-c-table__expandable-row--m-expanded--BorderBlockEndColor);
732
756
  border-block-end-width: var(--pf-v6-c-table--border-width--base);
757
+ opacity: var(--pf-v6-c-table__tbody--m-expanded__expandable-row--Opacity);
758
+ transition-duration: var(--pf-v6-c-table__expandable-row--TransitionDuration--expand--fade), var(--pf-v6-c-table__expandable-row--TransitionDuration--expand--slide), var(--pf-v6-c-table__expandable-row--TransitionDuration--expand--fade);
759
+ translate: 0 var(--pf-v6-c-table__tbody--m-expanded__expandable-row--TranslateY);
760
+ }
761
+ @starting-style {
762
+ .pf-v6-c-table__expandable-row.pf-m-expanded {
763
+ opacity: var(--pf-v6-c-table__expandable-row--Opacity);
764
+ translate: 0 var(--pf-v6-c-table__expandable-row--TranslateY);
765
+ }
733
766
  }
734
767
  .pf-v6-c-table__expandable-row:not(.pf-m-expanded) {
735
768
  display: none;
package/components/Table/table.scss CHANGED
@@ -118,6 +118,25 @@
118
118
  --#{$table}__action--PaddingInlineStart: var(--pf-t--global--spacer--sm);
119
119
  --#{$table}__action--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
120
120
 
121
+ // * Table expandable row
122
+ --#{$table}__expandable-row--TransitionDuration--expand--slide: 0s;
123
+ --#{$table}__expandable-row--TransitionDuration--expand--fade: var(--pf-t--global--motion--duration--fade--default);
124
+ --#{$table}__expandable-row--TransitionDuration--collapse--slide: 0s;
125
+ --#{$table}__expandable-row--TransitionDuration--collapse--fade: var(--pf-t--global--motion--duration--fade--short);
126
+ --#{$table}__expandable-row--TransitionDuration--slide: var(--#{$table}__expandable-row--TransitionDuration--collapse--slide);
127
+ --#{$table}__expandable-row--TransitionDuration--fade: var(--#{$table}__expandable-row--TransitionDuration--collapse--fade);
128
+ --#{$table}__expandable-row--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
129
+ --#{$table}__expandable-row--Opacity: 0;
130
+ --#{$table}__tbody--m-expanded__expandable-row--Opacity: 1;
131
+ --#{$table}__expandable-row--TranslateY: 0;
132
+ --#{$table}__tbody--m-expanded__expandable-row--TranslateY: 0;
133
+
134
+ @media screen and (prefers-reduced-motion: no-preference) {
135
+ --#{$table}__expandable-row--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
136
+ --#{$table}__expandable-row--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
137
+ --#{$table}__expandable-row--TranslateY: -.5rem;
138
+ }
139
+
121
140
  // * Table expandable row content
122
141
  --#{$table}__expandable-row-content--PaddingBlockStart: var(--pf-t--global--spacer--md);
123
142
  --#{$table}__expandable-row-content--PaddingBlockEnd: var(--pf-t--global--spacer--md);
@@ -953,6 +972,12 @@
953
972
  .#{$table}__expandable-row {
954
973
  position: relative;
955
974
  border-block-end: 0 solid transparent;
975
+ opacity: var(--#{$table}__expandable-row--Opacity);
976
+ transition-timing-function: var(--#{$table}__expandable-row--TransitionTimingFunction);
977
+ transition-duration: var(--#{$table}__expandable-row--TransitionDuration--fade), var(--#{$table}__expandable-row--TransitionDuration--slide), var(--#{$table}__expandable-row--TransitionDuration--fade);
978
+ transition-property: opacity, translate, display;
979
+ transition-behavior: allow-discrete;
980
+ translate: 0 var(--#{$table}__expandable-row--TranslateY);
956
981
 
957
982
  @at-root :not(.#{$table}__control-row) ~ .#{$table}__expandable-row {
958
983
  > .#{$table}__th,
@@ -989,6 +1014,14 @@
989
1014
  &.pf-m-expanded {
990
1015
  border-block-end-color: var(--#{$table}__expandable-row--m-expanded--BorderBlockEndColor);
991
1016
  border-block-end-width: var(--#{$table}--border-width--base);
1017
+ opacity: var(--#{$table}__tbody--m-expanded__expandable-row--Opacity);
1018
+ transition-duration: var(--#{$table}__expandable-row--TransitionDuration--expand--fade), var(--#{$table}__expandable-row--TransitionDuration--expand--slide), var(--#{$table}__expandable-row--TransitionDuration--expand--fade);
1019
+ translate: 0 var(--#{$table}__tbody--m-expanded__expandable-row--TranslateY);
1020
+
1021
+ @starting-style {
1022
+ opacity: var(--#{$table}__expandable-row--Opacity);
1023
+ translate: 0 var(--#{$table}__expandable-row--TranslateY);
1024
+ }
992
1025
  }
993
1026
 
994
1027
  &:not(.pf-m-expanded) {
package/components/_index.css CHANGED
@@ -6423,8 +6423,8 @@ ul) {
6423
6423
  --pf-v6-c-expandable-section__content--TransitionDuration--fade: var(--pf-v6-c-expandable-section__content--TransitionDuration--collapse--fade);
6424
6424
  --pf-v6-c-expandable-section__content--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
6425
6425
  --pf-v6-c-expandable-section__content--Opacity: 0;
6426
- --pf-v6-c-expandable-section--m-expanded__content--Opacity: 1;
6427
6426
  --pf-v6-c-expandable-section__content--TranslateY: 0;
6427
+ --pf-v6-c-expandable-section--m-expanded__content--Opacity: 1;
6428
6428
  --pf-v6-c-expandable-section--m-expanded__content--TranslateY: 0;
6429
6429
  --pf-v6-c-expandable-section__content--MaxWidth: auto;
6430
6430
  --pf-v6-c-expandable-section--m-limit-width__content--MaxWidth: 46.875rem;
@@ -6510,12 +6510,28 @@ ul) {
6510
6510
  max-width: var(--pf-v6-c-expandable-section__content--MaxWidth);
6511
6511
  padding-block-end: var(--pf-v6-c-expandable-section__content--PaddingBlockEnd, 0);
6512
6512
  padding-inline-start: var(--pf-v6-c-expandable-section__content--PaddingInlineStart, 0);
6513
+ }
6514
+ .pf-v6-c-expandable-section__content:where([hidden]) {
6515
+ display: revert;
6516
+ }
6517
+ .pf-v6-c-expandable-section:where(:not(.pf-m-truncate)) .pf-v6-c-expandable-section__content {
6518
+ display: none;
6513
6519
  opacity: var(--pf-v6-c-expandable-section__content--Opacity);
6514
6520
  transition-timing-function: var(--pf-v6-c-expandable-section__content--TransitionTimingFunction);
6515
- transition-duration: var(--pf-v6-c-expandable-section__content--TransitionDuration--fade), var(--pf-v6-c-expandable-section__content--TransitionDuration--slide);
6516
- transition-property: opacity, translate;
6521
+ 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);
6522
+ transition-property: opacity, translate, display;
6523
+ transition-behavior: allow-discrete;
6517
6524
  translate: 0 var(--pf-v6-c-expandable-section__content--TranslateY);
6518
6525
  }
6526
+ .pf-v6-c-expandable-section.pf-m-expanded .pf-v6-c-expandable-section__content {
6527
+ display: revert;
6528
+ }
6529
+ @starting-style {
6530
+ .pf-v6-c-expandable-section.pf-m-expanded .pf-v6-c-expandable-section__content {
6531
+ --pf-v6-c-expandable-section__content--Opacity: 0;
6532
+ --pf-v6-c-expandable-section__content--TranslateY: -.5rem;
6533
+ }
6534
+ }
6519
6535
 
6520
6536
  .pf-v6-c-file-upload {
6521
6537
  --pf-v6-c-file-upload--RowGap: var(--pf-t--global--spacer--gap--group--vertical);
@@ -16827,6 +16843,17 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
16827
16843
  --pf-v6-c-table__action--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
16828
16844
  --pf-v6-c-table__action--PaddingInlineStart: var(--pf-t--global--spacer--sm);
16829
16845
  --pf-v6-c-table__action--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
16846
+ --pf-v6-c-table__expandable-row--TransitionDuration--expand--slide: 0s;
16847
+ --pf-v6-c-table__expandable-row--TransitionDuration--expand--fade: var(--pf-t--global--motion--duration--fade--default);
16848
+ --pf-v6-c-table__expandable-row--TransitionDuration--collapse--slide: 0s;
16849
+ --pf-v6-c-table__expandable-row--TransitionDuration--collapse--fade: var(--pf-t--global--motion--duration--fade--short);
16850
+ --pf-v6-c-table__expandable-row--TransitionDuration--slide: var(--pf-v6-c-table__expandable-row--TransitionDuration--collapse--slide);
16851
+ --pf-v6-c-table__expandable-row--TransitionDuration--fade: var(--pf-v6-c-table__expandable-row--TransitionDuration--collapse--fade);
16852
+ --pf-v6-c-table__expandable-row--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
16853
+ --pf-v6-c-table__expandable-row--Opacity: 0;
16854
+ --pf-v6-c-table__tbody--m-expanded__expandable-row--Opacity: 1;
16855
+ --pf-v6-c-table__expandable-row--TranslateY: 0;
16856
+ --pf-v6-c-table__tbody--m-expanded__expandable-row--TranslateY: 0;
16830
16857
  --pf-v6-c-table__expandable-row-content--PaddingBlockStart: var(--pf-t--global--spacer--md);
16831
16858
  --pf-v6-c-table__expandable-row-content--PaddingBlockEnd: var(--pf-t--global--spacer--md);
16832
16859
  --pf-v6-c-table__expandable-row-content--PaddingInlineStart: var(--pf-t--global--spacer--md);
@@ -16887,6 +16914,13 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
16887
16914
  --pf-v6-c-table--m-sticky-header--ZIndex: calc(var(--pf-t--global--z-index--xs) + 1);
16888
16915
  --pf-v6-c-table--m-sticky-header--border--ZIndex: calc(var(--pf-t--global--z-index--xs) + 2);
16889
16916
  }
16917
+ @media screen and (prefers-reduced-motion: no-preference) {
16918
+ .pf-v6-c-table {
16919
+ --pf-v6-c-table__expandable-row--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
16920
+ --pf-v6-c-table__expandable-row--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
16921
+ --pf-v6-c-table__expandable-row--TranslateY: -.5rem;
16922
+ }
16923
+ }
16890
16924
 
16891
16925
  .pf-v6-c-table {
16892
16926
  width: 100%;
@@ -17455,6 +17489,12 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
17455
17489
  .pf-v6-c-table__expandable-row {
17456
17490
  position: relative;
17457
17491
  border-block-end: 0 solid transparent;
17492
+ opacity: var(--pf-v6-c-table__expandable-row--Opacity);
17493
+ transition-timing-function: var(--pf-v6-c-table__expandable-row--TransitionTimingFunction);
17494
+ transition-duration: var(--pf-v6-c-table__expandable-row--TransitionDuration--fade), var(--pf-v6-c-table__expandable-row--TransitionDuration--slide), var(--pf-v6-c-table__expandable-row--TransitionDuration--fade);
17495
+ transition-property: opacity, translate, display;
17496
+ transition-behavior: allow-discrete;
17497
+ translate: 0 var(--pf-v6-c-table__expandable-row--TranslateY);
17458
17498
  }
17459
17499
  :not(.pf-v6-c-table__control-row) ~ .pf-v6-c-table__expandable-row > .pf-v6-c-table__th,
17460
17500
  :not(.pf-v6-c-table__control-row) ~ .pf-v6-c-table__expandable-row > .pf-v6-c-table__td {
@@ -17483,6 +17523,15 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
17483
17523
  .pf-v6-c-table__expandable-row.pf-m-expanded {
17484
17524
  border-block-end-color: var(--pf-v6-c-table__expandable-row--m-expanded--BorderBlockEndColor);
17485
17525
  border-block-end-width: var(--pf-v6-c-table--border-width--base);
17526
+ opacity: var(--pf-v6-c-table__tbody--m-expanded__expandable-row--Opacity);
17527
+ transition-duration: var(--pf-v6-c-table__expandable-row--TransitionDuration--expand--fade), var(--pf-v6-c-table__expandable-row--TransitionDuration--expand--slide), var(--pf-v6-c-table__expandable-row--TransitionDuration--expand--fade);
17528
+ translate: 0 var(--pf-v6-c-table__tbody--m-expanded__expandable-row--TranslateY);
17529
+ }
17530
+ @starting-style {
17531
+ .pf-v6-c-table__expandable-row.pf-m-expanded {
17532
+ opacity: var(--pf-v6-c-table__expandable-row--Opacity);
17533
+ translate: 0 var(--pf-v6-c-table__expandable-row--TranslateY);
17534
+ }
17486
17535
  }
17487
17536
  .pf-v6-c-table__expandable-row:not(.pf-m-expanded) {
17488
17537
  display: none;
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@patternfly/patternfly",
3
3
  "description": "Assets, source, tooling, and content for PatternFly 4",
4
- "version": "6.3.0-prerelease.14",
4
+ "version": "6.3.0-prerelease.15",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
package/patternfly-no-globals.css CHANGED
@@ -13885,8 +13885,8 @@ ul) {
13885
13885
  --pf-v6-c-expandable-section__content--TransitionDuration--fade: var(--pf-v6-c-expandable-section__content--TransitionDuration--collapse--fade);
13886
13886
  --pf-v6-c-expandable-section__content--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
13887
13887
  --pf-v6-c-expandable-section__content--Opacity: 0;
13888
- --pf-v6-c-expandable-section--m-expanded__content--Opacity: 1;
13889
13888
  --pf-v6-c-expandable-section__content--TranslateY: 0;
13889
+ --pf-v6-c-expandable-section--m-expanded__content--Opacity: 1;
13890
13890
  --pf-v6-c-expandable-section--m-expanded__content--TranslateY: 0;
13891
13891
  --pf-v6-c-expandable-section__content--MaxWidth: auto;
13892
13892
  --pf-v6-c-expandable-section--m-limit-width__content--MaxWidth: 46.875rem;
@@ -13972,12 +13972,28 @@ ul) {
13972
13972
  max-width: var(--pf-v6-c-expandable-section__content--MaxWidth);
13973
13973
  padding-block-end: var(--pf-v6-c-expandable-section__content--PaddingBlockEnd, 0);
13974
13974
  padding-inline-start: var(--pf-v6-c-expandable-section__content--PaddingInlineStart, 0);
13975
+ }
13976
+ .pf-v6-c-expandable-section__content:where([hidden]) {
13977
+ display: revert;
13978
+ }
13979
+ .pf-v6-c-expandable-section:where(:not(.pf-m-truncate)) .pf-v6-c-expandable-section__content {
13980
+ display: none;
13975
13981
  opacity: var(--pf-v6-c-expandable-section__content--Opacity);
13976
13982
  transition-timing-function: var(--pf-v6-c-expandable-section__content--TransitionTimingFunction);
13977
- transition-duration: var(--pf-v6-c-expandable-section__content--TransitionDuration--fade), var(--pf-v6-c-expandable-section__content--TransitionDuration--slide);
13978
- transition-property: opacity, translate;
13983
+ 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);
13984
+ transition-property: opacity, translate, display;
13985
+ transition-behavior: allow-discrete;
13979
13986
  translate: 0 var(--pf-v6-c-expandable-section__content--TranslateY);
13980
13987
  }
13988
+ .pf-v6-c-expandable-section.pf-m-expanded .pf-v6-c-expandable-section__content {
13989
+ display: revert;
13990
+ }
13991
+ @starting-style {
13992
+ .pf-v6-c-expandable-section.pf-m-expanded .pf-v6-c-expandable-section__content {
13993
+ --pf-v6-c-expandable-section__content--Opacity: 0;
13994
+ --pf-v6-c-expandable-section__content--TranslateY: -.5rem;
13995
+ }
13996
+ }
13981
13997
 
13982
13998
  .pf-v6-c-file-upload {
13983
13999
  --pf-v6-c-file-upload--RowGap: var(--pf-t--global--spacer--gap--group--vertical);
@@ -24289,6 +24305,17 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
24289
24305
  --pf-v6-c-table__action--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
24290
24306
  --pf-v6-c-table__action--PaddingInlineStart: var(--pf-t--global--spacer--sm);
24291
24307
  --pf-v6-c-table__action--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
24308
+ --pf-v6-c-table__expandable-row--TransitionDuration--expand--slide: 0s;
24309
+ --pf-v6-c-table__expandable-row--TransitionDuration--expand--fade: var(--pf-t--global--motion--duration--fade--default);
24310
+ --pf-v6-c-table__expandable-row--TransitionDuration--collapse--slide: 0s;
24311
+ --pf-v6-c-table__expandable-row--TransitionDuration--collapse--fade: var(--pf-t--global--motion--duration--fade--short);
24312
+ --pf-v6-c-table__expandable-row--TransitionDuration--slide: var(--pf-v6-c-table__expandable-row--TransitionDuration--collapse--slide);
24313
+ --pf-v6-c-table__expandable-row--TransitionDuration--fade: var(--pf-v6-c-table__expandable-row--TransitionDuration--collapse--fade);
24314
+ --pf-v6-c-table__expandable-row--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
24315
+ --pf-v6-c-table__expandable-row--Opacity: 0;
24316
+ --pf-v6-c-table__tbody--m-expanded__expandable-row--Opacity: 1;
24317
+ --pf-v6-c-table__expandable-row--TranslateY: 0;
24318
+ --pf-v6-c-table__tbody--m-expanded__expandable-row--TranslateY: 0;
24292
24319
  --pf-v6-c-table__expandable-row-content--PaddingBlockStart: var(--pf-t--global--spacer--md);
24293
24320
  --pf-v6-c-table__expandable-row-content--PaddingBlockEnd: var(--pf-t--global--spacer--md);
24294
24321
  --pf-v6-c-table__expandable-row-content--PaddingInlineStart: var(--pf-t--global--spacer--md);
@@ -24349,6 +24376,13 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
24349
24376
  --pf-v6-c-table--m-sticky-header--ZIndex: calc(var(--pf-t--global--z-index--xs) + 1);
24350
24377
  --pf-v6-c-table--m-sticky-header--border--ZIndex: calc(var(--pf-t--global--z-index--xs) + 2);
24351
24378
  }
24379
+ @media screen and (prefers-reduced-motion: no-preference) {
24380
+ .pf-v6-c-table {
24381
+ --pf-v6-c-table__expandable-row--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
24382
+ --pf-v6-c-table__expandable-row--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
24383
+ --pf-v6-c-table__expandable-row--TranslateY: -.5rem;
24384
+ }
24385
+ }
24352
24386
 
24353
24387
  .pf-v6-c-table {
24354
24388
  width: 100%;
@@ -24917,6 +24951,12 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
24917
24951
  .pf-v6-c-table__expandable-row {
24918
24952
  position: relative;
24919
24953
  border-block-end: 0 solid transparent;
24954
+ opacity: var(--pf-v6-c-table__expandable-row--Opacity);
24955
+ transition-timing-function: var(--pf-v6-c-table__expandable-row--TransitionTimingFunction);
24956
+ transition-duration: var(--pf-v6-c-table__expandable-row--TransitionDuration--fade), var(--pf-v6-c-table__expandable-row--TransitionDuration--slide), var(--pf-v6-c-table__expandable-row--TransitionDuration--fade);
24957
+ transition-property: opacity, translate, display;
24958
+ transition-behavior: allow-discrete;
24959
+ translate: 0 var(--pf-v6-c-table__expandable-row--TranslateY);
24920
24960
  }
24921
24961
  :not(.pf-v6-c-table__control-row) ~ .pf-v6-c-table__expandable-row > .pf-v6-c-table__th,
24922
24962
  :not(.pf-v6-c-table__control-row) ~ .pf-v6-c-table__expandable-row > .pf-v6-c-table__td {
@@ -24945,6 +24985,15 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
24945
24985
  .pf-v6-c-table__expandable-row.pf-m-expanded {
24946
24986
  border-block-end-color: var(--pf-v6-c-table__expandable-row--m-expanded--BorderBlockEndColor);
24947
24987
  border-block-end-width: var(--pf-v6-c-table--border-width--base);
24988
+ opacity: var(--pf-v6-c-table__tbody--m-expanded__expandable-row--Opacity);
24989
+ transition-duration: var(--pf-v6-c-table__expandable-row--TransitionDuration--expand--fade), var(--pf-v6-c-table__expandable-row--TransitionDuration--expand--slide), var(--pf-v6-c-table__expandable-row--TransitionDuration--expand--fade);
24990
+ translate: 0 var(--pf-v6-c-table__tbody--m-expanded__expandable-row--TranslateY);
24991
+ }
24992
+ @starting-style {
24993
+ .pf-v6-c-table__expandable-row.pf-m-expanded {
24994
+ opacity: var(--pf-v6-c-table__expandable-row--Opacity);
24995
+ translate: 0 var(--pf-v6-c-table__expandable-row--TranslateY);
24996
+ }
24948
24997
  }
24949
24998
  .pf-v6-c-table__expandable-row:not(.pf-m-expanded) {
24950
24999
  display: none;
package/patternfly.css CHANGED
@@ -14021,8 +14021,8 @@ ul) {
14021
14021
  --pf-v6-c-expandable-section__content--TransitionDuration--fade: var(--pf-v6-c-expandable-section__content--TransitionDuration--collapse--fade);
14022
14022
  --pf-v6-c-expandable-section__content--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
14023
14023
  --pf-v6-c-expandable-section__content--Opacity: 0;
14024
- --pf-v6-c-expandable-section--m-expanded__content--Opacity: 1;
14025
14024
  --pf-v6-c-expandable-section__content--TranslateY: 0;
14025
+ --pf-v6-c-expandable-section--m-expanded__content--Opacity: 1;
14026
14026
  --pf-v6-c-expandable-section--m-expanded__content--TranslateY: 0;
14027
14027
  --pf-v6-c-expandable-section__content--MaxWidth: auto;
14028
14028
  --pf-v6-c-expandable-section--m-limit-width__content--MaxWidth: 46.875rem;
@@ -14108,12 +14108,28 @@ ul) {
14108
14108
  max-width: var(--pf-v6-c-expandable-section__content--MaxWidth);
14109
14109
  padding-block-end: var(--pf-v6-c-expandable-section__content--PaddingBlockEnd, 0);
14110
14110
  padding-inline-start: var(--pf-v6-c-expandable-section__content--PaddingInlineStart, 0);
14111
+ }
14112
+ .pf-v6-c-expandable-section__content:where([hidden]) {
14113
+ display: revert;
14114
+ }
14115
+ .pf-v6-c-expandable-section:where(:not(.pf-m-truncate)) .pf-v6-c-expandable-section__content {
14116
+ display: none;
14111
14117
  opacity: var(--pf-v6-c-expandable-section__content--Opacity);
14112
14118
  transition-timing-function: var(--pf-v6-c-expandable-section__content--TransitionTimingFunction);
14113
- transition-duration: var(--pf-v6-c-expandable-section__content--TransitionDuration--fade), var(--pf-v6-c-expandable-section__content--TransitionDuration--slide);
14114
- transition-property: opacity, translate;
14119
+ 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);
14120
+ transition-property: opacity, translate, display;
14121
+ transition-behavior: allow-discrete;
14115
14122
  translate: 0 var(--pf-v6-c-expandable-section__content--TranslateY);
14116
14123
  }
14124
+ .pf-v6-c-expandable-section.pf-m-expanded .pf-v6-c-expandable-section__content {
14125
+ display: revert;
14126
+ }
14127
+ @starting-style {
14128
+ .pf-v6-c-expandable-section.pf-m-expanded .pf-v6-c-expandable-section__content {
14129
+ --pf-v6-c-expandable-section__content--Opacity: 0;
14130
+ --pf-v6-c-expandable-section__content--TranslateY: -.5rem;
14131
+ }
14132
+ }
14117
14133
 
14118
14134
  .pf-v6-c-file-upload {
14119
14135
  --pf-v6-c-file-upload--RowGap: var(--pf-t--global--spacer--gap--group--vertical);
@@ -24425,6 +24441,17 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
24425
24441
  --pf-v6-c-table__action--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
24426
24442
  --pf-v6-c-table__action--PaddingInlineStart: var(--pf-t--global--spacer--sm);
24427
24443
  --pf-v6-c-table__action--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
24444
+ --pf-v6-c-table__expandable-row--TransitionDuration--expand--slide: 0s;
24445
+ --pf-v6-c-table__expandable-row--TransitionDuration--expand--fade: var(--pf-t--global--motion--duration--fade--default);
24446
+ --pf-v6-c-table__expandable-row--TransitionDuration--collapse--slide: 0s;
24447
+ --pf-v6-c-table__expandable-row--TransitionDuration--collapse--fade: var(--pf-t--global--motion--duration--fade--short);
24448
+ --pf-v6-c-table__expandable-row--TransitionDuration--slide: var(--pf-v6-c-table__expandable-row--TransitionDuration--collapse--slide);
24449
+ --pf-v6-c-table__expandable-row--TransitionDuration--fade: var(--pf-v6-c-table__expandable-row--TransitionDuration--collapse--fade);
24450
+ --pf-v6-c-table__expandable-row--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
24451
+ --pf-v6-c-table__expandable-row--Opacity: 0;
24452
+ --pf-v6-c-table__tbody--m-expanded__expandable-row--Opacity: 1;
24453
+ --pf-v6-c-table__expandable-row--TranslateY: 0;
24454
+ --pf-v6-c-table__tbody--m-expanded__expandable-row--TranslateY: 0;
24428
24455
  --pf-v6-c-table__expandable-row-content--PaddingBlockStart: var(--pf-t--global--spacer--md);
24429
24456
  --pf-v6-c-table__expandable-row-content--PaddingBlockEnd: var(--pf-t--global--spacer--md);
24430
24457
  --pf-v6-c-table__expandable-row-content--PaddingInlineStart: var(--pf-t--global--spacer--md);
@@ -24485,6 +24512,13 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
24485
24512
  --pf-v6-c-table--m-sticky-header--ZIndex: calc(var(--pf-t--global--z-index--xs) + 1);
24486
24513
  --pf-v6-c-table--m-sticky-header--border--ZIndex: calc(var(--pf-t--global--z-index--xs) + 2);
24487
24514
  }
24515
+ @media screen and (prefers-reduced-motion: no-preference) {
24516
+ .pf-v6-c-table {
24517
+ --pf-v6-c-table__expandable-row--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
24518
+ --pf-v6-c-table__expandable-row--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
24519
+ --pf-v6-c-table__expandable-row--TranslateY: -.5rem;
24520
+ }
24521
+ }
24488
24522
 
24489
24523
  .pf-v6-c-table {
24490
24524
  width: 100%;
@@ -25053,6 +25087,12 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
25053
25087
  .pf-v6-c-table__expandable-row {
25054
25088
  position: relative;
25055
25089
  border-block-end: 0 solid transparent;
25090
+ opacity: var(--pf-v6-c-table__expandable-row--Opacity);
25091
+ transition-timing-function: var(--pf-v6-c-table__expandable-row--TransitionTimingFunction);
25092
+ transition-duration: var(--pf-v6-c-table__expandable-row--TransitionDuration--fade), var(--pf-v6-c-table__expandable-row--TransitionDuration--slide), var(--pf-v6-c-table__expandable-row--TransitionDuration--fade);
25093
+ transition-property: opacity, translate, display;
25094
+ transition-behavior: allow-discrete;
25095
+ translate: 0 var(--pf-v6-c-table__expandable-row--TranslateY);
25056
25096
  }
25057
25097
  :not(.pf-v6-c-table__control-row) ~ .pf-v6-c-table__expandable-row > .pf-v6-c-table__th,
25058
25098
  :not(.pf-v6-c-table__control-row) ~ .pf-v6-c-table__expandable-row > .pf-v6-c-table__td {
@@ -25081,6 +25121,15 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
25081
25121
  .pf-v6-c-table__expandable-row.pf-m-expanded {
25082
25122
  border-block-end-color: var(--pf-v6-c-table__expandable-row--m-expanded--BorderBlockEndColor);
25083
25123
  border-block-end-width: var(--pf-v6-c-table--border-width--base);
25124
+ opacity: var(--pf-v6-c-table__tbody--m-expanded__expandable-row--Opacity);
25125
+ transition-duration: var(--pf-v6-c-table__expandable-row--TransitionDuration--expand--fade), var(--pf-v6-c-table__expandable-row--TransitionDuration--expand--slide), var(--pf-v6-c-table__expandable-row--TransitionDuration--expand--fade);
25126
+ translate: 0 var(--pf-v6-c-table__tbody--m-expanded__expandable-row--TranslateY);
25127
+ }
25128
+ @starting-style {
25129
+ .pf-v6-c-table__expandable-row.pf-m-expanded {
25130
+ opacity: var(--pf-v6-c-table__expandable-row--Opacity);
25131
+ translate: 0 var(--pf-v6-c-table__expandable-row--TranslateY);
25132
+ }
25084
25133
  }
25085
25134
  .pf-v6-c-table__expandable-row:not(.pf-m-expanded) {
25086
25135
  display: none;