@patternfly/patternfly 6.5.0-prerelease.52 → 6.5.0-prerelease.53

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 (12) hide show
  1. package/components/Card/card.css +20 -8
  2. package/components/Card/card.scss +26 -7
  3. package/components/_index.css +20 -8
  4. package/docs/demos/Card/examples/Card.md +564 -86
  5. package/docs/demos/CardView/examples/CardView.md +15 -1
  6. package/docs/demos/Compass/examples/Compass.md +393 -82
  7. package/docs/demos/Dashboard/examples/Dashboard.md +434 -100
  8. package/package.json +1 -1
  9. package/patternfly-no-globals.css +20 -8
  10. package/patternfly.css +20 -8
  11. package/patternfly.min.css +1 -1
  12. package/patternfly.min.css.map +1 -1
package/components/Card/card.css CHANGED
@@ -1,9 +1,10 @@
1
1
  .pf-v6-c-card {
2
2
  --pf-v6-c-card--BackgroundColor: var(--pf-t--global--background--color--primary--default);
3
- --pf-v6-c-card--BorderColor: var(--pf-t--global--border--color--default);
3
+ --pf-v6-c-card--BorderColor: var(--pf-t--global--border--color--subtle);
4
4
  --pf-v6-c-card--BorderStyle: solid;
5
5
  --pf-v6-c-card--BorderWidth: var(--pf-t--global--border--width--box--default);
6
6
  --pf-v6-c-card--BorderRadius: var(--pf-t--global--border--radius--medium);
7
+ --pf-v6-c-card--BoxShadow: var(--pf-t--global--box-shadow--sm);
7
8
  --pf-v6-c-card--first-child--PaddingBlockStart: var(--pf-t--global--spacer--lg);
8
9
  --pf-v6-c-card--child--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
9
10
  --pf-v6-c-card--child--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
@@ -33,7 +34,8 @@
33
34
  --pf-v6-c-card__header-toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
34
35
  --pf-v6-c-card__header-toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
35
36
  --pf-v6-c-card--m-expanded__header-toggle-icon--Rotate: -180deg;
36
- --pf-v6-c-card--m-selectable--BorderWidth: var(--pf-v6-c-card--BorderWidth);
37
+ --pf-v6-c-card--m-selectable--BorderWidth: var(--pf-t--global--border--width--box--default);
38
+ --pf-v6-c-card--m-selectable--BorderColor: var(--pf-t--global--border--color--control--default);
37
39
  --pf-v6-c-card--m-clickable--m-current--BorderColor: var(--pf-t--global--border--color--clicked);
38
40
  --pf-v6-c-card--m-clickable--m-current--BorderWidth: var(--pf-t--global--border--width--box--clicked);
39
41
  --pf-v6-c-card--m-selectable--m-selected--BorderColor: var(--pf-t--global--border--color--clicked);
@@ -70,13 +72,14 @@
70
72
  --pf-v6-c-card--m-display-lg--c-divider--child--PaddingBlockStart: var(--pf-t--global--spacer--xl);
71
73
  --pf-v6-c-card--m-display-lg__title--not--last-child--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
72
74
  --pf-v6-c-card--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
73
- --pf-v6-c-card--m-secondary--BorderColor: var(--pf-t--global--border--color--high-contrast);
74
- --pf-v6-c-card--m-secondary--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
75
75
  --pf-v6-c-card--m-full-height--Height: 100%;
76
76
  --pf-v6-c-card--m-plain--BorderColor: transparent;
77
77
  --pf-v6-c-card--m-plain--BackgroundColor: transparent;
78
+ --pf-v6-c-card--m-plain--BoxShadow: none;
78
79
  --pf-v6-c-card__header--m-toggle-right--toggle--MarginInlineEnd: calc(var(--pf-t--global--spacer--action--horizontal--plain--default) * -1);
79
80
  --pf-v6-c-card__header--m-toggle-right--toggle--MarginInlineStart: var(--pf-t--global--spacer--gap--text-to-element--default);
81
+ --pf-v6-c-card--m-as-tile--BackgroundColor: var(--pf-t--global--background--color--control--default);
82
+ --pf-v6-c-card--m-as-tile--BorderColor: var(--pf-t--global--border--color--control--default);
80
83
  }
81
84
 
82
85
  .pf-v6-c-card {
@@ -87,6 +90,7 @@
87
90
  background-color: var(--pf-v6-c-card--BackgroundColor);
88
91
  border: 0;
89
92
  border-radius: var(--pf-v6-c-card--BorderRadius);
93
+ box-shadow: var(--pf-v6-c-card--BoxShadow);
90
94
  }
91
95
  .pf-v6-c-card::before {
92
96
  position: absolute;
@@ -100,6 +104,7 @@
100
104
  gap: 0;
101
105
  }
102
106
  .pf-v6-c-card.pf-m-selectable, .pf-v6-c-card.pf-m-clickable {
107
+ --pf-v6-c-card--BorderColor: var(--pf-v6-c-card--m-selectable--BorderColor);
103
108
  isolation: isolate;
104
109
  }
105
110
  .pf-v6-c-card.pf-m-selectable::before, .pf-v6-c-card.pf-m-clickable::before {
@@ -134,12 +139,16 @@
134
139
  .pf-v6-c-card.pf-m-selectable.pf-m-clickable .pf-v6-c-card__selectable-actions :is(.pf-v6-c-check__input, .pf-v6-c-radio__input):where(:disabled) ~ :is(.pf-v6-c-check__label, .pf-v6-c-radio__label), .pf-v6-c-card.pf-m-selectable.pf-m-clickable.pf-m-disabled {
135
140
  --pf-v6-c-card--BackgroundColor: var(--pf-v6-c-card--m-selectable--m-disabled--BackgroundColor);
136
141
  }
137
- .pf-v6-c-card__actions:has(> .pf-v6-c-card__selectable-actions input.pf-v6-screen-reader), .pf-v6-c-card.pf-m-clickable:not(.pf-m-selectable) {
142
+ .pf-v6-c-card__actions:has(> .pf-v6-c-card__selectable-actions input.pf-v6-screen-reader), .pf-v6-c-card:has(.pf-v6-c-card__selectable-actions input.pf-v6-screen-reader) {
143
+ --pf-v6-c-card--BackgroundColor: var(--pf-v6-c-card--m-as-tile--BackgroundColor);
144
+ --pf-v6-c-card--BorderColor: var(--pf-v6-c-card--m-as-tile--BorderColor);
145
+ }
146
+
147
+ .pf-v6-c-card.pf-m-clickable:not(.pf-m-selectable) {
138
148
  --pf-v6-c-card__actions--PaddingInlineStart: 0;
139
149
  --pf-v6-c-card__actions--MarginBlockStart: 0;
140
150
  --pf-v6-c-card__actions--MarginBlockEnd: 0;
141
151
  }
142
-
143
152
  .pf-v6-c-card.pf-m-compact {
144
153
  --pf-v6-c-card__title-text--FontSize: var(--pf-v6-c-card--m-compact__title-text--FontSize);
145
154
  --pf-v6-c-card__body--FontSize: var(--pf-v6-c-card--m-compact__body--FontSize);
@@ -163,13 +172,16 @@
163
172
  --pf-v6-c-card__title--not--last-child--PaddingBlockEnd: var(--pf-v6-c-card--m-display-lg__title--not--last-child--PaddingBlockEnd);
164
173
  }
165
174
  .pf-v6-c-card.pf-m-secondary {
166
- --pf-v6-c-card--BorderColor: var(--pf-v6-c-card--m-secondary--BorderColor);
167
- --pf-v6-c-card--BorderWidth: var(--pf-v6-c-card--m-secondary--BorderWidth);
168
175
  --pf-v6-c-card--BackgroundColor: var(--pf-v6-c-card--m-secondary--BackgroundColor);
169
176
  }
177
+ .pf-v6-c-card.pf-m-secondary.pf-m-selectable:not(.pf-m-current, .pf-m-selected), .pf-v6-c-card.pf-m-secondary.pf-m-clickable:not(.pf-m-current, .pf-m-selected) {
178
+ --pf-v6-c-card--BorderColor: var(--pf-v6-c-card--m-selectable--BorderColor);
179
+ --pf-v6-c-card--BorderWidth: var(--pf-v6-c-card--m-selectable--BorderWidth);
180
+ }
170
181
  .pf-v6-c-card.pf-m-plain {
171
182
  --pf-v6-c-card--BorderColor: var(--pf-v6-c-card--m-plain--BorderColor);
172
183
  --pf-v6-c-card--BackgroundColor: var(--pf-v6-c-card--m-plain--BackgroundColor);
184
+ --pf-v6-c-card--BoxShadow: var(--pf-v6-c-card--m-plain--BoxShadow);
173
185
  }
174
186
  .pf-v6-c-card.pf-m-expanded .pf-v6-c-card__header-toggle-icon {
175
187
  transform: rotate(var(--pf-v6-c-card--m-expanded__header-toggle-icon--Rotate));
package/components/Card/card.scss CHANGED
@@ -2,10 +2,11 @@
2
2
 
3
3
  @include pf-root($card) {
4
4
  --#{$card}--BackgroundColor: var(--pf-t--global--background--color--primary--default);
5
- --#{$card}--BorderColor: var(--pf-t--global--border--color--default);
5
+ --#{$card}--BorderColor: var(--pf-t--global--border--color--subtle);
6
6
  --#{$card}--BorderStyle: solid;
7
7
  --#{$card}--BorderWidth: var(--pf-t--global--border--width--box--default);
8
8
  --#{$card}--BorderRadius: var(--pf-t--global--border--radius--medium);
9
+ --#{$card}--BoxShadow: var(--pf-t--global--box-shadow--sm);
9
10
  --#{$card}--first-child--PaddingBlockStart: var(--pf-t--global--spacer--lg);
10
11
  --#{$card}--child--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
11
12
  --#{$card}--child--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
@@ -39,7 +40,8 @@
39
40
  --#{$card}--m-expanded__header-toggle-icon--Rotate: -180deg;
40
41
 
41
42
  // Selectable/Clickable
42
- --#{$card}--m-selectable--BorderWidth: var(--#{$card}--BorderWidth);
43
+ --#{$card}--m-selectable--BorderWidth: var(--pf-t--global--border--width--box--default);
44
+ --#{$card}--m-selectable--BorderColor: var(--pf-t--global--border--color--control--default);
43
45
 
44
46
  // Clickable clicked
45
47
  --#{$card}--m-clickable--m-current--BorderColor: var(--pf-t--global--border--color--clicked);
@@ -97,8 +99,6 @@
97
99
 
98
100
  // Secondary
99
101
  --#{$card}--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
100
- --#{$card}--m-secondary--BorderColor: var(--pf-t--global--border--color--high-contrast);
101
- --#{$card}--m-secondary--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
102
102
 
103
103
  // Full height
104
104
  --#{$card}--m-full-height--Height: 100%;
@@ -106,10 +106,15 @@
106
106
  // Plain - no border or background color
107
107
  --#{$card}--m-plain--BorderColor: transparent;
108
108
  --#{$card}--m-plain--BackgroundColor: transparent;
109
+ --#{$card}--m-plain--BoxShadow: none;
109
110
 
110
111
  // Toggle right
111
112
  --#{$card}__header--m-toggle-right--toggle--MarginInlineEnd: calc(var(--pf-t--global--spacer--action--horizontal--plain--default) * -1);
112
113
  --#{$card}__header--m-toggle-right--toggle--MarginInlineStart: var(--pf-t--global--spacer--gap--text-to-element--default);
114
+
115
+ // As tile
116
+ --#{$card}--m-as-tile--BackgroundColor: var(--pf-t--global--background--color--control--default);
117
+ --#{$card}--m-as-tile--BorderColor: var(--pf-t--global--border--color--control--default);
113
118
  }
114
119
 
115
120
  .#{$card} {
@@ -120,6 +125,7 @@
120
125
  background-color: var(--#{$card}--BackgroundColor);
121
126
  border: 0;
122
127
  border-radius: var(--#{$card}--BorderRadius);
128
+ box-shadow: var(--#{$card}--BoxShadow);
123
129
 
124
130
  &::before {
125
131
  position: absolute;
@@ -141,6 +147,8 @@
141
147
  // SELECTABLE or CLICKABLE CARDS
142
148
  &.pf-m-selectable,
143
149
  &.pf-m-clickable {
150
+ --#{$card}--BorderColor: var(--#{$card}--m-selectable--BorderColor);
151
+
144
152
  isolation: isolate;
145
153
 
146
154
  &::before {
@@ -196,8 +204,14 @@
196
204
  }
197
205
  // stylelint-enable selector-max-class
198
206
 
199
- // when the whole card is clickable and the card actions are invisible, remove the padding/margin so it doesn't take up space
207
+
200
208
  @at-root .#{$card}__actions:has(> .#{$card}__selectable-actions input.#{$pf-prefix}screen-reader), // targets "card as tile", which are selectable cards with inputs
209
+ &:has(.#{$card}__selectable-actions input.#{$pf-prefix}screen-reader) {
210
+ --#{$card}--BackgroundColor: var(--#{$card}--m-as-tile--BackgroundColor);
211
+ --#{$card}--BorderColor: var(--#{$card}--m-as-tile--BorderColor);
212
+ }
213
+
214
+ // when the whole card is clickable and the card actions are invisible, remove the padding/margin so it doesn't take up space
201
215
  &.pf-m-clickable:not(.pf-m-selectable) {
202
216
  --#{$card}__actions--PaddingInlineStart: 0;
203
217
  --#{$card}__actions--MarginBlockStart: 0;
@@ -229,14 +243,19 @@
229
243
  }
230
244
 
231
245
  &.pf-m-secondary {
232
- --#{$card}--BorderColor: var(--#{$card}--m-secondary--BorderColor);
233
- --#{$card}--BorderWidth: var(--#{$card}--m-secondary--BorderWidth);
234
246
  --#{$card}--BackgroundColor: var(--#{$card}--m-secondary--BackgroundColor);
247
+
248
+ &.pf-m-selectable:not(.pf-m-current, .pf-m-selected),
249
+ &.pf-m-clickable:not(.pf-m-current, .pf-m-selected) {
250
+ --#{$card}--BorderColor: var(--#{$card}--m-selectable--BorderColor);
251
+ --#{$card}--BorderWidth: var(--#{$card}--m-selectable--BorderWidth);
252
+ }
235
253
  }
236
254
 
237
255
  &.pf-m-plain {
238
256
  --#{$card}--BorderColor: var(--#{$card}--m-plain--BorderColor);
239
257
  --#{$card}--BackgroundColor: var(--#{$card}--m-plain--BackgroundColor);
258
+ --#{$card}--BoxShadow: var(--#{$card}--m-plain--BoxShadow);
240
259
  }
241
260
 
242
261
  &.pf-m-expanded {
package/components/_index.css CHANGED
@@ -2811,10 +2811,11 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
2811
2811
 
2812
2812
  .pf-v6-c-card {
2813
2813
  --pf-v6-c-card--BackgroundColor: var(--pf-t--global--background--color--primary--default);
2814
- --pf-v6-c-card--BorderColor: var(--pf-t--global--border--color--default);
2814
+ --pf-v6-c-card--BorderColor: var(--pf-t--global--border--color--subtle);
2815
2815
  --pf-v6-c-card--BorderStyle: solid;
2816
2816
  --pf-v6-c-card--BorderWidth: var(--pf-t--global--border--width--box--default);
2817
2817
  --pf-v6-c-card--BorderRadius: var(--pf-t--global--border--radius--medium);
2818
+ --pf-v6-c-card--BoxShadow: var(--pf-t--global--box-shadow--sm);
2818
2819
  --pf-v6-c-card--first-child--PaddingBlockStart: var(--pf-t--global--spacer--lg);
2819
2820
  --pf-v6-c-card--child--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
2820
2821
  --pf-v6-c-card--child--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
@@ -2844,7 +2845,8 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
2844
2845
  --pf-v6-c-card__header-toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
2845
2846
  --pf-v6-c-card__header-toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
2846
2847
  --pf-v6-c-card--m-expanded__header-toggle-icon--Rotate: -180deg;
2847
- --pf-v6-c-card--m-selectable--BorderWidth: var(--pf-v6-c-card--BorderWidth);
2848
+ --pf-v6-c-card--m-selectable--BorderWidth: var(--pf-t--global--border--width--box--default);
2849
+ --pf-v6-c-card--m-selectable--BorderColor: var(--pf-t--global--border--color--control--default);
2848
2850
  --pf-v6-c-card--m-clickable--m-current--BorderColor: var(--pf-t--global--border--color--clicked);
2849
2851
  --pf-v6-c-card--m-clickable--m-current--BorderWidth: var(--pf-t--global--border--width--box--clicked);
2850
2852
  --pf-v6-c-card--m-selectable--m-selected--BorderColor: var(--pf-t--global--border--color--clicked);
@@ -2881,13 +2883,14 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
2881
2883
  --pf-v6-c-card--m-display-lg--c-divider--child--PaddingBlockStart: var(--pf-t--global--spacer--xl);
2882
2884
  --pf-v6-c-card--m-display-lg__title--not--last-child--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
2883
2885
  --pf-v6-c-card--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
2884
- --pf-v6-c-card--m-secondary--BorderColor: var(--pf-t--global--border--color--high-contrast);
2885
- --pf-v6-c-card--m-secondary--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
2886
2886
  --pf-v6-c-card--m-full-height--Height: 100%;
2887
2887
  --pf-v6-c-card--m-plain--BorderColor: transparent;
2888
2888
  --pf-v6-c-card--m-plain--BackgroundColor: transparent;
2889
+ --pf-v6-c-card--m-plain--BoxShadow: none;
2889
2890
  --pf-v6-c-card__header--m-toggle-right--toggle--MarginInlineEnd: calc(var(--pf-t--global--spacer--action--horizontal--plain--default) * -1);
2890
2891
  --pf-v6-c-card__header--m-toggle-right--toggle--MarginInlineStart: var(--pf-t--global--spacer--gap--text-to-element--default);
2892
+ --pf-v6-c-card--m-as-tile--BackgroundColor: var(--pf-t--global--background--color--control--default);
2893
+ --pf-v6-c-card--m-as-tile--BorderColor: var(--pf-t--global--border--color--control--default);
2891
2894
  }
2892
2895
 
2893
2896
  .pf-v6-c-card {
@@ -2898,6 +2901,7 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
2898
2901
  background-color: var(--pf-v6-c-card--BackgroundColor);
2899
2902
  border: 0;
2900
2903
  border-radius: var(--pf-v6-c-card--BorderRadius);
2904
+ box-shadow: var(--pf-v6-c-card--BoxShadow);
2901
2905
  }
2902
2906
  .pf-v6-c-card::before {
2903
2907
  position: absolute;
@@ -2911,6 +2915,7 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
2911
2915
  gap: 0;
2912
2916
  }
2913
2917
  .pf-v6-c-card.pf-m-selectable, .pf-v6-c-card.pf-m-clickable {
2918
+ --pf-v6-c-card--BorderColor: var(--pf-v6-c-card--m-selectable--BorderColor);
2914
2919
  isolation: isolate;
2915
2920
  }
2916
2921
  .pf-v6-c-card.pf-m-selectable::before, .pf-v6-c-card.pf-m-clickable::before {
@@ -2945,12 +2950,16 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
2945
2950
  .pf-v6-c-card.pf-m-selectable.pf-m-clickable .pf-v6-c-card__selectable-actions :is(.pf-v6-c-check__input, .pf-v6-c-radio__input):where(:disabled) ~ :is(.pf-v6-c-check__label, .pf-v6-c-radio__label), .pf-v6-c-card.pf-m-selectable.pf-m-clickable.pf-m-disabled {
2946
2951
  --pf-v6-c-card--BackgroundColor: var(--pf-v6-c-card--m-selectable--m-disabled--BackgroundColor);
2947
2952
  }
2948
- .pf-v6-c-card__actions:has(> .pf-v6-c-card__selectable-actions input.pf-v6-screen-reader), .pf-v6-c-card.pf-m-clickable:not(.pf-m-selectable) {
2953
+ .pf-v6-c-card__actions:has(> .pf-v6-c-card__selectable-actions input.pf-v6-screen-reader), .pf-v6-c-card:has(.pf-v6-c-card__selectable-actions input.pf-v6-screen-reader) {
2954
+ --pf-v6-c-card--BackgroundColor: var(--pf-v6-c-card--m-as-tile--BackgroundColor);
2955
+ --pf-v6-c-card--BorderColor: var(--pf-v6-c-card--m-as-tile--BorderColor);
2956
+ }
2957
+
2958
+ .pf-v6-c-card.pf-m-clickable:not(.pf-m-selectable) {
2949
2959
  --pf-v6-c-card__actions--PaddingInlineStart: 0;
2950
2960
  --pf-v6-c-card__actions--MarginBlockStart: 0;
2951
2961
  --pf-v6-c-card__actions--MarginBlockEnd: 0;
2952
2962
  }
2953
-
2954
2963
  .pf-v6-c-card.pf-m-compact {
2955
2964
  --pf-v6-c-card__title-text--FontSize: var(--pf-v6-c-card--m-compact__title-text--FontSize);
2956
2965
  --pf-v6-c-card__body--FontSize: var(--pf-v6-c-card--m-compact__body--FontSize);
@@ -2974,13 +2983,16 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
2974
2983
  --pf-v6-c-card__title--not--last-child--PaddingBlockEnd: var(--pf-v6-c-card--m-display-lg__title--not--last-child--PaddingBlockEnd);
2975
2984
  }
2976
2985
  .pf-v6-c-card.pf-m-secondary {
2977
- --pf-v6-c-card--BorderColor: var(--pf-v6-c-card--m-secondary--BorderColor);
2978
- --pf-v6-c-card--BorderWidth: var(--pf-v6-c-card--m-secondary--BorderWidth);
2979
2986
  --pf-v6-c-card--BackgroundColor: var(--pf-v6-c-card--m-secondary--BackgroundColor);
2980
2987
  }
2988
+ .pf-v6-c-card.pf-m-secondary.pf-m-selectable:not(.pf-m-current, .pf-m-selected), .pf-v6-c-card.pf-m-secondary.pf-m-clickable:not(.pf-m-current, .pf-m-selected) {
2989
+ --pf-v6-c-card--BorderColor: var(--pf-v6-c-card--m-selectable--BorderColor);
2990
+ --pf-v6-c-card--BorderWidth: var(--pf-v6-c-card--m-selectable--BorderWidth);
2991
+ }
2981
2992
  .pf-v6-c-card.pf-m-plain {
2982
2993
  --pf-v6-c-card--BorderColor: var(--pf-v6-c-card--m-plain--BorderColor);
2983
2994
  --pf-v6-c-card--BackgroundColor: var(--pf-v6-c-card--m-plain--BackgroundColor);
2995
+ --pf-v6-c-card--BoxShadow: var(--pf-v6-c-card--m-plain--BoxShadow);
2984
2996
  }
2985
2997
  .pf-v6-c-card.pf-m-expanded .pf-v6-c-card__header-toggle-icon {
2986
2998
  transform: rotate(var(--pf-v6-c-card--m-expanded__header-toggle-icon--Rotate));