@patternfly/patternfly 6.6.0-prerelease.25 → 6.6.0-prerelease.27

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/Button/button.css +2 -3
  2. package/components/Button/button.scss +3 -4
  3. package/components/FormControl/form-control.css +12 -2
  4. package/components/FormControl/form-control.scss +14 -2
  5. package/components/_index.css +14 -5
  6. package/package.json +1 -1
  7. package/patternfly-no-globals.css +14 -5
  8. package/patternfly.css +14 -5
  9. package/patternfly.min.css +1 -1
  10. package/patternfly.min.css.map +1 -1
package/components/Button/button.css CHANGED
@@ -251,6 +251,7 @@
251
251
  --pf-v6-c-button--m-display-lg--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--spacious);
252
252
  --pf-v6-c-button--m-display-lg--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--spacious);
253
253
  --pf-v6-c-button--m-display-lg--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--spacious);
254
+ --pf-v6-c-button--m-display-lg--FontSize: var(--pf-t--global--font--size--body--default);
254
255
  --pf-v6-c-button--m-display-lg--FontWeight: var(--pf-t--global--font--weight--body--bold);
255
256
  --pf-v6-c-button--m-link--m-display-lg--FontSize: var(--pf-t--global--font--size--body--default);
256
257
  --pf-v6-c-button--m-display-lg--hover--TextDecorationColor: var(--pf-t--global--border--color--control--default);
@@ -326,7 +327,6 @@
326
327
  --pf-v6-c-button--m-favorited__icon--favorited--Opacity: 1;
327
328
  --pf-v6-c-button__icon--favorite--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
328
329
  --pf-v6-c-button__progress--width: calc(var(--pf-t--global--icon--size--lg) + var(--pf-t--global--spacer--sm));
329
- --pf-v6-c-button__progress--Opacity: 0;
330
330
  --pf-v6-c-button__progress--TranslateY: -50%;
331
331
  --pf-v6-c-button__progress--TranslateX: 0;
332
332
  --pf-v6-c-button__progress--InsetBlockStart: 50%;
@@ -761,7 +761,6 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
761
761
  --pf-v6-c-button__icon--TransitionDelay: var(--pf-v6-c-button--hamburger-icon--TransitionDuration);
762
762
  --pf-v6-c-button__icon--TransitionDuration: 0s;
763
763
  --pf-v6-c-button__icon--TransitionProperty: scale;
764
- --pf-v6-c-button--hover__icon--TransitionDelay: var(--pf-v6-c-button--hamburger-icon--TransitionDuration);
765
764
  --pf-v6-c-button--hover__icon--TransitionDuration: 0s;
766
765
  --pf-v6-c-button--hover__icon--TransitionProperty: scale;
767
766
  }
@@ -837,7 +836,7 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
837
836
  background: var(--pf-v6-c-button--disabled--BackgroundColor);
838
837
  }
839
838
  .pf-v6-c-button:disabled::after, .pf-v6-c-button.pf-m-disabled::after, .pf-v6-c-button.pf-m-aria-disabled::after {
840
- border-color: transparent;
839
+ border-color: var(--pf-v6-c-button--disabled--BorderColor);
841
840
  }
842
841
  .pf-v6-c-button:disabled .pf-v6-c-button__icon, .pf-v6-c-button.pf-m-disabled .pf-v6-c-button__icon, .pf-v6-c-button.pf-m-aria-disabled .pf-v6-c-button__icon {
843
842
  color: var(--pf-v6-c-button--disabled__icon--Color);
package/components/Button/button.scss CHANGED
@@ -289,7 +289,8 @@
289
289
  --#{$button}--m-display-lg--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--spacious);
290
290
  --#{$button}--m-display-lg--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--spacious);
291
291
  --#{$button}--m-display-lg--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--spacious);
292
- --#{$button}--m-display-lg--FontWeight: var(--pf-t--global--font--weight--body--bold);
292
+ --#{$button}--m-display-lg--FontSize: var(--pf-t--global--font--size--body--default);
293
+ --#{$button}--m-display-lg--FontWeight: var(--pf-t--global--font--weight--body--bold); // TODO - remove in a breaking change
293
294
  --#{$button}--m-link--m-display-lg--FontSize: var(--pf-t--global--font--size--body--default);
294
295
  --#{$button}--m-display-lg--hover--TextDecorationColor: var(--pf-t--global--border--color--control--default);
295
296
  --#{$button}--m-display-lg--hover--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--hover);
@@ -380,7 +381,6 @@
380
381
 
381
382
  // Progress
382
383
  --#{$button}__progress--width: calc(var(--pf-t--global--icon--size--lg) + var(--pf-t--global--spacer--sm)); // matches medium spinner diameter plus a spacer
383
- --#{$button}__progress--Opacity: 0;
384
384
  --#{$button}__progress--TranslateY: -50%;
385
385
  --#{$button}__progress--TranslateX: 0;
386
386
  --#{$button}__progress--InsetBlockStart: 50%;
@@ -875,7 +875,6 @@
875
875
  --#{$button}__icon--TransitionDelay: var(--#{$button}--hamburger-icon--TransitionDuration);
876
876
  --#{$button}__icon--TransitionDuration: 0s;
877
877
  --#{$button}__icon--TransitionProperty: scale;
878
- --#{$button}--hover__icon--TransitionDelay: var(--#{$button}--hamburger-icon--TransitionDuration);
879
878
  --#{$button}--hover__icon--TransitionDuration: 0s;
880
879
  --#{$button}--hover__icon--TransitionProperty: scale;
881
880
 
@@ -957,7 +956,7 @@
957
956
  background: var(--#{$button}--disabled--BackgroundColor);
958
957
 
959
958
  &::after {
960
- border-color: transparent;
959
+ border-color: var(--#{$button}--disabled--BorderColor);
961
960
  }
962
961
 
963
962
  .#{$button}__icon {
package/components/FormControl/form-control.css CHANGED
@@ -16,6 +16,10 @@
16
16
  --pf-v6-c-form-control--after--BorderRadius: var(--pf-v6-c-form-control--BorderRadius);
17
17
  --pf-v6-c-form-control--BackgroundColor: var(--pf-t--global--background--color--control--default);
18
18
  --pf-v6-c-form-control--Width: 100%;
19
+ --pf-v6-c-form-control--TransitionDelay: 0s;
20
+ --pf-v6-c-form-control--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--accelerate);
21
+ --pf-v6-c-form-control--TransitionDuration: var(--pf-t--global--motion--duration--fade--default);
22
+ --pf-v6-c-form-control--TransitionProperty: color, background-color, border-color;
19
23
  --pf-v6-c-form-control--inset--base: var(--pf-t--global--spacer--control--horizontal--default);
20
24
  --pf-v6-c-form-control--PaddingBlockStart--base: var(--pf-t--global--spacer--control--vertical--default);
21
25
  --pf-v6-c-form-control--PaddingBlockEnd--base: var(--pf-t--global--spacer--control--vertical--default);
@@ -121,12 +125,17 @@
121
125
  resize: var(--pf-v6-c-form-control--Resize);
122
126
  background-color: var(--pf-v6-c-form-control--BackgroundColor);
123
127
  border-radius: var(--pf-v6-c-form-control--BorderRadius);
128
+ transition-delay: var(--pf-v6-c-form-control--TransitionDelay);
129
+ transition-timing-function: var(--pf-v6-c-form-control--TransitionTimingFunction);
130
+ transition-duration: var(--pf-v6-c-form-control--TransitionDuration);
131
+ transition-property: var(--pf-v6-c-form-control--TransitionProperty);
124
132
  }
125
133
  .pf-v6-c-form-control::before, .pf-v6-c-form-control::after {
126
134
  position: absolute;
127
135
  inset: 0;
128
136
  pointer-events: none;
129
137
  content: "";
138
+ transition: inherit;
130
139
  }
131
140
  .pf-v6-c-form-control::before {
132
141
  border-color: var(--pf-v6-c-form-control--before--BorderColor);
@@ -222,10 +231,11 @@
222
231
  --pf-v6-c-form-control--Color: var(--pf-v6-c-form-control--m-disabled--Color);
223
232
  --pf-v6-c-form-control--m-placeholder--Color: var(--pf-v6-c-form-control--m-disabled--Color);
224
233
  --pf-v6-c-form-control__toggle-icon--Color: var(--pf-v6-c-form-control--m-disabled__toggle-icon--Color);
225
- --pf-v6-c-form-control--before--BorderStyle: none;
226
- --pf-v6-c-form-control--after--BorderStyle: none;
227
234
  cursor: not-allowed;
228
235
  }
236
+ .pf-v6-c-form-control.pf-m-disabled::before, .pf-v6-c-form-control.pf-m-disabled::after {
237
+ border-color: transparent;
238
+ }
229
239
  .pf-v6-c-form-control.pf-m-error {
230
240
  --pf-v6-c-form-control--after--BorderColor: var(--pf-v6-c-form-control--m-error--after--BorderColor);
231
241
  --pf-v6-c-form-control--hover--after--BorderColor: var(--pf-v6-c-form-control--m-error--hover--after--BorderColor);
package/components/FormControl/form-control.scss CHANGED
@@ -18,6 +18,10 @@
18
18
  --#{$form-control}--after--BorderRadius: var(--#{$form-control}--BorderRadius);
19
19
  --#{$form-control}--BackgroundColor: var(--pf-t--global--background--color--control--default);
20
20
  --#{$form-control}--Width: 100%;
21
+ --#{$form-control}--TransitionDelay: 0s;
22
+ --#{$form-control}--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--accelerate);
23
+ --#{$form-control}--TransitionDuration: var(--pf-t--global--motion--duration--fade--default);
24
+ --#{$form-control}--TransitionProperty: color, background-color, border-color;
21
25
 
22
26
  // padding
23
27
  --#{$form-control}--inset--base: var(--pf-t--global--spacer--control--horizontal--default);
@@ -161,6 +165,10 @@
161
165
  resize: var(--#{$form-control}--Resize);
162
166
  background-color: var(--#{$form-control}--BackgroundColor);
163
167
  border-radius: var(--#{$form-control}--BorderRadius);
168
+ transition-delay: var(--#{$form-control}--TransitionDelay);
169
+ transition-timing-function: var(--#{$form-control}--TransitionTimingFunction);
170
+ transition-duration: var(--#{$form-control}--TransitionDuration);
171
+ transition-property: var(--#{$form-control}--TransitionProperty);
164
172
 
165
173
  &::before,
166
174
  &::after {
@@ -168,6 +176,7 @@
168
176
  inset: 0;
169
177
  pointer-events: none;
170
178
  content: "";
179
+ transition: inherit;
171
180
  }
172
181
 
173
182
  &::before {
@@ -288,10 +297,13 @@
288
297
  --#{$form-control}--Color: var(--#{$form-control}--m-disabled--Color);
289
298
  --#{$form-control}--m-placeholder--Color: var(--#{$form-control}--m-disabled--Color);
290
299
  --#{$form-control}__toggle-icon--Color: var(--#{$form-control}--m-disabled__toggle-icon--Color);
291
- --#{$form-control}--before--BorderStyle: none;
292
- --#{$form-control}--after--BorderStyle: none;
293
300
 
294
301
  cursor: not-allowed;
302
+
303
+ &::before,
304
+ &::after {
305
+ border-color: transparent;
306
+ }
295
307
  }
296
308
 
297
309
  &.pf-m-error {
package/components/_index.css CHANGED
@@ -2026,6 +2026,7 @@ button.pf-v6-c-breadcrumb__link {
2026
2026
  --pf-v6-c-button--m-display-lg--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--spacious);
2027
2027
  --pf-v6-c-button--m-display-lg--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--spacious);
2028
2028
  --pf-v6-c-button--m-display-lg--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--spacious);
2029
+ --pf-v6-c-button--m-display-lg--FontSize: var(--pf-t--global--font--size--body--default);
2029
2030
  --pf-v6-c-button--m-display-lg--FontWeight: var(--pf-t--global--font--weight--body--bold);
2030
2031
  --pf-v6-c-button--m-link--m-display-lg--FontSize: var(--pf-t--global--font--size--body--default);
2031
2032
  --pf-v6-c-button--m-display-lg--hover--TextDecorationColor: var(--pf-t--global--border--color--control--default);
@@ -2101,7 +2102,6 @@ button.pf-v6-c-breadcrumb__link {
2101
2102
  --pf-v6-c-button--m-favorited__icon--favorited--Opacity: 1;
2102
2103
  --pf-v6-c-button__icon--favorite--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
2103
2104
  --pf-v6-c-button__progress--width: calc(var(--pf-t--global--icon--size--lg) + var(--pf-t--global--spacer--sm));
2104
- --pf-v6-c-button__progress--Opacity: 0;
2105
2105
  --pf-v6-c-button__progress--TranslateY: -50%;
2106
2106
  --pf-v6-c-button__progress--TranslateX: 0;
2107
2107
  --pf-v6-c-button__progress--InsetBlockStart: 50%;
@@ -2536,7 +2536,6 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
2536
2536
  --pf-v6-c-button__icon--TransitionDelay: var(--pf-v6-c-button--hamburger-icon--TransitionDuration);
2537
2537
  --pf-v6-c-button__icon--TransitionDuration: 0s;
2538
2538
  --pf-v6-c-button__icon--TransitionProperty: scale;
2539
- --pf-v6-c-button--hover__icon--TransitionDelay: var(--pf-v6-c-button--hamburger-icon--TransitionDuration);
2540
2539
  --pf-v6-c-button--hover__icon--TransitionDuration: 0s;
2541
2540
  --pf-v6-c-button--hover__icon--TransitionProperty: scale;
2542
2541
  }
@@ -2612,7 +2611,7 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
2612
2611
  background: var(--pf-v6-c-button--disabled--BackgroundColor);
2613
2612
  }
2614
2613
  .pf-v6-c-button:disabled::after, .pf-v6-c-button.pf-m-disabled::after, .pf-v6-c-button.pf-m-aria-disabled::after {
2615
- border-color: transparent;
2614
+ border-color: var(--pf-v6-c-button--disabled--BorderColor);
2616
2615
  }
2617
2616
  .pf-v6-c-button:disabled .pf-v6-c-button__icon, .pf-v6-c-button.pf-m-disabled .pf-v6-c-button__icon, .pf-v6-c-button.pf-m-aria-disabled .pf-v6-c-button__icon {
2618
2617
  color: var(--pf-v6-c-button--disabled__icon--Color);
@@ -8499,6 +8498,10 @@ ul) {
8499
8498
  --pf-v6-c-form-control--after--BorderRadius: var(--pf-v6-c-form-control--BorderRadius);
8500
8499
  --pf-v6-c-form-control--BackgroundColor: var(--pf-t--global--background--color--control--default);
8501
8500
  --pf-v6-c-form-control--Width: 100%;
8501
+ --pf-v6-c-form-control--TransitionDelay: 0s;
8502
+ --pf-v6-c-form-control--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--accelerate);
8503
+ --pf-v6-c-form-control--TransitionDuration: var(--pf-t--global--motion--duration--fade--default);
8504
+ --pf-v6-c-form-control--TransitionProperty: color, background-color, border-color;
8502
8505
  --pf-v6-c-form-control--inset--base: var(--pf-t--global--spacer--control--horizontal--default);
8503
8506
  --pf-v6-c-form-control--PaddingBlockStart--base: var(--pf-t--global--spacer--control--vertical--default);
8504
8507
  --pf-v6-c-form-control--PaddingBlockEnd--base: var(--pf-t--global--spacer--control--vertical--default);
@@ -8604,12 +8607,17 @@ ul) {
8604
8607
  resize: var(--pf-v6-c-form-control--Resize);
8605
8608
  background-color: var(--pf-v6-c-form-control--BackgroundColor);
8606
8609
  border-radius: var(--pf-v6-c-form-control--BorderRadius);
8610
+ transition-delay: var(--pf-v6-c-form-control--TransitionDelay);
8611
+ transition-timing-function: var(--pf-v6-c-form-control--TransitionTimingFunction);
8612
+ transition-duration: var(--pf-v6-c-form-control--TransitionDuration);
8613
+ transition-property: var(--pf-v6-c-form-control--TransitionProperty);
8607
8614
  }
8608
8615
  .pf-v6-c-form-control::before, .pf-v6-c-form-control::after {
8609
8616
  position: absolute;
8610
8617
  inset: 0;
8611
8618
  pointer-events: none;
8612
8619
  content: "";
8620
+ transition: inherit;
8613
8621
  }
8614
8622
  .pf-v6-c-form-control::before {
8615
8623
  border-color: var(--pf-v6-c-form-control--before--BorderColor);
@@ -8705,10 +8713,11 @@ ul) {
8705
8713
  --pf-v6-c-form-control--Color: var(--pf-v6-c-form-control--m-disabled--Color);
8706
8714
  --pf-v6-c-form-control--m-placeholder--Color: var(--pf-v6-c-form-control--m-disabled--Color);
8707
8715
  --pf-v6-c-form-control__toggle-icon--Color: var(--pf-v6-c-form-control--m-disabled__toggle-icon--Color);
8708
- --pf-v6-c-form-control--before--BorderStyle: none;
8709
- --pf-v6-c-form-control--after--BorderStyle: none;
8710
8716
  cursor: not-allowed;
8711
8717
  }
8718
+ .pf-v6-c-form-control.pf-m-disabled::before, .pf-v6-c-form-control.pf-m-disabled::after {
8719
+ border-color: transparent;
8720
+ }
8712
8721
  .pf-v6-c-form-control.pf-m-error {
8713
8722
  --pf-v6-c-form-control--after--BorderColor: var(--pf-v6-c-form-control--m-error--after--BorderColor);
8714
8723
  --pf-v6-c-form-control--hover--after--BorderColor: var(--pf-v6-c-form-control--m-error--hover--after--BorderColor);
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
- "version": "6.6.0-prerelease.25",
4
+ "version": "6.6.0-prerelease.27",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
package/patternfly-no-globals.css CHANGED
@@ -11282,6 +11282,7 @@ button.pf-v6-c-breadcrumb__link {
11282
11282
  --pf-v6-c-button--m-display-lg--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--spacious);
11283
11283
  --pf-v6-c-button--m-display-lg--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--spacious);
11284
11284
  --pf-v6-c-button--m-display-lg--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--spacious);
11285
+ --pf-v6-c-button--m-display-lg--FontSize: var(--pf-t--global--font--size--body--default);
11285
11286
  --pf-v6-c-button--m-display-lg--FontWeight: var(--pf-t--global--font--weight--body--bold);
11286
11287
  --pf-v6-c-button--m-link--m-display-lg--FontSize: var(--pf-t--global--font--size--body--default);
11287
11288
  --pf-v6-c-button--m-display-lg--hover--TextDecorationColor: var(--pf-t--global--border--color--control--default);
@@ -11357,7 +11358,6 @@ button.pf-v6-c-breadcrumb__link {
11357
11358
  --pf-v6-c-button--m-favorited__icon--favorited--Opacity: 1;
11358
11359
  --pf-v6-c-button__icon--favorite--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
11359
11360
  --pf-v6-c-button__progress--width: calc(var(--pf-t--global--icon--size--lg) + var(--pf-t--global--spacer--sm));
11360
- --pf-v6-c-button__progress--Opacity: 0;
11361
11361
  --pf-v6-c-button__progress--TranslateY: -50%;
11362
11362
  --pf-v6-c-button__progress--TranslateX: 0;
11363
11363
  --pf-v6-c-button__progress--InsetBlockStart: 50%;
@@ -11792,7 +11792,6 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
11792
11792
  --pf-v6-c-button__icon--TransitionDelay: var(--pf-v6-c-button--hamburger-icon--TransitionDuration);
11793
11793
  --pf-v6-c-button__icon--TransitionDuration: 0s;
11794
11794
  --pf-v6-c-button__icon--TransitionProperty: scale;
11795
- --pf-v6-c-button--hover__icon--TransitionDelay: var(--pf-v6-c-button--hamburger-icon--TransitionDuration);
11796
11795
  --pf-v6-c-button--hover__icon--TransitionDuration: 0s;
11797
11796
  --pf-v6-c-button--hover__icon--TransitionProperty: scale;
11798
11797
  }
@@ -11868,7 +11867,7 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
11868
11867
  background: var(--pf-v6-c-button--disabled--BackgroundColor);
11869
11868
  }
11870
11869
  .pf-v6-c-button:disabled::after, .pf-v6-c-button.pf-m-disabled::after, .pf-v6-c-button.pf-m-aria-disabled::after {
11871
- border-color: transparent;
11870
+ border-color: var(--pf-v6-c-button--disabled--BorderColor);
11872
11871
  }
11873
11872
  .pf-v6-c-button:disabled .pf-v6-c-button__icon, .pf-v6-c-button.pf-m-disabled .pf-v6-c-button__icon, .pf-v6-c-button.pf-m-aria-disabled .pf-v6-c-button__icon {
11874
11873
  color: var(--pf-v6-c-button--disabled__icon--Color);
@@ -17755,6 +17754,10 @@ ul) {
17755
17754
  --pf-v6-c-form-control--after--BorderRadius: var(--pf-v6-c-form-control--BorderRadius);
17756
17755
  --pf-v6-c-form-control--BackgroundColor: var(--pf-t--global--background--color--control--default);
17757
17756
  --pf-v6-c-form-control--Width: 100%;
17757
+ --pf-v6-c-form-control--TransitionDelay: 0s;
17758
+ --pf-v6-c-form-control--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--accelerate);
17759
+ --pf-v6-c-form-control--TransitionDuration: var(--pf-t--global--motion--duration--fade--default);
17760
+ --pf-v6-c-form-control--TransitionProperty: color, background-color, border-color;
17758
17761
  --pf-v6-c-form-control--inset--base: var(--pf-t--global--spacer--control--horizontal--default);
17759
17762
  --pf-v6-c-form-control--PaddingBlockStart--base: var(--pf-t--global--spacer--control--vertical--default);
17760
17763
  --pf-v6-c-form-control--PaddingBlockEnd--base: var(--pf-t--global--spacer--control--vertical--default);
@@ -17860,12 +17863,17 @@ ul) {
17860
17863
  resize: var(--pf-v6-c-form-control--Resize);
17861
17864
  background-color: var(--pf-v6-c-form-control--BackgroundColor);
17862
17865
  border-radius: var(--pf-v6-c-form-control--BorderRadius);
17866
+ transition-delay: var(--pf-v6-c-form-control--TransitionDelay);
17867
+ transition-timing-function: var(--pf-v6-c-form-control--TransitionTimingFunction);
17868
+ transition-duration: var(--pf-v6-c-form-control--TransitionDuration);
17869
+ transition-property: var(--pf-v6-c-form-control--TransitionProperty);
17863
17870
  }
17864
17871
  .pf-v6-c-form-control::before, .pf-v6-c-form-control::after {
17865
17872
  position: absolute;
17866
17873
  inset: 0;
17867
17874
  pointer-events: none;
17868
17875
  content: "";
17876
+ transition: inherit;
17869
17877
  }
17870
17878
  .pf-v6-c-form-control::before {
17871
17879
  border-color: var(--pf-v6-c-form-control--before--BorderColor);
@@ -17961,10 +17969,11 @@ ul) {
17961
17969
  --pf-v6-c-form-control--Color: var(--pf-v6-c-form-control--m-disabled--Color);
17962
17970
  --pf-v6-c-form-control--m-placeholder--Color: var(--pf-v6-c-form-control--m-disabled--Color);
17963
17971
  --pf-v6-c-form-control__toggle-icon--Color: var(--pf-v6-c-form-control--m-disabled__toggle-icon--Color);
17964
- --pf-v6-c-form-control--before--BorderStyle: none;
17965
- --pf-v6-c-form-control--after--BorderStyle: none;
17966
17972
  cursor: not-allowed;
17967
17973
  }
17974
+ .pf-v6-c-form-control.pf-m-disabled::before, .pf-v6-c-form-control.pf-m-disabled::after {
17975
+ border-color: transparent;
17976
+ }
17968
17977
  .pf-v6-c-form-control.pf-m-error {
17969
17978
  --pf-v6-c-form-control--after--BorderColor: var(--pf-v6-c-form-control--m-error--after--BorderColor);
17970
17979
  --pf-v6-c-form-control--hover--after--BorderColor: var(--pf-v6-c-form-control--m-error--hover--after--BorderColor);
package/patternfly.css CHANGED
@@ -11437,6 +11437,7 @@ button.pf-v6-c-breadcrumb__link {
11437
11437
  --pf-v6-c-button--m-display-lg--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--spacious);
11438
11438
  --pf-v6-c-button--m-display-lg--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--spacious);
11439
11439
  --pf-v6-c-button--m-display-lg--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--spacious);
11440
+ --pf-v6-c-button--m-display-lg--FontSize: var(--pf-t--global--font--size--body--default);
11440
11441
  --pf-v6-c-button--m-display-lg--FontWeight: var(--pf-t--global--font--weight--body--bold);
11441
11442
  --pf-v6-c-button--m-link--m-display-lg--FontSize: var(--pf-t--global--font--size--body--default);
11442
11443
  --pf-v6-c-button--m-display-lg--hover--TextDecorationColor: var(--pf-t--global--border--color--control--default);
@@ -11512,7 +11513,6 @@ button.pf-v6-c-breadcrumb__link {
11512
11513
  --pf-v6-c-button--m-favorited__icon--favorited--Opacity: 1;
11513
11514
  --pf-v6-c-button__icon--favorite--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
11514
11515
  --pf-v6-c-button__progress--width: calc(var(--pf-t--global--icon--size--lg) + var(--pf-t--global--spacer--sm));
11515
- --pf-v6-c-button__progress--Opacity: 0;
11516
11516
  --pf-v6-c-button__progress--TranslateY: -50%;
11517
11517
  --pf-v6-c-button__progress--TranslateX: 0;
11518
11518
  --pf-v6-c-button__progress--InsetBlockStart: 50%;
@@ -11947,7 +11947,6 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
11947
11947
  --pf-v6-c-button__icon--TransitionDelay: var(--pf-v6-c-button--hamburger-icon--TransitionDuration);
11948
11948
  --pf-v6-c-button__icon--TransitionDuration: 0s;
11949
11949
  --pf-v6-c-button__icon--TransitionProperty: scale;
11950
- --pf-v6-c-button--hover__icon--TransitionDelay: var(--pf-v6-c-button--hamburger-icon--TransitionDuration);
11951
11950
  --pf-v6-c-button--hover__icon--TransitionDuration: 0s;
11952
11951
  --pf-v6-c-button--hover__icon--TransitionProperty: scale;
11953
11952
  }
@@ -12023,7 +12022,7 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
12023
12022
  background: var(--pf-v6-c-button--disabled--BackgroundColor);
12024
12023
  }
12025
12024
  .pf-v6-c-button:disabled::after, .pf-v6-c-button.pf-m-disabled::after, .pf-v6-c-button.pf-m-aria-disabled::after {
12026
- border-color: transparent;
12025
+ border-color: var(--pf-v6-c-button--disabled--BorderColor);
12027
12026
  }
12028
12027
  .pf-v6-c-button:disabled .pf-v6-c-button__icon, .pf-v6-c-button.pf-m-disabled .pf-v6-c-button__icon, .pf-v6-c-button.pf-m-aria-disabled .pf-v6-c-button__icon {
12029
12028
  color: var(--pf-v6-c-button--disabled__icon--Color);
@@ -17910,6 +17909,10 @@ ul) {
17910
17909
  --pf-v6-c-form-control--after--BorderRadius: var(--pf-v6-c-form-control--BorderRadius);
17911
17910
  --pf-v6-c-form-control--BackgroundColor: var(--pf-t--global--background--color--control--default);
17912
17911
  --pf-v6-c-form-control--Width: 100%;
17912
+ --pf-v6-c-form-control--TransitionDelay: 0s;
17913
+ --pf-v6-c-form-control--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--accelerate);
17914
+ --pf-v6-c-form-control--TransitionDuration: var(--pf-t--global--motion--duration--fade--default);
17915
+ --pf-v6-c-form-control--TransitionProperty: color, background-color, border-color;
17913
17916
  --pf-v6-c-form-control--inset--base: var(--pf-t--global--spacer--control--horizontal--default);
17914
17917
  --pf-v6-c-form-control--PaddingBlockStart--base: var(--pf-t--global--spacer--control--vertical--default);
17915
17918
  --pf-v6-c-form-control--PaddingBlockEnd--base: var(--pf-t--global--spacer--control--vertical--default);
@@ -18015,12 +18018,17 @@ ul) {
18015
18018
  resize: var(--pf-v6-c-form-control--Resize);
18016
18019
  background-color: var(--pf-v6-c-form-control--BackgroundColor);
18017
18020
  border-radius: var(--pf-v6-c-form-control--BorderRadius);
18021
+ transition-delay: var(--pf-v6-c-form-control--TransitionDelay);
18022
+ transition-timing-function: var(--pf-v6-c-form-control--TransitionTimingFunction);
18023
+ transition-duration: var(--pf-v6-c-form-control--TransitionDuration);
18024
+ transition-property: var(--pf-v6-c-form-control--TransitionProperty);
18018
18025
  }
18019
18026
  .pf-v6-c-form-control::before, .pf-v6-c-form-control::after {
18020
18027
  position: absolute;
18021
18028
  inset: 0;
18022
18029
  pointer-events: none;
18023
18030
  content: "";
18031
+ transition: inherit;
18024
18032
  }
18025
18033
  .pf-v6-c-form-control::before {
18026
18034
  border-color: var(--pf-v6-c-form-control--before--BorderColor);
@@ -18116,10 +18124,11 @@ ul) {
18116
18124
  --pf-v6-c-form-control--Color: var(--pf-v6-c-form-control--m-disabled--Color);
18117
18125
  --pf-v6-c-form-control--m-placeholder--Color: var(--pf-v6-c-form-control--m-disabled--Color);
18118
18126
  --pf-v6-c-form-control__toggle-icon--Color: var(--pf-v6-c-form-control--m-disabled__toggle-icon--Color);
18119
- --pf-v6-c-form-control--before--BorderStyle: none;
18120
- --pf-v6-c-form-control--after--BorderStyle: none;
18121
18127
  cursor: not-allowed;
18122
18128
  }
18129
+ .pf-v6-c-form-control.pf-m-disabled::before, .pf-v6-c-form-control.pf-m-disabled::after {
18130
+ border-color: transparent;
18131
+ }
18123
18132
  .pf-v6-c-form-control.pf-m-error {
18124
18133
  --pf-v6-c-form-control--after--BorderColor: var(--pf-v6-c-form-control--m-error--after--BorderColor);
18125
18134
  --pf-v6-c-form-control--hover--after--BorderColor: var(--pf-v6-c-form-control--m-error--hover--after--BorderColor);