@patternfly/patternfly 6.0.0-alpha.20 → 6.0.0-alpha.22

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 (17) hide show
  1. package/base/_common.scss +8 -4
  2. package/base/patternfly-common.css +8 -4
  3. package/base/patternfly-variables.css +10 -3
  4. package/base/tokens/_tokens-font.scss +12 -3
  5. package/components/ExpandableSection/expandable-section.css +64 -55
  6. package/components/ExpandableSection/expandable-section.scss +72 -68
  7. package/docs/components/ExpandableSection/examples/ExpandableSection.md +47 -24
  8. package/package.json +1 -1
  9. package/patternfly-base-no-globals-theme-dark-unversioned.css +18 -7
  10. package/patternfly-base-no-globals.css +18 -7
  11. package/patternfly-base-theme-dark-unversioned.css +18 -7
  12. package/patternfly-base.css +18 -7
  13. package/patternfly-no-globals.css +82 -62
  14. package/patternfly-theme-dark-unversioned.css +82 -62
  15. package/patternfly.css +82 -62
  16. package/patternfly.min.css +1 -1
  17. package/patternfly.min.css.map +1 -1
package/patternfly-theme-dark-unversioned.css CHANGED
@@ -873,9 +873,9 @@
873
873
  }
874
874
 
875
875
  :root {
876
- --pf-t--global--font--family--100: redhattext;
877
- --pf-t--global--font--family--200: redhatdisplay;
878
- --pf-t--global--font--family--300: redhatmono;
876
+ --pf-t--global--font--family--100: redhattextvf, redhattext, helvetica, arial, sans-serif;
877
+ --pf-t--global--font--family--200: redhatdisplayvf, redhatdisplay, helvetica, arial, sans-serif;
878
+ --pf-t--global--font--family--300: redhatmonovf, redhatmono, liberationmono, consolas, sfmono-regular, menlo, monaco, courier new, monospace;
879
879
  --pf-t--global--font--line-height--100: 1.3;
880
880
  --pf-t--global--font--line-height--200: 1.5;
881
881
  --pf-t--global--font--weight--body--100: 400;
@@ -910,6 +910,13 @@
910
910
  --pf-t--global--font--size--heading--lg: var(--pf-t--global--font--size--heading--400);
911
911
  --pf-t--global--font--size--heading--xl: var(--pf-t--global--font--size--heading--500);
912
912
  --pf-t--global--font--size--heading--2xl: var(--pf-t--global--font--size--heading--600);
913
+ --pf-t--global--font--family--body--legacy: redhattext, helvetica, arial, sans-serif;
914
+ --pf-t--global--font--family--heading--legacy: redhatdisplay, helvetica, arial, sans-serif;
915
+ --pf-t--global--font--family--mono--legacy: redhatmono, liberationmono, consolas, sfmono-regular, menlo, monaco, courier new, monospace;
916
+ --pf-t--global--font--weight--body--legacy: 400;
917
+ --pf-t--global--font--weight--body--bold--legacy: 700;
918
+ --pf-t--global--font--weight--heading--legacy: 400;
919
+ --pf-t--global--font--weight--heading--bold--legacy: 700;
913
920
  --pf-t--global--text-decoration--100: none;
914
921
  --pf-t--global--text-decoration--200: underline;
915
922
  --pf-t--global--link--text-decoration: var(--pf-t--global--text-decoration--200);
@@ -1411,10 +1418,14 @@
1411
1418
  font-variant-numeric: tabular-nums;
1412
1419
  }
1413
1420
 
1414
- .pf-v5-m-vf-font {
1415
- --pf-v5-global--FontFamily--text: var(--pf-v5-global--FontFamily--text--vf);
1416
- --pf-v5-global--FontFamily--heading: var(--pf-v5-global--FontFamily--heading--vf);
1417
- --pf-v5-global--FontFamily--monospace: var(--pf-v5-global--FontFamily--monospace--vf);
1421
+ .pf-v5-m-legacy-font {
1422
+ --pf-t--global--font--family--body: var(--pf-t--global--font--family--body--legacy);
1423
+ --pf-t--global--font--family--heading: var(--pf-t--global--font--family--heading--legacy);
1424
+ --pf-t--global--font--family--mono: var(--pf-t--global--font--family--mono--legacy);
1425
+ --pf-t--global--font--weight--body: var(--pf-t--global--font--weight--body--legacy);
1426
+ --pf-t--global--font--weight--body--bold: var(--pf-t--global--font--weight--body--bold--legacy);
1427
+ --pf-t--global--font--weight--heading: var(--pf-t--global--font--weight--heading--legacy);
1428
+ --pf-t--global--font--weight--heading--bold: var(--pf-t--global--font--weight--heading--bold--legacy);
1418
1429
  }
1419
1430
 
1420
1431
  .pf-v5-m-dir-rtl {
@@ -15050,53 +15061,64 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
15050
15061
  justify-content: center;
15051
15062
  }
15052
15063
 
15053
- .pf-v5-c-expandable-section {
15054
- --pf-v5-c-expandable-section__toggle--PaddingTop: var(--pf-v5-global--spacer--form-element);
15055
- --pf-v5-c-expandable-section__toggle--PaddingRight: var(--pf-v5-global--spacer--md);
15056
- --pf-v5-c-expandable-section__toggle--PaddingBottom: var(--pf-v5-global--spacer--form-element);
15057
- --pf-v5-c-expandable-section__toggle--PaddingLeft: 0;
15058
- --pf-v5-c-expandable-section__toggle--MarginTop: 0;
15059
- --pf-v5-c-expandable-section__toggle--Color: var(--pf-v5-global--link--Color);
15060
- --pf-v5-c-expandable-section__toggle--hover--Color: var(--pf-v5-global--link--Color--hover);
15061
- --pf-v5-c-expandable-section__toggle--active--Color: var(--pf-v5-global--link--Color--hover);
15062
- --pf-v5-c-expandable-section__toggle--focus--Color: var(--pf-v5-global--link--Color--hover);
15063
- --pf-v5-c-expandable-section__toggle--m-expanded--Color: var(--pf-v5-global--link--Color--hover);
15064
+ :root {
15065
+ --pf-v5-c-expandable-section__toggle--PaddingTop: var(--pf-t--global--spacer--sm);
15066
+ --pf-v5-c-expandable-section__toggle--PaddingRight: var(--pf-t--global--spacer--md);
15067
+ --pf-v5-c-expandable-section__toggle--PaddingBottom: var(--pf-t--global--spacer--sm);
15068
+ --pf-v5-c-expandable-section__toggle--PaddingLeft: var(--pf-t--global--spacer--sm);
15069
+ --pf-v5-c-expandable-section__toggle--Color: var(--pf-t--global--color--brand--default);
15070
+ --pf-v5-c-expandable-section__toggle--hover--Color: var(--pf-t--global--color--brand--hover);
15071
+ --pf-v5-c-expandable-section__toggle--active--Color: var(--pf-t--global--color--brand--hover);
15072
+ --pf-v5-c-expandable-section__toggle--focus--Color: var(--pf-t--global--color--brand--hover);
15073
+ --pf-v5-c-expandable-section__toggle--m-expanded--Color: var(--pf-t--global--color--brand--hover);
15064
15074
  --pf-v5-c-expandable-section__toggle--BackgroundColor: transparent;
15075
+ --pf-v5-c-expandable-section__toggle--ColumnGap: calc(var(--pf-t--global--spacer--xs) + var(--pf-t--global--spacer--sm));
15065
15076
  --pf-v5-c-expandable-section__toggle-icon--MinWidth: 1em;
15066
- --pf-v5-c-expandable-section__toggle-icon--Color: var(--pf-v5-global--Color--100);
15077
+ --pf-v5-c-expandable-section__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
15067
15078
  --pf-v5-c-expandable-section__toggle-icon--Transition: .2s ease-in 0s;
15068
15079
  --pf-v5-c-expandable-section__toggle-icon--Rotate: 0;
15069
15080
  --pf-v5-c-expandable-section__toggle-icon--m-expand-top--Rotate: 0;
15070
15081
  --pf-v5-c-expandable-section--m-expanded__toggle-icon--Rotate: 90deg;
15071
15082
  --pf-v5-c-expandable-section--m-expanded__toggle-icon--m-expand-top--Rotate: -90deg;
15072
- --pf-v5-c-expandable-section__toggle-text--MarginLeft: calc(var(--pf-v5-global--spacer--xs) + var(--pf-v5-global--spacer--sm));
15073
- --pf-v5-c-expandable-section__content--MarginTop: var(--pf-v5-global--spacer--md);
15083
+ --pf-v5-c-expandable-section__content--PaddingTop: var(--pf-t--global--spacer--sm);
15084
+ --pf-v5-c-expandable-section__content--PaddingRight: var(--pf-t--global--spacer--sm);
15085
+ --pf-v5-c-expandable-section__content--PaddingBottom: var(--pf-t--global--spacer--sm);
15086
+ --pf-v5-c-expandable-section__content--PaddingLeft: var(--pf-t--global--spacer--sm);
15074
15087
  --pf-v5-c-expandable-section__content--MaxWidth: auto;
15075
15088
  --pf-v5-c-expandable-section--m-limit-width__content--MaxWidth: 46.875rem;
15076
- --pf-v5-c-expandable-section--m-display-lg--BoxShadow: var(--pf-v5-global--BoxShadow--md);
15077
- --pf-v5-c-expandable-section--m-display-lg__toggle--PaddingTop: var(--pf-v5-global--spacer--md);
15078
- --pf-v5-c-expandable-section--m-display-lg__toggle--PaddingRight: var(--pf-v5-global--spacer--md);
15079
- --pf-v5-c-expandable-section--m-display-lg__toggle--PaddingBottom: var(--pf-v5-global--spacer--md);
15080
- --pf-v5-c-expandable-section--m-display-lg__toggle--PaddingLeft: var(--pf-v5-global--spacer--md);
15081
- --pf-v5-c-expandable-section--m-display-lg__content--MarginTop: 0;
15082
- --pf-v5-c-expandable-section--m-display-lg__content--PaddingRight: var(--pf-v5-global--spacer--lg);
15083
- --pf-v5-c-expandable-section--m-display-lg__content--PaddingBottom: var(--pf-v5-global--spacer--lg);
15084
- --pf-v5-c-expandable-section--m-display-lg__content--PaddingLeft: var(--pf-v5-global--spacer--lg);
15085
- --pf-v5-c-expandable-section--m-display-lg--after--BackgroundColor: transparent;
15086
- --pf-v5-c-expandable-section--m-display-lg--after--Width: var(--pf-v5-global--BorderWidth--lg);
15087
- --pf-v5-c-expandable-section--m-display-lg--m-expanded--after--BackgroundColor: var(--pf-v5-global--primary-color--100);
15088
- --pf-v5-c-expandable-section--m-indented__content--PaddingLeft: calc(var(--pf-v5-c-expandable-section__toggle-text--MarginLeft) + var(--pf-v5-c-expandable-section__toggle-icon--MinWidth));
15089
+ --pf-v5-c-expandable-section--m-display-lg--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
15090
+ --pf-v5-c-expandable-section--m-display-lg--BorderColor: var(--pf-t--global--border--color--default);
15091
+ --pf-v5-c-expandable-section--m-display-lg--BorderRadius: var(--pf-t--global--border--radius--medium);
15092
+ --pf-v5-c-expandable-section--m-display-lg__toggle--PaddingTop: var(--pf-t--global--spacer--md);
15093
+ --pf-v5-c-expandable-section--m-display-lg__toggle--PaddingRight: var(--pf-t--global--spacer--lg);
15094
+ --pf-v5-c-expandable-section--m-display-lg__toggle--PaddingBottom: var(--pf-t--global--spacer--md);
15095
+ --pf-v5-c-expandable-section--m-display-lg__toggle--PaddingLeft: var(--pf-t--global--spacer--lg);
15096
+ --pf-v5-c-expandable-section--m-display-lg__toggle--BorderRadius: var(--pf-t--global--border--radius--medium);
15097
+ --pf-v5-c-expandable-section--m-display-lg__toggle--Width: 100%;
15098
+ --pf-v5-c-expandable-section--m-display-lg__toggle--hover--BackgroundColor: var(--pf-t--global--background--color--secondary--hover);
15099
+ --pf-v5-c-expandable-section--m-display-lg__toggle--active--BackgroundColor: var(--pf-t--global--background--color--secondary--hover);
15100
+ --pf-v5-c-expandable-section--m-display-lg__toggle--focus--BackgroundColor: var(--pf-t--global--background--color--secondary--hover);
15101
+ --pf-v5-c-expandable-section--m-display-lg__content--PaddingRight: var(--pf-t--global--spacer--lg);
15102
+ --pf-v5-c-expandable-section--m-display-lg__content--PaddingBottom: var(--pf-t--global--spacer--md);
15103
+ --pf-v5-c-expandable-section--m-display-lg__content--PaddingLeft: var(--pf-t--global--spacer--lg);
15104
+ --pf-v5-c-expandable-section--m-expanded--m-display-lg__toggle--BorderRadius: var(--pf-t--global--border--radius--medium) var(--pf-t--global--border--radius--medium) 0 0;
15105
+ --pf-v5-c-expandable-section--m-indented__content--PaddingLeft--base: calc(var(--pf-v5-c-expandable-section__toggle--ColumnGap) + var(--pf-v5-c-expandable-section__toggle-icon--MinWidth));
15106
+ --pf-v5-c-expandable-section--m-indented__content--PaddingLeft: calc(var(--pf-v5-c-expandable-section--m-indented__content--PaddingLeft--base) + var(--pf-v5-c-expandable-section__toggle--PaddingLeft));
15107
+ --pf-v5-c-expandable-section--m-display-lg--m-indented__content--PaddingLeft: calc(var(--pf-v5-c-expandable-section--m-indented__content--PaddingLeft--base) + var(--pf-v5-c-expandable-section--m-display-lg__content--PaddingLeft));
15108
+ --pf-v5-c-expandable-section--m-truncate--PaddingTop: var(--pf-t--global--spacer--sm);
15109
+ --pf-v5-c-expandable-section--m-truncate--PaddingRight: var(--pf-t--global--spacer--md);
15110
+ --pf-v5-c-expandable-section--m-truncate--PaddingBottom: var(--pf-t--global--spacer--sm);
15111
+ --pf-v5-c-expandable-section--m-truncate--PaddingLeft: var(--pf-t--global--spacer--md);
15112
+ --pf-v5-c-expandable-section--m-truncate__toggle--PaddingBottom: var(--pf-t--global--spacer--sm);
15089
15113
  --pf-v5-c-expandable-section--m-truncate__content--LineClamp: 3;
15090
- --pf-v5-c-expandable-section--m-truncate__toggle--MarginTop: var(--pf-v5-global--spacer--xs);
15091
15114
  }
15115
+
15092
15116
  .pf-v5-c-expandable-section.pf-m-expanded {
15093
15117
  --pf-v5-c-expandable-section__toggle--Color: var(--pf-v5-c-expandable-section__toggle--m-expanded--Color);
15094
15118
  --pf-v5-c-expandable-section__toggle-icon--Rotate: var(--pf-v5-c-expandable-section--m-expanded__toggle-icon--Rotate);
15095
15119
  --pf-v5-c-expandable-section__toggle-icon--m-expand-top--Rotate: var(--pf-v5-c-expandable-section--m-expanded__toggle-icon--m-expand-top--Rotate);
15096
15120
  --pf-v5-c-expandable-section--m-display-lg--after--BackgroundColor: var(--pf-v5-c-expandable-section--m-display-lg--m-expanded--after--BackgroundColor);
15097
- }
15098
- .pf-v5-c-expandable-section.pf-m-detached, .pf-v5-c-expandable-section.pf-m-truncate {
15099
- --pf-v5-c-expandable-section__content--MarginTop: 0;
15121
+ --pf-v5-c-expandable-section--m-display-lg__toggle--BorderRadius: var(--pf-v5-c-expandable-section--m-expanded--m-display-lg__toggle--BorderRadius);
15100
15122
  }
15101
15123
  .pf-v5-c-expandable-section.pf-m-limit-width {
15102
15124
  --pf-v5-c-expandable-section__content--MaxWidth: var(--pf-v5-c-expandable-section--m-limit-width__content--MaxWidth);
@@ -15106,31 +15128,31 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
15106
15128
  --pf-v5-c-expandable-section__toggle--PaddingRight: var(--pf-v5-c-expandable-section--m-display-lg__toggle--PaddingRight);
15107
15129
  --pf-v5-c-expandable-section__toggle--PaddingBottom: var(--pf-v5-c-expandable-section--m-display-lg__toggle--PaddingBottom);
15108
15130
  --pf-v5-c-expandable-section__toggle--PaddingLeft: var(--pf-v5-c-expandable-section--m-display-lg__toggle--PaddingLeft);
15131
+ --pf-v5-c-expandable-section__toggle--hover--BackgroundColor: var(--pf-v5-c-expandable-section--m-display-lg__toggle--hover--BackgroundColor);
15132
+ --pf-v5-c-expandable-section__toggle--active--BackgroundColor: var(--pf-v5-c-expandable-section--m-display-lg__toggle--active--BackgroundColor);
15133
+ --pf-v5-c-expandable-section__toggle--focus--BackgroundColor: var(--pf-v5-c-expandable-section--m-display-lg__toggle--focus--BackgroundColor);
15134
+ --pf-v5-c-expandable-section__toggle--BorderRadius: var(--pf-v5-c-expandable-section--m-display-lg__toggle--BorderRadius);
15135
+ --pf-v5-c-expandable-section__toggle--Width: var(--pf-v5-c-expandable-section--m-display-lg__toggle--Width);
15109
15136
  --pf-v5-c-expandable-section__content--PaddingRight: var(--pf-v5-c-expandable-section--m-display-lg__content--PaddingRight);
15110
15137
  --pf-v5-c-expandable-section__content--PaddingBottom: var(--pf-v5-c-expandable-section--m-display-lg__content--PaddingBottom);
15111
15138
  --pf-v5-c-expandable-section__content--PaddingLeft: var(--pf-v5-c-expandable-section--m-display-lg__content--PaddingLeft);
15112
- --pf-v5-c-expandable-section__content--MarginTop: var(--pf-v5-c-expandable-section--m-display-lg__content--MarginTop);
15113
- position: relative;
15114
- box-shadow: var(--pf-v5-c-expandable-section--m-display-lg--BoxShadow);
15115
- }
15116
- .pf-v5-c-expandable-section.pf-m-display-lg::after {
15117
- position: absolute;
15118
- inset-block-start: 0;
15119
- inset-block-end: 0;
15120
- inset-inline-start: 0;
15121
- width: var(--pf-v5-c-expandable-section--m-display-lg--after--Width);
15122
- content: "";
15123
- background-color: var(--pf-v5-c-expandable-section--m-display-lg--after--BackgroundColor);
15139
+ --pf-v5-c-expandable-section--m-indented__content--PaddingLeft: var(--pf-v5-c-expandable-section--m-display-lg--m-indented__content--PaddingLeft);
15140
+ background-color: var(--pf-v5-c-expandable-section--m-display-lg--BackgroundColor);
15141
+ border: solid 1px var(--pf-v5-c-expandable-section--m-display-lg--BorderColor);
15142
+ border-radius: var(--pf-v5-c-expandable-section--m-display-lg--BorderRadius);
15124
15143
  }
15125
15144
  .pf-v5-c-expandable-section.pf-m-indented {
15126
15145
  --pf-v5-c-expandable-section__content--PaddingLeft: var(--pf-v5-c-expandable-section--m-indented__content--PaddingLeft);
15127
15146
  }
15128
15147
  .pf-v5-c-expandable-section.pf-m-truncate {
15129
- --pf-v5-c-expandable-section__toggle--MarginTop: var(--pf-v5-c-expandable-section--m-truncate__toggle--MarginTop);
15130
15148
  --pf-v5-c-expandable-section__toggle--PaddingTop: 0;
15131
15149
  --pf-v5-c-expandable-section__toggle--PaddingRight: 0;
15132
- --pf-v5-c-expandable-section__toggle--PaddingBottom: 0;
15133
- --pf-v5-c-expandable-section__toggle-text--MarginLeft: 0;
15150
+ --pf-v5-c-expandable-section__toggle--PaddingBottom: var(--pf-v5-c-expandable-section--m-truncate__toggle--PaddingBottom);
15151
+ --pf-v5-c-expandable-section__toggle--PaddingLeft: 0;
15152
+ --pf-v5-c-expandable-section__content--PaddingTop: 0;
15153
+ --pf-v5-c-expandable-section__content--PaddingRight: 0;
15154
+ --pf-v5-c-expandable-section__content--PaddingBottom: 0;
15155
+ --pf-v5-c-expandable-section__content--PaddingLeft: 0;
15134
15156
  }
15135
15157
  .pf-v5-c-expandable-section.pf-m-truncate:not(.pf-m-expanded) .pf-v5-c-expandable-section__content {
15136
15158
  display: -webkit-box;
@@ -15138,29 +15160,31 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
15138
15160
  -webkit-line-clamp: var(--pf-v5-c-expandable-section--m-truncate__content--LineClamp);
15139
15161
  overflow: hidden;
15140
15162
  }
15141
- .pf-v5-c-expandable-section.pf-m-detached {
15142
- --pf-v5-c-expandable-section--m-truncate__toggle--MarginTop: 0;
15143
- }
15144
15163
 
15145
15164
  .pf-v5-c-expandable-section__toggle {
15146
15165
  display: flex;
15166
+ column-gap: var(--pf-v5-c-expandable-section__toggle--ColumnGap);
15167
+ width: var(--pf-v5-c-expandable-section__toggle--Width, initial);
15147
15168
  padding-block-start: var(--pf-v5-c-expandable-section__toggle--PaddingTop);
15148
15169
  padding-block-end: var(--pf-v5-c-expandable-section__toggle--PaddingBottom);
15149
15170
  padding-inline-start: var(--pf-v5-c-expandable-section__toggle--PaddingLeft);
15150
15171
  padding-inline-end: var(--pf-v5-c-expandable-section__toggle--PaddingRight);
15151
- margin-block-start: var(--pf-v5-c-expandable-section__toggle--MarginTop);
15152
15172
  color: var(--pf-v5-c-expandable-section__toggle--Color);
15153
15173
  background-color: var(--pf-v5-c-expandable-section__toggle--BackgroundColor);
15154
15174
  border: none;
15175
+ border-radius: var(--pf-v5-c-expandable-section__toggle--BorderRadius, 0);
15155
15176
  }
15156
15177
  .pf-v5-c-expandable-section__toggle:hover {
15157
15178
  --pf-v5-c-expandable-section__toggle--Color: var(--pf-v5-c-expandable-section__toggle--hover--Color);
15179
+ --pf-v5-c-expandable-section__toggle--BackgroundColor: var(--pf-v5-c-expandable-section__toggle--hover--BackgroundColor, initial);
15158
15180
  }
15159
15181
  .pf-v5-c-expandable-section__toggle:active, .pf-v5-c-expandable-section__toggle.pf-m-active {
15160
15182
  --pf-v5-c-expandable-section__toggle--Color: var(--pf-v5-c-expandable-section__toggle--active--Color);
15183
+ --pf-v5-c-expandable-section__toggle--BackgroundColor: var(--pf-v5-c-expandable-section__toggle--active--BackgroundColor, initial);
15161
15184
  }
15162
15185
  .pf-v5-c-expandable-section__toggle:focus {
15163
15186
  --pf-v5-c-expandable-section__toggle--Color: var(--pf-v5-c-expandable-section__toggle--focus--Color);
15187
+ --pf-v5-c-expandable-section__toggle--BackgroundColor: var(--pf-v5-c-expandable-section__toggle--focus--BackgroundColor, initial);
15164
15188
  }
15165
15189
 
15166
15190
  .pf-v5-c-expandable-section__toggle-icon {
@@ -15177,16 +15201,12 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
15177
15201
  --pf-v5-c-expandable-section__toggle-icon--Rotate: var(--pf-v5-c-expandable-section__toggle-icon--m-expand-top--Rotate);
15178
15202
  }
15179
15203
 
15180
- .pf-v5-c-expandable-section__toggle-text {
15181
- margin-inline-start: var(--pf-v5-c-expandable-section__toggle-text--MarginLeft);
15182
- }
15183
-
15184
15204
  .pf-v5-c-expandable-section__content {
15185
15205
  max-width: var(--pf-v5-c-expandable-section__content--MaxWidth);
15206
+ padding-block-start: var(--pf-v5-c-expandable-section__content--PaddingTop);
15186
15207
  padding-block-end: var(--pf-v5-c-expandable-section__content--PaddingBottom);
15187
15208
  padding-inline-start: var(--pf-v5-c-expandable-section__content--PaddingLeft);
15188
15209
  padding-inline-end: var(--pf-v5-c-expandable-section__content--PaddingRight);
15189
- margin-block-start: var(--pf-v5-c-expandable-section__content--MarginTop);
15190
15210
  }
15191
15211
 
15192
15212
  .pf-v5-c-file-upload {
package/patternfly.css CHANGED
@@ -873,9 +873,9 @@
873
873
  }
874
874
 
875
875
  :root {
876
- --pf-t--global--font--family--100: redhattext;
877
- --pf-t--global--font--family--200: redhatdisplay;
878
- --pf-t--global--font--family--300: redhatmono;
876
+ --pf-t--global--font--family--100: redhattextvf, redhattext, helvetica, arial, sans-serif;
877
+ --pf-t--global--font--family--200: redhatdisplayvf, redhatdisplay, helvetica, arial, sans-serif;
878
+ --pf-t--global--font--family--300: redhatmonovf, redhatmono, liberationmono, consolas, sfmono-regular, menlo, monaco, courier new, monospace;
879
879
  --pf-t--global--font--line-height--100: 1.3;
880
880
  --pf-t--global--font--line-height--200: 1.5;
881
881
  --pf-t--global--font--weight--body--100: 400;
@@ -910,6 +910,13 @@
910
910
  --pf-t--global--font--size--heading--lg: var(--pf-t--global--font--size--heading--400);
911
911
  --pf-t--global--font--size--heading--xl: var(--pf-t--global--font--size--heading--500);
912
912
  --pf-t--global--font--size--heading--2xl: var(--pf-t--global--font--size--heading--600);
913
+ --pf-t--global--font--family--body--legacy: redhattext, helvetica, arial, sans-serif;
914
+ --pf-t--global--font--family--heading--legacy: redhatdisplay, helvetica, arial, sans-serif;
915
+ --pf-t--global--font--family--mono--legacy: redhatmono, liberationmono, consolas, sfmono-regular, menlo, monaco, courier new, monospace;
916
+ --pf-t--global--font--weight--body--legacy: 400;
917
+ --pf-t--global--font--weight--body--bold--legacy: 700;
918
+ --pf-t--global--font--weight--heading--legacy: 400;
919
+ --pf-t--global--font--weight--heading--bold--legacy: 700;
913
920
  --pf-t--global--text-decoration--100: none;
914
921
  --pf-t--global--text-decoration--200: underline;
915
922
  --pf-t--global--link--text-decoration: var(--pf-t--global--text-decoration--200);
@@ -1411,10 +1418,14 @@
1411
1418
  font-variant-numeric: tabular-nums;
1412
1419
  }
1413
1420
 
1414
- .pf-v5-m-vf-font {
1415
- --pf-v5-global--FontFamily--text: var(--pf-v5-global--FontFamily--text--vf);
1416
- --pf-v5-global--FontFamily--heading: var(--pf-v5-global--FontFamily--heading--vf);
1417
- --pf-v5-global--FontFamily--monospace: var(--pf-v5-global--FontFamily--monospace--vf);
1421
+ .pf-v5-m-legacy-font {
1422
+ --pf-t--global--font--family--body: var(--pf-t--global--font--family--body--legacy);
1423
+ --pf-t--global--font--family--heading: var(--pf-t--global--font--family--heading--legacy);
1424
+ --pf-t--global--font--family--mono: var(--pf-t--global--font--family--mono--legacy);
1425
+ --pf-t--global--font--weight--body: var(--pf-t--global--font--weight--body--legacy);
1426
+ --pf-t--global--font--weight--body--bold: var(--pf-t--global--font--weight--body--bold--legacy);
1427
+ --pf-t--global--font--weight--heading: var(--pf-t--global--font--weight--heading--legacy);
1428
+ --pf-t--global--font--weight--heading--bold: var(--pf-t--global--font--weight--heading--bold--legacy);
1418
1429
  }
1419
1430
 
1420
1431
  .pf-v5-m-dir-rtl {
@@ -15050,53 +15061,64 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
15050
15061
  justify-content: center;
15051
15062
  }
15052
15063
 
15053
- .pf-v5-c-expandable-section {
15054
- --pf-v5-c-expandable-section__toggle--PaddingTop: var(--pf-v5-global--spacer--form-element);
15055
- --pf-v5-c-expandable-section__toggle--PaddingRight: var(--pf-v5-global--spacer--md);
15056
- --pf-v5-c-expandable-section__toggle--PaddingBottom: var(--pf-v5-global--spacer--form-element);
15057
- --pf-v5-c-expandable-section__toggle--PaddingLeft: 0;
15058
- --pf-v5-c-expandable-section__toggle--MarginTop: 0;
15059
- --pf-v5-c-expandable-section__toggle--Color: var(--pf-v5-global--link--Color);
15060
- --pf-v5-c-expandable-section__toggle--hover--Color: var(--pf-v5-global--link--Color--hover);
15061
- --pf-v5-c-expandable-section__toggle--active--Color: var(--pf-v5-global--link--Color--hover);
15062
- --pf-v5-c-expandable-section__toggle--focus--Color: var(--pf-v5-global--link--Color--hover);
15063
- --pf-v5-c-expandable-section__toggle--m-expanded--Color: var(--pf-v5-global--link--Color--hover);
15064
+ :root {
15065
+ --pf-v5-c-expandable-section__toggle--PaddingTop: var(--pf-t--global--spacer--sm);
15066
+ --pf-v5-c-expandable-section__toggle--PaddingRight: var(--pf-t--global--spacer--md);
15067
+ --pf-v5-c-expandable-section__toggle--PaddingBottom: var(--pf-t--global--spacer--sm);
15068
+ --pf-v5-c-expandable-section__toggle--PaddingLeft: var(--pf-t--global--spacer--sm);
15069
+ --pf-v5-c-expandable-section__toggle--Color: var(--pf-t--global--color--brand--default);
15070
+ --pf-v5-c-expandable-section__toggle--hover--Color: var(--pf-t--global--color--brand--hover);
15071
+ --pf-v5-c-expandable-section__toggle--active--Color: var(--pf-t--global--color--brand--hover);
15072
+ --pf-v5-c-expandable-section__toggle--focus--Color: var(--pf-t--global--color--brand--hover);
15073
+ --pf-v5-c-expandable-section__toggle--m-expanded--Color: var(--pf-t--global--color--brand--hover);
15064
15074
  --pf-v5-c-expandable-section__toggle--BackgroundColor: transparent;
15075
+ --pf-v5-c-expandable-section__toggle--ColumnGap: calc(var(--pf-t--global--spacer--xs) + var(--pf-t--global--spacer--sm));
15065
15076
  --pf-v5-c-expandable-section__toggle-icon--MinWidth: 1em;
15066
- --pf-v5-c-expandable-section__toggle-icon--Color: var(--pf-v5-global--Color--100);
15077
+ --pf-v5-c-expandable-section__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
15067
15078
  --pf-v5-c-expandable-section__toggle-icon--Transition: .2s ease-in 0s;
15068
15079
  --pf-v5-c-expandable-section__toggle-icon--Rotate: 0;
15069
15080
  --pf-v5-c-expandable-section__toggle-icon--m-expand-top--Rotate: 0;
15070
15081
  --pf-v5-c-expandable-section--m-expanded__toggle-icon--Rotate: 90deg;
15071
15082
  --pf-v5-c-expandable-section--m-expanded__toggle-icon--m-expand-top--Rotate: -90deg;
15072
- --pf-v5-c-expandable-section__toggle-text--MarginLeft: calc(var(--pf-v5-global--spacer--xs) + var(--pf-v5-global--spacer--sm));
15073
- --pf-v5-c-expandable-section__content--MarginTop: var(--pf-v5-global--spacer--md);
15083
+ --pf-v5-c-expandable-section__content--PaddingTop: var(--pf-t--global--spacer--sm);
15084
+ --pf-v5-c-expandable-section__content--PaddingRight: var(--pf-t--global--spacer--sm);
15085
+ --pf-v5-c-expandable-section__content--PaddingBottom: var(--pf-t--global--spacer--sm);
15086
+ --pf-v5-c-expandable-section__content--PaddingLeft: var(--pf-t--global--spacer--sm);
15074
15087
  --pf-v5-c-expandable-section__content--MaxWidth: auto;
15075
15088
  --pf-v5-c-expandable-section--m-limit-width__content--MaxWidth: 46.875rem;
15076
- --pf-v5-c-expandable-section--m-display-lg--BoxShadow: var(--pf-v5-global--BoxShadow--md);
15077
- --pf-v5-c-expandable-section--m-display-lg__toggle--PaddingTop: var(--pf-v5-global--spacer--md);
15078
- --pf-v5-c-expandable-section--m-display-lg__toggle--PaddingRight: var(--pf-v5-global--spacer--md);
15079
- --pf-v5-c-expandable-section--m-display-lg__toggle--PaddingBottom: var(--pf-v5-global--spacer--md);
15080
- --pf-v5-c-expandable-section--m-display-lg__toggle--PaddingLeft: var(--pf-v5-global--spacer--md);
15081
- --pf-v5-c-expandable-section--m-display-lg__content--MarginTop: 0;
15082
- --pf-v5-c-expandable-section--m-display-lg__content--PaddingRight: var(--pf-v5-global--spacer--lg);
15083
- --pf-v5-c-expandable-section--m-display-lg__content--PaddingBottom: var(--pf-v5-global--spacer--lg);
15084
- --pf-v5-c-expandable-section--m-display-lg__content--PaddingLeft: var(--pf-v5-global--spacer--lg);
15085
- --pf-v5-c-expandable-section--m-display-lg--after--BackgroundColor: transparent;
15086
- --pf-v5-c-expandable-section--m-display-lg--after--Width: var(--pf-v5-global--BorderWidth--lg);
15087
- --pf-v5-c-expandable-section--m-display-lg--m-expanded--after--BackgroundColor: var(--pf-v5-global--primary-color--100);
15088
- --pf-v5-c-expandable-section--m-indented__content--PaddingLeft: calc(var(--pf-v5-c-expandable-section__toggle-text--MarginLeft) + var(--pf-v5-c-expandable-section__toggle-icon--MinWidth));
15089
+ --pf-v5-c-expandable-section--m-display-lg--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
15090
+ --pf-v5-c-expandable-section--m-display-lg--BorderColor: var(--pf-t--global--border--color--default);
15091
+ --pf-v5-c-expandable-section--m-display-lg--BorderRadius: var(--pf-t--global--border--radius--medium);
15092
+ --pf-v5-c-expandable-section--m-display-lg__toggle--PaddingTop: var(--pf-t--global--spacer--md);
15093
+ --pf-v5-c-expandable-section--m-display-lg__toggle--PaddingRight: var(--pf-t--global--spacer--lg);
15094
+ --pf-v5-c-expandable-section--m-display-lg__toggle--PaddingBottom: var(--pf-t--global--spacer--md);
15095
+ --pf-v5-c-expandable-section--m-display-lg__toggle--PaddingLeft: var(--pf-t--global--spacer--lg);
15096
+ --pf-v5-c-expandable-section--m-display-lg__toggle--BorderRadius: var(--pf-t--global--border--radius--medium);
15097
+ --pf-v5-c-expandable-section--m-display-lg__toggle--Width: 100%;
15098
+ --pf-v5-c-expandable-section--m-display-lg__toggle--hover--BackgroundColor: var(--pf-t--global--background--color--secondary--hover);
15099
+ --pf-v5-c-expandable-section--m-display-lg__toggle--active--BackgroundColor: var(--pf-t--global--background--color--secondary--hover);
15100
+ --pf-v5-c-expandable-section--m-display-lg__toggle--focus--BackgroundColor: var(--pf-t--global--background--color--secondary--hover);
15101
+ --pf-v5-c-expandable-section--m-display-lg__content--PaddingRight: var(--pf-t--global--spacer--lg);
15102
+ --pf-v5-c-expandable-section--m-display-lg__content--PaddingBottom: var(--pf-t--global--spacer--md);
15103
+ --pf-v5-c-expandable-section--m-display-lg__content--PaddingLeft: var(--pf-t--global--spacer--lg);
15104
+ --pf-v5-c-expandable-section--m-expanded--m-display-lg__toggle--BorderRadius: var(--pf-t--global--border--radius--medium) var(--pf-t--global--border--radius--medium) 0 0;
15105
+ --pf-v5-c-expandable-section--m-indented__content--PaddingLeft--base: calc(var(--pf-v5-c-expandable-section__toggle--ColumnGap) + var(--pf-v5-c-expandable-section__toggle-icon--MinWidth));
15106
+ --pf-v5-c-expandable-section--m-indented__content--PaddingLeft: calc(var(--pf-v5-c-expandable-section--m-indented__content--PaddingLeft--base) + var(--pf-v5-c-expandable-section__toggle--PaddingLeft));
15107
+ --pf-v5-c-expandable-section--m-display-lg--m-indented__content--PaddingLeft: calc(var(--pf-v5-c-expandable-section--m-indented__content--PaddingLeft--base) + var(--pf-v5-c-expandable-section--m-display-lg__content--PaddingLeft));
15108
+ --pf-v5-c-expandable-section--m-truncate--PaddingTop: var(--pf-t--global--spacer--sm);
15109
+ --pf-v5-c-expandable-section--m-truncate--PaddingRight: var(--pf-t--global--spacer--md);
15110
+ --pf-v5-c-expandable-section--m-truncate--PaddingBottom: var(--pf-t--global--spacer--sm);
15111
+ --pf-v5-c-expandable-section--m-truncate--PaddingLeft: var(--pf-t--global--spacer--md);
15112
+ --pf-v5-c-expandable-section--m-truncate__toggle--PaddingBottom: var(--pf-t--global--spacer--sm);
15089
15113
  --pf-v5-c-expandable-section--m-truncate__content--LineClamp: 3;
15090
- --pf-v5-c-expandable-section--m-truncate__toggle--MarginTop: var(--pf-v5-global--spacer--xs);
15091
15114
  }
15115
+
15092
15116
  .pf-v5-c-expandable-section.pf-m-expanded {
15093
15117
  --pf-v5-c-expandable-section__toggle--Color: var(--pf-v5-c-expandable-section__toggle--m-expanded--Color);
15094
15118
  --pf-v5-c-expandable-section__toggle-icon--Rotate: var(--pf-v5-c-expandable-section--m-expanded__toggle-icon--Rotate);
15095
15119
  --pf-v5-c-expandable-section__toggle-icon--m-expand-top--Rotate: var(--pf-v5-c-expandable-section--m-expanded__toggle-icon--m-expand-top--Rotate);
15096
15120
  --pf-v5-c-expandable-section--m-display-lg--after--BackgroundColor: var(--pf-v5-c-expandable-section--m-display-lg--m-expanded--after--BackgroundColor);
15097
- }
15098
- .pf-v5-c-expandable-section.pf-m-detached, .pf-v5-c-expandable-section.pf-m-truncate {
15099
- --pf-v5-c-expandable-section__content--MarginTop: 0;
15121
+ --pf-v5-c-expandable-section--m-display-lg__toggle--BorderRadius: var(--pf-v5-c-expandable-section--m-expanded--m-display-lg__toggle--BorderRadius);
15100
15122
  }
15101
15123
  .pf-v5-c-expandable-section.pf-m-limit-width {
15102
15124
  --pf-v5-c-expandable-section__content--MaxWidth: var(--pf-v5-c-expandable-section--m-limit-width__content--MaxWidth);
@@ -15106,31 +15128,31 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
15106
15128
  --pf-v5-c-expandable-section__toggle--PaddingRight: var(--pf-v5-c-expandable-section--m-display-lg__toggle--PaddingRight);
15107
15129
  --pf-v5-c-expandable-section__toggle--PaddingBottom: var(--pf-v5-c-expandable-section--m-display-lg__toggle--PaddingBottom);
15108
15130
  --pf-v5-c-expandable-section__toggle--PaddingLeft: var(--pf-v5-c-expandable-section--m-display-lg__toggle--PaddingLeft);
15131
+ --pf-v5-c-expandable-section__toggle--hover--BackgroundColor: var(--pf-v5-c-expandable-section--m-display-lg__toggle--hover--BackgroundColor);
15132
+ --pf-v5-c-expandable-section__toggle--active--BackgroundColor: var(--pf-v5-c-expandable-section--m-display-lg__toggle--active--BackgroundColor);
15133
+ --pf-v5-c-expandable-section__toggle--focus--BackgroundColor: var(--pf-v5-c-expandable-section--m-display-lg__toggle--focus--BackgroundColor);
15134
+ --pf-v5-c-expandable-section__toggle--BorderRadius: var(--pf-v5-c-expandable-section--m-display-lg__toggle--BorderRadius);
15135
+ --pf-v5-c-expandable-section__toggle--Width: var(--pf-v5-c-expandable-section--m-display-lg__toggle--Width);
15109
15136
  --pf-v5-c-expandable-section__content--PaddingRight: var(--pf-v5-c-expandable-section--m-display-lg__content--PaddingRight);
15110
15137
  --pf-v5-c-expandable-section__content--PaddingBottom: var(--pf-v5-c-expandable-section--m-display-lg__content--PaddingBottom);
15111
15138
  --pf-v5-c-expandable-section__content--PaddingLeft: var(--pf-v5-c-expandable-section--m-display-lg__content--PaddingLeft);
15112
- --pf-v5-c-expandable-section__content--MarginTop: var(--pf-v5-c-expandable-section--m-display-lg__content--MarginTop);
15113
- position: relative;
15114
- box-shadow: var(--pf-v5-c-expandable-section--m-display-lg--BoxShadow);
15115
- }
15116
- .pf-v5-c-expandable-section.pf-m-display-lg::after {
15117
- position: absolute;
15118
- inset-block-start: 0;
15119
- inset-block-end: 0;
15120
- inset-inline-start: 0;
15121
- width: var(--pf-v5-c-expandable-section--m-display-lg--after--Width);
15122
- content: "";
15123
- background-color: var(--pf-v5-c-expandable-section--m-display-lg--after--BackgroundColor);
15139
+ --pf-v5-c-expandable-section--m-indented__content--PaddingLeft: var(--pf-v5-c-expandable-section--m-display-lg--m-indented__content--PaddingLeft);
15140
+ background-color: var(--pf-v5-c-expandable-section--m-display-lg--BackgroundColor);
15141
+ border: solid 1px var(--pf-v5-c-expandable-section--m-display-lg--BorderColor);
15142
+ border-radius: var(--pf-v5-c-expandable-section--m-display-lg--BorderRadius);
15124
15143
  }
15125
15144
  .pf-v5-c-expandable-section.pf-m-indented {
15126
15145
  --pf-v5-c-expandable-section__content--PaddingLeft: var(--pf-v5-c-expandable-section--m-indented__content--PaddingLeft);
15127
15146
  }
15128
15147
  .pf-v5-c-expandable-section.pf-m-truncate {
15129
- --pf-v5-c-expandable-section__toggle--MarginTop: var(--pf-v5-c-expandable-section--m-truncate__toggle--MarginTop);
15130
15148
  --pf-v5-c-expandable-section__toggle--PaddingTop: 0;
15131
15149
  --pf-v5-c-expandable-section__toggle--PaddingRight: 0;
15132
- --pf-v5-c-expandable-section__toggle--PaddingBottom: 0;
15133
- --pf-v5-c-expandable-section__toggle-text--MarginLeft: 0;
15150
+ --pf-v5-c-expandable-section__toggle--PaddingBottom: var(--pf-v5-c-expandable-section--m-truncate__toggle--PaddingBottom);
15151
+ --pf-v5-c-expandable-section__toggle--PaddingLeft: 0;
15152
+ --pf-v5-c-expandable-section__content--PaddingTop: 0;
15153
+ --pf-v5-c-expandable-section__content--PaddingRight: 0;
15154
+ --pf-v5-c-expandable-section__content--PaddingBottom: 0;
15155
+ --pf-v5-c-expandable-section__content--PaddingLeft: 0;
15134
15156
  }
15135
15157
  .pf-v5-c-expandable-section.pf-m-truncate:not(.pf-m-expanded) .pf-v5-c-expandable-section__content {
15136
15158
  display: -webkit-box;
@@ -15138,29 +15160,31 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
15138
15160
  -webkit-line-clamp: var(--pf-v5-c-expandable-section--m-truncate__content--LineClamp);
15139
15161
  overflow: hidden;
15140
15162
  }
15141
- .pf-v5-c-expandable-section.pf-m-detached {
15142
- --pf-v5-c-expandable-section--m-truncate__toggle--MarginTop: 0;
15143
- }
15144
15163
 
15145
15164
  .pf-v5-c-expandable-section__toggle {
15146
15165
  display: flex;
15166
+ column-gap: var(--pf-v5-c-expandable-section__toggle--ColumnGap);
15167
+ width: var(--pf-v5-c-expandable-section__toggle--Width, initial);
15147
15168
  padding-block-start: var(--pf-v5-c-expandable-section__toggle--PaddingTop);
15148
15169
  padding-block-end: var(--pf-v5-c-expandable-section__toggle--PaddingBottom);
15149
15170
  padding-inline-start: var(--pf-v5-c-expandable-section__toggle--PaddingLeft);
15150
15171
  padding-inline-end: var(--pf-v5-c-expandable-section__toggle--PaddingRight);
15151
- margin-block-start: var(--pf-v5-c-expandable-section__toggle--MarginTop);
15152
15172
  color: var(--pf-v5-c-expandable-section__toggle--Color);
15153
15173
  background-color: var(--pf-v5-c-expandable-section__toggle--BackgroundColor);
15154
15174
  border: none;
15175
+ border-radius: var(--pf-v5-c-expandable-section__toggle--BorderRadius, 0);
15155
15176
  }
15156
15177
  .pf-v5-c-expandable-section__toggle:hover {
15157
15178
  --pf-v5-c-expandable-section__toggle--Color: var(--pf-v5-c-expandable-section__toggle--hover--Color);
15179
+ --pf-v5-c-expandable-section__toggle--BackgroundColor: var(--pf-v5-c-expandable-section__toggle--hover--BackgroundColor, initial);
15158
15180
  }
15159
15181
  .pf-v5-c-expandable-section__toggle:active, .pf-v5-c-expandable-section__toggle.pf-m-active {
15160
15182
  --pf-v5-c-expandable-section__toggle--Color: var(--pf-v5-c-expandable-section__toggle--active--Color);
15183
+ --pf-v5-c-expandable-section__toggle--BackgroundColor: var(--pf-v5-c-expandable-section__toggle--active--BackgroundColor, initial);
15161
15184
  }
15162
15185
  .pf-v5-c-expandable-section__toggle:focus {
15163
15186
  --pf-v5-c-expandable-section__toggle--Color: var(--pf-v5-c-expandable-section__toggle--focus--Color);
15187
+ --pf-v5-c-expandable-section__toggle--BackgroundColor: var(--pf-v5-c-expandable-section__toggle--focus--BackgroundColor, initial);
15164
15188
  }
15165
15189
 
15166
15190
  .pf-v5-c-expandable-section__toggle-icon {
@@ -15177,16 +15201,12 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
15177
15201
  --pf-v5-c-expandable-section__toggle-icon--Rotate: var(--pf-v5-c-expandable-section__toggle-icon--m-expand-top--Rotate);
15178
15202
  }
15179
15203
 
15180
- .pf-v5-c-expandable-section__toggle-text {
15181
- margin-inline-start: var(--pf-v5-c-expandable-section__toggle-text--MarginLeft);
15182
- }
15183
-
15184
15204
  .pf-v5-c-expandable-section__content {
15185
15205
  max-width: var(--pf-v5-c-expandable-section__content--MaxWidth);
15206
+ padding-block-start: var(--pf-v5-c-expandable-section__content--PaddingTop);
15186
15207
  padding-block-end: var(--pf-v5-c-expandable-section__content--PaddingBottom);
15187
15208
  padding-inline-start: var(--pf-v5-c-expandable-section__content--PaddingLeft);
15188
15209
  padding-inline-end: var(--pf-v5-c-expandable-section__content--PaddingRight);
15189
- margin-block-start: var(--pf-v5-c-expandable-section__content--MarginTop);
15190
15210
  }
15191
15211
 
15192
15212
  .pf-v5-c-file-upload {