@patternfly/patternfly 6.3.0-prerelease.24 → 6.3.0-prerelease.25

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 +12 -5
  2. package/components/Button/button.scss +15 -4
  3. package/components/Menu/menu.css +24 -4
  4. package/components/Menu/menu.scss +20 -5
  5. package/components/_index.css +36 -9
  6. package/package.json +2 -2
  7. package/patternfly-no-globals.css +36 -9
  8. package/patternfly.css +36 -9
  9. package/patternfly.min.css +1 -1
  10. package/patternfly.min.css.map +1 -1
package/components/Button/button.css CHANGED
@@ -20,8 +20,8 @@
20
20
  --pf-v6-c-button--TextDecorationStyle: none;
21
21
  --pf-v6-c-button--TextDecorationColor: currentcolor;
22
22
  --pf-v6-c-button--TransitionDuration: var(--pf-t--global--motion--duration--fade--default);
23
- --pf-v6-c-button--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
24
- --pf-v6-c-button--TransitionProperty: color, background-color, border-width, border-color, padding;
23
+ --pf-v6-c-button--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--accelerate);
24
+ --pf-v6-c-button--TransitionProperty: color, background, border-width, border-color;
25
25
  --pf-v6-c-button--hover--BackgroundColor: transparent;
26
26
  --pf-v6-c-button--hover--BorderColor: transparent;
27
27
  --pf-v6-c-button--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
@@ -288,8 +288,9 @@
288
288
  text-decoration-color: var(--pf-v6-c-button--TextDecorationColor);
289
289
  white-space: nowrap;
290
290
  cursor: pointer;
291
+ -webkit-user-select: none;
291
292
  user-select: none;
292
- background-color: var(--pf-v6-c-button--BackgroundColor);
293
+ background: var(--pf-v6-c-button--BackgroundColor) radial-gradient(circle, transparent 1%, color-mix(in srgb, currentcolor 15%, transparent) 1%) center/15000%;
293
294
  border: 0;
294
295
  border-start-start-radius: var(--pf-v6-c-button--BorderStartStartRadius, var(--pf-v6-c-button--BorderRadius));
295
296
  border-start-end-radius: var(--pf-v6-c-button--BorderStartEndRadius, var(--pf-v6-c-button--BorderRadius));
@@ -406,6 +407,7 @@
406
407
  --pf-v6-c-button--m-link--hover__icon--Color: var(--pf-v6-c-button--m-link--m-inline--hover__icon--Color);
407
408
  text-align: start;
408
409
  white-space: normal;
410
+ background: transparent;
409
411
  outline-offset: 0.125rem;
410
412
  }
411
413
  span.pf-v6-c-button.pf-m-link.pf-m-inline {
@@ -539,6 +541,7 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
539
541
  --pf-v6-c-button--m-small--PaddingInlineEnd: var(--pf-v6-c-button--m-plain--m-no-padding--m-small--PaddingInlineEnd);
540
542
  --pf-v6-c-button--m-small--PaddingInlineStart: var(--pf-v6-c-button--m-plain--m-no-padding--m-small--PaddingInlineStart);
541
543
  min-width: var(--pf-v6-c-button--m-plain--m-no-padding--MinWidth);
544
+ background: var(--pf-v6-c-button--BackgroundColor);
542
545
  }
543
546
  .pf-v6-c-button.pf-m-block {
544
547
  --pf-v6-c-button--Display: var(--pf-v6-c-button--m-block--Display);
@@ -585,20 +588,24 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
585
588
  text-decoration-style: var(--pf-v6-c-button--hover--TextDecorationStyle);
586
589
  text-decoration-color: var(--pf-v6-c-button--hover--TextDecorationColor);
587
590
  }
588
- .pf-v6-c-button.pf-m-clicked {
591
+ .pf-v6-c-button:active, .pf-v6-c-button.pf-m-clicked {
589
592
  --pf-v6-c-button--Color: var(--pf-v6-c-button--m-clicked--Color);
590
593
  --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--m-clicked--BackgroundColor);
591
594
  --pf-v6-c-button--BorderWidth: var(--pf-v6-c-button--m-clicked--BorderWidth);
592
595
  --pf-v6-c-button--BorderColor: var(--pf-v6-c-button--m-clicked--BorderColor);
593
596
  --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-clicked__icon--Color);
594
597
  }
598
+ .pf-v6-c-button:active {
599
+ background-size: 100%;
600
+ transition-duration: 0s;
601
+ }
595
602
  .pf-v6-c-button:disabled, .pf-v6-c-button.pf-m-disabled {
596
603
  pointer-events: none;
597
604
  }
598
605
  .pf-v6-c-button:disabled, .pf-v6-c-button.pf-m-disabled, .pf-v6-c-button.pf-m-aria-disabled {
599
606
  color: var(--pf-v6-c-button--disabled--Color);
600
607
  text-decoration-color: var(--pf-v6-c-button--disabled--TextDecorationColor);
601
- background-color: var(--pf-v6-c-button--disabled--BackgroundColor);
608
+ background: var(--pf-v6-c-button--disabled--BackgroundColor);
602
609
  }
603
610
  .pf-v6-c-button:disabled::after, .pf-v6-c-button.pf-m-disabled::after, .pf-v6-c-button.pf-m-aria-disabled::after {
604
611
  border-color: transparent;
package/components/Button/button.scss CHANGED
@@ -22,8 +22,8 @@
22
22
  --#{$button}--TextDecorationStyle: none;
23
23
  --#{$button}--TextDecorationColor: currentcolor;
24
24
  --#{$button}--TransitionDuration: var(--pf-t--global--motion--duration--fade--default);
25
- --#{$button}--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
26
- --#{$button}--TransitionProperty: color, background-color, border-width, border-color, padding;
25
+ --#{$button}--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--accelerate);
26
+ --#{$button}--TransitionProperty: color, background, border-width, border-color;
27
27
 
28
28
  // Hover
29
29
  --#{$button}--hover--BackgroundColor: transparent;
@@ -340,8 +340,11 @@
340
340
  text-decoration-color: var(--#{$button}--TextDecorationColor);
341
341
  white-space: nowrap;
342
342
  cursor: pointer; // needed for when a button does not use <button> - eg, <span>
343
+ // stylelint-disable property-no-vendor-prefix
344
+ -webkit-user-select: none;
343
345
  user-select: none;
344
- background-color: var(--#{$button}--BackgroundColor);
346
+ // stylelint-enable property-no-vendor-prefix
347
+ background: var(--#{$button}--BackgroundColor) radial-gradient(circle, transparent 1%, color-mix(in srgb, currentcolor 15%, transparent) 1%) center/15000%;
345
348
  border: 0;
346
349
  border-start-start-radius: var(--#{$button}--BorderStartStartRadius, var(--#{$button}--BorderRadius));
347
350
  border-start-end-radius: var(--#{$button}--BorderStartEndRadius, var(--#{$button}--BorderRadius));
@@ -475,6 +478,7 @@
475
478
 
476
479
  text-align: start;
477
480
  white-space: normal;
481
+ background: transparent; // don't show the ripple effect for inline links
478
482
  outline-offset: #{pf-size-prem(2px)};
479
483
  }
480
484
 
@@ -622,6 +626,7 @@
622
626
  --#{$button}--m-small--PaddingInlineStart: var(--#{$button}--m-plain--m-no-padding--m-small--PaddingInlineStart);
623
627
 
624
628
  min-width: var(--#{$button}--m-plain--m-no-padding--MinWidth);
629
+ background: var(--#{$button}--BackgroundColor); // override the ripple background
625
630
  }
626
631
  }
627
632
 
@@ -682,6 +687,7 @@
682
687
  text-decoration-color: var(--#{$button}--hover--TextDecorationColor);
683
688
  }
684
689
 
690
+ &:active,
685
691
  &.pf-m-clicked {
686
692
  --#{$button}--Color: var(--#{$button}--m-clicked--Color);
687
693
  --#{$button}--BackgroundColor: var(--#{$button}--m-clicked--BackgroundColor);
@@ -690,6 +696,11 @@
690
696
  --#{$button}__icon--Color: var(--#{$button}--m-clicked__icon--Color);
691
697
  }
692
698
 
699
+ &:active {
700
+ background-size: 100%; // apply the background surface for ripple
701
+ transition-duration: 0s; // transition immediately
702
+ }
703
+
693
704
  // Disabled buttons
694
705
  // These styles need to go after the button types because they need to override some of the type styling
695
706
  &:disabled,
@@ -702,7 +713,7 @@
702
713
  &.pf-m-aria-disabled {
703
714
  color: var(--#{$button}--disabled--Color);
704
715
  text-decoration-color: var(--#{$button}--disabled--TextDecorationColor);
705
- background-color: var(--#{$button}--disabled--BackgroundColor);
716
+ background: var(--#{$button}--disabled--BackgroundColor);
706
717
 
707
718
  &::after {
708
719
  border-color: transparent;
package/components/Menu/menu.css CHANGED
@@ -12,7 +12,7 @@
12
12
  --pf-v6-c-menu--ZIndex: var(--pf-t--global--z-index--sm);
13
13
  --pf-v6-c-menu--button--disabled--Color: var(--pf-t--global--text--color--disabled);
14
14
  --pf-v6-c-menu--icon--disabled--Color: var(--pf-t--global--icon--color--disabled);
15
- --pf-v6-c-menu--TransitionDuration: var(--pf-t--global--motion--duration--fade--default);
15
+ --pf-v6-c-menu--TransitionDuration: 0s;
16
16
  --pf-v6-c-menu--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
17
17
  --pf-v6-c-menu--m-plain--BoxShadow: none;
18
18
  --pf-v6-c-menu__content--RowGap: var(--pf-v6-c-menu--RowGap);
@@ -85,14 +85,34 @@
85
85
  --pf-v6-c-menu--m-flyout__menu--m-left--InsetInlineEnd: calc(100% + var(--pf-v6-c-menu--m-flyout__menu--m-left--right-offset));
86
86
  --pf-v6-c-menu--m-drilldown__content--TransitionDuration--height: var(--pf-t--global--motion--duration--slide-in--default);
87
87
  --pf-v6-c-menu--m-drilldown__content--TransitionDuration--transform: var(--pf-t--global--motion--duration--slide-in--default);
88
- --pf-v6-c-menu--m-drilldown__content--Transition: transform var(--pf-v6-c-menu--m-drilldown__content--TransitionDuration--transform), height var(--pf-v6-c-menu--m-drilldown__content--TransitionDuration--height);
88
+ --pf-v6-c-menu--m-drilldown__content--Transition: height var(--pf-v6-c-menu--m-drilldown__content--TransitionDuration--height);
89
89
  --pf-v6-c-menu--m-drilldown--c-menu--InsetBlockStart: 0;
90
- --pf-v6-c-menu--m-drilldown--c-menu--TransitionDuration--transform: var(--pf-t--global--motion--duration--slide-in--default);
90
+ --pf-v6-c-menu--m-drilldown--c-menu--TransitionDuration--transform: 0s;
91
91
  --pf-v6-c-menu--m-drilldown--c-menu--Transition: transform var(--pf-v6-c-menu--m-drilldown--c-menu--TransitionDuration--transform);
92
- --pf-v6-c-menu--m-drilldown__list--TransitionDuration--transform: var(--pf-t--global--motion--duration--slide-in--default);
92
+ --pf-v6-c-menu--m-drilldown__list--TransitionDuration--transform: 0s;
93
93
  --pf-v6-c-menu--m-drilldown__list--Transition: transform var(--pf-v6-c-menu--m-drilldown__list--TransitionDuration--transform);
94
94
  --pf-v6-c-menu--m-drilled-in--c-menu__list-item--m-current-path--c-menu--ZIndex: var(--pf-t--global--z-index--xs);
95
95
  }
96
+ @media (prefers-reduced-motion: no-preference) {
97
+ .pf-v6-c-menu {
98
+ --pf-v6-c-menu--TransitionDuration: var(--pf-t--global--motion--duration--fade--default);
99
+ }
100
+ }
101
+ @media (prefers-reduced-motion: no-preference) {
102
+ .pf-v6-c-menu {
103
+ --pf-v6-c-menu--m-drilldown__content--Transition: transform var(--pf-v6-c-menu--m-drilldown__content--TransitionDuration--transform), height var(--pf-v6-c-menu--m-drilldown__content--TransitionDuration--height);
104
+ }
105
+ }
106
+ @media (prefers-reduced-motion: no-preference) {
107
+ .pf-v6-c-menu {
108
+ --pf-v6-c-menu--m-drilldown--c-menu--TransitionDuration--transform: var(--pf-t--global--motion--duration--slide-in--default);
109
+ }
110
+ }
111
+ @media (prefers-reduced-motion: no-preference) {
112
+ .pf-v6-c-menu {
113
+ --pf-v6-c-menu--m-drilldown__list--TransitionDuration--transform: var(--pf-t--global--motion--duration--slide-in--default);
114
+ }
115
+ }
96
116
 
97
117
  .pf-v6-c-menu__content,
98
118
  .pf-v6-c-menu__list-item,
package/components/Menu/menu.scss CHANGED
@@ -15,8 +15,12 @@
15
15
  --#{$menu}--ZIndex: var(--pf-t--global--z-index--sm);
16
16
  --#{$menu}--button--disabled--Color: var(--pf-t--global--text--color--disabled);
17
17
  --#{$menu}--icon--disabled--Color: var(--pf-t--global--icon--color--disabled);
18
- --#{$menu}--TransitionDuration: var(--pf-t--global--motion--duration--fade--default);
18
+ --#{$menu}--TransitionDuration: 0s;
19
19
  --#{$menu}--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
20
+
21
+ @media (prefers-reduced-motion: no-preference) {
22
+ --#{$menu}--TransitionDuration: var(--pf-t--global--motion--duration--fade--default);
23
+ }
20
24
 
21
25
  // * Menu plain
22
26
  --#{$menu}--m-plain--BoxShadow: none;
@@ -126,19 +130,30 @@
126
130
  --#{$menu}--m-flyout__menu--m-left--InsetInlineEnd: calc(100% + var(--#{$menu}--m-flyout__menu--m-left--right-offset));
127
131
 
128
132
  // * Menu drilldown content
129
- // TODO Reduced motion default needed for drilldown
130
133
  --#{$menu}--m-drilldown__content--TransitionDuration--height: var(--pf-t--global--motion--duration--slide-in--default);
131
134
  --#{$menu}--m-drilldown__content--TransitionDuration--transform: var(--pf-t--global--motion--duration--slide-in--default);
132
- --#{$menu}--m-drilldown__content--Transition: transform var(--#{$menu}--m-drilldown__content--TransitionDuration--transform), height var(--#{$menu}--m-drilldown__content--TransitionDuration--height);
135
+ --#{$menu}--m-drilldown__content--Transition: height var(--#{$menu}--m-drilldown__content--TransitionDuration--height);
136
+
137
+ @media (prefers-reduced-motion: no-preference) {
138
+ --#{$menu}--m-drilldown__content--Transition: transform var(--#{$menu}--m-drilldown__content--TransitionDuration--transform), height var(--#{$menu}--m-drilldown__content--TransitionDuration--height);
139
+ }
133
140
 
134
141
  // * Menu drilldown menu
135
142
  --#{$menu}--m-drilldown--c-menu--InsetBlockStart: 0;
136
- --#{$menu}--m-drilldown--c-menu--TransitionDuration--transform: var(--pf-t--global--motion--duration--slide-in--default);
143
+ --#{$menu}--m-drilldown--c-menu--TransitionDuration--transform: 0s;
137
144
  --#{$menu}--m-drilldown--c-menu--Transition: transform var(--#{$menu}--m-drilldown--c-menu--TransitionDuration--transform);
138
145
 
146
+ @media (prefers-reduced-motion: no-preference) {
147
+ --#{$menu}--m-drilldown--c-menu--TransitionDuration--transform: var(--pf-t--global--motion--duration--slide-in--default);
148
+ }
149
+
139
150
  // * Menu drilldown list
140
- --#{$menu}--m-drilldown__list--TransitionDuration--transform: var(--pf-t--global--motion--duration--slide-in--default);
151
+ --#{$menu}--m-drilldown__list--TransitionDuration--transform: 0s;
141
152
  --#{$menu}--m-drilldown__list--Transition: transform var(--#{$menu}--m-drilldown__list--TransitionDuration--transform);
153
+
154
+ @media (prefers-reduced-motion: no-preference) {
155
+ --#{$menu}--m-drilldown__list--TransitionDuration--transform: var(--pf-t--global--motion--duration--slide-in--default);
156
+ }
142
157
 
143
158
  // * Menu drilled in
144
159
  --#{$menu}--m-drilled-in--c-menu__list-item--m-current-path--c-menu--ZIndex: var(--pf-t--global--z-index--xs);
package/components/_index.css CHANGED
@@ -1548,8 +1548,8 @@ button.pf-v6-c-breadcrumb__link {
1548
1548
  --pf-v6-c-button--TextDecorationStyle: none;
1549
1549
  --pf-v6-c-button--TextDecorationColor: currentcolor;
1550
1550
  --pf-v6-c-button--TransitionDuration: var(--pf-t--global--motion--duration--fade--default);
1551
- --pf-v6-c-button--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
1552
- --pf-v6-c-button--TransitionProperty: color, background-color, border-width, border-color, padding;
1551
+ --pf-v6-c-button--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--accelerate);
1552
+ --pf-v6-c-button--TransitionProperty: color, background, border-width, border-color;
1553
1553
  --pf-v6-c-button--hover--BackgroundColor: transparent;
1554
1554
  --pf-v6-c-button--hover--BorderColor: transparent;
1555
1555
  --pf-v6-c-button--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
@@ -1816,8 +1816,9 @@ button.pf-v6-c-breadcrumb__link {
1816
1816
  text-decoration-color: var(--pf-v6-c-button--TextDecorationColor);
1817
1817
  white-space: nowrap;
1818
1818
  cursor: pointer;
1819
+ -webkit-user-select: none;
1819
1820
  user-select: none;
1820
- background-color: var(--pf-v6-c-button--BackgroundColor);
1821
+ background: var(--pf-v6-c-button--BackgroundColor) radial-gradient(circle, transparent 1%, color-mix(in srgb, currentcolor 15%, transparent) 1%) center/15000%;
1821
1822
  border: 0;
1822
1823
  border-start-start-radius: var(--pf-v6-c-button--BorderStartStartRadius, var(--pf-v6-c-button--BorderRadius));
1823
1824
  border-start-end-radius: var(--pf-v6-c-button--BorderStartEndRadius, var(--pf-v6-c-button--BorderRadius));
@@ -1934,6 +1935,7 @@ button.pf-v6-c-breadcrumb__link {
1934
1935
  --pf-v6-c-button--m-link--hover__icon--Color: var(--pf-v6-c-button--m-link--m-inline--hover__icon--Color);
1935
1936
  text-align: start;
1936
1937
  white-space: normal;
1938
+ background: transparent;
1937
1939
  outline-offset: 0.125rem;
1938
1940
  }
1939
1941
  span.pf-v6-c-button.pf-m-link.pf-m-inline {
@@ -2067,6 +2069,7 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
2067
2069
  --pf-v6-c-button--m-small--PaddingInlineEnd: var(--pf-v6-c-button--m-plain--m-no-padding--m-small--PaddingInlineEnd);
2068
2070
  --pf-v6-c-button--m-small--PaddingInlineStart: var(--pf-v6-c-button--m-plain--m-no-padding--m-small--PaddingInlineStart);
2069
2071
  min-width: var(--pf-v6-c-button--m-plain--m-no-padding--MinWidth);
2072
+ background: var(--pf-v6-c-button--BackgroundColor);
2070
2073
  }
2071
2074
  .pf-v6-c-button.pf-m-block {
2072
2075
  --pf-v6-c-button--Display: var(--pf-v6-c-button--m-block--Display);
@@ -2113,20 +2116,24 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
2113
2116
  text-decoration-style: var(--pf-v6-c-button--hover--TextDecorationStyle);
2114
2117
  text-decoration-color: var(--pf-v6-c-button--hover--TextDecorationColor);
2115
2118
  }
2116
- .pf-v6-c-button.pf-m-clicked {
2119
+ .pf-v6-c-button:active, .pf-v6-c-button.pf-m-clicked {
2117
2120
  --pf-v6-c-button--Color: var(--pf-v6-c-button--m-clicked--Color);
2118
2121
  --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--m-clicked--BackgroundColor);
2119
2122
  --pf-v6-c-button--BorderWidth: var(--pf-v6-c-button--m-clicked--BorderWidth);
2120
2123
  --pf-v6-c-button--BorderColor: var(--pf-v6-c-button--m-clicked--BorderColor);
2121
2124
  --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-clicked__icon--Color);
2122
2125
  }
2126
+ .pf-v6-c-button:active {
2127
+ background-size: 100%;
2128
+ transition-duration: 0s;
2129
+ }
2123
2130
  .pf-v6-c-button:disabled, .pf-v6-c-button.pf-m-disabled {
2124
2131
  pointer-events: none;
2125
2132
  }
2126
2133
  .pf-v6-c-button:disabled, .pf-v6-c-button.pf-m-disabled, .pf-v6-c-button.pf-m-aria-disabled {
2127
2134
  color: var(--pf-v6-c-button--disabled--Color);
2128
2135
  text-decoration-color: var(--pf-v6-c-button--disabled--TextDecorationColor);
2129
- background-color: var(--pf-v6-c-button--disabled--BackgroundColor);
2136
+ background: var(--pf-v6-c-button--disabled--BackgroundColor);
2130
2137
  }
2131
2138
  .pf-v6-c-button:disabled::after, .pf-v6-c-button.pf-m-disabled::after, .pf-v6-c-button.pf-m-aria-disabled::after {
2132
2139
  border-color: transparent;
@@ -9863,7 +9870,7 @@ ul.pf-v6-c-list {
9863
9870
  --pf-v6-c-menu--ZIndex: var(--pf-t--global--z-index--sm);
9864
9871
  --pf-v6-c-menu--button--disabled--Color: var(--pf-t--global--text--color--disabled);
9865
9872
  --pf-v6-c-menu--icon--disabled--Color: var(--pf-t--global--icon--color--disabled);
9866
- --pf-v6-c-menu--TransitionDuration: var(--pf-t--global--motion--duration--fade--default);
9873
+ --pf-v6-c-menu--TransitionDuration: 0s;
9867
9874
  --pf-v6-c-menu--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
9868
9875
  --pf-v6-c-menu--m-plain--BoxShadow: none;
9869
9876
  --pf-v6-c-menu__content--RowGap: var(--pf-v6-c-menu--RowGap);
@@ -9936,14 +9943,34 @@ ul.pf-v6-c-list {
9936
9943
  --pf-v6-c-menu--m-flyout__menu--m-left--InsetInlineEnd: calc(100% + var(--pf-v6-c-menu--m-flyout__menu--m-left--right-offset));
9937
9944
  --pf-v6-c-menu--m-drilldown__content--TransitionDuration--height: var(--pf-t--global--motion--duration--slide-in--default);
9938
9945
  --pf-v6-c-menu--m-drilldown__content--TransitionDuration--transform: var(--pf-t--global--motion--duration--slide-in--default);
9939
- --pf-v6-c-menu--m-drilldown__content--Transition: transform var(--pf-v6-c-menu--m-drilldown__content--TransitionDuration--transform), height var(--pf-v6-c-menu--m-drilldown__content--TransitionDuration--height);
9946
+ --pf-v6-c-menu--m-drilldown__content--Transition: height var(--pf-v6-c-menu--m-drilldown__content--TransitionDuration--height);
9940
9947
  --pf-v6-c-menu--m-drilldown--c-menu--InsetBlockStart: 0;
9941
- --pf-v6-c-menu--m-drilldown--c-menu--TransitionDuration--transform: var(--pf-t--global--motion--duration--slide-in--default);
9948
+ --pf-v6-c-menu--m-drilldown--c-menu--TransitionDuration--transform: 0s;
9942
9949
  --pf-v6-c-menu--m-drilldown--c-menu--Transition: transform var(--pf-v6-c-menu--m-drilldown--c-menu--TransitionDuration--transform);
9943
- --pf-v6-c-menu--m-drilldown__list--TransitionDuration--transform: var(--pf-t--global--motion--duration--slide-in--default);
9950
+ --pf-v6-c-menu--m-drilldown__list--TransitionDuration--transform: 0s;
9944
9951
  --pf-v6-c-menu--m-drilldown__list--Transition: transform var(--pf-v6-c-menu--m-drilldown__list--TransitionDuration--transform);
9945
9952
  --pf-v6-c-menu--m-drilled-in--c-menu__list-item--m-current-path--c-menu--ZIndex: var(--pf-t--global--z-index--xs);
9946
9953
  }
9954
+ @media (prefers-reduced-motion: no-preference) {
9955
+ .pf-v6-c-menu {
9956
+ --pf-v6-c-menu--TransitionDuration: var(--pf-t--global--motion--duration--fade--default);
9957
+ }
9958
+ }
9959
+ @media (prefers-reduced-motion: no-preference) {
9960
+ .pf-v6-c-menu {
9961
+ --pf-v6-c-menu--m-drilldown__content--Transition: transform var(--pf-v6-c-menu--m-drilldown__content--TransitionDuration--transform), height var(--pf-v6-c-menu--m-drilldown__content--TransitionDuration--height);
9962
+ }
9963
+ }
9964
+ @media (prefers-reduced-motion: no-preference) {
9965
+ .pf-v6-c-menu {
9966
+ --pf-v6-c-menu--m-drilldown--c-menu--TransitionDuration--transform: var(--pf-t--global--motion--duration--slide-in--default);
9967
+ }
9968
+ }
9969
+ @media (prefers-reduced-motion: no-preference) {
9970
+ .pf-v6-c-menu {
9971
+ --pf-v6-c-menu--m-drilldown__list--TransitionDuration--transform: var(--pf-t--global--motion--duration--slide-in--default);
9972
+ }
9973
+ }
9947
9974
 
9948
9975
  .pf-v6-c-menu__content,
9949
9976
  .pf-v6-c-menu__list-item,
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.24",
4
+ "version": "6.3.0-prerelease.25",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
@@ -47,7 +47,7 @@
47
47
  "@commitlint/config-conventional": "^19.1.0",
48
48
  "@fortawesome/fontawesome": "^1.1.8",
49
49
  "@octokit/rest": "^20.1.0",
50
- "@patternfly/documentation-framework": "6.10.19",
50
+ "@patternfly/documentation-framework": "6.10.22",
51
51
  "@patternfly/patternfly-a11y": "5.1.0",
52
52
  "@patternfly/react-code-editor": "6.2.2",
53
53
  "@patternfly/react-core": "6.2.2",
package/patternfly-no-globals.css CHANGED
@@ -9010,8 +9010,8 @@ button.pf-v6-c-breadcrumb__link {
9010
9010
  --pf-v6-c-button--TextDecorationStyle: none;
9011
9011
  --pf-v6-c-button--TextDecorationColor: currentcolor;
9012
9012
  --pf-v6-c-button--TransitionDuration: var(--pf-t--global--motion--duration--fade--default);
9013
- --pf-v6-c-button--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
9014
- --pf-v6-c-button--TransitionProperty: color, background-color, border-width, border-color, padding;
9013
+ --pf-v6-c-button--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--accelerate);
9014
+ --pf-v6-c-button--TransitionProperty: color, background, border-width, border-color;
9015
9015
  --pf-v6-c-button--hover--BackgroundColor: transparent;
9016
9016
  --pf-v6-c-button--hover--BorderColor: transparent;
9017
9017
  --pf-v6-c-button--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
@@ -9278,8 +9278,9 @@ button.pf-v6-c-breadcrumb__link {
9278
9278
  text-decoration-color: var(--pf-v6-c-button--TextDecorationColor);
9279
9279
  white-space: nowrap;
9280
9280
  cursor: pointer;
9281
+ -webkit-user-select: none;
9281
9282
  user-select: none;
9282
- background-color: var(--pf-v6-c-button--BackgroundColor);
9283
+ background: var(--pf-v6-c-button--BackgroundColor) radial-gradient(circle, transparent 1%, color-mix(in srgb, currentcolor 15%, transparent) 1%) center/15000%;
9283
9284
  border: 0;
9284
9285
  border-start-start-radius: var(--pf-v6-c-button--BorderStartStartRadius, var(--pf-v6-c-button--BorderRadius));
9285
9286
  border-start-end-radius: var(--pf-v6-c-button--BorderStartEndRadius, var(--pf-v6-c-button--BorderRadius));
@@ -9396,6 +9397,7 @@ button.pf-v6-c-breadcrumb__link {
9396
9397
  --pf-v6-c-button--m-link--hover__icon--Color: var(--pf-v6-c-button--m-link--m-inline--hover__icon--Color);
9397
9398
  text-align: start;
9398
9399
  white-space: normal;
9400
+ background: transparent;
9399
9401
  outline-offset: 0.125rem;
9400
9402
  }
9401
9403
  span.pf-v6-c-button.pf-m-link.pf-m-inline {
@@ -9529,6 +9531,7 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
9529
9531
  --pf-v6-c-button--m-small--PaddingInlineEnd: var(--pf-v6-c-button--m-plain--m-no-padding--m-small--PaddingInlineEnd);
9530
9532
  --pf-v6-c-button--m-small--PaddingInlineStart: var(--pf-v6-c-button--m-plain--m-no-padding--m-small--PaddingInlineStart);
9531
9533
  min-width: var(--pf-v6-c-button--m-plain--m-no-padding--MinWidth);
9534
+ background: var(--pf-v6-c-button--BackgroundColor);
9532
9535
  }
9533
9536
  .pf-v6-c-button.pf-m-block {
9534
9537
  --pf-v6-c-button--Display: var(--pf-v6-c-button--m-block--Display);
@@ -9575,20 +9578,24 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
9575
9578
  text-decoration-style: var(--pf-v6-c-button--hover--TextDecorationStyle);
9576
9579
  text-decoration-color: var(--pf-v6-c-button--hover--TextDecorationColor);
9577
9580
  }
9578
- .pf-v6-c-button.pf-m-clicked {
9581
+ .pf-v6-c-button:active, .pf-v6-c-button.pf-m-clicked {
9579
9582
  --pf-v6-c-button--Color: var(--pf-v6-c-button--m-clicked--Color);
9580
9583
  --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--m-clicked--BackgroundColor);
9581
9584
  --pf-v6-c-button--BorderWidth: var(--pf-v6-c-button--m-clicked--BorderWidth);
9582
9585
  --pf-v6-c-button--BorderColor: var(--pf-v6-c-button--m-clicked--BorderColor);
9583
9586
  --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-clicked__icon--Color);
9584
9587
  }
9588
+ .pf-v6-c-button:active {
9589
+ background-size: 100%;
9590
+ transition-duration: 0s;
9591
+ }
9585
9592
  .pf-v6-c-button:disabled, .pf-v6-c-button.pf-m-disabled {
9586
9593
  pointer-events: none;
9587
9594
  }
9588
9595
  .pf-v6-c-button:disabled, .pf-v6-c-button.pf-m-disabled, .pf-v6-c-button.pf-m-aria-disabled {
9589
9596
  color: var(--pf-v6-c-button--disabled--Color);
9590
9597
  text-decoration-color: var(--pf-v6-c-button--disabled--TextDecorationColor);
9591
- background-color: var(--pf-v6-c-button--disabled--BackgroundColor);
9598
+ background: var(--pf-v6-c-button--disabled--BackgroundColor);
9592
9599
  }
9593
9600
  .pf-v6-c-button:disabled::after, .pf-v6-c-button.pf-m-disabled::after, .pf-v6-c-button.pf-m-aria-disabled::after {
9594
9601
  border-color: transparent;
@@ -17325,7 +17332,7 @@ ul.pf-v6-c-list {
17325
17332
  --pf-v6-c-menu--ZIndex: var(--pf-t--global--z-index--sm);
17326
17333
  --pf-v6-c-menu--button--disabled--Color: var(--pf-t--global--text--color--disabled);
17327
17334
  --pf-v6-c-menu--icon--disabled--Color: var(--pf-t--global--icon--color--disabled);
17328
- --pf-v6-c-menu--TransitionDuration: var(--pf-t--global--motion--duration--fade--default);
17335
+ --pf-v6-c-menu--TransitionDuration: 0s;
17329
17336
  --pf-v6-c-menu--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
17330
17337
  --pf-v6-c-menu--m-plain--BoxShadow: none;
17331
17338
  --pf-v6-c-menu__content--RowGap: var(--pf-v6-c-menu--RowGap);
@@ -17398,14 +17405,34 @@ ul.pf-v6-c-list {
17398
17405
  --pf-v6-c-menu--m-flyout__menu--m-left--InsetInlineEnd: calc(100% + var(--pf-v6-c-menu--m-flyout__menu--m-left--right-offset));
17399
17406
  --pf-v6-c-menu--m-drilldown__content--TransitionDuration--height: var(--pf-t--global--motion--duration--slide-in--default);
17400
17407
  --pf-v6-c-menu--m-drilldown__content--TransitionDuration--transform: var(--pf-t--global--motion--duration--slide-in--default);
17401
- --pf-v6-c-menu--m-drilldown__content--Transition: transform var(--pf-v6-c-menu--m-drilldown__content--TransitionDuration--transform), height var(--pf-v6-c-menu--m-drilldown__content--TransitionDuration--height);
17408
+ --pf-v6-c-menu--m-drilldown__content--Transition: height var(--pf-v6-c-menu--m-drilldown__content--TransitionDuration--height);
17402
17409
  --pf-v6-c-menu--m-drilldown--c-menu--InsetBlockStart: 0;
17403
- --pf-v6-c-menu--m-drilldown--c-menu--TransitionDuration--transform: var(--pf-t--global--motion--duration--slide-in--default);
17410
+ --pf-v6-c-menu--m-drilldown--c-menu--TransitionDuration--transform: 0s;
17404
17411
  --pf-v6-c-menu--m-drilldown--c-menu--Transition: transform var(--pf-v6-c-menu--m-drilldown--c-menu--TransitionDuration--transform);
17405
- --pf-v6-c-menu--m-drilldown__list--TransitionDuration--transform: var(--pf-t--global--motion--duration--slide-in--default);
17412
+ --pf-v6-c-menu--m-drilldown__list--TransitionDuration--transform: 0s;
17406
17413
  --pf-v6-c-menu--m-drilldown__list--Transition: transform var(--pf-v6-c-menu--m-drilldown__list--TransitionDuration--transform);
17407
17414
  --pf-v6-c-menu--m-drilled-in--c-menu__list-item--m-current-path--c-menu--ZIndex: var(--pf-t--global--z-index--xs);
17408
17415
  }
17416
+ @media (prefers-reduced-motion: no-preference) {
17417
+ .pf-v6-c-menu {
17418
+ --pf-v6-c-menu--TransitionDuration: var(--pf-t--global--motion--duration--fade--default);
17419
+ }
17420
+ }
17421
+ @media (prefers-reduced-motion: no-preference) {
17422
+ .pf-v6-c-menu {
17423
+ --pf-v6-c-menu--m-drilldown__content--Transition: transform var(--pf-v6-c-menu--m-drilldown__content--TransitionDuration--transform), height var(--pf-v6-c-menu--m-drilldown__content--TransitionDuration--height);
17424
+ }
17425
+ }
17426
+ @media (prefers-reduced-motion: no-preference) {
17427
+ .pf-v6-c-menu {
17428
+ --pf-v6-c-menu--m-drilldown--c-menu--TransitionDuration--transform: var(--pf-t--global--motion--duration--slide-in--default);
17429
+ }
17430
+ }
17431
+ @media (prefers-reduced-motion: no-preference) {
17432
+ .pf-v6-c-menu {
17433
+ --pf-v6-c-menu--m-drilldown__list--TransitionDuration--transform: var(--pf-t--global--motion--duration--slide-in--default);
17434
+ }
17435
+ }
17409
17436
 
17410
17437
  .pf-v6-c-menu__content,
17411
17438
  .pf-v6-c-menu__list-item,
package/patternfly.css CHANGED
@@ -9146,8 +9146,8 @@ button.pf-v6-c-breadcrumb__link {
9146
9146
  --pf-v6-c-button--TextDecorationStyle: none;
9147
9147
  --pf-v6-c-button--TextDecorationColor: currentcolor;
9148
9148
  --pf-v6-c-button--TransitionDuration: var(--pf-t--global--motion--duration--fade--default);
9149
- --pf-v6-c-button--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
9150
- --pf-v6-c-button--TransitionProperty: color, background-color, border-width, border-color, padding;
9149
+ --pf-v6-c-button--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--accelerate);
9150
+ --pf-v6-c-button--TransitionProperty: color, background, border-width, border-color;
9151
9151
  --pf-v6-c-button--hover--BackgroundColor: transparent;
9152
9152
  --pf-v6-c-button--hover--BorderColor: transparent;
9153
9153
  --pf-v6-c-button--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
@@ -9414,8 +9414,9 @@ button.pf-v6-c-breadcrumb__link {
9414
9414
  text-decoration-color: var(--pf-v6-c-button--TextDecorationColor);
9415
9415
  white-space: nowrap;
9416
9416
  cursor: pointer;
9417
+ -webkit-user-select: none;
9417
9418
  user-select: none;
9418
- background-color: var(--pf-v6-c-button--BackgroundColor);
9419
+ background: var(--pf-v6-c-button--BackgroundColor) radial-gradient(circle, transparent 1%, color-mix(in srgb, currentcolor 15%, transparent) 1%) center/15000%;
9419
9420
  border: 0;
9420
9421
  border-start-start-radius: var(--pf-v6-c-button--BorderStartStartRadius, var(--pf-v6-c-button--BorderRadius));
9421
9422
  border-start-end-radius: var(--pf-v6-c-button--BorderStartEndRadius, var(--pf-v6-c-button--BorderRadius));
@@ -9532,6 +9533,7 @@ button.pf-v6-c-breadcrumb__link {
9532
9533
  --pf-v6-c-button--m-link--hover__icon--Color: var(--pf-v6-c-button--m-link--m-inline--hover__icon--Color);
9533
9534
  text-align: start;
9534
9535
  white-space: normal;
9536
+ background: transparent;
9535
9537
  outline-offset: 0.125rem;
9536
9538
  }
9537
9539
  span.pf-v6-c-button.pf-m-link.pf-m-inline {
@@ -9665,6 +9667,7 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
9665
9667
  --pf-v6-c-button--m-small--PaddingInlineEnd: var(--pf-v6-c-button--m-plain--m-no-padding--m-small--PaddingInlineEnd);
9666
9668
  --pf-v6-c-button--m-small--PaddingInlineStart: var(--pf-v6-c-button--m-plain--m-no-padding--m-small--PaddingInlineStart);
9667
9669
  min-width: var(--pf-v6-c-button--m-plain--m-no-padding--MinWidth);
9670
+ background: var(--pf-v6-c-button--BackgroundColor);
9668
9671
  }
9669
9672
  .pf-v6-c-button.pf-m-block {
9670
9673
  --pf-v6-c-button--Display: var(--pf-v6-c-button--m-block--Display);
@@ -9711,20 +9714,24 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
9711
9714
  text-decoration-style: var(--pf-v6-c-button--hover--TextDecorationStyle);
9712
9715
  text-decoration-color: var(--pf-v6-c-button--hover--TextDecorationColor);
9713
9716
  }
9714
- .pf-v6-c-button.pf-m-clicked {
9717
+ .pf-v6-c-button:active, .pf-v6-c-button.pf-m-clicked {
9715
9718
  --pf-v6-c-button--Color: var(--pf-v6-c-button--m-clicked--Color);
9716
9719
  --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--m-clicked--BackgroundColor);
9717
9720
  --pf-v6-c-button--BorderWidth: var(--pf-v6-c-button--m-clicked--BorderWidth);
9718
9721
  --pf-v6-c-button--BorderColor: var(--pf-v6-c-button--m-clicked--BorderColor);
9719
9722
  --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-clicked__icon--Color);
9720
9723
  }
9724
+ .pf-v6-c-button:active {
9725
+ background-size: 100%;
9726
+ transition-duration: 0s;
9727
+ }
9721
9728
  .pf-v6-c-button:disabled, .pf-v6-c-button.pf-m-disabled {
9722
9729
  pointer-events: none;
9723
9730
  }
9724
9731
  .pf-v6-c-button:disabled, .pf-v6-c-button.pf-m-disabled, .pf-v6-c-button.pf-m-aria-disabled {
9725
9732
  color: var(--pf-v6-c-button--disabled--Color);
9726
9733
  text-decoration-color: var(--pf-v6-c-button--disabled--TextDecorationColor);
9727
- background-color: var(--pf-v6-c-button--disabled--BackgroundColor);
9734
+ background: var(--pf-v6-c-button--disabled--BackgroundColor);
9728
9735
  }
9729
9736
  .pf-v6-c-button:disabled::after, .pf-v6-c-button.pf-m-disabled::after, .pf-v6-c-button.pf-m-aria-disabled::after {
9730
9737
  border-color: transparent;
@@ -17461,7 +17468,7 @@ ul.pf-v6-c-list {
17461
17468
  --pf-v6-c-menu--ZIndex: var(--pf-t--global--z-index--sm);
17462
17469
  --pf-v6-c-menu--button--disabled--Color: var(--pf-t--global--text--color--disabled);
17463
17470
  --pf-v6-c-menu--icon--disabled--Color: var(--pf-t--global--icon--color--disabled);
17464
- --pf-v6-c-menu--TransitionDuration: var(--pf-t--global--motion--duration--fade--default);
17471
+ --pf-v6-c-menu--TransitionDuration: 0s;
17465
17472
  --pf-v6-c-menu--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
17466
17473
  --pf-v6-c-menu--m-plain--BoxShadow: none;
17467
17474
  --pf-v6-c-menu__content--RowGap: var(--pf-v6-c-menu--RowGap);
@@ -17534,14 +17541,34 @@ ul.pf-v6-c-list {
17534
17541
  --pf-v6-c-menu--m-flyout__menu--m-left--InsetInlineEnd: calc(100% + var(--pf-v6-c-menu--m-flyout__menu--m-left--right-offset));
17535
17542
  --pf-v6-c-menu--m-drilldown__content--TransitionDuration--height: var(--pf-t--global--motion--duration--slide-in--default);
17536
17543
  --pf-v6-c-menu--m-drilldown__content--TransitionDuration--transform: var(--pf-t--global--motion--duration--slide-in--default);
17537
- --pf-v6-c-menu--m-drilldown__content--Transition: transform var(--pf-v6-c-menu--m-drilldown__content--TransitionDuration--transform), height var(--pf-v6-c-menu--m-drilldown__content--TransitionDuration--height);
17544
+ --pf-v6-c-menu--m-drilldown__content--Transition: height var(--pf-v6-c-menu--m-drilldown__content--TransitionDuration--height);
17538
17545
  --pf-v6-c-menu--m-drilldown--c-menu--InsetBlockStart: 0;
17539
- --pf-v6-c-menu--m-drilldown--c-menu--TransitionDuration--transform: var(--pf-t--global--motion--duration--slide-in--default);
17546
+ --pf-v6-c-menu--m-drilldown--c-menu--TransitionDuration--transform: 0s;
17540
17547
  --pf-v6-c-menu--m-drilldown--c-menu--Transition: transform var(--pf-v6-c-menu--m-drilldown--c-menu--TransitionDuration--transform);
17541
- --pf-v6-c-menu--m-drilldown__list--TransitionDuration--transform: var(--pf-t--global--motion--duration--slide-in--default);
17548
+ --pf-v6-c-menu--m-drilldown__list--TransitionDuration--transform: 0s;
17542
17549
  --pf-v6-c-menu--m-drilldown__list--Transition: transform var(--pf-v6-c-menu--m-drilldown__list--TransitionDuration--transform);
17543
17550
  --pf-v6-c-menu--m-drilled-in--c-menu__list-item--m-current-path--c-menu--ZIndex: var(--pf-t--global--z-index--xs);
17544
17551
  }
17552
+ @media (prefers-reduced-motion: no-preference) {
17553
+ .pf-v6-c-menu {
17554
+ --pf-v6-c-menu--TransitionDuration: var(--pf-t--global--motion--duration--fade--default);
17555
+ }
17556
+ }
17557
+ @media (prefers-reduced-motion: no-preference) {
17558
+ .pf-v6-c-menu {
17559
+ --pf-v6-c-menu--m-drilldown__content--Transition: transform var(--pf-v6-c-menu--m-drilldown__content--TransitionDuration--transform), height var(--pf-v6-c-menu--m-drilldown__content--TransitionDuration--height);
17560
+ }
17561
+ }
17562
+ @media (prefers-reduced-motion: no-preference) {
17563
+ .pf-v6-c-menu {
17564
+ --pf-v6-c-menu--m-drilldown--c-menu--TransitionDuration--transform: var(--pf-t--global--motion--duration--slide-in--default);
17565
+ }
17566
+ }
17567
+ @media (prefers-reduced-motion: no-preference) {
17568
+ .pf-v6-c-menu {
17569
+ --pf-v6-c-menu--m-drilldown__list--TransitionDuration--transform: var(--pf-t--global--motion--duration--slide-in--default);
17570
+ }
17571
+ }
17545
17572
 
17546
17573
  .pf-v6-c-menu__content,
17547
17574
  .pf-v6-c-menu__list-item,