@patternfly/patternfly 6.3.0-prerelease.31 → 6.3.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 (11) hide show
  1. package/components/InputGroup/input-group.css +80 -0
  2. package/components/InputGroup/input-group.scss +95 -0
  3. package/components/_index.css +80 -0
  4. package/docs/components/InputGroup/examples/InputGroup.md +5 -1
  5. package/docs/components/Slider/examples/Slider.md +2 -2
  6. package/docs/components/TextInputGroup/examples/TextInputGroup.md +45 -5
  7. package/package.json +1 -1
  8. package/patternfly-no-globals.css +80 -0
  9. package/patternfly.css +80 -0
  10. package/patternfly.min.css +1 -1
  11. package/patternfly.min.css.map +1 -1
package/components/InputGroup/input-group.css CHANGED
@@ -19,6 +19,30 @@
19
19
  --pf-v6-c-input-group__text--Color: var(--pf-t--global--text--color--regular);
20
20
  --pf-v6-c-input-group__item--m-disabled__text--Color: var(--pf-t--global--text--color--on-disabled);
21
21
  --pf-v6-c-input-group__item--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
22
+ --pf-v6-c-input-group__item--m-search-text-input--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
23
+ --pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--expand--fade: var(--pf-t--global--motion--duration--fade--default);
24
+ --pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--collapse--fade: var(--pf-t--global--motion--duration--fade--short);
25
+ --pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
26
+ --pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
27
+ --pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--fade: var(--pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--collapse--fade);
28
+ --pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--slide: var(--pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--collapse--slide);
29
+ --pf-v6-c-input-group__item--m-search-text-input--ScaleX: 1;
30
+ --pf-v6-c-input-group__item--m-search-text-input--TransformOriginX--expand-start: 100%;
31
+ --pf-v6-c-input-group__item--m-search-text-input--TransformOriginX--expand-end: 0;
32
+ --pf-v6-c-input-group__item--m-search-text-input--TransformOriginX: var(--pf-v6-c-input-group__item--m-search-text-input--TransformOriginX--expand-end);
33
+ --pf-v6-c-input-group__item--m-search-expand--TransitionTimingFunction:var(--pf-t--global--motion--timing-function--default);
34
+ --pf-v6-c-input-group__item--m-search-expand--TransitionDuration--expand--fade: 0s;
35
+ --pf-v6-c-input-group__item--m-search-expand--TransitionDuration--collapse--fade: 0s;
36
+ --pf-v6-c-input-group__item--m-search-expand--TransitionDuration--fade: var(--pf-v6-c-input-group__item--m-search-expand--TransitionDuration--expand--fade);
37
+ --pf-v6-c-input-group__item--m-search-action--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
38
+ --pf-v6-c-input-group__item--m-search-action--TransitionDuration--expand--fade: var(--pf-t--global--motion--duration--fade--default);
39
+ --pf-v6-c-input-group__item--m-search-action--TransitionDuration--collapse--fade: var(--pf-t--global--motion--duration--fade--short);
40
+ --pf-v6-c-input-group__item--m-search-action--TransitionDuration--fade: var(--pf-v6-c-input-group__item--m-search-action--TransitionDuration--collapse--fade);
41
+ }
42
+ @media (prefers-reduced-motion: no-preference) {
43
+ .pf-v6-c-input-group {
44
+ --pf-v6-c-input-group__item--m-search-text-input--ScaleX: .7;
45
+ }
22
46
  }
23
47
 
24
48
  .pf-v6-c-input-group {
@@ -26,6 +50,62 @@
26
50
  gap: var(--pf-v6-c-input-group--Gap);
27
51
  width: 100%;
28
52
  }
53
+ .pf-v6-c-input-group.pf-m-search-expandable:not(.pf-m-expanded) {
54
+ --pf-v6-c-input-group--Gap: 0;
55
+ transition: gap 0s var(--pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--fade);
56
+ }
57
+ .pf-v6-c-input-group.pf-m-search-expandable .pf-v6-c-input-group__item.pf-m-search-input {
58
+ flex-grow: 1;
59
+ max-width: var(--pf-v6-c-input-group__item--m-search-text-input--MaxWidth, 0);
60
+ visibility: var(--pf-v6-c-input-group__item--m-search-text-input--Visibility, hidden);
61
+ opacity: var(--pf-v6-c-input-group__item--m-search-text-input--Opacity, 0);
62
+ transition-delay: 0s, 0s, var(--pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--fade), var(--pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--fade);
63
+ transition-timing-function: var(--pf-v6-c-input-group__item--m-search-text-input--TransitionTimingFunction);
64
+ transition-duration: var(--pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--fade), var(--pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--slide), 0s, 0s;
65
+ transition-property: opacity, scale, visibility, max-width;
66
+ transform-origin: var(--pf-v6-c-input-group__item--m-search-text-input--TransformOriginX) center;
67
+ scale: var(--pf-v6-c-input-group__item--m-search-text-input--ScaleX) 1;
68
+ }
69
+ .pf-v6-c-input-group.pf-m-search-expandable .pf-v6-c-input-group__item.pf-m-search-expand {
70
+ max-width: var(--pf-v6-c-input-group__item--m-search-expand--MaxWidth, 100%);
71
+ visibility: var(--pf-v6-c-input-group__item--m-search-expand--Visibility, visible);
72
+ opacity: var(--pf-v6-c-input-group__item--m-search-expand--Opacity, 1);
73
+ transition-delay: var(--pf-v6-c-input-group__item--m-search-action--TransitionDuration--fade);
74
+ transition-timing-function: var(--pf-v6-c-input-group__item--m-search-expand--TransitionTimingFunction);
75
+ transition-duration: var(--pf-v6-c-input-group__item--m-search-expand--TransitionDuration--fade), 0s, 0s;
76
+ transition-property: opacity, visibility, max-width;
77
+ }
78
+ .pf-v6-c-input-group.pf-m-search-expandable .pf-v6-c-input-group__item.pf-m-search-action {
79
+ max-width: var(--pf-v6-c-input-group__item--m-search-action--MaxWidth, 0);
80
+ visibility: var(--pf-v6-c-input-group__item--m-search-action--Visibility, hidden);
81
+ opacity: var(--pf-v6-c-input-group__item--m-search-action--Opacity, 0);
82
+ transition-delay: 0s, var(--pf-v6-c-input-group__item--m-search-action--TransitionDuration--fade), var(--pf-v6-c-input-group__item--m-search-action--TransitionDuration--fade);
83
+ transition-timing-function: var(--pf-v6-c-input-group__item--m-search-action--TransitionTimingFunction);
84
+ transition-duration: var(--pf-v6-c-input-group__item--m-search-action--TransitionDuration--fade), 0s, 0s;
85
+ transition-property: opacity, visibility, max-width;
86
+ }
87
+ .pf-v6-c-input-group.pf-m-search-expandable.pf-m-expand-start {
88
+ --pf-v6-c-input-group__item--m-search-text-input--TransformOriginX: var(--pf-v6-c-input-group__item--m-search-text-input--TransformOriginX--expand-start);
89
+ }
90
+ .pf-v6-c-input-group.pf-m-search-expandable.pf-m-expanded {
91
+ --pf-v6-c-input-group__item--m-search-text-input--MaxWidth: 100%;
92
+ --pf-v6-c-input-group__item--m-search-text-input--Visibility: visible;
93
+ --pf-v6-c-input-group__item--m-search-text-input--Opacity: 1;
94
+ --pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--fade: var(--pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--expand--fade);
95
+ --pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--slide: var(--pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--expand--slide);
96
+ --pf-v6-c-input-group__item--m-search-text-input--ScaleX: 1;
97
+ --pf-v6-c-input-group__item--m-search-action--MaxWidth: 100%;
98
+ --pf-v6-c-input-group__item--m-search-action--Visibility: visible;
99
+ --pf-v6-c-input-group__item--m-search-action--Opacity: 1;
100
+ --pf-v6-c-input-group__item--m-search-action--TransitionDuration--fade: var(--pf-v6-c-input-group__item--m-search-action--TransitionDuration--expand--fade);
101
+ --pf-v6-c-input-group__item--m-search-expand--MaxWidth: 0;
102
+ --pf-v6-c-input-group__item--m-search-expand--Visibility: hidden;
103
+ --pf-v6-c-input-group__item--m-search-expand--Opacity: 0;
104
+ --pf-v6-c-input-group__item--m-search-expand--TransitionDuration--fade: var(--pf-v6-c-input-group__item--m-search-expand--TransitionDuration--collapse--fade);
105
+ }
106
+ .pf-v6-c-input-group.pf-m-search-expandable.pf-m-expanded .pf-v6-c-input-group__item:is(.pf-m-search-input, .pf-m-search-expand, .pf-m-search-action) {
107
+ transition-delay: 0s;
108
+ }
29
109
 
30
110
  .pf-v6-c-input-group__item {
31
111
  position: relative;
package/components/InputGroup/input-group.scss CHANGED
@@ -31,12 +31,107 @@
31
31
  // Input group text, disabled variant
32
32
  --#{$input-group}__item--m-disabled__text--Color: var(--pf-t--global--text--color--on-disabled);
33
33
  --#{$input-group}__item--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
34
+
35
+ // Input group search expanded
36
+ --#{$input-group}__item--m-search-text-input--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
37
+ --#{$input-group}__item--m-search-text-input--TransitionDuration--expand--fade: var(--pf-t--global--motion--duration--fade--default);
38
+ --#{$input-group}__item--m-search-text-input--TransitionDuration--collapse--fade: var(--pf-t--global--motion--duration--fade--short);
39
+ --#{$input-group}__item--m-search-text-input--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
40
+ --#{$input-group}__item--m-search-text-input--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
41
+ --#{$input-group}__item--m-search-text-input--TransitionDuration--fade: var(--#{$input-group}__item--m-search-text-input--TransitionDuration--collapse--fade);
42
+ --#{$input-group}__item--m-search-text-input--TransitionDuration--slide: var(--#{$input-group}__item--m-search-text-input--TransitionDuration--collapse--slide);
43
+ --#{$input-group}__item--m-search-text-input--ScaleX: 1;
44
+ --#{$input-group}__item--m-search-text-input--TransformOriginX--expand-start: 100%;
45
+ --#{$input-group}__item--m-search-text-input--TransformOriginX--expand-end: 0;
46
+ --#{$input-group}__item--m-search-text-input--TransformOriginX: var(--#{$input-group}__item--m-search-text-input--TransformOriginX--expand-end);
47
+ --#{$input-group}__item--m-search-expand--TransitionTimingFunction:var(--pf-t--global--motion--timing-function--default);
48
+ --#{$input-group}__item--m-search-expand--TransitionDuration--expand--fade: 0s;
49
+ --#{$input-group}__item--m-search-expand--TransitionDuration--collapse--fade: 0s;
50
+ --#{$input-group}__item--m-search-expand--TransitionDuration--fade: var(--#{$input-group}__item--m-search-expand--TransitionDuration--expand--fade);
51
+ --#{$input-group}__item--m-search-action--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
52
+ --#{$input-group}__item--m-search-action--TransitionDuration--expand--fade: var(--pf-t--global--motion--duration--fade--default);
53
+ --#{$input-group}__item--m-search-action--TransitionDuration--collapse--fade: var(--pf-t--global--motion--duration--fade--short);
54
+ --#{$input-group}__item--m-search-action--TransitionDuration--fade: var(--#{$input-group}__item--m-search-action--TransitionDuration--collapse--fade);
55
+
56
+ @media (prefers-reduced-motion: no-preference) {
57
+ --#{$input-group}__item--m-search-text-input--ScaleX: .7;
58
+ }
34
59
  }
35
60
 
36
61
  .#{$input-group} {
37
62
  display: flex;
38
63
  gap: var(--#{$input-group}--Gap);
39
64
  width: 100%;
65
+
66
+ &.pf-m-search-expandable {
67
+ &:not(.pf-m-expanded) {
68
+ --#{$input-group}--Gap: 0;
69
+
70
+ transition: gap 0s var(--#{$input-group}__item--m-search-text-input--TransitionDuration--fade);
71
+ }
72
+
73
+ .#{$input-group}__item {
74
+ &.pf-m-search-input {
75
+ flex-grow: 1;
76
+ max-width: var(--#{$input-group}__item--m-search-text-input--MaxWidth, 0);
77
+ visibility: var(--#{$input-group}__item--m-search-text-input--Visibility, hidden);
78
+ opacity: var(--#{$input-group}__item--m-search-text-input--Opacity, 0);
79
+ transition-delay: 0s, 0s, var(--#{$input-group}__item--m-search-text-input--TransitionDuration--fade), var(--#{$input-group}__item--m-search-text-input--TransitionDuration--fade);
80
+ transition-timing-function: var(--#{$input-group}__item--m-search-text-input--TransitionTimingFunction);
81
+ transition-duration: var(--#{$input-group}__item--m-search-text-input--TransitionDuration--fade), var(--#{$input-group}__item--m-search-text-input--TransitionDuration--slide), 0s, 0s;
82
+ transition-property: opacity, scale, visibility, max-width;
83
+ transform-origin: var(--#{$input-group}__item--m-search-text-input--TransformOriginX) center;
84
+ scale: var(--#{$input-group}__item--m-search-text-input--ScaleX) 1;
85
+ }
86
+
87
+ // the expand button (magnifying glass)
88
+ &.pf-m-search-expand {
89
+ max-width: var(--#{$input-group}__item--m-search-expand--MaxWidth, 100%);
90
+ visibility: var(--#{$input-group}__item--m-search-expand--Visibility, visible);
91
+ opacity: var(--#{$input-group}__item--m-search-expand--Opacity, 1);
92
+ transition-delay: var(--#{$input-group}__item--m-search-action--TransitionDuration--fade);
93
+ transition-timing-function: var(--#{$input-group}__item--m-search-expand--TransitionTimingFunction);
94
+ transition-duration: var(--#{$input-group}__item--m-search-expand--TransitionDuration--fade), 0s, 0s;
95
+ transition-property: opacity, visibility, max-width;
96
+ }
97
+
98
+ // other input group items adjacent to the search input that are shown when expanded
99
+ &.pf-m-search-action {
100
+ max-width: var(--#{$input-group}__item--m-search-action--MaxWidth, 0);
101
+ visibility: var(--#{$input-group}__item--m-search-action--Visibility, hidden);
102
+ opacity: var(--#{$input-group}__item--m-search-action--Opacity, 0);
103
+ transition-delay: 0s, var(--#{$input-group}__item--m-search-action--TransitionDuration--fade), var(--#{$input-group}__item--m-search-action--TransitionDuration--fade);
104
+ transition-timing-function: var(--#{$input-group}__item--m-search-action--TransitionTimingFunction);
105
+ transition-duration: var(--#{$input-group}__item--m-search-action--TransitionDuration--fade), 0s, 0s;
106
+ transition-property: opacity, visibility, max-width;
107
+ }
108
+ }
109
+
110
+ &.pf-m-expand-start {
111
+ --#{$input-group}__item--m-search-text-input--TransformOriginX: var(--#{$input-group}__item--m-search-text-input--TransformOriginX--expand-start);
112
+ }
113
+
114
+ &.pf-m-expanded {
115
+ --#{$input-group}__item--m-search-text-input--MaxWidth: 100%;
116
+ --#{$input-group}__item--m-search-text-input--Visibility: visible;
117
+ --#{$input-group}__item--m-search-text-input--Opacity: 1;
118
+ --#{$input-group}__item--m-search-text-input--TransitionDuration--fade: var(--#{$input-group}__item--m-search-text-input--TransitionDuration--expand--fade);
119
+ --#{$input-group}__item--m-search-text-input--TransitionDuration--slide: var(--#{$input-group}__item--m-search-text-input--TransitionDuration--expand--slide);
120
+ --#{$input-group}__item--m-search-text-input--ScaleX: 1;
121
+ --#{$input-group}__item--m-search-action--MaxWidth: 100%;
122
+ --#{$input-group}__item--m-search-action--Visibility: visible;
123
+ --#{$input-group}__item--m-search-action--Opacity: 1;
124
+ --#{$input-group}__item--m-search-action--TransitionDuration--fade: var(--#{$input-group}__item--m-search-action--TransitionDuration--expand--fade);
125
+ --#{$input-group}__item--m-search-expand--MaxWidth: 0;
126
+ --#{$input-group}__item--m-search-expand--Visibility: hidden;
127
+ --#{$input-group}__item--m-search-expand--Opacity: 0;
128
+ --#{$input-group}__item--m-search-expand--TransitionDuration--fade: var(--#{$input-group}__item--m-search-expand--TransitionDuration--collapse--fade);
129
+
130
+ .#{$input-group}__item:is(.pf-m-search-input, .pf-m-search-expand, .pf-m-search-action) {
131
+ transition-delay: 0s;
132
+ }
133
+ }
134
+ }
40
135
  }
41
136
 
42
137
  .#{$input-group}__item {
package/components/_index.css CHANGED
@@ -8189,6 +8189,30 @@ ul) {
8189
8189
  --pf-v6-c-input-group__text--Color: var(--pf-t--global--text--color--regular);
8190
8190
  --pf-v6-c-input-group__item--m-disabled__text--Color: var(--pf-t--global--text--color--on-disabled);
8191
8191
  --pf-v6-c-input-group__item--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
8192
+ --pf-v6-c-input-group__item--m-search-text-input--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
8193
+ --pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--expand--fade: var(--pf-t--global--motion--duration--fade--default);
8194
+ --pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--collapse--fade: var(--pf-t--global--motion--duration--fade--short);
8195
+ --pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
8196
+ --pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
8197
+ --pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--fade: var(--pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--collapse--fade);
8198
+ --pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--slide: var(--pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--collapse--slide);
8199
+ --pf-v6-c-input-group__item--m-search-text-input--ScaleX: 1;
8200
+ --pf-v6-c-input-group__item--m-search-text-input--TransformOriginX--expand-start: 100%;
8201
+ --pf-v6-c-input-group__item--m-search-text-input--TransformOriginX--expand-end: 0;
8202
+ --pf-v6-c-input-group__item--m-search-text-input--TransformOriginX: var(--pf-v6-c-input-group__item--m-search-text-input--TransformOriginX--expand-end);
8203
+ --pf-v6-c-input-group__item--m-search-expand--TransitionTimingFunction:var(--pf-t--global--motion--timing-function--default);
8204
+ --pf-v6-c-input-group__item--m-search-expand--TransitionDuration--expand--fade: 0s;
8205
+ --pf-v6-c-input-group__item--m-search-expand--TransitionDuration--collapse--fade: 0s;
8206
+ --pf-v6-c-input-group__item--m-search-expand--TransitionDuration--fade: var(--pf-v6-c-input-group__item--m-search-expand--TransitionDuration--expand--fade);
8207
+ --pf-v6-c-input-group__item--m-search-action--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
8208
+ --pf-v6-c-input-group__item--m-search-action--TransitionDuration--expand--fade: var(--pf-t--global--motion--duration--fade--default);
8209
+ --pf-v6-c-input-group__item--m-search-action--TransitionDuration--collapse--fade: var(--pf-t--global--motion--duration--fade--short);
8210
+ --pf-v6-c-input-group__item--m-search-action--TransitionDuration--fade: var(--pf-v6-c-input-group__item--m-search-action--TransitionDuration--collapse--fade);
8211
+ }
8212
+ @media (prefers-reduced-motion: no-preference) {
8213
+ .pf-v6-c-input-group {
8214
+ --pf-v6-c-input-group__item--m-search-text-input--ScaleX: .7;
8215
+ }
8192
8216
  }
8193
8217
 
8194
8218
  .pf-v6-c-input-group {
@@ -8196,6 +8220,62 @@ ul) {
8196
8220
  gap: var(--pf-v6-c-input-group--Gap);
8197
8221
  width: 100%;
8198
8222
  }
8223
+ .pf-v6-c-input-group.pf-m-search-expandable:not(.pf-m-expanded) {
8224
+ --pf-v6-c-input-group--Gap: 0;
8225
+ transition: gap 0s var(--pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--fade);
8226
+ }
8227
+ .pf-v6-c-input-group.pf-m-search-expandable .pf-v6-c-input-group__item.pf-m-search-input {
8228
+ flex-grow: 1;
8229
+ max-width: var(--pf-v6-c-input-group__item--m-search-text-input--MaxWidth, 0);
8230
+ visibility: var(--pf-v6-c-input-group__item--m-search-text-input--Visibility, hidden);
8231
+ opacity: var(--pf-v6-c-input-group__item--m-search-text-input--Opacity, 0);
8232
+ transition-delay: 0s, 0s, var(--pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--fade), var(--pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--fade);
8233
+ transition-timing-function: var(--pf-v6-c-input-group__item--m-search-text-input--TransitionTimingFunction);
8234
+ transition-duration: var(--pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--fade), var(--pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--slide), 0s, 0s;
8235
+ transition-property: opacity, scale, visibility, max-width;
8236
+ transform-origin: var(--pf-v6-c-input-group__item--m-search-text-input--TransformOriginX) center;
8237
+ scale: var(--pf-v6-c-input-group__item--m-search-text-input--ScaleX) 1;
8238
+ }
8239
+ .pf-v6-c-input-group.pf-m-search-expandable .pf-v6-c-input-group__item.pf-m-search-expand {
8240
+ max-width: var(--pf-v6-c-input-group__item--m-search-expand--MaxWidth, 100%);
8241
+ visibility: var(--pf-v6-c-input-group__item--m-search-expand--Visibility, visible);
8242
+ opacity: var(--pf-v6-c-input-group__item--m-search-expand--Opacity, 1);
8243
+ transition-delay: var(--pf-v6-c-input-group__item--m-search-action--TransitionDuration--fade);
8244
+ transition-timing-function: var(--pf-v6-c-input-group__item--m-search-expand--TransitionTimingFunction);
8245
+ transition-duration: var(--pf-v6-c-input-group__item--m-search-expand--TransitionDuration--fade), 0s, 0s;
8246
+ transition-property: opacity, visibility, max-width;
8247
+ }
8248
+ .pf-v6-c-input-group.pf-m-search-expandable .pf-v6-c-input-group__item.pf-m-search-action {
8249
+ max-width: var(--pf-v6-c-input-group__item--m-search-action--MaxWidth, 0);
8250
+ visibility: var(--pf-v6-c-input-group__item--m-search-action--Visibility, hidden);
8251
+ opacity: var(--pf-v6-c-input-group__item--m-search-action--Opacity, 0);
8252
+ transition-delay: 0s, var(--pf-v6-c-input-group__item--m-search-action--TransitionDuration--fade), var(--pf-v6-c-input-group__item--m-search-action--TransitionDuration--fade);
8253
+ transition-timing-function: var(--pf-v6-c-input-group__item--m-search-action--TransitionTimingFunction);
8254
+ transition-duration: var(--pf-v6-c-input-group__item--m-search-action--TransitionDuration--fade), 0s, 0s;
8255
+ transition-property: opacity, visibility, max-width;
8256
+ }
8257
+ .pf-v6-c-input-group.pf-m-search-expandable.pf-m-expand-start {
8258
+ --pf-v6-c-input-group__item--m-search-text-input--TransformOriginX: var(--pf-v6-c-input-group__item--m-search-text-input--TransformOriginX--expand-start);
8259
+ }
8260
+ .pf-v6-c-input-group.pf-m-search-expandable.pf-m-expanded {
8261
+ --pf-v6-c-input-group__item--m-search-text-input--MaxWidth: 100%;
8262
+ --pf-v6-c-input-group__item--m-search-text-input--Visibility: visible;
8263
+ --pf-v6-c-input-group__item--m-search-text-input--Opacity: 1;
8264
+ --pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--fade: var(--pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--expand--fade);
8265
+ --pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--slide: var(--pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--expand--slide);
8266
+ --pf-v6-c-input-group__item--m-search-text-input--ScaleX: 1;
8267
+ --pf-v6-c-input-group__item--m-search-action--MaxWidth: 100%;
8268
+ --pf-v6-c-input-group__item--m-search-action--Visibility: visible;
8269
+ --pf-v6-c-input-group__item--m-search-action--Opacity: 1;
8270
+ --pf-v6-c-input-group__item--m-search-action--TransitionDuration--fade: var(--pf-v6-c-input-group__item--m-search-action--TransitionDuration--expand--fade);
8271
+ --pf-v6-c-input-group__item--m-search-expand--MaxWidth: 0;
8272
+ --pf-v6-c-input-group__item--m-search-expand--Visibility: hidden;
8273
+ --pf-v6-c-input-group__item--m-search-expand--Opacity: 0;
8274
+ --pf-v6-c-input-group__item--m-search-expand--TransitionDuration--fade: var(--pf-v6-c-input-group__item--m-search-expand--TransitionDuration--collapse--fade);
8275
+ }
8276
+ .pf-v6-c-input-group.pf-m-search-expandable.pf-m-expanded .pf-v6-c-input-group__item:is(.pf-m-search-input, .pf-m-search-expand, .pf-m-search-action) {
8277
+ transition-delay: 0s;
8278
+ }
8199
8279
 
8200
8280
  .pf-v6-c-input-group__item {
8201
8281
  position: relative;
package/docs/components/InputGroup/examples/InputGroup.md CHANGED
@@ -252,7 +252,7 @@ Use the input group to extend form controls by adding text, buttons, selects, et
252
252
  />
253
253
  </span>
254
254
  </div>
255
- <div class="pf-v6-c-input-group__item pf-m-box pf-m-plain">
255
+ <div class="pf-v6-c-input-group__item pf-m-plain pf-m-box">
256
256
  <span class="pf-v6-c-input-group__text">%</span>
257
257
  </div>
258
258
  </div>
@@ -280,3 +280,7 @@ When using the `.pf-v6-c-input-group` always ensure labels are used outside the
280
280
  | `.pf-m-box` | `.pf-v6-c-input-group__item` | Adds appropriate styling for items that are not form controls. |
281
281
  | `.pf-m-fill` | `.pf-v6-c-input-group__item` | Allows the input group element to stretch to fill available space. |
282
282
  | `.pf-m-disabled` | `.pf-v6-c-input-group__item` | Adds disabled styling to match a disabled input within the input group. |
283
+ | `.pf-m-search-expandable` | `.pf-v6-c-input-group` | Modifies an input group to be an expandable search input. **Note:** The expandable search input can be found in the [search input](/components/search-input/) component docs for react and [text input group](/components/text-input-group/html#search-input-group-expandable) component docs for core. |
284
+ | `.pf-m-search-input` | `.pf-v6-c-input-group__item` | Identifies the text input an expandable search input. |
285
+ | `.pf-m-search-expand` | `.pf-v6-c-input-group__item` | Identifies the expand button in an expandable search input. |
286
+ | `.pf-m-search-action` | `.pf-v6-c-input-group__item` | Identifies actions adjacent to the search input when an expandable search input is expanded. |
package/docs/components/Slider/examples/Slider.md CHANGED
@@ -427,7 +427,7 @@ cssPrefix: pf-v6-c-slider
427
427
  />
428
428
  </span>
429
429
  </div>
430
- <div class="pf-v6-c-input-group__item pf-m-box pf-m-disabled">
430
+ <div class="pf-v6-c-input-group__item pf-m-disabled pf-m-box">
431
431
  <span class="pf-v6-c-input-group__text">%</span>
432
432
  </div>
433
433
  </div>
@@ -632,7 +632,7 @@ cssPrefix: pf-v6-c-slider
632
632
  />
633
633
  </span>
634
634
  </div>
635
- <div class="pf-v6-c-input-group__item pf-m-box pf-m-disabled">
635
+ <div class="pf-v6-c-input-group__item pf-m-disabled pf-m-box">
636
636
  <span class="pf-v6-c-input-group__text">%</span>
637
637
  </div>
638
638
  </div>
package/docs/components/TextInputGroup/examples/TextInputGroup.md CHANGED
@@ -741,6 +741,8 @@ For the purposes of this example, the `TextInputGroup` is contained in a wrapper
741
741
 
742
742
  ### Search input group
743
743
 
744
+ The React implementation can be found in the [search input](/components/search-input) component.
745
+
744
746
  ```html
745
747
  <div class="pf-v6-c-text-input-group">
746
748
  <div class="pf-v6-c-text-input-group__main pf-m-icon">
@@ -867,8 +869,26 @@ For the purposes of this example, the `TextInputGroup` is contained in a wrapper
867
869
  ```html
868
870
  <h3>Collapsed</h3>
869
871
  <br />
870
- <div class="pf-v6-c-input-group pf-m-plain">
871
- <div class="pf-v6-c-input-group__item pf-m-plain">
872
+ <div class="pf-v6-c-input-group pf-m-search-expandable pf-m-plain">
873
+ <div class="pf-v6-c-input-group__item pf-m-search-input">
874
+ <div class="pf-v6-c-text-input-group">
875
+ <div class="pf-v6-c-text-input-group__main pf-m-icon">
876
+ <span class="pf-v6-c-text-input-group__text">
877
+ <span class="pf-v6-c-text-input-group__icon">
878
+ <i class="fas fa-fw fa-search"></i>
879
+ </span>
880
+ <input
881
+ class="pf-v6-c-text-input-group__text-input"
882
+ type="text"
883
+ placeholder="Search"
884
+ value
885
+ aria-label="Search input"
886
+ />
887
+ </span>
888
+ </div>
889
+ </div>
890
+ </div>
891
+ <div class="pf-v6-c-input-group__item pf-m-search-expand pf-m-plain">
872
892
  <button
873
893
  class="pf-v6-c-button pf-m-plain"
874
894
  type="button"
@@ -879,13 +899,22 @@ For the purposes of this example, the `TextInputGroup` is contained in a wrapper
879
899
  </span>
880
900
  </button>
881
901
  </div>
902
+ <div class="pf-v6-c-input-group__item pf-m-search-action pf-m-plain">
903
+ <button class="pf-v6-c-button pf-m-plain" type="button" aria-label="Close">
904
+ <span class="pf-v6-c-button__icon">
905
+ <i class="fas fa-times fa-fw" aria-hidden="true"></i>
906
+ </span>
907
+ </button>
908
+ </div>
882
909
  </div>
883
910
  <br />
884
911
  <br />
885
912
  <h3>Expanded</h3>
886
913
  <br />
887
- <div class="pf-v6-c-input-group pf-m-plain">
888
- <div class="pf-v6-c-input-group__item pf-m-fill">
914
+ <div
915
+ class="pf-v6-c-input-group pf-m-expanded pf-m-search-expandable pf-m-plain"
916
+ >
917
+ <div class="pf-v6-c-input-group__item pf-m-search-input">
889
918
  <div class="pf-v6-c-text-input-group">
890
919
  <div class="pf-v6-c-text-input-group__main pf-m-icon">
891
920
  <span class="pf-v6-c-text-input-group__text">
@@ -903,7 +932,18 @@ For the purposes of this example, the `TextInputGroup` is contained in a wrapper
903
932
  </div>
904
933
  </div>
905
934
  </div>
906
- <div class="pf-v6-c-input-group__item pf-m-plain">
935
+ <div class="pf-v6-c-input-group__item pf-m-search-expand pf-m-plain">
936
+ <button
937
+ class="pf-v6-c-button pf-m-plain"
938
+ type="button"
939
+ aria-label="Open search"
940
+ >
941
+ <span class="pf-v6-c-button__icon">
942
+ <i class="fas fa-search fa-fw" aria-hidden="true"></i>
943
+ </span>
944
+ </button>
945
+ </div>
946
+ <div class="pf-v6-c-input-group__item pf-m-search-action pf-m-plain">
907
947
  <button class="pf-v6-c-button pf-m-plain" type="button" aria-label="Close">
908
948
  <span class="pf-v6-c-button__icon">
909
949
  <i class="fas fa-times fa-fw" aria-hidden="true"></i>
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.31",
4
+ "version": "6.3.0-prerelease.32",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
package/patternfly-no-globals.css CHANGED
@@ -15685,6 +15685,30 @@ ul) {
15685
15685
  --pf-v6-c-input-group__text--Color: var(--pf-t--global--text--color--regular);
15686
15686
  --pf-v6-c-input-group__item--m-disabled__text--Color: var(--pf-t--global--text--color--on-disabled);
15687
15687
  --pf-v6-c-input-group__item--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
15688
+ --pf-v6-c-input-group__item--m-search-text-input--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
15689
+ --pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--expand--fade: var(--pf-t--global--motion--duration--fade--default);
15690
+ --pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--collapse--fade: var(--pf-t--global--motion--duration--fade--short);
15691
+ --pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
15692
+ --pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
15693
+ --pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--fade: var(--pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--collapse--fade);
15694
+ --pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--slide: var(--pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--collapse--slide);
15695
+ --pf-v6-c-input-group__item--m-search-text-input--ScaleX: 1;
15696
+ --pf-v6-c-input-group__item--m-search-text-input--TransformOriginX--expand-start: 100%;
15697
+ --pf-v6-c-input-group__item--m-search-text-input--TransformOriginX--expand-end: 0;
15698
+ --pf-v6-c-input-group__item--m-search-text-input--TransformOriginX: var(--pf-v6-c-input-group__item--m-search-text-input--TransformOriginX--expand-end);
15699
+ --pf-v6-c-input-group__item--m-search-expand--TransitionTimingFunction:var(--pf-t--global--motion--timing-function--default);
15700
+ --pf-v6-c-input-group__item--m-search-expand--TransitionDuration--expand--fade: 0s;
15701
+ --pf-v6-c-input-group__item--m-search-expand--TransitionDuration--collapse--fade: 0s;
15702
+ --pf-v6-c-input-group__item--m-search-expand--TransitionDuration--fade: var(--pf-v6-c-input-group__item--m-search-expand--TransitionDuration--expand--fade);
15703
+ --pf-v6-c-input-group__item--m-search-action--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
15704
+ --pf-v6-c-input-group__item--m-search-action--TransitionDuration--expand--fade: var(--pf-t--global--motion--duration--fade--default);
15705
+ --pf-v6-c-input-group__item--m-search-action--TransitionDuration--collapse--fade: var(--pf-t--global--motion--duration--fade--short);
15706
+ --pf-v6-c-input-group__item--m-search-action--TransitionDuration--fade: var(--pf-v6-c-input-group__item--m-search-action--TransitionDuration--collapse--fade);
15707
+ }
15708
+ @media (prefers-reduced-motion: no-preference) {
15709
+ .pf-v6-c-input-group {
15710
+ --pf-v6-c-input-group__item--m-search-text-input--ScaleX: .7;
15711
+ }
15688
15712
  }
15689
15713
 
15690
15714
  .pf-v6-c-input-group {
@@ -15692,6 +15716,62 @@ ul) {
15692
15716
  gap: var(--pf-v6-c-input-group--Gap);
15693
15717
  width: 100%;
15694
15718
  }
15719
+ .pf-v6-c-input-group.pf-m-search-expandable:not(.pf-m-expanded) {
15720
+ --pf-v6-c-input-group--Gap: 0;
15721
+ transition: gap 0s var(--pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--fade);
15722
+ }
15723
+ .pf-v6-c-input-group.pf-m-search-expandable .pf-v6-c-input-group__item.pf-m-search-input {
15724
+ flex-grow: 1;
15725
+ max-width: var(--pf-v6-c-input-group__item--m-search-text-input--MaxWidth, 0);
15726
+ visibility: var(--pf-v6-c-input-group__item--m-search-text-input--Visibility, hidden);
15727
+ opacity: var(--pf-v6-c-input-group__item--m-search-text-input--Opacity, 0);
15728
+ transition-delay: 0s, 0s, var(--pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--fade), var(--pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--fade);
15729
+ transition-timing-function: var(--pf-v6-c-input-group__item--m-search-text-input--TransitionTimingFunction);
15730
+ transition-duration: var(--pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--fade), var(--pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--slide), 0s, 0s;
15731
+ transition-property: opacity, scale, visibility, max-width;
15732
+ transform-origin: var(--pf-v6-c-input-group__item--m-search-text-input--TransformOriginX) center;
15733
+ scale: var(--pf-v6-c-input-group__item--m-search-text-input--ScaleX) 1;
15734
+ }
15735
+ .pf-v6-c-input-group.pf-m-search-expandable .pf-v6-c-input-group__item.pf-m-search-expand {
15736
+ max-width: var(--pf-v6-c-input-group__item--m-search-expand--MaxWidth, 100%);
15737
+ visibility: var(--pf-v6-c-input-group__item--m-search-expand--Visibility, visible);
15738
+ opacity: var(--pf-v6-c-input-group__item--m-search-expand--Opacity, 1);
15739
+ transition-delay: var(--pf-v6-c-input-group__item--m-search-action--TransitionDuration--fade);
15740
+ transition-timing-function: var(--pf-v6-c-input-group__item--m-search-expand--TransitionTimingFunction);
15741
+ transition-duration: var(--pf-v6-c-input-group__item--m-search-expand--TransitionDuration--fade), 0s, 0s;
15742
+ transition-property: opacity, visibility, max-width;
15743
+ }
15744
+ .pf-v6-c-input-group.pf-m-search-expandable .pf-v6-c-input-group__item.pf-m-search-action {
15745
+ max-width: var(--pf-v6-c-input-group__item--m-search-action--MaxWidth, 0);
15746
+ visibility: var(--pf-v6-c-input-group__item--m-search-action--Visibility, hidden);
15747
+ opacity: var(--pf-v6-c-input-group__item--m-search-action--Opacity, 0);
15748
+ transition-delay: 0s, var(--pf-v6-c-input-group__item--m-search-action--TransitionDuration--fade), var(--pf-v6-c-input-group__item--m-search-action--TransitionDuration--fade);
15749
+ transition-timing-function: var(--pf-v6-c-input-group__item--m-search-action--TransitionTimingFunction);
15750
+ transition-duration: var(--pf-v6-c-input-group__item--m-search-action--TransitionDuration--fade), 0s, 0s;
15751
+ transition-property: opacity, visibility, max-width;
15752
+ }
15753
+ .pf-v6-c-input-group.pf-m-search-expandable.pf-m-expand-start {
15754
+ --pf-v6-c-input-group__item--m-search-text-input--TransformOriginX: var(--pf-v6-c-input-group__item--m-search-text-input--TransformOriginX--expand-start);
15755
+ }
15756
+ .pf-v6-c-input-group.pf-m-search-expandable.pf-m-expanded {
15757
+ --pf-v6-c-input-group__item--m-search-text-input--MaxWidth: 100%;
15758
+ --pf-v6-c-input-group__item--m-search-text-input--Visibility: visible;
15759
+ --pf-v6-c-input-group__item--m-search-text-input--Opacity: 1;
15760
+ --pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--fade: var(--pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--expand--fade);
15761
+ --pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--slide: var(--pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--expand--slide);
15762
+ --pf-v6-c-input-group__item--m-search-text-input--ScaleX: 1;
15763
+ --pf-v6-c-input-group__item--m-search-action--MaxWidth: 100%;
15764
+ --pf-v6-c-input-group__item--m-search-action--Visibility: visible;
15765
+ --pf-v6-c-input-group__item--m-search-action--Opacity: 1;
15766
+ --pf-v6-c-input-group__item--m-search-action--TransitionDuration--fade: var(--pf-v6-c-input-group__item--m-search-action--TransitionDuration--expand--fade);
15767
+ --pf-v6-c-input-group__item--m-search-expand--MaxWidth: 0;
15768
+ --pf-v6-c-input-group__item--m-search-expand--Visibility: hidden;
15769
+ --pf-v6-c-input-group__item--m-search-expand--Opacity: 0;
15770
+ --pf-v6-c-input-group__item--m-search-expand--TransitionDuration--fade: var(--pf-v6-c-input-group__item--m-search-expand--TransitionDuration--collapse--fade);
15771
+ }
15772
+ .pf-v6-c-input-group.pf-m-search-expandable.pf-m-expanded .pf-v6-c-input-group__item:is(.pf-m-search-input, .pf-m-search-expand, .pf-m-search-action) {
15773
+ transition-delay: 0s;
15774
+ }
15695
15775
 
15696
15776
  .pf-v6-c-input-group__item {
15697
15777
  position: relative;
package/patternfly.css CHANGED
@@ -15821,6 +15821,30 @@ ul) {
15821
15821
  --pf-v6-c-input-group__text--Color: var(--pf-t--global--text--color--regular);
15822
15822
  --pf-v6-c-input-group__item--m-disabled__text--Color: var(--pf-t--global--text--color--on-disabled);
15823
15823
  --pf-v6-c-input-group__item--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
15824
+ --pf-v6-c-input-group__item--m-search-text-input--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
15825
+ --pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--expand--fade: var(--pf-t--global--motion--duration--fade--default);
15826
+ --pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--collapse--fade: var(--pf-t--global--motion--duration--fade--short);
15827
+ --pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
15828
+ --pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
15829
+ --pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--fade: var(--pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--collapse--fade);
15830
+ --pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--slide: var(--pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--collapse--slide);
15831
+ --pf-v6-c-input-group__item--m-search-text-input--ScaleX: 1;
15832
+ --pf-v6-c-input-group__item--m-search-text-input--TransformOriginX--expand-start: 100%;
15833
+ --pf-v6-c-input-group__item--m-search-text-input--TransformOriginX--expand-end: 0;
15834
+ --pf-v6-c-input-group__item--m-search-text-input--TransformOriginX: var(--pf-v6-c-input-group__item--m-search-text-input--TransformOriginX--expand-end);
15835
+ --pf-v6-c-input-group__item--m-search-expand--TransitionTimingFunction:var(--pf-t--global--motion--timing-function--default);
15836
+ --pf-v6-c-input-group__item--m-search-expand--TransitionDuration--expand--fade: 0s;
15837
+ --pf-v6-c-input-group__item--m-search-expand--TransitionDuration--collapse--fade: 0s;
15838
+ --pf-v6-c-input-group__item--m-search-expand--TransitionDuration--fade: var(--pf-v6-c-input-group__item--m-search-expand--TransitionDuration--expand--fade);
15839
+ --pf-v6-c-input-group__item--m-search-action--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
15840
+ --pf-v6-c-input-group__item--m-search-action--TransitionDuration--expand--fade: var(--pf-t--global--motion--duration--fade--default);
15841
+ --pf-v6-c-input-group__item--m-search-action--TransitionDuration--collapse--fade: var(--pf-t--global--motion--duration--fade--short);
15842
+ --pf-v6-c-input-group__item--m-search-action--TransitionDuration--fade: var(--pf-v6-c-input-group__item--m-search-action--TransitionDuration--collapse--fade);
15843
+ }
15844
+ @media (prefers-reduced-motion: no-preference) {
15845
+ .pf-v6-c-input-group {
15846
+ --pf-v6-c-input-group__item--m-search-text-input--ScaleX: .7;
15847
+ }
15824
15848
  }
15825
15849
 
15826
15850
  .pf-v6-c-input-group {
@@ -15828,6 +15852,62 @@ ul) {
15828
15852
  gap: var(--pf-v6-c-input-group--Gap);
15829
15853
  width: 100%;
15830
15854
  }
15855
+ .pf-v6-c-input-group.pf-m-search-expandable:not(.pf-m-expanded) {
15856
+ --pf-v6-c-input-group--Gap: 0;
15857
+ transition: gap 0s var(--pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--fade);
15858
+ }
15859
+ .pf-v6-c-input-group.pf-m-search-expandable .pf-v6-c-input-group__item.pf-m-search-input {
15860
+ flex-grow: 1;
15861
+ max-width: var(--pf-v6-c-input-group__item--m-search-text-input--MaxWidth, 0);
15862
+ visibility: var(--pf-v6-c-input-group__item--m-search-text-input--Visibility, hidden);
15863
+ opacity: var(--pf-v6-c-input-group__item--m-search-text-input--Opacity, 0);
15864
+ transition-delay: 0s, 0s, var(--pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--fade), var(--pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--fade);
15865
+ transition-timing-function: var(--pf-v6-c-input-group__item--m-search-text-input--TransitionTimingFunction);
15866
+ transition-duration: var(--pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--fade), var(--pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--slide), 0s, 0s;
15867
+ transition-property: opacity, scale, visibility, max-width;
15868
+ transform-origin: var(--pf-v6-c-input-group__item--m-search-text-input--TransformOriginX) center;
15869
+ scale: var(--pf-v6-c-input-group__item--m-search-text-input--ScaleX) 1;
15870
+ }
15871
+ .pf-v6-c-input-group.pf-m-search-expandable .pf-v6-c-input-group__item.pf-m-search-expand {
15872
+ max-width: var(--pf-v6-c-input-group__item--m-search-expand--MaxWidth, 100%);
15873
+ visibility: var(--pf-v6-c-input-group__item--m-search-expand--Visibility, visible);
15874
+ opacity: var(--pf-v6-c-input-group__item--m-search-expand--Opacity, 1);
15875
+ transition-delay: var(--pf-v6-c-input-group__item--m-search-action--TransitionDuration--fade);
15876
+ transition-timing-function: var(--pf-v6-c-input-group__item--m-search-expand--TransitionTimingFunction);
15877
+ transition-duration: var(--pf-v6-c-input-group__item--m-search-expand--TransitionDuration--fade), 0s, 0s;
15878
+ transition-property: opacity, visibility, max-width;
15879
+ }
15880
+ .pf-v6-c-input-group.pf-m-search-expandable .pf-v6-c-input-group__item.pf-m-search-action {
15881
+ max-width: var(--pf-v6-c-input-group__item--m-search-action--MaxWidth, 0);
15882
+ visibility: var(--pf-v6-c-input-group__item--m-search-action--Visibility, hidden);
15883
+ opacity: var(--pf-v6-c-input-group__item--m-search-action--Opacity, 0);
15884
+ transition-delay: 0s, var(--pf-v6-c-input-group__item--m-search-action--TransitionDuration--fade), var(--pf-v6-c-input-group__item--m-search-action--TransitionDuration--fade);
15885
+ transition-timing-function: var(--pf-v6-c-input-group__item--m-search-action--TransitionTimingFunction);
15886
+ transition-duration: var(--pf-v6-c-input-group__item--m-search-action--TransitionDuration--fade), 0s, 0s;
15887
+ transition-property: opacity, visibility, max-width;
15888
+ }
15889
+ .pf-v6-c-input-group.pf-m-search-expandable.pf-m-expand-start {
15890
+ --pf-v6-c-input-group__item--m-search-text-input--TransformOriginX: var(--pf-v6-c-input-group__item--m-search-text-input--TransformOriginX--expand-start);
15891
+ }
15892
+ .pf-v6-c-input-group.pf-m-search-expandable.pf-m-expanded {
15893
+ --pf-v6-c-input-group__item--m-search-text-input--MaxWidth: 100%;
15894
+ --pf-v6-c-input-group__item--m-search-text-input--Visibility: visible;
15895
+ --pf-v6-c-input-group__item--m-search-text-input--Opacity: 1;
15896
+ --pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--fade: var(--pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--expand--fade);
15897
+ --pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--slide: var(--pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--expand--slide);
15898
+ --pf-v6-c-input-group__item--m-search-text-input--ScaleX: 1;
15899
+ --pf-v6-c-input-group__item--m-search-action--MaxWidth: 100%;
15900
+ --pf-v6-c-input-group__item--m-search-action--Visibility: visible;
15901
+ --pf-v6-c-input-group__item--m-search-action--Opacity: 1;
15902
+ --pf-v6-c-input-group__item--m-search-action--TransitionDuration--fade: var(--pf-v6-c-input-group__item--m-search-action--TransitionDuration--expand--fade);
15903
+ --pf-v6-c-input-group__item--m-search-expand--MaxWidth: 0;
15904
+ --pf-v6-c-input-group__item--m-search-expand--Visibility: hidden;
15905
+ --pf-v6-c-input-group__item--m-search-expand--Opacity: 0;
15906
+ --pf-v6-c-input-group__item--m-search-expand--TransitionDuration--fade: var(--pf-v6-c-input-group__item--m-search-expand--TransitionDuration--collapse--fade);
15907
+ }
15908
+ .pf-v6-c-input-group.pf-m-search-expandable.pf-m-expanded .pf-v6-c-input-group__item:is(.pf-m-search-input, .pf-m-search-expand, .pf-m-search-action) {
15909
+ transition-delay: 0s;
15910
+ }
15831
15911
 
15832
15912
  .pf-v6-c-input-group__item {
15833
15913
  position: relative;