@patternfly/patternfly 6.6.0-prerelease.30 → 6.6.0-prerelease.32

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 (8) hide show
  1. package/components/Button/button.css +16 -3
  2. package/components/Button/button.scss +19 -5
  3. package/components/_index.css +16 -3
  4. package/package.json +1 -1
  5. package/patternfly-no-globals.css +16 -3
  6. package/patternfly.css +16 -3
  7. package/patternfly.min.css +1 -1
  8. package/patternfly.min.css.map +1 -1
package/components/Button/button.css CHANGED
@@ -13,6 +13,7 @@
13
13
  --pf-v6-c-button--FontWeight: var(--pf-t--global--font--weight--body--default);
14
14
  --pf-v6-c-button--FontSize: var(--pf-t--global--font--size--body--default);
15
15
  --pf-v6-c-button--BackgroundColor: transparent;
16
+ --pf-v6-c-button--Background--click: radial-gradient(circle, transparent 1%, color-mix(in srgb, currentcolor 15%, transparent) 2%) center/15000% 15000%;
16
17
  --pf-v6-c-button--BorderColor: transparent;
17
18
  --pf-v6-c-button--BorderWidth: var(--pf-t--global--border--width--action--default);
18
19
  --pf-v6-c-button--BorderRadius: var(--pf-t--global--border--radius--pill);
@@ -332,6 +333,7 @@
332
333
  --pf-v6-c-button__progress--InsetBlockStart: 50%;
333
334
  --pf-v6-c-button__progress--InsetInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
334
335
  --pf-v6-c-button__progress--Color: var(--pf-v6-c-button__icon--Color);
336
+ --pf-v6-c-button__progress--Position: absolute;
335
337
  --pf-v6-c-button--m-progress--PaddingInlineEnd: calc(var(--pf-t--global--spacer--control--horizontal--default) + var(--pf-v6-c-button__progress--width) / 2);
336
338
  --pf-v6-c-button--m-progress--PaddingInlineStart: calc(var(--pf-t--global--spacer--control--horizontal--default) + var(--pf-v6-c-button__progress--width) / 2);
337
339
  --pf-v6-c-button--m-in-progress--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
@@ -339,6 +341,8 @@
339
341
  --pf-v6-c-button--m-in-progress--m-plain--Color: var(--pf-t--global--icon--color--brand--default);
340
342
  --pf-v6-c-button--m-in-progress--m-plain__progress--InsetInlineStart: 50%;
341
343
  --pf-v6-c-button--m-in-progress--m-plain__progress--TranslateX: -50%;
344
+ --pf-v6-c-button--m-progress--TransitionDuration: var(--pf-v6-c-button--TransitionDuration);
345
+ --pf-v6-c-button--m-progress--TransitionProperty: var(--pf-v6-c-button--TransitionProperty), padding;
342
346
  --pf-v6-c-button--m-settings__icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
343
347
  --pf-v6-c-button--m-settings__icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--accelerate);
344
348
  --pf-v6-c-button--m-settings--hover__icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
@@ -388,7 +392,7 @@
388
392
  cursor: pointer;
389
393
  -webkit-user-select: none;
390
394
  user-select: none;
391
- background: var(--pf-v6-c-button--BackgroundColor) radial-gradient(circle, transparent 1%, color-mix(in srgb, currentcolor 15%, transparent) 2%) center/15000% 15000%;
395
+ background: var(--pf-v6-c-button--BackgroundColor) var(--pf-v6-c-button--Background--click);
392
396
  border: 0;
393
397
  border-start-start-radius: var(--pf-v6-c-button--BorderStartStartRadius, var(--pf-v6-c-button--BorderRadius));
394
398
  border-start-end-radius: var(--pf-v6-c-button--BorderStartEndRadius, var(--pf-v6-c-button--BorderRadius));
@@ -682,7 +686,16 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
682
686
  }
683
687
  .pf-v6-c-button.pf-m-block {
684
688
  --pf-v6-c-button--Display: var(--pf-v6-c-button--m-block--Display);
689
+ --pf-v6-c-button__progress--Position: relative;
690
+ --pf-v6-c-button__progress--InsetBlockStart: 0;
691
+ --pf-v6-c-button__progress--InsetInlineStart: 0;
692
+ --pf-v6-c-button__progress--TranslateY: 0;
685
693
  width: var(--pf-v6-c-button--m-block--Width);
694
+ transition-duration: var(--pf-v6-c-button--m-progress--TransitionDuration);
695
+ transition-property: var(--pf-v6-c-button--m-progress--TransitionProperty);
696
+ }
697
+ .pf-v6-c-button.pf-m-block .pf-v6-c-button__progress {
698
+ align-self: center;
686
699
  }
687
700
  .pf-v6-c-button.pf-m-small {
688
701
  --pf-v6-c-button--PaddingBlockStart: var(--pf-v6-c-button--m-small--PaddingBlockStart);
@@ -833,7 +846,7 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
833
846
  .pf-v6-c-button:disabled, .pf-v6-c-button.pf-m-disabled, .pf-v6-c-button.pf-m-aria-disabled {
834
847
  color: var(--pf-v6-c-button--disabled--Color);
835
848
  text-decoration-color: var(--pf-v6-c-button--disabled--TextDecorationColor);
836
- background: var(--pf-v6-c-button--disabled--BackgroundColor);
849
+ background: var(--pf-v6-c-button--disabled--BackgroundColor) var(--pf-v6-c-button--Background--click);
837
850
  }
838
851
  .pf-v6-c-button:disabled::after, .pf-v6-c-button.pf-m-disabled::after, .pf-v6-c-button.pf-m-aria-disabled::after {
839
852
  border-color: var(--pf-v6-c-button--disabled--BorderColor);
@@ -926,7 +939,7 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
926
939
  }
927
940
 
928
941
  .pf-v6-c-button__progress {
929
- position: absolute;
942
+ position: var(--pf-v6-c-button__progress--Position);
930
943
  inset-block-start: var(--pf-v6-c-button__progress--InsetBlockStart);
931
944
  inset-inline-start: var(--pf-v6-c-button__progress--InsetInlineStart);
932
945
  line-height: 1;
package/components/Button/button.scss CHANGED
@@ -15,6 +15,7 @@
15
15
  --#{$button}--FontWeight: var(--pf-t--global--font--weight--body--default);
16
16
  --#{$button}--FontSize: var(--pf-t--global--font--size--body--default);
17
17
  --#{$button}--BackgroundColor: transparent;
18
+ --#{$button}--Background--click: radial-gradient(circle, transparent 1%, color-mix(in srgb, currentcolor 15%, transparent) 2%) center/15000% 15000%;
18
19
  --#{$button}--BorderColor: transparent;
19
20
  --#{$button}--BorderWidth: var(--pf-t--global--border--width--action--default);
20
21
  --#{$button}--BorderRadius: var(--pf-t--global--border--radius--pill);
@@ -386,6 +387,7 @@
386
387
  --#{$button}__progress--InsetBlockStart: 50%;
387
388
  --#{$button}__progress--InsetInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
388
389
  --#{$button}__progress--Color: var(--#{$button}__icon--Color);
390
+ --#{$button}__progress--Position: absolute;
389
391
  --#{$button}--m-progress--PaddingInlineEnd: calc(var(--pf-t--global--spacer--control--horizontal--default) + var(--#{$button}__progress--width) / 2);
390
392
  --#{$button}--m-progress--PaddingInlineStart: calc(var(--pf-t--global--spacer--control--horizontal--default) + var(--#{$button}__progress--width) / 2);
391
393
  --#{$button}--m-in-progress--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
@@ -393,6 +395,8 @@
393
395
  --#{$button}--m-in-progress--m-plain--Color: var(--pf-t--global--icon--color--brand--default);
394
396
  --#{$button}--m-in-progress--m-plain__progress--InsetInlineStart: 50%;
395
397
  --#{$button}--m-in-progress--m-plain__progress--TranslateX: -50%;
398
+ --#{$button}--m-progress--TransitionDuration: var(--#{$button}--TransitionDuration);
399
+ --#{$button}--m-progress--TransitionProperty: var(--#{$button}--TransitionProperty), padding;
396
400
 
397
401
  // Settings
398
402
  --#{$button}--m-settings__icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
@@ -454,7 +458,7 @@
454
458
  -webkit-user-select: none;
455
459
  user-select: none;
456
460
  // stylelint-enable property-no-vendor-prefix
457
- background: var(--#{$button}--BackgroundColor) radial-gradient(circle, transparent 1%, color-mix(in srgb, currentcolor 15%, transparent) 2%) center/15000% 15000%;
461
+ background: var(--#{$button}--BackgroundColor) var(--#{$button}--Background--click);
458
462
  border: 0;
459
463
  border-start-start-radius: var(--#{$button}--BorderStartStartRadius, var(--#{$button}--BorderRadius));
460
464
  border-start-end-radius: var(--#{$button}--BorderStartEndRadius, var(--#{$button}--BorderRadius));
@@ -559,7 +563,7 @@
559
563
  --#{$button}--m-clicked__icon--Color: var(--#{$button}--m-link--m-clicked__icon--Color);
560
564
  --#{$button}--m-small--PaddingInlineEnd: var(--#{$button}--m-link--m-small--PaddingInlineEnd);
561
565
  --#{$button}--m-small--PaddingInlineStart: var(--#{$button}--m-link--m-small--PaddingInlineStart);
562
-
566
+
563
567
  &.pf-m-inline {
564
568
  @at-root span#{&} {
565
569
  --#{$button}--m-link--m-inline--Display: var(--#{$button}--span--m-link--m-inline--Display);
@@ -785,8 +789,18 @@
785
789
 
786
790
  &.pf-m-block {
787
791
  --#{$button}--Display: var(--#{$button}--m-block--Display);
788
-
792
+ --#{$button}__progress--Position: relative;
793
+ --#{$button}__progress--InsetBlockStart: 0;
794
+ --#{$button}__progress--InsetInlineStart: 0;
795
+ --#{$button}__progress--TranslateY: 0;
796
+
789
797
  width: var(--#{$button}--m-block--Width);
798
+ transition-duration: var(--#{$button}--m-progress--TransitionDuration);
799
+ transition-property: var(--#{$button}--m-progress--TransitionProperty);
800
+
801
+ .#{$button}__progress {
802
+ align-self: center;
803
+ }
790
804
  }
791
805
 
792
806
  &.pf-m-small {
@@ -953,7 +967,7 @@
953
967
  &.pf-m-aria-disabled {
954
968
  color: var(--#{$button}--disabled--Color);
955
969
  text-decoration-color: var(--#{$button}--disabled--TextDecorationColor);
956
- background: var(--#{$button}--disabled--BackgroundColor);
970
+ background: var(--#{$button}--disabled--BackgroundColor) var(--#{$button}--Background--click);
957
971
 
958
972
  &::after {
959
973
  border-color: var(--#{$button}--disabled--BorderColor);
@@ -1064,7 +1078,7 @@
1064
1078
  }
1065
1079
 
1066
1080
  .#{$button}__progress {
1067
- position: absolute;
1081
+ position: var(--#{$button}__progress--Position);
1068
1082
  inset-block-start: var(--#{$button}__progress--InsetBlockStart);
1069
1083
  inset-inline-start: var(--#{$button}__progress--InsetInlineStart);
1070
1084
  line-height: 1;
package/components/_index.css CHANGED
@@ -1788,6 +1788,7 @@ button.pf-v6-c-breadcrumb__link {
1788
1788
  --pf-v6-c-button--FontWeight: var(--pf-t--global--font--weight--body--default);
1789
1789
  --pf-v6-c-button--FontSize: var(--pf-t--global--font--size--body--default);
1790
1790
  --pf-v6-c-button--BackgroundColor: transparent;
1791
+ --pf-v6-c-button--Background--click: radial-gradient(circle, transparent 1%, color-mix(in srgb, currentcolor 15%, transparent) 2%) center/15000% 15000%;
1791
1792
  --pf-v6-c-button--BorderColor: transparent;
1792
1793
  --pf-v6-c-button--BorderWidth: var(--pf-t--global--border--width--action--default);
1793
1794
  --pf-v6-c-button--BorderRadius: var(--pf-t--global--border--radius--pill);
@@ -2107,6 +2108,7 @@ button.pf-v6-c-breadcrumb__link {
2107
2108
  --pf-v6-c-button__progress--InsetBlockStart: 50%;
2108
2109
  --pf-v6-c-button__progress--InsetInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
2109
2110
  --pf-v6-c-button__progress--Color: var(--pf-v6-c-button__icon--Color);
2111
+ --pf-v6-c-button__progress--Position: absolute;
2110
2112
  --pf-v6-c-button--m-progress--PaddingInlineEnd: calc(var(--pf-t--global--spacer--control--horizontal--default) + var(--pf-v6-c-button__progress--width) / 2);
2111
2113
  --pf-v6-c-button--m-progress--PaddingInlineStart: calc(var(--pf-t--global--spacer--control--horizontal--default) + var(--pf-v6-c-button__progress--width) / 2);
2112
2114
  --pf-v6-c-button--m-in-progress--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
@@ -2114,6 +2116,8 @@ button.pf-v6-c-breadcrumb__link {
2114
2116
  --pf-v6-c-button--m-in-progress--m-plain--Color: var(--pf-t--global--icon--color--brand--default);
2115
2117
  --pf-v6-c-button--m-in-progress--m-plain__progress--InsetInlineStart: 50%;
2116
2118
  --pf-v6-c-button--m-in-progress--m-plain__progress--TranslateX: -50%;
2119
+ --pf-v6-c-button--m-progress--TransitionDuration: var(--pf-v6-c-button--TransitionDuration);
2120
+ --pf-v6-c-button--m-progress--TransitionProperty: var(--pf-v6-c-button--TransitionProperty), padding;
2117
2121
  --pf-v6-c-button--m-settings__icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
2118
2122
  --pf-v6-c-button--m-settings__icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--accelerate);
2119
2123
  --pf-v6-c-button--m-settings--hover__icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
@@ -2163,7 +2167,7 @@ button.pf-v6-c-breadcrumb__link {
2163
2167
  cursor: pointer;
2164
2168
  -webkit-user-select: none;
2165
2169
  user-select: none;
2166
- background: var(--pf-v6-c-button--BackgroundColor) radial-gradient(circle, transparent 1%, color-mix(in srgb, currentcolor 15%, transparent) 2%) center/15000% 15000%;
2170
+ background: var(--pf-v6-c-button--BackgroundColor) var(--pf-v6-c-button--Background--click);
2167
2171
  border: 0;
2168
2172
  border-start-start-radius: var(--pf-v6-c-button--BorderStartStartRadius, var(--pf-v6-c-button--BorderRadius));
2169
2173
  border-start-end-radius: var(--pf-v6-c-button--BorderStartEndRadius, var(--pf-v6-c-button--BorderRadius));
@@ -2457,7 +2461,16 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
2457
2461
  }
2458
2462
  .pf-v6-c-button.pf-m-block {
2459
2463
  --pf-v6-c-button--Display: var(--pf-v6-c-button--m-block--Display);
2464
+ --pf-v6-c-button__progress--Position: relative;
2465
+ --pf-v6-c-button__progress--InsetBlockStart: 0;
2466
+ --pf-v6-c-button__progress--InsetInlineStart: 0;
2467
+ --pf-v6-c-button__progress--TranslateY: 0;
2460
2468
  width: var(--pf-v6-c-button--m-block--Width);
2469
+ transition-duration: var(--pf-v6-c-button--m-progress--TransitionDuration);
2470
+ transition-property: var(--pf-v6-c-button--m-progress--TransitionProperty);
2471
+ }
2472
+ .pf-v6-c-button.pf-m-block .pf-v6-c-button__progress {
2473
+ align-self: center;
2461
2474
  }
2462
2475
  .pf-v6-c-button.pf-m-small {
2463
2476
  --pf-v6-c-button--PaddingBlockStart: var(--pf-v6-c-button--m-small--PaddingBlockStart);
@@ -2608,7 +2621,7 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
2608
2621
  .pf-v6-c-button:disabled, .pf-v6-c-button.pf-m-disabled, .pf-v6-c-button.pf-m-aria-disabled {
2609
2622
  color: var(--pf-v6-c-button--disabled--Color);
2610
2623
  text-decoration-color: var(--pf-v6-c-button--disabled--TextDecorationColor);
2611
- background: var(--pf-v6-c-button--disabled--BackgroundColor);
2624
+ background: var(--pf-v6-c-button--disabled--BackgroundColor) var(--pf-v6-c-button--Background--click);
2612
2625
  }
2613
2626
  .pf-v6-c-button:disabled::after, .pf-v6-c-button.pf-m-disabled::after, .pf-v6-c-button.pf-m-aria-disabled::after {
2614
2627
  border-color: var(--pf-v6-c-button--disabled--BorderColor);
@@ -2701,7 +2714,7 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
2701
2714
  }
2702
2715
 
2703
2716
  .pf-v6-c-button__progress {
2704
- position: absolute;
2717
+ position: var(--pf-v6-c-button__progress--Position);
2705
2718
  inset-block-start: var(--pf-v6-c-button__progress--InsetBlockStart);
2706
2719
  inset-inline-start: var(--pf-v6-c-button__progress--InsetInlineStart);
2707
2720
  line-height: 1;
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.30",
4
+ "version": "6.6.0-prerelease.32",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
package/patternfly-no-globals.css CHANGED
@@ -11044,6 +11044,7 @@ button.pf-v6-c-breadcrumb__link {
11044
11044
  --pf-v6-c-button--FontWeight: var(--pf-t--global--font--weight--body--default);
11045
11045
  --pf-v6-c-button--FontSize: var(--pf-t--global--font--size--body--default);
11046
11046
  --pf-v6-c-button--BackgroundColor: transparent;
11047
+ --pf-v6-c-button--Background--click: radial-gradient(circle, transparent 1%, color-mix(in srgb, currentcolor 15%, transparent) 2%) center/15000% 15000%;
11047
11048
  --pf-v6-c-button--BorderColor: transparent;
11048
11049
  --pf-v6-c-button--BorderWidth: var(--pf-t--global--border--width--action--default);
11049
11050
  --pf-v6-c-button--BorderRadius: var(--pf-t--global--border--radius--pill);
@@ -11363,6 +11364,7 @@ button.pf-v6-c-breadcrumb__link {
11363
11364
  --pf-v6-c-button__progress--InsetBlockStart: 50%;
11364
11365
  --pf-v6-c-button__progress--InsetInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
11365
11366
  --pf-v6-c-button__progress--Color: var(--pf-v6-c-button__icon--Color);
11367
+ --pf-v6-c-button__progress--Position: absolute;
11366
11368
  --pf-v6-c-button--m-progress--PaddingInlineEnd: calc(var(--pf-t--global--spacer--control--horizontal--default) + var(--pf-v6-c-button__progress--width) / 2);
11367
11369
  --pf-v6-c-button--m-progress--PaddingInlineStart: calc(var(--pf-t--global--spacer--control--horizontal--default) + var(--pf-v6-c-button__progress--width) / 2);
11368
11370
  --pf-v6-c-button--m-in-progress--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
@@ -11370,6 +11372,8 @@ button.pf-v6-c-breadcrumb__link {
11370
11372
  --pf-v6-c-button--m-in-progress--m-plain--Color: var(--pf-t--global--icon--color--brand--default);
11371
11373
  --pf-v6-c-button--m-in-progress--m-plain__progress--InsetInlineStart: 50%;
11372
11374
  --pf-v6-c-button--m-in-progress--m-plain__progress--TranslateX: -50%;
11375
+ --pf-v6-c-button--m-progress--TransitionDuration: var(--pf-v6-c-button--TransitionDuration);
11376
+ --pf-v6-c-button--m-progress--TransitionProperty: var(--pf-v6-c-button--TransitionProperty), padding;
11373
11377
  --pf-v6-c-button--m-settings__icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
11374
11378
  --pf-v6-c-button--m-settings__icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--accelerate);
11375
11379
  --pf-v6-c-button--m-settings--hover__icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
@@ -11419,7 +11423,7 @@ button.pf-v6-c-breadcrumb__link {
11419
11423
  cursor: pointer;
11420
11424
  -webkit-user-select: none;
11421
11425
  user-select: none;
11422
- background: var(--pf-v6-c-button--BackgroundColor) radial-gradient(circle, transparent 1%, color-mix(in srgb, currentcolor 15%, transparent) 2%) center/15000% 15000%;
11426
+ background: var(--pf-v6-c-button--BackgroundColor) var(--pf-v6-c-button--Background--click);
11423
11427
  border: 0;
11424
11428
  border-start-start-radius: var(--pf-v6-c-button--BorderStartStartRadius, var(--pf-v6-c-button--BorderRadius));
11425
11429
  border-start-end-radius: var(--pf-v6-c-button--BorderStartEndRadius, var(--pf-v6-c-button--BorderRadius));
@@ -11713,7 +11717,16 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
11713
11717
  }
11714
11718
  .pf-v6-c-button.pf-m-block {
11715
11719
  --pf-v6-c-button--Display: var(--pf-v6-c-button--m-block--Display);
11720
+ --pf-v6-c-button__progress--Position: relative;
11721
+ --pf-v6-c-button__progress--InsetBlockStart: 0;
11722
+ --pf-v6-c-button__progress--InsetInlineStart: 0;
11723
+ --pf-v6-c-button__progress--TranslateY: 0;
11716
11724
  width: var(--pf-v6-c-button--m-block--Width);
11725
+ transition-duration: var(--pf-v6-c-button--m-progress--TransitionDuration);
11726
+ transition-property: var(--pf-v6-c-button--m-progress--TransitionProperty);
11727
+ }
11728
+ .pf-v6-c-button.pf-m-block .pf-v6-c-button__progress {
11729
+ align-self: center;
11717
11730
  }
11718
11731
  .pf-v6-c-button.pf-m-small {
11719
11732
  --pf-v6-c-button--PaddingBlockStart: var(--pf-v6-c-button--m-small--PaddingBlockStart);
@@ -11864,7 +11877,7 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
11864
11877
  .pf-v6-c-button:disabled, .pf-v6-c-button.pf-m-disabled, .pf-v6-c-button.pf-m-aria-disabled {
11865
11878
  color: var(--pf-v6-c-button--disabled--Color);
11866
11879
  text-decoration-color: var(--pf-v6-c-button--disabled--TextDecorationColor);
11867
- background: var(--pf-v6-c-button--disabled--BackgroundColor);
11880
+ background: var(--pf-v6-c-button--disabled--BackgroundColor) var(--pf-v6-c-button--Background--click);
11868
11881
  }
11869
11882
  .pf-v6-c-button:disabled::after, .pf-v6-c-button.pf-m-disabled::after, .pf-v6-c-button.pf-m-aria-disabled::after {
11870
11883
  border-color: var(--pf-v6-c-button--disabled--BorderColor);
@@ -11957,7 +11970,7 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
11957
11970
  }
11958
11971
 
11959
11972
  .pf-v6-c-button__progress {
11960
- position: absolute;
11973
+ position: var(--pf-v6-c-button__progress--Position);
11961
11974
  inset-block-start: var(--pf-v6-c-button__progress--InsetBlockStart);
11962
11975
  inset-inline-start: var(--pf-v6-c-button__progress--InsetInlineStart);
11963
11976
  line-height: 1;
package/patternfly.css CHANGED
@@ -11199,6 +11199,7 @@ button.pf-v6-c-breadcrumb__link {
11199
11199
  --pf-v6-c-button--FontWeight: var(--pf-t--global--font--weight--body--default);
11200
11200
  --pf-v6-c-button--FontSize: var(--pf-t--global--font--size--body--default);
11201
11201
  --pf-v6-c-button--BackgroundColor: transparent;
11202
+ --pf-v6-c-button--Background--click: radial-gradient(circle, transparent 1%, color-mix(in srgb, currentcolor 15%, transparent) 2%) center/15000% 15000%;
11202
11203
  --pf-v6-c-button--BorderColor: transparent;
11203
11204
  --pf-v6-c-button--BorderWidth: var(--pf-t--global--border--width--action--default);
11204
11205
  --pf-v6-c-button--BorderRadius: var(--pf-t--global--border--radius--pill);
@@ -11518,6 +11519,7 @@ button.pf-v6-c-breadcrumb__link {
11518
11519
  --pf-v6-c-button__progress--InsetBlockStart: 50%;
11519
11520
  --pf-v6-c-button__progress--InsetInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
11520
11521
  --pf-v6-c-button__progress--Color: var(--pf-v6-c-button__icon--Color);
11522
+ --pf-v6-c-button__progress--Position: absolute;
11521
11523
  --pf-v6-c-button--m-progress--PaddingInlineEnd: calc(var(--pf-t--global--spacer--control--horizontal--default) + var(--pf-v6-c-button__progress--width) / 2);
11522
11524
  --pf-v6-c-button--m-progress--PaddingInlineStart: calc(var(--pf-t--global--spacer--control--horizontal--default) + var(--pf-v6-c-button__progress--width) / 2);
11523
11525
  --pf-v6-c-button--m-in-progress--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
@@ -11525,6 +11527,8 @@ button.pf-v6-c-breadcrumb__link {
11525
11527
  --pf-v6-c-button--m-in-progress--m-plain--Color: var(--pf-t--global--icon--color--brand--default);
11526
11528
  --pf-v6-c-button--m-in-progress--m-plain__progress--InsetInlineStart: 50%;
11527
11529
  --pf-v6-c-button--m-in-progress--m-plain__progress--TranslateX: -50%;
11530
+ --pf-v6-c-button--m-progress--TransitionDuration: var(--pf-v6-c-button--TransitionDuration);
11531
+ --pf-v6-c-button--m-progress--TransitionProperty: var(--pf-v6-c-button--TransitionProperty), padding;
11528
11532
  --pf-v6-c-button--m-settings__icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
11529
11533
  --pf-v6-c-button--m-settings__icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--accelerate);
11530
11534
  --pf-v6-c-button--m-settings--hover__icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
@@ -11574,7 +11578,7 @@ button.pf-v6-c-breadcrumb__link {
11574
11578
  cursor: pointer;
11575
11579
  -webkit-user-select: none;
11576
11580
  user-select: none;
11577
- background: var(--pf-v6-c-button--BackgroundColor) radial-gradient(circle, transparent 1%, color-mix(in srgb, currentcolor 15%, transparent) 2%) center/15000% 15000%;
11581
+ background: var(--pf-v6-c-button--BackgroundColor) var(--pf-v6-c-button--Background--click);
11578
11582
  border: 0;
11579
11583
  border-start-start-radius: var(--pf-v6-c-button--BorderStartStartRadius, var(--pf-v6-c-button--BorderRadius));
11580
11584
  border-start-end-radius: var(--pf-v6-c-button--BorderStartEndRadius, var(--pf-v6-c-button--BorderRadius));
@@ -11868,7 +11872,16 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
11868
11872
  }
11869
11873
  .pf-v6-c-button.pf-m-block {
11870
11874
  --pf-v6-c-button--Display: var(--pf-v6-c-button--m-block--Display);
11875
+ --pf-v6-c-button__progress--Position: relative;
11876
+ --pf-v6-c-button__progress--InsetBlockStart: 0;
11877
+ --pf-v6-c-button__progress--InsetInlineStart: 0;
11878
+ --pf-v6-c-button__progress--TranslateY: 0;
11871
11879
  width: var(--pf-v6-c-button--m-block--Width);
11880
+ transition-duration: var(--pf-v6-c-button--m-progress--TransitionDuration);
11881
+ transition-property: var(--pf-v6-c-button--m-progress--TransitionProperty);
11882
+ }
11883
+ .pf-v6-c-button.pf-m-block .pf-v6-c-button__progress {
11884
+ align-self: center;
11872
11885
  }
11873
11886
  .pf-v6-c-button.pf-m-small {
11874
11887
  --pf-v6-c-button--PaddingBlockStart: var(--pf-v6-c-button--m-small--PaddingBlockStart);
@@ -12019,7 +12032,7 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
12019
12032
  .pf-v6-c-button:disabled, .pf-v6-c-button.pf-m-disabled, .pf-v6-c-button.pf-m-aria-disabled {
12020
12033
  color: var(--pf-v6-c-button--disabled--Color);
12021
12034
  text-decoration-color: var(--pf-v6-c-button--disabled--TextDecorationColor);
12022
- background: var(--pf-v6-c-button--disabled--BackgroundColor);
12035
+ background: var(--pf-v6-c-button--disabled--BackgroundColor) var(--pf-v6-c-button--Background--click);
12023
12036
  }
12024
12037
  .pf-v6-c-button:disabled::after, .pf-v6-c-button.pf-m-disabled::after, .pf-v6-c-button.pf-m-aria-disabled::after {
12025
12038
  border-color: var(--pf-v6-c-button--disabled--BorderColor);
@@ -12112,7 +12125,7 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
12112
12125
  }
12113
12126
 
12114
12127
  .pf-v6-c-button__progress {
12115
- position: absolute;
12128
+ position: var(--pf-v6-c-button__progress--Position);
12116
12129
  inset-block-start: var(--pf-v6-c-button__progress--InsetBlockStart);
12117
12130
  inset-inline-start: var(--pf-v6-c-button__progress--InsetInlineStart);
12118
12131
  line-height: 1;