@patternfly/patternfly 6.3.0-prerelease.31 → 6.3.0-prerelease.33

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 (15) hide show
  1. package/components/ExpandableSection/expandable-section.css +18 -0
  2. package/components/ExpandableSection/expandable-section.scss +28 -1
  3. package/components/InputGroup/input-group.css +80 -0
  4. package/components/InputGroup/input-group.scss +95 -0
  5. package/components/_index.css +98 -0
  6. package/docs/components/CodeBlock/examples/CodeBlock.md +4 -4
  7. package/docs/components/ExpandableSection/examples/ExpandableSection.md +11 -6
  8. package/docs/components/InputGroup/examples/InputGroup.md +5 -1
  9. package/docs/components/Slider/examples/Slider.md +2 -2
  10. package/docs/components/TextInputGroup/examples/TextInputGroup.md +45 -5
  11. package/package.json +2 -2
  12. package/patternfly-no-globals.css +98 -0
  13. package/patternfly.css +98 -0
  14. package/patternfly.min.css +1 -1
  15. package/patternfly.min.css.map +1 -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",
4
- "version": "6.3.0-prerelease.31",
4
+ "version": "6.3.0-prerelease.33",
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.24",
50
+ "@patternfly/documentation-framework": "6.10.31",
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
@@ -14077,6 +14077,8 @@ ul) {
14077
14077
  --pf-v6-c-expandable-section__content--TransitionDelay--hide: var(--pf-v6-c-expandable-section__content--TransitionDuration--fade);
14078
14078
  --pf-v6-c-expandable-section__content--Opacity: 0;
14079
14079
  --pf-v6-c-expandable-section__content--TranslateY: 0;
14080
+ --pf-v6-c-expandable-section--m-expand-top__content--TranslateY: 0;
14081
+ --pf-v6-c-expandable-section--m-expand-bottom__content--TranslateY: 0;
14080
14082
  --pf-v6-c-expandable-section--m-expanded__content--Opacity: 1;
14081
14083
  --pf-v6-c-expandable-section--m-expanded__content--TranslateY: 0;
14082
14084
  --pf-v6-c-expandable-section__content--MaxWidth: auto;
@@ -14100,6 +14102,8 @@ ul) {
14100
14102
  --pf-v6-c-expandable-section__content--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
14101
14103
  --pf-v6-c-expandable-section__content--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
14102
14104
  --pf-v6-c-expandable-section__content--TranslateY: -.5rem;
14105
+ --pf-v6-c-expandable-section--m-expand-top__content--TranslateY: .5rem;
14106
+ --pf-v6-c-expandable-section--m-expand-bottom__content--TranslateY: -.5rem;
14103
14107
  }
14104
14108
  }
14105
14109
 
@@ -14124,6 +14128,20 @@ ul) {
14124
14128
  --pf-v6-c-expandable-section__content--TransitionDelay--hide: 0s;
14125
14129
  gap: var(--pf-v6-c-expandable-section--Gap);
14126
14130
  }
14131
+ .pf-v6-c-expandable-section.pf-m-expand-top {
14132
+ --pf-v6-c-expandable-section__toggle-icon--Rotate: var(--pf-v6-c-expandable-section__toggle-icon--m-expand-top--Rotate);
14133
+ }
14134
+ .pf-v6-c-expandable-section:has(.pf-v6-c-expandable-section__content:only-child):not(.pf-m-expand-top, .pf-m-expand-bottom) {
14135
+ --pf-v6-c-expandable-section__content--TranslateY: 0;
14136
+ --pf-v6-c-expandable-section__content--TransitionDuration--expand--fade: 0s;
14137
+ --pf-v6-c-expandable-section__content--TransitionDuration--collapse--fade: 0s;
14138
+ }
14139
+ .pf-v6-c-expandable-section:has(.pf-v6-c-expandable-section__content:only-child).pf-m-expand-top:not(.pf-m-expanded) {
14140
+ --pf-v6-c-expandable-section__content--TranslateY: var(--pf-v6-c-expandable-section--m-expand-top__content--TranslateY);
14141
+ }
14142
+ .pf-v6-c-expandable-section:has(.pf-v6-c-expandable-section__content:only-child).pf-m-expand-bottom:not(.pf-m-expanded) {
14143
+ --pf-v6-c-expandable-section__content--TranslateY: var(--pf-v6-c-expandable-section--m-expand-bottom__content--TranslateY);
14144
+ }
14127
14145
  .pf-v6-c-expandable-section.pf-m-limit-width {
14128
14146
  --pf-v6-c-expandable-section__content--MaxWidth: var(--pf-v6-c-expandable-section--m-limit-width__content--MaxWidth);
14129
14147
  }
@@ -15685,6 +15703,30 @@ ul) {
15685
15703
  --pf-v6-c-input-group__text--Color: var(--pf-t--global--text--color--regular);
15686
15704
  --pf-v6-c-input-group__item--m-disabled__text--Color: var(--pf-t--global--text--color--on-disabled);
15687
15705
  --pf-v6-c-input-group__item--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
15706
+ --pf-v6-c-input-group__item--m-search-text-input--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
15707
+ --pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--expand--fade: var(--pf-t--global--motion--duration--fade--default);
15708
+ --pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--collapse--fade: var(--pf-t--global--motion--duration--fade--short);
15709
+ --pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
15710
+ --pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
15711
+ --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);
15712
+ --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);
15713
+ --pf-v6-c-input-group__item--m-search-text-input--ScaleX: 1;
15714
+ --pf-v6-c-input-group__item--m-search-text-input--TransformOriginX--expand-start: 100%;
15715
+ --pf-v6-c-input-group__item--m-search-text-input--TransformOriginX--expand-end: 0;
15716
+ --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);
15717
+ --pf-v6-c-input-group__item--m-search-expand--TransitionTimingFunction:var(--pf-t--global--motion--timing-function--default);
15718
+ --pf-v6-c-input-group__item--m-search-expand--TransitionDuration--expand--fade: 0s;
15719
+ --pf-v6-c-input-group__item--m-search-expand--TransitionDuration--collapse--fade: 0s;
15720
+ --pf-v6-c-input-group__item--m-search-expand--TransitionDuration--fade: var(--pf-v6-c-input-group__item--m-search-expand--TransitionDuration--expand--fade);
15721
+ --pf-v6-c-input-group__item--m-search-action--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
15722
+ --pf-v6-c-input-group__item--m-search-action--TransitionDuration--expand--fade: var(--pf-t--global--motion--duration--fade--default);
15723
+ --pf-v6-c-input-group__item--m-search-action--TransitionDuration--collapse--fade: var(--pf-t--global--motion--duration--fade--short);
15724
+ --pf-v6-c-input-group__item--m-search-action--TransitionDuration--fade: var(--pf-v6-c-input-group__item--m-search-action--TransitionDuration--collapse--fade);
15725
+ }
15726
+ @media (prefers-reduced-motion: no-preference) {
15727
+ .pf-v6-c-input-group {
15728
+ --pf-v6-c-input-group__item--m-search-text-input--ScaleX: .7;
15729
+ }
15688
15730
  }
15689
15731
 
15690
15732
  .pf-v6-c-input-group {
@@ -15692,6 +15734,62 @@ ul) {
15692
15734
  gap: var(--pf-v6-c-input-group--Gap);
15693
15735
  width: 100%;
15694
15736
  }
15737
+ .pf-v6-c-input-group.pf-m-search-expandable:not(.pf-m-expanded) {
15738
+ --pf-v6-c-input-group--Gap: 0;
15739
+ transition: gap 0s var(--pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--fade);
15740
+ }
15741
+ .pf-v6-c-input-group.pf-m-search-expandable .pf-v6-c-input-group__item.pf-m-search-input {
15742
+ flex-grow: 1;
15743
+ max-width: var(--pf-v6-c-input-group__item--m-search-text-input--MaxWidth, 0);
15744
+ visibility: var(--pf-v6-c-input-group__item--m-search-text-input--Visibility, hidden);
15745
+ opacity: var(--pf-v6-c-input-group__item--m-search-text-input--Opacity, 0);
15746
+ 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);
15747
+ transition-timing-function: var(--pf-v6-c-input-group__item--m-search-text-input--TransitionTimingFunction);
15748
+ 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;
15749
+ transition-property: opacity, scale, visibility, max-width;
15750
+ transform-origin: var(--pf-v6-c-input-group__item--m-search-text-input--TransformOriginX) center;
15751
+ scale: var(--pf-v6-c-input-group__item--m-search-text-input--ScaleX) 1;
15752
+ }
15753
+ .pf-v6-c-input-group.pf-m-search-expandable .pf-v6-c-input-group__item.pf-m-search-expand {
15754
+ max-width: var(--pf-v6-c-input-group__item--m-search-expand--MaxWidth, 100%);
15755
+ visibility: var(--pf-v6-c-input-group__item--m-search-expand--Visibility, visible);
15756
+ opacity: var(--pf-v6-c-input-group__item--m-search-expand--Opacity, 1);
15757
+ transition-delay: var(--pf-v6-c-input-group__item--m-search-action--TransitionDuration--fade);
15758
+ transition-timing-function: var(--pf-v6-c-input-group__item--m-search-expand--TransitionTimingFunction);
15759
+ transition-duration: var(--pf-v6-c-input-group__item--m-search-expand--TransitionDuration--fade), 0s, 0s;
15760
+ transition-property: opacity, visibility, max-width;
15761
+ }
15762
+ .pf-v6-c-input-group.pf-m-search-expandable .pf-v6-c-input-group__item.pf-m-search-action {
15763
+ max-width: var(--pf-v6-c-input-group__item--m-search-action--MaxWidth, 0);
15764
+ visibility: var(--pf-v6-c-input-group__item--m-search-action--Visibility, hidden);
15765
+ opacity: var(--pf-v6-c-input-group__item--m-search-action--Opacity, 0);
15766
+ 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);
15767
+ transition-timing-function: var(--pf-v6-c-input-group__item--m-search-action--TransitionTimingFunction);
15768
+ transition-duration: var(--pf-v6-c-input-group__item--m-search-action--TransitionDuration--fade), 0s, 0s;
15769
+ transition-property: opacity, visibility, max-width;
15770
+ }
15771
+ .pf-v6-c-input-group.pf-m-search-expandable.pf-m-expand-start {
15772
+ --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);
15773
+ }
15774
+ .pf-v6-c-input-group.pf-m-search-expandable.pf-m-expanded {
15775
+ --pf-v6-c-input-group__item--m-search-text-input--MaxWidth: 100%;
15776
+ --pf-v6-c-input-group__item--m-search-text-input--Visibility: visible;
15777
+ --pf-v6-c-input-group__item--m-search-text-input--Opacity: 1;
15778
+ --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);
15779
+ --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);
15780
+ --pf-v6-c-input-group__item--m-search-text-input--ScaleX: 1;
15781
+ --pf-v6-c-input-group__item--m-search-action--MaxWidth: 100%;
15782
+ --pf-v6-c-input-group__item--m-search-action--Visibility: visible;
15783
+ --pf-v6-c-input-group__item--m-search-action--Opacity: 1;
15784
+ --pf-v6-c-input-group__item--m-search-action--TransitionDuration--fade: var(--pf-v6-c-input-group__item--m-search-action--TransitionDuration--expand--fade);
15785
+ --pf-v6-c-input-group__item--m-search-expand--MaxWidth: 0;
15786
+ --pf-v6-c-input-group__item--m-search-expand--Visibility: hidden;
15787
+ --pf-v6-c-input-group__item--m-search-expand--Opacity: 0;
15788
+ --pf-v6-c-input-group__item--m-search-expand--TransitionDuration--fade: var(--pf-v6-c-input-group__item--m-search-expand--TransitionDuration--collapse--fade);
15789
+ }
15790
+ .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) {
15791
+ transition-delay: 0s;
15792
+ }
15695
15793
 
15696
15794
  .pf-v6-c-input-group__item {
15697
15795
  position: relative;
package/patternfly.css CHANGED
@@ -14213,6 +14213,8 @@ ul) {
14213
14213
  --pf-v6-c-expandable-section__content--TransitionDelay--hide: var(--pf-v6-c-expandable-section__content--TransitionDuration--fade);
14214
14214
  --pf-v6-c-expandable-section__content--Opacity: 0;
14215
14215
  --pf-v6-c-expandable-section__content--TranslateY: 0;
14216
+ --pf-v6-c-expandable-section--m-expand-top__content--TranslateY: 0;
14217
+ --pf-v6-c-expandable-section--m-expand-bottom__content--TranslateY: 0;
14216
14218
  --pf-v6-c-expandable-section--m-expanded__content--Opacity: 1;
14217
14219
  --pf-v6-c-expandable-section--m-expanded__content--TranslateY: 0;
14218
14220
  --pf-v6-c-expandable-section__content--MaxWidth: auto;
@@ -14236,6 +14238,8 @@ ul) {
14236
14238
  --pf-v6-c-expandable-section__content--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
14237
14239
  --pf-v6-c-expandable-section__content--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
14238
14240
  --pf-v6-c-expandable-section__content--TranslateY: -.5rem;
14241
+ --pf-v6-c-expandable-section--m-expand-top__content--TranslateY: .5rem;
14242
+ --pf-v6-c-expandable-section--m-expand-bottom__content--TranslateY: -.5rem;
14239
14243
  }
14240
14244
  }
14241
14245
 
@@ -14260,6 +14264,20 @@ ul) {
14260
14264
  --pf-v6-c-expandable-section__content--TransitionDelay--hide: 0s;
14261
14265
  gap: var(--pf-v6-c-expandable-section--Gap);
14262
14266
  }
14267
+ .pf-v6-c-expandable-section.pf-m-expand-top {
14268
+ --pf-v6-c-expandable-section__toggle-icon--Rotate: var(--pf-v6-c-expandable-section__toggle-icon--m-expand-top--Rotate);
14269
+ }
14270
+ .pf-v6-c-expandable-section:has(.pf-v6-c-expandable-section__content:only-child):not(.pf-m-expand-top, .pf-m-expand-bottom) {
14271
+ --pf-v6-c-expandable-section__content--TranslateY: 0;
14272
+ --pf-v6-c-expandable-section__content--TransitionDuration--expand--fade: 0s;
14273
+ --pf-v6-c-expandable-section__content--TransitionDuration--collapse--fade: 0s;
14274
+ }
14275
+ .pf-v6-c-expandable-section:has(.pf-v6-c-expandable-section__content:only-child).pf-m-expand-top:not(.pf-m-expanded) {
14276
+ --pf-v6-c-expandable-section__content--TranslateY: var(--pf-v6-c-expandable-section--m-expand-top__content--TranslateY);
14277
+ }
14278
+ .pf-v6-c-expandable-section:has(.pf-v6-c-expandable-section__content:only-child).pf-m-expand-bottom:not(.pf-m-expanded) {
14279
+ --pf-v6-c-expandable-section__content--TranslateY: var(--pf-v6-c-expandable-section--m-expand-bottom__content--TranslateY);
14280
+ }
14263
14281
  .pf-v6-c-expandable-section.pf-m-limit-width {
14264
14282
  --pf-v6-c-expandable-section__content--MaxWidth: var(--pf-v6-c-expandable-section--m-limit-width__content--MaxWidth);
14265
14283
  }
@@ -15821,6 +15839,30 @@ ul) {
15821
15839
  --pf-v6-c-input-group__text--Color: var(--pf-t--global--text--color--regular);
15822
15840
  --pf-v6-c-input-group__item--m-disabled__text--Color: var(--pf-t--global--text--color--on-disabled);
15823
15841
  --pf-v6-c-input-group__item--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
15842
+ --pf-v6-c-input-group__item--m-search-text-input--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
15843
+ --pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--expand--fade: var(--pf-t--global--motion--duration--fade--default);
15844
+ --pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--collapse--fade: var(--pf-t--global--motion--duration--fade--short);
15845
+ --pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
15846
+ --pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
15847
+ --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);
15848
+ --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);
15849
+ --pf-v6-c-input-group__item--m-search-text-input--ScaleX: 1;
15850
+ --pf-v6-c-input-group__item--m-search-text-input--TransformOriginX--expand-start: 100%;
15851
+ --pf-v6-c-input-group__item--m-search-text-input--TransformOriginX--expand-end: 0;
15852
+ --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);
15853
+ --pf-v6-c-input-group__item--m-search-expand--TransitionTimingFunction:var(--pf-t--global--motion--timing-function--default);
15854
+ --pf-v6-c-input-group__item--m-search-expand--TransitionDuration--expand--fade: 0s;
15855
+ --pf-v6-c-input-group__item--m-search-expand--TransitionDuration--collapse--fade: 0s;
15856
+ --pf-v6-c-input-group__item--m-search-expand--TransitionDuration--fade: var(--pf-v6-c-input-group__item--m-search-expand--TransitionDuration--expand--fade);
15857
+ --pf-v6-c-input-group__item--m-search-action--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
15858
+ --pf-v6-c-input-group__item--m-search-action--TransitionDuration--expand--fade: var(--pf-t--global--motion--duration--fade--default);
15859
+ --pf-v6-c-input-group__item--m-search-action--TransitionDuration--collapse--fade: var(--pf-t--global--motion--duration--fade--short);
15860
+ --pf-v6-c-input-group__item--m-search-action--TransitionDuration--fade: var(--pf-v6-c-input-group__item--m-search-action--TransitionDuration--collapse--fade);
15861
+ }
15862
+ @media (prefers-reduced-motion: no-preference) {
15863
+ .pf-v6-c-input-group {
15864
+ --pf-v6-c-input-group__item--m-search-text-input--ScaleX: .7;
15865
+ }
15824
15866
  }
15825
15867
 
15826
15868
  .pf-v6-c-input-group {
@@ -15828,6 +15870,62 @@ ul) {
15828
15870
  gap: var(--pf-v6-c-input-group--Gap);
15829
15871
  width: 100%;
15830
15872
  }
15873
+ .pf-v6-c-input-group.pf-m-search-expandable:not(.pf-m-expanded) {
15874
+ --pf-v6-c-input-group--Gap: 0;
15875
+ transition: gap 0s var(--pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--fade);
15876
+ }
15877
+ .pf-v6-c-input-group.pf-m-search-expandable .pf-v6-c-input-group__item.pf-m-search-input {
15878
+ flex-grow: 1;
15879
+ max-width: var(--pf-v6-c-input-group__item--m-search-text-input--MaxWidth, 0);
15880
+ visibility: var(--pf-v6-c-input-group__item--m-search-text-input--Visibility, hidden);
15881
+ opacity: var(--pf-v6-c-input-group__item--m-search-text-input--Opacity, 0);
15882
+ 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);
15883
+ transition-timing-function: var(--pf-v6-c-input-group__item--m-search-text-input--TransitionTimingFunction);
15884
+ 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;
15885
+ transition-property: opacity, scale, visibility, max-width;
15886
+ transform-origin: var(--pf-v6-c-input-group__item--m-search-text-input--TransformOriginX) center;
15887
+ scale: var(--pf-v6-c-input-group__item--m-search-text-input--ScaleX) 1;
15888
+ }
15889
+ .pf-v6-c-input-group.pf-m-search-expandable .pf-v6-c-input-group__item.pf-m-search-expand {
15890
+ max-width: var(--pf-v6-c-input-group__item--m-search-expand--MaxWidth, 100%);
15891
+ visibility: var(--pf-v6-c-input-group__item--m-search-expand--Visibility, visible);
15892
+ opacity: var(--pf-v6-c-input-group__item--m-search-expand--Opacity, 1);
15893
+ transition-delay: var(--pf-v6-c-input-group__item--m-search-action--TransitionDuration--fade);
15894
+ transition-timing-function: var(--pf-v6-c-input-group__item--m-search-expand--TransitionTimingFunction);
15895
+ transition-duration: var(--pf-v6-c-input-group__item--m-search-expand--TransitionDuration--fade), 0s, 0s;
15896
+ transition-property: opacity, visibility, max-width;
15897
+ }
15898
+ .pf-v6-c-input-group.pf-m-search-expandable .pf-v6-c-input-group__item.pf-m-search-action {
15899
+ max-width: var(--pf-v6-c-input-group__item--m-search-action--MaxWidth, 0);
15900
+ visibility: var(--pf-v6-c-input-group__item--m-search-action--Visibility, hidden);
15901
+ opacity: var(--pf-v6-c-input-group__item--m-search-action--Opacity, 0);
15902
+ 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);
15903
+ transition-timing-function: var(--pf-v6-c-input-group__item--m-search-action--TransitionTimingFunction);
15904
+ transition-duration: var(--pf-v6-c-input-group__item--m-search-action--TransitionDuration--fade), 0s, 0s;
15905
+ transition-property: opacity, visibility, max-width;
15906
+ }
15907
+ .pf-v6-c-input-group.pf-m-search-expandable.pf-m-expand-start {
15908
+ --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);
15909
+ }
15910
+ .pf-v6-c-input-group.pf-m-search-expandable.pf-m-expanded {
15911
+ --pf-v6-c-input-group__item--m-search-text-input--MaxWidth: 100%;
15912
+ --pf-v6-c-input-group__item--m-search-text-input--Visibility: visible;
15913
+ --pf-v6-c-input-group__item--m-search-text-input--Opacity: 1;
15914
+ --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);
15915
+ --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);
15916
+ --pf-v6-c-input-group__item--m-search-text-input--ScaleX: 1;
15917
+ --pf-v6-c-input-group__item--m-search-action--MaxWidth: 100%;
15918
+ --pf-v6-c-input-group__item--m-search-action--Visibility: visible;
15919
+ --pf-v6-c-input-group__item--m-search-action--Opacity: 1;
15920
+ --pf-v6-c-input-group__item--m-search-action--TransitionDuration--fade: var(--pf-v6-c-input-group__item--m-search-action--TransitionDuration--expand--fade);
15921
+ --pf-v6-c-input-group__item--m-search-expand--MaxWidth: 0;
15922
+ --pf-v6-c-input-group__item--m-search-expand--Visibility: hidden;
15923
+ --pf-v6-c-input-group__item--m-search-expand--Opacity: 0;
15924
+ --pf-v6-c-input-group__item--m-search-expand--TransitionDuration--fade: var(--pf-v6-c-input-group__item--m-search-expand--TransitionDuration--collapse--fade);
15925
+ }
15926
+ .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) {
15927
+ transition-delay: 0s;
15928
+ }
15831
15929
 
15832
15930
  .pf-v6-c-input-group__item {
15833
15931
  position: relative;