@patternfly/patternfly 6.3.0-prerelease.21 → 6.3.0-prerelease.23

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 (12) hide show
  1. package/components/Form/form.css +33 -2
  2. package/components/Form/form.scss +39 -2
  3. package/components/Nav/nav.css +22 -8
  4. package/components/Nav/nav.scss +22 -9
  5. package/components/_index.css +55 -10
  6. package/docs/components/Form/examples/Form.md +92 -5
  7. package/docs/demos/Form/examples/BasicForms.md +12 -12
  8. package/package.json +1 -1
  9. package/patternfly-no-globals.css +55 -10
  10. package/patternfly.css +55 -10
  11. package/patternfly.min.css +1 -1
  12. package/patternfly.min.css.map +1 -1
package/patternfly-no-globals.css CHANGED
@@ -14166,6 +14166,19 @@ ul) {
14166
14166
  --pf-v6-c-form__field-group__field-group__field-group-body--GridColumn: 1 / 3;
14167
14167
  --pf-v6-c-form__field-group__field-group__field-group-toggle--field-group-body--GridColumn: 2 / 3;
14168
14168
  --pf-v6-c-form__field-group-body__field-group--last-child--MarginBlockEnd: calc(var(--pf-v6-c-form__field-group-body--PaddingBlockEnd) * -1);
14169
+ --pf-v6-c-form__field-group-body--TranslateY: 0;
14170
+ --pf-v6-c-form__field-group--m-expanded__field-group-body--TranslateY: 0;
14171
+ --pf-v6-c-form__field-group-body--TransitionDuration--expand--slide: 0s;
14172
+ --pf-v6-c-form__field-group-body--TransitionDuration--expand--fade: var(--pf-t--global--motion--duration--fade--default);
14173
+ --pf-v6-c-form__field-group-body--TransitionDuration--collapse--slide: 0s;
14174
+ --pf-v6-c-form__field-group-body--TransitionDuration--collapse--fade: var(--pf-t--global--motion--duration--fade--short);
14175
+ }
14176
+ @media screen and (prefers-reduced-motion: no-preference) {
14177
+ .pf-v6-c-form {
14178
+ --pf-v6-c-form__field-group-body--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
14179
+ --pf-v6-c-form__field-group-body--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
14180
+ --pf-v6-c-form__field-group-body--TranslateY: -.5rem;
14181
+ }
14169
14182
  }
14170
14183
 
14171
14184
  .pf-v6-c-form {
@@ -14522,6 +14535,16 @@ ul) {
14522
14535
  .pf-v6-c-form__field-group.pf-m-expanded > .pf-v6-c-form__field-group-toggle {
14523
14536
  --pf-v6-c-form__field-group-toggle-icon--Rotate: var(--pf-v6-c-form__field-group--m-expanded__toggle-icon--Rotate);
14524
14537
  }
14538
+ .pf-v6-c-form__field-group.pf-m-expanded.pf-m-expandable > .pf-v6-c-form__field-group-body {
14539
+ max-height: 9999px;
14540
+ padding-block-start: var(--pf-v6-c-form__field-group-body--PaddingBlockStart);
14541
+ padding-block-end: var(--pf-v6-c-form__field-group-body--PaddingBlockEnd);
14542
+ visibility: visible;
14543
+ opacity: 1;
14544
+ transition-delay: 0s;
14545
+ transition-duration: var(--pf-v6-c-form__field-group-body--TransitionDuration--expand--fade), var(--pf-v6-c-form__field-group-body--TransitionDuration--expand--slide), 0s, 0s, 0s, 0s;
14546
+ translate: 0 var(--pf-v6-c-form__field-group--m-expanded__field-group-body--TranslateY);
14547
+ }
14525
14548
 
14526
14549
  .pf-v6-c-form__field-group-toggle {
14527
14550
  grid-row: 1/2;
@@ -14588,9 +14611,17 @@ ul) {
14588
14611
  display: grid;
14589
14612
  grid-column: var(--pf-v6-c-form__field-group-body--GridColumn);
14590
14613
  gap: var(--pf-v6-c-form__field-group-body--Gap);
14591
- padding-block-start: var(--pf-v6-c-form__field-group-body--PaddingBlockStart);
14592
- padding-block-end: var(--pf-v6-c-form__field-group-body--PaddingBlockEnd);
14593
14614
  }
14615
+ .pf-v6-c-form__field-group.pf-m-expandable > .pf-v6-c-form__field-group-body {
14616
+ max-height: 0;
14617
+ visibility: hidden;
14618
+ opacity: 0;
14619
+ transition-delay: 0s, 0s, var(--pf-v6-c-form__field-group-body--TransitionDuration--collapse--fade), var(--pf-v6-c-form__field-group-body--TransitionDuration--collapse--fade), var(--pf-v6-c-form__field-group-body--TransitionDuration--collapse--fade), var(--pf-v6-c-form__field-group-body--TransitionDuration--collapse--fade);
14620
+ transition-duration: var(--pf-v6-c-form__field-group-body--TransitionDuration--collapse--fade), var(--pf-v6-c-form__field-group-body--TransitionDuration--collapse--slide), 0s, 0s, 0s, 0s;
14621
+ transition-property: opacity, translate, visibility, max-height, padding-block-start, padding-block-end;
14622
+ translate: 0 var(--pf-v6-c-form__field-group-body--TranslateY);
14623
+ }
14624
+
14594
14625
  .pf-v6-c-form__field-group-body > .pf-v6-c-form__field-group:first-child {
14595
14626
  --pf-v6-c-form__field-group-toggle--PaddingBlockStart: 0;
14596
14627
  --pf-v6-c-form__field-group-header--PaddingBlockStart: 0;
@@ -18826,9 +18857,13 @@ ul.pf-v6-c-list {
18826
18857
  --pf-v6-c-nav__subnav--PaddingBlockStart: var(--pf-v6-c-nav__item--RowGap);
18827
18858
  --pf-v6-c-nav__subnav--PaddingBlockEnd: var(--pf-v6-c-nav__item--RowGap);
18828
18859
  --pf-v6-c-nav__subnav--PaddingInlineStart: var(--pf-t--global--spacer--md);
18829
- --pf-v6-c-nav__subnav--TransitionDuration--expand: var(--pf-t--global--motion--duration--slide-in--default);
18830
- --pf-v6-c-nav__subnav--TransitionDuration--collapse: var(--pf-t--global--motion--duration--slide-in--short);
18860
+ --pf-v6-c-nav__subnav--TransitionDuration--expand: var(--pf-t--global--motion--duration--fade--default);
18861
+ --pf-v6-c-nav__subnav--TransitionDuration--expand--slide: 0s;
18862
+ --pf-v6-c-nav__subnav--TransitionDuration--collapse: var(--pf-t--global--motion--duration--fade--short);
18863
+ --pf-v6-c-nav__subnav--TransitionDuration--collapse--slide: 0s;
18831
18864
  --pf-v6-c-nav__subnav--TransitionTimingFunction--expand: var(--pf-t--global--motion--timing-function--default);
18865
+ --pf-v6-c-nav__subnav--TranslateY: 0;
18866
+ --pf-v6-c-nav__subnav--hidden--TranslateY: 0;
18832
18867
  --pf-v6-c-nav__scroll-button--BorderColor: var(--pf-t--global--border--color--default);
18833
18868
  --pf-v6-c-nav__scroll-button--BorderWidth: var(--pf-t--global--border--width--divider--default);
18834
18869
  --pf-v6-c-nav__scroll-button--first-of-type--c-button--BorderStartStartRadius: var(--pf-t--global--border--radius--pill);
@@ -18857,6 +18892,13 @@ ul.pf-v6-c-list {
18857
18892
  --pf-v6-c-nav--m-horizontal--m-subnav__link--PaddingInlineStart: var(--pf-t--global--spacer--md);
18858
18893
  --pf-v6-c-nav--m-horizontal--m-subnav__link--PaddingInlineEnd: var(--pf-t--global--spacer--md);
18859
18894
  }
18895
+ @media screen and (prefers-reduced-motion: no-preference) {
18896
+ .pf-v6-c-nav {
18897
+ --pf-v6-c-nav__subnav--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
18898
+ --pf-v6-c-nav__subnav--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
18899
+ --pf-v6-c-nav__subnav--hidden--TranslateY: -.5rem;
18900
+ }
18901
+ }
18860
18902
 
18861
18903
  .pf-v6-c-nav,
18862
18904
  .pf-v6-c-nav__section,
@@ -18927,24 +18969,27 @@ ul.pf-v6-c-list {
18927
18969
 
18928
18970
  .pf-v6-c-nav__subnav {
18929
18971
  --pf-v6-c-nav__list--RowGap: var(--pf-v6-c-nav__subnav--RowGap);
18930
- grid-template-rows: 1fr;
18931
- min-height: 0;
18972
+ max-height: 9999px;
18932
18973
  padding-block-start: var(--pf-v6-c-nav__subnav--PaddingBlockStart);
18933
18974
  padding-block-end: var(--pf-v6-c-nav__subnav--PaddingBlockEnd);
18934
18975
  padding-inline-start: var(--pf-v6-c-nav__subnav--PaddingInlineStart);
18935
18976
  overflow-y: clip;
18936
- transition-delay: 0s, var(--pf-v6-c-nav__subnav--TransitionDelay--expand--focus, 0s), var(--pf-v6-c-nav__subnav--TransitionDelay--expand--focus, 0s), var(--pf-v6-c-nav__subnav--TransitionDelay--expand--focus, 0s), var(--pf-v6-c-nav__subnav--TransitionDelay--expand--focus, 0s);
18977
+ visibility: visible;
18978
+ transition-delay: 0s, 0s, var(--pf-v6-c-nav__subnav--TransitionDelay--expand--focus, 0s), var(--pf-v6-c-nav__subnav--TransitionDelay--expand--focus, 0s), var(--pf-v6-c-nav__subnav--TransitionDelay--expand--focus, 0s), var(--pf-v6-c-nav__subnav--TransitionDelay--expand--focus, 0s);
18937
18979
  transition-timing-function: var(--pf-v6-c-nav__subnav--TransitionTimingFunction--expand);
18938
- transition-duration: var(--pf-v6-c-nav__subnav--TransitionDuration--expand), 0s, 0s, 0s, 0s;
18939
- transition-property: opacity, visibility, grid-template-rows, padding-block-start, padding-block-end;
18980
+ transition-duration: var(--pf-v6-c-nav__subnav--TransitionDuration--expand), var(--pf-v6-c-nav__subnav--TransitionDuration--expand--slide), 0s, 0s, 0s, 0s;
18981
+ transition-property: opacity, translate, visibility, max-height, padding-block-start, padding-block-end;
18982
+ translate: 0 var(--pf-v6-c-nav__subnav--TranslateY);
18940
18983
  }
18941
18984
  .pf-v6-c-nav__subnav[hidden] {
18942
18985
  --pf-v6-c-nav__subnav--TransitionDelay--expand--focus: var(--pf-v6-c-nav__subnav--TransitionDuration--expand);
18943
18986
  --pf-v6-c-nav__subnav--TransitionDuration--expand: var(--pf-v6-c-nav__subnav--TransitionDuration--collapse);
18987
+ --pf-v6-c-nav__subnav--TransitionDuration--expand--slide: var(--pf-v6-c-nav__subnav--TransitionDuration--collapse--slide);
18944
18988
  --pf-v6-c-nav__subnav--PaddingBlockStart: 0;
18945
18989
  --pf-v6-c-nav__subnav--PaddingBlockEnd: 0;
18990
+ --pf-v6-c-nav__subnav--TranslateY: var(--pf-v6-c-nav__subnav--hidden--TranslateY);
18946
18991
  display: grid;
18947
- grid-template-rows: 0fr;
18992
+ max-height: 0;
18948
18993
  visibility: hidden;
18949
18994
  opacity: 0;
18950
18995
  }
package/patternfly.css CHANGED
@@ -14302,6 +14302,19 @@ ul) {
14302
14302
  --pf-v6-c-form__field-group__field-group__field-group-body--GridColumn: 1 / 3;
14303
14303
  --pf-v6-c-form__field-group__field-group__field-group-toggle--field-group-body--GridColumn: 2 / 3;
14304
14304
  --pf-v6-c-form__field-group-body__field-group--last-child--MarginBlockEnd: calc(var(--pf-v6-c-form__field-group-body--PaddingBlockEnd) * -1);
14305
+ --pf-v6-c-form__field-group-body--TranslateY: 0;
14306
+ --pf-v6-c-form__field-group--m-expanded__field-group-body--TranslateY: 0;
14307
+ --pf-v6-c-form__field-group-body--TransitionDuration--expand--slide: 0s;
14308
+ --pf-v6-c-form__field-group-body--TransitionDuration--expand--fade: var(--pf-t--global--motion--duration--fade--default);
14309
+ --pf-v6-c-form__field-group-body--TransitionDuration--collapse--slide: 0s;
14310
+ --pf-v6-c-form__field-group-body--TransitionDuration--collapse--fade: var(--pf-t--global--motion--duration--fade--short);
14311
+ }
14312
+ @media screen and (prefers-reduced-motion: no-preference) {
14313
+ .pf-v6-c-form {
14314
+ --pf-v6-c-form__field-group-body--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
14315
+ --pf-v6-c-form__field-group-body--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
14316
+ --pf-v6-c-form__field-group-body--TranslateY: -.5rem;
14317
+ }
14305
14318
  }
14306
14319
 
14307
14320
  .pf-v6-c-form {
@@ -14658,6 +14671,16 @@ ul) {
14658
14671
  .pf-v6-c-form__field-group.pf-m-expanded > .pf-v6-c-form__field-group-toggle {
14659
14672
  --pf-v6-c-form__field-group-toggle-icon--Rotate: var(--pf-v6-c-form__field-group--m-expanded__toggle-icon--Rotate);
14660
14673
  }
14674
+ .pf-v6-c-form__field-group.pf-m-expanded.pf-m-expandable > .pf-v6-c-form__field-group-body {
14675
+ max-height: 9999px;
14676
+ padding-block-start: var(--pf-v6-c-form__field-group-body--PaddingBlockStart);
14677
+ padding-block-end: var(--pf-v6-c-form__field-group-body--PaddingBlockEnd);
14678
+ visibility: visible;
14679
+ opacity: 1;
14680
+ transition-delay: 0s;
14681
+ transition-duration: var(--pf-v6-c-form__field-group-body--TransitionDuration--expand--fade), var(--pf-v6-c-form__field-group-body--TransitionDuration--expand--slide), 0s, 0s, 0s, 0s;
14682
+ translate: 0 var(--pf-v6-c-form__field-group--m-expanded__field-group-body--TranslateY);
14683
+ }
14661
14684
 
14662
14685
  .pf-v6-c-form__field-group-toggle {
14663
14686
  grid-row: 1/2;
@@ -14724,9 +14747,17 @@ ul) {
14724
14747
  display: grid;
14725
14748
  grid-column: var(--pf-v6-c-form__field-group-body--GridColumn);
14726
14749
  gap: var(--pf-v6-c-form__field-group-body--Gap);
14727
- padding-block-start: var(--pf-v6-c-form__field-group-body--PaddingBlockStart);
14728
- padding-block-end: var(--pf-v6-c-form__field-group-body--PaddingBlockEnd);
14729
14750
  }
14751
+ .pf-v6-c-form__field-group.pf-m-expandable > .pf-v6-c-form__field-group-body {
14752
+ max-height: 0;
14753
+ visibility: hidden;
14754
+ opacity: 0;
14755
+ transition-delay: 0s, 0s, var(--pf-v6-c-form__field-group-body--TransitionDuration--collapse--fade), var(--pf-v6-c-form__field-group-body--TransitionDuration--collapse--fade), var(--pf-v6-c-form__field-group-body--TransitionDuration--collapse--fade), var(--pf-v6-c-form__field-group-body--TransitionDuration--collapse--fade);
14756
+ transition-duration: var(--pf-v6-c-form__field-group-body--TransitionDuration--collapse--fade), var(--pf-v6-c-form__field-group-body--TransitionDuration--collapse--slide), 0s, 0s, 0s, 0s;
14757
+ transition-property: opacity, translate, visibility, max-height, padding-block-start, padding-block-end;
14758
+ translate: 0 var(--pf-v6-c-form__field-group-body--TranslateY);
14759
+ }
14760
+
14730
14761
  .pf-v6-c-form__field-group-body > .pf-v6-c-form__field-group:first-child {
14731
14762
  --pf-v6-c-form__field-group-toggle--PaddingBlockStart: 0;
14732
14763
  --pf-v6-c-form__field-group-header--PaddingBlockStart: 0;
@@ -18962,9 +18993,13 @@ ul.pf-v6-c-list {
18962
18993
  --pf-v6-c-nav__subnav--PaddingBlockStart: var(--pf-v6-c-nav__item--RowGap);
18963
18994
  --pf-v6-c-nav__subnav--PaddingBlockEnd: var(--pf-v6-c-nav__item--RowGap);
18964
18995
  --pf-v6-c-nav__subnav--PaddingInlineStart: var(--pf-t--global--spacer--md);
18965
- --pf-v6-c-nav__subnav--TransitionDuration--expand: var(--pf-t--global--motion--duration--slide-in--default);
18966
- --pf-v6-c-nav__subnav--TransitionDuration--collapse: var(--pf-t--global--motion--duration--slide-in--short);
18996
+ --pf-v6-c-nav__subnav--TransitionDuration--expand: var(--pf-t--global--motion--duration--fade--default);
18997
+ --pf-v6-c-nav__subnav--TransitionDuration--expand--slide: 0s;
18998
+ --pf-v6-c-nav__subnav--TransitionDuration--collapse: var(--pf-t--global--motion--duration--fade--short);
18999
+ --pf-v6-c-nav__subnav--TransitionDuration--collapse--slide: 0s;
18967
19000
  --pf-v6-c-nav__subnav--TransitionTimingFunction--expand: var(--pf-t--global--motion--timing-function--default);
19001
+ --pf-v6-c-nav__subnav--TranslateY: 0;
19002
+ --pf-v6-c-nav__subnav--hidden--TranslateY: 0;
18968
19003
  --pf-v6-c-nav__scroll-button--BorderColor: var(--pf-t--global--border--color--default);
18969
19004
  --pf-v6-c-nav__scroll-button--BorderWidth: var(--pf-t--global--border--width--divider--default);
18970
19005
  --pf-v6-c-nav__scroll-button--first-of-type--c-button--BorderStartStartRadius: var(--pf-t--global--border--radius--pill);
@@ -18993,6 +19028,13 @@ ul.pf-v6-c-list {
18993
19028
  --pf-v6-c-nav--m-horizontal--m-subnav__link--PaddingInlineStart: var(--pf-t--global--spacer--md);
18994
19029
  --pf-v6-c-nav--m-horizontal--m-subnav__link--PaddingInlineEnd: var(--pf-t--global--spacer--md);
18995
19030
  }
19031
+ @media screen and (prefers-reduced-motion: no-preference) {
19032
+ .pf-v6-c-nav {
19033
+ --pf-v6-c-nav__subnav--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
19034
+ --pf-v6-c-nav__subnav--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
19035
+ --pf-v6-c-nav__subnav--hidden--TranslateY: -.5rem;
19036
+ }
19037
+ }
18996
19038
 
18997
19039
  .pf-v6-c-nav,
18998
19040
  .pf-v6-c-nav__section,
@@ -19063,24 +19105,27 @@ ul.pf-v6-c-list {
19063
19105
 
19064
19106
  .pf-v6-c-nav__subnav {
19065
19107
  --pf-v6-c-nav__list--RowGap: var(--pf-v6-c-nav__subnav--RowGap);
19066
- grid-template-rows: 1fr;
19067
- min-height: 0;
19108
+ max-height: 9999px;
19068
19109
  padding-block-start: var(--pf-v6-c-nav__subnav--PaddingBlockStart);
19069
19110
  padding-block-end: var(--pf-v6-c-nav__subnav--PaddingBlockEnd);
19070
19111
  padding-inline-start: var(--pf-v6-c-nav__subnav--PaddingInlineStart);
19071
19112
  overflow-y: clip;
19072
- transition-delay: 0s, var(--pf-v6-c-nav__subnav--TransitionDelay--expand--focus, 0s), var(--pf-v6-c-nav__subnav--TransitionDelay--expand--focus, 0s), var(--pf-v6-c-nav__subnav--TransitionDelay--expand--focus, 0s), var(--pf-v6-c-nav__subnav--TransitionDelay--expand--focus, 0s);
19113
+ visibility: visible;
19114
+ transition-delay: 0s, 0s, var(--pf-v6-c-nav__subnav--TransitionDelay--expand--focus, 0s), var(--pf-v6-c-nav__subnav--TransitionDelay--expand--focus, 0s), var(--pf-v6-c-nav__subnav--TransitionDelay--expand--focus, 0s), var(--pf-v6-c-nav__subnav--TransitionDelay--expand--focus, 0s);
19073
19115
  transition-timing-function: var(--pf-v6-c-nav__subnav--TransitionTimingFunction--expand);
19074
- transition-duration: var(--pf-v6-c-nav__subnav--TransitionDuration--expand), 0s, 0s, 0s, 0s;
19075
- transition-property: opacity, visibility, grid-template-rows, padding-block-start, padding-block-end;
19116
+ transition-duration: var(--pf-v6-c-nav__subnav--TransitionDuration--expand), var(--pf-v6-c-nav__subnav--TransitionDuration--expand--slide), 0s, 0s, 0s, 0s;
19117
+ transition-property: opacity, translate, visibility, max-height, padding-block-start, padding-block-end;
19118
+ translate: 0 var(--pf-v6-c-nav__subnav--TranslateY);
19076
19119
  }
19077
19120
  .pf-v6-c-nav__subnav[hidden] {
19078
19121
  --pf-v6-c-nav__subnav--TransitionDelay--expand--focus: var(--pf-v6-c-nav__subnav--TransitionDuration--expand);
19079
19122
  --pf-v6-c-nav__subnav--TransitionDuration--expand: var(--pf-v6-c-nav__subnav--TransitionDuration--collapse);
19123
+ --pf-v6-c-nav__subnav--TransitionDuration--expand--slide: var(--pf-v6-c-nav__subnav--TransitionDuration--collapse--slide);
19080
19124
  --pf-v6-c-nav__subnav--PaddingBlockStart: 0;
19081
19125
  --pf-v6-c-nav__subnav--PaddingBlockEnd: 0;
19126
+ --pf-v6-c-nav__subnav--TranslateY: var(--pf-v6-c-nav__subnav--hidden--TranslateY);
19082
19127
  display: grid;
19083
- grid-template-rows: 0fr;
19128
+ max-height: 0;
19084
19129
  visibility: hidden;
19085
19130
  opacity: 0;
19086
19131
  }